@import url("global.css");
@import url("iconfont.css"); /* unicode iconfont & class iconfont */
@import url('animate.css');
@import url('swiper.css');
@import url('lightgallery.css');

::selection{background:#182fa3;color:#fff;}
body{font-family:'Microsoft YaHei';color:#333;line-height:20px;}
a{color:#333;}a:hover{color:#18316a;} /* link-visited-hover-active */

@media (min-width:1025px){/* DESKTOPS */
body{font-size:14px;}
.w{display:flex;justify-content:space-between;width:1200px;margin:0 auto;}
.reverse{flex-direction:row-reverse;}
.column{flex-direction:column;}

header{position:relative;z-index:9;box-shadow:0 20px 20px rgba(0,0,0,0.1);display:flex;justify-content:space-between;max-width:1920px;margin:0 auto;box-sizing:border-box;}
.logo{padding:20px;display:flex;}
.logo a{margin:0 20px 0 0;}
.logo figure{}
.logo figure img{height:60px;}
.logo div{}
	.logo div p:nth-of-type(1){font-size:22px;line-height:30px;margin:0 0 6px;letter-spacing:0.5px;}
	.logo div p:nth-of-type(2){display:inline-block;border:1px solid #0878f8;color:#0878f8;line-height:22px;padding:0 5px;border-radius:5px;}
        
		.nav{}
			nav{}
				nav>ul{}
				nav>ul>li{float:left;position:relative;}
				nav>ul>li:after{content:'';display:block;position:absolute;top:75px;left:50%;transform:translateX(-50%);width:0;background:#fff;height:2px;border-radius:5px;transition:all 0.6s ease-out 0s;}
				nav>ul>li:before{content:'';display:block;position:absolute;top:-110px;left:0;right:0;background-image:linear-gradient(180deg,#0878f8 70%,#479af8 100%);height:110px;border-radius:0 0 10px 10px;transition:all 0.3s ease-out 0s;}
				nav>ul>li>a{position:relative;z-index:1;display:block;padding:0 30px;font-size:17px;line-height:100px;}
				nav>ul>li>a:after{content:'';display:block;position:absolute;top:75px;left:50%;transform:translateX(-50%);width:0;background:#fff;height:2px;border-radius:5px;transition:all 0.6s ease-out 0s;}
				nav>ul>li>a:before{content:'';display:block;position:absolute;top:-110px;left:0;right:0;background-image:linear-gradient(180deg,#0878f8 70%,#479af8 100%);height:110px;border-radius:0 0 10px 10px;transition:all 0.3s ease-out 0s;}
				nav>ul>li:hover>a,nav li a:hover{color:#fff;}
				nav>ul>li:hover:after{width:20%;}
				nav>ul>li:hover:before{top:0;}
				nav>ul>li a.on span{position:relative;color:#fff;}
				nav>ul>li a.on:after{width:20%;}
				nav>ul>li a.on:before{top:0;}
		.headlink{}
			.phone{padding:20px;display:flex;}
				.phone i{float:left;margin-right:5px;font-size:40px;line-height:60px;color:#0878f8;}
				.phone div{padding:10px 0;}
					.phone div span{display:block;font-size:17px;font-weight:bold;}

footer{}
	.foo{background:#f2f2f2;}
		.foocon{}
			.foocon .w{border-bottom:1px solid #ddd;padding:60px 0;}
			.footconinf{flex:0 0 900px;min-width:0;color:#333;}
				.footconinf h3{font-size:24px;line-height:30px;margin:0 0 40px;}
				.footconinf h3 span{font-size:16px;color:#999;font-weight:normal;margin:0 0 0 5px;}
				.footconinf ul{display:flex;justify-content:space-between;}
				.footconinf li{position:relative;padding:0 0 0 60px;}
				.footconinf li i{position:absolute;top:50%;left:0;transform:translateY(-50%);width:45px;height:45px;font-size:30px;text-align:center;line-height:45px;background:#fff;border-radius:45px;}
				.footconinf li div{font-size:20px;}
				.footconinf li div span{display:block;font-size:15px;color:#999;}
				.footconinf li div b{font-weight:normal;line-height:25px;}
				.footconinf li:nth-of-type(2) div b{font-size:16px;font-weight:bold;}
				.footconinf li div p{line-height:22px;}
			.fooconimg{flex:0 0 244px;min-width:0;}
				.fooconimg h3{position:relative;display:block;width:108px;height:108px;text-align:center;float:left;border:5px solid #000;color:#333;}
					.fooconimg h3:before{content:'';display:block;position:absolute;top:50%;transform:translateY(-50%);left:-5px;right:-5px;height:50px;background:#f2f2f2;}
					.fooconimg h3 strong{position:relative;display:block;font-size:18px;margin:40px 0 0;}
					.fooconimg h3 span{position:relative;font-size:14px;font-weight:normal;}
				.fooconimg figure{float:right;}
					.fooconimg figure img{width:117px;}
		.foonav{}
			.foonav .w{padding:60px 0;}
			.foonav dl{}
			.foonav dt{font-size:18px;line-height:30px;font-weight:bold;position:relative;margin:0 0 20px;padding:0 40px 0 0;}
			.foonav dt:before{content:'';display:block;width:10px;height:10px;position:absolute;top:8px;right:0;border-bottom:2px solid rgba(0,0,0,0.2);border-right:2px solid rgba(0,0,0,0.2);transform:rotate(45deg);}
			.foonav dd{line-height:30px;}
			.foonav dd span{display:block;white-space:nowrap;}
			.foonav dd span a{opacity:0.5;}
	.cop{background:#0878f8;line-height:30px;padding:20px 0;color:#fff;text-align:center;}
		.cop a{color:#fff;}
		.copinf{opacity:0.6;}
			.copinf span{display:inline-block;margin:0 20px 0 0;}
			.copinf a{display:inline-block;margin:0 20px 0 0;}
}
@media (max-width:1024px){/* MOBILE */
body{font-size:12px;padding:70px 0 0;}
header{position:fixed;z-index:9;top:0;left:0;right:0;box-shadow:0 20px 20px rgba(0,0,0,0.1);display:flex;justify-content:space-between;box-sizing:border-box;background:#fff;}
.logo{padding:20px;display:flex;}
.logo a{margin:0 20px 0 0;}
.logo figure{}
.logo figure img{height:30px;}
.logo div{display:none;}
	.logo div p:nth-of-type(1){font-size:22px;line-height:30px;margin:0 0 6px;letter-spacing:0.5px;}
	.logo div p:nth-of-type(2){display:inline-block;border:1px solid #0878f8;color:#0878f8;line-height:22px;padding:0 5px;border-radius:5px;}

	.nav{}
		nav{}
			nav>span{position:absolute;z-index:99;top:15px;right:5px;display:block;width:60px;padding:5px 15px;box-sizing:border-box;}
			nav>span:after{content:'';clear:both;position:absolute;top:35px;right:0;width:60px;text-align:center;color:#18316a;text-align:center;}
			nav>span i{display:block;content:'';width:100%;height:2px;background:#18316a;margin:6px 0;transition:all 0.3s ease-out 0.1s;}
			nav>span.on i:nth-of-type(1){transform:translateY(8.5px) rotate(45deg);}
			nav>span.on i:nth-of-type(2){opacity: 0;}
			nav>span.on i:nth-of-type(3){transform:translateY(-8.5px) rotate(-45deg);}
			nav ul{position:fixed;z-index:3;right:-300px;bottom:0;top:70px;background:rgba(255,255,255,1);box-shadow:0 30px 30px rgba(0,0,0,0.1);transition:all ease-out 0.3s;display:block;width:300px;}
			nav ul.on{right:0;}
			nav ul li{position:relative;}
			nav ul li i{position:absolute;z-index:1;top:0;right:0;width:40px;height:40px;background:rgba(0,0,0,0.1);text-align:center;line-height:40px;font-style:normal;}			
			
			nav li a{display:block;line-height:40px;font-size:14px;padding:0 20px;border-bottom:1px solid rgba(0,0,0,0.1);background:#fff;}
			nav li a span{}
			nav li a:hover{background:#18316a;color:#fff;}
	.headlink{display:none;}

footer{}
	.foo{background:#f2f2f2;padding:40px 20px;}
		.foocon{}
			.foocon .w{border-bottom:1px solid #ddd;}
			.footconinf{flex:0 0 900px;min-width:0;color:#333;}
				.footconinf h3{font-size:16px;margin:0 0 20px;}
				.footconinf h3 span{font-size:14px;color:#999;font-weight:normal;margin:0 0 0 5px;}
				.footconinf ul{}
				.footconinf li{position:relative;padding:0 0 0 60px;margin:0 0 10px;}
				.footconinf li i{position:absolute;top:50%;left:0;transform:translateY(-50%);width:45px;height:45px;font-size:30px;text-align:center;line-height:45px;background:#fff;border-radius:45px;}
				.footconinf li div{font-size:15px;}
				.footconinf li div span{display:block;font-size:12px;color:#999;}
				.footconinf li div b{font-weight:normal;}
				.footconinf li:nth-of-type(2) div b{}
				.footconinf li div p{line-height:22px;}
			.fooconimg{display:none;}
				.fooconimg h3{position:relative;display:block;width:108px;height:108px;text-align:center;float:left;border:5px solid #000;color:#333;}
					.fooconimg h3:before{content:'';display:block;position:absolute;top:50%;transform:translateY(-50%);left:-5px;right:-5px;height:50px;background:#f2f2f2;}
					.fooconimg h3 strong{position:relative;display:block;font-size:18px;margin:40px 0 0;}
					.fooconimg h3 span{position:relative;font-size:14px;font-weight:normal;}
				.fooconimg figure{float:right;}
					.fooconimg figure img{width:117px;}
		.foonav{}
			.foonav .w{padding:20px 0 0;}
			.foonav dl{margin:0 0 10px;}
			.foonav dt{font-size:14px;position:relative;margin:0 0 5px;padding:0 40px 0 0;}
			.foonav dt:before{content:'';display:block;width:10px;height:10px;position:absolute;top:8px;right:0;border-bottom:2px solid rgba(0,0,0,0.2);border-right:2px solid rgba(0,0,0,0.2);transform:rotate(45deg);}
			.foonav dd{}
			.foonav dd span{white-space:nowrap;margin:0 10px 0 0;}
			.foonav dd span a{opacity:0.5;}
	.cop{background:#0878f8;padding:20px 0;color:#fff;text-align:center;margin:0 0 60px;}
		.cop a{color:#fff;}
		.copinf{opacity:0.6;}
			.copinf span{display:inline-block;margin:0 20px 0 0;}
			.copinf a{display:inline-block;margin:0 20px 0 0;}
}
