@import url('https://fonts.googleapis.com/css2?family=Kanit:wght@100;300;400;500;600;800;900&family=Montserrat:wght@100;300;400;600;800;900&family=Quicksand:wght@300;400;600;700&display=swap');

/**
font-family: 'Kanit', sans-serif;
font-family: 'Montserrat', sans-serif;
font-family: 'Quicksand', sans-serif;

 */


html, body { /* height: 100%; */}

body {background: #fff; font-family: 'Quicksand', sans-serif;  font-size: 14px; position: relative; font-weight: 400; overflow-x: hidden;}

[class^="flaticon-"]:before, [class*=" flaticon-"]:before,
[class^="flaticon-"]:after, [class*=" flaticon-"]:after {
	margin-left : 0;
}

.content {
	position : relative;
}

:focus {
	outline : none;
}

/* -webkit-transition: all 200ms ease-in;
-moz-transition: all 200ms ease-in;
-ms-transition: all 200ms ease-in;
-o-transition: all 200ms ease-in;
transition: all 200ms ease-in; */
/* @yvzyrlmz 2022 */


.triangle {
	width: 50px;
	height: 50px;
	position: relative;
	overflow: hidden;
	transform: translateY(50%) rotate(30deg) skewY(30deg) scaleX(0.866);
	pointer-events: none;
	border-radius: 20%;
}
.triangle:before, .triangle:after {
	content: "";
	position: absolute;
	background: none;
	border: 1px solid #dbdbdb;
	pointer-events: auto;
	width: 50px;
	height: 50px;
}

.triangle:before {
	border-radius: 20% 20% 20% 55%;
	transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(30deg) scaleY(0.866) translateX(-24%);
}
.triangle:after {
	border-radius: 20% 20% 55% 20%;
	transform: scaleX(1.155) skewY(-30deg) rotate(-30deg) translateY(-42.3%) skewX(-30deg) scaleY(0.866) translateX(24%);
}

/*** Big Search Area ***/
.big-search-area {position: fixed;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.8);z-index: -1; opacity: 0; font-family: 'Quicksand', sans-serif;
	transition: all 300ms ease-in;}
.big-search-area span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 98;}
.big-search-area span:hover {}
.big-search {width: 600px;  height: 64px; position: absolute; left: 50%; top: 50%; margin: -32px 0 0 -300px; z-index: 99;}
.big-search input {width: 80%; float: left; height: 64px; padding: 0 20px; font-size: 26px; color: #fff; transition: all 100ms ease-in;
	border: none; background: none; box-shadow: none; border-bottom: 1px solid #fff; }
.big-search ::placeholder { color: rgba(255,255,255,0.8);}
.big-search :-ms-input-placeholder { color: rgba(255,255,255,0.8);}
.big-search ::-ms-input-placeholder { color: rgba(255,255,255,0.8);}

.big-search button {width: 18%; float: left; height: 64px; margin-left: 2%; color: #fff; font-size: 24px;
	background: #f4d294; border: 4px solid #f4d294; border-radius: 50px; box-shadow: none; transition: all 100ms ease-in;}
.big-search button:hover {background: #fff; color: #f4d294;}

.big-search-area.active {opacity: 1; z-index: 1001; }

/**** Menu Area ****/

.lang-dropdown-menu {position: relative;margin-left: 20px;}
.lang-dropdown-button {height: 36px;line-height: 36px;color: #fff;font-size: 15px;text-transform: uppercase;
	transition: all 100ms ease-in;}
.lang-dropdown-button i {display: block;height: 36px;line-height: 36px;float: right;margin-left: 2px;
	transition: all 150ms ease-in;}
.lang-dropdown-button i:before {font-size: 18px; }
.lang-dropdown-button:hover {opacity: 0.9; cursor:pointer;}
.lang-dropdown-button.active i { transform: rotate(180deg);}
.lang-dropdown {position: absolute;
	top: 40px;
	right: 0;
	width: 50px;
	background-color: #fff;
	/* display: none; */
	z-index: 300;
	box-shadow: 0 10px 50px rgb(0 0 0 / 15%);
	text-align: center;
	border-radius: 4px;
	overflow: hidden;height: 0;
	transition: all 300ms ease-in;
	overflow: hidden;}
.lang-dropdown ul {width: 100%;height: 50px;}
.lang-dropdown ul li {height: 44px;}
.lang-dropdown ul li a {float: left;
	width: 100%;
	color: #183896;
	line-height: 44px;
	box-shadow: inset 0 -1px 0 rgb(255 255 255 / 6%);text-decoration: none;
	transition: all 100ms ease-in;}
.lang-dropdown ul li.active {display: none;}
.lang-dropdown.active {height: 44px;}
.lang-dropdown ul li a:hover {background: #ccac72; color: #fff}



.min-menu-area {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background: #000000;
	z-index: 999999;
}
.min-menu-area.active {display: block;}

.min-menu-header {
	height: 180px;
	position: relative;
	/* border-bottom: 2px solid #eaebee; */
	padding-top: 50px;
}

.min-menu-logo {width: 50%;/* height: 110px; *//* line-height: 108px; */padding-top: 6px;}
.min-menu-logo a {display: block; height: 100%;}
.min-menu-logo img {height: 51px;opacity: 1;}

.min-menu-lang {
	position: absolute;
	right: 60px;
	top: 0;
	height: 36px;
	/* background: #e5f2ff; */
	/* padding: 0 5px; */
	/* border-radius: 8px; */
	/* width: 50px; */
}
.min-menu-lang .lang-dropdown-button {
	color: #000;
	font-size: 14px;
	padding: 0 21px;
	background: #f4d294;
	border-radius:  8px;
}
.min-menu-lang .lang-dropdown-menu {margin: 0; }
.min-menu-lang .lang-dropdown {background: #f4d294;top: 36px;width: 100%;left: 0;border-radius: 0 0 10px 10px;/* padding-top: 20px; *//* height: 44px; */box-shadow: none;}
.min-menu-lang .lang-dropdown ul li a {color: #000;}
.min-menu-lang .lang-dropdown ul li {border-top: 1px solid rgba(0,0,0,0.2)}
.min-menu-lang .lang-dropdown-button.active {border-radius:  8px 8px 0 0; }

.min-menu-header-area {position: relative;}
.min-menu-header-area > i {position: absolute;right: 20px;top: 0;height: 36px;line-height: 36px;color: #fff;}
.min-menu-header-area> i:before {font-size: 20px; }
.min-menu-header-area > i:hover {color: #f4d294;}

.min-menu-section {padding: 20px;position: relative;height: 500px;padding: 0;width: 100%;overflow: hidden;}
.min-menu-section > ul {
	width: 100%;
	position: absolute;
	left: 0;
	top: 0;
	height: 100%;
	padding: 0;
	transition: all 300ms ease-in;
}
.min-menu-section > ul > li {font-size: 35px;font-weight: 500;line-height: 35px;padding-right: 100px;/* border-bottom: 1px solid #eaebee; */}
.min-menu-section > ul > li > a {display: block;padding: 22px 0;color: #ffffff;}
.min-menu-section > ul > li > a:hover {}
.min-menu-section > ul > li > a {display: block;height: 100%;text-decoration: none;}
.min-menu-section > ul > li > a:hover {color: #f4d294;}
.min-menu-section > ul > li > a > i {float: right;display: block;height: 35px;line-height: 35px; display: none;}
.min-menu-section > ul > li.has-dropdown > a > i {display: block;}
.min-menu-section > ul > li > a > i:before {
	font-size: 30px;
}
.min-menu-section .menu-dropdown {
	position: absolute;
	left: 200%;
	top: 0;
	width: 100%;
	height: 100%;
	padding: 50px 0 0 0;
	background: #000;
	transition: all 300ms ease-in;
	opacity: 0;
}
.min-menu-section .menu-dropdown ul {
	height: 500px;
	overflow-y: scroll;
}
.min-menu-section .menu-dropdown ul li {height: 50px;line-height: 50px;font-weight: 400;}
.min-menu-section .menu-dropdown ul li + li {margin-top: 13px; }
.min-menu-section .menu-dropdown ul li a {
	display: block;
	padding: 0 0;
	color: #ffffff;
	text-decoration: none;
}
.min-menu-section .menu-dropdown ul li a:hover {color: #f4d294;}
.min-menu-section .menu-dropdown ul li span {display: none;float: left;width: 50px;height: 50px;line-height: 50px;margin-right: 10px;}
.min-menu-section .menu-dropdown ul li span img {max-width: 100%; max-height: 100%; }

.min-menu-section > ul.active {}

.min-menu-section .menu-dropdown > span {position: absolute; left: 0; top: 0; font-size: 16px; color: #b1b1b1; display: none; }
.min-menu-section .menu-dropdown > span i {display: block; float: left; margin-right: 20px; }
.min-menu-section .menu-dropdown > span i:before {font-size: 30px; }
.min-menu-section .menu-dropdown > span:hover {color: #f4d294;}
.has-dropdown .menu-dropdown > span {display: block;}

.min-menu-section > ul.active {left: -100%; }
.min-menu-section ul li.active {}
.min-menu-section ul li.active .menu-dropdown {left: 100%; opacity: 1;}

.min-menu-footer {position: absolute;bottom: 0;left: 0;width: 100%;height: 100px;border-top: 2px solid #eaebee;padding: 20px;}
.min-menu-button {display: inline-block;float: left;height: 40px;line-height: 40px;background: #183896;
	border-radius: 20px; }
.min-menu-button a {display: block; text-decoration: none; color: #fff; padding: 0 15px 0 20px;}
.min-menu-button a i {display: block; float: right; height: 40px; line-height: 40px; margin-left: 5px;}
.min-menu-button a i:before {font-size: 25px; }

.min-menu-social {float: right;}
.min-menu-social ul {}
.min-menu-social ul li {float: left; }
.min-menu-social ul li a {display: block; padding: 0 5px; color: #183895;}
.min-menu-social ul li i {display: block; height: 40px; line-height: 40px; }
.min-menu-social ul li i:before {font-size: 20px; }

.menu-contact {padding: 20px 0 0 50px;}
.menu-contact-address {color: #fff;padding-right: 50%;margin-bottom: 50px;}
.menu-contact-address h4 {
	font-size: 18px;
	font-weight: 600;
	margin-bottom: 10px;
}
.menu-contact-address p {
	font-size: 16px;
	line-height: 24px;
	color: #999;
}

.menu-contact-info { margin-bottom: 30px; }
.menu-contact-info h5 {font-size: 22px; font-weight: 400;  }
.menu-contact-info h5 a {display: block; height: 100%; color: #fff; text-decoration: none; }
.menu-contact-info h5 + h5 {margin-top: 10px;}
.menu-contact-info h5 a:hover {color: #f2d294;}

.menu-contact-social {}
.menu-contact-social ul {
	display: inline-block;
}
.menu-contact-social ul li {float: left; }
.menu-contact-social ul li + li {margin-left: 15px; }
.menu-contact-social ul li a {display: block; color: #fff; text-decoration: none; }
.menu-contact-social ul li i {display: block; height: 32px; line-height: 32px;}
.menu-contact-social ul li i:before {font-size: 32px; }
.menu-contact-social ul li a:hover {opacity: 0.6;}


/* -------------------------------------------------------------------------------------*/
/*      HEADER                                                                          */
/* -------------------------------------------------------------------------------------*/
header {height: 160px; }
.homepage header {position: absolute; top: 0; left: 0; width: 100%; z-index: 999; }
.homepage .logo img:first-child {display: none;}
.homepage .logo img:last-child {display: inline-block;height: 51px;}
.homepage .menu-button {color: #fff;}
.homepage .search-button {color: #fff;}
.homepage .lang-button a {color: #fff;}
.homepage .menu-button:hover {color: #f2d294;}

.header {}

.logo {height: 160px; line-height: 160px; }
.logo a {}
.logo img {max-height: 80px;}
.logo img:first-child {display: inline-block;}
.logo img:last-child {display: none;}

.header-buttons {height: 160px; padding-top: 60px; }
.header-buttons > ul {float: right; }
.header-buttons > ul > li {float: left; }
.header-buttons > ul > li + li {margin-left: 10px; }

.menu-button {height: 40px; width: 40px; text-align: center; }
.menu-button i {display: block; height: 40px; line-height: 40px; }
.menu-button i:before {font-size: 40px; }
.menu-button:hover {}
.menu-button:hover i {}

.search-button {height: 40px; width: 40px; text-align: center; }
.search-button i {display: block; height: 40px; line-height: 40px;}
.search-button i:before {font-size: 20px;}
.search-button:hover {}
.search-button:hover i {}

.lang-button {height: 40px; width: 40px; line-height: 40px; border: 1px solid #dbdbdb; text-align: center; font-weight: 500; position: relative; overflow: hidden; }
.lang-button a {display: block; height: 100%; text-decoration: none; color: #000; transition: all 200ms ease-in;}
.lang-button:hover:before {left:-25px; top: -25px;}
.lang-button:before {	content: '';	position: absolute;	width: 100px;	height: 100px;	background: #52595d;
	z-index: -1;	top: 25px;	left: 25px;	transform: rotate(45deg);	transition: all 200ms ease-in;}
.lang-button:hover a {color: #fff;}
.lang-button a.active {display: none;}

/* -------------------------------------------------------------------------------------*/
/*      SECTION                                                                         */
/* -------------------------------------------------------------------------------------*/
.banner-section {position: relative;}

.banner-slider {position: relative;}
.banner-slider > ul {}
.banner-slider > ul > li {}

.banner-slider .bx-wrapper .bx-controls-direction a {display: block;}
.banner-slider:hover .bx-wrapper .bx-controls-direction a {display: block;}

.banner-slider .bx-wrapper .bx-controls-direction {
	width: 1200px;
	/* height: 50px; */
	margin: 0 auto;
	position: relative;
}
.banner-slider .bx-wrapper .bx-controls-direction a {
	width: 45px;
	height: 45px;
	border: 2px solid #fff;
	transition: all 200ms ease-in;
	border-radius: 50%;
	margin-top: 0;
	top: auto;
	bottom: 230px;
	z-index: 99;
}
.banner-slider .bx-wrapper .bx-prev {left: auto;right: 60px;background: url(../img/icons/icon-min-prev-white.png) no-repeat center center;}
.banner-slider .bx-wrapper .bx-next {right: 0;background: url(../img/icons/icon-min-next-white.png) no-repeat center center;}

.banner-slider .bx-wrapper .bx-prev:hover {background: rgba(0,0,0,0.6) url(../img/icons/icon-min-prev-white.png) no-repeat center center;}
.banner-slider .bx-wrapper .bx-next:hover {background: rgba(0,0,0,0.6) url(../img/icons/icon-min-next-white.png) no-repeat center center;}

.banner-slider.single-slide:hover .bx-wrapper .bx-controls-direction a {display: none;}
.banner-slider-pager.single-slide {display: none;}

.banner-area {height: 1000px;position: relative;background: #000;}
.banner-area > a {display: block; height: 100%;}
.banner-area img {width: 100%; height: 100%; object-fit: cover; opacity: 0.8;}
.banner-area img.desktop-banner {display: block;}
.banner-area img.mobile-banner {display: none;}
.banner-description-area {position: absolute; left: 0; bottom: 200px; width: 100%; }
.banner-description-area > .container {}
.banner-description {padding: 0 40% 100px 0; border-bottom: 1px solid rgba(255,255,255,0.5);}
.banner-description h3 {font-family: 'Kanit', sans-serif; font-size: 70px; font-weight: 300; color: #fff; margin-bottom: 20px; line-height: 70px;}
.banner-description h3 b {font-weight: 600; display: block; }
.banner-description h3 span {color: #f4d294; }
.banner-description p {color: #fff; font-size: 20px; }

.units-logo-section {position: absolute; left: 0; bottom: 0; width: 100%; height: 200px; z-index: 999; }
.units-logo-area {}
.units-logo-area ul {
	/* display: inline-block; */
	width: 100%;
	height: 200px;
	/* padding-top: 50px; */
}
.units-logo-area ul li {height: 200px;line-height: 200px;/* float: left; *//* width: 25%; */text-align: left;/* padding: 0 10px; *//* background: #dbdbdb; */
	transition: all 50ms ease-in; position: relative; }
.units-logo-area ul li i {position: absolute; left: 50%; bottom: 25px; height: 20px; line-height: 20px;  margin-left: -12px; opacity: 0;
	transform: rotate(90deg); transition: all 50ms ease-in;}
.units-logo-area ul li i:before {font-size: 24px; }
.units-logo-area ul li a {
	display: block;
	height: 100%;
	position: relative;
	color: #020201; text-decoration: none;
}
.units-logo-area ul li img {display: inline-block;max-width: 80%;max-height: 60px; }
.units-logo-area ul li:hover {background: #fff; text-align: center; }
.units-logo-area ul li img:nth-child(1) {display: inline-block;}
.units-logo-area ul li img:nth-child(2) {display: none;}
.units-logo-area ul li:hover img:nth-child(1) {display: none;}
.units-logo-area ul li:hover img:nth-child(2) {display: inline-block;}
.units-logo-area ul li:hover i {opacity: 1;}

.introduction-section {border-bottom: 1px solid #dbdbdb;}
.introduction-area {}
.introduction-detail {padding: 250px 25% 150px 25%; border-bottom: 1px solid #dbdbdb; position: relative; }
.introduction-detail h1 {font-family: 'Kanit', sans-serif; font-size: 70px; font-weight: 600; color: #313c4c; text-align: center; padding-bottom: 20px; }
.introduction-detail p {text-align: center; font-size: 20px; line-height: 24px; padding-bottom: 30px; }

.introduction-buttons {width: 100%; text-align: center; }
.introduction-buttons ul {display: inline-block; }
.introduction-buttons ul li {float: left;  border-radius: 50px;  height: 52px; line-height: 50px; font-size: 16px; border: 1px solid #000;
	transition: all 200ms ease-in;}
.introduction-buttons ul li:hover {background: #485155; border: 1px solid #485155 !important}
.introduction-buttons ul li:hover a {color: #fff;}
.introduction-buttons ul li:hover i {color: #fff;}
.introduction-buttons ul li + li {margin-left: 20px; }
.introduction-buttons ul li a {display: block; text-decoration: none;  padding: 0 20px; height: 100%; color: #000;
	transition: all 200ms ease-in;}
.introduction-buttons ul li span {display: block; float: left; margin-right: 10px; width: 25px; height: 50px;  position: relative; overflow: hidden;
	border-radius: 50%; }
.introduction-buttons ul li span i {display: block; width: 25px; height: 50px; line-height: 50px; position: absolute;  top: 0;
	transition: all 300ms ease-in; color: #000; }
.introduction-buttons ul li span i:before {font-size: 25px; }
.introduction-buttons ul li span i:first-child {right: 130%; }
.introduction-buttons ul li span i:last-child {right: 0; }
.introduction-buttons ul li:hover span i:first-child {right: 0;}
.introduction-buttons ul li:hover span i:last-child {right: -130%;}
.introduction-buttons ul li:first-child span {float: right; margin: 0 0 0 10px}
.introduction-buttons ul li:first-child:hover {background: #f5c959;border: 1px solid #f5c959 !important;}

.introduction-shapes {}
.introduction-shapes span {position: absolute; content:''; opacity: 0;}
.introduction-shapes span:nth-child(1) {top: 120px;right: 25%; transition: all 500ms ease-in; }
.introduction-shapes span:nth-child(2) { top: 160px; left: 150px; transition: all 700ms ease-in; }
.introduction-shapes span:nth-child(3) { top: 180px; left: 100px; transition: all 500ms ease-in; }
.introduction-shapes span:nth-child(4) { bottom: 90px; left: 150px; transition: all 500ms ease-in; }
.introduction-shapes span:nth-child(5) { bottom: 120px; right: 100px; transition: all 700ms ease-in; }
.introduction-shapes span:nth-child(6) { bottom: 80px; right: 160px; transition: all 500ms ease-in; }
.introduction-shapes span:nth-child(7) {}
.introduction-shapes span:nth-child(8) {}

.introduction-shapes.load-shapes {}
.introduction-shapes.load-shapes span {opacity: 1;}
.introduction-shapes.load-shapes span:nth-child(1) {top: 150px; }
.introduction-shapes.load-shapes span:nth-child(2) { top: 180px; }
.introduction-shapes.load-shapes span:nth-child(3) { top: 200px; }
.introduction-shapes.load-shapes span:nth-child(4) {bottom: 70px; }
.introduction-shapes.load-shapes span:nth-child(5) {bottom: 100px;  }
.introduction-shape.load-shapess span:nth-child(6) {bottom: 60px;  }

.introduction-faq-area {padding: 80px 0 140px 0; }
.introduction-faq-desc {padding-right: 150px; margin-bottom: 10px; }
.introduction-faq-desc h3 {font-size: 16px; font-weight: 400; margin-bottom: 20px;}
.introduction-faq-desc p {font-size: 28px;font-weight: 600;padding-right: 50px;line-height: 32px;}

.introduction-faq {}
.introduction-faq ul {}
.introduction-faq ul li {border-bottom: 1px solid #dbdbdb;float: none;width: 42%;display: inline-flex; margin: 0 0 30px 5%; }
.faq-object {
	display: block;
	width: 100%;
}
.faq-object h4 {font-size: 25px;font-weight: 400;padding: 0 0 20px 0;position: relative; line-height: 28px; padding-right: 30px;  }
.faq-object h4 i {position: absolute; right: 0; top: 0; height: 21px; width: 21px; }
.faq-object h4 i:before {content:''; position: absolute; right: 10px; top: 0; width: 1px; height: 100%; background: #f5c959;
	transition: all 200ms ease-in;}
.faq-object h4 i:after {content:''; position: absolute; right: 0; top: 10px; height: 1px; width: 100%; background: #f5c959;}
.faq-object .answer-body {padding-bottom: 10px;display: none; font-size: 18px;}
.faq-object .answer-body p {}
.introduction-faq ul li.active .faq-object .answer-body {display: block;}
.introduction-faq ul li.active .faq-object h4 i:before {height: 0; top: 10px;}


.units-section {}

.unit-area {width: 100%; overflow: hidden; }

.unit-info {width: 50%; float: left; height: 550px; overflow: hidden; padding: 110px;}
.unit-info p {font-size: 18px;line-height: 24px;margin-bottom: 30px;color: #fff;}
.unit-info-logo {margin-bottom: 30px;}
.unit-info-logo img {max-width: 300px;max-height: 80px;}

.unit-inspect {}
.unit-inspect a {
	display: inline-block;
	height: 52px;
	border: 1px solid #fff;
	border-radius: 50px;
	padding: 0 30px 0 30px;
	line-height: 50px;
	color: #fff;
	text-decoration: none;
	font-size: 16px;
}
.unit-inspect i {display: block; float: right; height: 50px; line-height: 50px; margin-left: 10px;  }
.unit-inspect i:before {font-size: 20px; }
.unit-inspect a:hover {background: #fff; color: #000;}

.unit-banner {width: 50%; float: left; height: 550px; overflow: hidden;}
.unit-banner img {width: 100%; height: 100%; object-fit: cover; }

.unit-area:nth-child(even) .unit-info {float: right; }


.solutions-section {padding: 120px 0 100px 0;}

.solutions-desc-area {padding-bottom: 60px; }
.solutions-desc {padding: 20px 80px 0 0 ;}
.solutions-desc h2 {font-family: 'Kanit', sans-serif; font-size: 70px; font-weight: 600; color: #313c4c;  padding-bottom: 20px; }
.solutions-desc p {font-size: 18px; line-height: 24px; padding-bottom: 30px;}

.solutions-desc-cover {text-align: right; }
.solutions-desc-cover img {max-width: 100%; height: auto;}

.solutions-area {}
.solution-box {height: 142px; border: 1px solid #dbdbdb; margin-bottom: 20px; display: table; width: 100%; position: relative; }
.solution-box a {height: 100%; display: table-cell; vertical-align: middle; text-decoration: none; padding: 0 100px 0 50px; color: #000; }
.solution-box h4 {font-size: 20px; font-weight: 600; }
.solution-box:before {position: absolute; content:''; left: 0; top: 40px; width: 7px; height: 60px; background: #f5c959;
	transition: all 200ms ease-in;}
.solution-box:hover:before {height: 100px; top: 20px;  }


.library-section {height: 850px; background: #e2e5de; padding: 95px 0 0 0;}

.library-area {}

.library-area-header {height: 140px; }
.library-area-title {
	height: 140px;
}
.library-area-title h4 {font-family: 'Kanit', sans-serif;font-size: 70px;font-weight: 600;color: #313c4c;line-height: 60px;}
.library-area-title h5 {font-family: 'Kanit', sans-serif;font-size: 65px;font-weight: 300;color: #313c4c;line-height: 60px;}

.library-contents-menu {height: 140px; }
.library-contents-menu ul {display: inline-block; float: right; }
.library-contents-menu ul li {float: left; height: 140px; font-size: 15px; text-align:center; font-weight: 600; line-height: 20px; opacity: 0.5; }
.library-contents-menu ul li a {display: block; height: 100%; padding: 25px 25px; text-decoration: none; color: #313c4c; }
.library-contents-menu ul li.active {opacity: 1; }
.library-contents-menu ul li i {display: block; height: 60px; line-height: 60px; margin-bottom: 10px; }
.library-contents-menu ul li i:before {font-size: 50px; }

.library-contents {padding: 60px 0 90px 0;position: relative;}

.library-contents-list {display: none; }
.library-contents-list.active {display: block;}
.library-contents-list .row {margin: 0 -20px;}
.library-contents-list .col-md-3 {padding: 0 20px;}

.library-slider {}
.library-slider ul {}
.library-slider ul li {}

.library-slider .bx-wrapper .bx-pager.bx-default-pager {
	bottom: -80px; text-align: left; }
.library-slider .bx-wrapper .bx-pager.bx-default-pager a {border: none; background: #ffff; width: 18px; height: 18px;
	transition: all 100ms ease-in; margin: 0;}
.library-slider .bx-wrapper .bx-pager.bx-default-pager a:hover {background: #f7f7f7;}
.library-slider .bx-wrapper .bx-pager.bx-default-pager a.active {background: #ffff; width: 80px; border-radius: 10px;}
.library-slider .bx-pager-item + .bx-pager-item {margin-left: 20px; }


.library-box {height: 400px;overflow: hidden;position: relative;background: #000;}
.library-box a {display: block; height: 100%; text-decoration: none; color: #fff; }
.library-box img {width: 100%; height: 100%; object-fit: cover; transition: all 200ms ease-in; }
.library-box:hover img {transform: scale(1.05); opacity: 0.8;}
.library-box-title {position: absolute;left: 0;bottom: 0;background: rgba(0,0,0,0.5);width: 100%;padding: 20px 50px 20px 20px;}
.library-box-title h4 {font-size: 18px; font-weight: 500;  }
.library-box-title h4 b {display: block; font-weight: 400; font-size: 13px; margin-top: 10px; }
.library-box-title i {position: absolute; right: 20px; bottom: 20px; ; }
.library-box-title i:before {font-size: 30px; }

.library-book {height: 400px;overflow: hidden;position: relative;background: #000; margin-bottom: 20px;}
.library-book a {display: block; height: 100%; text-decoration: none; color: #000; }
.library-book img {width: 100%; height: 100%; object-fit: cover; transition: all 200ms ease-in;}
.library-book-title {position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: #fff; padding: 35px 30px;
	transition: all 50ms ease-in; opacity: 0; border: 1px solid #dbdbdb;}
.library-book-title i {display: block; line-height: 40px; height: 40px; margin-bottom: 20px; color: #989da5; }
.library-book-title i:before {font-size: 40px; }
.library-book-title h4 {font-size: 20px; font-weight: 600; line-height: 25px;}
.library-book-title p {position: absolute; left: 30px; bottom: 35px; font-size: 16px;}
.library-book-title p b {display: block; font-weight: 400; margin-top: 5px; }

.library-book:hover img {}
.library-book:hover .library-book-title {opacity: 1;}

.library-all-contents {position: absolute; right: 0; bottom: 0; height: 20px; line-height: 20px; opacity: 0.5; font-weight: 600; }
.library-all-contents a {display: block; height: 100%; text-decoration: none; color: #313c4c;}
.library-all-contents i {display: block; height: 20px; line-height: 20px; float: right; margin-left: 10px; }
.library-all-contents i:before {font-size: 20px; }
.library-all-contents:hover {opacity: 1;}


.blogs-section {height: 751px; border-bottom: 1px solid #dbdbdb; }
.blogs-section .row {margin: 0;}
.blogs-section .col-md-6 {padding: 0; }

.dictionary-area {height: 750px; padding: 130px 100px 0 0; }
.dictionary-title {margin-bottom: 70px; }
.dictionary-title h4 {font-family: 'Kanit', sans-serif;font-size: 50px;font-weight: 600;color: #313c4c;line-height: 50px;}
.dictionary-title h5 {font-family: 'Kanit', sans-serif;font-size: 45px;font-weight: 300;color: #313c4c;line-height: 45px;}

.dictionary-content {margin-bottom: 70px; }
.dictionary-content h4 {padding: 0 0 0 10px; border-left: 5px solid #f5c959; font-size: 18px; line-height: 25px; margin-bottom: 25px }
.dictionary-content p {font-size: 18px; line-height: 24px; }
.dictionary-inspect {}
.dictionary-inspect a {display: inline-block; height: 52px; border: 1px solid #000; border-radius: 50px; padding: 0 30px 0 30px; line-height: 50px;
	color: #000; text-decoration: none; font-size: 16px; }
.dictionary-inspect i {display: block; float: right; height: 50px; line-height: 50px; margin-left: 10px;  }
.dictionary-inspect i:before {font-size: 20px; }
.dictionary-inspect a:hover {background: #f1f1f1;}

.blogs-area {height: 750px; border-left: 1px solid #dbdbdb; padding: 130px 0 0 70px;  }
.blogs-area-title {margin-bottom: 70px; }
.blogs-area-title h4 {font-family: 'Kanit', sans-serif;font-size: 50px;font-weight: 600;color: #313c4c;line-height: 50px;}

.blogs-list {}
.blogs-list ul {}
.blogs-list ul li {padding-bottom: 20px; border-bottom: 1px solid #dbdbdb; }
.blogs-list ul li.active {}
.blogs-list ul li.active .blog-box h6 {display: block;}
.blogs-list ul li.active .blog-box p {display: block;}

.blog-box {}
.blog-box a {display: block; text-decoration: none; color: #000; }
.blog-box h5 {font-size: 16px;  padding-top: 20px;  }
.blog-box h6  {font-size: 13px; font-weight: 400; overflow: hidden; line-height: 16px; margin: 10px 0 20px 0; display: none;}
.blog-box h6 span {display: block; float: left; line-height: 16px; position: relative; padding: 0 15px;   }
.blog-box h6 span + span {}
.blog-box h6 span:before {content: ''; position: absolute; left: -3px;; top: 5px; width: 6px; height: 6px; background: #dbdbdb; border-radius: 50%; }
.blog-box h6 span:first-child {padding-left: 0; }
.blog-box h6 span:first-child:before {display: none;}
.blog-box p {font-size: 16px; line-height: 22px; display: none;}

.blog-all-contents {margin-top: 50px; height: 20px; line-height: 20px; opacity: 0.5; font-weight: 600; font-size: 16px;}
.blog-all-contents a {display: inline-block; height: 100%; text-decoration: none; color: #313c4c;}
.blog-all-contents i {display: block; height: 20px; line-height: 20px; float: right; margin-left: 10px; }
.blog-all-contents i:before {font-size: 20px; }
.blog-all-contents:hover {opacity: 1;}


.actual-section {padding: 100px; }

.actual-area {}
.actual-area-title {height: 150px; position: relative; overflow: hidden; margin-bottom: 20px; }
.actual-area-title h5 {font-family: 'Kanit', sans-serif;font-size: 150px;font-weight: 600;color: #fff; line-height: 150px; position: absolute; left: 0; top: 0; z-index: -1;
	-webkit-text-stroke-width: 1px;
	-webkit-text-stroke-color: #e4e4e4;}
.actual-area-title h4 {font-family: 'Kanit', sans-serif;font-size: 70px;font-weight: 600;color: #313c4c; line-height: 165px;  }

.actual-contents-menu {height: 52px; border: 1px solid #a9b3b1; padding: 0 70px; }
.actual-contents-menu ul {}
.actual-contents-menu ul li {float: left; height: 50px; line-height: 50px; font-size: 16px; position: relative; }
.actual-contents-menu ul li a {display: block; height: 100%; text-decoration: none; color: #313c4c; padding: 0 20px;
	transition: all 200ms ease-in;}
.actual-contents-menu ul li + li {margin-left: 20px; }
.actual-contents-menu ul li:before {content:''; position: absolute; left: 0; bottom: -3px; width: 0; height: 5px; background: #f2bc30;
	transition: all 200ms ease-in;}
.actual-contents-menu ul li.active:before {width: 100%; }
.actual-contents-menu ul li:hover a {color: #f2bc30;}
.actual-contents-menu ul li.active {font-weight: 800; }

.actual-contents {padding: 40px 0; position: relative;}

.actual-contents-list {display: none;}
.actual-contents-list.active {display: block;}
.actual-contents-list .row {margin: 0 -30px;}
.actual-contents-list .col-md-3 {padding: 0 30px;}

.actual-slider {}
.actual-slider ul {}
.actual-slider ul li {}

.actual-box {height: 400px;overflow: hidden;position: relative;background: #000; margin-bottom: 50px;}
.actual-box a {display: block; height: 100%; text-decoration: none; color: #fff; }
.actual-box img {width: 100%; height: 100%; object-fit: cover; transition: all 200ms ease-in; opacity: 0.8; }
.actual-box:hover img {transform: scale(1.08); opacity: 0.4;}
.actual-box-title {position: absolute;left: 0;bottom: 0;width: 100%;padding: 30px 30px 60px 30px;}
.actual-box-title h4 {font-size: 20px; font-weight: 500; }
.actual-box-title h4 b {display: block; font-weight: 400; font-size: 13px; margin-top: 10px; }
.actual-box-title i {position: absolute; right: 20px; bottom: 20px; ; }
.actual-box-title i:before {font-size: 30px; }
.actual-box-title p {font-size: 15px; margin: 40px 0;  display: none;
	overflow: hidden;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;}
.actual-box > a > i {position: absolute; left: 50%; top: 30%; margin: 0 0 0 -25px; color: #fff; background: #000; width: 50px; height: 50px; border-radius: 50%; }
.actual-box > a > i:before {font-size: 50px; }

.actual-box-title ul {overflow: hidden;  position: absolute; left: 0; bottom: 0; width: 100%; padding: 25px; display: none;}
.actual-box-title ul li {float: left; padding: 0 5px; height: 15px; line-height: 15px; opacity: 0.8; font-size: 12px; }
.actual-box-title ul li + li {border-left: 1px solid #aaa;}


.actual-box:hover .actual-box-title {background: #485155; height: 100%; }
.actual-box:hover .actual-box-title h4 {color: #f2bc30;}
.actual-box:hover .actual-box-title p {display: -webkit-box;}
.actual-box:hover .actual-box-title ul {display: block;}


.actual-slider .bx-wrapper .bx-pager.bx-default-pager {
	bottom: -80px; text-align: left; }
.actual-slider .bx-wrapper .bx-pager.bx-default-pager a {border: none; background: #eae4de; width: 18px; height: 18px;
	transition: all 100ms ease-in; margin: 0;}
.actual-slider .bx-wrapper .bx-pager.bx-default-pager a:hover {background: #eae4de;}
.actual-slider .bx-wrapper .bx-pager.bx-default-pager a.active {background: #eae4de; width: 80px; border-radius: 10px;}
.actual-slider .bx-pager-item + .bx-pager-item {margin-left: 20px; }

.actual-all-contents {position: absolute; right: 0; bottom: -30px; height: 20px; line-height: 20px; opacity: 0.5; font-weight: 600; }
.actual-all-contents a {display: block; height: 100%; text-decoration: none; color: #313c4c;}
.actual-all-contents i {display: block; height: 20px; line-height: 20px; float: right; margin-left: 10px; }
.actual-all-contents i:before {font-size: 20px; }
.actual-all-contents:hover {opacity: 1;}

.main-contact-area {height: auto; overflow: hidden; margin-bottom: 30px;  font-family: 'Quicksand', sans-serif; }

.map-box {height: 350px; overflow: hidden;}
.map-box iframe {width: 100% !Important; height: 100% !Important;}

.main-contact-info {}
.main-contact-info h2 {font-size: 22px; font-weight: 600; margin-bottom: 20px;  }
.main-contact-info ul {}
.main-contact-info ul li {padding: 17px 0; border-top: 1px solid #d3d3d3; font-size: 18px; }
.main-contact-info ul li:last-child {border-bottom: 1px solid #d3d3d3;}
.main-contact-info ul li span {}
.main-contact-info ul li b {font-weight: 600; color: #000;}
.main-contact-info ul li a {font-weight: 600;color: #000;display: inline-block;height: 20px;line-height: 20px;}
.main-contact-info ul li i {display: block;height: 20px;line-height: 20px;float: right;margin-left: 10px;}
.main-contact-info ul li i:before {}


.contact-informations {}
.contact-informations table {}
.contact-informations table th {
	padding: 12px !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	background: #f4f4f4;
}
.contact-informations table td {font-family: 'Oswald', serif; font-size: 17px; font-weight: 300;  padding: 12px !important;}


/******* *******/
.inner-shapes {}
.inner-shapes:before {content:'';position: absolute;width: 117px;height: 143px;top: 670px;left: -30px;background: url('../img/photos/shape-inner-triangle.png');z-index: -1;}
.inner-shapes:after {content:'';position: absolute;width: 178px;height: 185px;top: 900px;right: -100px;background: url('../img/photos/shape-inner-circle.png');z-index: -1;}
.homepage .inner-shapes {display: none;}

.content-section {padding-bottom: 100px;}

.content-header {background: #485155; margin-bottom: 30px; }
.content-header-area {height: 150px; position: relative; background:url('../img/photos/shape-inner-header.png') no-repeat right 100px center; }
.content-header-area h1 {position: absolute; font-size: 28px;  bottom: -4px; left: 0; padding: 0 30px 20px 0 ; border-bottom: 10px solid #f5c959;
	font-family: 'Kanit', sans-serif; color: #fff; font-weight: 300; max-width: 60%; }

.content-header-large {height: 500px; position: relative; overflow: hidden; background: rgba(0,0,0,0.2); }
.content-header-large > img {position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.content-header-title {height: 500px; padding: 100px 25% 0 0; position: relative;}
.content-header-title h3 {font-family: 'Kanit', sans-serif; font-size: 70px; font-weight: 500; color: #fff; margin-bottom: 20px; line-height: 70px;}
.content-header-title h2 {font-family: 'Kanit', sans-serif; font-size: 70px; font-weight: 500; color: #fff; margin-bottom: 20px; line-height: 70px;}
.content-header-title h1 {font-family: 'Kanit', sans-serif; font-size: 70px; font-weight: 500; color: #fff; margin-bottom: 20px; line-height: 70px;}
.content-header-title p {font-size: 20px; color: #fff; }

.content-header-social {position: absolute; bottom: 30px; left: 0; }
.content-header-social ul {}
.content-header-social ul li {float: left; }
.content-header-social ul li + li {margin-left: 10px; }
.content-header-social ul li a {color: #fff; text-decoration: none; }
.content-header-social ul li i {display: block; height: 25px; line-height: 25px; }
.content-header-social ul li i:before {font-size: 25px; }
.content-header-social ul li a:hover {color: #f5c959;}
.content-header-social ul li span {display: block; height: 25px; line-height: 25px; color: rgba(255,255,255,0.7); margin-left: 20px; }
.content-header-social ul li:last-child span {border-left: 1px solid rgba(255,255,255,0.7); padding-left: 10px;margin-left: 5px;   }

.inner-page {}

.content-area {}

.page-cover-photo {margin-bottom: 20px; height: 510px; overflow: hidden; }
.page-cover-photo img {width: 100%; height: 100%; object-fit: cover; }

.detail-content {font-family: 'Quicksand', sans-serif;padding-bottom: 10px;}
.detail-content p {font-size: 18px;line-height: 26px;margin-bottom: 20px; font-family: 'Quicksand', sans-serif !important;}
.detail-content h1, .detail-content h2, .detail-content h3, .detail-content h4, .detail-content h5, .detail-content h6 {font-size: 20px;line-height: 24px;margin-bottom: 20px;
	font-family: 'Quicksand', sans-serif !important;}
.detail-content img {max-width: 100%; }
.detail-content iframe {max-width: 100% !important; margin-bottom: 20px; }
.detail-content ul, .detail-content ol {margin-left: 20px; list-style: inherit; font-size: 16px;
	line-height: 24px;
	margin-bottom: 20px; font-family: 'Quicksand', sans-serif !important;}
.detail-content span {font-family: 'Quicksand', sans-serif !important;}
.detail-content b {font-family: 'Quicksand', sans-serif !important;}

.detail-content blockquote {display: block;padding: 20px 25px;position: relative;margin-bottom: 22px;border-left: 8px solid #c9cacd;margin-left: 22px;}
.detail-content blockquote p {margin: 0;}
.detail-content blockquote i {display: none;}
.detail-content blockquote i:before {font-size: 24px;}
.detail-content blockquote:before {}
.detail-content blockquote:after {}


.page-photos-slider {display: none;}
.page-photos-slider ul {}
.page-photos-slider ul li {}
.page-photos-slider ul li a {}
.page-photos-slider ul li img {}

.content-bottom-share {margin-bottom: 30px;}

.content-bottom-share {}
.content-bottom-share > ul {display: inline-block;}
.content-bottom-share > ul > li {float: left; height: 50px; border: 1px solid #000; line-height: 48px; position: relative;
	border-radius: 50px; }
.content-bottom-share > ul > li > a {display: block; height: 100%; color: #000; text-decoration: none; padding: 0 35px; opacity: 0.9;}
.content-bottom-share > ul > li > a > i {display: block; height: 48px; float: left; line-height: 48px; margin-right: 10px; }
.content-bottom-share > ul > li > a > i:before {font-size: 26px; line-height: 48px;}
.content-bottom-share > ul > li + li {margin-left: 15px; }
.content-bottom-share > ul > li:hover {background: #f4d294; border-radius: 0 0 30px 30px; border: none;}
.content-bottom-share > ul > li:hover > a {color: #000;}
.content-bottom-share > ul > li > a:hover {cursor: pointer;}
.content-bottom-share > ul > li:hover > ul {display: block; z-index: 10; opacity: 1;}
.content-bottom-share > ul > li > ul {position: absolute;left: 0;bottom: 48px;background: #f4d294;width: 100%;z-index: -1; opacity: 0;
	border-top: 1px solid rgb(76,117, 105, 0,1);  border-radius: 30px 30px 0 0;}
.content-bottom-share > ul > li > ul > li {height: 40px; line-height: 40px; font-size: 13px;
	transition: all 100ms ease-in;}
.content-bottom-share > ul > li > ul > li > a {display: block; height: 100%; text-decoration: none; color: #000; padding: 0 20px; }
.content-bottom-share > ul > li > ul > li > a > i {display: block; float: left; height: 40px; line-height: 40px; margin-right: 10px;}
.content-bottom-share > ul > li > ul > li > a > i:before{font-size: 18px; }
.content-bottom-share > ul > li > ul > li + li {border-top: 1px solid rgba(76,117, 105, 0.1);}
.content-bottom-share > ul > li > ul > li:hover {background: rgba(76,117, 105, 0.1);}

.content-filter-area {
	height: 54px;
	border: 1px solid #ccc;
	margin-bottom: 30px;
	padding: 0 20px;
	font-family: 'Quicksand', sans-serif;
	border-radius: 0;
}
.content-filter-area ul {}
.content-filter-area ul li {width: 25%; float: left; }


.custom-select {position: relative;/* width: 100%; *//* height: 60px; */}
.custom-select select { display: none; }
.select-selected {background: #f1f1f1 !important;height: 62px !important;line-height: 60px !important;border: 1px solid #cecece !important;font-size: 18px;padding: 0 30px !important;}
.select-selected:after {
	position: absolute;
	content: "";
	top: 25px;
	right: 20px;
	width: 16px;
	height: 16px;
	background: url(../img/icons/down-arrow-white.png) no-repeat;
}
.select-selected.select-arrow-active:after {transform: rotate(180deg);}
.select-selected.select-arrow-active {background: #fff !important;}
.select-selected {
	color: #868686;
	padding: 0 15px;
	border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
	cursor: pointer;
	user-select: none;
	height: 40px;
	line-height: 39px;
	border-bottom: 1px solid #e9e9e9;
	text-align: left;
	background: #fff;
}
.select-items div {
	color: #868686;
	padding: 0 30px;
	border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
	cursor: pointer;
	user-select: none;
	line-height: 62px;
	border-bottom: 1px solid #cecece;
	text-align: left;
	background: #fff;
	height: 62px;
	font-size: 18px;
}
.select-items {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 99;
	border: 1px solid #cecece;
	border-top: none;
	max-height: 600px;
	overflow: scroll;
	background: #fff;
	min-height: 124px;
	z-index: 9999;
}
.select-items:hover {cursor: pointer;}
.select-hide { display: none;}
.select-items div:hover, .same-as-selected {background: #f2f2f2; cursor: pointer;}
.filter-select {height: 52px;/* overflow: hidden; */}
.filter-select b {display: block; float: left; width: 20%; height: 52px; line-height: 52px; font-weight: 500; font-size: 15px;
	text-align: right; padding-right: 10px; color: #868686;}
.filter-select .custom-select {display: block; float: left; width: 70%;  height: 52px; }
.filter-select .select-selected:after {top: 18px;}
.filter-select .select-selected {
	background: none !important;
	height: 52px !important;
	line-height: 52px !important;
	border: none !important;
	border-left: 1px solid transparent !important; border-right: 1px solid transparent !important;
	font-size: 16px;
	padding: 0 10px !important;
	color: #000;
}
.filter-select .select-items div {height: 42px; line-height: 40px; padding: 0 10px; font-size: 15px; }
.filter-select .select-items {border-top: 1px solid #cecece;}
.filter-select .select-selected.select-arrow-active {border-left: 1px solid #cecece !important; border-right: 1px solid #cecece !important;}

.content-filter-area ul li:nth-child(1) {width: 28%;}
.content-filter-area ul li:nth-child(1) .filter-select b {width: 30%;}
.content-filter-area ul li:nth-child(1) .filter-select .custom-select {width: 70%;}

.content-filter-area ul li:nth-child(2) {width: 21%;}
.content-filter-area ul li:nth-child(2) .filter-select b {width: 20%;}
.content-filter-area ul li:nth-child(2) .filter-select .custom-select {width: 80%; }

.content-filter-area ul li:nth-child(3) {width: 21%;}
.content-filter-area ul li:nth-child(3) .filter-select b {}
.content-filter-area ul li:nth-child(3) .filter-select .custom-select {}

.content-filter-area ul li:nth-child(4) {width: 30%;}

.filter-area {margin-bottom: 70px;height: auto;min-height: 60px;text-align: center;/* overflow: hidden; */display: inline-block;width: 100%;}
.filter-area > form > ul {text-align: center; margin: 0 -5px;}
.filter-area > form > ul > li {width: 24.7%;/* float: left; */height: 60px;padding: 0 5px;margin-bottom: 10px;display: inline-block;}
.filter-area > form > ul > li > select {width: 100%; height: 100%; padding: 0 20px; border: 1px solid #e9e9e9; color: #868686;
	appearance: none;  -moz-appearance: none;   -webkit-appearance: none; background: #fbfbfc url(../img/icons/down-arrow.png) no-repeat right 15px center;}
.filter-area ul li > button {width: 100%; height: 100%; border: 1px solid #e9e9e9; background: #fbfbfc; color: #868686; }
.filter-area ul li > button:hover {background: #f3f3f3;}

.filter-search {height: 60px; position: relative; }
.filter-search input {
	width: 100%;
	height: 100%;
	background: #fbfbfc;
	border: 1px solid #e9e9e9;
	color: #868686;
	padding: 0 50px 0 15px;
	box-shadow: none;
	border-radius: 0;
}
.filter-search button {position: absolute; right: 0; top: 0; width: 40px; height: 60px; background: none; border: none; box-shadow: none; border-radius: 0; }
.filter-search button:hover {background: #f3f3f3; }

.list-filter-area .vs__dropdown-toggle {padding: 0 10px !Important;}

.vs__dropdown-toggle {
	height: 60px;
	background: #fbfbfc  !Important;
	border-radius: 0 !Important;
	border: 1px solid #e9e9e9 !Important;
}
.vs__actions {padding: 4px 15px 0 3px !Important;}

.events-filter-area ul li > button {width: 100%; height: 100%; background: #f3f3f3; border: 1px solid #e9e9e9;}


.filter-search {height: 52px; }
.filter-search b {display: block; float: left; width: 20%; height: 52px; line-height: 52px; font-weight: 500; font-size: 15px;
	text-align: right; padding-right: 10px; color: #868686; }
.filter-search-form {display: block; float: left; width: 80%;  height: 52px; position: relative;}
.filter-search-form input {width: 80%; height: 44px; border: none; border-bottom: 1px solid #dbdbdb; font-size: 16px;}
.filter-search-form button {position: absolute; right: 0; width: 15%; height: 100%; border: none; background: no-repeat; box-shadow: none; border-radius: 0;
	color: #868686; padding: 0; }
.filter-search-form button i {display: block; }
.filter-search-form button i:before {font-size: 25px; transition: all 100ms ease-in;}
.filter-search-form button:hover {color: #000; }
.filter-search-form button:hover i:before {font-size: 28px; }

.pagination { }
.pagination ul {overflow: hidden; width: 100%; }
.pagination ul li {width: 50px; height: 50px; margin: 0 5px; float: left; border: 1px solid #c3c3c3; text-align: center; line-height: 48px;
	transition: all 100ms ease-in; }
.pagination ul li a {display: block; height: 100%; text-decoration: none; color: #000; }
.pagination ul li.active, .pagination ul li.active:hover {border-color: #7d7d7d; border-radius: 50%; }
.pagination ul li.active a {}
.pagination ul li:hover {background: #f2f2f2;}
.pagination ul li i {display: block; height: 48px; line-height: 48px; }
.pagination ul li i:before {font-size: 14px;}

.detail-photos-slider {margin-bottom: 30px;  position: relative;}
.detail-photos-slider li {height: 500px; overflow: hidden; position: relative;}
.detail-photos-slider img {width: 100%;height: 100%;object-fit: cover;}

.detail-photos-slider .bx-wrapper .bx-controls-direction a {display: none;}
.detail-photos-slider:hover .bx-wrapper .bx-controls-direction a {display: block;}

.detail-photos-slider .bx-wrapper .bx-controls-direction a {width: 50px; height: 50px;  border-radius: 0; border: 1px solid #fff;
	transition: all 300ms ease-in; }
.detail-photos-slider .bx-wrapper .bx-prev {left: 20px; background: url(../img/icons/white-prev.png) no-repeat center center;}
.detail-photos-slider .bx-wrapper .bx-next {right: 20px; background: url(../img/icons/white-next.png) no-repeat center center;}

.detail-photos-slider .bx-wrapper .bx-prev:hover {background: #333333 url(../img/icons/white-prev.png) no-repeat center center;}
.detail-photos-slider .bx-wrapper .bx-next:hover {background: #333333 url(../img/icons/white-next.png) no-repeat center center;}

.detail-photos-slider.single-slide:hover .bx-wrapper .bx-controls-direction a {display: none;}
.detail-photos-slider-pager.single-slide {display: none;}

.detail-photos-slider .bx-wrapper .bx-pager {bottom: 30px; text-align: right; padding-right: 30px; }
.detail-photos-slider .bx-wrapper .bx-pager.bx-default-pager a {font-size: 0; width: 10px; height: 10px; border: none; background: #fff; margin: 0 6px;
	transition: all 100ms ease-in;}
.detail-photos-slider .bx-wrapper .bx-pager.bx-default-pager a:hover {width: 20px; border-radius: 10px; }
.detail-photos-slider .bx-wrapper .bx-pager.bx-default-pager a.active {width: 50px; border-radius: 10px; }


.content-photos-area {margin-bottom: 20px;}
.content-photos-slider {margin-bottom: 20px;height: 740px;position: relative;}
.content-photos-slider li {height: 740px;overflow: hidden;position: relative;}
.content-photos-slider img {width: 100%;height: 100%;object-fit: contain;}
.content-photos-slider li i {position: absolute; width: 80px; height: 80px; background: #ce2f2b; left: 50%; top: 50%; margin: -40px 0 0 -40px;
	border-radius: 50%; text-align: center; line-height: 80px; color: #fff;
	-webkit-box-shadow: 0px 0px 25px 4px rgba(255,255,255,1);
	-moz-box-shadow: 0px 0px 25px 4px rgba(255,255,255,1);
	box-shadow: 0px 0px 25px 4px rgba(255,255,255,1);}
.content-photos-slider li i:before {font-size: 30px; transition: all 100ms ease-in;}
.content-photos-slider li:hover i:before {font-size: 45px;}

.content-photos-slider .bx-wrapper .bx-controls-direction a {display: none;}
.content-photos-slider:hover .bx-wrapper .bx-controls-direction a {display: block;}

.content-photos-slider .bx-wrapper .bx-controls-direction a {width: 50px; height: 50px;  border-radius: 0; border: 1px solid #fff;
	transition: all 300ms ease-in; }
.content-photos-slider .bx-wrapper .bx-prev {left: 20px; background: #333333 url(../img/icons/white-prev.png) no-repeat center center;}
.content-photos-slider .bx-wrapper .bx-next {right: 20px; background: #333333 url(../img/icons/white-next.png) no-repeat center center;}

.content-photos-slider .bx-wrapper .bx-prev:hover {background: #000 url(../img/icons/white-prev.png) no-repeat center center;}
.content-photos-slider .bx-wrapper .bx-next:hover {background: #000 url(../img/icons/white-next.png) no-repeat center center;}

.content-photos-slider.single-slide:hover .bx-wrapper .bx-controls-direction a {display: none;}
.content-photos-slider-pager.single-slide {display: none;}


.content-photos-slider-pager {width: 100%;overflow: hidden;/* padding: 0 50px; */}
.content-photos-slider-pager .bx-wrapper {margin: 0 !important; }
.content-photos-slider-pager ul {}
.content-photos-slider-pager ul li {}
.content-photos-slider-pager ul li a {display: block;height: 170px;opacity: 0.6;}
.content-photos-slider-pager ul li i {position: absolute; width: 40px; height: 40px; background: #ce2f2b; left: 50%; top: 50%; margin: -20px 0 0 -20px;
	border-radius: 50%; text-align: center; line-height: 40px; color: #fff;
}
.content-photos-slider-pager ul li i:before {font-size: 30px; transition: all 100ms ease-in;}
.content-photos-slider-pager ul li a:hover {opacity: 0.8; cursor: pointer;}
.content-photos-slider-pager ul li a.active {opacity: 1;}
.content-photos-slider-pager ul li img {width: 100%;height: 100%;object-fit: cover;}

.content-photos-slider-pager .bx-wrapper .bx-controls-direction a {width: 50px; height: 50px; top: 50%; margin-top: -25px;border-radius: 50%; border: 2px solid #fff;
	display: none;}
.content-photos-slider-pager .bx-wrapper .bx-prev {left: 0; background: #000 url('../img/icons/icon-min-prev-white.png') no-repeat center center; }
.content-photos-slider-pager .bx-wrapper .bx-next {right: 0; background: #000 url('../img/icons/icon-min-next-white.png') no-repeat center center;}
.content-photos-slider-pager .bx-wrapper .bx-prev:hover {}
.content-photos-slider-pager .bx-wrapper .bx-next:hover {}
.content-photos-slider-pager:hover .bx-wrapper .bx-controls-direction a {display: block;}

.content-video {height: 100%;}
.content-video iframe {width: 100% !Important;; height: 100% !Important;}

.content-video-pager {height: 100%; width: 100%; background: #ce2f2b;}
.content-video-pager a {display: block; height: 100%;}
.content-video-pager i {background: #fff !Important; color: #ce2f2b !Important;;}
.content-video-pager i:before {}

.detail-others {}
.detail-others > h4 {font-family: 'Quicksand', sans-serif; height: 30px; line-height: 30px; margin-bottom: 20px; }
.detail-others > h4 a {display: inline-block; padding-left: 15px; margin-left: 15px; border-left: 1px solid #dbdbdb; color: #000; font-weight: 500; font-size: 14px;}
.detail-others > ul {overflow: hidden; margin: -5px;}
.detail-others > ul > li {width: 25%; padding: 5px; float: left;}

.detail-video {margin-bottom: 30px;}
.detail-video iframe {width: 100% !important;}

.object-style-one {height: 300px; margin-bottom: 30px; font-family: 'Quicksand', sans-serif;  }
.object-style-one a {display: block; color: #000; text-decoration: none;}
.object-style-one > a > i {display: block; height: 170px; border: 1px solid #dbdbdb; text-align: center; line-height: 168px; color: #1e5494; }
.object-style-one > a > i:before {font-size: 80px; }
.object-style-one-photo {height: 170px; overflow: hidden; background: #000; position: relative;}
.object-style-one-photo img {width: 100%; height: 100%; object-fit: cover; opacity: 0.7; transition: all 200ms ease-in;}
.object-style-one-photo i {position: absolute; left: 50%; top: 50%; margin: -25px 0 0 -25px; color: #fff; background: #000; width: 50px; height: 50px; border-radius: 50%; }
.object-style-one-photo i:before {font-size: 50px; }
.object-style-one-title {height: 130px; padding-top: 12px;}
.object-style-one-title h4 {font-size: 16px; line-height: 22px; margin-bottom: 10px;
	overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.object-style-one-title p {}
.object-style-one-title ul {overflow: hidden; margin: 0 -10px;}
.object-style-one-title ul li {float: left; padding: 0 10px; height: 15px; line-height: 15px; opacity: 0.8;}
.object-style-one-title ul li + li {border-left: 1px solid #aaa;}
.object-style-one:hover .object-style-one-photo img {opacity: 1;  transform: scale(1.2);}
.object-style-one:hover > a > i {background: #f9f9f9}


.faq-area { font-family: 'Quicksand', sans-serif; }
.faq-area + .faq-area  {margin-top: 50px;}
.faq-area > h4 { font-size: 20px; margin-bottom: 10px;}
.faq-area > ul {}
.faq-area > ul > li {border-top: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea;  background: #fff; height: auto; overflow: hidden; }
.faq-area > ul > li + li {margin-top: 15px; }
.faq-area > ul > li > h4 {padding: 20px;font-size: 18px;	font-weight: 500; position: relative;}
.faq-area > ul > li > h4 i {position: absolute; right: 20px; top: 17px; color: #5d5d5d;}
.faq-area > ul > li > h4 i:before {font-size: 20px; }
.faq-area > ul > li .answer-body {display: none; padding: 20px; font-size: 18px;	}
.faq-area ul li.active .answer-body {display: block;}
.faq-area ul li.active {background: #f1f1f1;}
.faq-area > ul > li > h4:hover {cursor: pointer;}
.faq-area ul li.active h4 i {transform: rotate(180deg);}

.content-list {}
.content-list .library-box {margin-bottom: 20px;}

.project-box {height: 470px;overflow: hidden;margin-bottom: 20px;position: relative;background: #485156;}
.project-box a {display: block; height: 100%; text-decoration: none; color: #fff;}
.project-box img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.6;
	transition: all 200ms ease-in;
}
.project-box-title { position: absolute; left: 0; top: 0; width: 100%; height: 100%; padding: 50px; }
.project-box-title h4 {font-family: 'Kanit', sans-serif; font-size: 48px; font-weight: 400; margin-bottom: 30px;}
.project-box-title p {font-family: 'Quicksand', sans-serif; font-size: 16px; font-weight: 400; }
.project-box-title b {font-family: 'Montserrat', sans-serif; position: absolute; bottom: 40px; left: 50px; height: 20px; line-height: 20px;
	font-weight: 300; font-size: 14px; transition: all 200ms ease-in;}
.project-box-title b i {display: block; float: left; height: 20px; line-height :20px; margin-right: 10px;  }
.project-box-title b i:before {font-size: 20px; }
.project-box:hover img {transform: scale(1.2); opacity: 0;}
.project-box:hover .project-box-title b {left: 60px;}

.project-social {margin-bottom: 20px; }
.project-social ul {overflow: hidden;}
.project-social ul li {float: left; height: 60px; line-height: 60px; }
.project-social ul li + li {margin-left: 20px; }
.project-social ul li a {display: block; color: #6b6b6b; text-decoration: none;}
.project-social ul li i {display: block; height: 60px; line-height: 60px; }
.project-social ul li i:before {font-size: 20px; }
.project-social ul li a:hover {color: #6a2166;}

.detail-gallery-photos {}
.detail-gallery-photos h4 {font-family: 'Quicksand', sans-serif; height: 30px; line-height: 30px; }
.detail-gallery-photos h4 a {display: inline-block; padding-left: 15px; margin-left: 15px; border-left: 1px solid #dbdbdb; color: #000; font-weight: 500; font-size: 14px;}
.detail-gallery-photos ul {overflow: hidden; margin: -5px;}
.detail-gallery-photos ul li {width: 33.33%; padding: 5px; float: left;}
.detail-gallery-photo {height: 220px;}
.detail-gallery-photo a {display: block; height: 100%; }
.detail-gallery-photo img {width: 100%; height: 100%; object-fit: cover;}

.object-style-two {height: 330px;margin-bottom: 30px;font-family: 'Quicksand', sans-serif;}
.object-style-two a {display: block; color: #000; text-decoration: none;}
.object-style-two-photo {height: 170px; overflow: hidden; background: #000;}
.object-style-two-photo img {width: 100%; height: 100%; object-fit: cover; opacity: 0.7; transition: all 200ms ease-in;}
.object-style-two-title {height: 160px;padding-top: 12px;}
.object-style-two-title h5 {font-weight: 400; font-size: 13px; margin-bottom: 5px;}
.object-style-two-title h4 {font-size: 28px; line-height: 32px; margin-bottom: 5px;
	overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.object-style-two-title p {font-weight: 500; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical;}
.object-style-two-title p + ul {margin-top: 10px;}
.object-style-two-title ul {overflow: hidden; margin: 0 -10px;}
.object-style-two-title ul li {float: left; padding: 0 10px; height: 15px; line-height: 15px; opacity: 0.8; font-size: 13px; }
.object-style-two-title ul li + li {border-left: 1px solid #aaa;}
.object-style-two:hover .object-style-two-photo img {opacity: 1;  transform: scale(1.2); }

.event-box {height: 350px; overflow: hidden; opacity: 0; transition: all 500ms ease-in;}
.event-box a {display: block; height: 100%; color: #000; text-decoration: none; }
.event-photo {height: 155px; position: relative; margin-bottom: 20px; overflow: hidden;}
.event-photo img {width: 100%; height: 100%; object-fit: cover; transition: all 300ms ease-in;}
.event-photo span {position: absolute; left: 10px; bottom: 10px; color: #fff; padding: 5px 10px; transition: all 100ms ease-in;}
.event-info {height: 195px; }
.event-info h4 {font-size: 18px;  line-height: 24px; margin-bottom: 10px; }
.event-info ul {}
.event-info ul li {height: 31px; line-height: 30px; border-top: 1px solid #e2e2e2; }
.event-info ul li i {display: block; float: left; height: 30px; line-height: 30px; margin-right: 5px; }
.event-info ul li i:before {font-size: 18px; }
.event-info ul li i.icon-exclamation {color: #9a3030;}

.event-box:hover .event-photo span {padding: 5px 20px;}
.event-box:hover .event-photo img {transform: scale(1.1);}
.event-box.load {opacity: 1;}

.object-list-area .event-box {opacity: 1; height: 450px;}
.object-list-area .event-photo {height: 200px;}
.object-list-area .event-info h4 {font-size: 22px; font-weight: 500; line-height: 27px;}
.object-list-area .event-info ul li {font-size}

.month-days-area {width: 87%; height: 90px; float: left; overflow: hidden;}

.month-days-slider {padding: 0 32px; border-left: 1px solid #fff; }
.month-days-slider li {height: 90px; transition: all 100ms ease-in;}
.month-days-slider li:hover, .month-days-slider li.today, .month-days-slider li.today .month-day {background: #453579;}
.month-days-slider li:hover .month-day {background: #453579;}
.month-days-slider .bx-wrapper .bx-controls-direction a {width: 31px;height: 80px;top: 0;margin-top: 0;border-radius: 0;border: none;}
.month-days-slider .bx-wrapper .bx-prev {left: -32px;  background: #702884 url(../img/icons/white-prev.png) no-repeat center center;
	border-right: 1px solid #b08bba; }
.month-days-slider .bx-wrapper .bx-next {right: -32px; background: #702884 url(../img/icons/white-next.png) no-repeat center center;
	border-left: 1px solid #b08bba; }

.month-days-slider .bx-wrapper .bx-prev:hover {background: #702884 url(../img/icons/white-prev.png) no-repeat center center;}
.month-days-slider .bx-wrapper .bx-next:hover {background: #702884 url(../img/icons/white-next.png) no-repeat center center;}

.month-day {height: 80px; background: #854b95; text-align: center; transition: all 100ms ease-in;}
.month-day a {display: block; height: 100%; text-decoration: none; color: #fff; padding: 7px 5px; }
.month-day b {display: block; font-size: 34px; line-height: 34px; font-weight: 400; margin-bottom: 2px;}
.month-day p {display: block; font-size: 14px; line-height: 14px; margin-bottom: 2px; }
.month-day span {display: block; font-size: 14px; line-height: 14px; }

.day-events-cat {height: 10px;text-align: center;}
.day-events-cat ul {overflow: hidden;text-align: center;height: 10px; display: inline-block;}
.day-events-cat ul li {width: 10px;height: 3px; float: left; margin: 0 1px; }

.month-days-list {font-family: 'Khand', sans-serif; overflow: hidden; margin-bottom: 50px;}
.month-days-list > ul {margin: 0 -1px; }
.month-days-list > ul > li {width: 6.24%;padding: 0 1px;float: left;}
.month-days-list .month-day:hover {background: #453579;}

.object-text-style {height: 250px; border: 1px solid #dddddd; margin-bottom: 20px; position: relative; font-family: 'Quicksand', sans-serif;}
.object-text-style a {display: block; height: 100%; text-decoration: none; color: #000; }
.object-text-style h4 {font-size: 26px; line-height: 30px; padding: 100px 220px 0 50px}
.object-text-style i {position: absolute; right: 40px; top: 0; height: 248px; line-height: 248px; color: #dcdcdc;
	transition: all 200ms ease-in;}
.object-text-style i:before {font-size: 44px;}
.object-text-style:hover {}
.object-text-style:hover i {right: 30px; color: #333;}

.person-content-list {}
.person-content-list .col-md-3 {width: 20% !important;;}

.person-box {height: 305px; position: relative; overflow: hidden; margin-bottom: 20px; background: #000; }
.person-box a {display: block; height: 100%; color: #fff; text-decoration: none; }
.person-box img {width: 100%; height: 100%; object-fit :cover; opacity: 0.8;}
.person-box-title {position: absolute; left: 0; bottom: 0; width: 100%; height: auto; padding: 40px 25px 25px 25px; }
.person-box-title h4 {font-size: 18px; margin-bottom: 10px; }
.person-box-title h5 {font-size: 16px; font-weight: 500; }
.person-box:hover .person-box-title {height: 100%; background: #f2bc30;}
.person-box:hover a {color: #000;}

.person-detail {font-family: 'Quicksand', sans-serif;}
.person-detail-photo {height: 375px; }
.person-detail-photo a {display: block; height: 100%; text-decoration: none;}
.person-detail-photo img {width: 100%; height: 100%; object-fit: cover; }
.person-detail-social {height: 38px;overflow: hidden;}
.person-detail-social h6 {width: 40%; float: left;height: 38px; line-height: 38px; font-weight: 500; font-size: 14px;  }
.person-detail-social h6 a {color: #9c9b9b; text-decoration: none; }
.person-detail-social ul {width: 60%; float: left;height: 38px; }
.person-detail-social ul li {float: right; height: 38px; }
.person-detail-social ul li a {display: block; padding: 0 3px; color: #c7c7c7; text-decoration: none;}
.person-detail-social ul li i { display: block; height: 38px; line-height: 38px; }
.person-detail-social ul li i:before {font-size: 18px;}

.person-detail-social h6 a:hover {color: #000;}
.person-detail-social ul li:hover i {color: #000;}
.person-detail-social ul li:hover i.icon-linkedin22 {color: #1c5f92;}
.person-detail-social ul li:hover i.icon-facebook6 {color: #246ca3;}
.person-detail-social ul li:hover i.icon-twitter8 {color: #40a7f6;}
.person-detail-social ul li:hover i.icon-instagram3 {color: #986896;}
.person-detail-social ul li:hover i.icon-mail6 {color: #000;}

.department-box {height: 330px; border: 1px solid #dbdbdb; background: #fff; border-radius: 15px; position: relative; margin-bottom: 20px; }
.department-box a:hover {background: #f1f1f1;}
.department-box > a {display: block; height: 100%; color: #000; text-decoration: none;  }
.department-box-photo {height: 220px; line-height: 220px; text-align: center; }
.department-box-photo img {max-width: 90%; max-height: 90%; }
.department-box h5 {text-align: center; padding: 0 20%; font-size: 24px; }
.department-box-menu {position: absolute; bottom: 20px; left: 10%; width: 80%;  text-align: center; }
.department-box-menu:before {content:''; position: absolute; top: 12px;  left: 0; width: 100%; background: #dbdbdb; height: 1px; }
.department-box-menu i {display: block; color: #ee5656; transform: rotate(90deg);
	transition: all 200ms ease-in;}
.department-box-menu i:before {font-size: 20px; }
.department-box-menu:hover i {transform: rotate(-90deg);}
.department-box-menu b {display: block; font-weight: 500; }
.department-box-menu:hover {cursor: pointer; }
.department-box-menu ul {position: absolute; top:50px; left: 15%; width: 70%; background: #fff; border-radius: 10px; padding: 20px 0;
	box-shadow: 0px 0px 25px rgba(0, 0, 0, 0.1); z-index: 100; display: none; text-align: left; }
.department-box-menu:hover ul {display: block;}
.department-box-menu ul li {}
.department-box-menu ul li a {display: block; color: #000; text-decoration: none; padding: 5px 20px; }
.department-box-menu ul li:hover {background: #efefef; }

.sub-band-section {height: 160px; background: #01b4db; margin-bottom: 70px; }
.sub-band-area {}

.sub-logo-area {height: 170px;line-height: 170px;background: #fff;margin-top: -10px;padding: 0 20px;}
.sub-logo-area img {max-width: 300px;max-height: 80px;}

.sub-social-links {height: 160px; padding: 65px 0 0 65px; position: relative; background: url('../img/photos/shape-7.png') no-repeat center left; }
.sub-social-links ul {}
.sub-social-links ul li {float: left; }
.sub-social-links ul li + li {margin-left: 10px; }
.sub-social-links ul li a {color: #fff; text-decoration: none; }
.sub-social-links ul li i {display: block; height: 30px; line-height: 30px; }
.sub-social-links ul li i:before {font-size: 30px; }
.sub-social-links ul li a:hover {color: #f5c959;}

.detail-sub-title {}
.detail-sub-title h3 {font-size: 28px; color: #313c4c; margin-bottom: 30px; }

.detail-buttons {width: 100%;  margin-bottom: 30px;}
.detail-buttons ul {display: inline-block; }
.detail-buttons ul li {float: left;  border-radius: 50px;  height: 52px; line-height: 50px; font-size: 16px; border: 1px solid #dfdfdf;
	transition: all 200ms ease-in;}
.detail-buttons ul li:hover {background: #485155; border: 1px solid #485155 !important}
.detail-buttons ul li:hover a {color: #fff;}
.detail-buttons ul li:hover i {color: #fff;}
.detail-buttons ul li + li {margin-left: 20px; }
.detail-buttons ul li a {display: block; text-decoration: none;  padding: 0 20px; height: 100%; color: #000;
	transition: all 200ms ease-in;}
.detail-buttons ul li span {display: block; float: left; margin-right: 10px; width: 25px; height: 50px;  position: relative; overflow: hidden;
	border-radius: 50%; }
.detail-buttons ul li span i {display: block; width: 25px; height: 50px; line-height: 50px; position: absolute;  top: 0;
	transition: all 300ms ease-in; color: #000; }
.detail-buttons ul li span i:before {font-size: 25px; }
.detail-buttons ul li span i:first-child {right: 130%; }
.detail-buttons ul li span i:last-child {right: 0; }
.detail-buttons ul li:hover span i:first-child {right: 0;}
.detail-buttons ul li:hover span i:last-child {right: -130%;}
.detail-buttons ul li:first-child span {float: right; margin: 0 0 0 10px}

.detail-faq-area {padding: 80px 0 80px 0;margin-top: 50px;border-top: 1px solid #dbdbdb;}
.detail-faq-desc {padding-right: 50px; margin-bottom: 10px; }
.detail-faq-desc h3 {font-size: 16px; font-weight: 400; margin-bottom: 20px;}
.detail-faq-desc p {font-size: 28px; font-weight: 600; padding-right: 50px; line-height: 32px;  margin-bottom: 20px;}


.detail-faq-button {float: left;  border-radius: 50px;  height: 52px; line-height: 50px; font-size: 16px; border: 1px solid #000;
	transition: all 200ms ease-in; }
.detail-faq-button:hover {background: #485155; border: 1px solid #485155 !important}
.detail-faq-button:hover a {color: #fff;}
.detail-faq-button:hover i {color: #fff;}
.detail-faq-button a {display: block; text-decoration: none;  padding: 0 20px; height: 100%; color: #000;
	transition: all 200ms ease-in;}
.detail-faq-button span {display: block; float: right; margin-left: 10px; width: 25px; height: 50px;  position: relative; overflow: hidden;
	border-radius: 50%; }
.detail-faq-button span i {display: block; width: 25px; height: 50px; line-height: 50px; position: absolute;  top: 0;
	transition: all 300ms ease-in; color: #000; }
.detail-faq-button span i:before {font-size: 25px; }
.detail-faq-button span i:first-child {right: 130%; }
.detail-faq-button span i:last-child {right: 0; }
.detail-faq-button:hover span i:first-child {right: 0;}
.detail-faq-button:hover span i:last-child {right: -130%;}
.detail-faq-button:first-child span {float: right; margin: 0 0 0 10px}


.detail-faq {}
.detail-faq ul {}
.detail-faq ul li {border-bottom: 1px solid #dbdbdb; margin: 0 0 30px 0; }
.detail-faq-object {display: block;	width: 100%;}
.detail-faq-object h4 {font-size: 25px;font-weight: 400;padding: 0 0 10px 0;position: relative;line-height: 28px;padding-right: 30px;}
.detail-faq-object h4 i {position: absolute; right: 0; top: 0; height: 21px; width: 21px; }
.detail-faq-object h4 i:before {content:''; position: absolute; right: 10px; top: 0; width: 1px; height: 100%; background: #f5c959;
	transition: all 200ms ease-in;}
.detail-faq-object h4 i:after {content:''; position: absolute; right: 0; top: 10px; height: 1px; width: 100%; background: #f5c959;}
.detail-faq-object .answer-body {padding-bottom: 10px;display: none; font-size: 18px;}
.detail-faq-object .answer-body p {}
.detail-faq ul li.active .detail-faq-object .answer-body {display: block;}
.detail-faq ul li.active .detail-faq-object h4 i:before {height: 0; top: 10px;}

.sub-title-section {height: 230px; background: #e2e5de url('../img/photos/shape-8.png') no-repeat center left 10px; margin-bottom: 50px; overflow: hidden;position: relative; }
.sub-title-area {padding-top: 70px; }
.sub-title-area h1 {font-family: 'Kanit', sans-serif; font-size: 34px;font-weight: 300; color: #313c4c;  }
.sub-title-area h3 {font-family: 'Kanit', sans-serif; font-size: 34px;font-weight: 300; color: #313c4c;  }
.sub-title-area h2 {font-family: 'Kanit', sans-serif;  font-size: 34px;font-weight: 600; color: #313c4c; }
.sub-title-area h4 {font-family: 'Kanit', sans-serif;  font-size: 34px;font-weight: 600; color: #313c4c; }

.content-area .solutions-area {}
.content-area .solution-box {}

.detail-blogs-area {margin-top: 50px; padding-top: 50px; border-top: 1px solid #dbdbdb; }
.detail-blogs-area h3 {font-family: 'Kanit', sans-serif; font-size: 34px;font-weight: 300; color: #313c4c;}
.detail-blogs-area h3 b {display: block; font-weight: 600;}


.detail-library-section {}

.detail-library-title-section {height: 230px; background: #e2e5de url('../img/photos/shape-8.png') no-repeat center left 10px; margin-bottom: 50px; overflow: hidden;position: relative;}
.detail-library-title {height: 230px;position: relative;padding-top: 77px;}
.detail-library-title h3 {font-family: 'Kanit', sans-serif; font-size: 34px;font-weight: 300; color: #313c4c; }
.detail-library-title h4 {font-family: 'Kanit', sans-serif;  font-size: 34px;font-weight: 600; color: #313c4c;}

.sub-title-tab-menu {position: absolute;right: 0;top: 50px;}
.sub-title-tab-menu ul {}
.sub-title-tab-menu ul li {}


.library-contents-menu {height: 140px; }
.sub-title-tab-menu ul {display: inline-block; float: right; }
.sub-title-tab-menu ul li {float: left; height: 140px; font-size: 15px; text-align:center; font-weight: 600; line-height: 20px; opacity: 0.5; position: relative;}
.sub-title-tab-menu ul li a {display: block; height: 100%; padding: 25px 30px; text-decoration: none; color: #313c4c; }
.sub-title-tab-menu ul li.active {opacity: 1; }
.sub-title-tab-menu ul li i {display: block; height: 60px; line-height: 60px; margin-bottom: 10px; }
.sub-title-tab-menu ul li i:before {font-size: 50px; }
.sub-title-tab-menu ul li:before {content: ''; position: absolute; left: 50%; bottom: -40px; margin-left: -30px; display: none;
	border-style: solid; border-width: 0 30px 30px 30px; border-color: transparent transparent #ffffff transparent;}
.sub-title-tab-menu ul li.active:before {display: block; }

.detail-library-area {}

.detail-library-contents {}

.detail-library-list {display: none;}
.detail-library-list.active {display: block;}

.detail-library-box {height: 142px; border: 1px solid #dbdbdb; margin-bottom: 20px;  }
.detail-library-box a {display: block; height: 100%; text-decoration: none; color: #000000; padding: 0 20px; }
.detail-library-box i {display: block; height: 140px; line-height: 140px; float: left; margin-right: 20px; color: #f5c959; }
.detail-library-box i:before {font-size: 50px;}
.detail-library-box h4 {font-weight: 500; height: 140px; padding-top: 43px; font-size: 20px; line-height: 25px;  }

.organization-chart {}
.organization-chart > ul {}
.organization-chart > ul > li {position: relative;}
.organization-chart > ul > li:before {content:''; position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: #dbdbdb;}
.organization-chart > ul > li > ul  {padding-left: 40px;}
.organization-chart > ul > li > ul > li {position: relative;}
.organization-chart > ul > li > ul > li:before {content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 1px; background: #dbdbdb;}
.organization-chart > ul > li > ul > li:after {content: ''; position: absolute; left: -40px; height: 1px; width: 40px; top: 25px; background: #dbdbdb;}
.organization-chart > ul > li > ul > li > ul {padding-left: 40px;}
.organization-chart > ul > li > ul > li > ul > li {position: relative;}
.organization-chart > ul > li > ul > li > ul > li:before {content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 1px; background: #dbdbdb;}
.organization-chart > ul > li > ul > li > ul > li:after {content: ''; position: absolute; left: -40px; height: 1px; width: 40px; top: 25px; background: #dbdbdb;}
.organization-chart > ul > li > ul > li > ul > li > ul {padding-left: 40px;}
.organization-chart > ul > li > ul > li > ul > li > ul > li {position: relative;}
.organization-chart > ul > li > ul > li > ul > li > ul > li:before {content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 1px; background: #dbdbdb; display: no}
.organization-chart > ul > li > ul > li > ul > li > ul > li:after {content: ''; position: absolute; left: -40px; height: 1px; width: 40px; top: 25px; background: #dbdbdb;}
.organization-chart > ul > li > ul > li > ul > li > ul > li > ul {padding-left: 40px;}
.organization-chart > ul > li > ul > li > ul > li > ul > li > ul > li {position: relative;}
.organization-chart > ul > li > ul > li > ul > li > ul > li > ul > li:before {content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 1px; background: #dbdbdb;}
.organization-chart > ul > li > ul > li > ul > li > ul > li > ul > li:after {content: ''; position: absolute; left: -40px; height: 1px; width: 40px; top: 25px; background: #dbdbdb;}

.chart-box {display: inline-block;width: 250px;height: 50px;background: #B8BAC0;/* text-align: center; */margin-bottom: 10px;position: relative;}
.chart-box:hover {background: #6d6d6d;}
.chart-box a {display: block;color: #fff;text-decoration: none;height: 100%;}
.chart-box b {display: block;font-weight: 400;font-size: 13px;padding: 20px 30px 0 30px;line-height: 14px;margin-bottom: 10px;display: none;}
.chart-box h4 {font-size: 15px;padding: 16px 10px;}
.chart-box h5 {font-weight: 400; font-size: 13px; padding: 35px 20px 0 20px; line-height: 14px; }

.organization-chart > ul > li > .chart-box {background: #E51A2F;}
.organization-chart > ul > li > ul > li > .chart-box {background: #00B5DB;}
.organization-chart > ul > li > ul > li > ul > li > .chart-box {background: #007BC4;}
.organization-chart > ul > li > ul > li > ul > li > ul > li > .chart-box {background: #F08300;}
.organization-chart > ul > li > ul > li > ul > li > ul > li > ul > li > .chart-box {background: #98989A;}
.organization-chart > ul > li > ul > li > ul > li > ul > li > ul > li > ul > li > .chart-box {background: #B8BAC0;}


.bg-red {background: #e70606;}
.bg-green {background: #15a143;}
.bg-blue {background: #2b4b9b;}
.bg-red:hover {background: #a00000;}
.bg-green:hover {background: #006722;}
.bg-blue:hover {background: #0b2054;}

.bg-none {background: none;}
.bg-none:before {display: none;}
.bg-none:hover {background: none;}

.bg-plus {background: none;}
.bg-plus:hover {background: none;}
.bg-plus:before {content: ''; position: absolute; width: 100%; height: 1px; background: #d3d3d3; left: 0; top: 50%; }
.bg-plus:after {content: ''; position: absolute; height: 100%; width: 1px; background: #d3d3d3; top: 0; left: 50%; }

.bg-line {background: none;}
.bg-line:hover {background: none;}
.bg-line:after {content: ''; position: absolute; height: 120px; width: 1px; background: #d3d3d3; top: -20px; left: 50%;}

.pagination { }
.pagination ul {overflow: hidden; width: 100%; }
.pagination ul li {width: 50px; height: 50px; margin: 0 5px; float: left; border: 1px solid #c3c3c3; text-align: center; line-height: 48px;
	transition: all 100ms ease-in; }
.pagination ul li a {display: block; height: 100%; text-decoration: none; color: #000; }
.pagination ul li.active, .pagination ul li.active:hover {border-color: #7d7d7d; background: #f1f1f1;}
.pagination ul li.active a {}
.pagination ul li:hover {background: #f2f2f2;}
.pagination ul li i {display: block; height: 48px; line-height: 48px; }
.pagination ul li i:before {font-size: 14px;}

.form-area {}
.form-photo {background: #f0f0f0; height: 450px; margin-bottom: 3px;}
.form-photo a {display: block; height: 100%;}
.form-photo img {width: 100%; height: 100%; object-fit: cover;}

.form-video {background: #f0f0f0; height: 450px; margin-bottom: 3px;}
.form-video iframe {width: 100% !Important; height: 100% !Important;}

.description-box {overflow: hidden; background: #f0f0f0; padding: 20px; margin-bottom: 3px;}
.description-box i {display: block; width: 5%; float: left; height: 50px; color: #bebebe; }
.description-box i:before {font-size: 35px;}
.description-box p {width:95%; float: left; min-height: 50px; height: auto; overflow: hidden; padding-left: 15px; font-size}
.description-box p b {}

.form {margin-bottom: 20px;}
.form ul {}
.form ul li {/* background: #f5f5f5; *//* margin-bottom: 1px; */height: auto;display: block;border: 1px solid #f1f1f1;overflow: hidden; position: relative; }
.form ul li:last-child {background: none;padding-top: 15px;border: none;}
.form ul li > b {display: block; width: 30%; float: left; padding: 20px; height: auto; font-weight: 500; font-size: 13px;}
.form ul li > b + b {position: absolute; right: 0; width: 30%; top: 0; padding: 10px;}
.form ul li > span {display: block;width: 70%;float: left;border-left: 1px solid #f1f1f1;padding: 10px 20px; }
.form ul li > button, .form ul li > input {
	float: right;
	height: 50px;
	padding: 0 50px;
	background: #313c4c;
	color: #ffff;
	font-size: 15px;
	font-weight: 600;
	border: none;
	box-shadow: none;
	border-radius: 0;
}
.form ul li > button:hover, .form ul li > input:hover {background: #f4d294; color: #fff;}
.form ul li > span > input {width: 100%; height: 45px; border: none; padding: 0 20px; border: 1px solid #bfbfbf; border-radius: 0;}
.form ul li > span > input:focus, .form ul li > span > input:hover {border-color: #bfbfbf;}
.form ul li > span > select {width: 100%; height: 45px; border: none; padding-left: 20px; border-radius: 0; border: 1px solid #bfbfbf; border-radius: 0;
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
	background: #fff url('../img/icons/down-arrow.png') no-repeat right 15px center;			 }
.form ul li > span > select:focus {border: 1px solid #dbdbdb;}
.form ul li > span > select.birthdate-month {width: 20%; float: left;  }
.form ul li > span > select.birthdate-date  {width: 20%; float: left; margin-left: 10px; }
.form ul li > span > textarea {width: 100%; max-width: 100%; min-width: 100%; height: 150px; min-height: 150px; max-height: 150px; border: 1px solid #bfbfbf; padding: 20px; border-radius: 0;}
.form ul li > span > textarea:focus, .form ul li > span > textarea:hover {border: 1px solid #bfbfbf;}

.form ul li > span > label {display: block; width: 33%; float: left; padding: 10px 10px 10px 50px; height: 50px; position: relative;
	font-weight: 400;  border: 1px solid #fff; border-top: none; border-left: none; line-height: 18px; overflow: hidden;}
.form ul li > span > label:nth-child(3n+1) {border-left: 1px solid #fff;}
.form ul li > span > label:nth-child(1), .form ul li > span > label:nth-child(2), .form ul li > span > label:nth-child(3) {border-top: 1px solid #fff;}
.form ul li > span > label > input {position: absolute;left: 0;top: 0;width: 100%;height: 100%;z-index: 3;opacity: 1;margin: 0;}
.form ul li > span > label:before {content: ''; position: absolute; left: 10px; top: 10px; width: 30px; height: 30px; background: #fff; z-index: 1; border: 1px solid #dbdbdb;}
.form ul li > span > label:after {content: ''; position: absolute; left: 17px; top: 17px; width: 16px; height: 16px; background: #6b6b6b; z-index: 2; display: none;}
.form ul li > span > label.active:after {/* display: block; */background: #1e7d06;}
.form ul li > span > label:hover:after {display: block; }

.form ul li > span > label.form-radio:before {border-radius: 50%;display: none;}
.form ul li > span > label.form-radio:after {border-radius: 50%;display: none;}
.form ul li > span > label.form-radio input {opacity: 1;left: 11px;width: 30px;top: 6px;height: 30px;}

.form ul li > span > label.form-checkbox:before {border-radius: 0;display: none;}
.form ul li > span > label.form-checkbox:after {border-radius: 0;}
.form ul li > span > label.form-checkbox input {opacity: 1;left: 11px;width: 25px;top: 10px;height: 25px;}

.form ul li > span > input[type=file] {padding: 0;border: none;height: 45px;}
.form ul li > span > input[type=file]:hover, .form ul li > span > input[type=file]:focus {border: none; }
.form ul li > span > input[type=file]::-webkit-file-upload-button { background: #ffffff; border: 1px solid #dbdbdb;; color: #000; padding: 12px;}

.form ul h3 {margin: 20px 0; }


.form-full-style {margin-bottom: 20px;}
.form-full-style ul {}
.form-full-style ul li {margin-bottom: 15px;height: auto;display: block; overflow: hidden;}
.form-full-style ul li:last-child {background: none; padding-top: 15px;}
.form-full-style ul li > b {background: #f0f0f0; display: block; padding: 20px 20px 20px 9%; height: auto; font-weight: 500; font-size: 13px; position: relative;
	border-bottom: 1px solid #fff;}
.form-full-style ul li > b > i {position: absolute; width: 7%; left: 0; top: 0; height: 100%; border-right: 1px solid #fff;
	text-align: center; line-height: 58px; font-style: normal; font-weight: 800; font-size: 18px;}
.form-full-style ul li > span {display: block; background: #f0f0f0;  width: 93%; float: right;  border-left: 1px solid #fff; padding: 10px 20px; }
.form-full-style ul li > button, .form-full-style ul li > input {float: right; height: 50px; padding: 0 50px;background: #c3c3c3; color: #000; font-size: 15px; font-weight: 600;
	border: none; box-shadow: none; border-radius: 0;}
.form-full-style ul li > button:hover, .form-full-style ul li > input:hover {background: #e70606; color: #fff;}
.form-full-style ul li > span > input {width: 100%; height: 35px; border: none; padding: 0 20px; border: 1px solid #fff;}
.form-full-style ul li > span > input:focus, .form-full-style ul li > span > input:hover {border-color: #bfbfbf;}
.form-full-style ul li > span > select {width: 100%; height: 35px; border: none; padding-left: 20px; border-radius: 0; border: 1px solid #fff;
	appearance:none;
	-moz-appearance:none;
	-webkit-appearance:none;
	background: #fff url('../img/icons/down-arrow.png') no-repeat right 15px center;			 }
.form-full-style ul li > span > select:focus {border: 1px solid #dbdbdb;}
.form-full-style ul li > span > textarea {width: 100%; max-width: 100%; min-width: 100%; height: 150px; min-height: 150px; max-height: 150px; border: none; padding: 20px; }
.form-full-style ul li > span > textarea:focus, .form-full-style ul li > span > textarea:hover {border: 1px solid #bfbfbf;}

.form-full-style ul li > span > label {display: block; width: 33%; float: left; padding: 10px 10px 10px 50px; height: 50px; position: relative;
	font-weight: 400;  border: 1px solid #fff; border-top: none; border-left: none; line-height: 18px; overflow: hidden;}
.form-full-style ul li > span > label:nth-child(3n+1) {border-left: 1px solid #fff;}
.form-full-style ul li > span > label:nth-child(1), .form-full-style ul li > span > label:nth-child(2), .form-full-style ul li > span > label:nth-child(3) {border-top: 1px solid #fff;}
.form-full-style ul li > span > label > input {position: absolute; left: 0; top: 0; width: 100%; height: 100%; z-index: 3; opacity: 0; margin: 0;}
.form-full-style ul li > span > label:before {content: ''; position: absolute; left: 10px; top: 10px; width: 30px; height: 30px; background: #fff; z-index: 1; border: 1px solid #dbdbdb;}
.form-full-style ul li > span > label:after {content: ''; position: absolute; left: 17px; top: 17px; width: 16px; height: 16px; background: #6b6b6b; z-index: 2; display: none;}
.form-full-style ul li > span > label.active:after {display: block; background: #e83731;}
.form-full-style ul li > span > label:hover:after {display: block; }

.form-full-style ul li > span > label.form-radio:before {border-radius: 50%;}
.form-full-style ul li > span > label.form-radio:after {border-radius: 50%;}

.form-full-style ul li > span > label.form-checkbox:before {border-radius: 0;}
.form-full-style ul li > span > label.form-checkbox:after {border-radius: 0;}

.form-full-style ul li > span > input[type=file] {padding: 0; border: none;height: 40px;}
.form-full-style ul li > span > input[type=file]:hover, .form-full-style ul li > span > input[type=file]:focus {border: none; }
.form-full-style ul li > span > input[type=file]::-webkit-file-upload-button { background: #ffffff; border: 1px solid #dbdbdb;; color: #000; padding: 12px;}

/* -------------------------------------------------------------------------------------*/
/*      POPUP AREA                                                                      */
/* -------------------------------------------------------------------------------------*/
.popup-area {position: fixed;left: 0;top: 0;width: 100%;height: 100%;z-index: 9999999;background: rgba(0,0,0,0.8);display:none;text-align: center;}
.popup-area.active {display: block;}
.popup {width: auto;margin: 100px auto 0 auto;display: inline-block; max-width: 80%;}
.popup.video-popup {width: 800px;}
.popup.video-popup .popup-head {height: 450px}
.popup-head {background: #fff;text-align: center;/* border-bottom: 1px solid #dbdbdb; */height: 500px;position: relative;}
.popup-head img {width: auto;height: 100%;object-fit: cover;max-width: 100%;}
.popup-head iframe {width: 100% !Important; }
.popup-bottom {height: auto;/* background: #fff; */position: relative;padding-right: 0;}
.popup-bottom h5 {padding: 10px 0;font-size: 20px;font-family: 'Rajdhani', sans-serif;font-weight: 400;color: #fff;}
.close-popup {position: absolute; right: 0; top: -40px; width: 40px; height: 40px;  background: #fff;}
.close-popup i {display: block; height: 40px; line-height: 40px; text-align: center;}
.close-popup i:before {font-size: 20px;}
.close-popup:hover {background: #dbdbdb; color: #444444; cursor: pointer;}



/* -------------------------------------------------------------------------------------*/
/* 		FOOTER																			                */
/* -------------------------------------------------------------------------------------*/
footer {}

.subscription-section {background: #f4d294; }
.subscription-area {padding: 50px 0;}
.subscription-area-title {padding-right: 100px; }
.subscription-area-title h5 {font-size: 13px; font-weight: 400; margin-bottom: 10px; color: #313c4c;}
.subscription-area-title p {font-size: 34px; font-weight: 600; color: #313c4c; line-height: 34px}

.subscription-form {padding-top: 30px; border-bottom: 1px solid #313c4c; position: relative; }
.subscription-form input {height: 53px;width: 70%;border: none;background: none;box-shadow: none;color: #000;position: relative; margin-bottom: -3px;
	border-bottom: 1px solid transparent;
	transition: all 200ms ease-in;}
.subscription-form input:focus {border-bottom: 5px solid #313c4c; margin-bottom: -3px;}
.subscription-form button {position: absolute; right: 0; bottom: -3px; height: 55px; padding: 0 30px; border: none;
	background: none; box-shadow: none; border-radius: 0;}
.subscription-form button:before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background: #313c4c;
	transition: all 200ms ease-in;}
.subscription-form button:after {content: ''; position: absolute; top: 0; right: 0; width: 0; height: 5px; background: #313c4c;
	transition: all 200ms ease-in;}
.subscription-form button b {color: #000; font-weight: 600;}
.subscription-form button b:before {content: ''; position: absolute; bottom: 0; left: 0; width: 5px; height: 0; background: #313c4c;
	transition: all 200ms ease-in;}
.subscription-form button b:after {content: ''; position: absolute; top: 0; right: 0; width: 5px; height: 0; background: #313c4c;
	transition: all 200ms ease-in;}

.subscription-form button:hover:before {}
.subscription-form button:hover:after {width: 100%;}
.subscription-form button:hover b:before {height: 100%;}
.subscription-form button:hover b:after {height: 100%; }

.footer {background: #485155; }
.footer-menu-area {padding: 60px 0; }
.footer-menu {}
.footer-menu > ul {}
.footer-menu > ul > li {float: left; height: 50px; line-height: 50px; font-size: 16px; font-weight: 600; position: relative;
	border-bottom: 5px solid transparent; transition: all 100ms ease-in;}
.footer-menu > ul > li > a {display: block; height: 100%; text-decoration: none; color: #fff;}
.footer-menu > ul > li:hover {border-color: #fff;}
.footer-menu > ul > li + li {margin-left: 40px; }
.footer-menu > ul > li > a:hover {}
.footer-menu > ul ul {display: none;}

.footer-social-area {border-top: 1px solid rgba(255,255,255,0.4); padding: 40px 0; }
.footer-social {text-align: center; }
.footer-social ul {display: inline-block;}
.footer-social ul li {float: left; height: 32px; line-height: 32px; }
.footer-social ul li a {display: block; height: 100%; text-decoration: none; color: #fff; }
.footer-social ul li i {display: block; float: left;  height: 32px; line-height: 32px;  margin-right: 5px; color: #f4d294;}
.footer-social ul li i:before {font-size: 32px; }
.footer-social ul li + li {margin-left: 25px; }
.footer-social ul li:hover a {color: #f4d294;}
.footer-social ul li:hover i{}

.copyright-section {padding: 30px 0;}
.copyright-area {text-align: center; }
.copyright-area ul {display: inline-block;}
.copyright-area ul li {height: 18px; float: left; line-height: 18px; font-size: 12px; padding: 0 10px; }
.copyright-area ul li + li {border-left: 1px solid #dbdbdb; }
.copyright-area ul li a {color: #000; display: block; }
.copyright-area ul li a:hover {}