/*인트로*/

.intro {width:100%; height:var(--nvh); max-width:764px; margin:0 auto; background:url(/img/intro_bg.jpg) center no-repeat; background-size:cover; display:flex; align-items:center; justify-content:center;}
.intro .intro-wrap {width:90%; height:90%; display:flex; align-items:center; justify-content:center; position:relative;}
.intro .intro-wrap .logo {width:140px; aspect-ratio:140/53; background:url(/img/logo.png) center no-repeat; background-size:cover; font-size:0; position:absolute; left:50%; top:0; transform:translateX(-50%);}
.intro.new {background-image:url(/img/intro_bg_new.jpg);}
.intro.new .intro-wrap .logo {background-image:url(/img/logoB.png);}

.intro .intro-wrap .card-wrap {width:467px; display:flex; gap:5px; flex-wrap:wrap; padding:var(--gap-60) 0;}
.intro .intro-wrap .card-wrap.is-locked {pointer-events:none;}
.intro .intro-wrap .card-wrap .card-box {width:149px; will-change:transform;}
.intro .intro-wrap .card-wrap .card-box:nth-child(odd) {animation:cardFloat1 3.8s ease-in-out infinite;}
.intro .intro-wrap .card-wrap .card-box:nth-child(even) {animation:cardFloat2 3.8s ease-in-out infinite;}
.intro .intro-wrap .card-wrap .card-box .card {width:100%; aspect-ratio:149/158; position:relative; cursor:pointer; transform-style:preserve-3d; transition:transform 0.8s ease;}
.intro .intro-wrap .card-wrap .card-box .card .face {position:absolute; width:100%; height:100%; backface-visibility:hidden; -webkit-backface-visibility:hidden; overflow:hidden;}
.intro .intro-wrap .card-wrap .card-box .card .face.front {z-index:10; transform:rotateY(0deg);}
.intro .intro-wrap .card-wrap .card-box .card .face.back {z-index:9; transform:rotateY(180deg); background-repeat:no-repeat; background-size:cover; background-position:center;}
.intro .intro-wrap .card-wrap .card-box .card.is-flipped {transform:rotateY(180deg);}

.intro .intro-wrap .card-wrap .card-box.card-1 {--r:2.4deg; --x:-10px; --y:-20px; --fy:0px; --fr:0deg; transform:rotate(2.4deg) translate(-10px,-20px);}
.intro .intro-wrap .card-wrap .card-box.card-2 {--r:-2.5deg; --x:0px; --y:0px; --fy:0px; --fr:0deg; transform:rotate(-2.5deg) translate(0,0); animation-delay:0.2s;}
.intro .intro-wrap .card-wrap .card-box.card-3 {--r:-2.5deg; --x:0px; --y:-20px; --fy:0px; --fr:0deg; transform:rotate(-2.5deg) translate(0,-20px); animation-delay:0.3s;}
.intro .intro-wrap .card-wrap .card-box.card-4 {--r:-3deg; --x:-5px; --y:0px; --fy:0px; --fr:0deg; transform:rotate(-3deg) translate(-5px,0); animation-delay:0.4s;}
.intro .intro-wrap .card-wrap .card-box.card-5 {--r:3.6deg; --x:5px; --y:-1px; --fy:0px; --fr:0deg; transform:rotate(3.6deg) translate(5px,-1px); animation-delay:0.5s;}
.intro .intro-wrap .card-wrap .card-box.card-6 {--r:-2.4deg; --x:15px; --y:5px; --fy:0px; --fr:0deg; transform:rotate(-2.4deg) translate(15px,5px); animation-delay:0.6s;}
.intro .intro-wrap .card-wrap .card-box.card-7 {--r:2.2deg; --x:-2px; --y:15px; --fy:0px; --fr:0deg; transform:rotate(2.2deg) translate(-2px,15px); animation-delay:0.7s;}
.intro .intro-wrap .card-wrap .card-box.card-8 {--r:-5.3deg; --x:0px; --y:0px; --fy:0px; --fr:0deg; transform:rotate(-5.3deg) translate(0,0); animation-delay:0.8s;}
.intro .intro-wrap .card-wrap .card-box.card-9 {--r:3.4deg; --x:3px; --y:15px; --fy:0px; --fr:0deg; transform:rotate(3.4deg) translate(3px,15px); animation-delay:0.9s;}


@keyframes cardFloat1 {
    0% {transform:rotate(var(--r)) translate(var(--x), var(--y));}
    25% {transform:rotate(calc(var(--r) + 0.4deg)) translate(var(--x), calc(var(--y) - 2px));}
    50% {transform:rotate(calc(var(--r) - 0.3deg)) translate(calc(var(--x) + 1px), calc(var(--y) + 1px));}
    75% {transform:rotate(calc(var(--r) + 0.2deg)) translate(calc(var(--x) - 1px), calc(var(--y) - 1px));}
    100% {transform:rotate(var(--r)) translate(var(--x), var(--y));}
}

@keyframes cardFloat2 {
    0% {transform:rotate(var(--r)) translate(var(--x), var(--y));}
    25% {transform:rotate(calc(var(--r) - 0.2deg)) translate(calc(var(--x) + 1px), calc(var(--y) - 2px));}
    50% {transform:rotate(calc(var(--r) + 0.4deg)) translate(calc(var(--x) - 1px), var(--y));}
    75% {transform:rotate(calc(var(--r) - 0.3deg)) translate(calc(var(--x) + 2px), calc(var(--y) + 1px));}
    100% {transform:rotate(var(--r)) translate(var(--x), var(--y));}
}


.intro .intro-wrap .card-wrap .card-box.card-1 .card .face.front {background:url(/img/lc1GVggs.png) center no-repeat; background-size:cover;}
.intro .intro-wrap .card-wrap .card-box.card-2 .card .face.front {background:url(/img/lc2XRIyD.png) center no-repeat; background-size:cover;}
.intro .intro-wrap .card-wrap .card-box.card-3 .card .face.front {background:url(/img/lc3LlBnl.png) center no-repeat; background-size:cover;}
.intro .intro-wrap .card-wrap .card-box.card-4 .card .face.front {background:url(/img/lc4uwyCz.png) center no-repeat; background-size:cover;}
.intro .intro-wrap .card-wrap .card-box.card-5 .card .face.front {background:url(/img/lc5cWBoE.png) center no-repeat; background-size:cover;}
.intro .intro-wrap .card-wrap .card-box.card-6 .card .face.front {background:url(/img/lc6aqTxq.png) center no-repeat; background-size:cover;}
.intro .intro-wrap .card-wrap .card-box.card-7 .card .face.front {background:url(/img/lc7fVzqv.png) center no-repeat; background-size:cover;}
.intro .intro-wrap .card-wrap .card-box.card-8 .card .face.front {background:url(/img/lc8kAueC.png) center no-repeat; background-size:cover;}
.intro .intro-wrap .card-wrap .card-box.card-9 .card .face.front {background:url(/img/lc9VRuFc.png) center no-repeat; background-size:cover;}

.intro.new .intro-wrap .card-wrap .card-box.card-1 .card .face.front {background:url(/img/lc1dECnP.png) center no-repeat; background-size:cover;}
.intro.new .intro-wrap .card-wrap .card-box.card-2 .card .face.front {background:url(/img/lc2MqZbb.png) center no-repeat; background-size:cover;}
.intro.new .intro-wrap .card-wrap .card-box.card-3 .card .face.front {background:url(/img/lc3GqOCi.png) center no-repeat; background-size:cover;}
.intro.new .intro-wrap .card-wrap .card-box.card-4 .card .face.front {background:url(/img/lc4qiJsq.png) center no-repeat; background-size:cover;}
.intro.new .intro-wrap .card-wrap .card-box.card-5 .card .face.front {background:url(/img/lc5fyOVD.png) center no-repeat; background-size:cover;}
.intro.new .intro-wrap .card-wrap .card-box.card-6 .card .face.front {background:url(/img/lc6QskYc.png) center no-repeat; background-size:cover;}
.intro.new .intro-wrap .card-wrap .card-box.card-7 .card .face.front {background:url(/img/lc7DYWUJ.png) center no-repeat; background-size:cover;}
.intro.new .intro-wrap .card-wrap .card-box.card-8 .card .face.front {background:url(/img/lc8NJVkR.png) center no-repeat; background-size:cover;}
.intro.new .intro-wrap .card-wrap .card-box.card-9 .card .face.front {background:url(/img/lc9rwtwL.png) center no-repeat; background-size:cover;}


@media screen and (max-width : 768px) {
    .intro .intro-wrap .logo {width:120px;}

    .intro .intro-wrap .card-wrap {width:370px;}
    .intro .intro-wrap .card-wrap .card-box {width:120px;}
}

@media screen and (max-width : 648px) {
    .intro .intro-wrap .card-wrap {width:310px;}
    .intro .intro-wrap .card-wrap .card-box {width:100px;}
}

@media screen and (max-width : 480px) {
    .intro .intro-wrap .logo {width:100px;}

    .intro .intro-wrap .card-wrap {width:259px; gap:5px 2px;}
    .intro .intro-wrap .card-wrap .card-box {width:85px;}

    .intro .intro-wrap .card-wrap .card-box.card-1 {--x:-2px; --y:-12px; transform:rotate(2.4deg) translate(-2px,-12px);}
    .intro .intro-wrap .card-wrap .card-box.card-2 {--x:0px; --y:0px; transform:rotate(-2.5deg) translate(0,0);}
    .intro .intro-wrap .card-wrap .card-box.card-3 {--x:0px; --y:-12px; transform:rotate(-2.5deg) translate(0,-12px);}
    .intro .intro-wrap .card-wrap .card-box.card-4 {--x:0px; --y:0px; transform:rotate(-3deg) translate(0,0);}
    .intro .intro-wrap .card-wrap .card-box.card-5 {--x:0px; --y:-1px; transform:rotate(3.6deg) translate(0,-1px);}
    .intro .intro-wrap .card-wrap .card-box.card-6 {--x:5px; --y:5px; transform:rotate(-2.4deg) translate(5px,5px);}
    .intro .intro-wrap .card-wrap .card-box.card-7 {--x:0px; --y:8px; transform:rotate(2.2deg) translate(0,8px);}
    .intro .intro-wrap .card-wrap .card-box.card-8 {--x:0px; --y:0px; transform:rotate(-5.3deg) translate(0,0);}
    .intro .intro-wrap .card-wrap .card-box.card-9 {--x:3px; --y:10px; transform:rotate(3.4deg) translate(3px,10px);}
}


@media screen and (max-width : 320px) {
    .intro .intro-wrap .card-wrap {width:229px; gap:5px 2px;}
    .intro .intro-wrap .card-wrap .card-box {width:75px;}
}

@media (orientation : landscape) and (min-height : 1000px) {
    .intro .intro-wrap {max-height:800px;}
}

@media (orientation : landscape) and (max-height : 800px) {
    .intro .intro-wrap .card-wrap {width:370px;}
    .intro .intro-wrap .card-wrap .card-box {width:120px;}
}

@media (orientation : landscape) and (max-height : 600px) {
    .intro .intro-wrap .card-wrap {width:259px; gap:5px 2px;}
    .intro .intro-wrap .card-wrap .card-box {width:85px;}
}

@media (orientation : portrait) and (min-height : 701px) {
    .intro .intro-wrap {height:75%;}
}

@media (orientation : portrait) and (max-height : 700px) and (max-width : 420px) {
    .intro .intro-wrap {height:75%;}
}



.intro .intro-wrap .btn-dir {width:350px; height:64px; border-radius:100px; background:rgba(255,255,255,0.1); backdrop-filter:blur(10px); box-shadow:0px 7px 12px rgba(35,110,159,0.5); display:flex; align-items:center; justify-content:center; font-family:var(--Montserrat); font-size:24px; font-weight:600; color:var(--key-color); position:absolute; left:50%; bottom:0; transform:translateX(-50%);}
.intro.new .intro-wrap .btn-dir {box-shadow:0px 6px 10px rgba(93,98,101,0.5); color:#fff; border:1px solid rgba(255,255,255,0.3);}

@media screen and (max-width : 648px) {
    .intro .intro-wrap .btn-dir {font-size:20px; height:60px; width:310px;}
}

@media screen and (max-width : 480px) {
    .intro .intro-wrap .btn-dir {font-size:18px; height:56px; width:259px;}
}


.card-popup {width:100%; height:var(--nvh); position:fixed; left:0; top:0; z-index:999; background:rgba(0,0,0,0.2); backdrop-filter:blur(20px); pointer-events:none; opacity:0; visibility:hidden; transition:opacity 0.4s ease, visibility 0.4s ease;}
.card-popup .popup-wrap {width:100%; height:100%; display:flex; align-items:center; justify-content:center;}
.card-popup .popup-wrap .popup-box {width:90%; position:relative;}
.card-popup .popup-wrap .popup-box .btn-popup-close {width:40px; aspect-ratio:1; background:url(/img/icon_close.png) no-repeat center / cover; font-size:0; cursor:pointer; position:absolute; left:50%; top:-100px; transform:translateX(-50%);}
.card-popup .popup-wrap .popup-box .popup-conts {width:100%;}
.card-popup .popup-wrap .popup-box .popup-conts .message-box {width:100%; max-width:261px; aspect-ratio:261/279; transform:scale(0.6); opacity:0; transition:opacity 0.4s ease, transform 0.4s cubic-bezier(.22, 1, .36, 1); transform-origin:center; position:relative; margin:0 auto;}
.card-popup .popup-wrap .popup-box .popup-conts .message-box img {display:block; width:100%; height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); object-fit:cover;}
.card-popup .popup-wrap .popup-box .popup-conts .message-box .img-box {width:100%; height:100%; position:relative; z-index:10;}
.card-popup .popup-wrap .popup-box .popup-conts .message-box .btn-play {width:48px; aspect-ratio:1; background:url(/img/icon_play.png) no-repeat center / cover; font-size:0; cursor:pointer; position:absolute; left:calc(50% - 5px); top:78px; transform:translateX(-50%); z-index:11;}
.card-popup .popup-wrap .popup-box .popup-conts .message-box .btn-play[data-idx='1'] {left:50%;}
.card-popup .popup-wrap .popup-box .popup-conts .message-box .btn-play.pause {background-image:url(/img/icon_stop.png);}
.card-popup .popup-wrap .popup-box .popup-conts .message-box audio {position:absolute; left:0; top:0; z-index:0; visibility:hidden; opacity:0;}
.card-popup .popup-wrap .popup-box .btn-dir {width:90%; max-width:261px; height:55px; border-radius:100px; background:rgba(255,255,255,0.6); backdrop-filter:blur(16px); box-shadow:0 0 13px 0 rgba(35,110,159,0.4); display:flex; align-items:center; justify-content:center; position:absolute; left:50%; bottom:-120px; transform:translateX(-50%); font-family:var(--Montserrat); font-size:18px; font-weight:600; color:var(--key-color);}

.card-popup.new .popup-wrap .popup-box .btn-popup-close {background-image:url(/img/icon_close_B.png);}
.card-popup.new .popup-wrap .popup-box .btn-dir {background:rgba(255,255,255,0.35); box-shadow:0 6px 10px 0 rgba(93,98,101,0.5); color:#fff; border:1px solid rgba(255,255,255,0.3);}


.card-popup.is-open {opacity:1; visibility:visible; pointer-events:auto;}
.card-popup.show-message .popup-wrap .popup-box .popup-conts .message-box {transform:scale(1); opacity:1;}

@media screen and (max-width: 480px) {
    .card-popup .popup-wrap .popup-box .btn-popup-close {top:-80px;}
    .card-popup .popup-wrap .popup-box .btn-dir {bottom:-100px;}
}



.floating {position:fixed; left:calc(50% + 382px - 25px - var(--gap-32)); transform:translateX(-50%); bottom:var(--gap-40);}
.floating .floating-menu {display:flex; flex-direction:column; gap:8px;}
.floating .floating-menu .sns-list {width:50px; aspect-ratio:1; position:absolute; right:0; bottom:0;}
.floating .floating-menu .btn-floating,
.floating .floating-menu .sns-list a {width:50px; aspect-ratio:1; font-size:0; cursor:pointer; background-repeat:no-repeat; background-size:cover; background-position:center;}
.floating .floating-menu .sns-list a {opacity:0; transform:translateY(0); pointer-events:none; position:absolute; right:0; bottom:0; transition:transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease;}
.floating .floating-menu .sns-list a:nth-child(1) {transform:translateY(-58px); transition-delay:0;}
.floating .floating-menu .sns-list a:nth-child(2) {transform:translateY(-116px); transition-delay:0.05s;}
.floating .floating-menu .sns-list a:nth-child(3) {transform:translateY(-174px); transition-delay:0.1s;}
.floating .floating-menu .sns-list a.youtube {background-image:url(/img/btn_youtube.png);}
.floating .floating-menu .sns-list a.x {background-image:url(/img/btn_x.png);}
.floating .floating-menu .sns-list a.instagram {background-image:url(/img/btn_instagram.png);}
.floating .floating-menu .btn-floating {background-image:url(/img/btn_plus.png); position:relative;}
.floating .floating-menu.active .btn-floating {background-image:url(/img/btn_close.png);}
.floating .floating-menu.active .sns-list a {pointer-events:auto; opacity:1;}

.floating .floating-menu.typeB .sns-list a.youtube {background-image:url(/img/btn_youtube_r.png);}
.floating .floating-menu.typeB .sns-list a.x {background-image:url(/img/btn_x_r.png);}
.floating .floating-menu.typeB .sns-list a.instagram {background-image:url(/img/btn_instagram_r.png);}
.floating .floating-menu.typeB .btn-floating {background-image:url(/img/btn_plus_r.png); position:relative;}
.floating .floating-menu.typeB.active .btn-floating {background-image:url(/img/btn_close_r.png);}

@media screen and (max-width : 768px) {
    .floating {left:auto; right:var(--gap-32); transform:none;}
}


@media screen and (max-width: 480px) {
    .floating .floating-menu .sns-list,
    .floating .floating-menu .btn-floating,
    .floating .floating-menu .sns-list a {width:42px;}
    .floating .floating-menu .sns-list a:nth-child(1) {transform:translateY(-50px);}
    .floating .floating-menu .sns-list a:nth-child(2) {transform:translateY(-100px);}
    .floating .floating-menu .sns-list a:nth-child(3) {transform:translateY(-150px);}
}





@media screen and (max-width: 1024px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 648px) {}
@media screen and (max-width: 480px) {}