@media screen and (min-width: 600px) and (max-width: 960px){
    /* ipad CSS代码 */
    .container {
        background-color: #6953DA;
        background-size: 100%;
        /* height: 107em; */
        /* padding: 0px 5%; */
    }
    .imgDiv {
        width: 12rem;
        margin: 0 auto;
        border: 0.8rem solid #EAD9FF;
        border-radius: 5%;
    }
    .content{
        background: url("../img/bg.png")  no-repeat;
        width: 100%;
        background-size:contain;
        padding-top: 55%;
        margin: 0 auto;
        padding-bottom: 12rem;

        /* top: 15%; */
    }
    .notice{
        font-size: 1rem;
    }
    .centerimg{
        margin: 20px 0;
    }
    .introduction{
        width: 87%;
        margin: 0 auto;
    }
    .user{
        margin-bottom: 3rem;
        width: 87%;
        margin: 0 auto;
    }
    
    .titleBox{
        border: 0.15rem solid #A475FE;
        padding: 0.4rem;
        width: fit-content;
        margin: 0 auto;
    }
    .titleDiv{
        width: 100%;
        text-align: center;
    }
    .title{
        background-color: #fff;
        font-weight: 600;
        font-size: 1.5rem;
        color: #AE3CF2;
        text-align: center;
        padding: 0.3rem 2.5rem;
    }
    .scanQrcode,.introductionCon{
        background-color: #fff;
        border-radius: 1rem;
        padding: 1rem;
        margin: 1rem 0;
        box-shadow: 1rem 1rem #a066f8;
    }
    
    h3{
        color:#AE3CF2
    }
    .h3{
        text-align: center;
    }
    p{
        font-size: 1.1rem;
    }
    .tips {
        width: 50%;
        padding: 0.5rem;
        color: #fff;
        background-image: linear-gradient(to right, #B240F2, #fff)
    }
    .imgBox{
        margin-top: 2rem;   
    }
    img {
        width: 100%;
        height: 100%;
    }
    .QrCodeTips{
        color: #AB34F0;
        font-size: 1rem;
        text-align: center;
        margin: 1rem auto;
    }
    
    .pcImgBox{
        margin: 0 auto;
        background-color: #F5EEFE;
        padding: 0.8rem;
    }
    .line{
        width: 100%;
        height: 0.5rem;
        border-bottom:0.15rem solid #D1A0FF;
    }
    .introContentBox{
        display: flex;
    }
    .introImgBox{
        width: 7%;
    }
    .lineImg{
        height: 100%;
        
    }
    .introContent{
        width: 100%;
        padding: 0.5rem 0.45rem;
    }
    .contentItem{
        height: 25%;
    }
    .contentItem1{
        height: calc(100% / 6);
    }
    .contentItem p{
        background-color: #F5EEFE;
        padding: 0.5rem;
    
    }
}

@media screen and (max-width: 600px){
/* 手机端CSS代码 */
    .container {
        background-color: #6953DA;
        background-size: 100%;
        /* height: 107em; */
        /* padding: 0px 5%; */
    
    }
    .imgDiv {
        width: 9rem;
        margin: 0 auto;
        border: 0.8rem solid #EAD9FF;
        border-radius: 5%;
    }
    .content{
        background: url("../img/bg.png") no-repeat top center;
        width: 100%;
        background-size:contain;
        padding-top: 55%;
        padding-bottom: 2.5rem;
    }
    .notice{
        font-size: 0.7rem;
    }
    .centerimg{
        margin: 20px 0;
    }
    .introduction{
        width: 87%;
        margin: 0 auto;
    }
    .user{
        margin-bottom: 3rem;
        width: 87%;
        margin: 0 auto;
    }
    
    .titleBox{
        border: 0.15rem solid #A475FE;
        padding: 0.15rem;
        width: fit-content;
        margin: 0 auto;
    }
    .titleDiv{
        width: 100%;
        text-align: center;
    }
    .title{
        background-color: #fff;
        font-weight: 600;
        font-size: 1rem;
        color: #AE3CF2;
        text-align: center;
        padding: 0.1rem 1.3rem;
    }
    .scanQrcode,.introductionCon{
        background-color: #fff;
        border-radius: 1rem;
        padding: 1rem;
        margin: 1rem 0;
        box-shadow: 0.6rem 0.6rem #a066f8;
    }
    
    h3{
        color: #AE3CF2;
        margin: 0;
        font-size: 0.8rem;
    }
    .h3{
        text-align: center;
    }
    p{
        font-size: 0.8rem;
    }
    .tips {
        width: 50%;
        padding: 0.5rem;
        color: #fff;
        background-image: linear-gradient(to right, #B240F2, #fff)
    }
    .imgBox{
        margin-top: 2rem;   
    }
    img {
        width: 100%;
        height: 100%;
    }
    .QrCodeTips{
        color: #AB34F0;
        font-size: 1rem;
        text-align: center;
        margin: 1rem auto;
    }
    
    .pcImgBox{
        margin: 0 auto;
        background-color: #F5EEFE;
        padding: 0.8rem;
    }
    .line{
        width: 100%;
        height: 0.5rem;
        border-bottom:0.15rem solid #D1A0FF;
    }
    .introContentBox{
        display: flex;
    }
    .introImgBox{
        width: 7%;
    }
    .lineImg{
        height: 100%;
        
    }
    .introContent{
        width: 100%;
        padding: 0.5rem 0.45rem;
    }
    .contentItem{
        height: 25%;
    }
    .contentItem p{
        background-color: #F5EEFE;
        padding: 0.5rem;
    
    }
}

@media screen and (min-width: 960px){
/* 电脑端CSS代码 */
    /* .imgBox{
        margin: 2rem auto;
    } */
    .container {
        background-color: #6953DA;
        background-size: 100%;
        /* height: 137em; */
        margin: 0 35%;
        /* padding: 0px 2.5% 3% 2.5%; */
        min-width: 540px;
        padding-bottom: 3%;
    }
    .imgDiv {
        width: 12rem;
        margin: 0 auto;
        border: 0.8rem solid #EAD9FF;
        border-radius: 5%;
    }
    .content{
        background: url("../img/bg.png")  no-repeat;
        width:100%;
        background-size:contain;
        margin: 0 auto;
        padding-top: 55%;
        /* top: 15%; */
    }
    .notice{
        font-size: 1rem;
    }
    .centerimg{
        margin: 45px 0;
    }
    .introduction{
        width: 87%;
        margin: 0 auto; 
    }
    .user{
        margin-bottom: 3rem;
        width: 87%;
        margin: 0 auto;
    }
    
    .titleBox{
        border: 0.15rem solid #A475FE;
        padding: 0.4rem;
        width: fit-content;
        margin: 0 auto;
    }
    .titleDiv{
        width: 100%;
        text-align: center;
    }
    .title{
        background-color: #fff;
        font-weight: 600;
        font-size: 1.5rem;
        color: #AE3CF2;
        text-align: center;
        padding: 0.3rem 2.5rem;
    }
    .scanQrcode,.introductionCon{
        background-color: #fff;
        border-radius: 1rem;
        padding: 1rem;
        margin: 1rem 0;
        box-shadow: 1rem 1rem #a066f8;
    }
    
    h3{
        color:#AE3CF2
    }
    .h3{
        text-align: center;
    }
    p{
        font-size: 1.1rem;
    }
    .tips {
        width: 50%;
        padding: 0.5rem;
        color: #fff;
        background-image: linear-gradient(to right, #B240F2, #fff)
    }
    .imgBox{
        margin-top: 2rem;   
    }
    img {
        width: 100%;
        height: 100%;
    }
    .QrCodeTips{
        color: #AB34F0;
        font-size: 1rem;
        text-align: center;
        margin: 1rem auto;
    }
    
    .pcImgBox{
        margin: 0 auto;
        background-color: #F5EEFE;
        padding: 0.8rem;
    }
    .line{
        width: 100%;
        height: 0.5rem;
        border-bottom:0.15rem solid #D1A0FF;
    }
    .introContentBox{
        display: flex;
    }
    .introImgBox{
        width: 7%;
    }
    .lineImg{
        height: 100%;
        
    }
    .introContent{
        width: 100%;
        margin: 1%;
        /* padding: 0.5rem 0.45rem; */
    }
    .contentItem{
        height: 25%;
    }
    .contentItem p{
        background-color: #F5EEFE;
        padding: 0.5rem;
    
    }
}