header { width: 100%;  position:absolute;  z-index: 20; overflow: hidden;}
header a { color: #000;}
.header-conteiner { display: flex; ; width:100%; margin: 4rem 2rem 0; transition: none;  justify-content: space-between;  }
.header-conteiner h1 a { display:block; width: 32rem; height: 4.3rem; background: url(../images/m_logo_w.png) no-repeat left bottom / auto 100%;  }
.header-conteiner .gnb { position:fixed; top:0; right: -85%;  padding-top: 10rem; width: 37rem; height: 100vh; margin: 0; background-color: #fff;}
.header-conteiner .gnb::after { position: absolute; content: ''; left: 160px; top: 0; width: 1px; height: 100vh; background: #ccc; }
.header-conteiner .gnb .tab1 { position: relative;  display: flex;  flex-direction: column; justify-content: flex-start; margin-top: 0;}
.header-conteiner .gnb .tab1 > li { display:flex; text-align: left; padding-left: 4rem;  font-size: 2rem; font-weight: 400; letter-spacing: 0; }
.header-conteiner .gnb .tab1 li ~ li { margin-top: 3rem;}
.header-conteiner .gnb .tab1 > li > a {display: inline-block; width: auto;  } 
.header-conteiner .gnb .tab1 a {text-align: left; width: auto;  min-width: auto; height: 2.4rem; line-height: 2.4rem;; } 
.header-conteiner .gnb .tab2 { position: absolute; display: none; top: 0; left: 20rem;  margin-top: 0; opacity:1; transition: none;}
.header-conteiner .gnb .tab1 > li:nth-child(1) .tab2 { display: block;}
.header-conteiner .gnb .tab2.active { display: block;}
.header-conteiner .gnb .tab2 li {   text-align: left; height: 2.4rem; line-height: 2.4rem; opacity:1; transition: none;}
.header-conteiner .gnb .tab2 li ~ li { margin-top: 3rem;}

.header-conteiner .gnb .tab2 a {text-align: left; position: relative; height: 2.4rem; font-size: 1.8rem; color: #595757; font-weight: 500;} 
.header-conteiner .gnb .tab2 a::after { content: ''; width: 0; position: absolute; left: 0;	bottom: -.2rem;	height: .2rem;;  background: #91af96;	transition: .5s; }
.header-conteiner .gnb .tab2 a:hover::after { width: 100%; }

.header-conteiner > ul {display: none;}


.main-screen .main-word span {display:block; width:100%; font-size:3.9rem; }


.container { display:block; position: absolute; top: 3rem; right: 2rem; z-index: 100;}
input[id=trigger] { visibility: hidden;}
label[for=trigger] { width: 40px; height: 30px; display: block; position: relative; cursor: pointer;}
label[for=trigger] span { position: absolute; height: .3rem; border-radius: .3rem; background-color: #fff; width: 100%; left: 0; transition: 0.3s;}
label[for=trigger] span:nth-child(1) { top: 0;}
label[for=trigger] span:nth-child(2) { top: 50%;}
label[for=trigger] span:nth-child(3) {top: 100%;}
input[id=trigger]:checked + label[for=trigger] span { background-color: #000;}
input[id=trigger]:checked + label[for=trigger] span:nth-child(1) { top: 50%; transform: rotate(45deg);}
input[id=trigger]:checked + label[for=trigger] span:nth-child(2) { opacity: 0;}
input[id=trigger]:checked + label[for=trigger] span:nth-child(3) { top: 50%; transform: rotate(-45deg);}

input[id=trigger]:checked { }
/* 다음부터는 태그에 클래스 선언 무조건 해서 복잡하게 만들지 말아야지 */


.portfolio-inner { position: relative; padding: 5rem 0 10rem ; box-sizing: border-box; }
.portfolio-inner h2 { padding: 0 0 2rem 2rem; max-width: 120rem; color: #3e3a39; margin: 0 auto; font-size: 4.8rem; font-weight: 700;	 }
.portfolio-inner .slider-wrap {position: relative; height: auto; padding: 0 2rem}
.portfolio-inner .slider {  margin: 0 ; position: static;  opacity: 1; width: 100%; transition: .5s; }
.portfolio-inner .slider li { margin: 0;  padding-right: 1rem;}
.portfolio-inner .slider li a {  display: block; position: static; height: auto; width: 100% }
.portfolio-inner .slider li div { position: static; opacity: 1; transition: none; width: 100%; min-height: 17.8rem; padding: 2.1rem 2.1rem 0 2.1rem; border: 1px solid #d6d6d4; box-sizing: border-box;  height: auto; background-color: #fff;}
.portfolio-inner .slider li div h3 { display: inline-block; position:relative; font-size: 1.3rem; line-height: 1.56rem; color: #898989; font-weight: 400; margin-bottom: 1.5rem;}
.portfolio-inner .slider li div h3:after {position:absolute; content: ''; right: -2rem; bottom:.5rem; width: 3rem; height: 2rem; background: url(../images/arrow_back_ios_FILL0_wght100_GRAD0_opsz48.png) no-repeat center / 100% auto; transform: rotate(180deg) }
.portfolio-inner .slider li div h3 span { display: none;}
.portfolio-inner .slider li div h3 strong {display: block; font-size: 3rem; line-height: 3.6rem; margin: 0; font-weight: 700; color: #595757; }
.portfolio-inner .slider li div p { font-size: 1.7rem; line-height: 2.55rem; color:#595757; margin-bottom: 0;}
.portfolio-inner .slider li div > span { display: none; }
.portfolio-inner .slider li div > span::after { position: absolute; right: 2.2rem; bottom: -.1rem; content: '\e5e1'; font-size: 13px;   font-family: 'Material Icons'; transition: .2s; }
.portfolio-inner .slider li a:hover div > span::after { right: 1.7rem;}
.portfolio-inner .slider img { height: auto; max-width: 100%; }


.banner article { height: auto; width: 100%;}
.banner article ~ article { margin-top: 2.5rem;}
.banner article .company { margin: 0 auto; max-width: 120rem; height: 60rem; padding: 6rem 0 0 2rem; }
.banner article:nth-child(1) { background: url(../images/esg_img.jpg) no-repeat 0 0 / cover; }
.banner article:nth-child(2) { height: auto; background: url(../images/company_img.jpg) no-repeat 0 0 / cover;  }
.banner article .company.management {  }
.banner article .company .h2 { display: flex; flex-direction: column; justify-content: flex-start;  width: 100%; margin: 0;}
.banner article .company .h2 h2 {text-align: left; margin-right: 0; font-size: 4.8rem; font-weight: 700; color: #3e3a39; margin-bottom: 2rem; }
.banner article .company .h2 p { font-size: 1.7rem; line-height: 2.5rem; font-weight: 500; color: #595757; margin-bottom: 6.2rem}
.banner article .company .h2 p span { display: block;}
.banner article .company ul li ~ li { margin-top: 3.3rem;}
.banner article .company ul li a { display:inline-block; position: relative; padding-right: 6rem; font-size: 4.8rem; font-weight: 700; color: #dcdddd;}
.banner article .company ul li a strong {transition: all .2s; color: #dcdddd; }
.banner article .company ul li a:hover strong { color: #595757;  }
.banner article .company ul li a:hover span { transform: rotate(-45deg); top: 40%; right: -.7rem; color: #595757; }
.banner article .company ul li a:hover span.second { top: 6%; right: -.6rem; opacity: 1;}

.material-symbols-outlined {font-size: 5rem;position: absolute; transform: rotate(-45deg); top: 40%; right: -.7rem;transition: .2s; font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 200,  'opsz' 48;}
.material-symbols-outlined.second{ top: 6%; right: -.6rem; opacity: 1; }



.policy { background-color: #54867e; height: 1rem;}
.policy-inner { display: none}

.sitemap { border-bottom: none;}
.sitemap-inner { padding: 4rem 2rem 0;height: auto; }

.sitemap-inner .introduce { display:none;}

.address-inner {   margin: 2.5rem 2rem 5rem;}
.address-inner p { font-size: 1.6rem; line-height: 2.8rem;}

.bg2 {display:none; background-color: #00000079; position: fixed; width: 100vw; height: 100vh; z-index: 10; top:0; left:0; right: 0; bottom: 0; }
.bg2.active { display: block;}