/*
 * description: 主站改版样式
 * require: uicn.v1.css
 * relevancy: XXX.js
 *
 * date: 2015-07-30
 * update: (2015-09-01)
 */

/*公共样式*/
a {
    color: #2c3e50;
}

a:hover {
    color: #2980b9;
}

/*按钮 */
.btn-fixed-100 {
    width: 100px;
    padding-left: 0;
    padding-right: 0;
}

/*背景各种灰色*/
.bg-gray2 {
    background-color: #eaeef1;
    overflow: hidden;
    zoom: 1;
}

.bg-gray3 {
    background: url("../../img/home/h-bg.jpg") repeat-x left top #eff3f5;
    width: 100%;
    height: auto;
    overflow: hidden;
    zoom: 1;
}

/*文字各种灰色*/
.txt-gray1 {
    color: #b8c4ce !important;
}

.txt-orange {
    color: #f39c12 !important;
}

.txt-normal {
    color: #2c3e50 !important;
}

/*字体大小*/
.f24 {
    font-size: 24px !important;
}

/*背景颜色*/
.bg-blue {
    background-color: #3498db !important;
}

.bg-purple {
    background-color: #9b59b6 !important;
}

.bg-red {
    background-color: #e74c3c !important;
}

.main {
    float: left;
    width: 940px;
}

.aside {
    float: right;
    width: 220px;
}

/*查看评论点赞数量*/
.msg span {
    margin-right: 10px;
}

.msg span i {
    font-size: 18px;
    color: #9aabb8;
    margin-right: 5px;
}

.msg span em {
    font-size: 14px;
    color: #9aabb8;
}

/*左右块宽度*/
.w280 {
    width: 280px;
}

.w820 {
    width: 820px;
}

/*
 *
 * 首页
 *
 */

/*作品筛选*/
.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:hover {
    color: #3498db;
}

.h-screen li a .num {
    position: relative;
    display: inline-block;
    height: 18px;
    line-height: 18px;
    margin-left: 10px;
    padding: 0 3px;
    background-color: #3498db;
    font-size: 12px;
    color: #fff;
}

.h-screen li a .num:after,
.h-screen li a .num:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-style: solid;
}

.h-screen li a .num:before {
    top: 0;
    left: -6px;
    border-color: transparent #3498db transparent transparent;
    border-width: 9px 7px 9px 0;
}

.h-screen li a .num:after {
    top: 0;
    right: -6px;
    border-color: transparent transparent transparent #3498db;
    border-width: 9px 0 9px 7px;
}

.h-screen li.on a {
    border: 1px solid #3498db;
    border-radius: 20px;
    font-weight: bold;
    color: #3498db;
}

.h-screen li.on a:hover {
    border-color: #3498db;
}

.h-screen li.on a .num {
    display: none;
}

/*作品筛选(白)*/
.h-screen-white {
    float: left;
    margin-top: 15px;
}

.h-screen-white li {
    position: relative;
    float: left;
}

.h-screen-white li a {
    display: block;
    height: 40px;
    margin-right: 25px;
    padding: 0 20px;
    font-size: 14px;
    color: #d9d9d9;
    line-height: 40px;
    text-align: center;
}

.h-screen-white li a:hover {
    color: #ffffff;
}

.h-screen-white li a .num {
    position: relative;
    display: inline-block;
    height: 18px;
    line-height: 18px;
    margin-left: 10px;
    padding: 0 3px;
    background-color: #ffffff;
    font-size: 12px;
    color: #3498db;
}

.h-screen-white li a .num:after,
.h-screen-white li a .num:before {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    border-style: solid;
}

.h-screen-white li a .num:before {
    top: 0;
    left: -6px;
    border-color: transparent #ffffff transparent transparent;
    border-width: 9px 7px 9px 0;
}

.h-screen-white li a .num:after {
    top: 0;
    right: -6px;
    border-color: transparent transparent transparent #ffffff;
    border-width: 9px 0 9px 7px;
}

.h-screen-white li.on a {
    border: 1px solid #ffffff;
    border-radius: 20px;
    font-weight: bold;
    color: #ffffff;
}

.h-screen-white li.on a:hover {
    border-color: #ffffff;
}

.h-screen-white li.on a .num {
    display: none;
}

/*公告鸡汤*/
.h-soup {
    position: relative;
    float: right;
    width: auto;
    height: 40px;
    margin-top: 15px;
    padding: 0 110px 0 20px;
    background-color: #e1f5fe;
    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: #9adbff;
    cursor: pointer;
}

.h-soup li.open i {
    color: #0288d1;
}

.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: #0288d1;
    line-height: 40px;
    white-space: nowrap;
    display: none;
    white-space: nowrap;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
    max-width: 500px;
}

.h-soup li.open .txt {
    display: block;
}

/*没有关注*/
.h-follow {
}

.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: #3498db;
    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 {
    width: 1174px;
    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 #3498db;
}

.h-novice-first .cover {
    width: 334px;
    height: 134px;
}

.h-novice-first .list {
    padding: 12px 20px 0;
}

.h-novice-first .list li {
}

.h-novice-first .list li:before {
    content: "";
    float: left;
    width: 6px;
    height: 6px;
    margin: 13px 0;
    background-color: #3498db;
    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: #3498db;
}

.h-tit a.on {
    border: 1px solid #3498db;
    border-radius: 20px;
    font-weight: bold;
    color: #3498db;
}

.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 #3498db;
}

.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-list li:hover {
    border-bottom: 1px solid #fff;
}

.h-article-list li:hover .shade {
    opacity: 1;
    transition: all .2s;
}

.h-article-list li:hover h1 a {
    color: #2980b9
}

.h-article-list li:hover .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: 430px;
    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: #3996db;
    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: #3498db;
}

.more-border {
    width: 100%;
    border-top: 1px solid #e0e7eb;
    min-height: 90px !important;
}

/*侧栏招聘列表*/
.h-tit-aside {
    height: 40px;
    margin-bottom: 17px;
    font-size: 14px;
    color: #7c7c7c;
    line-height: 40px;
}

.h-aside-list {
    box-shadow: 0 1px 4px rgba(0, 0, 0, .5);
}

.h-aside-list li > a {
    display: block;
    width: 280px;
    height: 280px;
}

.h-aside-list .cover {
    width: auto;
    height: 280px;
}

.h-aside-list + .more {
    display: block;
    margin: 0 auto;
    width: 43px;
    height: 36px;
    background: url("../../img/home/arrow3.png") no-repeat center top;
    font-size: 12px;
    color: #7f8c8d;
    text-align: center;
    line-height: 28px;
}

.h-aside-show {
    opacity: 0;
    visibility: hidden;
    padding: 18px 50px 18px 25px;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: rgba(0, 0, 0, .6);
    transition: all .3s;
}

.h-aside-show .item {
    position: absolute;
    font-size: 14px;
    color: #fff;
}

.h-aside-show .item:nth-child(1) {
    bottom: 18px;
    width: 85%;
}

.h-aside-show .item:nth-child(2) {
    bottom: 40px;
}

.h-aside-show .item:nth-child(3) {
    bottom: 62px;
}

.h-aside-show .item:nth-child(4) {
    bottom: 84px;
}

.h-aside-show .tip {
    position: absolute;
    right: 20px;
    bottom: 14px;
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
    text-align: center;
}

.h-aside-show .tip .num {
    display: block;
    width: 34px;
    height: 38px;
    font-size: 44px;
    line-height: 38px;
    text-align: left;
    font-style: italic;
    font-weight: bold;
}

.h-aside-show .tip .txt {
    font-size: 22px;
    font-weight: bold;
}

.h-aside-list li > a:hover .h-aside-show {
    opacity: 1;
    visibility: visible;
}

/*设计师*/
.h-member-btn {
    border-top: 1px solid #e0e7eb;
}

.h-member {
    width: 1200px;
}

.h-member li {
    float: left;
    width: 300px;
    padding-top: 20px;
    min-height: 82px;
}

.h-member li a.avatar-sm {
    float: left;
    margin-right: 10px;
}

/*.h-member li a.avatar-sm img {
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  -ms-transition: -moz-transform 0.3s
  transition: transform 0.3s;
}
.h-member li a.avatar-sm:hover img {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}*/
.h-member .cont {
    float: left;
    width: 210px;
}

.h-member .cont .user {
    font-weight: normal;
}

.h-member .cont .user a {
    color: #3498db;
    font-size: 14px;
}

.h-member .cont .user a i {
    color: #e74c3c;
    font-size: 12px;
}

.h-member .cont .text {
    max-height: 40px;
    overflow: hidden;
    color: #7f8c8d;
    font-size: 14px;
    line-height: 20px;
}

.h-member .cont .date {
    white-space: nowrap;
    overflow: hidden;
    color: #D9E1E5;
    font-size: 14px;
    line-height: 20px;
    color: #2c3e50;
    opacity: .3;
    filter: alpha(opacity=30);
}

.h-member-box + .line {
    border-top: 1px solid #e0e7eb;
    margin-top: 5px;
}

/*合作伙伴*/
.h-partners .logo {
    margin: 0 -10px;
}

.h-partners .logo li {
    float: left;
    margin-bottom: 20px;
}

.h-partners .logo li a {
    display: block;
    width: 150px;
    height: 50px;
    text-align: center;
    margin: 0 10px;
}

.h-partners .text {
    margin: 20px 0 30px;
}

.h-partners .text li {
    float: left;
    width: 168px;
    text-align: left;
    opacity: 0.6;
    margin-top: 10px;
}

.h-partners .text li:nth-of-type(7) {
    text-indent: 35px;
}

.h-partners .text li:nth-of-type(14) {
    text-indent: 35px;
}

.h-partners .text li a {
    display: block;
    font-size: 16px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/*作品文章列表简单分页*/
.h_page {
    display: table;
    margin: 0 auto;
    width: auto;
    height: 40px;
}

.h_page ul {
}

.h_page ul li {
    float: left;
}

.h_page ul li a {
    display: block;
    width: 40px;
    height: 40px;
    margin: 0 10px;
    border: 1px solid #bdc3c7;
    border-radius: 50%;
    font-size: 20px;
    color: #bdc3c7;
    text-align: center;
    line-height: 38px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.h_page ul li a:hover,
.h_page ul li a.on {
    color: #2d3e4f;
    border-color: #2d3e4f;
    font-weight: bold;
}

.h_page ul li:last-child a {
    line-height: 25px;
}


/*
 *
 * 详情页
 *
 */
.works-main { /*margin-top: 30px;*/
    background-color: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, .1);
}

.works-top {
    padding: 20px;
}

.works-top .left h1 {
    height: 34px;
}

.works-top .left h1 strong {
    display: inline-block;
    max-width: 640px;
    white-space: nowrap;
    overflow: hidden;
    font-size: 20px;
    color: #2c3e50;
    font-weight: bold;
    height: 30px;
}

.works-top .left h1 .edit {
    margin-left: 10px;
    vertical-align: super;
}

.works-top .left {
    float: left;
    width: 700px;
}

.works-top .left .det {
    margin-top: 5px;
    font-size: 14px;
    height: 22px;
    line-height: 22px;
    overflow: hidden;
}

.works-top .left .det .tag2 {
    float: left;
    padding: 0 5px;
    height: 20px;
    font-size: 12px;
    color: #9aabbf;
    line-height: 20px;
    background-color: #dfe5e9;
    border-radius: 2px;
}

.works-top .left .det span {
    float: left;
}

.works-top .left .det .txt-gray1 {
    margin-left: 25px;
}

.works-top .left .det .time {
    margin-left: 20px;
}

.works-top .left .det .time i {
    float: left;
    height: 21px;
    line-height: 21px;
    margin-right: 5px;
    color: #9aabb8;
}

.works-top .left .det .time em {
    float: left;
    height: 21px;
    line-height: 21px;
    color: #9aabb8;
}

.works-top .left .det .disabled {
    color: #b8c4ce;
    cursor: not-allowed;
}

.works-top .left .det .disabled:hover {
    text-decoration: none;
}

.works-top {
}

.works-top {
}

.works-top {
}

.copyright {
    float: left;
}

.copyright i {
    font-size: 22px;
    cursor: pointer;
}

.copyright i.on {
    color: #3498db;
}

.copyright .text {
    opacity: 0;
    position: absolute;
    top: 25px;
    left: -78px;
    width: 180px;
    background-color: #3498db;
    color: #fff;
    padding: 10px 0;
    line-height: 14px;
    font-size: 14px;
    text-align: center;
    border-radius: 2px;
    -webkit-transition: all .5s;
    -moz-transition: all .5s;
    -ms-transition: all .5s;
    -o-transition: all .5s;
    transition: all .5s;
}

.copyright .text:before {
    content: "";
    position: absolute;
    top: -6px;
    left: 50%;
    margin-left: -8px;
    border-color: transparent transparent #3498db transparent;
    border-style: solid;
    border-width: 0 7px 8px 7px;
    height: 0;
    width: 0;
}

.copyright i:hover + .text {
    opacity: 1;
    top: 30px;
}

.works-top .right {
    float: left;
    width: 200px;
}

.works-top .right h3 {
    position: absolute;
    right: 20px;
    margin-top: 3px;
    width: 500px;
    overflow: hidden;
    white-space: nowrap;
    text-align: right;
}

.works-top .right h3 a {
    font-size: 14px;
    color: #16a085;
    transition: all .2s;
}

.works-top .right h3 a:hover {
    text-decoration: underline;
}

.works-top .hot {
    text-align: right;
    margin-top: 15px;
    margin-right: 12px;
    height: 45px;
}

.works-top .hot i {
    font-size: 30px;
    color: #acbbc6;
    vertical-align: super;
}

.works-top .hot .num {
    font-size: 30px;
    color: #acbbc6;
    font-weight: bold;
    font-style: italic;
}

.works-top .hot .num em {
    font-size: 18px;
    font-style: italic;
}

.works-top .hot .num strong {
    position: absolute;
    right: 5px;
    top: 25px;
    font-size: 22px;
}

.works-top .tag-star {
    position: absolute;
    top: -6px;
    right: -6px;
}

/*删除作品按钮弹层*/
.modal-delet {
    width: 700px;
    margin: 0 auto;
    z-index: 101;
    text-align: center;
}

.modal-delet .icon-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background-color: #e74c3c;
    font-size: 25px;
    color: rgba(255, 255, 255, 0.5);
    line-height: 60px;
    text-align: center;
}

.modal-delet .title {
    width: 100%;
    height: 60px;
    line-height: 60px;
    text-align: left;
    border-bottom: 1px solid #e9ecee;
    padding-left: 25px;
    box-sizing: border-box;
    font-size: 20px;
    color: #34495e;
}

.modal-delet .tip {
    padding-top: 20px;
    line-height: 30px;
    font-size: 14px;
    color: #34495e;
}

.modal-delet .tip em {
    width: 95px;
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    display: inline-block;
    margin: 0 10px;
    color: #fff;
    font-weight: bold;
    background-color: #e74c3c;
    border-radius: 30px;
}

.modal-delet .tit {
    font-weight: bold;
    font-size: 20px;
    color: #e74c3c;
    padding-top: 15px;
}

.modal-delet .sent {
    font-size: 15px;
    color: #34495e;
    padding-top: 10px;
}

.modal-delet .contents {
    padding-top: 10px;
}

.modal-delet .contents p {
    font-size: 14px;
    color: #34495e;
    padding-bottom: 5px;
}

.modal-delet .contents p em {
    width: 77px;
    display: inline-block;
    text-align: center;
    color: #e74c3c;
    font-weight: bold;
}

.modal-delet .still {
    width: 553px;
    height: 30px;
    display: inline-block;
    border-bottom: 1px solid #ecf0f1;
    position: relative;
}

.modal-delet .still em {
    width: 180px;
    display: inline-block;
    text-align: center;
    background: #fff;
    height: 30px;
    line-height: 30px;
    font-weight: bold;
    font-size: 18px;
    color: #e74c3c;
    position: absolute;
    top: 15px;
    left: 50%;
    margin-left: -90px;
    z-index: 1;
}

.modal-delet .mobtn {
    padding-top: 40px;
    padding-bottom: 30px;
}

.modal-delet .mobtn p {
    display: inline-block;
}

.modal-delet .mobtn a {
    width: 220px;
    height: 70px;
    line-height: 70px;
    font-size: 18px;
    color: #fff;
}

.modal-delet .mobtn a.yes {
    background-color: #95a5a6;
}

.modal-delet .mobtn a.no {
    background-color: #e74c3c;
    margin-left: 80px;
}

/*作品内容*/
.works-cont {
    padding: 30px 20px 30px 20px;
    border-top: 1px solid #eff3f5;
    border-bottom: 1px solid #eff3f5;
}

.works-cont p {
    font-size: 16px;
    line-height: 2;
    width: 600px;
    margin: 0 auto
}

#p-content .p-content-img {
    text-align: left !important;
}

.works-cont img {
    display: block !important;
    padding: 0;
    margin: 0 0 20px 0;
    max-width: 900px;
    overflow: hidden;
    width: auto;
    height: auto;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    cursor: pointer;
}


.works-cont .video-box {
    width: 720px;
    height: 540px;
    margin: 0 auto;
}

/* 编辑器样式 */
/*  img.fr-fil {
      z-index: 1;
      position: relative;
      margin: auto;
      overflow: auto;
      float: left!important
  }

  img.fr-fil.fr-dib {
      float: none!important;
      margin-left: 0!important
  }

  img.fr-fir {
      z-index: 1;
      position: relative;
      margin: auto;
      overflow: auto;
      padding: 10px 3px 10px 10px;
      float: right!important
  }

  img.fr-fir.fr-dib {
      float: none!important;
      margin-right: 0!important
  }

  img.fr-fin {
      z-index: 1;
      position: relative;
      margin: auto;
      overflow: auto;
      float: none
  }

  img.fr-fin.fr-dib {
      padding: 10px 0
  }

  img.fr-dib {
      vertical-align: top;
      display: block
}*/

/*作品标签*/
.works-tag {
    padding: 0 20px;
}

.works-tag li {
    display: inline-block;
    height: 20px;
    margin-right: 20px;
    margin-top: 10px;
}

.works-tag li i {
    padding-right: 5px;
    color: #b8c4ce;
    font-size: 14px;
}

.works-tag li span {
    color: #b8c4ce;
}

/*作品分享、下载、点赞*/
.works-bottom {
    width: 900px;
    height: 140px;
    padding: 0 20px;
}

.works-bottom .share {
}

.works-bottom .share {
    position: relative;
    float: left;
    margin-top: 32px;
}

.works-bottom .share > a {
    float: left;
    margin-right: 10px;
}

.works-bottom .share > a > i {
    display: inline-block;
    width: 40px;
    height: 40px;
    font-size: 24px;
    color: #34495e;
    text-align: center;
    line-height: 40px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #34495e;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.works-bottom .share > a > p {
    position: absolute;
    background: url("../../img/tip2.png") no-repeat center top;
    width: 100px;
    height: 39px;
    color: white;
    top: -36px;
    left: 20px;
    line-height: 28px;
    text-align: center;
    display: none
}

.works-bottom .share > a:hover > p {
    display: block
}

.works-bottom .share > a > i.icon-huaban {
    font-size: 21px;
}

.works-bottom .share > a > i.icon-douban1 {
    font-size: 19px;
}

.works-bottom .share > a.on > .icon-weixin1 {
    background-color: #3fb743;
    color: #fff;
    border-color: #3fb743;
}

.works-bottom .share > a:hover > i {
    color: #fff;
}

.works-bottom .share > a:hover > .icon-pic {
    background-color: #3890c3;
    border-color: #3890c3
}

.works-bottom .share > a:hover > .icon-sina {
    background-color: #EE4B4B;
    border-color: #EE4B4B;
}

.works-bottom .share > a:hover > .icon-weixin1 {
    background-color: #3fb743;
    border-color: #3fb743;
}

.works-bottom .share > a:hover > .icon-huaban {
    background-color: #EA5075;
    border-color: #EA5075;
}

.works-bottom .share > a:hover > .icon-douban1 {
    background-color: #1ABC9C;
    border-color: #1ABC9C;
}

.works-bottom .share .weixin-box {
    display: none;
    position: absolute;
    left: 5px;
    top: -160px;
    bottom: initial;
    width: 270px;
    padding: 18px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
    border-radius: 2px;
}

.works-bottom .share .weixin-box:before {
    content: "";
    width: 10px;
    height: 10px;
    position: absolute;
    left: 60px;
    bottom: -5px;
    background-color: #fff;
    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}

.works-bottom .share .weixin-box img {
    float: left;
    width: 111px;
    height: 111px;
    position: relative;
    z-index: 1;
}

.works-bottom .share .weixin-box p {
    display: inline-block;
    width: 100px;
    margin-left: 15px;
    padding-top: 22px;
    font-size: 14px;
    position: relative;
    z-index: 1;
}

.works-bottom .share .weixin-box .icon-close {
    position: absolute;
    right: 8px;
    top: 8px;
    color: #34495e;
    z-index: 1;
}

/*作品点赞*/
.works-zan {
    display: block;
    width: 190px;
    margin: 20px auto 0;
}

.works-zan .iconfont {
    background: url(../../img/bgz.png) no-repeat center;
    background: -webkit-image-set(url("../../img/bgz1.png") 1x, url("../../img/bgz2.png") 2x) no-repeat center top;
    background-size: 190px;
    width: 190px;
    height: 65px;
    display: inline-block;
}

/*.works-zan .iconfont{background:url(../../img/bg-blue.png) no-repeat 0 0; background-size: 190px;width: 190px;height: 66px;display: inline-block;}
    .works-zan .award{background:url(../../img/bg-green.png) no-repeat 0 0; background-size: 190px;width: 190px;height: 66px;display: inline-block;}*/
.works-zan .cont {
    position: absolute;
    top: 0;
    left: 0;
    width: 190px;
}

.works-zan .cont i {
    float: left;
    margin-left: 32px;
    font-size: 30px;
    color: #fff;
    line-height: 66px;
    margin-top: -2px;
}

.works-zan .cont .txt {
    float: left;
    margin-left: 8px;
    font-family: "Microsoft Yahei";
    font-size: 18px;
    color: #fff;
    line-height: 65px;
    -webkit-text-stroke-width: initial;
}

.works-zan .cont2 i {
    float: left;
    margin-left: 32px;
    font-size: 30px;
    color: #fff;
    line-height: 66px;
    margin-top: -4px;
}

.works-zan .cont2 .txt {
    float: left;
    margin-left: 8px;
    font-family: "Microsoft Yahei";
    font-size: 18px;
    color: #fff;
    line-height: 65px;
    -webkit-text-stroke-width: initial;
}

.works-zan .cont .num {
    float: right;
    margin-right: 32px;
    font-size: 12px;
    color: rgba(255, 255, 255, .5);
    text-align: right;
    line-height: 65px;
}

/*作品下载、收藏*/
.works-bottom .oper {
    float: right;
    margin-top: 32px;
}

.works-bottom .oper li {
    float: left;
    margin-left: 20px;
}

.works-bottom .oper li a {
    display: block;
    width: 120px;
    height: 38px;
    font-size: 14px;
    color: #2c3e50;
    line-height: 38px;
    text-align: center;
    border-radius: 20px;
    border: 1px solid #4f5f6e;
}

.works-bottom .oper li a i {
    margin-right: 5px;
    font-size: 18px;
    color: #2c3e50;
    line-height: 35px;
}

.works-bottom .oper li a.on {
    color: #fcab2b;
    border-color: #fcab2b;
}

.works-bottom .oper li a.on i {
    color: #fcab2b;
}

.works-bottom .oper li a:hover {
    color: #3498db;
    border-color: #3498db;
}

.works-bottom .oper li a:hover i {
    color: #3498db;
}

.works-bottom .tip {
    font-size: 12px;
    color: #9dacb9;
    line-height: 28px;
}

/*作品作者信息*/
.works-author {
    /*width: 900px;*/
    padding: 20px 20px;
    background-color: #f6f9fa;
    border-top: 1px solid #eff3f5;
    border-bottom: 1px solid #eff3f5;
}

.works-author .avatar-md {
    margin: 10px 0;
}

.works-author .info {
    display: table;
    width: 245px;
    overflow: hidden;
    margin: 10px 15px;
}

.works-author .info > div {
    display: table-cell;
    vertical-align: middle;
    height: 100px;
}

.works-author .info h1 {
    height: 30px;
    line-height: 30px;
}

.works-author .info .name {
    display: inline-block;
    width: 245px;
    font-size: 20px;
    color: #2c3e50;
    font-weight: bold;
}

.works-author .info .name i {
    font-size: 14px;
    color: #3996db;
}

.works-author .info .name i.icon-recommendation_designer {
    color: #e74c3c;
}

.works-author .info .name:hover {
    color: #3498db;
}

.works-author .info .intro {
    width: 245px;
    color: #bdc3c7;
}

.works-author .info .num {
    width: 245px;
    color: #34495e;
}

.works-author .info .medal img {
    width: 26px;
    height: 26px;
}

/*关注、私信按钮组*/
.works-author .btn-group {
    float: left;
    width: 90px;
    padding: 40px 0;
}

.works-author .btn-group .btn-item {
    float: left;
    width: 88px;
    height: 28px;
    margin: 5px 0;
    border: 1px solid #bdc3c7;
    border-radius: 20px;
    font-size: 12px;
    color: #34495e;
    line-height: 28px;
    text-align: center;
}

.works-author .btn-group .btn-item i {
    margin-right: 5px;
    font-size: 14px;
    color: #34495e;
}

.works-author .btn-group .btn-item i.icon-add-bold,
.works-author .btn-group .btn-item i.icon-close-bold {
    font-size: 12px;
}

.works-author .btn-group .btn-item:hover {
    color: #3498db;
    border-color: #3498db;
}

.works-author .btn-group .btn-item:hover i {
    color: #3498db;
}

/* 关注
myfollow 关注+
havefollow 已关注√
mutualfollow 相互关注 =
onfollow 滑过关注
unfollow 滑过已关注和相互关注变取消关注 X
*/
.myfollow i:before {
    content: "\e6cf";
}

.havefollow i:before {
    content: "\e6d1";
}

.unfollow i:before {
    content: "\e6d0";
}

.mutualfollow i:before {
    content: "\e6d2";
}

/*作品作者其他作品*/
.works-author .more {
    float: right;
    width: 340px;
}

.works-author .more .item {
    float: right;
    width: 160px;
    height: 120px;
    margin-left: 10px;
}

.works-author .more .item:hover {
    opacity: .9;
}

/*没有其他作品时显示*/
.works-nothing {
    display: block;
    width: 160px;
    margin: 0 auto;
}

.works-nothing img {
    display: block;
    width: 108px;
    height: 65px;
    margin: 10px auto 0;
}

.works-nothing span {
    display: block;
    font-size: 14px;
    color: #bdc3c7;
    text-align: center;
    line-height: 16px;
    margin-top: -5px;
}

.works-nothing strong {
    display: block;
    font-size: 17px;
    color: #bdc3c7;
    text-align: center;
    line-height: 18px;
    font-weight: bold;
}

/*
* 评论-main
*/
/*未登录提醒*/
.comment-login-box {
    margin: 20px;
}

.comment-login {
    width: 100%;
    height: 86px;
    padding: 22px 30px;
    background-color: #fff7e7;
    border: 1px solid #ded6c5;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.comment-login p {
    float: left;
    font-size: 14px;
    color: #6b3612;
    line-height: 40px;
}

.comment-login .btn {
    border-radius: 0;
}

/* 评论输入框 */
.comment-form {
    margin: 20px;
}

.comment-form textarea {
    width: 100%;
    height: 115px;
    padding: 18px;
    color: #6d6d6d;
    margin: 0;
    font-size: 14px;
    border: 1px solid #e4e9ed;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

.comment-form textarea:focus {
    border: 1px solid #3da2e3;
}

.comment-warn {
    position: absolute;
    right: 15px;
    top: 85px;
    font-size: 12px;
    color: #bdc3c7;
}

.comment-warn span {
    color: #f39c12;
    font-weight: bold;
}

.comment-tip {
    margin-right: 15px;
    font-size: 14px;
    color: #bdc3c7;
    line-height: 40px;
}

.comment-form .btn {
    padding: 0;
    border-radius: 0;
    width: 100px;
    height: 40px;
    line-height: 40px;
}

.comment-form-inner {
    margin: 20px -70px 0 0;
}

/*验证码*/
.comment-code {
    width: 148px;
    height: 40px;
    overflow: hidden;
}

/*.comment-code img { width: 100%; height: 100%; }*/
.comment-code-input {
    width: 100px;
    height: 28px;
    margin-left: 15px;
    margin-right: 10px;
    border: 1px solid #ccc;
    padding: 5px 10px;
    font-size: 14px;
}

.comment-code-input:focus {
    border-color: #3da2e3;
}

/*精彩评论*/
.comment-main .tag {
    position: absolute;
    top: 45px;
    right: -5px;
    background: url("../../img/home/ribbon.png") no-repeat;
    width: 61px;
    height: 28px;
    font-size: 12px;
    color: #fff;
    text-indent: 20px;
    line-height: 20px;
}

.comment-main + .all {
    position: relative;
    margin: 20px 0;
    border-top: 1px solid #eff3f5;
    clear: both;
}

.comment-main + .all:before {
    content: "全部评论";
    font-family: "Microsoft Yahei";
    position: absolute;
    top: -14px;
    left: 50%;
    margin-left: -50px;
    width: 100px;
    background-color: #fff;
    font-size: 16px;
    color: #9dacb9;
    text-align: center;
}

/*评论列表*/
.comment-main {
}

.comment-main > li {
    position: relative;
    min-height: 90px;
    padding: 20px 0;
    transition: all .2s;
}

.comment-main > li:hover {
    background-color: #f6f9fa;
}

.comment-num {
    position: relative;
    float: left;
    width: 43px;
    height: 73px;
    margin: 0 20px 0 42px; /*overflow: hidden;*/
}

.comment-num i {
    float: left;
    position: relative;
    font-size: 43px;
    color: #eff3f5;
    cursor: pointer;
    overflow: hidden;
    /*color: #fff; */
}

/*  精彩评论 top 点赞up 反对down  */
.comment-num .top .num {
    top: 17px;
}

.comment-num .top {
    cursor: default;
}

.comment-num .up {
    height: 43px;
}

.comment-num .down {
    height: 24px;
    margin-top: 6px;
}

.comment-num .up:after,
.comment-num .down:after {
    content: "";
    position: absolute;
    border-style: solid;
    transition: all .2s;
}

.comment-num .up:after {
    top: 10px;
    left: 15px;
    border-color: transparent transparent #bdc3c7 transparent;
    border-width: 0 6px 6px 6px;
}

.comment-num .down:after {
    top: 7px;
    left: 15px;
    border-color: #bdc3c7 transparent transparent transparent;
    border-width: 6px 6px 0 6px;
}

.comment-num .num {
    position: absolute;
    top: 24px;
    left: 0;
    width: 43px;
    font-size: 12px;
    color: #bdc3c7;
    text-align: center;
}

.comment-num .up:hover:after {
    border-bottom-color: #3498db;
}

.comment-num .down:hover:after {
    border-top-color: #3498db;
}

.comment-num .up:hover .num {
    color: #3498db;
}

.comment-num i.on {
    color: #3498db;
}

.comment-num .up.on:after {
    border-bottom-color: #fff;
}

.comment-num .down.on:after {
    border-top-color: #fff;
}

.comment-num .on:hover .num,
.comment-num .on .num {
    color: #fff;
}

.comment-num-down {
    position: absolute;
    top: 75px;
    left: 0;
    width: 43px;
    font-size: 12px;
    color: #e74c3c;
    text-align: center;
    opacity: 0;

}

.comment-num-down.on {
    -webkit-animation: oppose 1s linear;
    -moz-animation: oppose 1s linear;
    -o-animation: oppose 1s linear;
    animation: oppose 1s linear;
}

@-webkit-keyframes oppose {
    0% {
        opacity: 0;
        top: 60px;
    }
    70% {
        opacity: 1;
        top: 75px;
        -webkit-transform: scale(1.2);
        transform: scale(1.2);
    }
    100% {
        opacity: 0;
        top: 75px;
    }
}

@-moz-keyframes oppose {
    0% {
        opacity: 0;
        top: 60px;
    }
    70% {
        opacity: 1;
        top: 75px;
    }
    100% {
        opacity: 0;
        top: 75px;
    }
}

@-o-keyframes oppose {
    0% {
        opacity: 0;
        top: 60px;
    }
    70% {
        opacity: 1;
        top: 75px;
    }
    100% {
        opacity: 0;
        top: 75px;
    }
}

@keyframes oppose {
    0% {
        opacity: 0;
        top: 60px;
    }
    70% {
        opacity: 1;
        top: 75px;
    }
    100% {
        opacity: 0;
        top: 75px;
    }
}

.comment-cont {
    float: left;
    width: 670px;
    margin-left: 20px;
}

.comment-cont .user {
    margin-bottom: 2px;
}

.comment-cont .user a {
    font-size: 14px;
    color: #95a5a6;
    font-weight: bold;
}

.comment-cont .user a:hover {
    color: #3498db;
    text-decoration: underline;
}

.comment-cont .user time {
    margin-left: 15px;
    font-size: 12px;
    color: #bdbdbd;
}

.comment-cont .text {
    font-size: 16px;
    color: #34495e;
    line-height: 26px;
    overflow: hidden;
}

.comment-cont .retext {
    border-left: 3px solid #3498db;
    padding-left: 12px;
}

.comment-cont .retext p {
    font-size: 14px;
    color: #bdc3c7;
    overflow: hidden;
}

.comment-cont .oper {
    margin-top: 15px;
    height: 30px;
    line-height: 30px;
}

.comment-cont .oper a {
    float: left;
    padding: 0 22px;
    font-size: 12px;
    color: #34495e;
}

.comment-cont .oper a.comment-toggle {
    line-height: 28px;
}

.comment-cont .oper a.p-replay {
    padding-left: 0;
}

.comment-cont .oper a.comment-toggle i {
    display: inline-block;
    margin-right: 5px;
    color: #34495e;
    line-height: 30px;
    float: left;
}

.comment-cont .oper a:hover,
.comment-cont .oper a:hover i {
    color: #3498db;
    border-color: #3498db;
}

.comment-cont .oper-hide {
    display: none;
}

.comment-cont .oper:hover .oper-hide {
    display: block;
}


/*详情页评论*/
/*.works-comment { padding: 20px; }*/


/*右侧滑动*/
#portamento_container {
    float: right;
    position: relative;
}

#portamento_container #sidebar {
    float: none;
    position: absolute;
}

#portamento_container #sidebar.fixed {
    position: fixed;
}

/*作品详情页侧边栏*/
.works-author-aside .info {
    width: 150px;
    margin-left: 10px;
}

.works-author-aside .info h1 {
    height: 22px;
    line-height: 22px;
}

.works-author-aside .info .name {
    display: inline-block;
    font-size: 16px;
    color: #2c3e50;
    font-weight: bold;
    line-height: 22px;
}

.works-author-aside .info .name:hover {
}

.works-author-aside .info .intro {
    font-size: 14px;
    color: #bdc3c7;
    line-height: 20px;
}

.works-author-aside .btn-group {
}

.works-author-aside .btn-item {
    float: left;
    margin-right: 10px;
    font-size: 12px;
    color: #34495e;
}

.works-author-aside .btn-item i {
    margin-right: 5px;
    font-size: 14px;
    color: #34495e;
}

.works-author-aside .btn-item i.icon-add-bold,
.works-author-aside .btn-item i.icon-close-bold {
    font-size: 12px;
}

.works-author-aside .btn-item:hover {
    color: #3498db;
}

.works-author-aside .btn-item:hover i {
    color: #3498db;
}

/*关注.icon-add-bold:before { content: "\e66e"; }
已关注.icon-ok-sign:before { content: "\e627"; }
相互关注.icon-relating-bold:before { content: "\e670"; }
取消关注.icon-close-bold:before { content: "\e66c"; }*/

/*更多作品推荐*/
.works-look-aside {
}

.works-look-aside h3 {
    margin-top: 20px;
    font-size: 14px;
    color: #9dacb9;
    line-height: 26px;
}

.works-look-aside h3 .more {
    float: right;
    font-size: 12px;
    color: #acbbc6;
}

.works-look-aside > li {
    float: left;
    position: relative;
}

.works-look-aside > li > a {
    display: block;
    width: 110px;
    height: 83px;
    overflow: hidden;
}


/*.works-look-aside .overlay { visibility: hidden; opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255,255,255,.5); transition: all .2s;}
.works-look-aside li a:hover .overlay { visibility: visible; opacity: 1; }
.works-look-aside .overlay i { font-size: 50px; color: #34495e; line-height: 83px; }
.works-look-aside .overlay span {display: block; text-align: center; font-size: 14px; color: #34495e; line-height: 83px; }*/

/*快捷点赞评论*/
.works-oper-aside {
    margin-top: 20px;
}

.works-oper-aside .hexagon-btn {
    position: relative;
    float: left;
    overflow: hidden;
    width: 100px;
    height: 40px;
}

.works-oper-aside .hexagon-btn i {
    font-size: 100px;
    line-height: 40px;
    color: #bdc3c7;
    transition: color .2s;
}

.works-oper-aside .hexagon-btn .text {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 40px;
    line-height: 40px;
    font-family: "Microsoft Yahei";
    font-size: 14px;
    text-align: center;
    color: #34495e;
    transition: color .2s;
}

.works-oper-aside .hexagon-btn:hover i {
    color: #44a0dd;
}

.works-oper-aside .hexagon-btn:hover .text {
    color: #44a0dd;
}

.comment-quick { /*position: absolute; top: 65px; left: 0;*/
    z-index: 1;
    display: none;
    margin-top: 50px;
    /* opacity: 0; visibility: hidden; */
    /*    -webkit-transform: scale(0,0);
       -moz-transform: scale(0,0);
        -ms-transform: scale(0,0);
         -o-transform: scale(0,0);
            transform: scale(0,0);
    -webkit-transform-origin: 80% -50px;
       -moz-transform-origin: 80% -50px;
        -ms-transform-origin: 80% -50px;
         -o-transform-origin: 80% -50px;
            transform-origin: 80% -50px;
    -webkit-transition: all .5s;
       -moz-transition: all .5s;
        -ms-transition: all .5s;
         -o-transition: all .5s;
       transition: all .5s;*/
}

/*.comment-quick.open { opacity: 1; visibility: visible; display: block;
    -webkit-transform: scale(1,1);
       -moz-transform: scale(1,1);
        -ms-transform: scale(1,1);
         -o-transform: scale(1,1);
            transform: scale(1,1);
    -webkit-transform-origin: 80% -50px;
       -moz-transform-origin: 80% -50px;
        -ms-transform-origin: 80% -50px;
         -o-transform-origin: 80% -50px;
         transform-origin: 80% -50px;}*/
.comment-quick textarea {
    width: 198px;
    height: 80px;
    padding: 10px;
    color: #6d6d6d;
    font-size: 14px;
}

.comment-quick .btn {
    border-radius: 0;
    margin-top: 5px;
    padding: 0;
    width: 80px;
    height: 30px;
    line-height: 30px;
}

/*推荐弹出框*/
.modal-recommend {
    position: relative;
    width: 412px;
    margin: 0 auto;
    z-index: 101;
    height: 100px;
    padding: 15px 30px 30px;
    background-color: #fff;
}

.modal-recommend .icon-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 18px;
    color: #e4e9ed;
    cursor: pointer;
}

.modal-recommend .popup-info h2 {
    margin-bottom: 10px;
    font-size: 24px;
    color: #2c3e50;
    text-indent: -10px;
}

.modal-recommend .btn {
    width: 100px;
    height: 40px;
    border-radius: 0;
}

.btn-level-1 {
    color: #fff;
    background-color: #e74c3c;
}

.btn-level-1:hover {
    color: #fff;
    background-color: #D73C2C;
}

.btn-level-1:active {
    background-color: #C72C1C;
}

.btn-level-2 {
    color: #fff;
    background-color: #f18c14;
}

.btn-level-2:hover {
    color: #fff;
    background-color: #E17C04;
}

.btn-level-2:active {
    background-color: #D16BF4;
}

.btn-level-3 {
    color: #fff;
    background-color: #f3bf21;
}

.btn-level-3:hover {
    color: #fff;
    background-color: #E3AF11;
}

.btn-level-3:active {
    background-color: #D39F01;
}

/*私信举报弹出框*/
.modal-letter {
    position: relative;
    width: 640px;
    margin: 0 auto;
    z-index: 101;
    height: 215px;
    padding: 15px 30px 30px;
    background-color: #fff;
}

.modal-letter .icon-close {
    position: absolute;
    top: 20px;
    right: 20px;
    font-size: 18px;
    color: #e4e9ed;
    cursor: pointer;
}

.modal-letter .popup-info h2 {
    margin-bottom: 10px;
    font-size: 24px;
    color: #2c3e50;
    text-indent: -10px;
}

.modal-letter .popup-info h2 a {
    color: #2f99de;
}

.modal-letter .popup-info label {
    margin-right: 28px;
    font-size: 14px;
    color: #7f8c8d;
}

.modal-letter .popup-info label input {
    margin-right: 5px;
}

.modal-letter .popup-text {
    width: 628px;
    height: 93px;
    padding: 10px 5px;
    font-size: 12px;
    color: #bdc3c7;
}

.modal-letter .popup-text-let {
    height: 60px;
    margin-top: 10px;
}

.modal-letter .btn {
    width: 100px;
    height: 40px;
    border-radius: 0;
}

.modal-letter .tip {
    display: inline-block;
    margin-right: 10px;
    font-size: 12px;
    color: #bdc3c7;
    line-height: 40px;
}

/* 私信添加字数限制提醒 20160302 */
#textarea-letter + .word-warn {
    position: absolute;
    top: auto;
    right: auto;
    bottom: -25px;
    left: 0;
    font-size: 12px;
    color: #bdc3c7;
}

#textarea-letter + .word-warn span {
    color: #f39c12;
    font-weight: bold;
}

/*表情框*/
.uiem-btn {
    z-index: 2;
    position: relative;
    width: 77px;
    height: 40px;
    font-size: 12px;
    color: #3499da;
    line-height: 40px;
    cursor: pointer;
}

.uiem-btn .icon-face {
    float: left;
    margin-left: 15px;
    line-height: 40px;
    margin-right: 3px;
    font-size: 18px;
    color: #3499da;
}

.uiem-box {
    z-index: 1;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 344px;
    height: auto;
    background-color: #fff;
    border: 1px solid #e6eaee;
    box-shadow: 0 0 8px rgba(0, 0, 0, .15);
}

.uiem-nav {
    width: 100%;
    height: 35px;
    border-bottom: 1px solid #e6eaee;
}

.uiem-nav div {
    width: auto;
    height: 35px;
    line-height: 35px;
    float: left;
    margin-left: 20px;
    cursor: pointer;
    color: #3499da;
}

.face_author {
    width: auto;
    height: 30px;
    clear: left;
    font-size: 12px;
    line-height: 30px;
    margin-left: 12px;
    margin-right: 12px;
    color: #3499da;
}

#face_detail {
    border-bottom: 1px solid #e6eaee;
}

.uiem-cont {
    margin: 12px;
    padding: 1px 0 0 1px;
}

.uiem-cont li {
    float: left;
    width: 22px;
    height: 22px;
    padding: 3px;
    margin: -1px 0 0 -1px;
    border: 1px solid #ececec;
    cursor: pointer;
}

.uiem-cont li img {
    width: 22px;
    height: 22px;
}

.uiem-cont li:hover,
.uiem-cont li.on {
    position: relative;
    z-index: 2;
    list-style: none outside none;
    border-color: #aec9e8;
    background-color: #e4eef9;
    border-radius: 2px;
}

/*修改详情页跟随滚动添加样式*/
/*固定顶部样式*/
.fixed {
    position: fixed !important;
    top: 0 !important;
}

.fixed1 {
    position: fixed !important;
    top: 20px !important;
}

.fixed2 {
    position: fixed !important;
    top: 20px !important;
}

/*详情页*/
.uptop {
    width: 220px;
    height: 50px;
    display: none;
}

.works-author-aside {
    position: absolute;
    top: 0;
}

/*  新详情页样式*/
.zbd_warp {
    width: 220px;
    overflow-x: hidden;
    background: #fff;
    text-align: center;
    box-shadow: 0 0 3px rgba(0, 0, 0, .1);
    overflow-y: hidden;
}

.Occupying {
    width: 220px;
    height: 87px;
    display: block;
}

.zbd_warp .zbd_portrait a {
    display: inline-block;
    margin-top: 30px;
    width: 100px;
    height: 100px;
    background: #eee;
    border-radius: 50%;
    overflow: hidden;
}

.zbd_warp .zbd_portrait a img {
    width: 100%;
    height: 100%;
}

.zbd_warp .zbd_name {
    font-size: 16px;
    color: #34495e;
    font-weight: bold;
    margin-top: 5px;
    padding: 0 5px;
}

.zbd_warp .zbd_name i {
    color: #3996db;
    font-size: 14px;
    display: inline-block;
}

.zbd_warp .zbd_name i.icon-recommendation_designer {
    color: #e74c3c;
}

/*.zbd_warp .zbd_name a{margin-left:14px; }*/
.zbd_warp .zbd_name a:hover {
    color: #34495e;
}

.zbd_warp .zbd_introduce {
    font-size: 13px;
    color: #b4bbc0;
    width: 180px; /*height: 20px;*/
    overflow-y: hidden;
    overflow-x: hidden;
    padding: 0 20px 0 20px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.zbd_warp .zbd_introduce a:hover {
    color: #b4bbc0;
}

.zbd_warp .zbd_medal {
    margin-top: 7px;
}

.zbd_warp .zbd_medal img {
    width: 27px;
    height: 27px;
}

.zbd_warp .zbd_foot {
    position: absolute;
    bottom: 0;
    left: 0;
}

.zbd_warp .zbd_foot a {
    display: block;
    width: 49.7%;
    height: 55px;
    border: 1px solid #eff3f5;
    border-left: none;
    border-bottom: none;
    background-color: #f8f8f8;
    text-align: center;
}

.zbd_warp .zbd_foot .zbd_right {
    border-right: none;
}

.zbd_warp .zbd_foot a b {
    margin-top: -2px;
    overflow: hidden;
    display: block;
    color: #34495e;
    font-size: 20px;
    font-weight: bold;
    width: 109.5px;
    text-align: center;
}

.zbd_warp .zbd_foot a em {
    color: #acbbc6;
    font-size: 12px;
    width: 109.5px;
    display: block;
    padding-top: 5px;
    text-align: center;
}

/*加关注*/
.zbd_focus {
    display: inline-block;
    width: 38px;
    height: 38px;
    position: absolute;
    left: 50%;
    margin-left: -19px;
    bottom: 36px;
    z-index: 6;
    text-align: center;
    line-height: 38px;
}

.z_green:before {
    color: #1abc9c !important;
}

/*关注*/
.z_red:before {
    color: #e74c3c !important;
}

/*取消关注*/
.z_orange:before {
    color: #e67e22 !important;
}

/*互相关注*/
.z_blue:before {
    color: #3498db !important;
}

/*加关注*/
.zbd_focus .iconfont {
    display: block;
    height: 42px;
    width: 42px;
    line-height: 42px;
    position: relative
}

.zbd_focus .iconfont:before {
    content: "\e728";
    font-size: 42px;
    line-height: 42px;
    color: #3498db;
}

.zbd_focus .icon-add-bold, .zbd_focus .icon-ok-sign, .zbd_focus .icon-relating-bold, .zbd_focus .icon-close-bold {
    color: #fff;
    font-size: 15px;
    position: relative;
    bottom: 52px;
    z-index: 10;
}

.zbd_focus .icon-add-bold, .zbd_focus .icon-ok-sign, .zbd_focus .icon-relating-bold, .zbd_focus .icon-close-bold {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -7.5px;
    margin-top: -7.5px;
}

/*点赞评论*/
.zbd_comments {
    width: 220px;
    height: 50px;
    margin-top: 10px;
    background-color: #fff;
    box-shadow: 0 0 3px rgba(0, 0, 0, .1);
}

.zbd_comments a {
    display: block;
    width: 49.7%;
    background-color: #fff;
    text-align: center;
    color: #acbbc6;
    font-size: 12px;
    border-bottom: 1px solid #fff
}

/*         .zbd_comments .zbd_two:hover{color:#34495e;}*/
.zbd_comments a em {
    color: #34495e;
}

.zbd_comments .zbd {
    color: #34495e;
}

.zbd_comments .zbd em {
    font-weight: bold;
}

.zbd_comments a em {
    margin-top: -2px;
    overflow: hidden;
    font-size: 16px;
    height: 20px;
    width: 99%;
    display: block;
}

.zbd_comments a b {
    width: 109.5px;
    display: block;
    padding-top: 5px
}

.zbd_comments .zbd_one {
    height: 49px;
    border-right: 1px solid #eff3f5;
    position: relative;
    z-index: 6;
}

.zbd_comments .zbd_one i {
    display: inline-block;
    *display: inline;
    *zoom: 1;
}

.zbd_txt::-webkit-input-placeholder {
    font-size: 14px;
}

.zbd_txt::-moz-input-placeholder {
    font-size: 14px;
}

/* .zbd_comments .zbd_one:before {content: "";position: absolute;left: -12px;top: 15px;border: solid transparent;border-right-color: #fff;border-width: 10px 12px 10px 0px;z-index: 5;}*/
/*小三角*/
.arrow-shadow {
    position: absolute;
    top: 15px;
    left: -5px;
    z-index: 3;
    background-color: #fff;
    width: 20px;
    height: 20px;
    box-shadow: 0 0 3px rgba(0, 0, 0, .1);
    transform: rotate(45deg);
    -ms-transform: rotate(45deg); /* IE 9 */
    -moz-transform: rotate(45deg); /* Firefox */
    -webkit-transform: rotate(45deg); /* Safari 和 Chrome */
    -o-transform: rotate(45deg);
}

.zbd_write {
    height: 150px;
    width: 220px;
    background-color: #fff;
    display: none;
    box-shadow: 0 3px 3px rgba(0, 0, 0, .1);
}

.zbd_write .zbd_txt {
    width: 200px;
    height: 90px;
    border: none;
    padding: 10px;
}

.zbd_write .zbd_txt:focus {
    box-shadow: none;
}

.zbd_write .zbd_btn {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 220px;
    height: 40px;
    text-align: center;
    color: #fff;
    background-color: #3498db;
    font-size: 14px;
}

/*评论最底部*/
.zbd_item {
    margin-bottom: 30px;
}

/*
 *
 * 20160214 详情右侧修改
 *
 */
.zbd_center .rele .img {
    width: 220px;
    height: 165px;
    overflow: hidden;
}

.zbd_center .rele .img > a {
    display: block;
    position: relative;
    width: 220px;
    height: 165px;
}

.zbd_center .rele .img > a img {
    width: 100%;
    height: 100%;
}

.zbd_center .rele .img > a .h-aside-show {
    text-align: center;
    display: table;
    width: 186px;
    height: 100%;
    padding: 0 17px;
}

.zbd_center .rele .img > a .h-aside-show p {
    display: table-cell;
    vertical-align: middle;
    width: 186px;
    height: 84px;
    text-align: center;
    color: #fff;
    font-size: 18px;
    overflow: hidden;
}

.zbd_center .rele .img > a:hover .h-aside-show {
    opacity: 1;
    visibility: visible;
}

/* 文章列表*/
.zbd_center .article {
}

.zbd_center .article h3 {
    margin-top: 15px;
}

.zbd_center .article h3 em {
    cursor: pointer;
    color: #3498db;
    font-size: 12px;
}

.zbd_center .article h3 em i {
    font-size: 14px;
    color: #3498db;
    padding-right: 5px;
    height: 26px;
    line-height: 26px;
}

.zbd_center .article .cont {
    box-shadow: 0 0 3px rgba(0, 0, 0, .1);
}

.zbd_center .article .cont .top {
    width: 205px;
    background: #fff;
    border-bottom: 1px solid #eff3f5;
    padding: 10px 0 10px 15px;
}

.zbd_center .article .cont .top .img {
    margin-top: 4px;
    width: 70px;
    height: 52px;
    overflow: hidden;
    margin-right: 10px;
}

.zbd_center .article .cont .top .img img {
    width: 100%;
    height: 100%;
}

.zbd_center .article .cont .top .tit .h1 {
    font-size: 12px;
    color: #2c3e50;
    width: 110px;
    height: 32px;
    overflow: hidden;
    line-height: 1.5;
    padding-bottom: 7px;
}

.zbd_center .article .cont .top .tit .time {
    color: #2c3e50;
    opacity: 0.5;
    font-size: 12px;
}

.zbd_center .article .cont .down {
    background: #f8f8f8;
    padding: 10px 10px 3px 15px;
}

.zbd_center .article .cont .down > ul > li {
    padding-bottom: 10px;
}

.zbd_center .article .cont .down > ul > li > i {
    color: #2c3e50;
    font-size: 12px;
}

.zbd_center .article .cont .down > ul > li > a {
    color: #2c3e50;
    font-size: 12px;
    margin-left: 5px;
    width: 175px;
}

.zbd_center .article .cont .down > ul > li:hover > i {
    color: #3498db;
}

.zbd_center .article .cont .down > ul > li:hover > a {
    color: #3498db;
    text-decoration: underline;
}

/*
 *
 * 20160128 推荐设计师修改
 *
 */
.hmember {
    margin-left: -20px;
    margin-top: 20px;
}

.hmember li {
    float: left;
    width: 580px;
    margin-left: 20px;
}

.hmember .cover {
    display: block;
    width: 280px;
    height: 210px;
}

.hmember .info {
    width: 270px;
    height: 183px;
    padding: 27px 30px 0 0;
    background-color: #fff;
}

.hmember .info .ribbon {
    position: absolute;
    right: 5px;
    top: -5px;
    background: url("../img/ribbon_blue.svg") no-repeat center center;
    background-size: 55px;
    width: 35px;
    height: 55px;
}

.hmember .author {
    width: 240px;
    padding-left: 30px;
}

.hmember .avatar {
    display: block;
    width: 100px;
    height: 100px;
    margin-right: 20px;
}

.hmember .intro {
    display: table;
}

.hmember .intro > div {
    display: table-cell;
    vertical-align: middle;
    height: 100px;
}

.hmember .intro .name {
    font-size: 16px;
    color: #34495e;
    line-height: 24px;
    width: 120px;
}

.hmember .intro .txt {
    font-size: 14px;
    color: #b4bbc0;
    line-height: 22px;
    width: 120px;
}

.hmember .intro .medal {
    width: 120px;
}

.hmember .num {
    width: 300px;
    background-color: #f8f8f8;
    margin-top: 27px;
    height: 55px;
    border-top: 1px solid #eff3f5;
}

.hmember .num .item {
    float: left;
    width: 99px;
    border-left: 1px solid #eff3f5;
    text-align: center;
}

.hmember .num .item span {
    display: block;
    padding-top: 5px;
    font-size: 12px;
    color: #acbbc6;
    line-height: 18px;
}

.hmember .num .item strong {
    display: block;
    padding-bottom: 3px;
    font-size: 20px;
    color: #34495e;
    line-height: 30px;
    font-weight: bold;
}

/*认证*/
/*认证成功*/
.cert {
    color: #3996db;
    font-size: 12px;
}

.cert1 {
    color: #3996db;
    font-size: 14px;
}

.cert1 {
    color: #3996db;
    font-size: 16px;
}

.mar2 {
    margin-left: 2px;
}

/*已具备条件，但是未认证成功 有一个推荐作品 灰色*/
.certg {
    color: #b8c4ce !important;
}

/*已具备条件，但是未认证成功 有一个推荐作品*/
.rote180 {
    transform: rotate(180deg);
    -ms-transform: rotate(180deg); /* Internet Explorer */
    -moz-transform: rotate(180deg); /* Firefox */
    -webkit-transform: rotate(180deg); /* Safari 和 Chrome */
    -o-transform: rotate(180deg); /* Opera */
    display: inline-block;
}


/*支付弹出框*/


.modal-pay {
    position: relative;
    width: 425px;
    margin: 0 auto;
    z-index: 101;
    padding: 40px 60px;
    background-color: #fff;
}

.modal-pay .icon-close {
    position: absolute;
    top: 15px;
    right: 15px;
    font-size: 28px;
    color: #e4e9ed;
    cursor: pointer;
}

.modal-pay p:nth-of-type(1) {
    font-size: 20px;
    margin-left: 2px;
    color: #000000;
    font-weight: bold;
}

.modal-pay p:nth-of-type(2) {
    font-size: 16px;
    margin-left: 2px;
    color: #95a5a6;
}

.modal-pay p:nth-of-type(3) {
    font-size: 14px;
    margin-left: 2px;
    color: #95a5a6;
    text-align: center;
}

.modal-pay .mtm {
    padding: 26px 0 22px 0;
}

#p-title .icon-shenqing {
    color: #e74c3c;
}

@media screen and (max-width: 1440px) {
    .shengdan {
        background: none !important;
    }
}

.fixed-share {
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 10;
    background-color: rgba(0, 0, 0, .7);
    display: flex;
    align-items: center;
    justify-content: center;
}

.fixed-share .share-img {
    width: 700px;
    height: 500px;
    background-color: white;
    border-radius: 5px;
    position: relative;
}

.fixed-share .share-img .canvas {
    width: 280px;
    height: 430px;
    display: block;
    border: 1px solid #000000;
    margin-top: 35px;
    margin-left: 100px;
    margin-right: 100px;
}

.fixed-share .share-img div.z {
    width: 140px;
    margin-top: 95px;
    text-align: center;
    color: black;
    font-weight: bold;
}

#code-share {
    width: 140px;
    height: 140px;
    margin-bottom: 15px;
}

.fixed-share .share-img .close-share {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    background: url("../../img/close.png") no-repeat center;
    right: -30px;
    top: 0;
}

.fixed-share .loading {
    display: block;
    width: 200px;
    height: 200px;
    margin-left: 250px;
    margin-top: 150px;
    border: none;
    background-color: white !important;
}

.machine {
    position: fixed;
    left: 50%;
    z-index: 5;
    margin-left: 575px;
    bottom: 200px;
    width: 164px;
    height: 99px;
    display: none;
}

.machine img {
    position: absolute;
    bottom: 0;
    z-index: 5;
}

.machine .ma {
    width: 57px;
    height: auto;
    bottom: -300px;
    z-index: 8;
}

.machine .ma.show {
    bottom: 15px;
    -webkit-animation: show .5s alternate ease-in-out;
    -moz-animation: show .5s alternate ease-in-out;
    -o-animation: show .5s alternate ease-in-out;
    -ms-animation: show .5s alternate ease-in-out;
    animation: show .5s alternate ease-in-out;
}

@keyframes show {
    0% {
        bottom: -300px;
    }
    90% {
        bottom: 25px;
    }
    100% {
        bottom: 15px;
    }
}

.machine .ope {
    height: auto;
    width: 87px;
    z-index: 2;
    left: 25px;
    bottom: -300px;
}

.machine:hover {
    display: block;
}

.machine:hover img:not(.light) {
    bottom: 0 !important;
}

.machine:hover .light {
    display: block;
}

.machine .ma.hidden {
    -webkit-animation: hide1 .5s alternate ease-in-out;
    -moz-animation: hide1 .5s alternate ease-in-out;
    -o-animation: hide1 .5s alternate ease-in-out;
    -ms-animation: hide1 .5s alternate ease-in-out;
    animation: hide1 .5s alternate ease-in-out;
    bottom: -300px;
}

.machine .ope.show {
    -webkit-animation: show1 1s alternate ease-in-out;
    -moz-animation: show1 1s alternate ease-in-out;
    -o-animation: show1 1s alternate ease-in-out;
    -ms-animation: show1 1s alternate ease-in-out;
    animation: show1 1s alternate ease-in-out;
    bottom: 0;
}

.machine .ope.hidden {
    -webkit-animation: hide 1s alternate ease-in-out;
    -moz-animation: hide 1s alternate ease-in-out;
    -o-animation: hide 1s alternate ease-in-out;
    -ms-animation: hide 1s alternate ease-in-out;
    animation: hide 1s alternate ease-in-out;
    bottom: -300px;
}

@keyframes show1 {
    0% {
        bottom: -300px;
    }
    90% {
        bottom: 10px;
    }
    100% {
        bottom: 0;
    }
}

@keyframes hide {
    0% {
        bottom: 0;
    }
    10% {
        bottom: 10px;
    }
    100% {
        bottom: -300px;
    }
}

@keyframes hide1 {
    0% {
        bottom: 15px;
    }
    10% {
        bottom: 25px;
    }
    100% {
        bottom: -300px;
    }
}

.machine .light {
    display: none;
    left: 32px;
    bottom: 30px;
    width: 63px;
    height: auto;
    -webkit-animation: show3 1s infinite alternate ease-in-out;
    -moz-animation: show3 1s infinite alternate ease-in-out;
    -o-animation: show3 1s infinite alternate ease-in-out;
    -ms-animation: show3 1s infinite alternate ease-in-out;
    animation: show3 1s infinite alternate ease-in-out;
}

@keyframes show3 {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}


.main_background {
    width: 100%;
    height: 661px;
    background-image: url(../../img/main_background.jpg);
    /*background-size: cover;*/
    position: absolute;
    left: 0;
    top: 100vh;
    z-index: 0;
    background-repeat: repeat-x;
    animation: animate-cloud 40s linear infinite;
}

@keyframes animate-cloud {
    from {
        background-position: 0 100%;
    }
    to {
        background-position: 100vw 100%;
    }
}


/*首页VR播放器*/
.start_vr_view {
    width: 100%;
    height: 100vh;
    background: #000;
    position: relative;
}

.vr_banner {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
}

.cover_view {
    width: 600px;
    height: fit-content;
    position: absolute;
    z-index: 2;
    top: 50%;
    left: 50%;
    padding: 20px 0;
    transform: translateX(-50%) translateY(-75%);
    background: rgba(0, 0, 0, 0.5);
}

.button {
    background: #0288d1;
    border-radius: 10px;
    margin: 20px auto;
    font-size: 15pt;
    color: #ffffff;
    padding: 0 20px;
    line-height: 35pt;
    height: 35pt;
    display: block;
    border: 0;
}


.blurred_view {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 3;
    filter: blur(20px);
}


.modle_title_box {
    width: 100%;
    text-align: center;
    position: relative;
    z-index: 9;
    padding: 40px 0 10px 0;
    margin: 0 0 30px 0;
}

.model_title {
    font-size: 30pt;
}

.model_sub_title {
    font-size: 12pt;
}

.model_title_line {
    font-size: 30pt;
    position: relative;
    width: 600px;
    margin: 0 auto 40px auto;
    height: fit-content;
}

.model_title_line .line {
    height: 1px;
    top: 60%;
    width: 100%;
    background: #353535;
    position: absolute;
    z-index: 9;
}

.model_title_line .text {
    background: #eff3f5;
    position: absolute;
    z-index: 9;
    line-height: 100%;
    width: 250px;
    left: 50%;
    transform: translateX(-50%) translateY(-50%);
}


.white_text {
    color: #fff;
}


.map_view {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 700px;
    background: url(../../image/background/vr_watch_background.jpg);
    background-size: cover;
}

.map_background {
    position: absolute;
    z-index: 0;
    width: 100%;
    top: 0;
    left: 0;
    height: fit-content;
}

.map_view_content {
    width: 1200px;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    height: 100%;
}


.left_map {
    width: 50%;
    height: 100%;
    float: left;
    display: block;
}

.right_info {
    width: 50%;
    height: 100%;
    float: left;
}


.right_info_logo {
    height: fit-content;
    display: block;
    margin: 150px auto 0 auto;
}

.right_info_tips {
    width: 254px;
    height: 244px;
    display: block;
    margin: 20px auto 0 auto;
}


/*公司介绍*/
.company_information {
    width: 100%;
    overflow: hidden;
    background-image: url("../../image/background/about_company_background.jpg");
    background-size: cover;

    color: #fff;
    position: relative;
    z-index: 9;
    padding-bottom: 50px;
    font-size: 12pt;
}


.small_box {
    width: 1200px;
    margin: 0 auto;
}

.left_infomation_content {
    width: 680px;
    float: left;
}

.right_infomation_number {
    width: 500px;
    float: left;
}

.number_item {
    width: 250px;
    float: left;
    text-align: center;
    color: #3babf5;
}

.number {
    font-size: 50pt;
    font-weight: bold;
}


.news_model_title {
    font-size: 15pt;
    font-weight: bold;
    color: #1d57a9;
    line-height: 100px;
}


.about_us {
    width: 100%;
    background-image: url("../../image/background/about_us_new_background.jpg");
    background-size: cover;
    background-repeat: repeat-x;
    animation: animate-cloud 40s linear infinite;
    /*padding-bottom: 50px;*/
}

@keyframes animate-cloud {
    from {
        background-position: 0 100%;
    }
    to {
        background-position: 1800px 100%;
    }
}

.about_us_item {
    width: 25%;
    height: 200px;
    float: left;
}

.about_us_item img {
    width: 100px;
    height: 100px;
    display: block;
    margin: 20px auto;
}

.about_us_item p {
    text-align: center;
    color: #fff;
    font-size: 15pt;
}

.about_us_item span {
    height: 0;
    width: 80%;
    display: block;
    overflow: hidden;
    text-align: center;
    color: #fff;
    font-size: 10pt;
    margin: 0 auto 20px auto;
}


.about_us_item:hover {
    background: #2f5ea2;
    animation:hidein 300ms ease-in-out;
}

.about_us_item:hover img {
    width: 50px;
    height: 50px;
    display: block;
    margin: 20px auto;
    animation:hover_img 300ms ease-in-out;
}

.about_us_item:hover p {
    text-align: center;
    color: #fff;
    font-size: 15pt;
}

.about_us_item:hover span {
    height: auto;
    width: 80%;
    display: block;
    overflow: hidden;
    text-align: center;
    color: #d9d9d9;
    font-size: 10pt;
    margin: 0 auto 20px auto;
}

@keyframes hover_img {
    from{
        width: 100px;
        height: 100px;
    }
    to{
        width: 50px;
        height: 50px;
    }
}

@keyframes hidein {
    from{
        background: unset;
    }
    to{
        background: #2f5ea2;
    }
}


.join_in {
    width: 100%;
    padding: 80px 0;
    background-image: url("../../image/background/join_us_big.jpg");
    background-size: cover;
    backgrpund-position: bottom;
    background-attachment: fixed;
}

.join_in img {
    width: 30px;
    height: 30px;
    display: block;
    margin: 0 auto;
}

.join_in p {
    color: #ffffff;
    text-align: center;
    font-size: 15pt;
    line-height: 50px;
}

.join_in p a {
    color: #fff;
}

.join_in_button {
    width: 460px;
    overflow: hidden;
    margin: 20px auto 0 auto;
}

.join_in_button a {
    font-size: 15pt;
    line-height: 40px;
    color: #ffffff;
    display: block;
    width: 200px;
    text-align: center;
    background: linear-gradient(to right, #2c82c9, #2f5ea2);
    float: left;
    border: 2px solid #069cd0;
    border-radius: 40px;
}

.join_in_button a:hover {
    background: #2f5ea2;
}
.join_in_button .no {
    background: rgba(0,0,0,0);
    border: 1px solid #ffffff;
}


.page_footer {
    width: 100%;
    background: #2f5ea2;
    color: #fff;
    padding: 40px 0;
    overflow: hidden;
}

.left_links {
    width: 50%;
    float: left;
}

.left_links p {
    color: #fff;
    font-size: 12pt;
    clear: both;
}

.left_links p a {
    color: #f8f8f8;
    margin: 0 30px 10px 0;
    float: left;
    display: block;
}

.left_links p a:hover {
    color: #d9d9d9;
}


.model_banner {
    width: 100%;
    height: 200px;
    color: #fff;
    font-size: 25pt;
}

.model_banner .title {
    width: 100%;
    text-align: center;
    line-height: 200px;
}


/*新版showcase*/
.showcase_item {
    width: 340px;
    height: 370px;
    float: left;
    margin-left: 30px;
    margin-right: 30px;
    margin-top: 20px;
    box-sizing: border-box;
}

.showcase_item .showcase_info {
    width: 100%;
    height: 60px;
    background: #fff;
}

.showcase_item .showcase_info .time {
    width: 60px;
    height: 60px;
    float: left;
    background: #8cb5e1;
    color: #fff;
}

.showcase_info .time span {
    width: 100%;
    text-align: center;
    display: block;
}

.showcase_info .title {
    width: 230px;
    float: left;
    text-align: right;
    line-height: 60px;
    margin-right: 20px;
    margin-left: 20px;
    height: 60px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.showcase_item .showcase_description {
    width: 300px;
    padding: 20px;
    background: #fff;
    overflow: hidden;
}

.showcase_description p {
    font-size: 10pt;
    line-height: 18px;
    height: 36px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    max-height: 46px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/*hover*/
.showcase_item:hover {
    border: 3px solid #2c82c9;
    height: 370px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    animation: showcase_hover 300ms ease-out;
}


.showcase_item:hover .showcase_info .time {
    width: 60px;
    height: 60px;
    float: left;
    background: #2c82c9;
    color: #fff;
}

.showcase_item:hover .showcase_description {
    width: 294px;
    padding: 20px;
    background: #fff;
    overflow: hidden;
}

@keyframes showcase_hover {
    from {
        border: none;
        box-shadow: none;
    }
    to {
        border: 3px solid #2c82c9;
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    }
}


/*新版map*/

.index_wdc {
    width: 100%;
    background-image: url("../../image/background/wdc_background.jpg");
    background-position: bottom;
    background-size: cover;
    height: 570px;
    padding-top: 100px;
}

.left_wdc_map{
    width: 70%;
    height:50vh;
    float: left;
    position: relative;
}

.classify_link{
    width: 87px;
    height: 87px;
    position: absolute;
    z-index: 2;
}

.classify_link:hover{
    transform: scale(1.2,1.2);
    animation: scare_link 100ms ease-in-out;
}

.classify_link .inline_circle{
    position: absolute;
    z-index: 1;
    width: 76px;
    height: 76px;
    left:5.5px;
    top: 5.5px;
}

.outline_circle{
    position: absolute;
    z-index: 2;
    width: 87px;
    height: 87px;
    left: 0;
    top: 0;
    animation: spin 20s linear 0s infinite normal;
}

.classify_link .circle_text{
    position: absolute;
    z-index: 3;
    width: 55px;
    height: 33px;
    left: 16px;
    top: 27px;
}

@keyframes spin {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}



.right_wdc_info{
    width: 30%;
    float: left;
    height: 50vh;
}

.wdc_model_button {
    height: 50px;
    display: block;
    margin: 15px auto;
}

.wdc_model_button:hover{
    transform: scale(1.2,1.2);
    animation: scare_link 100ms ease-in-out;
}

@keyframes scare_link {
    from {
        transform: scale(1,1);
    }
    to {
        transform: scale(1.2,1.2);
    }
}



input {outline:none;}
select {outline:none;}




/*关于*/
.about_main_content{
    width: 100%;
    height: 300px;
    padding: 100px 0 150px 0;
    background-image: url("../../image/background/about_main_background.jpg");
    background-size: cover;
    background-attachment: fixed;
    background-position: 0 0;
}

.wpn .main_title{
    font-size: 25pt;
    text-align: center;
}

.wpn .sub_title{
    font-size: 15pt;
    text-align: center;
    margin-top: 25px;
    margin-bottom: 50px;
}

.wpn .main_description{
    font-size: 12pt;
    margin-top: 25px;
    text-align: center;
    color: #fff;
}

.about_box{
    width: 100%;
    overflow: hidden;
}

.about_box .item{
    width: 160px;
    height: 160px;
    margin: 50px 70px ;
    float: left;
    background: url("/assets/image/background/quan.png") no-repeat center center;
    border-radius: 50%;
    color: #172252;
    font-size: 20pt;
    text-align: center;
    line-height: 160px;
    font-weight: normal;
}


.service_box{
    width: 100%;
    overflow: hidden;
}

.service_box .item{
    width: 240px;
    height: 240px;
    float: left;
    background: #fff;
    box-shadow: -7px 0 20px -9px rgba(0,0,0,0.2) inset;
}

.service_box .item img{
    width:150px;
    height: 150px;
    display: block;
    margin: 0 auto;

}

.service_box .item p {
    font-size: 15pt;
    width: 200px;
    margin: 0 auto;
    text-align: center;
    vertical-align:middle;
}


.about_team{
    width: 100%;
    background: url("/assets/image/background/aboutmidbg.jpg") no-repeat center top;
    padding: 100px 0;
}

.team_box{
    width: 100%;
    overflow: hidden;
    background: #fff;
}

.team_box .item{
    width: 280px;
    float: left;
    border: 1px solid #d9d9d9;
    box-sizing:border-box;
    margin: 10px;
}

.team_box .item img{
    width: 100px;
    height: 100px;
    display: block;
    margin: 20px auto 0 auto;
}

.team_box .item p{
    width: 250px;
    font-size: 15pt;
    text-align: center;
    margin: 20px auto;
}
.team_box .item span{
    display: block;
    background: #0083f7;
    color: #fff;
    text-align: center;
    padding: 20px;
    font-size: 12pt;
}



.video_box{
    background-image: url("../../image/background/ab_vid.jpg");
    background-size:cover;
    background-attachment: fixed;
    background-position: right;
    height: 260px;
    padding: 120px;
    text-align: center;
}
.video_box img{
    width: 100px;
    height: 100px;
    margin: 50px;
}

.video_box h1{
    font-size: 25pt;
}


.fixed_player{
    width: 100%;
    height: 100vh;
    background: rgba(0,0,0,0.7);
    position: fixed;
    z-index: 9999999;
    top: 0;
    left: 0;
}









.contact_banner{
    width: 100%;
    display: block;
}

.contact_info{
    width: 100%;
    overflow: hidden;
    height: 670px;
}

.contact_info .left{
    width: 50%;
    float: left;
    height: 100%;
    background: #fff;
}

.contact_info .right{
    width: 50%;
    float: left;
}





.message{
    background: #000d16;
    padding: 50px 0;
}

.message h1{
    font-size: 15pt;
    color: #7c7c7c;
    background: #0b0b0b;
    width: fit-content;
    margin: 0 auto;
    padding: 10px 10px 10px 30px;
    letter-spacing:20px;
    text-align: center;
}


.message .wpn .input{
    width: 580px;
    margin: 10px;
    border: 1px solid #cdc9d6;
    border-radius: 10px;
    float: left;
    box-sizing: border-box;
    overflow: hidden;
}

.message .wpn .input img{
    width:20px;
    height: 20px;
    float: left;
    margin: 10px;
}

.message .wpn .input input{
    height: 40px;
    line-height: 40px;
    background: rgba(0,0,0,0);
    border: none;
    width: 530px;
    color: #fff;
}
.message .wpn .textarea{
    display: block;
    clear: both;
    background: rgba(0,0,0,0);
    border: 1px solid #cdc9d6;
    border-radius:10px;
    margin:30px auto 10px auto;
    width: 1140px;
    padding: 20px;
    min-height: 150px;
    color: #fff;
}

.submit_button{
    font-size: 15pt;
    line-height: 40px;
    color: #ffffff;
    display: block;
    width: 200px;
    text-align: center;
    background: linear-gradient(to right, #2c82c9, #2f5ea2);
    margin: 0 auto;
    border: 2px solid #069cd0;
    border-radius: 40px;
    cursor: pointer;
}


/*评论*/
.review_input{
    height: 40px;
    border: 1px solid #888888;
    margin: 0 0 20px 0;
    overflow: hidden;
    border-radius:10px;
}

.review_input img {
    width: 20px;
    height: 20px;
    margin: 10px;
    /*background: #000;*/
    float: left;
}

.review_input input {
    width: 300px;
    height: 40px;
    line-height: 40px;
    float: left;
    border: none;
    background: unset;
    outline:none;
}
.review_input textarea {
    width: 100%;
    height: 100px;
    line-height: 40px;
    padding: 20px;
    float: left;
    border: none;
    background: unset;
    outline:none;
}

.publish_review_button{
    border: 1px solid #2f5ea2;
    color: #ffffff;
    background: #2f5ea2;
    font-size: 12pt;
    text-align: center;
    width: 240px;
    height: 40px;
    line-height: 40px;
    margin: 0 0 40px 40px;
    cursor: pointer;
    border-radius:10px;
}

.publish_review_button:hover{
    border:1px solid #2f5ea2;
    color: #2f5ea2;
    background: #fff;
    border-radius:0;
}

.review_item{
    width: 1120px;
    margin: 0 auto 20px auto;
    overflow: hidden;
}

.review_item img {
    width: 50px;
    height: 50px;
    /*border-radius: 50%;*/
    display: block;
    float: left;
    margin: 10px 20px 0 0;
}

.review_item .review_content{
    background: #fff;
    float: left;
    width: 1010px;
    padding: 20px;
}

.review_item .review_content span{
    font-size: 12pt;
    font-weight: bold;
    color: #888;
    line-height: 100%;
    display: block;
    margin-bottom: 10px;
}



#WebGL-output{
    width:100%;
    height: 400px;
    position: absolute;
    z-index: 0;
}