html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
*{
	box-sizing:border-box;
}
body {
	font-family: azo;
	color: #0f1841;
	font-size: 14px;
	font-weight: 400;
	line-height: normal;
}
html, body{
	height:100%;
}
@font-face {
    font-family: 'azo';
    src: url('../fonts/AzoSans-Regular.ttf') format('truetype');
	font-weight:400;
}
@font-face {
    font-family: 'azo';
    src: url('../fonts/AzoSans-Bold.ttf') format('truetype');
	font-weight:700;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
a{
	text-decoration:none;
	transition:all .3s ease-in;
	display:block;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
.no-pad{
	padding:0;
}
.flex{
	display:flex;
}
img{
	max-width:100%;
	display:block;
}
textarea,
input,
button {
	outline: none;
	font-family: azo;
}
*{
	box-sizing: border-box;
}
strong{
	font-weight:700;
}
h1{
	height: 0px;
	width: 0px;
	opacity: 0;
	overflow: hidden;
}
.container{
	width:640px;
	margin:0 auto;
}
.link-primary {
	background: #6163A5;
	border-radius: 50px;
	color: #fff;
	font-weight: 700;
	padding: 8px 16px;
	font-size: 12px;
}
button{
	cursor:pointer;
}
header {
	z-index: 10;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	background: #fff;
	border-bottom: 1px solid #EAEAEA;
}
header .container{
	align-items:center;
	height:100%;
	position:relative;
}
.top-searching {
	margin-left: auto;
	width: 32px;
	height: 32px;
}
.hamburgerBar {
	width: 25px;
	height: 25px;
	margin-right: auto;
	cursor: pointer;
}
.hamburgerBar span:after,
.hamburgerBar span:before,
.hamburgerBar span{
	display:block;
	height:3px;
	background:#000;
	border-radius:50px;
	width: 100%;
	transition:all ease-in .2s;
}
.hamburgerBar span{
	position:relative;
	margin-top:10px;
	transition:all ease-in .2s;
}
.hamburgerBar span:before{
	position:absolute;
	content:'';
	top: -7px;
}
.hamburgerBar span:after{
	position:absolute;
	content:'';
	bottom: -7px;
}
.hamburgerBar.closed span:before{
	transform: rotate(45deg);
	top:0;
}
.hamburgerBar.closed span:after{
	transform: rotate(-45deg);
	bottom:-3px;
}
.hamburgerBar.closed span{
	height:0px;
}
#main-content{
	margin-top:56px;
}
.btn-redeem {
	color: #fff;
	padding: 6px 15px;
	border: 2px solid #9b5600;
	font-family: azo;
	font-weight: 700;
	border-radius: 50px;
	cursor: pointer;
	border: 2px solid #D33882;
	background: linear-gradient(180deg, #EF509C 0%, #D93A86 48.44%, #EF509C 100%);
}
.brand{
	display:flex;
	width: 100%;
    justify-content: center;
}
.brand a{
	width:120px;
}
.brand a img{
	/*display:block;	
	filter: drop-shadow(0px 0px 6px #ff3eb7);*/
}
.nav-wrap {
	position: fixed;
	left: -40%;
	top: 0px;
	background-color: #fff;
	overflow-y:auto;
	height: 100vh;
	z-index: 100;
	width: 40%;
	transition: left ease-in .2s;
}
.nav-wrap.show{
	left:0;
}
.nav-wrap .navigation{
	padding:0 20px;
	margin-bottom:24px;
	margin-top:40px;
	list-style:none;
}
.nav-wrap .navigation li{
	font-size:16px;
	margin:8px 0;
}
.nav-wrap .navigation li a{
	color:#161616;
	display:block;
	padding:8px 10px;
	font-weight:700;
}
.nav-wrap .navigation li a img{
	display:inline-block;
	vertical-align:text-bottom;
	width:24px;
	margin-right:8px;
}
.nav-wrap .navigation li a.active,
.nav-wrap .navigation li a:hover{

	color:#EF509C;
	/*background: rgb(255,232,252);
	background: linear-gradient(90deg, rgba(255,232,252,1) 0%, rgba(255,255,255,1) 80%);*/
}
.nav-wrap .joinNav{
	padding:10px;
	background:#ff9ef3;
	border-top:2px solid #ff62e8;
}
.nav-wrap .joinNav button{
	background:transparent;
	border:none;
	cursor:pointer;
	width:240px;
}
.header-panel {
	flex-direction: row;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
}
.image-nav {
	flex-direction: row;
	padding: 20px 0;
	border-top: 1px solid #EAEAEA;
	border-bottom: 1px solid #EAEAEA;
}

#thumb-nav .thumb-circle {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-basis: calc(100%/4);
	text-align: center;
}

#thumb-nav .thumb-circle a {
	color: #303030;
}

#thumb-nav .thumb-circle a img {
	display: inline-block;
}

#thumb-nav .thumb-circle h3 {
	font-weight: 700;
	line-height: normal;
}

#thumb-nav .thumb-circle .home.active h3 {
	background: linear-gradient(180deg, #FE59B0 0%, #6163A5 54.86%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#thumb-nav .thumb-circle .gallery.active h3 {
	background: linear-gradient(180deg, #C0DF8F 0%, #9EC463 52.78%, #8E9F74 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#thumb-nav .kpop.active h3 {
	background: linear-gradient(180deg, #FFFF60 0%, #FFAC40 44.27%, #FFC84B 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

#thumb-nav .kdrama.active h3 {
	background: linear-gradient(180deg, #A5A7D1 0%, #6163A5 44.27%, #242870 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.closeNav {
	cursor: pointer;
	margin: 20px 0 0 30px;
}
.overlay {
	background: rgba(0,0,0,0.6);
	position: fixed;
	top: 0;
	left: 0;
	height: 0;
	width: 0;
	overflow: hidden;
	transition: all ease-in .1s;
}
.overlay.show{
	width:100%;
	height:100%;
}
footer{
	position:fixed;
	bottom:0;
	left:0;
	width:100%;
	background:#fff;
	box-shadow:0px 0px 4px #7c7c7c;
	height:65px;
}
footer .container{
	display:flex;
	height:100%;
	align-items:center;

}
footer .container a{
	display:block;
	width:100%;
	height: 100%;
	text-align:center;	
	color:#cdcdcd;
	position:relative;
	display: flex;
    flex-direction: column;
	justify-content: center;
}
footer .container a span{
	display:block;
	font-size:12px;
	line-height: 12px;
    margin-top: 10px;
	letter-spacing:1px;
	font-weight:500;
}
footer .container a .fa{
	font-size:20px;
}
footer .container a:after{
	content:'';
	position:absolute;
	background:#cdcdcd;
	width:1px;
	height:20px;
	right:0;
	top:22px;
}
footer .container a:last-child:after{
	width:0px;
}
footer .container a:hover,
footer .container a.active{
	color:#EF509C;
	background: rgb(255,211,250);
	background: linear-gradient(0deg, rgba(255,211,250,1) 0%, rgba(255,255,255,1) 100%);
}
#mainBody {
	height: 100%;
}
#mainBody .container {
	position: relative;
	height: 100%;
}
#middleSection{
	overflow:auto;
	height:100%;
	padding-bottom:30px;
}

#middleSection.center{
	display:flex;
	align-items:center;
	justify-content:center;
	height:100vh;
}
#middleSection::-webkit-scrollbar {
  width: 0px;
}
#middleSection::-webkit-scrollbar-track {
  background: #F1EBFF;
}
#middleSection::-webkit-scrollbar-thumb {
  background: #EF509C;
}
.vCenter{
	align-items:center;
	justify-content:center;
	height:100vh;
	width:100%;
}
.txtCopyright {
	position: absolute;
	bottom: 70px;
	width: 100%;
	text-align: center;
	font-weight: 400;
	color:#fff;
}
.quizCategory {
	flex:50%;
	padding:5px 10px;
}
.quizCategory:nth-child(3),
.quizCategory:nth-child(1){
	text-align:right;
}
.quizCategory img{
	width:180px;
	cursor:pointer;
	transition:all ease-in .2s;
}
.quizCategory img:hover{
	opacity:.8;
	-webkit-filter: drop-shadow(0px 0px 5px #ff0);
	filter: drop-shadow(0px 0px 5px #f00);
}
.quizCategoryWrap{
	display:flex;
	flex-wrap:wrap;
}
.popupWelcome {
	position: relative;
	width: 80%;
	background: #fff;
	border-radius: 24px;
	padding:24px 16px;
	text-align:center;
	margin-top:70px;
}
.popupWelcome .closeWelcome{
    position: absolute;
	top: 16px;
    right: 20px;
    color: #801d70;
	cursor:pointer;
}
.popupWelcome .closeWelcome:hover{
	color:#f00;
}
.popupWelcome h2{
	font-size:20px;
	font-weight:700;
	margin-top:12px;
	margin-bottom:8px;
}
.popupWelcome p{
	margin-bottom:18px;
}
.succes-club {
	position: relative;
	width: 100%;
	background: #fff;
	border-radius: 24px;
	padding: 24px 16px;
	margin-top:80px;
	text-align:center;	
}
.succes-club h2 {
	color: #EF509C;
	font-size: 20px;
	font-weight: 700;
	margin-bottom: 8px;
}
.btn-start {
	padding: 8px;
	color: #fff;
	width: 100%;
	font-weight: 700;
	border-radius: 50px;
	border: 2px solid #D33882;
	background: linear-gradient(180deg, #EF509C 0%, #D93A86 48.44%, #EF509C 100%);
}
.giftCardWrap{
	width:85%;
	margin:15px auto;
}
.giftCard{
	display:flex;
	align-items:center;
	background:#f7941d;
	border-radius:10px;
	padding:10px;
	margin-bottom:15px;
	border:2px solid #c35a17;
	box-shadow:inset 0 0 5px #fff;
}
.giftCard .giftCardThumb img{
	border-radius:8px;
	display:block;
	width:180px;
	border:2px solid #ffc527;
}
.giftCard .giftCardDesc{
	padding-left:20px;
	text-transform:uppercase;
	font-weight:700;
	width: 70%;
}
.giftCard .giftCardDesc h2{
	margin-bottom:12px;
	font-size:30px;
}
.giftCard .giftBtnRedeem{
	width:100%;
	margin-top:12px;
	background:#fff200;
	color:#000;
	border:0;
	padding:6px 0;
	cursor:pointer;
	text-transform:uppercase;
	font-family:azo;
	font-weight:700;
	font-size:22px;
	border-radius:8px;
	transition:all ease-in .2s;
	border:1px solid #fff200;
	box-shadow: inset 0px -1px 4px #f7941d;
}
.giftCard .giftBtnRedeem:hover{
	background: #fff539;
	border:1px solid #afa600;
}
.giftCard .giftBtnRedeem.disable{
	background: #dbdbdb;
	cursor:default;
	border:1px solid #afa600;
}

/*.infoAccountWrap{
	margin-top:80px;
}*/
.infoAccountCard {
	background: #fff;
	border-radius: 12px;
	position: relative;
	border: 1px solid #EAEAEA;
}

.infoAccountCard .account-list p{
	display:flex;
	padding:16px;
	font-size:16px;
	flex-direction:column;
	border-bottom: 1px solid #EAEAEA;
}
.infoAccountCard .account-list p:last-child {
	border-bottom:0;
}
.infoAccountCard span{
	color:#808080;
	margin-bottom:8px;
}
.infoAccountCard p strong{
	font-weight:700;
}
.infoAccountCard p strong.sttsActive{
	color:#4da400;
}

.infoAccountCard p strong.sttsInactive {
	color: #f7941d;
}
.btnStopSubs{
	position:relative;
	margin-bottom:-20px;
	left:0;
	text-align:center;
	width:100%;
}
.btnStop{
	color:#fff;
	font-weight:700;
	font-size:14px;
	border-radius:50px;
	padding: 8px 0px;
	width:95%;
	cursor:pointer;
	border: 2px solid #464992;
	background: linear-gradient(180deg, #6163A5 0%, #43458D 48.44%, #6163A5 100%);
}
.infoAccountGuest{
	position:relative;
}
.infoAccountGuest .btnStopSubs{
	bottom:-18px;
}
.infoRankWrap {
	width: 100%;
	border-radius: 8px;
	background: #fff;
	margin: 30px auto 20px auto;
	padding:16px;
}
.infoRankWrap h2{
	text-align:center;
	font-weight:700;
	font-size:20px;
	color:#EF509C;
	margin-bottom:10px;
}
.rank-list {
	border-bottom: 1px solid #ddd;
	padding:8px;
}
.rank-list:last-child {
	border-bottom: 0;
}
.rank-list h3{
	flex:50%;
	text-align:center;
	font-weight:700;
	font-size:14px;
}
.rank-list .rankCol {
	flex:50%;
	text-align:center;
	/*border-bottom:1px solid #fff;*/
}
.quizCard{
	padding:16px;
	margin-top:12px;
	min-height:100px;
	border-radius:20px;
	position:relative;
	background:#fff;
	text-align:center;
}
.quizQuestion{
	/*margin-bottom:20px;
	margin-top: 30px;*/
}
.quizQuestion strong{
	font-weight:700;
	font-size:20px;
	margin-top:8px;
	margin-bottom:8px;
	display:block;
	line-height:26px;
}
.quizAnswer{
	display:flex;
	flex-wrap:wrap;
	flex-direction:column;
}
.quizAnswer .quizOption{
	font-size:15px;
	line-height:16px;
	text-align:left;
	font-weight:700;
}
.quizOption input[type="radio"] {
	display: none;
}
.quizOption input[type="radio"]:checked + .quizLabel{
	border: 2px solid #EF509C;
}
.quizOption input[type="radio"]:checked + .quizLabel .circle-alpha{
	background: #EF509C;
}
.quizLabel {
	width: 100%;
	background: #F1EBFF;
	border: 2px solid #F1EBFF;
	border-radius: 50px;
	display: inline-block;
	padding: 3px 5px;
	cursor: pointer;
	margin: 2px 0;
	transition: all ease-in .2s;
	display:flex;
	align-items:center;
}
.quizLabel .choiceAlpha{
	
}
.choiceAlpha .circle-alpha {
	width: 26px;
	height: 26px;
	background: #A39EAF;
	color: #fff;
	display: inline-block;
	border-radius: 50%;
	text-align: center;
	line-height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.quizLabel .choiceText {
	display: inline-block;
	margin-left: 12px;
	padding-right: 10px
}
.btnAnswer {
	width: 100%;
	cursor: pointer;
	margin: 0 auto;
	border-radius: 50px;
	font-family: Azo;
	font-weight: 700;
	font-size: 20px;
	color:#fff;
	padding:8px;
	transition: all ease-in .2s;
	border: 2px solid #D33882;
	background: linear-gradient(180deg, #EF509C 0%, #D93A86 48.44%, #EF509C 100%);
}
.btnAnswer:hover{
	box-shadow: inset 0px 1px 9px #d478ae;
}
.timeCountdown{
	width: 100%;
	text-align:center;
	margin-top:12px;
}
.timeCountdown span{
	display:inline-block;
	padding:8px 14px 4px 14px;
	border-radius:50px;
	background:rgba(0,0,0,0.2);
	color:#fff;
	font-size:20px;
	font-weight:700;
}

.modal {
  display: none;
  position: fixed; 
  z-index: 10; 
  left: 0;
  top: 0;
  width: 100%; 
  height: 100%; 
  overflow: auto; 
  background-color: rgba(0,0,0,0.6); 
}
.modalWrap{
	width:100%;
	height:100%;
	display:flex;
	align-items:center;
}
.modal-content{
	min-width:40%;
	margin:0 auto;
	padding:24px 16px;
	border-radius:20px;
	position:relative;
}
.modal-content .closed{
	position:absolute;
	top: 10px;
    right: 15px;
	cursor:pointer;
}
.modal-content .closed:hover{
	color:#f00;
}
.quizModal{
	background: #fff;
	font-size:16px;
	text-align:center;
}
.quizModal h3{
	font-size:24px;
	font-weight:700;
	margin:15px 0;
}
.quizStartBtn{
	display:flex;
	margin-top:24px;
}
.quizStartBtn button{
	width: 50%;
    padding: 8px 8px;
	margin:5px;
	font-family:Azo;
	font-weight:700;
	cursor:pointer;
	border-radius:20px;
	border:2px solid #fff;
}
.quizStartBtn button.btnYes{
	color:#fff;
	border-radius: 50px;
	border: 2px solid #D33882;
	background: linear-gradient(180deg, #EF509C 0%, #D93A86 48.44%, #EF509C 100%);
}
.quizStartBtn button.btnNo{
	border:2px solid #D33882;
	color:#D33882;
	background:#fff;
}
.bg-true{
	position:absolute;
	top:0px;
	left:0;
}
.popupAnswer img {
	margin-bottom: 14px;
	width: 70px;
}
.popupAnswer p{
	font-size:20px;
	font-weight:700;
}
.popupAnswer button {
	margin-top: 16px;
	font-size: 12px;
	padding: 8px 16px;
	width: fit-content;
}
#trueAnswer .popupAnswer{
	background-image:url(../img/bg-true.png);
	background-position:top center;
	background-repeat:repeat-x;
	background-size:45%;
}

#timeOutAnswer .quizModal,
#falseAnswer .quizModal{
	background: rgb(186,84,173);
	background: linear-gradient(0deg, rgba(186,84,173,1) 0%, rgba(252,176,93,1) 50%, rgba(186,84,173,1) 100%);
}
#timeOutAnswer .popupAnswer h3,
#falseAnswer .popupAnswer h3{
	color:#f00;
}
#timeOutAnswer .popupAnswer{
	background-image:url(../img/icon-timer.png);
	background-position:top center;
	background-repeat:no-repeat;
	background-size:30%;
}

.resultModal{
	background: #fff;
}

.resultWrap{
	text-align:center;
	margin-top:20px;
}
.resultWrap h3{
	font-weight:700;
	font-size:20px;
	text-transform:uppercase;
	font-style:italic;
	line-height:30px;
}
.bonusText {
	font-size: 16px;
	margin-top: 20px;
	font-weight: 700;
	color: #DD3E89;
	padding-top:16px;
	border-top: 1px solid #EAEAEA;
}
.bonusText span{
	color:#000;
}
.bonusText p{
	font-size:12px;
	font-weight: 400;
	color:#929292;
}
.btnResult{
	width:100%;
	text-align:center;
}
.btnResult button{
	width:100%;
	font-family:azo;
	font-weight:700;
	font-size:16px;
	border:0;
	cursor:pointer;
	margin-top:10px;
	border-radius:20px;
	padding:8px 0;
}
.btnResult .claimBtn {
	color: #fff;
	border-radius: 50px;
	border: 2px solid #D33882;
	background: linear-gradient(180deg, #EF509C 0%, #D93A86 48.44%, #EF509C 100%);
}
.btnResult .noBtn{
	border: 2px solid #D33882;
	color:#D33882;
	background:#fff;
}
.tncCardWrap {
	width: 100%;
	margin-top: 80px;
	background:#fff;
	border-radius:24px;
	padding:24px 16px;
}
.tncCardWrap h2{
	font-weight:700;
	font-size:20px;
	margin-bottom:15px;
	color:#EF509C;
	text-align:center;
}
.tncCardWrap p{
	margin-bottom:15px;
}
.tncCardWrap a{
	color: #ff9416;
	font-weight:700;
}
.tncCardWrap .content{
	height:60vh;
	overflow-y:auto;
	padding-right:15px;
}
.tncCardWrap .content ol{
	list-style:decimal;
	padding-left:25px;
}
.content p,
.content ul,
.content ol {
	margin-top: 8px;
	margin-bottom: 8px;
}
.content{
	line-height:22px;
}
.content a {
	display: inline-block;
	color: #EF509C;
}
.content ul {
	list-style: disc;
	padding-left: 15px;
}
.tncCardWrap .content ol li{
	margin-bottom:10px;
	line-height:22px;
}
.tncCardWrap .content h3{
	font-weight:700;
	margin-left:10px;
}
.tncCardWrap .content::-webkit-scrollbar {
	width: 4px;
	border-radius:20px;
}
.tncCardWrap .content::-webkit-scrollbar-track {
	background: #fff;
}
.tncCardWrap .content::-webkit-scrollbar-thumb {
	background: #EF509C;
}
.bonusCardWrap{
	margin:80px auto 0;
	display:flex;
	flex-direction:column;
	align-items:center;
	padding:0 15px;
}
.bonusCardWrap .bonusBanner {
	margin-bottom:16px;
}
.bonusCardWrap .bonusBanner img{
	border-radius:10px;
	display:block;
}
.btnClaim{
	width:80%;
	margin:0 auto;
	text-align:center;
}
.btnClaim button{
	width:100%;
	background:#f26522;
	font-family:azo;
	font-size:18px;
	font-weight:700;
	color:#fff;
	border:0;
	padding:8px 0;
	border-radius:20px;
	cursor:pointer;
	text-transform:uppercase;
}

/* Style the tab */
.tab {
	overflow: hidden;
	/*border: 1px solid #ccc;
	background-color: #f1f1f1;*/
}

/* Style the buttons inside the tab */
.tab button {
	border: none;
	outline: none;
	cursor: pointer;
	padding: 10px 0px;
	transition: 0.3s;
	font-size: 17px;
	width:100%;
	transition:all ease .5s;
	border:1px solid #e7e7e7;
	border-radius:10px 10px 0 0;
	background: rgb(250,250,250);
	background: linear-gradient(0deg, rgba(250,250,250,1) 12%, rgba(236,236,236,1) 54%);
}

.tab button:hover,
.tab button.active {
	border: 1px solid #ff9cf3;
	border-bottom:0;
	background: rgb(250,250,250);
	background: linear-gradient(0deg, rgba(250,250,250,1) 12%, rgba(254,177,245,1) 54%);
}
.tabcontent {
	display: none;
	padding: 30px 25px 15px 25px;
	border: 1px solid #d9d7d7;
	border-top: none;
	background: #fff;
	border-radius: 0 0 10px 10px;
	animation: fadeEffect 1s;
}
@keyframes fadeEffect {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.winner-wrap{
	margin-top:30px;
}
.winner-wrap h2 {
	text-align: center;
	font-weight: 700;
	font-size: 26px;
	margin-bottom: 20px;
	-webkit-text-stroke: 0.5px #fff;
	-webkit-text-fill-color: #000;
}
.wining-list {
	border-bottom: 1px solid #EAEAEA;
}

.wining-list div{
	padding:8px 0;
	align-items:center;
	text-align:left;
}
.wining-list div:nth-child(3),
.wining-list div:nth-child(2){
	justify-content: center;
}

.countdown-card {
	background: #fff;
	text-align: center;
	margin: 15px auto 0;
	border-radius: 10px;
	padding: 15px 0 40px;
	position: relative;
}
#countdown {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	margin: 10px 0 15px;
	position: relative;
	font-size: 40px;
	text-align: center;
	letter-spacing: -3px;
}
.banner-leaderboard {
	width:100%;
	display:block;
}

.position {
	display: inline-block;
	height: 55px;
	line-height: 60px;
	overflow: hidden;
	position: relative;
	width: 1.05em;
}

.digit {
	position: absolute;
	display: block;
	width: 1em;
	background-color: #444;
	border-radius: 6px;
	text-align: center;
	color: #fff;
	letter-spacing: -1px;
}

.digit.static {
	height:100%;
	box-shadow: 1px 1px 1px rgba(4, 4, 4, 0.35);
	background-image: linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
	background-image: -o-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
	background-image: -moz-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
	background-image: -webkit-linear-gradient(bottom, #3A3A3A 50%, #444444 50%);
	background-image: -webkit-gradient( linear, left bottom, left top, color-stop(0.5, #3A3A3A), color-stop(0.5, #444444) );
}

.countDiv {
	display: inline-block;
	width: 16px;
	height: 1.6em;
	position: relative;
}

.countDiv:before,
.countDiv:after {
	position: absolute;
	width: 5px;
	height: 5px;
	background-color: #444;
	border-radius: 50%;
	left: 50%;
	margin-left: -3px;
	top: 0.5em;
	box-shadow: 1px 1px 1px rgba(4, 4, 4, 0.5);
	content: '';
}

.countDiv:after {
	top: 0.9em;
}
.name-cd{
	display:block;
	letter-spacing:0;
	font-size:12px;
	margin-top:6px;
	text-transform:uppercase;
}

.countdownHolder .count-cd{
	margin:0 10px;
}
.countdown-card h3 {
	font-size: 24px;
	font-weight: 700;
	margin-top: 10px;
	margin-bottom: 18px;
}
.ewallet-saldo {
	font-size: 24px;
	margin-top: 15px;
}
.btn-poin-ct {
	border: 2px solid #9b5600;
	text-transform: uppercase;
	font-family: azo;
	font-weight: 700;
	font-size: 16px;
	border-radius: 20px;
	padding: 8px 25px 4px;
	width: 250px;
	cursor: pointer;
	background: rgb(255,206,109);
	background: linear-gradient(0deg, #ffff8d 0%, #fcb05d 50%, #ffff8d 100%);
}
/*button:disabled,
button[disabled] {
	background: linear-gradient(0deg, #b5b5b5 0%, #858585 50%, #b5b5b5 100%);
	cursor: context-menu;
	border: 2px solid #6f6f6f;
}*/
.btn-poin-ct span{
	display:inline-block;
	background:#ffd091;
	padding:4px 15px 1px;
	width:100%;
}
.ewallet-saldo-wrap{
	position:absolute;
	bottom:-17px;
	width:100%;
	text-align:center;
}
.img-popup{
	margin-bottom:24px;
}
.quiz-progress {
	width: 100%;
	display: flex;
	align-items: center;
}
.quiz-progress span{
	background: #fff;
    border-radius: 20px;
    height: 5px;
    width: 100%;
	margin:0 1px;
}
.quiz-progress .quizCheck{
	background:#6163A5;
}
.quiz-progress-bar {
	background: #6163A5;
	border-radius: 50px;
	height: 16px;
}
.quiz-kfun-wrap {
	margin-top: 50px;
}
#quizBody {
	margin: 80px auto 20px;
	width:95%;
	position:relative;
}
#divBtnAnswer{
	margin-top:16px;
}
.modalTitle {
	position: relative;
	font-size: 20px;
	font-weight:700;
	text-align:center;
}
.correction {
	border: 2px solid #E3D9FA;
	background: #F1EBFF;
	border-radius: 10px;
	text-align: left;
}
.correction p{
	font-size:16px;
	font-weight:700;
	display:flex;
	padding:12px;
}
.correction .ans-correct{
	color:#2A9D90;
	border-bottom: 2px solid #E3D9FA;
}
.correction .ans-wrong {
	color: #F04249;
}
.correction p span{
	margin-left:auto;
}
.total-point-wrap {
	background: #6163A5;
	color: #fff;
	font-size: 16px;
	font-weight: 600;
	border-radius: 10px;
	margin-top:12px;
	padding:12px;
}
.total-point-wrap p{
	text-align:left;
	display:flex;
}
.total-point-wrap p span{
	margin-left:auto;
}

.infoRewarWrap{
	margin-top:80px;
}
.infoTotalPoints{
	border-radius:8px;
	background:#fff;
	padding:16px;
	display:flex;
	line-height:normal;
	margin-top:15px;
}
.infoTotalPoints strong{
	margin-left:auto;
}
.infoReward {
	margin-top:16px;
	margin-bottom:20px;
	background: #fff;
	border-radius: 8px;
	padding: 16px;
}
.stopMembership a{
	color: #B5B5B5;
}
#quizImg img{
	display:block;
}

#x-unsubscribe-button {
	color: #B5B5B5;
	text-decoration:underline;
}

.notification-wrap{
	margin-top:80px;
	background:#fff;
	border-radius:24px;
	padding:24px 16px;
}
.notification-wrap h2{
	text-align:center;
	color:#EF509C;
	font-weight:700;
	font-size: 20px;
}
.notification-wrap .section__content{
	text-align:center;
	margin-top:24px;
	line-height: 24px;
}
.notification-wrap .section__content a,
.notification-wrap .section__content img{
	display:inline-block;
}
.notification-wrap .section__content a{
	color: #EF509C;
}
.notification-wrap .error-message{
	margin-top:24px;
}
.notification-wrap .error-message a{
	color:#EF509C;
	font-weight:700;
}
.top-up-now {
	padding:8px;
	width:100%;
	color: #fff;
	border-radius: 50px;
	border: 2px solid #D33882;
	background: linear-gradient(180deg, #EF509C 0%, #D93A86 48.44%, #EF509C 100%);
}
.no-time {
	padding: 8px;
	width: 100%;
	color: #EF509C;
	border-radius: 50px;
	font-weight:700;
	background:#fff;
	border: 2px solid #EF509C;
}
.oops-text {
	font-size: 14px;
}
.oops-text h2 {
	font-size: 20px;
	font-weight: 700;
	margin-top: 16px;
}
.oops-text .btn-answers__wrap {
	margin-top:16px;
}
.oops-text .btn-answers__wrap p{
	margin:8px 0;
}
.lp-bg {
	margin: 0 auto;
	display: block;
	
}
.lp-wrap{
	text-align:center;
	padding-bottom:60px;
}
.lp-wrap a{
	display:block;
}
.btnLpJoin {
	position: fixed;
	bottom: 0;
	left:0;
	width:100%;
	text-align:center;
}
.marked {
	font-weight: 700;
	background: #d6ceff;
}
.rewards.correction{
	margin:18px 0;
}
.rewards.correction p {
	flex-direction: column;
}
.rewards.correction p span{
	margin-left: unset;
	color:#C2C2C2;
	font-weight:400;
	font-size:14px;
}
.correction.rewards .ans-correct {
	color: #333;
}
.btn-next-question{
	margin-top:15px;
}
.card-sort-content {
	padding: 20px 12px;
	border-bottom: 1px solid #EAEAEA;
}
.card-sort-content .list-content {
	margin-bottom: 16px;
}

.card-name {
	align-items: center;
	margin-bottom: 16px;
}

.card-name .link-primary {
	margin-left: auto;
}

.card-name h2 {
	font-weight: 700;
	font-size: 16px;
	color: #161616;
}

.img-content-wrap {
	overflow: hidden;
	border-radius: 12px;
	position: relative;
	margin-bottom: 8px;
}

.content-type {
	position: absolute;
	left: 0;
	top: 0;
	color: #fff;
	font-weight: 700;
	padding: 6px 8px;
	justify-content: center;
	border-radius: 0px 0px 12px 0px;
	background: #EF509C;
}

.content-timing {
	position: absolute;
	right: 10px;
	bottom: 8px;
	color: #fff;
	font-size: 12px;
	padding: 4px 8px;
	border-radius: 20px;
	background: rgba(0,0,0,0.5);
}

.title-content {
	font-weight: 700;
	color: #161616;
	line-height: 20px;
	letter-spacing: 0.56px;
	text-transform: uppercase;
}

.content-view {
	display: block;
	color: #8D8D8D;
	font-size: 12px;
}

#banner {
	position: relative;
}

#banner .item img {
	width: 100%;
}

#banner .slick-arrow {
	position: absolute;
	top: 50%;
	margin-top: -26px;
	z-index: 5;
}

#banner .next-arr {
	right: 0;
}

#banner .prev-arr {
	left: 0;
}

.img-content-wrap img {
	width: 100%;
}

.gallery-wrap {
	padding: 20px 12px;
}

.gallery-half a img,
.gallery-full a img {
	width: 100%;
	border-radius: 12px;
}

.gallery-half,
.gallery-full {
	padding-bottom: 16px;
}

.gallery-half .gallery-thumb {
	padding-left: 8px;
    padding-right: 8px;
    flex-basis: calc(100%/2);
}
.gallery-full .gallery-img,
.gallery-thumb .gallery-img {
	height: 220px;
	width: 100%;
	border-radius:12px;
	background-size: cover;
	background-position: center;
}
.gallery-half .gallery-thumb:first-child {
	padding-left: 0;
}

.gallery-half .gallery-thumb:last-child {
	padding-right: 0;
}
.fancybox__footer,
.fancybox__toolbar__column .f-button:nth-child(4),
.fancybox__toolbar__column .f-button:nth-child(3),
.fancybox__toolbar__column .f-button:nth-child(2),
.fancybox__toolbar__column .f-button:nth-child(1) {
	display: none;
}


.fancybox-infobar,
.fancybox-toolbar .fancybox-button--thumbs,
.fancybox-toolbar .fancybox-button--play {
	display: none;
}

.my-account{
	background-image:url(../img/assets/bg-pattern.png);
	background-position:bottom center;
	background-repeat:no-repeat;
	background-color:#FAFAFA;
	background-size:cover;
	min-height:100vh;
}
.other-page{
	padding:24px 15px 0;
}
.other-page h2 {
	text-align: center;
	font-size: 16px;
	font-weight: 700;
	margin-bottom:16px;
	text-transform:uppercase;
}
.invite-card {
	margin-top:16px;
	border-radius: 12px;
	border: 1px solid #EAEAEA;
	background: #FFF;
	display:flex;
	padding:16px;
	align-items:center;
}
.invite-card h3{
	font-weight:700;
	color:#6163A5;
	margin-bottom:8px;
}
.btn-share-acc{
	margin-left:auto;
}
.btn-share-acc button{
	border-radius: 50px;
	border: 1px solid #6163A5;
	color: #6163A5;
	font-size:12px;
	padding:8px 16px;
	display:flex;
	flex-direction:row;
	align-items:center;
}
.btn-share-acc img{
	margin-left:4px;
}

.content ol{
	list-style:decimal;
	margin-left:15px;
}
.content ol li{
	margin-bottom:15px;
	line-height:20px
}

.btn-normal {
	display: block;
	border-radius: 200px;
	border: 1px solid #EAEAEA;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	color: #6263A7;
	justify-content:center;
	margin-top:10px;
}
.accordion-card {
	border-radius: 12px;
	border: 1px solid #EAEAEA;
	margin-bottom:16px;
}
.accordion-card h3{
	display:flex;
	align-items:center;
	padding:16px;
	font-weight:700;
	cursor:pointer;
	text-transform:uppercase;
	
}
.accordion-card h3 .img-arr{
	margin-left:auto;
}
.accordion-card .content{
	color:#595959;
	line-height:20px;
	padding:12px 16px;
	display:none;
}
.accordion-card h3.active{
	border-bottom: 1px solid #EAEAEA;
}
.accordion-card h3.active  .img-arr{
	transform: rotate(180deg) translateY(0%);
	transform-origin: center;
}
.accordion-card .content p{
	margin:8px 0;
}

.modal-wrap {
	background: rgba(0,0,0,.7);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;
}
.modal-body{
	min-width:328px;
	max-width:328px;
	background:#fff;
	border-radius:24px;
	padding:16px;
}
.headModal {
	color: #161616;
	font-size: 20px;
	font-weight: 700;
	text-align:center;
	margin-top:12px;
}
.modal-middle.center{
	text-align:center;
}
.modal-middle {
	color: #343434;
	font-size: 16px;
	padding:16px 0;
	line-height:normal;
}
.modal-btn{
	display:flex;
	justify-content:center;
	align-items:center;
	flex-direction:column;
}
.modal-btn button{
	padding:12px 16px;
	border-radius:50px;
	font-weight:700;
	border:0;
	outline:none;
	width:100%;
	margin:4px 0;
	letter-spacing:1px;
	text-transform:uppercase;
}
.modal-btn .btn-primary{
	background: #6163A5;
	color:#fff;
}
#desktopBlock {
	background-image: url(/Content/KCLUB/img/assets/desk-bg.png);
	background-position:center;
	background-repeat:no-repeat;
	background-size:70%;
	background-color: #FFECDE;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 999;
	display: flex;
	align-items: center;
	justify-content: center;

}

/*Style for language*/
.language-wrap {
	margin-left: auto;
	right: 0;
	top: 20px;
	height: 29px;
	width: 29px;
	cursor: pointer;
	z-index: 10;
}

.language {
	background: #fff;
	border-radius: 20px;
	padding: 2px;
	box-shadow: 0px 0px 5px 1px #6f6e6e;
}

.language ul {
	margin-top: 6px;
	display: none;
}

.language ul li {
	height: 25px;
}

.language-select {
	display: none;
}
#thumb-nav{
	position:sticky;
	top:56px;
	left:0;
	z-index:5;
	background:#fff;
}

.lucky-wheel-wrap{
	background-image:url(/Content/KCLUB/img/revamp/bg.svg);
	background-position:center;
	background-repeat:no-repeat;
	background-size:cover;
}
.title-lucky{
	text-align:center;
	padding-top:8px;
}
.title-lucky img{
	display:inline-block;
	width:350px;
}
.ticket{
	color:#fff;
	text-align:center;
	display:flex;
	align-items:center;
	justify-content:center;
}
.ticket span{
	margin-left: 12px;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 1px;
}

.lucky-wheel-frame{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	position:relative;
	margin-top:24px;
}

.btn-spin-wrap {
	display: flex;
	padding:24px 0;
	align-items: center;
	justify-content: center;
}
.btn-spin {
	cursor: pointer;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
	text-transform: uppercase;
	border-radius: 200px;
	border: 2px solid #B5286B;
	padding: 12px 8px;
	width: 80%;
	text-align: center;
	background: linear-gradient(180deg, #EF509C 0%, #D93A86 48.44%, #EF509C 100%);
}
.btn-spin[disabled] {
	border: 2px solid #939092;
	background: linear-gradient(180deg, #C9C9C9 0%, #A19EA0 48.44%, #C9C9C9 100%);
}
.btn-spin img{
	margin-left:12px;
}
.spin-arrow{
	position:absolute;
	top:50%;
	margin-top:-40px;
	left:-20px;
}
.spin-arrow img{
	width:80px;
}







@media (max-width: 1024px) {
	#desktopBlock {
		display: none;
	}
}
@media (max-width: 767px) {
	.container{
		width:100%;
	}
	
}

@media (max-width: 480px) {
	/*.lucky-wheel-wrap {
		height: 100vh;
	}*/
	.gallery-half, .gallery-full{
		padding-bottom:8px;
	}
	.gallery-half .gallery-thumb{
		padding-left:4px;
		padding-right: 4px;
	}
	.gallery-half a img, .gallery-full a img{
		border-radius: 8px;
	}
	.nav-wrap {
		left: -80%;
		width: 80%;
	}
	.language-wrap {
		top: 15px;
		right: 15px;
	}
}
@media only screen and (max-width: 375px) {
	
}

@media (max-width: 360px) {

	#countdown {
		font-size: 22px;
	}
	.position {
		height: 32px;
		line-height: 36px;
	}
}
@media (max-width: 320px) {
	#thumb-nav .thumb-circle h3{
		font-size:10px;
	}
	.link-primary {
		padding: 8px 10px;
		font-size: 10px;
	}
	.nav-wrap .navigation{
		padding-right:0px;
		padding-left:14px;
	}
	.nav-wrap .navigation li a {
		padding: 5px 0 5px 0px
	}
	.closeNav {
		margin: 20px 0 0 14px;
	}
	.nav-wrap .navigation li a img {
		margin-right: 4px;
	}
}
@media only screen and (device-width: 600px) {
	
}
@media only screen and (device-width: 768px) {
	
}
@media screen and (min-width: 1280px) {
	.popupWelcome{
		width:45%;
	}
	.quizCategory img{
		width:160px;
	}
}
@media screen and (min-width: 1500px) {
	.popupWelcome{
		width:62%;
	}
}
@media only screen and (device-width: 1920px) {
	.popupWelcome{
		width:88%;
	}
	.quizCategory img{
		width:220px;
	}
}