﻿@charset "utf-8";
/**/
.top-po{
    background: #E0E0E0;
    font-weight: 600;
    color: #1a1a1a !important;
    position: relative;
}
.top-po a{color: #1a1a1a !important;}
.top-po:after{
    content: '';
    width: 100%;
    height: 3px;
    background: #B70A06;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 0;
}
.top-po:before{
    content: "";
    position: absolute;
    bottom: 0;
    left: calc(50% - 10px);
    right: auto;
    width: 0;
    height: 0;
    border-left: .6rem solid transparent;
    border-right: .6rem solid transparent;
    border-bottom: .3rem solid #fff;
    background: transparent;
    z-index: 0;
}
.top-po:hover:before{
    border-left: .6rem solid transparent;
    border-right: .6rem solid transparent;
    border-bottom: .3rem solid #B70A06;
    background: transparent;
}
.header-on:after{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100px;
    border-bottom: 2px solid #B70A06;
    transition: 0.2s all linear;
    z-index: 0;
}
.product-wrap{
    width: 100%;
   float: left;
   padding: 95px 0px 140px 0px;
}
.proudct-box{
    width:30.66%;
    float: left;
    margin-right: 4%;
    box-shadow: 0px 0px 5px 1px #E4E6E5;
    background: #fff;
    position: relative;
    margin-top: 45px;
}
.proudct-box:nth-child(3n){margin-right: 0px;}
.proudct-img{width: 100%;float: left;height: 370px;}
.proudct-tbox{
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    background: linear-gradient(0deg,#fff 0,hsla(0,0%,100%,.66) 33%,hsla(0,0%,100%,0));
}
.proudct-text{
    width: 90%;
    position: absolute;
    margin-left: 5%;
    font-size: 1.25rem;
    bottom: 15px;
    left: 0px;
    text-align: center;
}
.proudct-icon{
    width: 20px;
    height: 20px;
    display: inline-block;
    background: url(../images/swiper-right4.png) no-repeat center center;
    background-size: 100%;
    margin-left: 12px;
    vertical-align: middle;
}
.proudct-box:hover:after{
    content: '';
    width: 100%;
    height: 100%;
    position: absolute;
    border:2px solid #B60B04;
    left: -2px;
    top: -2px;
    z-index: 2;
}
.proudct-box:hover .proudct-icon{
    background: url(../images/swiper-right3.png) no-repeat center center;
    background-size: 100%;
}
.proudct-box:hover .proudct-text{
    color: #B80604;
}
/**/
.p-detail-wrap{
   width: 100%;
   float: left;
   padding: 50px 0px 100px 0px;
}
.p-detail-left{
    width: 47%;
    float: left;
}
.p-detail-text{
    width: 100%;
    float: left;
    font-size: 1.125rem;
    margin-top: 15px;
    line-height: 1.7rem;
    margin-bottom: 15px;
}
.p-detail-tbox1{
    width: 100%;
    float: left;
    margin-top: 20px;
    font-size: 1.125rem;
}
.p-detail-square{
    width: 11px;
    height: 11px;
    float: left;
    background: #B60A0A;
    margin-top: 5px;
}
.p-detail-right{
    width: 47%;
    float: right;
}
.p-detail-imgbox{
    width: 98%;
    float: left;
    height: 390px;
    border:3px solid #B70A06;
}
.p-detail-imgbox2{
    width: 100%;
    height: 390px;
    display: table;
    text-align: center;
}
.p-detail-img{
    max-width: 100%;
    display: inline-block;
    max-height: 390px;
}
.p-d-smallimg{
    width: 22.75%;
    float: left;
    position: relative;
    height: 84px;
    margin-right: 3%;
    cursor: pointer;
}
.p-d-smallimg:nth-child(4n){margin-right: 0px;}
.smallimg-box{
    width: 100%;
    height: 84px;
    float: left;
    text-align: center;
    display: table;
}
.smallimg-img{
    max-width: 100%;
    display: inline-block;
    max-height: 84px;
}
.img-on:after{
    width: 97.5%;
    height: 80px;
    position: absolute;
    content: '';
    top: 0px;
    left: 0px;
    border:2px solid #B70D00;
    background: url(../images/search-icon3.png)no-repeat center center rgba(255,255,255,0.5);
    background-size: 34px;
}
/**/
.detail-banner{
    width: 100%;
    float: left;
    height: 530px;
    position: relative;
}
.detail-bimg{
    width:100%;
    float: left;
    height: 530px;
    object-fit: cover;
}
.detail-banner-box{
    width:100%;
    position: absolute;
    height: 530px;
    display: table;
    top: 0px;
    left: 0px;
    z-index: 2;
    text-align: center;
}
.detail-b-text{
    width:100%;
    display: inline-block;
    font-size: 3.75rem;
    color: #fff;
    line-height: 4rem;
}
.detail-b-text2{
    width:100%;
    display: inline-block;
    font-size: 2rem;
    color: #fff;
    line-height: 3rem;
    margin-top: 15px;
}
.about-us-btn{
    float: none;
    display: inline-block;
    margin-top: 57px;
}
/**/
.detail-table{
    width: 100%;
    padding: 120px 0px;
    float: left;
}
.detail-table table{
    width: 100%;
    float: left;
    box-shadow: 0px 0px 25px 2px #DDDDDD;
}
.detail-table table thead tr{
    border-bottom: 1px solid #AEAEAE;
    box-shadow: 0px -5px 5px 0px #DEDEDE;
}
.detail-table table thead tr th{
    padding: 26px 30px;
    line-height: 25px;
    font-weight: 800;
    font-size: 1.25rem;
}
.detail-table table tbody tr{
    border-bottom: 1px solid #AEAEAE;
    box-shadow: 0px -5px 8px 0px #DEDEDE;
}
.detail-table table tbody tr td{
    padding: 15px 30px;
    line-height: 25px;
    font-size: 1.125rem;
}
.table-h5{display: none;}
@media only screen and (max-width: 1270px) {
    .proudct-img{height:340px;}
}
@media only screen and (max-width: 1100px) {
    .proudct-img{height:300px;}
}
@media only screen and (max-width: 900px) {
    .proudct-img{height:230px;}
}
@media only screen and (max-width: 1010px) {
   .p-detail-left{width: 100%;margin-top: 30px;}
   .p-detail-right{width: 100%;}
}
@media only screen and (max-width: 800px) {
    .proudct-box{width: 48%;}
    .proudct-box:nth-child(3n){margin-right: 4%;}
    .proudct-box:nth-child(2n){margin-right: 0px;}
    .proudct-img{height:320px;}
}
/* 手机等小屏幕手持设备 */
@media screen and (min-width: 320px) and (max-width: 480px) {
    .p-detail-wrap,.product-wrap{padding: 40px 0px;}
    .detail-table{padding: 40px 0px;}
    .table-h5{display: block;}
    .table-web{display: none;}
    .proudct-box{width: 100%;margin-right: 0px !important;}
    .proudct-img{height:auto;}
    .proudct-icon{display: none;}
}
