@charset "utf-8";


#site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  background-color: rgba(0,0,0,0);
  -webkit-transition: all 0.20s ease-in-out;
  transition: all 0.20s ease-in-out;
  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.25s ease-in-out;
  transition: height 0.25s ease-in-out;
}

#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;justify-content: space-between;}
#site-header > .inner .area_rgh{display: flex;align-items: center;}
#site-header > .inner .area_rgh .d-system{width: 230px;background: rgba(255, 255, 255, 0.2) url('../images/system-icon.png') no-repeat 10% 50%;
  background-size: 16%;border: 1px #fff solid;padding: 15px;border-radius: 50px;line-height:1;}
#site-header > .inner .area_rgh .d-system a{ display:inline-block; color:#fff; font-size:14px; margin-left:50px; border-bottom:2px transparent solid; padding:3px 0; opacity:0.6;}
#site-header > .inner .area_rgh .d-system a.active{opacity:1; }
#site-header.scrollDown > .inner .area_rgh .d-system a,

.header_hover #site-header > .inner .area_rgh .d-system a{  color:#222;}
.header_hover #site-header > .inner .area_rgh .d-system a:hover{ opacity: 1; }

#site-header.scrollDown > .inner .area_rgh .d-system {border:1px #b6b6b6 solid;  background-color:#fff; border-color: transparent; }

#site-header > .inner > .ara_cen {position: absolute;left: 50%;transform: translateX(-50%);}
#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: 126px;
  height: 49px;
  font-size: 0;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  background-size: 100%;
}

#site-header .menu {padding-left: 65px; display: flex;align-items: center;justify-content: flex-end;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;margin: 0 auto;}
#site-header .menu > li {padding: 40px 45px;width: auto;text-align: center;}
#site-header .menu > li > a {display: block;font-size: 18px;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; display: none;}
/*#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 .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: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 .d-system .img { background-image: url(../images/common/d-system_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 .d-system .img { background-image: url(../images/common/d-system_select_w.png); }

.header_hover #site-header,
body.openGnbTy2 #site-header,
#site-header.scrollDown { background:#fff; border-bottom: 1px solid #ddd; }

.header_hover #site-header  .menu > li > a,
body.openGnbTy2 #site-header .menu > li > a,
#site-header.scrollDown .menu > li > a{color:#222;}
.header_hover #site-header .navBtn .menu_btn .line span,
body.openGnbTy2 #site-header .navBtn .menu_btn .line span,
#site-header.scrollDown .navBtn .menu_btn .line span{background: #222;}
.header_hover #site-header .navBtn .menu_btn,
body.openGnbTy2 #site-header .navBtn .menu_btn,
#site-header.scrollDown .navBtn .menu_btn{color:#222;}
.header_hover #site-header .menu > li:after,
body.openGnbTy2 #site-header .menu > li:after,
#site-header.scrollDown .menu > li:after{background-color: #222;  display: none;}

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 .dep2{
  position: absolute;
  left: 0;
  top: 106px;
  padding-top: 0;
  margin-left: 0;
  z-index: 5;
  font-size: 16px;
  text-align: center;
  border-style: solid;
  border-width: 0 0 0 1px;
  border-color: transparent;
  width: 100%;
  box-sizing: border-box;
  opacity:0;
  visibility:hidden;
  height: 0;
}
#site-header .last .dep2{border-width: 0 1px;}

#site-header .dep2 a{color:#8b8b8b; font-size:14px;}
#site-header .dep2 li{margin-top:15px;}

#site-header .menu > li{
  position: relative;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.header_hover #site-header .menu {}
.header_hover #site-header{background: #fff;height: 320px;}
.header_hover #site-header .dep2{
    opacity: 1;
    visibility: visible;
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -ms-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    height: 217px;
    opacity:1;
    border-color: #e9e9e9;
    background-color: #fff;
}
.header_hover  #site-header .menu > li > a{color:#222;}
.header_hover  #site-header .menu > li.hover .dep2{ background:#f9fafb;}
.header_hover  #site-header .menu > li.hover > a{color:#00b8ff;}

#site-header .dep2 a:hover{color:#222;  border-bottom:1px #222 solid;}
.header_hover  #site-header .menu > li{padding: 40px 60px; width: auto;text-align: center;}

#site-header .banner_head{position: absolute;left: 30px;top: 70px; opacity: 0; visibility: hidden;}
.header_hover  #site-header .banner_head{
  top: 130px; opacity: 1;
  -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -ms-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
     visibility: visible;
}



/*#site-header .menu .dep2{position: absolute;left: 50%;top: 96px;padding-top: 0;display: none;margin-left: -93px;z-index: 5; font-size: 16px;}
#site-header .menu .dep2 > ul{background: #fff;width: 180px;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;
}*/


@media screen and (max-width: 1680px){
  #site-header { height: 80px; }
  #site-header .menu > li > a{ font-size: 16px; }
  #site-header > .inner { padding: 0 40px; }
  #site-header .menu > li { padding: 30px 30px; width: auto;text-align: center; }
  #site-header .dep2{top: 85px;}
  .header_hover #site-header .dep2{height: 237px;}
  .header_hover  #site-header .menu > li{padding: 30px 50px;width: auto; text-align: center;}
  .header_hover #site-header{background: #fff;height: 320px;}
  #site-header .logo a { width: 106px; height: 41px; }
}



@media screen and (max-width: 1380px){
  #site-header .menu > li { padding: 30px 20px;}
  .header_hover  #site-header .menu > li{ padding: 30px 30px; }
}



@media screen and (max-width: 1180px){
  #site-header .menu{ display: none; }
}

@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);
    }
}


.depth1 {
  height: 100%;
  position: relative;
  top: 120px;
}

#site-nav {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  background-color: #345b7c;
  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: #fcb34a;font-size: 25px;font-weight: bold;height: 100px;top: 150px;}
#site-nav .homeBtn{break-after: avoid;position:absolute;left: 63px;top: 35px;width: 50px;border:1px #9db4c7 solid;display:inline-flex;justify-content: center;align-items: center;padding: 0;-webkit-transition: all 300ms linear;-moz-transition: all 300ms linear;border-radius: 50%;height: 50px;font-size: 0;line-height: 0;}
#site-nav .homeBtn:hover{background: rgb(255 255 255 / 15%);}
#site-nav .system-btn {position: absolute;top: 40px;right: 63px;border-radius: 50px;border: 1px solid #9db4c7;padding: 8px 18px;height: 50px;}
#site-nav .system-btn a {font-size: 14px;color: #fff;text-align: center;display: block;font-weight: 100;line-height: 16px;}
#site-nav .system-btn a strong {font-weight: bold;color: #fab247;font-size: 16px;}
#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: 1410px;height: 100%;box-sizing: border-box;}
#site-nav .footer_menu,
#site-nav .depth1 > ul{display:flex;min-width: 1320px;height: 100%;justify-content: flex-start;flex-wrap: wrap;}
#site-nav .footer_menu > .col,
#site-nav .depth1 > ul > li{width: 25%;height: 100%;margin-top: 40px; position: relative;border-left: 1px solid #000;}
#site-nav .depth1 > ul > li:hover{background: #3a6283;}
#site-nav .depth1 > ul > li:last-child{border-right: 1px solid #000;}
#site-nav .depth1 > ul > li:nth-child(-n+4){ margin-top:0;}
/* #site-nav .depth1 > ul > li:first-child:after{content:"";position: absolute;top: 58px;width: 150vw;background:#fff;height: 1px;left: -50vw;opacity: 0.2;}
#site-nav .depth1 > ul > li:last-child:after{content:"";position: absolute;top: 58px;width: 200vw;background:#fff;height: 1px;left: -100vw;opacity: 0.2;} */
#site-nav .footer_menu > .col, #site-nav .depth1 > ul > li > div {margin-top: 80%;}
#site-nav .depth1 > ul > li > a{font-size: 32px;font-weight: 100;display:block;padding-bottom:10px;position:relative;;}
#site-nav .depth1 > ul > li > a:after{
  -webkit-transition: visibility 0.3s cubic-bezier(0.33, 1, 0.68, 1), width 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  transition: visibility 0.3s cubic-bezier(0.33, 1, 0.68, 1), width 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  width:0;
  height:1px;
  background: #fff;
  content:"";
  position: absolute;
  left: 0;
  bottom: 0;
}
#site-nav .depth1 > ul > li > a i.icon-open{font-size: 0.8em;line-height:1;-moz-transform: translateY(3px);-webkit-transform: translateY(3px);-o-transform: translateY(3px);-ms-transform: translateY(3px);transform: translateY(1px);display: inline-block;margin-left: 8px;}
#site-nav .depth1 > ul > li.active > a{color: #fff;}
#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: 18px;font-weight:400;color: #fff; opacity: 0.7;height: 50px;} 
#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: #fff; opacity: 1;}
#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 {width: 60px;height: 60px;position: absolute;top: 20px;transform: translateX(-50%);left: 50%;z-index: 2;border-radius: 50%;border: 1px #fff solid;cursor: pointer;}

.homeBtn img {width: 50%;}
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  width: 100%;
  height: 100px;
  box-sizing: border-box;
  background-color: rgba(0,0,0,0);
  -webkit-transition: all 0.20s ease-in-out;
  transition: all 0.20s ease-in-out;
  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.25s ease-in-out;
  transition: height 0.25s ease-in-out;
}

#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;justify-content: space-between;}
#site-header > .inner .area_rgh{display: flex;align-items: center;}
#site-header > .inner .area_rgh .d-system{width: 230px;background: rgba(255, 255, 255, 0.2) url('../images/system-icon.png') no-repeat 10% 50%;
  background-size: 16%;border: 1px #fff solid;padding: 15px;border-radius: 50px;line-height:1;}
#site-header > .inner .area_rgh .d-system a{ display:inline-block; color:#fff; font-size:14px; margin-left:50px; border-bottom:2px transparent solid; padding:3px 0; opacity:0.6;}
#site-header > .inner .area_rgh .d-system a.active{opacity:1; }
#site-header.scrollDown > .inner .area_rgh .d-system a,
.header_hover #site-header > .inner .area_rgh .d-system a{color:#222;}

.header_hover #site-header > .inner .area_rgh .d-system a:hover{ opacity: 1; }

#site-header.scrollDown > .inner .area_rgh .d-system {border:1px #b6b6b6 solid;  background:#fff url('../images/system2-icon.png') no-repeat 10% 50%;background-size: 16%; border-color: transparent; }

#site-header > .inner > .ara_cen {position: absolute;left: 50%;transform: translateX(-50%);}
#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: 126px;
  height: 49px;
  font-size: 0;
  -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
  background-size: 100%;
}

#site-header .menu {padding-left: 65px; display: flex;align-items: center;justify-content: flex-end;-moz-transition: all 300ms ease-in-out;-ms-transition: all 300ms ease-in-out;-o-transition: all 300ms ease-in-out;transition: all 300ms ease-in-out;margin: 0 auto;}
#site-header .menu > li {padding: 40px 45px;width: auto;text-align: center;}
#site-header .menu > li > a {display: block;font-size: 18px;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; display: none;}
/*#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 .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: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 .d-system .img { background-image: url(../images/common/d-system_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 .d-system .img { background-image: url(../images/common/d-system_select_w.png); }

.header_hover #site-header,
body.openGnbTy2 #site-header,
#site-header.scrollDown { background:#fff; border-bottom: 1px solid #ddd; }

.header_hover #site-header  .menu > li > a,
body.openGnbTy2 #site-header .menu > li > a,
#site-header.scrollDown .menu > li > a{color:#222;}
.header_hover #site-header .navBtn .menu_btn .line span,
body.openGnbTy2 #site-header .navBtn .menu_btn .line span,
#site-header.scrollDown .navBtn .menu_btn .line span{background: #222;}
.header_hover #site-header .navBtn .menu_btn,
body.openGnbTy2 #site-header .navBtn .menu_btn,
#site-header.scrollDown .navBtn .menu_btn{color:#222;}
.header_hover #site-header .menu > li:after,
body.openGnbTy2 #site-header .menu > li:after,
#site-header.scrollDown .menu > li:after{background-color: #222;  display: none;}

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 .dep2{
  position: absolute;
  left: 0;
  top: 106px;
  padding-top: 0;
  margin-left: 0;
  z-index: 5;
  font-size: 16px;
  text-align: center;
  border-style: solid;
  border-width: 0 0 0 1px;
  border-color: transparent;
  width: 100%;
  box-sizing: border-box;
  opacity:0;
  visibility:hidden;
  height: 0;
}
#site-header .last .dep2{border-width: 0 1px;}

#site-header .dep2 a{color:#8b8b8b; font-size:14px;}
#site-header .dep2 li{margin-top:15px;}

#site-header .menu > li{
  position: relative;
  -webkit-transition: all 300ms ease-in-out;
  -moz-transition: all 300ms ease-in-out;
  -ms-transition: all 300ms ease-in-out;
  -o-transition: all 300ms ease-in-out;
  transition: all 300ms ease-in-out;
}

.header_hover #site-header .menu {}
.header_hover #site-header{background: #fff;height: 320px;}
.header_hover #site-header .dep2{
    opacity: 1;
    visibility: visible;
    -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -ms-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
    height: 217px;
    opacity:1;
    border-color: #e9e9e9;
    background-color: #fff;
}
.header_hover  #site-header .menu > li > a{color:#222;}
.header_hover  #site-header .menu > li.hover .dep2{ background:#f9fafb;}
.header_hover  #site-header .menu > li.hover > a{color:#00b8ff;}

#site-header .dep2 a:hover{color:#222;  border-bottom:1px #222 solid;}
.header_hover  #site-header .menu > li{padding: 40px 60px; width: auto;text-align: center;}

#site-header .banner_head{position: absolute;left: 30px;top: 70px; opacity: 0; visibility: hidden;}
.header_hover  #site-header .banner_head{
  top: 130px; opacity: 1;
  -webkit-transition-delay: 0.1s;
    -moz-transition-delay: 0.1s;
    -ms-transition-delay: 0.1s;
    -o-transition-delay: 0.1s;
    transition-delay: 0.1s;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    -ms-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
     visibility: visible;
}



/*#site-header .menu .dep2{position: absolute;left: 50%;top: 96px;padding-top: 0;display: none;margin-left: -93px;z-index: 5; font-size: 16px;}
#site-header .menu .dep2 > ul{background: #fff;width: 180px;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;
}*/


@media screen and (max-width: 1680px){
  #site-header { height: 80px; }
  #site-header .menu > li > a{ font-size: 16px; }
  #site-header > .inner { padding: 0 40px; }
  #site-header .menu > li { padding: 30px 30px; width: auto;text-align: center; }
  #site-header .dep2{top: 85px;}
  .header_hover #site-header .dep2{height: 237px;}
  .header_hover  #site-header .menu > li{padding: 30px 50px;width: auto; text-align: center;}
  .header_hover #site-header{background: #fff;height: 320px;}
  #site-header .logo a { width: 106px; height: 41px; }
}



@media screen and (max-width: 1380px){
  #site-header .menu > li { padding: 30px 20px;}
  .header_hover  #site-header .menu > li{ padding: 30px 30px; }
}



@media screen and (max-width: 1180px){
  #site-header .menu{ display: none; }
}

@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: #345b7c;
  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: #fcb34a; }
#site-nav .homeBtn{break-after: avoid;position:absolute;right: 63px;top: 35px;width: 50px;border:1px #fff solid;display:inline-flex;justify-content: center;align-items: center;padding: 0;-webkit-transition: all 300ms linear;-moz-transition: all 300ms linear;border-radius: 50%;height: 50px;font-size: 0;line-height: 0;}
#site-nav .homeBtn:hover{background: rgb(255 255 255 / 15%);}
#site-nav .depth1 > ul > li > a.m{display:none;}
#site-nav > .inner {max-width: 1410px; width: 1410px; 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: 1410px;height: 100%;box-sizing: border-box;}
#site-nav .footer_menu,
#site-nav .depth1 > ul{display:flex;min-width: 1410px;height: 100%;justify-content: flex-start;flex-wrap: wrap;}
#site-nav .footer_menu > .col,
#site-nav .depth1 > ul > li{width: 25%;height: 100%;margin-top: 40px; position: relative;border-left: 1px solid #5980a1;padding: 0 30px;}
#site-nav .depth1 > ul > li:last-child{border-right: 1px solid #5980a1;}
#site-nav .depth1 > ul > li:nth-child(-n+4){ margin-top:0;}
/* #site-nav .depth1 > ul > li:first-child:after{content:"";position: absolute;top: 58px;width: 150vw;background:#fff;height: 1px;left: -50vw;opacity: 0.2;}
#site-nav .depth1 > ul > li:last-child:after{content:"";position: absolute;top: 58px;width: 200vw;background:#fff;height: 1px;left: -100vw;opacity: 0.2;} */

#site-nav .depth1 > ul > li > a{font-size: 32px;font-weight: 100;display:block;padding-bottom:10px;position:relative;}
#site-nav .depth1 > ul > li > a:after{
  -webkit-transition: visibility 0.3s cubic-bezier(0.33, 1, 0.68, 1), width 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  transition: visibility 0.3s cubic-bezier(0.33, 1, 0.68, 1), width 0.3s cubic-bezier(0.33, 1, 0.68, 1);
  width:0;
  height:1px;
  background: #fff;
  content:"";
  position: absolute;
  left: 0;
  bottom: 0;
}
#site-nav .depth1 > ul > li > a i.icon-open{font-size: 0.8em;line-height:1;-moz-transform: translateY(3px);-webkit-transform: translateY(3px);-o-transform: translateY(3px);-ms-transform: translateY(3px);transform: translateY(1px);display: inline-block;margin-left: 8px;}
#site-nav .depth1 > ul > li.active > a{color: #fff;}
#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: 18px;font-weight:400;color: #fff; opacity: 0.7;} 
#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: #fff; opacity: 1;}
#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 {width: 60px;height: 60px;position: absolute;top: 20px;transform: translateX(-50%);left: 50%;z-index: 2;border-radius: 50%;border: 1px #9db4c7 solid;cursor: pointer;}
#site-nav .closeBtn .line {width: 30px;margin: 0 auto;text-align: center;}
#site-nav .closeBtn .line span {display: block;background-color: #fff;height: 0.5px;width: 30px;margin-left: 3px;}
#site-nav .closeBtn .line span:first-child {margin-top:0;}
#site-nav .closeBtn .line span + span {margin-top: 7px;}
#site-nav .btn_eagroup{margin-top: 108px;position: absolute;right: 35px;top: 520px;}
#site-nav .btn_eagroup a{display:inline-flex;border: 1px #ffffffa1 solid;min-width: 230px;justify-content: space-between;align-items: center;padding: 15px 26px;border-radius: 100px;margin-top: 11px;line-height: 1;}
#site-nav .btn_eagroup a:hover{ background:rgb(255 255 255 / 13%); }
#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: 1400px){
  #site-nav .homeBtn{ right:95px; }
  #site-nav > .inner {max-width: none; width: 100%;}
  #site-nav .menu_container {min-width: auto;width: calc(100% - 80px);margin: 0 40px;position: relative;display: flex;justify-content: flex-start;align-items: flex-start;margin-left: 50px;margin-top: 100px;}
  #site-nav .closeBtn {right: 40px;}
  #site-nav .depth1 > ul{min-width: auto;}
  #site-nav .depth1 > ul > li{width: 21%;margin: 0 4%;margin-top: 0;position: relative;}
  #site-nav .depth1 > ul > li > a{font-size: 26px;padding-bottom: 20px;}
  #site-nav .depth2 > ul > li > a{font-size: 16px;} 
  #site-nav .depth2 > ul > li{margin-bottom:3px;}
  #site-nav .btn_eagroup{margin-top: 108px;position: absolute;right: 0;top: 320px;}
  #site-nav .btn_eagroup a{min-width: 200px;padding: 12px 20px;border-radius: 100px;margin-top: 11px;line-height: 1; font-size:16px;}
  
}

@media screen and (max-width: 1024px){
  #site-nav .depth1 > ul > li:first-child:after{top: 40px;}
#site-nav .depth1 > ul > li:last-child:after{top: 40px;}
  #site-nav .homeBtn{ right:95px; }
  #site-nav > .inner {max-width: none; width: 100%;}
  #site-nav .menu_container {min-width: auto;width: calc(100% - 80px);margin: 0 40px;position: relative;display: flex;justify-content: flex-start;align-items: flex-start;margin-left: 50px;margin-top: 100px;}
  #site-nav .closeBtn {right: 40px;}
  #site-nav .depth1 > ul{min-width: auto;}
  #site-nav .depth1 > ul > li{width: 21%;margin: 0 4%;margin-top: 0;position: relative;}
  #site-nav .btn_eagroup{margin-top: 0;position: absolute;right: 0;top: 350px;}
  #site-nav .depth1 > ul > li > a{font-size: 20px;}
  #site-nav .depth2 > ul > li > a{font-size: 16px;} 
}





#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: 50px; 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;}

/*230221 헤더 전체 수정*/
#site-header.sub{background-color: #fff; }
/*#header-faker{ -webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;}*/
/*.scrollDown #header-faker{height: 100px;}*/
#header-faker,
#site-header.sub{ height: 200px; }

#site-header.sub > .inner{ border-bottom: 1px solid #e7e7e7; color: #222;}
#site-header.sub > .inner .area_rgh .d-system a{  color:#222;}
#site-header.sub > .inner .area_rgh .d-system a:hover{ opacity: 1; }
#site-header.sub > .inner .area_rgh .d-system a.active{ border-color:#222; opacity:1; }

#site-header .navBtn { margin-left: 0; }
#site-header .navBtn .menu_btn { border-radius:50%; border:1px #b6b6b6 solid;cursor: pointer;background-color:#fff; }
#site-header .navBtn .menu_btn .line {width: 30px; text-align: center;}
#site-header .navBtn .menu_btn .line span {background-color: #222; height: 0.5px;}
#site-header .navBtn .menu_btn .line span:first-child {margin-top:0;}
#site-header .navBtn .menu_btn .line span + span {margin-top: 5px;}
#site-header .navBtn .menu_btn:hover{ background:#005689;}
#site-header .navBtn .menu_btn:hover .line span{background:#fff;opacity: 1;}
#site-header.main .navBtn .menu_btn {border:1px #fff solid;  background-color:transparent; }
#site-header.main .navBtn .menu_btn .line span {background-color: #fff; }
#site-header.main .navBtn .menu_btn:hover {  border:1px #005689 solid;  background-color:#005689; }


.header_hover #site-header.sub, body.openGnbTy2 #site-header.sub, #site-header.sub.scrollDown{ border-bottom: 0;  }

#site-header .wrap_dep2{ overflow: hidden; border-bottom:1px #e7e7e7 solid; position: relative; }
#site-header .wrap_dep2 .depth2{display:flex;align-items: center;justify-content: center;}
#site-header .wrap_dep2 .depth2 li{margin: 0 30px;}
#site-header .wrap_dep2 .depth2 a{position: relative; display:inline-flex;height:100px;align-items: center; padding: 0 5px; box-sizing: border-box; font-size: 22px; font-weight: 600; color: #222;}
#site-header .wrap_dep2 .depth2 a:after{ position: absolute; left: 50%; bottom: 0; width: 0%; height: 3px; background-color: #222; content:""; -webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;}
#site-header .wrap_dep2 .depth2 a:hover:after,
#site-header .wrap_dep2 .depth2 .active a:after{ left: 0%; width: 100%;  }
.wrap_dep2 .navBtn{position: absolute;left: 60px;top: -120px; -webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-ms-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out; }
#site-header.sub  .navBtn .menu_btn{ background-color: transparent;}
#site-header.sub  .navBtn .menu_btn:hover{ background-color: #005689; }

#site-header.sub.scrollDown .wrap_dep2 .navBtn{top: 20px;}
#site-header.scrollDown .wrap_dep2{ border-width: 0; }
#site-header.sub.scrollDown{top: -101px; background-color: #eaeaea;}
#site-header.main.scrollDown{background-color: rgb(54 90 122 / 35%);border-bottom: 1px solid rgb(54 90 122 / 50%);backdrop-filter: blur(6px);}
#site-header.main.scrollDown .navBtn .menu_btn {border:1px #b6b6b6 solid;  background-color:#fff; border-color: transparent; }
#site-header.main.scrollDown .navBtn .menu_btn:hover{ 
background-color: #005689; }
#site-header.main.scrollDown .navBtn .menu_btn .line span {background-color: #222; }
#site-header.main.scrollDown .navBtn .menu_btn:hover .line span {background-color: #fff; }



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

  #site-header .navBtn .menu_btn { width: 50px; height: 50px;}
  #site-header .navBtn .menu_btn .line {width:20px;}
  #site-header .navBtn .menu_btn .line span { height: 2px; }
  #site-header .navBtn .menu_btn .line span + span { margin-top: 7px; }
  #site-header.sub.scrollDown .wrap_dep2 .navBtn{top: 15px;}
  #site-header.sub{height: 182px;}
  #site-header .wrap_dep2 .depth2 li{margin: 0 20px;}
  #site-header .wrap_dep2 .depth2 a{height:80px;padding: 0 5px;font-size: 18px;word-wrap: break-word;}
  .wrap_dep2 .navBtn{position: absolute;left: 40px; top: -120px; }

}

@media screen and (max-width: 1024px){
  #site-header .wrap_dep2 .depth2 li{margin: 0 15px;}
}

@media screen and (max-width: 840px){
  #header-faker,
  #site-header.sub{height: 34vw;}
  #site-nav .depth1 > ul > li .visual{ display: none; }
  body #site-header {width: 100%;height: 60px;}
  #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: 60px;padding: 0 5vw;box-sizing: border-box;margin: 0;display: flex;justify-content: space-between;}
  /* #site-header > .inner .area_rgh{ display:none;} */
  #site-header > .inner > * + * { /*margin-left: 30px;*/ }
  #site-header .logo { margin: 0; flex-grow: 1; z-index: 0; }
  #site-header .logo a {background-size: 100%;margin-top: 0vw;}

  #site-header .navBtn .menu_btn { width: 9vw;height: 9vw;  display: flex !important; }
  #site-header .navBtn .menu_btn .line {width: 4vw;}
  #site-header .navBtn .menu_btn .line span {height: 1px;}
  #site-header .navBtn .menu_btn .line span + span {margin-top: 1.4vw;}
  #site-header .navBtn .menu_btn .line span.line_03{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 .d-system .img { background-image: url(../images/common/d-system_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 .d-system .img { background-image: url(../images/common/d-system_select_w.png); }
  #site-header.main.scrollDown .navBtn .menu_btn{ border:1px #ddd solid; }
  
  #site-header .navBtn {margin-left:30px;}
  #site-header.scrollDown {margin-top: 0;}
  #site-header.main.scrollDown {background: #fff;}
  /* #site-header .d-system{ display: none; } */
  #site-nav > .bg-pos{ 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: #fcb34a; }
  #site-nav .depth1 > ul > li > a.m{display:none;}
  #site-nav > .inner {max-width: 100%;width: 100%;height: 100vh;display: block;margin: 0;overflow: hidden;overflow-y: scroll;margin-left: auto;background: #00396b;}
  #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: #004781;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.5vw;font-weight:500;display:block;padding-bottom:10px;position:relative;height: auto;}
  #site-nav .depth1 > ul > li > a:after{
    -webkit-transition: visibility 0.3s cubic-bezier(0.33, 1, 0.68, 1), width 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    transition: visibility 0.3s cubic-bezier(0.33, 1, 0.68, 1), width 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    width:0; height:1px; background:#ffcb33;  content:"";position: absolute;left: 0 ;bottom: 0; display: none
  }
  #site-nav .depth1 > ul > li.active > a{color:#fff;margin:0;padding:0;font-size: 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: 3vw;}
  #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.1vw;color: #fff;opacity: 1;} 
  #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 .d-system{position:absolute;right:4vw;top: 29vw;}
  #site-nav .d-system ul{display:flex;}
  #site-nav .d-system ul li{display:flex; margin-left:10px; padding-left:10px; position:relative;}
  #site-nav .d-system ul li:after{position:absolute;left:0;top: 1.3vw;width:1px;height: 3.1vw;background:#404040;content:"";}
  #site-nav .d-system ul li:first-child:after{display:none;}
  #site-nav .d-system ul li a{color:#404040;}
  #site-nav .d-system ul li.on a{color:#fff;}

  #site-nav .logo{position:absolute;left: 11vw;top: 24vw;width: 50vw;}
  #site-nav .closeBtn {position: absolute;top: 16vw;right: 5vw;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: 38vw 0 0;width: 100%;min-width: auto;box-sizing: border-box;height: auto;padding-bottom: 30vw;}

  #site-nav .depth2{display: none;margin-top: 3vw;}
  #site-nav .homeBtn{right: auto;top: 15.2vw;width: 10vw;-webkit-transition: all 300ms linear;-moz-transition: all 300ms linear;border-radius: 50%;height: 10vw;font-size: 0;line-height: 0;left: 5vw;}
  #site-nav .homeBtn img{ width:4vw;}
  #site-nav .btn_eagroup{margin:5vw 10vw; position: relative;right: 0;top: 0;}
  #site-nav .btn_eagroup a{min-width: 52vw;padding: 3vw 7vw;margin-top: 3vw;font-size: 3.4vw;}
  #site-nav .btn_eagroup a img{ width:4vw;}
  #site-nav .depth1 > ul > li:first-child:after,
  #site-nav .depth1 > ul > li:last-child:after{ display:none;}

  #site-header .wrap_dep2 > ul{width: 98vw;overflow:hidden;margin-left:0;overflow-x: scroll;padding-right: 0;}
  #site-header.sub.scrollDown{top: -18vw; background-color: #eaeaea;}
  #site-header.scrollDown .wrap_dep2 > ul{width: 75vw;overflow:hidden;margin-left:25vw;overflow-x: scroll;}
    #site-header .wrap_dep2 .depth2{display:flex;align-items: center;justify-content: flex-start;}

  #site-header .wrap_dep2 .depth2 li{margin: 0 4vw;white-space: nowrap;}
  #site-header .wrap_dep2 .depth2 a{height:16vw;padding: 0 2vw;font-size: 4.3vw;word-wrap: break-word;}
 }}
#site-nav .closeBtn .line {width: 30px;margin: 0 auto;text-align: center;}
#site-nav .closeBtn .line span {display: block;background-color: #fff;height: 0.5px;width: 30px;margin-left: 3px;}
#site-nav .closeBtn .line span:first-child {margin-top:0;}
#site-nav .closeBtn .line span + span {margin-top: 7px;}
#site-nav .btn_eagroup{margin-top: 108px;position: absolute;right: 35px;top: 520px;}
#site-nav .btn_eagroup a{display:inline-flex;border: 1px #ffffffa1 solid;min-width: 230px;justify-content: space-between;align-items: center;padding: 15px 26px;border-radius: 100px;margin-top: 11px;line-height: 1;}
#site-nav .btn_eagroup a:hover{ background:rgb(255 255 255 / 13%); }
#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: 1400px){
  #site-nav .homeBtn{ right:95px; }
  #site-nav > .inner {max-width: none; width: 100%;}
  #site-nav .menu_container {min-width: auto;width: calc(100% - 80px);margin: 0 40px;position: relative;display: flex;justify-content: flex-start;align-items: flex-start;margin-left: 50px;margin-top: 100px;}
  #site-nav .closeBtn {right: 40px;}
  #site-nav .depth1 > ul{min-width: auto;}
  #site-nav .depth1 > ul > li{width: 21%;margin: 0 4%;margin-top: 0;position: relative;}
  #site-nav .depth1 > ul > li > a{font-size: 26px;padding-bottom: 20px;}
  #site-nav .depth2 > ul > li > a{font-size: 16px;} 
  #site-nav .depth2 > ul > li{margin-bottom:3px;}
  #site-nav .btn_eagroup{margin-top: 108px;position: absolute;right: 0;top: 320px;}
  #site-nav .btn_eagroup a{min-width: 200px;padding: 12px 20px;border-radius: 100px;margin-top: 11px;line-height: 1; font-size:16px;}
  
}

@media screen and (max-width: 1024px){
  #site-nav .depth1 > ul > li:first-child:after{top: 40px;}
#site-nav .depth1 > ul > li:last-child:after{top: 40px;}
  #site-nav .homeBtn{ right:95px; }
  #site-nav > .inner {max-width: none; width: 100%;}
  #site-nav .menu_container {min-width: auto;width: calc(100% - 80px);margin: 0 40px;position: relative;display: flex;justify-content: flex-start;align-items: flex-start;margin-left: 50px;margin-top: 100px;}
  #site-nav .closeBtn {right: 40px;}
  #site-nav .depth1 > ul{min-width: auto;}
  #site-nav .depth1 > ul > li{width: 21%;margin: 0 4%;margin-top: 0;position: relative;}
  #site-nav .btn_eagroup{margin-top: 0;position: absolute;right: 0;top: 350px;}
  #site-nav .depth1 > ul > li > a{font-size: 20px;}
  #site-nav .depth2 > ul > li > a{font-size: 16px;} 
}





#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: 50px; 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;}

/*230221 헤더 전체 수정*/
#site-header.sub{background-color: #fff; }
/*#header-faker{ -webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;}*/
/*.scrollDown #header-faker{height: 100px;}*/
#header-faker,
#site-header.sub{ height: 200px; }

#site-header.sub > .inner{ border-bottom: 1px solid #e7e7e7; color: #222;}
#site-header.sub > .inner .area_rgh .d-system a{  color:#222;}
#site-header.sub > .inner .area_rgh .d-system a:hover{ opacity: 1; }
#site-header.sub > .inner .area_rgh .d-system a.active{ border-color:#222; opacity:1; }

#site-header .navBtn { margin-left: 0; }
#site-header .navBtn .menu_btn { border-radius:50%; border:1px #b6b6b6 solid;  background-color:#fff; }
#site-header .navBtn .menu_btn .line {width: 30px; text-align: center;}
#site-header .navBtn .menu_btn .line span {background-color: #222; height: 0.5px;}
#site-header .navBtn .menu_btn .line span:first-child {margin-top:0;}
#site-header .navBtn .menu_btn .line span + span {margin-top: 5px;}
#site-header .navBtn .menu_btn:hover{ background:#005689;}
#site-header .navBtn .menu_btn:hover .line span{background:#fff;opacity: 1;}
#site-header.main .navBtn .menu_btn {  border:1px #fbb040 solid;  background-color:#fbb040; }
#site-header.main .navBtn .menu_btn .line span {background-color: #fff; }
#site-header.main .navBtn .menu_btn:hover {  border:1px #005689 solid;  background-color:#005689; }


.header_hover #site-header.sub, body.openGnbTy2 #site-header.sub, #site-header.sub.scrollDown{ border-bottom: 0;  }

#site-header .wrap_dep2{ overflow: hidden; border-bottom:1px #e7e7e7 solid; position: relative; }
#site-header .wrap_dep2 .depth2{display:flex;align-items: center;justify-content: center;}
#site-header .wrap_dep2 .depth2 li{margin: 0 30px;}
#site-header .wrap_dep2 .depth2 a{position: relative; display:inline-flex;height:100px;align-items: center; padding: 0 5px; box-sizing: border-box; font-size: 22px; font-weight: 600; color: #222;}
#site-header .wrap_dep2 .depth2 a:after{ position: absolute; left: 50%; bottom: 0; width: 0%; height: 3px; background-color: #222; content:""; -webkit-transition: all 200ms ease-out;
-moz-transition: all 200ms ease-out;
-ms-transition: all 200ms ease-out;
-o-transition: all 200ms ease-out;
transition: all 200ms ease-out;}
#site-header .wrap_dep2 .depth2 a:hover:after,
#site-header .wrap_dep2 .depth2 .active a:after{ left: 0%; width: 100%;  }
.wrap_dep2 .navBtn{position: absolute;left: 60px;top: -120px; -webkit-transition: all 500ms ease-out;
-moz-transition: all 500ms ease-out;
-ms-transition: all 500ms ease-out;
-o-transition: all 500ms ease-out;
transition: all 500ms ease-out; }
#site-header.sub  .navBtn .menu_btn{ background-color: transparent;}
#site-header.sub  .navBtn .menu_btn:hover{ background-color: #005689; }

#site-header.sub.scrollDown .wrap_dep2 .navBtn{top: 20px;}
#site-header.scrollDown .wrap_dep2{ border-width: 0; }
#site-header.sub.scrollDown{top: -101px; background-color: #eaeaea;}
/* #site-header.main.scrollDown{ background-color: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.5);backdrop-filter: blur(6px);} */
#site-header.main.scrollDown{background-color: rgb(248 178 72 / 35%);border-bottom: 1px solid rgb(248 178 72);backdrop-filter: blur(6px);}
#site-header.main.scrollDown .navBtn .menu_btn {border:1px #b6b6b6 solid;  background-color:#fff; border-color: transparent; }
#site-header.main.scrollDown .navBtn .menu_btn:hover{ 
background-color: #005689; }
#site-header.main.scrollDown .navBtn .menu_btn .line span {background-color: #222; }
#site-header.main.scrollDown .navBtn .menu_btn:hover .line span {background-color: #fff; }



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

  #site-header .navBtn .menu_btn { width: 50px; height: 50px;}
  #site-header .navBtn .menu_btn .line {width:20px;}
  #site-header .navBtn .menu_btn .line span { height: 2px; }
  #site-header .navBtn .menu_btn .line span + span { margin-top: 7px; }
  #site-header.sub.scrollDown .wrap_dep2 .navBtn{top: 15px;}
  #site-header.sub{height: 182px;}
  #site-header .wrap_dep2 .depth2 li{margin: 0 20px;}
  #site-header .wrap_dep2 .depth2 a{height:80px;padding: 0 5px;font-size: 18px;word-wrap: break-word;}
  .wrap_dep2 .navBtn{position: absolute;left: 40px; top: -120px; }

}

@media screen and (max-width: 1024px){
  #site-header .wrap_dep2 .depth2 li{margin: 0 15px;}
}

@media screen and (max-width: 840px){
  #header-faker,
  #site-header.sub{height: 34vw;}
  #site-nav .depth1 > ul > li .visual{ display: none; }
  body #site-header {width: 100%;height: 60px;}
  #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: 60px;padding: 0 5vw;box-sizing: border-box;margin: 0;display: flex;justify-content: space-between;}
  /* #site-header > .inner .area_rgh{ display:none;} */
  #site-header > .inner > * + * { }
  #site-header .logo { margin: 0; flex-grow: 1; z-index: 0; }
  #site-header .logo a {width: 106px;height: 41px;background-size: 100%;margin-top: 0vw;}

  #site-header .navBtn .menu_btn { width: 50px;height: 50px;  display: flex !important; }
  #site-header .navBtn .menu_btn .line {width: 4vw;}
  #site-header .navBtn .menu_btn .line span {height: 1px;}
  #site-header .navBtn .menu_btn .line span + span {margin-top: 1.4vw;}
  #site-header .navBtn .menu_btn .line span.line_03{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 .d-system .img { background-image: url(../images/common/d-system_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 .d-system .img { background-image: url(../images/common/d-system_select_w.png); }
  #site-header.main.scrollDown .navBtn .menu_btn{ border:0; }
  
  #site-header .navBtn {margin-left:0;}
  #site-header.scrollDown {margin-top: 0;}
  #site-header.main.scrollDown {background: rgb(248 178 72 / 35%);}
  /* #site-header .d-system{ display: none; } */
  #site-nav > .bg-pos{ 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: #fcb34a; }
  #site-nav .depth1 > ul > li > a.m{display:none;}
  #site-nav > .inner {max-width: 100%;width: 100%;height: 100vh;display: block;margin: 0;overflow: hidden;overflow-y: scroll;margin-left: auto;background: #345b7c;}
  #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: #3a6283;color: #000;padding-top: 10vw;padding-bottom: 0;
    border-top: 1px solid #5980a1;border-bottom: 1px solid #5980a1;}
  #site-nav .depth1 > ul > li.active > a{ color: #279bf3; }
  

  #site-nav .depth1 > ul > li > a{font-size: 4.5vw;font-weight:500;display:block;padding-bottom:10px;position:relative;top: 0px;}
  #site-nav .depth1 > ul > li > a:after{
    -webkit-transition: visibility 0.3s cubic-bezier(0.33, 1, 0.68, 1), width 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    transition: visibility 0.3s cubic-bezier(0.33, 1, 0.68, 1), width 0.3s cubic-bezier(0.33, 1, 0.68, 1);
    width:0; height:1px; background:#ffcb33;  content:"";position: absolute;left: 0 ;bottom: 0; display: none
  }
  #site-nav .depth1 > ul > li.active > a{color:#fab247;margin:0;padding:0;font-size: 6vw;top: -30px;}
  #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;margin-top: -10%;}

  #site-nav .depth2 > ul{padding:3.3vw 0;}
  #site-nav .depth2 > ul > li{margin-bottom: 3vw;}
  #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.1vw;color: #fff;opacity: 1;} 
  #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 .d-system{position:absolute;right:4vw;top: 29vw;}
  #site-nav .d-system ul{display:flex;}
  #site-nav .d-system ul li{display:flex; margin-left:10px; padding-left:10px; position:relative;}
  #site-nav .d-system ul li:after{position:absolute;left:0;top: 1.3vw;width:1px;height: 3.1vw;background:#404040;content:"";}
  #site-nav .d-system ul li:first-child:after{display:none;}
  #site-nav .d-system ul li a{color:#404040;}
  #site-nav .d-system ul li.on a{color:#fff;}

  #site-nav .logo{position:absolute;left: 11vw;top: 24vw;width: 50vw;}
  #site-nav .closeBtn {position: absolute;top: 2vw;right: 5vw;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: 8vw 0 0;width: 100%;min-width: auto;box-sizing: border-box;height: auto;padding-bottom: 30vw;}

  #site-nav .depth2{display: none;margin-top: 3vw;}
  #site-nav .homeBtn{right: auto;top: 4.2vw;width: 10vw;-webkit-transition: all 300ms linear;-moz-transition: all 300ms linear;border-radius: 50%;height: 10vw;font-size: 0;line-height: 0;left: 5vw;z-index: 100;}  #site-nav .homeBtn img{ width:4vw;}
  #site-nav .system-btn {position: absolute;top: -18px;right: 23px;font-size: 12px;border-radius: 50px;border: 1px solid #fff;padding: 8px 18px;}
  #site-nav .system-btn a {font-size: 12px;color: #fff;}
  #site-nav .btn_eagroup{margin:5vw 10vw; position: relative;right: 0;top: 0;}
  #site-nav .btn_eagroup a{min-width: 52vw;padding: 3vw 7vw;margin-top: 3vw;font-size: 3.4vw;}
  #site-nav .btn_eagroup a img{ width:4vw;}
  #site-nav .depth1 > ul > li:first-child:after,
  #site-nav .depth1 > ul > li:last-child:after{ display:none;}

  #site-header .wrap_dep2 > ul{width: 98vw;overflow:hidden;margin-left:0;overflow-x: scroll;padding-right: 0;}
  #site-header.sub.scrollDown{top: -18vw; background-color: #eaeaea;}
  #site-header.scrollDown .wrap_dep2 > ul{width: 75vw;overflow:hidden;margin-left:25vw;overflow-x: scroll;}
    #site-header .wrap_dep2 .depth2{display:flex;align-items: center;justify-content: flex-start;}

  #site-header .wrap_dep2 .depth2 li{margin: 0 4vw;white-space: nowrap;}
  #site-header .wrap_dep2 .depth2 a{height:16vw;padding: 0 2vw;font-size: 4.3vw;word-wrap: break-word;}
 }