@charset "utf-8";

.mainPage .main-header.fixed {background:none; position:relative}
.mainPage #wrap {color:#fff; background:none}
.main-video-bg {position:fixed; top:0; left:0; width:100%; height:100%; object-fit:cover; z-index:-3}
.main-dim {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,.45); z-index:-2}

.main-content {position:relative; z-index:10; padding:64px 60px 180px}
.hero-copy {margin-top:40px; text-align:center}
.hero-title-en {font-family:'Work Sans', sans-serif; font-size:71px; font-weight:700; line-height:1.1; margin:0}
.hero-title-kr {font-size:24px; font-weight:200; margin-top:20px}
.main-card-section {margin-top:72px; position:relative}
.card-arrow {position:absolute; top:50%; transform:translateY(-50%); width:auto; height:auto; border:none; border-radius:0; padding:0; z-index:30}
.card-arrow:before {display:none}
.card-prev {left:50px}
.card-next {right:50px}
.card-slider {width:min(1220px, calc(100vw - 280px)); height:420px; position:relative; overflow:visible; margin:0 auto}
.card-track {position:relative; width:100%; height:100%}
.card-item {position:absolute; top:0; left:50%; transform:translateX(-50%); width:430px; opacity:0; pointer-events:none; transition:transform .45s ease, opacity .45s ease}
.card-item a {display:block; position:relative; border-radius:24px; overflow:hidden; box-shadow:0 18px 36px rgba(0,0,0,.35)}
.card-item img {display:block; width:100%; height:auto}
.card-text {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; text-align:center; font-family:'futura-pt', sans-serif; font-size:36px; font-weight:700; line-height:1; text-shadow:0 3px 10px rgba(0,0,0,.35)}

.card-item.pos-0 {opacity:1; pointer-events:auto; transform:translateX(-50%) translateZ(0) scale(1); z-index:5}
.card-item.pos-1 {opacity:.92; pointer-events:auto; transform:translateX(calc(-50% + 510px)) scale(.96); z-index:4}
.card-item.pos--1 {opacity:.92; pointer-events:auto; transform:translateX(calc(-50% - 510px)) scale(.96); z-index:4}

/* 3D 원근감 효과 적용 */
.card-item.pos-0 a {transform:none}
.card-item.pos-1 a {transform:perspective(1200px) rotateY(24deg); transform-origin:left center}
.card-item.pos--1 a {transform:perspective(1200px) rotateY(-24deg); transform-origin:right center}


/* 반응형 */
@media all and (min-width:1025px) {
	.main-content {padding:0 0 0 0}
	.hero-copy {margin-top:0}
	.main-card-section {margin-top:90px; overflow-x:hidden}
	.card-slider {width:min(1280px, calc(100vw - 220px)); height:587px}
}
@media all and (max-width:1600px) {
	.hero-title-en {font-size:58px}
	.card-slider {width:min(1080px, calc(100vw - 220px)); height:437px}
	.card-item {width:320px}
	.card-item.pos-1 {transform:translateX(calc(-50% + 235px)) scale(.82)}
	.card-item.pos--1 {transform:translateX(calc(-50% - 235px)) scale(.82)}
}
@media all and (max-width:1024px) {
	.main-content {padding:30px 26px 50px 26px}
	.hero-copy {margin-top:24px}
	.hero-title-en {font-size:42px}
	.hero-title-kr {font-size:18px