@import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css);
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: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

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

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block;
}

html * {
  font-family: "Noto Sans TC";
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

body {
  font-size: 100%;
 
}

* {
  position: relative;
  box-sizing: border-box;
  text-decoration: none;
}

.wrap {
  width: 100%;
  min-width: 1200px;
  margin: 0 auto;
  overflow: hidden;
}

.header {
  width: 100%;
  height: 0;
  background: url("../images/header_bg.jpg") no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  padding-bottom: 52.1%;
}

#J-sparks {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: 2;
  -moz-transform: translate(-50%, 0);
  -ms-transform: translate(-50%, 0);
  -webkit-transform: translate(-50%, 0);
  transform: translate(-50%, 0);
}

.title {
  width: 45%;
  height: 0;
  background: url("../images/title.png") no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  padding-bottom: 22.1%;
  margin: 33% auto 0 auto;
}

.logo {
  position: absolute;
  width: 15%;
  height: 0;
  background: url("../images/logo.png") no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  padding-bottom: 7%;
  left: 1%;
  top: 2%;
}

.fb_btn {
  display: block;
  position: absolute;
  width: 3.6%;
  height: 0;
  background: url("../images/fb_btn.png") no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  padding-bottom: 3.6%;
  right: 3%;
  top: 5%;
  z-index: 50;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.fb_btn:hover {
  -webkit-filter: brightness(1.1);
  filter: brightness(1.1);
}

.top {
  display: block;
  position: fixed;
  width: 3.6%;
  height: 0;
  background: url("../images/top.png") no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  padding-bottom: 3.6%;
  right: 3%;
  bottom: 5%;
  z-index: 50;
  opacity: 0;
  cursor: pointer;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.top:hover {
  -webkit-filter: brightness(1.1);
  filter: brightness(1.1);
}

.container {
  width: 100%;
  height: 0;
  background: url("../images/cont_bg.jpg") no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  padding-bottom: 92.9%;
}

.rabbit1 {
  position: absolute;
  top: 12%;
  left: 4%;
  z-index: 2;
  width: 17%;
  height: 0;
  padding-bottom: 12%;
  z-index: 2;
}

.rabbit1_body {
  width: 100%;
  height: 0;
  background: url("../images/rabbit1.png") no-repeat;
  background-size: 100% auto;
  padding-bottom: 100%;
  z-index: 5;
  -moz-animation: bounceRabbit 0.8s infinite;
  -webkit-animation: bounceRabbit 0.8s infinite;
  animation: bounceRabbit 0.8s infinite;
}

.rabbit1_shadow {
  position: absolute;
  bottom: -43%;
  left: 29%;
  width: 46%;
  height: 0;
  padding-bottom: 15%;
  background: rgba(42, 147, 81, 0.8);
  z-index: 2;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-animation: bounceRabbitShadow 0.8s infinite;
  -webkit-animation: bounceRabbitShadow 0.8s infinite;
  animation: bounceRabbitShadow 0.8s infinite;
}

.rabbit2 {
  position: absolute;
  top: 64%;
  right: 2%;
  z-index: 2;
  width: 17%;
  height: 0;
  padding-bottom: 12%;
  z-index: 2;
  -moz-transform: rotate(-10deg);
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  transform: rotate(-10deg);
}

.rabbit2_body {
  width: 100%;
  height: 0;
  background: url("../images/rabbit2.png") no-repeat;
  background-size: 100% auto;
  padding-bottom: 100%;
  z-index: 5;
  -moz-animation: bounceRabbit 1s infinite;
  -webkit-animation: bounceRabbit 1s infinite;
  animation: bounceRabbit 1s infinite;
}

.rabbit2_shadow {
  position: absolute;
  bottom: -43%;
  left: 29%;
  width: 46%;
  height: 0;
  padding-bottom: 15%;
  background: rgba(42, 147, 81, 0.8);
  z-index: 2;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -moz-animation: bounceRabbitShadow 1s infinite;
  -webkit-animation: bounceRabbitShadow 1s infinite;
  animation: bounceRabbitShadow 1s infinite;
}

@keyframes bounceRabbitShadow {
  50% {
    opacity: .1;
    transform: translate(-10%, 0%) rotateX(70deg) scale(0.2);
  }
}
@keyframes bounceRabbit {
  0%,
      100% {
    transform: translate(0, 4em) scaleY(1) scaleX(1);
  }
  50% {
    -webkit-animation-timing-function: cubic-bezier(0.76, -0.01, 1, 1);
    animation-timing-function: cubic-bezier(0.76, -0.01, 1, 1);
    transform: translate(0, 0) scaleY(1) scaleX(1);
  }
  96% {
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1.01);
    animation-timing-function: cubic-bezier(0, 0, 0.15, 1.01);
    transform: translate(0, 4em) scaleY(1) scaleX(1);
  }
  98% {
    -webkit-animation-timing-function: cubic-bezier(0, 0, 0.15, 1.01);
    animation-timing-function: cubic-bezier(0, 0, 0.15, 1.01);
    transform: translate(0, 4em) scaleY(0.7) scaleX(1.1);
  }
}
.content_bg {
  width: 67%;
  height: 0;
  background: url("../images/content_bg.png") no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  padding-bottom: 87%;
  margin: 0 auto;
  z-index: 5;
}

.title1 {
  width: 69%;
  height: 0;
  background: url("../images/title1.png") no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  padding-bottom: 5.4%;
  margin: 9% auto 0 auto;
}

.title2 {
  width: 69%;
  height: 0;
  background: url("../images/title2.png") no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  padding-bottom: 7.4%;
  margin: 5% auto 0 auto;
}

.sec1 {
  width: 100%;
}

.sec2 {
  width: 100%;
  margin-top: 12%;
}

.word {
  width: 79%;
  font-size: 0.93vw;
  margin: 1% auto 0 auto;
  line-height: 1.45vw;
  font-weight: bold;
  color: #63532f;
}

.rule_pic {
  width: 50%;
  height: 0;
  background: url("../images/rule_pic.png") no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  padding-bottom: 9.1%;
}

.ol_style {
  list-style: decimal;
  margin-left: 1.5em;
}

.red {
  color: #953124;
}

form {
  margin-top: 4%;
}

.sec1 input {
  font-size: 0.93vw;
}
.sec1 p {
  width: 78%;
  margin: 0 auto 1.5% auto;
}
.sec1 label {
  display: inline-block;
  width: 14.5%;
  font-size: 0.93vw;
  font-weight: bold;
  color: #63532f;
}

.send_info_btn {
  display: block;
  width: 26.5vw;
  height: 0;
  background: url("../images/reserve_btn.png") no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  padding-bottom: 6.9%;
  margin: 0% auto 0 auto;
  cursor: pointer;
  border: transparent;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
}
.send_info_btn:hover {
  -webkit-filter: brightness(1.1);
  filter: brightness(1.1);
}

.code_input {
  width: 22.2vw;
  height: 3.3vw;
  border: 3px solid #99785c;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 1vw;
}

.location_select {
  width: 10vw;
  height: 3.3vw;
  border: 3px solid #99785c;
  font-size: 0.93vw;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}

.phone_input {
  width: 12vw;
  height: 3.3vw;
  border: 3px solid #99785c;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 1vw;
}

.phone_verify, .email_verify {
  width: 7vw;
  height: 3.3vw;
  border: 3px solid #99785c;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 1vw;
}

.email_input {
  width: 22.2vw;
  height: 3.3vw;
  border: 3px solid #99785c;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  padding: 1vw;
}

.get_phone_verify_button, .confirm_phone_verify_button, .get_email_verify_button, .confirm_email_verify_button, .re_get_phone_verify_button, .re_get_email_verify_button {
  width: 8vw;
  height: 3.3vw;
  background: #9e3c37;
  color: #faecd1;
  font-size: 0.93vw;
  border: transparent;
  cursor: pointer;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
}
.get_phone_verify_button:hover, .confirm_phone_verify_button:hover, .get_email_verify_button:hover, .confirm_email_verify_button:hover, .re_get_phone_verify_button:hover, .re_get_email_verify_button:hover {
  background: #bc534d;
}

.phone_verify_countdown, .email_verify_countdown {
  color: #9e3c37;
  font-size: 0.93vw;
  font-weight: bold;
}

.verify_msg {
  color: #9e3c37;
  font-size: 0.93vw;
  font-weight: bold;
  text-align: center;
}

.phone_verify_box, .email_verify_box {
  display: none;
}

.db {
  display: inline-block;
}

.dn {
  display: none;
}

.disabled {
  background: #d6d6d6;
}

.agree_box {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.93vw;
  color: #63532f;
  font-weight: bold;
}

.agree_input {
  width: 1.4vw;
  height: 1.4vw;
  border: 3px solid #99785c;
}

.label_sign {
  width: 1.25vw;
}

.success_check {
  display: inline-block;
  width: 1vw;
  height: 0;
  background: url("../images/check.png") no-repeat;
  background-size: 100% auto;
  padding-top: 1.85%;
}

.fail_check {
  display: inline-block;
  width: 1vw;
  height: 0;
  background: url("../images/fail.png") no-repeat;
  background-size: 100% auto;
  padding-top: 1.85%;
}

.verify_check_success {
  color: #7acb7a;
  font-size: 0.93vw;
  font-weight: bold;
  vertical-align: middle;
}

.verify_check_fail {
  color: #9e3c37;
  font-size: 0.93vw;
  font-weight: bold;
  vertical-align: middle;
  display:none;
}

.notice {
  width: 54.1%;
  height: 0;
  background: url("../images/notice.png") no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  padding-bottom: 2%;
  margin: 1% auto 0 auto;
}

.notice_m {
  display: none;
}

.footer {
  width: 100%;
  height: 0;
  background: url("../images/footer_bg.jpg") no-repeat;
  background-size: 100% auto;
  overflow: hidden;
  padding-bottom: 8%;
}

.footer_word {
  width: 60%;
  color: #84af92;
  font-size: 0.93vw;
  font-weight: bold;
  margin: 4% auto 0 auto;
  text-align: center;
}

.m_arrow {
  display: none;
}

.floating {
  -moz-animation: Floating 2.5s infinite ease-in-out;
  -webkit-animation: Floating 2.5s infinite ease-in-out;
  animation: Floating 2.5s infinite ease-in-out;
}

@-webkit-keyframes Floating {
  from {
    -webkit-transform: translate(0, 0px);
  }
  65% {
    -webkit-transform: translate(0, 15px);
  }
  to {
    -webkit-transform: translate(0, 0px);
  }
}
@-moz-keyframes Floating {
  from {
    -moz-transform: translate(0, 0px);
  }
  65% {
    -moz-transform: translate(0, 15px);
  }
  to {
    -moz-transform: translate(0, 0px);
  }
}