*{margin:0;padding:0;outline:0;}
body,html{overflow-x:hidden;color:#333;font:14px/30px "Inter","poppins", Arial;}
blockquote,body,dd,div,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,input,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0;}
input[type=text],input[type=submit],textarea,button{-webkit-border-radius:0;font-family:"Inter","poppins", Arial;-webkit-appearance:none;}
input:focus{outline:0;}
textarea{resize:none;}
h1,h2,h3,h4,h5,h6{font-style:normal;font-size:100%;}
abbr,em,i,li,ol,ul{list-style-type:none;font-style:normal;}
img{border:0;vertical-align:middle;}
*{box-sizing:border-box;}
a{color:#333;text-decoration:none;-webkit-transition:.3s;-moz-transition:.3s;-o-transition:.3s;transition:.3s;-ms-transition:.3s;}
a:hover{color:#274aae;text-decoration:none;}
.hide,.none,ins{display:none;}
.wrap{clear:both;display:block;margin:0 auto;max-width:1400px;width:100%;padding:0 0;}
.animate img{position:relative;opacity:1;-webkit-transition:.5s all;-moz-transition:.5s all;-o-transition:.5s all;transition:.5s all;-webkit-transform:scale(1,1) rotate(0);-ms-transition:.5s all;}
a:hover .animate img{-webkit-transform:scale(1.06,1.06);-moz-transform:scale(1.06,1.06);-o-transform:scale(1.06,1.06);transform:scale(1.06,1.06);-ms-transform:scale(1.06,1.06);}
.animate img:hover{-webkit-transform:scale(1.06,1.06);-moz-transform:scale(1.06,1.06);-o-transform:scale(1.06,1.06);transform:scale(1.06,1.06);-ms-transform:scale(1.06,1.06);}
.tran,.tran a,a.tran,.tran img{-webkit-transition:all .3s;-moz-transition:all .3s;transition:all .3s;-ms-transition:all .3s;}
.popup{width: 100%;height: 100vh;background-color: rgba(0, 0, 0, 0.8);position: fixed;top: 0;left: 0;z-index: 999;display: none;}

@font-face{
	font-family:"quicksand";
	src:url('../fonts/quicksand.ttf') format('truetype');
	font-weight:normal;
	font-style:normal;
}
@font-face{
	font-family:"din";
	src:url("../fonts/din-medium.woff") format("woff"),
		url("../fonts/din-medium.ttf") format("truetype"),
		url("../fonts/din-medium.eot") format("embedded-opentype"),
		url("../fonts/din-medium.svg") format("svg");
	font-weight:normal;
	font-style:normal;
}
#header{ width:100%; background:#fff; position:fixed; left:0; top:0; z-index:200;box-shadow: 2px 3px 14px 2px rgba(0,0,0,0.05);}
#header .wrap{ height:80px;display:flex;justify-content:space-between ;align-items:center;}
#header .logo img{ height:40px}
#header .right{display:flex;align-items:center;gap:0 100px}
#header .right .nav ul{display:flex;align-items:center;gap:0 50px}
#header .right .nav ul li{ position:relative}
#header .right .nav ul li h3{ position:relative}
#header .right .nav ul li h3 a{ font-size:16px; font-weight:700; line-height:60px;display:flex;justify-content:center ;align-items:center;text-transform:capitalize}
#header .right .nav ul li h3 i{ margin-left:5px}
#header .right .nav ul li h3:before{content:"";position:absolute;background-color:#dc1114;height:2px;width:0;bottom:0;left:50%;transition:all 300ms ease-in-out;}
#header .right .nav ul li h3:hover:before{width:100%;left:0;}
#header .right .nav ul li .sub{ display:none; position:absolute; left:0; top:100%; background:#fff;box-shadow: rgba(149, 157, 165, .2) 0 8px 24px;}
#header .right .nav ul li .sub1{ width:320px}
#header .right .nav ul li .sub dl li a{ font-weight:700; color:#5b5b5b; display:block; padding:10px 20px; position:relative;text-transform:capitalize}
#header .right .nav ul li .sub dl li a:before{content:"";position:absolute;background-color:#dc1114;height:2px;width:0;bottom:0;left:50%;transition:all 300ms ease-in-out;}
#header .right .nav ul li .sub dl li a:hover{ background:#f5f5f5}
#header .right .nav ul li .sub dl li a:hover:before{width:100%;left:0;}
#header .right .nav ul li:hover h3 a{ color:#dc1114}
#header .right .nav ul li:hover h3 i{ color:#dc1114}
#header .right .nav ul li.active h3 a{ color:#dc1114;}
#header .right .nav ul li.active h3 i{ color:#dc1114;}
#header .right .nav ul li.active h3:before{width:100%;left:0;}
#header .right .quote a{ border:2px solid #dc1114; color:#dc1114; border-radius:50px; display:block; padding:5px 20px; font-weight:700; font-size:16px;}
#header .right .quote a:hover{ background:#dc1114; color:#fff}
#header .right .mnav{ display:none}

#banner{ width:100%; margin-top:80px}
#banner .focus{ position:relative}
#banner .focus .swiper-slide{ position:relative}
#banner .focus .swiper-slide .img img{ width:100%}
#banner .focus .swiper-slide .info{ position:absolute; left:0; top:0; height:100%; width:100%;display:flex;align-items:center}
#banner .focus .swiper-slide .info .text{ padding-right:40%}
#banner .focus .swiper-slide .info .text .text1{ font-size:60px; color:#010075; font-weight:700; line-height:1.2; font-family:"poppins";text-transform:capitalize}
#banner .focus .swiper-slide .info .text .text2{ margin-top:20px; font-size:18px;}
#banner .focus .swiper-slide .info .text .more{ margin-top:30px}
#banner .focus .swiper-slide .info .text .more a{ background:#dc1114; color:#fff; font-size:16px; padding:15px 40px; border-radius:6px; display:inline-block; margin-right:20px;box-shadow: 1px 1px 10px -1px rgba(0, 0, 0, 0.33);}
#banner .focus .swiper-slide .info .text .more a:last-child{ background:#fff; color:#dc1114}

.stitle{ text-align:center}
.stitle .title{ font-size:36px; font-weight:700; line-height:1; font-family:"poppins";text-transform:capitalize}
.stitle .em{ width:8%; height:3px;overflow:hidden; margin:20px auto 0; background:#dc1114}
.stitle .desc{ margin-top:10px; line-height:1.5; font-weight:300}
#about{ padding:80px 0}
#about .list{ margin-top:50px;display:flex;justify-content:space-between ;align-items:center;}
#about .list .text{ width:48%}
#about .list .text p{ font-size:16px}
#about .list .text dl{ margin-top:20px}
#about .list .text dl dd{ font-weight:700; font-size:16px}
#about .list .text dl dd i{ color:#dc1114; margin-right:5px}
#about .list .img{ width:48%}
#about .list .img img{ width:100%; border-radius:10px}

#product{ width:100%; padding:80px 0; background:#f7f9fc;}
#product .list{ margin-top:50px}
#product .list ul{display:flex;flex-wrap:wrap;gap:30px}
#product .list ul li{ width:calc((100% - 60px) / 3); background:#fff; padding:0 20px 20px; border-radius:10px;transition:all .3s;}
#product .list ul li .img{ overflow:hidden}
#product .list ul li .img img{ width:100%}
#product .list ul li .info{ margin-top:20px}
#product .list ul li .info .title{ font-weight:700; font-size:20px;text-transform:capitalize}
#product .list ul li .info .desc{ margin-top:10px;line-height:1.5;  font-weight:300;}
#product .list ul li .info .more{ margin-top:20px; color:#dc1114; font-size:16px}
#product .list ul li:hover{box-shadow: 2px 3px 14px 2px rgba(0,0,0,0.05);}
#product .list ul li:hover .info .more{ font-style:italic}

#service{ width:100%; padding:80px 0; background: url(../images/bg_srvice.jpg) no-repeat center center; background-size:cover}
#service .list{ margin-top:50px}
#service .list ul{display:flex;flex-wrap:wrap;gap:30px}
#service .list ul li{ width:calc((100% - 90px) / 4);}
#service .list ul li .icon { width:80px; height:80px; background:#fff; border-radius:80px;display:flex;justify-content:center;align-items:center; margin:0 auto}
#service .list ul li .icon i{ font-size:40px; color:#010075}
#service .list ul li .info{ margin-top:30px; text-align:center}
#service .list ul li .info .title{ font-size:26px; color:#fff;text-transform:capitalize}
#service .list ul li .info .desc{ margin-top:20px; color:#fff; line-height:1.5; font-weight:300;}

#news{ width:100%; padding:80px 0}
#news .list{ margin-top:50px}
#news .list ul{display:flex;flex-wrap:wrap;gap:30px}
#news .list ul li{ width:calc((100% - 60px) / 3); background:#fff; border-radius:10px;transition:all .3s; overflow:hidden}
#news .list ul li{box-shadow: 2px 3px 14px 2px rgba(0,0,0,0.05); min-height:100%}
#news .list ul li .img{ overflow:hidden}
#news .list ul li .img img{ width:100%}
#news .list ul li .info{ padding:20px; min-height:350px}
#news .list ul li .info .title{ font-weight:700; font-size:20px; line-height:1.5;text-transform:capitalize}
#news .list ul li .info .desc{ margin-top:10px; line-height:1.5;  font-weight:300; color:#666}
#news .list ul li .info .more{ margin-top:20px; color:#dc1114; font-size:16px}
#news .list ul li .time{ border-top:1px solid rgba(0,0,0,.05); padding:10px 20px; font-weight:300;}

#contact{ width:100%; padding:80px 0; background:#f7f9fc;}
#contact .list{ margin-top:50px;display:flex;justify-content:space-between }
#contact .list {  border-radius: 10px;box-shadow: 2px 3px 14px 2px rgba(0,0,0,0.05); background: #fff;overflow: hidden;}
#contact .left{ width:50%; padding:70px; background:rgba(1,0,117,.6)}
#contact .left .htitle{ font-size:25px; font-weight:700; margin-bottom:40px; color:#fff}
#contact .left .item{ margin-bottom:40px;display:flex;justify-content:space-between}
#contact .left .item.none{ display:none}
#contact .left .item .icon{ font-size:26px; width:50px; height:50px; border-radius:80px; background:rgba(255,255,255,.5);display:flex;justify-content:center;align-items:center;}
#contact .left .item .icon i{ color:#dc1114}
#contact .left .item .info{ width:calc(100% - 80px)}
#contact .left .item .title{ font-size:22px; font-weight:700; color:#fff}
#contact .left .item .desc{ font-size:18px; color:#fff; margin-top:10px}
#contact .form{ width:50%;padding:50px;}
#contact .form .htitle{ font-size:25px; font-weight:700; margin-bottom:40px;}
#contact .form .box form{ display:flex;justify-content:space-between ;align-items:center;flex-wrap:wrap;;gap:10px 50px; }
#contact .form .box .item{ width:calc((100% - 50px) / 2)}
#contact .form .box .item2{ width:100%}
#contact .form .box .item label{ display:block;}
#contact .form .box .item label font{ color:#f00; margin-left:5px}
#contact .form .box .item .text{ border:1px solid #ddd; padding:0 10px; width:100%; border-radius:6px; display:block; line-height:46px; margin-top:5px}
#contact .form .box .item .textarea{ border:1px solid #ddd; padding:0 10px; width:100%; border-radius:6px; display:block; line-height:46px; height:100px; margin-top:10px}
#contact .form .box .button{margin-top:30px;}
#contact .form .box .button .btn{background:#dc1114;color:#fff;border-radius:40px;padding:10px 40px;line-height:30px;border:0;; text-transform:uppercase; font-weight:600}
#contact .form .box .button .btn:hover{background:#010075;}

#footer{ width:100%; background:#171717}
#footer .logo{ border-bottom:1px solid rgba(255,255,255,.05);display:flex;justify-content:space-between ;align-items:center; padding:50px 0 20px;}
#footer .logo .img img{ height:30px}
#footer .logo .right{ display:flex;;align-items:center;gap:0 10px}
#footer .logo .right a{ width:30px; height:30px; border-radius:50%; display:block; background:rgba(255,255,255,.2);display:flex;justify-content:center;align-items:center;}
#footer .logo .right a i{ color:#fff; font-size:16px}
#footer .logo .right a:hover{ background:rgba(255,255,255,.4)}
#footer .map{ display:flex;justify-content:space-between ;padding:50px 0;}
#footer .map .about{ width:30%}
#footer .map .about h3{ font-size:18px; color:#fff; margin-bottom:10px}
#footer .map .about .content{ color:#888;}
#footer .map .about .content p.none{ display:none}
#footer .map .item h3{ font-size:18px; color:#fff; margin-bottom:10px}
#footer .map .item p a{ color:#888;;text-transform:capitalize}
#footer .map .item p a:hover{ color:#fff}
#footer .copyright{ border-top:1px solid rgba(255,255,255,.05); padding:20px 0;display:flex;justify-content:space-between ;align-items:center;}
#footer .copyright .text{ color:#888;}
#footer .copyright .text i{ margin:0 8px}
#footer .copyright .link a{ margin-left:10px;}
#footer .copyright a{ color:#888;}
#footer .copyright a:hover{ color:#fff;}

@media (max-width:1400px){
	.wrap{padding:0 20px;}
}
@media (max-width:1200px){
	#header .right{display:flex;align-items:center;gap:0 50px}
	#header .right .nav ul{display:flex;align-items:center;gap:0 30px}
}
@media (max-width:1000px){
	#header .right{display:flex;align-items:center;gap:0 10px}
	#header .right .nav ul{display:flex;align-items:center;gap:0 10px}
}

@media (max-width:800px){
	body,html{font-size:.23rem;line-height:.34rem;}
	.wrap{padding:0;}
	#header .wrap{height:.8rem;padding:0 .2rem;}
	#header .logo img{ height:.4rem}
	#header .right .nav{position:absolute;background:#fff;min-height:100vh;width:100%;top:.8rem;z-index:999;padding:.1rem 0;transform:translatex(100%);left:0;}
	#header .right .nav.active{transform:translatex(0);display:block;}
	#header .right .nav ul{display:block;border-top:1px solid rgba(0,0,0,.06);}
	#header .right .nav ul li h3{ border-bottom:1px solid rgba(0,0,0,.06);;}
	#header .right .nav ul li h3 a{line-height:.7rem;padding:0;display:flex;justify-content:space-between ;align-items:center; padding:0 .2rem}
	#header .right .nav ul li h3 a i{display:block; color:#888;}
	#header .right .nav ul li .sub{display:none;position: inherit;left:0;top:0;background:rgba(255,255,255,.05);width:100%;border-bottom:1px solid rgba(255,255,255,.1);}
	#header .right .nav ul li .sub dl{padding:.1rem 0;}
	#header .right .nav ul li .sub dl dd{border-bottom:1px solid rgba(0,0,0,.06);}
	#header .right .nav ul li .sub dl dd a{line-height:.7rem;color:#999; padding:0 .3rem}
	#header .right .nav ul li .sub dl dd a:hover{background:none;}
	#header .right .nav ul li .sub dl dd:last-child{ border:0}
	
	#header .right .mnav{position:relative;display:block;width:.34rem;height:.25rem;cursor:pointer;}
	#header .right .mnav span{position:absolute;display:block;width:.34rem;height:.05rem;background:#dc1114;transition:all .5s;border-radius:.05rem;}
	#header .right .mnav .s1{top:0;}
	#header .right .mnav .s2{top:.1rem;width:.26rem;}
	#header .right .mnav .s3{top:.2rem;}
	#header .right .mnav.isopen .s1{top:.1rem;transform:rotate(45deg);}
	#header .right .mnav.isopen .s2{width:0;opacity:0;}
	#header .right .mnav.isopen .s3{top:.1rem;transform:rotate(-45deg);}
	#header .right .mnav.active .s1{top:.1rem;transform:rotate(45deg);}
	#header .right .mnav.active .s2{width:0;opacity:0;}
	#header .right .mnav.active .s3{top:.1rem;transform:rotate(-45deg);}
	#header .right .quote{ display:none}
	
	#banner{margin-top:.8rem}
	#banner .focus .swiper-slide .img{ height:7rem}
	#banner .focus .swiper-slide .img img{width:100%;height:100%;object-fit:cover;}
	#banner .focus .swiper-slide .info .text{ padding:0 .2rem}
	#banner .focus .swiper-slide .info .text .text1{ font-size:.36rem; }
	#banner .focus .swiper-slide .info .text .text2{ margin-top:.2rem; font-size:.24rem;}
	#banner .focus .swiper-slide .info .text .more{ margin-top:.3rem}
	#banner .focus .swiper-slide .info .text .more a{font-size:.2rem; padding:.15rem .2rem; margin-right:.1rem;}
	#banner .focus .swiper-button-next{ display:none}
	#banner .focus .swiper-button-prev{ display:none}
	
	.stitle .title{ font-size:.36rem;}
	.stitle .em{margin:.3rem auto 0;}
	#about{ padding:.8rem .2rem}
	#about .list{ margin-top:.5rem; flex-wrap:wrap;}
	#about .list .text{ width:100%}
	#about .list .text p{ font-size:.22rem}
	#about .list .text dl{ margin-top:.2rem}
	#about .list .text dl dd{ font-weight:700; font-size:.22rem}
	#about .list .text dl dd i{ color:#dc1114; margin-right:.1rem}
	#about .list .img{ width:100%; margin-top:.5rem}
	
	#product{padding:.8rem .2rem;}
	#product .list{ margin-top:.5rem}
	#product .list ul{gap:.3rem}
	#product .list ul li{ width:100%; padding:.3rem;}
	#product .list ul li .img{ overflow:hidden}
	#product .list ul li .img img{ width:100%}
	#product .list ul li .info{ margin-top:.2rem}
	#product .list ul li .info .title{  font-size:.3rem}
	#product .list ul li .info .desc{ margin-top:.1rem;}
	#product .list ul li .info .more{ margin-top:.2rem; font-size:.26rem}
	
	#service{ padding:.8rem .2rem;}
	#service .list{ margin-top:.5rem}
	#service .list ul{display:flex;flex-wrap:wrap;gap:.3rem}
	#service .list ul li{ width:100%;}
	#service .list ul li .icon { width:1rem; height:1rem; border-radius:1rem;}
	#service .list ul li .icon i{ font-size:.4rem;}
	#service .list ul li .info{ margin-top:.3rem;}
	#service .list ul li .info .title{ font-size:.3rem; }
	#service .list ul li .info .desc{ margin-top:.22rem;}
	
	#news{ padding:.8rem .2rem}
	#news .list{ margin-top:.5rem}
	#news .list ul{gap:.3rem}
	#news .list ul li{ width:100%;}
	#news .list ul li .info{ padding:.3rem; height: auto; min-height:auto}
	#news .list ul li .info .title{font-size:.3rem;}
	#news .list ul li .info .desc{ margin-top:.1rem; font-size:.22rem;}
	#news .list ul li .info .more{ margin-top:.2rem; font-size:.26rem}
	#news .list ul li .time{ padding:.1rem .3rem; font-size:.22rem;}
	
	#contact{padding:.8rem .2rem;}
	#contact .list{ margin-top:.5rem;flex-wrap:wrap}
	#contact .left{ width:100%; padding:.3rem;}
	#contact .left .htitle{ font-size:.3rem;margin-bottom:.4rem;}
	#contact .left .item{ margin-bottom:.4rem}
	#contact .left .item .title{ font-size:.26rem; }
	#contact .left .item .desc{ font-size:.22rem;margin-top:.1rem}
	#contact .left .item .desc a{ color:#fff}
	#contact .form{ width:1000%;padding:.3rem;}
	#contact .form .htitle{ font-size:.3rem;margin-bottom:.4rem;}
	#contact .form .box{;gap:.1rem; }
	#contact .form .box .item{ width:100%}
	#contact .form .box .item2{ width:100%}
	#contact .form .box .item label font{ margin-left:.05rem}
	#contact .form .box .item .text{padding:0 .2rem;line-height:.6rem; margin-top:.1rem}
	#contact .form .box .item .textarea{ padding:0 .2rem; line-height:.3rem; height:1rem; margin-top:.1rem}
	#contact .form .box .button{margin-top:.3rem;}
	#contact .form .box .button .btn{font-size:.24rem;border-radius:.6rem;padding:.2rem .4rem;line-height:.3rem;}
	
	#footer .logo{  padding:.5rem .2rem .2rem;}
	#footer .logo .img img{ height:.4rem}
	#footer .logo .right{ gap:0 .1rem}
	#footer .logo .right a{ width:.34rem; height:.34rem; }
	#footer .logo .right a i{ color:#fff; font-size:.2rem}
	#footer .logo .right a:hover{ background:rgba(255,255,255,.4)}
	#footer .map{ display:block;padding:.5rem .2rem;}
	#footer .map .about{ width:100%; text-align:center}
	#footer .map .about .tel .title{ font-size:.22rem;}
	#footer .map .about .tel .desc{  font-size:.4rem;}
	#footer .map .about .tel .desc a{ color:#fff}
	#footer .map .about .content{ margin-top:.2rem;  font-size:.22rem;}
	#footer .map .about .content a{ color:#fff}
	#footer .map .about1{ display:none}
	#footer .map .item{ display:none}
	#footer .copyright{padding:.2rem .2rem;display:block; font-size:.2rem}
	#footer .copyright .text{ text-align: center;}
	#footer .copyright .text i{ margin:0; display:block}
	#footer .copyright .link{ text-align:center}
	#footer .copyright .link a{ margin:0 .05rem;}

}

#nbanner{ width:100%; position:relative; margin-top:80px}
#nbanner .img{ height:480px; width:100%;}
#nbanner .img img{width:100%;height:100%;object-fit:cover}
#nbanner .info{ position:absolute; left:0 ;top:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:99;display:flex;justify-content:center;align-items:center;}
#nbanner .info .title{ font-size:42px; line-height:1; font-weight:700; text-align: center; color:#fff; font-family:"poppins"}
#nbanner .info .desc{ font-size:18px; text-align:center; color:#fff; margin-top:20px;font-family:"poppins"}

#pro_name{width:100%; margin-top:80px;padding:100px 0; background:#010075; color:#fff; font-size:36px; font-weight:700;text-transform:capitalize}
#pro_show{width:100%; padding:80px 0;}
#pro_show .intro{ display:flex;justify-content:space-between ;align-items:center;}
#pro_show .intro .content{ width:48%}
#pro_show .intro .content h1{ font-size:28px; color:#dc1114; line-height:1.5;text-transform:capitalize}
#pro_show .intro .content .desc{ margin-top:20px; font-size:16px; font-weight:300; line-height:1.8}
#pro_show .intro .img{ width:48%; background:#f7f9fc; padding:30px; border-radius:10px;}
#pro_show .intro .img img{ width:100%}
#pro_show .intro .quote{ margin-top:30px}
#pro_show .intro .quote a{background:#dc1114;color:#fff;font-size:16px;border-radius:40px;padding:10px 20px;border:0; display:inline-block}
#pro_show .intro .quote a:hover{background:#010075;}
#pro_video{ width:100%; padding:80px 0; background:#f7f9fc}
#pro_video .ptitle{ text-align:center}
#pro_video .ptitle .title{font-size:36px; font-weight:700; line-height:1}
#pro_video .ptitle .desc{ font-size:16px}
#pro_video .video{display:flex;justify-content:center; text-align:center; margin-top:50px}
#pro_video .video iframe{ width:900px; height:500px}
#pro_pic{ width:100%; padding:80px 0; font-size:16px; line-height:1.5}
#pro_pic p{ margin-bottom:10px}
#pro_pic img{ max-width:100%}
#pro_pic .aligncenter{ text-align:center}

#main{ width:100%}
#main .product{ padding:80px 0}
#main .product .list ul{display:flex;flex-wrap:wrap;gap:50px 30px}
#main .product .list ul li{ width:calc((100% - 60px) / 3); background:#fff; padding:0 20px 20px; border-radius:10px;box-shadow: 2px 3px 14px 2px rgba(0,0,0,0.05);}
#main .product .list ul li .img{ overflow:hidden}
#main .product .list ul li .img img{ width:100%}
#main .product .list ul li .info{ margin-top:20px}
#main .product .list ul li .info .title{ font-weight:700; font-size:20px;text-transform:capitalize}
#main .product .list ul li .info .desc{ margin-top:10px;line-height:1.5;  font-weight:300;}
#main .product .list ul li .info .more{ margin-top:20px; color:#dc1114; font-size:16px}

#main .news{  padding:80px 0}
#main .news .list ul{display:flex;flex-wrap:wrap;gap:30px}
#main .news .list ul li{ width:calc((100% - 60px) / 3); background:#fff; border-radius:10px;transition:all .3s; overflow:hidden}
#main .news .list ul li{box-shadow: 2px 3px 14px 2px rgba(0,0,0,0.05); min-height:100%}
#main .news .list ul li .img{ overflow:hidden;}
#main .news .list ul li .img img{ width:100%}
#main .news .list ul li .info{ padding:20px; min-height:350px}
#main .news .list ul li .info .title{ font-weight:700; font-size:20px; line-height:1.5;text-transform:capitalize}
#main .news .list ul li .info .desc{ margin-top:10px; line-height:1.5;  font-weight:300; color:#666}
#main .news .list ul li .info .more{ margin-top:20px; color:#dc1114; font-size:16px}
#main .news .list ul li .time{ border-top:1px solid rgba(0,0,0,.05); padding:10px 20px; font-weight:300;}
#main .news .list ul li:hover{box-shadow: 2px 3px 14px 2px rgba(0,0,0,0.1); }

#about_1{ width:100%; padding:80px 0}
#about_1 .wrap{display:flex;justify-content:space-between ;align-items:center;}
#about_1 .text{ width:48%;}
#about_1 .text .since{ font-size:40px; font-weight:900; font-family:"poppins"}
#about_1 .text h2{ font-size:26px; font-weight:700; margin-bottom:10px; font-family:"poppins"; margin-top:20px}
#about_1 .text p{ font-size:16px;}
#about_1 .img{ width:48%}
#about_1 .img img{ width:100%; border-radius:10px}
#about_2{ width:100%; padding:80px 0; background:#f7f8fc}
#about_2 .list{ margin-top:50px}
#about_2 .list ul{display:flex;flex-wrap:wrap;gap:30px}
#about_2 .list ul li{ width:calc((100% - 60px) / 3); background:#fff}
#about_2 .list ul li .img{ height:300px; overflow:hidden}
#about_2 .list ul li .img img{width:100%;height:100%;object-fit:cover}
#about_2 .list ul li .info{ padding:20px; text-align:center}
#about_2 .list ul li .info .title{ font-size:18px; font-weight:700;text-transform:capitalize}
#about_2 .list ul li .info .desc{ margin-top:10px; line-height:1.5; font-weight:300}
#about_3{ width:100%; padding:80px 0;}
#about_3 .list{ margin-top:50px}
#about_3 .list ul{display:flex;flex-wrap:wrap;gap:30px}
#about_3 .list ul li{ width:calc((100% - 60px) / 3); background:#fff}
#about_3 .list ul li .img{ height:300px; overflow:hidden}
#about_3 .list ul li .img img{width:100%;height:100%;object-fit:cover}
#about_3 .list ul li .info{ padding:20px; text-align:center}
#about_3 .list ul li .info .title{ font-size:18px; font-weight:700;text-transform:capitalize}

#main .contact{ padding:80px 0; }
#main .contact .ttitle{ font-size:24px; text-align:center; font-weight:600; font-family:"poppins"; color:#666}
#main .contact .ctitle{ font-size:44px; text-align:center; font-weight:900; font-family:"Inter",poppins; margin-top:30px; color:#000; line-height:1}
#main .contact .list{display:flex;justify-content:space-between ; margin-top:50px}
#main .contact .list .content{ width:48%;box-shadow: 2px 3px 14px 2px rgba(0,0,0,0.05); padding:50px; border-radius:10px}
#main .contact .list .content .item{ margin-bottom:40px;display:flex;justify-content:space-between}
#main .contact .list .content .item .icon{ font-size:26px; width:50px; height:50px; border-radius:80px; background:rgba(220,17,20,.3);display:flex;justify-content:center;align-items:center;}
#main .contact .list .content .item .icon i{ color:#fff}
#main .contact .list .content .item .info{ width:calc(100% - 80px)}
#main .contact .list .content .item .info .title{ font-size:20px; font-weight:700;}
#main .contact .list .content .item .info .desc{ font-size:18px; margin-top:10px; color:#dc1114}
#main .contact .list .content .item.none{ display:none}
#main .contact .list .form {width:48%;box-shadow: 2px 3px 14px 2px rgba(0,0,0,0.05);; padding:50px; border-radius:10px}
#main .contact .list .form .box form{display:flex;justify-content:space-between ;align-items:center;flex-wrap:wrap;;gap:10px 20px; }
#main .contact .list .form .box .item{ width:calc((100% - 20px) / 2)}
#main .contact .list .form .box .item2{ width:100%}
#main .contact .list .form .box .item label{ display:block;}
#main .contact .list .form .box .item label font{ color:#f00; margin-left:5px}
#main .contact .list .form .box .item .text{ border:1px solid #ddd; padding:0 10px; width:100%; border-radius:6px; display:block; line-height:46px; margin-top:5px}
#main .contact .list .form .box .item .textarea{ border:1px solid #ddd; padding:0 10px; width:100%; border-radius:6px; display:block; line-height:46px; height:150px; margin-top:10px}
#main .contact .list .form .box .button{margin-top:30px;}
#main .contact .list .form .box .button .btn{background:#dc1114;color:#fff;border-radius:40px;padding:10px 40px;line-height:30px;border:0; text-transform:uppercase; font-weight:600}
#main .contact .list .form .box .button .btn:hover{background:#010075;}

#main .view{ padding:80px 0}
#main .view .title{ text-align:center; border-bottom:1px solid #eee; padding-bottom:30px}
#main .view .title h1{ font-size:30px;  font-family:"poppins"; line-height:1.5;text-transform:capitalize}
#main .view .title .time{ text-align:center; margin-top:20px; font-weight:300}
#main .view .content{ padding:30px 0; font-size:16px; line-height:1.6}
#main .view .content img{ max-width:80%; border-radius:6px}
#main .view .content p{ margin-bottom:15px}
#main .view .content .aligncenter{ text-align:center}

#main .page{ padding:160px 0 80px}
#main .page .title{ text-align:center; border-bottom:1px solid #eee; padding-bottom:30px}
#main .page .title h1{ font-size:30px;  font-family:"poppins"; line-height:1.5;text-transform:capitalize}
#main .page .title .time{ text-align:center; margin-top:20px; font-weight:300}
#main .page .content{ padding:30px 0; font-size:16px; line-height:1.6}
#main .page .content img{ max-width:80%; border-radius:6px}
#main .page .content p{ margin-bottom:15px}
#main .page .content .aligncenter{ text-align:center}

#main .service{ padding:80px 0}
#main .service .item_1 .stitle{ font-size:36px; font-weight:900; text-align:center; font-family:"poppins";text-transform:capitalize}
#main .service .item_1 .list{ display:flex; margin-top:50px;gap:0 30px}
#main .service .item_1 .item{ width:calc((100% - 60px) / 2);box-shadow: 2px 3px 14px 2px rgba(0,0,0,0.05); padding:50px; border-radius:10px}
#main .service .item_1 .item .icon{ font-size:40px; color:#dc1114}
#main .service .item_1 .item .title{ font-size:24px; margin-top:20px; font-weight:700;text-transform:capitalize}
#main .service .item_1 .item .desc{ color:#666; line-height:1.8; margin-top:10px}
#main .service .item_2{ margin-top:100px}
#main .service .item_2 .stitle{text-align:center; font-family:"poppins"}
#main .service .item_2 .stitle .title{ font-size:36px; font-weight:900;;text-transform:capitalize}
#main .service .item_2 .stitle .desc{ font-weight:300}
#main .service .item_2 .list{ margin-top:50px}
#main .service .item_2 .list ul{display:flex;flex-wrap:wrap;gap:30px}
#main .service .item_2 .list ul li{ width:calc((100% - 60px) / 3); background:#fff}
#main .service .item_2 .list ul li .img{ height:300px;overflow:hidden}
#main .service .item_2 .list ul li .img img{width:100%;height:100%;object-fit:cover}
#main .service .item_2 .list ul li .info{ padding:20px; text-align:center}
#main .service .item_2 .list ul li .info .title{ font-size:18px; font-weight:700;text-transform:capitalize}
#main .service .item_3{ margin-top:100px}
#main .service .item_3 .stitle{text-align:center; font-family:"poppins"}
#main .service .item_3 .stitle .title{ font-size:36px; font-weight:900;;text-transform:capitalize}
#main .service .item_3 .stitle .desc{ font-weight:300}
#main .service .item_3 .form{box-shadow: 2px 3px 14px 2px rgba(0,0,0,0.05); padding:50px; border-radius:10px; margin-top:50px }
#main .service .item_3 .form form{display:flex;justify-content:space-between ;align-items:center;flex-wrap:wrap;;gap:10px 20px; }
#main .service .item_3 .form .item{ width:calc((100% - 40px) / 3)}
#main .service .item_3 .form .item2{ width:100%}
#main .service .item_3 .form .item label{ display:block;}
#main .service .item_3 .form .item label font{ color:#f00; margin-left:5px}
#main .service .item_3 .form .item .text{ border:1px solid #ddd; padding:0 10px; width:100%; border-radius:6px; display:block; line-height:46px; margin-top:5px}
#main .service .item_3 .form .item .textarea{ border:1px solid #ddd; padding:0 10px; width:100%; border-radius:6px; display:block; line-height:46px; height:150px; margin-top:10px}
#main .service .item_3 .form .button{margin-top:30px; text-align: center; width:100%}
#main .service .item_3 .form .button .btn{background:#dc1114;color:#fff;border-radius:40px;padding:10px 40px;line-height:30px;border:0; text-transform:uppercase; font-weight:600}
#main .service .item_3 .form .button .btn:hover{background:#010075;}

#quote{width: 900px; height:700px;border-radius: 10px;background-color: #FFFFFF;position: fixed;top: 50%;left: 50%;display: none;margin: -350px 0 0 -450px;z-index: 1000;}
#quote .box{ padding:50px 60px}
#quote .box .title{ text-align:center}
#quote .box .title h1{ font-size:40px; color:#000; font-weight:900; font-family:"poppins"}
#quote .box .title .info{ color:#666; font-size:18px; margin-top:20px; line-height:1.5; font-weight:300}
#quote .box .form{ margin-top:40px;}
#quote .box .form form{ display:flex;flex-wrap:wrap;gap:30px 50px}
fieldset{ display:none}
#quote .box .form .item{ width:calc((100% - 50px) / 2)}
#quote .box .form .item2{ width:100%}
#quote .box .form .item label{ display:block; font-size:16px; font-weight:600}
#quote .box .form .item label font{ color:#f00}
#quote .box .form .item .text{ width:100%; line-height:40px; border:0; border-bottom:1px solid #ccc; font-size:16px}
#quote .box .form .item .textarea{ width:100%; line-height:30px;height:100px; border:0; border-bottom:1px solid #ccc; font-size:16px}
#quote .box .form .button{ text-align:center}
#quote .box .form .button .btn{ display:inline-block; padding:18px 60px; background:#dc1114; color:#fff; font-weight:600; border:0; border-radius:60px; margin:0 auto}
#quote .box .form .button .btn:hover{ background:#000}
#quote .box .close{font-size: 28px; position:absolute; top:20px; right:20px; cursor:pointer}

.pagination{padding:80px 0 0px;display:flex;align-items:center;justify-content:center;gap:0 8px;}
.pagination a{color:#5a5a5a;height:50px;width:50px;line-height:50px;text-align:center;border:1px solid #eee;border-radius:4px; display:block}
.pagination .active a{color:#fff;background:#dc1114;border:1px solid #dc1114;}
.pagination a:hover{background:#dc1114;color:#fff;border:1px solid #dc1114;}

@media (max-width:800px){
	body,html{font-size:.23rem;line-height:.34rem;}
	#nbanner{margin-top:.8rem}
	#nbanner .img{ height:4rem;}
	#nbanner .info{ padding:0 .2rem}
	#nbanner .info .title{ font-size:.4rem;}
	#nbanner .info .desc{ font-size:.24rem;margin-top:.2rem}
	
	#pro_name{margin-top:.8rem;padding:1rem .2rem; line-height:1.2; font-size:.4rem;}
	#pro_show{ padding:.8rem .2rem;}
	#pro_show .intro{ flex-wrap:wrap-reverse;}
	#pro_show .intro .content{ width:100%; margin-top:.5rem}
	#pro_show .intro .content h1{ font-size:.3rem;}
	#pro_show .intro .content .desc{ margin-top:.2rem; font-size:.24rem; }
	#pro_show .intro .img{ width:100%; padding:.3rem;}
	#pro_show .intro .quote{ margin-top:.3rem; text-align:center}
	#pro_show .intro .quote a{font-size:.22rem;border-radius:.4rem;padding:.15rem .25rem;}
	#pro_show .intro .quote a:hover{background:#010075;}
	#pro_video{padding:.8rem .2rem; background:#f7f9fc}
	#pro_video .ptitle{ text-align:center}
	#pro_video .ptitle .title{font-size:.4rem;}
	#pro_video .ptitle .desc{ font-size:.22rem}
	#pro_video .video{margin-top:.5rem}
	#pro_video .video iframe{ width:100%; height:5rem}
	#pro_pic{padding:.8rem .2rem; font-size:.24rem;}
	#pro_pic p{ margin-bottom:.1rem}
	
	#main .product{ padding:.8rem .2rem}
	#main .product .list ul{gap:.3rem}
	#main .product .list ul li{ width:100%; padding:.3rem;}
	#main .product .list ul li .img{ overflow:hidden}
	#main .product .list ul li .img img{ width:100%}
	#main .product .list ul li .info{ margin-top:.2rem}
	#main .product .list ul li .info .title{  font-size:.3rem}
	#main .product .list ul li .info .desc{ margin-top:.1rem;}
	
	#main .news{ padding:.8rem .2rem}
	#main .news .list ul{gap:.3rem}
	#main .news .list ul li{ width:100%;}
	#main .news .list ul li .info{ padding:.3rem; height: auto; min-height:auto}
	#main .news .list ul li .info .title{font-size:.3rem;}
	#main .news .list ul li .info .desc{ margin-top:.1rem; font-size:.22rem}
	#main .news .list ul li .info .more{ margin-top:.2rem; font-size:.26rem}
	#main .news .list ul li .time{ padding:.2rem .3rem; font-size:.22rem;}
	
	#about_1{padding:.8rem .2rem}
	#about_1 .wrap{flex-wrap:wrap}
	#about_1 .text{ width:100%;}
	#about_1 .text .since{ font-size:.4rem; }
	#about_1 .text h2{ font-size:.3rem;margin-bottom:.1rem;}
	#about_1 .text p{ font-size:.24rem; line-height:1.8;}
	#about_1 .img{ width:100%; margin-top:.5rem}
	#about_2{ padding:.8rem .2rem;}
	#about_2 .list{ margin-top:.5rem}
	#about_2 .list ul{gap:.3rem}
	#about_2 .list ul li{ width:100%}
	#about_2 .list ul li .img{ height:4rem;}
	#about_2 .list ul li .info{ padding:.3rem}
	#about_2 .list ul li .info .title{ font-size:.28rem;}
	#about_2 .list ul li .info .desc{ margin-top:.1rem; line-height:1.8; font-size:.22rem}
	#about_3{padding:.8rem .2rem;}
	#about_3 .list{ margin-top:.5rem}
	#about_3 .list ul{gap:.3rem}
	#about_3 .list ul li{ width:100%}
	#about_3 .list ul li .img{ height:4rem;}
	#about_3 .list ul li .info{ padding:.3rem;}
	#about_3 .list ul li .info .title{ font-size:.28rem;}
	
	#main .contact{ padding:.8rem .2rem; }
	#main .contact .ttitle{ font-size:.28rem; }
	#main .contact .ttitle br{ display:none}
	#main .contact .list{flex-wrap:wrap; margin-top:.5rem}
	#main .contact .list .content{ width:100%; padding:.5rem; border-radius:.1rem}
	#main .contact .list .content .item{ margin-bottom:.4rem;}
	#main .contact .list .content .item .icon{ font-size:.26rem; width:.5rem; height:.5rem}
	#main .contact .list .content .item .info{ width:calc(100% - .8rem)}
	#main .contact .list .content .item .info .title{ font-size:.26rem;;}
	#main .contact .list .content .item .info .desc{ font-size:.24rem; margin-top:.1rem;}
	#main .contact .list .form {width:100%;padding:.5rem; border-radius:.1rem; margin-top:.2rem}
	#main .contact .list .form .box{gap:.2rem; }
	#main .contact .list .form .box .item{ width:100%}
	#main .contact .list .form .box .item2{ width:100%}
	#main .contact .list .form .box .item label{ display:block;}
	#main .contact .list .form .box .item label font{ margin-left:.05rem}
	#main .contact .list .form .box .item .text{padding:0 .2rem;line-height:.6rem; margin-top:.1rem}
	#main .contact .list .form .box .item .textarea{ padding:0 .2rem; line-height:.3rem; height:1rem; margin-top:.1rem}
	#main .contact .list .form .box .button{margin-top:.3rem;}
	#main .contact .list .form .box .button .btn{font-size:.24rem;border-radius:.6rem;padding:.2rem .4rem;line-height:.3rem;}
	
	#main .view{ padding:.8rem .2rem}
	#main .view .title{ padding-bottom:.3rem}
	#main .view .title h1{ font-size:.3rem;}
	#main .view .title .time{ font-size:.22rem;margin-top:.2rem;}
	#main .view .content{ padding:.3rem 0; font-size:.24rem;}
	#main .view .content p{ margin-bottom:.2rem}
	
	#main .page{ padding:1.6rem .2rem .8rem;}
	#main .page .title{ padding-bottom:.3rem}
	#main .page .title h1{ font-size:.3rem;}
	#main .page .title .time{ font-size:.22rem;margin-top:.2rem;}
	#main .page .content{ padding:.3rem 0; font-size:.24rem;}
	#main .page .content p{ margin-bottom:.2rem}
	
	#main .service{ padding:.8rem .2rem}
	#main .service .item_1 .stitle{ font-size:.36rem; }
	#main .service .item_1 .list{margin-top:.5rem;gap:.3rem;flex-wrap:wrap}
	#main .service .item_1 .item{ width:100%;padding:.3rem;}
	#main .service .item_1 .item .icon{ font-size:.5rem}
	#main .service .item_1 .item .title{ font-size:.26rem; margin-top:.2rem;}
	#main .service .item_1 .item .desc{ margin-top:.1rem; font-size:.22rem}
	#main .service .item_2{ margin-top:1rem}
	#main .service .item_2 .stitle .title{ font-size:.36rem; }
	#main .service .item_2 .stitle .desc{ font-size:.22rem}
	#main .service .item_2 .list{ margin-top:.5rem}
	#main .service .item_2 .list ul{gap:.3rem}
	#main .service .item_2 .list ul li{ width:100%}
	#main .service .item_2 .list ul li .img{ height:auto;}
	#main .service .item_2 .list ul li .info{ padding:.3rem;}
	#main .service .item_2 .list ul li .info .title{ font-size:.24rem;}
	#main .service .item_3{ margin-top:1rem}
	#main .service .item_3 .stitle .title{ font-size:.36rem;}
	#main .service .item_3 .stitle .desc{font-size:.22rem}
	#main .service .item_3 .form{gap:.2rem; padding:.3rem; margin-top:.5rem }
	#main .service .item_3 .form .item{ width:100%}
	#main .service .item_3 .form .item2{ width:100%}
	#main .service .item_3 .form .item label{ display:block;}
	#main .service .item_3 .form .item label font{ margin-left:.05rem}
	#main .service .item_3 .form .item .text{padding:0 .2rem;line-height:.6rem; margin-top:.1rem}
	#main .service .item_3 .form .item .textarea{ padding:0 .2rem; line-height:.3rem; height:1rem; margin-top:.1rem}
	#main .service .item_3 .form .button{margin-top:.3rem;}
	#main .service .item_3 .form .button .btn{font-size:.24rem;border-radius:.6rem;padding:.2rem .4rem;line-height:.3rem;}

	.pagination{padding:.5rem 0 0px;gap:0 .1rem;}
	.pagination a{width:.66rem;height:.66rem;line-height:.66rem;}
}