body{ font-size: 14px; font-family: '微软雅黑'; color: #2b2b2b; }
img{ max-width: 100%; vertical-align: middle;}
a{ color: #2b2b2b; text-decoration:none;}
/* 字体 */
.fb{ font-weight: bold !important;}
.fn{ font-weight: normal !important;}
.f12{ font-size: 12px;}
.f14{ font-size: 14px;}
.f16{ font-size: 16px;}
.f18{ font-size: 18px;}
.f20{ font-size: 20px;}
.red{ color: #ff4848;}
.text-center{ text-align: center !important;}
.text-left{ text-align: left !important;}
.text-right{ text-align: right !important;}
/* 浮动 */
.fl{ float:left; }
.fr{ float:right; }
.clearfix:before,.clearfix:after { content: " "; display: table; }
.clearfix:after { clear: both; }
.clearfix { *zoom: 1; }
/* 外边框 */
.mar0{ margin:0 !important;}
.mart0{ margin-top:0 !important;}
.mart5{ margin-top:5px !important;}
.mart10{ margin-top:10px !important;}
.mart15{ margin-top:15px !important;}
.mart20{ margin-top:20px !important;}
.marl0{ margin-left:0 !important;}
.marl5{ margin-left:5px !important;}
.marl10{ margin-left:10px !important;}
.marl15{ margin-left:15px !important;}
.marl20{ margin-left:20px !important;}
.marr0{ margin-right:0 !important;}
.marr5{ margin-right:5px !important;}
.marr10{ margin-right:10px !important;}
.marr15{ margin-right:15px !important;}
.marr20{ margin-right:20px !important;}
.marb0{ margin-bottom:0 !important;}
.marb5{ margin-bottom:5px !important;}
.marb10{ margin-bottom:10px !important;}
.marb15{ margin-bottom:15px !important;}
.marb20{ margin-bottom:20px !important;}
/* 图标 */
.icon{ position: relative; top:2px; display: inline-block; width:14px; height: 14px; margin-right: 5px; background-repeat: no-repeat; background-position: center;}
.icon-user{ background-image: url(../img/icon/icon-user.png); }
.icon-ask{ background-image: url(../img/icon/icon-ask.png); }
.icon-phone{ background-image: url(../img/icon/icon-phone.png); }
.icon-join{ background-image: url(../img/icon/icon-join.png); }
.icon-code{ background-image: url(../img/icon/icon-code.png); }
.icon-call{ background-image: url(../img/icon/icon-call.png); }
.icon-ltri{ background-image: url(../img/icon/icon-ltri.png); }
.icon-rtri{ background-image: url(../img/icon/icon-rtri.png); }
.icon-ltrih{ background-image: url(../img/icon/icon-ltrih.png); }
.icon-rtrih{ background-image: url(../img/icon/icon-rtrih.png); }
.icon-star{ background-image: url(../img/icon/icon-star.png); }
.icon-starh{ background-image: url(../img/icon/icon-starh.png); }
.icon-zan{ background-image: url(../img/icon/icon-zan.png); }
.icon-zanh{ background-image: url(../img/icon/icon-zanh.png); }
.icon-wechat{ background-image: url(../img/icon/icon-wechat.png); }
.icon-alipay{ background-image: url(../img/icon/icon-alipay.png); }
.icon-trial{ background-image: url(../img/icon/icon-trial.png); }
.icon-android{ background-image: url(../img/icon/icon-android.png);}
.icon-iPhone{ background-image: url(../img/icon/icon-iPhone.png); }
.icon-ok{ background-image: url(../img/icon/icon-ok.png);}
.icon-checkbox{ border:1px solid #b7b7b7; border-radius: 2px;}

/* 按钮 */
.btn{ border:0; text-align: center; background-color: #dadada;}
.btn-radius{ border-radius: 100px; }
.btn-import{ color:#fff; background-color: #4884ff;}
.btn-dark{ color:#fff; background-color: #356fe7;}
.btn-black{ color:#fff; background-color: #2b2b2b;}


/* 容器 */
.wrapper{ width:1200px; margin:0 auto;}

/* 头部 */
.header-top{ height: 40px; line-height: 40px; color: #ababab; background-color: #2b2b2b;}
.header-top-nav li{ float:left;}
.header-top-nav li a{ display: block; color: #ababab; padding:0 12px;}
.header-top-nav li a:hover{ background-color: #444444;}
.header-top-code{ position: relative;}
.header-top-code .code{ display: none; position: absolute; right: 0; top:40px; z-index: 99;}
.header-top-code:hover .code{ display: block;}

.header-bottom{ height: 65px; padding-top:23px; border-bottom:2px solid #e4e4e4;}
.header-bottom .logo{ width:290px;}
.header-bottom .btn{ display: block; width:150px; height: 40px; line-height: 40px;}
.header-bottom-nav li{ float:left; margin-right: 60px;}
.header-bottom-nav li a{ position: relative; font-size: 16px; height: 40px; line-height: 40px;}
.header-bottom-nav li a:hover{ color: #4884ff; }
.header-bottom-nav li a:hover::after{ position: absolute; left: 0; top:54px; content: ' '; width:100%; height: 4px; background-color: #4884ff;}

/* 主体 */
.main{ padding:20px 0;}

/* 分类导航 */
.main-menu{ width:270px; min-height: 510px; background-color: #356fe7;}
.main-menu-list{ padding:20px 10px; border-bottom:1px solid #6598ff;}
.main-menu-list:hover{ background-color: #4884ff;}
.main-menu-list h3{ padding:10px 0; font-size: 16px; color: #fff; font-weight: bold;}
.main-menu-list li{ float: left; margin-right: 10px; height: 30px; line-height: 30px;}
.main-menu-list li:last-child{ margin:0;}
.main-menu-list li a{ color: #fff;}

/* 底部 */
.footer-top{ height: 130px; padding-top:20px; color: #ababab; background-color: #2b2b2b;}
.footer-code-list{ padding-left: 20px;}
.footer-code-list .img{ text-align: center;}
.footer-code-list .title{ height: 30px; line-height: 30px; text-align: center;}
.footer-top-contact{ line-height: 30px;}
.footer-top-contact .icon-call{ top:5px; width:32px; height: 32px;}
.footer-top-contact .phone{ padding-bottom:5px; font-size: 24px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; line-height: 32px; color: #ffffff; }

.footer-bottom{ height: 50px; line-height: 50px;}
.footer-bottom-nav{ margin-top:18px;}
.footer-bottom-nav li{ float: left; height: 14px; line-height: 14px; padding:0 20px; border-right:1px solid #666666;}
.footer-bottom-nav li:last-child{ border:0;}
.footer-bottom-nav li a{ color: #666;}

/* 修改layer样式 */
.layui-layer-btn .layui-layer-btn0{ border-color:#4884ff !important; background-color: #4884ff !important;}

/* 分页 */
.page{ text-align: center; font-size: 12px;}
.page span,.page a{ display: inline-block; border:1px solid #d3d3d4; padding:8px 12px; border-radius: 4px; margin:0 4px;}
.page a:hover{ color: #fff; border:1px solid #4884ff; background-color: #4884ff;}
.page span.current{ color: #fff; border:1px solid #4884ff; background-color:#4884ff;}
.page .next,.page .prev{ padding:8px 20px;}

/* 评分星星 */
.star-box i{top:0; margin:0; width:10px; height: 10px;}

/* 表格 */
.table-box .table{ width:100%;}
.table-box .table td{ border:1px solid #e4e4e4;}
.table-box .table thead tr td{ color: #ffffff; height: 32px; text-align: center; vertical-align: middle; border:1px solid #256cff; background-color: #4884ff;}
.table-box .table thead tr td:first-child{ border-radius: 4px 0 0 0;}
.table-box .table tbody tr td{ height: 38px; text-align: center; vertical-align: middle; }
.table-box .table tbody tr:nth-child(odd) td{ background-color: #f5f5f5;}
.table-box .table a{ color: #4884ff;}

.table-img-box{ text-align: left; padding:10px;}
.table-img-box .img,.table-img-box .img img{ width:60px; height: 60px;}
.table-img-box .title{ width:140px; padding:20px 0 0 20px;}


/* 文本框 */
.input-text{ height: 35px; line-height: 35px; padding:5px; box-sizing: border-box; border-radius: 4px; border:1px solid #b7b7b7;}
.input-select{ height: 35px; line-height: 35px; padding:5px; box-sizing: border-box; border-radius: 4px; border:1px solid #b7b7b7;}
.textarea{ padding:5px; box-sizing: border-box; border-radius: 4px; border:1px solid #b7b7b7;}
.file-box{ position: relative; width:100%; height: 100%; overflow: hidden;}
.file-box .input-file{ position: absolute; top:0; left: 0; width:100%; height: 100%; opacity: 0; cursor: pointer;}