@charset "utf-8";

/* CSS Document */
html,
body,
div,
span,
h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
i,
b,
img,
dl,
dt,
dd,
ol,
ul,
li,
form,
label,
table,
tbody,
tfoot,
thead,
tr,
th,
td,
canvas,
footer,
header,
nav,
menu,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	outline: none;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-weight: normal;
}

button,
select,
input,
textarea {
	font-size: 14px;
	font-family: STHeiti-Light, 'Hiragino Sans GB', 'Microsoft Yahei', Arial;
}

input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
	color: #aaa;
}

body {
	font-size: 14px;
	font-family: STHeiti-Light, 'Hiragino Sans GB', 'Microsoft Yahei', Arial;
	color: #333;
	line-height: 1.8;
}

ul,
ol {
	list-style: none;
}

img {
	border: 0;
}

button,
input {
	line-height: normal;
	*overflow: visible;
}

input,
textarea {
	outline: none;
	resize: none;
}

div:active {
	outline: none;
	text-decoration: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

img {
	max-width: 100%;
	vertical-align: top;
	image-rendering: -moz-crisp-edges;
	image-rendering: -o-crisp-edges;
	image-rendering: -webkit-optimize-contrast;
	image-rendering: crisp-edges;
	-ms-interpolation-mode: nearest-neighbor;
	/* image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -o-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: pixelated;
  -ms-interpolation-mode: nearest-neighbor;  */
}

input {
	border: none;
}

input:focus {
	border: none;
	outline: none;
}

a {
	color: #333;
	text-decoration: none;
	transition: 0.2s;
	cursor: pointer;
}

a:hover {
	color: #0772fc;
}

/* scrollbar */
::-webkit-scrollbar {
	width: 6px;
	height: 6px;
}

::-webkit-scrollbar-track {
	background: #f1f1f1;
}

::-webkit-scrollbar-track:hover {
	background: #eee;
}

::-webkit-scrollbar-thumb {
	border-radius: 10px;
	background: #b9b9b9;
}

::-webkit-scrollbar-thumb:hover {
	background: #747474;
}

::-webkit-scrollbar-thumb:active {
	background: #555;
}

/* common ------------------------*/
html {
	overflow-y: scroll\9;
}

body {
	background: #fff;
	min-width: 1300px;
}

.wrap,
.wrap--small {
	padding: 0 50px;
	margin: 0 auto;
	width: 100%;
}

.wrap {
	max-width: 1600px;
	min-width: 1300px;
}

.wrap--small {
	width: 1300px;
}

.content {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
}

.main {
	flex-grow: 1;
}

.side {
	flex-shrink: 0;
}

[class*=' conceal-info'],
[class^='conceal-info'],
.box-shadow {
	box-shadow: 0 0 12px rgba(69, 79, 102, 0.2);
	background-color: #fff;
	transition: 0.3s;
}

.box-shadow-hover {
	background-color: #fff;
	transition: 0.2s;
}

.box-shadow-hover:hover {
	box-shadow: 0 0 12px rgba(69, 79, 102, 0.2);
}

.line-through {
	text-decoration: line-through;
}

.conceal-box {
	position: relative;
}

[class*=' conceal-btn']:not(.conceal-btn--focus),
[class^='conceal-btn']:not(.conceal-btn--focus) {
	cursor: pointer;
}

[class*=' conceal-info'],
[class^='conceal-info'] {
	min-width: 100%;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	display: none;
	overflow: hidden;
	border-radius: 6px;
	user-select: none;
}

.conceal-info--select a {
	line-height: 40px;
	display: block;
	color: #5f6771;
}

.conceal-info--select a:hover {
	color: #0772fc;
}

.flex {
	display: flex;
	align-items: center;
}

.flex-sb {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.align-left {
	text-align: left !important;
}

.align-right {
	text-align: right !important;
}

.center {
	text-align: center;
}

.mt10 {
	margin-top: 10px;
}

.mt20 {
	margin-top: 20px;
}

.mt30 {
	margin-top: 30px;
}

.pb40 {
	padding-bottom: 40px;
}

/* components ------------------------ */
/* font */
.font-default {
	color: #0772fc !important;
}

.font-error {
	color: #ff0000 !important;
}

.font-success {
	color: #1dbf73;
}

.font-warning {
	color: #f60;
}

.font-gray {
	color: #999;
}

/* bg */
.bg-white {
	background: #fff;
}

.bg-gray {
	background: #f7f7f7;
}

/*btn*/
[class*=' btn-'],
[class^='btn-'] {
	color: #fff;
	border-radius: 6px;
	cursor: pointer;
	text-align: center;
	transition: 0.2s;
	user-select: none;
}

[class*=' btn-']:hover,
[class^='btn-']:hover {
	opacity: 0.9;
	color: #fff;
}

.btn-default {
	background: #0772fc;
	border: 1px solid #0772fc;
}

.btn-error {
	background: #ff5200;
	border: 1px solid #ff5200;
}

.btn-orange {
	background: #ff655b;
	border: 1px solid #ff655b;
}

.btn-gray {
	color: #666;
	background: #f3f3f3;
	border: 1px solid #f3f3f3;
}

.btn-border,
.btn-gray:hover,
.btn-border-gray:hover,
.btn-border:hover {
	color: #0772fc;
}

.btn-border {
	background: #fff;
	border: 1px solid #0772fc;
}

.btn-gray:hover,
.btn-border:hover {
	background: #0772fc;
	color: #fff;
}

.btn-border-gray {
	background: #fff;
	color: #666;
	border: 1px solid #ddd;
}

.btn-border-gray:hover {
	border-color: #0772fc;
}

/* img-box */
.img-box {
	width: 100%;
	height: 100%;
	overflow: hidden;
}

.img-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	vertical-align: middle;
	transition: 0.3s;
}

/* text-overflow */
.text-overflow {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.text-overflow--more {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	word-break: break-all;
	word-wrap: break-word;
}

/* search */
.search {
	display: flex;
	user-select: none;
	background: #fff;
	border-radius: 100px;
}

.search-type {
	flex-shrink: 0;
}

.search-type .conceal-btn--hover {
	min-width: 120px;
	border-radius: 100px 0 0 100px;
	height: 100%;
	padding-right: 20px;
	border: 2px solid #0772fc;
	border-right: none;
	align-self: stretch;
	color: #666;
	display: flex;
	align-items: center;
	position: relative;
	background-color: #fff;
}

.search-type .conceal-btn--hover .type {
	margin-right: 3px;
}

.search-type .conceal-btn--hover::after {
	height: auto;
	width: 1px;
	display: inline-block;
	content: '';
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	background-color: #dcdcdc;
}

.search-type .conceal-btn--hover .iconfont {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translate(0, -50%);
}

.search-type-value {
	display: inline-block;
	margin-right: 5px;
}

.search-type .conceal-info--select {
	padding: 10px 0;
}

.search-type .conceal-info--select > * {
	white-space: nowrap;
}

.search-keywords {
	flex-grow: 1;
}

.search-keywords-value,
.search-keywords-value:focus {
	width: 100%;
	height: 100%;
	padding: 0 15px;
	border-top: 2px solid #0772fc;
	border-bottom: 2px solid #0772fc;
	background-color: #fff;
	box-sizing: border-box;
}

.search-keywords-list {
	padding: 4px 0;
	width: 100%;
	display: none;
}

.search-keywords-list.show {
	display: inline-block;
}

.search-keywords-list a {
	padding: 0 20px;
}

.search-keywords-list a:hover {
	background-color: #f7f7f7;
}

.search-btn {
	user-select: none;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.search-btn .iconfont {
	font-size: 18px;
	margin-right: 5px;
}

.search-tag {
	justify-content: center;
}

.search-tag span {
	display: none;
}

.search-tag span.show {
	display: flex;
}

/*tab*/
[class*='tab-title'] > * {
	cursor: pointer;
	user-select: none;
}

.tab-con > *:not(.active) {
	display: none;
}

/* crumbs */
.crumbs {
	height: 50px;
	padding-top: 5px;
	display: flex;
	align-items: center;
}

.crumbs,
.crumbs a {
	color: #888;
}

.crumbs a::after {
	content: '>';
	font-family: 'simsun';
	margin: 0 5px;
}

.crumbs a:hover {
	color: #0772fc;
}

/* ppt-title */
.ppt-title {
	display: flex;
	align-items: center;
	/*user-select: none;*/
}

.vip-purchase .ppt-title,
.user-main .ppt-title {
	border-bottom: 1px solid #eee;
	padding: 20px 0 5px;
	height: 65px;
}

.ppt-title .name {
	font-size: 20px;
	font-weight: bold;
}

.ppt-title--small .name {
	font-size: 17px;
}

.ppt-title .text {
	padding-left: 20px;
}

.ppt-title .text .vip-purchase-btn {
	text-decoration: underline;
	margin-right: 5px;
}

.ppt-title .more-box {
	margin-left: auto;
}

.ppt-title a.more {
	color: #666;
	margin-left: auto;
}

.ppt-title a.more::after {
	content: '>';
	margin-left: 3px;
	font-family: 'simsun';
}

.ppt-title a.more:hover {
	color: #0772fc;
}

.ppt-title .price {
	font-size: 15px;
	margin: 0 auto 0 370px;
}

.ppt-title .price span {
	font-size: 34px;
	font-weight: bold;
	margin-right: 5px;
}

.ppt-title .batch-btn {
	display: flex;
	align-items: center;
	cursor: pointer;
	user-select: none;
}

.ppt-title .batch-btn .iconfont {
	margin-right: 5px;
	color: #666;
}

.ppt-title .batch-btn:hover * {
	color: #0772fc;
}

.ppt-title .batch-info {
	display: none;
}

.ppt-title .batch-info > * {
	margin-left: 20px;
}

.ppt-title [class*='btn-'] {
	border-radius: 3px;
	padding: 0 10px;
	line-height: 24px;
	display: inline-block;
}

.ppt-title [class*='btn-'] .iconfont {
	margin-right: 5px;
}

.ppt-title [class*='tab-title--'] > * {
	width: 110px;
	line-height: 30px;
	text-align: center;
	background-color: #e2e2e2;
	border-radius: 4px;
	margin-left: 15px;
	display: inline-block;
}

.ppt-title [class*='tab-title--'] > *.active {
	background-color: #307cff;
	color: #fff;
}
.ppt-title.time{
	justify-content: space-between;
}
.ppt-title.time>span{
	color: #666;
	font-size: 15px;
}

/* border-title */
.border-title {
	font-size: 16px;
	display: flex;
	align-items: center;
	font-weight: bold;
}

.border-title .name {
	font-weight: bold;
}

.border-title::before {
	content: '';
	width: 3px;
	height: 18px;
	display: inline-block;
	background: #0772fc;
	margin-right: 10px;
	border-radius: 1px;
}

.border-title .more {
	font-size: 14px;
	color: #666;
	font-weight: normal;
	margin-left: auto;
}

.border-title .more::after {
	content: '>';
	font-family: 'simsun';
	margin-left: 3px;
}

.border-title .more:hover {
	color: #0772fc;
}

/* bg-title */
.bg-title {
	height: 50px;
	display: flex;
	align-items: center;
	border-left: 5px solid #2d7dfa;
	padding-left: 20px;
	background-color: #f8f8f8;
}

.bg-title .name {
	font-size: 18px;
	font-weight: bold;
}

/* screen */
.screen {
	border-bottom: 1px solid #f1f2f4;
	padding-bottom: 10px;
}

.screen-item {
	display: flex;
	align-items: flex-start;
	padding-top: 6px;
	line-height: 28px;
	height: 44px;
	overflow: hidden;
}

.screen-item.open {
	height: auto;
}

.screen-item .label {
	flex-shrink: 0;
	width: 4em;
	font-weight: bold;
}

.screen-item .group {
	flex-grow: 1;
	position: relative;
}

.screen-item .group a {
	white-space: nowrap;
	display: inline-block;
	margin-bottom: 16px;
	padding: 0 16px;
	color: #505a71;
}

.screen-item .group a:hover {
	color: #0772fc;
}

.screen-item .group a.active {
	background: #0772fc;
	color: #fff;
	border-radius: 3px;
}

.screen-item .more {
	flex-shrink: 0;
	cursor: pointer;
	color: #999;
	flex-shrink: 0;
	white-space: nowrap;
}

.screen-item .more:hover {
	color: #0772fc;
}

.screen-item .more .iconfont {
	transition: 0.3s;
	display: inline-block;
}

.screen-item.open .more .iconfont {
	transform: rotate(-180deg);
}

.screen-color .group a {
	width: 38px;
	height: 20px;
	line-height: 20px;
	margin-top: 4px;
	display: inline-block;
	text-align: center;
	margin-right: 20px;
	padding: 0;
	vertical-align: top;
}

.screen-color .group a .iconfont {
	color: #fff;
	display: none;
	font-size: 12px;
}

.screen-color .group a.active {
	border-radius: 0;
}

.screen-color .group a.active .iconfont {
	display: inline-block;
}

.screen-color .group a:nth-child(1) {
	background-color: #cb0101;
}

.screen-color .group a:nth-child(2) {
	background-color: #f0bf01;
}

.screen-color .group a:nth-child(3) {
	background-color: #22b6f2;
}

.screen-color .group a:nth-child(4) {
	background-color: #8fcc02;
}

.screen-color .group a:nth-child(5) {
	background-color: #606;
}

.screen-color .group a:nth-child(6) {
	background-color: #973301;
}

.screen-color .group a:nth-child(7) {
	background-color: #000;
}

.screen-color .group a:nth-child(8) {
	background: url(../images/screen-color.png);
	background-size: 100%;
}

.screen-sub {
	padding-top: 5px;
	display: flex;
	align-items: flex-start;
}

.screen-sub dt {
	color: #666;
	margin-top: 12px;
	line-height: 30px;
	margin-right: 5px;
	flex-shrink: 0;
}

.screen .screen-sub {
	padding: 8px 0 10px;
	margin-bottom: 10px;
	border-radius: 4px;
}

.screen .screen-sub dt {
	font-weight: bold;
	padding-left: 15px;
}

.screen .screen-sub dd a {
	font-size: 13px;
}

/* list-intro */
.list-intro {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	padding-bottom: 20px;
}

.list-intro > * {
	width: 100%;
}

.list-intro .desc {
	margin-top: 10px;
	color: #999;
	background: #f9fafc;
	padding: 15px 20px;
}

.list-intro .info {
	width: 100%;
	margin-top: 10px;
	color: #fff;
	background: url(../images/zhuanti_heji.jpg) no-repeat center;
	background-size: cover;
	padding: 15px 45px;
	border-radius: 4px;
}

.list-intro .info-thumb {
	max-width: 180px;
	max-height: 100px;
	border-radius: 6px;
	flex-shrink: 0;
	border: 1px solid #72b1ff;
}

.list-intro .info-con {
	padding-left: 25px;
}

.list-intro .info-con-title {
	font-size: 26px;
}

.list-intro .info-con-intro {
	padding-top: 10px;
	font-size: 13px;
}

/* list-no */
.list-no {
	text-align: center;
	padding: 300px 0 60px;
	min-height: 600px;
	background: url(../images/no_result.png) no-repeat center 150px;
	color: #666;
}

.list-no h3 {
	font-size: 16px;
}

.list-no p {
	padding-top: 10px;
}

/* list */
.list {
	display: flex;
	flex-wrap: wrap;
}

.list li {
	position: relative;
	margin-right: 35px;
	margin-bottom: 20px;
	overflow: hidden;
	border: 1px solid #eee;
	border-radius: 3px;
}

.list li.box-shadow {
	border: none;
	border-radius: 6px;
}

.list li .img-item {
	width: 100%;
	position: relative;
	user-select: none;
}

.list li img {
	min-width: 100%;
}

.list li .img-item img {
	width: 100%;
	vertical-align: middle;
}

.list li .img-item::after {
	content: '';
	width: 100%;
	height: 100%;
	background: rgba(0, 0, 0, 0.4);
	top: 0;
	left: 0;
	z-index: 1;
}

.list li h3 {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	height: 40px;
	line-height: 40px;
	padding: 0 10px;
	vertical-align: top;
	text-align: center;
}

.list li .tag-icon {
	width: 21px;
	height: 25px;
	position: absolute;
	left: 10px;
	top: 10px;
	z-index: 2;
	background: url(../images/icon-tag1.png);
	font-size: 0;
}

.list li .type {
	background-color: rgba(0, 0, 0, 0.6);
	color: rgba(255, 255, 255, 0.8);
	border-radius: 2px;
	position: absolute;
	top: 10px;
	right: 10px;
	padding: 0 8px;
	line-height: 22px;
	font-size: 12px;
	z-index: 2;
}

.list li .collect,
.list li .download--small {
	line-height: 36px;
	text-align: center;
	border-radius: 4px;
	background-color: #fff;
	cursor: pointer;
	top: 10px;
}

.list li .collect {
	width: 36px;
	color: #b3b3b3;
	font-size: 20px;
	right: 10px;
}

.list li .collect:not(.collected):hover {
	color: #999;
}

.list li .collected {
	color: #ff5200;
}

.list li .oper,
.list li .download-btn.btn-default,
.list li .download-btn-vip {
	line-height: 36px;
	left: 40px;
	right: 40px;
	border-radius: 100px;
	font-size: 15px;
}

.list li .oper,
.list li .download-btn.btn-default {
	bottom: 64px;
}

.list li .download-btn-vip {
	bottom: 124px;
}

.list li .download--small {
	width: 50px;
	right: 55px;
	color: #333;
}

.list li .download-btn:hover {
	background-color: #157afd;
	border-color: #157afd;
	color: #fff;
}

.list li .img-item::after,
.list li .oper,
.list li .collect,
.list li .download-btn,
.list li .download-btn-vip {
	transition: 0.3s;
	position: absolute;
	opacity: 0;
	z-index: 2;
}

.list li:hover .img-item::after,
.list li:hover .oper,
.list li:hover .collect,
.list li:hover .download-btn,
.list li:hover .download-btn-vip {
	opacity: 1;
}

/* ppt模板 */
.list-tpl li .oper {
	display: flex;
	align-items: center;
}

.list-tpl li .oper .download-btn {
	position: relative;
	bottom: 0;
	left: 0;
	right: auto;
	flex-grow: 1;
	border-radius: 4px;
}

.list-tpl li .oper .collect {
	top: 0;
	position: relative;
	right: 0;
	margin-left: 10px;
}

/* 不规则尺寸列表 */
.list-irregular li {
	border-radius: 5px;
}

.list-irregular li .img-item {
	height: 0;
	padding-bottom: 100%;
	background-color: #e8ebea;
	overflow: hidden;
}

.list-irregular li .img-item-info {
	position: absolute;
	width: 100%;
	height: 100%;
	padding: 15px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.list-irregular li .img-item-info img {
	width: auto;
	height: auto;
	min-width: auto;
	max-height: 100%;
}

/* 艺术字 */
.list-font-material li .img-item {
	background: none;
	padding-bottom: 60%;
}

.list-font-material li .img-item-info {
	padding: 0;
}

/* 规则尺寸列表 */
.list-neat li .img-item {
	height: 0;
	overflow: hidden;
}

.list-neat li .img-item-info {
	position: absolute;
	width: 100%;
	height: 100%;
}

.list-neat li .img-item img {
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* -----图片模板-背景图 */
.list-pic-bg li .img-item {
	padding-bottom: 157.5%;
}

/* ------ppt图片 */
.list-ppt-pic li .img-item {
	padding-bottom: 56.25%;
}

/* 简历 */
.list-resume li {
	border: none;
	margin-bottom: 15px;
}

.list-resume li .img-item {
	display: block;
	padding: 15px 24px;
	background: url(../images/resume-bg.png) no-repeat 0 bottom #f3f4f7;
	border: 1px solid #cececf;
	border-radius: 10px;
	overflow: hidden;
	position: relative;
}

.list-resume li .info-intro {
	padding-left: 40px;
	background: url(../images/resume-icon.png) no-repeat 0 center;
}

.list-resume li .info-intro > * {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 20px;
}

.list-resume li .intro-title {
	font-size: 16px;
	font-weight: bold;
	color: #333;
}

.list-resume li .intro-desc {
	font-size: 12px;
	color: #666;
}

.list-resume li .img-item img {
	width: 100%;
	margin-top: 10px;
	box-shadow: 0 3px 4px 4px rgba(0, 0, 0, 0.05);
}

/* excel */
.list-excel li {
	border: none;
	margin-bottom: 15px;
	box-shadow: 0 0 3px 1px rgba(0, 0, 0, 0.2);
	padding: 8px 8px 0;
}

.list-excel li .img-item {
	display: block;
	padding: 0 12px 12px;
	background: #f6f8fa;
	overflow: hidden;
	position: relative;
}

.list-excel li .info-intro {
	padding: 10px 0 0 45px;
	background: url(../images/excel-icon.png) no-repeat 5px center;
}

.list-excel li .info-intro > * {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	line-height: 18px;
}

.list-excel li .intro-title {
	font-size: 14px;
	font-weight: bold;
	color: #333;
}

.list-excel li .intro-desc {
	font-size: 12px;
	color: #999;
}

.list-excel li .img-box {
	width: 100%;
	height: 0;
	position: relative;
	padding-bottom: 72%;
	margin-top: 10px;
}

.list-excel li .img-box img {
	height: auto;
	position: absolute;
	top: 0;
	left: 0;
}

.list-excel li .collect {
	top: 15px;
	right: 15px;
}

.list-excel li .download-btn-vip {
	bottom: 64px;
}

.list-excel li .name {
	display: flex;
	align-items: center;
}

.list-excel li .name a {
	width: 0;
	flex-grow: 1;
}

.list-excel li .name .download-btn {
	opacity: 1;
	line-height: 22px;
	padding: 0 10px;
	background-color: #eaf2fe;
	border-radius: 100px;
	position: relative;
	flex-shrink: 0;
	margin-left: 5px;
}

.list-excel li .name .download-btn:hover {
	background-color: #0772fc;
	color: #fff;
}

/* list-text */
.list-text {
	margin-top: 5px;
}

.list-text li a {
	display: flex;
	align-items: center;
	line-height: 34px;
}

.list-text li a::before {
	content: '';
	width: 0;
	height: 0;
	display: inline-block;
	border: 6px solid;
	border-color: transparent transparent transparent #ccc;
	margin-right: 5px;
	flex-shrink: 0;
	transition: 0.2s;
}

.list-text li a:hover::before {
	border-color: transparent transparent transparent #0772fc;
}

.list-text li .title {
	flex-grow: 1;
}

.list-text li .count {
	flex-shrink: 0;
	white-space: nowrap;
	margin-left: 20px;
	font-size: 13px;
	color: #aaa;
}

/* list-rank */
.list-rank li {
	position: relative;
	margin-top: 10px;
	padding-left: 30px;
}

.list-rank-type li {
	padding-left: 35px;
}

.list-rank li a {
	display: flex;
	align-items: center;
}

.list-rank li a > *:not(h3) {
	flex-shrink: 0;
	color: #999;
	font-size: 13px;
	margin-left: 20px;
}

.list-rank li a h3 {
	flex-grow: 1;
}

.list-rank-type li .type {
	position: absolute;
	left: 0;
	top: 0px;
}

.list-rank li .number {
	position: absolute;
	left: 0;
	top: 4px;
	line-height: 20px;
	width: 20px;
	text-align: center;
	color: #fff;
	background-color: #cfd0d2;
	border-radius: 2px;
	font-size: 13px;
}

.list-rank li:nth-child(1) .number {
	background-color: #fa4e57;
}

.list-rank li:nth-child(2) .number {
	background-color: #fa7a53;
}

.list-rank li:nth-child(3) .number {
	background-color: #fabd53;
}

.list-rank li .desc {
	font-size: 13px;
	color: #999;
}

.list-rank li .desc span:not(:first-child) {
	margin-left: 10px;
}

/* list-config */
.list-portion--3 li {
	width: calc((100% - 70px) / 3);
}

.list-portion--4 li {
	margin-right: 20px;
	width: calc((100% - 60px) / 4);
}

.list-portion--5 li {
	margin-right: 18.75px;
	width: calc((100% - 75px) / 5);
}

.list-portion--6 li {
	margin-right: 30px;
	width: calc((100% - 150px) / 6);
}

.list-portion--3 li:nth-child(3n + 3),
.list-portion--4 li:nth-child(4n + 4),
.list-portion--5 li:nth-child(5n + 5),
.list-portion--6 li:nth-child(6n + 6),
.list-minigrid li {
	margin-right: 0 !important;
}

.ppt-title + .list {
	margin-top: 15px;
}

.screen + .list {
	margin-top: 30px;
}

.list-menu + .list {
	margin-top: 30px;
}

/* tag-list */
.tag-list {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	padding-bottom: 7px;
}

.tag-list a {
	padding: 0 15px;
	line-height: 28px;
	display: inline-block;
	margin-right: 12px;
	margin-top: 12px;
}

.tag-list a.btn-border-gray {
	border-radius: 100px;
}

.tag-list a.btn-gray {
	border-radius: 4px;
}

.tag-list a.active {
	background-color: #0772fc;
	border-color: #0772fc;
	color: #fff;
}

/* pages */
.pages {
	padding: 0 0 30px;
	display: flex;
	justify-content: center;
	user-select: none;
}

.pages * {
	min-width: 38px;
	padding: 0 10px;
	line-height: 36px;
	border: 1px solid #ccc;
	border-radius: 3px;
	margin: 0 8px;
	display: inline-block;
	text-align: center;
	font-weight: normal;
}

.pages *.active {
	background-color: #0772fc;
	border-color: #0772fc;
	color: #fff;
}

.user .pages {
	padding: 30px 0 0;
}

.user .pages * {
	min-width: 34px;
	line-height: 32px;
	margin: 0 4px;
	font-size: 13px;
}

.list-img-intro + .pages {
	padding-top: 30px;
}

/* form */
.form .item {
	min-height: 44px;
	margin-top: 20px;
	display: flex;
	position: relative;
}

.form .item > *:first-child.iconfont {
	color: #b9bed1;
	position: relative;
	z-index: 1;
	margin-right: -40px;
	line-height: 44px;
	width: 40px;
	font-size: 18px;
	text-align: center;
}

.form .item > *:first-child.iconfont + input {
	padding-left: 40px;
}

.form .item input:not([type='checkbox']),
.form .item textarea {
	flex-grow: 1;
	padding: 0 10px;
	border: 1px solid #ddd;
	border-radius: 4px;
}

.form .item textarea {
	padding: 10px;
}

.form-code {
	width: 100px;
}

.form-code-btn,
.form-code-time {
	width: 110px;
	text-align: center;
	margin-left: 20px;
	background: #f2f2f2;
	border-radius: 4px;
	line-height: 44px;
	cursor: pointer;
	flex-shrink: 0;
	user-select: none;
}

.form-code-btn:active {
	background-color: #eee;
}

.form-code-time {
	display: none;
	cursor: not-allowed;
	background-color: #ddd;
	font-size: 13px;
	color: #666;
}

.form .item .form-error {
	color: #e92d18;
	position: absolute;
	left: 0;
	bottom: -20px;
	line-height: 20px;
	font-size: 12px;
	display: none;
}

.form-submit {
	line-height: 42px;
	width: 100%;
	display: block;
	font-size: 16px;
	margin-top: 25px;
	border-radius: 100px;
}

.form-submit-bottom {
	font-size: 12px;
	text-align: center;
	padding-top: 5px;
}

/* pop ---------------------*/
.pop-box {
	height: 0;
	overflow: hidden;
}

.ppt-pop .layui-layer-setwin,
.ppt-pop .layui-layer-close,
.iframe-pop .layui-layer-setwin,
.iframe-pop .layui-layer-close {
	width: 40px !important;
	height: 40px !important;
	overflow: hidden;
	opacity: 1;
	right: 0 !important;
	top: 0 !important;
	margin: 0 !important;
}

.ppt-pop .layui-layer-close,
.iframe-pop .layui-layer-close {
	background: url(../images/icon-close.png) no-repeat 10px 15px !important;
}

.ppt-pop .layui-layer-close:hover,
.iframe-pop .layui-layer-close:hover {
	opacity: 0.7;
}

.ppt-pop .layui-layer-close {
	right: 8px !important;
	top: 8px !important;
}

/* .ppt-pop  */
.ppt-pop {
	border-radius: 6px !important;
	padding: 10px 35px 35px !important;
	background: #fff !important;
}

.ppt-pop .layui-layer-title {
	font-size: 16px;
	font-weight: bold;
	color: #111;
	padding: 0;
}

.ppt-pop .layui-layer-content {
	padding: 20px 0 !important;
	font-size: 15px !important;
	line-height: 34px !important;
}

.ppt-pop .layui-layer-content .form {
	margin-top: -20px;
}

.ppt-pop .layui-layer-btn {
	display: flex;
	justify-content: center;
	padding: 10px 0 0 !important;
}

.ppt-pop .layui-layer-btn > * {
	height: 42px !important;
	line-height: 40px !important;
	font-size: 15px !important;
	flex-grow: 1;
	/* max-width: 180px; */
	border-radius: 100px !important;
	padding: 0 !important;
	margin: 0 !important;
	text-align: center;
}

.ppt-pop .layui-layer-btn .layui-layer-btn0 {
	background: #0772fc;
	border: 1px solid #0772fc;
}

.ppt-pop .layui-layer-btn > *:not(.layui-layer-btn0) {
	margin-left: 20px !important;
}

/* iframe-pop */
.iframe-pop {
	border-radius: 6px !important;
	overflow: hidden;
}

.wx-pop .layui-layer-content iframe {
	padding-top: 30px !important;
	width: 440px !important;
	height: 410px !important;
}

/* pay-pop */
.pay-pop {
	min-width: 400px;
	text-align: center;
}

.pay-pop-title {
	line-height: 40px;
	margin-top: 5px;
	padding-left: 45px;
	text-align: left;
	background: url(../images/logo-small.png) no-repeat 20px center;
	/* border-bottom: 1px solid #eee; */
}

.pay-pop .con {
	padding: 20px 0;
}

.pay-pop .con .title {
	font-size: 18px;
	font-weight: bold;
}

.pay-pop .con p .price {
	font-size: 24px;
	display: inline-block;
}

.pay-pop .con p .price::first-letter {
	font-size: 14px;
}

.pay-pop .vip-purchase-con {
	padding: 20px 0 0;
	justify-content: space-evenly;
}

.pay-pop .vip-purchase-con [class*='purchase--'] {
	width: 138px;
}

.pay-pop .vip-purchase-con [class*='purchase--'] .purchase-qr {
	padding: 10px;
	height: 138px;
}

.pay-pop [class*='btn-'] {
	line-height: 36px;
	padding: 0 20px;
	min-width: 160px;
	margin-top: 20px;
	display: inline-block;
	border-radius: 100px;
}

.pay-pop .desc {
	font-size: 13px;
	margin-top: 10px;
}

.pay-pop .con.down-count p:first-child {
	font-size: 16px;
}

.pay-pop .con.down-count p span {
	font-size: 20px;
	font-weight: bold;
	padding: 0 5px;
}

.pay-pop .con.down-count p:first-child span {
	color: #ff0000;
}

/* qr-pop */
.qr-pop {
	text-align: center;
}

.qr-pop img {
	width: 200px;
	height: 200px;
	padding: 10px;
	border: 1px solid #eee;
	border-radius: 2px;
	margin: 10px auto;
}

.qr-pop p {
	color: #777;
}

/* 活动弹窗 */
.activity-pop {
	background: none !important;
	box-shadow: none !important;
}

.activity-pop .layui-layer-setwin {
	width: 30px;
	left: 50%;
	right: auto;
	top: auto;
	bottom: -20px;
	transform: translate(-50%, 0);
}

.activity-pop .layui-layer-setwin .layui-layer-close2 {
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background: url(../images/activity/1111-close.png) 0 0 !important;
}

.activity-pop .activity-1111 {
	position: relative;
	display: inline-block;
}

.activity-pop .activity-1111 .btn {
	position: absolute;
	left: 50%;
	bottom: 25px;
	transform: translate(-50%, 0);
}

/* 设计师弹窗 */
.designer-pop {
	height: 504px;
	background: url(../images/designer_pop.png) !important;
	box-shadow: none !important;
}

.designer-pop .layui-layer-setwin {
	right: 47px;
	top: 70px;
	opacity: 0;
}

#designer-pop {
	text-align: center;
	user-select: none;
}

#designer-pop .price {
	font-weight: bold;
	margin-top: 60px;
}

#designer-pop .price .text {
	font-size: 30px;
	color: #98483a;
	text-shadow: 1px 3px 0 #d2c0a7;
}

#designer-pop .price .number {
	font-size: 60px;
	background: linear-gradient(to right, #f2c84c, #f2ac4b);
	-webkit-background-clip: text;
	filter: drop-shadow(1px 3px 0 #d2c0a7);
	color: transparent;
	display: inline-block;
	vertical-align: middle;
	margin-top: -25px;
}

#designer-pop .desc {
	border: 1px solid #dcb7a1;
	line-height: 36px;
	margin: -12px 30px 0;
	color: #c12611;
	font-size: 20px;
}

#designer-pop .desc span {
	padding: 0 10px;
}

#designer-pop .activity {
	line-height: 36px;
	color: #c12611;
	font-size: 20px;
	margin-top: 8px;
}

#designer-pop .kf {
	width: 160px;
	margin-top: 10px;
	border: 6px solid rgba(255, 255, 255, 0.4);
}

#designer-pop .tip {
	font-size: 16px;
	color: #c12611;
}

#designer-pop .tip span {
	font-size: 20px;
	font-weight: bold;
	position: relative;
	padding: 0 5px;
	display: inline-block;
}

#designer-pop .tip span::after {
	content: '';
	width: 100%;
	height: 4px;
	position: absolute;
	background-color: #fde354;
	bottom: 0;
	left: 0;
}

#designer-pop .btn {
	width: 245px;
	height: 44px;
	margin-top: 10px;
	opacity: 0;
	display: inline-block;
}

/* layui -------------- */
.layui-layer-msg {
	border-radius: 6px !important;
}

.layui-form-checkbox[lay-skin='primary'] {
	padding-left: 22px !important;
}

.layui-form-checkbox[lay-skin='primary'] span {
	padding-right: 0 !important;
}

.layui-form-checkbox[lay-skin='primary'] i {
	width: 16px !important;
	height: 16px !important;
}

.layui-form-checkbox[lay-skin='primary']:hover i {
	border-color: #0772fc;
}

.layui-form-checked[lay-skin='primary'] i {
	background-color: #0772fc;
	border-color: #0772fc !important;
	line-height: 16px !important;
}

.layui-form-checkbox[lay-skin='primary'] span {
	color: #333;
}

.layui-carousel,
.layui-carousel > [carousel-item] > * {
	background: #fff;
}

.layui-layer-tips .layui-table-tips-c {
	padding: 0;
}

/* header ------------------------------- */
header {
	background: #fff;
	user-select: none;
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	transition: 0.3s;
	z-index: 100;
	border-bottom: 1px solid #dddddd;
}

header .wrap {
	height: 75px;
	position: relative;
}

header .logo {
	width: 134px;
	height: 50px;
	background: url(../images/logo.png);
	display: inline-block;
	font-size: 0;
	margin-right: 40px;
	flex-shrink: 0;
}

nav li {
	margin-right: 30px;
}

header.has-search nav li:not(.nav-more),
header .nav-more .nav-son--select a:nth-child(-n + 4) {
	display: none;
}

nav li > a {
	line-height: 75px;
	display: inline-block;
	font-size: 15px;
	font-weight: 400;
	height: 75px;
	border-bottom: 4px solid rgba(0, 0, 0, 0);
	padding: 0 3px;
}

nav li.active > a,
nav li > a:hover {
	color: #0772fc;
}

nav li > a:hover {
	border-bottom: 4px solid #0772fc;
}

[class*=' nav-son--'],
[class^='nav-son--'] {
	padding: 12px;
}

[class*=' nav-son--'] a,
[class^='nav-son--'] a {
	font-size: 13px;
	line-height: 30px;
	color: #5f6771;
	padding: 0 10px;
	display: inline-block;
	white-space: nowrap;
}

[class*=' nav-son--'] a:hover,
[class^='nav-son--'] a:hover {
	color: #0772fc;
}

.nav-son--more {
	width: 270px;
	display: flex;
	flex-wrap: wrap;
}

.nav-son--more a {
	width: 33%;
}

.nav-son--select {
	display: flex;
	flex-direction: column;
	width: auto;
}

.nav-son--select a.active {
	color: #0772fc;
}

.nav-son--group {
	width: 240px;
	display: flex;
	justify-content: space-between;
}

.nav-son--group dl {
	width: 45%;
}

.nav-son--group dt {
	display: block;
	border-bottom: 1px solid #eee;
	margin-bottom: 5px;
}

.nav-son--group dt a {
	font-weight: bold;
	font-size: 14px;
	color: #222;
}

.nav-more .nav-son--select a {
	font-size: 15px;
	line-height: 36px;
}

/* 滚动时显示不同菜单 */

/* 小于1400px */
@media (max-width: 1400px) {
	header.has-search nav li {
		margin-right: 20px;
	}

	header .search-btn .iconfont {
		display: none;
	}

	header.has-search nav li:nth-child(-n + 4),
	header.has-search .nav-more .nav-son--select a:nth-child(n + 4) {
		display: inline-block;
	}
}

/* 大于1400px */
@media (min-width: 1400px) {
	header.has-search nav li {
		margin-right: 20px;
	}

	header.has-search nav li:nth-child(-n + 5),
	header.has-search .nav-more .nav-son--select a:nth-child(n + 5) {
		display: inline-block;
	}
}

/* 大于1600px */
@media (min-width: 1600px) {
	header.has-search nav li {
		margin-right: 25px;
	}

	header.has-search nav li {
		display: inline-block !important;
	}

	header.has-search .nav-more .nav-son--select a:nth-child(-n + 5) {
		display: none;
	}
}

header .search {
	max-width: 460px;
	height: 42px;
	flex-grow: 1;
	margin-right: 3px;
	display: none;
}

header.has-search .search {
	display: flex;
}

header .search-type .conceal-btn--hover,
header .search-type .conceal-info--select > * {
	padding-left: 15px;
	padding-right: 5px;
	min-width: 100px;
	font-size: 13px;
}

header .search-type .conceal-btn--hover .iconfont {
	right: 6px;
}

header .search-type .conceal-info--select > * {
	line-height: 34px;
}

header .search-btn {
	padding: 0 15px 0 12px;
	border-radius: 0 100px 100px 0;
	background-color: #0772fc;
	color: #fff;
	cursor: pointer;
}

header .search-btn .iconfont {
	margin-right: 5px;
	font-size: 15px;
}

header .vip {
	margin-left: auto;
}

header .vip [class*='conceal-btn--'] {
	font-size: 15px;
	padding-left: 40px;
	background: url(../images/icon-vip.png) no-repeat 0 center;
	line-height: 28px;
	display: block;
	color: #222;
}

header .vip .conceal-info {
	top: 40px;
}

header .vip [class*='conceal-btn--']:hover::after {
	content: '';
	width: 100%;
	height: 20px;
	display: inline-block;
	position: absolute;
	bottom: -20px;
	left: 0;
	opacity: 0;
}

header .vip .conceal-info {
	width: 370px;
	padding: 20px;
	font-size: 16px;
}

header .vip .conceal-info h3 {
	font-size: 20px;
	font-weight: bold;
}

header .vip .conceal-info h3::before,
header .vip .conceal-info h3::after {
	flex-grow: 1;
	height: 2px;
	background: #0772fc;
	content: '';
	display: inline-block;
}

header .vip .conceal-info h3::before {
	margin-right: 15px;
}

header .vip .conceal-info h3::after {
	margin-left: 15px;
}

header .vip .conceal-info h4 {
	font-weight: bold;
}

header .vip .conceal-info ul {
	flex-wrap: wrap;
}

header .vip .conceal-info ul li {
	padding-left: 15px;
	margin-top: 10px;
	width: 50%;
}

header .vip .conceal-info ul li .iconfont {
	color: #0772fc;
	margin-right: 5px;
}

header .vip .conceal-info .btn-default {
	line-height: 40px;
	margin-top: 15px;
	border-radius: 100px;
	display: block;
}
.header-roll {
	background: url(../images/icon_news.png) left no-repeat;
	padding-left: 20px;
	margin: 5px 15px 5px 0;
	line-height: 35px;
	background-color: transparent !important;
}

header .user-sign {
	margin-left: 30px;
}

header .user-info {
	margin-left: 40px;
}

header .user-sign {
	border: 1px solid #0772fc;
	border-radius: 5px;
	position: relative;
	overflow: hidden;
}

header .user-sign a {
	color: #0772fc;
	padding: 0 18px;
	height: 36px;
	display: flex;
	align-items: center;
	margin: 0 -1px;
}

header .user-sign::before {
	content: '';
	width: 1px;
	height: 14px;
	display: inline-block;
	background: #0772fc;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
}

header .user-sign a:hover {
	background: #0772fc;
	color: #fff;
}

header .user-info {
	align-self: stretch;
}

header .user-info .avatar {
	width: 44px;
	height: 44px;
	border-radius: 100%;
	cursor: pointer;
}

header .user-info-menu {
	width: 160px;
	left: -30px;
	top: 70px;
}

header .user-info-menu > * {
	padding: 0 20px;
	line-height: 36px;
	display: block;
}

header .user-info-menu .name {
	margin-bottom: 5px;
	padding: 10px 12px;
	border-bottom: 1px solid #e7e7e7;
	line-height: 20px;
}

header .user-info-menu .name .name-con {
	display: inline-block;
	width: 100%;
}

header .user-info-menu .name .name-desc {
	font-size: 12px;
	color: #999;
}

header .user-info-menu .name .name-desc-vip {
	background-color: #ffa300;
	border-radius: 4px;
	padding: 0 4px;
	color: #fff;
	display: inline-block;
}

header .user-info-menu .out {
	padding-top: 5px;
	padding-bottom: 5px;
	margin-top: 5px;
	border-top: 1px solid #e7e7e7;
}

header .user-info-menu .out:hover {
	color: #d02126;
}

header .user-info-menu > * span {
	margin-left: 3px;
}

/* header-banner */
.header-banner {
	width: 100%;
	margin-top: 15px;
	position: relative;
}

.header-banner .column {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	position: absolute;
	left: 0;
	top: 50%;
	transform: translate(0, -50%);
}

.header-banner .column a {
	background-color: #fff;
	display: inline-block;
	text-align: center;
}

.header-banner .column a {
	color: #e8794c;
	border-radius: 10px 0 10px 0;
	text-shadow: 0 0 #e8794c;
	box-shadow: 2px 2px 3px 3px rgba(0, 0, 0, 0.1);
}

.header-banner .column a:hover {
	background-color: rgba(255, 255, 255, 0.85);
}

.ppt-banner .column {
	width: 66%;
}

.ppt-banner .column a {
	width: 140px;
	line-height: 38px;
	font-size: 17px;
}

.wrap--small .ppt-banner .column a {
	width: 110px;
	line-height: 32px;
	font-size: 16px;
}

@media (max-width: 1500px) {
	.ppt-banner .column a {
		width: 110px;
		line-height: 32px;
		font-size: 16px;
	}
}

.sj-banner .column {
	width: 72%;
}

.sj-banner .column a {
	width: 170px;
	line-height: 40px;
	font-size: 18px;
}

.wrap--small .sj-banner .column a {
	width: 130px;
	line-height: 38px;
	font-size: 17px;
}

@media (max-width: 1500px) {
	.sj-banner .column a {
		width: 130px;
		line-height: 38px;
		font-size: 16px;
	}
}

/* index ---------------------------- */
#index-wrap .list {
	margin-top: 20px;
}

.index-title {
	display: flex;
	align-items: center;
	padding-top: 40px;
	user-select: none;
}

/* max-width:1400px */
@media (max-width: 1400px) {
	.index-title {
		padding-top: 30px;
	}
}

.index-title .name {
	font-size: 26px;
	font-weight: bold;
}

.index-title .tab-title--click a {
	font-size: 15px;
	display: inline-block;
	line-height: 30px;
	margin-left: 30px;
	padding-top: 3px;
	border-bottom: 2px solid #fff;
}

.index-title .tab-title--click a:hover {
	color: #0772fc;
}

.index-title .tab-title--click a.active {
	color: #0772fc;
	border-bottom-color: #0772fc;
}

.index-title .more {
	margin-left: auto;
}

.index-title .more a {
	display: none;
	background-color: #f3f4f9;
	padding: 0 20px;
	line-height: 30px;
	border-radius: 100px;
}

.index-title .more a.active {
	display: inline-block;
}

.index-more {
	text-align: center;
}

.index-more a {
	line-height: 40px;
	padding: 0 30px;
	color: #666;
	background-color: #f3f4f7;
	border-radius: 100px;
	border: 1px solid #f3f4f7;
	display: inline-block;
}

.index-more a:hover {
	background-color: #fff;
	color: #0772fc !important;
	border-color: #0772fc;
}

.index-more a::after {
	content: '>>';
	font-family: 'simsun';
	padding-left: 5px;
	font-weight: bold;
	color: #999;
}

.index-more a:hover::after {
	color: #0772fc !important;
}

/* banner */
#index-banner {
	height: 376px;
	position: relative;
}

#index-banner .img-box {
	text-align: center;
}

#index-banner .img-box img {
	width: auto;
	height: 100%;
}

#index-banner .layui-carousel-arrow[lay-type='add'] {
	margin-right: 44px;
}

#index-search {
	width: 660px;
	position: absolute;
	left: 50%;
	top: 195px;
	transform: translate(-50%, 0);
	z-index: 9;
}

#index-search .search {
	height: 50px;
	background: none;
}

#index-search .search .conceal-btn--hover,
#index-search .search .search-keywords-value,
#index-search .search .search-keywords-value:focus {
	border-width: 1px;
	border-color: #ddd;
}

#index-search .search-type .conceal-btn--hover,
#index-search .search-type .conceal-info--select > * {
	padding-left: 25px;
}

#index-search .search-btn {
	font-size: 15px;
	padding: 0 25px;
	margin-left: -30px;
	border-radius: 100px;
	position: relative;
	z-index: 9;
}

#index-search .search-btn:hover {
	opacity: 1;
}

#index-search .search-tag {
	padding-top: 20px;
}

#index-search .search-tag a {
	display: inline-block;
	line-height: 24px;
	border-radius: 100px;
	padding: 0 10px;
	background: rgba(0, 0, 0, 0.3);
	color: #fff;
	margin: 0 6px;
	font-size: 12px;
}

#index-search .search-tag a:hover {
	background: rgba(0, 0, 0, 0.5);
}

#top-search {
	position: relative;
	width: 1200px;
	margin: 20px auto;
	z-index: 99;
}

#top-search .search {
	width: 660px;
	margin: 0 auto;
	height: 50px;
}

#top-search .search-type .conceal-btn--hover,
#top-search .search-type .conceal-info--select > * {
	padding-left: 25px;
}

#top-search .search-btn {
	font-size: 15px;
	padding: 0 25px 0 20px;
	border-radius: 0 100px 100px 0;
	background: #0772fc;
	border: 1px solid #0772fc;
}

#top-search .search-tag {
	padding-top: 20px;
}

#top-search .search-tag a {
	display: inline-block;
	line-height: 24px;
	border-radius: 100px;
	color: #333;
	margin: 0 10px;
}

/* classify */
#index-classify {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-top: -35px;
	position: relative;
	z-index: 1;
}

#index-classify dl {
	width: calc((100% - 70px) / 3);
	height: 190px;
	position: relative;
}

#index-classify dt {
	padding: 20px 25px 0;
	font-size: 17px;
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
}

#index-classify dt::before {
	content: '';
	width: 23px;
	height: 23px;
	display: inline-block;
	margin-right: 10px;
	background-image: url(../images/index-classify.png);
}

#index-classify dt.fxb::before {
	background-position: 0 0;
}

#index-classify dt.hy::before {
	background-position: 0 -23px;
}

#index-classify dt.fg::before {
	background-position: 0 -46px;
}

#index-classify dd {
	height: 100%;
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	z-index: 0;
	padding: 50px 10px 25px;
	border-radius: 10px;
	display: flex;
	align-content: flex-start;
	flex-wrap: wrap;
	user-select: none;
}

#index-classify dl.open dd {
	height: auto;
}

#index-classify dd a {
	width: calc((100% - 80px) / 4);
	text-align: center;
	margin: 12px 10px 0;
	color: #555;
	text-align: center;
	font-size: 12px;
}

#index-classify dd a > * {
	width: 5em;
	overflow: hidden;
	height: 26px;
	line-height: 24px;
	margin: 0 auto;
}

#index-classify dd a:hover {
	color: #0772fc;
}

#index-classify dd a:not(.more) {
	border: 1px solid #e9f4ff;
	border-radius: 100px;
}

#index-classify dd a:not(.more):hover {
	background: #e9f4ff;
}

#index-classify dd a:nth-child(n + 12),
#index-classify dl.open dd a.more {
	display: none;
}

#index-classify dl.open dd a,
#index-classify dd a.more {
	display: block;
}

#index-classify dd a.more {
	line-height: 26px;
}

/* max-width:1400px */
@media (max-width: 1400px) {
	#index-classify dd a {
		width: calc((100% - 60px) / 3);
	}

	#index-classify dd a:nth-child(n + 9) {
		display: none;
	}

	#index-classify dd a.more {
		display: block;
	}
}

/* special */
#index-special {
	position: relative;
}

#index-special .tab-con {
	height: 0;
	padding-bottom: calc((100% - 140px) / 5 / 285 * 180);
	position: relative;
	margin-top: 20px;
}

#index-special .tab-con .index-special-con {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	height: 100%;
}

#index-special .item-box {
	height: 100%;
	display: flex;
	justify-content: space-between;
}

#index-special .item-box a {
	border-radius: 6px;
	position: relative;
}

#index-special-ppt .item-box a {
	width: calc((100% - 140px) / 5);
}

#index-special-pic .item-box a {
	width: calc((100% - 165px) / 6);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	padding: 10px 10px 0;
	background-color: #f0f4f9;
	border: 1px solid #e3e9ef;
}

#index-special-pic .item-box .img-box {
	width: calc((100% - 12px) / 2);
	height: calc((100% - 22px) / 2);
	vertical-align: top;
	margin-bottom: 10px;
}

#index-special-ppt .item-box a::after {
	content: '';
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	background-color: rgba(0, 0, 0, 0.4);
	transition: 0.3s;
	z-index: 1;
	opacity: 0;
}

#index-special-ppt .item-box a:hover::after {
	opacity: 1;
}

#index-special-pic .item-box .name {
	width: 100%;
	height: 100px;
	padding-top: 40px;
	line-height: 60px;
	font-size: 18px;
	display: inline-block;
	text-align: center;
	color: #fff;
	position: absolute;
	z-index: 2;
	left: 0;
	bottom: 0;
	transition: 0.3s;
	background: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
	background: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0) 100%);
}

#index-special-pic .item-box a:hover .name {
	bottom: -100px;
}

#index-special .layui-carousel .layui-carousel-arrow {
	background-color: #0772fc;
	color: #fff;
	width: 44px;
	height: 44px;
	line-height: 38px;
	border: 3px solid #fff;
	font-size: 24px;
	z-index: 2;
}

#index-special .layui-carousel:hover .layui-carousel-arrow {
	box-shadow: 0 3px 8px rgba(69, 79, 102, 0.2);
}

#index-special .layui-carousel:hover .layui-carousel-arrow {
	left: -20px;
}

#index-special .layui-carousel:hover .layui-carousel-arrow[lay-type='add'] {
	right: -20px;
}

/* index-rank */
.index-rank {
	margin-top: 20px;
	justify-content: space-between;
}

.index-rank .item {
	border-radius: 4px;
	width: calc((100% - 26px * 3) / 4);
	overflow: hidden;
}

.index-rank-title {
	line-height: 46px;
	font-size: 18px;
	font-weight: bold;
	color: #fff;
	padding-left: 25px;
}

.index-rank .item:nth-child(1) .index-rank-title {
	background: #ddb68f;
}

.index-rank .item:nth-child(2) .index-rank-title {
	background: #6dc4bf;
}

.index-rank .item:nth-child(3) .index-rank-title {
	background: #a177c9;
}

.index-rank .item:nth-child(4) .index-rank-title {
	background: #719fd8;
}

.index-rank-tab {
	padding: 15px 25px 25px;
}

.index-rank-tab [class*='tab-title'] {
	display: flex;
	user-select: none;
}

.index-rank-tab [class*='tab-title'] li {
	margin-right: 20px;
}

.index-rank-tab [class*='tab-title'] li.active {
	color: #0772fc;
	border-bottom: 2px solid #0772fc;
}

.index-rank-tab .tab-con li {
	margin-top: 15px;
}

/* index-feedback */
#index-feedback .title {
	text-align: center;
	padding: 50px 0 20px;
}

#index-feedback .title p {
	font-size: 24px;
	font-weight: bold;
}

#index-feedback .title p span {
	font-size: 26px;
	margin-right: 10px;
}

#index-feedback .item {
	text-align: center;
}

#index-feedback .item li {
	user-select: none;
	width: 355px;
	height: 210px;
	margin: 35px;
	display: inline-block;
	position: relative;
	vertical-align: top;
	border-radius: 6px;
}

/* max-width:1400px */
@media (max-width: 1400px) {
	#index-feedback .item li {
		width: 320px;
		margin: 30px 20px;
	}
}

#index-feedback .item-user {
	position: absolute;
	top: -30px;
	right: 20px;
	display: flex;
	flex-direction: column;
	font-size: 13px;
	line-height: 40px;
	color: #666;
}

#index-feedback .item-user .img-box {
	width: 60px;
	height: 60px;
	border-radius: 100%;
}

#index-feedback .icon-yinhao {
	position: absolute;
	left: 25px;
	top: 10px;
	color: #e6e6e6;
	font-size: 34px;
}

#index-feedback .info {
	text-align: left;
	padding: 80px 25px 0;
}

#index-feedback .from {
	position: absolute;
	right: 25px;
	bottom: 25px;
	color: #aaa;
}

#index-feedback .layui-carousel-arrow {
	width: 40px;
	height: 40px;
	line-height: 40px;
	font-size: 24px;
}

#index-feedback .layui-carousel-arrow:hover {
	background-color: #0772fc;
}

/* index-link */
#index-link {
	padding-top: 30px;
	padding-bottom: 30px;
}

#index-link .title {
	font-size: 18px;
	font-weight: bold;
	margin-right: 10px;
}

#index-link .group a {
	margin-right: 20px;
	margin-top: 5px;
	display: inline-block;
}

/* index-anchor */
#index-anchor {
	width: 46px;
	position: fixed;
	left: 10px;
	top: 50%;
	transform: translate(0, -50%);
	z-index: 9;
	border-radius: 6px;
	user-select: none;
	padding: 10px 0;
}

#index-anchor li {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: #999;
	line-height: 1.2;
	font-size: 12px;
	padding: 8px 0;
	cursor: pointer;
	transition: 0.3s;
}

#index-anchor li .iconfont {
	font-size: 20px;
}

#index-anchor li.active,
#index-anchor li:hover {
	color: #0772fc;
}

/* min-width:1600px */
@media (min-width: 1660px) {
	#index-anchor {
		left: 50%;
		margin-left: -800px;
		transform: translate(-50%, -50%);
	}
}

/* 设计素材 ------------------------- */
.material-search {
	width: 100%;
	height: 240px;
	padding-top: 120px;
	margin-top: 30px;
	text-align: center;
	background: url(../images/material-searcy-bg.jpg);
	position: relative;
	z-index: 3;
}

.material-search .search {
	width: 660px;
	height: 50px;
	margin: 0 auto;
	border-radius: 6px;
	text-align: left;
}

.material-search .conceal-btn--hover {
	border: none;
	padding-left: 25px;
}

.material-search .search-type .conceal-info--select a {
	padding-left: 25px;
}

.material-search .search-keywords-value,
.material-search .search-keywords-value:focus {
	border: none;
}

.material-search .search-btn {
	border: none;
	background: none;
	padding: 0 20px;
	color: #333;
}

.material-classify {
	margin-top: 0 !important;
}

.material-classify dl {
	height: 130px !important;
	width: 31% !important;
}

.material-classify dl:first-child {
	margin-left: -15px;
}

.material-classify dl:last-child {
	margin-right: -15px;
}

.material-classify dl:not(:last-child) dd::after {
	content: '';
	width: 1px;
	height: 60px;
	background-color: #ddd;
	display: inline-block;
	position: absolute;
	top: 55px;
	right: -6%;
}

.material-classify dt {
	padding: 15px 15px 0 !important;
}

.material-classify dt::before {
	width: 30px !important;
	height: 30px !important;
	margin-right: 5px !important;
	background-image: url(../images/material-classify.png) !important;
}

.material-classify dt.fenlei::before {
	background-position: 0 0;
}

.material-classify dt.changjing::before {
	background-position: 0 -30px;
}

.material-classify dt.jieri::before {
	background-position: 0 -60px;
}

.material-classify dd {
	padding-bottom: 15px !important;
	background: none !important;
}

.material-classify dd:hover {
	background: #fff !important;
}

.material-classify dd a {
	margin-top: 5px !important;
	border: none !important;
	text-align: left !important;
	font-size: 14px !important;
}

.material-classify dd a:hover {
	background: #fff !important;
}

.material-classify dd a > * {
	margin-left: 0 !important;
}

.material-classify dd a:nth-child(n + 8),
.material-classify dl.open dd a.more {
	display: none;
}

@media (max-width: 1400px) {
	.material-classify dd a:nth-child(n + 6) {
		display: none;
	}
}

.special-index-group {
	position: relative;
	padding-bottom: 40px;
	z-index: 0;
	border-top: none !important;
}

.special-index-group-title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 20px 0 10px;
}

.special-index-group-title .title {
	font-size: 24px;
	font-weight: bold;
}

.special-index-group-title .more {
	background-color: #f3f4f9;
	padding: 0 20px;
	line-height: 30px;
	border-radius: 100px;
}

.special-index-group #index-special {
	height: 0;
	padding-bottom: calc((100% - 140px) / 5 / 285 * 180);
	position: relative;
}

.special-index-group #index-special-pic {
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	height: 100%;
}

.special-index-group #index-special-pic .item {
	height: 100%;
	overflow: hidden;
}

/* 模板内容 ------------------------- */
.detail-title {
	display: flex;
	align-items: center;
}

.detail-title .tag-icon {
	width: 23px;
	height: 28px;
	display: inline-block;
	background: url(../images/icon-tag2.png);
	font-size: 0;
	margin-right: 10px;
	flex-shrink: 0;
}

.detail-title .title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 24px;
}

.detail-title .detail-download {
	margin-left: 20px;
	flex-shrink: 0;
}

.detail-title .detail-download > * {
	margin-left: 20px;
}

header.fixed-on,
.detail-header {
	top: -80px;
}

header.fixed-on ~ .detail-header {
	top: 0;
	z-index: 99;
}

.detail-header {
	width: 100%;
	position: fixed;
	z-index: 2;
	transition: 0.3s;
}

.detail-header .detail-title {
	height: 75px;
}

.detail-header .detail-title .title {
	margin-right: auto;
	flex-grow: 1;
}

.detail .content {
	flex-direction: row-reverse;
}

.detail-about {
	padding-top: 20px;
}

.detail-download > * {
	padding: 0 20px;
	font-size: 15px;
	line-height: 38px;
	display: inline-block;
	border-radius: 3px;
}

/* .detail-main ---------------------- */
.detail-main {
	position: relative;
	text-align: center;
	padding: 15px 15px 0;
	overflow: hidden;
	margin-bottom: 20px;
}

.detail-main .detail-title .baidu {
	width: 60px;
	flex-shrink: 0;
	border-radius: 2px;
	line-height: 20px;
	margin-left: 10px;
	margin-right: 50px;
	background: #ffb633;
	font-size: 12px;
	color: #fff;
	cursor: pointer;
}

.detail-tag {
	width: 150px;
	position: absolute;
	line-height: 30px;
	font-size: 15px;
	background-color: #f34d37;
	color: #fff;
	right: -45px;
	top: 15px;
	transform: rotate(45deg);
}

.detail-con {
	font-size: 16px;
	overflow: hidden;
	margin-top: 10px;
}

.detail-con > * {
	margin-top: 3px;
}

.detail-status {
	padding-top: 20px;
	font-size: 15px;
	user-select: none;
}

.detail-status .more {
	cursor: pointer;
	display: none;
}

.detail-status .more:hover {
	color: #0772fc;
}

.detail-main .detail-download * {
	margin: 20px 15px 0;
	min-width: 140px;
}

.detail-desc {
	text-align: left;
	font-size: 13px;
	margin: 30px 20px 40px;
	line-height: 1.8;
}

/* 定制 */
.detail .content > .dz-btn {
	width: 55px;
	margin-left: -50px;
	margin-right: -5px;
	height: 154px;
	flex-shrink: 0;
	position: sticky;
	top: 300px;
	margin-top: 303px;
	margin-bottom: 230px;
	background: url('../images/bwpb.gif') -10px 0 no-repeat;
	display: inline-block;
	font-size: 0;
	user-select: none;
	cursor: pointer;
	z-index: 1;
}

.dz-pop {
	width: 690px;
	height: 450px;
	display: flex;
}

.dz-pop-side {
	width: 300px;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: url(../images/dz_bg.png);
	color: #fff;
	user-select: none;
}

.dz-pop-side .intro {
	font-size: 16px;
}

.dz-pop-side .intro li {
	line-height: 46px;
}

.dz-pop-side .intro li span {
	margin: 0 10px;
}

.dz-pop-side .title {
	font-size: 16px;
	padding: 0 20px;
	line-height: 32px;
	border-radius: 100px;
	border: 1px solid #fff;
	margin-top: 50px;
}

.dz-pop-side .desc {
	font-size: 13px;
	margin-top: 20px;
}

.dz-pop-main {
	flex-grow: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #666;
}

.dz-pop-main .title {
	font-size: 22px;
	font-weight: bold;
	color: #333;
}

.dz-pop-main .intro {
	font-size: 15px;
	margin-top: 10px;
}

.dz-pop-main img {
	width: 196px;
	height: 196px;
	padding: 18px;
	margin-top: 20px;
	border: 1px solid #eee;
	border-radius: 4px;
}

.dz-pop-main .desc {
	font-size: 16px;
	margin-top: 10px;
}

.dz-pop-main .contact {
	font-size: 16px;
	margin-top: 20px;
}

/* detail side ---------------------- */
.detail-side {
	width: 360px;
	margin-left: 30px;
	position: sticky;
	margin-bottom: 20px;
	padding: 0 20px 5px;
}

.side-item {
	padding: 15px 0;
}

.side-item:not(:last-child) {
	border-bottom: 1px solid #eee;
}

.box-shadow .border-title {
	font-size: 15px;
}

.box-shadow .border-title::before {
	display: none;
}

/* side-download */
.side-download {
	width: 100%;
	display: inline-block;
}

.side-download .price {
	height: 38px;
}

.side-download .price .label {
	align-self: flex-end;
}

.side-download .price .number,
.side-download .price .number-free {
	font-size: 32px;
	color: #e90606;
	font-weight: bold;
	margin-right: 10px;
	display: inline-block;
	line-height: 1;
}

.side-download .price .number-free {
	font-size: 24px;
}

.side-download .price .number::first-letter {
	font-size: 22px;
}

.side-download .price .free {
	color: #6c4400;
	border-radius: 3px;
	background: #f6d18e;
	background: -webkit-linear-gradient(left, #fbdda5 0%, #f1c577 100%);
	background: linear-gradient(left right, #fbdda5 0%, #f1c577 100%);
	user-select: none;
	padding: 0 8px;
	font-size: 13px;
}

.side-download .price .collect {
	width: 38px;
	line-height: 38px;
	text-align: center;
	display: inline-block;
	background-color: #eee;
	color: #b7b7b7;
	border-radius: 3px;
	margin-left: auto;
	font-size: 20px;
	transition: 0.3s;
	cursor: pointer;
}

.side-download .price .collect:hover {
	color: #999;
}

.side-download .price .collected {
	background-color: #ffb633;
	color: #fff !important;
}

.side-download [class*='btn-'] {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 38px;
	border-radius: 2px;
	margin-top: 15px;
	font-size: 16px;
}

.side-download .desc {
	margin-top: 5px;
	font-size: 13px;
	color: #888;
}

/* side-intro  */
.side-intro {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

.side-intro li {
	width: 50%;
	display: flex;
	align-items: center;
	line-height: 24px;
	padding: 6px 0;
	color: #888;
	position: relative;
	font-size: 13px;
}

.side-intro li.fill {
	width: 100%;
}

.side-intro li a {
	color: #888;
}

.side-intro li a:hover {
	color: #0772fc;
}

.side .icon-tanhao {
	color: #aaa;
	margin-left: 3px;
	cursor: pointer;
}

.side .copyright-tips {
	color: #af9178;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	padding: 20px;
	display: none;
	z-index: 99;
}

.detail-side .side .copyright-tips {
	left: -20px;
	right: -20px;
}

.side .copyright-tips .title {
	font-size: 20px;
	text-align: center;
	display: block;
}

.side .copyright-tips p {
	padding-top: 10px;
	text-indent: 2em;
	line-height: 24px;
}

.side .copyright:hover + .copyright-tips {
	display: inline-block;
}

/* side-author */
.side-author {
	padding: 25px 0;
}

.side-author .avatar {
	width: 38px;
	line-height: 38px;
	border-radius: 100%;
	background-color: #0772fc;
	text-align: center;
	font-size: 20px;
	color: #fff;
}

.side-author .con {
	margin-left: 10px;
	line-height: 24px;
}

.side-author .con .name {
	font-size: 16px;
	font-weight: bold;
}

.side-author .con .count {
	font-size: 13px;
}

.side-author .con .count span {
	color: #f38c06;
	margin-right: 15px;
	display: inline-block;
}

.side-author .con .count a {
	padding: 0 5px;
	border-radius: 2px;
	line-height: 18px;
	font-size: 12px;
	background-color: #f9efd8;
	color: #f38c06;
	margin-left: 5px;
}

.side-author .con .count a:hover {
	background-color: #f38c06;
	color: #fff;
}

/* side .list */
.side .list {
	justify-content: space-between;
}

.side .list li {
	width: 150px;
	margin: 10px 0 0;
	border-radius: 0;
}

.side .list .img-item {
	border: 1px solid #eee;
}

.side .list li h3 {
	height: 30px;
	line-height: 30px;
	margin: 0;
}

/* side-material */
.side-material {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-right: -10px;
}

.side-material li {
	height: 120px;
	width: auto;
	border: 1px solid #eee;
	margin-right: 10px;
	padding: 4px;
	margin-top: 10px;
	text-align: center;
}

.side-material::after {
	content: '';
	flex-grow: 99999;
	height: 115px;
	display: inline;
}

.side-material li img {
	height: 100%;
}

/* 内容简介 */
.detail-intro .tab-title--click > * {
	padding-top: 2px;
	line-height: 36px;
	margin-right: 30px;
	font-size: 15px;
	display: inline-block;
	cursor: pointer;
	border-bottom: 3px solid #fff;
}

.detail-intro .tab-title--click > *.active {
	border-bottom-color: #0772fc;
	font-weight: bold;
	color: #0772fc;
}

.detail-intro .title {
	font-size: 15px;
	font-weight: bold;
	margin-top: 10px;
}

.detail-intro .tag-list a {
	border-radius: 3px;
}

.detail-intro .intro {
	font-size: 13px;
	padding-top: 5px;
}

/* 图片详情 ---------------------- */
.pic-detail-main {
	flex-grow: 1;
	line-height: 600px;
	min-height: 600px;
	text-align: center;
	background: #f7fafc;
	padding: 40px;
	margin-bottom: 10px;
	position: relative;
}

.pic-detail-main img {
	max-height: 800px;
	vertical-align: middle;
}

.pic-detail-login {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	top: 10%;
	text-align: center;
	background: #fff;
	background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%);
	background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%);
	background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%);
	background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%);
	background: linear-gradient(top bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 60%);
}

.pic-detail-login .btn-error {
	width: 230px;
	height: 50px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	position: absolute;
	left: 50%;
	top: 40%;
	transform: translate(-50%, -50%);
}

.pic-detail-side {
	width: 340px;
	margin-bottom: 10px;
	margin-left: 30px;
}

.pic-detail-side .side-download {
	padding-top: 0;
}

.pic-detail-side .border-title {
	padding-bottom: 5px;
}

/* download-con ------------- */
.download-con {
	width: 100%;
	background: #fff;
	margin: 40px auto 20px;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.download-con .pic {
	max-width: 285px;
}

.download-con-payment {
	text-align: center;
	max-width: 355px;
}

.download-con-payment .title {
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 5px;
}

.download-con-payment .intro .price {
	font-size: 22px;
}

.download-con-payment .vip-purchase-con {
	padding: 20px 0;
}

.download-con-payment [class^='purchase--'] {
	width: 142px;
	margin: 0 20px;
}

.download-con-payment [class^='purchase--'] .purchase-qr {
	height: 142px;
	padding: 10px;
}

.download-con-payment .btn {
	display: inline-block;
	line-height: 46px;
}

.download-con-payment .btn.vipdownload-btn {
	width: 290px;
}

.download-con-payment .payment-result .iconfont {
	font-size: 80px;
	line-height: 1;
	margin: 40px auto 10px;
	display: inline-block;
}

.download-con-payment .payment-result .btn {
	width: 140px;
	font-size: 15px;
	margin-top: 40px;
}

.download-con-payment .desc {
	font-size: 12px;
	margin-top: 10px;
	color: #999;
}

.download-con-vip {
	flex-shrink: 0;
	width: 355px;
	text-align: center;
}

.download-con-vip .vip-title {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 700;
	height: 36px;
	margin-bottom: 25px;
}

.download-con-vip .vip-title::before,
.download-con-vip .vip-title::after {
	content: '';
	width: 40px;
	height: 3px;
	display: inline-block;
	background: #333;
}

.download-con-vip .vip-title::before {
	margin-right: 20px;
}

.download-con-vip .vip-title::after {
	margin-left: 20px;
}

.download-con-vip a:hover {
	color: #666;
}

.download-con-vip ul {
	display: flex;
	flex-wrap: wrap;
}

.download-con-vip li {
	width: 170px;
	height: 137px;
	position: relative;
	border: 2px solid #dcdcdc;
	box-sizing: border-box;
	padding: 15px 0;
	font-size: 15px;
	margin-bottom: 15px;
	overflow: hidden;
}

.download-con-vip li:nth-child(odd) {
	margin-right: 15px;
}

.download-con-vip li .tag {
	position: absolute;
	left: -27px;
	top: 5px;
	width: 100px;
	height: 30px;
	line-height: 33px;
	background: #ff5200;
	transform: rotate(-45deg);
	color: #fff;
	font-size: 13px;
}

.download-con-vip li p {
	padding: 3px 0;
}

.download-con-vip li .name {
	font-size: 16px;
	font-weight: bold;
}

.download-con-vip li .price {
	line-height: 1.4;
}

.download-con-vip li .price span {
	font-size: 26px;
}

.download-con-vip li .desc {
	font-size: 13px;
}

.download-con-vip li:nth-child(1) {
	border-color: #ff655b;
}

.download-con-vip li:nth-child(1)::after {
	content: '';
	width: 30px;
	height: 28px;
	display: inline-block;
	background: url(../images/checked2.png);
	position: absolute;
	bottom: -1px;
	right: -1px;
}

.bay-pop {
	min-width: 820px;
}

.bay-pop .download-con {
	margin-top: 10px;
	padding: 0 40px;
}

/* 设计师 ------------------------- */
.author-title {
	line-height: 60px;
	margin: 20px auto;
	text-align: center;
}

.author-title span {
	padding: 0 20px;
	display: inline-block;
	font-size: 28px;
	border-bottom: 1px solid #ddd;
	position: relative;
}

.author-title span::after {
	content: '';
	width: 70px;
	height: 6px;
	background-color: #0772fc;
	position: absolute;
	bottom: -2px;
	left: 50%;
	transform: translate(-50%, 0);
}

/* 为什么 */
.author-why-list li {
	width: 30%;
	height: 290px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.author-why-list li::before {
	content: '';
	width: 102px;
	height: 101px;
	display: inline-block;
}

.author-why-list li:nth-child(1):before {
	background: url(../images/designer_icon_1.png);
}

.author-why-list li:nth-child(2):before {
	background: url(../images/designer_icon_2.png);
}

.author-why-list li:nth-child(3):before {
	background: url(../images/designer_icon_3.png);
}

.author-why-list li span {
	font-size: 20px;
	font-weight: bold;
	padding: 10px 0;
	color: #3c3a42;
}

.author-why-list li p {
	font-size: 15px;
	padding: 0 50px;
	text-align: center;
	color: #66646d;
}

/* 擅长 */
.author-group {
	margin-top: 70px;
	padding: 10px 0 40px;
	background-color: #f7f7f7;
}

.author-group-list {
	flex-wrap: wrap;
}

.author-group-list .item {
	margin-top: 30px;
	width: calc((100% - 90px) / 4);
}

.author-group-list .item img {
	width: 100%;
}

.author-group-list .item h2 {
	font-size: 15px;
	text-align: center;
	line-height: 40px;
}

/* 价格 */
.author-price {
	margin-top: 40px;
}

.author-price-table {
	width: 100%;
}

.author-price-table th,
.author-price-table td {
	border: 1px solid #ddd;
	width: 20%;
}
.author-price-table th:first-child,
.author-price-table td:first-child {
	width: 10%;
	font-weight: bold;
}

.author-price-table th {
	background-color: #0772fc;
	font-size: 15px;
	color: #fff;
	text-align: center;
	line-height: 40px;
}

.author-price-table td {
	padding: 10px 15px;
	color: #646a7c;
}

/* 列表 */
.list-author li {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 25px;
}

.list-author .avatar {
	min-width: 120px;
	width: 120px;
	height: 120px;
	border-radius: 100%;
}

.list-author .name {
	font-size: 17px;
	color: #111;
	padding-top: 5px;
}

.list-author .intro {
	margin-bottom: auto;
	color: #666;
}

.list-author [class*='btn-'] {
	width: 170px;
	line-height: 34px;
	margin-top: 15px;
}

/* 服务理念 */
.author-desc-list {
	padding-bottom: 40px;
}
.author-desc-list li {
	width: 23%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.author-desc-list li::before {
	content: '';
	width: 50px;
	height: 50px;
	display: inline-block;
	background-repeat: no-repeat;
	background-position: center;
}

.author-desc-list li:nth-child(1):before {
	background-image: url(../images/designer_desc_icon_1.png);
}

.author-desc-list li:nth-child(2):before {
	background-image: url(../images/designer_desc_icon_2.png);
}

.author-desc-list li:nth-child(3):before {
	background-image: url(../images/designer_desc_icon_3.png);
}
.author-desc-list li:nth-child(4):before {
	background-image: url(../images/designer_desc_icon_4.png);
}

.author-desc-list li span {
	font-size: 20px;
	font-weight: bold;
	padding: 10px 0;
	color: #3c3a42;
}

.author-desc-list li p {
	font-size: 15px;
	text-align: center;
	color: #66646d;
}

/* 内容 */
.author-detail {
	height: 208px;
	background: url(../images/author-bg.jpg);
	align-items: center;
	display: flex;
}

.author-detail .avatar {
	width: 150px;
	height: 150px;
	border-radius: 100%;
	border: 5px solid rgba(255, 255, 255, 0.3);
	margin-right: 35px;
}

.author-detail .con {
	color: #fff;
}

.author-detail .name {
	font-size: 24px;
}

.author-detail [class*='btn-'] {
	width: 150px;
	line-height: 32px;
	display: inline-block;
	margin-top: 10px;
}

/* 文章 ------------------------- */
.list-menu {
	height: 40px;
	display: flex;
	border-bottom: 1px solid #eee;
}

.list-menu a {
	font-size: 15px;
	margin: 0 23px;
	position: relative;
}

.list-menu a:not(:first-child)::before {
	content: '';
	width: 1px;
	height: 16px;
	display: inline-block;
	border-right: 1px solid #f1f1f1;
	position: absolute;
	top: 5px;
	left: -23px;
}

.list-menu a.active {
	color: #0772fc;
}

.list-menu a.active::after {
	content: '';
	width: 100%;
	height: 3px;
	display: inline-block;
	background-color: #0772fc;
	position: absolute;
	bottom: -1px;
	left: 0;
}

/* 文章列表 */
.list-img-intro {
	width: 100%;
}

.list-img-intro li {
	width: 100%;
	padding: 20px 0;
	display: flex;
	border-bottom: 1px solid #f1f2f4;
}

.list-img-intro li .img-box {
	width: 230px;
	height: 150px;
	margin-right: 35px;
}

.list-img-intro li .con {
	width: 0;
	flex-grow: 1;
}

.list-img-intro li .con .title {
	font-size: 20px;
}

.list-img-intro li .con .intro {
	height: 76px;
	color: #666;
	margin-top: 5px;
	overflow: hidden;
}

.list-img-intro li .con .desc {
	font-size: 13px;
	color: #999;
	margin-top: 8px;
}

.list-img-intro.half {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.list-img-intro.half li {
	width: 48%;
}

.main .list-img-intro.half li .img-box {
	width: 200px;
	height: 130px;
	margin-right: 25px;
}

.main .list-img-intro.half li .con .title {
	font-size: 16px;
	font-weight: bold;
}

.main .list-img-intro.half li .con .intro {
	margin-top: 0;
	height: 76px;
}

.main .list-img-intro.half li .con .desc {
	margin-top: 5px;
}

.side .list-img-intro li {
	padding: 10px 0;
}

.side .list-img-intro li:last-child {
	border-bottom: none;
	padding-bottom: 0;
}

.side .list-img-intro li .img-box {
	width: 150px;
	height: 100px;
	margin-right: 15px;
}

.side .list-img-intro li .con .title {
	font-size: 15px;
	font-weight: bold;
}

.side .list-img-intro li .con .intro {
	margin-top: 0;
	height: 50px;
}

.side .list-img-intro li .con .desc {
	margin-top: 0;
}

.side .list-img-title li .img-box {
	width: 140px;
	height: 80px;
}

.side .list-img-title li .con .title {
	font-size: 14px;
	font-weight: normal;
}

/* 文章内容 */
#article {
	padding-bottom: 80px;
}

.article-template {
	display: flex;
	border-radius: 6px;
	margin-top: 20px;
	padding: 20px;
}

.article-template .poster {
	width: 200px;
	padding: 15px;
	min-height: 155px;
	line-height: 155px;
	background: #f7f8f9;
}

.article-template .poster img {
	max-height: 250px;
	vertical-align: middle;
}

.article-template .con {
	width: 0;
	flex-grow: 1;
	margin-left: 30px;
}

.article-template .title {
	font-size: 16px;
	font-weight: bold;
	border-bottom: 1px solid #ddd;
	padding-bottom: 10px;
	margin-bottom: 10px;
}

.article-template .side-intro {
	display: block;
}

.article-template [class*='btn-'] {
	min-width: 160px;
	padding: 0 20px;
	display: inline-block;
	margin-right: 20px;
	margin-top: 10px;
	font-size: 15px;
	line-height: 38px;
	border-radius: 100px;
}

.article-title {
	font-size: 26px;
	color: #111;
	padding: 30px 30px 10px;
	text-align: center;
}

.article-desc {
	text-align: center;
}

.article-intro {
	border-radius: 3px;
	padding: 20px 50px 20px 90px;
	margin-top: 20px;
	position: relative;
	color: #666;
	font-size: 15px;
	line-height: 2;
}

.article-intro .iconfont {
	font-size: 30px;
	position: absolute;
	top: 0;
	left: 30px;
	color: #ccc;
}

.article-info p {
	font-size: 14px;
	margin-top: 20px;
}

.article-info img {
	height: auto;
}

.article-about {
	margin-top: 50px;
}

.article-about .list-text {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.article-about .list-text li {
	width: 30%;
	float: left;
}

.article-about .list-text li {
	width: 30%;
	float: left;
}

/* 文章侧边 */
.article-side {
	width: 370px;
	margin-left: 50px;
	position: sticky;
	top: 100px;
}

.article-side .item {
	margin-bottom: 20px;
}

.article-side .list li {
	width: 175px;
	margin-top: 15px;
}

/* 视频教程 ------------------------ */
#video-article {
	padding-bottom: 60px;
}

#video-article .main .article-title {
	text-align: left;
	padding-left: 0;
}

#video-article .main .article-title {
	padding-top: 10px;
}

#video-article .main video {
	width: 100%;
	background: #000;
}

#video-article .main video,
#video-article .side .list-rank {
	height: 600px;
}

#video-article .main .border-title {
	margin-top: 30px;
}

#video-article .side {
	margin-top: 28px;
}

#video-article .side .list-rank {
	overflow-y: auto;
	border: 1px solid #eee;
	padding: 0 20px 10px;
	margin-top: 10px;
}

#video-article .side .list-rank .number {
	width: 27px;
	left: -7px;
}

@media screen and (max-width: 1600px) {
	#video-article {
		width: 1200px;
	}

	#video-article .main video,
	#video-article .side .list-rank {
		height: 405px;
	}
}

/* 音频 --------------------------*/
.audio-box {
	position: relative;
	display: flex;
	align-items: center;
}

.audio-box .bofang_icon {
	display: inline-block;
	cursor: pointer;
	background: url(../images/voice.png) no-repeat;
	flex-shrink: 0;
}

.audio-box audio {
	opacity: 0;
}

.audio-box .star-time {
	flex-shrink: 0;
}

.audio-box .time-bar {
	position: relative;
	display: inline-block;
	flex-grow: 1;
	z-index: 1;
	cursor: pointer;
	overflow: hidden;
	background-color: #d8d8d8;
}

.audio-box .progressBar {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
	width: 100%;
	height: 100%;
}

.audio-box .time-bar .move-color {
	display: block;
	width: 0;
	background-color: #4395fe;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	z-index: 2;
}

.audio-box .end-time {
	flex-shrink: 0;
}

.audio-box .timeTip {
	position: absolute;
	left: 0;
	z-index: 3;
	text-align: center;
	color: #0772fc;
	width: 40px;
}

/* 音频列表 */
.audio-list {
	display: flex;
	flex-wrap: wrap;
}

.screen + .audio-list {
	margin-top: 30px;
}

.ppt-title + .audio-list {
	margin-top: 15px;
}

.audio-list li {
	height: 180px;
	padding: 20px 20px 0;
	border-radius: 3px;
	margin-right: 30px;
	margin-bottom: 30px;
	width: calc((100% - 90px) / 4);
	border: 1px solid #f1f1f1;
}

.audio-list li:nth-child(4n + 4) {
	margin-right: 0;
}

.wrap--small .audio-list li {
	width: calc((100% - 60px) / 3);
}

.wrap--small .audio-list li:nth-child(4n + 4) {
	margin-right: 30px;
}

.wrap--small .audio-list li:nth-child(3n + 3) {
	margin-right: 0;
}

@media (max-width: 1400px) {
	.audio-list li {
		width: calc((100% - 60px) / 3);
	}

	.audio-list li:nth-child(4n + 4) {
		margin-right: 30px;
	}

	.audio-list li:nth-child(3n + 3) {
		margin-right: 0;
	}
}

.audio-list li .con {
	display: flex;
	align-items: center;
}

.audio-list li .con .poster {
	width: 100px;
	height: 100px;
	margin-right: 15px;
	flex-shrink: 0;
	/* width: 145px; */
	/* padding-right: 45px; */
	/* background: url(../images/voice.png) no-repeat -130px -273px; */
}

.audio-list li .con .poster img {
	width: 100%;
	height: 100%;
}

.audio-list li .con .info {
	flex-grow: 1;
	width: 0;
}

.audio-list li .con .info .title {
	font-size: 16px;
	font-weight: normal;
}

.audio-list li .con .info .type {
	color: #999999;
}

.audio-list li .con .info .download-btn {
	width: 110px;
	line-height: 28px;
	border-radius: 100px;
	display: inline-block;
	margin-top: 10px;
}

.audio-list li .con .info .download-btn .iconfont {
	margin-right: 5px;
}

.audio-list li .audio-box {
	margin-top: 15px;
}

.audio-list li .audio-box .bofang_icon {
	width: 24px;
	height: 23px;
	background-position: -34px -134px;
}

.audio-list li .audio-box .bofang_icon.on {
	background-position: -68px -134px;
}

.audio-list li .audio-box .progressBar {
	background: url(../images/audio-progress.png) repeat-x;
}

.audio-list li .audio-box .star-time {
	color: #666;
	margin: 0 8px;
	font-size: 13px;
}

.audio-list li .audio-box .time-bar {
	height: 24px;
}

.audio-list li .audio-box .end-time {
	color: #666;
	margin-left: 8px;
	font-size: 13px;
}

.audio-list li .audio-box .timeTip {
	top: -20px;
	font-size: 12px;
}

/* 音频内页 */
#audio-detail {
	height: 517px;
	position: relative;
	padding: 0 60px 0;
	margin-bottom: 20px;
}

#audio-detail .img {
	display: block;
	width: 308px;
	height: 211px;
	position: relative;
	margin: 120px auto 0;
}

#audio-detail .img img {
	width: 211px;
	height: 211px;
	position: absolute;
	margin: 0 !important;
}

#audio-detail .img .audio-die {
	width: 211px;
	height: 211px;
	float: right;
	background: url(../images/voice.png) no-repeat 0 -273px;
}

#audio-detail .audio-stick {
	position: absolute;
	left: 480px;
	top: 70px;
	z-index: 2;
	width: 71px;
	height: 155px;
	background: url(../images/voice.png) no-repeat -303px -274px;
	transform: rotate(-34deg);
	transition: all 0.6s ease-in-out;
	transform-origin: right top;
}

#audio-detail .audio-stick.skewing {
	transform: rotate(-10deg);
}

#audio-detail .audio-box {
	margin-top: 58px;
}

#audio-detail .audio-box .bofang_icon {
	width: 50px;
	height: 48px;
	background-position: -104px -134px;
}

#audio-detail .audio-box .bofang_icon.on {
	background-position: -166px -134px;
}

#audio-detail .audio-box .progressBar {
	background: url(../images/voice.png) no-repeat 0 -202px;
}

#audio-detail .audio-box .star-time {
	color: #999;
	margin: 0 21px;
	font-size: 20px;
}

#audio-detail .audio-box .time-bar {
	width: 481px;
	height: 51px;
}

#audio-detail .audio-box .end-time {
	color: #999;
	margin-left: 21px;
	font-size: 20px;
}

#audio-detail .audio-box .timeTip {
	top: -40px;
	font-size: 20px;
}

#audio-side {
	align-self: stretch;
}

/* 课件 --------------------- */
#course-zxx {
	padding-bottom: 40px;
}

/* 课件首页 */
/* 课件列表 */
.course-list a {
	width: 100%;
	height: 0;
	padding-bottom: calc(9 / 16 * 100% + 40px);
	position: relative;
	display: inline-block;
	vertical-align: top;
	text-align: center;
}

.course-list img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: calc(100% - 40px);
}

.course-list h3 {
	position: absolute;
	width: 100%;
	position: absolute;
	bottom: 0;
}

.course-list a .download-btn {
	width: 140px;
	margin: 0 auto;
}

/* 专题 ----------------------- */
/* 图片列表 */
.special-list li {
	width: 192px;
	margin: 20px 20px 0;
	display: inline-block;
	vertical-align: top;
}

.special-list li .img-group {
	width: 192px;
	height: 208px;
	background: url(../images/zhuanti_bg.png) no-repeat;
	padding: 31px 15px 15px 15px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	position: relative;
}

.special-list li .img-group::before {
	content: '';
	width: 100%;
	height: calc(100% - 16px);
	position: absolute;
	top: 16px;
	left: 0;
	background-color: rgba(0, 0, 0, 0.4);
	opacity: 0;
	transition: 0.3s;
	border-radius: 5px;
}

.special-list li:hover .img-group::before {
	opacity: 1;
}

.special-list li .img-group .img-box {
	width: 74px;
	height: 74px;
	text-align: center;
	margin-bottom: 15px;
}

.special-list li .name {
	font-size: 15px;
	padding-top: 5px;
	text-align: center;
}

.special-list li .intro {
	font-size: 12px;
	color: #999;
	display: none;
}

/* 图片分类 */
.special-pic-group {
	border-top: 1px solid #eee;
}

.special-pic-group .group-item-title {
	font-size: 24px;
	font-weight: 600;
	line-height: 25px;
	margin-top: 30px;
	margin-bottom: 20px;
}

.subject-list-more {
	text-align: center;
	padding-top: 10px;
}

.subject-list-more a {
	width: 180px;
	line-height: 42px;
	background-color: #f6f7f9;
	color: #444444;
	border-radius: 3px;
	display: inline-block;
}

.subject-list-more a:hover {
	background-color: #eee;
}

.special-more {
	text-align: center;
	padding: 30px 0 50px;
}

.special-more .btn-default {
	width: 210px;
	line-height: 45px;
	display: inline-block;
	border-radius: 100px;
}

/* 合集 */
.special-group {
	display: flex;
	align-items: flex-start;
}

.special-group .main {
	padding: 4px;
	width: 0;
}

.special-group-main-title {
	height: 46px;
	background-color: #f7f7f7;
}

.special-group-main-title .title {
	font-size: 16px;
	color: #555;
	margin-right: auto;
}

.special-group-main-title::before {
	content: '';
	width: 5px;
	height: 5px;
	display: inline-block;
	border-radius: 10px;
	background-color: #ff752b;
	margin-right: 10px;
	margin-left: 20px;
}

.special-group-main-title span {
	margin-right: 20px;
	color: #fe6b3b;
}

.special-group-main-title span .iconfont {
	color: #bbb;
	margin-right: 5px;
}

.special-group .main table {
	width: 100%;
}

.special-group .main table th {
	border-bottom: 1px solid #ddd;
}

.special-group .main table th,
.special-group .main table td {
	padding: 12px 15px;
}

.special-group .main table td {
	color: #888;
}

.special-group .main table td .layui-form-checkbox {
	margin-left: 20px;
}

.special-group .main table td .shang {
	width: 21px;
	height: 24px;
	display: inline-block;
	vertical-align: middle;
	margin-right: 5px;
	background: url(../images/icon-tag3.png) no-repeat;
	font-size: 0;
}

.special-group .main table .preview {
	font-size: 14px;
	cursor: pointer;
	user-select: none;
}

.special-group .main table .preview:hover {
	color: #0772fc;
}

.special-group .main table .preview::before {
	font-size: 16px;
	margin-right: 3px;
}

.special-group .main .vip-link {
	width: 100%;
	height: 67px;
	display: inline-block;
	font-size: 0;
	margin-top: 10px;
	vertical-align: top;
	background: url(../images/vip_link.png) no-repeat center right;
}

/* 图片模板合集 */
.special-group .main .tupian-vip-link {
	width: 100%;
	height: 67px;
	display: inline-block;
	font-size: 0;
	margin-top: 10px;
	vertical-align: top;
	background: url(../images/tupian_vip_link.png) no-repeat center right;
}

.special-group .main .list-bottom {
	line-height: 70px;
	color: #666;
}

.special-group .main .list-bottom > * {
	margin-left: 15px;
}

.special-group .main .list-bottom .layui-form-checkbox {
	margin-left: 15px;
}

.special-group .main .list-bottom .total {
	margin-right: auto;
}

.special-group .main .list-bottom .total .desc {
	font-size: 12px;
	color: #999;
}

.special-group .main .list-bottom .original {
	margin-left: auto;
}

.special-group .main .list-bottom .original span {
	text-decoration: line-through;
}

.special-group .main .list-bottom .price span {
	font-size: 20px;
}

.special-group .main .special-download-btn {
	width: 110px;
	height: 40px;
	line-height: 40px;
	font-size: 16px;
	margin-right: 10px;
}

.special-group .side {
	width: 330px;
	margin-left: 30px;
	position: sticky;
	top: 76px;
	padding: 8px;
}

.special-group-side-title {
	border-bottom: 1px solid #d5d5d5;
	font-size: 16px;
}

.special-group-side-title .iconfont {
	color: #fe6b3b;
	font-size: 22px;
	margin: 0 5px;
}

.special-group-side-list {
	padding: 0 10px;
}

.special-group-side-list li {
	padding: 0 10px;
	height: 46px;
	display: flex;
	align-items: center;
	font-size: 14px;
}

.special-group-side-list li:not(:last-child) {
	border-bottom: 1px solid #eee;
}

.special-group-side-list li::before {
	content: '';
	width: 5px;
	height: 5px;
	display: inline-block;
	border-radius: 10px;
	background-color: #ff752b;
	margin-right: 10px;
	flex-shrink: 0;
}

.special-group-side-list li a {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.special-bay-pop {
	min-width: 690px;
}

.special-bay-pop .download-con-payment {
	max-width: 100%;
	padding-top: 20px;
}

.special-bay-pop .download-con-payment .title {
	font-size: 22px;
	font-weight: normal;
}

.special-bay-pop .download-con-payment .intro {
	color: #5c5656;
	justify-content: center;
}

.special-bay-pop .download-con-payment .intro,
.special-bay-pop .download-con-payment .intro * {
	font-size: 16px;
}

.special-bay-pop .download-con-payment .intro .item {
	margin: 0 10px;
}

.special-bay-pop .download-con-bottom {
	line-height: 90px;
	margin-top: 38px;
	background-color: #f8f8f8;
	text-align: center;
}

.special-bay-pop .download-con-bottom .vip-link {
	width: 402px;
	height: 39px;
	display: inline-block;
	vertical-align: middle;
	margin: 0 auto;
	font-size: 0;
	background: url(../images/vip_link2.png) #fff;
}

/* 标签 ----------------------- */
#tag .tag-list {
	padding-bottom: 30px;
}

#tag .tag-list a {
	margin-right: 15px;
	margin-top: 15px;
}

#tag .detail {
	margin-bottom: 20px;
}

/* sub-page -----------------------  */
#sub-menu-page header {
	box-shadow: none;
}

.sub-menu {
	position: sticky;
	top: 76px;
	z-index: 9;
	display: flex;
	justify-content: center;
}

.sub-menu a {
	padding-top: 2px;
	line-height: 42px;
	margin: 0 20px;
	font-size: 16px;
}

.sub-menu a.active {
	border-bottom: 3px solid #0772fc;
}

#sub-page .list-img-intro {
	border-top: 1px solid #f1f2f4;
}

/* vip ---------------------------- */
[class^='vip-group--'] {
	display: flex;
	justify-content: space-between;
}

[class^='vip-group--'] li {
	text-align: center;
	user-select: none;
	cursor: pointer;
}

[class^='vip-group--'] li .title {
	font-weight: bold;
	position: relative;
	display: inline-block;
}

[class^='vip-group--'] li .title .tag {
	width: 44px;
	line-height: 22px;
	background: url(../images/tag.png);
	background-size: 100%;
	padding-left: 3px;
	color: #fff;
	font-size: 14px;
	font-weight: normal;
	position: absolute;
}

[class^='vip-group--'] li .price {
	line-height: 30px;
}

[class^='vip-group--'] li .price span {
	margin: 0 3px;
	color: #e92d18;
}

[class^='vip-group--'] li .original {
	line-height: 30px;
	height: 30px;
	color: #666;
	font-size: 13px;
}

[class^='vip-group--'] li .intro span {
	color: #fe3800;
}

[class^='vip-group--'] li .intro p {
	display: flex;
	justify-content: space-between;
}

[class^='vip-group--'] li .intro .iconfont {
	color: #666;
}

[class^='vip-group--'] li .intro .icon-duihao {
	color: #1dbf73;
}

/* 支付二维码 */
.vip-purchase-con {
	padding: 40px 0;
	display: flex;
	justify-content: center;
}

.vip-purchase [class^='purchase--'] {
	width: 183px;
	margin: 0 50px;
}

.vip-purchase [class^='purchase--'] .purchase-qr {
	height: 183px;
}

.vip-purchase [class^='purchase--'] .purchase-desc {
	font-size: 16px;
}

[class^='purchase--'] {
	text-align: center;
}

[class^='purchase--'] .purchase-qr {
	width: 100%;
	padding: 13px;
	display: inline-block;
	background: url(../images/loading.gif) no-repeat center #fff;
	background-size: calc(100% - 26px);
	vertical-align: top;
	border: 1px solid #e0e5ea;
}

.purchase--wx .purchase-qr {
	border-color: #4bb414;
}

.purchase--zfb .purchase-qr {
	border-color: #00aaea;
}

[class^='purchase--'] .purchase-qr img {
	width: 100%;
}

[class^='purchase--'] .purchase-desc {
	justify-content: center;
	height: 40px;
}

[class^='purchase--'] .purchase-desc .iconfont {
	margin-right: 8px;
	font-size: 20px;
}

.purchase--wx .purchase-desc .iconfont {
	color: #4bb414;
}

.purchase--zfb .purchase-desc .iconfont {
	color: #00aaea;
}

/* .vip-group--big */
.vip-group--big li {
	width: 280px;
	padding: 25px 30px 20px;
	border-radius: 10px;
}

.vip-group--big li .title {
	font-size: 26px;
}

.vip-group--big li .title .tag {
	right: -50px;
	top: 0;
}

.vip-group--big li .price {
	font-size: 16px;
	margin-top: 20px;
}

.vip-group--big li .price span {
	font-size: 52px;
}

.vip-group--big li .vip-purchase-btn {
	width: 100%;
	line-height: 44px;
	display: inline-block;
	font-size: 16px;
	margin-top: 10px;
}

.vip-group--big li .intro {
	margin-top: 15px;
	line-height: 32px;
}

/* vip-group--small */
.vip-group--small li {
	width: 220px;
	padding: 0 20px 15px;
	border-radius: 4px;
	border: 1px solid #e0e5ea;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}

.vip-group--small li .title {
	font-size: 20px;
	margin-top: 10px;
}

.vip-group--big li .title .tag {
	right: -50px;
	top: 22px;
}

.vip-group--small li .price {
	font-size: 12px;
	margin-top: 5px;
	color: #373737;
}

.vip-group--small li .price span {
	font-size: 32px;
}

.vip-group--small li .original {
	font-size: 12px;
	margin-top: -10px;
}

.vip-group--small li .intro {
	font-size: 13px;
	margin-top: 5px;
	line-height: 26px;
	border-top: 1px solid #eee;
	padding-top: 10px;
}

.vip-group--small li::after {
	width: 30px;
	height: 28px;
	content: '';
	position: absolute;
	right: 0;
	bottom: 0;
	display: none;
}

.vip-group--small li.active::after {
	display: inline-block;
}

.vip-group--small.vip-group--ppt li.active {
	border-color: #0772fc;
	background-color: #f6f9ff;
}

.vip-group--small.vip-group--ppt li::after {
	background: url(../images/checked.png);
}

.vip-group--small.vip-group--pic li.active {
	border-color: #ff655b;
	background-color: #fff3f2;
}

.vip-group--small.vip-group--pic li::after {
	background: url(../images/checked2.png);
}

/* 购买vip */
.vip-banner {
	height: 270px;
	background: url(../images/vip-bg.jpg) center 0 no-repeat;
	color: #fff;
	text-align: center;
}

.vip-banner h1 {
	padding-top: 20px;
	font-size: 38px;
	font-weight: bold;
}

.vip-banner h2 {
	font-size: 25px;
}

.vip-banner h2 span {
	display: inline-block;
	padding: 0 30px;
}

#vip .vip-tab .tab-title--click {
	width: 380px;
	height: 44px;
	background-color: rgba(255, 255, 255, 0.2);
	border-radius: 100px;
	padding: 3px;
	margin: -120px auto 0;
}

#vip .vip-tab .tab-title--click li {
	width: 170px;
	line-height: 38px;
	font-size: 20px;
	text-align: center;
	color: #fff;
}

#vip .vip-tab .tab-title--click li.active {
	background-color: #fff;
	border-radius: 100px;
	color: #333;
}

#vip .vip-group--big {
	margin-top: 25px;
	padding-bottom: 40px;
}

#vip .vip-group--ppt li.active {
	box-shadow: 0 0 8px 0 rgba(176, 211, 255, 0.8) inset, 0 0 12px 0 rgba(69, 79, 102, 0.4);
	background-color: #f8feff;
}

#vip .vip-group--pic li.active {
	box-shadow: 0 0 8px 0 rgba(255, 211, 176, 0.8) inset, 0 0 12px 0 rgba(102, 79, 69, 0.4);
	background-color: #fff8f8;
}

.vip-desc li {
	padding: 10px 0;
	font-size: 17px;
	display: flex;
	align-items: center;
	flex-direction: column;
}

.vip-desc li .iconfont {
	width: 74px;
	line-height: 72px;
	border-radius: 100px;
	border: 1px solid #0772fc;
	background-color: #edf4fd;
	color: #0772fc;
	font-size: 28px;
	text-align: center;
}

.vip-login {
	text-align: center;
	margin-bottom: 40px;
}

.vip-login .btn-error {
	width: 180px;
	line-height: 50px;
	display: inline-block;
	font-size: 18px;
}

.vip-intro li {
	margin-top: 50px;
	background-repeat: no-repeat;
	height: 337px;
	user-select: none;
	position: relative;
}

.vip-intro li:nth-child(odd) {
	background-position: right 0;
}

.vip-intro li:nth-child(even) {
	text-align: right;
}

.vip-intro li:nth-child(1) {
	background-image: url(../images/vip-intro2.jpg);
}

.vip-intro li:nth-child(2) {
	height: 387px;
	background-image: url(../images/vip-intro1.jpg);
}

.vip-intro li:nth-child(3) {
	background-image: url(../images/vip-intro3.jpg);
}

.vip-intro li:nth-child(4) {
	background-image: url(../images/vip-intro4.jpg);
}

.vip-intro li:nth-child(4) .kf {
	width: 130px;
	position: absolute;
	left: 56px;
	top: 48px;
}

.vip-intro .title {
	font-size: 26px;
	margin: 50px 0 15px;
	font-weight: bold;
}

.vip-intro .text {
	font-size: 16px;
	line-height: 34px;
	display: flex;
	align-items: center;
}

.vip-intro .text .iconfont {
	color: #0772fc;
}

.vip-intro li:nth-child(odd) .iconfont {
	margin-right: 10px;
}

.vip-intro li:nth-child(even) .text {
	flex-direction: row-reverse;
}

.vip-intro li:nth-child(even) .iconfont {
	margin-left: 10px;
}

.vip-intro li .btn-default {
	width: 156px;
	line-height: 48px;
	margin-top: 30px;
	font-size: 16px;
	display: inline-block;
}

.vip-intro li .qq-btn {
	width: 80px;
	line-height: 28px;
	display: inline-block;
	border-radius: 4px;
	font-size: 14px;
}

.vip-help {
	background: #fafbfd;
	padding: 50px 0;
	margin-top: 30px;
}

.vip-help-title {
	font-size: 36px;
	text-align: center;
	font-weight: bold;
}

.vip-help ul {
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.vip-help ul li {
	width: 500px;
	margin: 10px 0;
}

.vip-help ul .title {
	font-size: 20px;
	font-weight: bold;
	color: #222;
}

.vip-help ul .group > * {
	color: #666;
	font-size: 15px;
}

/* 购买弹窗 */

.purchase {
	min-width: 900px;
	height: 480px;
	display: flex;
}

.purchase .side {
	width: 180px;
	text-align: center;
}

.purchase .side .title {
	font-size: 20px;
	color: #111;
	padding-top: 30px;
	padding-bottom: 10px;
	font-weight: bold;
}

.purchase .side .intro {
	line-height: 34px;
	font-size: 13px;
}

.purchase .side .intro * {
	color: #666;
}

.purchase .side .intro p span {
	margin-left: 10px;
}

.purchase .side .iconfont {
	display: none;
}

.purchase .main {
	padding: 0 15px;
}

.purchase .vip-group--small li {
	width: 160px;
	margin-top: 45px;
	padding-left: 0;
	padding-right: 0;
}

.purchase .vip-group--small li .title {
	font-size: 18px;
}

.purchase .vip-group--small .title .tag {
	width: 36px;
	font-size: 12px;
	line-height: 17px;
	right: -38px;
	top: 8px;
}

.purchase .vip-group--small .intro {
	display: none;
}

.purchase .con {
	border-top: 1px solid #eee;
	margin-top: 15px;
	padding-top: 15px;
	display: flex;
}

.purchase .con [class^='purchase--'] {
	width: 138px;
	margin-right: 30px;
}

.purchase .con [class^='purchase--'] .purchase-qr {
	height: 138px;
	padding: 10px;
	background-size: 120px;
	border-color: #e0e5ea;
}

.purchase .con .info {
	margin-left: 15px;
}

.purchase .con .info .price {
	font-size: 16px;
}

.purchase .con .info #purchase-price {
	margin-right: 5px;
	font-size: 36px;
	color: #e92d18;
	font-weight: bold;
}

.purchase .con .info .info-desc .iconfont {
	margin-right: 8px;
	font-size: 24px;
}

.purchase .con .info .info-desc .icon-weixin1 {
	color: #4bb414;
}

.purchase .con .info .info-desc .icon-zhifubao {
	color: #00aaea;
}

.purchase .desc {
	display: flex;
	align-items: flex-start;
	color: #666;
	font-size: 12px;
	padding: 10px 20px;
}

.purchase .desc .label {
	flex-shrink: 0;
}

/* about --------------------- */
.about {
	padding: 30px 0;
}

.about .side {
	width: 220px;
	padding: 20px 0 40px;
	margin-right: 30px;
	background-color: #ebeff2;
	position: sticky;
	top: 110px;
	height: 300px;
}

.about .side li a {
	width: 100%;
	padding-left: 50px;
	height: 50px;
	display: flex;
	align-items: center;
	font-size: 16px;
}

.about .side li.active a {
	background-color: #0772fc;
	color: #fff;
}

.about .side li .iconfont {
	width: 25px;
}

.about .main {
	background: #fff;
	padding: 30px 40px;
}

.about .about-title {
	font-size: 28px;
	text-align: center;
	display: block;
}

.about .about-article {
	font-size: 16px;
	padding: 30px 0;
}

.about .about-article p {
	font-size: 16px;
}

.about .about-article .n-ppt_didu {
	margin-top: 20px;
	border-top: 1px solid #eee;
	padding-top: 20px;
}

.about .about-article .n-ppt_didu > span {
	font-weight: bold;
}

.about .about-article .n-ppt_didu dt {
	font-size: 15px;
	margin-top: 10px;
	padding-left: 10px;
}

.about .about-article .n-ppt_didu dd {
	display: flex;
	flex-wrap: wrap;
	color: #aaa;
	font-size: 14px;
	padding: 10px 0 20px;
}

.about .about-article .n-ppt_didu dd a {
	margin: 0 15px;
	white-space: nowrap;
	color: #666;
}

.about .about-article .n-ppt_didu dd a:hover {
	color: #0772fc;
}

/* sign ------------------------ */

.sign {
	min-width: 700px;
	height: 480px;
	display: flex;
}

/* sign .side */
.sign .side {
	width: 320px;
	display: flex;
	flex-direction: column;
	padding-top: 140px;
	background: url(../images/logo-white.png) no-repeat center 60px, url(../images/sign-bg.jpg);
	user-select: none;
}

.sign .side dd {
	display: flex;
	align-items: center;
	height: 46px;
	padding-left: 75px;
	color: #fff;
}

.sign .side dd .iconfont {
	margin-right: 10px;
}

/* sign-main */
.sign .main {
	width: 380px;
	padding: 20px 40px 0;
	position: relative;
}

.sign-title,
.sign-tab li {
	font-size: 18px;
	line-height: 30px;
	font-weight: bold;
	user-select: none;
}

.sign-tab {
	text-align: center;
	border-bottom: 1px solid #eee;
}

.sign-tab li {
	cursor: pointer;
	position: relative;
	display: inline-block;
	margin: 0 30px;
	line-height: 46px;
}

.sign-tab li:not(.active) {
	color: #666;
	font-weight: normal;
}

.sign-tab li.active {
	border-bottom: 2px solid #2c7dfa;
}

/* login-wx */
#login-wx img {
	margin-top: 20px;
	width: 206px;
	height: 206px;
	border: 1px solid #eee;
	border-radius: 4px;
	padding: 10px;
}

#login-wx .desc {
	margin-top: 5px;
	font-size: 13px;
	color: #666;
}

/* sign-desc */
.sign-desc {
	margin-top: 10px;
	margin-bottom: -5px;
}

.sign-desc .layui-form-checkbox[lay-skin='primary'] i {
	top: 1px;
}

/* login-change */
.login-change {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	position: absolute;
	bottom: 0;
	left: 40px;
	right: 40px;
}

.login-change .title {
	width: 100%;
	display: flex;
	align-items: center;
	font-size: 12px;
	color: #999;
	white-space: nowrap;
}

.login-change .title::before,
.login-change .title::after {
	content: '';
	height: 1px;
	flex-grow: 1;
	background: #eee;
	display: inline-block;
}

.login-change .title::before {
	margin-right: 10px;
}

.login-change .title::after {
	margin-left: 10px;
}

.login-change a {
	display: flex;
	flex-direction: column;
	margin: 10px 30px 15px;
	cursor: pointer;
	color: #777;
	font-size: 13px;
	transition: 0.3s;
	user-select: none;
}

.login-change a .iconfont {
	width: 42px;
	height: 42px;
	line-height: 42px;
	background-color: #f3f4f9;
	font-size: 24px;
	border-radius: 100%;
	text-align: center;
	margin-bottom: 3px;
	transition: 0.3s;
}

.login-change a.qq .iconfont {
	color: #0fa5e9;
}

.login-change a.wx .iconfont {
	color: #00c800;
}

.login-change a:hover {
	color: #333;
}

.login-change a:hover .iconfont {
	background-color: #eee;
}

/* forgot */
.forgot-back {
	position: absolute;
	right: 30px;
	bottom: 20px;
	color: #666;
}

.forgot-back .iconfont {
	margin-right: 5px;
}

/* user -------------------------------*/
.user {
	margin-top: 30px;
	margin-bottom: 50px;
	align-items: stretch;
}

/* user-side */
.user .side {
	width: 215px;
	margin-right: 40px;
	background-color: #ebeff2;
}

.user-side-avatar {
	width: 110px;
	height: 110px;
	border-radius: 100%;
	position: relative;
	margin: 30px auto 10px;
	border: 2px solid #fff;
}

.user-side-info {
	display: flex;
	flex-direction: column;
	text-align: center;
	font-size: 16px;
	padding: 0 15px;
}

.user-side-info .level {
	font-size: 14px;
}

.user-side-menu {
	padding: 20px 0;
	width: 100%;
}

.user-side-menu li a {
	width: 100%;
	padding-left: 53px;
	height: 50px;
	display: flex;
	align-items: center;
}

.user-side-menu li.active a {
	border-left: 3px solid #0772fc;
	background-color: #fff;
	color: #0772fc;
	padding-left: 50px;
}

.user-side-menu li .iconfont {
	width: 25px;
}

/* user-main */
.user .main {
	padding-bottom: 30px;
	min-height: calc(100vh - 80px - 55px - 90px);
}

.user .main .list {
	margin-top: 5px;
}

/* user-title */
.user .ppt-title {
	border-bottom: 1px solid #eee;
	padding: 20px 0 5px;
	justify-content: space-between;
	height: 65px;
}

.user .ppt-title .name {
	font-size: 18px;
}

.user .ppt-title .vip span {
	font-size: 18px;
	font-weight: bold;
	margin-left: 5px;
}

.user .ppt-title .price span {
	font-size: 28px;
}

/* user-tab */
.user-tab {
	border-bottom: 1px solid #eee;
	display: flex;
}

.user-tab a {
	line-height: 50px;
	font-size: 16px;
	padding: 0 10px;
	margin-right: 40px;
}

.user-tab a.active {
	font-weight: bold;
	border-bottom: 3px solid #0772fc;
}

/* user-table  */
.user-table {
	margin-top: 25px;
	width: 100%;
	user-select: none;
}

.user-table a {
	word-break: break-all;
	word-wrap: break-word;
}

.user-table a + a {
	margin-left: 10px;
}

.user-table th,
.user-table td {
	border: 1px solid #e5e6e7;
	padding: 15px 25px;
	text-align: center;
}

.user-table th {
	background-color: #f5f7f8;
}

.user-table .table-title {
	user-select: none;
	word-break: break-all;
	text-align: left;
	word-wrap: break-word;
}

.user-table .table-title .icon-duihao2 {
	color: #ccc;
	margin-right: 10px;
	display: none;
}

.user-table .table-title.checked .icon-duihao2 {
	color: #0772fc;
}

.user-table .table-info {
	display: none;
	background-color: #fafcff;
}

.user-table .table-info td {
	text-align: left;
	color: #666;
	font-size: 13px;
}

.user-table .remove-btn {
	cursor: pointer;
}

.user-table .remove-btn:hover {
	color: #0772fc;
}

.user-table.oper .table-title {
	cursor: pointer;
}

.user-table.oper .table-title .icon-duihao2 {
	display: inline-block;
}

.user-table.oper .table-title a:hover {
	color: #333;
}

/* user-index */
.user-index-welcome {
	padding: 10px 0;
}

.user-index-welcome span {
	margin: 0 10px;
}

.user-index-info li {
	border-bottom: 1px solid #eee;
	height: 80px;
	display: flex;
	align-items: center;
}

.user-index-info .label {
	font-size: 15px;
	margin-left: 90px;
	width: 250px;
}

.user-index-info .label .iconfont {
	width: 30px;
	line-height: 30px;
	border-radius: 100%;
	margin-right: 30px;
	display: inline-block;
	text-align: center;
	color: #fff;
}

.user-index-info li:nth-child(1) .label .iconfont {
	background-color: #ff5859;
}

.user-index-info li:nth-child(2) .label .iconfont {
	background-color: #ff8888;
}

.user-index-info li:nth-child(3) .label .iconfont {
	background-color: #ff7d4a;
}

.user-index-info li:nth-child(4) .label .iconfont {
	background-color: #7fcd4b;
}

.user-index-info li:nth-child(5) .label .iconfont {
	background-color: #23a0f0;
}

.user-index-info li:nth-child(6) .label .iconfont {
	background-color: #f3cd21;
}

.user-index-info .desc {
	color: #777;
}

.user-index-info .desc.img-box {
	width: 50px;
	height: 50px;
}

.user-index-info .desc .iconfont {
	margin-right: 10px;
}

.user-index-info .desc .icon-tanhao1 {
	color: #aaa;
}

.user-index-info .desc .icon-duihao2 {
	color: #87d33a;
}

.user-index-info .oper {
	width: 90px;
	text-align: center;
	margin-right: 20px;
	margin-left: auto;
}

.user-index-info li .oper:not([class*='btn-']) {
	color: #0772fc;
}

.user-index-info [class*='btn-'] {
	line-height: 30px;
	border-radius: 4px;
}

/* user-vip */
#user-vip .vip-group--small {
	margin-top: 25px;
}

#user-vip .ppt-title .price {
	margin-left: 250px;
}

/* user-order */
#user-order .user-table th {
	padding: 10px 25px 10px 12px;
	color: #666;
}

#user-order .user-table th span {
	margin: 0 12px;
}

#user-order .user-table .remove-btn {
	float: right;
}

#user-order .user-table td .price {
	font-size: 20px;
	margin-right: 3px;
}

#user-order .user-table td [class*='btn-'] {
	width: 90px;
	line-height: 30px;
	display: inline-block;
	border-radius: 4px;
}

/* user-exchange */
#user-exchange .form {
	width: 270px;
	margin: 0 auto;
	padding: 10px 0 20px;
}

#user-exchange .form .item input {
	text-align: center;
}

#user-exchange .form-submit {
	width: 160px;
	margin: 25px auto;
	border-radius: 6px;
}

#user-exchange .desc {
	padding: 0 40px;
}

#user-exchange .desc p {
	line-height: 40px;
	display: flex;
	align-items: center;
	color: #666;
}

#user-exchange .desc p span {
	margin-right: 3px;
}

#user-exchange .desc p::before {
	content: '';
	width: 8px;
	height: 8px;
	display: inline-block;
	border-radius: 100%;
	background-color: #666;
	margin-right: 10px;
}

/* user-notice */
#user-notice .user-table .table-title {
	cursor: pointer;
}

/* footer -------------------- */
/* tag-wrap */
.tag-wrap {
	background-color: #f4f8fe;
	margin-top: 30px;
	text-align: center;
}

.tag-wrap .title {
	padding-top: 30px;
	font-size: 28px;
	font-weight: bold;
}

.tag-wrap .group {
	display: flex;
	justify-content: center;
	align-content: flex-start;
	flex-wrap: wrap;
	padding: 10px 0 40px;
}

.tag-wrap .group a {
	border: 1px solid #dfe3e8;
	line-height: 36px;
	/* width: 100px; */
	padding: 0 20px;
	border-radius: 100px;
	margin: 15px 10px 0;
	background-color: rgba(255, 255, 255, 0.3);
}

.tag-wrap .group a:hover {
	border-color: #0772fc;
	background-color: #0772fc;
	color: #fff;
}

/* right-fixed */
#right-fixed {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 44px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	z-index: 99;
}

#right-fixed li > a {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	color: #666;
	font-size: 12px;
	line-height: 1.2;
	padding: 15px 0;
	position: relative;
	text-align: center;
}

#right-fixed li:not(:first-child) > a::after {
	position: absolute;
	left: 5px;
	right: 5px;
	top: 0;
	content: '';
	background: #ddd;
	height: 1px;
	transition: 0.2s;
}

#right-fixed li > a .iconfont {
	color: #42a4ff;
	font-size: 20px;
	margin-bottom: 3px;
}

#right-fixed li:hover > a,
#right-fixed li:hover > a .iconfont {
	color: #fff;
}

#right-fixed li:hover > a {
	background-color: #42a4ff;
}

#right-fixed li:hover > a::after {
	background-color: #42a4ff;
}

#right-fixed li:hover + li a::after {
	display: none;
}

#right-fixed li.vip-img {
	position: absolute;
	border: none;
	left: -120px;
	top: 50%;
	margin-top: -250px;
}

#right-fixed li.vip-img:hover > a {
	background: none;
}

#right-fixed li.vip-img + li > a::after {
	display: none;
}

#right-fixed li.vip-img {
	animation: right-fixed-vip-img 1.5s ease-in-out infinite;
	-webkit-animation: right-fixed-vip-img 1.5s ease-in-out infinite;
	-moz-animation: right-fixed-vip-img 1.5s ease-in-out infinite;
	-o-animation: right-fixed-vip-img 1.5s ease-in-out infinite;
}

@keyframes right-fixed-vip-img {
	0% {
		transform: translate(0px, 0px);
	}

	50% {
		transform: translate(0px, -5px);
	}

	100% {
		transform: translate(0px, 0px);
	}
}

#right-fixed li.vip-img .vip-img-close {
	cursor: pointer;
	position: absolute;
	right: 0;
	top: 0;
	background: #fff;
	border-radius: 100%;
	z-index: 1;
}

#right-fixed li > a .tip {
	color: #fff;
	background: #f30000;
	position: absolute;
	top: 2px;
	right: 2px;
	display: inline-block;
	text-align: center;
	width: 20px;
	line-height: 20px;
	border-radius: 100%;
	font-size: 12px;
	border: 1px solid #fff;
}

#right-fixed .conceal-btn--hover::before {
	content: '';
	width: 20px;
	height: 100%;
	position: absolute;
	left: -20px;
	top: 0;
	display: none;
}

#right-fixed .conceal-box:hover .conceal-btn--hover::before {
	display: inline-block;
}

#right-fixed-kf {
	width: 175px;
	left: -185px;
	top: 0;
	transform: translate(0, 0);
	text-align: center;
	color: #666;
	font-size: 13px;
}

#right-fixed-kf p {
	padding-top: 20px;
}

#right-fixed-kf .qq {
	width: 80px;
	line-height: 24px;
	border-radius: 100px;
	margin-top: 10px;
	display: inline-block;
}

#right-fixed-kf .qr {
	padding-top: 15px;
	line-height: 30px;
	margin: 15px auto 10px;
	border-top: 1px solid #ddd;
	width: 129px;
	font-size: 12px;
}

.feedback-pop .layui-layer-title {
	text-align: center;
	font-size: 18px;
	border-bottom: none;
	margin-bottom: -20px;
}

.feedback-pop textarea {
	height: 180px;
}

.feedback-pop .layui-layer-btn0 {
	max-width: 250px;
}

/* footer */
footer {
	background-color: #2b3139;
}

footer .wrap {
	text-align: center;
}

footer a:hover {
	color: #fff !important;
}

footer .foot-nav {
	width: 100%;
	height: 40px;
	padding-top: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.3);
	background-color: #1e2733;
}

footer .foot-nav a {
	margin: 0 20px;
	color: rgba(255, 255, 255, 0.7);
}

footer .con {
	display: flex;
	align-items: flex-start;
	padding: 50px 0 20px;
}

footer .con .logo {
	width: 260px;
	height: 200px;
	border-right: 1px solid #5b5b5b;
	background: url(../images/logo-white.png) no-repeat 0 center;
}

footer .con dl {
	text-align: left;
	padding-left: 100px;
	line-height: 36px;
}

footer .con dt,
footer .con dt > * {
	color: #eee;
	font-size: 16px;
}

footer .con dd {
	display: flex;
	flex-direction: column;
}

footer .con dd > * {
	color: #95989c;
}

footer .con .qr {
	width: 158px;
	text-align: center;
	color: #999;
}

footer .con .qr.kf {
	margin-left: 80px;
	margin-right: 45px;
}

footer .con .qr img {
	width: 100%;
	margin-bottom: 5px;
	background-color: #fff;
}

footer .con .time {
	color: #d0d0d0;
	line-height: 3;
}

footer .con .qq {
	width: 140px;
	line-height: 36px;
	display: inline-block;
	margin-top: 10px;
}

footer .copyright {
	width: 100%;
	line-height: 46px;
	text-align: center;
	color: #888;
	font-size: 12px;
	background-color: #1e2733;
}

footer .copyright a {
	color: #888;
}

/*模板生成文章样式 liuqi*/
.main-content {
	width: 53%;
	height: 210px;
	background: #fff;
	padding-top: 30px;
	border: 1px solid #eee;
	margin: 0 auto;
}

.main-content-detail {
	width: 1000px;
	height: 200px;
	margin-left: 10px;
}

.content-detail {
	width: 828px;
	height: 150px;
	float: right;
}

.main-detail {
	width: 150px;
	height: 150px;
	overflow: hidden;
	float: left;
}

/*微信登录二维码过期后的样式 liuqi*/
.login-action-code-img {
	margin: 0px auto;
	align-items: center;
	justify-content: center;
	border: 1px solid rgb(225, 225, 225);
	background-color: rgb(245, 245, 245);
	text-align: center;
	width: 175px !important;
	height: 175px !important;
	margin-top: 20px;
	width: 206px;
	height: 206px;
	border: 1px solid #eee;
	border-radius: 4px;
	padding: 10px;
	position: relative;
	display: none;
}

.login-action-code-img p {
	position: absolute;
	left: 0;
	top: 67px;
	width: 100%;
	line-height: 32px;
	box-sizing: border-box;
	font-size: 14px;
}

.login-action-code-img a {
	color: #ff0000;
	margin: 0 4px 0;
}
.keyword {
	height: 32px;
	line-height: 30px;
	padding: 5px 16px;
	border-radius: 16px;
	margin: 0 8px 20px 0;
	font-size: 10px;
	color: #888888;
	letter-spacing: 0.05em;
	border: 1px solid #ddd;
}
.bottom_advice {
	display: inline-block;
	height: 28px;
	padding: 0 16px;
	border: 1px solid #e9e9e9;
	background-color: #fff;
	line-height: 26px;
	margin-right: 10px;
	color: #3b3b3b;
	border-radius: 14px;
}

/* 会员购买弹窗 23230417 */
.upgradebody {
	min-width: 920px;
	height: 550px;
}
.upgrade_pop {
	width: 100%;
	height: 100%;
	border-radius: 6px;
	background: #4359e5 url(../images/vip_bg.png) 80% top no-repeat;
	display: flex;
	flex-wrap: wrap;
}
.upgrade_pop .upgrade_title {
	width: 100%;
	height: 100px;
	padding: 25px 40px;
	display: flex;
}
.upgrade_pop .upgrade_title .info {
	color: #fff;
	width: 50%;
}
.upgrade_pop .upgrade_title .info img {
	width: 48px;
	height: 48px;
	border: 1px solid #fff;
	border-radius: 48px;
	background: #ccc;
	margin-right: 15px;
	float: left;
}
.upgrade_pop .upgrade_title .info > p {
	font-size: 15px;
	line-height: 24px;
}
.upgrade_pop .upgrade_title .info > p > span {
	margin-right: 20px;
}
.upgrade_pop .upgrade_title .info > em {
	font-size: 12px;
	text-align: center;
	width: 60px;
	height: 20px;
	line-height: 20px;
	border-radius: 4px;
	background: rgba(0, 0, 0, 0.3);
	transform: skew(-5deg);
	display: inline-block;
}
.upgrade_pop .upgrade_title .text {
	color: #fff;
	font-size: 24px;
	height: 24px;
	line-height: 24px;
	margin-top: 20px;
}
.upgrade_pop .upgrade_block {
	width: 100%;
	height: 450px;
	padding: 30px 25px;
	border-radius: 12px;
	background: #f8fafb;
	display: flex;
}
.upgrade_pop .upgrade_block .l {
	width: 175px;
	margin-right: 25px;
	flex-shrink: 0;
}
.upgrade_pop .upgrade_block .l .top {
	color: #000;
	font-size: 16px;
	display: flex;
	align-items: center;
}
.upgrade_pop .upgrade_block .l .top strong {
	color: #fff;
	font-size: 14px;
	text-align: center;
	width: 34px;
	height: 17px;
	line-height: 17px;
	background: #475de7;
	border-radius: 3px;
	transform: skew(-15deg);
	margin-right: 5px;
}
.upgrade_pop .upgrade_block .l li {
	color: #888;
	font-size: 13px;
	line-height: 15px;
	margin-top: 25px;
	display: flex;
}
.upgrade_pop .upgrade_block .l li i {
	color: #fff;
	font-size: 12px;
	width: 15px;
	height: 15px;
	background: #9e9fa0;
	border-radius: 15px;
	margin-right: 5px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.upgrade_pop .upgrade_block .l a {
	color: #000;
	text-align: center;
	width: 100%;
	height: 40px;
	line-height: 38px;
	border: 1px solid #ccc;
	border-radius: 5px;
	margin-top: 35px;
	display: block;
}
.upgrade_pop .upgrade_block .r {
	width: 100%;
}
.upgrade_pop .upgrade_block .r .type_list {
	width: 100%;
	display: flex;
	justify-content: space-between;
}
.upgrade_pop .upgrade_block .r .type_list li {
	width: 155px;
	height: 170px;
	border: 2px solid #fff;
	background: #fff;
	padding: 0 13px;
	box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.1);
	border-radius: 15px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	cursor: pointer;
}
.upgrade_pop .upgrade_block .r .type_list .slt {
	border: 2px solid #475de7;
}
.upgrade_pop .upgrade_block .r .type_list strong {
	color: #000;
	font-size: 18px;
}
.upgrade_pop .upgrade_block .r .type_list .price {
	color: #fe5200;
	font-weight: bold;
}
.upgrade_pop .upgrade_block .r .type_list .price em {
	font-size: 24px;
	font-style: normal;
}
.upgrade_pop .upgrade_block .r .type_list .notice {
	color: #fe5200;
	font-size: 12px;
	text-align: center;
	width: 100%;
	height: 24px;
	line-height: 22px;
	border: 1px solid #fe5200;
	border-radius: 4px;
}
.upgrade_pop .upgrade_block .r .type_list .mess {
	font-size: 12px;
	height: 24px;
	line-height: 24px;
	margin-top: 10px;
}
.upgrade_pop .upgrade_block .r .type_list .tips {
	color: #fff;
	font-size: 12px;
	height: 22px;
	line-height: 22px;
	padding: 0 8px;
	background: #ff5032;
	border-radius: 0 7px 0 7px;
	position: absolute;
	right: -2px;
	top: -10px;
}
.upgrade_pop .upgrade_block .r .type_list .count_slt {
	font-size: 12px;
	width: 100%;
	margin-top: 10px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.upgrade_pop .upgrade_block .r .type_list .count_slt > span {
	font-size: 12px;
	height: 24px;
	line-height: 22px;
	padding: 0 3px;
	border: 1px solid #cccdcf;
	border-radius: 3px;
	margin: 0 2px;
}
.upgrade_pop .upgrade_block .r .type_list .count_slt .active {
	color: #fff;
	border: 1px solid #475de7;
	background: #475de7 url(../images/vip_ico01.png) top right no-repeat;
}
.upgrade_pop .upgrade_block .price_block {
	width: 100%;
	height: 200px;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1);
	margin-top: 25px;
	padding: 25px 20px;
	display: flex;
	position: relative;
}
.upgrade_pop .upgrade_block .price_block .qr_box {
	font-size: 13px;
	text-align: center;
	width: 120px;
	margin-right: 20px;
}
.upgrade_pop .upgrade_block .price_block .qr_box .img {
	width: 120px;
	height: 120px;
	padding: 8px;
	border: 1px solid #f2f2f2;
	background: url(../images/loading.gif) center no-repeat;
	background-size: 100px 100px;
	border-radius: 5px;
	margin-bottom: 5px;
}

.upgrade_pop .upgrade_block .price_block .qr_box img {
	width: 100%;
	height: 100%;
	border-radius: 5px;
}
.upgrade_pop .upgrade_block .price_block .qr_box p {
	display: flex;
	align-items: center;
	justify-content: center;
}
.upgrade_pop .upgrade_block .price_block .qr_box i {
	font-size: 20px;
	margin-right: 5px;
}
.upgrade_pop .upgrade_block .price_block .qr_box.wx i {
	color: #00c800;
}
.upgrade_pop .upgrade_block .price_block .qr_box.ali i {
	color: #00a0ea;
}
.upgrade_pop .upgrade_block .price_block .price_list {
	line-height: 30px;
	margin-top: 20px;
}
.upgrade_pop .upgrade_block .price_block .price_list dd {
	display: flex;
}
.upgrade_pop .upgrade_block .price_block .price_list span {
	color: #999;
	font-size: 13px;
}
.upgrade_pop .upgrade_block .price_block .price_list p {
	color: #fe5200;
}
.upgrade_pop .upgrade_block .price_block .price_list strong {
	font-size: 30px;
}
.upgrade_pop .upgrade_block .price_block .price_notice {
	position: absolute;
	right: 20px;
	bottom: 20px;
}
.upgrade_pop .upgrade_block .price_block .price_notice .link {
	color: #475de7;
	font-size: 13px;
	cursor: pointer;
	position: relative;
}
.upgrade_pop .upgrade_block .price_block .price_notice .link i {
	font-size: 13px;
	margin-left: 5px;
}
.upgrade_pop .upgrade_block .price_block .price_notice .pop {
	width: max-content;
	padding: 10px;
	border-radius: 5px;
	box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2);
	background: #fff;
	position: absolute;
	top: -80px;
	right: 0px;
	display: none;
}
.upgrade_pop .upgrade_block .price_block .price_notice .pop > em {
	width: 0;
	height: 0px;
	border: 8px solid transparent;
	border-top: 8px solid #fff;
	position: absolute;
	bottom: -16px;
	right: 30px;
}


.excellent_articles_box {
	width: 100%;
	margin-top: 10px;
	display: inline-block;
	position: relative;
}
.excellent_articles_box .excellent_star {
	float: right;
	font-size: 14px;
	color: #999;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
}
.excellent_articles_box li.excellent_articles_row {
	float: left;
	width: 100%;
	overflow: hidden;
	line-height: 44px;
	/* border-bottom: 1px solid #eaeaea; */
	padding: 0 2%;
	border: 1px solid #eaeaea;
	border-top: 0;
	box-sizing: border-box;
	height: 44px;
}
.excellent_articles_box li.excellent_articles_row a {
	float: left;
	width: 100%;
}
.excellent_articles_row em {
	height: 22px;
	background: url(../images/one_dow_icon.2.png) no-repeat -1px -103px;
	float: left;
	width: 19px;
	margin-top: 10px;
	background-size: 100%;
	border: 1px solid #d0d0d0;
	border-radius: 2px;
	margin-right: 14px;
}
.excellent_articles_box .excellent_title {
	float: left;
	color: #1c69cc;
	font-weight: 700;
	font-size: 17px;
	width: 50%;
}
.excellent_articles_row i {
	height: 15px;
	background: url(../images/search_icon.png) no-repeat 4px -36px;
	float: left;
	width: 81px;
}
.excellent_articles_box li.excellent_articles_row:first-child {
	margin-top: 40px;
}
.excellent_articles_box .excellent_articles_title {
	float: left;
	background: #f5f5f8;
	padding-bottom: 0;
	height: 43px;
	line-height: 43px;
	width: 100%;
	box-sizing: border-box;
	display: none;
	position: absolute;
	border: 1px solid #f0f0f0;
	color: #666;
	font-weight: 700;
	font-size: 17px;
	top: -4px;
}
.excellent_articles_box li.excellent_articles_row + li.excellent_articles_title {
	display: block;
}
.excellent_articles_box .excellent_articles_title:before {
	float: left;
	content: '';
	width: 32px;
	height: 20px;
	margin: 0px 9px;
	margin-top: 12px;
	border-radius: 60px;
	background: url(../images/one_dow_icon.3.png) no-repeat 6px -301px;
}