@charset "utf-8";

[v-cloak] {
    display: none;
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700&display=swap');

/* S PC&WAP root */
:root {
    --MColor-black: #363636;
    --MColor-yellow: #FEBB0B;
    --SColorGrey-g1: #767676;
    --SColorGrey-g2: #A8A8A8;
    --HColor: #FF2323;
    --BColor-white: #fff;
    --BColor-grey: #f7f7f7;
    --LColor: #EDEDED;
    --btnColor-white: #fff;
    --btnColor-black: var(--MColor-black);
    --sucColor: #3EB953;

    --min-spacing: .1rem;
    --max-spacing: .2rem;
    --icon-spacing: .08rem;
    --fill-wSpacing: -.16rem;
    --main-margin: .3rem;
    --main-padding: .3rem;
    --wrap-margin: max(.4rem, calc(50vw - 720px));
    --main-spacing: .3rem;

    --fontS-con: .16rem;
    --fontS-title: .22rem;
    --fontS-maxTitle: .26rem;
    --fontS-min: .14rem;

    --fontF-C1: -apple-system, "PingFangHK-Regular", "Noto Sans TC", 'Microsoft YaHei', Arial, sans-serif;
    --fontF-C2: -apple-system, "PingFangHK-Medium", "Noto Sans TC", 'Microsoft YaHei', Arial, sans-serif;
    --fontF-C3: -apple-system, "PingFangHK-Semibold", "Noto Sans TC", 'Microsoft YaHei', Arial, sans-serif;

    --whiteBg-shadow: 0 0 8px rgba(0, 0, 0, .08);
    --imgBg-shadow: 0 0 8px rgba(0, 0, 0, .2);

    --max-fillet: .1rem;
    --min-fillet: .08rem;
    --border: 1px solid var(--LColor);

    --animation: all .4s ease;
}

/* E PC&WAP root */

html {
    font-size: calc(100 * 100vw / 1920);
}

body {
    box-sizing: border-box;
    font: var(--fontS-con)/1.5 'Noto Sans TC', 'Microsoft YaHei', sans-serif;
    font-weight: 400;
}

body,
html {
    min-height: 100%;
}

body.s-lock-scroll {
    overflow: hidden;
    position: fixed;
    height: 100%;
}

a {
    color: var(--MColor-black);
}

.red {
    color: var(--HColor) !important;
}

.green {
    color: var(--sucColor);
}

.gray {
    color: var(--SColorGrey-g1);
}

.yellow {
    color: var(--MColor-yellow);
}

.blue {
    color: #0256FF;
}

.disabled {
    filter: grayscale(1);
    cursor: not-allowed !important;
    background: #eee !important;
    color: #999 !important;
    pointer-events: none;
}

.placeholder {
    color: var(--SColorGrey-g2);
}

/* *****Din font***** */
@font-face {
    font-family: 'DIN';
    src: url('DIN-Bold.eot');
    src: url('DIN-Bold.eot?#iefix') format('embedded-opentype'), url('DIN-Bold.woff2') format('woff2'), url('DIN-Bold.woff') format('woff'), url('DIN-Bold.ttf') format('truetype'), url('DIN-Bold.svg#DIN-Bold') format('svg');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
.din-font {
    margin: 0 .06rem;
    font-family: 'DIN';
    font-weight: bold;
    font-style: normal;
    font-size: .24rem;
}
/* *****Din font***** */

/* S btn */
.s-button {
    display: inline-block;
    padding: .06rem .24rem;
    text-align: center;
    box-sizing: border-box;
    border-radius: 50px;
    cursor: pointer;
}

.s-button-plain,
.s-button-confirm {
    color: var(--btnColor-white);
    background: linear-gradient(0deg, #868686 0%, #363636 11%, #797979 100%);
}

.s-button-plain-line,
.s-button-cancel {
    color: var(--btnColor-black);
    background-color: var(--btnColor-white);
    border: 1px solid var(--MColor-black);
}

.s-button-plain-line.disabled {
    border: none;
}

.s-button-yellow {
    color: var(--btnColor-white);
    background: linear-gradient(0deg, #FFC175 0%, #FF8C00 11%, #F4BE43 100%);
}

.s-button-yellow a {
    color: var(--btnColor-white);
}

.s-button-ban {
    color: var(--SColorGrey-g1);
    background-color: var(--LColor);
}

.s-button-red {
    color: var(--btnColor-white);
    background-color: var(--HColor);
}

.s-button-plain a,
.s-button-red a {
    color: var(--btnColor-white);
}

.s-button-grey {
    color: var(--btnColor-black);
    background-color: var(--LColor);
}

.s-button-red-line {
    color: var(--HColor);
    border: 1px solid var(--HColor);
}

.s-button-green-line {
    color: var(--sucColor);
    border: 1px solid var(--sucColor);
}

.btn-list {
    display: grid;
    align-items: center;
    grid-auto-flow: column;
    gap: var(--main-margin);
}

/* E btn */

/* S svgicon */
.svgicon {
    display: inline-block;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
}

.svg-ig-hk {
    background-image: url(../../public/svg/ig-hk.svg);
}

.svg-hk {
    width: .14rem;
    height: .14rem;
    background-image: url(../../public/svg/svg-hk.svg);
}

.svg-mo {
    width: .14rem;
    height: .14rem;
    background-image: url(../../public/svg/svg-mo.svg);
}

.svg-my {
    width: .14rem;
    height: .14rem;
    background-image: url(../../public/svg/svg-my.svg);
}

.svg-sg {
    width: .14rem;
    height: .14rem;
    background-image: url(../../public/svg/svg-sg.svg);
}

.svg-tw {
    width: .14rem;
    height: .14rem;
    background-image: url(../../public/svg/svg-tw.svg);
}

.svg-empty-content {
    background-image: url(../../public/svg/svg-empty-content.svg);
}

.svg-cart-empty {
    background-image: url(../../public/svg/svg-cart-empty.svg);
}

.svg-pay-fail {
    background-image: url(../../public/svg/svg-pay-fail.svg);
}

.svg-pay-suc {
    background-image: url(../../public/svg/svg-pay-suc.svg);
}

.svg-pay-load {
    background-image: url(../../public/svg/svg-pay-load.svg);
}

.svg-com-suc {
    background-image: url(../../public/svg/svg-com-suc.svg);
}

.svg-com-fail {
    background-image: url(../../public/svg/svg-com-fail.svg);
}

.svg-com-otherstatus {
    background-image: url(../../public/svg/svg-com-otherstatus.svg);
}

.svg-official-2 {
    background-image: url(../../public/svg/svg-official-2.svg);
}

.svg-news {
    background-image: url(../../public/svg/svg-news.svg);
}

.svg-ig-wallet {
    background-image: url(../../public/svg/svg-ig-wallet.svg);
}

.svg-currency {
    background-image: url(../../public/svg/svg-currency.svg);
}

.svg-cs {
    background-image: url(../../public/svg/svg-cs.svg);
}

.svg-ig-hk-white {
    background-image: url(../../public/svg/ig-hk-white.svg);
}

.svg-login-iconbg {
    background-image: url(../../public/svg/login-iconbg.svg);
}

.svg-find-pwd-iconbg {
    background-image: url(../../public/svg/find-pwd-iconbg.svg);
}

.svg-find-paypwd-iconbg {
    background-image: url(../../public/svg/find-paypwd-iconbg.svg);
}

.svg-logistics-icon {
    background-image: url(../../public/img/sf.svg);
}

/* E svgicon */

/* S emptyCon*/
.con-null {
    display: grid;
    gap: var(--max-spacing);
    justify-content: center;
    margin-top: 1rem;
    max-width: 100%;
    text-align: center;
}

.con-null .svgicon {
    margin: 0 auto;
    width: 2rem;
    height: 1.2rem;
}

.con-null .btn-list {
    display: inline-flex;
    justify-content: center;
    gap: .3rem;
}

.con-null-tips {
    display: grid;
    gap: var(--max-spacing);
}

.con-null .s-button {
    min-width: 1.3rem;
}

/* E emptyCon*/

/* S vue-transition */
.v-enter-active,
.v-leave-active {
    transition: opacity 0.5s ease;
}

.v-enter-from,
.v-leave-to {
    opacity: 0;
}

/* E vue-transition */

/* S pop */
.s-pop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5);
    transition: var(--animation);
    opacity: 0;
}

.s-pop.active,
.s-pop.active .s-pop-main {
    opacity: 1;
}

.s-pop-main {
    position: relative;
    padding: .5rem;
    max-height: 100%;
    background: var(--BColor-white);
    border-radius: .1rem;
    box-sizing: border-box;
    transition: var(--animation);
    overflow: auto;
    opacity: 0;
}

.s-confirm .s-pop-main {
    max-width: 6.6rem;
}

.s-pop .s-pop-close {
    position: absolute;
    right: .1rem;
    top: .1rem;
    z-index: 1;
    line-height: 1;
    text-align: center;
    cursor: pointer;
}

.s-pop .s-pop-close i {
    font-size: .24rem;
    color: var(--SColorGrey-g2);
    transition: all 0.3s linear;
}

.s-pop .s-pop-close i:hover {
    color: var(--MColor-black);
}

.s-pop .s-pop-body {
    padding: 0;
    min-width: 3rem;
    max-height: 60vh;
    text-align: center;
    overflow: auto;
}

.s-pop .link-url {
    color: #014bd2;
}

.s-pop-area .s-pop-body {
    text-align: left;
}

.s-confirm .s-pop-body {
    line-height: 1.8;
}

.s-pop .s-pop-head {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: .5rem;
    text-align: center;
    font-weight: 500;
    font-size: .2rem;
}

.s-pop .s-pop-head span {
    font-size: .18rem;
}

.s-pop .s-pop-head span.gray {
    font-size: .13rem;
    font-weight: normal;
}

.s-pop .s-pop-head .logo {
    width: 1.58rem;
    padding: 0;
    height: .3rem;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
}

.s-pop-foot {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .5rem;
    text-align: center;
}

.s-pop-foot .s-button {
    margin: 0 .15rem;
    padding: .08rem .24rem;
    min-width: 1.4rem;
    text-align: center;
}

.s-pop-code .s-input input {
    text-align: center;
}

.bottom-select.bottom-pop .s-pop-head>* {
    align-items: center;
}

/* E pop */

/* S common-head-style */
header.fiexd {
    width: 100%;
    background-color: var(--BColor-white);
    box-shadow: var(--whiteBg-shadow) !important;
    box-sizing: border-box;
}

/* E common-head-style */

/* S select-value-list */
.select-value-list li {
    padding: var(--min-spacing) 0;
}

/* E select-value-list */

/* S input-sle */
.input-sle {
    position: relative;
    display: block;
    width: .2rem;
    height: .2rem;
    line-height: .17rem;
    text-align: center;
    background-color: var(--LColor);
    border-radius: 100%;
    transition: var(--animation);
}

.act .input-sle,
.selected .input-sle {
    opacity: 1 !important;
    background-color: var(--HColor);
}

.act .input-sle::after,
.selected .input-sle::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    height: 100%;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzNFRUQzNkE0Njk5MTFFOEEyREFGQzYyMzQyOTQxNjgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzNFRUQzNjk0Njk5MTFFOEEyREFGQzYyMzQyOTQxNjgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjE0QzNGN0JEQTRCNDExRTZBQkMzRkIzMkM1QkIzRUM1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE0QzNGN0JFQTRCNDExRTZBQkMzRkIzMkM1QkIzRUM1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+qUYqPgAAAHxJREFUeNpi+P//PwMeHAzEM4CYl4UBN3AA4kVAzAXELCBdTEAcA8RCSCa5AvGv/xDwD4jDQIKzoQLboIqMgfgdVOwHEPuAxEES8/4jwB4gfgJlfwdiT5gtMKvm/kcFIOsCkD2G7MPFUEW/gdgPPQTQg2MqEMdiCyqAAAMAnkjsEdbpHtwAAAAASUVORK5CYII=) no-repeat center;
}

/* S input-sle */

/* S payment */
.payment-way-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--max-spacing);
}

.payment-way-list li {
    position: relative;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 0;
    padding: .15rem var(--max-spacing);
    border: var(--border);
    border-radius: var(--min-fillet);
    cursor: pointer;
    transition: var(--animation);
    box-sizing: border-box;
}

.flex-lr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--min-spacing);
}

.payment-way-name {
    width: 2.5rem;
    height: .5rem;
}

.payTips {
    position: absolute;
    right: calc(var(--max-spacing) + 4px);
    top: 50%;
    transform: translateY(-50%);
    padding: .04rem var(--min-spacing);
    line-height: 1.2;
    font-size: .12rem;
    color: #999;
    border-radius: 4px;
    border: .5px solid #D8D8D8;
    background: rgba(153, 153, 153, 0.05);
    box-sizing: border-box;
    transition: var(--animation);
}

.payment-way-list li.selected {
    border: 1px solid var(--HColor);
}

.payment-way-list li.selected .input-sle {
    background-color: var(--MColor-black);
}

.payment-way-list li .input-sle {
    display: none;
    position: absolute;
    top: 50%;
    left: var(--max-spacing);
    transform: translateY(-50%);
    opacity: 0;
}

.payment-way-list li.selected .payTips {
    color: var(--HColor);
    border-color: var(--HColor);
    background: rgba(244, 63, 0, 0.05);
}

.payment-way-list li.disabled {
    filter: grayscale(0);
    background: var(--BColor-grey) !important;
    cursor: default;
}

.payment-way-list li.disabled .payment-way-name {
    filter: grayscale(1);
}

.payment-way-list li.disabled .tip {
    position: absolute;
    right: 0;
    top: 0;
    padding: 0.04rem var(--min-spacing);
    font-size: var(--fontS-min);
    color: #4c3f1c;
    background: #F9F2E0;
    box-sizing: border-box;
    border-radius: 0 0 0 .16rem;
}

.my-igpoint {
    display: flex;
    justify-content: flex-end;
    gap: var(--main-padding);
    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;
}

.my-igpoint>* {
    display: flex;
    align-items: center;
    gap: var(--max-spacing);
    color: var(--SColorGrey-g1);
    line-height: 1;
}

.btn-switch {
    position: relative;
    margin-top: 0.01rem;
    width: .26rem;
    height: .14rem;
    background-color: var(--SColorGrey-g2);
    border-radius: 50px;
}

.btn-switch span {
    display: block;
    position: absolute;
    left: .01rem;
    top: 50%;
    transform: translateY(-50%);
    width: .1rem;
    height: .1rem;
    background-color: var(--btnColor-white);
    border-radius: 100%;
    transition: left .3s ease-in;
}

.btn-switch.checkbox-checked {
    background-color: var(--HColor);
}

.btn-switch.checkbox-checked span {
    left: calc(100% - .11rem);
}

.launch-tng {
    display: block;
    margin: .12rem auto .2rem;
    width: 2.6rem;
    max-width: 100%;
    height: .46rem;
    font-size: 0;
    overflow: hidden;
    text-indent: 5000;
    color: rgba(255, 255, 255, 0);
    background: url(../../public/img/touchPay.png) no-repeat center;
    background-size: contain;
}

.channel-box {
    text-align: center;
}

.octopus_btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .08rem;
    color: #014bd2;
}

.octopus_btn::before {
    content: "";
    display: block;
    width: .26rem;
    height: .26rem;
    background: no-repeat center url(../../public/img/ocl_icon.png);
    background-size: contain;
}

.channel-drop .discount-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: var(--min-spacing);
    padding: 0 .2rem;
    height: .48rem;
    color: #8B6538;
    background-color: #F9F2E0;
    border-radius: 4px;
    cursor: auto;
    box-sizing: border-box;
}

.channel-drop .discount-box::after,
.channel-drop .discount-box::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: .16rem;
    height: .16rem;
    border-radius: 100%;
    background-color: var(--BColor-white);
}

.channel-drop .discount-box::after {
    left: -.08rem;
}

.channel-drop .discount-box::before {
    right: -.08rem;
}

.channel-drop .discount-box .icon-gift-bag {
    margin-right: var(--icon-spacing);
    color: #8B6538;
    font-size: .21rem;
}

.channel-drop .discount-box span {
    display: flex;
    align-items: center;
    margin-right: var(--max-spacing);
}

.channel-drop .discount-box .icon-discount {
    color: var(--HColor);
}

.channel-drop .discount-box .s-input {
    flex: 1;
}

.channel-drop .discount-box .s-input input {
    text-align: right;
    border: none;
    background: none;
    color: var(--MColor-black);
}

.channel-drop .discount-box .s-input input:focus-visible {
    box-shadow: none;
}

.channel-drop .discount-box .discount-tip {
    position: relative;
    top: 0.01rem;
    width: 100%;
    text-align: right;
    color: red;
    font-size: var(--fontS-min);
    box-sizing: border-box;
}

.payment-way-list .channel-desc {
    display: flex;
    margin-top: .04rem;
    padding-left: var(--min-spacing);
    width: 100%;
    color: var(--HColor);
    font-size: .12rem;
}

.payment-way-list .channel-desc .icon-directions {
    margin: .03rem .06rem 0 0;
    width: .18rem;
    height: .13rem;
    line-height: .13rem;
    color: var(--btnColor-white);
    background-color: var(--HColor);
    text-align: center;
    font-size: .12rem;
    border-radius: var(--min-fillet) var(--min-fillet) 0 var(--min-fillet);
}

/* E payment */

/* S more-list */
.more-list {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: var(--main-margin);
    cursor: pointer;
}

.more-list .icon-arrow {
    margin-left: .04rem;
    transform: rotate(-90deg);
    font-size: var(--fontS-con);
    color: var(--MColor-black);
    transition: var(--animation);
}

.more-list.pack-up .icon-arrow {
    transform: rotate(90deg);
}

/* E more-list */

/* S fixed-bottom */
.fixed-bottom {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 99;
    /* display: flex; align-items: center; justify-content: space-between; padding: var(--min-spacing) var(--main-spacing); */
    width: 100%;
    background-color: var(--BColor-white);
    box-shadow: var(--whiteBg-shadow);
    box-sizing: border-box;
    transition: all .4s ease-in;
}

.fixed-bottom-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--min-spacing) var(--main-spacing);
}

.fixed-bottom-item .is-item {
    display: flex;
    align-items: center;
}

.fixed-bottom-item a {
    position: relative;
    text-align: center;
}

.fixed-bottom-item a:not(:last-child) {
    margin-right: var(--main-spacing)
}

.fixed-bottom .s-button {
    padding: 0 var(--max-spacing);
    min-width: 1.1rem;
    text-align: center;
    height: .3rem;
    line-height: .3rem;
}

.fixed-bottom-item .svgicon {
    position: relative;
    display: block;
    margin: 0 auto;
    width: .24rem;
    height: .24rem;
}

.fixed-bottom .shop-car-num {
    position: relative;
    margin: 0 auto;
    width: .2rem;
}

.fixed-bottom .shop-car-num.has::after {
    content: "";
    display: block;
    position: absolute;
    right: 0;
    top: 0.02rem;
    width: .05rem;
    height: .05rem;
    background-color: var(--MColor-yellow);
    border-radius: 100%;
}

.fixed-bottom .shop-car .num {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
    font-size: .1rem;
    color: var(--MColor-yellow);
    font-family: var(--fontF-C2);
}

.fixed-bottom-2 {
    position: fixed;
    left: 50%;
    bottom: var(--min-spacing);
    transform: translateX(-50%);
    width: calc(100% - .32rem);
    color: var(--btnColor-white);
    box-sizing: border-box;
}

.fixed-bottom-2.payment-fixed-bottom {
    bottom: .4rem;
}

.fixed-bottom-2.s-button-yellow {
    padding: 0;
    bottom: .4rem;
    height: .4rem;
    line-height: .4rem;
}

.fixed-bottom-2 .fixed-bottom-left {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    padding: .02rem 1.5rem .02rem var(--main-spacing);
    width: 100%;
    min-height: .46rem;
    border-radius: .46rem;
    background-color: var(--MColor-black);
    box-sizing: border-box;
}

.fixed-bottom-left li:first-child {
    padding-right: var(--min-spacing);
    margin-right: var(--min-spacing);
    line-height: 1.2;
    border-right: 1px solid rgba(255, 255, 255, .5);
}

.fixed-bottom-left li:last-child {
    flex: 1;
}

.fixed-bottom-2 .s-button {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: -0.01rem;
    right: -0.01rem;
    z-index: 15;
    padding: 0 var(--max-spacing);
    min-width: 1.3rem;
    height: 102%;
    line-height: 102%;
    text-align: center;
    font-size: var(--fontS-con);
}

.fixed-bottom-2 .protocol {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0.06rem 0rem 0;
    position: absolute;
    left: 50%;
    bottom: -0.3rem;
    transform: translateX(-50%);
    padding-top: 0.26rem;
    width: 100%;
    height: 0.56rem;
    line-height: .3rem;
    color: var(--btnColor-black);
    border-radius: 0 0 var(--max-fillet) var(--max-fillet);
    box-sizing: border-box;
    background-color: rgba(247, 247, 247, .95);
}

.fixed-bottom-2 .ig-currency {
    color: var(--LColor);
}

.other-price strong {
    padding: 0 .02rem;
}

/* E fixed-bottom */

/* S menu */
.s-menu,
.main-menu {
    display: inline-grid;
    align-items: center;
    grid-auto-flow: column;
    gap: 0.2rem;
}

.s-pop .main-menu {
    gap: .4rem;
    margin-bottom: .3rem;
}

.main-menu li,
.main-menu li a {
    position: relative;
    z-index: 10;
    color: var(--SColorGrey-g1);
    font-size: var(--fontS-con);
    cursor: pointer;
}

.main-menu li.act,
.main-menu li.act a {
    font-weight: 500;
    color: var(--MColor-black);
}

.s-menu li *,
.main-menu li * {
    position: relative;
    z-index: 10;
}

.main-menu>li::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -.04rem;
    width: 0;
    height: 1.5px;
    background-color: var(--HColor);
    opacity: 0;
    transition: var(--animation)
}

.main-menu li.act::after {
    width: 100%;
    opacity: 1;
}

/* E menu */

/* S 收據 */
.popup-receipt-preview.s-pop .s-pop-main {
    padding: .16rem;
}

.popup-receipt-preview.s-pop .receipt-logo img {
    width: 2rem;
}

.popup-receipt-preview.s-pop .s-pop-main .receipt-box {
    max-width: 100%;
}

.popup-receipt-preview .receipt-dl a {
    padding: 4px 16px;
    color: #fe4200;
    font-size: 12px;
    border: 1px solid #fe4200;
    border-radius: 4px;
}

.popup-receipt-preview .receipt-box {
    width: 6.8rem;
    font-size: .13rem !important;
}

.popup-receipt-preview .receipt-box .top-right {
    top: 0.1rem;
    right: 0;
}

.popup-receipt-preview .receipt-logo {
    margin-bottom: .46rem;
}

.popup-receipt-preview .receipt-title {
    margin: 0 0 0.1rem;
    text-align: center;
    font-size: .26rem;
    font-weight: 600;
}

.popup-receipt-preview .receipt-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: .36rem;
}

.popup-receipt-preview .receipt-row .receipt-info {
    text-align: right;
}

.popup-receipt-preview .receipt-row ul li {
    display: grid;
    grid-template-columns: 1fr auto;
    justify-content: flex-end;
    text-align: right;
    align-items: center;
}

.popup-receipt-preview .receipt-row ul {
    margin: 0;
}

.popup-receipt-preview .receipt-row ul li.receipt-total {
    position: relative;
    margin-top: 4px;
    font-weight: 600;
    border-top: 1px solid #8d8d8d;
    border-bottom: 1px solid #8d8d8d;
}

.popup-receipt-preview .receipt-row ul li.receipt-total::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    width: 100%;
    height: 1px;
    background-color: #8d8d8d;
}

.popup-receipt-preview .receipt-row ul li.receipt-total::before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: -4px;
    width: 100%;
    height: 1px;
    background-color: #8d8d8d;
}

.popup-receipt-preview .receipt-stmp {
    display: inline-block;
    position: relative;
    text-align: center;
}

.popup-receipt-preview .receipt-stmp-img {
    display: none;
    margin: 0 auto -26px;
    width: 1rem;
    height: 1rem;
    background: url(../images/invoiceImg.png) no-repeat center;
    background-size: contain;
}

.popup-receipt-preview .receipt-stmp div:nth-child(2) {
    position: relative;
    display: inline-block;
    padding: 0 0.1rem;
}

.popup-receipt-preview .receipt-stmp div:nth-child(2)::after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    top: -4px;
    width: 100%;
    height: 1px;
    background-color: #8d8d8d;
}

.popup-receipt-preview .receipt-box .receipt-site-info p:nth-child(2) {
    color: #6189af;
}

.popup-receipt-preview .receipt-box th {
    font-weight: 600;
}

.popup-receipt-preview .receipt-box tr th:first-child {
    width: 40%;
}

.popup-receipt-preview .receipt-box ul em {
    color: #999;
}

.popup-receipt-preview .receipt-dl a {
    padding: 4px 16px;
    color: #fe4200;
    border: 1px solid #fe4200;
    border-radius: 4px;
}

.popup-receipt-preview.s-pop .s-pop-foot {
    margin-top: .2rem;
}

/* E 收據 */

/* S login */
.user-dialog .s-pop-main {
    padding: 0;
    max-width: 100%;
    border-radius: .16rem;
}

.user-dialog .s-pop-body {
    display: flex;
    max-height: 80vh;
}

.user-dialog-wap {
    display: none;
}

.user-dialog-pc {
    position: relative;
    padding: .54rem 0 0 .5rem;
    width: 3.8rem;
    text-align: left;
    color: var(--BColor-white);
    background: url(../svg/login-bg-pc.svg) no-repeat right center;
    background-size: cover;
    box-sizing: border-box;
    overflow: hidden;
}

.user-dialog-pc .svg-ig-hk-white {
    display: block;
    margin-bottom: var(--min-spacing);
    width: 1.4rem;
    height: .28rem;
}

.user-dialog-pc p {
    letter-spacing: 2px;
}

.user-dialog-pc::after {
    content: '';
    position: absolute;
    left: -.1rem;
    bottom: -.02rem;
    width: 1.96rem;
    height: 1.96rem;
    background: url(../svg/game-yellow.svg) no-repeat center bottom;
    background-size: contain;
}

.user-panes {
    min-width: 3.5rem;
}

.user-dialog .user-panes,
.login-red-page .user-panes {
    padding: .5rem;
    width: 3.6rem;
    max-width: 100%;
}

.sec-login {
    position: relative;
}

.user-panes .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: .4rem;
    padding: 0 var(--min-spacing);
}

.user-panes .head h2 {
    font-size: .22rem;
}

.user-panes .head div {
    font-size: var(--fontS-min);
}

.user-panes .head div span {
    color: #3068C1;
    cursor: pointer;
}

.user-panes .head div span:hover {
    text-decoration: underline;
}

.user-panes .form-main>* {
    display: grid;
    gap: var(--max-spacing);
}

.user-panes .form-main li {
    padding: .1rem var(--max-spacing);
    background-color: var(--LColor);
    border-radius: 50px;
    box-sizing: border-box;
    transition: var(--animation);
}

.user-panes .form-main .s-input {
    display: flex;
}

.user-panes .form-main li:focus-within {
    background-color: var(--BColor-white);
    box-shadow: var(--whiteBg-shadow);
}

.user-panes .form-main input {
    padding: 0;
    background: none;
    border: none;
}

.user-panes .form-main input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 400px var(--LColor) inset;
}

.user-panes .form-main input:focus-visible {
    box-shadow: none;
}

.user-panes .form-main input:-internal-autofill-selected {
    background-color: var(--LColor);
}

.user-panes .form-main .verify-item {
    display: flex;
    align-items: center;
    gap: var(--max-spacing);
    padding: 0;
    background: none;
    border: none;
}

.user-panes .form-main .verify-item .s-input {
    padding: .1rem var(--max-spacing);
    background-color: var(--LColor);
    border: 1px solid var(--LColor);
    border-radius: 50px;
    box-sizing: border-box;
}

.user-panes .form-main .verify-code {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 100%;
    border: var(--border);
    border-radius: 50px;
    background-color: var(--BColor-white);
    box-sizing: border-box;
}

.user-panes .form-main .verify-code img {
    width: 90%;
}

.user-panes li.flex-x {
    display: flex;
    align-items: center;
    padding: 0;
    overflow: hidden;
}

.user-panes .flex-x .flex-x-fixed {
    padding: .1rem var(--min-spacing);
    width: 1.6rem;
    height: 100%;
    box-sizing: border-box;
    background-color: var(--BColor-grey);
    border-radius: 50px;
}

.user-panes .flex-x .flex-x-fixed.s-button:hover {
    color: var(--HColor);
}

.user-panes .s-select .s-input {
    justify-content: space-between;
    padding: 0;
    background: none;
    border: none;
}

.user-panes .flex-x .flex-x-remaining {
    flex: 1;
    padding: .1rem var(--max-spacing);
    box-sizing: border-box;
}

.user-panes .s-input-suffix-icon,
.user-panes .s-input-clear {
    display: flex;
    align-items: center;
    position: relative;
    right: auto;
    top: auto;
    transform: none;
    padding-right: 0;
}

.user-panes .s-input-suffix-icon {
    margin-left: var(--min-spacing);
}

.user-panes .icon {
    color: #c7c7c7;
}

.user-panes .flex-x .icon-arrow-down {
    color: var(--MColor-black);
}

.icon-eye-open,
.icon-eye-close {
    cursor: pointer;
    font-size: .2rem;
}

.user-panes .s-select {
    width: 1.2rem;
    height: auto;
}

.user-panes .login-areas.s-select {
    position: absolute;
    right: var(--min-spacing);
    bottom: .02rem;
    z-index: 10;
    width: auto !important;
    font-size: var(--fontS-min);
    background: none;
}

.user-panes .login-areas .s-input {
    background: none;
    border: none;
}

.user-panes .s-button.disabled {
    background: var(--BColor-grey) !important;
}

.user-panes .text-list {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--min-spacing);
    margin-top: var(--max-spacing);
    font-size: var(--fontS-min);
}

.user-panes .text-list a {
    cursor: pointer;
    transition: var(--animation);
}

.user-panes .text-list a:hover {
    color: var(--HColor);
}

.user-panes .s-pop-foot {
    flex-direction: column;
    margin-top: .4rem;
}

.user-panes .s-pop-foot .s-button,
.user-panes .s-button {
    margin: 0;
}

.user-dialog .s-pop-foot .s-button,
.login-red-page .s-pop-foot .s-button {
    width: 100%;
}

.wap-show-btn {
    display: none;
}

.agree-text {
    margin-top: .4rem;
    font-size: .12rem;
    text-align: center;
    color: var(--SColorGrey-g1);
}

.user-panes .s-checkbox {
    margin: var(--min-spacing) 0 0 var(--min-spacing);
    font-size: .12rem;
}

.user-panes .s-checkbox::after {
    margin-right: var(--icon-spacing);
    width: .12rem;
    height: .12rem;
}

.others-login-way {
    display: flex;
    align-items: center;
    margin: .4rem 0 0 0;
}

.others-login-way p {
    position: relative;
    color: var(--SColorGrey-g2);
    text-align: left;
    font-size: .14rem;
}

.others-login-way .icon-fb {
    display: block;
    width: .28rem;
    height: .28rem;
    margin: 0 auto;
    color: var(--btnColor-white);
    line-height: .28rem;
    text-align: center;
    border-radius: 100%;
    background-color: #3068c1;
    font-size: .18rem;
}

.others-login-way .fb-name {
    display: block;
    margin-top: .04rem;
}

.others-login-way ul li {
    display: inline-flex;
    margin: 0 .1rem;
}

.user-panes .bind-tips {
    margin-bottom: var(--max-spacing);
    padding-left: var(--min-spacing);
    font-size: .16rem;
    text-align: left;
}

.user-panes .reg-tips {
    margin-bottom: var(--max-spacing);
    padding-left: var(--max-spacing);
    text-align: left;
    font-size: .14rem;
    line-height: 1.6;
}

/* S info-list */
.info-list {
    display: grid;
    gap: var(--max-spacing);
}

.info-list li {
    position: relative;
    display: flex;
    justify-content: space-between;
    gap: var(--main-spacing);
}

.info-list li span {
    color: var(--SColorGrey-g1);
}

.info-list li strong {
    flex: 1;
    text-align: right;
    word-break: break-all;
}

/* E info-list */

/* S GameinfoSelect */
.gameinfo-list {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.gameinfo-list li {
    padding: var(--max-spacing);
    background-color: var(--BColor-grey);
    border-radius: var(--min-fillet);
}

/* .gameinfo-list li.act {
    background-color: var(--BColor-white);
    box-shadow: var(--whiteBg-shadow);
} */
.gameinfo-list li:not(:last-child) {
    margin-bottom: var(--min-spacing);
}

.gameinfo-list .list-first {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: var(--min-spacing);
    align-items: center;
}

.gameinfo-list .list-up-con {
    padding-top: var(--min-spacing);
    margin-top: var(--min-spacing);
    border-top: var(--border);
}

.gameinfo-list li p {
    display: grid;
    grid-template-columns: auto 1fr;
    justify-content: space-between;
    align-items: center;
    gap: var(--max-spacing);
}

.gameinfo-list li .list-up-con p:not(:last-child) {
    margin-bottom: var(--min-spacing);
}

.gameinfo-list li strong {
    text-align: right;
}

.gameinfo-list li .input-sle {
    position: relative;
    top: auto;
    transform: none;
    width: .16rem;
    height: .16rem;
}

/* E GameinfoSelect */

/* E login */
@media (min-width: 1960px) {
    html {
        font-size: calc(100 * 100vw / 2600);
    }
}

@media (max-width: 1680px) and (min-width: 900px) {
    :root {
        --wrap-margin: max(.4rem, calc(50vw - 650px));
    }

    html {
        font-size: calc(100 * 100vw / 1680);
    }
}

@media (max-width: 1440px) and (min-width: 900px) {
    :root {
        --wrap-margin: max(.4rem, calc(50vw - 600px));
    }

    html {
        font-size: calc(100 * 100vw / 1440);
    }
}

@media (max-width: 900px) {
    html {
        font-size: calc(100 * 100vw / 640);
    }

    :root {
        --main-spacing: .16rem;

        --fontS-con: .13rem;
        --fontS-title: .16rem;
        --fontS-minTitle: .14rem;
        --fontS-min: .11rem;
    }

    body {
        padding: 0 var(--main-spacing) 1.2rem;
        font: var(--fontS-con)/1.5 var(--fontF-C1);
    }

    /* input-sle */
    .input-sle {
        width: .14rem;
        height: .14rem;
        line-height: .12rem;
    }

    /* more-list */
    .more-list {
        margin-top: var(--min-spacing);
    }

    /* fixed-bottom */
    .fixed-bottom-2 .ig-currency {
        font-size: var(--fontS-min);
    }

    /* menu */
    .main-menu li.act,
    .main-menu li.act a {
        font-family: var(--fontF-C2);
        font-size: .16rem;
    }

    /* btn */
    .btn-list {
        gap: var(--main-spacing);
    }

    /* pop */
    .s-pop-main {
        padding: .3rem;
        min-width: calc(100% - .32rem);
        max-width: calc(100% - 0.32rem);
    }

    .s-confirm .s-pop-main {
        max-width: calc(100% - 0.32rem);
    }

    .s-pop .s-pop-body {
        min-width: initial;
    }

    .s-pop .s-pop-head {
        margin-bottom: .3rem;
        font-size: .16rem;
        font-family: var(--fontF-C2);
    }

    .s-pop-foot {
        margin-top: .3rem;
    }

    /* payment-way */
    .payment-way-list {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .payment-way-list li {
        position: relative;
        display: block;
        padding: var(--min-spacing) 0;
        background: none;
        border: none;
        border-radius: 0;
    }

    .payment-way-list li:first-child {
        padding-top: 0;
    }

    .payment-way-list li.selected {
        padding-left: 0;
        border: none;
        box-shadow: none;
    }

    .payment-way-list li .input-sle {
        display: block;
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        opacity: 1;
    }

    .payment-way-list li.selected .input-sle {
        background-color: var(--HColor);
    }

    .payment-way-list li.disabled {
        background: none !important;
    }

    .payment-way-list li.disabled .tip {
        position: relative;
        right: auto;
        top: auto;
        margin-top: .04rem;
        border-radius: 0;
    }

    .flex-lr {
        position: relative;
        height: auto;
    }

    .payment-way-name {
        width: 1.7rem;
        height: auto;
    }

    .my-igpoint {
        display: block;
        margin-top: var(--icon-spacing);
        padding: var(--min-spacing);
        background-color: #f7f7f7;
        border-radius: var(--min-fillet);
    }

    .my-igpoint>* {
        justify-content: space-between;
        color: #8B6538;
    }

    .my-igpoint .balance-info {
        margin-bottom: var(--min-spacing);
    }

    .my-igpoint .balance-info a {
        display: flex;
        align-items: center;
        column-gap: .02rem;
        color: #8B6538 !important;
    }

    .my-igpoint .balance-info a .icon {
        font-size: .12rem;
        color: #8B6538;
    }

    .my-igpoint strong {
        padding: 0 .02rem;
        color: var(--HColor);
    }

    .my-igpoint .balance-info p,
    .my-igpoint .balance-menu p {
        display: flex;
        align-items: center;
        column-gap: .04rem;
    }

    .my-igpoint .balance-menu p span {
        display: inline-flex;
        align-items: center;
        column-gap: .04rem;
    }

    .my-igpoint .icon-balance {
        color: var(--HColor);
    }

    .my-igpoint .balance-menu .icon-deduction {
        display: none;
    }

    .my-igpoint .svg-currency {
        width: .18rem;
        height: .18rem;
    }

    .channel-drop .discount-box {
        height: .4rem;
    }

    .channel-drop .discount-box .icon-gift-bag {
        margin-right: .05rem;
        font-size: .16rem;
    }

    .payment-way-list .channel-desc {
        font-size: var(--fontS-min);
    }

    .payment-way-list .channel-desc .icon-directions {
        width: .16rem;
        height: .11rem;
        line-height: .11rem;
        font-size: .1rem;
    }

    /* Login */
    .s-pop.user-dialog .s-pop-main {
        width: 100% !important;
        height: 100%;
        max-height: 100%;
        border-radius: 0;
    }

    .user-dialog .s-pop-body {
        flex-direction: column;
        max-height: 100vh;
    }

    .user-dialog .s-pop-close {
        top: .2rem;
    }

    .user-dialog-pc {
        display: none;
    }

    .user-dialog-wap {
        position: relative;
        display: block;
        width: 100%;
        height: 2.1rem;
        background: url(../../public/svg/login-bg-wap.svg) no-repeat center top;
        background-size: cover;
        overflow: hidden;
    }

    .user-dialog-wap .logo {
        width: 1rem;
        margin: .2rem 0 0 .3rem;
    }

    .user-dialog-wap .svgicon {
        position: absolute;
        right: 0;
        bottom: 0;
        width: 2rem;
        height: 2rem;
    }

    .user-dialog-wap .svg-login-iconbg {
        right: -.28rem;
        bottom: -.36rem;
    }

    .user-dialog-wap .svg-find-pwd-iconbg {
        right: -.4rem;
        bottom: -.84rem;
        width: 2.2rem;
        height: 2.2rem;
    }

    .user-dialog-wap .svg-find-paypwd-iconbg {
        right: -.4rem;
        bottom: -.4rem;
    }

    .user-dialog-wap::after {
        content: '';
        position: absolute;
        left: 0;
        bottom: .2rem;
        width: .46rem;
        height: .46rem;
        background: url(../../public/svg/point-card-solid.svg) no-repeat center;
        background-size: contain;
    }

    .user-dialog .user-panes,
    .login-red-page .user-panes {
        position: relative;
        z-index: 10;
        margin-top: -.4rem;
        padding: .6rem var(--main-padding);
        width: 100%;
        min-height: calc(100vh - 1.7rem);
        background-color: var(--BColor-white);
        box-shadow: 0 0 .16rem rgba(0, 0, 0, .16);
        border-radius: .4rem .4rem 0 0;
        box-sizing: border-box;
    }

    .user-panes .head {
        flex-direction: column;
        align-items: flex-start;
        position: absolute;
        top: -.8rem;
        margin: 0;
        padding: 0;
    }

    .user-panes .head h2 {
        font-family: var(--fontF-C2);
        font-weight: 500;
    }

    .user-panes .head div {
        display: none;
    }

    .user-panes .head div.login-tips {
        display: block;
        margin-top: var(--icon-spacing);
        font-size: .14rem;
    }

    .user-panes .wap-show-btn {
        display: block;
        margin-top: var(--max-spacing) !important;
    }

    .user-panes .flex-x .flex-x-fixed {
        width: 1.3rem;
    }

    .user-panes .login-areas.s-select {
        bottom: 0.06rem;
    }

    .agree-text {
        position: absolute;
        bottom: .3rem;
        left: 0;
        right: 0;
        text-align: center;
    }

    .user-panes .text-list {
        font-size: var(--fontS-con);
    }

    .others-login-way {
        padding-left: var(--min-spacing);
    }
}

@media (max-width: 600px) {
    html {
        font-size: calc(100 * 100vw / 600);
    }

    .s-pop-foot .s-button {
        min-width: 1.2rem;
    }
}

@media (max-width: 450px) {
    html {
        font-size: calc(100 * 100vw / 390);
    }
}

/* ***************************Edit end */

/* S s-loading */
.s-loading {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background: rgba(255, 255, 255, 0);
}

.s-loading-main {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-height: 100%;
    max-width: 100%;
    background: rgba(255, 255, 255, 0.9);
    padding: 1em;
    border-radius: 1em;
}

.s-loading-image {
    width: 100px;
    height: 100px;
    margin: 0 auto;
}

.s-loading-image svg {
    width: 100px;
    height: 100px;
    animation: rotate 0.8s 0.2s infinite linear;
}

@keyframes rotate {
    to {
        transform: rotate(0deg);
    }

    form {
        transform: rotate(360deg);
    }
}

.s-loading-tip {
    text-align: center;
}

/* E s-loading */

/* S s-pop */
.s-cascader-dropdown {
    display: flex;
    max-height: 3.4rem;
    overflow: auto;
}

.s-popper-body .s-cascader-dropdown {
    padding: .3rem 0;
}

.s-cascader-dropdown ul {
    display: grid;
    gap: .16rem;
    padding: 0 .3rem;
    max-height: 100%;
    overflow: auto;
}

.s-cascader-dropdown ul:not(:last-child) {
    display: flex;
    flex-direction: column;
    border-right: 1px solid #EDEDED;
}

.s-cascader-dropdown li {
    display: flex;
    align-items: center;
    gap: .1rem;
    cursor: pointer;
}

.s-cascader-dropdown li:hover {
    color: var(--HColor);
}

.s-cascader-dropdown ul:first-child li {
    padding-left: 0;
}

.s-cascader-dropdown ul:last-child li {
    padding-right: 0;
}

.s-cascader-dropdown li.selected {
    color: #FE4200;
}

.channel-box p,
.channel-tip {
    line-height: 1.8;
}

.channel-box a {
    color: #0256FF;
    cursor: pointer;
}

.channel-box .flex {
    display: flex;
    align-items: center;
    justify-content: center;
}

.channel-box .copy-btn {
    margin-left: var(--min-spacing);
    padding: 0.03rem .06rem;
    line-height: 1;
    color: var(--btnColor-white);
    background-color: var(--MColor-yellow);
    border-radius: 4px;
}

.s-pop-body canvas,
.s-pop-body .code-img {
    margin: .2rem 0;
}

.pop-qrcode .hint-color {
    margin-bottom: 0;
}

.btn-use-app,
.btn-use-qrcode {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.04rem;
}

.btn-use-app,
.btn-use-app .icon,
.btn-use-qrcode,
.btn-use-qrcode .icon {
    color: #3068C1;
}

.box-btns a {
    cursor: pointer;
}

.box-btns .icon {
    font-size: .18rem;
}

.powered-by {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.04rem;
    margin-top: 0.16rem;
    font-size: .11rem;
}

.powered-by img {
    margin-top: .03rem;
    width: .8rem;
}

.pay-img-box {
    margin: .2rem auto;
    width: 2rem;
}

.pay-tips {
    text-align: left;
}

.paypal-confirm {
    display: grid;
    gap: .1rem;
    margin-bottom: .2rem;
}

.ckopay-pop-box {
    padding: 0 0.04rem;
    max-width: 4.6rem;
    text-align: left;
}

.user-card-tips {
    display: flex;
    align-items: center;
    gap: .08rem;
    margin-bottom: .14rem;
    color: #3068C1;
}

.user-card-tips .icon {
    color: #3068C1;
}

.user-ordes-info {
    display: grid;
    gap: .1rem;
    padding: .1rem;
    margin-bottom: .14rem;
    background-color: var(--BColor-grey);
    border-radius: 4px;
}

.is-card-box {
    position: relative;
}

.user-ordes-info li {
    display: flex;
    justify-content: space-between;
}

.user-ordes-info li em {
    color: var(--SColorGrey-g1);
}

.user-card-list .is-item-title {
    margin-bottom: .1rem;
}

.user-card-list .sle-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: .16rem;
    padding: .06rem .1rem;
    border: var(--border);
    border-radius: 4px;
}

.user-card-list .card-list {
    position: absolute;
    left: 0;
    top: .4rem;
    z-index: 10;
    width: 100%;
    height: 0;
    max-height: 1.2rem;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 0 6px #dbdbdb;
    overflow: hidden;
    transition: all .6s ease;
}

.user-card-list .card-list.act {
    height: auto;
    overflow: overlay;
}

.is-card-box .card-list li {
    display: flex;
    align-items: center;
    gap: .16rem;
    padding: .06rem .1rem;
}

.user-card-list .card-img {
    width: .32rem;
}

.user-card-list .icon {
    position: absolute;
    right: .1rem;
    top: 50%;
    transform: translateY(-50%);
}

.user-new-pay {
    margin-top: .2rem;
    padding: .06rem .1rem;
    text-align: center;
    color: var(--HColor);
    border: 1px dashed var(--LColor);
}

.ckopay-pop-box .s-button {
    margin: .2rem 0 0;
    width: 100%;
    text-align: center;
    border-radius: 4px;
}

.ckopay-pop-box .c-imp {
    display: grid;
    gap: .06rem;
    margin-top: var(--max-spacing);
}

.ckopay-pop-box .c-imp h4 {
    font-weight: 500;
}

.ckopay-pop-box .c-imp ul {
    display: grid;
    gap: .02rem;
}

.user-card-list .icon-sle {
    color: var(--sucColor);
}

#ckoForm {
    display: grid;
    gap: .1rem;
}

#ckoForm iframe {
    padding: .06rem .1rem !important;
    box-sizing: border-box;
    max-height: .36rem;
    border: var(--border) !important;
    border-radius: 4px;
}

#ckoForm .input-container em {
    display: block;
    margin-bottom: .08rem;
}

.s-pop .hint-color {
    display: block;
    margin-bottom: var(--min-spacing);
    font-size: var(--fontS-min);
    text-align: left;
}

.s-pop .channel-box .hint-color {
    display: inline-block;
    color: var(--HColor);
}

.box-btns {
    margin-top: var(--max-spacing);
}

.payme_btn {
    display: block;
    margin: var(--min-spacing) auto 0;
    width: 1.8rem;
}

.view-kami .pop-main-form p {
    text-align: left;
}

.view-kami .info-list {
    gap: var(--min-spacing);
    margin-bottom: var(--min-spacing);
    padding: .16rem;
    background-color: var(--BColor-grey);
    border-radius: var(--min-fillet);
}

.view-kami .info-list li {
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--min-spacing);
}

.view-kami .info-list li .icon-copy {
    margin-left: var(--min-spacing);
    cursor: pointer;
}

.pop-plain-text {
    margin-bottom: var(--main-spacing);
}

.giftpack-detail-text {
    text-align: left;
}

.pop-plain-text span {
    color: var(--SColorGrey-g1);
    font-size: var(--fontS-min);
}

.s-pop-body .form-item {
    text-align: left;
}

.pop-main-form {
    display: grid;
    gap: .16rem;
    text-align: left;
}

.pop-main-form .form-item {
    margin-bottom: 0;
}

.pop-gameinfo .info-list {
    justify-content: flex-start;
}

.pop-gameinfo .form-item-head {
    color: var(--SColorGrey-g1);
}

/* E s-pop */

/* S S-form */
input,
textarea,
select {
    padding: .08rem .1rem;
    width: 100%;
    outline: none;
    border-radius: var(--min-fillet);
    border: var(--border);
    background-color: var(--BColor-white);
    box-sizing: border-box;
    -webkit-appearance: none;
    transition: all .4s ease;
}

input::placeholder,
textarea::placeholder {
    color: var(--SColorGrey-g2);
}

input:focus-visible,
textarea:focus-visible {
    border-color: var(--MColor-black);
    outline: none;
    box-shadow: 0 0 8px rgba(0, 0, 0, .08);
}

input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 400px var(--BColor-white) inset;
}

.s-input {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.s-input input {
    flex-grow: 10;
    height: 100%;
}

.s-select .s-input {
    padding: 0.08rem 0.1rem;
    width: 100%;
    border-radius: var(--min-fillet);
    border: var(--border);
    background-color: var(--BColor-white);
    box-sizing: border-box;
    transition: all .4s ease;
    cursor: pointer;
}

.s-select .s-input .s-input-body input {
    padding: 0;
    border: none;
}

.s-select .s-input .s-input-body input:focus-visible {
    box-shadow: none;
}

.s-select-head {
    white-space: nowrap;
}

.s-select-list {
    max-height: 20em;
    overflow: auto;
}

.s-select-list li {
    padding: .1rem;
    cursor: pointer;
    white-space: nowrap;
    border-radius: 4px;
}

.s-select-list li:hover {
    background: var(--BColor-grey);
}

.s-tab-navs li.active:hover {
    color: #5e5e5e;
}

.s-select-list .empty {
    color: #ccc;
}

.s-popper-body {
    opacity: 0;
    transition: all 0.3s;
    background: var(--BColor-white);
    box-shadow: 1px 1px 10px #ccc;
    border-radius: .1rem;
}

.s-popper-body.active {
    opacity: 1;
}

.s-popper-body>* {
    padding: 0.16rem;
    min-width: 1.3rem;
}

.form-s .s-input {
    flex-grow: 10;
    height: 100%;
    border: none;
}

.form-s>ul>li {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .1rem 0;
    margin-bottom: .26rem;
    min-width: 3.2rem;
    width: auto;
    border-bottom: var(--border);
    transition: top .3s ease;
}

.form-s>ul>li em {
    position: absolute;
    top: 0;
    font-size: 0;
    color: rgba(255, 255, 255, 0);
    transition: top .3s ease;
}

.form-s>ul>li:focus-within {
    border-color: var(--HColor);
    transition: top .3s ease;
}

.form-s>ul>li:focus-within em {
    top: -12px;
    font-size: 12px;
    color: #ff6b51;
    transition: top .3s ease;
    font-style: normal;
}

.icon-clear {
    font-size: .18rem;
    color: #ddd;
}

.drop-history li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.3rem;
}

.drop-history li:not(:last-child) {
    margin-bottom: .2rem;
}

.s-bubble {
    opacity: 0;
    transition: all 0.3s linear;
}

.s-bubble.active {
    opacity: 1;
}

.s-bubble .s-pop-main {
    min-width: auto;
    background: var(--BColor-white);
    border-radius: .08rem;
    padding: .2rem .3rem;
}

.search-input.s-input input {
    padding: 0;
    background: none;
    border: none;
}

.search-input.s-input input:focus-visible {
    box-shadow: none;
}

.s-input input:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 400px #fff inset;
}

.s-checkbox {
    display: flex;
    align-items: center;
    text-align: left;
    cursor: pointer;
}

.s-checkbox::before {
    content: ' ';
    display: block;
    box-sizing: border-box;
    margin-right: .1rem;
    width: .14rem;
    height: .14rem;
    background-color: var(--LColor);
    border-radius: 100%;
    transition: all .2s ease-in;
}

.s-checkbox.checked::before {
    border: none !important;
    background: center #ff4626 url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjIwMCIgaGVpZ2h0PSIyMDAiPjxwYXRoIGQ9Ik05MTcuODMzMTQzIDMxMC4zMDg1NzFMNDI2LjQ5NiA4MDEuNjQ1NzE0bC0zMTAuMzA4NTcxLTMxMC4zMDg1NzEgOTguMjY3NDI4LTk4LjI2NzQyOSAyMDYuODg0NTcyIDIwNi44NDhMODE0LjQ0NTcxNCAyMDYuODg0NTcxeiIgZmlsbD0iI2ZmZmZmZiI+PC9wYXRoPjwvc3ZnPg==) !important;
    background-size: contain !important;
}

.s-checkbox a {
    color: #3068C1;
}

.s-input-body {
    flex-grow: 10;
    position: relative;
    text-align: left;
    display: flex;
}

.s-input-clear {
    position: absolute;
    right: .1rem;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
}

.pwd-input .s-input-clear {
    right: .36rem;
}

.s-input-suffix-icon {
    position: absolute;
    right: .1rem;
    top: 50%;
    transform: translateY(-50%);
    line-height: 1;
}

.s-input .icon {
    color: var(--SColorGrey-g2);
}

.igbpoint-pwd input[type="password"] {
    -webkit-text-security: disc;
    text-security: disc;
    letter-spacing: .26rem;
    text-indent: 0.26rem;
    text-align: center;
    font-size: .18rem;
}

.forget-pwd {
    margin-top: .06rem;
    text-align: right;
}

.forget-pwd a {
    color: var(--MColor-yellow);
    cursor: pointer;
}

.input-box {
    position: relative;
    padding: .08rem .1rem;
    border-radius: var(--min-fillet);
    border: var(--border);
    background-color: var(--BColor-white);
    box-sizing: border-box;
}

textarea {
    height: .66rem;
    resize: none;
}

button {
    background: none;
    outline: none;
    border: none;
}

.combine {
    display: grid;
    grid-template-columns: 1.1rem auto;
    gap: var(--min-spacing);
}

.verification {
    display: grid;
    grid-template-columns: auto auto;
    gap: var(--min-spacing);
}

.form-box>* {
    position: relative;
    display: grid;
    grid-template-columns: 0.56rem auto;
    gap: var(--min-spacing);
    margin-bottom: .16rem;
    align-items: center;
}

.form-btn-list {
    display: flex;
    justify-content: center;
    margin-top: .3rem;
}

.form-btn-list>* {
    margin: 0 .08rem;
}

.code-item {
    display: grid;
    grid-template-columns: auto 1rem;
    gap: var(--min-spacing);
    align-items: center;
}

.combine .icon-drop-down {
    position: absolute;
    right: var(--min-spacing);
    top: 52%;
    transform: translateY(-50%);
    font-size: var(--fontS-min);
    transition: all .4s ease-in;
}

.combine .icon-drop-down.act {
    transform: translateY(-50%) rotate(180deg);
}

.form-box input:focus-visible,
.form-box input:active,
.form-box textarea:focus-visible,
.form-box textarea:active {
    border: 1px solid #461E00;
    box-shadow: var(--whiteBg-shadow);
}

.s-checkbox .sle-btn {
    margin-right: .08rem;
}

.checked .sle-btn {
    background-color: var(--HColor);
    transition: all .4s ease;
}

.checked .sle-btn .icon-sle {
    opacity: 1;
    color: var(--btnColor-white);
}

.s-checkbox a {
    color: #0256FF;
}

.is-checked::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
    width: .08rem;
    height: .06rem;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAICAYAAADA+m62AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyFpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDE0IDc5LjE1MTQ4MSwgMjAxMy8wMy8xMy0xMjowOToxNSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QzNFRUQzNkE0Njk5MTFFOEEyREFGQzYyMzQyOTQxNjgiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QzNFRUQzNjk0Njk5MTFFOEEyREFGQzYyMzQyOTQxNjgiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjE0QzNGN0JEQTRCNDExRTZBQkMzRkIzMkM1QkIzRUM1IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjE0QzNGN0JFQTRCNDExRTZBQkMzRkIzMkM1QkIzRUM1Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+qUYqPgAAAHxJREFUeNpi+P//PwMeHAzEM4CYl4UBN3AA4kVAzAXELCBdTEAcA8RCSCa5AvGv/xDwD4jDQIKzoQLboIqMgfgdVOwHEPuAxEES8/4jwB4gfgJlfwdiT5gtMKvm/kcFIOsCkD2G7MPFUEW/gdgPPQTQg2MqEMdiCyqAAAMAnkjsEdbpHtwAAAAASUVORK5CYII=) no-repeat center;
}

.form-item {
    display: grid;
    grid-template-columns: .56rem auto;
    gap: .16rem;
    align-items: center;
    margin-bottom: .16rem;
}

.form-item .s-input {
    width: 100%;
}

.code-flex {
    display: grid;
    grid-template-columns: 1fr 1.3rem;
    gap: .16rem;
}

.code-flex .s-button {
    padding: 0.06rem 0.1rem;
    text-align: center;
    line-height: 1.8;
    border-radius: var(--min-fillet);
}

/* E S-form */

/* S buy-num */
.s-input.buy-num {
    column-gap: var(--min-spacing);
    padding: 0 var(--min-spacing);
    height: auto;
    background-color: var(--BColor-grey);
    border-radius: 50px;
    box-sizing: border-box;
}

.s-input.buy-num * {
    display: flex;
    align-items: center;
}

.s-input.buy-num input {
    padding: .02rem 0;
    text-align: center;
    border: none;
    background: none;
}

.s-input.buy-num .s-input-clear {
    display: none;
}

.s-input.buy-num input:focus-visible {
    box-shadow: none;
}

.s-input.buy-num .s-input-suffix-icon {
    position: relative;
    right: auto;
    top: auto;
    transform: none;
}

/* E buy-num */

.page-loading {
    padding-top: 30vh;
    font-size: 2em;
    position: fixed;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    background: #ffffffcc;
}

.page-loading::before {
    display: block;
    content: ' ';
}

/* S pay-result-page */
.pay-result-detail {
    padding: var(--main-spacing);
    margin: 0 auto;
    background-color: var(--BColor-white);
    border-radius: var(--min-fillet);
}

.pay-result-detail.pay-result-load {
    background: none;
}

.pay-result-tips {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .04rem;
}

.pay-result-img {
    position: relative;
    line-height: 1;
}

.pay-result-img .svgicon {
    width: .86rem;
    height: .86rem;
}

.pay-result-tips h4 {
    font-family: var(--fontF-C2);
    font-size: var(--fontS-title);
    font-weight: 500;
}

.pay-result-load .pay-result-tips {
    background: none;
}

.pay-result-load .load-animation {
    display: block;
    position: absolute;
    left: 0.06rem;
    bottom: 0.06rem;
    width: .28rem;
    height: .28rem;
    border-radius: 100%;
    background-color: var(--MColor-yellow);
}

.pay-result-load .load-animation::after {
    content: "";
    display: block;
    position: absolute;
    left: 50%;
    top: .08rem;
    transform: translateX(-50%);
    width: .02rem;
    height: .08rem;
    background-color: var(--BColor-white);
    border-radius: .1rem;
}

.pay-result-load .load-animation::before {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    left: .14rem;
    transform: translateY(-50%);
    width: .1rem;
    height: .02rem;
    background-color: var(--BColor-white);
    border-radius: .1rem;
    animation: rotate 4s linear infinite;
    transform-origin: left;
}

@keyframes rotate {
    50% {
        transform: rotate(360deg);
    }
}

.cutaway-bg .info-list {
    padding-top: var(--main-spacing);
    border-top: 1px dashed var(--LColor);
}

.cutaway-bg {
    position: relative;
    margin-top: var(--max-spacing);
}

.cutaway-bg::after,
.cutaway-bg::before {
    content: '';
    position: absolute;
    top: -0.08rem;
    width: 0.08rem;
    height: 0.16rem;
    background-color: var(--BColor-grey);
    border-radius: 0 100px 100px 0;
}

.cutaway-bg::after {
    left: -.16rem;
}

.cutaway-bg::before {
    right: -.16rem;
    transform: rotate(180deg);
}

.pay-result-detail .btn-list {
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    margin-top: var(--main-margin);
    display: inline-grid;
}

/* E pay-result-page */

/* S sle-area */
.sle-area .svgicon {
    width: .2rem;
    height: .2rem;
}

.sle-area {
    display: flex;
    align-items: center;
    gap: var(--min-spacing);
}

.sle-area .icon-arrow-down {
    margin-top: .02rem;
}

/* E sle-area */

/* S 404 */
.null-page {
    padding-top: 10%;
    width: 100%;
    height: 100vh;
    background: url(../svg/404bg.svg) no-repeat center top;
    background-size: 100% auto;
    box-sizing: border-box;
}

.null-page .con-null {
    margin: 0;
    font-size: .24rem;
    color: var(--SColorGrey-g1);
    font-weight: 500;
    line-height: 1.8;
}

.con-null .svgicon.svg-404 {
    margin: 0 auto;
    width: 4.86rem;
    height: 2.78rem;
    background-image: url(../svg/404.svg);
}

.null-page .s-button {
    margin-top: .2rem;
    padding: .06rem .3rem;
    font-size: .16rem;
}

/* E 404 */

/* S skeleton */
.skeleton {
    cursor: none;
    pointer-events: none
}

.skeleton.skeleton-gap-min {
    gap: 0;
}

.skeleton-list>*:not(:last-child) {
    margin-right: 1.5rem;
}

.skeleton-gap-min>*:not(:last-child) {
    margin-right: .8rem;
}

.skeleton-item {
    border: none !important;
}

.skeleton-line,
.skeleton-image,
.skeleton-text,
.skeleton-button,
.skeleton-checkbox,
.skeleton-icon {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 37%, #f0f0f0 63%);
    background-size: 400% 100%;
    animation: skeleton-loading 1.4s linear infinite;
    border-radius: var(--min-fillet);
}

.skeleton-image {
    display: block;
}

.skeleton-text {
    display: block;
    flex: 1;
    width: 100%;
    height: .3rem;
    border-radius: .06rem;
    box-sizing: border-box;
}

li.skeleton-text::after {
    display: none !important;
}

.skeleton-button {
    display: block;
    min-width: 1.2rem;
    height: .3rem;
    border-radius: 50px;
}

.skeleton-checkbox {
    display: block;
    width: .16rem;
    height: .16rem;
    border-radius: 100%;
}

.skeleton-line {
    display: block;
    height: .3rem;
    border-radius: .06rem
}

.skeleton-box {
    background-color: var(--BColor-white);
    box-shadow: var(--whiteBg-shadow);
}

.skeleton-icon {
    display: block;
    width: .22rem;
    height: .22rem;
    border-radius: .04rem;
}

.skeleton-grid-a-row *:not(:last-child) {
    margin-bottom: var(--min-spacing);
}

.skeleton-grid-a-row * {
    clear: both;
}

.skeleton-flex {
    display: flex;
    align-items: center;
}

.skeleton-flex>*:not(:last-child) {
    margin-right: var(--min-spacing);
}

@keyframes skeleton-loading {
    from {
        background-position: 100% 50%
    }

    to {
        background-position: 0 50%
    }
}

/* E skeleton */

/* S logistics */
.logistics-info {
    padding-right: var(--min-spacing);
    max-width: 6rem;
    min-width: 4rem;
    min-height: 1rem;
}

.logistics-order-num {
    display: flex;
    align-items: center;
}

.logistics-order-num p {
    display: flex;
    align-items: center;
}

.logistics-order-num p>* {
    margin-right: .06rem;
}

.logistics-order-num .svgicon {
    width: .16rem;
    height: .16rem;
}

.logistics-order-num .copy {
    padding: .04rem .14rem;
    margin-left: .3rem;
    line-height: 1;
    font-size: var(--fontS-min);
    color: #333;
    border: var(--border);
    border-radius: .04rem;
    cursor: pointer;
    transition: var(--animation);
}

.logistics-order-num .copy:hover {
    border-color: var(--SColorGrey-g2);
    color: #000;
}

.logistics-status {
    margin-top: .2rem;
}

.logistics-status ul {
    position: relative;
    display: grid;
    gap: .14rem;
    padding-left: .2rem;
    text-align: left;
    font-size: var(--fontS-min);
}

.logistics-status li {
    position: relative;
    display: grid;
    gap: .02rem;
    color: var(--SColorGrey-g1);
}

.logistics-status li::after {
    content: '';
    display: block;
    position: absolute;
    left: -.2rem;
    top: .08rem;
    z-index: 1;
    margin-right: var(--min-spacing);
    width: .11rem;
    height: .11rem;
    background-color: #D8D8D8;
    border-radius: 100%;
}

.logistics-status li:not(:last-child)::before {
    content: "";
    position: absolute;
    left: -.15rem;
    top: .1rem;
    width: 1px;
    height: calc(100% + .14rem);
    background-color: #f5f5f5;
}

.logistics-status li.act::after {
    background-color: #FD9309;
}

.logistics-status li h4 {
    display: flex;
    align-items: baseline;
}

.logistics-status li strong {
    margin-right: .06rem;
    font-weight: 500;
    font-size: var(--fontS-con);
}

.logistics-status .yellow-text {
    color: #FD9309;
}

.logistics-status ul>li.act {
    color: var(--MColor-black);
}

.logistics-status li.act h4 {
    color: #FD9309;
}

.logistics-status ol {
    display: grid;
    gap: .14rem;
    margin-top: .12rem;
}

.logistics-status ol li::after {
    left: -.2rem;
    width: .09rem;
    height: .09rem;
}

/* E logistics */

@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {

    .user-panes .form-s .head,
    .user-panes .sec-login .head {
        display: flex;
    }

    .others-text {
        display: none;
    }

    .others-login-way {
        flex-direction: column;
    }

    .others-login-way .others-text-m {
        width: 80%;
        background-color: var(--btnColor-white);
    }

    .others-login-way .others-text-m span {
        padding: 0 .12rem;
        line-height: .3rem;
        background-color: var(--btnColor-white);
    }

    .others-login-way .others-text-m::after {
        content: ' ';
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        z-index: 1;
        height: 1px;
        background-color: #F5F4F9;
    }

    .others-login-way ul {
        margin-top: .06rem;
    }
}

@media only screen and (min-device-width : 768px) and (max-device-width : 1366px) and (orientation : landscape) {

    .user-panes .form-s .head,
    .user-panes .sec-login .head {
        display: flex;
    }
}

@media (max-width: 900px) {

    /* S 404 */
    .null-page {
        padding-top: 20%;
        width: 100%;
        height: 100%;
        background-size: 140% auto;
    }

    .null-page .con-null {
        font-size: .2rem;
    }

    .con-null .svgicon.svg-404 {
        width: 3rem;
        height: 1.72rem;
    }

    /* E 404 */

    /* S Edit */
    .popup-receipt-preview.s-pop .receipt-logo img {
        width: 1.1rem;
    }

    .popup-receipt-preview .receipt-box {
        font-size: .1rem !important;
    }

    .fixed-bottom-2 .s-button {
        font-size: .14rem;
    }

    .fixed-bottom-2.redeem-fixed-bottom .s-button {
        position: relative;
        top: auto;
        right: auto;
        padding: .14rem;
    }

    .user-panes {
        min-width: initial;
    }

    /* E Edit */

    /* S skeleton */
    .skeleton-checkbox {
        width: .14rem;
        height: .14rem;
    }

    .skeleton-line,
    .skeleton-text {
        height: .22rem;
    }

    .skeleton-icon {
        display: block;
        width: .18rem;
        height: .18rem;
        border-radius: .04rem;
    }

    /* E skeleton */

    .logistics-order-num {
        justify-content: space-between;
    }

    /* S paymen */
    .payTips {
        font-size: .11rem;
        color: #F43F00;
        border: .5px solid #F43F00;
        background: rgba(244, 63, 0, .05);
    }

    .channel-drop .discount-box::after,
    .channel-drop .discount-box::before {
        width: .14rem;
        height: .14rem;
    }

    /* E paymen */

    .logistics-info {
        max-width: 100%;
        min-width: inherit;
    }

    .logistics-status li::after {
        top: .06rem;
    }
}

@media (max-width: 320px) {
    .form-item {
        grid-template-columns: 0.6rem auto;
        gap: .04rem;
    }

    .roleinfo .form-item em {
        min-width: 0.6rem;
    }

    .s-cascader-dropdown {
        max-height: 2.4rem;
    }
}