@media (min-width:1441px){/* DESKTOPS */
.banner{position:relative;}
	.banner figure{overflow:hidden;position:relative;height:700px;background:#000;}
	.banner img{position:absolute;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:700px;}
		.banner .iconfont{font-size:40px;color:#fff;background:#005bac;padding:5px 0;border-radius:5px;margin:0 100px;}
		.banner .swiper-button-prev{left:0;}
		.banner .swiper-button-next{right:0;}

.title{margin-left:40%;;margin-bottom:60px;}
	.title h2{font-size:24px;line-height:30px;text-transform:uppercase;font-weight:normal;position:relative;margin-bottom:5px;}
	.title h2:before{content:'';display:block;position:absolute;top:0;left:-100px;font-size:60px;line-height:60px;color:#333;font-weight:bold;background:url(../images/bgtitle.png) no-repeat center center;width:88px;height:50px;}
	.title h2:after{content:'';display:block;position:absolute;top:30px;left:-130px;width:150px;height:1px;background:linear-gradient(to right,#888 0,#888 30px,transparent 30px,transparent 110px,#888 110px,#888 150px);transform:rotate(135deg);}
	.title h2 span{color:#888;font-family:'宋体';margin-left:10px;border-left:1px solid #999;padding-left:10px;}
	.title p{color:#666;}

.product{padding:100px 0;}
	.productclass{margin-bottom:40px;}
		.productclass ul{text-align:center;}
		.productclass li{display:inline-block;padding:0 3px;}
		.productclass li a{display:block;line-height:40px;padding:0 20px;border:1px solid #333;}
		.productclass li a:hover,.productclass li a.on{background:#1f5fc3;border:1px solid #1f5fc3;color:#fff;}
	.productlist{}
		.productlist ul{margin:0 -1%;margin-bottom:20px;}
		.productlist li{float:left;width:23%;margin:0 1% 20px;position:relative;}
		.productlist li a{display:block;}
		.productlist li section{transition:all ease-out 0.3s;border:1px solid #eee;}
		.productlist li figure{overflow:hidden;}
		.productlist li figure img{width:100%;}
		.productlist li h4{position:absolute;bottom:0;left:0;right:0;line-height:40px;transition:all ease-out 0.3s;background:#f1f1f1;text-align:center;}
		.productlist li:hover section{box-shadow:0 0 20px rgba(0,0,0,0.1);}
		.productlist li:hover figure img{transform:scale3d(1.05, 1.05, 1);}

.slogen{background:url(../images/bgslogen.jpg) no-repeat center center;height:180px;}
	.slogeninfo{text-align:center;font-weight:bold;padding:35px 0;}
		.slogeninfo h2{font-size:24px;line-height:30px;color:#f9ee16;}
		.slogeninfo p{font-size:18px;line-height:30px;color:#fff;margin-bottom:20px;}
		.slogeninfo a{font-size:24px;line-height:30px;color:#fff;}

.brand{padding:60px 0;}
	.brandlist{}
		.brandlist dl{background:#1f5fc3;float:left;width:580px;box-sizing:border-box;padding:30px;color:#fff;}
			.brandlist dt{margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,0.2);padding-bottom:19px;}
				.brandlist dt h3{font-size:24px;line-height:30px;}
				.brandlist dt h3 strong{color:#fff102;}
				.brandlist dt p{text-transform:uppercase;}
			.brandlist dd{}
		.brandlist ul{float:right;width:580px;}
		.brandlist li{float:left;width:180px;margin-right:20px;text-align:center;}		
		.brandlist li:last-child{margin-right:0;}
		.brandlist li section{border:1px solid #eee;height:188px;position:relative;}
		.brandlist li section:after{content:'';display:block;position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border:1px solid #1f5fc3;transition:all ease-out 0.3s;opacity:0;}
		@keyframes name{
			0%, 100% {clip:rect(0 180px 2px 0px);}
			25% {clip:rect(0 180px 190px 178px);}
			50% {clip:rect(188px 180px 190px 0);}
			75% {clip:rect(0 2px 190px 0);}
		}
		.brandlist li section:hover:after{animation:name 1s linear infinite;opacity:1;}
		.brandlist li section figure{padding:25px;}
		.brandlist li section img{}
		.brandlist li section h3{}

.about{padding:60px 0;background:#1f5fc3;background-image:linear-gradient(-45deg,transparent 49%,rgba(255,255,255,0.2) 51%,transparent 0);background-size:3px 3px;background-repeat:repeat;}
.about .title{color:#fff;}
.about .title h2:before{color:#fff;}
.about .title h2 span{color:#fff;}
.about .title p{color:#fff;}
	.aboutinfo{float:left;width:50%;position:relative;-webkit-perspective:800;height:300px;}
		.aboutinfo:after{content:'';display:block;position:absolute;top:0;left:0;height:280px;width:715px;background:#fff;transform:rotateY(30deg);box-shadow:0 5px 30px rgba(0,0,0,0.2);}
		.aboutinfo dl{position:relative;z-index:1;padding:40px;height:200px;}
		.aboutinfo dt{font-size:24px;line-height:30px;margin-bottom:20px;}
		.aboutinfo dd{color:#666;}
		.aboutinfo dd a{display:inline-block;margin-top:20px;}
	.aboutcover{float:right;width:50%;position:relative;-webkit-perspective:800;height:300px;}
		.aboutcover:after{content:'';display:block;position:absolute;top:0;right:0;height:280px;width:715px;background:linear-gradient(to right,#ccc 0,#fff 715px);transform:rotateY(-30deg);box-shadow:0 5px 30px rgba(0,0,0,0.2);}
		.aboutcover figure{position:relative;z-index:1;overflow:hidden;padding:40px;height:200px;-webkit-perspective:800;}
		.aboutcover figure img{height:200px;width:100%;transform:rotateY(-30deg) translateX(-5%);}
	.aboutmore{clear:both;text-align:center;}
		.aboutmore a{display:inline-block;line-height:40px;color:#fff;border-bottom:3px solid #58bbfc;}

.news{padding:80px 0 40px;}
	.newslist ul{margin:0 -1%;}
		.newslist li{float:left;width:31.33%;margin:0 1% 2%;}
		.newslist li section{background:#f3f3f3;padding:30px 30px 30px 120px;position:relative;overflow:hidden;}
		.newslist li section:before{content:'';display:block;position:absolute;top:0;left:0;bottom:0;width:0;background:#1f5fc3;transition:all ease-out 0.3s;}
		.newslist li section:after{content:'→';display:block;position:absolute;bottom:30px;left:120px;opacity:0.7;}
		.newslist li section a{display:block;}
		.newslist li section time{position:absolute;top:30px;left:30px;width:60px;display:block;text-align:right;font-family:sysfont,verdana,sans-serif;transition:all ease-out 0.3s;}
		.newslist li section time strong{display:block;font-size:30px;line-height:40px;}
		.newslist li section time span{}
		.newslist li section dl{position:relative;z-index:1;height:160px;}
		.newslist li section dt{font-size:16px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-bottom:20px;font-weight:bold;transition:all ease-out 0.3s;}
		.newslist li section dd{line-height:30px;height:90px;overflow:hidden;opacity:0.7;}
		.newslist li section i{position:absolute;left:30px;bottom:30px;display:block;width:60px;height:60px;background:url(../images/iconnewslist.png) no-repeat center center;}
		.newslist li:hover section a{color:#fff;}
		.newslist li:hover section:before{width:100%;}
		.newslist li:hover section:after{color:#fff;}
		.newslist li:hover section time{color:#fff;}
		.newslist li:hover section dt{color:#fff;}
}
@media (min-width:1025px) and (max-width:1440px){/* LAPTOPS */
.banner{position:relative;}
	.banner figure{overflow:hidden;position:relative;height:600px;background:#000;}
	.banner img{position:absolute;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:600px;}
	.banner section{position:absolute;top:50%;left:0;right:0;transform:translateY(-50%);margin-top:150px;padding:0 5%;}
		.banner section dl{width:50%;text-shadow:0 0 5px rgba(0,0,0,0.5);}
		.banner section dt{color:#fff;font-size:22px;line-height:30px;margin-bottom:20px;}
		.banner section dd{color:#fff;font-size:40px;line-height:50px;margin-bottom:60px;}
		.banner section a{display:block;}
		.banner .iconfont{font-size:40px;color:#fff;background:#005bac;padding:5px 0;border-radius:5px;margin:0 100px;}

		.banner .swiper-button-prev{left:0;}
		.banner .swiper-button-next{right:0;}

.title{margin-left:40%;;margin-bottom:60px;}
	.title h2{font-size:24px;line-height:30px;text-transform:uppercase;font-weight:normal;position:relative;margin-bottom:5px;}
	.title h2:before{content:'XH';display:block;position:absolute;top:0;left:-100px;font-size:60px;line-height:60px;color:#333;font-weight:bold;}
	.title h2:after{content:'';display:block;position:absolute;top:30px;left:-130px;width:150px;height:1px;background:linear-gradient(to right,#888 0,#888 40px,transparent 40px,transparent 110px,#888 110px,#888 150px);transform:rotate(135deg);}
	.title h2 span{color:#888;font-family:'宋体';margin-left:10px;border-left:1px solid #999;padding-left:10px;}
	.title p{color:#666;}

.product{padding:100px 0;}
	.productclass{margin-bottom:40px;}
		.productclass ul{text-align:center;}
		.productclass li{display:inline-block;padding:0 3px;}
		.productclass li a{display:block;line-height:40px;padding:0 20px;border:1px solid #333;}
		.productclass li a:hover,.productclass li a.on{background:#1f5fc3;border:1px solid #1f5fc3;color:#fff;}
	.productlist{}
		.productlist ul{margin:0 -1%;margin-bottom:20px;}
		.productlist li{float:left;width:23%;margin:0 1% 20px;position:relative;}
		.productlist li a{display:block;}
		.productlist li section{transition:all ease-out 0.3s;border:1px solid #eee;}
		.productlist li figure{overflow:hidden;}
		.productlist li figure img{width:100%;}
		.productlist li h4{position:absolute;bottom:0;left:0;right:0;line-height:40px;transition:all ease-out 0.3s;background:#f1f1f1;text-align:center;}
		.productlist li:hover section{box-shadow:0 0 20px rgba(0,0,0,0.1);}
		.productlist li:hover figure img{transform:scale3d(1.05, 1.05, 1);}

.slogen{background:url(../images/bgslogen.jpg) no-repeat center center;height:180px;}
	.slogeninfo{text-align:center;font-weight:bold;padding:35px 0;}
		.slogeninfo h2{font-size:24px;line-height:30px;color:#f9ee16;}
		.slogeninfo p{font-size:18px;line-height:30px;color:#fff;margin-bottom:20px;}
		.slogeninfo a{font-size:24px;line-height:30px;color:#fff;}

.brand{padding:60px 0;}
	.brandlist{}
		.brandlist dl{background:#1f5fc3;float:left;width:580px;box-sizing:border-box;padding:30px;color:#fff;}
			.brandlist dt{margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,0.2);padding-bottom:19px;}
				.brandlist dt h3{font-size:24px;line-height:30px;}
				.brandlist dt h3 strong{color:#fff102;}
				.brandlist dt p{text-transform:uppercase;}
			.brandlist dd{}
		.brandlist ul{float:right;width:580px;}
		.brandlist li{float:left;width:180px;margin-right:20px;text-align:center;}		
		.brandlist li:last-child{margin-right:0;}
		.brandlist li section{border:1px solid #eee;height:188px;position:relative;}
		.brandlist li section:after{content:'';display:block;position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border:1px solid #1f5fc3;transition:all ease-out 0.3s;opacity:0;}
		@keyframes name{
			0%, 100% {clip:rect(0 180px 2px 0px);}
			25% {clip:rect(0 180px 190px 178px);}
			50% {clip:rect(188px 180px 190px 0);}
			75% {clip:rect(0 2px 190px 0);}
		}
		.brandlist li section:hover:after{animation:name 1s linear infinite;opacity:1;}
		.brandlist li section figure{padding:25px;}
		.brandlist li section img{}
		.brandlist li section h3{}

.about{padding:60px 0;background:#1f5fc3;background-image:linear-gradient(-45deg,transparent 49%,rgba(255,255,255,0.2) 51%,transparent 0);background-size:3px 3px;background-repeat:repeat;}
.about .title{color:#fff;}
.about .title h2:before{color:#fff;}
.about .title h2 span{color:#fff;}
.about .title p{color:#fff;}
	.aboutinfo{float:left;width:50%;position:relative;-webkit-perspective:800;height:300px;}
		.aboutinfo:after{content:'';display:block;position:absolute;top:0;left:0;height:280px;width:715px;background:#fff;transform:rotateY(30deg);box-shadow:0 5px 30px rgba(0,0,0,0.2);}
		.aboutinfo dl{position:relative;z-index:1;padding:40px;height:200px;}
		.aboutinfo dt{font-size:24px;line-height:30px;margin-bottom:20px;}
		.aboutinfo dd{color:#666;}
		.aboutinfo dd a{display:inline-block;margin-top:20px;}
	.aboutcover{float:right;width:50%;position:relative;-webkit-perspective:800;height:300px;}
		.aboutcover:after{content:'';display:block;position:absolute;top:0;right:0;height:280px;width:715px;background:linear-gradient(to right,#ccc 0,#fff 715px);transform:rotateY(-30deg);box-shadow:0 5px 30px rgba(0,0,0,0.2);}
		.aboutcover figure{position:relative;z-index:1;overflow:hidden;padding:40px;height:200px;-webkit-perspective:800;}
		.aboutcover figure img{height:200px;width:100%;transform:rotateY(-30deg) translateX(-5%);}
	.aboutmore{clear:both;text-align:center;}
		.aboutmore a{display:inline-block;line-height:40px;color:#fff;border-bottom:3px solid #58bbfc;}

.news{padding:80px 0 40px;}
	.newslist ul{margin:0 -1%;}
		.newslist li{float:left;width:31.33%;margin:0 1% 2%;}
		.newslist li section{background:#f3f3f3;padding:30px 30px 30px 120px;position:relative;overflow:hidden;}
		.newslist li section:before{content:'';display:block;position:absolute;top:0;left:0;bottom:0;width:0;background:#1f5fc3;transition:all ease-out 0.3s;}
		.newslist li section:after{content:'→';display:block;position:absolute;bottom:30px;left:120px;opacity:0.7;}
		.newslist li section a{display:block;}
		.newslist li section time{position:absolute;top:30px;left:30px;width:60px;display:block;text-align:right;font-family:sysfont,verdana,sans-serif;transition:all ease-out 0.3s;}
		.newslist li section time strong{display:block;font-size:30px;line-height:40px;}
		.newslist li section time span{}
		.newslist li section dl{position:relative;z-index:1;height:160px;}
		.newslist li section dt{font-size:16px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-bottom:20px;font-weight:bold;transition:all ease-out 0.3s;}
		.newslist li section dd{line-height:30px;height:90px;overflow:hidden;opacity:0.7;}
		.newslist li section i{position:absolute;left:30px;bottom:30px;display:block;width:60px;height:60px;background:url(../images/iconnewslist.png) no-repeat center center;}
		.newslist li:hover section a{color:#fff;}
		.newslist li:hover section:before{width:100%;}
		.newslist li:hover section:after{color:#fff;}
		.newslist li:hover section time{color:#fff;}
		.newslist li:hover section dt{color:#fff;}
}
@media (min-width:768px) and (max-width:1024px){/* TABLET */
.banner{position:relative;}
	.banner figure{overflow:hidden;position:relative;height:400px;}
	.banner img{height:400px;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
	.banner section{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1200px;margin-top:100px;}
		.banner section h3{color:#fff;font-size:50px;line-height:60px;margin-bottom:20px;white-space:nowrap;}
		.banner section p{color:#fff;font-size:22px;white-space:nowrap;margin-bottom:60px;}
		.banner section a{display:block;}

.search{padding:30px;background:#fff;}
	.searchhot{float:left;line-height:40px;}
		.searchhot strong{color:#246ac9;}
		.searchhot a{margin-right:20px;color:#999;}
	.searchform{float:right;}
		.searchform form{position:relative;}
		.searchform input{box-sizing:border-box;}
		.searchform input.txt{background:#f1f1f1;height:40px;padding:0 20px;}
		.searchform input.btn{position:absolute;top:5px;right:5px;width:30px;height:30px;background:url(../images/iconsearch.png) no-repeat center center;}

.title{text-align:center;margin-bottom:40px;}
	.title h2{font-size:36px;line-height:40px;margin-bottom:10px;position:relative;display:inline-block;}
	.title h2:before{content:'';display:block;position:absolute;top:50%;left:-20px;border:1px solid #333;width:10px;height:10px;transform:translateY(-50%) rotate(45deg);}
	.title h2:after{content:'';display:block;position:absolute;top:50%;right:-20px;border:1px solid #333;width:10px;height:10px;transform:translateY(-50%) rotate(45deg);}
	.title h2 span{color:#246ac9;}
	.title p{font-size:16px;font-weight:normal;opacity:0.7;}

.product{padding:30px;background:#f6f6f6;}
	.productmain{}
	.productclass{}
		.productclass dl{display:none;}
		.productclass ul{margin:0 -1%;}
		.productclass li{margin-bottom:10px;float:left;width:23%;margin:0 1% 2%;}
		.productclass li:last-child{margin-bottom:0;}
		.productclass li a{display:block;font-size:15px;line-height:55px;padding:0 20px;position:relative;background:#fff;}
		.productclass li a:before{content:'';display:block;position:absolute;top:50%;right:20px;width:10px;height:10px;border-top:1px solid #ccc;border-right:1px solid #ccc;transform:rotate(45deg) translateY(-50%);transition:all ease-out 0.3s;}
		.productclass li a:hover{padding:0 30px;background:#246ac9;color:#fff;}
		.productclass li a:hover:before{right:30px;border-top:1px solid #fff;border-right:1px solid #fff;}
	.productlist{}
		.productlist ul{margin:0 -1%;}
		.productlist li{float:left;width:23%;margin:0 1% 20px;}
		.productlist li a{display:block;border:1px solid #eee;}
		.productlist li figure{overflow:hidden;}
		.productlist li figure img{width:100%;}
		.productlist li section{overflow:hidden;background:#fff;position:relative;padding-right:60px;transition:all ease-out 0.3s;}
		.productlist li section a{position:absolute;top:0;left:0;bottom:0;right:0;text-indent:-999em;}
		.productlist li section h3{font-size:13px;line-height:40px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;padding-left:20px;}
		.productlist li section i{position:absolute;top:0;right:0;display:block;width:40px;height:40px;box-sizing:border-box;padding:5px;}
		.productlist li section i svg{font-size:30px;line-height:30px;color:#999;}
		.productlist li a:hover figure img{transform:scale3d(1.05, 1.05, 1);}
		.productlist li a:hover section{background:#246ac9;color:#fff;}
		.productlist li a:hover i svg{color:#fff;}

.advan{padding:30px;background:#fff;}
	.advanlist{}
		.advanlist ul{overflow:hidden;}
		.advanlist li{float:left;width:50%;}
		.advanlist section{overflow:hidden;height:220px;}
		.advanlist figure{width:50%;overflow:hidden;height:220px;position:relative;}
		.advanlist li:nth-of-type(1) figure,.advanlist li:nth-of-type(2) figure{float:left;}
		.advanlist li:nth-of-type(3) figure,.advanlist li:nth-of-type(4) figure{float:right;}
		.advanlist figure img{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:220px;}
		.advanlist dl{float:right;width:50%;text-align:center;background:rgba(0,0,0,0.5);padding:20px;height:220px;box-sizing:border-box;}
		.advanlist dl{color:#fff;}
		.advanlist dt{position:relative;font-size:22px;line-height:30px;margin-bottom:20px;padding-bottom:10px;}
		.advanlist dt:after{content:'';display:block;position:absolute;bottom:0;left:50%;transform:translateX(-50%);background:#fff;width:30px;height:2px;}
		.advanlist dd{opacity:0.6;}

.about{padding:100px 5%;background:url(../images/bgabout.jpg) no-repeat center center;background-attachment:fixed;background-size:cover;position:relative;}

.about .w{position:relative;z-index:2;}
	.about .title{color:#fff;}
	.aboutnav{}
		.aboutnav ul{overflow:hidden;margin:0 -1%;}
		.aboutnav li{float:left;width:48%;margin:0 1% 2%;text-align:center;}
		.aboutnav li a{display:block;color:#fff;padding:30px;border-radius:10px;}
		.aboutnav li a:hover{background:rgba(11,68,134,0.7);color:#fff;transform:translateY(5px);}
		.aboutnav li figure{}
		.aboutnav li figure img{width:100px;}
		.aboutnav li dl{}
		.aboutnav li dt{font-size:18px;position:relative;margin-bottom:40px;}
		.aboutnav li dt:after{content:'';display:block;position:absolute;top:40px;left:50%;transform:translateX(-50%);width:30px;height:1px;background:#fff;opacity:0.5;}
		.aboutnav li dd{height:60px;overflow:hidden;opacity:0.7;}
		.aboutnav li span{opacity:0.6;text-transform:uppercase;font-size:12px;}

.case{padding:30px;background:#f6f6f6;}
	.caselist{}
		.caselist ul{margin:0 -1%;}
		.caselist li{float:left;width:23%;margin:0 1% 2%;}
		.caselist li:nth-of-type(1){width:48%;}
			.caselist li a{display:block;position:relative;}
			.caselist li a p{position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.5);padding:0 10px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;color:#fff;}
			.caselist li div{background:#ddd;position:relative;transition:all ease-out 0.3s;}
				.caselist li div span{height:50px;font-size:14px;line-height:50px;display:block;white-space:nowrap;padding:0 15px;}
				.caselist li div svg{position:absolute;top:15px;right:5px;display:block;width:20px;height:20px;font-size:20px;}
			.caselist li figure{overflow:hidden;}
			.caselist li figure img{width:100%;}
			.caselist li:hover img{transform:scale3d(1.05, 1.05, 1);}
			.caselist li:hover div{background:#246ac9;color:#fff;}

.slogen{padding:40px 0;color:#fff;background:#246ac9 url(../images/bgslogen.jpg) no-repeat center center;}
	.slogeninfo{text-align:center;}
		.slogeninfo h2{font-size:24px;line-height:30px;}
		.slogeninfo h2 span{color:#f60;}
		.slogeninfo p span{font-size:16px;line-height:30px;margin-top:10px;position:relative;display:inline-block;}
		.slogeninfo p span:before{content:'';display:block;position:absolute;top:50%;left:0;width:60px;height:1px;background:#fff;margin-left:-70px;}
		.slogeninfo p span:after{content:'';display:block;position:absolute;top:50%;right:0;width:60px;height:1px;background:#fff;margin-right:-70px;}
		.slogeninfo p strong{display:inline-block;font-size:17px;line-height:40px;margin-top:30px;}
		.slogeninfo p strong a{display:inline-block;background:#fff;padding:0 20px;border-radius:20px;color:#246ac9;margin:0 10px;}
		.slogeninfo p strong a:hover{background:#f60;color:#fff;}

.news{padding:30px;background:#f6f6f6;}
	.newsmain{}
		.newstopic{}
			.newstopic section{position:relative;margin-bottom:20px;}
			.newstopic section a{display:block;overflow:hidden;margin:0 -1%;position:relative;}
				.newstopic section figure{overflow:hidden;float:left;width:48%;position:relative;margin:0 1%;}
				.newstopic section figure img{width:100%;}
			.newstopic section time{position:absolute;z-index:1;bottom:20px;right:20px;display:block;width:80px;text-align:center;transition:all ease-out 0.3s;color:#246ac9;}
			.newstopic section strong{display:block;font-family:'ResourceHanRounded';font-size:36px;line-height:40px;}
			.newstopic section span{font-size:12px;}
			.newstopic section dl{float:right;width:48%;margin:0 1%;background:#fff;padding:20px;line-height:25px;box-sizing:border-box;}
			.newstopic section dt{margin-bottom:5px;font-size:16px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
			.newstopic section dd{color:#999;}
	.newslist ul{margin:0 -1%;}
		.newslist li{float:left;width:48%;margin:0 1% 2%;}
		.newslist li a{display:block;padding:15px;background:#fff;position:relative;}
		.newslist li a:after{content:'>';display:block;position:absolute;bottom:0;right:0;width:0;top:0;background:#eee;color:#fff;text-align:center;transition:all ease-out 0.3s;font-size:0px;line-height:130px;}
		.newslist li dl{}
		.newslist li dt{font-size:16px;margin-bottom:10px;transition:all ease-out 0.3s;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;}
		.newslist li dd{font-size:13px;color:#999;height:40px;overflow:hidden;margin-bottom:10px;}
		.newslist li time{display:block;font-size:12px;color:#999;}
		.newslist li span{display:block;}
		.newslist li a:hover{padding:15px 40px 15px 20px;background:#fff;box-shadow:0 0 10px rgba(0,0,0,0.1);}
		.newslist li a:hover:after{background:#f60;color:#fff;width:20px;font-size:20px;}
	.newsmore{text-align:center;margin-top:20px;}
		.newsmore a{display:inline-block;line-height:40px;background:#246ac9;color:#fff;padding:0 80px;}
		.newsmore a:hover{background:#f60;padding:0 90px;}
}
@media (max-width:767px){/* MOBILE */
.banner{position:relative;}
	.banner figure{overflow:hidden;position:relative;height:240px;background:#000;}
	.banner img{position:absolute;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:240px;}
		.banner .iconfont{font-size:20px;color:#fff;background:#005bac;padding:5px 0;border-radius:5px;}
		.banner .swiper-button-prev{left:10px;}
		.banner .swiper-button-next{right:10px;}

.title{margin-bottom:20px;text-align:center;}
	.title h2{font-size:14px;text-transform:uppercase;position:relative;margin-bottom:5px;}
	.title h2 span{color:#888;font-family:'宋体';margin-left:10px;border-left:1px solid #999;padding-left:10px;}
	.title p{color:#666;}

.product{padding:30px 20px;}
	.productclass{margin-bottom:20px;}
		.productclass ul{text-align:center;}
		.productclass li{display:inline-block;padding:0 3px;margin-bottom:10px;}
		.productclass li a{display:block;line-height:30px;padding:0 20px;border:1px solid #333;}
		.productclass li a:hover,.productclass li a.on{background:#1f5fc3;border:1px solid #1f5fc3;color:#fff;}
	.productlist{}
		.productlist ul{margin:0 -1%;}
		.productlist li{float:left;width:48%;margin:0 1% 10px;position:relative;}
		.productlist li a{display:block;}
		.productlist li section{transition:all ease-out 0.3s;border:1px solid #eee;}
		.productlist li figure{overflow:hidden;}
		.productlist li figure img{width:100%;}
		.productlist li h4{line-height:40px;transition:all ease-out 0.3s;background:#f1f1f1;text-align:center;}
		.productlist li:hover section{box-shadow:0 0 20px rgba(0,0,0,0.1);}
		.productlist li:hover figure img{transform:scale3d(1.05, 1.05, 1);}

.slogen{background:url(../images/bgslogen.jpg) no-repeat center center;height:180px;}
	.slogeninfo{text-align:center;font-weight:bold;padding:35px 20px;}
		.slogeninfo h2{font-size:15px;color:#f9ee16;}
		.slogeninfo p{font-size:12px;color:#fff;margin-bottom:20px;}
		.slogeninfo a{font-size:16px;color:#fff;}

.brand{padding:30px 20px;}
	.brandlist{}
		.brandlist dl{background:#1f5fc3;box-sizing:border-box;padding:20px;color:#fff;margin-bottom:20px;}
			.brandlist dt{margin-bottom:20px;border-bottom:1px solid rgba(255,255,255,0.2);padding-bottom:19px;}
				.brandlist dt h3{font-size:17px;line-height:30px;}
				.brandlist dt h3 strong{color:#fff102;}
				.brandlist dt p{text-transform:uppercase;}
			.brandlist dd{}
		.brandlist ul{margin:0 -1%;}
		.brandlist li{float:left;width:31.33%;margin:0 1%;text-align:center;}
		.brandlist li section{border:1px solid #eee;position:relative;}
		.brandlist li section:after{content:'';display:block;position:absolute;top:-1px;left:-1px;right:-1px;bottom:-1px;border:1px solid #1f5fc3;transition:all ease-out 0.3s;opacity:0;}
		@keyframes name{
			0%, 100% {clip:rect(0 180px 2px 0px);}
			25% {clip:rect(0 180px 190px 178px);}
			50% {clip:rect(188px 180px 190px 0);}
			75% {clip:rect(0 2px 190px 0);}
		}
		.brandlist li section:hover:after{animation:name 1s linear infinite;opacity:1;}
		.brandlist li section figure{padding:25px 25px 5px;}
		.brandlist li section img{width:100%;}
		.brandlist li section h3{padding-bottom:25px;}

.about{padding:30px 20px;background:#1f5fc3;background-image:linear-gradient(-45deg,transparent 49%,rgba(255,255,255,0.2) 51%,transparent 0);background-size:3px 3px;background-repeat:repeat;}
.about .title{color:#fff;}
.about .title h2:before{color:#fff;}
.about .title h2 span{color:#fff;}
.about .title p{color:#fff;}
	.aboutinfo{position:relative;}
		.aboutinfo dl{position:relative;z-index:1;padding:20px;background-color:#fff;}
		.aboutinfo dt{font-size:17px;line-height:25px;margin-bottom:10px;}
		.aboutinfo dd{color:#666;}
		.aboutinfo dd a{display:inline-block;margin-top:20px;}
	.aboutcover{background-color:#fff;}
		.aboutcover figure{overflow:hidden;padding:20px;}
		.aboutcover figure img{width:100%;}
	.aboutmore{clear:both;text-align:center;}
		.aboutmore a{display:inline-block;line-height:40px;color:#fff;border-bottom:3px solid #58bbfc;}

.news{padding:30px 20px;}
	.newslist ul{margin:0 -1%;}
		.newslist li{float:left;width:48%;margin:0 1% 2%;}
		.newslist li section{background:#f3f3f3;padding:20px;}
		.newslist li section:before{content:'';display:block;position:absolute;top:0;left:0;bottom:0;width:0;background:#1f5fc3;transition:all ease-out 0.3s;}
		.newslist li section:after{content:'→';display:block;position:absolute;bottom:30px;left:120px;opacity:0.7;}
		.newslist li section a{display:block;}
		.newslist li section time{}
		.newslist li section dl{position:relative;z-index:1;height:110px;}
		.newslist li section dt{font-size:14px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;margin-bottom:10px;font-weight:bold;transition:all ease-out 0.3s;}
		.newslist li section dd{height:80px;overflow:hidden;opacity:0.7;}
		.newslist li section i{position:absolute;left:30px;bottom:30px;display:block;width:60px;height:60px;background:url(../images/iconnewslist.png) no-repeat center center;}
		.newslist li:hover section a{color:#fff;}
		.newslist li:hover section:before{width:100%;}
		.newslist li:hover section:after{color:#fff;}
		.newslist li:hover section time{color:#fff;}
		.newslist li:hover section dt{color:#fff;}
}