@charset "utf-8";



#banner{width:100%; overflow: hidden;}
#banner .swiper{ position: relative; z-index: 80;height:100%;}
#banner .swiper-wrapper{height:100%;}
#banner .swiper-slide{width: 100%; height:100%;overflow: hidden;position: relative;background-position: center top;background-size: cover;}
#banner .swiper-slide img { width:100%; }
#banner .swiper-slide.swiper-slide-active img.pc{animation: ring 2s infinite; animation-iteration-count:1;}
#banner .swiper-slide img.ph { display:none; }
#banner .swiper-slide .info{ position: absolute;z-index: 50; top: 35%; left: 10%; text-align: left;}
#banner .swiper-slide .info>.drop{position: absolute;z-index: 1; left: -30px;top: 0;width: 60px;height:60px; background: #d70d19;}
#banner .swiper-slide .info>.tit{ position: relative; z-index: 10; font-size: 3.0rem; font-weight: bold; color: #fff; }
#banner .swiper-slide .info>.sub{ position: relative;z-index: 10; padding-top: 8px; font-size: 2.0rem;color: #fff; }
#banner .swiper-slide .info>.sub a { font-size:1.4rem; display:inline-block; padding:10px 30px; margin-top:50px; }
#banner .swiper-slide .info.i2 { left:50%; text-align:center; margin-left:-320px; width:640px; }

#banner .swiper-slide .tr{text-align: right; left: auto; right: 15%;}
#banner .swiper-button-prev, #banner .swiper-button-next { display: inline-block; font-weight:bold; color: #FFFFFF; transition: all .35s;}
#banner .swiper-button-prev:hover, #banner .swiper-button-next:hover {  transform: scale(1.5); }
#banner .swiper-button-prev { left:3%; }
#banner .swiper-button-next { right:3%; }

#banner .swiper-pagination{ display:none; z-index: 80; text-align: center; }
#banner .swiper-pagination-bullet{width:12px;height:12px;background-color:#fff;margin-bottom: 12px!important; opacity: .8; transition: all .3s;}
#banner .swiper-pagination-bullet-active,.swiper-pagination-bullet-active{opacity: 1; background: #d70d19; }




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




#space{height:100%; background: #fff;}
#main{position:relative; z-index:3; background: #fff;}

#main>.product{margin: 0 auto;}
#main>.product>h1 { font-size:2.8rem; font-weight:bold; text-align:center; line-height:200px; }
#main>.product>.box { padding:0 30px; }
#main>.product>.box a { float:left; display:inline-block; width:25%; text-align:center; }
#main>.product>.box a img { width: calc(100% - 40px); transition: all 0.36s; }
#main>.product>.box a:hover img { transform: scale(1.08); }
#main>.product>.box a p { font-size:2.0rem; padding-top:30px; color:#000; font-weight:bold; text-transform:uppercase;}
#main>.product>.video { max-width:1136px; width:90%; margin:0 auto; margin-top:50px; }
#main>.product>.video>div { display:inline-block; width: calc(50% - 20px); max-width:548px; padding:0 10px; margin-top:50px; text-align:center; position:relative; }
#main>.product>.video>div p { }
#main>.product>.video>div p a { font-size:1.4rem; display:inline-block; background-color:#000; color:#FFF; padding:15px 50px; }

/* 视频弹框 */
.video_pop { display: block; width: 80%; height: 80%; background: #000; position: fixed; left: 10%; top:10%; z-index: 999!important; display: flex; justify-content: center; align-items: center; display: none; }
.video_pop .close_btn { display: flex; align-items: center; justify-content: center; color: #fff; position: absolute; right: 5%; top: 5%; background: url(../img/close2.png) no-repeat center; z-index: 100; cursor: pointer; }
.video_pop .close_btn .iconfont { font-size: 5rem; }
#video { width: 100%; max-height: 96%; }
.video_pop .warp { display: flex; align-items: center; justify-content: center; width: 100%; height: 80vh; }


#main>.case{margin: 0 auto; background:#000; margin-top:100px; padding-bottom:100px;}
#main>.case .wrap{ max-width: inherit; width: 100%; padding:0 100px;}
#main>.case .right{ width: 100%; position: relative;}

#main>.case .button{ position:relative; }
#main>.case .button h1 { font-size:2.8rem; font-weight:bold; color:#FFF; text-align:center; line-height:200px; }
#main>.case .button>.arrow-prev, #main>.case .button>.arrow-next{ display: inline-block; background-color:#FFF; margin-left: 5px; width: 3.8rem; height: 3.8rem; line-height: 4.0rem;color: #999;cursor: pointer; text-align: center; font-weight: bold; border-radius: 100%; transition: all .35s;}
#main>.case .button>.arrow-prev { position:absolute; right:7.8rem; top:50%; margin-top:-1.9rem; }
#main>.case .button>.arrow-next { position:absolute; right:2.8rem; top:50%; margin-top:-1.9rem; }
#main>.case .button>.arrow-prev>i, #main>.case .button>.arrow-next>i{font-size: 1.8rem; }
#main>.case .button>.arrow-prev:hover, #main>.case .button>.arrow-next:hover{border-color: #d70d19; color: #d70d19;}
#main>.case .button>.pagination{display: inline-block; width: auto!important; bottom: 0; line-height: 36px;font-size: 1.4rem; color:#999;  margin: 0 20px;}
#main>.case .button .swiper-button-disabled{border-color: #eee!important; color: #eee!important;}

#main>.case .swiper{ display: block;}
#main>.case .swiper .swiper-slide{padding: 20px 0;}
#main>.case .swiper .swiper-slide>a{display: block; transition: all .35s;}
#main>.case .swiper .swiper-slide>a .img{text-align: left;}
#main>.case .swiper .swiper-slide>a .img>img{width: 100%;height: auto; border-radius: 25px; }
#main>.case .swiper .swiper-slide>a:hover{ transform: translateY(-20px);}
#main>.case .swiper .swiper-slide>a:hover .box>.tit{color: #d70d19;}




#main>.company{  background-color:#F5EDE0; }
#main>.company .title { max-width: inherit; padding:100px 0px; margin:0 auto; text-align:center; }
#main>.company .title .tit{ color:#000; font-size:2.8rem; font-weight:bold; letter-spacing:normal; position:relative; }
#main>.company .title .desc{ color:#000; font-size:1.6rem; line-height:150%; font-weight:300; margin-top:30px; }


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

    #banner{height: auto;}

}


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

}

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

}




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



    #banner .swiper-slide .info>.drop{width: 40px;height:40px; }
    #banner .swiper-slide .info>.tit{ font-size: 3.6rem;}
	#banner .swiper-button-prev, #banner .swiper-button-next { display:none; }
	#banner .swiper-pagination { display:block; }
	#main>.product>h1 { font-size:1.6rem; line-height:100px; }


	#main>.case .wrap{ padding:0 30px;}
	#main>.case .button h1 { font-size:1.6rem; line-height:150px; }
	
	#main>.company .title .tit{ font-size:2.8rem; }
	#main>.company .title .desc{ font-size:1.6rem; }

}

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

    #banner .swiper-slide .info { left:3%;  }
    #banner .swiper-slide .info>.tit{ font-size: 2rem;}
    #banner .swiper-slide .info>.sub{font-size: 1.4rem;}

    #banner .swiper-pagination-bullet{width:10px;height:10px;}


    #main>.case { padding: 80px 0; }
	#main>.case .button h1 { font-size:2.8rem; line-height:100%; margin-left:0; padding-bottom:100px; }
	#main>.case .button>.arrow-prev, #main>.case .button>.arrow-next{ margin-left: 5px; width: 4.8rem; height: 4.8rem; line-height: 5.4rem; }
	#main>.case .button>.arrow-prev { right:50%; top:auto; bottom:10%; margin-right:1.5rem; }
	#main>.case .button>.arrow-next { right:50%; top:auto; bottom:10%; margin-right:-6.5rem; }

    #main>.company .inspect>.left { height: 300px;}
    #main>.company .inspect>.center p { font-size: 1.3rem;line-height: 1.6; }
	
	#main>.product>.box a { width:50%; padding-bottom:20px; }
	#main>.product>.box a p { font-size:1.1rem; padding-top:10px; }
	#main>.product>.box a img { width: calc(100% - 10px); }
	#main>.product>.video>div { width:100%; padding-bottom:10px; }
	#main>.product>.video>div p { padding-top:10px; }
	#main>.product>.video>div p a{ font-size:1.1rem; padding:10px 20px; }
	

}

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

    #banner .swiper-slide .tr{text-align: left; left: 15%; right: auto;}
    #banner .swiper-slide img.pc{display:none;}
	#banner .swiper-slide img.ph { display:block; }
    #banner .swiper-slide .info>.tit{ font-size: 1.4rem; }
    #banner .swiper-slide .info>.sub{font-size: 1.0rem;}
	#banner .swiper-slide .info>.sub a { font-size:1.0rem; }

	#main>.case .wrap{ padding:0 30px;}

    #main>.case .title>h3 {font-size: 2.4rem;}
	#main>.case .button h1 { font-size:1.6rem; }
	#main>.case .button>.arrow-prev, #main>.case .button>.arrow-next{ margin-left: 5px; width: 2.8rem; height: 2.8rem; line-height: 3.0rem; }
	#main>.case .button>.arrow-prev>i, #main>.case .button>.arrow-next>i{font-size: 1.2rem; }

	#main>.company .title .tit{ font-size:1.8rem; }
	#main>.company .title .desc{ font-size:1.2rem; padding:0 20px; }
	#main>.company .title .desc br { display:none; }

}


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


    #banner .swiper-slide .info>.drop{ left: -20px; width: 30px;height: 30px;}
    #banner .swiper-slide .info>.sub{ padding-top: 4px; }


    #main>.case { padding: 30px 0; }

}