@charset "UTF-8";
/*-------------------------------------------------------------------
    slide_map
-------------------------------------------------------------------*/
#slide_map{display: none;}
body.fixed #slide_map{display: flex; }
#sub{background-color: var(--color-background);}

@media screen and (min-width:1025px){
    #slide_map{justify-content: center; align-items: center; position: fixed; top: 0; left: 0; z-index: 12; width: 100%; height: 100vh; padding: 2rem; background-color: rgba(0, 0, 0, 0.40); backdrop-filter: blur(3px);}
    #slide_map .inner{opacity: 0; position: relative; width: 100%; max-width: 1280px; height: 72vh; max-height: 80vh; padding: 6.8rem 6.4rem; background-color: #fff; border-radius: 0.8rem; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10); transform: translateY(20rem); transition: transform 0.4s linear, opacity 0.4s linear; transition-delay: 0.2s;}
    body.fixed #slide_map .inner{opacity: 1; transform: translateY(0); transition-delay: 0.2s;}
    #slide_map .inner .binds{overflow-y: auto; height: auto; max-height: 100%;;}
    #slide_map .inner .binds >ul{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 2rem 4rem; width: 100%; height: auto; /*max-height: calc(80vh - 6.8rem - 6.8rem);*/}
    #slide_map .inner .binds >ul >li{width: calc((100% - 4rem - 4rem) / 3);}
    #slide_map .inner .binds >ul >li >a{display: block; padding: 0.8rem 0; color: #151515; font-size: 3rem; font-weight: 500; align-items: 1.5;}
    #slide_map .inner .binds >ul >li >div{padding-top: 1.7rem; border-top: 1px solid rgba(0, 0, 0, 0.15); transition: all 0.2s linear;}
    #slide_map .inner .binds >ul >li:hover >div{border-color: #D4000F;}
    #slide_map .inner .binds >ul >li >div >ul{display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; gap: 0.4rem;}
    #slide_map .inner .binds >ul >li >div >ul >li{width: 100%;}
    #slide_map .inner .binds >ul >li >div >ul >li >a{display: block; width: 100%; color: #353535; font-size: 1.8rem; font-weight: 400; line-height: 1.5; font-family: "Pretendard"; transition: all 0.2s linear;}
    #slide_map .inner .binds >ul >li >div >ul >li >a:hover{color: #D4000F;}
    #slide_map .inner .binds >ul >li >div >ul >li >div{display: none;}
    #slide_map .inner >ul{display: none;}
    #slide_map .inner .close_btn{display: block; position: absolute; top: 2rem; right: 2rem; width: 4rem; height: 4rem; text-indent: -9999px; transform: rotate(0deg); transition: all 0.2s linear;}
    #slide_map .inner .close_btn:hover{transform: rotate(180deg);}
    #slide_map .inner .close_btn:before,
    #slide_map .inner .close_btn:after{content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 75%; height: 2px; background-color: #33363D; transform: translate(-50%,-50%) rotate(45deg);}
    #slide_map .inner .close_btn:after{transform: translate(-50%,-50%) rotate(-45deg);}
}
@media screen and (max-width:1024px){
    #slide_map{opacity: 0; flex-wrap: wrap; align-content: flex-start; justify-content: flex-end; align-items: flex-start; position: fixed; top: 8rem; left: 0; z-index: 12; width: 100%; height: calc(100vh - 8rem); background-color: rgba(0, 0, 0, 0.40); backdrop-filter: blur(3px); transition: opacity 0.2s linear;}
    #slide_map .inner{width: 100%; max-width: 400px; height: 100%; padding: 2rem 2rem 7rem; margin: auto 0 !important; background-color: #F5F5F5; transform: translateX(100%); transition: all 0.2s linear; }
    body.fixed #slide_map{opacity: 1; display: flex;}
    body.fixed #slide_map .inner{transform: translateX(0);}
    #slide_map .inner .binds{overflow-y: auto; height: 100%;}
    #slide_map .inner .binds >ul{ height: auto; max-height: calc(100% - 2rem - 7rem);}
    #slide_map .inner .binds >ul >li{}
    #slide_map .inner .binds >ul >li >a{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 1rem; position: relative; width: 100%; padding: 1rem 0; color: #151515; font-size: 2.5rem; font-weight: 600; border-bottom: 1px solid rgba(0, 0, 0, 0.15);}
    #slide_map .inner .binds >ul >li >a.on{border-bottom: 0;}
    #slide_map .inner .binds >ul >li >a span{flex: 1;}
    #slide_map .inner .binds >ul >li >a:after{content: ""; display: block; width: 2.4rem; height: 2.4rem; background: url(../../../img/site/kor/layout/img09.svg) no-repeat center center / 100% auto;}
    #slide_map .inner .binds >ul >li >a.on:after{background-image: url(../../../img/site/kor/layout/img10.svg);}
    #slide_map .inner .binds >ul >li >a.on + div{display: block; }
    #slide_map .inner .binds >ul >li >div{display: none; padding: 1.7rem 0 2rem; border-top: 1px solid #D4000F;}
    #slide_map .inner .binds >ul >li >div >ul{display: flex; flex-direction: column; gap: 0.6rem;}
    #slide_map .inner .binds >ul >li >div >ul >li{}
    #slide_map .inner .binds >ul >li >div >ul >li >a{display: block; font-size: 2rem; color: #353535; font-weight: 400;}
    #slide_map .inner .binds >ul >li >div >ul >li.active >a{color: #D4000F;}
    #slide_map .inner .binds >ul >li >div >ul >li >div{margin: 0.6rem 0; padding: 1.25rem; background-color: #E6E8EA; border-radius: 0.2rem;}
    #slide_map .inner .binds >ul >li >div >ul >li >div >ul{display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; align-content: flex-start; gap: 0.4rem;}
    #slide_map .inner .binds >ul >li >div >ul >li >div >ul >li{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: 0.5rem; font-size: 1.7rem;}
    #slide_map .inner .binds >ul >li >div >ul >li >div >ul >li:before{content: "·"; font-weight: 700; font-size: 1.2em; line-height: 1.2;}
    #slide_map .inner .binds >ul >li >div >ul >li >div >ul >li >a{display: block; }
    #slide_map .inner >ul{display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: stretch; gap: 1.4rem; position: absolute; right: 2rem; bottom: 2rem;}
    #slide_map .inner >ul >li{display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
    #slide_map .inner >ul >li.search_btn{display: none;}
    #slide_map .inner >ul >li >a,
    #slide_map .inner >ul >li >a img{filter: brightness(0); color: #000; font-size: 1.7rem; font-weight: 600;}
    #slide_map .inner .close_btn{display: none;}
}
@media screen and (max-width:640px){
    #slide_map{top: 7rem; height: calc(100% - 7rem);}
}

/*-------------------------------------------------------------------
    header
-------------------------------------------------------------------*/
#header{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; position: absolute; top: 2rem; left: 3rem; z-index: 11; width: calc(100% - 6rem); height: 6rem; padding: 0 2rem; border: 1px solid rgba(255, 255, 255, 0.25); background-color: rgba(0, 0, 0, 0.10); border-radius: 0.4rem; backdrop-filter: blur(5px); transform: translateY(-10rem); animation-name: ani01; animation-delay: 0s; animation-duration: 0.3s; animation-timing-function: linear; animation-fill-mode: both; transition: all 0.1s linear;}
#sub #header{animation: none; transform: translateY(0);}
[data-scroll="on"] #header{height: 8rem; border-color: #fff; background-color: #fff; border-radius: 0;}
[data-scroll="on"] #header #nav #gnb{height: 8rem;}
#header #logo{display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; position: relative; z-index: 1;  height: 100%;}
#header #logo >a{display: block; font-size: 1rem; }
#header #logo >a:before{content: ""; display: block; font-size: 1em; width: 11.2em; height: 3.2em; background: url(../../../img/site/kor/layout/img01.svg) no-repeat center center / 100% auto;}
[data-scroll="on"] #header #logo >a:before{background-image: url(../../../img/site/kor/layout/img07.svg);}
#header #logo >a span{display: block; position: absolute; top:-9999px; left: -9999px; width: 0; height: 0; text-indent: -9999px;}
#header #nav{overflow: hidden; height: 100%;}
#header #nav #blind{position: absolute; top: 100%; left: -1px; z-index: -1; width: calc(100% + 2px); }
[data-scroll="on"] #header #nav #blind{box-shadow: 0 7px 7px rgba(0,0,0,0.03);}
#header #nav #blind span{display: block; position: absolute; top: 5px; left: 0; width: 100%; height: calc(100% - 5px); background-color: rgba(0, 0, 0, 0.75); border-radius: 0.4rem;}
[data-scroll="on"] #header #nav #blind span{top: 0; height: 100%; background-color: #fff; border-radius: 0; border-top: 2px solid rgba(0, 0, 0, 0.10);}
#header #nav #gnb{position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; height: 6rem; padding-right: 7%;}
#header #nav #gnb >ul{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 0rem; height: 100%;}
#header #nav #gnb >ul >li{width: 15rem; height: 100%;}
#header #nav #gnb >ul >li >a{height: 100%;}
#header #nav #gnb >ul >li >a >span{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 1.7rem; color: rgba(255, 255, 255, 1); transition: all 0.2s linear;}
[data-scroll="on"] #header #nav #gnb >ul >li >a >span{font-weight: 500; color: #131416;}
#header #nav #gnb >ul >li.active >a >span{color: #D4000F; font-weight: 600;}
#header #nav #gnb >ul >li >div{display: none; position: relative; top: 0.4rem; padding: 1.65rem 1.6rem 1.6rem;}
[data-scroll="on"] #header #nav #gnb >ul >li >div{top: 0; padding: 1.2rem 1.6rem 1rem;}
#header #nav #gnb >ul >li >div >ul{display: flex; flex-direction: column; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; align-items: flex-start; gap: 0.3rem;}
#header #nav #gnb >ul >li >div >ul >li{width: 100%;}
#header #nav #gnb >ul >li >div >ul >li >a{display: block; width: 100%; padding: 0.5rem 0; text-align: center; font-size: 1.5rem; font-weight: 400; font-family: 'Pretendard'; line-height: 1.5; color: rgba(255, 255, 255, 0.75); transition: color 0.2s linear;}
#header #nav #gnb >ul >li >div >ul >li >a:hover{color: #fff;}
[data-scroll="on"] #header #nav #gnb >ul >li >div >ul >li >a{color: #464C53; font-weight: 500;}
[data-scroll="on"] #header #nav #gnb >ul >li >div >ul >li >a:hover{color: #D4000F;}
#header #nav #gnb >ul >li >div >ul >li >div{display: none;}
#header .toputil_control{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 2rem; position: relative; z-index: 1;  height: 100%;}
#header .toputil_control ul{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 1.2rem;}
#header .toputil_control ul li{}
#header .toputil_control ul li a,
#header .toputil_control ul li a img{display: block; color: #fff; font-size: 1.7rem;}
[data-scroll="on"] #header .toputil_control ul li a,
[data-scroll="on"] #header .toputil_control ul li a img,
[data-scroll="on"] #header .toputil_control .allmenu_btn_open{filter: brightness(0.15); color: #000; font-weight: 500;}
#header .toputil_control .cont_btn{display: inline-flex; justify-content: center; align-items: center; height: 4rem; padding: 0 2rem; font-size: 1.6rem; font-weight: 400; line-height: 1.5; color: #fff; background-color: #D4000F; border-radius: 0.4rem;}
#header .toputil_control .allmenu_btn_open{display: inline-flex; align-items: center; position: relative; width: 4rem; height: 4rem; background: url(../../../img/site/kor/layout/img06.svg) no-repeat center center / 100% auto; text-indent: -9999px;}
#header .search_wrap{display: none; position: absolute; top: calc(100% + 1.2rem); left: 50%; width: 100%; max-width: calc(1030px + 4rem); transform: translateX(-50%);}
#header.active .search_wrap{display: block; }
#header .search_wrap .in{padding: 2rem 4rem 4rem; border-top: 2px solid #F4F5F6; background-color: #fff; box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10); border-radius: 4px;}
#header .search_wrap .in .t{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: center; gap: 2rem;}
#header .search_wrap .in .t .l{flex: 1;}
#header .search_wrap .in .t .l input{display: block; width: 100%; height: 4.6rem; border: 0; border-bottom: 1px solid #D4000F; color: #58616A; font-size: 1.7rem; font-weight: 500; line-height: 1.5; background-color: transparent; outline: none;}
#header .search_wrap .in .t .l input::placeholder{color: #58616A;}
#header .search_wrap .in .t .r{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 0.8rem;}
#header .search_wrap .in .t .r a{display: block; width: 5.6rem; height: 5.6rem; background: #D4000F url(../../../img/site/kor/layout/img12.svg) no-repeat center center / 100% auto; text-indent: -9999px; transition: all 0.2s linear;}
#header .search_wrap .in .t .r a:hover{background-color: #b7000c;}
#header .search_wrap .in .t .r a.close{background-color: #33363D; background-image: url(../../../img/site/kor/layout/img13.svg);}
#header .search_wrap .in .t .r a.close:hover{background-color: #27292f;}
#header .search_wrap .in .b{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 1.6rem; margin-top: 0.8rem;}
#header .search_wrap .in .b .l{display: none;}
#header .search_wrap .in .b span{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0.4rem; font-size: 1.5rem; color: #1E2124; font-weight: 400;}
#header .search_wrap .in .b span .del{display: block; position: relative; width: 1.4rem; height: 1.4rem; text-indent: -9999px; background-color: #E6E8EA; border-radius: 50%; border-radius: 50%;}
#header .search_wrap .in .b span .del:before,
#header .search_wrap .in .b span .del:after{content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 70%; height: 1px; background-color: #33363D; border-radius: 100%; transform: translate(-50%,-50%) rotate(45deg);}
#header .search_wrap .in .b span .del:after{transform: translate(-50%,-50%) rotate(-45deg);}

@keyframes ani01{
    0%{transform: translateY(-10rem);}
    100%{transform: translateY(0);}
}

@keyframes ani_up{
    0%{opacity: 0; transform: translateY(20rem);}
    100%{opacity: 1; transform: translateY(0);}
}

@media screen and (max-width:1600px){
    #header #nav #gnb >ul{gap: 0;}
    #header #nav #gnb >ul >li{width: 12rem;}
    #header #nav #gnb >ul >li >a >span{width: 100%; min-width: auto;}
    #header.on #nav #gnb >ul >li >a >span{min-width: auto;}
    #header #nav #gnb >ul >li >div{width: 100%; padding: 1.65rem 1.2rem 1.6rem;}
    #header #nav #gnb >ul >li >div >ul >li >a{padding: 0.5rem 0;}
}
@media screen and (max-width:1480px){
    #header{left: 2rem; width: calc(100% - 4rem);}
    #header #nav #gnb >ul >li{width: 12rem;}
    #header #nav #gnb >ul >li >div{padding: 1.65rem 1rem 1.6rem;}
    #header .toputil_control{gap: 1.2rem;}
    #header .toputil_control ul{gap: 0.8rem;}
    #header .toputil_control .cont_btn{padding: 0 1.5rem; font-size: 1.5rem;}
}
@media screen and (max-width:1340px){
	#header #nav #gnb{padding-right: 15%;}
    #header #nav #gnb >ul >li{width: 11rem;}
    #header #nav #gnb >ul >li >a >span{font-size: 1.55rem;}
    #header #nav #gnb >ul >li >div >ul >li >a{font-size: 1.4rem;}
    #header #nav #gnb >ul >li >div{padding: 1.65rem 0.8rem 1.6rem;}
}
@media screen and (max-width:1200px){
    #header #nav{display: none;}
}
@media screen and (max-width:1024px){
    #header{position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 8rem; background-color: #fff; border-radius: 0;}
    [data-scroll="on"] #header{height: 8rem;}
    #header #logo >a{font-size: 0.94rem;}
    #header #logo >a:before{background-image: url(../../../img/site/kor/layout/img07.svg);}

    #header .toputil_control{gap: 1.4rem;}
    #header .toputil_control ul li{display: none;}
    #header .toputil_control ul li.search_btn{display: block;}
    #header .toputil_control ul li.search_btn a{filter: brightness(0);}
    #header .toputil_control .allmenu_btn_open{background-image: url(../../../img/site/kor/layout/img08.svg);}
    body.fixed #header .toputil_control .allmenu_btn_open{background-image: url(../../../img/site/kor/layout/img11.svg);}
    #header .search_wrap{overflow: hidden; top: calc(8rem - 1px); left: -1px; width: calc(100% + 2px); max-width: auto;  transform: translateX(0);}
    #header .search_wrap .in{background-color: #F5F5F5; box-shadow: 0 4px 6px 0 rgba(0, 0, 0, 0.05); border-radius: 0;}
    #header .search_wrap .in{padding: 2em 2rem 3rem;}
    #header .search_wrap .in .t{padding-bottom: 1rem; border-bottom: 1px solid #D4000F;}
    #header .search_wrap .in .t .l input{height: 4rem; border-bottom: 0;}
    #header .search_wrap .in .t .r a{width: 4.75rem; height: 4.75rem;}
    #header .search_wrap .in .t .r a.close{display: none;}
    #header .search_wrap .in .b{gap: 1rem 2rem; margin-top: 3rem;}
    #header .search_wrap .in .b .l{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; width: 100%;}
    #header .search_wrap .in .b .l strong{color: #131416; font-size: 2rem; font-weight: 600;}
    #header .search_wrap .in .b .l a{display: block; color: #6D7882; font-size: 1.5rem; font-weight: 400;}
    #header .search_wrap .in .b span{font-size: 1.7rem;}
}
@media screen and (max-width:640px){
    #header{height: 7rem;}
    [data-scroll="on"] #header{height: 7rem;}
    #header #logo >a{font-size: 0.88rem;}
    #header .search_wrap{overflow: hidden; top: calc(7rem - 1px); }
}

/*-------------------------------------------------------------------
    visual
-------------------------------------------------------------------*/
#wrap{overflow-x: hidden; overflow-y: auto; width: 100%; height: 100%; position: relative; }
#container{width: 100%; height: auto;}
#visual{position: relative; z-index: 2; height: 42rem; padding: 10rem 0 3.2rem 0;}
#visual >.img{overflow: hidden; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
#visual img{display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; animation-name: visual_on; animation-duration: 1s; animation-timing-function: linear;}
#visual >.img[data-depth^="01"] img{content:url(../../../img/site/kor/layout/visual_img01.jpg);}
#visual >.img[data-depth="01_02"] img{content:url(../../../img/site/kor/layout/visual_img0102.jpg);}
#visual >.img[data-depth="01_03"] img{content:url(../../../img/site/kor/layout/visual_img0103.jpg);}
#visual >.img[data-depth="01_04"] img{content:url(../../../img/site/kor/layout/visual_img0104.jpg);}
#visual >.img[data-depth^="02"] img{content:url(../../../img/site/kor/layout/visual_img02.jpg);}
#visual >.img[data-depth="02_01"] img{content:url(../../../img/site/kor/layout/visual_img02.jpg);}
#visual >.img[data-depth="02_02"] img{content:url(../../../img/site/kor/layout/visual_img0201.jpg);}
#visual >.img[data-depth="02_03"] img{content:url(../../../img/site/kor/layout/visual_img0202.jpg);}
#visual >.img[data-depth="02_04"] img{content:url(../../../img/site/kor/layout/visual_img0203.jpg);}
#visual >.img[data-depth="02_05"] img{content:url(../../../img/site/kor/layout/visual_img0204.jpg);}
#visual >.img[data-depth^="03"] img{content:url(../../../img/site/kor/layout/visual_img03.jpg);}
#visual >.img[data-depth^="04"] img{content:url(../../../img/site/kor/layout/visual_img04.jpg);}
#visual >.img[data-depth^="05"] img{content:url(../../../img/site/kor/layout/visual_img05.jpg);}
#visual >.img[data-depth^="06"] img{content:url(../../../img/site/kor/layout/visual_img06.jpg);}
#visual >.img[data-depth^="07"] img{content:url(../../../img/site/kor/layout/visual_img07.jpg);}
[data-mode="wide"] #visual{height: 97rem; max-height: 100vh;}

#visual:before{content: ""; display: block; position: absolute; bottom: 0; left: 0;  z-index: 1; width: 100%; height: 70%; background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.60) 100%); backdrop-filter: blur(0.5px);}
[data-mode="wide"] #visual:before{height: 100%; background: rgba(0,0,0,0.7);}
#visual .inner{display: flex; flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; gap: 2.4rem; position: relative; z-index: 1; width: 100%; height: 100%;}
[data-mode="wide"] #visual .inner{flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; }
#visual .inner .title{display: block; font-size: 6.2rem; font-weight: 700; line-height: 1.5; color: #fff; text-align: center; text-shadow: 0 0 1.5rem rgba(255, 255, 255, 0.15)}
[data-mode="wide"] #visual .inner .title{width: 100%; text-align: center; text-shadow: 0 0 1.5rem rgba(212, 0, 15, 0.60);}
#visual .inner .title span{display: block; color: #D4000F; font-size: 0.45em; text-transform: uppercase; letter-spacing: 0.28rem;}
#visual .inner .navi{display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; position: relative;}
#visual .inner .navi >li{position: relative; width: 18rem;}
[data-mode="wide"] #visual .inner .navi >li{width: auto; min-width: 8rem;}
#visual .inner .navi >li:not(:last-child){margin-right: 2rem;}
#visual .inner .navi >li:not(:last-child):after{content: ""; display: block; position: absolute; left: 100%; top: 50%; width: 2px; height: 8px; margin: 0 0.7rem; background-color: rgba(255, 255, 255, 0.25); border-radius: 2px; transform: translateY(-50%);}
#visual .inner .navi >li >a{display: flex; flex-wrap: wrap; align-content: center; justify-content: flex-start; align-items: center;  width: 100%; height: 100%; padding-right: 2.5rem; color: #fff; font-size: 1.5rem; font-weight: 400; line-height: 1.6;}
#visual .inner .navi >li >a:before{content: ""; display: block; position: absolute; top: 50%; right: 0; width: 1.6rem; height: 1.6rem; background: url(../../../img/site/kor/layout/img14.svg) no-repeat center center / 100% auto; transform: translateY(-50%);}
#visual .inner .navi >li >ul{display: none; position: absolute; top: calc(100% + 0.3rem); left: 50%; width: 100%; min-width: 15rem; height: auto; padding: 0.6rem 0; background-color: #fff; border-radius: 0.4rem; transform: translateX(-50%); box-shadow: 0 4px 20px 0 rgba(0, 0, 0, 0.10);}
#visual .inner .navi >li >a.active + ul{display: block; }
#visual .inner .navi >li >ul >li{}
#visual .inner .navi >li >ul >li >a{display: block;  width: 100%; padding: 0.2rem 1rem; font-size: 1.4rem;}

@keyframes visual_on{
    0%{transform:scale(1.2);}
    100%{transform:scale(1);}
}

@media screen and (max-width:1600px){
    #visual .inner .title{font-size: 5.8rem;}
}
@media screen and (max-width:1024px){
    #visual{height: 40rem; padding: 8rem 0 0;}
    [data-mode="wide"] #visual{height: 40rem; min-height: auto;}
    #visual:before{height: 100%; background: rgba(0,0,0,0.7);}
    #visual .inner{flex-direction: column; flex-wrap: wrap; align-content: center; justify-content: center; align-items: center; gap: 0.8rem;}
    #visual .inner .title{display: block; width: 100%; text-align: center; font-size: 4.8rem; line-height: 1.4;}
    #visual .inner .navi >li{width: auto;}
    [data-mode="wide"] #visual .inner .navi >li{min-width: auto;}
    #visual .inner .navi >li:not(:last-child){margin-right: 2.5rem;}
    #visual .inner .navi >li:not(:last-child):after{left: calc(100% + 0.7rem); margin: 0; width: 1.6rem; height: 1.6rem; background-color: transparent; background: url(../../../img/site/kor/layout/img14.svg) no-repeat center center / 100% auto; transform: translateY(-50%) rotate(-90deg)}
    #visual .inner .navi >li >a{padding-right: 0;}
    #visual .inner .navi >li >a:before{display: none;}
}
@media screen and (max-width:840px){
    #visual{height: 36rem;}
    [data-mode="wide"] #visual{height: 36rem;}
    #visual .inner .title{font-size: 4.4rem;}
}
@media screen and (max-width:640px){
    #visual{height: 31rem; padding: 7rem 0 0;}
    [data-mode="wide"] #visual{height: 31rem;}
    #visual .inner .title{display: block; width: 100%; text-align: center; font-size: 4rem;}
    #visual .inner .navi{gap: 0.5rem;}
    #visual .inner .navi >li{width: auto;}
}

/*-------------------------------------------------------------------
    container
-------------------------------------------------------------------*/
.inner{position: relative; width: 100%; max-width: calc(1800px + 4rem); margin: 0 auto; padding: 0 2rem;}

#sub #container{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; gap: 6.4rem; position: relative; width: 100%; max-width: calc(1600px + 4rem); margin: 8rem auto 12.4rem; padding: 0 2rem; color: var(--color-black);}
[data-lnb="no"]:not([data-mode="white"],[data-mode="wide"]) #sub #container{margin-top: 0;}
#sub #container #remote{display: block; position: sticky; top: 14rem; z-index: 1; width: 22rem; margin-top: 4rem;}
[data-lnb="no"] #sub #container #remote{display: none;}
#sub #container #remote .cont_title{color: var(--color-red); font-family: 'Poppins'; text-transform: uppercase; letter-spacing: 0.24rem; font-size: 2rem; line-height: 1.2; font-weight: 600;}
#sub #container #remote #lnb{margin-top: 2rem;}
#sub #container #remote #lnb >ul{position: relative;}
#sub #container #remote #lnb >ul:before{content: ""; display: block; position: absolute; top: 0; left: 0; width: 2px; height: 100%; background-color: var(--color-black-10);}
#sub #container #remote #lnb >ul >li{}
#sub #container #remote #lnb >ul >li >a{display: block; position: relative; padding: 1.2rem 2rem; font-size: 1.5rem; font-weight: 500; font-family: 'Pretendard'; color: var(--color-black-50); border-left: 2px solid transparent; transition: all 0.2s linear;}
#sub #container #remote #lnb >ul >li >a.child{padding-right: 5rem;}
#sub #container #remote #lnb >ul >li >a.child:before{content: ""; display: block; position: absolute; top: 1.5rem; right: 0.8rem; width: 1.6rem; height: 1.6rem; background: url(../../../img/site/kor/layout/img16.svg) no-repeat center center / 100% auto;}
[data-mode="white"] #sub #container #remote #lnb >ul >li >a.child:before{background-image: url(../../../img/site/kor/layout/img15.svg);}
#sub #container #remote #lnb >ul >li >a.ov{color: var(--color-black-100); border-left-color: var(--color-red);}
#sub #container #remote #lnb >ul >li >a:hover{color: var(--color-black-100);}
#sub #container #remote #lnb >ul >li >ul{width: calc(100% - 2rem); margin-left: 2rem; padding: 1.2rem 1.6rem; background-color: var(--color-black-10);}
[data-mode="white"] #sub #container #remote #lnb >ul >li >ul{background-color: #F4F5F6;}
#sub #container #remote #lnb >ul >li >ul >li{position: relative; padding-left: 0.75rem; font-family: 'Pretendard'; font-size: 1.45rem; font-weight: 400; line-height: 1.45;}
#sub #container #remote #lnb >ul >li >ul >li:not(:first-child){margin-top: 0.6rem;}
#sub #container #remote #lnb >ul >li >ul >li a{color: rgba(255, 255, 255, 0.50); transition: color 0.2s linear;}
[data-mode="white"] #sub #container #remote #lnb >ul >li >ul >li a{color: rgba(0, 0, 0, 0.50); font-weight: 500;}
#sub #container #remote #lnb >ul >li >ul >li a:before{content: "·"; display: block; position: absolute; top: ; left: 0.1rem;}
#sub #container #remote #lnb >ul >li >ul >li a.ov{color: #fff; font-weight: 500;}
#sub #container #remote #lnb >ul >li >ul >li a:hover{color: #fff;}
[data-mode="white"] #sub #container #remote #lnb >ul >li >ul >li a.ov{color: #1E2124; font-weight: 600;}
[data-mode="white"] #sub #container #remote #lnb >ul >li >ul >li a:hover{color: #1E2124;}
#sub #container #content{width: calc(100% - 22rem - 6.4rem); min-width: 0; padding-top: 4rem; font-size: 1.7rem;}
[data-mode="white"] #sub #container #content{padding-top: 2rem;}
/*[data-mode="wide"] #sub #container #content{padding-top: 6rem;}*/
[data-lnb="no"] #sub #container #content{width: 100%; padding-top: 0;}
[data-mode="wide"][data-lnb="no"] #sub #container #content{width: 100%; padding-top: 0;}
#sub #container #content #txt h2{display: none;}
[data-title="yes"] #sub #container #content #txt h2{display: block; margin-bottom: 6rem; color: #131416; font-size: 5.2rem; font-weight: 700; line-height: 1.2;}

@media screen and (max-width:1600px){
    #sub #container{gap: 3rem;}
    #sub #container #remote{width: 20rem;}
    #sub #container #remote #lnb >ul >li >a{padding: 1.2rem 1.5rem;}
    #sub #container #remote #lnb >ul >li >ul{width: calc(100% - 1.5rem); margin-left: 1.5rem; padding: 1.2rem;}
    #sub #container #remote #lnb >ul >li >ul >li:not(:first-child){margin-top: 0.5rem;}
    #sub #container #content{width: calc(100% - 20rem - 3rem);}
    [data-title="yes"] #sub #container #content #txt h2{margin-bottom: 3rem;}
}
@media screen and (max-width:1200px){
    #sub #container #remote{display: none;}
    #sub #container #content{width: 100%; padding-top: 0;}
    [data-mode="wide"] #sub #container #content,
    [data-mode="white"] #sub #container #content{padding-top: 0;}
}
@media screen and (max-width:1024px){
    #sub #container{margin: 6rem auto 10rem;}
    [data-title="yes"] #sub #container #content #txt h2{margin-bottom: 2rem; font-size: 4.4rem;}
}
@media screen and (max-width:640px){
    #sub #container{margin: 4.5rem auto 8rem;}
    [data-title="yes"] #sub #container #content #txt h2{font-size: 4rem;}
}


/*-------------------------------------------------------------------
    footer
-------------------------------------------------------------------*/
#footer{padding: 4.5rem 0 4rem; background-color: #1E1E1E;}
#footer .inner{max-width: calc(1680px + 4rem);}
#footer .inner .t{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch;}
#footer .inner .t >li{width: 100%; padding: 0 2rem;}
#footer .inner .t >li >a{color: #fff; font-size: 1.5rem; font-weight: 400; line-height: 1.5;}
#footer .inner .t >li >ul{display: flex; flex-direction: column; flex-wrap: wrap; align-content: flex-start; justify-content: flex-start; align-items: flex-start; gap: 0.8rem;margin-top: 1.3rem;}
#footer .inner .t >li >ul >li{width: 100%;}
#footer .inner .t >li >ul >li >a{color: rgba(255, 255, 255, 0.50); font-size:1.4rem; font-family: 'Pretendard'; font-weight: 400; line-height: 1.5;}
#footer .inner .t >li >ul >li >a:hover{text-decoration: underline; text-underline-position: under;}
#footer .inner .b{display: flex; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; gap: 6rem; position: relative; margin-top: 4rem; padding-top: 4.1rem; border-top: 1px solid #D4000F; font-family: "Pretendard";}
#footer .inner .b .logo{display: block; font-size: 1rem;}
#footer .inner .b .logo img{display: block; font-size: 1em; width: 11.2em; height: 3.2em;}
#footer .inner .b >div{display: flex; flex-wrap: nowrap; justify-content: space-between; gap: 3.2rem; width: 100%; padding-left: 4rem; border-left: 1px solid rgba(255, 255, 255, 0.20);}
#footer .inner .b >div .l{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 1.2rem;}
#footer .inner .b >div .l .l_t{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; gap: 0.8rem 4rem; font-size: 1.5rem; font-weight: 300; line-height: 1.4; color: rgba(255, 255, 255, 0.75);}
#footer .inner .b >div .l .l_t strong{display: inline-block; position: relative; padding-right: 1.6rem; font-weight: 500;}
#footer .inner .b >div .l .l_t strong:before{content: ""; display: block; position: absolute; top: 50%; right: 0.8rem; width: 2px; height: 1.2rem; background-color: rgba(255, 255, 255, 0.50); transform: translateY(-60%);}
#footer .inner .b >div .l .l_b{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0.4rem 1rem; width: 100%; color: rgba(255, 255, 255, 0.75); font-size: 1.5rem; font-weight: 300; line-height: 1.4;}
#footer .inner .b >div .l .l_b a{display: inline-block; padding: 0.4rem 1.2rem; font-size: 1.4rem; line-height: 1.5; color: #fff; background-color: rgba(255, 255, 255, 0.10); border-radius: 3px;}
#footer .inner .b >div .r{margin-top: auto; color: rgba(255, 255, 255, 0.50); font-size: 1.4rem; font-weight: 300; line-height: 1.5;white-space: nowrap;}
#footer .inner .b .top_btn{display: block; width: 6rem; height: 6rem; position: absolute; top: 0; right: 0; transform: translateY(-50%);}
#footer .inner .b .top_btn img{display: block; width: 100%;}

@media screen and (max-width:1440px){
    #footer{padding: 3.5rem 0 3rem;}
    #footer .inner .b{gap: 4.5rem; margin-top: 3.5rem; padding-top: 3.6rem;}
    #footer .inner .b >div{flex-wrap: wrap; gap: 1.4rem;}
    #footer .inner .b >div .l{gap: 0.8rem;}
}
@media screen and (max-width:1024px){
    #footer .inner .t{gap: 1.5rem;}
    #footer .inner .t >li{padding: 0;}
    #footer .inner .t >li >ul{gap: 0.6rem; margin-top: 0.8rem;}
    #footer .inner .b{flex-direction: column; gap: 2rem;}
    #footer .inner .b >div{padding-left: 0; border-left: 0;}
    #footer .inner .b >div .l .l_t{gap: 0.8rem 3rem; font-size: 1.6rem;}
    #footer .inner .b >div .l .l_b{font-size: 1.6rem;}
    #footer .inner .b >div .l .l_b a{font-size: 1.5rem;}
    #footer .inner .b >div .r{font-size: 1.6rem;}
}
@media screen and (max-width:640px){
    #footer{padding: 3rem 0 2.5rem;}
    #footer .inner .t{display: none;}
    #footer .inner .b >div .l .l_t p{width: 100%;}
    #footer .inner .b{margin-top: 0; padding-top: 0; border-top: 0;}
}