@charset "utf-8";
/* CSS Document */

/*通用样式*/
* {
	box-sizing:border-box;
	-moz-box-sizing:border-box; /* Firefox */
	-webkit-box-sizing:border-box; /* Safari */
}
html, body {background-color: #f4f6f8;}
div, form, img, ul, ol, li, dl, dt, dd, p, tr, td, body, strong, span, pre, input{margin: 0;padding: 0;border: 0;outline: none;}
h1, h2, h3, h4, h5, h6, p{margin: 0;padding: 0; }
img{border: 0px;}
ul, li{list-style: none;}
/*em, i{font-style: normal;}*/
th{ font-weight:normal;}
a{ text-decoration: none; color: #555; outline: none;transition: all 0.3s ease-in-out 0s;-webkit-transition: all 0.3s ease-in-out 0s;}
input{ font-family:Microsoft Yahei;}
button{ border:none; background-color: #fff; cursor: pointer;}
svg { width: 16px; height: 16px; }
textarea { resize: none !important; }
.fl{ float:left; }
.fr{ float:right;}
.clearfix:after{ height:0; line-height:0; font-size:0; display:block; visibility:hidden; clear:both; content:"."}
.clearfix{ *zoom:1}
.clear:after{ height:0; line-height:0; font-size:0; display:block; visibility:hidden; clear:both; content:"."}
.clear{ *zoom:1}
.tr { text-align: right; }
.tl { text-align: left; }
.tc { text-align: center; }
table, th, td { border: 1px solid #eee !important; }

.header, .search, .banner, .content, .footer {
	width: 1200px;
	margin: 0px auto;
}
/* common color */
.color8d {
	color: #8d8d8d;
}
/* common margin padding */
.mgb0 {
	margin-bottom: 0px;
}
.mgb8 {
	margin-bottom: 8px;
}
.mgb12 {
	margin-bottom: 12px;
}
.mgb16 {
	margin-bottom: 16px;
}
.mgb18 {
	margin-bottom: 18px;
}
.mgb24 {
	margin-bottom: 24px;
}
.mgb38 {
	margin-bottom: 38px;
}
.mgl22 {
	margin-left: 22px;
}
.mgr16 {
	margin-right: 16px;
}
.mgr24 {
	margin-right: 24px;
}
.mgt8 {
	margin-top: 8px !important;
}
.mgt16 {
	margin-top: 16px;
}
.mgt32 {
	margin-top: 32px !important;
}
.w100p {
	width: 100%;
}
.w190 {
	width: 190px !important;
}
.w290 {
	width: 290px;
}
.zindex0 {
	position: relative;
	z-index: 0;
}
.color045cc0 {
	color: #045cc0;
}
/* common btn */
.btn {
	padding: 0px 12px;
	border: none;
	height: 32px;
	line-height: 32px;
	text-align: center;
	border-radius: 4px;
	white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
}
.btn-big {
	height: 44px;
	line-height: 44px;
}
.btn-common {
	color:#fff !important;
	background-color: #1a94e9;
}
.btn-default {
	color: #1a94e9;
	background-color: #fff;
	border: 1px solid #1a94e9;
}
.btn-cancel {
	color: #fff;
	background-color: #999;
}
/* common head */
.head-bg {
	width: 100%;
	min-width: 1200px;
	height: 447px;
	border-bottom: 5px solid #b2c9e7;
	background-color: #ccc;
	background-image: url(../img/head-bg.png);
	background-size: 100% 447px;
	background-position: center;
	background-repeat: no-repeat;
}
.header {
	height: 62px;
}
.header .logo {
	margin-right: 54px;
	margin-top: 12px;
}
.header .logo img {
	width: 123px;
	height: 47px;
}
.header .nav {
	padding-top: 24px;
}
.header .nav li {
	float: left;
	margin: 0px 9px;
	line-height: 28px;
}
.header .nav li.active {
	border-bottom: 2px solid #1a94e9;
}
.header .nav li a {
	display: block;
	padding: 0px 3px;
	color: #8b8b8b;
}
.header .lar {
	position: relative;
	padding-top: 24px;
	padding-bottom: 32px;
  min-width: 30px;
  text-align: right;
}
.header .lar:hover > div {
	display: block;
}
.header .lar > a > svg {
	color: #7998b1;
}
.header-login {
	background-color: #fff;
	box-shadow: 2px 2px 4px #acacac;;
}
.login-menu {
	display: none;
	position: absolute;
	right: 0px;
	top: 62px;
	z-index: 99;
	padding-top: 10px;
	padding-bottom: 10px;
	width: 143px;
	height: 116px;
	background-color: #fff;
	border: 1px solid #e1e1e1;
	text-align: left;
}
.login-menu a {
	display: block;
	padding-left: 26px;
	height: 32px;
	line-height: 32px;
}
.login-menu a:hover {
	background-color: #f5f5f5;
}
.login-menu svg {
	position: relative;
	top: 3px;
}
/* common foot */
.foot {
	width: 100%;
	min-width: 1200px;
	height: 115px;
	border-top: 1px solid #cacbcc;
	background-color: #fff;
}
.footer {
	padding: 18px 0px;
}
.footer .logo {
	padding-top: 20px;
}
.footer .address {
	padding: 24px 0px 0px 18px;
	line-height: 1.6;
}
.footer .QR-code div {
	float: left;
	text-align: center;
}
.footer .QR-code img {
	width: 60px;
	height: 60px;
}
.footer .QR-code p {
	color: #6b6b6b;
}
/*.header .lar a {
	display: block;
	float: left;
	margin-left: 9px;
	padding: 0px 10px;
	height: 34px;
	line-height: 34px;
	border-radius: 4px;
}
.header .lar .login {
	color: #1a94e9;
	background-color: #fff;
	border: 1px solid #1a94e9;
}
.header .lar .register {
	color: #fff;
	background-color: #1a94e9;
}*/
/* TODO hover style*/

/* common search */
.search {
	height: 392px;
}
.search h1 {
	padding-top: 111px;
	text-align: center;
	font-size: 46px;
	color: #1a94e9;
	line-height: 1;
}

.search .search-input {
	position: relative;
	margin: 46px auto 26px;
	width: 820px;
	height: 44px;
	overflow: hidden;
}
.search .search-input input {
	position: relative;
	z-index: 98;
	padding: 0px 20px;
	width: 726px;
	height: 44px;
	border: 1px solid #c2d0da;
	border-radius: 6px;
}
.search .search-input a.search-a {
	position: absolute;
	z-index: 99;
	display: block;
	right: 108px;
	top: 15px;
	cursor: pointer;
}
.search .search-input a svg {
	color: #7998ad;
}
.search .search-input a.ask-a {
	position: absolute;
	right: 0px;
	top: 0px;
	padding: 0px 22px;
	background-color: #1a94e9;
	border: 1px solid #5daee7;
	border-radius: 4px;
	line-height: 42px;
	color: #fff;
	cursor: pointer;
}
.search .search-input input,
.search .search-input a {
	transition: all 0.3s;
	-webkit-transition: all 0.3s;
}
/*.search .search-input input:focus {
	width: 820px;
}
.search .search-input input:focus + a.search-a {
	right: 20px;
}
.search .search-input input:focus + a.search-a + a.ask-a {
	right: -80px;
}*/

.search .search-hot {
	text-align: center;
}
/* common position */

/* 当前位置 */
.current_position {
	position: relative;
	margin-bottom: 20px;
}
.current_position .location {
	line-height: 22px
}
.current_position .location i {
	margin-right: 4px;
	width: 20px;
	height: 20px;
}
.current_position .location i svg {
	color: #cdcdcd;
}

.current_position .sort a {
	float: left;
}
.current_position .sort a:not(:last-child) {
	margin-right: 22px;
}
.current_position .sort a.active {
	color: #649fe1;
}
.current_position .center-search {
	position: absolute;
  top: -9px;
  left: 50%;
  margin-left: -201px;
  width: 402px;
}
.current_position .center-search input {
	background-color: #f4f6f8;
}
.current_position .center-search input:focus {
	border-color: #62baf7 !important;
}
/* common search */
.sub-search {
	position: relative;
}
.sub-search input {
	padding: 0px 30px;
	width: 100%;
	height: 38px;
	border: 1px solid #d3d3d3;
	border-radius: 18px;
}
.sub-search input:focus {
	border-color: #62baf7 !important;
}
.sub-search a {
	position: absolute;
	display: block;
	width: 16px;
	height: 16px;
	right: 20px;
	top: 12px;
	cursor: pointer;
}
.sub-search a svg {
	color: #d1d1d1;
}
/* index banner */
.banner {
	margin-top: 28px;
    height: 450px;
}
.banner .broadcast,
.banner .static div {
	position: relative;
	overflow: hidden;
}
.banner .broadcast,
.banner .broadcast img {
	width: 800px;
	height: 450px;
}
.banner .static div,
.banner .static div img {
	width: 398px;
	height: 224px;
}
.banner .broadcast ul,
.banner .static div ul {
	position: absolute;
	left: 0px;
	transition: all 1s;
	-webkit-transition: all 1s; /* Safari */
}
.banner .broadcast ul {
	width: 3200px; /* 根据实际情况，写在html中 */
}
.banner .static div ul {
	width: 1556px; /* 根据实际情况，写在html中 */
}
.banner .broadcast ul li,
.banner .static div ul li {
	float: left;
}
.broadcast-nav {
	position: absolute;
	right: 20px;
	bottom: 20px;
}
.broadcast-nav span {
	float: left;
	display: block;
	width: 12px;
	height: 12px;
	margin-right: 18px;
	border: 1px solid #fff;
	border-radius: 12px;
	transition: all 0.5s;
	-webkit-transition: all 0.5s; /* Safari */
	cursor: pointer;
}
.broadcast-nav span.active {
	width: 28px;
	background-color: #fff;
}
.banner .static {
	width: 398px;
	height: 450px;
}
.banner .static div+div {
	margin-top: 2px;
}

/* index content */
.content {
	margin-top: 28px;
	padding-bottom: 80px;
	min-height: 800px;
}
.article-title a {
	color: #000;
}
.homepage-list .article-title {
	margin-bottom: 8px;
}
.homepage-list div.article-main {
	margin-bottom: 16px;
}
.homepage-list > ul > li,
.homepage-list div.article-main {
	position: relative;
	padding: 18px 32px;
	width: 805px;
	border: 1px solid #e9ebed;
	background-color: #fff;
}
.homepage-list li:not(:last-child) {
	margin-bottom: 16px;
}
.homepage-list li h2 {
	margin-bottom: 9px;
	font-size: 20px;
	line-height: 1;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.homepage-list li h2 a:hover {
	color: #1a94e9;
}
.article-info {
	margin-bottom: 16px;
}
.article-info a {
	margin-right: 10px;
	display: inline-block;
}
.article-info img {
	width: 29px;
	height: 29px;
}
.article-info .user-name {
	color: #303030;
}
.article-content {
	line-height: 1.8;
	word-wrap: break-word;
}
.article-show-img {
	margin-right: 20px;
	width: 200px;
	height: 200px;
	overflow: hidden;
}
.article-show-img img {
	max-width: 230px;
	max-height: 230px;
}
.article-show-text {
	width: 486px;
}
/*.article-operation a.reply-btn {
	display: inline-block;
	margin-right: 22px;
	padding: 0px 20px;
	line-height: 36px;
	border: 1px solid #8cbbf0;
	border-radius: 4px;
	background-color: #fff;
}*/
.article-operation > span {
	margin-right: 18px;
	line-height: 38px;
}
.article-operation a {
	color: #045cc0;
}
.article-operation button,
.article-operation a.invite-expert {
	color: #8d8d8d;
	line-height: 38px;
}
.article-operation svg {
	position: relative;
	top: 3px;
	color: #8590a6;
}
.article-operation button.fabulous-btn.icon-btn-active svg {
	color: #386cc1;
}
.article-operation button.collection-btn.icon-btn-active svg {
	color: #386cc1;
}
.article-operation button.icon-btn-active svg {
	color: #386cc1;
}
.homepage-sidebar {
	width: 380px;
}
.homepage-sidebar > div {
	background-color: #fff;
	border: 1px solid #e9ebed;
}
.homepage-sidebar h3 {
	font-size: 18px;
}
.hot-search,
.start-expert {
	padding: 20px;
}
.hot-search li {
	width: 330px;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.hot-search li a:hover span {
	text-decoration: underline;
}
.hot-search li:not(:last-child) {
	margin-bottom: 10px;
}
.hot-search i {
	margin-right: 10px;
	display: inline-block;
	width: 18px;
	height: 18px;
	line-height: 18px;
	text-align: center;
	background-color: #bad8fc;
}
.hot-search li:nth-of-type(-n+3) i {
	color: #fff;
	background-color: #eb791d;
}
.start-expert > div {
	position: relative;
	margin: 0px -20px;
	height: 148px;
	width: 378px;
}
.expert-show {
	position: relative;
	margin: 0px auto;
	height: 148px;
	width: 271px;
	overflow: hidden;
}
.expert-show ul {
	position: absolute;
	left: 0px;
	width: 465px; /* 根据实际情况，写在html中 */
}
.expert-show li {
	float: left;
	padding-top: 16px;
	width: 77px;
}
.expert-show li:not(:last-child) {
	margin-right: 20px;
}
.expert-show li i {
	margin-bottom: 10px;
	display: block;
	width: 75px;
	height: 75px;
	border-radius: 100%;
	border: 1px solid #ccc;
	overflow: hidden;
}
.expert-show li i img {
	width: 75px;
	height: 75px;
}
.expert-show li p {
	text-align: center;
}
.start-expert > div > button {
	position: absolute;
	top: 50%;
	margin-top: -15px;
	width: 26px;
	height: 26px;
	cursor: pointer;
}
.start-expert > div > button.disabled {
	cursor: not-allowed;
}
.start-expert > div > button > svg {
	width: 26px;
	height: 26px;
	color: #d5d5d5;
}
.start-expert > div > button:hover > svg {
	color: #8d8d8d;
}
.start-expert > div > button.disabled > svg,
.start-expert > div > button.disabled:hover > svg {
	color: #e5e5e5;
}
.start-expert > div > button.left-btn {
	left: 10px;
}
.start-expert > div > button.right-btn {
	right: 10px;
}


/* load */
.load-content {
	width: 650px;
	margin: 80px auto;
	background-color: #fff;
	box-shadow: 0px 2px 4px #ccc;
}
.load-tab {
	width: 650px;
	height: 79px;
	background-color: #f7f7f7;
}
.load-tab > p {
	font-size: 18px;
	color: #333;
	line-height: 79px;
	text-align: center;
	letter-spacing:2px;
	font-weight: bold;
}
.load-tab > i {
	margin-top: 17px;
	width: 1px;
	height: 45px;
	background-color: #e1e1e1;
}
.load-tab > div {
	float: left;
	width: 324px;
	line-height: 79px;
	text-align: center;
}
.load-tab > div > a {
	font-size: 18px;
	color: #999;
}
.load-tab > div > a.active {
	color: #333333;
}
.login-form,
.register-form,
.reset-form {
	padding: 49px 196px 60px;
}
.detail-form {
	padding: 49px 153px 60px;
}
.ask-form {
	padding: 49px 50px 60px;
}
.service-agreement {
	position: relative;
	top: 6px;
	margin-left: 3px;
}
.detail-form .layui-form-item > .layui-input-inline:last-child {
	margin-right: 0;
}

/* ask question */
.ask-question {
	padding: 15px;
}
.ask-question > h2 {
	font-size: 24px;
	text-align: center;
}
.ask-question > h2 + span {
	display: block;
	font-size: 14px;
	text-align: center;
	color: #8590a6;
}
.ask-form .ask-select {
	width: 263px;
	float: left;
}
.ask-form .label-title {
	margin-bottom: 14px;
	color: #444;
	text-indent: 14px;
}
.ask-option-item {
	display: none;
}
/* comment */
.comment-content {
	border: 1px solid #dfdfdf;
}
.comment-content-head {
	padding-left: 20px;
	line-height: 50px;
	border-bottom: 1px solid #f6f6f6;
}
.comment-content-list li {
	padding: 18px 32px;
	width: auto;
	border: none;
	border-bottom: 1px solid #f6f6f6;
}
.comment-content-form {
	padding: 10px;
}
.comment-content-form input {
	width: 580px;
}
.comment-content-form button {
	height: 38px;
	line-height: 38px;
}


span.ls-fun > a:nth-of-type(1) > svg {
	color: #1a94e9;
}
span.ls-fun > a:nth-of-type(2) > svg {
	color: #046e00;
}
span.ls-fun > a:nth-of-type(3) > svg {
	color: #c0fe40;
}
span.ls-fun > a:nth-of-type(4) > svg {
	color: #007185;
}


/* layui 表单自定义样式 */
.layui-form-label {
	padding: 9px 8px;
}
/* 修改个人信息表单 */
.user-edit-form-content {
	width: 480px;
}
.user-eidt-form .layui-form-label {
	width: 100px;
}
/* 问题答案样式 */
.answers-list {

}
.answers-list .article-info img {
	width: 36px;
	height: 36px;
}

.layui-input:focus, .layui-textarea:focus {
	border-color: #62baf7 !important;
}


/* 详情页 关注 */
.is-followed-btn2 {
	display: none;
}
.is-followed-btn1,
.is-followed-btn2 {
	min-width: 66px;
}
.is-followed .is-followed-btn1 {
	display: none;
}
.is-followed .is-followed-btn2 {
	display: inline-block;
}

/* 分页样式 */
.pages ul li {
	padding: 0px;
    width: auto;
    border: none;
}
.pages{
  padding:20px;
  text-align:center;
  font-family: Arial, Helvetica, sans-serif
}
.pages a,
.pages strong,
.pages .disabled{
  display:inline-block;
  line-height:28px;
  padding:0 10px;
  border:1px solid #d9d9d9;
  background-color:#ffffff;
  text-decoration:none;
  color:#666;
  margin-right:3px;
}
.pages .active{
  display:inline-block;
  line-height:28px;
  padding:0 10px;
  border:1px solid #d9d9d9;
  text-decoration:none;
  margin-right:3px;color:#fff;
  background-color:#30a7e9;
  border-color:#fff;
}
.pages a:hover{
  color:#fff;
  background-color:#30a7e9;
  border-color:#fff;
  text-decoration:none;
}
.pages strong{
  color:#fff;
  background-color:#30a7e9;
  border-color:#fff;
}
.pages li{
  display:inline-block;
}
.pages input {
	margin-right: 3px;
	width: 40px;
	text-align: center;
	line-height: 28px;
	border: 1px solid #d9d9d9;
}
.pages input::-webkit-outer-spin-button,
.pages input::-webkit-inner-spin-button {
    -webkit-appearance: none;
}
 
.pages input[type="number"] {
    -moz-appearance: textfield;
}
--------------------- 
作者：nnn_net 
来源：CSDN 
原文：https://blog.csdn.net/nnn_net/article/details/70778242 
版权声明：本文为博主原创文章，转载请附上博文链接！
/* loading */
.uploading {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
}

/* 审核 样式 */
.status {
	padding: 0px 10px;
	display: inline-block;
	color: #fff;
	line-height: 24px;
	border-radius: 4px;
}
.status-examining {
	background-color: #cdd2d6;
}
.status-examined-pass {
	background-color: #62ad4e;
}
.status-examined-fail {
	background-color: #e10909;
}

/* 阅读全文 */
.article-content-some {
    width: 100%;
    word-wrap: break-word;
	display: inline-block;
}
.article-content-all {
	display: none;
	width: 100%;
	word-wrap: break-word;
	overflow: hidden;
}
.read-some {
	display: none;
}
.read-all i,
.read-some i {
	margin-left: 5px;
	font-size: 10px;
	color: #8590a6;
}

/* 通知 */
.notice {
	position: relative;
}
.notice > p {
	position: absolute;
	top: -10px;
	right: -5px;
	padding: 0px 2px;
	display: block;
	height: 14px;
	font-size: 8px;
	line-height: 14px;
	color: #fff;
	background-color: #f00;
	border-radius: 2px;
}
.notice > p > span {
	-webkit-transform: scale(0.8);
	display:inline-block
}

/* 推荐样式 */
.recommend {
	position: absolute;
	right: 0px;
	top: 0px;
	width: 87px;
	height: 63px;
	overflow: hidden;
}
.recommend a {
	position: absolute;
	top: 8px;
	transform:rotate(35deg);
	width: 120px;
	height: 26px;
	background-color: #e57934;
	color: #fff;
	text-align: center;
	line-height: 26px;
	cursor: default;
}

/* 回到顶部 */
.back-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    overflow: hidden;
    display: none;
    width: 42px;
    height: 42px;
    font-weight: 500;
    cursor: pointer;
    background-position: 0px 0px;
    background-size: 40px 36px;
    background-repeat: no-repeat;
}
.back-top svg {

    width: 42px;
    height: 42px;
}

/* sidebar 广告位 */
.sidebar-ad {
	margin-bottom: 28px;
	height: 380px;
	border: 1px solid #e8ebee;
}
.sidebar-ad img {
	width: 378px;
	height: 378px;
}