@charset "utf-8";


#banner{position:relative;background:#fff; width: 100%; margin-top: 120px; overflow:hidden; transition:all .35s;}
#banner .swiper{ position: relative;z-index: 80; height: 100%;}
#banner .swiper-wrapper{z-index: inherit;}
#banner .swiper-slide{width: 100%;height:100%;overflow: hidden;position: relative;background-position: center top;background-size: cover;}
#banner .swiper-slide img{object-fit: cover;}
#banner .swiper-slide.swiper-slide-active img{animation: ring 2s infinite; animation-iteration-count:1;}
#banner .swiper-pagination{ z-index: 120; bottom: 30px!important;}
#banner .swiper-pagination .swiper-pagination-bullet{ border-radius: 0; width: 30px;height: 3px!important; background: rgba(255,255,255,1);opacity: .6; transition: all .35s;}
#banner .swiper-pagination .swiper-pagination-bullet-active{opacity: 1; width: 60px; background-color:#cc151e !important;}



@keyframes ring {
    0% {
        transform: scale(1.1);
    }
    to {
        transform: scale(1);
    }
}




#main{margin: 0 auto;}

#main .theme{ display: flex; align-content: center;align-items: center;justify-content: space-between;}
#main .theme>.title{ display: inline-block; width: 60%; flex: 1;}
#main .theme>.title>h3{ display: block; font-size: 3.8rem;font-weight: 400; color: #fff;}
#main .theme>.title>span{ display: block;padding: 10px 0; font-size: 1.6rem; color: rgba(255,255,255,.8);}
#main .theme>.more{text-align: right;}
#main .theme>.more>a{display: inline-flex; align-items: center; align-content: center;}
#main .theme>.more>a span{ position: relative;z-index: 12; display: inline-block; color: #666; font-size: 1.8rem; margin-right: 10px; transition: all .35s;}
#main .theme>.more>a i{ position: relative; display: inline-block; text-align: center; font-size: 2rem;color: #fff; width: 36px;height: 36px; line-height: 36px; border-radius: 100%; background: #cc151e; overflow: hidden; transition: all .35s;}
#main .theme>.more>a i:before{ position: relative; z-index: 50;}
#main .theme>.more>a i:after{position: absolute;z-index: 1; left: 50%; top: 50%; width: 2px;height: 2px; transform: translate(-50%,-50%); background: #281b6e; border-radius: 100%; opacity: 0; content: ''; transition: all .35s;}
#main .theme>.more>a:hover i:after{ width: 60px;height: 60px;opacity: 1;}
#main .theme>.more>a:hover span{ color: #281b6e;}

#main .products{margin: 0 auto; padding: 100px 0;}
#main .products .theme>.title>h3{ color: #333;}
#main .products .container{margin: 0 auto; position: relative; padding: 50px 0;}
#main .products .container>.prev, #main .products .container>.next{position: absolute;z-index: 50; left: -30px;top: 50%; transform: translateY(-100%); cursor: pointer; width: 40px; height: 40px; line-height: 40px; text-align: center; background: #f7f7f7; border-radius: 100%; transition: all .35s;}
#main .products .container>.next{left: auto; right: -30px;}
#main .products .container .swiper-button-disabled{display: none;}
#main .products .container>.prev:hover, #main .products .container>.next:hover{background: #281b6e; color: #fff;}
#main .products .container>.swiper{position: relative;margin: 0 auto;}
#main .products .container>.swiper .swiper-slide>a{ position: relative; display: block; text-align: center;}
#main .products .container>.swiper .swiper-slide>a:after{ position: absolute;z-index: 12; left: 50%; bottom: 0; transform: translateX(-50%); width: 50px;height: 1px;background: #eee; content: ''; transition: all .35s;}
#main .products .container>.swiper .swiper-slide>a .img>img{ width: 100%;height: auto; transition: all 1s;}
#main .products .container>.swiper .swiper-slide>a .title{ position: relative; height: 70px; padding: 10px 20px; font-size: 1.5rem; color: #333;transition: all .35s;}
#main .products .container>.swiper .swiper-slide>a:hover .title{color: #281b6e; transform: scale(.9);}
#main .products .container>.swiper .swiper-slide>a:hover .img>img{transform: scale(.9);}
#main .products .container>.swiper .swiper-slide>a:hover:after{background: #281b6e;}

#main .industries{margin: 0 auto;}
#main .industries>.wrap{ max-width: 1200px;margin: 0 auto;}
#main .industries .theme>.title>h3{ color: #333;}
#main .industries .theme>.title>span{ color: #666;}
#main .industries .container{margin: 0 auto; padding: 50px 0 100px 0;}
#main .industries .container>.lists{margin: 0 auto;}
#main .industries .container>.lists>ul{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 30px;}
#main .industries .container>.lists>ul>li{display: inline-grid;box-sizing: border-box;}
#main .industries .container>.lists>ul>li>a{ position: relative; display: block; padding: 30px; border: 1px solid #666; transition: all .35s; }
#main .industries .container>.lists>ul>li>a:after{position: absolute;z-index: 12; right: 30px;bottom: 30px; font-family: iconfont; font-size: 2.4rem;color: #cc151e; content: '\e70a';transition: all .35s;}
#main .industries .container>.lists>ul>li>a .ico>img{height: 60px; width: auto; opacity: .6; filter:grayscale(100%); transition: all .35s;}
#main .industries .container>.lists>ul>li>a .title{ padding-top: 20px; position: relative; width: 80%; text-align: left; font-size: 1.6rem; line-height: 2rem; color: #333;transition: all .35s;}
#main .industries .container>.lists>ul>li>a:hover{border-color: #eef4f9; background: #eef4f9; }
#main .industries .container>.lists>ul>li>a:hover .title{color: #281b6e;}
#main .industries .container>.lists>ul>li>a:hover .ico>img{opacity: 1;filter:grayscale(0);}
#main .industries .container>.lists>ul>li>a:hover:after{color: #281b6e;}


#main .about{margin: 0 auto; background: url("../img/main_about_bg.jpg") no-repeat; background-position: 50% 50%; background-size: cover; background-attachment: fixed;}
#main .about>.wrap{padding: 90px 0;}
#main .about .container{margin: 0 auto;}
#main .about .container>.statistics{margin: 0 auto; padding: 50px 0; display: flex; align-items: center;align-content: center; justify-content: space-between;}
#main .about .container>.statistics>.rows{display: inline-block;flex: auto; box-sizing: border-box; padding: 0 40px; border-right: 1px solid rgba(255,255,255,.7);}
#main .about .container>.statistics>.rows:last-child{border-right: 0;}
#main .about .container>.statistics>.rows>.num{color: #fff; font-size: 6.5rem;}
#main .about .container>.statistics>.rows>.title{font-size: 1.8rem; color: #fff;}


#main .certificate{ padding: 150px 0; background: #eef4f9; margin: 0 auto;}
#main .certificate>.wrap{max-width: 1200px;margin: 0 auto;}
#main .certificate .introduce{margin: 0 auto;}
#main .certificate .introduce>.info{width: 36%;text-align: left; box-sizing: border-box;padding-top: 50px;}
#main .certificate .introduce>.info>.title{font-size: 1.6rem; color: #281b6e; }
#main .certificate .introduce>.info>.describe{padding: 20px 0; font-size: 3.6rem; line-height:3.8rem;}
#main .certificate .introduce>.info>.text{font-size: 1.4rem; line-height: 2rem; color: #333;}
#main .certificate .introduce>.info>.more{text-align: left;padding-top: 30px;}
#main .certificate .introduce>.info>.more>a{display: inline-block; border: 1px solid #cc151e; padding: 8px 50px; font-size: 1.3rem; color: #cc151e; transition: all .35s;}
#main .certificate .introduce>.info>.more>a:hover{background: #cc151e; color: #fff;}
#main .certificate .introduce>.img{width: 40%;text-align: right;}
#main .certificate .introduce>.img>img{max-width: 100%;height: auto;}
#main .certificate .ico{margin: 100px auto 0 auto; display: block; }
#main .certificate .ico>.rows{display: inline-block; float: left; width: 16.66%; text-align: center; box-sizing: border-box; padding: 0 50px;}
#main .certificate .ico>.rows>img{ width: auto; height: 40px; }
#main .certificate .ico>.rows>p{ display: block; width: 100%; padding: 15px 0; font-size: 1.7rem; color: #666; margin: 0 auto;}

#main .news{margin: 0 auto; padding: 90px 0;}
#main .news .theme>.title>h3{ color: #333;}
#main .news .container{margin:0 auto;padding:50px 0 50px 210px; box-sizing: border-box; position: relative; }
#main .news .container .swiper{margin: 0 auto; position: relative;}
#main .news .container .swiper .swiper-slide>a{display: block;}
#main .news .container .swiper .swiper-slide>a .img{text-align: center;overflow: hidden;}
#main .news .container .swiper .swiper-slide>a .img>img{width: 100%;height: auto; transition: all 1s;}
#main .news .container .swiper .swiper-slide>a .box{box-sizing: border-box;padding: 30px 40px 50px 40px; background: #f7f7f7; text-align: left;}
#main .news .container .swiper .swiper-slide>a .box>.time{ color: #999; font-size: 1.4rem;font-weight: bold;}
#main .news .container .swiper .swiper-slide>a .box>.title{ margin: 10px auto 30px auto; font-size: 2rem; font-weight: bold; color: #333; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2;overflow: hidden; transition: all .35s;}
#main .news .container .swiper .swiper-slide>a .box>.more{text-align: left;}
#main .news .container .swiper .swiper-slide>a .box>.more>span{position: relative; display: inline-block; padding: 5px 0; font-size: 1.6rem;color: #281b6e;}
#main .news .container .swiper .swiper-slide>a .box>.more>span:after{ position: absolute;z-index: 12; left: 0;bottom: 0; width: 100%;height: 2px;background: #cc151e; content: '';}
#main .news .container .swiper .swiper-slide>a:hover .img>img{transform: scale(1.1)}
#main .news .container .swiper .swiper-slide>a:hover .box>.title{color: #281b6e;}

#main .news .container .swiper-pagination{position: relative;left: 50%; transform: translateX(-50%) translateY(50px);width: 330px;z-index: 2;height: 1px;background: #e6e6e6;}
#main .news .container .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{height: 2px;background: #a32338;top: auto;bottom: 0;}



@media only screen and (max-width: 1680px){

    #main .news .container{ padding-left: 7%;}


}


@media only screen and (max-width: 1360px){

    #main .theme>.title>h3 {font-size: 3.6rem;}
    #main .theme>.title>span{ font-size: 1.6rem;}

}


@media only screen and (max-width: 1280px){

    #main .theme>.title>span{ font-size: 1.4rem;}

    #main .about .container>.statistics>.rows>.num{ font-size: 6rem;}
    #main .about .container>.statistics>.rows>.title { height: 50px; font-size: 1.6rem; }

    #main .certificate .ico>.rows{padding: 0 30px;}

}


@media only screen and (max-width: 1200px){


    #banner{margin-top: 90px;}



    #main .certificate .ico>.rows{padding: 0 10px;}
    #main .certificate .ico>.rows>p { font-size: 1.4rem;}


}
@media only screen and (max-width: 1080px){

    #main .theme>.title>h3 { font-size: 3.2rem; }


    #main .industries .container>.lists>ul{ grid-template-columns: 1fr 1fr;}

    #main .certificate .introduce>.info>.describe { font-size: 3rem; line-height: 3.2rem;}
    #main .certificate .introduce>.img { width: 50%;}
    #main .certificate .ico>.rows{padding: 0;}
    #main .certificate .ico>.rows>p { font-size: 1.3rem;}


    #main .theme>.more>a span { font-size: 1.6rem;}
    #main .theme>.more>a i {font-size: 1.8rem; width: 32px; height: 32px;line-height: 32px;}


    #main .news .container .swiper .swiper-slide>a .box>.title { font-size: 1.8rem;}
    #main .news .container .swiper .swiper-slide>a .box>.more>span { font-size: 1.4rem; }
}


@media only screen and (max-width: 860px){

    #main .theme>.title>h3 { font-size: 2.8rem; }

    #main .products { padding: 50px 0;}

    #main .certificate{ padding: 50px 0;}
    #main .certificate .introduce>.info{width: 100%;float: none; padding-top: 0;}
    #main .certificate .introduce>.img{width: 100%; float: none; padding-top: 30px;}

    #main .about>.wrap { padding: 50px 0;}
    #main .about .container>.statistics { display: block;padding-bottom: 0;}
    #main .about .container>.statistics>.rows{float: left; width: 50%; padding: 20px 30px; border-top: 1px solid rgba(255,255,255,.7);}
    #main .about .container>.statistics>.rows:first-child,#main .about .container>.statistics>.rows:nth-child(2){border-top: 0;}
    #main .about .container>.statistics>.rows:nth-child(2n){border-right: 0;}
    #main .about .container>.statistics>.rows>.num{ font-size: 4.2rem;}
    #main .about .container>.statistics>.rows>.title { height: 40px; font-size: 1.2rem; }

    #main .industries .container>.lists>ul>li>a .title { font-size: 1.4rem;  line-height: 1.8rem; }


}


@media only screen and (max-width: 640px){


    #banner{margin-top: 70px; height: 180px;}
    #banner .swiper-slide img{  height: 100%; width: auto; }
    #banner .swiper-pagination { bottom: 10px!important; }




    #main .theme>.title>h3 { font-size: 2.4rem; }
    #main .theme>.title>span { font-size: 1.2rem;}

    #main .products .container { padding: 20px 0; }
    #main .products .container>.swiper .swiper-slide>a .title { font-size: 1.3rem;}

    #main .industries .container>.lists>ul{ grid-template-columns: 1fr 1fr; grid-gap: 10px;}
    #main .industries .container>.lists>ul>li>a { padding: 20px; }
    #main .industries .container>.lists>ul>li>a .title { font-size: 1.2rem; line-height: 1.6rem;}
    #main .industries .container>.lists>ul>li>a .ico>img { height: 42px;}


    #main .certificate .introduce>.info>.describe { font-size: 2.6rem; line-height: 2.8rem; }
    #main .certificate .introduce>.info>.title { font-size: 1.4rem;}
    #main .certificate .introduce>.info>.more>a { padding: 8px 30px; font-size: 1.2rem;}
    #main .certificate .ico { margin: 50px auto 0 auto; }
    #main .certificate .ico>.rows{width: 33.33%;}
    #main .certificate .ico>.rows>img { height: 32px; }
    #main .certificate .ico>.rows>p { font-size: 1.2rem;}

    #main .theme>.more>a span { font-size: 1.4rem; margin-right: 5px;}
    #main .theme>.more>a i { font-size: 1.4rem; width: 24px; height: 24px;line-height: 24px;}

}