#app {
    width: 100%;
    min-height: calc(100vh - 5.2rem);
}

/* 横滑分类 */
.category {
    overflow-x: scroll;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 2.69rem;
    gap: 0.72rem;
    margin: 0 0 1.88rem 0.94rem;
    padding-right: 0.94rem;
}

.category_div {
    min-width: 6.75rem;
    height: 2.69rem;
    padding: 0 0.31rem;
    flex-shrink: 0;
    border-radius: 0.59rem;
    background: #39BDF7;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.63rem;
}


.category_div .shadow {
    width: 2.19rem;
    height: 2.19rem;
    border-radius: 0.5rem;
    background: #FFFFFF;
}

.category_div img {
    width: 1.38rem;
    height: 1.38rem;
    object-fit: contain;
    display: block;
}

.category_div .cat_name {
    font-family: 'Noto Sans 500', sans-serif;
    font-size: 0.88rem;
    text-transform: capitalize;
    letter-spacing: normal;
    color: #FFFFFF;
}

.category_div_select .shadow {
    background: #FFFFFF;
}

.category_div_select {
    background: #39BDF7;
}

/* banner start */
.banner {
    width: 20.63rem;
    height: 11.66rem;
    margin: 0 auto 1.56rem;
    border-radius: 1.56rem;
    background: #39BDF7;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
    padding: 1.09rem 0.875rem 1.47rem;
    position: relative;
}

.banner {
    display: grid;
    grid-template-columns: 1fr 9.34rem;
    align-items: center;
    gap: 0.85rem;
}

.banner .news_img {
    width: 100%;
    aspect-ratio: 1/1;
    border-radius: 1.56rem;
    display: block;
}

.banner .title {
    font-family: 'Noto Sans 700', sans-serif;
    font-size: 0.88rem;
    line-height: 151%;
    text-transform: capitalize;
    letter-spacing: normal;
    color: #FFFFFF;
}

.banner .go {
    width: 4.53rem;
    height: 1.84rem;
    border-radius: 0.81rem;
    background: #FFFFFF;
    font-family: 'HarmonyOS Sans Condensed 700';
    font-size: 1.13rem;
    color: #39BDF7;
    margin-top: 0.81rem;
}


.line {
    margin: 1.56rem auto 0;
    width: 100%;
    height: 0.31rem;
    height: 0.31rem;
    background: #EFEFEF;
}

/* banner end */
.news_type {
    position: relative;
    width: 100%;
    padding: 0.94rem;
    margin: 0 auto;
    height: 3.63rem;
    font-family: 'HarmonyOS Sans Condensed 500', sans-serif;
    font-size: 1.13rem;
    line-height: 100%;
    text-transform: capitalize;
    letter-spacing: normal;
    color: #39BDF7;
}

.news_type .more {
    width: 1.75rem;
    height: 1.75rem;
}

/* part one*/
.part-one {
    position: relative;
}

.part-one-inner {
    overflow-x: scroll;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.63rem;
    margin: 0 0 0.94rem 0.94rem;
    padding-right: 0.94rem;
}

.part-one-inner .news_div {
    width: 9.69rem;
    height: 11.66rem;
    padding: 0.63rem;
    border-radius: 0.63rem;
    background: #39BDF7;
    flex-shrink: 0;
}

.part-one-inner .news_div .news_img {
    width: 100%;
    height: 6.16rem;
    border-radius: 0.63rem;
    display: block;
    margin-bottom: 0.63rem;
}

.part-one-inner .news_div .title {
    font-family: 'Noto Sans 500', sans-serif;
    font-size: 0.88rem;
    line-height: 137%;
    text-transform: capitalize;
    letter-spacing: normal;
    color: #FFFFFF;
}

/* part two */
.part-two .news_type {
    margin-bottom: 0.5rem;
}

.part-two .news_type .girl {
    position: absolute;
    width: 4.63rem;
    height: 6.13rem;
    right: 2.8rem;
    bottom: -1.7rem;
    z-index: -1
}


.part-two .news_div {
    width: 20.63rem;
    border-radius: 0.63rem;
    box-sizing: border-box;
    border: 2.5px solid #39BDF7;
    padding: 0.76rem 0.69rem;
    display: grid;
    grid-template-columns: 6.18rem 1fr;
    gap: 0.74rem;
    margin: 0 auto 0.94rem;
}

.part-two .news_div .news_img {
    width: 6.18rem;
    height: 4.69rem;
    border-radius: 0.63rem;
}

.part-two .info {
    width: 100%;
}

.part-two .title {
    font-family: 'Roboto 500', sans-serif;
    font-size: 0.88rem;
    line-height: 140%;
    letter-spacing: normal;
    color: #0B0F2F;
    margin-bottom: 0.19rem;
}

.part-two .author {
    font-family: 'Roboto 400', sans-serif;
    font-size: 0.69rem;
    text-transform: capitalize;
    letter-spacing: normal;
    color: #999999;
}

/* part three */
.part-three {
    position: relative;
}

.part-three .news_type {
    margin-bottom: 0.5rem;
}

.part-three .news_div {
    width: 20.63rem;
    height: 23.5rem;
    margin: 0 auto 1.25rem;
    background-image: url(../resources/bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 1.25rem;
    padding: 1.53rem 0.94rem 1.44rem;
}

.part-three .news_div:last-child {
    margin-bottom: 0;
}

.part-three .news_div .news_img {
    width: 18.75rem;
    height: 13.96rem;
    border-radius: 0.63rem;
    display: block;
    margin-bottom: 0.79rem;
}

.part-three .news_div .title {
    font-family: 'Noto Sans 500', sans-serif;
    font-size: 0.88rem;
    line-height: 137%;
    text-transform: capitalize;
    letter-spacing: normal;
    color: #FFFFFF;
    margin-bottom: 0.84rem;
}

.part-three .news_div .desc {
    font-family: 'Roboto 400', sans-serif;
    font-size: 0.88rem;
    line-height: 140%;
    letter-spacing: normal;
    color: #999999;
}