#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;
    width: 21.25rem;
    height: 6.75rem;
    gap: 0.40rem;
    margin: 1.31rem auto 1.69rem;
    background: #FFFFFF;
    border-radius: 0.94rem;
    padding: 0.75rem 0.45rem 0.59rem 0.45rem;
}

.category_div {
    width: 4.81rem;
    height: 5.5rem;
    /* display: flex;
    justify-content: center;
    align-items: center; */
    padding: 1.02rem 0.33rem;
    flex-shrink: 0;
    border-radius: 1.25rem;
    background: #F3EED4;
}

.category .category_div:nth-child(4n) {
    background: rgba(178, 217, 33, 0.9);
}

.category .category_div:nth-child(4n+1) {
    background: rgba(243, 238, 212, 0.9);
}

.category .category_div:nth-child(4n+2) {
    background: rgba(229, 139, 74, 0.8);
}

.category .category_div:nth-child(4n+3) {
    background: rgba(66, 113, 74, 0.8)
}

.category .category_div_select:nth-child(4n) {
    border: 0.15rem solid rgba(178, 217, 33);
}

.category .category_div_select:nth-child(4n+1) {
    border: 0.15rem solid rgba(243, 238, 212, 1);
}

.category .category_div_select:nth-child(4n+2) {
    border: 0.15rem solid rgba(229, 139, 74);
}

.category .category_div_select:nth-child(4n+3) {
    border: 0.15rem solid rgba(66, 113, 74);
}

.category_div img {
    width: 2.19rem;
    height: 2.19rem;
    object-fit: contain;
    margin: 0 auto 0.56rem;
    display: block;
}

.category_div .cat_name {
    font-family: 'Roboto 400', sans-serif;
    font-size: 0.63rem;
    font-weight: normal;
    line-height: normal;
    letter-spacing: normal;
    color: #3D3D3D;
    /* white-space: nowrap; */
    text-align: center;
    padding: 0 0.5rem;
}

.type {
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 0.31rem;
    font-family: 'Roboto 500', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    line-height: normal;
    letter-spacing: normal;
    color: #131313;
}

.more {
    width: 19.75rem;
    height: 2.69rem;
    margin: 1.2rem auto 0;
    border-radius: 2.81rem;
    border: 0.03rem solid #3B7636;
    font-family: 'Roboto 400', sans-serif;
    font-size: 0.88rem;
    line-height: normal;
    letter-spacing: normal;
    color: #3B7636;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.type .line {
    width: 0.41rem;
    height: 0.94rem;
    background: #3B7636;
}

/* part one strat */
.part-one {
    width: 21.25rem;
    margin: 0 auto;
    padding: 1.56rem 0.69rem 1.25rem;
    border-radius: 1.25rem;
    background: linear-gradient(180deg, #E2EEE2 0%, rgba(255, 255, 255, 0) 27%);
}

.part-one-inner {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1.59rem;
}

.part-one .news_div {
    width: 9.69rem;
    height: 9.07rem;
    border-radius: 0.94rem;
    position: relative;
    overflow: hidden;
}

.part-one .news_div::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 4.13rem;
    border-radius: 0.94rem;
    background: linear-gradient(180deg, rgba(216, 216, 216, 0) 0%, #979797 100%);
    z-index: 0;
}

.part-one .news_div .news_img {
    width: 100%;
    height: 100%;
    border-radius: 0.63rem;
    object-fit: cover;
}

.part-one .news_div .title {
    position: absolute;
    z-index: 1;
    bottom: 0.38rem;
    left: 0;
    font-family: 'Roboto 400', sans-serif;
    font-size: 0.81rem;
    line-height: 1rem;
    letter-spacing: normal;
    color: #FFFFFF;
    width: 100%;
    padding: 0 0.3rem;
}

.part-one .news_div .desc {
    font-family: 'Roboto 500', sans-serif;
    font-size: 0.63rem;
    line-height: normal;
    letter-spacing: normal;
    color: #939393;
    margin-bottom: 0.41rem;
}

/* part one end */
/* part two start */
.part-two {
    overflow-x: scroll;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: calc(100% - 0.63rem);
    gap: 1.16rem;
    margin: 1.16rem 0 1.06rem 0.63rem;
    /* border-radius: 0.94rem; */
    padding: 0 0.63rem 0 0;
}

.part-two .news_div {
    width: 15.63rem;
    height: 15.38rem;
    padding: 0.72rem 0.63rem 1.03rem;
    border-radius: 0.94rem;
    background: linear-gradient(180deg, #E2EEE2 0%, rgba(226, 238, 226, 0) 100%);
    flex-shrink: 0;
}

.part-two .news_img {
    width: 100%;
    height: 8.75rem;
    border-radius: 0.56rem;
}

.part-two .title {
    font-family: 'Noto Sans 500', sans-serif;
    font-size: 1rem;
    line-height: 150%;
    letter-spacing: normal;
    color: #222222;
    margin: 0.62rem 0 0.44rem;
}

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

/* part two end */
/* part three start */
.part-three,
.part-four,
.part-five {
    width: 21.25rem;
    margin: 0 auto;
    padding: 0.94rem 0.69rem 1.25rem;
    border-radius: 0.5rem;
    margin-bottom: 1.56rem;
    box-shadow: 0rem 0.06rem 0.16rem 0rem rgba(0, 0, 0, 0.1);
    background: linear-gradient(180deg, #E2EEE2 0%, rgba(255, 255, 255, 0) 27%);
}

.part-three-inner .news_div,
.part-four-inner .news_div {
    display: grid;
    grid-template-columns: 6.63rem 1fr;
    gap: 0.63rem;
    align-items: center;
    justify-content: space-between;
    padding: 0.94rem 0;
    border-bottom: 0.03rem solid rgba(216, 216, 216, 0.48);
}

.part-three-inner .news_div:last-child {
    border: none;
    padding-bottom: 0;
}

.part-three .news_img,
.part-four .news_img {
    width: 100%;
    height: 5.31rem;
    border-radius: 0.31rem;
}

.part-three .title,
.part-four-inner .news_div .title {
    font-family: 'Noto Sans 500', sans-serif;
    font-size: 0.88rem;
    line-height: 140%;
    letter-spacing: normal;
    color: #333333;
    margin-bottom: 0.63rem;
}

.part-three .author,
.part-four .news_div .author {
    font-family: 'Noto Sans 400', sans-serif;
    font-size: 0.69rem;
    line-height: normal;
    letter-spacing: normal;
    color: #999999;
}

/* part three end */
/* part four start */
.part-four .news_b_div {
    padding: 0.94rem 0;
    border-bottom: 0.03rem solid rgba(216, 216, 216, 0.48);
}

.part-four .news_b_div:last-child {
    border: none;
    padding-bottom: 0;
}

.part-four .news_b_div .title {
    font-family: 'Roboto 500', sans-serif;
    font-size: 0.88rem;
    line-height: 140%;
    letter-spacing: normal;
    color: #333333;
    margin-bottom: 0.63rem;
}

.part-four .news_b_div .desc {
    font-family: 'Roboto 400', sans-serif;
    font-size: 0.75rem;
    line-height: 140%;
    letter-spacing: normal;
    color: #555555;
    margin-bottom: 0.63rem;
}

.part-four .news_b_div .author {
    font-family: 'Roboto 400', sans-serif;
    font-size: 0.69rem;
    line-height: normal;
    letter-spacing: normal;
    color: #999999;
}

/* part four end */
/* part five start */
.part-five .news_div {
    margin: 1.38rem 0 1rem;
}

.part-five .news_div .news_img {
    width: 100%;
    height: 12.13rem;
    border-radius: 0.31rem;
    margin-bottom: 1.25rem;
}

.part-five .news_div .title {
    font-family: 'Roboto 500', sans-serif;
    font-size: 0.88rem;
    line-height: 140%;
    letter-spacing: normal;
    color: #333333;
    margin-bottom: 0.63rem;
}

.part-five .news_div .desc {
    font-family: 'Roboto 400', sans-serif;
    font-size: 0.75rem;
    line-height: 140%;
    letter-spacing: normal;
    color: #555555;
    margin-bottom: 0.63rem;
}

.part-five .news_div .author {
    font-family: 'Roboto 400', sans-serif;
    font-size: 0.69rem;
    line-height: normal;
    letter-spacing: normal;
    color: #999999;
}

.part-five .content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    align-items: center;
    justify-content: space-between;
    gap: 0.88rem;
}

.part-five .content .news_b_div {
    width: 100%;
    border-radius: 0.31rem;
    border: 0.03rem solid #D8D8D8;
    padding-bottom: 0.9rem;
}

.part-five .content .news_b_div .news_img {
    width: 100%;
    height: 7rem;
    border-radius: 0.31rem 0.31rem 0rem 0rem;
    margin-bottom: 0.38rem;
}

.part-five .content .news_b_div .title {
    font-family: 'Roboto 500', sans-serif;
    font-size: 0.88rem;
    line-height: 141%;
    letter-spacing: normal;
    color: #3D3D3D;
    margin: 0 auto 0.55rem;
    width: 92%;
}

.part-five .content .news_b_div .author {
    font-family: 'Roboto 400', sans-serif;
    font-size: 0.69rem;
    line-height: normal;
    text-transform: lowercase;
    letter-spacing: normal;
    color: #999999;
    margin: 0 auto;
    width: 92%;
}

/* part five end */