body{background:#fff; color:#393939; font-size:1rem;}
*{box-sizing: border-box;}
body,code,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,legend,li,ol,p,pre,span,td,textarea,th,ul{margin:0;padding:0;outline:0;border:0;sans-serif; font-family: Arial,Microsoft YaHei,SimSun,"sans-serif"}
fieldset,form,input,legend,textarea{outline:0;}
li{list-style:none;}
img{border:0;}
article,aside,dialog,figure,footer,header,menu,nav,section{display:block;}
a:link{color:#373737;text-decoration:none;}
a:visited{color:#373737;text-decoration:none;}
a:hover{color:#e62129;}

.ant_btn{background: #da2c2f; border-radius: 1rem; height: 2.5rem; line-height: 2.5rem; color: #fff; text-align: center; padding:0 1.5rem; cursor: pointer; display: inline-block; margin-top: 1rem; transition: all .5s;}
.ant_btn a{color: #fff;}
.ant_btn i{margin-right: 0.3rem;}
.ant_btn:hover{background: #1e57c7;}

.page_body{width: 100%; overflow: hidden;}

#navbar{width: 100%; position: fixed; top: 0px; left: 0px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); z-index: 999; background: #fff;}
.navbar_container{display: flex; align-items: center; justify-content: space-between; max-width: 1200px; margin: 0px auto; height: 88px; transition: all .5s ease-in-out;}
.navbar_logo img{height: 42px;}
.navbar_menu{display: flex; margin-left: 28px;}
.navbar_menu a{padding-left: 18px; padding-right: 18px;}
.navbar_menu a.menu_active{color: #da2c2f; font-weight: bold;}
.nav_sticky .navbar_container{height: 65px;}
#navbar .navbar_btn{display: none;}


.top_banner{height: 232px; overflow: hidden; position: relative;}
.top_banner .tb_text{left: 15%; position: absolute; top: 50%; transform: translateY(-50%); color: #fff; width: 36%;}
.top_banner .tb_text div:first-child{font-size: 32px;}
.top_banner .tb_text div:last-child{color: #ccc; font-size: 14px;}

.top_area{width: 100%; height: 65px;}
.swiper{width:100%; height:600px; position: relative; overflow: hidden;}
.swiper a{display: block; height: 600px; text-indent: -99999px;}
.swiper-slide{background-position:center;background-size:cover;}
.swiper-slide img{display:block;width:100%;height:600px;}
.swiper-button-next,.swiper-rtl .swiper-button-prev{right:30px;}
.swiper-button-prev,.swiper-rtl .swiper-button-next{left:30px;}
.swiper-button-next:after,.swiper-rtl .swiper-button-prev:after{color:rgba(255,255,255,.5);content:"\ea6e"; font-size:5rem; font-family:"remixicon";transition:all .3s linear;}
.swiper-button-prev:after,.swiper-rtl .swiper-button-next:after{color:rgba(255,255,255,.5);content:"\ea64"; font-size:5rem; font-family:"remixicon";transition:all .3s linear;}
.swiper-button-next:hover:after,.swiper-button-prev:hover:after,.swiper-rtl .swiper-button-next:hover:after,.swiper-rtl .swiper-button-prev:hover:after{color:#fff;}
.swiper-pagination-bullet{width:30px;height:12px;border-radius:5px;background:#ccc;transition:all .5s linear;}
.swiper-pagination-bullet-active{width:50px;}

.swiper-slide .swiper-text{position:absolute;bottom:-50px; left:50%; transform: translateX(-50%); width:45%;transition:.6s;}
.swiper-fade .swiper-slide-active .swiper-text{transform:translate(-50%,-120px);}
.swiper-slide .swiper-text div{display:block; overflow: hidden;}


.section{padding-top: 80px; padding-bottom: 80px; position: relative;}
.section .container{max-width: 1200px; margin: 0px auto; position: relative;}
.section .section_title{text-align: center; margin-bottom: 3rem;}
.section .section_title h2{font-size: 2rem; font-weight: normal;}
.section .section_title p{padding-top: 8px; font-size: 1rem; color: #999; width: 50%; margin: 0px auto;}

.about_container{display: flex; width: 100%;}
.about_container .about_picture{width: 450px; margin-right: 2rem}
.about_container .about_picture img{width: 100%;}
.about_container .about_content{flex: 1}
.about_container .about_list{display: flex; justify-content: space-between; padding-top: 2rem;}
.about_container .about_box{width: 45%;}
.about_container .about_box .about_box_content{font-size: 0.9rem; color: #666; text-align: center;}
.about_container .about_box .about_box_title{border-radius: 1rem; height: 2.5rem; line-height: 2.5rem; color: #fff; text-align: center; width: 10rem; margin: 0px auto; margin-top: 0.8rem; display: block;}
.about_container .about_box .about_box_title i{margin-right: 0.3rem;}


.service_list{display: flex; width: 100%; max-width: 1200px; justify-content: space-between; padding-bottom: 3rem; flex-wrap: wrap;}
.service_list .service_bg{width: 32%; margin-bottom: 1.5rem; cursor: pointer;}
.service_list .service_box{transition: all .5s; height: 100%; width: 100%; padding: 36px 25px; background: #fff; border-radius: 1rem;}
.service_list .service_active,.service_list .service_box:hover{box-shadow: 10px 10px 18px 0px rgba(0, 0, 0, 0.2);}
.service_box .service_picture{font-size: 0px;}
.service_box .service_picture img{width: 100%;}
.service_box .service_title{text-align: center; font-size: 1.2rem; padding:0.8rem 0rem;font-weight: bold;}
.service_box .service_info{text-align: center; color: #666;}
.service_btn{position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); background: #da2c2f; border-radius: 1rem; height: 2.5rem; line-height: 2.5rem; color: #fff; text-align: center; padding:0 1.5rem; cursor: pointer;}
.service_btn i{margin-right: 0.3rem;}
.service_btn:hover{background: #1e57c7;}


.pro_list{display: flex; width: 100%; max-width: 1200px; padding-bottom: 3rem; flex-wrap: wrap;}
.pro_list .pro_bg{width: 31%; margin: 0px 1% 1.5rem 1%; cursor: pointer;}
.pro_list .pro_box{transition: all .5s; height: 100%; width: 100%; padding: 36px 25px; background: #fff; border-radius: 1rem;}
.pro_list .pro_active,.pro_list .pro_box:hover{box-shadow: 10px 10px 18px 0px rgba(0, 0, 0, 0.2);}
.pro_box .pro_picture{font-size: 0px;}
.pro_box .pro_picture img{width: 100%;}
.pro_box .pro_title{text-align: center; font-size: 1.2rem; padding:0.8rem 0rem;font-weight: bold;}
.pro_box .pro_info{text-align: center; color: #666;}
.pro_btn{position: absolute; bottom: 3rem; left: 50%; transform: translateX(-50%); background: #da2c2f; border-radius: 1rem; height: 2.5rem; line-height: 2.5rem; color: #fff; text-align: center; padding:0 1.5rem; cursor: pointer;}
.pro_btn i{margin-right: 0.3rem;}
.pro_btn:hover{background: #da2c2f;}

.case_container{width: 100%; display: flex; justify-content: space-between;}
.case_container .case_picture,.case_container .case_list{width: 47.5%;}
.case_picture{display: flex; justify-content: space-between; flex-wrap: wrap; align-items: flex-start;}
.case_picture .case_picture_box{width: 49%; position: relative; font-size: 0px; margin-top: 12px; border-radius: 1rem; box-shadow: 5px 5px 5px 0px rgba(0, 0, 0, 0.2);}
.case_picture .case_picture_img{width: 100%; overflow: hidden; border-radius: 1rem; cursor: pointer;}
.case_picture .case_picture_img img{width: 100%; transition: all .5s;}
.case_picture .case_picture_box:hover img{scale: 1.1}
.case_picture .case_picture_title{position: absolute; bottom: 0px; font-size: 1rem; padding: 0px 1rem; text-align: center; width: 100%; display: block; background: rgba(0, 0, 0, 0.6); color: #fff; line-height: 2rem; border-radius: 0 0 1rem 1rem;}
.case_picture .case_picture_title a{color: #fff;}

.case_list_box{box-shadow: 2px 2px 12px -2px rgba(0,0,0,0.08); margin-top: 1rem; padding: 1.6rem 2rem; cursor: pointer; transition: all .5s;}
.case_list_box:hover{box-shadow: 2px 2px 12px -2px rgba(0,0,0,0.2);}
.case_list_box:hover .ant_btn{}
.case_list_box .case_list_title{font-size: 1.2rem;}
.case_list_box .case_list_info{color: #666; padding-top: 0.5rem;}


.products_list{display: flex; flex-wrap: wrap; justify-content: space-between;}
.products_box{width: 31.5%; box-shadow: 0px 0px 0.6rem rgba(0, 0, 0, 0.1); border-radius: 1rem; margin-bottom: 2rem; cursor: pointer; transition: all .5s; padding-bottom: 1rem; position: relative;}
.products_bg{position: absolute; top: 0px; left: 0px; bottom: 0px; width: 100%; background: rgba(0, 0, 0, 0.5); border-radius: 1rem; opacity: 0; z-index: 99; transition: all .5s;}
.products_box .products_btn{position: absolute; bottom: -2.5rem; left: 50%; transform: translateX(-50%) translateY(50%); font-size: 1rem; transition: all .5s; padding: 0px;}
.products_box .products_btn a{display: block; padding: 0 1.5rem;}
.products_box:hover .products_bg{opacity: 1;}
.products_box:hover .products_btn{bottom: 35%; z-index: 100;}
.products_box .products_picture{font-size: 0px; border-radius: 1rem 1rem 0 0; overflow: hidden; width: 100%; position: relative;}
.products_box .products_picture img{width: 100%;}
.products_box .products_title{padding: 1rem 1rem 0.3rem 1rem;}
.products_box .products_info{padding:0 1rem; font-size: 0.8rem; color: #666;}

.contact_list{padding-bottom: 1rem;}
.contact_list div{line-height: 1.8rem;}



#map{width: 100%; height: 368px; overflow: hidden;}



.location,.page_container{max-width: 1350px; margin: 0px auto; margin-top: 1rem;}
.location .location_box{display: flex;}
.location .location_box i{font-size: 1rem;}

.page_container{display: flex; justify-content: space-between; padding-bottom: 42px; margin-top: 1.5rem;}
.page_left{box-shadow: 0 2px 15px #ddd; width: 72%; padding: 42px 30px 72px 30px; position: relative;}
.page_right{width: 25%}
.page_title{text-align: center; font-size: 18px; font-weight: normal;}
.page_info{text-align: center; font-size: 14px; padding-top: 18px;}
.page_description{padding: 15px; margin-top: 18px; border: 1px solid #d5d5d5; background: #f2f2f2; font-size: 14px;}
.page_content{padding-top: 28px;}
.page_content img{max-width: 80%; height: auto; margin: 0px auto;}
.page_foot{width: 100%; display: flex; justify-content: space-between; font-size: 14px; position: absolute; bottom: 28px; left: 0px; padding: 0px 30px;}
.page_foot_btn{text-align: center; padding-top: 42px;}
.page_foot_btn a{display: inline-block; height: 48px; line-height: 48px; padding: 0px 72px; background: #da2c2f; color: #fff; border-radius: 8px;}
.page_foot_btn a:hover{background: #1e57c7;}

.page_right p{font-size: 20px; padding-bottom: 18px; font-weight: bold;}
.right_box{ margin-bottom: 18px; box-shadow: 0 2px 15px #ddd; padding: 20px;}
.right_box .right_content{padding-bottom: 18px;}
.right_picture img{width: 100%;}
.right_qr{display: flex; text-align: center; justify-content: space-between; padding-top: 18px;}
.right_qr .right_qr_box{width: 48%;}
.right_qr .right_qr_box .right_qr_img{font-size: 0px;}
.right_qr .right_qr_box img{width: 100%;}
.right_qr .right_qr_box .right_qr_title{font-size: 14px;}

.bg{position: fixed; top: 0px; height: 100%; bottom: 0px; width: 100%; overflow: hidden; background: rgba(0, 0, 0, 0.3); display: none; z-index: 9998;}
.middle_contact{width: 500px; transform: scale(0) translate(-50%,-50%); transform-origin: 0% 0%; overflow: hidden; background: #fff; padding: 42px 0px; position: fixed; top: 50%; left: 50%; z-index: 9999; border-radius: 1rem; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); text-align: center; transition: all .5s;}
.middle_contact .middle_contact_box{width: 30%; display: inline-block;}
.middle_contact .middle_contact_box img{width: 100%;}
.middle_contact .middle_contact_title{font-size: 0.8rem; text-align: center;}
.middle_contact .middle_contact_text{padding-top: 28px;}
.middle_contact .middle_logo{padding-bottom: 18px;}
.middle_contact .middle_logo img{width: 172px;}
.close{position: absolute; top: 20px; right: 20px; font-size: 1.6rem; cursor: pointer;}
.close:hover{color: #da2c2f;}

body .open_box{transform: scale(1) translate(-50%,-50%); transform-origin: center;}

.page{padding-top:32px; padding-bottom:25px; overflow:hidden; width:100%; text-align: center;}
.page a{text-decoration:none; font-size:14px; color:#333; background:#FFF; border:1px solid #ccc;  display: inline-block; height: 32px; width: 32px; line-height: 32px; margin-left: 3px; margin-right: 3px; border-radius: 3px;}
.page a:hover,.page  a.active{background:#da2c2f; border:1px solid #da2c2f; color:#fff;}
.page a.active{color:#fff;}
.page_menu{box-shadow: 0 15px 15px 1px rgba(238, 238, 238, 0.5); width: 100%;}
.page_menu .page_menu_box{max-width: 1350px; margin: 0px auto;}
.page_menu a{display: inline-block; height: 56px; line-height: 56px; padding-left: 28px; padding-right: 28px; margin-right: 2px;}
.page_menu a.page_menu_active,.page_menu a:hover{background: #da2c2f; color: #fff;}

.footer{text-align: center; padding: 25px 0px; background: #292d32; width: 100%; color: #e5e5e5; font-size: 14px; overflow: hidden;}

.contact_qr{display: flex; width: 30%;}
.contact_qr_box{width: 31%; text-align: center; margin-right: 2%;}
.contact_qr_img{font-size: 0px;}
.contact_qr_box img{width: 100%;}
.contact_qr_title{font-size: 12px;}


.footer a{color: #e5e5e5;}
.footer a:hover{color: #da2c2f;}
.footer>.container{display: flex; justify-content: space-between;}

.contact_list div{line-height: 20px;}
.footer .copyright{width: 40%; line-height: 20px;}



.contact_info{width: 22%;}

.blur{-webkit-filter: blur(5px); -moz-filter: blur(5px); -ms-filter: blur(5px); filter: blur(5px); position: relative;}

@media (max-width: 1199px) {
	
	.top_banner{height: 232px; overflow: hidden; position: relative;}
	.top_banner .tb_text{left: 15%; position: absolute; top: 50%; transform: translateY(-50%); color: #fff; width: 80%;}
	.top_banner .tb_text div:first-child{font-size: 36px;}
	.top_banner .tb_text div:last-child{color: #ccc;}

	.navbar_container{padding: 0px 1rem;}
	.swiper{height:420px;}
	.swiper-slide img{height:420px;}

	.section .container{padding: 0px 1rem;}
	.section .section_title p{width: 80%;}
}

@media (max-width: 1100px) {
	.navbar_contact{font-size: 0.9rem;}
	.navbar_menu a{padding: 0px 8px;font-size: 0.9rem;}
}

@media (max-width: 820px) {
	.navbar_contact{display: none;}

	.swiper{height:375px;}
	.swiper-slide img{height:375px;}

	.about_container{flex-wrap: wrap;}
	.about_container .about_picture{width: 100%; text-align: center; margin-right:0px; padding-bottom: 1rem;}
	.about_container .about_picture img{width: 75%;}

	.section .section_title{margin-bottom: 1rem;}

	.service_list{flex-wrap: wrap;}
	.service_list .service_bg{width: 100%;}
	.service_list .service_box{width: 100%; margin-top: 1.5rem;}
	.service_box .service_picture{width: 50%; float: left;}
	.service_box .service_title{font-size: 1.5rem;}
	.service_box .service_info{float: right; width: 46%; font-size: 1.2rem; line-height: 2rem;}

	.products_list{width: 90%; margin: 0px auto;}

	.case_container{flex-wrap: wrap;}
	.case_container .case_picture, .case_container .case_list{width: 90%; margin: 0px auto;}
	.case_container .case_list{display: flex; justify-content: space-between;}
	.case_container .case_list_box{width: 48.5%;}
	.case_picture .case_picture_box{width: 48%; margin-bottom: 1rem;}

	.products_box{width: 48.5%;}
	.contact_info .contact_qr{width: 100%;}

	.top_banner{height: 232px; overflow: hidden; position: relative;}
	.top_banner .tb_text{left: 15%; position: absolute; top: 50%; transform: translateY(-50%); color: #fff;}
	.top_banner .tb_text div:first-child{font-size: 36px;}
	.top_banner .tb_text div:last-child{color: #ccc;}
}


@media (max-width: 620px) {

	
	.top_banner{height: 172px; overflow: hidden; position: relative;}
	.top_banner .tb_text{left: 10%; position: absolute; top: 50%; transform: translateY(-50%); color: #fff; width: 60%;}
	.top_banner .tb_text div:first-child{font-size: 24px;}
	.top_banner .tb_text div:last-child{color: #ccc; font-size: 12px; line-height: 18px; height: 36px; overflow: hidden;}

	.navbar_container{height: 65px;}
	.navbar_logo{margin-left: 1rem;}
	.navbar_logo img{height: 32px;}

	.navbar_contact{display: block; font-size: 0.8rem;}

	.navbar_menu{display: block; width: 100%; position: fixed; top: 65px; margin-left: 0px; height: 0px; transition: all .5s; overflow: hidden; background: #da2c2f;}
	.navbar_menu a{display: block; width: 50%; text-align: center; height: 3rem; line-height: 3rem; font-size: 1.1rem; color: #fff; margin:0px 25%;}
	.navbar_menu a.menu_active{color: #FFF; font-weight: bold; border-bottom: 2px solid #fff;}

	.navbar_top{padding: 0px;}

	#navbar .navbar_btn{display: block; padding: 1rem; font-size: 1.5rem; position: relative;}

	.active_menu .navbar_menu{height: 100%; padding-top: 3rem;}

	.service_box .service_picture{width: 100%; float: none;}
	.service_box .service_info{width: 100%; float: none;font-size: 0.9rem; line-height: 1rem;}
	.service_box .service_title{font-size: 1rem;}

	.case_picture .case_picture_box{width: 100%;}
	.case_picture .case_picture_title{font-size: 0.9rem; line-height: 2rem; height: 2rem;}

	.case_container .case_list{flex-wrap: wrap;}
	.case_container .case_list_box{width: 100%;}
	.case_container .case_list_info{font-size: 0.9rem;}

	.products_box{width: 100%;}
	.contact_box{flex-wrap: wrap;}
	.contact_map{width: 100%;}
	.contact_info{flex: none; width: 100%;}
	.contact_qr_title{font-size: 0.8rem;}


	.swiper{height:212px;}
	.swiper-slide img{height:212px;}
	.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after,.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{font-size: 2rem;}
	.swiper-pagination-bullet-active{width: 2rem;}
	.swiper-pagination-bullet{height: 0.6rem;}

	.section{padding: 32px 0px;}
	.section .section_title h2{font-size: 1.5rem;}
	.about_container .about_picture img{width: 90%;}

	.pro_list .pro_bg{width: 92%; margin: 0px auto; margin-bottom: 1rem; cursor: pointer;}
	.location_box{width: 92%; margin: 0px auto;}
	.page_container{flex-wrap: wrap;}
	.page_title{font-size: 14px;}
	.page_info{font-size: 12px;}
	.page_left{padding: 42px 30px 112px 30px;}
	.page_content img{max-width: 100%;}
	.page_container .page_left,.page_container .page_right{width: 92%; margin: 0px auto;}
	.page_container .page_right{margin-top: 20px;}

	.middle_contact{width: 90%;}
	.middle_contact .middle_contact_text{font-size: 14px;}

	.footer{font-size: 0.8rem; padding-bottom: 0px;}
	.footer>.container{flex-wrap: wrap;}
	.contact_qr{width: 100%; padding: 0px 20px; box-sizing: border-box;}
	.footer .copyright{width: 100%; padding-top: 18px; padding-bottom: 18px;}
}