*{

margin:0;

padding:0;

box-sizing:border-box;

}



html,
body{


width:100%;

height:100%;


overflow:hidden;


font-family:

"Microsoft YaHei",
Arial,
sans-serif;


}




.page{


width:100vw;


height:100vh;



position:relative;



background:

url(images/bg.jpg)

center center /

cover

no-repeat;



color:white;



overflow:hidden;


}







/* =====================
顶部Logo
===================== */


.top-logo{


position:absolute;


top:25px;


left:50%;


transform:translateX(-50%);



z-index:10;



}



.top-logo img{


width:580px;

margin-top:-120px;


height:auto;


display:block;



}








/* =====================
左侧内容
===================== */


.content{


position:absolute;


left:14vw;


top:26vh;


width:430px;


max-width:450px;

}



.desc{


font-size:0.95vw;


line-height:2;

text-shadow:none;


}

.desc .welcome{


    letter-spacing:0vw;
	
	font-size:1.1vw;
	
	font-weight:700;


}


.desc p{


margin-bottom:1.2vh;


}







/* =====================
二维码
===================== */


.qr{


display:flex;


gap:1vw;


margin-top:3vh;


}



.qr div{


text-align:center;


font-size:.75vw;


}



.qr img{


width:5vw;


height:5vw;


display:block;


margin-bottom:.8vh;


}








/* =====================
图片滑动区域
===================== */


.phone-box{


position:absolute;



right:8vw;



top:21vh;



width:30vw;



height:55vh;



overflow:hidden;



}





.phone-stage{


width:100%;


height:100%;


position:relative;



}







.phone{


position:absolute;


width:24vw;



max-width:420px;



left:100%;



top:50%;



opacity:0;



transform:


translateY(-50%);



transition:


all 1.2s cubic-bezier(
.4,
0,
.2,
1
);



}





.phone.active{


left:0;


opacity:1;



transform:


translateY(-50%)

scale(1.05);



}





.phone.leave{


left:-100%;


opacity:0;



transform:


translateY(-50%)

scale(.95);



}

.bottom-logo{


position:absolute;


left:50%;


bottom:12vh;


transform:translateX(-50%);


z-index:5;


}


.bottom-logo img{


width:40px;


height:auto;


}







/* =====================
底部
===================== */


footer{


position:absolute;


bottom:0;


left:0;


width:100%;


height:4.5vh;



background:#050505;



display:flex;


align-items:center;


justify-content:space-around;



font-size:.65vw;


color:#aaa;



}








/* =====================
笔记本优化
===================== */


@media(max-width:1400px){


.content{


left:8vw;


width:32vw;


}



.phone-box{


right:8vw;


}



.desc{


font-size:14px;


}



footer{


font-size:12px;


}



.top-logo{


font-size:34px;


}



}






/* =====================
小屏幕
===================== */


@media(max-width:900px){


.content{


left:5vw;


top:18vh;


width:40vw;


}



.phone-box{


right:3vw;


width:35vw;


}



.phone{


width:30vw;


}



}