@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;}
@-webkit-keyframes s1pin-rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes s1pin-rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
.sec1{
  overflow: hidden;
}
.video_all {
  position: absolute;
  left: 55%;
  width: 40%;
  z-index: 2;
  bottom: 0%;
}

.Vod {
  width: 100%;
  z-index: 2;
  position: relative;
  border-radius: 6px;
  border: 1px solid white;
  overflow: hidden;
  box-sizing: border-box;
  margin-bottom: 1.5%;
}

#Video1, #Video2, #Video3{
  width: 100%;
  display: none;
}
#Video1.active, #Video2.active, #Video3.active{
  display: block;
}
.volume {
  margin-left: auto;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  cursor: pointer;
}

@media all and (max-width: 768px) {
  .volume {
    width: 75%;
    margin: 0 auto;
  }
}
.sec1_sub{
  position: absolute;
  top: 8.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
}
.sec1_b{
  position: absolute;
  top: 32.5%;
  right: 6%;
  width: 14.4%;
}
.sec1_sub_t{
  position: absolute;
  top: 67%;
  left: 10%;
  width: 17.1%;
}
.sec1_arw{
  position: absolute;
  top: 61%;
  left: 5%;
  width: 13%;
}
.vv_1{
  position: absolute;
  top: 13.5%;
  left: 5%;
  width: 63.6%;
}
.vv_2{
  position: absolute;
  top: 46.5%;
  left: 6%;
  width: 59.8%;
}
.vv_3{
  position: absolute;
  top: 78.5%;
  left: 6%;
  width: 60.2%;
}
[class^="vd_tn_"]{
  opacity: 1;
  transition: .2s;
}
[class^="vd_tn_"].active{
  opacity: 0;
}
.vd_tn_a{
  position: absolute;
  box-sizing: content-box;
  width: 7.3%;
  top: 58%;
  left: 29%;
  padding: 5% 13% 5% 1%;
  cursor: pointer;
}
.vd_tn_b{
  position: absolute;
  box-sizing: content-box;
  width: 7.3%;
  top: 67.5%;
  left: 29%;
  padding: 5% 13% 5% 1%;
  cursor: pointer;
}
.vd_tn_c{
  position: absolute;
  box-sizing: content-box;
  width: 7.3%;
  top: 77%;
  left: 29%;
  padding: 5% 13% 5% 1%;
  cursor: pointer;
}
.shake-vertical{-webkit-animation:shake-vertical 10s cubic-bezier(.455,.03,.515,.955) infinite both;animation:shake-vertical 10s cubic-bezier(.455,.03,.515,.955) infinite both}
@-webkit-keyframes shake-vertical{0%,100%{-webkit-transform:translateY(0);transform:translateY(0)}10%,30%,50%,70%{-webkit-transform:translateY(-4%);transform:translateY(-4%)}20%,40%,60%{-webkit-transform:translateY(4%);transform:translateY(4%)}80%{-webkit-transform:translateY(3.2%);transform:translateY(3.2%)}90%{-webkit-transform:translateY(-3.2%);transform:translateY(-3.2%)}}@keyframes shake-vertical{0%,100%{-webkit-transform:translateY(0);transform:translateY(0)}10%,30%,50%,70%{-webkit-transform:translateY(-4%);transform:translateY(-4%)}20%,40%,60%{-webkit-transform:translateY(4%);transform:translateY(4%)}80%{-webkit-transform:translateY(3.2%);transform:translateY(3.2%)}90%{-webkit-transform:translateY(-3.2%);transform:translateY(-3.2%)}}

.qna_1{
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%);
}
.qz_btn{
  position: absolute;
  top: 68%;
  left: 50%;
  transform: translateX(-50%);
  width: 50%;
  height: 10%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 4%;
  color: white;
  font-size: 40px;
}
.qz_btn div{
  border: 2px solid white;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: .2s;
  cursor: pointer;
}
.qz_btn div.active{
  background-color: white;
  color: #2b2d34;
}
[class^="set_"]{
  display: none;
}
[class^="set_"].active{
  display: block;
}
@media all and (max-width:768px){
  .qz_btn{
    width: 70%;
    font-size: clamp(14px, 4vw, 30px);
  }
}

.scale-down-center {
  -webkit-animation: scale-down-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
          animation: scale-down-center 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

@-webkit-keyframes scale-down-center {
  0% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
@keyframes scale-down-center {
  0% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    opacity: 1;
  }
}
