* {
    box-sizing: content-box;
    padding:0;
    margin:0;
}

img {
    width: 100%;
}
.header {
    background-color: #694A33;
}
.button-register {
    background-color: #FFFAEE;
    border-radius: 65px;
    color: #694A33;
    padding: 10px 30px 10px 30px;
    text-decoration: none;
    font-size: 15px;
}
.logo {
    width: 50px;
    height: 50px;
    margin-top: 8px;
    margin-left: 10px;
    margin-right: 50px;
}
.button {
    padding: 10px 40px 10px 40px;
    justify-content: center;
    font-size: 15px;
    background-color: #694A33;
}
.button:hover{
    background-color: #583f2c;
}
.shouye {
    color: #FFFAEE;
    text-decoration: none;
}
.jiansuo {
    color: #FFFAEE;
    text-decoration: none;
}
.yaoshan {
    color: #FFFAEE;
    text-decoration: none;
}
.luntan {
    color: #FFFAEE;
    text-decoration: none;
}
.nav-list {
    display:flex;
    justify-content: center;
    align-items: center;
    padding:10px 20px 10px 20px;
}
.header-list {
    display:flex;
    justify-content: center;
    margin-left: auto;
    margin-right: auto;
    gap:6%;
}
.header-right {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 10px 10px 10px;
}
.lindang{
    width: 30px;
    height: 30px;
}
.main {
    background-color: #F9F5EB;
}
.section1 {
    display: flex;
    justify-content: center;
    width: 60%;
    margin-left: 20%;
    margin-right: 20%;
}
.jiansuolan {
    display: flex;
    justify-content: center;
    margin-left: 20%;
    margin-right: 20%;
    width: 60%;
    padding: 10px;
    text-align: center;
    border-radius: 20px;
    border: none;
    margin-top: 20px;
    font-size:large;
}
.sousuobankuai {
    display: flex;
    justify-content: center;
    margin-left: 10%;
    margin-right: 10%;
}
.zuijinsousuo {
    background-color: #FFFCF6;
    padding:0% 20% 0% 13%;
    margin-top: 20px;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
    height: 300px;
}
.huadong{
    overflow-y: scroll;
    height: 160px;
}
.zuijinsousuo-p {
    color: #694A33;
    font-size:35px; 
    list-style: none;
    margin-top: 30px;
    margin-bottom: 20px;
}
.remensousuo {
    background-color: #FFFCF6;
    padding:0% 13% 0% 20%;
    margin-top: 20px;
    border-top-right-radius: 20px;
    border-bottom-right-radius: 20px;
    text-align: left;
    height: 300px;
}
.sousuolan {
    display:flex;
    justify-content:left;
    padding:5px 0px 5px 0px;
    font-size: 20px;
}
.title {
    font-size:45px;
    display:flex;
    justify-content: center;
    color: #694A33;
    margin-top: 10px;
    margin-bottom: 10px;
}
.gongxiao {
    width: 100%;
    max-width: 1200px;
    height: 650px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr;
    grid-template-areas: 
    "zhike zhike zhike xiaoshi"
    "zhike zhike zhike huatan"
    "zhixue anshen buxu qingre";

    row-gap: 40px;
    column-gap: 50px;
}
.gongxiao-bg {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: end;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    
}
.gongxiao-bg h3 {
    background-color: #694a3367;
    color: white;
    padding: 25px;
    flex-grow: 1;
    font-size: 30px;
}
.gongxiao-bg h3:hover{
    color:#dfc382;
}
.zhike {
    grid-area: zhike;
    background-image: url("https://res.cloudinary.com/dxadvmhxz/image/upload/v1747035075/zhike_nrdncz.png");
}
.xiaoshi {
    grid-area: xiaoshi;
    background-image: url("https://res.cloudinary.com/dxadvmhxz/image/upload/v1747035077/xiaoshi_ps9kfk.png");
}
.huatan {
    grid-area: huatan;
    background-image: url("https://res.cloudinary.com/dxadvmhxz/image/upload/v1747035071/huatan_yml2la.png");
}
.qingre {
    grid-area: qingre;
    background-image: url("https://res.cloudinary.com/dxadvmhxz/image/upload/v1747035076/qingre_an5hfd.png");
}
.buxu {
    grid-area: buxu;
    background-image: url("https://res.cloudinary.com/dxadvmhxz/image/upload/v1747035065/buxu_sgsfle.png");
}
.anshen {
    grid-area: anshen;
    background-image: url("https://res.cloudinary.com/dxadvmhxz/image/upload/v1747035071/anshen_gjdkpg.png");
}
.zhixue {
    grid-area: zhixue;
    background-image: url("https://res.cloudinary.com/dxadvmhxz/image/upload/v1747035077/zhixue_vdj7ea.png");
}
.hua {
    background-color: #D7D1BB;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 50px;
    min-width: 150px;
    font-size: 35px;
}
.cao {
    background-color: #B8B292; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 50px;
    min-width: 150px;
    font-size: 35px;
}
.ye {
    background-color: #E0D6BD;   
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 50px;
    min-width: 150px;
    font-size: 35px;
}
.shupi {
    background-color: #B19F88;    
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 50px;
    min-width: 150px;
    font-size: 35px;
}
.gen {
    background-color: #B6AB99;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 50px;
    min-width: 150px;
    font-size: 35px;
}
.guo {
    background-color: #E0D6BD;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 50px;
    min-width: 150px;
    font-size: 35px;
}
.shuzhi{
    background-color: #B6AB99;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 50px;
    min-width: 150px;
    font-size: 35px;
}
.teng {
    background-color: #C2CCBD;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 50px;
    min-width: 150px;
    font-size: 35px;
}
.jun {
    background-color: #B19F88;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 50px;
    min-width: 150px;
    font-size: 35px;
}
.kuang {
    background-color: #D7D1BB;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 50px;
    min-width: 150px;
    font-size: 35px;
}
.dongwu {
    background-color: #B6AB99;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 50px;
    min-width: 150px;
    font-size: 35px;
}
.ziran {
    display:flex;
    justify-content: center;
    gap: 20px ;
    text-align:right;
    width:1200px;
    margin-right:auto;
    margin-left:auto;
    overflow-x: scroll;
}
label{ 
    display:flex;
    background-color: white;
    height: 40;
}
.chatu {
    border-radius: 50px;
}
.ziti {
    writing-mode: vertical-rl;
    margin-right: 20px;
    margin-top: 50px;
    font-size: 35px;
    letter-spacing: 10px;
}
.container {
    margin: 0 auto;
    width: 1200px;
    height: 900px;
    display: flex;
    align-items: center;
}
.item1, .item2, .item3, .item4,.item5 {
    background-image: url("https://res.cloudinary.com/dxadvmhxz/image/upload/v1747035071/item1_octvfz.png");
    background-size: cover;
    background-repeat: no-repeat;
    writing-mode: vertical-rl;
    text-align:left;
    font-size: 60px;
    flex-grow: 1;
    height: 900px;
    position: relative;
    transition: all 1000ms ease-in-out;
    &:hover {
        flex-grow: 4.3;
    }
    &:before {
        content: attr(data-order);
        position: absolute;
        top:90px;
        left: 60px;
        transform: translate(-50%, -50%);
        color: white;
    }
}
.item2 {
    background-image: url("https://res.cloudinary.com/dxadvmhxz/image/upload/v1747035073/item2_joo2ta.png");
}
.item3 {
    background-image: url("https://res.cloudinary.com/dxadvmhxz/image/upload/v1747035071/item3_u9ciqf.png");
    &:before {
        content: attr(data-order);
        position: absolute;
        top:140px;
        left: 60px;
        transform: translate(-50%, -50%);
        color: white;
    }
}
.item4 {
    background-image: url("https://res.cloudinary.com/dxadvmhxz/image/upload/v1747035071/item4_rpgqgi.png");
}
.item5 {
    background-image: url("https://res.cloudinary.com/dxadvmhxz/image/upload/v1747035072/item5_f2dqte.png");
}
.section6-2{
    padding:20px 0px 40px 0px;
}
.peifang-box {
    display:flex ;
    justify-content: center;
    gap:40px;
}
.richang {
    width: 600px;
    height: 400px;
    background-image: url(https://res.cloudinary.com/dxadvmhxz/image/upload/v1747035069/peifang-up-1_ckb9mu.png);
    background-size: cover;
    transition: background-image 0.5s ease;
    border-radius: 25px;
}
.richang:hover {
    background-image: url(https://res.cloudinary.com/dxadvmhxz/image/upload/v1747035068/peifang-up-1-change_ijwtf4.png);
}
.jingdian {
    width: 600px;
    height: 400px;
    background-image: url(https://res.cloudinary.com/dxadvmhxz/image/upload/v1747035070/peifang-up-2_bymtw3.png);
    background-size: cover;
    transition: background-image 0.5s ease;
    border-radius: 25px;
}
.jingdian:hover {
    background-image: url(https://res.cloudinary.com/dxadvmhxz/image/upload/v1747035070/peifang-up-2-change_n5mlxu.png);
}
.text {
    font-size: 60px;
    display: flex;
    justify-content:center ;
    margin-top: 160px;
    color: white;
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.peifang-down-1 {
    display: flex;
    justify-content: center;
    margin: 30px;
    gap: 30px;
}
.image-container {
    border-top-left-radius: 30px;
    border-top-right-radius: 30px;
    position: relative;
    width: 400px;
    height: 400px;
    overflow: hidden;
}

image-container img {
    width: 100%;
    height: auto;
    transition: transform 0.6s ease;
    border-radius: 60px;
}
.image-container:hover img {
    transform: scale(1.2);
}
.image-container-p {
    background-color: white;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    gap: 15px;
    width: 400px;
}
.image-container-p-1 {
    font-size: 40px;
    padding: 10px 10px 0px 10px;
}
.image-container-p-1:hover {
    color: #d4990e;
}
.image-container-p-2 {
    font-size: 28px;
    word-break: break-all;
    padding: 10px 10px 10px 10px;
}
.footer {
    background-color: #694A33;
}
.erweima {
    display: flex;
    justify-content: center;
    gap:120px;
    margin-bottom: 20px;
}
.erweima-p {
    color: #ffffff;
    border: solid white 0.5px;
    text-align: center;
    margin-top: 40px;
    margin-bottom: 15px;
}
.ma {
    width: 100px;
    height: 100px;
}
.footer-hr {
    margin-left: 15%;
    margin-right: 15%;
}
.footer-li {
    padding: 7px 0px 7px 0px;
    color: white;
    display: flex;
    justify-content: center;
    list-style-type: none;
    gap: 50px;
}
.footer-p {
    color:white;
    text-align: center;
    padding:5px 0px 5px 0px;
}
.footer-pd {
    color:white;
    text-align: center;
    padding:25px 0px 20px 0px;
}
.footer-p:hover{
    color: #f9edd4;
}
@media (max-width: 768px) {
    
    .gongxiao {
        width: 550px;
        height: 500px;
        grid-template-columns: 1fr 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr;
        grid-template-areas: 
            "zhike zhike zhike "
            "zhike zhike zhike "
            "xiaoshi huatan zhixue" 
            "anshen buxu qingre";
        row-gap: 20px;
        column-gap: 30px;
    }
    .gongxiao-bg h3 {
        background-color: #694a3367;
        color: white;
        padding: 20px;
        flex-grow: 1;
        font-size: 20px;
    }
    .logo{
        width: 30px;
        height: 30px;
        padding: 5px 0px 12px 0px;
    }
    .button-register {
        background-color: #FFFAEE;
        border-radius: 65px;
        color: #694A33;
        padding: 5px 10px 5px 10px;
        text-decoration: none;
        font-size: 10px;
    }
    .button {
        list-style: none;
        padding: 5px 20px 5px 20px;
        justify-content: center;
        font-size: 10px;
    }
    .nav-list {
        display:flex;
        justify-content: center;
        align-items: center;
        padding: 15px 0px 10px 15px;
    }
    .lindang{
        width: 20px;
        height: 20px;
    }
    .header-right {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 5px 5px 5px 10px;
    }
    .section1 {
        display: flex;
        justify-content: center;
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
    }
    .zuijinsousuo-p {
        color: #694A33;
        font-size:20px; 
        list-style: none;
        margin-top: 15px;
        margin-bottom: 7px;
    }
    .jiansuolan {
        display: flex;
        justify-content: center;
        margin-left: 10%;
        margin-right: 10%;
        width: 80%;
        padding: 10px;
        text-align: center;
        border-radius: 20px;
        border: none;
        margin-top: 20px;
        font-size:20px;
    }
    .zuijinsousuo {
        background-color: #FFFCF6;
        padding:0% 20% 0% 13%;
        margin-top: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
        height: 150px;
    }
    .remensousuo {
        background-color: #FFFCF6;
        padding:0% 13% 0% 20%;
        margin-top: 20px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        text-align: left;
        height: 150px;
    }
    .huadong{
        overflow-y: scroll;
        height: 80px;
    }
    .sousuolan {
        display:flex;
        justify-content:left;
        padding:5px 0px 5px 0px;
        font-size: 10px;
    }
    .title {
        font-size:25px;
        display:flex;
        justify-content: center;
        color: #694A33;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .ziran {
        display:flex;
        justify-content: center;
        gap: 15px ;
        text-align:right;
        width: 550px;
        margin:auto;
        overflow-x: scroll;
    }
    .hua {
        background-color: #D7D1BB;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 25px;
        min-width: 80px;
    }
    .cao {
        background-color: #B8B292; 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 25px;
        min-width: 80px;
    }
    .ye {
        background-color: #E0D6BD;   
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 25px;
        min-width: 80px;
    }
    .shupi {
        background-color: #B19F88;    
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 25px;
        min-width: 80px;
    }
    .gen {
        background-color: #B6AB99;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 25px;
        min-width: 80px;
    }
    .guo {
        background-color: #E0D6BD;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 25px;
        min-width: 80px;
    }
    .shuzhi{
        background-color: #B6AB99;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 25px;
        min-width: 80px;
    }
    .teng {
        background-color: #C2CCBD;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 25px;
        min-width: 80px;
    }
    .jun {
        background-color: #B19F88;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 25px;
        min-width: 80px;
    }
    .kuang {
        background-color: #D7D1BB;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 25px;
        min-width: 80px;
    }
    .dongwu {
        background-color: #B6AB99;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 25px;
        min-width: 80px;
    }
    .ziti {
        writing-mode: vertical-rl;
        margin-right: 20px;
        margin-top: 20px;
        font-size: 20px;
        letter-spacing: 10px;
    }
    .chatu {
        border-radius: 35px;
        width: 70px;
        
    }
    .container {
        margin: 0 auto;
        width: 550px;
        height: 400px;
        display: flex;
        align-items: center;
    }
    .item1, .item2, .item3, .item4,.item5 {
        background-image: url("./img/item1.png");
        background-size: cover;
        background-repeat: no-repeat;
        writing-mode: vertical-rl;
        text-align:left;
        font-size: 25px;
        flex-grow: 1;
        height: 400px;
        position: relative;
        transition: all 1000ms ease-in-out;
        &:hover {
            flex-grow: 4.3;
        }
        &:before {
            content: attr(data-order);
            position: absolute;
            top:70px;
            left: 40px;
            transform: translate(-50%, -50%);
            color: white;
        }
    }
    .item2 {
        background-image: url("./img/item2.png");
    }
    .item3 {
        background-image: url("./img/item3.png");
        &:before {
            content: attr(data-order);
            position: absolute;
            top:90px;
            left: 40px;
            transform: translate(-50%, -50%);
            color: white;
        }
    }
    .item4 {
        background-image: url("./img/item4.png");
    }
    .item5 {
        background-image: url("./img/item5.png");
    }
    .peifang-box {
        display:flex ;
        justify-content: center;
        gap:20px;
    }
    .richang {
        width: 300px;
        height: 200px;
        background-image: url(./img/peifang-up-1.png);
        background-size: cover;
        transition: background-image 0.5s ease;
        border-radius: 25px;
    }
    .richang:hover {
        background-image: url(./img/peifang-up-1-change.png);
    }
    .jingdian {
        width: 300px;
        height: 200px;
        background-image: url(./img/peifang-up-2.png);
        background-size: cover;
        transition: background-image 0.5s ease;
        border-radius: 25px;
    }
    .jingdian:hover {
        background-image: url(./img/peifang-up-2-change.png);
    }
    .text {
        font-size: 30px;
        display: flex;
        justify-content:center ;
        margin-top: 80px;
        color: white;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    .peifang-down-1 {
        display: flex;
        justify-content: center;
        margin: 15px;
        gap: 15px;
    }
    .image-container {
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        position: relative;
        width: 200px;
        height: 200px;
        overflow: hidden;
    }
    
    image-container img {
        width: 100%;
        height: auto;
        transition: transform 0.6s ease;
        border-radius: 60px;
    }
    .image-container:hover img {
        transform: scale(1.2);
    }
    .image-container-p {
        background-color: white;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        gap: 15px;
        width: 200px;
    }
    .image-container-p-1 {
        font-size: 20px;
        padding: 5px 5px 0px 5px;
    }
    .image-container-p-1:hover {
        color: #d4990e;
    }
    .image-container-p-2 {
        font-size: 13px;
        word-break: break-all;
        padding: 5px 5px 5px 5px;
    }
    .footer {
        background-color: #694A33;
    }
    .erweima {
        display: flex;
        justify-content: center;
        gap:60px;
        margin-bottom: 10px;
    }
    .erweima-p {
        color: #ffffff;
        border: solid white 0.5px;
        text-align: center;
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .ma {
        width: 50px;
        height: 50px;
    }
    .footer-hr {
        margin-left: 15%;
        margin-right: 15%;
    }
    .footer-li {
        padding: 7px 0px 7px 0px;
        color: white;
        display: flex;
        justify-content: center;
        list-style-type: none;
        gap: 15px;
        font-size: 8px;
    }
    .footer-p {
        color:#F9F5EB;
        text-align: center;
        padding:5px 0px 5px 0px;
        font-size: 8px;
    }
    
    .footer-pd {
        color:#F9F5EB;
        text-align: center;
        padding:10px 0px 10px 0px;
        font-size: 8px;
    }
    
    .footer-p:hover{
        color: #f9edd4;
    }
    
    
}

@media (max-width: 430px) {
    .gongxiao {
        width: 350px;
        height: 400px;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
        grid-template-areas: 
            "zhike zhike  "
            "zhike zhike "
            "xiaoshi huatan"
            "zhixue anshen "
            "buxu qingre";
        row-gap: 10px;
        column-gap: 15px;
    }
    .gongxiao-bg h3 {
        background-color: #694a3367;
        color: white;
        padding: 15px;
        flex-grow: 1;
        font-size: 15px;
    }
    .logo{
        width: 30px;
        height: 30px;
        padding: 13px 0px 12px 0px;
        margin: 0%;
    }
    .button-register {
        background-color: #FFFAEE;
        border-radius: 65px;
        color: #694A33;
        padding: 5px 10px 5px 10px;
        text-decoration: none;
        font-size: 8px;
    }
    .button {
        list-style: none;
        padding: 5px 20px 5px 20px;
        justify-content: center;
        font-size: 10px;
    }
    .nav-list {
        display:flex;
        justify-content: center;
        align-items: center;
        padding: 17px 0px 10px 0px;
    }
    .header-right {
        display: flex;
        align-items: center;
        gap: 5px;
        padding: 13px 0px 12px 0px;
    }
    .section1 {
        display: flex;
        justify-content: center;
        width: 80%;
        margin-left: 10%;
        margin-right: 10%;
    }
    .zuijinsousuo-p {
        color: #694A33;
        font-size:15px; 
        list-style: none;
    }
    .jiansuolan {
        display: flex;
        justify-content: center;
        margin-left: 10%;
        margin-right: 10%;
        width: 80%;
        padding: 10px;
        text-align: center;
        border-radius: 20px;
        border: none;
        margin-top: 15px;
        font-size:15px;
    }
    .sousuobankuai {
        display: flex;
        justify-content: center;
        margin-left: 10%;
        margin-right: 10%;
    }
    .sousuolan {
        display:flex;
        justify-content:left;
        padding:5px 0px 5px 0px;
        font-size: 8px;
    }
    .zuijinsousuo {
        background-color: #FFFCF6;
        padding:0px 40px 0px 50px;
        margin-top: 20px;
        border-top-left-radius: 20px;
        border-bottom-left-radius: 20px;
    }
    .remensousuo {
        background-color: #FFFCF6;
        padding:0px 50px 0px 40px;
        margin-top: 20px;
        border-top-right-radius: 20px;
        border-bottom-right-radius: 20px;
        text-align: left;
    }
    .title {
        font-size:15px;
        display:flex;
        justify-content: center;
        color: #694A33;
        margin-top: 10px;
        margin-bottom: 10px;
    }
    .ziran {
        display:flex;
        justify-content: center;
        gap: 10px ;
        text-align:right;
        width: 350px;
        margin:auto;
        overflow-x: scroll;
    }
    .hua {
        background-color: #D7D1BB;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 25px;
        min-width: 60px;
    }
    .cao {
        background-color: #B8B292; 
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 25px;
        min-width: 60px;
    }
    .ye {
        background-color: #E0D6BD;   
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 25px;
        min-width: 60px;
    }
    .shupi {
        background-color: #B19F88;    
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 25px;
        min-width: 60px;
    }
    .gen {
        background-color: #B6AB99;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 25px;
        min-width: 60px;
    }
    .guo {
        background-color: #E0D6BD;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 25px;
        min-width: 60px;
    }
    .shuzhi{
        background-color: #B6AB99;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 25px;
        min-width: 60px;
    }
    .teng {
        background-color: #C2CCBD;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 25px;
        min-width: 60px;
    }
    .jun {
        background-color: #B19F88;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 25px;
        min-width: 60px;
    }
    .kuang {
        background-color: #D7D1BB;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 25px;
        min-width: 60px;
    }
    .dongwu {
        background-color: #B6AB99;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        border-radius: 25px;
        min-width: 60px;
    }
    .ziti {
        writing-mode: vertical-rl;
        margin-right: 20px;
        margin-top: 20px;
        font-size:15px;
        letter-spacing: 10px;
    }
    .chatu {
        border-radius: 35px;
        width: 60px;
        
    }
    .container {
        margin: 0 auto;
        width: 350px;
        height: 200px;
        display: flex;
        align-items: center;
    }
    .item1, .item2, .item3, .item4,.item5 {
        background-image: url("./img/item1.png");
        background-size: cover;
        background-repeat: no-repeat;
        writing-mode: vertical-rl;
        text-align:left;
        font-size: 15px;
        flex-grow: 1;
        height: 200px;
        position: relative;
        transition: all 1000ms ease-in-out;
        &:hover {
            flex-grow: 3.1;
        }
        &:before {
            content: attr(data-order);
            position: absolute;
            top:30px;
            left: 20px;
            transform: translate(-50%, -50%);
            color: white;
        }
    }
    .item2 {
        background-image: url("./img/item2.png");
    }
    .item3 {
        background-image: url("./img/item3.png");
        &:before {
            content: attr(data-order);
            position: absolute;
            top:45px;
            left: 20px;
            transform: translate(-50%, -50%);
            color: white;
        }
    }
    .item4 {
        background-image: url("./img/item4.png");
    }
    .item5 {
        background-image: url("./img/item5.png");
    }
    .section6-2{
        display: flex;
        justify-content: center;
        width: 300px;
        overflow-x: scroll;
        padding:10px 0px 20px 0px;
        margin-left: 60px;
    }
    .peifang-box {
        display:block ;
        justify-content: center;
        gap:0px;
        margin-left: 60px;
    }
    .richang {
        height:80px;
        background-image: url(./img/peifang-up-1.png);
        background-size: cover;
        transition: background-image 0.5s ease;
        border-radius: 25px;
    }
    .richang:hover {
        background-image: url(./img/peifang-up-1-change.png);
    }
    .jingdian {
        height: 80px;
        background-image: url(./img/peifang-up-2.png);
        background-size: cover;
        transition: background-image 0.5s ease;
        border-radius: 25px;
    }
    .jingdian:hover {
        background-image: url(./img/peifang-up-2-change.png);
    }
    .text {
        font-size: 20px;
        display: flex;
        justify-content:center ;
        margin-top:15px;
        color: white;
        font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    }
    .peifang-down-1 {
        display: flex;
        justify-content: center;
        margin:8px;
        gap: 15px;
    }
    .image-container {
        border-top-left-radius: 15px;
        border-top-right-radius: 15px;
        position: relative;
        width: 60px;
        height: 60px;
        overflow: hidden;
    }
    image-container img {
        width: 100%;
        height: auto;
        transition: transform 0.6s ease;
        border-radius: 60px;
    }
    .image-container:hover img {
        transform: scale(1.2);
    }
    .image-container-p {
        background-color: white;
        border-bottom-left-radius: 15px;
        border-bottom-right-radius: 15px;
        gap: 15px;
        width: 60px;
    }
    .image-container-p-1 {
        font-size: 10px;
        padding: 5px 10px 5px 10px;
    }
    .image-container-p-1:hover {
        color: #d4990e;
    }
    .image-container-p-2 {
        display: none;
    }
    .footer {
        display: none;
    }
}