@media (max-width: 767px) {
    :root {
        font-size: 14px;
        /* H5 */
    }
}

@media (min-width: 768px) and (max-width: 1024px) {
    :root {
        font-size: 15px;
        /* iPad */
    }
}

@font-face {
    font-family: 'Sofiapro';
    src: url('../assets/font/sofiapro-regular.woff2');
}

@font-face {
    font-family: 'SofiaproBold';
    src: url('../assets/font/sofiapro-bold.woff2');
}

@font-face {
    font-family: 'LibreBaskerville';
    src: url('../assets/font/LibreBaskerville-Regular.woff2');
}

@font-face {
    font-family: 'LibreBaskervilleBold';
    src: url('../assets/font/LibreBaskerville-Bold.woff2');
}

* {
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none;
}

main {
    padding: 1.2rem;
}

.container {
    max-width: 64rem;
    margin: 0 auto;
}

.article {
    display: grid;
    /* grid-template-columns: 73.33% 26.67%; */
    grid-template-columns: auto 30%;
    gap: 23px;
}

.article>div>h3 {
    font-size: 2.6rem;
    line-height: 2.8rem;
    text-underline-offset: .75rem;
    font-family: SofiaproBold, Georgia, sans-serif;
    margin-bottom: 1rem;
    font-weight: 700;
}

.keyword {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.keyword_left,
.keyword_left>a,
.keyword_right,
.keyword_right>a {
    font-weight: 500;
    font-size: 16px;
    color: #02598B;
    cursor: pointer;
    vertical-align: middle;
}

.keyword_left>a>img {
    vertical-align: middle;
    margin-right: 10px;
}

.article_con {
    letter-spacing: 0px;
    font-family: LibreBaskerville, Georgia, serif;
    font-size: 1rem;
    line-height: 1.85rem;
    color: rgba(0, 0, 0, .95);
}

.article_con a,
.article_con_tips a {
    text-decoration-line: underline;
    color: #014ecb;
    text-decoration-skip-ink: auto;
    text-underline-offset: .125rem;
}

.article_con p strong,
.article_con a.related,
.article_con_tips p strong,
.article_con_tips a.related {
    font-family: "Sofiapro", georgia, sans-serif;
}

.article_con p .ql-size-small,
.article_con_tips p .ql-size-small {
    font-size: 0.875rem;
    letter-spacing: 1px;
}

.article_con ul,
.article_con_tips ul {
    list-style-type: disc;
    padding-left: 3rem;
}

.article_con ul li,
.article_con_tips ul li {
    list-style-type: disc;
}

.article_con ol,
.article_con_tips ol {
    list-style-type: decimal;
    padding-left: 3rem;
}

.article_con ol li,
.article_con_tips ol li {
    list-style-type: decimal;
}

.article_con img,
.article_con_tips img {
    display: block;
    width: 560px;
    height: 360px;
    margin: 0 auto;
    border-radius: 8px;
}

.article_con h2 {
    font-family: "Sofiapro", georgia, sans-serif;
    font-size: 2rem;
    line-height: 140%;
}
.article_con_tips h2{
    font-family: "Sofiapro", georgia, sans-serif;
    font-size: 1.5rem;
    line-height: 140%;
}
.article_ad {
    margin: 20px 0;
}

/* .article_right {

} */
.article_right_top {
    height: 286px;
    background: #FFFFFF;
    border-radius: 14px;
    border: 1px solid #E5E7EB;
    padding: 13px 15px;
    box-sizing: border-box;
}

.article_right_top:first-child {
    color: #0F7C7F;
    font-weight: 500;
    font-size: 16px;
}

.article_hot_img {
    width: 84px;
    background-position: center center;
    background-size: cover;
    margin-right: 10px;
    cursor: pointer;
    border-radius: 6px;
}

.article_hot {
    display: flex;
    padding-top: 10px;
    padding-bottom: 10px;
    box-sizing: border-box;
    border-bottom: 1px solid #E5E7EB;
}

.article_hot:last-child {
    border-bottom: none;
}

.article_hot_con {
    flex: 1;
}

.article_right_cen {
    margin-top: 20px;
    margin-bottom: 20px;
    height: 306px;
    width: 100%;
    border-radius: 14px;
}

.article_right_bot {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 9px;
    justify-items: stretch;
}

.game_con {
    height: 164px;
    border-radius: 8px;
    background: #FFFFFF;
    border-radius: 14px;
    border: 1px solid #E5E7EB;
    /* width: 130px; */
    width: 148px;
}

.game_bac {
    width: 100%;
    height: 132px;
    border-radius: 14px 14px 0 0;
    background-position: center;
    background-size: cover;
}

.game_text {
    font-weight: bold;
    font-size: 12px;
    color: #222222;
    padding: 8px;
    box-sizing: border-box;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.ad_bac {
    height: 100%;
    width: 100%;
    border-radius: 14px;
    background-position: center center;
    background-size: cover;
}

.art_tit {
    font-weight: bold;
    font-size: 13px;
    color: #222222;
    line-height: 20px;
}

.art_tag {
    font-weight: 400;
    font-size: 10px;
    color: #838383;
    line-height: 20px;
}

.article_next {
    margin-top: 17px;
}

.article_next_top {
    font-weight: 600;
    font-size: 18px;
    color: #222222;
    display: flex;
    align-items: center;
}

.article_next_top a {
    color: #02598B;
    text-decoration: underline;
}

.article_next_tit {
    margin-top: 10px;
    margin-left: 40px;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 16px;
    line-height: 28px;
    color: #1a1a1a;
    font-weight: 300;
    letter-spacing: 0px;
}

.article_next_icon {
    width: 30px;
}

/* .article_next_tit>a {
    color: #02598B;
    text-decoration-line: underline;
    word-break: break-all;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
} */
.article_next_top::after {
    border: none;
    /* content: "";
    margin-left: 32px;
    border-bottom: 1px solid #E5E7EB;
    width: 100%;
    display: block;
    flex: 1; */
}

.article_ad>h3,
.article_ad_sponsorship>h3 {
    /* font-weight: 800; */
    font-size: 26px;
    color: #0F7C7F;
    line-height: 64px;
    font-weight: 600;
}

.article_ad_list_e {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 2fr;
    grid-gap: 9px;
    justify-items: stretch;
    margin-top: 7px;
}

.article_ad_list_g {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    grid-gap: 9px;
    justify-items: stretch;
    margin-top: 7px;
}

.article_ad_list_f {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    grid-gap: 9px;
    justify-items: stretch;
}

/* recommend New */
.footer_img {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 208px;
    border-radius: 14px;
    position: relative;
}

.ar_con {
    height: 208px;
    background: #f6f6f6;
    border-radius: 14px;
}

.ar_con_img {
    height: 128px;
    background-size: cover;
    background-position: center;
    border-radius: 14px 14px 0px 0px;
}

.ar_con_name {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 500;
    font-size: 14px;
    color: #222222;
    line-height: 22px;
    text-align: center;
    margin: 4px 0 12px;
    letter-spacing: normal;
}

.footer_img_f {
    position: relative;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 208px;
    border-radius: 14px;
}

.ar_con_cont {
    position: absolute;
    /* bottom: 10px; */
    bottom: 0px;
    padding: 10px 0;
    width: 100%;
    background: linear-gradient(0deg, #222222 0%, rgba(34, 34, 34, 0) 100%);
    /* border-radius:14px 14px 14px 14px; */
    border-radius: 0px 0px 14px 14px;
}

.ar_con_f {
    font-weight: bold;
    font-size: 18px;
    color: #ffffff;
    text-align: center;
    padding: 0 8px;
    margin-bottom: 0px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* recommend New END */


.article_ad_f {
    display: flex;
    align-items: end;
    justify-content: center;
    border-radius: 14px;
    background-color: #444343;
    /* border: 1px solid #E5E7EB; */
    /* padding: 6px 15px; */
    box-sizing: border-box;
    height: 204px;
    color: #fff;
    background-position: center;
    background-size: cover;
}

.article_ad_f>div {
    padding: 14px 15px 6px;
    background: linear-gradient(0deg, #222222 0%, rgba(34, 34, 34, 0) 100%);
    /* border-radius: 14px; */
    border-radius: 0 0 14px 14px;
}

.article_ad_f div p {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.article_ad_g {
    height: 204px;
    background-position: center;
    background-size: cover;
    border-radius: 14px;
}

.article_ad_tb {
    display: flex;
    flex-direction: column;
    border-radius: 14px;
    background: #F6F6F6;
    /* border: 1px solid #E5E7EB; */
    /* padding: 13px 15px; */
    height: 204px;
    color: #fff;
    background-position: center;
    background-size: cover;
    /* justify-content: end; */
}

.ad_tit {
    font-weight: 500;
    font-size: 15px;
    color: #222222;
    line-height: 22px;
    padding: 4px 12px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ad_img {
    /* height: 110px; */
    height: 128px;
    border-radius: 14px 14px 0 0;
    background-size: cover;
    background-position: center;
}

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

.col_continer {
    max-width: 64rem;
    margin: 0 auto;
    /* background-color: #5b5757; */
}

.column_con {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1rem;
    border-bottom: 1px solid #E6E6E6;
    margin-bottom: 20px;
    margin: 0 auto;
}

.garden {
    display: grid;
    /* grid-template-columns: 1fr 2fr;  */
    grid-template-columns: 43.33% 56.67%;
    gap: 17px;
    margin-top: 15px;
    cursor: pointer;
}

.garden:last-child {
    margin-bottom: 20px;
}

.garden>img {
    /* width: 222px;
    height: 100%; */
    height: 156px;
    width: 100%;
    border-radius: 8px;
    object-fit: cover;
    object-position: center;
}

.con_left {
    flex: 1;
    margin-right: 24px;
}

.con_img {
    height: 360px;
    width: 560px;
    border-radius: 8px;
    margin: 0 auto;
    margin-top: 10px;
    margin-bottom: 2rem;
    position: relative;
}

.con_img img {
    height: 100%;
    width: 100%;
    border-radius: 8px;
    position: absolute;
    object-fit: cover;
    object-position: center;
    top: 0;
    left: 0;
}

.vertical {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 600px;
}

.vertical_2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 600px;
}

.vertical_3 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 600px;
}

.con_left>h3 {
    font-weight: 800;
    font-size: 26px;
    color: #222222;
    /* line-height: 100px; */
}

.garden_right>h4 {
    font-weight: bold;
    font-size: 22px;
    color: #141414;
    line-height: 26px;
}

.garden_right>p {
    margin: 8px 0 10px 0;
    /* font-weight: bold; */
    font-size: 16px;
    color: #979797;
    line-height: 20px;
}

/* .garden_bot {
    display: flex;
    justify-content: space-between;
    align-items: center;
 }
 .garden_bot>a {
    font-weight: bold;
    font-size: 14px;
    color: #02598B;
    line-height: 22px;
    cursor: pointer;
 }
 .garden_bot>a>span {
    display: inline-block;
    width: 13px;
    height: 13px;
    background-color: #02598B;
    border-radius: 50%;
    text-align: center;
    color: #fff;
    line-height: 13px;
    margin-left: 10px;
    font-size: 12px;
 } */
.tag>span {
    /* border-radius: 6px;
    border: 1px solid #979797;
    padding: 2px 8px;
    color: #979797;
    font-size: 14px; */
    border-radius: 6px;
    border: 1px solid #979797;
    font-size: 14px;
    color: #979797;
    line-height: 20px;
    padding: 2px 4px;
}

.tag>span:hover {
    color: #02598B;
    border-color: #02598B;
}

.con_right {
    width: 303px;
}

.distressed {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 15px;
    margin-bottom: 13px;
    cursor: pointer;
}

.distressed>img {
    width: 122px;
    /* font-family: OPPOSans; */
    font-weight: bold;
    font-size: 14px;
    color: #141414;
    line-height: 22px;
}

.distressed_right>p {
    font-weight: bold;
    font-size: 14px;
    color: #141414;
    line-height: 22px;
    margin-bottom: 8px;
}


.dis_ad {
    height: 319px;
    width: 100%;
    background-color: #ccc;
    border-radius: 10px;
}

.dis_ad_container {
    width: 100%;
    height: 100%;
    background-position: center;
    background-size: cover;
    border-radius: 10px;
}

.tag_left {
    border-radius: 6px;
    border: 1px solid #979797;
    font-size: 14px;
    color: #979797;
    line-height: 20px;
    padding: 2px 4px;
}

.p_con {
    font-size: 16px;
    line-height: 20px;
    color: #979797;
    min-height: 3.8rem;
    margin-top: 0.4rem;
}

.recommend h3 {
    font-size: 20px;
    line-height: 24px;
    margin-top: 14px;
    min-height: none;
}

.recommend .p_con {
    font-size: 16px;
    line-height: 20px;
    color: #979797;
    margin: 10px 0;
}

.recommend img {
    width: 100%;
    height: 8rem;
    object-fit: cover;
    object-position: center;
}

.home_space {
    display: none;
}

.recommend_tit {
    display: block;
}

.article_ad_list_g_h5 {
    display: none;
}

.article_ad_list_g_pc {
    display: block;
}

.recommendBox_h5 {
    display: none !important;
}

@media (max-width: 767px) {
    .column_con {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1rem;
        border-bottom: none;
    }

    .article_right,
    .article_ad_list_g_pc {
        display: none;
    }

    .advertis_footer,
    .news_container_h,
    .home_space,
    .article_ad_list_g_h5 {
        display: block;
    }

    .home_space {
        display: flex;
        align-items: center;
    }

    .home_space::after {
        content: '';
        width: 100%;
        display: block;
        flex: 1;
        border-bottom: 1px solid #E0E0E0;
        margin-left: 13px;
    }

    .col_continer {
        box-sizing: border-box;
        max-width: none;
        margin: 0 auto;
    }

    .recommendBox_h5 {
        display: block !important;
    }

    /* .vertical {
        max-width: 220px;
     }
     .vertical_2 {
        max-width: 220px;
     } */
    .vertical_3 {
        max-width: 220px;
    }

    .con_img {
        height: 360px;
        width: 100%;
    }

    .recommend h3 {
        min-height: auto;
    }

    .article_con {
        font-size: 16px;
    }

    .article_ad_list_e,
    .article_ad_list_f,
    .article_ad_list_g {
        grid-template-columns: repeat(3, 1fr);
    }

    .article_ad_list_e:nth-child(4) {
        grid-column: 1 / 4;
    }

    .article_ad_list_f>a:first-child {
        grid-column: 1 / 4;
    }

    .special {
        grid-column: 1 / 4;
    }

    .article>div>h3 {
        font-size: 2rem;
        line-height: 2.25rem;
    }

    .con_img {
        margin-bottom: 12px;
    }

    .keyword {
        margin-bottom: 0;
    }

    .article {
        grid-template-columns: 100%;
        gap: 10px;
    }

    .con_img {
        height: 240px;
    }

    .article_next_tit {
        font-size: 16px;
        margin-left: 30px;
    }

    .article_next_icon {
        width: 20px;
    }

    .article_ad_f,
    .article_ad_tb,
    .article_ad_g {
        height: 120px;
    }

    .article_ad {
        margin-top: 0;
    }

    .article_ad>h3,
    .article_ad_sponsorship>h3 {
        font-size: 20px;
        font-weight: 500;
        line-height: 40px;
    }

    .ad_img {
        height: 80px;
    }

    .ad_tit {
        padding: 3px 7px;
        font-size: 10px;
        box-sizing: border-box;
        width: 100%;
        line-height: 15px;
        -webkit-line-clamp: 2;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .article_ad_f>div {
        /* padding: 6px 10px; */
        padding: 14px 10px 6px;
    }

    .keyword_left>a>img {
        margin-right: 2px;
    }

    .article_next_top::after {
        border: none;
    }

    .keyword_left,
    .keyword_left>a,
    .keyword_right,
    .keyword_right>a {
        font-size: 14px;
    }

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

    /* recommend New */
    .footer_img {
        height: 8.6rem;
        border-radius: 0.6rem;
    }

    .ar_con {
        height: 8.6rem;
        border-radius: 0.6rem;
    }

    .ar_con_img {
        height: 5rem;
        border-radius: 0.6rem 0.6rem 0px 0px;
    }

    .ar_con_name {
        font-weight: 500;
        font-size: 12px;
        margin: 4px 0 0px;
        letter-spacing: normal;
        line-height: normal;
        font-size: 10px;
        line-height: 1rem;
    }

    .footer_img_f {
        height: 8.6rem;
        border-radius: 0.6rem;
    }

    .ar_con_cont {
        padding: 0.6rem 0;
        border-radius: 0px 0px 0.6rem 0.6rem;
    }

    .ar_con_f {
        font-weight: bold;
        font-size: 14px;
        color: #ffffff;
        text-align: center;
        padding: 0 8px;
    }

    /* recommend New END */
}

@media (min-width: 768px) and (max-width: 2000px) {
    .article_right {
        display: block;
    }

    .advertis_footer,
    .news_container_h {
        display: none;
    }
}