.floating-balloon {
	position: absolute;
	height: 30vh;
	width: auto;
	object-fit: contain;
	z-index: -1;
}

.floatingBalloon-container {
	position: fixed;
	background: transparent;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -999;
}

.with-text-border {
	text-shadow:
		-2px -2px 0px var(--edgeColor),
		-1px -2px 0px var(--edgeColor),
		0px -2px 0px var(--edgeColor),
		1px -2px 0px var(--edgeColor),
		2px -2px 0px var(--edgeColor),
		2px -1px 0px var(--edgeColor),
		2px 0px 0px var(--edgeColor),
		2px 1px 0px var(--edgeColor),
		2px 2px 0px var(--edgeColor),
		1px 2px 0px var(--edgeColor),
		0px 2px 0px var(--edgeColor),
		-1px 2px 0px var(--edgeColor),
		-2px 2px 0px var(--edgeColor),
		-2px 1px 0px var(--edgeColor),
		-2px 0px 0px var(--edgeColor),
		-2px -1px 0px var(--edgeColor) !important;
}

/* ---- click button animation ----- */
.menuBtn .home-btn,
.menuBtn .speaker-btn,
.menuBtn .mute-btn,
.menuBtn .bonus-btn,
.menuBtn .rule-btn,
.cnvrsn-btn,
#bonusContainerPopUp #closeBonusPop,
#scratchTimeContainerPopUp #closeScratchTimePop,
.gameplay-con .rules-btn,
#ruleContainerPopUp #closeRulePop,
#scratchWinContainerPopUp #closeScratchWinsPop,
.confirmSratchWin-Btn {
	transition: transform .1s ease-in-out;
}

.menuBtn .home-btn:active,
.menuBtn .speaker-btn:active,
.menuBtn .mute-btn:active,
.menuBtn .bonus-btn:active,
.menuBtn .rule-btn:active,
.cnvrsn-btn:active,
#bonusContainerPopUp #closeBonusPop:active,
#scratchTimeContainerPopUp #closeScratchTimePop:active,
.gameplay-con .rules-btn:active,
#ruleContainerPopUp #closeRulePop:active,
#scratchWinContainerPopUp #closeScratchWinsPop:active,
.confirmSratchWin-Btn:active {
	transform: scale(0.9);
}

.menuBtn .home-btn::after,
.menuBtn .speaker-btn::after,
.menuBtn .mute-btn::after,
.menuBtn .bonus-btn::after,
.menuBtn .rule-btn::after,
.cnvrsn-btn::after,
#bonusContainerPopUp #closeBonusPop::after,
#scratchTimeContainerPopUp #closeScratchTimePop::after,
.gameplay-con .rules-btn::after,
#ruleContainerPopUp #closeRulePop::after,
#scratchWinContainerPopUp #closeScratchWinsPop::after,
.confirmSratchWin-Btn::after {
	transform: scale(1);
}

/* -----------------Scratch box --------------------- */
.coin-scratch {
	height: auto;
	width: 100px;
	pointer-events: none;
	position: absolute;
	/* Position the cursor relative to its container */
	z-index: 9999;
	opacity: 0;
	/* Initially hide the cursor */
	transition: opacity 0.1s ease-in-out;
}

#canvasScratch {
	cursor: grabbing !important;
	width: 100%;
}

/* --- Scratch  win pop up ------ */
#scratchWinContainerPopUp {
	position: fixed;
	top: 0;
	left: 0;
	display: none;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	z-index: 999;
	background: rgb(0 0 0 / 80%);
}

#scratchWinContainerPopUp .scratchWinContainerPopUp-overlay {
	position: absolute;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	z-index: 999;
	display: flex;
	justify-content: center;
	align-items: center;
	transform: scale(0);
	transition: all 0.3s ease-in;
}

#scratchWinContainerPopUp .scratchWinContainerPopUp-overlay::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background-image: url(../images/popup/light-circle.png);
	background-position: center;
	background-size: contain;
	background-repeat: no-repeat;
	width: 45vw;
	height: 86vh;
	z-index: -1;
	opacity: 0;
	pointer-events: none;
	animation: rotateLight 10s linear infinite;
}

.show.scratchWinContainerPopUp-overlay.show::before {
	opacity: 0.3 !important;
	transition: all 0.3s ease-in;
}

@keyframes rotateLight {
	from {
		transform: translate(-50%, -50%) rotate(0deg);
	}

	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

#scratchWinContainerPopUp .scratchWinInfoContainer {
	position: relative;
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    width: 22vw;
    height: 50vh;
    transition: all 0.3s ease-in;
    display: flex;
    flex-direction: column;
    align-content: center;
    align-items: center;
    justify-content: flex-end;
    padding-bottom: 5rem;
    /* z-index: 2; */
    /* margin-top: -30%;*/
}


#scratchWinContainerPopUp .scratchRewardImg {
	width: 28%;
}

#scratchWinContainerPopUp p.mb-0.scratchWin-prize {
	text-shadow: -4px -4px 0px #f8f6f6, -3px -4px 0px #f8f6f6, -2px -4px 0px #f8f6f6, -1px -4px 0px #f8f6f6, 0px -4px 0px #f8f6f6, 1px -4px 0px #f8f6f6, 2px -4px 0px #f8f6f6, 3px -4px 0px #f8f6f6, 4px -4px 0px #f8f6f6, 4px -3px 0px #f8f6f6, 4px -2px 0px #f8f6f6, 4px -1px 0px #f8f6f6, 4px 0px 0px #f8f6f6, 4px 1px 0px #f8f6f6, 4px 2px 0px #f8f6f6, 4px 3px 0px #f8f6f6, 4px 4px 0px #f8f6f6, 3px 4px 0px #f8f6f6, 2px 4px 0px #f8f6f6, 1px 4px 0px #f8f6f6, 0px 4px 0px #f8f6f6, -1px 4px 0px #f8f6f6, -2px 4px 0px #f8f6f6, -3px 4px 0px #f8f6f6, -4px 4px 0px #f8f6f6, -4px 3px 0px #f8f6f6, -4px 2px 0px #f8f6f6, -4px 1px 0px #f8f6f6, -4px 0px 0px #f8f6f6, -4px -1px 0px #f8f6f6, -4px -2px 0px #f8f6f6, -4px -3px 0px #f8f6f6 !important;
    font-size: 55px;
    font-weight: 700;
    color: #771519;
    filter: drop-shadow(0px 0px 3px rgb(109 28 28 / 85%));
	/* margin-left: 16px; */
	position: relative;
    top: 15px;
}

#scratchWinContainerPopUp .confirmSratchWin-Btn {
    height: auto;
    width: fit-content;
    position: absolute;
    cursor: pointer;
    bottom: -45px;
    left: 49%;
    transform: translate(-50%, -50%);
}

#scratchWinContainerPopUp .confirmSratchWin-Btn img#confirmSratchWin {
	width: 200px;
}

#scratchWinContainerPopUp .confirmSratchWin-Btn p {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 20px;
	font-weight: 600;
	color: #fff;
	text-shadow: 0px 0px 10px rgb(109 28 28);
}

.ruleElement_flag_left {
	position: absolute;
    left: -107px;
    z-index: -1;
    top: 139px;
    width: 60%;
}

.ruleElement_flag_right {
    position: absolute;
    right: -95px;
    top: 138px;
    width: 53%;
    z-index: -1;
}

/* ------------------Bonus description -------------------- */

/* ----------------rules pop up btn---------------------- */

.gameplay-con .rules-btn {
	position: relative;
	width: 45%;
	/* margin-top: 10px; */
	cursor: pointer;
	margin: 0px auto 0px auto;
}

.gameplay-con .rules-btn img.rulesBtn {
	width: 100%;
}

.gameplay-con .rules-btn .rulesInfo {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.gameplay-con .rules-btn img.rules-ico {
	height: 32px;
}

.gameplay-con .rules-btn img.rules-ico {
	height: 41px;
}

.gameplay-con .rules-btn .rulesInfo p {
	font-size: 22px;
	font-weight: 600;
	text-shadow:
		-1px -1px 0px #f5c6ce,
		0px -1px 0px #f5c6ce,
		1px -1px 0px #f5c6ce,
		1px 0px 0px #f5c6ce,
		1px 1px 0px #f5c6ce,
		0px 1px 0px #f5c6ce,
		-1px 1px 0px #f5c6ce,
		-1px 0px 0px #f5c6ce !important;
	color: #a42a3c;

}

/* --------------- rules pop up --------------------*/
#ruleContainerPopUp {
	position: fixed;
	height: 100vh;
	width: 100vw;
	top: 0;
	left: 0;
	z-index: 999;
	display: none;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	background: rgb(0 0 0 / 80%);
}

#ruleContainerPopUp .ruleContainer-Outer {
	position: relative;
	width: 50%;
	height: 60vh;
	border-radius: 30px;
}

#ruleContainerPopUp .ruleContainer-Inner {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 30px;
    background: #f55812;
    padding: 5px;
}

#ruleContainerPopUp .ruleContainer-Inner::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 99%;
	height: 99%;
	border-radius: 30px;
	border: 1px solid transparent;
	background: linear-gradient(to bottom, #ffffff, #ffffff);
	z-index: 1;
	overflow: hidden;
}

#ruleContainerPopUp .ruleContainer-details {
    position: relative;
    z-index: 2;
    color: #5f3939;
    font-weight: 600;
    height: calc(100% - 0rem);
    width: 100%;
    padding: 5rem;
    overflow-x: hidden;
    overflow-y: scroll;
    background: #f8f7ea;
    border-radius: 30px;
	direction: rtl;
}

.ruleContainer-details::-webkit-scrollbar {
	width: 5px;

}

.ruleContainer-details::-webkit-scrollbar-track {
	box-shadow: inset 0 0 5px transparent;
	border-radius: 0px;
}

.ruleContainer-details::-webkit-scrollbar-thumb {
	background: #8c8c8c;
	border-radius: 15px;
}

.ruleContainer-details p {
	direction: ltr;
	font-size: 16px;
}

.ruleContainer-details p.small-title {
	font-weight: 700;
	color: #5f3939;
	font-size: 18px;
}

.activities-con {
	padding: 1rem 0;
}

.text-indent-1rem {
	text-indent: 1rem;
}

.text-indent-05rem {
	text-indent: 0.5rem;
}

/* #ruleContainerPopUp #closeRulePop {
  position: absolute;
  top: -3rem;
  right: -4rem;
  font-size: 38px;
  z-index: 3;
  color: #cecece;
  height: 60px;
  width: 60px;
  border-radius: 100%;
  overflow: hidden;
  border: 2px solid #cecece;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
} */

#ruleContainerPopUp img.ruleLabelPop {
    position: absolute;
    top: -8%;
    left: 50%;
    transform: translate(-50%, 0%);
    height: 90px;
    width: auto;
    z-index: 4;
}

#ruleContainerPopUp img.ruleElement-flower {
	height: 182px;
	position: absolute;
	bottom: -3rem;
	right: -5rem;
	z-index: 3;
}
#scratchWinContainerPopUp img.ruleElement-flower {
	height: 182px;
    position: absolute;
    bottom: 4rem;
    right: -4rem;
    z-index: 0;
}

/* --- bonus modal ------ */
#bonusContainerPopUp,
#scratchTimeContainerPopUp {
	position: fixed;
	height: 100vh;
	width: 100vw;
	top: 0;
	left: 0;
	z-index: 999;
	display: none;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	background: rgb(0 0 0 / 80%);
}

#bonusContainerPopUp .bonusContainer-Outer,
#scratchTimeContainerPopUp .scratchTimeContainer-Outer {
	position: relative;
	width: 29%;
	height: calc(100% - 27rem);
	border-radius: 30px;
	border: solid #ffae00;
	padding: 0.5rem;
}

#scratchTimeContainerPopUp .scratchTimeContainer-Outer {
	height: 30%!important;
}

#bonusContainerPopUp .bonusContainer-Inner,
#scratchTimeContainerPopUp .scratchTimeContainer-Inner {
	position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    border-radius: 30px;
    background: #ff0000;
}

#bonusContainerPopUp .bonusContainer-Inner::after,
#scratchTimeContainerPopUp .scratchTimeContainer-Inner::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 98.5%;
	height: 98.5%;
	border-radius: 30px;
	border: 2px solid transparent;
	/*background: url(../images/pop-bg.jpg);
	background-position: top center;
	background-repeat: no-repeat;
	background-size: cover;*/
	z-index: 1;
	overflow: hidden;
	background-color: #ffffff;
}

#bonusContainerPopUp #closeBonusPop,
#scratchTimeContainerPopUp #closeScratchTimePop,
#ruleContainerPopUp #closeRulePop,
#scratchWinContainerPopUp #closeScratchWinsPop {
	position: absolute;
	top: -3rem;
	right: -3rem;
	font-size: 33px;
	z-index: 3;
	color: #cecece;
	height: 50px;
	width: 50px;
	border-radius: 100%;
	overflow: hidden;
	border: 2px solid #cecece;
	cursor: pointer;
	display: flex;
	justify-content: center;
	align-items: center;
}

#bonusContainerPopUp img.bonusRecordPop {
	position: absolute;
    top: -8%;
    left: 50%;
    transform: translate(-50%, 0%);
    height: 80px;
    width: auto;
    z-index: 4;
}

#bonusContainerPopUp #bonusRecordInfo {
	width: 85%;
	margin-top: 54px;
	margin-left: auto;
	margin-right: auto;
	height: calc(100% - 6rem);
	position: relative;
	z-index: 2;
}

#bonusContainerPopUp #bonusRecordInfo th,
#bonusContainerPopUp #bonusRecordInfo td {
	font-size: 18px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#bonusContainerPopUp .bonusRecordInfo-head,
#bonusContainerPopUp .bonusRecordInfo-body {
	display: block;
}

#bonusContainerPopUp .bonusRecordInfo-head th,
#bonusContainerPopUp .bonusRecordInfo-body td:last-child {
	text-align: center;
}

#bonusContainerPopUp #bonusRecordInfo tr {
	width: 100%;
	display: grid;
	grid-template-columns: 60% 40%;
	padding: 0rem 0.5rem;
	height: 50px;
}

#bonusContainerPopUp .bonusRecordInfo-body tr:nth-child(even) {
	background: #ffdada;
}

#bonusContainerPopUp .bonusRecordInfo-head {
	background: #a81717;
	color: #fff;
}

#bonusContainerPopUp .bonusRecordInfo-body {
	height: calc(100% - 2rem);
	overflow-y: auto;
	color: #3c3535;
}

#bonusContainerPopUp .bonusRecordInfo-body::-webkit-scrollbar {
	width: 0px;
}

/* ----------------------------------------- */

#scratchMain {
	font-family: "Open Sans", sans-serif;
	background-size: cover;
	background-attachment: fixed;
	background-position: center;
	background-repeat: no-repeat;
	/* height: 100vh;
  width: 100vw; */
	position: relative;
	/* padding: 138px 23px 23px 23px; */
	display: flex;
	align-items: center;
	justify-content: center;
}

.scratchMain-desk {
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	width: 60%;
	height: 79%;
	top: 7%;
}

.mainScratch-con {
	/* height: 73vh; */
	height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 1.5vw;
    border: solid #ffffff;
    box-shadow: 0 2px 4px hsl(0deg 0% 7% / 31%);
    position: relative;
    padding: 40px 25px 25px 25px;
    width: 63%;
    background: linear-gradient(to bottom, #ff0404, #140e99);
}

.mainScratch-con img.mainScratch-title {
	position: absolute;
	top: -21%;
	left: 0px;
	width: 100%;
	transform: scale(0.9);
	z-index: 1;
}

.mainScratch-con p.dateTime-title {
	color: #34170c;
    font-size: 26px;
    font-weight: 700;
    text-align: center;
    position: relative;
    z-index: 3;
    margin-top: 41px;
    margin-bottom: 8px;
}

.mainScratch-con img.mainScratch-sub-title {
	width: 80%;
	position: relative;
	left: 50%;
	transform: translate(-50%);
	position: relative;
	z-index: 4;
	margin-top: -1vh;
}

/* ----------------------------------------- */
.mainScratch-innerCOn {
	margin-top: 20px;
	/* height: 85%; */
}

.scratch-box {
	width: 100%;
	margin: 0;
	overflow: hidden;
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	background: #919191;
}

.coin-scratch {
	height: auto;
	width: 100px;
	pointer-events: none;
	position: absolute;
	/* Position the cursor relative to its container */
	z-index: 9999;
	opacity: 0;
	/* Initially hide the cursor */
	transition: opacity 0.1s ease-in-out;
}

#scratchGrid {
	opacity: 0;
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	width: 100%;
	background-color: #f1f1f1;
	border: solid #e0d7d7;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	height: 100%;
}

#scratchOverlay, #scratchOverlay2 {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(255, 255, 255, 0);
	transition: background 0.05s ease-in-out;
}

#scratchOverlay div.fadeInOut {
	animation: opacityAnimation 1s ease-in-out;
}

@keyframes opacityAnimation {
	0% {
		opacity: 0.2;
	}

	50% {
		opacity: 0.1;
	}

	100% {
		opacity: 0;
	}
}

#scratchGrid .scratchIcon {
	height: 100%;
	width: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
}

#scratchGrid .scratchIcon img {
	width: 4vw;
	object-fit: contain;
}

#scratchGrid .scratchIcon p {
	font-size: 1.5vw;
	font-weight: 700;
	position: relative;
	color: #f07419;
	filter: drop-shadow(0 0 5px rgba(12, 12, 12, 0.5));
}


#scratchGrid .scratchIcon .circleReward {
	position: absolute;
	height: 91%;
	width: 97%;
	border: solid transparent;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	border-radius: 100%;
}

#scratchGrid .scratchIcon .circleReward.flashborder {
	animation: flashBorder 0.3s infinite;
}

#scratchGrid .scratchIcon .circleReward.redborder {
	border: solid red;
}

@keyframes flashBorder {
	0% {
		border-color: transparent;
	}

	50% {
		border-color: red;
	}

	100% {
		border-color: transparent;
	}
}

#scratchGrid .scratchIcon:nth-child(1),
#scratchGrid .scratchIcon:nth-child(2),
#scratchGrid .scratchIcon:nth-child(4),
#scratchGrid .scratchIcon:nth-child(5),
#scratchGrid .scratchIcon:nth-child(7),
#scratchGrid .scratchIcon:nth-child(8) {
	border-right: dotted #bcbcbc;
}

#scratchGrid .scratchIcon:nth-child(1),
#scratchGrid .scratchIcon:nth-child(2),
#scratchGrid .scratchIcon:nth-child(3),
#scratchGrid .scratchIcon:nth-child(4),
#scratchGrid .scratchIcon:nth-child(5),
#scratchGrid .scratchIcon:nth-child(6) {
	border-bottom: dotted #bcbcbc;
}

/* --------------------------- */

.gameplay-con {
	width: 35%;
}

.gameplay-con .rules-btn {
	position: relative;
    width: 55%;
    cursor: pointer;
    margin: -17px auto 0px auto;
}

.gameplay-con .rules-btn img.rulesBtn {
	width: 100%;
}

.gameplay-con .rules-btn .rulesInfo {
	position: absolute;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.gameplay-con .rules-btn img.rules-ico {
	height: 31px;
	width: 31px;
	object-fit: cover;
}

.gameplay-con .rules-btn .rulesInfo p {
	font-size: 18px;
	font-weight: 600;
	text-shadow:
		-1px -1px 0px #f5c6ce,
		0px -1px 0px #f5c6ce,
		1px -1px 0px #f5c6ce,
		1px 0px 0px #f5c6ce,
		1px 1px 0px #f5c6ce,
		0px 1px 0px #f5c6ce,
		-1px 1px 0px #f5c6ce,
		-1px 0px 0px #f5c6ce !important;
	color: #a42a3c;
}

/* ------------gameplay container --------------- */
.gameplay-con {
	position: relative;
    /* height: calc(100% - 0rem); */
    height: 100%;
    background: linear-gradient(to bottom, #ff0404, #140e99);
    border-radius: 25px;
    border: solid #ffffff;
    box-shadow: 0 2px 4px hsl(0deg 0% 7% / 23%);
    padding: 35px 32px 35px 32px
}

img.gameplaytitle {
	width: 254px;
	position: absolute;
	top: 2%;
	left: 50%;
	transform: translate(-50%, -71%);
}

.gameplay {
	width: 100%;
    background: hsl(0deg, 0%, 95%, 0.65);
    padding: 23px 15px 40px 15px;
    border-radius: 15px;
}

.demoplayImg-con {
	width: 90%;
    overflow: hidden;
    border-radius: 15px;
    box-shadow: 0 2px 4px rgba(12, 12, 12, 0.14);
    margin: auto;
}

img.demoplay-img {
	width: 100%;
}

.gameplay-div {
	width: 90%;
    background: hsl(0deg, 0%, 95%, 0.7);
    margin: auto;
}

p.m-0.demotitle-txt {
	color: #771519;
	font-size: 15px;
	font-weight: 900;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	margin: 8px auto 8px auto !important;
	width: 90%;
}

p.m-0.demotitle-txt span:first-child {
	white-space: nowrap;
	margin-right: 0.5rem;
}


.happybonus-con {
    width: 90%;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    overflow: hidden;
    background: #fff;
    font-weight: 900;
    display: grid;
    grid-template-areas:
        'header header'
        'lefttop righttop'
        'leftbottom rightbottom'
        'footer footer';
    margin: auto;
}

.happybonus-con p {
	color: #771519;
	font-size: 17px;
	font-weight: 900;
	display: flex;
	justify-content: flex-start;
	align-items: center;
	padding: 8px;
}

.happybonus-con p img {
	height: 30px;
	width: auto;
	object-fit: cover;
	object-position: center;
	margin-right: 0.5rem;
}

.happybonus-con p:nth-child(1) {
	text-align: center;
	background: #771519;
	color: #fff;
	font-weight: 900;
	justify-content: center;
	grid-area: header;
}

.happybonus-con p:nth-child(2) {
	grid-area: lefttop;
}

.happybonus-con p:nth-child(3) {
	grid-area: righttop;
}

.happybonus-con p:nth-child(4) {
	grid-area: leftbottom;
}

.happybonus-con p:nth-child(5) {
	grid-area: rightbottom;
}

.happybonus-con p:nth-child(6) {
	grid-area: footer;
}

.happybonus-con p:nth-child(2),
.happybonus-con p:nth-child(4) {
	border-right: 1px solid #efe9e9;
}

.happybonus-con p:nth-child(3),
.happybonus-con p:nth-child(5) {
	border-left: 1px solid #efe9e9;
}

.happybonus-con p:nth-child(4),
.happybonus-con p:nth-child(5) {
	background: #f4d6d8;
}

.reminder-con {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 0.9rem;
}

.reminder-con img.reminder-ico {
	height: 1.5rem;
	margin-right: 0.5rem;
}

.reminder-con p {
	font-size: 18px !important;
}

.cnvrsn-btn {
	background-color: #85444e;
	width: 65%;
	margin: 1.2rem auto 0rem auto;
	border-radius: 30px;
	border: solid #eca6b0;
	text-align: center;
	padding: 0.5rem 1rem;
	cursor: pointer;
}

.cnvrsn-btn p {
	color: #fff !important;
}

/* ---menu btn---------- */
.menuBtn {
	display: flex;
	align-content: center;
	width: max-content;
	position: absolute;
	top: -48px;
	right: -77px;
	flex-direction: column;
}

.menuBtn .home-btn,
.menuBtn .bonus-btn,
.div-volume .speaker-btn,
.div-volume .mute-btn {
	height: 50px;
	width: 50px;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
}

.menuBtn .home-btn,
.menuBtn .speaker-btn,
.menuBtn .mute-btn,
.menuBtn .bonus-btn,
.menuBtn .rule-btn {
	border: 2px solid white;
	overflow: hidden;
	border-radius: 10px;
}

.menuBtn .home-btn {
	background: linear-gradient(to bottom, #ff8e44, #f91362, #35126a);
    box-shadow: 0px 5px 3px -2px #1f4b0c;
}

.menuBtn .speaker-btn,
.menuBtn .mute-btn {
	background: linear-gradient(to bottom, #ff8e44, #f91362, #35126a);
	box-shadow: 0px 5px 3px -2px #1f4b0c;
}

.menuBtn .bonus-btn,
.menuBtn .rule-btn {
	background: linear-gradient(to bottom, #fac628, #cd1717);
	box-shadow: 0px 5px 3px -2px #1f4b0c;
}

.menuBtn .home-btn .icon-scratchHome,
.menuBtn .speaker-btn .icon-scratchSoundOn,
.menuBtn .mute-btn .icon-scratchSoundOff,
.menuBtn .bonus-btn .icon-scratchGift,
.menuBtn .bonus-btn svg#rule-ico {
	font-size: 46px;
	color: white;
	filter: drop-shadow(0px 0px 10px rgba(111, 13, 13, 0.35));
}

.div-volume {
	margin-top: 14px;
	margin-bottom: 14px;
}

.div-volume.mute .speaker-btn,
.div-volume.speaker .mute-btn {
	display: none;
}

.div-volume.mute .mute-btn,
.div-volume.speaker .speaker-btn {
	display: block !important;
}


/* ------------------------------- */
.connectingLine-box {
	position: absolute;
	pointer-events: none;
}

.linesf {
	position: absolute;
	width: 3px;
	background: transparent;
	left: 50%;
	top: 50%;
}

.connectingLine-box.flashingLine .linesf {
	animation: flashLine 0.3s infinite;
}

@keyframes flashLine {
	0% {
		background: transparent;
	}

	50% {
		background: red;
	}

	100% {
		background: transparent;
	}
}

.connectingLine-box.redLine .linesf {
	background: red;
}

/* halfHorizontal */
.connectingLine-box.cl_01,
.connectingLine-box.cl_12,
.connectingLine-box.cl_34,
.connectingLine-box.cl_45,
.connectingLine-box.cl_67,
.connectingLine-box.cl_78 {
	width: 66%;
	height: 34%;
	;
}

.connectingLine-box.cl_01 .linesf,
.connectingLine-box.cl_12 .linesf,
.connectingLine-box.cl_34 .linesf,
.connectingLine-box.cl_45 .linesf,
.connectingLine-box.cl_67 .linesf,
.connectingLine-box.cl_78 .linesf {
	height: 6%;
	transform: translate(-50%, -50%) rotate(90deg);
}

/* halfVertical */
.connectingLine-box.cl_03,
.connectingLine-box.cl_14,
.connectingLine-box.cl_25,
.connectingLine-box.cl_36,
.connectingLine-box.cl_47,
.connectingLine-box.cl_58 {
	width: 33%;
	height: 67%;
}

.connectingLine-box.cl_03 .linesf,
.connectingLine-box.cl_14 .linesf,
.connectingLine-box.cl_25 .linesf,
.connectingLine-box.cl_36 .linesf,
.connectingLine-box.cl_47 .linesf,
.connectingLine-box.cl_58 .linesf {
	height: 11%;
	transform: translate(-50%, -50%) rotate(0deg);
}

/* halfOblique */
.connectingLine-box.cl_04,
.connectingLine-box.cl_13,
.connectingLine-box.cl_37,
.connectingLine-box.cl_46,
.connectingLine-box.cl_24,
.connectingLine-box.cl_15,
.connectingLine-box.cl_48,
.connectingLine-box.cl_57 {
	width: 66%;
	height: 67%;
}

.connectingLine-box.cl_04 .linesf,
.connectingLine-box.cl_13 .linesf,
.connectingLine-box.cl_37 .linesf,
.connectingLine-box.cl_46 .linesf,
.connectingLine-box.cl_24 .linesf,
.connectingLine-box.cl_15 .linesf,
.connectingLine-box.cl_48 .linesf,
.connectingLine-box.cl_57 .linesf {
	height: 28%;
	transform: translate(-50%, -50%) rotate(320deg);
}

/* wholeOblique */
.connectingLine-box.cl_08,
.connectingLine-box.cl_26 {
	width: 100%;
	height: 100%;
}

.connectingLine-box.cl_08 .linesf,
.connectingLine-box.cl_26 .linesf {
	height: 66.5%;
	transform: translate(-50%, -50%) rotate(0deg);
}

/* wholeVertical */
.connectingLine-box.cl_06,
.connectingLine-box.cl_28,
.connectingLine-box.cl_17 {
	width: 33%;
	height: 100%;
}

.connectingLine-box.cl_06 .linesf,
.connectingLine-box.cl_28 .linesf,
.connectingLine-box.cl_17 .linesf {
	height: 41%;
	transform: translate(-50%, -50%) rotate(0deg);
}

/* wholeHorizontal */
.connectingLine-box.cl_02,
.connectingLine-box.cl_35,
.connectingLine-box.cl_68 {
	width: 100%;
	height: 34%;
}

.connectingLine-box.cl_02 .linesf,
.connectingLine-box.cl_35 .linesf,
.connectingLine-box.cl_68 .linesf {
	height: 100%;
	transform: translate(-50%, -50%) rotate(90deg);
}

/* slant */
.connectingLine-box.cl_07 .linesf,
.connectingLine-box.cl_27 .linesf,
.connectingLine-box.cl_16 .linesf,
.connectingLine-box.cl_18 .linesf {
	height: 48%;
}

/* half hori oblique */
.connectingLine-box.cl_05 .linesf,
.connectingLine-box.cl_23 .linesf,
.connectingLine-box.cl_38 .linesf,
.connectingLine-box.cl_56 .linesf {
	height: 98%;
}

.connectingLine-box.cl_05 .linesf,
.connectingLine-box.cl_38 .linesf {
	transform: translate(-50%, -50%) rotate(290deg);
}

.connectingLine-box.cl_23 .linesf,
.connectingLine-box.cl_56 .linesf {
	transform: translate(-50%, -50%) rotate(-290deg);
}

.connectingLine-box.cl_05,
.connectingLine-box.cl_23,
.connectingLine-box.cl_38,
.connectingLine-box.cl_56 {
	height: 66%;
	width: 100%;
}

.connectingLine-box.cl_16 .linesf {
	transform: translate(-50%, -50%) rotate(30deg);
}

.connectingLine-box.cl_18 .linesf {
	transform: translate(-50%, -50%) rotate(332deg);
}

.connectingLine-box.cl_07 .linesf {
	transform: translate(-50%, -49%) rotate(155deg);
}

.connectingLine-box.cl_27 .linesf {
	transform: translate(-50%, -50%) rotate(27deg);
}

.connectingLine-box.cl_07,
.connectingLine-box.cl_27,
.connectingLine-box.cl_16,
.connectingLine-box.cl_18 {
	width: 66%;
	height: 100%;
}


/* ---------------- */
.connectingLine-box.cl_01,
.connectingLine-box.cl_12,
.connectingLine-box.cl_25,
.connectingLine-box.cl_14,
.connectingLine-box.cl_03,
.connectingLine-box.cl_04,
.connectingLine-box.cl_13,
.connectingLine-box.cl_24,
.connectingLine-box.cl_15,
.connectingLine-box.cl_08,
.connectingLine-box.cl_26,
.connectingLine-box.cl_06,
.connectingLine-box.cl_28,
.connectingLine-box.cl_02,
.connectingLine-box.cl_07,
.connectingLine-box.cl_27,
.connectingLine-box.cl_16,
.connectingLine-box.cl_18,
.connectingLine-box.cl_05,
.connectingLine-box.cl_23 {
	top: 0%;
}

.connectingLine-box.cl_34,
.connectingLine-box.cl_45,
.connectingLine-box.cl_36,
.connectingLine-box.cl_47,
.connectingLine-box.cl_58,
.connectingLine-box.cl_37,
.connectingLine-box.cl_46,
.connectingLine-box.cl_48,
.connectingLine-box.cl_57,
.connectingLine-box.cl_35 {
	top: 34.5%;
}

.connectingLine-box.cl_67,
.connectingLine-box.cl_78,
.connectingLine-box.cl_68,
.connectingLine-box.cl_38,
.connectingLine-box.cl_56 {
	bottom: 0%;
}

.connectingLine-box.cl_01,
.connectingLine-box.cl_34,
.connectingLine-box.cl_67,
.connectingLine-box.cl_04,
.connectingLine-box.cl_13,
.connectingLine-box.cl_37,
.connectingLine-box.cl_46,
.connectingLine-box.cl_06,
.connectingLine-box.cl_07 {
	left: 1%;
}

.connectingLine-box.cl_03,
.connectingLine-box.cl_36,
.connectingLine-box.cl_08,
.connectingLine-box.cl_26,
.connectingLine-box.cl_02,
.connectingLine-box.cl_68,
.connectingLine-box.cl_35,
.connectingLine-box.cl_16 {
	left: 0%;
}

.connectingLine-box.cl_12,
.connectingLine-box.cl_45,
.connectingLine-box.cl_78,
.connectingLine-box.cl_25,
.connectingLine-box.cl_58,
.connectingLine-box.cl_24,
.connectingLine-box.cl_15,
.connectingLine-box.cl_48,
.connectingLine-box.cl_57,
.connectingLine-box.cl_28,
.connectingLine-box.cl_27,
.connectingLine-box.cl_18 {
	right: 0%;
}

.connectingLine-box.cl_14,
.connectingLine-box.cl_47,
.connectingLine-box.cl_17 {
	right: 33%;
}

.connectingLine-box.cl_04,
.connectingLine-box.cl_37,
.connectingLine-box.cl_15,
.connectingLine-box.cl_48 {
	transform: rotate(0deg);
}

.connectingLine-box.cl_13,
.connectingLine-box.cl_46,
.connectingLine-box.cl_24,
.connectingLine-box.cl_57 {
	transform: rotate(80deg);
}

.connectingLine-box.cl_08 {
	transform: rotate(320deg);
}

.connectingLine-box.cl_26 {
	transform: rotate(40deg);
}

@media screen and (max-width: 1921px) {

	/* -----half horizontal------ */
	.connectingLine-box.cl_01,
	.connectingLine-box.cl_34,
	.connectingLine-box.cl_67,
	.connectingLine-box.cl_04,
	.connectingLine-box.cl_13,
	.connectingLine-box.cl_37,
	.connectingLine-box.cl_46,
	.connectingLine-box.cl_06,
	.connectingLine-box.cl_07 {
		left: -0.2%;
	}

	.connectingLine-box.cl_01,
	.connectingLine-box.cl_12,
	.connectingLine-box.cl_34,
	.connectingLine-box.cl_45,
	.connectingLine-box.cl_67,
	.connectingLine-box.cl_78 {
		width: 67%;
	}

	.connectingLine-box.cl_01 .linesf,
	.connectingLine-box.cl_12 .linesf,
	.connectingLine-box.cl_34 .linesf,
	.connectingLine-box.cl_45 .linesf,
	.connectingLine-box.cl_67 .linesf,
	.connectingLine-box.cl_78 .linesf {
		height: 7%;
	}

	/* -----half vertical------ */
	.connectingLine-box.cl_03 .linesf,
	.connectingLine-box.cl_14 .linesf,
	.connectingLine-box.cl_25 .linesf,
	.connectingLine-box.cl_36 .linesf,
	.connectingLine-box.cl_47 .linesf,
	.connectingLine-box.cl_58 .linesf {
		height: 6%;
	}

	.connectingLine-box.cl_25,
	.connectingLine-box.cl_14,
	.connectingLine-box.cl_03,
	.connectingLine-box.cl_04,
	.connectingLine-box.cl_13,
	.connectingLine-box.cl_24,
	.connectingLine-box.cl_15,
	.connectingLine-box.cl_08,
	.connectingLine-box.cl_26,
	.connectingLine-box.cl_06,
	.connectingLine-box.cl_28,
	.connectingLine-box.cl_02,
	.connectingLine-box.cl_07,
	.connectingLine-box.cl_27,
	.connectingLine-box.cl_16,
	.connectingLine-box.cl_18,
	.connectingLine-box.cl_05,
	.connectingLine-box.cl_23 {
		top: 0%;
	}

	/* -----half oblique------ */
	.connectingLine-box.cl_04,
	.connectingLine-box.cl_13,
	.connectingLine-box.cl_37,
	.connectingLine-box.cl_46,
	.connectingLine-box.cl_24,
	.connectingLine-box.cl_15,
	.connectingLine-box.cl_48,
	.connectingLine-box.cl_57 {
		width: 67%;
	}

	.connectingLine-box.cl_04 .linesf,
	.connectingLine-box.cl_13 .linesf,
	.connectingLine-box.cl_37 .linesf,
	.connectingLine-box.cl_46 .linesf,
	.connectingLine-box.cl_24 .linesf,
	.connectingLine-box.cl_15 .linesf,
	.connectingLine-box.cl_48 .linesf,
	.connectingLine-box.cl_57 .linesf {
		height: 28%;
	}

	/* -----med oblique------ */
	.connectingLine-box.cl_26 {
		transform: rotate(55deg);
	}

	.connectingLine-box.cl_08 {
		transform: rotate(-55deg);
	}

	.connectingLine-box.cl_08 .linesf,
	.connectingLine-box.cl_26 .linesf {
		height: 78.5%;
	}

	/* -----big vertical------ */
	.connectingLine-box.cl_06 .linesf,
	.connectingLine-box.cl_28 .linesf,
	.connectingLine-box.cl_17 .linesf {
		height: 37%;
		transform: translate(-50%, -50%) rotate(0deg);
	}

	/* -----big horizontal------ */
	.connectingLine-box.cl_02 .linesf,
	.connectingLine-box.cl_35 .linesf,
	.connectingLine-box.cl_68 .linesf {
		height: 145%;
	}

	/* -----big oblique------ */
	.connectingLine-box.cl_16 .linesf,
	.connectingLine-box.cl_27 .linesf {
		transform: translate(-50%, -50%) rotate(26deg);
	}

	.connectingLine-box.cl_07 .linesf,
	.connectingLine-box.cl_18 .linesf {
		transform: translate(-50%, -49%) rotate(-26deg);
	}

	.connectingLine-box.cl_07,
	.connectingLine-box.cl_18 {
		top: -1%;
	}

	/* half hori oblique */
	.connectingLine-box.cl_05,
	.connectingLine-box.cl_23,
	.connectingLine-box.cl_38,
	.connectingLine-box.cl_56 {
		height: 66.5%;
		left: -2px;
	}

	.connectingLine-box.cl_05 .linesf,
	.connectingLine-box.cl_23 .linesf,
	.connectingLine-box.cl_38 .linesf,
	.connectingLine-box.cl_56 .linesf {
		height: 87%;
	}
}

@media screen and (max-width: 1680px) {

	/* -----half horizontal------ */
	.connectingLine-box.cl_01 .linesf,
	.connectingLine-box.cl_12 .linesf,
	.connectingLine-box.cl_34 .linesf,
	.connectingLine-box.cl_45 .linesf,
	.connectingLine-box.cl_67 .linesf,
	.connectingLine-box.cl_78 .linesf {
		height: 8%;
	}

	/* -----med oblique------ */
	.connectingLine-box.cl_08 .linesf,
	.connectingLine-box.cl_26 .linesf {
		height: 75%;
	}

	/* -----big horizontal------ */
	.connectingLine-box.cl_02 .linesf,
	.connectingLine-box.cl_35 .linesf,
	.connectingLine-box.cl_68 .linesf {
		height: 133%;
	}

	/* half hori oblique */
	.connectingLine-box.cl_05 .linesf,
	.connectingLine-box.cl_23 .linesf,
	.connectingLine-box.cl_38 .linesf,
	.connectingLine-box.cl_56 .linesf {
		height: 80%;
	}
}

@media screen and (max-width: 1600px) {

	/* -----half horizontal------ */
	.connectingLine-box.cl_04 .linesf,
	.connectingLine-box.cl_13 .linesf,
	.connectingLine-box.cl_37 .linesf,
	.connectingLine-box.cl_46 .linesf,
	.connectingLine-box.cl_24 .linesf,
	.connectingLine-box.cl_15 .linesf,
	.connectingLine-box.cl_48 .linesf,
	.connectingLine-box.cl_57 .linesf {
		height: 29%;
	}

	/* -----med oblique------ */
	.connectingLine-box.cl_08 .linesf,
	.connectingLine-box.cl_26 .linesf {
		height: 79%;
	}

	/* -----big horizontal------ */
	.connectingLine-box.cl_02 .linesf,
	.connectingLine-box.cl_35 .linesf,
	.connectingLine-box.cl_68 .linesf {
		height: 149%;
	}

	/* half hori oblique */
	.connectingLine-box.cl_05 .linesf,
	.connectingLine-box.cl_23 .linesf,
	.connectingLine-box.cl_38 .linesf,
	.connectingLine-box.cl_56 .linesf {
		height: 89%;
	}
}

@media screen and (max-width: 1537px) {

	.gameplay {
		padding: 5px 15px;
	}
	.mainScratch-innerCOn {
		margin-top: 10px;
	}
	.userInfo {
		height: 36px!important;
		margin-top: 8px !important;
		line-height: 39px!important;
	}

	/* -----half horizontal------ */
	.connectingLine-box.cl_01,
	.connectingLine-box.cl_34,
	.connectingLine-box.cl_67,
	.connectingLine-box.cl_04,
	.connectingLine-box.cl_13,
	.connectingLine-box.cl_37,
	.connectingLine-box.cl_46,
	.connectingLine-box.cl_06,
	.connectingLine-box.cl_07 {
		left: 0%;
	}

	/* -----med oblique------ */
	.connectingLine-box.cl_08 .linesf,
	.connectingLine-box.cl_26 .linesf {
		height: 79.9%;
	}

	/* -----big horizontal------ */
	.connectingLine-box.cl_02 .linesf,
	.connectingLine-box.cl_35 .linesf,
	.connectingLine-box.cl_68 .linesf {
		height: 151%;
	}

	/* half hori oblique */
	.connectingLine-box.cl_05 .linesf,
	.connectingLine-box.cl_23 .linesf,
	.connectingLine-box.cl_38 .linesf,
	.connectingLine-box.cl_56 .linesf {
		height: 89%;
	}
}

@media screen and (max-width: 1440px) {

	/* -----half horizontal------ */
	.connectingLine-box.cl_01 .linesf,
	.connectingLine-box.cl_12 .linesf,
	.connectingLine-box.cl_34 .linesf,
	.connectingLine-box.cl_45 .linesf,
	.connectingLine-box.cl_67 .linesf,
	.connectingLine-box.cl_78 .linesf {
		height: 6%;
	}

	/* -----half vertical------ */
	.connectingLine-box.cl_04 .linesf,
	.connectingLine-box.cl_13 .linesf,
	.connectingLine-box.cl_37 .linesf,
	.connectingLine-box.cl_46 .linesf,
	.connectingLine-box.cl_24 .linesf,
	.connectingLine-box.cl_15 .linesf,
	.connectingLine-box.cl_48 .linesf,
	.connectingLine-box.cl_57 .linesf {
		height: 29%;
	}

	/* -----med oblique------ */
	.connectingLine-box.cl_08 .linesf,
	.connectingLine-box.cl_26 .linesf {
		height: 76%;
	}

	/* -----big horizontal------ */
	.connectingLine-box.cl_02 .linesf,
	.connectingLine-box.cl_35 .linesf,
	.connectingLine-box.cl_68 .linesf {
		height: 135%;
	}

	/* half hori oblique */
	.connectingLine-box.cl_05 .linesf,
	.connectingLine-box.cl_23 .linesf,
	.connectingLine-box.cl_38 .linesf,
	.connectingLine-box.cl_56 .linesf {
		height: 82%;
	}
}

@media screen and (max-width: 1400px) {

	/* -----big horizontal------ */
	.connectingLine-box.cl_02 .linesf,
	.connectingLine-box.cl_35 .linesf,
	.connectingLine-box.cl_68 .linesf {
		height: 110%;
	}

	/* half hori oblique */
	.connectingLine-box.cl_05 .linesf,
	.connectingLine-box.cl_23 .linesf,
	.connectingLine-box.cl_38 .linesf,
	.connectingLine-box.cl_56 .linesf {
		height: 70%;
	}

	/* -----half vertical------ */
	.connectingLine-box.cl_04 .linesf,
	.connectingLine-box.cl_13 .linesf,
	.connectingLine-box.cl_37 .linesf,
	.connectingLine-box.cl_46 .linesf,
	.connectingLine-box.cl_24 .linesf,
	.connectingLine-box.cl_15 .linesf,
	.connectingLine-box.cl_48 .linesf,
	.connectingLine-box.cl_57 .linesf {
		height: 26%;
	}

	/* -----big oblique------ */
	.connectingLine-box.cl_07 .linesf,
	.connectingLine-box.cl_27 .linesf,
	.connectingLine-box.cl_16 .linesf,
	.connectingLine-box.cl_18 .linesf {
		height: 46%;
	}

	/* -----med oblique------ */
	.connectingLine-box.cl_08 .linesf,
	.connectingLine-box.cl_26 .linesf {
		height: 70%;
	}
}

@media screen and (max-width: 1366px) {

	/* -----half horizontal------ */
	.connectingLine-box.cl_01 .linesf,
	.connectingLine-box.cl_12 .linesf,
	.connectingLine-box.cl_34 .linesf,
	.connectingLine-box.cl_45 .linesf,
	.connectingLine-box.cl_67 .linesf,
	.connectingLine-box.cl_78 .linesf {
		height: 9%;
	}

	/* -----half vertical------ */
	.connectingLine-box.cl_04 .linesf,
	.connectingLine-box.cl_13 .linesf,
	.connectingLine-box.cl_37 .linesf,
	.connectingLine-box.cl_46 .linesf,
	.connectingLine-box.cl_24 .linesf,
	.connectingLine-box.cl_15 .linesf,
	.connectingLine-box.cl_48 .linesf,
	.connectingLine-box.cl_57 .linesf {
		height: 30%;
	}

	/* -----big oblique------ */
	.connectingLine-box.cl_07 .linesf,
	.connectingLine-box.cl_27 .linesf,
	.connectingLine-box.cl_16 .linesf,
	.connectingLine-box.cl_18 .linesf {
		height: 48%;
	}

	/* -----med oblique------ */
	.connectingLine-box.cl_08 .linesf,
	.connectingLine-box.cl_26 .linesf {
		height: 81%;
	}

	/* -----big horizontal------ */
	.connectingLine-box.cl_02 .linesf,
	.connectingLine-box.cl_35 .linesf,
	.connectingLine-box.cl_68 .linesf {
		height: 155%;
	}

	/* half hori oblique */
	.connectingLine-box.cl_05 .linesf,
	.connectingLine-box.cl_23 .linesf,
	.connectingLine-box.cl_38 .linesf,
	.connectingLine-box.cl_56 .linesf {
		height: 92%;
	}
}

@media screen and (max-width: 1280px) {

	/* -----half horizontal------ */
	.connectingLine-box.cl_01 .linesf,
	.connectingLine-box.cl_12 .linesf,
	.connectingLine-box.cl_34 .linesf,
	.connectingLine-box.cl_45 .linesf,
	.connectingLine-box.cl_67 .linesf,
	.connectingLine-box.cl_78 .linesf {
		height: 7%;
	}

	/* -----half vertical------ */
	.connectingLine-box.cl_04 .linesf,
	.connectingLine-box.cl_13 .linesf,
	.connectingLine-box.cl_37 .linesf,
	.connectingLine-box.cl_46 .linesf,
	.connectingLine-box.cl_24 .linesf,
	.connectingLine-box.cl_15 .linesf,
	.connectingLine-box.cl_48 .linesf,
	.connectingLine-box.cl_57 .linesf {
		height: 25%;
	}

	/* -----big horizontal------ */
	.connectingLine-box.cl_02 .linesf,
	.connectingLine-box.cl_35 .linesf,
	.connectingLine-box.cl_68 .linesf {
		height: 103%;
	}

	/* half hori oblique */
	.connectingLine-box.cl_05 .linesf,
	.connectingLine-box.cl_23 .linesf,
	.connectingLine-box.cl_38 .linesf,
	.connectingLine-box.cl_56 .linesf {
		height: 67%;
	}

	/* -----med oblique------ */
	.connectingLine-box.cl_08 .linesf,
	.connectingLine-box.cl_26 .linesf {
		height: 70%;
	}
}

@media screen and (max-width: 1152px) {

	/* -----half horizontal------ */
	.connectingLine-box.cl_12,
	.connectingLine-box.cl_45,
	.connectingLine-box.cl_78,
	.connectingLine-box.cl_25,
	.connectingLine-box.cl_58,
	.connectingLine-box.cl_24,
	.connectingLine-box.cl_15,
	.connectingLine-box.cl_48,
	.connectingLine-box.cl_57,
	.connectingLine-box.cl_28,
	.connectingLine-box.cl_27,
	.connectingLine-box.cl_18 {
		right: 0.1%;
	}

	/* -----half vertical------ */
	.connectingLine-box.cl_03 .linesf,
	.connectingLine-box.cl_14 .linesf,
	.connectingLine-box.cl_25 .linesf,
	.connectingLine-box.cl_36 .linesf,
	.connectingLine-box.cl_47 .linesf,
	.connectingLine-box.cl_58 .linesf {
		height: 7%;
	}

	/* -----big horizontal------ */
	.connectingLine-box.cl_02 .linesf,
	.connectingLine-box.cl_35 .linesf,
	.connectingLine-box.cl_68 .linesf {
		height: 114%;
	}

	/* half hori oblique */
	.connectingLine-box.cl_05 .linesf,
	.connectingLine-box.cl_23 .linesf,
	.connectingLine-box.cl_38 .linesf,
	.connectingLine-box.cl_56 .linesf {
		height: 72%;
	}

	/* -----big oblique------ */
	.connectingLine-box.cl_07 .linesf,
	.connectingLine-box.cl_27 .linesf,
	.connectingLine-box.cl_16 .linesf,
	.connectingLine-box.cl_18 .linesf {
		height: 46%;
	}
}

@media screen and (max-width: 1025px) {

	/* -----half horizontal------ */
	.connectingLine-box.cl_12,
	.connectingLine-box.cl_45,
	.connectingLine-box.cl_78,
	.connectingLine-box.cl_25,
	.connectingLine-box.cl_58,
	.connectingLine-box.cl_24,
	.connectingLine-box.cl_15,
	.connectingLine-box.cl_48,
	.connectingLine-box.cl_57,
	.connectingLine-box.cl_28,
	.connectingLine-box.cl_27,
	.connectingLine-box.cl_18 {
		right: 0.2%;
	}

	/* -----half vertical------ */
	.connectingLine-box.cl_03 .linesf,
	.connectingLine-box.cl_14 .linesf,
	.connectingLine-box.cl_25 .linesf,
	.connectingLine-box.cl_36 .linesf,
	.connectingLine-box.cl_47 .linesf,
	.connectingLine-box.cl_58 .linesf {
		height: 6%;
	}

	/* -----big horizontal------ */
	.connectingLine-box.cl_02 .linesf,
	.connectingLine-box.cl_35 .linesf,
	.connectingLine-box.cl_68 .linesf {
		height: 117%;
	}

	/* half hori oblique */
	.connectingLine-box.cl_05 .linesf,
	.connectingLine-box.cl_23 .linesf,
	.connectingLine-box.cl_38 .linesf,
	.connectingLine-box.cl_56 .linesf {
		height: 73%;
	}
}


@media screen and (max-width: 769px) {

	/* -----half horizontal------ */
	.connectingLine-box.cl_12,
	.connectingLine-box.cl_45,
	.connectingLine-box.cl_78,
	.connectingLine-box.cl_25,
	.connectingLine-box.cl_58,
	.connectingLine-box.cl_24,
	.connectingLine-box.cl_15,
	.connectingLine-box.cl_48,
	.connectingLine-box.cl_57,
	.connectingLine-box.cl_28,
	.connectingLine-box.cl_27,
	.connectingLine-box.cl_18 {
		right: -0.5%;
	}

	.connectingLine-box.cl_01 .linesf,
	.connectingLine-box.cl_12 .linesf,
	.connectingLine-box.cl_34 .linesf,
	.connectingLine-box.cl_45 .linesf,
	.connectingLine-box.cl_67 .linesf,
	.connectingLine-box.cl_78 .linesf {
		height: 5%;
	}

	/* -----half vertical------ */
	.connectingLine-box.cl_03 .linesf,
	.connectingLine-box.cl_14 .linesf,
	.connectingLine-box.cl_25 .linesf,
	.connectingLine-box.cl_36 .linesf,
	.connectingLine-box.cl_47 .linesf,
	.connectingLine-box.cl_58 .linesf {
		height: 11%;
	}

	/* ------half oblique right----- */
	.connectingLine-box.cl_04 .linesf,
	.connectingLine-box.cl_13 .linesf,
	.connectingLine-box.cl_37 .linesf,
	.connectingLine-box.cl_46 .linesf,
	.connectingLine-box.cl_24 .linesf,
	.connectingLine-box.cl_15 .linesf,
	.connectingLine-box.cl_48 .linesf,
	.connectingLine-box.cl_57 .linesf {
		height: 27%;
	}

	/* ----big oblique--- */
	.connectingLine-box.cl_08 .linesf,
	.connectingLine-box.cl_26 .linesf {
		height: 72%;
	}

	/* ---big vertical--- */
	.connectingLine-box.cl_06 .linesf,
	.connectingLine-box.cl_28 .linesf,
	.connectingLine-box.cl_17 .linesf {
		height: 41%;
	}

	/* -----big  horizontal---- */
	.connectingLine-box.cl_02 .linesf,
	.connectingLine-box.cl_35 .linesf,
	.connectingLine-box.cl_68 .linesf {
		height: 104%;
	}

	/* ----half hori oblique------ */
	.connectingLine-box.cl_05,
	.connectingLine-box.cl_23,
	.connectingLine-box.cl_38,
	.connectingLine-box.cl_56 {
		left: 2px;
	}

	.connectingLine-box.cl_05 .linesf,
	.connectingLine-box.cl_23 .linesf,
	.connectingLine-box.cl_38 .linesf,
	.connectingLine-box.cl_56 .linesf {
		height: 70%;
	}

}

@media screen and (max-width: 541px) {

	/* ------half oblique right----- */
	.connectingLine-box.cl_04 .linesf,
	.connectingLine-box.cl_13 .linesf,
	.connectingLine-box.cl_37 .linesf,
	.connectingLine-box.cl_46 .linesf,
	.connectingLine-box.cl_24 .linesf,
	.connectingLine-box.cl_15 .linesf,
	.connectingLine-box.cl_48 .linesf,
	.connectingLine-box.cl_57 .linesf {
		height: 28%;
	}

	/* -----big  horizontal---- */
	.connectingLine-box.cl_02 .linesf,
	.connectingLine-box.cl_35 .linesf,
	.connectingLine-box.cl_68 .linesf {
		height: 105%;
	}
}

@media screen and (max-width: 431px) {

	/* -----big  horizontal---- */
	.connectingLine-box.cl_02 .linesf,
	.connectingLine-box.cl_35 .linesf,
	.connectingLine-box.cl_68 .linesf {
		height: 106%;
	}
}

/* ----------------------------------------------- */

@media screen and (min-width: 1920px) {
	#ruleContainerPopUp .ruleContainer-details {
		padding: 5rem;
	}
}

@media screen and (max-width: 1680px) {

	.gameplay-con .rules-btn {
		margin: 0 4rem;
	}

	/* -------------scratch win pop up-------------------- */
	#scratchWinContainerPopUp .scratchWinInfoContainer {
		width: 24vw;
		height: 50vh;
	}

	#scratchWinContainerPopUp p.mb-0.scratchWin-prize {
		font-size: 68px;
		top: 58px;
	}

	#scratchWinContainerPopUp img#scratchRewardImg {
		height: 95px;
	}
	#scratchWinContainerPopUp .confirmSratchWin-Btn {
		bottom: -78px;
	}
}

@media screen and (max-width: 1600px) {
	.gameplay-con .rules-btn {
		margin: -1rem 4rem;
	}


	#bonusContainerPopUp .bonusContainer-Outer,
	#scratchTimeContainerPopUp .scratchTimeContainer-Outer {
		height: calc(100% - 20rem);
	}

	#scratchWinContainerPopUp .scratchWinInfoContainer {
		height: 58vh;
	}
}

@media screen and (max-width: 1537px) {

	.gameplay-con .rules-btn {
		margin: 0px auto 0px auto;
	}

	#scratchWinContainerPopUp .scratchWinInfoContainer {
		width: 28vw !important;
		height: 60vh !important;
	}

	#scratchWinContainerPopUp .scratchWinContainerPopUp-overlay::before {
		width: 57vw;
		height: 101vh;
	}

	#ruleContainerPopUp .ruleContainer-details {
		padding: 5rem;
	}

	#bonusContainerPopUp .bonusContainer-Outer,
	#scratchTimeContainerPopUp .scratchTimeContainer-Outer {

		height: calc(100% - 19rem);
	}
}

@media screen and (max-width: 1440px) {
	.gameplay-con .rules-btn {
		margin: 10px auto 0px auto;
	}

	#ruleContainerPopUp img.ruleElement-flower {
		height: 182px;
	}
}

@media screen and (max-width: 1400px) {

	/* -------------pop up-------------------- */
	#bonusContainerPopUp .bonusContainer-Outer,
	#scratchTimeContainerPopUp .scratchTimeContainer-Outer {
		width: 37%;
	}

	#bonusContainerPopUp #bonusRecordInfo th,
	#bonusContainerPopUp #bonusRecordInfo td {
		font-size: 18px;
	}

	#scratchWinContainerPopUp .scratchWinInfoContainer {
		width: 28vw !important;
		height: 48vh !important;
	}

	#scratchWinContainerPopUp .scratchWinContainerPopUp-overlay::before {
		width: 71vw;
		height: 83vh;
	}

	#scratchWinContainerPopUp p.mb-0.scratchWin-prize {
		font-size: 68px;
	}

	.mainScratch-innerCOn .scratch-box img.coin-scratch {
		width: 100px;
	}

	.ruleContainerPopUp img.ruleElement-flower {
		right: -9rem;
		height: 182px;
	}

	#bonusContainerPopUp .bonusContainer-Outer,
	#scratchTimeContainerPopUp .scratchTimeContainer-Outer {
		height: calc(100% - 28rem);
	}

}

@media screen and (max-width: 1366px) {

	.mainScratch-con img.mainScratch-title {
		top: -17%;
	}

	.scratchMain-desk {
		height: 82%;
	}

	.demoplayImg-con {
		width: 91%;
		margin: auto;
	}

	#bonusContainerPopUp #bonusRecordInfo th,
	#bonusContainerPopUp #bonusRecordInfo td {
		font-size: 16px;
	}

	#ruleContainerPopUp #closeRulePop,
	#bonusContainerPopUp #closeBonusPop,
	#scratchTimeContainerPopUp #closeScratchTimePop {
		right: -3rem;
		height: 50px;
		width: 50px;
	}

	#ruleContainerPopUp .ruleContainer-details {
		font-size: 14px;
	}

	.mainScratch-innerCOn .scratch-box img.coin-scratch {
		width: 70px;
	}

	#scratchWinContainerPopUp .confirmSratchWin-Btn img#confirmSratchWin {
		width: 150px;
	}

	#scratchWinContainerPopUp p.mb-0.scratchWin-prize {
		font-size: 55px;
	}

	#scratchWinContainerPopUp img#scratchRewardImg {
		height: 84px;
	}

	.gameplay-con .rules-btn {
        margin: -1rem 3rem;
    }

}

@media screen and (max-width: 1284px) {

	.scratchMain-desk {
		width: 82%;
	}

	#ruleContainerPopUp .ruleContainer-details {
		padding: 3rem;
	}

	#ruleContainerPopUp img.ruleElement-flower {
		height: 168px;
	}

	#scratchWinContainerPopUp .scratchWinInfoContainer {
		width: 27vw !important;
		height: 46vh !important;
	}

}

@media screen and (max-width: 1280px) {
	.scratchMain-desk {
		height: 79%;
		width: 67%;
	}
}

@media screen and (max-width: 1152px) {
	#scratchWinContainerPopUp .scratchWinInfoContainer {
		width: 30vw !important;
		height: 54vh !important;
	}

	#bonusContainerPopUp .bonusContainer-Outer,
	#scratchTimeContainerPopUp .scratchTimeContainer-Outer {
		height: calc(100% - 20rem);
	}
}

@media screen and (max-width: 1122px) {
	.mainScratch-con img.mainScratch-title {
		top: -18%;
	}
}

@media screen and (max-width: 1024px) {
	.scratchMain-desk {
		width: 83%;
	}

	#scratchWinContainerPopUp .scratchWinInfoContainer {
		width: 33vw !important;
		height: 64vh !important;
	}

}


@media screen and (max-height: 686px) {
	.mainScratch-con img.mainScratch-title {
		top: -19%;
	}

}

@media screen and (max-height: 633px) {
	.mainScratch-con img.mainScratch-title {
		top: -20%;
	}

}



.userInfo {
    background-color: #ffffff;
    border-radius: 8px;
    height: 48px;
    color: #4c3939;
    box-shadow: 3px 5px 5px hsl(329deg 35% 49% / 24%);
    width: 90%;
    text-align: center;
    font-weight: 600;
    font-size: 1.2vw;
    line-height: 50px;
    margin: 10px auto auto auto;
}
.userInfo span {
	color: #ff0000 !important;
}

.noRecordSpan,
.noCountSpan {
	font-size: 25px;
    margin-top: 52px;
    z-index: 2;
    margin: 35% auto;
    color: #a81717;
    font-weight: 600;
}

.noCountSpan {
    position: relative;
    top: 50%;
    left: 0%;
    transform: translate(-0%, -50%);
}
.fw-700{
	font-weight: 700;
}
.menuBtn-span{
	color: #771519;
    font-size: 17px;
    font-weight: 900;
	text-shadow: -1px -1px 0 #fff, 1px -1px 0 #fff, -1px 1px 0 #fff, 1px 1px 0 #fff;
}


@media screen and (max-height: 820px) {
	p.m-0.demotitle-txt{
		font-size: 12px;
	}
	img.gameplaytitle {
		width: 212px;
	}
	.demoplayImg-con {
		width: 78%;
	}
	.happybonus-con p {
		font-size: 13px;
	}
	.gameplay-con .rules-btn {
		width: 53%;
	}
	.mainScratch-con p.dateTime-title {
		font-size: 22px;
		margin-top: 20px;
	}
	.mainScratch-con img.mainScratch-title {
		transform: scale(0.8);
	}
}

.img-div-right {
    position: absolute;
    bottom: 0;
    right: -30px;
    width: 40%;
    height: 100%;
    object-fit: cover;
}

.img-div-right img {
	position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100%;
}

.img-div-left {
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-div-left img {
    position: absolute;
    bottom: -68px;
    left: 80px;
    width: 25%;
    height: 75%;
}

img.character-bg {
    width: 40%;
    bottom: 0px;
    left: 0;
    height: 86%;
}

.img-left-top {
	position: absolute;
    top: 0;
    left: 0;
}

div#floatingAirBallon {
	position: absolute;
	z-index: 1;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	overflow: hidden;
	pointer-events: none;
  }
  
  .floatingElement {
	position: absolute;
    height: 100px;
    width: 100px;
	background: url(../images/hot-air-ballon.png);
	background-size: contain;
	background-repeat: no-repeat;
	animation: airBallon 3s linear infinite;
  }
  
  #floatingAirBallon_1, #floatingAirBallon_2{
	position: absolute;
	z-index: -1;
	width: 100%;
	height: 100%;
	left: 0;
  }
  
  #floatingAirBallon_1{
	top: 100%;
  }
  
  #floatingAirBallon_2{
	top: 100%;
  }
  
  #floatingAirBallon_1 .floatingElement.airBallon_1 {
	top: 0;
	right: 345px;
  }
  
  #floatingAirBallon_1 .floatingElement.airBallon_2 {
	top: 40%;
	left: -20px;
  }
  
  #floatingAirBallon_1 .floatingElement.airBallon_3 {
	bottom: 0;
    right: 700px;
  }
  
  #floatingAirBallon_2 .floatingElement.airBallon_1 {
	top: 0;
	left: 345px;
  }
  
  #floatingAirBallon_2 .floatingElement.airBallon_2 {
	top: 40%;
	right: -20px;
  }
  
  #floatingAirBallon_2 .floatingElement.airBallon_3 {
	bottom: 0;
    left: 643px;
  }

  @keyframes airBallon {
	0% { transform: rotate( 0deg);}
	25% { transform: rotate(-8deg);}
	50% { transform: rotate(0deg);}
	75% { transform: rotate(8deg);}
	100% { transform: rotate(0deg);}
  }
  
  @keyframes floatingAirBallon {
	0% { top: 100%;}
	100% { top: -100%;}
  }