/* =========================

NAVBAR

========================= */


.navbar{


position:fixed;


top:0;


left:0;


width:100%;



height:90px;



padding:0 8%;



display:flex;


justify-content:space-between;


align-items:center;



z-index:100;



background:

rgba(0,0,0,.15);



backdrop-filter:

blur(15px);


}




.logo{


font-size:28px;


font-weight:700;


letter-spacing:3px;


}



.logo span{


font-size:12px;


display:block;


letter-spacing:5px;


color:#aaa;


}



nav a{


margin-left:45px;


font-size:15px;


color:#ddd;


transition:.3s;


}



nav a:hover{


color:white;


}






/* =========================

 HERO

========================= */


.hero{


height:100vh;


min-height:800px;


position:relative;



display:flex;


align-items:center;



padding-left:10%;



overflow:hidden;



background:#050505;


}




.hero-bg{


position:absolute;


inset:0;



background:


radial-gradient(

circle at 70% 50%,

rgba(80,140,255,.35),

transparent 40%

);



animation:

lightMove 8s infinite alternate;


}





@keyframes lightMove{


from{


transform:scale(1);


}


to{


transform:scale(1.3);


}


}






.hero-content{


position:relative;


z-index:2;


max-width:650px;


}




.tag{


font-size:13px;


letter-spacing:4px;


color:#aaa;


margin-bottom:35px;


}




.hero h1{


font-size:80px;


line-height:1.15;


letter-spacing:2px;



}



.desc{


margin-top:35px;


font-size:20px;


color:#ccc;


}



.hero-btn{


display:inline-flex;


margin-top:45px;



padding:16px 50px;


border-radius:50px;



background:white;


color:black;



transition:.4s;


}



.hero-btn:hover{


transform:translateY(-8px);


}




/* 产品主体 */

.product-show{


position:absolute;



right:8%;


bottom:8%;



width:520px;



z-index:2;


}



.product-show img{


width:100%;


filter:

drop-shadow(

0 50px 80px rgba(0,0,0,.8)

);


}




.scroll{


position:absolute;


bottom:40px;


left:50%;


transform:translateX(-50%);



font-size:12px;


letter-spacing:5px;


color:#777;


}





@media(max-width:768px){


nav{

display:none;

}



.hero{


padding:30px;


}



.hero h1{


font-size:42px;


}



.product-show{


width:300px;


right:-20px;


bottom:10%;


}


}