@charset "utf-8";
#product{margin-bottom: 50px;}
.title{text-align:center;padding:50px 0}
.title h3{position:relative;font-size:40px}
.title h3:before{display:block;color:#F0F0F0;font-size:80px;position:absolute;top:50%;left:50%;-webkit-transform:translateX(-50%) translateY(-50%);-webkit-transform:translateX(-50%) translateY(-50%);-moz-transform:translateX(-50%) translateY(-50%);-ms-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);line-height:1;z-index:-1;font-family:none;font-weight:bold}
.title span{color:#002866}
#product .title h3:before{content:'SERIES'}
.pro-category{background:#F6F6F6;line-height:3;text-align:center}
.pro-category li{float: left;}
.pro-category li:first-child{float:left}
.pro-category li:last-child{float:right;}
.pro-category li span{display:block;padding:0 10px;font-size:48px;line-height: 48px;}
.pro-category li a{display:block;padding: 0 17px;}
.pro-category li a:hover,.pro-category li:first-child span,.pro-category li:last-child a{color:#fff;background:#002866}
.prolist{margin-top:40px}
.prolist li{padding:18px 20px;border:1px solid #E5E5E5;width: 66.6%;}
.prolist li:hover{border:1px solid #002866}
.prolist li>a{display:block;position:relative;border:1px solid #E5E5E5;padding: 0 0 25% 0;width: 33.3%;float: left;box-sizing: border-box;}
.prolist li>a:hover{border:1px solid #002866}
.prolist .pro-con{padding: 11px 20px 12px;width: 66.6%;float: left;box-sizing: border-box;}
.prolist .pro-con h4 a{color:#002866;font-size:20px}
.prolist .pro-con p{font-size:16px;line-height:1.8;color:#666;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.prolist .pro-con>a{display:inline-block;background:#002866;padding:0 30px;border-radius:50px;color:#fff;margin-top:30px}
.prolist .pro-con>a:hover{background:#333}
.prolist li:first-child{padding: 36px 20px 30px;border-right:1px solid transparent;width: 33.3%;}
.prolist li:first-child:hover{border-right:1px solid #002866}
.prolist li:first-child>a{padding: 0 0 74% 0;border:2px solid #002866;width: 100%;}
.prolist li:first-child>.pro-con{padding:10px 0 0;width: 100%;}
.prolist li:first-child .pro-con>a{display:none}

#ys{background: #FAFAFA;overflow: hidden;padding-bottom: 50px;}
.title2{text-align:center;margin:50px 0}
.title2 h3{padding-left:100px;color:#002866;font-size:50px;position:relative;display:inline-block;line-height:1}
.title2 h3 span{background:url(../images/4.png) no-repeat center;background-size:contain;display:block;position:absolute;width:100px;height:88px;left:0;color:transparent}
.title2 p{padding-left:100px;font-size:22px}
.ys{display:flex;position:relative;margin-bottom: 30px;}
.ysL{background:#fff;overflow: hidden;padding: 0;}
.ysL li{padding:30px 30px;box-sizing: border-box;}
.ys-tit{border-bottom:1px solid #E9E9E9;padding: 10px 0;}
.ys-titL{float:left;margin-top:25px}
.ys-titL>span{font-size:50px;float:left;line-height:1}
.ys-titL h4{line-height:1.2;font-size:20px}
.ys-titL h4 span{font-size:14px;font-weight:normal}
.ys-titR{float:right;font-size:150px;overflow:hidden;font-weight:bold;height:75px;line-height:1;color:#EFEFEF}
.ys-con{margin-top:30px}
.ysR{padding:0;overflow: hidden;}
.ysR img{display:block;max-width:100%}
.ys-tab{position:absolute;bottom:30px;left:40px;max-width:700px;background:#F8F8F8;z-index: 5;}
.ys-tab li{float:left;box-sizing:border-box;padding:20px 15px;cursor: pointer;}
.ys-tab li span{float:left;display:block;font-size:50px;margin-right:10px}
.ys-tab div{float:left;line-height:1.5}
.ys-tab strong{font-size:18px}
.ys-tab p{font-size:12px}
.ys-tab li.on{background: #001F62;color:#fff;}

.ys-neirong li{background-size: contain;line-height:60px;}
.ys-neirong1{float:left;background:url(../images/ys-bg1.png) no-repeat center;font-size:20px;color:#fff;width:288px;text-align:center}
.ys-neirong2{float:left;background:url(../images/ys-bg2.png) no-repeat center;font-size:20px;width:255px;text-align:center}
.ys-neirong3{padding:5px 37px;float:right;display:flex;align-items:center;background:url(../images/ys-bg3.png) no-repeat center;color:#fff}
.ys-neirong3 span{font-size:50px}
.ys-neirong3 div{margin:0 10px;line-height:1.5}
.ys-neirong3 .p1{font-size:14px}
.ys-neirong3 .p2{font-size:20px}

#hotProduct{padding-bottom:50px}
.hotProduct a{display:block;overflow: hidden;position: relative;padding: 0 0 74% 0;border: 3px solid #E5E5E5;}
.hotProduct p{text-align:center;line-height:3;}
.hotProduct2{position:relative;}
.hotProduct2 .swiper-button-prev, .hotProduct2 .swiper-button-next{position:absolute;bottom: 50%;width:27px;height:44px;margin-top:-22px;z-index: 8;cursor:pointer;-moz-background-size:27px 44px;-webkit-background-size:27px 44px;background-size:27px 44px;background-position:center;background-repeat:no-repeat;}
.hotProduct2 .swiper-button-prev{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23001F62'%2F%3E%3C%2Fsvg%3E");left:30px}
.hotProduct2 .swiper-button-next{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23001F62'%2F%3E%3C%2Fsvg%3E");right:30px}

#fuwu{background:url(../images/fuwu-bg.jpg) no-repeat center;padding:40px 0}
.fuwuL{color:#fff}
.fuwu1{font-weight:bold;font-size:18px}
.fuwu1 span{font-weight:normal;font-size:12px;margin-left:5px}
.fuwu2{font-size:41px;line-height:1.5;margin-bottom:10px}
.fuwu2 span{color:#FF000E;font-size:50px}
.fuwu3{display:inline-block;border:1px solid;padding:3px 10px;font-size:20px}
.fuwu4{font-size:25px;margin-top:10px}
.fuwu4 span{font-size:30px}
.fuwuR img{display:block;max-width:100%}

#case{padding-bottom: 50px;}
.case div{float:left;width:24.5%}
.case li{margin-bottom:10px}
.case a{display:block;position:relative;padding:0 0 76% 0}
.case p{position:absolute;line-height:2.5;background:rgba(227,35,48,0.5);width:100%;bottom:0;text-align:center;color:#fff}
.case>li{float:left;width:51%;padding:0 5px 0;box-sizing:border-box}
.case>li p{font-size:20px}

#about{background: url(../images/about.jpg) no-repeat center 0;text-align:center;padding-top: 50px;color:#fff;position: relative;}
#about h1{font-size:40px}
.about{font-size:18px;margin-bottom:30px}
#about a{display:inline-block;background:#002866;color:#fff;text-align:center;padding:5px 30px}
#about a:hover{background:#333}
.about-ul{background: #fff url(../images/bg.png) no-repeat bottom;padding: 30px 0;color: #000;margin-top: 30px;position: relative;z-index: 2;}
.about-ul li{float: left;width: 20%;border-right: 1px solid #E1E1E1;box-sizing: border-box;}
.about-ul li:last-child{border-right:0}
.about-ul span{font-size: 30px;}
.about-ul p{display: inline-block;font-size: 22px;}

#news{margin-top: -52px;position: relative;z-index: 0;background: #fff;padding-top: 50px;}
.newsL{padding-bottom:50px}
.newsL .swiper-pagination-bullet-active{background: #001F62;}
.newsL .swiper-pagination-bullet{width:40px;height:5px;border-radius:unset}
.newsL li>a{display:block;position:relative;padding: 0 0 71% 0;z-index:1;}
.newsL li>a img{width:100%;}
.newsL>ul div{display:block;max-width:550px;margin:-82px auto 0;border-radius:10px;box-shadow:0 0 5px #ccc;box-sizing:border-box;padding:10px 20px;z-index:2;position:relative;background:#fff}
.newsL div a{font-size: 18px;font-weight:bold;}
.newsL li div span{display: block;color: #666;}
.newsL div p{color:#444;clear:both;height: 4em;overflow:hidden;}
.newsR li{padding:0 30px;}
.newsR li:hover{box-shadow: 2px 2px 5px #ccc;}
.newsR .news-time{font-size:12px;color:#666;float:right}
.newsR a{display:block;padding: 13px 0;border-bottom:1px solid #EAEAEA;}
.newsR .img{display:none}
.newsR dt{font-size:18px;margin-bottom:10px}
.newsR dd{font-size:14px;color:#696969;height:4em;overflow:hidden}
@media (max-width: 767px){
	#product{margin-bottom: 20px;}
	.title{padding:20px 0}
	.title h3{font-size:20px}
	.title h3:before{font-size:50px}
	.title p{font-size:14px}
	.pro-category{line-height:2.5;display:flex;flex-wrap:wrap;justify-content:space-between;}
	.pro-category:after{display:none}
	.pro-category li{margin-bottom:5px}
	.pro-category li span{font-size:30px;line-height:39px}
	.pro-category li a{padding: 0 5px;border:1px solid #002866;font-size:14px;}
	.pro-category li a:hover,.pro-category li:first-child span,.pro-category li:last-child a{}
	.prolist{
    margin-top: 20px;
}
	.prolist li{margin-bottom:10px;padding:10px;width: 100%;}
	.prolist li>a{padding: 0 0 75% 0;width: 100%;}
	.prolist .pro-con{padding:10px 0;width: 100%;}
	.prolist .pro-con>a{margin-top:10px}
	.prolist li:first-child{padding:10px;border:1px solid #E5E5E5;width: 100%;}
	#hotProduct{padding-bottom:20px}
	
	#ys{padding-bottom:20px}
	.title2{margin:20px 0}
	.title2 h3{font-size:30px;padding-left:50px}
	.title2 h3 span{width:50px;height:44px}
	.title2 p{font-size:14px;padding-left:54px}
	.ys{display:block}
	.ysL li{padding:0}
	.ys-titL{margin-top:0}
	.ys-titR{font-size:80px;height:48px}
	.ys-con{margin:10px 0;font-size:14px}
	.ys-tab{position:unset}
	.ys-tab li{padding:10px 0;width:25%;text-align:center}
	.ys-tab li span{display:none}
	.ys-tab div{float:none}
	.ys-tab strong{font-size:16px}
	.ys-neirong li{line-height:2.7}
	.ys-neirong1{font-size:14px;width:50%;margin-bottom:10px}
	.ys-neirong2{width:50%;font-size:14px;margin-bottom:10px}
	.ys-neirong3{float:none}
	
	#fuwu{padding:20px 0}
	.fuwuL{padding:0}
	.fuwu1{line-height:1.5}
	.fuwu1 span{display:block;margin:0}
	.fuwu2{font-size:20px}
	.fuwu2 span{font-size:22px}
	.fuwu3{font-size:16px}
	.fuwu4{font-size:18px}
	
	#case{padding-bottom:20px;}
	.case div{width:100%}
	.case li{width:50%;float:left;padding:0 5px;box-sizing:border-box}
	.case p{line-height:2}
	.case>li{width:100%}
	
	#about{padding:20px 0}
	#about h1{font-size:20px}
	.about{font-size:14px;margin-bottom:10px;text-align:left}
	#about a{padding:3px 30px;font-size:14px}
	.about-ul{padding:5px 0 0;display:none}
	.about-ul li{width:33.3%;margin-bottom:5px}
	.about-ul li:last-child,.about-ul li:nth-child(4){width:50%}
	.about-ul p{font-size:14px}
	
    #news{margin-top: 0;padding: 0;}
	.newsL>ul div{margin: 0;box-shadow: none;padding: 10px 0;}
	.newsL div span{float:left}
	.newsL div p{font-size:14px;line-height:1.5}
	.newsL div a{font-size: 16px;display: block;}
	.newsR li{padding:0}
	.newsR a{padding:10px 0}
	.newsR dt{position:relative;font-size:14px;margin-bottom:0}
	.newsR dd{height:3em;line-height:1.5}
	.newsR li:hover a{padding:11px 0}
	.newsR li:hover dt{margin-bottom:0}
}