@charset "utf-8";
body, html { font-family: "Microsoft YaHei"; height: 100%; overflow: hidden; }
* { touch-action: pan-y; } 
.warp { 
	position: relative; 
	max-width: 1920px;
	 min-width: 1200px; 
	 height: 100%; 
	 height:100%; 
	 max-height: 1080px;
	  overflow: hidden; 
	  margin: 0 auto;
	 }
	 /* phone */
@media screen and (max-width: 420px) and (min-width:300px){
	.warp { 
		position: relative;  
		width: 100%; 
		height:100%;  
		overflow: hidden; 
		margin: 0 auto;
		max-width: 420px;
		min-width:300px; 
		 /* max-height: 1078px; */
	} 
}
 
.nav { 
	width: 70px; 
	height: 210px; 
	position: fixed;
	 top: 50%; 
	 right: 80px; 
	 margin-top: -105px; 
	 z-index: 15; 
	}
.nav a { 
	width: 70px; 
	height: 26px; 
	text-align: center;
	line-height: 26px;
	color: #8c8070; 
	font-size: 14px;
	display: block;
	margin-top: 44px;
	position: relative;
	}
.nav a:after { 
	content: ''; 
	width: 0;
	height: 5px; 
	background: url(../images/nav-line.png) no-repeat; 
	position: absolute; 
	top: 50%; left: 50%; 
	transition: all .5s; 
	transform: translate(-50%, -50%); 
}
.nav a:hover:after, .nav a.active:after{ 
	width: 70px; 
}  

.swiper-container, .swiper-slide { 
	width: 100%; 
	height: 100%; 
	position: relative; 
	overflow: hidden; 
}
.bg { 
	
	background: url(../images/bg.jpg~v=20190117.jpg) 50% 50% no-repeat; 
	width: 100%;
	height: 100% 
}
.bg2 { 
	
	background: url(../images/bg2.jpg~v=20190129.jpg) 50% 50% no-repeat; 
	background-size: cover; 
}
.bg3 { 
	
	background: url(../images/bg3.jpg~v=20190117.jpg) 50% 50% no-repeat; 
	background-size: cover; 
} 

.height {
	 height: 170px; 
	}
.center { 
	width: 1200px; height: 780px; top: 50%; left: 50%; margin: -390px 0 0 -600px; }
.img { 
	background: url(../images/img.png~v=20190118.png) no-repeat; }
.logo { 
	height: 116px; 
	width: 116px; 
	background: url(../images/logo.png) no-repeat 0 0; 
	position: fixed; 
	top: 90px; left: 85px; 
	z-index: 15; 
}
.logo p { 
	width: 166px; 
	font-size: 14px; 
	color: #000000; 
	position: absolute; 
	bottom: -60px; 
	left: 50%; 
	margin-left: -83px; 
	text-align: center; 
	line-height: 23px; 
}
.logo p span { font-size: 18px; }
.slogan { 
	height: 398px;
    width: 1009px;
    background: url(../images/slogan.png) no-repeat;
    left: 50%;
    top: -30px;
    margin-left:-686px;  
}
.btn { 
	width: 350px;
    height: 182px;
    text-align: center;
    margin: auto 250px;
    top: 360px;
    position: relative;
}
.btn a { 
	width: 184px; 
	height: 71px; 
	display: block; 
	float: left; 
	vertical-align: middle; 
	text-indent: -999em; 
	transition: all .5s; 
	opacity: 1; 
}
.btn a img{
	width: 184px; 
	height: 71px; 
	display: block; 
	float: right; 
	vertical-align: middle; 
	text-indent: -999em; 
	transition: all .5s; 
	opacity: 1; 
}
.btn-ios { 
	background: url(../images/btn-ios.png) no-repeat; 
}
.btn-and { 
	background: url(../images/btn-and.png) no-repeat; 
}
.btn a:hover { opacity: .7; }
.download-er { 
	float: left; 
	width: 163px; 
	height: 182px; 
	margin-top: -14px; 
}
.download-er img { 
	display: block; 
	width: 100%; 
	height: 100%; 
}

.page2-title { 
	height: 170px; 
	width: 910px; 
	background-position: 0 0; 
	top: 0; left: 50%; 
	margin-left: -460px; 
}
.page3-title { 
	height: 170px; 
	width: 910px; 
	background-position: 0 -198px; 
	top: 0; 
	left: 50%; 
	margin-left: -460px; 
}
.icon-arrow { 
	height: 100px; 
	width: 120px; 
	background-position: -910px -93px; 
	position: fixed; 
	bottom: 10px; 
	left: 50%; 
	margin-left: -60px; 
	z-index: 11; 
	animation: arrow 1s infinite; 
}
@keyframes arrow {  0%, 100% {
 transform: translateY(0px);
 opacity: 0;
}
 50% {
 transform: translateY(12px);
 opacity: 1;
}
}
.icon-share { width: 120px; height: 30px; position: fixed; bottom: 150px; left: 50px; z-index: 15; }
.icon-share a { width: 30px; height: 30px; background: #8c8070; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 10px; font-size: 0; }
.icon-share a:last-child { margin-right: 0; }
.icon-share a:hover { background: #765e3c; }
.icon-share a i { width: 30px; height: 30px; display: block; }
.icon-lt { background-position: -916px -11px; }
.icon-lt:hover { background-position: -916px -47px; }
.icon-wb { background-position: -992px -11px; }
.icon-wb:hover { background-position: -992px -47px; }
.icon-wx { background-position: -954px -11px; }
.icon-wx:hover { background-position: -954px -47px; }



.wechat { 
	width: 168px; 
	height: 194px; 
	top: -223px;
	left: 50%; 
	margin-left: -39px;
	background: #0b0b0b;
	box-shadow: 0 0 20px 5px rgba(117,110,105,.5); 
	display: none; 
}
.qq{
	width: 168px; 
	height: 194px; 
	top: -223px;
	left: 50%; 
	margin-left: -85px;
	background: #0b0b0b;
	box-shadow: 0 0 20px 5px rgba(117,110,105,.5); 
	display: none;
} 

.btn-wx:hover .wechat{ display: block; animation: shang .5s forwards; }
.btn-qq:hover .qq{ 
	display: block; animation: shang .5s forwards;
}  
 @keyframes shang {  from {
 transform: translateY(10px);
 opacity: 0;
}
to { transform: translateY(0px); opacity: 1; }
}

.wechat:after,.qq::after { 
	content: ''; 
	width: 20px; height: 20px; 
	background: #0b0b0b; 
	position: absolute; 
	bottom: -10px; left: 50%; 
	margin-left: -10px;
	 transform: rotate(45deg); 
	 box-shadow: 5px 5px 10px 0 rgba(117,110,105,.3); }
.wechat img{ 
	width: 134px; 
	height: 160px; 
	display: block; 
	margin: 15px auto 0; }
.wechat em,.qq em{ 
	color: #8c8070; 
	font-size: 14px; 
	display: block; 
	text-align: center; 
	line-height: 37px; }
.qq ul{ 
	padding: 0;
	width: 134px;
	height: 134px;
	display: block; 
	margin: 20px auto 0;
}
.qq ul li{
	float: left; 
	color: #ffffff;
}
.qq ul li em{ 
	color: #ffffff;
}
.version:hover { z-index: 1; }
.version-kk { 
	width: 360px; 
	height: 228px; 
	padding: 20px; 
	background: url(../images/pop.png) no-repeat 0 0; 
	top: -260px; left: 50%; 
	margin-left: -180px; 
	cursor: default; 
	color: #64b7b9; 
	font-size: 14px; 
	line-height: 20px; 
	display: none; }
.version-kk h5 { 
	width: 100%; 
	height: 70px; 
	line-height: 70px; }
.version-kk h5 img { 
	display: block;
	float: left; 
	width: 70px; 
	height: 70px; 
}
.version-kk h5 span b { 
	padding: 0 10px 0 20px; 
	color: #fff; 
	font-size: 16px; }
.bb_nav { 
	top: 20px;
    /* left: 60%; */
    /* margin-left: -500px; */
    z-index: 3;
    width: 732px;
    margin: 0 auto;
    position: relative;
}
.bb_nav a { 
	float: left; 
	width: 224px; 
	height: 68px; 
	margin: 0 10px; 
	background-position: 0 -367px; 
	line-height: 60px; 
	text-align: center; 
	color: #f1d8c0; 
	font-size: 20px; }

	.btn-gw { 
		width: 110px;
		height: 30px;
		border: 1px solid #201e1b;
		color: #8c8070;
		font-size: 14px;
		text-align: center;
		line-height: 30px;
		position: fixed;
		top: 30px;
		right: 50px;
		z-index: 15; 
		background-color: #eeeeee;
	}
	.btn-gw:after { 
		content: ''; 
		width: 1px;
		height: 1px;
		background: #b40a22;
		position: absolute;
		top: -1px; 
		right: -1px; 
		transition: all .5s; }
	.btn-gw:before { content: '';
		width: 1px;
		height: 1px;
		background: #b40a22;
		position: absolute;
		bottom: -1px; 
		left: -1px;
		transition: all .5s; 
	}
	.btn-gw:hover:after, .btn-gw:hover:before { 
		width: 103px; 
	}

.bb_nav a.on { background-position: -228px -367px; color: #fff; font-weight: 600; }
.bb_nav a:hover { background-position: -228px -367px; color: #fff; font-weight: 600; }
.boss { left: 50%; margin-left: -540px; width: 1210px; height: 970px; background: url(../images/boss.png~v=20190320.png) no-repeat 0 0; z-index: 2; text-indent: -999em; }
.skill { left: 100px; top: 280px; }
.skill h6 { width: 368px; height: 100px; background-position: 0 -435px; text-indent: -999em; }
.skill_con { left: -160px; top: 60px; width: 680px; height: 500px; background: url(../images/skill.png) no-repeat 0 0; }
.fs1 { top: 132px; left: 65px; }
.fs2 { top: 132px; left: 188px; }
.jd1 { top: 132px; left: 425px; }
.jd2 { top: 132px; left: 543px; }
.dj1 { top: 364px; left: 248px; }
.dj2 { top: 364px; left: 366px; }
.zb { left: 610px; top: 280px; }
.zb h6 { width: 368px; height: 100px; background-position: -384px -435px; text-indent: -999em; margin: 0 auto; }
.zb p { font-size: 16px; color: #59aa9c; text-align: center; }
.zb ul { width: 560px; text-align: center; }
.zb ul li { display: inline-block; width: 130px; height: 170px; background: url(../images/zb_bg.png) no-repeat 0 0; margin: -22px; }
.zb ul li img { display: block; width: 130px; height: auto; }
.zb ul li span { text-align: center; color: #734a29; font-size: 14px; }
.carouse { width: 1216px; height: 485px; top: 50%; left: 50%; }
.carouse .swiper-slide { width: 660px; height: 379px; }
.carouse .swiper-slide img { width: 644px; height: 361px; border: 1px solid #1d463d; }
.carouse .swiper-pagination-bullet { height: 44px; width: 44px; background: url(../images/img.png) no-repeat; background-position: -1038px -5px; opacity: 1; }
.carouse .swiper-pagination-bullet-active { background: url(../images/img.png) no-repeat; background-position: -1038px -108px; }
.carouse .swiper-container-horizontal>.swiper-pagination .swiper-pagination-bullet { margin: 0 6px; }
.yltab p.cj { width: 630px; color: #59aa9c; margin: 0 auto; padding: 110px 0 10px 0; line-height: 28px; text-align: center; }
.carouse1 { width: 1021px; height: 680px; margin: 0 auto; }
.carouse1 .swiper-slide { width: 327px; height: 624px; }
.carouse1 .swiper-slide img { width: 323px; height: 620px; border: 1px solid #1d463d; }
.carouse1 .btn-video { top: 90px; margin-left: -40px; }
.carouse2 { margin: -150.5px 0 0 -608px; }
.carouse2 .swiper-pagination-bullet-active { background: url(../images/img.png) no-repeat; background-position: -1038px -52px; }
.btn-prev { left: -70px; top: 150px; display: block; width: 56px; height: 68px; background-position: -883px -367px; }
.btn-next { right: -70px; top: 150px; display: block; width: 56px; height: 68px; background-position: -974px -367px; }
.mask-pop, .mask-video { width: 100%; height: 100%; background: rgba(0,0,0,.8); position: fixed; top: 0; left: 0; z-index: 1000; display: none; }
.scratchcard-pop { width: 694px; height: 346px; background: url(../images/pop.png) no-repeat; top: 50%; left: 50%; margin: -145px 0 0 -347px; }
.scratchcard-pop .close { width: 54px; height: 54px; top: 0; right: 0; }
.scratchcard-pop .p1 { text-align: center; margin-top: 150px; line-height: 45px; color: #fff; font-size: 24px; }
.scratch-code { width: 312px; height: 56px; background: #4a120b; text-align: center; line-height: 56px; color: #fff; font-size: 32px; top: 212px; left: 50%; margin-left: -156px; }
.scratch-code #scratch { width: 312px; height: 56px; position: absolute; top: 0; left: 0; z-index: 10; }
.p2 { width: 100%; bottom: -50px; line-height: 25px; color: #aa7d4a; font-size: 14px; text-align: center; }
.gzh { width: 126px; height: 158px; position: fixed; top: 280px; left: 80px; z-index: 15; }
.btn-video { width: 109px; height: 109px; background: url(../images/btn-video.png) no-repeat; top: 258px; left: 50%; margin-left: -68px; opacity: .8; }
.btn-video:hover { opacity: 1; }
.video-close { width: 45px; height: 45px; background: url(../images/close.png) no-repeat; top: -50px; right: 0; text-indent: -999em; transition: all .5s; }
.video-close:hover { transform: rotate(180deg); }
.video { width: 800px; height: 450px; top: 50%; left: 50%; margin: -225px 0 0 -400px; }
.video #video { width: 800px; height: 450px; }

.easter{width: 1000px;height: 501px;top: 275px;left: 50%;margin-left: -500px;text-align: center;font-size: 0;}
.easter a{width: 142px;height: 501px;display: inline-block;vertical-align: middle;margin: 0 28px;transition: all .3s;}
.easter a:nth-child(1){background: url(../images/1.png) no-repeat;}
.easter a:nth-child(2){background: url(../images/2.png) no-repeat;}
.easter a:nth-child(3){background: url(../images/3.png) no-repeat;}
.easter a:nth-child(4){background: url(../images/4.png) no-repeat;}
.easter a:nth-child(5){background: url(../images/5.png) no-repeat;}
.easter a:hover{transform: translateY(-15px);}
.mask_easter{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: rgba(0,0,0,.8);z-index: 1000;}
.easter_pop{width: 615px;height: 488px;background: url(../images/easter_pop.png) no-repeat;position: fixed;top:50%;left: 50%;margin: -244px 0 0 -307.5px;z-index: 9999;}
.easter_pop .easter_close{width: 44px;height: 44px;background: url(../images/easter_close.png) no-repeat;top: 29px;right: 21px;text-indent: -999em;transition: all .3s;}
.easter_pop .easter_close:hover{transform: rotate(180deg);}
.easter_content_details{width: 500px;margin: 50px 0 0 56px;}
.easter_content_details h3{color: #fff;font-size: 18px;line-height: 28px;}
.easter_content_details .easter_p{color: #9baaa8;font-size: 14px;line-height: 25px;margin-top: 15px;}
.easter_content_details .easter_t{width: 78px;height: 24px;background: url(../images/easter_txt.png) no-repeat;display: block;text-align: center;line-height: 24px;color: #23e6c5;font-size: 14px;margin-top: 25px;}
.bounceIn{animation:bounceIn .8s ease both;}
@keyframes bounceIn {
	0% {
		opacity:0;
		transform:scale(.3)
	}
	50% {
		opacity:1;
		transform:scale(1.05)
	}
	70% {
		transform:scale(.9)
	}
	100% {
		transform:scale(1)
	}
}
/* @media screen and (min-width: 420px) and (max-width:1000px){} */
@media screen and (max-width: 420px) and (min-width:300px){ 
	 
	.qq{
		width: auto;
		height: auto;
		top: -10px;
		left: 312%;
		margin-left: -85px;
		background: #0b0b0b;
		box-shadow: 0 0 20px 5px rgba(117,110,105,.5);
		display: none;
	}
	.qq ul {
		padding: 0;
		width: auto;
		height: 120px;
		display: block;
		margin: 10px 10px 10px;
		z-index: 0;
	}
	.qq ul li {
		float: left;
		color: #ffffff;
		z-index: 1;
		width: 160px;
	} 
	.wechat em, .qq em {
		color: #8c8070;
		font-size: 14px;
		display: block;
		text-align: center;
		line-height: 25px; 
	}
	#joinQQ em{
		color: #8c8070;
		font-size: 14px;
		display: block;
		text-align: center;
		line-height: 25px;
		margin-top: 20px;
		margin-bottom: 10px;
	}
	.wechat:after, .qq::after {
		content: '';
		width: 20px;
		height: 20px;
		background: #0b0b0b;
		position: absolute;
		bottom: 40%;
		left: 0%;
		margin-left: -10px;
		transform: rotate(45deg);
		box-shadow: 5px 5px 10px 0 rgba(117,110,105,.3);
		z-index: -999;
		opacity: 0.95;
	}

	.wechat {
		width: 160px;
		height: 180px;
		top: 7px;
		left: 200%;
		margin-left: -39px;
		background: #0b0b0b;
		box-shadow: 0 0 20px 5px rgba(117,110,105,.5);
		display: none;
	}
	.wechat img {
		width: 130px;
		height: 150px;
		display: block;
		margin: 15px auto 0;
	}

	.video{
		max-width: 400px;
		min-width: 280px;
		height: 450px;
		top: 50%;
		left: 50%;
		margin: -300px 0 0 -200px;
	}
	.video #video {
		max-width: 400px;
		min-width: 300px;
		height: 450px;
	}
	.video-close {
		width: 35px;
		height: 35px; 
		background-size: contain
	}
	.center{
		/* max-width: 420px;
		min-width: 300px; */
		width: 100%;
		height: 736px; 
		margin: 0 auto; 
		top: 0px;
		left: 0px;
	}
	.icon-share{
		width: 40px;
		height: auto;
		position: fixed;
		bottom: 165px;
		left: 10px;
		z-index: 15;
		/* display: none; */
		
	}
	.icon-share a {
		width: 30px;
		height: 30px;
		background: #8c8070;
		border-radius: 50%;
		display: inline-block;
		vertical-align: middle;
		margin-right: 10px;
		margin-top: 10px;
		font-size: 0;
		float: left;
	}
	.btn-video{
		width: 60px;
		height: 60px;
		background: url(../images/btn-video.png) no-repeat;
		top: 108px;
		left: 60%;
		margin-left: -68px;
		opacity: .8;
		background-size: cover;
	}
	.bg { 
	
		background: url(../images/bg_phone.jpg) no-repeat;  
		width: 100%;
		height: 100%;
		background-size: cover;
		position: relative;
	}
	.bg2 { 
		
		background: url(../images/bg2.jpg~v=20190129.jpg) 50% 50% no-repeat; 
		/* max-width: 420px;
		min-width: 300px; */
		width: 100%;
		height: 100%; 
	}
	.bg3 { 
		
		background: url(../images/bg3.jpg~v=20190117.jpg) 50% 50% no-repeat; 
		/* max-width: 420px;
		min-width: 300px; */
		width: 100%;
		height: 100%;
	} 
	.slogan{
		height: 200px;
		/* max-width: 420px;
		min-width: 300px; */
		width: 100%;
		background: url(../images/slogan.png) no-repeat;
		left: 0%;
		top: 120px; 
		margin: 0 auto;
		background-size: cover;
		position: relative;
	} 
	.nav {  
		 display: none;

		}
	.nav a { 
		width: 70px; 
		height: 26px; 
		text-align: center;
		line-height: 26px;
		color: #8c8070; 
		font-size: 14px;
		display: block;
		margin-top: 44px;
		position: relative;
		}
	.nav a:after { 
		content: ''; 
		width: 0;
		height: 5px; 
		background: url(../images/nav-line.png) no-repeat; 
		position: absolute; 
		top: 50%; left: 50%; 
		transition: all .5s; 
		transform: translate(-50%, -50%); 
	}
	.nav a:hover:after, .nav a.active:after{ 
		width: 70px; 
	} 
	.icon-arrow {
		display: none;
	}
	.btn-gw { 
		width: 70px; 
		height: 30px;
		border: 1px solid #201e1b;
		color: #8c8070; 
		font-size: 14px; 
		text-align: center;
		line-height: 30px; 
		position: fixed;
		top: 30px; 
		right: 10px; 
		z-index: 15; 
	}
	.btn-gw:after { 
		content: ''; 
		width: 1px;
		height: 1px;
		background: #b40a22;
		position: absolute;
		top: -1px; 
		right: -1px; 
		transition: all .5s; }
	.btn-gw:before { content: '';
		width: 1px;
		height: 1px;
		background: #b40a22;
		position: absolute;
		bottom: -1px; 
		left: -1px;
		transition: all .5s; 
	}
	.btn-gw:hover:after, .btn-gw:hover:before { 
		width: 103px; 
	}

	.logo { 
		/* height: 80px; 
		width: 80px; 
		background: url(../images/logo.png) no-repeat 0 0; 
		background-size: cover;
		position: fixed; 
		top: 270px; 
		left: 5px; 
		z-index: 15;  */
		display: none;
	}
	/* .logo p { 
		width: 80px; 
		font-size: 12px; 
		color: #000000; 
		position: absolute; 
		bottom: -60px; 
		left: 50%; 
		margin-left: -40px; 
		text-align: center; 
		line-height: 23px; 
	} */
	/* .logo p span { font-size: 15px; } */
	.gzh { 
		/* width: 85px;
		height: 158px;
		position: fixed;
		top: 420px;
		left: 5px;
		z-index: 15; */
		display: none;
	 }
	 .btn { 
		width: 150px;
		height: auto;
		text-align: center;
		top: 15%;
		/* left: 139px; */
		overflow: hidden;
		margin: 0 auto;
	}
	.btn a {
		width: 145px;
		height: 60px;
		display: block;
		float: none;
		text-indent: -999em;
		transition: all .5s;
		opacity: 1;
		margin: 0 auto;
	}
	.btn a img{
		width: 145px;
		height: 60px; 
		display: block; 
		float: none; 
		vertical-align: middle; 
		text-indent: -999em; 
		transition: all .5s; 
		opacity: 1; 
	}

	.download-er { 
		float: none;
		width: 120px;
		height: 135px;
		margin: 0 auto;
		margin-top: 0px;
		/* left: 20px; */
		position: relative;
	}
	.download-er img { 
		display: block; 
		width: 100%; 
		height: 100%; 
	}  
	/* 切换 */
	.bb_nav{  
			/* width: 225px;
			top: 106px;
			left: 0%;
			margin-left: 90px;
			z-index: 3; */
			width: 225px;
			top: 106px;
			/* left: 0%; */
			margin-left: 0px;
			z-index: 3;
			position: relative;
			margin: 0 auto;
	}
	.bb_nav .tab2{
		display: none;
		width: 0px;
	}
	 .slogan { 
		/* height: 175px; 
		width: 100%;
		background: url(../images/slogan.png) no-repeat;
		left: 0%;
		top: 128px;
		margin: 0 auto;
		background-size: cover;
		position: relative; */
		height: 175px; 
		width: 100%;
		background: url(../images/logotop.png) no-repeat; 
		top: 11%;
		margin: 0 auto;
		background-size: cover;
		position: relative;
		display: block;
	} 
	.slogan a{
		display: none;
	}
	
}