/* Global */
@font-face {font-family: 'Gilroy';font-display: auto;src: url('/assets/fonts/Gilroy-ExtraBold.eot');src: local('Gilroy ExtraBold'), local('Gilroy-ExtraBold'),url('/assets/fonts/Gilroy-ExtraBold.eot?#iefix') format('embedded-opentype'),url('/assets/fonts/Gilroy-ExtraBold.woff') format('woff'),url('/assets/fonts/Gilroy-ExtraBold.ttf') format('truetype');font-weight: 800;font-style: normal;}
@font-face {font-family: 'Gilroy';font-display: auto;src: url('/assets/fonts/Gilroy-Heavy.eot');src: local('Gilroy Heavy'), local('Gilroy-Heavy'),url('/assets/fonts/Gilroy-Heavy.eot?#iefix') format('embedded-opentype'),url('/assets/fonts/Gilroy-Heavy.woff') format('woff'),url('/assets/fonts/Gilroy-Heavy.ttf') format('truetype');font-weight: 900;font-style: normal;}
@font-face {font-family: 'Gilroy';font-display: auto;src: url('/assets/fonts/Gilroy-SemiBold.eot');src: local('Gilroy SemiBold'), local('Gilroy-SemiBold'),url('/assets/fonts/Gilroy-SemiBold.eot?#iefix') format('embedded-opentype'),url('/assets/fonts/Gilroy-SemiBold.woff') format('woff'),url('/assets/fonts/Gilroy-SemiBold.ttf') format('truetype');font-weight: 600;font-style: normal;}
@font-face {font-family: 'Gilroy';font-display: auto;src: url('/assets/fonts/Gilroy-Light.eot');src: local('Gilroy Light'), local('Gilroy-Light'),url('/assets/fonts/Gilroy-Light.eot?#iefix') format('embedded-opentype'),url('/assets/fonts/Gilroy-Light.woff') format('woff'),url('/assets/fonts/Gilroy-Light.ttf') format('truetype');font-weight: 300;font-style: normal;}
@font-face {font-family: 'Gilroy';font-display: auto;src: url('/assets/fonts/Gilroy-Regular.eot');src: local('Gilroy Regular'), local('Gilroy-Regular'),url('/assets/fonts/Gilroy-Regular.eot?#iefix') format('embedded-opentype'),url('/assets/fonts/Gilroy-Regular.woff') format('woff'),url('/assets/fonts/Gilroy-Regular.ttf') format('truetype');font-weight: normal;font-style: normal;}
@font-face {font-family: 'Gilroy';font-display: auto;src: url('/assets/fonts/Gilroy-Medium.eot');src: local('Gilroy Medium'), local('Gilroy-Medium'),url('/assets/fonts/Gilroy-Medium.eot?#iefix') format('embedded-opentype'),url('/assets/fonts/Gilroy-Medium.woff') format('woff'),url('/assets/fonts/Gilroy-Medium.ttf') format('truetype');font-weight: 500;font-style: normal;}
@font-face {font-family: 'Gilroy';font-display: auto;src: url('/assets/fonts/Gilroy-UltraLight.eot');src: local('Gilroy UltraLight'), local('Gilroy-UltraLight'),url('/assets/fonts/Gilroy-UltraLight.eot?#iefix') format('embedded-opentype'),url('/assets/fonts/Gilroy-UltraLight.woff') format('woff'),url('/assets/fonts/Gilroy-UltraLight.ttf') format('truetype');font-weight: 200;font-style: normal;}
@font-face {font-family: 'Gilroy';font-display: auto;src: url('/assets/fonts/Gilroy-Bold.eot');src: local('Gilroy Bold'), local('Gilroy-Bold'),url('/assets/fonts/Gilroy-Bold.eot?#iefix') format('embedded-opentype'),url('/assets/fonts/Gilroy-Bold.woff') format('woff'),url('/assets/fonts/Gilroy-Bold.ttf') format('truetype');font-weight: bold;font-style: normal;}
@font-face {font-family: 'Gilroy';font-display: auto;src: url('/assets/fonts/Gilroy-Thin.eot');src: local('Gilroy Thin'), local('Gilroy-Thin'),url('/assets/fonts/Gilroy-Thin.eot?#iefix') format('embedded-opentype'),url('/assets/fonts/Gilroy-Thin.woff') format('woff'),url('/assets/fonts/Gilroy-Thin.ttf') format('truetype');font-weight: 100;font-style: normal;}
@font-face {font-family: 'Gilroy';font-display: auto;src: url('/assets/fonts/Gilroy-Black.eot');src: local('Gilroy Black'), local('Gilroy-Black'),url('/assets/fonts/Gilroy-Black.eot?#iefix') format('embedded-opentype'),url('/assets/fonts/Gilroy-Black.woff') format('woff'),url('/assets/fonts/Gilroy-Black.ttf') format('truetype');font-weight: 900;font-style: normal;}


.anim,.anim:hover,.anim:after,.anim:hover:after{transition: all 0.4s;}
*{margin:0;border:0;padding:0;outline:none;user-select:none;}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none;}
input[type='number'] {-moz-appearance: textfield;}

::-webkit-scrollbar {width: 3px; background: #000;}
::-webkit-scrollbar-track {box-shadow: inset 0 0 3px #000; border-radius: 3px;}
::-webkit-scrollbar-thumb {background: #fff; border-radius: 3px;}
::-webkit-scrollbar-thumb:hover {background: #fff; }

body{background: linear-gradient(180deg, #141828 52.5%, #26335F 68.5%, #141828 80.5%), #FFF;overflow-x:hidden !important;overflow-y: scroll !important;width:100%;font-family: "Gilroy";}

@media (min-width: 1620px){
    .container{
        max-width:1590px;
    }
}

/* UI Elements */

.flex{display:flex;flex-wrap: wrap;}
.flex.flex-x-sb{justify-content: space-between;}
.flex.flex-y-c{align-items: center;align-content: center;}
.flex.flex-x-c{justify-content: center;}
.flex.flex-y-e{align-items: flex-end;}
.flex.flex-x-e{justify-content: flex-end;}

.btn{background:#3965FF;padding:0 30px;height:56px;display:flex;flex-wrap: wrap;align-items: center;justify-content: center;font-size: 20px;color:#fff;text-decoration: none;cursor: pointer;border-radius: 6px;transition: 0.3s;}
.btn:hover{background:#2441A3;}
.btn img{height:22px;margin-right:10px;}
.btn.btn-o{background:none;color:#fff;border:2px solid rgba(112,112,112,0.3);}
.btn.btn-o:hover{color:#fff;background:#3965FF;border:2px solid #3965FF;}
.btn.btn-o:hover *{filter: brightness(0);}


.btn.btn-o-b{background:none;padding:0 30px;height:56px;display:flex;flex-wrap: wrap;align-items: center;justify-content: center;font-size: 20px;color:#000;text-decoration: none;cursor: pointer;border:2px solid #EEEEEE;}
.btn.btn-o-b:hover{background:#FFD700;}

.btn.btn-opacity{background: rgba(255, 255, 255, 0.05);color:#fff;}
.btn.btn-opacity:hover{color:#fff;background:rgba(255, 255, 255, 0.15);}

.relative{position: relative;}

.mt-15{margin-top:15px;}

.w100{width:100%;}
/* Header / Footer */

header{width:100%;position: absolute;top:78px;z-index:100;}
header .logo{width:170px;height:60px;}
header ul{display: flex;flex-wrap: wrap;align-items: center;list-style: none;}
header ul li{display: block;margin-left:32px;}
header ul li a{color:#707070;text-decoration: none;font-size: 20px;position: relative;}
header ul li a:hover,header ul li a.active{color:#fff;}
header ul li a:after{bottom:-8px;width:0px;height:3px;position:absolute;content:"";right:0;background:#3965FF;}
header ul li a:hover:after,header ul li a.active:after{width:46px;}
header ul li a.btn:after{display:none;}
header .profile{height:74px;background:#FFFFFF;display:flex;flex-wrap: wrap;align-content: center;align-items: center;padding:8px 20px;}
header .profile .avatar{width:46px;height:46px;margin-right:25px;}
header .profile .user-info strong{font-size: 15px;font-weight: bold;line-height:20px;text-align: right;}
header .profile .user-info p{font-size:14px;font-weight: 500;line-height: 19px;text-align: right;}
header .profile .user-info p img{margin-right: 5px;width: 10px;height:10px;}
header .profile .user-info a{margin-top: 2px;font-size: 11px;font-weight: bold;color:#000;text-align: right;float:right;}
header .profile .user-info a:hover{color:#3965FF;}
header .profile .user-info a:hover:after{display:none;}

header.black ul li a{color:#9FA6B1;}
header.black ul li a:hover,header.black ul li a.active,header.black ul li a.btn{color:#000;}

footer{width:100%;background:#000000;padding:32px 0;}
footer .logo{width:108px;height:38px;}
footer ul{display: flex;flex-wrap: wrap;align-items: center;margin-left:12px;list-style: none;}
footer ul li{display: block;margin-left:32px;}
footer ul li a{color:#545658;font-size: 20px;text-decoration: none;}
footer ul li a:hover{color:#fff;}
footer .copyright{color:#fff;text-align: right;font-weight: bold;font-size: 16px;}
footer .copyright .text-2{color:#404143;}
footer .copyright a{text-decoration: none;color:#404143;}
footer .copyright a:hover{color:#3965FF;}

/* Main */

main{width:100%;min-height:100vh;background:url('/assets/img/bg2.png');background-position: 50% 50%;background-size: cover;background-repeat: no-repeat;padding-bottom: 115px;}

/* Home Page */

section.utp{width: 100%;height:100vh;background:url('/assets/img/bg.jpg');background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;position: relative;z-index: 0;}
section.utp:before{content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: linear-gradient(90deg, rgba(20, 20, 20, 0.00) 0%, rgba(20, 20, 20, 0.58) 25%, rgba(20, 20, 20, 0.72) 50%, rgba(20, 20, 20, 0.58) 75%, rgba(20, 20, 20, 0.00) 100%);z-index: -2;}
section.utp:after{content: "";position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 98.4259vh;height: 74.6296vh;background: url(/assets/img/utp-blur.svg) no-repeat;background-size: cover;z-index: -1;}
section.utp .social{position: absolute;bottom:65px;right:90px;display:flex;list-style: none;}
section.utp .social li{margin-left:15px;}
section.utp .social li a{opacity: 0.5;}
section.utp .social li a:hover{opacity:1;}
section.utp .social li a img{height:15px;}
section.utp .arrow{width:45px;height:45px;border:1px solid #1C1C1C;bottom:72px;left:50%;margin-left:22.5px;position: absolute;display:flex;flex-wrap: wrap;align-items: center;justify-content: center;cursor: pointer;}
section.utp .arrow img{height:20px;-webkit-animation: move_mouse 0.75s linear 0s infinite alternate;animation: move_mouse 0.75s linear 0s infinite alternate;}
section.utp .arrow:hover{background:#3965FF;}
/* section.utp .arrow:hover *{filter: brightness(0);} */
section.utp .container,section.utp .container .row,section.utp .container .row .col-12{height:100%;}
section.utp .persona{max-width: 100%;height:80%;bottom:0;right:0;cursor: pointer;}
section.utp .utp-text{width:100%;}
section.utp .title{color:#fff;font-size: 72px;width: 100%;line-height: 100px;font-weight: 700;}
section.utp .title-sub{color:#3965FF;font-weight: bold;width: 100%;font-size: 14px;letter-spacing: 30px;}
section.utp .utp-action{width:100%;position: relative;margin-top:52px;}
section.utp .utp-action .btn{width:300px;margin-top:15px;font-weight: bold;height:74px;}
section.utp .utp-action .text{width:100%;color:#fff;font-size: 25px;font-weight: bold;margin-bottom:10px;}
section.utp .utp-action .online{margin-left:30px;}
section.utp .utp-action .online img{height:30px;margin-right:15px;}
section.utp .utp-action .online p{color:#fff;font-size: 15px;font-weight: bold;line-height: 1;}
section.utp .utp-action .online strong{color:#3965FF;font-size: 30px;font-weight: bold;line-height: 1;margin-top:-6px;}
section.utp .utp-action .btn.btn-o{font-weight: normal;}

@-webkit-keyframes move_mouse{0%{margin-bottom:0}50%{margin-bottom:-5px}to{margin-bottom:0}}@keyframes move_mouse{0%{margin-bottom:0}50%{margin-bottom:-5px}to{margin-bottom:0}}

/* Start Game Page */

section.start-game{position: relative;z-index: 1;}
section.start-game .title{color:#fff;width:100%;text-align: center;margin-top:120px;font-size: 60px;font-weight: bold;}
section.start-game .item-1{margin-top:45px;position: relative;display:flex;flex-wrap: wrap;align-items: center;align-content: center;}
section.start-game .item-2{margin-top:-70px;position: relative;display:flex;flex-wrap: wrap;align-items: center;align-content: center;}
section.start-game .item-3{margin-top:30px;position: relative;display:flex;flex-wrap: wrap;align-items: center;align-content: center;}
section.start-game img{max-width: 100%;}
section.start-game .number{font-size: 314px;position: absolute;line-height: 1;color:rgba(255, 255, 255, 0.10);z-index:-1;}
section.start-game .item-1 .number{bottom: -50px;left:-60px;}
section.start-game .item-2 .number{bottom: -100px;right:-60px;}
section.start-game .item-3 .number{bottom: -50px;left:-100px;}
section.start-game .item-title{color:#fff;font-size: 35px;font-weight: bold;width: 100%;}
section.start-game .item-text{color:#B5B5B5;width: 100%;font-size: 20px;color:#B5B5B5;margin-top: 5px;line-height:27px;}
section.start-game .item-2 .item-title{text-align: right;}
section.start-game .btn{margin-top: 20px;font-weight: bold;}

/* Servers */

section.servers{margin-top:162px;}
section.servers .title{color:#fff;width:100%;text-align: center;font-size: 60px;font-weight: bold;}
section.servers .box{width:100%;margin-top:45px;padding:40px 50px 0;box-shadow: 0px 30px 60px rgba(0,0,0,0.3);background-size:cover;background-repeat:no-repeat;background-position:50% 50%;display: inline-block;}
section.servers .info{display:flex;flex-wrap: wrap;}
section.servers .info img{height:53px;margin-right:15px;}
section.servers .info p{color:#fff;font-size:15px;}
section.servers .info h2{font-size: 36px;font-weight: bold;color:#fff;}
section.servers .btn{margin-top:110px;height:76px;padding:0 65px;float:right;margin-bottom: 30px;font-weight: bold;}
section.servers .stats{position: absolute;right: 40px;top: 85px;display: flex;flex-wrap: wrap;align-items: center;align-content: center;justify-content: center;width: 143px;height: 143px;}
section.servers .stats canvas{position: absolute;top: 0;left: 0;}
section.servers .stats span[dc-value]{font-size: 30px;color:#3965FF;width:100%;text-align: center;font-weight: bold;}
section.servers .stats span[dc-value-max]{font-size: 14px;color:#B4B4B4;width:100%;text-align: center;font-weight: bold;}

/* Join US */

section.join-us{margin-top:122px;}
section.join-us .title{color:#fff;width:100%;text-align: center;font-size: 60px;font-weight: bold;}
section.join-us .box{width:100%;margin-top:45px;height:600px;overflow: hidden;position: relative;z-index:1;background: linear-gradient(180deg, #1A1F33 0%, #141828 100%);}
section.join-us .box .substrate-image{width: 100%;height:420px;background-position:50% 50%;background-size:cover;position: absolute;z-index:-2;top:0;left:0;}
section.join-us .box .substrate{color:#fff;width: 150%;transform: rotateZ(-40deg);background: linear-gradient(180deg, #1A1F33 0%, #141828 100%);position: absolute;height: 100%;text-align: left;margin-top: 112px;padding: 25px;margin-left: 20%;font-size: 30px;font-weight: bold;}
section.join-us .box .link{position: absolute;width:164px;height:164px;top:100px;right:90px;background:linear-gradient(180deg, #1A1F33 0%, #141828 100%);z-index:2;display:flex;flex-wrap: wrap;align-content: center;align-items: center;justify-content: center;box-shadow: 0px 30px 50px rgba(0,0,0,0.1);}
section.join-us .box .link:before{content: "";position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: rgba(255, 255, 255, 0.05);opacity: 0;transition: 0.3s;}
section.join-us .box .link:hover:before{opacity: 1;}
section.join-us .box .info{position: absolute;bottom:55px;right:55px;display:flex;flex-wrap: wrap;justify-content: flex-end;}
section.join-us .box .info img{width:50px;}
section.join-us .box .info strong{color:#fff;width:100%;text-align: right;margin-top:-5px;margin-bottom: 20px;font-size:44px;line-height: 58px;}
section.join-us .box .info .btn{height:72px;padding:0 62px;font-weight: bold;}

/* Donate */

section.donat{margin-top:122px;}
section.donat .title{color:#fff;width:100%;text-align: center;font-size: 60px;font-weight: bold;margin-bottom: 110px;}
section.donat .box{width:100%;background: linear-gradient(0deg, #1A1F33 0%, #1A1F33 100%);margin-bottom:30px;padding:30px 65px;}
section.donat .box .name{color:#fff;font-weight: bold;font-size: 30px;}
section.donat .box .info{float:right;margin-right: 10px;}
section.donat .box .info span{font-size: 25px;line-height: 33px;font-weight: bold;color:#fff;}
section.donat .box-form{width:100%;background: linear-gradient(0deg, #1A1F33 0%, #1A1F33 100%);margin-bottom:35px;padding:95px 65px;}
section.donat .box-form .label{width:100%;font-size: 18px;color:#fff;font-weight: bold;}
section.donat .box-form select{color:#fff;width:100%;margin-top:15px;padding:0 40px;height:70px;box-sizing: border-box;background: url('/assets/img/icon-select.svg') no-repeat right rgba(255, 255, 255, 0.05);background-position: 95% 50%;-webkit-appearance: none;font-size: 18px;font-weight: bold;}
section.donat .box-form select option{background: linear-gradient(0deg, #1A1F33 0%, #1A1F33 100%);}
section.donat .box-form input{color:#fff;width:100%;margin-top:62px;padding:0 40px;height:70px;box-sizing: border-box;background:rgba(255, 255, 255, 0.05);font-size: 18px;font-weight: bold;}
section.donat .box-form input::placeholder{color:#D4D4D4;}
section.donat .box-form .btn{height:64px;font-weight: bold;margin-top:40px;}
section.donat .package-donat{width:100%;height:254px;margin-bottom:30px;position: relative;}
section.donat .package-donat .substrate{width:100%;height:100%;position: absolute;z-index:-1;top:0;left:0;overflow: hidden;}
section.donat .package-donat .substrate-image{width:100%;height:100%;position:absolute;z-index:-2;background-position: 50% 50%;background-size: cover;background-repeat: no-repeat;}
section.donat .package-donat .substrate-color{width: 150%;height: 100%;position: absolute;z-index: -1;background: linear-gradient(0deg, #1A1F33 0%, #1A1F33 100%);top: 142px;left: -114px;transform: rotateZ(30deg);}
section.donat .package-donat .text{position: absolute;bottom:35px;left:40px;display:flex;flex-wrap: wrap;}
section.donat .package-donat .text span{width:100%;color:#D4D4D4;line-height:1;font-size: 12px;font-weight: bold;}
section.donat .package-donat .text span{width:100%;color:#D4D4D4;line-height:1;font-size: 12px;font-weight: bold;}
section.donat .package-donat .text strong{width:100%;color:#fff;line-height:1;font-size: 25px;font-weight: bold;margin-top:-3px;margin-bottom:15px;}
section.donat .package-donat .text .btn{height:48px;font-weight: bold;}
section.donat .package-donat .price{color:#fff;width:156px;height:66px;position: absolute;top:0;right:0;background: rgba(0, 0, 0, 0.50);display:flex;flex-wrap: wrap;align-items: center;align-content: center;justify-content: center;font-weight: bold;font-size:30px;}
section.donat .package-donat .info{width:66px;height:66px;background:#3965FF;position: absolute;top:66px;right:0;display:flex;flex-wrap: wrap;align-content: center;align-items: center;justify-content: center;cursor: pointer;}
section.donat .package-donat .info .popup{position: absolute;top:100%;right:0;width:328px;display:none;padding:20px 30px;background:#FFFFFF;box-shadow: 0px 15px 99px rgba(0,0,0,0.1);z-index:2;}
section.donat .package-donat .info .popup > span{width:100%;color:#D4D4D4;line-height:1;font-size: 12px;font-weight: bold;}
section.donat .package-donat .info .popup > strong{width:100%;color:#000;line-height:1;font-size: 25px;font-weight: bold;margin-top:-3px;margin-bottom:15px;}
section.donat .package-donat .info .popup > p{width:100%;color:#3965FF;line-height:1;font-size: 14px;font-weight: bold;margin-top:15px;margin-bottom:5px;}
section.donat .package-donat .info .popup > div{color:#A5A5A5;width:100%;font-size:15px;font-weight: bold;line-height: 20px;}
section.donat .package-donat .info:hover .popup{display: flex;flex-wrap: wrap;}

/* App */

#app{width:100%;min-height:100vh;position: relative;background:url('/assets/img/form/bg.jpg');background-size: cover;background-position:50% 50%;background-repeat: no-repeat;z-index: 1;}
#app .copyright{width:100%;font-size: 16px;font-weight: bold;color:#9EAAB9;text-align: center;bottom:25px;position: absolute;}
#app .header-app{width:100%;}
#app .header-app .logo{margin-top:78px;}

/* Signin / Signup / Forget */

#app .form-signin{width:620px;box-sizing: border-box;box-shadow: 0px 30px 60px rgba(0,0,0,0.1);background: linear-gradient(0deg, #1A1F33 0%, #1A1F33 100%);margin-bottom: 120px;padding:50px 60px;}
#app .form-signup{width:920px;box-sizing: border-box;box-shadow: 0px 30px 60px rgba(0,0,0,0.1);background: linear-gradient(0deg, #1A1F33 0%, #1A1F33 100%);margin-bottom: 120px;padding:50px 60px;overflow: hidden;}
#app .form-forget{width:620px;box-sizing: border-box;box-shadow: 0px 30px 60px rgba(0,0,0,0.1);background: linear-gradient(0deg, #1A1F33 0%, #1A1F33 100%);margin-bottom: 120px;padding:50px 60px;}

#app .form-header{width:100%;display:flex;justify-content: space-between;align-items: center;align-content:center;margin-bottom: 25px;}
#app .form-header h2{color:#fff;font-weight: bold;font-size: 45px;line-height: 35px;}
#app .form-header img{max-width: 90px;max-height:90px;}
#app .input-box{margin-top: 25px;width:100%;}
#app .input-box input{width:100%;padding:0 35px;height:75px;box-sizing: border-box;background: rgba(255, 255, 255, 0.05);font-size: 20px;font-weight: bold;color:#fff;}
#app .input-box input::placeholder{color:#D4D4D4;}

#app .form{margin-top:130px;}
#app .form .action{width:100%;display:flex;align-items: center;align-content: center;justify-content: space-between;margin-top:32px;margin-bottom:15px;}
#app .form .action .label-checkbox{width:45px;height:45px;border:2px solid #EEEEEE;float:left;}
#app .form .action .checkbox{cursor:pointer;}
#app .form .action .checkbox input[type="checkbox"]{display:none;}
#app .form .action .checkbox input[type="checkbox"]+label {display: inline-flex;align-items: center;user-select: none;}
#app .form .action .checkbox input[type="checkbox"]:checked+label {background:#3965FF;border:0;}
#app .form .action .checkbox input[type="checkbox"]:checked+label:before {content:'';width:100%;height:100%;background:url('/assets/img/icon-checkbox.svg');background-size:19px 15px;background-position: 50% 50%;background-repeat: no-repeat;}
#app .form .action .checkbox p{color:#fff;margin-left:15px;font-weight: bold;font-size: 20px;}
#app .form .link{text-decoration: underline;color:#3965FF;font-size: 20px;font-weight: bold;}
#app .form .btn{margin-top:10px;width:100%;height:74px;font-weight: bold;}
#app .form .support-text{font-size: 14px;font-weight: bold;color:#C1C9D2;}
#app .form .support-text a{font-size: 14px;}
#app .action-button{display:flex;flex-wrap: wrap;justify-content: space-between;}
#app .action-button .btn{width:calc(60% - 15px);}
#app .action-button .btn.btn-o-b{width:calc(40% - 15px);}

#app .form h3{margin-top:32px;font-size: 20px;font-weight: bold;}
#app .form .select-avatar{margin-top:20px;}
#app .form .avatar-active{position: relative;}
#app .form .avatar-active:before{position: absolute;content:'';width:32px;height:32px;background:#3965FF;bottom:-15px;right:-8px;}
#app .form .avatar-active:after{position: absolute;content:'';width:32px;height:32px;background:url('/assets/img/icon-checkbox2.svg');background-size:11px 9px;background-position: 50% 50%;background-repeat: no-repeat;bottom:-15px;right:-8px;}
#app .form .select-avatar .owl-carousel .owl-stage-outer{overflow:inherit;}  
#app .form .status{color:#3965FF;width:100%;font-size: 14px;font-weight: bold;margin-top:25px;margin-bottom:20px;}

/* Case */

section.case{padding-top:200px;}
section.case .title{width:100%;text-align: center;font-size: 40px;font-weight: bold;margin-bottom: 50px;}
section.case .case-select{width:100%;list-style: none;display:flex;flex-wrap: wrap;justify-content: space-between;}
section.case .case-select > li{width: calc(20% - 75px / 4);position: relative;top:0;}
section.case .case-select > li a{text-decoration: none;background:#fff;padding:0 25px 20px;margin-top:15px;position: relative;width: 100%;display: inline-block;transition: all 0.1s;}
section.case .case-select > li a:hover{width:calc(100% + 36px);padding-bottom:44px;margin-left:-18px;margin-top: -22px;position: absolute;z-index: 2;box-shadow:0px 40px 99px rgba(0,0,0,0.16);transition: all 0.1s;margin-bottom:-44px;}
section.case .case-select > li img{width:100%;}
section.case .case-select > li .label{margin-top:-22px;color:#C1C9D2;font-size:15px;font-weight: 500;line-height: 1;}
section.case .case-select > li .name{font-weight: bold;font-size: 20px;line-height: 1;color:#000;}
section.case .case-select > li .price{margin-top:15px;font-size: 25px;color:#000;font-weight: bold;display:flex;flex-wrap: wrap;align-items: center;align-content: center;}
section.case .case-select > li .price .old{margin-right:10px;color:#C7C7C7;font-weight: 500;font-size: 15px;text-decoration: line-through;}

/* Case Open */

section.case-open{padding-top:240px;}
section.case-open .title{width:100%;text-align: center;font-size: 40px;font-weight: bold;position: relative;}
section.case-open .subtitle{width:100%;text-align: center;font-size: 25px;font-weight: bold;margin-bottom: 25px;position: relative;color:#90969E;}
section.case-open .backjump{width: 160px;height:50px;border:2px solid #BBBBBB;display:flex;flex-wrap: wrap;align-items: center;justify-content: center;font-size:15px;color:#000;font-weight: bold;position: absolute;text-decoration: none;}
section.case-open .backjump:hover{background:#FFD700;border:2px solid #FFD700;}
section.case-open .roulette-wrapper{position:relative;display:flex;justify-content:flex-start;width:100%;overflow:hidden;}
section.case-open .roulette-wrapper .wheel,section.case-open .roulette-wrapper .wheel .row-card{display:flex;}
section.case-open .roulette-wrapper .wheel .row-card .card{height:160px;width:160px;margin-left: 7.5px;margin-right: 7.5px;display:flex;align-items:center;justify-content:center;}
section.case-open .roulette-wrapper .wheel .row-card .card img{max-width: 100%;}
section.case-open .card.purpur{background:radial-gradient(#D700FF, #8C00B5);}  
section.case-open .card.blue{background:radial-gradient(#00CBFF, #009CB5);}  
section.case-open .card.red{background:radial-gradient(#FF0000, #B50000);}
section.case-open .card.yellow{background:radial-gradient(#FFE600, #B56D00);}
section.case-open .card.green{background:radial-gradient(#00FF08, #3CB500);}
section.case-open .selector,section.case-open .selector-h,section.case-open .selector-v{width:100%;height:100%;position: absolute;top:0;left:0;z-index:2;}
section.case-open .selector-h:after{content:'';width:42px;height:25px;position: absolute;background:url('/assets/img/icon-case-arrow.svg');background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;transform: rotateZ(-90deg);top:50%;margin-top:-12.5px;left:0;margin-left:-5px;}
section.case-open .selector-h:before{content:'';width:42px;height:25px;position: absolute;background:url('/assets/img/icon-case-arrow.svg');background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;transform: rotateZ(90deg);top:50%;margin-top:-12.5px;right:0;margin-right:-5px;}
section.case-open .selector-v:after{content:'';width:70px;height:40px;position: absolute;background:url('/assets/img/icon-case-arrow.svg');background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;transform: rotateZ(0deg);top:0%;margin-top:-20px;left:50%;margin-left:-35px;}
section.case-open .selector-v:before{content:'';width:70px;height:40px;position: absolute;background:url('/assets/img/icon-case-arrow.svg');background-size: cover;background-position: 50% 50%;background-repeat: no-repeat;transform: rotateZ(180deg);top:100%;margin-top:-20px;left:50%;margin-left:-35px;}
section.case-open .action{margin-top:60px;width:300px;display:flex;flex-wrap: wrap;justify-content: space-between;margin-bottom: 40px;}
section.case-open .btn[data-case-open]{width:164px;height:44px;font-size:15px;font-weight: bold;}
section.case-open .count{width:132px;height:44px;display:flex;}
section.case-open .count .btn-cube{width:44px;height:44px;padding:0;font-size:20px;font-weight: bold;}
section.case-open .count .value{width:44px;height:44px;padding:0;font-size:20px;font-weight: bold;display:flex;flex-wrap: wrap;align-items: center;justify-content: center;background:#fff;}
section.case-open .btn.btn-fullw{width:100%;height:44px;font-size:15px;font-weight: bold;margin-top:5px;}
#fase-result{max-height: 525px;overflow: auto;}
#fast-result::-webkit-scrollbar{width: 15px;}

/* Case Open Result */

#casePopup{width:100%;height:100vh;display:none;flex-wrap: wrap;align-self: center;align-content: baseline;justify-content: center;overflow: auto;position: fixed;top:0;left:0;z-index:100;background:rgba(0,0,0,0.65);padding-top:120px;padding-bottom:120px;}
#casePopup.active{display:flex;}
#casePopup .title{width:100%;color:#FFD700;font-size: 55px;font-weight: bold;text-align: center;}
#casePopup .title-sub{width:100%;color:#fff;font-size: 25px;font-weight: bold;text-align: center;   }
#casePopup .result{width:100%;display:flex;flex-wrap: wrap;list-style: none;justify-content: center;}
#casePopup .result li{margin-top:20px;display:flex;flex-wrap: wrap;list-style: none;justify-content: center;}
#casePopup .result li .lot{width:324px;height:324px;display:flex;align-items:center;justify-content:center;padding:24px;}
#casePopup .result li .lot img{width: 100%;}
#casePopup .result li .lot.purpur{background:radial-gradient(#D700FF, #8C00B5);}  
#casePopup .result li .lot.blue{background:radial-gradient(#00CBFF, #009CB5);}  
#casePopup .result li .lot.red{background:radial-gradient(#FF0000, #B50000);}
#casePopup .result li .lot.yellow{background:radial-gradient(#FFE600, #B56D00);}
#casePopup .result li .lot.green{background:radial-gradient(#00FF08, #3CB500);}
#casePopup .result li .name{margin-top:10px;width:100%;color:#fff;text-align: center;font-size: 25px;font-weight: bold;}
#casePopup .result li .btn{margin:30px 7.5px 0; }

/* Dashboard */

section.dashboard{padding-top:200px;}
section.dashboard .title{width:100%;text-align: center;font-size: 40px;font-weight: bold;position: relative;margin-bottom:45px;}

section.dashboard .box{margin-top:20px;width:100%;background:#fff;padding:35px 45px;}

section.dashboard .e-wallet .info{display:flex;flex-wrap: wrap;align-content: center;align-items: center;}
section.dashboard .e-wallet .info img{width:45px;margin-right:20px;}
section.dashboard .e-wallet .info p{font-size: 12px;color:#C1C9D2;font-weight: 500;}
section.dashboard .e-wallet .info p strong{font-size: 30px;color:#000;font-weight: bold;}
section.dashboard .e-wallet .btn{height:50px;width: 196px;font-size:14px;font-weight: bold;}

section.dashboard .e-profile .info{position: relative;width:100%;display:flex;flex-wrap: wrap;align-items: center;align-content: center;}
section.dashboard .e-profile .info .avatar{width:93px;margin-right:30px;}
section.dashboard .e-profile .info .text p{color:#C1C9D2;font-size: 12px;font-weight: 500;margin-top:4px;line-height: 1;}
section.dashboard .e-profile .info .text strong{color:#000;font-size: 20px;font-weight: bold;margin-bottom:4px;line-height: 1;}
section.dashboard .e-profile .stats{position: absolute;right: 0px;top: 0px;display: flex;flex-wrap: wrap;align-items: center;align-content: center;justify-content: center;width: 113px;height: 113px;}
section.dashboard .e-profile .stats strong{width: 100%;font-weight: bold;font-size: 22px;text-align: center;line-height: 1;}
section.dashboard .e-profile .stats p{width: 100%;font-weight: bold;font-size: 7px;text-align: center;line-height: 1;color:#CBCBCB;}
section.dashboard .e-profile .stats canvas{position: absolute;top: 0;left: 0;}
section.dashboard .e-profile .btn{margin-top:25px;width:300px;max-width: 100%;height:60px;font-size:14px;font-weight: bold;padding: 0;}
section.dashboard .e-profile .btn img{width:46px;height:36px;margin-right:15px;}
section.dashboard .e-profile .info-more{width:100%;display:flex;flex-wrap: wrap;}
section.dashboard .e-profile .info-more p{margin-right: 50px;margin-top:30px;font-size: 12px;font-weight: 500;color:#C1C9D2;line-height: 1;}
section.dashboard .e-profile .info-more p strong{font-weight: bold;font-size: 20px;color:#000;line-height: 1;}
section.dashboard .e-profile .ballans{margin-top:32px;}
section.dashboard .e-profile .ballans h3{font-weight: bold;font-size: 25px;color:#000;line-height: 1;width:100%;margin-bottom: 10px;}
section.dashboard .e-profile .ballans strong{margin-top:8px;width:100%;display:flex;flex-wrap: wrap;align-items: center;font-size:20px;font-weight: bold;}
section.dashboard .e-profile .ballans strong img{width:24px;margin-right:10px;}

section.dashboard .box-head{width:100%;display:flex;flex-wrap: wrap;align-content: center;align-items: center;font-size:25px;font-weight: bold;margin-bottom:10px;}
section.dashboard .box-head .box-icon{width:49px;height:49px;margin-right:15px;background:#FFD700;display:flex;flex-wrap: wrap;justify-content: center;align-items: center;}
section.dashboard .box-head .box-icon img{max-width: 30px;max-height: 30px;}

section.dashboard .e-home .info-more,section.dashboard .e-business .info-more{width:100%;display:flex;flex-wrap: wrap;}
section.dashboard .e-home .info-more p,section.dashboard .e-business .info-more p{width:100%;margin-top:20px;font-size: 12px;font-weight: 500;color:#C1C9D2;line-height: 1;}
section.dashboard .e-home .info-more p strong,section.dashboard .e-business .info-more p strong{font-weight: bold;font-size: 20px;color:#000;line-height: 1;}

section.dashboard .e-transport .info-more{width: 100%;position: relative;}
section.dashboard .e-transport .info-more .item{border:1px solid #EEEEEE;padding:20px 30px;margin-top:10px;}
section.dashboard .e-transport .info-more .item p{font-weight: 500;font-size: 12px;line-height: 1;color:#C1C9D2;}
section.dashboard .e-transport .info-more .item strong{font-weight: bold;font-size: 20px;line-height: 1;color:#000;}
section.dashboard .e-transport .owl-nav{height: 0px;position: absolute;width: 100%;top: 50%;z-index:0;}
section.dashboard .e-transport .owl-nav .owl-prev{width: 50px;height: 50px;background:#FFD700;position: absolute;top:0;margin-top:-22px;left:-20px;z-index: 2;display:flex;flex-wrap: wrap;align-items: center;align-content: center;justify-content: center;transform: rotateZ(180deg);}
section.dashboard .e-transport .owl-nav .owl-next{width: 50px;height: 50px;background:#FFD700;position: absolute;top:0;margin-top:-22px;right:-20px;z-index: 2;display:flex;flex-wrap: wrap;align-items: center;align-content: center;justify-content: center;}
section.dashboard .e-transport .owl-nav .owl-prev.disabled,section.dashboard .e-transport .owl-nav .owl-next.disabled{display:none;}
section.dashboard .e-transport .owl-nav .owl-prev span,section.dashboard .e-transport .owl-nav .owl-next span{display:none;}
section.dashboard .e-transport .owl-nav .owl-prev:after,section.dashboard .e-transport .owl-nav .owl-next:after{content:'';width:9px;height:16px;background:url('/assets/img/icon-arrow-owl.svg');}

section.dashboard .e-lastitem .item{height:76px;width:76px;margin-left: 3.5px;margin-right: 3.5px;display:flex;align-items:center;justify-content:center;margin-top:10px;}  
section.dashboard .e-lastitem .item.purpur{background:radial-gradient(#D700FF, #8C00B5);}  
section.dashboard .e-lastitem .item.blue{background:radial-gradient(#00CBFF, #009CB5);}  
section.dashboard .e-lastitem .item.red{background:radial-gradient(#FF0000, #B50000);}
section.dashboard .e-lastitem .item.yellow{background:radial-gradient(#FFE600, #B56D00);}
section.dashboard .e-lastitem .item.green{background:radial-gradient(#00FF08, #3CB500);}

section.dashboard .e-setting .list{width:100%;margin-top:15px;display:flex;flex-wrap: wrap;list-style: none;}
section.dashboard .e-setting .list li{margin-top:15px;width:100%;display:flex;flex-wrap:wrap;justify-content: space-between;align-items: center;}
section.dashboard .e-setting .list li strong{width:30%;color:#C1C9D2;font-size:20px;font-weight: bold;}
section.dashboard .e-setting .list li p{width:30%;font-size:20px;font-weight: bold;}
section.dashboard .e-setting .list li .btn{height:50px;font-size:14px;font-weight: bold;}
section.dashboard .e-stats .list{width:100%;margin-top:15px;display:flex;flex-wrap: wrap;list-style: none;}
section.dashboard .e-stats .list li{margin-top:40px;width:100%;display:flex;flex-wrap:wrap;justify-content: space-between;align-items: center;}
section.dashboard .e-stats .list li p:nth-child(1){width:45%;}
section.dashboard .e-stats .list li p:nth-child(2){width:45%;}
section.dashboard .e-stats .list li p:nth-child(3){width:10%;}
section.dashboard .e-stats .list li.head p{color:#C1C9D2;font-weight: 500;font-size:20px;}
section.dashboard .e-stats .list li p{color:#000;font-weight: bold;font-size:20px;}
.mobile{display:none;}

/* modal */
body.modal-active {
	height: 100vh;
	overflow: hidden !important;
}
.modal-container.hide {
	display: none !important;
}

.modal-container {
	display: flex;
	position: absolute;
	left: 0;
	top: 0;
	background: rgba(0, 0, 0, 0.8);
	width: 100%;
	height: 100vh;
	overflow: hidden;
	z-index: 999;
	justify-content: center;
	align-items: center;
}

.modal-container .overlay {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	z-index: 1000;
}

.modal-container .modal {
	position: relative;
	background: #fff;
	max-height: 90vh;
	margin: 5vh;
	box-shadow: 0px 30px 50px rgba(0,0,0,0.1);
	box-sizing: border-box;
	padding: 10px;
	overflow-x: hidden;
	overflow-y: scroll;
	z-index: 1001;
}

.modal-container .modal .modal-close {
	width: 32px;
	height: 32px;
	position: absolute;
	right: 0;
	top: 0;
	background: #fff;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 32px;
}

.modal-container .modal .modal-close:hover {
	transition: 0.7s;
	background: #FFD700;
}


/* Adaptive */

@media (max-width: 1620px) {
    section.start-game .item-title{font-size: 32px;}
    section.start-game .item-text{font-size: 18px;}
    section.servers .box{margin-top: 45px;padding: 30px 30px 0;}
    section.servers .info img{height: 40px;}
    section.servers .info p{font-size: 13px;}
    section.servers .info h2 {font-size: 28px;}
    section.servers .stats {right: 30px;top: 70px;width: 90px;height: 90px;}
    section.servers .stats span[dc-value]{font-size: 16px;}
    section.servers .stats span[dc-value-max]{font-size:12px;}
    section.servers .btn {margin-top: 60px;height: 58px;padding: 0 30px;font-size: 16px;margin-bottom: 30px;}
    section.join-us .box{height:430px;}
    section.join-us .box .substrate-image{height: 430px;}
    section.join-us .box .substrate {width: 200%;height: 100%;padding-left: 60px;margin-top: 164px;padding: 25px;padding-left: 65%;margin-left: -34%;font-size: 26px;}
    section.join-us .box .link {position: absolute;width: 110px;height: 110px;top: 45px;right: 45px;}
    section.join-us .box .link img{max-width: 50%;}
    section.join-us .box .info{bottom: 30px;right: 30px;}
    section.join-us .box .info img{width: 40px;}
    section.join-us .box .info strong{font-size: 36px;margin-bottom: 10px;}
    section.join-us .box .info .btn {height: 60px;font-size: 16px;padding: 0 30px;}
    section.donat .box{width: 100%;margin-bottom: 30px;padding: 20px 30px;}
    section.donat .box .name{font-size: 24px;}
    section.donat .box .info span{font-size: 20px;line-height: 24px;}
    section.donat .box-form {padding: 50px 30px;}
    section.donat .box-form select{height: 58px;font-size: 16px;padding: 0 25px;background-position: 93% 50%;}
    section.donat .box-form input {margin-top: 45px;padding: 0 25px;height: 58px;font-size: 16px;}
    section.donat .box-form .btn {height: 58px;font-weight: bold;margin-top: 30px;}
    section.donat .package-donat {height: 182px;}
    section.donat .package-donat .substrate-color{top: 77px;left: -124px;}
    section.donat .package-donat .price{width: 100px;height: 50px;font-size: 18px;}
    section.donat .package-donat .info{width: 50px;height: 50px;top:50px;}
    section.donat .package-donat .info .popup{width: 280px;}
    section.donat .package-donat .info .popup > strong {width: 100%;font-size: 20px;margin-bottom: 10px;}
    section.donat .package-donat .info .popup > p{margin-top: 5px;}
    section.donat .package-donat .info .popup > div{font-size: 13px;line-height: 18px;}
    section.donat .package-donat .text{bottom: 20px;left: 20px;}
    section.donat .package-donat .text strong {font-size: 18px;margin-top: 0px;margin-bottom: 10px;}
    section.donat .package-donat .text .btn {height: 42px;font-size: 16px;}
    footer .copyright{font-size: 10px;}

    section.start-game .title{margin-top: 90px;font-size: 48px;}
    section.servers {margin-top: 120px;}
    section.servers .title {font-size: 48px;}
    section.join-us {margin-top: 90px;}
    section.join-us .title{font-size: 48px;}
    section.donat {margin-top: 90px;}
    section.donat .title{font-size: 48px;margin-bottom: 80px;}
    #app .header-app .logo{margin-top: 50px;}
    #app form {margin-top: 50px;}
    #app .form-signin {margin-bottom: 50px;padding: 30px 30px;width: 540px;}
    #app .form-signup {margin-bottom: 50px;padding: 30px 30px;width: 540px;}
    #app .form-forget {margin-bottom: 50px;padding: 30px 30px;width: 540px;}
    #app .form-header h2 {font-size: 36px;line-height: 26px;}
    #app .form-header img {max-width: 52px;max-height: 52px;}
    #app .input-box input {padding: 0 25px;height: 58px;font-size: 16px;}
    #app .copyright{font-size: 12px;}
    #app form .action .label-checkbox{width: 35px;height: 35px;}
    #app form .action .checkbox p {font-size: 15px;}
    #app form .link {font-size: 15px;}
    #app form .btn {height: 58px;font-size: 16px;}
    #app form .action{margin-top: 15px;}
    #app form .support-text{width: 100%;margin-top: 10px;font-size: 12px;}
    #app form .support-text a{font-size: 12px;}
    section.case .case-select > li {width: calc(25% - 45px / 3);}
    section.case-open .roulette-wrapper .wheel .row-card .card{height: 145px;width: 145px;}

    section.dashboard .box {margin-top: 20px;padding: 25px 20px;}
    section.dashboard .e-wallet .info img{width:40px;}
    section.dashboard .e-wallet .info p strong {font-size: 24px;}
    section.dashboard .e-profile .info .avatar{width: 80px;margin-right: 20px;}
    section.dashboard .e-profile .info .text strong{font-size: 18px;}
    section.dashboard .e-profile .stats{width: 90px;height: 90px;}
    section.dashboard .e-profile .stats p{letter-spacing: -0.5px;}
    section.dashboard .e-profile .stats strong{font-size: 15px;}
    section.dashboard .box-head{font-size: 20px;}
    section.dashboard .e-home .info-more p strong, section.dashboard .e-business .info-more p strong{font-size: 18px;}
    section.dashboard .e-transport .info-more .item strong{font-size: 14px;}
    section.dashboard .e-lastitem .item {height: 61px;width: 61px;}
    section.dashboard .e-setting .list li strong{font-size: 16px;}
    section.dashboard .e-setting .list li p{font-size: 16px;}
    section.dashboard .e-stats .list li.head p{font-size: 16px;}
    section.dashboard .e-stats .list li p{font-size: 16px;}
    section.dashboard .e-stats .list li{margin-top:25px;}
}
@media (max-width: 1200px) {

    section.utp .persona{max-height: 80%;height:auto;}
    header ul li{margin-left: 24px;}
    header ul li a{font-size: 16px;}
    .btn {padding: 0 20px;height: 48px;font-size: 16px;}
    section.utp .title{font-size: 50px;line-height: 58px;}
    section.utp .title-sub{font-size: 14px;letter-spacing: 21px;}
    section.utp .utp-action{margin-top: 30px;}
    section.utp .utp-action .text{font-size:18px;}
    section.utp .utp-action .btn{width: 260px;margin-top: 15px;height: 60px;}
    section.utp .utp-action .online p{font-size: 14px;}
    section.utp .utp-action .online strong{font-size: 20px;}
    section.utp .social li a img {height: 24px;}
    section.utp{height: 700px;overflow: hidden;}
    section.utp .arrow{bottom: 20px;}
    section.start-game .item-title{font-size: 24px;}
    section.start-game .item-text {font-size: 16px;line-height: 22px;}
    section.servers .stats {right: 50%;margin-right: -45px;top: 135px;width: 90px;height: 90px;}
    section.servers .btn{margin-top: 120px;}
    section.join-us .box {height: 380px;}
    section.join-us .box .substrate {width: 200%;height: 100%;padding-left: 60px;margin-top: 128px;padding: 25px;padding-left: 65%;margin-left: -25%;font-size: 26px;}
    section.join-us .box {height: 380px;}
    section.join-us .box .substrate {width: 200%;height: 100%;padding-left: 60px;margin-top: 136px;padding: 15px;padding-left: 70%;margin-left: -29%;font-size: 20px;}
    section.join-us .box .link{width: 90px;height: 90px;}
    footer ul li {margin-left: 20px;}
    footer ul li a{font-size: 14px;}
    section.case-open .roulette-wrapper .wheel .row-card .card {height: 118px;width: 118px;}
    section.dashboard .e-wallet .btn{width: 160px;font-size: 12px;padding: 0px;}
    section.dashboard .e-lastitem .item {height: 49px;width: 49px;}
}
@media (max-width: 996px) {
    section.utp {text-align: center;}
    section.utp .utp-action > div {flex-direction: column;}
    section.utp .utp-action .online {margin: 0;margin-top: 24px;text-align: left;}
    
    section.utp .persona{display:none;}
    section.utp .container .row .col-12:last-child{display:none;}
    section.utp .social{bottom: 25px;}
    section.utp .social li a img {height: 18px;}
    section.start-game .item-2{margin-top: 70px;}
    section.servers .stats {right: 50%;margin-right: -70px;top: 135px;width: 140px;height: 140px;}
    section.join-us .box .link{left: 45px;}
    footer .copyright {width: 100%;text-align: left;margin-top: 15px;}
    .desktop{display:none;}
    .mobile{display:block;}
    header {width: 100%;position: fixed;height:68px;top: 0;z-index: 100;background: linear-gradient(0deg, #1A1F33 0%, #1A1F33 100%);}
    header .logo {width: 48px;height: 48px;}
    header .mobile{margin-top: 10px;margin-bottom: 10px;}
    header .menu{color:#fff;display: flex;flex-wrap: wrap;align-items: center;font-size: 18px;background: none;cursor:pointer;}
    header .menu img{width: 28px;margin-left:10px;filter: invert(1);}
    header ul{display:none;}
    header.active{height:100%;}
    header.active ul {display: block;margin-top: 15px;}
    header ul li {margin-left: 0;text-align: center;margin-top: 45px;}
    header ul li a:hover, header ul li a.active {color: #fff;}
    header ul li a:hover:after, header ul li a.active:after {width: 46px;right: 50%;margin-right: -23px;}
    section.servers .stats {right: 30px;margin-right: 0;top: 60px;width: 120px;height: 120px;}
    section.case .case-select > li {width: calc(33.333% - 30px / 2);}
    section.case-open .backjump{top: -70px;}
    header .profile {
        justify-content: space-between;
    }
}
@media (max-width: 768px){
    section.utp .social{display:none;}
    section.utp .arrow{display:none;}
    #app .form-header h2 {font-size: 28px;line-height: 26px;}
    #app .action-button .btn.btn-o-b {width: calc(100%);}
    #app .action-button .btn {width: calc(100%);}
    section.case .case-select > li {width: calc(50% - 15px / 2);}
    section.case-open .roulette-wrapper .wheel .row-card .card {height: 86px;width: 86px;}
    section.dashboard .e-wallet .btn {width: 130px;font-size: 12px;padding: 0px;}
}
@media (max-width: 578px){
    section.case-open .roulette-wrapper .wheel .row-card .card {height: calc(100vw / 3 - 26px);width: calc(100vw / 3 - 26px);}
    section.dashboard .e-setting .list li strong {font-size: 16px;width:100%;}
    section.dashboard .e-setting .list li p {width: 100%;margin-bottom: 10px;}
    section.dashboard .e-stats .list li.head p{width: 100%;}
    section.dashboard .e-stats .list li p:nth-child(1) {width: 100%;}
    section.dashboard .e-stats .list li p:nth-child(2) {width: 100%;}
    section.dashboard .e-stats .list li p:nth-child(3) {width: 100%;}

    section.case .case-select > li {width: calc(100%);}

    .footer-logo {display: none;}
    footer .copyright {text-align: center;}
    footer ul {margin-left: 0;}
    footer ul li:first-child {margin-left: 0;}
    footer .col-12 > .flex {margin-left: auto;margin-right: auto;}
}