/*-----content-----*/
/*--base--*/
.web {
  display: block;
}

.mobile {
  display: none;
}

.content {
  flex: 1 1 auto;
  background: #f4f4f4;
  /* background: linear-gradient(to bottom, #fff 0%, #d4f1e9 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#d4f1e9', GradientType=0); */
  /* z-index: 1; */
}

.content .pagesize {
  padding: 35px 25px;
  background-color: #fff;
}

.inpage {
  width: 100%;
  height: 100%;
  /* background: url(../image/bg_inpage.svg) no-repeat 100% 0; */
  background-size: cover;
}

.btn_main {
  width: 180px;
  margin: 0 auto;
}

.btn_main.d-flex {
  display: flex;
  justify-content: center;
  width: 100%;
}

.btn_main.d-flex a {
  min-width: 150px;
  padding: 0 20px;
}

.btn_main.d-flex a:first-child {
  background-color: #fff;
  border: 1px solid #6e27c5;
  color: #6e27c5;
}

.btn_main.d-flex a+a {
  margin-left: 20px;
}

.btn_main a {
  height: 45px;
  text-align: center;
  line-height: 45px;
  color: #fff;
  font-size: 18px;
  background: #6e27c5;
  border-radius: 5px;
}

.btn_main a.disable {
  background-color: #afafaf;
  cursor: initial;
}

.btn_main a:hover {
  opacity: 0.8;
}

.btn_main a.disable:hover {
  opacity: 1;
}

.flex_set {
  display: flex;
}

.txt_red {
  color: #dd0235;
}


/*--account--*/
.account {
  display: block;
  width: 100%;
  height: 100%;
  /* color: #fff; */
  /* background: url(../image/bg_account.jpg) no-repeat center center;
  background-size: cover; */
  display: flex;
  min-height: 600px;
}

.account .imgbx {
  width: calc(100% - 525px);
  height: 100%;
  position: relative;
}

.account .imgbx img {
  position: absolute;
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.account h2 {
  padding: 0 0 10px 0;
  color: #150f96;
  border-bottom: 1px solid #150f96;
  text-align: center;
  font-size: 30px;
}

.account h2::before {
  display: none;
  /* background: none;
  border: 1px solid #f08300; */
}

.account p {
  margin: 0 0 25px 0;
}

.account .main {
  background-color: #f4f4f4;
  position: relative;
  width: 525px;
  height: 100%;
  margin-left: auto;
  flex: 0 0 auto;
}

.account .main_box {
  position: absolute;
  right: 68px;
  top: 50%;
  transform: translateY(-50%);
  width: 30%;
  box-sizing: border-box;
  width: 360px;
}

.account .btn_code:hover::before {
  background-image: url(../image/icon_refresh_h.png);
}

.account .btn_code:hover {
  color: #fff;
  /* background: #238c6c;
  border: 1px solid #238c6c; */
}

.account .btn_main {
  width: 100%;
}

.account .btn_main a,
.btn_code {
  display: block;
  width: 100%;
  height: 40px;
  text-align: center;
  line-height: 40px;
  color: #238c6c;
  font-size: 18px;
  font-weight: bold;
  background: #d1e4db;
  box-sizing: border-box;
  border: 1px solid #fff;
  transition: 0.3s all ease-in-out;
}

.account .btn_main a {
  background-color: #7acb00;
  color: #000;
  border-radius: 5px;
}

.account .btn_main a:hover {
  opacity: .8;
}

a.btn_code {
  flex: 0 0 auto;
  width: auto;
  height: 35px;
  margin: 0 0 0 15px;
  line-height: 35px;
  color: #fff;
  font-size: 16px;
  background-color: #6e27c5;
  border-radius: 5px;
  padding: 0 10px;
  font-size: 1rem;
  transition: 0.3s all ease-in-out;
}

a.btn_code:hover {
  opacity: .8;
}

/* a.btn_code::before {
  display: inline-block;
  content: "";
  width: 20px;
  height: 20px;
  margin: 0 10px 0 0;
  vertical-align: text-top;
  background: url(../image/icon_refresh_n.png) no-repeat center center;
  background-size: 100% auto;
} */

.notice-fm {
  padding: 10px;
  border: 1px solid #e41913;
  color: #e41913;
  border-radius: 5px;
  /* font-weight: bold; */
}

.notice-fm.noradius {
  /* border-radius: 0; */
  padding: 15px;
}

.notice-fm h4 {
  font-size: 1.25rem;
  margin-bottom: 8px;
}

.notice-fm li {
  position: relative;
  padding-left: 16px;
}

.notice-fm li+li {
  margin-top: 5px;
}

.notice-fm li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  background-color: #e41913;
  border-radius: 50%;
}

.btn_main+.notice-fm {
  margin-top: 25px;
}

/*import*/
.import {
  margin: 0 0 40px 0;
}

.import .import_box {
  display: flex;
  align-items: flex-start;
  margin: 0 0 25px 0;
  position: relative;
}

/* .import .import_box:last-child {
  margin: 0;
} */

.import .tit {
  flex: 0 0 auto;
  width: 130px;
  margin: 5px 0 0 0;
}

.tit.verify {
  width: 110px;
  font-size: 18px;
  color: #333;
  font-weight: bold;
}

.import .tit.id,
.import .tit.birthday {
  width: 35px;
  position: absolute;
  height: 35px;
  background: #7acb00;
  top: 0;
  margin-top: 0;
  border-radius: 5px 0 0 5px;
}

.import .tit.id+.txt input,
.import .tit.birthday+.txt input {
  padding-left: 45px;
}

.import .tit::before {
  display: inline-block;
  content: "";
  width: 25px;
  height: 25px;
  /* margin: -5px 10px 0 0; */
  vertical-align: middle;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 100% auto;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.tit.id::before {
  background-image: url(../image/icon_user.png);
}

.tit.birthday::before {
  background-image: url(../image/icon_date.png);
}

.tit.phone::before {
  background-image: url(../image/icon_phone.png);
}

.tit.verify::before {
  /* background-image: url(../image/icon_verify.png); */
}

.verify_code .tit.verify::before {
  background-image: url(../image/icon_verify_gray.png);
}

.import .txt {
  flex: 1 1 auto;
}

.import p {
  margin: 8px 0 0 0;
  font-size: 1rem;
}

.import p.color-red {
  font-size: 0.875rem;
  font-weight: bold;
}

.account .import {
  margin-bottom: 50px;
}

.tit.verify+p {
  font-size: 1.125rem;
  margin-top: 5px;
}

.import_box.m-wrap+.import_box.m-wrap {
  margin-top: -10px;
}

.import .import_box:last-child {
  margin-bottom: 0;
}

/*--inpage--*/
/*status*/
.status {
  margin: 20px 0 0 0;
}

.status p,
.status ul li {
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: bold;
}

.status ul li {
  /* list-style: disc inside; */
  padding-left: 15px;
  position: relative;
}

.status ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  background-color: #7acb00;
  width: 5px;
  height: 5px;
  border-radius: 50%;
}

.status span {
  margin: 0 10px;
}

/*statement*/
.statement,
.verify_code {
  margin: 0 0 40px 0;
  padding: 0 0 40px 0;
  border-bottom: 1px solid #d2d2d2;
}

.statement p {
  margin: 0 0 12px 0;
}

.statement ul li {
  margin: 0 0 12px 0;
  padding: 0 0 0 30px;
  text-align: justify;
  word-break: break-all;
  line-height: 26px;
  text-indent: -32px;
}

.statement ul li:last-child {
  margin: 0;
}

.statement+.checkbox {
  margin: 0 0 40px 0;
}

/*verify_code*/
.verify_code>p {
  margin: 0 0 40px 0;
  text-align: center;
}

.verify_code .import {
  width: 500px;
  margin: 0 auto;
}

/*confirm*/
.confirm p {
  margin: 0 0 10px 0;
  text-align: center;
  color: #150f96;
  font-size: 20px;
  font-weight: bold;
  margin-top: 60px;
}

.confirm+p {
  margin-bottom: 30px;
  font-size: 1.125rem;
}

.confirm p::before {
  display: block;
  width: 170px;
  height: 170px;
  margin: 0 auto 30px auto;
  background: url(../image/icon_confirm.png) no-repeat center center;
  background-size: 100% auto;
  content: "";
}


/*download*/
.download p {
  margin: 0 0 10px 0;
  text-align: center;
  color: #150f96;
  font-size: 20px;
  font-weight: bold;
  margin-top: 60px;
}

.download+p {
  margin-bottom: 30px;
  font-size: 1.125rem;
}

.download p::before {
  display: block;
  width: 170px;
  height: 170px;
  margin: 0 auto 30px auto;
  background: url(../image/icon_download.png) no-repeat center center;
  background-size: 100% auto;
  content: "";
}

/*user_info*/
.user_info {
  position: relative;
  margin: 0 0 20px 0;
  padding: 0 0 0 0;
}

.user_info::before {
  position: absolute;
  left: 0;
  top: 0;
  display: block;
  content: "";
  width: 55px;
  height: 55px;
  background: url(../image/icon_user_info.png) no-repeat center center;
  background-size: 100% auto;
}

.user_info .box {
  padding: 0;
  /* border: 1px solid #3ab390; */
  border-radius: 5px;
}

.user_info h3,
.user_info ul,
.user_info ul li {
  display: inline-block;
  vertical-align: middle;
}

.user_info h3 {
  padding: 0 0 0 65px;
  color: #6e27c5;
  display: block;
  font-size: 1.25rem;
}

.user_info ul {
  padding: 0 0 0 65px;
}

.user_info ul li:first-child::after {
  display: inline-block;
  vertical-align: middle;
  width: 1px;
  height: 14px;
  margin: 0 15px;
  background: #555555;
  content: "";
}

/*safety*/
.safety table {
  width: 100%;
  margin: 0 0 40px 0;
  box-shadow: 0 3px 30px rgb(0 0 0 / 5%), 0 4px 10px rgb(0 0 0 / 5%);
}

.safety th,
.safety td {
  padding: 15px 10px;
  text-align: center;
  font-size: 1.125rem;
}

.safety td.tL {
  text-align: left;
}

.safety th {
  color: #fff;
  background: #4b4e53;
  /* border-right: 1px solid #fff; */
}

.safety th:last-child {
  border: none;
}

.safety td {
  background: #fff;
  border-bottom: 1px solid #dddddd;
  padding: 15px 10px;
}

.safety tr:last-child td {
  border-bottom: none;
}

/*btn_set*/
.btn_set>a {
  display: inline-block;
  /* width: 75px; */
  height: 35px;
  margin: 0 6px 0 0;
  text-align: center;
  line-height: 35px;
  vertical-align: middle;
  color: #fff;
  font-size: 1rem;
  border-radius: 4px;
  padding: 0 10px;
  min-width: 104px;
}

.btn_set>a:last-child {
  margin: 0;
}

.btn_set>a:hover {
  opacity: 0.8;
}

.btn_set .download {
  background: #238c6c;
  border: 1px solid #238c6c;
}

.btn_set .sign {
  background: #6e27c5;

}

.btn_set .sign.over {
  background-color: #afafaf;
}

.btn_set .sign.over:hover {
  opacity: 1;
  cursor: initial;
}

/*notice*/
.notice {
  color: #dd0235;
}

.notice li {
  margin: 0 0 10px 0;
  font-size: 14px;
}

.notice li:last-child {
  margin: 0;
}

/* basic 設定 */
.color-orange {
  color: #ff6600;
}

.color-pink {
  color: #ff0198;
}

.color-red {
  color: #e41913;
}

.color-gray {
  color: #afafaf;
}

.tC {
  text-align: center;
}

.tB {
  font-weight: bold;
}

.fs-m {
  font-size: 1.125rem;
}

.mg-lg {
  margin-bottom: 30px;
}


/* add set */
.dmIn-b {
  display: flex;
  justify-content: center;
  width: auto;
}

.dmIn-b .downloadIn {
  background-color: transparent;
  border: 1px solid #6e27c5;
  color: #6e27c5;
  white-space: nowrap;
  width: 150px;
}

.dmIn-b a {
  padding: 0 15px;
  white-space: nowrap;
}

.dmIn-b a+a {
  margin-left: 15px;
}

/*--for一般螢幕--*/
@media screen and (max-height:649px) {

  /*-----content-----*/
  /*--account--*/
  /* .account .main {
    background-size: auto 200%;
  }

  .account .main_box {
    width: 35%;
  } */
}

@media screen and (max-height:499px) {

  /*-----content-----*/
  /*--account--*/
  /* .account .main {
    background-size: auto 220%;
  }

  .account .main_box {
    width: 35%;
  } */
}



/*-----special for客戶的32:9與21:9螢幕-----*/
@media screen and (max-width:5121px) {

  /*-----content-----*/
  /*--account--*/
  /* .account .main {
    background-size: auto 170%;
  }

  .account .main_box {
    width: 30%;
  } */
}

@media screen and (max-width:3441px) {

  /*-----content-----*/
  /*--account--*/
  /* .account .main {
    background-size: auto 120%;
  }

  .account .main_box {
    width: 30%;
  } */
}

/* @media screen and (max-width:1010px) {
  .account .imgbx {
    display: none;
  }

  .account .main {
    width: 100%;
  }
} */