::placeholder,
::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
:-moz-placeholder,
::-ms-input-placeholder {
	color: #bbb !important;
}
.absolute{ position: absolute !important; }
.flex{ display: flex !important;}
.grid, .d-grid{ display: grid !important;}
.floatl{ float:left; }.floatr{ float:right; }
.btn-warning{ color: #000; }
.bold{ font-weight: bold !important; }
.bradius5{ border-radius: 5px !important; }
.bradius10{ border-radius: 10px !important; }
.bradius15{ border-radius: 15px !important; }
.txtc{ text-align: center !important; }
.hidden{ display: none; opacity: 0; }
.textl{text-align:left !important;} .textr{text-align:right !important;} .textc{text-align:center !important;}
.bgwhite{ background: #fff !important;}
.overflow-x{ overflow-x: hidden; }
.overflow-x body{ overflow-x: hidden; }
.mrg-0{ margin: 0!important; }
.form-group{ margin-bottom: 1rem;}
.green{color: #12b887 !important;}
.green2{color: #00c27a !important;}
.green3{ color: #00d189 !important;}
.orange{color: #ff5815 !important;}
.blue{color: #0a8cff !important;}
.lightblue{color: #00c6c2 !important;}
.red{color: #ff2a2e !important;}
.red2{color: #ff292d !important;}
.black{ color: #000 !important;}
.purple, .text-purple{color: #7f56d9 !important;}
.text-purple2{color: #220d4e !important;}
.text-darkpurple{ color: #110729 !important; }
.fw-400, .fw-normal{ font-weight: 400 !important; }
.fw-500, .fw-semibold{ font-weight: 500 !important; }
.fw-600, .fw-bold{ font-weight: 600 !important; }
.fw-700, .fw-bolder{ font-weight: 700 !important; }
.text-shadow { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2); }
.text-blues{ color: #00c2ff !important;}
.text-gray{ color: #a3a1a1 !important; }
.text-gray2{ color: #706a80 !important; }
.max-h-400{ max-height: 400px;}
.max-h-500{ max-height: 500px;}
.max-h-600{ max-height: 600px;}
.max-h-700{ max-height: 700px;}
.object-cover{ object-fit: cover !important; }
.object-contain{ object-fit: contain !important; }
.text-uppercase, .uppercase{ text-transform: uppsercase !important;}
.bg-secondary-100{ background: #f2f4f6 !important; }
.bg-blues2{background-color: #4b0ecd !important; }
.bg-gray {background: #f7f7f7 !important; }
.bg-faq {background: #9b6bff !important; }
.bg-sec{ background: url(../resource/others/banner-cta.webp) no-repeat center !important; background-size: cover;}
.bg-box{
    background: linear-gradient(175deg, #fff 70%, #cfe5fa3a) !important;
    box-shadow: 0 1px 3px #0033634a;
}
.overflow-hidden{ overflow: hidden !important; }
.rounded-50{ border-radius: 50%; }
.font-14{ font-size: 14px !important; }
.font-26{ font-size: 26px !important; }
.font-28{ font-size: 28px !important; }
.mh-30{ height: 30px !important; min-height: 30px !important; line-height: 30px !important;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6{ color: #000; font-family: 'Montserrat', sans-serif; font-weight: 700; }
@font-face { font-family: Mont-300; src: url(../fonts/Montserrat-Regular.ttf); }
@font-face { font-family: Mont-500; src: url(../fonts/Montserrat-Medium.ttf); }
@font-face { font-family: Mont-600; src: url(../fonts/Montserrat-SemiBold.ttf); }
body{
	background: #fff;
    font-family: 'Montserrat', sans-serif;
    font-weight: 500;
	color: #000;
    width: 100%;
    height: 100%;
	margin: 0;
}
body.index .site-header:before{
	content: unset;
}
body.bgnone:before{
	content: unset !important;
}
body:before{
	position: fixed;
}
body.bgprofile,
body.bgprofile .site-wrap{
	position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
}
body.bglogin,
body.bglogin .site-wrap{
    position: absolute;
    background: url(../resource/others/bg-main1.jpg) no-repeat;
    background-position: center;
    background-size: cover;
    width: 100%;
    height: 100%;
    left: 0;
}
/* For Webkit-based browsers (Chrome, Safari, Opera) */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* For Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

/* For Edge */
input[type="number"]::-ms-clear {
  display: none;
}
ul{ margin:0; padding:0; list-style-type: none; }
img{ object-fit: contain; }
a, a:hover{ color: #111; text-decoration: unset; }
.btn:hover {
    box-shadow: 0 5px 12px -7px rgba(0, 0, 0, 0.4) !important;
}
.rotate180angle{
	transform: rotate(180deg);
}
.icon-search2:before{ content: "\e8b6"; }
.icon-lock2:before{ content: "\e897"; }
.icon-person:before{ content: "\e7fd"; }
.icon-phone2:before{ content: "\e0cd"; }
.icon-keyboard_arrow_down:before{ content: "\e313"; }
.icom:before,
.icom:after{
    font-family: 'icomoon' !important;
    text-align: center;
    color: #111;
    justify-content: center;
    align-items: center;
}
.icon-20{ width: 20px; height: 20px;}
.icon-25{ width: 25px; height: 25px;}
.icon-30{ width: 30px; height: 30px;}
.icon-40{ width: 40px; height: 40px;}
.icon-50{ width: 50px; height: 50px;}
.icon-60{ width: 60px; height: 60px;}
.icon-70{ width: 70px; height: 70px;}
.icon-80{ width: 80px; height: 80px;}
.icon-90{ width: 90px; height: 90px;}
.icon-100{ width: 100px; height: 100px;}
.icon-120{ width: 120px; height: 120px;}
.min-h-50{ min-height: 50px !important;}
.min-height-350{ min-height: 350px; }
.min-height-500, .min-h-500{ min-height: 500px; }
.max-w-250{ max-width: 250px; }
.max-w-400{ max-width: 400px; }
.max-w-500{ max-width: 500px; }
.max-w-600{ max-width: 600px; }
.max-w-700{ max-width: 700px; }
.max-w-unset{ max-width: unset !important; }
.max-h-40{ max-height: 40px; }
.max-h-50{ max-height: 50px; }
.max-h-60{ max-height: 60px; }
.max-h-80{ max-height: 80px; }
.max-h-100{ max-height: 100px; }
.h-100{ height: 100%; }
.lh-xs{ line-height: 1;}
.lh-sm{ line-height: 1.25;}
.lh-md{ line-height: 1.5;}
.lh-lg{ line-height: 1.75;}
.lh-xl{ line-height: 2;}
.br-5{ border-radius: 5px; }
.br-10{ border-radius: 10px; }
.br-15{ border-radius: 15px; }
.br-20{ border-radius: 20px; }
.br-25{ border-radius: 25px; }
.br-30{ border-radius: 30px; }
.br-guide-1{
    border-left: 3px solid #09ffac;
    padding-left: 20px;
}
.br-dashed-bot-4{ border-bottom: 4px dashed #dee2e6; }
.bg-string{
    position: relative;
    background-image: url(../resource/others/bg-main1.jpg);
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-blend-mode: normal;
}
.bg-string:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url(../resource/sample/referral-background.svg);
    background-repeat: no-repeat !important;
    background-position: top right !important;
    background-blend-mode: normal;
}
.bg-string > div{ z-index: 1; }
.ico{
    background-size: 40px;
    background-position: center;
    background-repeat: no-repeat;
}
.ico.ico-cash{ background-image: url(../resource/svg/icon/ico-net-roas.svg); background-size: 60px; }
.ico.ico-finger{ background-image: url(../resource/svg/icon/finger.svg); background-size: 90px; }
.ico.ico-insights{ background-image: url(../resource/svg/icon/ico-insights.svg); background-size: 70px; }
.ico.ico-swap{ background-image: url(../resource/svg/icon/ico-sdk-integrations.svg); background-size: 70px; }
.ico.ico-history{ background-image: url(../resource/svg/icon/ico-detection.svg); background-size: 80px; }
.ico.ico-withdraw{ background-image: url(../resource/svg/icon/withdraw.png); background-size: 40px; }
.ico.ico-deposit{ background-image: url(../resource/svg/icon/deposit.png); background-size: 40px; }
/**** Background Setting ****/
.site-wrap{
	position: relative;
	margin: auto;
    padding-top: 60px;
    padding-bottom: 0;
    width: 100%;
	height: unset !important;
	min-height: 100% !important;
	z-index: 1;
}
.ssuperwheel{
	transition: all 0.5s ease;
	padding-top: 20px;
}
.site-section{
	position: relative;
    background-size: cover;
    background-repeat: no-repeat;
    padding-top: 0;
    padding-bottom: 30px;
}
.rotate{
	font-size: 16px !important;
	animation: rotate360 0.7s infinite;
}
@keyframes fadein {
  0% { opacity: 0; }
  100% { opacity: 1; }
}
@keyframes fadeOut {
  0% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes fadeinzoom {
  0% { opacity: 0; transform: scale(0); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes glowing {
  0% { filter: brightness(1); }
  50% { filter: brightness(1.2); }
  100% { filter: brightness(1); }
}
@keyframes rotate360 {
  0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}
@keyframes headeropen {
  0% { 	left: -260px; }
  100% { left: 0px; }
}
@keyframes brcolorchg {
  0% { border-left: 5px solid #ff3232; }
  50% { border-left: 5px solid #ffc964; }
  100% { border-left: 5px solid #ff3232; }
}
.bgprofile.slidein .site-wrap,
.bgprofile.slideout .site-wrap{
	background: #f5f5f51c;
    box-shadow: 0 2px 6px #0002;
}
.bgprofile3.slidein .site-wrap,
.bgprofile3.slideout .site-wrap{
	box-shadow: 0 2px 6px #0002;
}
.slideout .site-wrap{
	animation: righttoleft 0.3s;
}
.slidein .site-wrap{ 
	right: -120%;
	animation: lefttoright 0.2s;
}
@keyframes righttoleft {
  0% {right: -100%;}
  100% {right: 0;}
}
@keyframes lefttoright {
  0% {right: 0;}
  100% {right: -120%;}
}
.ringbell{
	animation: ringbell 2s linear infinite;
}
@keyframes ringbell {
  0% { transform: rotateZ(0deg); }
  2% { transform: rotateZ(8deg); }
  4% { transform: rotateZ(-6deg); }
  6% { transform: rotateZ(10deg); }
  8% { transform: rotateZ(-8deg); }
  10% { transform: rotateZ(14deg); }
  12% { transform: rotateZ(-16deg); }
  14% { transform: rotateZ(12deg); }
  16% { transform: rotateZ(-14deg); }
  18% { transform: rotateZ(10deg); }
  20% { transform: rotateZ(-12deg); }
  22% { transform: rotateZ(8deg); }
  24% { transform: rotateZ(-10deg); }
  26% { transform: rotateZ(6deg); }
  28% { transform: rotateZ(-8deg); }
  30% { transform: rotateZ(0deg); }
  100% { transform: rotateZ(0deg); }
}
@keyframes slideTop {
  0% { opacity: 0; transform: translateY(30px); }
  100% { opacity: 1; transform: translateY(0); }
}
.preloader{
	position: fixed;
    display: none;
    top: calc(42% - 10px);
    left: calc(50% - 16px);
    width: 32px;
    height: 40px;
    z-index: 9999;
}
.preloader i{
	position: absolute;
	width: 4px;
    height: 14px;
    background: #220d4e;
    border-radius: 50px;
    margin: auto;
}
.preloader i:nth-child(1){
	animation: premove 0.5s infinite;
	left: 0;
}
.preloader i:nth-child(2){
	animation: premove 0.4s infinite;
	left: calc(50% - 2px);
}
.preloader i:nth-child(3){
	animation: premove 0.45s infinite;
	right: 0;
}
@keyframes premove {
  0% { top: 0; }
  50% {top: 38px; }
  100% { top: 0; }
}
.nonloop-block-14{
	position: relative;
	width: 100%;
	max-width: 100vw;
	min-height: 500px;
}
.nonloop-block-16{
	position: relative;
	width: 100%;
	max-height: 120px;
	overflow: hidden;
}
.slide-item{
    height: inherit;
}
.slide-item > img{
	height: 100%;
	max-width: 100vw;
	max-height: 600px;
    object-fit: cover !important;
    object-position: center;
}
.slide-content{
	position: absolute;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 15px 50px;
    color: #fff;
    margin: auto;
}
.slide-center{
	width: 100%;
    max-width: 1200px;
    margin: auto;
}
.slide-detail{
	width: 55%;
	min-width: 200px;
	margin-bottom: 10vh;
}
.slide-detail h4{
	font-size: 40px;
    font-family: 'Mont-600';
	margin-bottom: 15px;
    color: inherit;
}
.slide-detail p{
	font-size: 14px;
    color: #fff;
	line-height: 170%;
	margin: 0;
}
@media(max-width: 1080px){
	.slide-detail h4{font-size: 34px;}
	.slide-detail p{font-size: 13px;}
	.slide-detail{
		width: 70%;
		margin-bottom: 8vh;
	}
}
@media(max-width: 767px){
	.slide-content{
		padding: 15px;
	}
	.slide-detail h4{font-size: 28px;}
	.slide-detail p{font-size: 12px;}
	.slide-detail{
		width: 85%;
		margin-bottom: 5vh;
	}
}
@media(max-width: 384px){
	.slide-detail p{font-size: 11px;}
	.slide-detail{
		width: 95%;
	}
}
.site-nav-marquee{
    display: flex;
    width: 100%;
    height: 34px;
    padding-top: 2px;
    border-top: 1px solid #d0baff;
    border-bottom: 1px solid #d0baff;
    background: #eee6ff;
    box-shadow: 0 1px 3px #0002;
}
.site-nav-marquee marquee {
	font-size: 13px;
    letter-spacing: 0.2px;
    white-space: nowrap;
    color: #220d4e;
    margin: auto;
}
.site-nav-marquee marquee p{
	margin: 0;
}
.marquee-icon{
    display: flex;
    align-items: center;
    margin-left: 8px;
    animation: ringbell 2s linear infinite;
}
.marquee-icon img{
    width: 26px;
    height: 26px;
    margin: auto;
}

.datepicker-days table{
	width: 250px;
	font-size: 14px;
}
.datepicker-days table .active.day{
	background: linear-gradient(180deg, #ffe14f, #f1be31) !important;
    color: #000;
    text-shadow: 0 0 1px #000;
}
body.bgprofile2:after{
	content: '';
    position: absolute;
    background: url(../images/square-angle.png) no-repeat;
    background-size: cover;
    background-position: top right;
    width: 100%;
    height: 100%;
    max-height: 300px;
    left: 0;
    top: 0;
    opacity: 0.4;
}
body.bgprofile3{
	background: #fff !important;
    animation: fadeIn 0.7s;
}
body.bgprofile3:before{
	content: '';
}
body.bgprofile4{
	background: #fff !important;
    animation: fadeIn 0.7s;
}
body.bgprofile4:before{
	content: '';
    position: fixed;
    top: 0;
    left: 0;
    background: #fff;
    width: 100%;
    height: 100%;
}
.btn-submit2{
    display: inline-block;
    color: #ffffff !important;
    font-size: 15px;
    font-weight: 600;
    background: #00c2ff;
    box-shadow: 0 3px 0 #004f8d;
    border-radius: 5px;
    border: none;
    width: 100%;
    height: 45px;
    line-height: 45px;
    letter-spacing: 0.4px;
    padding: 0 15px;
    text-align: center;
    transition: all 0.3s ease;
    outline: none !important;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 20px;
}
.btn-submit:hover,
.btn-submit:active,
.btn-submit:focus{
	filter: brightness(1.2);
	box-shadow: 0 4px 0 #4b5e8711 !important;
}
.btn-submit2:disabled{
	box-shadow: unset !important;
}
.btn-black{
    background: linear-gradient(180deg, #111, #0a0a0a);
    color: #fff !important;
}
.gap-1{ gap: 2px; }
.gap-2{ gap: 5px; }
.gap-3{ gap: 10px; }
.gap-4{ gap: 15px; }
.gap-5{ gap: 25px; }
/**************** Header *****************/
.site-header{
	display: grid;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
	z-index: 13;
}
.sheader-top{
    display: flex;
    height: 60px;
    transition: all 0.5s ease;
    border-bottom: 1px solid transparent;
}
.site-header.scrolling .sheader-top,
.site-header.active .sheader-top{
    background: #fff;
    box-shadow: 0 0 8px #0001;
    border-color: #ddd;
}
.sheader-logo{
    display: flex;
    align-items: center;
    padding-left: 15px;
}
.sheader-logo img{
    width: 100%;
    height: 100%;
    max-width: 150px;
    height: 40px;
}
.sheader-login{
    display: flex;
    align-items: center;
    gap: 10px;
    margin-right: 10px;
}
@media(max-width: 764px){
    .sheader-login{
        display: none;
    }
}
.btn-custom,
.btn-custom2{
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    border: 2px solid #220d4e;
    color: #220d4e !important;
    padding: 0 18px;
    height: 44px;
    transition: all 0.4s ease;
    box-shadow: 0 0 0 #220d4e00;
    text-decoration: unset;
    border-radius: 6px;
    cursor: pointer;
    gap: 5px;
    z-index: 1;
}
.btn-custom:hover,
.btn-custom:active{
    box-shadow: 4px 5px #220d4e;
}
.btn-custom2{
    background: #220d4e;
    color: #fff !important;
}
.btn-custom2:before{
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border: 2px solid #220d4e;
    border-radius: 5px;
    transition: all 0.4s ease;
    z-index: -1;
    opacity: 0;
}
.btn-custom2:hover:before,
.btn-custom2:active:before{
    opacity: 1;
    transform: translate(7px, 8px);
}
.sheader-lang{
    margin: auto;
    margin-right: 5px;
}
.sheader-lang .slanguage{
    color: #220d4e;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 100%;
    gap: 8px;
    height: 40px;
    padding: 0 16px;
    border-radius: 5px;
    transition: all 0.3s ease;
    cursor: pointer;
}
.sheader-lang.active .slanguage{
    color: #00c2ff;
}
.sheader-lang .slanguage:after{
    content: "\f078";
    color: inherit;
    font-size: 10px;
}
.sheader-lang-dropdown{
    display: none;
    position: absolute;
    min-width: 130px;
    background: #fff;
    border-radius: 4px;
    box-shadow: 0 1px 5px #0001, 0 2px 20px #0001;
    margin-top: 3px;
    overflow: hidden;
}
.sheader-lang-dropdown a{
    width: 100%;
    font-size: 14px;
    padding: 12px 17px;
    transition: all 0.4s ease;
    color: #220d4e;
}
.sheader-lang-dropdown a.active,
.sheader-lang-dropdown a:hover,
.sheader-lang-dropdown a:active{
    background: #edf4fb;
    color: #00c2ff;
}
.sheader-lang.active .sheader-lang-dropdown{
    display: grid;
    animation: fadeIn 0.5s ease;
}
.sheader-nav{
    position: relative;
    display: grid;
    justify-content: center;
    align-items: center;
    padding: 12px;
    top: 2px;
    right: 3px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 1;
    margin: auto 0;
}
.sheader-nav span{
    background: #220d4e;
    transition: all 0.4s ease;
	width: 26px;
    height: 2px;
}
.sheader-nav span:nth-child(2){
    width: 20px;
}
.sheader-nav.active span:nth-child(1){
    transform: rotate(45deg) translate(5px, 5px);
}
.sheader-nav.active span:nth-child(2){
	display: none;
}
.sheader-nav.active span:nth-child(3){
    transform: rotate(-45deg) translate(4px, -4px);
}
.sheader-popup{
	display: none;
    position: fixed;
    top: 60px;
    left: 0;
    width: 100%;
    height: calc(100% - 54px);
    transition: all 0.5s ease;
    z-index: 97;
}
.spopup-main{
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    max-width: 600px;
    background: #fff;
    box-shadow: 0 4px 5px #0001;
    overflow: hidden;
}
.spopup-close{
	position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: #fff1;
    cursor: pointer;
    z-index: -1;
}
.sheader-popup.active{
	display: block;
}
.sheader-popup.fadeOut{
	opacity: 0;
	animation: fadeOut 0.4s;
}
.sheader-popup.active .spopup-main{
	animation: leftNavOpen 0.5s cubic-bezier(0.48, 0.03, 0.19, 1);
}
.sheader-popup.fadeOut .spopup-main{
	right: -100vh;
	animation: leftNavClose 0.6s cubic-bezier(0.68, -0.45, 0.27, 1.55);
}
@keyframes leftNavOpen {
  0% { right: -100vh; opacity: 0; }
  100% { right: 0; opacity: 1; }
}
@keyframes leftNavClose {
  0% { right: 0; opacity: 1; }
  100% { right: -100vh; opacity: 0; }
}
.spopup-contain{
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
}
.spopup-menu{
    display: flex;
    font-weight: 600;
    padding: 10px 25px;
    color: #220d4e;
    margin-top: 5px;
    gap: 10px;
    align-items: center;
}
.spopup-menu img{
    width: 45px;
    height: 45px;
}
.spopup-menu i{
    font-size: 30px;
    line-height: 30px;
    height: 30px;
}
.spopup-nav{
    display: grid;
    margin-top: 10px;
    gap: 2px;
}
.spopup-nav > a{
    display: flex;
    padding: 5px 25px;
    font-weight: 600;
    font-size: 17px;
    min-height: 60px;
    color: #220d4e;
    align-items: center;
    border-bottom: 1px solid #e5e5e5;
}
.spopup-contain-open.active .spopup-nav > a{
    border-bottom: unset;
}
.spopup-nav .spopup-program a{
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    font-size: 14px;
    padding: 15px;
    background: #fff;
    color: #220d4e;
    border: 1px solid #dcd5eb;
    border-radius: 6px;
    margin-bottom: 15px;
}
.spopup-nav .spopup-program a:after{
    content: "\f105";
    font-family: 'icomoon' !important;
    font-size: 24px;
    color: #220d4e;
    position: absolute;
    right: 15px;
}
.spopup-bottom{
    position: absolute;
    bottom: 10px;
    width: 100%;
    display: flex;
    gap: 20px;
    padding: 30px;
}
.spopup-bottom > a{
    width: 100%;
    min-height: 55px;
}
@media(max-width: 764px){
    .spopup-bottom{
        display: grid;
    }
}
.spopup-contain-open{
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    overflow: auto;
}
.spopup-contain-open.active{
    display: block;
    animation: fadeIn 0.4s ease;
}
.spopup-contain-open .spopup-menu{
    border-bottom: 1px solid #ddd;
    padding-left: 5px;
}
.spopup-contain-open .spopup-nav{
    padding-bottom: 80px;
    border-left: 3px solid #00c2ff;
}
.spopup-contain-open .spopup-nav > a{
    min-height: 52px;
}
.spopup-user{
    display: flex;
    font-weight: 600;
    padding: 10px 15px;
    margin-top: 5px;
    gap: 10px;
    align-items: center;
}
.spopup-user img{
    width: 45px;
    height: 45px;
}
.spopup-group{
    padding: 5px 30px;
}
.spopup-group span{
    font-size: 13px;
    font-weight: 400;
    display: block;
    margin-bottom: 2px;
}


.site-header2{
	position: fixed;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
	height: 40px;
    padding: 0 10px;
	z-index: 10;
}
.site-header2 > a{
    display: flex;
    width: 40px;
    height: 40px;
}
.site-header2 > a.sheader-back,
.site-header2 > a.sheader-noaction{
	position: absolute;
	top: 0;
    left: 5px;
}
.site-header2 a:last-child{
	margin-left: auto;
}
.site-header2 a.sheader-srotate:active,
.site-header2 a.sheader-srotate:focus{
	animation: rotate360 1s infinite;
}
.site-header2 a img{
	width: 22px;
    height: 22px;
    margin: auto;
}
.site-header2 h4{
	color: #000;
    filter: drop-shadow(0 0 1px #0003);
    font-size: 17px;
    height: 40px;
    line-height: 40px;
    margin: auto;
    padding-top: 2px;
}
.site-header2 a.sheader-back i,
.site-header2 a.sheader-noaction i{
	font-size: 24px;
    color: #000;
    margin: auto;
    padding-right: 10px;
}
.site-header2 a.sheader-dwhistory{
	position: absolute;
    top: 5px;
    right: 5px;
    font-size: 13px;
    color: #555;
}
.site-header3{
	position: fixed;
    display: flex;
    background: #fff;
    box-shadow: 0 1px 2px #0001;
    top: 0;
    width: 100%;
    height: 60px;
    z-index: 1000;
    overflow: hidden;
}
.site-header3.transparent{
	background: unset;
    box-shadow: unset;
}
.site-header3 a{
	position: absolute;
    left: 0;
    width: 45px;
    height: 100%;
	display: flex;
	z-index: 10;
	color: #000;
}
.site-header3 a i{
	font-size: 24px;
    color: #220d4e;
    margin: auto;
    transition: color 0.4s ease;
}
.sheader3-center{
	display: flex;
    height: 100%;
    width: 100%;
}
.sheader3-center h4{
    font-size: 16px;
    font-weight: 600;
    color: #220d4e;
    margin: auto;
    letter-spacing: -0.2px;
}
.site-header5{
	position: fixed;
    display: flex;
    top: 0;
    right: 0;
    width: 100%;
    z-index: 10;
}
.site-header5 a{
	display: flex;
    width: 40px;
    height: 40px;
}
.site-header5 img{
	width: 100px;
    height: 50px;
    margin: auto;
    margin-right: 0;
}
.site-header5 a.sheader-back i{
	font-size: 30px;
    color: #000;
    margin: auto;
    padding: 0 10px;
}
.slidein .site-header5{ 
	right: -120%;
	animation: lefttoright 0.2s;
}
/**************** Footer ***************/
.site-footer{
    position: relative;
    background: #fdfdfd;
    border-top: 1px solid #f6f6f6;
    overflow: hidden;
    width: 100%;
}
.footer-container{
    max-width: 1400px;
    width: 95%;
    margin: auto;
}
.footer-container .row{
    margin: 0;
}
.footer-logo{
    width: 100%;
    max-width: 120px;
    max-height: 40px;
}
.footer-logo img{
    width: 100%;
    height: 100%;
}
.br-top-footer{
    border-top: 1px solid #f2f2f2;
}
.footer-list{
    display: flex;
    width: 100%;
    justify-content: space-between;
    gap: 10px;
    padding-top: 20px;
    padding-bottom: 40px;
}
.footer-list > div{
    display: grid;
    width: 100%;
    gap: 8px;
    margin-bottom: auto;
}
.footer-list > div a{
    color: rgb(113, 107, 129);
    text-decoration: unset !important;
    font-size: 13px;
}
.footer-list > div:not(:last-child) a:not(.footer-list-title):hover,
.footer-list > div:not(:last-child) a:not(.footer-list-title):active{
    text-decoration: underline !important;
}
.footer-list-title{
    font-size: 15px !important;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: 2px;
}
.site-footer .social-icon{
    display: flex;
    background-color: #c6c1d2;
    transition: all 0.3s ease;
    border-radius: 5px;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    margin: 0 2px;
}
.site-footer .social-icon:hover,
.site-footer .social-icon:active{
    background-color: #514b5f;
}
.site-footer .social-icon i{
    color: #fff;
    font-size: 16px;
}
@media(max-width: 1080px){
    .footer-list {
        display: grid;
        justify-content: unset;
        grid-template-columns:  repeat(2, 1fr);
    }
    .footer-list > div {
        margin-bottom: 20px;
        gap: 6px;
    }
}
@media(max-width: 764px){
    .footer-list {
        display: grid;
        grid-template-columns:  unset;
    }
}
/*************** Index ***************/
.site-title{
	display: block;
    padding: 10px;
    margin-bottom: 5px;
}
.site-title h4{
	font-size: 20px;
    font-weight: 600;
    text-shadow: 0 0 3px #aaa5;
    color: #fff;
    margin: 0;
}
.site-boxlevel{
	display: grid;
    margin-top: 10px;
}
.site-boxlevel h5{
	font-size: 21px;
    margin: auto;
    text-align: center;
    margin-bottom: 5px;
}
.site-boxlevel img{
	width: 80px;
    height: 80px;
    margin: -6px auto;
}
.site-boxpanel{
	display: flex;
    max-width: 1000px;
    padding: 0 5px;
    margin: auto;
}
.site-boxpanel a{
	display: grid;
    width: 100%;
    max-width: 100px;
    padding-top: 5px;
    margin: auto;
    margin-top: 0;
}
.site-boxpanel a img{
	width: 70px;
    margin: auto;
	border-radius: 5px;
}
.site-boxpanel a span{
	font-size: 14px;
    font-family: Mont-500;
    color: #000;
    text-align: center;
    min-width: max-content;
    margin: auto;
    padding: 10px 5px;
    line-height: 110%;
}
.site-mcate{
	margin: 0 5px;
	margin-bottom: 30px;
}
.site-mcate > div{
	padding: 0 10px;
    margin: auto;
}
.mcate-item{
	position: relative;
    display: flex;
	margin-bottom: 15px;
}
.mcate-icon{
	width: 35%;
    display: flex;
    max-width: 250px;
    height: 150px;
    background: #000;
    border-radius: 15px;
    overflow: hidden;
}
.mcate-icon img{
	width: 100%;
    height: 100%;
    object-fit: contain;
    margin: auto;
}
.mcate-title{
	display: block;
    padding: 8px;
    padding-left: 15px;
    width: 65%;
}
.mcate-title h5{
	color: #000;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: 0.4px;
	margin-bottom: 0;
}
.mcate-title span{
	display: flex;
	width: 100%;
    font-size: 12px;
    color: #007648;
    margin-bottom: 5px;
    text-transform: capitalize;
}
.mcate-title i{
	font-size: 15px;
    color: #16a992;
    margin: auto 0;
    margin-right: 5px;
}
.mcate-title p{
	color: #111;
    font-size: 13px;
    line-height: 140%;
    margin-bottom: 10px;
	margin-top: 8px;
}
.mcate-item .mcate-title i .mcate-noticet{
	display: none;
    position: absolute;
    top: -42px;
    right: 0;
    width: 100%;
    font-size: 12px;
    background: #fff;
    padding: 6px;
    border: 1px solid #ff3f3f;
    color: #04816d;
    border-radius: 6px;
    letter-spacing: 0.7px;
    line-height: 130%;
    text-align: center;
}
.mcate-item:active .mcate-title i .mcate-noticet,
.mcate-item:focus .mcate-title i .mcate-noticet,
.mcate-item:hover .mcate-title i .mcate-noticet{
	display: block;
	animation: fadeIn 0.2s;
}
.mcate-title i .mcate-noticet:before{
	content: '';
    position: absolute;
    right: 5px;
    bottom: -18px;
    border-top: 18px solid #ff3f3f;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
.mcate-title i .mcate-noticet:after{
	content: '';
    position: absolute;
    right: 6px;
    bottom: -16px;
    border-top: 20px solid #fff;
    border-left: 9px solid transparent;
    border-right: 9px solid transparent;
}
.mcate-group{
	display: flex;
	width: 100%;
	box-shadow: 0 4px 10px #e7e9e9;
    border-radius: 10px;
}
.mcate-item.locked .mcate-group > img,
.mcate-item.locked .mcate-group > p,
.mcate-item.locked .mcate-title h5{
	opacity: 0.7;
}
.site-scrollbox{
	position: relative;
    margin: 0 10px;
	margin-bottom: 30px;
    background: linear-gradient(40deg, #29b5a078, #ff3f3f3d);
	border: 1px solid #29b5a0;
	box-shadow: 0px 5px 6px 0px #ff3f3f57;
    overflow: hidden;
	height: 260px;
	border-radius: 10px;
}
.site-scrollbox ul{
	position: relative;
    padding: 5px 20px;
}
.site-scrollbox ul li{
	font-size: 12px;
    color: #000;
    text-align: center;
    line-height: 25px;
    white-space: nowrap;
}

.site-vip{
	max-width: 1000px;
    margin: auto;
    margin-bottom: 5px;
}
.svip-main{
	display: flex;
    flex-wrap: wrap;
    margin: 0 5px;
}
.svip-item{
	position: relative;
    display: grid;
    width: 100%;
    margin: 7px 5px;
    margin-bottom: 12px;
    box-shadow: 6px 6px 0 0 #ddd;
    background: linear-gradient(175deg, #fff 70%, #eef7ff);
    border: 1px solid #ddd;
    border-radius: 10px;
    overflow: hidden;
    animation: slideTop 1s;
}
.svip-top{
	display: flex;
}
.svip-icon{
	position: relative;
    margin: auto;
    padding-left: 15px;
}
.svip-icon img{
	width: 90px;
    height: 90px;
	margin-top: -5px;
    margin-bottom: -10px;
}
.svip-item.lock .svip-icon:before,
.svip-item.lock .svip-icon:after{
	content: '';
    position: absolute;
    top: -25px;
	left: 0;
    width: 50px;
    height: 50px;
    background: #0006;
    border-radius: 50%;
}
.svip-item.lock .svip-icon:after{
	background: url(../images/icon/lock-w.png) no-repeat;
    background-size: 20px;
    background-position: center;
    filter: drop-shadow(0 0 0 #fff);
    z-index: 1;
}
.svip-item span.current{
	position: absolute;
    right: 0;
    top: 0;
    background: url(../resource/flag-purple.png) no-repeat;
    background-size: cover;
    background-position: center left;
    z-index: 1;
    text-transform: capitalize;
    text-align: center;
    letter-spacing: 0.4px;
    color: #fff;
    text-shadow: 0 0 1px #fff;
    font-size: 14px;
    min-width: 90px;
    padding: 2px 10px;
    padding-bottom: 3px;
    padding-left: 20px;
    line-height: 150%;
}
.svip-item span.lock{
    position: absolute;
    right: 5px;
    top: 8px;
    background: url(../resource/icon2/password.svg) no-repeat;
    background-size: contain;
    background-position: center;
    width: 20px;
    height: 20px;
    filter: grayscale(1);
    opacity: 0.4;
    z-index: 1;
}
.svip-title{
	width: 100%;
    margin: auto;
    padding: 15px;
    padding-left: 5px;
}
.svip-title h5{
	margin: auto;
    color: #000;
    font-size: 17px;
    font-weight: 700;
    font-family: Mont-600;
    margin-bottom: 5px;
}
.svip-title p{
	margin: 0;
    color: #220d4e;
    font-size: 15px;
}
.svip-contain{
	display: flex;
    width: 100%;
    min-height: 50px;
    margin: auto;
    padding: 5px 15px;
    padding-bottom: 15px;
}
.svip-contain ul{
	padding: 5px;
    padding-top: 10px;
    width: 100%;
}
.svip-contain ul li{
    position: relative;
    color: #444;
    font-size: 14px;
    line-height: 160%;
    padding-left: 18px;
}
.svip-contain ul li:before{
	content: "\f111";
    position: absolute;
    top: 6px;
    left: 2px;
    font-family: 'icomoon' !important;
    font-size: 4px;
    margin-right: 8px;
    line-height: 100%;
}
/************** Profile ***************/
.site-profile{
	display: flex;
    padding: 0 10px;
    margin-top: 20px;
    margin-bottom: 20px;
}
.sprofile-photo{
	margin: auto 10px;
}
.sprofile-photo img{
	width: 60px;
    height: 60px;
    border: 1px solid #fff;
    border-radius: 50%;
}
.sprofile-detail{
	margin: auto 0;
}
.sprofile-detail h5{
	font-size: 18px;
    font-weight: 600;
	margin-bottom: 2px;
}
.sprofile-detail span{
	font-size: 13px;
    color: #002d50;
	letter-spacing: 0.4px;
	display: block;
	line-height: 160%;
	text-shadow: 0 0 1px #2579ba99;
}
.sprofile-wallet{
	position: relative;
	display: flex;
    background-size: cover;
    background-position: top center;
    margin: 0 5px;
    border-radius: 15px 15px 0 0;
    min-height: 80px;
	margin-bottom: 30px;
}
.sprofile-wallet:after{
	content: '';
    position: absolute;
    background: url(../images/bjcurves.html) no-repeat;
    background-size: 100% 100%;
    width: 100%;
    height: 62px;
    bottom: -30px;
}
.sprofile-amount{
	display: flex;
    padding: 15px 10px;
    margin-bottom: auto;
}
.sprofile-amount span{
	font-size: 13px;
    color: #fffdee;
    margin-top: auto;
    margin-right: 10px;
}
.sprofile-amount h5{
	color: #fffce7;
    font-size: 23px;
    font-weight: 600;
    font-family: Microsoft YaHei;
    margin: 0;
}
.sprofile-topup{
	display: flex;
    padding: 5px 10px;
    margin-left: auto;
}
.sprofile-topup a{
	font-size: 13px;
    color: #fff;
    background: linear-gradient(141deg, #2b73ac, #4280b2, #305c7e, #2d6c9b);
    border: 2px solid #c2e8ff;
    box-shadow: 0 2px 4px #0004;
    border-style: outset;
    border-radius: 50%;
    padding: 3px 8px;
    min-width: 60px;
    text-align: center;
    display: block;
    margin: 0 2px;
    margin-bottom: auto;
    transition: all 0.4s ease;
}
.sprofile-topup a:hover,
.sprofile-topup a:active,
.sprofile-topup a:focus{
	filter: brightness(1.2);
}
.sprofile-grids{
	display: flex;
    margin-bottom: 15px;
	background: #e5f2fa;
}
.sprofile-grids-item{
	display: grid;
    width: 33.3333%;
}
.sprofile-grids-item h4{
	font-size: 21px;
    font-weight: 600;
    margin: auto;
    margin-bottom: 2px;
}
.sprofile-grids-item span{
	font-size: 13px;
    margin: auto;
    color: #888;
	letter-spacing: -0.4px;
}
.sprofile-navbar{
    display: flex;
    padding: 5px;
    padding-bottom: 0;
    border-top: 1px solid #ddd;
}
.sprofile-navbar a{
    display: grid;
    width: 100%;
    padding-top: 12px;
    padding-bottom: 5px;
}
.sprofile-navbar a img{
    margin: auto;
    width: 30px;
    height: 30px;
    margin-top: 0;
    margin-bottom: 3px;
}
.sprofile-navbar a span{
    font-size: 12px;
    font-weight: 500;
    margin-top: 2px;
    line-height: 120%;
    letter-spacing: -0.2px;
    color: #000;
    width: 100%;
    text-align: center;
    min-height: 20px;
}
.sprofile-group{
	display: grid;
    margin-bottom: 30px;
    animation: fadeIn 1s;
    padding: 0 12px;
    margin-top: 10px;
}
.sprofile-group-line{
	display: grid;
}
.sprofile-group-line a{
	position: relative;
    width: 100%;
    display: flex;
    height: 45px;
    border-bottom: 1px solid #e8e8e8;
    overflow: hidden;
}
.sprofile-group-line a:after{
    content: "\f138";
    font-family: bootstrap-icons !important;
    font-size: 17px;
    position: absolute;
    top: 2px;
    right: 5px;
    color: #000;
    line-height: 40px;
    transition: all 0.4s ease;
}
.sprofile-group-line a img{
	width: 25px;
    height: 25px;
    margin: auto 5px;
	transform: scale(1.2);
}
.sprofile-group-line a span{
	font-size: 14px;
    color: #220d4e;
    margin: auto 15px;
    transition: color 0.3s ease;
}
.sprofile-group-line a:hover:after,
.sprofile-group-line a:active:after,
.sprofile-group-line a:focus:after{
    transform: translateX(30px);
}
.sprofile-group-line a:hover span,
.sprofile-group-line a:active span,
.sprofile-group-line a:focus span{
	color: #00c2ff;
}
.sprofile-group-line a .snotice{
	position: absolute;
    top: 2px;
    left: 26px;
    display: block;
    color: #fff;
    background: #ff2727;
    font-size: 10px;
    line-height: 121%;
    padding: 1px 4px;
    border-radius: 50px;
    letter-spacing: 0.4px;
    min-width: 14px;
    text-align: center;
}
.site-current-banner{
    position: relative;
    width: 100%;
    display: grid;
    background: url(../resource/others/bg-space2.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    box-shadow: inset 0 1px 15px #9e61bb33;
    min-height: 280px;
    overflow: hidden;
    padding-top: 15px;
}
@media(max-width: 1080px){
    .site-current-banner{
        min-height: 250px;
    }
}
@media(max-width: 764px){
    .site-current-banner{
        min-height: 220px;
    }
}
.site-current{
	position: relative;
    display: flex;
    width: 100%;
    margin-top: 10px;
}
.site-current-main{
    position: relative;
    display: flex;
    background: #fff;
    border-radius: 50px;
    border: 1px solid #cbcbcb;
    text-align: center;
    margin: auto;
    padding: 0 20px;
    padding-left: 35px;
    height: 28px;
    min-width: 120px;
    animation: fadeIn 1s;
}
.site-current-main img{
	position: absolute;
    top: -12px;
    left: -20px;
    width: 50px;
    height: 50px;
    margin: auto 10px;
}
.site-current-main span{
	margin: auto;
    min-width: max-content;
    font-size: 15px;
    font-weight: 500;
    font-family: system-ui;
    color: #220d4e;
    width: 100%;
}
.sproduct-button{
	display: flex;
    width: 100%;
    margin-top: 10px;
    padding: 0 5px;
}
.sproduct-button .sorder-spin{
	position: relative;
    border: none;
    font-size: 16px;
    border-radius: 5px;
    height: 47px;
    max-width: unset;
}
.sproduct-button .sorder-spin.disabled{
	filter: grayscale(1);
	opacity: 0.9;
}
.sproduct-button .sorder-spin.disabled:before{
	animation: unset !important;
}
@keyframes animatedSpin {
  0% { transform: scale(1.25); }
  60% { transform: scale(0.5); }
  80% { transform: scale(0.4); }
  100% { transform: scale(1.25); }
}
.sbox-txreward{
    position: relative;
    display: flex;
    flex-wrap: wrap;
    max-width: 700px;
    padding: 5px 6px;
    margin: auto;
    margin-top: 10px;
    margin-bottom: 20px;
}
.txreward-box{
    position: relative;
    display: grid;
    width: calc(50% - 16px);
    min-height: 160px;
    padding: 20px 5px;
    border-radius: 15px;
    background: linear-gradient(175deg, #fff 70%, #cfe5fa3a);
    box-shadow: 0 1px 3px #0033634a;
    margin: 8px;
}
.txreward-box img{
	width: 40px;
    height: 40px;
    margin: auto;
    margin-bottom: 10px;
}
.txreward-box .ico{
    margin: auto;
    margin-bottom: 10px;
}
.txreward-box h5{
	font-size: 13px;
    font-weight: 500;
    text-align: center;
    margin-top: 2px;
    margin-bottom: 2px;
    letter-spacing: -0.2px;
    color: #220d4e;
}
.txreward-box span{
    color: #000;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin: auto;
    margin-bottom: 2px;
}
.txreward-box p{
    text-align: center;
    font-weight: 500;
    color: #1d0058;
    line-height: 130%;
    font-size: 13px;
    letter-spacing: -0.2px;
    padding: 0 5px;
    margin: 0;
}
.sprofile-main{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    width: 100%;
    height: 100%;
    background: #0005;
    z-index: 1;
}
.site-profile2{
	display: grid;
    padding-bottom: 10px;
}
.sprofile2-main{
	position: relative;
    margin: 20px auto;
    margin-bottom: 15px;
    width: calc(100% - 30px);
    background: linear-gradient(175deg, #fff 70%, #cfe5fa3a) !important;
    box-shadow: 0 1px 3px #0033634a;
    border-radius: 15px;
    overflow: hidden;
    z-index: 1;
}
.sprofile2-top{
	display: flex;
	border-bottom: 1px solid #d9d9d9;
}
.sprofile2-bot{
	display: flex;
    min-height: 45px;
}
.sprofile2-bot > span{
	font-size: 14px;
    padding: 0 15px;
    margin: auto 0;
}
.sprofile2-refcode{
	display: flex;
    margin: auto;
    margin-right: 5px;
}
.sprofile2-refcode span{
	font-size: 13px;
    font-weight: bold;
    font-family: system-ui;
    color: #000;
    margin: auto;
}
.sprofile2-refcode img{
	width: 30px;
    height: 30px;
    padding: 7px;
	cursor: pointer;
}
.sprofile2-panel{
	position: relative;
    margin: auto;
    margin-bottom: 10px;
    width: calc(100% - 30px);
    background: linear-gradient(175deg, #fff 70%, #cfe5fa3a) !important;
    box-shadow: 0 1px 3px #0033634a;
    border-radius: 15px;
    padding-top: 15px;
    padding-bottom: 5px;
    overflow: hidden;
}
.sprofile2-group{
	display: flex;
    margin-bottom: 10px;
}
.sprofile2-item{
	position: relative;
	display: grid;
	padding: 0 5px;
	width: 100%;
}
.sprofile2-item.br-right:after{
	content: '';
	position: absolute;
	height: 80%;
	top: 10%;
	right: 0;
	width: 1px;
	background: #cecece;
}
.sprofile2-item span{
	display: flex;
	color: #000;
    margin: auto;
    font-size: 16px;
    font-weight: 600;
}
.sprofile2-item span:last-child{
    font-size: 12px;
    font-weight: 500;
    margin-top: 2px;
    color: #220d4e;
}
.sprofile2-button{
	display: flex;
	padding: 5px;
	padding-bottom: 10px;
}
.sprofile2-button a{
	font-size: 15px;
    font-weight: bold;
    color: #fff;
    background: linear-gradient(5deg, #26a9e0 0%, #1182ed 100%);
    box-shadow: 0 3px 0 #0469b3;
    border-radius: 50px;
    padding: 0 15px;
    padding-left: 20px;
    margin: 0 5px;
    height: 45px;
    line-height: 45px;
    width: 100%;
    letter-spacing: 0.5px;
    display: block;
}
.btn-css2{
    display: block;
    font-size: 15px;
    border-radius: 5px;
    color: #fff !important;
    background: #aa264b;
    text-align: center;
    padding: 10px 15px;
    margin-bottom: 10px;
}
.btn-css1,
.btn-css6{
	display: block;
    color: #fff !important;
    border-radius: 50px;
    text-shadow: 0 0 2px #fff;
    box-shadow: 0 5px 0 #69cbb863;
    background: #00AC90;
    height: 40px;
    line-height: 39px;
    padding: 0 15px;
    font-size: 18px;
    width: 100%;
    margin-bottom: 10px;
    text-align: center;
}
.btn-css3{
    margin: 5px 10px;
    font-size: 16px;
    border-radius: 3px;
    color: #fff !important;
    text-shadow: 0 0 2px #fff;
    box-shadow: 0 5px 0 #aeccff73;
    background: #3a88ff;
    text-align: center;
    padding: 7px 15px;
    border: none;
    width: calc(100% - 20px);
    outline: none !important;
    transition: background 0.4s ease;
}
.btn-css3:active{
	background: #1254b9;

}
.order-click.active{
	opacity: 0.5;
}
.sbox-spinner{
	display: flex;
    width: calc(100% - 20px);
	max-height: 150px !important;
    margin: 5px;
    margin-top: 15px;
}
.sbox-spinner-main{
	position: relative;
    display: grid;
    width: 100%;
    max-width: 100vw;
	max-height: 150px !important;
    overflow: hidden;
}
.sbox-spinner-main.active:before{
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: url(../images/loader.gif) no-repeat, #f3f1ef;
    background-size: contain;
    background-position: center;
    filter: brightness(1.1);
    mix-blend-mode: multiply;
    width: 100%;
    height: 100%;
    z-index: 2;
	animation: fadeIn 0.4s;
}
.sbox-spinner-main.active:after{
	content: '';
    position: absolute;
    top: 0;
    left: 0;
    background: #fff;
    background-size: contain;
    background-position: center;
    opacity: 0.5;
    width: 100%;
    height: 100%;
    z-index: 1;
    border-radius: 6px;
	animation: fadeIn 0.4s;
}
.sbox-spinner-slider{
	position: relative;
    width: 95%;
    max-width: 440px;
    margin: auto;
}
.sbox-spinner-slider .owl-stage-outer{
	padding: 25px 15px;
}
.sbox-cs-item{
	position: relative;
    margin: auto;
	height: 100%;
	min-height: 80px;
	max-height: 110px;
	animation: sboxslider 2s infinite;
	animation-timing-function: cubic-bezier(0.29, 0.48, 0.57, 0.71);
}
.sbox-cs-item img{
	margin: auto;
    display: block;
    width: 100%;
    height: 100%;
	max-height: 110px;
	max-width: 110px;
    border-radius: 20px;
	box-shadow: 0 1px 4px #a921f78f;
	object-fit: cover;
}
.sbox-spinner-slider .owl-item{
	opacity: 0;
	transition: all 0.5s ease;
	transform: scale(0.7);
}
.sbox-spinner-slider .owl-item.active{
	animation: fadeIn 1s;
	opacity: 1;
	margin: auto -5px;
}
.sbox-spinner-slider .owl-item.center{
	z-index: 3;
	transform: scale(1.2);
}
.sbox-spinner-slider .owl-stage{
	display: flex;
}
.sbox-spinner-slider .owl-item.center .sbox-cs-item{
	display: flex;
}
.sbox-spinner-slider .owl-item.active-2{
	z-index: 2;
	transform: scale(1);
}
.sbox-spinner-slider .owl-item.active-2 .sbox-cs-item{
	display: flex;
	animation-delay: 0.1s;
}
.sbox-spinner-slider .owl-item.active-1{
	z-index: 1;
	transform: scale(0.85);
}
.sbox-spinner-slider .owl-item.active-1 .sbox-cs-item{
	display: flex;
	animation-delay: 0.2s;
}
@keyframes sboxslider {
	0% {transform: scale3d(1, 1, 1);}
    10% {transform: scale3d(0.9, 1.2, 1);}
    22% {transform: scale3d(1.3, 0.8, 1);}
    34% {transform: scale3d(1.1, 1.2, 1);}
    46% {transform: scale3d(1, 1, 1);}
	100% {transform: scale3d(1, 1, 1);}
}
.sbox-spinner-main span{
	font-size: 12px;
    font-family: system-ui;
    color: #2b645c;
    margin: auto;
}
.sbox-spinner-main h5{
	font-size: 20px;
    font-family: system-ui;
    margin: auto;
}
.sbox-spinner-bot{
	display: flex;
    width: 100%;
}
.sbox-spinner-box{
	display: grid;
    width: 100%;
    padding: 20px 5px;
}
.sbox-spinner-box h5{
	font-size: 14px;
	margin-top: 8px;
}
/**************** Product ****************/
.sbox-carousel{
	position: relative;
	display: none !important;
	opacity: 0 !important;
}
.sbox-noticet{
	position: relative;
    width: 90%;
    font-size: 13px;
    font-family: Mont-500;
    color: #005291;
    background: #ffffffa6;
    padding: 10px;
    border: 1px solid #0079d5;
    border-radius: 3px;
    line-height: 130%;
    text-align: center;
    animation: fadeIn 1s;
    margin: 25px auto;
    z-index: 1;
}
.sbox-loader{
	position: absolute;
    top: 50%;
    left: 10%;
    width: 80%;
    height: 5px;
    background: #fff5;
    box-shadow: 0 1px 1px #fff9;
    border-radius: 25px;
    z-index: 999;
	opacity: 1;
}
.sbox-loader > div{
    position: absolute;
    height: 100%;
    background: linear-gradient(185deg, #fff040, #f39808);
    box-shadow: 0 0 4px #ff7f00c2;
    filter: drop-shadow(0 0 5px #ff9d49bd);
    border-radius: 25px;
}

/**************** Product Load *****************/
.sproduct-load{
	display: none;
	position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000a;
    z-index: 200;
	animation: fadein 0.8s;
	overflow: auto;
    padding-bottom: 100px;
	z-index: 1000;
}
.sproduct-load.active{
	display: block;
}
.sproduct-popmenu{
	margin: 10px;
    margin-top: calc(6% + 30px);
}
@media(max-width:764px){
	.sproduct-popmenu{
		margin-top: calc(7% + 30px);
	}
}
.spopmenu-center{
    position: relative;
    display: grid;
    margin: auto;
    box-shadow: 0 2px 10px #0d032496;
    border-radius: 15px;
    min-height: 400px;
    max-width: 400px;
    overflow: hidden;
}
.spopmenu-title{
    display: inline-block;
    width: 100%;
    padding: 15px 5px;
    margin: 0;
    text-align: center;
    font-family: Microsoft YaHei;
    color: #fffd;
    background: url(../resource/others/banner-cta.webp) no-repeat;
    background-size: cover;
    filter: drop-shadow(2px 2px 0 #0002);
    font-size: 26px;
    font-weight: 600;
    line-height: 110%;
}
.spopmenu-body{
    background: #f8f8f8;
}
.spopmenu-detail{
	position: relative;
    display: grid;
    padding: 10px 6px;
    background: #fff;
    box-shadow: 0 1px 4px #0005;
    border-radius: 0 0 10px 10px;
    animation: fadeIn 0.7s;
    margin-bottom: 5px;
    z-index: 2;
}
.sproduct-popmenu .spopmenu-detail{
	border: none;
    box-shadow: inset 0 1px 5px #0005;
    margin-bottom: 0;
}
.spopmenu-detail.cc_sample.cn:after{ background: url(../images/status/cc_sample.png) no-repeat; }
.spopmenu-detail.cc_success.cn:after{ background: url(../images/status/cc_success.png) no-repeat; }
.spopmenu-detail.cc_pending.cn:after{ background: url(../images/status/cc_pending.png) no-repeat; }
.spopmenu-detail.cc_complete.cn:after{ background: url(../images/status/cc_complete.png) no-repeat; }
.spopmenu-detail.cc_failed.cn:after{ background: url(../images/status/cc_failed.png) no-repeat; }

.spopmenu-detail.cc_sample.en:after{ background: url(../images/status/cc_sample_en.png) no-repeat; }
.spopmenu-detail.cc_success.en:after{ background: url(../images/status/cc_success_en.png) no-repeat; }
.spopmenu-detail.cc_pending.en:after{ background: url(../images/status/cc_pending_en.png) no-repeat; }
.spopmenu-detail.cc_complete.en:after{ background: url(../images/status/cc_complete_en.html) no-repeat; }
.spopmenu-detail.cc_failed.en:after{ background: url(../images/status/cc_failed_en.png) no-repeat; }

.spopmenu-detail.cc_sample.my:after{ background: url(../images/status/cc_sample_my.png) no-repeat; }
.spopmenu-detail.cc_success.my:after{ background: url(../images/status/cc_success_my.png) no-repeat; }
.spopmenu-detail.cc_pending.my:after{ background: url(../images/status/cc_pending_my.png) no-repeat; }
.spopmenu-detail.cc_complete.my:after{ background: url(../images/status/cc_complete_my.html) no-repeat; }
.spopmenu-detail.cc_failed.my:after{ background: url(../images/status/cc_failed_my.png) no-repeat; }
.spopmenu-detail > label{
    font-size: 14px;
    font-weight: 600;
    padding: 0 10px;
    color: #000;
    margin-bottom: 0;
}
.spopmenu-detail h5{
	font-size: 12px;
    color: #220d4e;
    font-weight: 600;
    padding: 0 10px;
    padding-top: 3px;
    margin-bottom: 12px;
}
.spopmenu-logo{
	display: flex;
	margin-bottom: 15px;
	padding: 0 10px;
}
.spopmenu-logo > img{
	width: 30%;
    max-width: 120px;
    height: 100%;
    background: #fff;
    min-height: 90px;
    max-height: 120px;
    object-fit: cover;
    border-radius: 15px;
    box-shadow: 0 1px 3px #0003;
}
.spopmenu-logo-n{
	display: grid;
    padding: 0 10px;
    width: 100%;
}
.spopmenu-logo-n > span{
	font-size: 16px;
    font-weight: bold;
    line-height: 120%;
    margin: auto;
    color: #000;
    width: 100%;
}
.spopmenu-logo-m{
	display: flex;
}
.spopmenu-logo-m span{
	font-size: 15px;
	font-family: system-ui;
	color: #000;
}
.spopmenu-logo-m span:last-child{
	margin-left: auto;
    padding-right: 5px;
}
.spopmenu-menu{
	display: flex;
    flex-wrap: wrap;
	padding: 0 10px;
    padding-top: 10px;
    border-top: 1px solid #ddd;
}
.spopmenu-group{
	display: grid;
    margin-bottom: 10px;
	padding: 2px;
    width: 50%;
}
.spopmenu-group span{
	margin: auto 0;
	font-family: system-ui;
	font-size: 17px;
    color: #000;
}
.spopmenu-group span:first-child{
    color: #402e66;
    font-size: 14px;
    font-weight: 400;
}
.spopmenu-group span:last-child{
	min-width: max-content;
}
.spopmenu-group.lightned span:last-child{
    color: #000;
    font-size: 26px;
    margin-top: -6px;
	min-width: max-content;
}
.spopmenu-group span font{
    margin-left: 3px;
}
.spopmenu-group.hidden2,
.spopmenu-group.hidden3{
	display: none;
}
.spopmenu-view{
	display: inline-block;
	padding: 0 10px;
    margin-bottom: 5px;
}
.sproduct-load .spopmenu-view{
	display: none !important;
}
.spopmenu-view span{
	cursor: pointer;
    color: #fff;
    background: #000;
    box-shadow: 0 2px 0 #444;
    font-size: 14px;
    font-family: system-ui;
    padding: 6px 12px;
    transition: filter 0.3s ease;
    float: right;
}
.spopmenu-view span:active,
.spopmenu-view span:focus{
	filter: brightness(0.7);
}
.spopmenu-button{
	position: relative;
	display: flex;
	z-index: 1;
}
.spopmenu-button button{
	margin: 10px auto;
    text-align: center;
    border: none;
    background: #220d4e;
    box-shadow: 0 2px 0 #c3a6ff;
    font-weight: 600;
    color: #ffffff;
    border-radius: 60px;
    height: 50px;
    line-height: 46px;
    padding: 0 30px;
    width: 70%;
    min-width: 150px;
    font-size: 17px;
    transition: all 0.3s ease;
    outline: none !important;
}
.spopmenu-button button:active{
	background: #121821;
    color: #fff;
}
.spopmenu-close{
	display: flex;
	margin-top: 25px;
}
.spopmenu-close button{
	display: inline-block;
    margin: auto;
	outline: none !important;
	transition: all 0.3s ease;
	animation: fadeTop 1s;
	background: unset;
    border: none;
}
.spopmenu-close button:hover,
.spopmenu-close button:active{
	filter: drop-shadow(0 0 2px #fffa);
}
.spopmenu-close button img{
    width: 35px;
    height: 35px;
}
@keyframes fadeTop {
  0% { display: block; transform: translateY(15px); opacity: 0; }
  100% { display: block; transform: translateY(0); opacity: 1; }
}
.spopmenu-no-data{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: calc(100% - 6px);
    font-size: 13px;
    padding: 15px;
    min-height: 300px;
    color: #7760a2;
    border: 2px dashed #977dc9b8;
    border-radius: 6px;
    margin: 0 3px;
}
/*************** Order **************/
.site-sorder{
	display: flex;
	padding: 0 10px;
    margin: 0 10px;
	margin-bottom: 20px;
}
.sorder-title{
	margin: auto 0;
}
.sorder-title h4{
	font-weight: bold;
    font-size: 24px;
    color: #000;
	margin-bottom: 5px;
}
.sorder-title span{
	font-size: 11px;
    color: #333;
    letter-spacing: 0.5px;
    font-family: system-ui;
}
.sorder-amount{
	margin: auto;
	margin-right: 0;
	text-align: right;
}
.sorder-amount h4{
	font-weight: bold;
    font-size: 26px;
    color: #ff1d1d;
    margin-bottom: 5px;
}
.sorder-amount span{
	font-size: 12px;
    color: #000000;
    letter-spacing: 0.5px;
    font-family: system-ui;
    line-height: 120%;
}
.site-readorder{
	padding: 10px;
}
.spopmenu-load{
    display: grid;
}
.sreadorder-menu{
	display: flex;
    animation: fadeIn 0.5s;
    overflow: hidden;
    padding: 10px 12px;
    gap: 5px;
}
.sreadorder-menu a{
	width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    text-align: center;
    color: #220d4e;
    text-shadow: 0 0 1px #fff;
    box-shadow: 0 1px 1px #0005;
    background: #fff;
    border: 2px solid #220d4e;
    border-radius: 5px;
    padding: 0 10px;
    min-height: 42px;
}
.sreadorder-menu a.active{
    background: #220d4e;
    animation: glowing 3s infinite;
    color: #fff;
}
.site-readorder .spopmenu-detail{
    border-radius: 10px;
    background: linear-gradient(175deg, #fff 70%, #cfe5fa3a) !important;
    box-shadow: 0 1px 3px #0033634a;
    margin-bottom: 15px;
    border: 1px solid #c4bfce;
}
.site-readorder .spopmenu-detail:after{
	width: 64px;
    height: 60px;
}
/************** Today Earn *************/
.site-tdsreward{
	margin: 60px 10px 40px 10px;
}
.site-tdsreward > h5{
	font-size: 21px;
	font-weight: bold;
    color: #000;
}
.tdsreward-main{
	padding: 12px 0;
    background: #fff;
    border: 1px solid #84ebdb;
    box-shadow: 0px 4px 10px 0px rgb(96 134 165 / 15%);
    border-radius: 6px;
}
.tdsreward-line{
	display: flex;
}
.tdsreward-group{
	width: 100%;
    border-right: 1px solid #e8eff2;
    padding: 0 4px;
    padding-left: 8px;
}
.tdsreward-line:first-child .tdsreward-group{
	padding-bottom: 15px;
}
.tdsreward-group:last-child{
	border-right: unset;
}
.tdsreward-group span{
	display: block;
    font-size: 12px;
    font-family: sans-serif;
    color: #026e5d;
    margin-bottom: 2px;
	letter-spacing: -0.3px;
}
.tdsreward-group span.gray{
	color: #0c4dcb;
}
.tdsreward-group h4{
	font-size: 21px;
    margin-top: -2px;
    word-break: break-all;
}
.tdsreward-group h5{
	font-size: 19px;
    color: #ff5458;
}
.site-tdsnotice{
	margin: 0 10px;
    border-radius: 10px;
    border: 1px solid #ddd;
}
.tdsnotice-title{
    display: flex;
    padding: 15px;
}
.tdsnotice-title:after{
    content: "\f0dd";
    font-family: 'icomoon' !important;
    margin-left: auto;
    line-height: 1.2;
    transition: all 0.3s ease;
}
.site-tdsnotice.active .tdsnotice-title:after{
    transform: rotate(180deg);
}
.tdsnotice-title span{
	display: block;
    border-radius: 3px;
    font-size: 15px;
    font-weight: bold;
    color: #220d4e;
}
.tdsnotice-detail{
    display: none;
    font-size: 13px;
    color: #282828;
    border-left: 3px solid #00c2ff;
    letter-spacing: 0.2px;
    padding: 15px;
    padding-top: 0px;
}
.site-tdsnotice.active .tdsnotice-detail{
    display: block;
    animation: fadeIn 0.4s ease;
}
.tdsnotice-detail p{
	margin: 0;
}
/**************** Deposit *****************/
.sdeposit-form{
	position: relative;
    width: 100%;
    height: 100%;
    padding: 10px 15px;
    margin: auto;
    margin-bottom: 20px;
    animation: slidertop 0.5s;
}
.sdeposit-form .form-group{
	display: grid;
}
.sdeposit-form .form-group label{
    font-size: 13px;
    color: #110729;
    font-weight: 400;
}
.sdeposit-form .form-group input,
.sdeposit-form .form-group select{
	border: none;
    border-bottom: 1px solid #ccc;
    border-radius: unset;
    height: 42px;
    line-height: 42px;
    letter-spacing: 0.4px;
    font-size: 20px;
    color: #555;
    outline: unset !important;
}
.sdeposit-form .form-group span{
	font-size: 13px;
    color: #777;
    margin-top: 5px;
}
.sdeposit-infos{
	margin-bottom: 30px;
    margin-top: 5px;
}
.sdeposit-infos p{
	font-size: 12px;
    font-family: sans-serif;
    color: #888;
    margin: 0;
    letter-spacing: -0.1px;
}
.sdeposit-insert{
	margin: auto;
	text-align: center;
}
.sdeposit-insert span{
	font-size: 18px;
    color: #fff;
    line-height: 20px;
    font-weight: bold;
    letter-spacing: -0.2px;
}
.sdeposit-insert span font{
	font-size: 28px;
    margin-left: 5px;
}
.sdeposit-input{
	display: flex;
    border: 1px solid #d5dee4;
    background: #f8fafd;
}
.sdeposit-input span{
	margin: auto 0 !important;
    padding: 0 20px;
    color: #000 !important;
    font-family: sans-serif;
	line-height: 100%;
}
.sdeposit-input input,
.sdeposit-input select{
	border: none !important;
    font-size: 14px !important;
    width: 100%;
    font-family: sans-serif;
    padding: 0 15px;
	background: unset;
}
.sdeposit-form .option-select{
    display: flex;
    flex-wrap: wrap;
    margin: 0 -5px;
    margin-bottom: 15px;
}
.sdeposit-form .option-select span{
	position: relative;
    display: grid;
    font-size: 14px;
    padding: 7px 2px;
    margin: 3px;
    width: calc(25% - 6px);
    text-align: center;
    border-radius: 5px;
    background: #f3f5f7;
    box-shadow: 0 1px 3px #0002;
    border: 2px solid transparent;
    letter-spacing: 0.3px;
    line-height: 150%;
    cursor: pointer;
    gap: 1px;
}
.sdeposit-form .option-select span.active{
	animation: fadeIn 0.5s ease;
    border-color: #814bf8;
    color: #5416dc;
}
.sdeposit-form .option-select span font:first-child{
    font-size: 14px;
    letter-spacing: -0.3px;
    font-weight: 600;
    color: #220d4e;
}
.sdeposit-form .option-select span font:last-child{
	font-size: 11px;
}
.sdpayment-top{
	display: grid;
	margin-bottom: 10px;
}
.sdpayment-top span{
	font-size: 12px;
    color: #333;
    line-height: 160%;
}
.sdpayment-bank{
	display: grid;
	margin-bottom: 20px;
}
.sdpayment-bank-item{
	display: flex;
    height: 40px;
    border-bottom: 1px solid #eee;
    padding: 0 15px;
    margin: 0 -15px;
}
.sdpayment-bank-item h5{
	font-size: 13px;
    font-weight: bold;
    color: #111;
    word-break: keep-all;
    min-width: 80px;
    padding-right: 5px;
    margin: auto 0;
}
.sdpayment-bank-item span{
	font-size: 12px;
    font-family: system-ui;
    padding: 0 5px;
    color: #333;
	margin: auto 0;
}
.sdpayment-bank-item input{
	border: none;
    font-size: 14px;
    letter-spacing: 1px;
    padding: 0 5px;
    color: #0014ff;
    text-shadow: 0 0 1px #0007406b;
    width: calc(100% - 130px);
    text-transform: capitalize;
}
.sdpayment-bank-item .btn-copy{
	margin: auto;
    margin-right: 0;
    border: 1px solid #f05353;
    color: #e20000;
    font-size: 8px;
    padding: 3px 5px;
}
#readamount{
	color: #009058;
    font-size: 14px;
}
.sdpayment-upload{
	display: grid;
    padding-bottom: 10px;
	margin-bottom: 10px;
	border-bottom: 1px solid #eee;
}
.sdpayment-upload img{
	width: 100%;
    max-width: 300px;
    height: 160px;
    margin: auto;
    background: #eee;
    border: 1px solid #ddd;
    padding: 5px;
	border-radius: 15px;
}
.sdpayment-upload span{
	text-align:center;
	font-size: 12px;
	color: #666;
}
.sdpayment-upload input{
	display: none;
}
.sdpayment-note{
	margin-bottom: 15px;
    padding: 10px 0;
}
.sdpayment-note p{
	font-size: 12px;
	line-height: 150%;
	margin: 0;
}

/************* Reports **************/
.site-report{
	margin: 15px;
    display: grid;
}
.sreport-item{
    position: relative;
    display: grid;
    margin-bottom: 15px;
    padding: 10px;
    background: linear-gradient(175deg, #fff 70%, #cfe5fa3a);
    box-shadow: 0 1px 3px #0033634a;
    color: #000;
    border-radius: 4px;
    border-left: 5px solid #222;
}
.sreport-item > div{
	display: grid;
	z-index: 2;
}
.sreport-item:before{
	content: '';
    background: url(../images/square-angle.png) no-repeat;
    background-size: cover;
    background-position: top right;
    position: absolute;
    right: 0;
    top: 0;
    width: 50%;
    height: 100%;
    filter: grayscale(1) brightness(0.96);
	opacity: 0.2;
}
.sreport-item.failed{
	border-left: 5px solid #ff4040;
}
.sreport-item.success{
    border-left: 5px solid #00e97b;
}
.sreport-item span{
	font-size: 13px;
    font-family: sans-serif;
	line-height: 175%;
    color: #222;
}
.sreport-item span font.font-13{
	color: #9132ff;
}
.sreport-isread{
	position: absolute;
    background: unset;
    border-radius: 3px;
    font-size: 12px;
    right: 5px;
    bottom: 5px;
    border: 1px solid #7f00ff;
    color: #720a9b;
    padding: 0 6px;
    outline: none !important;
	transition: all 0.3s ease;
}
.sreport-isread.readed2{
	border-color: #999;
    color: #555;
}
.sreport-isread.readed3{
    border-color: #c1b8d3;
    color: #604793;
}
.report-empty{
    width: 100%;
    text-align: center;
    font-size: 12px;
    margin-top: 25px;
    letter-spacing: 1.5px;
    color: #b7a3c2;
}
/*************** Bank **************/
.banksetup-title{
	position: relative;
    padding: 5px 10px;
    height: 45px;
    display: flex;
    border-top: 1px solid #d0baff;
    border-bottom: 1px solid #d0baff;
    background: #eee6ff;
    animation: fadeIn 2s;
}
.banksetup-title h5{
	font-size: 13px;
    font-weight: 500;
    color: #220d4e;
    margin: auto 0;
    padding: 5px 10px;
    border-radius: 50px;
}
.banksetup-paragraph{
	margin-top: 30px;
    margin-bottom: 10px;
    display: block;
    padding: 0 15px;
	line-height: 130%;
}
.banksetup-paragraph p{
	font-size: 13px;
    font-family: sans-serif;
    color: #6e7372;
}
.banksetup-detail{
	padding: 15px 15px;
	margin-top: 10px;
}
.banksetup-detail .form-group{
	display: flex;
}
.banksetup-detail .form-group.grid{
	display: grid;
}
.banksetup-detail .form-group label{
	font-size: 13px;
    color: #000;
    margin: auto 0;
    width: 90px;
    line-height: 140%;
    margin-right: 5px;
    padding-right: 10px;
}
.banksetup-detail .form-group.grid label{
	width: 100%;
	margin-right: 0;
	margin-bottom: 5px;
}
.banksetup-detail .form-group input,
.banksetup-detail .form-group select,
.banksetup-detail .form-group textarea{
    width: 100%;
    margin-right: 5px;
    background: #fafafa;
    border: 1px solid #ccd1dd;
    border-radius: 5px;
    color: #000;
    font-weight: 500;
    font-size: 13px;
    height: 40px;
    line-height: 40px;
    padding: 5px 10px;
}
.banksetup-detail .form-group textarea{
	height: unset;
    line-height: unset;
	min-height: 120px;
}
.banksetup-alert{
	font-size: 13px;
    color: #ff1d1d;
}

.site-withdraw{
	margin: 15px;
}
.swithdraw-box{
	position: relative;
	display: grid;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 2px 4px #0001;
    padding: 15px;
    margin-bottom: 16px;
}
.swithdraw-edit{
	display: flex;
    position: absolute;
    right: -4px;
    top: -8px;
    font-size: 11px;
    letter-spacing: 0.4px;
    color: #834d93;
    background: #d1b8d9;
    border-radius: 50px;
    padding: 2px 8px;
}
.swithdraw-edit i{
	font-size: 14px;
	margin-right: 5px;
}
.swithdraw-title{
	display: flex;
	margin-bottom: 10px;
}
.swithdraw-title h5{
    font-size: 16px;
    margin: auto 0;
    margin-right: 15px;
}
.swithdraw-title span{
    padding: 0 5px;
    border: 1px solid #0e8fff;
    color: #0067c1;
    border-radius: 50px;
    font-size: 12px;
    margin: auto 0;
}
.swithdraw-input{
	display: flex;
	margin-bottom: 10px;
}
.swithdraw-input input{
	display: flex;
    background: #fcfcfc;
    border-radius: 3px;
    width: 100%;
    padding: 0 20px;
    font-size: 23px;
    height: 55px;
    border: none;
    outline: unset !important;
    border-bottom: 1px solid #eee;
}
.swithdraw-remain span{
	color: #888;
    font-size: 13px;
    font-family: system-ui;
    margin-right: 20px;
}
.swithdraw-remain.sclock span{
    color: #ff8080;
}
.swithdraw-remain .btn-wdall{
	color: #7044be;
	background: #f4eeff;
    font-size: 12px;
    padding: 4px 10px;
	border-radius: 50px;
	transition: all 0.4s ease;
}
.swithdraw-remain .btn-wdall:hover,
.swithdraw-remain .btn-wdall:active{
	color: #3a1777;
    background: #dfceff;
}
.swithdraw-bank{
	display: flex;
    height: 42px;
    border-bottom: 1px solid #f9f9f9;
}
.swithdraw-bank:last-child{
	border-bottom: unset;
}
.swithdraw-bank h4{
	font-size: 14px;
    color: #7f909e;
    margin: auto;
    margin-left: 0;
	letter-spacing: 0.8px;
	min-width: 80px;
}
.swithdraw-bank h5{
	font-size: 13px;
    margin: auto;
    margin-right: 0;
	letter-spacing: 0.5px;
	text-align: right;
}
.swithdraw-info{
	padding: 5px;
    margin-bottom: 15px;
}
.swithdraw-info p{
	margin: 0;
    font-size: 12px;
    color: #ff3f3f;
    line-height: 140%;
    font-family: sans-serif;
    letter-spacing: 0.2px;
}

.sreport-user{
	display: grid;
}
.sreport-utime{
	display: block;
    width: 100%;
    background: linear-gradient(180deg, #fff 70%, #cfe5fa4a);
    box-shadow: 0 1px 3px #0033634a;
    padding: 10px;
    padding-top: 15px;
}
.sreport-utime form{
	display: flex;
    width: 100%;
    margin: 0;
}
.sreport-utime input{
    width: 100%;
    height: 35px;
    border-radius: 50px;
    background: #fff;
    border: 1px solid #d2dcee;
    color: #220d4e;
    font-size: 14px;
    font-family: system-ui;
    padding: 0 15px;
    text-align: center;
    letter-spacing: 0.5px;
    outline: unset !important;
    margin: auto 5px;
}
.sreport-utime span{
	margin: auto 2px;
}
.sreport-utime button{
    background: #00c2ff;
    box-shadow: 0 2px 0 #3a88ff;
    color: #fff;
    word-break: keep-all;
    padding: 0 15px;
    font-size: 14px;
    border: none;
    border-radius: 50px;
    line-height: 30px;
    height: 33px;
    margin-left: 10px;
}
.sreport-umenu{
	display: flex;
    background: linear-gradient(0deg, #fff, #f0efff);
	border-top: 1px solid #ccc;
}
.sreport-umenu a{
	width: 100%;
    text-align: center;
    padding: 0 10px;
    height: 45px;
    line-height: 45px;
    font-size: 13px;
    letter-spacing: 0.2px;
    color: #444;
    border-bottom: 1px solid #ddd;
}
.sreport-umenu a.active{
    color: #220d4e;
    background: #fff;
    font-weight: 700;
    border-bottom: 1px solid #fff;
    border-left: 1px solid #ddd;
    border-right: 1px solid #ddd;
    text-shadow: 0 0 1px #fff8;
}
.sreport-umenu a:first-child{border-left: none !important;}
.sreport-umenu a:last-child{border-right: none !important;}
.sreport-udetail{
	height: 100%;
	padding: 5px;
    padding-top: 10px;
}
.sreport-uitem{
    padding: 15px;
    padding-bottom: 5px;
    background: linear-gradient(175deg, #fff 70%, #cfe5fa5c) !important;
    box-shadow: 0 1px 3px #00336340;
    border: 1px solid #e6e5e8;
    border-radius: 5px;
    animation: slideTop 0.6s;
    min-height: 80px;
    color: #fff;
    margin: 5px;
    margin-bottom: 10px;
}
.sreport-uitem h5{
    font-size: 13px;
    font-weight: 500;
    color: #222;
    margin-bottom: 15px;
}
.sreport-field{
	display: flex;
}
.sreport-field span{
	font-size: 15px;
}
.sreport-field span:first-child{
	margin-right: 20px;
}
.sreport-field span:last-child{
    margin-left: auto;
    font-size: 12px;
    color: #fff;
    background: #220d4e;
    padding: 0 12px;
    border-radius: 50px;
    height: 25px;
    line-height: 25px;
}
.datepicker-dropdown{
	width: calc(100% - 20px);
	left: 10px !important;
}
.datepicker-days table{
	width: 100%;
	color: #000;
}
.datepicker td, .datepicker th{
	width: 36px;
    height: 36px;
    background: #f8f8f8;
    border: 2px solid #fff;
}
.datepicker-days table .active.day{
	background: linear-gradient(180deg, #4fa1ff, #317ff1) !important;
    color: #fff;
    text-shadow: 0 0 1px #fff;
	border: none;
}
.site-intro-main{
	display: flex;
    margin: 15px 5px;
}
.site-intro-main a{
	display: grid;
	width: 100%;
    margin: 2px;
}
.site-intro-main a img{
	width: 45px;
	height: 45px;
    margin: auto;
}
.site-intro-main a span{
	font-size: 12px;
    color: #000;
    font-weight: bold;
    text-align: center;
    display: inline-block;
    margin-top: 2px;
}
.site-intro-main a.active span{
    color: #f00;
}
.sintroduction-title{
	padding-bottom: 10px;
}
.sintroduction-title h4{
	font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.2px;
    color: #220d4e;
}
.sintroduction-detail h1{
	font-size: 32px;
}
.sintroduction-faq li{
	border-top: 1px solid #bbb;
	padding-bottom: 10px;
}
.sintroduction-faq li h4{
	padding-top: 30px;
	padding-bottom: 20px;
    color: #220d4e;
    display: flex;
    justify-content: space-between;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
}
.sintroduction-faq li h4:after{
	content: "\f107";
	font-family: 'icomoon' !important;
	transition: all 0.5s ease;
}
.sintroduction-faq li.active h4:after{
	transform: rotate(180deg);
}
.sintroduction-faq li .sfaq-inner{
	display: none;
}
.sintroduction-faq li.active .sfaq-inner{
	display: block;
	animation: fadeIn 0.5s ease;
}
.site-introduction{
    background: #fff;
    border-radius: 5px;
    font-size: 14px;
    color: #222;
    word-break: break-word;
    padding-top: 30px;
}

.sreport-team{
	display: flex;
	width: 100%;
	border-top: 1px solid #ccc;
}
.steam-side{
	display: grid;
	width: 100%;
}
.steam-item{
	display: grid;
    padding: 10px;
    width: 100%;
    background: linear-gradient(175deg, #fff 70%, #cfe5fa3a);
    min-height: 63px;
}
.steam-item:not(:last-child){
	border-bottom: 1px solid #bbb;
}
.steam-side:last-child .steam-item{
	border-right: unset;
}
.steam-item span{
	margin: auto;
    color: #220d4e;
    font-size: 11px;
}
.steam-item h5{
	margin: auto;
	font-size: 20px;
    font-family: sans-serif;
	color: #000;
}
/****************** Invite *****************/
.site-invite{
    width: 100%;
    height: calc(100% - 40px);
}
.site-invite:before{
	content: '';
    position: absolute;
    background: url(../images/World.png) no-repeat;
    background-size: 360px;
    background-position: center;
    top: 10%;
    left: 0;
    width: 100%;
    height: 65%;
	filter: brightness(2);
	mix-blend-mode: plus-lighter;
}
.sinvite-nav{
	display: flex;
    position: absolute;
	background: #fff;
    box-shadow: 0 1px 5px #0003;
    bottom: 0;
    left: 0;
    width: 100%;
}
.sinvite-navbar{
	display: flex;
	width: 90%;
	padding: 10px 5px;
    padding-right: 0;
}
.sinvite-navbar span{
	padding: 0 3px;
    color: #333;
    font-size: 14px;
    margin: auto 0;
    min-width: max-content;
    font-family: system-ui;
    letter-spacing: 0;
}
.sinvite-navbar span.refcode{
	color: #220d4e;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: -0.5px;
    font-family: unset;
    padding-right: 0;
    margin-left: auto;
}
.sinvite-navbar i{
	width: 30px;
    height: 30px;
    text-align: center;
    line-height: 30px;
    color: #777;
}
.sinvite-navicon{
	display: flex;
	width: 90%;
}
.sinvite-navicon span{
    color: #fff;
    line-height: 50px;
    font-size: 15px;
    width: 100%;
    background: #00c2ff;
    text-align: center;
}
.sinvite-navicon span:last-child{
	 background: #220d4e;
}
.sinvite-friend{
	position: absolute;
    top: 100px;
    width: 320px;
    left: calc(50% - 160px);
    filter: drop-shadow(1px 2px 4px #0005);
}
.sinvite-box{
    position: absolute;
    display: flex;
    left: 4%;
    bottom: 80px;
    width: 92%;
    background: linear-gradient(178deg, #fff 60%, #eaf5ff);
    box-shadow: 0 1px 5px #00336359;
    border-radius: 15px;
    min-height: 145px;
    z-index: 1;
}
.sinvite-box-main{
	display: flex;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 15px;
}
.sinvite-box-left{
	display: block;
    width: 30%;
    min-width: 130px;
    text-align: center;
	padding-left: 5px;
}
.sinvite-box-left span{
	display: block;
    color: #222;
    font-size: 13px;
    margin-top: 10px;
    margin-bottom: 8px;
}
.sinvite-box-left h5{
    display: inline-flex;
    margin: 0;
    font-size: 32px;
    font-weight: bold;
    letter-spacing: 1px;
    font-family: -webkit-pictograph;
    color: #220d4e;
}
.sinvite-box-left h5 font{
	font-size: 13px;
    margin-left: 2px;
    margin-bottom: 6px;
	margin-right: 0;
    margin-top: auto;
    color: #222;
}
.sinvite-box-right{
	display: block;
    margin: 0 auto;
    text-align: center;
	padding-right: 10px;
}
.sinvite-box-right span{
	display: block;
    color: #333;
    font-size: 13px;
    margin-top: 10px;
}
.sinvite-box-right h5{
	font-size: 24px;
    font-weight: bold;
    font-family: -webkit-pictograph, sans-serif;
    letter-spacing: 0.4px;
    color: #222;
    margin-top: 8px;
    margin-bottom: 0;
    border: 1px solid #ddd;
    border-radius: 50px;
    padding: 6px 15px;
}
.sinvite-box-right button{
	border: none;
    font-size: 14px;
    letter-spacing: 1px;
    height: 37px;
    margin: auto;
    margin-top: 15px;
    margin-bottom: 5px;
}
.sinvite-box-right img{
    width: 160px;
    height: 160px;
    border: 2px solid #000;
	margin-bottom: 10px;
    margin-top: 8px;
}
.sinvite-box-right.findqr{
	display: none;
}
.sinvite-box .husky{
	position: absolute;
    z-index: 1;
    width: 320px;
    height: 210px;
    zoom: 0.4;
    top: -205px;
    left: -50px;
    filter: drop-shadow(0 0 14px #a5d2ff);
}
.site-notice{
	position: relative;
    display: grid;
    min-height: calc(100% - 45px);
}
.snotice-board{
	margin: 10px;
    margin-top: 15px;
    z-index: 1;
    border-radius: 10px;
}
.snotice-title{
    display: flex;
    background: url(../images/sdlc/slider01.jpg);
    background-size: cover;
    background-position: center;
    border-radius: 12px;
    padding: 10px 15px;
    margin-bottom: 10px;
    height: 55px;
}
.snotice-title img{
	width: 30px;
    height: 30px;
    margin: auto 0;
	filter: grayscale(1) brightness(10);
}
.snotice-title h5{
	font-size: 14px;
    font-weight: 500;
    padding: 0 15px;
    margin: auto 0;
    color: #fff;
}
.snotice-detail{
	display: grid;
}
.snotice-item{
    position: relative;
    display: grid;
    background: linear-gradient(175deg, #fff 70%, #cfe5fa3a);
    box-shadow: 0 1px 3px #0033634a;
    border: 1px solid #b1abc3;
    border-radius: 10px;
    padding: 12px 15px;
    margin-bottom: 15px;
}
.snotice-item h5{
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 5px;
    color: #220d4e;
}
.snotice-item p{
	margin-bottom: 5px;
    font-size: 13px;
	letter-spacing: -0.2px;
    color: #555;
}
.snotice-item p > font{
	color: #0006ff;
    text-decoration: underline;
}
.snotice-item span{
    font-size: 12px;
    font-weight: 500;
    color: #220d4e;
    padding-top: 5px;
}
.sreport-nitem{
	display: none;
	padding: 5px 15px 15px 5px;
    border-bottom: 1px solid #eee;
	transition: all 0.5s ease;
}
.sreport-nitem.active{
	display: flex;
}
.sreport-logo{
	display: flex;
}
.sreport-logo img{
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin: auto 5px;
    background: #f8fbfe;
    border: 2px solid #7250b8;
}
.sreport-detail{
	display: grid;
	width: 100%;
	padding-left: 5px;
	filter: brightness(0.9);
}
.sreport-ninfo{
	display: flex;
}
.sreport-ninfo p{
	font-size: 12px;
	font-family: system-ui;
	margin: 0;
}
.sreport-ninfo p:last-child{
	margin-left: auto;
}
/**************** Login ****************/
.site-login-logo{
	display: flex;
    margin: auto;
    margin-top: 3vh;
    margin-bottom: 20px;
}
.site-login-logo img{
	width: 100%;
    height: 100%;
    max-width: 90px;
    max-height: 80px;
    margin: auto;
    animation: fadeIn 2s;
}
.site-hi-welcome{
	position: absolute;
    top: 0;
    left: 0;
    font-size: 17px;
    font-family: Mont-600;
    text-align: center;
    width: 100%;
    height: 40px;
    line-height: 40px;
    animation: fadeIn 2s;
}
.site-signup-form .site-login-logo{
	margin-top: 10px;
    margin-bottom: 20px;
}
.site-login-form,
.site-signup-form{
	padding: 30px 15px;
    max-width: 500px;
    margin: auto;
}
.site-login-form .form-login,
.site-signup-form .form-login{
    padding: 20px;
    background: #fff;
    box-shadow: 0 1px 10px #221d3022;
    border: 1px solid #cdb5ff;
    border-radius: 10px;
}
.login-form-title,
.signup-form-title{
	position: relative;
	display: grid;
	margin-bottom: 15px;
}
.login-form-title h5,
.signup-form-title h5{
    font-size: 20px;
    font-weight: 600;
    padding-right: 12px;
    text-align: center;
    color: #220d4e;
    margin-bottom: 10px;
}
.login-form-title p,
.signup-form-title p{
    font-size: 14px;
    font-weight: 400;
    text-align: center;
    color: #4a4a4a;
    margin-bottom: 0;
    line-height: 1.5;
}
.login-form-title select,
.signup-form-title select{
	position: absolute;
    right: -10px;
	top: -5px;
	color: #fff;
    margin-left: auto;
    border: none;
    background: unset;
    font-size: 13px;
    height: 30px;
    min-width: 45px;
    outline: unset !important;
    text-transform: uppercase;
}
.login-form-title select.lang-changer,
.signup-form-title select.lang-changer{
    color: #000;
}
.login-form-title select.lang-changer option,
.signup-form-title select.lang-changer option{
	color: #000;
}
.login-form-box .form-group{
	display: grid;
}
.login-form-box .form-group label{
	color: #000;
    font-size: 13px;
    font-family: 'Mont-500';
    margin-bottom: 3px;
}
.login-form-box .form-group input,
.login-form-box .form-group select{
	border: none;
    outline: unset !important;
    color: #000;
    font-size: 14px;
    padding: 0 15px;
    letter-spacing: 0.5px;
    border-radius: 8px;
	background: #f8f8f8;
    box-shadow: 0px 0px 1px 1px #73ebd7 !important;
	transition: background 0.4s ease;
}
.login-form-box .form-group .login-form{
    display: flex;
    min-height: 50px;
    background: #fff;
    border: 1px solid #e5e6ec;
    box-shadow: 0 1px 2px rgba(0, 51, 99, 0.08);
    transition: all 0.4s ease;
    border-radius: 8px;
}
.login-form-box .form-group .login-form:has(input:focus){
    border-color: #bfa3ff;
}
.login-form-box .form-group .login-form .form-icon{
    width: 24px;
    height: 24px;
    margin: auto;
    margin-left: 14px;
    margin-right: 10px;
}
.login-form-box .form-group .login-form label{
	padding: 5px 0;
    margin: auto 10px;
    min-width: 95px;
    line-height: 140%;
}
.login-form-box .form-group .login-form input,
.login-form-box .form-group .login-form select,
.login-form-box .form-group .login-form textarea{
	height: 100%;
    border: none !important;
    box-shadow: unset !important;
    border-radius: unset !important;
    text-align: left;
    padding: 0 5px;
    font-size: 13px;
    font-weight: 500;
    background: unset !important;
}
.login-form-box .form-group .form-control:hover,
.login-form-box .form-group .form-control:active,
.login-form-box .form-group .form-control:focus{
	background: unset !important;
}
.login-form-box .saved-account{
	font-size: 13px;
	color: #013d72;
}
.login-form-box .forgot-password{
	color: #220d4e;
    font-size: 13px;
    margin: auto;
}
.login-form-eyes{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    width: 50px;
    height: 100%;
    padding-bottom: 2px;
    cursor: pointer;
}
.login-form-eyes:before{
    /* content: "\f06e";
    font-family: 'icomoon' !important; */
    content: "\f341";
    font-family: bootstrap-icons !important;
    color: #8051e6;
}
.login-form-eyes.active:before{
    /* content: "\f070"; */
    content: "\f340";
}
.signup-form{
	background: #0d181e;
    border-radius: 10px;
    border: 1px solid #ffc771;
    box-shadow: 0 1px 4px #ffe48059;
    padding: 15px;
    max-width: 500px;
    margin: 15px auto;
    margin-top: 40px;
}
.signup-title h5{
	color: #fff0d5;
    text-shadow: 0 0 1px #ffd664;
    font-size: 13px;
}
.signup-box{
	padding: 10px 0;
}
.signup-box .form-group{
	position: relative;
}
.signup-box .form-group > img{
	width: 30px;
    height: 20px;
    margin: 10px;
    position: absolute;
    border-right: 1px solid #ffc771;
    padding: 1px;
    padding-right: 10px;
}
.signup-box .form-group input,
.signup-box .form-group select{
	border: 1px solid #ffc771;
    border-radius: 2px;
    height: 40px;
    font-size: 13px;
    padding-left: 50px;
    color: #fff;
	background: #091216;
	letter-spacing: 0.7px;
}
.btn-css4{
    display: block;
    color: #ffffff !important;
    font-size: 20px;
    font-weight: 600;
    background: #5b34b0 !important;
    border: none;
    border-radius: 8px;
    width: 100%;
    max-width: 340px;
    height: 45px;
    line-height: 45px;
    padding: 0 15px;
    text-align: center;
    transition: all 0.3s ease;
    outline: none !important;
    margin: auto;
}
.checked-account{
	padding-top: 10px;
}
.checked-account .ckbox_saved{
	display: flex;
	letter-spacing: 0.2px;
	margin: 0;
}
.checked-account .ckbox_saved input{
	height: 20px;
    margin-right: 10px;
}
.checked-account .ckbox_saved span{
	font-size: 12px;
    color: #444;
}
.checked-account .ckbox_saved font{
	padding: 0 8px;
    color: #f00;
}
.login-form-box .btn-css4,
.signup-form-box .btn-css4{
	margin-bottom: 10px;
    font-size: 16px;
    text-transform: uppercase;
    max-width: unset;
}
.btn-css4.styletwo{
    box-shadow: unset;
    background: #00c2ff !important;
    color: #fff !important;
    animation: fadeIn 0.7s backwards;
    animation-delay: 0.3s;
}
.btn-css4.stylethree{
    box-shadow: unset;
    background: #220d4e !important;
    color: #fff !important;
    animation: fadeIn 0.7s backwards;
    animation-delay: 0.3s;
}
.login-or-string{
    position: relative;
    display: flex;
    font-size: 14px;
    text-align: center;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.login-or-string:before,
.login-or-string:after{
    content: '';
    background: #eee;
    height: 1px;
    width: calc(50% - 20px);
}
/***************** Setting ******************/
.spfphoto-image{
	position: relative;
    display: flex;
    min-height: 180px;
    background: url(../resource/others/bg-appflyer-2.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}
.spfphoto-image img{
    width: 120px;
    height: 120px;
    padding: 10px;
    object-fit: cover;
    border-radius: 50%;
    margin: auto;
    background: #c3f1ff60;
    border: 3px solid #220d4e;
}
.site-pfphoto form{
	padding: 15px 20px;
}
.site-pfphoto form span{
	display: block;
    font-size: 14px;
    margin-bottom: 5px;
}
.site-pfphoto form input{
	width: 100%;
    margin-right: 5px;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 3px;
    color: #fff;
    font-size: 13px;
    padding: 7px 10px;
    height: 34px;
}
.site-pfphoto form button{
	margin-top: 15px;
}

.content-radio{
	display: flex;
	padding-left: 20px;
	padding-top: 3px;
}
.content-radio label {
    display: block;
    position: relative;
    padding-left: 25px;
	padding-right: 15px !important;
    cursor: pointer;
    font-size: 14px;
    user-select: none;
	margin-top: 7px;
	margin-right: 25px;
}
.content-radio label input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}
.content-radio label .checkmark {
	position: absolute;
    top: 0;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: #fff;
    border-radius: 50%;
    border: 1px solid #a6b7b4;
}
.content-radio label:hover input ~ .checkmark {
  background-color: #ccc;
}
.content-radio label input:checked ~ .checkmark {
  background-color: #0092ff;
  border: none;
}
.content-radio label .checkmark:after {
  content: "\e5ca";
    font-family: 'icomoon' !important;
    position: absolute;
    display: none;
    color: #fff;
    width: 19px;
    line-height: 20px;
    height: 20px;
    text-align: center;
}
.content-radio label input:checked ~ .checkmark:after {
  display: block;
}

/*********** Index2 **********/
.site-intro{
	position: relative;
	background: #fff3;
	overflow: hidden;
	display: grid;
    z-index: 1;
}
.cintro-slider{
	position: relative;
}
.cintro-profile{
	background: #fff;
	margin-top: auto;
    padding: 10px 5px;
	padding-bottom: 20px;
}
.cintro-user{
	display: flex;
    margin-bottom: 10px;
}
.cintro-user img{
	width: 45px;
    height: 45px;
    margin: auto 0;
    background: #f2f8ff;
    box-shadow: 0 1px 2px #0005;
    border-radius: 10px;
    padding: 5px;
}
.cintro-user span{
	font-size: 18px;
    font-family: 'Mont-600';
    text-shadow: 0 0 0 #0005;
    text-transform: capitalize;
    padding: 0 15px;
    margin: auto 0;
    color: #000;
}
.cindex-partner{
	padding: 10px 0;
    background: #fffa;
    max-width: 1200px;
    margin: auto;
}
.cpartner-nav{
	display: flex;
    padding: 2px;
    background: #edeeef;
    border: 1px solid #fff;
    box-shadow: 0 0 2px #0005;
    border-radius: 50px;
    width: calc(100% - 16px);
    margin: 5px 8px;
}
.cpartner-nav:before{
	content: '';
}
.cpartner-nav span{
	font-size: 14px;
    font-family: 'Mont-600';
    text-align: center;
    color: #444;
    text-shadow: 0 0 1px #5555;
	min-width: max-content;
    height: 35px;
    line-height: 35px;
    width: 100%;
    padding: 0 5px;
    border-radius: 50px;
    cursor: pointer;
}
.cpartner-nav span.active{
	background: linear-gradient(5deg, #26a9e0 0%, #1182ed 100%);
    box-shadow: 0 1px 3px #0004;
    color: #fff;
    text-shadow: 0 0 1px #fff5;
    animation: fadeIn 0.5s;
}
.cpartner-content{
	padding-top: 20px;
}
.cpartner-item{
	display: none;
}
.cpartner-item.active{
	display: block;
	animation: fadeIn 0.7s;
}
.cpartner-intro{
	display: grid;
	width: 100%;
	background: #fafafa;
    box-shadow: inset 0 1px 10px #0001;
}
.cpartner-video{
	position: relative;
    padding: 20px;
    width: 100%;
    max-width: 700px;
    margin: 0 auto;
}
.cpartner-video video{
	width: 100%;
    height: 100%;
    border-radius: 12px;
}
.cpartner-preview{
	width: 100%;
    padding: 0 5px;
    margin: auto;
    margin-bottom: 30px;
}
.cpartner-preview > h4{
	font-size: 24px;
    font-family: "Impact", Sans-serif;
    text-transform: capitalize;
    padding: 0 10px;
    text-align: center;
    margin-bottom: 15px;
}
.cpartner-pv-content{
	width: 100%;
}
.cpartner-pv-content img{
	width: 100%;
}
.cpartner-navigator{
	display: flex;
    max-width: 1000px;
    padding: 0 10px;
    margin: auto;
    margin-bottom: 10px;
    gap: 5px;
}
.cpartner-navigator.wrap{
	flex-wrap: wrap;
}
.cpartner-navigator a{
	position: relative;
    display: grid;
    border-radius: 10px;
    background: linear-gradient(0deg, #fafafa, #f3f5f7);
	box-shadow: 0 4px 2px #0002;
    width: calc(50% - 10px);
    padding: 10px 5px;
    margin: auto;
    margin-bottom: 5px;
} 
.cpartner-navigator a img{
	width: 45px;
    height: 50px;
    margin: auto;
    margin-bottom: 5px;
}
.cpartner-navigator a span{
	font-size: 14px;
    font-family: 'Mont-600';
    font-weight: 700;
    letter-spacing: -0.2px;
    width: 100%;
    text-align: center;
    color: #444;
    margin: auto;
    padding: 0 5px;
    text-shadow: unset !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
@media(max-width: 767px){
	.cpartner-preview > h4{
		font-size: 20px;
	}
	.cpartner-nav span,
	.cpartner-navigator.wrap a span{
		font-size: 12px;
		letter-spacing: -0.3px;
	}
}

/************* Rating ***********/
.css-star{
	display: flex;
	margin-right: 3px;
	cursor: pointer;
}
.css-star span{
	position: relative;
	display: flex;
}
.css-star span:before,
.css-star .half:after{
	display: flex;
    font-family: 'icomoon' !important;
    font-size: 12px;
    margin-right: 2px;
}
.css-star .none:before{
	content: "\f005";
	color: #ddd;
}
.css-star .star:before{
	content: "\f005";
	color: #fc0;
}
.css-star .half:before{
	content: "\f005";
	color: #ddd;
}
.css-star .half:after{
	position: absolute;
	content: "\f089";
	color: #fc0;
}
.spopmenu-rating{
	display: none;
    padding: 0 7px;
	padding-bottom: 10px;
}
.sreview-rating{
    display: inline-flex;
    width: calc(100% - 6px);
    background: #fff;
    border: 1px solid #e4ddf3;
    border-radius: 5px;
    padding: 4px 5px;
    margin: 5px 3px;
    transition: border-color 0.4s ease;
    cursor: pointer;
}
.sreview-rating.error{
	border-color: #ff6060;
}
.sreview-rating label{
	font-family: system-ui;
    font-size: 16px;
    margin: auto 0;
    padding: 0 10px;
    min-width: 100px;
}
.sreview-rating .css-star{
	height: unset;
	cursor: pointer;
}
.sreview-rating .css-star span{
    padding: 0 2px;
}
.sreview-rating .css-star span:before,
.sreview-rating .css-star .half:after{
	font-size: 20px;
}
.sreview-article{
	display: inline-grid;
    width: calc(100% - 6px);
    border-radius: 5px;
    margin: 5px 3px;
}
.sreview-article.active{
	position: fixed;
    display: flex;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    margin: 0;
    background: #0008;
    padding: 15px;
	animation: fadeIn 0.5s;
}
.sreview-outside{
	position: relative;
}
.sreview-article.active .sreview-outside{
	margin: auto;
    height: 65%;
	width: 100%;
    max-height: 500px;
	max-width: 450px;
    padding: 6px;
    background: #d5d5d5;
    box-shadow: 0 2px 15px #000a;
    border-radius: 8px;
}
.sreview-popup{
	position: relative;
    display: inline-grid;
    background: #fff;
	border: 1px solid #e4ddf3;
    border-radius: 6px;
    width: 100%;
	min-height: 42px;
    padding: 4px 5px;
	transition: border-color 0.4s ease;
}
.sreview-popup.error{
	border-color: #ff6060;
}
.sreview-outside:before{
	content: "\f107";
    font-family: 'icomoon' !important;
    position: absolute;
    right: 10px;
    top: 2px;
    font-size: 20px;
    color: #888;
    z-index: 1;
}
.sreview-article.active .sreview-outside:before{
	content: "\e5cd";
}
.sreview-popup span{
	display: none;
    font-size: 15px;
    font-family: system-ui;
    padding: 6px 10px;
    line-height: 150%;
    letter-spacing: -0.2px;
}
.sreview-popup span.sample-review{
	color: #555;
    font-style: italic;
}
.sreview-article.active .sreview-popup span.sample-review,
.sreview-article.view .sreview-popup span.sample-review{
	display: none;
}
.sreview-popup span.active{
	display: inline-block;
    position: relative;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: calc(100% - 10px);
    overflow: hidden;
}
.sreview-article.active .sreview-popup{
	margin: auto;
    height: 100%;
    padding: 5px 0;
    padding-bottom: 25px;
    overflow: auto;
}
.sreview-article.active .sreview-popup span{
	display: inline-block;
    padding: 10px 20px;
    white-space: unset;
    overflow: unset;
	width: 100%;
}
.sreview-article.active .sreview-popup span:not(:last-child){
	border-bottom: 1px solid #ddd;
}
.sreview-popup p{
    font-size: 13px;
    font-family: system-ui;
    padding: 4px 10px;
    line-height: 150%;
    min-height: 36px;
    align-content: center;
    color: #666;
    margin: 0;
}
.sreview-rating.view,
.sreview-article.view .sreview-popup,
.sreview-article.view{
	box-shadow: unset;
    padding: 0;
    margin: 0;
    margin-bottom: 5px;
    min-height: unset;
	width: 100%;
}
.sreview-rating.view label{
	font-size: 13px;
}
.sreview-article.view .sreview-outside:before{
	content: unset;
}
.site-readorder .spopmenu-rating.view,
#productload .spopmenu-rating{
	display: block;
}

.live-chat{
	position: fixed;
    right: 5px;
    bottom: 85px;
    animation: fadeinzoom 0.5s;
    z-index: 30;
}
.live-chat a{
	display: block;
    animation: ringbell 2s linear infinite;
}
.live-chat a:before{
	content: '';
    display: block;
    width: 60px;
    height: 60px;
    background: url(../images/chat-balloon.png) no-repeat;
    background-size: contain;
    background-position: center;
    margin: auto;
}

.react-notice{
	display: none;
    position: fixed;
    top: 10px;
    left: 0;
    width: calc(100% - 20px);
    margin: 0 10px;
    padding-bottom: 0;
    z-index: 9999;
}
.react-notice.active{
	display: block;
	animation: reactNotice 0.4s;
}
.react-notice.fadeOut{
	display: none;
	opacity: 0;
	animation: reactClosed 0.3s;
}
.react-notice .snotice-item{
    background: linear-gradient(180deg, #fff, #f3f5f7);
    box-shadow: inset 0 0 2px #0003;
    border: 1px solid #9c8fc2;
    overflow: hidden;
    transition: all 0.5s ease;
    margin: 0;
}
.react-notice .snotice-item:active{
	background: #fffb;
}
.react-notice .snotice-item:before{
	content: unset !important;
}
@keyframes reactNotice {
  0% { transform: translateY(-100%); opacity: 0; }
  100% { transform: translateY(0);opacity: 1; }
}
@keyframes reactClosed {
  0% { display: block; transform: translateY(0); opacity: 1; }
  99% { display: block; transform: translateY(-30px); opacity: 0; }
  100% { display: none; transform: translateY(-30px); opacity: 0; }
}

#chat-widget-container{
	overflow: unset !important;
	transform: translateY(-80px);
}
#chat-widget{
	transform: translateY(80px);
}

.signal2 {
    position: absolute;
    left: 0;
    background: url(../resource/Circle.gif) no-repeat center;
    background-size: contain;
    width: 18px;
    height: 18px;
    filter: hue-rotate(60deg);
}

/******** Mobulous ********/
.mobindex-main{
	padding-top: 25px;
	padding-bottom: 50px;
    background: url(../images/World.png), linear-gradient(0deg, #f8f8f8, #fafafa);
    background-position: center;
    background-repeat: repeat;
}
.mobindex-title{
	position: relative;
    padding: 15px;
    margin-bottom: 20px;
}
.mobindex-title:after{
	content: '';
    position: absolute;
    bottom: 0;
    left: calc(50% - 50px);
    height: 5px;
    width: 100px;
    background: #1695cc;
}
.mobindex-title h4{
	font-size: 23px;
    font-family: 'Mont-600';
    text-shadow: 0 0 1px #0002;
    color: #000;
    text-align: center;
}
.mobindex-title h4 strong{
	color: #26a9e1;
}
.mobslider-slider{
	position: relative;
	width: 100%;
	max-height: 70px;
	overflow: hidden;
	filter: drop-shadow(0 1px 5px #0003);
}
.mobslider-slider .owl-item{
	min-width: max-content;
	max-height: 80px;
}
.mobslider-slider .slide-item img{
	max-height: 70px;
}

a.nav-arrow{
    position: relative;
    color: #220d4e;
    border-bottom: 2px solid #220d4e;
    text-decoration: unset;
    line-height: 140%;
    font-weight: 600;
    padding: 5px 2px;
}
a.nav-arrow:after{
    content: "\f135";
    font-family: bootstrap-icons !important;
    font-size: 21px;
    position: absolute;
    top: calc(50% + 2px);
    right: -22px;
    transition: all 0.4s ease;
    transform: translateY(-50%);
}
a.nav-arrow:hover:after,
a.nav-arrow:active:after{
    right: -28px;
}
.banner-profile{
    position: relative;
    min-height: 240px;
    background: #230d4e url(../resource/others/bg-appflyer-2.jpg) no-repeat;
    background-size: cover;
    background-position: center;
}

.partner-box{
    display: grid;
    padding: 30px 15px;
    text-align: center;
    align-items: center;
    justify-content: center;
    border: 3px solid #220d4e;
    box-shadow: 8px 8px 0 0 var(--box-shadow-color);
    border-radius: 16px;
    margin-bottom: 25px;
}
.partner-box h4{
    font-size: 40px;
    color: #220d4e;
}
.partner-box span{
    font-size: 14px;
    color: #514b5f;
    padding: 0 10px;
}
.partner-box.blue{--box-shadow-color: #00C2FF;}
.partner-box.green{--box-shadow-color: #1EFFAE;}
.partner-box.yellow{--box-shadow-color: #FFD330;}
.partner-box.purple{--box-shadow-color: #A275FF;}