@charset "UTF-8";

@media only screen and (max-width: 560px) {
    .is-pc {
        display: none;
    }

    .popular-ranking {
        height: 200px;
        background: url(/img/v2/banner.png);
        text-align: center;
    }

    .popular-ranking-mask {
        height: 100%;
        background: rgba(19,19,19,0.35) 0% 0% no-repeat padding-box;
    }

    .popular-ranking .title {
        padding-top: 66px;
        color: #FFFFFF;
        font-size: 40px;
    }

    .popular-ranking .more {
        padding-top: 15px;
        box-sizing: border-box;
        color: #FFFFFF;
        font-size: 16px;
    }

    .popular-ranking .more .icon-arrow-right-L {
        color: #FFFFFF;
    }

    .popular-ranking .more-link:link {
        color: #FFFFFF;
    }

    .popular-ranking .more-link:visited {
        color: #FFFFFF;
    }

    .popular-ranking .more-link:hover {
        color: #FFFFFF;
    }

    .popular-ranking .more-link:active {
        color: #FFFFFF;
    }

    .highlighted-photos {
        margin: 40px auto 0;
    }

    .highlighted-photos .title {
        height: 24px;
        text-align: left;
        color: #131313;
        font-size: 24px;
        margin-top: 40px;
        margin-left: 24px;
        font-weight: 600;
    }

    .highlighted-photos .title a {
        text-decoration: none;
        display: flex;
        line-height: 20px;
        width: max-content;
    }

    .highlighted-photos .title a p {
        padding-right: 10px;
    }

    .highlighted-photos .title a:hover p {
        color: #EE3E75;
    }

    .highlighted-photos .title a:hover span.icon-arrow-right-db {
        background-color: #EE3E75;
    }

    .highlighted-photos ul {
        width: 100%;
        display: flex;
        /*display: -webkit-box;*/
        overflow-x: auto;
        /*for Apple*/
        -webkit-overflow-scrolling: touch;
    }

    .highlighted-photos ul::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    .highlighted-photos li {
        margin-top: 32px;
        height: 300px;
        float: left;
        margin-left: 24px;
        list-style: none;
        position: relative;
        overflow-y: hidden;
    }

    /* .highlighted-photos .first-li {
        margin-left: 24px;
    } */

    .highlighted-photos li .thumbnail {
        width: 278px;
        height: 295px;
        object-fit: cover;
    }

    .highlighted-photos li:hover .cover {
        display: none;
    }

    .highlighted-photos li .cover {
        display: none;
        width: 278px;
        height: 295px;
        top:0;
        left: 0;
        position: absolute;
        background: transparent linear-gradient(180deg, rgba(19,19,19,0) 0%, rgba(19,19,19,154) 100%);
        /*background: transparent -moz-linear-gradient(top, rgba(19,19,19,0) 0%, rgba(19,19,19,154) 100%);*/
        /*background: transparent -ms-linear-gradient(top, rgba(19,19,19,0) 0%, rgba(19,19,19,154) 100%)*/
        /*background: transparent -webkit-linear-gradient(180deg, rgba(19,19,19,0) 0%, rgba(19,19,19,154) 100%);*/
        /*filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#00131313", endColorstr="#9A131313", gradientType=0);*/
    }

    .highlighted-photos li .cover .photo-count {
        color: #FFFFFF;
        font-size: 16px;
        margin: 180px auto 0 auto;
        display: flex;
        justify-content: space-around;
        width: 110px;
        text-align: center;
    }
    .highlighted-photos li .cover .photo-count >span, .highlighted-photos li .cover .heart-count>span{
        color: #FFFFFF;
    }
    .highlighted-photos li .cover .heart-count {
        color: #FFFFFF;
        font-size: 16px;
        margin: 20px auto 0 auto;
        display: flex;
        justify-content: space-around;
        width: 110px;
        height: 16px;
        text-align: center;
    }

    .highlighted-photos li .add {
        top: 12px;
        right: 12px;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 0.8;
        position: absolute;
        height: 32px;
        width: 32px;
        border-radius: 50%;
    }

    .highlighted-photos li .add .icon-plus {
        margin: 8px 8px;
        position: absolute;
    }

    .highlighted-photos li .add:hover {
        opacity: 1;
    }

    .highlighted-photos li .photo-name {
        position: absolute;
        margin-top: -36px;
        width: 278px;
        height: 16px;
        text-align: center;
        font-size: 16px;
        color: #FFFFFF;
    }

    .highlighted-photos .left {
        position: absolute;
        margin-top: 166px;
        width: 40px;
        height: 40px;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 0.30000001192092896px solid #8E8E8E;
        border-radius: 50%;
        opacity: 1;
        z-index: 1;
    }

    .highlighted-photos .left .icon-arrow-left {
        margin: 12px 14px;
        position: absolute;
    }

    .highlighted-photos .right .icon-arrow-right {
        margin: 12px 14px;
        position: absolute;
    }

    .highlighted-photos .right {
        position: absolute;
        right: 0;
        top: 20px;
        margin-top: 304px;
        margin-left: 1184px;
        width: 40px;
        height: 40px;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        border: 0.30000001192092896px solid #8E8E8E;
        border-radius: 50%;
        opacity: 1;
        z-index: 1;
    }

    .highlighted-photos .more {
        width: auto;
        height: 48px;
        font-size: 16px;
        margin: 24px 24px 0;
        text-align: center;
        color: #EE3E75;
        border: 1px solid #EE3E75;
        border-radius: 4pt;
        line-height: 3;
    }

    .highlighted-photos .more .icon-arrow-right-L {
        font-size: 0;
        color: #EE3E75;
    }

    .daily-ranking {
        margin: 56px auto 0;
        width: auto;
        height: auto;
    }

    .daily-ranking .title {
        margin-top: 40px;
        margin-left: 24px;
        height: 24px;
        color: #131313;
        font-size: 24px;
    }

    .daily-ranking .title a {
        text-decoration: none;
        display: flex;
        line-height: 20px;
        width: max-content;
    }

    .daily-ranking .title a p {
        padding-right: 10px;
    }

    .daily-ranking .title a:hover p {
        color: #EE3E75;
    }

    .daily-ranking .title a:hover span.icon-arrow-right-db {
        background-color: #EE3E75;
    }

    .daily-ranking li {
        width: 175px;
        height: 180px;
        margin: 32px 0 0 20px;
        float: left;
        list-style: none;
    }

    .daily-ranking .first-li {
        margin-left: 24px;
    }

    .daily-ranking li .thumbnail {
        width: 175px;
        height: 180px;
        object-fit: cover;
    }

    .daily-ranking li:hover .cover {
        display: none;
    }

    .daily-ranking li .cover {
        display: none;
        width: 175px;
        height: 180px;
        margin-top: -242px;
        margin-left: 0px;
        position: absolute;
        background: transparent linear-gradient(180deg, rgba(19,19,19,0) 0%, rgba(19,19,19,154) 100%);
        /*background: transparent -moz-linear-gradient(top, rgba(19,19,19,0) 0%, rgba(19,19,19,154) 100%);*/
        /*background: transparent -ms-linear-gradient(top, rgba(19,19,19,0) 0%, rgba(19,19,19,154) 100%)*/
        /*background: transparent -webkit-linear-gradient(180deg, rgba(19,19,19,0) 0%, rgba(19,19,19,154) 100%);*/
        /*filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#00131313", endColorstr="#9A131313", gradientType=0);*/
    }

    .daily-ranking li .cover .photo-count {
        color: #FFFFFF;
        font-size: 16px;
        margin-top: 130px;
        margin-left: 55px;
        width: 110px;
        height: 16px;
        text-align: center;
    }

    .daily-ranking li .cover .heart-count {
        color: #FFFFFF;
        font-size: 16px;
        margin-top: 20px;
        margin-left: 55px;
        width: 110px;
        height: 16px;
        text-align: center;
    }

    .daily-ranking li .rank {
        color: #FFFFFF;
        top:0;
        left: 0;
        background: #EE3E75 0% 0% no-repeat padding-box;
        position: absolute;
        height: 32px;
        width: 32px;
        text-align: center;
        font-size: 16px;
        line-height: 2;
    }

    .daily-ranking li .add {
        top: 6px;
        right: 6px;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 0.8;
        position: absolute;
        height: 32px;
        width: 32px;
        border-radius: 50%;
    }

    .daily-ranking li .add:hover {
        opacity: 1;
    }

    .daily-ranking li .add .icon-plus {
        margin: 8px 8px;
        position: absolute;
    }

    .daily-ranking li .nickname {
        position: absolute;
        margin-top: -36px;
        width: 175px;
        height: 16px;
        text-align: center;
        font-size: 16px;
        color: #FFFFFF;
    }

    .daily-ranking .more {
        /*width: 100%;*/
        height: 20px;
        text-align: center;
        margin-top: 100px;
        font-size: 16px;
    }

    .daily-ranking .more a {
        font-family: HiraginoKakuGothicProW6, Helvetica, sans-serif;
    }

    .daily-ranking .more .icon-arrow-right-L {
        color: #EE3E75;
        font-size: 16px;
        margin-left: 12px;
    }

    .ad1 {
        display: none;
        border: 1px solid #8E8E8E;
        margin: 48px auto 0 24px;
        float: left;
    }

    .user-ranking {
        width:100%;
        height: auto;
        float: left;
        margin: 48px auto 0;
        background: #FFF4F7 0% 0% no-repeat padding-box;
    }

    .user-ranking-group {
        width: auto;
        height: auto;
        margin: auto;
    }

    .user-ranking .title {
        width: 216px;
        height: 24px;
        margin: 48px 0 0 24px;
        font-size: 24px;
        float: left;
        color: #131313;
    }

    .user-ranking .title a {
        text-decoration: none;
        display: flex;
        line-height: 20px;
        width: max-content;
    }

    .user-ranking .title a p {
        padding-right: 10px;
    }

    .user-ranking .title a:hover p {
        color: #EE3E75;
    }

    .user-ranking .title a:hover span.icon-arrow-right-db {
        background-color: #EE3E75;
    }

    .user-ranking ul {
        width: 100%;
        height: auto;
        float: left;
        margin: 8px 24px 24px;
    }

    .user-ranking li {
        width: 104px;
        height: 171px;
        float: left;
        margin-right: 27px;
        margin-top: 24px;
        list-style: none;
    }

    .user-ranking .right-li {
        margin-right: 24px;
        text-align: center;
        padding-left: 5px;
        box-sizing: border-box;
    }

    .user-ranking .avatar {
        width: 104px;
        height: 104px;
    }

    .user-ranking li .rank {
        color: #FFFFFF;
        margin-top: 0px;
        margin-left: 0px;
        background: #EE3E75 0% 0% no-repeat padding-box;
        position: absolute;
        height: 24px;
        width: 24px;
        text-align: center;
        font-size: 12px;
        border-radius: 50%;
        z-index: 1;
        line-height: 2;
    }

    .user-ranking li .thumbnail {
        width: 104px;
        height: 104px;
        border-radius: 50px;
        object-fit: cover;
    }

    .user-ranking li .avatar:hover .user-cover {
        display: none;
    }

    .user-ranking li .user-cover {
        display: none;
        width: 104px;
        height: 104px;
        margin-top: -106px;
        margin-left: 0px;
        position: absolute;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 0.3;
        border-radius: 50px;
    }

    .user-ranking li .icon-flag {
        margin-top: -36px;
        margin-left: 72px;
        position: absolute;
        height: 32px;
        width: 32px;
        border-radius: 50%;
        z-index: 1;
    }

    .user-ranking li .flag {
        width: 32px;
        height: 32px;
        margin-top: -36px;
        margin-left: 72px;
        position: absolute;
        border-radius: 50%;
        overflow: hidden;
    }

    .user-ranking li .flag img{
        width: 43px;
        height: 43px;
        margin-top: -3px;
        margin-left: -3px;
    }

    .user-ranking li .flag:hover .flag-cover {
        display: none;
    }

    .user-ranking li .flag-cover {
        display: none;
        width: 32px;
        height: 32px;
        margin-top: -36px;
        margin-left: 72px;
        position: absolute;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 0.3;
        border-radius: 50px;
        z-index: 1;
    }

    .user-ranking li .nickname {
        height: 11px;
        font-size: 11px;
        color: #8E8E8E;
        margin: 12px 0 12px 0;
        text-align: center;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .user-ranking li button {
        width: 104px;
        height: 32px;
        background: #EE3E75 0% 0% no-repeat padding-box;
        border-radius: 4px;
        border: 1px solid #EE3E75;
        color: #FFFFFF;
        font-size: 12px;
    }

    .user-ranking li .followed {
        width: 104px;
        height: 32px;
        background: #FFF4F7 0% 0% no-repeat padding-box;
        border-radius: 4px;
        border: 1px solid #EE3E75;
        color: #EE3E75;
    }

    .user-ranking li .followed:hover {
        background: #FFEBF2 0% 0% no-repeat padding-box;
    }

    .user-ranking li button:hover {
        background: #D82059 0% 0% no-repeat padding-box;
    }

    .user-ranking .more {
        width: auto;
        height: 48px;
        font-size: 16px;
        text-align: center;
        margin: 0 24px 48px;
        color: #EE3E75;
        border: 1px solid #EE3E75;
        border-radius: 4pt;
        clear: left;
        line-height: 3;
    }

    .user-ranking .more .icon-arrow-right-L {
        color: #EE3E75;
        font-size: 0;
        margin-left: 12px;
    }

    .highlighted-collection {
        float: left;
        height: auto;
        margin: 48px auto 0 24px;
        width: 100%;
    }

    .highlighted-collection .title {
        width: 216px;
        height: 24px;
        text-align: left;
        color: #131313;
        margin-bottom: 8px;
        font-size: 24px;
        /*float: left;*/
    }

    .highlighted-collection .title a {
        text-decoration: none;
        display: flex;
        line-height: 20px;
        width: max-content;
    }

    .highlighted-collection .title a p {
        padding-right: 10px;
    }

    .highlighted-collection .title a:hover p {
        color: #EE3E75;
    }

    .highlighted-collection .title a:hover span.icon-arrow-right-db {
        background-color: #EE3E75;
    }

    .highlighted-collection li {
        width: 175px;
        height: 180px;
        /*margin: 24px 16px 0 auto;*/
        margin: 24px 0 0 16px;
        float: left;
        list-style: none;
    }

    .highlighted-collection li .thumbnail {
        width: 175px;
        height: 180px;
        object-fit: cover;
    }

    .highlighted-collection li .mask {
        float: left;
        width: 175px;
        height: 180px;
        margin-top: -182px;
        margin-left: 0px;
        position: absolute;
        background: rgba(19,19,19,0.5) 0% 0% no-repeat padding-box;
    }

    .highlighted-collection li .collection-logo {
        width: 92px;
        height: 17px;
        margin: 16px auto 0;
        color: #FFFFFF;
        font-size: 16px;
        background: url("/img/v2/collection-logo.svg") no-repeat;
    }

    .highlighted-collection li .name {
        height: 17px;
        margin: 55px auto 0;
        color: #FFFFFF;
        font-size: 16px;
        text-align: center;
    }

    .highlighted-collection li:hover .cover {
        display: none;
    }

    .highlighted-collection li .cover {
        display: none;
        width: 175px;
        height: 180px;
        margin-top: -182px;
        margin-left: 0px;
        position: absolute;
        background: transparent linear-gradient(180deg, #13131300 0%, #131313 100%) 0% 0% no-repeat padding-box;
    }

    .highlighted-collection li .cover .photo-count {
        color: #FFFFFF;
        font-size: 16px;
        margin-top: 180px;
        margin-left: 55px;
        width: 110px;
        height: 16px;
        text-align: center;
    }

    .highlighted-collection .more {
        width: 102px;
        float: left;
        margin: 106px auto 0 53px;
        height: 16px;
        text-align: center;
        color: #EE3E75;
        font-size: 16px;
    }

    .highlighted-collection .more .icon-arrow-right-L {
        color: #EE3E75;
        font-size: 16px;
        margin-left: 12px;
    }

    .new-post {
        width: auto;
        height: auto;
        margin: 48px auto 0;
    }

    .new-post ul {
        margin: 0 24px 24px;
        float: left;
    }

    .new-post .title {
        width: 120px;
        height: 24px;
        text-align: left;
        color: #131313;
        font-size: 24px;
        margin: 0 auto 8px 24px;
    }

    .new-post .title a {
        text-decoration: none;
        display: flex;
        line-height: 20px;
        width: max-content;
    }

    .new-post .title a p {
        padding-right: 10px;
    }

    .new-post .title a:hover p {
        color: #EE3E75;
    }

    .new-post .title a:hover span.icon-arrow-right-db {
        background-color: #EE3E75;
    }

    .new-post li {
        width: 175px;
        height: 180px;
        margin: 24px 16px 0 0;
        background: transparent linear-gradient(180deg, #13131300 0%, #1313139A 100%) 0% 0% no-repeat padding-box;
        list-style: none;
        float: left;
    }

    .new-post .third-li {
        margin-left: 0;
    }

    .new-post li .thumbnail {
        width: 175px;
        height: 180px;
        object-fit: cover;
    }

    .new-post li:hover .cover {
        display: none;
    }

    .new-post li .cover {
        display: none;
        width: 175px;
        height: 180px;
        margin-top: -182px;
        margin-left: 0px;
        position: absolute;
        background: transparent linear-gradient(180deg, rgba(19,19,19,0) 0%, rgba(19,19,19,154) 100%);
        /*background: transparent -moz-linear-gradient(top, rgba(19,19,19,0) 0%, rgba(19,19,19,154) 100%);*/
        /*background: transparent -ms-linear-gradient(top, rgba(19,19,19,0) 0%, rgba(19,19,19,154) 100%)*/
        /*background: transparent -webkit-linear-gradient(180deg, rgba(19,19,19,0) 0%, rgba(19,19,19,154) 100%);*/
        /*filter: progid:DXImageTransform.Microsoft.Gradient(startColorstr="#00131313", endColorstr="#9A131313", gradientType=0);*/
    }

    .new-post li .cover .photo-count {
        color: #FFFFFF;
        font-size: 16px;
        margin-top: 100px;
        margin-left: 35px;
        width: 110px;
        height: 16px;
        text-align: center;
    }

    .new-post li .cover .heart-count {
        color: #FFFFFF;
        font-size: 16px;
        display: flex;
        justify-content: space-around;
        margin: 20px auto 0 auto;
        width: 110px;
        height: 16px;
        text-align: center;
    }
    .new-post li .cover .heart-count>span{
        color: #FFFFFF;
    }
    .new-post li .add {
        top: 6px;
        right: 6px;
        background: #FFFFFF 0% 0% no-repeat padding-box;
        opacity: 0.8;
        position: absolute;
        height: 32px;
        width: 32px;
        border-radius: 50%;
    }

    .new-post li .add:hover {
        opacity: 1;
    }

    .new-post li .add .icon-plus {
        margin: 8px 8px;
        position: absolute;
    }

    .new-post .more {
        width: auto;
        height: 48px;
        font-size: 16px;
        margin: 0 24px;
        text-align: center;
        color: #EE3E75;
        border: 1px solid #EE3E75;
        border-radius: 4pt;
        clear: left;
        line-height: 3;
    }

    .new-post .more .icon-arrow-right-L {
        color: #EE3E75;
        font-size: 0;
        margin-left: 12px;
    }

    .ad2 {
        display: none;
        border: 1px solid #8E8E8E;
        margin: 48px auto 0 24px;
        float: left;
    }

    .ranking {
        width: 100%;
        height: auto;
        background: #F8F8F8 0% 0% no-repeat padding-box;
        margin: 48px auto 0;
        float: left;
    }

    .ranking-group .ranking-tab {
        display: -webkit-box;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin: 24px auto 24px 24px;
        line-height: 3.5;
    }

    .ranking-group ul::-webkit-scrollbar {
        width: 0;
        height: 0;
        display: none;
    }

    .ranking .title {
        width: 150px;
        height: 24px;
        margin-left: 24px;
        color: #131313;
        font-size: 24px;
        margin-top: 48px;
    }

    .ranking .title a {
        text-decoration: none;
        display: flex;
        line-height: 20px;
        width: max-content;
    }

    .ranking .title a p {
        padding-right: 10px;
    }

    .ranking .title a:hover p {
        color: #EE3E75;
    }

    .ranking .title a:hover span.icon-arrow-right-db {
        background-color: #EE3E75;
    }

    .ranking .ranking-tab li {
        min-width: 150px;
        height: 40px;
        background: #F4F4F4 0% 0% no-repeat padding-box;
        border: 1px solid #8E8E8E;
        border-radius: 100pt;
        margin: 0 8px 0 0;
        list-style: none;
        text-align: center;
        font-size: 12px;
        padding-top: 0px;
        color: #8E8E8E;
        white-space: nowrap;
    }

    .ranking .ranking-tab .last-li {
        padding-left: 24px;
        padding-right: 24px;
    }

    .ranking .ranking-tab .void-li {
        display: none;
    }

    .ranking .ranking-tab .active {
        background: #F4F4F4 0% 0% no-repeat padding-box;
        border: 2px solid #4A4A4A;
        color: #4A4A4A;
    }

    .ranking .ranking-list {
        background: #FFFFFF 0% 0% no-repeat padding-box;
        width: 100%;
        height: auto;
        float: left;
        border: none;
        margin-bottom: 24px;
    }

    .ranking .high-ranking-list {
        width: 100%;
        height: auto;
        float: left;
        list-style: none;
        margin-top: 24px;
        padding: 0 24px;
        box-sizing: border-box;
    }

    .ranking .high-ranking-list a,.ranking .low-ranking-list a{
        text-decoration: none;
    }

    /*.ranking .high-ranking-list li,.ranking .low-ranking-list li{*/
        /*display: flex;*/
        /*align-items: center;*/
    /*}*/

    .ranking .high-ranking-list li {
        display: flex;
        width: auto;
        height: 80px;
        margin-top: 16px;
    }

    .ranking .low-ranking-list {
        height: auto;
        float: left;
        list-style: none;
        width: 100%;
        padding: 0 24px;
        box-sizing: border-box;
        margin-bottom: 24px;
    }

    .ranking .low-ranking-list .rank-6 {
        margin-top: 16px;
    }

    .ranking .low-ranking-list li {
        display: flex;
        width: auto;
        height: 80px;
        margin-top: 16px;
    }

    .ranking .low-ranking-list .ranking-info {
        margin-top:12px;
    }

    .ranking .high-ranking-list .ranking-info {
        margin-top:12px;
    }

    .ranking .high-ranking-list .thumbnail {
        width: 80px;
        height: 80px;
        margin-right: 10px;
        border-radius: 50%;
        object-fit: cover;
        display: block;
    }

    .ranking .low-ranking-list .thumbnail {
        width: 80px;
        height: 80px;
        margin-right: 10px;
        border-radius: 50%;
        object-fit: cover;
    }

    .ranking .ranking-info {
        width: 100%;
        height: auto;
        margin-top: 0;
        margin-left: 0;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .ranking .ranking-text {
        color: #EE3E75;
        font-size: 12px;
        width: 100%;
    }

    .ranking .num {
        color: #EE3E75;
        font-size: 20px;
        margin-right: 4px;
    }

    .ranking .ranking-list .name {
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
        margin-top: 12px;
        font-size: 16px;
        color: #131313;
        height: 25px;
    }

    .ranking .more {
        width: auto;
        height: 48px;
        font-size: 16px;
        margin: 0 24px 24px;
        text-align: center;
        color: #EE3E75;
        border: 1px solid #EE3E75;
        border-radius: 4pt;
        clear: left;
        line-height: 3;
    }

    .ranking .more .icon-arrow-right-L {
        color: #EE3E75;
        font-size: 0;
        margin-left: 12px;
    }

    .news {
        float: left;
        width: auto;
        height: auto;
        margin: 48px 24px 51px;
    }

    .news .title {
        width: 120px;
        height: 24px;
        color: #131313;
        font-size: 24px;
        padding-left: 0 !important;
    }

    .news .title a {
        text-decoration: none;
        display: flex;
        line-height: 20px;
        width: max-content;
    }

    .news .title a p {
        padding-right: 10px;
    }

    .news .title a:hover p {
        color: #EE3E75;
    }

    .news .title a:hover span.icon-arrow-right-db {
        background-color: #EE3E75;
    }

    .news li {
        width: auto;
        height: 114px;
        list-style: none;
        margin-top: 0;
        border-top: 1px solid #C4C4C4;
    }

    .news a:link {
        text-decoration: none;
    }

    .news a:visited {
        text-decoration: none;
    }

    .news .subject {
        width: 88%;
        height: 45px;
        text-align: left;
        color: #363E57;
        margin-top: 25px;
        margin-left: 16px;
        font-size: 15px;
        overflow:hidden;
        text-overflow:ellipsis;
        display:-webkit-box;
        -webkit-box-orient:vertical;
        -webkit-line-clamp:2;
        font-family: sans-serif;
    }

    .news .createdAt {
        height: 14px;
        text-align: left;
        color: #8D8D8D;
        margin-top: 12px;
        margin-left: 16px;
        font-size: 14px;
    }

    .news .more {
        width: 311px;
        height: 51px;
        padding-top: 41px;
        text-align: center;
        color: #EE3E75;
        font-size: 16px;
    }

    .news .more .icon-arrow-right-L {
        color: #EE3E75;
        font-size: 16px;
        margin-left: 12px;
    }

    .news li .icon-arrow-right {
        position: absolute;
        right: 32px;
        margin-top: 45px;
        color: #8E8E8E;
        font-size: 17px;
    }

    .news li a:link {
        text-decoration: none;
    }

    .news li a:visited {
        text-decoration: none;
    }

    .news li a:hover {
        text-decoration: underline;
    }

    .news li a:active {
        text-decoration: underline;
    }

    .more-link:link {
        color: #EE3E75;
        text-decoration: none;
    }

    .more-link:visited {
        color: #EE3E75;
        text-decoration: none;
    }

    .more-link:hover {
        color: #EE3E75;
        text-decoration: underline;
    }

    .more-link:active {
        color: #EE3E75;
        text-decoration: underline;
    }
    /* 新修改样式 */
    .highlighted-photos ul{
        margin-right: 24px;
    }
    .highlighted-photos .title,.daily-ranking .title,.user-ranking .title,.highlighted-collection .title,.new-post .title, .ranking-group .title, .news .title{
        height: auto;
        width: 90%;
        margin-left: 0;
        padding-left: 24px;
        box-sizing: border-box;
        font-family: HiraginoKakuGothicProW6, Helvetica, sans-serif;
        font-weight: 600;
    }
    .daily-ranking .first-li{
        margin-left: 0;
    }
    .daily-ranking{
        width: 100%;
    }
    .daily-ranking>ul{
        display: inline-block;
        width: 100%;
        padding-left: 24px;
        box-sizing: border-box;
    }
    .daily-ranking>ul>div{
        display: inline-block;
        width: 50%;
        padding-right: 24px;
        box-sizing: border-box;
        float: left;
    }
    .daily-ranking li{
        width: 100%;
        margin:32px 0 0 0;
        position: relative;
    }
    .daily-ranking li .thumbnail{
        width: 100%;
    }
    .daily-ranking li .nickname{
        margin-top: 0;
        width: 100%;
        height: auto;
        bottom: 16px;
    }
    .daily-ranking li .heart{
        margin-top: 0;
        margin-left: 0;
        top:10px;
        right: 10px;
    }
    .daily-ranking li .cover{
        width: 100%;
        margin-top: 0;
        top:0;
        right: 0;
        left: 0;
        bottom: 0;
        z-index: 1;
    }
    .daily-ranking li .cover .photo-count,.daily-ranking li .cover .heart-count{
        margin: 20px auto 0 auto;
        height: auto;
        text-align: left;
    }
    .daily-ranking li .cover .photo-count{
        margin-top: 70px;
    }
    .daily-ranking li .cover span{
        color: #FFFFFF;
    }
    .daily-ranking li .cover .num{
        float: right;
    }
    .more>.more-link{
        color: #EE3E75;
    }
    .user-ranking ul{
        margin: 8px 0 24px 0;
        padding-left: 24px;
        box-sizing: border-box;
    }
    .user-ranking li{
        width:33.33%;
        /*height: auto;*/
        padding-right: 24px;
        box-sizing: border-box;
        margin-right: auto;
    }
    .user-ranking li .thumbnail{
        width: 100%;
        height: 100%;
    }
    .user-ranking li .nickname{
        height: auto;
        padding: 12px 0 12px 0;
        box-sizing: border-box;
        margin: 0;
        width: 100%;
    }
    .user-ranking li .icon-flag{
        margin-top: 0;
        margin-left:0;
        bottom: -6px;
        right: -6px;
    }
    .user-ranking li .followed,.user-ranking li button{
        width: 100%;
    }
    .highlighted-collection{
        margin: 48px auto 48px;
    }
    .highlighted-collection>ul{
        display: inline-block;
        padding-left: 24px;
        box-sizing: border-box;
    }
    .highlighted-collection>ul>a{
        display: inline-block;
        width: 50%;
        padding-right: 24px;
        box-sizing: border-box;
    }
    .highlighted-collection li{
        position: relative;
        width: 100%;
        margin: 24px 0 0 0;
    }
    .highlighted-collection li .thumbnail{
        width: 100%;
    }
    .highlighted-collection li .mask{
        width: 100%;
        margin-top: 0;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .highlighted-collection li .cover{
        width: 100%;
        margin-top:0;
        top:0;
        bottom: 0;
        left: 0;
        right: 0;
    }
    .highlighted-collection li .cover .photo-count{
        margin:90px auto 0 auto;
        text-align: left;

    }
    .highlighted-collection li .cover .photo-count>span{
        color: #FFFFFF;
    }
    .highlighted-collection li .cover .photo-count>.num{
        float: right;
    }
    .highlighted-collection .more{
        height:180px;
        line-height: 180px;
        margin:0;
        width: 100%;
        text-align: center;
    }
    .new-post ul{
        width: 100%;
        padding-left: 24px;
        box-sizing: border-box;
        margin:0;
        margin-bottom: 24px;
    }
    .new-post ul>div{
        display: inline-block;
        width: 50%;
        padding-right: 24px;
        box-sizing: border-box;
        float: left;
    }
    .new-post li{
        position: relative;
        width:100%;
        margin:24px 0 0 0;
    }
    .new-post li .thumbnail{
        width: 100%;
    }
    .new-post li .heart{
        margin-top: 0;
        margin-left: 0;
        top:10px;
        right: 10px;
    }
    .new-post li .cover{
        margin-top: 0;
        width: 100%;
        top: 0;
        left: 0;
    }
    .new-post li .cover .photo-count,.new-post li .cover .heart-count{
        margin: 20px auto 0 auto;
        height: auto;
        text-align: left;
    }
    .new-post li .cover .photo-count{
        display: flex;
        justify-content:space-around;
        margin-top: 70px;
    }
    .new-post li .nickname {
        position: absolute;
        width: 100%;
        bottom: 16px;
        text-align: center;
        font-size: 16px;
        color: #FFFFFF;
    }
    .new-post li .cover span{
        color: #FFFFFF;
    }
    .new-post li .cover .num{
        float: right;
    }
    .tab-content{
        display: inline-block;
        width: 100%;
        padding: 0 24px;
        box-sizing: border-box;
    }

    .news{
        width: 100%;
        padding:48px 24px 23px 24px;
        box-sizing: border-box;
        margin: 0;
    }
    .news .more{
        width: 100%;
    }
    .shuffling{
        width: 300px;
        height: auto;
        font-size: 16px;
        border: none;
        margin: 56px auto 0;
    }
    .shuffling>.ad_top{
        width: 100%;
        height:250px;
        border: 1px solid #8E8E8E;
    }
    .shuffling .ad_pc {
        display: none;
    }
    .user-ranking .right-li{
        margin-right: 0;
    }
    .user-ranking .avatar{
        position: relative;
    }
    /* Banner top */
    .top-banner {
        width: 100%;
        height: auto;
    }

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

    .top-banner .home-new {
        width: 100%;
        height: auto;
        display: flex;
        flex-direction: column;
        padding: 15px 0;
        border: 0.5px solid #C4C4C4;
        background: #F8F8F8 0% 0% no-repeat padding-box;
        border-top: none;
    }

    .top-banner .home-new .wrap {
        padding: 0px 12px;
    }

    .top-banner .home-new p {
        padding: 5px 10px;
    }

    .top-banner .home-new .new-information {
        height: auto;
        color: #EE3E75;
        font-size: 14px;
    }

    .top-banner .home-new a {
        display: flex;
        font-size: 16px;
        text-decoration: none;
        line-height: 16px;
    }

    .top-banner .home-new a.new-link:hover .new-title {
        color: #EE3E75;
    }

    .top-banner .home-new a.new-link:hover span.icon-arrow-right:before {
        color: #EE3E75;
    }

    .top-banner .home-new .new-title {
        height: auto;
        display: block;
        max-width: 70%;
        white-space: nowrap;
        overflow: hidden !important;
        text-overflow: ellipsis;
    }

    .top-banner .home-new span.icon-arrow-right:before {
        line-height: 28px;
    }

    .header-nav-sp ul.wrap {
        flex-wrap: nowrap;
        display: flex;
        justify-content: center;
        line-height: 20px;
    }

    .ml-auto {
        margin-left: auto;
    }

    .header-nav-sp ul a.link {
        padding: 25px;
    }

    .header-nav-sp li {
        list-style: none;
    }

    .header-nav-sp .nav-container .link {
        padding: 25px;
    }

    .header-nav-sp .nav-container .link:hover {
        background: #F4F4F4 0% 0% no-repeat padding-box;
        border-radius: 4px;
        opacity: 1;
    }

    .header-nav-sp .nav-container .link img {
        padding-left: 5px;
    }

    .header-nav-sp .nav-container .link .option {
        display: none;
        width: 100px;
        height: 288px;
        background: #FFFFFF;
        position: absolute;
        margin-left: 0px;
        text-align: left;
        z-index: 99;
        line-height: 0;
    }

    .header-nav-sp .nav-container .link .option .language {
        width: 84px;
        height: 18px;
        line-height: 18px;
        color: #4A4A4A;
        font-size: 12px;
        padding: 3px 8px;
        list-style: none;
    }

    .header-nav-sp .nav-container .link .option a:link {
        color: #4A4A4A;
        text-decoration: none;
    }

    .header-nav-sp .nav-container .link .option a:visited {
        color: #4A4A4A;
        text-decoration: none;
    }

    .header-nav-sp .nav-container .link .option a:hover li {
        color: #4A4A4A;
        text-decoration: none;
        background: #F4F4F4;
    }

    .header-nav-sp .nav-container .edit .option {
        display: none;
        width: 100px;
        height: 288px;
        background: #FFFFFF;
        position: absolute;
        margin-left: 0px;
        text-align: left;
        z-index: 99;
        line-height: 0;
    }

    .header-nav-sp .nav-container .edit:hover .option {
        display: block;
    }

    .header-nav-sp .nav-container .link .option a:active {
        color: #4A4A4A;
        text-decoration: none;
    }
}
@media only screen and (max-width: 375px) {
    .user-ranking .avatar{
        width: 90px;
        height: 90px;
        position: relative;
    }
}
@media only screen and (max-width: 320px) {
    .user-ranking .avatar{
        width: 72px;
        height: 72px;
        position: relative;
    }
}