@charset "utf-8";

/* intro */
.intro__wrap { position:fixed; left: 0; top:0; width: 100%; height: 100dvh; background-color: #f6f6f6; z-index: 999;}
.intro__wrap .inner{ display:flex; justify-content:center; align-items: center; width: 100%; height: 100%; }
.intro__wrap .text__box { overflow: hidden; }
.intro__wrap .text { position:relative; text-align: center; transform: translateY(100%); animation: slideUp 0.9s 0.001s ease-in both; }
.intro__wrap .text>strong { font-family: var(--font-baloo2); font-size: 50px; line-height: 1.3; font-weight: 400; color: #333; }
.intro__wrap .text>p { font-family: "Pretendard",sans-serif; font-size:20px; line-height: 1.3; letter-spacing: 0.02em; color: #333; }
.intro__wrap.off { animation: intro 1s 0.8s ease-in both; }

/* main content */
.visual { position: fixed; left: 0; right: 0; top: 0; width: 100%; height: 100dvh; z-index: -1;}
.visual-swiper { width: 100%; height: 100%; }
.visual-swiper .swiper-slide { background-color: lightgray; }
.visual-swiper .video__box { overflow:hidden; position:relative; height: 100%; }
.visual-swiper .video__box::after { content:""; position:absolute; left:0; top:0; display:block; width:100%; height:100%; background-color: rgba(0,0,0,0.15); }
.visual-swiper .video__box>video{ width: 100%; height: 100%; object-position: center center; object-fit:cover; }
.visual-swiper .slide-3 .video__box>video {transform: rotateY(180deg); }
.visual-text { position:absolute; left: 50%; top: 50%; width: calc(100% - 60px); margin: 0 auto; transform: translate(-50%, -50%); text-align: center; }
.visual-text .title span { font-family: var(--font-baloo2); font-size: 50px; line-height: 1.3; letter-spacing: -0.02em; color: #fff;}
.visual-text .title .box { overflow:hidden; display: inline-block; }
.visual-text .title .up { display:inline-block; position: relative; top: 1em; }
.visual-text .title .word { position: relative; top: 1em; opacity: 0; }
.visual-text .sub-title>.word { font-family: var(--font-pretendard); font-size: 20px; line-height: 1.3; color: #fff; opacity: 0;}

.swiper-slide-active .visual-text .title .up { animation: slideUp-2 0.8s 0.1s ease-out both; transform:translateZ(0); }
.swiper-slide-active .visual-text .title .word { animation: slideUp-3 0.5s ease-out both; animation-delay: calc(0.075s * var(--time) + 0.8s);}
.swiper-slide-active .visual-text .sub-title>.word { animation: opacity 0.5s ease-out both; animation-delay: calc(0.075s * var(--time) + 3s);}

.main-img { margin-top: 100dvh; background-color: #f6f6f6; }
.main-img .inner { padding: 110px 0 70px; }
.main-img .img__area { display: flex; justify-content: space-between; align-items: stretch; padding-bottom: 70px; border-bottom: 1px solid #B5B0A6;}
.main-img .img__area>.left { display:flex; flex-direction:column; justify-content: flex-end; border-top: 1px solid #B5B0A6; }
.main-img .img__area>.left>.img__box { width: min(39.6vw,760px); aspect-ratio: 0.772/1; max-height:984px; background: url('/img/main/main_img_01.jpg') no-repeat center center/cover }
.main-img .img__area>.right>.img__box { width: min(49.1vw,942px); aspect-ratio: 0.658/1; max-height:1430px; background: url('/img/main/main_img_02.jpg') no-repeat center center/cover }
.main-bg .pin-spacer { width: 100% !important; }
.main-bg .fixed-bg{ width: 100% !important; height: clamp(640px,40.63vw,780px); background: url('/img/main/main_bg_01.jpg') no-repeat center center/cover; }


@media screen and (max-width: 1300px) {
	.intro__wrap .text>strong { font-size: clamp(32px,3.84vw,50px); }
	.intro__wrap .text>p { font-size: clamp(16px,1.53vw,20px); }
	.visual-text .title span { font-size: clamp(28px,3.84vw,50px); }
	.visual-text .sub-title>.word { font-size: clamp(14px,1.53vw,20px); }
}
@media screen and (max-width: 768px) { 
	.visual-text .title .box.block { display:block; height:0; }
	.visual-text .title span { line-height: 1.2; }
	.visual-text .sub-title { margin-top: 0.5em; }
	.main-img .img__area { flex-direction: column; row-gap: 40px; }
	.main-img .img__area>.left>.img__box, .main-img .img__area>.right>.img__box { width: 100%; }
	.main-bg .fixed-bg{ height: 560px; background-image: url('/img/main/main_bg_mo.jpg'); }
}

@keyframes slideUp {
	0% { transform: translateY(100%); }
	100% { transform: translateY(0%); }
}
@keyframes slideUp-2 {
	0% { top: 1em; }
	100% { top: 0; }
}
@keyframes slideUp-3 {
	0% { top: 1em; opacity:0; }
	100% { top: 0; opacity:1; }
}
@keyframes opacity {
	0% { opacity:0; }
	100% { opacity:1; }
}
@keyframes intro {
	0% { opacity:1; }
	100% { opacity:0; }
}
@keyframes visualTitle {
	0% { transform: translateY(100%); opacity:0; }
	100% { transform: translateY(0%); opacity:1; }
}