@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%; /*230327 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{  opacity: 1;  border-bottom: 1px solid #ddd; background-color: rgba(255, 255, 255, 1);*//*230327 background-color 추가*/}
#header.menu .cover{  opacity: 1;}

/* 메인에서 잔상 안남게 하기 위해서 #header.menu .cover 에 background , border 삭제
#header.share .cover,
#header.menu .cover{  opacity: 1;  border-bottom: 1px solid #ddd; background-color: rgba(255, 255, 255, 1);*//*230327 background-color 추가*//*}*/

/* 230503 신규 allMenu style 추가 */

.allMenu{position: fixed; left: 0; top: 0px; height: 100%; width: 100%; /*height: calc(100% - 150px); */z-index: 11; 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{
  width: 15%;
  margin: 0 5%;
  /* margin-top: 40px; */
  position: relative;
}
/* 230509 추가 */
.allMenu .menu > .inner > ul > li:nth-child(2) {
  width: 20%;
  min-width: 205px;
}
.allMenu .menu > .inner > ul > li:nth-child(3) {
  width: 15%;
  min-width: 147px;
  margin-left: 0;
}
.allMenu .menu > .inner > ul > li.n5{
  margin-right: 0px;
  width: 20%;
  min-width: 256px;
  /*230509 margin-right: -25px;에서 0으로 수정, width: 22%에서 20.5%로 수정*/
}
.allMenu .menu > .inner > ul > li.n6 {
	margin-right: 0;
	width: 22%;
	/* 230823 대메뉴명 두줄로 바뀌면서 수정		min-width: 144px;*/
}
.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 .mm.mmWrap{margin-left: 2%;}
.allMenu .menu a.mm.n7{margin-top: 65px; opacity: 0.7; font-size: 20px;}
.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 {font-size: 25px; line-height: 1.5; font-weight: 600; display: block; padding-bottom: 10px;position: relative;} /* 230523 fon-size: 30px에서 25px로 수정, line-height: 1.2에서 1.5로 수정 */
.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 .mm:hover > a:after{
  width:100%;
}
.allMenu .menu .mm:hover > a.mm:after {
	width: 0;
}
.allMenu .menu a.mm:hover{
	opacity: 1;
}
/* .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.n6:after{
  content: "";
  position: absolute;
  top: 84px;
/*  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;
}



/*230503 기존 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: 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{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);
    }
}

/*240426 반응형 추가*/
@media screen and (max-width: 1350px) {
	.allMenu .area_opt .btn_allmenu{ margin-left: 30px;}
}