:root{
    --inr: 1550;
}


/* 페이지준비중 */
.loading {position: relative; height: 100vh; display: flex; align-items: center;  justify-content: center;}
.loading:before {content: ''; position: absolute; width: 100%; height: 100%; background: url(/images/main/intro_bg2.jpg) no-repeat;  background-size: cover; z-index: -1; opacity: 0.8;}
.loading_box {display: flex; align-items: center;  justify-content: center; flex-direction: column; text-align: center; }
.loading img {height: 350px;}
.loading_txt {color: #fff;}
.loading_txt h2 {font-size: var(--fs68); font-weight:800; margin: 50rem 0 30rem; text-shadow: 3px 3px 20px #a7afe2; }
.loading_txt p {font-size: 20px; line-height: 1.7; font-weight: 400;}
.loading_dot {display: flex; align-items: center; gap: 20rem;}
.loading_dot span {position: relative; display: block; width: 20px; height: 20px; border-radius: 50%; animation: dot 1s linear infinite; background-image: linear-gradient(to right bottom, #b4bcf1 0%, #fff 100%); opacity: 0.4}
.loading_dot span.dot2 {animation-delay: .2s; opacity: 0.5;}
.loading_dot span.dot3 {animation-delay: .4s; opacity: 0.8}
.loading_dot span.dot4 {animation-delay: .4s; opacity:1}

@keyframes dot {
	0% {
        top: 0;
      }
      35% {
        top: 18px;
      }
      70% {
        top: 0px;
      }
}

@media(max-width:767px){
	.loading_txt p {font-size: 15px;}
}

/* header */
header{ color: #fff; }

/* visual */
.visual{ contain: content; position: relative; background: #e48bb5 url('/images/main/2025-visual.webp') no-repeat 50% / cover; color: #fff; }
/* .visual::before{ content: ''; position: absolute; inset: 0; background: url('/images/main/visual_deco.png') no-repeat 50% / cover; } */
.visualBubble{ position: absolute; transform: translate(-50%,-50%); aspect-ratio: 409/408; width: min(409rem, 30%); background: no-repeat 50% / contain; }
.visualBubble.img1{ background-image: url('/images/main/b1.png'); mix-blend-mode: color-burn; }
.visualBubble.img2{ background-image: url('/images/main/b2.png'); mix-blend-mode: color-burn; }
.visualBubble.img3{ background-image: url('/images/main/b3.png'); mix-blend-mode: plus-lighter; filter: invert(1); opacity: .6; }
.visualBubble.img4{ background-image: url('/images/main/b4.png'); mix-blend-mode: overlay; opacity: .4; }
.visualBubble.img5{ background-image: url('/images/main/b5.png'); mix-blend-mode: overlay; }
.visualBubble.img6{ background-image: url('/images/main/b6.png'); mix-blend-mode: overlay; }
.visualBubble__b3{ mix-blend-mode: hard-light; opacity: .2; }
.visualBubble.b2{ top: -3.7%; left: 1.4%; }
.visual__inr{ display: grid; gap: 40rem; align-content: center; align-items: center; min-height: 100vh; padding: 120rem 0; }
/* .visual__eng{ font-size: var(--fs20); font-weight: 500;  text-shadow: 3rem 4rem 15rem rgba(191, 198, 253, 0.8); } */
.visual__eng{ font-size: var(--fs30); font-weight: 500;  text-shadow: 3rem 4rem 15rem rgba(191, 198, 253, 0.8); }
/* .visual__title{ margin: .25em 0 -.125em; font-size: var(--fs80); font-weight: 700; letter-spacing: -.015em; text-shadow: 3rem 4rem 0rem rgb(144 144 227) } */
.visual__title{ margin: 0 0 .125em; font-size: var(--fs80); font-weight: 700; letter-spacing: -.015em; text-shadow: 3rem 4rem 0rem #d54594 }
.visual__subTitle{ /* font-size: var(--fs45); */ font-size: var(--fs24); font-weight: 500; text-shadow: 1rem 2rem 15rem rgba(191, 198, 253, 0.5); }
.visual__info{ margin-top: 23rem; font-size: var(--fs18); font-weight: 500; line-height: 1.82352941; text-shadow: 1rem 2rem 10rem rgba(191, 198, 253, 0.5); }
.visual__wrapThumb{ display: inline-block; padding: clamp(10rem, calc( 15 / var(--inr) * 100vw ), 15rem); background: #fdfdfe; border-radius: 30rem; box-shadow: inset -9rem -9rem 10rem #aaaaaa75, 3rem 4rem 20rem 0rem rgba(133, 168, 210, 0.2); }
.visual__thumb{ display: flex; align-items: center; justify-content: center; aspect-ratio: 730/402; width: 100%; border-radius: 25rem; box-shadow: 3rem 4rem 20rem 0rem rgba(133, 168, 210, 0.2); }
.visual__open { position: relative; display: flex; align-items: center; justify-content: center; width: 65rem; height: 65rem; background: rgba(255, 255, 255, 0.75); border-radius: 50%; transition: all .4s;}
.visual__open:hover {background: #fff;}
.visual__open::before,
.visual__open::after{ content: ''; position: absolute; background: inherit; border-radius: inherit; }
.visual__open::before{ inset: -15rem; opacity: .4; }
.visual__open::after{ inset: -25rem; opacity: .15; }
.visual__arrow{ position: relative; width: 15rem; height: 18rem; }
@media(prefers-reduced-motion:no-preference){
	.visualBubble.b1{ animation: b1 2s ease-in-out infinite alternate; opacity: .5; }
	@keyframes b1 {
		0%{ transform: translate(-50%,-50%) scale(1) rotate(0deg); }
		100%{ transform: translate(-80%,-60%) scale(.8) rotate(-15deg); }
	}
	.visualBubble.b2{ animation: b2 1.7s ease-in-out infinite alternate; }
	@keyframes b2 {
		0%{ transform: translate(-50%,-50%) scale(1) rotate(0deg); }
		100%{ transform: translate(-40%,-35%) scale(.9) rotate(12deg); }
	}
	.visualBubble.b3{ animation: b3 1.4s ease-in-out infinite alternate; }
	@keyframes b3 {
		0%{ transform: translate(-50%,-50%) scale(1) rotate(0deg); }
		100%{ transform: translate(-60%,-40%) scale(.85) rotate(-14deg); }
	}
}
@media(min-width:1280px){
	.visual__inr{ grid-template-columns: 1fr 49%; }
	.visualBubble.b1{ top: 34%; left: 51.2%; }
	.visualBubble.b3{ top: 8.3%; left: 96.4%; }
}
@media(max-width:1279px){
	.visual::before{ background-position-x: 30%; opacity: .5; }
	.visualBubble.b1{ top: 34%; left: 75%; }
	.visualBubble.b3{ top: 91.7%; left: 96.4%; }
}

/* dialog */
.dialog{ position: fixed; inset: 0; max-width: unset; max-height: unset; background: 0; border: 0; display: none; z-index: 51; }
.dialog[open]{ display: flex; }
.dialog::backdrop{ display: none; }
.dialog__backdrop{ position: fixed; inset: 0; background: #000; opacity: .3; }
.dialog__wrapVideo{ position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); display: inline-block; z-index: 99;}
.dialog__video{ width: 1280px; height: 720px; max-width: min(1240rem, 95vw); max-height: min(698rem, 95vh); }
.dialog__close{ position: absolute; top: 40rem; right: 40rem; width: 20px; height: 20px; }
.dialog__close::before,
.dialog__close::after{ content: ''; position: absolute; inset: 50%; width: 27rem; height: 2rem; background: #fff; }
.dialog__close::before{ transform: translate(-50%,-50%) rotate(45deg); }
.dialog__close::after{ transform: translate(-50%,-50%) rotate(-45deg); }
@media(min-width:1280px){
	.visual__txt{ padding-top: .9%; }
}

/* .dim {display:none; position:fixed; _position:absolute; top:0;left:0; background:#000; width:100%; height:100%; filter:Alpha(opacity=40); opacity:0.4; -moz-opacity:0.4; z-index:20;} */