@charset "utf-8";


@import url(../../font/Eulyoo1945/font.css);


/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	Main Common

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
p{margin:0;}
#main,p,span,a,a:link{line-height:1.5; color:#171717;}
#main a{text-decoration:none;}




/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	Visual

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */
#main #visual{
	position: relative;
	font-size:10px;
	transition:all 0.2s ease; -webkit-transition:all 0.2s ease;
}

#main #visual .vbx{position:relative; height:calc(100vh + 2em)}
#main #visual .vbx >.in {position: relative; z-index: 1; top: 20em;}
#main #visual .vbx >.in img {display: block; width: 6.5em;}
#main #visual .vbx >.in .js_slide_title {font-size: 7.5em; color: #fff; line-height: 1.3; margin-top: 10px;}
#main #visual .vbx >.in .js_slide_title span{font-family: 'Eulyoo1945'; color: #fff;}


#main #visual .vbx .move{overflow:hidden; position:absolute; z-index:0; top:0; left:0; width:100%; height:100%;}
#main #visual .vbx .move ul{overflow:hidden; position:absolute; left:0; top:0; width:100%; height:100%;}
#main #visual .vbx .move ul li{position:absolute; left:100%; top:0; width:100%; height:100%;}
#main #visual .vbx .move ul li::after{content: "";position: absolute;top: 0;bottom: 0;width: 100%;height: 100%;background-color: rgba(0,0,0,.4);z-index: 0;}
#main #visual .vbx .move ul li[data-count="1"]{left:0;}
#main #visual .vbx .move ul li .bgs{
	overflow:hidden; position:absolute; top:0; left:0; width:100%; height:100%; text-indent:-2000px;
	transition:transform 1s ease; -webkit-transition:transform 1s ease;
}
#main #visual .vbx .move ul li[data-count="1"] .bgs{background:url(../../images/1000y/main/visual_01.jpg) no-repeat center; background-size:cover;}
#main #visual .vbx .move ul li[data-count="2"] .bgs{background:url(../../images/1000y/main/visual_02.jpg) no-repeat center; background-size:cover;}
#main #visual .vbx .move ul li[data-count="3"] .bgs{background:url(../../images/1000y/main/visual_03.jpg) no-repeat center; background-size:cover;}
#main #visual .vbx .move ul li.on .bgs{
	animation-name:visual_eff;
	animation-duration:2s;
	animation-timing-function:linear;
}
@keyframes visual_eff{
	0%{transform:scale(1.1);}
	100%{transform:scale(1);}
}


#main #visual .vbx .move ul li .txts{position: absolute; width:100%; max-width: 192em; top:26% ;left: 50%; transform: translateX(-50%);text-align: center; box-sizing:border-box;z-index: 1;}
#main #visual .vbx .move ul li .txts>.visual_title_box{position: relative;}
#main #visual .vbx .move ul li .txts>.visual_title_box::before{content: "";position: absolute;width: 2px;height: 4em;margin: 0 auto; top: calc(100% + 5%);left: 0;right: 0;background-color: #fff;}
#main #visual .vbx .move ul li .txts>.visual_title_box>p{font-size:2.4em;font-weight: 400;color: #fff;letter-spacing:2.2px}
#main #visual .vbx .move ul li .txts>.visual_title_box>strong{display: block; margin-top: 0.1em;font-size:7.4em;font-family: 'Eulyoo1945';font-weight: 600;color: #fff;}
#main #visual .vbx .move ul li .txts>.visual_title_box>strong>em{font-style: normal; color: #fff;}
@supports(-webkit-text-stroke: 1px black){
    #main #visual .vbx .move ul li .txts>.visual_title_box>strong>em{
        color: transparent;
        -webkit-text-stroke: 1px #fff;
    }
}
      
#main #visual .vbx .move ul li .txts>.visual_title_box>span{display: block; margin-top: 1em; font-size:2em;color: #fff;opacity: 0.8;}

#main #visual .vbx .move ul li .txts>.visual_title_box::before,
#main #visual .vbx .move ul li .txts>.visual_title_box>p,
#main #visual .vbx .move ul li .txts>.visual_title_box>strong,
#main #visual .vbx .move ul li .txts>.visual_title_box>span
{
	opacity: 0;
	-webkit-animation-name: text-ani;
    -webkit-animation-fill-mode: forwards;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 2s;
    -webkit-animation-timing-function: linear;
    animation-name: text-ani;
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    animation-duration: 2s;
    animation-timing-function: linear
}

#main #visual .vbx .move ul li .txts>.visual_title_box::before{
	-webkit-animation-delay: 1s;
    animation-delay: 1s
}

#main #visual .vbx .move ul li .txts>.visual_title_box>p,
#main #visual .vbx .move ul li .txts>.visual_title_box>strong{
	-webkit-animation-delay: 0.3s;
    animation-delay: 0.3s
}
#main #visual .vbx .move ul li .txts>.visual_title_box>span{
	-webkit-animation-delay: 0.8s;
    animation-delay:0.8s
}


@-webkit-keyframes text-ani {
    0% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes text-ani {
    0% {
        opacity: 0;
        -webkit-transform: translateY(30px);
        transform: translateY(30px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}
 


#main #visual .vbx .vbx_layout{position: absolute; width: 100%; top: auto; bottom: 12em;left: 50%;transform: translateX(-50%); text-align: center; }
#main #visual .vbx .vbx_layout>.visual_menu_box>ul{display: flex;justify-content: center;align-items: center;}
#main #visual .vbx .vbx_layout>.visual_menu_box>ul>li{margin: 0 1px;}
#main #visual .vbx .vbx_layout>.visual_menu_box>ul>li>a{position: relative; display: block;height: 100%;padding: 5em 8em;background-color:rgba(0, 0, 0, 0.5);transform:scale(1); transition: transform .3s;}
#main #visual .vbx .vbx_layout>.visual_menu_box>ul>li>a>span{ display: block;height: 100%; font-size: 2.2em;color: #fff;font-weight: 600;text-align: center;word-break: keep-all;}

#main #visual .vbx .vbx_layout>.visual_menu_box>ul>li>a:hover{background-color: rgba(0, 100, 202, 0.7);border-radius: 24px 0px;transform: scale(1.2);z-index: 1;}

#main #visual .vbx .control{position: absolute; display: flex;justify-content: center;align-items: center; width:100%; margin: 0 auto; top: auto;bottom: 6em;left: 0;right: 0;}
#main #visual .vbx .control a{overflow:hidden; text-indent:-2000px;}
#main #visual .vbx .control .btn_left,
#main #visual .vbx .control .btn_right{
	opacity:1; position:static; width:1.7em; height:1.7em; margin: 0 8px; background:url(../../images/1000y/main/visual_arrow.svg) no-repeat 0 0;
	transition:all 0.3s ease; -webkit-transition:all 0.3s ease;
}
#main #visual .vbx .control .btn_left{left:390px; transform:rotate(180deg);}
#main #visual .vbx .control .btn_right{left:415px;}
#main #visual .vbx .control .btn_play,
#main #visual .vbx .control .btn_stop{width: 1.8em; height: 1.8em;margin-left: 2em;}
#main #visual .vbx .control .btn_play{background:url(../../images/1000y/main/visual_control_play_on.svg) no-repeat center;background-size: contain;}
#main #visual .vbx .control .btn_stop{background:url(../../images/1000y/main/visual_control_stop_on.svg) no-repeat center;background-size: contain;}
#main #visual .vbx .control>ul{display: flex;justify-content: center; height:3px; }
#main #visual .vbx .control>ul>li{display:inline-block; width: 6.8em; height: 100%; vertical-align:middle;}
#main #visual .vbx .control>ul>li:not(:first-child){margin-left:0.5em;}
#main #visual .vbx .control>ul>li>a{overflow:hidden; display:block; width:100%; height:100%; background-color:rgba(255, 255, 255, 0.2);}

#main #visual .vbx .control .btn_left:hover,
#main #visual .vbx .control .btn_right:hover{opacity:1;}
#main #visual .vbx .control>ul>li>a.on{background-color:#fff;}


@media screen and (max-width:1024px){
	#main #visual{font-size:9px;margin-top:8em;}
	#main #visual .vbx{height:71.5em;}
	#main #visual .vbx .move ul li::after{opacity: 1;}
	#main #visual .vbx .move ul li .txts {top: 14%;}
	#main #visual .vbx .vbx_layout>.visual_menu_box>ul>li>a{padding: 3em 6em;}
	
	#main #visual .vbx .control .btn_play,
	#main #visual .vbx .control .btn_stop{bottom:5.2em; left:calc(50% + 6.2em);}
	#main #visual .vbx .control .btn_left,
	#main #visual .vbx .control .btn_right,
	#main #visual .vbx .control .btn_play,
	#main #visual .vbx .control .btn_stop{ width: 16px; height: 16px;}
	#main #visual .vbx .control .btn_left,
	#main #visual .vbx .control .btn_right{margin: 0 14px;}
	#main #visual .vbx .control .btn_left{left:417px}
	#main #visual .vbx .control .btn_right{left: 443px;}


}
@media screen and (max-width:640px){
	#main #visual{font-size:8px;margin-top: 7em;}
	#main #visual::after,
	#main #visual::before{display: none;}
	#main #visual .vbx{height:68.75em;}
	#main #visual .vbx >.in{width: calc(100% - 15em);}
	#main #visual .vbx >.in .js_slide_title{font-size: 6.25em;word-break: keep-all;}

	#main #visual .vbx .move ul li .txts>.visual_title_box>strong{font-size: 10vw;}
	#main #visual .vbx .move ul li .txts>.visual_title_box>span{display: none;}	
	
	#main #visual .vbx .vbx_layout>.visual_menu_box>ul{flex-wrap: wrap;}
	#main #visual .vbx .vbx_layout>.visual_menu_box>ul>li{width: calc((100% - 4px) / 2);margin: 1px;}
	#main #visual .vbx .vbx_layout>.visual_menu_box>ul>li>a{padding: 4em 2em;}

	#main #visual .vbx .control{bottom: 4em;}
	#main #visual .vbx .control .btn_left,
	#main #visual .vbx .control .btn_right{font-size:0.6em;}
	#main #visual .vbx .control .btn_left {left: 90%;}
	#main #visual .vbx .control .btn_right{left: 96%;}
}

@media screen and (max-width:420px){
	#main #visual{font-size:7px;}
	
	#main #visual .vbx >.in .js_slide_title{font-size: 6.22em;}
	#main #visual .vbx >.in .js_slide_title span{display: block;}
	
}




/* ///////////////////////////////////////////////////////////////////////////////////////////////////////////
	
	Content

/////////////////////////////////////////////////////////////////////////////////////////////////////////// */

#main #content{
	position:relative; font-size:10px;
	-webkit-transition:all 0.2s ease; transition:all 0.2s ease;
}
#main #content:before{content:""; position:absolute; top:0; left:0; z-index:-1; width:100%; height:92.7em; background-color:#fff;}
#main #content h2{line-height:1.5; margin-bottom: 40px; font-size: 4.5em;}

@media screen and (max-width:1240px){
	#main #content:before{height:94em;}
}
@media screen and (max-width:1024px){
	#main #content{font-size:9px;}
	#main #content:before{height:71em;}

}
@media screen and (max-width:640px){
	#main #content{font-size:8px;}
	#main #content .layout{width:calc(100% - 4em);word-break: keep-all;}
	#main #content h2 {margin-bottom: 20px !important;font-size: 3.5em;line-height: 1.2;}
}




/**** Section01 ******/

#main #content .sec_01 {height: 82em; background: url('../../images/1000y/main/bg_section_01.png') no-repeat;background-size: cover;position: relative;}

#main #content .sec_01 .layout { position: relative; max-width: 100%;width: 100%; -webkit-transition:all 0.2s ease; transition:all 0.2s ease;}
#main #content .sec_01 .layout>.inner{padding-top: 14em;}
#main #content .sec_01 .layout>.inner>._left{position: absolute; width: 48em;left: calc(50% - 74em);}
#main #content .sec_01 .layout>.inner>._left>.title_box{}
#main #content .sec_01 .layout>.inner>._left>.title_box>strong{position: relative; display: block;font-size: 5.4em;font-family: 'Eulyoo1945';font-weight: 600;color: #222;}
#main #content .sec_01 .layout>.inner>._left>.title_box>strong::before{content: "";position: absolute;width: 60px;height: 2px;margin: auto 0; top: 0;bottom: 0;right: calc(100% + 0.5em);background-color:#0064CA;}
#main #content .sec_01 .layout>.inner>._left>.title_box>p{margin-top: 1.3em; font-size: 1.8em;color: #444;word-break: keep-all;}
#main #content .sec_01 .layout>.inner>._left>.title_box>.more_btn{display: block;width: 6.3em;height: 6.3em;margin-top: 3em; border-radius: 50%;background-color: #0064CA; background-image: url(../../images/1000y/layout/icon_arrow_right_w.svg);background-repeat: no-repeat;background-position: center;transition: all .3s;}
#main #content .sec_01 .layout>.inner>._left>.title_box>.more_btn:hover{background-color: #0050a2;}
#main #content .sec_01 .layout>.inner>._left>.inform_box{position: relative; display: flex; width: 46em;height: 20.6em; margin-top: 4.5em;background-image: url(../../images/1000y/main/img_ticket.png);background-repeat: no-repeat;background-position: center;background-size: 52em; box-shadow: 10px 5px 50px rgba(0,0,0,0.05);}
#main #content .sec_01 .layout>.inner>._left>.inform_box>.__left{flex-shrink:0; width: 16em;padding-top: 3em; text-align: center; background-image: url(../../images/1000y/main/icon_clock.svg);background-repeat: no-repeat;background-position: center 75%;}
#main #content .sec_01 .layout>.inner>._left>.inform_box>.__left>strong{font-size: 2.6em;font-weight: 500;}

#main #content .sec_01 .layout>.inner>._left>.inform_box>.__right{padding-left: 5em;padding-top: 3em;}
#main #content .sec_01 .layout>.inner>._left>.inform_box>.__right>p{margin-bottom: 0.5em; font-size: 2.4em;color: #222;font-weight: 500;}
#main #content .sec_01 .layout>.inner>._left>.inform_box>.__right>p>em{font-style: normal;color: #0064CA;}
#main #content .sec_01 .layout>.inner>._left>.inform_box>.__right>span{display: block; font-size: 1.8em;color: #444;}
#main #content .sec_01 .layout>.inner>._left>.inform_box>.__right>.point{color: #B51521;}


#main #content .sec_01 .layout>.inner>._right{position: absolute;width: calc(50% + 24em); top: 14.6em;right: 0;}

#main #content .sec_01 .spots_slice{width: 100%;}
#main #content .sec_01 .spots_slice .js_slide{position:relative; height:54em; width: 100%; padding-left: 4em; box-sizing:border-box;overflow-x: hidden;}
#main #content .sec_01 .spots_slice .js_slide .title{display:block; position:absolute; left:0; top:12px; z-index:1; width:120px; font-size:18px; text-align:center;}
#main #content .sec_01 .spots_slice .js_slide .control{position:absolute; display: flex; justify-content: space-between; width: calc(100% - 2em); max-width: 88em; padding: 0; left:2em; right:auto; top:calc(50% - 5.2em); z-index:1;text-align:center;}
#main #content .sec_01 .spots_slice .js_slide .control::after{content: "";position:absolute;display: block;width: .1px;height: 67%;background-color: #fff;top: 43%;left: 50%;transform: translate(-50%,-50%);opacity: .2;}
#main #content .sec_01 .spots_slice .js_slide .control .count{display:none;}
#main #content .sec_01 .spots_slice .js_slide .control a[class*="btn_"]{position: relative;overflow:hidden; display:inline-block; width:5.2em; height:5.2em; border-radius: 50%; box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.2); background-color: rgba(255, 255, 255, 0.8); text-indent:-1000px;transition: all .3s;}
#main #content .sec_01 .spots_slice .js_slide .control a[class*="btn_"]::before{content: "";position: absolute;width: 1.8em;height: 1.8em;margin: auto; top: 0;bottom: 0;left: 0;right: 0; background-image: url(../../images/1000y/main/sec02_control_arrow.svg);background-repeat: no-repeat; background-size: contain;background-position: center;transform: scale(1);opacity: 0.6; transition: all 0.3s;}
#main #content .sec_01 .spots_slice .js_slide .control a[class*="btn_"]:hover::before{transform: scale(1.2);opacity: 1;}
#main #content .sec_01 .spots_slice .js_slide .control a.btn_play,
#main #content .sec_01 .spots_slice .js_slide .control a.btn_stop{left: 7em;width: 2em;height: 2em;bottom: 0.2em;opacity: 1;}
#main #content .sec_01 .spots_slice .js_slide .control a.btn_play{display:none; background-position:0 -93px;background-image: url(../../images/1000y/main/sec02_control_play_03.svg); background-position: center;}
#main #content .sec_01 .spots_slice .js_slide .control a.btn_stop{background-position:0 -62px;background-image: url(../../images/1000y/main/sec02_control_stop_03.svg); background-position: center; }
#main #content .sec_01 .spots_slice .js_slide .control a.btn_left{left: 0; right: auto; transform: rotate(180deg);}
#main #content .sec_01 .spots_slice .js_slide .control a.btn_right{left: auto; right: 0;}
#main #content .sec_01 .spots_slice .js_slide .control ul{display:none;}
#main #content .sec_01 .spots_slice .js_slide .move{ position:relative; z-index:0; width: 100%; height:100%;overflow-x: auto;}
#main #content .sec_01 .spots_slice .js_slide .move ul{ position:absolute; display: flex; left:0; top:0; width:100%; height:100%; margin-left: -2em;}
#main #content .sec_01 .spots_slice .js_slide .move ul li{flex-shrink: 0; height:100%; padding:0px 2em;}
#main #content .sec_01 .spots_slice .js_slide .move ul li a{display:block; position:relative; height:100%; max-width:40em; text-align:center; box-sizing:border-box;transition:all 0.3s ease; -webkit-transition:all 0.3s ease;cursor: inherit;}
/* #main #content .sec_01 .spots_slice .js_slide .move ul li a:hover .img-box img{transform: scale(1.1);} */
#main #content .sec_01 .spots_slice .js_slide .move ul li a span{display:block; position:absolute; left:50%; top:0; width:2000px; height:100%; margin-left:-1000px; text-align:center;}
#main #content .sec_01 .spots_slice .js_slide .move ul li .img-box {border-radius:35px 0 35px 0; overflow: hidden;box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.2); transition: .4s;}
#main #content .sec_01 .spots_slice .js_slide .move ul li img{display:block; margin:0 auto; height:100%; width: 100%; -webkit-transition:all 0.4s ease; transition:all 0.4s ease;}
#main #content .sec_01 .spots_slice .js_slide .move ul li .subtxt {margin-top: 3.8em;text-align: left;}
#main #content .sec_01 .spots_slice .js_slide .move ul li .subtxt .tit {font-size: 2.4em; font-weight: bold; color: #fff; white-space: nowrap;text-overflow: ellipsis; overflow: hidden;}
#main #content .sec_01 .spots_slice .js_slide .move ul li .subtxt .des { display: -webkit-box; -webkit-box-orient: vertical; word-wrap: break-word; -webkit-line-clamp: 3; text-overflow: ellipsis; font-family: 'NotoSansCJKkr'; font-weight: 300; font-size: 1.8em; letter-spacing: 0; color: #fff; opacity: 0.6; margin-top: 0.5em;overflow: hidden;max-height: 5.5em;}


@media screen and (max-width:1520px){
	#main #content .sec_01 .layout>.inner>._left{left: 2em;}
	#main #content .sec_01 .layout>.inner>._right{width: calc(100% - 50em); left: auto;right: 0;}
}


@media screen and (max-width:1024px){
	#main #content .sec_01{height: 100em;}
	#main #content .sec_01::before {right: 9em;height: 4em;}
	#main #content .sec_01>.layout{width: 100%;}
	#main #content .sec_01 .layout>.inner{padding-top: 8em;}
	#main #content .sec_01 .layout>.inner>._left{position: initial; width: calc(100% - 4em);margin: 0 auto;padding-left: 0;}
	#main #content .sec_01 .layout>.inner>._left>.title_box{display: flex;align-items: center;justify-content: space-between;}
	#main #content .sec_01 .layout>.inner>._left>.title_box>strong::before{display: none;}
	#main #content .sec_01 .layout>.inner>._left>.title_box>p{display: none;}
	#main #content .sec_01 .layout>.inner>._left>.title_box>.more_btn{flex-shrink: 0;margin-top: 0;}
	

	#main #content .sec_01 .layout>.inner>._right{position: initial;width: 100%;padding-left: 2em;margin-top: 5em; overflow: hidden;}
	#main #content .sec_01 .layout>.inner>._right>.spots_slice{width: auto;overflow-x: auto;}
	#main #content .sec_01 .layout>.inner>._right>.spots_slice .js_slide{position: initial;width: auto;height: 100%; padding-left: 0; overflow-x: inherit;}
	#main #content .sec_01 .layout>.inner>._right>.spots_slice .js_slide .move{position: initial;width: auto;height: 100%;padding-bottom: 2em;overflow-x: auto;}
	#main #content .sec_01 .layout>.inner>._right>.spots_slice .js_slide .move ul{position: initial;display: flex;width: auto;height: 100%;}
	#main #content .sec_01 .layout>.inner>._right>.spots_slice .js_slide .move ul li{float: none;flex-shrink: 0;width: 36em;}
	#main #content .sec_01 .layout>.inner>._right>.spots_slice .js_slide .move ul li:last-child{padding-right: 5em;}

	#main #content .sec_01 .layout>.inner>._right>.spots_slice .js_slide .control{display: none;}

}

@media screen and (max-width:640px){
	#main #content .sec_01{height: 85em;}
	#main #content .sec_01::before,
	#main #content .sec_01::after{display: none;}
	#main #content .sec_01 .layout{padding: 3em 0 6em;}
	#main #content .sec_01 .layout>.inner{padding-top: 0;}

	#main #content .sec_01 .layout>.inner>._left>.inform_box{width: 100%; height: 23em;margin: 1em auto 0 auto;background-size: 100% 23em;box-shadow: none;}
	#main #content .sec_01 .layout>.inner>._left>.inform_box>.__left{width: 40%;padding-top: 4em;background-position: center 65%;}
	#main #content .sec_01 .layout>.inner>._left>.inform_box>.__right{width: 60%;padding-top: 4em;padding-left: 5%;padding-right: 8%;}
	#main #content .sec_01 .layout>.inner>._left>.title_box>strong{font-size: 3.5em;}
	#main #content .sec_01 .layout>.inner>._left>.title_box>.more_btn{width: 4.8em;height: 4.8em;background-size:2.2em}

	#main #content .sec_01 .layout>.inner>._right{margin-top: 3em;}
	#main #content .sec_01 .layout>.inner>._right>.spots_slice .js_slide{height: 44em;}
	#main #content .sec_01 .layout>.inner>._right>.spots_slice .js_slide .move{padding-bottom: 0;}
	#main #content .sec_01 .layout>.inner>._right>.spots_slice .js_slide .move ul li{width: 32em;}
	#main #content .sec_01 .layout>.inner>._right>.spots_slice .js_slide .move ul li a{max-width: 32em;}
}

@media screen and (max-width:450px){
	
	#main #content .sec_01 .layout{padding: 3em 0 0;}
	#main #content .sec_01 .layout .main_title_box{flex-wrap: wrap;gap: 0 6em;}
	#main #content .sec_01 h2{margin-bottom: 0 !important; width: 100%;}
	
	#main #content .sec_01 .layout>.inner>._left>.title_box>.more_btn{width: 4.5em;height: 4.5em;background-size: 2em;}

	#main #content .sec_01 .layout>.inner>._left>.inform_box>.__left>strong,
	#main #content .sec_01 .layout>.inner>._left>.inform_box>.__right>p{font-size: 16px;}
	#main #content .sec_01 .layout>.inner>._left>.inform_box>.__right>span{font-size: 14px;}
	

}





/**** Section02 ******/

#main #content .sec_02{background-color:#10223E}
#main #content .sec_02>.layout{position: initial;}
#main #content .sec_02 .inner{display: flex;}
#main #content .sec_02 .inner>li{position: relative;display: block;height: 54.7em;z-index: 10;}
#main #content .sec_02 .inner>.left_box{width: 64.5%;padding: 4.5% 12.2em 4.5% 0;box-sizing: border-box;}
#main #content .sec_02 .inner>.left_box::before{content: "";position: absolute; width: 20000px;height: 100%;top: 0;right: 0;background-color:#10223E;z-index: -1;}

#main #content .sec_02 .inner>.left_box>.notice_board{display: flex;justify-content: space-between;padding-bottom:4em;border-bottom:1px solid rgba(255, 255, 255, 0.2);min-height: 13em;}
#main #content .sec_02 .inner>.left_box>.notice_board>strong{display: flex;justify-content: space-between; min-width: 3.5em; max-width: 4.5em; width: 100%; padding-right: 10%;font-size: 2.6em;color: #fff;font-weight: 500;}
#main #content .sec_02 .inner>.left_box>.notice_board>.notice_table{flex: 1;}
#main #content .sec_02 .inner>.left_box>.notice_board>.notice_table>ul>li{display:flex;justify-content: space-between;margin-top: 0.5em;}
#main #content .sec_02 .inner>.left_box>.notice_board>.notice_table>ul>li~li{margin-top: 2em;}
#main #content .sec_02 .inner>.left_box>.notice_board>.notice_table>ul>li>a{position:relative;display: block;padding-left: 1.2em;padding-right: 1em; margin-right: 2em; overflow: hidden;}
#main #content .sec_02 .inner>.left_box>.notice_board>.notice_table>ul>li>a.new{padding-right: 3.2em;}
#main #content .sec_02 .inner>.left_box>.notice_board>.notice_table>ul>li>a::before{content: "";position: absolute;width: 5px;height: 5px;top: 11px;left: 0;border-radius: 50%;background-color: #fff;}
#main #content .sec_02 .inner>.left_box>.notice_board>.notice_table>ul>li>a.new::after{content: "N";position: absolute;display: flex;align-items: center;justify-content: center; width: 1.8em;height: 1.8em;margin: auto 0; top: 0;bottom: 0;right: 0; color: #fff; text-align: center; font-weight: 600; font-size: 1.4em; border-radius: 50%;background-color:#7B6D65;}
#main #content .sec_02 .inner>.left_box>.notice_board>.notice_table>ul>li>a>span{display: block;font-size:2em;color: #fff;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
#main #content .sec_02 .inner>.left_box>.notice_board>.notice_table>ul>li>P{flex-shrink: 0; font-size: 2em;color: #fff;opacity: 0.8;}

#main #content .sec_02 .inner>.left_box>.ask_box{display: flex;padding-top: 4em;}
#main #content .sec_02 .inner>.left_box>.ask_box>strong{display: flex;justify-content: space-between; min-width: 3.5em; max-width: 4.5em; width: 100%; padding-right: 11%;font-size: 2.6em;color: #fff;font-weight: 500;}
#main #content .sec_02 .inner>.left_box>.ask_box>ul{display: flex;justify-content: space-between;}
#main #content .sec_02 .inner>.left_box>.ask_box>ul>li:nth-child(1){width: 15.2em;}
#main #content .sec_02 .inner>.left_box>.ask_box>ul>li:nth-child(2){max-width: 60%;}
#main #content .sec_02 .inner>.left_box>.ask_box>ul>li~li{margin-left: 2em;}
#main #content .sec_02 .inner>.left_box>.ask_box>ul>li>span{display: block;font-size: 18px;color: rgba(255, 255, 255, 0.8);font-weight: 500;}
#main #content .sec_02 .inner>.left_box>.ask_box>ul>li>a,
#main #content .sec_02 .inner>.left_box>.ask_box>ul>li>p{display: block;font-size: 2.2em;color: #fff;font-weight: 600;word-break: keep-all;}
#main #content .sec_02 .inner>.left_box>.ask_box>ul>li:nth-child(2)>p{font-size: 18px;}

#main #content .sec_02 .inner>.left_box>.ects_box{margin-top: 4em;background-color:#7B6D65;border-radius: 16px 0px 16px 0px;}
#main #content .sec_02 .inner>.left_box>.ects_box>ul{display: flex;}
#main #content .sec_02 .inner>.left_box>.ects_box>ul>li{width: calc(100% /3);height: 8.2em;}
#main #content .sec_02 .inner>.left_box>.ects_box>ul>li>a{position: relative; display: flex;align-items: center;justify-content: center; height: 100%;}
#main #content .sec_02 .inner>.left_box>.ects_box>ul>li:not(:first-child)>a::before{content: "";position:absolute;width: 1px;height:40%;margin: auto 0; top: 0;bottom: 0;right: calc(100% + 1.2em); background-color: rgba(255, 255, 255, 0.2);;}
#main #content .sec_02 .inner>.left_box>.ects_box>ul>li>a>p{display: inline-block; text-align: center; font-size: 2em;color: #fff;font-weight: 500;box-sizing: border-box;}
#main #content .sec_02 .inner>.left_box>.ects_box>ul>li>a>p[data-icon]{position: relative;}
#main #content .sec_02 .inner>.left_box>.ects_box>ul>li>a>p[data-icon]::before{content: "";position: absolute;width: 30px;height: 30px;margin: auto 0; top: 0;bottom: 0;right:100%;background-repeat: no-repeat;background-position: left center;background-size: 1.2em;}
#main #content .sec_02 .inner>.left_box>.ects_box>ul>li>a>p[data-icon="faq"]::before{background-image: url(../../images/1000y/main/icon_faq.svg);}
#main #content .sec_02 .inner>.left_box>.ects_box>ul>li>a>p[data-icon="util"]::before{background-image: url(../../images/1000y/main/icon_util.svg);}
#main #content .sec_02 .inner>.left_box>.ects_box>ul>li>a>p[data-icon="map"]::before{background-image: url(../../images/1000y/main/icon_map.svg);}

#main #content .sec_02 .inner>.left_box>.ects_box>ul>li>a>p::after{content: "";position: absolute;width: 0;height:1px;margin: 0 auto; top: 100%;left: 0;right: 0;background-color: #ffF;transition: width 0.3s;}
#main #content .sec_02 .inner>.left_box>.ects_box>ul>li>a:hover>p::after{width: 100%;}


#main #content .sec_02 .inner>.right_box{position: absolute;width: 40%; right: 0;background-image: url(../../images/1000y/main/img_sec_02.png);background-repeat: no-repeat; background-position: center; background-size: cover;}
#main #content .sec_02 .inner>.right_box::after{content: "";position: absolute; width:100%;height: 100%;top: 0;left: 0;background: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4));opacity: 0;transition: opacity 0.3s;}
#main #content .sec_02 .inner>.right_box:hover::after{opacity: 1;}
#main #content .sec_02 .inner>.right_box>a{position:absolute;display: flex; align-items: center;justify-content: center; width: 100%;height: 100%;top: 0;left:0;z-index: 1;}

#main #content .sec_02 .inner>.right_box>a>.in>img{display: block;margin: 0 auto 3em auto;}
#main #content .sec_02 .inner>.right_box>a>.in>strong{position: relative;display: block; padding-top: 0.2em;text-align: center; font-size: 3.8em;color: #fff;font-weight: 600;white-space: nowrap;}
#main #content .sec_02 .inner>.right_box>a>.in>strong::before{content: "";position: absolute;width: 30px;height: 2px;margin: 0 auto; bottom: 100%;left: 0;right: 0;background-color: #fff;}


@media screen and (max-width:1024px){
	#main #content .sec_02 .inner{flex-wrap: wrap;}
	#main #content .sec_02 .inner>.left_box{width: 100%;padding: 5em 0 0;}
	#main #content .sec_02 .inner>.right_box{position: relative;width: 100%;margin-bottom: 5em;}
}

@media screen and (max-width:640px){
	#main #content .sec_02 .inner>.left_box{height: auto;padding: 4em 0 0;}
	#main #content .sec_02 .inner>.left_box>.notice_board{flex-wrap: wrap;}
	#main #content .sec_02 .inner>.left_box>.notice_board>strong{max-width: 100%;min-width: 100%;}
	#main #content .sec_02 .inner>.left_box>.notice_board>.notice_table{margin-top: 2em;padding-left: 2em;}

	#main #content .sec_02 .inner>.left_box>.ask_box{flex-wrap: wrap;}
	#main #content .sec_02 .inner>.left_box>.ask_box>strong{max-width: 100%;min-width: 100%;}
	#main #content .sec_02 .inner>.left_box>.ask_box>ul{margin-top: 2em;padding-left: 2em; font-size: 7px;}
	#main #content .sec_02 .inner>.left_box>.ask_box>ul>li>span{font-size: 16px;}
	#main #content .sec_02 .inner>.left_box>.ask_box>ul>li:nth-child(2)>p{font-size: 14px;}

	#main #content .sec_02 .inner>.right_box{height: 40em;margin-top: 4em;}

	#main #content .sec_02 .inner>.left_box>.ects_box>ul{font-size: 7px;}
	#main #content .sec_02 .inner>.left_box>.ects_box>ul>li{height: 7.2em;}
	#main #content .sec_02 .inner>.left_box>.ects_box>ul>li>a>p[data-icon]::before{width: 15px;height:15px;margin-right: 5px;}
}

@media screen and (max-width:420px){
	#main #content .sec_02 .inner>.left_box>.ask_box>ul>li:nth-child(1){width: auto;padding-right: 2em;}
	#main #content .sec_02 .inner>.left_box>.ask_box>ul>li:nth-child(2){margin-left: 0;}
	
}




/**** section_nav_box ******/

#main_quick{position: fixed;display: none;top: 30%;left: 3%;z-index: 10;}
#main_quick>ul{}
#main_quick>ul>li{margin-bottom: 1em;}
#main_quick>ul>li>a{position: relative;padding-left: 2em; }
#main_quick>ul>li>a.on{display: inline-block;}
#main_quick>ul>li>a::before{content: "";position: absolute;display: block;width: 1em;height: 1em; margin: auto 0; top: 0;bottom: 0; left: 0; border-radius: 50%;background-color: rgba(34, 34, 34, 0.2);;} 
#main_quick>ul>li>a.on::before{background-color: #fff;}
#main_quick>ul>li>a>span{display: none; font-size: 1.8em;color: #fff;font-weight: 600;text-shadow: 3px 3px 10px rgb(0 0 0 / 80%);}
#main_quick>ul>li>a.on>span{display: block;}

#main_quick>ul>li>a[data-quick-target="2"].on::before{background-color: #222;}
#main_quick>ul>li>a[data-quick-target="2"].on>span{color: #222;}


@media screen and (min-width:1800px){
	#main_quick{display: block;}
}