body {
    overflow-y: scroll;
    background-color: #f3f5f8;
}


/* nav */

.navbar {
    background-color: rgba(41, 41, 41, 1);
    padding: 0 !important;
}


/* 主体 */

.home {
    width: 100%;
    min-height: 100vh;
    position: relative;
    margin-top: 49px;
    margin: 0 auto 0;
}

.box0 {
    position: sticky;
    top: 0;
    width: 100%;
    height: 33vw;
    z-index: -1;
    background: url("../../static/img/business/bg0.png");
    background-size: 100%;
}

.box3,
.box2,
.box1 {
    width: 100%;
    background-color: #f5f5f7;
    padding: 5vw 19vw;
}

.home .title {
    font-size: 2.5vw;
    text-align: center;
    font-weight: 700;
    margin-bottom: 1vw;
    opacity: 0;
    transform: translateY(80%);
    transition: transform 1.5s, opacity 1.5s;
}

.business3,
.business2,
.business1 {
    width: 100%;
    opacity: 0;
    transform: translateY(15%);
    transition: all 1.5s;
}

.business img {
    width: 100%;
}


/* call */


/* .boxCall {
    background-color: rgba(41, 41, 41, 1);
    border-bottom: 1px solid #656565;
    color: #c2c2c2;
} */


/* 延迟为0 */

.delay0 {
    transition-delay: 0s!important;
}


/* 直接消失 */

.hide {
    /* opacity: 0!important; */
    transition: 0.5s!important;
}


/*清除浮动*/

.clearfix:after {
    content: "";
    height: 0;
    line-height: 0;
    display: block;
    visibility: hidden;
    clear: both;
}

.clearfix {
    /*兼容IE*/
    zoom: 1;
}

.box1 {
    padding-top: 12vw;
}

.box1 .title::after {
    content: 'Embedded R&D Flowchart';
    position: absolute;
    color: rgba(0, 0, 0, .1);
    font-size: 4vw;
    width: 100%;
    top: -150%;
    left: 50%;
    transform: translate(-50%, 0);
}

.box2 .title::after {
    content: 'APP Development Flowchart';
    position: absolute;
    color: rgba(0, 0, 0, .1);
    font-size: 4vw;
    width: 100%;
    top: -150%;
    left: 50%;
    transform: translate(-50%, 0);
}

.box3 .title::after {
    content: 'Manufacturing Process Flowchart';
    position: absolute;
    color: rgba(0, 0, 0, .1);
    font-size: 4vw;
    width: 100%;
    top: -150%;
    left: 50%;
    transform: translate(-50%, 0);
}


/* 最大屏幕 */

@media screen and (max-width: 993px) {
    .box1 .title::after,
    .box2 .title::after,
    .box3 .title::after {
        font-size: 6vw;
        width: 100%;
        top: -8vw;
        left: 0;
        transform: translate(0, 0);
    }
    .box3 .title::after {
        font-size: 5vw;
    }
    .showOnPhone1 {
        transform: translateY(0)!important;
        opacity: 1!important;
        animation: toTopPhone1 1.5s;
    }
    .showOnPhone2 {
        transform: translateY(0)!important;
        opacity: 1!important;
        animation: toTopPhone2 1.5s;
    }
    @keyframes toTopPhone1 {
        0% {
            opacity: 0;
            transform: translateY(80%)
        }
        100% {
            opacity: 1;
            transform: translateY(0)
        }
    }
    @keyframes toTopPhone2 {
        0% {
            opacity: 0;
            transform: translateY(15%)
        }
        100% {
            opacity: 1;
            transform: translateY(0)
        }
    }
}

@media screen and (min-width: 1280px) {}


/* ipad 横向屏幕 */

@media screen and (max-width: 1280px) {
    .box3,
    .box2,
    .box1 {
        padding: 10vw 7vw;
    }
    .home .title {
        font-size: 3vw;
    }
}


/* ipad 纵向屏幕 */

@media screen and (max-width: 992px) {
    .box3,
    .box2,
    .box1 {
        padding: 15vw 2vw 10vw;
    }
    .home .title {
        font-size: 5vw;
    }
}


/*  phone屏幕 */

@media screen and (max-width: 450px) {
    .box0 {
        margin-top: 49px;
    }
    .box3,
    .box2,
    .box1 {
        padding: 20vw 3vw 10vw;
    }
    .business3,
    .business2,
    .business1 {
        width: 100%;
        overflow: scroll;
    }
    .business img {
        width: 200%;
    }
    .home .title {
        font-size: 7vw;
    }
}