.container-footer,
.container-header {
    max-width: 1380px;
    max-width: calc(var(--mian-max-width) + 180px)
}

.content-wrap {
    float: left;
    width: 100%
}

.sidebar {
    float: left;
    width: 311px;
    position: relative
}

.site-layout-1 .sidebar {
    display: none
}

.site-layout-2 .content-layout {
    margin-right: calc(311px + 15px)
}

.site-layout-2 .sidebar {
    float: left;
    margin-left: -311px;
    width: 311px;
    position: unset
}

.site-layout-3 .content-layout {
    margin-left: calc(311px + 15px);
    margin-right: unset
}

.site-layout-3 .sidebar {
    margin-left: -100%
}

.header {
    padding: 8px 20px;
    background: var(--header-bg);
    margin-bottom: 20px;
    transition: .3s
}

.body-scroll .header {
    box-shadow: 0 4px 10px var(--main-shadow)
}

.header a:not(.but),
.header svg {
    color: var(--header-color)
}

.header .sub-menu {
    background: var(--main-bg-color);
    text-shadow: none
}

.header .dropdown-menu a,
.header .sub-menu a,
.header .sub-menu svg {
    color: var(--main-color)
}

body.nav-fixed:not(.body-scroll) .header.show-slide {
    --header-bg: linear-gradient(0, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.1) 80%);
    --header-color: #fff;
    -webkit-backdrop-filter: unset;
    backdrop-filter: unset
}

body:not(.nav-fixed) .header.show-slide {
    margin-bottom: 0
}

body.nav-fixed .slide-header {
    margin-top: -90px
}

.slide-header .slide-text {
    padding-top: 70px
}

.slide-header .s-desc,
.slide-header img,
.slide-header video,
.wp-block-carousel figcaption {
    border-radius: 0 !important
}

.search-keywords {
    padding: 10px
}

.header form {
    text-align: center
}

.header-slider-search {
    max-width: 840px;
    margin: auto;
    padding: 0 20px;
    font-size: 17px;
    top: calc(50% - 10px);
    z-index: 2
}

.card-0 .header-slider-search {
    top: calc(50% + 20px)
}

.header-slider-search .search-input {
    max-width: 800px
}

.header-slider-search-more {
    color: #fff
}

.header-slider-search-more.before {
    margin-bottom: 1.8em
}

.header-slider-search .search-type-but-average {
    margin-bottom: 2em
}

.header-slider-search .search-type-but-average .but,
.header-slider-search .search_keywords {
    --this-bg: rgba(255, 255, 255, 0.8);
    --this-color: #888
}

.filter-blur .header-slider-search .search-type-but-average .but,
.filter-blur .header-slider-search .search_keywords {
    -webkit-backdrop-filter: saturate(5) blur(20px);
    backdrop-filter: saturate(5) blur(20px)
}

.header-slider-search .search-type-but-average .but.active {
    --this-bg: var(--focus-color);
    --this-color: #fff
}

.header-slider-search .line-form {
    background: rgba(255, 255, 255, .8);
    border-radius: 100px;
    padding: .5em 1.2em;
    z-index: 1;
    color: #555
}

.header-slider-search .line-form .dropdown>a,
.header-slider-search .line-form .dropdown>a a,
.header-slider-search .line-form .icon {
    color: #555
}

.header-slider-search .search-input-text {
    position: relative;
    padding: 5px 10px
}

.header-slider-search .line-form-input {
    padding: 0
}

.header-slider-search .search-input-text .line-form-line,
.header-slider-search .search-keywords>p {
    display: none
}

.header-slider-search .search-keywords {
    text-align: center
}

.header-slider-search .search_keywords {
    padding: 3px 5px;
    font-size: .85em
}

.header-slider-search .line-form .abs-right {
    margin-top: 0;
    margin-right: -6px
}

.header-slider-card {
    margin-top: -40px;
    z-index: 1
}

.header-slider-card .zib-widget {
    margin-bottom: 0
}

.filter-blur .header-slider-card .zib-widget,
.filter-blur .header-slider-search .line-form {
    -webkit-backdrop-filter: saturate(5) blur(20px);
    backdrop-filter: saturate(5) blur(20px)
}

.filter-blur .header-slider-card .zib-widget {
    background: var(--blur-bg)
}

.nav-fixed .header {
    position: fixed;
    z-index: 999;
    width: 100%;
    top: 0;
    -webkit-backdrop-filter: saturate(5) blur(20px);
    backdrop-filter: saturate(5) blur(20px)
}

.mobile-navbar+.fixed-body {
    z-index: 996
}

.navbar-top {
    margin: 0;
    border-radius: 0 !important;
    font-size: 15px
}

.navbar-top badge,
badge.top {
    transform: translate(-5px, -10px) scale(.85);
    margin-right: -10px
}

.navbar-top .navbar-nav {
    margin-left: 20px;
    margin-right: 20px
}

.navbar-top .navbar-right {
    padding-right: 0
}

.navbar-right~.navbar-right {
    padding-right: 5px
}

.navbar-top .navbar-but .but {
    font-size: .8em;
    padding: .3em 1em !important;
    margin: .4em
}

.navbar-top .navbar-but .but.hover-show {
    z-index: 99
}

.navbar-top .navbar-brand {
    padding: 7px 10px
}

.navbar-logo>img {
    height: 36px;
    padding: 0 30px
}

.navbar-top .nav>li>a {
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 4px;
    display: inline-block !important;
    overflow: hidden
}

.menu-item>a>.but {
    transform: translateY(-2px);
    margin: -.3em
}

.current-menu-item>a,
.navbar-top .nav li a:focus,
.navbar-top .nav li a:hover {
    background-color: transparent;
    color: var(--focus-color)
}

.navbar-top .fa {
    transition: .2s
}

.navbar-collapse .search-input {
    background: var(--main-shadow)
}

.navbar-collapse .search-input~.dropdown-menu {
    margin-top: 15px
}

.navbar-collapse .dropdown-menu .search-input {
    background: 0 0;
    padding: 10px;
    width: 460px
}

.navbar-nav li,
.navbar-nav li a {
    max-height: 50px;
    position: relative
}

.navbar-top .sub-menu,
.theme-popover {
    visibility: hidden;
    position: absolute;
    min-width: 120px;
    background-color: var(--main-bg-color);
    padding: 10px 5px;
    z-index: 99;
    border-radius: var(--main-radius);
    box-shadow: 0 0 10px rgba(0, 0, 0, .1)
}

.navbar-top li:hover>.sub-menu {
    visibility: unset
}

.navbar-top .sub-menu .sub-menu {
    left: 100%;
    top: -10px
}

.theme-popover {
    display: unset
}

.navbar-search {
    visibility: hidden;
    transform: translateY(-101%);
    padding: 10px 30px;
    padding-top: 80px;
    background: var(--main-bg-color);
    height: auto;
    opacity: 1;
    box-shadow: 0 14px 10px rgba(0, 0, 0, .08);
    z-index: 998;
    transition: all .5s
}

.navbar-search.show {
    visibility: unset;
    transform: translateY(0)
}

.navbar-top .navbar-right .sub-menu {
    right: 0
}

.navbar-top .sub-menu li>a {
    white-space: nowrap;
    display: block;
    padding: 5px 15px
}

.navbar-top .sub-menu li>a:hover {
    transform: translateX(5px)
}

.navbar-top .sub-menu .menu-item-has-children>a {
    padding-right: 35px
}

.navbar-top .sub-menu .menu-item-has-children>a>.fa-angle-down {
    position: absolute;
    right: 15px;
    top: 8px
}

.navbar-top .newadd-btns {
    opacity: 1 !important
}

.navbar-top .drop-newadd {
    width: 137px;
    padding: 7px 10px
}

.navbar-top .drop-newadd::before {
    top: -4px;
    left: auto;
    right: 27px
}

.sub-user-box {
    width: 242px;
    word-break: break-word;
    white-space: normal
}

.mobile-navbar.top .sub-user-box {
    width: auto;
    text-align: center;
    margin: auto;
    max-width: 400px
}

.mobile-navbar.top .sub-user-box>ul {
    overflow: hidden
}

.sub-user-box .list-inline>li+li {
    width: calc(100% - 48px)
}

.sub-user-box .social-login-item.button-lg {
    width: 110px !important;
    font-size: 13px
}

.sub-user-box .user-name {
    width: calc(100% - 3em)
}

.sub-user-box .author-tag>* {
    max-height: 41px;
    overflow: hidden;
    flex: auto
}

.sub-vip-card {
    font-size: 12px
}

.sub-vip-card .vip-card {
    display: inline-block;
    width: 240px;
    margin: 5px
}

.sub-vip-card .vip-baicon.abs-center {
    font-size: 10em;
    left: 55%
}

.sub-vip-card .payvip-button {
    font-size: 1em !important;
    margin: 0 !important
}

.sub-vip-card .vip-name {
    font-size: 16px
}

.sub-vip-card .vip-img {
    display: none
}

.sub-user-box .payvip-icon {
    padding: 8px 0
}

.header-user-href>a {
    display: inline-block;
    padding: 10px 10px 0 10px
}

.header-user-href>a:hover {
    opacity: .7
}

.header-user-href>a div+div {
    font-size: 12px
}

.header-user-href .toggle-radius {
    width: 36px;
    height: 36px
}

.navbar-top li.current-menu-item>a,
.navbar-top li:hover>a {
    color: var(--focus-color)
}

.navbar-top li.current-menu-item:before,
.navbar-top li.current-menu-item>a:before,
.navbar-top li:hover:before,
.navbar-top li:hover>a:before {
    opacity: 1
}

.navbar-nav li:hover>a .fa-angle-down {
    transform: rotate(-90deg)
}

.navbar-nav>li:before {
    content: ' ';
    position: absolute;
    width: 100%;
    top: -10px;
    background: var(--focus-color);
    height: 5px;
    border-radius: 0 0 15px 15px;
    opacity: 0
}

.navbar-avatar {
    margin-top: 3px;
    display: block;
    width: 29px;
    height: 29px
}

.swiper-container {
    position: relative;
    overflow: hidden
}

.swiper-wrapper {
    transform: translate3d(0, 0, 0);
    display: flex;
    position: relative
}

.swiper-slide {
    transform: translate3d(0, 0, 0);
    flex-shrink: 0;
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    transition-property: transform
}

.new-swiper,
.overflow-hidden,
.swiper-tab,
.swiper-tab-nav {
    overflow: hidden;
    position: relative
}

.swiper-tab .swiper-slide .swiper-slide {
    height: 100%
}

.new-swiper {
    --pc-height: auto;
    --m-height: auto;
    --max-height: auto;
    --min-height: auto
}

.scale-height {
    --scale-height: 40%;
    --pc-height: 100%;
    --m-height: 100%;
    padding-bottom: var(--scale-height);
    width: 100%;
    height: 0
}

.scale-height .swiper-slide img,
.scale-height .swiper-wrapper {
    position: absolute
}

.new-swiper .swiper-wrapper {
    height: var(--pc-height);
    display: flex
}



.mobile-nav-widget .nopw-sm,
.sidebar .nopw-sm {
    padding-left: 0 !important;
    padding-right: 0 !important
}

.mobile-nav-widget .zib-widget {
    padding: 0 0 10px 0;
    box-shadow: none
}

.controller-hide .dplayer-controller,
.controller-hide .dplayer-controller-mask,
.mobile-nav-widget .dplayer-full-in,
.mobile-nav-widget .dplayer-loop,
.sidebar .dplayer-full-in,
.sidebar .dplayer-loop {
    display: none !important
}

.dplayer-played,
.dplayer-thumb,
.dplayer-volume-bar-inner {
    background: var(--focus-color) !important
}

.dplayer-scale-height {
    padding-bottom: var(--scale-height) !important
}

.dplayer-scale-height .dplayer-video-wrap {
    position: absolute !important
}

@media (min-width:992px) {

    .modal-open .float-btn,
    .modal-open .header {
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important
    }

    #u_sign .modal-dialog {
        width: 800px
    }

    .sign-img {
        padding-right: 35%
    }

    .sign-img+.sign {
        margin-left: 55%
    }

    .fluid-widget .card,
    .site-layout-1 .card {
        width: calc(25% - 16px)
    }

    .fluid-widget .posts-item:not(.card),
    .site-layout-1 .posts-item:not(.card) {
        margin: 8px;
        display: inline-flex;
        width: calc(50% - 16px)
    }

    .fluid-widget .posts-item.no_margin,
    .site-layout-1 .posts-item.no_margin {
        border-radius: var(--main-radius)
    }

    .fluid-widget .posts-mini,
    .site-layout-1 .posts-mini {
        width: calc(33.33%)
    }

    .sidebar .card {
        width: 100%;
        margin: 0
    }

    .sidebar .author-minicard {
        width: 100%;
        margin: 3px 0
    }

    .sidebar .s-desc,
    .sidebar .slide-text {
        font-size: 12px;
        padding: 1em 1.2em
    }

    .lists-nav .tab-nav-theme>li>a:hover {
        background: var(--muted-border-color)
    }

    .container-footer,
    .container-header {
        padding-right: 0;
        padding-left: 0
    }
}

@media (max-width:1200px) {
    .container {
        width: 95%
    }
}

@media (max-width:996px) {
    .nav.navbar-nav {
        position: absolute;
        top: 0;
        background: var(--header-bg);
        box-shadow: 0 4px 10px var(--main-shadow);
        left: 0;
        right: 0;
        padding: 0 20px;
        margin: 0;
        border-radius: var(--main-radius);
        transition: .3s;
        opacity: 0;
        transform: translateY(40px);
        visibility: hidden
    }

    .nav.navbar-nav.show {
        opacity: 1;
        z-index: 998;
        visibility: unset;
        transform: translateY(68px)
    }

    .navbar-nav>li:before {
        top: 0
    }

    .show-nav-but.hide {
        display: unset !important
    }

    body .sidebar.show-sidebar {
        display: unset;
        width: 100%;
        margin-left: 0
    }

    .site-layout-2 .content-layout {
        margin-right: auto
    }

    .site-layout-3 .content-layout {
        margin-left: auto
    }

    .sidebar {
        display: none
    }

    #u_sign .modal-dialog {
        width: auto;
        margin: 30px
    }
}

.drawer-header {
    display: none
}

@media (max-width:767px) {
    .flex.flex-row.flex-col-sm-2 {
        flex-wrap: wrap
    }

    .flex.flex-row.flex-col-sm-2>* {
        flex-basis: 50%
    }

    body.admin-bar {
        margin-top: -46px
    }

    body.nav-fixed {
        padding-top: 88px
    }

    .affix-header-sm.affix {
        left: 0;
        right: 0;
        z-index: 995;
        border-radius: 0;
        background: var(--header-bg);
        box-shadow: 0 4px 10px var(--main-shadow);
        padding: 8px 15px;
        -webkit-backdrop-filter: saturate(5) blur(20px);
        backdrop-filter: saturate(5) blur(20px);
        top: 0
    }

    .affix-header-sm.affix .tab-nav-theme {
        margin-bottom: -5px;
        margin-top: 0;
        border: none;
        padding-bottom: 0
    }

    .affix-header-sm.affix-bottom {
        position: relative;
        opacity: 0
    }

    .index-tab.affix-header-sm.affix {
        padding: 8px 10px
    }

    .index-tab.affix-header-sm.affix+* {
        margin-top: 54px
    }

    .drawer-show {
        overflow: hidden
    }

    .drawer-sm {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
        height: 100%;
        width: 100%;
        visibility: hidden;
        background: var(--body-bg-color);
        transition: .6s;
        padding: 72px 10px 80px;
        z-index: 996;
        overflow-x: hidden;
        overflow-y: auto;
        transform: translateX(110%);
        -webkit-overflow-scrolling: touch
    }

    .drawer-sm.show {
        transition: .6s cubic-bezier(.28, .9, .34, .99);
        visibility: unset;
        transform: unset
    }

    .drawer-header {
        display: flex;
        visibility: hidden;
        opacity: 0;
        position: fixed;
        top: 0;
        width: 100%;
        left: 0;
        background: var(--main-bg-color);
        height: 52px;
        font-size: 18px;
        color: var(--muted-color);
        padding: 0 16px;
        z-index: 1000;
        box-shadow: 0 4px 10px var(--main-shadow);
        transition: .3s
    }

    .drawer-show .drawer-header {
        visibility: unset;
        opacity: 1
    }

    .drawer-close {
        font-size: 22px;
        width: 30px
    }

    .drawer-title {
        flex: 1;
        text-align: center;
        margin-right: 30px
    }

    .modal .modal-dialog {
        width: 500px
    }

    .this-font {
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-sm);
        color: var(--color-sm)
    }

    .container {
        width: 100%
    }

    .container.full-sm {
        padding: 0
    }

    .full-widget-sm {
        box-shadow: none;
        border-radius: 0
    }

    .container .full-widget-sm {
        margin-left: -15px;
        margin-right: -15px
    }

    .navbar-toggle {
        display: unset
    }

    .mini-scrollbar {
        scrollbar-width: none
    }

    .mini-scrollbar::-webkit-scrollbar,
    .navbar-collapse.collapse {
        display: none
    }

    .author-cover .page-cover-con {
        margin: 0
    }

    .author-cover .avatar-img {
        --this-size: 46px;
        margin-left: -8px
    }

    .author-cover .page-cover-con>li+li {
        width: calc(100% - 50px);
        margin: -7px 0 0;
        vertical-align: top
    }

    .author-tab .posts-item {
        padding: 10px 0
    }

    .zib-widget .zib-widget-sm {
        background: 0 0;
        box-shadow: none;
        padding: 0
    }

    .new-swiper .swiper-wrapper {
        height: var(--m-height)
    }

    .header-slider-card .icon-cover-card.zib-widget {
        padding: 10px
    }

    .header-slider-card .icon-cover-card.padding-10 {
        padding: 2px
    }

    .card-1 .header-slider-search,
    .card-2 .header-slider-search {
        top: calc(50% - 1px)
    }

    .header-slider-search {
        font-size: 12px;
        top: calc(50% - 40px)
    }

    .card-5 .header-slider-search,
    .card-6 .header-slider-search {
        top: calc(50% - 83px)
    }

    .card-7 .header-slider-search,
    .card-8 .header-slider-search {
        top: calc(50% - 120px)
    }

    .header-slider-card {
        margin-top: -35px
    }

    .header-slider-search-more.before {
        margin-bottom: 1em
    }

    .header-slider-search .line-form {
        font-size: 14px;
        padding: 4px 12px
    }

    .header-slider-search .line-form-input:focus~.scale-placeholder,
    .header-slider-search .scale-placeholder.is-focus {
        transform: translateY(-32px);
        font-size: 12px;
        color: #fff
    }

    .navbar-toggle {
        margin-left: 0;
        margin-right: 0;
        margin-top: 6px;
        opacity: .7;
        height: 36px
    }

    .navbar-toggle .icon-bar {
        background: var(--main-color)
    }

    .navbar-toggle .icon-bar+.icon-bar {
        margin-top: 5px
    }

    .navbar-top.center .navbar-brand {
        position: absolute;
        width: 100%;
        text-align: center
    }

    .navbar-top.center .navbar-brand+.navbar-toggle {
        float: left
    }

    .navbar-top.center .navbar-brand>img {
        display: unset
    }

    .navbar-top .navbar-logo>img {
        padding: 0
    }

 