@import url('https://cdn.jsdelivr.net/gh/leetaewook/gmarket-sans-dynamic-subset/GmarketSans.css');
@import url('https://cdn.jsdelivr.net/gh/fonts-archive/Recipekorea/Recipekorea.css');
@font-face{font-family:'DSEG7';src:url('/Users/Event/event/issue864/font/DSEG7ClassicMini-Bold.woff2') format('woff2'),url('/Users/Event/event/issue864/font/DSEG7ClassicMini-Bold.woff') format('woff'),url('/Users/Event/event/issue864/font/DSEG7ClassicMini-Bold.ttf') format('truetype')}
html{scroll-behavior:smooth}
section{position:relative}
@media all and (max-width:768px){.w100{width:100%}}
@font-face{font-family:'GmarketSansMedium';src:url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');font-weight:normal;font-style:normal}
@font-face{font-family:'Gmarket Sans';font-weight:700;font-style:normal;font-display:swap;src:url('https://cdn.jsdelivr.net/gh/fonts-archive/GmarketSans/GmarketSansBold.woff2') format('woff2'),url('https://cdn.jsdelivr.net/gh/fonts-archive/GmarketSans/GmarketSansBold.woff') format('woff'),url('https://cdn.jsdelivr.net/gh/fonts-archive/GmarketSans/GmarketSansBold.otf') format('opentype'),url('https://cdn.jsdelivr.net/gh/fonts-archive/GmarketSans/GmarketSansBold.ttf') format('truetype')}
[class^="sec"]{font-family:'Gmarket Sans';font-weight:700}
.blink-1{-webkit-animation:blink-1 2.5s infinite both;animation:blink-1 2.5s infinite both}
@-webkit-keyframes blink-1{0%,50%,100%{opacity:1}25%,75%{opacity:0}}
@keyframes blink-1{0%,50%,100%{opacity:1}25%,75%{opacity:0}}
.blink-5{-webkit-animation:blink-5 6s infinite both;animation:blink-5 6s infinite both}
@-webkit-keyframes blink-5{0%,8.33%,16.66%,100%{opacity:1}4.16%,12.5%{opacity:0}}
@keyframes blink-5{0%,8.33%,16.66%,100%{opacity:1}4.16%,12.5%{opacity:0}}
.scroll_wrap{overflow:hidden}
.scroll_on{opacity:0;transition:all 1.8s}
.scroll_on.active{opacity:1!important;transform:translate(0,0)!important}
.scroll_on.type_top{transform:translate(0,-20%)}
.scroll_on.type_bottom{transform:translate(0,20%)}
.scroll_on.type_left{transform:translate(-20%,0)}
.scroll_on.type_right{transform:translate(20%,0)}
@keyframes smooth-blink{0%,100%{opacity:1}50%{opacity:0}}
.move_deg{-webkit-animation:move-diagonal 10s cubic-bezier(0.455,0.030,0.515,0.955) infinite both;animation:move-diagonal 10s cubic-bezier(0.455,0.030,0.515,0.955) infinite both}
@-webkit-keyframes move-diagonal{0%,100%{-webkit-transform:translate(0,0);transform:translate(0,0)}10%,30%,50%,70%{-webkit-transform:translate(-1.5%,-1.5%);transform:translate(-1.5%,-1.5%)}20%,40%,60%{-webkit-transform:translate(1.5%,1.5%);transform:translate(1.5%,1.5%)}80%{-webkit-transform:translate(3%,3%);transform:translate(3%,3%)}90%{-webkit-transform:translate(-3%,-3%);transform:translate(-3%,-3%)}}
@keyframes move-diagonal{0%,100%{-webkit-transform:translate(0,0);transform:translate(0,0)}10%,30%,50%,70%{-webkit-transform:translate(-1.5%,-1.5%);transform:translate(-1.5%,-1.5%)}20%,40%,60%{-webkit-transform:translate(1.5%,1.5%);transform:translate(1.5%,1.5%)}80%{-webkit-transform:translate(3%,3%);transform:translate(3%,3%)}90%{-webkit-transform:translate(-3%,-3%);transform:translate(-3%,-3%)}}
.puff-in-hor{-webkit-animation:puff-in-hor 1.2s cubic-bezier(0.470,0.000,0.745,0.715) both;animation:puff-in-hor 1.2s cubic-bezier(0.470,0.000,0.745,0.715) both}
@-webkit-keyframes puff-in-hor{0%{-webkit-transform:scaleX(2);transform:scaleX(2);-webkit-filter:blur(4px);filter:blur(4px);opacity:0}100%{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-filter:blur(0px);filter:blur(0px);opacity:1}}
@keyframes puff-in-hor{0%{-webkit-transform:scaleX(2);transform:scaleX(2);-webkit-filter:blur(4px);filter:blur(4px);opacity:0}100%{-webkit-transform:scaleX(1);transform:scaleX(1);-webkit-filter:blur(0px);filter:blur(0px);opacity:1}}
.vibrate-1{-webkit-animation:vibrate-1 5s linear infinite both;animation:vibrate-1 5s linear infinite both}
@-webkit-keyframes vibrate-1{0%{-webkit-transform:translate(0);transform:translate(0)}20%{-webkit-transform:translate(-2px,2px);transform:translate(-2px,2px)}40%{-webkit-transform:translate(-2px,-2px);transform:translate(-2px,-2px)}60%{-webkit-transform:translate(2px,2px);transform:translate(2px,2px)}80%{-webkit-transform:translate(2px,-2px);transform:translate(2px,-2px)}100%{-webkit-transform:translate(0);transform:translate(0)}}
@keyframes vibrate-1{0%{transform:translate(0)}20%{transform:translate(-2px,2px)}40%{transform:translate(-2px,-2px)}60%{transform:translate(2px,2px)}80%{transform:translate(2px,-2px)}100%{transform:translate(0)}}
.vibrate-3{-webkit-animation:vibrate-3 7s linear infinite both;animation:vibrate-3 7s linear infinite both}
@-webkit-keyframes vibrate-3{0%{transform:translate(0)}10%{transform:translate(-2px,-2px)}20%{transform:translate(2px,-2px)}30%{transform:translate(-2px,2px)}40%{transform:translate(2px,2px)}50%{transform:translate(-2px,-2px)}60%{transform:translate(2px,-2px)}70%{transform:translate(-2px,2px)}80%{transform:translate(-2px,-2px)}90%{transform:translate(2px,-2px)}100%{transform:translate(0)}}
@keyframes vibrate-3{0%{transform:translate(0)}10%{transform:translate(-2px,-2px)}20%{transform:translate(2px,-2px)}30%{transform:translate(-2px,2px)}40%{transform:translate(2px,2px)}50%{transform:translate(-2px,-2px)}60%{transform:translate(2px,-2px)}70%{transform:translate(-2px,2px)}80%{transform:translate(-2px,-2px)}90%{transform:translate(2px,-2px)}100%{transform:translate(0)}}
.shake-right{-webkit-animation:shake-right 10s cubic-bezier(.455,.03,.515,.955) infinite both;animation:shake-right 10s cubic-bezier(.455,.03,.515,.955) infinite both}
@-webkit-keyframes shake-right{0%,100%{-webkit-transform:rotate(0deg);transform:rotate(0deg);-webkit-transform-origin:100% 50%;transform-origin:100% 50%}10%{-webkit-transform:rotate(1deg);transform:rotate(1deg)}20%,40%,60%{-webkit-transform:rotate(-2deg);transform:rotate(-2deg)}30%,50%,70%{-webkit-transform:rotate(2deg);transform:rotate(2deg)}80%{-webkit-transform:rotate(-1deg);transform:rotate(-1deg)}90%{-webkit-transform:rotate(1deg);transform:rotate(1deg)}}
@keyframes shake-right{0%,100%{transform:rotate(0deg);transform-origin:100% 50%}10%{transform:rotate(1deg)}20%,40%,60%{transform:rotate(-2deg)}30%,50%,70%{transform:rotate(2deg)}80%{transform:rotate(-1deg)}90%{transform:rotate(1deg)}}
/*  */
.shake-horizontal { -webkit-animation: shake-horizontal 0.8s cubic-bezier(0.455,0.030,0.515,0.955) both; animation: shake-horizontal 0.8s cubic-bezier(0.455,0.030,0.515,0.955) both; }
@-webkit-keyframes shake-horizontal { 
  0%,100% { -webkit-transform: translateX(0); transform: translateX(0); } 
  10%,30%,50%,70% { -webkit-transform: translateX(-5%); transform: translateX(-5%); } 
  20%,40%,60% { -webkit-transform: translateX(5%); transform: translateX(5%); } 
  80% { -webkit-transform: translateX(4%); transform: translateX(4%); } 
  90% { -webkit-transform: translateX(-4%); transform: translateX(-4%); } 
}
@keyframes shake-horizontal { 
  0%,100% { -webkit-transform: translateX(0); transform: translateX(0); } 
  10%,30%,50%,70% { -webkit-transform: translateX(-5%); transform: translateX(-5%); } 
  20%,40%,60% { -webkit-transform: translateX(5%); transform: translateX(5%); } 
  80% { -webkit-transform: translateX(4%); transform: translateX(4%); } 
  90% { -webkit-transform: translateX(-4%); transform: translateX(-4%); } 
}

/* .scale-out-tr { -webkit-animation: scale-out-tr 0.5s cubic-bezier(0.550,0.085,0.680,0.530) both; animation: scale-out-tr 0.5s cubic-bezier(0.550,0.085,0.680,0.530) both; }
@-webkit-keyframes scale-out-tr { 
  0% { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; opacity: 1; } 
  100% { -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; opacity: 1; } 
}
@keyframes scale-out-tr { 
  0% { -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; opacity: 1; } 
  100% { -webkit-transform: scale(0); transform: scale(0); -webkit-transform-origin: 100% 0%; transform-origin: 100% 0%; opacity: 1; } 
} */

@keyframes scale-out-tr{from{transform:scale(1);transform-origin:center}to{transform:scale(0.5);transform-origin:center}}
.scale-out-tr{animation:scale-out-tr 1.5s ease both;}

/* sec?_bal 회전 애니메이션 */
/* .sec1_bal img,
.sec2_bal img,
.sec3_bal img,
.sec4_bal img {
  animation: rotate_voling 25s infinite;
  transform-origin: center center;
} */

@keyframes rotate_voling {
  /* 0% → 50% : 시계 방향 6바퀴 */
  0% {
    transform: rotate(0deg);
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  50% {
    transform: rotate(180deg); /* 6바퀴 (360*6) */
  }

  /* 50% → 100% : 반시계 방향 4바퀴 */
  50.0001% {
    transform: rotate(180deg);
    animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
  }
  100% {
    transform: rotate(0deg); /* 2160 - 1440 = 720deg */
  }
}



.sec1{
  overflow: hidden;
}
.sec1_tb{
  position: absolute;
  top: 10%;
  left: 57%;
  width: 31.6%;
}
.lg{
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 32%;
}
.rg{
  position: absolute;
  bottom: 0%;
  right: 0%;
  width: 26.7%;
}
.sec2_tt{
  position: absolute;
  top: 11%;
  left: 30%;
  width: 49.2%;
}
.sec2_bal{
  position: absolute;
  top: 11%;
  right: 6%;
  width: 12%;
}
.view_a{
  position: absolute;
  top: 46%;
  left: 59%;
  box-sizing: content-box;
  padding: 4% 2% 4% 18%;
  cursor: pointer;
  width: 8.5%;
}
.view_b{
  position: absolute;
  top: 64.5%;
  left: 59%;
  box-sizing: content-box;
  padding: 4% 2% 4% 18%;
  cursor: pointer;
  width: 8.5%;
}
.open_pop_a{
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  cursor: pointer;
  width: 100%;
  z-index: 30;
}
.open_pop_b{
  position: absolute;
  top: 58%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: none;
  cursor: pointer;
  width: 100%;
  z-index: 30;
}
.open_pop_a.active, .open_pop_b.active{
  display: block;
}
.redbal{
  position: absolute;
  top: 45%;
  left: 66.5%;
  width: 24.6%;
}
.sec3_tt{
  position: absolute;
  top: 6%;
  left: 21.5%;
  width: 39%;
}
.m1{
  position: absolute;
  top: 25.5%;
  left: 20%;
  width: 25.3%;
}
.m2{
  position: absolute;
  top: 39.5%;
  left: 20%;
  width: 20.2%;
}
.m3{
  position: absolute;
  top: 53%;
  left: 20%;
  width: 33.8%;
}
.sec3_bal{
  position: absolute;
  top: 6%;
  left: 6.5%;
  width: 12%;
}
.sec4_tt{
  position: absolute;
  top: 17%;
  left: 28%;
  width: 39%;
}
.sec4_bal{
  position: absolute;
  top: 19%;
  left: 77%;
  width: 12%;
}

.dis_view{
  display: none;
}
.started{
  position: absolute;
  top: 43%;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 3%;
}
.started li{
  position: relative;
  transition: .3s;
  cursor: pointer;
}
.started li .on_vew{
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition: .3s;
}
.started li.active .on_vew{
  opacity: 1;
  z-index: 1;
}
.started li.active .nosion{
  opacity: 0;
}
.started li img{
  width: 100%;
  transition: .3s;
}
.click_view [class^="on_vew"]{
  position: absolute;
  top: 5%;
  display: none;
}
.click_view [class^="on_vew"].active{
  display: block;
}

/* 공통 심장 박동 스타일 */
.heartbeat {
  transform-origin: center center;
  display: inline-block;
}

/* 패턴 1: 두근두근 (빠르게 두 번) */
.heartbeat-fast {
  animation: heartbeat-fast 1.3s infinite;
}

@keyframes heartbeat-fast {
  0%   { transform: scale(1); }
  15%  { transform: scale(1.35); }
  30%  { transform: scale(1); }
  45%  { transform: scale(1.25); }
  60%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* 패턴 2: 천천히 크게 (강한 박동) */
.heartbeat-strong {
  animation: heartbeat-strong 2s infinite;
}

@keyframes heartbeat-strong {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.4); }
  40%  { transform: scale(1); }
  60%  { transform: scale(1.3); }
  80%  { transform: scale(1); }
  100% { transform: scale(1); }
}

/* 패턴 3: 파도처럼 부드럽게 */
.heartbeat-wave {
  animation: heartbeat-wave 2.5s infinite;
}

@keyframes heartbeat-wave {
  0%   { transform: scale(1); }
  25%  { transform: scale(1.25); }
  50%  { transform: scale(1.15); }
  75%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}
.on_clik{
  position: absolute;
  bottom: 4.5%;
  left: 55%;
  width: 30%;
}

.sub_btn{
  box-sizing: border-box;
  cursor: pointer;
}
.sub_btn img{
  width: 100%;
}


.video_all{
  width: 100%;
}
#Video{
  display: block;
  width: 100%;
}

.text{
  position: absolute;
  bottom: 12%;
  left: 50%;
  transform: translateX(-50%);
  width: 66.2%;
}
.lefly{
  position: absolute;
  top: 33%;
  left: 10%;
  width: 45%;
  background: white;
  border: none;
  outline: none;
}
.backcurv{
  position: absolute;
  top: 70.1%;
  left: 8%;
  width: 50%;
  height: 6%;
  background: white;
  z-index: 15;
}
.backcurver{
  position: absolute;
  top: 31.5%;
  left: 51.5%;
  width: 5%;
  height: 45%;
  background: rgb(255 255 255);
  z-index: 15;
}


img, video {
  display: block;
  transform: translateZ(0); /* GPU 레이어 고정 */
}
img, video {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-transform: translateZ(0);
}
.hid_conts {
  overflow: hidden; /* 부모에서 잘라내기 */
}






















.score_section{
  width: 100%;
  margin: 0 auto;
  position: relative;
  padding: 10% 5%;
  background: linear-gradient(to right, #ce292c, #e43337);
  box-sizing: border-box;
}
.score_section .title{
  text-align: center;
  font-size: clamp(16px, 4vw, 30px);
  padding-bottom: 5%;
  color: #ffffff;
  width: 90%;
  margin: 0 auto;
  word-break: keep-all;
}
.score_section .score_drop{
  width: 90%;
  height: clamp(18px, 4vw, 20px);
  margin: 0 auto;
  margin-bottom: clamp(35px, 4vw, 50px);
}
.score_section .scroe_list{
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  text-align: center;
  width: 100%;

  position: absolute;
  top: 0;
}
.score_section .scroe_list li{
  position: relative;
  padding-top: clamp(35px, 4vw, 50px);
  font-size: clamp(10px, 4vw, 15px);
  cursor: pointer;
  transition: .3s;
  color: white;
}
.score_section .scroe_list li:hover{
  transform: scale(1.1);
}
.score_section .scroe_list li.active{
  transform: scale(1.1);
}
.score_section .scroe_list li.active::before{
  content: '';
  display: inline-block;
  width: clamp(30px, 4vw, 35px);
  height: clamp(30px, 4vw, 35px);
  border-radius: 50%;
  background: rgb(201, 191, 192);
  outline: 2px solid #fff;
  position: absolute;
  top: -10%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}
.score_section .scroe_list li:hover:has(+ li.active)::before{
  transform: scale(1);
}
.score_section .areart{
  display: flex;
  justify-content: space-between;
  color: #ffffff;
  margin: 0 auto;
  padding: 2% 0;
}
.score_section .areart div{
  font-size: clamp(10px, 3vw, 15px);
}
.score_section .areart div:last-child{
  text-align: right;
}
.score_section .texDiv{
  padding: 3% 0; 
  margin: 0 auto;
}
.score_section textarea{
  display: block;
  width: 90%;
  margin: 0 auto;
  border: 2px solid #e1173e;
  outline: none;
  height: 250px;
  padding: 3%;
  font-size: clamp(14px, 4vw, 20px);
  font-family: 'Gmarket Sans';
  box-sizing: border-box;
}