@charset "utf-8";
/*公共样式 开始*/
/*body {*/
/*    overflow-x: hidden;*/
/*    background: #f7f7f7;*/
/*    color: #181818;*/
/*    width: 100%;*/
/*    height:100%;*/
/*    min-height: 100%;*/
/*    position: relative;*/

/*}*/

/** {*/
/*    margin: 0;*/
/*    padding: 0;*/
/*    -moz-box-sizing: border-box;*/
/*    -webkit-box-sizing: border-box;*/
/*    -o-box-sizing: border-box;*/
/*    -ms-box-sizing: border-box;*/
/*    box-sizing: border-box;*/
/*    font-family: '微软雅黑', 'Microsoft Yahei', 'hiragino sans gb w3', 'Arial';*/
    /*-webkit-tap-highlight-color: transparent;*/
/*    outline: none;*/
    /*font-size: .35rem;*/


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

button, input, textarea, select {
    background: none;
    outline: none;
    border: 0;
}

button {
    cursor: pointer;
}

a {
    /*设置超链接的样式*/
    color: #333;
    /*超链接问无下划线*/
    text-decoration: none;
    /*让超链接变成块级元素*/
    display: block;
}

a:hover, a:visited {
    text-decoration: none;
}

a:hover {
    /*color: #1bbdbc;*/
}

ul li {
    list-style: none;
}

img {
    /*让图片与文字垂直居中对齐*/
    vertical-align: middle;
}

address, caption, cite, code, dfn, em, strong, th, var {
    font-style: normal;
}

article, aside, dialog, footer, header, section, footer, nav, figure, main {
    display: block
}

.clearfix:after {
    /*清除浮动*/
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}
/*解决浮动在ie浏览器中的兼容性问题*/
.clearfix {
    zoom: 1;
}

.ellips {
    display: -webkit-box;
    text-overflow: ellipsis;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1; /*这个设置为显示1行，超过1行则最后用省略号代替*/
    -webkit-box-orient: vertical;
}
/*设置媒体查询，响应各种设备*/
/*@media (min-width: 320px) and (max-width: 420px) {
    html {
        font-size: 40px;
    }

}

@media (min-width: 420px) and (max-width: 540px) {
    html {
        font-size: 45px;
    }

}

@media (min-width: 540px) {
    html {
        font-size: 50px;
    }
}*/


@media screen and (min-width: 375px){
    html {
        font-size: 14.0625px;   
    }
}
@media screen and (min-width: 360px){
    html {
        font-size: 13.5px;
    }
}
@media screen and (min-width: 320px){
    html {
        font-size: 12px;
    }
}
html {
    font-size: 16px;
}

/*给元素设置浮动*/
.fl {
    float: left;
}

.fr {
    float: right;
}
/*设置元素文本的对齐方式*/
.text-lf {
    text-align: right;
    color: #eee;
}
.text-rt {
    text-align: right;
    color: #eee;
}
.text-center {
    text-align: center;
    /*color: #eee;*/
}

/*设置input占位符placeholder的样式  */
input::-webkit-input-placeholder {
    color: #ccc;
}
/*设置小图标容器，类似img元素*/
.icon {
    width: 14px;
    height: 8px;
    display: inline-block;
    background-size: 100% 100%;

}
/*设置元素的宽度*/
.w50{
    width: 50%;
}
.w60{
    width: 60%;
}
.w70{
    width: 70%;
}
.w80{
    width: 80%;
    margin: 0 auto;
}
.w85{
    width: 85%;
    margin: 0 auto;
}
.w90{
    width: 90%;
    margin: 0 auto;
}
.w95{
    width: 95%;
    margin: 0 auto;
}
.w100{
    width: 100%;
}
/*设置元素的定位*/
.pa{
    /*绝对*/
    position: absolute;
}
.pr{
    /*相对*/
    position: relative;
}
.pf{
    /*固定*/
    position: fixed;
}
/*设置元素的布局为盒子模型布局,他的子元素均分显示在一行*/
.flex{
    display: flex;
    /*
  flex-wrap: wrap;//多个子元素在一行显示不完全时换行
    align-items: center;//让子元素垂直居中显示
    justify-content: center;//让子元素水平居中显示
    */


}
.flex>*{
    width:100%;//让子元素等比例在一行显示
}
/**/
.cell {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    border: 1px solid #666;
}
/*设置input type=file的选择文件及旁边的的文本隐藏*/
input[type=file] {
    width: 100%;
    height: 100%;
    opacity: 0;
    position: absolute;
    left: 0;
    top:0;
    z-index: 2;
}

input[type=checkbox],input[type=radio]{-webkit-appearance: none;}
/*头部*/
header {
    height: 1.125rem;
    line-height: 1.125rem;
    background: #1cb7f0;
    text-align: center;
    font-size: .425rem;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}
header * {
    color: #fff;
}


header > a {
    position: absolute;
    left: 0.375rem;
    color: #fff;
    font-size: 0.4rem;
}
header > a.back{
    width: .6rem;
}
header > a.back img{
    width: .225rem;
}
header > img {
    position: absolute;
    right: 0.375rem;
    top: 0.3rem;
}
header > span {
    color: #fff;
    font-size: 0.425rem;
}
footer{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.225rem;
    background: #ffffff;
}
footer .g-tab{
    width: 100%;
    height: 100%;
}
footer .g-tab img{
    width: .5rem;
    margin-bottom: .1rem;
}
footer a{
    color: #888888;
    font-size: .3rem;
}
footer .flex{
    margin-top: .15rem;
}
.img{
    width: 100%;
}

/*遮罩层样式*/
.mask{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background: rgba(0,0,0,.2);
    width: 100%;
}
.model{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: none;
    width: 100%;
}
.modelBox{
    background: #ffffff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}


/*
如何关闭iOS中键盘自动大写

移动版本webkit为input元素提供了autocapitalize属性，通过指定autocapitalize=”off”来关闭键盘默认首字母大写。
*/

/*
iOS中如何彻底禁止用户在新窗口打开页面

可以通过指定当前元素的-webkit-touch-callout样式属性为none来禁止iOS弹出这些按钮。
这个技巧仅适用iOS对于Android平台则无效。


*/

/*
iOS中如何禁止用户保存图片＼复制图片

img标签指定-webkit-touch-callout为none也会禁止设备弹出列表按钮，
这样用户就无法保存＼复制你的图片了。
*/
/*
iOS中如何禁止用户选中文字

我们通过指定文字标签的-webkit-user-select属性为none便可以禁止iOS用户选中文字。
*/


/*
Android中我们该如何获取滚动条的值呢？

获取滚动条的值是通过document.scrollTop和document.scrollLeft得到的


在iOS中我们该如何获取滚动条的值呢？

window.scrollY和window.scrollX我们可以得到当前窗口的y轴和x轴滚动条的值。
*/


/*
如何解决Android 2.0以下平台中圆角的问题

-webkit-border-radius


*/


/*
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black" name="apple-mobile-web-app-status-bar-style">
<meta content="telephone=no" name="format-detection">

定义导航条或选项卡可以直接使用nav标签等等。


 块级化a标签
*/

/*
如何去除iOS和Android中的输入URL的控件条

setTimeout(scrollTo,0,0,0);

请注意，这句代码必须放在window.onload里才能够正常的工作，
且你的当前文档的内容高度必须是高于窗口的高度时，这句代码才能有效的执行。
*/

/*公共样式 结束*/


/*

            height: 100%;
            width: 100%;
            min-height: 100%;
            margin: 0;
            overflow-x: hidden;
            display: flex;
            justify-content: center;
            align-items: center;

*/
/*
安卓下的浏览器，目前主流的最新浏览器（比如chrome，还有很多国产的像qq，uc）的viewport也是980px了。
*/