@font-face{font-family:"play";src:url("../font/play.woff2") format("woff2")}@font-face{font-family:"play-bold";src:url("../font/play-bold.woff2") format("woff2")}*{box-sizing:border-box;margin:0;padding:0;font-family:"play",Arial,sans-serif}html{scroll-behavior:smooth;font-size:18px}@media only screen and (max-width: 1024px){html{font-size:16px}}@media only screen and (max-width: 500px){html{font-size:15px}}body{background-color:#2c0724;color:#fff}body::after{content:"";z-index:-100;width:100%;height:100vh;position:fixed;top:0;left:0;background-image:url("../img/body_pc_bg.webp");background-repeat:no-repeat;background-size:cover;background-position:50%;opacity:.6}img{display:block;width:100%}.f-center{display:flex;justify-content:center;align-items:center}.text-link{color:#ff0031}ul,li{list-style:none}a{font-size:1.2rem;text-decoration:none;color:#fff}p,span{font-size:1.2rem;line-height:36px;text-align:left}h1,h2,h3,h4{color:#fff;font-family:"play-bold",Arial,sans-serif}h1{font-size:2rem;color:orange}h2{text-align:center;font-size:1.6rem;padding-bottom:20px;color:orange}h3{font-size:1.4rem;color:#f5d16e;padding:15px 0}h4{text-align:center;font-size:1.3rem;color:#f5d16e}.layout-padding{padding:2.5% 10%}@media only screen and (max-width: 1024px){.layout-padding{padding:3% 6%}}@media only screen and (max-width: 500px){.layout-padding{padding:3% 4%}}.common-btn{color:#505050;padding:12px 35px;font-weight:800;border-radius:12px;background:linear-gradient(0deg, #ff9c19 40%, #ffdd2d 110%);box-shadow:-3.828px -3.828px 6px 0px rgba(255,200,39,.4),3px 5px 8px 0px rgba(255,82,1,.2)}@media only screen and (max-width: 500px){.common-btn{padding:10px 24px}}#up{display:none;background-color:#dbb96d;width:50px;height:50px;font-weight:bolder;border-radius:50%;position:fixed;right:2%;bottom:2%;justify-content:center;align-items:center;box-shadow:.5px 1px 5px 5px rgba(0,0,0,.5);transition:.3s ease-out;cursor:pointer;opacity:.7}#up:hover{opacity:1}@media only screen and (max-width: 1024px){#up{width:45px;height:45px}}#up p{font-size:1.5rem;font-weight:bolder;position:absolute;top:45%;left:50%;transform:translate(-50%, -50%)}#luckywheel{z-index:300;position:fixed;left:0;bottom:18%}@media only screen and (max-width: 500px){#luckywheel{bottom:8%}}#luckywheel img{width:auto;animation:game 1.5s ease-out infinite}@keyframes game{0%{filter:drop-shadow(0px 0px 2px #fff)}50%{filter:drop-shadow(0px 0px 6px #fff)}100%{filter:drop-shadow(0px 0px 2px #fff)}}@media only screen and (max-width: 1024px){#luckywheel img{width:120px}}@media only screen and (max-width: 500px){#luckywheel img{width:80px}}.navbar{z-index:100;width:100%;position:sticky;top:0;background:linear-gradient(180deg, #000000 0%, #303030 100%);height:80px;padding:0 8%;display:grid;grid-template-columns:1fr 5fr 1fr 1fr;align-items:center;overflow:hidden}@media only screen and (max-width: 1024px){.navbar{height:70px;padding:0 6%;grid-template-columns:1fr 3fr}}.navbar .logo-img{height:100%;justify-self:start;display:flex;align-items:center}.navbar .logo-img img{min-width:100px;max-height:50px}.navbar .menu-toggle{display:none;justify-self:end}.navbar .menu-toggle:hover{cursor:pointer}@media only screen and (max-width: 1024px){.navbar .menu-toggle{display:block}}.navbar .menu-toggle .bar{width:25px;height:3px;background-color:#fff;margin:5px auto;-webkit-transition:all .3s ease-in-out;-o-transition:all .3s ease-in-out;transition:all .3s ease-in-out}@media only screen and (max-width: 1024px){.navbar .menu-toggle .bar{display:block}}.navbar .nav{text-align:center;display:grid;grid-template-columns:repeat(5, 1fr);justify-self:end;justify-items:center;list-style:none}@media only screen and (max-width: 1024px){.navbar .nav{width:100%;background-color:#3f3f3f;display:flex;justify-content:start;flex-direction:column;position:fixed;top:70px;right:0;transform:translate(-101%);text-align:center;overflow:hidden;border-top:2px solid #f1c670;border-bottom:2px solid #f1c670}}@media only screen and (max-width: 1024px){.navbar .nav li{padding:12px 0}.navbar .nav li:hover{background-color:#707070}}.navbar .nav li a{color:#fff;font-size:1rem;padding:18px 15px;transition:color .2s ease-out}@media only screen and (max-width: 1024px){.navbar .nav li a{font-size:1.5rem}}.navbar .head-button{width:120px;height:35px;font-size:.9rem;border-radius:6px;margin:auto;display:flex;justify-content:center;align-items:center}@media only screen and (max-width: 1024px){.navbar .head-button{display:none}}.navbar .head-login{border:1px solid #fff}.navbar .head-join{margin-left:10px;background:linear-gradient(90deg, #b00022, #ff0031)}#mobile-menu.is-active .bar:nth-child(1){-webkit-transform:translateY(8px) rotate(45deg);-ms-transform:translateY(8px) rotate(45deg);-o-transform:translateY(8px) rotate(45deg);transform:translateY(8px) rotate(45deg)}#mobile-menu.is-active .bar:nth-child(2){opacity:0}#mobile-menu.is-active .bar:nth-child(3){-webkit-transform:translateY(-8px) rotate(-45deg);-ms-transform:translateY(-8px) rotate(-45deg);-o-transform:translateY(-8px) rotate(-45deg);transform:translateY(-8px) rotate(-45deg)}.overlay::before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.5);z-index:80;pointer-events:none}@media only screen and (max-width: 1024px){.mobile-nav{transition:color .8s ease-out;transform:translate(0%) !important}}footer{display:flex;justify-content:space-between;flex-wrap:wrap;margin:3% 0 0;padding:0 10%}@media only screen and (max-width: 1024px){footer{padding:0 6%}}@media only screen and (max-width: 500px){footer{padding:0 4%}}footer .footer-logoarea{width:35%}@media only screen and (max-width: 800px){footer .footer-logoarea{width:45%}}@media only screen and (max-width: 500px){footer .footer-logoarea{width:100%}}footer .footer-logoarea img{max-width:220px}footer .footer-logoarea p{font-size:.8rem;line-height:24px}footer .footer-download{width:40%;display:flex;justify-content:space-between;align-items:center}@media only screen and (max-width: 800px){footer .footer-download{width:45%}}@media only screen and (max-width: 500px){footer .footer-download{width:100%;margin:25px 0}}footer .footer-download a{width:48%}footer .copyright{width:100%;border-top:1px solid #fff;margin-top:1%;padding:2.5% 0;text-align:center}h2{text-align:unset}#sport-1{display:flex;justify-content:center;flex-wrap:wrap;gap:30px}@media only screen and (max-width: 500px){#sport-1{justify-content:space-between;gap:15px}}#sport-1 .sport-img{width:18%;max-width:200px;display:flex;justify-content:center;align-items:center}@media only screen and (max-width: 500px){#sport-1 .sport-img{width:20%}}#sport-1 img{opacity:.75;border-radius:12px;cursor:pointer}#sport-1 img:hover{opacity:1}@media only screen and (max-width: 500px){#sport-1 img{border-radius:8px}}#sport-1 h1{width:100%}#sport-2 .sport-imgbox{margin-top:3%;display:flex;justify-content:center;flex-wrap:wrap;gap:45px}@media only screen and (max-width: 500px){#sport-2 .sport-imgbox{gap:20px}}#sport-2 .sport-imgbox img{width:auto;border-radius:12px;animation:game 1.2s ease-out infinite}@keyframes game{0%{filter:drop-shadow(0px 0px 4px #ffe066)}50%{filter:drop-shadow(0px 0px 6px #ffe066)}100%{filter:drop-shadow(0px 0px 4px #ffe066)}}@media only screen and (max-width: 500px){#sport-2 .sport-imgbox img{width:100%}}#sport-3 ul li{margin:16px 0;display:flex;align-items:center}@media only screen and (max-width: 500px){#sport-3 ul li{margin:10px 0}}#sport-4 p:last-of-type{margin-bottom:3%}#sport-4 .gradient-border{width:600px;height:600px;display:flex;justify-content:center;align-items:center;margin:auto;--borderWidth: 2px;position:relative;border-radius:calc(4*var(--borderWidth))}#sport-4 .gradient-border::after{content:"";z-index:-1;position:absolute;top:calc(-1*var(--borderWidth));left:calc(-1*var(--borderWidth));width:calc(100% + var(--borderWidth)*2);height:calc(100% + var(--borderWidth)*2);border-radius:calc(4*var(--borderWidth));background:linear-gradient(60deg, #ffe066, #ffd700, #ffae00, #cc8e00, #996300);background-size:300% 300%;animation:animatedgradient 2s ease alternate infinite}@keyframes animatedgradient{0%{filter:drop-shadow(0px 0px 2px #ffe066);background-position:0% 50%}50%{filter:drop-shadow(0px 0px 6px #ffe066);background-position:100% 50%}100%{filter:drop-shadow(0px 0px 2px #ffe066);background-position:0% 50%}}@media only screen and (max-width: 1024px){#sport-4 .gradient-border{width:100%;height:100%}}#sport-4 .gradient-border .lucky-banner{width:auto;margin:0 auto;border-radius:8px}@media only screen and (max-width: 1024px){#sport-4 .gradient-border .lucky-banner{width:100%}}