html, body {
  height: 100%;
  overflow: hidden;
  margin: 0;
  background: #333;
}
.bgmask{
  content: "";
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: var(--bg-image) no-repeat center/cover;
  background-size: cover;
  background-position: center;
  filter: blur(3px);
}
/* 鎖定比例 */
.wrap{
  /* width: calc(1.0 * var(--gwidth)); */
  /* height: calc(calc(1.0 * var(--gwidth)) * 1080/1920); */
  display:grid;
  place-items:center;
}
/* 封面主視覺 */
#home {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  background: url("../img/gbg06.jpg") no-repeat;
  background-size: cover;
  background-position: center;
}
.sloganbox,.introtext,.leakid,.kvtiger,.kvmonkey{
  position: absolute;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center; 
}
.sloganbox h1,.introtext img,.introtext h2,
.leakid img,.kvtiger img,.kvmonkey img,
.flower,.rflower,.levf01{
  position: absolute;
}
.sloganbox{
  transform: translate(calc(-0.01 * var(--gwidth)), calc(-0.15 * var(--gwidth)));
}
.sloganbox .h1t1{ /* 不要模糊了 */
  /* filter: blur(3px); */
  /* animation:sloganboxflash 5s linear infinite,fshake 5s linear infinite; */
}
@keyframes sloganboxflash{
  0%,10%,20%,30%,40%,50%,60%,70%,80%,90%,100%{
    filter: blur(0);
  } 
  12%,25%,35%,45%,55%,65%,75%,85%,95%{
    filter: blur(3px);
  }
}
/* 閃點抖動動畫 */
@keyframes fshake{
  12%,25%,35%,45%,55%,65%,75%,85%,95%{
    left: 1px;
  } 
  0%,10%,100%{
    left: 0px;
  } 
  20%,10%,20%,30%,40%,50%,60%,70%,80%,90%{
    left: -1px;
  } 
}
.slogan,.sloganshadow,.sloganstroke {
  font-size: calc(0.037 * var(--gwidth));
  background: linear-gradient(to right,#fec22b ,#f8902d);
  /* background: url("../img/sloganbg.jpg") no-repeat; */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 1000;
  background-size: cover;
  background-position-y: 15px;
} 
.sloganshadow {
  text-shadow: 2px 2px 5px rgba(0,0,0,0.6);
}
.sloganstroke {
  font-family: "Arial Rounded MT Bold", "Noto Sans TC", sans-serif;
  -webkit-text-stroke: calc(0.008 * var(--gwidth)) #b65223; /* 邊框粗細與顏色 */
}
.slogan span,.sloganshadow span,.sloganstroke span{
  display: inline-block;
  transform: rotate(-15deg);
  background: linear-gradient(to right,#fec22b ,#f8902d);
  /* background: url("../img/sloganbg.jpg") no-repeat; */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-left: calc(-0.02 * var(--gwidth));
  background-position: 0 calc(0.006 * var(--gwidth));;
  background-size: 160% 190%; 
}
.slogan span.h1t1{
  background: linear-gradient(to right,#fff ,#fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
}
.slogan::after{
  content: "";
  display: block;
  width: calc(0.03 * var(--gwidth));;
  height: calc(0.08 * var(--gwidth));;
  background: url(../img/sloganicon.png) no-repeat;
  background-size: cover;
  position: absolute;
  top: 5%;
  right: 55%;
  transform: rotate(5deg);
  animation:flashmove 5s linear infinite;/* ,shake .2s ease infinite; 不要抖動了 */
}
@keyframes flashmove{
  0%,10%{
    top: -100%;
    right: 50%;
  } 
  12%,95%{
    top: 5%;
    right: 55%;
  }
  100%{
    top: -100%;
    right: 50%;
  }
}

.h1t1{
  font-size: calc(0.06 * var(--gwidth));
}
.h1t2{
  font-size: calc(0.03 * var(--gwidth));
  transform: unset !important;
  margin-left: calc(-0.01 * var(--gwidth)) !important;
}
.introtext{
  transform: translate(calc(-0.01 * var(--gwidth)),calc(-0.035 * var(--gwidth)));
  z-index: 10;
}
.introtext img{
  width: calc(0.24 * var(--gwidth));
  margin-top: calc(-0.015 * var(--gwidth));
}
.introtext h2{
  text-align: center;
  margin-top: calc(0.008 * var(--gwidth));
  -webkit-text-stroke: calc(0.002 * var(--gwidth)) #442014;
  font-size: calc(0.01 * var(--gwidth));
  letter-spacing: 1px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding-top: calc(calc(0.015 * var(--gwidth)));
}
.introtext h2 img{
  width: calc(0.2 * var(--gwidth));
}
.introtext h2.introtexttop{
  color: #9EB709 ;
  -webkit-text-stroke:unset;
}
.leakid{
  transform: translate(calc(-0.01 * var(--gwidth)),calc(0.04 * var(--gwidth)));
}
.leakid video{
  width: calc(0.11 * var(--gwidth));
}
.kvbird{
  position: absolute;
  width: calc(0.06 * var(--gwidth));
  right: calc(0.33 * var(--gwidth));
  top: calc(0.2 * var(--gwidth));
  transform-origin: 95% 85.5%;
  animation:birdmove 2s ease infinite;
  animation-delay: -1.2s;
}
@keyframes birdmove{
  0%,100%{transform:rotate(0deg)} 
  50%{transform:rotate(-10deg)}
}
.kvcocrd{
  position: absolute; 
  width: calc(0.12 * var(--gwidth));
  left: calc(0.27 * var(--gwidth));
  bottom: calc(0.01 * var(--gwidth));
  animation: ccdmove 10s ease-out infinite;
}
@keyframes ccdmove{
  0%{
    width: calc(0.12 * var(--gwidth));
    left: calc(0.27 * var(--gwidth));
    bottom: calc(0.01 * var(--gwidth));
    opacity: 0;
  } 
  10%{
    width: calc(0.12 * var(--gwidth));
    left: calc(0.28 * var(--gwidth));
    bottom: calc(0.01 * var(--gwidth));
    opacity: 1;
  } 
  80%{
    width: calc(0.1 * var(--gwidth));
    left: calc(0.42 * var(--gwidth));
    bottom: calc(0.01 * var(--gwidth));
    opacity: 1;
  }
  100%{
    width: calc(0.08 * var(--gwidth));
    left: calc(0.43 * var(--gwidth));
    bottom: calc(-0.1 * var(--gwidth));
    opacity: 0;
  }
}
.kvtiger{
  left: calc(-0.22 * var(--gwidth));
  bottom: calc(0.1 * var(--gwidth));
}
.kvtiger video{
  width: calc(0.095 * var(--gwidth));
}

.kvmonkey{
  right: calc(-0.13 * var(--gwidth));
  bottom: calc(0.11 * var(--gwidth));
}
.kvmonkey video{
    width: calc(0.09 * var(--gwidth));
}

.flower{
  width: calc(0.02 * var(--gwidth));
  transform-origin: 58% 95%;
  animation:levefshack 5s ease infinite;
}
@keyframes levefshack{
  0%,4%,9%,12%,16%{transform:rotate(-2deg)} 
  2%,6%,10%,14%,18%,100%{transform:rotate(3deg)}
}
.fer01{
  bottom: calc(0.03 * var(--gwidth));
  right: calc(0.4 * var(--gwidth));
}
.fer02{
  bottom: calc(0.06 * var(--gwidth));
  right: calc(0.245 * var(--gwidth));
  animation-delay: -0.8s;
}
.rflower{transform:rotate(20deg)}
.fer03{
  bottom: calc(-0.029 * var(--gwidth));
  right: calc(-0.245 * var(--gwidth));
  animation-delay: -1.8s;
}
.fer04{
  bottom: calc(0.1 * var(--gwidth));
  right: calc(0.76 * var(--gwidth));
  animation-delay: -1.3s;
}

.levf01{
    width: calc(0.08 * var(--gwidth));
    left: calc(0.23 * var(--gwidth));
    bottom: calc(-0.01 * var(--gwidth));
    animation:levefshack 5s ease infinite;
    animation-delay: -0.4s;
    transform-origin: 73% 96%;
}

.levf02{
  position: absolute;
  width: calc(0.06 * var(--gwidth));
  left: calc(-0.14 * var(--gwidth));
  top: calc(0.2 * var(--gwidth));
  animation:levefshack 5s ease infinite;
  animation-delay: -0.7s;
  transform-origin: 73% 96%;
}

#startBtn{
    position: absolute;
    transform: translate(calc(-0.01 * var(--gwidth)), calc(0.15 * var(--gwidth)));
    background: url(../img/startbtnbg.png) no-repeat;
    background-size: contain;
    font-size: calc(0.012 * var(--gwidth));
    width: calc(0.12 * var(--gwidth));
    height: calc(0.06 * var(--gwidth));
    padding-top: calc(0.012 * var(--gwidth));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    color: #472813;
    line-height: calc(0.015 * var(--gwidth));
}
#startBtn:hover{
  transform: translate(calc(-0.01 * var(--gwidth)), calc(0.15 * var(--gwidth))) scale(1.1);
}
/* 封面主視覺 END */


.card{
  width:min(980px,calc(0.92 * var(--gwidth)));
  backdrop-filter:blur(8px);
}
.center{
  text-align:center;
}

.row{
  display:flex;
  flex-wrap:wrap;
  gap:12px;
}
.space{
  height:8px;
}

.meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#6b7280;
  font-weight:600;
}

.options{
  display: grid;
  gap: 0px;
  width: 90%;
  position: absolute;
  bottom: calc(0.04 * var(--gwidth));
  justify-content: center;
}
.opt{
  background: unset;
  border:0;
  padding: 0 calc(0.03 * var(--gwidth));
  text-align:left;
  cursor:pointer;
  font-size: calc(0.013 * var(--gwidth));
  font-weight: bolder;
  color: #111;
}
.opt div{
  display: flex;
  align-items: center;
}
.opt:hover{
  color: #111;
}
.opt:active,.opt:focus{
  color: #591f12;
}
.opt span.optnum{
  background: url(../img/qzitem.png) no-repeat;
  background-size: contain;
  display: block;
  padding: calc(0.005 * var(--gwidth)) calc(0.006 * var(--gwidth));
  margin-right: calc(0.006 * var(--gwidth));
  text-decoration: none !important;
}
.opt span.opttext{
  text-decoration: underline;
  text-underline-offset: calc(0.001 * var(--gwidth));
  text-decoration-thickness: 2px;
  margin-bottom: calc(0.003 * var(--gwidth));
}
.wholepage{
  position: absolute;
  z-index: 10;
  top: 0;
  left: 0;
  width: calc(0.5 * var(--gwidth));
  padding: 50px;
}
.wholepage img{
  width: calc(0.15 * var(--gwidth));
  filter:drop-shadow(0px 0px 0.1rem rgba(0,0,0,.8));
}
.step03 .wholepage img ,.step04 .wholepage img {
    filter: drop-shadow(0px 0px 0.3rem rgba(255, 255, 255, .8));
}
/* 抖動動畫 */
@keyframes shake{
  0%{transform:translateX(0)} 
  15%{transform:translateX(-9px)} 
  30%{transform:translateX(9px)} 
  45%{transform:translateX(-7px)} 
  60%{transform:translateX(7px)} 
  75%{transform:translateX(-4px)} 
  90%{transform:translateX(4px)} 
  100%{transform:translateX(0)}
}
.shake{
  animation:shake .42s ease both;
}

.hidden{display:none !important}

/* quiz */
#quiz,#result {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  
}

.step01{
  background: url("../img/gbg01.jpg") no-repeat center/cover;
}
.step02{
  background: url("../img/gbg02.jpg") no-repeat center/cover;
}
.step03{
  background: url("../img/gbg03.jpg") no-repeat center/cover;
}
.step04{
  background: url("../img/gbg04.jpg") no-repeat center/cover;
}
.step05{
  background: url("../img/gbg05.jpg") no-repeat center/cover;
}
.step06{
  background: url("../img/gbg06.jpg") no-repeat center/cover;
}
#result{
  background: url("../img/gbg06.jpg") no-repeat center/cover;
}

#quiz,#result{
  background-size: cover;
  background-position: center;
}

.quizbox{
  width: calc(0.4 * var(--gwidth));
  height: calc(calc(0.4 * var(--gwidth)) * 0.65);
  background: url("../img/qzbg.png") no-repeat;
  background-size: contain;
  background-position: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  position: absolute;
  transform: translateY(calc(0.05 * var(--gwidth)));
  z-index: 50;
}
.quizpic{
  /* width: 40%; */
  height: calc(0.15 * var(--gwidth));
  position: absolute;
  top: calc(-0.1 * var(--gwidth));
}
#question{
  width: 80%;
  font-size: calc(0.013 * var(--gwidth));
  position: absolute;
  top: calc(0.04 * var(--gwidth));
  text-align: justify;
  /* letter-spacing: 1px; */
}
#feedback,#feedback img,#feedback span,#feedback div{
  position: absolute;
}
#feedback{
  width: calc(1.0 * var(--gwidth));
  height: calc(1.0 * var(--gwidth));
  background: rgba(245,215,171,0.6);
}
#feedback div{
    width: calc(0.4 * var(--gwidth));
    height: calc(0.15 * var(--gwidth));
    transform: translate(calc(-0.015 * var(--gwidth)), calc(0.05 * var(--gwidth)));
}
#feedback,#feedback div,.quizitembox,.quizitembox img,.quizitembox div{
  position: absolute;
  display: flex;
  justify-content: center;
  align-items: center;
  /* z-index: 99; */
}
.quizitembox{
  z-index: 10;
}
.quizitembox.levelup{
  z-index: 60;
}
#feedback{
  z-index: 99;
}


#feedback span{
  width: calc(0.25 * var(--gwidth));
  text-align: center;
  font-size: calc(0.015 * var(--gwidth));
  font-weight: bolder;
  color: #222;
}
.wrongmsgclose{
  cursor: pointer;
  left: calc(0.04 * var(--gwidth));
  top: calc(0.04 * var(--gwidth));
  width: calc(0.03 * var(--gwidth));
}
.wrongmsgclose:hover{
  transform: scale(1.05) rotate(10deg);
}
.wrongmsgbg{width: calc(0.3 * var(--gwidth));}
.wrongkid{
    width: calc(0.06 * var(--gwidth));
    right: calc(0.02 * var(--gwidth));
    top: calc(0.01 * var(--gwidth));
    transform: rotate(5deg);
}
.sfrog{
  position: absolute;
  right: calc(-0.2 * var(--gwidth));
  bottom: calc(-0.08 * var(--gwidth));
  animation:frogmove 30s linear infinite;
}
.sfrog video{
    width: calc(0.053 * var(--gwidth));
}
@keyframes frogmove{
  0%,100%{
    width: calc(0.04 * var(--gwidth));
    right: calc(-0.2 * var(--gwidth));
    bottom: calc(-0.08 * var(--gwidth));
  } 
  50%{
    width: calc(0.05 * var(--gwidth));
    right: calc(-0.3 * var(--gwidth));
    bottom: calc(-0.06 * var(--gwidth));
  }
}
.riverwood{
  width: calc(0.23 * var(--gwidth));
  position: absolute;
  left: calc(-0.35 * var(--gwidth));
  bottom: calc(-0.18 * var(--gwidth));
  animation:rwoodmoveA 2s linear infinite,rwoodmoveB 50s linear infinite;
}
@keyframes rwoodmoveA{
  0%,100%{
    bottom: calc(-0.18 * var(--gwidth));
  } 
  50%{
    bottom: calc(-0.177 * var(--gwidth));
  }
}
@keyframes rwoodmoveB{
  0%{
    left: calc(-0.35 * var(--gwidth));
  } 
  100%{
    left: calc(-0.32 * var(--gwidth));
  }
}
.steplevf{
  width: calc(0.06 * var(--gwidth));
  top: calc(-0.248 * var(--gwidth));
  animation:levefshack 5s ease infinite;
  transform-origin: 50% 0%;
    /* animation-delay: -0.4s; */
}
.slf01{left: calc(0.26 * var(--gwidth));animation-delay: -0.4s;}
.slf02{left: calc(0.38 * var(--gwidth));}
.slf03{left: calc(0.32 * var(--gwidth));animation-delay: -0.6s;}
.sbat{
  top: calc(-0.16 * var(--gwidth));
  left: calc(0.32 * var(--gwidth));
  animation: floatmove 1s ease-in-out infinite;
}
@keyframes floatmove{
  0%,100%{
    margin-top: 0;
  } 
  50%{
    margin-top: calc(-0.005 * var(--gwidth));
  }
}
.sbat video{
  width: calc(0.1 * var(--gwidth));
}
.srobit{
  left: calc(-0.3 * var(--gwidth));
  bottom: calc(-0.18 * var(--gwidth));
}
.srobit video{
  width: calc(0.06 * var(--gwidth));
}
.cloudfly{
    left: calc(-0.45 * var(--gwidth));
    top: calc(-0.2 * var(--gwidth));
    width: calc(0.23 * var(--gwidth));
    opacity: 0.8;
    animation: cloudfly 50s linear infinite;
}
@keyframes cloudfly{
  0%{
    left: calc(-0.46 * var(--gwidth));
  } 
  100%{
    left: calc(-0.2 * var(--gwidth));
  }
}
.full01{
  width: calc(0.085 * var(--gwidth));
  left: calc(0.266 * var(--gwidth));
  top: calc(-0.28 * var(--gwidth));
  opacity: 0;
  animation: full01downpo 0.5s ease-in-out infinite,fulldownop 0.5s ease-in-out infinite;
}
@keyframes full01downpo{
  0%{
    left: calc(0.266 * var(--gwidth));
    top: calc(-0.28 * var(--gwidth));
  } 
  100%{
    left: calc(0.254 * var(--gwidth));
    top: calc(-0.19 * var(--gwidth));
  }
}
@keyframes fulldownop{
  0%,100%{
    opacity: 0;
  } 
  30%,75%{
    opacity: 0.7;
  }
}
.full02{
  left: calc(0.26 * var(--gwidth));
  top: calc(-0.02 * var(--gwidth));
  width: calc(0.05 * var(--gwidth));
  animation: full02downpo 0.5s ease-in-out infinite,fulldownop 0.5s ease-in-out infinite;
}
@keyframes full02downpo{
  0%{
    left: calc(0.26 * var(--gwidth));
    top: calc(-0.02 * var(--gwidth));
    width: calc(0.05 * var(--gwidth));
  } 
  100%{
    left: calc(0.23 * var(--gwidth));
    top: calc(0.05 * var(--gwidth));
    width: calc(0.09 * var(--gwidth));
  }
}
.full03{
  left: calc(0.15 * var(--gwidth));
  top: calc(-0.21 * var(--gwidth));
  width: calc(0.07 * var(--gwidth));
  animation: full03downpo 0.4s ease-in-out infinite,fulldownop 0.4s ease-in-out infinite;
}
@keyframes full03downpo{
  0%{
    left: calc(0.15 * var(--gwidth));
    top: calc(-0.21 * var(--gwidth));
  } 
  100%{
    left: calc(0.145 * var(--gwidth));
    top: calc(-0.05 * var(--gwidth));
  }
}

.full04{
    left: calc(0.43 * var(--gwidth));
    top: calc(-0.26 * var(--gwidth));
    width: calc(0.05 * var(--gwidth));
    animation: full04downpo 0.6s ease-in-out infinite,fulldownop 0.6s ease-in-out infinite;
}
@keyframes full04downpo{
  0%{
    left: calc(0.43 * var(--gwidth));
    top: calc(-0.26 * var(--gwidth));
  } 
  100%{
    left: calc(0.425 * var(--gwidth));
    top: calc(-0.2 * var(--gwidth));
  }
}
.full05{
  left: calc(0.19 * var(--gwidth));
  top: calc(0.06 * var(--gwidth));
  width: calc(0.1 * var(--gwidth));
  animation: fullshackleft 0.2s ease-in-out infinite;
}
.full06{
  left: calc(0.195 * var(--gwidth));
  top: calc(0.07 * var(--gwidth));
  width: calc(0.13 * var(--gwidth));
  animation: fullshackup 0.2s ease-in-out infinite;
}
@keyframes fullshackup{
  0%,100%{
    margin-top: 0;
  } 
  50%{
    margin-top: 1px;
  }
}
@keyframes fullshackleft{
  0%,100%{
    margin-left: 0;
  } 
  50%{
    margin-left: 2px;
  }
}
.cld02{
  width: calc(0.22 * var(--gwidth));
  top: calc(-0.24 * var(--gwidth));
  left: calc(0.07 * var(--gwidth));
  animation: cld02anim 15s linear infinite,cldanimop 15s ease-in-out infinite;
}

@keyframes cld02anim{
  0%{
    width: calc(0.22 * var(--gwidth));
    top: calc(-0.24 * var(--gwidth));
    left: calc(0.07 * var(--gwidth));
    transform: rotate(0);
  } 
  100%{
    width: calc(0.29 * var(--gwidth));
    top: calc(-0.3 * var(--gwidth));
    left: calc(0.09 * var(--gwidth));
    transform: rotate(13deg);
  }
}
@keyframes cldanimop{
  0%,100%{
    opacity: 0;
  } 
  10%,90%{
    opacity: 0.7;
  }
}

.cld03{
  width: calc(0.36 * var(--gwidth));
  left: calc(0.16 * var(--gwidth));
  top: calc(-0.23 * var(--gwidth));
  animation: cld03anim 15s linear infinite,cldanimop 15s ease-in-out infinite;
}
@keyframes cld03anim{
  0%{
    width: calc(0.36 * var(--gwidth));
    left: calc(0.16 * var(--gwidth));
    top: calc(-0.23 * var(--gwidth));
  } 
  100%{
    width: calc(0.41 * var(--gwidth));
    left: calc(0.27 * var(--gwidth));
    top: calc(-0.29 * var(--gwidth));
  }
}
.cld04{
  width: calc(0.45 * var(--gwidth));
  top: calc(-0.28 * var(--gwidth));
  left: calc(-0.55 * var(--gwidth));
  animation: cld04anim 15s linear infinite,cldanimop 15s ease-in-out infinite;
}
@keyframes cld04anim{
  0%{
    width: calc(0.45 * var(--gwidth));
    top: calc(-0.28 * var(--gwidth));
    left: calc(-0.55 * var(--gwidth));
  } 
  100%{
    width: calc(0.5 * var(--gwidth));
    top: calc(-0.35 * var(--gwidth));
    left: calc(-0.76 * var(--gwidth));
  }
}
.eagle{
  left: calc(0.11 * var(--gwidth));
  top: calc(-0.23 * var(--gwidth));
  width: calc(0.2 * var(--gwidth));
  animation: eaglefly 15s linear infinite,floatmove 1.3s ease-in-out infinite;
  animation-delay: -3s;
}
@keyframes eaglefly{
  0%{
    left: calc(-0.5 * var(--gwidth));
    top: calc(-0.3 * var(--gwidth));
    width: calc(0.01 * var(--gwidth));
  } 
  50%{
    left: calc(0.15 * var(--gwidth));
    top: calc(-0.2 * var(--gwidth));
    width: calc(0.2 * var(--gwidth));
  } 
  100%{
    left: calc(0.55 * var(--gwidth));
    top: calc(-0.15 * var(--gwidth));
    width: calc(0.4 * var(--gwidth));
  }
}
.smonkeyplay video{
  width: calc(0.11 * var(--gwidth));
}
.smonkeyplay {
  left: calc(0.07 * var(--gwidth));
  top: calc(-0.19 * var(--gwidth));
  transform-origin: 40% 5%;
  transform: rotate(0);
  animation: smonkeyplay 6s ease-in-out 1,smonkeyplaymv 6s ease-in-out 1;
}
@keyframes smonkeyplay{
  0%{
    transform: rotate(-75deg);
  } 
  10%{
    transform: rotate(20deg);
  } 
  20%{
    transform: rotate(-25deg);
  } 
  30%,100%{
    transform: rotate(0);
  }
}
@keyframes smonkeyplaymv{
  0%{
    left: calc(0.08 * var(--gwidth));
    top: calc(-0.21 * var(--gwidth));
  } 
  30%,100%{
    left: calc(0.07 * var(--gwidth));
    top: calc(-0.19 * var(--gwidth));
  }
}
.branches{
  width: calc(1.0 * var(--gwidth));
}

.itemstep06.levf01 {
  left: calc(-0.28 * var(--gwidth));
  bottom: calc(-0.25 * var(--gwidth));
}
.itemstep06.kvtiger {
  left: calc(-0.25 * var(--gwidth));
  bottom: calc(-0.16 * var(--gwidth));
}
.itemstep06.fer01 {
  bottom: calc(-0.21 * var(--gwidth));
  right: calc(-0.1 * var(--gwidth));
}
.itemstep06.fer02 {
  bottom: calc(-0.19 * var(--gwidth));
  right: calc(-0.25 * var(--gwidth));
}

#result .kvmonkey {
    right: calc(0.23 * var(--gwidth));
    bottom: calc(0.08 * var(--gwidth));
    transform: scaleX(-1);
}
#result .kvbird {
    top: calc(0.12 * var(--gwidth));
}


#result .quizbox {
  justify-content: flex-start;
}
#result h2{
  margin-top: calc(0.04 * var(--gwidth));
  font-size: calc(0.02 * var(--gwidth));
}
.rsulttext{
  font-size: calc(0.0107 * var(--gwidth));
  margin: calc(0.02 * var(--gwidth)) 0;
}

#result button,.cta button{
  width: calc(0.1 * var(--gwidth));
  height: calc(0.05 * var(--gwidth));
  background: url('../img/buttonbg.png') no-repeat;
  background-size: contain;
  background-position: center;
  justify-content: center;
  border: 0;
  color: #591f12;
  text-shadow: 0 0 12px #f7f17f;
  font-size: calc(0.01 * var(--gwidth));
  letter-spacing: 3px;
}
.rsultbtn{
    bottom: calc(0.05 * var(--gwidth));
    position: absolute;
}
.musicbtn img{
  width: auto;
  height: calc(0.03 * var(--gwidth));
}
.cta{
  align-items: center;
  position: absolute;
  right: calc(0.02 * var(--gwidth));
  top: calc(0.01 * var(--gwidth));
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cta .backHome{
  display: none;
}
.delay{
  animation-delay: 0.25s;
}
.delaybig{
  animation-delay: -10s;
}
#resetBtn,.hideitem{
  display: none !important;
}
button{
  cursor:pointer;
  border: 0;
  font-weight: bolder;
}
#result .levef ,#result .rflower{
  z-index: 89;
}

/************** popwindow  樣式開始 *******************/
.formBox{
  position:absolute;
}
/* 旋轉關閉紐 */
.overlay_close_btn {
    position: absolute;
    z-index: 30;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: 0.5s cubic-bezier(0.165, 0.84, 0.44, 1);
    cursor: pointer;
    box-sizing: border-box;
}
.overlay_close_btn:before, .overlay_close_btn:after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    width: 60%;
    height: 2px;
    background: #000;
}
.overlay_close_btn:after {
    transform: translate(-50%, -50%) rotateZ(-45deg);
}
.overlay_close_btn:before {
    transform: translate(-50%, -50%) rotateZ(45deg);
}
.overlay_close_btn:hover {
    transform: rotateZ(180deg) scale(1.2);
}
.overlay_close_btn {
    right: 15px;
    top: 15px;
}
/* 旋轉關閉紐 */
.formBox{
  background: linear-gradient(to right,rgba(0,89,136,0.6),rgba(0,89,136,0.6));
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow: scroll;
  overflow-x: hidden;
  padding: 20px 0;
  z-index: 999;
}
.hidebegin{
  display: none;
}
.form{
  background-color: #fff;
  border-radius: 30px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
  width: calc(0.5 * var(--gwidth));
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  padding: 20px;
  margin: 50px 0;
}
.formnote{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.formiframe{
  width: calc(0.45 * var(--gwidth));
  overflow: hidden;
  height: 650px;
}
.formiframe iframe{
  width: calc(0.48 * var(--gwidth));
  height: 2250px;
  transform: translate(-6%, -18%);
  overflow: hidden;
}

.formBox h2{
  text-align: center;
}
.notext{
  width: calc(100% - 60px);
  margin: 20px auto;
  padding: 20px;
  color: #222;
  font-size: 12px;
  line-height: 1.2em;
  border-radius: 10px;
  border: 2px dashed #ccc;
}
.notext h3{
    text-align: center;
    font-size: 20px;
    margin-bottom: 15px;
    color: #6b4e3b;
}
.notext ul{
  list-style-type: cjk-ideographic;
}
.notext ul ul{
  list-style-type:lower-alpha; 
}
.notext ul ul ul {
    list-style-type: decimal;
}
.notext h4{
  font-size: 18px;
  color: red;
  font-weight: bolder;
  width: 100%;
  text-align: center;
  line-height: 20px;
}
.sharebtn{
  width: 80%;
  height: 15vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sharebtn a{
  text-align: center;
}
.sharebtn img{
  width: 70%;
}
.shareBox{
  align-items: center;
}
.shareBox .form{
  height: calc(0.2 * var(--gwidth));
}

.winnerbox ul{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: 0;
}
.winnerbox li{
  list-style: none;
  width: 33%;
  text-align: center;
}
.winnerbox .note li{
  width: 100%;
}
.winnerlist h3{
  text-align: center;
}
/************** popwindow  樣式結束 *******************/

  /* Apple 大尺寸螢幕  針對影片校正 */
  .appledev .leakid {
    transform: translate(calc(-0.007 * var(--gwidth)), calc(0.039 * var(--gwidth)));
    /* filter: brightness(0.9); */
    z-index: 1;
  }
  .appledev .kvtiger {
    left: calc(-0.168 * var(--gwidth));
    bottom: calc(0.092 * var(--gwidth));
  }
  .appledev .kvtiger video {
    width: calc(0.11 * var(--gwidth));
  }
  .appledev .kvmonkey {
    bottom: calc(0.1 * var(--gwidth));
  }
  .appledev .sfrog{
    transform: translate(-30%, 136%);
    animation: unset;
    filter: brightness(0.89);
  }
  .appledev .sfrog video {
      width: calc(0.122 * var(--gwidth));
  }
  .appledev .sbat {
    top: calc(-0.239 * var(--gwidth));
    left: calc(0.083 * var(--gwidth));
    animation: unset;
  }
  .appledev .srobit {
    left: calc(-0.015 * var(--gwidth));
    bottom: calc(-0.2325 * var(--gwidth));
    z-index: 88 !important;
  }
  .appledev .srobit video {
    width: calc(0.07 * var(--gwidth));
  }
  .appledev .smonkeyplay{
    animation: unset;
    left: calc(0.0424 * var(--gwidth));
    top: calc(-0.228 * var(--gwidth));
  }
  .appledev .smonkeyplay video{
    width: calc(0.147 * var(--gwidth));
  }
  .appledev .itemstep06.kvtiger {
    left: calc(0.1358 * var(--gwidth));
    bottom: calc(-0.244 * var(--gwidth));
    z-index: 88 !important;
  }
  .appledev .itemstep06.kvtiger video{
    width: calc(0.126 * var(--gwidth));
  }
  .appledev #result .kvmonkey {
      right: calc(0.156 * var(--gwidth));
      bottom: calc(0.01931 * var(--gwidth));
      z-index: 88 !important;
  }
  .appledev #result .kvmonkey video {
    width: calc(0.095 * var(--gwidth));
    transform: scaleX(-1);
  }

  /* Apple 大尺寸螢幕  針對影片校正 */


@media (max-width: 500px) {
  .wrap{
    left: 53% !important;
  } 

  .introtext{
    z-index: 10;
  }

  .levf01 {
    left: calc(0.27 * var(--gwidth));
  }
  .levf02 {
    width: calc(0.05 * var(--gwidth));
    left: calc(-0.09 * var(--gwidth));
    top: calc(0.22 * var(--gwidth));
  }
  #quiz, #result{
    transform: translateX(-0.6%);
  }
  .riverwood{
    transform: translate(40%, 75%);
    width: calc(0.3 * var(--gwidth));
  }
  .slf01 {
    left: calc(-0.12 * var(--gwidth));
  }
  .slf02 {
    left: calc(-0.19 * var(--gwidth));
    width: calc(0.05 * var(--gwidth));
  }
  .slf03 {
    left: calc(-0.15 * var(--gwidth));
  }
  #quiz.step03 {
    transform: translateX(-14%);
  }
  #quiz.step03 .quizbox{
    right: 16.6%;
  }
  #quiz.step03 #feedback{
    left: 16.6%;
  }
  .cloudfly{
    transform: translateX(65%);
    animation-delay: -20s;
  }
  .eagle {
    transform: translateX(-50%);
  }
  .cld04 {
    transform: translate(40%, 25%);
  }
  #result .kvbird {
    top: calc(0.11 * var(--gwidth));
    width: calc(0.08 * var(--gwidth));
  }
  #result .levef ,#result .rflower{
    z-index: 89;
  }
  .formBox{
    left: -1%;
  }
  .form{
    width: 85vw;
  }
  .notext {
    width: 80%;
  }
  .notext h3 {
    line-height: 25px;
  }
  .formiframe {
    width: 85%;
    height: 500px;
  }
  
  .formiframe iframe {
    width: calc(0.35 * var(--gwidth));
    transform:translate(-10%, -20%);
  }
  .wholepage {
    text-align: center;
    left: unset;
    transform: translateX(-3%);
    padding: 0;
  }
  .wholepage img {
    width:unset;
  }
  .cta {
    right: unset;
    top: 100%;
    transform: translateX(-3%);
  }
  #feedback div {
    transform: translate(calc(-0.015 * var(--gwidth)), calc(0.05 * var(--gwidth))) scale(0.8);
  }

  /* 針對影片校正 */
  .leakid {
    transform: translate(calc(-0.007 * var(--gwidth)), calc(0.039 * var(--gwidth)));
    /* filter: brightness(0.9); */
    z-index: 1;
  }
  .kvtiger {
    left: calc(-0.168 * var(--gwidth));
    bottom: calc(0.092 * var(--gwidth));
  }
  .kvtiger video {
    width: calc(0.11 * var(--gwidth));
  }
  .kvmonkey {
    bottom: calc(0.1 * var(--gwidth));
  }
  .sfrog{
    transform: translate(-30%, 136%);
    animation: unset;
    filter: brightness(0.89);
  }
  .sfrog video {
      width: calc(0.122 * var(--gwidth));
  }
  .sbat {
    top: calc(-0.239 * var(--gwidth));
    left: calc(0.083 * var(--gwidth));
    animation: unset;
  }
  .srobit {
    left: calc(-0.03 * var(--gwidth));
    bottom: calc(-0.231 * var(--gwidth));
    z-index: 88 !important;
  }
  .srobit video {
    width: calc(0.07 * var(--gwidth));
  }
  .smonkeyplay{
    animation: unset;
    left: calc(0.0424 * var(--gwidth));
    top: calc(-0.228 * var(--gwidth));
  }
  .smonkeyplay video{
    width: calc(0.147 * var(--gwidth));
  }
  .itemstep06.kvtiger {
    left: calc(0.1358 * var(--gwidth));
    bottom: calc(-0.244 * var(--gwidth));
    z-index: 88 !important;
  }
  .itemstep06.kvtiger video{
    width: calc(0.126 * var(--gwidth));
  }
  #result .kvmonkey {
      right: calc(0.156 * var(--gwidth));
      bottom: calc(0.01931 * var(--gwidth));
      z-index: 88 !important;
  }
  #result .kvmonkey video {
    width: calc(0.095 * var(--gwidth));
    transform: scaleX(-1);
  }
  /* 針對影片校正 */
}


@media (max-width: 420px) {
  .quizbox {
    width: 106vw;
  }
  #quiz.step03 .quizbox{
    right: 17.3%;
  }
#quiz.step03 #feedback{
    left: 14.3%;
  }
}