@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{
    display: block;
	width: 100%;
	max-width: 1920px;
    margin: 0 auto;
    font-family:'Microsoft YaHei';color:#333;line-height:1.8;font-size:16px;}
a{color:#333;}a:hover{color:#0062b4;} /* link-visited-hover-active */


.w{display:flex;justify-content:space-between;box-sizing:border-box;width:100%;max-width: 1440px;margin:0 auto;}
.reverse{flex-direction:row-reverse;}
.column{flex-direction:column;}
header{}
	.top{display:flex;justify-content:space-between;background:#f6f6f6;font-size:12px;line-height:40px;padding:0 20px;color:#999;}
		.topwelcome{}
			.topwelcome i{float:left;font-size:20px;}
			.topwelcome span{color:#0062b4;}
		.toplink{}
			.toplink a{color:#999;border-left:1px solid #ccc; /*text-transform:uppercase;*/padding-left:15px;margin-left:15px;}
			.toplink a:nth-of-type(1){border-left:none;}
	.head{position:relative;display:flex;justify-content:space-between;}
		.headlogo{}
			.headlogo a{display:block;padding:20px 0;}
			.headlogo img{height:60px;}
		.headnav{}
			nav{}
				nav>ul{padding-top:45px;}
				nav>ul>li{float:left;position:relative;padding:0 20px;}
				nav>ul>li>a{position:relative;z-index:1;display:block;line-height:55px;text-transform:uppercase;font-size:17px;}
				nav>ul>li>a:after{content:'';position:absolute;top:0;left:0;width:0;height:2px;background:#9dc419;transition:all 0.3s ease-out 0s;}
				nav>ul>li.on>a:after{width:20px;}
				nav li a.on{}
				nav li ul{display:none;position:absolute;z-index:9;top:55px;left:0;width:200px;background:rgba(255,255,255,1);}
				nav li li{}
				nav li li a{display:block;line-height:40px;font-size: 15px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;position:relative;font-weight:normal;padding:0 20px;text-transform:capitalize;}
				nav li li a:before{content:'';display:block;position:absolute;bottom:0;left:0;right:0;background:rgba(0,0,0,0.05);height:1px;}
				nav li li a:after{content:'';display:block;position:absolute;top:50%;right:20px;width:10px;height:10px;border-top:1px solid #333;border-right:1px solid #333;transform:translateY(-50%) rotate(45deg);transition:all ease-out 0.3s;left:auto;background:transparent;}
				nav li li a:hover{padding:0 30px;background:#0062b4;color:#fff;}
				nav li li a:hover:after{right:30px;border-top:1px solid #fff;border-right:1px solid #fff;}
		.headtel{clear:both;padding:26px 0;}
			.headtel i{float:left;display:block;width:40px;height:40px;font-size:30px;line-height:40px;border-radius:40px;background:#0062b4;color:#fff;text-align:center;}
			.headtel dl{float:left;margin-left:10px;}
			.headtel dt{color:#999; font-size: 14px; line-height: 1.1;}
			.headtel dd{font-size:18px;font-weight:bold;color:#0062b4;}

footer{background:#fff;border-top:1px solid #eee;}
	.foot{overflow:hidden;padding:30px 0;line-height:30px;}
		.footnav{position:relative;padding:0 0 0 4%;}
			.footnav:before{content:'';display:block;position:absolute;top:0;left:0;width:1px;height:180px;background-image:linear-gradient(180deg,#ddd 20px,#eee 20px,#eee 180px);}
			.footnav>ul{}
			.footnav>ul>li{float:left;margin-right:60px;}
			.footnav>ul>li:last-child{margin-right:0;}
			.footnav>ul>li>a{display:block;margin:0 0 20px;font-weight:bold;font-size:16px;}
			.footnav>ul>li>a:hover{}
			.footnav>ul>li li a{opacity:0.8;font-size:14px;}
		.footcontact{position:relative;padding:0 4%;}
			.footcontact:before{content:'';display:block;position:absolute;top:0;left:0;width:1px;height:180px;background-image:linear-gradient(180deg,#ddd 20px,#eee 20px,#eee 180px);}
			.footcontact h3{font-weight:bold;font-size:16px;margin:0 0 20px;}
			.footcontact span{display:block;color:#0062b4;}
				.footcontact span i{float:left;font-size:30px;}
				.footcontact span em{font-weight:normal;font-size:24px;}
			.footcontact section{opacity:0.8;}
            .footcontact section p{font-size: 14px;}
		.footcode{position:relative;padding:0 0 0 4%;}
			.footcode:before{content:'';display:block;position:absolute;top:0;left:0;width:1px;height:180px;background-image:linear-gradient(180deg,#ddd 20px,#eee 20px,#eee 180px);}
			.footcode h3{font-weight:bold;font-size:16px;margin:0 0 20px;}
			.footcode figure{}
			.footcode img{width:120px;}
			.footcode figcaption{margin-top:10px;}
	.copy{text-align:center;padding:20px 0;border-top:1px solid #eee;}
		.copyinfo, .copyinfo a, .copysupport, .copysupport a{ font-size: 13px; color: #777;}
        .copyinfo a:hover, .copysupport a:hover{  color: #444;}
		.copyinfo a{ padding-left:15px;}

.join{position:fixed;z-index:8;bottom:0;left:0;right:0;padding:40px 0;background:url(../images/bgjoin.jpg) no-repeat center center;transition:all 0.3s ease-out 0s;}
.join.switch{bottom:-190px;}
.joinbtn{position:absolute;top:-60px;right:0;display:block;width:40px;padding:19px 10px 5px;text-align:center;font-size:15px;line-height:18px;background:#c00;color:#fff;cursor:pointer;animation:sidebarchatmc 3s infinite ease-in-out;-moz-animation:sidebarchatmc 3s infinite ease-in-out;-webkit-animation:sidebarchatmc 3s infinite ease-in-out;-o-animation:sidebarchatmc 3s infinite ease-in-out;}
	@keyframes sidebarchatmc{
	0%{background:#c00;}
	50%{background:#ea6704;}
	100%{background:#c00;}
	}
	.joinbtn:before{content:'';display:block;position:absolute;top:6px;left:50%;border-bottom:2px solid #fff;border-right:2px solid #fff;transform:rotate(45deg) translateX(-50%);width:10px;height:10px;}
	.joininfo{}
		.joininfo span{text-transform:uppercase;display:block;font-size:24px;line-height:30px;opacity:0.5;}
		.joininfo h2{font-size:36px;line-height:40px;margin-bottom:20px;color:#c00;}
		.joininfo p{opacity:0.6;}
	.jointool{}
		.jointool p{overflow:hidden;line-height:50px;margin-bottom:10px;}
			.jointool p i{float:left;font-size:40px;margin-right:20px;display:block;width:50px;height:50px;border:2px solid #ea6704;border-radius:50px;text-align:center;color:#ea6704;}
			.jointool p span{font-size:36px;font-weight:bold;color:#ea6704;}
		.jointool ul{margin:0 -1%;}
		.jointool li{float:left;width:48%;margin:0 1%;}
		.jointool li a{display:block;line-height:40px;text-align:center;position:relative;}
		.jointool li a:before{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;background:#ea6704;transform:skewX(-11deg);transition:all 0.3s ease-out 0s;}
		.jointool li a span{position:relative;z-index:1;color:#fff;}
		.jointool li a:hover:before{background:#c00;}
		.jointool li a:hover span{}

@media (min-width:1441px){/* DESKTOPS */

}
@media (min-width:1025px) and (max-width:1440px){/* LAPTOPS */

}
@media (min-width:768px) and (max-width:1024px){/* TABLET */

}
@media (max-width:767px){/* MOBILE */

			nav{}
				nav>span{position:absolute;z-index:99;top:10px;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:#0062b4;text-align:center;}
				nav>span i{display:block;content:'';width:100%;height:2px;background:#0062b4;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;padding-top: 0;z-index:3;right:-300px;bottom:0;top:61px;width:300px;background:rgba(255,255,255,1);box-shadow:0 30px 30px rgba(0,0,0,0.1);transition:all ease-out 0.3s;}
				nav ul.on{right:0;}
				nav ul li{position:relative;width: 100%;
                    box-sizing: border-box;
                    padding: 0;}
				nav ul li i{position:absolute;z-index:11;top:1px;right:1px;width:40px;height:40px;background:rgba(0,0,0,0.1);text-align:center;line-height:40px;font-style:normal;}			
				
				nav>ul>li>a{display:block;line-height:42px;font-size:16px;padding:0 20px;border-bottom:1px solid rgba(0,0,0,0.1);}
                nav>ul>li.on>a {border-bottom: 1px dashed rgba(0,0,0,0.1);}
				nav li a span{display:none;}
				nav li a:hover{background:#fff;color:#333;}
				nav li ul{display:none;position:static;overflow:hidden;box-shadow:none;background:none;}
				nav li ul.on{display:block;    width: 100%;border-bottom: 1px solid rgba(0,0,0,0.1);
                    margin: 0;
                    padding: 0;}
				nav li li{float:left;width:50%;}
				nav li li a{text-overflow:ellipsis;white-space:nowrap;overflow:hidden;    color: #666;
                    font-size: 14px;}
                nav li li a:after {opacity: 0.5;}

}