.title_div .title_h2{
    font-size: 40px;color: var(--background-color);
}

.title_p2{
    font-size: 16px;color: #333333;width: 70%;margin: 0 auto;
}
.img_ul{
    display: flex;align-items: center;justify-content: space-between;
}
.img_ul li{
    width: 25%;text-align: center;
}
.img_ul img{
    margin: 0 auto;
}
.img_name{
    font-size: 20px;color: #333333;font-weight: bold;margin: 20px 0 10px 0;
}
.img_intro{
    font-size: 16px;color: #333333;
}
.img_ul li:nth-child(2),.img_ul li:nth-child(4){
    width: 10%;
}
.img_btn{
    margin: 50px auto;text-align: center;
}
.Joosbeauty_btn{
    background-color: var(--background-color);display: inline-block;padding: 10px 40px;font-size: 16px;color: #FFFFFF;
}
/* Services We Provide */
.Services_ul{
    display: flex;justify-content: space-between;flex-wrap: wrap;
}
.Services_li{
    width: 32%;border: 1px solid var(--background-color);padding: 24px;box-sizing: border-box;margin-bottom: 24px;
}
.Services_div {
    margin-top: 20px;
}
.Services_div .img_name{
    margin-bottom: 12px;
}
.Services_ul .Services_li:nth-child(4),.Services_ul .Services_li:nth-child(5){
    width: 49%;display: flex;justify-content: space-between;align-items: center;
}
.Services_ul .Services_li:nth-child(4) figure,.Services_ul .Services_li:nth-child(5) figure{
    width: 45%;
}
.Services_ul .Services_li:nth-child(4) .Services_div,.Services_ul .Services_li:nth-child(5) .Services_div{
    width: 50%;margin-top: 0;
}


/* 产品切换 */
.Choose_max{
    background-color: #F4FAFF;padding: 80px 0;
}
.choose_bg{
    background-color: #FFFFFF;
}
.tab-controller {
    display: flex;background-color: #FFFFFF;justify-content: space-between;padding: 27px 10%;box-sizing: border-box;border-bottom: 1px solid #E6E6E6;
  
}
.sub-content{
    display: none;
}
.tab-content2 {
    margin-top: 10px;
}

.sub-content {
    margin-top: 10px;
}
.tab-controller .tab-btn{
    width: 40%;text-align: center;position: relative;cursor: pointer;
}
.tab-controller .tab-btn p:nth-child(1){
    font-size: 20px;color: #707070;font-weight: bold;
}
.tab-controller .tab-btn p:nth-child(2){
    font-size: 14px;color: #707070;margin-top: 10px;
}
.tab-controller .tab-btn.active p{
    color: var(--background-color);
}
.tab-controller .tab-btn.active::before{
    content: "";width: 50%;height: 5px;background-color: var(--background-color);position: absolute;left: 50%;transform: translateX(-50%);bottom: -27px;
}

.content-panel{
    display: flex;justify-content: space-between;
}
.panel_left{
    width: 25%;;padding: 45px 20px;box-sizing: border-box;
}
.panel_left .sub-tab-btn:last-of-type{
    border-bottom: 1px solid #E6E6E6
}

.panel_right{
    width: 75%;border-left: 1px solid #E6E6E6;padding: 20px;
}
.panel_right .img_btn{
    display: none;
}
.sub-tab-btn{
    font-size: 16px;color: #707070;font-weight: bold;margin-bottom: 5px;cursor: pointer;padding: 15px;
}
.sub-tab-btn:hover,.sub-tab-btn.active{
    color: var(--background-color);background-color: #F8F9FA;padding: 15px;box-sizing: border-box;
}
.panel_ul{
    display: flex;gap: 1.5%;flex-wrap: wrap;
}
.panel_ul .panel_li{
    width: 32%;margin-bottom: 20px;
}
.panel_li p{
    font-size: 16px;color: #333333;margin-top: 10px;text-align: center;
}

.loading-spinner {
    text-align: center;
    padding: 20px;
    font-size: 16px;
    color: #555;
}
@media screen and (max-width: 1000px) {
    .tab-controller{
        padding: 20px 4%;
    }
    .content-panel{
        flex-wrap: wrap;
    }
    .panel_right{
        border-left: 0px;
    }
    .panel_left,.panel_right{
        width: 100%;
    }
    .panel_left{
        display: flex;overflow-x: scroll;padding: 20px;
    }
    .sub-tab-btn{
        min-width: 250px;text-align: center;box-sizing: border-box;
    }
    .panel_left .img_btn{
        display: none;
    }
    .sub-tab-btn:hover{
        min-width: 250px;box-sizing: border-box;
    }
    .tab-controller .tab-btn p:nth-child(1){
        font-size: 18px;
    }
    .tab-controller .tab-btn p:nth-child(2){
        font-size: 14px;
    }
    .panel_right .img_btn{
        margin: 20px 0 0 ;
    }
}
@media screen and (max-width: 768px) {
    .img_ul{
        flex-wrap: wrap;
    }
    .img_ul li{
        width: 100%;display: flex;align-items: center;margin-bottom: 20px;justify-content: space-between;
    }
    .img_ul li figure{
        width: 30%;
    }
    .img_ul li:nth-child(2), .img_ul li:nth-child(4){
        width: 100%;
    }
    .img_ul li div{
        width: 65%;text-align: left;
    }
    .img_ul li:nth-child(2) img, .img_ul li:nth-child(4) img{
        transform: rotate(90deg)
    }
    .Choose_max{
        padding: 40px 0;
    }
    .choose_bg,.tab-controller{
        background-color: revert;
    }
    .sub-tab-btn:hover, .sub-tab-btn.active{
        background-color: #FFFFFF;
    }
    .panel_ul .panel_li img{
        background-color: #FFFFFF;
    }
    
    .Services_li,.Services_ul .Services_li:nth-child(4), .Services_ul .Services_li:nth-child(5){
        width: 100%;
    }
    .title_div .title_h2{
        font-size: 30px;
    }
    .title_p2{
        width: 96%;
    }
    .panel_left{
        padding: 10px;
    }
    .panel_right{
        padding: 10px 0 0;
    }
}
@media screen and (max-width: 574px) {
    .panel_ul .panel_li{
        width: 49%;
    }
    .img_name{
        font-size: 16px;
    }
    .img_intro{
        font-size: 13px;
    }
    .title_p2,.sub-tab-btn{
        font-size: 14px;
    }
    .tab-controller{
        overflow-x: scroll;
    }
    .tab-controller .tab-btn{
        min-width: 300px;
    }
    .tab-controller .tab-btn.active::before{
        bottom: -10px;
    }
    .sub-tab-btn{
        padding: 10px;
    }
    .Services_ul .Services_li:nth-child(4), .Services_ul .Services_li:nth-child(5){
        display: block;
    }
    .Services_ul .Services_li:nth-child(4) figure, .Services_ul .Services_li:nth-child(5) figure,
    .Services_ul .Services_li:nth-child(4) .Services_div, .Services_ul .Services_li:nth-child(5) .Services_div{
        width: 100%;
    }
}