/*--------------------------------------------------------------------- import Files ---------------------------------------------------------------------*/
@import url(fonts.css);
@import url(responsive.css);

* {
	box-sizing: border-box !important;
}

html {
	scroll-behavior: smooth;
}

*,
*::after,
*::before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

body {
	font-family: 'Conv_TH Chakra Petch';
	font-size: 2rem;
}
/*---------------------------- preloader area ----------------------------*/


.sticky-container {
	padding: 0px;
	margin: 0px;
	position: fixed;
	right: -110px;
	bottom: 0px;
	width: 200px;
}

.sticky li {
	list-style-type: none;
	background-color: #333;
	color: #efefef;
	height: 42px;
	padding: 0px;
	margin: 0px;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;
	-o-transition: all 0.25s ease-in-out;
	transition: all 0.25s ease-in-out;
	cursor: pointer;
	
}

	.sticky li:hover {
		margin-left: -115px;
	}

	.sticky li img {
		float: left;
		margin-right: 10px;
	}

	.sticky li p {
		padding: 0px;
		margin: 0px;
		text-transform: uppercase;
		line-height: 43px;
		font-size: 2rem;
	}

/*-- navigation start --*/

.navigation.navbar {
	float: right;
	padding: 0px;
}

.navigation.navbar-dark .navbar-nav .nav-link {
	padding: 0 25px;
	color: #fff;
	font-size: 2rem;
	line-height: 20px;
	text-transform: uppercase;
}

	.navigation.navbar-dark .navbar-nav .nav-link:focus,
	.navigation.navbar-dark .navbar-nav .nav-link:hover {
		color: #f6d601;
		padding-bottom: 10px;
		border-bottom: 5px solid #FF0000;
	}

	.navigation.navbar-dark .navbar-nav .active > .nav-link,
	.navigation.navbar-dark .navbar-nav .nav-link.active,
	.navigation.navbar-dark .navbar-nav .nav-link.show,
	.navigation.navbar-dark .navbar-nav .show > .nav-link {
		color: #f6d601;
		outline: 5px solid #FF0000;
		outline-offset: 1px;
	}

.navbar-expand-md .navbar-nav {
	padding-right: 10px;
}

.sign_btn a {
	background-color: #f6d601;
	display: inline-block;
	padding: 7px 35px;
	border-radius: 30px;
	color: #000;
	font-size: 17px;
}

	.sign_btn a:hover {
		color: #fff;
	}

.full {
	float: left;
	width: 100%;
	margin: 0;
	padding: 0;
}

.header {
	z-index: 99;
}
/*-- navigation end --*/

.title-p {
	color: #fff;
}

.title-p1 {
	font-size: 3rem;
}

.section-2 .content-left {
	background-color: #0098BB;
	color: #fff;
}

.section-2 h1 {
	margin-top: 15%;
	font-family: 'Conv_TH Chakra Petch Bold';
	font-size: 2.5rem;
	font-weight: bold;
	color: #FF0000;
}

.section-2 img {
	/*margin-top:unset;*/
	width: 100%;
}

#P-1, #P-2 {
	width: 80%;
}

p {
	font-size: 1.2rem;
}

.section-3 {
	margin-top: -50px;
}

	.section-3 h1 {
		font-family: 'Conv_TH Chakra Petch Bold';
		font-size: 3rem;
		font-weight: bold;
		color: #FF0000;
	}

	.section-3 h2 {
		font-family: 'Conv_TH Chakra Petch Bold';
		font-size: 2.2rem;
		font-weight: bold;
		color: #00ADBB;
	}

	.section-3 h3 {
		font-family: 'Conv_TH Chakra Petch Bold';
		font-size: 2rem;
		font-weight: bold;
		/*vertical-align: middle;*/
		line-height: 90px;
		/*color : #fff;*/
		/*background-color: #eedcca;*/
	}

	.section-3 img {
		width:100%;
		padding: 2px 2px 2px 2px;
	}

.img-resize {
	width: 600px;
	/*height: 200px;*/
	overflow: hidden;
	text-align: center;
}

	.img-resize img {
		width: 600px;
		height: auto;
	}

.uael-separator {
	width: 20%;
	border-top-width: 3px;
	border-top-color: #000;
	display: inline-block;
	box-sizing: border-box;
	border-top-style: solid;
}

#bg_col_left {
	background-color: #daeaf5;
	color: #0f0f0f;
}

#bg_col_right {
	background-image: url("images/BG01.png");
	background-size: cover;
	background-position: center;
}

.section-4 {
	background-color: #f6f6f6;
}

	.section-4 h1 {
		font-family: 'Conv_TH Chakra Petch Bold';
		font-size: 3rem;
		font-weight: bold;
		color: #FF0000;
	}

	.section-4 h2 {
		font-family: 'Conv_TH Chakra Petch Bold';
		font-size: 2.2rem;
		font-weight: bold;
		color: #00ADBB;
	}

	.section-4 img {
		width: 100%;
		/*height: 120px;margin-bottom: 20px;
    margin-top: 20px;*/
		padding: 2px 2px 2px 2px;
	}

.ps {
	font-size: 28px;
}

.section-5 img {
	width: 100%;
	margin-bottom: 20px;
}
.section-5 h2 {
	font-size : 2.5rem;
	font-weight : bold;
}
.section-5 p {
	font-size : 1.8rem;
}
.section-5 {
	/*
		background-image: url(images/Banner02.png)  ;
	background-size: cover;
	background-position: center;
	background-color: #757678;height: 390px;

	*/
	margin-top: -40px;
	padding: 0px;
	background-color: #fff;
	color: #0f0f0f;
	/*font-size: 20px;*/
}

.section-6 {
	/*background-image: url(images/Banner03.png)  ;
	background-size: cover;
	background-position: center;
    background-color: #1259a1;*/
	color: #0f0f0f;
	background-color: #daeaf5;
}

	.section-6 img {
		width: 80%;
		/*margin-bottom: 20px;
    margin-top: 20px;*/
	}

.footer {
	background-color: #333;
	color: white;
	margin-top: -40px;
}

	.footer h2 {
		font-size: 2rem;
	}

	.footer p {
		font-size: 20px;
	}

	.footer .ps {
		font-size: 16px;
	}
	.footer img {
		width:50%;
	}


section {
	padding-bottom: 50px;
	padding-top: 50px;
}

.delay-1s {
	animation-delay: 1s;
}

.delay-500ms {
	animation-delay: 0.5s;
}

.delay-1500ms {
	animation-delay: 1.5s;
}

.delay-2500ms {
	animation-delay: 2.5s;
}

.section-1 .row {
	padding: 0px 5%;
}

h1 {
	font-size: 2rem;
}

.img-100 {
	width: 100%;
}

.img-70 {
	width: 70%;
}

.img-60 {
	width: 60%;
}

.img-50 {
	width: 50%;
}

.img-30 {
	width: 30%;
}

.img-10 {
	width: 10%;
	text-align: center;
	margin-bottom: 20px;
}

.img-top100 {
	margin-top: 100px;
}

.title-text-div {
	position: absolute;
	top: 10%;
	/*color: white;*/
}

.text-center {
	text-align: center !important;
}

.title-text {
	text-align: right !important;
	/*text-align: left !important;*/
}

/* *** เพิ่มเติม code  11 Feb 2020 *** */

.linetub {
	position: relative;
}

	.linetub:before {
		position: absolute;
		content: "";
		left: 0;
		top: 50%;
		right: 0;
		border-top: 2px solid;
		border-color: red;
		-webkit-transform: rotate(-10deg);
		-moz-transform: rotate(-10deg);
		-ms-transform: rotate(-10deg);
		-o-transform: rotate(-10deg);
		transform: rotate(-10deg);
	}

/* *** เพิ่มเติม code  11 Feb 2020 *** */

.buy-button {
	display: block;
	background-image: url("Images/Button01.png");
	background-repeat: no-repeat;
	width: 350px;
	/*height: 45px;
	margin: 1rem auto;*/
	height: 90px;
	color: #fff;
	background-size: 100%;
}

	.buy-button:hover {
		background-image: url("Images/Button02.png");
	}

	.buy-button.-grey-bg {
		background-image: url("images/button_31.png");
		height: 50px;
		width: 150px;
		background-size: 100%;
	}

		.buy-button.-grey-bg:hover {
			background-image: url("images/button_32.png");
		}

	.buy-button span {
		display: none;
	}


@media screen and (min-width: 769px) {
	body {
		font-family: 'Conv_TH Chakra Petch';
	}

	.title-h1 {
		font-size: 3rem;
	}

	.title-p {
		/*font-size: 24px;*/
	}

	.title-text-div {
		position: absolute;
		/*top: 152px;
		color: white;*/
	}
}

@media screen and (min-width: 880px) {
	body {
		font-family: 'Conv_TH Chakra Petch';
	}

	.title-h1 {
		font-size: 3rem;
	}

	.title-p {
		/*font-size: 28px;*/
	}

	.title-text-div {
		position: absolute;
		/*top: 175px;
		color: white;*/
	}
}

@media screen and (min-width: 1024px) {
	body {
		font-family: 'Conv_TH Chakra Petch';
	}

	.title-h1 {
		font-size: 4rem;
	}

	.title-p {
		/*font-size: 32px;*/
		color: #fff;
	}

	.title-p1 {
		/*margin-top: -2%;*/
	}

	.title-p2 {
		/*margin-top: -5%;*/
	}

	.title-p3 {
		margin-top: -10%;
	}

	.title-text-div {
		position: absolute;
		/*top: 220px;
		color: white;*/
	}
}

@media screen and (min-width: 1156px) {
	body {
		font-family: 'Conv_TH Chakra Petch';
	}

	.title-h1 {
		font-size: 4.5rem;
	}

	.title-p {
		/*font-size: 37px;*/
	}


	.title-text-div {
		position: absolute;
		/*top: 220px;
		color: white;*/
	}
}

@media screen and (min-width: 1360px) {
	body {
		font-family: 'Conv_TH Chakra Petch';
	}

	.title-h1 {
		font-size: 7.5rem;
		color: #fff;
	}

	.title-p {
		/*font-size: 72px;*/
		color: #fff;
	}

	.title-p1 {
		/*margin-top: -2%;*/
	}

	.title-p2 {
		margin-top: -1%;
	}

	.title-p3 {
		margin-top: -8%;
	}

	.title-text-div {
		position: absolute;
		/*top: 220px;
		color: white;*/
	}
}

@media screen and (min-width: 1600px) {
	body {
		font-family: 'Conv_TH Chakra Petch';
	}

	.title-h1 {
		font-size: 6rem;
	}

	.title-p {
		/*font-size: 52px;*/
	}

	.title-text-div {
		position: absolute;
		/*top: 310px;
		color: white;*/
	}
}

@media screen and (min-width: 1920px) {
	body {
		font-family: 'Conv_TH Chakra Petch';
	}

	.title-h1 {
		font-size: 7.5rem;
	}

	.title-p {
		/*font-size: 62px;*/
	}


	.title-text-div {
		position: absolute;
		/*top: 500px;
		color: white;*/
	}

	.section-6 {
		background-image: url(images/Banner03.png);
		background-size: 50% cover;
		background-position: top;
	}

	.c1 {
		margin-top: 150px;
	}
}

@media screen and (min-width: 2560px) {
	body {
		font-family: 'Conv_TH Chakra Petch';
	}

	.title-p1 {
		font-size: 3rem;
	}

	.title-p2 {
		/*margin-top: -8%;*/
	}

	.title-p3 {
		margin-top: -10%;
	}

	.title-h1 {
		font-size: 10rem;
	}

	.title-p {
		/*font-size: 82px;*/
	}


	.title-text-div {
		position: absolute;
		/*top: 700px;
		color: white;*/
	}

	.section-6 {
		background-image: url(images/Banner03.png);
		background-size: 50% cover;
		background-position: top;
	}

	.c1 {
		margin-top: 180px;
	}
}

@media screen and (max-width: 768px) {
	body {
		font-family: 'Conv_TH Chakra Petch';
	}

	.order-mobile-1 {
		-ms-flex-order: 1 !important;
		order: 1 !important;
	}

	.order-mobile-0 {
		-ms-flex-order: 0 !important;
		order: 0 !important;
	}

	/* headder menu  start*/
	.logo {
		text-align: center !important;
		padding-bottom: 6px;
		float: left;
	}
	/*.navigation.navbar-dark .navbar-nav .nav-link {
          padding: 0px 10px;
     }*/
	.navigation.navbar {
		float: right;
		display: inherit !important;
		padding: 0;
		width: 100%;
		margin-top: -45px;
	}

	.navigation .navbar-collapse {
		background: #333;
		padding: 20px;
		margin-top: 46px;
		width: 100%;
		margin-right: 20px;
		position: relative;
	}

	.navigation.navbar-dark .navbar-nav .nav-link {
		padding: 10px 0;
		color: #fff;
	}

	.navigation.navbar-dark .navbar-toggler {
		float: right;
		margin-right: 2px;
		border: inherit;
	}

	.navigation.navbar-dark .navbar-toggler-icon {
		background: url(../Images/menu_icon.png);
		background-repeat: no-repeat;
	}
	/* headder menu end  */

	.section-1 .row {
		padding: unset;
	}

	#P-1, #P-2 {
		width: 70%;
	}

	.section-1 {
		background-image: none;
	}

		.section-1 .img-100 {
			width: 30%;
		}

	.section-2 {
		margin-top: -50px;
	}

		.section-2 img {
			margin-top: unset;
			width: 100%;
		}

		.section-2 h1 {
			margin-top: 5%;
		}

		.section-2 h3 {
			font-size: 1.8rem;
		}

	.section-3 h4 {
			font-size: 2rem;
			font-weight:bold;
		}
	.section-3 p {
			font-size: 1.8rem;
		}

	.section-5 {
		/*margin-top: -60px;*/
	}

		.section-5 img {
			width: 100%;
		}

		/*.section-5 h1 {
			font-size: 24px;
		}*/

	h1 {
		font-size: 1.5rem;
	}

	h2 {
		font-size: 1.3rem;
	}

	h3 {
		font-size: 1.1rem;
	}

	p {
		font-size: 18px;
	}

	.title-text {
		text-align: left !important;
	}

	.title-text-div {
		position: relative;
		top: 5%;
		padding: 15px;
		/*color: black;
		top: auto;
		z-index: 99;
		top: -100%;*/
	}

	.title-p {
		color: #0f0f0f;
		margin-bottom: 0px;
	}

		.title-p h1 {
			color: #00ADBB;
		}

	.title-p1 {
		font-size: 3rem;
	}

	.title-p2 {
		font-size: 1.8rem;
	}

	.title-p3 {
		margin-top: -10%;
	}

	#P-3, #P-4 {
		width: 100%;
	}

	.social-icon {
		padding-left: 5px;
		padding-right: 5px;
	}

	.footer {
		padding-top: 0px;
	}

		.footer h2 {
			font-size: 1.6rem;
		}

		.footer p {
			font-size: 18px;
		}

		.footer .ps {
			font-size: 14px;
		}

	.img-resize {
		width: 100%;
	}

	.img-resize img {
		width: 100%;
		height: auto;
	}
}