/* ----------------------------------

Main CSS file for BinzhouW
(C) binzhouw Inc.
http://www.binzhouw.com
Created & Modified by HowieRen.
date 2016-10-01 09:59:23;

----------------------------------

结构目录：
    1. 重定义浏览器默认样式
    2. 全局常用 CSS 样式
    3. 表单及表单元素
    4. 页面布局以及通用的区块样式
    5. 列表样式
    6. 其他特定功能块
    7. 拖拽及页面 DIY

    *  其他页面专用样式参见 页面样式.css

----------------------------------

CSS 样式模块的格式示例：

    Name:           模块名称
    Level:          级别（Global, Channel, Function）
    Dependent:      依赖关系，该模块必须依赖于何种模块
    Sample:         用法示例，或指出改模块所作用的直接页面
    Explain:        附加说明
    Author:         创建者 日期(两位数年月日时)
    Last Modify:    最终修改者 日期(两位数年月日时)

----------------------------------

CSS 写作注意事项：
    1. 属性写在一行内，属性之间、属性名和值之间以及属性与“{}”之间须有空格，例如：.class { width: 400px; height: 300px; }
    2. 属性的书写顺序：
        2.1. 按照元素模型由外及内，由整体到细节书写，大致分为五组：
            位置：position,left,right,float
            盒模型属性：display,margin,padding,width,height
            边框与背景：border,background
            段落与文本：line-height,text-indent,font,color,text-decoration,...
            其他属性：overflow,cursor,visibility,...
        2.2. 针对特殊浏览器的属性，应写在标准属性之前，例如：-webkit-box-shadow:; -moz-box-shadow:; box-shaow:;
    3. 谨慎添加新的选择符规则，尤其不可滥用 id，尽可能继承和复用已有样式
    4. 选择符、属性、值均用小写（格式的颜色值除外），缩写的选择符名称须说明缩写前的全称，例如 .cl -> Clearfix
    5. 避免使用各种 CSS Hack，如需对 IE 进行特殊定义，请参阅下节“关于 CSS Hack 的说明”
    6. 勿使用冗余低效的 CSS 写法，例如：
        ul li a span { ... }
    7. 慎用 !important
    8. 建议使用在 class/id 名称中的词语
        6.1. 表示状态：a->active
        6.2. 表示结构：h->header,c->content,f->footer
        6.3. 表示区域：mn->main,sd->side,nv-navigation,mu->menu
        6.4. 表示样式：l-list,tab,p_pop
    9. 开发过程中的未定事项，须用 [!] 标出，以便于后续讨论整理

---------------------------------- */

/*
    Name:         mod_reset
    Level:          Global
    Explain:        重定义浏览器默认样式
    Last Modify:    HowieRen 2016-09-03 16:28:44;
*/
html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100% }
body { margin: 0 }
article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block }
audio, canvas, progress, video { display: inline-block }
audio:not([controls]) { display: none; height: 0 }
progress { vertical-align: baseline }
[hidden], template { display: none }
a { background-color: transparent; -webkit-text-decoration-skip: objects }
a:active, a:hover { outline-width: 0 }
abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted }
b, strong { font-weight: inherit }
b, strong { font-weight: bolder }
dfn { font-style: italic }
h1 { font-size: 2em; margin: .67em 0 }
mark { background-color: #ff0; color: #000 }
small { font-size: 80% }
sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline }
sub { bottom: -.25em }
sup { top: -.5em }
img { border-style: none }
svg:not(:root) { overflow: hidden }
code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em }
figure { margin: 1em 40px }
hr { box-sizing: content-box; height: 0; overflow: visible }
button, input, select, textarea { font: inherit; margin: 0 }
optgroup { font-weight: 700 }
button, input { overflow: visible }
button, select { text-transform: none }
[type=reset], [type=submit], button, html [type=button] { -webkit-appearance: button }
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner { border-style: none; padding: 0 }
[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring { outline: 1px dotted ButtonText }
fieldset { border: 1px solid silver; margin: 0 2px; padding: .35em .625em .75em }
legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal }
textarea { overflow: auto }
[type=checkbox], [type=radio] { box-sizing: border-box; padding: 0 }
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto }
[type=search] { -webkit-appearance: textfield; outline-offset: -2px }
[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration { -webkit-appearance: none }
::-webkit-input-placeholder { color: inherit; opacity: .54 }
::-webkit-file-upload-button { -webkit-appearance: button; font: inherit }
* { word-wrap: break-word; }
body, input, button, select, textarea { font-family: 'Microsoft YaHei', '微软雅黑', sans-serif, 'Segoe UI Emoji', 'Segoe UI Symbol'; color: #444; }
textarea { resize: none; }
body, ul, ol, li, dl, dd, p, h1, h2, h3, h4, h5, h6, form, fieldset, .pr, .pc { margin: 0; padding: 0; }
table { empty-cells: show; border-collapse: collapse; }
caption, th { text-align: left; font-weight: 400; }
ul li, .xl li { list-style: none; }
h1, h2, h3, h4, h5, h6 { font-size: 1em; }
em, cite, i { font-style: normal; }
a { color: #444; text-decoration: none; }
a:hover { text-decoration: none; }
a img { border: none; }
label { cursor: pointer; }
.container { margin: 0 .3rem; }

/*
    Name:           color
    Level:          Global
    Sample:         class="crw"
    Explain:        灰度等级样式库
    Last Modify:    HowieRen 2016-09-03 16:28:44;
*/
.crw { color: white; }
.cr3 { color: #333; }
.cr6 { color: #666; }
.cr9 { color: #999; }
.hht a:hover { color: #ef2d36; }
nav.home-nav>a.on, footer>div>a.on, nav.find-nav>a.on, .cr { color: #FF3A3A; }

/*
    Name:           background
    Level:          Global
    Sample:         class="bdw"
    Explain:        背景预设样式库
    Last Modify:    HowieRen 2016-09-30 20:03:28;
*/
.bdw { background-color: white; }
.index-model>.hd>h3:before, .bdc { background-color: #FF3A3A; }

/*
    Name:           font-size
    Level:          Global
    Sample:         class="fs2"
    Explain:        字号等级样式
    Last Modify:    HowieRen 2016-09-03 16:28:44;
*/
.fs1 { font-size: 12px; }
.fs2 { font-size: .24rem; }
.fs3 { font-size: .36rem; }
.fs4 { font-size: 18px; }
.fwn { font-weight: normal; }

/*
    Name:          text-align
    Level:          Global
    Sample:         class="tac"
    Explain:        对齐样式
    Last Modify:    HowieRen 2016-09-03 16:28:44;
*/
.tac { text-align: center; }
.tal { text-align: left; }
.tar { text-align: right; }

/*
    Name:           mod_float
    Level:          Global
    Sample:         class="z/y"
    Explain:        .z/.y 浮动 left/right
    Last Modify:    HowieRen 2016-09-03 16:28:44;
*/
.z { float: left; }
.y { float: right; }

/*
    Name:           mod_clearfix
    Level:          Global
    Sample:         class="cl"
    Explain:        Clearfix,避免因子元素浮动而导致的父元素高度缺失能问题
    Last Modify:    HowieRen 2016-09-03 16:28:44;
*/

/
    Name:           mod_clearfix
    Level:          Global
    Last Modify:    Baiyun 2016-09-24 10:24;
*/

input:focus { border: solid 1px #ef2d36; }
.cl:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
.cl { zoom: 1; }
.dyb { display: block; }
.dyib { display: inline-block; }
.none { display: none; }

/*
    Name:           margin
    Level:          Global
    Sample:         class="mtn"
    Explain:        边距公共样式
    Last Modify:    HowieRen 2016-09-03 16:28:44;
*/
.mtn { margin-top: .1rem; }
.mtm { margin-top: .2rem; }
.mtw { margin-top: .3rem; }
.mrn { margin-right: .1rem; }
.mrm { margin-right: .2rem; }
.mrw { margin-right: .3rem; }
.mbn { margin-bottom: .1rem; }
.mbm { margin-bottom: .2rem; }
.mbw { margin-bottom: .3rem; }
.mln { margin-left: .1rem; }
.mlm { margin-left: .2rem; }
.mlw { margin-left: .3rem; }

/*
    Name:           padding
    Level:          Global
    Sample:         class="ptn"
    Explain:        边距公共样式
    Last Modify:    HowieRen 2016-09-03 16:28:44;
*/
.ptn { padding-top: .1rem; }
.ptm { padding-top: .2rem; }
.ptw { padding-top: .3rem; }
.prn { padding-right: .1rem; }
.prm { padding-right: .2rem; }
.prw { padding-right: .3rem; }
.pbn { padding-bottom: .1rem; }
.pbm { padding-bottom: .2rem; }
.pbw { padding-bottom: .3rem; }
.pln { padding-left: .1rem; }
.plm { padding-left: .2rem; }
.plw { padding-left: .3rem; }

/*
    元素获取焦点时隐藏外边框
*/
.hidefocus { outline: none; }

/*  midea query  */
html { background: #f8f8f8; font-size: 100px; }

/* iphone 4/5 */
@media (min-width:320px) {
    html { font-size: 42.666666666666px; }
}

/* iphone 6 */
@media (min-width:375px) {
    html { font-size: 49.999999999999px; }
}

/* iphone 6p */
@media (min-width:411px) {
    html { font-size: 55.199999999999px; }
}

/* ipad */
@media (min-width:750px) {
    html { font-size: 100px; }
}

/* ipad */
@media (min-width:768px) {
    html { font-size: 102.4px; }
}
html, body { position: relative; min-height: 100%; }
body { height: 100%; font-size: .2rem; color: #444; margin: 0 auto; background: #f8f8f8; }
img { display: block; max-width: 100%; }
.slidemax .swiper-pagination-bullet-active, .bd-1 { background-color: #FE3A3B; }
.cr-1 { color: #FE3A3B; }
.ico-auth { display: block; background: url('http://www.binzhouw.com/static/index/images/vip.png') center center no-repeat; }
.tsn { transition: 1s; -webkit-transition: 1s; -ms-transition: 1s; -o-transition: 1s; }

/* ########### view page ########### */
article.view>.head { border-bottom: 2px #f2f2f2 solid; }
article.view h1 { line-height: 1.5em; }
.countent { line-height: 1.7em; font-size: .34rem; }
.countent img { margin: 0 auto; max-width: 100%; }
.countent p { text-indent: 2em; padding: .1rem 0; }
.reward { width: 1.6rem; height: 1.6rem; margin: 0 auto; border-radius: 50%; overflow: hidden; background-color: #FF9933; line-height: 1.6rem; font-size: .6rem; }
.tags>a { display: inline-block; height: .44rem; font-size: .2rem; line-height: .44rem; padding: 0 .3rem; background-color: #E1E1E1; color: #666; }
.related { background-color: #e1e1e1; }
.related>ul>li { height: .88rem; line-height: .88rem; border-bottom: 1px white solid; }
.related>ul>li>a { font-size: .28rem; }

/* comments */
.comments>.container>.item { padding: .2rem 0; border-bottom: 2px #f2f2f2 solid; }
.comments>.container>.item>.avat { width: .44rem; }
.comments>.container>.item>.avat>a>img { width: .44rem; height: .44rem; border-radius: 50%; }
.comments>.container>.item>.info { margin-left: .64rem; }
.comments>.container>.item>.info>.uname>a { font-size: .3rem; }
.comments>.container>.item>.info>.comment { font-size: .28rem; line-height: 1.5em; }

/* view-footer */
.view-footer { position: fixed; bottom: 0; left: 0; width: 100%; height: .98rem; background-color: #f1f1f1; border-top: 1px #d1d1d1 solid; }
.view-footer>.container { }
.view-footer>.container>div { width: 50%; }
.view-footer>.container>div.input>input { width: 100%; height: .5rem; margin-top: .23rem; border: 1px #aaa solid; text-indent: .2rem; border-radius: .25rem; }
.view-footer>.container>div.addon { display: -webkit-box; display: -moz-box; display: box; }
.view-footer>.container>div.addon>div { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; }
.view-footer>.container>div.addon>div>a { display: block; line-height: .98rem; }
.view-footer>.container>div.addon>div>a>i { font-size: .4rem; }

/* ########### login page ########### */
.loign-box { position: fixed; width: 100%; height: 100%; }
.loign-box>header>.l>.ico-close { width: 100%; height: 100%; background: url('./imgs/ico_close.png') left center no-repeat; background-size: .32rem; }
.login-logo { width: 3.2rem; margin: 0 auto; }
.login-logo>img { width: 3.2rem; }
.from { border: 1px #ccc solid; border-bottom: none; }
.from>li { position: relative; line-height: .98rem; border-bottom: 1px #ccc solid; }
.from>li>label { width: 10%; height: .98rem; }
.from>li>label.ico-phone { background: url('./imgs/ico_phone.png') center center no-repeat; background-size: .22rem; }
.from>li>label.ico-lock { background: url('./imgs/ico_lock.png') center center no-repeat; background-size: .26rem; }
.from>li>input { width: 90%; height: .97rem; line-height: .97rem; padding: 0; border: 0; font-size: .3rem; text-indent: .2rem; }
.from>li>.get-code { position: absolute; top: 0; right: 0; width: 2.2rem; height: .97rem; background: white; border-left: 1px #ccc solid; }
.btn-login { display: block; width: 100%; height: .9rem; margin-top: .4rem; font-size: .34rem; border-radius: .05rem; border: 0; }
.btn-login[disabled=disabled].bdc { background-color: #eeeeee; color: #666; }
.btn-login[disabled=disabled].bdc:after { content: ' 中...'; }
.open-login { position: absolute; bottom: 0; width: 100%; }
.open-login>h3 { position: relative; height: 1.2rem; line-height: 1.2rem; }
.open-login>h3:before { content: ''; position: absolute; top: 50%; margin-top: -.01rem; left: 50%; margin-left: -3.2rem; width: 2.3rem; height: .02rem; background-color: #f2f2f2; }
.open-login>h3:after { content: ''; position: absolute; top: 50%; margin-top: -.01rem; right: 50%; margin-right: -3.2rem; width: 2.3rem; height: .02rem; background-color: #f2f2f2; }
.open-login>.open-type { display: -webkit-box; display: -moz-box; display: box; }
.open-login>.open-type>div { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; }
.open-login>.open-type>div>a { position: relative; display: block; width: .96rem; height: .6rem; line-height: .6rem; padding-top: 1rem; margin: 0 auto; }
.open-login>.open-type>div>a:before { content: ''; position: absolute; width: 1rem; height: 1rem; top: 0; left: 0; border-radius: 50%; background-color: #1EA838; background-image: url('./imgs/ico_wechat.png'); background-position: center center; background-repeat: no-repeat; background-size: .55rem; }
.open-login>.open-type>div>a.weibo:before { background-color: #FF5C5C; background-image: url('./imgs/ico_weibo.png'); }
.open-login>.open-type>div>a.qq:before { background-color: #3299DC; background-image: url('./imgs/ico_qq.png'); }
.checkbox { width: .22rem; height: .22rem; }

/* ########### home page ########### */
button.follow { width: .9rem; height: .44rem; margin-top: .22rem; border-radius: .22rem; border: 0; }
.home-top { position: relative; width: 100%; height: 4rem; overflow-y: hidden; }
.home-top>.bg { position: absolute; top: 0; left: 0; width: 100%; height: 4rem; background-repeat: no-repeat; background-position: center -100px; -webkit-background-size: 100%; -moz-background-size: 100%; background-size: 100%; -webkit-filter: blur(50px); -moz-filter: blur(50px); filter: blur(50px); z-index: 1; }
.home-top>.user-head { position: absolute; top: 50%; margin-top: -1.4rem; left: 0; z-index: 2; width: 100%; }
.home-top>.user-head>.avat { position: relative; width: 2rem; height: 2rem; margin: 0 auto; }
.home-top>.user-head>.avat>img { width: 100%; height: 100%; border-radius: 50%; border: .05rem rgba(255, 255, 255, .9) solid; }
.home-top>.user-head>.avat>.ico-auth { display: inline-block; width: .4rem; height: .4rem; background-size: .4rem; position: absolute; top: 0; right: 0; }
.home-top>.user-head>.auth-info { width: 80%; margin: .2rem auto; line-height: .4rem; font-size: .3rem; text-shadow: 1px 1px 1px rgba(0, 0, 0, 1) }

/* home nav */
nav.home-nav { width: 100%; height: .8rem; line-height: .8rem; border-bottom: .05rem #f2f2f2 solid; white-space: nowrap; overflow-y: hidden; }
nav.home-nav>a { display: inline-block; padding: 0 .3rem; color: #999; font-size: .3rem; }
.notopic { height: 8.2rem; line-height: 7rem; background: url('./imgs/ico_care.png') center center no-repeat; background-size: 1.4rem; }

/* ########### find page ########### */
header>.l, header>.r { position: absolute; top: 0; min-width: 15%; height: 100%; }
header>.l { left: 0; }
/*.ico-left { display: block; height: 100%; background: url('./imgs/ico_left.png') left center no-repeat; background-size: .35rem; }*/
.ico-left>i{font-size: .6rem;color: #fff;display: block;padding: .15rem 0 0 .15rem;}
header>h2 { display: block; height: 100%; line-height: .88rem; }
header>.r { right: 0; }

/* find nav  */
nav.find-nav { width: 100%; height: .79rem; overflow-y: hidden; white-space: nowrap; border-bottom: 4px #f2f2f2 solid; }
nav.find-nav>a { display: inline-block; height: .79rem; line-height: .79rem; font-size: .3rem; color: #666; padding: 0 .3rem; }

/* find list */
.producers, .find-list>.item { position: relative; height: 1.2rem; padding: .2rem .3rem; border-top: 2px #f2f2f2 solid; }
.find-list>.item:nth-child(1) { border-top: 0; }
.producers>.l, .find-list>.item>.l { position: absolute; top: .2rem; left: .3rem; width: 1.2rem; height: 1.2rem; border-radius: .6rem; overflow: hidden; }
.producers>.l>img, .find-list>.item>.l>img { width: 100%; height: 100%; }
.producers>.c, .find-list>.item>.c { height: 1.2rem; margin: 0 1.4rem; overflow: hidden; }
.producers>.c>.tit, .find-list>.item>.c>.tit { font-size: .3rem; margin-top: .05rem; }
.producers>.c>p, .find-list>.item>.c>p { font-size: .26rem; line-height: 1.5em; }
.producers>.c>.tit>.ico-auth, .find-list>.item>.c>.tit>.ico-auth { display: inline-block; width: .24rem; height: .24rem; background-size: .24rem; }
.producers>.r, .find-list>.item>.r { position: absolute; top: 50%; right: .3rem; margin-top: -.28rem; }
.producers>.r>.btn-sm, .find-list>.item>.r>.btn-sm { width: 1.2rem; height: .56rem; border: 1px #3B9DF4 solid; background-color: #3B9DF4; color: white; border-radius: 2px; font-size: .24rem; }
.producers>.r>.btn-sm.on, .find-list>.item>.r>.btn-sm.on { background-color: white; color: #3B9DF4; }

/* more page */
.empty-bottom { background: #f8f8f8; }
.empty-bottom>.more { width: 100%; height: 1rem; line-height: 1rem; border-top: 1px #f2f2f2 solid; }

/* ######### index page ######### */

/* header */
header { position: relative; height: .88rem; background: #FF3A3A; border-top: .02rem #d21010 solid; }
a.logo-index { display: inline-block; height: .5rem; margin-top: .19rem; }
a.logo-index>img { max-height: .5rem; }
header>div.r { position: absolute; height: .44rem;text-align: center; }
header>div.r>.find { display: inline-block; background: rgba(255, 255, 255, .94); width: 1rem; height: .5rem; border-radius: .25rem; line-height: .54rem; color: #FF3A3A; font-size: .28rem; }
header>div.r>.user-bar>img { width: .5rem; height: .5rem; border-radius: 100%; }

/* index nav */
.nav-index { padding: .1rem; }
.nav-index>ul { position: relative; height: 1.4rem; overflow: hidden; }
body.indexnavshow .nav-index>ul { height: auto; }
.nav-index>ul>li { float: left; width: 20%; border-radius: 2px; }
.nav-index>ul>li:last-child { position: absolute; right: 0; bottom: 0; }
body.indexnavshow .nav-index>ul>li:last-child { -moz-transform: scaleY(-1); -webkit-transform: scaleY(-1); -o-transform: scaleY(-1); transform: scaleY(-1); filter: FlipV; }
.nav-index>ul>li>a { display: block; line-height: .6rem; margin: .05rem; font-size: .28rem; color: #666; background-color: #fefefe; }
.nav-index .more>.fa { font-size: .4rem; }

/* slide */
/*.slidemax>.swiper-container { height: 4.4rem; }*/
.slidemax .swiper-pagination-bullet { width: .2rem; height: .02rem; border-radius: 0; }
.slidemax span.tit { position: absolute; width: 100%; bottom: 0; left: 0; background-color: rgba(0, 0, 0, .3); color: white; font-size: .34rem; padding: .1rem; }
.slidemax .swiper-slide{height: 200px;}
.slidemax .swiper-slide img { width: 100%;min-height: 100%;}
.water { position: absolute; left: 0; bottom: -10px; height: 30px; width: 100%; z-index: 1; }
.water-c { position: relative; }
.water-1, .water-2 { position: absolute; width: 100%; height: 30px; }
.water-1 { background: url(./imgs/water-1.svg) repeat-x; background-size: 600px; -webkit-animation: wave-animation-1 3.5s infinite linear; animation: wave-animation-1 3.5s infinite linear; }
.water-2 { display: block; top: 5px; background: url(./imgs/water-2.svg) repeat-x; background-size: 600px; -webkit-animation: wave-animation-2 6s infinite linear; animation: wave-animation-2 6s infinite linear; }

/* roll */
.news { height: .9rem; overflow: hidden; }
.news>h4 { height: .9rem; line-height: .9rem; font-size: .34rem; }
.roll .swiper-container { position: relative; height: .4rem; margin-top: .25rem; }
.roll .swiper-container a { font-size: .3rem; }
.roll .swiper-container:after { position: absolute; content: ''; top: 0; right: 0; width: .2rem; height: 100%; background: -webkit-linear-gradient(left, rgba(255, 255, 255, .4), rgba(255, 255, 255, 1)); background: -moz-linear-gradient(left, rgba(255, 255, 255, .4), rgba(255, 255, 255, 1)); background: linear-gradient(left, rgba(255, 255, 255, .4), rgba(255, 255, 255, 1)); z-index: 3; }
.roll .swiper-wrapper { white-space: nowrap; }
.roll .swiper-slide { height: .4rem; line-height: .4rem; }

/* index module */
.index-model>.hd { height: .9rem; line-height: .9rem; border-bottom: 1px #f0f0f0 solid; }
.index-model>.hd>h3 { position: relative; font-size: .32rem; }
.index-model>.hd>h3:before { content: ''; position: absolute; top: 50%; margin-top: -.15rem; left: 0; width: .05rem; height: .3rem; }
.index-model>.hd>.focus { margin-top: .4rem; }
.index-model>.hd>.focus>span { float: left; margin-left: .12rem; width: .12rem; height: .12rem; background-color: #eee; border: 1px solid #ff3a3a; overflow: hidden; }
.index-model>.hd>.focus>span.swiper-pagination-bullet-active { background: #ff3a3a; }
.index-model>.hd>.nav>a { display: block; float: left; margin-left: .2rem; font-size: .28rem; }
.index-model>.hd>.nav>a.on { color: #ff3a3a; }

/*.index-model>.bd{ overflow:hidden; }*/
.index-model>.bd>.swiper-container>.swiper-wrapper { width: 99rem; }
.index-model>.bd .screen { padding: 0 .01rem; }

/* article list item */
.photo-list-item, .article-list-item { padding: .2rem 0; border-top: 1px #f0f0f0 solid; }
.photo-list-item:nth-child(1), .article-list-item:nth-child(1) { border: none; }
.article-list-item>a>.z { width: 2.4rem; height: 1.6rem; overflow: hidden; }
.article-list-item>a>.z>img { width: 100%; border-radius: 2px; }
.article-list-item .info { min-height: 1.6rem; }
.article-list-item .info>.attr { height: .4rem; line-height: .4rem; }
.article-list-item .info>.tit { min-height: 1.2rem; font-size: .3rem; line-height: 1.5em; }
.article-list-item .img { width: 2.4rem; height: 1.6rem; overflow: hidden; }
.article-list-item .img>img { width: 100%; height: 100%; }
.article-list-item .video { position: relative; width: 2.4rem; height: 1.6rem; overflow: hidden; }
.article-list-item .video>img { width: 100%; height: 100%; }

/* photo list item */
.photo-list-item>a>.tit { font-size: .3rem; }
.photo-list-item>a>.photo>img { display: block; float: left; width: 32%; margin-left: 2%; }
.photo-list-item>a>.photo>img:nth-child(1) { margin-left: 0; }
.bd-imgs { width: 100%; white-space: nowrap; overflow-y: hidden; }
.bd-imgs>a { display: inline-block; margin-left: .1rem; width: 3rem; overflow: hidden; white-space: nowrap; }
.bd-imgs>a>img { width: 3rem; height: 2rem; border-radius: 2px; }
.bd-imgs>a:nth-child(1) { margin-left: 0; }
.bd-imgs>a>.tit { line-height: .6rem; font-size: .3rem; }
.bd-videos>a { display: inline-block; width: 49%; float: left; margin-left: 2%; margin-bottom: .1rem; }
.bd-videos>a:nth-child(odd) { margin-left: 0; }
.bd-videos>a>.img { position: relative; width: 100%; height: 2.3rem; }
.article-list-item .video:before, .bd-videos>a>.img:before { content: ''; position: absolute; width: .8rem; height: .8rem; top: 50%; left: 50%; margin-top: -.4rem; margin-left: -.4rem; background: url('./imgs/ico_play.png') center center no-repeat; background-size: .8rem; }
.bd-videos>a>.img>img { width: 100%; height: 100%; border-radius: 2px; }
.bd-videos>a>.tit { height: .6rem; line-height: .6rem; font-size: .3rem; overflow: hidden; }

/* index -users  */
.bd-users>.item { width: 25%; float: left; }
.bd-users>.item .avat { position: relative; width: 1.2rem; height: 1.2rem; margin: 0 auto; }
.bd-users>.item .avat>img { width: 1.2rem; height: 1.2rem; border-radius: 100%; }
.bd-users>.item .avat>i.ico-auth { position: absolute; display: block; width: .3rem; height: .3rem; top: 0; right: 0; background-size: .3rem; }
.bd-users>.item .uname { height: .7rem; line-height: .6rem; }

/* footer */
.empty-bottom { width: 100%; margin-bottom: .9rem; }
footer { position: fixed; bottom: 0; z-index: 9; display: -webkit-box; display: -moz-box; display: box; width: 100%; border-top: 1px #f6f6f6 solid; }
footer>div { -webkit-box-flex: 1; -moz-box-flex: 1; box-flex: 1; height: .9rem; background: rgba(254, 254, 254, .97); }
footer>div>a { display: block; font-size: .3rem; line-height: .9rem; }
footer>div>a.on { color: #ff3a3a; }

/* about */
.about { line-height: 1.7em; }

/* addon top */
.addon-getop { position: fixed; right: .2rem; bottom: 1.4rem; width: .8rem; height: .8rem; background-color: rgba(255, 255, 255, .7); border-radius: 100%; border: .04rem #999 solid; text-align: center; line-height: .8rem; font-size: .5rem; }
.addon-getop>.fa { display: block; line-height: .8rem; color: #999; }

/* app add */
.app-ad { display: none; position: fixed; z-index: 99; top: 0; left: 0; width: 100%; height: 1.1rem; background-color: rgba(0, 0, 0, .5); }
.app-ad>div { position: relative; margin-left: 1.2rem; padding: .14rem; }
.app-ad>div:before { content: ''; position: absolute; top: .1rem; left: -1rem; width: .9rem; height: .9rem; background: url('./imgs/logo_app.png') center center no-repeat; background-size: .9rem; }
.app-ad>div>span { display: block; margin-top: .05rem; font-size: .3rem; }
.app-ad>div>p { font-size: .24rem; margin-top: .1rem; }

/* 动画预制 */

/* msg style */

body .layui-m-layer .layui-m-layer-msg.msg-success { background-color: #5CB85C; }
body .layui-m-layer .layui-m-layer-msg.msg-warning { background-color: #F0AD4E; }
body .layui-m-layer .layui-m-layer-msg.msg-error { background-color: #EF313D; }

/* 轮播底部云层效果 */
@-moz-keyframes wave-animation-1 {
    0% { background-position: 0 top; }
    100% { background-position: 600px top; }
}
@-moz-keyframes wave-animation-2 {
    0% { background-position: 0 top; }
    100% { background-position: 600px top; }
}
@-webkit-keyframes wave-animation-1 {
    0% { background-position: 0 top; }
    100% { background-position: 600px top; }
}
@-webkit-keyframes wave-animation-2 {
    0% { background-position: 0 top; }
    100% { background-position: 600px top; }
}
@-o-keyframes wave-animation-1 {
    0% { background-position: 0 top; }
    100% { background-position: 600px top; }
}
@-o-keyframes wave-animation-2 {
    0% { background-position: 0 top; }
    100% { background-position: 600px top; }
}
@-ms-keyframes wave-animation-1 {
    0% { background-position: 0 top; }
    100% { background-position: 600px top; }
}
@-ms-keyframes wave-animation-2 {
    0% { background-position: 0 top; }
    100% { background-position: 600px top; }
}
@keyframes wave-animation-1 {
    0% { background-position: 0 top; }
    100% { background-position: 600px top; }
}
@keyframes wave-animation-2 {
    0% { background-position: 0 top; }
    100% { background-position: 600px top; }
}

/* loading */
@-webkit-keyframes ball-beat {
    50% { opacity: 0.2; -webkit-transform: scale(0.75); transform: scale(0.75); }
    100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}
@keyframes ball-beat {
    50% { opacity: 0.2; -webkit-transform: scale(0.75); transform: scale(0.75); }
    100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); }
}
.ball-beat { text-align: center; height: 1rem; line-height: 1rem; }
.ball-beat > div { background-color: #999; width: 15px; height: 15px; border-radius: 100%; margin: 2px; -webkit-animation-fill-mode: both; animation-fill-mode: both; display: inline-block; -webkit-animation: ball-beat 0.7s 0s infinite linear; animation: ball-beat 0.7s 0s infinite linear; }
.ball-beat > div:nth-child(2n-1) { -webkit-animation-delay: 0.35s !important; animation-delay: 0.35s !important; }

.arti-con img {
    display: inline-block;
}