body {
    margin: 0;
    font-family: "microsoft yahei";
}

.back {
    width: 38px;
    height: 100%;
    padding: 23px 0;
    float: left;
}
.header {
    padding: 0 25px;
}
.return {
    display: inline-block;
    cursor: pointer;
}

.logo {
    display: inline-block;
}

.body {
    margin: 6.48vh 14.6vw 0;
}

.phone .phonePic {
    display: inline-block;
    width: 320px;
    padding-left: 34px;
}
.phoneContent {
    float: left;
    color: #fff;
    width: 60%;
    padding-top: 30px;
}

.phonePic {
    float: left;
    margin-right: 7.33vw;
}

.phoneTitle {
    font-size: 3.62rem;
}

strong.textContent,
strong.textApp {
    text-shadow: #0b83f6 2px 2px 0px;
}

strong.textContentStu,
strong.textAppStu {
    text-shadow: #18aaa2 2px 2px 0px;
}

strong.textContentParent,
strong.textAppParent {
    text-shadow: #0b83f6 2px 2px 0px;
}

strong.textContentTeacher,
strong.textAppTeacher {
    text-shadow: #04a7f3 2px 2px 0px;
}

strong.textContent {
    font-weight: 500;
    font-family: "microsoft yahei";
}

strong.textApp,
strong.textContentStu,
strong.textContentParent,
strong.textContentTeacher {
    font-weight: lighter;
    font-family: "STHupo";
    font-size: 4.6rem;
}

strong.textAppStu,
strong.textAppParent,
strong.textAppTeacher {
    font-size: 3rem;
    font-family: "microsoft yahei";
}

.downloading,
.down {
    color: #fff;
    text-decoration: none;
}

.download {
    display: block;
    width: 100%;
    height: 100%;
}

.down {
    color: #2c89f2;
}

.lookState,
.lookStateTeacher {
    font-size: 1.5rem;
    letter-spacing: 3px;
    font-family: "microsoft yahei";
    font-weight: lighter;
}

.lookState {
    text-indent: 2em;
    margin: 15px 0;
}

.lookStateTeacher,
.lookStateStudent,
.lookStateParent {
    margin: 40px 0 50px 0;
}

.rightApp {
    float: left;
}

.appleBox,
.andriodBox,
.appleBoxOne,
.andriodBoxOne,
.appleBoxTwo,
.andriodBoxTwo {
    width: 340px;
    height: 85px;
    font-size: 24px;
    line-height: 85px;
    border-radius: 8px;
    margin-top: 22px;
    font-family: "microsoft yahei";
}
.addTip {
    width: auto;
}

.appleBox,
.andriodBox {
    border: 3px solid #2c89f2;
    background-color: #cce4ff;
    color: #2c89f2;
    margin: 22px auto 0;
    text-align: center;
}

.appleBoxOne,
.andriodBoxOne {
    border: 3px solid #009de5;
    background-color: #05a9f5;
    color: #fff;
    text-align: center;
}

.appleBoxTwo,
.andriodBoxTwo {
    border: 3px solid #57dfd7;
    background-color: #46d7d0;
    color: #fff;
    margin: 22px auto 0;
    text-align: center;
}

.andriodVision,
.appleVision {
    display: inline-block;
    width: 58px;
    height: 100%;
    float: left;
    margin-left: 15px;
}

.andriodVision {
    background: url("../../image/APP/andriodParent.png") center center no-repeat;
    background-size: 70%;
}

.appleVision {
    background: url("../../image/APP/appleParent.png") center center no-repeat;
    background-size: 70%;
}

.andriodVisionOne,
.andriodVisionTwo {
    background: url("../../image/APP/andriodStu.png") center center no-repeat;
    background-size: 70%;
}

.appleVisionOne,
.appleVisionTwo {
    background: url("../../image/APP/appleStu.png") center center no-repeat;
    background-size: 70%;
}

.QRcode {
    display: inline-block;
    width: 240px;
    height: 240px;
}

.trCode {
    background: url("../../image/APP/code.png") center center no-repeat;
    background-size: 100%;
}

.parCode {
    background: url("../../image/APP/parCode.png") center center no-repeat;
    background-size: 100%;
}

.stuCode {
    background: url("../../image/APP/stuCode.png") center center no-repeat;
    background-size: 100%;
}

.leftApp {
    float: left;
    margin-right: 70px;
}

.footer {
    display: inline-block;
    width: 100%;
}

.footerIcon {
    display: inline-block;
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: -1;
}

.parentBack {
    background: url("../../image/APP/road.png");
}

.teacherBack {
    background: url("../../image/APP/teacherBack.png");
    height: 160px;
    bottom: 0;
}

.auto {
    display: block;
    width: 280px;
    height: 450px;
    background: url("../../image/APP/auto.png") center center no-repeat;
    background-size: 280px;
    position: absolute;
    right: 9.5%;
    bottom: 0%;
}

@media screen and (max-width:1720px) {
    .body {
        margin: 6.48vh 11.6vw 0;
    }
    strong.textApp, strong.textContentStu, strong.textContentParent, strong.textContentTeacher {
        font-size: 3.6rem;
    }
    .auto {
        display: none;
    }
}

@media screen and (max-width:414px) {
    .footerIcon {
        bottom: 0;
    }
}

@media screen and (max-width:1550px)and (min-width: 1036px) {
    strong.textApp, strong.textContentStu, strong.textContentParent, strong.textContentTeacher {
        font-size: 4.6rem;
    }
    .body {
        margin: 1.48vh 8.6vw 0;
    }
    .phoneContent {
        width: 50%;
        min-width: 320px!important;
    }
    .phone .phonePic {
        width: 240px;
    }
    .phonePic {
        margin: 0 7%;
    }
    strong.textAppStu,
    strong.textAppParent,
    strong.textAppTeacher {
        font-size: 2.6rem;
    }
    .lookState {
        margin: 50px 0 40px 0;
    }
    .lookState,
    .lookStateTeacher {
        font-size: 1rem;
    }
    .QRcode {
        width: 165px;
        height: 210px;
        background-size: 165px;
        margin-top: 6px;
    }
    .appleBox,
    .andriodBox,
    .appleBoxOne,
    .andriodBoxOne,
    .appleBoxTwo,
    .andriodBoxTwo {
        width: 220px;
        height: 70px;
        font-size: 16px;
        line-height: 70px;
    }
    .addTip {
        width: 220px;
        padding: 0 0 5px!important;
    }
    .auto {
        display: none;
    }
    .leftApp {
        margin-right: 70px;
    }
}

@media screen and (max-width:1036px) and (min-width: 925px) {
    .body {
        margin: 1.48vh 0 0;
        padding-left: 7%;
    }
    .phone .phonePic {
        width: 240px;
    }
    .phonePic {
        margin: 0 7%;
    }
    .phoneTitle {
        text-align: center;
    }
    .phoneContent {
        width: 50%;
        min-width: 320px!important;
    }
    strong.textAppStu,
    strong.textAppParent,
    strong.textAppTeacher {
        font-size: 2.6rem;
        font-family: "microsoft yahei";
    }
    strong.textContentStu,
    strong.textContentParent,
    strong.textContentTeacher {
        display: inline-block;
        text-align: center;
        font-weight: bold;
        font-family: "microsoft yahei";
        font-size: 2.6rem;
    }
    .lookState {
        margin: 50px 0 40px 0;
    }
    .lookState,
    .lookStateTeacher {
        font-size: 1rem;
    }
    .QRcode {
        width: 165px;
        height: 210px;
        background-size: 165px;
        margin-top: 6px;
    }
    .appleBox,
    .andriodBox,
    .appleBoxOne,
    .andriodBoxOne,
    .appleBoxTwo,
    .andriodBoxTwo {
        width: 220px;
        height: 70px;
        font-size: 16px;
        line-height: 70px;
    }
    .addTip {
        width: 220px;
    }
    .leftApp {
        margin-right: 25px;
    }
    .auto {
        display: none;
    }
}

@media screen and (max-width:916px) and (min-width: 752px) {
    .body {
        margin: 6.48vh 28.6vw 0;
    }
    .phoneContent {
        width: 120%;
    }
    .QRcode {
        margin-top: 10%;
    }
    .auto {
        display: none;
    }
}

@media screen and (max-width:925px) and (min-width: 664px) {
    .phonePic {
        margin-left: 26%;
    }
    strong.textAppStu,
    strong.textAppParent,
    strong.textAppTeacher {
        font-size: 1.6rem;
    }
    strong.textContentStu,
    strong.textContentParent,
    strong.textContentTeacher {
        display: inline-block;
        width: 100%;
        text-align: center;
        font-weight: bold;
        font-family: "microsoft yahei";
        font-size: 1.6rem;
    }
    .body {
        margin: 6.48vh 0 0;
    }
    .phoneContent {
        width: 90%;
        padding: 5%;
    }
    .leftApp {
        float: none;
        margin-right: 0;
    }
    .rightApp {
        width: 100%;
        text-align: center;
    }
    .QRcode {
        margin-top: 10%;
    }
}

@media screen and (max-width:664px) {
    .header {
        padding: 0;
    }
    .logo {
        width: 150px;
        background-size: 133px;
    }
    .return {
        margin-right: 0;
    }
    .phone .phonePic {
        width: 50vw;
        display: none;
    }
    strong.textAppStu,
    strong.textAppParent,
    strong.textAppTeacher {
        font-size: 1.6rem;
    }
    strong.textContentStu,
    strong.textContentParent,
    strong.textContentTeacher {
        display: inline-block;
        width: 100%;
        text-align: center;
        font-weight: bold;
        font-family: "microsoft yahei";
        font-size: 1.6rem;
    }
    .body {
        margin: 6.48vh 0 0;
    }
    .phoneContent {
        width: 100%;
    }
    .lookState {
        font-size: 1rem;
        letter-spacing: 1px;
        margin: 20px 0 10px 0;
        text-align: center;
        padding: 0 10px;
    }
    .appleBox,
    .andriodBox,
    .appleBoxOne,
    .andriodBoxOne,
    .appleBoxTwo,
    .andriodBoxTwo {
        width: 55vw;
        height: 9vh;
        font-size: 15px;
        line-height: 9vh;
    }
    .addTip {
        width: auto;
        padding: 0 10px 5px!important;
    }
    .andriodVision,
    .appleVision {
        width: 30px;
        height: 100%;
        margin-left: 5px;
        margin-top: 0;
        background-repeat: no-repeat;
    }
    .appleVision,
    .appleVisionOne,
    .appleVisionTwo {
        background-size: 30px;
    }
    .andriodVision,
    .andriodVisionOne,
    .andriodVisionTwo {
        background-size: 30px;
    }
    .QRcode {
        width: 185px;
        height: 150px;
        background-size: 115px;
    }
    .downloadApp {
        text-align: center;
    }
    .leftApp {
        margin: 0;
       float: none;
    }
    .rightApp {
        width: 100%;
    }
    .auto {
        display: none;
    }
    .footerIcon {
        bottom: 0;
    }
}

.leftApp a {
    text-decoration: none;
}

.addTip {
    padding: 0 0px 5px;
    text-align: center;

}
.addParTip {
    margin-top: 0;
}