@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Sarabun:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;1,400&display=swap');
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

@import url('animate.css');

:root
{
	/* Default max width */
	--global-content-max-width: 1580px;
	--global-content-wrapper-max--width: 1200px;
	--global-partner-wrapper-max--width: 1170px;

    /* Font Family */
	--global-font-family: 'Kanit', sans-serif;
	--menu-font-family: 'Sarabun', sans-serif;

    /* Font Size */
    --global-font-size-base: 20px;
    --global-font-size-typo10: 10px;
    --global-font-size-typo11: 11px;
    --global-font-size-typo12: 12px;
    --global-font-size-typo13: 13px;
    --global-font-size-typo14: 14px;
    --global-font-size-typo15: 15px;
    --global-font-size-typo16: 16px;
    --global-font-size-typo17: 17px;
    --global-font-size-typo18: 18px;
	--global-font-size-typo20: 20px;
	--global-font-size-typo22: 22px;
	--global-font-size-typo24: 24px;
	--global-font-size-typo26: 26px;
	--global-font-size-typo28: 28px;
	--global-font-size-typo29: 29px;
	--global-font-size-typo30: 30px;
	--global-font-size-typo32: 32px;
	--global-font-size-typo34: 34px;
	--global-font-size-typo35: 35px;
	--global-font-size-typo38: 38px;
	--global-font-size-typo40: 40px;
	--global-font-size-typo42: 42px;
	--global-font-size-typo48: 48px;
	--global-font-size-typo58: 58px;
	--global-font-size-typo68: 68px;
	--global-font-size-typo68: 76px;

	/* Font weight */
	--global-font-weight-xlight: 200;
	--global-font-weight-light: 300;
	--global-font-weight-regular: 400;
	--global-font-weight-medium: 500;
	--global-font-weight-semibold: 600;
	--global-font-weight-bold: 700;

    /* Colors */
	--color-black: #111111;
	--color-white: #ffffff;
	--color-green: #0d8d21;
	--color-red: #d6363b;
	--color-yellow: #ffec59;
	--color-orange: #fb8b12;
	--color-fullservice-gray: #f0f0f0;
	--color-blue-button: #007bde;
	--color-blue: #214db3;
	--color-light-blue: #b3ddfe;
	--color-light-blue-2: #6cbdff;
	--color-navy-black: #35374B;
	--color-gray: #495057;
	--color-gray-2: #585858;
	--color-gray-button: #3d3d3d;
}

body,
html
{
	font-family: var(--global-font-family);
	font-size: var(--global-font-size-base);
	line-height: 1.25;
	color: var(--color-white);
	background-color: var(--color-black);
}

.fullscreen-width {
	max-width: 100vw;
	overflow: hidden;
}

button:focus{
    outline: none;
}

.p-absolute {
	position: absolute;
}

/* /////////////////////////////////////////////////////////////////////////// */
.container {
	max-width: 100vw;
}

#section-top-banner,
#section-content {
	position: relative;
}

#section-01-top-banner .container,
#section-02-news .container,
#section-03-character .container,
#section-04-game-system .container {
	max-width: 100vw;
	position: relative;
}

.pc {
	display: block;
}

.tb,
.mb {
	display: none;
}

#section-nav {
	background-color: var(--color-white);
	position: fixed;
	z-index: 999999;
	-webkit-box-shadow: 0px 10px 13px -10px rgba(121, 121, 121, 0.5);
	box-shadow: 0px 10px 13px -10px rgba(121, 121, 121, 0.5);
}

#section-nav #nav-top-main {
	color: var(--color-black);
	width: 1100px;
	height: 60px;
	margin: auto;
	display: block;
}

#section-nav #nav-top-main .container {
	height: 100%;
	flex-wrap: wrap;
	align-items: center;
}

#section-nav #nav-top-main #nav-list-container {
	padding-left: 20px;
	padding-right: 20px;
}

#section-nav #nav-top-main #nav-list-container ul {
	margin-bottom: unset;
	padding-inline-start: unset;
	list-style: none;
	font-size: var(--global-font-size-typo22);
	font-weight: var(--global-font-weight-medium);
}

#section-nav #nav-top-main #nav-list-container ul li a {
	cursor: pointer;
	color: var(--color-black);
	text-decoration: none;
}

#section-nav #nav-top-main #nav-list-container ul li a:hover,
#section-nav #nav-top-main #nav-list-container ul li a:visited,
#section-nav #nav-top-main #nav-list-container ul li a:active {
	text-decoration: none;
	color: var(--color-black);
}

#section-nav #nav-mobile {
	display: none;
}

#section-01-top-banner #top-banner-mask {
	top: 0;
}

#section-01-top-banner #top-banner-mask ul {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	margin: auto;
}

#section-01-top-banner #top-banner-mask #btn-sale-pack {
	display: flex;
	justify-content: center;
}

#section-02-news #news-board {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

#section-02-news #news-board .content {
	position: absolute;
	width: 100%;
	top: 0;
	margin-right: 0;
	margin-left: 0;
	padding-top: 7rem;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

#section-02-news #news-board .column-left {
	padding-bottom: 0.5rem;
	padding-right: 30px;
}

#section-02-news #news-board .column-right {
	padding-left: 30px;
}

#section-02-news #news-board .div-indicators {
	position: relative;
    padding: 10px 32px;
    border: 0 solid;
    border-radius: 15px;
    background-color: #decdbc;
	left: 50%;
	transform: translateX(-50%);
	width: max-content;
	margin-top: 14px;
}

#section-02-news #news-board .carousel-indicators {
	margin-bottom: unset;
    margin-left: unset;
    margin-right: unset;
    position: relative;
	width: max-content;
}

#section-02-news #news-board .carousel-indicators li {
	width: 20px;
	height: 20px;
	background-color: #907f6f;
	opacity: 1;
	border: 0 solid transparent;
    border-radius: 10px;
	margin-right: 6px;
    margin-left: 6px;
}

#section-02-news #news-board .carousel-indicators li.active {
	background-color: #ee4900;
}

#section-02-news #news-board .carousel-item img {
	width: 100%;
	height: auto;
}

#section-02-news #news-board #news-title-list {
	color: #d3b5a4;
	background-color: #512f0c;
	border: 2px solid #512f0c;
    border-radius: 16px;
}

#section-02-news #news-board #news-title-list ul {
	list-style: none;
    padding-inline-start: unset;
    margin-block-start: unset;
    margin-block-end: unset;
    margin-bottom: unset;
    display: flex;
	justify-content: space-around;
    align-items: center;
	padding-top: 3px;
    padding-bottom: 3px;
}

#section-02-news #news-board #news-title-list li.list-item {
	padding: 8px 20px;
	cursor: pointer;
}

#section-02-news #news-board #news-title-list li.list-item.active {
	color: #ffffff;
	background-color: #6e4418;
	border: 0 solid;
    border-radius: 6px;
}

#section-02-news #news-board .news-list {
	display: none;
	color: #553b2b;
	font-size: 17px;  
}

#section-02-news #news-board .news-list a {
	text-decoration: none;
	color: #553b2b;
}

#section-02-news #news-board .news-list.active {
	display: block;
	padding: 10px 12px;
}

#section-02-news #news-board .news-list .news-item {
	display: flex;
    flex-direction: row;
    align-items: center;
    flex-wrap: nowrap;
	padding: 19px 0;
	border-bottom: 2px dashed rgba(81, 47, 12, 0.7);
}

#section-02-news #news-board .news-list .news-title {
	-webkit-box-orient: vertical;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    overflow: hidden;
	text-overflow: ellipsis;
	padding-right: 16px;
}

#section-02-news #news-board .news-list .publish-date {
	padding: 16px 20px;
	background-color: #cc4d00;
	color: #ffffff;
	border: 0;
    border-radius: 12px;
	padding: 8px 12px;
	font-size: 16px;
}

#section-02-news #news-board .news-list .btn-more-news {
	position: absolute;
	bottom: 12px;
	padding-right: 3rem;
	width: 100%;
}

#section-02-news #news-board .news-list .btn-more-news a {
	display: block;
	width: 100%;
	color: #ffffff;
	background-color: #553b2b;
	border: 0 solid;
    border-radius: 17px;
	text-align: center;
	padding: 12px;
	text-decoration: none;
}

#section-02-news ol,
#section-03-character ol {
	margin-top: unset;
	margin-bottom: unset;
	margin-block-start: unset;
	margin-block-end: unset;
	padding-inline-start: unset;
}

#section-03-character .main-content {
	position: absolute;
	width: 1100px;
	margin: auto;
	top: 0;
	margin-top: 6rem;
	left: 50%;
    transform: translateX(-50%);
	text-align: center;
}

#section-03-character .main-content #content-mask {
	position: absolute;
	top: 0;
	z-index: 9950;
}

#section-03-character .main-content #content-mask img {
	position: relative;
}

#section-03-character .main-content #content-mask ul.btn-char-list {
	position: relative;
	display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
	z-index: 9913;
	padding-inline-start: unset;
    margin-bottom: unset;
	margin-top: 5px;
	list-style: none;
}

#section-03-character .main-content #content-mask ul li {
	cursor: pointer;
	margin: 0 8px;
}

#section-03-character .main-content #header-title {
	position: relative;
	z-index: 9915;
}

#section-03-character .main-content #content {
	position: absolute;
	top: 0;
	z-index: 9912;
}

#section-03-character .main-content #content img {
	display: none;
}

#section-03-character .main-content #content .pc.active {
	display: block;
}

#section-03-character .main-content #content .tb.active,
#section-03-character .main-content #content .mb.active {
	display: none;
}

#section-03-character .dsp-char.tb,
#section-03-character .dsp-char.mb {
	display: none;
}

#section-04-game-system .owl-carousel.owl-drag .owl-item {
	padding: 0 22px;
}

#section-04-game-system .owl-carousel .owl-item img {
	border: 4px solid #290c4e;
	border-radius: 4px;
	filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.8));
}

#section-04-game-system .owl-theme .owl-dots .owl-dot span {
	width: 20px;
	height: 20px;
    background-color: #6d6d6d;
	margin: 5px 10px;
}

#section-04-game-system .owl-theme .owl-dots .owl-dot.active span,
#section-04-game-system .owl-theme .owl-dots .owl-dot:hover span {
	background-color: #ee4900;
}

.owl-theme .owl-nav.disabled+.owl-dots {
	margin-top: 36px;
}


#section-04-game-system #header-title {
	position: absolute;
    display: inline;
    top: 3.5rem;
	width: 100%;
	text-align: center;
}

#section-04-game-system .carousel-slide {
	position: absolute;
    display: inline;
    top: 11rem;
}

#section-footer {
	padding: 90px 0;
}

#section-footer .img-logo {
	width: fit-content;
	margin: auto;
}

#section-footer .img-logo img {
	padding: 0 5px;
}

#section-footer .txt {
	width: fit-content;
	margin: auto;
	font-size: 18px;
	font-weight: 300;
}

/* /////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 1800px) {
	 #section-02-news #news-board .content {
		padding-top: 6.5rem;
		padding-left: 1rem;
    	padding-right: 1rem;
	}

	#section-02-news #news-board .news-list .news-item {
		padding: 14px 0;
	}

	#section-03-character .main-content #content-mask,
	#section-03-character .main-content #content {
		left: 50%;
		transform: translateX(-50%);
	}

	#section-04-game-system .carousel-slide {
		top: 9rem;
	}

	#section-04-game-system .owl-theme .owl-dots .owl-dot span {
		width: 18px;
		height: 18px;
	}

	.owl-theme .owl-nav.disabled+.owl-dots {
		margin-top: 24px;
	}
}

/* /////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 1650px) {
	#section-nav #nav-top-main #nav-list-container ul li a {
		font-size: 20px;
	}

	#section-02-news #news-board #news-title-list li.list-item {
		padding: 6px 17px;
	}

	#section-02-news #news-board #news-title-list {
		font-size: 18px;
	}

	#section-02-news #news-board .content {
        padding-top: 5.5rem;
	}

	#section-02-news #news-board .div-indicators {
		padding: 8px 25px;
	}

	#section-02-news #news-board .carousel-indicators li {
		width: 18px;
		height: 18px;
	}

	#section-02-news #news-board .news-list {
		font-size: 14px;
	}

	#section-02-news #news-board .news-list .news-item {
		padding: 12px 0;
	}

	#section-02-news #news-board .news-list .news-title {
		padding-right: 10px;
	}

	#section-02-news #news-board .news-list .publish-date {
		border-radius: 8px;
		padding: 6px 11px;
		font-size: 12px;
	}

	#section-footer .txt {
		font-size: 16px;
	}
}

/* /////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 1440px) {
	#section-02-news #news-board .content {
		padding-top: 5rem;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
	}

	#section-02-news #news-board .column-left {
		padding-right: 20px;
	}

	#section-02-news #news-board .column-right {
		padding-left: 20px;
	}

	#section-02-news #news-board #news-title-list {
		font-size: 16px;
	}

	#section-02-news #news-board .carousel-indicators li {
		width: 18px;
    	height: 18px;
	}

	#section-02-news #news-board .div-indicators {
		padding: 8px 22px;
		margin-top: 10px;
	}
}

/* /////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 1366px) {
	#section-02-news #news-board .content {
		padding-top: 4.5rem;
        padding-left: 0.4rem;
        padding-right: 0.4rem;
	}
	
	#section-02-news #news-board .carousel-indicators li {
		width: 16px;
    	height: 16px;
	}

	#section-02-news #news-board .div-indicators {
		padding: 8px 22px;
		margin-top: 10px;
	}

	#section-02-news #news-board .news-list {
		font-size: 14px;
	}

	#section-02-news #news-board .news-list .news-item {
		padding: 12px 0;
	}

	#section-02-news #news-board .news-list .news-title {
		padding-right: 10px;
	}

	#section-02-news #news-board .news-list .publish-date {
		border-radius: 8px;
		padding: 6px 11px;
		font-size: 12px;
	}

	#section-02-news #news-board .news-list .btn-more-news {
		bottom: 8px;
	}

	#section-02-news #news-board .news-list .btn-more-news a {
		border-radius: 15px;
  		padding: 8px;
	}

	/* #section-footer .txt {
		font-size: 16px;
	} */

}

/* /////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 1280px) {
	#section-nav #nav-top-main #nav-list-container ul li a {
        font-size: 18px;
    }

	#section-02-news #news-board .content {
		padding-top: 4.3rem;
	}

	#section-02-news #news-board #news-title-list {
		font-size: 14px;
	}

	#section-02-news #news-board #news-title-list li.list-item {
		padding: 5px 13px;
	}

	#section-02-news #news-board .carousel-indicators li {
        width: 15px;
        height: 15px;
    }

	#section-02-news #news-board .div-indicators {
		padding: 7px 13px;
	}

	#section-02-news #news-board .news-list {
		font-size: 14px;
	}

	#section-02-news #news-board .news-list .news-item {
		padding: 10px 0;
	}

	/* #section-02-news #news-board .news-list .news-title {
		padding-right: 10px;
	}

	#section-02-news #news-board .news-list .publish-date {
		border-radius: 8px;
		padding: 6px 11px;
		font-size: 12px;
	}

	#section-02-news #news-board .news-list .btn-more-news {
		bottom: 8px;
	}

	#section-02-news #news-board .news-list .btn-more-news a {
		border-radius: 15px;
  		padding: 8px;
	}

	#section-footer .txt {
		font-size: 16px;
	} */
}

/* /////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 1200px) {
	#section-02-news #news-board .content {
		padding-top: 3.8rem;
	}

	#section-02-news #news-board #news-title-list li.list-item {
		padding: 5px 13px;
	}

	#section-02-news #news-board .carousel-indicators li {
        width: 15px;
        height: 15px;
    }

	#section-02-news #news-board .div-indicators {
		padding: 7px 13px;
	}

	#section-02-news #news-board .news-list {
		font-size: 12px;
	}

	#section-02-news #news-board .news-list.active {
		padding: 6px 12px;
	}

	#section-02-news #news-board .news-list .news-item {
		padding: 10px 0;
	}

	#section-02-news #news-board .news-list .news-title {
		padding-right: 10px;
	}

	#section-02-news #news-board .news-list .publish-date {
		border-radius: 6px;
		padding: 4px 5px;
		font-size: 10px;
	}

	#section-02-news #news-board #news-title-list {
		border-radius: 12px;
	}

	#section-footer .txt {
		font-size: 14px;
	}
}

/* /////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 1024px) {
}

/* /////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 460px) {
}