@charset "utf-8";
/* @import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC'); */
/* @import url("https://fonts.googleapis.com/css2?family=Nunito:wght@300;400;700&display=swap"); */

:root {
  /* 
  --phoneBtnStartTop:calc(1.4*100vw); */
  /* var (--phoneBtnStartTop) */
}

body {
  /*background: url('../images/bbg.jpg') top left;*/
  /*background: url('../images/bg.png') top left;*/
  /*background-repeat:no-repeat;*/
  /*background-repeat: repeat-y;*/
  /*background-repeat: repeat-x;*/
  /*background-size: 100% auto;*/
  /* background-color: #f4eddf; */
  /*background-attachment: fixed;*/
  /* font-family: 'Noto Sans TC', Arial, 'Apple LiGothic Black', '微軟正黑體',
    sans-serif; */

  /* font-family: 'Nunito', sans-serif; */
  /* font-family: 'Noto Sans TC', sans-serif; */
  font-size: 16px;
  /*overflow:scroll;*/

  /* background-color: rgb(239, 232, 223); */
  /* background-color: #fcf4db; */
  background-color: #0098f1;
  /* background-image: url(../images/bg.png); */
  background-size: 100vw;
  /* border-color: #fdf7df; */
}

input {
  font-size: 16px;
  border: 0px;
  border-radius: 0px;
}

.outside-line {
  display: block;
  width: 100vw;
  height: 100vh;
  position: relative;
  top: 0;
  left: 0;

  /* background-color: #fdf7df; */
}

.inside-line {
  display: block;
  /* width: 300px; */
  width: 100vw;
  position: relative;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  /* background-color: rgb(225, 219, 208); */
  /* inside-line下的物件的margin-top 做一個div 包起來用padding-top代替 */

  /* background-color: rgb(239, 232, 223);
  background-image: url(../images/bg.png);
  background-size: 100vw; */
  /* 在這裡執行也沒用 下拉會出現白色body */
}

.all-cover {
  /* display: none; */
  background-color: #0098f1;
}

.no-scroll {
  overflow: hidden;
}
/*/////////////////////////////////////////////*/
/*///////////////////  header  //////////////////*/
/*/////////////////////////////////////////////*/
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;

  width: 100vw;

  position: absolute;
  top: 0;
  left: 0;
}
.logo {
  display: block;
  width: 14.3vw;

  margin-top: 5.3vw;
  margin-left: 4vw;
  margin-bottom: 5vw;
}

.btn-menu {
  display: block;
  width: 17vw;

  pointer-events: auto;
  cursor: pointer;
}

.menu-box {
  display: flex;
  width: 100vw;
  height: 100vh;

  flex-direction: column;
  align-items: center;

  background-color: #0389e2;

  position: fixed;
  top: 0;
  left: 0;

  z-index: 10;

  display: none;
}

.menu-box > img {
  display: block;
  width: 84.6vw;

  pointer-events: auto;
  cursor: pointer;

  margin-left: 8vw;
}

.menu-box .btn-close-menu {
  width: 17vw;
  left: 0vw;

  margin-top: 3vw;
  margin-left: 83vw;
}

.btn-box {
  display: flex;
  /* justify-content: space-evenly; */

  justify-content: center; /* 水平置中 */
  align-items: center; /* 垂直對齊 */
  gap: 5vw; /* 增加間距取代負 margin */

  width: 100vw;
  height: 13.5vw;

  margin-top: 5vw;
}

.btn-box img {
  display: block;
  width: 13.5vw;
  height: 13.5vw;

  pointer-events: auto;
  cursor: pointer;

  margin: 0;
}

.menu-line {
  display: block;
  width: 1px;
  height: 13.5vw;
  background-color: #fff;
}

.menu-box .menu-pattern {
  display: block;
  width: 79vw;

  pointer-events: none;

  margin-top: 5vw;
  margin-left: 10vw;
}

/*/////////////////////////////////////////////*/
/*/////////////////// index ///////////////////*/
/*/////////////////////////////////////////////*/
.index-box {
  display: block;
  width: 100vw;
}

.index-bg {
  display: block;
  width: 100vw;
}

.index-slg {
  display: block;
  width: 99.3vw;

  left: 0.35vw;
  margin-top: -185vw;
}

.btn-cta {
  display: block;
  width: 62.5vw;

  margin-left: 18.75vw;
  margin-top: 7.8vw;

  pointer-events: auto;
  cursor: pointer;
}

.index-waterball {
  display: block;
  width: 24.5vw;

  margin-left: 3.3vw;
}

.index-pattern {
  display: block;
  width: 66.4vw;

  margin-top: -32.5vw;
  margin-left: 28vw;
}

/*/////////////////////////////////////////////*/
/*/////////////////   game   //////////////////*/
/*/////////////////////////////////////////////*/
.game-box {
  display: block;
  width: 100vw;

  display: none;
}

#canPopBeat {
  display: block;
  width: 100vw;

  position: fixed;
  top: 0;
  left: 0;
}

.game-info-box {
  display: block;
  width: 100vw;
  height: 100vh;

  /* z-index: 99; */
  position: fixed;
  top: 0;
  left: 0;
}

.game-info-bg {
  display: block;
  width: 100%;
  height: 100%;

  background-color: rgba(0, 0, 0, 0.3);
}

.game-btns-box {
  display: block;
  width: 100vw;

  position: absolute;
  top: 27vw;
  left: 0;
}

.game-info {
  display: block;
  width: 91vw;

  margin-left: 4.5vw;
}

.btn-back {
  display: block;
  width: 36.5vw;

  margin-top: -22vw;
  margin-left: 10vw;

  pointer-events: auto;
  cursor: pointer;
}

.btn-start {
  display: block;
  width: 39vw;
  margin-top: -13vw;
  margin-left: 50vw;

  pointer-events: auto;
  cursor: pointer;
}

.index-box {
  /* display: none; */
}

.game-box {
  /* display: none; */
  /* display: block; */
}

/*/////////////////////////////////////////////*/
/*//////////////// award & term ///////////////*/
/*/////////////////////////////////////////////*/

.POPUP {
  display: none;
  height: 200vh;
}

.form-box,
.term-box,
.award-box {
  display: block;
  width: 82.8vw;

  position: absolute;
  top: 30vw;
  left: 50%;
  transform: translateX(-50%);

  z-index: 901;
  display: none;
}

.btn-cancel {
  display: block;
  width: 9.3vw;

  margin-left: auto;
  margin-right: -4vw;

  pointer-events: auto;
  cursor: pointer;
}

.main {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  height: 125vw;

  background-color: #fff;
  border-radius: 3vw;

  margin-top: -6vw;
}

.til {
  display: block;
  width: 74.8vw;
  padding-top: 2vw;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80vw;
  height: 105vw;

  overflow: hidden;
  overflow-y: scroll;

  /* border: 1px solid #ff00ff; */
}

.content {
  display: block;
  width: 74.8vw;
}

.award-box > .main > .award-txt-link {
  display: block;
  width: 90%;
  /* height: 10vw; */
  position: relative;
  /* border: 1px solid #ff00ff; */
  /* background-color: #ff00ff; */
}

.award-box > .main > .award-txt-link > img {
  width: 100%;
  /* height: 100%; */
}

.award-box > .main > .award-txt-link > .btn-award-link {
  display: block;
  width: 33%;
  height: 50%;
  position: absolute;
  top: 45%;
  left: 8%;
  /* border: 1px solid #6112d0; */

  pointer-events: auto;
  cursor: pointer;
}

/*/////////////////////////////////////////////*/
/*/////////////////// result //////////////////*/
/*/////////////////////////////////////////////*/
.result-box {
  display: block;
  width: 100vw;

  display: none;
}

.result-bg {
  display: block;
  width: 100vw;
  /* display: none; */
  z-index: 10;
}

.result-main {
  display: block;
  width: 100vw;

  position: absolute;
  top: 0;
  left: 0;

  /* border: 2px solid #000fff; */

  padding-top: 17vw;
}

#canResult {
  display: block;
  width: 95vw;
  height: 62.5vw;

  background-color: rgba(0, 0, 0, 0);
  z-index: 999;

  margin-left: 2.5vw;
}

.result-pattern {
  display: block;
  width: 87.8vw;

  margin-left: 6.1vw;
  margin-top: 2vw;
}

.result-pattern-2 {
  display: block;
  width: 85.3vw;

  margin-left: 7.35vw;
  margin-top: 4vw;
}

.btn-form {
  display: block;
  width: 52.9vw;

  margin-left: 23.5vw;

  pointer-events: auto;
  cursor: pointer;
}

.btn-fb {
  display: block;
  width: 42.3vw;

  margin-left: 5.9vw;
  margin-top: 3vw;

  pointer-events: auto;
  cursor: pointer;
}

.btn-replay {
  display: block;
  width: 42.3vw;

  margin-top: -15.2vw;
  margin-left: 52vw;

  pointer-events: auto;
  cursor: pointer;
}

.form-box {
  /* display: block; */
}

.form-box > .main > .til {
  margin-top: 3vw;
}

.form-box > .main > .container {
  /* border: 1px solid #ff00ff; */

  display: flex;
  flex-direction: column;
  align-items: center;
}

.form-box .form-tils {
  display: block;
  width: 68.5vw;

  margin-top: 4vw;
}

.btn-submit {
  display: block;
  width: 46.8vw;

  margin-top: 2vw;

  pointer-events: auto;
  cursor: pointer;
}

.txt-agree {
  display: block;
  width: 73.1vw;

  margin-top: 4vw;
}

.form-box > .main > .container select,
.form-box > .main > .container input[type='text'] {
  display: block;
  /* width: 68.5vw; */
  width: 67vw;

  background-color: #e3f3fb;
  border: 0;

  font-size: 16pt;
  color: #666;

  padding-top: 2vw;
  padding-bottom: 2vw;
  padding-left: 1.5vw;

  margin-bottom: 2vw;
}

.form-box > .main > .container select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  background-color: #e3f3fb;
  border: 0;
  font-size: 16pt;
  color: #666;
  padding-top: 2vw;
  padding-bottom: 2vw;
  padding-left: 1.5vw;
  margin-bottom: 2vw;

  background-image: url('../images/vector.png'); /* 藍色箭頭圖 */
  background-repeat: no-repeat;
  background-position: right 4vw center;
  background-size: 3vw auto;
}

/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */
/* /////////////////////////////////////////////////////////////// */

/* @media screen and (max-width: 530px) { */
/* 手機版 三星手機寬度更寬 可能要上調*/
/* .inside-line {
    width: 100vw;
  } 
}*/

/* @media screen and (min-width: 640px) { */
/* 電腦版 */
/* } */

.hide {
  display: none;
}

.show {
  display: block;
}