/* 智家APP */
.haval_app_box{
	background-color: #61646a;
	width: 100%;
	height: 82vh;
	position: relative;
    overflow: visible;
}
.app_haval{
	width: 80%;
	position: absolute;
	top: 5vh;
	left: 0;
	z-index: 1;
	transition: all 1s;
}
.app_text_code{
	color: #fff;
	position: absolute;
	bottom: -7vh;
    left: auto;
	right: 5vw;
	display: flex;
	transition: all 1s;
    flex-direction: column;
	align-items: flex-start;
    justify-content: space-between;
    padding: 7.29vw 0 3.65vw;
    height: 100%
}
.app_text_code.active{
	bottom: 0vh;
}
.app_text_code .app_tb{
	position: relative;
	font-weight: 300;
}
.app_tb .app_tb_t{
	font-size: 2.6vw;
    font-weight: 300;
    letter-spacing: .21vw;
}
.app_tb .app_tb_d{
    margin-top: .521vw;
	opacity: 0.9;
	letter-spacing: .26vw;
	font-size: 1.2vw;
    line-height: 2.08vw;
}
.app_tb .explore_btn{
	position: relative;
	right: auto;
	color: #fff;
	opacity: 0.5;
}
.app_tb .explore_btn div:nth-of-type(1){
	color: #fff;
}
.app_code_box{
    width: 10vw;
}
.app_code{
	width: 100%;
    background: white;
    padding: 0.1rem;
    margin: 0;
    border-radius: 10px;
}
.app_code_text{
    color: #fff;
    font-size: 1.09vw;
    font-weight: 200;
    margin-top: 1.042vw;
    letter-spacing: .26vw;
    text-align: center;

}
.DEVICE02{
	height: 67vh;
	position: absolute;
	left: 8.44%;
	bottom: -150px;
    z-index: 1;
	transition: all 1s;
}
.DEVICE01{
	position: absolute;
	left: 25%;
	bottom: -10vh;
	height: 60vh;
    z-index: 2;
	transition: all 2s;
}
.app_haval.active{
	top: 0vh;
}
.DEVICE02.active{
	bottom: 80px;
}
.DEVICE01.active{
	bottom: -5vh;
    top: auto;
}
@media(max-width:767px){
    /* app */
	.haval_app_mb{
		background-color: #61646a;
		position: relative;
		overflow: hidden;
        height: 90vh;
	}
	.haval_app_mb .haval_app_mb_logo{
		width: 96%;
		margin: 10% 0 0 4%;
	}
	.haval_app_mb_text{
		text-align: center;
		color: #fff;
	}
	.haval_app_mb_text_t{
		font-size: 0.6rem;
        text-indent: -0.5rem;
	}
	.haval_app_mb_text_d{
		font-size: 0.23rem;
		letter-spacing: 0.05rem;
		margin-top: 0.1rem;
		font-weight: 300;
	}
    .haval_app_mb_text_d_two{
        text-indent: -1.4rem;
    }
	.haval_app_mb_btn{
		display: flex;
		justify-content: center;
		align-items: center;
		margin-top: 0.6rem;
	}
	.haval_app_mb_btn a{
		width: 2.3rem;
		border: 1px solid rgba(255,255,255,.5);
		height: 0.75rem;
		line-height: 0.75rem;
		text-align: center;
		font-weight: 300;
		color: rgba(255,255,255,.8);
		letter-spacing: 0.1rem;
		font-size: 0.24rem;
        display: block;
	}
	.haval_app_mb_btn a:nth-of-type(2){
		margin-left: 0.4rem;
	}
	.haval_app_mb_phone1{
		width: 54vw;
        z-index: 1;
        position: absolute;
        bottom: -1.5rem;
        transition: all 2s;
        left: 4vw;
	}
    .haval_app_mb_phone2{
		width: 45vw;
        z-index: 2;
        position: absolute;
        right: 5vw;
        bottom: -1.5rem;
        transition: all 2s;
	}
    .haval_app_mb_phone1.active{
        bottom:1rem;
        top: auto;
    }
    .haval_app_mb_phone2.active{
        bottom:0.5rem;
        top: auto;
    }
}