/* sub_visual */
#header, #footer, .quick-menu { display: none; }
.sub-game{
  background-color: #000;
  width: 100vw;
  height: 100vh;
  font-family: 'NeoDungGeunmo', sans-serif;
  position: relative;
  overflow: hidden;
}
.game-sec-area{
  width: 100%;
  height: 100%;
  position: relative;
}
.game-sec{
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  visibility: hidden;
}
.game-sec.play{
  opacity: 1;
  visibility: visible;
}

.game-point{
  position: absolute;
  top: 1.563vw;
  right: 1.563vw;
  z-index: 3;
  display: flex;
  gap: 0 0.417vw;
}

.game-point .star-box{
  display: flex;
  gap: 0 0.260vw;
}
.game-point .ico-star{
  display: block;
  width: 1.615vw;
  height: 1.615vw;
  background: url(/asset/img/sub/game/ico-star.svg)no-repeat center center /cover;
}
.game-point .ico-star.none{
  display: none;
}
.game-point .txt-box{
  display: flex;
  align-items: center;
  gap: 0 0.521vw;
}

.game-point .txt-box .txt-kwon{
  text-align: center;
-webkit-text-stroke-width: 0.052vw;
-webkit-text-stroke-color: #B85400;
font-size: 1.458vw;
background: linear-gradient(180deg, #FFD067 0%, #FFA024 47.12%, #FF8736 100%);
background-clip: text;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}

.game-point .txt-box .per-cent{
  font-size: 1.667vw;
}

.game-exit-btn{
  position: absolute;
  bottom: 1.563vw;
  right: 1.563vw;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13.177vw;
  height: 5.313vw;
  background: url(/asset/img/sub/game/ico-exitbg.svg)no-repeat center center /cover;
  gap: 0 0.781vw;
}
.game-exit-btn .door{
  display: block;
  width: 1.771vw;
  height: 2.344vw;
  background: url(/asset/img/sub/game/ico-door.svg)no-repeat center center /cover;
}
.game-exit-btn p{
  font-size: 1.458vw;
}
.game-exit-btn .fontsize-36{
 font-size: 1.875vw; 
}




/*.home-btn 추가 */


.home-btn{
  position: absolute;
  bottom: 1.563vw;
  right: 1.563vw;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 13.177vw;
  height: 5.313vw;
  background: url(/asset/img/sub/game/ico-exitbg.svg)no-repeat center center /cover;
  gap: 0 0.781vw;
}
.home-btn .door{
  display: block;
  width: 1.771vw;
  height: 2.344vw;
  background: url(/asset/img/sub/game/ico-door.svg)no-repeat center center /cover;
}
.home-btn p{
  font-size: 1.458vw;
}
.home-btn .fontsize-36{
 font-size: 1.875vw; 
}




.game-exit-wrap{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  background-color: rgba(25,25,25,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .5s, visibility .5s;
}
.game-exit-wrap.on{
  opacity: 1;
  visibility: visible;
}
.game-exit-wrap .exit-tit{
  -webkit-text-stroke-width: 0.104vw;
  -webkit-text-stroke-color: #B85400;
  font-size: 3.75vw;
  background: linear-gradient(180deg, #FFD067 0%, #FFA024 47.12%, #FF8736 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.075vw;
}
.game-exit-wrap .exit-click{
  display: flex;
  align-items: center;
  gap: 0 1.042vw;
}
.game-exit-wrap .exit-click .click-btn{
  width: 21.510vw;
  height: 5.469vw;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 2.188vw;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.game-exit-wrap .exit-click .click-btn.red{
  background-image: url(/asset/img/sub/game/ico-exitred.svg);
}
.game-exit-wrap .exit-click .click-btn.green{
  background-image: url(/asset/img/sub/game/ico-exitgreen.svg);
}


.game-sec.intro01{background-image: url(/asset/img/sub/game/bg01.png);}
.game-sec.intro02{background-image: url(/asset/img/sub/game/bg02.png); background-position: bottom left;}
.game-sec.quiz01{background-image: url(/asset/img/sub/game/bg03.png); background-position: bottom left;}
.game-sec.quiz02{background-image: url(/asset/img/sub/game/bg04.png); background-position: bottom left;}
.game-sec.quiz02:has(.bg02.on){background-image: url(/asset/img/sub/game/bg04-01.png);}
.game-sec.quiz03{background-image: url(/asset/img/sub/game/bg05.png); background-position: bottom left;}
.game-sec.quiz03:has(.bg02.on){background-image: url(/asset/img/sub/game/bg05-01.png);}
.game-sec.quiz04{background-image: url(/asset/img/sub/game/bg07-01.png); background-position: bottom left;}
.game-sec.quiz04:has(.bg02.on){background-image: url(/asset/img/sub/game/bg07-01.png);}
.game-sec.quiz05{background-image: url(/asset/img/sub/game/bg07.png); background-position: bottom left;}
.game-sec.quiz05:has(.bg02.on){background-image: url(/asset/img/sub/game/bg07-01.png);}
.game-sec.final01{background-image: url(/asset/img/sub/game/bg08.png); background-position: bottom left;}
.game-sec.final01:has(.bg02.on){background-image: url(/asset/img/sub/game/bg08-01.png);}

.page-talk-box{
  position: absolute;
  left: 50%;
  transform: translate(-50%,-50%);
  top: 50%;
  width: 100%;
  z-index: 2;
  height: 100%;
}

.page-talk-box .talk-box{
  border-radius: 1.042vw;
  background: rgba(25, 25, 25, 0.50);
  width: 93.75vw;
  height: 20.833vw;
  font-size: 2.604vw;
  line-height: 3.646vw;
  display: flex;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
}
.page-talk-box .talk-box .purple-txt{
  color: #FFF;
  -webkit-text-stroke-width: 0.104vw;
  -webkit-text-stroke-color: #C47EF4;
}
.page-talk-box.type02 .talk-box{
  border-radius: 0;
  height: 21.875vw;
  width: 100%;
}
.page-talk-box.center{
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.page-talk-box .talk-btn{
  display: flex;
  justify-content: center;
}
.page-talk-box .start-btn{
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5vw;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  margin-left: auto;
  margin-right: auto;
}
.page-talk-box .start-btn.blue-btn{
  background-image: url(/asset/img/sub/game/ico-start.svg);
  width: 28.542vw;
  height: 5.469vw;
}
.page-talk-box .start-btn.green-btn{
  background-image: url(/asset/img/sub/game/ico-btngreen.svg);
  width: 21.510vw;
  height: 5.469vw;
}
.page-talk-box .arw-btn{
  font-size: 2.5vw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.521vw 0;
}
.page-talk-box .arw-icon{
  width: 6.979vw;
  height: 5.313vw;
  background: url(/asset/img/sub/game/ico-arwgreen.svg)no-repeat center center /cover;
  margin-left: auto;
  margin-right: auto;
}

.page-talk-box .name-tag-box{
  display: flex;
  gap: 0 2.083vw;
}
.page-talk-box .name-tag-box:has(.is-typing).line{
  padding-top: 2.083vw;
  border-top: 0.052vw solid #fff;
}

.page-talk-box .name-tag-box .name-tag{
  width: 11.771vw;
  height: 3.594vw;
  background: url(/asset/img/sub/game/ico-nametag.png)no-repeat center center /cover;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 2.188vw;
}

.page-talk-box .name-tag-box .is-team{display: none;}
.name-tag-box:has(.is-team + .is-typing) .is-team {display: block;}
.air-text-box{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: bottom left;
  pointer-events: none;
  opacity: 0;
    visibility: hidden;
    transform: translateY(3vw);
}
.game-sec .air-text-con.on + .air-text-box{
  animation: moveInAndFade 1s ease-out 1s forwards;
}

@keyframes moveInAndFade {
    /* 0% (시작 상태): 숨겨져 있으며, 3vw 아래에 위치 */
    from {
        opacity: 0;
        transform: translateY(3vw);
        visibility: hidden; /* 애니메이션 시작 전 상태를 명확히 지정 */
    }

    /* 100% (종료 상태): 완전히 나타나며, 원래 위치로 이동 */
    to {
        opacity: 1;
        transform: translateY(0);
        visibility: visible;
    }
}

.game-sec.intro02 .air-text-box{background-image: url(/asset/img/sub/game/intro02-airtxt.png);}
.game-sec.quiz01 .air-text-box{background-image: url(/asset/img/sub/game/quiz01-airtxt.png);}
.game-sec.quiz02 .air-text-box01{background-image: url(/asset/img/sub/game/quiz02-airtxt01.png);}
.game-sec.quiz02 .air-text-box02{background-image: url(/asset/img/sub/game/quiz02-airtxt02.png);}
.game-sec.quiz03 .air-text-box{background-image: url(/asset/img/sub/game/quiz03-airtxt.png);}
.game-sec.quiz04 .air-text-box01{background-image: url(/asset/img/sub/game/quiz04-airtxt01.png);}
.game-sec.quiz04 .air-text-box02{background-image: url(/asset/img/sub/game/quiz04-airtxt02.png);}
.game-sec.quiz05 .air-text-box01{background-image: url(/asset/img/sub/game/quiz05-airtxt01.png);}
.game-sec.quiz05 .air-text-box02{background-image: url(/asset/img/sub/game/quiz05-airtxt02.png);}
.game-sec.quiz05 .air-text-box03{background-image: url(/asset/img/sub/game/quiz05-airtxt03.png);}
.game-sec.final01 .air-text-box{background-image: url(/asset/img/sub/game/final01-airtxt.png); overflow: hidden;}


.game-sec.final01 .air-heart{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: cover;
  pointer-events: none;
  opacity: 0; /* 애니메이션 전에는 숨김 */
}

.game-sec.final01 .air-text-con.on ~ .air-text-box .air-heart{
  /* 공통 애니메이션 속성 */
  animation-name: fly-up;
  animation-duration: 2s; /* 애니메이션 총 시간 */
  animation-fill-mode: forwards; /* 애니메이션 종료 후 마지막 상태 유지 */
  animation-iteration-count: infinite; /* 👈 이 부분을 infinite로 수정했습니다. (무한 반복) */
}
@keyframes fly-up {
    0% {
        opacity: 0; /* 시작 시 투명 */
        transform: translateY(1.563vw); /* 아래쪽에서 작게 시작 */
    }
    50% {
        opacity: 1; /* 빠르게 나타남 */
        transform: translateY(0); /* 원래 크기로 복원 */
    }
    100% {
        opacity: 0; /* 완전히 사라짐 */
        transform: translateY(-1.563vw); /* 위로 더 이동하며 살짝 커짐 */
    }
}

.game-sec.final01 .air-heart.heart01{animation-delay: 2s; background-image: url(/asset/img/sub/game/ico-heart01.png);}
.game-sec.final01 .air-heart.heart02{animation-delay: 2.1s; background-image: url(/asset/img/sub/game/ico-heart02.png);}
.game-sec.final01 .air-heart.heart03{animation-delay: 2.2s; background-image: url(/asset/img/sub/game/ico-heart03.png);}

.game-talk{
  opacity: 0;
  visibility: hidden;
}
.game-talk.on{
  opacity: 1;
  visibility: visible;
}

/* 퀴즈 */
.quiz-area{
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  background: rgba(25, 25, 25, 0.70);
}
/* .quiz-area:before{
  content: '';
  width: 100vw;
  height: 100vw;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  position: absolute;
  z-index: 1;
} */
.quiz-area .quiz-cont{
  position: relative;
  z-index: 2;
  max-width: 55.729vw;
}
.quiz-area .quiz-tit{
  text-align: center;
  -webkit-text-stroke-width: 0.104vw;
  -webkit-text-stroke-color: #B85400;
  font-size: 6.25vw;
  line-height: 8.75vw; /* 168px */
  background: linear-gradient(180deg, #FFD067 0%, #FFA024 47.12%, #FF8736 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.quiz-area .quiz-txt{
  font-size: 2.604vw;
  line-height: 3.646vw; /* 70px */
  letter-spacing: -0.052vw;
}
.quiz-area .quiz-txt .color-yellow{
  color: #F6B500;
}

.quiz-area .quiz-ox{
  display: flex;
  gap: 0 2.865vw;
  justify-content: center;
}
.quiz-area .quiz-ox .quiz-btn{
  width: 7.240vw;
  height: 7.240vw;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.quiz-area .quiz-ox .quiz-o{
  background-image: url(/asset/img/sub/game/ico-obtn.png);
}

.quiz-area .quiz-ox .quiz-x{
  background-image: url(/asset/img/sub/game/ico-xbtn.png);
}

.quiz-area .result-txt{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 1.042vw;
  font-size: 2.604vw;
  line-height: 3.646vw;
  letter-spacing: -0.052vw;
}
.quiz-area .quiz-result{display: none;}
.quiz-area .quiz-result.block{display: block;}
.quiz-area .right-result .result-txt{
  background: linear-gradient(180deg, #BEFFAF 0%, #44D055 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.quiz-area .wrong-result .result-txt{
  background: linear-gradient(0deg, #FF4146 0%, #FF787C 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.quiz-area .result-txt .emoticon{
  width: 3.646vw;
  height: 3.646vw;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
}
.quiz-area .right-result .emoticon{
  background-image: url(/asset/img/sub/game/ico-emo01.png);
}
.quiz-area .wrong-result .emoticon{
  background-image: url(/asset/img/sub/game/ico-emo02.png);
}
.quiz-area .white-box{
  background-color: rgba(255,255,255,.3);
  border:0.417vw solid #cecece;
  padding: 1.823vw 5.208vw;
  position: relative;
}

.quiz-area .white-box:before,
.quiz-area .white-box:after{
  content: '';
  width: 0.417vw;
  height: calc(100% - 2.708vw);
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-top: 0.417vw solid #fff;
  border-bottom: 0.417vw solid #fff;
}
.quiz-area .white-box:before{
  left: 1.354vw;
}
.quiz-area .white-box:after{
  right: 1.354vw;
}
.quiz-area .white-box .white-tit{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 0.781vw;
  font-size: 2.188vw;
}
.quiz-area .white-box .ico-treasure{
  display: block;
  width: 2.656vw;
  height: 1.927vw;
  background: url(/asset/img/sub/game/ico-treasure.png)no-repeat center center /cover;
}
.quiz-area .white-box .white-txt{
  font-size: 1.875vw;
  line-height: 2.604vw;
}

.quiz-area .quiz-point {
  display: flex;
  align-items: center;
  gap: 0 2.604vw;
  justify-content: center;
  position: relative;
}

.quiz-area .quiz-point .star-zone{
  display: flex;
  align-items: center;
  gap: 0 1.042vw;
  font-size: 2.083vw;
}
.quiz-area .quiz-point .star-icon{
  width: 2.656vw;
  height: 3.542vw;
  background: url(/asset/img/sub/game/ico-star02.svg)no-repeat center center /cover;
}

.quiz-area .percent-zone .txt-box{
  display: flex;
  align-items: center;
  gap:  0 1.042vw;
}
.quiz-area .percent-zone .txt-kwon{
  text-align: center;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #B85400;
  font-size: 1.875vw;
  line-height: 2.604vw;
  letter-spacing: -0.038vw;
  background: linear-gradient(180deg, #FFD067 0%, #FFA024 47.12%, #FF8736 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.quiz-area .percent-zone .per-cent{
  font-size: 2.083vw;
  line-height: 2.917vw;
}

.quiz-area .hint-box .hint-tit{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0 0.625vw;
  color: #FEB23D;
  font-size: 2.188vw;
}
.quiz-area .hint-box .hint-txt{
  font-size: 2.188vw;
}
.quiz-area .hint-box .thunder{
  display: block;
  width: 2.031vw;
  height: 2.604vw;
  background: url(/asset/img/sub/game/ico-thunder.svg)no-repeat center center /cover;
}

.you-win-box{
  width: 38.542vw;
  height: 5.625vw;
  background: url(/asset/img/sub/game/you-win-txt.svg)no-repeat center center /cover;
  position: relative;
  opacity: 0;
}
.you-win-box:before{
  position: absolute;
  width: 56.823vw;
  height: 23.281vw;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  content: '';
  background: url(/asset/img/sub/game/you-win-bg.svg)no-repeat center center /cover;
  opacity: 0;
}

.on .you-win-box{
  animation: pop-in-grow 1.5s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards; 
}
.on .you-win-box:before{
  animation: blink-star 5s linear infinite; 
  animation-delay: 1.75s; 
}

/* YOU WIN! 텍스트 커짐효과 */
@keyframes pop-in-grow {
    0% {
        opacity: 0;
        transform: scale(0.1); /* 매우 작게 시작 */
    }
    60% {
        opacity: 1;
        transform: scale(1.3); /* 빵빠레처럼 크게 튀어나옴 (오버슈트) */
    }
    100% {
        opacity: 1;
        transform: scale(1); /* 최종 크기로 안착 */
    }
}

/* YOU WIN! 뒤 반짝임 효과*/
@keyframes blink-star {
    0%{ 
        opacity: 1; 
    }
    48% { 
        opacity: 0; 
    }
    50% { 
        opacity: 1; 
    }
    52% { 
        opacity: 0; 
    }
    100% { 
        opacity: 1; 
    }
}

.page-talk-box .right-talk-btn{
  position: absolute;
  right: 4.167vw;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
}

/* #fireworksCanvas{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
} */
.medal-you-box{
  position: relative;
  z-index: 2;
}
.medal-you-box:before{
  content: '';
  width: 69.010vw;
  height: 28.792vw;
  background: url(/asset/img/sub/game/ico-medalbg.svg)no-repeat center center /cover;
  position: absolute;
  left: 50%;
  transform: translateX(-50%) scale(0);
  opacity: 0;
  top: -3.125vw;
  z-index: -1;
  transition: transform 1s;
  transition-delay: 2.5s;
}
.on .medal-you-box:before{
  transform: translateX(-50%) scale(1);
  opacity: 1;
}
.medal-you-box .medal-box{
  position: relative;
  width: fit-content;
  margin-left: auto;
  margin-right: auto;
}
.medal-you-box .medal-img{
  width: 49.896vw;
  height: 11.406vw;
  background: url(/asset/img/sub/game/ico-medal.svg)no-repeat center center /cover;
}
.medal-you-box .medal-txt{
  color: #A94D00;
  font-size: 5.208vw;
  letter-spacing: -0.104vw;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding-top: 4.167vw;
  line-height: 7.292vw;
  opacity: 0;
  transform: translateY(1vw);
  transition: opacity 1s, transform 1s;
  transition-delay: 1s;
}
.on .medal-you-box .medal-txt{
  opacity: 1;
  transform: translateY(0);
}
.on .medal-you-box .medal-img{
  animation: medal-clip .5s linear;

}
.medal-you-box .txt-box{
  font-size: 2.604vw;
  line-height: 3.646vw;
  letter-spacing: -0.052vw;
  opacity: 0;
  transition: opacity 1s;
  transition-delay: 2s;
}
.on .medal-you-box .txt-box{
  opacity: 1;
}
.medal-you-box .txt-box .yellow{
  color: #FFD83F;;
}

/* 메달 배경 */
@keyframes medal-clip{
  0% {
    clip-path:inset(0 100%);
  }
  100% {
    clip-path:inset(0);
  }
}
/* 메달 폭죽 */
@keyframes medal-pang{
  0% {
    transform: scale(.1);
  }
  100% {
    transform: scale(1);
  }
}


.input-area-zone{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}
.input-area-zone .input-cont{
  width: 62.135vw;
  height: 34.375vw;
  background: url(/asset/img/sub/game/final01_bg01.png)no-repeat center center /cover;
  padding: 7.292vw 13.542vw 3.125vw;
}

.input-area-zone .input-tit{
  width: 33.958vw;
  height: 4.479vw;
  background: url(/asset/img/sub/game/final01_tit01.png)no-repeat center center /cover;
}
.input-area-zone .input-txt{
  color: #417914;
  font-size: 1.563vw;
  line-height: 2.188vw;
  letter-spacing: -0.078vw;
}

.input-area-zone .input-form{
  background: url(/asset/img/sub/game/final01_input.png)no-repeat center center /cover;
  width: 33.646vw;
  height: 9.688vw;
  padding: 1.823vw 2.969vw 0 2.969vw;
  display: flex;
  align-items: center;
}

.input-area-zone .ico-clover{
  display: block;
  width: 1.094vw;
  height: 1.25vw;
  background: url(/asset/img/sub/game/final01_clover.svg)no-repeat center center /cover;
  margin-top: 0.3vw;
}
.input-area-zone .input-box{
  display: flex;
  align-items: center;
  gap: 0 1.563vw;
}
.input-area-zone .input-box .tit{
  display: flex;
  align-items: center;
  color: #417914;
  gap:  0 0.521vw;
}
.input-area-zone .input-box .tit .r-tit{
  display: block;
  min-width: 4.479vw;
  width: 4.479vw;
  font-size: 1.458vw;
  font-weight: 700;
  line-height: 2.031vw;
  letter-spacing: -0.073vw;
}

.input-area-zone .input-box .txt{
  color: #417914;
  font-size: 1.458vw;
  line-height: 2.031vw;
  letter-spacing: -0.073vw;
  background: transparent;
  width: 13vw;
}

.input-area-zone .input-sign {
    width: 100%;
    height: 2.604vw; 
    box-sizing: border-box;
    border-bottom: 0.104vw dashed #417914;
}

#signaturePad {
    display: block;
    width: 100%;
    height: 100%;
    image-rendering: pixelated; 
}

.page-talk-box .game-next:not(.quiz-btn):before,
.page-talk-box .game-prev:not(.quiz-btn):before{
  position: fixed;
  width: 100vw;
  height: 100vh;
  z-index: 1;
  content: '';
  cursor: auto;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
@media all and (max-width: 1200px) {
}

@media all and (max-width: 1024px) {
}

@media all and (max-width: 768px) {
}

@media all and (max-width: 576px) {
}
.page-talk-box .name-tag-box:has(.ico-heart){
  gap: 0 1.042vw;
}
.page-talk-box .talk-box i.ico-heart{
  width: 2.917vw;
  height: 2.917vw;
  background: url(/asset/img/sub/game/ico-iheart.png)no-repeat center center /cover;
  align-self: center;
}

.quiz-area .example-list {
  display: flex;
  flex-direction: column;
  gap: 1.563vw 0;
}
.quiz-area .example-list .quiz-btn{
  position: relative;
  width: auto;
  height: auto;
  color: #fff;
  font-size: 2.604vw;
}
.quiz-area .example-list .quiz-btn:before{
  content: '';
  width: 3.125vw;
  margin-right: 1.042vw;
  height: 3.125vw;
  display: inline-flex;
  vertical-align: middle;
  background: url(/asset/img/sub/game/ico-checkbox.png)no-repeat center center /cover;
}