@charset "utf-8";
/* CSS Document */
/* Developed and copyright by Supawee "Bom" Ippoodom */

/* Reset - Start */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
font,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
}

body {
	line-height: 1;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote:before,
blockquote:after,
q:before,
q:after {
	content: "";
	content: none;
}

:focus {
	outline: 0;
}

ins {
	text-decoration: none;
}

del {
	text-decoration: line-through;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

:focus {
	outline: transparent !important;
}

/* Reset - End */

* {
	margin: 0 0;
	padding: 0 0;
}

a,
a:hover,
a:active,
a:visited {
	text-decoration: none;
	cursor: pointer;
}

a img {
	border: none;
}

.noinnertext {
	font-size: 0;
	line-height: 0;
	overflow: hidden;
	text-indent: -999em;
	text-decoration: none;
}

.al-l {
	text-align: left;
}

.al-c {
	text-align: center;
}

.al-r {
	text-align: right;
}

.medium {
	font-weight: 500;
}

.bold {
	font-weight: 700;
}

.italic {
	font-style: italic;
}

.underline {
	text-decoration: underline;
}

.img-fullwidth {
	max-width: 100%;
}

.img-maxwidth {
	width: 100%;
}

.nopadding {
	padding: 0;
}

.uppercase {
	text-transform: uppercase;
}

.lowercase {
	text-transform: lowercase;
}

.no-lineheight {
	line-height: 0;
}

h1,
h2,
h3,
h4,
h5,
p,
b,
strong,
li {
	font-weight: normal;
}

/* Fonts - Start */
.f-DINNext {
	font-family: "DINNext", sans-serif;
}

.f-DINNextRounded {
	font-family: "DINNextRounded", sans-serif;
}

.f-Maitree {
	font-family: "Maitree", sans-serif;
}

h1,
.large {
	font-size: 42px;
	line-height: 52px;
}

.large {
	line-height: 0;
}

h2 {
	font-size: 32px;
	line-height: 42px;
}

h3 {
	font-size: 28px;
	line-height: 38px;
}

h4 {
	font-size: 24px;
	line-height: 34px;
}

h5 {
	font-size: 16px;
	line-height: 26px;
}

p,
li {
	font-size: 16px;
	line-height: 26px;
}

.small {
	font-size: 12px;
	line-height: 16px;
}

html[lang="jp"] p,
html[lang="jp"] li {
	font-size: 14px;
	line-height: 24px;
}

html[lang="jp"] .small {
	font-size: 10px;
	line-height: 14px;
}

.texteditor h1,
.texteditor h1,
.texteditor h1,
.texteditor h1,
.texteditor h1,
.texteditor p,
.texteditor li {
	width: 100%;
	display: inline-block;
	line-height: unset;
}

.texteditor p,
.texteditor li {
	margin: 0.5rem 0;
	line-height: 1.8rem;
}

.text-indent {
	text-indent: 1rem;
}

/* Fonts - End */

/* Color Identity - Start */
.white {
	color: #fff;
}

.black {
	color: #000;
}

.green {
	color: #a9c93e;
}

.blue {
	color: #396ded;
}

.red {
	color: #e22934;
}

.yellow {
	color: #f6fc39;
}

.lime {
	color: #c8ea60;
}

.grey {
	color: #666;
}

/* Color Identity - End */

/* Background - Start */
.bg-transparent {
	background-color: transparent;
}

.bg-black {
	background-color: #000;
}

.bg-green {
	background-color: #a9c93e;
}

.bg-grey {
	background-color: #f0f0f0;
}

.bg-blue {
	background-color: #396ded;
}

.bg-red {
	background-color: #e22934;
}

.bg-yellow {
	background-color: #f6fc39;
}

.bg-lime {
	background-color: #c8ea60;
}

.bg-lightgrey {
	background-color: #f8f8f8;
}

.bg-white-transparent {
	background-color: rgba(255, 255, 255, 0.4);
}

.bg-white {
	background-color: #ffffff;
}

/* Background - End */

/* Border - Start */
.noborder {
	border: none !important;
}

.border {
	border: 1px solid !important;
}

.border-top {
	border-top: 1px solid !important;
}

.border-right {
	border-right: 1px solid !important;
}

.border-bottom {
	border-bottom: 1px solid !important;
}

.border-left {
	border-left: 1px solid !important;
}

.border-radius {
	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-o-border-radius: 15px;
}

.border-rounded {
	border-radius: 20px;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	-o-border-radius: 20px;
}

/* Border Size - Start */
.border-2px {
	border-width: 2px !important;
}

.border-3px {
	border-width: 3px !important;
}

.border-4px {
	border-width: 4px !important;
}

.border-5px {
	border-width: 5px !important;
}

.border-6px {
	border-width: 6px !important;
}

.border-7px {
	border-width: 7px !important;
}

.border-8px {
	border-width: 8px !important;
}

.border-9px {
	border-width: 9px !important;
}

.border-10px {
	border-width: 10px !important;
}

/* Border Size - End */

/* Border Color - Start */
.border-black {
	border-color: #000 !important;
}

.border-white {
	border-color: #fff !important;
}

.border-green {
	border-color: #a9c93e !important;
}

.border-blue {
	border-color: #396ded !important;
}

.border-red {
	border-color: #e22934 !important;
}

.border-yellow {
	border-color: #f6fc39 !important;
}

.border-lime {
	border-color: #c8ea60 !important;
}

.border-grey {
	border-color: #959595 !important;
}

.border-lightgrey {
	border-color: #dee2e6 !important;
}

/* Border Color - End */

/* Border - End */

/* Button - Start */
.btn {
	padding: 0.5rem 1rem;

	transition: 0.2s background-color linear, 0.2s color linear;
	-webkit-transition: 0.2s background-color linear, 0.2s color linear;
	-moz-transition: 0.2s background-color linear, 0.2s color linear;
	-o-transition: 0.2s background-color linear, 0.2s color linear;

	font-size: 18px;
	line-height: 18px;

	border-radius: 15px;
	-webkit-border-radius: 15px;
	-moz-border-radius: 15px;
	-o-border-radius: 15px;
}

.btn i {
	font-size: 18px;
}

.btn-wide {
	padding: 0.5rem 4rem;
}

.btn-medium {
	font-size: 26px;
	line-height: 26px;
}

.btn-small {
	font-size: 12px;
	line-height: 12px;
}

.btn-text {
	transition: 0.2s color linear;
	-webkit-transition: 0.2s color linear;
	-moz-transition: 0.2s color linear;
	-o-transition: 0.2s color linear;
}

/* Color Button - Start */
.btn-black {
	border-color: #000;
	background-color: #000;
	color: #fff;
}

.btn-green {
	border-color: #a9c93e;
	background-color: #a9c93e;
	color: #fff;
}

.btn-blue {
	border-color: #396ded;
	background-color: #396ded;
	color: #fff;
}

.btn-red {
	border-color: #e22934;
	background-color: #e22934;
	color: #fff;
}

.btn-yellow {
	border-color: #f6fc39;
	background-color: #f6fc39;
	color: #000;
}

.btn-lime {
	border-color: #c8ea60;
	background-color: #c8ea60;
	color: #fff;
}

.btn-white-transparent {
	border-color: #fff;
	background-color: transparent;
	color: #fff;
}

.btn-green-transparent {
	border-color: #a9c93e;
	background-color: transparent;
	color: #a9c93e;
}

.btn-grey {
	border-color: #8c8c8c;
	background-color: #8c8c8c;
	color: #fff;
}

/* Color Button - End */

/* On Hover - Start */
.btn-black:hover {
	background-color: #fff;
	color: #000;
}

.btn-green:hover {
	border-color: #8aac18;
	background-color: #8aac18;
	color: #fff;
}

.btn-blue:hover {
	border-color: #396ded;
	background-color: transparent;
	color: #396ded;
}

.btn-red:hover {
	border-color: #e22934;
	background-color: transparent;
	color: #e22934;
}

.btn-yellow:hover {
	border-color: #f6fc39;
	background-color: transparent;
	color: #f6fc39;
}

.btn-lime:hover {
	border-color: #c8ea60;
	background-color: transparent;
	color: #c8ea60;
}

.btn-white-transparent:hover {
	border-color: #fff;
	background-color: #fff;
	color: #a9c93e;
}

.btn-green-transparent:hover{
    background-color: #8aac18;
	color: #fff;
}

.btn-text.white:hover {
	color: #fff;
}

.btn-grey:hover {
	border-color: #6c6b6b;
	background-color: #6c6b6b;
	color: #fff;
}

/* On Hover - End */

/* Disabled State - Start */
.btn.btn-green[disabled] {
	color: #fff !important;
	background-color: #a9c9a5 !important;
}

.btn.btn-black-transparent[disabled] {
	background-color: #e1e1e1 !important;
	color: #a9c83f !important;
}

/* Disabled State - End */

/* Button - End */

/* Form - Start */
.form {
	position: relative;
	margin-bottom: 3rem;
}

.form div.control-group {
	position: relative;
	margin-top: 10px;
	margin-bottom: 10px;
}

.form div.control-group .control-label {
	margin-bottom: 0.25rem;
	font-size: 14px;
	line-height: 18px;
}

.form div.control-group .mk-trc {
	height: auto;
	font-size: 14px;
}

.form div.control-group .mk-trc[data-color="light-green"] i {
	background: transparent;
}

.form div.control-group .mk-trc[data-style="radio"] i:before {
	border: 2px solid rgba(0, 0, 0, 0.2);
}

.form div.control-group .mk-trc[data-color="light-green"] input:checked+label i,
.mk-trc[data-style="radio"][data-color="light-green"] input:checked+label i:before {
	background: rgba(139, 195, 74, 1);
}

.form div.control-group .mk-trc[data-style="radio"] input:checked+label i::before {
	border-color: #fff;
}

.form div.control-group.error .mk-trc {
	color: #ff0000;
}

.form div.control-group.error .mk-trc[data-color="light-green"] i {
	background: rgba(255, 0, 0, 0.6);
}

/* .form div.control-group .mk-trc label{
	display:flex;
	align-items:center;
} */
.form .symbol::after {
	content: "";
	margin-left: 0.5rem;
}

.form .symbol.required::after {
	content: "*";
	color: #ff0000;
}

.form div.control-group .controls {
	margin: 0 0 1rem 0;
	position: relative;
}

.form div.control-group .controls p {
	font-size: 14px;
}

.form div.control-group .controls input[type="text"],
.form div.control-group .controls input[type="tel"],
.form div.control-group .controls input[type="email"],
.form div.control-group .controls input[type="number"],
.form div.control-group .controls input[type="password"],
.form div.control-group .controls input[type="date"],
.form div.control-group .controls select,
.form div.control-group .controls textarea,
.form div.control-group .mk-trc label input[type="text"] {
	width: 100%;
	font-size: 14px;
	line-height: 25px;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-o-border-radius: 0;

	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;

	min-height: 43px;

	border: 1px solid #000;

	padding: 0.5rem;
}

.form div.control-group .controls input[type="date"] {
	line-height: 23px;
}

.form div.control-group .controls input[readonly="true"],
.form div.control-group .controls select[readonly="true"],
.form div.control-group .controls select[disabled],
.form div.control-group .controls textarea[readonly="true"],
.form div.control-group .controls input[readonly],
.form div.control-group .controls select[readonly],
.form div.control-group .controls select[disabled],
.form div.control-group .controls textarea[readonly] {
	background-color: #cfcfcf;
}

.form div.control-group .controls .btnShowPassword {
	position: absolute;
	top: calc(50% - 8px);
	right: 1rem;
}

.form div.control-group .controls .btnShowPassword i.fas {
	color: #000;

	transition: 0.2s color linear;
	-webkit-transition: 0.2s color linear;
	-moz-transition: 0.2s color linear;
	-o-transition: 0.2s color linear;
}

.form div.control-group.error .controls .btnShowPassword i.fas {
	color: #ff0000;
}

.form div.control-group.error .controls input[type="password"] {
	border-color: #ff0000;
}

.form div.control-group .controls .btnShowPassword[data-status="false"] i.fa-eye-slash {
	display: none;
}

.form div.control-group .controls .btnShowPassword[data-status="true"] i.fa-eye {
	display: none;
}

.form div.control-group .mk-trc label input.w-20 {
	width: 20%;
	min-width: 60px;
}

.form div.control-group .controls.custom-selectbox {
	position: relative;
}

.form div.control-group .controls.custom-selectbox i.fas.fa-caret-down {
	font-size: 14px;
	position: absolute;
	top: calc(50% - 7px);
	right: 1rem;
}

.form div.control-group .controls.custom-selectbox select {
	box-sizing: border-box;

	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;

	background-color: transparent;
	border: 1px solid #000;
	padding: 0.5rem;
	margin: 0;
	width: 100%;
	height: 100%;

	font-size: 14px;
	line-height: 25px;

	cursor: default;
}

.form div.control-group .controls.custom-selectbox select[disabled] {
	background-color: #cfcfcf;
	border: 1px solid #000;
	color: #000;
	opacity: 1;
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-o-opacity: 1;
}

.form div.control-group .controls .select2-selection {
	padding: 0.5rem;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-o-border-radius: 0;
	background: #fff;
	font-size: 14px;
	line-height: 24px;
}

.select2-results__option {
	font-size: 14px;
	line-height: 14px;
}

.form div.control-group .controls .select2-container--default .select2-selection--single .select2-selection__rendered {
	line-height: 14px;
	font-size: 14px;
	padding-left: 0;
}

.form .select2-container--default .select2-selection--single .select2-selection__arrow {
	height: 100%;
}

.form div.control-group.mk-trc i {
	height: 22px;
}

.form div.control-group.mk-trc[data-style="radio"] i,
.form div.control-group.mk-trc[data-style="check"] i {
	width: 22px;
	background: transparent;
}

.form div.control-group.mk-trc label {
	font-size: 14px;
}

/* .form div.control-group.error - Start */
.form div.control-group.error .control-label {
	color: #e22934;
}

.form div.control-group.error .controls input[type="text"],
.form div.control-group.error .controls input[type="tel"],
.form div.control-group.error .controls input[type="email"],
.form div.control-group.error .controls input[type="number"],
.form div.control-group.error .controls input[type="password"],
.form div.control-group.error .controls input[type="date"],
.form div.control-group.error .controls select,
.form div.control-group.error .controls textarea,
.form div.control-group.error .mk-trc label input[type="text"] {
	border-color: #e22934;
	color: #e22934;
}

.form div.control-group input.error {
	border-color: #e22934 !important;
	color: #e22934 !important;
}

.form div.control-group .remark.error {
	color: #e22934;
}

/* .form div.control-group.error - End */

/* .form-check-inline - Start */
.form-check-inline {
	font-size: 22px;
	line-height: 22px;
	margin-right: 1rem;
}

.form-check-inline .form-check-label {
	margin-top: 0.5rem;
	margin-left: 0.5rem;
}

/* .form-check-inline - End */

/* MK TRC - Start */
.form div.control-group.c-navy.mk-trc[data-style="check"] i {
	border-color: #132947;
}

.form div.control-group.c-navy.mk-trc input:checked+label i {
	background: #132947;
}

.form div.control-group.c-gold.mk-trc[data-style="check"] i {
	border-color: #846647;
}

.form div.control-group.c-gold.mk-trc input:checked+label i {
	background: #846647;
}

/* MK TRC - End */

/* Messages - Start */
.message {
	margin-top: 0.25rem;
	font-size: 14px;
	line-height: 14px;
}

.message.error {
	color: #ff0000;
}

/* Messages - End */

/* Custom Upload button - Start */
.upload-btn-wrapper {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-wrap: wrap;
}

.upload-btn-wrapper .fileName {
	border-right: none;
	font-size: 20px;
}

.upload-btn-wrapper .upload-btn {
	cursor: pointer;
}

.upload-btn-wrapper input[type="file"] {
	font-size: 100px;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
}

/* Custom Upload button - End */

/* Form - End */

/* Modals - Start */
.modal-content {
	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
}

.modal-content .modal-body {
	max-height: 80vh;
	overflow-y: auto;
	overflow-x: hidden;
	position: relative;
}

.modal-content #btnCloseModal {
	font-size: 36px;
	line-height: 36px;
	width: 38px;
	height: 38px;
	text-align: center;
	position: absolute;
	top: 15px;
	right: 15px;
	z-index: 1;

	transition: 0.2s color linear;
	-webkit-transition: 0.2s color linear;
	-moz-transition: 0.2s color linear;
	-o-transition: 0.2s color linear;
}

/* Custom Style - Start */
#thankyouModal .modal-content {
	padding: 6rem 3rem;
}

/* Custom Style - End */

/* Modals - End */

/* .slick-slider - Start */
.slick-initialized .slick-slide {
	line-height: 0;
}

.slick-slider .slick-arrow {
	position: absolute;
	top: calc(50% - 9px);
	z-index: 1;

	background-color: transparent;

	opacity: 0.6;
	-webkit-opacity: 0.6;
	-moz-opacity: 0.6;
	-o-opacity: 0.6;
}

.slick-slider .slick-arrow i {
	font-size: 18px;
	font-weight: bold;
	color: #a8c93c;
}

.slick-slider .slick-arrow:hover {
	opacity: 1;
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-o-opacity: 1;
}

.slick-slider .slick-arrow.slick-prev {
	left: -1rem;
}

.slick-slider .slick-arrow.slick-next {
	right: -1rem;
}

/* .slick-slider - End */

/* .table - Start */
table tr td {
	font-size: 16px;
	line-height: 26px;

	vertical-align: middle !important;
}

/* .table - End */

/* #loading - Start */
@keyframes ldio-vy9my3ta72n {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0;
	}
}

#loading {
	width: 100%;
	height: 100vh;

	position: fixed;
	top: 0;
	left: 0;

	background-color: rgba(0, 0, 0, 0.4);
	z-index: 9999;

	display: none;
}

.ldio-vy9my3ta72n div {
	left: 94px;
	top: 48px;
	position: absolute;
	animation: ldio-vy9my3ta72n linear 1s infinite;
	background: #b6d35f;
	width: 12px;
	height: 24px;
	border-radius: 6px / 12px;
	transform-origin: 6px 52px;
}

.ldio-vy9my3ta72n div:nth-child(1) {
	transform: rotate(0deg);
	animation-delay: -0.9166666666666666s;
	background: #b6d35f;
}

.ldio-vy9my3ta72n div:nth-child(2) {
	transform: rotate(30deg);
	animation-delay: -0.8333333333333334s;
	background: #b6d35f;
}

.ldio-vy9my3ta72n div:nth-child(3) {
	transform: rotate(60deg);
	animation-delay: -0.75s;
	background: #b6d35f;
}

.ldio-vy9my3ta72n div:nth-child(4) {
	transform: rotate(90deg);
	animation-delay: -0.6666666666666666s;
	background: #b6d35f;
}

.ldio-vy9my3ta72n div:nth-child(5) {
	transform: rotate(120deg);
	animation-delay: -0.5833333333333334s;
	background: #b6d35f;
}

.ldio-vy9my3ta72n div:nth-child(6) {
	transform: rotate(150deg);
	animation-delay: -0.5s;
	background: #b6d35f;
}

.ldio-vy9my3ta72n div:nth-child(7) {
	transform: rotate(180deg);
	animation-delay: -0.4166666666666667s;
	background: #b6d35f;
}

.ldio-vy9my3ta72n div:nth-child(8) {
	transform: rotate(210deg);
	animation-delay: -0.3333333333333333s;
	background: #b6d35f;
}

.ldio-vy9my3ta72n div:nth-child(9) {
	transform: rotate(240deg);
	animation-delay: -0.25s;
	background: #b6d35f;
}

.ldio-vy9my3ta72n div:nth-child(10) {
	transform: rotate(270deg);
	animation-delay: -0.16666666666666666s;
	background: #b6d35f;
}

.ldio-vy9my3ta72n div:nth-child(11) {
	transform: rotate(300deg);
	animation-delay: -0.08333333333333333s;
	background: #b6d35f;
}

.ldio-vy9my3ta72n div:nth-child(12) {
	transform: rotate(330deg);
	animation-delay: 0s;
	background: #b6d35f;
}

.loadingio-spinner-spinner-1d8a3pox9no {
	width: 200px;
	height: 200px;
	display: inline-block;
	overflow: hidden;
	background: none;

	position: absolute;
	top: calc(50% - 100px);
	left: calc(50% - 100px);
}

.ldio-vy9my3ta72n {
	width: 100%;
	height: 100%;
	position: relative;
	transform: translateZ(0) scale(1);
	backface-visibility: hidden;
	transform-origin: 0 0;
	/* see note above */
}

.ldio-vy9my3ta72n div {
	box-sizing: content-box;
}

/* #loading - End */

/* Default stylesheet - Start */
.revealOnScroll {
	opacity: 0;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-o-opacity: 0;
}

body {
	font-family: "Maitree", sans-serif;
	font-weight: 500;
}

h1.page-header {
	margin: 0;
	font-size: 24px;
}

.box {
	margin: 3rem 0;
}

ol {
	list-style: decimal;
}

ul {
	list-style: circle;
}

.sharethis-inline-share-buttons {
	min-width: 150px;
}

.page-title {
	position: relative;
	padding: 9px 15px 15px 40px;
}

.page-title::before {
	content: "";
	width: 257px;
	height: 52px;
	background-image: url("../img/page_header_bg.png");
	background-repeat: no-repeat;
	background-size: cover;
	position: absolute;
	top: 0;
	left: 0;
}

#remark {
	font-size: 10px;
	line-height: 20px;
}

.not-loaded {
	opacity: 0;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-o-opacity: 0;
}

.content-box p,
.content-box div,
.content-box li {
	font-size: 29px;
}

.content-box p a,
.content-box div a,
.content-box li a,
#content p a,
#content div a,
#content li a {
	transition: 0.2s color linear;
	-webkit-transition: 0.2s color linear;
	-moz-transition: 0.2s color linear;
	-o-transition: 0.2s color linear;
}

.item-controller a {
	font-size: 26px;
}

.item-controller p {
	font-size: 16px;
}

.item-controller a.btnAddToCart {
	font-size: 16px;
}

#btnToTop {
	padding: 10px;
	width: 48px;
	height: 48px;

	position: fixed;
	right: 8rem;
	bottom: 8rem;
	z-index: 10;

	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;

	display: none;
}

#btnToTop i {
	font-size: 24px;
}

a[disabled],
.disabled {
	color: #999;
	cursor: default !important;
}

#breadcrumb {
	padding-top: 1rem;
}

#breadcrumb a {
	line-height: 26px;
}

#content-title h4 {
	line-height: 34px;
}

li.no-bullet {
	list-style: none !important;
}

hr.line {
	border-bottom: 1px solid #a9c93e;
}

/* Default stylesheet - End */

/* #content-box - Start */
#page-content.page-news #image img,
#content-box img {
	max-width: 650px;
}

/* #content-box - End */

/* #pagination - Start */
#pagination .page-item {
	width: 30px;
	height: 30px;

	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;

	display: flex;
	align-items: center;
	justify-content: center;

	transition: 0.2s background-color linear;
	-webkit-transition: 0.2s background-color linear;
	-moz-transition: 0.2s background-color linear;
	-o-transition: 0.2s background-color linear;

	background-color: transparent;
}

#pagination .page-item:hover,
#pagination .page-item.active {
	background-color: #a9c93e;
	color: #fff;
}

/* #pagination - End */

/* Animation - Start */
.delay-1 {
	animation-delay: 0.2s;
}

.delay-2 {
	animation-delay: 0.4s;
}

.delay-3 {
	animation-delay: 0.6s;
}

.delay-4 {
	animation-delay: 0.7s;
}

.delay-5 {
	animation-delay: 0.8s;
}

.delay-6 {
	animation-delay: 0.9s;
}

.delay-7 {
	animation-delay: 0.1s;
}

.delay-8 {
	animation-delay: 0.11s;
}

.delay-9 {
	animation-delay: 0.12s;
}

.delay-10 {
	animation-delay: 0.13s;
}

/* Animation - End */

/* .owl-nav - Start */

/* .owl-nav - End */

/* .sweetalert - Start */
.sweet-alert p.lead {
	margin: 1rem 0;
}

/* .sweetalert - End */

/* #navigation - Start */
nav#navigation {
	transition: 0.2s background-color linear;
	-webkit-transition: 0.2s background-color linear;
	-moz-transition: 0.2s background-color linear;
	-o-transition: 0.2s background-color linear;
}

nav#navigation.stick {
	background-color: #fff;
}

nav#navigation .nav-item {
	margin: 0 0.25rem;
	font-size: 13px;
}

nav#navigation .nav-item span {
	font-size: 20px;
}

nav#navigation .nav-item .dropdown-menu {
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-o-border-radius: 0;

	background-color: #c8ea60;
}

nav#navigation .nav-item .dropdown-menu {
	list-style: disc;
	list-style-position: inside;
}

nav#navigation .nav-item .dropdown-menu li {
	width: calc(100% - 1.25rem);
	text-align: left;
	padding: 0.25rem 0;
	margin-left: 1.25rem;
	border-bottom: 1px solid #fff;
	display: list-item;
	list-style-position: outside;
	color: #fff;
}

nav#navigation .nav-item .dropdown-menu li:hover {
	background-color: rgba(0, 0, 0.2);
}

nav#navigation .nav-item .dropdown-menu li a {
	color: #000;

	transition: 0.2s color linear, 0.2s background-color linear;
	-webkit-transition: 0.2s color linear, 0.2s background-color linear;
	-moz-transition: 0.2s color linear, 0.2s background-color linear;
	-o-transition: 0.2s color linear, 0.2s background-color linear;
}

nav#navigation .nav-item .dropdown-menu li a:hover {
	color: #fff;
}

nav#navigation .nav-item .dropdown-menu li div a:hover {
	color: #a9cb3f !important;
}

nav#navigation .nav-item .dropdown-menu li.active,
nav#navigation .nav-item .dropdown-menu li:hover {
	background-color: #a9c93e;
}

nav#navigation .nav-item .dropdown-menu li.disabled,
nav#navigation .nav-item .dropdown-menu li a[disabled] {
	color: #aaa;
}

nav#navigation .nav-item .dropdown-toggle::after {
	vertical-align: middle;
	border-top: 5px solid;
	border-right: 5px solid transparent;
	border-bottom: 0;
	border-left: 5px solid transparent;
}

nav#navigation .nav-item .dropdown-toggle[aria-expanded="true"]::after {
	border-top: 0;
	border-right: 5px solid transparent;
	border-bottom: 5px solid;
	border-left: 5px solid transparent;
}

nav#navigation .nav-item.active .nav-link,
nav#navigation .nav-item .nav-link:not([disabled]):hover {
	color: #a9cb3f;
}

nav#navigation #languages a {
	padding: 0.25rem;

	color: #a1a1a1;
	background-color: transparent;

	display: inline-block;

	line-height: 13px;

	transition: 0.2s color linear;
	-webkit-transition: 0.2s color linear;
	-moz-transition: 0.2s color linear;
	-o-transition: 0.2s color linear;

	/* border-radius:50%;
    -webkit-border-radius:50%;
    -moz-border-radius:50%;
    -o-border-radius:50%; */
}

nav#navigation #languages a:hover {
	color: #a9cb3f;
}

nav#navigation #languages a:first-child {
	border-right: 1px solid #a1a1a1;
}

/* nav#navigation #languages a:first-child {
    -webkit-border-top-left-radius: 33px;
    -webkit-border-bottom-left-radius: 33px;
    -moz-border-radius-topleft: 33px;
    -moz-border-radius-bottomleft: 33px;
    border-top-left-radius: 33px;
    border-bottom-left-radius: 33px;
}

nav#navigation #languages a:last-child {
    -webkit-border-top-right-radius: 33px;
    -webkit-border-bottom-right-radius: 33px;
    -moz-border-radius-topright: 33px;
    -moz-border-radius-bottomright: 33px;
    border-top-right-radius: 33px;
    border-bottom-right-radius: 33px;
} */

html[lang="th"] nav#navigation #languages a.lang-th {
	color: #a9cb3f;
}

html[lang="jp"] nav#navigation #languages a.lang-jp {
	color: #a9cb3f;
}

nav#navigation #member-submenu {
	top: calc(100% + 1rem);
	left: 1rem;
}

nav#navigation #btnMember {
	position: relative;
}

nav#navigation:not(.mobile) #member-menu,
nav#navigation:not(.mobile) #btnMember a#btnLogin {
	padding: 0.5rem 0.25rem;

	border: 2px solid #fff;

	background: rgb(117, 172, 0);
	background: -moz-linear-gradient(351deg,
			rgba(117, 172, 0, 1) 0%,
			rgba(173, 205, 72, 1) 100%);
	background: -webkit-linear-gradient(351deg,
			rgba(117, 172, 0, 1) 0%,
			rgba(173, 205, 72, 1) 100%);
	background: linear-gradient(351deg,
			rgba(117, 172, 0, 1) 0%,
			rgba(173, 205, 72, 1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#75ac00", endColorstr="#adcd48", GradientType=1);
}

nav#navigation #btnMember p.small {
	width: 100%;

	font-size: 8px;

	position: absolute;
	left: 0;
	bottom: -26px;
}

#nav-icon3 {
	width: 36px;
	height: 20px;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: 0.5s ease-in-out;
	-moz-transition: 0.5s ease-in-out;
	-o-transition: 0.5s ease-in-out;
	transition: 0.5s ease-in-out;
	cursor: pointer;
	z-index: 2;
	position: relative;
}

#nav-icon3.font-awesome {
	font-size: 28px;
}

#nav-icon3 span {
	display: block;
	position: absolute;

	height: 4px;
	width: 100%;

	background: #fff;

	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	-o-border-radius: 2px;

	opacity: 1;
	left: 0;

	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: 0.25s ease-in-out;
	-moz-transition: 0.25s ease-in-out;
	-o-transition: 0.25s ease-in-out;
	transition: 0.25s ease-in-out;

	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-o-border-radius: 5px;
}

#nav-icon3 span:nth-child(1) {
	width: 80%;
	top: 0px;
}

#nav-icon3 span:nth-child(2),
#nav-icon3 span:nth-child(3) {
	top: 9px;
}

#nav-icon3 span:nth-child(4) {
	width: 80%;
	top: 18px;
}

#nav-icon3 label.text {
	width: 100%;
	position: absolute;
	left: 0;
	bottom: -3px;
	font-size: 8px;
	line-height: 8px;

	opacity: 0;
	-webkit-opacity: 0;
	-moz-opacity: 0;
	-o-opacity: 0;

	transition: 0.2s opacity ease-in-out;
	-webkit-transition: 0.2s -webkit-opacity ease-in-out;
	-moz-transition: 0.2s -moz-opacity ease-in-out;
	-o-transition: 0.2s -o-opacity ease-in-out;
}

.navbar-toggler[aria-expanded="false"] #nav-icon3 label.text.onClose {
	opacity: 1;
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-o-opacity: 1;
}

.navbar-toggler[aria-expanded="true"] #nav-icon3 label.text.onOpen {
	opacity: 1;
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-o-opacity: 1;
}

.navbar-toggler[aria-expanded="true"] #nav-icon3 span {
	background: #fff;
}

.navbar-toggler[aria-expanded="true"] #nav-icon3 span:nth-child(1) {
	top: 14px;
	width: 0%;
	left: 50%;
}

.navbar-toggler[aria-expanded="true"] #nav-icon3 span:nth-child(2) {
	-webkit-transform: rotate(45deg);
	-moz-transform: rotate(45deg);
	-o-transform: rotate(45deg);
	transform: rotate(45deg);
}

.navbar-toggler[aria-expanded="true"] #nav-icon3 span:nth-child(3) {
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
}

.navbar-toggler[aria-expanded="true"] #nav-icon3 span:nth-child(4) {
	top: 18px;
	width: 0%;
	left: 50%;
}

/* #member-submenu - Start */
nav#navigation .nav-item #member-submenu {
	background-color: #a5c83c;

	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-o-border-radius: 30px;
}

nav#navigation .nav-item #member-submenu li {
	width: 100%;
	list-style: none;
	border: none;
	margin: 0;
}

nav#navigation .nav-item #member-submenu li.bg-white {
	padding: 0.5rem;
}

nav#navigation .nav-item #member-submenu li.bg-white a {
	color: #000;
}

/* #member-submenu - End */

/* #navigation - End */

/* #banner - Start */
#banner .owl-dots {
	width: 100%;
	text-align: center;
	position: absolute;
	bottom: 3.5rem;
	left: 0;
}

#banner .owl-dots .owl-dot.active span,
#banner .owl-dots .owl-dot:hover span {
	background: #a8c93c;
}

/* section#banner {
    background-image: url('../img/banner_2023.png');
    background-position: center top;
    background-size: cover;
    background-repeat: no-repeat;

    min-height: 100vh;
    padding-bottom: 4%;

    position: relative;
    z-index: 1;
}

section#banner::after {
    content: '';
    width: 100%;
    height: 0;
    padding-bottom: 10%;

    position: absolute;
    bottom: -1px;
    left: 0;
    z-index: 2;

    background-image: url('../img/banner_bottom_gp.png');
    background-size: cover;
    background-position: center bottom;
    background-repeat: no-repeat;
} */

/* #banner - End */

/* #about - Start */
section#about {
	padding: 1rem 0 18% 0;

	position: relative;
	z-index: 0;

	background-image: url("../img/section_aboutus_bg.jpg");
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
}

/* #about - End */

/* #programs - Start */
section#programs {
	position: relative;
	z-index: 1;

	margin-top: -18%;
	padding-top: 8%;

	background-image: url("../img/section_program.png");
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
}

section#programs ul {
	list-style: disc;
}

section#programs ul li {
	margin-left: 1.5rem;
}

section#programs .program-item {
	position: relative;
}

section#programs .program-item h1.large {
	font-size: 62px;
	line-height: 62px;
	font-weight: 400;
}

section#programs .program-item i.fas.fa-circle {
	font-size: 20px;
	position: absolute;
	left: 1rem;
	bottom: -10px;
}

section#programs .program-item .btn-text {
	font-size: 14px;
}

section#programs .program-item:nth-child(1) i.fas.fa-circle {
	color: #396ded;
}

section#programs .program-item:nth-child(2) i.fas.fa-circle {
	color: #e22934;
}

section#programs .program-item:nth-child(3) i.fas.fa-circle {
	color: #f6fe0d;
}

section#programs hr {
	margin: 3rem 0;
}

/* #programs - End */

/* #message - Start */
section#message .message-item {
	margin-bottom: 3rem;
}

section#message .message-item-1,
section#message .message-item-3 {
	border-left: 3px solid #a9c93e;
}

section#message .message-item-2,
section#message .message-item-4 {
	border-top: 3px solid #a9c93e;
	border-bottom: 3px solid #a9c93e;
	border-right: 3px solid #a9c93e;
}

section#message .message-item-4 {
	border-top: none;
}

/* #message - End */

/* #news - Start */
section#news {
	padding: 10rem 0;

	background-color: #a9cb3f;

	position: relative;
	z-index: 0;
}

section#news::before {
	content: "";
	width: 100%;
	height: 22%;

	position: absolute;
	left: 0;

	background-size: 100% auto;
	background-repeat: no-repeat;
}

section#news::before {
	top: -1px;
	background-image: url("../img/news_top_border.png");
	background-position: center top;
}

section#news .container {
	padding: 3rem 1rem;
}

section#news .news-item {
	margin-bottom: 4rem;
}

section#news .news-item:last-child {
	min-height: 200px;
}

section#news .news-item:last-child h3 {
	margin-top: 2rem;
}

section#news .news-item .news-item-inner {
	-webkit-box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.15);
	-moz-box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.15);
	box-shadow: 5px 5px 0px 0px rgba(0, 0, 0, 0.15);
}

section#news .news-item .news-item-inner svg {
	transform: scale(0.7);
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-o-transform: scale(0.7);

	display: none;
}

section#news .news-item .news-item-title p {
	line-height: 16px;
}

/* #news - End */

/* Footer - Start */
footer {
	position: relative;
	z-index: 1;

	margin-top: -9rem;
	padding-top: 7rem;

	background-image: url("../img/footer_bg.png");
	background-size: cover;
	background-position: top center;
	background-repeat: no-repeat;
}

footer.inner-page {
	margin-top: -35rem;
	padding-top: 35rem;

	background-image: url("../img/footer_inner_page_bg.jpg");
	background-position: bottom center;
}

footer #footer-logo {
	margin: 2rem 0;
}

footer #footer-navigation ul li {
	font-size: 12px;
	list-style-position: outside;
	margin-left: 1rem;
	list-style-type: disc;
}

footer #footer-navigation ul li br.d-lg-none {
	display: block !important;
}

footer a,
footer #socials #socials-items a span {
	transition: 0.2s color linear;
	-webkit-transition: 0.2s color linear;
	-moz-transition: 0.2s color linear;
	-o-transition: 0.2s color linear;
}

footer a.active,
footer a:not([disabled]):hover span,
footer a:not([disabled]):hover {
	color: #a9c93e;
}

footer #footer-navigation #socials #socials-items a span,
footer #footer-navigation #socials #socials-items a {
	font-size: 12px;
}

footer #copyright-claims {
	font-size: 11px;
}

/* Footer - End */

/* #cookies - Start */
#cookies {
	width: 100%;
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 9;
	background-color: rgba(169, 203, 63, 0.85);
	padding: 2rem 1rem;
}

/* #cookies - End */

/* #page-banner - Start */
section#page-banner {
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;

	min-height: 100vh;
	padding-bottom: 4%;

	position: relative;
	z-index: 3;
}

section#page-banner::after {
	content: "";
	width: 100%;
	height: 0;
	padding-bottom: 10%;

	position: absolute;
	bottom: -1px;
	left: 0;
	z-index: 2;

	background-image: url("../img/innerpage_banner_bottom_gp.png");
	background-size: cover;
	background-position: center bottom;
	background-repeat: no-repeat;
}

section#page-banner.page-aboutus {
	background-image: url("../img/banner_2023.png");
}

section#page-banner.page-edutainment {
	background-image: url("../img/banner_2023.png");
}
section#page-banner.page-edutainment #banner-caption h1.main-title{
    font-size:4.5rem;
}

/* #page-banner - End */

/* #content-history - Start */
#content-history .history-item .year {
	padding-right: 2rem;
}

#content-history .history-item .info {
	position: relative;
	padding-left: 1.25rem;
}

#content-history .history-item .info::before {
	content: "";

	width: 20px;
	height: 20px;

	position: absolute;
	top: 0;
	left: -10px;

	background-color: #a9c93e;

	border-radius: 10px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	-o-border-radius: 10px;
}

#content-history .history-item.item-last .info::before {
	top: auto;
	bottom: 0;
}

/* #content-history - End */

/* #content-activities - Start */
#content-activities .activity-item {
	margin: 1rem 0;
}

#content-activities .activity-item .color-identity {
	height: 100%;
}

#content-activities .activity-item .color-identity .activity-item-title {
	padding: 0.5rem;
	margin-bottom: 0.5rem;
	min-height: 77px;
}

#content-activities .activity-item .color-identity .activity-item-title h4 {
	font-size: 19px;
	line-height: 30px;
	margin-bottom: 0;
}

#content-activities .activity-item.item-1 .color-identity {
	background-color: #fdde40;
}

#content-activities .activity-item.item-2 .color-identity {
	background-color: #f3b649;
}

#content-activities .activity-item.item-3 .color-identity {
	background-color: #7fbfbf;
}

#content-activities .activity-item.item-4 .color-identity {
	background-color: #ffb493;
}

#content-activities .activity-item.item-5 .color-identity {
	background-color: #7cc576;
}

#content-activities .activity-item.item-6 .color-identity {
	background-color: #9195be;
}

#content-activities #activity-actions {
	margin: 2rem 0;
}

/* #content-activities - End */

/* #page-content - Start */
section#page-content {
	padding-bottom: 6rem;
	position: relative;
	z-index: 2;
}

section#page-content ol li {
	list-style: decimal;
}

section#page-content .list-number {
	width: 28px;
	height: 28px;

	background-color: #a9c93e;
	color: #fff;

	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;

	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 0.5rem;
}

section#page-content ul li {
	list-style: disc;
}

/* #page-content - End */

/* page [Programs] - Start */
#page-banner.page-program {
	background-image: url("../img/banner_2023.png");
}

#page-banner.page-program::after {
	background-image: url("../img/banner_bottom_gp.png");
}

#page-content.page-program #section-1 {
	margin-top: -10rem;
	padding-top: 10rem;
	padding-bottom: 6rem;

	background-image: url("../img/program_section_1_bg.png");
	background-position: center bottom;
	background-size: cover;
	background-repeat: no-repeat;
	background-color: #fdfdfd;
}

#page-content.page-program #section-2 {
	padding-top: 3rem;
	padding-bottom: 6rem;

	background-image: url("../img/program_section_2_bg.jpg");
	background-position: center top;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-color: transparent;
}

#page-content.page-program #btnDownload img {
	width: 12px;
}

#page-content.page-program i.fa-2x {
	font-size: 32px;
}

#content-history .history-item .info p {
	font-size: 15px !important;
}

/* page [Programs] - End */

/* page [Messages] - Start */
#page-banner.page-messages {
	background-image: url("../img/banner_2023.png");

	padding-bottom: 4rem;
}

#page-banner.page-messages::after {
	background-image: url("../img/banner_bottom_gray_gp.png");
}

#page-content.page-messages #section-2 {
	padding-top: 0;
	padding-bottom: 0;

	background-image: url("../img/program_section_2_bg.jpg");
	background-position: center top;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-color: transparent;
}

#page-content.page-messages #section-2 #breadcrumb {
	margin-bottom: 3rem;
}

#page-content.page-messages #section-2 .blog {
	padding: 3rem 1rem;
}

#page-content.page-messages #section-2 .blog.blog-2 {
	border-top: 1px solid #a9c93e;
	border-bottom: 1px solid #a9c93e;
}

#page-content.page-messages #section-2 .blog.blog-3 {
	border-bottom: 1px solid #a9c93e;
}

#page-content.page-messages #section-2 .blog.blog-4 {
	padding-bottom: 0;
}

#page-content.page-messages #section-2 #activity-actions {
	padding-top: 3rem;
}

/* page [Messages] - End */

/* page [FAQs] - Start */
#page-banner.page-faqs {
	background-image: url("../img/banner_2023.png");

	padding-bottom: 4rem;
}

#page-banner.page-faqs::after {
	background-image: url("../img/banner_bottom_gray_gp.png");
}

#page-content.page-faqs #section-2 {
	padding-top: 0;
	padding-bottom: 0;

	background-image: url("../img/program_section_2_bg.jpg");
	background-position: center top;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-color: transparent;
}

#page-content.page-faqs #section-2 #breadcrumb {
	margin-bottom: 3rem;
}

#page-content.page-faqs #section-2 .card {
	padding: 3rem 1rem;
	background-color: transparent;
	border: none;
}

#page-content.page-faqs #section-2 .card .bullet-number span {
	font-size: 20px;
	width: 30px;
	height: 30px;

	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
}

#page-content.page-faqs #section-2 .card .faq-item {
	border-bottom: 1px solid #cfcfcf;
}

#page-content.page-faqs #section-2 .card-header {
	margin-bottom: 1rem;
}

#page-content.page-faqs #section-2 .card-header a .fa-chevron-up,
#page-content.page-faqs #section-2 .card-header a .fa-chevron-down {
	display: none;
}

#page-content.page-faqs #section-2 .card-header a[aria-expanded="true"] .fa-chevron-up,
#page-content.page-faqs #section-2 .card-header a[aria-expanded="false"] .fa-chevron-down {
	display: block;
}

#page-content.page-faqs #section-2 .card .question p.col {
	font-weight: bold;
}

#page-content.page-faqs #section-2 #activity-actions {
	padding-top: 3rem;
}

/* page [FAQs] - End */

/* page [Apply] - Start */
#page-content.page-apply {
	padding-top: 0;
	padding-bottom: 0;

	background-image: url("../img/program_section_2_bg.jpg");
	background-position: center top;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-color: transparent;
}

#page-content.page-apply #steps ul {
	position: relative;
}

#page-content.page-apply #steps ul li {
	position: relative;
	z-index: 1;
}

#page-content.page-apply #steps ul li::before {
	content: "";
	width: 100%;
	height: 2px;
	background-color: #e1e1e1;
	position: absolute;
	top: calc(25% - 1px);
	left: 50%;
	z-index: 0;
}

#page-content.page-apply #steps ul li:last-child::before {
	display: none;
}

#page-content.page-apply #steps ul li a {
	position: relative;
	z-index: 1;
}

#page-content.page-apply #steps ul li h2 {
	width: 52px;
	height: 52px;

	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;

	background-color: #e1e1e1;
	color: #000;
}

#page-content.page-apply #steps ul li.active h2,
#page-content.page-apply #steps ul li.finished h2 {
	background-color: #a9c93e;
	color: #fff;
}

#page-content.page-apply #steps ul li.finished::before {
	background-color: #a9c93e;
}

#page-content.page-apply #instruction>li {
	padding: 1rem 3rem;
	list-style-position: inside;
}

#page-content.page-apply #instruction>li::marker {
	color: #a9c93e;
}

#page-content.page-apply #instruction>li ol {
	margin-left: 2rem;
}

#page-content.page-apply #instruction>li ol li {
	list-style: decimal !important;
}

#page-content.page-apply #instruction>li:first-child {
	background-color: rgba(204, 204, 204, 0.5);
}

#page-content.page-apply .group-item {
	margin: 2rem 0;
}

#page-content.page-apply .card-header {
	margin-bottom: 1rem;
}

#page-content.page-apply .card-header a .fa-chevron-up,
#page-content.page-apply .card-header a .fa-chevron-down {
	display: none;
}

#page-content.page-apply .card-header a[aria-expanded="true"] .fa-chevron-up,
#page-content.page-apply .card-header a[aria-expanded="false"] .fa-chevron-down {
	display: block;
}

#page-content.page-apply .circle-number {
	width: 25px;
	height: 25px;

	border-radius: 50%;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	-o-border-radius: 50%;
}

#page-content.page-apply .education-item,
#page-content.page-apply .teaching-item,
#page-content.page-apply .experience-item,
#page-content.page-apply .jp_studying_international-item,
#page-content.page-apply .jp_studying_domestic-item,
#page-content.page-apply .subject-item {
	position: relative;
}

#page-content.page-apply .btnRemove {
	font-size: 22px;
	position: absolute;
	top: 1rem;
	right: 0;
	z-index: 2;
}

#page-content.page-apply .upload-btn-wrapper {
	position: relative;
	overflow: hidden;
	display: inline-block;
}

#page-content.page-apply .upload-btn-wrapper .btn {
	border: 1px solid #000;
	color: #c8ea60;
	background-color: white;
	padding: 8px 20px;
	border-radius: 0;
	font-size: 20px;
	font-weight: bold;
	width: 100%;
}

#page-content.page-apply .upload-btn-wrapper.error .btn {
	border: 1px solid rgb(255, 0, 0);
	color: rgb(255, 0, 0);
	background-color: white;
	padding: 8px 20px;
	border-radius: 0;
	font-size: 20px;
	font-weight: bold;
	width: 100%;
}

#page-content.page-apply .upload-btn-wrapper input[type="file"] {
	font-size: 100px;
	position: absolute;
	left: 0;
	top: 0;
	opacity: 0;
	width:100%;
	height:100%;
	cursor:pointer;
}

#page-content.page-apply.finished .icon h1 {
	font-size: 7rem;
}

#page-content.page-apply.finished .message,
#page-content.page-apply.finished .number,
#page-content.page-apply.finished .remark {
	margin: 2rem 0;
}

#page-content.page-apply .btn {
	min-width: 187px;
}

/* page [Apply] - End */

/* page [News] - Start */
#page-content.page-news {
	padding-top: 0;

	background-image: url("../img/program_section_2_bg.jpg");
	background-position: center top;
	background-size: 100% auto;
	background-repeat: no-repeat;
	background-color: transparent;
}

/* page [News] - End */

/* page [PDPA] - Start */
.page-pdpa #question-group-1 .custom-file-input {
	height: 42px;
}

.page-pdpa #question-group-1 .custom-file-label {
	border: 1px solid #000;
	font-size: 14px;
	line-height: 24px;
	padding: 0.5rem;
	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-o-border-radius: 0;
	height: auto;
}

.page-pdpa #question-group-1 .custom-file-label::after {
	font-family: "DINNext", sans-serif;
	color: #333333;
	background-color: #a9cb3f;
	font-size: 16px;
	border-radius: 0;
	padding: 0.5rem 2rem;
	height: auto;
	top: -1px;
	right: -1px;
	bottom: -1px;
	border: none;
	line-height: 28px;
}

.page-pdpa #question-group-2 .event {
	display: none;
}

.page-pdpa #question-group-2 .event>p {
	font-size: 18px;
}

.page-pdpa #question-group-2 .h-group label {
	position: relative;
	padding-left: 29px;
}

.page-pdpa #question-group-2 .h-group label::before {
	content: "";
	position: absolute;
	top: 2px;
	left: 0;
	width: 22px;
	height: 22px;
	border: 2px solid rgba(0, 0, 0, 0.2);
	border-radius: 100%;
}

.page-pdpa #question-group-2 .controls.active .h-group label::before {
	border: 2px solid rgba(139, 195, 74, 1);
	width: 25px;
	height: 25px;
}

.page-pdpa #question-group-2 .controls.active .h-group label::after {
	content: "";
	position: absolute;
	top: 6px;
	left: 4px;
	width: 17px;
	height: 17px;
	border-radius: 100%;
	background: rgba(139, 195, 74, 1);
}

#page-content.page-apply.page-pdpa #question-group-2 label,
#page-content.page-apply.page-pdpa #question-group-3 label,
#page-content.page-apply.page-pdpa #question-group-3 h2 small {
	font-size: 18px;
}

.page-pdpa #pdpa-instruction .number-green-circle li {
	list-style: none;
	position: relative;
	padding-left: 35px;
}

.page-pdpa #pdpa-instruction .number-green-circle li span {
	background-color: #a9c93e;
	text-align: center;
	width: 25px;
	height: 25px;
	display: inline-block;
	border-radius: 100%;
	text-indent: 5px;
	position: absolute;
	top: 0;
	left: 0;
}

/* page [PDPA] - End */

/* page [Portfolio] - Start */

#page-content.page-portfolio .portfolio-document .btn i {
	display: inline-block;
	max-width: 16px;
	vertical-align: middle;
}

#page-content.page-portfolio .card-header h2 small {
	font-size: 55%;
}

#page-content.page-portfolio .upload-btn-wrapper input {
	border: 1px solid #000;
	color: #c8ea60;
	background-color: white;
	padding: 8px 20px;
	border-radius: 0;
	font-size: 20px;
	font-weight: bold;
	width: 100%;
	text-align: center;
}

#page-content.page-portfolio .upload-btn-wrapper .line-between {
	position: relative;
}

#page-content.page-portfolio .upload-btn-wrapper .line-between::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	margin-top: -1px;
	height: 1px;
	background-color: #666;
	z-index: -1;
}

#page-content.page-portfolio .upload-btn-wrapper input::placeholder {
	color: #c8ea60;
	opacity: 1;
	/* Firefox */
}

#page-content.page-portfolio .upload-btn-wrapper input:-ms-input-placeholder {
	/* Internet Explorer 10-11 */
	color: #c8ea60;
}

#page-content.page-portfolio .upload-btn-wrapper input::-ms-input-placeholder {
	/* Microsoft Edge */
	color: #c8ea60;
}

#page-content.page-portfolio-thank #steps ul li::before {
	background-color: #a9c93e;
}

#page-content.page-portfolio-thank .portfolio-thank .card-header {
	max-width: 630px;
	border-radius: 6px;
	border: none;
}

/* page [Portfolio] - End */

/* .nav.nav-tabs - Start */
.nav.nav-tabs li {
	list-style: none !important;
}

.nav.nav-tabs li a {
	text-align: center;
	border: none;
	border-left: 1px solid #424242 !important;
	border-right: 1px solid #424242 !important;

	border-radius: 0;
	-webkit-border-radius: 0;
	-moz-border-radius: 0;
	-o-border-radius: 0;

	color: #333333;
	background-color: #e1e1e1;

	font-weight: 700;
	font-size: 14px;
}

.nav.nav-tabs li a.active {
	background-color: #333333;
	color: #a9cb3f;
}

/* .nav.nav-tabs - End */

/* .training-detail-wrapper - Start */
.training-detail-wrapper .training-item {
	position: relative;
}

/* .training-detail-wrapper - End */

/* .alternative_login - Start */
.alternative_login .alternative_login_title {
	position: relative;
}

.alternative_login .alternative_login_title::before,
.alternative_login .alternative_login_title::after {
	content: "";
	width: 40%;
	height: 1px;

	background-color: #000;
	position: absolute;
	top: calc(50% - 0.5px);
}

.alternative_login .alternative_login_title::before {
	left: 0;
}

.alternative_login .alternative_login_title::after {
	right: 0;
}

/* .alternative_login - End */

/* .btnEdit - Start */
.btnEdit {
	font-size: 18px;

	position: absolute;
	top: calc(50% - 9px);
	right: 1rem;
}

/* .btnEdit - End */

/* #nav-years - Start */
#nav-years a.btn-green {
	opacity: 0.5;
	-webkit-opacity: 0.5;
	-moz-opacity: 0.5;
	-o-opacity: 0.5;

	transition: 0.2s opacity ease-in-out;
	-webkit-transition: 0.2s -webkit-opacity ease-in-out;
	-moz-opacity: 0.2s -moz-opacity ease-in-out;
	-o-opacity: 0.2s -o-opacity ease-in-out;
}

#nav-years a.btn-green.active,
#nav-years a.btn-green:hover {
	opacity: 1;
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-o-opacity: 1;
}

/* #nav-years - End */

/* #badge-latest - Start */
#badge-latest {
	width: 5%;
	top: 1rem;
	left: 1rem;
	z-index: 1;
}

/* #badge-latest - End */

/* #confirmSaveDraft - Start */
#confirmSaveDraft .modal-content {
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-o-border-radius: 30px;
}

#confirmSaveDraft .modal-header {
	padding: 1rem;

	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
}

#confirmSaveDraft .modal-header .modal-title {
	padding: 1rem 0;
}

#confirmSaveDraft #modal-logo {
	width: 160px;
	position: absolute;
	top: calc(50% - 21px);
	left: 1rem;
}

/* #confirmSaveDraft - End */

/* #responseSaveDraft - Start */
#responseSaveDraft .modal-content {
	border-radius: 30px;
	-webkit-border-radius: 30px;
	-moz-border-radius: 30px;
	-o-border-radius: 30px;
}

#responseSaveDraft .modal-header {
	padding: 1rem;

	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
}

#responseSaveDraft .modal-header .modal-title {
	padding: 1rem 0;
}

#responseSaveDraft #modal-logo {
	width: 160px;
	position: absolute;
	top: calc(50% - 21px);
	left: 1rem;
}

/* #responseSaveDraft - End */

/* #member-shortcut - Start */
#member-shortcut a[disabled] {
	filter: grayscale(1);
	-webkit-filter: grayscale(1);
	-moz-filter: grayscale(1);
	-o-filter: grayscale(1);
}

/* #member-shortcut - End */

/* #searchVideos - Start */
.btnSearch i.fa{
    transition:.2s color linear;
    -webkit-transition:.2s color linear;
    -moz-transition:.2s color linear;
    -o-transition:.2s color linear;
}
.btnSearch[aria-expanded="false"] i.fa{
    color:#666;
}
.btnSearch[aria-expanded="true"] i.fa{
    color:#ccc;
}
#searchVideos #btn-submit{
    right:2rem;
    top:calc(50% - 10px);
    font-size:20px;
}
#searchVideos #keyword{
    font-size:16px;
    line-height:16px;
}
/* #searchVideos - End */

/* #tags - Start */
#tags .btn-group .btn input[type="checkbox"]{
    display:none;
}
#tags .btn-group .btn{
    border-color:#a9c93e;
    background-color:transparent;
    color:#a9c93e;
}
#tags .btn-group .btn.active{
    background-color:#a9c93e;
    color:#fff;
}
/* #tags - End */

/* #videos - Start */
#videos{
    min-height:371px;
}
#videos .challenge .title{
    min-height:64px;
}
/* #videos - End */

.p-br-new-line{
    font-size: 15.6px;
}

@media screen and (max-width: 1024px) {
    .p-br-new-line{
        font-size: 16px;
    }
    /* .br-new-line {
      display: none;
    } */
  }