/* ********** imports ********** */

/* import font files */
@font-face {
    font-family: SourceHanSansCN_R;
    src: url("../fonts/SourceHanSansCN_R.otf");
}
@font-face {
    font-family: SourceHanSansCN_M;
    src: url("../fonts/SourceHanSansCN_M.otf");
}
@font-face {
    font-family: SourceHanSansCN_B;
    src: url("../fonts/SourceHanSansCN_B.otf");
}
@font-face {
    font-family: PangmenZhendaoCushuti;
    src: url("../fonts/pangmenzhengdao_cushuti.ttf");
}

/* ********** #main part ********** */

/* set the styles of the .main-items-title in the #main part */
#main .main-items-title {
    font-size: 1.5em;
    font-family: SourceHanSansCN_B;
    color: rgb(37, 37, 37);
    margin-bottom: 5px;
}

/* set the styles of the .split-line in the #main part */
.split-line {
    width: 100%;
    height: 2px;
    background-color: rgb(61, 105, 181);
}

/* ********** #news part ********** */

/* set the styles of the .news-items */
#main .news-items {
    border: 2px solid rgb(61, 105, 181);
    border-left: none;
    border-right: none;
    background-color: rgba(61, 105, 181, 0.1);
}

/* set the styles & layout of the .news-item in the .news-items */
#main .news-items .news-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 38px;
    color: rgb(37, 37, 37);
}

/* set the styles of the <span> tag in the .news-item */
#main .news-item span {
    font-family: SourceHanSansCN_R;
    font-size: 1.18em;
}

/* set the styles of the .arrow in the #main */
#main .news-item .arrow {
    font-size: 1.19em;
    font-family: SourceHanSansCN_B;
}

/* set the styles of the .link in the #main */
#main .news-link {
    font-family: SourceHanSansCN_M;
    font-size: 1.25em;
    color: rgb(37, 37, 37);
}

/* ********** #school-pictures part ********** */

/* set the layout of the #school-pictures part */
#main #school-pictures {
    margin-top: 25px;
}

/* set the layout of the .school-pictures-imgs in #school-pictures part */
#main #school-pictures .school-pictures-imgs {
    padding: 5px 3px 5px 3px;
    overflow-x: scroll;
    display: flex;
    gap: 5px;
}

/* set the layout of the <img> tag in #school-pictures part */
#main #school-pictures img {
    width: 270px;
    height: 200px;
}

/* ********** #look-school part ********** */

/* set the layout of the #look-school part */
#main #look-school {
    margin-top: 25px;
}

/* ********** #more part ********** */

/* set the layout of the #more part */
#main #more {
    margin-top: 25px;
}

/* set the layout of the .more-part-main in the #more part */
#main #more .more-part-main {
    display: flex;
    justify-content: space-around;
}
@media (width <= 710px) {
    #main #more .more-part-main {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }
}

/* set the styles & layout of the .more-item in the #more-part */
#main #more .more-part-item {
    width: 200px;
    height: 200px;
    border-radius: 25% 75% 80% 20% / 25% 20% 80% 75%;
    background-image: linear-gradient(rgb(93, 123, 175), transparent);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

/* set the styles & layout of the .more-part-item-filter in the #more part */
#main #more .more-part-main .more-part-item-filter {
    background-color: rgba(255, 255, 255, 0.323);
    width: 150%;
    height: 25%;
    font-family: SourceHanSansCN_B;
    font-size: 1.3em;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    bottom: 5px;
}