@media screen and (min-width: 960px) and (max-width: 1199px) {
    html{
        font-size:54px !important;
    }
    .join ul+ul {
        margin-left: 2.1rem !important;
    }
    .about p+p{
        margin-left:2.6rem !important;
    }
    .swiper-container3 p {
        padding-left: 6rem !important;
    }
}
@media screen and (min-width: 768px) and (max-width: 959px) {
    html{
        font-size:43.2px !important;
    }
    .join ul+ul {
        margin-left: 1.8rem !important;
    }
    .about p+p{
        margin-left:2.3rem !important;
    }
    .swiper-container3 p {
        padding-left: 6rem !important;
    }
}
@media screen and (min-width: 700px) and (max-width: 767px) {
    html{
        font-size:36px !important;
    }
    .swiper-container3 p {
        padding-left: 6.5rem !important;
    }
}  
@media screen and (min-width: 600px) and (max-width: 699px) {
    html{
        font-size:36px !important;
    }
    .swiper-container3 p {
        padding-left: 4.3rem !important;
    }
}  
@media screen and (min-width: 480px) and (max-width: 599px) {
    html{
        font-size:36px !important;
    }
    .swiper-container3 p {
        padding-left: 3.4rem !important;
    }
}    
@media screen and (min-width:400px) and (max-width:479px){
    html{
        font-size:27px !important;
    }
    .swiper-container3 p {
        padding-left: 3.4rem !important;
    }
}
@media screen and (max-width:399px){
    html{
        font-size:27px !important;
    }
    .join ul+ul {
        margin-left: 0.6rem !important;
    }
    .about p+p{
        margin-left:0.9rem !important;
    }
}
.my-h3{
    font-size:0.74rem;
    line-height:0.9rem;
    font-weight:bold; 
}
.my-p{
    font-size:0.44rem;
    line-height:0.74rem;
}
.top{
    width:100%;
    text-align:center;
    padding:0.8rem 0; 
    background:url("../../images/xcx/beauty-apps/headertop.png") no-repeat;
    background-size:100% 100%;
    color:#fff;
}
.top .down{
    margin-bottom:0.6rem;
}
.top .small-box{
    margin:auto;
    width:30%;
    border:1px solid #fff;
    border-radius: 45px;
    font-size:0.6rem;
    line-height:1.1rem;
}
/* 轮播1 */
.swiper-container,.swiper-container2,.swiper-container3,.swiper-container4{
    width:100%;
    text-align: center;
    overflow: hidden;
}
.swiper-container h3{
    margin:0.8rem 0;
}
.swiper-container ul{
    display:flex;
    justify-content: space-around;
}
.swiper-container li{
    width:23%;
}
.swiper-container img{
    width:2rem;
    height:2rem;
    margin-bottom:0.3rem;
}
/* 自定义指示器样式 */
.swiper-container .swiper-pagination-customs,
.swiper-container2 .swiper-pagination-customs,
.swiper-container4 .swiper-pagination-customs{
    width:0.8rem;
    height:0.15rem;
    background: #e5e5e5;
    display: inline-block;
    margin: 0 5px;
}
.swiper-container .swiper-pagination-customs-active,
.swiper-container2 .swiper-pagination-customs-active,
.swiper-container4 .swiper-pagination-customs-active{
    background: #FF7087;
}
.swiper-container .swiper-wrapper{
    padding-bottom:1.2rem;
}
/* 解决方案 */
.resolve{
    width:100%;
    text-align:center;
    padding:0.8rem 0;
}
.resolve h3{
    margin-bottom:0.5rem;
}
.resolve img{
    width:91%;
    margin-top:0.7rem;
}
/* 介绍 */
.introduce{
    width:100%;
    text-align: center;
    padding:0.7rem;
    background:url("../../images/xcx/beauty-apps/introduce.png") no-repeat;
    background-size:100% 100%;
    color:#fff;
}
.introduce h3{
    margin-bottom:0.5rem;
}
.introduce p{
    text-align:start;
}
/* 轮播2 */
.swiper-container2{
   padding:0.6rem 0;
   background-color: #ffd9d9;
	opacity: 0.6;
}
.swiper-container2 h3{
    margin-bottom:0.5rem;
}
.swiper-container2 img{
    width:90%;
    margin-top:0.5rem;
}
/* 方案 */
.scheme{
    width:100%;
    text-align:center;
    padding:0.6rem 0 2.8rem;
    background: url("../../images/xcx/beauty-apps/scheme.png") no-repeat;
    background-size:100% 100%;
}
.scheme h3{
    margin-bottom:0.5rem;
}
.scheme-list{
   display: flex;
   justify-content:space-around;
   flex-flow:wrap;
}
.scheme-list li{
    width:15%;
    margin-top:0.5rem;
}
.scheme-list li img{
   width:1rem;
   height:1rem;
   margin-bottom:0.3rem;
}
/* 线上 */
.online{
    width:100%;
    text-align:center;
    padding:1rem 0 0.5rem;
}
.online h3{
    margin-bottom:0.5rem;
}
.online img{
    width:90%;
    margin:0.5rem 0;
}
.online .small-box{
    color:#fff;
    width:35%;
    margin:auto;
    background-image: linear-gradient(0deg, 
		#f7c2ca 0%, 
		#ff8d9e 100%);
    border-radius: 8px;
    font-size:0.6rem;
    padding:0.18rem 0.74rem;
}
/* 解决困难问题 */
.problem{
    width:100%;
    text-align:center;
    padding:0.8rem 0;     
}
.problem h3{
   font-weight: 400;    
}
.problem img{
    width:45%;
    margin-top:0.5rem;
}
/* 轮播3 */
.swiper-container3{
    padding:0.6rem 0;
    background:#f4f4f4;
}
.swiper-container3 img{
    width:53%;
}
.swiper-container3 .swiper-slide-prev{
    right:-41%;
}
.swiper-container3 .swiper-slide-next{
    left:-41%;
}
.swiper-container3 .swiper-wrapper{
    margin-top:0.6rem;
}
.swiper-container3 .swiper-pagination-bullet{
    width:0.5rem;
    height:0.5rem;
    background:#ffcc95;
    opacity: 0.3;
}
.swiper-container3 .swiper-pagination-bullet-active{
    background:#ffcc95;
    opacity: 1;
}
.swiper-container3 h3{
    margin-bottom:0.5rem;
}
.swiper-container3 p{
    text-align:start;
    padding-left:2.4rem;
}
/* swiper4 */
.swiper-container4{
    padding:0.8rem 0;
}
.swiper-container4 h3{
    margin-bottom:0.5rem;
}
.swiper-container4 .swiper-wrapper{
    margin-top:0.6rem;
}
.swiper-container4 img{
    width:91%;
}
/* more */
.more{
    width:100%;
    text-align:center;
    padding:1rem 0;
    background:#f4f4f4;
}
.more h3,.beauty h3{
    margin-bottom:0.5rem;
}
.more ul,.beauty ul{
    display: flex;
    justify-content: space-around;
    flex-flow:wrap;
}
.more li{
    margin-top:0.6rem;
    width:32%;
}
.more img{
    width:1.1rem;
    height:1.1rem;
    margin-bottom:0.4rem;
}
.beauty li{
    width:22%;
    margin-top:0.6rem;
}
.beauty li p{
    font-size:0.4rem;
}
.beauty img{
     width:1.6rem;
     height:1.6rem;
     margin-bottom:0.4rem;
}
.beauty{
    width:100%;
    text-align:center;
    padding:1rem 0;
}
.major{
    width:100%;
    text-align:center;
    padding:1rem 0 0;
}
.major ul{
    display: flex;
    justify-content: space-around;
    flex-flow: wrap; 
    margin:0.6rem 0;
}
.major li{
    margin-top:0.5rem;
    width: 47%;
    position: relative;
}
.major img{
    width:100%;
}
.major .big{
    color:#fff;
    font-size: 0.5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-38%, -50%);
}
.major .free{
    font-size:0.7rem;
    width:35%;
    background: #ffc551;
    border-radius: 0.2rem;
    color:#fff;
    padding:0.1rem 0;
    margin:auto;
}