.appWrap {
    background-color: #fff;
}


/* fontsizecontrol  fontfontfontfontfontfont */

.appWrap h3 {
    font-size: 32px;
    padding-bottom: 32px;
}

.appWrap p {
    font-size: 18px;
    line-height: 1.5;
    padding-bottom: 18px;
}

.appWrap h5 {
    font-size: 20px;
    padding-bottom: 20px;
}


/* fontsizecontrol fontfontfontfontfontfont*/

.appBanner {
    width: auto;
    height: auto;
    background-color: #fff;
    background-image: url(/appImg/pic_app_heroimage.png);
    background-repeat: no-repeat;
    background-size: 100%;
    background-position: top right;
    padding: 50px 25px;
}

.appBanner img {
    display: block;
    margin: 0 auto;
    padding-bottom: 30px;
}

.appBanner_text {
    padding-top: 100%;
}

.appDescribe {
    background-color: #f5f5f5;
    padding: 50px 25px;
}

.appGoal {
    padding-bottom: 50px;
}

.appMyRole_box {
    width: 100%;
    display: flex;
}

.appMyRole_Right {
    margin-left: 40px;
}


/* logologogogogog */

.appSystem {
    background-color: #fff;
}

.appLogo_top {
    height: 350px;
    background-image: url(/appImg/bg_designTop.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center bottom;
}

.appLogo_top_text {
    background-color: #F5F7FA;
    padding: 0 25px 50px 25px;
}

.appLogo_bottom video {
    width: 120vw;
    position: relative;
    left: -10%;
    display: block;
}


/* typr */

.appType {
    background-color: #F5F7FA;
    overflow: hidden;
    padding: 50px 25px;
}

.appType img {
    width: 70%;
    float: right;
    padding-top: 20px;
    margin-right: 10%;
}


/* colorcolor */

.appColor {
    background-color: #F5F7FA;
    overflow: hidden;
    padding: 50px 25px;
}

.appColor img {
    width: 70%;
    float: right;
    padding-top: 20px;
    margin-right: 10%;
}


/* icon */

.appIcon {
    background-color: #F5F7FA;
    overflow: hidden;
    padding: 50px 25px;
}

.appIcon img {
    width: 70%;
    float: right;
    padding-top: 20px;
    margin-right: 10%;
}

.appSystem_bottomColor {
    height: 15vw;
    background-image: url(/appImg/bg_designBottom.svg);
    background-repeat: no-repeat;
    background-size: cover;
}


/* appppppppp pic here */

.appLogin {
    background-color: #fff;
    text-align: center;
    padding-top: 50px;
}

.appLogin p {
    padding: 0 25px;
}

.appLogin_logo {
    width: 150px;
}

.appLogin video {
    padding-top: 50px;
    width: 100%;
    display: block;
}

.appLogin_bottomvid img {
    width: 100%;
    display: block;
}


/* main */

.appMain {
    background-color: #f5f5f5;
    padding: 50px 25px;
}

.appMain_text {
    text-align: center;
}

.appMain img {
    width: 100%;
}


/* multi multi */

.appMulti {
    background-color: #8192A0;
    padding: 50px 25px;
}

.appMulti img {
    width: 100%;
}

.appMulti_text {
    text-align: center;
}

.appMulti p,
.appMulti h3 {
    color: #fff;
}


/* camerasetting */

.appCamera {
    background-color: #fff;
    padding: 50px 25px;
    text-align: center;
}

.appCamera_text {
    padding-bottom: 50px;
}

.appCamera_flow img {
    width: 100%;
    display: block;
}

.appCamera video {
    width: 100%;
    display: block;
    padding-top: 50px;
}


/* liveview */

.appLiveview {
    background-color: #fff;
    padding: 50px 25px;
    text-align: center;
}

.appLiveview img {
    width: 70%;
    padding-top: 50px;
}


/* p2t p2tp p2tp p2t */

.appLiveview_p2t {
    background-color: #fff;
    padding: 50px 25px;
}

.appLiveview_p2t img {
    width: 20%;
}

.appLiveview_p2t video {
    width: 100%;
    display: block;
    padding-top: 50px;
    border-radius: 20px;
    box-shadow: 0 0.9px 3.5px rgba(0, 0, 0, 0.035), 0 7px 28px rgba(0, 0, 0, 0.07);
}

.appLiveview_p2t_text {
    text-align: center;
}


/* slipslipskip skip */

.appSkip {
    background-color: #fff;
    padding: 50px 25px;
}

.appSkip_text {
    text-align: center;
    padding-bottom: 50px;
}

.appSkip img {
    width: 100%;
}


/* music music misci */

.appMusic {
    background-color: #fff;
    padding: 50px 25px;
    text-align: center;
}

.appMusic_text {
    padding-bottom: 50px;
}


/* ads ads ads */

.appLollipopCare {
    background-color: #f5f5f5;
    padding: 50px 25px;
    text-align: center;
}

.appLollipopCare_text {
    padding-bottom: 50px;
}

.appLollipopCare video {
    width: 100%;
    display: block;
    padding-top: 50px;
    border-radius: 20px;
    box-shadow: 0 0.9px 3.5px rgba(0, 0, 0, 0.035), 0 7px 28px rgba(0, 0, 0, 0.07);
}


/* gallery gallery */

.appGallery {
    background-color: #fff;
    padding: 50px 25px;
    text-align: center;
}

.appGallery img {
    width: 100%;
}


/* inbox inbox */

.appInbox {
    background-color: #fff;
    padding: 50px 25px;
    text-align: center;
}

.appInbox_text {
    padding-bottom: 50px;
}

.appInbox img {
    width: 100%;
}


/* other other other */

.appOther {
    padding-top: 50px;
    background-color: #fff;
    text-align: center;
}

.appOther img {
    width: 100vw;
}


/*  ipad ipadipadipad ipadipad  ipadipad */

@media only screen and (min-width:768px) {
    .appDescribe {
        padding: 50px 45px;
    }
    .appBanner {
        padding: 45px 45px;
        background-size: 60%;
        background-position: top Bottom;
    }
    .appBanner_text {
        width: 40%;
        padding-top: 0px;
    }
    .appBanner img {
        display: block;
        margin-left: 0;
    }
    /* goal */
    .appMyRole {
        overflow: hidden;
    }
    .appGoal {
        width: 50%;
        padding-bottom: 50px;
        float: left;
        margin-right: 50px;
    }
    .appMyRole_box {
        display: block;
        width: 100%;
        float: left;
        margin-right: 20px;
    }
    .appMyRole_left {
        float: left;
        padding-right: 20px;
    }
    .appMyRole_Right {
        float: left;
    }
    /* lgoogogogogogo */
    .appLogo_top {
        background-image: url(/appImg/bg_designTop.svg);
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center bottom;
    }
    .appLogo_top_text {
        width: 100%;
        margin: 0 auto;
        padding: 0% 25px 50px 25px;
        text-align: center;
    }
    .appLogo_top_text p {
        width: 30%;
        margin: 0 auto;
    }
    /* mian mianmain */
    .appMain {
        display: flex;
    }
    .appMain img {
        width: 45%;
    }
    .appMain_text {
        margin: auto 10%;
    }
    /* camera */
    .appCamera_text {
        width: 50%;
        margin: 0 auto;
    }
    .appCamera_flow {
        display: flex;
    }
    .appCamera_flow_text {
        padding-right: 20px;
    }
    /* liveview */
    .appliveview {
        display: block;
    }
    .appLiveview_text {
        width: 40%;
        float: right;
        margin: 25% 5% 25% 0;
    }
    .appLiveview_img {
        width: 50%;
        overflow: hidden;
        padding-left: 45px;
    }
    /* multi */
    .appMulti p {
        width: 50%;
        margin: 0 auto;
        padding-bottom: 50px;
    }
    /* p2t p2t p2tp p2tp2tp2tp  */
    .appLiveview_p2t {
        padding: 50px 45px;
        display: flex;
    }
    .appLiveview_p2t img {
        width: 20%;
    }
    .appLiveview_p2t video {
        width: 35%;
        display: block;
        padding-top: 50px;
        border-radius: 20px;
        box-shadow: 0 0.9px 3.5px rgba(0, 0, 0, 0.035), 0 7px 28px rgba(0, 0, 0, 0.07);
    }
    .appLiveview_p2t_text {
        width: 40%;
        text-align: center;
        margin: auto 10%;
    }
    /* skip skip skip skip skip ? */
    .appSkip {
        padding: 50px 45px;
        overflow: hidden;
    }
    .appSkip_text {
        width: 40%;
        float: right;
        text-align: left;
        margin-top: 5%;
    }
    .appSkip img {
        height: auto;
        width: 50%;
        margin: auto 0;
    }
    /* music musci */
    .appMusic {
        padding: 50px 45px;
        display: flex;
    }
    .appMusic_text {
        padding-bottom: 50px;
        margin: auto 10%;
    }
    .appMusic img {
        width: 40%;
    }
    /* ads ads ads */
    .appLollipopCare {
        padding: 50px 45px;
    }
    .appLollipopCare_text {
        width: 40%;
        margin: 0 auto;
    }
    .appLollipopCare video {
        width: 50%;
        margin: 0 auto;
    }
    /* gallery */
    .appGallery {
        padding: 50px 45px;
        overflow: hidden;
    }
    .appGalery_text {
        width: 40%;
        float: right;
        padding-top: 13%;
    }
    .appGallery img {
        width: 40%;
    }
    /* inbox inbxo */
    .appInbox {
        padding: 50px 45px;
        display: flex;
    }
    .appInbox_text {
        padding-bottom: 50px;
        margin: auto 10%;
    }
    .appInbox img {
        width: 40%;
    }
    /* ipad end */
}


/* desktop hererhererhererh */

@media only screen and (min-width:1000px) {
    .appBanner,
    .appDescribe_box,
    .appType,
    .appColor,
    .appIcon,
    .appLogin,
    .appMain,
    .appMulti,
    .appCamera,
    .appLiveview,
    .appLiveview_p2t,
    .appSkip,
    .appMusic,
    .appGallery,
    .appInbox {
        width: 960px;
        margin: 0 auto;
    }
    .appType_box {
        background-color: #F5F7FA;
    }
    .appMain_box {
        width: 100%;
        background-color: #f5f5f5;
    }
    .appMulti_box {
        width: 100%;
        background-color: #8192A0;
    }
    .appPersona {
        display: flex;
        padding: 50px 45px;
    }
    /* destop end */
}