.checkbox {
    font-size: 14px;
    width: 20px;
    height: 20px;
    position: relative;
    vertical-align: middle;
    margin-right: 5px;
}

.checkbox:after {
    position: absolute;
    width: 20px;
    height: 20px;
    content: " ";
    background-color: #fff;
    color: #fff;
    display: inline-block;
    visibility: visible;
    border-radius: 3px;
    border: 1px solid #cccfd5;
}

/* checkbox选中样式 */
.checkbox.act:before {
    content: "✓";
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    color: var(--comcolor);
    font-weight: 900;
    z-index: 1;
    font-size: 14px;
}


.category_nav {position: relative;}
.category_nav .top {
    height:5rem;width: 100%;
    color: var(--comcolor);
    margin-bottom: 0.5rem;display: flex;justify-content: space-between;align-items: center;padding:0 0.6rem;
    border-bottom: 1px solid #eee;
}
.category_nav .top .cn {font-size: 2rem;font-weight: 600;}
.category_nav .top .en {font-size: 1rem;text-transform: uppercase;}
.category_nav .top .iconfont {font-size: 2rem;}
.category_nav .item {
    font-size:1rem;display: flex;align-items: center;position: relative;
    color:var(--comcolor);
    height: 3rem;padding: 0 0.6rem;
    cursor:pointer;
    border-bottom: 1px solid #eee;
}
.category_nav .item>a {
    display: flex;align-items: center;
}
.category_nav .iconfont {
    position: absolute;right: 3%;cursor:pointer;
}
.category_nav .sub_item a {
    display: block;
    position: relative;
    border-bottom: 1px solid #eeeeee;
    padding: 1rem 0.2rem;
    color: #000000;
    font-size: 0.9rem;
}
.category_nav .item.act {border:1px solid var(--subcolor)}
.category_nav .item:hover,.category_nav .sub_item a:hover{color:var(--subcolor);}
.category_nav .sub_item a.act{color:var(--comcolor);}


table {
    width:100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}
table tbody tr {
    height: 3rem;
}
table td {
    border: solid 1px #ddd;
    vertical-align: middle;
    text-align: center;
    font-size: 0.9rem;
    line-height: 2;
    color: #212529;
    padding:0 0.5rem;
}
table tr:hover td,table tr:hover td a {color:var(--subcolor)}

.table1 tr:nth-child(1) { background: var(--comcolor);}
.table1 tr:nth-child(1) td {color:#fff;}

.table1 tr td.name {width:15%;}
.table1 tr td.intro {width:20%;text-align: left;}
.table1 tr:nth-child(n+2):nth-child(even) {
    background-color: #fff;
}
.table1 tr:nth-child(n+2):nth-child(odd) {
    background-color: #f9f9f9;
}






/*分类*/

.category_container {background: url('/static/images/pro/bg.jpg');position: relative;width:100%;}
.category_container .main {position: relative;width:100%;}
.category_container .topbg {
    position: relative;
    width:100%;
    z-index: 5;
    transform: translateY(-50%);
}
.category_container .img1 {
    position: absolute;
    left:6%;
    top:0;
    width:30vw;
    height:30vw;
    z-index: 8;
}
.category_container .img2 {
    position: absolute;
    left:6%;
    top:0;
    width:30vw;
    height:30vw;
    z-index: 7;
}


.application_selection {
    position: absolute;
    left: 36%;
    top: 10%;
    z-index: 11;
}
.application_selection p {
    line-height: 2rem;
    margin-bottom: 1rem;
}
.application_selection .p1 {
    background: linear-gradient(to right,
    red, orange, #9b9b18, green, blue, indigo, violet);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    font-size: 1.5rem;
}
.application_selection .view_more {
    z-index: 10;
    width: 10rem;
    height:3rem;
    line-height: 3rem;
    text-align: center;
    font-size: 1rem;
    border: 1px solid var(--comcolor);
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 1rem;
    border-radius: 1rem 0 1rem 0;
    transition: 0.5s;
}
.application_selection .view_more a{
    width: 100%;
    color: var(--comcolor);
    display: flex;
    justify-content: space-between;
}
.application_selection .view_more:hover {
    background: var(--comcolor);
    border-radius: 1.5rem;
}
.application_selection .view_more:hover a{
    color: #fff;
}


@media  screen and (min-width: 1000px){
    .category_container .main {margin-bottom: -45%;}
    .category_container .tong {
        position: relative;
        width:100%;
        z-index: 9;
        transform: translateY(-52.5%);
    }
    .category_container .category {position: absolute;left:0;top:0;width:100%;height:100%;z-index: 10;}
    .category_container .category li a { display: flex;align-items: center;}
    .category_container .category li .dot {margin-right:0.5rem;width:1rem;height:1rem;background: var(--comcolor);border-radius: 50%;position: relative;}
    .category_container .category li .dot .pulse{
        position:absolute;
        top:-1rem;left:-1rem;
        height:3rem;width:3rem;
        border-radius:3rem;
        opacity:.12;filter:alpha(opacity=0);
        animation:warn 2s ease-out both;
        animation-iteration-count:infinite;background:0 0;
        border-color:#009fd9;box-shadow:0 0 12px #0080d9,0 0 20px #0080d9 inset
    }
    .category_container .category li .dot .delay-1{animation-delay:-.4s}
    .category_container .category li .dot .delay-2{animation-delay:-.8s}
    .category_container .category li .dot .delay-3{animation-delay:-1.2s}
    @keyframes warn{
        0%{transform:scale(0);opacity:1}
        100%{transform:scale(1);opacity:0}
    }


    .category_container .category li:nth-child(1){
        position: absolute;
        left:42%;
        top:-5.2%;
    }
    .category_container .category li:nth-child(2){
        position: absolute;
        left:37%;
        top:3.5%;
    }
    .category_container .category li:nth-child(3){
        position: absolute;
        left:57.5%;
        top:-0.5%;
    }
    .category_container .category li:nth-child(4){
        position: absolute;
        left:65%;
        top:7%;
    }
    .category_container .category li:nth-child(5){
        position: absolute;
        left:67%;
        top:17%;
    }
}

@media  screen and (max-width: 1000px){
    .category_container .img1 {
        position: relative;
        width:30vw;
        height:30vw;
        z-index: 8;
    }
    .category_container .img2 {
        position: absolute;
        left:6%;
        top:0;
        width:30vw;
        height:30vw;
        z-index: 7;
    }
    .application_selection {
        width:50%;
        left:auto;
        right:5%;
        top:0;
    }
    .category_container .tong {
        position: absolute;
        width:100%;
        z-index: 9;
        transform: translateY(-52.5%);
    }
    .category_container .category {position:relative;width:95%;left:2.5%;display: block;padding: 2rem 0;z-index: 11;}
    .category_container .category li{
        width:49%;
        margin-right: 2%;
        position:relative;
        background: #f4f4f4d6;
        float: left;
        margin-bottom: 0.6rem;
    }
    .category_container .category li:nth-child(2n){
        margin-right: 0;
    }
    .category_container .category li:after{
        content:"";
        position:absolute;
        width:0;
        top:0;
        left:0;
        height:100%;
        background: linear-gradient(to right, #007dc3, #7b95b1);
        transition:all .5s;
    }
    .category_container .category li .name{
        height: 3rem;
        padding: 0 0.5rem;
        color: #333;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 0.9rem;
    }
}




/*产品列表*/
.products_container .category_nav { margin: 2rem 0; }

@media  screen and (min-width: 1000px){
    .products_container .category_nav .item {
        width:32%;
        float: left;
        margin-right: 2%;
    }
    .products_container .category_nav .item:nth-child(3n) {
        margin-right: 0;
    }
}
@media  screen and (max-width: 1000px){
    .products_container .category_nav .item {
        width:49%;
        float: left;
        margin-right: 2%;
    }
    .products_container .category_nav .item:nth-child(2n) {
        margin-right: 0;
    }
}





/** 产品内页 **/

.pro_banner {
    width: 100%;
    height:50vh;
    position: relative;
    background: #000000;
}

.pro_banner .tit{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 10;
}
.pro_banner .tit .name1{
    font-size: 2.5rem;
    color:#fff;
    font-weight: 600;
    width:50%;
}
.pro_banner .tit .line{
    width:4rem;
    height:2px;
    background-color: var(--subcolor);;
    margin: 1.5rem 0;
}
.pro_banner .tit .name2{
    font-size: 1.5rem;
    color:#fff;
}
.pro_banner .scroll{
    position: absolute;
    bottom:10%;
    left:50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
}
.pro_banner .scroll .ro0 {
    transition: .25s ease-out;
    stroke: #fff;
}
.pro_banner .scroll span{
    margin-left: 0.5rem;
    color: hsla(0, 0%, 100%, .6);
    background: linear-gradient(90deg, hsla(0, 0%, 100%, .6) 0, #fff 30%, hsla(0, 0%, 100%, .6) 50%);
    background-position: 0;
    background-clip: text;
    animation: shines-data 5s linear infinite;
    animation-fill-mode: forwards;
}
@-webkit-keyframes shines-data {
    0% {
        background-position: 0
    }
    to {
        background-position: 120px
    }
}



.breadcrumb {margin-top: 0;padding:0;height: 3.6rem;display: flex;}



.product_container {
    display:flex;
    justify-content: space-between;
    margin: 0 auto;
    padding: 3rem 0 2rem;
}

.product_container .category_nav {
    width: 25%;
}
.product_container .category_nav .item i {
    width:2rem;
    height:2rem;
    background: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
}
.product_container .product{
    width:72%;
    margin-bottom: 2rem;
}


.product_container .detail .name {
    font-size: 2rem;font-weight: 600;color: #333;
    display: inline-block;padding-bottom:1rem;border-bottom:1px solid  #cecece;
}
.product_container .detail img {
    max-width:100%;
}
.product_container .detail p{
    line-height: 2;
}

.product_container .contact {padding: 1rem 0;border-bottom: 1px dashed #cbcbcb;margin-bottom: 2rem;}
.product_container .contact .tit {font-size: 1rem;line-height: 2rem;margin-bottom: 1rem;}
.product_container .contact .box {display: flex;}
.product_container .contact .phone {width:16rem;margin-bottom: 5px;background: var(--comcolor);
    padding:0.6rem;margin-right:1rem;border-radius: 0.5rem;font-size: 1rem;display: flex;align-items: center}
.product_container .contact .phone i {color:#fff;font-size: 1rem;}
.product_container .contact .phone .number{padding-left:10px;color:#fff;}








@media  screen and (max-width: 1000px){
    .pro_banner,
    .product_container .category_nav2
    {
        display: none;
    }
    .product_container { display: block;padding-top: 0;}
    .product_container .product {width:100%;margin-top: 2rem;margin-left: 0;}
    .product_container .product .detail {
        display: block;
    }
    .product_container .product .contact .box {
        display: block;
    }


    .products_container .products {
        width:100%;
        overflow-x: auto;
    }

    .table1 {
        width: auto;
    }
    .table1 td { min-width: 10rem;}
}