*{

margin:0;

padding:0;

box-sizing:border-box;

}


html,
body{

width:100vw;

height:100svh;

margin:0;

padding:0;

overflow:hidden;

background:#000;

touch-action:manipulation;

-webkit-user-select:none;

user-select:none;

-webkit-tap-highlight-color:transparent;

overscroll-behavior:none;

}


/* 首页 */

.page-home{

position:fixed;

left:0;

top:0;

width:100vw;

height:100svh;

overflow:hidden;

}

.home{

transition:1.2s ease;

.fade-out{

opacity:0;

transform:scale(1.15);

filter:blur(12px);

transition:

1.2s ease;

}

}





/* 左红 */

.red{

position:absolute;

left:0;

top:0;

width:50%;

height:100%;

background:#7b131f;

}



/* 右蓝 */

.blue{

position:absolute;

right:0;

top:0;

width:50%;

height:100%;

background:#1047af;

}



/* 中间黑绿线 */

.middle-line{

position:absolute;

left:50%;

top:0;

transform:translateX(-50%);

width:36px;

height:100%;

background:#17382e;

}



/* 文字 */

.title-box{

position:absolute;

left:50%;

top:50%;

transform:translate(-50%,-50%);

text-align:center;

color:white;


}



h1{

font-size:10vw;

white-space:nowrap;

letter-spacing:8px;

font-family:
"STKaiti",
"KaiTi",
"Microsoft YaHei";

font-weight:900;

line-height:1.2;

max-width:70vw;

}



p{


font-size:3vw;

margin-top:25px;


font-family:"Times New Roman";

font-style:italic;


animation:titleShow 2s ease;


}



span{


display:block;

margin-top:60px;

font-size:18px;

letter-spacing:8px;

opacity:.8;


animation:fade 3s ease;


}



/* 动画 */


@keyframes titleShow{


from{

opacity:0;

transform:translateY(80px);

}


to{


opacity:1;


transform:translateY(0);

}


}




@keyframes fade{


from{

opacity:0;

}


to{

opacity:0.8;

}


}