
.view_more {
    width: 10rem;
    height: 2.5rem;
    line-height: 2.5rem;
    text-align: center;
    background: var(--comcolor);
    color:#fff;
}
.view_more a{
    color:#fff;
}



.category { position: relative;width: 100%;padding:8rem 0 3rem;background: url('/static/images/category.webp');background-size: cover;background-position: center center;}
.category img{width: 100%;}
.category .title { margin-bottom: 5rem;background: #00000047;padding:2rem 1rem;}
.category .title .name { font-size: 2.5rem;font-weight: 800;color:var(--comcolor);}
.category .title .line {
    width: 20rem;
    height: 3px;
    position: relative;
    margin: 0.6rem 0;
    background: #d5d4d4;
}
.category .title .line::before {
    content: '';
    width: 30%;
    height: 3px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background: var(--comcolor);
}
.category .title .text { font-size: 1.2rem;line-height: 2.4rem;color:#fff;margin-top: 2rem;}

.categoryNav {
    margin-top: 3rem;
    display: flex;
    justify-content: space-between;
}
.categoryNav li {
    width: 18%;
}
.categoryNav li a{
    padding:0 0.5rem;
    height:10rem;
    border: 1px solid #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    color:#fff;
}
.categoryNav li a:hover,.categoryNav li.cur a{
    background:var(--comcolor);
}


@media  screen and (max-width: 1000px){
    .category { padding:2rem 0;}
    .category .title .name { font-size: 2rem;}
    .category .title { margin-bottom: 2rem;}
    .categoryNav {
        margin-top: 2rem;
        flex-wrap: wrap;
    }
    .categoryNav li {
        width: 48%;
        margin-bottom: 0.5rem;
    }
    .categoryNav li a {
        height: 5rem;
    }
}



.products {position: relative;padding:10rem 0;}
.products .cont { display: flex;align-items: center;justify-content: space-between;z-index: 9}
.products .box1 { width:35%;display: flex;flex-direction: column;justify-content: center;}
.products .title .name { font-size: 2.5rem;font-weight: 800;color:var(--comcolor);}
.products .title .line {
    width: 20rem;
    height: 3px;
    position: relative;
    margin: 1rem 0;
    background: #d5d4d4;
}
.products .title .line::before {
    content: '';
    width: 30%;
    height: 3px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background: var(--comcolor);
}

.products ul { max-height: 50vh;overflow: auto;}
.products ul li {margin: 0;padding: 0;list-style: none;}
.products ul li a {display: block;padding: 0.6rem;position: relative;overflow: hidden;color: #fff;font-size: 1rem;}
.products ul li a::before {content: '';width: 0.3rem;height: 0.3rem;position: absolute;left: 0;top: 50%;margin-top: -2px;background: #fff;opacity: .4;}
.products ul li a::after {content: '';width: 100%;height: 1px;position: absolute;left: 0;bottom: 0;background: #fff;opacity: .4;}
.products ul li a:hover {color:var(--comcolor);opacity: 1;}
.products ul li a:hover::after {background: var(--comcolor);opacity: 1;}


.products .box2 { width: 60%;display: flex;flex-direction: column;justify-content: center;}
.products .box2 h3 { font-size: 1.5rem;margin-bottom: 1rem; text-align: center;color:#fff;}
.products .box2 .text { font-size: 1.2rem;line-height:2rem; color:#fff;}
.products .box2 .view_more { margin: 2rem auto;}

@media  screen and (max-width: 1000px){
    .products {padding:5rem 0;}
    .products .cont { display: block}
    .products .box1{ width: 100%;margin-bottom: 2rem;}
    .products .title .name {font-size: 2rem; }
    .products .box2 { width: 100%;}
}






.productList {margin-top: 3rem;}
.productList li {
    display: block;
    float: left;
    margin-bottom: 2rem;
    background: #fff;
    box-shadow: 2px 2px 10px #909090;
}
.productList li * {
    transition: all .5s ease;
    -moz-transition: all .5s ease;
    -webkit-transition: all .5s ease;
    -o-transition: all .5s ease;
}
.productList li .pic {
    width: 100%;
    overflow: hidden;
}
.productList li .pic img {
    width: 100%;
    vertical-align: middle;
}
.productList li .item {
    padding: 1rem;
}
.productList li .tit {
    font-size: 1rem;
    min-height: 3rem;
    width: 98%;
    color: #333;
    border-bottom: 1px solid #eee;
    text-align: center;
}
.productList li .line {
    width: 0;
    height: 4px;
    background: var(--comcolor);
    position: relative;
    left: 0;
    bottom: 0;
    transition: all 0.6s ease;
}
.productList li:hover .line {
    width:100%;
}
.productList li .btn{
    overflow: hidden;
    width: 100%;
    height:2.5rem;
    border-bottom: 1px solid #eee;
    margin: 0 auto;
    margin-top: 1.2rem;
    border-radius: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}
.productList li .btn a {
    width: 50%;
    height: 2.5rem;
    font-size: 0.9rem;
    color: #777777;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.productList li .btn a:first-child {
    border-right: 1px solid #eaeaea;
}
.productList li .btn a:hover {
    color: var(--comcolor);
}


@media  screen and (min-width: 1000px){
    .productList li {
        width: 23.5%;
        margin-right: 2%;
    }
    .productList li:nth-child(4n){
        margin-right:0;
    }
    .productList li:nth-child(4n+1){
        clear: both;
    }
}
@media  screen and (max-width: 1000px){
    .productList li {
        width: 49%;
        margin-right: 2%;
    }
    .productList li:nth-child(2n){
        margin-right:0;
    }
    .productList li .btn {display: none;}
}







/*内页*/
.productDetail {

}
.breadcrumb {
    height:3.6rem;
    border-bottom: 1px solid #ebebeb;
    display: flex;
    align-items: center;
}
.breadcrumb i { margin: 0 0.5rem;color: #fff;}
.breadcrumb a { color: #fff;}

.productDetail .detail1 {background: #6d6d6d;padding-top: 6.5rem;}
.productDetail .proInfo {
    display: flex;
    justify-content: space-between;
    margin-top: 3rem;
}
.productDetail .describe { width: 50%;}
.productDetail .title .name { font-size: 2.5rem;font-weight: 800;color:var(--comcolor);}
.productDetail .title .line {
    width: 20rem;
    height: 3px;
    position: relative;
    margin: 0.6rem 0;
    background: #d5d4d4;
}
.productDetail .title .line::before {
    content: '';
    width: 30%;
    height: 3px;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1;
    background: var(--comcolor);
}
.productDetail .title .text { font-size: 1.2rem;line-height: 2.4rem;color:#fff;margin-top: 2rem;}

.productDetail .pic { width: 40%;}

@media  screen and (max-width: 1000px){
    .productDetail .detail1{ padding-top: 0; }
    .productDetail .proInfo { display: block;}
    .productDetail .describe {width: 100%;margin-bottom: 2rem;}
    .productDetail .pic { width: 100%;}
    .breadcrumb {flex-wrap: wrap;}
    .breadcrumb a {font-size: 0.8rem;}
}



.productDetail .detail2 {padding:3rem 0;background: #f9f9f9;}
.technical {}
.technical .files { max-height: 50vh;overflow: auto;margin-top: 3rem;}
.technical .files a {display: block;padding: 0.6rem;position: relative;overflow: hidden;color: #4e4e4e;font-size: 1rem;}
.technical .files a::before {content: '';width: 0.3rem;height: 0.3rem;position: absolute;left: 0;top: 50%;margin-top: -2px;background: #4e4e4e;opacity: .4;}
.technical .files a::after {content: '';width: 100%;height: 1px;position: absolute;left: 0;bottom: 0;background: #4e4e4e;opacity: .4;}
.technical .files a:hover {color:var(--comcolor);opacity: 1;}
.technical .files a:hover::after {background: var(--comcolor);opacity: 1;}
.technical .content { width: 100%;overflow-x: auto;}

.technical .propic { margin-top: 2rem;}

table {
    width:100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}
table tbody tr {
    height: 3rem;
}
td {
    border: solid 1px #ddd;
    vertical-align: middle;
    text-align: center;
    font-size: 1rem;
    line-height: 2;
    color: #212529;
    padding:0 0.5rem;
}


@media  screen and (max-width: 1000px){
    .technical .title {margin-bottom: 2rem;}
}