@import"//at.alicdn.com/t/c/font_4534605_udlaggnij7.css";#App{background-color:#436a91;width:100vw;height:100vh;background-size:cover;background-repeat:no-repeat}#App #bgImg{cursor:pointer;position:fixed;transition:all .7s;width:100vw;height:100vh;top:0;left:0;object-fit:cover}#header{position:fixed;top:0;left:0;z-index:99;display:flex;width:100%;justify-content:flex-end}#header .menu{display:flex;margin-left:auto;gap:25px;width:fit-content;align-items:center;margin-right:50px;padding:20px}#header .menu .menuItem{width:fit-content;height:30px;cursor:pointer;font-size:30px;position:relative}#header .menu .menuItem.act:after{position:absolute;content:"";display:block;height:5px;border-radius:4px;background-color:#7fffd4;width:100%;left:0;bottom:-10px}#header .menu .menuItem:hover:before{position:absolute;content:"";display:block;height:5px;border-radius:4px;background-color:#7fffd4;bottom:-10px;width:0;animation:hoverLine 1s 1}@keyframes hoverLine{0%{left:0}48%{width:100%;left:0}50%{width:100%;left:unset;right:0}52%{width:100%;right:0}to{width:0;right:0}}#header .menu .menuItem svg{width:30px;height:30px}.content{width:100%;height:100vh;display:flex}.content .customArea{flex:1;height:100%}.content .searchBox{pointer-events:none;width:753px;background-repeat:no-repeat;background-position:top right;background-size:contain;position:relative;overflow:hidden;transform-style:preserve-3d;perspective:500px;height:837px}.content .searchBox .colorSpan{pointer-events:all;height:12px;position:absolute;display:flex;align-items:center;gap:20px;margin:auto;top:0;right:0;bottom:0;left:0;transform:translateY(-53px);z-index:2;width:75%}.content .searchBox .colorSpan [class^=color]{display:block;height:12px;border-radius:6px}.content .searchBox .colorSpan .color1{width:100px;background-color:pink}.content .searchBox .colorSpan .color2{width:50px;background-color:#fff09e;margin-left:auto}.content .searchBox .colorSpan .color3{width:80px;background-color:#2ccfcf}.content .searchBox .colorSpan i{font-size:30px;cursor:pointer}.content .searchBox .colorSpan i:hover{animation:rotate 1s 1 ease-in-out}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(180deg)}}.content .searchBox .search{pointer-events:all;transform-origin:center;transition:all .7s;width:75%;height:40px;border-radius:20px;position:absolute;margin:auto;top:0;right:0;bottom:0;left:0;outline:2px solid gray;z-index:1;display:flex;align-items:center;padding:0 10px;background-color:#fffc}.content .searchBox .search:hover,.content .searchBox .search:focus-within{z-index:3;transform:translateZ(30px) rotateY(-3deg)}.content .searchBox .search .searchList{margin-left:-15px;position:absolute;display:flex;flex-direction:column;background-color:#fff;border-radius:15px;gap:15px;box-shadow:2px 2px 5px #d3d3d3;transition:all .5s;height:0;overflow:hidden;padding:15px;height:fit-content;width:fit-content;transform:scale(0);transform-origin:left center}.content .searchBox .search .searchList .searchItem{flex:0;display:flex;background-color:#fff;align-items:center;font-size:18px;cursor:pointer;width:100%;padding:2px;border-radius:10px;white-space:nowrap}.content .searchBox .search .searchList .searchItemMask{border-radius:10px;outline:2px solid skyblue;position:absolute;top:0;left:0;transition:all .5s}.content .searchBox .search .searchList.act{transform:scale(1)}.content .searchBox .search input{border:none;height:inherit;flex:1;outline:none;font-size:16px;background-color:transparent;text-indent:3px}.content .searchBox .search i{height:30px;aspect-ratio:1;cursor:pointer;font-size:30px}.content .searchBox .search .searchLogo{margin-right:10px}.content .searchBox .whiteBg{width:753px;position:absolute;object-fit:contain;top:0;right:-1px;pointer-events:all;border-radius:50% 0% 48% 34%/52% 0% 38% 37%;overflow:hidden}.content .searchBox .person:hover+.search{z-index:3;transform:translateZ(30px) rotateY(-3deg)}.content .searchBox .person{pointer-events:all;position:absolute;bottom:0;left:186px;width:380px;height:67%;z-index:2}.content .settingList{background-color:#fff;display:flex;flex-direction:column;gap:15px;box-sizing:border-box;transition:all 1s;height:100vh;pointer-events:all;transform:translateZ(10px);overflow-x:hidden;overflow-y:auto;width:0}.content .settingList.act{width:220px;padding:0 10px}.content .settingList .settingItem{white-space:nowrap;width:fit-content;display:flex;align-items:center}.content .settingList .settingItem:first-child{margin-top:70px}.content .lockArea{position:fixed;bottom:-100px;left:50%;cursor:not-allowed;transform:translate(-50%);width:200px;height:100px;background-color:#0000004d;border-radius:25px 25px 0 0;line-height:100px;text-align:center;font-size:20px;color:#d3d3d3}.content .bgBtn{position:fixed;bottom:-100px;right:0;width:100px;height:35px;font-size:20px;color:#d3d3d3;display:flex;justify-content:space-evenly;align-items:center}.content .bgBtn.alwaysShow{bottom:0}.content .bgBtn i{aspect-ratio:1;font-size:20px;cursor:pointer;color:#d3d3d3;transition:all .5s}.content .bgBtn i.icon-shuaxin:hover{transform:rotate(360deg)}.content .bgBtn i.icon-xiazai:hover{transform:translateY(-2px) scale(1.1)}.TButton{height:25px;border-radius:15px;width:45px;display:flex;align-items:center;background-color:#a9a9a9;padding:0 3px;cursor:pointer;transform:scale(.8);transition:all .5s}.TButton:hover{box-shadow:0 0 5px #2dd2a2}.TButton.act{background-color:#2dd2a2}.TButton.act .Tbtn-slider{height:70%;margin-left:25px}.TButton .Tbtn-slider{height:80%;margin-left:0;margin-right:0;aspect-ratio:1;border-radius:50%;background-color:#fff;transition:all .5s}#footer{position:fixed;left:0;bottom:0}@font-face{font-family:JuneT-zh;src:url(/assets/zh-ZS1NWtRV.ttf) format("truetype")}*{margin:0;padding:0;font-family:JuneT-zh,sans-serif}
