/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/
[v-clock]{ display: none; }
#myCheck2+label { background-color: white; border: solid 1px #eaebef; width: 18px; height: 18px; display: inline-block; text-align: center; vertical-align: middle; line-height: 20px; margin-right: 5px; cursor: pointer; position: relative; overflow: hidden; border-radius: 2px; }
#myCheck2:checked+label,#myCheck2:hover+label {
    border-color: #2981ff;
}
#myCheck2:checked+label .icon-gouxuan { display: block !important; position: absolute; top: 0; left: 1px; content: ''; font-size: 12px !important; color: #3888fc !important; }
.waf-form-item .icon-problem { vertical-align: middle; }
.waf-form-item .icon-problem:hover { cursor: pointer; color: #2981ff; }
.renew .buy-tips { width: 374px; height: 46px; line-height: 43px; background: url('/images/gaofangip/renew.png'); font-size: 12px; color: #ffffff; position: absolute; margin: -75px 0 0 -75px; display: none; z-index: 99; }
.input-box { display: inline-block; margin: 20px 0 27px;}
.area-box { max-width: 88%; display: inline-flex; justify-content: flex-start; align-items: flex-start; flex-wrap: wrap; }
.area-box .area-item { display: inline-block; min-width: 85px; width: 180px; height: 40px; color: #333; cursor: pointer; padding: 0 8px; font-size: 12px; line-height: 40px; margin-right: 10px; margin-left: -1px; margin-bottom: 10px; text-align: center; box-sizing: border-box; border: 1px solid #DCDFE6; }
.m-waf-item .area-box{ max-width: 100%; }
.area-box .area-item.active { color: #fff; background-color: #3888fc; border-color: #3888fc; }
.el-input-number { width: 180px !important; margin-bottom: 10px; }
.el-input-number span:first-child {left: 1px;border-right: 1px solid #DCDFE6;}
.el-input-number span:nth-child(2) {right: 1px;border-left: 1px solid #DCDFE6;}
.el-input-number .el-input__inner { border-radius: 0; }
.el-input-number__decrease.is-disabled,
.el-input-number__increase.is-disabled { color: gainsboro !important; border-radius: 0 !important; border: none; background-color: #f5f7fa; top: 1px; }
.el-input-number__decrease:hover,
.el-input-number__increase:hover { color: #ffffff; }
.el-input-number__decrease,
.el-input-number__increase { width: 50px !important; color: #32363f; }
.el-input-number__decrease i, .el-input-number__increase i { font-weight: 700; }
.el-input-number__decrease, .el-input-number__increase { background-color: #2981ff; top: 0; border-radius: 0; color: #ffffff; }

.header-bg {height: 123px;background-color: #32394a;}
.bg-gray{background-color: #f5f7fa;}
.waf-buy-container {padding: 16px 0 0;box-sizing: border-box;}
.waf-buy-box,.m-waf-container{background-color: #fff;}
.waf-title-box{ background-color: #fff; -webkit-box-shadow: 0px -2px 7px 0px rgba(60, 88, 125, 0.09); box-shadow: 0px -2px 7px 0px rgba(60, 88, 125, 0.09); }
.waf-title {width: 100%;height: 56px; display: flex; align-items: center;}
.waf-title span {font-size: 20px;color: #1c1d1f;margin-left: 10px;}
.waf-title .icon-xingzhuang10{font-size: 22px;color: #999;position: relative;top: 1px;}
/* .waf-title .icon-xingzhuang10 {padding: 8px;color: #bcbcbc; border-radius: 4px;border: solid 1px #e0e0e0;vertical-align: super;} */
.waf-title .icon-xingzhuang10:hover {cursor: pointer;border-color: #3888fc;color: #3888fc;}
.waf-main { padding: 30px; box-sizing: border-box;}
.waf-main .waf-form-item {margin-bottom: 20px;}
.waf-main .waf-form-item .name {font-size: 16px; font-weight: bold;color: #1c1d1f;}
.waf-main .waf-form-item:not(:first-child) .name {line-height: 40px;vertical-align: top;}
.waf-table { width: 100%; display: inline-block; vertical-align: top; border-collapse:collapse; padding-left: 160px; overflow-x: auto; }
.waf-table::-webkit-scrollbar { height: 4px; }
.waf-table::-webkit-scrollbar-thumb { height: 4px; background: #e5e9ee; border-radius: 4px; }
.waf-table::-webkit-scrollbar-track { background: #f3f6f9; border-radius: 4px; }
.pc-form-item{ position: relative; display: inline-block; width: 100%; }
/* .waf-form-item:not(:last-child){ border-bottom: 1px solid #ebedf0; } */
.btn[disabled]{background-color: #bfc3cf;color: #fff;cursor: no-drop;background-image: none;}
.waf-active { border-left: 1px double #3888fc !important; border-right: 1px double #3888fc !important; }
.waf-hover{ border-left: 1px double rgba(140, 178, 231, .5) !important; border-right: 1px double rgba(140, 178, 231, .5) !important; }
.waf-table tr:first-child .waf-active { background: url(/images/new_kkidc/waf/web-hander-bg.png);background-repeat: no-repeat;background-size: cover; border-top: 1px double #3888fc !important; position: relative; }

.waf-table tr:first-child .waf-hover{ background-color: #ebf1fa; border-top: 1px double rgba(140, 178, 231, .5) !important; position: relative; }

.waf-table tr:last-child .waf-active { border-bottom: 1px double #3888fc !important; }
.waf-table tr:last-child .waf-hover{ border-bottom: 1px double rgba(140, 178, 231, .5) !important; }
.waf-table tr:first-child .waf-active span,
.waf-table tr:first-child .waf-active p{ color: #fff !important; }
.waf-table tr:first-child td .header-top{height: 100%;padding: 17px 0;box-sizing: border-box;}
.waf-table tr:first-child .waf-active .icon1,
.waf-table tr:first-child .waf-active .icon2,
.waf-table tr:first-child .waf-active .icon3,
.waf-table tr:first-child .waf-active .icon4 {color: #3888fc !important;}

/* .waf-table tr:first-child td{ height: auto; } */
.waf-table tr td:first-child { width: 158px; position: absolute; z-index: 2; left: 0; }
.waf-table tr td { border: solid 1px #ebebec; text-align: center; height: 50px; padding: 0 35px; min-width: 158px; max-width: 250px; }
.header-tb { min-width: 189px; padding: 0 !important; background-color: #f7f7f7; }
.waf-table .detail { text-align: left; padding: 24px 45px; display: flex; flex-direction: column; align-items: flex-start; padding-left: 65px; }
.waf-table .detail .items:not(:last-child) { margin-bottom: 14px; }
.pc-form-item{ margin-top: 24px; }

.waf-table tr td:not(:first-child){cursor: pointer}

.waf-table .detail .items span {margin-left: 10px;}
.waf-table .icon-success {color: #3888fc;}
.waf-table .icon-MPIS-Error {color: #cdd3dd;}
.header-top span {color: #1c1d1f;font-size: 16px;font-weight: 600;}
.header-top p {color: #626266;font-size: 14px;margin-top: 5px;}
.icon1 {color: rgb(80, 165, 237) !important;}
.icon2 {color: #fb586a !important;}
.icon3 {color: #f98f43 !important;}
.icon4 {color: #cdd3dd !important;}

.icon-selected { position: absolute; top: 1px; right: 1px; color: #2981ff; border-left: 32px solid transparent; border-top: 32px solid #bdd8ff; }
.icon-selected .icon-gou { position: absolute; top: -27px; right: 3px; font-size: 10px; }
.waf-count-info { height: 80px; line-height: 80px; background-color: #ffffff; -webkit-box-shadow: 0px -2px 7px 0px rgba(60, 88, 125, 0.09); box-shadow: 0px -2px 7px 0px rgba(60, 88, 125, 0.09); }
.waf-count-info .left .name { font-size: 14px; color: #626266; }
.waf-count-info .left .price { font-size: 24px; color: #f33e3e; font-weight: 600; }
.waf-count-info .left .price span{font-size: 14px;}
.waf-count-info .left .discount { padding: 7px 8px; color: #f27904; vertical-align: super; background-color: #fef5e8; }
.waf-count-info .left .other { padding: 7px 8px; color: #26ad5c; margin-left: -4px; vertical-align: super; background-color: #e9f7ee; }

.bottom-price {
    padding: 0 30px;
}
.total .price {
    margin: 0;
    text-align: center;
}
.phone-discounts {
    font-size: 12px;
    text-align: center;
    padding: 0;
    margin-top: 5px;
}
/* .el-input-number__decrease, .el-input-number__increase {
    border-radius: 0;
    color: #d4d7dc;
    background-color: #fff;
} */
@media screen and (max-width: 1024px){
    .pc-form-item{
        width: 88%;
    }
    /* .dragger, .renew {
        display: block;
        margin: 20px 0 0 0;
    } */
}

@media screen and (max-width: 1023px) {
    .el-input-number__decrease.is-disabled,
    .el-input-number__increase.is-disabled {
        top:  1px;
    }
    .sm-bgGray {background-color: #ffffff;}
    .header-bg {height:  50px;}
    .banner.h560 .swiper-slide {padding-bottom: 0;}
    .banner.h600, .banner.h560, .banner.h531, .banner.h440, .banner.h480 {height: auto;}

    /* .m-width {width: 90%;} */
    .waf-title {    width: 100%;
    height: 56px;
    display: flex;
    align-items: center;}
    .waf-title span {font-size:  15px;margin-left:  8px;}
    .waf-title .icon-xingzhuang10 {    font-size: 22px;
    color: #999;
    position: relative;
    top: 1px;}

    .area-box .area-item {width:  101px;height:  40px;line-height:  40px;margin-bottom:  10px; min-width:  101px;padding: 0 8px;font-size:  12px; margin-left: 0;margin-right:  9px;}
    .area-box .area-item.active {background-color: #e5f0ff;color: #2981ff;}
    /* 移动端样式 */
    .m-waf-item {
        /* padding:  16px 20px; */
    }
    .m-waf-item .desc{
        font-size:  12px;
    }
    .m-waf-container .m-waf-active {
        color: #fff !important;
        background-color: #2981ff;
        position: relative;
        border: 1px solid transparent !important;
    }

    .m-waf-container .m-waf-active i {
        font-size:  14px !important;
        color: #ffffff !important;
    }

    .m-waf-container .m-waf-active::after {
        content: '';
        position: absolute;
        bottom:  -5px;
        left: 45%;
        border-left:  10px solid transparent;
        border-bottom:  10px solid #2981ff;
        -webkit-transform: rotate(45deg);
            -ms-transform: rotate(45deg);
                transform: rotate(45deg);
    }

    .m-waf-container .m-waf-name {
        font-size:  13px;
        color: #252939;
    }
    .m-waf-container .m-waf-main .m-waf-nav {
        overflow-x: auto;
        overflow-y: hidden;
        display: -webkit-box;
        height:  45px;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }
    .m-waf-item .m-waf-name{
        margin-top: 19px;
        margin-bottom: 15px;
        font-size: 13px;
    }
    .m-waf-container .m-waf-main .m-waf-nav .m-waf-nav-item {
        min-width: 36%;
        height:  37px;
        line-height:  37px;
        text-align: center;
        font-size:  14px;
        color: #000000;
        border-radius:  2px;
        border: solid 1px #f6f7fb;
    }
    .m-waf-container .m-waf-main .m-waf-nav .m-waf-nav-item span {vertical-align: top;}
    .m-waf-container .m-waf-main .m-waf-nav .m-waf-nav-item i {font-size:  16px;}
    .m-waf-container .m-waf-main .m-waf-nav .m-waf-nav-item:not(:last-child) {
        margin-right:  10px;
    }

    .m-icon1{color: #50a5ed;}
    .m-icon2{color: #fb586a;}
    .m-icon3{color: #f98f43;}
    .m-icon4{color: #cdd3dd;}

    .m-waf-table {
        width: 100%;
        font-size:  13px;
        margin-top:  18px;
        color: #696b72;
        border-collapse: collapse;
    }

    .m-waf-item:first-child .m-waf-name {margin-bottom:  15px !important;}

    .m-waf-table tr td {border: 1px solid #eaebef;padding:  11px;-webkit-box-sizing: border-box;box-sizing: border-box;}
    .m-waf-table tr td:first-child {width:  101px;}
    .m-waf-table tr td:last-child {padding-left: 10%;}

    .m-waf-table .items .list:not(:last-child) {
        margin-bottom:  10px;
    }
    .m-waf-table .items .list .icon{
        display: inline-block;
        width:  16px;
        height:  16px;
        color: #696b72;
        font-size:  12px;
        border-radius: 50%;
        background-image: -webkit-gradient(linear, left top, right top, from(#7c7ee5), to(#4196fe)), -webkit-gradient(linear, left top, left bottom, from(#3888fc), to(#3888fc));
        background-image: -o-linear-gradient(left, #7c7ee5 0%, #4196fe 100%), -o-linear-gradient(#3888fc, #3888fc);
        background-image: linear-gradient(90deg, #7c7ee5 0%, #4196fe 100%), linear-gradient(#3888fc, #3888fc);
    }
    .m-waf-table .items .list i {
        vertical-align: bottom;
    }
    .m-waf-table .items .list .icon-success {
        color: #2981ff;
    }

    .m-waf-table .items .list .icon-MPIS-Error {
        color: #cdd3dd;
    }

    /* .m-waf-main .waf-form-item:last-child {margin-top:  20px;border-top: 1px solid #eaebef;} */

    .m-waf-main{ width: calc(100% - 30px); padding: 0 15px 20px;}
    .m-waf-main .waf-form-item .name {margin-top:  19px;font-size:  13px;}
    .m-waf-main .img_show {width:  18px;}
    .m-waf-main .input-box {width: 100%;margin: 0;}
    .m-waf-main .input-box p {font-size:  12px;}
    /* .m-waf-main .waf-form-item .dragger li:not(:last-child) {margin-bottom:  10px;}
    .m-waf-main .waf-form-item .dragger li:last-child {margin-bottom:  20px;border-color:#eaebef;} */
    .m-waf-main .waf-form-item .buy-warning {font-size:  12px;color: #3888fc;margin-top:  5px;}
    .m-waf-container .waf-count-info {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: justify;-ms-flex-pack: justify;justify-content: space-between; margin-top:  10px;height:  65px;line-height: initial;}
    .m-waf-container .waf-count-info .left {margin-left:  15px;}
    .m-waf-container .waf-count-info .left .name {display: inline-block;font-size:  14px;margin-top:  10px;}
    .m-waf-container .waf-count-info .left .price {font-size:  16px;margin: 0;}
    .m-waf-container .waf-count-info .left .tips-box {margin-top:  7px;}
    .m-waf-container .waf-count-info .left .discount {margin-right: 0;}
    .m-waf-container .waf-count-info .left .discount,
    .m-waf-container .waf-count-info .left .other {font-size:  12px;}
    .m-waf-container .right .btn {height: 100%;line-height:  65px;margin: 0;width:  140px !important;font-size:  14px;}
    .m-waf-table .items .list .icon-success {font-size:  16px;}
    .el-input-number {width:  160px !important;margin-bottom:  10px;line-height:  38px;}
    .el-input__inner {height:  40px;line-height:  40px;font-size:  14px; padding-left:  50px;padding-right: 50px;padding: 0 15px;}
    .el-input-number__decrease, .el-input-number__increase {font-size:  13px;width:  40px !important;}

    .renew {margin: 0;}
    .renew span {font-size:  14px;vertical-align:bottom;}

    #myCheck2+label {width:  18px;height:  18px;line-height:  20px;margin-left:  5px;border-radius:  2px;vertical-align:  -5px;}
    #myCheck2:checked+label .icon-gouxuan {font-size:  12px !important;}

    .waf-form-item:not(:last-child){
        border-bottom: none;
    }

    .m-waf-container .m-waf-main .m-waf-nav::-webkit-scrollbar {
        display: none; /*隐藏滚动条*/
    }
}