@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@100;300;400;500;700&family=Noto+Serif+TC:wght@500;600;700&family=Rethink+Sans:wght@700&&display=swap");
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

blockquote, q {
  quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: '';
  content: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

a {
  text-decoration: none;
}

*, *::before, *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

html, body {
  -ms-touch-action: manipulation;
      touch-action: manipulation;
}

body {
  position: relative;
  background-color: #f8edd8;
  height: 100vh;
}

p {
  font-size: 16px;
  letter-spacing: 0.5px;
  line-height: 1;
  font-family: 'Rethink Sans', Helvetica , Arial , sans-serif , serif;
}

a {
  display: block;
}

img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: bottom;
}

.for_m {
  display: none;
}

@media (max-width: 768px) {
  .for_m {
    display: block;
  }
  .for_pc {
    display: none;
  }
}

.wrap {
  position: static;
  max-width: none;
  -webkit-transform: none;
          transform: none;
  -webkit-box-shadow: none;
          box-shadow: none;
  max-height: none;
  height: 100%;
  background: url(../images/pc.jpg) no-repeat top center/cover;
}

.wrap .pc_group {
  position: absolute;
  bottom: 5%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 188px;
}

.wrap .pc_group .pc_word {
  width: 86%;
  margin: 0 auto 6%;
}

.wrap .pc_group .pc_qr {
  position: relative;
}

.wrap .pc_group .pc_qr .pc_sm {
  position: absolute;
  width: 58%;
  top: -16%;
  right: -28%;
}

.wrap .page_box {
  display: none;
}

.page_box {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.page_box::-webkit-scrollbar {
  display: none;
}

.bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.content {
  position: relative;
}

.an {
  opacity: 0;
}

.btn_sm {
  -webkit-animation: sm 1.5s infinite ease-in-out;
          animation: sm 1.5s infinite ease-in-out;
}

@media (max-width: 768px) {
  body {
    min-height: calc(var(--vh, 1vh) * 100);
    height: 100%;
    background-color: #fff;
  }
  .wrap {
    position: relative;
    top: 0;
    left: 0;
    -webkit-transform: none;
            transform: none;
    max-width: none;
    height: auto;
    max-height: none;
    -webkit-box-shadow: none;
            box-shadow: none;
    background: none;
    background-color: #dbdbdb;
    overflow: hidden;
    width: 100%;
  }
  .wrap .pc_group {
    display: none;
  }
  .wrap .page_box {
    display: block;
  }
  .page_box {
    border-radius: 0;
    min-height: calc(var(--vh, 1vh) * 100);
  }
}

.btn_common {
  position: relative;
  width: 40%;
  margin: 0 auto;
  display: none;
}

.btn_common .btn_inner {
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  padding-top: 29.5%;
}

.btn_common .btn_sm {
  position: absolute;
  top: -58%;
  right: -29%;
  width: 60%;
}

@-webkit-keyframes sm {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.06);
            transform: scale(1.06);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes sm {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.06);
            transform: scale(1.06);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes arrow {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(20%);
            transform: translateY(20%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@keyframes arrow {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(20%);
            transform: translateY(20%);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}

@-webkit-keyframes warnimg {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.08);
            transform: scale(1.08);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes warnimg {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  50% {
    -webkit-transform: scale(1.08);
            transform: scale(1.08);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes star {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes star {
  0% {
    opacity: 1;
  }
  50% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.index {
  background: #221711 url(../images/kv_bg.jpg) no-repeat top/100%;
}

.index .kv_sub_wrap {
  width: 72%;
  -webkit-transform: rotate(4deg);
          transform: rotate(4deg);
  position: absolute;
  top: 32vw;
  left: 21.9%;
}

.index .kv_sub_wrap .kv_new {
  width: 40%;
}

.index .kv_sub_wrap .kv_new .kv_new_inner {
  background-image: url(../images/kv_new.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: top left;
  width: 100%;
  padding-top: 47%;
}

.index .kv_sub_wrap .kv_sub {
  margin-top: 3%;
}

.index .kv_sub_wrap .kv_sub .kv_sub_inner {
  background-image: url(../images/kv_sub.png);
  background-repeat: no-repeat;
  background-size: auto 100%;
  background-position: top left;
  width: 100%;
  padding-top: 17.8%;
}

.index .group {
  position: absolute;
  bottom: 5%;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 100%;
  height: 56vw;
}

.index .group .kv_title {
  width: 48%;
  margin: 0 auto 6%;
}

.index .btn_common {
  margin-top: 3%;
  width: 48%;
}

.index .btn_common .btn_inner {
  background-image: url(../images/kv_btn.png);
}

.foreword {
  background: url(../images/foreword_bg.jpg) no-repeat top/cover;
}

.foreword .foreword_wrap {
  position: absolute;
  top: 42%;
  left: 0;
  width: 100%;
  padding-top: 41.54%;
}

.foreword .foreword_wrap .foreword_word {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.foreword .foreword_wrap .arrow {
  position: absolute;
  bottom: 12%;
  right: 14%;
  width: 7%;
  -webkit-animation: arrow 1.2s infinite ease-in-out;
          animation: arrow 1.2s infinite ease-in-out;
}

.foreword .foreword_word3 {
  position: absolute;
  left: 0;
  width: 100%;
  top: 34%;
}

.foreword .foreword_word3 .btn_message {
  margin-top: 6%;
}

.foreword .foreword_word3 .btn_message .btn_inner {
  background-image: url(../images/foreword_btn.png);
}

.foreword .foreword_word4 {
  position: absolute;
  left: 0;
  width: 100%;
  bottom: 0;
}

.foreword .foreword_word4 .warnimg {
  position: absolute;
  width: 11%;
  top: 21%;
  left: 45%;
  -webkit-animation: warnimg 1.5s infinite ease-in-out;
          animation: warnimg 1.5s infinite ease-in-out;
}

.foreword .foreword_word4 .btn_foreword {
  position: absolute;
  bottom: 7%;
  left: 30%;
}

.foreword .foreword_word4 .btn_foreword .btn_inner {
  background-image: url(../images/foreword_btn2.png);
}

.foreword .foreword_word4 .btn_foreword .btn_sm {
  top: -72%;
  right: -24%;
  width: 55%;
}

.rule {
  background-image: url(../images/rule_bg1.gif);
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
}

.rule .rule_word {
  position: absolute;
  left: 0;
  width: 100%;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}

.rule .rule_word .arrow {
  position: absolute;
  bottom: 9%;
  right: 20%;
  width: 7%;
  -webkit-animation: arrow 1.2s infinite ease-in-out;
          animation: arrow 1.2s infinite ease-in-out;
}

.rule .rule_word .virus {
  position: absolute;
  top: 54%;
  left: 23%;
  width: 51%;
}

.rule .rule_word .virus:nth-child(3) {
  top: 66.5%;
}

.rule .rule_word .virus:nth-child(4) {
  top: 82%;
}

.rule .btn_rule {
  position: absolute;
  bottom: -12%;
  left: 31%;
}

.rule .btn_rule .btn_inner {
  background-image: url(../images/rule_btn.png);
}

.game {
  background: url(../images/game_bg.jpg) no-repeat top/cover;
}

.game .game_top {
  width: 62%;
  margin: 0 auto;
  position: relative;
  padding-top: 6%;
  z-index: 1;
}

.game .game_top .score_box {
  position: relative;
}

.game .game_top .score_box p {
  font-size: 16vw;
  position: absolute;
  top: 18%;
  left: 62%;
  text-align: center;
  color: #fff;
}

.game .game_top .time_box {
  width: 72%;
  margin: 3% auto 0;
  position: relative;
}

.game .game_top .time_box p {
  font-size: 10.5vw;
  position: absolute;
  top: 16%;
  letter-spacing: 0.42em;
  text-align: center;
  color: #fff;
}

.game .game_top .time_box .minutes {
  left: 4%;
}

.game .game_top .time_box .seconds {
  left: 59%;
}

.game .game_virus_box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  overflow: hidden;
}

.game .game_virus_box .virus_wrap {
  width: 26%;
}

.game .game_virus_box .virus_wrap p {
  font-size: 8vw;
  letter-spacing: 0;
  position: absolute;
  top: -29%;
  right: -30%;
  color: #fff;
  text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
  opacity: 0;
}

.game .game_word {
  position: absolute;
  top: 75%;
  padding: 0 13%;
  z-index: 1;
  -webkit-animation: sm 0.8s infinite ease-in-out;
          animation: sm 0.8s infinite ease-in-out;
}

.game .game_img1 {
  position: absolute;
  bottom: 15.5%;
  left: 7%;
  width: 75%;
}

.game .game_img2 {
  position: absolute;
  bottom: 15.5%;
  left: 7%;
  width: 75%;
  display: none;
}

.game .game_img2 .star {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
  height: 100%;
}

.game .game_img2 .star .star1 {
  position: absolute;
  top: 3%;
  -webkit-animation: star 1.5s infinite ease-in-out;
          animation: star 1.5s infinite ease-in-out;
}

.game .game_img2 .star .star2 {
  position: absolute;
  top: 9%;
  width: 67%;
  left: 24%;
  -webkit-animation: star 1.5s 0.75s infinite ease-in-out;
          animation: star 1.5s 0.75s infinite ease-in-out;
}

.game .game_pro_wrap, .game .game_pro_wrap_light {
  position: absolute;
  top: 55%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 48%;
}

.game .game_pro_wrap_light {
  display: none;
}

.game .game_pro {
  position: absolute;
  top: 55%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 13%;
  z-index: 2;
}

.result {
  background: url(../images/result_bg.jpg) no-repeat top/cover;
}

.result .content {
  width: 100%;
  overflow: hidden;
  padding-bottom: 8%;
  padding-top: 8%;
}

.result .content::-webkit-scrollbar {
  display: none;
}

.result .result_img {
  width: 88%;
  margin: 0 auto;
  position: relative;
}

.result .result_img .score_box {
  position: absolute;
  top: 52.5%;
  left: 35%;
}

.result .result_img .score_box p {
  font-size: 20vw;
  color: #a40e0e;
}

.result .result_img .result_box {
  position: absolute;
  bottom: 15.8%;
  left: 36%;
}

.result .result_img .result_box.layout1 {
  left: 32.5%;
}

.result .result_img .result_box.layout2 {
  bottom: 16.5%;
  left: 32.5%;
}

.result .result_img .result_box.layout2 p {
  font-size: 5.3vw;
}

.result .result_img .result_box.layout3 {
  bottom: 16.85%;
  left: 32.5%;
}

.result .result_img .result_box.layout3 p {
  font-size: 4.2vw;
}

.result .result_img .result_box p {
  font-size: 7vw;
  color: #a40e0e;
}

.result .result_img .result_word {
  position: absolute;
  width: 78%;
  bottom: -9%;
  left: 11%;
}

.result .btn_again {
  margin-bottom: 4%;
  margin-top: 13%;
}

.result .btn_again .btn_inner {
  background-image: url(../images/result_btn1.png);
}

.result .btn_pro .btn_inner {
  background-image: url(../images/result_btn2.png);
}

.result .btn_pro .btn_sm {
  top: -13%;
  right: -20%;
  width: 32%;
}

@media (max-width: 520px) {
  .result .content {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
}