@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,600,700');
@import url('https://fonts.googleapis.com/css?family=Roboto:400,600,700');
body {font-family: 'Open Sans', sans-serif;letter-spacing: .07px;background-color: #f7f7f7;}
.Main {opacity: 0;visibility: hidden;width: 100%;height: 100vh;}
.Main.visible {opacity: 1;visibility: visible;-webkit-transition: opacity 0.1s ease;-moz-transition: opacity 0.1s ease;-o-transition: opacity 0.1s ease;transition: opacity 0.1s ease;-webkit-transition-delay: 1.1s;-moz-transition-delay: 1.1s;-o-transition-delay: 1.1s;transition-delay: 1.1s;}

.detail-award-mobile{display: none;}
.detail-award-mobile img{width: 40px;margin-top: 0 !important;}
.detail-title-box{display: flex;vertical-align: middle;align-items: center;}
.detail-title-box .detail-left{width: 100%;text-align:left;}
.detail-title-box .detail-right{width: 100%;display: flex;vertical-align: middle;align-items: center;justify-content: flex-end;}
.detail-title-box .detail-right h2{
	font-size: 14px;
	color: #b3b0aa;
	font-weight: bold !important;
	margin-bottom: 5px;
	text-align: right;
	margin-right: 10px;
}
.detail-title-box h2{color: #b3b0aa !important;font-size: 14px !important;font-weight: 600 !important;margin-top: unset !important;margin-bottom: 5px !important;}
.detail-title-box .detail-right img{width: 40px;margin-top: 0 !important;}
.detail-title-box .detail-right h3{
	font-size: 14px;
	color: #b3b0aa;
	margin-bottom: 5px;
	margin-right: 10px;
}
.detail-item {
	position: relative;
}
/* Loading */
@-webkit-keyframes pulse {
	0% {-webkit-transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
	100% {-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);opacity: 0;}
}
@-moz-keyframes pulse {
	0% {-webkit-transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
	100% {-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);opacity: 0;}
}
@-o-keyframes pulse {
	0% {-webkit-transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
	100% {-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);opacity: 0;}
}
@keyframes pulse {
	0% {-webkit-transform: scale(0);-moz-transform: scale(0);-ms-transform: scale(0);-o-transform: scale(0);transform: scale(0);}
	100% {-webkit-transform: scale(1);-moz-transform: scale(1);-ms-transform: scale(1);-o-transform: scale(1);transform: scale(1);opacity: 0;}
}
@-webkit-keyframes background {
	0% {top: 100%;}
	70% {top: 0;}
	100% {top: -100%;}
}
@-moz-keyframes background {
	0% {top: 100%;}
	70% {top: 0;}
	100% {top: -100%;}
}
@-o-keyframes background {
	0% {top: 100%;}
	70% {top: 0;}
	100% {top: -100%;}
}
@keyframes background {
	0% {top: 100%;}
	70% {top: 0;}
	100% {top: -100%;}
}

/*.loader {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: #ffffff;display: flex;justify-content: center;align-items: center;z-index: 8888;}
.loader .pulse {width: 50px;height: 50px;background-color: #E63523;border-radius: 100%;-webkit-animation: pulse 1.2s infinite ease-in-out;-moz-animation: pulse 1.2s infinite ease-in-out;-o-animation: pulse 1.2s infinite ease-in-out;animation: pulse 1.2s infinite ease-in-out;}
.loader .background {position: fixed;top: 100%;width: 100%;height: 100%;background-color: #E63523;}
.loader.loaded {visibility: hidden;}
.loader.loaded .pulse {opacity: 0 !important;-webkit-transition: all 0.4s;-moz-transition: all 0.4s;-o-transition: all 0.4s;transition: all 0.4s;visibility: hidden;}
.loader.loaded .background {-webkit-animation: background 1.65s normal forwards cubic-bezier(0.785, 0.135, 0.15, 0.86);-moz-animation: background 1.65s normal forwards cubic-bezier(0.785, 0.135, 0.15, 0.86);-o-animation: background 1.65s normal forwards cubic-bezier(0.785, 0.135, 0.15, 0.86);animation: background 1.65s normal forwards cubic-bezier(0.785, 0.135, 0.15, 0.86);-webkit-transition-delay: 2.5s;-moz-transition-delay: 2.5s;-o-transition-delay: 2.5s;transition-delay: 2.5s;}
*/

/* Header */
header {display: flex;align-items: center;padding: 30px 0;position: relative;}
header .Logo {max-width: 65px;margin-right: 40px;}
header p {font-size: 18px;font-family: 'Roboto', sans-serif;color: #4f4d4f;transition: .3s;line-height: .7;font-weight: bold}
header .Logo > img {-webkit-transition: -webkit-transform .8s ease-in-out;
	-ms-transition: -ms-transform .8s ease-in-out;
	transition: transform .8s ease-in-out;}
	header .Logo > img:hover {    transform: rotateY(180deg);
		-ms-transform: rotateY(180deg);
		-webkit-transform: rotateY(180deg);}
		header .Logo-text {max-width: 100px;}
		header nav {margin-left: 12px;}
		header nav > ul {}
		header nav > ul > li {display: inline-block;position: relative;padding: 0px 10px;border-left: solid 1px #808080;height: 21px;}
		header nav > ul > li > .Link {font-size: 18px;font-family: 'Roboto', sans-serif;color: gray;transition: .3s;line-height: .7;}
		header nav > ul > li > .Link:hover {color: #ED342E;}
		header nav > ul > li > .Link.Active {color: #ED342E;}



		/* Slider */
		.cb-slideshow,
		.cb-slideshow:after { position: fixed;width: 100%;height: 100%;top: 0px;left: 0px;z-index: 0; }
		.cb-slideshow li div {width: 100%;height:100%;top: 0;bottom: 0;right: 0;left: 0;background-size: cover;background-repeat: no-repeat;z-index: 0;background-position: center;}
		.cb-slideshow h3 { font-size: 240px;padding: 0;line-height: 200px; z-index: 1000;position: absolute;bottom: 30px;left: 0px;width: 100%;text-align: center;color: #fff;}
		@media screen and (max-width: 1140px) { 
			.cb-slideshow li h3 { font-size: 140px }
		}
		@media screen and (max-width: 600px) { 
			.cb-slideshow li h3 { font-size: 80px }
		}



		section.pageContent {padding-left: 95px;padding-right: 10px;padding-bottom: 20px;}



		/* About */
		.accordion-container{position: relative;max-width: 640px;padding-left: -12px;}
		.accordion-container .set{position: relative;width: 100%;height: auto;margin-bottom: 10px;}
		.accordion-container .set > a{display: block;padding:11px 70px 7px 10px;text-decoration: none;color: #818181;font-weight: 600;font-family: 'Roboto', sans-serif;-webkit-transition:all 0.2s linear;-moz-transition:all 0.2s linear;transition:all 0.2s linear;position: relative;text-transform: uppercase;font-weight: 600;}
		.accordion-container .set > a i{font-size: 20px;position: relative;top: 1px;margin-left: 5px;}
		.accordion-container .content{display:none;font-weight: normal;font-size: 13px;margin-left:10px;}
		.accordion-container .content p{padding: 0 0;margin: 0;color: #292929;line-height: 25.2px;letter-spacing: .07px;margin-bottom:10px;}






		/* ContactForm */
		.ContactForm {max-width: 626px;padding-left: 10px;}
		.ContactForm .login__group {position: relative}
		.ContactForm .login__group .login__input {margin-top: 15px;padding: 15px;color: #333;font-family: "Open Sans", sans-serif;width: 100%;font-size: 14px;display: block;border: none;-webkit-box-sizing: border-box;box-sizing: border-box;font-weight: 700;}
		.ContactForm .login__group .login__label {color: gray;font-family: "Open Sans", sans-serif;font-size: 16px;font-weight: 400;position: absolute;pointer-events: none;left: 5px;top: 10px;-webkit-transition: .2s ease all;transition: .2s ease all}
		.ContactForm .login__group textarea {height: 100px;resize: none;margin-top: 15px;padding: 15px;font-size: 15px;border: none;width: 100%;outline: none;position: relative;margin-bottom: -5px;}
		.ContactForm .login__group textarea{color: gray;font-family: "Open Sans", sans-serif;font-size: 14px;font-weight: 700;}
		.ContactForm .login__terms {font-size: 13px;color: #f9f9f9;margin-left: 15px;}
		.ContactForm .login__terms  span {}
		.ContactForm .login__button {font-family: "Open Sans", sans-serif;font-weight: 700;background: #f54635;border: none;color: #fff;height: 50px;font-size: 14px;cursor: pointer;padding: 0 30px;}
		.ContactForm .login__button:hover {filter: brightness(1.3);}
		.ContactForm .send-area {background-color: #7C7C7C;display: flex;align-items: center;margin-top: 15px;}
		.ContactForm .send-area.SendOK {background-color: #77DD77;}
		.ContactForm .send-area.SendOK .login__terms {color: white;font-weight: bold;font-size: 14px;width: 100%;margin: 0;margin-left: 15px;}





		/* Masonry */
		.masonry-wrapper {padding: 0;}
		.masonry-wrapper .grid-item img {width: 100%;}
		.masonry-wrapper .filter-button-group {margin-bottom: 25px;}
		.masonry-wrapper .filter-button-group > button {font-family: 'Roboto', sans-serif;color: #aaa;display: inline-block;padding: 0px 10px;border: none;border-left: solid 1px #808080;background-color: transparent;}
		.masonry-wrapper .filter-button-group > button:first-child {border-left:0;}
		.masonry-wrapper .filter-button-group > button:focus {outline:none;}
		.masonry-wrapper .filter-button-group > button.is-checked {color:#000;font-weight:bold}
		.masonry-wrapper .grid-item {width: 375px;margin: 10px !important;overflow: hidden;}
		.masonry-wrapper .grid-item::before {opacity: 0;visibility: hidden;transition: .3s; content: "";position: absolute;left: 0;top: 0;bottom: 0;right: 0;background-color: rgba(0, 0, 0, 0.52);}
		.masonry-wrapper .grid-item::after {opacity: 0;visibility: hidden;transition: .9s; content: "\f067";font-family: FontAwesome;position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);font-size: 40px;color: #fff;}
		.masonry-wrapper .grid-sizer {width: 375px;}
		.masonry-wrapper .grid-item .grid-item-card {position: absolute;left: 15px;bottom: -100%;color: #fff;line-height: 18px;transition: .3s;}
		.masonry-wrapper .grid-item .grid-item-card > .projectName {font-weight: 600;}
		.masonry-wrapper .grid-item .grid-item-card > .projectCategory {font-size: 12px;color: #fffc;}
		.masonry-wrapper .grid-item .grid-item-card > .projectDate {font-size: 12px;color: #fffc;}
		.masonry-wrapper .awards{position: absolute;opacity: 0;visibility: hidden;top: 0;left: 15px;transition: all .3s;}
		.masonry-wrapper .awards img{width: 40px;margin: 0 auto;}
		.masonry-wrapper .awards p{font-size: 12px;color: #fff;font-family: 'Roboto', sans-serif;margin-top: 5px;}
		.masonry-wrapper .grid-item:hover .awards{opacity: 1;visibility: visible;top: 15px;left: 15px;}


		@media only screen and (min-width: 575px) {
			.masonry-wrapper .grid-item:hover::before {opacity: 1;visibility: visible;}
			.masonry-wrapper .grid-item:hover::after {opacity: 1;visibility: visible;}
			.masonry-wrapper .grid-item:hover .grid-item-card {bottom: 10px;}
		}



		/* Detail */
		.Detail {padding-left: 10px;}
		.Detail  h1 {color: #333330;font-weight: bold;font-size: 16px;margin-bottom: 10px;transition: .9s;opacity: 0;visibility: visible;}
		.Detail  h2 {font-size: 14px;color: #b3b0aa;margin-bottom: 5px;}
		.Detail  .Date {display: block;color: #b3b0aa;font-size: 14px;}
		.Detail  .detailContent {margin-top: 0;position: relative;display:inline-block;}
		.Detail  .detailContent h1{position: absolute;top: 0;text-align: center;color: #fff;font-size: 26px;width: 100%;}
		.Detail  .detailContent img {margin-top: 30px;}
		.Detail  .detailContent h2 {margin-top: 12px;color:#333330;font-size: 13px;font-weight: bold;}
		.detail-pagination {display: inline-block;}
		.Detail .detailContent::before {opacity: 0;visibility: hidden;transition: .3s;content: "";position: absolute;left: 0;top: 30px;bottom: 12px;right: 0;background-color: rgba(0, 0, 0, 0.77);}
		.Detail .detailContent:hover::before {opacity: 0;visibility: visible;}
		.Detail .detailContent:hover h1{opacity: 1;visibility: visible;top: 45%;display: none;}
		.Detail .detailContent:hover .share-icons{}
		.Detail .share-icons{width: 100%;position: absolute;left: -36px;bottom: 0;}
		.Detail .share-icons .share-icon-box{}
		.Detail .share-icons .share-icon-box i{color: #959595;font-size: 30px;}
		.Detail .share-icons h1{width: 100%color#fff;}


		@media only screen and (min-width: 768px) {
			.detail-pagination {position: absolute;top: 10px;left: -80px;}
		}
		.detail-pagination .pagi-btn {display: inline-block;font-size: 40px;color: #959595;width: 30px;text-align: center;cursor: pointer;transition:.3s;}
		.detail-pagination .pagi-btn:hover {color:#000}
		.detail-pagination .pagi-btn.disable {color: #c7c7c7;pointer-events: none;}


		/* Hamburger */
		#menu-toggle {display: none;width: 50px;height: 50px;cursor: pointer;background: rgb(255, 255, 255);position: absolute;right: 20px;border: 1px solid #eee;top: 50%;transform: translateY(-50%);}
		#menu-toggle.open {border-color: #e63523;}
		#menu-toggle.open span {background: #e63523;}
		#menu-toggle span {display: block;background: #000000;border-radius: 2px;}
		#menu-toggle #hamburger {position: absolute;left: 0;right: 0;top: 0;bottom: 0;}
		#menu-toggle #hamburger span {width: 25px;height: 2px;position: relative;top: 10px;left: 11px;margin: 6px 0;}


		@media only screen and (max-width: 768px) {
			.masonry-wrapper .awards img {
				width: 30px;
				margin: 0 auto;
			}
			.masonry-wrapper .awards {
				padding: 10px;
				position: absolute;
				opacity: 1;
				visibility: visible;
				top: 15px;
				left: 15px;
				transition: all .3s;
				background: #3C3C3C;
			}
			.masonry-wrapper .awards p {
				font-size: 11px;
				color: #fff;
				font-family: 'Roboto', sans-serif;
				position: relative;
				margin-top: 0;
				top: 5px;
			}
			.Detail .share-icons .share-icon-box i {
				color: #fff;
				font-size: 20px;
			}
			.Detail .detailContent h1 {
				position: absolute;
				top: 0;
				text-align: center;
				color: #fff;
				font-size: 22px;
				width: 100%;
			}
			.Detail .detailContent::before {
				opacity: 0;
				visibility: hidden;
				transition: .3s;
				content: "";
				position: absolute;
				left: 0;
				top: 90px;
				bottom: 12px;
				right: 0;
				background-color: rgba(0, 0, 0, 0.77);
			}
			.Detail .detailContent {margin-top: 0;}

			/* Setting */
			section.pageContent {padding: 15px;}

			.accordion-container {width: 100%;max-width: 100%;}

			/* Header */
			header {padding:0;}
			header nav {opacity: 0;visibility: hidden;position: absolute;right: 25px;top: 88px;background-color: rgb(255, 255, 255);width: 240px;padding: 22px 15px;text-align: center;margin: 0;border: 1px solid #eee;border-radius: 80px 20px 50px 60px;}
			header nav.Show {opacity: 1;visibility: visible;}
			header nav::before {content:"";position: absolute;right: 0;top: -17px;bottom: 100%;right: 18px;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;border-color: rgba(136, 183, 213, 0);border-bottom-color: #e63523;border-width: 8px;}  
			header .Logo-text {max-width: 130px;}
			#menu-toggle {display: block;}

			header nav > ul > li {border:0;width:100%;padding: 0;height: inherit;}
			header nav > ul > li > .Link {display: block;width: 100%;padding: 6px;}


			/* Slider */
			.cb-slideshow {width: calc(100% - 45px) !important;height: calc(100% - 190px)!important;margin-left: 20px!important;}



			/* .masonry */
			.masonry-wrapper .filter-button-group {white-space: nowrap;overflow-y: hidden;overflow-x: scroll;-webkit-overflow-scrolling: touch;}
			.masonry-wrapper .grid-item {width: 225px;}
		}



		@media only screen and (max-width: 575px) {
			.detail-title-box .detail-right img{display: none;}
			.detail-award-mobile img{margin: 0 auto;}
			.detail-title-box{display: block;}
			.detail-title-box .detail-right h2{text-align: center;}
			.detail-title-box .detail-right{justify-content: center;}
			.detail-title-box .detail-left{text-align: center;}
			.detail-award-mobile {
				display: block;
				text-align: center;
				width: 100%;
				margin: 20px 0px;
			}
			.Detail .detailContent:hover h1 {
				opacity: 1;
				visibility: visible;
				top: 40%;
			}
			.Detail .detailContent:hover .share-icons {
				opacity: 1;
				visibility: visible;
				bottom: 40%;
			}
			/* Header */
			header .Logo {margin-right: 15px;}

			/* .masonry */
			.masonry-wrapper .grid-item {width: calc(100% - 20px);}

			.masonry-wrapper .grid-item .grid-item-card {position: initial;background-color: #3c3c3c;padding: 13px;position: relative;left: 0;bottom: 0;}
			.masonry-wrapper .grid-item .grid-item-card::before {content: "\f178";font-family: FontAwesome;position: absolute;right: 20px;top: 50%;transform: translateY(-50%);font-size: