/*--- general style ---*/
.s-small-text {
	font-size: 0.8125rem;
}
.small-text {
	font-size: 0.875rem;
}
.normal-text {
	font-size: 1rem;
}
.large-text {
	font-size: 1.125rem;
}
.l-large-text {
	font-size: 1.5rem;
}
.l2-large-text {
	font-size: 1.6875rem;
}
.fontsize-12 {
	font-size: 0.75rem;
}
.fontsize-13 {
	font-size: 0.8125rem;
}
.fontsize-14 {
	font-size: 0.875rem;
}
.fontsize-15 {
	font-size: 0.9375rem;
}
.fontsize-16 {
	font-size: 1rem;
}
.fontsize-17 {
	font-size: 1.0625rem;
}
.fontsize-18 {
	font-size: 1.125rem;
}
.fontsize-19 {
	font-size: 1.1875rem;
}
.fontsize-20 {
	font-size: 1.25rem;
}
.fontsize-22 {
	font-size: 1.375rem;
}
.fontsize-23 {
	font-size: 1.4375rem;
}
.fontsize-25 {
	font-size: 1.5625rem;
}
.fontsize-27 {
	font-size: 1.6875rem;
}
.regular-text {
	font-weight: 400;
}
.regular-text2 {
	font-weight: 500;
}
.bold-text {
	font-weight: 600;
}
.extra-bold-text {
	font-weight: 700;
}
.underline-text {
	text-decoration: underline;
}
.sarabun-font {
	font-family: 'Sarabun', sans-serif;
}
/*--- color ---*/
.text-gainsboro {
	color: gainsboro !important;
}
.text-pink {
	color: #C13F65 !important;
}
.text-palevioletred {
	color: palevioletred !important;
}
.text-darkgray {
	color: darkgray !important;
}
.text-lightgray {
	color: lightgray !important;
}
.text-dimgray {
	color: dimgray !important;
}
.text-gray {
	color: gray !important;
}
.text-default {
	color: #404040 !important;
}
.text-chula {
	color: #B43B6B !important;
}
.text-darkorange {
	color: darkorange !important;
}
.text-dodgerblue {
	color: #1e90ff !important;
}
.text-scb {
	color: #482E7C !important;
}
.text-darkcyan {
	color: #008B8B !important;
}
/*--- background color ---*/
.cover-background {
	background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	background-position: center center;
}
.bg-pink {
	background-color: #DE5C8E !important;
}
.bg-palevioletred {
	background-color: palevioletred !important;
}
.bg-ghostwhite {
	background-color: ghostwhite !important;
}
.bg-lightgrey {
	background-color: lightgrey !important;
}
.bg-dimgrey {
	background-color: dimgrey !important;
}
.bg-silver {
	background-color: silver !important;
}
.bg-gray {
	background-color: gray !important;
}
.bg-gainsboro {
	background-color: gainsboro !important;
}
.bg-lightyellow {
	background-color: lightyellow !important;
}
.bg-lightblue {
	background-color: lightblue !important;
}
.bg-lightpink {
	background-color: lightpink !important;
}
.bg-moccasin {
	background-color: moccasin !important;
}
.bg-teal {
	background-color: Teal !important;
}
.bg-chula {
	background-color: #b43b6b !important;
}
.bg-whitesmoke {
	background-color: whitesmoke !important;
}
.bg-egg {
	background-color: #F6EFEE !important;
}
.bg-greenapple {
	background-color: #C6E1CC !important;
}
.bg-light-grey {
	background-color: #F5F5F5 !important;
}
.bg-light-orange {
	background-color: #E7D6CA !important;
}
.bg-sky {
	background-color: #9AD6F1 !important;
}
/*--- border ---*/
.border-gainsboro {
	border: 1px solid gainsboro;
}
.border-palevioletred {
	border: 1px solid palevioletred;
}
.border-lightgrey {
	border: 1px solid lightgrey;
}
.border-bottom {
	border-bottom: 1px solid gainsboro;
}
.dash {
	border-style: dashed;
}
/*--- round corner ---*/
.round-25 {
	border-radius: 25px;
}
/*--- position ---*/
.position-p1 {
	position: relative;
	top: 1px;
}
.position-p2 {
	position: relative;
	top: 2px;
}
.position-p3 {
	position: relative;
	top: 3px;
}
.position-p4 {
	position: relative;
	top: 4px;
}
.position-p5 {
	position: relative;
	top: 5px;
}
.position-m1 {
	position: relative;
	top: -1px;
}
.position-m2 {
	position: relative;
	top: -2px;
}
.position-m3 {
	position: relative;
	top: -3px;
}
.position-m4 {
	position: relative;
	top: -4px;
}
.position-m5 {
	position: relative;
	top: -5px;
}
.position-m6 {
	position: relative;
	top: -6px;
}
.position-m7 {
	position: relative;
	top: -7px;
}
/*--- cursor ---*/
.cursor-none {
	cursor: normal;
}
.cursor-pointer {
	cursor: pointer;
}
/*--- sizing ---*/
.width-10 {
	width: 10%;
}
.width-15 {
	width: 15%;
}
.width-20 {
	width: 20%;
}
.width-33 {
	width: 33.33%;
}
.width-25 {
	width: 25%;
}
.width-50 {
	width: 50%;
}
.w-100px {
	width: 100px;
}
.w-150px {
	width: 150px;
}
.w-200px {
	width: 200px;
}
.w-250px {
	width: 250px;
}
.w-300px {
	width: 300px;
}
.w-350px {
	width: 350px;
}
.w-400px {
	width: 400px;
}
.w-500px {
	width: 500px;
}
.h-30px {
	height: 30px;
}
.h-50px {
	height: 50px;
}
.h-70px {
	height: 70px;
}
.h-100px {
	height: 100px;
}
.h-150px {
	height: 150px;
}
.h-200px {
	height: 200px;
}
/*--- align ---*/
.align-center {
	margin-left: center;
	margin-right: center;
}
.div-center {
	display: flex;
	box-sizing: border-box;
	justify-content: center;
	flex-wrap: wrap;
}
/*--- flex layout ---*/
.flex-box {
	display: flex;
}
.flex-box-sb {
	display: flex;
	box-sizing: border-box;
	justify-content: space-between;
	flex-wrap: wrap;
}
.flex-box-right {
	display: flex;
	box-sizing: border-box;
	justify-content: flex-end;
	flex-wrap: wrap;
}
.flex-box-left {
	display: flex;
	box-sizing: border-box;
	justify-content: flex-start;
	flex-wrap: wrap;
}
.flex-box-center {
	display: flex;
	box-sizing: border-box;
	justify-content: center;
	flex-wrap: wrap;
}
.flex-box-around {
	display: flex;
	box-sizing: border-box;
	justify-content: space-around;
	flex-wrap: wrap;
}
.flex-direction-col {
	flex-direction: column;
}
.flex-grow {
	flex: 1;
}
.flex-item {
	flex: 1;
}
.flex-gapcol-0 {
	column-gap: 0px;
}
.flex-gapcol-5 {
	column-gap: 5px;
}
.flex-gapcol-10 {
	column-gap: 10px;
}
.flex-gapcol-15 {
	column-gap: 15px;
}
.flex-gapcol-20 {
	column-gap: 20px;
}
.flex-gapcol-25 {
	column-gap: 25px;
}
.flex-gapcol-30 {
	column-gap: 30px;
}
.flex-gapcol-40 {
	column-gap: 40px;
}
.flex-gapcol-50 {
	column-gap: 30px;
}
.flex-gaprow-0 {
	row-gap: 0px;
}
.flex-gaprow-5 {
	row-gap: 5px;
}
.flex-gaprow-10 {
	row-gap: 10px;
}
.flex-gaprow-15 {
	row-gap: 15px;
}
.flex-gaprow-20 {
	row-gap: 20px;
}
.flex-gaprow-30 {
	row-gap: 30px;
}
.flex-gaprow-40 {
	row-gap: 40px;
}
.flex-gaprow-50 {
	row-gap: 50px;
}
.flex-gaprow-60 {
	row-gap: 60px;
}
.flex-gaprow-70 {
	row-gap: 70px;
}
.flex-item-0 {
	padding-left: 0px;
	padding-right: 0px;
}
.flex-item-5 {
	padding-left: 5px;
	padding-right: 5px;
}
.flex-item-10 {
	padding-left: 10px;
	padding-right: 10px;
}
.flex-item-15 {
	padding-left: 15px;
	padding-right: 15px;
}
.flex-item-20 {
	padding-left: 20px;
	padding-right: 20px;
}
.flex-item-30 {
	padding-left: 30px;
	padding-right: 30px;
}
.flex-align-center {
	align-items: center !important;
	align-self: center !important;
	align-content: center !important;
}
.flex-align-start {
	align-items: flex-start;
}
.flex-align-stretch {
	align-items: stretch;
}
/*--- div box ---*/
.flex-square {
  padding-bottom: 100%;
	background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	background-position: center center;
}
.flex-169 {
  padding-bottom: 56.25%;
	background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
	background-position: center center;
}
.flex-43 {
	padding-bottom: 75%;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.flex-w25 {
	width: 25%;
	padding-left: 5px;
	padding-right: 5px;
}
.flex-w25 {
	width: 20%;
	padding-left: 5px;
	padding-right: 5px;
}
/*--- table column ---*/
.colsize-30px {
  width: 30px;
}
.colsize-50px {
  width: 50px;
}
.colsize-80px {
  width: 80px;
}
.colsize-100px {
  width: 100px;
}
.colsize-5 {
  width: 5%;
}
.colsize-10 {
  width: 10%;
}
.colsize-12 {
  width: 12%;
}
.colsize-15 {
  width: 15%;
}
.colsize-20 {
  width: 20%;
}
.colsize-25 {
  width: 25%;
}
.colsize-30 {
  width: 30%;
}
.colsize-35 {
  width: 35%;
}
.colsize-40 {
  width: 40%;
}
.colsize-45 {
  width: 45%;
}
.colsize-50 {
  width: 50%;
}
.colsize-auto {
	width: auto;
}
/*--- layout ---*/
.box-item-25 {
	width: 25%;
}
.box-item-33 {
	width: 33.33%;
}
.box-item-50 {
	width: 50%;
}