@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;
}

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

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

div#section-top-banner .container,
div#section-content .container {
	max-width: 100vw;
	position: relative;
}

#section-top-banner video {
	position: absolute;
    top: 0;
}

.p-absolute {
	position: absolute;
}

.ghost-float {
	top: 490px;
	right: 9.5%;
	position: fixed;
	z-index: 991;
	cursor: pointer;
}

.ghost-float img {
	display: none;
}

.btn-play-vdo {
	top: 330px;
	left: 50%;
	transform: translateX(-50%);
	cursor: pointer;
}

.btn-play-vdo img {
	width: 297px;
	height: auto;
}

.btn-google-play {
	top: 760px;
	left: 31.6%;
}

.btn-google-play img,
.btn-app-store img {
	width: 332px;
	height: auto;
}

.btn-app-store {
	top: 760px;
	left: 51%;
}

.btn-app-store,
.btn-google-play {
	display: none;
}

.carousel-banner {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-42%);
	width: 1410px;
	overflow: hidden;
}

.carousel-banner .carousel-control-next, 
.carousel-banner .carousel-control-prev {
	width: unset;
	opacity: 1;
}

.carousel-banner .carousel-control-next-icon, 
.carousel-banner .carousel-control-prev-icon {
	background-image: unset;
	width: auto;
	height: auto;
	margin-bottom: 2rem;
}

.carousel-banner .carousel-control-next-icon::before {
	font-family: FontAwesome;
	font-size: 5rem;
	content: "\f054";
}

.carousel-banner .carousel-control-prev-icon::before {
	font-family: FontAwesome;
	font-size: 5rem;
	content: "\f053";
}

.carousel-banner .carousel-indicators li {
	width: 28px;
	height: 28px;
	border-top: unset;
	border-bottom: unset;
	border-radius: 14px;
	margin-right: 12px;
	margin-left: 12px;
	opacity: 1;
}

.carousel-banner .carousel-indicators li.active {
	background-color: #df7131;
}

.carousel-inner {
	width: 85%;
	margin: auto;
	padding-bottom: 4rem;
}

#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;
}

#section-top-banner .layer-bg .pc,
#section-content .layer-bg .pc,
#section-top-banner #top-banner-mask .pc {
	display: block;
}

#section-top-banner .layer-bg .tb,
#section-content .layer-bg .tb,
#section-top-banner .layer-bg .mb,
#section-content .layer-bg .mb,
#section-top-banner #top-banner-mask .tb,
#section-top-banner #top-banner-mask .mb {
	display: none;
}

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

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

.carousel-item .pc {
	display: block;
}

.carousel-item .tb {
	display: none;
}

.btn-google-play .pc,
.btn-app-store .pc {
	display: block;
}

.btn-google-play .mb,
.btn-app-store .mb {
	display: none;
}

.modal-content {
	background-color: unset;
	border: 0 solid;
}

.modal-header {
	border-bottom: 0 solid;
}

.modal-header .close {
	color: white;
	opacity: 1;
	padding: unset;
}

.modal.show .modal-dialog .modal-xl {
	max-width: 70%;
}

/* /////////////////////////////////////////////////////////////////////////// */
@media screen and (min-width: 2000px) {
	.carousel-banner {
		width: 65%;
	}

	.carousel-banner .carousel-indicators li {
		width: 40px;
		height: 40px;
		border-top: unset;
		border-bottom: unset;
		border-radius: 20px;
		margin-right: 18px;
		margin-left: 18px;
		opacity: 1;
	}

	.carousel-indicators {
		margin-bottom: 0rem;
	}
}

/* /////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 1400px) {
	.carousel-banner {
		width: 90%;
	}
}

/* /////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 1024px) {
	.btn-play-vdo {
		top: 450px;
	}

	.btn-google-play {
		left: 6.6%;
	}

	.btn-google-play,
	.btn-app-store {
		top: 820px;
	}

	.btn-play-vdo img {
		width: 560px;
	}

	.btn-google-play img,
	.btn-app-store img {
		width: 800px;
		height: auto;
	}

	.carousel-banner {
        width: 94%;
	}

	.carousel-inner {
		width: 76%;
	}

	.carousel-banner .carousel-control-next-icon, 
	.carousel-banner .carousel-control-prev-icon {
		margin-bottom: 3rem;
	}

	.carousel-banner .carousel-control-next-icon::before,
	.carousel-banner .carousel-control-prev-icon::before {
		font-size: 4rem;
	}

	#section-top-banner .layer-bg .pc,
	#section-content .layer-bg .pc,
	#section-top-banner .layer-bg .mb,
	#section-content .layer-bg .mb,
	#section-top-banner #top-banner-mask .pc,
	#section-top-banner #top-banner-mask .mb {
		display: none;
	}

	#section-top-banner .layer-bg .tb,
	#section-content .layer-bg .tb,
	#section-top-banner #top-banner-mask .tb {
		display: block;
	}

	.carousel-item .pc {
		display: none;
	}

	.carousel-item .tb {
		display: block;
	}
}

/* /////////////////////////////////////////////////////////////////////////// */
@media screen and (max-width: 460px) {
	.btn-play-vdo {
		top: 415px;
	}

	.btn-play-vdo img {
		width: 780px;
	}

	.btn-google-play .pc,
	.btn-app-store .pc {
		display: none;
	}

	.btn-google-play .mb,
	.btn-app-store .mb {
		display: block;
	}

	#section-top-banner .layer-bg .pc,
	#section-content .layer-bg .pc,
	#section-top-banner .layer-bg .tb,
	#section-content .layer-bg .tb,
	#section-top-banner #top-banner-mask .pc,
	#section-top-banner #top-banner-mask .tb {
		display: none;
	}

	#section-top-banner .layer-bg .mb,
	#section-content .layer-bg .mb,
	#section-top-banner #top-banner-mask .mb {
		display: block;
	}

	#section-top-banner #top-banner-btn ul {
		width: 95%;
		margin: auto;
	}

	#section-top-banner #top-banner-btn ul img {
		width: 100%;
	}

	.carousel-inner {
        width: 94%;
    }

	.carousel-banner .carousel-indicators li {
		width: 18px;
		height: 18px;
		border-radius: 10px;
		margin-right: 8px;
		margin-left: 8px;
	}

	.carousel-control-next, 
	.carousel-control-prev {
		align-items: end;
	}

	.carousel-control-next {
		margin-right: 7%;

	}

	.carousel-control-prev {
		margin-left: 7%;
	}

	.carousel-banner .carousel-control-next-icon, 
	.carousel-banner .carousel-control-prev-icon {
        margin-bottom: 0.5rem;
	}
	
	.carousel-banner .carousel-control-next-icon::before, 
	.carousel-banner .carousel-control-prev-icon::before {
        font-size: 32px;
	}
	
	#section-footer .img-logo img {
		height: 70px;
		width: auto;
	}

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