html, body {
    position: absolute;
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
    height: 100%;
    outline: none;
}

.root {
    --themeColor: #404580;
    --deleteRed: #ED4244;
}

.article-header-wrapper {
    position: sticky;
    top: 0;
    left: 0;
    padding: 0 64px;
    height: 64px;
    box-shadow: 0 2px 10px 0 rgba(0, 0, 0, .1);
    min-width: 1340px;
    background: #FFFFFF;
    z-index: 200;
}

.article-header-left {
    display: flex;
    align-items: center;
}

.article-header-logo {
    float: left;
    width: 100px;
    height: 64px;
    line-height: 64px;
    cursor: pointer;
}

.article-header-center {
    width: 440px;
}

.article-header-center .search, .article-header-center .search input {
    width: 100%;
    height: 40px;
    position: relative;
    box-sizing: border-box;
}

.article-header-center .search input {
    height: 100%;
    padding-left: 18px;
    padding-right: 92px;
    font-size: 16px;
    line-height: 20px;
    color: #222;
    background: #f5f5f5;
    border-radius: 8px;
    border: none;
    z-index: 10;
    outline: none;
}

.article-header-center .search button {
    width: 92px;
    height: 100%;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border: none;
    background: transparent;
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 11;
    cursor: pointer;
}

.article-header-center .search button:before {
    content: "";
    display: block;
    width: 1px;
    height: 16px;
    background-color: #e8e8e8;
    position: absolute;
    left: 0;
}

.article-header-center .search button i {
    display: block;
    width: 28px;
    height: 28px;
    margin-right: 4px;
    background: url(../images/search_icon_blue.svg) no-repeat 50%;
    background-size: contain;
}

.article-header-center .search button span {
    font-weight: 500;
    font-size: 16px;
    color: #313769;
    color: var(--themeColor);
}

.article-header-right {
    height: 64px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.notification-container {
    display: inline-block;
    margin-left: 36px;
    padding: 16px 0;
}

.notification-container a {
    margin-left: 0;
    text-shadow: none
}

.notification-container a.notice-icon {
    padding: 0 0 0 30px;
    font-weight: 400;
    font-size: 14px
}

.notification-container a.notice-icon:hover {
    opacity: 1
}

.ttp-header-notice.dark .notice-icon:before {
    background-image: url(../images/msg_icon.36698e42.svg)
}

.ttp-header-notice {
    cursor: pointer;
    position: relative;
    outline: none
}

.ttp-header-notice:focus-visible {
    outline: auto
}

.ttp-header-notice .notice-count {
    padding: 2px 5px;
    text-align: center;
    font-weight: 600;
    font-size: 12px;
    line-height: 12px;
    color: #fff;
    background: #f04142;
    border-radius: 8px
}

.ttp-header-notice > .notice-count {
    position: absolute;
    left: 12px;
    top: -6px;
    z-index: 1
}

.ttp-header-notice .notice-icon {
    display: block;
    font-weight: 500;
    font-size: 16px;
    line-height: 20px;
    color: #222;
    padding-left: 30px
}

.ttp-header-notice .notice-icon:before {
    content: "";
    display: block;
    width: 24px;
    height: 24px;
    background-image: url(../images/icon_black.512bde3a.svg);
    position: absolute;
    top: -2px;
    left: 0
}

.ttp-header-notice .notice-icon:hover {
    opacity: .6
}

.ttp-header-notice .notice-list {
    padding: 12px 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    background: #fff;
    mix-blend-mode: normal;
    border: 1px solid #f2f2f2;
    -webkit-box-shadow: 0 10px 50px rgba(54, 56, 79, .11);
    box-shadow: 0 10px 50px rgba(54, 56, 79, .11);
    border-radius: 8px;
    position: absolute;
    top: 35px;
    left: -13px;
    z-index: 100
}

.ttp-header-notice .notice-list a {
    display: block;
    padding: 8px 25px;
    font-size: 14px;
    line-height: 20px;
    color: #222;
    white-space: nowrap
}

.ttp-header-notice .notice-list a:hover {
    background: #f8f8f8
}

.ttp-header-notice .notice-list:before {
    content: "";
    width: 16px;
    height: 6px;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAASBAMAAADvSECJAAAAHlBMVEVHcEz////////////////////////////////////JATChAAAACXRSTlMAf0DjEI+/XyDPWu1ZAAAAXklEQVQY02NgoAAwZU4rwCohOXPmRGzijDOBQAC7BqxawBqwaZGESEzEoQFTiyRMYiIODehaJBESE3FoQNUiiSwxEYcGJC0skagSUx2gEsoz0YA5WLhJeCYGMFVhAABuNF5e7AnNUQAAAABJRU5ErkJggg==);
    background-size: contain;
    position: absolute;
    top: -6px;
    left: 16px
}

.ttp-header-notice .notice-list .notice-count {
    display: inline-block;
    margin-left: 8px;
    position: relative;
    top: -1px
}

.ttp-header-notice.dark .notice-icon {
    color: #fff
}

.ttp-header-notice.dark .notice-icon:before {
    background-image: url(../images/icon_white.e26fd22f.svg);
}

.ttp-header-notice.black .notice-icon {
    color: #000000
}

.ttp-header-notice.black .notice-icon:before {
    background-image: url(../images/icon_black.512bde3a.svg);
}

.ttp-header-notice.black .notice-icon:hover {
    opacity: 1;
    color: #cacaca
}

.ttp-header-notice.black .notice-icon:hover:before {
    background-image: url(../images/icon_grey.d8c2586c.svg);
}

.user-icon {
    display: inline-block;
    margin-left: 36px
}

.user-icon {
    padding: 13px 0;
    cursor: pointer;
    position: relative
}

.user-icon img {
    width: 26px;
    height: 26px;
    margin-bottom: -4px;
    border-radius: 50%
}

.user-icon a {
    display: block;
    margin-left: 0;
    padding: 0
}

.user-icon.red {
    padding: 0
}

.user-icon.red img {
    width: 28px;
    height: 28px;
    margin: 0
}

.user-icon.red .hover-list {
    margin-top: 40px;
    right: -24px
}

.user-icon.red .hover-list:before {
    left: auto;
    right: 37px;
    -webkit-transform: translateX(50%);
    -moz-transform: translateX(50%);
    transform: translateX(50%)
}

.left-sidebar {
    float: left;
    margin-left: -108px;
    width: 48px;
}

.article-detail-container {
    margin: 20px auto 0;
    padding: 0 48px;
    width: 1130px;
}

.article-detail-container > div {
    display: inline-block;
    vertical-align: top;
}

.article-title {
    font-size: 37px;
    font-weight: 600;
    line-height: 56px;
    color: #000;
    display: flex;
    align-items: center;
}

.article-title-map {
    display: inline-block;
    height: 40px;
    width: 40px;
    background: url(../images/icon-map-flag.svg) 0 no-repeat;
    cursor: pointer
}

.article-meta {
    margin: 16px 0 36px;
    font-size: 14px;
    line-height: 20px;
    color: #707070;
}

.article-meta .name:hover {
    opacity: 0.8;
}

.article-meta a {
    color: #707070;
    cursor: pointer;
}

.article-header-right .login-button {
    font-size: 14px;
    line-height: 20px;
    color: #fff;
    padding: 4px 12px;
    background: #f04142;
    background: var(--themeColor);
    border-radius: 6px;
    text-shadow: none;
    margin-left: 40px;
}

.article-header-right .login-button:hover {
    opacity: .9
}

.detail-side-interaction .divide {
    margin: 16px auto;
    width: 24px;
    height: 1px;
    background: #e8e8e8
}

.fadeIn {
    opacity: 0;
    -webkit-animation: fadeIn .5s ease forwards;
    -moz-animation: fadeIn .5s ease forwards;
    animation: fadeIn .5s ease forwards
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@-moz-keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes fadeIn {
    0% {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

.detail-like {
    text-align: center;
    cursor: pointer;
    color: #222;
    outline: none
}

.detail-like:focus-visible {
    outline: auto
}

.detail-like:hover span {
    opacity: .8
}

.detail-like:hover .digg-icon i {
    background-image: url(../images/like_hover.svg)
}

.detail-like.like {
    color: #f04142;
    color: var(--themeColor);
}

.detail-like.like .digg-icon {
    background: #fff2f2;
    background: var(--themeColorRgba01);
}

.detail-like.like .digg-icon i {
    -webkit-transform-origin: -16% 66%;
    -moz-transform-origin: -16% 66%;
    transform-origin: -16% 66%;
    -webkit-animation: like .7s forwards;
    -moz-animation: like .7s forwards;
    animation: like .7s forwards;
    background-image: url(../images/like_active.svg)
}

.detail-like .digg-icon {
    position: relative;
    border-radius: 24px;
    width: 48px;
    height: 48px;
    background: #f8f8f8
}

.detail-like .digg-icon .inner {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    font-size: 0
}

.detail-like .digg-icon i {
    display: block;
    width: 24px;
    height: 24px;
    background: url(../images/like.svg) no-repeat 50%;
    background-size: contain
}

.detail-like.icon-candle .digg-icon i {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEkAAABIBAMAAABIAcVKAAAAJFBMVEVHcEwgICAiIiIiIiIgICAgICAgICAhISEiIiIhISEhISEiIiJJhz/2AAAAC3RSTlMAYYDnJEAQw5mnUAgg3KoAAAFNSURBVEjH1davT0JRFAdwULxOE44xNy3OSjE4ApS3qYlCdZZXncViolCkWOwUKRSK+tT34PxzzsclnHvv99wzIeg3fwbs/LpUKv8ltaNEgQZUxFmDiM5jaId+Evuwi1K1I2pQqrmMqrRMX1TbVt2L6saqT1GNrXoXVdeqXEKGVkmjNY3VVadqqm80q1+fKRpEVGygqrtWDUVlf1ieykNxW6pRbFivu5Q9xtfDXCbrrqGZnLpppoE19OMtZoNC6aA2s2RJcCvc8C05Bor38wmoIjgxm1DjtRTf3hZQb6pKLJiaqerVA+qDqTugXlV9PPtFt/eAelYpvr1bQNWDF9zNC1P7QPU1c++cRAMUOOHODqlUDh4NnrlKuee1pRhVNKwLR80Uo4qG9Qs8stIQotEZwtcMtxGUwn+XQ3N44h/pQw89hG751QHP9O//C/wGHhnyLVCu/SMAAAAASUVORK5CYII=)
}

.detail-like.icon-candle.like {
    color: #996d39
}

.detail-like.icon-candle.like .digg-icon {
    background: #fff5e9
}

.detail-like.icon-candle.like .digg-icon i {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEkAAABICAMAAACN8ShLAAAAsVBMVEVHcEzuvVvut1DvtEz746j10ID85Kn1zIHwuVLywWT/67jsuFHvojn95az/7LnrulfyvlcAAADtmzP/7Ln80WT91Wj/7buTflBmVzFuYDD+6bP/6rfxyHPzzHrwxGv95q742pbtvl/846j74KHruFPsu1nuwWX0z4D53Zz10oX32JH21Yz204j8/0j3u0zzr0b5xlnxpz7voDf/R0f81Wb780wAAAD63k9cTzH/XkeemzKUvJuRAAAAG3RSTlMAhN3CXIB9GT9f36bmQ59v72B678Xlr5/Xp88LYEH0AAACYklEQVRYw+2Ya3eiMBCGkVUSxVu9tKcL6wVB7AqRKizb/v8ftkkExQqZbNJzdj/0PR6QDz7nnWRmMmgYX/r/hCcT/Cmc/pGqj7RBk2Ohriaoe7xIL0LUf2U6sotegGdQoW86sb0eqPiF3TXiMzmB5DnhX9RN4TMojuOMouhH2ZRNmLKYo8iBkJZycIT4JI+5cgZVDo8kpSVmKiBkrJpMSZAkSVwoYVImUdHgsgMzlmuQDPbbLM7eTqc3eqMPqtEZsyRJs5icqHJOmqmSWmlakkic0QflfoDmt6S5Rt2laV6Scg1LVJ00LUl6IFp68/T9F9V7OtPu5YNnRnr+jDPhgZEejH9LQoPBoH3V02+qp+5VGGOZlo6s6XK59LzNZrPbrVY/9/t9FIVh+IPKdReLxXa7Xq8DE2xVqOc4DHQhUVT08sJJboUUBCaSAMmQfF+MGjpOgYJJvihAdAF5DASQxgJTbafiSUxiKEG2WgXpuk4rgSe/C3vyGOrqKVIkLRtW3L0jYSlPVVKTJwztnVNZ8dUtyb0hIYDkSGam74sycypYpzuSKSL1Kp4E+XROJ+GU8OjI151vy9bdTqfueJI3eSq37kIaiUjtWk8N+YQhEs2nj57Cvyehxv4U3pMQRAL707Ygifv4tHbvwrpqMcUkcR9fVKMDxtdH+T5ui0lDqT7OqwU48Sx5TyMxqS1/tmCQdO8pqo0OIKES5IGeEEiS8MRJ0IjRk1ynAHwbGtZ5qqtgGxwrazzVRgcPY0O5fJJ4aUTfZTzZUnOm1YM8jUfSI6vF1bE6t2p1WlQjrP8ny5f09QebrQvnf7x/CgAAAABJRU5ErkJggg==);
    -webkit-animation: none;
    -moz-animation: none;
    animation: none
}

.detail-like > span {
    display: inline-block;
    margin-top: 4px;
    font-size: 12px;
    line-height: 20px
}

@-webkit-keyframes like {
    0%, to {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease
    }
    20% {
        -webkit-transform: rotate(-20deg);
        transform: rotate(-20deg);
        -webkit-animation-timing-function: cubic-bezier(.66, 0, .34, 1);
        animation-timing-function: cubic-bezier(.66, 0, .34, 1)
    }
    48% {
        -webkit-transform: rotate(8deg);
        transform: rotate(8deg);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    75% {
        -webkit-transform: rotate(-1deg);
        transform: rotate(-1deg);
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease
    }
}

@-moz-keyframes like {
    0%, to {
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
        -moz-animation-timing-function: ease;
        animation-timing-function: ease
    }
    20% {
        -moz-transform: rotate(-20deg);
        transform: rotate(-20deg);
        -moz-animation-timing-function: cubic-bezier(.66, 0, .34, 1);
        animation-timing-function: cubic-bezier(.66, 0, .34, 1)
    }
    48% {
        -moz-transform: rotate(8deg);
        transform: rotate(8deg);
        -moz-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    75% {
        -moz-transform: rotate(-1deg);
        transform: rotate(-1deg);
        -moz-animation-timing-function: ease;
        animation-timing-function: ease
    }
}

@keyframes like {
    0%, to {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        transform: rotate(0deg);
        -webkit-animation-timing-function: ease;
        -moz-animation-timing-function: ease;
        animation-timing-function: ease
    }
    20% {
        -webkit-transform: rotate(-20deg);
        -moz-transform: rotate(-20deg);
        transform: rotate(-20deg);
        -webkit-animation-timing-function: cubic-bezier(.66, 0, .34, 1);
        -moz-animation-timing-function: cubic-bezier(.66, 0, .34, 1);
        animation-timing-function: cubic-bezier(.66, 0, .34, 1)
    }
    48% {
        -webkit-transform: rotate(8deg);
        -moz-transform: rotate(8deg);
        transform: rotate(8deg);
        -webkit-animation-timing-function: ease-in-out;
        -moz-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    75% {
        -webkit-transform: rotate(-1deg);
        -moz-transform: rotate(-1deg);
        transform: rotate(-1deg);
        -webkit-animation-timing-function: ease;
        -moz-animation-timing-function: ease;
        animation-timing-function: ease
    }
}

.detail-interaction-comment {
    position: relative;
    padding-top: 24px;
    text-align: center;
    color: #222;
    cursor: pointer;
    outline: none
}

.detail-interaction-comment:focus-visible {
    outline: auto
}

.detail-interaction-comment:hover {
    opacity: .8
}

.detail-interaction-comment:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
    -moz-transform: translateX(-50%);
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    background: url(https://lf-dw.toutiaostatic.com/obj/toutiao-duanwai/toutiao/toutiao_web_pc/svgs/icon_comment.d319bd6b.svg) no-repeat 50%;
    background-size: contain
}

.detail-interaction-comment > span {
    display: inline-block;
    font-size: 12px;
    line-height: 20px
}

.detail-interaction-collect {
    text-align: center;
    color: #222;
    cursor: pointer;
    outline: none
}

.detail-interaction-collect:focus-visible {
    outline: auto
}

.detail-interaction-collect:hover {
    opacity: .8
}

.detail-interaction-collect.collected {
    color: #404580;
}

.detail-interaction-collect.collected svg {
    fill: #404580;
    stroke: #404580;
    -webkit-animation: favorites 1s forwards;
    -moz-animation: favorites 1s forwards;
    animation: favorites 1s forwards
}

.detail-interaction-collect svg {
    width: 24px;
    height: 24px;
    fill: #222;
    stroke: #222
}

.detail-interaction-collect > span {
    display: inline-block;
    font-size: 12px;
    line-height: 20px
}

@-webkit-keyframes favorites {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
        -webkit-animation-timing-function: ease;
        animation-timing-function: ease
    }
    22% {
        -webkit-transform: scale(1.16);
        transform: scale(1.16);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    44% {
        -webkit-transform: scale(.98);
        transform: scale(.98);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    64% {
        -webkit-transform: scale(1.02);
        transform: scale(1.02);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    to {
        -webkit-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
}

@-moz-keyframes favorites {
    0% {
        -moz-transform: scale(0);
        transform: scale(0);
        -moz-animation-timing-function: ease;
        animation-timing-function: ease
    }
    22% {
        -moz-transform: scale(1.16);
        transform: scale(1.16);
        -moz-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    44% {
        -moz-transform: scale(.98);
        transform: scale(.98);
        -moz-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    64% {
        -moz-transform: scale(1.02);
        transform: scale(1.02);
        -moz-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    to {
        -moz-transform: scale(1);
        transform: scale(1);
        -moz-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
}

@keyframes favorites {
    0% {
        -webkit-transform: scale(0);
        -moz-transform: scale(0);
        transform: scale(0);
        -webkit-animation-timing-function: ease;
        -moz-animation-timing-function: ease;
        animation-timing-function: ease
    }
    22% {
        -webkit-transform: scale(1.16);
        -moz-transform: scale(1.16);
        transform: scale(1.16);
        -webkit-animation-timing-function: ease-in-out;
        -moz-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    44% {
        -webkit-transform: scale(.98);
        -moz-transform: scale(.98);
        transform: scale(.98);
        -webkit-animation-timing-function: ease-in-out;
        -moz-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    64% {
        -webkit-transform: scale(1.02);
        -moz-transform: scale(1.02);
        transform: scale(1.02);
        -webkit-animation-timing-function: ease-in-out;
        -moz-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
    to {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        transform: scale(1);
        -webkit-animation-timing-function: ease-in-out;
        -moz-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out
    }
}

.show-article-content .action {
    margin: 20px 0;
}

.detail-label, .address-label {
    width: 640px;
    display: inline-block;
    position: relative;
    font-size: 14px;
    line-height: 20px;
    color: #313769;
    color: var(--themeColor);
    cursor: pointer;
    outline: none;
}
.detail-label span {
    margin-right: 5px;
}
.detail-label span:last-child {
    margin-right: 0;
}
.address-label:visited {
    color: #313769;
    color: var(--themeColor);
}

.detail-report {
    display: inline-block;
    position: relative;
    padding-left: 24px;
    font-size: 14px;
    line-height: 20px;
    color: #313769;
    color: var(--themeColor);
    cursor: pointer;
    outline: none;
}

.detail-report i {
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    background: url(../images/icon_report.svg) no-repeat 50%;
    background-size: contain;
}

.right-sidebar {
    width: 376px;
}

.show-monitor {
    display: block;
}

.media-info a {
    text-decoration: none;
    color: #222;
    cursor: pointer;
}

.media-info .user-info {
    padding: 8px 0 12px;
    text-align: center;
}

.media-info .user-info .user-avatar {
    display: block;
    width: 60px;
    height: 60px;
    margin: auto;
    position: relative;
}

.media-info .user-info .user-avatar img {
    border: 1px solid #f2f2f2;
    width: 100%;
    height: 100%;
    border-radius: 50%;
}

.media-info .user-info .user-avatar .verified-icon {
    position: absolute;
    right: 0;
    bottom: 0;
}

.verified-icon {
    display: inline-block;
    background-size: contain;
    background-repeat: no-repeat;
}

.media-info .user-info .user-name {
    display: block;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    letter-spacing: .02em;
    color: #222;
    margin: 8px 0 4px;
}

.media-info .user-info .user-auth {
    margin: 0 auto 12px;
    max-width: 220px;
    max-height: 40px;
    font-size: 14px;
    line-height: 20px;
    color: #707070;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.user-subscribe-wrapper {
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    border-radius: 4px;
    border: none;
    margin: 0 auto;
    width: 96px;
    height: 32px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #fff;
    background: #313769;
    background: var(--themeColor);;
    cursor: pointer;
}

.user-subscribe-wrapper.following {
    color: #999;
    color: var(--themeColor);
    background: #f8f8f8;
}

.media-info .related-title {
    margin: 24px 0 8px;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    letter-spacing: .02em;
    color: #222;
    text-align: center;
    position: relative;
}

.media-info .related-title:before {
    display: block;
    content: "";
    width: 100%;
    height: 1px;
    background-color: #f2f2f2;
    position: absolute;
    top: 50%;
    z-index: -1;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
}

.media-info .related-title span {
    padding: 0 18px;
    background-color: #fff;
}

.media-info .look-more {
    width: 100%;
    height: 40px;
    margin-top: 10px;
    background: #f8f8f8;
    border-radius: 4px;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.media-info .look-more .icon-arrow {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin-left: 2px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwBAMAAAClLOS0AAAAElBMVEUAAAAiIiIgICAiIiIiIiIiIiITg06EAAAABXRSTlMAgBBw7yyeleUAAAA/SURBVDjLYxgxgEkBh4RJIA4NoaECuCRwaBHFpYVxeGkJxqUlRAGXWQoEbMe0fLhqACUf0hIcg6kz7kQ9sgAAPXQYYVl7Um4AAAAASUVORK5CYII=) no-repeat 50%;
    background-size: contain;
}

.related-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.related-list-item {
    padding: 12px 0;
    overflow: hidden;
}

.related-list-item-left-img {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 96px;
    height: 72px;
    margin-right: 12px;
    border-radius: 4px;
    border: 1px solid #f2f2f2;
    overflow: hidden;
    float: left;
}

.related-list-item-left-img:hover .pic {
    -webkit-transform: matrix(1.04,0,0,1.04,0,0);
    -moz-transform: matrix(1.04,0,0,1.04,0,0);
    transform: matrix(1.04,0,0,1.04,0,0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden
}

.related-list-item-left-img .pic {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50%;
    -webkit-transition: all .5s ease-out .1s;
    -moz-transition: all .5s ease-out .1s;
    transition: all .5s ease-out .1s;
}

.related-list-item-right-content {
    height: 72px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.related-list-item-right-content .title {
    max-height: 44px;
    font-size: 16px;
    line-height: 22px;
    color: #222;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    text-overflow: ellipsis;
}

.related-list-item-right-content .title:visited {
    color: #999
}

.related-list-item-right-content .title:hover {
    color: #f04142;
    color: var(--themeColor);
}

.related-list-item-right-content .info {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    height: 20px;
    font-size: 14px;
    line-height: 20px;
    color: #999;
}

.related-list-item-right-content .info  span:nth-child(2) {
    margin-left: 20px;
}

.sy-comment-block {
    width: 100%;
}

.sy-comment-wrapper .title {
    font-size: 20px;
    font-weight: 600;
    line-height: 28px;
    color: #222;
}

.sy-comment-wrapper .main-input {
    display: flex;
    margin-top: 24px;
    margin-bottom: 40px;
}

.sy-comment-wrapper .main-input .sy-avatar {
    margin-right: 12px;
}

.sy-avatar {
    position: relative;
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #f2f2f2;
    border-radius: 50%;
    width: 36px;
    height: 36px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGwAAABsCAMAAAC4uKf/AAAAM1BMVEVHcEz6+vrx8fH29vbz8/P19fX09PT09PT09PTz8/Pu7u7s7Oz09PTe3t7Z2dnk5OTq6uplYINlAAAACnRSTlMA////wyFRnN59U/j+GAAABgBJREFUaN69Wo3CtBoQrqGIqdz/1R4y/krRvn1nKmSZp2eMdtcYhhcyzYsQXEpjRUrOxTJPw7+QeeHSaGO0dqnxicv4Mn+LtHATAXR2+Fqt+WcMF34QehCjlcX7Akq2oAhQSfE3epPQSulOsY/0FzihX8uvcNaA70XJ5RdXl3bU7fn+kG9dZVrcEKhfqNmO78hN8njGX5gdfeT0xoTqcEKljlz5gvdLdVSHOq0IgDpoquofuUUBqL9KJ5pQn4joGS6uPhLeBvsMC5T833g5j+FtXvDdwRu+AR9SgycvWajJV8fTDFjgKspfv6E5uXlRThoeu70X11PX31zyQenvzKA6AcSTuZKYdd287KaHWfVVMj+aK4z4vhWy6zYzUPONER+7naEOuCazyptkaXuB3qqi2z2Xqyc2xGzbHdozO2v9inf8htXDrfCRqT1ltgdpz8OpIAaAx5ESzIvwhLWteYesnA5REEP/BBiT7N7K/giW+yRWmWFODJ+Zqa0h0GCGSzbHGsz2FtjeYAYqvTwazGBtga0tZnGu8bsG4dDb1m/H+hG+tKdb7h1zrG9mO4RgRWwcexvMtJiRHXlrRqIFexy1tfFCtiqQ7GiBG2K/wtxJSVGwxdXd7fWeLOlmhxWxKU7pVgBROatsa3Ffa6LdLDz+waPMIr2mEuYGjTebAeklxJBtxW37kd2gtVupnNiaIed3bTXazjLWw+xEbTtZ0p5tM+Lk/IPdHKEA63nQ1ku23mpJ2uZhQXb7KBmzk+2u0iZmPURg+5nWDulgJqwztgetgbO7q4MZHyS2qR3anM495ruH8EjuroOZBWOeGtVgyNIDIe5BZcwzWJ+b9Mhl51BnUzmAyxhVMipFOW5QV4h53Aitk+aic6yyCQzICq45s9hOBTLxSrakZ4Azs8KGlAwetM4szDYkzTR2YcTWDA0vzM6DZmXwE+qZGfNAe4ByZ0hWf8uazKwMbGS3Z8wNqSYMIueT41Ks2j/T5NIBAu3xJnU5ROMFlMjM32LQnXUrq0Y3ZtLlI32Q0pDQ3X6WNQAdYpLuot+YY47SgVVkPD2hzuyYlcKtzlrnFik1yYFHw44hKx7K55iP1p5yyjId2VixQtNo3yAi51BAFHC47zVTekSodk6WJP1iWBJyNljlWJND3olmp86FIZOLLMM8sr7jHix6xPNhvzwn1il44hZuDY59Ckb79xNYJzWw+vODMmC9CtxPuV5qfthMIEWF0uufxP2UE2OvYCCUiDkj9or7Xz3bnPWdihhlzFRvXzYeq0queFzNFMx52Hbo7TuOx/IEHwnuKfXF3RgTLp+xjr4+9X+Zlg57E/mDD8EdRdM9YiOtzXmTUlIvkzUCH0K0yWOvQgMt8vDehwNzkW5nDKvuS2d7ZhInomjUSyvaf0197XXBafe30Nc3LXB2UWPaVAW6ZzSthPS8Pm6wOtGyNUDxwjdimD+WNXtBrE0Nsl0FVNIxsRm8IPZMDSGF2C9Bd6ozgL3E3D/rOyDoDhrbvyh3vnUKkVQcksH7OLWqIi6XyPRplBSFuGOsu4hE50FwpVUsEeDdHIsrnAUnCk5rH4dOCnWIUKeQdAxP5/VQfXnUfARvQpinPP/gUpexE9UQf7TgJ8JujZh5JH4V8WSVKXYaNlYJk0IMhfoyZFVKleUY7VSq6omF/6ewVxaYUqcIKFV5DGpJkS8V2tvrCcs5CUI9epaIQTyzulNbKtedIzkJVCJGqmQb4U4WyAN0JI19IbISHnzLLLbmU2uPC3QwO0ey69KxbUJ2haCx+Snyng0houyWBwIgxmogBl4gC8HEijJk9ritBqEEyHGTvksp4eMlqPqA9mdmen6zFQoL/WXAC7CMzZ3iXzaR7zaxCdcLMSnxq8WhCsl4vjYU/AeIYngps8QfRf6y03GBX6D08ts+wEmkBcG4tscwrBRWF+f/sMNxEgzzVd5KXqzD/nnvpiyYXZhmobLlg12wM89iJWFxNa78+gIiXz7acDvN3AOkdbORpYWdD5ECnuDXFUULBFz8m23Sbjs2l/JY8UMpX2/H/g82QgrM87eFIQAAAABJRU5ErkJggg==) no-repeat 50%;
    background-size: contain;
}

.sy-avatar img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
    object-fit: cover;
}

.sy-comment-wrapper .main-input .sy-comment-input {
    -moz-box-flex: 1;
    -ms-flex: 1 1;
    flex: 1 1;
}

.sy-comment-input {
    position: relative;
    border-radius: 8px;
    padding: 16px;
    background: #f8f8f8;
}

.sy-comment-input .login-mask {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background: #f8f8f8;
    border-radius: 8px;
    cursor: pointer;
}

.sy-comment-input .login-mask p {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    white-space: nowrap;
    font-size: 16px;
    line-height: 22px;
    color: #222;
    outline: none;
}

.sy-comment-input .login-mask button {
    border: none;
    font-size: 16px;
    line-height: 22px;
    font-weight: 500;
    color: #f04142;
    background: transparent;
    border-radius: 5px;
    outline: none;
}

.sy-comment-input .comment-textarea {
    display: block;
    border: 0;
    padding: 0;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    min-height: 24px;
    max-height: 72px;
    font-size: 16px;
    line-height: 24px;
    color: #222;
    outline: none;
    resize: none;
    background: #f8f8f8;
    -webkit-transition: height .3s ease-in-out;
    -moz-transition: height .3s ease-in-out;
    transition: height .3s ease-in-out;
    word-break: break-all;
}

.sy-comment-input .comment-textarea:empty:before {
    content: attr(data-placeholder);
    color: #999;
    pointer-events: none;
    font-size: 16px;
}

.sy-comment-input .action {
    text-align: right;
    margin-top: 12px;
    position: relative;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin-bottom: 0;
}

.sy-comment-input .action, .sy-comment-input .action-left {
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.sy-comment-input .action-left {
    margin-bottom: 4px;
}

.sy-comment-input .action, .sy-comment-input .action-left {
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-align: end;
    -ms-flex-align: end;
    align-items: flex-end;
}

.sy-comment-input .submit-btn {
    border: none;
    border-radius: 4px;
    padding: 6px 18px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #fff;
    background: var(--themeColor);
    cursor: pointer;
}

.sy-comment-input .submit-btn:hover {
    opacity: 0.8;
}

.sy-comment-input .disable {
    opacity: .3;
    cursor: default;
}

.sy-comment-input .disable:hover {
    opacity: .3;
    cursor: default;
}

[type=button], [type=reset], [type=submit], button {
    -webkit-appearance: button;
}

button, input {
    outline: none;
}

body, button, input, keygen, legend, select, textarea {
    -webkit-font-smoothing: antialiased;
    color: #333;
    outline: none;
}

*:focus {
    outline: none !important;
}

button, select {
    text-transform: none;
}

button, input {
    overflow: visible;
}

button, input, optgroup, select, textarea {
    font-family: inherit;
    font-size: 100%;
    line-height: 1.15;
    margin: 0;
}

.comment-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 0;
}

.sy-comment-wrapper .comment-list > li {
    margin: 40px 0;
}

.sy-comment-item {
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
}

.sy-comment-item > a {
    margin-right: 12px;
    background-color: transparent;
    cursor: pointer;
    color: #222;
    text-decoration: none;
}

.sy-comment-item .comment-info {
    -moz-box-flex: 1;
    -ms-flex: 1 1;
    flex: 1 1;
}

.sy-comment-item .header {
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.sy-comment-item .user-info, .sy-comment-item .user-info .user-name {
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.sy-comment-item .user-info .user-name {
    font-size: 16px;
    font-weight: 500;
    line-height: 24px;
    color: #222;
}

.sy-comment-item .user-info, .sy-comment-item .user-info .user-name {
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.sy-comment-item .body {
    margin: 8px 0 12px;
}

.sy-comment-item .body .content {
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    color: #222;
    word-break: break-all;
}

.sy-comment-item .footer, .sy-comment-item .footer .left-action {
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.sy-comment-item .footer {
    -moz-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
}

.sy-comment-item .footer .left-action {
    font-size: 14px;
    line-height: 20px;
}

.sy-comment-item .footer, .sy-comment-item .footer .left-action {
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.sy-comment-item .footer .address,
.sy-comment-item .footer .delete,
.sy-comment-item .footer .report {
    border: none;
    border-radius: 34px;
    padding: 0;
    font-size: 14px;
    line-height: 20px;
    font-weight: 500;
    color: #999;
    background: none;
}

.sy-comment-item .footer .delete,
.sy-comment-item .footer .report {
    margin-left: 10px;
    cursor: pointer;
}

.sy-comment-item .footer .comment-hide {
    display: none;
}

.sy-comment-item .footer .dot {
    margin: 0 8px;
    color: #999;
}

.sy-comment-item .footer .time {
    color: #999;
}

.sy-comment-item .footer, .sy-comment-item .footer .right-action {
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    -moz-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

.sy-comment-item .right-action .reply,
.sy-comment-item .right-action .like {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    cursor: pointer;
    fill: #000000;
    color: #000000;
    font-size: 13px;
    line-height: 20px;
}

.is-like-icon {
    fill: var(--themeColor);
    color: var(--themeColor);
}

.like-text {
    width: 26px;
    text-align: center;
}

.is-like-text {
    color: var(--themeColor);
}

.sy-comment-item .right-action .reply {
    margin-right: 20px;
}

.sy-comment-item .right-action .icon {
    width: 20px;
    height: 20px;
    pointer-events: none;
    margin-right: 3px;
}

.sy-comment-item .right-action .reply span,
.sy-comment-item .right-action .like span,
.sy-comment-item .right-action .delete span {
    pointer-events: none;
}

.sy-comment-item .right-action .reply:hover,
.sy-comment-item .right-action .like:hover {
    fill: var(--themeColorRgba08);
    color: var(--themeColorRgba08);
}

.sy-comment-item .children-input {
    margin-top: 12px;
}

.sy-comment-item .replay-list {
    margin-bottom: -24px;
}

.sy-comment-item .replay-list> ul > li {
    margin: 24px 0;
}

.sy-comment-item .check-more-reply {
    display: inline-block;
    position: relative;
    border: none;
    margin-top: 16px;
    padding-right: 16px;
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #505050;
    background: none;
    cursor: pointer;
}

.sy-comment-item .check-more-reply:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background: url(../images/icon_down.c794088d.svg) no-repeat 50%;
    background-size: contain;
}

.sy-comment-block .side-drawer-btn {
    display: block;
    border: none;
    margin-top: -4px;
    padding: 11px 0;
    border-radius: 4px;
    width: 100%;
    font-size: 16px;
    font-weight: 500;
    line-height: 22px;
    text-align: center;
    color: #222;
    background: #f8f8f8;
    cursor: pointer;
}

.sy-comment-block .side-drawer-btn span {
    display: inline-block;
    position: relative;
    padding-right: 18px;
}

.sy-comment-block .side-drawer-btn span:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    margin-top: -1px;
    width: 16px;
    height: 16px;
    background: url(../images/icon_right.3d90fb78.svg) no-repeat 50%;
    background-size: contain;
}

.marker-images-upload {
    width: 60px;
    fill: #FFFFFF;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.marker-images-browsing {
    width: 60px;
    fill: #FFFFFF;
    color: #FFFFFF;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

.marker-images-upload:hover, .marker-images-browsing:hover {
    fill: var(--blue);
    color: var(--blue);
}

.map-marker-button-sure {
    height: 100%;
    width: 149px;
    color: var(--blue);
}

.map-marker-button-delete {
    height: 100%;
    width: 150px;
    color: var(--red900);
}

.map-marker-button-sure:hover, .map-marker-button-delete:hover {
    opacity: 0.8;
}

.marker-name-input {
    height: 20px; border: 0; padding: 0; outline: none; font-size: 14px; color: #525252;
}

.marker-name-input::placeholder {
    color: #929292;
}

.tt-modal-wrapper {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1000;
    overflow: hidden
}

.tt-modal-wrapper .modal-mask {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    background: rgba(0,0,0,.5);
    -webkit-transition: opacity .2s;
    -moz-transition: opacity .2s;
    transition: opacity .2s
}

.tt-modal-wrapper.modal-show {
    display: block
}

.tt-modal-wrapper.modal-hide {
    display: none
}

.tt-modal-wrapper.modal-animate-show .modal-mask {
    opacity: 1
}

.tt-modal-wrapper.modal-animate-show .tt-modal {
    top: 50%;
    opacity: 1;
    -webkit-transform: translate(-50%,-50%);
    -moz-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%)
}

.tt-modal-wrapper.modal-animate-hide .modal-mask {
    opacity: 0
}

.tt-modal-wrapper.modal-animate-hide .tt-modal {
    top: 47%;
    opacity: 0
}

.tt-modal-wrapper .tt-modal {
    position: absolute;
    top: 47%;
    left: 50%;
    -webkit-transform: translate(-50%,-47%);
    -moz-transform: translate(-50%,-47%);
    transform: translate(-50%,-47%);
    border-radius: 2px;
    width: 300px;
    background: #fff;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.3);
    box-shadow: 0 1px 3px rgba(0,0,0,.3);
    -webkit-transition: all .2s;
    -moz-transition: all .2s;
    transition: all .2s
}

.tt-modal-wrapper .tt-modal .tt-modal-header {
    padding: 20px 20px 0
}

.tt-modal-wrapper .tt-modal .tt-modal-title {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    color: #1f2d3d
}

.tt-modal-wrapper .tt-modal .tt-modal-close-btn {
    float: right;
    border: none;
    font-size: 0;
    background: none;
    color: #bfcdb9;
    cursor: pointer
}

.tt-modal-wrapper .tt-modal .tt-modal-close-btn:focus-visible {
    outline: auto
}

.tt-modal-wrapper .tt-modal .tt-modal-close-btn i {
    vertical-align: middle
}

.tt-modal-wrapper .tt-modal .tt-modal-body {
    padding: 20px 20px 0
}

.tt-modal-wrapper .tt-modal .tt-modal-footer-btn {
    display: inline-block;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    padding: 10px 20px 15px;
    width: 100%;
    text-align: right
}

.tt-modal-wrapper .tt-modal .tt-modal-footer-btn button {
    padding: 10px 15px;
    border: 1px solid #bfcbd9;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1;
    text-align: center;
    color: #1f2d3d;
    background: #fff;
    outline: none
}

.tt-modal-wrapper .tt-modal .tt-modal-footer-btn button:focus-visible {
    outline: auto
}

.tt-modal-wrapper .tt-modal .tt-modal-footer-btn .btn-sure {
    margin-left: 10px;
    border-color: var(--themeColor);
    background: var(--themeColor);
    color: #fff
}

.tt-modal-wrapper .tt-modal .tt-modal-footer-btn .btn-sure:hover {
    border-color: var(--themeColor);
    background: var(--themeColor);
}

.tt-modal-wrapper .tt-modal .tt-modal-footer-btn .btn-cancel:hover {
    color: var(--themeColor);
    border-color: var(--themeColor);
}

.tt-modal-body .report-modal-content .option {
    margin-bottom: 18px
}

.tt-modal-body .report-modal-content .option a,.tt-modal-body .report-modal-content .option label {
    font-size: 14px
}

.tt-modal-body .report-modal-content .option a {
    color: #1890ff;
    color: var(--themeColor);
}

.tt-modal-body .report-modal-content .option input {
    float: right;
    cursor: pointer
}

.tt-modal-body .report-modal-content .option input:focus-visible {
    outline: auto
}

.tt-modal-body .report-modal-content .option input[type="radio"]:checked {
    accent-color: #2196F3;
    accent-color: var(--themeColor);
}

.tt-modal-body .report-modal-content .option.other-reason {
    font-size: 14px
}

.tt-modal-body .report-modal-content .option.other-reason>button {
    margin-bottom: 8px;
    border: none;
    font-size: 14px;
    color: var(--themeColor);
    background: transparent;
    cursor: pointer;
    outline: none
}

.tt-modal-body .report-modal-content .option.other-reason>button:focus-visible {
    outline: auto
}

.tt-modal-body .report-modal-content .option.other-reason textarea {
    display: none;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #e9e9e9;
    border-radius: 4px;
    padding: 10px;
    width: 100%;
    height: 72px;
    font-size: 14px;
    color: #5d5d5d;
    outline: none;
    resize: none
}

.tt-modal-body .report-modal-content .option.other-reason i {
    display: inline-block;
    width: 12px;
    height: 12px;
    background: url(../images/icon_down.c794088d.svg) no-repeat 50%;
    background-size: contain
}

.tt-modal-body .report-modal-content .option.other-reason.open i {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    transform: rotate(180deg)
}

.tt-modal-body .report-modal-content .option.other-reason.open textarea {
    display: block;
}

.map-layer {
    height: 30px;
    width: 60px;
    color: #5186F5;
    color: var(--themeColor);
    cursor: pointer;
    background: #F8F8F8;
}

.map-layer:hover {
    opacity: 0.8;
}

.map-layer-active {
    background: #5186F5;
    background: var(--themeColor);
    color: #FFFFFF;
}

.logo {
    flex-shrink: 0;
    width: 100px;
    height: 28px;
    background: url(../images/icon-sui-you-txt-theme-color.svg) no-repeat 50%;
    background-size: contain;
}

.sy-interact-share {
    display: inline-block;
    position: relative;
    background: #fff
}

.sy-interact-share .share-btn {
    display: inline-block;
    position: relative;
    padding-top: 24px;
    font-size: 12px;
    line-height: 20px;
    color: #222;
    cursor: pointer;
    outline: none
}

.sy-interact-share .share-btn:focus-visible {
    outline: auto
}

.sy-interact-share .share-btn:hover {
    opacity: .8
}

.sy-interact-share .share-btn:before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABIBAMAAACnw650AAAAKlBMVEVHcEwhISEhISEgICAgICAhISEiIiIiIiIiIiIiIiIhISEhISEgICAiIiLvaEYqAAAADXRSTlMApN8gEMF/73CQQFkw2xS+1QAAAWdJREFUSMftlTFLw0AYhi+0Rq2OgoN0qmMDRXDv6OLqFhAcnJwcHKTgIDgJHVyFDDo4FBxdCv4BhwZiq/D+Fw80ua+57/J9OPfdkjy5e7hc3jNmlf/l6ExmWsn8VYRi4FOEIgBjDVQMFBB6Gmh+o4Ak918IDxooHyigZvcSanBvv+3+QWH3lwQuO/ww56Bh3WsM0GegO9Tjux96jO/eGfmQ537BMHX3GGz68kA198BAy+7TEETcWwnkodaCDArFbJgpZnObL26YbVhCB2ForFBauFUKKs2zitmWrY3ZlK0blpJW0LFsbcxEtLa5F61tHumjK87apuuQk6eIs7ZJq5dvXWEsDA8VmWuVZWv3VfKMVI9XTyltwIizrqBrWmJ+3Xfpzxpx1uU69Ugd5u8+NKV/fRQo1Q97/5Lsm9mQgdYtVJ1xHeA00Mpf7up5jy3UDWBfPAfbI8gnqkkLxQE++VZAW4rZVpHzA/2Awy7eroqsAAAAAElFTkSuQmCC) no-repeat 50%;
    background-size: contain
}

.sy-interact-share .share-tools {
    display: none;
    position: absolute;
    z-index: 10;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 1px solid #f2f2f2;
    border-radius: 8px;
    padding: 16px 0;
    width: 172px;
    text-align: left;
    background: #fff;
    -webkit-box-shadow: 0 10px 50px rgba(54,56,79,.11);
    box-shadow: 0 10px 50px rgba(54,56,79,.11)
}

.sy-interact-share .share-tools li:hover {
    background: #f8f8f8
}

.sy-interact-share .share-tools.pop-animate {
    display: block;
    opacity: 0;
    -webkit-animation-duration: .4s;
    -moz-animation-duration: .4s;
    animation-duration: .4s;
    -webkit-animation-timing-function: cubic-bezier(.3,1.3,.3,1);
    -moz-animation-timing-function: cubic-bezier(.3,1.3,.3,1);
    animation-timing-function: cubic-bezier(.3,1.3,.3,1);
    -webkit-animation-delay: .1s;
    -moz-animation-delay: .1s;
    animation-delay: .1s;
    -webkit-animation-fill-mode: forwards;
    -moz-animation-fill-mode: forwards;
    animation-fill-mode: forwards
}

.sy-interact-share .panel-right {
    left: 100%
}

.sy-interact-share .panel-right-bottom li:first-of-type, .sy-interact-share .panel-right-top li:last-of-type {
    position: relative
}

.sy-interact-share .panel-right-bottom li:first-of-type:before, .sy-interact-share .panel-right-top li:last-of-type:before {
    content: "";
    width: 5px;
    height: 20px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAA8BAMAAABLFv16AAAAKlBMVEU1NVE0NFXHx83y8vLw8PDX19vm5ujr6+2oqLbt7e3i4uX////09PT6+vqCsoV1AAAAC3RSTlMLCSnixkFskRysWOFCA1cAAADNSURBVCjPbdG9EYIwFAfwB2LOMuEcgDtbR6BwAAoGoHAACwawdAwKR0ifhj5wZ88yvrwPTsXX5Hf/hOQlgHPOQiodEfCFCuEEvKQFayl5atLr4osk+SgwCJopRvwq4fyS/QcPkOG4nz3QzC56CuC+eFph5sDoIiOvA+MUGSkgpCCBggQKEBwgiii4LYImCOoNhvC7+Kifl7rhekRWyqFO23BrY1Zaddp89nEdMJNgvTI8oiA9C1ej6PTp8DG5jOKgwF8g1SuuilZRbfCn3izhgSaCqmAvAAAAAElFTkSuQmCC) no-repeat 50%;
    background-size: contain;
    position: absolute;
    left: -5px
}

.sy-interact-share .panel-right-bottom li:first-of-type:hover:before, .sy-interact-share .panel-right-top li:last-of-type:hover:before {
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAA8BAMAAABLFv16AAAAJFBMVEU1NU41NVPHx83y8vLw8PDl5efX19vr6+3t7e2oqLb4+Pjz8/NaXuGyAAAACnRSTlMJCynixmlBkawc5b/JnAAAAMRJREFUKM9l0TEOgzAMBVAH9QAxhUrdkDr2CCzdWdi7sLOwcwTWHoA5U2a4XJ3Yn0plytOPQ+xAROSY2duaIYsDmBsyNVbCAzmXkx7JhOKXJWU01NF2qiinEp5RA15WYi/rbV+19rqtlAKeBfnwHhTjpijaoHhsilKCjBQk5CAhBwINBNVmeANdMLQnLOG/+AIU+OBxhS/sUkIbdDTmrFXrVQfEOL8BeQY+Nnt+Fn2oDhjxdBVQA3dAfoFhAnpgAJoT/BlffWyDxKxHR9wAAAAASUVORK5CYII=)
}

.sy-interact-share .panel-right-top {
    bottom: 0;
    -webkit-transform: translate(18px,23px);
    -moz-transform: translate(18px,23px);
    transform: translate(18px,23px)
}

.sy-interact-share .panel-right-top.pop-animate {
    -webkit-animation-name: pop-right-top;
    -moz-animation-name: pop-right-top;
    animation-name: pop-right-top
}

.sy-interact-share .panel-right-top li:last-of-type:before {
    bottom: 10px
}

.sy-interact-share .panel-right-bottom {
    top: 0;
    -webkit-transform: translate(18px,-23px);
    -moz-transform: translate(18px,-23px);
    transform: translate(18px,-23px)
}

.sy-interact-share .panel-right-bottom.pop-animate {
    -webkit-animation-name: pop-right-bottom;
    -moz-animation-name: pop-right-bottom;
    animation-name: pop-right-bottom
}

.sy-interact-share .panel-right-bottom li:first-of-type:before {
    top: 10px
}

.sy-interact-share .panel-top {
    bottom: 100%;
    left: 50%;
    -webkit-transform: translate(-50%,-10px);
    -moz-transform: translate(-50%,-10px);
    transform: translate(-50%,-10px);
    -webkit-transform-origin: center bottom;
    -moz-transform-origin: center bottom;
    transform-origin: center bottom
}

.sy-interact-share .panel-top.pop-animate {
    -webkit-animation-name: pop-top;
    -moz-animation-name: pop-top;
    animation-name: pop-top
}

.sy-interact-share .panel-top:after {
    content: "";
    position: absolute;
    bottom: -12px;
    left: 50%;
    -webkit-transform: translateX(-50%) rotate(-90deg);
    -moz-transform: translateX(-50%) rotate(-90deg);
    transform: translateX(-50%) rotate(-90deg);
    width: 5px;
    height: 20px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAA8BAMAAABLFv16AAAAKlBMVEU1NVE0NFXHx83y8vLw8PDX19vm5ujr6+2oqLbt7e3i4uX////09PT6+vqCsoV1AAAAC3RSTlMLCSnixkFskRysWOFCA1cAAADNSURBVCjPbdG9EYIwFAfwB2LOMuEcgDtbR6BwAAoGoHAACwawdAwKR0ifhj5wZ88yvrwPTsXX5Hf/hOQlgHPOQiodEfCFCuEEvKQFayl5atLr4osk+SgwCJopRvwq4fyS/QcPkOG4nz3QzC56CuC+eFph5sDoIiOvA+MUGSkgpCCBggQKEBwgiii4LYImCOoNhvC7+Kifl7rhekRWyqFO23BrY1Zaddp89nEdMJNgvTI8oiA9C1ej6PTp8DG5jOKgwF8g1SuuilZRbfCn3izhgSaCqmAvAAAAAElFTkSuQmCC) no-repeat 50%;
    background-size: contain;
}

.sy-interact-share .panel-bottom {
    top: 100%;
    left: 50%;
    -webkit-transform: translate(-50%,10px);
    -moz-transform: translate(-50%,10px);
    transform: translate(-50%,10px);
    -webkit-transform-origin: center top;
    -moz-transform-origin: center top;
    transform-origin: center top;
    -webkit-box-shadow: 0 10px 50px rgba(54,56,79,.08);
    box-shadow: 0 10px 50px rgba(54,56,79,.08)
}

.sy-interact-share .panel-bottom.pop-animate {
    -webkit-animation-name: pop-bottom;
    -moz-animation-name: pop-bottom;
    animation-name: pop-bottom
}

.sy-interact-share .panel-bottom:after {
    content: "";
    position: absolute;
    top: -12px;
    left: 50%;
    -webkit-transform: translateX(-50%) rotate(90deg);
    -moz-transform: translateX(-50%) rotate(90deg);
    transform: translateX(-50%) rotate(90deg);
    width: 5px;
    height: 20px;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAA8BAMAAABLFv16AAAAKlBMVEU1NVE0NFXHx83y8vLw8PDX19vm5ujr6+2oqLbt7e3i4uX////09PT6+vqCsoV1AAAAC3RSTlMLCSnixkFskRysWOFCA1cAAADNSURBVCjPbdG9EYIwFAfwB2LOMuEcgDtbR6BwAAoGoHAACwawdAwKR0ifhj5wZ88yvrwPTsXX5Hf/hOQlgHPOQiodEfCFCuEEvKQFayl5atLr4osk+SgwCJopRvwq4fyS/QcPkOG4nz3QzC56CuC+eFph5sDoIiOvA+MUGSkgpCCBggQKEBwgiii4LYImCOoNhvC7+Kifl7rhekRWyqFO23BrY1Zaddp89nEdMJNgvTI8oiA9C1ej6PTp8DG5jOKgwF8g1SuuilZRbfCn3izhgSaCqmAvAAAAAElFTkSuQmCC) no-repeat 50%;
    background-size: contain
}

.sy-interact-item {
    position: relative;
    padding-left: 52px;
    font-size: 14px;
    font-weight: 400;
    line-height: 40px;
    color: #222;
    cursor: pointer;
    outline: none;
}

.sy-interact-item:before {
    content: "";
    position: absolute;
    top: 50%;
    left: 16px;
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: transparent no-repeat 50%;
    background-size: contain;
}

.sy-interact-item.copy:before {
    background-image: url(../images/share/icon_copy.svg);
}
.sy-interact-item.wx:before {
    background-image: url(../images/share/icon_wx.svg);
}
.sy-interact-item.wb:before {
    background-image: url(../images/share/icon_wb.svg);
}
.sy-interact-item.qZone:before {
    background-image: url(../images/share/icon_qzone.svg);
}

.sy-interact-share .sy-interact-wx-wrapper .qrCode-panel {
    top: -30px
}

.sy-interact-wx-wrapper .qrCode-panel {
    position: absolute;
    left: 100%;
    -webkit-transform: translateX(4px);
    -moz-transform: translateX(4px);
    transform: translateX(4px);
    z-index: 10;
    border-radius: 8px;
    text-align: center;
    width: 139px;
    height: 168px;
    background: #fff;
    -webkit-box-shadow: 0 10px 50px rgba(54, 56, 79, .11);
    box-shadow: 0 10px 50px rgba(54, 56, 79, .11);
}

@-webkit-keyframes pop-right-top {
    0% {
        opacity: 0;
        -webkit-transform: translate(18px,23px) scale(.8);
        transform: translate(18px,23px) scale(.8)
    }

    to {
        opacity: 1;
        -webkit-transform: translate(18px,23px) scale(1);
        transform: translate(18px,23px) scale(1)
    }
}

@-moz-keyframes pop-right-top {
    0% {
        opacity: 0;
        -moz-transform: translate(18px,23px) scale(.8);
        transform: translate(18px,23px) scale(.8)
    }

    to {
        opacity: 1;
        -moz-transform: translate(18px,23px) scale(1);
        transform: translate(18px,23px) scale(1)
    }
}

@keyframes pop-right-top {
    0% {
        opacity: 0;
        -webkit-transform: translate(18px,23px) scale(.8);
        -moz-transform: translate(18px,23px) scale(.8);
        transform: translate(18px,23px) scale(.8)
    }

    to {
        opacity: 1;
        -webkit-transform: translate(18px,23px) scale(1);
        -moz-transform: translate(18px,23px) scale(1);
        transform: translate(18px,23px) scale(1)
    }
}

@-webkit-keyframes pop-right-bottom {
    0% {
        opacity: 0;
        -webkit-transform: translate(18px,-23px) scale(.8);
        transform: translate(18px,-23px) scale(.8)
    }

    to {
        opacity: 1;
        -webkit-transform: translate(18px,-23px) scale(1);
        transform: translate(18px,-23px) scale(1)
    }
}

@-moz-keyframes pop-right-bottom {
    0% {
        opacity: 0;
        -moz-transform: translate(18px,-23px) scale(.8);
        transform: translate(18px,-23px) scale(.8)
    }

    to {
        opacity: 1;
        -moz-transform: translate(18px,-23px) scale(1);
        transform: translate(18px,-23px) scale(1)
    }
}

@keyframes pop-right-bottom {
    0% {
        opacity: 0;
        -webkit-transform: translate(18px,-23px) scale(.8);
        -moz-transform: translate(18px,-23px) scale(.8);
        transform: translate(18px,-23px) scale(.8)
    }

    to {
        opacity: 1;
        -webkit-transform: translate(18px,-23px) scale(1);
        -moz-transform: translate(18px,-23px) scale(1);
        transform: translate(18px,-23px) scale(1)
    }
}

@-webkit-keyframes pop-top {
    0% {
        opacity: 0;
        -webkit-transform: translate(-50%,-10px) scale(.8);
        transform: translate(-50%,-10px) scale(.8)
    }

    to {
        opacity: 1;
        -webkit-transform: translate(-50%,-10px) scale(1);
        transform: translate(-50%,-10px) scale(1)
    }
}

@-moz-keyframes pop-top {
    0% {
        opacity: 0;
        -moz-transform: translate(-50%,-10px) scale(.8);
        transform: translate(-50%,-10px) scale(.8)
    }

    to {
        opacity: 1;
        -moz-transform: translate(-50%,-10px) scale(1);
        transform: translate(-50%,-10px) scale(1)
    }
}

@keyframes pop-top {
    0% {
        opacity: 0;
        -webkit-transform: translate(-50%,-10px) scale(.8);
        -moz-transform: translate(-50%,-10px) scale(.8);
        transform: translate(-50%,-10px) scale(.8)
    }

    to {
        opacity: 1;
        -webkit-transform: translate(-50%,-10px) scale(1);
        -moz-transform: translate(-50%,-10px) scale(1);
        transform: translate(-50%,-10px) scale(1)
    }
}

@-webkit-keyframes pop-bottom {
    0% {
        opacity: 0;
        -webkit-transform: translate(-50%,10px) scale(.8);
        transform: translate(-50%,10px) scale(.8)
    }

    to {
        opacity: 1;
        -webkit-transform: translate(-50%,10px) scale(1);
        transform: translate(-50%,10px) scale(1)
    }
}

@-moz-keyframes pop-bottom {
    0% {
        opacity: 0;
        -moz-transform: translate(-50%,10px) scale(.8);
        transform: translate(-50%,10px) scale(.8)
    }

    to {
        opacity: 1;
        -moz-transform: translate(-50%,10px) scale(1);
        transform: translate(-50%,10px) scale(1)
    }
}

@keyframes pop-bottom {
    0% {
        opacity: 0;
        -webkit-transform: translate(-50%,10px) scale(.8);
        -moz-transform: translate(-50%,10px) scale(.8);
        transform: translate(-50%,10px) scale(.8)
    }

    to {
        opacity: 1;
        -webkit-transform: translate(-50%,10px) scale(1);
        -moz-transform: translate(-50%,10px) scale(1);
        transform: translate(-50%,10px) scale(1)
    }
}

.sy-interact-wx-wrapper {
    position: relative
}

.sy-interact-wx-wrapper .qrCode-panel>span {
    display: block;
    margin-top: 21px;
    font-size: 14px;
    line-height: 20px;
    color: #222
}

.sy-interact-wx-wrapper #qrCode {
    margin: 30px auto 0;
    width: 80px;
    height: 80px
}