@charset "utf-8";

@import url('https://fonts.font.im/css?family=Poppins');

#loading {z-index: 1001;position: fixed; top: 0; left: 0; width: 100%;height: 100%;background: #fff;overflow: hidden;}
#loading img { position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
#loading .car,#loading .logo {left: 60%;}
#loading .graphic {opacity: 0;top: 50%;left: 50%;transform: translate(-50%,-50%);}



#banner{ position:relative;background:#fff; width: 100%; height: 100%; 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 .video_mask{position: absolute;z-index: 40; left: 0;top: 0; width: 100%;height: 100%;background: linear-gradient(to bottom, rgba(0,0,0,.1), rgba(0,0,0,.8) 90%);}
#banner .swiper-slide .video_mask:after{ display: none; position: absolute; z-index: 50; left: 50%; top:50%; color: #fff; transform: translate(-50%,-100%); font-family: iconfont; font-size: 7rem; font-weight: normal; content: '\e655'; transition: all .35s;}
#banner .swiper-slide .video_mask.active:after{display: none;}
#banner .swiper-slide .banner_video{width: 100%;height:auto;position: absolute;left: 50%;top:50%; transform: translate(-50%,-50%); z-index: 0;}
#banner .swiper-slide .info{position: absolute;z-index: 80; left: 15%; bottom: 24%; width: 50%; padding-bottom: 20px; text-align: left;}
#banner .swiper-slide .info.info-text-right{ left: auto;right: 0;}
#banner .swiper-slide .info>.line{ position: absolute;z-index: 5; left: -50px;top: 0; width: 8px;height: 100%; background: #bc0010;}
#banner .swiper-slide .info>.tit{font-size: 3rem; font-weight: bold; color: #fff;text-shadow: 0 2px 5px rgba(0,0,0,.2);}
#banner .swiper-slide .info>.txt{ padding: 10px 0; font-size: 4rem; color: #fff; font-weight: bold; text-shadow: 0 2px 5px rgba(0,0,0,.1);}
#banner .swiper-slide .info>.more{ text-align: left;}
#banner .swiper-slide .info>.more>a{display: inline-block; background: #1e2687; color: #fff;font-size: 1.2rem;padding: 10px 20px;}
#banner .swiper-slide .mob{display: none;}
#banner .swiper-slide img{object-fit: cover;height: 100%;width: auto;}
#banner .swiper-pagination{ z-index: 80; width:30px!important;left: auto; right:100px!important;text-align: center;bottom:80px!important;}
#banner .swiper-pagination-bullet{position: relative; width:100%;height:20px; line-height: 20px; font-size: 1.2rem; color: #fff; border-radius: 0!important; background-color:transparent!important;margin-bottom: 10px!important; transition: all .3s;}
#banner .swiper-pagination-bullet:after{position: absolute;z-index: 12; left: 0;bottom: -3px;width: 100%; height: 3px; background: #fff; content: '';}
#banner .swiper-pagination-bullet-active,.swiper-pagination-bullet-active{opacity: 1; transform: translateY()}





#main{ margin: 0 auto;}
#main .wrap{max-width: 1600px;}



#main .about{ position: relative; margin: 0 auto; padding: 150px 0; background: url("../img/main_about_bg.jpg") no-repeat; background-position: center bottom; background-size: cover;overflow: hidden;}
#main .about .title{position: relative;z-index: 30;opacity: 0; transition: all .35s;}
#main .about .title>.info{ text-align: center; width: 50%; margin: 0 auto;}
#main .about .title>.info>h3{font-size: 4.2rem; color:#222;}
#main .about .title>.info>span{display: block;padding-bottom: 10px; font-size: 1.6rem; color: #999;font-family: 'Poppins', sans-serif;}
#main .about .container{ position: relative;z-index: 30; width: 76%;  margin: 0 auto; padding-top: 50px;opacity: 0;}
#main .about .container>.describe{ margin: 0 auto; text-align: center; font-size: 2rem; color: #333; line-height: 3rem;}
#main .about .container>.statistics{ display: flex; justify-content: space-between; align-items: center; margin: 0 auto; padding: 100px 0;}
#main .about .container>.statistics>.rows{display: inline-block;text-align: center; transition: all .35s;}
#main .about .container>.statistics>.rows .ico{ text-align: center; margin-bottom: 20px;}
#main .about .container>.statistics>.rows .ico>span{display: inline-block; width: 80px;height: 80px; line-height: 80px; border: 2px solid #1e2687; color: #1e2687; border-radius: 30px; transition: all .35s;}
#main .about .container>.statistics>.rows .ico>span i{font-size: 6rem;}
#main .about .container>.statistics>.rows .num{ margin: 0 auto; font-size: 4.2rem; font-weight: bold; color: #1e2687; }
#main .about .container>.statistics>.rows .tit{font-size: 1.8rem; color: #666;}
#main .about .container>.statistics>.rows:hover{transform: translateY(-8px);}
#main .about .container>.statistics>.rows:hover .ico>span{ transform: rotateY(180deg); background: #1e2687; color: #fff;}
#main .about .container>.more{text-align: center;margin: 0 auto;}
#main .about .container>.more a{position: relative; display: inline-block; border-radius: 50px; padding: 10px 40px ;font-size: 1.6rem; border: 2px solid #1e2687; background: #1e2687; color: #fff; overflow: hidden; transition: all .35s;}
#main .about .container>.more a:hover{ border-color: #bc0010; color: #bc0010; background: none; box-shadow: 0 2px 12px rgba(0,0,0,.1);}
#main .about .container>.more a>span{ position: relative; z-index: 10; display: inline-block;vertical-align: middle; margin-right: 20px;}
#main .about .container>.more a>i{ position: relative;z-index: 12; display: inline-block;vertical-align: middle;font-size: 1.2rem; font-weight: bold;}
#main .about .mask{position: absolute;z-index: 10; left: 0;top:0;width: 100%;height: 100%;background: rgba(255,255,255,1);opacity: 0; transition: all .35s;}
#main .about .logo{position: absolute;z-index: 60; left: 0;top: 0; width: 100%;height: 100%;}
#main .about .logo>img{width: 100%;height: 100%; object-fit: cover;}



#main .product{ margin: 0 auto; padding: 50px 0 100px 0; background: url("../img/main_product_bg.jpg") no-repeat; background-position: bottom right; background-size: cover;}
#main .product .wrap{ position: relative; max-width: inherit; width: 100%; box-sizing: border-box;padding-left: 10%;}
#main .product .title{ position: absolute;z-index: 12; width: 50%; top: 50px;}
#main .product .title>.info{ text-align: left; width: 50%;}
#main .product .title>.info>h3{ display: inline-block; font-size: 4.2rem; color: #222; }
#main .product .title>.info>span{display: block;padding-bottom: 10px; font-size: 1.6rem; color: #999;font-family: 'Poppins', sans-serif;}
#main .product .container{margin: 0 auto; }
#main .product .container .shows>.swiper{margin: 0 auto;}
#main .product .container .shows>.swiper .swiper-slide{margin: 0 auto;opacity: 0!important;}
#main .product .container .shows>.swiper .swiper-slide .info{position: relative; width: 40%;text-align: left; padding-top: 15%; opacity: 0;transform: translateY(100px); transition: all .35s;}
#main .product .container .shows>.swiper .swiper-slide .info>.ico img{height: 64px; width: auto;}
#main .product .container .shows>.swiper .swiper-slide .info>.tit{font-size: 3.2rem; color: #1e2687;}
#main .product .container .shows>.swiper .swiper-slide .info>.txt{ padding: 30px 0; font-size: 2rem; color: rgba(0,0,0,.5); line-height: 3rem;}
#main .product .container .shows>.swiper .swiper-slide .info>.more{text-align: left;}
#main .product .container .shows>.swiper .swiper-slide .info>.more a{position: relative; display: inline-block; border-radius: 50px; padding: 10px 40px ;font-size: 1.6rem; border: 2px solid #1e2687;  color: #1e2687; overflow: hidden; transition: all .35s;}
#main .product .container .shows>.swiper .swiper-slide .info>.more a:hover{ background: #1e2687; color: #fff; box-shadow: 0 2px 12px rgba(0,0,0,.1);}
#main .product .container .shows>.swiper .swiper-slide .info>.more a>span{ position: relative; z-index: 10; display: inline-block;vertical-align: middle; margin-right: 20px;}
#main .product .container .shows>.swiper .swiper-slide .info>.more a>i{ position: relative;z-index: 12; display: inline-block;vertical-align: middle;font-size: 1.2rem; font-weight: bold;}
#main .product .container .shows>.swiper .swiper-slide .cars{position: relative; text-align: right; width: 50%;}
#main .product .container .shows>.swiper .swiper-slide .cars>.show{position: absolute;z-index: 12; right: 0;top: 0;opacity: 0; transition: all 5s;}
#main .product .container .shows>.swiper .swiper-slide .cars>.show .rows{position: absolute;z-index: 10;}
#main .product .container .shows>.swiper .swiper-slide .cars>.show .rows>a{display: inline-block;}
#main .product .container .shows>.swiper .swiper-slide .cars>.show .rows>a .plus-btn{ position: relative;z-index: 12; width: 40px;height: 40px; border-radius: 100%; background: rgba(68,68,68,.9); transition: all .35s;}
#main .product .container .shows>.swiper .swiper-slide .cars>.show .rows>a .plus-btn:after{position: absolute;z-index: 1; left: 0;top: 0; text-align: center; font-size: 2.4rem; color: #fff; width: 40px;height: 40px; line-height: 40px; font-family: iconfont; content: '\e62a'; transition: all .35s;}
#main .product .container .shows>.swiper .swiper-slide .cars>.show .rows>a .box{ position: absolute;z-index: 2; left: 0;top: 0;opacity: 0; width: 0;height: 0;overflow: hidden; border-radius: 20px; transition: all .35s;}
#main .product .container .shows>.swiper .swiper-slide .cars>.show .rows>a:hover .plus-btn{background: #bc0010;}
#main .product .container .shows>.swiper .swiper-slide .cars>.show .rows>a:hover .plus-btn:after{content: '\e63c';}
#main .product .container .shows>.swiper .swiper-slide .cars>.show .rows>a:hover .box{opacity: 1;width: 200px;height: 200px;}
#main .product .container .shows>.swiper .swiper-slide .cars>.car{position: relative;z-index: 1; right: 0;top: 0; transform: translateX(100px);  transition: all 0.36s ease;}
#main .product .container .shows>.swiper .swiper-slide-active{opacity: 1!important;}
#main .product .container .shows>.swiper .swiper-slide-active .car{ opacity: 1; transform: translateX(0)!important;}
#main .product .container .shows>.swiper .swiper-slide-animate .car{ transition: all .5s ease; animation-name: ani_opacity0; animation-timing-function: ease; animation-duration: .6s; animation-delay: 0s; animation-fill-mode: forwards; animation-iteration-count:1;}
#main .product .container .shows>.swiper .swiper-slide-animate .show{ transition: all .5s ease; animation-name: ani_opacity100; animation-timing-function: ease; animation-duration: .3s; animation-delay: .2s; animation-fill-mode: forwards; animation-iteration-count:1;}
#main .product .container .shows>.swiper .swiper-slide-animate .info{ opacity: 1; transform: translateY(0);}


#main .product .container .thumbs{ max-width: 1200px; width: 100%; box-sizing: border-box; margin: 0 auto;}
#main .product .container .thumbs>.swiper{ margin: 0 auto;}
#main .product .container .thumbs>.swiper .swiper-slide{ cursor: pointer; border-bottom: 5px solid #ccc; color: #666; text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; transition: all .35s;}
#main .product .container .thumbs>.swiper .swiper-slide>span{display: inline-block; padding: 20px; font-size: 1.8rem;overflow: hidden;text-overflow:ellipsis; white-space: nowrap; transition: all .35s;}
#main .product .container .thumbs>.swiper .swiper-slide-thumb-active{border-color: #bc0010;color: #bc0010;}

@-webkit-keyframes ani_opacity100 {
    0% {opacity: 0; }
    100% {opacity:100; }
}

@-webkit-keyframes ani_opacity0 {
    0% {opacity: 1; }
    100% {opacity:0; }
}




#main .partner{ margin: 0 auto; padding: 100px 0;overflow: hidden; background: url("../img/main_partner_bg.jpg") no-repeat; background-position: right bottom; background-size: cover;}
#main .partner .title>.info{ text-align: left; width: 50%;}
#main .partner .title>.info>h3{font-size: 4.2rem; color:#222;}
#main .partner .title>.info>span{display: block;padding-bottom: 10px; font-size: 1.6rem; color: #999;font-family: 'Poppins', sans-serif;}
#main .partner .layout{margin: 0 auto; padding-top: 50px;}
#main .partner .layout .container{width: 54%;}
#main .partner .layout .container>.describe{font-size: 2rem; color: #333; line-height: 3rem;}
#main .partner .layout .container>.client{padding-top: 50px;}
#main .partner .layout .container>.client .swiper{margin: 0 auto;padding: 20px 0;}
#main .partner .layout .container>.client .swiper .swiper-slide { border-radius: 10px; text-align: center;height: calc((100% - 30px) / 2) !important;display: flex;justify-content: center;align-items: center; transition: all .35s;}
#main .partner .layout .container>.client .swiper .swiper-slide img{width: 80%;height: auto;}
#main .partner .layout .container>.client .swiper .swiper-slide:hover{ transform: translateY(-10px) }
#main .partner .layout .container>.client .swiper .swiper-pagination{position: relative; bottom: 0;padding-top: 30px;}
#main .partner .layout .container>.client .swiper .swiper-pagination .swiper-pagination-bullet{ width: 20px;height: 3px; border-radius: 3px!important;}
#main .partner .layout .container>.client .swiper .swiper-pagination .swiper-pagination-bullet-active{background: #bc0010;}
#main .partner .layout .earth{width: 36%;}
#main .partner .layout .earth>img{max-width: 100%;height: auto;}



#main .news{ margin: 0 auto; padding: 100px 0; background: #f6f6f6;}
#main .news .title>.info{ text-align: left; width: 50%;}
#main .news .title>.info>h3{font-size: 4.2rem; color:#222;}
#main .news .title>.info>span{display: block;padding-bottom: 10px; font-size: 1.6rem; color: #999;font-family: 'Poppins', sans-serif;}
#main .news .title>.more{ width: 30%; text-align: right; padding-top: 20px;}
#main .news .title>.more>a{display: inline-block; font-size: 1.6rem; color: #999; transition: all .35s;}
#main .news .title>.more>a i{display: inline-block; vertical-align: middle; font-size: 2.6rem; margin-right: 5px;}
#main .news .title>.more>a span{display: inline-block;vertical-align: middle;}
#main .news .title>.more>a:hover{color: #1e2687;}
#main .news .container{margin: 0 auto; padding-top: 50px;}
#main .news .container .swiper{margin: 0 auto;}
#main .news .container .swiper .swiper-slide>a{ position: relative; display: block; overflow: hidden;  transition: all .35s;}
#main .news .container .swiper .swiper-slide>a:after{position: absolute;z-index: 12; left: 0;top: 0; width: 100%; height: 2px; background: #ccc; border-radius: 5px; content: '';transition: all .35s;}
#main .news .container .swiper .swiper-slide>a .box{ position: relative;z-index: 1; padding: 40px 0; text-align: left;}
#main .news .container .swiper .swiper-slide>a .box>.tit{ height: 54px; margin-bottom:30px; font-size: 2rem; 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>.time{font-family: 'Poppins', sans-serif; font-size: 1.6rem; color: #999;}
#main .news .container .swiper .swiper-slide>a .img{overflow: hidden; border-radius: 8px;}
#main .news .container .swiper .swiper-slide>a .img>img{width: 100%;height: auto;}
#main .news .container .swiper .swiper-slide>a .view{ opacity: 0; position: absolute;z-index: 50; left: 0;top: 0; box-sizing: border-box;padding: 40px 30px; border-radius: 8px; width: 100%;height: 100%; background: #13358f url("../img/news_bg.png") no-repeat; background-position: left bottom; transition: all .35s;}
#main .news .container .swiper .swiper-slide>a .view>.tit{font-size: 2.4rem; color: #fff;}
#main .news .container .swiper .swiper-slide>a .view>.time{ position: absolute;z-index: 1; left: 30px;bottom: 40px; color: #fff; font-family: 'Poppins', sans-serif; font-size: 1.6rem;}
#main .news .container .swiper .swiper-slide>a .view>.ico{position: absolute; right: 20px; bottom: 30px; color: #fff; transform: rotate(-90deg); transition: all .35s;}
#main .news .container .swiper .swiper-slide>a .view>.ico>i{font-size: 6rem; font-weight: 200;}
#main .news .container .swiper .swiper-slide>a:hover:after{opacity: 0;}
#main .news .container .swiper .swiper-slide>a:hover .view{opacity: 1;}
#main .news .container .swiper .swiper-slide>a:hover .view>.ico{ transform: rotate(-45deg);}
#main .news .container .swiper .control{text-align: center; padding-top: 70px;}
#main .news .container .swiper .control>div{display: inline-block;cursor: pointer; margin: 0 10px;}
#main .news .container .swiper .control>div i{font-size: 1.6rem; font-weight: 700; color: #666;}
#main .news .container .swiper .control>div i:hover{color: #bc0010;}



#main .responsibility{ margin: 0 auto; padding: 100px 0;}
#main .responsibility .title>.info{ text-align: left; width: 50%;}
#main .responsibility .title>.info>h3{font-size: 4.2rem; color:#222;}
#main .responsibility .title>.info>span{display: block;padding-bottom: 10px; font-size: 1.6rem; color: #999;font-family: 'Poppins', sans-serif;}
#main .responsibility .container{ position: relative; margin: 0 auto; padding-top: 50px;}
#main .responsibility .container .nav{position: absolute;z-index: 50; left: 0; bottom: 0; width: 100%; display: flex; justify-content: space-between; flex-wrap: wrap; box-sizing: border-box;padding: 40px 0;}
#main .responsibility .container .nav>.rows{ display: inline-block; float: left; width: 22%; backdrop-filter: blur(5px); background: rgba(255,255,255,.7); border-radius: 8px; box-sizing: border-box;padding: 40px; text-align: left; transition: all .35s;}
#main .responsibility .container .nav>.rows:first-child{ width: 48%;}
#main .responsibility .container .nav>.rows>a{display: block;}
#main .responsibility .container .nav>.rows>a .tit{font-size: 2.4rem; font-weight: bold; color: #333; transition: all .35s;}
#main .responsibility .container .nav>.rows>a .txt{color: #666; padding-top: 10px; transition: all .35s;}
#main .responsibility .container .nav>.rows>a .txt>span{display: inline-block;font-size: 1.4rem;font-weight: bold; vertical-align: middle;}
#main .responsibility .container .nav>.rows>a .txt>i{display: inline-block;vertical-align: middle;margin-left: 15px; font-size: 1.2rem; font-weight: bold; }
#main .responsibility .container .nav>.rows:hover{background: rgba(188,0,16,.8); transform: translateY(-12px);}
#main .responsibility .container .nav>.rows:hover .tit{color: #fff;}
#main .responsibility .container .nav>.rows:hover .txt{color: rgba(255,255,255,.6);}
#main .responsibility .container .img{ text-align: left;}
#main .responsibility .container .img>img{width: 100%;height: auto; border-radius: 8px;}





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

    #banner .swiper-slide .info { width: 60%;}
    #banner .swiper-slide .info>.tit{font-size: 5rem;}
    #banner .swiper-slide .info>.txt {font-size: 5rem;}

}

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

    #banner .swiper-slide .info>.tit{font-size: 4rem;}
    #banner .swiper-slide .info>.txt {font-size: 4rem;}


    #main .about .container { width: 80%;}
    #main .about .container>.describe { font-size: 1.8rem;line-height: 3.2rem;}

    #main .product .container .shows>.swiper .swiper-slide .info>.txt { font-size: 1.8rem;  line-height: 3.2rem;}

    #main .partner .layout .container>.describe {font-size: 1.8rem; line-height: 3.2rem;}

    #main .news .container .swiper .swiper-slide>a .box>.tit { height: 50px; font-size:1.8rem;}
    #main .news .container .swiper .swiper-slide>a .view>.tit { font-size: 2rem;}
    #main .news .container .swiper .swiper-slide>a .view>.ico>i { font-size: 4rem;}

}

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

    #banner .swiper-slide .info>.tit{font-size: 3rem;}

    #main .about .title>.info>h3{font-size: 3rem;}
    #main .about .title>.info>span{font-size: 1.4rem;}


    #main .product .title>.info>span { font-size: 1.4rem;}
    #main .product .title>.info>h3 { font-size: 3.6rem;}
    #main .product .container .shows>.swiper .swiper-slide .cars>.show .rows>a:hover .box{width: 170px;height: 170px;}


    #main .partner .title>.info>h3{font-size: 3.6rem;}
    #main .partner .title>.info>span{font-size: 1.4rem; }


    #main .partner .layout .container {  width: 50%;}
    #main .partner .layout .container>.client .swiper .swiper-slide img { width: 100%;}
    #main .partner .layout .earth { width: 42%;}



    #main .news .title>.info>h3{font-size: 3.6rem;}
    #main .news .title>.info>span{font-size: 1.4rem;}


    #main .responsibility .title>.info>h3{font-size: 3.6rem;}
    #main .responsibility .title>.info>span{font-size: 1.4rem; }




}

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

    #banner .swiper-slide .info>.tit{font-size: 3rem;}
    #banner .swiper-slide .info>.txt {font-size: 3rem;}

    #main .about{ padding: 100px 0;}
    #main .about .title>.info>h3{font-size: 3rem;}
    #main .about .container>.describe { font-size: 1.6rem;line-height: 2.4rem;}

    #main .product .title>.info>h3 { font-size: 3rem;}
    #main .product .container .shows>.swiper .swiper-slide .cars>.show .rows>a:hover .box{width: 150px;height: 150px;}
    #main .product .container .shows>.swiper .swiper-slide .info>.txt { font-size: 1.6rem; line-height: 2.4rem;}
    #main .product .container .shows>.swiper .swiper-slide .info>.tit {font-size: 2.4rem; }
    #main .product .container .thumbs{padding-right: 10%;}
    #main .product .container .thumbs>.swiper .swiper-slide>span {font-size: 1.6rem; }


    #main .partner .title>.info>h3{font-size: 3rem;}
    #main .partner .layout .container>.describe {font-size: 1.6rem; line-height: 2.4rem;}


    #main .news .title>.info>h3{font-size: 3rem;}


    #main .responsibility .title>.info>h3{font-size: 3rem;}
    #main .responsibility .container .nav>.rows>a .tit { font-size: 2rem;}

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

    #loading{display: none!important;}


    #main .about .container>.statistics>.rows .ico>span{width: 70px;height: 70px; line-height: 70px; border-radius: 25px;}
    #main .about .container>.statistics>.rows .ico>span i{font-size: 4.6rem;}
    #main .about .container>.statistics>.rows .num{font-size: 3rem;}
    #main .about .container>.statistics>.rows .tit{font-size: 1.6rem;}


    #main .product .title { position: relative;top: 0;}
    #main .product .container{padding-top: 50px;}
    #main .product .container .shows>.swiper .swiper-slide .info {padding-top: 50px;}

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


    #banner{ height: 70%;}

    #main .about .container {  width: 100%;}
    #main .about .container>.more a {padding: 8px 30px; font-size: 1.4rem; }


    #main .product .wrap {padding-left: 0;}
    #main .product .title{ width: 90%; margin: 0 auto; }

    #main .product .container .shows>.swiper .swiper-slide .info {float: none;width: 90%; margin: 0 auto; padding-top: 0;}
    #main .product .container .shows>.swiper .swiper-slide .cars { float: none; width: 100%; text-align: right;}
    #main .product .container .shows>.swiper .swiper-slide .cars>.show{width: 76%;}
    #main .product .container .shows>.swiper .swiper-slide .cars>.car{ display: inline-block; width: 76%; text-align: right;}
    #main .product .container .shows>.swiper .swiper-slide .info>.more a { padding: 8px 30px; font-size: 1.4rem;}
    #main .product .container .thumbs{padding-right: 5%; padding-left: 5%;}

    #main .partner .layout .container { width: 100%; float: none;}
    #main .partner .layout .earth { width: 100%; float: none; text-align: center;}
    #main .partner .layout .earth>img{max-width: 60%;}




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

    #main .product .container .thumbs { width: 76%;}

}

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

    #banner{ height: 100%;}
    #banner .swiper-slide{background: #000; background-image: none!important; text-align: center;}
    #banner .swiper-slide .mob{display: inline-block; width: auto;height: 100%; object-fit: cover;}
    #banner .swiper-slide .info>.tit{font-size: 2.4rem;}
    #banner .swiper-slide .info>.txt {font-size: 2.4rem;}


    #main .product .container .thumbs { width: 86%;}

    #main .about .container>.statistics { display: block; padding: 60px 0;}
    #main .about .container>.statistics>.rows{ float: left; width: 20%;}
    #main .about .container>.statistics>.rows .ico>span i{font-size: 4rem;}
    #main .about .container>.statistics>.rows .num{font-size: 2.4rem;}
    #main .about .container>.statistics>.rows .tit{font-size: 1.4rem;}

    #main .partner { padding: 50px 0 0 0;position: relative; }
    #main .partner .container{padding-bottom: 40%;}
    #main .partner .container .client{position: relative;z-index: 12;}
    #main .partner .earth{ position: absolute;z-index: 1; left: 0;bottom: 0; height: 300px; }
    #main .partner .layout .earth>img{position: absolute;z-index: 12; right: 0;bottom: -40%; max-width: none; width: 100%;}

    #main .news { padding: 50px 0; }
    #main .news .container .swiper .swiper-slide>a .view>.tit { font-size: 1.8rem;}
    #main .news .container .swiper .swiper-slide>a .view>.time {font-size: 1.4rem; }
    #main .news .container .swiper .swiper-slide>a .box>.tit { height: 40px; font-size: 1.6rem;}
    #main .news .container .swiper .swiper-slide>a .box>.time {font-size: 1.4rem; }

    #main .responsibility { padding: 50px 0;}
    #main .responsibility .container .nav{position: relative; display: block; background: none; }
    #main .responsibility .container .nav>.rows{ display: block; float: none; width: 100%; backdrop-filter: blur(0px); border: 1px solid #eee; margin-bottom: 30px; background: #fff;}
    #main .responsibility .container .nav>.rows>a .tit{font-size: 2.4rem;}
    #main .responsibility .container .nav>.rows:first-child{ width: 100%;}



}


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

    #main .wrap{width: 80%;}



    #banner .swiper-slide .video_mask:after{display: inline-block;}

    #main .about .title>.info>h3{font-size: 2.4rem;}
    #main .about .container>.describe { font-size: 1.4rem;line-height: 2rem;}
    #main .about .container>.statistics{text-align: center;}
    #main .about .container>.statistics>.rows{ display: inline-block; float: none; width: 32%; margin-bottom: 20px;}
    #main .about .container>.statistics>.rows .ico {margin-bottom: 10px; }
    #main .about .container>.statistics>.rows .tit { font-size: 1.3rem;}
    #main .about .container>.more a {padding: 8px 20px; font-size: 1.2rem; }
    #main .about .container>.more a>span { margin-right: 10px;}

    #main .about .logo:after{position: absolute;z-index: 1; left: 0;top: 0; width: 100%;height: 25%; background: #fff; content: ''; transition: all .35s;}
    #main .about .logo:before{position: absolute;z-index: 1; left: 0;bottom: 0; width: 100%;height: 60%; background: #fff; content: ''; transition: all .35s;}
    #main .about .logo>img{position: relative;z-index: 20;  margin-top: 50%; width: 100%;height: auto; object-fit: cover;}




    #main .product .title{ width: 80%; }
    #main .product .title>.info { width: 100%;}
    #main .product .title>.info>h3 { font-size: 2.4rem;}
    #main .product .container .shows>.swiper .swiper-slide .info {width: 80%;}
    #main .product .container .shows>.swiper .swiper-slide .info>.txt { font-size: 1.4rem; line-height: 2rem;}
    #main .product .container .shows>.swiper .swiper-slide .info>.tit {font-size: 2rem; }
    #main .product .container .thumbs>.swiper .swiper-slide>span {font-size: 1.2rem; padding: 15px 5px;}
    #main .product .container .shows>.swiper .swiper-slide .info>.more a { padding: 8px 20px; font-size: 1.2rem;}
    #main .product .container .shows>.swiper .swiper-slide .info>.more a>span { margin-right: 10px;}


    #main .partner .title>.info { width: 100%;}
    #main .partner .title>.info>h3{font-size: 2.4rem;}
    #main .partner .layout .container>.describe {font-size: 1.4rem; line-height: 2rem;}

    #main .news .title>.info {  width: 70%;}
    #main .news .title>.info>h3{font-size: 2.4rem;}
    #main .news .title>.more{padding-top: 0;}
    #main .news .title>.more>a { font-size: 1.2rem;}
    #main .news .title>.more>a i{ font-size: 2rem;}

    #main .responsibility .title>.info { width: 100%; }
    #main .responsibility .title>.info>h3{font-size: 2.4rem;}
    #main .responsibility .container .nav>.rows {padding: 30px;}
    #main .responsibility .container .nav>.rows>a .tit { font-size: 1.8rem;}



}

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

    #banner .swiper-slide .info{ left: 12%; bottom: 32%; width: 86%;}
    #banner .swiper-slide .info>.line{ left: -20px;top: 0; width: 6px;}
    #banner .swiper-slide .info>.tit{font-size: 1.4rem;}
    #banner .swiper-slide .info>.txt {font-size: 2rem;}
    #banner .swiper-slide .info.info-text-right{ left: 12%;right: auto;}
    #banner .swiper-pagination { right: 50px!important; }


    #main .about .title>.info>h3{font-size: 2rem;}
    #main .product .title>.info>h3 { font-size: 2rem;}

    #main .news .title>.info>h3{font-size: 2rem;}
    #main .news .container .swiper .swiper-slide>a .view>.tit {font-size: 1.6rem;}
    #main .news .container .swiper .swiper-slide>a .box>.tit { font-size: 1.6rem;}

    #main .partner .title>.info>h3{font-size: 2rem;}
    #main .partner .layout { padding-top: 20px;}
    #main .partner .layout .container>.client { padding-top: 30px; }


    #main .responsibility .title>.info>h3{font-size: 2rem;}
    #main .responsibility .container .img {height: 160px; }
    #main .responsibility .container .img>img{ height: 100%; width: auto; object-fit: cover;}
    #main .responsibility .container .nav>.rows {padding: 20px;}

}