@charset "utf-8";
/* CSS Document */
/*Reset End*/
.bg, .bg2{ height:100%; position:relative; min-width: 100%;}/*修改*/
.pagesize{width: 100%; margin:0 auto;/* background:#ffd736*/}

.header{ margin-bottom:0;}
.menu { position: absolute; right: 0; top: 0; display: block; background: url(../images/bt_menu.png) no-repeat; background-size: auto 40px; width: 40px; height: 40px; }
.menu a{ display: block; width: 40px; height: 40px; }
.tophd{ height: 40px; position: relative;}
.tophd ul{ top: 40px; right: 0px; z-index: 999; background: #fff; display: none;
-webkit-box-shadow: 0px 3px 5px 0px rgba(0, 0, 0, 0.35);-moz-box-shadow:    0px 3px 5px 0px rgba(0, 0, 0, 0.35);box-shadow:         0px 3px 5px 0px rgba(0, 0, 0, 0.35);}
.tophd li{ padding: 5px 10px; float: none; background: none; margin: 0px; text-align: center;}
.tophd li{ display: block;}
.tophd li.n01{ padding-top:5px; padding-left:2px;}
.tophd.open .menu { background-position: -40px 0; background-color: #fff;}
.tophd.open ul { display: block;}

.visual{ width: 320px; height:auto; margin: 0 auto;}
.visual .phone{ background:url(../images/phone_bg.png) no-repeat; width:274px; height:620px; margin:0 45px 0 1px; float:left; position:relative; display:none;}

.visual .video{ width: auto; height:auto; float:none; position:static;}
.visual .video h1 img{ width:320px; height:44px;}
.visual .video .mov img{width:320px; height:195px; }
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

#mov_list { width: 320px; height: 180px;}
#mov_list li{ width: 320px; height: 180px;}
.mov #bt_left { left: 0px; top: 80px;}
.mov #bt_right { right: 0px; top: 80px;}

.visual .video .app_store{ position: static; width:auto; margin-bottom: 0px; padding: 10px 0px 0;}
.visual .video .app_store li{}
.visual .video .app_store img{ width:auto; height:52px;}
.visual .video .app_store a.btnA{ margin-right:0px; }
.visual .video .app_store .dlapp{ width:160px; height:auto;}
.visual .video .app_store .dlapp img{ width:150px; height:auto;}
.visual .video .app_store .dlapp .qrcode { display: none;}
.visual .video .app_store .iconApp{width:160px; height:auto;}
.visual .video .app_store .app{ height:60px; width:160px; display:block; text-align: center;}
.visual .video .app_store .ver{ display: none;}
.visual .video .app_store .dl{ display: none;}

.app_pic{height: 266px; display:block; overflow:hidden; position: relative; width: auto; margin: 0 10px 10px;}
.app_pic ul{position:absolute; top:0px; left:0px;}
.app_pic li{ float:left; margin: 0px;}
.app_pic li img{ width:150px; height: 266px;}

/*banner*/
.banner{ position:relative; margin-bottom:20px; display:none;}
.banner .bn{padding:10px; width:auto; height:auto;}
.banner .bn img{width:300px; height:75px;}
.banner .page{ position:absolute; top:90px; left:140px; width:60px;}
.banner .page li{ margin-right:2px; float:left;}
.banner .page li img{ width:4px; height:4px;}
.popup_box { width: 300px;}
.popup_box img{ width: 300px;}

/*角色介紹*/
.role{ height:100%;}
.role h2{ height:50px; padding-left:10px;}
.role h2 img{ width:240px; height:50px;}
.bottomArea{ margin-top:815px; display:none;}
.bottomArea .dl_appstore{ width:760px; float:left;}
.bottomArea .cc_man{width:171px; float: right;}

.role .intro{ padding:10px;}
.role .intro .role_01{ width: auto; height:auto;position:static;}
.role .intro .role_02{ width:auto; height:auto;position:static;}
.role .intro .role_03{ width:auto; height:auto;position:static;}
.role .intro .role_04{ width:auto; height:auto;position:static;}
.role .intro .role_05{ width:auto; height:auto;position:static;}
.role .intro .role_06{ width:auto; height:auto;position:static;}
.role .intro .role_07{ width:auto; height:auto;position:static;}
.role .intro .role_08{ width:auto; height:auto;position:static;}
.role .intro .pic{ width:103px; height:138px;float:left;}
.role .intro .pic img{width: 100%; height: auto;}
.role .intro .txt{ width: auto; float: none; padding-top:25px; padding-left: 113px;}
.role .intro .txt h3{ margin-bottom:10px; font-size:34px; font-weight:bold; line-height:100%; color:#000;}
.role .intro .txt h3 img{ width:auto; height:46px;}
.role .intro .txt p{ font-size:13px; line-height:120%;}

.ft{padding:0; padding-bottom: 45px;}
.ft .link{ width: auto; }
.ft .link ul{ right: 0; left: 50%; margin-left: -150px; }
.ft .link li{ padding-right: 10px;margin-right: 10px;}
.ft .link li img{ width:auto; height:16px;}
.ft .link .logo { width: 115px; left: 50%; top: 40px; margin-left: -57px;}

.wrapper {
	position: relative;
	width: auto;
	padding: 0 0px;
	margin: 0px 10px 0;
	height: 135px;
}

.nav-arrows a {
	width: 21px;
	height: 21px;
	background: #cbbfae url(../images/nav.png) no-repeat top left;
	position: absolute;
	top: 50%;
	left: 2px;
	text-indent: -9000px;
	cursor: pointer;
	margin-top: -21px;
	opacity: 0.9;
	border-radius: 50%;
	box-shadow: 0 1px 1px rgba(255,255,255,0.8);
}

.nav-dots span {
	display: inline-block;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	margin: 3px;
	background: #cbbfae;
	cursor: pointer;
	box-shadow: 
		0 1px 1px rgba(255,255,255,0.6), 
		inset 0 1px 1px rgba(0,0,0,0.1);
}

.web{ display: none;}
.mobile{ display: block;}
.formsArea { width: 320px; padding-top: 0; }
.formsArea h2{ padding: 0 10px; margin-bottom: 10px;}
.formsArea h2 img{ width: 300px; height: auto;}
.formsArea .from { min-height: 0; margin-bottom: 20px; background-color: #fff;padding: 0 10px 10px;}
.formsArea .from th { padding: 15px 0 10px 0px; width: 105px; font-size: 16px;}
.formsArea .from td { font-size: 16px;}
.formsArea .tab td{ padding: 10px 10px;}
.formsArea .bt { margin: 10px 0;}
.styled-select {width: 180px;height: 30px;}
.styled-select select {width: 200px;}
.formsArea .input_txt {width: 180px; }
.formsArea .tab { padding: 0 10px;}
.login_bt { position: static; text-align: center; padding: 10px 0; }
.login_info { position: static; width: 160px; margin: 0 auto;}
.login_info .pic{ float: left; border-radius: 33px; width: 65px; height: 65px;overflow:hidden; margin-right: 5px;}
.login_info .info{ float: left;padding-top: 15px;}
.login_info .info .logout{ display: block; padding-top: 5px;}
.login_info .info .logout a{ color: #888;}

.ruleArea{ background-color: #fff; padding: 10px; -webkit-border-radius: 0px;-moz-border-radius: 0px; border-radius: 0px;}
.ruleArea h2{margin-bottom: 10px; }
.ruleArea h2 img{ height: 23px; width: auto;}

.promise { padding: 0 0 0 0px;}
.promise .title{ float: none; padding: 5px 0;font-size: 16px;}
.promise ul{ padding-left: 0px;}
.promise li{font-size: 16px;}
.promise input{ width: 30px; height: 30px; vertical-align: middle;}

@media all and (orientation:portrait){
.bg{background:#ffd736 url(../images/visual_bg_m.jpg) 0 0px repeat-x; height:100%; background-size:100% 350px; position:relative;}/*修改*/
}
@media all and (orientation:landscape){
.bg{background:#ffd736 url(../images/visual_bg_m.jpg) repeat-x ; height:100%; background-size:100% 350px; position:relative;}/*修改*/
}