*{margin:0;padding:0}@font-face{font-family:Inter;src:url(./fonts/Inter-VariableFont.ttf) format("truetype");font-weight:300,400,500,600,700,800,900;font-style:normal}.container{position:relative;width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;overflow:hidden}.container .bg{position:absolute;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;z-index:-1}.container .title{width:1.81944rem;height:1rem;flex-shrink:0;aspect-ratio:131/72;margin-top:.44444rem;box-shadow:0 .05556rem .02778rem -.14583rem #00000040;z-index:100}.container .capy{width:2.63194rem;height:4.56944rem;flex-shrink:0;z-index:2;position:absolute}.container .warrior{width:2.00843rem;height:1.64174rem;transform:rotate(4.048deg);flex-shrink:0;position:absolute;left:2.01389rem;bottom:2.79007rem}.container .magician{width:2.45139rem;height:2.00694rem;flex-shrink:0;position:absolute;right:1.79167rem;bottom:3.0625rem}.container .btnbox{height:.45139rem;position:absolute;bottom:.66667rem;display:flex;align-items:center;justify-content:space-around;z-index:1000}.container .btnbox>div:nth-child(2){margin-left:.27778rem}.container .outer{border:.02083rem solid #0A0A0A59;box-shadow:0 .00694rem .03472rem #0003,0 .02083rem .02778rem #0000001f,0 .01389rem .02778rem #00000024;background:#0a0a0a59;height:.45139rem;border-radius:.05556rem;border-width:.02083rem;display:flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;overflow:hidden}.container .inner{background:#00b900;border:.04167rem solid transparent;border-image:linear-gradient(180deg,#00eb00,#009a00) 1;width:100%;height:100%;box-sizing:border-box;border-radius:.04167rem;display:flex;align-items:center;justify-content:center;position:relative}.container .inner:hover{background:#00c700;border-image:linear-gradient(180deg,#00f100,#00ae00) 1}.container .txt{color:#fff;font-family:Inter;font-weight:900;font-size:.16667rem;line-height:100%;letter-spacing:0%;text-align:center;vertical-align:middle;padding:.06944rem .41667rem;text-shadow:-.01389rem -.01389rem 0 #000,.01389rem -.01389rem 0 #000,-.01389rem .01389rem 0 #000,.01389rem .01389rem 0 #000,-.01389rem 0 0 #000,.01389rem 0 0 #000,0 .01389rem 0 #000,0 -.01389rem 0 #000,0 .01389rem .02778rem rgba(92,26,26,.24),0 .02083rem .02778rem rgba(123,12,12,.12),0 .00694rem .03472rem rgba(136,13,13,.2);display:flex;align-items:center;justify-content:center}.container .inner svg{position:absolute;top:.04167rem;right:.0641rem;width:.11111rem;height:.0625rem;flex-shrink:0}.container .purple{background:#29a9eb;border-image:linear-gradient(180deg,#4be1fd,#0084e2) 1}.container .purple:hover{background:#31baef;border-image:linear-gradient(180deg,#58ecfe,#009ae7) 1}.container .purple .txt{padding:.06944rem .20833rem}.container .icon{width:.22222rem;height:.22222rem;flex-shrink:0;aspect-ratio:1/1;margin-right:.05556rem}.container .social{position:absolute;display:flex;align-items:center;justify-content:center;right:.44444rem;top:.38889rem}.container .middlebox{background:#fba035;box-shadow:0 -.00347rem #ffffff40 inset;width:100%;height:.30556rem;margin:auto;border-radius:.03472rem;display:flex;align-items:center;justify-content:center}.container .middlebox:hover{background:#fcb340}.container .socialbox{border-radius:.04861rem;border:.01389rem solid #000;background:linear-gradient(180deg,#f65f26 87.43%,#db4f18);width:.32639rem;height:.34722rem;cursor:pointer}.container .socialbox:hover{background:linear-gradient(180deg,#fcb340 87.43%,#e4551d)}.container .socialbox:first-child{margin-right:.13889rem}.container .imgbox{width:.25694rem;height:.25rem;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;border-radius:.02083rem;mix-blend-mode:soft-light;background:linear-gradient(180deg,#fff6,#ffffff3d);-webkit-backdrop-filter:blur(.00694rem);backdrop-filter:blur(.00694rem);position:absolute}.container .imgbox:hover{filter:blur(.00347rem)}.container .iconsocial{width:.23611rem;height:.23611rem;position:relative;z-index:1000}@media screen and (max-width: 678PX){.container{position:relative;width:100vw;height:100vh;display:flex;flex-direction:column;align-items:center;overflow:hidden}.container .bg{position:absolute;top:0;left:0;right:0;bottom:0;width:100vw;height:100vh;z-index:-1}.container .title{width:203PX;height:auto;aspect-ratio:29/16;flex-shrink:0;margin-top:10.84vh;box-shadow:0 .05556rem .02778rem -.14583rem #00000040;z-index:100}.container .capy{width:auto;height:62.39%;height:64.29vh;flex-shrink:0;aspect-ratio:233/522;z-index:2;position:absolute}.container .warrior{width:2.00843rem;height:1.64174rem;transform:rotate(4.048deg);flex-shrink:0;position:absolute;left:2.01389rem;bottom:2.79007rem}.container .magician{width:2.45139rem;height:2.00694rem;flex-shrink:0;position:absolute;right:1.79167rem;bottom:3.0625rem}.container .btnbox{height:auto;position:absolute;bottom:10vh;display:flex;align-items:center;flex-direction:column;justify-content:space-around;z-index:1000}.container .btnbox>div:nth-child(2){margin-top:16PX;margin-left:0}.container .outer{border:3PX solid #0A0A0A59;box-shadow:0 1PX 5PX #0003,0 3PX 4PX #0000001f,0 2PX 4PX #00000024;background:#0a0a0a59;height:56PX;width:280PX;border-radius:8PX;border-width:3PX;display:flex;align-items:center;justify-content:center;cursor:pointer;box-sizing:border-box;overflow:hidden}.container .inner{background:#00b900;border:6PX solid transparent;border-image:linear-gradient(180deg,#00eb00,#009a00) 1;width:100%;height:100%;box-sizing:border-box;border-radius:6PX;display:flex;align-items:center;justify-content:center;position:relative}.container .inner:hover{background:#00c700;border-image:linear-gradient(180deg,#00f100,#00ae00) 1}.container .txt{color:#fff;font-family:Inter;font-weight:900;font-size:20PX;line-height:100%;letter-spacing:0%;text-align:center;vertical-align:middle;padding:0;text-shadow:-2PX -2PX 0 #000,2PX -2PX 0 #000,-2PX 2PX 0 #000,2PX 2PX 0 #000,-2PX 0 0 #000,2PX 0 0 #000,0 2PX 0 #000,0 -2PX 0 #000,0PX 2PX 4PX rgba(92,26,26,.24),0PX 3PX 4PX rgba(123,12,12,.12),0PX 1PX 5PX rgba(136,13,13,.2);display:flex;align-items:center;justify-content:center}.container .inner svg{position:absolute;top:6PX;right:9.23PX;width:16PX;height:9PX;flex-shrink:0}.container .purple{background:#29a9eb;border-image:linear-gradient(180deg,#4be1fd,#0084e2) 1}.container .purple:hover{background:#31baef;border-image:linear-gradient(180deg,#58ecfe,#009ae7) 1}.container .purple .txt{padding:0}.container .icon{width:32PX;height:32PX;flex-shrink:0;aspect-ratio:1/1;margin-right:8PX}.container .social{position:absolute;display:flex;align-items:center;justify-content:center;right:20PX;top:20PX}.container .middlebox{background:#fba035;box-shadow:0 -.5PX #ffffff40 inset;width:100%;height:34PX;margin:auto;border-radius:5PX;display:flex;align-items:center;justify-content:center}.container .middlebox:hover{background:#fcb340}.container .socialbox{border-radius:7PX;border:2PX solid #000;background:linear-gradient(180deg,#f65f26 87.43%,#db4f18);width:40PX;height:40PX;cursor:pointer}.container .socialbox:hover{background:linear-gradient(180deg,#fcb340 87.43%,#e4551d)}.container .socialbox:first-child{margin-right:12PX}.container .imgbox{width:28PX;height:28PX;display:flex;align-items:center;justify-content:center;position:relative;z-index:2;border-radius:3PX;mix-blend-mode:soft-light;background:linear-gradient(180deg,#fff6,#ffffff3d);-webkit-backdrop-filter:blur(1PX);backdrop-filter:blur(1PX);position:absolute}.container .imgbox:hover{filter:blur(.5PX)}.container .iconsocial{width:24PX;height:24PX;position:relative;z-index:1000}}