@font-face {
    font-family: titleFont;
    src: url("../assets/fonts/ys_title_black.ttf");
}
@font-face {
    font-family: textFont;
    src: url("../assets/fonts/pf_medium.ttf");
}

@media (max-width: 768px) {

    body{
        width: 100%;
        background-color : #000000;
        margin: 0;
        color: #ffffff;
        display: flex;
    }
    #header {
        top: 0;
        left: 20%;
        color: #fff;
        background-image: url("https://static-10019068.cos.ap-shanghai.myqcloud.com/resource/pc/sibase_img/header.png");
        text-align: center;
        background-size: 100% 60%;
        width: 100%;
        height: 72vh;
        justify-content: center;  /* 使内部的图片水平居中 */
        background-repeat: no-repeat;
    }
    .index_img{
        transform: scale(0.2);
        margin: -1% -12% 0;
    }
    .title_img {
        transform: scale(0.3);
        margin: -28% -52% 0;
    }
    .solid_title{
        display: none;
        transform: scale(0.3);
        font-size: 20px;
        padding-top: 28px;
        margin-top: -10%;
    }

    .second_part{
        top: -4%;
        position: relative;  /* 设置为相对定位，使内部的图片可以相对于它定位 */
        background-image: url("https://static-10019068.cos.ap-shanghai.myqcloud.com/resource/pc/sibase_img/background_second.png");
        text-align: center;
        background-size: 100% 90%;
        width: 100%;
        display: flex;
        height: 90vh;
        justify-content: center;  /* 使内部的图片水平居中 */
        background-repeat: no-repeat;
    }
    .sevenFaculty{
        transform: scale(0.3);
        position: absolute;
        top: -5%;
    }
    .facultyIntro{
        transform: scale(0.35);
        position: absolute;
        top: 3%;
    }
    div.swiper-container {
        position: absolute;
        top: 55%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 70%;
        height: 400px;
        border-radius: 5px;
        background-color: transparent;
    }
    div.swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
        color: #ffffff;
        font-size: 60px;
        background-size: 70%;
        background-repeat: no-repeat;
    }
    .swiperImg{
        transform: scale(0.25);
    }
    .chatWithGpt{
        transform: scale(0.4);
        position: relative;
        top: 74%;
    }

    .third_part{
        position: relative;  /* 设置为相对定位，使内部的图片可以相对于它定位 */
        top: -5%;
        background-image: url("https://static-10019068.cos.ap-shanghai.myqcloud.com/resource/pc/sibase_img/third_background.png");
        text-align: center;
        background-size: 100% 100%;
        width: 100%;
        height: 90vh;
        display: flex;
        justify-content: center;  /* 使内部的图片水平居中 */
        background-repeat: no-repeat;
    }
    .badge_part {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 900px;
        height: 500px;
        margin-top: 33%;
    }

    .arrow {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 100%;
        height: 70%; /* 将高度设置为自动 */
        margin-left: -1%;
    }
    .arrow span {
        width: calc(33.33% - 10px);
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        height: 60px;
    }
    .arrow img {
        transform: scale(0.35);
        margin: -10px -20px;
        cursor: pointer;
    }
    .arrow p {
        margin-top: -75px;
        font-family: textFont;
        font-size: 15px;
    }

    .toRoom{
        transform: scale(0.4);
        position: absolute;
        top: 84%;
        left: -20%;
    }

    .fourth_part{
        position: relative;
        top: -5%;
        background-image: url("https://static-10019068.cos.ap-shanghai.myqcloud.com/resource/pc/sibase_img/fourth_bg.png");
        text-align: center;
        background-size: 100% 57%;
        width: 100%;
        display: flex;
        height: 100vh;
        justify-content: center;  /* 使内部的图片水平居中 */
        background-repeat: no-repeat;
    }
    .stationTitle-container {
        text-align: center;
        margin-top: 10px;
    }
    .custom-stationTitle {
        background-image: url("../img/title_bg.png");
        background-repeat: no-repeat;
        background-color: transparent;
        transform: scale(0.3);
        width: 717px;
        height: 155px;
        font-family: titleFont;
        font-size: 70px;
        color: #61ff92;
        border: none;
        padding: 10px 20px;
        margin-top: -30px;
    }
    .fourBorder {
        transform: scale(0.24);
        margin-top: -20%;
        display: inline-block;
        position: absolute;
        font-size: 18px; /* 根据需要调整字体大小 */
        color: white; /* 文字颜色 */
    }
    .fontcontainer {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
    .titleFont1 {
        position: absolute;
        display: block;
        font-size: 15px;
        color: #61ff92;
        font-family: titleFont;
        left: 2%;
        top: 20%;
        text-decoration: none;
    }
    .textFont1 {
        position: absolute;
        display: block;
        font-size: 10px;
        color: #cccccc;
        font-family: textFont;
        left: 8%;
        top: 23%;
    }
    .titleFont2 {
        position: absolute;
        display: block;
        font-size: 15px;
        color: #61ff92;
        font-family: titleFont;
        left: 73%;
        top: 20%;
    }
    .textFont2 {
        position: absolute;
        display: block;
        font-size: 10px;
        color: #cccccc;
        font-family: textFont;
        left: 77%;
        top: 23%;
    }
    .titleFont3 {
        position: absolute;
        display: block;
        font-size: 13px;
        color: #61ff92;
        font-family: titleFont;
        left: 2%;
        top: 35%;
    }
    .textFont3 {
        position: absolute;
        display: block;
        font-size: 10px;
        color: #cccccc;
        font-family: textFont;
        left: 5%;
        top: 38%;
    }
    .titleFont4 {
        position: absolute;
        display: block;
        font-size: 14px;
        color: #61ff92;
        font-family: titleFont;
        left: 73%;
        top: 34%;
    }
    .textFont4 {
        position: absolute;
        display: block;
        font-size: 10px;
        color: #cccccc;
        font-family: textFont;
        left: 74%;
        top: 39%;
    }
    .custom-stationTitle2{
        background-image: url("../img/title_bg.png");
        background-repeat: no-repeat;
        background-color: transparent;
        transform: scale(0.5);
        width: 500px;
        height: 90px;
        font-family: titleFont;
        font-size: 40px;
        color: #61ff92;
        border: none;
        padding: 20px 20px;
        z-index: 9;
        position: absolute;
        top: 52%;
    }
    .custom-stationTitle3{
        background-image: url("../img/title_bg.png");
        background-repeat: no-repeat;
        background-color: transparent;
        transform: scale(0.5);
        width: 500px;
        height: 90px;
        font-family: titleFont;
        font-size: 40px;
        color: #61ff92;
        border: none;
        padding: 20px 50px;
        z-index: 9;
        position: absolute;
    }

    .libraryPart{
        position: relative;  /* 设置为相对定位，使内部的图片可以相对于它定位 */
        background-image: url("../img/libraryPart.png");
        text-align: center;
        background-size: 100% 70%;
        width: 100%;
        display: flex;
        height: 60vh;
        justify-content: center;  /* 使内部的图片水平居中 */
        background-repeat: no-repeat;
        top: -10%;
    }
    .areaShow{
        position: absolute;
        background-size: 99%;
        background-repeat: no-repeat;
        background-color: transparent;
        width: 90%;
        height: 65%;
        margin-top: 6%;
        justify-content: center;
        align-items: center;
    }
    .button-container{
        margin-left: -1%;
        margin-top: 1%;
        background-color: transparent;
    }
    .img-button {
        background-color: transparent;
        border: none;
        padding: 5px 5px;
        margin-top: 11px;
        width: 45px;
        height: 45px;
        background-size: cover;
        z-index: 99;
        margin-left: -86%;
    }
    .display-image{
        background-color: transparent;
        z-index: 99;
        margin-top: -133%;
        margin-left: -75%;
        transform: scale(0.33);
    }
    .tokaiyuan{
        position: absolute;
        transform: scale(0.4);
        top: 59%;
        left: -20%;
    }
    .tolib{
        display: none;
        cursor: pointer;
        transform: scale(0.4);
        position: absolute;
        top: 67%;
        left: -20%;
    }
    .videoPart {
        position: relative;
        background-image: url("../img/video_bg.png");
        text-align: center;
        background-size: 100% 100%;
        width: 100%;
        display: flex;
        height: 90vh;
        justify-content: center;  /* 使内部的图片水平居中 */
        background-repeat: no-repeat;
        background-position: center;
        top: -11%;
    }

    .videoDetails {
        position: absolute;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 900px;
        height: 750px;
        margin-top: 27%;
    }
    .videoImg{
        height: 330px;
        transform: scale(0.6);
        margin: -50px -60px;
    }
    .row {
        display: flex;
        justify-content: space-between;
    }

    .fifth_part{
        position: relative;  /* 设置为相对定位，使内部的图片可以相对于它定位 */
        background-image: url("../img/fifth_bg.png");
        text-align: center;
        background-size: 100% 100%;
        width: 100%;
        display: flex;
        height: 120vh;
        justify-content: center;  /* 使内部的图片水平居中 */
        background-repeat: no-repeat;
        background-position: center;
        top: -12%;
    }

    .showGoods{
        position: relative;  /* 设置为相对定位，使内部的图片可以相对于它定位 */
        background-image: url("../img/showGoods.png");
        text-align: center;
        background-size: 100% 100%;
        width: 100%;
        display: flex;
        height: 60vh;
        justify-content: center;  /* 使内部的图片水平居中 */
        background-repeat: no-repeat;
        background-position: center;
        top: -12%;
    }
    .badge_part2 {
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 900px;
        height: 500px;
        margin-top: 10%;
    }

    .arrow2 {
        position: relative;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        width: 75%;
        height: 100%;
        align-items: center;
    }
    .arrow2 span {
        width: 33%;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
    .arrow2 img {
        transform: scale(0.3);
        margin-top: -50%;
    }
    .toStore{
        transform: scale(0.4);
        position: absolute;
        top: 75%;
        left: -20%;
        cursor: pointer;
    }

    .candSi{
        position: relative;  /* 设置为相对定位，使内部的图片可以相对于它定位 */
        background-image: url("../img/candSi.png");
        text-align: center;
        background-size: 100% 100%;
        width: 100%;
        display: flex;
        height: 60vh;
        justify-content: center;  /* 使内部的图片水平居中 */
        background-repeat: no-repeat;
        background-position: center;
        top: -12%;
    }

}