@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap');
* {
    font-family: 'Kanit', sans-serif;
}
html {
	scroll-behavior: smooth;
}
.color-green {
	color:#fea41c;
}
a:focus,
button:focus {
	outline-width: 0px;
}
button:focus {
    outline: 0px dotted;
    outline: 0px auto -webkit-focus-ring-color;
}
a:hover,
button:hover {
	filter: brightness(100%);
}
a:disabled,
button:disabled {
	filter: grayscale(80%);
}
body.main-bg {
	background: url("https://cdn.exe.in.th/activities2/uploads/activities/5220/images/main-bg.jpg") top center no-repeat #fff1fe;
	position: relative;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
}
.remark-btn {
	position: fixed;
	z-index: 10;
	bottom: 0;
}
#particles-js { 
    position: fixed; 
    width: 100%; 
    background-image: url(""); 
    background-repeat: no-repeat; 
    background-size: cover; 
    background-position: 50% 50%; 
    z-index: 0;
}
/* NAVBAR */
.main-navbar {
    width: 100%;
    position: fixed;
    top: 0;
    color: #efefef;
    background-color: rgba(33, 4, 86, 0.7);
    z-index: 3;
}
.navbar-brand {
    position: relative;
}
.navbar-brand img {
    width: 120px;
}
.navbar-nav {
    margin: 0 auto;
}
.navbar-nav a.nav-item {
    padding-left: 15px !important;
    padding-right: 15px !important;
    font-weight: 600;
    text-align: center;
    color: #efefef;
    font-size: 18px;
    transition: 0.1s;
}
.navbar-nav a.nav-item span {
    display: block;
    font-weight: 400;
    font-size: 12px;
    color: #aaaaaa;
}
.navbar-nav a.nav-item.active,
.navbar-nav a.nav-item:hover,
.navbar-nav a.nav-item.active span,
.navbar-nav a.nav-item:hover span {
    color: #cfac5a !important;
}
.navbar-social a {
    margin-left: 5px;
    margin-right: 5px;
    background-color: #efefef;
    transition: 0.1s;
}
.navbar-social a:hover {
    background-color: #cfac5a;
}
.navbar {
    padding-left: 0;
    padding-right: 0;
    padding-top: 5px;
    padding-bottom: 5px;
}
.id-name {
    border: 2px solid #d610ed9c;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    font-size: 14px;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
    color: #fff;
    background-color: #00000059;
}
.id-name span {
    padding-right: 10px;
    color: #ffffff;
    font-weight: 600;
}
.logout-btn {
    background: rgb(97, 21, 211);
    background: -moz-linear-gradient(45deg, #6115d3, #dd10ee, #dd10ee, #dd10ee);
    background: -webkit-linear-gradient(45deg, #6115d3, #dd10ee, #dd10ee, #dd10ee);
    background: linear-gradient(45deg, #6115d3, #dd10ee, #6115d3, #dd10ee);
    background-size: 300% auto;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.45s linear;
    color: #fff;
    border-radius: 4px;
    border-top-left-radius: 0px;
    border-bottom-left-radius: 0px;
    font-size: 14px;
    font-weight: 600;
    padding-top: 12px;
    padding-bottom: 9px;
    border-left: 1px;
}
.logout-btn:hover {
    color: #ffffff !important;
    background-position: 100% 0;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
    box-shadow: 0px 0px 2px 0px rgba(214, 67, 227, 0.6);
}
.topup-btn {
	margin-right: 24px;
	font-weight: 500;
	color: #ffffff !important;

	background: rgb(248, 169, 107);
    background: -moz-linear-gradient(45deg, #ffaf20, #fa7725, #fa7725, #fa7725);
    background: -webkit-linear-gradient(45deg, #ffaf20, #fa7725, #fa7725, #fa7725);
    background: linear-gradient(45deg, #ffaf20, #fa7725, #fa7725, #fa7725);
    background-size: 300% auto;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.45s linear;

	border-radius: 40px;
	border: 2px solid #f8a96b;
	padding-top: 10px;
	padding-left: 20px;
	padding-right: 20px;
	
  } 
.topup-btn:hover {
	color: #ffffff !important;
	background-position: 100% 0;
    -webkit-transition: all 0.3s linear;
    -moz-transition: all 0.3s linear;
    transition: all 0.3s linear;
    box-shadow: 0px 0px 2px 0px rgba(214, 67, 227, 0.6);
}
.point-reward {
	font-size: 14px;
	background: #290d4d;
	border: 2px solid #ff35b2;
	color: #ffffff;
	border-radius: 40px;
	margin-right: 10px;
}
.icon-small {
	vertical-align: bottom;
	width: 35px;
	margin-right: 8px;
}
.bonus-point {
	width: 100%;
	color: #ffffff;
	font-size: 14px;
	font-weight: 400;
	text-transform: uppercase;
	padding: 7px 14px 0px 14px;
}
.bonus-point img {
	margin-right: 5px;
}
.refresh-btn {
	background-color: #ffffff;
	width: auto !important;
	font-size: 12px;
	padding: 5px 10px;
	margin: 0 0 0 10px;
	border-radius: 4px;
	text-transform: uppercase;
	font-weight: 600;
	border-width: 0px;
}
.bonus-point .total-point {
	color: #fff401;
}
.btn-refresh {
	padding: 0px 2px;
	color: #ffffff;
}
.btn-refresh i {
	transform: rotate(0deg);
	transition: 1s;
	font-size: 16px;
	line-height: 1em;
}
.btn-refresh:hover,
.btn-refresh:active {
	color: #ffc82c;
}
.btn-refresh:hover i,
.btn-refresh:active i {
	transform: rotate(360deg);
}
.topbar-btn {
	font-weight: 500;
	color: #ffffff !important;
	background: rgb(97, 21, 211);
    background: -moz-linear-gradient(45deg, #6115d3, #dd10ee, #dd10ee, #dd10ee);
    background: -webkit-linear-gradient(45deg, #6115d3, #dd10ee, #dd10ee, #dd10ee);
    background: linear-gradient(45deg, #6115d3, #dd10ee, #6115d3, #dd10ee);
	background-size: 300% auto;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	transition: all 0.45s linear;
	border-radius: 40px;
	padding-top: 10px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 10px;
	font-size: 14px;
} 
.topbar-btn:hover {
	color: #ffffff !important;
	background-position: 100% 0;
	-webkit-transition: all 0.3s linear;
	-moz-transition: all 0.3s linear;
	transition: all 0.3s linear;
	box-shadow: 0px 0px 2px 0px rgba(214, 67, 227, 0.6);
}

/* Main Logo */
.main-logo-event {
	position: relative;
	margin-top: 80px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
}
body.index-bg .main-logo-event {
	margin-top: 20px;
}
.login-btn img {
	transition: 0.2s;
}
.login-btn img:hover {
	transform: scale(95%);
	filter: brightness(120%);
}
/* Rule */
.how-to-box {
    background: none;
    background-color: #ffffff00;
    border: 0px solid #c67739 !important;
    padding: 20px 20px 30px 20px;
    margin-top: 30px;
}
.rule-wrap {
	margin-bottom: 0px;
}
.rule-content {
	margin-top: 0px;
	padding: 30px 30px 30px 20px;
	background-color: rgb(255, 255, 255);
	background-image: none;
	border-radius: 10px;
	box-shadow:  2px 0px 6px rgba(0, 0, 0, 0.5);
	
}
.rule-content ul {
	position: relative;
	padding-left: 35px;
	margin-bottom: 10px;
	color: #292929;
	position: relative;
	z-index: 1;
	text-align: left;
}
.rule-content ul li {
	font-weight: 300;
}
.rule-content ul li::marker {
	color: #15746c;
}
.rule-content ul li:not(:last-child) {
	margin-bottom: 10px;
}
.rule-content ul a,
.rule-content ul a:visited {
	color: #fe391c;
	text-decoration: none;
	border: 1px solid #fe391c;
	border-radius: 4px;
	padding-left: 5px;
	padding-right: 5px;
	padding-top: 2px;
	padding-bottom: 2px;
	font-weight: 500;
}
.rule-content ul a:hover {
	color: #ffffff;
	background: #fe391c;
}
.rule-content h3 {
	color: #15746c;
	font-size: 32px;
	font-weight: 500;
	margin-bottom: 10px;
}
/* End Rule */

/* History */
.history {
	margin-bottom: 40px;
	cursor: pointer;
	color: #fff;
	text-shadow: 0px 0px 8px #fff;
}
.history:hover {
	color: #ff8a34;
	text-shadow: 0px 0px 8px #ff8a34;
}

.history-btn {
	background-color: transparent;
	color: #1f1c1d;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
    margin-bottom: 6px;
	font-size: 11px;
	display: block;
	text-decoration: none;
}
.history-btn:hover {
	color: #d9286a;
}
.history-box {
	background: none;
	background-color: #ffffff;
	border: 0px solid #c67739 !important;
	padding: 20px 20px 30px 20px;
	margin-top: 30px;
}
.modal-body-history {
	padding: 0;
	font-size: 16px;
	margin-bottom: 15px;
	overflow-y: scroll;
	height: 320px;
	border: 2px solid #c9c9c945;
    padding: 0px 10px;
	background-color: #ffffff;
}
.modal-content {
	text-align: center;
	color: #121212;
}
.modal-header {
	color: #ffffff;
	display: inline-block;
	font-size: 24px;
	border: none;
	font-weight: 600;
	padding-bottom: 15px;
	background-color: #1d9f93;
}
.history-box .items-name {
	text-align: left;
	font-size: 13px;
	color: #373737;
	font-weight: 500;
	padding-left: 10px;
}
.history-box .date {
	text-align: right;
	width: 100px;
	font-size: 12px;
	color: #373737;
	font-weight: 500;
	padding-right: 10px;
}

/* footer */
footer {
	margin-top: auto;
	padding-top: 20px;
	padding-bottom: 15px;
	background-color: rgba(33, 4, 86, 1);
}
footer p {
	padding-top: 15px;
	margin-bottom: 0;
	font-weight: 400;
	color: #fff;
	font-size: 12px;
}

/*swal alert*/
.swal2-popup {
	width: 16em !important;
	background-color: #ffefe1 !important;
	border: none !important;
	padding-bottom: 30px !important;
	padding-top: 30px !important;
	border-radius: 20px !important;
}
.getitem-ten {
	width: 32em !important;
}
.getitem-ten .modal-item:first-child {
    margin-top: 0px;
}
.getitem-ten .modal-item {
	width: 47%;
	margin-left: 5px;
	margin-right: 5px;
}
.getitem-ten .swal2-title {
	margin-bottom: 20px;
}
.modal-item-detail {
	padding-left: 10px;
}
.swal2-popup .swal2-header {
	position: relative;
	z-index: 1;
}
.swal2-popup.confirmopen-popup .swal2-header {
	padding: 0 10px;
}
.swal2-header .swal2-image {
	margin: 0;
}
.swal2-popup.confirmopen-popup .swal2-image {
	position: relative;
	top: 0px;
	width: 280px;
	margin-top: 0;
	margin-bottom: 0px;
	z-index: 2;
}
.swal2-popup.not-angpao .swal2-image {
	width: 280px;
}
.swal2-content {
	color: #3a847d !important;
	padding: 0px 10px !important;
	max-height: 320px !important;
	font-size: 14px !important;
	overflow-y: auto;
}
.swal2-content .popup-p span img{
	position: relative !important;
	top: -4px !important;
	margin-right: 5px;
}
.swal2-content .popup-p {
	margin-bottom: 0px !important;
}
.img-point2 {
	position: relative !important;
	top: -4px !important;
	margin-right: 5px;
	margin-left: 5px;
}
.swal2-icon.swal2-error {
	border-color: #ff0101 !important;
	color: #ff0101 !important;
}
.swal2-icon.swal2-error [class^="swal2-x-mark-line"] {
	background-color: #ff0101 !important;
}
.swal2-title {
	font-size: 22px !important;
	color: #e43a95 !important;
	font-weight: 500 !important;
}
.swal2-icon.swal2-info {
	border-color: #ff0101 !important;
	color: #ff0101 !important;
}
.swal2-container.swal2-backdrop-show,
.swal2-container.swal2-noanimation {
	background: rgba(0, 0, 0, 0.7) !important;
}
.swal2-styled:focus {
	outline: 0;
	box-shadow: 0 0 0 3px rgba(100, 150, 200, 0) !important;
}
.swal2-content a {
	color: #ff8a34 !important;
	font-weight: 500;
}
.modal-item {
	padding: 10px 10px;
	margin-bottom: 6px;
	background-color: #d74ba1;
	border-radius: 10px;
}
.modal-item:nth-of-type(2n+0) {
	background-color: #762eb9;
}
.getitem-single .modal-item {
	padding: 15px 15px;
}
.modal-item:first-child {
	margin-top: 15px;
}
.modal-item-name {
	font-size: 14px;
	color: #fff;
}
.modal-item-name2 {
	margin-top: 0px;
	font-size: 24px;
}
.modal-item-pic {
	flex-basis: 60px;
    background: #f8bde8;
    padding: 8px;
    border-radius: 6px;
}
.modal-item-qty {
	color: #d74ba1;
    font-size: 14px;
    background: #ffcdf2;
    display: block;
    width: 70px;
    margin: 0 auto;
    border-radius: 5px;
}
.modal-item-rarity {
	color: #fea41c;
	font-size: 13px;
	margin-bottom: 0;
}
.modal-item-trade {
	font-size: 13px;
	color: #fea41c;
}
.swal2-styled.swal2-confirm {
	background-color: #b10f74 !important;
	color: #ffffff !important;
	font-size: 1.0625em;
	border: 0px solid #bd2f86 !important;
	border-radius: 40px !important;
	padding-left: 20px;
	padding-right: 20px;
	width: 140px;
	cursor: pointer;
}
.swal2-styled.swal2-confirm:hover {
	filter: brightness(120%) !important;
    background-color: #bd2f86 !important;
	color: #ffffff !important;
}
.swal2-cancel.swal2-styled {
	background-color: transparent !important;
	color: #5a5a5a !important;
	font-size: 1.0625em;
	border: 2px solid #5a5a5a !important;
	border-radius: 40px !important;
	padding-left: 20px;
	padding-right: 20px;
	width: 140px;
}
.swal2-cancel.swal2-styled:hover {
	background-color: #5a5a5a !important;
	color: rgb(194, 194, 194) !important;
}
.close-btn {
	-webkit-filter: grayscale(100%);
	filter: grayscale(100%);
	pointer-events: none;
}

/* Table */
.table {
	margin-bottom: 0;
}
.table-point-list {
	border-color: #fea41c;
	border-bottom: 3px solid #fea41c;
}
.table td,
.table th {
	padding: 10px 5px;
	border-bottom: 1px solid #34383c;
	border-top: 0;
	background-color: #ffffff;
	color: #1d9f93;
}
.table th {
	background-color: #15746c;
	color: #fff;
}
.btn-blue-modal {
	width: 120px;
	height: 45px;
	border-radius: 30px;
	color: #fff;
	background-color: #929292 ;
	border: none;
	cursor: pointer;
	outline: none !important;
	font-size: 20px;
	margin-top: 15px;
}
.page-select {
	display: inline-block;
	margin: 0 auto;
}
.page-link {
	position: relative;
	display: block;
	padding: 0.5rem 0.75rem;
	margin-left: -1px;
	line-height: 1.25;
	color: #ffffff;
	background-color: #929292;
	border: 1px solid #929292;
}
.page-item.active .page-link {
	z-index: 3;
	color: #ffffff;
	background-color: #ff5d5d;
	border-color: #ff5d5d;
}
.page-link:hover {
	color: #ffffff;
	background-color: #ff5d5d;
	border-color:#ff5d5d;
}
.page-item.disabled .page-link {
	color: #ffffff;
	pointer-events: none;
	cursor: auto;
	background-color: #ff5d5d !important;
	border-color: #ff5d5d !important;
}

/* Main Game */
.main-event  {
	margin-bottom: 60px;
}
/* Left Bar */
.how-to-play {
	margin-bottom: -70px;
    margin-left: 20px;
	position: relative;
	z-index: 4;
}
.how-to-play img {
	transition: 0.2s;
}
.how-to-play img:hover {
	transform: scale(95%);
	filter: brightness(120%);
}
.leftbar-container {
	margin-top: -50px;
}
.rightbar-container {
	margin-top: -70px;
}
.leftbar-frame {
	padding-top: 130px;
	background-image: url("https://cdn.exe.in.th/activities2/uploads/activities/5220/images/board-left.png");
	background-size: contain;
	background-repeat: no-repeat;
	width: 262px;
	height: 600px;
}
.play-box .btn {
	padding: 0px;
	border: 0px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0px;
	margin-bottom: 5px;
	transition: 0.2s;
	color: #473509;
}
.play-btn-group {
	text-align: center;
}
.play-btn-group .btn img {
	transition: 0.2s;
}
.play-btn-group .btn img:hover {
	transform: scale(95%);
	filter: brightness(120%);
}
.leftbar-underline {
	margin-top: 5px;
	margin-bottom: 10px;
}
.point-row {
	margin-top: 0;
	position: relative;
	display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;
}
.point-icon {
	width: 60px;
	height: 55px;
	margin-right: 10px;
}
.point-counter {
    color: #fff;
    width: 40px;
    height: 40px;
    text-align: center;
    background-color: #d80c67;
	border: 2px solid #ec6aa4;
	border-radius: 50%;
    line-height: 36px;
}
.btn-refresh {
	margin-left: 5px !important;
    margin-right: 0 !important;
    height: 24px;
    width: 16px;
    margin-bottom: 0 !important;
}
/* Boss */
.blood-progress .progress {
	height: 46px;
    border-radius: 23px;
    border: 5px solid #fdf0f0;
    box-shadow: 0px 4px 0px 1px rgba(112, 7, 34, 0.2);
}
@keyframes progresslevel1 {
	from {width: 0;background-color: #efd28a;}
	to {width: 100%;background-color: #db9d28;}
} 
@keyframes progresslevel2 {
	from {width: 0;background-color: #9ce7cd;}
	to {width: 100%;background-color: #149e95;}
} 
@keyframes progresslevel3 {
	from {width: 0;background-color: #d38ced;}
	to {width: 100%;background-color: #6927b0;}
} 
@keyframes progresslevel4 {
	from {width: 0;background-color: #f7a9c6;}
	to {width: 100%;background-color: #d82468;}
} 
.blood-progress .progress-bar.progress-bar-level_1 {
	background-color: #db9d28;
	-webkit-animation: progresslevel1 1.5s ease-in-out forwards;
	animation: progresslevel1 1.5s ease-in-out forwards, 1s linear infinite progress-bar-stripes;
}
.blood-progress .progress-bar.progress-bar-level_2 {
	background-color: #149e95;
	-webkit-animation: progresslevel2 1.5s ease-in-out forwards;
	animation: progresslevel2 1.5s ease-in-out forwards, 1s linear infinite progress-bar-stripes;
}
.blood-progress .progress-bar.progress-bar-level_3 {
	background-color: #6927b0;
	-webkit-animation: progresslevel3 1.5s ease-in-out forwards;
	animation: progresslevel3 1.5s ease-in-out forwards, 1s linear infinite progress-bar-stripes;
}
.blood-progress .progress-bar.progress-bar-level_4 {
	background-color: #d82468;
	-webkit-animation: progresslevel4 1.5s ease-in-out forwards;
	animation: progresslevel4 1.5s ease-in-out forwards, 1s linear infinite progress-bar-stripes;
}

.hp-title {
	position: absolute;
	top: -15px;
	right: -15px;
    z-index: 2;
}
.love-level-info {
	position: absolute;
    top: -35px;
    right: -25px;
    z-index: 2;
	cursor: pointer;
}
.custom-tooltip {
    font-size: 12px;
    --bs-tooltip-bg: #741750; 
    --bs-tooltip-max-width: : 240px;
}
.boss-info {
	margin-top: -60px;
	position: relative;
	z-index: 4;
}
.boss-image {
	position: relative;
}
.normal-attack {
	top: 30%;
	left: 0;
	margin-left: auto;
	margin-right: auto;
	right: 0;
	width: 168px;
	height: 158px;
	position: absolute;
	z-index: 3;
}
.pay-attack {
	top: 30%;
	left: 0;
	margin-left: auto;
	margin-right: auto;
	right: 0;
	width: 168px;
	height: 158px;
	position: absolute;
	z-index: 3;
}
.normalx10-attack {
	top: 0;
	left: 0;
	margin-left: auto;
	margin-right: auto;
	right: 0;
	width: 336px;
	height: 519px;
	position: absolute;
	z-index: 3;
}
.payx10-attack {
	top: 0;
	left: 0;
	margin-left: auto;
	margin-right: auto;
	right: 0;
	width: 336px;
	height: 519px;
	position: absolute;
	z-index: 3;
	overflow: hidden;
}
@-webkit-keyframes float {
	0% {transform: translatey(10px);}
	50% {transform: translatey(-10px);}
	100% {transform: translatey(10px);}
}
@keyframes float {
	0% {transform: translatey(10px);}
	50% {transform: translatey(-10px);}
	100% {transform: translatey(10px);}
}
#boss-img{
	transform: translatey(10px);
	-webkit-animation: float 4s ease-in-out infinite;
	animation: float 4s ease-in-out infinite;
}
/* X1 */
.free-sprite-animation {
    background: url("https://cdn.exe.in.th/activities2/uploads/activities/5220/images/normal-sprite.png") left center;
    width: 168px;
	height: 200px;
    animation: normalSprite 1s steps(22) forwards;
}
@keyframes normalSprite {
    100% { background-position: -3696px;}
}
.pay-sprite-animation {
    background: url("https://cdn.exe.in.th/activities2/uploads/activities/5220/images/gold-sprite.png") left center;
    width: 168px;
	height: 200px;
    animation: goldSprite 1s steps(22) forwards;
}
@keyframes goldSprite {
	100% { background-position: -3696px;}
}
/* X10 */
.freex10-sprite-animation {
    background: url("https://cdn.exe.in.th/activities2/uploads/activities/5220/images/normalx10-sprite.png") left center;
    width: 336px;
	height: 519px;
    animation: normalx10Sprite 1.2s steps(14) forwards;
}
@keyframes normalx10Sprite {
    100% { background-position: -4704px;}
}
.payx10-sprite-animation {
    background: url("https://cdn.exe.in.th/activities2/uploads/activities/5220/images/goldx10-sprite.png") left center;
    width: 336px;
	height: 519px;
    animation: goldx10Sprite 1.2s steps(14) forwards;
}
@keyframes goldx10Sprite {
    100% { background-position: -4704px;}
}
/* RightBar */
.rightbar-container {
	margin-top: -45px;
}
.rightbar-container a img {
	transition: 0.2s;
}
.rightbar-container a img:hover {
	transform: scale(95%);
	filter: brightness(120%);
}
@media only screen and (min-width: 768px) and (max-width: 1440px) {

}

@media only screen and (min-width: 768px) {

}
@media only screen and (max-width: 1199.98px) {

}
@media only screen and (max-width: 991.98px) {
	body.main-bg {
		background-size: cover;
	}
	.main-navbar {
		position: static;
	}

	.logout-btn {
		border-top-right-radius: 30px;
    	border-bottom-right-radius: 30px;
	}
	.main-logo-event {
		margin-top: 20px;
		margin-bottom: 5px;
	}

	/* Point */
	.point-mobile {
		margin-bottom: 20px;
		z-index: 4;
		position: relative;
	}
	.point-reward {
		background: #290d4d;
		border: 2px solid #ff35b2;
		color: #ffffff;
		border-radius: 40px;
		margin-right: 10px;
	}
	.bonus-point {
		font-size: 12px;
		padding: 6px 14px 6px 14px;
	}
	/* Leftbar */
	.leftbar-frame {
		margin-top: 20px;
		padding-top: 0px;
		width: auto;
		height: auto;
		display: flex;
		background-image: none;
	}
	.leftbar-underline {
		display: none;
	}

	.how-to-play {
		position: relative;
		z-index: 4;
		margin-bottom: 0;
		margin-left: 0;
		top: 41px;
        left: -20px;
	}
	.history-btn {
		margin-bottom: 2px;
	}
	/* Boss */
	.boss-image {
		width: 50%;
		margin: 0 auto;
	}
	.boss-info {
		margin-top: -30px;
	}
	.blood-progress .progress {
		height: 32px;
		border: 3px solid #fdf0f0;
		box-shadow: 0px 3px 0px 1px rgba(112, 7, 34, 0.2);
	}
	.hp-title {
		position: absolute;
		top: -15px;
		right: -15px;
		z-index: 2;
	}
	.hp-title img {
		width: 70px;
	}
	.boss-name {
		margin-top: 15px;
	}
	/* Right Bar */
	.rightbar-container {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		margin-bottom: 20px;
		margin-top: 0;
	}
	.rightbar-container a img {
		width: 140px;
	}
	.play-box {
        background-color: #ff8fcd;
        margin-left: 5px;
        margin-right: 5px;
        border-radius: 14px;
        border: 2px solid #ed1776;
        padding: 16px 10px 16px 10px;
        background-image: url(https://cdn.exe.in.th/activities2/uploads/activities/5220/images/board-left-m.jpg);
        background-size: cover;
        background-position: top center;
        box-shadow: 0px 3px rgba(0, 0, 0, 0.2);
    }
}
@media only screen and (max-width: 767.98px) {
	.topbar-btn {
		margin-left: 0px;
		margin-bottom: 5px;
		width: 100%;
	}
	.navbar {
		justify-content: center !important;
		flex-direction: column !important;
		padding-bottom: 10px;
	}
	body.main-bg {
		background-color: #2a0b4c;
	}
	body.index-bg {
		background-size: cover;
	}
	body.main-bg {
		background-size: cover;
		background-position: center center;
	}
	.point-reward{
		margin-right: 0;
		width: 100%;
	}
	.bonus-point {
		padding-bottom: 8px;
	}
	.exe-profile {
		margin-top: 5px;
		margin-bottom: 5px;
	}
	.id-name {
		width: 100%;
	}
	.main-logo-event img {
		width: 75%;
	}
	.rule-content {
		margin-top: 10px;
		padding: 20px 15px;
	}
	.rule-content h3 {
		font-size: 24px;
	}
	.rule-content ul li {
		font-size: 14px;
	}
	.rule-content ul {
		padding-left: 20px;
	}
	.rightbar-container {
		flex-wrap: wrap;
	}
	.rightbar-container a img {
        width: 90px;
    }
	/* Boss */
	.boss-stage {
		position: relative;
	}
	.bonus-point {
		font-size: 10px;
		padding: 5px 6px 6px 6px;
	}
	.bonus-point img {
		width: 14px;
	}
	.boss-image {
		width: 240px;
	}
	.normalx10-attack,
	.payx10-attack {
		left: -20%;
        top: -30%;
        background-size: cover;
        background-repeat: no-repeat;
        transform: scale(0.65);
	}
	.how-to-play {
		margin-bottom: 0;
		margin-left: 0;
		position: absolute;
		z-index: 4;
        right: 0px;
		left: auto;
		top: 40px;
	}
	.how-to-play img{
		width: 80px;
	}
	.leftbar-container {
		margin-top: 0;
	}
	.swal2-popup {
		width: 18em !important;
	}
	.swal2-popup.getitem-ten  {
		width: 32em !important;
	}
	.remark-btn {
		display: none;
	}
}
@media only screen and (max-width: 564.98px) {
	.rule-content ul li:not(:last-child) {
		margin-bottom: 0px;
	}
	.rule-content {
		margin-top: 15px;
	}
	.rule-content ul a {
		display: block;
		text-align: center;
		width: 100%;
		margin-bottom: 5px;
	}
	.point-row {
		margin-top: 7px;
		margin-bottom: 7px;
	}
	.point-icon img {
		width: 40px;
	}
	.point-icon {
		width: auto;
		height: auto;
	}
	.swal2-popup.getitem-ten  {
		width: 18em !important;
	}
	.getitem-ten .modal-item {
		width: 100%;
		margin-left: 0px;
		margin-right: 0px;
	}
}
@media only screen and (max-width: 366.98px) {	
	.point-counter {
		/* top: 2%; */
		/* left: 48.3%; */
		/* width: 40px; */
		/* height: 40px; */
		line-height: 36px;
		font-size: 12px;
	}
}