@charset "utf-8";

.p-Part{padding: 120px 0;}
.bg1{background: #f7faf6;}

@media screen and (max-width:1280px){
    .p-Part{padding: 100px 0;}
}
@media screen and (max-width:980px){
    .p-Part{padding: 80px 0;}
}
@media screen and (max-width:680px){
    .p-Part{padding: 60px 0;}
}

.intro1 .top{display: flex; justify-content: space-between;color: #000;}
.intro1 .txt h3{font-size: 5rem; margin: 50px 0;}
.intro1 .txt h3 span{color: #3c6;}
.intro1 .txt h4{font-size: 2rem; margin-bottom: 50px;}
.intro1 .txt p{font-size: 2rem; font-weight: 500;line-height: 4rem;}
.intro1 .img img{width: 100%;border-radius: 30px;}
.intro1 .top .img{ width: 42.858%;position: relative;}
.intro1 .top .img:before {content:''; width:180px; height:180px; background:url('/images/sub/intro1_rotate.png') no-repeat center center; position:absolute; bottom:-70px; right:-70px; animation: 3000s 0s infinite rotate; background-size:100% auto}
.intro1 .bot{display: flex; justify-content: space-between;color: #000; align-items: end; text-align: right; margin-top: -80px;}
.intro1 .bot .txt{margin-bottom: 50px;}
.intro1 .bot .img{ width: 50%;position: relative;}
.intro1 .bot .img:before {content:''; width:90px; height:90px; background: #d9e8c6; position:absolute; bottom:-45px; left:-45px; border-radius: 100px;}

@keyframes rotate {
    from{transform: rotate(0deg);}
    to{transform: rotate(99999deg);}
}

@media screen and (max-width:1400px){
    .intro1 .txt h3{font-size: 4rem; margin: 30px 0;}
    .intro1 .txt h4{font-size: 1.8rem; margin-bottom: 30px;}
    .intro1 .txt p{font-size: 1.8rem; line-height: 3.5rem;}
    .intro1 .bot .txt{margin-bottom: 30px;}
}
@media screen and (max-width:1280px){
    .intro1 .txt h3{font-size: 3.5rem;}
    .intro1 .top .img{ width: 40%;}
    .intro1 .top .img:before {width:130px; height:130px; bottom:-50px; right:-50px;}
    .intro1 .bot{margin-top: -30px;}
    .intro1 .bot .img{ width: 40%;}
}
@media screen and (max-width:980px){
    .intro1 .top{flex-wrap: wrap;gap: 20px;}
    .intro1 .bot{flex-wrap: wrap;gap: 20px;}
    .intro1 .txt{width: 100%; order: 2;}
    .intro1 .top .img{width: 100%; height: 400px; border-radius: 20px; background: url('/images/sub/intro1_img1.png') no-repeat 50% 15%; background-size: cover;}
    .intro1 .img img{display: none;}
    .intro1 .top .img:before {width:100px; height:100px; bottom:-30px; right:-30px; z-index: 10;}
    .intro1 .bot{margin-top: 50px;}
    .intro1 .bot .img{width: 100%; height: 400px; border-radius: 20px; background: url('/images/sub/intro1_img2.png') no-repeat 50% 15%; background-size: cover;}
    .intro1 .bot .img:before {width:60px; height:60px; bottom:-30px; left:-30px;}
}
@media screen and (max-width:580px){
    .intro1 .txt h3{font-size: 3rem;}
    .intro1 .txt h4{font-size: 1.6rem; margin-bottom: 20px;}
    .intro1 .txt p{font-size: 1.6rem; line-height: 3rem;}
    .intro1 .txt p br{display: none;}
}


.pro{display: flex; padding: 140px 0; position: relative; justify-content: end; flex-wrap: wrap;}
.pro .txt{color: #000;margin-top: 30px; position: absolute; left: 0; display: flex;flex-wrap: wrap; }
.pro .txt h4{font-size: 1.8rem; width: 100%;}
.pro .txt h3{font-size: 5.5rem;margin: 10px 0 30px; width: 100%;}
.pro .txt p{font-size: 1.8rem; line-height: 3rem; width: 100%;}
.pro .txt a{margin-top: 50px; display: flex; align-items: center; gap: 20px; width: fit-content;}
.pro .txt a img{transition: transform 0.5s ease-in-out;}
.pro .txt a:hover img{transform: rotate(180deg);}
.pro .txt a p{color: #3c6; font-weight: bold; font-size: 2.3rem;}
.pro.even{justify-content: start;}
.pro.even .txt{right: 0; left: auto; text-align: right; justify-content: end;}
.pro.even .txt a img{order: 2;}
.pro.even .txt a p{order: 1;}


@media screen and (max-width:1400px){
    .pro{padding: 120px 0;}
    .pro .txt{position: relative; width: 100%; margin-top: 0;}
    .pro .txt h4{font-size: 1.7rem;}
    .pro .txt h3{font-size: 5rem; margin: 10px 0 20px;}
    .pro .txt p{font-size: 1.7rem; line-height: 2.5rem;}
    .pro .txt a{margin-top: 30px;}
    .pro .txt a p{font-size: 2rem;}
}
@media screen and (max-width:1080px){
    .pro{padding: 100px 0;}
    .pro .img{width: 100%; margin-top: 30px;}
    .pro .img img{width: 100%;}
    .pro .txt h4{font-size: 1.6rem;}
    .pro .txt h3{font-size: 4.5rem;}
    .pro .txt p{font-size: 1.6rem;}
    .pro .txt a{gap: 15px;}
    .pro .txt a img{width: 45px;}
    .pro .txt a p{font-size: 2rem;}
}
@media screen and (max-width:786px){
    .pro{padding: 80px 0;}
    .pro .txt h3{font-size: 4rem;}
    .pro .txt a img{width: 40px;}
}
@media screen and (max-width:580px){
    .pro{padding: 60px 0;}
    .pro .txt h3{font-size: 3.5rem;}
}
@media screen and (max-width:480px){
    .pro .txt p{font-size: 1.5rem;}
    .pro .txt a img{width: 35px;}
    .pro .txt a p{font-size: 1.8rem;}
}


.popup-overlay {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.5); display: flex;align-items: center;justify-content: center;opacity: 0;visibility: hidden;transition: opacity 0.3s ease, visibility 0.3s ease;z-index: 999;}
.popup-content {background: white;padding: 50px;border-radius: 10px;text-align: center;width:650px;position: relative;transform: scale(0.8);opacity: 0;transition: transform 0.3s ease-out, opacity 0.3s ease-out;}
.popup-content img {width: 100%; border: 1px solid #ddd;}
.popup-overlay.show {opacity: 1;visibility: visible;}
.popup-overlay.show .popup-content {transform: scale(1);opacity: 1;}
.close-popup{position: absolute; right: 15px; top: 15px; font-size: 2.5rem;}

@media screen and (max-width:700px){
    .popup-content {width: 90%; padding: 40px 30px;}
    .close-popup{right: 10px; top: 10px; font-size: 2rem;}
}


.intro2 .top{text-align: center; color: #000;}
.intro2 .top .img{width: 100%; height: 400px; background: url('/images/sub/intro2_top.jpg') no-repeat center center; margin-bottom: 50px; background-size: cover;}
.intro2 .top.esg1 .img{background: url('/images/sub/esg1_top.png') no-repeat center center;}
.intro2 .top h3{font-size: 3.5rem; margin-bottom: 50px;}
.intro2 .top h3 span{color: #3c6;}
.intro2 .top p{font-size: 1.8rem; line-height: 3rem;}
.intro2 .top p + p{margin-top: 20px;}

.intro2 .mid .inner{display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap;}
.intro2 .mid .lt{width: 48%;}
.intro2 .mid .lt ul{gap: 30px; display: flex; flex-wrap: wrap;}
.intro2 .mid .lt ul li{ border: 1px solid #eee; width: 100%; text-align: center; padding: 30px; border-radius: 10px; background: #fff;}
.intro2 .mid .lt ul li h3{font-size: 4rem; font-family: 'Montserrat'; color: #000;}
.intro2 .mid .lt ul li img{margin: 20px auto 30px; width: 130px;}
.intro2 .mid .lt ul li p{font-size: 2.3rem; color: #000; line-height: 3.5rem;}
.intro2 .mid .rt{width: 48%; height: 530px; background: #000;border-radius: 20px; overflow: hidden; position: relative;}
.intro2 .mid .rt .img{width: 100%; }
.intro2 .mid .rt .img img{height: 100%; opacity: 0.6;}
.intro2 .mid .rt .txt{position: absolute; width: 100%; height: 100%; color: #fff; top: 0;left: 0; text-align: center;display: flex; flex-wrap: wrap; align-content: center;}
.intro2 .mid .rt .txt h3{width: 100%; font-size: 4.5rem;}
.intro2 .mid .rt .txt h4{width: 100%;font-size: 2rem; opacity: 0.5; font-family: 'Montserrat'; margin: 10px 0 20px;}
.intro2 .mid .rt .txt p{width: 100%;font-size: 1.8rem;}

h3.s_tit{font-size: 4.5rem; position: relative;color: #000; z-index: 10; margin-bottom: 30px;padding-left: 10px;}
h3.s_tit:after{position: absolute; content: ''; width: 20px;height: 20px; border-radius: 100px; background: #3c6; left: 0px; z-index: -1; top: 0px;}

.intro2 .history {color: #000;}
.intro2 .title {display: flex; justify-content: space-between;}
.intro2 .indicator {display: flex; gap: 5px;}
.intro2 .indicator span{cursor: pointer;}
.intro2 .his_wrap{width: 100%; border-top: 1px solid #ddd; padding: 30px 0;}
.pagination-progress {position: relative;width: 100%;height: 5px;background: rgba(0, 0, 0, 0.1);margin-top: 10px;border-radius: 3px;overflow: hidden;}
.progress-bar {height: 100%;width: 0%;background: #3c6;border-radius: 3px;transition: width 0.5s ease-in-out;}
.intro2 .year{padding: 50px; border-right: 1px solid #ddd; min-height: 240px; position: relative;}
.intro2 .year:last-child{border-right: 0;}
.intro2 .year h3{font-size: 3rem; font-family: 'Montserrat'; border-bottom: 2px solid #000; display: inline-block;}
.intro2 .year ul{margin-top: 20px;}
.intro2 .year ul li{font-size: 2rem;}
.intro2 .year ul li + li{margin-top: 10px;}
.intro2 .year ul li b{width: 35px; display: inline-block; font-family: 'Montserrat';}


@media screen and (max-width:1280px){
    .intro2 .top p{font-size: 1.6rem;}
    h3.s_tit{font-size: 4rem;}
    .intro2 .mid .lt ul li h3{font-size: 3rem;}
    .intro2 .mid .lt ul li img{width: 100px;}
    .intro2 .mid .lt ul li p{font-size: 2rem; line-height: 3rem;}
    .intro2 .mid .rt .img{height: 500px; }
    .intro2 .mid .rt .txt h3{font-size: 4rem;}
    .intro2 .mid .rt .txt h4{font-size: 1.8rem; margin: 5px auto 10px;}
    .intro2 .mid .rt .txt p{font-size: 1.6rem;}
    .intro2 .year{padding: 40px;}
    .intro2 .year h3{font-size: 2.8rem;}
    .intro2 .year ul li{font-size: 1.8rem;}
    .intro2 .indicator span img{width: 50px;}
}
@media screen and (max-width:880px){
    .intro2 .mid .lt{width: 100%;}
    .intro2 .mid .rt{width: 100%; margin-top: 50px;}
    .intro2 .mid .rt{height: 400px; }
    .intro2 .mid .rt .img{height: 100%; }
    .intro2 .mid .rt .img img{height: auto;width: 100%;}
    .intro2 .mid .rt .txt{height: 400px; }
}
@media screen and (max-width:580px){
    .intro2 .top h3{font-size: 3rem; margin-bottom: 30px;}
    .intro2 .top p br{display: none;}
    h3.s_tit{font-size: 3.5rem;}
    .intro2 .mid .lt ul li h3{font-size: 2.5rem;}
    .intro2 .mid .lt ul li img{width: 80px;}
    .intro2 .mid .lt ul li p{font-size: 1.8rem;}
    .intro2 .mid .rt{height: 260px; }
    .intro2 .mid .rt .img{height: 260px;}
    .intro2 .mid .rt .img img{height: 100%; width: 100%;}
    .intro2 .mid .rt .txt{height: 260px; }
    .intro2 .mid .rt .txt h3{font-size: 3rem;}
    .intro2 .mid .rt .txt h4{font-size: 1.4rem;}
    .intro2 .mid .rt .txt p{font-size: 1.5rem;}
    .intro2 .indicator span img{width: 40px;}
    .intro2 .year{padding: 30px;}
    .intro2 .year h3{font-size: 2.5rem;}
    .intro2 .year ul li{font-size: 1.6rem;}
    .intro2 .year ul li b{width: 25px;}
}



.ci p{font-size: 1.8rem; color: #000; line-height: 3rem;}
.ci ul{display: flex; gap: 20px; margin-top: 70px; flex-wrap: wrap;}
.ci ul li{width: calc(100%/3 - 14px); }
.ci ul li h3{font-size: 2.5rem; color: #000; margin-bottom: 20px; border-left: 10px solid #000; padding-left: 15px; line-height: 2rem;}
.ci ul li .img{width: 100%; margin: 0 auto; text-align: center;background: url('/images//sub/ci_bg.png') no-repeat center center; background-size: cover; border: 1px solid #eee;}
.ci ul li img{width: 70%; }

@media screen and (max-width:1280px){
    .ci ul{margin-top: 50px;}
    .ci ul li h3{font-size: 2rem; border-left: 7px solid #000; padding-left: 10px; line-height:1.6rem;}
}
@media screen and (max-width:880px){
    .ci p{font-size: 1.6rem; line-height: 2.5rem;}
}
@media screen and (max-width:720px){
    .ci p br{display: none;}
    .ci ul{gap: 40px;}
    .ci ul li{width: 100%; }
}


.intro3 ul{width: 100%; flex-wrap: wrap; display: flex; color: #fff;gap: 50px;}
.intro3 ul li{width: 100%; flex-wrap: wrap; display: flex; justify-content: space-between; align-items: end; gap: 20px; position: relative;background: #000; overflow: hidden;}
.intro3 ul li .img{width: 100%; height: 450px; transition: 0.7s; }
.intro3 ul li:hover .img{transition: 0.7s; transform: scale(1.05);}
.intro3 ul li:nth-child(1) .img{background: url('/images/sub/intro3_img1.png') no-repeat center center; background-size: cover; opacity: 0.6;}
.intro3 ul li:nth-child(2) .img{background: url('/images/sub/intro3_img2.png') no-repeat center center; background-size: cover; opacity: 0.6;}
.intro3 ul li .txt{width: 100%; position: absolute; left: 0;bottom: 0; padding:40px; text-align: center;height: 100%; display: flex; align-items: end; justify-content: center;}
.intro3 ul li h3{ font-size: 9rem; font-family: 'Montserrat'; color: #fff; opacity: 0.2; position: absolute; top: 0; letter-spacing: -1px; font-style: italic; font-weight: 800; left: 20px;}
.intro3 ul li p{ font-size: 2.5rem; line-height: 4rem;}
.intro3 ul li p span{background: rgba(51, 204, 102, 0.795);padding: 1px 5px; font-weight: bold;}

@media screen and (max-width:880px){
    .intro3 ul li .img{height: 350px;}
    .intro3 ul li h3{ font-size: 7rem;}
    .intro3 ul li p{ font-size: 2rem; line-height: 3rem;}
}
@media screen and (max-width:580px){
    .intro3 ul{gap: 30px;}
    .intro3 ul li .txt{padding: 20px;}
    .intro3 ul li h3{ font-size: 5rem; left: 15px;}
}
@media screen and (max-width:480px){
    .intro3 ul li .img{height: 250px;}
    .intro3 ul li h3{ font-size: 4rem;}
    .intro3 ul li p{ font-size: 1.8rem; line-height: 2.8rem;}
}


.intro3-1 .top{background:  url('/images/sub/intro3-1_bg.png') no-repeat center top; height:1000px; display: flex;  flex-wrap: wrap; position: relative;}
.intro3-1 .top .img{position: absolute; top: 250px; right: 20px; z-index: 1;}
.intro3-1 .top .txt{text-align: center;  color: #fff; margin-top: 200px; z-index: 2;}
.intro3-1 .top .txt h3{font-size: 6rem; color: #000; font-family: 'Montserrat'; margin-bottom: 50px;}
.intro3-1 .top .txt p{font-size: 2.5rem; color: #000;}

.intro3-1 .mid ul{display: flex; gap: 20px; flex-wrap: wrap;margin-top: -400px;}
.intro3-1 .mid ul li{width: calc(100%/4 - 15px); background: #fff; box-shadow: 1px 1px 10px 5px #00000020;text-align: center; padding: 30px; border-radius: 10px;}
.intro3-1 .mid ul li .img{width: 100%; border: 1px solid #eee;}
.intro3-1 .mid ul li .img img{width: 100%;}
.intro3-1 .mid ul li p{font-size: 1.8rem;color: #000; margin-top: 20px;}

.intro3-1 .bot .inner + .inner{margin-top: 120px;}
.intro3-1 .bot .box{display: flex; justify-content: space-between; align-items: center; margin-top: 50px;}
.intro3-1 .bot .select{padding: 30px; font-size: 2rem; width: 40%;}
.intro3-1 .bot .select li{position: relative; padding-left: 20px; border-bottom: 1px dashed #ddd; padding-bottom: 10px;}
.intro3-1 .bot .select li:after{content: '•'; position: absolute; color: #3c6; left: 0; top: 0px;}
.intro3-1 .bot .select li + li{margin-top: 20px;}
.intro3-1 .bot .img{width: 55%; border: 1px solid #eee;}
.intro3-1 .bot .img img{width: 100%;}

@media screen and (max-width:1280px){
    .intro3-1 .top{background-size: 100%; height:630px; background-position: left 20%;}
    .intro3-1 .top .img{width: 350px; top: 450px;}
    .intro3-1 .top .img img{width: 100%;}
    .intro3-1 .top .txt h3{font-size: 5rem;}
    .intro3-1 .top .txt p{font-size: 2rem;background: #ffffffc0; display: inline-block; padding: 30px;}
    .intro3-1 .mid{background: #414caf;}
    .intro3-1 .mid ul{margin-top: 0;}
    .intro3-1 .mid ul li{width: calc(100%/2 - 10px);}
    .intro3-1 .mid ul li p{font-size: 1.6rem;}
    .intro3-1 .bot .inner + .inner{margin-top: 100px;}
}
@media screen and (max-width:1080px){
    .intro3-1 .top{background-position: left bottom;}
    .intro3-1 .bot .inner + .inner{margin-top: 80px;}
}
@media screen and (max-width:880px){
    .intro3-1 .top{background:  url('/images/sub/intro3-1_bg.png') no-repeat left top;background-size: cover; height: 500px;}
    .intro3-1 .top .txt{margin-top: 130px;}
    .intro3-1 .top .txt h3{font-size: 4rem;margin-bottom: 40px;}
    .intro3-1 .top .txt p br{display: none;}
    .intro3-1 .top .img{width: 300px; top: 300px;}
    .intro3-1 .bot .box {flex-wrap: wrap; margin-top: 30px;}
    .intro3-1 .bot .select{font-size: 1.8rem; width: 100%;padding: 20px;}
    .intro3-1 .bot .img{width: 100%;}
    .intro3-1 .bot .inner + .inner{margin-top: 60px;}
}
@media screen and (max-width:680px){
    .intro3-1 .top{height: 350px;}
    .intro3-1 .top .txt h3{margin-bottom: 30px;}
    .intro3-1 .top .txt p{font-size: 1.8rem; padding: 20px;}
    .intro3-1 .top .img{width: 300px; top: 300px;}
}
@media screen and (max-width:480px){
    .intro3-1 .top .txt h3{font-size: 3.5rem;}
    .intro3-1 .mid ul li{width: 100%;}
}


#sLocation { position: relative; }
#sLocation .root_daum_roughmap .wrap_map  { height: 600px !important; }
.wrap_controllers  { display: none; }
.map_border {  display: none; }

.loca-info { position: relative; width: 90%; margin: -5% auto 0; background: #fff; display: table; table-layout: fixed; z-index: 10; font-family: 'SUIT';}
.loca-info > div { display: table-cell; vertical-align: middle; padding: 4%;  }
.loca-info .tit { width: 35%; text-align: center; background: #3c6; color:#fff; font-size: 1.8rem; }
.loca-info .tit img { max-width: 60%; }
.loca-info .tit p { margin-top: 1em; }
.loca-info .cont { font-size: 1.8rem; border: 1px solid #e5e5e5; border-top:0;  }
.loca-info .cont dl dt, .loca-info .cont dl dd { display: inline-block; vertical-align: middle; margin: 0.5em 0; }
.loca-info .cont dl dt { width: 120px; color:#3c6; font-weight: 700; }
.loca-info .cont dl dt i { margin-right: 0.3em; vertical-align: middle; padding: 8px; background: #3c6; color:#fff; border-radius: 100%; font-size: 0.9em; }
.loca-info .cont dl dd { width: calc(100% - 120px);  }


@media all and (max-width:1080px){
	#sLocation .root_daum_roughmap .wrap_map  { height: 60vw !important; }
	.loca-info .cont dl dt { width: 100px; }
	.loca-info .cont dl dd { width: calc(100% - 100px);  }
}

@media all and (max-width:800px){
	.loca-info { width: 95%; margin-top: -10%; }
	.loca-info .cont { font-size: 1.6rem; }
	.loca-info .cont dl dt { width: 80px; }
	.loca-info .cont dl dd { width: calc(100% - 80px);  }
}

@media all and (max-width:640px){
	.loca-info,
	.loca-info > div { display: block; }
	.loca-info .tit { width: 100%; }
	.loca-info .tit img, .loca-info .tit p { display: inline-block; vertical-align: middle;}
	.loca-info .tit img { max-width: 22%;  }
	.loca-info .tit p { margin-top: 0; margin-left: 1em; }
	.loca-info .cont  { padding: 1.7em; }
    .loca-info .cont dl dt i {padding: 6px;font-size: 0.6em; }
}


.intro3-2 .top{text-align: center; background:  url('/images/sub/intro3-2_bg.png') no-repeat center center; background-size: cover; color: #fff;}
.intro3-2 .top h3{font-size: 5rem;}
.intro3-2 .top h4{font-size: 2rem; font-family: 'Montserrat'; opacity: 0.5; margin-top: 30px;}
.intro3-2 .top img{margin: 100px 0; filter: brightness(4) hue-rotate(314deg);}
.intro3-2 .top p{font-size: 2.5rem; line-height: 3.5rem;}
.intro3-2 .top span{color: #3c6; font-weight: bold;}
.intro3-2 .arrow_img{margin: 100px auto; text-align: center;}
.intro3-2 .bot .mk{display: flex; align-items: center; justify-content: space-between; height: 100%; margin-top: 50px;}
.intro3-2 .bot .mk > li{width: 28%; text-align: center; box-shadow: 1px 1px 10px 5px #00000010; border-radius: 10px; padding: 40px; height: 100%; min-height: 432px;}
.intro3-2 .bot .mk2{margin-top: 70px;}
.intro3-2 .bot .mk2 > li{width: 32%;}
.intro3-2 .bot .mk > li.plus{width: 40px; box-shadow: none; padding: 0; display: flex; align-items: center;justify-content: center;}
.intro3-2 .bot .mk > li.plus img{width: 100%;}
.intro3-2 .bot .mk > li h3{font-size: 3rem; color: #000; margin-bottom: 20px;}
.intro3-2 .bot .list{margin-top: 40px; font-size: 1.8rem; background: #c6f1d4; padding: 20px; height: 160px; display: flex; align-items: center; flex-wrap: wrap; align-content: center; border-radius: 10px;}
.intro3-2 .bot .list2{height: 220px;}
.intro3-2 .bot .list li{position: relative;border-bottom: 1px dashed #fff;padding-bottom: 10px;  color: #000; width: 100%;}
.intro3-2 .bot .list li + li {margin-top: 10px;}


@media all and (max-width:1280px){
    .intro3-2 .top h3{font-size: 4rem;}
    .intro3-2 .top h4{font-size: 1.8rem; margin-top: 20px;}
    .intro3-2 .top img{margin: 80px 0; width: 300px;}
    .intro3-2 .top p{font-size: 2.2rem;}
    .intro3-2 .arrow_img{max-width: 900px;}
    .intro3-2 .arrow_img img{width: 100%;}
    .intro3-2 .bot .mk > li h3{font-size: 2.7rem;}
    .intro3-2 .bot .mk > li img{width: 80px;}
    .intro3-2 .bot .mk2 > li img{width: 100%;}
    .intro3-2 .bot .list2 li{font-size: 1.6rem;}
}
@media all and (max-width:980px){
    .intro3-2 .bot .mk{flex-wrap: wrap; justify-content: center; gap: 20px;}
    .intro3-2 .bot .mk > li{width: 100%; min-height: 100%;}
    .intro3-2 .bot .mk2 > li img{width: 100%; max-width: 300px;}
}
@media all and (max-width:580px){
    .intro3-2 .top h3{font-size: 3.5rem;}
    .intro3-2 .top h4{font-size: 1.6rem; margin-top: 10px;}
    .intro3-2 .top img{margin: 60px 0; max-width: 260px;}
    .intro3-2 .top p{font-size: 2rem; line-height: 3rem;}
    .intro3-2 .arrow_img{margin: 60px auto;}
    .intro3-2 .bot .mk{margin-top: 20px;}
    .intro3-2 .bot .mk2{margin-top: 50px;}
    .intro3-2 .bot .mk > li{padding: 30px;}
}

.esg1{margin: 0 auto; text-align: center;}
.esg1 h3.s_tit{font-size: 4rem; color: #000; margin-bottom: 40px; text-align: left;}
.esg1 h3 span{color: #3c6;}
.esg1 img{width: 900px;}

@media all and (max-width:1080px){
    .esg1 h3{font-size: 3.5rem;margin-bottom: 20px;}
    .esg1 img{max-width: 100%;}
}
@media all and (max-width:480px){
    .esg1 h3{font-size: 3rem;}
}

.esg_step ul{display: flex; gap: 10px; flex-wrap: wrap; margin-top: 70px;}
.esg_step ul li{width: calc(100%/4 - 38px); text-align: center; border: 1px solid #3c6; padding: 50px 30px 30px; position: relative;}
.esg_step ul li h3{position: absolute; top: -17px; color: #fff; background: #3c6; padding: 5px 20px; font-size: 2.5rem; border-radius: 100px; left: 50%; transform: translateX(-50%); width: 60%;}
.esg_step ul li img{width: 100%;}
.esg_step ul li p{font-size: 1.8rem; color: #000; margin-top: 40px;}
.esg_step ul li.next{width: 30px; padding: 0; display: flex; align-items: center;justify-content: center; border: 0;}
.esg_step ul li.next img{width: 30px;}


@media all and (max-width:1280px){
    .esg_step ul li{padding: 50px 20px 20px;}
    .esg_step ul li h3{width: 80%; font-size: 1.8rem;}
    .esg_step ul li p{font-size: 1.6rem;}
}
@media all and (max-width:1080px){
    .esg_step ul{gap: 50px 10px; margin-top: 40px;}
    .esg_step ul li{width: calc(100%/2 - 45px);}
}
@media all and (max-width:580px){
    .esg_step ul{gap: 30px 10px;}
    .esg_step ul li{width:100%;}
    .esg_step ul li h3{font-size: 2rem;}
    .esg_step ul li.next{transform: rotate(90deg); width: 100%;margin-bottom: 20px;}
}
@media all and (max-width:480px){
    .esg_step ul{gap: 20px;}
    .esg_step ul li{width:100%;}
    .esg_step ul li h3{font-size: 2rem; width: 60%;}
    .esg_step ul li.next{transform: rotate(90deg); width: 100%;margin-bottom: 20px;}
}


#mem {padding:50px; border:10px solid #e5f8eb}
#mem .in-Box {font-size:1.9rem; color:#333; text-align:center; line-height:1.4em; padding-bottom:30px; margin-bottom:30px; border-bottom:1px dashed #3c6;}
#mem .t1 {font-sizE:1.7rem; margin-bottom:1em}
#mem  h4 {font-size:2.0rem; color:#333; margin-bottom:1em; }
#mem ul {padding-top:20px}
#mem ul li {font-size:1.7rem; line-height:1.6em }
#mem ul li + li {margin-top:0.5em}
#mem ul li span {padding-left:2em}
#mem dl {padding-top:50px; }
#mem dl dt {font-size:2.4rem; color:#333; font-weight:700 }
#mem dl dd {margin-top:0.7em;  font-size:1.7rem;  }

@media all and (max-width:768px){
	#mem {padding:30px; border-width:6px}
	#mem ul {padding-top:10px}
	#mem dl {padding-top:30px; }
}


.ytb_wrap{margin: 150px 0 50px;}
.ytb_wrap .inner{position: relative;}
.ytb_wrap .inner::before{content: 'RENEWELLE'; position: absolute; font-size: 13rem; font-family: 'Montserrat'; font-weight: 900; top: -50px; left: 0px; z-index: 10;color: #3c6;line-height: 10rem; opacity: 0.2;}
.ytb_wrap .inner::after{content: 'BIO'; position: absolute; font-size: 13rem; font-family: 'Montserrat'; font-weight: 900; bottom: -50px; right: 0px; z-index: 10;color: #3c6;line-height: 10rem; opacity: 0.2;}
.ytb_wrap .vid{position: relative;padding-top: 45%;width: 80%;height: 0;margin: 0 auto;}
.ytb_wrap  iframe {position: absolute;top: 0;left: 0;width: 100%;height: 100%;}


@media screen and (max-width:1280px){
    .ytb_wrap{margin: 15vw 0 5vw;}
    .ytb_wrap .inner::before{font-size: 10vw;}
    .ytb_wrap .inner::after{font-size: 10vw;}
}

@media screen and (max-width:680px){
    .ytb_wrap .vid{width: 90%; padding-top: 50.7%;}
}


.pro2 .top{display: flex; align-items: center; justify-content: space-between;}
.pro2 .top .lt{width: 40%;  position: relative;}
.pro2 .top .lt:after{content: ''; position: absolute; width:70%; height: 80%; top: 25%; right: -5%; background: #33cc66; border-radius: 10px; z-index: -1;}
.pro2 .top .lt img{width: 100%;border-radius: 10px; overflow: hidden;}
.pro2 .top .rt{width: 55%; color: #222; text-align: center;}
.pro2 .top .rt h3{font-size: 4.5rem;}
.pro2 .top .rt h3 span{display: inline-block; position: relative;}
.pro2 .top .rt h3 span:after{background: #ccf2d9; content: ''; position: absolute;top: 50%; left: 50%; transform: translateX(-50%); width: 110%; height: 50%;z-index: -1;}
.pro2 .top .rt img{margin: 60px 0;}
.pro2 .top .rt p{font-size: 2rem;}
.pro2 .top .rt h4{font-size: 2rem; background: #33cc66; display: inline-block; padding: 5px 20px; border-radius: 100px; color: #fff; margin-top: 20px;}
.pro2 .mid{margin-top: 100px; display: flex; gap: 20px;}
.pro2 .mid .box{width: calc(100%/2 - 10px); padding:50px; background: #fff; box-shadow: 1px 1px 20px 1px rgba(0, 0, 0, 0.05); border-radius: 10px;}
.pro2 .mid .box .tt{color: #222;}
.pro2 .mid .box .tt h3{font-size: 3.5rem; position: relative;display: inline-block;z-index: 10;}
.pro2 .mid .box .tt h3::after{width: 20px; height: 20px; border-radius: 100px; background: #33cc66; content: ''; position: absolute; right: -10px; top: 0px;z-index: -1;}
.pro2 .mid .box .tt p{font-size: 2rem; margin: 20px 0; border-bottom: 1px solid #eee; padding-bottom: 20px;}
.pro2 .mid .box .list ul{display: flex;gap: 10px; flex-wrap: wrap;}
.pro2 .mid .box .list ul li{width: calc(100%/3 - 20px/3); text-align: center;font-size: 1.8rem; background: #8ab653; color: #fff; padding: 30px 10px; border-radius: 10px; font-weight: bold;}
br.mo{display: none;}


@media screen and (max-width:1280px){
    .pro2 .top .rt h3{font-size: 4rem;}
    .pro2 .mid .box{padding: 30px;}
    .pro2 .mid .box .tt p{font-size: 1.8rem;}
    .pro2 .mid .box .list ul li{font-size: 1.6rem;}
}
@media screen and (max-width:1080px){
    .pro2 .top .rt p{font-size: 1.8rem;}
    .pro2 .top .rt h4{font-size: 1.8rem;}
    .pro2 .mid{flex-wrap: wrap;}
    .pro2 .mid .box{width: 100%;}
}
@media screen and (max-width:880px){
    .pro2 .top{flex-wrap: wrap; justify-content: center;}
    .pro2 .top .lt{width: 80%; order: 2;margin-top: 70px;}
    .pro2 .top .rt{width: 100%; order: 1;}
}
@media screen and (max-width:480px){
    .pro2 .top .lt{margin-top: 40px;}
    .pro2 .top .rt h3{font-size: 3.5rem;}
    .pro2 .top .rt img{margin: 30px 0;}
    .pro2 .mid .box .tt h3{font-size: 3rem;}
    .pro2 .mid .box .tt h3::after{width: 15px; height: 15px; right: -7px;}
    .pro2 .mid .box .tt p{font-size: 1.7rem;margin:15px 0 10px; padding-bottom: 10px;}
    .pro2 .mid .box .list ul li{padding: 20px 5px; font-size: 1.5rem;}
    br.mo{display: block;}
}