:root { --c-w-100: rgba(255, 255, 255, 1); --c-w-90: rgba(255, 255, 255, 0.9); --c-w-80: rgba(255, 255, 255, 0.8); --c-w-70: rgba(255, 255, 255, 0.7); --c-w-60: rgba(255, 255, 255, 0.6); --c-w-50: rgba(255, 255, 255, 0.5); --c-w-40: rgba(255, 255, 255, 0.4); --c-w-30: rgba(255, 255, 255, 0.3); --c-w-20: rgba(255, 255, 255, 0.2); --c-w-10: rgba(255, 255, 255, 0.1); --c-w-0: rgba(255, 255, 255, 0); --c-b-100: rgba(0, 0, 0, 1); --c-b-90: rgba(0, 0, 0, 0.9); --c-b-80: rgba(0, 0, 0, 0.8); --c-b-70: rgba(0, 0, 0, 0.7); --c-b-60: rgba(0, 0, 0, 0.6); --c-b-50: rgba(0, 0, 0, 0.5); --c-b-40: rgba(0, 0, 0, 0.4); --c-b-30: rgba(0, 0, 0, 0.3); --c-b-20: rgba(0, 0, 0, 0.2); --c-b-10: rgba(0, 0, 0, 0.1); --c-b-0: rgba(0, 0, 0, 0); --border-width: 1.5px; --border-color: rgba(255, 255, 255, 0.1) !important; --c-select: rgb(43, 213, 255); --navbar-height: 50px;}* { box-sizing: border-box; outline: 0; -webkit-user-drag: none; }body { background-color: rgba(0, 0, 0, 0.7); margin: 0px; }#window-mask { opacity: 0; z-index: 0; position: fixed; left: 0; top: 0; height: 100%; width: 100%; box-shadow: 0 0 20px 5px rgba(0, 0, 0, 0.3) inset; background-image: radial-gradient( rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.3) 100% ); transition: 0.25s; border: 3px solid red;}#bg-img { z-index: -1; position: fixed; background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed; height: 100vh; width: 100vw; transition: transform 0.25s, filter 0.25s; }#bg-img2 { z-index: -1; width: 100%; height: 100%; object-fit: cover; position: fixed; top: 50%; transform: translateY(-50%); pointer-events: none; }#box-navbar-trigger { position: fixed; top: 0%; width: 100vw; height: 15%; transition: opacity 0.2s; border: 1px solid white;}#box-navbar { opacity: 1; position: fixed; top: 0%; width: 100vw; height: var(--navbar-height); backdrop-filter: blur(3px); background: linear-gradient( to right, rgba(0, 0, 0, 0), 10%, rgba(0, 0, 0, 0.1), 90%, rgba(0, 0, 0, 0) ); background-color: rgba(0, 0, 0, 0.2); transition: 0.25s; font-size: 0px; user-select: none; border: 1px solid red;}#ul-navbar { height: 100%; position: absolute; left: 50%; transform: translateX(-50%); padding: 0px; white-space: nowrap; list-style: none; border: 1px solid red;}#ul-navbar li { display: inline-block; height: 100%; line-height: 50px; padding-left: 2.5vw; padding-right: 2.5vw; color: rgba(255, 255, 255, 0.8); font-family: "Microsoft Yahei Light", "Microsoft Yahei", "宋体"; font-size: 20px; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5); transition: 0.3s; cursor: pointer; border: 1px solid red;}#ul-navbar li:hover { background-color: var(--c-w-10);}#box-navbar-btn { height: 100%; float: right; position: absolute; right: 2vw; border: 1px solid red;}#box-navbar-btn .navbar-btn { display: inline-block; width: 50px; height: 100%; transition: 0.3s; cursor: pointer; border: 1px solid red;}#box-navbar-btn .navbar-btn:hover { background-color: var(--c-w-10);}#box-navbar-btn .navbar-btn-img { width: 70%; height: 70%; position: relative; top: 50%; left: 50%; transform: translate(-50%, -50%); background-size: cover; border: 1px solid red;}#navbar-btn-help { background-image: url(../image/ui/help.png);}#navbar-btn-set { background-image: url(../image/ui/set.png);}#mouse-menu { opacity: 0; z-index: 500; position: fixed; width: 150px; padding: 5px 0px; margin: 0px; border-radius: 10px; background-color: rgba(255, 255, 255, 0.8); backdrop-filter: blur(10px); box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.3); pointer-events: none; }.mouse-menu-li { list-style: none; padding: 5px 20px; font-family: "Microsoft Yahei", "宋体"; font-size: 14px; color: rgba(0, 0, 0, 0.8); transition: background-color 0.1s; user-select: none; cursor: pointer; }.mouse-menu-li:hover { background-color: rgba(0, 0, 0, 0.1); }.mouse-menu-li-disable { list-style: none; padding: 5px 20px; font-family: "Microsoft Yahei", "宋体"; font-size: 14px; color: rgba(0, 0, 0, 0.3); transition: background-color 0.1s; user-select: none; pointer-events: none;}#box-tip { z-index: 600; opacity: 0; height: 30px; padding: 0px 15px; position: fixed; background-color: var(--c-b-50); backdrop-filter: blur(10px); box-shadow: 3px 3px 5px 0px rgba(0, 0, 0, 0.3); border-radius: 5px; text-align: center; line-height: 30px; font-size: 14px; color: rgba(255, 255, 255, 0.8); user-select: none; pointer-events: none; transition: opacity 0.1s; }#box-window-tip { display: none; width: 400px; height: 250px; position: fixed; top: calc(50% - 125px); left: calc(50% - 200px); background-color: var(--c-w-20); backdrop-filter: blur(10px); box-shadow: 3px 3px 5px 0px var(--c-b-30); border-radius: 20px; padding: 10px 15px; color: var(--c-w-80); font-family: "Microsoft Yahei Light", "Microsoft Yahei", "宋体"; font-size: 14px; border-top: var(--border-width) solid var(--border-color) !important; border-left: var(--border-width) solid var(--border-color) !important; }#window-tip-close-btn { width: 16px; height: 16px; position: absolute; top: 14px; right: 20px; transition: transform 0.1s; cursor: pointer; border: 1px solid red;}#window-tip-close-btn path { fill: var(--c-w-50); transition: 0.25s;}#window-tip-title { text-align: center; font-family: "Microsoft Yahei", "宋体"; font-size: 16px; margin: 0px 0px 10px;}#window-tip-text a { font-family: "Microsoft Yahei", "宋体"; color: rgb(0, 0, 255); transition: color 0.1s;}#window-tip-text a:hover { font-family: "Microsoft Yahei", "宋体"; color: rgb(0, 255, 255);}