/* * @description: 移动端公共样式 * @author: ruihongran * @update: ruihongran (2015-08-25) */
@charset "utf-8";
/* 设置html默认字体大小为10px ,当用户放大或缩小页面时不改变字体大小。*/
html{font-size: 62.5%; -ms-text-size-adjust: 100%; /* 2 */ -webkit-text-size-adjust: 100%; /* 2 */}
/* 清除标签自带外边距离 */
body, div, p, h1, h2, h3, h4, h5, h6, ul, ol, li, dl, dt, dd, input, textarea, select, hr，legend, fieldset{margin: 0; padding: 0;}
/* 设置body字体、字体大小、行高、颜色、背景色 */
body{font-family: 'Microsoft YaHei', Helvetica, Arial, sans-serif; font-size: 1.4rem; line-height: 1.4; color: #333; background-color: #fff; max-width: 720px; margin: 0 auto;}
/* 清除列表默认样式 */
li{list-style: none;}
/* 1. 修正所有浏览器中未被继承的字体类型。 * 2. 修正所有浏览器中未被继承的字体大小。 * 3. 处理 Firefox 4+, Safari 5, 及 Chrome 中默认设置不同的外边距。 */
input,
button,
select,
textarea{font-family: inherit; font-size: inherit; line-height: inherit; outline: none; background: none; border: none 0;}
/* 1. 避免 Android 4.0.* 中 WebKit 的一个bug, 防止 'audio' 与 'video' 的播放控件失效。 * 2. 修正 iOS 中不可点击的 'input' 样式。 * 3. 改善图片类型的 'input' 等光标样式的可用性与一致性。 */
button,
html input[type="button"],
input[type="reset"],
input[type="submit"]{-webkit-appearance: button;}
/* 删除 Safari 5 和 OS X 上的 Chrome 中的输入框上的内边距和搜索取消按钮 */
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{-webkit-appearance: none;}
input:focus{border-color:#00a151;}
/* 保持垂直居中 */
img,
input,
textarea{vertical-align: middle;}
/* 去除img边框 */
img,
hr{border: none 0;}
/* 处理　Firefox　与其它浏览器的差异 */
hr{-webkit-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box; height: 0;}
/* 清除字体倾斜 */
i,
em{font-style: normal;}
/* 清除表格单元格间距，合并边框 */
table{border-spacing: none; border-collapse: collapse;}
/* 隐藏空白的单元格 */
th,
td{empty-cells: hide;}
/* 表格水平居中，垂直居中 */
table,tr,
td{text-align: center; text-veralign: middle;}
/* 链接样式 */
a{text-decoration: none; color: #333;}
/* 设置获取焦点、活动元素的outline为0 */
a:focus,
a:active{outline: 0;}
/* 去掉ios系统中元素被触摸时产生的半透明灰色遮罩 */
div,
span,
a,
button,
input,
textarea{-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
input,select,
textarea{border: 1px solid #f3efef; padding: 1.5% 2%; -webkit-appearance: none; appearance: none; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box;}
@font-face {
    font-family: 'iconfont';
    src: url('/static/web/maoli/materials/css/iconfont.eot');
    /* IE9*/
    src: url('/static/web/maoli/materials/css/iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('/static/web/maoli/materials/css/iconfont.woff') format('woff'), /* chrome、firefox */
    url('/static/web/maoli/materials/css/iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('/static/web/maoli/materials/css/iconfont.svg#iconfont') format('svg');
    /* iOS 4.1- */
}
*,:after,:before {-webkit-box-sizing: border-box;-moz-box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;box-sizing: border-box;}
.iconfont {font-family: "iconfont";font-style: normal;-webkit-font-smoothing: antialiased;-webkit-text-stroke-width: 0.2px;vertical-align: middle;}
html,body,.main{
	width: 100%;
	height:100%;
	overflow: hidden;
}
.main{
	position: absolute;
	/*background: url(../images/mannerbg.png) no-repeat;*/
	background-size: 100% 100%;
	padding-top: 39%;
}
.mannertit{
	display: block;
	position: absolute;
	width: 100%;
	height: auto;
	left: 0;
	top: 5rem;
}
.conter{
	width: 92%;
	height: 100%;
	margin: 0 auto;
}
.conter .conter-tit{
	width: 100%;
	height:2rem;
	text-align: center;
	font-size: 1.6rem;
	line-height: 2rem;
}
.conter .conter-tit b{
	padding: 0 3px;
	font-size: 2rem;
	color: #ffb606;
}
.conter ul{
	position: relative;
	height: auto;
	width:100%;
	padding-top: 2rem;
}
.conter ul li{
	width: 100%;
	height: auto;
	overflow:hidden ;
	display: none;
}
.conter ul li.active{
	display: block;
}
.conter ul li:nth-child(2) .ptit{
	width: 100%;
	height: auto;
	overflow: hidden;
}
.conter ul li:nth-child(1) span,.conter ul li:nth-child(2) .ptit span{
	display:block;
	float: left;
	width: 40%;
	margin:0 5%;
	height: auto;
	padding-bottom: 1rem;
}
.conter ul li:nth-child(1) span img,.conter ul li:nth-child(2) .ptit span img{
	width: 100%;
	height: auto;
}
.conter ul li:nth-child(2) .ptit span{
	width: 26%;
	margin:0 12%;
}
.age{
	width: 100%;
	height: auto;
	overflow: hidden;
	color:#666;
	padding-bottom: 1.8rem;
}
.age.active{
	color:#333;
}
.age span,.mode p span{
	display: block;
	height: 2.4rem;
	width: 11rem;
	margin: 1.2rem auto;
	padding-left: 2.6rem;
	font-size: 1.5rem;
	line-height: 2.4rem;
	background: url(../images/dd.png) no-repeat;
	background-size: auto 100%;
}
.age span.active,.mode p.active span{
	color:#fcc030;
	background: url(../images/ddimg.png) no-repeat;
	background-size: auto 100%;
}
.retreat{
	width: 14rem;
    height: 4rem;
	border: 1px solid #333;
	border-radius: 6px;
	position: absolute;
	left: 50%;
	bottom: -3rem;
	margin-left: -7rem;
	text-align: center;
	line-height: 3.6rem;
	font-size: 1.6rem;
	color:#282828;
	background: url(../images/left.png) no-repeat 3.2rem;
	background-size:0.9rem 1.4rem;
}
.retreat.active{
	bottom: -7rem;
	width: 9rem;
	left:0;
	margin-left: 0rem;
	background: url(../images/left.png) no-repeat 1rem;
	background-size:0.9rem 1.4rem;
}
.sig-up{
	display: none;
	bottom: -7rem;
	width: 100%;
	border: 1px solid #f8b003;
	border-radius: 6px;
	position: absolute;
	right: 0;
	bottom: -7rem;
	text-align: center;
	line-height: 3.6rem;
	font-size: 1.6rem;
	font-weight: bold;
	color:#f8b003;
}
.mode p{
	float: left;
	width: 50%;
	height:auto ;
	max-height: 13rem;
	padding: 0 5%;
}

.mode p img{
	display: block;
	width: 100%;
	height: auto;
	max-height: 8.9rem;
}
@media (max-width: 375px){
	.mode p{max-height: 12rem;}
	.mode p img{max-height: 7.6rem;}
}
@media (max-width: 320px){
	.mode p{max-height: 11rem;}
	.mode p img{max-height: 6.9rem;}
}
.mode p span{
    margin: 0.5rem auto 1.2rem auto;
}
.formbox .inp{
	display: block;
	width: 100%;
	height: 4rem;
	margin-bottom: 1rem;
	background: #e8eef6;
}
.formbox form{
	position: relative;
}
.formbox form b{
	display: block;
	height: 0;
	width: 0;
	font-size: 0;
	line-height: 0;
	position: absolute;
	right: 2rem;
	top: 1.8rem;
	border: 6px solid transparent;
	border-top: 6px solid #666;
}
@media (max-height: 480px){
.main {
    padding-top: 30%;
}
.mannertit {
    top: 2rem;
}
.retreat {
    width: 12rem;
    height: 3rem;
    margin-left: -6rem;
    line-height: 2.6rem;
    font-size: 1.6rem;
    bottom: -2.2rem;
    background: url(../images/left.png) no-repeat 3rem;
    background-size: 0.9rem 1.4rem;
}
.sig-up{
	bottom: -5rem;
}
}