@charset "UTF-8";
/*-------------------------------------------------------------------
    공통
-------------------------------------------------------------------*/
body.fixed{position: fixed;}

/*-------------------------------------------------------------------
    header
-------------------------------------------------------------------*/
#slide_map{
    position: fixed; top: 0; left: 0; z-index: -1; opacity: 0; visibility: hidden; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: absolute; top: 0; right: 0; width: 100vw; height: 100vh;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#slide_map.on{opacity: 1; visibility: visible; z-index: 999;}
#slide_map:after {content: ""; display: block; position: absolute; bottom: 0; right: 0; width: 111.9rem; height: 23.2rem; aspect-ratio: 1119/232; background: url(../../../images/site/kor/layout/gnb_bg.png) no-repeat;}
#slide_map .close_btn{position: absolute; top: 3rem; right: 8rem; width: 3rem; height: 3rem; text-indent: -9999px;}
#slide_map .close_btn:before,
#slide_map .close_btn:after{
    content: ""; display: block; position: absolute; left: 50%; top: 50%; background-color: #F39800; width: 100%; height: 2px; border-radius: 3px;
    -webkit-transition: all 0.1s linear; transition: all 0.1s linear;
}
#slide_map .close_btn:before{
    -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg);
}
#slide_map .close_btn:after{
    -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg);
}
#slide_map .close_btn:hover:before,
#slide_map .close_btn:hover:after{height: 4px;}


#header{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; position: fixed;left:0;top:0; width: 100%; height: 10rem;z-index: 11;transition: background .2s}
#header .h_wrap {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; align-content: center; position: relative; width: 100%; max-width:168rem; height: 100%; margin: 0 auto; padding: 0 2rem;}
#header .h_wrap #logo{display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center;  height: 10rem;}
#header .h_wrap #logo >a{display: block; width: 18.2rem; height: 3.8rem; background: url(../../../images/site/kor/layout/logo.png) no-repeat center center / 100% auto; text-indent: -9999px;}
#header .h_wrap #nav{overflow: visible; height: 10rem;}
#header .h_wrap #nav #blind{position: absolute; top: 100%; left: 50%; width: 100vw; height: 0; background-color: #fff; backdrop-filter: blur(20px);transform:translateX(-50%);box-shadow:0 .5rem .5rem rgba(0,0,0,.1)}
#header .h_wrap #nav #gnb{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; height: 10rem; }
#header .h_wrap #nav #gnb >ul{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: flex-start; gap: 6rem; height: 100%;}
#header .h_wrap #nav #gnb >ul >li{height: 100%;}
#header .h_wrap #nav #gnb >ul >li >a{height: 100%;}
#header .h_wrap #nav #gnb >ul >li >a >span{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; width: 100%; height: 100%; font-size: 2rem; font-weight: 700; color: #fff;}
#header .h_wrap #nav #gnb >ul >li >a:hover >span, #header .h_wrap #nav #gnb >ul >li >a:focus >span {color: #F39800;}
#header .h_wrap #nav #gnb >ul >li >div{
    opacity: 0; position: absolute; display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; top: 100%; left: 50%; width: 100%; max-width: calc(1760px + 16rem); margin: 0 auto; padding: 0 2rem;
    -webkit-transform: translateX(-50%); transform: translateX(-50%);
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
}
#header .h_wrap #nav #gnb >ul >li >div:before{
    content: ""; display: block; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background-color: #fff;
    -webkit-transition: all 0.2s; transition: all 0.2s;  
}
#header .h_wrap #nav #gnb >ul >li >div::after {
    content: ""; display: block; position: absolute; top: 0; right: -100%; width: 100%; height: 100%; background-color: #fff;
    -webkit-transition: all 0.2s; transition: all 0.2s;
}
#header .h_wrap #nav #gnb >ul >li >div >.tmenu_ti{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; position: relative; width: 300px; height: 100%; font-size: 30px; color: #fff;}
#header .h_wrap #nav #gnb >ul >li >div >ul{display: flex; width: 100%; height: 100%;}

#header .h_wrap #nav #gnb >ul >li >div >ul >li{flex: 1; position: relative; z-index: 1;}
#header .h_wrap #nav #gnb >ul >li >div >ul >li + li {border-left: 1px solid #EEE;}
#header .h_wrap #nav #gnb >ul >li >div >ul >li >a{
    display: block; padding: 3.2rem; color: #353535; font-size: 2.1rem; font-weight: 600; letter-spacing: 0.32px;
    -webkit-transition: all 0.2s linear; transition: all 0.2s linear; line-height: 1;
}
#header .h_wrap #nav #gnb >ul >li >div >ul >li:has(> ul) >a {padding: 3.2rem 3.2rem 0 3.2rem;}
#header .h_wrap #nav #gnb >ul >li >div >ul >li >a.on,
#header .h_wrap #nav #gnb >ul >li >div >ul >li >a:hover,
#header .h_wrap #nav #gnb >ul >li >div >ul >li >a:active{color: #00306C;}
#header .h_wrap #nav #gnb >ul >li >div >ul >li >ul{display: block; width: calc(100% - 6.4rem); margin: 1.6rem 3.2rem 3.2rem; padding: 1.6rem; border-radius: 6px; background-color: #F5F5F5;}
#header .h_wrap #nav #gnb >ul >li >div >ul >li >ul li {position: relative;}
#header .h_wrap #nav #gnb >ul >li >div >ul >li >ul li::before {content: ""; display: inline-flex; flex-shrink: 1; position: absolute; top: 10px; left: 0; width: 3px; height: 3px; border-radius: 100%; background-color: #555;}
#header .h_wrap #nav #gnb >ul >li >div >ul >li >ul >li >a{display: block; margin-left: 1rem; font-size: 1.7rem; color: #555; text-transform: uppercase; letter-spacing: 0.28px; -webkit-transition: all 0.2s linear; transition: all 0.2s linear;}
#header .h_wrap #nav #gnb >ul >li >div >ul >li >ul >li >a.on,
#header .h_wrap #nav #gnb >ul >li >div >ul >li >ul >li >a:hover,
#header .h_wrap #nav #gnb >ul >li >div >ul >li >ul >li >a:active{color: rgba(0, 48, 108, 0.8);}
#header .h_wrap #nav #gnb >ul >li >div >ul >li >ul >li >a.on::before,
#header .h_wrap #nav #gnb >ul >li >div >ul >li >ul >li >a:hover::before,
#header .h_wrap #nav #gnb >ul >li >div >ul >li >ul >li >a:active::before {background-color: rgba(0, 48, 108, 0.8);}
#header .h_wrap #nav #gnb >ul >li >div >ul >li >ul >li >a.on > span{text-decoration: underline; }
#header .h_wrap #nav #gnb >ul >li >div >ul >li >ul >li >a:hover > span{text-decoration:underline;}
#header .h_wrap #nav #gnb >ul >li >div >ul >li >ul >li >ul{display:none;}
#header .h_wrap #nav #gnb >ul >li >div >ul >li >ul >li >ul >li >ul{display:none;}

#header .h_wrap .allmenu_btn_open {display: flex; justify-content: flex-start; align-content: center; align-items: center; flex-wrap: wrap; width: 4rem; height: 4rem; }
#header .h_wrap .allmenu_btn_open::before {content: ""; display: block; width: 100%; height:3px; background-color: #fff;}
#header .h_wrap .allmenu_btn_open::after {content: ""; display: block; width: 2.4rem; height:3px; background-color: #F39800;}
#header .h_wrap .allmenu_btn_open span {text-indent: -9999px;}

/* #sub #header {background:none} */
#sub #header .h_wrap {max-width: calc(1680px); }
#sub #header #nav #gnb >ul >li >a >span{color: #fff;}
#sub #header .allmenu_btn_open::before {content: ""; display: block; width: 100%; height:3px; background-color: #fff;}

#sub #header .h_wrap #nav #gnb >ul >li.on {color: #F39800;}
#sub #header .h_wrap #nav #gnb >ul >li.on::after {content: ""; display: block; width: 100%; margin-top: 1.4rem; height: 2px; background-color: #F39800;}

#header.on,
#sub #header.on {background-color: #00306C; backdrop-filter: blur(20px)}
[data-scroll="on"] #header .h_wrap #logo >a,
#header.on .h_wrap #logo >a {background: url(../../../images/site/kor/layout/logo-h-on.png)no-repeat center / contain;}
#header.on .h_wrap #nav #blind {height: 29.7rem;}
#header.on .h_wrap #nav #gnb >ul >li >a span {color: #fff;}
#sub #header.on .h_wrap #nav #gnb >ul >li >a.on span,
#header.on .h_wrap #nav #gnb >ul >li >a.on span{color:#F39800}
#header.on .h_wrap .allmenu_btn_open::before {background-color: #fff;}
#header .h_wrap #nav #gnb >ul >li >div {background-color: #fff;}

[data-scroll="on"] #header{background-color: #00306C;}


/*-------------------------------------------------------------------
    visual
-------------------------------------------------------------------*/
#visual{height: 31.9rem; background: url(../../../images/site/kor/layout/sub_visual.png) no-repeat center / cover;}
#visual .inner{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; align-content: center; position: relative; width: 100%; max-width:168rem; height: 100%; margin: 0 auto; padding: 0 2rem;}
#visual .inner h2.title{display: block; width: 100%; margin-top: 2rem; line-height: 1; color: #fff; font-size: 4.6rem; text-align:center; font-weight:700;}
#visual .inner .navi {display: flex; align-items: center; color: rgba(255, 255, 255, 0.70); font-size: 1.6rem;}
#visual .inner .navi li {display: flex; justify-content: center; align-items: center;}
#visual .inner .navi li::after {content: ""; display: inline-block; width: 2.4rem; height: 2.4rem; margin: 0 1.2rem; background: url(../../../images/site/kor/layout/icon-crumble.png) no-repeat center / contain;}
#visual .inner .navi li:last-child::after {display: none;}
#visual .inner .navi li.home a {display: block; width: 1.25rem; height: 1.25rem; flex-shrink: 0; text-indent: -9999px; background: url(../../../images/site/kor/layout/icon-home.svg) no-repeat center / contain;}
#visual .inner .navi li .active {font-weight: 600; color: #fff;}
#visual .v_tab_wrap{position:absolute;left:0;bottom:0;width:100%;}
#visual .v_tab_wrap .tab_mob_btn{position:relative;display:flex;justify-content:flex-start;align-items:center;width:100%;height:6rem;padding:0 6rem 0 2rem;background:#F39800;font-size:2.1rem;font-weight:700;text-align:left;display:none}
#visual .v_tab_wrap .tab_mob_btn::after{content:"";position:absolute;right:2rem;top:50%;width:2.8rem;height:2.8rem;transform:translateY(-50%);background:url(../../../images/site/kor/layout/icon_tabM_arrow.svg) center/contain no-repeat;transition:all .3s}

#visual .inner .tab {display: flex; align-items: center; width: 100%;}
#visual .inner .tab li {display: flex; justify-content: center; align-items: center; flex: 1; height:6rem; border-right: 1px solid #000; color: #CCC; font-size: 2.1rem; font-weight: 600;}
#visual .inner .tab li:last-child{border-right:0}
#visual .inner .tab li a{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0 .8rem;line-height:1.2;text-align:center;background-color:#00306c;transition:all .3s}
#visual .inner .tab li a:hover{background:#0c4a97}
#visual .inner .tab li.active {flex: 1; border-right: 1px solid #F39800; color: #000; font-weight: 700;}
#visual .inner .tab li.active a{background-color: #F39800;}

/* Container */
#container{display:block;width:100%;max-width:calc(168rem + 4rem);margin:0 auto;padding:12rem 2rem 15rem}
#container #remote{width: 24rem;}
#container #remote h2{width:100%; line-height:36px; padding:35px 0; font-size:30px; text-align:center; color:#fff; background: gray;}
#container #remote #lnb ul{width:100%;}
#container #remote #lnb ul li{border-bottom:1px solid #ebebeb;}
#container #remote #lnb ul li a{position:relative; display:block; padding:17px 30px 17px 25px; text-decoration:none; font-size:16px;color:#222;}
#container #remote #lnb ul li ul{display:none; padding:20px 25px; background:#f7f7f7; box-sizing:border-box;}
#container #remote #lnb ul li ul li{margin-top:7px; border-bottom:0;}
#container #remote #lnb ul li ul li:first-child{margin-top:0;}
#container #remote #lnb ul li ul li a{position:relative; display:inline-block; line-height:19px; padding:0 0 0 12px; border:0; font-size:15px; color:#222;}

#container #path {position:absolute; right:0; margin-right:0; height:60px; top:-60px; z-index:10; background:lightgray; width:100%; padding: 0 2rem;}
#container #path:before{content:""; display:block; width:100%; height:100%; background:lightgray; position:absolute; right:-100%; top:0;}
#container #path:after{content:""; display:block; width:100%; height:100%; background:lightgray; position: absolute; left:-100%; top:0; clear: both;}
#container #path .navi {height:100%; line-height: 60px;}
#container #path .navi:after {content:""; display:block; clear:both;}
#container #path .navi li{float:left; height:100%;}
#container #path .navi li.home {margin-right:25px;}
#container #path .navi li.home a {height:100%; width:60px; overflow:hidden; text-indent:-9999px; padding:0; margin:0;border-left:1px solid rgba(255,255,255,0.2);border-right:1px solid rgba(255,255,255,0.2);}
#container #content{position: relative; width: 100%;}
#container #content h3.title{display: block; position:relative; margin-top: 3rem; margin-bottom: 3rem; font-size: 3rem; color:#222; }
#container #content #txt{height: auto; font-size: 1.6rem;}


/* Footer */
#footer {position:relative; z-index: 20; padding:6rem 0 10rem;border-top:1px solid #eee}
#footer .inner{display: flex; flex-wrap: wrap; justify-content: flex-start; align-content: flex-start; position: relative; gap: 6.4rem; width: 100%; max-width: calc(1920px - 12rem); margin: 0 auto; padding: 0 2rem;}
#footer .inner .ftop{display: flex; justify-content: space-between; align-items: center; width: 100%; }
#footer .inner .ftop .ft_link {display: flex; gap: 4rem; }
#footer .inner .ftop .ft_link li a {display: block; width: 100%; font-size: 1.8rem; font-weight: 600; color: #151515;}

/* #footer .inner .ftop .family_site{position: relative; width: 26rem;}
#footer .inner .ftop .family_site >a{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; width: 100%; height: 5.2rem; padding: 0 2.4rem; font-size: 1.7rem; font-weight: 600; color: #000; background-color: #F0F2F5;}
#footer .inner .ftop .family_site >a::after{content: ""; width: 2rem; height: 0.8rem; background: url(../../../images/site/kor/layout/icon-open.svg) no-repeat center /contain;}
#footer .inner .ftop .family_site >a.active::after{transform: rotate(180deg);}
#footer .inner .ftop .family_site >ul{opacity: 0; visibility: hidden; position: absolute; top: 100%; left: 0; width: 100%; height: auto; padding: 0 2.4rem 1.6rem; background-color: #F0F2F5;-webkit-transition: all 0.2s linear; transition: all 0.2s linear;}
#footer .inner .ftop .family_site >a.active + ul{opacity: 1; visibility: visible;}
#footer .inner .ftop .family_site >ul >li:not(:first-child){margin-top: 0.4rem;}
#footer .inner .ftop .family_site >ul >li+ li {padding-top: 1rem;}
#footer .inner .ftop .family_site >ul >li >a{display: block; font-size: 1.6rem;} */


#footer .inner .fbot {display: flex; justify-content: space-between; align-items: stretch; width: 100%;}
#footer .inner .fbot .fb_l p {display: flex; gap: 1.2rem; flex-wrap: wrap;}
#footer .inner .fbot .fb_l p span {font-size: 1.8rem; color: #E97800; font-weight: 700;}
#footer .inner .fbot .fb_l p.copy {margin-top: 2rem; font-size: 1.5rem; color: #717171;}
#footer .inner .fbot .flogo img {width: 26rem; height: auto; object-fit: cover;}

#footer .inner .top_con {display: flex; justify-content: center; align-items: center; position: absolute; top: -9rem; right: -6rem; flex-shrink: 0; width: 6rem; height: 6rem; background-color: #F39800;}
#footer .inner .top_con::after {content: ""; display: inline-block; width: 2rem; height: 2rem; background: url(../../../images/site/kor/layout/icon-up.png) no-repeat center / contain;}

#footer .inner .top {display: flex; justify-content: center; align-items: center; position: fixed; right: 6rem; bottom: 5rem; flex-shrink: 0; width: 6rem; height: 6rem; opacity: 0; background-color: #F39800; z-index: 9999;}
#footer .inner .top::after {content: ""; display: inline-block; width: 2rem; height: 2rem; background: url(../../../images/site/kor/layout/icon-up.png) no-repeat center / contain;}
#footer .inner .top.show {opacity: 1;}




@media screen and (max-width: 1920px){
    #footer .inner .top_con {right: 2rem;}
}

@media screen and (max-width: 1440px){
    #header .h_wrap #nav #gnb >ul >li >div >ul >li {padding: 2rem;}
    #header .h_wrap #nav #gnb >ul >li >div >ul >li >a {padding: 0; font-size: 1.9rem;}
    #header .h_wrap #nav #gnb >ul >li >div >ul >li >ul {padding: 1.3rem; margin-top: 0;}
    #header .h_wrap #nav #gnb >ul >li >div >ul >li >ul >li >a {font-size: 1.6rem;}
    #header .h_wrap #nav #gnb >ul >li >div >ul >li >ul{display: block; width: 100%; margin: 1.2rem 0 0;}
    #header .h_wrap #nav #gnb >ul >li >div >ul >li:has(> ul) >a {padding: 0;}
    #visual .inner .tab li{font-size:1.8rem}
}

@media screen and (max-width: 1200px){
    #header .h_wrap #nav #gnb >ul >li >div >ul >li {padding: 1.3rem;}
    #header .h_wrap #nav #gnb >ul >li >div >ul >li >ul {padding: 1rem; margin-top: 1rem;}
}

@media screen and (min-width: 1025px){
    #slide_map{background-color: #003F8E; backdrop-filter: blur(20px);}
    #slide_map .inner{display: flex; flex-wrap: wrap; flex-direction: column; justify-content: flex-start; align-items: flex-start; position: relative; width: 100%; height: 100vh; max-width: 1760px; padding: 0 8rem; margin: 0 auto;}
    #slide_map .inner .top_line{display: block; width: 100%; max-width: 1760px; padding: 3rem 0; margin: 0 auto;}
    #slide_map .inner #logo{justify-content: flex-start;}
    #slide_map .inner #logo >a{display: block; width: 18.2rem; height: 3.8rem; background: url(../../../images/site/kor/layout/logo-h-on.png) no-repeat center / cover; text-indent: -9999px;}
    #slide_map .inner .binds{overflow-y: auto; width: 100%; max-width: 1760px; height: calc(100% - 10rem - 3vh); margin: 3vh auto 0;}
    #slide_map .inner .binds >ul{display: flex; flex-wrap: nowrap; align-items: flex-start; gap: 8rem; height: 100%; max-height: 100%;}
    #slide_map .inner .binds >ul >li{position: relative; width: 100%;}
    #slide_map .inner .binds >ul >li.on >a {color: #F39800;}
    #slide_map .inner .binds >ul >li >a{display: block; position: relative; padding-bottom: 2rem; font-size: 2.8rem; font-weight: 700; color: #fff;}
    #slide_map .inner .binds >ul >li >a:before{
        content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.2);
        -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
    }
    #slide_map .inner .binds >ul >li.on >a:before,
    #slide_map .inner .binds >ul >li >a:hover:before{background-color: rgba(255, 255, 255, 1);} 
    #slide_map .inner .binds >ul >li >div{
        position: relative; padding: 3.2rem 2rem;
        -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
    }
     #slide_map .inner .binds >ul >li:before{
        content: ""; opacity: 0; display: block; position: absolute; top: 6.2rem; left: 0; width: 100%; height: 100%; background: linear-gradient(180deg, #004BA9 0%, #003F8E 100%);
        transition: all 0.2s linear;
    }
    #slide_map .inner .binds >ul >li.on:before{opacity: 1;}
    #slide_map .inner .binds >ul >li:last-child:before {display: none;}
    #slide_map .inner .binds >ul >li >div >ul >li:not(:first-child){margin-top: 2.4rem;}
    #slide_map .inner .binds >ul >li >div >ul >li >a{
        display: block; color: rgba(255, 255, 255, 0.9); font-size: 1.9rem; font-weight: 500; line-height: 150%;
        -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
    }
    #slide_map .inner .binds >ul >li >div >ul >li.on >a,
    #slide_map .inner .binds >ul >li >div >ul >li >a:hover{color: #E79A56;}
    #slide_map .inner .binds >ul >li >div >ul >li >ul{display: block !important; margin-top: 0.8rem;}
    #slide_map .inner .binds >ul >li >div >ul >li >ul >li{display: block; position: relative; padding-left: 1.4rem;}
    #slide_map .inner .binds >ul >li >div >ul >li >ul >li:not(:first-child){margin-top: 0.8rem;}
    #slide_map .inner .binds >ul >li >div >ul >li >ul >li >a{
        display: inline-block; color: rgba(255, 255, 255, 0.8); font-size: 1.7rem; line-height: 1.2; font-weight: 300;
        -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
    }
    #slide_map .inner .binds >ul >li >div >ul >li >ul >li.on >a,
    #slide_map .inner .binds >ul >li >div >ul >li >ul >li >a:hover{color: #E79A56; opacity: 0.8; text-decoration: underline; text-underline-position: under;}
    #slide_map .inner .binds >ul >li >div >ul >li >ul >li >a:before{
        content: ""; display: block; position: absolute; top: 0.9rem; left: 0.5rem; width: 2px; height: 2px; background-color: rgba(255, 255, 255, 0.8); border-radius: 50%;
        -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
    }
    #slide_map .inner .binds >ul >li >div >ul >li >ul >li >a:hover:before{background-color: #E79A56}
    #slide_map .inner .bot_line{display: none;}
}

@media screen and (max-width: 1024px){
    .fixed #slide_map{display: flex;}
    #slide_map{justify-content: flex-end; align-content: flex-start; background: rgba(0, 0, 0, 0.60); backdrop-filter: blur(10px);}
    #slide_map:after {display: none;}
    #slide_map .inner{width: 500px; height: 100vh; background-color: #17469E;}
    #slide_map .inner .top_line{display: flex; justify-content: space-between; align-items: center; height: 8rem; width: 100%; padding: 0 2rem;}
    #slide_map .inner .top_line #logo{justify-content: flex-start;}
    #slide_map .inner #logo >a{display: block; width: 17.2rem; height: 3.6rem; background: url(../../../images/site/kor/layout/logo-h-on.png) no-repeat center / cover; text-indent: -9999px;}
    #slide_map .inner .binds{overflow-y: auto; width: 100%; height: calc(100% - 8rem - 8rem);}
    #slide_map .inner .binds >ul{display: block; }
    #slide_map .inner .binds >ul >li >a{display: block; position: relative; padding: 1.834rem 6.4rem 1.834rem 2rem; color: #FFF; font-size: 2rem; letter-spacing: -0.018rem; font-weight: 600; border-bottom: 1px solid rgba(238, 238, 238, 0.1);}
    #slide_map .inner .binds >ul >li.on >a {color: #F39800;}
    #slide_map .inner .binds >ul >li.on >a::after {transform: rotate(180deg);}
      #slide_map .inner .binds >ul >li >a:before{
        content: ""; opacity: 0.8; display: block; position: absolute; top: 50%; right: 2rem; width: 1.6rem; height: 1.6rem; background: url(../../../images/site/kor/layout/icon-gnb-open.svg) no-repeat center center / 100% auto;
        -webkit-transform: rotate(180deg) translateY(50%); transform: rotate(180deg) translateY(50%);
        -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
    }
    #slide_map .inner .binds >ul >li >a.show{border-color:#fff}
    #slide_map .inner .binds >ul >li >a.show:before{
        opacity: 1;
        -webkit-transform: rotate(0deg); transform: rotate(0deg) translateY(-50%);
    }
    #slide_map .inner .binds >ul >li >div{
        opacity: 0; visibility: hidden; height: 0;
        -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
    }
    #slide_map .inner .binds >ul >li >a.show + div{opacity: 1; visibility: visible; height: auto;}
    #slide_map .inner .binds >ul >li >div >ul{padding: 2rem; background-color: rgba(0, 0, 0, 0.08);}
    #slide_map .inner .binds >ul >li >div >ul >li{display: flex; flex-wrap: wrap; flex-direction: column;gap:1.2rem 0}
    #slide_map .inner .binds >ul >li >div >ul >li >a{position: relative;}
    #slide_map .inner .binds >ul >li >div >ul >li:has(> ul) >a::after,#slide_map .inner .binds >ul >li >div >ul >li:has(> ul) >a::before {content: ""; display: block; position: absolute; right: 0; top: 50%; width: 12px; height: 2px; transform: translateY(-50%); background-color: #fff;}
    #slide_map .inner .binds >ul >li >div >ul >li:has(> ul) >a::before {transform: rotate(90deg);}
    #slide_map .inner .binds >ul >li >div >ul >li:has(> ul) >a::after {top: 51%;}
    #slide_map .inner .binds >ul >li >div >ul >li:not(:first-child){margin-top: 2rem;}
    #slide_map .inner .binds >ul >li >div >ul >li.on:has(> ul) >a::before {display: none;}
    #slide_map .inner .binds >ul >li >div >ul >li >a{display: block; font-size: 1.8rem; color: #fff; font-weight: 500; line-height: 1.4;}
    #slide_map .inner .binds >ul >li >div >ul >li.on >a,
    #slide_map .inner .binds >ul >li >div >ul >li >a:hover{color: #E79A56;}
    #slide_map .inner .binds >ul >li >div >ul >li >ul{display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: stretch; flex: 1; gap: 1rem 2rem;}
    #slide_map .inner .binds >ul >li >div >ul >li >ul >li{position: relative; width: 100%; padding-left: 1.6rem;}
    #slide_map .inner .binds >ul >li >div >ul >li >ul >li >a{display: block; font-size: 1.6rem; color: rgba(255, 255, 255, 0.8); line-height: 1.5;}
    #slide_map .inner .binds >ul >li >div >ul >li >ul {
        display: none; visibility: hidden; height: 0;
        -webkit-transition: all 0.2s linear; transition: all 0.2s linear;
    }
    #slide_map .inner .binds >ul >li >div >ul >li.on >ul {display: block; visibility: visible; height: auto;}
    #slide_map .inner .binds >ul >li >div >ul >li >ul >li.on >a,
    #slide_map .inner .binds >ul >li >div >ul >li >ul >li >a:hover{color: #E79A56; opacity: 0.8; text-decoration: underline; text-underline-position: under;}
    #slide_map .inner .binds >ul >li >div >ul >li >ul >li >a:before{content: ""; display: block; position: absolute; top: 1rem; left: 0.7rem; width: 2px; height: 2px; background-color: rgba(255, 255, 255, 0.8); border-radius: 50%; }
    #slide_map .close_btn{top: 2.6rem; right: 2rem; width: 2.8rem; height: 2.8rem;}
    #header .h_wrap h1{left: 30px; margin-left: 0; }
    #header .toputil_control{right: 30px; margin-right: 0;}
    #header .h_wrap #nav #gnb{display: none;}
    #container{padding:6rem 2rem 14rem}
    #container #remote{display: none;}
    #container #content{padding-left: 0; min-height: auto;}
    #txt{min-height: 400px;}
    #txt h3.title{padding: 20px 0 10px 15px; margin: 0px 0 10px 0}
    #footer {padding:4.5rem 0 5.4rem;}
    #footer .inner {gap: 5.4rem;}
    #footer .inner .top_con {width: 5.56rem; height: 5.56rem; top: -7rem;}
    #footer .inner .top_con::after {width: 2.2rem; height: 2.2rem;}
}

@media screen and (max-width: 768px){
    #visual .v_tab_wrap .tab_mob_btn{display:flex}
    #visual .inner .tab{overflow:hidden;visibility:hidden;height:0;display:block;position:absolute;top:100%;left:0;box-shadow:0 .5rem .5rem rgba(0,0,0,.3);z-index:2;transition:all .3s}
    #visual .inner .tab li{flex:none}
    #visual .inner .v_tab_wrap.active .tab{visibility:visible;height:auto}
    #visual .inner .v_tab_wrap.active .tab_mob_btn::after{transform:translateY(-50%) rotate(180deg)}
       /*#visual .inner .tab li.active{display:none}*/

    #container{padding:5rem 2rem 7rem}

    #footer .inner .ftop {flex-wrap: wrap; gap: 2.4rem;}
    #footer .inner .ftop >ul {width: calc(100% - 4rem);}
    #footer .inner {gap: 2rem;}
    #footer .inner .top_con {width: 4.5rem; height: 4.5rem;}
    #footer .inner .top_con::after {width: 1.7rem; height: 1.7rem;}
    #footer .inner .fbot {flex-wrap: wrap; gap: 2rem;}
}
@media screen and (max-width: 640px){
    #footer .inner .ftop {flex-wrap: wrap; flex-direction: column-reverse; align-items: flex-start;}
    /* #footer .inner .ftop .family_site{width: 100%;} */
}
@media screen and (max-width: 500px){
    #footer .inner .ftop .ft_link {width: 100%; gap: 2rem;}
}