@import "common.css";

html,body {
    padding:0;margin:0;
    font-family: "PingFang SC","Helvetica Neue","Helvetica","Hiragino Sans GB","Microsoft YaHei","Arial","sans-serif";
    background:var(--background);
    color:var(--text);
    text-rendering:optimizeLegibility;
    font-size:12px;
}

/* index page */
.content-wrapper.intro {
    padding:5.2rem 0 4rem 0;background:var(--wrapper-background);
    .intro {
        .text {font-size:2.4rem;padding:6.4rem 0 1rem 0;}
        .tag-wrapper {
            padding:2rem 0;
            .item {display:inline-block;background:rgba(var(--secondary-rgb), 0.25);padding:0.5rem 1.2rem;margin:0 1rem;border-radius:0.2rem;font-size:1.02rem;}
        }
    }
    .link-wrapper {
        padding-top:3rem;
        .link {height:2.8rem;line-height:2.8rem;margin:0 1.4rem;padding:0 1.6rem;border:0.1rem solid rgba(var(--secondary-rgb), 0.35);border-radius:0.3rem;}
        .link:hover {background:var(--primary);color:var(--background);}
        .link img {width:1.8rem;height:1.8rem;}
        .link span {padding-left:0.5rem;font-size:1.26rem;}
    }
}

.content-wrapper.feature {
    padding:4rem 0 4rem 0;background:var(--background);
    .feature {
        padding-top:3rem;
        .item {width:35%;text-align:left;flex-grow:1;border:0.1rem solid rgba(var(--primary-rgb),0.35);
            border-radius:0.3rem;overflow:hidden;padding:1.8rem 1.2rem;box-sizing:border-box;
            background:linear-gradient(0deg,var(--wrapper-background),var(--background));
        }
        .item.lm {margin-right:2.5rem;}
        .item .label {
            color:var(--text);margin:0;padding:0.5rem 0 1.6rem 0;font-size:1.4rem;
            .iconfont {padding-right:0.8rem;}
        }
        .item .desc {color:var(--secondary);font-size:1.2rem;line-height:2.4rem;}
        .item .link {
            margin-top:2rem;
            a {display:inline-block;position:relative;font-size:1.05rem;color:var(--primary);}
            a .iconfont {position:relative;top:0.25rem;left:0;}
            a:hover {text-decoration:underline;}
        }
    }
}

.content-wrapper.lang {
    background:var(--background);padding:2rem 0 3rem 0;
    .lang {padding-top:3rem;}
    .lang-table {
        width:100%;border-radius:0.3rem;overflow:hidden;border:0.1rem solid rgba(var(--primary-rgb), 0.35);
        .td {border-top:0.1rem solid rgba(var(--primary-rgb), 0.35);border-left:0.1rem solid rgba(var(--primary-rgb), 0.35);
            text-align:left;padding:1rem 1.6rem;font-size:1.2rem;
        }
        .th {font-weight:bold;}
        tr:first-child .td {border-top:none;}
        tr:last-child .td {border-bottom:none;}
        .td:first-child {border-left:none;}
        .td.lang {font-size:1.24rem;}

        a {color:var(--primary);text-decoration:none;}
        a:hover {text-decoration:underline;}

        .done {
            position:relative;overflow:hidden;
            .author {display:inline-block;width:10.4rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:1.26rem;}
            .doc {margin-left:2rem;}
            .doc .iconfont {padding-right:0.5rem;}
        }
    }
    .space {height:3rem;}
}

/* products page */
.content-wrapper.offline {
    padding-top:5.2rem;
    background:var(--wrapper-background);
    .intro {
        padding:4rem 0 2rem 0;text-align:left;
        background:url('/static/image/svg/gray.png') no-repeat;background-size:17.2rem auto;background-position:bottom 0rem right 12rem;
        .label {font-size:2.2rem;padding-bottom:2.4rem;}
        .desc {font-size:1.3rem;width:56.5rem;line-height:2.4rem;color:rgba(var(--text-rgb), 0.75);letter-spacing:0.12rem;}
    }
}

.content-wrapper.solutions {
    background:var(--background);padding:4rem 0 6rem 0;
    .products {
        padding-top:1rem;
        .item {
            position:relative;width:35%;text-align:left;
            flex-grow:1;border:0.1rem solid rgba(var(--primary-rgb),0.35);
            border-radius:0.3rem;overflow:hidden;padding:1.8rem 1.2rem;box-sizing:border-box;
            background:linear-gradient(0deg,var(--wrapper-background),var(--background));
            .name {font-size:2.0rem;margin-bottom:1.2rem;color:var(--primary);}
            .price {font-size:1.6rem;padding:0.5rem 0 1.4rem 0;border-bottom:0.1rem solid rgba(var(--primary-rgb),0.35);font-weight:bold;height:2.4rem;}
            .price .currency {color:var(--orange);padding-right:0.6rem;}
            .price .val {color:var(--orange);font-size:2.6rem;}
            .price .decimal {color:var(--orange);padding-right:1rem;}
            .order {position:absolute;right:1.2rem;top:2.0rem;display:block;width:10rem;height:2.6rem;line-height:2.6rem;
                color:var(--orange);text-align:center;border:0.1rem solid rgba(var(--secondary-rgb), 0.25);font-size:1.2rem;}
            .order:hover {background:var(--orange);color:var(--background);}
            .test {
                position:absolute;right:8.6rem;top:6.8rem;display:inline-block;height:2.2rem;line-height:2.2rem;color:var(--primary);font-size:1.1rem;
                &:hover{text-decoration:underline;}
                .iconfont {margin-right:0.2rem;position:relative;top:0.1rem;}
            }
            .doc {
                position:absolute;right:1.2rem;top:6.8rem;display:inline-block;height:2.2rem;line-height:2.2rem;color:var(--primary);font-size:1.1rem;
                &:hover{text-decoration:underline;}
                .iconfont {margin-right:0.2rem;position:relative;top:0.1rem;font-size:1.3rem;}
            }
            .feature {margin:0;padding:1.4rem 1.2rem 0 1.24rem;}
            .feature li {list-style-type:square;color:rgba(var(--text-rgb), 0.85);font-size:1.1rem;padding:0.32rem 0;}
            .feature .fields {
                padding:0.5rem 0;margin:0;height:31.6rem;overflow:hidden;
                li {list-style-type:none;padding:0;height:1.9rem;line-height:1.9rem;color:rgba(var(--text-rgb), 0.65);font-size:1.05rem;}
                li.em {color:var(--warning);font-weight:bold;}
            }
        }
        .item.mr {margin-right:2.25rem;}
    }
}

.content-wrapper.products {
    padding-bottom:6.5rem;
    .feature {
        padding-top:3rem;
        .item {width:54rem;text-align:left;flex-grow:1;border:0.1rem solid rgba(var(--primary-rgb),0.35);
            border-radius:0.3rem;overflow:hidden;padding:1.8rem 1.2rem;box-sizing:border-box;
            background:linear-gradient(0deg,var(--wrapper-background),var(--background));
        }
        .item.middle {margin:0 2.25rem;}
        .item .label {
            color:var(--text);margin:0;padding:0.5rem 0 1.6rem 0;font-size:1.4rem;
            .iconfont {padding-right:0.8rem;}
        }
        .item .desc {color:var(--secondary);font-size:1.2rem;line-height:2.4rem;letter-spacing:0.12rem;}
        .item .link {
            margin-top:2rem;
            a {display:inline-block;position:relative;font-size:1.05rem;color:var(--primary);}
            a .iconfont {position:relative;top:0.25rem;left:0;}
            a:hover {text-decoration:underline;}
        }

        .item.mr {margin-right:3rem;}
    }
}

/* search */
.content-wrapper.search {
    background:var(--background);padding:3rem 0 4rem 0;
    .form {
        text-align:left;background:linear-gradient(0deg,var(--wrapper-background),var(--background));
        .input-wrapper {
            position:relative;
            .tip {display:none;position:absolute;min-width:10rem;height:3.2rem;line-height:3.2rem;text-align:center;top:0.2rem;left:0.2rem;
                background:rgba(var(--warning-rgb),0.35);font-size:1.2rem;padding:0 1.5rem;color:var(--text);}
            .input {width:100%;height:3.6rem;line-height:3.6rem;outline:none;border:0.1rem solid rgba(var(--primary-rgb),0.35);text-align:center;
                border-radius:0.3rem;padding:0.3rem 1rem;font-size:1.4rem;box-sizing:border-box;color:var(--primary);font-weight:bold;}
            .icon {position:absolute;right:1rem;top:0.7rem;font-size:2.2rem;cursor:pointer;font-weight:bold;}
            .icon:hover {color:var(--primary);}
        }
        .search-table {
            margin-top:2rem;
            & * {font-size:1.1rem;border-color:rgba(var(--primary-rgb),0.35);}
            width:100%;border-radius:0.3rem;overflow:hidden;border:0.1rem solid rgba(var(--primary-rgb), 0.35);
            .td {
                border-top:0.1rem solid rgba(var(--primary-rgb), 0.35);border-left:0.1rem solid rgba(var(--primary-rgb), 0.35);
                text-align:left;padding:0.8rem 1.8rem;font-size:1.12rem;
                .val {font-size:1.24rem;font-weight:bold;}
                .empty {font-weight:bold;}
            }
            .th {font-weight:bold;}
            tr:first-child .td {border-top:none;}
            tr:last-child .td {border-bottom:none;}
            .td:first-child {border-left:none;}

            tr .td:nth-child(1) {
                text-align:right;
            }
            tr .td:nth-child(2) {
                text-align:right;
            }
        }
    }
}



/* discount page */
.content-wrapper.discount {
    padding-top:5.2rem;
    background:var(--wrapper-background);
    .intro {
        padding-bottom:2rem;text-align:left;padding-top:4rem;
        .label {font-size:2.2rem;padding-bottom:2.4rem;}
        .desc {font-size:1.3rem;width:56.5rem;line-height:2.4rem;color:rgba(var(--text-rgb), 0.75);letter-spacing:0.12rem;}
    }
}

.content-wrapper.c-discount {
    background:var(--background);padding:4rem 0;
    & * {box-sizing:border-box;}
    .c-list {
        padding-top:2rem;
        .item {
            position:relative;text-align:center;margin-right:1.5rem;
            flex-grow:1;border:0.1rem solid rgba(var(--primary-rgb),0.35);
            border-radius:0.3rem;overflow:hidden;padding:1.8rem 1.2rem;
            background:linear-gradient(0deg,var(--wrapper-background),var(--background));overflow:hidden;
            .youhui-icon {position:absolute;display:flex;justify-content:flex-start;align-items:flex-start;left:0rem;top:-0rem;color:var(--orange);font-size:3.20rem;}
            &:last-child {margin-right:0;}
            .title {position:relative;font-size:1.5rem;color:var(--primary);}
        }
    }
}

.content-wrapper.d-discount {
    background:var(--background);padding:0 0 4rem 0;
    & * {box-sizing:border-box;}
    .c-list {
        padding-top:2rem;
        .item {
            position:relative;width:100%;text-align:left;flex-grow:0;border:0.1rem solid rgba(var(--primary-rgb),0.35);
            border-radius:0.3rem;overflow:hidden;padding:1.8rem 1.2rem;box-sizing:border-box;
            background:linear-gradient(0deg,var(--wrapper-background),var(--background));margin-bottom:1.5rem;
            .title {font-size:2.0rem;margin-bottom:1.2rem;color:var(--primary);}
            .title .youhui-icon {display:inline-block;color:var(--orange);font-size:2.5rem;margin-top:0.4rem;margin-right:0.5rem;}
            .count {position:absolute;display:inline-block;top:2.0rem;right:13.5rem;height:2.6rem;line-height:2.6rem;font-size:1.1rem;}
            .receive {position:absolute;right:1.2rem;top:2.0rem;display:block;width:12rem;height:2.6rem;line-height:2.6rem;
                color:var(--orange);text-align:center;border:0.1rem solid rgba(var(--secondary-rgb), 0.25);font-size:1.2rem;}
            .receive:hover {background:var(--orange);color:var(--background);}
            .receive.disabled {background:var(--light-grey);color:rgba(var(--text-rgb),0.45);}
            .expiration {position:absolute;right:1.2rem;top:6rem;display:inline-block;color:rgba(var(--error-rgb),0.40);font-size:1rem;}
            .content {font-size:1.1rem;color:rgba(var(--text-rgb),0.65);}
            .desc {
                padding:1.5rem 0 0.2rem 0;font-size:1.2rem;
                display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center;align-content:center;
                .li {position:relative;border:0.1rem solid rgba(var(--primary-rgb),0.35);background:var(--background);border-radius:0.3rem;margin-right:1rem;padding:0.5rem 1rem;}
                .li .iconfont {float:left;height:2.6rem;line-height:2.6rem;}
                .li .name {height:2.6rem;line-height:2.6rem;float:left;margin:0 4rem 0 0.5rem;}
                .li .reduce-wrapper {float:right;height:2.6rem;line-height:2.6rem;font-weight:bold;}
                .li:last-child {margin-right:0;}
            }
        }
    }
}


/* about */
.content-wrapper.banner {
    padding-top:7.2rem;
    background:var(--wrapper-background) url('/static/image/svg/light-bg01.png') no-repeat center center;
    background-size:80% auto;
}

.content-wrapper.content {
    text-align:left;font-size:1.1rem;overflow:hidden;
    .links {
        position:fixed;top:16.4rem;float:left;width:15rem;border:0.1rem solid rgba(var(--secondary-rgb),0.35);
        box-sizing:border-box;padding:1rem 0;min-height:20rem;background:var(--background);
        .item {
            position:relative;display:block;height:3.4rem;line-height:3.4rem;padding:0 1rem;font-size:1.2rem;
            .iconfont {position:relative;top:0.1rem;margin-right:0.2rem;}
        }
        .item:hover {color:var(--primary);}
        .item.active {color:var(--primary);}
        .line {display:block;border-bottom:0.1rem solid rgba(var(--secondary-rgb),0.35);}
    }
    .content {
        float:right;width:calc(var(--container-width) - 15rem - 3rem);min-height:calc(100vh - 7.2rem - 30rem);
        .margin-no-t {margin-top:0;}
        .margin-no-b {margin-bottom:0;}
        a {color:var(--primary);}
        a:hover {text-decoration:underline;}
        p {line-height:2.2rem;margin:0;margin-bottom:0.8rem;letter-spacing:0.12rem;}
        h3,h4 {letter-spacing:0.15rem;padding:0;margin:1.6rem 0 1.3rem 0;font-size:1.4rem;}
        pre {
            padding:1rem;margin:1rem 0 1.2rem 0;border:0.1rem solid rgba(var(--secondary-rgb),0.35);
            border-radius:0.3rem;overflow-y:hidden;overflow-x:auto;line-height:2.0rem;
            background:var(--wrapper-background);color:rgba(var(--text-rgb),0.75);
            .keyword {color:#D55FDE;}
            .var {color:var(--text);}
            .func {color:#61AFEF;}
            .package {color:#E5C07B;}
            .args {color:#E5C07B;}
            .const {color:#E5C07B;}
            .string {color:#89CA78;}
            .number {color:#E5C07B;font-weight:bold;}
            .comment {color:rgba(var(--text-rgb),0.35);}
            &.code.dark {
                background:#282C34;color:#BBBBBB;
                .comment {color:#595953;}
            }
            &.code.light {
                background:#F7F7F7;
            }
        }

        p.line {height:1rem;}
        .table {
            padding:0;margin:1rem 0 1.2rem 0;
            background:var(--wrapper-background);border-color:rgba(var(--secondary-rgb),0.35);
            &.light {background:var(--background);}
            & * {border-color:rgba(var(--secondary-rgb),0.35);}
        }
        .anchor-wrapper {height:0;position:relative;top:-5.2rem;}
        .img-wrapper {
            width:100%;box-sizing:border-box;text-align:center;padding:0;margin:1rem 0 1.2rem 0;
            border:0.1rem solid rgba(var(--secondary-rgb),0.35);border-radius:0.3rem;background:var(--wrapper-background);
            img {width:auto;height:auto;}
        }

        /* scroll bar style  */
        ::-webkit-scrollbar {
          width: 0.5rem;
          height: 0.5rem;
          background-color:var(--disabled);
          -webkit-border-radius: 0.5rem;
          -moz-border-radius: 0.5rem;
          border-radius: 0.5rem;
        }

        ::-webkit-scrollbar-track {
          background-color: var(--background);
          -webkit-border-radius: 0.5rem;
          -moz-border-radius: 0.5rem;
          border-radius: 0.5rem;
          -webkit-box-shadow: inset 0 0 0.5rem rgba(var(--text-rgb), 0.25);
          -moz-box-shadow: inset 0 0 0.5rem rgba(var(--text-rgb), 0.25);
          box-shadow: inset 0 0 0.5rem rgba(var(--text-rgb), 0.25);
        }

        ::-webkit-scrollbar-thumb {
          background-color: rgba(var(--secondary-rgb), 0.25);
          -webkit-border-radius: 0.5rem;
          -moz-border-radius: 0.5rem;
          border-radius: 0.5rem;
          -webkit-box-shadow: inset 0 0 0.5rem rgba(var(--primary-rgb), 0.25);
          -moz-box-shadow: inset 0 0 0.5rem rgba(var(--primary-rgb), 0.25);
          box-shadow: inset 0 0 0.5rem rgba(var(--primary-rgb), 0.25);
        }
    }

    .qa-wrapper {
        margin-bottom:1.2rem;
        .q {font-size:1.1rem;font-weight:bold;padding:0.5rem 0 1rem 0;letter-spacing:0.12rem;}
        .a {line-height:2.2rem;letter-spacing:0.12rem;}
    }
}

/* user center */
.content-wrapper.user {
    background:var(--wrapper-background);height:calc(100vh);padding-top:5.2rem;box-sizing:border-box;
    .container {
        padding:0;margin-top:0;margin-bottom:0;border:0.1rem solid rgba(var(--secondary-rgb),0.35);
        border-top:none;border-bottom:none;height:calc(100vh - 5.2rem);
    }

    .menu-container {
        background:var(--background);width:18rem;height:100%;box-sizing:border-box;
        border-right:0.1rem solid rgba(var(--secondary-rgb),0.35);text-align:left;
        box-shadow:0.5rem 0 0.5rem -0.5rem rgba(var(--secondary-rgb), 0.5);overflow-x:hidden;overflow-y:auto;transition:0.2s linear;

        .menu-box {cursor:pointer;border-bottom:0.1rem solid rgba(var(--secondary-rgb), 0.25);}
        .menu-box .menu {position:relative;font-size:1.3rem;font-weight:500;padding:1.54rem 2rem;border-left:0.8rem solid transparent;}
        .menu-box .menu:hover {background:rgba(var(--secondary-rgb), 0.15);transition:0.2s linear;}
        .menu-box .menu .l {position:relative;top:0.18rem;left:-0.8rem;font-size:2rem;vertical-align:center;}
        .menu-box .menu .r {position:absolute;top:1.94rem;right:0.72rem;font-size:1.6rem;vertical-align:center;transition: all 0.2s ease;}
        .menu-box .menu:hover .r {color:var(--primary-hover);transition:0.2s linear;}

        .menu-box .sub {margin:0;padding:0;display:none;}
        .menu-box .sub.active {display:block;}
        .menu-box .sub a {display:block;padding:1rem 0 1rem 4.15rem;color:var(--text);text-decoration:none;font-size:1.2rem;border-left:0.8rem solid transparent;}
        .menu-box .sub a:hover {background:rgba(var(--secondary-rgb), 0.15);transition:0.2s linear;}
        .menu-box .sub a.active {background:rgba(var(--secondary-rgb), 0.15);border-left-color:var(--primary);transition:background border-color 0.2s linear;}

        .menu-box.active .menu {background:rgba(var(--secondary-rgb), 0.15);border-left-color:var(--primary);}
        .menu-box.active .menu .r {transform:rotate(180deg);}
    }

    .content-container {
        width:calc(var(--container-width) - 18rem);height:100%;box-sizing:border-box;padding:0 1.8rem;text-align:left;
        .content-title {
            height:2.8rem;line-height:2.8rem;padding-top:1.2rem;font-size:1.3rem;border-bottom:0.1rem solid var(--wrapper-background);margin-bottom:1rem;
            .if-pos {padding-right:0.5rem;}
            .iconfont {position:relative;top:0.12rem;font-size:1.66rem;}
            .opt-wrapper {padding-left:2.4rem;}
            .backBtn {
                display:inline-block;border:none;height:2.2rem;line-height:2.2rem;border-radius:0.3rem;
                padding:0 2rem 0 1.6rem;font-size:1.18rem;cursor:pointer;border:0.1rem solid var(--light-grey);
            }
            .backBtn:hover {
                border:0.1rem solid rgba(var(--text-rgb),0.25);box-shadow:inset 0 0 0.1rem 0.1rem rgba(var(--text-rgb),0.15);
            }
            .backBtn .iconfont {position:relative;top:-0.12rem;padding-right:0.2rem;font-size:1.2rem;padding-right:0.3rem;}
        }
        .content-box {width:100%;height:calc(100vh - 11.8rem);overflow:hidden;}
        .content-frame {width:100%;height:100%;border:none;padding:0;margin:0;box-sizing:border-box;}
    }
}

/* order add */
.content-wrapper.order {
    background:var(--background);padding-top:7.2rem;box-sizing:border-box;
    .container {}
    .title {font-size:1.24rem;text-align:left;padding:1rem 0 1.4rem 0;}
    .detail {
        border:0.1rem solid rgba(var(--secondary-rgb),0.35);
        .line {display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center;align-content:center;flex-basis:auto;}
        .block {
            padding:1rem 2rem;
            border-bottom:0.1rem solid rgba(var(--secondary-rgb),0.35);
            .label {text-align:left;font-size:1.1rem;font-weight:bold;height:2.6rem;line-height:2.6rem;padding-bottom:0.5rem;}
            .wrapper {padding:1rem 0 0.5rem 0;}
        }
        .table {
            background:var(--wrapper-background);
            width:100%;border:0.1rem solid rgba(var(--secondary-rgb),0.25);border-radius:0.3rem;overflow:hidden;box-sizing:border-box;
            padding:0;margin:0;border-collapse:separate;
            .row {padding:0;margin:0;}
            .cell {border-left:0.1rem solid rgba(var(--secondary-rgb),0.25);border-top:0.1rem solid rgba(var(--secondary-rgb),0.25);
                padding:0.8rem 1.4rem;text-align:left;font-size:1.1rem;
            }
            .cell:first-child {border-left:none;}
            .row:first-child .cell {border-top:none;}
            .list {
                padding:0;margin:0;
                li {list-style-type:square;padding:0.3rem 0;margin-left:1.2rem;}
            }
            .li.em {color:var(--warning);}
            .list.fields {
                display:flex;flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;align-content:space-around;flex-basis:auto;
                li {
                    list-style-type:none;padding:0.34rem 1rem;margin:0.3rem 0.3rem;background:var(--background);border-radius:0.3rem;
                    border:0.1rem solid rgba(var(--text-rgb),0.35);font-size:1rem;
                }
            }
        }
        .block.years {
            text-align:left;
            .wrapper {
                position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center;
                align-content:center;flex-basis:auto;
            }
            .handler {
                border:0.1rem solid rgba(var(--secondary-rgb),0.35);width:2.4rem;height:2.4rem;line-height:2.4rem;
                text-align:center;font-weight:bold;font-size:1.4rem;background:var(--wrapper-background);
            }
            .handler:hover {color:var(--primary);}
            .input-wrapper {
                border:0.1rem solid rgba(var(--secondary-rgb),0.35);border-left:none;border-right:none;
                .input {width:6rem;text-align:center;height:2.4rem;line-height:2.4rem;outline:none;border:none;
                    background:var(--background);box-sizing:border-box;font-weight:bold;}
                .unit {display:inline-block;width:3rem;text-align:center;font-weight:bold;font-size:1.1rem;}
            }
            .increase {}
            .cost-wrapper {
                position:absolute;right:0;bottom:0.5rem;text-align:right;font-size:1.4rem;box-sizing:border-box;color:rgba(var(--text-rgb),0.55);
                .unit {font-size:1.4rem;padding:0 0.5rem;color:var(--orange);}
                .val {color:var(--orange);font-size:1.6rem;}
            }
        }
        .block.discount {
            .item {
                position:relative;background:var(--wrapper-background);padding:0.2rem 0 0.2rem 0.8rem;margin-bottom:1rem;border-radius:0.3rem;overflow:hidden;
                display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:center;align-content:center;
                .status {margin-right:1rem;}
                .title {padding:0 0.6rem;margin:0;font-size:1.1rem;height:3rem;line-height:3rem;}
                .reduce {
                    position:absolute;right:1rem;top:0.2rem;font-size:1.1rem;font-weight:bold;color:var(--orange);
                    height:3rem;line-height:3rem;padding:0 0.5rem;
                    .unit {padding:0 0.3rem;}
                    .val {font-size:1.3rem;font-weight:bold;}
                }
                &.to_be_unlocked {
                    background:rgba(var(--light-grey-rgb),0.25);border:0.1rem solid rgba(var(--secondary-rgb),0.25);
                    .title {color:rgba(var(--text-rgb),0.35);}
                }
                &.unlocked {
                    border:0.1rem solid rgba(var(--secondary-rgb),0.25);background:var(--wrapper-background);
                }
            }
        }
    }
    .summary {
        background:var(--wrapper-background);padding:2rem 3rem;
        .amount-wrapper {
            text-align:right;font-size:1.4rem;box-sizing:border-box;color:rgba(var(--text-rgb),0.55);
            .unit {font-size:1.4rem;padding:0 0.5rem;color:var(--orange);}
            .val {color:var(--orange);font-size:1.6rem;}
        }
        .submit-wrapper {
            text-align:right;margin-top:1.5rem;
            .submit {
                display:inline-block;background:var(--primary);color:var(--background);width:10rem;
                height:3rem;line-height:3rem;text-align:center;font-size:1.2rem;border-radius:0.3rem;
                &.disabled {
                    background:var(--light-grey);color:var(--text);
                }
            }
        }
    }
}

/* order pay */
.content-wrapper.payment {
    background:var(--background);padding-top:7.2rem;box-sizing:border-box;
    .container {}
    .title {font-size:1.24rem;text-align:left;padding:1rem 0 1.4rem 0;}
    .detail {
        border:0.1rem solid rgba(var(--secondary-rgb),0.35);
        .block {
            padding:1rem 2rem;
            border-bottom:0.1rem solid rgba(var(--secondary-rgb),0.35);
            .label {text-align:left;font-size:1.1rem;font-weight:bold;height:2.6rem;line-height:2.6rem;padding-bottom:0.5rem;}
            .wrapper {padding:1rem 0 0.5rem 0;}
        }
        .block.pay {
            .gtip {padding:1rem 0;font-size:1.1rem;text-align:left;}
            .wrapper {
                position:relative;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:flex-start;align-items:flex-start;
                align-content:center;flex-basis:auto;padding:2rem 0 3rem 0;
            }
            .option-wrapper {
                margin-right:2.5rem;
                .option {
                    position:relative;display:block;height:2.8rem;line-height:2.8rem;width:12rem;font-size:1.2rem;border-radius:0.3rem;
                    margin-bottom:1.5rem;border:0.1rem solid rgba(var(--secondary-rgb),0.25);text-align:left;box-sizing:border-box;padding-left:3.5rem;
                }
                .option.wechat .iconfont {position:absolute;display:inline-block;font-size:1.6rem;top:0.01rem;left:1rem;color:var(--success);}
                .option.wechat.active {border:0.1rem solid var(--success);}
                .option.alipay .iconfont {position:absolute;display:inline-block;font-size:1.5rem;top:0.03rem;left:1.1rem;color:var(--primary);}
                .option.alipay.active {border:0.1rem solid var(--primary);}
            }
            .qrcode-wrapper {
                position:relative;padding:1rem;border:0.1rem solid rgba(var(--secondary-rgb),0.35);border-radius:0.3rem;overflow:hidden;height:26.6rem;width:27.2rem;
                .expired-wrapper {
                    display:none;position:absolute;left:0;top:0;width:100%;height:100%;
                    background:rgba(var(--text-rgb),0.65);
                    .tip {padding:1.5rem 2.5rem;background:var(--background);border-radius:0.3rem;font-size:1.4rem;}
                    .tip a {color:var(--primary);}
                }
                .info-wrapper {
                    display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:center;font-size:1.2rem;height:3rem;
                    .time {padding:0 0.5rem;font-weight:bold;}
                    .years {color:var(--orange);font-weight:bold;}
                    .equal {padding:0 0.5rem;font-weight:bold;}
                    .unit {padding:0 0.5rem;color:var(--orange);}
                    .val {color:var(--orange);font-size:1.6rem;font-weight:bold;}
                }
                .img-wrapper {}
                .img {width:21rem;height:21rem;border-radius:0.1rem;}
                .img.disabled {opacity:0.3;}
                .tip {font-size:1.1rem;color:rgba(var(--text-rgb),0.55);}
                .tip .provider-name {color:var(--primary);}
                .tip .counter {color:var(--orange);font-weight:bold;font-size:1.28rem;}
            }
        }
    }
    .summary {
        background:var(--wrapper-background);padding:2rem 3rem;
        .tip-wrapper {font-size:1.2rem;color:rgba(var(--text-rgb),0.45);text-align:center;}
    }
}