.checkout {
  background: #f6f6f6;
}



.header {
  padding: 20px 0;
  border-bottom: 1px solid #e2e2e2;
  background: #fff;
  height: fit-content;
}

.icon-visa {
  display: inline-block;
  background: url('../../img/sprite2.png') no-repeat -18px -116px;
  width: 43px;
  height: 30px;
}

.success-icon {
  display: inline-block;
  background: url('../../img/sprite2.png') no-repeat -256px -168px;
  width: 14px;
  height: 14px;
}

.language-icon {
  display: inline-block;
  background: url('../../img/sprite2.png') no-repeat -215px -169px;
  width: 15px;
  height: 14px;
}

.google-icon {
  display: inline-block;
  background: url('../../img/sprite2.png') no-repeat -161px -291px;
  width: 51px;
  height: 20px;
  vertical-align: middle;
}

.more-img {
  display: inline-block;
  background: url('../../img/sprite2.png') no-repeat -446px -63px;
  width: 37px;
  height: 37px;

}

.product-close {
  display: inline-block;
  background: url('../../img/sprite2.png') no-repeat -333px -164px;
  width: 21px;
  height: 21px;
}

.coupon-icon {
  display: inline-block;
  background: url('../../img/sprite2.png') no-repeat -174px -168px;
  width: 16px;
  height: 16px;

}

.coupon-close {
  display: inline-block;
  background: url('../../img/sprite2.png') no-repeat -237px -168px;
  width: 14px;
  height: 15px;
}

.success-img {
  display: inline-block;
  background: url('../../img/sprite2.png') no-repeat -376px -113px;
  width: 38px;
  height: 33px;
}

.icon-user {
  display: inline-block;
  background: url('../../img/sprite2.png') no-repeat -302px -163px;
  width: 23px;
  height: 23px;
}

.error-icon {
  display: inline-block;
  background: url('../../img/sprite2.png') no-repeat -197px -172px;
  width: 11px;
  height: 11px;
}

.card-types {
  background: url('../../img/sprite2.png') no-repeat -18px -116px;
  width: 347px;
  height: 30px;
}


.ssl {
  display: inline-block;
  background: url('../../img/sprite2.png') no-repeat -16px -324px;
  width: 62px;
  height: 32px;
}

.securetrust {
  display: inline-block;
  background: url('../../img/sprite2.png') no-repeat -89px -324px;
  width: 55px;
  height: 32px;
}

.norton {
  display: inline-block;
  background: url('../../img/sprite2.png') no-repeat -156px -324px;
  width: 61px;
  height: 32px;
}

.mcafee {
  display: inline-block;
  background: url('../../img/sprite2.png') no-repeat -228px -324px;
  width: 62px;
  height: 32px;
}

.arrow {
  display: inline-block;
  background: url('../../img/sprite2.png') no-repeat -129px -173px;
  width: 10px;
  height: 7px;

}

.icon-paypal {
  display: inline-block;
  background: url('../../img/sprite2.png') no-repeat -18px -289px;
  width: 79px;
  height: 22px;
}

.full-loading {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(255, 255, 255, 0.514);
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-black {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: loading 2s linear infinite;
}

.header .logo {
  /* display: none; */
  height: 42px;
  opacity: 0;
  width: 180px;
  min-height: 20px;
}

.header .header-img {
  height: 32px;
}

.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.header .header-content {
  display: flex;
  align-items: center;
  gap: 15px;
}

.header .language {
  position: relative;
  font-size: 14px;
}

.header .language-text {
  display: flex;
  align-items: center;
  border-radius: 4px;
  border: 1px solid #e7e7e7;
  background: #f5f5f5;
  padding: 7px 7px;
  cursor: pointer;
}

.header .language-select-box {
  border-radius: 3px;
  border: 1px solid #d9d9d9;
  position: absolute;
  z-index: 99;
  height: 147px;
  background: #fff;
  min-width: 100%;
  display: none;
}

.header .arrow {
  margin-left: 13px;
}

.header .language-icon {
  margin-right: 8px;
}

.currency-text {
  min-width: 180px;
}

.header .language-select-box {
  width: max-content;
  padding: 7px;
  height: 145px;
  overflow-y: scroll;
  min-width: 113px;
}

.header .language-select-box li {
  padding: 6px;
  cursor: pointer;
}

.header .language-select-box li:hover {
  border-radius: 4px;
  background: #f6f6f6;
}

.service-tips {
  position: relative;
  cursor: pointer;
  display: inline-block;
}

.tips-pop {
  position: absolute;
  padding: 8px 15px;
  width: 220px;
  top: 50%;
  transform: translateY(-50%);
  left: 30px;
  color: #333;
  font-size: 12px;
  font-weight: 300;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
  border-radius: 6px;
  background: #fff;
  line-height: 1.5;
  box-shadow: 0px 6px 19.9px 0px rgba(120, 120, 120, 0.18);
}

.tips-pop::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: -10px;
  content: "";
  width: 0;
  height: 0;
  border-right: 15px solid #ffffff;
  border-top: 10px solid transparent;
  border-bottom: 10px solid transparent;
}

.service-tips:hover .tips-pop {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease, visibility 0s 0s;
}

.page {
  background: #fff;
  padding: 25px 28px;
}

.content {
  width: max-content;
  margin: 0 auto;
}

.main {
  margin: 30px auto 0 auto;
  width: max-content;
  max-width: 1300px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 12px;
}

.bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}

.product-close {
  cursor: pointer;
  /* margin-top: 13px; */
  width: 20px;
}

.page-title {
  color: #212121;
  font-size: 24px;
  font-weight: 500;
}

@keyframes loading {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(360deg);
  }
}

.coupon-icon {
  cursor: pointer;
}

.arrow {
  transition: all 0.2s;
}

.arrow.active {
  transform: rotate(180deg);
}

.search-select {
  position: relative;
  width: max-content;
  font-size: 14px;
}

.search-select .search-text {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 3px;
  border: 1px solid #d9d9d9;
  padding: 5px 11px 5px 6px;
  width: max-content;
  min-width: 180px;
}

.search-select .search-box {
  display: flex;
  align-items: center;
  border-radius: 3px;
  border: 1px solid #d9d9d9;
  background: #fff;
  padding: 7px 5px;
}

.search-select .search-ul {
  display: none;
  position: absolute;
  border-radius: 3px;
  border: 1px solid #d9d9d9;
  padding: 7px;
  background: #fff;
  font-weight: 300;
  width: max-content;
  z-index: 99;
}

.search-select .search-value {
  font-weight: 300;
}

.search-select ul {
  margin-top: 6px;
  max-height: 200px;
  overflow: scroll;
}

.search-select li {
  cursor: pointer;
  padding: 5px;
}

.search-select li:hover {
  border-radius: 4px;
  background: #f6f6f6;
}

.search-select input {
  width: 80%;
  margin-left: 8px;
}

.order-title {
  display: flex;
  justify-content: space-between;
}

.page {
  width: 610px;
}

.table-box {
  margin-top: 16px;
}

.table-box .table-header {
  display: flex;
  justify-content: space-between;
  border-radius: 3px;
  background: #f1f1f1;
  padding: 6px 46px 9px 16px;
  font-weight: 300;
}

.table-box .product-name {
  width: 285px;
  line-height: 1.5;
}

.table-box .num {
  width: 10%;
  text-align: center;
}

.table-box .product-tr .num {
  text-align: center;
  width: 10%;
}

.table-box .price-td {
  width: 100px;
}

.table-box .product-tr {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.table-box .price-td {
  text-align: center;
}

.table-box .table-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 333px;
  overflow-y: scroll;
  margin-top: 16px;
}

.table-box .service {
  border-radius: 3px;
  background: #f6f6f6;
  margin-top: 16px;
  padding: 13px;
  display: flex;
  justify-content: space-between;
}

.table-box .service-name img {
  width: 13px;
}

.table-box .product-item {
  width: 490px;
}

.table-box .table-body_tr {
  display: flex;
  align-items: start;
  justify-content: space-between;
  border-radius: 3px;
  border: 1px solid #dfdfdf;
  padding: 17px;
}

.table-box .text {
  width: 179px;
  color: #212121;
}

.table-box .service-tr {
  display: flex;
  align-items: center;
  font-weight: 300;
  gap: 12px;
}

input[type="checkbox"] {
  appearance: none;
  width: 17px;
  height: 17px;
  border: 1px solid #ddd;
  border-radius: 2px;
  background: #fff;
  cursor: pointer;
  position: relative;
}

input[type="checkbox"]:checked {
  background: #fff;
}

input[type="checkbox"]:checked:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 4px;
  top: 0;
  width: 10px;
  height: 7px;
  background: url(../../img/right.png) no-repeat center;
  background-size: contain;
}

.cvc .payment-info_input {
  position: relative;
}

/* .cvc  */
.error-icon {
  position: absolute;
  width: 14px;
  top: 0;
  bottom: 0;
  margin: auto;
  right: 10px;
  cursor: pointer;
}

.cvc .error-icon:hover~.cvc-pop {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease, visibility 0s 0s;
}

.cvc .cvc-pop {
  position: absolute;
  z-index: 99;
  right: -10px;
  max-width: 260px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0px 3.078px 12.4px 0px rgba(120, 120, 120, 0.18);
  padding: 12px;
  text-align: center;
  width: max-content;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
}

.cvc .cvc-pop::after {
  position: absolute;
  top: -6px;
  right: 17px;
  content: "";
  width: 0;
  height: 0;
  border-bottom: 15px solid #ffffff;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.cvc .cvc-pop .cvc-pop_title {
  font-size: 8px;
  font-weight: 500;
  color: #333;
}

.cvc .cvc-pop .cvc-box {
  display: flex;
  justify-content: center;
  gap: 13px;
  font-size: 7px;
  margin-top: 10px;
}

.cvc .cvc-pop .cvc-item {
  width: 112px;
}

.cvc .cvc-pop .cvc-text {
  padding: 0 20px;
  line-height: 1.5;
  margin-top: 7px;
}

.cvc .cvc-pop img {
  width: 112px;
  height: auto;
}

.cvc .cvc-pop .cvc-tips {
  color: #8d8d8d;
  font-size: 6px;
  font-weight: 300;
  margin-top: 11px;
  line-height: 1.5;
}

.old-price {
  color: #666;
  font-size: 12px;
  text-decoration: line-through;
  font-weight: 300;
  margin-top: 5px;
}

.order-box {
  margin-top: 34px;
}

.order-box .order-box_title {
  font-weight: 300;
  color: #1685fe;
}

.order-box .order-box_item {
  display: flex;
  justify-content: space-between;
  border-radius: 3px;
  border: 1px solid rgba(29, 136, 255, 0.3);
  background: rgba(29, 136, 255, 0.05);
  padding: 15px 18px;
  margin-top: 12px;
  line-height: 1.5;
}

.order-box .item-right {
  display: flex;
  align-items: center;
  gap: 20px;
}

.order-box .add {
  cursor: pointer;
  width: 20px;
}

.order-box .product-name {
  width: 180px;
}

.coupon {
  margin: 15px 0;
}

.coupon .coupon-one {
  display: flex;
  align-items: center;
  gap: 10px;
}

.coupon .coupon-text {
  color: #1685fe;
  cursor: pointer;
  font-weight: 300;
}

.coupon-con {
  display: none;
}

.coupon-con-box {

  border-radius: 4px;
  border: 1px solid #dbdbdb;
  background: #fff;
  width: 170px;
  font-size: 12px;
  padding: 4px 8px;
}

.coupon .coupon-con input {
  width: 89%;
  background: transparent;
}

.coupon .coupon-btn {
  display: none;
  color: #44ca4d;
  font-size: 12px;
  border-radius: 4px;
  background: rgba(68, 202, 77, 0.1);
  padding: 4px 10px;
  font-weight: 300;
  cursor: pointer;
}

.coupon .success-text {
  display: none;
  color: #44ca4d;
  font-size: 12px;
  font-weight: 300;
}

.coupon .coupon-tips {
  display: none;
  color: #e02020;
  font-size: 12px;
  font-weight: 300;
  margin-top: 7px;
  padding-left: 25px;
}

.coupon .coupon-close {
  display: none;
  border-radius: 3px;
  cursor: pointer;
}

.coupon .success-icon {
  display: none;
}

.total,
.coupon-discount,
.tax {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-weight: 300;
  margin-top: 10px;
}

.coupon-price,
.tax-price {
  color: #808080;
}

.tax-tag {
  color: #006dff;
  border-radius: 3px;
  background: rgba(3, 111, 254, 0.1);
  padding: 3px 4px;
}

.payment {
  display: flex;
  justify-content: space-between;
  border-top: 1px solid #d9d9d9;
  padding-top: 20px;
  font-size: 18px;
  margin-top: 15px;
}

.payment-pirce {
  color: #ff4c4c;
}

.agreement {
  font-weight: 300;
  margin: 30px 0;
}

.agreement a {
  margin-right: 30px;
  color: #848484;
  text-decoration: underline;
}

.email-tips {
  color: #212121;
  font-size: 16px;
  font-weight: 300;
  line-height: 150%;
}

.email-box {
  position: relative;
  width: 280px;
  margin-top: 20px;
}

.email-box input {
  font-size: 16px;
  width: 100%;
  border-radius: 4px;
  border: 1px solid #dbdbdb;
  background: #fff;
  padding: 10px 12px;
}

.email-box ul {
  display: none;
  position: absolute;
  width: 100%;
  height: 138px;
  overflow-y: scroll;
  border-radius: 3px;
  border: 1px solid #d9d9d9;
  background: #fff;
  padding: 6px;
  z-index: 99;
  /* opacity: 0;
  visibility: hidden;
  transition: all .2s;
  max-height: 0; */
}

.email-ul.active {
  opacity: 1;
  visibility: visible;
  max-height: 138px;
}

.email-box li {
  padding: 4px 6px;
  font-weight: 300;
  cursor: pointer;
}

.email-box li:hover {
  border-radius: 4px;
  background: #f6f6f6;
}

.email-box .error {
  border: 1px solid #e02020;
  background: #fbeeee;
}

.payment-method {
  margin-top: 22px;
}

.payment-method_title {
  font-size: 16px;
  margin-top: 46px;
}

.payment-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 15px;
}

.payment-method_item {
  display: flex;
  align-items: center;
  gap: 12px;

}

.item-radio {
  position: relative;
  width: 12px;
  height: 12px;
  border: 1px solid #ddd;
  border-radius: 50%;
  cursor: pointer;
}

.item-type {
  position: relative;
  transition: all 0.2s;
  cursor: pointer;
}

.item-type img {
  height: 36px;
  width: auto;
}

.type-icon .tips-pop {
  /* top: 0;
  visibility: visible;
  opacity: 1; */
  transition: opacity 0.3s ease, visibility 0s 0s;
  left: 50%;
  transform: translate(-50%, calc(-100% - 40px));
  width: 280px;
  z-index: 99;
  text-align: center;
}

.type-icon .tips-pop::after {
  border-left: 10px solid transparent;
  border-top: 15px solid #fff;
  border-bottom: unset;
  border-right: 10px solid transparent;
  left: 50%;
  transform: translate(-50%, -50%);
  top: unset;
  bottom: -20px;

}

.applepay .item-type.disable:hover .tips-pop {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.3s ease, visibility 0s 0s;
}

/* .type-icon:nth-of-type(2) {
  display: none;
} */

.type-icon {
  /* overflow: hidden; */
  position: relative;
}

.applepay .type-icon {
  background: url(../../img/sprite2.png) -263px -63px;
  width: 77px;
  height: 37px;
}

.applepay.selected .type-icon {
  background: url(../../img/sprite2.png)-263px -11px;
  height: 36px;
}
 .stripecard .type-icon  {
  background: url(../../img/sprite2.png)  -497px -63px;
	width: 77px;
	height: 37px;
 }
.cardpay .type-icon {
  background: url(../../img/sprite2.png) -18px -63px;
  width: 108px;
  height: 37px;
}

.stripecard.selected .type-icon {
    background: url(../../img/sprite2.png) -446px -11px;
	width: 76px;
	height: 36px;
}
.cardpay.selected .type-icon{
  background: url(../../img/sprite2.png) -18px -11px;
  height: 36px;
}

.googlepay .type-icon {
  background: url(../../img/sprite2.png) -354px -63px;
  width: 77px;
  height: 37px;
}

.googlepay.selected .type-icon {
  background: url(../../img/sprite2.png) -354px -11px;
  width: 77px;
  height: 36px;
}

.paypal .type-icon {
  background: url(../../img/sprite2.png) -140px -63px;
  width: 108px;
  height: 37px;
}

.paypal.selected .type-icon {
  background: url(../../img/sprite2.png) -140px -11px;
  width: 108px;
  height: 36px;
}

.tips-content a {
  text-decoration: underline;
}

.selected .item-radio::after {
  content: "";
  position: absolute;
  width: 8px;
  height: 8px;
  background: #11a5ff;
  border-radius: 50%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  margin: auto;
}

.card-types {
  margin-top: 15px;
  max-height: 30px;
  max-width: 100%;
}
.stripecard-box {
  display: none;
}
.billing-info,
.payment-info {
  margin-top: 16px;
  display: flex;
  align-items: start;
  gap: 15px;
}

.billing-input {
  border-radius: 4px;
  border: 1px solid #dbdbdb;
  background: #fff;
  padding: 9px;
  width: 130px;
}

.payment-info_input {
  padding: 0 9px;
}

.search-select .country-text,
.search-select .state-text {
  padding: 9px;
  font-size: 12px;
}

.payment-info_input {
  border-radius: 4px;
  border: 1px solid #dbdbdb;
  height: 36px;
  /* padding: 9px; */
  font-size: 12px;
  width: 100%;
}

.qyt_title,
.result-table_td:nth-of-type(2) {
  width: 130px;
  text-align: center;
}

.price_title,
.result-table_td:nth-of-type(3),
.until_title,
.result-table_td:nth-of-type(4) {
  width: 115px;
  text-align: center;
}

.card-number {
  width: 336px;
}

.expiry,
.cvc {
  width: 113px;
}
.stripecard-box {
  margin-top: 20px;
}
.submit,.stripecard-btn,.stripecard-submit {
  font-size: 18px;
  color: #fff;
  border-radius: 4px;
  background: #006dff;
  padding: 11px 30px;
  width: max-content;
  text-align: center;
  margin-top: 56px;
  letter-spacing: -0.63px;
  cursor: pointer;
  transition: all 0.2s;
}
.safari{
  margin: 0 auto;
}
.button-text {
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  font-family: 'Montserrat', Sans-serif;
}
.submit:hover,.stripecard-btn:hover,.stripecard-submit:hover {
  background: #0048cd;
}

.agreement-box {
  color: #616161;
  font-size: 12px;
  font-weight: 300;
  line-height: 160%;
  letter-spacing: -0.42px;
  display: flex;
  align-items: start;
  gap: 8px;
  margin-top: 15px;
}

.agreement-box input {
  flex-shrink: 0;
  margin-top: 4px;
}

.agreement {
  text-decoration: underline;
  cursor: pointer;
}

.copyright {
  text-align: right;
  color: #848484;
  font-size: 14px;
  font-weight: 300;
  letter-spacing: -0.49px;
  margin: 30px 0;
}

.product-box,
.pay-box {
  display: flex;
  flex-direction: column;
}

.product-box .page,
.pay-box .page {
  flex: 1;
}

.paypal-btn {
  display: none;
  background: #ffc439;
  padding: 16px 60px;
  width: max-content;
  cursor: pointer;
  border-radius: 3px;
  margin-top: 46px;
  transition: all 0.2s;
}

.paypal-btn img {
  height: 20px;
}

.paypal-btn:hover {
  background: #ffa920;
}

.applepay-btn,
.googlepay-btn {
  display: none;
  cursor: pointer;
  margin-top: 46px;
  border-radius: 4px;
  border: 1px solid #333;
  background: #fff;
  width: 200px;
  text-align: center;
  font-size: 18px;
  padding: 13px 0;
  transition: all 0.2s;
}

.type-loading {
  display: inline-block;
  width: 23px;
  height: 23px;
  background: url(../../img/loading.png) no-repeat center;
  background-size: cover;
}

.payinsider {
  display: none
}

.applepay-btn img {
  margin-left: 5px;
}

.applepay-btn:hover {
  color: #fff;
  background: #333;
}

.googlepay-btn {
  display: none;
  margin-top: 46px;
  width: 250px;
}

#googlePayButton {
  display: none;
  margin-top: 46px;
  width: 250px;
}

#applePayButton {
  display: none;
  margin-top: 46px;
  width: 250px;
}

.applepay-btn img {
  height: 20px;
}

.applepay-btn:hover img {
  content: url(../../img/apple-icon-white.png);
}

.more-img {
  cursor: pointer;
  width: 35px;
}

.more {
  position: relative;
  width: 35px;
}

.page2 {
  width: 660px;
}

.applepay-btn {
  position: relative;
}

/* #applePayButton {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 2;
  top: 0;
  left: 0;
} */

.more-con {
  display: none;
  position: absolute;
  right: 0;
  margin-top: 15px;
  align-items: center;
  padding: 13px;
  border-radius: 6px;
  background: #fff;
  box-shadow: 0px 6px 19.9px 0px rgba(120, 120, 120, 0.18);
}

.more-con_box {
  display: flex;
  gap: 10px;
}

.more-con_box span {
  cursor: pointer;
  border: 1px solid transparent;
}

.more-con_box span:hover {
  display: block;
  border: 1px solid #11a5ff;
  border-radius: 5px;
  background-color: rgba(17, 165, 255, 0.1);
}

.more-con::before {
  position: absolute;
  top: -10px;
  right: 10px;
  content: "";
  width: 0;
  height: 0;
  border-bottom: 15px solid #ffffff;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
}

.mask {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.21);
  z-index: 99;
}

.mask .pop {
  position: absolute;
  width: 728px;
  background: #fff;
  border-radius: 11px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 30px;
}

.mask .mask-close {
  position: absolute;
  top: 12px;
  right: 12px;
  cursor: pointer;
  background: url('../..//img/sprite2.png') no-repeat -276px -166px;
  width: 19px;
  height: 19px;
}

.mask .title {
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}

.mask .pop-content {
  height: 500px;
  overflow-y: scroll;
  margin-top: 20px;
  line-height: 1.5;
}

.mask p {
  margin-bottom: 10px;
  font-weight: 300;
}

.mask .min-title {
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 10px;
}

.mask .text {
  margin-bottom: 7px;
}

.result-box {
  display: none;
  width: 1000px;
  background: #fff;
  padding: 73px 53px;
  height: 767px;
}

.result-title {
  text-align: center;
  font-size: 24px;
}

.result-title img {
  margin-right: 5px;
}

.result-text {
  font-size: 16px;
  color: #333;
  text-align: center;
  margin-top: 10px;
  font-weight: 300;
}

.result-info {
  margin-top: 50px;
  display: flex;
  justify-content: space-between;
}

.result-table {
  border: 1px solid #dfdfdf;
  border-top: unset;
  line-height: 1.5;
  min-width: 100%;
}

.result-table_header {
  display: flex;
  justify-content: space-between;
  padding: 10px 40px 10px 20px;
  border-radius: 3px;
  border-bottom: 1px solid #dfdfdf;
}

.result-table_title {
  font-weight: 400;
}

.result-table_body {
  padding: 13px 17px;
}

.result-table_tr {
  display: flex;
  justify-content: space-between;
  padding: 7px 20px 7px 0;
}

.result-table_td {
  font-weight: 300;
}

.result-table_title:first-child,
.result-table_td:first-child {
  width: 30%;
}

.user-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 3px 3px 0px 0px;
  border: 1px solid #dfdfdf;
  background: #fbfbfb;
  padding: 10px 17px;
  margin-top: 13px;
}

.email {
  display: flex;
  gap: 10px;
}

.email-number {
  font-weight: 300;
}

.login-btn {
  display: none;
  border-radius: 3px;
  background: #212121;
  color: #fff;
  padding: 8px 35px;
  cursor: pointer;
  transition: all 0.2s;
}

.login-btn:hover {
  background: #006dff;
}

.back-btn {
  width: 141px;
  height: 45px;
  border-radius: 4px;
  border: 1px solid #4298f8;
  color: #4298f8;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 32px auto;
  cursor: pointer;
  font-size: 18px;
  transition: all 0.2s;
}

.back-btn:hover {
  border: 1px solid #4298f8;
  background: #4298f8;
  color: #fff;
}

.error-result {
  text-align: center;
}

.error-img {
  margin: 90px auto 0;
}

.error-text {
  margin-top: -80px;
  font-size: 20px;
  padding: 0 100px;
  font-weight: 300;
  line-height: 1.6;
}

.store-btn {
  display: block;
  width: 326px;
  line-height: 54px;
  border-radius: 4px;
  background: #006dff;
  font-size: 18px;
  color: #fff;
  margin: 45px auto 30px auto;
  transition: all 0.2s;
}

.store-btn:hover {
  background: #0048cd;
}

.jump-tips {
  color: #3c4854;
  font-size: 16px;
  font-weight: 300;
}

.toast {
  position: fixed;
  display: none;
  align-items: start;
  font-weight: 300;
  line-height: 1.5;
  gap: 10px;
  top: 100px;
  padding: 12px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 600px;
  border-radius: 4px;
  border: 1px solid #e02020;
  background: #fbeeee;
}

.error-tips {
  display: none;
  color: #e02020;
  font-size: 12px;
  font-weight: 300;
  line-height: 150%;
  margin-top: 6px;
}

.error,
.state-text.error {
  border-radius: 4px;
  border: 1px solid #e02020;
  background: #fbeeee;
}

.loading {
  display: none;
  width: 15px;
  animation: loading 2s linear infinite;
  margin-left: 13px;
}

.item-type .type-loading {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  display: none;
  width: 15px;
  height: 15px;
  animation: loading 2s linear infinite;
  z-index: 91;
}

.item-type.disable::after {
  position: absolute;
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  background: #dddddd54;
}

.loading-cover::after {
  cursor: not-allowed;
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  z-index: 90;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.type-disable-cover::before {
  border: 0.722px solid #949494;
  cursor: not-allowed;
  content: "";
  position: absolute;
  width: 97%;
  height: 97%;
  background: #cccccc4a;
  backdrop-filter: blur(0.5px);
  border-radius: 4px;
  z-index: 90;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  pointer-events: none;
  cursor: not-allowed;
}

.type-loading-cover::after {
  border: 0.722px solid #11a5ff;
  cursor: not-allowed;
  content: "";
  position: absolute;
  width: 97%;
  height: 97%;
  background: rgba(205, 236, 254, 0.81);
  backdrop-filter: blur(0.5px);
  border-radius: 4px;
  z-index: 90;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
}

.gpay-card-info-container {
  height: 50px;
}

/* .search-select, */
.lastname-input,
.firstname-input {
  flex: 1;
}



.billing-input {
  width: 100%;
}

#cvc {

  margin-top: 0;
  border: unset;
  padding-left: 8px;
}

.cvc .payment-info_input {
  padding: 0 !important;
}

.cvc {
  /* margin-top: 8px; */
}

.coupon-btn {
  position: relative;
  overflow: hidden;
}

.coupon-btn.coupon-loading::before {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 100%;
  background: rgba(68, 202, 77, 0.1);
  z-index: 1;
}

.coupon-btn.coupon-loading::after {
  position: absolute;
  content: '';
  width: 16px;
  height: 16px;
  background: url(../../img/loading3.png) no-repeat center;
  background-size: cover;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  animation: loading 2s linear infinite;
  z-index: 2;
}

.currency-name {
  display: none;
}

.product-close {
  position: absolute;
  right: 20px;
}

.table-body_tr {
  position: relative;
}

.red {
  color: #FF4C4C;
}

.coupon-mask {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.21);
  z-index: 99;
}

.coupon-mask .coupon-mask-close {
  position: absolute;
  bottom: -40px;
  left: 50%;
  transform: translate(-50%, 0);
  cursor: pointer;
  background: url('../..//img/close-mark.png') no-repeat;
  width: 39px;
  height: 39px;

}

.coupon-mask .pop {
  position: absolute;
  width: 416px;
  border-radius: 11px;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 430px;
  text-align: center;
}

.coupon-mask .coupon-mask_bg {
  position: absolute;
  width: 613px;
  height: auto;
  top: 24%;
  left: 44%;
  transform: translate(-50%, -50%);
  z-index: -1;
}

.coupon-mask .title {
  color: #ef6129;
  font-size: 26px;
  font-weight: 700;
}

.coupon-mask .text {
  color: #ef6129;
  font-size: 18px;
  margin-top: 8px;
}

.coupon-mask .pop-bottom {
  height: 160px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.coupon-mask .discount {
  position: relative;
  background: linear-gradient(180deg, #ff7036 0%, #f32121 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-size: 80px;
  font-weight: 900;
  margin: 10px auto 26px;
  width: 330px;
  height: 112px;
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1;
  padding: 5px 0;
}

.coupon-mask .use-btn {
  border-radius: 200px;
  border: 0.5px solid #fffed6;
  background: radial-gradient(46.43% 45.33% at 41.69% 50%, #ff4001 0%, rgba(255, 64, 1, 0) 100%), radial-gradient(118.43% 40.42% at 7.72% 28.75%, #fffda6 0%, rgba(255, 255, 255, 0) 100%), radial-gradient(69.19% 37.39% at 107.79% 0%, #ff7500 0%, rgba(255, 66, 0, 0) 100%), radial-gradient(89.75% 54.52% at 83.46% 89.75%, #fff926 0%, rgba(255, 69, 0, 0.6) 100%), #ff4001;
  box-shadow: 0px 9.36px 7.8px -6.24px #fff14e, 0px 9.36px 6.24px -3.12px rgba(255, 73, 0, 0.3), 0px 0px 6.24px 0px #fea000 inset, 0px 0px 9.36px 0px #fffd54 inset;
  color: #fff;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1), 0 2px 2px rgba(0, 0, 0, 0.1);
  font-size: 42px;
  width: max-content;
  padding: 12px 0;
  width: 340px;
  cursor: pointer;
  margin: 0 auto;
  transition: all 0.2s;
  text-shadow: 0px -4px 3px rgba(149, 2, 2, 0.5);

}

.coupon-mask .use-btn:hover {
  transform: scale(1.05);
}

.safari-mask {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.21);
  z-index: 99;
}

.safari-mask .pop {
  position: absolute;
  width: 540px;
  border-radius: 11px;
  top: 53%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  background: #fff;
  padding: 40px;
}

.safari-mask .title {
  color: #222;
  font-size: 16px;
  font-weight: 600;
  margin: 10px;
}

.safari-mask .text {
  color: #707070;
  font-size: 14px;
  font-weight: 300;
  line-height: 180%;
  word-break: break-word;
  overflow-wrap: break-word;
  word-wrap: break-word;
}

.safari-mask .copy-btn {
  border-radius: 5px;
  background: #408CFF;
  color: #FFF;
  width: 336px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  cursor: pointer;
  margin: 30px auto 0;
  transition: all .2s;
}

.safari-mask .copy-btn:hover {
  transform: scale(1.05);
}

.safari-mask .copy-tips {
  display: none;
  color: #707070;
  font-size: 12px;
  font-weight: 300;
  line-height: 180%;
  margin-top: 10px;
}

.safari-mask .success-icon {
  vertical-align: middle;
}

.safari-mask .safari-mask-close {
  position: absolute;
  top: 12px;
  right: 12px;
  cursor: pointer;
  background: url('../..//img/sprite2.png') no-repeat -276px -166px;
  width: 19px;
  height: 19px;
}
.bottom .agreement {
  text-decoration: unset;

}
.bottom .agreement a {
    text-decoration: underline;
}
@media (max-width: 1300px) {
  .main {
    max-width: 100%;
  }

  .product-box,
  .pay-box {
    width: 48%;
  }

  .content {
    width: 100%;
  }

  .container {
    width: 100%;
    padding: 0 20px;
  }

  .page2,
  .page {
    width: 100%;
  }

  .bottom {
    padding: 0 20px;
  }
}

@media (max-width: 1024px) {

  .content,
  .product-box,
  .pay-box {
    width: 100%;
  }

  .product-box,
  .pay-box {
    margin: 0 30px;
  }

  .main {
    max-width: 100%;
  }

  .page {
    width: 100%;
    padding: 20px 11px;
    background: #fbfbfb;
  }

  .product-tr {
    position: relative;
    padding-right: 30px;
  }

  .table-box .product-item {
    width: 100%;
  }

  .table-box .table-header {
    padding: 6px 54px 9px 16px;
  }



  .bottom {
    margin: 0 30px;
    padding: 0;
  }
}

@media (max-width: 1024px) {
  .product-box {
    width: 100%;
  }

  .product-box,
  .pay-box {
    margin: unset;
  }

  .page {
    max-width: 100%;
    overflow: hidden;
  }


  .header {
    padding: 15px 0;
  }

  .header .logo {
    width: 118px;
  }

  .header .header-img {
    display: none;
  }

  .main {
    width: 100%;
    flex-direction: column;
    justify-content: center;
    padding: 0 30px;
  }



}

@media (max-width: 820px) {

  .safari-mask .pop {
    width: 90%;
  }

  .safari-mask .copy-btn {
    width: 250px;
  }

  .coupon-mask .pop {
    top: 51%;
    height: 277px;
  }

  .coupon-mask .coupon-mask_bg {
    top: 22%;
    left: 46%;
  }

  .coupon-mask .title {
    font-size: 19px;
  }

  .coupon-mask .text {
    font-size: 16px;
  }

  .coupon-mask .discount {
    font-size: 50px;
    margin: 10px auto 5px;
    max-width: 280px;
    height: 70px;
  }

  .coupon-mask .pop-bottom {
    height: 108px;
  }

  .coupon-mask .coupon-mask-close {

    width: 28px;
    height: 28px;
    background-size: cover;
  }

  .search-select .search-text {
    width: 160px;
    min-width: unset;
  }

  .coupon-mask .use-btn {
    font-size: 25px;
    padding: 9px 0;
    width: 250px;
  }

  .order-title .currency-select {
    width: 180px;
  }

  .googlepay-btn {
    width: 100%;
  }

  .cvc .cvc-pop {
    right: 0;
  }

  .cvc .cvc-pop::after {
    right: 9px;
    /* left: 50%;
    transform: translateX(-50%); */
  }

  .toast {
    width: 80%;
  }

  body {
    background: #fbfbfb;
  }

  .main {
    padding: 0;
    margin: 0;
  }


  .page-title {
    font-size: 20px;
  }

  /* .table-box .text, */
  .table-box .product-name {
    width: 42%;
  }

  .table-box .text {
    width: 100%;
  }

  .table-box .service-tr {
    flex-wrap: wrap;
  }

  .table-box .service-name {
    width: 132px;
    line-height: 1.5;
  }

  .table-box .product-item {
    width: 100%;
  }

  .table-box .product-close {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    height: 20px;

    margin: auto;

  }

  .table-box .table-body_tr {
    position: relative;
    padding: 8px 11px;
    background: #fff;
  }

  .table-box .product-tr {
    padding-right: 10px;
  }

  .table-box .table-header {
    padding: 6px 30px 9px 16px;
  }

  .table-box .service {
    padding-right: 30px;
  }

  .bottom {
    flex-direction: column;
    justify-content: center;
    text-align: center;
    gap: 12px;
    margin: 16px 0 30px;
  }

  .copyright {
    text-align: center;
    margin: 0;
  }

  .agreement {
    margin: 0;
  }

  .payment-methods,
  .billing-info,
  .payment-info {
    flex-wrap: wrap;
  }

  img {
    max-width: 100%;
    height: auto;
  }

  .card-number,
  .email-box {
    width: 100%;
  }

  .expiry,
  .cvc,
  .billing-input,
  .search-select {
    width: 48%;
  }

  .search-select .search-text,
  .search-select .search-ul {
    width: 100%;
  }

  .type-icon,
  .more-img {
    height: 32px;
    width: auto;
  }

  .payment-method_item {
    gap: 8px;
  }

  .more {
    position: unset;
  }

  .payment-methods {
    position: relative;
  }

  .billing-info,
  .payment-info {
    gap: 10px;
  }

  .billing-info .search-select,
  .billing-info .lastname-input,
  .billing-info .firstname-input {
    flex: 0 0 47%;
  }

  .billing-info .billing-input {
    width: 100%;
  }

  .more-con {
    left: 50%;
    transform: translateX(-50%);
    right: unset;
    width: 100%;
  }

  .more-con::before {
    left: 110px;
  }

  .page2 {
    width: 100%;
    max-width: 100vw;
    background: #fff;
  }

  .email-tips {
    font-size: 14px;
  }

  .applepay-btn,
  .googlepay-btn,
  .paypal-btn,
  .stripecard-submit,
  .stripecard-btn,
  .submit {
    width: 100%;
    text-align: center;
  }

  .mask .pop {
    width: 95%;
  }

  .result-box {
    width: 100%;
    margin: 10px auto;
    padding: 30px 8px;
  }

  .content {
    width: 100%;
  }

  .result-title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    font-size: 20px;
    gap: 10px;
  }

  .result-text {
    line-height: 1.5;
    padding: 0 10px;
  }

  .result-info {
    flex-direction: column;
    gap: 10px;
  }

  .login-btn {
    padding: 10px;
    min-width: 60px;
    text-align: center;
  }

  .user-box {
    padding: 10px;
  }

  .result-table-wrap {
    width: 100%;
    overflow-x: scroll;
  }

  .result-table {
    width: max-content;
  }

  .result-table_title,
  .result-table_td {
    margin: 0 10px;
    text-align: center;
  }

  .result-table_title:first-child,
  .result-table_td:first-child {
    width: 200px;
    text-align: left;
  }

  *::-webkit-scrollbar {
    height: 8px;
  }

  .error-text {
    padding: 0 40px;
  }

  .jump-tips {
    padding: 0 10px;
    line-height: 1.5;
  }

  .error-img {
    width: 90%;
  }
}