/* GSAP Style 01 — module.css (세경하이테크 레퍼런스 메인 전용)
 * 레퍼런스 layout.css 변수 중 모듈에서 필요한 값만 :root로 재정의
 * (--main-color/#458117 등은 레퍼런스 브랜드 그린 — 원본 1:1 재현을 위해 모듈 스코프 변수 사용)
 * 이미지는 모듈 폴더 기준 상대 경로 images/ 사용 (module.css는 토큰 치환 불가) */
:root{
	--main-color: #458117;        /* 레퍼런스 브랜드 그린 (layout.css:14) */
	--secondary: #72A730;       /* 레퍼런스 보조 그린 (layout.css:15) */
	--header-height: 100px;       /* 레퍼런스 헤더 높이 (layout.css:21) */
	--area-padding: 30px;
	--transition-custom: all 0.4s ease-in-out;
}
@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2022-08-08
******************************************************** */
/* ******************  메인 비주얼 ********************** */
@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateX(100px); 
		transform: translateX(100px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateX(0); 
		transform: translateX(0); 
	}
}
@keyframes text-active-animation-reverse {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateX(-100px); 
		transform: translateX(-100px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateX(0); 
		transform: translateX(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box .main-tit{color:var(--primary); font-size:2rem; font-weight:600; letter-spacing:-0.02em; line-height:1.5; margin-bottom:1.5rem;}
.main-tit-box .main-sub-tit{font-size:3.7rem; line-height:1.23; letter-spacing:-0.025em; color:#222; font-weight:700; margin-bottom:3.5rem;}
.main-tit-box .main-txt{font-size:1.4rem; line-height:1.66; letter-spacing:-0.02em; color:#888; font-weight:400;}
/* white ver */
.main-tit-box.white .main-txt{color:rgba(255,255,255,0.5)}

/* effect */
.main-txt-effect{transition:all 1.5s; transition-delay:0.3s;}
.main-tit-box .main-tit .main-txt-effect{background: linear-gradient(90deg, var(--primary), var(--primary) 50%, rgba(69,129,23,0.2) 0); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position: 100%;}
.main-tit-box .main-sub-tit .main-txt-effect{background: linear-gradient(90deg, #000, #000 50%, rgba(0,0,0,0.2) 0); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position: 100%;}
.main-tit-box .main-txt .main-txt-effect{background: linear-gradient(90deg, #888, #888 50%, rgba(136,136,136,0.2) 0); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-size: 200% 100%; background-position: 100%;}

/* animated */
.animated .main-txt-effect{background-position: 0% !important;}

/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 가로 넘침 클립 (레퍼런스 #wrap{overflow:hidden} 대체 — clip은 스크롤 컨테이너를 만들지 않음) */
#mainContent{overflow-x:clip; position:relative;}

/* -------- 메인 컨텐츠 :: 컨텐츠1 -------- */
#mainContent1{display: flex; align-items:center; will-change: auto;}
#mainContent1 > .area-middle{width:100%;}

.main-info-con {
    position: relative;
    background: #f5f5f5;
    margin-top: 7rem;
    transform: translateX(150%);
    transition: all 1.5s;
    transition-delay: 0.3s;
    border-radius: 15rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.info-list-con{position: relative; display: flex; padding:75px 0; box-sizing:border-box;}
.info-list-con .list-item{width:22.5rem; opacity:0; transform:translateY(50px); transition:all 1.5s;}
.info-list-con .list-item .tit{font-size:1.6rem; line-height:1.5; letter-spacing:0; font-weight:600; color:var(--primary); margin-bottom:1rem;}
.info-list-con .list-item .info{font-size:4rem; line-height:1.33; letter-spacing:-0.04em; font-weight:700; color:#000; margin-bottom:1rem;}
.info-list-con .list-item .plus-txt{font-size:1.3rem; line-height:1.5; letter-spacing:-0.05em; font-weight:400; color:#888;}

.info-list-con .info-logo{position: absolute; top: 0; right: 50%; width: 100vw; transform: translate(50%, calc(-100% + 6px)); text-align: right;}
.info-list-con .info-logo svg{/* width:100%; */ max-width:calc(100% - (2 * var(--area-padding)))}

.info-link-circle {
    position: absolute;
    top: -50%;
    right: 97px;
    z-index: 222;
    transform: translateY(50%);
    display: flex;
    flex-direction: column;
    gap: 0;
}
.info-link-circle .circle{display:flex;flex-direction:column;width:240px; height:240px;border-radius:100%; background:var(--primary); transform:translateY(40rem);}
.info-link-circle .circle:before{position: absolute; content:'\eb3b'; font-family:'xeicon'; top:0; left:50%; transform:translateX(-50%); height:4rem; line-height:4rem; font-size:2.4rem; color:#fff; opacity:0; transition:all 0.8s;}
.info-link-circle .circle .tit-box{position: absolute; top:50%; left:50%; transform:Translate(-50%, -50%); text-align:center; color:#fff; opacity:0; transition:all 0.8s; transition-delay:2s;}
.info-link-circle .circle .tit-box .tit{font-size:2rem; line-height:1.2; letter-spacing:0; font-weight:600;}
.info-link-circle .circle .tit-box .tit-en{font-size:1.3rem; line-height:1.5; letter-spacing:-0.05; font-weight:500; margin-top:1rem; opacity:0.5;}

.info-link-circle .circle:nth-child(1){/* background:var(--primary); backdrop-filter: blur(20px); */ /* transform:translateY(-40rem); */}
.info-link-circle .circle:nth-child(1):before{display: none;}
.info-link-circle .circle:nth-child(2){/* background:rgba(114, 162, 53, 0.55); backdrop-filter: blur(20px); */ /* transform:translateY(-20rem); */}
.info-link-circle .circle:nth-child(3){/* background:rgba(255,255,255,0.5); backdrop-filter: blur(20px); */ /* transform:translateY(0rem); */}
.info-link-circle .circle:nth-child(3):before{color:var(--secondary);}
.info-link-circle .circle:nth-child(3) .tit-box{color:var(--primary);}

/* animated */
.animated .main-info-con{transform:translateX(0);}
.animated .info-list-con .list-item{opacity:1; transform:translateY(0px);}
.animated .info-list-con .list-item:nth-child(1){transition-delay:1s}
.animated .info-list-con .list-item:nth-child(2){transition-delay:1.2s}
.animated .info-list-con .list-item:nth-child(3){transition-delay:1.4s}

.animated .info-link-circle .circle:nth-child(1){animation: mainConCircle03 1.5s linear both; animation-delay:1.4s;}
.animated .info-link-circle .circle:nth-child(1):before,
.animated .info-link-circle .circle:nth-child(1) .tit-box{transition-delay:1.5s;}

.animated .info-link-circle .circle:nth-child(2){animation: mainConCircle02 1.5s linear both; animation-delay:1.3s;}
.animated .info-link-circle .circle:nth-child(2):before,
.animated .info-link-circle .circle:nth-child(2) .tit-box{transition-delay:2s;}

.animated .info-link-circle .circle:nth-child(3){animation: mainConCircle01 1.5s linear both; animation-delay:1.2s;}
.animated .info-link-circle .circle:nth-child(3):before,
.animated .info-link-circle .circle:nth-child(3) .tit-box{transition-delay:2.3s;}

.animated .info-link-circle .circle:before,
.animated .info-link-circle .circle .tit-box{opacity:1;}

@keyframes mainConCircle01 {
	0% { transform:translateY(-4rem); opacity:0}
	33% { transform:translateY(0rem); opacity:0}
	66% { transform:translateY(2rem); opacity:0}
	100% { transform:translateY(-4rem); opacity:1; background:rgba(255,255,255,0.5); backdrop-filter: blur(20px);}
}
@keyframes mainConCircle02 {
	0% { transform:translateY(-4rem); opacity:0}
	33% { transform:translateY(0rem); opacity:0}
	66% { transform:translateY(2rem); opacity:1; background:rgba(114, 162, 53, 0.55); backdrop-filter: blur(20px);}
	100% { transform:translateY(-2rem); opacity:1; background:rgba(114, 162, 53, 0.55); backdrop-filter: blur(20px);}
}
@keyframes mainConCircle03 {
	0% { transform:translateY(-4rem); opacity:0}
	33% { transform:translateY(0rem); opacity:1; background:var(--primary); backdrop-filter: blur(20px);}
	66% { transform:translateY(0rem); opacity:1; background:var(--primary); backdrop-filter: blur(20px);}
	100% { transform:translateY(0rem); opacity:1; background:var(--primary); backdrop-filter: blur(20px);}
}

@media all and (max-width:1024px){
	#mainContent1 .main-tit-box{width:calc(100% - 30rem);}
}

/* -------- 메인 컨텐츠 :: 컨텐츠2 -------- */
#mainContent2{position: relative; z-index:1; padding:16rem 0 10rem;}
.prd-cover-list{position: relative; display: flex; /* border-radius: 6rem 0 6rem 0; */ overflow:hidden; /* background:#000; */ margin-top:14rem;}
.prd-cover-list .list-item{width:25%; position: relative; /* overflow:hidden; */ /* opacity:0; */ /* transform:translateY(100%); */ /* transition:all 0.8s 0.5s linear; */ /* background:#000; */}
.prd-cover-list .list-item .inner{position: relative; width:100%; height:0; padding-top:205.26%; z-index:1;}
.prd-cover-list .list-item .inner:before{position: absolute; content:''; width:100%; height:100px; background:#fff; left:0; top:0px; /* transition:all 0.25s 0.5s linear; */}
.prd-cover-list .list-item .inner:after{position: absolute; content:''; width:100%; height:100px; background:#fff; left:0; bottom:0px; /* transition:all 0.25s 0.5s linear; */}
.prd-cover-list .list-item .inner .line{position: absolute; content:''; width:1px; height:100%; background:#fff; left:0; top:0;}
.prd-cover-list .list-item:nth-child(1) .inner .line{display: none;}
.prd-cover-list .list-item .inner .txt-box{position: absolute; bottom:0; left:0; width:100%; height:calc(100% - 100px); display: flex; flex-direction:column; justify-content:flex-end; padding:6rem; box-sizing:border-box;}
.prd-cover-list .list-item .inner .txt-box .tit{font-size:2.8rem; line-height:1.3; letter-spacing:-0.02em; color:#fff; font-weight:500;}
.prd-cover-list .list-item .inner .txt-box .txt{font-size:1.5rem; line-height:1.73; letter-spacing:-0.02em; color:#fff; font-weight:200; margin-top:2rem;}

.prd-cover-list .list-item .inner .plus{position: absolute; width:9rem;height:9rem; background:#fff; background: radial-gradient(circle at 0 0, transparent 71%, #fff 72%); }
.prd-cover-list .list-item:nth-child(1) .inner .plus{top:99px; left:0; transform:rotate(180deg);}
.prd-cover-list .list-item:nth-child(4) .inner .plus{bottom:99px; right:0; transform:rotate(0deg);}

.prd-cover-list .list-item .bg{position: absolute; width:100%; height:calc(100% + 20rem); top:-20rem; left:0; background-repeat:no-repeat !important; background-size:cover !important; transition:opacity 0.4s; /* will-change:background-image; */ /* background:#000; */}

/* even */
.prd-cover-list .list-item:nth-child(even) .inner{/* transform:translateY(-5rem); */}
.prd-cover-list .list-item:nth-child(even) .inner .txt-box{bottom:100px;}
.prd-cover-list .list-item:nth-child(even) .inner:before{top:-100px;}
/* .prd-cover-list .list-item:nth-child(even) .inner:before{top:-100px; height:100px} */
/* odd */
.prd-cover-list .list-item:nth-child(odd) .inner{/* transform:translateY(5rem); */}
.prd-cover-list .list-item:nth-child(odd) .inner:after{bottom:-100px;}
/* .prd-cover-list .list-item:nth-child(odd) .inner:before{bottom:0;}
.prd-cover-list .list-item:nth-child(odd) .inner:after{position: absolute; content:''; width:100%; height:11rem; background:#fff; left:0; transition:all 0.25s 0.5s linear; top:-6.5rem;} */
/* .prd-cover-list .list-item:nth-child(odd) .inner .txt-box{bottom:10rem;} */
/* nth-child */
.prd-cover-list .list-item:nth-child(1){ border-radius:6rem 0 0 0}
.prd-cover-list .list-item:nth-child(1) .bg{background-image:url("/wp-content/themes/gb/components/page-modules/home/gsap-style-01/images/main-prd-bg01.webp"); background-position: 0% center;}
.prd-cover-list .list-item:nth-child(2) .bg{background-image:url("/wp-content/themes/gb/components/page-modules/home/gsap-style-01/images/main-prd-bg02.webp"); background-position: 33.33% center;}
.prd-cover-list .list-item:nth-child(3) .bg{background-image:url("/wp-content/themes/gb/components/page-modules/home/gsap-style-01/images/main-prd-bg03.webp"); background-position: 66.66% center;}
.prd-cover-list .list-item:nth-child(4) .bg{background-image:url("/wp-content/themes/gb/components/page-modules/home/gsap-style-01/images/main-prd-bg04.webp"); background-position: 100% center;}

/* cover */
.main-prd-img-box{position: relative; background:#000; /* border-radius: 6rem; */}
.prd-hover-bg{position: absolute; top:0; left:0; width:100%; height:100%; border-radius:6rem 0 6rem 0; overflow:hidden;}
.prd-hover-bg .list-item{position: absolute; width:100%; height:calc(100% + 20rem); top:-20rem; left:0; background:no-repeat; background-size:cover; transition:opacity 0.4s; opacity:0;}
.prd-hover-bg .list-item:nth-child(1){background-image:url("/wp-content/themes/gb/components/page-modules/home/gsap-style-01/images/main-prd-bg01.webp"); background-position: 0% center;}
.prd-hover-bg .list-item:nth-child(2){background-image:url("/wp-content/themes/gb/components/page-modules/home/gsap-style-01/images/main-prd-bg02.webp"); background-position: 33.33% center;}
.prd-hover-bg .list-item:nth-child(3){background-image:url("/wp-content/themes/gb/components/page-modules/home/gsap-style-01/images/main-prd-bg03.webp"); background-position: 66.66% center;}
.prd-hover-bg .list-item:nth-child(4){background-image:url("/wp-content/themes/gb/components/page-modules/home/gsap-style-01/images/main-prd-bg04.webp"); background-position: 100% center;}

/* animated */
/* #mainContent2.animated .prd-cover-list .list-item{opacity:1; transform:translateY(0);} */
/* #mainContent2.animated .prd-cover-list .list-item:nth-child(odd) .inner:after{top:-11rem;}
#mainContent2.animated .prd-cover-list .list-item:nth-child(even) .inner:before{height:10rem} */
/* #mainContent2.animated .prd-cover-list .list-item:nth-child(1){ border-radius:5rem 0 0 0} */

@media all and (max-width:1280px){
	.prd-cover-list .list-item .inner .txt-box{padding:3rem;}
	.prd-cover-list .list-item .inner .txt-box .tit{font-size:2rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠3 -------- */
#mainContent3{position:relative;margin-bottom:10rem;padding-top:58rem;padding-bottom:40rem;}
.main-global-bg {
    position: absolute;
    width: 348rem;
    top: 0;
    left: 76%;
    transform: translateX(-50%);
}
.main-global-bg .bg{position: absolute; width:100%; height:0; padding-top:53.13%; opacity:0; transition:all 0.8s;}
.main-global-bg .bg img{position: absolute; top:0; left:0; width:100%;}
.main-global-bg .country{position: absolute; top:50%; left:50%; opacity:0; transform:translate(-50%, -50%) scale(0); transition:all 0.6s;}
.main-global-bg .country .txt{position: absolute; top:50%; transform:translateY(-50%); font-size:1.5rem; line-height:1.5; letter-spacing:-0.02em; color:#000; font-weight:500;}
.main-global-bg .country .dots{position: relative; display: block; width:6px; height:6px; border-radius:50%; background:#000;}
.main-global-bg .country .dots:before{position: absolute; content:''; width:3rem; height:3rem; border:1px solid #000; border-radius:50%; top:50%; left:50%; transform:translate(-50%, -50%);}
.main-global-bg .country .wave{position: absolute; width:3rem; height:3rem; top:50%; left:50%; transform:translate(-50%, -50%); border:1px solid var(--secondary); border-radius:50%; opacity:0.3;}

@keyframes countryWave {
	0% {
		opacity: 0.3; 
		width:3rem;
		height:3rem;
	}
	30%{
		opacity: 0.3; 
	}
	80%{
		opacity: 0; 
	}
	100% {
		opacity: 0; 
		width:90rem;
		height:90rem;
	}
}
@keyframes countryWaveM {
	0% {
		opacity: 0; 
		width:6px;
		height:6px;
	}
	30%{
		opacity: 0.1; 
	}
	80%{
		opacity: 0; 
	}
	100% {
		opacity: 0; 
		width:30px;
		height:30px;
	}
}

/* ***** 나라별 위치 ***** */
/* Korea */
.main-global-bg .country.country01{margin-top:-13.7rem; margin-left:-43.3rem; transition-delay:0.8s;}
.main-global-bg .country.country01 .txt{right:0; margin-right:3rem; color:var(--secondary)}
.main-global-bg .country.country01 .dots{width:10px; height:10px; background:var(--secondary);}
.main-global-bg .country.country01 .dots:before{border-color:var(--secondary);}
/* Japan */
.main-global-bg .country.country02{margin-top:-12rem; margin-left:-33rem; transition-delay:1.1s;}
.main-global-bg .country.country02 .txt{left:0; margin-left:3rem;}
/* China */
.main-global-bg .country.country03{margin-top:3rem; margin-left:-57.5rem; transition-delay:1.4s;}
.main-global-bg .country.country03 .txt{left:0; margin-left:3rem;}
/* Veitnam */
.main-global-bg .country.country04{margin-top:5rem; margin-left:-63.5rem; transition-delay:1.7s;}
.main-global-bg .country.country04 .txt{right:0; margin-right:3rem;}

/* ***** 타이틀 ***** */
.main-global-bg + .area-box{position: relative; padding-top:58rem; padding-bottom:40rem;}
.main-global-bg + .area-box .global-txt-box{position: relative; display: block; width:50%; margin-left:50%;}

.global-txt-box .pointer-more {
    position: relative;
    bottom: 0;
    width: 230px;
    height: 230px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s ease-in-out;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 3rem;
}
.global-txt-box .pointer-more .inner-circle{position: relative; display: block; width:160px; height:160px; background:rgba(85,148,36,0.6); backdrop-filter:blur(5px); border-radius:50%;}
.global-txt-box .pointer-more .inner-circle:before{position: absolute; content:'\e907'; font-family:'xeicon'; font-size:4.8rem; color:#fff; top:50%; left:50%; transform:translate(-50%, -50%) rotate(-45deg);}
.global-txt-box .pointer-more svg{position: absolute; left:50%; top:50%; transform: translate(-50%,-50%);  width:100%; height:100%;}
.global-txt-box .pointer-more svg *{fill:var(--primary); width:100%; height:100%;}

.global-txt-box .pointer-circle{opacity:0; visibility: hidden;}
.global-txt-box .pointer-more{/* transform: translate(-50%,-50%) scale(1.0); */ visibility: visible; opacity: 1;}
.global-txt-box .pointer-more svg{animation: textRotate 10s linear infinite;}

/* ***** 로고 ***** */
.main-partner-logo{position: relative;}
.flow-logo { display: flex; justify-content: flex-start; white-space: nowrap; /* overflow: hidden; */ transition: 0.3s; margin:7rem 0;}
.flow-logo.reverse{justify-content: flex-end;}
.flow-logo .flow-item {display: flex; align-items:center; transition:all 2.5s linear;}
.flow-logo .flow-item{transform:translateX(150%);}
.flow-logo.reverse .flow-item{transform:translateX(-150%);}

.flow-logo .flow-item .list-item{margin:0 5rem;}
.flow-logo:not(.reverse) .flow-item .list-item:first-child{/* margin-left:0; */}
.flow-logo:not(.reverse) .flow-item .list-item:last-child{margin-right:0;}
.flow-logo .flow-item .list-item span{display: flex; align-items:Center;}

@keyframes textLoop {
	0% {
		transform: translate3d(0%, 0, 0);
	}
	100% {
		transform: translate3d(-100%, 0, 0);
	}
}
@keyframes textLoopReverse {
	0% {
		transform: translate3d(0%, 0, 0);
	}
	100% {
		transform: translate3d(100%, 0, 0);
	}
}

/* animated */
.main-global-bg.animated .bg{opacity:1;}
.main-global-bg.animated .country{opacity:1; transform:translate(-50%, -50%) scale(1);}
.main-global-bg.animated .country .wave{animation: countryWave 7s cubic-bezier(1, 2, 0.66, 3) infinite;}
.main-global-bg.animated .country .wave.wave01{animation-delay:1s;}
.main-global-bg.animated .country .wave.wave02{animation-delay:2s;}
.main-global-bg.animated .country .wave.wave03{animation-delay:3s;}
.main-global-bg.animated .country .wave.wave04{animation-delay:4s;}
.main-global-bg.animated .country .wave.wave05{animation-delay:5s;}
.main-global-bg.animated .country .wave.wave06{animation-delay:6s;}
.main-global-bg.animated .country .wave.wave07{animation-delay:7s;}

.main-partner-logo.animated .flow-logo .flow-item{transform:translateX(0%);}
.main-partner-logo.animated .flow-logo.reverse .flow-item{transform:translateX(0%);}
.main-partner-logo.animated .flow-logo .flow-item{animation: textLoop 20s linear infinite; animation-delay:2.5s;}
.main-partner-logo.animated .flow-logo.reverse .flow-item{animation: textLoopReverse 20s linear infinite; animation-delay:2.5s;}

@media all and (max-width:1280px){
	.main-global-bg{position: relative; width:100%; top:auto; left:auto; transform:none;}
	.main-global-bg + .area-box{padding-bottom:3rem; padding-top:55%;}
	.main-global-bg + .area-box .global-txt-box{width:100%; margin-left:0;}

	.global-txt-box .pointer-more{position: relative; transform:none; margin-top:3rem; width:136px; height:136px;}
	.global-txt-box .pointer-more .inner-circle{width:99px; height:99px;}

	.main-global-bg .country .txt,
	.main-global-bg .country .dots:before{display: none;}
	.main-global-bg.animated .country .wave{animation: countryWaveM 7s cubic-bezier(1, 2, 0.66, 3) infinite; width:6px; height:6px; border:none; background:var(--primary); opacity:0;}

	.main-global-bg .country.country01 .dots{width:6px; height:6px;}

	.main-global-bg .country.country01{margin-top: -4.7rem; margin-left: -14.6rem;}
	.main-global-bg .country.country02{margin-top: -4rem; margin-left: -11rem;}
	.main-global-bg .country.country03{margin-top: 0rem; margin-left: -18rem;}
	.main-global-bg .country.country04{margin-top: 1.5rem; margin-left: -21rem;}
}

/* -------- 메인 컨텐츠 :: 컨텐츠4,5 -------- */
#mainBottom{position: relative; width:100%; height:100vh; overflow:hidden;}
.main-bottom-banner{position: absolute; width:100%; height:100vh;}

#mainContent4 .main-tit-box .main-tit{color:var(--secondary);}
.main-content4-bg{position: absolute; top:0; left:0; width:100%; height:100%; background:no-repeat center right; background-size:cover; background-image:url("/wp-content/themes/gb/components/page-modules/home/gsap-style-01/images/main-esg-bg.webp");}
#mainContent4{/* transform:translateX(100%); */ height:100vh; overflow:hidden; width:0; right:0;}
/* #mainContent4:before{position: absolute; content:''; width:100%; height:100%; top:0; left:0; transform:translateX(-100%); background:#fff;} */
.main-content4-con{position: relative; height:100%; width:100vw;}
#mainContent4 .area-box{/* position: relative; */ height:100%;}
#mainContent4 .main-bottom-inner{flex-direction: column; align-items:center; justify-content: center;}
#mainContent4 .main-circle-menu-list{margin-top:10rem;}
.esg-bottom-inner{transform:translateX(100vw);}

.main-content5-bg{position: absolute; bottom:0; left:0; width:100%; height:100%; background:no-repeat center left; background-size:cover; background-image:url("/wp-content/themes/gb/components/page-modules/home/gsap-style-01/images/main-recruit-bg.webp");}
#mainContent5{/* transform:translateX(-100%); */ height:0; overflow:hidden; width:100%; bottom:0;}
/* #mainContent5:before{position: absolute; content:''; width:100%; height:100%; top:0; right:0; transform:translateX(100%); background:#fff;} */
.main-content5-con{position: relative; height:100%; width:100vw;}
#mainContent5 .inner-area{height:100%; max-width:1420px; margin:auto;}
#mainContent5 .main-tit-box{width:40%}
#mainContent5 .main-bottom-inner{justify-content:space-between;}
.recruit-bottom-inner .main-tit-box{transform:translateX(-100vw);}
.recruit-bottom-inner .recruit-circle-list{transform:translateX(100vw);}

.main-bottom-inner{display: flex; align-items:center; width:100%; height: 100%; }
.main-circle-menu-list{display: flex; flex-wrap:wrap; width:60%;justify-content:center}
.main-circle-menu-list .list-item{position: relative; width:calc(33.33% - 2px); /* margin:1px; */}
.main-circle-menu-list .list-item a{position: relative; display: block; width:100%; height:0; padding-top:calc(100% - 2px); border-radius:50%; border:1px solid #fff; transition:var(--transition-custom); box-sizing:border-box;}
.main-circle-menu-list .list-item a .txt{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); font-size:2.4rem; line-height:1.3; letter-spacing:-0.02em; color:#fff; font-weight:600; opacity:0;}
.main-circle-menu-list .list-item a.color{background:var(--primary); border-color:var(--primary);}

.main-circle-menu-list .list-item a:hover{backdrop-filter:blur(20px); background:rgba(255,255,255,0.15); border-color:#fff;}

#mainContent4 .main-circle-menu-list .list-item:nth-child(2){transform:translateX(-100%);}

/* #mainContent5 .main-circle-menu-list{position: relative;}
#mainContent5 .main-circle-menu-list .list-item{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%);} */
#mainContent5 .main-circle-menu-list .list-item:nth-child(1){transform:translateX(100%) translateY(0%);}
#mainContent5 .main-circle-menu-list .list-item:nth-child(2){transform:translateX(0%) translateY(0%);}
#mainContent5 .main-circle-menu-list .list-item:nth-child(3){transform:translateX(-100%) translateY(0%);}
/* ==========================================================================
 * GB 헤더 연동 — white 슬라이드에서 헤더 텍스트 전환
 * (module.js가 #header.white-ver 토글 → GB 헤더 테마 변수 --ht-text0 오버라이드)
 * ========================================================================== */
#header.white-ver{--ht-text0:#222222;--ht-text:#222222;}
#header.white-ver .header-lang-list li a{color:var(--ht-text,#222);}

/* ==========================================================================
 * [반응형] 레퍼런스 main-responsive.css 통합 (태블릿/모바일)
 * - 비주얼 이미지는 picture(.main-visual-picture) 전환 규칙으로 대체 적용
 * - var(--primary) 원본 1:1 재현
 * ========================================================================== */

/* -------- 컨텐츠5 :: 1480px 이하 -------- */
@media all and (max-width:1480px){
	#mainContent5 .inner-area{width:100%; max-width:none; padding:var(--area-padding);}
}

/* -------- 800px 이하 (태블릿/모바일) -------- */
@media all and (max-width: 800px){

	/* 컨텐츠 :: 공통 타이틀 */
	.main-tit-box .main-tit{font-size:1.4rem}
	.main-tit-box .main-sub-tit{font-size:2.3rem; margin-bottom:1.5rem;}

	/* 컨텐츠1 (회사소개/카운트) */
	#mainContent1{height:auto !important; padding-top:12rem;}
	#mainContent1 .main-tit-box{width:100%;}
	.main-info-con{background:transparent; margin-top:6rem;}
	.main-info-con:before,
	.main-info-con:after{display:none;}
	.info-link-circle{position:relative;width:100%;top:0;right:auto;transform:none;}
	.info-link-circle .circle{position:relative;padding-top:20px;border-radius:10rem;animation:none!important;transform:translateY(0rem);width:100%;height:180px;}
	.info-link-circle .circle:nth-child(2){transform:translateY(-40px);}
	.info-link-circle .circle:nth-child(3){transform:translateY(-80px);}
	.info-link-circle .circle:nth-child(1){background:var(--primary); backdrop-filter:blur(20px);}
	.info-link-circle .circle:nth-child(2){background:rgba(114, 162, 53, 0.55); backdrop-filter:blur(20px);}
	.info-link-circle .circle:nth-child(3){background:rgba(255,255,255,0.5); backdrop-filter:blur(20px);}
	.animated .info-link-circle .circle:before,
	.animated .info-link-circle .circle .tit-box{transition-delay:0s !important;}
	.info-list-con{position:relative; flex-direction:column;padding:0;gap:32px}
	.info-list-con:before{position:absolute; content:''; width:100vw; height:100%; background:#f5f5f5; top:0; left:50%; transform:translateX(-50%);}
	.info-list-con .info-logo{text-align:center; top:0}
	.info-list-con .list-item{width:100%; text-align:center; margin-bottom:0rem;}
	.info-list-con .list-item:last-child{margin-bottom:0;}
	.info-list-con .list-item .info{font-size:3rem}

	/* 컨텐츠2 (What we do) */
	#mainContent2{padding-top:0}
	.main-prd-img-box{background:#fff;}
	.prd-cover-list{display:block; margin-top:5rem;}
	.prd-cover-list .list-item{width:100%; margin-bottom:1.2rem;}
	.prd-cover-list .list-item .bg{background-size:100%; background-position:center !important; transform:none !important; height:100%; top:auto;}
	.prd-cover-list .list-item .inner{padding-top:7rem; transform:none !important;}
	.prd-cover-list .list-item .inner .plus{display:none;}
	.prd-cover-list .list-item .inner:before,
	.prd-cover-list .list-item .inner:after{display:none;}
	.prd-cover-list .list-item .inner .txt-box{top:0 !important; bottom:auto !important; height:7rem; padding:0 4rem; justify-content:center;}
	.prd-cover-list .list-item .inner .txt-box .txt{display:none;}

	/* 컨텐츠3 (Global Networks) */
	#mainContent3{margin-bottom:0;padding-top:0;padding-bottom:0}
	.main-global-bg .country.country01{margin-top:-2.9rem; margin-left:-9.1rem;}
	.main-global-bg .country.country02{margin-top:-2.8rem; margin-left:-6.9rem;}
	.main-global-bg .country.country03{margin-top:0rem; margin-left:-11rem;}
	.main-global-bg .country.country04{margin-top:0.8rem; margin-left:-12.6rem;}
	.flow-logo .flow-item{transition:all 1s linear; transform:translateX(100vw);}
	.flow-logo.reverse .flow-item{transform:translateX(-100vw);}
	.main-partner-logo.animated .flow-logo .flow-item{animation-delay:1s;}
	.main-partner-logo.animated .flow-logo.reverse .flow-item{animation-delay:1s;}

	/* 컨텐츠4 (ESG) */
	.main-content4-bg{background-position:center; height:100vh;}
	#mainContent4 .main-bottom-inner{justify-content:flex-end;}
	#mainContent4 .main-circle-menu-list{margin:5vh 0 10vh;}
	#mainContent4 .main-tit-box .main-txt{display:none;}
	.main-circle-menu-list{width:100%; max-width:405px;}
	.main-circle-menu-list .list-item{max-width:200px;}
	.main-circle-menu-list .list-item a .txt{width:100%; text-align:center;font-size:1.4rem}

	/* 컨텐츠5 (Recruit) */
	.main-content5-bg{background-position:center; height:100vh;}
	#mainContent5 .main-tit-box{width:100%;}
	#mainContent5 .main-tit-box .main-txt{display:none;}
	#mainContent5 .main-circle-menu-list{margin:5vh 0 10vh;}
	#mainContent5 .main-bottom-inner{flex-direction:column; justify-content:flex-end; width:calc(100vw - (2 * var(--area-padding)));}
}

/* -------- 640px 이하 -------- */
@media all and (max-width:640px){
	.main-global-bg .country.country01{margin-top:-2.2rem; margin-left:-7.2rem;}
	.main-global-bg .country.country02{margin-top:-2.1rem; margin-left:-5rem;}
	.main-global-bg .country.country03{margin-top:0.7rem; margin-left:-9.1rem;}
	.main-global-bg .country.country04{margin-top:1.5rem; margin-left:-10.7rem;}
}

/* -------- 480px 이하 -------- */
@media all and (max-width:480px){
	.info-list-con .info-logo{text-align:center; top:3.3rem;}
	.main-global-bg .country.country01{margin-top:-1.8rem; margin-left:-5.7rem;}
	.main-global-bg .country.country02{margin-top:-1.7rem; margin-left:-4.3rem;}
	.main-global-bg .country.country03{margin-top:0.7rem; margin-left:-9.1rem;}
	.main-global-bg .country.country04{margin-top:0.5rem; margin-left:-7.7rem;}
}

/* -------- 412px 이하 -------- */
@media all and (max-width:412px){
	.main-global-bg .country.country01{margin-top:-1.6rem; margin-left:-5rem;}
	.main-global-bg .country.country02{margin-top:-1.5rem; margin-left:-3.8rem;}
	.main-global-bg .country.country03{margin-top:-0.1rem; margin-left:-6.9rem;}
	.main-global-bg .country.country04{margin-top:1rem; margin-left:-7.5rem;}
}