@charset "utf-8";
#header{
  -webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
border-bottom: 1px solid transparent;

}
body.main #header{ top: 0; height: 160px; }
body.main #header.share,
body.main #header.menu {top: -50px;}
#header > .inner{position: relative; z-index: 2;}
#header .cover{position: absolute; left: 0; top: 0; width: 100%; height: 100%; /*230323 background-color: rgba(255, 255, 255, 1);*/  /*-webkit-backdrop-filter: blur(30px); backdrop-filter: blur(30px);*/ opacity: 1; z-index: 0;
    -webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}

#header.share .cover,
#header.menu .cover{  opacity: 1;  border-bottom: 1px solid #ddd; background-color: rgba(255, 255, 255, 1);/*230323 background-color 추가*/}

/* 230411 신규 allMenu style 추가 */

.allMenu{position: fixed; left: 0; top: 0px; height: 100%; width: 100%; /*height: calc(100% - 150px); */z-index: 12; background-color: #022846; display: none;overflow: visible;}
.allMenu .bg{position: fixed; left: 0; top: 0; /*top: -80px; */width: 100%; height: 120vh;  background-size: cover; background-image: url(../images/common/bg_lnb2.jpg); content: ""; opacity: 1; z-index: 2; display: block;}

.allMenu .menuTop { display: none; }
.allMenu .menu{position: relative; z-index: 5;display: flex;justify-content: center; height: calc(100% - 80px); top: 80px;}
.allMenu .menu a{color: #fff;}
.allMenu .menu > .inner{ position: relative; width: 1320px;}
.allMenu .menu > .inner > ul{
  display: flex;
/*  min-width: 1320px;*/
  justify-content: flex-start;
  flex-wrap: wrap;
  margin-top: 4vh;
  height: calc(100% - 4vh);
}
.allMenu .menu > .inner > ul > li,
.allMenu .menu > .inner > ul > div{
  width: 15%;
  margin: 0 5%;
  /* margin-top: 40px; */
  position: relative;
}
.allMenu .menu > .inner > ul > li.n5,
.allMenu .menu > .inner > ul > .n7{
  width: 22%;
  margin-right: -25px;
}
.allMenu .menu > .inner > ul > li.n8{
  width: 10%;
}
/*.allMenu .menu > .inner .depth_n2{ position: absolute; left: 380px;  top: 0; width: 380px; height: 100%;  display: none; box-sizing: border-box;padding-left: 60px; *//*border-right: 1px solid rgba(255, 255, 255, 0.1);}*/ 
.allMenu .menu > .inner .depth_n3{ position: absolute; left: 320px;  top: 0; width: 380px; height: 100%;  display: none; box-sizing: border-box; padding-left: 60px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.allMenu .menu .img_dep3{display: none;}
/* .allMenu .menu .img_dep3{position: absolute; left: 760px;  top: 0; width: 400px; height: 100%;  box-sizing: border-box; padding-left: 0;  opacity: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
} */
/* .allMenu .menu .mm.active .img_dep3{opacity: 1;} */

.allMenu .menu .mm{margin-top: 40px;}

.allMenu .menu .mmWrap.mm .n6,
.allMenu .menu .mmWrap.mm .n7{opacity: 0.7; font-size: 25px;}
.allMenu .menu .mm.n6{margin-top: 65px;}
.allMenu .menu .mm.n7{margin-top: 10px;}

.allMenu .menu .mmWrap.mm > a:hover{
	opacity: 1;
}

.allMenu .menu .n2 .mm{margin-top: 0px;}
.allMenu .menu .n2 .product_menu {margin-top: -17vh;}
/* .allMenu .menu .mm:first-child{margin-top: 0;} */
.allMenu .menu .mm  a,
.allMenu .menu a.mo-view{font-size: 30px; line-height: 1.2; font-weight: 600; display: block; padding-bottom: 10px;position: relative;}
.allMenu .menu .product_menu a{font-size: 30px; line-height: 1.2; font-weight: 600;}

.allMenu .menu .mm > a:after{
  width:0; 
  height: 1px; 
  background:#fff; 
  position:absolute; 
  left:0; 
  bottom:0; 
  content:""; 
  margin-top:-2px;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
}
.allMenu .menu .mmWrap.mm:hover > a:after{
	width:0;
}
.allMenu .menu .mm:hover > a:after{
  width:100%; 
}
,

/* .allMenu .menu .mm .depth_n2 > ul > li{margin-top: 38px;} */
.allMenu .menu .mm .depth_n2 > ul > li:first-child{margin-top: 0; display: flex;}
.allMenu .menu .mm .depth_n2 > ul > li > a{font-size: 18px; font-weight: 400; line-height: 1.2; opacity: 0.7;}
.allMenu .menu .mm .depth_n3 > ul > li {margin-bottom: 5px;}
.allMenu .menu .mm .depth_n3 > ul > li:first-child{margin-top:0;}
.allMenu .menu .mm .depth_n3 > ul > li > a{
  color: #6f899a; font-weight: 400; line-height: 1.2; display:inline-block; position:relative;
  -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.allMenu .menu .inner > ul > li:first-child:after,.allMenu .menu .inner > ul > li.n5:after{
  content: "";
  position: absolute;
  top: 46px;
  width: 150vw;
  background: #fff;
  height: 1px;
  left: -50vw;
  opacity: 0.2;
}


.allMenu .menu .mm .depth_n3 > ul > li.active > a:after {width: 100%;}
.allMenu .menu .mm .depth_n3 > ul > li.active > a,
.allMenu .menu .mm .depth_n3 > ul > li > a:hover{padding-left:50px; color:#fff;}
.allMenu .menu .mm .depth_n3 > ul > li.active > a:after,
.allMenu .menu .mm .depth_n3 > ul > li > a:hover:after{width:30px;}
.allMenu .menu .mm.sz2 > a{font-size: 26px; font-weight: 500;display: inline-flex;align-items: center;}
.allMenu .menu .mm.sz2 > a i{margin-left: 10px;}

.allMenu .menu .depth_n2 > ul > li > a:hover{color: #fff; opacity: 1;}
.allMenu .menu .mm.active{}


.allMenu .menu .mm > .depth_n2 > ul,
.allMenu .menu .mm .n2 > .depth_n2 > ul{
  padding: 2.5vh 0;
  height: 31vh;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.allMenu .menu .mm > .depth_n2 > ul.double {
  float: left;
  margin-left: 15px;
  height: 100%;
  box-sizing: border-box;
}
.allMenu .menu .mm > .depth_n2 > ul.double:first-child {
  margin-left: 0px;
}

/* .allMenu .menu .mm.active > .depth_n2 > ul{
    -webkit-animation: slide-in-right 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: slide-in-right 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
} */

.allMenu .area_opt{ margin-left: auto; display: flex;align-items: center;justify-content: flex-end; position:absolute; right:60px; top: 8px; z-index: 6; }
.allMenu .area_opt .col + .col { margin-left: 55px; }
.allMenu .area_opt .col.member a{color:#fff; font-size: 15px;}
.allMenu .area_opt .col.member a:hover{opacity:0.8;}

.allMenu .area_opt .btn_allmenu{background-color: #1c3c52; border: 1px solid rgba(255, 255, 255, 0.3); }
.allMenu .area_opt .btn_allmenu:after,
.allMenu .area_opt .btn_allmenu:before{
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  margin: -1px 0;
  background-color: #fff !important;
}
.allMenu .area_opt .btn_allmenu:after{
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.allMenu .area_opt .btn_allmenu:before{
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
} 

/* 기업시민러브레터 / 포스코그룹 채용 버튼 추가 */
.allMenu .btn_eagroup {
  /* margin-top: 108px; */
  position: absolute;
  top: 7vh;
}
.allMenu .mm .btn_eagroup a {
  display: inline-flex;
  border: 1px #ffffffa1 solid;
  width: 230px;
  justify-content: space-between;
  align-items: center;
  padding: 15px 26px;
  border-radius: 100px;
  margin-top: 11px;
  line-height: 1;
  box-sizing: border-box;
  font-size: 16px;
}
.allMenu .btn_eagroup a:hover {
  background: rgb(255 255 255 / 13%);
}
.allMenu .active > a > .ico_.link1 {
  background-position: -17px -14px;
}
.allMenu .active > a:hover > .ico_.link1 {
  background-position: -17px -34px;
}

.allMenu .btn_eagroup a:hover > .ico_.link1 {
  background-position: -17px -14px;
}



/* 230411 기존 allMenu style 주석처리 */
    
/* .allMenu{position: fixed; left: 0; top: 150px; width: 100%; height: calc(100% - 150px); z-index: 5; background-color: #022846; display: none;overflow: visible;}
.allMenu .bg{position: fixed; left: 0; top: 0; width: 100%; height: 100vh;  background-size: cover; background-image: url(../images/common/bg_lnb1.jpg); content: ""; opacity: 1; z-index: 2; display: none;
  -webkit-transition: all 0.5s ease;
  -moz-transition: all 0.5s ease;
  -o-transition: all 0.5s ease;
  transition: all 0.5s ease;
  transition-delay: 1s;
}
.allMenu .menuTop { display: none; }
.allMenu .menu{position: relative; z-index: 5;display: flex;justify-content: center;padding-top: 60px;height: 710px;}
.allMenu .menu a{color: #fff;}
.allMenu .menu > .inner{ position: relative; width: 1140px;}
.allMenu .menu > .inner > ul{ width: 380px; border-right: 1px solid rgba(255, 255, 255, 0.1); box-sizing: border-box; padding-left: 60px; }*/
/*.allMenu .menu > .inner .depth_n2{ position: absolute; left: 380px;  top: 0; width: 380px; height: 100%;  display: block; box-sizing: border-box;padding-left: 60px;*/ /*border-right: 1px solid rgba(255, 255, 255, 0.1);} */
/*.allMenu .menu > .inner .depth_n3{ position: absolute; left: 320px;  top: 0; width: 380px; height: 100%;  display: none; box-sizing: border-box; padding-left: 60px; border-left: 1px solid rgba(255, 255, 255, 0.1); }
.allMenu .menu .img_dep3{position: absolute; left: 760px;  top: 0; width: 400px; height: 100%;  box-sizing: border-box; padding-left: 0;  opacity: 0;
    -webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.allMenu .menu .mm.active .img_dep3{opacity: 1;}
.allMenu .menu.dep3_img_none .img_dep3{display: none;}

.allMenu .menu .mm{margin-top: 40px;}
.allMenu .menu .mm:first-child{margin-top: 0;}
.allMenu .menu .mm > a{font-size: 34px; line-height: 1.2; font-weight: 600;}
.allMenu .menu .mm .depth_n2 > ul > li{margin-top: 38px;}
.allMenu .menu .mm .depth_n2 > ul > li:first-child{margin-top: 0;}
.allMenu .menu .mm .depth_n2 > ul > li > a{font-size: 22px; font-weight: 500; line-height: 1.2;}
.allMenu .menu .mm .depth_n3 > ul > li {margin-top: 22px;}
.allMenu .menu .mm .depth_n3 > ul > li:first-child{margin-top:0;}
.allMenu .menu .mm .depth_n3 > ul > li > a{
  color: #6f899a; font-weight: 400; line-height: 1.2; display:inline-block; position:relative;
  -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

}
.allMenu .menu .mm .depth_n3 > ul > li > a:after{
  width:0; height:2px; background:#fff; position:absolute; left:0; top:50%; content:""; margin-top:-2px;
  -webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;

}
.allMenu .menu .mm .depth_n3 > ul > li.active > a,
.allMenu .menu .mm .depth_n3 > ul > li > a:hover{padding-left:50px; color:#fff;}
.allMenu .menu .mm .depth_n3 > ul > li.active > a:after,
.allMenu .menu .mm .depth_n3 > ul > li > a:hover:after{width:30px;}
.allMenu .menu .mm.sz2 > a{font-size: 26px; font-weight: 500;display: inline-flex;align-items: center;}
.allMenu .menu .mm.sz2 > a i{margin-left: 10px;}

.allMenu .menu .mm.active > a,
.allMenu .menu .depth_n2 > ul > li.active > a{color: #00a5e5;}
.allMenu .menu .mm.active{}
.allMenu .menu .mm.active > .depth_n2,
.allMenu .menu  .depth_n2 > ul > li.active > .depth_n3{
  display: block;
}

.allMenu .menu .mm.active > .depth_n2 > ul{
    -webkit-animation: slide-in-right 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: slide-in-right 0.3s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
height: 100%;}

.allMenu .menu  .depth_n2 > ul > li.active > .depth_n3 > ul{
    -webkit-animation: slide-in-right 0.2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
    animation: slide-in-right 0.2s cubic-bezier(0.455, 0.030, 0.515, 0.955) both;
}


.allMenu .area_opt{ margin-left: auto; display: flex;align-items: center;justify-content: flex-end; position:absolute; right:60px; top:-100px; z-index: 6; }
.allMenu .area_opt .col + .col { margin-left: 55px; }
.allMenu .area_opt .col.member a{color:#fff;}
.allMenu .area_opt .col.member a:hover{opacity:0.8;}

.allMenu .area_opt .btn_allmenu{background-color: #1c3c52; border: 1px solid rgba(255, 255, 255, 0.3); }
.allMenu .area_opt .btn_allmenu:after,
.allMenu .area_opt .btn_allmenu:before{
  -webkit-transform-origin: 50% 50%;
  -moz-transform-origin: 50% 50%;
  -o-transform-origin: 50% 50%;
  -ms-transform-origin: 50% 50%;
  transform-origin: 50% 50%;
  margin: -2px 0;
  background-color: #fff !important;
}
.allMenu .area_opt .btn_allmenu:after{
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}
.allMenu .area_opt .btn_allmenu:before{
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
} 


*/


@-webkit-keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}
@keyframes slide-in-right {
  0% {
    -webkit-transform: translateX(20px);
            transform: translateX(20px);
    opacity: 0;
  }
  100% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
    opacity: 1;
  }
}

.cover-lnb{position:absolute; background-color: #022846; border-radius: 50%; z-index: 3;
  -webkit-transform-origin: 50% 50%;
-moz-transform-origin: 50% 50%;
-o-transform-origin: 50% 50%;
-ms-transform-origin: 50% 50%;
transform-origin: 50% 50%;
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
}
.cover-lnb.md-click-animate {
    -webkit-animation: mdClickEffect 3s both;
    -moz-animation: mdClickEffect 3s both;
    animation: mdClickEffect 3s both;
}
.cover-lnb.md-click-animate:after{opacity: 1;}


body.menuOpen #header{height: 150px; top: 0; background: none;}
body.main.menuOpen #header{height: 200px; top: -50px; }
body.menuOpen #header .cover{opacity: 0;}
.menuOpen #header .logo{display:none;}
.menuOpen #header .menu{display:none;}
.menuOpen #header > .inner{display:flex; margin-top: 27px;align-items: flex-start;}
.menuOpen .allMenu{
    display: block;
  -webkit-animation: fadeInType1 0.6s cubic-bezier(0.455, 0.030, 0.515, 0.955) 0.5s both;
    animation: fadeInType1 0.6s cubic-bezier(0.455, 0.030, 0.515, 0.955) 0.5s both;
}


@keyframes mdClickEffect {
    0% {
        opacity: 0;
        -webkit-transform: scale(0);
    }
    40% {
        opacity: 1;
    }

    100% {
        
        transform: scale(2.5);
    }
}

/* 230412 반응형 추가 */
@media screen and (max-width: 1220px) {
  .allMenu .menu .mm a,
  .allMenu .menu .product_menu a {
    font-size: 28px;
  }
  .allMenu .menu .mm .depth_n2 > ul > li > a,
  .allMenu .mm .btn_eagroup a {
    font-size: 16px;
    width: 200px;
  }
  .allMenu .menu .inner > ul > li:first-child:after, 
  .allMenu .menu .inner > ul > li.n5:after {
    top: 43px;
  }
}
@media screen and (max-width: 1350px) {
	.allMenu .area_opt {right: 80px;}
	.allMenu .area_opt .col + .col {margin-left: 40px;}
	.allMenu .area_opt .btn_allmenu{ margin-left: 50px;}
}