.main {
   /* margin: 2% auto*/
}

/*加载loading*/
.data-loading {
    width: 420px;
    height: 260px;
    margin: 5% auto;
    text-align: center;
    border: 2px solid rgba(234, 239, 244, 1);
    box-shadow: 0px 0px 10px 0px rgba(0,33,71,0.1);
    border-radius: 10px;
    -webkit-border-radius: 10px;
    color: #666
}

    .data-loading p:nth-child(1) {
        margin-top: 60px
    }

    .data-loading h5 {
        font: bold 22px/220% "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-weight: 400
    }

    .data-loading .refresh {
        display: inline-block;
        height: 40px;
        line-height: 40px;
        margin-top: 15px;
        padding: 0 10px;
        border: 2px solid #EAEFF4;
        border-radius: 20px;
        -webkit-border-radius: 20px
    }

        .data-loading .refresh:hover {
            border-color: #5BAEFE;
            color: #5BAEFE
        }

/*通道维护关闭*/
.data-disabled {
    width: 660px;
    height: 260px;
    margin: 5% auto;
    text-indent: 240px;
    background: url("/img/www/disabled_logo.png") 30px center no-repeat;
    border: 2px solid rgba(234, 239, 244, 1);
    box-shadow: 0px 0px 10px 0px rgba(0,33,71,0.1);
    border-radius: 10px;
    -webkit-border-radius: 10px
}

    .data-disabled p:nth-child(1) {
        margin-top: 80px
    }

    .data-disabled h5 {
        font: bold 22px/220% "Microsoft Yahei","Helvetica Neue",Helvetica,Arial,sans-serif
    }

.card-menu {
    width: 16%;
    min-height: 530px;
    height: auto !important;
    background: #fff url("/public/images/img05.png") center 0 no-repeat;
    box-shadow: 0px 0px 10px 0px rgba(0,33,71,0.15);
    -webkit-box-shadow: 0px 0px 10px 0px rgba(0,33,71,0.15);
    border-radius: 10px;
    -webkit-border-radius: 10px
}

    .card-menu ul {
        padding: 60px 16px
    }

    .card-menu i {
        display: inline-block;
        width: 24px;
        height: 22px;
        vertical-align: middle;
        margin-right: 4px;
        background: url("/public/images/sprite_index.png") no-repeat
    }

    .card-menu li {
        cursor: pointer;
        margin-bottom: 17px
    }

        .card-menu li.cur a {
            color: #399EFF
        }

        .card-menu li h4 {
            font-weight: bold;
            position: relative;
            white-space: nowrap
        }

        .card-menu li b {
            width: 12px;
            height: 12px;
            position: absolute;
            right: -1px;
            top: 26%;
            background: url("/public/images/sprite_index.png") no-repeat;
            transition: background 0.3s
        }

        .card-menu li .block {
            display: block
        }

        .card-menu li .plus {
            background-position: -320px -195px
        }

        .card-menu li .minu {
            background-position: -320px -210px
        }

        .card-menu li .s1 {
            background-position: -62px -165px
        }

        .card-menu li .s2 {
            background-position: -127px -25px
        }

        .card-menu li .s3 {
            background-position: -17px -25px
        }

        .card-menu li .s4 {
            background-position: -68px -24px
        }

        .card-menu li .s5 {
            background-position: -97px -25px
        }

        .card-menu li .s6 {
            background-position: -286px -54px
        }

    .card-menu .second-menu {
        display: none
    }

        .card-menu .second-menu a {
            position: relative;
            display: block;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            padding: 5px 0 5px 28px;
            transition: margin-left 0.3s
        }

            .card-menu .second-menu a:before {
                width: 3px;
                height: 3px;
                content: "";
                display: block;
                position: absolute;
                left: 18px;
                top: 46%;
                font-size: 0;
                overflow: hidden;
                background: #002147
            }

            .card-menu .second-menu a.cur {
                margin-left: -5px;
                background: #399EFF;
                color: #fff;
                border-radius: 3px;
                -webkit-border-radius: 3px
            }

            .card-menu .second-menu a:hover {
                margin-left: -5px;
                background: #399EFF;
                color: #fff;
                border-radius: 3px;
                -webkit-border-radius: 3px
            }

                .card-menu .second-menu a:hover:before {
                    background: #fff
                }

/*当前位置*/
.card-content .cur-pos {
    padding-bottom: 10px;
    border-bottom: 1px solid #EAEFF4
}

    .card-content .cur-pos a, .card-content .cur-pos span {
        margin: 0 3px
    }

        .card-content .cur-pos a:hover {
            color: #399EFF;
        }

    .card-content .cur-pos .right {
        max-width: 50%;
        white-space: nowrap
    }

        .card-content .cur-pos .right > a + a:before {
            content: "|";
            padding: 0 13px 0 10px;
            font-family: simsun;
            opacity: .5;
            filter: alpha(opacity=50);
            font-size: 12px;
            box-sizing: border-box;
        }

.card-content .cur-pos-title {
    margin: 10px 0;
    font-size: 22px
}

    .card-content .cur-pos-title img {
        vertical-align: -2px;
        margin-right: 5px
    }

.card-content .item {
    padding: 12px 0;
    border-bottom: 1px solid #EAEFF4
}

    .card-content .item .error {
        background: #fff0f0;
        border: 1px dashed #fbd6d6
    }

.card-content .name {
    width: 12%;
    padding-top: 16px;
    float: left;
    font-size: 16px;
    text-align: center
}

.card-content .remindstr {
    padding: 12px 0 0 12.5%
}

.card-content .name i {
    display: inline-block;
    width: 18px;
    height: 18px;
    vertical-align: -4px;
    margin-right: 4px;
    background: url("/public/images/sprite_index.png") no-repeat
}

.card-content .name .s1 {
    background-position: -188px -2px
}

.card-content .name .s2 {
    background-position: -209px 0
}

.card-content .name .s3 {
    background-position: -231px 0
}

.card-content .name .s4 {
    background-position: -253px 0
}

.card-content .name .s5 {
    background-position: -275px 0
}

.card-content .options {
    width: 87.5%;
    float: right
}

    .card-content .options li {
        width: 16.6%;
        min-width: 148px;
        height: 70px;
        position: relative;
        float: left;
        background: #fff;
        cursor: pointer;
        margin-bottom:10px;
    }

.card-content .type {
    padding-bottom: 15px
}

    .card-content .type li {
        height: 70px;
        overflow: hidden;
        text-align: center
    }

        .card-content .type li a {
            display: block;
            width: 95%;
            height: 100%;
            border-radius: 10px;
            line-height: 70px;
            color: #fff;
            font-size: 16px
        }

        .card-content .type li:nth-last-child(1) {
            margin-right: 0
        }

        .card-content .type li .sel {
            width: 28px;
            height: 28px;
            position: absolute;
            top: 0;
            right: 5%;
            margin: 0;
            background: url("/public/images/sprite_index.png") -999px -999px no-repeat
        }

        .card-content .type li:hover {
            opacity: 0.9
        }

            .card-content .type li:hover .sel, .card-content .type li.cur .sel {
                background-position: -181px -53px
            }

        .card-content .type li.l_cost a {
            background-color: #fd804d
        }

        .card-content .type li.l_game a {
            background-color: #4bb2fa
        }

        .card-content .type li.l_fuel a {
            background-color: #40de97
        }

        .card-content .type li.l_video a {
            background-color: #2bf1f4
        }

        .card-content .type li.l_food a {
            background-color: #fdc830
        }

        .card-content .type li.l_ecshop a {
            background-color: #d596fe
        }

        .card-content .type li i {
            display: inline-block;
            width: 36px;
            height: 36px;
            margin-right: 5px;
            vertical-align: middle;
            background: url("/public/images/sprite_icategory.png") -999px -999px no-repeat;
        }

            .card-content .type li i.cost {
                background-position: 1px -3px
            }

            .card-content .type li i.game {
                background-position: -4px -47px
            }

            .card-content .type li i.fuel {
                background-position: -3px -88px
            }

            .card-content .type li i.ecshop {
                background-position: -1px -175px
            }

            .card-content .type li i.food {
                background-position: -3px -132px
            }

            .card-content .type li i.video {
                background-position: -3px -212px
            }

        .card-content .type li:hover i.cost {
            background-position: -44px -3px
        }

        .card-content .type li:hover i.game {
            background-position: -49px -47px
        }

        .card-content .type li:hover i.fuel {
            background-position: -48px -88px
        }

        .card-content .type li:hover i.ecshop {
            background-position: -46px -175px
        }

        .card-content .type li:hover i.food {
            background-position: -48px -132px
        }

        .card-content .type li:hover i.video {
            background-position: -48px -212px
        }

.card-content .category .card-value-sel-wrap {
    width: 500px;
    margin-top: 10px;
    border: 1px solid transparent
}

    .card-content .category .card-value-sel-wrap:hover {
        border-color: #eee;
        -webkit-border-radius: 6px 6px 0 0;
        border-radius: 6px 6px 0 0;
        -webkit-box-shadow: 0 5px 30px -3px #eee;
        box-shadow: 0 5px 30px -3px #eee
    }

        .card-content .category .card-value-sel-wrap:hover .drop-menu {
            display: block;
            opacity: 1;
            visibility: visible
        }

.card-content .category .card-value-sel-bg {
    z-index: 2;
    padding: 10px;
    background: #fff;
    -webkit-border-radius: 6px 6px 0 0;
    border-radius: 6px 6px 0 0
}

.card-content .category .card-value-sel {
    padding: 5px;
    border: 2px solid #e4ecfa;
    background: #f8fafc;
    cursor: pointer
}

    .card-content .category .card-value-sel strong {
        font-size: 20px;
        font-weight: 500
    }

    .card-content .category .card-value-sel span {
        margin: 0 8px
    }

.card-content .category .card-value-sel-wrap .drop-menu {
    display: none;
    opacity: 0;
    visibility: hidden;
    width: 984px;
    position: absolute;
    left: -1px;
    top: 48px;
    z-index: 7;
    padding: 5px 10px 10px 10px;
    background: #fff;
    border: 1px solid #eee;
    -webkit-border-radius: 0 0 6px 6px;
    border-radius: 0 0 6px 6px;
    -webkit-box-shadow: 0 5px 30px -3px #eee;
    box-shadow: 0 5px 30px -3px #eee
}

    .card-content .category .card-value-sel-wrap .drop-menu li {
        margin: 1% 0.8% 0 0
    }

.card-content .category li {
    height: 80px;
    margin-bottom: 15px
}

    .card-content .category li a {
        display: block;
        width: 95%;
        height: 100%;
        border: 2px solid #DFE5F0;
        background: #f8fafc;
        text-align: center;
        color: #8E98A8;
        box-sizing: border-box;
        border-radius: 6px;
        -webkit-border-radius: 6px
    }

    .card-content .category li img {
        display: block;
        height: 32px;
        max-width: 90%;
        margin: 10px auto 0 auto
    }

    .card-content .category li .name {
        float: none;
        display: block;
        margin: 0 auto;
        width: 95%;
        padding: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-size: 14px
    }

    .card-content .category li .sel {
        width: 20px;
        height: 20px;
        position: absolute;
        bottom: 2%;
        right: 5.5%;
        background: url("/public/images/sprite_index.png") -999px -999px no-repeat
    }

    .card-content .category li .value {
        display: block;
        margin: 8px 0 5px 0;
        font-size: 20px;
        color: #000;
        font-weight: 500;
        line-height: 32px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis
    }

    .card-content .category li .font16 {
        font-size: 16px
    }

    .card-content .category li.self-value .value {
        font-size: 16px;
        width: 80%;
        display: block;
        overflow: hidden;
        margin: 8px auto 5px auto;
        text-overflow: ellipsis;
        white-space: nowrap
    }

    .card-content .category li .fg {
        margin: 0 5px
    }

    .card-content .category li .tj-btn {
        display: block;
        font-size: 18px;
        line-height: 50px
    }

        .card-content .category li .tj-btn i {
            display: inline-block;
            width: 33px;
            height: 26px;
            vertical-align: middle;
            margin-right: 8px;
            background: url("/public/images/sprite_index.png") no-repeat;
            transition: 0.3s
        }

        .card-content .category li .tj-btn .group {
            background-position: -102px -53px
        }

        .card-content .category li .tj-btn .single {
            background-position: -64px -53px
        }
        .card-content .category li .tj-btn .text {
            background-position: -64px -53px
        }

        .card-content .category li .tj-btn .qrcode {
            background-position: -65px -111px
        }
        .card-content .category li .tj-btn .image {
            background-position: -65px -111px
        }

    .card-content .category li em {
        position: absolute;
        left: 2px;
        top: 2px;
        display: none;
        padding: 0 2px;
        line-height: 18px;
        background: #399EFF;
        color: #fff;
        font-size: 12px;
        border-radius: 0 0 6px 0;
        -webkit-border-radius: 0 0px 6px 0
    }

    .card-content .category li:hover a, .card-content .category li.cur a {
        border-color: #399EFF;
        background: #fff
    }

    .card-content .category li:hover .sel, .card-content .category li.cur .sel {
        background-position: -146px -52px
    }

    .card-content .category li:hover em, .card-content .category li.cur em {
        display: block
    }

    .card-content .category li:hover .group, .card-content .category li.cur .group {
        background-position: -102px -80px
    }

    .card-content .category li:hover .single, .card-content .category li.cur .single {
        background-position: -64px -80px
    }

    .card-content .category li:hover .scode, .card-content .category li.cur .scode {
        background-position: -65px -138px
    }

#select_face .category li {
    width: 19.2%;
    min-width: 140px;
    background: #fff;
    overflow: hidden;
    text-align: center;
    border: 2px solid #DFE5F0;
    border-radius: 6px;
    margin-right: 0.8%;
    box-sizing: border-box
}

    #select_face .category li:hover, #select_face .category li.cur {
        border-color: #399EFF;
        background: #fff
    }

        #select_face .category li:hover .sel, #select_face .category li.cur .sel {
            right: 0;
            bottom: 0
        }

#select_type .category li {
    height: 55px;
    background: #fff
}

.card-content .options .text-area {
    background: #fff;
    margin: 1% 0;
    padding: 1px;
    border: 1px solid #ddd;
    border-radius: 10px
}

.card-content .options textarea {
    width: 65%;
    height: 312px;
    line-height: 34px;
    padding: 0 1%;
    border: 0;
    font-size: 16px;
    resize: none;
    vertical-align: top;
    /*background: url("/img/www/textarea_bg.png") repeat;*/
    border-radius: 10px
}
.card-content .options textarea.bg {
    background: url("/public/images/textarea_bg.png") repeat;
}
.card-content .sldiv {
    position: absolute;
    top: 1px;
    right: 0;
    z-index: 3;
    width: 35%;
    height: 312px;
    overflow: hidden;
    pointer-events: none;
    background: #F6FAFE;
    border-radius: 0px 10px 10px 0;
    text-align: center;
    color: #8E98A8
}

.card-content .text-area .maskdiv {
    width: 30%;
    height: 312px;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 4;
    opacity: 0
}

.card-content .options .sldiv .tips-warn {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    padding: 100px 15px 0 15px;
    z-index: 3;
    background: url("/public/images/light-tips.png") center 24px no-repeat
}

    .card-content .options .sldiv .tips-warn p:nth-child(1) {
        margin-bottom: 8px
    }

/*自定义折扣*/
.self-rate {
    padding: 22px 0
}

#select_rate .irate {
    background: url("/img/www/rate.png") center no-repeat
}

.self-rate input {
    width: 18px;
    text-align: center;
    vertical-align: middle;
    margin: 0 10px;
    padding: 8px;
    font-size: 24px;
    font-family: "Microsoft Yahei";
    color: #329afa;
    border: none;
    background: url("/img/www/btm_line.png") center bottom no-repeat
}

    .self-rate input.full {
        background: none
    }

.self-rate .bold {
    font-size: 32px;
    vertical-align: middle
}

.self-rate .pos {
    position: absolute;
    left: 104px;
    top: 32px;
    color: #329afa
}

.self-rate .fprice {
    position: absolute;
    left: 96px;
    bottom: -8px;
    line-height: 1.3
}

.self-rate .tip {
    vertical-align: middle;
    margin-left: 10px;
    padding: 2px 5px;
    border: 1px solid #f96868;
    color: #f96868;
    background: #ffeeee;
    border-radius: 4px
}

.sort-code p {
    margin-top: 12px
}

    .sort-code p:nth-child(2) {
        margin-top: 30px
    }

.sort-code b {
    padding: 0 2px
}

.sort-code p:nth-last-child(1) a {
    margin: 0 4px
}

.card-content .options .chk {
    position: absolute;
    left: 7px;
    top: 7px;
    opacity: 0;
    filter: alpha(opacity=0)
}

.card-content .options .chkshow {
    display: inline-block;
    vertical-align: middle;
    width: 30px;
    height: 30px;
    background: url("/public/images/chkbox.png") 0 bottom no-repeat
}

    .card-content .options .chkshow.checked {
        background-position: 0 0
    }

.card-content .options .proto {
    padding: 5px
}

.card-content .options .sub-btn {
    margin-top: 20px;
    padding: 0 50px
}

.card-content .options .input-area .input {
    width: 430px;
    height: 40px;
    padding: 0 10px;
    margin-left: 2%;
    background: rgba(248,250,255,1);
    border: 2px solid rgba(223, 229, 240, 1);
    border-radius: 5px;
    -webkit-border-radius: 5px
}

.card-content .options .input-area p {
    margin: 2% 0
}

.card-content .options .input-area .scode-btn {
    display: inline-block;
    width: 84px;
    height: 84px;
    position: relative;
    overflow: hidden;
    margin: 10px 10px 0 0;
    text-align: center;
    padding: 4px;
    border: 1px solid #DFE5F0;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    cursor: pointer
}

    .card-content .options .input-area .scode-btn .add {
        display: block;
        width: 24px;
        height: 24px;
        margin: 8px auto;
        line-height: 22px;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        background: #F97373;
        border-radius: 50%
    }

    .card-content .options .input-area .scode-btn .del {
        display: block;
        width: 18px;
        height: 18px;
        position: absolute;
        top: 0;
        right: 0;
        background: #666 url("/public/images/sprite_index.png") -289px -75px no-repeat;
        border-radius: 50%
    }

    .card-content .options .input-area .scode-btn img {
        width: 100%;
        height: 100%
    }

    .card-content .options .input-area .scode-btn:hover {
        color: #F97373;
        border-color: #F97373
    }

.card-content .options .tips-warn2 {
    padding: 0 10px;
    margin-top: 15px;
    background: rgba(255,240,240,1);
    border: 1px solid rgba(249, 115, 115, 0.35);
    border-radius: 5px;
    -webkit-border-radius: 5px
}

.card-content .options .rule-intro {
    padding: 10px;
    margin: 15px 0;
    background: rgba(229,241,255,1);
    border: 1px solid rgba(57, 158, 255, 0.35);
    border-radius: 5px;
    -webkit-border-radius: 5px
}

.card-content .options .tel-card-show {
    margin-top: 15px
}

    .card-content .options .tel-card-show span {
        padding: 0 5%
    }

    .card-content .options .tel-card-show p:nth-last-child(1) {
        margin-top: 15px;
        text-indent: 13.5%
    }

.message-box-tip-card .input {
    width: 80%;
    border: 1px solid #ddd;
    padding: 5px;
    border-radius: 5px
}

    .message-box-tip .input.error {
        border-color: #F97373
    }

.card-intros {
    background: #f8faff;
    border-bottom: 1px solid #eee
}

    .card-intros .w1400 {
        margin: 0 auto;
        text-align: center;
        padding: 15px 0;
        white-space: nowrap
    }

        .card-intros .w1400 a.cur {
            color: #399EFF;
            text-decoration: underline;
        }

        .card-intros .w1400 a:hover {
            text-decoration: underline;
        }

        .card-intros .w1400 .divider {
            color: #e5e5e5;
            margin: 0 10px
        }

.facesel-sure .icon3 {
    display: block;
    width: 60px;
    height: 60px;
    text-align: center;
    margin: 0 auto;
    color: #f39b12;
    border: 2px solid #f39b12;
    border-radius: 50%;
    line-height: 60px;
    font-weight: bold;
    font-size: 32px
}

.facesel-sure .layui-layer-btn .layui-layer-btn0 {
    padding: 5px 20px;
    border-color: #dedede;
    background-color: #fff;
    color: #333
}

.facesel-sure .layui-layer-btn .layui-layer-btn1 {
    padding: 5px 20px;
    border-color: #1E9FFF;
    background-color: #1E9FFF;
    color: #fff
}