.pro-classify__topCont{
    font-size: 0;background-color: #fff;
    overflow: hidden;padding: 40px 0;
    .row-pic,
    .row-cont{
        @include lineCenter();width: 50%;
    }
    .row-pic{
        img{
            max-width: 100%;
        }
    }
    .row-cont{
        font-size: 20px;
    }
    .item-etitle{
        font-weight: 400;font-family: $enfont1;
    }
    .item-txt{
        color: $color1;max-width: 570px;
        margin-left: auto;margin-right: auto;
        word-break: break-all;margin-top: em(10,16);
        text-overflow: ellipsis;
        display: -webkit-box; 
        -webkit-box-orient: vertical; 
        -webkit-line-clamp: 3; 
        overflow: hidden;height: 90px; 
    }
    
}

.pro-classify__list{
    a{
        font-size: 0;background-color: #Fff;
        border-left: 4px solid $vi;
        padding: 40px 0;
    }
    figure,
    article{
        @include lineCenter();
        width: 50%;
    }
    figure{
        position: relative;
        &::before{
            content: "";display: block;
            padding-top: prop(510,710);
        }
        img{
            position: absolute;
            left: 0;top: 0;
            max-width: 100%;
        }
    }
    article{
        padding: 0 30px 20px 30px;
    }
    .item-etitle {
        font-family: $enfont1;
    }
    .item-ctitle{
        margin-top: em(10,24);font-weight: 500;
    }
    .item-txt{
        word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box; 
        -webkit-box-orient: vertical; 
        -webkit-line-clamp: 3; 
        overflow: hidden;
        color: $color1;
        max-height: 90px;
    }
}
.pro-filtrate__full{
    position: relative;
    border-top: 4px solid $vi;
    border-bottom: 1px solid #E4E4E4;
    font-size: 20px;
    padding: em(30,20) 0;
}
.pro-filtrate__list{
    li{
        @include lineTop();min-width: 120px;
        position: relative;padding-right: 15px;
    }
    .proft-btn{
        font-size: 16px;font-weight: 500;
        color: $color1;display: inline-block;
        padding-right: 24px;position: relative;
        i{
            position: absolute;right: 0;
            top: 50%;@include verticalY();
            font-size: 12px;color: $vi;
            &::before{
                display: block;
                -webkit-transform: scale(.5);
                transform: scale(.5);
                -webkit-transform-origin: right center;
                transform-origin: right center;
            }
        }
    }
    .pro-drop__select{
        position: absolute;
        left: 0;top: 0;
        font-size: 16px;
        opacity: 0;
    }
    .item-reset{
        i{
            display: inline-block;
            margin-right: 2px;
        }
        a{
            font-size: 16px;
            font-weight: 500;
            color: #fff;padding: 4px 6px;
            display: inline-block;background-color: $vi;
        }
    }
}

.pro-filtrate__toggle{
    position: absolute;
    right: 0;top: 50%;
    @include verticalY();
    a{
        @include slug(all,.3s);
        @include lineCenter();
        width: em(38,20);height: em(38,20);
        background-color: #707070;
        position: relative;
        margin-left: 16px;
        i{
            @include verticalXY();color: #fff;
            font-size: em(16,20);
        }
        &.on{
            background-color: $vi;
        }
    }
}

.page-product__list1{
    .caption{
        font-weight: 300;
    }
    
    .item-box{
        background-color: #fff;
        position: relative;
        padding-top: 50px;
    }
    article{
        text-align: center;
        position: relative;
    }
    .item-dec{
        position: absolute;
        right: 20px;top: 20px;
        width: 20px;height: 20px;
        cursor: pointer;
        z-index: 100;
        i{
            @include slug(all,.3s);
            display: block;position: absolute;
            left: 0;top: 0;width: 100%;height: 100%;
        }
        .item-dc1{
            background: url(../assets/images/icon-01.png) no-repeat center center;
            background-size: 20px 20px;
        }
        .item-dc2{
            opacity: 0;visibility: hidden;
            background: url(../assets/images/s-active.png) no-repeat center center;
            background-size: 20px 20px;
        }
    }
    .item-msg{
        @include slug(all,.3s);
        position: absolute;
        font-size: 14px;
        top: -26px;left: 50%;
        width: 48px;height: 20px;
        background-color: rgba(0,0,0,.3);
        color: #fff;line-height: 20px;
        text-align: center;pointer-events: none;
        @include verticalX();opacity: 0;
        visibility: hidden;
    }
    .active{
        .item-dec{
            .item-dc1{
                opacity: 0;visibility: hidden;
            }
            .item-dc2{
                opacity: 1;visibility: visible;
            }
        }
    }
    .item-label{
        // font-size: 16px;
        font-family: $enfont1;
    }
    .item-title{
        max-width: 270px;
        margin-left: auto;margin-right: auto;
        line-height: lh(30,20);max-height: 92px;
        overflow: hidden;word-break: break-all;
        text-overflow: ellipsis;
        display: -webkit-box; 
        -webkit-box-orient: vertical; 
        -webkit-line-clamp: 3; 
        margin-top: 2px;
    }
    .item-attr{
        margin-top: em(20,16);font-weight: 300;
    }
    figure{
        max-width: 80%;position: relative;
        margin-left: auto;margin-right: auto;
        overflow: hidden;
        &::before{
            content: "";display: block;
            padding-top: prop(510,710);
        }
        img{
            @include slug(transform,.2s);
            position: absolute;
            left: 0;top: 0;
            max-width: 100%;
            -webkit-backface-visibility: hidden;
            backface-visibility: hidden;
        }
    }
}
.product-table__full{
    background-color: #fff;position: relative;
}
.product-table__thead,
.product-table__tbody{
    font-size: 0;
    .item-rows,
    .item-main{
        @include lineCenter();font-weight: 500;
    }
    .item-rows{
        padding-right: 15px;
    }
    span{
        font-size: 16px;line-height: lh(26,16);
    }
    .item-hrow1{
        width: 22%;padding-left: prop(100,1420);
    }
    .item-hrow2{
        width: 22%;
    }
    .item-hrow3{
        width: 26%;
    }
    .item-hrow4{
        width: 27%;
    }
    .item-hrow5{
        width: 25%;
    }
    .item-main{
        width: 65%;
    }
    .item-hrow6{
        width: 8%;padding-right: 0;
    }
}
.product-main{
    background-color: #fff;
}
.product-table__thead{
    border-bottom: 1px solid $vi;
    padding-top: 30px;padding-bottom: 24px;
    .item-hrow2{
        padding-left: 40px;
    }
    
}
.product-table__tbody{
    li{
        padding: 24px 0;
        border-bottom: 1px solid #E4E4E4;
        &:last-child{
            border-bottom: none;
        }
    }
    .item-pic__box{
        position: relative;max-width: 140px;
        overflow: hidden;
        &::before{
            content: "";display: block;
            padding-top: prop(510,710);
        }
        img{
            @include slug(transform,.2s);
            position: absolute;
            left: 0;top: 0;
            max-width: 100%;
        }
    }
    .item-hrow2{
        font-size: 20px;
    }
    .item-top__cont,
    .item-bottom__cont{
        padding-left: 40px;
    }
    .item-top__cont{
        border-bottom: 1px solid #E4E4E4;
        padding-bottom: 24px;
    }
    .item-bottom__cont{
        font-size: 16px;color: #BEBEBE;
        font-weight: 500;margin-top: 20px;
        line-height: lh(26,16);
    }
    .item-add{
        position: relative;
        .icon-plus{
            @include slug(opacity,.3s);
            @include verticalXY();
            font-size: 18px;color: $vi;
        }
    }
    .item-title{
        span{
            @include slug(color,.3s);
        }
    }
}

.prodata-topCont{
    position: relative;
    background-color: #Fff;font-size: 0;
    .row-slick,
    .row-cont{
        @include lineTop();
        width: 49%;
    }
    .item-label{
        font-weight: 500;
    }
    .item-title{
        color: $vi;padding-right: 24px;
        position: relative;
    }
    .item-dec{
        position: absolute;
        right: 0;top: 12px;
        width: 20px;height: 20px;
        cursor: pointer;
        z-index: 100;
        i{
            @include slug(all,.3s);
            display: block;
            position: absolute;
            left: 0;top: 0;
            width: 100%;height: 100%;
        }
        .item-dc1{
            background: url(../assets/images/icon-01.png) no-repeat center center;
            background-size: 20px 20px;
        }
        .item-dc2{
            opacity: 0;
            visibility: hidden;
            background: url(../assets/images/s-active.png) no-repeat center center;
            background-size: 20px 20px;
        }
        &.active{
            .item-dc2{
                opacity: 1;visibility: visible;
            }
        }
    }
    .item-msg{
        @include slug(all,.3s);
        position: absolute;
        font-size: 14px;
        top: -26px;left: 50%;
        width: 48px;height: 20px;
        background-color: rgba(0,0,0,0.3);
        color: #fff;
        line-height: 20px;
        text-align: center;
        pointer-events: none;
        -webkit-transform: translateX(-50%);
        transform: translateX(-50%);
        opacity: 0;
        visibility: hidden;
    }
    .item-txt{
        margin-top: em(20,16);
    }
    .item-btn__box{
        
        a{
            margin-right: em(15,20);
        }
    }
}
.prodata-slick{
    padding-bottom: 30px;
    .item-pic{
        position: relative;
        &::before{
            content: "";display: block;
            padding-top: prop(510,710);
        }
        img{
            position: absolute;
            left: 0;top: 0;
            max-width: 100%;
        }
    }
}
.prodata-main{
    font-size: 0;
}
.prodata-sidebar,
.prodata-toggle__cont{
    @include lineTop();
    background-color: #fff;
}

.prodata-sidebar{
    width: prop(340,1420);
    ul{
        padding: 0 em(60,16);
    }
    li{
        margin-bottom: em(20,16);
    }
    a{
        @include slug(color,.3s);
        font-weight: 500;
    }
    .on{
        a{
            color: $vi;
        }
    }
}
.prodata-toggle__cont{
    font-size: 20px;
    padding-left: em(80,20);padding-right: em(80,20);
    width: prop(1058,1420);margin-left: prop(22,1420);
    .item-title{
        padding-bottom: em(10,20);border-bottom: 1px solid $vi;
        margin-bottom: em(15,20);
    }
    .item-box{
        display: none;
        &:first-child{
            display: block;
        }
    }
    table{
        width: 100%;font-size: 14px;color: $color1;
        font-weight: 300;border-collapse: collapse;
        tr{
            // display: block;padding: 10px 0;
            border-bottom: 1px solid #E4E4E4;
        }
        td{
            padding: 10px 0 10px 3px;
            line-height: 1.5;
            // @include lineTop();padding-left: 3px;
            // &:first-child{
            //     width: 25%;
            // }
            // &:last-child{
            //     width: 74%;
            // }
        }
    }
}

.prodata-tabs{
    display: none;
    &:first-child{
        display: block;
    }
}

.prodata-tab2{
    .item-box{
        margin: 10px;
        img{
            max-width: 100%;
        }
    }
}

.prodata-tab4{
    table{
        width: 100%;text-align: center;
        border-spacing: 0;
    }
    th,td{
        font-size: 16px;line-height: lh(26,16);
    }
    th{
        border-bottom: 1px solid $vi;
        padding-bottom: 16px;
    }
    td{
        border-bottom: 1px solid rgba(74,74,74,0.1);
    }
   
    .item-pic{
        position: relative;
        max-width: 140px;
        overflow: hidden;
        &::before{
            content: "";display: block;
            padding-top: prop(380,350);
        }
        img{
            @include slug(transform,.2s);
            position: absolute;
            left: 0;top: 0;
            max-width: 100%;
        }
    }
    a.icon-plus{
        @include slug(color,.3s);
    }
}

.prodata-toggle__box{
    background-color: #fff;
    padding-left: vw(200,1920);padding-right: vw(200,1920);
    p{
        img{
            max-width: 100%;
            width: auto !important;
            height: auto !important;
        }
    }
}

.product-config__main{
    background-color: #fff;
}

.product-cofing__model{
    padding-left: 80px;padding-right: 80px;
}

.product-cm__head{
    position: relative;
    padding-bottom: 4px;padding-top: 30px;
    border-bottom: 1px solid $vi;
    span{
        line-height: 1.5;
        .order{
            @include lineCenter();
            position: relative;
            top: -2px;
        }
    }
    .copy-btn{
        font-size: 18px;
        @include slug(color,.3s);
        margin-left: 4px;
    }
}
.product-cm__btnBox{
    position: absolute;
    right: 0;top: 4px;
    button{
        margin-left: 6px;
        outline: none;
        cursor: pointer;
        width: 180px;height: 42px;
        line-height: 42px;
        background-color: $vi;
        border-radius: 50px;
        color: #fff;border: none;
    }
}

.product-cofing__form{
    .item-title{
        font-size: 16px;
        font-weight: 500;
        margin-bottom: 12px;
    }
    input{
        position: absolute;
        opacity: 0;
    }
    .item-rows{
        margin-bottom: 40px;
        &:last-child{
            margin-bottom: 0;
        }
    }
    .item-column{
        @include lineCenter();
        margin-right: 20px;
        label{
            @include slug(border,.3s);
            display: inline-block;
            text-align: center;
            font-size: 14px;
            min-width: 264px;height: 50px;
            line-height: 48px;
            border: 1px solid #E4E4E4;
            margin-bottom: 10px;
            cursor: pointer;padding: 0 20px;
        }
        input:checked + label{
            border-color: $vi;
        }
    }
}

.prodata-down__check{
    @include lineCenter();
    margin-right: 20px;
    input{
        position: absolute;
        opacity: 0;
        &:checked + label{
            span{
                background-color: $vi;
                &::before{
                    -webkit-transform: rotate(45deg) scaleY(1);
                    transform: rotate(45deg) scaleY(1);
                }
            }
        }
    }
    label{
        @include lineCenter();
        font-size: 14px;
        padding-left: 20px;margin-right: 12px;
        position: relative;color: $vi;
        cursor: pointer;
        span{
            @include slug(all,.3s);
            display: inline-block;
            position: absolute;left: 0;
            top: 2px;width: 12px;height: 12px;
            border: 1px solid $vi;
            &::before{
                box-sizing: content-box;
                content: "";
                border: 1px solid #fff;
                border-left: 0;
                border-top: 0;
                height: 7px;
                left: 3px;
                position: absolute;
                top: 0;
                -webkit-transform: rotate(45deg) scaleY(0);
                transform: rotate(45deg) scaleY(0);
                width: 3px;
                -webkit-transition: transform .15s ease-in .05s;
                transition: transform .15s ease-in .05s;
                -webkit-transform-origin: center;
                transform-origin: center;
            }
        }
    }
    button{
        @include lineCenter();
    }
    
}
.prodata-back__list{
    text-align: center;
    .item-squ,
    span{
        display: inline-block;vertical-align: middle;
    }
    .item-squ{
        font-size: 0;
        width: 22px;
        i{
            display: inline-block;vertical-align: top;
            width: 6px;height: 6px;background-color: $vi;
            margin: 1px;
        }
    }
    span{
        font-size: 16px;
    }
}
@media (min-width: 861px){
    .prodata-topCont{
        min-height: 450px;
    }
}
@media (min-width: 1025px){
    .prodata-back__list{
        span{
            @include slug(color,.3s);
        }
        a{
            &:hover{
                span{
                    color: $vi;
                }
            }
        }
    }
    .pro-filtrate__list{
        .item-reset{
            a{
                @include slug(background,.3s);
                &:hover{
                    background-color: $vi;
                }
            }
        }
    }
    .prodata-tab4{
        .item-pic{
            a{
                &:hover{
                    img{
                        -webkit-transform: scale(1.1);
                        transform: scale(1.1)
                    }
                }
            }
        }
        a.icon-plus{
            &:hover{
                color: $vi;
            }
        }
    }
    .product-table__tbody{
        .item-pic{
            a{
                &:hover{
                    img{
                        -webkit-transform: scale(1.1);
                        transform: scale(1.1);
                    }
                }
            }
        }
        .item-title{
            a{
                &:hover{
                    span{
                        color: $vi;
                    }
                }
            }
        }
        .item-add{
            a{
                &:hover{
                    opacity: .7;
                }
            }
        }
    }
    .prodata-sidebar{
        a{
            &:hover{
                color: $vi;
            }
        }
    }
    .pro-filtrate__toggle{
        a{
            &:hover{
                background-color: $vi;
            }
        }
    }
    .prodata-topCont{
        .item-btn__box{
            position: absolute;
            bottom: 70px;
        }
        .item-dec{
            &:hover{
                .item-msg{
                    opacity: 1;visibility: visible;
                }
            }
        }
    }
    .page-product__list1{
        a{
            &:hover{
                figure{
                    img{
                        -webkit-transform: scale(1.1);
                        transform: scale(1.1);
                    }
                }
            }
        }
        .item-dec{
            &:hover{
                .item-msg{
                    opacity: 1;visibility: visible;
                }
            }
        }
    }
    .product-cm__head{
        .copy-btn{
            &:hover{
                color: $vi;
            }
        }
    }
}

@media (max-width: 1500px){
    .pro-classify__topCont{
        .item-txt{
            height: 82px;
        }
        .row-cont{
            font-size: 18px;
        }
    }
    .pro-filtrate__full,
    .prodata-toggle__cont{
        font-size: 18px;
    }
    .product-table__thead, .product-table__tbody{
        span{
            font-size: 14px;
        }
    }
    .product-table__tbody{
        .item-bottom__cont{
            font-size: 14px;
        }
        .item-hrow2{
            font-size: 18px;
        }
    }
    .pro-filtrate__list{
        .proft-btn,
        .pro-drop__select{
            font-size: 14px;
        }
        .item-reset{
            a{
                font-size: 14px;
            }
        }
    }
    .product-cofing__model{
        padding-left: 60px;padding-right: 60px;
    }
    .product-cofing__form{
        .item-column{
            label{
                min-width: 230px;
            }
        }
    }
    .prodata-down__check{
        margin-right: 14px;
    }
}

@media (max-width: 1440px){
    .prodata-down__check{
        margin-bottom: 16px;
    }
}
@media (max-width: 1366px){
    .pro-classify__topCont{
        .row-cont{
            font-size: 16px;
            padding: 40px 20px;
        }
    }
    .pro-filtrate__full,
    .prodata-toggle__cont{
        font-size: 16px;
    }
}
@media (max-width: 1280px){
    .prodata-topCont{
        .item-btn__box{
            a{
                margin-bottom: 16px;
            }
        }
    }
}
@media (max-width: 1200px){
    .pro-classify__list{
        article{
            padding: 40px 20px;
        }
    }
}

@media (max-width: 1024px){
    .pro-classify__list{
        article{
            width: 100%;
        }
        a{
            padding: 0;
        }
    }
    .pro-classify__topCont{
        .row-cont{
            font-size: 14px;
        }
    }
    .pro-filtrate__full{
        font-size: 14px;
    }
    .pro-filtrate__list{
        li{
            margin-bottom: 14px;
        }
    }
    .prodata-toggle__cont{
        padding-left: 30px;padding-right: 30px;
    }
    .prodata-sidebar{
        ul{
            padding-left: 20px;padding-right: 20px;
        }
    }
    .prodata-topCont{
        .item-btn__box{
            margin-top: 30px;
            a{
                line-height: 40px;
            }
        }
    }
    .pro-filtrate__toggle{
        top: 20px;
        -webkit-transform: translateY(0);transform: translateY(0);
    }
    .product-table__full{
        overflow-x: auto;
        &::-webkit-scrollbar {
            display: none; 
        }
    }
    .product-table__thead,
    .product-table__tbody{
        width: 1000px;
    }
    .product-cofing__model{
        padding-left: 40px;padding-right: 40px;
    }
    .prodata-toggle__box{
        padding-left: 20px;padding-right: 20px;
    }
}

@media (max-width: 860px){
    .prodata-topCont{
        .row-slick,
        .row-cont{
            width: 100%;
        }
        .row-cont{
            padding: 40px 30px;
            text-align: center;
        }
        .item-txt{
            margin-top: 10px;
        }
    }
}
@media (max-width: 800px){
    .pro-classify__topCont{
        .row-pic,
        .row-cont{
            width: 100%;
        }
        .item-txt{
            height: auto;
        }
        .item-ctitle{
            margin-bottom: 16px;
        }
    }
    .prodata-sidebar,
    .prodata-toggle__cont{
        width: 100%;
    }
    .prodata-toggle__cont{
        margin-left: 0;
    }
    .prodata-sidebar{
        margin-bottom: 20px;
        ul{
            padding-left: 0;padding-right: 0;
            margin-left: 20px;margin-right: 20px;
            overflow-x: scroll;
            overflow-y: hidden;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
            &::-webkit-scrollbar{
                display: none
            }
        }
        li{
            display: inline-block;
            margin-right: 24px;
        }
    }
   
    .pro-classify__list{
        a{
            text-align: center;
            border-left: none;
            border-bottom: 2px solid $vi;
        }
    }
}

@media (max-width: 700px){
    .pro-classify__list{
        li{
            width: 100%;
        }
    }
    // .prodata-toggle__cont{
    //     table{
    //         td{
    //             &:first-child,
    //             &:last-child{
    //                 width: 100%;
    //             }
    //             &:last-child{
    //                 margin-top: 5px;
    //             }
    //         }
    //     }
    // }
}

@media (max-width: 650px){
    .pro-filtrate__list{
        .proft-btn{
            padding-right: 18px;
        }
    }
    .prodata-toggle__cont{
        padding-left: 20px;padding-right: 20px;
        .item-txt{
            overflow: hidden;
        }
        .item-scroll{
            overflow-x: auto;
            overflow-y: hidden;
            white-space: nowrap;
            display: -webkit-box;
            -webkit-overflow-scrolling: touch;
        }
        table{
            width: 600px;
        }
    }
    .prodata-topCont{
        .row-cont{
            padding-left: 20px;padding-right: 20px;
        }
    }
    .pro-classify__list{
        .item-txt{
            max-height: auto;
        }
    }
    .page-product__list1{
        .item-dec{
            .item-dc1{
                background-size: 16px 16px;
            }
        }
    }
    .product-cofing__model{
        padding-left: 20px;padding-right: 20px;
    }
    .product-cofing__form{
        .item-column{
            margin-right: 12px;
            label{
                min-width: 180px;height: 42px;
                line-height: 40px;
            }
        }
    }
   
    .product-cm__btnBox{
        position: relative;
        top: auto;right: auto;
        button{
            width: 100%;
            margin-bottom: 20px;
        }
    }
}

@media (max-width: 500px){
    .prodata-topCont{
        .item-btn__box{
            a{
                width: 100%;
            }
        }
    }
    .prodata-down__check{
        width: 100%;
        margin-right: 0;
        label{
            margin-bottom: 6px;
        }
        button{
            width: 100%;
        }
    }
}