:root {
  --pret: "Pretendard", sans-serif;
  --bebas : "Bebas Neue", sans-serif;

  --point: #FFDAA5;
}
html, body, #wrap {width: 100%; height: 100%; overscroll-behavior: none; overflow: hidden; touch-action: manipulation; user-select: none}
* {user-select: none; -moz-user-select: none; }

#wrap {background: #333; font-family: var(--pret);}

.button {width: 100px; aspect-ratio: 2/1; display: flex; align-items: center; justify-content: center;  position: relative; background: url(https://ateez.vstory.ai.kr/img/btn_default_bg.svg) center no-repeat; background-size: cover; }
.button span {font-size: 22px; font-family: var(--bebas); color: var(--point); position: relative; z-index: 1; background-size: cover; transition: color 0.4s;}
.button::before {content:""; width: 100%; height: 100%; position: absolute; z-index: 0; background: url(https://ateez.vstory.ai.kr/img/btn_hover_bg.svg) center no-repeat; background-size: cover; opacity: 0; transition: opacity 0.4s; line-height: 1;}
.button:hover span {color: #111;}
.button:hover::before {opacity: 1;}
@media (hover: hover) {
    .button:hover span {color: #111;}
    .button:hover::before {opacity: 1;}
}
@media screen and (max-width:768px) {
    .button {width: 90px;}
    .button span {font-size: 20px;}
}


#intro {position: fixed; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0.7); z-index: 100; text-align: center; backdrop-filter: blur(8px); }
#intro .modal {background: rgba(0,0,0,0);}

#header {width: 100%; position: absolute; left: 0; top: 0; height: 100px; display: flex; justify-content: space-between; align-items: center; padding: 0 50px; box-sizing: border-box; z-index: 999;}
#header .logo {font-size: 1px; width: 73px; color: rgba(0,0,0,0); aspect-ratio: 73/28; background: url(https://ateez.vstory.ai.kr/img/logo.svg) center no-repeat; background-size: cover; }
#header .sns {display: flex; align-items: center; --gap:10px; gap: var(--gap);}
#header .sns ul {display: flex; align-items: center; gap: var(--gap);}
#header .sns a {width: 40px; aspect-ratio: 1; font-size: 1px; display: block; background-position: center; background-repeat: no-repeat; background-size: cover; color:rgba(0,0,0,0);}
#header .sns a.sns-btn {background-image: url(https://ateez.vstory.ai.kr/img/button_sns.png); display: none; position: relative; z-index: 2;}
#header .sns a.youtube {background-image: url(https://ateez.vstory.ai.kr/img/button_youtube.png);}
#header .sns a.insta {background-image: url(https://ateez.vstory.ai.kr/img/button_insta.png);}
#header .sns a.x {background-image: url(https://ateez.vstory.ai.kr/img/button_x.png);}
#header .sns a.a {background-image: url(https://ateez.vstory.ai.kr/img/button_toktoq.png);}
@media screen and (max-width:1024px) {
    #header {align-items: start; padding: 0 30px; }
    #header .logo {margin-top: 30px;}
    #header .sns {--gap:5px; flex-direction: column; padding-top: 20px;}
    #header .sns a.sns-btn {display: block;}
    #header .sns ul {flex-direction: column; transform: translateY(-20px); opacity: 0; transition: opacity 0.3s, transform 0.3s; pointer-events: none; }

    #header .sns.active ul {transform: translateY(0px); opacity: 1; pointer-events: auto;}
}
@media screen and (max-width:768px) { 
    #header .logo {width: 53px;}
}


#screen {width: 100%; height: 100%; position: relative; overflow: hidden;}
#screen .vod-box {width: 100%; height: 100%; overflow: hidden;}
#screen .vod-box video {width: 100%; height: 100%; object-fit: cover; }
/* #screen .vod-box video::-webkit-media-controls,
#screen .vod-box video::-webkit-media-controls-start-playback-button,
#screen .vod-box video::-webkit-media-controls-overlay-play-button ,
#screen .vod-box video::-webkit-media-controls-enclosure { display: none !important; } */

#screen .speed {position: absolute; font-size: 0; max-width: 460px; bottom: 0; left: 50%; transform: translateX(-50%); width: 60%; background: url(https://ateez.vstory.ai.kr/img/speedmeter_back.png) center no-repeat; background-size: cover;}
#screen .speed img {width: 100%;}
#screen .speed .color {width: 100%; overflow: hidden; position: absolute; left: 0; bottom: 0; height: 100%;}
#screen .speed .color span {width: 100%; aspect-ratio: 1; position: absolute; left: 0; top: 0; --start:270; --angle:0; mask-image: conic-gradient(from calc(var(--start) * 1deg), #000 calc(var(--angle) * 1deg), transparent 0);}
#screen .speed .hand {height: 68%; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); transform-origin: 50% 100%; }
#screen .speed .hand span {display: block;height: 100%; /*transform: rotate(-80deg);*/ transform-origin: 50% 100%; will-change: transform;}
#screen .speed .hand img {width: auto; height: 100%;}
#screen .speed .front {width: 100%; position: relative; z-index: 3; }


.modal {width: 100%; height: 100%; position: fixed; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; z-index: 99; top: 0; left: 0;}
.modal .modal-wrap {max-width: 600px; width: 90%; position: relative; background: linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0.8) 10%, rgba(0,0,0,0.8) 90%, rgba(0,0,0,0));}
.modal .modal-wrap::before,
.modal .modal-wrap::after {content:""; width: 100%; height: 2px; background: linear-gradient(to right, rgba(0,0,0,0), #FFDAA5 10%, #FFEED5 50%, rgba(255,218,165,0.5) 90%, rgba(0,0,0,0)); position: absolute; left: 0; opacity: 0.7;}
.modal .modal-wrap::before {top: 0;}
.modal .modal-wrap::after {bottom: 0;}
.modal .modal-box {width: 100%;  padding: 70px 16px 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 40px; position: relative; z-index: 1; background: url(https://ateez.vstory.ai.kr/img/modal_compass.svg) center top no-repeat; background-size: 50% auto;}
.modal .modal-box::before {content:""; width: 50px; aspect-ratio: 1; background: url(https://ateez.vstory.ai.kr/img/modal_emblem.svg) center no-repeat; background-size: cover;  position: absolute; left: 50%; top: 0; transform: translate(-50%,-50%); }
.modal .modal-box .modal-cont {text-align: center; color: #fff; text-align: center;}
.modal .modal-box .modal-cont .ko {font-size: 20px; font-weight: 600;}
.modal .modal-box .modal-cont .en {font-family: var(--bebas); font-size: 22px; margin-top: 15px;}
.modal .modal-box .modal-cont .desc {color: #aaa; margin-top: 20px; }
.modal .modal-box .modal-cont .desc .ko {font-size: 15px; font-weight: 500;}
.modal .modal-box .modal-cont .desc .en {font-size: 17px; margin-top: 10px;}
.modal .modal-box .modal-btn {display: flex; gap: 50px; align-items: center; justify-content: center; }
@media screen and (max-width:768px) {
    .modal .modal-box {padding: 50px 10px 34px; gap: 26px; background-size: 70% auto; }
    .modal .modal-box::before {width: 45px;}
    .modal .modal-box .modal-cont .ko {font-size: 18px;}
    .modal .modal-box .modal-cont .en {font-size: 20px; margin-top: 10px;}

    .modal .modal-box .modal-cont .desc .ko {font-size: 13px; }
    .modal .modal-box .modal-cont .desc .en {font-size: 14px;}
}


.blackout {position: fixed; z-index: 9999; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;  background: #000; color: #fff; opacity: 0; pointer-events: none;}
.blackout .bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(https://ateez.vstory.ai.kr/img/glass_texture.png) center no-repeat; z-index: 1; background-size: cover;}
.blackout .cont {position: relative; z-index: 2; text-align: center;  max-width: 277px; width: 60%;}
.blackout .cont .logo {opacity: 0; font-size: 0;}
.blackout .cont .logo .a {width: 33%; margin: 0 auto 25px;}
.blackout .cont .logo img {width: 100%; }
.blackout .cont .btn-box {margin-top: 60px; display: flex; justify-content: center;}


.benefit {position: fixed; z-index: 998; left: 0; top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;  background: #000; color: #fff; opacity: 0; pointer-events: none;}
.benefit .bg {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url(https://ateez.vstory.ai.kr/img/glass_texture.png) center no-repeat; z-index: 1; background-size: cover;}
.benefit .modal {background: none;}
.benefit .modal-box .img {max-width: 165px; margin: 0 auto; }
.benefit .modal-box .img img {width: 100%;}
.benefit .modal-box .modal-btn {gap: 15px;}
.benefit .modal-box .modal-btn a {width: 40px; aspect-ratio: 1; background-position: center; background-repeat: no-repeat; background-size: cover;}
.benefit .modal-box .modal-btn a.control[data-state="play"] {background-image: url(https://ateez.vstory.ai.kr/img/button_play.svg);}
.benefit .modal-box .modal-btn a.control[data-state="paused"] {background-image: url(https://ateez.vstory.ai.kr/img/button_pause.svg);}
.benefit .modal-box .modal-btn a.stop {background-image: url(https://ateez.vstory.ai.kr/img/button_stop.svg);}