/*layui样式*/
.layui-layer-shade {
    opacity: 0;
    transition: opacity .35s cubic-bezier(.34, .69, .1, 1);
    top: 0;
    left: 0;
    width: 100%;
    height: 100%
}

.layui-layer {
    top: 150px;
    left: 0;
    margin: 0;
    padding: 0;
    background-color: #fff;
    -webkit-background-clip: content;
    background-clip: content;
    border-radius: 2px;
    box-shadow: 1px 1px 50px rgba(0, 0, 0, .3)
}

.layui-layer-close {
    position: absolute
}

.layui-layer-content1 {
    position: relative;
    max-height: 500px;
    overflow-y: scroll;
    scrollbar-width: none;
}
.layui-layer-content1::-webkit-scrollbar {
    display: none;
}
.layui-layer-content1 p{
    color: #000001;
    margin: 5px 0px;
}
.layui-layer-content1 h2{
    color:  #000001;
    font-size: 21px;
}
.layui-layer-content1 h4{
    color:  #000001;
    font-size: 21px;
}
.layui-layer-content1 h5{
    color:  #000001;
    margin: 10px 0 0 21px;
}
.layui-layer-content1 li{
    margin-bottom: 5px;
    margin-top: 5px;
    color: #000001;
      list-style: inherit !important;  
}
.layui-layer-content1 ul{
    color: #000001;
    list-style: disc;   
  padding-left: 2.8em;
}
.layui-layer-content1 ol{
    color: #000001;
    list-style: decimal;  
  padding-left: 2.8em;
}


.layui-layer-border {
    border: 1px solid #b2b2b2;
    border: 1px solid rgba(0, 0, 0, .1);
    box-shadow: 1px 1px 5px rgba(0, 0, 0, .2)
}

.layui-layer-btn a,
.layui-layer-setwin span {
    display: inline-block;
    vertical-align: middle
}

.layui-layer-move {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    cursor: move;
    opacity: 0;
    filter: alpha(opacity=0);
    background-color: #fff;
    z-index: 2147483647
}

.layui-layer-resize {
    position: absolute;
    width: 15px;
    height: 15px;
    right: 0;
    bottom: 0;
    cursor: se-resize
}

.layer-anim {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .3s;
    animation-duration: .3s
}

@-webkit-keyframes layer-bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.5);
        transform: scale(.5)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes layer-bounceIn {
    0% {
        opacity: 0;
        -webkit-transform: scale(.5);
        -ms-transform: scale(.5);
        transform: scale(.5)
    }

    100% {
        opacity: 1;
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

.layer-anim-00 {
    -webkit-animation-name: layer-bounceIn;
    animation-name: layer-bounceIn
}

@-webkit-keyframes layer-zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) translateY(-2000px);
        transform: scale(.1) translateY(-2000px);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(.475) translateY(60px);
        transform: scale(.475) translateY(60px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes layer-zoomInDown {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) translateY(-2000px);
        -ms-transform: scale(.1) translateY(-2000px);
        transform: scale(.1) translateY(-2000px);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(.475) translateY(60px);
        -ms-transform: scale(.475) translateY(60px);
        transform: scale(.475) translateY(60px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.layer-anim-01 {
    -webkit-animation-name: layer-zoomInDown;
    animation-name: layer-zoomInDown
}

@-webkit-keyframes layer-fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        transform: translateY(0)
    }
}

@keyframes layer-fadeInUpBig {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0)
    }
}

.layer-anim-02 {
    -webkit-animation-name: layer-fadeInUpBig;
    animation-name: layer-fadeInUpBig
}

@-webkit-keyframes layer-zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) translateX(-2000px);
        transform: scale(.1) translateX(-2000px);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(.475) translateX(48px);
        transform: scale(.475) translateX(48px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

@keyframes layer-zoomInLeft {
    0% {
        opacity: 0;
        -webkit-transform: scale(.1) translateX(-2000px);
        -ms-transform: scale(.1) translateX(-2000px);
        transform: scale(.1) translateX(-2000px);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }

    60% {
        opacity: 1;
        -webkit-transform: scale(.475) translateX(48px);
        -ms-transform: scale(.475) translateX(48px);
        transform: scale(.475) translateX(48px);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
    }
}

.layer-anim-03 {
    -webkit-animation-name: layer-zoomInLeft;
    animation-name: layer-zoomInLeft
}

@-webkit-keyframes layer-rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%) rotate(-120deg);
        transform: translateX(-100%) rotate(-120deg)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0);
        transform: translateX(0) rotate(0)
    }
}

@keyframes layer-rollIn {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-100%) rotate(-120deg);
        -ms-transform: translateX(-100%) rotate(-120deg);
        transform: translateX(-100%) rotate(-120deg)
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0) rotate(0);
        -ms-transform: translateX(0) rotate(0);
        transform: translateX(0) rotate(0)
    }
}

.layer-anim-04 {
    -webkit-animation-name: layer-rollIn;
    animation-name: layer-rollIn
}

@-webkit-keyframes layer-fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes layer-fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

.layer-anim-05 {
    -webkit-animation-name: layer-fadeIn;
    animation-name: layer-fadeIn
}

@-webkit-keyframes layer-shake {

    0%,
    100% {
        -webkit-transform: translateX(0);
        transform: translateX(0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translateX(-10px);
        transform: translateX(-10px)
    }

    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translateX(10px);
        transform: translateX(10px)
    }
}

@keyframes layer-shake {

    0%,
    100% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0)
    }

    10%,
    30%,
    50%,
    70%,
    90% {
        -webkit-transform: translateX(-10px);
        -ms-transform: translateX(-10px);
        transform: translateX(-10px)
    }

    20%,
    40%,
    60%,
    80% {
        -webkit-transform: translateX(10px);
        -ms-transform: translateX(10px);
        transform: translateX(10px)
    }
}

.layer-anim-06 {
    -webkit-animation-name: layer-shake;
    animation-name: layer-shake
}

@keyframes layer-slide-down {
    from {
        transform: translate3d(0, -100%, 0)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes layer-slide-down-out {
    from {
        transform: translate3d(0, 0, 0)
    }

    to {
        transform: translate3d(0, -100%, 0)
    }
}

.layer-anim-slide-down {
    animation-name: layer-slide-down
}

.layer-anim-slide-down-out {
    animation-name: layer-slide-down-out
}

@keyframes layer-slide-left {
    from {
        transform: translate3d(100%, 0, 0)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes layer-slide-left-out {
    from {
        transform: translate3d(0, 0, 0)
    }

    to {
        transform: translate3d(100%, 0, 0)
    }
}

.layer-anim-slide-left {
    animation-name: layer-slide-left
}

.layer-anim-slide-left-out {
    animation-name: layer-slide-left-out
}

@keyframes layer-slide-up {
    from {
        transform: translate3d(0, 100%, 0)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes layer-slide-up-out {
    from {
        transform: translate3d(0, 0, 0)
    }

    to {
        transform: translate3d(0, 100%, 0)
    }
}

.layer-anim-slide-up {
    animation-name: layer-slide-up
}

.layer-anim-slide-up-out {
    animation-name: layer-slide-up-out
}

@keyframes layer-slide-right {
    from {
        transform: translate3d(-100%, 0, 0)
    }

    to {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes layer-slide-right-out {
    from {
        transform: translate3d(0, 0, 0)
    }

    to {
        transform: translate3d(-100%, 0, 0)
    }
}

.layer-anim-slide-right {
    animation-name: layer-slide-right
}

.layer-anim-slide-right-out {
    animation-name: layer-slide-right-out
}
.default-btn{
    padding: 4px 10px;
    background: #2f353b;
    border-radius: 4px;
    color: #fff;
}
.layui-layer-title {
    height: 60px;
    line-height: 50px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 2px 2px 0 0
}
.layui-layer-title1{
    padding: 0 81px 0 16px;
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    border-radius: 2px 2px 0 0
}
.layui-layer-setwin {
    position: absolute;
    right: 8px;
    top: 3px;
    font-size: 0;
    line-height: initial
}

.layui-layer-setwin span {
    position: relative;
    width: 16px;
    height: 16px;
    line-height: 18px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;
    color: #000;
    _overflow: hidden;
    box-sizing: border-box;
    margin-left: 6px;
}

.layui-layer-setwin .layui-layer-min:before {
    content: '';
    position: absolute;
    width: 12px;
    border-bottom: 1px solid #2e2d3c;
    left: 50%;
    top: 50%;
    margin: -.5px 0 0 -6px;
    cursor: pointer;
    _overflow: hidden
}

.layui-layer-setwin .layui-layer-min:hover:before {
    background-color: #2d93ca
}

.layui-layer-setwin .layui-layer-max:after,
.layui-layer-setwin .layui-layer-max:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 1;
    width: 9px;
    height: 9px;
    margin: -5px 0 0 -5px;
    border: 1px solid #2e2d3c
}

.layui-layer-setwin .layui-layer-max:hover:after,
.layui-layer-setwin .layui-layer-max:hover:before {
    border-color: #2d93ca
}

.layui-layer-setwin .layui-layer-min:hover:before {
    background-color: #2d93ca
}

.layui-layer-setwin .layui-layer-maxmin:after,
.layui-layer-setwin .layui-layer-maxmin:before {
    width: 7px;
    height: 7px;
    margin: -3px 0 0 -3px;
    background-color: #fff
}

.layui-layer-setwin .layui-layer-maxmin:after {
    z-index: 0;
    margin: -5px 0 0 -1px
}

.layui-layer-setwin .layui-layer-close {
    cursor: pointer
}

.layui-layer-setwin .layui-layer-close:hover {
    opacity: .7
}



.layui-layer-btn {
    text-align: right;
    padding: 0 15px 12px;
    pointer-events: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.layui-layer-btn a {
    height: 30px;
    line-height: 30px;
    margin: 5px 5px 0;
    padding: 0 16px;
    border: 1px solid #dedede;
    background-color: #fff;
    color: #333;
    border-radius: 2px;
    font-weight: 400;
    cursor: pointer;
    text-decoration: none;
    box-sizing: border-box
}

.layui-layer-btn a:hover {
    opacity: .9;
    text-decoration: none
}

.layui-layer-btn a:active {
    opacity: .8
}

.layui-layer-btn-l {
    text-align: left
}

.layui-layer-btn-c {
    text-align: center
}

.layui-layer-btn-is-loading {
    opacity: .5 !important;
    cursor: not-allowed !important;
    cursor: wait !important;
    overflow: hidden;
    white-space: nowrap;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.layui-layer-btn-is-loading .layui-layer-btn-loading-icon {
    margin-right: 8px;
    font-size: 14px
}

.layui-layer-dialog {
    min-width: 240px
}

.layui-layer-dialog .layui-layer-content {
    position: relative;
    padding: 16px;
    line-height: 24px;
    word-break: break-all;
    overflow: hidden;
    font-size: 14px;
    overflow-x: hidden;
    overflow-y: auto
}

.layui-layer-dialog .layui-layer-content .layui-layer-face {
    position: absolute;
    top: 18px;
    left: 16px;
    color: #959595;
    font-size: 32px;
    _left: -40px
}

.layui-layer-rim {
    border: 6px solid #8d8d8d;
    border: 6px solid rgba(0, 0, 0, .3);
    border-radius: 5px;
    box-shadow: none
}

.layui-layer-msg {
    min-width: 180px;
    border: 1px solid #d3d4d3;
    box-shadow: none
}

.layui-layer-hui {
    min-width: 100px;
    background-color: #000;
    filter: alpha(opacity=60);
    background-color: rgba(0, 0, 0, .6);
    color: #fff;
    border: none
}

.layui-layer-hui .layui-layer-close {
    color: #fff
}

.layui-layer-hui .layui-layer-content {
    padding: 11px 24px;
    text-align: center
}

.layui-layer-dialog .layui-layer-padding {
    padding: 18px 24px 18px 58px;
    text-align: left
}

.layui-layer-page .layui-layer-content {
    position: relative;
}

.layui-layer-iframe .layui-layer-btn,
.layui-layer-page .layui-layer-btn {
    padding-top: 10px
}

.layui-layer-nobg {
    background: 0 0
}

.layui-layer-iframe iframe {
    display: block;
    width: 100%
}

.layui-layer-loading {
    border-radius: 100%;
    background: 0 0;
    box-shadow: none;
    border: none
}

.layui-layer-loading .layui-layer-content {
    width: 76px;
    height: 38px;
    line-height: 38px;
    text-align: center
}

.layui-layer-loading-icon {
    font-size: 38px;
    color: #959595
}

.layui-layer-loading2 {
    text-align: center
}

.layui-layer-loading-2 {
    position: relative;
    height: 38px
}

.layui-layer-loading-2:after,
.layui-layer-loading-2:before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    width: 38px;
    height: 38px;
    margin: -19px 0 0 -19px;
    border-radius: 50%;
    border: 3px solid #d2d2d2;
    box-sizing: border-box
}

.laydate-theme-fullpanel .laydate-time-show .laydate-set-ym span[lay-type=month],
.laydate-theme-fullpanel .laydate-time-show .laydate-set-ym span[lay-type=year],
.laydate-theme-fullpanel .laydate-time-show .layui-laydate-header .layui-icon {
    display: inline-block !important
}

.laydate-theme-fullpanel .laydate-btns-time {
    display: none
}

.laydate-theme-fullpanel .laydate-time-list-hide-1 ol li {
    padding-left: 49px
}

.laydate-theme-fullpanel .laydate-time-list-hide-2 ol li {
    padding-left: 107px
}

html #layuicss-layer {
    display: none;
    position: absolute;
    width: 1989px
}

.layui-layer,
.layui-layer-shade {
    position: fixed;
    _position: absolute;
    pointer-events: auto
}
.layui-layer-loading-2:after {
    border-color: transparent;
    border-left-color: #1e9fff
}

.layui-layer-tips {
    background: 0 0;
    box-shadow: none;
    border: none
}

.layui-layer-tips .layui-layer-content {
    position: relative;
    line-height: 22px;
    min-width: 12px;
    padding: 8px 15px;
    font-size: 12px;
    _float: left;
    border-radius: 2px;
    box-shadow: 1px 1px 3px rgba(0, 0, 0, .2);
    background-color: #000;
    color: #fff
}

.layui-layer-tips .layui-layer-close {
    right: -2px;
    top: -1px
}

.layui-layer-tips i.layui-layer-TipsG {
    position: absolute;
    width: 0;
    height: 0;
    border-width: 8px;
    border-color: transparent;
    border-style: dashed
}

.layui-layer-tips i.layui-layer-TipsB,
.layui-layer-tips i.layui-layer-TipsT {
    left: 5px;
    border-right-style: solid;
    border-right-color: #000
}

.layui-layer-tips i.layui-layer-TipsT {
    bottom: -8px
}

.layui-layer-tips i.layui-layer-TipsB {
    top: -8px
}

.layui-layer-tips i.layui-layer-TipsL,
.layui-layer-tips i.layui-layer-TipsR {
    top: 5px;
    border-bottom-style: solid;
    border-bottom-color: #000
}

.layui-layer-tips i.layui-layer-TipsR {
    left: -8px
}

.layui-layer-tips i.layui-layer-TipsL {
    right: -8px
}

.layui-layer-lan .layui-layer-title {
    background: #4476a7;
    color: #fff;
    border: none
}

.layui-layer-lan .layui-layer-btn {
    padding: 5px 10px 10px;
    border-top: 1px solid #e9e7e7
}

.layui-layer-lan .layui-layer-btn a {
    background: #fff;
    border-color: #e9e7e7;
    color: #333
}

.layui-layer-lan .layui-layer-btn .layui-layer-btn1 {
    background: #c9c5c5
}

.layui-layer-molv .layui-layer-title {
    background: #009f95;
    color: #fff;
    border: none
}

.layui-layer-molv .layui-layer-btn a {
    background: #009f95;
    border-color: #009f95
}

.layui-layer-molv .layui-layer-btn .layui-layer-btn1 {
    background: #92b8b1
}

.layui-layer-lan .layui-layer-setwin .layui-icon,
.layui-layer-molv .layui-layer-setwin .layui-icon {
    color: #fff
}

.layui-layer-win10 {
    border: 1px solid #aaa;
    box-shadow: 1px 1px 6px rgba(0, 0, 0, .3);
    border-radius: none
}

.layui-layer-win10 .layui-layer-title {
    height: 32px;
    line-height: 32px;
    padding-left: 8px;
    border-bottom: none;
    font-size: 12px
}

.layui-layer-win10 .layui-layer-setwin {
    right: 0;
    top: 0
}

.layui-layer-win10 .layui-layer-setwin span {
    margin-left: 0;
    width: 32px;
    height: 32px;
    padding: 8px
}

.layui-layer-win10.layui-layer-page .layui-layer-setwin span {
    width: 38px
}

.layui-layer-win10 .layui-layer-setwin span:hover {
    background-color: #e5e5e5
}

.layui-layer-win10 .layui-layer-setwin span.layui-icon-close:hover {
    background-color: #e81123;
    color: #fff
}

.layui-layer-win10.layui-layer-dialog .layui-layer-content {
    padding: 8px 16px 32px;
    color: #0033bc
}

.layui-layer-win10.layui-layer-dialog .layui-layer-padding {
    padding-top: 18px;
    padding-left: 58px
}

.layui-layer-win10 .layui-layer-btn {
    padding: 5px 5px 10px;
    border-top: 1px solid #dfdfdf;
    background-color: #f0f0f0
}

.layui-layer-win10 .layui-layer-btn a {
    height: 20px;
    line-height: 18px;
    background-color: #e1e1e1;
    border-color: #adadad;
    color: #000;
    font-size: 12px;
    transition: all .3s
}

.layui-layer-win10 .layui-layer-btn a:hover {
    border-color: #2a8edd;
    background-color: #e5f1fb
}

.layui-layer-win10 .layui-layer-btn .layui-layer-btn0 {
    border-color: #0078d7
}

.layui-layer-prompt .layui-layer-input {
    display: block;
    width: 260px;
    height: 36px;
    margin: 0 auto;
    line-height: 30px;
    padding-left: 10px;
    border: 1px solid #e6e6e6;
    color: #333
}

.layui-layer-prompt textarea.layui-layer-input {
    width: 300px;
    height: 100px;
    line-height: 20px;
    padding: 6px 10px
}

.layui-layer-prompt .layui-layer-content {
    padding: 16px
}

.layui-layer-prompt .layui-layer-btn {
    padding-top: 0
}

.layui-layer-tab {
    box-shadow: 1px 1px 50px rgba(0, 0, 0, .4)
}

.layui-layer-tab .layui-layer-title {
    padding-left: 0;
    overflow: visible
}

.layui-layer-tab .layui-layer-title span {
    position: relative;
    display: inline-block;
    vertical-align: top;
    border-left: 1px solid transparent;
    border-right: 1px solid transparent;
    min-width: 80px;
    max-width: 300px;
    padding: 0 16px;
    text-align: center;
    cursor: default;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    cursor: pointer
}

.layui-layer-tab .layui-layer-title span.layui-this {
    height: 51px;
    border-left-color: #eee;
    border-right-color: #eee;
    background-color: #fff;
    z-index: 10
}

.layui-layer-tab .layui-layer-title span:first-child {
    border-left-color: transparent
}

.layui-layer-tabmain {
    line-height: 24px;
    clear: both
}

.layui-layer-tabmain .layui-layer-tabli {
    display: none
}

.layui-layer-tabmain .layui-layer-tabli.layui-this {
    display: block
}

.layui-layer-photos {
    background: 0 0;
    box-shadow: none
}

.layui-layer-photos .layui-layer-content {
    overflow: visible;
    text-align: center
}

.layui-layer-photos .layer-layer-photos-main img {
    position: relative;
    width: 100%;
    display: inline-block;
    vertical-align: top
}

.layui-layer-photos-next,
.layui-layer-photos-prev {
    position: fixed;
    top: 50%;
    width: 52px;
    height: 52px;
    line-height: 52px;
    margin-top: -26px;
    cursor: pointer;
    font-size: 52px;
    color: #717171
}

.layui-layer-photos-prev {
    left: 32px
}

.layui-layer-photos-next {
    right: 32px
}

.layui-layer-photos-next:hover,
.layui-layer-photos-prev:hover {
    color: #959595
}

.layui-layer-photos-toolbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 52px;
    line-height: 52px;
    background-color: rgba(0, 0, 0, .32);
    color: #fff;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0
}

.layui-layer-photos-toolbar>* {
    display: inline-block;
    vertical-align: top;
    padding: 0 16px;
    font-size: 12px;
    color: #fff
}

.layui-layer-photos-toolbar * {
    font-size: 12px
}

.layui-layer-photos-header {
    top: 0;
    bottom: auto
}

.layui-layer-photos-header>span {
    cursor: pointer
}

.layui-layer-photos-header>span:hover {
    background-color: rgba(51, 51, 51, .32)
}

.layui-layer-photos-header .layui-icon {
    font-size: 18px
}

.layui-layer-photos-footer>h3 {
    max-width: 65%;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.layui-layer-photos-footer a:hover {
    text-decoration: underline
}

.layui-layer-photos-footer em {
    font-style: normal
}

@-webkit-keyframes layer-bounceOut {
    100% {
        opacity: 0;
        -webkit-transform: scale(.7);
        transform: scale(.7)
    }

    30% {
        -webkit-transform: scale(1.05);
        transform: scale(1.05)
    }

    0% {
        -webkit-transform: scale(1);
        transform: scale(1)
    }
}

@keyframes layer-bounceOut {
    100% {
        opacity: 0;
        -webkit-transform: scale(.7);
        -ms-transform: scale(.7);
        transform: scale(.7)
    }

    30% {
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05)
    }

    0% {
        -webkit-transform: scale(1);
        -ms-transform: scale(1);
        transform: scale(1)
    }
}

.layer-anim-close {
    -webkit-animation-name: layer-bounceOut;
    animation-name: layer-bounceOut;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation-duration: .2s;
    animation-duration: .2s
}

:root {
    --f-spinner-width: 36px;
    --f-spinner-height: 36px;
    --f-spinner-color-1: rgba(0, 0, 0, 0.1);
    --f-spinner-color-2: rgba(17, 24, 28, 0.8);
    --f-spinner-stroke: 2.75
}

.f-spinner {
    margin: auto;
    padding: 0;
    width: var(--f-spinner-width);
    height: var(--f-spinner-height)
}

.f-spinner svg {
    width: 100%;
    height: 100%;
    vertical-align: top;
    animation: f-spinner-rotate 2s linear infinite
}

.f-spinner svg * {
    stroke-width: var(--f-spinner-stroke);
    fill: none
}

.f-spinner svg *:first-child {
    stroke: var(--f-spinner-color-1)
}

.f-spinner svg *:last-child {
    stroke: var(--f-spinner-color-2);
    animation: f-spinner-dash 2s ease-in-out infinite
}

@keyframes f-spinner-rotate {
    100% {
        transform: rotate(360deg)
    }
}

@keyframes f-spinner-dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0
    }

    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35
    }

    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124
    }
}

.f-throwOutUp {
    animation: var(--f-throw-out-duration, 0.175s) ease-out both f-throwOutUp
}

.f-throwOutDown {
    animation: var(--f-throw-out-duration, 0.175s) ease-out both f-throwOutDown
}

@keyframes f-throwOutUp {
    to {
        transform: translate3d(0, calc(var(--f-throw-out-distance, 150px) * -1), 0);
        opacity: 0
    }
}

@keyframes f-throwOutDown {
    to {
        transform: translate3d(0, var(--f-throw-out-distance, 150px), 0);
        opacity: 0
    }
}

.f-zoomInUp {
    animation: var(--f-transition-duration, 0.2s) ease .1s both f-zoomInUp
}

.f-zoomOutDown {
    animation: var(--f-transition-duration, 0.2s) ease both f-zoomOutDown
}

@keyframes f-zoomInUp {
    from {
        transform: scale(0.975) translate3d(0, 16px, 0);
        opacity: 0
    }

    to {
        transform: scale(1) translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes f-zoomOutDown {
    to {
        transform: scale(0.975) translate3d(0, 16px, 0);
        opacity: 0
    }
}

.f-fadeIn {
    animation: var(--f-transition-duration, 0.2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeIn;
    z-index: 2
}

.f-fadeOut {
    animation: var(--f-transition-duration, 0.2s) var(--f-transition-easing, ease) var(--f-transition-delay, 0s) both f-fadeOut;
    z-index: 1
}

@keyframes f-fadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes f-fadeOut {
    100% {
        opacity: 0
    }
}

.f-fadeFastIn {
    animation: var(--f-transition-duration, 0.2s) ease-out both f-fadeFastIn;
    z-index: 2
}

.f-fadeFastOut {
    animation: var(--f-transition-duration, 0.1s) ease-out both f-fadeFastOut;
    z-index: 2
}

@keyframes f-fadeFastIn {
    0% {
        opacity: .75
    }

    100% {
        opacity: 1
    }
}

@keyframes f-fadeFastOut {
    100% {
        opacity: 0
    }
}

.f-fadeSlowIn {
    animation: var(--f-transition-duration, 0.5s) ease both f-fadeSlowIn;
    z-index: 2
}

.f-fadeSlowOut {
    animation: var(--f-transition-duration, 0.5s) ease both f-fadeSlowOut;
    z-index: 1
}

@keyframes f-fadeSlowIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes f-fadeSlowOut {
    100% {
        opacity: 0
    }
}

.f-crossfadeIn {
    animation: var(--f-transition-duration, 0.2s) ease-out both f-crossfadeIn;
    z-index: 2
}

.f-crossfadeOut {
    animation: calc(var(--f-transition-duration, 0.2s)*.5) linear .1s both f-crossfadeOut;
    z-index: 1
}

@keyframes f-crossfadeIn {
    0% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes f-crossfadeOut {
    100% {
        opacity: 0
    }
}

.f-slideIn.from-next {
    animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideInNext
}

.f-slideIn.from-prev {
    animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideInPrev
}

.f-slideOut.to-next {
    animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideOutNext
}

.f-slideOut.to-prev {
    animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-slideOutPrev
}

@keyframes f-slideInPrev {
    0% {
        transform: translateX(100%)
    }

    100% {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes f-slideInNext {
    0% {
        transform: translateX(-100%)
    }

    100% {
        transform: translate3d(0, 0, 0)
    }
}

@keyframes f-slideOutNext {
    100% {
        transform: translateX(-100%)
    }
}

@keyframes f-slideOutPrev {
    100% {
        transform: translateX(100%)
    }
}

.f-classicIn.from-next {
    animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicInNext;
    z-index: 2
}

.f-classicIn.from-prev {
    animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicInPrev;
    z-index: 2
}

.f-classicOut.to-next {
    animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicOutNext;
    z-index: 1
}

.f-classicOut.to-prev {
    animation: var(--f-transition-duration, 0.85s) cubic-bezier(0.16, 1, 0.3, 1) f-classicOutPrev;
    z-index: 1
}

@keyframes f-classicInNext {
    0% {
        transform: translateX(-75px);
        opacity: 0
    }

    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes f-classicInPrev {
    0% {
        transform: translateX(75px);
        opacity: 0
    }

    100% {
        transform: translate3d(0, 0, 0);
        opacity: 1
    }
}

@keyframes f-classicOutNext {
    100% {
        transform: translateX(-75px);
        opacity: 0
    }
}

@keyframes f-classicOutPrev {
    100% {
        transform: translateX(75px);
        opacity: 0
    }
}

:root {
    --f-button-width: 40px;
    --f-button-height: 40px;
    --f-button-border: 0;
    --f-button-border-radius: 0;
    --f-button-color: #374151;
    --f-button-bg: #f8f8f8;
    --f-button-hover-bg: #e0e0e0;
    --f-button-active-bg: #d0d0d0;
    --f-button-shadow: none;
    --f-button-transition: all 0.15s ease;
    --f-button-transform: none;
    --f-button-svg-width: 20px;
    --f-button-svg-height: 20px;
    --f-button-svg-stroke-width: 1.5;
    --f-button-svg-fill: none;
    --f-button-svg-filter: none;
    --f-button-svg-disabled-opacity: 0.65
}

.f-button {
    display: flex;
    justify-content: center;
    align-items: center;
    box-sizing: content-box;
    position: relative;
    margin: 0;
    padding: 0;
    width: var(--f-button-width);
    height: var(--f-button-height);
    border: var(--f-button-border);
    border-radius: var(--f-button-border-radius);
    color: var(--f-button-color);
    background: var(--f-button-bg);
    box-shadow: var(--f-button-shadow);
    pointer-events: all;
    cursor: pointer;
    transition: var(--f-button-transition)
}

@media(hover: hover) {
    .f-button:hover:not([disabled]) {
        color: var(--f-button-hover-color);
        background-color: var(--f-button-hover-bg)
    }
}

.f-button:active:not([disabled]) {
    background-color: var(--f-button-active-bg)
}

.f-button:focus:not(:focus-visible) {
    outline: none
}

.f-button:focus-visible {
    outline: none;
    box-shadow: inset 0 0 0 var(--f-button-outline, 2px) var(--f-button-outline-color, var(--f-button-color))
}

.f-button svg {
    width: var(--f-button-svg-width);
    height: var(--f-button-svg-height);
    fill: var(--f-button-svg-fill);
    stroke: currentColor;
    stroke-width: var(--f-button-svg-stroke-width);
    stroke-linecap: round;
    stroke-linejoin: round;
    transition: opacity .15s ease;
    transform: var(--f-button-transform);
    filter: var(--f-button-svg-filter);
    pointer-events: none
}

.f-button[disabled] {
    cursor: default
}

.f-button[disabled] svg {
    opacity: var(--f-button-svg-disabled-opacity)
}

html.with-fancybox {
    width: auto;
    overflow: visible;
    scroll-behavior: auto
}

html.with-fancybox body {
    touch-action: none
}

html.with-fancybox body.hide-scrollbar {
    width: auto;
    margin-right: calc(var(--fancybox-body-margin, 0px) + var(--fancybox-scrollbar-compensate, 0px));
    overflow: hidden !important;
    overscroll-behavior-y: none
}

.fancybox__container {
    --fancybox-color: #dbdbdb;
    --fancybox-hover-color: #fff;
    --fancybox-bg: rgba(24, 24, 27, 0.98);
    --fancybox-slide-gap: 10px;
    --f-spinner-width: 50px;
    --f-spinner-height: 50px;
    --f-spinner-color-1: rgba(255, 255, 255, 0.1);
    --f-spinner-color-2: #bbb;
    --f-spinner-stroke: 3.65;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    direction: ltr;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: #f8f8f8;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    overflow: visible;
    z-index: var(--fancybox-zIndex, 1050);
    outline: none;
    transform-origin: top left;
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: 100%;
    text-size-adjust: 100%;
    overscroll-behavior-y: contain
}

.fancybox__container *,
.fancybox__container *::before,
.fancybox__container *::after {
    box-sizing: inherit
}

.fancybox__container::backdrop {
    background-color: rgba(0, 0, 0, 0)
}

.fancybox__backdrop {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: -1;
    background: var(--fancybox-bg);
    opacity: var(--fancybox-opacity, 1);
    will-change: opacity
}

.fancybox__viewport {
    width: 100%;
    height: 100%
}

.fancybox__viewport.is-draggable {
    cursor: move;
    cursor: grab
}

.fancybox__viewport.is-dragging {
    cursor: move;
    cursor: grabbing
}

.fancybox__track {
    display: flex;
    margin: 0 auto;
    height: 100%
}

.fancybox__slide {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: 100%;
    margin: 0 var(--fancybox-slide-gap) 0 0;
    padding: 4px;
    overflow: auto;
    overscroll-behavior: contain;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden
}

.fancybox__container:not(.is-compact) .fancybox__slide.has-close-btn {
    padding-top: 40px
}

.fancybox__slide.has-iframe,
.fancybox__slide.has-video,
.fancybox__slide.has-html5video {
    overflow: hidden
}

.fancybox__slide.has-image {
    overflow: hidden
}

.fancybox__slide.has-image.is-animating,
.fancybox__slide.has-image.is-selected {
    overflow: visible
}

.fancybox__slide::before,
.fancybox__slide::after {
    content: "";
    flex: 0 0 0;
    margin: auto
}

.fancybox__backdrop:empty,
.fancybox__viewport:empty,
.fancybox__track:empty,
.fancybox__slide:empty {
    display: block
}

.fancybox__content {
    align-self: center;
    display: flex;
    flex-direction: column;
    position: relative;
    margin: 0;
    padding: 2rem;
    max-width: 100%;
    color: var(--fancybox-content-color, #374151);
    background: var(--fancybox-content-bg, #fff);
    cursor: default;
    border-radius: 0;
    z-index: 20
}

.is-loading .fancybox__content {
    opacity: 0
}

.is-draggable .fancybox__content {
    cursor: move;
    cursor: grab
}

.can-zoom_in .fancybox__content {
    cursor: zoom-in
}

.can-zoom_out .fancybox__content {
    cursor: zoom-out
}

.is-dragging .fancybox__content {
    cursor: move;
    cursor: grabbing
}

.fancybox__content [data-selectable],
.fancybox__content [contenteditable] {
    cursor: auto
}

.fancybox__slide.has-image>.fancybox__content {
    padding: 0;
    background: rgba(0, 0, 0, 0);
    min-height: 1px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    transition: none;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden
}

.fancybox__slide.has-image>.fancybox__content>picture>img {
    width: 100%;
    height: auto;
    max-height: 100%
}

.is-animating .fancybox__content,
.is-dragging .fancybox__content {
    will-change: transform, width, height
}

.fancybox-image {
    margin: auto;
    display: block;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    user-select: none;
    filter: blur(0px)
}

.fancybox__caption {
    align-self: center;
    max-width: 100%;
    flex-shrink: 0;
    margin: 0;
    padding: 14px 0 4px 0;
    overflow-wrap: anywhere;
    line-height: 1.375;
    color: var(--fancybox-color, currentColor);
    opacity: var(--fancybox-opacity, 1);
    cursor: auto;
    visibility: visible
}

.is-loading .fancybox__caption,
.is-closing .fancybox__caption {
    opacity: 0;
    visibility: hidden
}

.is-compact .fancybox__caption {
    padding-bottom: 0
}

.f-button.is-close-btn {
    --f-button-svg-stroke-width: 2;
    position: absolute;
    top: 0;
    right: 8px;
    z-index: 40
}

.fancybox__content>.f-button.is-close-btn {
    --f-button-width: 34px;
    --f-button-height: 34px;
    --f-button-border-radius: 4px;
    --f-button-color: var(--fancybox-color, #fff);
    --f-button-hover-color: var(--fancybox-color, #fff);
    --f-button-bg: transparent;
    --f-button-hover-bg: transparent;
    --f-button-active-bg: transparent;
    --f-button-svg-width: 22px;
    --f-button-svg-height: 22px;
    position: absolute;
    top: -38px;
    right: 0;
    opacity: .75
}

.is-loading .fancybox__content>.f-button.is-close-btn {
    visibility: hidden
}

.is-zooming-out .fancybox__content>.f-button.is-close-btn {
    visibility: hidden
}

.fancybox__content>.f-button.is-close-btn:hover {
    opacity: 1
}

.fancybox__footer {
    padding: 0;
    margin: 0;
    position: relative
}

.fancybox__footer .fancybox__caption {
    width: 100%;
    padding: 24px;
    opacity: var(--fancybox-opacity, 1);
    transition: all .25s ease
}

.is-compact .fancybox__footer {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 20;
    background: rgba(24, 24, 27, .5)
}

.is-compact .fancybox__footer .fancybox__caption {
    padding: 12px
}

.is-compact .fancybox__content>.f-button.is-close-btn {
    --f-button-border-radius: 50%;
    --f-button-color: #fff;
    --f-button-hover-color: #fff;
    --f-button-outline-color: #000;
    --f-button-bg: rgba(0, 0, 0, 0.6);
    --f-button-active-bg: rgba(0, 0, 0, 0.6);
    --f-button-hover-bg: rgba(0, 0, 0, 0.6);
    --f-button-svg-width: 18px;
    --f-button-svg-height: 18px;
    --f-button-svg-filter: none;
    top: 5px;
    right: 5px
}

.fancybox__nav {
    --f-button-width: 50px;
    --f-button-height: 50px;
    --f-button-border: 0;
    --f-button-border-radius: 50%;
    --f-button-color: var(--fancybox-color);
    --f-button-hover-color: var(--fancybox-hover-color);
    --f-button-bg: transparent;
    --f-button-hover-bg: rgba(24, 24, 27, 0.3);
    --f-button-active-bg: rgba(24, 24, 27, 0.5);
    --f-button-shadow: none;
    --f-button-transition: all 0.15s ease;
    --f-button-transform: none;
    --f-button-svg-width: 26px;
    --f-button-svg-height: 26px;
    --f-button-svg-stroke-width: 2.5;
    --f-button-svg-fill: none;
    --f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, 0.5));
    --f-button-svg-disabled-opacity: 0.65;
    --f-button-next-pos: 1rem;
    --f-button-prev-pos: 1rem;
    opacity: var(--fancybox-opacity, 1)
}

.fancybox__nav .f-button:before {
    position: absolute;
    content: "";
    top: -30px;
    right: -20px;
    left: -20px;
    bottom: -30px;
    z-index: 1
}

.is-idle .fancybox__nav {
    animation: .15s ease-out both f-fadeOut
}

.is-idle.is-compact .fancybox__footer {
    pointer-events: none;
    animation: .15s ease-out both f-fadeOut
}

.fancybox__slide>.f-spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    margin: var(--f-spinner-top, calc(var(--f-spinner-width) * -0.5)) 0 0 var(--f-spinner-left, calc(var(--f-spinner-height) * -0.5));
    z-index: 30;
    cursor: pointer
}

.fancybox-protected {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 40;
    user-select: none
}

.fancybox-ghost {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    object-fit: contain;
    z-index: 40;
    user-select: none;
    pointer-events: none
}

.fancybox-focus-guard {
    outline: none;
    opacity: 0;
    position: fixed;
    pointer-events: none
}

.fancybox__container:not([aria-hidden]) {
    opacity: 0
}

.fancybox__container.is-animated[aria-hidden=true] .fancybox__backdrop {
    animation: var(--f-backdrop-exit-duration, 0.35s) ease forwards f-fadeOut
}

.has-iframe .fancybox__content,
.has-map .fancybox__content,
.has-pdf .fancybox__content,
.has-youtube .fancybox__content,
.has-vimeo .fancybox__content,
.has-html5video .fancybox__content {
    max-width: 100%;
    flex-shrink: 1;
    min-height: 1px;
    overflow: visible
}

.has-iframe .fancybox__content,
.has-map .fancybox__content,
.has-pdf .fancybox__content {
    width: calc(100% - 120px);
    height: 90%
}

.fancybox__container.is-compact .has-iframe .fancybox__content,
.fancybox__container.is-compact .has-map .fancybox__content,
.fancybox__container.is-compact .has-pdf .fancybox__content {
    width: 100%;
    height: 100%
}

.has-youtube .fancybox__content,
.has-vimeo .fancybox__content,
.has-html5video .fancybox__content {
    width: 960px;
    height: 540px;
    max-width: 100%;
    max-height: 100%
}

.has-map .fancybox__content,
.has-pdf .fancybox__content,
.has-youtube .fancybox__content,
.has-vimeo .fancybox__content,
.has-html5video .fancybox__content {
    padding: 0;
    background: rgba(24, 24, 27, .9);
    color: #fff
}

.has-map .fancybox__content {
    background: #e5e3df
}

.fancybox__html5video,
.fancybox__iframe {
    border: 0;
    display: block;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0)
}

.fancybox-placeholder {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    -webkit-clip-path: inset(50%) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    white-space: nowrap !important
}
.f-thumbs {
    position: relative;
    flex: 0 0 auto;
    margin: 0;
    overflow: hidden;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    user-select: none;
    perspective: 1000px;
    transform: translateZ(0)
}

.f-thumbs .f-spinner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 2px;
    background-image: linear-gradient(#ebeff2, #e2e8f0);
    z-index: -1
}

.f-thumbs .f-spinner svg {
    display: none
}

.f-thumbs.is-vertical {
    height: 100%
}

.f-thumbs__viewport {
    width: 100%;
    height: auto;
    overflow: hidden;
    transform: translate3d(0, 0, 0)
}

.f-thumbs__track {
    display: flex
}

.f-thumbs__slide {
    position: relative;
    flex: 0 0 auto;
    box-sizing: content-box;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    width: var(--f-thumb-width);
    height: var(--f-thumb-height);
    overflow: visible;
    cursor: pointer
}

.f-thumbs__slide.is-loading img {
    opacity: 0
}

.is-classic .f-thumbs__viewport {
    height: 100%
}

.is-modern .f-thumbs__track {
    width: max-content
}

.is-modern .f-thumbs__track::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc((var(--f-thumb-clip-width, 0))*-0.5);
    width: calc(var(--width, 0)*1px + var(--f-thumb-clip-width, 0));
    cursor: pointer
}

.is-modern .f-thumbs__slide {
    width: var(--f-thumb-clip-width);
    transform: translate3d(calc(var(--shift, 0) * -1px), 0, 0);
    transition: none;
    pointer-events: none
}

.is-modern.is-resting .f-thumbs__slide {
    transition: transform .33s ease
}

.is-modern.is-resting .f-thumbs__slide__button {
    transition: clip-path .33s ease
}

.is-using-tab .is-modern .f-thumbs__slide:focus-within {
    filter: drop-shadow(-1px 0px 0px var(--f-thumb-outline-color)) drop-shadow(2px 0px 0px var(--f-thumb-outline-color)) drop-shadow(0px -1px 0px var(--f-thumb-outline-color)) drop-shadow(0px 2px 0px var(--f-thumb-outline-color))
}

.f-thumbs__slide__button {
    appearance: none;
    width: var(--f-thumb-width);
    height: 100%;
    margin: 0 -100% 0 -100%;
    padding: 0;
    border: 0;
    position: relative;
    border-radius: var(--f-thumb-border-radius);
    overflow: hidden;
    background: rgba(0, 0, 0, 0);
    outline: none;
    cursor: pointer;
    pointer-events: auto;
    touch-action: manipulation;
    opacity: var(--f-thumb-opacity);
    transition: opacity .2s ease
}

.f-thumbs__slide__button:hover {
    opacity: var(--f-thumb-hover-opacity)
}

.f-thumbs__slide__button:focus:not(:focus-visible) {
    outline: none
}

.f-thumbs__slide__button:focus-visible {
    outline: none;
    opacity: var(--f-thumb-selected-opacity)
}

.is-modern .f-thumbs__slide__button {
    --clip-path: inset(0 calc(((var(--f-thumb-width, 0) - var(--f-thumb-clip-width, 0))) * (1 - var(--progress, 0)) * 0.5) round var(--f-thumb-border-radius, 0));
    clip-path: var(--clip-path)
}

.is-classic .is-nav-selected .f-thumbs__slide__button {
    opacity: var(--f-thumb-selected-opacity)
}

.is-classic .is-nav-selected .f-thumbs__slide__button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    bottom: 0;
    border: var(--f-thumb-outline, 0) solid var(--f-thumb-outline-color, transparent);
    border-radius: var(--f-thumb-border-radius);
    animation: f-fadeIn .2s ease-out;
    z-index: 10
}

.f-thumbs__slide__img {
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: var(--f-thumb-offset);
    box-sizing: border-box;
    pointer-events: none;
    object-fit: cover;
    border-radius: var(--f-thumb-border-radius)
}

.f-thumbs.is-horizontal .f-thumbs__track {
    padding: 8px 0 12px 0
}

.f-thumbs.is-horizontal .f-thumbs__slide {
    margin: 0 var(--f-thumb-gap) 0 0
}

.f-thumbs.is-vertical .f-thumbs__track {
    flex-wrap: wrap;
    padding: 0 8px
}

.f-thumbs.is-vertical .f-thumbs__slide {
    margin: 0 0 var(--f-thumb-gap) 0
}

.fancybox__thumbs {
    --f-thumb-width: 96px;
    --f-thumb-height: 72px;
    --f-thumb-border-radius: 2px;
    --f-thumb-outline: 2px;
    --f-thumb-outline-color: #ededed;
    position: relative;
    opacity: var(--fancybox-opacity, 1);
    transition: max-height .35s cubic-bezier(0.23, 1, 0.32, 1)
}

.fancybox__thumbs.is-classic {
    --f-thumb-gap: 8px;
    --f-thumb-opacity: 0.5;
    --f-thumb-hover-opacity: 1
}

.fancybox__thumbs.is-classic .f-spinner {
    background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))
}

.fancybox__thumbs.is-modern {
    --f-thumb-gap: 4px;
    --f-thumb-extra-gap: 16px;
    --f-thumb-clip-width: 46px;
    --f-thumb-opacity: 1;
    --f-thumb-hover-opacity: 1
}

.fancybox__thumbs.is-modern .f-spinner {
    background-image: linear-gradient(rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05))
}

.fancybox__thumbs.is-horizontal {
    padding: 0 var(--f-thumb-gap)
}

.fancybox__thumbs.is-vertical {
    padding: var(--f-thumb-gap) 0
}

.is-compact .fancybox__thumbs {
    --f-thumb-width: 64px;
    --f-thumb-clip-width: 32px;
    --f-thumb-height: 48px;
    --f-thumb-extra-gap: 10px
}

.fancybox__thumbs.is-masked {
    max-height: 0px !important
}

.is-closing .fancybox__thumbs {
    transition: none !important
}

.fancybox__toolbar {
    --f-progress-color: var(--fancybox-color, rgba(255, 255, 255, 0.94));
    --f-button-width: 46px;
    --f-button-height: 46px;
    --f-button-color: var(--fancybox-color);
    --f-button-hover-color: var(--fancybox-hover-color);
    --f-button-bg: rgba(24, 24, 27, 0.65);
    --f-button-hover-bg: rgba(70, 70, 73, 0.65);
    --f-button-active-bg: rgba(90, 90, 93, 0.65);
    --f-button-border-radius: 0;
    --f-button-svg-width: 24px;
    --f-button-svg-height: 24px;
    --f-button-svg-stroke-width: 1.5;
    --f-button-svg-filter: drop-shadow(1px 1px 1px rgba(24, 24, 27, 0.15));
    --f-button-svg-fill: none;
    --f-button-svg-disabled-opacity: 0.65;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI Adjusted", "Segoe UI", "Liberation Sans", sans-serif;
    color: var(--fancybox-color, currentColor);
    opacity: var(--fancybox-opacity, 1);
    text-shadow: var(--fancybox-toolbar-text-shadow, 1px 1px 1px rgba(0, 0, 0, 0.5));
    pointer-events: none;
    z-index: 20
}

.fancybox__toolbar :focus-visible {
    z-index: 1
}

.fancybox__toolbar.is-absolute,
.is-compact .fancybox__toolbar {
    position: absolute;
    top: 0;
    left: 0;
    right: 0
}

.is-idle .fancybox__toolbar {
    pointer-events: none;
    animation: .15s ease-out both f-fadeOut
}

.fancybox__toolbar__column {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start
}

.fancybox__toolbar__column.is-left,
.fancybox__toolbar__column.is-right {
    flex-grow: 1;
    flex-basis: 0
}

.fancybox__toolbar__column.is-right {
    display: flex;
    justify-content: flex-end;
    flex-wrap: nowrap
}

.fancybox__infobar {
    padding: 0 5px;
    line-height: var(--f-button-height);
    text-align: center;
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    -webkit-font-smoothing: subpixel-antialiased;
    cursor: default;
    user-select: none
}

.fancybox__infobar span {
    padding: 0 5px
}

.fancybox__infobar:not(:first-child):not(:last-child) {
    background: var(--f-button-bg)
}

[data-fancybox-toggle-slideshow] {
    position: relative
}

[data-fancybox-toggle-slideshow] .f-progress {
    height: 100%;
    opacity: .3
}

[data-fancybox-toggle-slideshow] svg g:first-child {
    display: flex
}

[data-fancybox-toggle-slideshow] svg g:last-child {
    display: none
}

.has-slideshow [data-fancybox-toggle-slideshow] svg g:first-child {
    display: none
}

.has-slideshow [data-fancybox-toggle-slideshow] svg g:last-child {
    display: flex
}

[data-fancybox-toggle-fullscreen] svg g:first-child {
    display: flex
}

[data-fancybox-toggle-fullscreen] svg g:last-child {
    display: none
}

:fullscreen [data-fancybox-toggle-fullscreen] svg g:first-child {
    display: none
}

:fullscreen [data-fancybox-toggle-fullscreen] svg g:last-child {
    display: flex
}

.f-progress {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    transform: scaleX(0);
    transform-origin: 0;
    transition-property: transform;
    transition-timing-function: linear;
    background: var(--f-progress-color, var(--f-carousel-theme-color, #0091ff));
    z-index: 30;
    user-select: none;
    pointer-events: none
}

/*!
 *  Font Awesome 4.7.0 by @davegandy - http://fontawesome.io - @fontawesome
 *  License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
 */
@font-face {
    font-family: 'FontAwesome';
    src: url('fontawesome-webfont.eot?v=4.7.0');
    src: url('fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('../public/webfonts/../public/webfonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'), url('../public/webfonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal
}

.fa {
    display: inline-block;
    font: normal normal normal 14px/1 FontAwesome;
    font-size: inherit;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

.fa-lg {
    font-size: 1.33333333em;
    line-height: .75em;
    vertical-align: -15%
}

.fa-2x {
    font-size: 2em
}

.fa-3x {
    font-size: 3em
}

.fa-4x {
    font-size: 4em
}

.fa-5x {
    font-size: 5em
}

.fa-fw {
    width: 1.28571429em;
    text-align: center
}

.fa-ul {
    padding-left: 0;
    margin-left: 2.14285714em;
    list-style-type: none
}

.fa-ul>li {
    position: relative
}

.fa-li {
    position: absolute;
    left: -2.14285714em;
    width: 2.14285714em;
    top: .14285714em;
    text-align: center
}

.fa-li.fa-lg {
    left: -1.85714286em
}

.fa-border {
    padding: .2em .25em .15em;
    border: solid .08em #eee;
    border-radius: .1em
}

.fa-pull-left {
    float: left
}

.fa-pull-right {
    float: right
}

.fa.fa-pull-left {
    margin-right: .3em
}

.fa.fa-pull-right {
    margin-left: .3em
}

.pull-right {
    float: right
}

.pull-left {
    float: left
}

.fa.pull-left {
    margin-right: .3em
}

.fa.pull-right {
    margin-left: .3em
}

.fa-spin {
    -webkit-animation: fa-spin 2s infinite linear;
    animation: fa-spin 2s infinite linear
}

.fa-pulse {
    -webkit-animation: fa-spin 1s infinite steps(8);
    animation: fa-spin 1s infinite steps(8)
}

@-webkit-keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

@keyframes fa-spin {
    0% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg)
    }

    100% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg)
    }
}

.fa-rotate-90 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
    -webkit-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg)
}

.fa-rotate-180 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
    -webkit-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.fa-rotate-270 {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
    -webkit-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg)
}

.fa-flip-horizontal {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)";
    -webkit-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1)
}

.fa-flip-vertical {
    -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)";
    -webkit-transform: scale(1, -1);
    -ms-transform: scale(1, -1);
    transform: scale(1, -1)
}

:root .fa-rotate-90,
:root .fa-rotate-180,
:root .fa-rotate-270,
:root .fa-flip-horizontal,
:root .fa-flip-vertical {
    filter: none
}

.fa-stack {
    position: relative;
    display: inline-block;
    width: 2em;
    height: 2em;
    line-height: 2em;
    vertical-align: middle
}

.fa-stack-1x,
.fa-stack-2x {
    position: absolute;
    left: 0;
    width: 100%;
    text-align: center
}

.fa-stack-1x {
    line-height: inherit
}

.fa-stack-2x {
    font-size: 2em
}

.fa-inverse {
    color: #fff
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0
}

.sr-only-focusable:active,
.sr-only-focusable:focus {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    clip: auto
}


.haosns-icon {
    font-family: haosns-icon !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale
}

:root {
    --haosns-bg-main: #f3f3f3;
    --haosns-bg-block: #fff;
    --haosns-bg-btn-a: #f2f3f5;
    --haosns-bg-btn-b: #ffc1bd;
    --haosns-bg-btn-hover: #f8b5b1;
    --haosns-bg-rgb-a: rgb(255 255 255 / .5);
    --haosns-color-block: #fff;
    --haosns-color-main: #333;
    --haosns-color-btn: #7e7e7e;
    --haosns-color-btn-hover: #f7b3b0;
    --haosns-color-link: #8b8b8b;
    --haosns-color-link-hover: #3d3d3d;
    --haosns-color-desc: #999;
    --haosns-color-border: #f1f1f1;
    --haosns-color-border-hover: #f1f1f1
}

.haosns-theme-dark {
    --haosns-bg-main: #18191c;
    --haosns-bg-block: #242526;
    --haosns-bg-btn-a: #2a2a2a;
    --haosns-bg-btn-b: #18191c;
    --haosns-bg-btn-hover: #2c5ea8;
    --haosns-bg-rgb-a: rgb(0 0 0 / 50%);
    --haosns-color-block: #eee;
    --haosns-color-main: #e4e6eb;
    --haosns-color-btn: #aaa;
    --haosns-color-btn-hover: #fff;
    --haosns-color-link: #eee;
    --haosns-color-link-hover: #fff;
    --haosns-color-desc: #7e7e7e;
    --haosns-color-border: #7e7e7e;
    --haosns-color-border-hover: #7e7e7e
}

.haosns-theme-dark .haosns-post-box {
    background: #333
}

.haosns-theme-dark .sns-menu {
    background: #333
}

body {
    overflow-x: hidden;
    background: var(--haosns-bg-main);
    color: var(--haosns-color-link);
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif
}

:root {
    --skeleton-color: #ccc;
    --skeleton-icon-color: rgba(0, 0, 0, 0.25);
    --fancybox-zIndex: 19930314
}

.dark {
    --skeleton-color: #515151;
    --skeleton-icon-color: rgba(255, 255, 255, 0.25)
}

:focus-visible {
    outline: 0
}

* {
    box-sizing: border-box !important
}

.emoji-editor {
    border-radius: 2px;
    line-height: 20px;
    color: #666;
    padding: 10px 10px !important;
    background-color: var(--haosns-bg-block)
}

.emoji-editor[placeholder]:not(.visualblocks)::before {
    color: rgba(34, 47, 62, .7);
    content: attr(placeholder);
    position: absolute
}

a {
    color: var(--haosns-color-link);
    text-decoration: none;
    transition: opacity .3s
}

a:hover {
    opacity: .7
}

li {
    list-style: none
}

button,
input,
optgroup,
option,
select,
textarea {
    padding: 0;
    border: 0;
    outline: 0
}

button {
    background: 0 0
}

blockquote,
body,
button,
dd,
div,
dl,
dt,
form,
h1,
h2,
h3,
h4,
h5,
h6,
input,
li,
ol,
p,
pre,
td,
textarea,
th,
ul {
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: transparent
}

.gif {
    position: absolute;
    right: 8px;
    bottom: 8px;
    color: #fff;
    background-color: #72bd7f;
    padding: 0 8px;
    border-radius: 2px;
    font-size: 12px;
    line-height: 16px;
    z-index: 1
}

blockquote {
    border-left: 4px solid rgba(var(--haosns-theme-color-rgb), .3);
    margin-bottom: 5px;
    margin-top: 5px;
    padding-left: 16px
}

ol {
    padding-left: 1.5em
}

.ql-align-center {
    text-align: center
}

.ql-align-right {
    text-align: right
}

.content-detail ol {
    counter-reset: list-0
}

.content-detail ol [data-list=ordered] .ql-ui::before {
    content: counter(list-0, decimal) ". ";
    counter-increment: list-0;
    position: absolute;
    left: 0
}

.content-detail ol [data-list=bullet] .ql-ui::before {
    content: '\2022';
    display: inline-block;
    margin-left: -1.5em;
    margin-right: .3em;
    text-align: right;
    white-space: nowrap;
    width: 1.2em
}

.opacity {
    transition: .3s;
    cursor: pointer
}

.opacity:hover {
    opacity: .7
}

.haosns-click {
    cursor: pointer
}

.hyperlink {
    color: #007aff
}

.skeleton-block {
    height: 1em;
    background: var(--skeleton-color) !important;
    width: 100%;
    display: block
}

.layui-layer-content .haosns-empty-page {
    padding: 0
}

@font-face {
    font-family: skeleton;
    src: url("data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAYAAA0AAAAAESgAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAABMAAAABoAAAAclcTxx09TLzIAAAFMAAAASwAAAGBRtV1jY21hcAAAAZgAAAC9AAABamglddJjdnQgAAACWAAAAAQAAAAEABEBRGdhc3AAAAJcAAAACAAAAAj//wADZ2x5ZgAAAmQAAACTAAAJdL6KsfZoZWFkAAAC+AAAAC4AAAA2GgvLb2hoZWEAAAMoAAAAGgAAACQC8ADFaG10eAAAA0QAAAATAAAAtAMAABFsb2NhAAADWAAAAK4AAACuaF5mEm1heHAAAAQIAAAAHwAAACAAmgA5bmFtZQAABCgAAAE5AAACNKbyxURwb3N0AAAFZAAAAJkAAADOCL0Ic3icY2BgYGQAgts30q6A6DvfXCthNABZwwgPAAB4nGNgYWRgnMDAysDA6MOYxsDA4A6lvzJIMrQwMDAxsHIywAAjAxIISHNNYWhgUGCoZTzw/wCDHuMBBgeYGsYDQB4DUI4RAOnYC70AeJxjYGBgZoBgGQZGBhBIAfIYwXwWBg8gzcfAwcDEwMagxKDFYM0QyxDPUPv/P1BcgUGNQYfBEchP/P///+P/D/7f/3/r/83/N6DmIAFGNga4ICMTkGBCVwB0AgsrkMHGzsHJxcDNw8vHLyAoJCwiKiYuISkFViMtIysnr6CopKyiqqauoamlraOrp29gaGRsYmpmzmDBYGllbWNrZ+/g6OTs4urm7uHp5e3j6+cfEBgUHBKK7iL6AwBJLiG7AAAAABEBRAAAAAH//wACeJztzrENwjAUBNA7O4nrXzBAREEHEm5dsERWyApZIStkBip7ggzCCmyAEmxCQYNESfG7r3un04eBAJjYwcLhGIlTSK7C/Ryb+haSNflEtCWuS5xcw0dILLkXLwcvexmHvme3XIU+rxFYZ4Jz3sROWiEuBgug9tXMh7lN21djxbu1Nf/pZzU1NTU1NbWf7QnZ5mwOAHicY2BkYGAAYrZdrHLx/DZfGbiZGEDgzjfXSgT9/wAjA+MBIJeDASwNAA4cCj0AAHicY2BkYGA88P8Agx6QAQSMYIQCWABQZgK3AAB4nGNkYBBkAAJGKB4KAAAOfQAVAAAAACoAKgAqADgARgBUAGIAcAB+AIwAmgCoALYAxADYAOYA9AECARABHgEsAToBSAFWAWQBcgGAAY4BnAGqAbgBxgHUAeIB8AH+AgwCGgIoAjYCRAJSAmACbgJ8AooCmAKmArQCwgLQAt4C7AL6AwgDFgMkAzIDQANOA1wDagN4A4YDlAOiA7ADvgPMA9oD6AP2BAQEEgQgBC4EPARKBFgEZgR0BIIEkASeBKwEugAAeJxjYGRgYAhj4GBgYgABEMnIABJzYNADCQAADScA1AB4nH2PvW7CMBSFj/krXSpeoJKHDiAR6mRAFStSVIkFMWToFhErWCQkMmFAVR+hax+hY5+vY0+MWTqQ6Mqfj4/vPQbwgB8IXL4xNp4Fhvj03MEdvj138YRfzz0MxbPnPkbizfOA+gedonfP3drdallghHfPHc798tzFKzNcuMc+j577kOLF84D6HktUqHGGhUGOHRpIZt5iwjWCYoWYkhMUSJHRVbIslRXdKanVS/Yw7hTLqj5bk+8aOd5OZKSicCqTIs1Maaxc7VJbpGVtMjqP2EPzuubQCgcKe13opiJtKOY4ud6WW52fipQQO2PjVkuHdilnzCmxYP1veVHbNwSYs64vQlwdmriyuZbRTMmFvI4mRmEwD9rcNxMmFC0Nxs9R/EOXRLk0SLQ9GjZUKpwppeStbn/Mg1tYAAAAeJxdzlkzggEARuGn1EXUWEJFubJU1iyRJcbQJoRC9t/dn8k3XXZu3plz8c4RNmI4kAkmZJzXkQ2bEBEVM2lKXMK0GbPmJM1bsCglHTwsWZaVs2LVmnUb8gqKNm3ZtmPXnpJ9Bw4dKTt2ouLUmXMXqi5duXbjVk1dQ1PLnbZ7Dx51PHn2oqsXdL151/fh05dvP379/QOXKRMwAAAA") format("woff");
    font-weight: 100, 200, 300, 400, 500, 600, 700, 800, 900;
    font-style: normal, italic;
    font-display: block
}

.skeleton-text {
    font-family: skeleton !important;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none
}

.skeleton-text,
.skeleton-text * {
    color: var(--skeleton-color) !important;
    letter-spacing: -.03em !important
}

.skeleton-image {
    display: inline-block
}

.skeleton-image svg {
    max-width: 100%;
    height: auto
}

.skeleton-image polygon {
    fill: var(--skeleton-color)
}

.skeleton-image path {
    fill: var(--skeleton-icon-color)
}

.skeleton-avatar {
    display: inline-block
}

.skeleton-avatar svg {
    max-width: 100%;
    height: auto
}

.skeleton-avatar rect {
    fill: var(--skeleton-color)
}

.skeleton-avatar path {
    fill: var(--skeleton-icon-color)
}

.skeleton-effect-blink,
.skeleton-effect-wave {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 25%, #000 75%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 25%, #000 75%, transparent 100%);
    -webkit-mask-size: 200% 100%;
    mask-size: 200% 100%;
    -webkit-mask-repeat: repeat;
    mask-repeat: repeat;
    -webkit-mask-position: 50% top;
    mask-position: 50% top;
    -webkit-animation: skeleton-effect-wave 1s infinite;
    animation: skeleton-effect-wave 1s infinite
}

.skeleton-effect-fade {
    -webkit-animation: skeleton-effect-fade 1s infinite;
    animation: skeleton-effect-fade 1s infinite
}

.skeleton-effect-pulse {
    -webkit-animation: skeleton-effect-pulse 1s infinite;
    animation: skeleton-effect-pulse 1s infinite
}

@-webkit-keyframes skeleton-effect-fade {
    0% {
        opacity: 1
    }

    50% {
        opacity: .2
    }

    100% {
        opacity: 1
    }
}

@keyframes skeleton-effect-fade {
    0% {
        opacity: 1
    }

    50% {
        opacity: .2
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes main-show {
    0% {
        opacity: 0
    }

    30% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@keyframes main-show {
    0% {
        opacity: 0
    }

    30% {
        opacity: 0
    }

    100% {
        opacity: 1
    }
}

@-webkit-keyframes skeleton-effect-wave {
    0% {
        -webkit-mask-position: 50% top;
        mask-position: 50% top
    }

    100% {
        -webkit-mask-position: -150% top;
        mask-position: -150% top
    }
}

@keyframes skeleton-effect-wave {
    0% {
        -webkit-mask-position: 50% top;
        mask-position: 50% top
    }

    100% {
        -webkit-mask-position: -150% top;
        mask-position: -150% top
    }
}

@-webkit-keyframes skeleton-effect-pulse {
    0% {
        transform: scale(1)
    }

    40% {
        transform: scale(1)
    }

    50% {
        transform: scale(.975)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes skeleton-effect-pulse {
    0% {
        transform: scale(1)
    }

    40% {
        transform: scale(1)
    }

    50% {
        transform: scale(.975)
    }

    100% {
        transform: scale(1)
    }
}

::-webkit-scrollbar {
    width: 8px;
    height: 8px
}

::-webkit-scrollbar-thumb {
    background-color: #777;
    border-radius: 4px;
    -webkit-border-radius: 4px
}

::-webkit-scrollbar-track {
    background-color: #ccc;
    border-radius: 4px;
    -webkit-border-radius: 4px
}

.haosns-dianzan2 {
    color: #ffbebb
}

.haosns-like {
    color: #ffbebb
}

.haosns-btn {
    background-color: #000001;
    color: #fff;
    font-size: 14px;
    min-width: 68px;
    min-height: 30px;
    line-height: 30px;
    padding: 0 20px;
    border-radius: var(--haosns-border-radius-btn, 3px);
    cursor: pointer;
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px
}
.haosns-btn1{
    background-color: #4557cb14;
    color: #fff;
    font-size: 14px;
    min-width: 68px;
    min-height: 30px;
    line-height: 30px;
    padding: 0 10px;
    border-radius: var(--haosns-border-radius-btn, 3px);
    cursor: pointer;
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2px
}
.haosns-btn.primary {
    background-color: #fff;
    color: var(--haosns-theme-color)
}

.haosns-btn.disabled {
    opacity: .4;
    cursor: not-allowed
}

.haosns-btn:not(.disabled):hover {
    opacity: .7;
    /* color: #fff */
}

.haosns-btn.signedin {
    background-color: #fff;
    color: var(--haosns-theme-color);
    border: 1px solid var(--haosns-theme-color);
    pointer-events: none
}

.hidden {
    display: none !important
}

.haosns-emoji {
    width: 22px;
    height: 22px;
    margin: 0 2px;
    transform: translateY(-3px)
}

.haosns-emoji.emotion-type-big_img {
    width: 50px;
    height: 50px;
    vertical-align: bottom
}

.title .emotion-type-big_img {
    width: 24px;
    height: 24px
}

.Myavatar{
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background-color: var(--haosns-color-block);
}
.avatar {
    width: 100%;
    height: 100%;
    border-radius: 4px;
    background-color: var(--haosns-color-block);
    border: 1px solid var(--haosns-color-border)
}
.avatar1{
    width: 40px;
    height: 40px;
    border-radius: 4px;
    background-color: var(--haosns-color-block);
    border: 1px solid var(--haosns-color-border)
}
.Logoavatar{
    width: 50px;
    height: 100%;
    border-radius: 4px;
    background-color: var(--haosns-color-block);
    border: 1px solid var(--haosns-color-border)
}
.avatarimg {
    position: relative;
    height: 50px;
    width: 50px;
    border-radius: var(--haosns-border-radius-avatar)
}

.layui-menu-body-title:hover {
    opacity: .7
}

.haosns-mark.haosns-lv img,
.haosns-mark.haosns-vip img {
    height: 16.8px;
    display: block
}

.haosns-empty-page {
    text-align: center;
    padding: 20px;
    margin: 0 auto
}

.haosns-empty-page i {
    font-size: 40px;
    color: #999
}

.haosns-empty-page .title {
    display: flex;
    align-items: center;
    justify-content: center
}

.haosns-empty-page p {
    color: #999;
    font-size: 12px
}

.haosns-mark {
    color: #fff;
    height: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    border-radius: 3px;
    gap: 3px;
    line-height: 16px
}

.haosns-comment-owner,
.haosns-post-owner {
    background-color: #449dff
}

.haosns-mark i {
    font-size: 12px
}

.haosns-mark img {
    width: 100%;
    height: 100%
}

.comment-sticky,
.post-bbs-sticky,
.post-commend,
.post-sticky {
    padding: 0 6px;
    color: #ff5473;
    background-color: rgb(255 84 115 / 10%);
    border-radius: 2px;
    font-size: 12px
}

.post-bbs-sticky,
.post-sticky {
    color: #2997f7;
    background-color: rgb(41 151 247 / 10%)
}

.post-commend {
    color: #ea4b42;
    background-color: rgb(234 75 66 / 10%)
}

.layui-layer-btn .layui-layer-btn0 {
    background-color: var(--haosns-theme-color)
}

.layui-tabs-header .layui-this,
.layui-tabs-header li:hover {
    color: var(--haosns-theme-color)
}

.layui-tab-brief>.layui-tab-title .layui-this {
    color: var(--haosns-theme-color)
}

.layui-tab-brief>.layui-tab-more li.layui-this:after,
.layui-tab-brief>.layui-tab-title .layui-this:after {
    border-bottom: 2px solid var(--haosns-theme-color)
}

.haosns-lv-img img {
    height: 16px
}

.haosns-liang {
    -webkit-animation: liuguang 2s infinite linear;
    animation: liuguang 2s infinite linear;
    color: #fff400;
    position: relative;
    z-index: 1;
    padding: 0 3px
}

@-webkit-keyframes liuguang {
    0% {
        background: linear-gradient(to bottom right, #339 0, #f0c 100%, #339 200%, #f0c 300%)
    }

    5% {
        background: linear-gradient(to bottom right, #339 -10%, #f0c 90%, #339 190%, #f0c 290%)
    }

    10% {
        background: linear-gradient(to bottom right, #339 -20%, #f0c 80%, #339 180%, #f0c 280%)
    }

    15% {
        background: linear-gradient(to bottom right, #339 -30%, #f0c 70%, #339 170%, #f0c 270%)
    }

    20% {
        background: linear-gradient(to bottom right, #339 -40%, #f0c 60%, #339 160%, #f0c 260%)
    }

    25% {
        background: linear-gradient(to bottom right, #339 -50%, #f0c 50%, #339 150%, #f0c 250%)
    }

    30% {
        background: linear-gradient(to bottom right, #339 -60%, #f0c 40%, #339 140%, #f0c 240%)
    }

    35% {
        background: linear-gradient(to bottom right, #339 -70%, #f0c 30%, #339 130%, #f0c 230%)
    }

    40% {
        background: linear-gradient(to bottom right, #339 -80%, #f0c 20%, #339 120%, #f0c 220%)
    }

    45% {
        background: linear-gradient(to bottom right, #339 -90%, #f0c 10%, #339 110%, #f0c 210%)
    }

    50% {
        background: linear-gradient(to bottom right, #339 -100%, #f0c 0, #339 100%, #f0c 200%)
    }

    55% {
        background: linear-gradient(to bottom right, #339 -110%, #f0c -10%, #339 90%, #f0c 190%)
    }

    60% {
        background: linear-gradient(to bottom right, #339 -120%, #f0c -20%, #339 80%, #f0c 180%)
    }

    65% {
        background: linear-gradient(to bottom right, #339 -130%, #f0c -30%, #339 70%, #f0c 170%)
    }

    70% {
        background: linear-gradient(to bottom right, #339 -140%, #f0c -40%, #339 60%, #f0c 160%)
    }

    75% {
        background: linear-gradient(to bottom right, #339 -150%, #f0c -50%, #339 50%, #f0c 150%)
    }

    80% {
        background: linear-gradient(to bottom right, #339 -160%, #f0c -60%, #339 40%, #f0c 140%)
    }

    85% {
        background: linear-gradient(to bottom right, #339 -170%, #f0c -70%, #339 30%, #f0c 130%)
    }

    90% {
        background: linear-gradient(to bottom right, #339 -180%, #f0c -80%, #339 20%, #f0c 120%)
    }

    95% {
        background: linear-gradient(to bottom right, #339 -190%, #f0c -90%, #339 10%, #f0c 110%)
    }

    100% {
        background: linear-gradient(to bottom right, #339 -200%, #f0c -100%, #339 0, #f0c 100%)
    }
}

@keyframes liuguang {
    0% {
        background: linear-gradient(to bottom right, #339 0, #f0c 100%, #339 200%, #f0c 300%)
    }

    5% {
        background: linear-gradient(to bottom right, #339 -10%, #f0c 90%, #339 190%, #f0c 290%)
    }

    10% {
        background: linear-gradient(to bottom right, #339 -20%, #f0c 80%, #339 180%, #f0c 280%)
    }

    15% {
        background: linear-gradient(to bottom right, #339 -30%, #f0c 70%, #339 170%, #f0c 270%)
    }

    20% {
        background: linear-gradient(to bottom right, #339 -40%, #f0c 60%, #339 160%, #f0c 260%)
    }

    25% {
        background: linear-gradient(to bottom right, #339 -50%, #f0c 50%, #339 150%, #f0c 250%)
    }

    30% {
        background: linear-gradient(to bottom right, #339 -60%, #f0c 40%, #339 140%, #f0c 240%)
    }

    35% {
        background: linear-gradient(to bottom right, #339 -70%, #f0c 30%, #339 130%, #f0c 230%)
    }

    40% {
        background: linear-gradient(to bottom right, #339 -80%, #f0c 20%, #339 120%, #f0c 220%)
    }

    45% {
        background: linear-gradient(to bottom right, #339 -90%, #f0c 10%, #339 110%, #f0c 210%)
    }

    50% {
        background: linear-gradient(to bottom right, #339 -100%, #f0c 0, #339 100%, #f0c 200%)
    }

    55% {
        background: linear-gradient(to bottom right, #339 -110%, #f0c -10%, #339 90%, #f0c 190%)
    }

    60% {
        background: linear-gradient(to bottom right, #339 -120%, #f0c -20%, #339 80%, #f0c 180%)
    }

    65% {
        background: linear-gradient(to bottom right, #339 -130%, #f0c -30%, #339 70%, #f0c 170%)
    }

    70% {
        background: linear-gradient(to bottom right, #339 -140%, #f0c -40%, #339 60%, #f0c 160%)
    }

    75% {
        background: linear-gradient(to bottom right, #339 -150%, #f0c -50%, #339 50%, #f0c 150%)
    }

    80% {
        background: linear-gradient(to bottom right, #339 -160%, #f0c -60%, #339 40%, #f0c 140%)
    }

    85% {
        background: linear-gradient(to bottom right, #339 -170%, #f0c -70%, #339 30%, #f0c 130%)
    }

    90% {
        background: linear-gradient(to bottom right, #339 -180%, #f0c -80%, #339 20%, #f0c 120%)
    }

    95% {
        background: linear-gradient(to bottom right, #339 -190%, #f0c -90%, #339 10%, #f0c 110%)
    }

    100% {
        background: linear-gradient(to bottom right, #339 -200%, #f0c -100%, #339 0, #f0c 100%)
    }
}

@-webkit-keyframes shake-base {

    0%,
    100% {
        transform: scale(1)
    }

    20%,
    80% {
        transform: scale(1.1)
    }

    40%,
    60% {
        transform: scale(.9)
    }

    50% {
        transform: scale(1.05)
    }
}

@keyframes shake-base {

    0%,
    100% {
        transform: scale(1)
    }

    20%,
    80% {
        transform: scale(1.1)
    }

    40%,
    60% {
        transform: scale(.9)
    }

    50% {
        transform: scale(1.05)
    }
}

.haosns-verify-icon img {
    width: 13px;
    border: none !important;
    height: 13px;
    position: absolute;
    right: -2px;
    bottom: 0;
    border-radius: 100%
}

.avatarimg em {
    border-radius: 100%;
    border: 2px solid #fff;
    height: 8px;
    width: 8px;
    display: block;
    position: absolute;
    left: 0;
    background-color: #07c160;
    top: 0
}

.haosns-more-loading {
    width: 40px;
    height: 32px;
    margin: 30px auto 10px;
    display: flex
}

.haosns-more-loading.full-screen {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 14500;
    transform: translateX(-50%) translateY(-50%)
}

.haosns-more-loading>div {
    width: 4px;
    height: 32px;
    margin: 2px;
    margin-top: 0;
    margin-bottom: 0;
    border-radius: 0;
    -webkit-animation: line-scale 1.2s infinite ease;
    animation: line-scale 1.2s infinite ease;
    background-color: currentColor;
    border: 0 solid currentColor;
    color: var(--haosns-theme-color)
}

.haosns-more-loading>div:nth-child(1) {
    -webkit-animation-delay: -1.2s;
    animation-delay: -1.2s
}

.haosns-more-loading>div:nth-child(2) {
    -webkit-animation-delay: -1.1s;
    animation-delay: -1.1s
}

.haosns-more-loading>div:nth-child(3) {
    -webkit-animation-delay: -1s;
    animation-delay: -1s
}

.haosns-more-loading>div:nth-child(4) {
    -webkit-animation-delay: -.9s;
    animation-delay: -.9s
}

.haosns-more-loading>div:nth-child(5) {
    -webkit-animation-delay: -.8s;
    animation-delay: -.8s
}

@-webkit-keyframes line-scale {

    0%,
    100%,
    40% {
        transform: scaleY(.4)
    }

    20% {
        transform: scaleY(1)
    }
}

@keyframes line-scale {

    0%,
    100%,
    40% {
        transform: scaleY(.4)
    }

    20% {
        transform: scaleY(1)
    }
}

@-webkit-keyframes btn-load {
    0% {
        height: 12px
    }

    100% {
        height: 1.2px
    }
}

@keyframes btn-load {
    0% {
        height: 12px
    }

    100% {
        height: 1.2px
    }
}

@-webkit-keyframes like_post {
    0% {
        transform: scale(.8)
    }

    25% {
        transform: scale(1.2)
    }

    50% {
        transform: scale(1.5)
    }

    75% {
        transform: scale(1.2)
    }

    100% {
        transform: scale(1)
    }
}

@keyframes like_post {
    0% {
        transform: scale(.8)
    }

    25% {
        transform: scale(1.2)
    }

    50% {
        transform: scale(1.5)
    }

    75% {
        transform: scale(1.2)
    }

    100% {
        transform: scale(1)
    }
}

.tips-content {
    position: absolute;
    background: var(--main-color);
    color: #fff;
    border-radius: 3px;
    padding: 5px 8px;
    font-size: 12px;
    line-height: 25px;
    transition: .15s;
    opacity: 0;
    width: max-content;
    z-index: -1;
    pointer-events: none;
    line-height: 20px;
    max-width: 200px
}

.tips-content:after {
    content: "";
    background: var(--haosns-theme-color);
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    position: absolute;
    width: 8px;
    height: 8px;
    z-index: 999;
    border-radius: 1px;
    margin: auto
}

.haosns-tips-top:hover {
    opacity: 1
}

.haosns-tips-top:hover .avatar {
    opacity: .7
}

.haosns-tips-top .tips-content {
    bottom: 100%
}

.haosns-tips-top .tips-content:after {
    bottom: -3px;
    left: 0;
    right: 0
}

.haosns-tips-top:hover .tips-content {
    opacity: 1;
    bottom: calc(100% + 8px);
    z-index: 99
}

.haosns-tips-bottom .tips-content {
    top: 100%
}

.haosns-tips-bottom .tips-content:after {
    left: 0;
    right: 0;
    top: -3px
}

.haosns-tips-bottom:hover .tips-content {
    opacity: 1;
    top: calc(100% + 8px);
    z-index: 99
}

.haosns-tips-left .tips-content {
    right: 100%
}

.haosns-tips-left .tips-content:after {
    top: 0;
    bottom: 0;
    right: -3px
}

.haosns-tips-left:hover .tips-content {
    opacity: 1;
    right: calc(100% + 8px);
    z-index: 99
}

.haosns-tips-right .tips-content {
    left: 100%
}

.haosns-tips-right .tips-content:after {
    left: -3px;
    top: 0;
    bottom: 0
}

.haosns-tips-right:hover .tips-content {
    opacity: 1;
    left: calc(100% + 8px);
    z-index: 99
}

.haosns-obj-popup {
    position: absolute;
    z-index: 99999999;
    box-shadow: 0 0 1px #ccc
}

.btn-load {
    width: 2px;
    height: 10px;
    border-radius: 4px;
    display: inline-block;
    position: relative;
    background: currentColor;
    color: #fff;
    -webkit-animation: btn-load .3s .3s linear infinite alternate;
    animation: btn-load .3s .3s linear infinite alternate
}

.btn-load:after,
.btn-load:before {
    content: "";
    width: 2px;
    height: 10px;
    border-radius: 4px;
    background: currentColor;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 5px;
    -webkit-animation: btn-load .3s .45s linear infinite alternate;
    animation: btn-load .3s .45s linear infinite alternate
}

.btn-load:before {
    left: -5px;
    -webkit-animation-delay: 0s;
    animation-delay: 0s
}

.haosns-header {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--haosns-bg-rgb-a);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    box-shadow: 0 0 5px rgb(0 0 0 / 5%);
    z-index: 999
}


.haosns-header-box {
    display: flex;
    justify-content: center;
    width: var(--haosns-theme-width);
    height: var(--haosns-header-height)
}

.haosns-header-left {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

.haosns-header-left .logo {
    width: 220px
}

.haosns-header-center {
    position: relative;
    flex: 1;
    padding: 0 15px;
    display: flex;
    align-items: center
}

.haosns-header-center>ul {
    position: relative;
    display: flex;
    height: 100%;
    align-items: center;
    flex: 0 0 auto
}

.haosns-header-menu li {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%
}

.haosns-header-menu li>a {
    position: relative;
    font-size: 14px;
    color: var(--haosns-color-link);
    height: 100%;
    line-height: var(--haosns-header-height);
    display: flex;
    padding: 0 10px
}

.haosns-header-menu li>a>i {
    margin-right: 3px
}

.haosns-header-menu li .sub-menu {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    top: 70px;
    box-shadow: 0 0 5px #ddd;
    border-radius: var(--haosns-border-radius);
    padding: 5px 15px;
    transition: .3s;
    background: #fff
}

.haosns-header-menu li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
    top: 55px
}

.haosns-header-menu li:hover>a {
    color: var(--haosns-color-link-hover)
}

.haosns-header-menu li .sub-menu a {
    position: relative;
    white-space: nowrap;
    text-align: center;
    line-height: 35px;
    left: 0;
    transition: .3s;
    font-size: 13px
}

.haosns-header-menu li .sub-menu a:hover {
    left: 5px;
    color: var(--haosns-color-link-hover)
}

.haosns-header-menu li .sub-menu:after {
    content: "";
    background: #fff;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    position: absolute;
    top: -5px;
    width: 7px;
    height: 7px;
    z-index: 999;
    border-left: 1px solid #e1e1e1;
    border-top: 1px solid #e1e1e1;
    border-radius: 2px;
    margin: auto;
    left: 0;
    right: 0;
    z-index: 0
}

.haosns-header-menu li:has(>.sub-menu)>a:after {
    font-family: haosns-icon;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    content: "\e65c";
    font-size: 12px;
    margin-left: 5px;
    transition: transform .45s;
    -webkit-transition: transform .45s;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d
}

.haosns-header-menu li:has(>.sub-menu):hover>a:after {
    transform: rotate(180deg);
    -webkit-transform: rotate(180deg);
    color: var(--haosns-theme-color)
}

.haosns-header-menu .sub-menu.inline {
    width: 250px;
    display: flex;
    flex-wrap: wrap
}

.haosns-header-menu .sub-menu.inline li {
    padding: 0;
    flex: 0 0 calc(100% / 3)
}

.haosns-header-menu .menu-commend-icon {
    position: absolute;
    left: 40%;
    top: 6px;
    height: 15px;
    display: flex;
    align-items: center
}

.haosns-header-menu .menu-commend-icon m {
    position: relative;
    background-image: linear-gradient(90deg, #8bc34a 0, #4caf50 100%);
    line-height: 16px;
    color: #fff;
    font-size: 12px;
    transform: scale(.75);
    border-radius: 10px;
    padding: 1px 7px;
    z-index: 2;
    white-space: nowrap
}

.haosns-header-menu .menu-commend-icon:after {
    content: "";
    width: 8px;
    height: 8px;
    background: #8bc34a;
    transform: rotate(250deg);
    -webkit-transform: rotate(250deg);
    position: absolute;
    z-index: -3;
    top: 8px;
    left: 8px
}

.haosns-header-menu .menu-commend-icon.custom:after {
    opacity: 0
}

.haosns-header-menu .menu-commend-icon.custom n {
    width: 8px;
    height: 8px;
    background: inherit;
    transform: rotate(250deg);
    -webkit-transform: rotate(250deg);
    position: absolute;
    z-index: -3;
    bottom: -2px;
    left: 7px
}

.haosns-header-menu .menu-commend-icon.orange:after {
    background: #ef977b
}

.haosns-header-menu .menu-commend-icon.yellow:after {
    background: #fcd032
}

.haosns-header-menu .menu-commend-icon.green:after {
    background: #8bc34a
}

.haosns-header-menu .menu-commend-icon.red:after {
    background: #ef8a8a
}

.haosns-header-menu .menu-commend-icon.orange m {
    background-image: linear-gradient(90deg, #ef977b 0, #ff5722 100%)
}

.haosns-header-menu .menu-commend-icon.yellow m {
    background-image: linear-gradient(90deg, #fcd032 0, #e1b000 100%)
}

.haosns-header-menu .menu-commend-icon.green m {
    background-image: linear-gradient(90deg, #8bc34a 0, #4caf50 100%)
}

.haosns-header-menu .menu-commend-icon.red m {
    background-image: linear-gradient(90deg, #ef8a8a 0, #f32e2e 100%)
}

.haosns-header-right {
    display: flex;
    align-items: center;
    position: relative;
    gap: 10px
}

.haosns-header-right li {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .3s;
    position: relative
}

.haosns-header-right li:hover>i {
    color: #ffffff;
}

.haosns-header-right li .tips-number-show {
    background: #ff3b30;
    color: #fff;
    font-size: 11px;
    border-radius: 10px;
    position: absolute;
    left: 28px;
    top: 0;
    text-align: center;
    width: 18px;
    height: 18px;
    display: flex;
    justify-content: center;
    line-height: 18px
}
    .btn-post {
            border-style: none;
            background: none;
        }

        [v-cloak] {
            display: none;
        }

        .haosns-follow-user-list {
            background-color: #fff;
            width: 100%;
            display: grid;
            box-sizing: border-box;
            border-radius: 4px;
        }

        .haosns-follow-user-list li {
            display: flex;
            border-bottom: 1px solid #eee;
            padding: 20px 15px;
        }

        .haosns-follow-user-list li:last-child {
            border: none;
        }

        .haosns-follow-user-list li .avatarimg {
            width: 50px;
            height: 50px;
            margin-right: 10px;
        }

        .haosns-follow-user-list li .info {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .haosns-follow-user-list li .info .name {
            font-size: 16px;
            margin-bottom: 5px;
            display: flex;
            flex-direction: row;
            align-items: center;
        }

        .haosns-follow-user-list li .info .name span {
            margin-left: 5px;
        }

        .haosns-follow-user-list li .info .desc {
            color: #666;
            font-size: 12px;
        }

        .haosns-follow-user-list li .btn {
            display: flex;
            align-items: center;
        }

        .haosns-follow-user-list li .btn>span {
            background-color: #ff5473;
            color: #fff;
            font-size: 14px;
            padding: 0 10px;
            min-width: 68px;
            min-height: 30px;
            line-height: 30px;
            text-align: center;
            box-sizing: border-box;
            border-radius: 2px;
            cursor: pointer;
        }

        .haosns-follow-user-list li .btn span.had {
            background-color: #ccc;
        }

        .haosns-follow-user-list .haosns-more {
            margin-top: 20px;
        }
.haosns-header-right .header-search {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 5px;
    height: 40px;
    background: rgb(238 238 238 / .5);
    border-radius: var(--haosns-border-radius);
    overflow: hidden
}

.haosns-header-right .header-search input {
    border: 0;
    height: 100%;
    padding-left: 10px;
    background: 0 0
}

.haosns-header-right .header-search input::-webkit-input-placeholder {
    color: #999
}

.haosns-header-right .header-search input::-moz-placeholder {
    color: #999
}

.haosns-header-right .header-search input:-ms-input-placeholder {
    color: #999
}

.haosns-header-right .header-search input::-ms-input-placeholder {
    color: #999
}

.haosns-header-right .header-search input::placeholder {
    color: #999
}

.haosns-header-right .header-search input:focus {
    outline: 0
}

.haosns-header-right .header-search button {
    color: #777;
    cursor: pointer;
    width: 40px;
    background: 0 0
}

.haosns-header-right .header-search button:hover {
    color: #000
}

.haosns-search-history-popup .layui-disabled .layui-menu-body-title {
    cursor: default !important;
    color: rgb(0 0 0 / 40%) !important;
    font-size: 12px
}

.haosns-header-right .header-avatar .avatar-menu {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    top: 70px;
    box-shadow: 0 0 5px #ddd;
    border-radius: 5px;
    transition: .3s;
    background: #fff;
    padding: 5px 0;
    margin-top: -15px;
    display: grid
}

.haosns-header-right .header-avatar:hover .avatar-menu {
    opacity: 1;
    visibility: visible;
    top: var(--haosns-header-height)
}

.haosns-header-right .header-avatar .avatar-menu a {
    position: relative;
    white-space: nowrap;
    text-align: center;
    line-height: 35px;
    left: 0;
    transition: .3s;
    font-size: 13px;
    padding: 0 15px
}

.haosns-header-right .header-avatar .avatar-menu a:hover {
    left: 5px;
    color: var(--haosns-theme-color);
    opacity: 1
}

.haosns-header-right .header-avatar .avatar-menu:after {
    content: "";
    background: #fff;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    position: absolute;
    top: -5px;
    width: 7px;
    height: 7px;
    z-index: 999;
    border-left: 1px solid #e1e1e1;
    border-top: 1px solid #e1e1e1;
    border-radius: 2px;
    margin: auto;
    left: 0;
    right: 0
}

.haosns-header-right .header-avatar .avatar {
    border: 1px #ddd solid;
    width: 38px;
    height: 38px
}

.haosns-header-right .header-theme {
    display: flex;
    overflow: hidden;
    justify-content: unset
}

.haosns-header-right .header-theme i {
    flex: none;
    width: 40px;
    display: block;
    text-align: center;
    transition: .3s;
    transform: unset
}

.haosns-theme-dark .haosns-header-right .header-theme i {
    transform: unset;
    transform: translateX(-100%)
}

.haosns-main {
    position: relative;
    width: 1200px;
    margin: 70px 430px;
    min-height: 800px;
    padding-bottom: 50px;
    -webkit-animation: main-show .3s;
    animation: main-show .3s;
    -webkit-animation-iteration-count: 1;
    animation-iteration-count: 1;
    display: flex;
    gap: 15px
}

.haosns-main .default-content {
    background: #fff;
    padding: 15px;
    border-radius: var(--haosns-border-radius);
    flex: 1
}

.sns-main-center {
    flex: 1;
    position: relative
}

.haosns-sns-publish {
    position: relative;
    background: var(--haosns-bg-block);
    padding: 15px 0px;
    margin-bottom: 10px;
    border-radius: var(--haosns-border-radius);
    z-index: 990
}

.haosns-sns-publish .publish-title {
    display: flex
}

.haosns-sns-publish .publish-title input {
    border: 1px #eee solid;
    width: 100%;
    height: 35px;
    padding: 0 10px;
    border-radius: 3px;
    margin-bottom: 10px;
    display: none
}

.haosns-sns-publish .publish-content {
    border: 1px solid var(--haosns-color-border);
    position: relative;
    border-radius: var(--haosns-border-radius-btn, 3px)
}

.haosns-sns-publish .publish-content .textarea {
    display: flex;
    min-height: 60px
}

.haosns-sns-publish .publish-content .textarea textarea {
    padding: 10px;
    width: 100%;
    resize: none
}

.haosns-sns-publish .publish-content .textarea .emoji-editor {
    flex: 1
}

.haosns-aite-list-box {
    display: grid;
    align-items: center;
    line-height: 30px;
    grid-auto-flow: column;
    justify-content: start;
    gap: 10px
}

.haosns-aite-list-box:has(*) {
    padding: 0 10px 10px
}

.haosns-aite-list-box .at {
    width: 30px;
    height: 30px;
    display: flex;
    cursor: pointer;
    justify-content: center;
    position: relative;
    margin: 0
}

.haosns-img-upload-list {
    display: none;
    margin: 0 10px 10px;
    gap: 10px
}

.haosns-img-upload-list a {
    width: 58px;
    height: 58px;
    border: 1px solid #f7f7f7;
    position: relative;
    display: flex;
    border-radius: 5px;
    overflow: hidden;
    cursor: pointer
}

.haosns-img-upload-list .close {
    position: absolute;
    top: -25px;
    right: 0;
    background: rgba(0, 0, 0, .8) none repeat scroll 0 0;
    border-radius: 0 5px 0 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 25px;
    height: 25px;
    transition: .2s;
    cursor: pointer;
    color: #fff;
    font-size: 12px
}

.haosns-img-upload-list a:hover .close {
    top: 0
}

.haosns-img-upload-list img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.haosns-form-bar {
    align-items: center;
    display: grid;
    grid-template-columns: repeat(4, auto) 1fr repeat(2, auto);
    gap: 10px;
    margin: 0 10px 10px 0
}

.haosns-form-bar.comment {
    grid-template-columns: auto auto auto 1fr
}


.haosns-publish-type:after {
    content: "";
    width: 20%;
    height: 10px;
    position: absolute;
    right: 0;
    top: -10px
}

.header-publish:hover .haosns-publish-type {
    display: flex
}

.haosns-publish-type:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 6px;
    left: 0;
    top: -6px
}

.haosns-publish-type .publish-type-menu {
    display: flex;
    flex-wrap: wrap
}

.haosns-publish-type li {
    width: 72px;
    height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 2px;
    text-align: center
}

.haosns-publish-type li:hover {
    background: #f7f8fa
}

.haosns-publish-type li span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px
}

.haosns-publish-type li span i {
    font-size: 26px
}

.haosns-publish-type li p {
    font-size: 14px;
    line-height: 24px;
    color: #515767
}

.haosns-add-user-form,
.haosns-publish-location-popup-form,
.haosns-publish-topic-popup-form {
    position: relative;
    overflow: hidden;
    padding: 10px
}

.haosns-add-user-form .layui-input-group,
.haosns-publish-location-popup-form .layui-input-group,
.haosns-publish-topic-popup-form .layui-input-group {
    display: flex;
    align-items: center
}

.haosns-add-user-form .layui-input-group .layui-input-split,
.haosns-publish-location-popup-form .layui-input-group .layui-input-split,
.haosns-publish-topic-popup-form .layui-input-group .layui-input-split {
    height: 38px;
    display: flex;
    align-items: center;
    background: 0 0
}

.haosns-add-user-form .users-list,
.haosns-publish-location-popup-form .location-list,
.haosns-publish-topic-popup-form .topic-list {
    position: relative;
    overflow: hidden;
    padding-top: 10px
}

.haosns-add-user-form .users-list li,
.haosns-publish-friend-popup-form .friend-list li,
.haosns-publish-location-popup-form .location-list li,
.haosns-publish-topic-popup-form .topic-list li {
    display: flex;
    height: 40px;
    align-items: center;
    cursor: pointer;
    transition: .3s;
    padding: 0 5px;
    border-radius: 2px;
    gap: 10px
}

.haosns-add-user-form .users-list li:hover,
.haosns-publish-friend-popup-form .friend-list li:hover,
.haosns-publish-location-popup-form .location-list li:hover,
.haosns-publish-topic-popup-form .topic-list li:hover {
    opacity: .7;
    background-color: rgb(0 0 0 / 8%)
}

.haosns-add-user-form .friend-list li .avatarimg,
.haosns-publish-friend-popup-form .friend-list li .avatarimg {
    width: 30px;
    height: 30px;
    position: relative
}

.haosns-add-user-form .users-list li .avatarimg img {
    width: 100%;
    height: 100%;
    border-radius: 100%
}

.haosns-publish-friend-popup-form .friend-list li .user-info {
    display: flex;
    align-items: center;
    flex: 1
}

.haosns-publish-friend-popup-form .friend-list li {
    margin: 10px 0
}

.haosns-publish-friend-popup-form .friend-list li .user-info .name {
    flex: 1;
    display: flex;
    align-items: center;
    margin-left: 10px;
    gap: 3px
}

.haosns-publish-friend-popup-form .friend-list li:after {
    content: "\e741";
    font-family: haosns-icon
}

.haosns-publish-friend-popup-form .friend-list li.on:after {
    content: "\e64f";
    font-family: haosns-icon;
    color: #4cd964
}

.haosns-publish-friend-popup-form {
    position: relative;
    height: 100%;
    overflow: hidden;
    display: grid;
    grid-template-rows: 61px 1fr auto
}

.haosns-popup-search-user {
    padding: 10px 15px 10px
}

.haosns-popup-search-user input {
    border: 1px solid #eee;
    padding: 10px;
    width: 100%;
    border-radius: 2px
}

.haosns-publish-friend-popup-form .friend-list {
    position: relative;
    overflow: auto;
    padding: 0 5px;
    margin: 0 5px
}

.haosns-publish-friend-popup-form .friend-list::-webkit-scrollbar-track {
    background: 0
}

.haosns-publish-friend-popup-form .friend-list::-webkit-scrollbar {
    width: 5px
}

.haosns-search-user-popup-had-select-list {
    display: flex;
    min-height: 60px;
    border-top: 1px #eee solid;
    padding: 15px;
    text-align: center;
    gap: 10px;
    flex-direction: column
}

.haosns-search-user-popup-had-select-list .user-list {
    display: grid;
    align-items: center;
    gap: 5px;
    grid-template-columns: repeat(8, 1fr)
}

.haosns-search-user-popup-had-select-list .user-list:empty {
    display: none
}

.haosns-search-user-popup-had-select-list .user-list li {
    position: relative;
    cursor: pointer;
    text-align: center;
    width: 100%;
    aspect-ratio: 1/1
}

.haosns-search-user-popup-had-select-list .user-list li:last-of-type {
    margin: 0
}

.haosns-search-user-popup-had-select-list .haosns-verify-icon img {
    width: 16px;
    height: 16px
}

.haosns-search-user-popup-had-select-list .btn {
    background: var(--haosns-theme-color);
    color: #fff;
    line-height: 35px;
    padding: 0 15px;
    border-radius: var(--haosns-border-radius-btn);
    cursor: pointer
}

.haosns-publish-topic-popup-form .topic-list li .haosns-huati {
    font-size: 14px;
    color: #999
}

.haosns-publish-topic-popup-form .topic-list li .name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 3px
}

.haosns-publish-topic-popup-form .topic-list li .number {
    display: flex;
    align-items: center;
    font-size: 12px
}

.haosns-publish-topic-popup-form .topic-list li .number k {
    margin-left: 5px;
    color: #fff;
    padding: 1px 4px;
    border-radius: 3px
}

.haosns-publish-location-popup-form .location-list .current:has(>*),
.haosns-publish-location-popup-form .location-list li {
    border-bottom: 1px solid #f1f1f1;
    flex-flow: column;
    justify-content: center;
    align-items: flex-start;
    padding: 10px 5px;
    height: auto
}

.haosns-publish-location-popup-form .location-list .current {
    padding-bottom: 10px;
    color: #999;
    font-size: 13px
}

.haosns-publish-location-popup-form .location-list li .name {
    font-weight: 700;
    color: #333
}

.haosns-publish-location-popup-form .location-list li .address {
    font-size: 12px;
    margin-top: 5px;
    color: #999
}

.video-select-cover-item {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center
}

.video-select-cover-bar {
    position: relative;
    height: 64px;
    width: 100%
}

.video-select-cover-bar .frame-list {
    display: flex;
    justify-content: center;
    height: 100%;
    overflow-x: hidden;
    position: relative
}

.video-select-cover-bar .frame-list .frame-item-wrapper {
    position: relative;
    width: calc(100% / 10)
}

.video-select-cover-bar .frame-list .frame-item {
    position: relative;
    width: 100%;
    height: 100%
}

.video-select-cover-bar .frame-list .frame-item-wrapper.on {
    height: 100%;
    border-radius: 2px;
    box-shadow: 0 0 4px rgba(0, 0, 0, .4);
    background-color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #fff
}

.author .haosns-header {
    background: 0 0
}

.author .haosns-header .haosns-header-menu>li>a,
.author .haosns-header .haosns-header-right .header-search button,
.author .haosns-header .haosns-header-right>li>i,
.author .haosns-header-right .header-login {
    color: #fff
}

.author .haosns-header.flex .haosns-header-menu>li>a,
.author .haosns-header.flex .haosns-header-right>li>i,
.haosns-header.flex .haosns-header-right .header-search button {
    color: #676a79
}

.author .haosns-header .search-input::-webkit-input-placeholder {
    color: #ddd
}

.author .haosns-header .search-input::-moz-placeholder {
    color: #ddd
}

.author .haosns-header .search-input:-ms-input-placeholder {
    color: #ddd
}

.author .haosns-header .search-input::-ms-input-placeholder {
    color: #ddd
}

.author .haosns-header .search-input::placeholder {
    color: #ddd
}

.author .haosns-header.fixed .haosns-header-menu>li>a {
    color: #676a79
}

.author .haosns-header.fixed .haosns-header-right>li>i {
    color: #777
}

.author .haosns-header.fixed .search-input::-webkit-input-placeholder {
    color: #333
}

.author .haosns-header.fixed .search-input::-moz-placeholder {
    color: #333
}

.author .haosns-header.fixed .search-input:-ms-input-placeholder {
    color: #333
}

.author .haosns-header.fixed .search-input::-ms-input-placeholder {
    color: #333
}

.author .haosns-header.fixed .search-input::placeholder {
    color: #333
}

.author-header {
    margin-top: -68px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    height: 400px
}

.author-header .bg {
    width: 100%;
    height: 100%;
    object-fit:fill;
    object-position: var(--haosns-img-object-position, center)
}

.author-header .member-bg-setting {
    border-radius: 3px;
    background: rgba(0, 0, 0, .3);
    text-shadow: 0 .5px 1px rgba(0, 0, 0, .45);
    cursor: pointer;
    position: absolute;
    top: 80px;
    right: 120px;
    color: #fff;
    text-align: center;
    line-height: 30px;
    margin: auto;
    font-size: 12px;
    padding: 0 10px;
    transition: .3s
}

.author-header .member-bg-setting:hover {
    opacity: .7
}

.author-content {
    position: relative;
    width: 1200px;
    margin: -100px auto 120px;
    min-height: 800px;
    padding-bottom: 50px;
    display: flex;
    z-index: 9
}

.author-content .content-left {
    width: 300px
}

.author-content .content-left .author-info {
    position: relative;
    background-color: #fff;
    border-radius: var(--haosns-border-radius);
    margin-bottom: 15px;
    margin-top: 50px;
    padding: 0 15px 15px;
    text-align: center
}

.author-content .content-left .author-info .avatarimg {
    display: flex;
    justify-content: center;
    position: relative;
    height: 35px
}

.author-content .content-left .author-info .avatarimg .user-avatar {
    border-radius: 4px;
    position: relative;
    width: 80px;
    height: 80px;
    padding: 5px;
    background: #fff;
    z-index: 1;
    top: -50px
}

.author-content .update-avatar {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0 0 0 / .8);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--haosns-border-radius-avatar);
    cursor: pointer;
    z-index: -1;
    opacity: 0;
    left: 0;
    top: 0
}

.user-avatar:hover .update-avatar {
    z-index: 1;
    opacity: 1
}

.author-content .content-left .author-info .name {
    display: flex;
    justify-content: center;
    font-size: 20px;
    font-weight: 700;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 35px
}

.author-content .content-left .author-info .desc {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
    line-height: 25px;
    color: #999
}

.author-content .content-left .author-info .number {
    display: flex;
    align-items: center;
    height: 80px
}

.author-content .content-left .author-info .number span {
    flex: 1;
    cursor: pointer;
    transition: .3s
}

.author-content .content-left .author-info .number span:hover {
    opacity: .7
}

.author-content .content-left .author-info .number span n {
    font-weight: 700;
    font-size: 18px
}

.author-content .content-left .author-info .number span p {
    font-size: 13px;
    line-height: 20px;
    color: #777
}

.haosns-member-setting-btn {
    padding: 8px;
    background-color: #f7f7f7;
    cursor: pointer;
    border-radius: var(--haosns-border-radius-btn);
    color: #555
}

.haosns-member-setting-btn:hover {
    color: #333;
    background-color: #f3f3f3
}

.author-content .content-left .author-info .btn {
    display: flex
}

.author-content .content-left .author-info .btn span {
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    border-radius: 3px;
    line-height: 35px
}

.author-content .content-left .author-info .btn .follow {
    flex: 3;
    background-color: #ff5473;
    margin-right: 15px
}

.author-content .content-left .author-info .btn .follow.had {
    background-color: #ccc
}

.author-content .content-left .author-info .btn .chat {
    flex: 2;
    background-color: #2196f3
}

.author-content .content-center {
    flex: 1;
    position: relative;
    margin: 0 15px;
    top: 100px
}

.author-content .content-center .author-menu {
    display: flex;
    position: absolute;
    width: calc(var(--haosns-theme-width) - 315px);
    top: -49px;
    gap: 10px
}

.author-content .content-center .author-menu li {
    padding: 0 15px;
    cursor: pointer;
    position: relative;
    transition: .3s;
    height: 35px;
    line-height: 35px;
    border-radius:4px;
    background: #fff;
    color: #333;
    border: 1px solid #f1f1f1;
    background-color: #f7f7f7
}

.author-content .content-center .author-menu .on,
.author-content .content-center .author-menu li:hover {
    color: #fff;
    background: #2f353b;
    border-color: #2f353b
}
.haosns-author-post-list {
    margin-top: 15px;
    position: relative
}

.haosns-author-post-list .follow-fans-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    background: #fff;
    padding: 15px;
    border: 1px #eee solid;
    border-radius: var(--haosns-border-radius)
}

.haosns-author-post-list .follow-fans-list li {
    display: flex;
    background: #fff;
    border: 1px #eee solid;
    border-radius: var(--haosns-border-radius);
    position: relative;
    overflow: hidden;
    align-items: center
}

.haosns-author-post-list .follow-fans-list .avatarimg {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    width: 60px;
    height: 60px;
    border-right: 1px #eee dashed
}

.haosns-author-post-list .follow-fans-list .avatarimg img {
    width: 100%;
    height: 100%
}

.haosns-author-post-list .follow-fans-list li .info {
    position: relative;
    overflow: hidden;
    flex: 1;
    padding: 0 10px
}

.haosns-author-post-list .follow-fans-list li .info .name {
    display: flex;
    align-items: center;
    font-size: 18px;
    height: 30px
}

.haosns-author-post-list .follow-fans-list li .info .desc {
    font-size: 12px;
    color: #777;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.haosns-author-post-list .follow-fans-list li .follow {
    position: absolute;
    right: -70px;
    bottom: 5px;
    font-size: 12px;
    color: #fff;
    cursor: pointer;
    border-radius: 3px;
    line-height: 27px;
    background: #2196f3;
    padding: 0 10px;
    transition: .3s
}

.haosns-author-post-list .follow-fans-list li:hover .follow {
    right: 5px
}

.haosns-author-post-list .follow-fans-list li .follow.had {
    background: #ccc
}

.author-content .content-right {
    width: 300px;
    position: relative;
    top: 115px
}



.haosns-author-setting {
    position: relative;
    background: #fff;
    margin: 0;
    border: 1px #eee solid;
    border-radius: var(--haosns-border-radius);
    width: 100%
}

.haosns-author-setting .box.three .layui-btn {
    width: 100px
}

.haosns-author-setting .box.three {
    grid-template-columns: 100px 200px auto
}

.haosns-author-setting .layui-tab-title {
    display: flex;
    align-items: center
}

.haosns-author-setting .layui-tab-title li {
    flex: 1
}

.haosns-author-setting .layui-tab-content {
    padding: 15px
}

.tox-tinymce {
    flex: 1
}

.tox-tinymce-aux {
    z-index: 9999 !important
}

.tox-tinymce {
    border: none !important
}

.tox:not(.tox-tinymce-inline) .tox-editor-header {
    box-shadow: none !important;
    padding: 0 !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid #f8f8f8 !important
}

.tox .tox-tbtn--bespoke {
    width: 80px !important
}

.tox .tox-toolbar__group {
    padding: 0 !important
}

.tox-icon i.haosns-icon {
    font-size: 20px
}

.tox .tox-dialog {
    margin-top: auto !important;
    margin-bottom: auto !important
}

.tox .tox-edit-area::before {
    border: 0 !important
}

.haosns-user-list-box {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0;
    padding: 10px 0;
    border-bottom: 1px solid #f5f5f5;
    position: relative;
    overflow: hidden
}

.haosns-user-list-box>a {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1
}

.haosns-user-list-box .avatarimg {
    width: 40px;
    height: 40px;
    position: relative
}

.haosns-user-list-box .info {
    flex: 1;
    overflow: hidden
}

.haosns-user-list-box .info .desc {
    font-size: 12px;
    color: #999;
    margin-top: 5px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.haosns-user-list-box.redbag .info .name {
    font-size: 14px
}

.haosns-user-list-box .info .name,
.haosns-user-list-box .info .name a {
    color: #333;
    display: flex;
    align-items: center
}

.haosns-user-list-box.redbag .number {
    height: 100%;
    display: flex;
    flex-flow: column;
    font-size: 14px;
    color: #000;
    text-align: right
}

.haosns-user-list-box.redbag .number p {
    height: 20px;
    color: #ffc107;
    font-size: 12px
}

.haosns-user-list-box.redbag .number p i {
    margin-right: 5px
}

.haosns-get-redbag-container .redbag-tips {
    position: relative;
    text-align: center;
    width: 100%;
    font-size: 12px;
    color: #555;
    padding: 10px 0
}

.haosns-chat-do-popup .layui-menu-body-title {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #333
}

.haosns-chat-do-popup .layui-menu-body-title i {
    width: 18px
}

.haosns-user-member-bg-container {
    position: relative;
    padding: 20px
}

.haosns-user-member-bg-container li {
    width: 100%;
    cursor: pointer;
    position: relative;
    margin-bottom: 10px
}

.haosns-user-member-bg-container li img {
    width: 100%;
    object-fit: cover;
    aspect-ratio: 16/9
}

.haosns-user-member-bg-container li img:hover {
    opacity: .7
}

.haosns-user-member-bg-container li.on:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .6;
    border-radius: 4px
}

.haosns-user-member-bg-container li.on:after {
    font-family: haosns-icon !important;
    content: "\e64f";
    position: absolute;
    color: #1be23d;
    font-size: 30px;
    top: 50%;
    left: 50%;
    margin-top: -24px;
    margin-left: -15px
}

.haosns-user-member-bg-container li .vip {
    position: absolute;
    right: 8px;
    color: #fff;
    background-color: #ec6159;
    padding: 0 6px;
    top: 8px;
    border-radius: 2px;
    font-size: 12px;
    z-index: 1
}

.select-header {
    position: relative;
    background: #fff;
    border-radius: 5px;
    padding: 15px;
    border: 1px #eee solid
}

.header-province .toggle {
    position: absolute;
    right: 10px;
    top: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    cursor: pointer;
    transition: .3s
}

.header-province .toggle:hover {
    color: var(--haosns-theme-color)
}

.header-province .right {
    transition: .3s;
    height: 40px
}

.header-province .toggle i {
    transition: .3s
}

.header-province .toggle.on i {
    transform: rotate(180deg)
}

.select-header .header-box .box-list {
    display: flex;
    margin-bottom: 15px
}

.select-header .header-box:last-of-type .box-list {
    margin: 0
}

.select-header .header-box .box-list .left {
    min-width: 70px;
    text-align: right;
    line-height: 30px;
    margin: 0 5px
}

.select-header .header-box .box-list .right {
    flex: 1;
    position: relative;
    overflow: hidden
}

.select-header .header-box .box-list .right li {
    display: inline-block;
    padding: 0 15px;
    cursor: pointer;
    line-height: 30px;
    border-radius: 5px;
    color: #333;
    margin: 0 10px 10px 0
}

.select-header .header-box .box-list .right .on {
    background: var(--haosns-theme-color);
    color: #fff
}

.select-header .header-box .box-list .right li:hover {
    background: var(--haosns-theme-color);
    color: #fff
}

.select-content {
    position: relative;
    margin-top: 15px
}

.sign-main .sign-left {
    flex: 1;
    position: relative
}

.sign-main .sign-left .box {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: var(--haosns-border-radius);
    margin-bottom: 10px
}

.sign-user-mark-list {
    width: 100%;
    height: 125px;
    padding: 15px 0
}

.sign-user-mark-list m {
    position: absolute;
    left: 20px;
    top: 10px;
    font-size: 20px;
    color: #ddd;
    z-index: 0;
    letter-spacing: 3px
}

.sign-user-mark-list .user-mark-item {
    position: absolute;
    white-space: nowrap;
    color: red;
    font-size: 18px;
    top: 10px;
    left: 100%
}

.sign-user-mark-list .user-mark-item li {
    display: flex;
    align-items: center;
    height: 30px;
    gap: 10px;
    line-height: 30px
}

.sign-user-mark-list .user-mark-item li a {
    display: flex
}

.sign-user-mark-list .user-mark-item li>span {
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 10px;
    border-radius: 3px;
    position: relative;
    line-height: 30px;
    height: 30px
}

.sign-user-mark-list .user-mark-item li>span:after {
    content: "";
    position: absolute;
    top: 10px;
    left: 2px;
    transform: translateX(-50%) rotate(-45deg);
    width: 10px;
    height: 10px;
    background: inherit;
    background-size: 100% 100%
}

.sign-user-mark-list .user-mark-item li>span img {
    transform: translateY(-1px);
    width: 20px;
    height: 20px
}

.sign-user-mark-list .user-mark-item li .avatar {
    border: 1px #eee solid;
    width: 28px;
    height: 28px;
    border-radius: 100%
}

.sign-user-mark-list .user-mark-item li .haosns-verify-icon img {
    width: 12px;
    height: 12px
}

.sign-main .sign-left .sign-time-content {
    display: flex;
    align-items: center
}

.sign-time-content .bg {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 200px;
    z-index: 1;
    background: var(--haosns-theme-color);
    background-size: cover
}

.sign-time-content .left {
    position: relative;
    width: 200px;
    display: grid;
    grid-template-rows: 75px 30px 70px 30px;
    gap: 5px;
    align-items: flex-start;
    text-align: center;
    z-index: 2;
    color: #fff;
    text-shadow: 0 0 10px #000
}

.sign-time-content .left>div {
    display: flex;
    align-items: baseline;
    justify-content: center;
    font-weight: 700
}

.sign-time-content .left>div m {
    font-size: 70px;
    margin-right: 5px
}

.sign-time-content .left>div n {
    font-size: 30px;
    transform: translateY(-2px)
}

.sign-time-content .left>span {
    font-size: 18px;
    font-weight: 700;
    font-family: auto
}

.sign-time-content .left>em {
    width: 60%;
    height: 1px;
    background: #ddd;
    margin: auto
}

.sign-time-content .left>p {
    font-size: 20px;
    letter-spacing: 5px;
    text-indent: 10px;
    font-weight: 700
}

.sign-time-content .right {
    flex: 1
}

.sign-time-content .right .header {
    display: flex;
    height: 60px;
    align-items: center
}

.sign-time-content .right .header span {
    flex: 1;
    line-height: 35px;
    text-align: center;
    color: #999
}

.sign-time-content .right .content {
    display: grid;
    grid-template-rows: 35px 35px 35px 35px 35px;
    gap: 10px;
    margin-bottom: 15px
}

.sign-time-content .right .content li {
    display: flex;
    align-items: center;
    text-align: center
}

.sign-time-content .right .content li span {
    flex: 1;
    line-height: 35px;
    display: flex;
    align-items: center;
    justify-content: center
}

.sign-time-content .right .content li span n {
    color: #000;
    font-size: 18px;
    cursor: pointer;
    transition: .3s;
    width: 35px;
    border-radius: 20px;
    position: relative;
    z-index: 2;
    transform: scale(1)
}

.sign-time-content .right .content li .today n {
    background: #ff9800;
    color: #fff
}

.sign-time-content .right .content li span i {
    position: absolute;
    font-size: 35px;
    color: var(--haosns-theme-color);
    z-index: 1;
    opacity: .5;
    transform: rotate(-15deg);
    pointer-events: none;
    transition: .3s;
    margin: -3px 0 0 -5px
}

.sign-time-content .right .content li span n:hover {
    color: var(--haosns-theme-color)
}

.sign-time-content .right .content li span .yes:hover {
    color: #000
}

.sign-time-content .right .content li span .yes:hover+i {
    transform: rotate(-5deg)
}

.sign-time-content .right .content li .today i {
    color: #ff9800
}

.sign-time-content .right .content li .today n:hover {
    color: #fff;
    transform: scale(.9)
}

.sign-time-content .right .content li .today .yes {
    background: 0 0;
    color: #000
}

.sign-time-content .right .content li .today .yes:hover {
    color: #000;
    transform: scale(1)
}

.sign-rank-content .layui-tab-title {
    height: 50px;
    display: flex
}

.sign-rank-content .layui-tab-title li {
    line-height: 50px
}

.sign-rank-content .layui-tab-title li:after {
    height: 51px
}

.sign-rank-content .layui-tab-title .right {
    flex: 1;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: flex-end
}

.sign-rank-content .layui-tab-title .right span {
    margin-right: 20px;
    display: flex;
    align-items: center;
    height: 100%
}

.sign-rank-content .layui-tab-title .right span a {
    color: #2196f3
}

.sign-rank-content .layui-tab-title .right span n {
    color: #000;
    padding: 0 5px;
    font-weight: 700;
    font-size: 18px
}

.sign-rank-content .layui-tab-content {
    position: relative;
    padding: 15px
}

.sign-rank-content .layui-tab-content .layui-show {
    display: grid !important
}

.sign-rank-content .layui-tab-content .haosns-empty-page {
    grid-column: 1/-1
}

.sign-rank-content .layui-tab-content .layui-tab-item {
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 15px
}

.sign-rank-content .layui-tab-content li {
    display: flex;
    gap: 5px;
    align-items: center;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    justify-content: center
}

.sign-rank-content .layui-tab-content li n {
    width: 20px;
    color: #999;
    text-align: center
}

.sign-rank-content .layui-tab-content li .avatarimg {
    width: 45px;
    height: 45px
}

.sign-rank-content .layui-tab-content li .avatarimg .tips-content img {
    width: 20px;
    height: 20px
}

.sign-rank-content .layui-tab-content li .info {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sign-rank-content .layui-tab-content li .info .name {
    display: flex;
    align-items: center;
    height: 25px
}

.sign-rank-content .layui-tab-content li .info .name a {
    font-size: 16px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.sign-rank-content .layui-tab-content li .info .desc {
    font-size: 12px;
    color: #999;
    line-height: 20px
}

.sign-info-content {
    padding: 15px
}

.sign-main .sign-right .box {
    position: relative;
    overflow: hidden;
    padding: 15px;
    background: #fff;
    border-radius: var(--haosns-border-radius)
}

.sign-user {
    display: flex;
    align-items: center;
    gap: 10px
}

.sign-user .left {
    position: relative
}

.sign-user .left a {
    position: relative;
    display: block;
    width: 50px;
    height: 50px
}

.sign-user .right {
    flex: 1;
    display: grid;
    grid-template-rows: 1fr 1fr
}

.sign-user .right span {
    display: flex;
    align-items: center;
    color: #666;
    line-height: 25px
}

.sign-user .right span m {
    display: flex;
    align-items: center;
    flex: 1
}

.sign-user .right span m n {
    color: #000;
    padding-right: 3px
}

.sign-user .right span a {
    color: #2196f3
}

.sign-user .right .sign_count i {
    color: #000;
    padding-right: 3px;
    font-style: normal
}

.sign-today .header {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.sign-today .header .left {
    display: flex;
    flex-direction: column
}

.sign-today .header .left .title {
    color: #252933;
    font-size: 16px;
    font-weight: 600;
    line-height: 24px
}

.sign-today .header .left .tips {
    color: #8a919f;
    font-size: 12px;
    font-weight: 400;
    line-height: 24px;
    margin-top: 2px
}

.sign-today .content {
    border: 1px #eee solid;
    padding: 15px;
    border-radius: 3px;
    margin-top: 20px;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center
}

.sign-today .content span {
    position: absolute;
    top: -10px;
    width: 100px;
    text-align: center;
    line-height: 20px;
    background: #fff
}

.sign-today .list {
    flex: 1
}

.sign-today .list li {
    display: flex;
    align-items: center;
    height: 25px
}

.sign-today .list li i {
    color: #ccc;
    padding-right: 10px
}

.sign-today .list li n {
    color: #2196f3;
    margin-left: 5px
}

.sign-month .header {
    position: relative;
    display: flex;
    align-items: center;
    height: 25px;
    margin-bottom: 15px;
    text-shadow: 0 0 1px #999;
    padding-left: 20px
}

.sign-month .header:before {
    content: "";
    width: 3px;
    height: 15px;
    background: #ff5473;
    position: absolute;
    left: 0;
    border-radius: 5px;
    transform: rotate(15deg)
}

.sign-month .header:after {
    content: "";
    width: 3px;
    height: 12px;
    background: #2196f3;
    position: absolute;
    left: 7px;
    border-radius: 5px;
    transform: rotate(15deg)
}

.sign-month .header span {
    color: #333;
    flex: 1
}

.sign-month .header m {
    display: flex;
    align-items: center
}

.sign-month .header n {
    padding: 0 3px;
    font-size: 16px;
    color: #000
}

.sign-month .content {
    position: relative
}

.sign-month .content li {
    display: flex;
    align-items: center;
    margin-bottom: 15px
}

.sign-month .content li:last-of-type {
    margin: 0
}

.sign-month .content .img {
    display: flex;
    align-items: center;
    flex: 1
}

.sign-month .content .img img {
    width: 40px;
    height: 40px;
    object-fit: contain;
    margin-right: 10px;
    cursor: pointer
}

.sign-month .content .img n {
    padding: 0 3px
}

.sign-custom p {
    line-height: 24px
}

.sign-month .content .shake .img img {
    -webkit-animation: shake-base 2.5s infinite;
    animation: shake-base 2.5s infinite
}

.haosns-sign-form .mark {
    display: flex;
    align-items: center
}

.haosns-sign-form .mark-emotion {
    position: relative;
    overflow: hidden;
    display: flex
}

.haosns-sign-form .haosns-emotion-box {
    width: 100%;
    border: 1px #eee solid;
    border-radius: 3px;
    padding: 5px 10px 10px;
    margin-top: 15px;
    box-shadow: unset
}

.haosns-sign-form .haosns-emotion-box .header {
    margin: 0
}

.haosns-sign-form .haosns-emotion-box .content {
    max-height: 100px
}

.haosns-sign-form .haosns-emotion-box .content .emotion-type-img {
    grid-template-columns: repeat(auto-fill, minmax(calc(100% / 10), 1fr))
}

.haosns-sign-form .haosns-emotion-box .content .emotion-type-text {
    grid-template-columns: repeat(auto-fill, minmax(calc(100% / 4), 1fr))
}

.haosns-sign-form .haosns-emotion-box .content .emotion-type-big_img {
    grid-template-columns: repeat(auto-fill, minmax(calc(100% / 6), 1fr))
}

.haosns-sign-form .mark .mark-text {
    transition: unset;
    flex: 1;
    border-left: 0;
    border-right: 0;
    padding: 0 5px
}

.haosns-sign-form .mark .mark-text:focus {
    box-shadow: unset;
    border-color: #eee !important
}

.haosns-sign-form .mark .mark-text:hover {
    border-color: #eee !important
}

.haosns-sign-form .mark i {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--haosns-theme-color);
    border: 1px #eee solid;
    border-right: 0
}

.haosns-sign-form .mark .mark-hidden {
    font-size: 0;
    max-width: 0;
    pointer-events: none;
    opacity: 0
}

.haosns-sign-form .mark .mark-img {
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    caret-color: transparent;
    min-width: 36px;
    border: 1px #eee solid;
    border-left: 0;
    padding: 0 5px
}

.haosns-sign-form .mark .mark-img img {
    width: 25px;
    height: 25px
}

.haosns-sign-form .list {
    border: 1px #eee solid;
    border-radius: 3px;
    position: relative;
    padding: 20px;
    text-align: center;
    margin: 15px 0 0
}

.haosns-sign-form .list .haosns-empty-page .haosns-chucuo {
    line-height: 50px;
    display: block;
    padding-bottom: 10px
}

.haosns-sign-form .haosns-btn {
    line-height: 35px;
    margin-top: 15px
}

.haosns-sign-form .list m {
    position: absolute;
    top: -10px;
    left: 0;
    line-height: 20px;
    background: #fff;
    right: 0;
    width: 100px;
    margin: auto
}

.haosns-sign-form .list li {
    display: flex;
    align-items: center;
    line-height: 25px;
    justify-content: flex-start
}

.haosns-sign-form .list li i {
    color: #999
}

.haosns-sign-form .list li n {
    color: #2196f3;
    margin-left: 5px
}

.haosns-sign-form .no {
    background: #ddd
}

.haosns-sign-form .header {
    text-align: center
}

.haosns-sign-form .header div {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 35px
}

.haosns-sign-form .header div i {
    color: #4caf50;
    font-size: 22px;
    margin-right: 5px
}

.haosns-sign-form .header span {
    color: #666
}

.haosns-author-setting .box {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 30px;
    align-items: flex-start;
    padding: 10px 0
}

.haosns-author-setting .box .left {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    height: 38px
}

.haosns-author-setting .box .right .btn.haosns-btn {
    width: 80px;
    color: #fff;
    margin: 0;
    position: absolute;
    left: 200px;
    bottom: 0
}

.haosns-author-setting .box .right {
    display: flex;
    position: relative
}

.haosns-author-setting .box .right img {
    margin-left: 5px;
    width: 30px;
    height: 30px;
    border-radius: 100%
}

.haosns-author-setting .box .right .layui-form-radio {
    margin: 0 15px 0 0;
    height: 38px;
    display: flex;
    align-items: center
}

.haosns-author-setting .box .right .layui-form-radio div {
    display: flex;
    align-items: center
}

.haosns-author-setting .box .right .layui-input {
    width: auto;
    border-radius: 3px;
    padding: 0 10px;
    max-width: 100%
}

.haosns-author-setting .box .right .tips {
    color: #aaa;
    margin: 0 10px;
    line-height: 38px;
    font-size: 12px
}

.haosns-author-setting .box .right .layui-textarea {
    min-height: 75px;
    width: 300px
}

.haosns-author-setting .box .right .btn {
    line-height: 38px;
    margin-left: 10px;
    color: #2196f3;
    cursor: pointer;
    height: 38px
}

.haosns-author-setting .box .right .binding {
    line-height: 38px
}

.haosns-author-setting .box .right .binding n {
    color: #ff5722;
    cursor: pointer
}

.haosns-author-setting .box .right .binding m {
    color: #009688
}

.haosns-author-setting .box .right .upload-btn {
    line-height: 38px;
    background: var(--haosns-theme-color);
    color: #fff;
    padding: 0 10px;
    border-radius: 0 3px 3px 0;
    cursor: pointer
}

.haosns-author-setting .box .right .layui-form-switch {
    margin: 7px 0
}

.haosns-author-setting .box.upload .right {
    align-items: center
}

.haosns-author-setting .box.upload .right img {
    border-radius: 4px;
    margin-right: 10px;
    width: 38px;
    height: 38px;
    object-fit: cover
}

.haosns-author-setting .haosns-setting-btn {
    background: var(--haosns-theme-color);
    color: #fff;
    line-height: 35px;
    border-radius: var(--haosns-border-radius-btn, 3px);
    cursor: pointer;
    transition: all .3s cubic-bezier(.645, .045, .355, 1);
    margin: 15px;
    text-align: center
}

.haosns-content-popup {
    border-radius: 5px
}

.haosns-content-popup-content {
    width: 100%;
    height: 100%;
    margin: 0;
    position: relative;
    overflow: hidden;
    border-radius: 5px
}

.haosns-content-popup-content .menu {
    display: flex;
    align-items: center;
    border-bottom: 1px #eee dashed
}

.haosns-content-popup-content .menu li {
    flex: 1;
    display: flex;
    align-items: center;
    position: relative;
    justify-content: center;
    transition: .3s;
    cursor: pointer;
    height: 60px
}

.haosns-content-popup-content .menu .on {
    color: var(--haosns-theme-color)
}

.haosns-content-popup-content .menu .on:after {
    content: "";
    width: 20px;
    height: 2px;
    position: absolute;
    background: var(--haosns-theme-color);
    bottom: 10px
}

.haosns-content-popup-content .menu li:hover {
    color: var(--haosns-theme-color)
}

.haosns-content-popup-content .list .content .content-content {
    position: relative;
    overflow: hidden
}

.haosns-content-popup-content .list {
    position: relative;
    overflow: hidden;
    padding: 0 20px
}

.haosns-content-popup-content .list .content {
    display: none;
    -webkit-animation: main-show .3s;
    animation: main-show .3s;
    grid-template-rows: 50px 350px 50px;
    height: 100%
}

.haosns-content-popup-content .list .content.on {
    display: grid
}

.haosns-content-popup-content .list .content .content-header {
    display: flex;
    height: 49px;
    justify-content: center;
    align-items: center;
    background: #f8f8f9
}

.haosns-content-popup-content .list .content .content-header span {
    text-align: center
}

.haosns-content-popup-content .list .content .content-header span:nth-of-type(1) {
    flex: 5;
    border-right: 1px #eee solid
}

.haosns-content-popup-content .list .content .content-header span:nth-of-type(2) {
    flex: 2;
    border-right: 1px #eee solid
}

.haosns-content-popup-content .list .content .content-header span:nth-of-type(3) {
    flex: 2
}

.haosns-content-popup-content .list .content .content-content li {
    display: flex;
    align-items: center;
    cursor: pointer;
    height: 35px;
    color: #777
}

.haosns-content-popup-content .list .content .content-content li:hover {
    color: #000
}

.haosns-content-popup-content .list .content .content-content li span {
    text-align: center
}

.haosns-content-popup-content .list .content .content-content li span:nth-of-type(1) {
    flex: 5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: left;
    display: flex;
    align-items: center
}

.haosns-content-popup-content .list .content .content-content li span:nth-of-type(1) m {
    margin-right: 5px;
    color: #607d8b
}

.haosns-content-popup-content .list .content .content-content li span:nth-of-type(1) .words {
    color: #2196f3
}

.haosns-content-popup-content .list .content .content-content li span:nth-of-type(1) .music {
    color: #ff9800
}

.haosns-content-popup-content .list .content .content-content li span:nth-of-type(1) .bbs {
    color: #673ab7
}

.haosns-content-popup-content .list .content .content-content li span:nth-of-type(1) a {
    line-height: 35px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.haosns-content-popup-content .list .content .content-content li span:nth-of-type(2) {
    flex: 2
}

.haosns-content-popup-content .list .content .content-content li span:nth-of-type(3) {
    flex: 2
}

.haosns-content-popup-content .list .content .content-content li span:nth-of-type(3) em {
    color: #ff5722
}

.haosns-content-popup-content .list .content .content-content li span:nth-of-type(3) i {
    margin-right: 10px;
    color: #009688
}

.haosns-content-popup-content .list .content .content-content li span:nth-of-type(3)>:hover {
    opacity: .7
}

.haosns-content-popup-content .list .content .content-content li span m {
    color: #4caf50
}

.haosns-content-popup-content .list .content .content-content li span n {
    color: #ff5722
}

.haosns-content-popup-content .list .content .page {
    display: flex;
    align-items: center;
    padding: 0 10px;
    justify-content: center
}

.haosns-sockpuppet-popup {
    border-radius: 5px
}

.haosns-sockpuppet-popup-content {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    padding: 25px 15px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
    gap: 15px
}

.haosns-sockpuppet-popup-content li {
    text-align: center;
    cursor: pointer;
    position: relative;
    overflow: hidden
}

.haosns-sockpuppet-popup-content li .avatarimg {
    width: 50px;
    height: 50px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: auto
}

.haosns-sockpuppet-popup-content .on .avatarimg:after {
    content: "ok";
    position: absolute;
    top: 0;
    right: 0;
    background: rgba(0, 0, 0, .43);
    width: 20px;
    height: 20px;
    border-radius: 0 5px 0 3px;
    color: #fff;
    font-size: 13px
}

.haosns-sockpuppet-popup-content li p {
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px
}

.haosns-tag-setting-popup .layui-layer-content {
    overflow: hidden
}

.haosns-topic-setting-form {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: grid;
    grid-template-rows: 45px auto;
    margin: 0
}

.haosns-topic-setting-form .layui-tab-title {
    padding-top: 5px
}

.haosns-topic-setting-form .layui-tab-content {
    position: relative;
    overflow-x: hidden;
    padding: 15px
}

.haosns-topic-setting-form .layui-form-item {
    display: flex
}

.haosns-topic-setting-form .layui-form-item .layui-input-inline {
    flex: 1
}

.haosns-topic-setting-form .layui-form-item .layui-btn {
    margin-right: 10px
}

.haosns-tag-setting-popup .layui-layer-btn {
    display: flex;
    padding: 0
}

.haosns-tag-setting-popup .layui-layer-btn0 {
    flex: 1;
    text-align: center;
    height: 40px;
    line-height: 40px;
    margin: 0;
    padding: 0
}

.haosns-topic-setting-form .layui-tab-content::-webkit-scrollbar {
    width: 5px
}

.haosns-topic-setting-form .layui-tab-content::-webkit-scrollbar-thumb {
    background: #888
}

.haosns-topic-setting-form .layui-form-select {
    width: 190px
}

.haosns-topic-setting-form .layui-anim-upbit {
    bottom: 100%;
    top: auto
}

.select-user-content {
    position: relative;
    overflow: hidden;
    margin-top: 15px;
    display: grid;
    grid-template-columns: 25% 25% 25% 25%;
    gap: 10px
}

.select-user-content li {
    position: relative;
    background: #fff;
    border: 1px solid #ddd;
    padding: 1px;
    border-radius: 5px;
    overflow: hidden;
    display: grid;
    grid-template-rows: 125px auto
}

.select-user-content li .bg {
    width: 100%;
    background-size: cover;
    border-radius: 5px 5px 0 0
}

.select-user-content li .info {
    position: relative;
    display: grid;
    grid-template-rows: 60px 35px 30px;
    margin-top: -20px
}

.select-user-content li .info .avatarimg {
    align-items: center;
    position: relative;
    display: grid;
    grid-template-columns: 80px auto;
    gap: 10px
}

.select-user-content li .info .avatarimg .left {
    display: flex;
    justify-content: flex-end
}

.select-user-content li .info .avatarimg .left a {
    display: inline-flex;
    width: 58px;
    height: 58px;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 5px;
    box-shadow: 0 0 15px #fff;
    border: 1px #eee solid;
    position: relative
}

.select-user-content li .info .avatarimg .left a:hover {
    opacity: 1
}

.select-user-content li .info .avatarimg .left a img {
    width: calc(100% - 3px);
    height: calc(100% - 3px);
    background: #fff;
    padding: 1.5px;
    border-radius: 5px
}

.select-user-content li .info .avatarimg .name {
    flex: 1
}

.select-user-content li .info .avatarimg .name a {
    display: flex;
    align-items: flex-end;
    height: 35px
}

.select-user-content li .info .avatarimg .name .haosns-vip img {
    height: 14px
}

.select-user-content li .info .avatarimg .name a .nickname {
    font-size: 16px
}

.select-user-content li .info .avatarimg .name a .haosns-mark {
    margin-left: 10px
}

.select-user-content li .info .desc {
    display: inline-block;
    padding: 0 10px;
    color: #999;
    line-height: 35px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.select-user-content li .info .desc a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #000
}

.select-user-content li .info .numbers {
    position: relative;
    padding: 0 10px;
    color: #777;
    font-size: 12px;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    align-items: center
}

.select-user-content li .info .numbers n {
    color: #333;
    font-weight: 700
}

.select-user-content .haosns-empty-page,
.select-user-content .haosns-more,
.select-user-content .haosns-more-loading {
    grid-column: 1/-1;
    height: 60px;
    margin: auto;
    align-items: center
}

.select-user-content .haosns-more span {
    background: #eee
}

.haosns-update-password-form {
    padding-top: 20px
}

.shop-main {
    display: grid;
    grid-template-rows: 350px auto;
    gap: 15px
}

.shop-main .header {
    display: flex;
    height: 100%;
    gap: 15px;
    position: relative;
    overflow: hidden
}

.shop-main .header-left {
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    background: #fff;
    z-index: 9;
    border: 1px #eee solid;
    flex: 1
}

.shop-main .header-left-menu {
    position: absolute;
    z-index: 1;
    top: 20px;
    left: 20px;
    bottom: 20px;
    background: rgba(255, 255, 255, .65);
    border-radius: 3px 0 0 3px
}

.shop-main .header-left-menu li {
    display: flex;
    align-items: center;
    height: 50px;
    padding: 0 15px;
    min-width: 115px
}

.shop-main .header-left-menu li:hover {
    background: rgba(255, 255, 255, .9)
}

.shop-main .header-left-menu li>a {
    display: grid;
    grid-template-columns: 1fr auto;
    flex: 1;
    height: 100%;
    align-items: center;
    color: #000
}

.shop-main .header-left-menu li>a i {
    font-size: 14px
}

.shop-main .header-left-menu li:hover .list {
    opacity: 1;
    visibility: visible
}

.shop-main .header-left-menu li .list {
    position: absolute;
    top: 0;
    width: 350px;
    right: -350px;
    background: rgba(255, 255, 255, .9);
    border: 1px #eee solid;
    padding: 15px;
    opacity: 0;
    visibility: hidden;
    border-radius: 0 3px 3px 0;
    border-left: 0;
    height: 309px
}

.shop-main .header-left-menu li .list a {
    line-height: 35px;
    margin-right: 10px;
    display: inline-flex
}

.shop-main .header-left-menu li .list:after {
    content: "";
    position: absolute;
    width: 15px;
    left: -15px;
    background: 0 0;
    top: 0;
    bottom: 0
}

.shop-main .header-left-swiper {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0
}

.shop-main .header-left-swiper .swiper-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex
}

.shop-main .header-left-swiper a {
    height: 100%;
    width: auto;
    flex-shrink: 0
}

.shop-main .header-left-swiper a img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.shop-main .header-left-swiper a:hover {
    opacity: 1
}

.shop-main .header-left-swiper .swiper-pagination {
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 9;
    display: flex;
    gap: 15px;
    padding: 15px
}

.shop-main .header-left-swiper .swiper-pagination span {
    width: 20px;
    height: 5px;
    background: rgba(255, 255, 255, .35);
    border-radius: 2px;
    cursor: pointer
}

.shop-main .header-left-swiper .swiper-pagination .swiper-pagination-bullet-active {
    background: #fff
}

.shop-main .header-right {
    border-radius: 5px;
    background: #fff;
    z-index: 9;
    border: 1px #eee solid;
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-rows: 1fr auto;
    padding: 15px 0;
    width: 260px
}

.shop-main .header-right .info {
    padding: 0 15px
}

.shop-main .header-right .info a {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 15px
}

.shop-main .header-right .info a .left img {
    width: 100%;
    border-radius: 100%;
    box-shadow: 0 0 2px #000
}

.shop-main .header-right .info .right {
    display: grid;
    grid-template-rows: 35px 25px;
    align-items: center
}

.shop-main .header-right .info .right .name {
    color: #252933;
    font-size: 18px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 5px
}

.shop-main .header-right .menu {
    display: grid;
    gap: 25px
}

.shop-main .header-right .menu .a {
    display: flex;
    align-items: center
}

.shop-main .header-right .menu .a a {
    flex: 1;
    display: grid;
    grid-template-rows: auto auto;
    gap: 5px;
    justify-content: center;
    text-align: center
}

.shop-main .header-right .menu .a a n {
    font-weight: 600;
    font-size: 16px
}

.shop-main .header-right .menu .b {
    align-items: center;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    grid-row-gap: 15px
}

.shop-main .header-right .menu .b a {
    display: grid;
    grid-template-rows: auto;
    gap: 5px;
    text-align: center
}

.shop-main .header-right .menu .b a i {
    font-size: 25px;
    color: #888
}

.shop-main .content {
    position: relative;
    overflow: hidden;
    min-height: 800px
}

.shop-main .content .box {
    display: grid;
    grid-template-rows: 50px auto;
    gap: 5px;
    margin-bottom: 20px
}

.shop-main .content .box:last-of-type {
    margin: 0
}

.shop-main .content .box-header {
    display: flex;
    align-items: center
}

.shop-main .content .box-header:before {
    content: "";
    width: 4px;
    height: 18px;
    background: #ff5473;
    position: absolute;
    left: 5px;
    border-radius: 5px;
    transform: rotate(15deg)
}

.shop-main .content .box-header:after {
    content: "";
    width: 4px;
    height: 15px;
    background: #2196f3;
    position: absolute;
    left: 13px;
    border-radius: 5px;
    transform: rotate(15deg)
}

.shop-main .content .box-header m {
    flex: 1;
    font-size: 24px;
    font-weight: 400;
    padding-left: 25px
}

.shop-main .content .box-header a {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px
}

.shop-main .content .box-header a i {
    font-size: 14px
}

.shop-main .content .box-list {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 15px
}

.shop-main .content .box-list a {
    position: relative;
    overflow: hidden;
    border: 1px #eee solid;
    background: #fff;
    border-radius: 5px
}

.shop-main .content .box-list .a {
    width: 100%;
    display: flex;
    height: 280px
}

.shop-main .content .box-list .a img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.shop-main .content .box-list .a .tip {
    position: absolute;
    left: 10px;
    top: 10px;
    background: #ff1f32;
    font-size: 12px;
    padding: 3px 5px;
    border-radius: 2px;
    color: #fff
}

.shop-main .content .box-list .b {
    font-size: 16px;
    color: #333;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    line-height: 30px;
    padding: 0 10px;
    text-align: center
}

.shop-main .content .box-list .c {
    font-size: 14px;
    text-align: center;
    line-height: 20px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 10px;
    color: #888
}

.shop-main .content .box-list .d {
    display: flex;
    height: 50px;
    align-items: center;
    padding: 0 15px
}

.shop-main .content .box-list .d .left {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 5px
}

.shop-main .content .box-list .d .right {
    font-size: 12px;
    color: #777
}

.shop-main .content .box-list .d .left .rmb {
    display: flex;
    color: #e4393c;
    font-weight: 600;
    align-items: center
}

.shop-main .content .box-list .d .left .rmb n {
    font-size: 24px
}

.shop-main .content .box-list .d .left .rmb m {
    font-size: 16px;
    transform: translateY(2px)
}

.shop-main .content .box-list .d .left em {
    display: flex;
    text-decoration: line-through;
    font-size: 16px;
    color: #999;
    transform: translateY(2px)
}

.haosns-report-popup-content {
    position: relative;
    padding: 15px 20px 20px;
    display: grid;
    grid-template-rows: auto;
    gap: 10px
}

.haosns-report-popup-content>div>span {
    line-height: 35px
}

.haosns-report-popup-content .report-name {
    height: 35px;
    display: flex;
    align-items: center;
    gap: 5px
}

.haosns-report-popup-content .report-name a {
    color: #2196f3
}

.haosns-report-popup-content .report-type {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px
}

.haosns-report-popup-content .report-reason {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5px
}

.haosns-report-popup-content .report-reason textarea {
    resize: none
}

.haosns-report-popup-content .report-btn {
    background: var(--haosns-theme-color);
    color: #fff;
    line-height: 35px;
    padding: 0 15px;
    border-radius: var(--haosns-border-radius-btn, 3px);
    cursor: pointer;
    transition: .3s;
    text-align: center;
    margin-top: 5px
}

.haosns-report-popup-content .report-btn:hover {
    opacity: .7
}

.haosns-report-popup-content .report-tips {
    line-height: 16px;
    padding: 8px;
    border: 1px solid rgb(244 67 54 / 10%);
    color: #f44336;
    border-radius: 5px;
    background: rgb(244 67 54 / 10%)
}

.haosns-report-popup-content .report-type .layui-form-selected dl {
    max-height: 200px
}

.haosns-menu-types {
    border-radius: 5px
}

.haosns-follow-chat-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px 15px;
    gap: 10px
}

.haosns-follow-chat-btn span {
    font-size: 14px;
    color: #fff;
    cursor: pointer;
    border-radius: var(--haosns-border-radius-btn);
    line-height: 35px;
    text-align: center;
    transition: .3s
}

.haosns-follow-chat-btn span:hover {
    opacity: .7
}

.haosns-follow-chat-btn .follow {
    flex: 3;
    background-color: var(--haosns-theme-color)
}

.haosns-follow-chat-btn .follow.had {
    background-color: #ccc
}

.haosns-follow-chat-btn .chat {
    flex: 2;
    background-color: #2196f3
}

.haosns-sign-form .list .sign-status {
    color: #4caf50;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px
}

.system-notify-container .body-footer {
    color: #2196f3;
    display: flex;
    align-items: center;
    height: 30px;
    gap: 2px
}

.system-notify-container .body-footer i {
    font-size: 14px
}

.system-notify-container .item {
    display: flex;
    height: 28px;
    align-items: center;
    gap: 5px
}

.system-notify-container .subtitle {
    color: #888
}

.system-notify-container .header-title {
    font-size: 18px;
    margin-bottom: 10px
}

.comments-list .post-bbs {
    position: relative;
    overflow: hidden;
    padding: 15px;
    background: #fff;
    border-radius: 5px;
    margin-bottom: 15px;
    display: flex;
    gap: 10px
}

.comments-list .post-bbs .bbs-avatarimg {
    width: 50px;
    height: 50px;
    position: relative;
    overflow: hidden
}

.comments-list .post-bbs .bbs-info {
    flex: 1;
    display: grid;
    grid-template-rows: 30px 20px;
    align-items: center
}

.comments-list .post-bbs .bbs-name {
    font-size: 16px;
    color: #333;
    display: flex;
    gap: 10px
}

.comments-list .post-bbs .bbs-name a {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.comments-list .post-bbs .bbs-name span {
    font-size: 12px;
    color: #999;
    display: flex;
    gap: 3px;
    align-items: center
}

.comments-list .post-bbs .bbs-name span n {
    color: #666
}

.comments-list .post-bbs .bbs-desc {
    display: block;
    font-size: 13px;
    color: #999;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.haosns-comment-list-box {
    background: #f3f3f3;
    border-radius: 4px
}

.haosns-comment-menu {
    margin: 15px 0;
    display: flex;
    height: 25px
}

.haosns-comment-menu li {
    padding: 0 10px;
    position: relative;
    line-height: 20px;
    cursor: pointer
}

.haosns-comment-menu .comment-count {
    flex: 1
}

.haosns-comment-menu .comment-count span {
    padding-right: 3px
}

.haosns-comment-menu li.on,
.haosns-comment-menu li:hover {
    color: var(--haosns-theme-color)
}

.haosns-comment-menu li.on:after {
    position: absolute;
    content: "";
    width: 20px;
    height: 2px;
    background-color: var(--haosns-theme-color);
    left: calc(50% - 10px);
    bottom: -3px
}

.haosns-user-cancel m {
    color: red
}

.haosns-user-cancel .layui-layer-btn0 {
    background: #fff;
    color: #ff5722;
    border-color: #ff5722
}

.haosns-user-cancel .layui-layer-btn1 {
    background: var(--haosns-theme-color);
    color: #fff;
    border-color: transparent
}

.haosns-online {
    border-radius: 100%;
    border: 2px solid #fff;
    height: 8px;
    width: 8px;
    position: absolute;
    top: 0;
    left: 0;
    background-color: #07c160
}

.haosns-popup-publish-form .layui-layer-content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    text-align: center;
    padding: 15px
}

.haosns-popup-publish-form .layui-layer-content a {
    display: flex;
    flex-direction: column;
    width: 100px
}

.haosns-popup-publish-form .layui-layer-content a i {
    font-size: 28px
}

.haosns-popup-publish-form .haosns-empty-page {
    grid-column: 1/-1
}

.haosns-post-status-tips {
    margin: 20px auto;
    width: var(--haosns-theme-width);
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px;
    border-radius: var(--haosns-border-radius);
    color: red
}

.haosns-post-status-tips.trash {
    background-color: #fdd3cd
}

.haosns-post-status-tips.draft {
    background-color: #fff8e6
}

.haosns-post-status-tips.pending {
    background-color: #fff8e6
}

.haosns-post-status-tips.reject {
    background-color: #fff8e6
}

.haosns-post-status-tips.private {
    background-color: #e6f7ff
}

#music-player {
    position: fixed;
    z-index: 88888;
    left: 0;
    top: 0;
    display: block;
    width: 70px;
    height: 100px;
    margin: 10px;
    -webkit-animation: music-player-transparent-to-opaque .3s;
    animation: music-player-transparent-to-opaque .3s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    border-radius: 4px;
    overflow: hidden;
    background-image: var(--music-bg-image, url(../public/images/music-nocover.jpg));
    background-color: rgb(0 0 0 / 20%);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: 50% 50%
}

#music-player>div.move {
    width: 70px;
    height: 70px;
    cursor: move
}

#music-player>div.player-min-button {
    position: relative;
    width: 70px;
    height: 30px
}

#music-player>div.player-min-button::before {
    position: absolute;
    z-index: -1;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    content: ""
}

#music-player>div.player-min-button::after {
    position: absolute;
    z-index: -2;
    left: 0;
    top: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    background: rgb(0 0 0 / 30%)
}

#music-player>div.player-min-button>div.player-btn {
    position: relative;
    height: 30px;
    display: flex
}

#music-player>div.player-min-button>div.player-btn>div {
    color: #fff;
    flex: 1;
    text-align: center;
    height: 30px;
    line-height: 30px;
    cursor: pointer
}

#music-player>div.player-min-button>div.player-btn>div:hover {
    opacity: .8
}

#music-player>div.player-min-button>div.player-progress {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(250, 250, 250, .1);
    pointer-events: none
}

#music-player>div.player-min-button>div.player-progress::after {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--music-progress-width, 0);
    max-width: 100%;
    height: 1px;
    background-color: var(--haosns-theme-color);
    content: ""
}

.ql-code-block-container {
    background: #23241f;
    padding: 10px;
    font-size: 13px;
    color: #f8f8f2
}

[list-style=default] {
    display: flex;
    flex-direction: column
}

[list-style=default] .haosns-empty-page {
    background: 0 0
}

.list-style-default {
    padding: 15px;
    background: #fff;
    border-radius: var(--haosns-border-radius);
    display: flex;
    gap: 10px;
    margin-bottom: 15px
}

.list-style-default .list-left {
    display: flex;
    width: 40px
}

.list-style-default .list-left a {
    width: 40px;
    height: 40px;
    position: relative
}

.list-style-default .list-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1
}

.list-style-default .list-right .post-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 5px
}

.list-style-default .list-right .post-header .info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px
}

.list-style-default .list-right .post-header .more {
    line-height: 40px;
    width: 30px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center
}

.list-style-default .list-right .post-header .more i {
    font-size: 22px;
    color: #eee;
    transition: .3s
}

.list-style-default .list-right .post-header .name {
    color: #333;
    display: flex;
    height: 20px;
    line-height: 20px;
    align-items: center
}

.list-style-default .list-right .post-header .name a {
    color: #333;
    display: flex;
    align-items: center;
    gap: 5px
}

.list-style-default .list-right .post-header .desc {
    font-size: 12px;
    color: #bbb;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 18px;
    line-height: 18px
}

.list-style-default .list-right .post-header .desc span {
    height: 18px;
    display: flex;
    align-items: center
}

.list-style-default .list-right .post-title {
    word-break: break-all;
    line-height: 20px;
    font-size: 15px
}

.list-style-default .list-right .post-title a {
    color: #111
}

.list-style-default .list-right .post-content {
    line-height: 22px;
    position: relative;
    word-break: break-all;
    font-size: 14px
}

.list-style-default .list-right .post-content .article-content {
    display: flex;
    min-height: 80px
}

.list-style-default .list-right .post-content p {
    margin-bottom: 10px;
    position: relative;
    overflow: hidden
}

.list-style-default .list-right .post-content .post-cover {
    width: 150px;
    display: flex;
    position: absolute;
    height: 100%
}

.list-style-default .list-right .post-content .post-cover img {
    height: 100%;
    border-radius: var(--haosns-border-radius);
    filter: brightness(.9);
    width: 100%;
    object-fit: cover
}

.list-style-default .list-right .post-content .content-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 5px
}

.list-style-default .list-right .post-content .post-cover+.content-info {
    padding-left: 160px
}

.list-style-default .list-right .post-content .content-info .title {
    font-size: 16px;
    color: #111;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden
}

.list-style-default .list-right .post-content img:not(.haosns-emoji) {
    max-width: 100%;
    height: auto
}

.list-style-default .list-right .post-content .haosns-emoji {
    width: 20px;
    height: 20px;
    display: inline-block
}

.list-style-default .list-right .emotion {
    display: inline-block;
    vertical-align: bottom
}

.list-style-default .list-right .post-content .read-all-content {
    color: var(--haosns-link-color);
    margin-left: 10px
}

.list-style-default .list-right .post-bar {
    display: flex;
    align-items: center;
    gap: 35px;
    padding-top: 10px;
    justify-content: space-between;
}

.list-style-default .list-right .post-bar a {
    display: flex;
    align-items: center;
    gap: 3px;
    height: 20px;
    line-height: 20px;
    font-size: 13px;
    color: #999;
    cursor: pointer;
    white-space: nowrap
}

.list-style-default .list-right .post-bar .avatar {
    width: 20px
}

.list-style-default .list-right .post-bar i {
    font-size: 16px
}

.list-style-default .list-right .post-bar em {
    font-style: normal
}

.list-style-default .list-right .post-bar .post-bbs-info {
    border-radius: 20px;
    background: #eee;
    padding: 0 8px 0 1px
}

.list-style-default .list-right .post-bar .post-bbs-info img {
    width: 18px;
    height: 18px;
    border-radius: 100%
}

.list-style-default .list-right .post-bar .post-bbs-info span {
    color: #666
}

.list-style-default .list-right .post-bar .placeholder {
    flex: 1
}

.list-style-default .list-right .post-bar .haosns-like {
    color: #ffbebb
}

.list-style-default .list-right .at-list {
    margin-bottom: 10px;
    width: fit-content;
    color: #535353;
    border-bottom: 1px #ddd dashed;
    padding-bottom: 5px;
    display: flex;
    flex-wrap: wrap;
    gap: 5px
}

.list-style-default .list-right .at-list .at {
    color: #3897ff
}

.list-style-default .list-right .post-img {
    position: relative;
    display: grid;
    gap: 5px;
    grid-template-columns: repeat(3, 1fr);
    width: fit-content
}

.list-style-default .list-right .post-img.img-1 {
    grid-template-columns: repeat(2, 1fr)
}

.list-style-default .list-right .post-img.img-1 a {
    aspect-ratio: auto
}

.list-style-default .list-right .post-img.img-1 img {
    max-height: 300px
}

.list-style-default .list-right .img-2 {
    grid-template-columns: repeat(2, 1fr);
    width: 88%
}

.list-style-default .list-right .post-img a {
    position: relative;
    background: rgb(0 0 0 / 20%);
    border-radius: var(--haosns-border-radius-img);
    border: 1px #f1f1f1 solid;
    aspect-ratio: 1/1;
    width: 100%;
    display: block;
    object-fit: cover;
    overflow: hidden
}

.list-style-default .list-right .post-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--haosns-border-radius-img)
}

.list-style-default .list-right .post-img .more-img {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000;
    opacity: .6;
    font-size: 16px;
    color: #fff;
    z-index: 1
}

.list-style-default .list-right .post-img .gif {
    position: absolute;
    z-index: 1;
    right: 10px;
    top: 10px;
    background: rgb(0 0 0 / 30%);
    font-size: 12px;
    padding: 2px 5px;
    border-radius: 2px;
    color: #fff;
    bottom: unset
}

.list-style-default .list-right .post-img .no {
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.list-style-default .list-right .post-img .no i {
    font-size: 30px;
    opacity: .4;
    color: #818181
}

.list-style-default .list-right .post-img .no em {
    font-size: 14px;
    text-align: center;
    z-index: 1;
    color: #818181;
    margin-top: 10px
}

.list-style-default .list-right .post-img .no:before {
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    position: absolute;
    background-color: #e5e5e5
}

.list-style-default .list-right .post-tag-list {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    font-size: 12px
}

.list-style-default .list-right .post-tag-list a {
    display: flex;
    background: #f5f5f5;
    line-height: 25px;
    border-radius: var(--haosns-border-radius-btn, 3px);
    position: relative;
    overflow: hidden;
    color: #777;
    border: 1px #f1f1f1 solid;
    gap: 1px
}

.list-style-default .list-right .post-tag-list i {
    font-size: 12px;
    width: 20px;
    text-align: center
}

.list-style-default .list-right .post-tag-list m {
    padding-right: 7px
}

.list-style-default .list-right .post-address {
    font-size: 14px
}

.list-style-default .list-right .post-address a {
    display: flex;
    align-items: center;
    color: #888
}

.list-style-default .list-right .post-address i:first-child {
    color: #888;
    font-size: 16px;
    margin-right: 3px
}

.list-style-default .list-right .post-address span {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap
}

.list-style-default .list-right .post-reprint-box {
    padding: 10px;
    background-color: #f5f5f5;
    border-radius: 4px
}

.list-style-default .list-right .reprint-user-name {
    margin-bottom: 5px
}

.list-style-default .list-right .reprint-user-name a {
    display: block
}

.list-style-default .list-right .reprint-title {
    font-size: 14px;
    margin-bottom: 5px
}

.list-style-default .list-right .reprint-title a {
    color: #555
}

.list-style-default .list-right .reprint-content a {
    color: #666;
    display: block
}

.list-style-default .list-right .video {
    width: 80%;
    height: 235px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(0 0 0 / 70%);
    border-radius: var(--haosns-border-radius);
    position: relative;
    overflow: hidden
}

.list-style-default .list-right .video .bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-position: center;
    background-size: cover
}

.list-style-default .list-right .video .art-loading-show {
    min-height: 240px
}

.list-style-default .list-right .video .art-danmuku img.haosns-emoji {
    width: 20px !important;
    height: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    vertical-align: -3px
}

.list-style-default .list-right .video .cover {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    overflow: hidden;
    backdrop-filter: blur(10px)
}

.list-style-default .list-right .video .cover .duration {
    color: #fff;
    position: absolute;
    right: 10px;
    bottom: 10px
}

.list-style-default .list-right .video .cover img {
    object-fit: cover;
    object-position: var(--haosns-img-object-position, center);
    border-radius: 2px;
    background: #f1f1f1;
    position: relative;
    height: 100%;
    max-width: 100%;
    filter: brightness(.8)
}

.list-style-default .list-right .video .cover i {
    position: absolute;
    color: #fff;
    font-size: 50px;
    opacity: .8;
    cursor: pointer
}

.list-style-default .list-right .video .cover i:hover {
    opacity: 1
}

.list-style-default .list-right .video.horizontal.ok .video-dom {
    max-width: 100%;
    max-height: 280px
}

.list-style-default .list-right .video .artplayer-plugin-danmuku {
    background-color: #000;
    padding: 10px;
    height: 52px
}

.list-style-default .list-right .music {
    position: relative;
    height: 80px;
    display: flex;
    overflow: hidden;
    align-items: center;
    border-radius: var(--haosns-border-radius);
    background-size: cover;
    background-position: 80px center;
    background-repeat: no-repeat
}

.list-style-default .list-right .music .music-cover {
    width: 80px;
    height: 80px;
    position: relative
}

.list-style-default .list-right .music .music-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.list-style-default .list-right .music .music-play {
    position: absolute;
    color: #fff;
    font-size: 25px;
    top: 0;
    cursor: pointer;
    display: flex;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center
}

.list-style-default .list-right .music .music-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    color: #fff;
    gap: 10px;
    position: relative;
    z-index: 1;
    height: 100%;
    justify-content: center;
    padding: 0 10px;
    background: rgb(0 0 0 / 20%)
}

.list-style-default .list-right .music .music-title {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden;
    font-size: 16px;
    line-height: 25px
}

.list-style-default .list-right .music .music-author {
    font-size: 13px;
    line-height: 20px
}

.list-style-default .list-right .music:after {
    content: "";
    position: absolute;
    width: calc(100% - 80px);
    height: 100%;
    right: 0;
    backdrop-filter: blur(10px)
}

.list-style-default .list-right .redbag-box {
    background-color: #ce2c3e;
    border-radius: 8px;
    overflow: hidden;
    width: 180px;
    position: relative;
    color: #ffeb3b;
    cursor: pointer
}

.list-style-default .list-right .redbag-box-bg {
    height: 235px;
    overflow: hidden;
    background-size: 100% 100%;
    background-color: #e94658;
    border-bottom: 2px solid #ffeb3b;
    border-radius: 100px/0 0 25px 25px
}

.list-style-default .list-right .redbag-box-bottom {
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center
}

.list-style-default .list-right .redbag-box-bottom i {
    font-size: 14px;
    position: relative;
    top: -16px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    background-color: #f3b860;
    text-align: center;
    border-radius: 100%;
    font-style: normal;
    color: #fff;
    border: 1.5px solid #ffeb3b
}

[list-style=normal] {
    background: #fff;
    border-radius: var(--haosns-border-radius)
}

.list-style-normal {
    display: flex;
    padding: 15px;
    border-bottom: 1px rgb(228 230 235 / 50%) dashed;
    gap: 10px;
    align-items: center
}

.list-style-normal .list-left {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center
}

.list-style-normal .list-left a {
    height: 100%;
    width: 100%;
    position: relative
}

.list-style-normal .list-right {
    display: grid;
    flex: 1
}

.list-style-normal .list-right .title {
    font-size: 16px;
    color: #252933;
    display: flex;
    overflow: hidden;
    gap: 5px
}

.list-style-normal .list-right .title a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 30px
}

.list-style-normal .list-right .title i {
    line-height: 30px;
    font-size: 14px;
    color: #999
}

.list-style-normal .list-right .footer {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #bbb;
    font-size: 13px
}

.list-style-normal .list-right .footer a {
    color: #bbb;
    height: 20px
}

.list-style-normal .list-right .footer span {
    color: #bbb;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 20px;
    min-width: 35px;
    justify-content: flex-start
}

.list-style-normal .list-right .footer span i {
    line-height: 20px;
    font-size: 14px
}

.list-style-normal .list-right .footer span em {
    line-height: 20px
}

.list-style-normal .list-right .footer .placeholder {
    flex: 1
}

.list-style-normal .list-right .footer em {
    font-style: normal
}

[list-style=leftimg] {
    background: #fff;
    border-radius: var(--haosns-border-radius)
}

.list-style-leftimg {
    padding: 15px 0;
    margin: 0 15px;
    border-bottom: 1px rgb(228 230 235 / 50%) dashed;
    display: flex;
    gap: 10px
}

.list-style-leftimg .list-left {
    width: 150px;
    height: 100px;
    border-radius: var(--haosns-border-radius);
    position: relative;
    overflow: hidden;
    border: 1px #f1f1f1 solid
}

.list-style-leftimg .list-left img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.list-style-leftimg .list-right {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 5px;
    overflow: hidden
}

.list-style-leftimg .title {
    font-size: 18px;
    height: 30px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden
}

.list-style-leftimg .title a {
    display: block;
    color: #333
}

.list-style-leftimg .desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    line-height: 20px;
    color: #777;
    min-height: 40px
}

.list-style-leftimg .footer {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #bbb;
    font-size: 13px;
    line-height: 20px
}

.list-style-leftimg .footer .placeholder {
    flex: 1
}

.list-style-leftimg .footer a {
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap
}

.list-style-leftimg .footer .avatar {
    width: 20px;
    height: 20px
}

.list-style-leftimg .footer span {
    color: #bbb;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 20px
}

.list-style-leftimg .footer span i {
    font-size: 14px
}

.list-style-leftimg .footer span em {
    font-style: normal
}

[list-style=rightimg] {
    background: #fff;
    border-radius: var(--haosns-border-radius)
}

.list-style-rightimg {
    padding: 15px 0;
    margin: 0 15px;
    border-bottom: 1px rgb(228 230 235 / 50%) dashed;
    display: flex;
    gap: 10px
}

.list-style-rightimg:last-child {
    margin-bottom: 20px
}

.list-style-rightimg .list-left {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 5px;
    overflow: hidden
}

.list-style-rightimg .title {
    font-size: 18px;
    height: 30px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden
}

.list-style-rightimg .title a {
    display: block;
    color: #333
}

.list-style-rightimg .desc {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    line-height: 20px;
    color: #777;
    min-height: 40px
}

.list-style-rightimg .footer {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #bbb;
    font-size: 13px;
    line-height: 20px
}

.list-style-rightimg .footer .placeholder {
    flex: 1
}

.list-style-rightimg .footer a {
    display: flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap
}

.list-style-rightimg .footer .avatar {
    width: 20px;
    height: 20px
}

.list-style-rightimg .footer span {
    color: #bbb;
    display: flex;
    align-items: center;
    gap: 3px;
    height: 20px
}

.list-style-rightimg .footer .comment {
    padding-left: 10px
}

.list-style-rightimg .footer span i {
    font-size: 14px
}

.list-style-rightimg .footer span em {
    font-style: normal
}

.list-style-rightimg .list-right {
    width: 150px;
    height: 100px;
    border-radius: var(--haosns-border-radius);
    position: relative;
    overflow: hidden;
    border: 1px #f1f1f1 solid
}

.list-style-rightimg .list-right img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

[list-style=grid] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px
}

[list-style=grid] .haosns-empty-page {
    grid-column: 1/-1
}

[list-style=grid] .haosns-more-loading {
    grid-column: 1/-1
}

.list-style-grid {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: var(--haosns-border-radius);
    position: relative;
    overflow: hidden;
    padding: 0 0 7px 0
}

.list-style-grid .cover {
    width: 100%;
    height: 125px;
    display: flex;
    align-items: center;
    justify-content: center
}

.list-style-grid .cover i {
    position: absolute;
    font-size: 35px;
    color: #fff;
    background: rgb(255 255 255 / 35%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    box-shadow: 0 0 35px #fff;
    z-index: 9
}

.list-style-grid .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--haosns-border-radius);
    filter: brightness(.9)
}

.list-style-grid .title {
    line-height: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 5px 10px
}

.list-style-grid .info {
    display: flex;
    align-items: center;
    gap: 5px;
    justify-content: space-between;
    line-height: 25px;
    font-size: 12px;
    padding: 0 10px
}

.list-style-grid .name {
    color: #999;
    display: flex;
    align-items: center;
    gap: 3px
}

.list-style-grid .name .avatar {
    width: 20px;
    height: 20px
}

.list-style-grid .like {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #999;
    font-size: 12px
}

.list-style-grid .like i {
    font-size: 12px;
    transform: translateY(1px)
}

.list-style-grid .like .haosns-like {
    color: #ffbebb
}

.list-style-grid .like em {
    font-style: normal
}

[list-style=gallery] {
    display: grid;
    gap: 15px;
    grid-template-columns: repeat(3, 1fr)
}

[list-style=gallery] .haosns-empty-page {
    grid-column: 1/-1
}

[list-style=gallery] .haosns-more-loading {
    grid-column: 1/-1
}

.list-style-gallery {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    height: 180px;
    border-radius: var(--haosns-border-radius)
}

.list-style-gallery .cover {
    width: 100%;
    height: 100%
}

.list-style-gallery .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: .3s
}

.list-style-gallery .cover:hover img {
    transform: scale(1.1)
}

.list-style-gallery .title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -5px;
    color: #fff;
    background: linear-gradient(to top, rgba(5, 5, 5, .6), rgba(8, 8, 8, 0));
    line-height: 18px;
    padding: 5px 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    transition: .3s;
    opacity: 0;
    z-index: -1
}

.list-style-gallery:hover .title {
    z-index: 1;
    opacity: 1;
    bottom: 0
}

.list-style-gallery .count {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(var(--haosns-theme-color-rgb), .35);
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    padding: 0 10px;
    border-radius: 3px;
    pointer-events: none
}

[list-style=waterfall] {
    display: flex;
    gap: 15px
}

[list-style=waterfall] .haosns-empty-page {
    grid-column: 1/-1
}

[list-style=waterfall] .haosns-more-loading {
    grid-column: 1/-1
}

.waterfall-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden
}

.list-style-waterfall {
    position: relative;
    background: #fff;
    overflow: hidden;
    transition: .3s;
    min-height: 80px;
    border-radius: var(--haosns-border-radius)
}

.list-style-waterfall .cover a {
    display: inline;
    position: relative
}

.list-style-waterfall .cover a>i {
    position: absolute;
    color: #fff;
    right: 10px;
    top: 7px;
    font-size: 20px;
    text-shadow: 0 0 2px #b2b2b2
}

.list-style-waterfall .cover img {
    width: 100%;
    display: block;
    border-radius: 4px 4px 0 0;
    max-height: 50vh;
    object-fit: cover;
    -o-object-position: top;
    object-position: top;
    min-height: 100px
}

.list-style-waterfall .title {
    text-overflow: ellipsis;
    padding: 0 10px;
    line-height: 35px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
    overflow: hidden
}

.list-style-waterfall.image_text_hover .title {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -30px;
    transition: .3s;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, .5) 100%);
    color: #fff
}

.list-style-waterfall.image_text_hover .title a {
    color: #fff
}

.list-style-waterfall.image_text_hover:hover .title {
    bottom: 0
}

.list-style-waterfall.image_text_hover .cover img {
    border-radius: var(--haosns-border-radius)
}

.list-style-waterfall .title .haosns-emoji {
    width: 20px;
    height: 20px !important
}

.list-style-waterfall .info {
    display: flex;
    align-items: center;
    padding: 0 10px 5px;
    justify-content: space-between;
    font-size: 12px;
    line-height: 25px
}

.list-style-waterfall .name {
    color: #999;
    display: flex;
    align-items: center;
    gap: 3px
}

.list-style-waterfall .name .avatar {
    width: 20px;
    height: 20px
}

.list-style-waterfall .like {
    color: #666;
    font-size: 12px;
    display: flex;
    align-items: center;
    cursor: pointer
}

.list-style-waterfall .like i {
    margin-right: 3px;
    display: inline-block
}

.list-style-waterfall .like em {
    font-style: normal
}

.list-style-waterfall .like .haosns-like {
    color: #ffbebb
}

.haosns-comment-toggle {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.haosns-comment-toggle .haosns-more-loading {
    margin: auto;
    height: 70px;
    align-items: center
}

.haosns-comment-toggle .haosns-empty-page {
    padding: 0;
    display: flex;
    flex-direction: column
}

.haosns-comment-toggle .haosns-empty-page i {
    font-size: 35px;
    line-height: 50px
}

.haosns-comment-textarea-box {
    margin: 15px;
    position: relative;
    background: #ebebeb;
    border-radius: var(--haosns-border-radius)
}

.haosns-comment-textarea-box textarea {
    width: 100%;
    padding: 10px;
    border-radius: var(--haosns-border-radius);
    height: 55px;
    background-color: #f5f5f5;
    max-width: 100%;
    max-height: 500px
}

.haosns-comment-textarea-box .haosns-form-btn {
    height: 30px;
    padding: 0 10px;
    display: grid;
    grid-template-columns: auto auto auto 1fr
}

.haosns-comment-textarea-box .haosns-form-btn .btn {
    justify-self: end
}

.haosns-comment-textarea-box .comment-count {
    margin-bottom: 15px;
    font-size: 16px;
    color: #333;
    text-shadow: 0 0 1px #999
}

.haosns-comment-list {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.haosns-comment-list .haosns-comment-textarea-box:before {
    content: "";
    background: #f8f8f9;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    position: absolute;
    top: -4px;
    width: 7px;
    height: 7px;
    z-index: 999;
    border-left: 1px solid #f1f1f1;
    border-top: 1px solid #f1f1f1;
    border-radius: 2px;
    left: 20px;
    right: 0
}

.haosns-comment-list .haosns-more {
    margin-top: 15px
}

.haosns-comment-box {
    position: relative;
    display: flex;
    gap: 10px
}

.haosns-comment-box .comment-left {
    width: 28px;
    height: 28px;
    position: relative
}

.haosns-comment-box .comment-right {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    border-bottom: 1px #f1f1f1 dashed
}

.haosns-comment-list .haosns-comment-box:last-of-type>.comment-right {
    border: 0
}

.haosns-comment-box .header {
    display: flex
}

.haosns-comment-box .userinfo {
    align-items: center;
    display: flex;
    gap: 5px;
    height: 28px
}

.haosns-comment-box .content a {
    color: #333
}

.haosns-comment-box .content .comment-sticky {
    color: #2997f7;
    border-color: #2997f7;
    background-color: rgb(41 151 247 / 10%)
}

.haosns-comment-box .content .comment-at {
    color: #3897ff
}

.haosns-comment-box .haosns-comment-textarea-box {
    margin: 0
}

.haosns-comment-box .bar {
    font-size: 13px;
    display: flex;
    gap: 10px;
    line-height: 25px;
    justify-content: space-between
}

.haosns-comment-box .bar-left {
    display: flex;
    align-items: center;
    gap: 15px
}

.haosns-comment-box .bar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #bbb;
    transition: .3s
}

.haosns-comment-box .bar span {
    display: flex;
    align-items: center;
    gap: 5px
}

.haosns-comment-box .bar i {
    font-size: 14px
}

.haosns-comment-box .bar em {
    font-style: normal
}

.haosns-comment-box .child-list {
    display: flex;
    flex-direction: column
}

.haosns-comment-box .child-list .haosns-comment-box:before {
    content: "";
    width: 5px;
    height: 5px;
    display: block;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 100%;
    position: absolute;
    left: -4px;
    top: 10px
}

.haosns-comment-box .child-list .haosns-comment-box {
    padding-bottom: 10px;
    padding-left: 10px;
    margin-left: 6px;
    border-left: 1px solid #ebebeb
}

.haosns-comment-box .child-list .haosns-comment-box:last-of-type {
    padding-bottom: 0
}

.haosns-comment-box .child-list .haosns-comment-box:last-of-type .comment-right {
    border: 0;
    padding-bottom: 0
}

.haosns-comment-box .child-list .comment-right {
    padding-bottom: 10px
}

.haosns-comment-box .more-reply {
    line-height: 25px;
    display: flex;
    gap: 5px;
    font-size: 14px;
    color: #333;
    flex-direction: row-reverse;
    justify-content: flex-end
}

.haosns-comment-box .more-reply .more {
    display: flex;
    align-items: center
}

.haosns-comment-box .more-reply .fold {
    display: flex;
    gap: 5px;
    margin-left: -28.5px
}

.haosns-comment-box .more-reply .fold i {
    transform: translateX(-1.5px) rotate(180deg);
    transition: .3s
}

.haosns-comment-box .more-reply .more:hover+.fold i {
    transform: translateX(-1.5px) rotate(0);
    color: #ff5722
}

.haosns-comment-list .haosns-comment-box .comment-img {
    grid-template-columns: repeat(3, 1fr)
}

.haosns-comment-box .comment-img a {
    aspect-ratio: 1;
    position: relative
}

.haosns-comment-box .comment-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    max-height: 220px;
    border: 1px solid #f1f1f1
}

.haosns-comment-box .comment-img {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 10px;
    width: 80%
}

.haosns-comment-box .reply-content {
    font-size: 12px;
    padding: 5px 10px;
    background: #f5f5f5;
    border-radius: 4px;
    margin: 0 0 6px;
    color: #666;
    cursor: pointer
}

.haosns-comment-toggle .haosns-comment-box .comment-img.img-1 {
    max-width: 30%
}

.haosns-comment-list-box .haosns-comment-list>.haosns-comment-box>.comment-left {
    width: 40px;
    height: 40px
}

.haosns-comment-list-box .haosns-comment-list>.haosns-comment-box>.comment-right>.userinfo {
    height: 20px
}

.sidebar-left {
    position: relative;
    width: 300px
}

.sidebar-right {
    position: relative;
    width: 300px
}

.haosns-sidebar-left {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.haosns-sidebar-right {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.haosns-sidebar-wrap {
    position: relative;
    overflow: hidden;
    background: #fff;
    border-radius: 5px;
    display: flex;
    flex-direction: column
}

.haosns-sidebar-wrap .haosns-empty-page {
    grid-column: 1/-1
}

.haosns-sidebar-wrap .header {
    position: relative;
    display: flex;
    align-items: center;
    font-size: 16px;
    padding-left: 20px;
    margin: 0 15px;
    height: 40px;
    gap: 5px;
}

.haosns-sidebar-wrap .header+div {
    margin-top: 0
}

.haosns-sidebar-wrap .header span {
    font-size: 16px;
    color: #000000;
    flex: 1
}

.haosns-sidebar-wrap .header a {
    color: #ccc;
    font-size: 12px
}

.haosns-sidebar-wrap .header a:hover {
    color: var(--haosns-theme-color-hover)
}

.haosns-sidebar-wrap .header m:hover {
    opacity: .7;
    color: #ff5722
}

.haosns-sidebar-wrap .header m {
    font-size: 13px;
    color: #999;
    cursor: pointer;
    transition: .3s
}

.haosns-sidebar-wrap .content {
    position: relative;
    overflow: hidden;
    margin: 15px
}

.haosns-sidebar-wrap .list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin: 15px
}

.haosns-widget-user-info .content li {
    display: flex;
    line-height: 35px;
    gap: 10px
}

.haosns-widget-user-info .content li m {
    width: 75px;
    color: #999;
    text-align: right
}

.haosns-widget-user-info .content li span {
    flex: 1;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis
}

.haosns-widget-honor .content {
    display: flex;
    flex-wrap: wrap;
    gap: 10px
}

.haosns-widget-honor .content li {
    padding: 0 10px;
    line-height: 25px;
    border: 1px solid #f1f1f1;
    border-radius: var(--haosns-border-radius);
    cursor: pointer;
    color: #777;
    transition: .3s
}

.haosns-widget-honor .content li:hover {
    color: var(--haosns-theme-color);
    border-color: rgba(var(--haosns-theme-color-rgb), .3)
}

.haosns-widget-search .form {
    display: flex;
    align-items: center;
    background: #f7f7f7;
    height: 40px;
    border-radius: var(--haosns-border-radius)
}

.haosns-widget-search .form input {
    flex: 1;
    border: 0;
    background: 0 0;
    padding: 0 15px;
    line-height: 40px
}

.haosns-widget-search .form svg {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #888
}
.searchbtn{
     width: 40px;
    height: 40px;
}
.haosns-widget-visitor {
    overflow: initial
}

.haosns-widget-visitor .content {
    
    gap: 5px;
    overflow: initial
}

.haosns-widget-visitor .content a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    aspect-ratio: 1
}

.haosns-widget-visitor .haosns-empty-page {
    grid-column: 1/-1
}
.haosns-widget-login .container {
    padding: 15px 15px 0
}

.haosns-widget-help .content {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.haosns-widget-help .info {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.haosns-widget-help .info-main {
    display: flex;
    align-items: center;
    gap: 10px
}

.haosns-widget-help .info-main .icon {
    border-right: 1px #f7f7f7 solid;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    width: 50px
}

.haosns-widget-help .info-main .icon i {
    font-size: 35px;
    color: #bbb
}

.haosns-widget-help .info-main .time {
    display: flex;
    flex-direction: column;
    gap: 5px
}

.haosns-widget-help .info-main .time p {
    font-size: 25px;
    color: #777;
    line-height: 25px
}

.haosns-widget-help .info-main .time span {
    font-size: 12px;
    color: #999;
    line-height: 20px;
    padding: 0 2px
}

.haosns-widget-hel .info-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px
}

.haosns-widget-help .info-menu {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5px
}

.haosns-widget-help .info-menu a {
    display: flex;
    height: 30px;
    align-items: center;
    padding-left: 30px;
    color: #666;
    border: 1px #f1f1f1 solid;
    border-radius: 3px
}

.haosns-widget-help .info-menu i {
    position: absolute;
    left: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center
}

.haosns-widget-help .codeimg {
    display: flex;
    flex-direction: column
}

.haosns-widget-help .codeimg-title {
    line-height: 30px
}

.haosns-widget-help .codeimg-list {
    display: flex;
    flex-wrap: wrap
}

.haosns-widget-help .codeimg-list li {
    display: flex;
    flex-direction: column;
    flex: 1
}

.haosns-widget-help .codeimg-list a {
    display: flex;
    align-items: center;
    justify-content: center
}

.haosns-widget-help .codeimg-list img {
    width: 100%;
    height: 100%
}

.haosns-widget-help .codeimg-list p {
    line-height: 25px;
    text-align: center
}

.haosns-widget-ad-img {
    background: 0 0
}

.haosns-widget-ad-img .header {
    background: #fff;
    margin: 0;
    padding: 0 15px 0 35px
}

.haosns-widget-ad-img .header::before {
    left: 15px
}

.haosns-widget-ad-img .header::after {
    left: 22px
}

.haosns-widget-ad-img .content {
    background: #fff;
    margin: 0;
    padding: 0 15px 15px;
    border-radius: var(--haosns-border-radius);
    display: flex;
    gap: 10px;
    flex-direction: column
}

.haosns-widget-ad-img li {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    height: 125px;
    border-radius: var(--haosns-border-radius)
}

.haosns-widget-ad-img li a {
    flex: 1;
    display: flex;
    height: 100%
}

.haosns-widget-ad-img li a img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.haosns-widget-ad-img li span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -30px;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    line-height: 30px;
    padding: 0 10px;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    transition: .3s
}

.haosns-widget-ad-img li:hover span {
    bottom: 0
}

.haosns-widget-ad-img .no-title {
    margin: 0;
    padding: 0;
    background: 0 0
}

.haosns-widget-signin {
    display: flex;
    flex-direction: column
}

.haosns-widget-signin .content {
    display: flex;
    gap: 5px;
    align-items: center;
    margin: 10px 15px
}

.haosns-widget-signin .content .tips {
    display: flex;
    flex-direction: column;
    flex: 1
}

.haosns-widget-signin .tips .title {
    color: #252933;
    font-size: 16px;
    font-weight: 600;
    line-height: 26px
}

.haosns-widget-signin .tips .text {
    color: #888;
    font-size: 12px;
    line-height: 24px
}

.haosns-widget-signin .tips .text i {
    color: var(--haosns-theme-color);
    font-style: normal;
    padding-right: 3px;
    font-weight: 700
}

.haosns-widget-signin .signedin {
    color: #999;
    border: 1px solid #f1f1f1
}

.haosns-widget-signin .list {
    border-top: 1px #f1f1f1 solid;
    margin: 0 15px 15px;
    padding: 15px 0 0 0
}

.haosns-widget-signin .list .rank {
    position: absolute;
    left: -5px;
    top: -5px;
    z-index: 2;
    font-size: 10px;
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
    border: 2px #fff solid;
    color: #fff
}

.haosns-widget-signin .list a:nth-of-type(1) .rank {
    background: #ff3b30
}

.haosns-widget-signin .list a:nth-of-type(2) .rank {
    background: #ff9500
}

.haosns-widget-signin .list a:nth-of-type(3) .rank {
    background: #28a745
}

.haosns-widget-signin .list .left {
    width: 40px;
    height: 40px
}

.haosns-widget-signin .list .right {
    gap: 0
}

.haosns-widget-signin .list .info {
    height: 20px
}

.haosns-widget-signin .zero {
    color: #fe6d6d
}

.haosns-widget-signin .zero i {
    font-style: normal;
    font-size: 10px;
    background: #fe6d6d;
    height: 16px;
    color: #fff;
    padding: 0 3px;
    border-radius: 3px;
    display: flex;
    align-items: center;
    position: relative;
    margin-right: 8px
}

.haosns-widget-signin .zero i:after {
    content: "";
    display: block;
    width: 6px;
    height: 6px;
    position: absolute;
    right: -3px;
    background: #fe6d6d;
    transform: rotate(45deg);
    border-radius: 0 0 0 5px
}

.haosns-widget-post-user-info .bg {
    position: absolute;
    background-size: cover;
    height: 100px;
    width: 100%;
    background-position: center
}

.haosns-widget-post-user-info .bg:before {
    content: "";
    background: linear-gradient(0deg, #fff, rgb(255 255 255 / 0));
    height: 100%;
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%
}

.haosns-widget-post-user-info .info {
    align-items: center;
    display: grid;
    justify-content: center;
    text-align: center;
    padding: 50px 15px 0
}

.haosns-widget-post-user-info .info-avatar {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    position: relative;
    margin: auto
}

.haosns-widget-post-user-info .info-desc {
    display: grid;
    align-items: center;
    text-align: center
}

.haosns-widget-post-user-info .info-desc .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center
}

.haosns-widget-post-user-info .info-desc .desc {
    color: #999;
    font-size: 12px
}

.haosns-widget-post-user-info .number {
    display: flex;
    text-align: center;
    padding: 15px
}

.haosns-widget-post-user-info .number span {
    flex: 1;
    cursor: pointer;
    transition: .3s;
    display: grid
}

.haosns-widget-post-user-info .number span n {
    font-weight: 500;
    font-size: 16px;
    color: #333;
    line-height: 22px
}

.haosns-widget-post-user-info .number span p {
    font-size: 12px;
    line-height: 20px;
    color: #999
}

.haosns-widget-post-user-info .haosns-follow-chat-btn {
    padding: 0 15px 15px
}

.haosns-widget-share .content {
    gap: 5px;
    display: flex;
    flex-direction: column
}

.haosns-widget-share .item {
    display: flex;
    height: 25px;
    align-items: center;
    gap: 5px;
    line-height: 25px;
    position: relative
}

.haosns-widget-share .item span {
    color: #666
}

.haosns-widget-share .item i {
    color: var(--haosns-theme-color);
    font-style: normal
}

.haosns-widget-share .item n {
    color: #999;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    flex: 1;
    background: #f7f7f7;
    padding: 0 10px;
    font-size: 12px
}

.haosns-widget-share .item .copy {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.haosns-widget-share .item .copy g {
    position: absolute;
    line-height: 20px;
    background: var(--haosns-theme-color);
    color: #fff;
    font-size: 12px;
    padding: 0 5px;
    border-radius: 3px
}

.haosns-widget-share .item .copy em {
    background: var(--haosns-theme-color);
    color: #fff;
    font-size: 12px;
    font-style: normal;
    border-radius: var(--haosns-border-radius-btn);
    position: absolute;
    right: -40px;
    width: 35px;
    text-align: center;
    cursor: pointer;
    transition: .15s
}

.haosns-widget-share .item .copy em:hover {
    opacity: .7
}

.haosns-widget-share .item .copy:hover em {
    right: 0
}

.haosns-widget-share .platform {
    display: flex;
    flex-wrap: wrap;
    padding-top: 10px;
    justify-content: center;
    gap: 20px
}

.haosns-widget-share .platform li i {
    color: #777;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: .3s
}

.haosns-widget-share .platform li i {
    font-size: 30px
}

.haosns-widget-share .platform li:hover {
    opacity: .7
}

.haosns-widget-share .platform .wechat i {
    color: #3eb135
}

.haosns-widget-share .platform .qzone i {
    color: #ff9800
}

.haosns-widget-share .platform .qq i {
    color: #00a1e0
}

.haosns-widget-share .platform .weibo i {
    color: #e6162d
}

.haosns-widget-share .platform .telegram i {
    color: #374151
}

.haosns-widget-search-rank .list {
    gap: 0
}

.haosns-widget-search-rank .list a {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 35px
}

.haosns-widget-search-rank .list .rank {
    width: 20px;
    color: #999;
    font-size: 12px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15px;
    height: 15px
}

.haosns-widget-search-rank .list a:nth-of-type(-n+3) .rank {
    font-size: 10px;
    border-radius: 3px;
    color: #fff
}

.haosns-widget-search-rank .list a:nth-of-type(1) .rank {
    background: #ff3b30
}

.haosns-widget-search-rank .list a:nth-of-type(2) .rank {
    background: #ff9500
}

.haosns-widget-search-rank .list a:nth-of-type(3) .rank {
    background: #28a745
}

.haosns-widget-search-rank .list .conter {
    flex: 1;
    display: flex;
    gap: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.haosns-widget-search-rank .list .name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #0078b6;
    font-size: 13px
}

.haosns-widget-search-rank .list .tip {
    font-size: 12px;
    width: 18px;
    height: 18px;
    background: #ffc107;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 3px;
    min-width: 18px
}

.haosns-widget-search-rank .list .new {
    background-image: linear-gradient(to right, #4cd964, #34c759)
}

.haosns-widget-search-rank .list .hot {
    background-image: linear-gradient(to right, #ffc107, #ff9800)
}

.haosns-widget-search-rank .list .boiling {
    background-image: linear-gradient(to right, #ff6b22, #ff3b30)
}

.haosns-widget-search-rank .list .count {
    color: grey;
    font-size: 12px
}

.haosns-widget-post-list .style-normal {
    display: flex;
    flex-direction: column;
    margin-bottom: 10px
}

.haosns-widget-post-list .style-normal a {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 30px;
    color: #666;
    display: flex;
    align-items: center;
    gap: 5px
}
.haosns-sidebar-wrap{
    background: #fbfbfb;
}
.haosns-widget-post-list .style-normal em {
    width: 20px;
    color: #999;
    font-size: 12px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 15px;
    height: 15px;
    font-style: normal
}

.haosns-widget-post-list .style-normal span {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.haosns-widget-post-list .style-normal a:nth-of-type(-n+3) em {
    color: #fff;
    font-size: 10px;
    border-radius: 3px
}

.haosns-widget-post-list .style-normal a:nth-of-type(1) em {
    background-color: #ff3b30
}

.haosns-widget-post-list .style-normal a:nth-of-type(2) em {
    background-color: #ff9500
}

.haosns-widget-post-list .style-normal a:nth-of-type(3) em {
    background-color: #28a745
}

.haosns-widget-post-list .music-icon,
.haosns-widget-post-list .video-icon {
    position: absolute;
    font-size: 35px;
    color: #fff;
    background: rgb(255 255 255 / 35%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 100%;
    box-shadow: 0 0 35px #fff;
    z-index: 9;
    top: 10px
}

.haosns-widget-post-list .style-no-img {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.haosns-widget-post-list .style-no-img li {
    display: flex;
    flex-direction: column
}

.haosns-widget-post-list .style-no-img .link {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 25px
}

.haosns-widget-post-list .style-no-img .info {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
    line-height: 20px
}

.haosns-widget-post-list .style-no-img .avatarimg {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #999
}

.haosns-widget-post-list .style-flex {
    display: flex;
    flex-direction: column;
    gap: 15px
}

.haosns-widget-post-list .style-flex li {
    display: flex;
    align-items: center;
    gap: 10px
}

.haosns-widget-post-list .style-flex .left {
    width: 115px;
    height: 70px;
    border: 1px #f1f1f1 solid;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center
}

.haosns-widget-post-list .style-flex .left img {
    width: 100%;
    height: 100%;
    border-radius: var(--haosns-border-radius-img);
    object-fit: cover;
    transition: .1s
}

.haosns-widget-post-list .style-flex .left:hover img {
    transform: scale(1.05)
}

.haosns-widget-post-list .style-flex .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow: hidden;
    text-overflow: ellipsis
}

.haosns-widget-post-list .style-flex .title {
    color: #000;
    line-height: 22px;
    font-size: 14px;
    height: 44px
}

.haosns-widget-post-list .style-flex .title a {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden
}

.haosns-widget-post-list .style-flex .info {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #999;
    line-height: 20px
}

.haosns-widget-post-list .style-one {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.haosns-widget-post-list .style-one a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    text-align: center;
    height: 125px;
    border: 1px #f1f1f1 solid;
    border-radius: var(--haosns-border-radius-img)
}

.haosns-widget-post-list .style-one img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.9)
}

.haosns-widget-post-list .style-one .title {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: linear-gradient(to top, rgba(5, 5, 5, .6), rgba(8, 8, 8, 0));
    color: #fff;
    font-size: 13px;
    line-height: 25px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 5px
}

.haosns-widget-post-list .style-one .haosns-emoji {
    width: 20px;
    height: 20px
}

.haosns-widget-post-list .style-one .video-icon {
    top: calc(50% - 30px)
}

.haosns-widget-post-list .style-one .music-icon {
    top: calc(50% - 30px)
}

.haosns-widget-post-list .style-two {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px
}

.haosns-widget-post-list .style-two a {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    text-align: center;
    height: 80px;
    border: 1px #f1f1f1 solid;
    border-radius: var(--haosns-border-radius-img)
}

.haosns-widget-post-list .style-two img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: brightness(.9)
}

.haosns-widget-post-list .style-two .title {
    position: absolute;
    bottom: 0;
    width: 100%;
    background: rgba(0, 0, 0, .25);
    color: #fff;
    font-size: 12px;
    line-height: 20px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0 5px
}

.haosns-widget-post-list .style-two .haosns-emoji {
    width: 20px;
    height: 20px
}

.haosns-widget-contrib .content {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.haosns-widget-contrib .haosns-follow-chat-btn {
    padding: 0
}

.haosns-widget-contrib .chat {
    display: none
}

.haosns-widget-contrib .follow {
    font-size: 12px;
    line-height: 28px;
    padding: 0 10px
}

.layui-dropdown .layui-menu .layui-menu-body-title {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #333
}

.layui-dropdown .layui-menu .layui-menu-body-title i {
    font-size: 14px
}

.layui-btn {
    background: var(--haosns-theme-color);
    border-radius: var(--haosns-border-radius-btn, 3px);
    color: #fff
}

.layui-btn-primary:hover {
    color: #fff;
    border-color: transparent
}

.haosns-popup .layui-layer-content {
    padding: 20px
}

.haosns-popup-form li {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    position: relative;
    gap: 15px;
    justify-content: center
}

.haosns-popup-form li:last-of-type {
    margin: 0
}

.haosns-popup-form li>i {
    position: absolute;
    left: 0;
    z-index: 2;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center
}

.haosns-popup-form li .layui-input-wrap {
    flex: 1
}

.haosns-popup-form li input {
    padding-left: 38px
}

.haosns-popup-form .tips span {
    line-height: 50px;
    display: flex;
    gap: 10px;
    font-size: 14px;
    color: rgba(0, 0, 0, .85)
}

.haosns-popup-form .tips span i {
    color: #ff5722;
    font-size: 32px
}

.haosns-login-reg-popup {
    border-radius: 5px
}

.haosns-login-reg-popup .haosns-more-loading {
    position: relative;
    left: 0;
    right: 0;
    margin: auto
}

.haosns-login-reg-popup .layui-layer-content {
    display: grid;
    grid-template-rows: 1fr 40px;
    overflow: hidden
}
.haosns-login-reg-popup .bar {

    grid-template-columns: 1fr 1fr;
    align-items: center
}

.haosns-login-reg-popup .bar .left {
    display: flex;
    /* grid-template-columns: auto 1fr auto; */
    /* text-align: left; */
    justify-content: center;
    padding: 0 15px;  
}

.haosns-login-reg-popup .bar .right {
    display: flex;
    /* grid-template-columns: auto 1fr auto; */
    /* text-align: right; */
    justify-content: center;
    padding: 0 15px
}

.haosns-login-reg-popup .bar m {
    cursor: pointer;
    color: #7e7e7e;
    font-size: 13px;
}

.haosns-login-reg-popup .bar n {
    cursor: pointer;
    color: #7e7e7e;
    font-size: 13px;
}
.haosns-login-reg-popup .bar span {
    cursor: pointer;
    color: #7e7e7e;
    font-size: 13px;
}

.haosns-login-reg-popup .content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: center
}

.haosns-login-reg-popup .content>div {
    overflow: hidden;
    opacity: 1;
    transition: .5s;
    margin: 0
}

/* 
.haosns-login-reg-popup.login .content-left {
    opacity: 0
}

.haosns-login-reg-popup.reg .content-right {
    opacity: 0
} */
.content-left,
.content-right {
    opacity: 1 !important;
    display: block !important;
}


.layui-tabs-item[style*="display: block"] {
    display: block !important;
}
.feautre{
    display: flex;
    align-items: center;
    position: relative;
    gap: 10px;
    white-space: nowrap;
}
.haosns-login-reg-popup .content>div .layui-tabs-header {
    height: 70px;
    align-items: flex-end;
    display: flex;
    justify-content: center;
    gap: 10px
}

.haosns-login-reg-popup .content>div .layui-tabs-header li {
    padding: 0 5px
}

.haosns-login-reg-popup .content>div .layui-tabs-header li:after {
    border: 0;
    width: 20px;
    height: 3px;
    top: unset;
    bottom: 0;
    background: var(--haosns-theme-color);
    margin: auto;
    left: calc(50% - 10px);
    border-radius: 3px
}

.haosns-login-reg-popup .content>div .layui-tabs-header .layui-tab-bar {
    display: none
}

.haosns-login-reg-popup .content .social {
    position: absolute;
    overflow: hidden;
    left: 0;
    right: 0;
    bottom: 0;
    height: 90px;
    text-align: center
}

.haosns-login-reg-popup .content .social .title {
    display: flex;
    align-items: center;
    height: 25px
}

.haosns-login-reg-popup .content .social .title i {
    flex: 1;
    height: 1px;
    background-image: linear-gradient(90deg, hsl(0deg 0 100% / 0) 20%, #888 100%);
    margin: 0 10px
}

.haosns-login-reg-popup .content .social .title i:last-of-type {
    background-image: linear-gradient(90deg, #888 0, hsl(0deg 0 100% / 0) 80%)
}

.haosns-login-reg-popup .content .social .list {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 65px;
    gap: 15px;
}

.haosns-login-reg-popup .content .social .list a {
    width: 50px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center
}

.haosns-login-reg-popup .content .social .list a i {
    font-size: 35px
}

.haosns-login-reg-popup .content .social .list .phone {
    color: #107cd2
}

.haosns-login-reg-popup .content .social .list .qq {
    color: #4487c6
}

.haosns-login-reg-popup .content .social .list .haosns-gugezhanghao {
    color: #009688
}

.haosns-login-reg-popup .content .social .list .weibo {
    color: #e12328
}

.haosns-login-reg-popup .content .social .list .wechat_code,
.haosns-login-reg-popup .content .social .list .wechat_pc {
    color: #25b415
}

.haosns-login-reg-popup .content>div .layui-tabs-body  {
    position: relative;
    overflow: hidden;
    padding: 15px;
    display: flex;
    justify-content: center;
    height: calc(100% - 190px);
    align-items: center
}

.haosns-login-reg-popup .content .haosns-reg-tab .layui-tabs-body {
    height: calc(100% - 100px)
}

.haosns-login-reg-popup .app-login.success:after {
    content: "扫码成功";
    position: absolute;
    top: 0;
    left: 0;
    margin: 0 40px;
    width: 200px;
    height: 200px;
    line-height: 230px;
    display: flex;
    justify-content: center;
    font-size: 14px;
    color: #fff;
    background-color: rgb(0 0 0 / 60%);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: 4px
}

.haosns-login-reg-popup .app-login.success:before {
    content: "\e64f";
    color: #1be23d;
    margin: 0 40px;
    line-height: 160px;
    display: flex;
    justify-content: center;
    width: 200px;
    height: 200px;
    font-family: haosns-icon !important;
    font-size: 25px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1
}

.haosns-login-reg-popup .app-login.expired:after,
.haosns-login-reg-popup .app-login.expired:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto 20px;
    width: 200px;
    height: 200px;
    display: flex;
    justify-content: center;
    cursor: pointer;
    color: rgb(255 255 255 / 60%)
}

.haosns-login-reg-popup .app-login.expired:after {
    content: "二维码已过期";
    line-height: 230px;
    font-size: 14px;
    background-color: rgb(0 0 0 / 60%);
    -webkit-backdrop-filter: blur(5px);
    backdrop-filter: blur(5px);
    border-radius: 4px
}

.haosns-login-reg-popup .app-login.expired:before {
    content: "\e6d8";
    line-height: 160px;
    font-family: haosns-icon !important;
    font-size: 25px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    z-index: 1
}

/* .haosns-login-reg-popup .content>div .layui-tabs-body div {
    position: relative;
    overflow: hidden;
    width: 300px;
    text-align: center
} */

.haosns-login-reg-popup .content>div .layui-tabs-body div li.sms {
    text-align: left
}

.haosns-login-reg-popup .content>div .layui-tabs-body div li:not(.login-btn-wrap, .reg-btn-wrap, .doc) {
    margin-bottom: 15px;
    position: relative
}

.haosns-login-reg-popup .content>div .layui-tabs-body div li.flex {
    display: flex;
    gap: 15px
}

.haosns-login-reg-popup .content>div .layui-tabs-body div li .layui-input-prefix {
    z-index: 1
}

.haosns-login-reg-popup .content>div .layui-tabs-body div .haosns-login-app-qrcode {
    width: 200px;
    height: 200px;
    position: absolute;
    margin: 0 auto 20px;
    background-color: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center;
    left: 0;
    right: 0
}

.haosns-login-reg-popup .content>div .layui-tabs-body div canvas {
    width: 200px;
    height: 200px;
    position: relative;
    cursor: pointer
}

.haosns-login-reg-popup .content>div .layui-tabs-body div .haosns-login-wechat-qrcode {
    width: 200px;
    height: 200px;
    position: relative;
    cursor: pointer;
    margin: 0 auto 20px;
    background-color: #f1f1f1;
    display: flex;
    align-items: center;
    justify-content: center
}

.haosns-login-reg-popup .content>div .layui-tabs-body  .haosns-login-wechat-pc {
    width: 200px;
    height: 200px;
    position: relative;
    cursor: pointer;
    margin: 20px auto 20px;
    display: flex;
    align-items: center;
    justify-content: center
}

.haosns-admin-add-icon-form {
    height: 100%
}

.haosns-add-icon-form .layui-tab {
    margin: 0;
    height: 100%;
    position: relative;
    overflow: hidden
}

.haosns-admin-add-icon-form .layui-tab-content {
    padding: 0;
    height: 410px
}

.haosns-admin-add-icon-form .layui-tab-item {
    height: 100%;
    background: #fff;
    padding: 5px 5px 15px
}

.haosns-icon-url-tips {
    background: #ffdfdf;
    color: #e33030;
    font-size: 12px;
    line-height: 30px;
    padding: 0 10px;
    border-radius: 3px
}

.haosns-icon-url-list {
    height: calc(100% - 30px);
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 5px;
    justify-items: center;
    grid-auto-rows: min-content;
    padding: 10px 5px
}

.haosns-icon-url-list i {
    cursor: pointer;
    display: inline-flex;
    margin: 4px;
    width: 35px;
    height: 35px;
    line-height: 35px;
    font-size: 18px;
    color: #555;
    text-align: center;
    border: 1px solid #ccc;
    background-color: #f7f7f7;
    border-radius: 2px;
    box-shadow: 1px 1px 0 rgb(0 0 0 / 5%);
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    transition: .1s
}

.haosns-icon-url-list i:hover {
    transform: scale(1.6)
}

.haosns-notice-popup-content {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 5px;
    display: grid;
    grid-template-columns: 140px 1fr
}

.haosns-notice-popup-content .haosns-more-loading {
    margin: 20px auto
}

.haosns-notice-popup-content .haosns-empty-page {
    padding: 20px
}

.haosns-notice-popup-content .notice-left {
    text-align: center;
    border-right: 1px #eee solid;
    padding: 15px 10px 15px 15px
}

.haosns-notice-popup-content .notice-left li {
    height: 50px;
    cursor: pointer;
    transition: .3s;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px
}

.haosns-notice-popup-content .notice-left .on {
    color: #2f353b
}

.haosns-notice-popup-content .notice-left li:hover {
    color: var(--haosns-theme-color)
}

.haosns-notice-popup-content .notice-left li:after {
    content: "";
    position: absolute;
    right: -13px;
    top: calc(50% - 5px);
    border-bottom: 1px solid #ddd;
    border-left: 1px solid #ddd;
    opacity: 0;
    transition: .3s;
    background: #fff;
    width: 6px;
    height: 6px;
    transform: rotate(45deg)
}

.haosns-notice-popup-content .notice-left li .haosns-aite {
   background: linear-gradient(to right, #f10050, #e3054b);
}

.haosns-notice-popup-content .notice-left li .haosns-xinxifill {
    background: linear-gradient(to right, #67a96b, #39a33f)
}

.haosns-notice-popup-content .notice-left li .haosns-xitong {
    background: linear-gradient(to right, #7c89ce, #5064d0)
}

.haosns-notice-popup-content .notice-left li .haosns-tongzhifill {
    background: linear-gradient(to right, #f58a96, #f3495c)
}

.haosns-notice-popup-content .notice-left li svg {
    width: 22px;
    height: 22px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 12px;
    border-radius: 5px
}

.haosns-notice-popup-content .notice-left li n {
    background-color: #ff5722;
    color: #fff;
    font-size: 11px;
    border-radius: 100%;
    width: 16px;
    height: 16px;
    line-height: 16px;
    display: flex;
    align-items: center;
    justify-content: center
}

.haosns-notice-popup-content .notice-left .on:after {
    opacity: 1
}

.haosns-notice-popup-content .notice-right {
    position: relative;
    padding: 0 15px;
    overflow-x: hidden;
    overflow-y: auto
}

.haosns-notice-popup-content .notice-right::-webkit-scrollbar-track {
    background: 0 0
}

.haosns-notice-popup-content .notice-right::-webkit-scrollbar {
    width: 5px
}

.haosns-notice-popup-content .notice-right .list {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 10px;
    padding: 20px 0;
    align-items: flex-start;
    border-bottom: 1px rgb(241, 241, 241) solid
}

.haosns-notice-popup-content .notice-right .list:last-of-type {
    border: 0
}

.haosns-notice-popup-content .notice-right .list .left {
    display: flex;
    align-items: center;
    justify-content: center
}

.haosns-notice-popup-content .notice-right .list .left a {
    width: 40px;
    height: 40px;
    position: relative
}

.haosns-notice-popup-content .notice-right .list .left a em {
    border-radius: 100%;
    border: 2px solid #fff;
    height: 8px;
    width: 8px;
    display: block;
    position: absolute;
    left: 0;
    background-color: #07c160
}

.haosns-notice-popup-content .notice-right .list .right {
    display: grid;
    grid-template-rows: 20px 1fr;
    gap: 10px;
    align-items: center;
    overflow: hidden;
    position: relative
}

.haosns-notice-popup-content .notice-right .list .right .header {
    display: flex;
    line-height: 20px;
    position: relative;
    gap: 10px
}

.haosns-notice-popup-content .notice-right .list .right .header .time {
    flex: 1;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    font-size: 12px;
    color: rgb(0 0 0 / 50%)
}

.haosns-notice-popup-content .notice-right .list .right .header .tips {
    color: rgb(0 0 0 / 50%)
}

.haosns-notice-popup-content .notice-right .list .right .header a {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center
}

.haosns-notice-popup-content .notice-right .list .right .bottom {
    /* display: flex;
    align-items: center;
    justify-content: space-between */
}

.haosns-notice-popup-content .notice-right .list .right .from {
    background-color: #fafafa;
    padding: 8px 10px;
    border-radius: 5px;
    width: 430px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.haosns-notice-popup-content .notice-right .list .right .from a {
    font-size: 13px
}

.haosns-notice-popup-content .notice-right .list .right .from:after {
    content: "";
    top: 26px;
    left: 15px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    background-color: #fafafa;
    height: 8px;
    position: absolute;
    width: 8px;
    z-index: 999;
    border-left: 1px solid #eee;
    border-top: 1px solid #eee;
    border-radius: 2px
}

.haosns-notice-popup-content .notice-right .list .right .status {
    background-color: #ff5722;
    width: 10px;
    aspect-ratio: 1;
    border-radius: 100%
}

.haosns-notice-popup-content .notice-right .system {
    display: grid;
    grid-template-columns: 40px 1fr;
    gap: 20px;
    padding: 20px 0;
    align-items: flex-start;
    border-bottom: 1px #eee dashed
}

.haosns-notice-popup-content .notice-right .system .left {
    display: flex;
    align-items: center;
    justify-content: center
}

.haosns-notice-popup-content .notice-right .system .left a {
    width: 40px;
    height: 40px;
    position: relative;
    background-color: var(--haosns-theme-color);
    color: #fff;
    text-align: center;
    line-height: 40px;
    border-radius: 100%
}

.haosns-notice-popup-content .notice-right .system .left a img {
    width: 100%;
    height: 100%;
    border-radius: 3px
}

.haosns-notice-popup-content .notice-right .system .left a em {
    border-radius: 100%;
    border: 2px solid #fff;
    height: 8px;
    width: 8px;
    display: block;
    position: absolute;
    left: 0;
    background-color: #07c160
}

.haosns-notice-popup-content .notice-right .system .right {
    border: 1px #eee solid;
    background: #fafafa;
    padding: 15px;
    border-radius: 5px;
    line-height: 25px;
    position: relative
}

.haosns-notice-popup-content .notice-right .system .right:after {
    content: "";
    top: 15px;
    left: -5px;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    background: #fafafa;
    height: 8px;
    position: absolute;
    width: 8px;
    z-index: 999;
    border-left: 1px solid #ddd;
    border-top: 1px solid #ddd;
    border-radius: 2px
}

.haosns-notice-popup-content .notice-right .system .right .status {
    color: #ff5722;
    margin-left: 5px;
    font-size: 12px;
    text-shadow: 0 0 2px #ff5722;
    position: absolute;
    right: 10px;
    top: 5px
}

.haosns-use-honor-popup-content {
    padding: 20px;
    display: grid;
    grid-template-rows: auto auto;
    gap: 20px
}

.haosns-use-honor-popup-content .list {
    position: relative;
    overflow: hidden;
    display: flex;
    gap: 10px;
    flex-wrap: wrap
}

.haosns-use-honor-popup-content .list li {
    height: 30px;
    line-height: 30px;
    padding: 0 15px;
    border: 1px #eee solid;
    border-radius: 3px;
    cursor: pointer;
    transition: .3s;
    position: relative
}

.haosns-use-honor-popup-content .list .on:after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    background: var(--haosns-theme-color);
    font-size: 18px;
    width: 4px;
    height: 4px;
    border-radius: 2px
}

.haosns-use-honor-popup-content .list .on {
    color: var(--haosns-theme-color);
    border-color: var(--haosns-theme-color)
}

.haosns-use-honor-popup-content .list li:hover {
    color: var(--haosns-theme-color);
    border-color: var(--haosns-theme-color)
}

.haosns-use-honor-popup-content .btn {
    line-height: 38px;
    text-align: center;
    background: var(--haosns-theme-color);
    color: #fff;
    border-radius: 3px;
    cursor: pointer;
    transition: .3s
}

.haosns-use-honor-popup-content .btn:hover {
    opacity: .7
}
.haosns-poster-popup-content {
    display: flex;
    flex-direction: column;
    gap: 10px
}

.haosns-poster-popup-content .cover {
    margin: 10px;
    border: 1px #f5f5f5 solid;
    height: 200px
}

.haosns-poster-popup-content .cover img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.haosns-poster-popup-content .user {
    display: flex;
    padding: 0 15px;
    gap: 10px;
    align-items: center
}

.haosns-poster-popup-content .user .avatarimg {
    width: 30px
}

.haosns-poster-popup-content .name {
    flex: 1
}

.haosns-poster-popup-content .time {
    font-size: 12px;
    color: #999
}

.haosns-poster-popup-content .title {
    font-size: 17px;
    font-weight: 600;
    margin: 0 15px
}

.haosns-poster-popup-content .content {
    font-size: 13px;
    letter-spacing: 1px;
    word-wrap: break-word;
    margin: 0 15px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 30;
    line-clamp: 30;
    overflow: hidden
}

.haosns-poster-popup-content .footer {
    display: flex;
    flex-direction: column;
    text-align: center
}

.haosns-poster-popup-content .footer canvas {
    width: 66px;
    height: 66px;
    margin: auto
}

.haosns-poster-popup-content .copyright {
    background-color: var(--haosns-theme-color);
    color: #fff;
    font-size: 12px;
    line-height: 35px
}

.haosns-poster-popup-content .desc {
    color: #999;
    font-size: 12px;
    line-height: 30px
}

.editor-file-menu {
    display: flex;
    flex-direction: column
}

.editor-file-menu li {
    line-height: 30px
}

.haosns-file-popup .layui-layer-btn {
    padding: 15px 0 15px
}

.haosns-file-popup .layui-layer-btn a {
    margin: 0 10px
}

.haosns-file-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 15px 15px 0
}

.haosns-file-info .item {
    display: flex;
    line-height: 30px
}

.haosns-file-info .value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333
}

.haosns-file-info input {
    padding: 0 5px;
    height: 30px
}

.haosns-file-info .upload-process {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgb(255 255 255 / 50%)
}

.haosns-file-info .process {
    margin: auto;
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 50%;
    padding: 5px;
    background: conic-gradient(#1e9fff 0, #1e9fff calc(var(--progress) * 1%), transparent 0);
    transition: --progress .3s ease
}

.haosns-file-info .num {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #fff
}

.haosns-file-info .num::before {
    counter-reset: process var(--progress);
    content: counter(process) '%';
    font-size: 20px;
    color: #1e9fff
}

.haosns-file-online-popup .layui-layer-btn a {
    margin: 0 10px
}

.haosns-file-online {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 20px 20px 0
}

.haosns-file-online-popup .layui-layer-btn {
    padding: 20px 0
}

.haosns-file-online .item {
    display: flex;
    line-height: 35px;
    gap: 10px
}

.haosns-file-online .value {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #333
}

.haosns-file-online input {
    padding: 0 5px;
    height: 35px
}

.haosns-file-online .haosns-btn {
    line-height: 35px;
    padding: 0;
    width: 75px
}

.file—link-tips {
    margin-top: -6px
}

.file—link-tips .layui-layer-content {
    white-space: normal;
    word-break: break-all
}

/* 全局 Toast 弹窗样式 */
.success-toast, .error-toast {
    position: fixed;
    top: 30px;
    left: 50%;
    transform: translateX(-50%) translateY(-100%);
    min-width: 300px;
    padding: 16px 24px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: #333;
    background: #fff;
    font-size: 15px;
    font-weight: 500;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    z-index: 20000000; /* 确保高于 layui layer */
    transition: all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
    opacity: 0;
    pointer-events: none;
    visibility: hidden;
}

.success-toast.visible, .error-toast.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.success-toast svg {
    color: #52c41a;
    flex-shrink: 0;
}

.error-toast svg {
    color: #ff4d4f;
    flex-shrink: 0;
}