.title_div .title_h2{
    font-size: 24px;color: var(--background-color);
}
.title_div .title_p{
    margin-bottom: 10px;
}
.title_p2{
    font-size: 16px;color: #333333;margin-bottom: 15px;
}
.img_ul{
    display: flex;gap: 1.5%;
}
.img_ul li{
    width: 32%;
}


/* Certificate */
.ce_content{
    height: 350px;position: relative;
}
.ce_ul{
    display: flex;flex-wrap: wrap;gap: 1%;position: absolute;justify-content: center;
    bottom: 10%;width: 100%;
}
.ce_ul li{
    width: 11%;
}
.ce_bg{
    background-color: #11B6FE;height: 200px;width: 100%;position: absolute;
    bottom: 0;
}
/* supper */
.supper_max{
    position: relative;
}
.supper_content{
    top: 50%;position: absolute;left: 50%;transform: translate(-50%,-50%);
}
.supp_ul{
    display: flex;margin: 0 auto;flex-wrap: wrap;gap: 2%;
}
.supp_ul-item{
    width: 15%;text-align: center;
}
.supp_ul-item img{margin: 0px auto;}
.supp_ul-item .item_p1{
    font-size: 16px;margin-top: 10px;color: #333333;
}
.supp_ul-item .item_p2{
    font-size: 14px;color: #999999;margin-top: 5px;
}
/* Joosbeauty Will Never Let You Down  */
.Joosbeauty_max .play-button{
    position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);
}
.Joosbeauty_flex{
    display: flex;background-color: #F4FAFF;align-items: center;
}
.Joosbeauty_left{
    width: 35%;
}
.Joosbeauty_right{
    width: 65%;box-sizing: border-box;padding: 40px;
}
.Joosbeauty_ul li{
    align-items: flex-start;margin-bottom: 30px;
}
.Joosbeauty_ul p{
    margin-left: 10px;font-size: 16px;color: #333333;
}
.Joosbeauty_btn{
    background-color: var(--background-color);display: inline-block;padding: 10px 40px;font-size: 16px;color: #FFFFFF;
}
/* 视频列表 */
.Feedback_max{
    margin-bottom: 30px;
}
.Feedback_ul{
    display: flex;gap: 1%;flex-wrap: wrap;margin-bottom: 20px;
}
.Feedback_ul li{
    width: 49.5%;margin-bottom: 10px;
}
.label_p{
    position: absolute;left: 20px;bottom: 5%;font-size: 20px;color: var(--background-color);font-weight: bold;
}
/* 播放按钮 */
.Feedback_max .play-button{
    display: flex;background-color: var(--background-color);align-items: center;border-radius: 22px;padding: 5px 5px 5px 20px;   overflow: hidden; 
    cursor: pointer; /* 添加鼠标指针 */z-index: 1;position: absolute;bottom: 5%;right: 20px;
}
/* 背景颜色动画 */
.Feedback_max .play-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%; /* 初始宽度为 0 */
    background-color: #0C0C0D; /* 悬停时的背景色 */
    z-index: 0; /* 确保在文字和图标下方 */
    transition: width 0.4s ease; /* 动画效果 */
}
.Feedback_max .play-button:hover::before {
    width: 100%; /* 宽度扩展到 100% */
}
.Feedback_max .play-button p{
    font-size: 18px;color: #FFFFFF;margin-right: 10px; transition: color 0.3s ease; /* 添加文字颜色渐变 */  position: relative;
    z-index: 1; /* 保持在背景动画上方 */
}
.Feedback_max .play-button:hover p {
    color: #FFFFFF; /* 悬停时文字颜色改变 */
}
.Feedback_max .play-button figure{
    border-radius: 50%;background-color: #FFFFFF;width: 34px;height: 34px;display: flex;align-items: center;justify-content: center; 
    position: relative;
    z-index: 1; /* 保持在背景动画上方 */
    transition: background-color 0.3s ease;
}
/* 图标 */
.Feedback_max .play-button figure img {
    position: absolute;
    transition: opacity 0.3s ease;
}

.Feedback_max .play-button figure .icon-default {
    opacity: 1; /* 默认显示第一个图标 */
}

.Feedback_max .play-button figure .icon-hover {
    opacity: 0; /* 隐藏第二个图标 */
}

.Feedback_max .play-button:hover figure .icon-default {
    opacity: 0; /* 悬停时隐藏第一个图标 */
    
}
.Feedback_max .play-button:hover figure{
    background-color: var(--background-color);
}
.Feedback_max .play-button:hover figure .icon-hover {
    opacity: 1; /* 悬停时显示第二个图标 */
   
}
.feed_p{
    text-align: center;margin-top: 10px;font-size: 14px;color: #333333;
}
@media screen and (max-width: 1400px) {
    .ce_ul{
        justify-content: space-between;
        overflow-x: scroll;
        padding-bottom: 15px;flex-wrap: nowrap;
    }
    .ce_ul li,.ce_ul li img{
        width: 220px;
    }
    .ce_ul::-webkit-scrollbar{
        /*滚动条整体样式*/
        width: 2px;
        /*高宽分别对应横竖滚动条的尺寸*/
        height: 2px;
    }
    .ce_ul::-webkit-scrollbar-thumb {
        /*滚动条里面小方块*/
        border-radius: 5px;
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        background: #FFFFFF;
    }
    .ce_ul::-webkit-scrollbar-track{
        /*滚动条里面轨道*/
        -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
        border-radius: 0;
        background: rgba(245,245,245,0.6);
        width: 30px;
    }
    .supp_ul-item img{
        width: 60%;
    }
}
@media screen and (max-width: 1000px) {
    .supp_ul-item{width: 32%;}
    .supp_ul{
        justify-content: space-between;
    }
}
@media screen and (max-width: 768px) {
    .img_ul,.Joosbeauty_flex{
        flex-wrap: wrap;
    }
    .img_ul li:nth-child(1),.img_ul li:nth-child(2){
        width: 49%;margin-bottom: 10px;
    }
    .img_ul li:nth-child(3),.Joosbeauty_left,.Joosbeauty_right,.Joosbeauty_flex .video-container,.Feedback_ul li{
        width: 100%;
    }
    .title_div{
        padding: 50px 0 30px 0 !important;
    }
    .ce_content{
        height: 400px;
    }
    .Joosbeauty_flex .video-container{
        margin-top: 20px;
    }
    .Feedback_ul li{
        margin: 0px auto;
    }
    .supp_ul-item img{
        width: 70px;
    }
    .supp_ul-item .item_p2{
        font-size: 13px;
    }
}
@media screen and (max-width: 600px) {
    .supp_ul{
        gap: 3%;
    }
    .supp_ul-item {
        width: 30%;margin-bottom: 15px;
    }
    .supp_ul-item p{
        font-size: 14px;word-wrap:break-word; 
    }
    
}
@media screen and (max-width: 475px) {
    .Joosbeauty_right{
        padding: 20px;
    }
    .Joosbeauty_ul p{
        font-size: 14px;
    }
    .Joosbeauty_left{
        padding: 10px;
    }
}