@charset "UTF-8";
* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

html,
body {
  position: relative;
  font-family: 'Noto Sans TC', '微軟正黑體', sans-serif;
  background: -webkit-gradient(linear, left top, left bottom, from(#01752c), to(#d6e059));
  background: linear-gradient(180deg, #01752c 0%, #d6e059 100%);
}

a {
  display: block;
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
  margin: 0 auto;
  -webkit-user-drag: none;
}

.wrapper {
  padding-top: 70px;
  position: relative;
  width: 56.25vh;
  min-height: calc(var(--vh, 1vh) * 100);
  margin: 0 auto;
  background: url(../images/bg.jpg) top center no-repeat;
  background-size: cover;
  overflow-x: hidden;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background: #fff7cb;
  z-index: 900;
}

header .inner {
  position: relative;
  z-index: 20;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  width: 100%;
  height: 70px;
  padding: 0 2%;
}

header .logo {
  display: block;
  width: auto;
  height: 34px;
}

header .logo img {
  width: auto;
  height: 100%;
}

header .nav {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  position: absolute;
  top: -100vh;
  left: 0;
  right: 0;
  background: #fff7cb;
  width: 100%;
  height: calc(100vh - 70px);
  z-index: 999;
}

header .nav li {
  width: 90%;
  margin: 0 auto;
}

header .nav li a {
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 20px;
  color: #383838;
}

header .nav.on {
  top: 70px;
}

header .ham {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  width: 40px;
  height: 32px;
  padding: 5px;
}

header .ham span {
  display: block;
  width: 100%;
  height: 3px;
  background: #007527;
}

header .ham.on {
  position: relative;
}

header .ham.on span {
  position: absolute;
}

header .ham.on span:nth-child(1) {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(45deg);
          transform: translate(-50%, -50%) rotate(45deg);
}

header .ham.on span:nth-child(2) {
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
          transform: translate(-50%, -50%) rotate(-45deg);
}

header .ham.on span:nth-child(3) {
  display: none;
}

footer {
  width: 100%;
  padding: 1.5rem 0 1rem;
}

footer p {
  font-size: 12px;
  color: #007527;
  text-align: center;
}

.btn_area {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.btn_area .btn {
  border: none;
  width: 252px;
  height: 82px;
  border-radius: 82px;
  border: 1px solid #f8f310;
  -webkit-box-shadow: 0 10px 10px rgba(17, 74, 14, 0.3);
          box-shadow: 0 10px 10px rgba(17, 74, 14, 0.3);
}

.btn_area .btn .inner {
  width: 250px;
  height: 80px;
  border-radius: 80px;
  padding: 4px;
  background: -webkit-gradient(linear, left top, left bottom, from(#3ed200), to(#359500));
  background: linear-gradient(180deg, #3ed200 0%, #359500 100%);
}

.btn_area .btn .word_img {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 242px;
  height: 72px;
  line-height: 72px;
  border-radius: 72px;
  margin: 0 auto;
  font-size: 30px;
  text-align: center;
  color: #fff;
  background: -webkit-gradient(linear, left top, left bottom, from(#38af00), to(#d4fa12));
  background: linear-gradient(180deg, #38af00 0%, #d4fa12 100%);
}

.btn_area .btn .word_img img {
  width: auto;
  height: 46px;
  -webkit-filter: drop-shadow(0 0 2px rgba(69, 53, 35, 0.5));
          filter: drop-shadow(0 0 2px rgba(69, 53, 35, 0.5));
}

.btn_area .btn:hover, .btn_area .btn:active, .btn_area .btn:focus {
  border: 1px solid transparent;
}

.btn_area .btn2 {
  max-width: 322px;
  max-height: 104px;
  width: calc(90vw + 2px);
  height: calc(28.69vw + 2px);
  border-radius: 104px;
}

.btn_area .btn2 .inner {
  max-width: 320px;
  max-height: 102px;
  width: 90vw;
  height: 28.69vw;
  border-radius: 102px;
  padding: 6px;
}

.btn_area .btn2 .word_img {
  max-width: 308px;
  max-height: 90px;
  width: calc(90vw - 12px);
  height: calc(28.69vw - 12px);
  line-height: 90px;
  border-radius: 90px;
}

.btn_area .btn2 .word_img img {
  width: auto;
  height: 66%;
  -webkit-filter: drop-shadow(0 0 2px rgba(247, 149, 9, 0.5));
          filter: drop-shadow(0 0 2px rgba(247, 149, 9, 0.5));
}

#loading {
  position: fixed;
  background: #007527;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
}

#loading .centerbox {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  width: 90%;
  max-width: 400px;
}

#loading .loader {
  display: block;
  width: 48px;
  height: 48px;
  border: 5px solid #fcd800;
  border-bottom-color: transparent;
  border-radius: 50%;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-animation: rotation 1.5s linear infinite;
          animation: rotation 1.5s linear infinite;
  margin: 0 auto 15px;
}

#loading .loading_text {
  font-family: 'Archivo Black', sans-serif;
  font-size: 18px;
  color: #FFF;
  text-align: center;
  margin-bottom: 15px;
}

#loading .loading_text::after {
  content: "...";
  -webkit-animation: load_dot 1s alternate linear infinite;
          animation: load_dot 1s alternate linear infinite;
}

#loading .loading_bar {
  height: 5px;
  background: #fff;
  border-radius: 10px;
  overflow: hidden;
}

#loading .loading_bar .progress {
  background: #fcd800;
  width: 1%;
  height: 5px;
  -webkit-transition: all 1s;
  transition: all 1s;
}

@-webkit-keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes rotation {
  0% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@-webkit-keyframes load_dot {
  0% {
    content: ".";
  }
  50% {
    content: "..";
  }
  100% {
    content: "...";
  }
}

@keyframes load_dot {
  0% {
    content: ".";
  }
  50% {
    content: "..";
  }
  100% {
    content: "...";
  }
}

@media screen and (max-width: 990px) {
  .wrapper {
    width: 100vw;
  }
}