@charset 'utf-8';

/**
* 01 - Typo
* 02 - Reset CSS
* 03 - Core
*/


/* 01 - Typo & Reset  ------------------------------------*/
/*  01.1 - Import Typography ----*/
@import url('https://fonts.googleapis.com/css?family=Kanit:300,400,500&subset=thai,latin');
@import url('https://fonts.googleapis.com/css?family=Roboto:400&subset=latin');
@import "font/awesome/style.css";

/*  01.2 - Reset CSS ----*/
@import url('inc/reset.css');


/* 02 - Core  ------------------------------------*/
/** 02.1 clearfix for .c-fix , .row , .wrap ---*/
.clearfix:after,[
class^='row']:after,
[class*=' row']:after,
.wrap:after {content: "";display: table;clear: both;}
.clearfix,
[class^='row'],
[class*=' row'],
.wrap {display: block;}

/** 03.2 Wrap & container ---*/
.wrap {
	position: relative;
	float: none;
	margin: auto;
	padding: 0 30px;
	max-width: 1080px;
}

/** 03.2 Row and Column ----*/
/** 03.2.1 Column */
.col {
	float: left;
}
.col-inner {
	position: relative;
	margin: 0 8px 20px 8px;
}
.thumb {
	display: block;
	position: relative;
	font-size: 0;
	line-height: 0;
}
.thumb img {width: 100%;}

/** 03.2.2 Column width */
/* .row > .col { width: 100%; } */
.row2 > .col { width: 50%; }
.row3 > .col { width: 33.33%; }
.row4 > .col { width: 25%; }
.row5 > .col { width: 20%; }
.row6 > .col { width: 16.66%; }

.row2 > .col:nth-child(2n+1),
.row3 > .col:nth-child(3n+1),
.row4 > .col:nth-child(4n+1),
.row5 > .col:nth-child(5n+1),
.row6 > .col:nth-child(6n+1) { clear: both; }

/** 03.3 Display ----*/
.box-b {display: block !important;}
.box-ilb {display: inline-block !important;}



/* 04 - Text  ------------------------------------*/
/** 04.1 Text Alignment ---*/
.txt-left {text-align: left !important;}
.txt-center {text-align: center !important;}
.txt-right {text-align: right !important;}



/* 05 - Form  ------------------------------------*/
/** 05.1 Form error message block ---*/
.duck-form .err-message {
	font-size: 14px;
	color: #f00;
}
.duck-form .err-message li:before {
	content: '* ';
}
.duck-form .err-message li:last-child {
	margin-bottom: 20px;
}

/** 05.2 input/dropdown/text block ---*/
.duck-form .input {
	margin-bottom: 12px;
}
.duck-form .input-block,
.duck-form .dropdown-block,
.duck-form .text-block {
	position: relative;
}

/** 05.2.1 block extend for block size */
.duck-form .input-l {max-width:540px;} /* Long */
.duck-form .input-m {max-width: 380px;} /* Medium */
.duck-form .input-s {max-width: 280px;} /* small */
.duck-form .input-s2 {max-width: 200px;} /* small x2 */
.duck-form .input-s3 {max-width: 150px;} /* small x3 */

/** 05.3 input, textarea, select ----*/
.duck-form input,
.duck-form textarea,
.duck-form select {
	width: 100%;
	padding: 10px 12px;
	background: #eee;
	font-size: 15px;
	line-height: 20px;
	color: #000;
	box-sizing: border-box;
}
.duck-form input.error,
.duck-form textarea.error,
.duck-form select.error {
	border-color: #900;
	background: #fda;
}
.duck-form textarea {
	resize: none;
}
.duck-form select {
	background-image: url(core/icon/dropdown-arrow.png);
	background-repeat: no-repeat;
	background-position: right 12px top 17px;

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

/** 05.4 button set ----*/
.duck-form button {
	padding: 11px 16px;
	border-radius: 4px;
	font-size: 15px;
	line-height: 20px;
}
.duck-form .btn-block:after { content: ""; display: table; clear: both; }
.duck-form .btn-block.right {
  text-align: right;
}
.duck-form .btn-block button {
	padding: 10px;
  width: 300px;
  max-width: 100%;
  background: #ff9900;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
  font-weight: bold;
  color: #fff;
}

.duck-form .btn-block button {
	padding: 10px 0;
	width: 100%;
	background: #db1b2c;
	font: 400 18px/24px Kanit;
	color: #fff;
}



/** 06 Pagination ------------------------------*/
.pagination ul {
  margin: 20px;
  text-align: center;
}
.pagination li {
  display: inline-block;
  padding: 0 4px;
}
.pagination a,
.pagination span {
  padding: 4px 10px 5px 10px;
  font-size: 14px;
  font-weight: bold;
  text-transform: uppercase;
}
.pagination span {
  padding: 4px 5px 5px 5px;
  letter-spacing: 1px;
}
.pagination .next,
.pagination .prev {
  color: #6f7988;
}
.pagination .next {
  padding-right: 14px;
  background: url(core/icon/arrow-next.png) no-repeat right;
}
.pagination .prev {
  padding-left: 14px;
  background: url(core/icon/arrow-prev.png) no-repeat left;
}
.pagination .number {
  border-radius: 15px;
  background: #36393e;
  color: #fff;
}
.pagination .number.current {
  background: #ff9900;
}



/** 07 Accordian ------------------------------*/
.duck-accordian {box-shadow: 2px 2px 5px rgba(0,0,0,0.1)}
.acc-item:after {
	content: "";
  display: table;
  clear: both;
}
.acc-item {
	position: relative;
	border-left: solid 5px #ccc;
	background: #fff;
}
.acc-item+.acc-item {border-top: solid 1px #dfdfdf;}
.acc-item-inner {
	padding: 0 30px;
}
.acc-head {
	position: relative;
	padding: 20px 0;
	font-size: 14px;
	line-height: 20px;
	color: #999;
	cursor: pointer;
}
.acc-head h2 {
	font: 700 20px/24px Roboto,Kanit;
	color: #000;
}
.acc-head h3 em {
	color: #333;
}
.acc-head .toggle {
	display: block;
	position: absolute;
	top: 15px;
	right: 0;
	width: 34px;
	height: 34px;
	background: url(core/icon/acc-arrow-down.png) center no-repeat;
  -webkit-background-size: contain;
  -moz-background-size: contain;
  -o-background-size: contain;
  background-size: contain;
}
.acc-content {
	display: none;
	padding: 30px 0 50px 0;
	border-top: solid 1px #eee;
}

.acc-item.active {
	border-left: solid 5px #fb9700;
}
.acc-item.active .acc-head .toggle {
	background-image: url(core/icon/acc-arrow-up.png);
}



/** 08 Detail Block ------------------------------*/
.detail-block:after {content: "";display: table;clear: both;}
.detail-block {
	display: block;
	font-size: 16px;
	line-height: 28px;
	/* color: #333; */
}
.detail-block H1,
.detail-block H2,
.detail-block H3,
.detail-block H4,
.detail-block H5,
.detail-block H6 {
	margin-bottom: 5px;
	font-family: 'Kanit', sans-serif;
	font-weight: 500;
	color: #333;
}
.detail-block H1 {font-size: 40px; line-height: 44px;}
.detail-block H2 {font-size: 36px; line-height: 44px;}
.detail-block H3 {font-size: 28px; line-height: 36px;}
.detail-block H4 {font-size: 24px; line-height: 36px;}
.detail-block H5 {font-size: 20px; line-height: 20px;}
.detail-block H6 {font-size: 18px; line-height: 20px;}

.detail-block A {
	/* text-decoration: underline; */
	color: #209D54;
}
.detail-block STRONG {font-weight: bold;}
.detail-block EM {
	font-style: italic;
	color: #c12635;
}
.detail-block IMG { max-width: 100%; }
.detail-block UL,
.detail-block OL { padding: 10px 0 0 30px; }
.detail-block LI OL,
.detail-block LI UL {
	padding-top: 4px;
	padding-bottom: 8px;
}
.detail-block UL LI {list-style-type: disc;}
.detail-block LI UL LI {list-style-type: circle;}
.detail-block OL LI,
.detail-block LI OL LI {list-style-type: decimal;}

.detail-block OL+P,
.detail-block UL+P,
.detail-block P+P {padding-top: 15px;}
.detail-block p+H2, .detail-block p+H3, .detail-block p+H4, .detail-block p+H5, .detail-block p+H6,
.detail-block ul+H2, .detail-block ul+H3, .detail-block ul+H4, .detail-block ul+H5, .detail-block ul+H6,
.detail-block ol+H2, .detail-block ol+H3, .detail-block ol+H4, .detail-block ol+H5, .detail-block ol+H6 {padding-top: 25px;}
.detail-block hr {
	display: block;
	margin-top: 20px;
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	border-style: inset;
	border-width: 1px 0 0 0;
	border-color: #501552;
}
.detail-block iframe {
	margin-bottom: 20px;
	width: 100%;
	height: 480px;
	max-height: 34vw;
}
.detail-block table {
	margin: 20px 0;
	border-collapse: separate;
	border-spacing: 1px;
}
.detail-block th,
.detail-block td {
	padding: 8px 10px;
}
.detail-block tr:nth-child(2n+1) td {
	background: #eeeeee;
}
.detail-block blockquote {
	margin: 20px 0;
	padding: 10px 0 10px 20px;
	border-left: solid 5px #ed1821;
	background: #f7f7f7;
	font: 400 20px/30px Kanit;
	color: #000;
}


/**
* Empty Data
*/
.empty-data {
	margin: 20px 0 80px 0;
	/* padding: 30px 0 40px 0; */
	border-radius: 10px;
	background: #fff;
}
.empty-data p {
	padding: 5px 0;
	text-align: center;
	text-transform: uppercase;
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 1px;
	color: #ccc;
}
.empty-data i {
	padding: 30px;
	border: solid 3px #eee;
	border-radius: 80px;
	font-size: 48px;
	color: #ddd;
}

/**
* Error page
*/
.page-error {
  padding: 30px 50px;
}
.page-error .error-box {
  float: none;
  margin: auto;
  padding: 50px 80px;
  border-radius: 20px;
  max-width: 500px;
  background: #fff;
  text-align: center;
}
.page-error .error-box figure {
  margin-bottom: 30px;
  font-size: 0;
  line-height: 0;
}
.page-error .error-box figure img {
  width: 160px;
}
.page-error .error-box h1 {
  margin-bottom: 10px;
  font-size: 24px;
  color: #f66;
}
.page-error .error-box .line {
  float: none;
  margin: 30px auto;
  max-width: 40px;
  height: 4px;
  background: #eee;
}
.page-error .error-box p {
  font-size: 16px;
  line-height: 24px;
  color: #999;
}
.page-error .error-box p+p {
  padding-top: 10px;
}
.page-error .mail-contact {
  margin-top: 20px;
}
.page-error .mail-contact a {
  display: block;
  float: none;
  margin: auto;
  padding: 8px 0;
  border-radius: 25px;
  width: 200px;
  background: #39c;
	font-size: 14px;
  color: #fff;
}