a, body, div, footer, h1, h2, h3, h4, h5, h6, header, html, i, img, menu, nav, p, ul {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline
}

* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    -webkit-tap-highlight-color: transparent; /* For some Androids */
}

*, :after, :before {
    box-sizing: border-box;
}

a {
    text-decoration: none;
    color: #7f9dc5;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    outline: none;
    transition: color .1s ease;
}

li {
    list-style: none;


}

button {
    border: none;
    background: none;
    outline: none;
}

/*html{overflow-x:hidden;}*/
html {
    overflow-x: hidden;
    font-size: 62.5%;
}

html, body {
    position: relative;
    height: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

body {
    font-family: "Microsoft Yahei", sans-serif; /*font-family: "Arima Madurai",Microsoft JhengHei,Georgia,Times,serif;*/
    font-size: 15px;
    font-size: 1.5rem;
    background-color: #28254C;
    color: #7f9dc5;
}

.move {
    animation: move 5s linear infinite;
}

@keyframes move {
    0% {
        transform: rotate(0deg);
    }
    20% {
        transform: rotate(72deg);
    }
    40% {
        transform: rotate(144deg);
    }
    60% {
        transform: rotate(216deg);
    }
    80% {
        transform: rotate(288deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

.doume {
    -webkit-animation: tada 1s .2s ease both infinite;
    -moz-animation: tada 1s .2s ease both infinite;
}

@-webkit-keyframes tada {
    0% {
        -webkit-transform: scale(1)
    }
    10%, 20% {
        -webkit-transform: scale(0.9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        -webkit-transform: scale(1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        -webkit-transform: scale(1.1) rotate(-3deg)
    }
    100% {
        -webkit-transform: scale(1) rotate(0)
    }
}

@-moz-keyframes tada {
    0% {
        -moz-transform: scale(1)
    }
    10%, 20% {
        -moz-transform: scale(0.9) rotate(-3deg)
    }
    30%, 50%, 70%, 90% {
        -moz-transform: scale(1.1) rotate(3deg)
    }
    40%, 60%, 80% {
        -moz-transform: scale(1.1) rotate(-3deg)
    }
    100% {
        -moz-transform: scale(1) rotate(0)
    }
}

@keyframes fade-in {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fade-in {
    0% {
        opacity: 0;
    }
    40% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.heart {
    animation: heart 1.3s ease-in-out 2.7s infinite alternate;
}

@keyframes heart {
    from {
        transform: translate(0, 0)
    }
    to {
        transform: translate(0, 1rem)
    }
}

@keyframes ball {
    0% {
        -webkit-transform: scale(0);
        transform: scale(0);
    }
    100% {
        -webkit-transform: scale(1);
        transform: scale(1);
        opacity: 0;
    }
}

::-webkit-scrollbar-thumb {
    background-color: rgba(130, 130, 130, .5);
    border-radius: .5rem;
}

::-webkit-scrollbar-thumb:hover {
    background-color: #ff5473;
    border-radius: .5rem;
}

::-webkit-scrollbar {
    width: .5rem;
    height: .5rem;
}

::-webkit-scrollbar-thumb:active {
    background-color: #ff5473;
    border-radius: .5rem;
}

::-webkit-scrollbar-corner {
    background: rgba(0, 0, 0, 0);
    border-radius: 0 0 1rem 0
}

::-webkit-scrollbar-button {
    background-color: rgba(0, 0, 0, 0);
    height: .2rem;
    width: .2rem;
}

/*loading*/

#loading {
    position: fixed;
    width: 100%;
    height: 100%;
    background-color: #6007b4;
    left: 0;
    bottom: 0;
    z-index: 10000;
}

.loading-inner {
    width: 8rem;
    height: 8rem;
    border-radius: 100%;
    background-color: #7f9dc5;
    animation: ball 1s ease-in-out infinite;
}

/*header*/
header {
    width: 100%;
    height: auto;
    background-color: #332F63;
}

.header {
    width: 100%;
    height: 5rem;
    position: relative;
    z-index: 1;
}

.header:after {
    content: "";
    position: absolute;
    bottom: -3rem;
    left: calc(50% - 6rem);
    width: 0;
    height: 0;
    border-left: 6rem solid transparent;
    border-right: 6rem solid transparent;
    border-top: 3rem solid #332F63;
}

.header-button {
    width: 4rem;
    height: 5rem;
}

.header-button i {
    font-size: 2rem;
    color: #7f9dc5;
}

.logo {
    width: 6rem;
    height: 6rem;
    top: 1rem;
    position: relative;
    z-index: 999;
}

.logo img {
    width: 100%;
    height: auto;
}

/*ycsd-公共样式*/
.shadow {
    background-color: #332F63 !important;
    border-radius: .5rem;
}

.nowrap {
    text-transform: uppercase;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
}

.banner {
    width: 100%;
    height: auto;
    font-size: 0;
    margin: 0 0 1.5rem;
}

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

.max {
    max-width: 660px;
    width: 100%;
    margin: 0 auto;
}

.horn {
    margin: 0 auto 1rem;
    padding: 1.5rem 1rem 1.5rem;
}

.horn:first-child {
    padding: 4.5rem 1rem 1.5rem;
    position: relative;
    z-index: 1;
}

.horn:last-child {
    margin: 0 auto;
}

.horn:first-child:before {
    content: "";
    position: absolute;
    top: 0;
    left: calc(50% - 6rem);
    width: 0;
    height: 0;
    border-left: 6rem solid transparent;
    border-right: 6rem solid transparent;
    border-top: 3rem solid #28254C;
}

.fixed {
    background-color: #332F63;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 1000;
}

.has-menu {
    padding: 1rem 1rem 7rem !important;
}

.flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.flex-start {
    justify-content: flex-start;
}

.flex-center {
    justify-content: center;
}

.flex-around {
    justify-content: space-around;
}

.flex-wrap {
    flex-wrap: wrap !important;
}

.flex-column {
    display: flex;
    flex-direction: column;
}

/*warp*/
#warp {
    width: 100%;
    height: auto;
    margin: auto;
    padding: 1rem 1rem 7rem;
    animation: fade-in ease 1.5s;
    animation-iteration-count: 1;
    animation-fill-mode: forwards;
}

/*mode-meta*/
.mode-meta {
    width: 100%;
    padding: 1rem 0 1.5rem;
    margin: 0 0 1.5rem;
    border-bottom: .1rem solid #28254C;
}

.mode-meta h1 {
    width: 50%;
    font-size: 1.6rem;
    color: #B0C4DE;
}

.mode-meta h1 i {
    font-size: 1.6rem;
    color: #B0C4DE;
    margin: 0 .5rem 0 0;
}

.mode-meta h2 {
    width: 50%;
    font-size: 1.2rem;
    color: #ff5473;
    text-align: right;
}

/*mode-blog*/
.mode-blog-content {
    max-height: 9rem;
    overflow: hidden;
}

.mode-blog-item {
    line-height: 2;
}

.mode-blog-item em {
    width: 2rem;
    height: 2rem;
    margin: 0 .5rem 0 0;
    border-radius: .2rem;
    line-height: 2rem;
    font-style: normal;
    font-size: 1.2rem;
    background-color: rgba(101, 120, 146, .1);
    color: #7f9dc5;
}

.mode-blog-item:first-child em {
    background-color: rgba(255, 84, 115, .1);
    color: #ff5473;
}

.mode-blog-item:nth-child(2) em {
    background-color: rgba(255, 111, 6, .1);
    color: #ff6f06;
}

.mode-blog-item:nth-child(3) em {
    background-color: rgba(213, 72, 245, .1);
    color: #d448f5;
}

.mode-blog-item h1 {
    width: calc(100% - 9rem);
    text-align: left;
}

.mode-blog-item h2 {
    width: 6rem;
    text-align: right;
}

.mode-blog-item h2 a {
    font-size: 1.4rem;
    color: #718298;
}

/*mode-app*/
.mode-app-content {
    width: 100%;
    height: 9rem;
    overflow: hidden;
}

.mode-app-list {
    zoom: 1;
}

.mode-app-list-item {
    width: calc(620px / 8);
    float: left;
    text-align: center;
}

.mode-app-list-item-img {
    width: 6rem;
    height: 6rem;
    margin: 0 auto;
    border-radius: 100%;
    overflow: hidden;
}

.mode-app-list-item-img:hover {
    animation: move 5s linear infinite;
}

.mode-app-list-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.mode-app-list-item-title {
    width: 100%;
    font-size: 1.4rem;
    color: #B0C4DE;
    line-height: 3rem;
}

/*mode-tab*/
.mode-tab-meta-content {
    width: 100%;
    padding: 0 0 .5rem;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
}

.mode-tab-meta-content li {
    font-size: 1.4rem;
    color: #718298;
    margin: 0 1.5rem 0 0;
    cursor: pointer;
}

.mode-tab-meta-content .on {
    font-size: 1.6rem;
    color: #B0C4DE;
}

.mode-tab-item {
    margin: 0 0 1rem;
}

.mode-tab-item-img {
    border-radius: 30%;
    overflow: hidden;
}

.mode-tab-item-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s;
}

.mode-tab-item-img img:hover {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

/*mode-tab-style-1*/
.mode-tab-style-1 {
    width: calc(100% / 6);
    text-align: center;
}

.mode-tab-style-1-img {
    width: 7.2rem;
    height: 7.2rem;
    margin: 0 auto;
}

.mode-tab-style-1-title {
    font-size: 1.4rem;
    color: #B0C4DE;
    line-height: 2;
}

.mode-tab-style-1-down {
    font-size: 1.4rem;
    letter-spacing: .2rem;
    padding: .5rem 1.5rem;
    border-radius: 3rem;
    background-color: rgba(255, 84, 115, .1);
    color: #ff5473;
}

.mode-tab-style-1:hover .mode-tab-style-1-down {
    background-color: #ff5473;
    color: #fff;
}

/*mode-tab-style-2*/
.mode-tab-style-2 {
    width: 100%;
}

.mode-tab-style-2-down {
    font-size: 1.5rem;
    letter-spacing: .2rem;
    padding: .6rem 2rem;
    border-radius: 3.2rem;
    background-color: rgba(255, 84, 115, .1);
    color: #ff5473;
}

.mode-tab-style-2:hover .mode-tab-style-2-down {
    background-color: #ff5473;
    color: #fff;
}

.mode-tab-style-2-img {
    width: 6.6rem;
    height: 6.6rem;
    box-shadow: 0 0.5rem 1.5rem rgba(255, 84, 115, .35);
}

.mode-tab-item-content {
    width: calc(100% - 7.6rem);
    height: 6.6rem;
}

.mode-tab-item-content-meta-title {
    width: calc(100% - 9rem);
}

.mode-tab-item-content-meta-title h1 {
    font-size: 1.6rem;
    font-weight: bold;
    color: #B0C4DE;
    line-height: 2.6rem;
}

.mode-tab-item-content-meta-title h3 {
    font-size: 1.2rem;
    color: #7f9dc5;
    line-height: 2rem;
}

.mode-tab-item-content-meta-title h3 i {
    font-size: 1.2rem;
    color: #26f123;
    margin: 0 .5rem 0 0;
}

.mode-tab-item-content-desc {
    font-size: 1.4rem;
    color: #718298;
    line-height: 2rem;
}

/*mode-tab-style-3*/
.mode-tab-style-3 {
    width: calc(50% - .5rem);
    min-height: 10rem;
    height: 15vh;
    margin: 0 1rem 1rem 0;
    border-radius: 1rem;
    overflow: hidden;
    position: relative;
}

.mode-tab-style-3:nth-child(2n) {
    margin: 0 0 1rem 0;
}

.mode-tab-style-3:before {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    background-color: rgba(0, 0, 0, .7);
}

.mode-tab-item-inner {
    width: 100%;
    padding: 2rem 1rem;
    text-align: center;
    position: absolute;
    z-index: 2;
}

.mode-tab-item-inner h1 {
    width: 100%;
    text-align: center;
    font-size: 1.8rem;
    line-height: 3rem;
    font-weight: bold;
    color: #fff;
}

.mode-tab-item-inner h3 {
    width: 100%;
    text-align: center;
    font-size: 1.2rem;
    color: #fff;
    line-height: 3rem;
}

.mode-tab-item-inner h3 i {
    font-size: 1.2rem;
    color: #26f123;
    margin: 0 .5rem 0 0;
}

/*mode-notice*/
.mode-notice {
    width: 100%;
}

.mode-notice i {
    font-size: 1.6rem;
    color: #ff5473;
}

.mode-notice marquee {
    width: calc(100% - 2.8rem);
    font-size: 1.6rem;
    color: #ff5473;
}

/*mode-site*/
.mode-site-class {
    margin: 0 0 1rem;
}

.mode-site-class:last-child {
    margin: 0;
}

/*mode-site-style-1*/
.mode-site-style-1 {
    width: calc(100% / 3 - 2rem / 3);
    margin: 0 1rem 1rem 0;
    padding: 1rem;
    background-color: #28254C;
    border-radius: .5rem;
    overflow: hidden;
}

.mode-site-style-1:nth-child(3n) {
    margin: 0 0 1rem;
}

.mode-site-style-1 img {
    width: 2rem;
    height: 2rem;
    border-radius: 100%;
    overflow: hidden;
}

.mode-site-style-1 h1 {
    width: calc(100% - 5rem);
    font-size: 1.5rem;
    color: #B0C4DE;
}

.mode-site-style-1 i {
    font-size: 2rem;
    color: #424548;
}

.mode-site-style-1:hover i {
    color: #B0C4DE;
}

/*mode-site-style-2*/
.mode-site-style-2 {
    width: calc(25% - 3rem / 4);
    margin: 0 1rem 1rem 0;
}

.mode-site-style-2:nth-child(4n) {
    margin: 0 0 1rem;
}

.mode-site-style-2 img {
    width: 2rem;
    height: 2rem;
    border-radius: 100%;
    overflow: hidden;
}

.mode-site-style-2 h1 {
    width: calc(100% - 3rem);
    font-size: 1.5rem;
    color: #B0C4DE;
}

/*archive-blog*/
.archive-blog {
    width: 100%;
    margin: 0 0 1rem;
}

.post-content-item-left {
    width: 4.6rem;
    height: 4.6rem;
    border-radius: 100%;
    background-color: rgba(255, 84, 115, .1);
    font-size: 1.6rem;
    font-weight: bold;
    color: #ff5473;
    font-style: normal;
}

.post-content-item-right {
    width: calc(100% - 5.6rem);
}

.post-content-item-right h1 {
    line-height: 2.6rem;
}

.post-content-item-right-meta {
    height: 2rem;
}

.post-content-item-right-meta i {
    font-size: 1.2rem;
    color: #718298;
    margin: 0 .5rem 0 0;
}

.post-content-item-right-meta span {
    font-size: 1.2rem;
    color: #718298;
}

/*single*/
.acticle-content p {
    font-size: 1.5rem;
    line-height: 2;
    margin: 0 0 1.5rem;
}

.acticle-content a {
    color: #ff5473;
    text-decoration: underline;
}

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

.acticle-tips {
    margin: 1.5rem 0 0;
    padding: 1.5rem;
    border-left: .5rem solid #28254C;
    background-color: rgba(101, 120, 146, .2);
}

.acticle-tips p {
    font-size: 1.4rem;
    color: #7f9dc5;
    line-height: 1.6;
}

/*single-app*/
.acticle-app {
    padding: 2rem 0 1rem;
    position: relative;
}

.acticle-app-meta:after {
    content: '';
    display: block;
    width: 8rem;
    height: 8rem;
    border-radius: 100%;
    position: absolute;
    background-color: rgba(255, 84, 115, .2);
    top: 2rem;
    right: 4rem;
    animation: heart 1.3s ease-in-out 2.7s infinite alternate;
}

.acticle-app-meta:before {
    content: '';
    display: block;
    width: 6rem;
    height: 6rem;
    border-radius: 100%;
    position: absolute;
    background-color: rgba(255, 84, 115, 0.2);
    top: 1rem;
    right: 1rem;
    animation: heart 1.3s ease-in-out 2.7s infinite alternate;
}

.acticle-app-meta-img {
    width: 10rem;
    height: 10rem;
    border-radius: 30%;
    overflow: hidden;
}

.acticle-app-meta-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: all 0.6s;
}

.acticle-app-meta-img img:hover {
    -webkit-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
}

.acticle-app-meta-content {
    width: calc(100% - 11rem);
}

.acticle-app-meta-content h1 {
    font-size: 2rem;
    font-weight: bold;
    color: #B0C4DE;
    line-height: 2.6rem;
}

.acticle-app-meta-content h2 {
    font-size: 1.4rem;
    color: #7f9dc5;
    line-height: 2.6rem;
}

.acticle-app-meta-content h2 i {
    font-size: 1.4rem;
    color: #26f123;
    margin: 0 .5rem 0 0;
}

.acticle-app-meta-content-down {
    display: block;
    width: 12rem;
    height: 3.5rem;
    border-radius: 3.5rem;
    margin: .5rem 0 0;
    line-height: 3.5rem;
    text-align: center;
    font-size: 1.5rem;
    background-color: #ff5473;
    color: #fff;
}

.acticle-app-more {
    margin: 2rem 0 0;
}

.acticle-app-more li {
    width: calc(100% / 3 - 2rem / 3);
    padding: 1rem;
    margin: 0 1rem 1rem 0;
    background-color: rgba(255, 84, 115, .1);
    border-radius: .5rem;
}

.acticle-app-more li:nth-child(3n) {
    margin: 0 0 1rem;
}

.acticle-app-more li span {
    width: calc(100% - 2.4rem);
    font-size: 1.4rem;
    color: #ff5473;
}

.acticle-app-more li i {
    font-size: 1.4rem;
    color: #ff5473;
}

.acticle-app-more li:hover {
    background-color: #ff5473;
}

.acticle-app-more li:hover span, .acticle-app-more li:hover i {
    color: #fff;
}

.acticle-app-content {
    margin: 2rem 0 0;
}

.acticle-app-content-slider {
    margin: 0 0 2rem !important;
}

.acticle-app-content-slider .carousel__slide {
    width: 100%;
    height: 30vh;
    border-radius: .5rem;
    overflow: hidden;
    padding: 0;
}

.acticle-app-content-slider .carousel__dots {
    top: 1rem;
    left: auto;
    right: 1rem;
}

/*single-blog*/
.acticle-blog {
    padding: 2rem 0 0;
}

.acticle-blog-title h1 {
    font-size: 1.8rem;
    font-weight: bold;
    color: #B0C4DE;
    line-height: 1.6;
}

.acticle-blog-meta {
    width: 100%;
    margin: 1.5rem 0 0;
}

.acticle-blog-meta span, .acticle-blog-meta span a, .acticle-blog-meta span i {
    font-size: 1.2rem;
    color: #718298;
}

.acticle-blog-meta span {
    margin: 0 1rem 0 0;
}

.acticle-blog-meta span i {
    margin: 0 .5rem 0 0;
}

.acticle-blog-content {
    margin: 1.5rem 0 0;
}

/*sigle-site*/
.acticle-site {
    margin: 6rem 0 0;
    text-align: center;
}

.acticle-site h1 {
    font-size: 1.8rem;
    color: #B0C4DE;
    font-weight: bold;
    line-height: 2;
}

.acticle-site h2 {
    font-size: 1.5rem;
    line-height: 2;
}

.acticle-site-access {
    display: block;
    width: 10rem;
    height: 3.6rem;
    background: #5cb85c;
    color: #fff;
    border-radius: .5rem;
    font-size: 1.5rem;
    line-height: 3.6rem;
    margin: 2rem auto;
}

.acticle-site h3 {
    font-size: 1.5rem;
    line-height: 2;
}

/*relate*/
.relate-app {
    padding: 1.5rem 1rem 1.5rem;
}

/*popup*/
.popup {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: -1;
    opacity: 0;
}

.popup.show {
    opacity: 1;
    z-index: 9999;
    overflow-y: auto;
    background-color: #28254C;
}

.popup-content {
    margin: 10rem auto;
    padding: 1rem;
    border-radius: .5rem;
}

/*popup-content-search*/
.popup-content-search {
    width: 100%;
    margin: 0 0 1rem;
}

.popup-content-search form {
    width: 100%;
    height: 4.6rem;
    padding: 0 2rem 0 0;
    border-radius: 4.6rem; /*box-shadow: 0 .1rem .5rem 0 rgb(32 33 36 / 25%);*/
    box-shadow: 0 0 1rem #332F63;
    overflow: hidden;
    justify-content: flex-start !important;
}

.popup-content-search input {
    width: calc(100% - 6rem);
    height: 4.6rem;
    margin: 0 2rem;
    font-size: 1.5rem;
    background-color: #332F63;
    -webkit-text-fill-color: #B0C4DE;
    border: none;
    outline: none;
    -webkit-appearance: none;
}

.popup-content-search button {
    margin: 0;
    padding: 0;
    border: none;
    outline: none;
    border-radius: 0;
    background-color: transparent;
    line-height: inherit;
    width: max-content;
}

.popup-content-search button:after {
    border: none;
}

.popup-content-search button i {
    font-size: 1.8rem;
    color: #B0C4DE;
}

/*popup-content-hot*/
.popup-content-hot-meta h1 i {
    color: #ff5473;
}

.popup-content-hot ul li {
    padding: .6rem 1.2rem;
    margin: 0 1rem 1rem 0;
    border-radius: .5rem;
}

.popup-content-hot ul li a {
    font-size: 1.4rem;
    color: #B0C4DE;
}

.popup-meta {
    position: fixed;
    top: 0;
    right: 0;
    padding: 2rem;
}

.popup-meta i {
    font-size: 3rem;
    color: #ff5473;
}

/*#footer*/
footer {
    width: 100%;
}

.footer {
    width: 100%;
    height: 6rem;
    padding: 1rem;
}

.footer p {
    font-size: 1.5rem;
    line-height: 2;
}

.footer li {
    max-width: 20%;
    height: 4rem;
    font-size: 0;
    overflow: hidden;
}

.footer li img {
    width: 2.6rem;
    height: 2.6rem;
    margin: 0 auto;
}

.footer li h2 {
    font-size: 1.2rem;
    line-height: 1.4rem;
    color: #B0C4DE;
    text-align: center;
}

/*paging375457087*/
#paging {
    width: 100%;
}

#paging a, #paging span {
    font-size: 1.2rem;
    padding: .5rem 1rem;
    margin: 0 .5rem;
    color: #ff5473;
    border: .1rem solid #ff5473;
    border-radius: .5rem;
}

#paging .dots {
    color: #ff5473;
    border: none;
}

#paging .current {
    background: #ff5473;
    color: #fff;
}

/*warning526665408*/
#warning {
    width: 100%;
    height: auto;
    padding: 3rem;
    text-align: center;
}

#warning i {
    font-size: 3rem;
    color: #ff5473;
    margin: 0 auto;
}

#warning h2 {
    font-size: 1.4rem;
    color: #ff5473;
    line-height: 3rem;
}

@media screen and (max-width: 560px) {
    ::-webkit-scrollbar {
        display: none;
    }

    .mode-tab-meta-content {
        padding: 0;
    }

    .mode-tab-style-1 {
        width: 20%;
    }

    .mode-site-style-2 {
        width: calc(100% / 3 - 2rem / 3);
    }

    .mode-site-style-2:nth-child(3n) {
        margin: 0 0 1rem;
    }

    .mode-site-style-2:nth-child(4n) {
        margin: 0 1rem 1rem 0;
    }

    .mode-site-style-2:nth-child(12n) {
        margin: 0 0 1rem;
    }
}

@media screen and (max-width: 460px) {
    .mode-tab-style-1 {
        width: 25%;
    }

    .mode-site-style-1 {
        width: calc(50% - .5rem);
    }

    .mode-site-style-1:nth-child(2n) {
        margin: 0 0 1rem;
    }

    .mode-site-style-1:nth-child(3n) {
        margin: 0 1rem 1rem 0;
    }

    .mode-site-style-1:nth-child(6n) {
        margin: 0 0 1rem;
    }

    .acticle-app-more li {
        width: calc(50% - .5rem);
    }

    .acticle-app-more li:nth-child(2n) {
        margin: 0 0 1rem;
    }

    .acticle-app-more li:nth-child(3n) {
        margin: 0 1rem 1rem 0;
    }

    .acticle-app-more li:nth-child(6n) {
        margin: 0 0 1rem;
    }

    .mode-tab-style-3 {
        width: 100%;
        margin: 0 0 1rem 0;
    }

    .mode-tab-style-3:nth-child(2n) {
        margin: 0 0 1rem 0;
    }
}

/*key17110593*/
@media screen and (max-width: 360px) {
    .mode-tab-style-1-img {
        width: 6.6rem;
        height: 6.6rem;
    }
}