@charset "UTF-8";
/* 登入頁面主容器 */
.login-page-wrapper {
  width: 90%;
  max-width: 796px;
  margin: 0 auto;
}
.login-newStyle{
  text-align: left;
}

.login-newStyle #div_input_form {
  width: 90%;
  max-width: 796px;
  margin: 0 auto;
}

.login-newStyle #div_input_form form {
  width: 100%;
}
.login-newStyle #div_input_form form label {
  font-size: 19px !important;
  margin: 5px 0;
  display: inline-block;
  line-height: 1.2em !important;
  color: #151515 !important;
}
.login-newStyle #div_input_form form input[type=password],
.login-newStyle #div_input_form form input[type=text] {
  height: 40px;
  font-size: 1.3em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #fff;
  color: #333;
  -webkit-transition: border-color 0.3s, -webkit-box-shadow 0.3s;
  transition: border-color 0.3s, -webkit-box-shadow 0.3s;
  transition: border-color 0.3s, box-shadow 0.3s;
  transition: border-color 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s;
  padding: 0 20px;
  border: 2px solid #6f6f6f;
  border-radius: 12px;
  width: 100%!important;
}
.login-newStyle #div_input_form form input[type=password]:focus,
.login-newStyle #div_input_form form input[type=text]:focus {
  outline: none;
  border-color: #ff9900;
  -webkit-box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.1);
          box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.1);
}
.login-newStyle #div_input_form form input[type=password]::-webkit-input-placeholder, .login-newStyle #div_input_form form input[type=text]::-webkit-input-placeholder {
  color: #a6a6a6;
}
.login-newStyle #div_input_form form input[type=password]::-moz-placeholder, .login-newStyle #div_input_form form input[type=text]::-moz-placeholder {
  color: #a6a6a6;
}
.login-newStyle #div_input_form form input[type=password]:-ms-input-placeholder, .login-newStyle #div_input_form form input[type=text]:-ms-input-placeholder {
  color: #a6a6a6;
}
.login-newStyle #div_input_form form input[type=password]::-ms-input-placeholder, .login-newStyle #div_input_form form input[type=text]::-ms-input-placeholder {
  color: #a6a6a6;
}
.login-newStyle #div_input_form form input[type=password]::placeholder,
.login-newStyle #div_input_form form input[type=text]::placeholder {
  color: #a6a6a6;
}
@media screen and (min-width: 768px) {
  .login-newStyle #div_input_form form input[type=password],
  .login-newStyle #div_input_form form input[type=text] {
    height: 62px;
  }
}
.login-newStyle #div_input_form form input[type=text].account,
.login-newStyle #div_input_form form input[type=password].password,
.login-newStyle #div_input_form form input[type=email].email {
  width: 100%;
  margin: 6px 0;
}
.login-newStyle #div_input_form form .box_VerifyCode {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin: 6px 0;
  max-width: 517px;
  height: 40px;
  overflow: visible;
}
@media screen and (min-width: 768px) {
  .login-newStyle #div_input_form form .box_VerifyCode {
    height: 62px;
  }
}
.login-newStyle #div_input_form form .box_VerifyCode img {
  height: 100%;
  max-width: 190px;
  width: auto !important;
  border-radius: 10px;
  margin: 0 12px 0 0 !important;
  -o-object-fit: contain;
     object-fit: contain;
}
.login-newStyle #div_input_form form .box_VerifyCode i.fa-repeat {
  font-size: 37px !important;
  color: #aaaaaa !important;
  cursor: pointer !important;
  margin: 0 12px 0 0 !important;
  -webkit-transition: color 0.3s, -webkit-transform 0.3s;
  transition: color 0.3s, -webkit-transform 0.3s;
  transition: color 0.3s, transform 0.3s;
  transition: color 0.3s, transform 0.3s, -webkit-transform 0.3s;
}
.login-newStyle #div_input_form form .box_VerifyCode i.fa-repeat:hover {
  color: #ff9900 !important;
  -webkit-transform: rotate(180deg) !important;
          transform: rotate(180deg) !important;
}
.login-newStyle #div_input_form form .box_VerifyCode input[type=text]#f_strVerifyCodeLogin {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  max-width: 268px;
  margin: 0;
}
.login-newStyle #div_input_form .btn__group {
  width: 100%;
  margin: 30px auto 5px auto;
  max-width: 415px;
  display: flex;
  flex-wrap: wrap;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
  row-gap: 0px;
}
.login-newStyle #div_input_form .btn__group .button {
  width: 100%;
  height: 58px;
  margin: 6px 0;
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  border-radius: 30px;
  letter-spacing: 2px;
  border: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-width: 0 !important;
  width: 100% !important;
}
.login-newStyle #div_input_form .btn__group .button.button--styleA.color--backgroundA {
      background: #feb734;
  -webkit-box-shadow: 0px 2.3333332539px 2.33px #ffca61 inset;
          box-shadow: 0px 2.3333332539px 2.33px #ffca61 inset;
  border-radius: 15px;
  box-shadow: 0px -4.666667px 2.33px #df8011 inset;
  color: #7a310a;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  font-size: 2.5em;
}
.login-newStyle #div_input_form .btn__group .button.button--styleA.color--backgroundA:active {
  -webkit-transform: translateY(3px);
          transform: translateY(3px);
  -webkit-box-shadow: 0 2px 0 #cc7700, 0 3px 6px rgba(0, 0, 0, 0.25);
          box-shadow: 0 2px 0 #cc7700, 0 3px 6px rgba(0, 0, 0, 0.25);
}
.login-newStyle #div_input_form .btn__group .button.button--styleA.SignUp {
  background: linear-gradient(180deg, #51b3d6 0%, #3f99be 50%, #2f84a8 100%);
  box-shadow: 0px -4.666667px 2.33px #2674a3 inset;
  border-radius: 15px;
  color: #ffffff;
  font-size: 1.5em;
  width: 48% !important;
}
.login-newStyle #div_input_form .btn__group .button.button--styleA.ForgetPassword {
  background: linear-gradient(180deg, #4e73df 0%, #345bcb 50%, #2a49a1 100%);
  box-shadow: 0px -4.666667px 2.33px #263aa3 inset;
  color: #fff;
  border-radius: 15px;
  font-size: 1.5em;
  width: 48% !important;
  -webkit-box-shadow: none;
          box-shadow: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}
.login-newStyle .login-button {
  width: 100%;
  margin: 30px auto 10px auto;
  border: none;
  padding: 20px 0;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 246, 229, 0)), color-stop(50%, #F5DCBE), to(rgba(255, 246, 229, 0)));
  background: linear-gradient(90deg, rgba(255, 246, 229, 0) 0%, #F5DCBE 50%, rgba(255, 246, 229, 0) 100%);
}
.login-newStyle .login-button p {
  display: none;
}
.login-newStyle .login-button ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: nowrap;
      flex-wrap: nowrap;
  gap: 10px;
}
.login-newStyle .login-button ul li {
  margin: 0;
  cursor: pointer;
}
.login-newStyle .login-button ul li:empty {
  display: none;
}
.login-newStyle .login-button ul li a {
  width: 52px;
  height: 52px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-decoration: none;
  font-size: 28px;
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
          box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  -webkit-transition: -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
  transition: -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
  transition: transform 0.3s, box-shadow 0.3s;
  transition: transform 0.3s, box-shadow 0.3s, -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
  margin: 0;
}
.login-newStyle .login-button ul li a .fab::before {
  font-size: 1em !important;
}
.login-newStyle .login-button ul li a .fa-2x {
  font-size: 1em !important;
}
.login-newStyle .login-button ul li a:hover {
  -webkit-transform: scale(1.15) translateY(-3px);
          transform: scale(1.15) translateY(-3px);
  -webkit-box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.login-newStyle .login-button ul li.button_kkbox a {
      background-image: url(/Games/tmd/images/icon_kkbox.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #18ddf8;
}
.login-newStyle .login-button ul li.button_msn a{
  background: #00a1f1;
}
.login-newStyle .login-button ul li.button_gt a{
    background-image: url(/Games/tmd/images/icon_gt.png);
    background-position: center center;
    background-repeat: no-repeat;
    background-color: #b4de41;
}
.login-newStyle .login-button ul li.button_FB a {
  background: #3b5998;
}
.login-newStyle .login-button ul li.button_yahoo a {
  background: #410093;
}
.login-newStyle .login-button ul li.button_wechat a{
  background: #2dc100;
}
.login-newStyle .login-button ul li.button_google a {
  background-image: url(/Games/tmd/images/icon_google.png);
  background-position: center center;
  background-repeat: no-repeat;
}
.login-newStyle .login-button ul li.button_msn a {
  background: #00a1f1;
}
.login-newStyle .login-button ul li.button_line a {
  background: #00c200;
}
.login-newStyle .login-button ul li.button_apple a {
  background: #000000;
}

#div_input_form .btn__group .button.button--styleA.ForgetPassword {
  display: none;
}

/* 登入表單容器 */
.login-form-container {
  width: 100%;
}
.login-form-container .form input {
  height: 40px;
  font-size: 1.3em;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: #fff;
  color: #333;
  -webkit-transition: border-color 0.3s, -webkit-box-shadow 0.3s;
  transition: border-color 0.3s, -webkit-box-shadow 0.3s;
  transition: border-color 0.3s, box-shadow 0.3s;
  transition: border-color 0.3s, box-shadow 0.3s, -webkit-box-shadow 0.3s;
  padding: 0 20px;
  border: 2px solid #6f6f6f;
  border-radius: 12px;
  width: 100%;
}
.login-form-container .form input:focus {
  outline: none;
  border-color: #ff9900;
  -webkit-box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.1);
          box-shadow: 0 0 0 3px rgba(255, 153, 0, 0.1);
}
.login-form-container .form input::-webkit-input-placeholder {
  color: #a6a6a6;
}
.login-form-container .form input::-moz-placeholder {
  color: #a6a6a6;
}
.login-form-container .form input:-ms-input-placeholder {
  color: #a6a6a6;
}
.login-form-container .form input::-ms-input-placeholder {
  color: #a6a6a6;
}
.login-form-container .form input::placeholder {
  color: #a6a6a6;
}
@media screen and (min-width: 768px) {
  .login-form-container .form input {
    height: 62px;
  }
}
.login-form-container .form input[type=text].account,
.login-form-container .form input[type=password].password,
.login-form-container .form input[type=email].email {
  width: 100%;
  margin: 6px 0;
}
.login-form-container .verifyCode {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: start;
      -ms-flex-pack: start;
          justify-content: flex-start;
  margin: 6px 0;
  max-width: 517px;
  height: 40px;
}
@media screen and (min-width: 768px) {
  .login-form-container .verifyCode {
    height: 62px;
  }
}
.login-form-container .verifyCode img {
  height: 100%;
  max-width: 190px;
  border-radius: 10px;
  margin: 0 12px 0 0;
  -o-object-fit: contain;
     object-fit: contain;
}
.login-form-container .verifyCode i.fa-repeat {
  font-size: 37px;
  color: #aaaaaa;
  cursor: pointer;
  margin: 0 12px 0 0;
  -webkit-transition: color 0.3s, -webkit-transform 0.3s;
  transition: color 0.3s, -webkit-transform 0.3s;
  transition: color 0.3s, transform 0.3s;
  transition: color 0.3s, transform 0.3s, -webkit-transform 0.3s;
}
.login-form-container .verifyCode i.fa-repeat:hover {
  color: #ff9900;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
}
.login-form-container .verifyCode input[type=text].code {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  max-width: 268px;
  margin: 0;
}
.login-form-container .button__group {
  width: 100%;
  margin: 30px auto 55px auto;
  max-width: 415px;
}
.login-form-container .button__group__bottom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  gap: 20px;
}
.login-form-container .button {
  width: 100%;
  height: 58px;
  margin: 6px 0;
  text-decoration: none;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center;
  font-size: 20px;
  font-weight: bold;
  border-radius: 30px;
  letter-spacing: 2px;
  border: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  cursor: pointer;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  min-width: none;
}
.login-form-container a.login.button {
      background: #feb734;
  -webkit-box-shadow: 0px 2.3333332539px 2.33px #ffca61 inset;
          box-shadow: 0px 2.3333332539px 2.33px #ffca61 inset;
  border-radius: 35px;
  color: #7a310a;
  text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
  font-size: 2.5em;
}
.login-form-container a.login.button:active {
  -webkit-transform: translateY(3px);
          transform: translateY(3px);
  -webkit-box-shadow: 0 2px 0 #cc7700, 0 3px 6px rgba(0, 0, 0, 0.25);
          box-shadow: 0 2px 0 #cc7700, 0 3px 6px rgba(0, 0, 0, 0.25);
}
.login-form-container a.signup.button {
  background-color: #976121;
  color: #fff;
  border-radius: 35px;
  font-size: 1.5em;
}
.login-form-container a.forgetpassword.button {
  background: -webkit-gradient(linear, left top, left bottom, from(#976121), to(#583000));
  background: linear-gradient(180deg, #976121, #583000);
  color: #fff;
  border-radius: 35px;
  font-size: 1.5em;
}
.login-form-container .login-button {
  width: 100%;
  margin: 30px 0 10px 0;
  border: none;
  padding: 20px 0;
  background: -webkit-gradient(linear, left top, right top, from(rgba(255, 246, 229, 0)), color-stop(50%, rgb(255, 246, 229)), to(rgba(255, 246, 229, 0)));
  background: linear-gradient(90deg, rgba(255, 246, 229, 0) 0%, rgb(255, 246, 229) 50%, rgba(255, 246, 229, 0) 100%);
}
.login-form-container .login-button p {
  display: none;
}
.login-form-container .login-button ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 10px;
}
.login-form-container .login-button ul li {
  margin: 0;
}
.login-form-container .login-button ul li:empty {
  display: none;
}
.login-form-container .login-button ul li a {
  width: 52px;
  height: 52px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  color: #ffffff;
  text-decoration: none;
  font-size: 28px;
  -webkit-box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
          box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  -webkit-transition: -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
  transition: -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
  transition: transform 0.3s, box-shadow 0.3s;
  transition: transform 0.3s, box-shadow 0.3s, -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
  margin: 0;
}
.login-form-container .login-button ul li a .fab::before {
  font-size: 1em !important;
}
.login-form-container .login-button ul li a .fa-2x {
  font-size: 1em !important;
}
.login-form-container .login-button ul li a:hover {
  -webkit-transform: scale(1.15) translateY(-3px);
          transform: scale(1.15) translateY(-3px);
  -webkit-box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.login-form-container .login-button ul li.button_FB a {
  background: #3b5998;
}
.login-form-container .login-button ul li.button_yahoo a {
  background: #410093;
}
.login-form-container .login-button ul li.button_google a {
  background: #dc4e41;
}
.login-form-container .login-button ul li.button_msn a {
  background: #00a1f1;
}
.login-form-container .login-button ul li.button_line a {
  background: #00c200;
}
.login-form-container .login-button ul li.button_apple a {
  background: #000000;
}
.login-form-container .login-buttonB {
  width: 100%;
  margin: 20px 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
}
.login-form-container .login-buttonB ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  gap: 15px;
  max-width: 450px;
}
.login-form-container .login-buttonB ul li a {
  width: 112px;
  height: 112px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-decoration: none;
  border-radius: 10px;
  border: 2px solid #ab875c;
  background: rgba(0, 0, 0, 0.5);
  -webkit-transition: -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
  transition: -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
  transition: transform 0.3s, box-shadow 0.3s;
  transition: transform 0.3s, box-shadow 0.3s, -webkit-transform 0.3s, -webkit-box-shadow 0.3s;
  overflow: hidden;
}
.login-form-container .login-buttonB ul li a:hover {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
  -webkit-box-shadow: 0 4px 12px rgba(171, 135, 92, 0.6);
          box-shadow: 0 4px 12px rgba(171, 135, 92, 0.6);
}
.login-form-container .login-buttonB ul li a img {
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
}
.login-form-container h4 {
  text-align: center;
  color: #fff;
  font-size: 18px;
  margin: 0 0 20px 0;
  text-shadow: 0.1em 0.1em 0.2em rgba(0, 0, 0, 0.9);
}
.login-form-container .errorsection {
  border: 2px solid #ff0000;
  border-radius: 12px;
  width: 100%;
  padding: 0 20px;
  margin: 6px 0;
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
@media screen and (min-width: 768px) {
  .login-form-container .errorsection {
    height: 62px;
  }
}
.login-form-container .list--error {
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}
.login-form-container .list--error li {
  list-style: none;
}
.login-form-container .list--error li:first-child {
  color: #ff0004;
  font-size: 24px;
  margin-right: 10px;
}
.login-form-container .list--error li:nth-child(n+2) {
  color: #ff0004;
  font-size: 1.3em;
  font-weight: 500;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  word-break: break-word;
}
/* 新增標題 */
.page-title-header {
  background-image: url('/Games/FreePlay/Mj/star31/images/bg_index_btn.png');
  width: 100%;
  max-width: 1000px;
  margin:  0 auto;
  background-repeat: repeat-x;
  padding: 7px 0;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
  color: #611f0a;
  margin-bottom: 0px;
  border-radius: 5px 5PX 0 0;
  display: flex;
    align-items: center;
    justify-content: center;
}
/* 在文字前插入星星圖標 */
.page-title-header::before {
  content: '★';
  display: flex;
  align-items: center;
  justify-content: center;

  /* 圓形底座尺寸與顏色 */
  width:  28px;
  height: 25px;
  background-color: #5d2906; /* 深褐色 */
  border: 1.5px solid #fce25e; /* 黃色細邊框 */
  border-radius: 50%;
  margin-right: 5px;
  /* 星星文字樣式 */
  color: #ffeb3b; /* 亮黃色 */
  font-size: 18px; /* 星星大小 */
  line-height: 1;
  padding-bottom: 2px;
}


/*===box Start===*/
.box{ width:90%; margin: 10px auto; padding:5px; border-radius: 10px; max-width: 796px;}
.boxA{ width:98%; margin:10px auto; padding:5px; }
	.box--styleA{ border: 1px solid #ab875c; }
	.box--styleA h3{ color: #FF0004; }
	.box--styleA p{ margin: 10px 0; }

	.box--styleB{ border: 1px solid #FF0004;clear: both;}
	.box--styleB h3{ color: #FF0004; }

/*==list Start==*/
.list{ width:100%; margin: 0 auto; padding:5px; position:relative; display: inline-block; }
	/*listStyle--A*/
	.list--styleA li{ margin-left:50px; }

	/*listStyle--B*/
	.list--styleB li{ list-style: none; }
	.list--styleB li:nth-child(n+2) { margin-left:40px; }
	.list--styleB li:first-child{ width:10px; height:100%; color:#FF0004; position:absolute; top:0; display:flex; justify-content:center; align-items:center; display: -webkit-flex; -webkit-justify-content: center;  -webkit-align-items: center; }

/*== 內容標題字 ==*/
#div_apple_login h4{
	display:block;
	text-align:center;
	width:100%;
	color:#fff;
	line-height:1.5em;
	font-size:1.2em;
	text-shadow: 0.1em 0.1em 0.2em rgba(0,0,0,0.9);
	font-weight:normal;
	margin:0 auto 0.8em auto;
}

/*==button Start==*/
.button{ width:50%; margin:5px auto; text-decoration:none; display: flex; justify-content:center; align-items:center;  text-align:center; display: -webkit-flex; -webkit-justify-content: center;  -webkit-align-items: center;font-size:16px; }
	.button--styleA{ height:45px; background-color:#ab875c; box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 0 0; color:#000; letter-spacing:1px; }
		/*button--styleA針對下一個區域浮動問題*//*20180730J*/
		.button--styleA--flex{display:inherit;}

	.button--styleB{ height:45px; background-color:rgba(0, 0, 0, 0.1); border:2px #ab875c solid; box-shadow: rgba(0, 0, 0, 0.5) 1px 1px 0 0; color:#8f693b; letter-spacing:1px;}

	.button--styleC{ height:30px; background-color:#5BBC82; box-shadow: #8c8c8c 1px 1px 0 0; border-radius:15px; color:#FFFFFF; letter-spacing:1px;  font-size:14px; }

	.button__group{ width: 90%; margin:0 auto 20px auto; }
	.button__group ul{ display:flex; justify-content:space-around; flex-wrap:wrap; display: -webkit-flex; -webkit-justify-content: space-around; -webkit-flex-wrap: wrap; width:100%; }
	.button__group li{ display:block; float:left; width:23%; }
	.button__group ul li a.button{ width:100%; }

	.login-button{ width:90%; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; display: -webkit-flex; -webkit-justify-content: center;  -webkit-align-items: center;  -webkit-flex-wrap: wrap; }
	.login-button p{ width:100%; line-height:50px; color: #666666; text-align:center;  }
	.login-button ul{ list-style-type:none; width:560px; display:flex; justify-content:space-between; align-items:center; display: -webkit-flex; -webkit-justify-content: space-between;  -webkit-align-items: center; padding-bottom:20px; justify-content: center; flex-wrap: wrap; }
	.login-button ul li a{ width:60px; height:60px; font-size:1.5em; display:flex; justify-content:center; align-items:center; display: -webkit-flex; -webkit-justify-content: center;  -webkit-align-items: center; color:#ffffff; text-decoration:none; }
	.login-button li.button_FB a{ background:#3b5998; }
	.login-button li.button_yahoo a{ background:#410093; }
	.login-button li.button_google a{ background:#dc4e41; }
	.login-button li.button_msn a{ background:#00a1f1; }
	.login-button li.button_line a{ background:#00c200; }

	.bugreport-button{ width:90%; display:block; box-shadow: #CCC 1px 1px 0 0; border-radius:8px; padding:3px; font-size:80%; color:#333;}
	.bugreport-button__styleA{background-color:#EBEBEB;}
	.bugreport-button__styleB .number{}
	.bugreport-button__styleB{background-color:#FFC;}
	.bugreport-button__styleB .number{color:#C60}
	.bugreport-button__styleC{background-color:#CF9;}
	.bugreport-button__styleC .number{color:#363}
	.bugreport-button__styleD{background-color:#FCC;}
	.bugreport-button__styleD .number{color:#900}
	.bugreport-button__active{color:#fff;}
	.bugreport-button__active .number{}

	.pageNum-button{ width:100%; margin:20px auto; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; display: -webkit-flex; -webkit-justify-content: center;  -webkit-align-items: center; -webkit-flex-wrap: wrap; }
	.pageNum-button ul{ display:inline-block; margin:20px; border-radius:5px; }
	.pageNum-button li{ display:inline; float: left; }
	.pageNum-button li a{ padding: 10px 12px; line-height: 30px; text-decoration: none; background-color: transparent; border: none; color:#ab875c; }
	.pageNum-button li a:hover{ color:#FFF}
	.pageNum-button li.active a{ padding: 10px 12px; line-height: 30px; text-decoration: none; background-color:#ab875c; border: 1px solid #65451f; color:#000 !important; }

/*==form Start 輸入框設定==*/
.form{  width:90%; margin: 5px auto; }
	.form--styleA input[type="text"], .form--styleA input[type="password"], .form--styleA input[type="email"], .form--styleA input[type="number"]
	{ width:100%; height:2.5em; padding-left:8px; border:1px #b8c5a8 solid; margin:5px auto; }

	.form--styleA>ul{ width:100%; display:inline-block; }
	.form--styleA>ul li{ width:50%; float:left; display:flex; justify-content:center; display: -webkit-flex; -webkit-justify-content: center; }

	.form--styleA select{ width:100%;font-size: 100%; height:2.5em; padding-left:8px; border:1px #ab9178 solid; margin:5px auto; color: #737373; background-color:#FFF; }
	.form--styleA select optgroup{ color:#36995E; }
	.form--styleA select option{ color:#4B4B4B; }
	.form--styleA .select-open{ color: #999999; }

	.form--styleA .checkbox{ width:100%; margin:5px auto;}
	.form--styleA input[type="checkbox"]{ width:20px; height:20px; margin:5px; float:left; }
	.form--styleA label{ line-height:30px; font-size:12px; color: #CCC }
	.form--styleA label a{ text-decoration:none; font-size:12px; }
	.form--styleA .fileImg--styleA{ width:100%; height:80px; border:2px #ab875c solid; padding:10px; display:flex; justify-content:center; align-items:center; display: -webkit-flex; -webkit-justify-content: center;  -webkit-align-items: center; position:relative; text-decoration:none; clear:both; }
		.form--styleA .fileImg--styleA input{ width: 100%; height: 80px; position: absolute; top:0; left:0; opacity: 0; display:block; cursor: pointer; }
		.form--styleA .fileImg--styleA ul { list-style-type:none;  display:flex; align-items:center; display: -webkit-flex; -webkit-align-items: center; }
		.form--styleA .fileImg--styleA ul li{ float:left; margin-right:5px; color:#ab875c; text-decoration:none; }

	.form--styleB input[type="text"]{width:80%; height:2.5em; padding-left:8px; border:1px #b8c5a8 solid;  border-radius:10px; margin:5px auto;}

.formtextarea {width:90%; margin: 5px auto; }
	.formtextarea--styleA { width:100%; height:100px; padding:5px; color:#666;border-width:1px; border-style:solid; overflow:auto}


/* ================= 登入區塊 ================= */
.content .container {
	width:100%;
	max-width:1000px;
    padding: 40px 0 120px 0;
	border: 1px solid #f77a7a;
      text-align: left;
          margin-bottom: 40px;
}
.content {
    width: 100%;
/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+1,1c0101+50,000000+100&1+0,0.93+50,1+100 */
background: #FFF;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
}
/*==login Start==*/
.linkText{ display:flex; justify-content:center; display: -webkit-flex; -webkit-justify-content: center; }
.linkText a{ text-align:center; color: #F90; text-decoration: none;  }
.linkText ul{ display:inline; padding-inline-start: 0;}
.linkText ul li{ display:inline-block; float:left; width:80px; text-align:center; color:#666666; }
.list--styleB {     color: #ff0004;
    font-size: 1.3em;
    font-weight: 500;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    word-break: break-word;}

/*=== 驗證碼 ===*/
.box_VerifyCode { overflow:auto;display:flex; justify-content:center;}
	 .box_VerifyCode input[type="text"] {margin: 5px 20px 0 0 }
#imgVerifyCode { border-radius: 6px;}
.login_box .container {
	max-width:450px;
	padding-bottom:0.7em;
	border-radius: 20px;
	border: 2px solid #280000;
	/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+1,494242+35,000000+100 */
	background: #000000; /* Old browsers */
	background: -moz-linear-gradient(top, #000000 1%, #494242 35%, #000000 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #000000 1%,#494242 35%,#000000 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #000000 1%,#494242 35%,#000000 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
	box-shadow:0 0 14px 0 rgba(0,0,0,0.9);
	margin-bottom:60px;
	}

/*=== 按鈕 ===*/
.button--styleA{ background-color:#F90;box-shadow:#fa7a03 1px 1px 0 0;	border-radius: 24px; color:#000; font-weight:bold; text-decoration:none; width:50%; min-width:330px}
.login-button { background-color:rgba(0, 0, 0, 0.7);}
}

input[name="f_strVerifyCode"]{
  width: 100%!important;
}
.box.linkText {
  margin: 0 auto;
    padding: 0;
}
.box.linkText ul {
    max-width: 415px;
    width: 100%;
    gap: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
        margin: 0 auto;
    padding: 0;
}
.box.linkText ul li{
  width: 100%;
}
.box.linkText ul li a{
    background: #3e62c3;
    -webkit-box-shadow: 0px 2.3333332539px 2.33px #ffca61 inset;
    box-shadow: 0px 2.3333332539px 2.33px #ffca61 inset;
    box-shadow: 0px -4.666667px 2.33px #263aa3 inset;
    color: white;
    text-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
    font-size: 1.5em;
    display: inline-block;
    word-break: keep-all;
    height: 58px;
    margin: 6px 0;
    text-decoration: none;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    text-align: center;
    font-size: 25px;
    font-weight: bold;
    border-radius: 15px;
    letter-spacing: 2px;
    border: none;
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    cursor: pointer;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    min-width: 0 !important;
    width: 100% !important;
}
.box.linkText ul li:nth-child(2) a{
  background: #3fa0c4;
  box-shadow: 0px -4.666667px 2.33px #2670a3 inset;
}