@charset "utf-8";

.page-title {
    margin-bottom: var(--main-margin);
    font-size: var(--fontS-title);
    font-weight: 500;
}

/* S cartPage*/
.cart-page {
    position: relative;
    display: grid;
    grid-template-columns: 3.5fr 1fr;
    align-items: start;
    gap: .4rem;
}
.cart-page .bwhite {
    padding: var(--main-padding);
}
.cart-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--main-padding);
    margin-bottom: var(--main-margin);
}
.cart-top .page-title {
    margin-bottom: 0;
}
.cart-list li {
    display: grid;
    grid-template-columns: auto 1.5fr .5fr 1fr auto;
    gap: 0.3rem;
}
.cart-list li:not(:last-child) {
    margin-bottom: var(--main-margin);
}
.cart-list li > * {
    flex: 1;
    text-align: center;
}
.cart-list li .s-checkbox, .cart-list li .icon-del {
    flex: initial;
}
.cart-list li .s-checkbox::before {
    width: .2rem;
    height: .2rem;
}
.cart-list li .cart-info-item1 {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: start;
    gap: 0 var(--max-spacing);
    text-align: left;
}
.cart-list li .cart-info-item2 p {
    margin-bottom: 1em;
}
.cart-list li .product-img {
    position: relative;
    grid-row-end: span 3;
    width: .8rem;
    height: .8rem;
    box-shadow: none;
    border-radius: var(--max-fillet);
}
.cart-list li .disabled {
    background: none !important;
}
.disabled .product-img .disabled-tips {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    padding: 0;
    width: .7rem;
    height: .7rem;
    line-height: .24rem;
    font-size: var(--fontS-con);
    color: var(--btnColor-white) !important;
    background-color: rgba(0, 0, 0, .6);
    border-radius: 100%;
}
.cart-list li .grid-list {
    display: inline-flex;
    gap: .04rem;
    flex-direction: column;
    align-items: flex-start;
}
.cart-list li .grid-list .give-gift p {
    margin: 0 !important;
    font-size: var(--fontS-min);
}
.cart-list li .cart-info-item1 .gray {
    font-size: var(--fontS-min);
    color: var(--SColorGrey-g1);
}
.cart-list li .s-button-grey {
    padding: .01rem var(--icon-spacing);
    font-size: var(--fontS-min);
    border-radius: 4px;
}
.cart-list .cart-info-item3 {
    display: grid;
    align-content: space-between;
    justify-content: end;
    align-items: center;
}
.cart-list .cart-info-item3 strong, .cart-list .cart-info-item3 strong * {
    font-weight: 500;
}
.cart-list .buy-num {
    padding: .02rem var(--min-spacing);
}
.cart-list .icon-del {
    display: flex;
    align-items: center;
    font-size: .28rem;
}
.cart-list li .disabled {
    filter: grayscale(0) !important;
    background: none !important;
    color: initial !important;
}
.cart-list li .disabled * {
    opacity: .5;
}
.cart-list li .disabled .product-img, .cart-list li .disabled .product-img .disabled-tips {
    opacity: 1;
}
.cart-settlement {
    position: sticky;
    top: calc(var(--main-margin)*2 + 0.62rem);
    margin-top: .62rem;
}
.cart-settlement .info-list {
    gap: var(--main-padding);
}
.cart-settlement .is-tips span, .cart-settlement .is-price span  {
    color: var(--MColor-black);
}
.cart-settlement .is-price {
    font-size: .2rem;
    font-weight: 500;
}
.cart-settlement .is-price strong, .cart-settlement .is-price strong * {
    color: var(--HColor);
    font-weight: 500;
}
.cart-settlement .s-button {
    margin-top: .5rem;
    padding: 0;
    width: 100%;
    height: .4rem;
    line-height: .4rem;
    text-align: center;
}
/* E cartPage */

/* S checkoutPage */
.checkout-page-head {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100;
    width: 100%;
}
.checkout-page-head .logo {
    width: 2rem;
    height: .4rem;
}
.is-head-con {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--max-spacing) max(1rem, calc(50vw - 500px));
}
.is-head-con .main-header-left {
    gap: var(--main-padding);
    align-items: flex-end;
}
.is-head-con h3 {
    padding-bottom: .02rem;
    font-size: .22rem;
    letter-spacing: .04rem;
}
.is-head-con .login-coms .user-cart {
    color: var(--MColor-black);
}
.is-head-con .icon-shop-car {
    font-size: .24rem;
}
.is-head-con .icon-arrow-down {
    font-size: .2rem;
}
.checkout-main {
    position: relative;
    margin: .8rem max(1rem, calc(50vw - 500px)) 0;
}
.checkout-info {
    position: sticky;
    top: .8rem;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--main-margin);
    justify-content: space-between;
    padding: .5rem 0 var(--main-padding);
    margin-bottom: var(--main-margin);
    background-color: var(--BColor-white);
    border-bottom: var(--border);
}
.checkout-info .info-list li {
    justify-content: flex-start;
    align-items: center;
    gap: .5rem;
}
.checkout-info .info-list li * {
    font-weight: 500;
    text-align: left;
}
.checkout-info .info-list li .red {
    font-size: .2rem;
}
.checkout-info .info-list .info-tips {
    margin: 0 0 0.02rem var(--min-spacing);
    font-weight: normal;
    font-size: .13rem;
    color: var(--SColorGrey-g2);
}
.checkout-tips {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--icon-spacing);
}
.checkout-tips .icon {
    margin-top: .02rem;
    font-size: .2rem;
}
.payment-detail-box {
    position: relative;
    margin: .5rem 0;
}
.payment-detail-box .icon-arrow-right {
    display: none;
}
.payment-detail-box .balance-info {
    position: relative;
    padding-right: var(--main-padding);
}
.payment-detail-box .balance-info::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: .16rem;
    background-color: #c1c1c1;
}
.payment-detail-box .balance-info a {
    padding: .03rem .06rem;
    font-size: var(--fontS-min);
    color: var(--btnColor-white);
    background-color: var(--MColor-yellow);
    border-radius: 4px;
    cursor: pointer;
}
.payment-detail-box .igbpoint span {
    color: var(--MColor-black);
}
.payment-total {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: var(--max-spacing);
    padding: var(--max-spacing) var(--main-padding);
    font-size: var(--fontS-min);
    border-radius: var(--min-fillet);
    background-color: var(--BColor-white);
    box-shadow: var(--whiteBg-shadow);
    box-sizing: border-box;
}
.payment-total .s-button-plain {
    padding: .1rem .3rem;
}
.payment-total .price-info {
    position: relative;
    padding-left: var(--max-spacing);
    line-height: 1.8;
}
.payment-total .price-info span {
    padding-left: var(--icon-spacing);
}
.payment-total .price-info::after {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: .4rem;
    background-color: var(--LColor);
}
.payment-detail-box .buy-num {
    padding: var(--icon-spacing) var(--min-spacing);
    background-color: var(--LColor);
}
.payment-detail-box .buy-num input {
    padding: 0;
}
.payment-detail-box .policy-agree {
    margin-top: var(--min-spacing);
}
.payment-detail-box .s-checkbox {
    justify-content: flex-end;
}
.payment-detail-box .s-checkbox a {
    color: var(--HColor);
}
.disabled .disabled-tips {
    top: 0;
    left: auto;
    right: 0;
    transform: none;
    padding: .02rem var(--min-spacing);
    width: auto;
    height: auto;
    font-size: var(--fontS-min);
    background-color: var(--MColor-yellow);
    border-radius: var(--min-fillet) var(--min-fillet) var(--min-fillet) 0;
}
.pay-result-page .checkout-main {
    margin-top: 1.5rem;
}
.pay-result-page .pay-result-detail {
    margin: 0 auto;
    max-width: 5rem;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, .08));
}
.pay-result-page .pay-result-detail a:hover {
    text-decoration: underline;
}
.cutaway-bg::after, .cutaway-bg::before {
    top: -0.1rem;
    width: 0.1rem;
    height: 0.2rem;
}
.cutaway-bg::before {
    right: -.3rem;
}
.cutaway-bg::after {
    left: -.3rem;
}
.discount-box {
    position: relative;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: var(--max-spacing) var(--main-padding);
    background-color: var(--BColor-grey);
    border-radius: var(--min-fillet) var(--min-fillet) 0 0;
    box-sizing: border-box;
}
.discount-box .icon-gift-bag {
    margin-right: var(--icon-spacing);
}
.discount-box span {
    margin-right: var(--max-spacing);
}
.discount-box .s-input {
    min-width: 2.9rem;
}
.discount-box .discount-tip {
    position: absolute;
    right: calc(var(--main-padding) + 0.1rem);
    top: 50%;
    transform: translateY(-50%);
    font-size: var(--fontS-min);
    color: var(--HColor);
}
/* .checkout-main .more-list {
    margin-top: 0;
} */
.checkout-main .order-detail-list {
    padding-bottom: var(--main-padding);
}
.checkout-main .give-gift {
    margin: 0 var(--main-margin);
    padding: var(--min-spacing);
    background-color: #f9f9f9;
    border-radius: var(--min-fillet);
}
/* E checkoutPage */

/* S giftpacks */
.giftpacks-ac .swiper-button-prev, .giftpacks-ac .swiper-button-next {
    width: .4rem;
    height: .4rem;
    text-align: center;
    line-height: .4rem;
    border-radius: 100%;
    background: rgba(0, 0, 0, .3);
}
.giftpacks-ac .swiper-button-next:after, .giftpacks-ac .swiper-button-prev:after {
    font-size: .22rem;
    color: var(--btnColor-white);
}
.giftpacks-coms .giftpacks-item {
    margin-bottom: .5rem;
}
.giftpacks-item-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--main-padding);
}
.giftpacks-item-list li {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--max-spacing);
    padding: var(--main-padding);
    border-radius: var(--min-fillet);
    box-shadow: var(--whiteBg-shadow);
    box-sizing: border-box;
    overflow: hidden;
}
.giftpacks-item-list .product-img {
    width: 1rem;
    height: 1rem;
    box-shadow: none;
}
.giftpacks-item-list .giftpacks-info {
    padding-top: var(--icon-spacing);
}
.giftpacks-item-list .giftpacks-info p {
    margin-top: var(--min-spacing);
    font-size: var(--fontS-min);
    color: var(--SColorGrey-g1);
}
.giftpacks-status {
    position: absolute;
    top: 0;
    right: 0;
    padding: .03rem var(--max-spacing);
    color: #FFEC8D;
    line-height: 1.1;
    background-color: var(--MColor-black);
    border-radius: 0 0 0 var(--min-fillet);
}
.giftpacks-detail {
    position: absolute;
    left: 0;
    bottom: -100%;
    z-index: 2;
    display: grid;
    gap: var(--min-spacing);
    align-content: center;
    padding: var(--min-spacing) var(--main-padding);
    width: 100%;
    height: 100%;
    color: var(--btnColor-white);
    background-color: rgba(0, 0, 0, .6);
    transition: var(--animation);
    overflow: hidden;
    box-sizing: border-box;
}
.giftpacks-detail p {
    font-size: var(--fontS-min);
}
.giftpacks-item-list li:hover .giftpacks-detail {
    bottom: 0;
}
.giftpacks-detail .s-button {
    margin: 0 auto;
    padding: 0;
    width: 1.2rem;
    height: .36rem;
    line-height: .36rem;
    text-align: center;
    color: var(--MColor-black);
    background: var(--BColor-white);
}
.giftpacks-item-list li.hasStatus {
    cursor: not-allowed;
    pointer-events: none;
}
.giftpacks-item-list li.hasStatus::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, .5);
}
.giftpacks-item-list li.hasStatus .s-button {
    color: var(--btnColor-white);
    background: var(--SColorGrey-g2);
}
.pop-plain-text {
    text-align: left;
}
/* E giftpacks */

/* S news-page */
.news-page-tops {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.news-page-tops .icon {
    font-size: .2rem;
}
.news-list-coms {
    margin-top: var(--main-margin);
}

.article-body {
    background: url(../img/body-bg.png) no-repeat center bottom;
    background-size: cover;
    background-attachment: fixed;
}
.article-title {
    margin-bottom: var(--max-spacing);
    text-align: center;
    font-size: var(--fontS-title);
    font-weight: 500;
}
.article-time {
    text-align: center;
    color: var(--SColorGrey-g2);
    font-size: var(--fontS-min);
}
.article-con {
    margin-top: var(--max-spacing);
    padding-top: var(--max-spacing);
    border-top: var(--border);
}
article h1, h2, h3, h4, h5, h6 {
    font-size: revert;
    font-weight: revert;
}
article img {
    margin: 0 auto;
    max-width: 10rem;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: var(--min-fillet);
}
article a {
    color: revert;
}
.the-context {
    display: flex;
    margin-top: var(--max-spacing);
    padding-top: var(--max-spacing);
    border-top: var(--border);
}
.the-context > div {
    flex: 1;
    box-sizing: border-box;
}
.the-context-down {
    padding-left: var(--main-padding);
}
.the-context h3 {
    margin-bottom: var(--max-spacing);
    font-weight: 500;
}
.the-context a {
    display: flex;
    gap: .16rem;
    color: var(--MColor-black);
    transition: var(--animation);
}
.the-context .game-news-img {
    width: 1.1rem;
    height: .62rem;
    border-radius: var(--min-fillet);
    overflow: hidden;
}
.the-context-up a {
    padding-right: var(--main-padding);
    border-right: var(--border);
}
.the-context a:hover {
    color: var(--HColor);
}
.the-context a img {
    transition: var(--animation);
}
.the-context a:hover img {
    transform: scale(1.1);
}
.hot-news {
    margin-top: .5rem;
}
.hot-news-title {
    display: flex;
    align-items: center;
    gap: var(--icon-spacing);
    margin-bottom: var(--max-spacing);
}
.hot-news-title span {
    font-weight: 500;
}
.hot-news-title .icon {
    margin-top: .02rem;
    font-size: .2rem;
}
/* E news-page */

/* S bcPage */
.bc-head {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 10;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .5rem max(.4rem, calc(50vw - 600px)) 0;
    width: 100%;
    box-sizing: border-box;
}
.bc-banner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    width: 100%;
    color: var(--BColor-white);
    background: url(../img/bc-banner.png) no-repeat center bottom;
    background-size: cover;
    box-sizing: border-box;
    padding: 0 var(--wrap-margin);
    padding-top: .7rem;
    min-height: 11.2rem;
}
.bc-logo{
    margin-bottom: 1.66rem;
}
.bc-banner h1 {
    font-size: .6rem;
}
.bc-banner h4 {
    font-size: .3rem;
    text-transform: uppercase;
    color: #babcff;
}
.bc-page-box .bc-contact{
    width: 2.7rem;
    height: .7rem;
    line-height: .7rem;
    font-size: var(--fontS-maxTitle);
    padding: 0;
    margin: 0.6rem 0 1.66rem;
}
.bc-banner h3 {
    font-size: .3rem;
    text-transform: uppercase;
    color: #babcff;
}
.introduce-con .con-title {
    font-size: var(--fontS-maxTitle);
    font-weight: 500;
    line-height: 1.8;
    color: #fff;
    margin-bottom: .6rem;
}
.introduce-con .con-p{
    margin-bottom: .8rem;
    font-size: var(--fontS-min);
    color: #babcff;
}
.introduce-con {
    margin-bottom: .8rem;
}
.introduce-con ul {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .5rem;
    border-radius: var(--min-fillet);
}
.introduce-con ul li {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: .3rem;
    background-color: var(--BColor-white);
    text-align: center;
    line-height: 1.8;
    padding: .57rem var(--main-padding);
    box-shadow: var(--imgBg-shadow);
}
.introduce-con ul li .icon {
    margin-bottom: var(--main-padding);
    text-align: center;
    line-height: .8rem;
    font-size: .8rem;
    color: #7b83fb;
    border-radius: 100%;
}
.introduce-con ul li .icon.icon-official-coop{
    font-size: .9rem;
}
.introduce-con ul li strong {
    font-size: var(--fontS-title);
    font-weight: 500;
    color: #2c2f40;
}
.introduce-con ul li p{
    font-size: .16rem;
    color: #474f7c;
}
.bc-icon{
    width: 8.24rem;
    height: 5.86rem;
    position: absolute;
    right: var(--wrap-margin);
    top: 1.35rem;
    background: url(../img/bc-icon.png) no-repeat center top;
    background-size: contain;
    animation: towardsleft 1s forwards;
}
@keyframes towardsleft {
    0% {
        right: 2rem;
        opacity: .6;
    }
    100% {
        right: var(--wrap-margin);
        opacity: 1;
    }
}
.bc-page-box .wrap-margin {
    margin: 0;
    width: 100%;
    min-height: 13.8rem;
    box-sizing: border-box;
    padding: 0 var(--wrap-margin);
    margin-top: 1rem;
    position: relative;
}
.wrap-margin .point{
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}
.wrap-margin .bg-l{
    width: 1.47rem;
    height: 7.7rem;
    bottom: 2rem;
    left: 0;
    background-image: url(../img/bg-l.png);
}
.wrap-margin .bg-game{
    width: 4.4rem;
    height: 3.78rem;
    bottom: 3rem;
    right: 6rem;
    background-image: url(../img/bg-game.png);
}
.wrap-margin .bg-r{
    width: 6.29rem;
    height: 8.93rem;
    top: 0;
    right: 0;
    background-image: url(../img/bg-r.png);
}
.contact-us h3{
    font-size: var(--fontS-title);
    font-weight: 500;
    line-height: 1.8;
    color: #2c2f40;
    position: relative;
    display: flex;
    align-items: center;
}
.contact-us h3 i{
    display: block;
    width: 5px;
    height: .26rem;
    background-color: #7b83fb;
    margin-right: .2rem;
}
.contact-us p{
    margin-bottom: 0.6rem;
    font-size: var(--fontS-min);
    color: #2c2f40;
}
.contact-us-form {
    /* padding: var(--main-padding); */
    /* background-color: var(--BColor-white); */
    /* box-shadow: var(--whiteBg-shadow); */
    /* border-radius: var(--min-fillet); */
}
.contact-us-form .form-box {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--main-padding);
    width: 8.8rem;
}
.contact-us-form .form-box > * {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--icon-spacing);
    margin-bottom: 0;
}
.contact-us-form .form-box span {
    /* color: var(--SColorGrey-g1); */
    font-size: var(--fontS-con);
}
.contact-us-form .columns {
    grid-column-end: span 2;
}
.contact-us-form .btn-list {
    justify-content: flex-start;
    margin-top: var(--main-margin);
    width: 6rem;
}
.contact-us-form .btn-list .s-button {
    padding: .06rem var(--main-padding);
}
.contact-us-form .form-box .s-input, .contact-us-form textarea {
    width: 100%;
    background: #ffffff;
    border: var(--border);
    border-radius: var(--min-fillet);
    transition: all .6s ease;
}
.contact-us-form .form-box .ac-list {
    border: 1px solid #edf1f3;
    border-radius: var(--min-fillet);
    transition: all .6s ease;
    width: 100%;
}
.contact-us-form .form-box input {
    border: none;
    background: none;
}
.contact-us-form .s-select {
    /* width: auto; */
}
.contact-us-form .s-select .s-input {
    border: none;
    background: none;
}
.contact-us-form input::placeholder,
.contact-us-form textarea::placeholder {
    font-size: 14px;
    color: #9da7ac;
}
.contact-us-form .s-input:focus-within, .contact-us-form textarea:focus-within, .contact-us-form .form-box .ac-list:focus-within {
    outline: none;
    border: 1px solid #96afbc;
    box-shadow: 0 2px 8px #b8ced9;
}
.contact-us-form input:focus, .contact-us-form .form-box .ac-list .s-input:focus-within, .contact-us-form .form-box .ac-list .s-input:focus-visible {
    outline: none;
    border: none;
    box-shadow: none;
    background: none;
}
@media (max-width: 1440px) {
    .wrap-margin .bg-l{
        width: 1rem;
        height: 4.7rem;
        bottom: 3rem;
        left: 0;
    }
    .wrap-margin .bg-game{
        width: 4rem;
        height: 3.78rem;
        bottom: 3rem;
        right: 3rem;
    }
    .wrap-margin .bg-r{
        width: 3.72rem;
        height: 6.7rem;
        top: -.94rem;
        right: -1.12rem;
    }
}
/* E bcPage */
/* A payment-flow */
.payment-con h1{
	text-align: center;
	margin: 0 0 .4rem;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
	display: inline-block;
}
.payment-con h1 em{
    font-size: .26rem;
    position: relative;
    z-index: 1;
}
.payment-con h1::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0.02rem;
    height: 0.06rem;
    background-color: var(--MColor-yellow);
    border-radius: 10px 0 10px 0;
    transition: all .4s ease;
    width: 100%;
    opacity: 1;
}
.payment-con ul {
    display: flex;
    grid-template-columns: 1fr 1fr 1fr;
    gap: .4rem;
    flex-wrap: wrap;
    align-content: space-around;
    justify-content: space-around;
    width: 10rem;
    margin: 0 auto .8rem;
}
.payment-con ul li strong{
    font-size: var(--fontS-title);
    position: inherit;
    z-index: 1;
}
.payment-con ul li p{
    position: inherit;
    z-index: 1;
}
.payment-con ul li span {
    margin-bottom: var(--max-spacing);
    width: .84rem;
    height: 1.04rem;
    text-align: center;
    font-size: .24rem;
    color: #fff;
    border-radius: 100%;
    left: -.8rem;
    top: -.7rem;
    position: absolute;
    padding: .2rem .4rem;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.payment-con ul li .con{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    overflow: hidden;
    margin-bottom: auto;
}

.payment-con ul li {
    border-radius: var(--min-fillet) 0 0 0;
    background-color: #ff7e50;
    text-align: center;
    height: 2.7rem;
    position: relative;
    color: #fff;
    width: 2.52rem;
    max-width: 3rem;
    /* margin: 0 0.4rem; */
    border-radius: .4rem;
    overflow: hidden;
    padding-bottom: .3rem;
}
.payment-con ul li::after{
    content: '';
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

.payment-con ul li:nth-child(1)::after,.payment-con ul li:nth-child(3)::after,.payment-con ul li:nth-child(4)::after,.payment-con ul li:nth-child(6)::after
{background:url(../img/con-bg2.png) no-repeat center; background-size: cover;}


.payment-con ul li:nth-child(5)::after,.payment-con ul li:nth-child(2)::after
{background:url(../img/con-bg1.png) no-repeat center; background-size: cover;}

.payment-con ul li::before{
    /* content: ''; */
    position: absolute;
    right: -20px;
    top: 0;
    bottom: 0;
    margin: auto;
    width: 0;
    height: 0;
    border-left: 20px solid #ff7e50;
    border-top: 20px solid transparent;
    border-bottom: 20px solid transparent;
}
.payment-con ul li i{
    width: 1.19rem;
    height: 1.14rem;
    position: absolute;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    display: block;
    z-index: 10;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
.payment-con ul li:nth-child(1){background: linear-gradient(#ffa68a, #ff6232);}
.payment-con ul li:nth-child(1) span {background: #e74819;}
.payment-con ul li:nth-child(1) i{
    background-image: url(../../public/img/payment1.svg);
}
.payment-con ul li:nth-child(2){background: linear-gradient(#fa7798, #f23864);}
.payment-con ul li:nth-child(2) span {background: #de2b54;}
.payment-con ul li:nth-child(2) i{
    background-image: url(../../public/img/payment2.svg);
}
.payment-con ul li:nth-child(3){background: linear-gradient(#36d4ac, #048c5e);}
.payment-con ul li:nth-child(3) span {background: #038362;}
.payment-con ul li:nth-child(3) i{
    background-image: url(../../public/img/payment3.svg);
}
.payment-con ul li:nth-child(4){background: linear-gradient(#be7efe, #843ef4);}
.payment-con ul li:nth-child(4) span {background: #7738d9;}
.payment-con ul li:nth-child(4) i{
    background-image: url(../../public/img/payment4.svg);
}
.payment-con ul li:nth-child(5){background: linear-gradient(#52d6d9, #2c729f);}
.payment-con ul li:nth-child(5) span {background: #107489;}
.payment-con ul li:nth-child(5) i{
    background-image: url(../../public/img/payment5.svg);
}
.payment-con ul li:nth-child(6){background: linear-gradient(#ffda57, #f34640);}
.payment-con ul li:nth-child(6) span {background: #e44e43;}
.payment-con ul li:nth-child(6) i{
    background-image: url(../../public/img/payment6.svg);
}

.payment-table {
    box-shadow: var(--whiteBg-shadow);
    padding: 0 var(--main-padding);
}
.payment-table table {
    width: 100%;
}

.payment-table thead tr {
    background: #fff;
}

.payment-table thead th {
    padding: 24px 0;
    width: 25%;
    font-size: 20px;
    font-weight: 600;
    color: #666;
}

.payment-table thead th:nth-child(3) {
    width: 30%;
}

.payment-table tbody tr {
    border-top: 1px dashed var(--LColor);
}
.payment-table tbody td {
    color: var(--SColorGrey-g1);
    font-size: var(--fontS-con);
    text-align: center;
    padding: 14px 0;
}

.payment-table tbody td:nth-child(3) {
    text-align: left;
}

.payment-table tbody td img{
    display: inline-block;
    width: auto;
    height: .5rem;
    vertical-align: middle;
}

/* B payment-flow */