.welcome-wrapper{z-index:0;scroll-snap-align:start;background-color:#0000;flex-direction:row-reverse;align-items:center;width:100%;height:100vh;display:flex;position:relative;top:0}.welcome-wrapper .background{z-index:-1;width:100%;height:100%;position:absolute}.welcome-wrapper .background#shadow{background:linear-gradient(270deg,#00c0fa 15%,#0000 55%)}.welcome-wrapper .title-box{color:#fff;flex-direction:column;justify-content:center;align-items:flex-end;font-size:1.5rem;display:flex;position:absolute;right:3vw}.welcome-wrapper .title-box h1.main-title{width:max-content;transition:transform .2s cubic-bezier(.22,.61,.36,1),text-shadow .5s cubic-bezier(.22,.61,.36,1);display:inline;transform:scale(1)}.welcome-wrapper .title-box h1.main-title:hover{text-shadow:0 0 10px #00c0fa;transform:scale(1.05)}.welcome-wrapper .title-box h1.main-title:first-child{letter-spacing:-.2vw;font-family:Segoe UI,sans-serif;font-size:4.3em;font-weight:1000;line-height:1.5;animation:.5s cubic-bezier(.22,.61,.36,1) .1s backwards titleAppear}.welcome-wrapper .title-box h1.main-title:nth-child(2){letter-spacing:.4vw;font-family:century,serif;font-size:3em;font-weight:100;line-height:1.2;animation:.5s cubic-bezier(.22,.61,.36,1) .65s backwards titleAppear}.welcome-wrapper .title-box h1.main-title:nth-child(3){color:#ffffff45;-webkit-text-stroke:#fff 2px;font-family:Arial,Helvetica,sans-serif;font-size:2em;line-height:2.5;animation:.5s cubic-bezier(.22,.61,.36,1) 1.2s backwards titleAppear}.welcome-wrapper .title-box p.intro{width:40vw;font-size:1.2eem;margin:40px 0;font-family:Arial,Helvetica,sans-serif;display:inline-block}@keyframes titleAppear{0%{opacity:0;transform:scale(1.5)}to{opacity:1;transform:scale(1)}}@media (max-width:1000px){.welcome-wrapper{flex-direction:column}.welcome-wrapper .background#shadow{background:linear-gradient(#00c0fa 10%,#0000 80%)}.welcome-wrapper .title-box{align-items:center;margin-top:80px;font-size:2.6vw;position:relative;right:0}.welcome-wrapper .title-box h1.main-title:nth-child(2){font-size:5em}.welcome-wrapper .title-box h1.main-title:nth-child(3){font-size:2.65em}}
.detroit-wrapper{pointer-events:none;width:100%;height:100vh;position:sticky;top:0;left:0}.detroit-wrapper canvas.detroit{z-index:2;width:100vw;height:100vh;position:absolute;top:0;left:0}
.section-wrapper{box-sizing:border-box;z-index:1;scroll-snap-align:start;flex-direction:row;align-items:center;width:100%;height:100vh;padding:100px 15%;display:flex;overflow:hidden}.section-wrapper section{color:#fff;flex-direction:column;justify-content:space-evenly;height:100%;display:flex}.section-wrapper section h2{text-shadow:0 0 10px #000}.section-wrapper section h2.section-index{font-family:consolas,monospace;font-size:2em;position:relative}.section-wrapper section h2.section-title{font-size:5em;font-weight:800;position:relative}.section-wrapper section h2.section-title:before{content:"";background-color:#fff;width:12px;position:absolute;top:2px;bottom:2px;left:-20px;box-shadow:0 0 10px #000}.section-wrapper section p{max-width:60%;margin:15px 0;font-family:Arial,Helvetica,sans-serif;font-size:1.35em;position:relative}.section-wrapper section p:before{content:"";background:linear-gradient(#00c0fa,#ff0);width:3px;transition:top .2s ease-out,bottom .2s ease-out;position:absolute;top:50%;bottom:50%;left:-8px}.section-wrapper section p:hover:before{top:0%;bottom:0%}@media (max-width:1000px){.section-wrapper{box-sizing:border-box;flex-direction:column;padding:80px 10px}.section-wrapper section{flex-direction:column;align-items:center;display:flex}.section-wrapper section .section-content-wrapper{flex-direction:column;align-items:center;width:90%;font-size:.8em;display:flex}.section-wrapper section h2.section-index{text-align:center}.section-wrapper section p{width:unset;max-width:unset}}
.sectionlist{z-index:1;position:relative}.sectionlist .sections-wrapper{margin-top:-100vh}
.index-menu-wrapper{scroll-snap-align:start;z-index:1;background-color:#112;width:100%;height:100vh;position:relative;overflow:hidden}.index-menu-wrapper a:link,.index-menu-wrapper a:visited,.index-menu-wrapper a:hover,.index-menu-wrapper a:active{text-decoration:none}.index-menu-wrapper .canvas-wrapper{width:100vw;height:100vh;position:absolute;top:0;left:0;overflow:hidden}.index-menu-wrapper .canvas-wrapper .canvas-star{width:110vw;height:110vh;transition:left .2s ease-out,top .2s ease-out;animation:2s cubic-bezier(0,0,0,1) both canvas-appear;position:absolute;top:-5vh;left:-5vw}.index-menu-wrapper .menu-title{text-align:center;letter-spacing:2vw;color:#fff;margin-top:70px}.index-menu-wrapper .menu-planets-wrapper .planet{animation:3s both planet-hoverable;display:flex}.index-menu-wrapper .menu-planets-wrapper .planet.left .planet-ball-wrapper{animation:1.5s cubic-bezier(0,0,0,1) .3s both planet-appear-left,2s ease-in-out infinite ball-flash}.index-menu-wrapper .menu-planets-wrapper .planet.right .planet-ball-wrapper{animation:1.5s cubic-bezier(0,0,0,1) .3s both planet-appear-right,2s ease-in-out infinite ball-flash}.index-menu-wrapper .menu-planets-wrapper .planet .planet-ball-wrapper{z-index:2;cursor:pointer;background-color:#fa0;border-radius:100%;flex-shrink:0;position:relative;box-shadow:0 0 15px #fa0}.index-menu-wrapper .menu-planets-wrapper .planet .planet-ball-wrapper .planet-ball{color:#fff;object-fit:contain;width:75%;height:75%;margin:12.5%;transform:translateZ(10vw)}.index-menu-wrapper .menu-planets-wrapper .planet .planet-text-wrapper-outer{flex-direction:row;align-items:center;display:flex}.index-menu-wrapper .menu-planets-wrapper .planet .planet-text-wrapper-outer .planet-text-wrapper{color:#fff;z-index:1;flex-direction:column;justify-content:center;align-items:center;height:max-content;transition:width .15s ease-out;display:flex}.index-menu-wrapper .menu-planets-wrapper .planet .planet-text-wrapper-outer .planet-text-wrapper .planet-title{flex-direction:row;align-items:center;transition:background-position .25s cubic-bezier(0,.5,0,1) .3s,outline-offset .3s cubic-bezier(0,0,0,1),outline-width .3s cubic-bezier(0,0,0,1);display:flex}.index-menu-wrapper .menu-planets-wrapper .planet .planet-text-wrapper-outer .planet-text-wrapper .planet-title h3{letter-spacing:20px;text-indent:20px}.index-menu-wrapper .menu-planets-wrapper .planet .planet-text-wrapper-outer .planet-text-wrapper .planet-desc{box-sizing:border-box;background-color:#50505080;border-left:5px solid #2985ff;height:max-content;padding:0 15px;font-size:1.25rem;transition:max-height .75s cubic-bezier(1,0,.45,1) .4s;overflow:hidden auto}.index-menu-wrapper .menu-planets-wrapper .planet .planet-text-wrapper-outer .planet-text-wrapper .planet-desc p{margin:15px 0}.index-menu-wrapper .huaji-sun{transform-origin:50% 0;background:radial-gradient(120vw 60vw at 50% calc(100vh + 50vw),#fcf0b3 0%,#f6bc6a 95%,#eca555 95% 100%,#ffcc664d 100%,#0000 120%);width:100vw;height:100vh;animation:1.75s cubic-bezier(0,0,0,1) 1.25s both sun-appear;position:absolute;bottom:0;left:0}@keyframes planet-hoverable{0%{pointer-events:none}to{pointer-events:auto}}@keyframes planet-appear-left{0%{opacity:0;translate:-30vw;scale:2.5}to{opacity:1;translate:0;scale:1}}@keyframes planet-appear-right{0%{opacity:0;translate:30vw;scale:2.5}to{opacity:1;translate:0;scale:1}}@keyframes sun-appear{0%{transform:translateY(25vw)}to{transform:none}}@keyframes canvas-appear{0%{opacity:0;scale:3.6}to{opacity:1;scale:1}}@keyframes ball-flash{0%{filter:brightness(90%)}50%{filter:brightness(120%)}to{filter:brightness(90%)}}@media (min-width:1000px) and (min-height:450px){.index-menu-wrapper .menu-title{font-size:4rem}.index-menu-wrapper .menu-title br{display:none}.index-menu-wrapper .menu-planets-wrapper{width:100%;height:100%;position:absolute;top:0;left:0}.index-menu-wrapper .menu-planets-wrapper .planet{align-items:center;position:absolute}.index-menu-wrapper .menu-planets-wrapper .planet.left{flex-direction:row}.index-menu-wrapper .menu-planets-wrapper .planet.right{flex-direction:row-reverse}.index-menu-wrapper .menu-planets-wrapper .planet .planet-ball-wrapper{width:8vw;height:8vw}.index-menu-wrapper .menu-planets-wrapper .planet .planet-text-wrapper-outer{width:max-content;height:8vw}.index-menu-wrapper .menu-planets-wrapper .planet .planet-text-wrapper{width:0;overflow:hidden}.index-menu-wrapper .menu-planets-wrapper .planet .planet-text-wrapper .planet-title{outline-offset:-50px;background:linear-gradient(60deg,#2985ff8f 85%,#0000 85%) -18vw 0 no-repeat,linear-gradient(-120deg,#2985ff8f 85%,#0000 85%) 18vw 0 no-repeat;outline:10px solid #fff;width:18vw;height:3.5vw}.index-menu-wrapper .menu-planets-wrapper .planet .planet-text-wrapper .planet-title h3{text-align:center;width:100%;font-size:2rem;font-weight:lighter;line-height:100%}.index-menu-wrapper .menu-planets-wrapper .planet .planet-text-wrapper .planet-desc{width:18vw;max-height:0;margin:5px 0}.index-menu-wrapper .menu-planets-wrapper .planet:hover .planet-text-wrapper-outer{margin:0 30px}.index-menu-wrapper .menu-planets-wrapper .planet:hover .planet-text-wrapper-outer .planet-text-wrapper{width:18vw}.index-menu-wrapper .menu-planets-wrapper .planet:hover .planet-text-wrapper-outer .planet-text-wrapper .planet-title{outline-offset:-1px;background-position:0 0,0 0;outline-width:1px}.index-menu-wrapper .menu-planets-wrapper .planet:hover .planet-text-wrapper-outer .planet-text-wrapper .planet-desc{max-height:20vh}}@media (max-width:1000px) or (max-height:450px){.index-menu-wrapper{flex-direction:column;align-items:center;min-height:0;display:flex}.index-menu-wrapper .menu-title{font-size:3rem}.index-menu-wrapper .menu-title br{display:inline-block}.index-menu-wrapper .menu-planets-wrapper{box-sizing:border-box;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);background-color:#0c0c0c80;border-radius:20px;flex-direction:column;flex-grow:1;width:90%;height:0;margin-top:20px;padding:20px 10px;display:flex;overflow:auto}.index-menu-wrapper .menu-planets-wrapper .planet{align-items:start;width:100%;height:fit-content;margin:20px 0;top:0!important;left:0!important}.index-menu-wrapper .menu-planets-wrapper .planet.left,.index-menu-wrapper .menu-planets-wrapper .planet.right{flex-direction:row}.index-menu-wrapper .menu-planets-wrapper .planet .planet-ball-wrapper{width:100px;height:100px}.index-menu-wrapper .menu-planets-wrapper .planet .planet-text-wrapper-outer{flex-grow:1;height:max-content}.index-menu-wrapper .menu-planets-wrapper .planet .planet-text-wrapper-outer .planet-text-wrapper{width:100%;animation:none;overflow:visible}.index-menu-wrapper .menu-planets-wrapper .planet .planet-text-wrapper-outer .planet-text-wrapper .planet-title{box-sizing:border-box;width:100%;height:unset;background:linear-gradient(60deg,#2985ff calc(10rem + 50px),#0000 0) no-repeat;border:none;outline:none;padding-left:50px;animation:none;position:relative;left:-50px}.index-menu-wrapper .menu-planets-wrapper .planet .planet-text-wrapper-outer .planet-text-wrapper .planet-title h3{text-align:start;font-size:2rem;font-weight:700;line-height:1.3}.index-menu-wrapper .menu-planets-wrapper .planet .planet-text-wrapper-outer .planet-text-wrapper .planet-desc{height:unset;max-height:unset;width:100%;margin:0;animation:none}}
.index-menu-wrapper .cursor{transform-origin:center center -2vw;transform-style:preserve-3d;z-index:2;pointer-events:none;transition:left .2s ease-out,top .2s ease-out,transform .2s cubic-bezier(.15,0,.25,1);animation:.3s cubic-bezier(0,.5,0,1) 2.5s backwards cursor-appear;position:absolute;top:50vh;left:50vw;transform:scale(1)}.index-menu-wrapper .cursor .cube{transform-origin:center center -2vw;transform-style:preserve-3d}.index-menu-wrapper .cursor .cube .surface{width:4vw;height:4vw;transform-origin:center center -2vw;backface-visibility:hidden;background-color:#ffffff1a;border-image-source:radial-gradient(60% 60%,#0000 100%,#0ff 100%);border-image-slice:1;border-image-width:2.4px;position:absolute;top:-2vw;left:-2vw}.index-menu-wrapper .cursor .cube .surface.front{transform:rotateX(0)}.index-menu-wrapper .cursor .cube .surface.behind{transform:rotateX(180deg)}.index-menu-wrapper .cursor .cube .surface.top{transform:rotateX(90deg)}.index-menu-wrapper .cursor .cube .surface.bottom{transform:rotateX(-90deg)}.index-menu-wrapper .cursor .cube .surface.left{transform:rotateY(-90deg)}.index-menu-wrapper .cursor .cube .surface.right{transform:rotateY(90deg)}.index-menu-wrapper .cursor.active{transform:rotateY(45deg)rotateX(-30deg)scale3d(2,2,2)}.index-menu-wrapper .cursor.active .cube{animation:10s linear infinite both cursor-rotate}.index-menu-wrapper .cursor.active .cube .surface{border-image-width:1.5px}@keyframes cursor-appear{0%{opacity:0;scale:3}to{opacity:1;scale:1}}@keyframes cursor-rotate{0%{transform:rotateY(0)}to{transform:rotateY(360deg)}}@media (max-width:1000px) or (max-height:450px){.index-menu-wrapper .cursor{display:none}}
main#main-index .background#backlogo{z-index:-1;background:url(/home/bg-huaji-universe.jpg) 50%/cover no-repeat;width:130%;height:100%;position:fixed;right:12%}main#main-index .index-wrapper{width:100vw}@media (max-width:1000px){main#main-index .background#backlogo{background-position:50%;width:100%;top:10vh;right:0}}