@charset "utf-8";


#site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 110;
  width: 100%;
  height: 100px;
  box-sizing: border-box;
/*  background-color: rgba(0,0,0,0.75);*/
  background: transparent;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  font-weight: 400;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}
#site-header a{   font-weight: 400;}
#site-header:after { content: ''; position: fixed; top: 0; right: 0; width: 100%; height: 0%; max-width: 1400px; background-color: #123896; z-index: 0; 
  -webkit-transition: height 0.35s ease;
  transition: height 0.35s ease;
}

#site-header > .top{height: 43px;display: flex;  font-size:0.9375em;position: relative;z-index: 2;}
#site-header > .top a.fm{display:block;margin-top: 0;}
#site-header > .top > .col{background:#fff;}
#site-header > .top > .col.lft{background:transparent;min-width: 304px;width: 304px;}
#site-header > .top > .col.rgh{width: 100%;text-align: right;display: flex;justify-content: flex-end;align-items: center;padding-right: 33px;line-height: 1;}
#site-header > .top .gnb{display:flex;}
#site-header > .top .gnb a{display: inline-flex;width: 152px;height: 43px;align-items: center;justify-content: center;font-size: 15px; background-color: #fff; color: #000;}
#site-header > .top .gnb a.on{color: #ffbe00;background-color: transparent;}
/*#site-header > .top .gnb a:hover{color: #ffbe00;}*/

#site-header > .inner {padding: 0 70px;height: 100px;margin: 0 auto;display: flex;align-items: center;position: relative;}
#site-header > .inner .area_rgh{margin-left: auto;display: flex;align-items: center;}
#site-header > .inner .area_rgh .lang{ line-height:1;}
#site-header > .inner .area_rgh .lang a{ display:inline-block; color:#fff; font-size:14px; margin-right:7px; border-bottom:2px transparent solid; padding:3px 0; opacity:0.6;}
#site-header > .inner .area_rgh .lang a.active{ border-color:#fff; opacity:1; }
#site-header.scrollDown > .inner .area_rgh .lang a,
.header_hover #site-header > .inner{ border-bottom: 1px solid #ddd; color: #222;}
.header_hover #site-header > .inner .area_rgh .lang a{  color:#222;}
.header_hover #site-header > .inner .area_rgh .lang a:hover{ opacity: 1; }
#site-header.scrollDown > .inner .area_rgh .lang a.active,
.header_hover #site-header > .inner .area_rgh .lang a.active{ border-color:#222; opacity:1; }


#site-header > .inner > * { z-index: 1; }
#site-header > .inner > * + * { margin-left: 30px; }
#site-header .logo { margin: 0; z-index: 0; }
/*#site-header .logo a { display: block; width: 250px; height: 60px; font-size: 0; background: url(../images/common/site-logo.svg) center no-repeat; 
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
}*/
#site-header .logo a {
  display: block;
  width: 173px;
  height: 90px;
  font-size: 0;
  background: url(../images/common/h_logo_white.png) center no-repeat;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  background-size: 75%;
}

#site-header .menu { display: flex; align-items: center; justify-content: flex-end; margin-left: 10%; }
#site-header .menu > li { padding: 40px 60px; }
#site-header .menu > li > a {display: block;font-size: 0.98rem;color: #fff;font-weight: 600;position: relative;z-index: 1;-webkit-transition: color 0.5s ease;transition: color 0.5s ease;}
#site-header .menu > li:after{width:50%; height:3px; position:absolute; left:50%; margin-left:-25%; bottom:3px; content:""; background:#fff; -webkit-transition: opacity 0.5s ease;transition: opacity 0.5s ease; opacity: 0;}
/*#site-header .menu > li.hover:after*/
#site-header .menu > li.active:after{  opacity: 1; }
#site-header .menu > li > a[target]:after { content: ''; display: inline-block; width: 14px; height: 14px; background-image: url(../images/ico/ico_link_b.png); background-size: contain; background-repeat: no-repeat; margin-left: 7px; -webkit-transition: background 0.5s ease; transition: background 0.5s ease; }
#site-header .menu > li > .depth2 { position: fixed; visibility: hidden; opacity: 0; width: 100%; height: 0%; max-width: 1400px; top: 0; right: 0; overflow: hidden; padding-top: 140px; box-sizing: border-box; display: flex; background-color: transparent; }
#site-header .menu > li > .depth2 > ul { width: 340px; padding: 35px 0; padding-left: 40px; }
#site-header .menu > li > .depth2 > ul > li + li { margin-top: 20px; }
#site-header .menu > li > .depth2 > ul > li > a { display: inline-block; font-size: 26px; color: #ffff; padding: 10px 30px; border-radius: 50px; }
#site-header .menu > li > .depth2 > ul > li > a:hover,
#site-header .menu > li > .depth2 > ul > li > a:focus,
#site-header .menu > li > .depth2 > ul > li.active > a { background-color: #1a47b7; }
#site-header .menu > li > .depth2 > div { flex-grow: 1; padding: 0 50px; padding-top: 35px; display: flex; flex-direction: column; }
#site-header .menu > li > .depth2 > div > .title { font-size: 38px; color: #fff; font-family: 'S-CoreDream-5Medium', sans-serif; max-width: 760px; margin-bottom: 50px; }
#site-header .menu > li > .depth2 > div > .img { width: 100%; height: 100%; max-height: 750px; background-size: cover; background-position: center; }
#site-header .lang { position: relative; text-align: center; line-height: 0; margin-left: 40px; }
#site-header .lang .img { display: inline-block; width: 60px; height: 24px; background-position: center; background-repeat: no-repeat; background-size: contain; background-image: url(../images/common/lang_select.png); font-size: 0; vertical-align: middle; -webkit-transition: background 0.5s ease; transition: background 0.5s ease; }
#site-header .lang > .depth {position: absolute;visibility: hidden;max-height: 0;margin-top: -1px;background-color: #ffcb33;top: 100%;left: 50%;transform: translateX(-50%);border: 1px solid #ffcb33;border-radius: 5px;box-shadow: 0px 22px 22px 0px rgba(0, 0, 0, 0.12);overflow: hidden;box-sizing: border-box;margin-top: 5px;}
#site-header .lang > .depth > ul { padding: 15px 20px; }
#site-header .lang > .depth > ul > li + li { margin-top: 10px; }
#site-header .lang > .depth > ul > li > a {display: inline;font-size: 15px;color: #cc8600;line-height: 1.2;border-bottom: 1px solid transparent;white-space: nowrap;}
#site-header .lang > .depth > ul > li > a.on,
#site-header .lang > .depth > ul > li > a:hover { color: #000000; border-color: #222; }
#site-header .lang.active > .depth { visibility: visible; max-height: 300px; -webkit-transition: max-height 0.5s ease; transition: max-height 0.5s ease; }
#site-header .navBtn { margin-left: 10px; }
#site-header .navBtn .menu_btn { width: 60px; height: 60px; background-color: transparent; border-radius: 50%; position: relative; border: 0; cursor: pointer; padding: 0; display: flex; align-items: center; flex-direction: column; justify-content: center; text-align: center; font-size: 11px; color: #fff; font-family: 'Roboto', sans-serif; -webkit-transition: background 0.5s ease; transition: background 0.5s ease; }
#site-header .navBtn .menu_btn .line {width: 33px; text-align: right; font-size: 0;}
#site-header .navBtn .menu_btn .line span {display: inline-block;width: 100%;height: 3px;background-color: #fff;-webkit-transition: all 0.5s ease;transition: all 0.5s ease; border-radius: 5px;}
#site-header .navBtn .menu_btn .line span + span { margin-top: 7px; }
#site-header .navBtn .menu_btn .line span.line_02{ width:70%;}
#site-header .navBtn .menu_btn:hover  .line span{ opacity: 0.8; }
#site-header .navBtn .menu_btn:hover  .line span.line_02{ width:100%;}

#site-header.menuOn:after { height: 100%; }
#site-header.menuOn .menu > li > a { color: #a0afd5; }
#site-header.menuOn .menu > li > a[target]:after { background-image: url(../images/ico/ico_link_b3.png); }
#site-header.menuOn .menu > li > .depth2 { height: 100%; }
#site-header.menuOn .menu > li.on > a { color: #fff; }
#site-header.menuOn .menu > li.on > a[target]:after { background-image: url(../images/ico/ico_link_w.png); }
#site-header.menuOn .menu > li.on > .depth2 { visibility: visible; opacity: 1; -webkit-transition: opacity 0.75s ease; transition: opacity 0.75s ease; }
#site-header.menuOn .lang .img { background-image: url(../images/common/lang_select_b.png); }
#site-header.menuOn .withPosco .img { background-image: url(../images/common/with_posco_w.png); }
#site-header.menuOn .navBtn .menu_btn { background-color: #1d48b2; }
#site-header.news { background-color: transparent; }
#site-header.news .logo a { background: url(../images/common/site-logo-w.svg) center no-repeat; }
#site-header.news .menu > li > a { color: #fff; }
#site-header.news .navBtn .menu_btn .line span { background-color: #fff; }
#site-header.news .lang .img { background-image: url(../images/common/lang_select_w.png); }

body.openGnbTy2 #site-header,
#site-header.scrollDown { background:#fff; border-bottom: 1px solid #ddd; }
body.openGnbTy2 #site-header .logo a,
#site-header.scrollDown .logo a{background-image: url(../images/common/h_logo.png);}
body.openGnbTy2 #site-header .menu > li > a,
#site-header.scrollDown .menu > li > a{color:#222;}
body.openGnbTy2 #site-header .navBtn .menu_btn .line span,
#site-header.scrollDown .navBtn .menu_btn .line span{background: #222;}
body.openGnbTy2 #site-header .navBtn .menu_btn,
#site-header.scrollDown .navBtn .menu_btn{color:#222;}
body.openGnbTy2 #site-header .menu > li:after,
#site-header.scrollDown .menu > li:after{background-color: #222;}

body.openGnbTy2 { overflow: hidden; }
body.openGnbTy2 #site-header .menu{ display: none; }
body.openGnbTy2 #allmenu { visibility: visible; opacity: 1; }
body.openGnbTy2 #site-header .navBtn .menu_btn .line .line_01{
  -moz-transform: rotate(45deg) translateX(9px) translateY(1px);
  -webkit-transform: rotate(45deg) translateX(9px) translateY(1px);
  -o-transform: rotate(45deg) translateX(9px) translateY(1px);
  -ms-transform: rotate(45deg) translateX(9px) translateY(1px);
  transform: rotate(45deg) translateX(9px) translateY(1px);
}
body.openGnbTy2 #site-header .navBtn .menu_btn .line .line_03{
  -moz-transform: rotate(315deg) translateX(6px) translateY(1px);
  -webkit-transform: rotate(315deg) translateX(6px) translateY(1px);
  -o-transform: rotate(315deg) translateX(6px) translateY(1px);
  -ms-transform: rotate(315deg) translateX(6px) translateY(1px);
  transform: rotate(315deg) translateX(6px) translateY(1px);
}
body.openGnbTy2 #site-header .navBtn .menu_btn .line .line_02{ display:none; }


  
#site-header .menu > li{position: relative;}
#site-header .menu .dep2{position: absolute;left: 50%;top: 96px;padding-top: 0;display: none;margin-left: -106px;z-index: 5; font-size: 16px;}
#site-header .menu .dep2 > ul{background: #fff;width: 210px;padding: 17px 30px;height: auto;box-shadow: 0 0.25rem 0.75rem rgb(0 0 0 / 10%);border-radius: 10px;text-align: center;font-weight: 600;}
#site-header .menu .dep2 > ul > li{position:relative;}
#site-header .menu .dep2 > ul > li a:after{ 
  font-family: 'icomoon' !important;
  color: #ff8210;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  content:"\f054"; position: absolute;right: 0;top: 17px;font-size: 12px; opacity: 0;
  -webkit-transform: translate(-30px, 0px);
-moz-transform: translate(-30px, 0px);
-o-transform: translate(-30px, 0px);
-ms-transform: translate(-30px, 0px);
transform: translate(-30px, 0px);
-webkit-transition: all 0.6s ease;
-moz-transition: all 0.6s ease;
-o-transition: all 0.6s ease;
transition: all 0.6s ease;

}


#site-header .menu .dep2 > ul a{line-height:1.4;display:inline-block;padding: 8px 0;color: #222;font-weight: 500;}
#site-header .menu .dep2 > ul li.active > a,
#site-header .menu .dep2 > ul a:hover{color: #000;font-weight: 700;}
/* #site-header .menu .dep2 > ul a:hover:after{
  opacity: 1;
    -webkit-transform: translate(0, 0px);
-moz-transform: translate(0, 0px);
-o-transform: translate(0, 0px);
-ms-transform: translate(0, 0px);
transform: translate(0, 0px);
} */

#site-header .menu .hover .dep2{
  display: block;
  -webkit-animation: depth2_ani 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: depth2_ani 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}

@keyframes depth2_ani {
    0% {
        opacity: 0;
        -webkit-transform: translate(0px, 20px);
        -moz-transform: translate(0px, 20px);
        -o-transform: translate(0px, 20px);
        -ms-transform: translate(0px, 20px);
        transform: translate(0px, 20px);

     
    }
    100% {
        opacity: 1;
        -webkit-transform: translate(0, 0px);
        -moz-transform: translate(0, 0px);
        -o-transform: translate(0, 0px);
        -ms-transform: translate(0, 0px);
        transform: translate(0, 0px);

    }
}




#site-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background-color: #000;
  display: flex;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  -webkit-transition: visibility 0.7s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1);
  transition: visibility 0.7s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1);
  color: #fff;
}
#site-nav a{ color: #fff; }
#site-nav .depth1 > ul > li > a.m{display:none;}
#site-nav > .inner {max-width: 1320px; width: 1320px; position: relative;height: 100%;display: flex; margin:0 auto;}
#site-nav .visual{position:fixed; left:0; top:0; width:100%; height:100vh; background-size:cover; z-index:-1;}

#site-nav .menu_container {display: none;align-items: center;justify-content: center;min-width: 1320px;height: 100%;box-sizing: border-box;}
#site-nav .footer_menu,
#site-nav .depth1 > ul{ display:flex;min-width: 1320px;justify-content: space-between; flex-wrap: wrap;}
#site-nav .footer_menu > .col,
#site-nav .depth1 > ul > li{width: 15%;margin: 0 5%;margin-top: 40px;}
#site-nav .depth1 > ul > li:nth-child(-n+4){ margin-top:0;}

#site-nav .depth1 > ul > li > a{ font-size:22px; font-size:1.375em; font-weight:500; display:block; padding-bottom:10px; position:relative;}
#site-nav .depth1 > ul > li > a:after{
  -webkit-transition: visibility 0.7s cubic-bezier(0.33, 1, 0.68, 1), width 0.7s cubic-bezier(0.33, 1, 0.68, 1);
  transition: visibility 0.7s cubic-bezier(0.33, 1, 0.68, 1), width 0.7s cubic-bezier(0.33, 1, 0.68, 1);
  width:0; height:2px; background:#ffcb33;  content:"";position: absolute;left: 0 ;bottom: 0;
}
#site-nav .depth1 > ul > li.active > a{ color:#ffcb33; }
#site-nav .depth1 > ul > li.active > a:after{width:100%;}

#site-nav .depth2 > ul{padding:30px 0;}
#site-nav .depth2 > ul > li{margin-bottom:5px;}
#site-nav .footer_menu > .col > ul > li > a,
#site-nav .depth2 > ul > li > a{font-size:0.9375em; font-weight:400; color:#a4a4a4;} 
#site-nav .footer_menu > .col > ul > li > a.active,
#site-nav .footer_menu > .col > ul > li > a:hover,
#site-nav .depth2 > ul > li.active > a,
#site-nav .depth2 > ul > li > a:hover{ color:#ffcb33;}

#site-nav .depth1 > ul > li.active > a:after{}


#site-nav .depth1 > ul > li .visual{ 
 -webkit-transition:  opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1);
 transition: opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1);
 opacity:0;
}
#site-nav .depth1 > ul > li.active .visual{ opacity:1;}



#site-nav .footer_menu{
    margin-top: 40px;
}
#site-nav .footer_menu > .col{}
#site-nav .footer_menu .h_1{
    font-size: 22px;
    font-size: 1.375em;
    font-weight: 600;
}
#site-nav .footer_menu > .col > ul{}
#site-nav .footer_menu > .col > ul > li{
    margin-bottom: 6px;
}
#site-nav .footer_menu > .col > ul > li > a{}



#site-nav .logo{ position:absolute;left: 0;top: 40px;}
#site-nav .closeBtn {position: absolute;top: 20px;right: 0;z-index: 2;font-size: 60px;border: 0;cursor: pointer;background: transparent;color: #fff;}


#gnb_bg{ position: fixed; top: 0; left: 0; z-index: 5; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); display: none; }

body.openGnb { overflow: hidden; }
body.openGnb #site-nav { visibility: visible; opacity: 1; }
body.openGnb #site-nav .menu > ul > li > a,
body.openGnb #site-nav .menu > ul > li > .depth2 { transform: translateY(0); transition-delay: calc(0.1s*var(--char-index)); opacity: 1; }
body.openGnb #site-nav .menu_container {display: flex;flex-direction: column;}


@media screen and (max-width: 1480px){
  #site-header .menu > li{ padding: 40px 45px; }
  .wrap-spot-main .controller .scrolldown{left: calc(50% - 35px);}
  .wrap-spot-main .controller .scrolldown img{ width:70px; }
}

@media screen and (max-width: 1400px){
  #site-header > .inner{ width:auto; padding-left: 40px; padding-right: 40px; }
}

@media screen and (max-width: 1280px){
  #site-header .menu > li > a{ font-size: 16px; }
  #site-header .menu > li{ padding-left: 17px; padding-right: 17px }
}
@media screen and (max-width: 1080px){
  #site-header .menu{ display: none; }
}

@media screen and (max-width: 840px){
  #site-nav .depth1 > ul > li .visual{ display: none; }
  body #site-header {width: 100%;height: 17.452381vw;}
  #site-header > .top{ height:7.976190476190475vw;  font-size:2.380952380952381em; }
  #site-header > .top a.fm{display:block;margin-top:-3px;font-size: 3.2vw;}
  #site-header > .top > .col.lft{min-width: 45.95238095238095vw; }
  #site-header > .top > .col.rgh{padding-right: 4vw;}
  
  #site-header > .top .gnb a{width: 50%;height: 7.976190476190475vw;font-size: 3.2vw;}
    #site-header > .inner { width: 100%;height: 17.6vw;padding: 0 4vw; box-sizing: border-box;margin: 0; }
  #site-header > .inner > * + * { margin-left: 30px; }
  #site-header .logo { margin: 0; flex-grow: 1; z-index: 0; }
  #site-header .logo a {width: 45vw; height: 15vw; background-size: 57%; background-position: 0 0;}

  #site-header .navBtn .menu_btn {width: 7vw;height: auto;}
  #site-header .navBtn .menu_btn .line {width: 100%;}
  #site-header .navBtn .menu_btn .line span {height: 0.8vw;}
  #site-header .navBtn .menu_btn .line span + span {margin-top: 1.4vw;}
  #site-header .navBtn .menu_btn .line span.line_03{ width:70%;}
  

  #site-header.menuOn:after { height: 100%; }
  #site-header.menuOn .menu > li > a { color: #a0afd5; }
  #site-header.menuOn .menu > li > a[target]:after { background-image: url(../images/ico/ico_link_b3.png); }
  #site-header.menuOn .menu > li > .depth2 { height: 100%; }
  #site-header.menuOn .menu > li.on > a { color: #fff; }
  #site-header.menuOn .menu > li.on > a[target]:after { background-image: url(../images/ico/ico_link_w.png); }
  #site-header.menuOn .menu > li.on > .depth2 { visibility: visible; opacity: 1; -webkit-transition: opacity 0.75s ease; transition: opacity 0.75s ease; }
  #site-header.menuOn .lang .img { background-image: url(../images/common/lang_select_b.png); }
  #site-header.menuOn .withPosco .img { background-image: url(../images/common/with_posco_w.png); }
  #site-header.menuOn .navBtn .menu_btn { background-color: #1d48b2; }
  #site-header.news { background-color: transparent; }
  #site-header.news .logo a { background: url(../images/common/site-logo-w.svg) center no-repeat; }
  #site-header.news .menu > li > a { color: #fff; }
  #site-header.news .navBtn .menu_btn .line span { background-color: #fff; }
  #site-header.news .lang .img { background-image: url(../images/common/lang_select_w.png); }

  #site-header.scrollDown {margin-top: 0;}
  #site-header .lang{ display: none; }
  #site-nav {
    position: fixed;
    top: 0;
    right: 0;
    z-index: 1000;
    width: 100%;
    height: 100%;
    background-color: #000;
    display: flex;
    align-items: center;
    visibility: hidden;
    opacity: 0;
    -webkit-transition: visibility 0.7s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1);
    transition: visibility 0.7s cubic-bezier(0.33, 1, 0.68, 1), opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1);
    color: #fff;
  }
  #site-nav a{ color: #fff; }
  #site-nav .depth1 > ul > li > a.m{display:none;}
  #site-nav > .inner {max-width: 1320px;width: 80vw;height: 100vh;display: block;margin: 0;overflow: hidden;overflow-y: scroll;margin-left: auto;background: #0b1d48;}
  #site-nav .visual{position:fixed; left:0; top:0; width:100%; height:100vh; background-size:cover; z-index:-1;}

  #site-nav .menu_container {display: none;align-items: center;justify-content: center;min-width: 1320px;height: 100%;box-sizing: border-box;}
  #site-nav .footer_menu,
  #site-nav .depth1 > ul{display: block;min-width: auto;}
  #site-nav .footer_menu > .col,
  #site-nav .depth1 > ul > li:nth-child(1n+1){width: auto;padding: 0 4vw 0 12vw; margin: 0; margin-top: 4vw;}
  #site-nav .depth1 > ul > li.active{background-color: #243661;color: #000;padding-top: 5vw;padding-bottom: 5vw;}
  #site-nav .depth1 > ul > li.active > a{ color: #279bf3; }
  

  #site-nav .depth1 > ul > li > a{ font-size:4.6vw;  font-weight:500; display:block; padding-bottom:10px; position:relative;}
  #site-nav .depth1 > ul > li > a:after{
    -webkit-transition: visibility 0.7s cubic-bezier(0.33, 1, 0.68, 1), width 0.7s cubic-bezier(0.33, 1, 0.68, 1);
    transition: visibility 0.7s cubic-bezier(0.33, 1, 0.68, 1), width 0.7s cubic-bezier(0.33, 1, 0.68, 1);
    width:0; height:2px; background:#ffcb33;  content:"";position: absolute;left: 0 ;bottom: 0; display: none
  }
  #site-nav .depth1 > ul > li.active > a{color:#279bf3;margin:0;padding:0;font-size: 4.6vw;}
  #site-nav .depth1 > ul > li.active > a:after{width:100%;}
  #site-nav .depth1 > ul > li.active > a:before{position:absolute; right:2.3vw; top:2.7vw; width:2vw; height:2vw; border-radius:2vw; background:#279bf3; content:"";}
  #site-nav .depth1 > ul > li.active .depth2{ display: block }

  #site-nav .depth2 > ul{padding:3.3vw 0;}
  #site-nav .depth2 > ul > li{margin-bottom:5px;}
  #site-nav .depth2 > ul > li.active a{ color: #279bf3; }
  #site-nav .footer_menu > .col > ul > li > a,
  #site-nav .depth2 > ul > li > a{font-size: 4.2vw;color: #fff;} 
  #site-nav .footer_menu > .col > ul > li > a.active,
  #site-nav .footer_menu > .col > ul > li > a:hover,
  #site-nav .depth2 > ul > li > a.active,
  #site-nav .depth2 > ul > li > a:hover{ color:#fff;}

  #site-nav .depth1 > ul > li.active > a:after{}


  #site-nav .depth1 > ul > li .visual{ 
   -webkit-transition:  opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1);
   transition: opacity 0.7s cubic-bezier(0.33, 1, 0.68, 1);
   opacity:0;
  }
  #site-nav .depth1 > ul > li.active .visual{ opacity:1;}



  #site-nav .footer_menu{
      margin-top: 40px;
  }
  #site-nav .footer_menu > .col{}
  #site-nav .footer_menu .h_1{
      font-size: 22px;
      font-size: 1.375em;
      font-weight: 600;
  }
  #site-nav .footer_menu > .col > ul{}
  #site-nav .footer_menu > .col > ul > li{
      margin-bottom: 6px;
  }
  #site-nav .footer_menu > .col > ul > li > a{}

  #site-nav .lang{position:absolute;right:4vw;top: 29vw;}
  #site-nav .lang ul{display:flex;}
  #site-nav .lang ul li{display:flex; margin-left:10px; padding-left:10px; position:relative;}
  #site-nav .lang ul li:after{position:absolute;left:0;top: 1.3vw;width:1px;height: 3.1vw;background:#404040;content:"";}
  #site-nav .lang ul li:first-child:after{display:none;}
  #site-nav .lang ul li a{color:#404040;}
  #site-nav .lang ul li.on a{color:#fff;}

  #site-nav .logo{position:absolute;left: 11vw;top: 6vw;width: 50vw;}
  #site-nav .closeBtn {position: absolute;top: 5.6vw;right: 3vw;z-index: 2;font-size: 8.1vw;border: 0;cursor: pointer;background: transparent;color: #fff;}


  #gnb_bg{ position: fixed; top: 0; left: 0; z-index: 900; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);  }

  body.openGnb { overflow: hidden; }
  body.openGnb #site-nav {visibility: visible;opacity: 1;width: 100vw;background: rgba(0,0,0,0.5);}
  body.openGnb #site-nav .menu > ul > li > a,
  body.openGnb #site-nav .menu > ul > li > .depth2 { transform: translateY(0); transition-delay: calc(0.1s*var(--char-index)); opacity: 1; }
  body.openGnb #site-nav .menu_container {display: block;margin-top: 40vw;width: auto;min-width: auto;box-sizing: border-box;height: auto;padding-bottom: 30vw;}

  #site-nav .depth2{ display: none; }


}


#allmenu{position: absolute; left: 0; top: 100px; width: 100%; height: auto; padding: 65px 0 125px; background-color: #fff; font-size: 18px; visibility:hidden; opacity: 0; -webkit-transition: all 300ms ease-in; -moz-transition: all 300ms ease-in; -ms-transition: all 300ms ease-in; -o-transition: all 300ms ease-in;
transition: all 300ms ease-in; }
#allmenu > .inner{ width: 1000px; margin: 0 auto; }
#allmenu > .inner > ul{display: flex;align-items: stretch;}
#allmenu > .inner > ul > li{width: 250px; border-left: 1px solid #eaeaea; padding-left: 25px; padding-right: 20px; box-sizing: border-box;}
#allmenu > .inner > ul > li:first-child{border-left: 0;}
#allmenu > .inner > ul > li > a{ color: #2492e6; font-weight: 700; font-size: 18px; line-height: 1.3; }
#allmenu .dep2{margin-top: 17px;}
#allmenu .dep2 li{margin-bottom: 15px;}
#allmenu .dep2 li.active a,
#allmenu .dep2 li a:hover{ color:#000; font-weight:600;}