@font-face {
    font-family: "siyuan";
    font-weight: 900;
    src: url("../font/SourceHanSerifCN-Bold.otf");
    font-display: swap;
}
*{padding: 0; margin: 0; box-sizing: border-box;}
body{background-color: #050506;}
.video-box{ width: 100%; position: relative;}
.video-box video{ width: 100%;}
.video-box .video-font-area{ width: 100%; height: 100%; position: absolute; left: 0; top: 0;background: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAMAAAADAQMAAABs5if8AAAABlBMVEUAAAAAAAClZ7nPAAAAAXRSTlNNSIvlSwAAAAxJREFUCNdjaGAAAgAChgCB/5LsuQAAAABJRU5ErkJggg=="); background-color: rgba(0, 0, 0, 0.55); padding-top: 3vw;}
.video-box .video-font-area .work-logo{ width: 13.5vw; margin-left: 10vw;}

.video-box .video-font-area .mian-title{ width: 40vw; display: block; margin: 0 auto; margin-top: 5vw;}
.video-box .video-font-area .steam-btn{ width: 23vw; display: block; margin: 0 auto; margin-top: 2vw;}

.font-box{ width: 100%; height: 24.5vw; background-image: url(../images/font-bg.png); background-size: 100% auto; position: relative; margin-top: -13.5vw; padding-top: 10vw;}
.font-box p{font-family: 'siyuan'; color: #cccccc; font-size: 22px; margin: 0 auto; text-align: center; line-height: 180%;}
.font-box p span{color: #e08f1f;}
.font-box .btn{ width: 8.5vw; position: absolute; right: 1.3vw; bottom: 2vw;}
.font-box .bilibili-btn{right: 11vw;}