@font-face{
     font-family: 'pingfang_sc'; 
     src: url('../fonts/pingfang_sc.eot');
     src:url('../fonts/pingfang_sc.woff') format('woff'),
         url('../fonts/pingfang_sc.ttf') format('truetype'),
         url('../fonts/pingfang_sc.svg') format('svg');
}
html,body{
	width: 100%;height: 100%;
	margin: 0;
	color: #111111;
}
body{position: relative; height: auto;min-height: 100%; background-color: #F7F7F7;}
body {
  font-family: "pingfang_sc" ,sans-serif;
}
button{outline: none;}
#vue-app{border-bottom: 1px solid transparent;display: none;}
#editor-wrap *::selection {
    background:#ddd;
}
#editor-wrap *::-moz-selection {
    background:#ddd;
}
#editor-wrap *::-webkit-selection {
    background:#ddd;
}
line{
	display: block;
	margin: 30px auto!important;
	width: 80%;
	height: 1px;
	background-color: #999999;
}
.tips{
	position: fixed;
	left: 50%;
	top: 40%;
	z-index: 999;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	width: auto;
	height: auto;
	max-width: 220px;
	padding: 18px;
	background-color: rgba(0,0,0,0.7);
	border-radius: 4px;
	font-size: 16px;
	line-height: 14px;
	color: #FFF;
}
.header{
	position: fixed;
	z-index: 99;
	width: 100%;
	height: auto;
	background-color: #FFFFFF;
	box-shadow: 0 4px 4px 0 rgba(0,0,0,0.04);
}
.header-container{
	width: 96%;
	/*max-width: 1440px;*/
	padding: 23px 0;
	margin: 0 auto;
}
.header-container .logo{
	display:inline-block;
	width: 117px;
}
.header-container .logo img{
	width: 100%;
	border-radius: 10px;
}
.header-container .u-msg{
	position: relative;
	float: right;
	color: #333333;
}
.header-container .u-msg .avat{
	display: block;
	position: absolute;
	right: 0;top: 0;
	width: 40px;
	height: 40px;
	cursor: pointer;
	border-radius: 50%;
}
.header-container .u-msg .avat img{
	width: 100%;
	height: 100%;
	border-radius: 50%;
}
.header-container .logo img{
	width: 100%;
}

.header-container .u-msg .msg{
	position: absolute;
	right: 60px;
	text-align: right;
	font-size: 14px;
	min-width: 120px;
	max-width: 200px;
}
.header-container .u-msg .msg h6{
	margin: 0;
	padding: 2px 0;
	overflow: hidden;
	text-overflow:ellipsis;
	white-space: nowrap;
}
.header-container .u-msg .msg h6,
.header-container .u-msg .msg p{
	width: 100%;
	margin: 0;
	float: right;
	text-align: right;
	font-size: inherit;
}
.header-container .signout{
	
}
.main{
	position: relative;
	z-index: 1;
	width: 700px;
	margin: 0 auto;
	padding: 168px 0 80px;
	margin-bottom: 100px;
}
.banner{
	position: relative;
	width: 100%;
	min-height: 165px;
	background-color: #EEE;
	border-radius: 10px;
}
.banner img{
	border-radius: 10px;
	width: 100%;
}
.banner .banner-placeholder{
	position: absolute;
	left: 50%;
	top: 50%;
	width: 104px;
	height: 24px;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	font-size: 16px;
	line-height: 24px;
	color: #666666;
	text-align: right;
	padding:18px 30px;
	cursor: pointer;
}
.banner.coverd .banner-placeholder{
	opacity: 0;
	background-color: rgb(255, 255, 255, 0.5);
	border-radius: 10px;
	-webkit-transition: opacity 0.3s ease;
	transition: opacity 0.3s ease;
	box-shadow: 0 2px 4px 0 rgba(0,0,0,0.1);
}

.banner.coverd .banner-placeholder:hover{
	opacity: 1;
}
.banner .banner-placeholder i{
	display: block;
	position: absolute;
	left: 30px;top: 18px;
	width:26px;height: 24px;
	background-size: 100% 100%;
	background-image: url(../img/icon-img.png);
}
.banner .WriteCover-uploadInput{
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;top: 0;
	outline: none;
	cursor: pointer;
	opacity: 0;
}

.eheader{
	height: 52px;
	margin-top: 10px;
	margin-bottom: 10px;
}
.eheader .eheader-container{
	height: 32px;
	padding-top: 10px;
	padding-bottom: 10px;
}
.eheader.fix .eheader-container{
	position: fixed;
	left: 0;top: 87px;
	width: 100%;
	margin: 0;
	background-color: #F7F7F7;
	z-index: 9;
}
.eheader .save{
	width: 85px;
	height: 35px;
	background: #F0F7FF;
	border: 1px solid #117BFD;
	border-radius: 4px;
	font-size: 14px;
	color: #117BFD;
	text-align: center;
	line-height: 33px;
	position: absolute;
	right: 0;top: -2px;
	z-index: 100;
	cursor: pointer;
}
.eheader-wrap>div{
	position: relative;
	z-index: 99;
}
.eheader-wrap{position: relative;}
.eheader.fix .eheader-wrap{
	width: 700px;
	margin: 0 auto;
}
.editor-mainwrap{
	position: relative;
	z-index: 2;
	background-color: #FFFFFF;
	border-radius: 10px;
	padding: 40px 40px 80px;
	min-height: 240px;
}
.editor-mainwrap .title{
	position: relative;
	width: 100%;
	min-height: 40px;
	padding: 10px 0 20px;
	border-bottom: 1px solid #DDDDDD;
	font-size: 28px;
	line-height: 40px;
	color: #AAAAAA;
	overflow: hidden;
}
.editor-mainwrap .title .placehoder{
	position: absolute;
	left: 0;top: 10px;
	line-height: 40px;
	z-index: 1;
}
.editor-mainwrap .title span{
	position: absolute;
	right: 0;bottom: 0;
	font-size: 13px;
	color: #AAAAAA;
	line-height: 20px;
}
.editor-mainwrap .title .input{
	position: relative;
	z-index: 2;
	background-color: transparent;
	outline: none;
	color: #111111;
	font-size: inherit;
	line-height: inherit;
	border: 0;
	width: 100%;
	height: auto;
	font-family: inherit;
	resize: none;
	padding-right: 20px;
}
.editor-mainwrap .input.fill{
	background-color: #FFFFFF;
	opacity: 1;
}

.w-e-text{overflow: visible!important;}
.editor-tags{
	padding-bottom: 10px;
	margin-bottom: 20px;
	border-bottom: 1px solid #DDDDDD;;
}
.editor-tags h4{
	font-size: 14px;
	margin: 14px 0;
}
.editor-tags h4 span{
	color: #AAAAAA;
}
.editor-tags button{
	background-color: #FFFFFF;
	border: 1px solid #AAAAAA;
	border-radius: 4px;
	padding: 6px 16px ;
	margin:0 10px 10px 0;
	outline: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	cursor: pointer;
}
.editor-tags button.active{
	color: #117BFD;
	border-color: #117BFD;
	background-color: #EBF4FF;
}
.editor-mainwrap p img{
	display: block;
	margin: 0 auto;
	border-radius: 4px;
	max-width: 100%;
}
.arti-msg{
	text-align: right;
	margin-top: 60px;
	font-size: 13px;
	color: #AAAAAA;
}
.arti-msg .err{display: none;padding-right: 10px;}
.err{color: red;}
.arti-msg.err{
	color: red;
}
.arti-msg.err .err{
	display: inline;
}
.signout{
	display: none;
	position: absolute;
	right: 0;
	top: 47px;
	width: 100px;
	height: 15px;
	padding: 18px 18px;
	border-radius: 4px;
	background: #FFFFFF;
	box-shadow: 0 1px 6px 0 rgba(0,0,0,0.10);
	border-radius: 4px;
	cursor: pointer;
}
.signout::before{
	position: absolute;
	right: 13px;
	top: -7px;
	content: "";
	width: 0;height: 0;
	border-bottom: 8px solid #FFF;
	border-left:6px solid transparent;
	border-right:6px solid transparent;
}
.signout button{
	position: relative;
	width: 100%;
	height: 100%;
	padding: 0;
	text-indent: 26px;
	background-color: transparent;
	border:none;
	font-size: 14px;
	line-height: 15px;
	color: #333333;
	vertical-align: top;
	outline: none;
	cursor: pointer;
}
.signout i{
	position: absolute;
	left: 0;top: 0;
	display: inline-block;
	width: 18px;
	height: 15px;
	background-size: 100% auto;
	background-image: url(../img/btn-signout.png);
	background-position: center;
}
.header-container .u-msg .avat:hover .signout{
	display: block;
	z-index: 1000;
}
.footer{
	position: absolute;
	left: 0;bottom: 60px;
	width: 100%;
	text-align: center;
	font-size: 12px;
	color: #000000;
	opacity: 0.5;
}
.footer.colorwhite{color: #FFF;}















.login{
	width: 100%;
	height: 100%;
	min-height: 100vh;
	position: relative;
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
.login-logo{
	display: block;
	width: 117px;
	margin: 0 auto;
	position: absolute;
	left: 50%;
	top: -24%;
	margin-left: -58px;
}
.login-bg{
	width: 100%;
	height: 50%;
	position: absolute;
	left: 0;
	bottom: 0;
	background-color: #117BFD;
}
.login-logo img{width: 100%;}
.login-container{
	/*background-color: #CCC;*/
	background-color: #FFF;
	border-radius: 10px;
	box-shadow: 0 6px 12px 0 rgba(0,0,0,0.2);
	width: 360px;
	height:auto ;
	position: absolute;
	left: 50%;
	top: 50%;
	text-align: center;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
}
.login-container h1{
	font-size: 20px;
	color: #111111;
	padding: 35px 0 17px;
	margin: 0;
}
.login-container p{
	font-size: 14px;
	color: #333333;
}
.login-container .code-container{
	width: 160px;
	height: 160px;
	border:1px solid #CCC;
	margin: 0 auto;
	padding: 13px;
	position: relative;
}
.login-container .codewrap{
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	
}
.login-container .codewrap img{
	width: 100%;
	height: 100%;
}
.login-container .codeupdate{
	position: absolute;
	left: 0;top: 0;
	z-index: 2;
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;top: 0;
	background-color: rgba(255,255,255,0.8);
}
.login-container .codeupdate span{
	display: inline-block;
	font-size: 14px;
	color: #111111;
	margin-top: 66px;
}
.login-container .codeupdate button{
	display: block;
	width: 125px;height: 37px;
	margin: 24px auto;
	background: #117BFD;
	border-radius: 38px;
	line-height: 37px;
	font-size: 14px;
	color: #FFFFFF;
	border: none;
	cursor: pointer;
}
.login-wrap a{
	display: block;
	font-size: 12px;
	color: #117BFD;
	margin: 27px auto 47px;
	line-height: 24px;
	cursor: pointer;
}
.step2 .code-container {
	border-color: transparent;
	width: 115px;
	height: 115px;
	padding: 0;
}
.step2 .code-container .codewrap{
	background-size: 100% 100%;
	background-image: url(../img/icon-succ.png);
}
.step2.fail .codewrap{
	background-size: 100% 100%;
	background-image: url(../img/icon-fail.png);
}
.login-wrap .tip{
	display: none;
	width: 100%;
	height: 72px;
}
.login-container .tip h5{
	font-size: 18px;
	color: #117BFD;
	margin: 19px auto 8px;
	height: 25px;
	line-height: 25px;
	text-align: center;
	text-indent: 0;
}

.login-container .tip p{margin: 0;}
.login-container .tip.tip-fail h5{color: #F74646;}

.step2 .tip-succ{display: block;}
.step2.fail .tip-succ{
	display: none;
}
.step2.fail .tip-fail{
	display: block;
}
.popup{
	position: fixed;
	left: 0;top: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0,0,0,0.6);
	z-index: 1000;
}
.popup-inner{
	width: 360px;
	height: auto;
	position: absolute;
	left: 50%;top: 50%;
	-webkit-transform: translate(-50%,-50%);
	transform: translate(-50%,-50%);
	background-color: #FFF;
	box-shadow: 0 5px 15px 0 rgba(0,0,0,0.10);
	border-radius: 8px;
	text-align: center;
	padding-bottom: 42px;
}
.popup-inner h6{
	padding: 35px 0 17px;
	font-size: 20px;
	color: #111111;
	font-size: 20px;
	color: #111111;
	margin: 0;
}
.popup-inner p{
	font-size: 14px;
	color: #333333;
	margin: 0;
}
.popup-inner .icon{
	width: 115px;height: 115px;
	margin: 47px auto 39px;
}
.popup-inner .icon img{width: 100%;}
.popup-inner button{
	display: inline-block;
	width: 130px;height: 40px;
	text-align: center;
	line-height: 40px;
	box-sizing: content-box;
	border:1px solid #117BFD;
	border-radius: 4px;
	margin: 0 7px;
}
.popup-inner div button:nth-child(1){
	background-color: #117BFD;
	color: #FFF;
}
.popup-inner div button:nth-child(2){
	background-color: #FFF;
	color: #117BFD;
}

.publish .succ,
.publish .fail{
	display: none;
}

.publish.succ .succ,
.publish.fail .fail{
	display: block;
}

.popup.exit p{
	margin-top: 10px;
	margin-bottom: 40px;
}
button{cursor: pointer;}

.fade-enter-active, .fade-leave-active {
  -webkit-transition: all .5s;
  transition: all .5s;
  opacity: 1;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
/*.slide-enter-active, .slide-leave-active {
  -webkit-transition: all .5s;
  transition: all .5s;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.slide-enter, .slide-leave-to {
  -webkit-transform: translate3d(100%,0,0);
  transform: translate3d(100%,0,0);
}*/


.low-popup{
	width: 100%;
	height: 100%;
	background-color: #FFFFFF;
	text-align: center;
}
.low-popup .low-inner{
	padding-top: 20vh;
	padding-bottom: 20vh;
}
.low-popup h1{
	font-size: 30px;
	color: #117BFD;
}
.low-popup .low-inner p{
	margin-top: 25px;
	margin-bottom: 70px;
	font-size: 16px;
	line-height: 24px;
}
.low-popup .low-inner div{
	width: 100%;
	text-align: center;
}

.low-popup .low-inner a{
	display: inline-block;
	width: 70px;
	margin: 0 30px;
}
.low-popup .low-inner i{
	display: block;
	width: 70px;
	height: 70px;
	margin-bottom: 15px;
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}
.low-popup .low-inner span{
	position: relative;
	display: inline-block;
	font-size: 16px;
	color: #117BFD;
}
.low-popup .low-inner span::after{
	content: "";
	display: block;
	position: absolute;
	left: 0;bottom: 0;
	width: 100%;
	height: 1px;
	background-color: #117BFD;
}

.low-popup .chrome i{background-image: url(../img/chrome.png);}
.low-popup .firefox i{background-image: url(../img/firefox.png);}
.low-popup .opera i{background-image: url(../img/opera.png);}
.phone-popup{
	width: 100%;
	height: 100%;
	background-color: #FFFFFF;
	text-align: center;
}
.phone-popup .phone-inner{
	padding-top: 14vh;
}
.phone-popup i{
	display: inline-block;
	width: 120px;
	height: 120px;
	margin-bottom: 40px;
}
.phone-popup h1{
	font-size: 14px;
	color: #0D0E15;
}
.phone-popup p{
	font-size: 12px;
	color: #666666;
	margin-top: 20px;
	margin-bottom: 46px;
}
.phone-popup i img{width: 100%;}
.phone-popup span{color: #117BFD;text-decoration: underline;}
.phone-popup button{
	outline: none;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
	width: 133px;height: 44px;
	border: none;
	text-align: center;
	line-height: 44px;
	font-size: 14px;
	color: #FFFFFF;
	background-image: linear-gradient(-52deg, #2595FE 0%, #29BAFF 100%);
	box-shadow: 0 3px 11px 0 rgba(31,147,255,0.38);
	border-radius: 8px;
}
.phone-popup input{opacity: 0;width: 20px;height: 4px;}