/* 네비게이션  */
#fp-nav{ left: 40px; text-transform: uppercase; pointer-events: none; }
#fp-nav ul, .fp-slidesNav ul{ width: fit-content; display: flex; flex-direction: column; margin-bottom: -20px; }
#fp-nav ul li, .fp-slidesNav ul li{ display: inline-block; width: auto; height: auto; margin-bottom: 20px; pointer-events: auto; }
#fp-nav ul li:last-of-type, .fp-slidesNav ul li:last-of-type{ display: none; }
#fp-nav ul li a, .fp-slidesNav ul li a{ display: flex; flex-direction: column-reverse; align-items: center; width: auto; height: auto; }
#fp-nav ul li a::before, .fp-slidesNav ul li a::before{ content: ""; display: inline-block; width: 7px; height: 7px; background: #fff; border-radius: 50%; transition: all 0.5s; }
#fp-nav ul li a span, .fp-slidesNav ul li a span{ width: auto; height: auto; background: none; position: static; margin-bottom: 9px; display: none; }
#fp-nav ul li span{ display: inline-block; writing-mode: vertical-rl; transform: rotate(180deg); font-size: 1.5rem; font-weight: 500; color: #fff; letter-spacing: 0; transition: all 0.5s; }
#fp-nav ul li a.active span, .fp-slidesNav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li:hover a.active span{ display: block; width: auto; height: auto; background: none; margin: 0; margin-bottom: 9px; }
#fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span{ width: auto; height: auto; background: none; margin: 0; margin-bottom: 9px; }
#fp-nav ul li a.active::before, .fp-slidesNav ul li a.active::before, #fp-nav ul li:hover a.active::before, .fp-slidesNav ul li:hover a.active::before{ width: 15px; height: 15px; background: none; border: 1px solid #fff; }

/* 네비게이션 - color */
#fp-nav.color ul li a::before, .fp-slidesNav.color ul li a::before{ background: #D9D9D9; }
#fp-nav.color ul li a.active::before, .fp-slidesNav.color ul li a.active::before, #fp-nav.color ul li:hover a.active::before, .fp-slidesNav.color ul li:hover a.active::before{ width: 15px; height: 15px; background: none; border: 1px solid var(--mainColor); }
#fp-nav.color ul li a span, .fp-slidesNav.color ul li a span{ color: var(--mainColor); }

@media screen and (max-width: 1715px){
	#fp-nav{ left: 20px; }
}


/* 
	공통
*/
@media screen and (max-height: 800px){
	#header.color{ background: #fff; }
	#header.on{ background: none; }
}

/* title-box */
.title-box span{ /* font-family: var(--Poppins); */ font-size: 1.7rem; font-weight: 700; color: var(--mainColor); text-transform: uppercase; }
.title-box h3{ font-size: 5.5rem; font-weight: 700; color: #111; line-height: 1.2142; margin: 30px 0 20px; }
.title-box p{ font-size: 2rem; font-weight: 500; color: #222; line-height: 1.5909; }
.title-box .link-box{ margin-top: 110px; }
.title-box .link-box a{ display: inline-block; font-size: 1.6rem; font-weight: 500; color: #fff; background: var(--mainColor); padding: 22px 50px; border-radius: 90px; }

@media screen and (max-width: 1820px){ 
	#main .w1600{ padding: 0 100px; }
}

@media screen and (max-width: 1715px){
	#main .w1600{ padding: 0 75px; }
}

@media screen and (max-width: 1700px){
	#main .w1600.padding{ padding-right: 120px; }

	.title-box h3{ font-size: 5rem; }
	.title-box p{ font-size: 2rem; }
	.title-box .link-box a{ padding: 20px 35px; }
}

@media screen and (max-width: 1650px){
	#main .w1500{ padding: 0 75px; }
}

@media screen and (max-width: 1500px){
	.title-box h3{ font-size: 4.5rem; }
}

@media screen and (max-width: 1300px){
	#main .w1600{ padding-right: 40px; }
	#main .w1600.padding{ padding-right: 40px; }
}

@media screen and (max-width: 1200px){
	#main{ overflow: hidden; }
	#main .w1600{ padding-left: 20px; padding-right: 20px; }
	#main .w1500{ padding: 0 20px; }
	#main .w1600.padding{ padding-right: 20px; }

	.title-box h3{ font-size: 4.5rem; }
	.title-box p{ font-size: 1.7rem; }
	.title-box .link-box{ margin-top: 80px; }
	.title-box .link-box a{ padding: 18px 25px; }
}

@media screen and (max-width: 1000px){
	.title-box .link-box{ margin-top: 20px; }
}

@media screen and (max-width: 650px){
	.title-box h3{ font-size: 3.8rem; }
}


/* visual */
#home{ position: relative; }
#home .visual{ overflow: hidden; }
#home .visual .bg{ height: 100vh; transform: scale(1.2); }
#home .visual .bg01{ background: url("/img/main/main_visual01.jpg") no-repeat center center / cover; }
/* #home .visual .bg02{ background: url("/img/main/main_visual02.jpg") no-repeat center center / cover; } */
#home .visual .bg02{ background: url("/img/main/main_visual04.jpg") no-repeat center center / cover; }
#home .visual .bg03{ background: url("/img/main/main_visual03.jpg") no-repeat center center / cover; }

#home .content-box{ position: absolute; top: 50%; left: 0; right: 0; z-index: 50; transform: translateY(-50%); /* pointer-events: none; */ }
#home .content-box h2{ font-size: 7.5rem; font-weight: 700; color: #fff; line-height: 1.2631; perspective: 1000px; }
#home .content-box h2 span{ display: inline-block; transform: rotateY(90deg) translateZ(0); backface-visibility: hidden; transform-style: preserve-3d; opacity: 0; will-change: transform, opacity; }
#home .content-box p{ /* font-family: var(--Poppins); */ font-size: 2.3rem; font-weight: 300; color: #fff; letter-spacing: 0; margin-top: 30px; overflow: hidden; }
#home .content-box p span{ display: inline-block; transform: translateY(100%); will-change: transform; }

#home .visual.animated .bg{ transform: scale(1); transition: all 2.5s; }
#home .content-box.animated h2 span{ animation: flip 1.3s 1s forwards; }
#home .content-box.animated p span{ animation: up 1.3s 1s forwards; }

#home .content-box .button{ display: inline-block; background: rgba(255, 255, 255, 0.15); border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50px; position: relative; margin-top: 100px; }
#home .content-box .button::after{ content: ""; width: 1px; height: 100%; background: rgba(255, 255, 255, 0.2); position: absolute; top: 50%; left: 50%; z-index: 10; transform: translate(-50%, -50%); }  
#home .content-box button{ width: 85px; height: 70px; background: none; border: none; pointer-events: auto; }

#home .scroll-box{ position: absolute; bottom: 0; left: 50%; z-index: 50; transform: translateX(-50%); text-align: center; }
#home .scroll-box > span{ display: inline-block; font-size: 1.6rem; font-weight: 500; color: #fff; letter-spacing: 0; margin-bottom: 10px; }
#home .scroll-box .bar{ width: 1px; height: 90px; background: rgba(255, 255, 255, 0.38); margin: 0 auto; position: relative; }
#home .scroll-box .bar span{ display: inline-block; width: 8px; height: 8px; background: #fff; border-radius: 50%; position: absolute; top: 0; left: 50%; transform: translateX(-50%); animation: scroll 2.5s linear infinite; will-change: top; }

@keyframes size{
	0%{ transform: scale(1.25); }
	100%{ transform: scale(1); }
}

@keyframes flip{
	0%{ transform: rotateY(90deg) translateZ(0); opacity: 0; }
	100%{ transform: rotateY(0deg) translateZ(0); opacity: 1; }
}

@keyframes up{
	0%{ transform: translateY(100%); }
	100%{ transform: translateY(0); }
}

@keyframes scroll{
	0%{ top: 0; }
	50%{ top: calc(100% - 8px); }
	100%{ top: 0; }
}

@media screen and (max-width: 1600px){
	#home .content-box h2{ font-size: 6rem; }
	#home .content-box p{ font-size: 2rem; margin-top: 20px; }
	#home .content-box .button{ margin-top: 70px; }
	#home .content-box button{ width: 70px; height: 65px; }
}

@media screen and (max-width: 1200px){
	#home .visual .bg{ height: auto; padding-bottom: 70%; }
	/* #home .content-box h2{ font-size: 5rem; } */
	#home .scroll-box > span{ font-size: 1.5rem; }
}

@media screen and (max-width: 850px){
	#home .visual .bg{ padding-bottom: 119%; }
	#home .visual .bg01{ background: url("/img/main/main_visual01_m.jpg") no-repeat center center / cover; }
	#home .visual .bg02{ background: url("/img/main/main_visual02_m.jpg") no-repeat center center / cover; }
	#home .visual .bg03{ background: url("/img/main/main_visual03_m.jpg") no-repeat center center / cover; }
}

@media screen and (max-width: 750px){
	#home .content-box h2{ font-size: 4.5rem; }
	#home .content-box p{ font-size: 1.8rem; }
	#home .content-box .button{ margin-top: 50px; }
	#home .content-box button{ width: 60px; height: 55px; }
}

@media screen and (max-width: 650px){
	#home .visual .bg{ padding-bottom: 119%; }
	#home .visual .bg01{ background: url("/img/main/main_visual01_m.jpg") no-repeat center center / cover; }
	/* #home .visual .bg02{ background: url("/img/main/main_visual02_m.jpg") no-repeat center center / cover; } */
	#home .visual .bg02{ background: url("/img/main/main_visual04_m.jpg") no-repeat center center / cover; }
	#home .visual .bg03{ background: url("/img/main/main_visual03_m.jpg") no-repeat center center / cover; }
}


/* overview */
#overview{ position: relative; overflow: hidden; }
#overview::before{ content: url("/img/main/overview_before.png"); position: absolute; top: -157px; right: -138px; z-index: -10; transform: translate(100%, -100%); opacity: 0; transition: all 1.5s; }
#overview::after{ content: url("/img/main/overview_after.png"); position: absolute; bottom: -660px; left: -352px; z-index: -10; transform: translate(-100%, 100%); opacity: 0; transition: all 1.5s; }

#overview .flex-box{ display: flex; justify-content: space-between; align-items: center; }
#overview .title-box{ width: 38%; }
#overview .figure-box{ width: 760px; }

#overview .figure-box ul{ display: flex; flex-wrap: wrap; justify-content: space-between; margin-top: 40px; }
#overview .figure-box ul li{ width: calc((100% - 40px) / 2); height: 330px; display: flex; flex-direction: column; justify-content: center; align-items: center; border-radius: 15px; overflow: hidden; background: #fff; box-shadow: 0px 0px 25px 0px rgba(0, 101, 87, 0.19); text-align: center; padding: 0 45px; margin-bottom: 40px; position: relative; }
#overview .figure-box ul li::after{ content: ""; width: 100%; height: 100%; background: var(--bg); background-repeat: no-repeat; background-position: center center; background-size: cover; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); clip-path: circle(0%); transition: all 0.8s; }
#overview .figure-box ul li:nth-of-type(odd){ top: 40px; }
#overview .figure-box ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 20; }

#overview .figure-box ul li .relative{ width: 100%; position: relative; }
#overview .figure-box ul li .absolute{ width: 100%; position: absolute; top: 0; left: 0; right: 0; z-index: 10; transition: all 0.5s; will-change: top, transform; }
#overview .figure-box ul li > img{ margin-bottom: 30px; }
#overview .figure-box ul li h6{ font-size: 2.2rem; font-weight: 600; color: #111; transition: all 0.5s; transition-delay: 0.3s; }
#overview .figure-box ul li .relative > h6{ opacity: 0; }
#overview .figure-box ul li p{ font-size: 1.8rem; font-weight: 300; color: #fff; line-height: 1.5; margin-top: 13px; opacity: 0; transition: all 0.8s; }

#overview .figure-box ul li:hover .relative{ color: #fff; }
#overview .figure-box ul li:hover .absolute{ top: -100%; transform: translateY(-100%); }
#overview .figure-box ul li:hover .absolute{ top: 100%; transform: translateY(-100%); }
#overview .figure-box ul li:hover::after{ clip-path: circle(100%); }
#overview .figure-box ul li:hover h6{ color: #fff; transition-delay: unset; }
#overview .figure-box ul li:hover p{ opacity: 1; }

#overview.active::before, #overview.active::after{ transform: translate(0, 0); opacity: 1; }

@media screen and (max-height: 800px){
	#overview{ padding: 100px 0; }
}

@media screen and (max-width: 1800px){
	#overview .figure-box{ width: 50%; }  
}

@media screen and (max-width: 1700px){
	#overview .figure-box ul li{ height: auto; padding: 30px; }
}

@media screen and (max-width: 1600px){
	#overview .figure-box{ width: 55%; }
	/* #overview .figure-box ul li h6{ font-size: 2.2rem; } */
	#overview .figure-box ul li p{ font-size: 1.8rem; }
}

@media screen and (max-width: 1400px){
	/* #overview br{ display: none; } */
}

@media screen and (max-width: 1200px){
	#overview{ padding: 100px 0; } 
	#overview::after{ display: none; }

	#overview .figure-box ul{ margin-top: 0; }
	#overview .figure-box ul li > img{ margin-bottom: 15px; }
	#overview .figure-box ul li h6{ font-size: 2rem; }
	#overview .figure-box ul li p{ font-size: 1.6rem; }
}

@media screen and (max-width: 1000px){
	#overview .flex-box{ flex-direction: column; } 
	#overview .title-box{ width: 100%; padding-bottom: 30px; }
	#overview .figure-box{ width: 100%; } 
}

@media screen and (max-width: 650px){
	#overview .figure-box ul li{ width: calc((100% - 20px) / 2); }
	#overview .figure-box ul li .absolute{ width: calc(100% + 20px); left: -10px; }
}


/* business */
#business{ position: relative; }
#business .half{ width: calc(50% - 255px); }
/* #business .title-box:not(:first-of-type){ display: none; } */

#business .img-box{ position: absolute; width: 50%; height: 100%; top: 0; right: 0; }
#business .img-box::before{ content: ""; width: 100%; height: 100%; background: #fff; position: absolute; top: 0; left: 0; z-index: 20; transform-origin: center left; transition: all 1.3s; transition-delay: 0.8s; }
#business .img-box figure{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; overflow: hidden; }
#business .img-box figure img{ width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; }
#business .img-box figure:not(:first-of-type){ display: none; }

#business .link-list{ margin-top: 110px; }
#business .link-list li{ display: flex; justify-content: flex-end; align-items: center; border-bottom: 1px solid rgba(0, 0, 0, 0.17); padding: 15px 20px; position: relative; }
#business .link-list li:first-of-type{ border-top: 1px solid rgba(0, 0, 0, 0.17); }
#business .link-list li p{ font-size: 2rem; font-weight: 300; color: #111; position: relative; transition: all 0.5s; position: absolute; top: 50%; left: 20px; transform: translateY(-50%); transform-origin: center left; will-change: transform, font-weight; transition: all 0.5s; }
#business .link-list li a{ display: flex; justify-content: space-between; align-items: center; font-size: 1.6rem; font-weight: 500; color: #333; background: #EFEFEF; border-radius: 90px; padding: 16px 20px; opacity: 0; transition: all 0.5s; visibility: hidden; position: relative; }
#business .link-list li a::after{ content: url("/img/main/business_arrow.png"); margin-left: 15px; opacity: 1; transition: all 0.5s; }
#business .link-list li a::before{ content: url("/img/main/business_arrow_on.png"); position: absolute; top: 50%; right: 20px; transform: translateY(-50%); opacity: 0; transition: all 0.5s; }

#business .link-list li.on p{ font-size: 2.2rem; font-weight: 600; color: var(--mainColor); }
#business .link-list li.on a{ opacity: 1; visibility: visible; }
#business .link-list li a:hover{ background: var(--mainColor); color: #fff; }
#business .link-list li a:hover::after{ opacity: 0; }
#business .link-list li a:hover::before{ opacity: 1; }

#business.active .img-box::before{ transform: scaleX(0); opacity: 0; }

@media screen and (max-height: 800px){
	#business .half{ padding: 100px 0; }
}

@media screen and (max-width: 1820px){
	#business .w1600{ padding-right: 0; }
	#business .half{ width: calc(50% - 200px); }
}

@media screen and (max-width: 1500px){
	#business .half{ width: calc(50% - 120px); }

	#business .link-list li{ padding: 15px; }
	#business .link-list li p{ font-size: 1.8rem; left: 15px; }
	#business .link-list li a{ font-size: 1.5rem; padding: 15px; }
	#business .link-list li a::before{ right: 15px; }
	#business .link-list li.on p{ font-size: 2rem; }
}

@media screen and (max-width: 1200px){
	#business{ padding: 100px 0; }
	#business .half{ width: calc(50% - 30px); }
}

@media screen and (max-width: 1000px){
	#business .w1600{ padding-right: 20px; }
	#business .half{ width: 100%; }
	#business .link-list{ margin-top: 30px; }
	#business .img-box::before{ width: calc(100% + 40px); left: -20px; }
	#business .img-box{ width: 100%; position: relative; padding-bottom: 74%; margin-top: 20px; }
	#business .img-box figure{ width: calc(100% + 40px); left: -20px; }
}

@media screen and (max-width: 850px){
	#business .link-list li{ padding: 13px 15px; }
}


/* recruitment */
#recruitment{ background: url("/img/main/recruitment_bg.jpg") no-repeat center center / cover; }
#recruitment .title-box{ text-align: center; }
#recruitment .title-box span{ color: #fff; }
#recruitment .title-box h3{ color: #fff; }
#recruitment .title-box p{ color: #fff; }
#recruitment .title-box ul{ display: flex; justify-content: center; margin-top: 60px; }
#recruitment .title-box li:not(:last-of-type){ margin-right: 20px; }
#recruitment .title-box li a{ display: inline-block; font-size: 1.8rem; font-weight: 500; color: #fff; padding: 20px 55px; border: 1px solid #fff; border-radius: 90px; transition: all 0.5s; }

#recruitment .title-box li a:hover{ background: var(--mainColor); border: 1px solid var(--mainColor); }

@media screen and (max-height: 800px){
	#recruitment{ min-height: 100vh; height: 800px; display: flex; justify-content: center; align-items: center; }
}

@media screen and (max-width: 1200px){
	#recruitment .title-box{ height: 70vh; display: flex; flex-direction: column; justify-content: center; align-items: center; }
	#recruitment .title-box li a{ font-size: 1.8rem; padding: 20px 35px; }
}

@media screen and (max-width: 650px){
	#recruitment .title-box li a{ padding: 18px 30px; }
}


/* news */
#news{ position: relative; overflow: hidden; }
#news::before{ content: url("/img/main/news_before.png"); position: absolute; bottom: -220px; left: -160px; transform: translate(-100%, 100%) rotate(180deg); opacity: 0; transition: all 1.5s; }
#news .flex-box{ display: flex; justify-content: space-between; align-items: center; }

#news .title-box{ width: 550px; margin-top: -100px; position: relative; }
#news .title-box::before{ content: ""; width: 100vw; height: 100vh; background: #F2F7F6; position: absolute; top: calc(50% + 50px); right: 0; z-index: -5; transform: translateY(-50%); }

#news .news-box{ width: calc(100% - 640px); }
#news .news-box ul li{ padding: 30px 50px 34px; border-bottom: 1px solid #DADADA; position: relative; }
#news .news-box ul li:first-of-type{ border-top: 1px solid var(--mainColor); }
#news .news-box ul li h6, #news .news-box ul li p{ width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#news .news-box ul li h6{ font-size: 2.2rem; font-weight: 600; color: #222; line-height: 1.4; transition: color 0.5s; }
#news .news-box ul li p{ font-size: 1.7rem; font-weight: 300; color: #333; line-height: 1.4; margin: 3px 0 15px; }
#news .news-box ul li span{ font-size: 1.6rem; font-weight: 300; color: #666; }
#news .news-box ul li span::before{ content: url("/img/main/news_icon.png"); display: inline-block; margin-right: 3px; position: relative; top: 2px; }
#news .news-box ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

#news .news-box ul li:hover h6{ color: var(--mainColor); }
#news.active::before{ transform: translate(0, 0) rotate(0); opacity: 1; }

@media screen and (max-height: 800px){
	#news{ padding: 100px 0; }
	#news .title-box::before{ height: calc(100vh + 200px); }
}

@media screen and (max-width: 1600px){
	#news .news-box ul li{ padding: 30px 30px 34px; }
	#news .news-box ul li h6{ font-size: 2rem; }
}

@media screen and (max-width: 1500px){
	#news .title-box{ width: 400px; }
	#news .news-box{ width: calc(100% - 490px); }
}

@media screen and (max-width: 1300px){
	#news .news-box{ width: calc(100% - 440px); }
}

@media screen and (max-width: 1200px){
	#news{ padding: 100px 0; }
	#news .title-box{ width: 350px; }
	#news .news-box{ width: calc(100% - 370px); }
	#news .news-box ul li{ padding: 20px 20px 24px; }
	#news .news-box ul li h6{ font-size: 1.9rem; }
	#news .news-box ul li p{ font-size: 1.6rem; }
}

@media screen and (max-width: 1000px){
	#news br{ display: none; }
	#news .flex-box{ flex-direction: column; }
	#news .title-box{ width: 100%; margin-top: 0; padding-bottom: 20px; }
	#news .title-box::before{ display: none; }
	#news .title-box .link-box{ text-align: right; margin-top: 50px; }
	#news .news-box{ width: 100%; }
}


/* esg */
#esg{ position: relative; background: rgba(0, 101, 87, 0.11); }
#esg .title-box{ text-align: center; }

#esg ul{ display: flex; justify-content: space-between; margin-top: 70px; }
#esg ul li{ width: calc((100% - 81px) / 4); }
#esg ul li .box{ position: relative; top: 0; border-radius: 10px; overflow: hidden; color: #fff; padding-bottom: 124%; transition: all 0.5s; }
#esg ul li .box::before{ content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); position: absolute; top: 50%; left: 50%; z-index: 3; transform: translate(-50%, -50%); opacity: 0; transition: all 0.5s; }
#esg ul li .box > img{ width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); object-fit: cover; }
#esg ul li a{ position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; }

#esg ul li .position{ width: 100%; height: 100%; position: absolute; top: 50%; left: 50%; z-index: 5; transform: translate(-50%, -50%); display: flex; align-items: end; padding: 45px 35px; }
#esg ul li .relative{ width: 100%; position: relative; }
#esg ul li .absolute{ width: 100%; position: absolute; top: 0; left: 0; right: 0; transition: all 0.5s; will-change: top, transform; }
#esg ul li h6{ font-size: 2.2rem; font-weight: 600; }
#esg ul li .relative > h6{ opacity: 0; } 
#esg ul li p{ font-size: 1.8rem; font-weight: 300; line-height: 1.5; margin-top: 18px; opacity: 0; transition: all 0.5s; }

#esg ul li:hover .box{ top: -20px; }
#esg ul li .box:hover::before{ opacity: 1; }
#esg ul li:hover .absolute{ top: 100%; transform: translateY(-100%); }
#esg ul li:hover p{ opacity: 1; }

@media screen and (max-height: 800px){
	#esg{ padding: 100px 0; }
}

@media screen and (max-width: 1600px){
	#esg ul li .box{ padding-bottom: 160%; }
}

@media screen and (max-width: 1350px){
	#esg br{ display: none; }
	#esg ul li .box{ padding-bottom: 180%; }
	#esg ul li .position{ padding: 30px; }
}

@media screen and (max-width: 1200px){
	#esg{ padding: 100px 0; } 
	#esg ul{ margin-top: 50px; }
	#esg ul li{ width: calc((100% - 60px) / 4); }
	#esg ul li h6{ font-size: 2rem; }
	#esg ul li p{ font-size: 1.7rem; }
}

@media screen and (max-width: 1000px){
	#esg ul{ flex-wrap: wrap; margin-bottom: -20px; }
	#esg ul li{ width: calc((100% - 20px) / 2); margin-bottom: 20px; }
	#esg ul li .box{ padding-bottom: 60%; }
	#esg ul li .box > img{ transition: transform 0.5s; }

	#esg ul li:hover .box > img{ transform: translate(-50%, -50%) scale(1.1); }
	#esg ul li:hover .box{ top: 0; } 
}

@media screen and (max-width: 800px){
	#esg ul li{ width: 100%; }
	#esg ul li .box{ height: 250px; padding-bottom: 0; }
}

@media screen and (max-width: 600px){
	#esg ul li .box{ height: 200px;  }
}