@charset "UTF-8";
.charge-wrapper {padding:40px 170px;}

.need-login-block {font-size:var(--font-l);}
.need-login-block .login-button {
    width:150px;display:inline-block;text-align:center;
    border:1px solid var(--color-line-gray);
    padding:.6rem 0;cursor:pointer;
    margin-left:1rem;
}
.need-login-block .login-button:hover {border-color:var(--color-theme);}

.user-info-block {border-bottom:1px solid var(--color-line-gray);padding:20px 140px;display:flex;justify-content:space-between;align-items:center;}
.user-info-block .user-info {display:flex;}
.user-info-block .user-info span:nth-child(2) {margin-left:3em;position:relative;}
.user-info-block .user-info span:nth-child(2)::before {display:block;content:'';width:1px;height:1em;background-color:var(--color-line-gray);position:absolute;left:-1.5em;top:3px;}
.user-info-block a {border:1px solid var(--color-line-gray);padding:.75em 1.5em;}
.user-info-block a:hover {border-color:var(--color-theme);}
.user-info-block .red {color:red;}
.user-info-block .green {color:green;}

.charge-form-block {padding:60px 140px 60px;border-bottom:1px solid var(--color-line-gray);}

.charge-amount-list {display:flex;}
.charge-amount-list span {
    flex:1;max-width:120px;margin-left:20px;
    display:flex;align-items: center;justify-content: center;
    border:1px solid var(--color-line-gray);
    padding:1rem 0;cursor:pointer;
}
.charge-amount-list span.selected{border-color:var(--color-theme);position:relative;}
.charge-amount-list span.selected::after {
    content:'\f00c';display:block;font-family:fontawesome;
    background-color:var(--color-theme);color:#fff;
    position:absolute;right:0;top:0;padding:1px;font-size:.75rem;
}

.charge-amount-list span:hover {border-color:var(--color-theme);}
.charge-amount-list span:first-child {margin-left:0;}
.charge-amount-input {margin-top:20px;display:flex;align-items:center;}
.charge-amount-input input[type="text"] {
    border:1px solid var(--color-line-gray);
    font-size:var(--font-l);padding:1rem;
}
.charge-amount-input .charge-rate {display:none;margin-left:1rem;}
.charge-amount-input .charge-rate .point {color:#d00000;font-size:1.25rem;}
.charge-notice {margin-top:20px;}

.charge-type-list {margin-top:30px;display:flex;}
.charge-type-list span {
    flex:1;max-width:210px;margin-left:20px;font-size:var(--font-l);
    display:flex;align-items: center;justify-content: center;
    border:1px solid var(--color-line-gray);
    padding:10px 0;cursor:pointer;    
}
.charge-type-list span:first-child {margin-left:0;}
.charge-type-list span:hover {border-color:var(--color-theme);}
.charge-type-list span.wechat::before {content:'';display:block;width:43px;height:37px;background-image:url('../images/charge/charge-wechat.png');background-repeat:no-repeat;margin-right:12px;}
.charge-type-list span.alipay::before {content:'';display:block;width:37px;height:37px;background-image:url('../images/charge/charge-alipay.png');background-repeat:no-repeat;margin-right:12px;}
.charge-type-list span.yinsheng::before {content:'';display:block;width:48px;height:48px;background-image:url('../images/charge/charge-yinsheng.png');background-repeat:no-repeat;margin-right:12px;}
.charge-type-list span.selected {position:relative;border-color:var(--color-theme);}
.charge-type-list span.selected::after {
    content:'\f00c';display:block;font-family:fontawesome;
    background-color:var(--color-theme);color:#fff;
    position:absolute;right:-1px;top:-1px;padding:1px;font-size:.75rem;
}

.submit-button-block {display:flex;flex-direction:column;align-items:center;margin-top:1em;}
.submit-button-block .pay-submit-button {color:#fff;background-color:#d00000;padding:15px 140px;font-size:var(--font-xl);cursor:pointer;}
.submit-button-block .pay-submit-button:hover {filter:brightness(1.1);}
.submit-notice {margin-top:2em;padding:0 100px;}
.submit-notice p {margin:.2em 0;padding:.2em 0;}



.pay-info-wrapper {width:750px;margin:0 auto;}
.pay-info-top {display:flex;justify-content:center;align-items:center;font-size:1.2rem;padding:.5rem 0;}
.pay-info-top .type {position:relative;display:flex;align-items:center;}
.pay-info-top .wechat::before {content:'';display:block;width:43px;height:37px;background-image:url('../images/charge/charge-wechat.png');background-repeat:no-repeat;margin-right:12px;}
.pay-info-top .alipay::before {content:'';display:block;width:37px;height:37px;background-image:url('../images/charge/charge-alipay.png');background-repeat:no-repeat;margin-right:12px;}

.pay-info-top .desc {margin-left:1em;color:#aaa;}

.pay-info-qrcode-info {display:flex;margin-top:50px;}
.pay-info-qrcode-info .pay-info-qrcode-wrapper {width:50%;border-right:1px dashed #ddd;display:flex;flex-direction:column;align-items:center;padding:10px 0;}
.pay-info-qrcode-info .pay-info-time-remain {color:#999;}
.pay-info-qrcode-info .pay-info-time-remain .time {font-size:1.2em;color:#000;margin-left:.5em;}
.pay-info-qrcode-info .pay-info-qrcode {margin-top:1rem;display:flex;position:relative;}
.pay-info-qrcode-info .pay-info-qrcode.pay::after {
    content:'\f00c';display:flex;align-items:center;justify-content:center;
    position:absolute;width:100%;height:100%;
    background-color:rgba(255,255,255,.5);
    font-size:6em;color:rgba(100,200,100,.75);font-family:fontawesome;
}

.pay-info-qrcode-info .pay-info-scan {margin-top:.5rem;background:url('/images/charge/pay-scan.png') no-repeat left center;background-size:30px 30px;padding-left:40px;height:40px;line-height:40px;}
.pay-info-qrcode-info .pay-warn {margin-top:.5rem;color:#e02a00;}
.pay-info-qrcode-info .pay-info-detail {width:50%;padding:10px 0 10px 75px;display:flex;flex-direction:column;}
.pay-info-qrcode-info .money {flex:auto;font-size:2em;margin-top:1.5rem;}
.pay-info-qrcode-info .money .num {font-size:2em;}
.pay-info-qrcode-info .details {display:flex;flex-direction:column;flex:none;}
.pay-info-qrcode-info .details dl {display:flex;list-style:none;margin:1rem 0 0;padding:0;}
.pay-info-qrcode-info .details dl:first-child {margin:0;}
.pay-info-qrcode-info .details dt {margin:0;padding:0;color:#999;width:6em;flex:none;}
.pay-info-qrcode-info .details dd {margin:0;padding:0;}


/* order suc */
.charge-suc-wrapper {display:flex;flex-direction:column;align-items:center;padding:100px 0;}
.charge-suc-info {width:370px;}
.charge-suc-info h3 {font-weight:normal;margin:0;padding:0;font-size:var(--font-xxl);position:relative;}
.charge-suc-info h3::before {content:'\f058';position:absolute;font-size:1.75em;left:-1.25em;top:-.15em;font-family:FontAwesome;color:#978778;}
.charge-suc-info .info-detail {margin-top:2em;}
.charge-suc-info .info-detail dl {display:flex;list-style:none;padding:.25em 0;}
.charge-suc-info .info-detail dt {width:4rem;flex:none;margin:0;padding:0;color:#848484;}
.charge-suc-info .info-detail dd {margin:0 0 0 30px;padding:0;}

.charge-suc-info .info-buttons {display:flex;justify-content:space-between;margin-top:2em;}
.charge-suc-info .info-buttons a {width:45%;text-align:center;font-size:var(--font-l);padding:.5em 0;}
.charge-suc-info .info-buttons a.button-charge-info {background-color:var(--color-theme);color:#fff;}
.charge-suc-info .info-buttons a.button-charge-info:hover {background-color:var(--color-theme-dark);}
.charge-suc-info .info-buttons a.button-go-shopping {border:1px solid var(--color-layer-button-gray);}
.charge-suc-info .info-buttons a.button-go-shopping:hover {border-color:#aaa;}

.charge-suc-saying {
    width:800px;height:253px;margin-top:90px;
    padding:45px 80px;
    display:flex;justify-content:space-between;flex-direction:column;
    background-position:center;
    background-repeat:no-repeat;
    background-size:cover;
    
    position:relative;
}
.charge-suc-saying::before {
    content:'';position:absolute;z-index:-1;width:798px;height:235px;
    left:1px;top:9px;box-shadow:0 0 1em rgba(0,0,0,.25);transition:var(--transition);
}
.charge-suc-saying.bg-01 {background-image:url('../images/saying/bg-01.png');}
.charge-suc-saying.bg-02 {background-image:url('../images/saying/bg-02.png');}
.charge-suc-saying.bg-03 {background-image:url('../images/saying/bg-03.png');}

.charge-suc-saying p {margin:0;padding:0;font-size:20px;font-family:stkaiti;line-height:1.5em;}
.charge-suc-saying p.author {text-align:right;}