html { font-size: 10px;}
body { font-size: 1rem; font-family: 'Noto Sans KR', sans-serif; }
/* header { width: 100%;  position:absolute;  z-index: 100;}
header a { color: #fff;}
.header-conteiner { display: flex; ; max-width: 120rem; margin: 7rem auto 6rem; transition: .3s;  justify-content: center;  }
.header-conteiner h1 a { display:block; width: 20.3rem; height: 7.5rem; background: url(../images/logo_w.png) no-repeat left bottom / auto 100%;  }
.header-conteiner .gnb {   width: 100%; max-width: 79.8rem;  margin: 0 2rem; overflow: hidden; }
.header-conteiner .gnb > ul { display: flex; justify-content: space-between; margin-top: 1.5rem;}
.header-conteiner .gnb > ul li { text-align: center; font-size: 1.9rem; font-weight: 600; letter-spacing: -.1rem;}
.header-conteiner .gnb > ul li a { display: block; width: 100%; min-width: 9.7rem; height: 3.4rem; line-height: 3.4rem; } 
.header-conteiner .gnb > ul > li > ul { margin-top: 2.5rem; opacity: 0; transition: 0.5s;}
.header-conteiner .gnb:hover > ul > li > ul { opacity: 1;}
.header-conteiner .gnb > ul > li > ul li ~ li { margin-top: 2.5rem; }
.header-conteiner .gnb > ul > li > ul > li > a { position: relative; height: 2.7rem; font-size: 1.8rem; font-weight: 600;} 
.header-conteiner .gnb > ul > li > ul > li > a::after { content: ''; width: 0; position: absolute; left: 0;	bottom: -.2rem;	height: .2rem;;  background: #91af96;	transition: .5s; }
.header-conteiner .gnb > ul > li > ul > li > a:hover::after { width: 100%; }

.header-conteiner > ul {display: flex; margin-left: 3.1rem;}
.header-conteiner > ul > li {  width: 5.6rem; max-height: 5.6rem; line-height: 5.6rem;  font-size: 1.6rem;  border: 1px solid #fff;   border-radius: 5.6rem; transition: .3s; text-align: center; overflow: hidden; }
.header-conteiner > ul > li ~ li { margin-left: 1.5rem;}
.header-conteiner > ul > li > a { display:block; width: 5.6rem; height: 5.6rem;  border-radius: 50%; transition: .3s; }
.header-conteiner > ul > li > ul > li  { line-height: 3rem; font-size: 1.3rem; }
.header-conteiner > ul > li > ul > li a { opacity: 1;}
.header-conteiner > ul > li > ul > li:last-child  { margin-bottom: 1rem; }
.header-conteiner > ul > li:hover { background-color: rgba(255, 255, 255, 0.781);  }
.header-conteiner > ul > li:hover > a { background-color: #fff; color: #595757;}
.header-conteiner > ul > li:nth-child(2):hover { max-height: 100%; }
.header-conteiner > ul > li > ul > li a { font-weight: 500; color: #595757; }

.header-conteiner > ul > li > ul > li a {position: relative;}
.header-conteiner > ul > li > ul > li a::after { content: ''; width: 0; position: absolute; left: 0;	bottom: -.2rem;	height: .2rem;;  background: #91af96;	transition: .5s; }
.header-conteiner > ul > li > ul > li a:hover::after { width: 100%; }
.bg {position: absolute; top: 0; left: 0;  width: 100%; height: 0; z-index: -1; background-color: #fff; opacity: 0;} */

.scroll-ani { position: absolute; bottom: 5rem; left: 50%; transform: translateX(-50%);   color: #fff; font-size: 1.6rem;}
.scroll-ani::after { position:absolute; content: ""; background: url(../images/arrow_back_ios_FILL0_wght100_GRAD0_opsz48.png) no-repeat 0 0 / 4rem auto; height: 5rem; width: 3rem; filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(57deg) brightness(106%) contrast(101%);  bottom: -5rem; left: 2rem;; transform: rotate(-90deg); animation: scroll 1.2s linear infinite;}

@keyframes scroll {
	0% { bottom: -5rem; }
	40% { bottom: -4rem; }
	50% { bottom: -3.8rem;}
	60% { bottom: -4rem;}
	100% { bottom: -5rem;}
}

main { overflow-x: hidden; }
.main-screen { position: relative; height: 100vh; width: 100%; }
.main-screen img { object-fit: cover; width: 100%; height: 100%;}
.main-screen .main-word {  }
.main-screen .main-word span { position: absolute; top: 52%; left: 50%; transform: translate(-50%, -50%); font-size: 4.5rem; font-weight: bold; color: #fff; text-align: center; transition: 3s; animation: word 5s linear infinite;}
.main-screen .main-word span:nth-child(2) {opacity: 0; animation-delay: 2.5s; }

@keyframes word {
	0% { top: 57%; opacity: 0;}
	5% { top: 52%; opacity: 1;}
	50% { top: 52%; opacity: 1;}
	55% { top: 57%; opacity: 0;}
	100% { top: 57%; opacity: 0;}
}


.portfolio-inner {position: relative; padding: 16rem 0 17rem; box-sizing: border-box; }
.portfolio-inner h2 { padding-bottom: 3rem; max-width: 120rem;  color: #3e3a39; margin: 0 auto; font-size: 6.2rem; font-weight: 700;	 }
.portfolio-inner > div {position: relative; height: 61.1rem; }
.portfolio-inner .slider {  margin: 0; position: absolute; top: 15%; left: 0; opacity: 0; width: 100%; transition: .5s;}
.portfolio-inner .slider.active { top:0; opacity: 1;}
.portfolio-inner .slider li { margin-right: 2rem; margin: 0; }
.portfolio-inner .slider li a {  display: block; position: relative; height: 61.1rem; width: 100.1rem;  }
.portfolio-inner .slider li div { position: absolute; opacity: 0; left: 5.5rem; top: 15.9rem; transition: .5s; padding: 6.5rem 2.5rem 2.5rem; border: 1px solid #d6d6d4; box-sizing: border-box; width: 27rem; height: 37rem; background-color: #fff;}
.portfolio-inner .slider li div.active { top: 8.9rem; opacity: 1;}
.portfolio-inner .slider li div h3 { font-size: 1.3rem; line-height: 1.56rem; color: #898989; font-weight: 400; margin: 0}
.portfolio-inner .slider li div h3 strong {display: block; font-size: 3rem; line-height: 3.6rem; margin: 1.5rem 0 2.5rem; font-weight: 700; color: #595757; }
.portfolio-inner .slider li div p { font-size: 1.7rem; line-height: 2.55rem; color:#595757; margin-bottom: 6.6rem;}
.portfolio-inner .slider li div > span { display: inline-block; position: relative; width: 10rem; font-size: 1.4rem; line-height: 1.68rem; color: #91af96;}
.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: 100%;}
.portfolio-inner .slider .slick-dots { position: static; margin-top: 6.3rem; width: 100%; height: .7rem; display: flex; justify-content: center; }
.portfolio-inner .slider .slick-dots li {margin: 0 .4rem;  width: auto; height: .7rem;}
.portfolio-inner .slider .slick-dots li button { width: 1.1rem; height: 100% ; border-radius: .3rem; background-color: #e9e8e8; transition: .3s; padding: 0}
.portfolio-inner .slider .slick-dots li.slick-active button {  width: 4.2rem; background-color: rgb(201, 199, 199);}
.portfolio-inner .slider .slick-dots li button::before { display: none; }
.slick-list {	margin-right: -20px; }
.slick-slide {	padding-right: 20px;}

.banner article { height: 77.6rem; width: 100%;}
.banner article ~ article { margin-top: 2.5rem;}
.banner article:nth-child(1) { background: url(../images/esg_img.jpg) no-repeat 0 0 / cover; }
.banner article:nth-child(2) { height: 100.1rem; background: url(../images/company_img.jpg) no-repeat 0 0 / cover;  }
.banner article .company { margin: 0 auto; max-width: 120rem; height: 60rem; padding: 12.6rem 0 0; }
.banner article .company.management {  }
.banner article .company .h2 { display: flex; align-items: left; margin: 0 0 7rem;}
.banner article .company .h2 h2 { margin-right: 5rem; font-size: 6rem; font-weight: 700; color: #3e3a39; }
.banner article .company .h2 p { font-size: 2.5rem; line-height: 4rem; color: #595757;}
.banner article .company .h2 p span { display: block;}
.banner article .company ul li ~ li { margin-top: 3rem;}
.banner article .company ul li a { display:inline-block; position: relative; padding-right: 6rem; font-size: 6rem; 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: 50%; right: -.7rem; color: #595757; }
.banner article .company ul li a:hover span.second { top: 24%; right: -.6rem; opacity: 1;}


.policy { background-color: #54867e;}
.policy-inner { max-width: 120rem; height: 8rem; margin: 0 auto; display: flex; align-items: center;  justify-content: space-between;}
.policy-inner ul { display: flex; }
.policy-inner ul li {line-height: 2rem; }
.policy-inner ul:nth-child(1) li ~ li { padding-left: 3.5rem;}  
.policy-inner ul:nth-child(2) li ~ li { padding-left: 2.5rem;} 
.policy-inner ul li a { display: inline-block; position: relative; font-size: 1.6rem; color: #fff; line-height: 2rem; vertical-align: middle; }
.policy-inner ul:nth-child(2) li a {padding-left: 2rem;  }
.policy-inner ul li a span { position: absolute; left: .7rem;; top: -.2rem }

.sitemap { border-bottom: 1px solid #e2dddd;}
.sitemap-inner { max-width: 120rem; height: 30.1rem; margin: 0 auto; padding: 6.5rem 0 9.1rem; }
.sitemap-inner > div { display: flex; justify-content: space-between; }
.sitemap-inner > div h3 { display: none; }
.sitemap-inner > div .go { display: flex; }
.sitemap-inner > div .go > div {  display: flex; flex-direction: column-reverse; position: relative; }
.sitemap-inner > div .go > div ~ div { margin-left: .5rem;}
.sitemap-inner > div .go > div input { display: none;}
.sitemap-inner > div .go > div label {  display: inline-block; min-width: 20.9rem; height: 4.2rem; line-height: 3.9rem; font-size: 1.8rem; font-weight: 500; color: #888; border: 1px solid #e3e3e3; padding-left: 2rem; box-sizing: border-box; background-color: #fff; text-align: left; cursor: pointer;}
.sitemap-inner > div .go label::after { position: absolute; height: 4.2rem; width: 2rem;  content:""; background: url(../images/family_arrow.png) no-repeat right center / .7rem auto;}
.sitemap-inner > div .go input:checked ~ label { color: #53867e; border-color: #78928e;}
.sitemap-inner > div .go input:checked ~ label::after { background: url(../images/family_arrow_down.png) no-repeat right center / .7rem auto;}
.sitemap-inner > div .go input:checked ~ ul { opacity: 1; z-index: 100;}
.sitemap-inner > div .go ul { opacity: 0; z-index: -100; position: absolute; margin-bottom: 4.2rem; border: 1px solid #78928e; border-bottom: 0; background-color: #fff; min-width: 20.9rem; box-sizing: border-box;}
.sitemap-inner > div .go ul li ~ li { border-top: 1px dotted #666;}
.sitemap-inner > div .go ul li a { display: inline-block; font-size: 1.4rem; height: 3.2rem; line-height: 3rem; padding-left: 2rem;  }
.sitemap-inner .introduce { display:flex; flex-direction: column; margin-top: 5.3rem;}
.sitemap-inner .introduce div { display: flex; }
.sitemap-inner .introduce div ~ div { margin-top: 4rem;}
.sitemap-inner .introduce div ul { display: flex;}
.sitemap-inner .introduce ul li:first-child { margin-left: 4.2rem;;}
.sitemap-inner .introduce ul li { margin-left: 3.4rem; font-size: 1.8rem; }
.sitemap-inner .introduce h3 { font-size: 1.8rem; font-weight: 500; }

.address-inner {  max-width: 120rem; margin: 3.5rem auto 5rem;}
.address-inner p { font-size: 1.4rem; line-height: 2.8rem;}

.material-symbols-outlined {font-size: 5rem;position: absolute; top: 6rem; right: 0; transition: .2s; font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 200,  'opsz' 48;}
.material-symbols-outlined.second{ right: -1.4rem; top: 4rem; opacity: 0; }

.dtu { animation: dtu .5s linear both; }
.fio { animation: fio .5s linear both; }
.management p span:nth-child(2) { animation-delay: .5s;}
.company ul li:nth-child(2) { animation-delay: .5s;}
.company ul li:nth-child(3) { animation-delay: 1s;}

@keyframes dtu {
	0% {
		transform : translateY(5rem);
		opacity: 0;
	}
	90% {
		transform: translateY(-.5rem);
		opacity: .9;
	}
	100% { 
		transform: translateY(0rem);
		opacity: 1;
	}
}
@Keyframes fio {
	0% {opacity: 0;}
	100% { opacity: 1;}
}