@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%); } 
}

.hr_go_1{
  position: absolute;
  bottom: 4.5%;
  right: 2%;
  width: 15%;
  height: 4%;
}
.hr_go_2{
  position: absolute;
  bottom: 0.5%;
  right: 2%;
  width: 15%;
  height: 2%;
}
.hr_go_3{
  position: absolute;
  bottom: 1%;
  right: 2%;
  width: 15%;
  height: 2%;
}
.hr_go_4{
  position: absolute;
  bottom: 1%;
  right: 2%;
  width: 15%;
  height: 2%;
}

video{width: 100%;}

body, html{
  height: auto !important;
  min-width: auto !important;
}
@media all and (max-width:768px){
  .d_mainHeaderWrap, .footerWrap{
    display: none;
  }
}

.sec1_tt{
  position: absolute;
  top: 22%;
  left: 44.5%;
  width: 45.5%;
}
.sec1_sub{
  position: absolute;
  top: 41%;
  left: 44.5%;
  width: 45.4%;
}
.sec1_it{
  position: absolute;
  right: 0;
  bottom: 0;
  width: 34.3%;
  z-index: 3;
}
.sec1{
  overflow: hidden;
}
.anit1{
  position: absolute;
  top: 77%;
  width: 210%;
}
.anit2{
  position: absolute;
  top: 85%;
  width: 210%;
}
.anit1 img{
  width: 100%;
}
.anit2 img{
  width: 100%;
}
.anit1, .anit2 {
  position: absolute;
  top: 0;
  width: 210%;
  display: flex;
}

.anit1 {
  top: 77%;
  left: 0;
}

.anit2 {
  top: 85%;
  right: 0;
}

.anit1 {
  animation: move1 25s linear infinite;
}

.anit2 {
  animation: move2 25s linear infinite alternate;
}

/* 기존 .anit1, .anit2 의 position/size/top/left 등은 그대로 유지 */
.anit1 {
  animation: belt-ping 25s linear infinite;
  will-change: transform;
}

.anit2 {
  animation: belt-pong 25s linear infinite;
  will-change: transform;
}

/* 기존 position, top, left 등은 그대로 유지 */
.anit1 {
  animation: move-left 25s linear infinite;
  will-change: transform;
}

.anit2 {
  animation: move-right 25s linear infinite;
  will-change: transform;
}

/* 왼쪽 방향으로 무한 이동 */
@keyframes move-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* 오른쪽 방향으로 무한 이동 */
@keyframes move-right {
  0%   { transform: translateX(0); }
  100% { transform: translateX(50%); }
}



.Vod_sec1{
  position: absolute;
  top: 15.5%;
  right: 0%;
  width: 68.5%;
}
.volume_wrap{
  cursor: pointer;
  position: relative;
  display: flex;
  justify-content: end;
  margin-top: 1.5%;
  margin-right: 6%;
}
.volume_wrap span{
  width: 33%;
}
.volume_wrap span img{
  width: 100%;
}
.page_href{
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translateX(-50%);
  width: 95%;
  gap: 1%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.page_href li{
  transition: .3s;
}
.page_href li:hover{
  transform: scale(1.035);
}
.Vod_sec2{
  position: absolute;
  top: 7.5%;
  right: 0%;
  width: 68.5%;
}
.numb{
  position: absolute;
  top: 37.3%;
  left: 7.1%;
  width: 28.9%;
  z-index: 2;
}
.grb{
  position: absolute;
  top: 56.5%;
  left: 5%;
  width: 90%;
  opacity: 1;
}
.Vod_sec3{
  position: absolute;
  top: 7.7%;
  right: 0%;
  width: 68.5%;
}
.upb{
  position: absolute;
  top: 78%;
  left: 56.5%;
  width: 29.8%;
}
.mov1{
  position: absolute;
  top: 38%;
  left: 6%;
  width: 52.4%;
}
.mov2{
  position: absolute;
  top: 43%;
  left: 6%;
  width: 52.4%;
}
.mov3{
  position: absolute;
  top: 48%;
  left: 6%;
  width: 52.4%;
}
.movs_a{
  position: absolute;
  top: 42%;
  left: 30%;
  width: 2.1%;
}
.movs_b{
  position: absolute;
  top: 47%;
  left: 30%;
  width: 2.1%;
}
.Se2{
  position: absolute;
  bottom: 8%;
  left: 78%;
  width: 19.1%;
}
.Se3{
  position: absolute;
  bottom: 9.4%;
  left: 67%;
  width: 30.6%;
}
.Se4{
  position: absolute;
  bottom: 9.7%;
  left: 82%;
  width: 15.6%;
}
.href_botom_1{
  position: absolute;
  width: 100%;
  height: 4.5%;
  bottom: 6.7%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.href_botom_2{
  position: absolute;
  width: 100%;
  height: 5%;
  bottom: 8%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.href_botom_3{
  position: absolute;
  width: 100%;
  height: 5%;
  bottom: 8%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.href_botom_1 a{
  display: block;
  width: 100%;
  height: 100%;
}
.href_botom_2 a{
  display: block;
  width: 100%;
  height: 100%;
}
.href_botom_3 a{
  display: block;
  width: 100%;
  height: 100%;
}
.quize_step{
  position: absolute;
  width: 100%;
  top: 57%;
}
.step1 .del_no{
  position: absolute;
  top: 34.2%;
  left: 20.5%;
  width: 27.3%;
}
.step1 .del_ok{
  position: absolute;
  top: 34.2%;
  left: 51.7%;
  width: 27.3%;
}
.step2{
  position: absolute;
  top: 0;
  opacity: 1;
}
.step2 .del_ok{
  position: absolute;
  top: 82%;
  right: 0%;
  width: 27%;
  height: 13%;
}
.step3 .del_ok{
  position: absolute;
  top: 34.2%;
  left: 20.5%;
  width: 27.3%;
}
.step3 .del_no{
  position: absolute;
  top: 34.2%;
  left: 51.7%;
  width: 27.3%;
}
.step4{
  position: absolute;
  top: 0;
  opacity: 1;
}
.step4 .del_ok{
  position: absolute;
  top: 82%;
  right: 0%;
  width: 27%;
  height: 13%;
  cursor: pointer;
}
.step5 .del_1{
  position: absolute;
  top: 31.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 43.1%;
  cursor: pointer;
}
.step5 .del_2{
  position: absolute;
  top: 45.8%;
  left: 50%;
  transform: translateX(-50%);
  width: 43.1%;
  cursor: pointer;
}
.step5 .del_3{
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  width: 43.1%;
  cursor: pointer;
}
.step5 .del_4{
  position: absolute;
  top: 75%;
  left: 50%;
  transform: translateX(-50%);
  width: 43.1%;
  cursor: pointer;
}
.step6{
  position: absolute;
  top: 0;
  opacity: 1;
}
.step6 .del_ok{
  position: absolute;
  top: 83.5%;
  right: 0%;
  width: 27%;
  height: 13%;
  cursor: pointer;
}


.step7 .del_5{
  position: absolute;
  top: 31.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 60.7%;
  cursor: pointer;
}
.step7 .del_6{
  position: absolute;
  top: 45.8%;
  left: 50%;
  transform: translateX(-50%);
  width: 60.7%;
  cursor: pointer;
}
.step7 .del_7{
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translateX(-50%);
  width: 60.7%;
  cursor: pointer;
}
.step7 .del_8{
  position: absolute;
  top: 74.5%;
  left: 50%;
  transform: translateX(-50%);
  width: 60.7%;
  cursor: pointer;
}
.step8{
  position: absolute;
  top: 0;
  opacity: 1;
}

.del_ok, .del_no{
  cursor: pointer;
}
.quize_step li div{
  transition: .3s;
}
.quize_step li [class^="del_"]:hover{
  /* transform: scale(1.025); */
}
.quize_step li{
  display: none;
}
.quize_step li.active{
  display: block;
}
#section_1, #section_2, #section_3{
  /* display: none; */
}
#section_1.active, #section_2.active, #section_3.active{
  display: block;
}
.sel_1{
  width: 85.3%;
}
.sel_2{
  width: 87.5%;
}
.sel_3{
  width: 76.4%;
  left: 12.3% !important;
}
.sel_4{
  width: 79.2%;
  left: 9.9% !important;
}
.sel_5{
  width: 88.7%;
  bottom: 83.2% !important;
}
[class^="sel_"]{
  position: absolute;
  left: 10%;
  bottom: 83.5%;
  display: none;
}
[class^="sel_"].active{
  display: block;
}
[class^="ses_list"]{
  display: none;
}
[class^="ses_list"].active{
  display: flex;
}
.ses_list_a{
  position: absolute;
  top: 10.8%;
  left: 5%;
  width: 40%;
  height: 6.3%;
  /* background-color: rgba(13, 143, 143, 0.479); */
  z-index: 10;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1%;
}
.ses_list_b{
  position: absolute;
  top: 8.8%;
  left: 5%;
  width: 40%;
  height: 8.5%;
  /* background-color: rgba(13, 143, 143, 0.479); */
  z-index: 10;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1%;
}
.ses_list_c{
  position: absolute;
  top: 8.5%;
  left: 5%;
  width: 40%;
  height: 8.7%;
  /* background-color: rgba(13, 143, 143, 0.479); */
  z-index: 10;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1%;
}
.ses_list_d{
  position: absolute;
  top: 8.3%;
  left: 5%;
  width: 40%;
  height: 8.7%;
  /* background-color: rgba(13, 143, 143, 0.479); */
  z-index: 10;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1%;
}
.ses_list_e{
  position: absolute;
  top: 8.7%;
  left: 5%;
  width: 40%;
  height: 7.7%;
  /* background-color: rgba(13, 143, 143, 0.479); */
  z-index: 10;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 1%;
}
[class^="ses_list"] li{
  width: 100%;
  height: 100%;
  cursor: pointer;
}
.popon{
  position: absolute;
  position: absolute;
  top: 57.7%;
  width: 100%;
  cursor: pointer;
  display: none;
}
.popon.active{
  display: block;
}