/* 通用容器，定义页面宽度 具有五个级别 */
.wps { width: 880px; margin: 0 auto; }
.wpu { width: 940px; margin: 0 auto; }
.wpn { width: 1220px; margin: 0 auto; }  	/* 4 列 * 300 */
.wpm { width: 1480px; margin: 0 auto; }  	/* 5 列 * 300 */
.wpw { width: 1780px; margin: 0 auto; } 	/* 6 列 * 300 */
.wpv { width: 0px; margin: 0 auto; }
.wpx { width: 0px; margin: 0 auto; }
.wpx{background: #ff8200;color: #fff;}

/* 外边距样式，作用于元素的上下外边距，上下各具有 n, m, w 三个级别 */
.mtn { margin-top: 5px !important; }
.mtm { margin-top: 10px !important; }
.mtw { margin-top: 20px !important; width: 1180px;height: 1800px;}
.mtv { margin-top: 30px !important; }
.mbn { margin-bottom: 5px !important; }
.mbm { margin-bottom: 10px !important; }
.mbw {margin-bottom: 20px !important;}
.mbv { margin-bottom: 30px !important; }

.mrn { margin-right: 5px !important; }
.mrm { margin-right: 10px !important; }
.mrw { margin-right: 20px !important; }
.mrv { margin-right: 30px !important; }

.mln { margin-left: 5px !important; }
.mlm { margin-left: 10px !important; }
.mlw { margin-left: 20px !important; }
.mlv { margin-left: 30px !important; }

.mtbn { margin: 5px 0 !important; }
.mtbm { margin: 10px 0 !important; }
.mtbw { margin: 20px 0 !important; }
.mtbv { margin: 30px 0 !important; }

.mlrn { margin: 0 5px !important; }
.mlrm { margin: 0 10px !important; }
.mlrw { margin: 0 20px !important; }
.mlrv { margin: 0 30px !important; }


/* 内边距样式，作用于元素的上下内边距，上下各具有 n, m, w 三个级别 */
.ptn { padding-top: 5px !important; }
.ptm { padding-top: 10px !important; }
.ptw { padding-top: 20px !important; }
.ptv { padding-top: 30px !important; }

.prn { padding-right: 5px !important; }
.prm { padding-right: 10px !important; }
.prw { padding-right: 20px !important; }
.prv { padding-right: 30px !important; }

.pln { padding-left: 5px !important; }
.plm { padding-left: 10px !important; }
.plw { padding-left: 20px !important; }
.plv { padding-left: 30px !important; }

.pbn { padding-bottom: 5px !important; }
.pbm { padding-bottom: 10px !important; }
.pbw { padding-bottom: 20px !important; }
.pbv { padding-bottom: 30px !important; }

.ptbn { padding: 5px 0 !important; }
.ptbm { padding: 10px 0 !important; }
.ptbw {padding: 20px 0 !important;/* box-sizing:  border-box; */}
.ptbv { padding: 30px 0 !important; }

.plrn { padding: 0 5px !important; }
.plrm { padding: 0 10px !important; }
.plrw { padding: 0 20px !important; }
.plrv { padding: 0 30px !important; }

/* 清除浮动 */
.zpcl:before, .zpcl:after{content:" ";display: table;}
.zpcl:after { clear: both }
.zpcl { *zoom: 1 }
/*字体图标*/

/*作品筛选*/
 .zpxgt {    float: left;
    margin-top: 15px;
    border-radius: 20px;
    width: 88px;
    font-size: 16px;
}
 .h-screen { float: left; margin-top: 15px; }
 .h-screen li { position: relative; float: left; }
 .h-screen li a {display: block; height: 40px; margin-right: 25px; padding: 0 20px; font-size: 14px; color: #7c7c7c; line-height: 40px; text-align: center; }
  .h-screen li a i.icon-down{
	
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
    color: #7c7c7c;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
    -webkit-transform: rotateZ(0);
    -moz-transform: rotateZ(0);
    transform: rotateZ(0)
  }
 .h-screen li a:hover { color: #ff8200; }
 .h-screen li a .num { position: relative; display: inline-block; height: 14px; line-height: 14px; /*padding: 0 3px;*/ background-color: #ff8200; font-size: 12px; color: #fff; right: 2px;top: -5px;border-radius: 14px;width: 14px;}
 .h-screen li.on a { border: 1px solid #ff8200; border-radius: 20px; font-weight: bold; color: #ff8200; }
   .h-screen li.on a i{color: #ff8200;}
 .h-screen li.on a:hover { border-color: #ff8200; }
 .h-screen li:hover i.icon-down{
   -webkit-transform:rotateZ(-180deg);
    -moz-transform: rotateZ(-180deg);
    transform: rotateZ(-180deg);
    color: #ff8200
 }
 .h-screen li.on a .num { display: none; }
  .h-screen li .other_commend{
    width: 120px;
    height: auto;
    background-color: white;
    border-radius: 10px;
    position: absolute;
    z-index: 99;
    overflow: hidden;
    top: 42px;
    display: none;
  }
  .h-screen li:hover .other_commend{
    display: block;
  }
    .h-screen li .other_commend a{
      display: block;
      width: 160px;
      height: 40px;
      line-height: 40px;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #909399;
      text-indent: 20px;
      border: none;
      border-radius: 0;
      font-weight: nomal;
      padding: 0;
      margin: 0;
      text-align: left;
    }
    .h-screen li .other_commend a:hover{
      background-color: rgba(191,196,205,.1);
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #303133;
      letter-spacing: 0;
    }
    .h-screen li .other_commend a.on{
      font-family: PingFangSC-Semibold;
      font-size: 14px;
      color: #ff8200;
      
    }
    .h-screen li .other_commend a i{
      color: #ff8200;
      font-size: 14px;
      position: absolute;
      right: 20px;
      top: 13px;
      display: none;
    }
    .h-screen li .other_commend a.on i{
      display: block;
    }
 #jk{position: absolute;right: 37px;top: 0;font-size: 16px; color: #E52B10}
 /*公告鸡汤*/
 .h-soup { position: relative; float: right; width: auto; height: 40px;  padding: 0 20px 0 20px; background-color: #ff8200; border-radius: 20px; box-shadow: 1px 1px 2px rgba(0,0,0,.2); }
 .h-soup li { float: right; }
 .h-soup li i { position: absolute; top: 8px; font-size: 28px; color: #eae1d0; cursor: pointer; }
 .h-soup li.open i { color: #e67e22; }
 .h-soup li i.icon-star1 { right: 7px; }
 .h-soup li i.icon-heart-round { right: 41px; }
 .h-soup li i.icon-warn { right: 75px; }
 .h-soup li .txt { display: none; font-size: 14px; color: #ffffff; line-height: 40px; white-space: nowrap;  display: none;white-space: nowrap;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;max-width:350px; }
 @media screen and (min-width:1760px){
    .h-soup li .txt{
      max-width: 500px;
    }
 }
 .h-soup li.open .txt { display: block; }

 /*没有关注*/
 .h-follow .tit1 { margin-top: 38px; font-size: 24px; color: #34495e; text-align: center; font-weight: bold; }
 .h-follow .tit2 { margin-bottom: 38px; font-size: 20px; color: #34495e; text-align: center; }
 .h-follow-box { border: 3px solid #e2e6ea; }
 .h-follow-box ul { margin: 0 -6px 60px 0;}
 .h-follow-box .item { float: left; width: 220px; margin: 0 8px; }
 .h-follow-box .avatar-sm { display: block; margin: 0 auto; margin-top: 45px; }
 .h-follow-box .name { display: block; margin: 6px 0 3px; font-size: 12px; color: #ff8200; text-align: center; }
 .h-follow-box .intro { font-size: 12px; height: 36px; overflow: hidden; margin-bottom: 25px; color: #7f8c8d; text-align: center;}
 .h-follow-check { width: 70px; margin: 0 auto; }
 .h-follow-check .check { float: left; width: 12px; height: 12px; margin: 4px 10px; background-color: #fff; border: 1px solid #bac1c2; cursor: pointer; }
 .h-follow-check .check em { display: block; margin-left: -1px; background: url("../../img/home/h-check.png") no-repeat left top; width: 18px; height: 12px; }
 .h-follow-check p { float: left; font-size: 14px; color: #e67e22; font-weight: bold; }

 .h-follow-btn {  border-top: 1px solid #e0e7eb;}
 .h-follow-btn a { display: block; width: 220px; height: 40px; margin: 20px auto 30px; font-size: 14px; color: #e67e22; line-height: 38px; text-align: center; border: 1px solid #e67e22; border-radius: 20px; }

 /*新手入门*/
 .h-novice { float: left; width: 280px; background-color: #fff; }
 .h-novice .cover { display: block; width: 280px; height: 210px; }
 .h-novice .info { padding: 15px; height: 92px; overflow: hidden; }
 .h-novice .info:before { content: ""; position: absolute; top: 195px; left: 20px; width: 0; height: 0;
 border-color: transparent transparent #fff transparent;
 border-style: solid;
 border-width: 0 15px 15px; }
 .h-novice .info h1 { max-height: 48px; overflow: hidden; font-size: 0;}
 .h-novice .info h1 a { display: inline-block; font-size: 16px; font-weight: bold; }
 .h-novice .info p.txt { height: 44px; margin-top: 5px; overflow: hidden; font-size: 14px; color: #7c7c7c; }
 .h-novice .author { padding: 0 15px; height: 88px; }
 .h-novice .author .avatar { width: 50px; height: 50px; margin-right: 10px; }
 .h-novice .author .name { margin-top: 5px; }
 .h-novice .author .name { font-size: 14px; font-weight: bold; }

 .h-novice-first { float: left; width: 334px; height: 624px; border: 3px solid #ff8200; }
 .h-novice-first .cover { width: 334px; height: 134px; }
 .h-novice-first .list { padding: 12px 20px 0; }
 .h-novice-first .list li:before { content: ""; float: left; width: 6px; height: 6px; margin: 13px 0; background-color: #ff8200; border-radius: 50%;}
 .h-novice-first .list li a { display: block; height: 32px; font-size: 14px; color: #7c7c7c; line-height: 32px; text-indent: 10px; }
 .h-novice-first .list li a:hover { color: #2980b9; }
 .h-novice-first .more { display: block; width: 100%; height: 50px; margin-top: 12px; font-size: 14px; color: #7c7c7c; line-height: 50px; text-indent: 40px; background-color: #ecf0f1; }

 .h-novice-tag { position: absolute; top: 3px; left: 0; height: 36px; line-height: 36px; font-size: 86px; color: #f39c12; }
 .h-novice-tag .txt { position: absolute; top: 0; left: 0; width: 75px; font-family: "Microsoft Yahei"; font-size: 16px; color: #fff; text-align: center;
 -webkit-text-stroke-width: initial;}
 .h-novice-tag.purple { color: #8e44ad; }
 .h-novice-big { height: 54px; line-height: 54px; font-size: 130px; color: #8e44ad;  }
 .h-novice-big .cont { position: absolute; top: 0; left: 0; }
 .h-novice-big .t1 { font-size: 20px; color: #fff; font-weight: bold; }
 .h-novice-big .t2 { font-size: 14px; color: #fff; font-weight: bold; font-style: italic; }
 .h-novice-big .t3 { font-size: 12px; color: #fff; font-style: italic;  }

 .h-novice-study { position: absolute; top: 3px; left: 0; width: 100px; height: 31px; padding: 31px 0 0 24px; background: url("../../img/home/h-novice-study.png") no-repeat left top; font-size: 14px; color: #fff; font-weight: bold; font-style: italic;}

 /*文章资讯*/
 /*文章标题*/
 .h-tit { height: 42px; line-height: 42px;padding-bottom: 5px; }
 .h-tit a { float: left; height: 40px; margin-right: 25px; padding: 0 20px; font-size: 14px; color: #7c7c7c; line-height: 40px; text-align: center; transition: all 0s;}
 .h-tit a:hover { color: #ff8200; }
 .h-tit a.on { border: 1px solid #ff8200; border-radius: 20px; font-weight: bold; color: #ff8200; }
 .h-tit2 { font-size: 14px; color: #34495e; height: 40px; line-height: 40px; margin: 28px 0 10px; font-weight: bold}
 /*文章列表*/
 .h-article-list { width: 100%; }
 /*.h-article-list .ptbw {  border-top: 1px solid #e0e7eb; }*/
 .h-article-list li { padding: 20px 0; border-bottom: 1px solid #e0e7eb; position: relative;}
/*  .h-article-list li>a{display: inline-block;}*/
 .h-article-list li.on h1 a{color:#2980b9}
 .h-article-list li.on{border-bottom:1px solid #fff;}
  .h-article-list li.oe{border-bottom:1px solid #fff;}
  .h-article-list li.on .shade{opacity: 1;transition:all .2s;}
  .h-article-list li .shade{opacity: 0; filter:alpha(opacity=0); position:absolute; z-index: 1; top:0px; right: -25px; bottom: 0; left: -23px; background-color: #fff; box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);transition:all .2s;}
  .h-article-list li .shade:after { content:""; position: absolute; top: -1px; right: -1px; bottom: -1px; left: -1px; border: 3px solid #ff8200; }
  .h-article-list li .showd{position: relative;z-index: 2;}
 .h-article-list .cover { float: left; display: block; width: 160px; height: 120px; }
 
.h-article-list li .cover img {
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-transition: -webkit-transform 0.2s;
-moz-transition: -moz-transform 0.2s;
-ms-transition: -ms-transform 0.2s;
transition: transform 0.2s;
}
.h-article-list li.on .cover img { 
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05);}


 .h-article-info { position: relative; float: left; width: 640px; margin-left: 20px; }
 .h-article-info h1 { margin: 2px 0; }
 .h-article-info h1 span { float: left; display: block; max-width: 450px; font-size: 18px; font-weight: bold;}
 .h-article-info .tag { float: left; height: 25px; margin: 1px 5px 1px 0; padding: 0 10px; font-size: 12px; color: #fff; border-radius: 2px; line-height: 25px; }
 .h-article-info p { max-height: 44px; overflow: hidden; margin-top: 5px; color: #7f8c8d; }
 .h-article-info .avatar img { width: 20px; height: 20px; }
 .h-article-info .avatar .name { padding: 0 15px; vertical-align: middle; font-size: 12px; color: #394a58; font-weight: bold; line-height: 21px;}
 .h-article-info .avatar .name img{border-radius:0;}
 .h-article-info .avatar .name:after { content:""; float: right; height: 14px; margin: 3px 20px 3px 0; border-right: 1px solid #e0e7eb; }
 .h-article-info .data { position: absolute; top: 5px; right: 0; color: #bdbdbd; }
 .h-article-info .data i { margin-right: 10px; color: #bdbdbd; font-size: 14px;}

 .h-article-info .icon-certified2{font-size: 14px;color: #ff8200;vertical-align: middle;line-height: 21px;}
 .h-article-info .icon-recommendation_designer{font-size: 14px;color: #e74c3c;vertical-align: middle;line-height: 21px;}
 .h-novice .icon-recommendation_designer{font-size: 12px;color: #e74c3c;}
 /*更多推荐*/
 .h-list-more { display: block; margin: 24px auto 0; width: 220px; height: 40px; font-size: 14px; line-height: 40px; text-align: center;  border: 1px solid #bdc3c7; border-radius: 30px;}
 .h-list-more:hover { border-color: ##ff8200; }
 .more-border { width: 100%; border-top: 1px solid #e0e7eb;   min-height: 90px!important;}
 
 
 /*作品文章列表简单分页*/
.h_page { display: table; margin: 0 auto; width: auto; height: 40px; }

.h_page ul li { float: left; }
.h_page ul li a { display: block; min-width: 40px; line-height: 40px;height: 40px; margin: 0 10px; border: 1px solid rgba(191,196,205,.6); border-radius: 4px; font-family: PingFangSC-Regular;
font-size: 16px;
color: #606266;
letter-spacing: 0;
text-align: center;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0 15px;
}
.h_page ul li a.on{
  background-color: #ff8200;
  color: white;
  border-color: #ff8200;
}
  .h_page ul li a:not(.on):hover{ background-color: rgba(61,126,255,.1)}
.h_page ul li:last-child a { line-height: 28px;}
.h_page ul li a i{
  color: #606266;
  line-height: 36px;
}
.h_page ul li.dian a{
  line-height: 28px;
}
.s_page ul li:last-child a { line-height: 38px; }
.s_page .min_page li.pre,.s_page .min_page li.next{width: auto;color: #bdc3c7}
.s_page .min_page li a.on{background-color: transparent}; 





/*作品展示*/
.post-works li {width: 280px;margin-right: 20px;}

.post-works .cover a {display: block;width: 280px;height: 210px;overflow: hidden;border-radius: 5px;}
.post-works li:nth-of-type(4n){
		margin-right:12px;
}

/*共用样式*/
.post li {position: relative;float: left;margin-bottom: 15px;border-radius: 5px;-webkit-transition: all 0.2s;-moz-transition: all 0.2s;transition: all 0.2s;margin-right: 14px;}
.post li:hover{
	-webkit-transform: translateY(-5px);
	-moz-transform: translateY(-5px);
	transform: translateY(-5px);
}
/*滑过阴影*/
.post .shade {opacity: 1;filter:alpha(opacity=0);position: absolute;z-index: 1;top: -5px;right: -5px;bottom: 0;left: -5px;background-color: #fff;box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);border-radius: 5px;}
.post .shade:after {content:"";position: absolute;top: -1px;right: -1px;bottom: -1px;left: -1px;border: 1px solid rgba(0, 0, 0, 0.05);border-radius: 5px;}
/*作品封面*/
.post .cover {position: relative;z-index: 2;border-radius: 5px;}
.post li .cover img {
	-webkit-transform: scale(1);
	-moz-transform: scale(1);
	-ms-transform: scale(1);
	transform: scale(1);
	-webkit-transition: -webkit-transform 0.2s;
	-moz-transition: -moz-transform 0.2s;
	-ms-transition: -moz-transform 0.2s;
	transition: transform 0.2s;
}
.post li:hover .cover img { 
-webkit-transform: scale(1.05);
-moz-transform: scale(1.05);
-ms-transform: scale(1.05);
transform: scale(1.05)}
/*作品信息*/
.post .info { position: relative; z-index: 2; padding: 5px 0 10px 5px; min-height: 75px; overflow: hidden; }
.post .recommend{
	position: absolute;
	right: 5px;
	top: 0;
	z-index: 2;
	display: none;
}
.post li:hover .recommend{
	display: block;
}
.post .recommend span{
	display: inline-block;
	vertical-align: middle;
	font-family: PingFangSC-Regular;
	font-size: 12px;
	color: #9FB0BD;
	letter-spacing: 0;
	text-align: justify;
}
.post .recommend a{
	display: inline-block;
	vertical-align: middle;
	margin-left: -10px;
	z-index: 3;
	position: relative;
}
.post .recommend a:nth-of-type(2){
	z-index: 2;
}
.post .recommend a:nth-of-type(3){
	z-index: 1;
}
.post .recommend img{
	display: inline-block;
	vertical-align: middle;
	width: 22px;
	height: 22px;
	border-radius: 50%;
}
/*作品标题*/
.post .info .title { width: 100%; font-weight: bold; color: #34495e; }
	/*下载*/
.post .info .title.download { max-width: 275px;max-height: 20px;}
.post .info .title.download .icon-shoutui{font-size: 20px;margin-right: 5px;color: #e74c3c;vertical-align: middle;}
.post .info .title.download .icon-biantui{font-size: 20px;margin-right: 5px;color: #f18c14;vertical-align: middle;}
.post .info .title.download .icon-putui{font-size: 20px;margin-right: 5px;color: #f3bf21;vertical-align: middle;}
.post .info .title.download + .i-rar { position: absolute;text-align: right; right: 6px; top: 3px; height: 22px;line-height: 22px;width: 50px;  font-size: 12px  }
.post .info .title.download + .i-rar:after,

	/*分类*/
.post .info .classify { float: left; height: 20px; margin-right: 10px; padding: 0 5px; font-size: 12px; color: #9FB0BD; line-height: 19px; text-align: center; background-color: #dfe5e9; border-radius: 3px; }
/*查看、评论、点赞数量*/
.post .info .msg span { margin-right: 10px; display: inline-block;}
.post .info .msg span i { font-size: 18px; color: #9FB0BD; margin-right: 5px; display: inline-block; line-height: 21px; vertical-align: middle; margin-top: 0}
.post .info .msg span em { font-size: 14px; color: #9FB0BD; display: inline-block; line-height: 21px; vertical-align: middle; }
.post .info .msg .slogan { height: 21px; line-height: 21px; font-size: 12px; }
/*用户信息*/
.post .info .user { margin-top: 7px; }
.post .info .user.on a { color: #3498db; }
.post .info .user a { display: block; height: 20px; line-height: 20px;width:220px}
.post .info .user a img { float: left; width: 20px; height: 20px; border-radius: 50%; }
.post .info .user a .name { float: left; margin-left: 10px; font-size: 12px;display: inline-block;display: flex;align-items: center;}
.post .info .user a .name em{float: left;margin-right: 3px;font-style: normal;}

.post .info .user a .name i{margin-right: 3px;}
.post .info .user a .name img{width: 14px;height: 14px;margin-top: -2px;float: none;border-radius: 0;}
/*底线*/
.post .line { width: 100%; height: 0; background: #e2e8eb; position: absolute; bottom: 0; }