@charset "UTF-8";

/**
 *
 * @home.css
 * @author zhangxinxu
 * @create 17-12-14
 * @description 主页相关样式
**/

/**
 * 如果你项目需要使用原生的CSS变量，
 * 请写在 ./common/variable.css中
 * 这里CSS变量会重复引入，且不会保留（通过设置!;）
 * 这里适合需要兼容IE浏览器的项目
*/

/**
 *
 * @wg.css
 * @author zhangxinxu
 * @create 17-12-14
 * @description 子页2相关样式
**/
.wg-content {
    padding-top: 64px;
    width: 100%;
    min-width: 1032px;
    background-color: #f1f2f5;
    min-height: calc(100vh - 132px);
}

.wg-content-inner {
    width: 1032px;
    margin: 0 auto;
    padding: 24px 0 48px;
    overflow: hidden;
    position: relative;
    color: rgba(33, 32, 44, 0.9);
}

.wg-content-left {
    width: 680px;
}

.wg-banner {
    position: relative;
    overflow: hidden;
}

.wg-banner-inner {
    height: 204px;
}

.wg-banner-pic-outer {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
}

.wg-banner-pic-outer:not(:first-child) {
    left: 680px;
}

.wg-banner-pic-outer:last-child {
    left: -680px;
}

.wg-banner-pic {
    width: 100%;
    height: 100%;
    border-radius: 8px;
}

.wg-banner-point-outer {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: 8px;
    font-size: 0;
    z-index: 10;
}

.wg-banner-point {
    display: inline-block;
    width: 20px;
    height: 20px;
    position: relative;
}

.wg-banner-point::before {
    content: '';
    width: 8px;
    height: 8px;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
    background: #ffffff;
    background-size: 100% 100%;
    border-radius: 50%;
    opacity: .4;
}

.wg-banner-point.active::before {
    opacity: 1;
}

.wg-round-point::before {
    background-size: 100% 100%;
    background: #3A8EFF;
    opacity: .16;
}

.wg-round-point.active::before {
    opacity: 1;
}

.wg-arrow {
    position: absolute;
    width: 32px;
    height: 32px;
    top: 50%;
    transform: translate(0, -50%);
    z-index: 10;
}

.wg-left-arrow {
    background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='32' height='32' rx='16' fill='%23fff' fill-opacity='.92'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.03 10.47a.75.75 0 0 0-1.06 0l-5 5a.75.75 0 0 0 0 1.06l.176-.176-.176.176 5 5a.75.75 0 1 0 1.06-1.06L14.56 16l4.47-4.47a.75.75 0 0 0 0-1.06z' fill='%233A8EFF'/%3E%3C/svg%3E") no-repeat center;
    left: 12px;
}

.wg-right-arrow {
    background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='32' height='32' rx='16' fill='%23fff' fill-opacity='.92'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.97 11.53a.75.75 0 1 1 1.06-1.06l5 5a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 1 1-1.06-1.06L17.44 16l-4.47-4.47z' fill='%233A8EFF'/%3E%3C/svg%3E") no-repeat center;
    right: 12px;
}

.wg-content-each {
    width: 100%;
    background: #ffffff;
    border-radius: 8px;
    margin-top: 24px;
    overflow: hidden;
}

.wg-title-outer {
    height: 68px;
    padding: 0 24px;
    border-bottom: 1px solid #F1F2F5;
    overflow: hidden;
    font-size: 0;
}

.wg-title {
    font-size: 20px;
    line-height: 68px;
    font-weight: 500;
    color: rgba(33, 32, 44, 0.9);
}

.wg-tab {
    float: right;
    margin-top: 23px;
}

.wg-tab-each {
    font-size: 14px;
    padding: 5px 16px;
    border-radius: 16px;
    color: rgba(33, 32, 44, 0.55);
}

.wg-tab-each:hover {
    color: #3A8EFF;
}

.wg-tab-each.active {
    background-color: rgba(58, 142, 255, 0.2);
    color: #3A8EFF;
    font-weight: 600;
}

.wg-content-each-down {
    padding: 24px;
    display: none;
}

.wg-content-each-down.active {
    display: block;
}

.wg-round-outer {
    font-size: 0;
    position: relative;
}

.wg-round {
    position: relative;
    width: 182px;
    height: 128px;
    float: left;
    margin-right: 24px;
}

.wg-round-pic {
    width: 96px;
    position: absolute;
    left: 90px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
}

.wg-round-info-each {
    padding-top: 10px;
    display: none;
}

.wg-round-info-each.active {
    display: block;
    margin-left: 206px;
}

.wg-round-info-each:hover .wg-book-title {
    color: #3A8EFF;
}

.wg-book-title,
.wg-book-card-title {
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 6px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: rgba(33, 32, 44, 0.9);
}

.wg-book-desc-outer {
    height: 46px;
    margin-bottom: 8px;
}

.wg-contact-each .wg-book-desc-outer {
    margin-bottom: 0;
}

.wg-book-card-info {
    display: block;
    margin-left: 100px;
}

.wg-book-card:hover .wg-book-card-title {
    color: #3A8EFF;
}

.wg-book-desc,
.wg-book-card-desc {
    font-size: 14px;
    color: rgba(33, 32, 44, 0.55);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 22px;
}

.wg-ie.wg-book-desc,
.wg-ie.wg-book-card-desc {
    width: 204px;
    height: 44px;
    position: relative;
}

.wg-ie.wg-book-desc {
    width: 426px;
}

.wg-ie.wg-book-desc::after,
.wg-ie.wg-book-card-desc::after,
.wg-ie.wg-editor-info::after {
    content: '...';
    position: absolute;
    bottom: 0;
    right: 0;
    padding-left: .2em;
    background: linear-gradient(to right, #fff 80%, transparent);
}

.wg-book-tab {
    font-size: 12px;
    color: rgba(33, 32, 44, 0.55);
    padding: 3px 12px;
    background: #F1F2F5;
    border-radius: 12px;
    margin-right: 6px;
    display: inline-block;
    margin-bottom: 6px;
}

.wg-book-tab:last-child {
    margin-right: 0;
}

.wg-book-tab-outer {
    height: 28px;
    overflow: hidden;
    position: absolute;
    left: 100px;
}

.wg-book-tab-outer-round {
    left: 206px;
}

.wg-round-point-outer {
    margin-top: 48px;
    width: 182px;
    text-align: center;
}

.wg-book-card-outer {
    overflow: hidden;
}

.wg-book-card {
    font-size: 0;
    width: 304px;
    margin-right: 24px;
    margin-top: 36px;
    float: left;
    position: relative;
}

.wg-book-card-pic {
    width: 84px;
    float: left;
    margin-right: 16px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12);
    ;
}

.wg-book-card:nth-child(2n) {
    margin-right: 0;
}

.wg-book-card-mt {
    margin-top: 28px;
}

.wg-pic {
    width: 100%;
}

.wg-content-right {
    float: right;
    width: 328px;
}

.wg-welfare {
    margin-top: 0;
}

.wg-editor-each {
    padding: 16px 24px;
    overflow: hidden;
    border-bottom: 1px solid #F1F2F5;
}

.wg-editor-each:last-child {
    border-bottom: none;
}

.wg-editor-pic {
    float: right;
    width: 64px;
    height: 64px;
    background-color: #F1F2F5;
}

.wg-editor-info {
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-right: 16px;
    color: rgba(33, 32, 44, 0.9);
}

.wg-ie.wg-editor-info {
    width: 200px;
    height: 48px;
    position: relative;
}

.wg-editor-info:hover {
    color: #3A8EFF;
}

.wg-editor-info-outer {
    display: table-cell;
    vertical-align: middle;
    height: 64px;
}

.wg-experience-outer {
    position: relative;
}

.wg-experience-core {
    position: absolute;
    top: 0;
    width: 100%;
    padding: 21px 56px 21px 24px;
    background: #FFFFFF;
    opacity: .92;
    overflow: hidden;
    box-sizing: border-box;
    display: none;
    transition: all 1s;
}

.wg-experience-outer:hover .wg-experience-core {
    display: block;
}

.wg-core {
    width: 120px;
    float: left;
    margin-right: 16px;
}

.wg-experience-info {
    height: 120px;
    display: table-cell;
    vertical-align: middle;
    color: rgba(33, 32, 44, 0.9);
}

.wg-contact-outer {
    padding: 24px;
}

.wg-contact-each {
    overflow: hidden;
    margin-bottom: 24px;
}

.wg-contact-each:last-child {
    margin-bottom: 0;
}

.wg-core-contact {
    width: 80px;
}

.wg-contact-each-info {
    font-size: 14px;
    color: rgba(33, 32, 44, 0.55);
    line-height: 22px;
}

.wg-welfare-left {
    width: 856px;
}

.wg-welfare-content {
    background-color: #ffffff;
    padding: 36px 24px;
    border-radius: 8px;
    color: rgba(33, 32, 44, 0.9);
    font-size: 16px;
}

.wg-welfare-title {
    font-size: 32px;
    font-weight: 600;
}

.wg-welfare-p {
    margin-top: 16px;
    margin-bottom: 16px;
    line-height: 28px;
    text-indent: 2em;
}

.wg-welfare-p-left {
    text-indent: unset;
    font-weight: bold;
}

.wg-welfare-a {
    margin-left: 2em;
    color: #B8061A;
}

.wg-welfare-a-inline {
    margin-left: 0;
}

.wg-welfare-a:hover {
    color: #FF7888;
}

.wg-welfare-subtitle {
    font-size: 24px;
    font-weight: 500;
}

.wg-last-p {
    margin-bottom: 24px;
}

.wg-table {
    width: 100%;
    margin: 24px 0;
}

.wg-table thead td {
    background: #F1F2F5;
    border: 1px solid #E7E7E7;
    padding: 10px 12px;
}

.wg-table thead td:not(:first-child) {
    border-left: none;
}

.wg-table tbody td {
    border: 1px solid #E7E7E7;
    padding: 10px 12px;
    border-top: none;
    border-left: none;
}

.wg-table tbody tr td:first-child {
    background: #F1F2F5;
    border-left: 1px solid #E7E7E7;
}

.wg-cooperate-outer {
    overflow: hidden;
}

.wg-cooperate-pic {
    float: left;
    width: 292px;
    margin-top: 16px;
    margin-right: 16px;
    border-radius: 8px;
}

.wg-cooperate-pic:nth-child(2n) {
    margin-right: 0;
}

.wg-nav-outer {
    position: fixed;
    width: 152px;
    top: 124px;
    margin-left: 880px;
    border-left: 1px solid rgba(33, 32, 44, 0.16);
    ;
}

.wg-nav-outer a {
    display: block;
    font-size: 14px;
    padding: 5px 10px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}

.wg-nav-outer a.active {
    color: #3A8EFF;
    border-left: 3px solid;
    margin-left: -2px;
    padding-left: 9px;
}

.wg-nav-outer a:hover {
    color: #3A8EFF;
}

.wg-back {
    position: absolute;
    left: 44px;
    top: 23px;
    color: #3A8EFF;
}

.wg-back::before {
    content: '';
    width: 16px;
    height: 16px;
    background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.854 2.646a.5.5 0 0 1 0 .708L6.207 8l4.647 4.646a.5.5 0 0 1-.708.708l-5-5a.5.5 0 0 1 0-.708l5-5a.5.5 0 0 1 .708 0z' fill='%233A8EFF'/%3E%3C/svg%3E") no-repeat center;
    background-size: 100%;
    position: absolute;
    left: -20px;
    top: 4px;
}

.wg-content-error {
    text-align: center;
    display: table;
}

.wg-content-error .wg-content-inner {
    display: table-cell;
    vertical-align: middle;
}

.wg-content-error-pic {
    width: 240px;
    margin-bottom: 8px;
}

.wg-content-error-state {
    font-weight: 500;
    font-size: 18px;
    line-height: 26px;
    color: rgba(33, 32, 44, 0.9);
}

.wg-content-error-info {
    font-size: 14px;
    color: rgba(33, 32, 44, 0.55);
    margin-top: 4px;
    margin-bottom: 16px;
}

.dn {
    display: none;
}

/* 作者福利链接 */
.wg-welfare {
    height: 204px;
    display: block;
    background: url(../img/zjfl.png);
    background-size: 100%;
}
/* 达人精选页的链接 */
.wg-rank-link{
    height: 230px;
    display: block;
    background: url(../img/rankBanner.png);
    background-size: 100%;
}
/* 联系编辑的链接 */
.wg-us-link {
    height: 204px;
    display: block;
    background: url(../img/lxbj.png);
    background-size: 100%;
}

/* 主色红色 */
.wg-red .wg-tab-each.active {
    background-color: rgba(184, 6, 26, .1);
    color: #B8061A;
}

.wg-red .wg-tab-each:hover {
    color: #B8061A;
}

.wg-red .wg-round-point::before {
    background: #B8061A;
}

.wg-red .wg-editor-info:hover {
    color: #FF3A51;
}

.wg-red .wg-left-arrow {
    background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='32' height='32' rx='16' fill='%23fff' fill-opacity='.92'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M19.03 10.47a.75.75 0 0 0-1.06 0l-5 5a.75.75 0 0 0 0 1.06l.176-.176-.176.176 5 5a.75.75 0 1 0 1.06-1.06L14.56 16l4.47-4.47a.75.75 0 0 0 0-1.06z' fill='%23B8061A'/%3E%3C/svg%3E") no-repeat center;
}

.wg-red .wg-right-arrow {
    background: url("data:image/svg+xml,%3Csvg width='32' height='32' viewBox='0 0 32 32' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='32' height='32' rx='16' fill='%23fff' fill-opacity='.92'/%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M12.97 11.53a.75.75 0 1 1 1.06-1.06l5 5a.75.75 0 0 1 0 1.06l-5 5a.75.75 0 1 1-1.06-1.06L17.44 16l-4.47-4.47z' fill='%23B8061A'/%3E%3C/svg%3E") no-repeat center;
}

.wg-red .wg-nav-outer a:hover,
.wg-red .wg-nav-outer a.active {
    color: #B8061A;
}

.wg-red .wg-back {
    color: #B8061A;
}

.wg-red .wg-back::before {
    background: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M10.854 2.646a.5.5 0 0 1 0 .708L6.207 8l4.647 4.646a.5.5 0 0 1-.708.708l-5-5a.5.5 0 0 1 0-.708l5-5a.5.5 0 0 1 .708 0z' fill='%23B8061A'/%3E%3C/svg%3E") no-repeat center;
    background-size: 100%;
}

.wg-red .wg-book-card:hover .wg-book-card-title,
.wg-red .wg-round-info-each:hover .wg-book-title {
    color: #B8061A;
}

.wg-red .wg-welfare {
    background: url(../img/zjfl.png);
    background-size: 100%;
}

.bg-white {
    background-color: #fff !important;
    border-left: none !important;
}

.wg-welfare-msg {
    font-size: 14px;
    color: rgba(33, 32, 44, .55);
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    line-height: 22px;
}