@charset "UTF-8";
.i-certificate{ width: 100%; display: block; font-size: 0; background: #fafafa; box-sizing: border-box; padding: .74rem 10% 1.15rem;}
.i-certificate .tit{ width: 100%; display: block; height: .41rem; padding-bottom: .1rem; border-bottom: 1px solid #b6b6b6;}
.i-certificate .tit h2{ display: inline-block; font-family: "Arial Black"; text-transform: uppercase; font-size: .24rem; color: #777; line-height: .3rem;}
.i-certificate .tit a{ float: right; width: .46rem; height: .41rem; background: url(../images/i-certificate-icon.png) no-repeat center center /  100% auto;}
.i-certificate .tit a:hover { background: url(../images/i-certificate-icon-hover.png) no-repeat center center / 100% auto;}

.i-certificate .swiper-slide a{ width: 100%; display: block; box-sizing: border-box; border: 1px solid #ddd;}
.i-certificate .swiper-slide a img{ max-width: 100%; transition: all 0.3s ease-in-out;}
.i-certificate .swiper-slide:hover img {opacity: .8;}
.i-certificate .list{ width: 100%; display: block; position: relative; margin-top: .5rem;}
.i-certificate .list .next,
.i-certificate .list .prev{
    font-family: "iconfont"; font-size: .8rem; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; color: #e3e0e0; cursor: pointer; outline: none;
}
.i-certificate .list .prev{
    left: -1rem;
}
.i-certificate .list .next{
    right: -1rem;
}
.i-certificate .list .next:hover,
.i-certificate .list .prev:hover{
    color: var(--maincolor);
}
.i-about { width: 100%; display: block; font-size: 0; box-sizing: border-box; padding: .74rem 10% 0; position: relative; z-index: 1; overflow: hidden;}
.i-about .l{ width: 50%; display: inline-block; vertical-align: top; box-sizing: border-box; position: relative;}
.i-about .l .img.box-show img{ box-shadow: 0 0 .2rem #ccc;}
.i-about .l img { max-width: 100%;}
.i-about .l .img.box-show{ margin: 0 0 0 1rem; position: relative; z-index: 1;}
.i-about .l .img{ margin-top: -1.7rem;}
.i-about .l .tit{ position: absolute; left: 4.5rem; bottom: .5rem; font-size: .3rem; font-family: arial Black; color: #909090; line-height: 1;}
.i-about .r { width: 50%; display: inline-block; vertical-align: top; box-sizing: border-box; padding-left: .7rem; position: relative;}
.i-about .r h2{ font-size: 2.5rem; color: #777; opacity: .1; display: block; font-family: arial Black; position: absolute; line-height: 1; left: 1.6rem; top: -.1rem; pointer-events: none;}
.i-about .r h3 { color: #909090; font-size: .3rem; line-height: 1.5; position: relative; margin-top: 2.3rem;}
.i-about .r .text { display: block; margin-top: .4rem;}
.i-about .r .text p { width: 100%; display: block; font-size: .18rem; color: #a2a2a2; line-height: 1.6;}
.i-about .r > a{ display: inline-block; font-size: .18rem; color: var(--maincolor); line-height: .5rem; border: 1px solid #bfbfbf; border-radius: 3px; padding: 0 .4rem; margin-top: .3rem;}
.i-about .r > a:hover{ background: var(--maincolor); color: #fff; border-color: var(--maincolor);}
.i-about b,.i-eq b { color: #000;}
.i-eq { width: 100%; display: block; font-size: 0; box-sizing: border-box; padding: 1.3rem 10%; position: relative; z-index: 1; overflow: hidden;}
.i-eq .l{ width: 50%; display: inline-block; vertical-align: top; box-sizing: border-box; position: relative;}
.i-eq .l .img.box-show img{ box-shadow: 0 0 .2rem #ccc;}
.i-eq .l .img.box-show{ margin: 0 .9rem 0 0; position: relative; z-index: 1;}
.i-eq .l .img{ margin: -1.56rem 0 0 0; display: block; text-align: right;}
.i-eq .l .img img { max-width: 100%;}

.i-eq .l .tit{ position: absolute; left: 4.5rem; bottom: .5rem; font-size: .3rem; font-family: arial Black; color: #909090; line-height: 1;}
.i-eq .r { width: 50%; display: inline-block; vertical-align: top; box-sizing: border-box; padding-right: .7rem; position: relative;}
.i-eq .r h2{ font-size: 2.5rem; color: #777; opacity: .1; display: block; font-family: arial Black; position: absolute; line-height: 1; right: -1.6rem; top: -1rem; pointer-events: none;}
.i-eq .r h3{ color: #909090; font-size: .3rem; line-height: 1.2; position: relative; margin-top: 1.4rem;}
@media screen and (min-width: 1024px){
    .i-eq .r h3 span{ display: block;}
}
.i-eq .r .text { display: block; margin-top: .4rem;}
.i-eq .r .text p { width: 100%; display: block; font-size: .18rem; color: #a2a2a2; line-height: 1.6;}
.i-eq .r > a{ display: inline-block; font-size: .18rem; color: var(--maincolor); line-height: .5rem; border: 1px solid #bfbfbf; border-radius: 3px; padding: 0 .4rem; margin-top: .3rem;}
.i-eq .r > a:hover{ background: var(--maincolor); color: #fff; border-color: var(--maincolor);}

/* 首页产品 */
.i-products{ width: 100%; display: block; font-size: 0; box-sizing: border-box; background: url(../images/i-products.jpg) no-repeat top center / 100% auto; padding: .7rem 10%; border-top: .1rem solid var(--maincolor);}
.i-products .tit{ width: 100%; display: block; margin-bottom: .66rem;}
.i-products .tit h2{ display: block; font-family: arial Black; font-size: .24rem; text-align: center; color: #fff; line-height: 1.25;}
.i-products .tit p { display: block; text-align: center; font-size: .16rem; color: #fff; margin-top: .1rem;}
.i-products .tit p b { color: #fff;}
.i-products .swiper-slide a{ width: 100%; display: block; box-shadow: 0 .2rem .2rem #ccc; position: relative;}
.i-products .swiper-slide a img{ max-width: 100%;}
.i-products .text{ color: #000; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 100%; z-index: 2;}
.i-products .swiper-slide a::after{ content: ""; width: 100%; height: 100%; z-index: 1; position: absolute; left: 0; top: 0; opacity: 0; background: #000; transition: all 0.3s ease-in-out .1s;}
.i-products .text .name{ display: block; font-size: .24rem; font-family:Arial Black; line-height: .7rem;  color: #fff; text-align: center; position: relative; opacity: 0;}
.i-products .text .name::after{ content:""; width: .5rem; height: .04rem; background: var(--maincolor); position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); opacity: 0; transition: all 0.3s ease-in-out;}
.i-products .text .tit{ display: block; font-size: .14rem; color: #fff; line-height: 1.5; text-align: center; box-sizing: border-box; padding: 0 20%; margin-top: .16rem; opacity: 0;}

.i-products .swiper-slide a:hover::after{ opacity: .3}
.i-products .swiper-slide a:hover .text .name{ opacity: 1; transition: all 0.3s ease-in-out .3s;}
.i-products .swiper-slide a:hover .text .name::after{ opacity: 1; transition: all 0.3s ease-in-out .4s;}
.i-products .swiper-slide a:hover .text .tit{ opacity: 1; transition: all 0.3s ease-in-out .6s;}
.i-products .list{ position: relative;}
.i-products .list .next,
.i-products .list .prev{
    font-family: "iconfont"; width: .8rem; height: .8rem; border-radius: 50%; border: 2px solid var(--maincolor); text-align: center;line-height: .8rem; font-size: .6rem; background: #fff; box-shadow: 0 0 5px #ccc; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; color: var(--maincolor); cursor: pointer; outline: none;
}
.i-products .list .prev{
    left: -1rem;
}
.i-products .list .next{
    right: -1rem;
}
.i-products .list .next:hover,
.i-products .list .prev:hover{
    color: var(--maincolor);
}




.i-news{ width: 100%; display: block; font-size: 0; box-sizing: border-box; padding: .3rem 10vw 0;}
.i-news > .tit{ width: 100%; display: block; height: .41rem; padding-bottom: .1rem; border-bottom: 1px solid #b6b6b6;}
.i-news > .tit h2{ display: inline-block; font-family: "Arial Black"; text-transform: uppercase; font-size: .24rem; color: #777; line-height: .3rem;}
.i-news > .tit a{ float: right; width: .46rem; height: .41rem; background: url(../images/i-news-icon.png) no-repeat center center /  100% auto;}
.i-news > .tit a:hover { background: url(../images/i-news-icon-hover.png) no-repeat center center / 100% auto;}
.i-news .con{ display: flex; width: 100%;}

.i-news .l{ width: 45vw; flex-shrink: 1;  position: relative; z-index: 1;}
.i-news .l .list{ width: 100%; display: block; margin-top: .4rem;}
.i-news .l .list a{ display: block; position: relative;}
.i-news .l .list a .img{ display: block;}
.i-news .l .list a .img img{ max-width: 100%;}
.i-news .l .list a .text{ position: absolute; left: 0; bottom: .5rem; box-sizing: border-box; padding: 0 .5rem; width: 100%;}
.i-news .l .list a .text .tit{ display: block; font-size: .24rem; color: #fff; margin-bottom: .2rem; line-height: 1.5;}
.i-news .l .list a .text p{ display: block; font-size: .16rem; line-height: .22rem; color: #9d9d9d;}
.i-news .l .list a .time{ position: absolute; top: .18rem; left: -.07rem; width: 1.4rem; height: .54rem; line-height: .48rem; font-size: .16rem; color: #fff; text-align: center; background: url(../images/i-news-time.png) no-repeat center center / auto 100%;}
.i-news .r{ width: 35vw;}
.i-news .r .list{ width: 100%; display: block; margin-top: .4rem; box-shadow: 0 10px 20px #ccc;}
.i-news .r .list li{ width: 100%; display: block; height: 25%;}
.i-news .r .list li:hover{ box-shadow: 0 0 10px #ddd;}
.i-news .r .list li a{ width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; padding: 0 5%;}
.i-news .r .list li a .time{ width: 1.05rem; display: flex; flex-shrink: 0; justify-content: center; flex-direction: column; align-items: center; flex-wrap: wrap; height: .95rem; background: var(--maincolor);}
.i-news .r .list li a .time .month{ display: block; text-align: center; font-size: .24rem; font-family: "arial black"; color: #fff; margin-bottom: .05rem;}
.i-news .r .list li a .time .date{ display: block; text-align: center; font-size: .18rem; color: #fff;}
.i-news .r .list li a .text{ width: 100%; margin: 0 .2rem; flex-shrink: 1; }
.i-news .r .list li a .text p{ font-size: .24rem; color: #ccc; line-height: 1.2; overflow: hidden; max-height: .6rem;}


@media screen and (max-width: 1440px){
    .i-certificate,
    .i-about,
    .i-products,
    .i-news,
    .i-nav-list{
        padding-left: 5%;
        padding-right: 5%;
    }
    .i-news .l{
        width: 50vw;
    }
    .i-news .r{
        width: 40vw;
    }
}

@media screen and (max-width: 768px){
    .i-certificate, .i-about, .i-eq, .i-products, .i-news, .i-nav-list {
        padding-left: .2rem;
        padding-right: .2rem;
        overflow: hidden;
    }
    .i-certificate{
        padding: .3rem .2rem;
    }
    /* 关于 */
    .i-about{
        padding: .3rem .2rem;
    }
    .i-about .l,
    .i-about .r{
        width: 100%;
    }
    .i-about .l{
        padding-left: .2rem;
    }
    .i-about .l .img.box-show{
        margin-left: 0;
        bottom: 0;
        left: 0;
    }
    .i-about .l .img{
        position: absolute;
        bottom: -.2rem;
        right: .2rem;
    }
    .i-about .r{
        padding-left: 0;
        margin-top: .4rem;
    }
    .i-about .r h2{
        font-size: .72rem;
        left: 0;
        top: .1rem;
    }
    .i-about .r h3{
        margin-top: 1rem;
    }
    .i-about .r .text{
        margin-top: .2rem;
    }

    /* 设备 */
    .i-eq{
        padding: .3rem .2rem;
        display: flex;
        flex-wrap: wrap;
        overflow: hidden;
    }
    .i-eq .l,
    .i-eq .r{
        width: 100%;
    }
    .i-eq .l{
        order: 1;
        padding-right: .2rem;
    }
    .i-eq .l .img.box-show{
        margin: 0;
        bottom: 0;
        left: 0;
    }
    .i-eq .l .img{
        position: absolute;
        bottom: -.2rem;
        right: 0rem;
    }
    .i-eq .l .img img{
        width: 100%;
    }
    .i-eq .r{
        padding-right: 0;
        margin-top: .4rem;
        order: 2;
    }
    .i-eq .r h2{
        font-size: .72rem;
        left: 0;
        top: .1rem;
    }
    .i-eq .r h3{
        margin-top: 1rem;
    }
    .i-eq .r .text{
        margin-top: .2rem;
    }

    /* 产品 */
    .i-products {
        padding-left: 0;
        padding-right: 0;
        padding-top: .5rem;
        padding-bottom: 0;
        background: url(../images/i-products.jpg) no-repeat top center / auto 2rem;
    }
    .i-products .list{
        width: 100%; box-sizing: border-box; 
        padding: 0 4vw;
    }
    .i-products .swiper-slide a{ width: 100%; position: relative;}
    .i-products .swiper-slide a::after{ opacity: .3}
    .i-products .swiper-slide a .text .name{ opacity: 1; transition: all 0.3s ease-in-out .3s;}
    .i-products .swiper-slide a .text .name::after{ opacity: 1; transition: all 0.3s ease-in-out .4s;}
    .i-products .swiper-slide a .text .tit{ opacity: 1; transition: all 0.3s ease-in-out .6s;}
    
    .i-products .list .next, .i-products .list .prev{
        width: .4rem;
        height: .4rem;
        line-height: .4rem;
        font-size: .24rem;
    }
    .i-products .list .next{
        right: .2rem;
    }
    .i-products .list .prev{
        left: .2rem;
    }
    .i-products .list .next,
    .i-products .list .prev{
        color: var(--maincolor);
    }

    /* 新闻 */
    .i-news{
        padding-bottom: .5rem;
    }
    .i-news .con{
        flex-wrap: wrap;
    }
    .i-news .l,.i-news .r{
        width: 100%;
    }
    .i-news .l .list a .text{
        bottom: .0rem;
        padding: .2rem;
    }
    .i-news .l .list a .text .tit{
        margin-bottom: 0;
    }
    .i-news .l .list a .text p{
        display: none;
    }
    .i-news .r .list{
        margin-top: 0;
    }
    .i-news .r .list li a{
        padding: 0;
    }
    .i-news .r .list li{ box-shadow: none !important; border-bottom: 1px solid #eee;}
    .i-news .r .list li a .text p{
        font-size: .18rem;
    }
    .i-news .r .list li a .text{
        margin: 0 .1rem;
    }

}