/* =====================================
   流滋淇科技专业学校
   Main Technology Style
===================================== */


/* 基础设置 */

*{

margin:0;
padding:0;
box-sizing:border-box;

font-family:

"Microsoft YaHei",
"Segoe UI",
sans-serif;

}



html{

scroll-behavior:smooth;

}



body{

background:#02030a;

color:white;

overflow-x:hidden;

}



/* =====================================
   星空背景
===================================== */


#spaceCanvas{

position:fixed;

top:0;
left:0;

width:100%;
height:100%;

z-index:-5;

background:

radial-gradient(
circle at center,
#101c45,
#02030a 70%
);

}





/* =====================================
   音乐按钮
===================================== */


.music-control{

position:fixed;

right:35px;

bottom:35px;

width:65px;

height:65px;

border-radius:50%;

background:

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


border:

1px solid rgba(0,200,255,.6);


display:flex;

justify-content:center;

align-items:center;


cursor:pointer;


z-index:999;



backdrop-filter:blur(15px);


}



.music-circle{

font-size:30px;


animation:

musicRotate 3s linear infinite;


}



@keyframes musicRotate{


from{

transform:rotate(0deg);

}

to{

transform:rotate(360deg);

}


}








/* =====================================
   首页INTRO
===================================== */


#intro{


position:fixed;

width:100vw;

height:100vh;

top:0;

left:0;


display:flex;

justify-content:center;

align-items:center;


background:


radial-gradient(

circle,

#10255a,

#02030a 70%

);


z-index:100;



}





.logo-area{

text-align:center;

}



.tech-logo{


width:150px;

height:150px;


margin:auto;


border-radius:50%;


display:flex;

align-items:center;

justify-content:center;



font-size:55px;


font-weight:900;



background:

linear-gradient(
135deg,
#00eaff,
#0066ff
);



-webkit-background-clip:text;

color:transparent;



border:

2px solid rgba(0,220,255,.5);



box-shadow:


0 0 40px #00d9ff;



animation:

logoFloat 3s infinite alternate;


}




@keyframes logoFloat{


from{

transform:translateY(-10px);

}

to{

transform:translateY(10px);

}


}




.logo-area h1{


margin-top:40px;


font-size:52px;


letter-spacing:8px;



text-shadow:


0 0 25px #009dff;


}





.logo-area p{


margin-top:20px;


font-size:22px;


color:#a8dfff;


}





.future-text{


margin-top:30px;


font-size:18px;


letter-spacing:12px;


color:#00eaff;



}








/* ENTER按钮 */


#enterBtn{


margin-top:50px;


width:220px;


height:65px;



border-radius:40px;


border:

1px solid #00eaff;



background:

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



color:white;


font-size:22px;


cursor:pointer;



backdrop-filter:blur(10px);



box-shadow:

0 0 30px rgba(0,220,255,.8);



transition:.5s;



}




#enterBtn:hover{


transform:

scale(1.15);



background:

rgba(0,220,255,.4);



box-shadow:

0 0 80px #00eaff;


}









/* =====================================
   黑洞过渡
===================================== */


#blackHoleTransition{


position:fixed;


width:100%;

height:100%;


top:0;

left:0;


display:none;


justify-content:center;

align-items:center;



background:black;


z-index:200;



}





.black-hole{


width:400px;


height:400px;


border-radius:50%;


background:


radial-gradient(

circle,

black 30%,

#321070 40%,

#00aaff 55%,

transparent 70%

);



box-shadow:


0 0 100px #00eaff;


animation:

holeSpin 5s linear infinite;



}



@keyframes holeSpin{


from{

transform:rotate(0deg);

}


to{

transform:rotate(360deg);

}


}






.hole-core{


width:180px;

height:180px;


background:black;


border-radius:50%;


position:absolute;



}









/* =====================================
   主网站
===================================== */


#website{


display:block;


padding-top:90px;


}





header{


position:fixed;


top:0;


left:0;


width:100%;


height:90px;



display:flex;


justify-content:space-between;


align-items:center;



padding:0 60px;



background:

rgba(0,10,30,.45);



backdrop-filter:

blur(20px);



border-bottom:

1px solid rgba(0,200,255,.2);



z-index:50;


}




.nav-logo{


font-size:26px;


font-weight:bold;


color:#00d9ff;



text-shadow:

0 0 20px #00d9ff;


}




nav{


display:flex;


gap:30px;


}




nav a{


color:white;


text-decoration:none;


font-size:16px;


position:relative;


transition:.3s;


}



nav a:hover{


color:#00eaff;


text-shadow:

0 0 20px #00eaff;


}








/* =====================================
   页面
===================================== */


.page{


min-height:100vh;


padding:

120px 8%;


display:flex;


flex-direction:column;


justify-content:center;


align-items:center;



}




.page h2{


font-size:45px;


margin-bottom:60px;



color:#00eaff;



text-shadow:


0 0 30px #00eaff;



}








/* =====================================
   首页Hero
===================================== */


.hero{


text-align:center;


}




.hero h2{


font-size:70px;


}




.hero p{


font-size:28px;


color:#b8dcff;


}





.data-box{


margin-top:60px;


display:flex;


gap:40px;


}





.data-box div{


width:200px;

height:130px;



background:

rgba(255,255,255,.08);



border:

1px solid rgba(0,220,255,.3);



border-radius:20px;



display:flex;


flex-direction:column;


justify-content:center;


align-items:center;



backdrop-filter:blur(20px);



}




.data-box span{


font-size:45px;


color:#00eaff;


font-weight:bold;


}







/* =====================================
   玻璃卡片
===================================== */


.glass-card{


max-width:900px;


padding:50px;



background:

rgba(255,255,255,.08);



border:

1px solid rgba(0,200,255,.3);



border-radius:30px;



backdrop-filter:

blur(20px);



font-size:22px;


line-height:2;


}








/* =====================================
   专业卡片
===================================== */


.major-grid{


display:grid;


grid-template-columns:

repeat(3,300px);



gap:40px;


}




.major-card{


height:200px;


display:flex;


justify-content:center;


align-items:center;



font-size:25px;


background:

rgba(0,150,255,.12);



border-radius:30px;


border:

1px solid #009cff;



box-shadow:

0 0 30px rgba(0,180,255,.2);



transition:.5s;



}




.major-card:hover{


transform:

translateY(-20px)
scale(1.05);



box-shadow:

0 0 60px #00eaff;



}









/* =====================================
   联系电话
===================================== */


.contact-box{


text-align:center;


}



.phone{


margin-top:30px;


font-size:55px;


color:#00ffea;



font-weight:bold;


text-shadow:

0 0 40px #00ffff;


}
/* =====================================
   高级科技效果
===================================== */



#matrix{


position:fixed;


top:0;


left:0;


width:100%;


height:100%;


pointer-events:none;


opacity:.08;


z-index:-2;


}



.energy-boom{


position:fixed;


width:20px;


height:20px;


border-radius:50%;


border:2px solid #00eaff;


box-shadow:

0 0 40px #00eaff;



animation:

boom 1s forwards;


pointer-events:none;


z-index:999;



}



@keyframes boom{


0%{


transform:

translate(-50%,-50%)

scale(1);


opacity:1;


}



100%{


transform:

translate(-50%,-50%)

scale(10);


opacity:0;


}



}


/* =====================================
   学校模块高级效果
===================================== */


/* 专业3D卡片 */


.major-card{


perspective:1000px;


cursor:pointer;


transform-style:preserve-3d;


}



.major-card:hover{


transform:

rotateY(15deg)

translateY(-20px)

scale(1.05);



}





/* 校园展示 */


.gallery{


display:flex;


gap:40px;


flex-wrap:wrap;


justify-content:center;


}



.photo{


width:300px;


height:220px;



background:


linear-gradient(

135deg,

rgba(0,220,255,.3),

rgba(0,50,150,.5)

);



border-radius:30px;



display:flex;


align-items:center;


justify-content:center;



font-size:25px;



border:

1px solid #00eaff;



box-shadow:


0 0 40px rgba(0,220,255,.3);



transition:.5s;



}



.photo:hover{


transform:

translateY(-20px)

rotateX(10deg);


box-shadow:


0 0 80px #00eaff;



}







/* 教师模块 */


.teacher-box{


display:flex;


gap:40px;


flex-wrap:wrap;


justify-content:center;



}



.teacher-card{


width:260px;


height:320px;



background:


rgba(0,150,255,.12);



border:


1px solid #00eaff;



border-radius:30px;



display:flex;


align-items:center;


justify-content:center;



font-size:25px;



backdrop-filter:

blur(20px);



transition:.5s;



}



.teacher-card:hover{


transform:

scale(1.1);



box-shadow:


0 0 60px #00eaff;



}







/* 就业时间轴 */


.timeline{


display:flex;


gap:30px;


flex-wrap:wrap;


justify-content:center;



}



.timeline div{


width:180px;


height:100px;



background:


rgba(255,255,255,.08);



border:

1px solid #00eaff;



border-radius:20px;



display:flex;


align-items:center;


justify-content:center;



font-size:22px;



box-shadow:


0 0 30px rgba(0,220,255,.2);



}








/* 报名表 */


.apply-form{


width:500px;



display:flex;


flex-direction:column;


gap:25px;



}



.apply-form input,
.apply-form textarea{


padding:20px;



background:


rgba(255,255,255,.08);



border:

1px solid #00eaff;



border-radius:15px;



color:white;



font-size:18px;



outline:none;



}





.apply-form textarea{


height:150px;


}





.apply-form button{


height:60px;



background:


linear-gradient(

90deg,

#00eaff,

#0066ff

);



border:none;



border-radius:30px;



color:white;



font-size:22px;



cursor:pointer;



box-shadow:


0 0 40px #00eaff;



transition:.4s;



}





.apply-form button:hover{


transform:

scale(1.08);



}
/* =====================================
   Loading
===================================== */


.loader{


position:fixed;


top:0;


left:0;


width:100%;


height:100%;



background:#02030a;



z-index:99999;



display:flex;


flex-direction:column;


align-items:center;


justify-content:center;



transition:1s;



}



.loader-core{


width:130px;


height:130px;



border-radius:50%;



display:flex;


align-items:center;


justify-content:center;



font-size:45px;


font-weight:bold;



color:#00eaff;



border:

2px solid #00eaff;



box-shadow:

0 0 60px #00eaff;



animation:

loaderPulse 2s infinite;



}



.loader-text{


margin-top:40px;


font-size:20px;


letter-spacing:5px;


color:#9eeaff;


}





@keyframes loaderPulse{


0%{


transform:scale(1);


}


50%{


transform:scale(1.2);


}


100%{


transform:scale(1);


}


}