@charset "utf-8";
@import "font-awesome.min.css";
@import "open-sans-font.css";
@import "noto-sans-font.css";
/* Global */
*{margin:0; padding:0;}
html, body{height:100%; background-color:#f7f7fa; overflow:hidden;}
html, body, table, input, select, textarea, button{font-family:var(--bs-font-family), "Segoe UI", SegoeUI, 'Microsoft YaHei', '微软雅黑', SimHei, '黑体'; font-stretch:wider; font-size:14px;}
body{display:flex;}
header{width:25vw; min-width:200px; max-width:350px; height:100%; box-sizing:border-box; padding:50px 20px; background-color:#252525;}
header ul{margin-left:20px; color:#fff;}
header ul li{margin-bottom:1.5em;}
header a{display:flex; align-items:center; justify-content:space-between; color:#f7f7fa;}
header a:hover{color:#f04;}
header .link-icon{width:14px; height:14px;}
header .link-icon svg{display:block; width:100%; height:100%;}
header .link-text{line-height:2;}
header .link-text > span{display:block;}
main {flex:1 0 0%; height:100%; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; box-sizing:border-box; overflow:auto;}
main > div{height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; position:relative;}
main > div .anchors{position:absolute; top:0; left:0;}
h1{color:#252525; text-align:center; font-size:20px; margin-bottom:10px;}
h1 > span{padding:0 5px;}
.video-box{height:70vmin; max-height:560px; aspect-ratio: 16/9; border-radius:10px; border:1px #000 solid; overflow:hidden;}
.video-box video{display:block; height:100%; width:100%; margin:0 auto; border-radius:8px;}

.mobile-nav{display:none;}

@media screen and (orientation: portrait){
    html, body{display:initial; overflow:initial;}
    header{width:100%; min-width:unset; max-width:unset; height:40px; padding:0 10px; position:fixed; top:0; left:0; z-index:10;}
    header ul{background-color:#fff; border-right:1px #ededed solid; margin:0; padding:30px 20px; position:fixed; left:0; top:40px; bottom:0; width:45vw; z-index:10; display:none;}
    header ul li{color:#252525; margin-left:20px;}
    header ul li a{color:#252525;}
    header ul li a .link-icon{width:12px; height:12px;}
    .mobile-nav{height:100%; display:flex; align-items:center;}
    .mobile-nav .list-icon{flex:0 0 30px; height:30px; padding:5px; box-sizing:border-box; color:#f7f7fa; cursor:pointer;}
    .mobile-nav .page-title{flex:1 0 0%; font-size:14px; font-weight:bold; color:#fff;}
    main{height:auto; display:block; padding:40px 30px;}
    main > div{display:block;}
    main > div .title{margin-top:30px;}
    main > div .title h1 > span{display:block; padding:0;}
    .video-box{height:auto; max-height:unset; margin:0 auto; box-sizing:border-box;}
}