/* html, body{min-width:1040px;width:100%;background:gray} */
html{font-size:16px}
body {font-size:1.0rem;}

#header {position:fixed;z-index:30;top:0;left:0;width:100%;border-bottom:1px solid rgba(255,255,255,0.2);}
#header .in_conts {position:relative;/*max-width:1920px;min-width:1040px;*/width:100%;min-height:76px;display:flex;justify-content:center;padding:0 20px;margin:0 auto;}

#header .logo-wrap {position:absolute;top:50%;left:20px;transform:translate(0,-50%);display:flex;align-items:center;}
#header .logo-wrap>a.logo {font-size:0;width:16.375rem;background:url(/image/main/logo-white.svg) no-repeat;}
#header .logo-wrap>a.logo>img {opacity: 0}

#header .util-wrap {position:absolute;top:0;right:80px;height:100%;display:flex;align-items:center;}
#header .util-wrap a.btn-menu {
    position:relative;
    display:block;
    width: 40px;
    height: 40px;
    border-radius: 0;
    -o-transition: all .4s .0s ease-in-out;
    -ms-transition: all .4s .0s ease-in-out;
    -moz-transition: all .4s .0s ease-in-out;
    -webkit-transition: all .4s .0s ease-in-out;
    transition: all .4s .0s ease-in-out;
    z-index: 3;
    /*background-color:#2d3032;*/
}
#header .util-wrap a.btn-menu span {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    -o-transform-origin: 50% 50%;
    -ms-transform-origin: 50% 50%;
    -moz-transform-origin: 50% 50%;
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;

    margin-left: -11px;
    width: 30px;
    height: 2px;
    background-color: #fff;
    -o-transition: margin-top .3s .4s ease-in-out,-o-transform .3s .0s ease-in-out,opacity .0s .4s ease-in-out;
    -ms-transition: margin-top .3s .4s ease-in-out,-ms-transform .3s .0s ease-in-out,opacity .0s .4s ease-in-out;
    -moz-transition: margin-top .3s .4s ease-in-out,-moz-transform .3s .0s ease-in-out,opacity .0s .4s ease-in-out;
    -webkit-transition: margin-top .3s .4s ease-in-out,-webkit-transform .3s .0s ease-in-out,opacity .0s .4s ease-in-out;
    transition: margin-top .3s .4s ease-in-out,transform .3s .0s ease-in-out,opacity .0s .4s ease-in-out;
}
#header .util-wrap a.btn-menu span.l1 {margin-top: -10px;}
#header .util-wrap a.btn-menu span.l2 {margin-top: -1px;}
#header .util-wrap a.btn-menu span.l3 {margin-top: 8px;}

#header .util-wrap>.link {display:flex;align-items:center;margin-right:20px;}
#header .util-wrap>.link>a {color:#fff;font-size:0.875rem;display:flex;align-items:center;}
#header .util-wrap>.link>a + a:before {content:"";width:1px;height:12px;background-color:rgba(255,255,255,0.5);margin:0 10px;}
#header .util-wrap>.link>a:hover {color:#222;}

#nav-wrap ul.dep1 {position:relative;display:flex;align-items:center;}
#nav-wrap ul.dep1>li {position:relative;     margin: 0 2rem;}
#nav-wrap ul.dep1>li>a {position:relative;color:#fff;font-size:1.13rem;line-height:76px;font-weight:600;}
#nav-wrap ul.dep1>li:before {content:"";position:absolute;bottom:-1px;left:50%;transform:translate(-50%,0);width:0;height:3px;background-color:transparent;}
#nav-wrap ul.dep1>li.on>a,
#nav-wrap ul.dep1>li>a:hover {color:#222;}
#nav-wrap ul.dep1>li.on:before {width:100%;background-color:#e6572a;}
#nav-wrap ul.dep1>li.selected>a {color:#222;}
#nav-wrap ul.dep1>li.selected:before {width:100%;background-color:#222;}

#nav-wrap ul.dep1>li + li {margin: 0 2rem;}
#nav-wrap ul.dep1>li>ul.dep2 {display:none;position:absolute;top:100%;left:50%;transform:translate(-50%,0);padding-top:30px;width:160px;}
#nav-wrap ul.dep1>li>ul.dep2>li {text-align:center;}
#nav-wrap ul.dep1>li>ul.dep2>li + li {margin-top:15px;}
#nav-wrap ul.dep1>li>ul.dep2>li a {color:#222;font-size:1.0rem;font-weight:500;}
#nav-wrap ul.dep1>li>ul.dep2>li.on>a,
#nav-wrap ul.dep1>li>ul.dep2>li>a:hover {color:#222;}
#nav-wrap ul.dep1>li>ul.dep2>li>ul.dep3 {display:none;}


#header:before {content:"";position:absolute;top:0;left:0;right:0;height:0;background-color:rgba(255,255,255,1);z-index:-1;}
#header:after {content:"";position:absolute;top:0;left:0;right:0;bottom:0;background-color:rgba(255,255,255,0.0);z-index:-1;}

#header.active {background-color:#fff;}
#header.active #nav-wrap ul.dep1>li>a {color:#222;}
#header.active #nav-wrap ul.dep1>li.on>a,
#header.active #nav-wrap ul.dep1>li>a:hover {color:#e6572a;}
#header.active .util-wrap a.btn-menu span {background-color:#e6572a;}
#header.active .util-wrap>.link>a {color:#e6572a;}
#header.active .util-wrap>.link>a + a:before {color:#e6572a;}
#header.active:before /*{height:260px;}*/
#header.active:after {color:#e6572a}
#header.active .logo-wrap>a.logo {background-image:url(/image/main/logo.svg);}


/* 스크롤시 header 변경 */
#header.scroll {background-color:#fff;border-bottom-color:rgba(0,0,0,0.07);}
#header.scroll #nav-wrap ul.dep1>li>a {color:#494949;}
#header.scroll #nav-wrap ul.dep1>li.on>a,
#header.scroll #nav-wrap ul.dep1>li>a:hover {color:#e6572a;}
#header.scroll .util-wrap a.btn-menu span {background-color:#e6572a;}
#header.scroll .util-wrap>.link>a {color:#e6572a;}
#header.scroll .util-wrap>.link>a + a:before {color:#e6572a;}
#header.scroll .logo-wrap>a.logo {background-image:url(/image/main/logo.svg);}


/* 전체메뉴 */
#top-layer-menu {
    display:none;
    position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(255,255,255,0.82);z-index:40;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
#top-layer-menu>.wrap {width:100%;height:100%;display:flex;justify-content:center;align-items:center;}
#top-layer-menu>.wrap>.contBox {position:relative;max-width:1160px;width:80%;padding-top:100px;}
#top-layer-menu>.wrap>.contBox>ul.dep1 {/*display:flex;justify-content:space-between;align-items:flex-start;width:100%;*/
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    flex-wrap: nowrap;
}
#top-layer-menu>.wrap>.contBox>ul.dep1>li {width:calc((100% / 3) - 40px);}

#top-layer-menu>.wrap>.contBox>ul.dep1>li>a {
  color:#1d2738;
  font-size:2rem;
  font-weight:600;
}

#top-layer-menu>.wrap>.contBox>ul.dep1>li>a:after {
  content:"";
  display:block;
  width:100%;
  height:3px;
  background-color:#1d2738;
  margin:20px 0 30px;
  transition: all 0.3s ease;
  transform: translateY(-3px);
}

/* ✅ 핵심: li:hover로 변경 */
#top-layer-menu>.wrap>.contBox>ul.dep1>li:hover > a {
  color:#e6572a; transition: all 0.3s ease; transform: translateY(-3px);
}

#top-layer-menu>.wrap>.contBox>ul.dep1>li:hover > a:after {
  background-color:#e6572a; transition: all 0.3s ease; transform: translateY(-3px);
}



#top-layer-menu>.wrap>.contBox>ul.dep1>li.on {color:#e6572a;transition: all 0.3s ease;transform: translateY(-3px);}
#top-layer-menu>.wrap>.contBox>ul.dep1>li.on>a {color:#e6572a;transition: all 0.3s ease;transform: translateY(-3px);}
#top-layer-menu>.wrap>.contBox>ul.dep1>li.on>a:after {background-color:#e6572a;transition: all 0.3s ease;transform: translateY(-3px);}
#top-layer-menu>.wrap>.contBox>ul.dep1>li>ul.dep2 {}
#top-layer-menu>.wrap>.contBox>ul.dep1>li>ul.dep2>li {}
#top-layer-menu>.wrap>.contBox>ul.dep1>li>ul.dep2>li + li {margin-top:10px;}
#top-layer-menu>.wrap>.contBox>ul.dep1>li>ul.dep2>li>a {color:#1d2738;font-size:1.3rem;font-weight:600;letter-spacing:-0.075rem;}
#top-layer-menu>.wrap>.contBox>ul.dep1>li>ul.dep2>li.on>a {color:#e6572a;}
#top-layer-menu>.wrap>.contBox>ul.dep1>li>ul.dep2>li>ul.dep3 {margin:10px 0 20px;}
#top-layer-menu>.wrap>.contBox>ul.dep1>li>ul.dep2>li>ul.dep3>li {padding-left:15px;}
#top-layer-menu>.wrap>.contBox>ul.dep1>li>ul.dep2>li>ul.dep3>li + li {margin-top:5px;}
#top-layer-menu>.wrap>.contBox>.etc {position:absolute;bottom:-12.5rem;left:0;}
#top-layer-menu>.wrap>.contBox>.etc>.link1 {margin-bottom:20px;}
#top-layer-menu>.wrap>.contBox>.etc>.link1>a {font-size:1.0rem;font-weight:500;}
#top-layer-menu>.wrap>.contBox>.etc>.link1>a.mypage {color:#2d3032;font-weight:600;}
#top-layer-menu>.wrap>.contBox>.etc>.link1>a + a {margin-left:15px;}
#top-layer-menu>.wrap>.contBox>.etc>.link2 {margin-bottom:20px;}
#top-layer-menu>.wrap>.contBox>.etc>.link2>a {font-size:1.0rem;font-weight:500;}
#top-layer-menu>.wrap>.contBox>.etc>.link2>a.privacy {color:#2d3032;font-weight:600;}
#top-layer-menu>.wrap>.contBox>.etc>.link2>a + a:before {content:"";display:inline-block;width:1px;height:12px;background-color:#999;margin:0 12px;}

#top-layer-menu>.wrap>.contBox>#close {position:absolute;top:0;right:0;width:33px;height:33px;cursor:pointer;}
#top-layer-menu>.wrap>.contBox>#close:before {content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);width:40px;height:3px;background-color:#e6572a;}
#top-layer-menu>.wrap>.contBox>#close:after {content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(45deg);width:3px;height:40px;background-color:#e6572a;}


#container{position:relative;}


#footer *{box-sizing: border-box;}
#footer{background:#1d2738}
#footer>.wrap{position:relative;max-width:1200px;min-height:76px;padding:4rem 0;margin:0 auto;}
#footer>.wrap{display: flex; justify-content: space-between; flex-direction: row;}

#footer .logo-wrap {display:flex; margin-right: 10%;}
#footer .logo-wrap>a.logo {font-size:0;width:18rem;background:url(/image/main/logo-white.svg) no-repeat;}
#footer .logo-wrap>a.logo>img {opacity: 0}
#footer .logo-wrap>a.logo>img {opacity: 0}
#footer>.wrap>.box{display:flex;}
#footer>.wrap>.box>div{}
#footer>.wrap>.box .addr{display:flex; flex-wrap:wrap; gap:15px 40px; width: 90%; }
#footer>.wrap>.box .addr>span{/*font-size: 0.95rem;*/  color:rgba(255,255,255,0.6); line-height:1.5; }
#footer>.wrap>.box .addr>span:last-child{font-size: 0.9rem; color:rgba(255,255,255,0.4); font-weight: 300;}


@media only screen and (max-width:1400px) {
    #nav-wrap {margin-left:5.625rem;}
}

@media only screen and (max-width:1200px) {
    html {font-size:14px;}
    #nav-wrap ul.dep1>li + li {margin-left:2.5rem;}
    #footer>.wrap {padding: 3rem 3rem;}
    #footer .logo-wrap {margin-right: 5%;}
}

@media only screen and (max-width:1140px) {
    #footer>.wrap>.box .addr {width: 100%; }
}

@media only screen and (max-width:960px) {
    html {font-size:12px;}
    #wrap{ width:100%}
    #header .in_conts{max-width:100%;min-width:100%}
    #nav-wrap{display:none}

    #footer>.wrap{
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }
    #footer .logo-wrap {margin-bottom: 2rem;}
    #footer>.wrap>.box{flex-direction: column;align-items: flex-start;}
    #footer>.wrap>.box .addr {width: 90%; font-size: 1.2rem;}
    #footer>.wrap>.box .addr>span {font-size: 1.2rem;}
    #footer>.wrap>.box .addr>span:last-child {font-size: 1.2rem;}

}

@media only screen and (max-width:768px) {
    

}

@media only screen and (max-width:600px) {
    #top-layer-menu>.wrap>.contBox>ul.dep1{flex-direction: column;}
    #top-layer-menu>.wrap>.contBox>ul.dep1>li{width:90%;margin:20px auto}
    #top-layer-menu>.wrap>.contBox>#close{right:5%}
    #top-layer-menu>.wrap>.contBox>ul.dep1>li>a:after {margin: 15px 0 15px;}
    #top-layer-menu>.wrap>.contBox {padding-top: 80px;}
    /*#footer>.wrap>.box .addr {width: 100%; }*/
    #header .util-wrap {right: 70px;}

}

@media only screen and (max-width:320px) {
    #top-layer-menu>.wrap>.contBox>ul.dep1{flex-direction: column;}
    #top-layer-menu>.wrap>.contBox>ul.dep1>li{width:90%;margin:20px auto}
    #top-layer-menu>.wrap>.contBox>#close{right:5%}
    #top-layer-menu>.wrap>.contBox>ul.dep1>li>a:after {margin: 10px 0 14px;}
    #top-layer-menu>.wrap>.contBox>ul.dep1>li>ul.dep2>li>a {font-size: 1rem;}
    #top-layer-menu>.wrap>.contBox>ul.dep1>li>a {font-size: 1.5rem;}
    #top-layer-menu>.wrap>.contBox>ul.dep1>li {margin: 15px auto;}
    #top-layer-menu>.wrap>.contBox {padding-top: 30px;}

}