@charset "UTF-8";
body {
  width: 100%;
  height: auto;
  font-family: 微軟正黑體;
  background: url(../_img/bg-top%EF%B9%96v=0428.jpg) top center no-repeat;
  background-color: #340047;
  margin: 0 auto;
  position: relative;
}

@media (max-width: 1024px) {
  body {
    background-size: 180%;
  }
}

html, body {
  overflow-x: hidden;
}

#main {
  -webkit-box-shadow: none;
  box-shadow: none;
  opacity: 0;
  -webkit-transition: opacity 0.3s;
  -o-transition: opacity 0.3s;
  transition: opacity 0.3s;
}

#main.is-active {
  opacity: 1;
}

#dPageHolder {
  width: 100%;
  height: auto;
  margin: 0 auto;
  max-width: 1024px;
}

.clearfix {
  clear: both;
}

div {
  display: block;
}

img {
  width: 100%;
  display: block;
  border: 0;
}

.btn {
  cursor: pointer;
}

/* Change Autocomplete styles in Chrome*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  -webkit-text-fill-color: #000;
  -webkit-box-shadow: none;
}

@-webkit-keyframes autofill {
  to {
    color: #000;
    background-color: #fff;
  }
}

input:-webkit-autofill {
  -webkit-animation-name: autofill;
  -webkit-animation-fill-mode: both;
}

#dMainPhone {
  position: relative;
  max-width: 1024px;
  margin: 0 auto;
  z-index: 0;
}

.header, .maincontent {
  float: left;
  height: auto;
}

.maincontent {
  width: 100%;
}

/*按鈕*/
.homeBtn, .fbBtn, .downloadBtn, .confirmBtn, .uploadBtn, .uploadBtn2, .uploadBtn3, .receiveBtn {
  position: absolute;
  display: block;
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 100% auto;
}

.homeBtn, .fbBtn {
  width: 21.584%;
  padding-bottom: 10%;
}

.downloadBtn {
  width: 83.8%;
  padding-bottom: 17.5%;
}

.confirmBtn {
  width: 76%;
  padding-bottom: 24%;
}

.uploadBtn {
  width: 66%;
  padding-bottom: 13.3%;
}

.uploadBtn2 {
  width: 66%;
  padding-bottom: 13.3%;
}

.uploadBtn3 {
  width: 66%;
  padding-bottom: 13.3%;
}

.receiveBtn {
  width: 81%;
  padding-bottom: 25%;
}

a.homeBtn {
  background-image: url(../_img/homeBtn%EF%B9%96v=0428.png);
  top: 0;
  left: 0;
  z-index: 0;
  background-size: contain;
  margin: 1.3% 0 0 69%;
}

a:hover.homeBtn {
  background-image: url(../_img/homeBtn_hover%EF%B9%96v=0428.png);
  background-size: contain;
}

a.fbBtn {
  background-image: url(../_img/fbBtn%EF%B9%96v=0428.png);
  top: 0;
  left: 0;
  z-index: 0;
  background-size: contain;
  margin: 1.3% 0 0 46.5%;
}

a:hover.fbBtn {
  background-image: url(../_img/fbBtn_hover%EF%B9%96v=0428.png);
  background-size: contain;
}

a.downloadBtn {
  background-image: url(../_img/downloadBtn.gif);
  top: 0;
  left: 0;
  z-index: 0;
  background-size: cover;
  margin: 61% 0 0 8%;
  -webkit-filter: drop-shadow(0px 5px 10px #d8ad00);
}

a:hover.downloadBtn {
  background-image: url(../_img/downloadBtn_hover%EF%B9%96v=0428.png);
}

a.confirmBtn {
  background-image: url(../_img/confirmBtn%EF%B9%96v=0428.jpg);
  left: 0;
  z-index: 0;
  margin: -34% 0 0 12%;
}

a:hover.confirmBtn {
  background-image: url(../_img/confirmBtn_hover%EF%B9%96v=0428.jpg);
}

a.uploadBtn {
  background-image: url(../_img/uploadBtn%EF%B9%96v=0428.png);
  left: 0;
  z-index: 0;
  margin: -69% 0 0 16%;
}

a:hover.uploadBtn {
  background-image: url(../_img/uploadBtn_hover%EF%B9%96v=0428.png);
}

a.uploadBtn2 {
  background-image: url(../_img/uploadBtn2%EF%B9%96v=0428.png);
  left: 0;
  z-index: 0;
  margin: 5.5% 0 0 16%;
}

a:hover.uploadBtn2 {
  background-image: url(../_img/uploadBtn2_hover%EF%B9%96v=0428.png);
}

a.uploadBtn3 {
  background-image: url(../_img/uploadBtn3%EF%B9%96v=0428.png);
  left: 0;
  z-index: 0;
  margin: -65% 0 0 16%;
}

a:hover.uploadBtn3 {
  background-image: url(../_img/uploadBtn3_hover%EF%B9%96v=0428.png);
}

a.receiveBtn {
  background-image: url(../_img/receiveBtn%EF%B9%96v=0428.jpg);
  left: 0;
  z-index: 0;
  margin: -26% 0 0 10%;
}

@media (max-width: 767px) {
  a.receiveBtn {
    margin-top: -22%;
  }
}

a:hover.receiveBtn {
  background-image: url(../_img/receiveBtn_hover%EF%B9%96v=0428.jpg);
}

/*表單*/
input {
  outline: none;
}

#input_phone, #input_coupon, #input_name,
#input_tel, #input_add, #input_IdNumber, #input_product {
  background: none;
}

#input_phone, #input_coupon, #input_name, #input_tel,
#input_add, .input_city, #input_IdNumber,
.input_dist, .input_rd, #input_product {
  position: absolute;
  border: 0;
}

#input_phone {
  width: 45%;
  margin: -63.5% 0 0 37%;
}

#input_coupon {
  width: 45%;
  margin: -48.3% 0 0 37%;
}

#input_name {
  width: 45%;
  margin: -57% 0 0 37%;
}

#input_tel {
  width: 45%;
  margin: -41.6% 0 0 37%;
}

.input_city {
  width: 50%;
  margin: -26.5% 0 0 37%;
}

.input_dist {
  width: 73%;
  margin: -11% 0 0 14%;
}

.input_rd {
  width: 73%;
  margin: -123.5% 0 0 14%;
}

#input_add {
  width: 70%;
  margin: -110.5% 0 0 14%;
}

.part3-0 {
  margin-top: 10px;
}

#input_product {
  margin: auto;
  bottom: 49px;
  left: 2%;
  right: 0;
  width: 73%;
}

@media (max-width: 900px) {
  #input_product {
    bottom: 20%;
  }
}

@media (max-width: 600px) {
  #input_product {
    bottom: 17%;
  }
}

@media (max-width: 400px) {
  #input_product {
    bottom: 10%;
  }
}

#input_IdNumber {
  width: 45%;
  margin: -95.5% 0 0 43%;
}

#gotop {
  display: none;
  position: fixed;
  width: 15%;
  right: 20px;
  bottom: 6%;
  cursor: pointer;
  z-index: 1000;
}

@media (max-width: 1000px) {
  #gotop {
    width: 10%;
  }
}

#gotop img {
  max-width: 100px;
  max-height: 100px;
}

select {
  /*Chrome和Firefox邊框*/
  border: solid 1px #000;
  /*select預設框樣式清除*/
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  /*選擇框箭頭*/
  background: url("../_img/arrow.png") no-repeat scroll right center transparent;
  /*为下拉小箭头留出一点位置，避免被文字覆盖*/
  padding-right: 5%;
  outline: none;
}

/*清除ie的默认选择框样式清除，隐藏下拉箭头*/
select::-ms-expand {
  display: none;
}

.relative {
  position: relative;
}

.pro-intro {
  color: #11defc;
  font-size: 48px;
  font-weight: bold;
  margin-bottom: 20px;
  padding-left: 20px;
  padding-right: 20px;
}

.pro-intro a {
  color: inherit;
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .pro-intro {
    font-size: 4.6vw;
  }
}

.part4 {
  position: relative;
  text-align: center;
}

.part4 p {
  color: #11defc;
  font-size: 55px;
  font-weight: bold;
  margin-bottom: 20px;
}

.part4 p a {
  color: #11defc;
  text-decoration: underline;
}

@media (max-width: 1024px) {
  .part4 p {
    font-size: 5vw;
  }
}

/*個人資料同意及radio btn*/
.apply_person {
  width: 100%;
  height: auto;
  position: relative;
  position: absolute;
  -webkit-transition: display 0.5s linear;
  -o-transition: display 0.5s linear;
  transition: display 0.5s linear;
  top: 0;
  left: 0;
  right: 0;
  margin: auto;
}

label.person_data {
  text-decoration: underline;
  margin-left: 15%;
}

label.person_data_star span {
  color: #11defc !important;
  text-decoration: none !important;
}

.apply_person input[type=radio] {
  position: absolute;
  visibility: hidden;
}

.apply_person label {
  color: #11defc;
  cursor: pointer;
  -webkit-transition: all 0.25s linear;
}

.apply_person:hover label {
  color: #11defc;
}

.apply_person .check {
  display: block;
  position: absolute;
  background: #FFFFFF;
  border: 3px solid #000;
  border-radius: 100%;
  height: 60px;
  width: 60px;
  top: 10px;
  z-index: 5;
  -o-transition: border .25s linear;
  transition: border .25s linear;
  -webkit-transition: border .25s linear;
}

/*.apply_person:hover .check {cursor:pointer;border: 3px solid #FFFFFF;}*/
.apply_person .check::before {
  display: block;
  position: absolute;
  content: '';
  border-radius: 100%;
  height: 34px;
  width: 34px;
  top: 10px;
  left: 10px;
  margin: auto;
  -o-transition: background 0.25s linear;
  transition: background 0.25s linear;
  -webkit-transition: background 0.25s linear;
}

input[type=radio]:checked ~ .check {
  border: 3px solid #11defc;
}

input[type=radio]:checked ~ .check::before {
  background: #11defc;
}

input[type=radio]:checked ~ label {
  color: #11defc;
}

/*
.clickme {position:relative;width:65.724%;top:0px;left:0;right:0;bottom:0;margin:auto;cursor:pointer;display:block;}
.clickme:hover {animation:scalebig .1s 0s 1 ease-in-out forwards;}
.vip,.infoArea {position:relative;width:80%;margin:auto;display:block;}
.vip_phone, .vip_invite, .vip2_name, .vip2_phoneNum, .vip2_add, .vip2_person, .vip2_eventVipidCard {color:#00baff;}
.vip2_uploadFile {color:#fff;}
.vip_phone span, .vip_invite span, .vip2_name span, .vip2_phoneNum span, .vip2_add span, .vip2_eventVipidCard span {color:#ffa200;}
.vip2_eventVipidCard h {text-decoration: underline;}
#input_vip_phoneNum, #input_vip_inviteNum, #input_vip2_Name, #input_vip2_phoneNum, #input_vip2_add {width:100%;margin:0.5% 0 3%;}
#btn_vip2_UploadFile {width:100%;border-radius:20px;color:#fff;background:#00baff;border:none; margin-bottom: 20px;}
#btn_vip2_UploadFile_2 {width:100%;border-radius:20px;color:#fff;background:#F44336;border:none;}
#btn_vip_SubmitCode {width:100%;margin:5% auto 0;border-radius:20px;color:#fff;background:#00baff;border:none;}
#btn_vip2_SubmitCode {width:100%;margin:5% auto 0;border-radius:20px;color:#fff;background: #ffa500;border:none;}
.vip2 {position:relative;display:block;left:-1500px;}
.prizeName {position:relative;color:#00baff;text-align:center;width:98%;margin:auto;}
.prizeItems {position:absolute;display:block;top:0;left:0;right:0;padding-top:2%;}
.nickName {text-align:center;color:#fff;padding:0 0 2% 0;}
.infoArea {display:block;}*/
.fontSizeL {
  font-size: 65px;
}

.fontSizeM {
  font-size: 50px;
}

.fontSizeS {
  font-size: 40px;
}

.alert_lineHeight {
  line-height: 60px;
}

.input_lineHeight {
  line-height: 80px;
}

.btn_lineHeight {
  line-height: 100px;
}

.color_00baff {
  color: #00baff;
  font-weight: normal;
}

/*.input_add {width:100%;margin:0.5% 0 3%;}
.vip1_getwayBtn {position:relative;display:block;background:url(../_img/vip1_getway.png) top left no-repeat;background-size:contain;width:37.5%;padding-bottom:9.167%;margin:auto;}
.vip1_getwayBtn:hover {background-image:url(../_img/vip1_getway_hover%EF%B9%96v=0428.png);}
.vip2_SubmitBtn {position:relative;display:block;background:url(../_img/vip2_SubmitBtn.png) top left no-repeat;background-size:contain;width:37.5%;padding-bottom:9.167%;margin:auto;}
.vip2_SubmitBtn:hover {background-image:url(../_img/vip2_SubmitBtn_hover%EF%B9%96v=0428.png);}*/
.Cong {
  display: block;
  padding: 4% 0;
}

#mask {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background: #000;
  display: none;
  z-index: 10;
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

/*個人資料同意及radio btn
.vip2_person{position: relative;transition:display 0.5s linear;}
.vip2_person input[type=radio]{position: absolute;visibility: hidden;}
.vip2_person label{cursor: pointer;-webkit-transition: all 0.25s linear;}
.vip2_person:hover label{color: #FFFFFF;}
.vip2_person .check{display: block;position: absolute;border: 5px solid #AAAAAA;border-radius: 100%;height: 85px;width: 85px;top: 0px;right: 0px;z-index: 5;transition: border .25s linear;-webkit-transition: border .25s linear;}
.vip2_person:hover .check {cursor:pointer;border: 5px solid #FFFFFF;}
.vip2_person .check::before {display: block;position: absolute;content: '';border-radius: 100%;height: 45px;width: 45px;top: 15px;left: 15px;margin: auto;transition: background 0.25s linear;-webkit-transition: background 0.25s linear;}
input[type=radio]:checked ~ .check {border: 5px solid #00baff;}
input[type=radio]:checked ~ .check::before{background: #00baff;}
input[type=radio]:checked ~ label{color: #00baff;}*/
/*彈跳視窗*/
.popupWindow {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  max-width: 600px;
  background: top center no-repeat;
  display: none;
  z-index: 13;
  background-size: contain;
}

.closeBtn {
  position: absolute;
  top: 0;
  right: -4%;
  margin: -5% 0 0 0;
  display: block;
  z-index: 15;
  width: 10%;
  padding-bottom: 10%;
  background: url("../_img/closeBtn.png") top left no-repeat;
  cursor: pointer;
  background-size: contain;
}

/*提示訊息*/
.pop_alert {
  height: 260px;
  background: #fff;
  border: 4px solid #0090ff;
  border-radius: 35px;
  -webkit-box-shadow: inset 0 0 8px 2px #9e9e9e;
  box-shadow: inset 0 0 8px 2px #9e9e9e;
  z-index: 21;
}

.pop_alert_content {
  position: relative;
  color: #1517ab;
  text-align: center;
  display: block;
  font-weight: bold;
}

/*同意個人資料使用*/
.popProvision {
  height: 378px;
  background-image: url(../_img/popbg_Provision%EF%B9%96r=20171206.png);
  border-radius: 5px;
  z-index: 21;
}

.pop_Provision_content {
  text-align: left;
  font-size: 12px;
  font-weight: normal;
  line-height: 22px;
  position: relative;
  overflow: auto;
  top: 33%;
  width: 80%;
  left: 10.5%;
  height: 220px;
  padding: 0px 10px;
}

#pro_scrollbar::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 6px rgba(68, 68, 68, 0.205);
  border-radius: 10px;
  background-color: #F5F5F5;
}

#pro_scrollbar::-webkit-scrollbar {
  width: 10px;
  background-color: #F5F5F5;
  border-radius: 10px;
}

#pro_scrollbar::-webkit-scrollbar-thumb {
  border-radius: 10px;
  -webkit-box-shadow: inset 0 0 6px rgba(68, 68, 68, 0.205);
  background-color: rgba(68, 68, 68, 0.205);
}

@-webkit-keyframes transdivin {
  0% {
    left: -1500px;
  }
  100% {
    left: 0px;
  }
}

@keyframes transdivin {
  0% {
    left: -1500px;
  }
  100% {
    left: 0px;
  }
}

@-webkit-keyframes transdivout {
  0% {
    left: 0px;
  }
  100% {
    left: 1500px;
  }
}

@keyframes transdivout {
  0% {
    left: 0px;
  }
  100% {
    left: 1500px;
  }
}

@-webkit-keyframes scalebig {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.3;
  }
  2% {
    -webkit-transform: scale(3);
    transform: scale(3);
    opacity: 0.1;
  }
  98% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes scalebig {
  0% {
    -webkit-transform: scale(0.8);
    transform: scale(0.8);
    opacity: 0.3;
  }
  2% {
    -webkit-transform: scale(3);
    transform: scale(3);
    opacity: 0.1;
  }
  98% {
    -webkit-transform: scale(1.2);
    transform: scale(1.2);
    opacity: 0;
  }
  100% {
    -webkit-transform: scale(1);
    transform: scale(1);
    opacity: 1;
  }
}

@media screen and (max-width: 991px) and (min-width: 768px) {
  .alert_lineHeight {
    line-height: 44px;
  }
  .input_lineHeight {
    line-height: 60px;
  }
  .btn_lineHeight {
    line-height: 80px;
  }
  .fontSizeL {
    font-size: 50px;
  }
  .fontSizeM {
    font-size: 40px;
  }
  .fontSizeS {
    font-size: 30px;
  }
  label.person_data {
    margin-left: 14%;
  }
  .apply_person .check {
    width: 50px;
    height: 50px;
    top: 8px;
  }
  .apply_person .check::before {
    height: 30px;
    width: 30px;
    top: 7px;
    left: 7px;
  }
  #input_phone {
    width: 45%;
    margin: -63% 0 0 37%;
  }
  #input_coupon {
    width: 45%;
    margin: -48% 0 0 37%;
  }
  #input_name {
    width: 45%;
    margin: -57% 0 0 37%;
  }
  #input_tel {
    width: 45%;
    margin: -41.8% 0 0 37%;
  }
  .input_city {
    width: 50%;
    margin: -26.7% 0 0 37%;
  }
  .input_dist {
    width: 73%;
    margin: -11% 0 0 14%;
  }
  .input_rd {
    width: 73%;
    margin: -123.5% 0 0 14%;
  }
  #input_add {
    width: 70%;
    margin: -110.5%  0 0 14%;
  }
  #input_IdNumber {
    width: 45%;
    margin: -96% 0 0 43%;
  }
}

@media screen and (max-width: 767px) and (min-width: 480px) {
  .alert_lineHeight {
    line-height: 40px;
  }
  .input_lineHeight {
    line-height: 56px;
  }
  .btn_lineHeight {
    line-height: 70px;
  }
  .fontSizeL {
    font-size: 40px;
  }
  .fontSizeM {
    font-size: 28px;
  }
  .fontSizeS {
    font-size: 20px;
  }
  .apply_person {
    margin: -35% 0 0 29%;
  }
  label.person_data {
    margin-left: 16%;
  }
  .apply_person .check {
    width: 45px;
    height: 45px;
    top: 8px;
  }
  .apply_person .check::before {
    height: 25px;
    width: 25px;
    top: 7px;
    left: 7px;
  }
  #input_phone {
    width: 45%;
    margin: -64.5% 0 0 37%;
  }
  #input_coupon {
    width: 45%;
    margin: -49.5% 0 0 37%;
  }
  #input_name {
    width: 45%;
    margin: -57.5% 0 0 37%;
  }
  #input_tel {
    width: 45%;
    margin: -42.3% 0 0 37%;
  }
  .input_city {
    width: 50%;
    margin: -27.2% 0 0 37%;
  }
  .input_dist {
    width: 73%;
    margin: -11.5% 0 0 14%;
  }
  .input_rd {
    width: 73%;
    margin: -104.3% 0 0 14%;
  }
  #input_add {
    width: 70%;
    margin: -91.5% 0 0 14%;
  }
}

@media screen and (max-width: 479px) and (min-width: 360px) {
  .alert_lineHeight {
    line-height: 36px;
  }
  .input_lineHeight {
    line-height: 34px;
  }
  .btn_lineHeight {
    line-height: 60px;
  }
  .fontSizeL {
    font-size: 28px;
  }
  .fontSizeM {
    font-size: 18px;
  }
  .fontSizeS {
    font-size: 16px;
  }
  label.person_data {
    margin-left: 18%;
  }
  .apply_person .check {
    width: 30px;
    height: 30px;
    top: 2px;
  }
  .apply_person .check::before {
    height: 16px;
    width: 16px;
    top: 4px;
    left: 4px;
  }
  #input_phone {
    width: 45%;
    margin: -64.5% 0 0 37%;
  }
  #input_coupon {
    width: 45%;
    margin: -49.5% 0 0 37%;
  }
  #input_name {
    width: 45%;
    margin: -58% 0 0 37%;
  }
  #input_tel {
    width: 45%;
    margin: -43% 0 0 37%;
  }
  .input_city {
    width: 50%;
    margin: -27.7% 0 0 37%;
  }
  .input_dist {
    width: 73%;
    margin: -11.9% 0 0 14%;
  }
  .input_rd {
    width: 73%;
    margin: -123.5%  0 0 14%;
  }
  #input_add {
    width: 70%;
    margin: -110.5% 0 0 14%;
  }
  select {
    background-size: 25px;
  }
}

@media screen and (max-width: 359px) {
  .alert_lineHeight {
    line-height: 24px;
  }
  .input_lineHeight {
    line-height: 30px;
  }
  .btn_lineHeight {
    line-height: 48px;
  }
  .fontSizeL {
    font-size: 22px;
  }
  .fontSizeM {
    font-size: 16px;
  }
  .fontSizeS {
    font-size: 14px;
  }
  .apply_person {
    margin: -35% 0 0 26%;
    width: 52%;
  }
  label.person_data {
    margin-left: 16%;
  }
  .apply_person .check {
    width: 24px;
    height: 24px;
    top: 5px;
  }
  .apply_person .check::before {
    height: 14px;
    width: 14px;
    top: 2px;
    left: 2px;
  }
  #input_phone {
    width: 45%;
    margin: -64.5% 0 0 37%;
  }
  #input_coupon {
    width: 45%;
    margin: -49.5% 0 0 37%;
  }
  #input_name {
    width: 45%;
    margin: -58% 0 0 37%;
  }
  #input_tel {
    width: 45%;
    margin: -43% 0 0 37%;
  }
  .input_city {
    width: 50%;
    margin: -27.7% 0 0 37%;
  }
  .input_dist {
    width: 73%;
    margin: -11.9% 0 0 14%;
  }
  .input_rd {
    width: 73%;
    margin: -105% 0 0 14%;
  }
  #input_add {
    width: 70%;
    margin: -92% 0 0 14%;
  }
  select {
    background-size: 20px;
  }
}

#vip2_uploadFileName, #vip2_uploadFileName_2 {
  word-wrap: break-word;
}

/*彈跳教學*/
/*
#mask {
   top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.7;
    position: fixed;
    z-index: 99;
}*/
#mask {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background: #000;
  display: none;
  z-index: 0;
  zoom: 1;
  filter: alpha(opacity=50);
  opacity: 0.5;
}

#teach {
  position: absolute;
  z-index: 2000;
  padding: 4%;
  top: 0;
}

#teach > img {
  width: 100%;
}

#closeTeach {
  border: 3px solid #fff;
  border-radius: 90px;
  height: 30px;
  width: 30px;
  background-color: black;
  position: absolute;
  right: 2%;
  top: 2%;
}

#closeTeach > div {
  color: #fff;
  font-size: 24px;
  line-height: 20px;
  text-align: center;
  font-family: monospace;
  font-weight: bold;
}

.teachGroup {
  display: none;
}

.imgIDcard1View {
  margin: -53.5% 0 0 14%;
  position: absolute;
  width: 71%;
  height: auto;
  max-height: 480px;
}

.imgIDcard2View {
  margin: 21% 0 0 14%;
  position: absolute;
  width: 71%;
  height: auto;
  max-height: 480px;
}

.imgBankcardView {
  margin: -50% 0 0 14%;
  position: absolute;
  width: 71%;
  height: auto;
  max-height: 480px;
}

.imgIDcard1, .imgIDcard2, .imgBankcard {
  max-height: 100%;
  width: 100%;
  max-width: 725px;
  height: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.result, .result_done, .result_disable {
  margin-bottom: 50px;
  margin-top: 30px;
  border-width: 3px;
  border-style: solid;
  border-color: #1396fa;
  padding: 5px;
  background-color: #fff;
  border-radius: 25px;
}

.txt_head {
  font-size: 400%;
  text-align: center;
  width: 100%;
  color: #0090ff;
  font-family: Microsoft JhengHei;
}

.txt_body {
  font-size: 400%;
  width: 100%;
  text-align: center;
  color: #0090ff;
  font-family: Microsoft JhengHei;
}

.loader {
  border: 16px solid #f3f3f3;
  border-radius: 50%;
  border-top: 16px solid #3498db;
  width: 120px !important;
  height: 120px;
  -webkit-animation: spin 2s linear infinite;
  /* Safari */
  animation: spin 2s linear infinite;
  z-index: 21;
}

/* Safari */
@-webkit-keyframes spin {
  0% {
    -webkit-transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
  }
}

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

#rules {
  width: 100%;
  position: relative;
  margin-top: 80px;
  z-index: 1;
}

@media (max-width: 1024px) {
  #rules {
    margin-top: 60px;
  }
}

#rules h3, #rules ul, #rules ol {
  color: #fff;
  z-index: 1;
  position: relative;
}

#rules:before {
  content: "";
  display: block;
  width: 300%;
  height: calc(100% + 4vw);
  left: -100%;
  top: -4vw;
  background-color: #14003d;
  position: absolute;
  z-index: 0;
}

@media (max-width: 1024px) {
  #rules:before {
    width: 100vw;
    left: 0;
    height: calc(100% + 5vw);
    top: -5vw;
  }
}

#rules h3 {
  font-size: 45px;
  font-weight: bold;
  text-align: center;
  width: 100%;
  margin-top: 1em;
  margin-bottom: 0.5em;
  z-index: 1;
}

@media (max-width: 1024px) {
  #rules h3 {
    font-size: 6vw;
  }
}

@media (max-width: 600px) {
  #rules h3 {
    font-size: 5vw;
  }
}

#rules ul, #rules ol {
  text-align: justify;
  font-size: 38px;
  font-weight: 500;
  padding-left: 1.75em;
  padding-right: 1em;
  margin: .35em auto 1em;
  line-height: 1.3333;
  z-index: 2;
}

@media (max-width: 1024px) {
  #rules ul, #rules ol {
    font-size: 5vw;
  }
}

@media (max-width: 600px) {
  #rules ul, #rules ol {
    font-size: 4.5vw;
  }
}

#rules li {
  position: relative;
}

#rules li + li {
  margin-top: .5em;
}

/*# sourceMappingURL=main.css.map */