@charset "utf-8";

@font-face{
	font-family: "GothamLight";
	src: url(../font/Gotham-Light.otf);
}

@font-face{
	font-family: "GothamBook";
	src: url(../font/Gotham-Book.otf);
}


/* CSS Document */
body,html {margin:0; padding:0; font:12px/180%; font-family: "GothamLight","Helvetica Neue","Helvetica","Arial",sans-serif;}
*{ margin: 0; padding: 0; -webkit-tap-highlight-color: transparent;}
body{background: #FCFCFC;}
body a{outline:none; blr:expression(this.onFocus=this.blur());}
h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {margin: 0;padding: 0; list-style:none;}
li {list-style: none; vertical-align: bottom;}
img {border: none; display:block;}
em,i {font-style: normal;}
a{text-decoration:none;}
.disable {display: none;}
.fl {float: left;}
.fr {float: right;}
.clearfix:after {content:""; height:0; display:block; clear:both; visibility:hidden;}
* html .clearfix {height:1%;}
.clearfix {display:block; clear:both;}
input,textarea{ resize:none;  outline:none;}
button{ outline: none;}
select{height:22px; line-height:18px; padding:2px 0; outline:none;}



.div_wap{display:none;}
.div_pc{display:block;}

.wrapper{ box-sizing: border-box; width: 70%; margin: 0 auto; position: relative;}
.wrapper-full{ box-sizing: border-box; width: 100%; margin: 0 auto; position: relative;}


/*头部*/


.header-wrapper{width: 100%; position: fixed; left: 0; top: 0; right: 0; height: 120px; z-index: 9;
	border-bottom: 1px solid #fff;
}


.header{
	width: 70%;
	height: 120px;
	overflow: hidden;
	margin: 0 auto;
}

/*
.header{ position: fixed; left: 0; top: 0; right: 0; height: 120px; z-index: 9;}
.header.on{ background-color: #fff;}
*/
.logo{ float: left; margin: 40px 150px 0 0; width: 200px;}

.logo_w{ display: block;}
.logo_b{ display: none;}


.language{
	float: right;
	line-height: 120px;
}
.language a{
	font-size: 14px;
	text-decoration: none;
	color: #fff;
}




.topnav{ height: 120px; float: left; margin-right: 20px;}
/*.nav li{ float: left; font-size: 36px; font-weight: normal; text-transform: uppercase; line-height: 80px;}*/
.topnav li{ float: left; font-size: 18px; font-weight: normal; text-transform: uppercase; line-height: 120px; padding: 0 20px;}
.topnav li a{ 
	font-family: "GothamBook","Helvetica Neue","Helvetica","Arial",sans-serif; 
	color: #fff; 
	cursor: pointer;

}

.topnav li a.en{ }

.header-wrapper.on{ background-color: #fff;border-bottom: 1px solid #837d73!important;}
.header-wrapper.on .logo_w{ display: none;}
.header-wrapper.on .logo_b{ display: block;}
.header-wrapper.on .topnav li a{ color: #000!important;}
.header-wrapper.on .language  a{ color: #000!important;}


.menus,.menus_list,.bg{ display: none;}


.session4_text{
	position: absolute;
	bottom: 120px;
	width: 100%;
	height: auto;
	text-align: center;
	left: 0;
}


.session4_text img{
	width: 52.6%;
	margin: 0 auto;
}


.session7_text{
	position: absolute;
	bottom: 120px;
	width: 100%;
	height: auto;
	text-align: center;
	left: 0;
}


.session7_text img{
	width: 60.3%;
	margin: 0 auto;
}


.session8_video1{
	position: absolute;
	top: 72.3vw;
	width: 70%;
	height: auto;
	text-align: center;
	left: 15%;
}


.session8_gif1{
	position: absolute;
	top: 16.6vw;
	width: 23%;
	height: auto;
	text-align: center;
	left: 14%;
}


.session8_gif2{
	position: absolute;
	top: 16.6vw;
	width: 23%;
	height: auto;
	text-align: center;
	left: 38%;
}


.session8_gif3{
	position: absolute;
	top: 16.6vw;
	width: 23%;
	height: auto;
	text-align: center;
	left: 62%;
}



.session8_clicktosignup{
	position: absolute;
	top: 45.2vw;
	width: 50%;
	height: 16vw;
	text-align: center;
	left: 25%;
}


.session8_appstore{
	position: absolute;
	top: 118vw;
	width: 17%;
	height: 6vw;
	text-align: center;
	left: 64%;
}

.session8_android{
	position: absolute;
	top: 125vw;
	width: 17%;
	height: 6vw;
	text-align: center;
	left: 64%;
}

.session8_download{
	position: absolute;
	top: 132vw;
	width: 19%;
	height: 12vw;
	text-align: center;
	left: 64%;
}





.session8_gif1 img,.session8_gif2 img,.session8_gif3 img{
	width:100%;
}




.session9_video1{
	position: absolute;
	top: 16vw;
	width: 70%;
	height: auto;
	text-align: center;
	left: 15%;
	padding: 15px;
	border: 1px solid #fff;
	background-color: #b2b0af;
	box-sizing: border-box;
}



.session9_video2{
	position: absolute;
	top: 70.1vw;
	width: 70%;
	height: auto;
	text-align: center;
	left: 15%;
	padding: 15px;
	border: 1px solid #fff;
	background-color: #b2b0af;
	box-sizing: border-box;
}


.session9_video1_play{
	position: absolute;
	top: 16vw;
	width: 70%;
	height: 35.5vw;
	text-align: center;
	left: 15%;
	padding: 15px;
	background-image: url("/imgs/btn_play.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100px ;
	z-index: 30;
	box-sizing: border-box;
}


.session9_video2_play{
	position: absolute;
	top: 70.1vw;
	width: 70%;
	height: 39.2vw;
	text-align: center;
	left: 15%;
	padding: 15px;
	background-image: url("/imgs/btn_play.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100px ;
	z-index: 30;
	box-sizing: border-box;
}



.session10{
	height:240px;
	padding: 80px;
}

.session10_l{
	width: 48%;
	float: left;
	text-align: right;
}

.session10_l a{

	
}

.session10_l img{
	width: 80%;
	float: right;
}


.session10_r{
	width: 48%;
	float: right;
	text-align: left;
}

.session10_r a{

	
}

.session10_r img{
	width: 80%;
	float: left;
}

.session11{
	background-color: #3e3938;
}

.session11 img{
	width: 100%;
}


.session11 .signupform{
	
	width: 50%;
    height: 70px;
    top: 12vw;
    left: 25%;
    position: absolute;
	
}



.session11 .signupform_l{
	
	width: 76%;
    height: 70px;
	float: left;

	
}

.session11 .signupform_l input{
	width:100%;height: 70px;border: none;
	
	
	padding: 0px 30px;
    box-sizing: border-box;
	
	font-size: 18px;
	
}






.session11 .signupform_r{
	
	width: 23%;
    height: 70px;
	float: right;

	
}



.session11 .signupform_r input{
	width:100%;height: 70px;background-color: #6bcff1; color: #fff;border: none;
}




.productguide{
	position: fixed;width:72%;height: auto;background-color: #fff;left: 14%;top: 15%;z-index: 50;
	border: 1px solid #000;
	display: none;
}


.productguidewrapper{
	position: relative;width: 100%;height: auto;overflow: hidden;
}

.btn_close{
	position: absolute;
	right: 15px;
	top: 15px;
	width: 40px;
	height: 40px;
	z-index: 30;
}

.btn_close img{
	width: 40px;
	height: 40px;
}

@media screen and (max-width: 750px) {

	
	.div_pc{display: none!important;}
    .div_wap{display:block!important;}
	

	
	/*头部*/
	.header{ height: 50px; }
	.logo{ margin: 0 auto 0; width: 100%; height: 50px; float: none;}
	
	.logo img{ 
		margin: 5px auto;
		height: 40px;
	}
	
	.logo_b{ display: block;}
	.logo_w{ display: none;}
	
	.topnav{ display: none;}

	.menus{ display: block; position: absolute; right: 0; top: 0; z-index: 3;}
	.menus img{ height: 50px; }
	.menus.on{ height: 50px;}
	.menus.on img{ transform: rotate(0);}
	.menus_list{ display: block; position: fixed; left: 0; top: 50px; right: 0; background: #fff; padding: 23px 18px 30px; z-index: 9; transform: translateX(-100%);}
	.menus_list li{ border-bottom: 1px #D4D4D4 dashed;}
	.menus_list h4{ display: block; font-size: 16px; color: #313549; line-height: 50px;  font-weight: normal;}
	
	.menus_list h4 a{ color: #313549;}
	
	.menus_list div{ padding-bottom: 0.15rem; display: none;}
	.menus_list p{ font-size: 0.23rem; line-height: 0.7rem; font-family: "hansiL";}
	.menus_list p a{  color: #313549; text-decoration: none;}
	.menus_list.on{ transform: translateX(0);}
	.bg{ position: fixed; left: 0; top: 0.96rem; right: 0; bottom: 0; z-index: 8;}
	.bg.on{ display: block;}
	
	.header-wrapper{width: 100%; position: fixed; left: 0; top: 0; right: 0; height: 50px; z-index: 9;
		background-color: #fff;
	}

	
	
	
	.session2_wap_pic{
		width:100%;
		height: auto;
		margin: 0px auto 15px auto;
	}
	
	.session2_wap_pic img{
		width:100%;
	}
	
	.session2_wap_text{
		width:100%;
		box-sizing: border-box;
		padding: 15px;
		height: auto;
	}
	
	
	.session2 .s2logo img{
		width:30%;
	}
	
	.session2 .title{
		font-size: 44px;
		margin-top: 15px;
		margin-bottom: 15px;
	}
	
	.session2 .desc{
		font-size: 12px;
		line-height: 25px;
    	padding: 0 5px;
	}
	
	
	
	
	.session3_wap_pic{
		width:100%;
		height: auto;
		margin: 0px auto 15px auto;
	}
	
	.session3_wap_pic img{
		width:100%;
	}
	
	
	.session3_wap_text{
		width:100%;
		box-sizing: border-box;
		padding: 15px;
		height: auto;
	}
	
	.session3 .title{
		font-size: 44px;
		margin-top: 15px;
		margin-bottom: 15px;
	}
	
	.session3 .desc{
		font-size: 12px;
		line-height: 25px;
    	padding: 0 5px;
	}
	
	
	
	
	
	
	
	.session4_text{
		position: absolute;
		bottom: 30px;
		width: 100%;
		height: auto;
		text-align: center;
		left: 0;
	}


	.session4_text img{
		width: 52.6%;
		margin: 0 auto;
	}

	
	
	
	.session5_wap_pic{
		width:100%;
		height: auto;
		margin: 0px auto 15px auto;
	}
	
	.session5_wap_pic img{
		width:100%;
	}
	
	
	.session5_wap_text{
		width:100%;
		box-sizing: border-box;
		padding: 15px;
		height: auto;
	}
	

	
	.session5 .desc{
		font-size: 12px;
		line-height: 25px;
    	padding: 0 5px;
	}
	
	
	
	
	
	
	
	
	

	.session7_text{
		position: absolute;
		bottom: 30px;
		width: 100%;
		height: auto;
		text-align: center;
		left: 0;
	}


	.session7_text img{
		width: 60.3%;
		margin: 0 auto;
	}
	
	
	
	
	
	.session8_wap_pic{
		width:100%;
		height: auto;
		margin: 0px auto 15px auto;
	}
	
	.session8_wap_pic img{
		width:100%;
	}
	
	
	.session8_wap_pic_click{
		width:100%;
		height: auto;
		margin: 0px auto 15px auto;
	}
	
	.session8_wap_pic_click img{
		width:80%;
		margin: 0 auto;
	}
	
	.session8_wap_pic_btn{
		width:100%;
		height: auto;
		margin: 0px auto 15px auto;
	}
	
	.session8_wap_pic_btn img{
		width:50%;
		margin: 0 auto;
	}
	
	
	
	.session8_wap_text{
		width:100%;
		box-sizing: border-box;
		padding: 15px;
		height: auto;
	}
	
	.session8 .subtitle{
		font-size: 24px;
		margin-top: 15px;
		margin-bottom: 15px;
	}
	
	.session8 .desc{
		font-size: 12px;
		line-height: 25px;
    	padding: 0 5px;
	}
	
	.session8 .desc a{
		font-size: 12px;
		line-height: 25px;
		text-decoration: underline;
		color: #000;
	}
	
	.session8_gif1{
		width:90%;
		margin: 15px auto;
		top:0;
		left: 0;
		position: relative;
		
	}
	
	.session8_gif2{
		width:90%;
		margin: 15px auto;
		top:0;
		left: 0;
		position: relative;
	}
	
	.session8_gif3{
		width:90%;
		margin: 15px auto;
		top:0;
		left: 0;
		position: relative;
	}
	
	
	.session9_video1{
		padding: 5px 5px 0 5px;
	}
	
	
	.session9_video1_play{
		background-size: 50px ;
	}


	.session9_video2_play{
		background-size: 50px ;
	}

	
	
	
	.session10{
		height:60px;
		padding: 20px; 
	}
	
	
	.session11 .signupform{
	
		width: 50%;
		height: 20px;
		top: 12vw;
		left: 25%;
		position: absolute;

	}



	.session11 .signupform_l{

		width: 66%;
		height: 20px;
		float: left;


	}
	
	
	.session11 .signupform_l input{
		width:100%;
		height: 20px;
		border: none;

		padding: 0px 10px;
		box-sizing: border-box;

		font-size: 12px;

	}
	
	.session11 .signupform_r{

		width: 33%;
		height: 20px;
		float: right;

	}

	

	.session11 .signupform_r input{
		width:100%;
		height: 20px;
		background-color: #6bcff1; 
		color: #fff;
		border: none;
		font-size: 12px;
	}
	

}


@media screen and (min-width:751px) {

	
	.header{
		width: 71.3%;
		min-width: 1370px;
	}
	
	.logo_b { width:140px;}
	.logo_w { width:140px;}
	
	
	
}