:root {
    /* color*/
    --pri : #005aaa;
    --dark : #2c2c2c;
    --basecolor: #e62129;
    --basecolor2: #e62129;
    --basecolor3: #f2a705;

    --bd6 : 6px;
    --bd12 : 12px;
    --bd16 : 16px;

    /* font-size */
    --inner: 1400;

    --fz12 : clamp(10px, calc( 12 / var(--inner) * 100vw ), 12px);
    --fz14 : clamp(12px, calc( 14 / var(--inner) * 100vw ), 14px);
    --fz16 : clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px);
    --fz18 : clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px);
    --fz20 : clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px);
    --fz22 : clamp(16px, calc( 20 / var(--inner) * 100vw ), 22px);
    --fz24 : clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px);
    --fz28 : clamp(24px, calc( 28 / var(--inner) * 100vw ), 28px);
    --fz30 : clamp(28px, calc( 30 / var(--inner) * 100vw ), 30px);
    --fz36 : clamp(32px, calc( 36 / var(--inner) * 100vw ), 36px);
    --fz46 : clamp(20px, calc( 46 / var(--inner) * 100vw ), 46px);
    --fz56 : clamp(52px, calc( 56 / var(--inner) * 100vw ), 56px);
    --fz64 : clamp(20px, calc( 64 / var(--inner) * 100vw ), 64px);

    --container-space : clamp(16px, calc( 30 / var(--inner) * 100vw ), 30px);
}
.header .sub-list .link {
    display: block;
    padding: 15px;
    font-weight: normal;
    color: #333;
}
.detail .pic .rect-pic{
    width:99%;
}
.crumb  .product-category-nav{
    background: var(--basecolor);
    font-size: 0;
    padding: 2px 0 10px 0px;
}
.crumb .product-category-nav .item {
    width: 20%;
    display: inline-block;
    text-align: left;
    padding: 0 20px;
    position: relative;
}
.crumb .product-category-nav .item:after{
    content: "";
    width:1px;
    height:40%;
    background:#ffffff;
    position: absolute;
    left:10px;
    top:30%;
}
.crumb .product-category-nav .item .link {
    font-size: var(--fz18);
    display: inline-block;
    position: relative;
    padding: 10px 0;
    color: #ffffff;
}
.crumb .product-category-nav .item .link:hover,
.crumb .product-category-nav .item .link:focus,
.crumb .product-category-nav .item .active{
    font-weight: bold;
}

.detail-box {
    /*margin: 3% 0;*/
    /*padding: 3% 0;*/
}
.detail-box p
{padding:5px 0px; word-break: break-all;}

.detail-nav {
    margin: 3% 0;
    background: #f6f6f6;
}

.detail-nav .cn {
    display: inline-block;
    color: var(--basecolor);
    text-align: center;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    padding: 10px 30px;
    font-size: var(--fz24);
    font-weight: bold;
    background: none;
    position: relative;
}
.detail-nav .cn:after {
    content: "";
    position: absolute;
    left: 30px;
    width: 92px;
    height: 3px;
    bottom: -1px;
    background: var(--basecolor);
}

.News-Index{
    width: 100%;
}
.News-Index .news-list-main{
    display: flex;
    justify-content: space-between;
    width: 100%;
    flex-wrap: wrap;
}
.News-Index .pic {
    margin-top:30px;
    width: 30.5%;
    overflow: hidden;
    position: relative;
    background: #ffffff;
}
.News-Index .clear-y:after{
    display: none;
}
.News-Index .pic:after{
    position: absolute;
    content: "";
    width: 100%;
    height: 4px;
    left: 0;
    bottom: 0;
    border-bottom: 4px solid var(--basecolor);
    transform: scaleX(0);
    transition:transform 0.5s;
    transform-origin: right center;
    z-index: 999;
}
.News-Index .pic:hover:after{
    transform: scaleX(1);transform-origin: left center;
}
.News-Index .pic-right{
    width: 36.5%;
}

.News-Index .pic .link {
    position: relative;
    z-index: 2;
    display: block;
    height: 100%;
    background: #ffffff;
}

.News-Index .pic .link .rect-pic {
    padding-bottom: 66%;
}

.News-Index .pic .link .rect-pic img {
    width: 100%;
}

.News-Index .pic .link .text {
    width: 100%;
    padding: 24px;
    position: relative;
}

.News-Index .pic .link .text .title {
    color: #333;
    min-height: 2.4em;
    font-size: var(--fz24);
    line-height: 1.2;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.News-Index .pic .link .text .desc {
    font-size: var(--fz16);
    height: 40px;
    line-height: 20px;
    overflow: hidden;
    margin: 15px 0 0px;
    color:#666666;
}

.News-Index .pic .link .text:after {
    position: absolute;
    content: "";
    right: 0;
    bottom: 0;
    border: 10px solid transparent;
}

.News-Index .pic .link .time {
    text-align: center;
}

.News-Index .pic .link .date {
    display: block;
    padding: 10px 0;
    vertical-align: middle;
    font-size: var(--fz16);
    color: #999;
}

.News-Index .pic .link .day {
    font-size: var(--fz14);
}

.News-Index .pic .link .more {
    display: inline-block;
}

.News-Index .pic .link .more .icon {
    font-size: var(--fz36);
    opacity: .75;
}

.News-Index .pic .link:hover,
.News-Index .pic .link:active,
.News-Index .pic .link:focus {
    /*
    color: #ffffff;
    background: var(--basecolor);
    */
}

.News-Index .pic .link:hover .title,
.News-Index .pic .link:active .title,
.News-Index .pic .link:focus .title {
    color:var(--basecolor);
}

.News-Index .pic .link:hover .text .desc,
.News-Index .pic .link:active .text .desc,
.News-Index .pic .link:focus .text .desc {
    color:var(--basecolor);
}

.News-Index .pic .link:hover .date,
.News-Index .pic .link:active .date,
.News-Index .pic .link:focus .date {
    color:var(--basecolor);
}

.News-Index .pic .link:hover .rect-pic img,
.News-Index .pic .link:active .rect-pic img,
.News-Index .pic .link:focus .rect-pic img {
    transform: scale(1.1);
}

.News-Index .pic .link:hover .ico,
.News-Index .pic .link:active .ico,
.News-Index .pic .link:focus .ico {
    filter: grayscale(100%) brightness(100);
}
.News-Detail
{background:#ffffff; padding:5% 2%;}
.News-Index .news-title {
    font-size:var(--fz28);
    font-weight: bold;
    text-align: center;
}
.News-Index .addtime
{text-align: center; font-size:var(--fz16); color:#333333; padding:5px 0px;}


/*留言内容*/
.web-contact{
    margin-top: 30px;
    margin-bottom: 30px;
}
.web-contact .title{
    font-size: var(--fz46);
    font-weight: bold;
}
.web-contact .form {
    color: #333;
    padding-top: 20px;
    margin: 0 auto;
}

.web-contact .form .icon {
    font-size: var(--fz20);
    margin-right: 3px;
    vertical-align: middle;
}

.web-contact .form .form-half {
    width: 48.5%;
}

.web-contact .form p{
    font-size: var(--fz16);
    padding:5px 0px;
}

.web-contact .form .form-group {
    margin: 18px 0;
}

.web-contact .form .form-group:first-child {
    margin: 0 0 5px;
}

.web-contact .form .form-control {
    border: solid 1px #dddddd;
    width: 100%;
    padding: 15px 12px;
    border-radius: 0px;
}

.web-contact .form .form-control::-webkit-input-placeholder {
    color: #9fa0a0;
}

.web-contact .form .form-control::-ms-input-placeholder {
    color: #9fa0a0;
}

.web-contact .form .form-control::placeholder {
    color: #9fa0a0;
}

.web-contact .form .tips {
    font-weight: bold;
    font-size: var(--fz24);
    margin-bottom: 15px;
    color: #0c37a0;
}

.web-contact .form .submit {
    text-align: right;
    vertical-align: middle;
}

.web-contact .form .form-btn {
    text-align: center;
}

.web-contact .form .form-submit {
    margin-top: 15px;
    font-size: var(--fz16);
    display: inline-block;
    width: 100%;
    padding: 15px 0px;
    text-align: center;
    border: 0;
    background: #e3e3e3;
    color: #333333;
}
.web-contact .form .form-submit:hover{
    color: #ffffff;
    background: var(--basecolor);
}

.map {
    margin-top: 3%;
}

.map .rect-map {
    padding-bottom: 26%;
}

.contact-main-info{
    width:100%;
    /*margin-top:40px;*/
    box-sizing: border-box;
    padding:0px 20px;
    border-top:6px solid var(--basecolor);
    box-shadow: 5px 10px 15px 5px rgba(0, 0, 0, 0.1);
    padding-bottom: 30px;
    margin-top: 3%;
}
.contact-main-info .title{
    width: 100%;
    font-size:24px;
    font-weight: bold;
    color:#333333;
    padding:20px 0px;
}
.contact-main-info img{
    padding-right:10px;
}
.contact-main-info .add{
    width: 100%;
    font-size: 16px;
    color:#333333;
    padding:10px 0px;
    border-bottom: 1px solid #dddddd;
}
.contact-main-info .tel-emial{
    width: 100%;
}
.contact-main-info .tel-emial ul{
    display: flex;
    flex-wrap: wrap;
}
.contact-main-info .tel-emial ul li{
    width: 50%;
    font-size: 16px;
    color:#333333;
    padding:20px 0px;
    border-bottom: 1px solid #dddddd;
}
.contact-main-info .contact-content{
    padding-top:40px;
    padding-bottom: 20px;
    text-align: center;
}
.contact-main-info .contact-content .title{
    font-size:var(--fz24);
    font-weight: bold;
    color:#333333;
    padding-bottom: 20px;
    position: relative;
}
.contact-main-info .contact-content .title:after{
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background: var(--basecolor);
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0px;
}

.quality .desc{
    line-height: 220%;
}

.header .langicon{
    display: none;
}

/*屏幕宽度小于或等于 991 像素时*/
@media screen and (max-width:991px) {
    .crumb .product-category-nav .item{
        width: 33.33%;
    }
    .crumb .product-category-nav .item .link{
        font-size: var(--fz16);
    }
    .News-Index .pic {
        width: 48%;
    }
    .header .langicon{
        position: absolute;
        right:56px;
        top:50%;
        transform: translateY(-50%);
        display: block;
    }
    .header .langicon img{
        width: 30px;
        color:red;
    }
}

@media screen and (max-width:640px) {
    .detail-nav .cn {
        display: block;
    }

    .detail-nav .cn:after {
        content: "";
        position: absolute;
        left: 50%;
        margin-left: -46px;
        width: 92px;
        height: 3px;
        bottom: -1px;
        background: var(--basecolor);
    }

    .News-Index .pic {
        width: 100%;
    }

    .news-list .item {
        width: 100%;
        margin-bottom: 28px;
    }

    .news-list .link {
        padding: 3% 5%;
    }

    .news-list .link .title {
        font-size: var(--fz18);
    }

    .news-list .link .desc {
        font-size: var(--fz14);
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
    .web-contact{
        margin-top:0px;
    }

    .web-contact .form .form-half {
        width: 100%;
    }
    .web-contact .form p{
        font-size: var(--fz16);
        font-weight: bold;
    }
    .web-contact .title{
        font-size: var(--fz30);
        font-weight: bold;
    }
    .web-contact .form .form-submit{
        font-weight: bold;
    }
    .contact-main-info{
        width:100%;
        margin-top:40px;
        box-sizing: border-box;
        padding:0px 20px;
        border-top:6px solid var(--basecolor);
        box-shadow: 2px 5px 10px 2px rgba(0, 0, 0, 0.1);
        padding-bottom: 30px;
    }
    .contact-main-info img{
        transform: scale(0.8);
    }

    .contact-main-info .add{
        font-size:14px;
    }
    .contact-main-info .tel-emial ul{
        flex-direction: column;
    }
    .contact-main-info .tel-emial ul li{
        width: 100%;
        font-size:14px;
        text-align: left;
    }
    .contact-main-info .tel-emial ul li:last-child img{
        transform: scale(0.7);
    }
    .contact-content .links-item{
        width:100%;
        display: flex;
        flex-wrap: wrap;
    }
    .contact-content .links-item .icon-item{
        width:25%;
    }
    .contact-content .icon-item img{
        transform: scale(0.5);
    }

    .home-product-list .link .pic-bg:before{
        background-image: none;
        background:rgba(0,0,0,.2);
    }
}