/* 通用样式 */

/* 顶部 */
.header {
	height: 100px;
	padding-top: 20px;
}

.search-box {
	padding: 7.5px 0;
	position: relative;
	width: 450px;
	height: 60px;
	font-size: 0;
}

.search-box .search-input {
	border: 1px solid #88c322;
	background: rgba(136, 195, 36, .1);
	width: 100%;
	height: 100%;
	padding: 0 36px;
	border-radius: 22.5px;
}

.search-box .search-btn {
	position: absolute;
	width: 24px;
	height: 60px;
	background: url(../img/ico/search.png) center center no-repeat;
	background-size: 100% auto;
	display: block;
	right: 36px;
	top: 0;
	z-index: 10;
}

.user-box {
	width: 250px;
	height: 60px;

}

.login-btn {
	margin-right: 24px;
}

.user-ava {
	height: 100%;
	width: 100%;
	position: relative;
	padding: 7.5px 0;
}

.user-box .ava-img {
	width: 45px;
	height: 45px;
	border: 1px solid #88C322;
	border-radius: 22.5px;
	overflow: hidden;
	margin-right: 12px;
}

.user-box .ava-img>img {
	width: 100%;
	height: 100%;
}

.user-box .quit-btn {
	margin-left: 24px;
	flex: none;
}

.user-name {
	cursor: pointer;
	position: relative;
	max-width: 186px;
	padding-right: 24px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	display: block;
}

.user-name i.down {
	margin-left: 6px;
	width: 16px;
	height: 16px;
	border-top: 8px solid #ddd;
	border-bottom: 8px solid transparent;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
	transform: translateY(5px);
	-webkit-transform: translateY(5px);
	transition: all .5s;
	-webkit-transition: all .5s;
	position: absolute;
	right: 0;
}

.user-name:hover i.down {
	border-top: 8px solid transparent;
	border-bottom: 8px solid #ddd;
	border-right: 8px solid transparent;
	border-left: 8px solid transparent;
	transform: translateY(-5px);
	-webkit-transform: translateY(-5px);
}

.user-drop-ul {
	position: absolute;
	width: 130px;
	height: auto;
	display: none;
	background: #fff;
	box-shadow: 0 0 10px rgba(136, 195, 36, .5);
	top: 100%;
	z-index: 999;
}

.user-drop-li {
	width: 100%;
	height: 36px;
	line-height: 36px;
}

.user-drop-a {
	display: block;
	line-height: 36px;
	height: 36px;
	text-align: center;
}

.user-ava:hover .user-drop-ul {
	display: block;
}

.user-drop-li:hover {
	background: #C8E39B;
}

/* 导航栏 */
.nav {
	background: #88C322;
	height: 45px;

}

.nav .nav-ul {
	height: 100%;
	position: relative;
}





.nav-li {
	padding: 0 10px;
	height: 100%;
	margin-right: 15px;

}

.nav-li>a {
	display: block;
	text-align: center;
	padding: 0 12px;
	height: 100%;
	line-height: 45px;
}

.nav-li.creat-li {
	position: absolute;
	height: 32px;
	right: 0;
	top: 6px;
	z-index: 10;
}

.nav .nav-li.creat-li .creat-nav {
	cursor: pointer;
	height: 32px;
	width: 120px;
	font-size: 16px;
	background: #fff;
	color: #659315;
	font-weight: bold;
	border-radius: 16px;
	line-height: 32px;
}

.nav-li:hover,
.nav-li.onthis {
	background: #659315;
}

.nav .nav-li.creat-li:hover {
	background: transparent;
}

.nav-li:hover>a,
.nav-li.onthis>a {
	color: #fff;
}

/* 底部 */
.footer {
	height: auto;
	background: #3e4334;
	padding: 20px 0;
}

.footer .flexbox {
	height: 100%;
}

.footer .flex-item {
	overflow: hidden;
}

.footer .logo>img {
	margin-right: 24px;
	flex: none;
	height: 48px;
}

.footer .profile {
	padding-left: 24px;
	line-height: 1.5;
	position: relative;
	display: block;
	border-left: 1px solid #eaeaea;
}

.footer .link-a {
	cursor: pointer;
	margin-right: 18px;
	margin-bottom: 10px;
}

.footer a:hover {
	color: #88C322;
}

/* 01-index.html */
.section-name {
	text-align: center;
	height: 40px;
	background: url(../img/logo-bg.png) center center no-repeat;
	background-size: auto 100%;
}

.flex-item:nth-child(4n) {
	margin-right: 0;
}

.flex-item .item-img {
	position: relative;
	padding: 12px;
	width: 244px;
	height: 350px;
	overflow: hidden;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	webkit-box-align: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: center;
	-moz-justify-content: center;
	-webkit-justify-content: center;
	justify-content: center;
}

.flex-item .item-img>img {
	min-height: 100%;
	vertical-align: top;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	max-width: none;
}

.photo-modal .flex-item .item-img>img{
	min-height: 100%;
	height: 100%;
}

.flex-item .item-img:before {
	content: "";
	display: none;
	position: absolute;
	width: 220px;
	height: 220px;
	border: 1px solid #ddd;
	right: 0;
	top: 0;
	z-index: 0;
}

.flex-item .item-txt {
	padding: 0 12px;
	line-height: 1.5;
	display: block;
	text-align: center; width:220px;font-size:14px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;
}

.flex-item {
	margin-right: 74.6px;
}

.flex-item .link-btn {
	height: 36px;
	margin: 0 auto;
	margin-bottom: 5px;
}

.tab-ul .tab-li {
	color: #b7b7b7;
	padding: 0 24px;
	position: relative;
}

.tab-ul .devide:after {
	content: "/";
	position: absolute;
	font-size: 24px;
	font-family: light;
	color: #b7b7b7;
	right: -6px;
	top: 0;
	font-family: 'light';
	font-weight: normal;
}

.tab-ul .tab-li.active {
	color: #000000;
}

.tab2-ul .tab-btn {
	width: 104px;
	height: 28px;
	border-radius: 14px;
	background: #fff;
	border: 1px solid #88C322;
	color: #88C322;
	transition: all .5s;
	-webkit-transition: all .5s;
	cursor: pointer;
}

.tab2-ul .tab2-li {
	margin: 0 14px;
}

.tab2-ul .tab-btn.active,
.tab2-ul .tab-btn:hover {
	background: #88C322;
	color: #fff;
}

.static-share {
	position: absolute;
	left: 24px;
	bottom: 24px;
	width: 196px;
	z-index: 50;
}

.static-share>img {
	margin-right: 16px;
}

.article .flex-item {
	height: 150px;
	width: 562.6px;
	margin-right: 74.6px;
	margin-bottom: 30px;
}

.article .flex-item:hover {
	box-shadow: 0 0 10px rgba(0, 0, 0, .2);
}

.article .flex-item:nth-child(2n) {
	margin-right: 0;
}

.article .flex-item .article-pic {
	width: 150px;
	height: 150px;
	flex: none;
	margin-right: 20px;
	background: #C8E39B;
	overflow: hidden;
	text-align: center;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	webkit-box-align: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	align-items: center;
	-webkit-box-pack: center;
	-moz-justify-content: center;
	-webkit-justify-content: center;
	justify-content: center;
}

.article .flex-item .article-pic img {
	width: 100%;
	height: auto;
}

.article .flex-item .article-text {
	width: 392px;
	height: 100%;
	position: relative;
	padding-right: 20px;
}

.article-text .txt {
	display: block;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 100%;
}

.article-text .p-txt {
	display: block;
	line-height: 1.5;
	overflow: hidden;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	box-orient: vertical;
	display: -webkit-box;
	display: box;
	text-align: justify;
	word-break: break-word;
	max-height: 42px;
	text-overflow: ellipsis;
	width: 100%; color:#666666c9;  
}

.article-text .bottom-box {
	position: absolute;
	bottom: 5px;
	width: 100%;
}

.bottom-box .from {
	margin-right: 24px;
	flex: none;
}

.from:before {
	content: '来自';
	display: block;
	color: #B7B7B7;
}

.bottom-box .static-box {
	margin-right: 24px;
	flex: none;
}

.bottom-box .static-box>img {
	margin-right: 12px;
}

.gallerys .from {
	padding-left: 12px;
}

.more-btn {
	margin: 0 auto;
	height: 36px;
	border-radius: 0;
	font-size: 14px;
	font-family: 'light';
}

/* 03-article-detail.html */
.article-operate .static-box {
	margin-left: 24px;
	cursor: pointer;
}

.article-operate .static-box img {
	margin-right: 12px;
}

.collect-btn .collect {
	display: none;
}

.collerct-btn .no-collect {
	display: block;
}

.collect-btn.collected .collect {
	display: block;
}

.collect-btn.collected .no-collect {
	display: none;
}

.ava-owner {
	width: 72px;
	height: 72px;
	border: 1px solid #88C322;
	border-radius: 36px;
	overflow: hidden;
	margin-right: 20px;
}

.owner-name>span {
	width: 100%;
	display: block;
}

.article-content {
	line-height: 1.5;
	font-weight: normal;
	text-align: justify;
}

.article-content .quote {
	display: block;
	padding: 20px;
	border: 1px solid #88C322;
	background: rgba(136, 195, 34, .2);
}

.article-content p {
	text-align: justify;
	display: block;
	word-break: break-word;
	width: 100%;
}

/* 04-article-public.html */
.sidebox {
	width: 240px;
	min-height: 750px;
	padding-left: 20px;
	padding-right: 20px;
	flex: none;
}

.main-box {
	width: 100%;
	min-height: 750px;
	padding-left: 60px;
	padding-right: 20px;
}

.sidebox .search-box {
	width: 100%;
	height: 36px;
	padding: 0;
}

.sidebox .search-input {
	background: #fff;
	padding: 0 28px 0 16px;
}

.sidebox .search-btn {
	width: 18px;
	height: 18px;
	top: 9px;
	right: 9px;
	background-size: 100% auto;
}

.sidebox .select-box {
	height: 500px;
	overflow-x: hidden;
	overflow-y: auto;
}

.form-select-ul {
	height: auto;
	overflow: hidden;
}

.form-radio {
	display: none;
}

.select-label>span {
	width: 20px;
	height: 20px;
	border-radius: 10px;
	border: 1px solid #eee;
	background: #fff;
	margin-right: 16px;
	transition: all .5s;
	-webkit-transition: all .5s;
}

.form-radio:checked+.select-label>span {
	background: url(../img/ico/selected.png) #88C322 center center no-repeat;
	background-size: 15px auto;
	border: 1px solid #88C322;
}

.form-item {
	height: 45px;
}

.article-item {
	border-bottom: 1px solid #eee;
}

.form-item>label {
	display: block;
	width: 120px;
	text-align: left;
	flex: none;
}

.form-item .form-block {
	width: 100%;
	height: 100%;
}

.form-item .form-input {
	width: 100%;
	height: 100%;
}

.textarea-item {
	height: auto;
	border: none;
}

.textarea-item>label {
	display: block;
	width: 100%;
	height: 45px;
	line-height: 45px;
}

.ql-toolbar {
	width: 100%;
}

.form-editor,
.note-editor {
	width: 100%;
	min-height: 400px;
}

.note-editing-area {
	min-height: 360px;
}

/* 07-managment.html */
.side-nav-box {
	width: 240px;
}

.side-padding {
	padding-left: 20px;
	padding-right: 20px;
}

.user-info-pic {
	width: 72px;
	height: 72px;
	border: 1px solid #88C322;
	overflow: hidden;
	border-radius: 36px;
	margin-right: 10px;
	flex: none;
}

.user-info-pic>span {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.nav-section {
	height: 50px;
	cursor: pointer;
	transition: all .5s;
	-webkit-transition: all .5s;
}

.nav-section:hover,
.nav-section.active {
	background: #f3f9e8;
	border-right: 3px solid #88C322;
	color: #88C322;
}

.nav-section>img {
	width: 24px;
	height: auto;
	margin-right: 16px;
}

.side-nav-ul {
	display: none;
}

.side-nav-li {
	height: 45px;
	padding-left: 40px;
	padding-right: 0;
	display: block;
	line-height: 45px;
	cursor: pointer;
}

.side-nav-li:hover,
.side-nav-li.active {
	color: #88C322;
}

.main-content {
	padding: 0 0 40px 40px;
	border-left: 1px solid #eee;
	min-height: 740px;
	width: 100%;
}

.main-tab {
	display: none;
	width: 100%;
	height: 100%;
}

.main-tab.onshow {
	display: block;
}

.main-header {
	width: 100%;
	height: 72px;
	border-bottom: 2px solid #88C322;
}

.managment-btn {
	width: 140px;
	height: 45px;
	border-radius: 22.5px;
}

.main-ul .main-li {
	margin-bottom: 30px !important;
}

.main-li-pic {
	width: 150px;
	height: 150px;
	overflow: hidden;
	margin-right: 20px;
	flex: none;
}

.main-li-pic>img {
	min-width: 100%;
	min-height: 100%;
	/* max-width: none; */
}

.main-li-text {
	position: relative;
	width: 100%;
	height: 150px;
	padding: 15px 0;
}

.main-li-text .operate-ul {
	/* position: absolute; */
	width: 100%;
	margin-top: 20px;
	/* bottom: 0; */
}

.main-content .operate-btn {
	border-radius: 16px;
	height: 32px;
	width: 105px;
	margin-right: 16px;
}

.form-section .col1 {
	width: 67%;
	flex: none;
}

.form-section .form-label {
	width: 28%;
	text-align: left;
	flex: none;
}

.form-section .form-block {
	height: 40px;
	width: 100%;
	border: 1px solid #ddd;
	position: relative;
}

.form-radio-box {
	display: none;
}

.radio-box-label {
	width: 120px;
	height: 40px;
	border: 1px solid #ddd;
	background: #f7f8fb;
	transition: all .5s;
	-webkit-transition: all .5s;
	cursor: pointer;
}

.form-radio-box:checked+.radio-box-label {
	border: 1px solid #88C322;
	background: url(../img/ico/choose@3x.png) #fff right top no-repeat;
	background-size: 20px 20px;
	color: #88C322;
}

.form-section .selectValue {
	padding-left: 20px;
}

.form-section .form-input {
	padding-left: 20px;
}

.person-section,
.last-section {
	padding-top: 20px;

}

.col2 {
	width: 33%;
}

.col2 .uploadfile {
	width: 150px;
	height: 150px;
	background: url(../img/upload.jpg) center center no-repeat;
	background-size: 100% auto;
	margin-bottom: 20px;
}

.col2 .form-file {
	display: none;
}

.col2 .photo-label {
	width: 100%;
	height: 100%;

	display: block;
}

.area-item .form-label {
	height: 40px;
}

.area-item {
	height: 180px;
}

.area-item .form-block {
	height: 100%;
}

.area-item .form-text-area {

	line-height: 24px;
	height: 100%;
	overflow-y: auto;
	width: 100%;
	padding: 8px 20px;
}

.person-section,
.person-section2,
.members-section {
	display: none;
}

.userinfo-section,
.person-section.show,
.person-section2.show,
.members-section.show {
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
}

.statue {
	width: 64px;
	height: 20px;
	border-radius: 10px;
	margin-right: 10px;
}

.locked {
	border: 1px solid #feb505;
	color: #feb505;
}

.unlocked {
	border: 1px solid #88C322;
	color: #88C322;
}

.music-li {
	height: 40px;
}

.music-item {
	height: 100%;
}

.music-item>span {
	width: 30px;
	height: 30px;
	margin-right: 12px;
}

.music-item .play {
	background: url(../img/ico/play@3x.png) center center no-repeat;
	background-size: 100% auto;
}

.music-item .pause {
	background: url(../img/ico/pause@3x.png) center center no-repeat;
	background-size: 100% auto;
}

.tab4-li-text {
	width: 580px;
}

.bottom-box {
	margin-top: 20px;

}

.tab4-li-text .bottom-box>span {
	margin-right: 24px;
}

.user-center-pic {
	margin-right: 50px;
}

.user-center-li {
	height: auto;
}

.male-ico {
	display: block;
	width: 24px;
	height: 24px;
	margin-left: 16px;
	background: url(../img/ico/male.png) center center no-repeat;
	background-size: 100% auto;
}

.female-ico {
	display: block;
	width: 24px;
	height: 24px;
	margin-left: 16px;
	background: url(../img/ico/female.png) center center no-repeat;
	background-size: 100% auto;
}

.user-menu-li {
	padding-top: 25px;
	padding-bottom: 25px;
	border-top: 1px dotted #eee;
}

.user-menu-a {
	display: block;
	text-align: center;
	width: 100px;
	height: auto;
	margin-right: 40px;
}

.user-menu-a>img {
	display: block;
	width: 100%;
	height: auto;
	margin-bottom: 15px;
}

.charge .radio-box-label {
	width: 200px;
}

.modal .modal-content {
	background: rgba(255, 255, 255, .9);
	padding: 0px 40px 20px 40px;
	width: 900px;
	height: 540px;
	overflow-x: hidden;
	overflow-y: auto;
}

.modal .form-block {
	width: 100%;
	background: transparent;
}

.modal .form-input {
	width: 100%;
	background: transparent;
}

#lock-modal .modal-content {
	width: 500px;
	height: auto;
	padding: 40px 20px;
}

#lock-modal .form-block {
	width: 100%;
	height: 60px;
	border-bottom: 1px solid #ddd;
	background: transparent;
}

#lock-modal .form-input {
	height: 100%;
	width: 100%;
	background: transparent;
}

#photo-modal .modal-content {
	width: 900px;
	height: auto;
	padding: 40px 50px;
}

#photo-modal .form-block {
	height: 60px;
	border-bottom: 1px solid #ddd;
}

#photo-modal .form-label {
	height: 100%;
	width: 15%;
	flex: none;
}

#photo-modal .photo-box {
	width: 100%;
}

#photo-modal .photo-viewer {
	margin-right: 20px;
	position: relative;
	width: 120px;
	height: 120px;
}

#photo-modal .photo-viewer>img {
	width: 100%;
	height: 100%;
}

.photo-viewer .del-ico {
	position: absolute;
	top: 0;
	right: 0;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	width: 20px;
	height: 20px;
	background: url(../img/ico/del.png) center center no-repeat;
	background-size: 100% auto;
}

#photo-modal input[type=file] {
	display: none;
}

#photo-modal .photo-label {
	width: 120px;
	height: 120px;
	margin-right: 20px;
	background: url(../img/upload-view.jpg) center center no-repeat;
	background-size: 100% auto;
	display: block;
}

.header.opacity-bg {
	background: rgba(0, 0, 0, .75);
	padding: 5px 20px;
	position: fixed;
	top: 0;
	z-index: 500;
	width: 100%;
	height: 50px;
}

.header.opacity-bg .logo {
	height: 30px;
}

.header.opacity-bg .logo img {
	height: 100%;
}

.header.opacity-bg .user-ava {
	padding: 0;
}

.header.opacity-bg .user-box {
	height: 40px;
}

.header.opacity-bg .user-box .user-name {
	color: #fff;
}

.header.opacity-bg .user-box .quit-btn {
	margin-left: 24px;
	flex: none;
	color: #fff;
}

.header.opacity-bg .user-box .ava-img {
	width: 30px;
	height: 30px;
	border-radius: 15px;
}

.opacity-bg .scroll-text {
	width: 480px;
	padding: 0 40px;
	overflow: hidden;
	animation: marquee 50s linear infinite;
	-webkit-animation: marquee 10s linear infinite;
	white-space: nowrap;
	color: #ccc !important;
}

@keyframes marquee {
	0% {
		text-indent: 400px;
	}

	100% {
		text-indent: -400px;
	}
}

@-webkit-keyframes marquee {
	0% {
		text-indent: 400px;
	}

	100% {
		text-indent: -400px;
	}
}


.scroll-text:hover {
	animation-play-state: paused;
	-webkit-animation-play-state: paused;
}

.opacity-bg .search-box {
	width: 240px;
	height: 32px;
	padding: 0;
	font-size: 0;
	flex: none;
	margin-left: 20px;
}

.opacity-bg .search-box .search-input {
	background: rgba(255, 255, 255, .45);
	border: 1px solid #fff;
	height: 100%;
	border-radius: 16px;
	color: #fff;
}

.opacity-bg .search-box input.search-input::-webkit-input-placeholder {
	color: #fff;
}

.opacity-bg .search-box input.search-input:-moz-placeholder {
	color: #fff;
}

.opacity-bg .search-box input.search-input::-moz-placeholder {
	color: #fff;
}

.opacity-bg .search-box input.search-input:-ms-input-placeholder {
	color: #fff;
}

.opacity-bg .search-box .search-btn {
	width: 20px;
	height: 32px;
	background: url(../img/ico/search-gray.png) center center no-repeat;
	background-size: 100% auto;
	right: 24px;
	top: 0;
}

.headline {
	padding: 10px 20px;
	position: fixed;
	top: 60px;
	z-index: 50;
	width: 100%;
}

.headline {
	line-height: 1.5;
	font-weight: normal !important;
	color: #fff !important;
	flex: none;
}

.headline .sub {
	display: block;
	width: 100%;
	position: absolute;
	top: 40px;
}

.headline .user-name>span {
	display: block;
	width: 100%;
	color: #fff !important;
}

.headline .ava-img {
	width: 36px;
	height: 36px;
	border-radius: 18px;
	margin-right: 10px;
	overflow: hidden;
	border: 1px solid #88C322;
}

.headline .grave-title {
	position: relative;
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	webkit-box-align: center;
	-moz-align-items: center;
	-webkit-align-items: center;
	align-items: center;
	width: 700px;
}

.headline .grave-ceartor .user-name {
	color: #fff !important;
}

.canvas {
	width: 100%;
	height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
}

.canvas .bg-src {
	width: 100%;
	height: 100%;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
}

.canvas .bg-src>img {
	width: 100%;
}

.canvas .md-src {
	width: 100%;
	position: fixed;
	z-index: 50;
	bottom: 0 !important;
	left: 0;
	cursor: move;
	top: auto;
}

.canvas .md-src>img {
	width: 100%;
	height: auto;
}

.canvas .grave-src {
	position: relative;
	z-index: 60;
	left: 50% !important;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	min-width: 350px;
	min-height: 400px;
	cursor: move;
}

.canvas .grave-src>img {
	position: absolute;
	height: 100%;
}

.canvas .grave-src .grave-content {
	position: absolute;
	z-index: 20;
	width: 100%;
	text-align: center;
	padding-top: 110px;
}

.canvas .grave-src .grave-ava {
	width: 100%;
	height: 64px;
	border-radius: 0;
	overflow: hidden;
	border: 1px solid #88C322;
	margin: 0 auto;
	display: flex;
	justify-content: center;
}

.canvas .grave-src .grave-ava img {
	height: auto;
	width: 48px;
	margin: 0 5px;
}

.canvas .grave-src .grave-text {
	width: auto;
	margin: 0 auto;
	text-align: center;
}

.grave-text .name {
	width: auto;
	margin: 30px 0 !important;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-flow: column;
	flex-flow: column;
}

.grave-text .name>span {
	display: block;
	width: auto;
	font-size: 16px;
	line-height: 2;
	word-break: break-all;
	white-space: normal;
	text-align: center;
	opacity:.7!important;
}

.grave-text span {
	width: 16px;
	display: block;

}

.grave-text .year {
	display: flex;
	justify-content: center;
	width: 100%;
	font-size: 14px;
	color: #fff;
}

.grave-text .year span {
	margin: 0;
	width: auto;
	white-space: nowrap;
}

.grave-text .year span:nth-child(2):before {
	content: "-";
	display: inline-block;
	margin-right: 0;
}

.decor-src {
	z-index: 70;
	width: auto;
	position: relative;
	cursor: move;
}

.decor-src.default0 {
	top: 60%;
	left: calc(50% - 175px);
}

.decor-src.default1 {
	top: 60%;
	left: calc(50% - 145px);
}

.decor-src.default2 {
	top: 60%;
	left: 55%;
}

.short-cut {
	position: absolute;
	left: 20px;
	top: 45%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	width: 60px;
	z-index: 100;
}

.short-cut>a {
	width: 60px;
	height: 60px;
	background: #333;
	border: 1px solid #fff;
	border-radius: 30px;
}

#short-cut-pause {
	background: #fff;
	border: 1px solid #fff;
	display: none;
	width: 60px;
	height: 60px;
	border-radius: 30px;
}

.side-btn {
	position: absolute;
	right: 40px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	width: 93px;
	z-index: 100;
}

.side-btn a {
	width: 100%;
	height: 36px;
	border-radius: 18px;
	background: #333;
	color: #fff;
	box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

.side-btn a:hover,
.side-btn a.active {
	background: #fff;
	color: #333;
}

.side-btn ul {
	display: none;
	position: absolute;
	width: 120px;
	height: auto;
	padding: 20px 0;
	background: rgba(0, 0, 0, .5);
	right: 100px;
	top: 0;
}

.side-btn ul li {
	height: 36px;
	cursor: pointer;
}

.side-btn ul li:hover {
	background: rgba(255, 255, 255, .7);
	color: #333;
}




.bottom-btn {
	position: absolute;
	width: auto;
	bottom: 20px;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	z-index: 70;
}

.bottom-btn a {
	width: 94px;
	height: 36px;
	border-radius: 18px;
	box-shadow: rgba(0, 0, 0, .3);
	background: #333;
	margin: 0 10px;
}

.bottom-btn a:hover {
	background: #fff;
	color: #333;
}

.modal .modal-name {
	height: 64px;
	border-bottom: 2px solid #b7b7b7;
}

.modal .flex-item {
	margin-right: 44px;
}

.modal .managment-btn {
	height: 40px;
}

.modal .flex-item:nth-child(3n) {
	margin-right: 0;
}

#music-modal .form-block {
	width: auto;
}

#jwpublish-modal .form-editor,
.note-editor {
	width: 100%;
	min-height: 320px;
}

#jwpublish-modal .note-editor.note-frame .note-editing-area .note-editable {
	text-align: left;
}


.purchase-modal .goods-ul a {
	width: 150px;
	height: 200px;
	margin-right: 15px;
	flex: none;
	text-align: center;
}

.purchase-modal .goods-ul a.cancle-selected {
	width: 100px;
	height: 32px;
	border-radius: 16px;
}

.purchase-modal .good-li {
	width: 20%;
	height: 200px;
	padding-right: 15px;
}

.purchase-modal .goods-ul a .good-li {
	padding-right: 0;
	width: 100%;
}

.purchase-modal .good-uls a:nth-child(5n),
.purchase-modal .goods-ul a:nth-child(5n),
.purchase-modal .good-li:nth-child(5n) {
	margin-right: 0;
}

.good-li input[type=checkbox],
.good-li input[type=radio] {
	display: none;
}

.good-li .good-check {
	padding: 20px 20px 5px 20px;
	width: 100%;
	height: 160px;
	background: transparent;
	transition: all .5s;
	-webkit-transition: all .5s;
}

.good-check>img {
	max-width: 100%;
	max-height: 100%;
	height: auto;
	width: auto;
}

.good-li input[type=checkbox]:checked+.good-check,
.good-li input[type=radio]:checked+.good-check,
.good-li:hover .good-check,
.purchase-modal .goods-ul a:hover .good-li .good-check,
.purchase-modal .goods-ul a .good-li input[type=radio]:checked+.good-check {
	border: 1px solid #333;
	background: url(../img/ico/choose-gray.png) right top no-repeat;
	background-size: 20px auto;
}

.good-li .text>div {
	width: 100%;
	text-align: center;
}

.price-box {
	width: 100%;
	padding: 15px 20px;
	background: #f7f8fb;
	border: 1px solid #ddd;
}

.price-box .price-ul {
	width: 50%;
}

.price-ul span {
	display: block;
	width: 100%;
	line-height: 1.5;
	margin-top: 10px;
	flex: none;
	text-align: left;
}

.button-ul a {
	margin-left: 15px;
}

.modal-tab-a {
	font-size: 18px;
	font-family: 'reg';
	color: #b7b7b7;
}

.modal-tab-a.showthis {
	font-size: 24px;
	font-family: 'bold';
	color: #000000;
}

.modal-tab-con {
	display: none;
}

.modal-tab-con.onshow {
	display: block;
}

.cancle-selected {
	width: 100px;
	height: 32px;
	border-radius: 16px;
}

#alert-modal .modal-content {
	width: 400px;
	height: 300px;
}

.third-btn {
	height: 40px;
	width: 140px;
	background: #b7b7b7;
	border: 1px solid #eee;
	border-radius: 24px;
	color: #fff;
}

.third-btn.showthis {
	background: transparent;
	border: none;
}

/* 登录页面 */
.login-page {
	width: 100vw;
	height: 100vh;
	position: relative;
	overflow: hidden;
}

.login-page .page-bg {
	max-width: none;
	position: relative;
	z-index: 99;
}

.login-page .logo {
	position: fixed;
	top: 20px;
	left: 20px;
	height: 48px;
	width: 160px;
	z-index: 999;
}

.login-page .login-form {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	-webkit-transform: translate(-50%, -50%);
	z-index: 999;
	padding: 40px;
}

.login-page .login-form .txt1 {
	font-size: 14px;
	color: #333;
	font-weight: 600;
	margin-bottom: 20px;
}

.login-page .login-form .scan-code {
	width: 100%;
	height: auto;
}

/* 音乐默认弹窗 */
#music-select-modal .modal-content {
	width: 900px;
	height: auto;
	padding: 40px 50px;
}

#music-select-modal .form-label {
	width: 100%;
	height: 60px;
}

#music-select-modal .select-ul {
	width: 100%;
	margin-bottom: 60px;
}

#music-select-modal .select-label {
	color: #333;
	width: 100%;
	height: 60px;
}

#music-select-modal .select-label span {
	width: 20px;
	height: 20px;
	border: 1px solid #b7b7b7;
	margin-left: 16px;
	border-radius: 0;
}

#music-select-modal input[type=checkbox]:checked+.select-label span {
	background: url(../img/ico/selected.png) #88C322 center center no-repeat;
	background-size: 15px auto;
	border: 1px solid #88C322;
}

.article-item .form-file {
	display: none;
}

.article-item .uploadfile {
	width: 150px;
	height: 150px;
	background: url(../img/upload.jpg) center center no-repeat;
	background-size: 100% auto;
}

.article-item .photo-label {
	width: 100%;
	height: 100%;
	display: block;
}

.pay-container {
	background: #f7f8fb;
	padding-top: 30px;
	padding-bottom: 30px;
	height: calc(100vh - 290px);
	width: 100%;
}

.pay-container .pay-main {
	background: #fff;
	height: 100%;
	position: relative;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-flow: column;
	flex-flow: column;
}



.pay-main .pay-name {
	width: 100%;
	height: auto;
	font-size: 18px;
	color: #333;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-flow: column;
	flex-flow: column;

}

.pay-main .pay-name span {
	font-size: 40px;
	color: #88C322;
	padding: 20px;
}

.pay-main .code {
	width: 200px;
	height: 200px;
	margin-bottom: 20px;
}

.code img {
	width: 100%;
	height: 100%;
}

.pay-main .pay-des {
	font-size: 14px;
	color: #666;
}

.static-li .primary-btn.create-btn {
	width: 180px;
	height: 60px;
	font-size: 20px;
}

.tab2-con .flex-item {
	margin-bottom: 20px;
}

.froala-box {
	width: 100% !important;
}

.froala-element {
	min-height: 350px !important;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
	word-wrap: break-word;
	line-height: 150% !important;
	vertical-align: top;
	text-align: left;
}

.modal-content .article-content {
	padding: 20px 0 0 0;
}

.form-section {
	position: relative;
}

.form-section .col2 {
	position: absolute;
	right: 0;
	top: 0;
	z-index: 99999;
}

.scroll-info {
	position: fixed;
	z-index: 99999;
	width: 400px;
	height: 250px;
	left: 40px;
	bottom: 20px;
	overflow: hidden;
}

.scroll-info ul {
	width: 100%;
	height: auto;
}

.scroll-info ul li {
	width: 100%;
	position: relative;
	padding: 0 20px;
	font-size: 12px;
	color: #fff;
	background: rgba(0, 0, 0, .6);
	height: 45px;
	border-radius: 25px;
	margin-bottom: 5px;
}

.scroll-info ul li .w-pic {
	width: 32px;
	height: 32px;
	border-radius: 16px;
	overflow: hidden;
	position: relative;
	margin-right: 12px;
}

.scroll-info ul li .w-pic img {
	width: 100%;
	height: auto;
}

.scroll-info ul li span.gift {
	color: #88C322;
	max-width: 96px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.scroll-info ul li span.w-name {
	max-width: 54px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.scroll-info ul li span.date {
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
}

.modal-main {
	width: 100%;
	height: 436px;
	overflow-x: hidden;
	overflow-y: auto;
}

#alert-modal .modal-main {
	height: auto;
	overflow: hidden;
	line-height: 1.5;
}

.article-container-box {
	height: 500px;
	overflow-x: hidden;
	overflow-y: auto;
	line-height: 1.5;
}

.header.opacity-bg .user-box .second-btn.gray-btn {
	color: #fff;
	opacity: .7;
	border: 1px solid #fff;
}

.header.opacity-bg .user-box .second-btn.gray-btn:hover{
	background: #fff;
	color: #000000;
	opacity: 1;
}

.header.opacity-bg .user-box>a {
	height: 40px;
	line-height: 40px;
}

.modal.code-modal .modal-content {
	background: rgba(255, 255, 255, .9);
	display: flex;
	align-content: center;
	justify-content: center;
	height: 360px;
	width: 480px;
	padding: 40px;
}

.modal.code-modal .modal-content>input {
	text-align: center;
}

.banner .swiper-slide img{
	max-width: none;
	height: 100%;
	
}

.anounce-li{
	display: block;
}

.anounce-li:hover{
	color: #88C322;
}

.jw-ul .main-li{
	cursor: pointer;
}

.pop-alert{
	width: 360px;
	height: 240px;
	padding: 20px;
	color: #333;
	background: rgba(255,255,255,.95);
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	-webkit-transform: translate(-50%,-50%);
	z-index: 99999999;
}

.pop-alert .popcon{
	height: 100%;
}