/* 公用样式 */
.circle {
  border-radius: 50% !important;
}
.clearfix:after {
  content: "";
  display: block;
  visibility: hidden;
  clear: both;
  height: 0;
  font-size: 0;
}
.center-ele {
	margin-left: auto!important;
	margin-right: auto!important;
}
.background-ele {
	background-repeat: no-repeat;
	background-size: 100% 100%;
}
.centered {
  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-align-items: center;
          align-items: center;
  -webkit-justify-content: center;
          justify-content: center;
  text-align: center;
}
/* 组件默认样式 */
.app {
	font-size: 14px;
}
.app .element {
	width: auto;
  max-width: 100%;
  box-sizing: border-box;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  /* z-index: 1; */
  border-color: #222222;
  border-width: 0;
}
.app .text {
  max-width: 100%;
  min-height: 10px;
  line-height: 1.4em;
  white-space: pre-wrap;
  word-break: break-all;
  height: auto !important;
  /*overflow: hidden;*/
}
.app .list-vessel-wrap .text, .app .dynamic-vessel .text, .app .form-vessel .text, .app .static-vessel .text {
  white-space: normal;
}
.app .button {
	width: 100px;
  height: 30px;
  line-height: 30px;
  margin-left: auto;
  margin-right: auto;
  color: rgb(255, 255, 255);
  /*background-color: rgb(29, 198, 241);*/
  font-size: 14px;
  font-weight: normal;
  text-align: center;
  box-sizing: content-box;
  /*overflow: hidden;*/
}
.app .picture {
  /* width: 100px; */
  height: 80px;
  margin-left: auto;
  margin-right: auto;
  /*overflow: hidden;*/
}
.app .picture img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}
.app .carousel {
	width: auto !important;
	height: 150px;
}
.app .carousel .slick-carousel {
	width: 100%;
	height: 100%;
}
.app .carousel .carousel-img {
	width: 100%;
	height: 100%;
}
.app .slick-list,
.app .slick-track,
.app .slick-slide {
	height: 100%;
}
.app .slick-slide > a {
  display: block;
  width: 100%;
  height: 100%;
}
.app .slick-dots {
	bottom: 0;
	text-align: center;
}
.app .slick-dots li button:before{
  color: #fff;
  opacity: 0.45;
}
.app .slick-dots li.slick-active button:before{
  color: #fff;
  opacity: 1;
}
.app .slick-dots li.slick-active button:after{
  background-color: #fff;
  opacity: 1;
}
.app .slick-dots li {
	margin: 0;
}
.slick-dots li button:before {
	font-size: 20px;
}
.app .slick-slider {
	margin-bottom: 0;
}
.app .audio {
  width: 60px;
  height: 60px;
  margin-left: auto;
  margin-right: auto;
  overflow: hidden;
}
.app .video {
  height: 150px;
  overflow: hidden;
}
.app .video video {
  width: 100%;
  height: 100%;
}
.app .video iframe {
  width: 100%!important;
  height: 100%!important;
}
.app .video .video-iframe-mask {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  z-index: 1;
}
.app .slide-panel-navigate {
  position: absolute;
  bottom: 0;
  width: 100%;
  z-index: 2;
}
.app .slide-panel-navigate span {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 14px;
  margin: 0 3px;
  cursor: pointer;
}
.app .slide-panel[data-mode="2"]:before,
.app .slide-panel[data-mode="2"]:after {
  content: " ";
  display: table;
}
.app .slide-panel[data-mode="2"]:after {
  clear: both;
  visibility: hidden;
  font-size: 0;
  height: 0;
}
.app .slide-panel[data-mode="2"] .slide-item-wrap {
  display: inline-block;
  transition: transform 150ms linear;
}
.app .slide-panel[data-mode="2"] .slide-item-wrap .slide-item-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.app .slide-panel[data-mode="2"] .slide-item-wrap .slide-item-pagination {
  text-align: right;
}
.app .album {
	width: 100% !important;
	height: auto!important;
	color: #fff;
	font-size: 12px;
	text-align: center;
}
.app .album-container {
	padding-left: 3px;
	padding-top: 3px;
	color: inherit;
	font-size: inherit;
	text-align: inherit;
	text-decoration: inherit;
}
.app .album-container.sideslip{
	white-space: nowrap;
	overflow-x: auto;
}
.app .album-container.sideslip .album-pic{
	float: none;
	display:inline-block;
}
.app .album.sec-mode {
	color: #444;
}
.app .album-container .album-pic {
  position: relative;
  float: left;
  width: 102.5px;
  margin-right: 3px;
  margin-bottom: 3px;
  text-decoration: inherit;
}
.app .album-container .album-pic > a {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.app .album-container .title {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	line-height: 1.6em;
	background-color: rgba(0,0,0,.5);
	text-decoration: inherit;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.app .album-container a {
	text-decoration: inherit;
	color: inherit;
}
.app .album.sec-mode .title {
	position: static;
	background-color: transparent;
}
.app .album-container img {
	float: left;
	width: 100%;
	height: 102.5px;
}

.app .list {
	width: 100%;
	font-size: 16px;
	color: #222;
}
.app .list-container {
	width: 100%;
	max-width: 100%;
	font-size: inherit;
	color: inherit;
	text-decoration: inherit;
	overflow: hidden;
}
.app .list-container .list-item {
	position: relative;
	height: 60px;
	padding-left: 10px;
	margin-bottom: 1px;
	background-color: #e8e8e8;
	text-decoration: inherit;
}
.app .list-container .list-item:after {
/* 用于垂直居中的参照物 */
	content: "";
  display: inline-block;
  height: 100%;
  width: 0;
  background-color: #f00;
  vertical-align: middle;
}
.app .list .sec-mode .list-item {
	height: auto;
	padding-left: 0;
}
.app .list-container a {
  display: block;
  height: 100%;
  width: 100%;
}
.app .list-container a:after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 0;
  background-color: #f00;
  vertical-align: middle;
}
.app .list-container .list-img {
	display: inline-block;
	width: 60px;
	height: 60px;
	vertical-align: middle;
}
.app .list .sec-mode .list-img {
  display: block;
  width: 100%;
  margin-left: auto;
  margin-right: auto;
}
.app .list-container .title-container {
	display: inline-block;
	width: calc(100% - 70px);
	text-decoration: inherit;
	vertical-align: middle;
}
.app .list .sec-mode .title-container {
	display: block;
	width: 100%;
	padding-top: 3px;
}
.app .list-container .title-container p {
	width: 100%;
	line-height: 1.6em;
	overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-indent: 5px;
}
.app .list-container .title-container .title {
	text-decoration: inherit;
}
.app .list-container .title-container .sec-title {
	display: inline-block;
	font-size: 12px;
	color: #666;
	font-weight: normal;
	font-style: normal;
	text-decoration: none;
	text-align: left;
}

.top-nav {
  top: 0;
  left: 0;
  width: 100%;
  height: 42px;
  text-align: center;
  background-color: rgb(29, 198, 241);
  color: #fff;
}
.top-nav .img-thumb-wrap:before, .top-nav .img-thumb-wrap:after {
  content: none;
}
.top-nav .left-btn
,.top-nav .right-btn
,.top-nav .nav-btn-text {
  box-sizing: border-box;
}
.top-nav .left-btn
,.top-nav .right-btn {
  display: none;
  position: absolute;
  top: 0;
  height: 100%;
  width: 56px;
  color: inherit;
}
.top-nav .left-btn {
  left: 0;
  text-align: left;
}
.top-nav .right-btn {
  right: 0;
  text-align: right;
}
.top-nav .nav-btn-img {
  display: none;
}
.top-nav .img-thumb-wrap .nav-btn-img {
  display: inline-block;
}
.top-nav .nav-btn-text {
  display: block;
  height: 100%;
  line-height: 1em;
  white-space: pre-wrap;
}
.top-nav .img-thumb-wrap {
  font-size: 1em;
}
.top-nav .img-thumb-wrap .nav-btn-text {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  overflow: hidden;
  font-size: 1em;
}
.top-nav .inner-content:before, .top-nav .inner-content:after,
.top-nav .nav-btn-text:before, .top-nav .nav-btn-text:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}
.top-nav .page-title {
  display: inline-block;
  vertical-align: middle;
  text-decoration: inherit;
}

.bottom-nav {
  bottom: 0;
  left: 0;
  width: 100%;
  padding-top: 2px;
  border-top: 1px solid #c8c8c8;
  line-height: 1.4;
  text-align: center;
  background-color: rgb(29, 198, 241);
  color: #fff;
}
.bottom-nav .item {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  text-align: center;
  text-decoration: inherit;
  overflow: hidden;
}
.bottom-nav .item .bottom-text {
  text-align: center;
  display: block;
  width: 100%;
  line-height: 1.5em;
  font-size: 12px;
  text-decoration: inherit;
}
.bottom-nav .img-after {
  display: none;
}
.bottom-nav .img-thumb-wrap {
  height: 24px;
  width: 24px;
  margin: 2px auto;
}
.bottom-nav.bottom-nav-without-img .img-thumb-wrap {
  display: none;
}
.bottom-nav.bottom-nav-without-img .bottom-text {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-box-pack: center;
  height: 100%;
}

.app .list-vessel,
.app .dynamic-vessel,
.app .form-vessel {
	width: 320px;
	height: auto;
}
.app .dynamic-vessel,
.app .form-vessel {
	min-height: 45px;
	padding-top: 10px;
}
.app .static-vessel {
	height: auto;
	min-height: 45px;
	padding-top: 10px;
}

.app .list-vessel-wrap{
	width: 320px;
	height: 300px;
	overflow-x: hidden;
	overflow-y: auto;
}
.app .list-vessel {
	position: relative;
	width: 100%;
}

.app .grade-ele{
	width: 168px;
	height: 23px;
	margin-left: auto;
  margin-right: auto;
	background-color: #fff;
}
.app .grade-wrap {
	position: relative;
  display: inline-block;
  width: 100%;
  height: 100%;
  background-color: inherit;
}
.app .grade-wrap p {
	width: 100%;
	height: 100%;
}
.app .grade-wrap .empty-grade {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 3;
	background-image: url(http://cdn.jisuapp.cn/zhichi_frontend/static/webapp/images/grade.png);
  background-size: 100% auto;
  background-repeat: no-repeat;
}
.app .grade-wrap .grade {
	position: relative;
	z-index: 1;
  background-image: url(http://cdn.jisuapp.cn/zhichi_frontend/static/webapp/images/grade.png);
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-position-y: 20%;
}
.app .grade-wrap .operate-p {
	position: absolute;
	right: 0;
	top: 0;
	width: 0;
	z-index: 2;
	background-color: inherit;
}
.love-icon-grade-ele .grade-wrap .empty-grade {
	background-position-y: 39%;
}
.love-icon-grade-ele .grade-wrap .grade {
	background-position-y: 60%;
}
.plum-icon-grade-ele .grade-wrap .empty-grade {
	background-position-y: 80%;
}
.plum-icon-grade-ele .grade-wrap .grade {
	background-position-y: 100%;
}
.app .grade-wrap .grade-span-wrap {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 999;
  width: 100%;
  height: 100%;
}
.app .grade-wrap .grade-span-wrap span {
  display: inline-block;
  width: 20%;
  height: 100%;
  background-color: inherit;
}

.app .select-ele {
	width: 100%;
	line-height: 35px;
	margin-left: auto;
  margin-right: auto;
}
.app .select-container {
	text-decoration: inherit;
}
.app .select-container .title {
	display: inline-block;
	width: 100%;
	line-height: 30px;
	background-color: #3598db;
	color: #fff;
	font-size: 12px;
	text-indent: 10px;
	font-weight: normal;
	font-style: normal;
}
.app .select-container li {
	position: relative;
	/* padding: 10px; */
	border-bottom: 1px solid #ddd;
  /* line-height: initial; */
	/*text-indent: 18px;*/
}
.app .select-container li:last-child {
	border-bottom: none;
}
.app .select-container li .select-content {
	display: inline-block;
	width: 85%;
	height: 100%;
  margin-right: 5%;
	vertical-align: middle;
}
.app .select-container li .select-target {
	vertical-align: middle;
  opacity: 0;
  width: 100%;
  height: 100%;
}
.app .select-container li .select-span.select-radio{
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  border-radius: 50%;
  border: 1px solid #c6c6c6;
}
.app .select-container li .select-span.select-radio label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 20px;
  border-radius: 50%;
  opacity: 0;
}
.app .select-container li .select-target[type="radio"]:checked + label{
  opacity: 1;
}
.app .select-container li .select-target[type="radio"]:checked + label:before{
  background-color: #0bbb05;
  color: #fff;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 50%;
}
.app .select-container li .select-span.select-checkbox{
  width: 20px;
  height: 20px;
  display: inline-block;
  vertical-align: middle;
  position: relative;
  border-radius: 3px;
  border: 1px solid #c6c6c6;
}
.app .select-container li .select-span.select-checkbox label {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  line-height: 20px;
  border-radius: 3px;
  opacity: 0;
}
.app .select-container li .select-target[type="checkbox"]:checked + label{
  opacity: 1;
}
.app .select-container li .select-target[type="checkbox"]:checked + label:before{
  color: #0bbb05;
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 3px;
}
.select-target[type="radio"]{
  -webkit-appearance: radio;
}
.select-target[type="checkbox"]{
  -webkit-appearance: checkbox;
}

.app .input-ele {
	width: 60%;
	height: 30px;
	margin-left: auto;
  margin-right: auto;
  /*overflow: hidden;*/
}
.app .input-ele.must input{
  width: 94%;
}
.app .input-ele input {
  width: 100%;
  height: 100%;
	box-sizing: border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	border-radius: inherit;
	border: 1px solid #d3d3d3;
  text-indent: 6px;
  outline: none;
}

.app .textarea-ele {
	width: 80%;
	height: 100px;
	line-height: 30px;
	margin-left: auto;
  margin-right: auto;
}
.app .textarea-ele textarea {
  width: 100%;
  height: 100%;
	box-sizing: border-box;
	-moz-box-sizing:border-box;
	-webkit-box-sizing:border-box;
	border-radius: inherit;
	border: 1px solid #d3d3d3;
  text-indent: 6px;
  outline: none;
  resize: none;
}

.app .upload-img {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  color: #979797;
  font-size: 50px;
  text-align: center;
}
.app .upload-img img{
  width: 60px;
  height: 60px;
  display: block;
}
.app .upload-img.js-uploaded {
  background-color: transparent;
}
.app .upload-img.js-uploaded:before, .app .upload-img.js-uploaded:after {
  content: '';
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}
.app .upload-img .plus-div {
  width: 60px;
  height: 60px;
  line-height: 60px;
  border: 1px solid #e9e9e9;
  display: inline-block;
  vertical-align: middle;
  margin-left: 15px;
  position: relative;
}
.app .upload-img.js-uploaded .plus-div {
  display: none;
}
.app .showUploadImg{
  position: relative;
  display: inline-block;
  width: 60px;
  height: 60px;
  vertical-align: middle;
  margin-left: 15px;
}
.app .showUploadImg span {
  position: absolute;
  top: -9px;
  right: -9px;
  background-color: red;
  color: #fff;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  text-align: center;
  line-height: 14px;
  font-size: 24px;
  font-weight: bolder;
  display: block;
}
.app .upload-img img {
  display: inline-block;
  position: static;
  max-width: 100%;
  max-height: 100%;
}
.app .js-uploaded img {
	display: inline-block;
  position: static;
  width: auto;
  height: auto;
}
.app .time-ele {
	width: 170px;
  height: 30px;
	margin-left: auto;
	margin-right: auto;
}
.app .time-ele .laydate-icon {
  height: 100%;
  background-image: none;
  line-height: inherit;
  text-indent: 10px;
}

.input-ele.must:after,
.textarea-ele.must:after,
.upload-img.must:after,
.time-ele.must:after,
.grade-ele.must .inner-content:after,
.select-ele.must .title:after {
  content: '*';
  position: absolute;
  margin-left: 5px;
  font-size: 16px;
  color: red;
}
.select-ele.must .title:after {
  text-indent: -5px;
}
.upload-img.must:after, .time-ele.must:after {
  top: 0;
  line-height: 20px;
  right: -13px;
}

.app .bbs {
	width: 100% !important;
	padding-left: 3%;
	padding-right: 3%;
	/*background-color: #f3f4f6;*/
}
.app .bbs .comment-amount-p {
	padding-top: 15px;
	padding-bottom: 10px;
	line-height: 22px;
}
.app .bbs .ca-span {
	display: inline-block;
	position: relative;
  width: 30px;
	margin: 0 10px;
	font-size: 26px;
	color: #f65110;;
  vertical-align: middle;
	/*background-color: #f65110;*/
}
.app .bbs .ca-span .ca-span-num{
  display: block;
  width: 30px;
  text-align: center;
  color: #fff;
  font-size: 16px;
  margin-top: 2px;
  overflow: hidden;
  position: absolute;
  top : 0;
  left: 0;
}
/*.app .bbs .ca-span:after{
  content: '';
  position: absolute;
  left: 3px;
  bottom: -6px;
  width: 0;
  height: 0;
  border-left: 0 solid transparent;
  border-right: 10px solid transparent;
  border-top: 8px solid #f65110;
}*/
.app .bbs .comment-box {
	/*border: 1px solid #d6d6d8;*/
}
.app .bbs .reply-comment-box {
	display: none;
	border-top: none;
}
.app .bbs .comment-box .input-wrap {
	width: 94%;
	padding: 6px 3%;
	height: 18px;
	background-color: #fff;
  border: 1px solid #d6d6d8;
}
.app .bbs .focus-box .input-wrap {
	height: 80px;
}
.app .bbs .comment-box textarea {
	width: 100%;
	height: 100%;
	resize: none;
	border: none;
	outline: none;
}
.app .bbs .comment-box .comment-operate-wrap {
	display: none;
	height: 30px;
  margin-top: 5px;
}
.app .bbs .focus-box .comment-operate-wrap {
	display: block;
}
.app .bbs .comment-operate-wrap .comment-btn {
	float: right;
	width: 80px;
	line-height: 28px;
  margin-top: -1px;
  margin-right: -1px;
	background-color: #3db7fa;
	text-align: center;
	color: #fff;
}
.app .bbs .comment-operate-wrap .upload-wrap {
	position: relative;
	display: inline-block;
	width: 35px;
	height: 28px;
	margin-left: -1px;
  overflow: hidden;
  vertical-align: top;
}
.app .bbs .comment-operate-wrap .upload-wrap:before {
  position: absolute;
  font-size: 20px;
  padding: 4px 8px;
  color: #666;
}
.app .bbs .comment-operate-wrap .upload-text{
  vertical-align: top;
  line-height: 28px;
  display: inline-block;
}
.app .bbs .upload-wrap img {
  position: absolute;
	width: 37px;
  height: 30px;
  margin-left: -1px;
  margin-top: -1px;
}
.app .bbs .upload-wrap .delete-img {
	display: none;
	position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  height: 100%;
  line-height: 28px;
  text-align: center;
  font-size: 14px;
  color: #fff;
  background-color: rgba(0,0,0,0.5);
  z-index: 11;
}
.app .bbs .js-uploaded .delete-img {
	display: block;
}
/*bbs | upda | zhn | 11.16*/
.app .bbs-mode1 .bbs{
  padding: 0;
}
.app .bbs-mode1 .bbs-comment{
  vertical-align: middle;
  margin-right: 5px;
}
.app .bbs-mode1 .comment-box{
  border: none;
  overflow: hidden;
  padding-top: 15px;
  padding-bottom: 10px;
  font-size: 0;
}
.app .bbs-mode1 .comment-box .input-wrap{
  width: 195px;
  display: inline-block;
  height: 20px;
  border: 1px solid #d6d6d8;
  padding: 4px;
  vertical-align: bottom;
  font-size: 14px;
}
.app .bbs-mode1 .comment-box .comment-operate-wrap{
  display: inline-block;
  width: 95px;
  height: 30px;
  border-top: none;
  vertical-align: bottom;
  font-size: 14px;
  margin-top: 0;
}
.app .bbs-mode1 .comment-box .comment-operate-wrap .comment-btn{
  width: 45px;
  margin: 0;
  height: 28px;
  background-color: transparent;
  border: 1px solid #d6d6d8;
  border-radius: 3px;
  color: #666;
}
.app .bbs-mode1 .comment-box .comment-operate-wrap .upload-wrap{
  border: 1px solid #d6d6d8;
}

.app .count-ele {
	font-size: 14px;
}
.app .count-ele .count-icon {
	display: inline-block;
	width: 30px;
	height: 30px;
	background-image: url(http://cdn.jisuapp.cn/zhichi_frontend/static/webapp/images/count_icons.png);
	background-repeat: no-repeat;
	background-size: auto 100%;
	background-position-y: -2px;
	vertical-align: middle;
}
.app .count-ele.active .count-icon[data-icon="star-icon"] {
	background-position-x: 0;
}
.app .count-ele .count-icon[data-icon="star-icon"] {
	background-position-x: 9%;
}
.app .count-ele.active .count-icon[data-icon="flower-icon"] {
	background-position-x: 18%;
}
.app .count-ele .count-icon[data-icon="flower-icon"] {
	background-position-x: 27%;
}
.app .count-ele.active .count-icon[data-icon="like-icon"] {
	background-position-x: 36%;
}
.app .count-ele .count-icon[data-icon="like-icon"] {
	background-position-x: 45%;
}
.app .count-ele.active .count-icon[data-icon="hate-icon"] {
	background-position-x: 54%;
}
.app .count-ele .count-icon[data-icon="hate-icon"] {
	background-position-x: 63%;
}
.app .count-ele.active .count-icon[data-icon="love-icon"] {
	background-position-x: 72%;
}
.app .count-ele .count-icon[data-icon="love-icon"] {
	background-position-x: 81%;
}
.app .count-ele .count-icon[data-icon="view-icon"] {
	background-position-x: 90%;
}

.app .user-center {
	width: 100% !important;
	/*height: 100px;*/
	color: #fff;
	font-size: 16px;
  /*background-color: #fff;*/
}
.app .user-center .usercenter-mode-one::before,
.app .user-center .usercenter-mode-one::after {
  content: '';
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
}
.app .block-item .usercenter-mode-two{
  border-bottom: 1px solid #f3f3f3;
}
.app .block-item .usercenter-mode-two:last-child{
  border:none;
}
.app .user-center.old-data-deal {
  height: 235px!important;
}
.app .user-center .show-div {
  position: relative;
  width: 100%;
  height: 100%;
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.app .user-center.with-horizontal-div .show-div {
  height: 100px;
}
.app .user-center .horizontal-div {
  display: none;
  /*border-bottom: 1px solid #CCC7C7;*/
  font-size: 14px;
}
.app .user-center.with-horizontal-div .horizontal-div {
  display: block;
}
.app .user-center .horizontal-router-container {
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
}
.app .user-center .horizontal-router-container > div {
  -webkit-box-flex: 1;
  -moz-box-flex: 1;
  -webkit-flex: 1;
  -ms-flex: 1;
  flex: 1;
  text-align: center;
  color: #666;
  padding: 7px 0;
  border-right: 1px solid #eee;
}
.app .user-center .horizontal-router-container > div:last-child {
  border: none;
}
.app .user-center .horizontal-router-container > div > p {
  height: 30px;
  width: 30px;
  line-height: 30px;
  font-size: 24px;
  margin: 0 auto;
}
.app .user-center .usercenter-mode-one{
  margin: 8px auto;
}
.app .user-center .show-div .cover-thumb {
  border: 0;
	width: 50px;
	height: 50px;
	margin-right: 25px;
	border-radius: 50%;
	vertical-align: middle;
}
.app .user-center .show-div .empty-span {
	display: inline-block;
	width: 25px;
	height: 100%;
	vertical-align: middle;
}
.app .user-center .show-div .nickname {
	vertical-align: middle;
}
.app .user-center .show-div .icon-rightarrow {
	position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -15px;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 20px;
}

.app .usercenter-mode1 .horizontal-router-container1 .userCenterMyorder {
  color: #666;
}
.app .usercenter-mode1 .horizontal-router-container1 .userCenterMyorder > div{
  padding: 7px 0;
}
.app .usercenter-mode1 .horizontal-router-container1 .orderSubmenu {
  width: 25%;
  display: inline-block;
  text-align: center;
}
.app .usercenter-mode1 .horizontal-router-container1 .orderSubmenu p {
  font-size: 18px;
  margin-bottom: 2px;
}
/*个人中心 | upda | zhn | 11.16*/
.app .usercenter-mode1 .horizontal-router-container1 {
  border-bottom: 1px solid #eee;
  /*background: #fff;*/
  overflow: hidden;
}
.app .usercenter-mode1 .horizontal-router-container1 > .router {
  line-height: 30px;
  height: 30px;
  padding: 7px 10px 7px 0px;
  /*margin-left: 10px;*/
  color:#666;
  border-top: 1px solid #eee;
  border-bottom:1px solid #eee;
  background: #FFF;
  margin-top: -1px;
}
.app .usercenter-mode1 .horizontal-router-container1 > .router .ico-arrow {
  margin-right: 0;
  font-size: 14px;
}
.app .usercenter-mode1 .horizontal-router-container1 > .router:last-child {
  /*border: 0;*/
  margin-bottom: -1px;
}
.app .usercenter-mode1 .horizontal-router-container1 > .router > p {
  float: left;
  font-size:20px;
  line-height: 30px;
  height: 30px;
  margin-right:6px;
  margin-left: 10px;
}
/*.user-center{
  height: 100px !important;
}
.user-center.with-horizontal-div{
  height: 164px !important;
}
.usercenter-mode1.with-horizontal-div{
  height: 236px !important;
}
.user-center.with-horizontal-div .show-div {
  height: 100px !important;
}*/

.ico-m {
  position:relative;
  width: 20px;
  height:30px;
  line-height: 20px;
  font-size: 16px;
  float:right;
  color:#aaa;
  margin-top:6px;
  /*margin-right: 10px;*/
}

.app .border-cell{
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  border-width: 0;
}
.app .classify {
	width: 100%;
	height: 35px;
	line-height: 35px;
	color: #888;
	font-size: 13px;
	background-color: #f2f2f2;
	overflow: hidden;
}
.app .classify ul {
	height: 50px;
	width: 100%;
	white-space: nowrap;
	text-decoration: inherit;
	overflow-x: scroll;
	overflow-y: hidden;
}
.app .classify .item {
	position: relative;
	display: inline-block;
	min-width: 71px;
	text-align: center;
	text-decoration: inherit;
	vertical-align: top;
}
.app .classify .item span {
	padding-left: .4em;
	padding-right: .4em;
	white-space: nowrap;
	text-decoration: inherit;
}
.app .classify .item .underline {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0;
  width: 100%;
	border-top: 1px solid rgb(61, 183, 248);
}
.app .classify[mode="0"] .selected span {
	padding-top: .4em;
	padding-bottom: .4em;
	border-radius: .4em;
	background-color: rgb(61, 183, 248);
	color: #fff;
}
.app .classify[mode="1"] .selected {
	color: rgb(61, 183, 248);
}
.app .classify[mode="1"] .selected .underline {
	display: block;
}
.app .new-classify {
  width: 100%;
  height: 35px;
  line-height: 35px;
  color: #888;
  font-size: 13px;
  background-color: #f2f2f2;
  overflow: visible;
  z-index: 2;
}
.app .new-classify ul {
  width: 100%;
  white-space: nowrap;
  text-decoration: inherit;
  overflow-x: scroll;
}
.app .new-classify .item {
  position: relative;
  display: inline-block;
  min-width: 71px;
  text-align: center;
  text-decoration: inherit;
  vertical-align: top;
}
.app .new-classify .item span,
.app .new-classify .sublist-item span {
  padding-left: .4em;
  padding-right: .4em;
  white-space: nowrap;
  text-decoration: inherit;
}
.app .new-classify .item .underline {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0;
  width: 100%;
  border-top: 1px solid rgb(61, 183, 248);
}
.app .new-classify[mode="0"] .selected span {
  padding-top: .4em;
  padding-bottom: .4em;
  border-radius: .4em;
  background-color: rgb(61, 183, 248);
  color: #fff;
}
.app .new-classify[mode="1"] .selected {
  color: rgb(61, 183, 248);
}
.app .new-classify[mode="1"] .selected .underline {
  display: block;
}
.app .new-classify[mode="2"] > ul {
  width: 80%;
}
.app .new-classify[mode="2"] .item {
  min-width: auto;
  width: 20vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app .new-classify[mode="2"] .selected {
  color: rgb(61, 183, 248);
}
.app .new-classify .new-calssify-open-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 20vw;
  height: 100%;
  vertical-align: middle;
  text-align: center;
}
.app .new-classify .new-classify-select-wrap {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,.5);
}
.app .new-classify .new-classify-select-wrap.is-showing {
  display: block;
}
.app .new-classify .new-classify-select-wrap .new-calssify-open-btn {
  position: relative;
  width: 100%;
  text-align: right;
}
.app .new-classify .new-classify-select-wrap .new-calssify-open-btn span {
  display: inline-block;
  width: 20vw;
  text-align: center;
}
.app .new-classify .new-classify-select-main {
  padding-bottom: 30px;
  background: #fff;
}
.app .new-classify .new-classify-select-list {
  max-height: calc(100vh - 35px);
  text-align: left;
  overflow-y: auto;
}
.app .new-classify .new-classify-sublist {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 150px;
  overflow-y: scroll;
  text-decoration: none;
}
.app .new-classify .item .triangle {
  position: absolute;
  right: .4em;
  top: 46%;
  width: 0;
  height: 0;
  vertical-align: middle;
  border-left: 3px solid transparent;
  border-right: 3px solid transparent;
  border-top: 5px solid;
}
.app .new-classify .item .classify-name {
  padding: 0 1.3em 0 .7em;
}
.app .new-classify .item .divide-line {
  position: absolute;
  right: 0;
  top: 15%;
  border-right: 1px solid #ccc9c9;
  height: 70%;
}
.app .new-classify[classify-level="2"] .item.selected {
  color: rgb(61, 183, 248);
}
.app .new-classify[classify-level="2"][mode="1"] .sublist-item.selected {
  border-color: rgb(61, 183, 248);
}
.app .new-classify .sublist-item {
  margin: 0 1em;
  border-bottom: 1px solid #d8d8d8;
}
/*排序组件 sort*/
.app .sort {
width: 100%;
height: 35px;
line-height: 35px;
color: #888;
font-size: 13px;
background-color: #f2f2f2;
overflow: hidden;
}
.app .sort ul {
height: 50px;
width: 100%;
white-space: nowrap;
text-decoration: inherit;
overflow-x: scroll;
overflow-y: hidden;
}
.app .sort .item {
position: relative;
display: inline-block;
min-width: 71px;
text-align: center;
text-decoration: inherit;
vertical-align: top;
}
.app .sort .item span {
padding-left: .4em;
white-space: nowrap;
text-decoration: inherit;
}
.app .sort .selected .arr-wrap{
visibility:visible!important;
}
.app .sort .arr-wrap{
visibility:hidden;
position: relative;
display: inline-block;
height: 20px;
width: 12px;
vertical-align: middle;
}
.app .sort .sort-arr{
position: absolute;
right: 0;
font-size: 12px;
display: block;
height: 12px;
line-height: 12px;
width: 12px;
text-align: center;
-webkit-transform:scale(0.8); -moz-transform:scale(0.8); -ms-transform:scale(0.8); -o-transform:scale(0.8); transform:scale(0.8);
}
.app .sort .arr-up{
    top: 0;
}
.app .sort .arr-down{
    bottom: 0;
}
/*搜索组件  search*/
.search-wrap{
  background:#efeff4;
}
.app .search{
height:50px;
line-height:50px;
width:320px;
}
.app .search-input{
position: relative;
width:90%;
border-radius:5px;
background:#ffffff;
height:30px;
line-height:30px;
margin:0 5%;
color:#888888;
display:inline-block;
padding-left: 20px;
box-sizing: border-box;
}
.app .search-input i{
vertical-align:middle;
margin-right:5px;
}
.app .search-input span{
vertical-align:middle;
}
.app .search-input input {
  width: 75%;
  vertical-align: middle;
  height: 20px;
  border: none;
  outline: none;
  font-size: 12px;
}
.app .search-input .search-btn {
  position: absolute;
  right: 0;
  top: 0;
  width: 50px;
  text-align: center;
  font-size: 12px;
  background: #ddd;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
/*WbeApp分类样式添加|upda|malaing|8.16*/

.classify-mode0 .selected span {
  padding-top: .4em;
  padding-bottom: .4em;
  border-radius: .4em;
  background-color: rgb(61, 183, 248);
  color: #fff;
}
.classify-mode1 .selected {
  color: rgb(61, 183, 248);
}
.classify-mode1 .selected .underline {
  display: block;
}


.title-ele {
  line-height: 25px;
  cursor: pointer;
  background-color: #efefef;
}
.title-ele p{
	height: 100%;
	overflow-x: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.title-ele .title-text{
	padding-left: 1em;
	position: relative;
	white-space: pre-wrap;
}
.title-ele[mode="0"] .mark{
	background-color: red;
	display: none;
}
.title-ele[mode="1"] .mark{
  width: 5px;
  background-color: red;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.title-ele[mode="2"] .mark{
	height: 2px;
  background-color: red;
  position: absolute;
  bottom: -5px;
  right: 0;
  left: 15px;
}
.title-ele[mode="3"] .mark{
	width: .4em;
  height: .4em;
  border-radius: 50%;
  background-color: red;
  position: absolute;
  top: 50%;
  margin-top: -0.2em;
  left: .4em;
}

.app .hotspot {
	position: absolute!important;
	line-height: 1.8em;
  white-space: pre-wrap;
  text-align: center;
	z-index: 10!important;
}
.app .breakline {
  border-width: 1px;
  border-color: #DDD;
  border-bottom-style: solid;
}
/* 自由面板里的分割线 */
.app .free-vessel .breakline {
  width: 200px;
}
.app .page .ele-container > .breakline {
	margin-top: 5px;
	/* margin-bottom: 5px; */
}

.app .free-vessel {
	width: 100%;
	height: 150px;
  overflow: hidden;
}

.app .goods-list,
.app .seckill {
  width: 100%;
  max-width: 100%;
  font-size: inherit;
  color: inherit;
  text-decoration: inherit;
  overflow-x: hidden;
  overflow-y: auto;
}
.app .goods-list .goods-list-item,
.app .seckill .goods-list-item {
  position: relative;
  height: 60px;
  padding-left: 10px;
  margin-bottom: 1px;
  text-decoration: inherit;
}
.app .goods-list .goods-list-item:after,
.app .seckill .goods-list-item:after {
/* 用于垂直居中的参照物 */
  content: "";
  display: inline-block;
  height: 100%;
  width: 0;
  background-color: #f00;
  vertical-align: middle;
}
.app .goods-list .list-img,
.app .seckill .list-img {
  display: inline-block;
  width: 60px;
  height: 60px;
  vertical-align: middle;
}
.app .goods-list .title-container,
.app .seckill .title-container {
  padding-top:4px;
  display: inline-block;
  width: calc(100% - 80px);
  text-decoration: inherit;
  vertical-align: top;
}
.app .seckill .title-container{
  padding-top: 0;
}
.app .goods-list .title-container p,
.app .seckill .title-container p,
.app .seckill .title-container .seckill-list-bottom {
  width: 100%;
  padding: 0 10px;
  word-break: break-all;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
}
.app .goods-list .title-container p:last-child {
  position: absolute;
  bottom: 4px;
}
.app .seckill .title-container .seckill-list-bottom{
  position: absolute;
  bottom: 0px;
}
.app .goods-list .title-container .title,
.app .seckill .title-container .title {
  text-decoration: inherit;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.app .goods-list .title-container .price,
.app .seckill .title-container .price {
  color: #f60;
  margin-right: 10px;
}
.app .goods-list .title-container .sales{
  font-size: 12px;
  color: #a8a8a8;
}
.app .seckill .title-container .sales{
  font-size: 10px;
  color: #a8a8a8;
}
.app .goods-list .title-container .goods-purchase,
.app .seckill .title-container .goods-purchase{
  display: inline-block;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-size: 20px;
  border: 1px solid;
  border-radius: 50%;
  text-indent: 0;
  text-align: center;
}
.app .goods-list .inner-content,
.app .seckill .inner-content {
  display: inline-block;
  vertical-align: middle;
  height: auto;
  position: relative;
  width: 100%;
  text-decoration: inherit;
  border-radius: inherit;
  z-index: 1;
}
.app .goods-list .title-container .addShoppingcart,
.app .seckill .title-container .addShoppingcart {
  display: inline-block;
  width: 30px;
  height: 25px;
  text-align: center;
  line-height: 27px;
  font-size: 16px;
  overflow: hidden;
  position: absolute;
  bottom: -2px;
  right: 5px;
}
.app .goods-list .double-goods-list .addShoppingcart,
.app .seckill .double-goods-list .addShoppingcart{
  bottom: 0;
  line-height:30px;
}
.app .goods-list .title-container .shoppingImage {
  width: 20px;
  height: 20px;
}
.app .goods-list .title-container .shoppingImage img{
  width: 100%;
  height: 100%;
}


.map .map-module {
  display: none;
  width: 100%;
  height: calc(100% - 30px);
  min-height: 20px;
}
.map.withmap .map-module {
  display: block;
}
.map div[onpositionupdate="return;"], .map div[onresize="return;"] {
  display: none !important;
}
.map .map-link {
  margin-top: 5px;
  white-space: pre-wrap;
  display: inline-block;
}

.app .code {
  height: 30px;
  overflow-x: hidden;
  overflow-y: auto;
}
.app .code iframe {
  height: 30px;
  width: 100%;
  /*height: 100%;*/
  border: none;
}


.app .franchisee-list {
  width: 100%;
  max-width: 100%;
  font-size: inherit;
  color: inherit;
  text-decoration: inherit;
  overflow-x: hidden;
  overflow-y: auto;
}
.app .franchisee-list .franchisee-title {
  padding: 10px;
  font-size: 13px;
  text-align: right;
  color: #646464;
  background-color: #fff;
 /* border-top: 1px solid #eee;*/
  border-bottom: 1px solid #eee;
}
.app .franchisee-list .franchisee-location {
  float: left;
  color: #646464;
  width: 50%;
  /*width:78%;*/
  text-align: left;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.app .franchisee-list .icon-location {
  font-size: 18px;
  vertical-align: sub;
  color: #646464;
}
.app .franchisee-list .franchisee-list-item {
  position: relative;
  /*height: 90px;*/
   height: auto!important;
  padding-left: 10px;
  /*margin-bottom: 10px!important;*/
  text-decoration: inherit;
  border-bottom: 1px solid #eee;
}
.app .franchisee-list .franchisee-list-item .discount-coupons{
	width: 100%!important;
	height: auto;
	padding-left:75px;
}
.app .franchisee-list .franchisee-list-item .discount-coupons p{
	/*text-align: center;*/
	font-size: 10px;
	color: #989898;
	padding: 0 0 4px 0;
}
.app .franchisee-list .franchisee-list-item .discount-coupons p span{
	width: 15px;
	height: 15px;
	display: inline-block;
	text-align: center;
	margin-right: 5px;
  line-height: 15px;
}
.app .franchisee-list .franchisee-list-item .discount-coupons .coupons-cash span{
	background: #ff7900;
	color: #fff;
}
.app .franchisee-list .franchisee-list-item .discount-coupons .coupons-rebate span{
	background: #f75351;
	color: #fff;
}
.app .franchisee-list .franchisee-list-item.not-open {
  opacity: .5;
}
.app .franchisee-list .franchisee-list-item .not-open-tip {
  display: none;
}
.app .franchisee-list .franchisee-list-item.not-open .not-open-tip {
  display: block;
  position: absolute;
  left: -13px;
  top: -2px;
  z-index: 1;
  font-size: 12px;
  transform: rotateZ(-45deg) scale(.9);
  -webkit-transform: rotateZ(-45deg) scale(.9);
  text-align: center;
  color: #fff;
}
.app .franchisee-list .franchisee-list-item .franchisee-list-goods:before {
  content: "";
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
}
.app .franchisee-list .franchisee-list-item .inner-content {
  position: relative;
  display: inline-block;
  width: 100%;
  height: auto;
  vertical-align: middle;
}
.app .franchisee-list .franchisee-list-item .inner-content:before {
  content: "";
  display: none;
  position: absolute;
  left: -39px;
  top: -19px;
  border-top: 40px solid #999;
  border-left: 40px solid transparent;
  border-right: 40px solid transparent;
  transform: rotateZ(135deg) scale(.8);
  -webkit-transform: rotateZ(135deg) scale(.8);
}
.app .franchisee-list .franchisee-list-item.not-open .inner-content:before {
  display: block;
}
.app .franchisee-list .cart-goods-num {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 20px;
  line-height: 20px;
  background-color: #ff1616;
  border-radius: 50%;
  color: #fff;
  text-align:center;
}
.app .franchisee-list .title-container {
  display: inline-block;
  width: calc(100% - 80px);
  text-decoration: inherit;
  vertical-align: top;
}
.app .franchisee-list .title-container .title{
  display: inline-block;
  width: auto;
  max-width: 100%;
  padding-left: 7px;
  box-sizing: border-box;
  -webkit-box-sizing: border-box;
  text-decoration: inherit;
  overflow : hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.app .franchisee-list .enter-title{
  position: relative;
  padding-right: 46px;
}
.app .franchisee-list .franchisee-list-audit{
  display: block;
  position:absolute;
  top: 0;
  right: 2px;
  width: 40px;
  height: 20px;
  font-size: 12px;
  color: #fff;
  text-align: center;
  line-height: 20px;
  background-color: #FAA322;
}
.app .franchisee-list .title-container .description,
.app .franchisee-list .title-container .personPrice{
  width: calc(100% - 5px);
  padding-left: 7px;
  word-break: break-all;
  text-decoration: inherit;
  overflow : hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.app .franchisee-list .title-container .item-distance,.app .franchisee-list .title-container .item-phone{
  color:#ababab;
  padding-left: 7px;
  width: calc(100% - 5px);
  margin-top: 8px;
  font-size: 10px;
}
.app .franchisee-list .title-container .description {
  margin-top: 5px;
  font-size: 14px;
  color: #aaa;
}
.app .franchisee-list .title-container .personPrice{
	margin-top: 32px;
  font-size: 14px;
}
/*.app .franchisee-list .distance {
  position: absolute;
  right: 10px;
  top: 45px;
  color: #ccc;
}*/

/* 组件默认样式 */

/*社区组件*/
.app .community-item{
  padding-left: 10px;
  position: relative;
}
.app .community-item:before {
/* 用于垂直居中的参照物 */
  content: "";
  display: inline-block;
  height: 100%;
  width: 0;
  background-color: #f00;
  vertical-align: middle;
}
.app .community-item .inner-content {
  display: inline-block;
  vertical-align: middle;
  height: auto;
  position: relative;
  width: 100%;
  text-decoration: inherit;
  border-radius: inherit;
  white-space: nowrap;
  z-index: 1;
}
.app .community-item .list-img{
  display: inline-block;
  width: 60px;
  height: 60px;
  vertical-align: middle;
}
.app .community-item .title-container{
  display: inline-block;
  width: 240px;
  width: calc(100% - 80px);
  vertical-align: top;
}
.app .community-item .title-container > p{
  padding-left: 10px;
  margin-top: 6px;
}
.app .community-item .title-container .community-title{
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  display: inline-block;
  vertical-align: middle;
  width: 140px;
}
.app .community-item .title-container .topic-num{
  margin-left: 20px;
  font-size: 12px;
  color: #a8a8a8;
}
.app .community-item .title-container .topic-num > span{
  margin-left: 5px;
}
.app .community-item .community-desc{
  font-size: 12px;
  color: #a8a8a8;
  overflow : hidden;
  text-overflow: ellipsis;
  /*display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  white-space: normal;*/
  white-space: nowrap;
}

/*悬浮窗*/
.flex-column {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.suspension-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.suspension-box {
  text-align: center;
}

.suspension-box:last-child {
  margin:0 !important;
}

.suspension-title {
  white-space: nowrap;
  text-overflow: ellipsis;
}

.suspension {
  color: #fff;
  font-size: 20px;
  right: 0;
  bottom: 70px;
}

.suspension-item {
  display: block;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
  margin-bottom: 1px;
}

.suspension-item.diy {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.suspension-item.diy>img {
  display: block;
}

.suspension-item>span {
  line-height: 35px;
}

.suspension-sideways {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 新版悬浮窗 */
.newSuspension {
  position: fixed !important;
  right: 0px;
  z-index: 999;
}
.newSuspension button {
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:100%;
  z-index:1;
  opacity:0;
}
.newSuspension-wrap {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
}
.newSuspension-wrap.newSuspension-round {
 overflow:hidden;
}
.newSuspension-wrap.newSuspension-right {
 margin-right: 40px;
}
.newSuspension-box {
  position:relative;
}
.btmBar {
  padding-top: 10px;
  width: 40px;
  height: 40px;
}
.btmBar.float {
  float:right;
}
.btmBar.marginAuto {
  margin:0 auto;
}
.roundBar.sideBarRightOut {
  justify-content: center;
}
.roundBar.sideBarRightOut>.unfoldBtn {
  justify-content: center;
}
.btmBar>.unfoldBtn.float {
  float: right;
  margin-right: 20px;
}
.btmBar>.unfoldBtn,.roundBar.sideBarRightOut>.unfoldBtn {
  display: flex;
  flex-direction: column;
}

.newSuspension-close {
  height: 40px;
  width: 40px;
  float: right;
  margin-right:10px;
}

.unfoldBtn {
  height: 100%;
  width:100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.sideBar {
  width: 40px;
  height: 40px;
  position: absolute;
  left: -50px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99;
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.sideBarRight {
  position: absolute;
  right: -50px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 99;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  font-size: 11px;
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
  overflow: hidden;
}
.sideBarRightOut {
  position: fixed;
  right: 5px;
  bottom: 70px;
  z-index: 99;
  display: flex;
  align-items: center;
  font-size: 11px;
  z-index: 99;
}


.suspension-item-box {
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.newSuspension-item {
  display: flex;
  justify-content: space-around;
  align-items: center;
  position:relative;
}
.newSuspension-item.diy span {
  overflow: hidden;
  text-overflow:ellipsis;
  white-space: nowrap;
  padding-left: 5px;
}
.newSuspension-item>image {
  min-width: 30px;
  min-height: 30px;
}
.newSuspension-item>.item-name {
  min-width:40px;
}
.hiddenBtn {
  display: none;
}
/* 动态分类 */
.app .dynamic-classify.type-level1-horizontal {
	width: 100%;
	height: auto;
}
.app .dynamic-classify.type-level1-horizontal .classify-area {
	height: 35px;
	width: 100%;
	white-space: nowrap;
	text-decoration: inherit;
  	line-height: 35px;
	color: #888;
	font-size: 13px;
	background-color: #f2f2f2;
  overflow-y: hidden;
  overflow-x: auto;
}
.app .dynamic-classify.type-level1-horizontal .dynamic-classify-item {
	position: relative;
	display: inline-block;
	min-width: 71px;
	text-align: center;
	text-decoration: inherit;
	vertical-align: top;
}
.app .dynamic-classify  .classify-area.mode-2 .dynamic-classify-item {
  width: 20vw;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: auto;
}
.app .dynamic-classify.type-level1-horizontal .dynamic-classify-item span {
	padding-left: .7em;
	padding-right: .7em;
	white-space: nowrap;
	text-decoration: inherit;
}
.app .dynamic-classify.type-level1-horizontal .dynamic-classify-item .underline {
  display: none;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 0;
  width: 100%;
	border-top: 1px solid rgb(61, 183, 248);
}
.app .dynamic-classify.type-level1-horizontal .classify-area.mode-0 .selected span {
	padding-top: .4em;
	padding-bottom: .4em;
	border-radius: .4em;
	background-color: rgb(61, 183, 248);
	color: #fff;
}
.app .dynamic-classify.type-level1-horizontal .classify-area.mode-1 .selected {
	color: rgb(61, 183, 248);
}
.app .dynamic-classify.type-level1-horizontal .classify-area.mode-1 .selected .underline {
	display: block;
}
.app .dynamic-classify.type-level1-horizontal .vessel-area {
  white-space: nowrap;
  overflow: hidden;
  overflow-y: auto;
}
.app .dynamic-classify.type-level1-horizontal .vessel-area.mode-1,
.app .dynamic-classify.type-level1-horizontal .vessel-area.mode-2 {
  white-space: pre-wrap;
}
.app .dynamic-classify .classify-area-open-btn {
  position:absolute;
  right: 0;
  top: 0;
  width: 20%;
  z-index: 1;
  height: 35px;
  line-height: 35px;
  text-align: right;
  background: #f3f4f6;
}
.app .dynamic-classify .classify-area-open-btn.open {
  position: relative;
  width: 100%;
  background: #fff;
}
.app .dynamic-classify .classify-area-open-btn span {
  display: inline-block;
  width: 20vw;
  text-align: center;
}
.app .dynamic-classify.type-level1-horizontal .classify-area.mode-2 {
  width: 80%;
  overflow: hidden;
  overflow-x: auto;
}
.app .dynamic-classify  .classify-area-main.mode-2 {
  white-space: pre;
}
.app .dynamic-classify .classify-area-select-wrap {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,.5);
  z-index: 1;
}
.app .dynamic-classify .classify-area-select-wrap .classify-area-select.mode-2 {
  padding-bottom: 13px;
  background: #fff;
  max-height: calc(100% - 35px);
  overflow-y: auto;
}
.app .dynamic-classify  .classify-area-select.mode-2 .dynamic-classify-item {
  width: 20%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: auto;
}
.app .dynamic-classify .classify-area-select-wrap .classify-area-select.mode-2 .dynamic-classify-item {
  line-height: 34px;
}
.app .dynamic-classify.type-level1-horizontal .vessel-area.only-preview {
  font-size: 16px;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}
.app .dynamic-classify.type-level1-vertical {
	width: 100%;
	height: 300px;
}
.app .dynamic-classify.type-level1-vertical .classify-area {
  position: absolute;
  top: 0;
  left: 0;
	width: 80px;
	height: 100%;
  line-height: 35px;
	text-decoration: inherit;
	color: #888;
	font-size: 13px;
	background-color: #f2f2f2;
  overflow: hidden;
  overflow-y: auto;
}
.app .dynamic-classify.type-level1-vertical .dynamic-classify-item {
	position: relative;
	display: inline-block;
	width: 100%;
  height: 35px;
  line-height: 35px;
	text-align: center;
	text-decoration: inherit;
	vertical-align: top;
  overflow: hidden;
  text-overflow:ellipsis;
}
.app .dynamic-classify.type-level1-vertical .dynamic-classify-item span {
	white-space: nowrap;
	text-decoration: inherit;
}
.app .dynamic-classify.type-level1-vertical .dynamic-classify-item .leftline {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
	border-left: 1px solid #34b6fd;
}
.app .dynamic-classify.type-level1-vertical .classify-area .selected {
	color: rgb(61, 183, 248);
}
.app .dynamic-classify.type-level1-vertical .vessel-area {
  position: absolute;
  top: 0;
  left: 80px;
  width: calc(100% - 80px);
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
.app .dynamic-classify.type-level1-vertical .vessel-area.only-preview {
  font-size: 16px;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}
.app .dynamic-classify.type-level2-horizontal {
	width: 100%;
	height: auto;
}
.app .dynamic-classify.type-level2-horizontal .classify-area {
  position: relative;
	height: 35px;
	width: 100%;
	white-space: nowrap;
	text-decoration: inherit;
  	line-height: 35px;
	color: #888;
	font-size: 13px;
	background-color: #f2f2f2;
  overflow: hidden;
  overflow-x: auto;
}
.app .dynamic-classify.type-level2-horizontal .dynamic-classify-item {
	position: relative;
	display: inline-block;
	min-width: 71px;
	text-align: center;
	text-decoration: inherit;
	vertical-align: top;
}
.app .dynamic-classify.type-level2-horizontal .dynamic-classify-item span {
	padding-left: .7em;
  padding-right: 1.3em;
	white-space: nowrap;
	text-decoration: inherit;
}
.app .dynamic-classify.type-level2-horizontal .classify-area.mode-0 .triangle {
  position: absolute;
  right: .5em;
  top:42.5%;
  border-left:3px solid transparent;
  border-top:5px solid #666;
  border-right:3px solid transparent;
}
.app .dynamic-classify.type-level2-horizontal .classify-area.mode-0 .selected .triangle {
	transform: rotateZ(180deg);
  border-top: 5px solid #3db7f8;
}
.app .dynamic-classify.type-level2-horizontal .classify-area.mode-1 .triangle {
  position:absolute;
  top:40%;
  right:.5em;
  width:5px;
  height:5px;
  padding:0;
  border-right:1px solid #666;
  border-bottom:1px solid #666;
  transform:rotate(45deg);
}
 .app .dynamic-classify.type-level2-horizontal .classify-area.mode-1 .selected .triangle {
   top: 45%;
	transform: rotateZ(225deg);
  border-color: 5px solid #3db7f8;
}
.app .dynamic-classify.type-level2-horizontal .dynamic-classify-item .divide-line {
  position:absolute;
  right:0;
  top:15%;
  border-right:1px solid #ccc9c9;
  height:70%;
}
.app .dynamic-classify.type-level2-horizontal .sub-classify-area {
  position: absolute;
  top: 35px;
  left: 0;
  width: 100%;
  height:300px;
  border-top: 1px solid #ccc9c9;
  box-sizing: border-box;
  background-color: rgba(0,0,0,0.3);
  z-index: 10;
}
.app .dynamic-classify.type-level2-horizontal .sub-classify-item-list {
  display: none;
  background-color:#f3f4f6;
  position: absolute;
  width: 100%;
  left: 0;
  border-top: 1px solid #ccc;
}
.app .dynamic-classify.type-level2-horizontal .sub-classify-item-list.is-showing {
  display: block;
  z-index: 10;
}
.app .dynamic-classify.type-level2-horizontal .sub-classify-item {
  height: 35px;
  line-height: 35px;
  padding: 0 10px;
  border-bottom: 1px solid #ccc9c9;
  margin: 0 10px;
}
.app .dynamic-classify.type-level2-horizontal .sub-classify-item:last-child {
  border: 0;
}
.app .dynamic-classify.type-level2-horizontal .sub-classify-item.selected {
  border-bottom:1px solid #34b6fd;
}
.app .dynamic-classify.type-level2-horizontal .vessel-area {
  white-space: nowrap;
  overflow: hidden;
  overflow-y: auto;
}
.app .dynamic-classify.type-level2-horizontal .vessel-area.mode-1,
.app .dynamic-classify.type-level2-horizontal .vessel-area.mode-2 {
  white-space: pre-wrap;
}
.app .dynamic-classify.type-level2-horizontal .vessel-area.only-preview {
  font-size: 16px;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}
.app .dynamic-classify.type-level2-vertical-nopic {
	width: 100%;
	height: 300px;
}
.app .dynamic-classify.type-level2-vertical-nopic .classify-area {
  position: absolute;
  top: 0;
  left: 0;
	width: 80px;
	height: 100%;
  line-height: 35px;
	text-decoration: inherit;
	color: #888;
	font-size: 13px;
	background-color: #f2f2f2;
  overflow: hidden;
  overflow-y: auto;
}
.app .dynamic-classify.type-level2-vertical-nopic .dynamic-classify-item {
	position: relative;
	display: inline-block;
	width: 100%;
  height: 35px;
  line-height: 35px;
	text-align: center;
	text-decoration: inherit;
	vertical-align: top;
  overflow: hidden;
  text-overflow:ellipsis;
}
.app .dynamic-classify.type-level2-vertical-nopic .dynamic-classify-item span {
	white-space: nowrap;
	text-decoration: inherit;
}
.app .dynamic-classify.type-level2-vertical-nopic .dynamic-classify-item .leftline {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
	border-left: 1px solid #34b6fd;
}
.app .dynamic-classify.type-level2-vertical-nopic .classify-area .selected {
	color: rgb(61, 183, 248);
}
.app .dynamic-classify.type-level2-vertical-nopic .sub-classify-area {
  display: none;
  position: absolute;
  top: 0;
  left: 80px;
  right: 0;
  height: 100%;
  border-top: 1px solid #ccc9c9;
  box-sizing: border-box;
  background-color: rgba(0,0,0,0.3);
  z-index: 10;
}
.app .dynamic-classify.type-level2-vertical-nopic .sub-classify-area.is-showing {
  display: block;
}
.app .dynamic-classify.type-level2-vertical-nopic .sub-classify-item-list {
  border-left: 1px solid #ccc9c9;
  background-color:#f3f4f6;
  position: absolute;
}
.app .dynamic-classify.type-level2-vertical-nopic .sub-classify-item {
  height: 35px;
  line-height: 35px;
  padding: 0 10px;
  border-bottom: 1px solid #ccc9c9;
  margin: 0 10px;
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  text-align:center;
  max-width: 100px;
}
.app .dynamic-classify.type-level2-vertical-nopic .sub-classify-item .name {
  overflow: hidden;
  text-overflow: ellipsis;
}
.app .dynamic-classify.type-level2-vertical-nopic .sub-classify-item:last-child {
  border: 0;
}
.app .dynamic-classify.type-level2-vertical-nopic .sub-classify-item.selected {
  border-bottom:1px solid #34b6fd;
}
.app .dynamic-classify.type-level2-vertical-nopic .vessel-area {
  position: absolute;
  top: 0;
  left: 80px;
  width: calc(100% - 80px);
  height: 100%;
  overflow: hidden;
  overflow-y: auto;
}
.app .dynamic-classify.type-level2-vertical-nopic .vessel-area.only-preview {
  font-size: 16px;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
}
.app .dynamic-classify .vessel-area.mode-1 .dynamic-classify-formdata  {
  display: inline-block;
  width: 50%!important;
}
.app .dynamic-classify .vessel-area.mode-2 .dynamic-classify-formdata  {
  display: inline-block;
  width: 33.33%!important;
}
.app .dynamic-classify.type-level2-vertical-withpic {
	width: 100%;
	height: 100vh!important;
}
.app .dynamic-classify.type-level2-vertical-withpic .classify-area {
  position: absolute;
  top: 0;
  left: 0;
	width: 80px;
	height: 100%;
  line-height: 35px;
	text-decoration: inherit;
	color: #888;
	font-size: 13px;
	background-color: #f2f2f2;
	overflow: hidden;
}
.app .dynamic-classify.type-level2-vertical-withpic .dynamic-classify-item {
	position: relative;
	display: inline-block;
	width: 100%;
  height: 35px;
  line-height: 35px;
	text-align: center;
	text-decoration: inherit;
	vertical-align: top;
  overflow: hidden;
  text-overflow:ellipsis;
}
.app .dynamic-classify.type-level2-vertical-withpic .dynamic-classify-item span {
	white-space: nowrap;
	text-decoration: inherit;
}
.app .dynamic-classify.type-level2-vertical-withpic .dynamic-classify-item .leftline {
  display: block;
  position: absolute;
  left: 0;
  bottom: 0;
  height: 100%;
	border-left: 1px solid #34b6fd;
}
.app .dynamic-classify.type-level2-vertical-withpic .classify-area .selected {
	color: rgb(61, 183, 248);
}
.app .dynamic-classify.type-level2-vertical-withpic .sub-classify-area {
  position: absolute;
  top: 0;
  left: 80px;
  width:calc(100% - 80px );
  height:100%;
  z-index: 10;
  overflow-x: hidden;
  overflow-y: auto;
}
.app .dynamic-classify.type-level2-vertical-withpic .sub-classify-item-list {
  background-color:#f3f4f6;
}
.app .dynamic-classify.type-level2-vertical-withpic .sub-classify-list {
  padding: 10px;
}
.app .dynamic-classify.type-level2-vertical-withpic .sub-classify-item {
  display: inline-block;
  width: 33.3%;
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  text-align:center;
}
.app .dynamic-classify.type-level2-vertical-withpic .horizontal .sub-classify-item {
  margin-top: 15px;
  display: inline-flex;
  align-items: center;
}
.app .dynamic-classify.type-level2-vertical-withpic .sub-classify-item .cover {
  display: block;
  width: 50px;
  height: 50px;
  margin: 15px auto 0;
}
.app .dynamic-classify.type-level2-vertical-withpic .horizontal .sub-classify-item .cover  {
  margin-top: 0;
  display: inline-block;
  vertical-align: middle;
}
.app .dynamic-classify.type-level2-vertical-withpic .sub-classify-item .name {
  display: block;
  margin-top: 5px;
}
.app .dynamic-classify.type-level2-vertical-withpic .horizontal .sub-classify-item .name {
  flex: 1;
  margin-top: 0;
  margin-left: 5px;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}
.app .dynamic-classify.type-level2-vertical-withpic .vessel-area {
  position: absolute;
  top: 0;
  left: 80px;
  width: calc(100% - 80px);
  height: 100%;
  overflow: hidden;
}
.app .dynamic-classify.type-level2-vertical-withpic .only-preview {
  text-align: center;
  font-size: 16px;
  padding-top: 20px;
}
.app .dynamic-classify.type-level2-vertical-withpic .classify-list-title {
  padding-top: 20px;
  text-align: center;
}
.app .dynamic-classify.type-level2-vertical-withpic .classify-list-title > span {
  display: inline-block;
  vertical-align: middle;
  max-width: 80%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.app .dynamic-classify.type-level2-vertical-withpic .classify-list-title::before,
.app .dynamic-classify.type-level2-vertical-withpic .classify-list-title::after {
  content: '-';
  margin: 0 10px;
}

.app .dynamic-classify.type-level1-vertical-withpic .classify-area {
  padding: 10px;
  height: 100vh;
  background-color:#f3f4f6;
  overflow-x: hidden;
  overflow-y: auto;
}
.app .dynamic-classify.type-level1-vertical-withpic .classify-area .dynamic-classify-item {
  display: inline-block;
  width: 33.3%;
  white-space: nowrap;
  text-overflow:ellipsis;
  overflow:hidden;
  text-align:center;
}
.app .dynamic-classify.type-level1-vertical-withpic .classify-area.horizontal .dynamic-classify-item {
  margin-top: 15px;
  display: inline-flex;
  align-items: center;
}
.app .dynamic-classify.type-level1-vertical-withpic .classify-area .dynamic-classify-item .cover {
  display: block;
  width: 50px;
  height: 50px;
  margin: 15px auto 0;
}
.app .dynamic-classify.type-level1-vertical-withpic .classify-area.horizontal .dynamic-classify-item .cover  {
  margin-top: 0;
  display: inline-block;
  vertical-align: middle;
}
.app .dynamic-classify.type-level1-vertical-withpic .classify-area .dynamic-classify-item .name {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app .dynamic-classify.type-level1-vertical-withpic .classify-area.horizontal .dynamic-classify-item .name {
  flex: 1;
  margin-top: 0;
  margin-left: 5px;
  display: inline-block;
  vertical-align: middle;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
}


/* 资讯组件样式 */
.app .newsIndex-nav-wrap {
  height: 39px;
  overflow: hidden;
  box-shadow: 0 0 5px rgba(86, 86, 86, 0.14);
}

.app .newsIndex-tabs {
  height: 39px;
  line-height: 39px;
  white-space: nowrap;
  overflow-x: auto;
  overflow-y: hidden;
}

.app .newsIndex-tabs>span {
  display: inline-block;
  padding: 0 12px;
  height: 38px;
  font-size: 15px;
  opacity: .6;
  vertical-align: top;
}

.app .newsIndex-tabs>span.active {
  font-size: 16px;
  font-weight: bold;
  opacity: 1;
}

.app .newsIndex-newsList {
  background: #fff;
}

.app .newsIndex-newsList .news-item {
  position: relative;
  margin: 0 15px;
  border-bottom: 1px solid #E9E9E9;
}

.app .newsIndex-newsList .news-text {
  padding-top: 10px;
  line-height: 20px;
}

.app .newsIndex-newsList .news-text .news-title {
  max-height: 40px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #333;
  font-size: 16px;
}
.app .newsIndex-newsList .news-item .news-article-groups {
  display: flex;
  background: #f5f5f5;
  font-size: 13px;
  color: #666;
  padding: 7px;
}
.app .newsIndex-newsList .news-item .news-article-groups .img-wrap{
  position: relative;
  width: 36px;
  height: 36px;
  margin-right: 8px
}
.app .newsIndex-newsList .news-item .news-article-groups .icon-news-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  transform: translateX(-50%) translateY(-50%);
  color: #fff;
  font-size: 12px;
}
.app .newsIndex-newsList .news-item .news-article-groups>div:nth-last-child(1){
  width: 80%;
  align-self: center;
}
.app .newsIndex-newsList .news-item .news-article-groups .img-wrap img{
  width: 100%;
  height: 100%;
}
.app .newsIndex-newsList .news-item .news-video-groups{
  height: 193px;
  overflow: hidden;
}
.app .newsIndex-newsList .news-item .news-video-groups img{
  width: 100%;
  height: 100%;
}
.app .newsIndex-newsList .news-item .news-video-groups .icon-news-video-play{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  border-radius: 50%;
  background: rgba(0,0,0,.5);
  transform: translateX(-50%) translateY(-50%);
  color: #fff;
}
.app .newsIndex-newsList .news-item .news-text-bottom {
  margin: 10px 0;
  font-size: 12px;
  line-height: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #999;
}

.app .newsIndex-newsList .news-text-bottom span {
  margin-right: 10px;
}

.app .newsIndex-newsList .news-text-bottom .red-pocket-icon {
  display: inline-block;
  vertical-align: bottom;
  width: 10px;
  height: 13px;
}

.app .newsIndex-newsList .news-text-bottom .red-pocket-icon img {
  width: 100%;
  height: 100%;
}

.app .newsIndex-newsList .news-img {
  display: inline-block;
  margin: 12px 0;
  width: 100px;
  height: 75px;
  overflow: hidden;
  position: relative;
}
.app .newsIndex-newsList .news-img>div{
  width: 60px;
  height: 30px;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
}
.app .newsIndex-newsList .news-img .icon-news-video-play{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  text-align: center;
  line-height: 36px;
  background: rgba(0, 0, 0, .5);
  border-radius: 50%;
  transform: translateX(-50%) translateY(-50%);
  color: #fff;
}

.app .newsIndex-newsList .news-img img {
  display: block;
  width: 100%;
}

.app .newsIndex-newsList .news-item.news-item-mode-0 .news-text,
.app .newsIndex-newsList .news-item.news-item-mode-5 .news-text {
  display: inline-block;
  margin-right: 10px;
  width: 176px;
  vertical-align: top;
}

.app .newsIndex-newsList .news-item.news-item-mode-0 .news-text-bottom,
.app .newsIndex-newsList .news-item.news-item-mode-5 .news-text-bottom {
  position: absolute;
  bottom: 0;
  width: 176px;
}

.app .newsIndex-newsList .news-item.news-item-mode-1 .news-text {
  margin-bottom: 5px;
}
/* .app .newsIndex-newsList .news-item.news-item-mode-1 .news-title {
  height: 40px;
} */
.app .newsIndex-newsList .news-item.news-item-mode-2 .news-img {
  margin: 0 2px;
  width: 92px;
  height: 64px;
}

.app .newsIndex-newsList .news-item.news-item-mode-2 .news-img-groups {
  margin: 5px 0;
}

.app .newsIndex-newsList .news-item.news-item-mode-3 .news-img {
  margin: 7px 0;
  width: 100%;
  height: 180px;
}

.app .newsIndex-newsList .news-item.news-item-mode-3 .news-img-groups {
  margin: 5px 0;
}

.app .newsIndex-newsList .news-item.news-item-mode-0,
.app .newsIndex-newsList .news-item.news-item-mode-4,
.app .newsIndex-newsList .news-item.news-item-mode-5 {
  height: 99px;
}

.app .newsIndex-newsList .news-item.news-item-mode-4 .news-text {
  display: inline-block;
  margin-right: 0;
  width: 176px;
  vertical-align: top;
}

.app .newsIndex-newsList .news-item.news-item-mode-4 .news-img {
  float: left;
  margin-right: 10px;
}

.app .newsIndex-newsList .news-item.news-item-mode-4 .news-text-bottom {
  position: absolute;
  bottom: 0;
  width: 176px;
}

.app .newsIndex-newsList .is-no-more {
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #949494;
}

.app .newsIndex-newsList .news-adver-tag {
  display: inline-block;
  width: 24px;
  height: 12px;
  text-align: center;
  line-height: 12px;
  border: 1px solid #999;
  border-radius: 3px;
}

.app .newsIndex-newsList .news-adver-tag::after {
  content: "推荐";
  display: inline-block;
  transform: scale(.8);
}

.announce {
  overflow: hidden;
}

.announce .scroll-box {
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}

.scroll-content0 {
  position: relative;
}

@keyframes scroll {
  from {
    left: 0;
  }
  to {
    left: -100%;
  }
}

.scroll-content0 .announce-content:first-child {
  padding-left: 0;
}

.scroll-content0 .announce-content {
  padding-left: 10px;
}

.announce-content {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  text-overflow: ellipsis;
}

.announce-icon {
  padding: 0 5px;
  width: 25px;
  text-align: center;
  line-height: inherit;
  display: inline-block;
  vertical-align: middle;
}

.announce-icon img {
  width: 25px;
  height: 25px;
}

.scroll-content1 {
  position: relative;
  top: 0;
  transition: all 1s;
  display: inline-block;
}

.scroll-content1>div {
  text-overflow: ellipsis;
  overflow: hidden;
}

.announce-mode0 {
  white-space: nowrap;
}
/* 社区2.5 */
[class*='ncommunity-list-2'] {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  overflow: hidden;
}
[class*='ncommunity-list-3'] {
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
[class*='ncommunity-list-2'] .ncommunity-item {
  margin-bottom: 3px;
}
[class*='ncommunity-list-3'] .ncommunity-item {
  width: auto;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  overflow: hidden;
}
[class*='ncommunity-list-3'] .ncommunity-item:last-child {
  margin-right: 0!important;
}
[class*='ncommunity-list-3'] .ncommunity-item-image {
  width: 200px;
  height: 140px;
}
.ncommunity-item-inner {
  position: relative;
}
.ncommunity-item {
  position: relative;
  display: inline-block;
  width: auto;
  background: #F8F8F8;
}
.ncommunity-item-image {
  position: relative;
  width: 156px;
  height: 106px;
  overflow: hidden;
}
.ncommunity-title,
.ncommunity-desc {
  padding: 8px 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ncommunity-count {
  padding: 6px 8px;
  font-size: 12px;
  color: #ffb311;
}
.ncommunity-list-3-1 .ncommunity-item {
  border-bottom-right-radius: 4px;
  border-bottom-left-radius: 4px;
}
.ncommunity-list-2-1 .ncommunity-item-text,
.ncommunity-list-3-1 .ncommunity-item-text {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ncommunity-list-2-1 .ncommunity-item-mask,
.ncommunity-list-3-1 .ncommunity-item-mask {
  position: absolute;
  width: 100%;
  height: 100%;
}
.ncommunity-list-2-1 .ncommunity-item-text > p,
.ncommunity-list-3-1 .ncommunity-item-text > p {
  position: relative;
  z-index: 2;
}
.tcommunity-search {
  box-sizing: border-box;
  padding: 6px 10px;
  background: #fff;
  border-bottom: 1px solid #eee;
}
.tcommunity-search-input-label {
  display: inline-block;
  vertical-align: middle;
  width: 232px;
  height: 30px;
  font-size: 13px;
  color: #A6A6A6;
  border-radius: 15px;
  border: 1px solid #999;
  background: #fff;
  overflow: hidden;
}
.tcommunity-search-icon {
  display: inline-block;
  padding: 8px 9px;
  vertical-align: middle;
  font-size: 15px;
  text-align: center;
}
.tcommunity-search-input {
  display: inline-block;
  height: 100%;
  width: 198px;
  vertical-align: middle;
  border: none;
  outline: none;
  box-sizing: border-box;
}
.tcommunity-search-notify,
.tcommunity-search-usercenter {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-left: 7px;
  width: 23px;
  text-align: center;
  font-size: 23px;
}
.tcommunity-search-usercenter {
  height: 23px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
}
.tcommunity-search-notify-count {
  position: absolute;
  top: -18%;
  right: -10%;
  width: 15px;
  height: 15px;
  font-size: 12px;
  text-align: center;
  line-height: 15px;
  background: #FF5555;
  color: #fff;
  border-radius: 50%;
}
.tcommunity-sectioncate-list {
  position: relative;
  background: #F5F5F5;
  border-bottom: 1px solid #eee;
}
.tcommunity-sectioncate-list-ul {
  height: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  background: #fff;
  text-align: left;
}
.list-style-2 .tcommunity-sectioncate-list-ul {
  padding-top: 10px;
}
.list-style-3 .tcommunity-sectioncate-list-ul {
  padding-top: 10px;
}
.list-style-3 .tcommunity-sectioncate {
  min-width: 25vw;
}
.tcommunity-sectioncate {
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  height: 100%;
  text-align: center;
  vertical-align: middle;
  color: #424242;
}
.tcommunity-sectioncate::after {
  position: absolute;
  content: '';
  bottom: 0;
  width: 24px;
  height: 2px;
  background-color: #fff;
}
.tcommunity-sectioncate-logo {
  width: 40px;
  height: 40px;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  overflow: hidden;
}
.tcommunity-sectioncate-name {
  max-width: 25vw;
  padding: 8px 0;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.list-style-0 .tcommunity-sectioncate {
  padding: 0 10px;
}
.list-style-0 .tcommunity-sectioncate.active {
  color: #3091f2;
}
.list-style-1 .tcommunity-sectioncate {
  padding: 0 10px;
}
.list-style-1 .tcommunity-sectioncate.active {
  color: #3091f2;
}
.list-style-1 .tcommunity-sectioncate.active::after {
  background-color: #3091f2;
}
.list-style-2 .tcommunity-sectioncate-list-ul {
  white-space: pre-wrap;
}
.list-style-2 .tcommunity-sectioncate {
  min-width: 25vw;
}
.list-style-2 .tcommunity-sectioncate.active {
  color: #3091f2;
}
.list-style-3 .tcommunity-sectioncate.active {
  color: #3091f2;
}
.tcommunity-topic-orderby-list {
  height: 38px;
  line-height: 38px;
  font-size: 14px;
  color: #5C5C5C;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  border-bottom: 1px solid #F5F5F5;
  background-color: #fff;
}
.tcommunity-topic-orderby {
  display: inline-block;
  width: 25vw;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tcommunity-topic-orderby {
  position: relative;
  color: #343434;
}
.tcommunity-topic-orderby > label {
  position: absolute;
  left: calc(50% - 12px);
  bottom: 0;
  width: 24px;
  height: 0;
  border-bottom-width: 2px;
  border-bottom-style: solid;
}
.tcommunity-topic-list {
  /*background: #f7f7f7;*/
}
.tcommunity-topic {
  /*margin-bottom: 10px;*/
  /*background: #fff;*/
  border-bottom: 10px solid #f7f7f7;
}
.tcommunity-topic-list .tcommunity-topic:nth-last-of-type(1),
.tcommunity-topic-list .tcommunity-topic:only-of-type {
  margin-bottom: 0;
}
.tcommunity-topic-author-logo {
  display: inline-block;
  vertical-align: middle;
}
.tcommunity-topic-top {
  padding-top: 13px;
}
.tcommunity-topic-author-logo img {
  display: block;
  width: 100%;
  height: 100%;
  background: #F5F5F5;
}
.tcommunity-topic-author-name {
  display: inline-block;
  font-size: 12px;
  color: #343434;
}
.tcommunity-topic-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: 14px;
  font-weight: 600;
  color: #343434;
}
.tcommunity-topic-des {
  display: -webkit-box;
  margin: 5px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 14px;
  color: #2a2a2a;
  word-break: break-all;
}
.tcommunity-topic-link {
  display: flex;
  align-items: center;
  margin: 5px;
  padding: 6px;
  background-color: #F5F5F5;
}
.tcommunity-topic-video {
  position: relative;
  margin-bottom: 10px;
  height: 155px;
}
.tcommunity-topic-link .link-logo {
  position: relative;
  margin-right: 6px;
  width: 36px;
  height: 36px;
  overflow: hidden;
}
.tcommunity-topic-video .video-cover {
  display: block;
  height: 100%;
  width: 100%;
}
.tcommunity-topic-link .link-logo .icon-news-video-play,
.tcommunity-topic-video .icon-news-video-play {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 30px;
  height: 30px;
  text-align:  center;
  line-height: 30px;
  font-size:  12px;
  background:  rgba(0,0,0,.5);
  border-radius: 50%;
  color: #fff;
  transform: translateX(-50%) translateY(-50%);
}
.tcommunity-topic-link .icon-news-video-play {
  width: 35px;
  height: 35px;
  line-height: 35px;
}
.tcommunity-topic-link .link-text {
  flex: 1;
  overflow: hidden;
  display: -webkit-box;
  text-overflow: ellipsis;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: 11px;
  align-self: center;
  color: #666;
}
.tcommunity-topic-stick,
.tcommunity-topic-favorite {
  display: inline-block;
  margin-left: 5px;
  width: 26px;
  height: 16px;
  font-size: 12px;
  text-align: center;
  line-height: 16px;
  color: #fff;
  border-radius: 1px;
}
.tcommunity-topic-stick {
  background: #5AADFF;
}
.tcommunity-topic-favorite {
  background: #FE644A;
}
.tcommunity-topic-stick::before {
  display: block;
  content: '置顶';
  transform: scale(.8);
}
.tcommunity-topic-favorite::before {
  display: block;
  content: '精品';
  transform: scale(.8);
}
.tcommunity-topic .contact-ta {
  float: right;
  width: 47px;
  height: 19px;
  text-align: center;
  line-height: 19px;
  font-size: 12px;
  color: #3091f2;
  background: #fff;
  border: 1px solid #3091f2;
  border-radius: 4px;
}
.tcommunity-topic .contact-ta::before {
  display: block;
  content: '联系Ta';
  transform: scale(.8);
}
.tcommunity-topic-category-list {
  height: 38px;
  line-height: 38px;
  font-size: 14px;
  color: #5C5C5C;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  border-bottom: 1px solid #F5F5F5;
}
.tcommunity-topic-category {
  display: inline-block;
  width: 25vw;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tcommunity-topic-category.active {
  position: relative;
  color: #343434;
}
.tcommunity-topic-category.active::after {
  content: "";
  position: absolute;
  left: calc(50% - 12px);
  bottom: 0;
  width: 24px;
  height: 2px;
  background: #f44;
}
.tcommunity-imgs-list {
  display: inline-block;
  padding-bottom: 10px;
  overflow: hidden;
}
.tcommunity-img-item {
  float: left;
  margin-top: 5px;
  margin-right: 4px;
  overflow: hidden;
}
.tcommunity-img-item img {
  display: block;
  width: 100%;
  height: 100%;
  background: #f5f5f5;
}
.tcommunity-img-item.tcommunity-img-item-one {
  width: auto;
  height: auto;
  max-width: 235px;
  max-height: 78px;
}
.tcommunity-topic-publish-info {
  position: relative;
  margin-bottom: 8px;
  font-size: 9px;
}
.tcommunity-topic-publish-info > span {
  display: inline-block;
  vertical-align: middle;
  color: #999;
  line-height: 20px;
}
.tcommunity-topic-publish-info .tcommunity-topic-viewcount {
  border-right: none;
  white-space: nowrap;
}
.tcommunity-topic-publish-date {
  margin-right: 5px;
  max-width: 70px;
}
.tcommunity-topic-publish-date ,
.tcommunity-topic-publish-address {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tcommunity-topic-publish-address i {
  position: relative;
  top: 1px;
  font-size: 12px;
}
.tcommunity-topic-comment {
  position: absolute;
  top: 2px;
  right: 0;
}
.tcommunity-topic-comment .icon-community-friend {
  position: relative;
  top: 2px;
  color: #adadad;
}
.tcommunity-topic-comment-box {
  position: absolute;
  left: -8px;
  top: -8px;
  display: none;
  font-size: 12px;
  border-radius: 5px;
  white-space: nowrap;
  background: rgba(76,81,84,1);
  color: #fff;
  transform: translateX(-100%);
}
.tcommunity-topic-comment-box > span {
  display: inline-block;
  margin: 6px 0;
  padding: 0 8px;
}
.tcommunity-topic-comment-box i {
  position: relative;
  display: inline-block;
  vertical-align: middle;
  margin-right: 3px;
  font-size: 12px;
}
.tcommunity-topic-comment-box em {
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
}
.tcommunity-topic-comment-like {
  border-right: 1px solid #fff;
}
.tcommunity-topic-footer {
  margin: 0 12px;
  font-size: 12px;
  color: #999;
  border-top: 1px solid #f1f1f1;
}
.tcommunity-topic-footer > span {
  display: inline-block;
  margin: 10px 0;
  box-sizing: border-box;
  width: 25%;
  text-align: center;
}
.tcommunity-topic-footer > span > i,
.tcommunity-topic-viewcount  > i {
  position: relative;
  margin-right: 2px;
  display: inline-block;
  vertical-align: middle;
  font-size: 12px;
}
.tcommunity-topic-footer > span > em,
.tcommunity-topic-viewcount > em {
  display: inline-block;
  vertical-align: middle;
  font-style: normal;
}
.tcommunity-topic-rating > em {
  vertical-align: top;
}
.tcommunity-topic-viewcount,
.tcommunity-topic-share,
.tcommunity-topic-rating {
  border-right: 1px solid #f1f1f1;
}
.tcommunity-topic-disscuss {
  margin-bottom: 8px;
  padding: 9px 9px 5px;
  line-height: 20px;
  font-size: 9px;
  color: #A6A6A6;
  background: #F5F5F5;
  word-break: break-all;
}
.tcommunity-topic-diss-li > em {
  margin: 0 3px;
  font-style: normal;
}
.tcommunity-topic-diss-all {
  color: #59A7F5;
}
.tcommunity-topic-diss-count {
  font-style: normal;
}
.tcommunity-topic-like-list {
  height: 32px;
  font-size: 12px;
  color: #ADADAD;
  background: #f5f5f5;
  border-bottom: 1px solid #EDEDED;
}
.tcommunity-topic-like-list .icon-collect {
  margin: 0 5px;
  font-size: 16px;
  color: #3091f2;
}
.tcommunity-topic-like-list > span {
  display: inline-block;
  height: 32px;
  line-height: 32px;
  vertical-align: middle;
}
.tcommunity-topic-like-list .tcommunity-topic-like-text {
  vertical-align: sub;
  font-size: 12px;
}
.tcommunity-topic-like-list img {
  display: inline-block;
  margin-right: 3px;
  width: 17px;
  height: 17px;
  vertical-align: middle;
  border-radius: 2px;
  background: #adadad;
}
.tcommunity-topic-type-0 .tcommunity-topic-top,
.tcommunity-topic-type-0 .tcommunity-topic-des,
.tcommunity-topic-type-0 .tcommunity-topic-link,
.tcommunity-topic-type-0 .tcommunity-topic-video,
.tcommunity-topic-type-0 .tcommunity-imgs-list,
.tcommunity-topic-type-0 .tcommunity-topic-disscuss,
.tcommunity-topic-type-0 .tcommunity-topic-publish-info {
  margin-left: 12px;
  margin-right: 12px;
}
.tcommunity-topic-type-0 .tcommunity-topic-author-logo {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
}
.tcommunity-topic-type-0 .tcommunity-topic-title {
  margin-top: 6px;
}
.tcommunity-topic-type-0 .tcommunity-topic-author-name {
  margin-left: 12px;
  vertical-align: middle;
}
.tcommunity-topic-type-0 .tcommunity-img-item {
  width: 94px;
  height: 94px;
  overflow: hidden;
}
.tcommunity-topic-type-0 .tcommunity-topic-publish-address {
  max-width: 140px;
  overflow: hidden;
}
.tcommunity-topic-type-0 .tcommunity-topic-publish-where {
  float: right;
  padding: 0 10px;
  max-width: 60px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-radius: 10px;
  color: #999;
  background: #EEE;
}
.tcommunity-topic-type-1 {
  padding-bottom: 10px;
}
.tcommunity-topic-type-1 .tcommunity-topic-des,
.tcommunity-topic-type-1 .tcommunity-topic-link,
.tcommunity-topic-type-1 .tcommunity-topic-video,
.tcommunity-topic-type-1 .tcommunity-imgs-list,
.tcommunity-topic-type-1 .tcommunity-topic-disscuss,
.tcommunity-topic-type-1 .tcommunity-topic-publish-info,
.tcommunity-topic-type-1 .tcommunity-topic-like-list {
  margin-left: 58px;
  margin-right: 12px;
}
.tcommunity-topic-type-1 .tcommunity-topic-top {
  display: flex;
  margin-left: 12px;
  margin-right: 12px;
}
.tcommunity-topic-type-1 .tcommunity-topic-author-logo {
  margin-right: 7px;
  width: 38px;
  height: 38px;
  border-radius: 5px;
  overflow: hidden;
}
.tcommunity-topic-type-1 .tcommunity-topic-top-right {
  flex: 1;
  overflow: hidden;
}
.tcommunity-topic-type-1 .tcommunity-topic-title {
  line-height: 24px;
}
.tcommunity-topic-type-1 .tcommunity-topic-author-name {
  vertical-align: top;
}
.tcommunity-topic-type-1 .tcommunity-topic-stick,
.tcommunity-topic-type-1 .tcommunity-topic-favorite {
  position: relative;
  top: 1px;
  vertical-align: top;
}
.tcommunity-topic-type-1 .tcommunity-img-item {
  width: 78px;
  height: 78px;
}
.tcommunity-topic-type-1 .tcommunity-topic-publish-info {
  display: flex;
  padding-right: 30px;
}
.tcommunity-topic-type-1 .tcommunity-topic-publish-address {
  max-width: 100px;
  overflow: hidden;
}
.tcommunity-topic-type-1 .tcommunity-topic-disscuss {
  margin-bottom: 0;
}
.tcommunity-topic-type-1 .tcommunity-topic-publish-where {
  color: #3091f2;
}
.tcommunity-topic-publish-btn,
.tcommunity-topic-backTop-btn,
.tcommunity-topic-service-btn {
  margin-top: 10px;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #000;
  color: #fff;
  text-align: center;
  font-size: 16px;
  line-height: 38px;
}
.tcommunity-topic-backTop-btn {
  display: none;
}
.tcommunity-topic-service-btn {
  font-size: 20px;
  line-height: 40px;
}
.tcommunity-topic-btns-group {
  position: fixed;
  right: 15px;
  bottom: 60px;
}
.tcommunity-topic-none .communityPage-li-none {
  margin: auto;
  padding: 20px 0;
}

/* new count ele */
.app .newcount-ele {
  display: inline-block;
  white-space: nowrap;
}
.app .newcount-ele .newcount-image {
  vertical-align: middle;
}
.app .newcount-ele .newcount-content {
  display: inline-block;
  vertical-align: middle;
  margin-left: 3px;
}
.app .newcount-ele .newcount-countnum {
  display: inline-block;
  vertical-align: middle;
  margin-left: 3px;
}




.signIn-page-wrap {
  background-color: #f8f8fa;
}
.signIn-notActive {
  height: 100vh;
  width: 100%;
  background-color: #f3f3f3;
}

.signIn-showImage {
  position: absolute;
  left: 50%;
  top: 101px;
  transform: translateX(-50%);
  text-align: center;
}

.signIn-showImage>img {
  width: 155px;
  height: 133px;
}

.signIn-notActive-exp {
  font-size: 12px;
  color: #b3b3b3;
}

.qiandao-sign {
  height: auto;
  position: relative;
}

.signIn-sign-bg {
  height: 206px;
  width: 100%;
  background: url('https://develop.zhichiwangluo.com/static/webapp/images/retroactive/tiny-bg.png') no-repeat center /100% 100%;
}

.signIn-sign-rule {
  width: 30px;
  height: 17px;
  border-radius: 19px 0px 0px 19px;
  background: linear-gradient(180deg, rgba(255, 195, 29, 1) 0%, rgba(255, 181, 64, 1) 100%);
  font-size: 10px;
  color: #fff;
  text-align: center;
  line-height: 19px;
  position: absolute;
  right: 0;
  top: 9px;
}

.signIn-cur-integral {
  position: absolute;
  top: 33px;
  left: 19px;
  height: 14px;
  font-size: 14px;
  font-family: MicrosoftYaHei;
  line-height: 14px;
  color: #fff;
}

.signIn-cur-integral-num {
  position: absolute;
  top: 56px;
  left: 19px;
  width: 100px;
  height: 32px;
  font-size: 32px;
  font-family: MicrosoftYaHei-Bold;
  font-weight: bold;
  color: rgba(255, 255, 255, 1);
  line-height: 32px;
}

.signIn-integral-record {
  width: 58px;
  height: 18px;
  border-radius: 10px;
  opacity: 0.8;
  border: 1px solid rgba(255, 255, 255, 1);
  font-size: 10px;
  color: #fff;
  line-height: 18px;
  text-align: center;
  position: absolute;
  top: 94px;
  left: 19px;
}

.signIn-sign-box {
  width: 295px;
  border-radius: 4px;
  margin: -77px auto 0;
}

.signIn-sign-wrapper {
  padding: 13px 13px 21px;
  box-sizing: border-box;
  background-color: #fff;
  box-shadow: 0px 2px 4px 0px rgba(114, 38, 0, 0.07);
}

.signIn-sign-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.signIn-sign-sum {
  font-size: 14px;
  color: #222;
  align-self: flex-end;
}

.signIn-sign-calendar {
  font-size: 11px;
  color: #444;
  line-height: 12px;
}

.signIn-sign-calendarIcon {
  width: 13px;
  height: 12px;
  display: inline-block;
  background: url('https://develop.zhichiwangluo.com/static/webapp/images/retroactive/calendar.png') no-repeat;
  background-size: 100% 100%;
  vertical-align: bottom;
  margin-right: 4px;
}

.signIn-sign-progress-box {
  width: 100%;
  margin-top: 47px;
  margin-bottom: 9px;
  border-radius: 4px;
  background: #fff0b8;
}

.signIn-sign-progress {
  height: 9px;
  background-image:repeating-linear-gradient(-45deg, transparent, transparent 4px, rgba(255,255,255,.18) 0px, rgba(255,255,255,.18) 10px);
  border-radius: 4px;
  transition: linear 0.7s;
  background-color: #FF7235;
}

.signIn-sign-date {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-left: 17px;
  padding-right: 4px;
  font-size: 9px;
  color: #999;
}

.signIn-date-signIn {
  width: 27px;
  height: 27px;
  position: absolute;
  top: -26px;
  left: 50%;
  transform: translateX(-50%);
  background: url("https://develop.zhichiwangluo.com/static/webapp/images/retroactive/signIn.png");
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.signIn-date-gift {
  width: 27px;
  height: 27px;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -30px;
  background: url("https://develop.zhichiwangluo.com/static/webapp/images/retroactive/gift.png") no-repeat center /100% 100%;
}

.signIn-date-giftTips {
  font-size: 8px;
  border-radius: 43px;
  width: 76px;
  height: 15px;
  text-align: center;
  line-height: 15px;
  position: absolute;
  left: -26px;
  top: -13px;
  background: linear-gradient(180deg, rgba(255, 223, 32, 1) 0%, rgba(255, 189, 31, 1) 100%);
  color: #693e3e;
  overflow: hidden;
}

.signIn-date-item {
  position: relative;
  text-align: center;
  min-width: 30.03px;
}

.signIn-date-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background-color: #ffaf52;
  position: absolute;
  top: -15px;
  left: 50%;
  transform: translateX(-50%);
}

.signIn-date-integral {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: -54px;
  font-size: 9px;
  padding: 4px;
  border-radius: 10px;
  width: 100%;
  background: linear-gradient(180deg, rgba(255, 223, 32, 1) 0%, rgba(255, 189, 31, 1) 100%);
  color: #674444;
}

.date-integral::after {
  content: '';
  width: 0;
  height: 0;
  border-width: 6px 6px 0;
  border-style: solid;
  border-color: rgba(255, 189, 31, 1) transparent transparent;
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translate(-50%);
}

.signIn-sign-button {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.signIn-retroactive {
  border-radius: 14px;
  width: 87px;
  height: 28px;
  text-align: center;
  line-height: 28px;
  font-size: 13px;
  position: relative;
}

.signIn-signactive {
  border-radius: 14px;
  width: 173px;
  height: 28px;
  text-align: center;
  line-height: 28px;
  color: #fff;
  font-size: 13px;
  letter-spacing: 2px;
  margin: 0 auto;
  background: linear-gradient(90deg, rgba(255, 135, 0, 1) 0%, rgba(255, 67, 62, 1) 100%);
}

.signIn-signed {
  width: 173px;
  height: 28px;
  border-radius: 14px;
  opacity: .7;
  font-size: 13px;
  text-align: center;
  line-height: 28px;
  letter-spacing: 2px;
  background: #ff6c19;
  margin: 0 auto;
}

.signIn-sign-remind {
  width: 295px;
  height: 58px;
  background-color: #fff;
  border-radius: 4px;
  margin-top: 17px;
  box-sizing: border-box;
  box-shadow: 0px 2px 4px 0px rgba(114, 38, 0, 0.07);
}

.signIn-remind-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

.signIn-icon-shalou {
  margin-left: 13px;
  margin-right: 7px;
  background: url('https://develop.zhichiwangluo.com/static/webapp/images/retroactive/sandClock.png') no-repeat;
  background-size: 100% 100%;
  width: 15px;
  height: 15px;
}

.signIn-remind-info {
  width: 214px;
}

.signIn-remind-info-t {
  color: #222;
  font-size: 12px;
}

.signIn-remind-info-b {
  color: #999;
  font-size: 10px;
}

.signIn-reward-box {
  padding-top: 23px;
  text-align: center;
  background-color: #f8f8fa;
}

.signIn-reward-title {
  font-size: 10px;
  color: #999;
}

.signIn-reward-chooseNum {
  font-size: 12px;
  letter-spacing: 2px;
  font-weight: bold;
  color: #FE4739;
  margin: 4px 0 11px;
}

.signIn-reward-type {
  display: flex;
}

.signIn-reward-item {
  flex: 1;
  height: 84px;
  background-color: #fff;
  font-size: 11px;
  color: #333;
  box-sizing: border-box;
  text-align: center;
  padding-top: 15px;
  box-shadow: 0px 2px 4px 0px rgba(114, 38, 0, 0.07);
  border-radius: 4px;
  margin-right: 8px;
}

.signIn-getRewardBtn {
  margin: 11px auto 0;
  font-size: 10px;
  text-align: center;
  line-height: 20px;
}

.signIn-get-reward {
  width: 38px;
  color: #fff;
  border-radius: 10px;
  background: linear-gradient(90deg, rgba(255, 135, 0, 1) 0%, rgba(255, 67, 62, 1) 100%);
}

.signIn-cant_get-reward {
  color: #999;
  width: 63px;
  background-color: #F2F2F2;
  box-shadow: 0px 2px 4px 0px rgba(114, 38, 0, 0.07);
  border-radius: 10px;
}

.signIn-see_get-reward {
  width: 50px;
  border-radius: 10px;
  background: rgba(255, 240, 219, 1);
  color: #ff7e0f;
}
.signIn-switchBtn {
  width: 40px;
  height: 17px;
  padding-bottom: 10px;
  border-radius: 14px;
  background: #FE4739;
}
.signIn-switchBtn_inner {
  width: 26px;
  height: 26px;
  background-color: #fff;
  border-radius: 50%;
  position: absolute;
  right: 0;
  top: 0;
}