body {
  margin: 0;
  padding: 0;
}

.headerDiv {
  position: relative;
  background-image: url(/skin/pay/images/head-bg.jpg);
  background-position: top;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  height: 0;
  padding-bottom: 17%;
}
.headerDiv .header-logo {
  display: inline-block;
  position: absolute;
  background-image: url(/skin/pay/images/logo-m.png);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100%;
  width: 10%;
  height: 0;
  padding-bottom: 7%;
  top: 4%;
  left: 1%;
}
.middleDiv {
  width: 75%;
  margin: 0 auto 5% auto;
  background-color: #ffffff;
  border-radius: 10px;
  height: auto;
  padding-bottom: 50%;
  padding-top: 3%;
}
.middleDiv .card-body {
  padding: 1rem 1.5rem;
}
.middleDiv .login-box {
  /*width: 26%;*/
  max-width: 330px;
  margin: 0 auto;
  background-color: #ffffff;
  border-radius: 10px;
  /* box-shadow: 0 1rem 1.5rem #323232; */
  padding-top: 1%;
  padding-bottom: 1%;
}
.middleDiv .login-box-logo {
  width: 50%;
  margin: 0 auto 1rem auto;
}
.middleDiv .login-box-logo img {
  width: 100%;
}
.middleDiv .login-box-hr {
  width: 100%;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #7e7e7e;
  margin-bottom: 3%;
}
.middleDiv .login-box-hr::before,
.middleDiv .login-box-hr::after {
  content: "";
  flex: 1;
  border-bottom: 1px solid #7e7e7e;
}
.middleDiv .login-box-hr span {
  padding: 0 12px;
  white-space: nowrap; /* 不換行 → 不會跑版 */
}
.middleDiv .login-box .login-box-title {
  text-align: center;
  font-size: 20px;
  font-weight: bold;
}
.middleDiv .login-box .login-box-a-items {
  width: 100%;
  margin: 0 auto;
}
.middleDiv .login-box .login-box-a-items a {
  display: inline-block;
  width: 100%;
  margin: 0.85rem auto;
  transition: opacity 0.3s ease-in-out;
}
.middleDiv .login-box .login-box-a-items a:focus,
.middleDiv .login-box .login-box-a-items a:active {
  outline: none;
  border: 0;
}
.middleDiv .login-box .login-box-a-items a.btn-login-items {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  height: 2.85rem;
}
.middleDiv .login-box .login-box-a-items a.btn-login-google {
  margin: 20% auto;
  background-image: url(/skin/pay/images/google-login-btn.png);
}
.middleDiv .login-box .login-box-a-items a.btn-login-google:hover,
.middleDiv .login-box .login-box-a-items a.btn-login-google:active {
  background-image: url(/skin/pay/images/google-login-btn-active.png);
}
.middleDiv .login-box .login-box-a-items a.btn-login-apple {
  background-image: url(/skin/pay/images/apple-login-btn.png);
}
.middleDiv .login-box .login-box-a-items a.btn-login-apple:hover,
.middleDiv .login-box .login-box-a-items a.btn-login-apple:active {
  background-image: url(/skin/pay/images/apple-login-btn-active.png);
}
.middleDiv .login-box .login-box-a-items a.btn-login-phone {
  background-image: url(/skin/pay/images/phone-login-btn.png);
}
.middleDiv .login-box .login-box-a-items a.btn-login-phone:hover,
.middleDiv .login-box .login-box-a-items a.btn-login-phone:active {
  background-image: url(/skin/pay/images/phone-login-btn-active.png);
}
.middleDiv .login-box .login-box-a-items a.btn-login-account {
  background-image: url(/skin/pay/images/account-login-btn.png);
}
#modal1 .modal-header,
#modal2 .modal-header {
  border-bottom: none;
  text-align: center;
}

#modal1 .modal-body,
#modal2 .modal-body {
  padding: 1rem 5rem;
}
#modal1 .modal-content,
#modal2 .modal-content {
  background-color: #f5f5f5;
  border: 0;
  border-radius: 0.8rem;
}
#modal1 .modal-title-self,
#modal2 .modal-title-self {
  width: 100%;
  text-align: center;
}
#modal1 .modal-title-self .modal-title,
#modal2 .modal-title-self .modal-title {
  font-weight: bold;
}
#modal1 .form-phone-box {
  width: 100%;
  display: flex;
  margin-bottom: 1rem;
}
#modal1 .form-select-country-area {
  width: 45%;
}
#modal1 .form-control-phone {
  width: 54%;
  margin-left: 1%;
}
#modal1 .form-code-box {
  margin-bottom: 1rem;
}
#modal1 .btn-send-code {
  border: 1px solid #ef7518;
  background-color: #ffffff;
  color: #ef7518;
  width: 100%;
  transition: all 0.3s ease-in-out;
  margin-top: 1rem;
}
#modal1 .btn-send-code:hover {
  background-color: #ef7518;
  color: #ffffff;
}
#modal1 .modal-footer-login {
  width: 100%;
  padding-left: 4.75rem;
  padding-right: 4.75rem;
  border-top: 0;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
#modal1 .btn-phone-login {
  width: 100%;
  background-color: #ef7518;
  color: #ffffff;
}
#modal1 .btn-phone-login.btn-primary.disabled,
#modal1 .btn-phone-login.btn-primary:disabled {
  border: 1px solid #ef7518;
}
#modal2 .form-password-input {
  margin-top: 0.7rem;
  margin-bottom: 0.7rem;
}
#modal2 .form-password-input:nth-child(2) {
  margin-bottom: 1rem;
}
#modal2 .btn-password-login {
  width: 100%;
  background-color: #ef7518;
  color: #ffffff;
  border: 1px solid #ef7518;
  margin-top: 3rem;
  margin-bottom: 3rem;
}
#modal2 .btn-password-login:hover {
  background-color: #ffffff;
  color: #ef7518;
}

.footerText {
  position: fixed;
  bottom: 0.5%;
  left: 1%;
  z-index: 16;
  color: #a5a5a5;
  cursor: pointer;
  font-size: 0.9vw;
}
.footerDiv {
  background-color: #252422;
  padding: 3% 0 1% 0;
  /*position: fixed;*/
  position: relative;
  bottom: 0;
  width: 100%;
  z-index: 15;
}
.footerDiv.footerOtherIndexDiv {
  position: relative;
  bottom: unset;
}
.footerDiv .footerDivBox {
  width: 80%;
  margin: 0 auto;
}
.footerDiv .footerTopDiv {
  width: 40%;
  margin: 0 auto;
}
.footerDiv .footerTopDiv img {
  width: 100%;
}
.footerDiv .footerMiddleDiv {
  width: 35%;
  margin: 2% auto;
  position: relative;
}
.footerDiv .footerMiddleDiv img {
  width: 100%;
}
.footerDiv .footerMiddleDiv .footerGameIntro {
  color: #ffffff;
  margin: 0.5% 0;
  font-size: 0.75vw;
  position: absolute;
  right: 11%;
  bottom: -10%;
}
.footerDiv .footerMiddleDiv .footerIntro {
  background-image: url(/skin/images/footer-intro.png);
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  height: 0;
  padding-bottom: 25%;
}
.footerDiv .footerMiddleDiv .footerGameIntro p {
  margin: 1.5% 0;
}
.footerDiv .footerNotice {
  margin: 0 0 1.5% 0;
  width: 100%;
  text-align: center;
  color: #ffffff;
}
.footerDiv .footerNotice p {
  margin: 0.1% 0;
  font-size: 0.75vw;
}
.footerDiv .footerADiv {
  width: 100%;
  text-align: center;
}
.footerDiv .footerADiv a {
  color: #ffffff;
  text-decoration: none;
  font-weight: bold;
  position: relative;
  margin: 0 0.5%;
  font-size: 0.9vw;
}
.footerDiv .footerADiv a:nth-child(2):before {
  content: "|";
  position: absolute;
  top: -10%;
  left: -12%;
}
.footerDiv .footerADiv a:nth-child(3):before {
  content: "|";
  position: absolute;
  top: -10%;
  left: -12%;
}
.footerDiv.footerOtherIndexDiv .footerADiv a:nth-child(2):before {
  top: -6%;
  left: -14%;
}
.footerDiv.footerOtherIndexDiv .footerADiv a:nth-child(3):before {
  top: -6%;
  left: -14%;
}
.footerDiv .footerADiv a:hover,
.footerDiv .footerADiv a:active,
.footerDiv .footerADiv a:visited {
  color: #ffffff;
}
.footerDiv .footerBottomDiv {
  color: #ffffff;
  font-size: 0.8vw;
  font-family: "Noto Sans TC", serif;
  text-align: center;
  margin: 2% 0 0 0;
}

.fp-warning,
.fp-watermark {
  display: none;
}

/*footer動畫*/
.fade-footer-enter-active,
.fade-footer-leave-active {
  transition: all 0.3s ease;
}
/* 轉場動畫 */
.fade-footer-enter-from,
.fade-footer-leave-to {
  opacity: 0;
  transform: translateY(100%);
}
.fade-footer-enter-to,
.fade-footer-leave-from {
  opacity: 1;
  transform: translateY(0);
}

#topMenu {
  position: relative;
  padding-bottom: 5.8%;
}
#topMenu a {
  display: inline-block;
  width: 8%;
}
#topMenu a img {
  width: 100%;
}

.contentDiv {
  width: 80%;
  margin: 0 auto;
}

.middleDiv .login-box .login-box-result {
    text-align: center;
    width: 100%;
    margin: 20% auto;
}
.middleDiv .login-box .login-box-result div{
    margin-top: 3%;
    font-weight: bold;
    font-size: 1.2em;
}
.middleDiv .login-box .login-box-a-items.login-box-a-items-return {
  width: 25%;
  margin: 0 auto;
}
.middleDiv .login-box .btn-login-return {
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100%;
  width: 100%;
  height: 2.85rem;
  background-image: url(/skin/pay/images/return-icon.png);
}
.middleDiv .login-box .btn-login-return:hover {
  background-image: url(/skin/pay/images/return-icon-active.png);
}

@media screen and (max-width: 720px) {
  .headerDiv {
    background-image: url(/skin/pay/images/head-bg-m.jpg);
    padding-bottom: 65%;
  }
  .headerDiv .header-logo {
    display: inline-block;
    background-image: url(/skin/pay/images/logo-m.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
    width: 55%;
    height: 0;
    padding-bottom: 40%;
    top: 2%;
    left: 22.5%;
  }
  .middleDiv {
    width: 100%;
    margin: 0 auto;
    background-color: #ffffff;
    border-radius: unset;
    height: auto;
    padding-bottom: 50%;
    padding-top: 5%;
  }

  #modal1 .modal-body,
  #modal2 .modal-body {
    padding: 1rem 3rem;
  }
  #modal1 .modal-footer-login {
    padding-left: 2.75rem;
    padding-right: 2.75rem;
  }

  .footerDiv.footerOtherIndexDiv {
    position: relative;
    bottom: 0;
  }
  .footerDiv .footerDivBox {
    width: 95%;
  }
  .footerDiv .footerTopDiv {
    width: 90%;
    margin: 2% auto;
  }
  .footerDiv .footerMiddleDiv .footerIntro {
    padding-bottom: 25%;
  }
  .footerDiv .footerMiddleDiv {
    width: 95%;
    margin: 4% auto 3% auto;
  }
  /*.footerDiv .footerMiddleDiv .footerGameIntro{*/
  /*    font-size: 3vw;*/
  /*    margin: .7% 0;*/
  /*    right: 2%;*/
  /*    bottom: -15%;*/
  /*}*/
  .footerDiv .footerNotice p {
    margin: 0.5% 0;
    font-size: 2.7vw;
  }
  .footerDiv .footerADiv a {
    margin: 0 2%;
    font-size: 4vw;
  }
  .footerDiv .footerADiv a:nth-child(2):before {
    top: -13%;
  }
  .footerDiv .footerADiv a:nth-child(3):before {
    top: -13%;
  }
  .footerDiv .footerBottomDiv {
    font-size: 0.6rem;
    margin: 1% 0 0 0;
  }
  .footerDiv .footerADiv {
    margin-top: 3%;
  }
  .footerDiv .footerMiddleDiv .footerGameIntro {
    font-size: 2.5vw;
    right: 11%;
    bottom: -10%;
  }
  .footerDiv .footerNotice {
    margin: 5% 0 1.5% 0;
  }
}