body {
    background: #ffffff;
}

body, h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: "Pingfang SC", "Microsoft Yahei UI", "Microsoft Yahei", "Hiragino Sans GB", "Noto Sans SC", "Helvetica Neue", "Helvetica", "STHeiti", "WenQuanYi Micro Hei", sans-serif;
}

#__cliHead {
    box-shadow: 0 1px 4px rgba(0, 21, 41, .08);
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
}

[is_mac=false] ::-webkit-scrollbar {
    width: 7px;
    height: 7px
}

[is_mac=false] ::-webkit-scrollbar-thumb {
    border-radius: 7px;
    background: rgba(0, 0, 0, .2);
    box-shadow: inset 0 0 5px rgba(0, 0, 0, .2)
}

[is_mac=false] ::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, .4)
}

[is_mac=false] ::-webkit-scrollbar-thumb {
    /*visibility: hidden;*/
    /*transition: transform .15s cubic-bezier(.215,.61,.355,1),opacity .15s cubic-bezier(.215,.61,.355,1)*/
}

[is_mac=false] :hover::-webkit-scrollbar-thumb {
    visibility: visible;
    opacity: 1;
    transition: transform .15s cubic-bezier(.215, .61, .355, 1), opacity .15s cubic-bezier(.215, .61, .355, 1)
}

.loadingWrap {
    height: 100vh;
    top: 80px;
    background-color: #fff;
    margin: 0 auto;
    text-align: center;
    display: none;
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
}

.loadingWrap img {
    width: 40px;
    height: 40px;
    display: inline-block;
}

.consult-for-help-wrap .modal-dialog {
    display: inline-block;
    text-align: left;
    vertical-align: middle;
    width: 800px;
    margin: 0;
}

.consult-for-help-wrap #consult-modal.modal {
    text-align: center;
    padding: 0 !important;
}

.consult-for-help-wrap #consult-modal.modal:before {
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    margin-right: -4px;
}

.consult-for-help-wrap .service-page-modal {
    padding: 48px 100px 64px;
    background-color: #f5f5f7;
}

.consult-for-help-wrap .service-page-modal h4 {
    font-size: 24px;
    line-height: 48px;
    color: #222;
    font-weight: bold;
    margin-bottom: 32px;
}

.consult-for-help-wrap .service-page-modal .close {
    position: absolute;
    top: 20px;
    right: 27px;
    color: #666;
    font-size: 32px;
    opacity: 1;
    font-weight: normal;
}

.consult-for-help-wrap .service-page-modal .close:hover {
    color: #333;
}

.consult-for-help-wrap .contact-box {
    padding: 40px 48px 40px 40px;
    background-color: #fff;
    border-radius: 8px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}

.consult-for-help-wrap .contact-box .contact-box-content {
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.consult-for-help-wrap .contact-box .contact-box-content h5 {
    font-size: 20px;
    line-height: 36px;
    font-weight: bold;
    color: #333;
    margin-bottom: 8px;
    text-align: left;
}

.consult-for-help-wrap .contact-box .contact-box-content p {
    font-size: 16px;
    line-height: 32px;
    color: #666;
    text-align: left;
}

.consult-for-help-wrap .contact-box .contact-box-img img {
    display: block;
    width: 120px;
    height: 120px;
    margin-bottom: 8px;
}

.consult-for-help-wrap .contact-box .contact-box-img p {
    font-size: 12px;
    line-height: 18px;
    color: #666;
}

.consult-for-help-wrap .contact-box-industry-item {
    width: 292px;
    height: 91px;
    padding: 32px;
    float: left;
    background-color: #fff;
    border-radius: 4px;
    color: #000;
    font-size: 18px;
    line-height: 27px;
    font-weight: bold;
    cursor: pointer;
    margin: 0 24px 24px 0;
    border: 2px solid #fff;
}

.consult-for-help-wrap .contact-box-industry-item:nth-child(even) {
    margin-right: 0;
}

.consult-for-help-wrap .contact-box-industry-item:hover {
    border: 2px solid #888;
}


.wrapper {
    padding-bottom: 30px;
}

.wiki-container {
    flex: 1;
    display: flex;
    justify-content: center;
    font-family: "Pingfang SC", "Microsoft Yahei UI", "Microsoft Yahei", "Hiragino Sans GB", "Noto Sans SC", "Helvetica Neue", "Helvetica", "STHeiti", "WenQuanYi Micro Hei", sans-serif;
}
.wiki-container .wordpress_article_info_box_container .community-wrapper .content-box {
    max-width: 100%;
}

.yiqingMobileTip {
    position: relative;
    padding: 16px 24px 16px 60px;
    background-color: #EBF6FF;
    display: none;
}

.yiqingMobileTip::before {
    content: '';
    position: absolute;
    left: 20px;
    top: 16px;
    width: 24px;
    height: 24px;
    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAFbSURBVHgB7dgxTsMwFAbg3y9EYswRwhiJIQxIFVN7A44AR+AAIIuLwA24QiZAYmiHSh3pETIiVYlJBBaR0iRSTfKa9n1L7dqDn5Q/sQ0IIYQ4ZqprwlTPgy/41xicl7zraN01q7WAiV6FRGoOmAAMNnl28aHPF21zCK2yKdfiSz4h7ppDGLnRF3ACB0YhsW1lVMzxuDkV8HYfzWz76nH1WfwMXoBkgNtxh7jDutIO0ZPeCnh9iM5s+zfgIXogGeDWZwYaqDTPzZ3tEeEJDhgKMGmxTX62vSIfTgVIBrgNVIDaukcqD0xw5JSBiV7e/PXKRZqGseouVQV2TFH5f+eptpVTAUReJYCmZazKBM1jO6wBIycFcDv0rYSX5DlmYHKKzQJiz9W+Ipd6GXuMt3FNsmIXu+2asZYBn7wX9HgE3JX6uYOq5VFeo9xqj1Dx2rzFHsqQpRBCCPHfvgFc+UwUEaQV5AAAAABJRU5ErkJggg==');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.yiqingMobileTip .tipsTitle {
    font-weight: 500;
    font-size: 14px;
    line-height: 20px;
    color: rgba(0, 0, 0, 0.85);
    margin-bottom: 6px;
}

.yiqingMobileTip .tipsDesc {
    font-weight: 400;
    font-size: 12px;
    line-height: 17px;
    color: rgba(0, 0, 0, 0.45);
}

.yiqingMobileTip .tipsDesc .text-green {
    color: #20bf64;
}

.case-breadcrumb {
    padding: 24px 0 8px;
    font-size: 16px;
    line-height: 24px;
}

.case-breadcrumb-link {
    /* font-size: 12px; */
}

.case-breadcrumb-separator {
    padding: 0 4px;
    /* font-size: 12px; */
    color: rgba(0, 0, 0, 0.87);
}

.case-breadcrumb-link a {
    color: #317a99;
}

.case-footer {
    position: absolute;
    bottom: 0;
    width: 100%;
}

.wiki-container.no-outline {
    margin-left: 0 !important;
}

.wiki-container.no-outline .case-detail-box {
    margin: 0 auto;
}

.case-detail-box {
    /*width: 800px;*/
    /*margin-left: 180px;*/
    position: relative;
    padding: 32px 100px;
    width: 100%;
    max-width: 890px;
}


@media (max-width: 450px) {
    .case-detail-box {
        max-width: 768px;
        padding-left: 64px;
        padding-right: 64px;
    }
}

.left-side-placeholder {
    position: relative;
    position: -webkit-sticky;
    position: sticky;
    width: 166px;
    top: 140px;
    padding-bottom: 112px;
    float: left;
}

.case-detail-side-container {
    position: sticky;
    max-width: 272px;
    width: 272px;
    top: 92px;
    display: block;
    align-self: flex-start;
}

.case-detail-side-container .case-detail-side-title {
    color: rgba(0, 0, 0, .85);
    position: relative;
    left: -4px;
    font-weight: 700;
    font-size: 18px;
    line-height: 28px;
    margin-bottom: 16px;
}

.case-detail-side-nav {
    position: relative;
    padding: 0;
    max-height: 80vh;
    overflow-y: auto;
    font-family: "Microsoft Yahei UI", "Microsoft Yahei", "Hiragino Sans GB", "Noto Sans SC", "Helvetica Neue", "Helvetica", "STHeiti", "WenQuanYi Micro Hei", sans-serif;
}

.case-detail-side-nav ul {
    border-left: 1px solid rgba(120, 130, 140, 0.1);
    margin-left: 0;
}

.case-detail-side-nav li {
    position: relative;
    color: rgba(60, 60, 67, 0.75);
    display: flex;
    align-items: center;
    line-height: 22px;
    padding: 4px 16px;
}

.case-detail-side-nav li[data-a-target="#intro-text"]::before {
    display: none !important;
}

.case-detail-side-nav li a[data-target="#intro-text"] {
    color: rgba(60, 60, 67, 1) !important;
    font-weight: bold !important;
}

.case-detail-side-nav li.active {
    position: relative;
}

.case-detail-side-nav li.active::before {
  content: ' ';
  width: 2px;
  height: 18px;
  left: -1px;
  background-color: #00a13b;
  display: inline-block;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 2px;
}

.theme-blue.case-detail-side-nav li.active::before {
  background-color: #166BC7;
}

.case-detail-side-nav li a {
    font-weight: normal;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.case-detail-side-nav li[data-lv="1"] {
    font-size: 13px;
    /*margin: 10px 0;*/
}

.case-detail-side-nav li[data-lv="2"] {
    font-size: 13px;
    font-weight: normal;
    white-space: nowrap;
    padding-left: 32px;
    /*margin: 6px 0;*/
}

.case-detail-side-nav li[data-lv="2"] a {
    /*margin-left: 14px;*/
}

.case-detail-side-nav li[data-lv="1"] + li[data-lv="2"] {
    padding-left: 32px;
    /*margin-top: -2px;*/
}

.case-detail-side-nav li a:hover {
    color: #3c3c43;
}

.theme-blue.case-detail-side-nav li a:hover {
  color: #166BC7;
}

.case-detail-side-nav li a:focus {
    color: rgba(0, 0, 0, 0.65);
}

.case-detail-side-nav li.active a {
    color: rgba(60, 60, 67);
}

.theme-blue.case-detail-side-nav li.active a {
  color: #166BC7;
}

.case-detail-box-auto {
    padding: 24px 0 0;
    margin-bottom: 64px;
    display: inline-block;
    background-color: #fff;
}

.case-detail-box .bread-wrap {
    /*margin-top: 24px;*/
    /*font-weight: 500;*/
    font-size: 16px;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.45);
    cursor: pointer;
}

.case-detail-box .bread-wrap span.name {
    color: rgba(0, 0, 0, 0.65);
}

.case-detail-box .bread-wrap .fa-angle-right {
    margin: 0 14px;
    color: #999999;
}

.case-detail-box .bread-wrap .bread-scene-case-box,
.case-detail-box .bread-wrap .bread-client-case-box {
    /* display: none; */
}

.bread-scene-case-box {
    display: flex;
    align-items: center;
}

.case-detail-box .bread-wrap .name:hover,
.case-detail-box .bread-wrap .name:active,
.case-detail-box .bread-wrap .name:focus {
    color: #0B993F;
}

/* .case-detail-box .bread-wrap .name.third-name {
  color: #008C33;
} */

.case-detail-box .bread-wrap .name:first-child {
    margin-left: 0px;
}

.case-detail-content-top-box {
    margin-top: 20px;
}

.case-detail-content-top-box .article-wrap {
    display: inline-block;
    background: #F7F8FA;
    border-radius: 100px;
    padding: 8px 24px;
    margin-top: 16px;
}

.case-detail-content-top-box .article-wrap .from-weixin {
    display: inline-block;
    margin-right: 24px;
}

.case-detail-content-top-box .article-wrap .from-weixin.none {

}

.case-detail-content-top-box .article-wrap .from-weixin .from-weixin-text {

}

.case-detail-content-top-box .origin-article-wrapper {
    display: none;
    /* color: #999; */
}

.case-detail-content-top-box .origin-article-wrapper.inlineBlock {
    display: inline-block;
}

.case-detail-content-top-box .origin-article-wrapper .title {
}

.case-detail-content-top-box .origin-article-wrapper .origin-article-link {
    color: #166bc7;
    font-size: 14px;
    font-weight: bold;
}

.share_card {
    position: relative;
    background-color: #fafafa;
    border-radius: 6px;
    padding: 20px 24px;
}

.share_card + .share_card {
    margin-top: 20px;
}

.share_card_name {
    color: #333;
    font-size: 18px;
    line-height: 27px;
    font-weight: bold;
    margin-bottom: 16px;
}

.share_card_title {
    color: #666;
    font-size: 14px;
    line-height: 21px;
    margin-bottom: 4px;
}

.share_card_detail_link {
    position: absolute;
    top: 20px;
    right: 24px;
}

.share_card_detail_link:hover {
    color: #114a78 !important;
}

.share_card_content {
    position: relative;
    color: #333;
    font-size: 16px;
    line-height: 24px;
    margin-bottom: 16px;
}

.share_card_content_expand {
    position: absolute;
    right: 0;
    bottom: 0;
    display: none;
    padding: 0 2px;
    background-color: #fafafa;
}

.share_card_content.share_card_content_show_expand {
    max-height: 96px;
    overflow: hidden;
}

.share_card_content.share_card_content_show_expand .share_card_content_expand {
    display: block;
}

.share_card_img_list {
    overflow-x: auto;
    overflow-y: hidden;
    max-height: 166px;
    white-space: nowrap;
}

.share_card_img_list a {
    font-size: 0 !important;
}

.share_card_img_list img {
    width: auto;
    height: 166px !important;
    cursor: pointer;
}

.share_card_img_list a + a {
    margin-left: 16px !important;
}

.share_now_container {
    margin-top: 64px;
    padding: 14px 24px 14px 12px;
    border-radius: 6px;
    border: 1px solid #e6e6e6;
}

.share_now_content h4 {
    font-size: 16px !important;
    line-height: 24px !important;
    font-weight: bold !important;
    color: #333 !important;
    margin-bottom: 8px !important;
}

.share_now_content {
    padding: 12px;
    float: left;
    max-width: 567px;
}

.share_now_content p {
    font-size: 14px !important;
    line-height: 21px !important;
    color: #666 !important;
    margin: 0 !important;
}

.share_now_button {
    float: right;
    margin-top: 24px;
}

.share_now_button button {
    font-size: 14px;
    padding: 5px 16px;
}


.help-modal-backdrop, .help-modal-backdrop-bg {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 100%;
    z-index: 1001;
}

.help-modal-backdrop-bg {
    -webkit-transition: opacity 300ms ease-in-out;
    transition: opacity 300ms ease-in-out;
    background-color: #000;
    opacity: 0;
}

.help-modal-backdrop.active .help-modal-backdrop-bg {
    opacity: 0.5;
}

.help-modal {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 600px;
    min-height: 240px;
    max-height: 90%;
    max-height: 90vh;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    background-color: #fff;
    border-radius: 6px;
    -webkit-transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
    transition: all cubic-bezier(0.1, 0.7, 0.1, 1) 400ms;
    z-index: 1002;
}

.help-modal-content {
    height: auto;
    max-height: 100%;
    max-height: 90vh;
    padding: 40px;
    overflow: auto;
}

.help-modal-content h2 {
    color: rgba(0, 0, 0, .87);
    font-size: 24px;
    font-weight: 700;
    line-height: 31px;
    margin-bottom: 32px;
    text-align: center;
}

.help-modal-content p {
    color: #666;
    font-size: 14px;
    line-height: 20px;
}

.help-modal-content p + p {
    margin-top: 8px;
}

.help-modal-content .help-modal-qrcode img {
    width: 122px;
    height: 122px;
    display: block;
    margin: 0 auto 2px;
}

.help-modal-content .help-modal-qrcode p {
    color: #666;
    font-size: 12px;
    line-height: 18px;
    text-align: center;
}

.help-modal-content p.cornerTips {
    font-size: 12px;
    margin-top: 16px;
    color: #999;
}

.help-modal-backdrop-close {
    font-size: 18px;
    font-weight: 400;
    position: fixed;
    top: 24px;
    right: 24px;
    line-height: 24px;
}

.help-modal-backdrop-close span:first-child {
    font-size: 24px
}

/*title*/

.show-detail-info {
    width: 100%;
}

.show-detail-info .detail-content {
    width: 100%;
    float: left;
}

.show-detail-info .detail-content .detail_title {
    font-size: 32px;
    line-height: 48px;
    font-weight: 500;
    color: rgba(13, 19, 26, 0.82);
}

.show-detail-info .detail-content .detail_desc {
    font-size: 16px;
    color: #666666;
    opacity: 0.87;
    /*max-height: 96px;*/
    line-height: 24px;
    text-overflow: ellipsis;
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 10;
    margin-top: 10px;
    background: #F7F9F7;
    padding: 16px;
    line-height: 30px;
    position: relative;
}

.show-detail-info .detail-content .detail_desc .text_detail_desc {
    border-left: 8px solid #3cb067;
    margin-left: -16px;
    padding-left: 16px;
    font-size: 14px;
    color: rgba(0, 0, 0, .87);
}

.show-detail-info .detail-content .detail_use_num {
    font-size: 32px;
    font-weight: 600;
    line-height: 24px;
    display: inline-block;
    position: relative;
    top: 7px;
    left: 7px;
    padding: 10px;
    border-left: 3px solid rgba(0, 0, 0, .87)
}


/* tab START */

.tab-nav {
    width: 100%;
}

.tab-nav .tab-ul {
    position: relative;
    padding: 0px;
    border-bottom: 3px solid #EFEFEF;
}

.tab-nav .tab-item {
    display: inline-block;
    height: 42px;
    line-height: 42px;
    text-align: center;
    font-size: 16px;
    color: #666;
    margin: 0 20px;
}

.tab-nav .tab-item.active {
    position: relative;
    color: #3cb067;
}

.tab-nav .tab-item.active:after {
    content: ' ';
    position: absolute;
    left: 0;
    bottom: -3px;
    width: 100%;
    height: 3px;
    background-color: #3cb067;
}

.tab-nav .tab-item a {
    display: block;
    line-height: 42px !important;
    font-size: 16px !important;
    font-weight: normal;
    color: #666;
}

.tab-nav .tab-item.active a {
    color: #3cb067;
    position: relative;
    font-weight: 600;
}

.noPaddingLeft {
    padding-left: 0px !important;
}

.noMarginLeft {
    margin-left: 0px !important;
}

/*固定的时候*/

.tab_empty_fixed {
    height: 42px;
}

.tab_fixed .list_tab {
    width: 1000px;
    margin: 0 auto;
}

.tab_fixed {
    position: fixed !important;
    top: 0;
    left: 0;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
    z-index: 1;
}

.tab_fixed .tab-ul {
    border-bottom: 0px;
}

/* tab END */

/* 头部固定时显示 START */

.choose-template:hover .create-qrcode-box {
    display: block;
}

.choose-template:hover .fa-angle-down {
    display: none;
}

.choose-template:hover .fa-angle-up {
    display: inline-block;
}

.create-qrcode-box {
    display: none;
}

/* 头部固定时显示 END */

/* 联系方式 START */
.create-contact-box {
    position: relative;
    position: -webkit-sticky;
    position: sticky;
    top: 140px;
    float: right;
    padding-bottom: 112px;
    /*top: 38px;*/
    /* position: absolute; */
    /* right: 0; */
    /*opacity: 0;*/
}

.create-contact-box.affix {
    /* position: fixed; */
    top: 140px;
}


.create-contact-box .contact {
    width: 200px;
    margin: 0 auto;
}

/* 文章 content START */

.case-detail-content {
    width: 100%;
}

.case-blog-wrap {
    margin-top: 0;
}

/* 文章 content END */


.mT10 {
    margin-top: 10px;
}

/* 真实客户使用案例 START */
.case-detail-content .customer-case {
    /*margin-top: 64px;*/
}

.case-detail-content .customer-case h2 {
    margin: 48px 0 16px !important;
    border-top: 1px solid rgba(120, 130, 140, 0.13);
    padding-top: 40px;
    line-height: 34px;
    font-size: 26px;
    letter-spacing: -.02em;
}

.case-detail-content .customer-case .case-ul,
.case-detail-content .application-solution .case-ul {
    margin-top: 16px;
}

.case-detail-content .customer-case .case-li,
.case-detail-content .application-solution .case-li,
.case-detail-content .code-case-tpl .case-li {
    position: relative;
    font-size: 15px;
    line-height: 24px;
}

.case-detail-content .customer-case .case-li + .case-li,
.case-detail-content .application-solution .case-li + .case-li,
.case-detail-content .code-case-tpl .case-li + .case-li {
    margin-top: 8px !important;
}

.case-detail-content .customer-case .case-li + .case-li a,
.case-detail-content .application-solution .case-li + .case-li a,
.case-detail-content .code-case-tpl .case-li + .case-li a {
    color: #166bc7;
}

.case-detail-content .customer-case .case-li .none {
    display: none;
}

.case-detail-content .case-item {
    /*color: #576b95;*/
    color: #166bc7;
}

.case-detail-content .customer-case .case-item:hover,
.case-detail-content .application-solution .case-item:hover,
.code-case-tpl .case-item:hover {
    color: #576b95;
    /*border-bottom: 1px solid #576b95;*/
    border-bottom: 1px solid #166bc7;
}

/* 真实客户使用案例 END */


/* 详细了解相关应用经验 START */
.case-detail-content .application-solution {
    margin-top: 64px;
}

/* 详细了解相关应用经验 END */

/* 咨询顾问，详细了解实施方案 START */
.case-detail-content .consult-for-help {
    margin-top: 64px;
    border: 1px solid rgba(120, 130, 140, 0.25);
    border-radius: 4px;
    padding: 24px;
}

.case-detail-content .consult-for-help .consult-wrap {
    position: relative;
}

.case-detail-content .consult-for-help .consult-wrap .left h4 {
    font-size: 20px;
    color: #222222;
}

.case-detail-content .consult-for-help .consult-wrap .left .desc {
    font-size: 16px;
    line-height: 20px;
    color: #666;
    margin-top: 8px;
}

.case-detail-content .consult-for-help .consult-wrap .right {
    float: right;
    position: absolute;
    top: 50%;
    right: 0px;
    margin-top: -18px;
}

.case-detail-content .consult-for-help .consult-wrap .right .use-btn {
    width: 122px;
    height: 38px;
    background: #FAFAFA;
    border: 1px solid #38B566;
    box-sizing: border-box;
    border-radius: 4px;

    font-size: 14px;
    color: #38B566;
    line-height: 36px;
    text-align: center;

    display: inline-block;
    transition: all 0.1s;
    cursor: pointer;
    background: #fff;
}

.case-detail-content .consult-for-help .consult-wrap .right .use-btn:hover {
    color: #fff;
    background-color: #38B566;
}

/* 咨询顾问，详细了解实施方案 END */

/* 相关模板，可直接使用开始生码 START */
.case-detail-content .code-case-tpl {
    /*padding-top: 64px;*/
}

.case-detail-content .code-case-tpl h2 {
    margin: 48px 0 16px !important;
    border-top: 1px solid rgba(120, 130, 140, 0.13);
    padding-top: 40px;
    line-height: 34px;
    font-size: 26px;
    letter-spacing: -.02em;
}

.case-detail-content .code-case-tpl h3 {
    color: #333;
    font-size: 24px;
    line-height: 36px;
    font-weight: bold;
}

.case-detail-content .code-case-tpl .case-ul {
    margin-top: 16px;
}

.case-detail-content .code-case-tpl .case-li .none {
    display: none;
}

.case-detail-content .code-case-tpl .case-li {
    font-size: 15px;
}

.case-detail-content .code-case-tpl .case-li .template-item .case-item {
    color: #166bc7;
}

.case-detail-content .code-case-tpl .case-item-mobile {
    display: flex;
    align-items: center;
}

.case-detail-content .code-case-tpl .case-item-mobile .case-item_preview {
    overflow: hidden;
    margin-right: 12px;
}

.case-detail-content .code-case-tpl .case-item-mobile img {
    object-fit: cover;
    width: 60px;
    height: 60px;
    border-radius: 4px;
}

.case-detail-content .code-case-tpl .case-item-mobile .name {
    font-weight: 400;
    font-size: 17px;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.9);
}

.case-detail-content .code-case-tpl .case-item .case-item_preview {
    position: absolute;
    left: 0;
    top: 16px;
    width: 160px;
    height: 110px;
    border-radius: 2px;
    overflow: hidden;
}

.case-detail-content .code-case-tpl .case-item .case-item_preview_inner {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    transform: scale(1);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.case-detail-content .code-case-tpl .case-item .case-item_preview_mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 1);
    opacity: 0.25;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.case-detail-content .code-case-tpl .case-item.case-item_hover .case-item_preview_inner {
    transform: scale(1.05);
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.case-detail-content .code-case-tpl .case-item.case-item_hover .case-item_preview_mask {
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
}

.case-detail-content .code-case-tpl .case-item-mobile .case-item-cut-img {
    width: 60px;
    height: 60px;
    border-radius: 4px;
    background-color: rgba(83, 104, 128, 0.15);
    position: relative;
    overflow: hidden;
    margin-right: 12px;
}

.case-detail-content .code-case-tpl .case-item-mobile .case-item-cut-img:before {
    content: ' ';
    width: 40px;
    height: 9.54px;
    position: absolute;
    top: 8.5px;
    background-image: url(https://gstatic.clewm.net/caoliao-resource/231117/a44fa42f_f4e802c2_1685693168.png);
    background-size: cover;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}

.case-detail-content .code-case-tpl .case-item-mobile .case-item-cut-img .bottom-img {
    width: 40px;
    overflow: hidden;
    background-color: #fff;
    padding-left: 1.5px;
    min-height: 50px;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    background-size: 100% calc(100% - 24px);
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAogAAAACCAYAAADb/S0tAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAA8SURBVHgB7dZBFYAgFADBjwVE7R9RxQTC40QAuM1ctsKmv4kFnvL1XkdOAQDANPdb+r+deY8VtgAAgEEFzOILAJmN3scAAAAASUVORK5CYII=);
    background-position: 0 24px;
    margin-top: 10px;
    margin-left: 50%;
    transform: translateX(-50%);
}

.case-detail-content .code-case-tpl .case-item-mobile .case-item-cut-img .bottom-img .value {
    width: 37px;
    height: 50px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.case-detail-content .code-case-tpl .case-li:last-child .case-item::after {
    display: none;
}

.case-detail-content .code-case-tpl .case-li .case-item .case-item-title {
    font-weight: bold;
    font-size: 18px;
    line-height: 23px;
    color: #333333;
    margin-bottom: 6px;
}

.case-detail-content .code-case-tpl .case-item .case-item-batch_tag {
    position: relative;
    top: -1px;
    display: inline-block;
    vertical-align: middle;
    background: #F7F8FA;
    border-radius: 4px;
    font-weight: normal;
    font-size: 12px;
    line-height: 18px;
    padding: 3px 8px;
    color: #999999;
}

.case-detail-content .code-case-tpl .case-item .case-item-decs {
    font-size: 14px;
    line-height: 22px;
    color: #666666;
    min-height: 44px;
    margin-bottom: 8px;
}

/* 相关模板，可直接使用开始生码 END */

/* 手机端的提示用户到pc端的弹窗样式 */
#modal-alert-mobile .modal-dialog {
    width: 200px;
    position: absolute;
    left: 50%;
    margin-left: -100px;
    margin-top: 150px;
}

#modal-alert-mobile .modal-header {
    border-bottom: none;
    padding-top: 30px;
}

#modal-alert-mobile .modal-header button {
    font-size: 28px;
}

#modal-alert-mobile .modal-body {
    margin-top: -12px;
    font-size: 12px;
    color: rgba(0, 0, 0, 0.87);
    padding: 0 18px 30px;
    text-align: center;
}

#modal-alert-mobile .modal-body .img-box {
    width: 45px;
    height: 45px;
    background-size: 45px;
    margin: 0 auto 14px;
    background-image: url(//static.clewm.net/static/images/notice_mobile_scene@2x_fc6cd65.png);
    background-image: -webkit-image-set(url('//static.clewm.net/static/images/notice_mobile_scene@2x_fc6cd65.png') 1x, url('//static.clewm.net/static/images/notice_mobile_scene@3x_cf81eda.png') 2x);
    background-image: -moz-image-set(url('//static.clewm.net/static/images/notice_mobile_scene@2x_fc6cd65.png') 1x, url('//static.clewm.net/static/images/notice_mobile_scene@3x_cf81eda.png') 2x);
    background-image: -ms-image-set(url('//static.clewm.net/static/images/notice_mobile_scene@2x_fc6cd65.png') 1x, url('//static.clewm.net/static/images/notice_mobile_scene@3x_cf81eda.png') 2x);
    background-image: -o-image-set(url('//static.clewm.net/static/images/notice_mobile_scene@2x_fc6cd65.png') 1x, url('//static.clewm.net/static/images/notice_mobile_scene@3x_cf81eda.png') 2x);
}

/* 模版选中 */

.JoinStep-common-guild {
    margin: 24px 0px 30px;
}

.JoinStep-common-title {
    float: left;
    margin-right: 8px;
    margin-top: 17px;
    font-size: 12px;
}

.JoinStep-common-guild-box {
    width: 25%;
    float: left;
    padding: 0 4px;
    cursor: pointer;
    position: relative;
    margin-top: 10px;
}

.JoinStep-common-guild-box .JoinStep-common-guild-boxInner {
    box-sizing: border-box;
    background: #ffffff;
    height: 40px;
    line-height: 40px;
    text-align: center;
    border: 2px solid rgba(120, 130, 140, .25);
    padding: 0px 12px;
}

.JoinStep-common-guild-box .JoinStep-common-guild-boxInnerLarge {
    box-sizing: border-box;
    background: #ffffff;
    height: 48px;
    line-height: 48px;
    border-radius: 4px;
    text-align: center;
    border: 2px solid rgba(120, 130, 140, .25);
}

.JoinStep-common-guild-box {
    width: auto;
}

.JoinStep-common-guild-box .JoinStep-common-guild-boxInner {
    height: 32px;
    font-size: 12px;
    line-height: 28px;
}

.solution-free_trial-form p.tips {
    margin-top: 12px;
}

.JoinStep-common-guild-box .clicon-corner-mark-check {
    font-size: 18px;
}

.JoinStep-common-guild-box .active.JoinStep-common-guild-boxInnerLarge, .JoinStep-common-guild-box .active.JoinStep-common-guild-boxInner {
    border-color: #3cb067;
}

.active .clicon-corner-mark-check {
    display: block;
}

.clicon-corner-mark-check {
    display: none;
    position: absolute;
    font-size: 28px;
    right: 4px;
    top: 0;
    overflow: hidden;
    text-align: right;
    color: #3cb067;
}

.no-choose {
    font-size: 12px;
    color: #F44455;
    position: absolute;
    left: 59px;
    top: -25px;
}

.marginB24 {
    margin-bottom: 24px;
}

.wordpressBtn {
    display: inline-block;
    padding: .375rem 1rem !important;
    font-size: 1rem !important;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: #3cb067;
    color: #fff !important;
}

.wordpressBtnNew {
    display: inline-block;
    padding: .375rem 1rem !important;
    font-size: 1rem !important;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    border: 1px solid transparent;
    border-radius: 4px;
    background-color: #fff;
    border: 1px solid #3cb067;
    color: #3cb067 !important;
}

.wordpressBtnNew:hover {
    color: #fff !important;
    background-color: #3cb067 !important;
}


/* 手机端的提示用户到pc端的弹窗样式 */


@media screen and (max-device-width: 450px) and (min-device-width: 376px) {
    .yiqingMobileTip {
        display: block;
    }

    .mobile-logo .logo {
        display: inline-block;
        float: left;
        width: 150px;
        height: 40px;
        background: url('//static.clewm.net/static/images/mobile_logo_new@3x_b757220.png');
        background-image: -webkit-image-set(url('//static.clewm.net/static/images/mobile_logo_new@3x_b757220.png') 1x, url('//static.clewm.net/static/images/mobile_logo_new@3x_b757220.png') 2x);
        background-image: -moz-image-set(url('//static.clewm.net/static/images/mobile_logo_new@3x_b757220.png') 1x, url('//static.clewm.net/static/images/mobile_logo_new@3x_b757220.png') 2x);
        background-image: -ms-image-set(url('//static.clewm.net/static/images/mobile_logo_new@3x_b757220.png') 1x, url('//static.clewm.net/static/images/mobile_logo_new@3x_b757220.png') 2x);
        background-image: -o-image-set(url('//static.clewm.net/static/images/mobile_logo_new@3x_b757220.png') 1x, url('//static.clewm.net/static/images/mobile_logo_new@3x_b757220.png') 2x);
        background-repeat: no-repeat;
        background-position: 0 14px;
        background-size: auto 24px;
        margin-top: 2px;
        margin-bottom: 4px;
        position: relative;
        left: 0px;
        margin-left: 16px;
    }

    .mobile-logo-show {
        /*height: 60px;*/
    }

    .bread-wrap,
    .consult-for-help-wrap {
        display: none;
    }

    .cli_head_placeholder {
        display: none;
    }

    .create-contact-box {
        display: none;
    }

    .case-detail-box {
        width: 100% !important;
    }

    .wordpress_article_info_box.comment-box {
        padding-left: 0 !important;
    }

    .case-detail-box-auto {
        width: 100% !important;
        margin-left: 0 !important;
        margin-bottom: 0 !important;
    }

    .case-detail-box-auto {
        padding: 0;
    }

    .wordpress-article-box {
        width: 100% !important;
    }

    .wordpress-article {
        width: 100% !important;
    }

    .tab-nav {
        position: relative;
        border-bottom: 0px solid rgba(120, 130, 140, 0.13);
        overflow: hidden;
        width: 100%;
    }

    .tab-ul {
        white-space: nowrap;
        position: relative;
        border-bottom: none;
    }

    .tab-item {
        /*margin: 0 1rem !important;*/
        padding: 0 .5rem;
        height: 48px;
        line-height: 48px;
    }

    .tab-item a {
        font-size: 0.86rem !important;
        line-height: 50px !important;
    }

    .mobile-more-tab {
        position: absolute;
        right: 0px;
        top: 4px;
        font-size: 16px;
        background: #fff;
        padding: 6px 12px;
        opacity: .8;
        display: block !important;
    }

    .scene_tip {
        display: none;
    }

    .scene_footer {
        margin-top: 2px;
        color: #999;
        font-size: 12px;
        text-align: center;
        padding-bottom: 10px;
        display: none;
    }

    .scene-title {
        text-align: center;
        display: inline;
        font-size: 28px;
    }

    .case-detail-content {
        width: 100%;
    }

    .case-detail-content-top-box {
        border-bottom: none;
    }

    .detail-img {
        width: 100%;
        height: auto;
    }

    .detail-content {
        width: 100% !important;
        margin-left: 0px;
        margin-top: 0px !important;
    }

    .detail_btn {
        text-align: center;
        width: auto;
    }

    .detail-content .detail_desc {
        -webkit-line-clamp: 6;
        /*max-height: 130px;*/
        margin-top: 16px;
    }

    /* 讨论区 */
    .mobile-discuss-box {
        display: none;
    }

    .mobile-comments-wrapper {
        width: 100% !important;
    }

    .case-detail-box-auto {
        padding: 16px;
    }

    .detail-content .detail_title {
        font-size: 24px !important;
    }

    .detail-content .detail_desc {
        font-size: 14px !important;
        font-weight: normal !important;
    }

    /* .detail-content .detail_title, */
    /* .detail-content .detail_desc {
    } */
    .mobile-logo-hide {
        display: none;
    }

    .mobile-to-pc {
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        background: #fff;
        padding: 12px 16px 16px;
        box-sizing: border-box;
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mobile-to-pc .tipsTitle {
        font-size: 15px;
        color: #333;
        line-height: 21px;
    }

    .mobile-to-pc .minaBtn {
        color: #357bb3;
        font-size: 15px;
        font-weight: bold;
        background: #f2f2f2;
        border-radius: 24px;
        width: 70px;
        height: 32px;
        line-height: 32px;
        text-align: center;
    }

    .mobile-to-pc.hidden {
        visibility: hidden;
    }

    .mobile-to-pc .mobile-pc-close {
        float: right;
        font-size: 16px;
        margin-top: -5px;
    }

    .cli_foot .footer-category-box {
        padding-top: 40px !important;
    }

    .cli_foot {
        padding-bottom: 40px !important;
    }

    .copyright {
        padding-top: 0 !important;;
    }
}

@media screen and (max-device-width: 375px) and (min-device-width: 320px) {
    .yiqingMobileTip {
        display: block;
    }

    .create-contact-box {
        display: none;
    }

    .mobile-logo .logo {
        display: inline-block;
        float: left;
        width: 150px;
        height: 40px;
        background: url(//static.clewm.net/static/images/mobile_logo_new@3x_b757220.png) no-repeat 0px 14px;
        background-size: auto 24px;
        margin-top: 2px;
        margin-bottom: 4px;
        position: relative;
        left: 0px;
        margin-left: 16px;
    }

    .cli_head_placeholder {
        display: none;
    }

    .mobile-logo-show {
        /*height: 60px;*/
    }

    .bread-wrap,
    .consult-for-help-wrap {
        display: none;
    }

    .case-detail-box {
        width: 100% !important;
    }

    .case-detail-box-auto {
        width: 100% !important;
    }

    .case-detail-box-auto {
        padding: 16px;
        margin-left: 0 !important;
        margin-bottom: 0 !important;
    }

    .wordpress_article_info_box.comment-box {
        padding-left: 0 !important;
    }

    .wordpress-article-box {
        width: 100% !important;
    }

    .wordpress-article {
        width: 100% !important;
    }

    .mobile-more-tab {
        position: absolute;
        right: 0px;
        top: 4px;
        font-size: 16px;
        background: #fff;
        padding: 6px 12px;
        opacity: .8;
        display: block !important;
    }

    .tab-nav {
        position: relative;
        overflow: hidden;
        width: 100%;
    }

    .tab-ul {
        white-space: nowrap;
        position: relative;
        border-bottom: none;
    }

    .tab-item {
        padding: 0 0.5rem;
        /*margin: 0 1rem !important;*/
        height: 48px;
        line-height: 48px;
    }

    .tab-item a {
        font-size: 0.86rem !important;
        line-height: 50px !important;
    }

    .scene_tip {
        display: none;
    }

    .scene_footer {
        margin-top: 2px;
        color: #999;
        font-size: 12px;
        text-align: center;
        padding-bottom: 10px;
        display: none;
    }

    .scene-title {
        text-align: center;
        display: inline;
        font-size: 28px !important;
    }

    .case-detail-content {
        width: 100%;
    }

    .case-detail-content-top-box {
        border-bottom: none;
    }

    .detail-img {
        width: 100%;
        height: auto;
    }

    .detail-content {
        width: 100% !important;
        margin-left: 0px;
        margin-top: 0px !important;
    }

    .detail_btn {
        text-align: center;
        width: auto;
    }

    .detail-content .detail_desc {
        -webkit-line-clamp: 6;
        /*max-height: 130px;*/
        margin-top: 16px;
    }

    /* 讨论区 */
    .mobile-discuss-box {
        display: none;
    }

    .mobile-comments-wrapper {
        width: 100% !important;
    }

    .show-detail-info {
        /*padding: 16px;*/
    }

    .detail-content .detail_title {
        font-size: 30px !important;
    }

    .detail-content .detail_desc {
        font-size: 14px !important
    }

    .detail-content .detail_desc {
        font-weight: normal !important;
    }

    .mobile-logo-hide {
        display: none;
    }

    .mobile-to-pc {
        position: fixed;
        width: 100%;
        left: 0;
        bottom: 0;
        background: #fff;
        padding: 12px 16px 16px;
        box-sizing: border-box;
        box-shadow: 0 0 12px rgba(0, 0, 0, 0.1);
        z-index: 1000;
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .mobile-to-pc .tipsTitle {
        font-size: 15px;
        color: #333;
        line-height: 21px;
    }

    .mobile-to-pc .minaBtn {
        color: #357bb3;
        font-size: 15px;
        font-weight: bold;
        background: #f2f2f2;
        border-radius: 24px;
        width: 70px;
        height: 32px;
        line-height: 32px;
        text-align: center;
    }

    .mobile-to-pc.hidden {
        visibility: hidden;
    }

    .mobile-to-pc .mobile-pc-close {
        float: right;
        font-size: 16px;
        margin-top: -5px;
    }

    .wrapper.p-b-lg {
        padding-bottom: 0px !important;
    }

    .case-detail-content.p-b-lg {
        padding-bottom: 0px !important;
    }

    .cli_foot .footer-category-box {
        padding-top: 40px !important;;
    }

    .cli_foot {
        padding-bottom: 40px !important;
    }

    .copyright {
        padding-top: 0 !important;;
    }
}

@media screen and (max-device-width: 415px) {
    body {
        padding-top: 62px !important;
    }

    .weixin_html body {
      padding-top: 24px !important;
    }

    .mobile-head,
    .navbar-collapse,
    .mobile-footer {
        display: block;
    }

    .cli_foot {
        display: none;
    }

    .wordpress_article_info_box_container,
    .wordpress_article_info_box.comment-box {
        padding-bottom: 0 !important;
    }
}

.pagination > li:not(.active):not(.disabled) > a:hover,
.pagination > li:not(.active):not(.disabled) > span:focus {
    color: #008C33 !important;
    border-color: #008C33 !important;
    z-index: 1;
}

.pager > .active > a, .pager > .active > span, .pagination > .active > a, .pagination > .active > span {
    color: #008C33 !important;
    background-color: #f0f2f5 !important;
    border-color: rgba(120, 130, 140, .13) !important;
    border-right: none !important;
}

.pager .disabled > a, .pager .disabled > a:focus, .pager .disabled > a:hover, .pager .disabled > span {
    color: #d9d9d9 !important;
}

@media screen and (min-device-width: 720px) {
    .scene_tip {
    }

    .scene-title {
        text-align: center;
        font-size: 28px !important;
    }

    .scene_footer {
        display: none;
    }

    .mobile-logo-show {
        display: none;
    }

    .mobile-logo-hide {
        display: block;
    }
}

.speTitle {
    padding-bottom: 30px;
}

video, .video-js {
    border-radius: 4px;
    overflow: hidden;
}


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

.popVideo video {
    width: 50vw !important;
}

.popVideo .close {
    opacity: 1;
    position: absolute;
    border-radius: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 41px;
    width: 41px;
    top: 8px;
    right: 14px;
    line-height: 1;
}

.popVideo .close:hover {
    background-color: rgba(255, 255, 255, .2);
}

.popVideo .close .clifont {
    font-size: 30px;
    color: white;
}

.popVideo video {
    width: 50vw;
    max-width: calc(100vw - 32px);
    background-color: black;
}

@media (max-width: 450px) {
    .popVideo video {
        width: calc(100vw - 32px) !important;
    }
}

.code-case-tpl .desc,
.customer-case .desc {
    font-size: 15px;
    line-height: 24px;
    margin: 16px 0;
    padding: 0;
    letter-spacing: 1px;
    text-align: justify;
    /*color: rgba(0, 0, 0, .75);*/
    color: #3C3C43;
}

.wiki-outline-inited .fixed-btn-box {
  display: block !important;
}

.fixed-btn-box {
  padding: 48px 0 24px;
}

.fixed-btn-box .ant-btn {
  min-width: 160px;
  line-height: 28px;
  height: 38px;
  font-size: 16px;
}

.fixed-btn-box .tips {
    color: rgba(0, 0, 0, 0.50);
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 26px;
}

.ant-btn {
  line-height: 1.5715;
  position: relative;
  display: inline-block;
  font-weight: 400;
  white-space: nowrap;
  text-align: center;
  background-image: none;
  box-shadow: 0 2px 0 rgba(0,0,0,.015);
  cursor: pointer;
  transition: all .3s cubic-bezier(.645,.045,.355,1);
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  touch-action: manipulation;
  height: 32px;
  padding: 4px 15px;
  font-size: 14px;
  border-radius: 2px;
  color: rgba(0,0,0,.85);
  border: 1px solid #d9d9d9;
  background: #fff
}

.ant-btn-primary {
  color: #fff;
  border-color: #4caf50;
  background: #4caf50;
  text-shadow: 0 -1px 0 rgba(0,0,0,.12);
  box-shadow: 0 2px 0 rgba(0,0,0,.045)
}

.theme-blue.ant-btn-primary {
  background: #166BC7;
  border-color: #166BC7;
}

.ant-btn-primary:hover,
.ant-btn-primary:focus {
  color: #fff;
  border-color: #008C33;
  background: #008C33
}

.theme-blue.ant-btn-primary:hover,
.theme-blue.ant-btn-primary:focus {
  background: #166BC7;
  border-color: #166BC7;
}