@charset "UTF-8";

html, body {
	font-size: 1rem;
	font-family: 'Work Sans','黑體-繁','Heiti TC','微軟正黑體','Microsoft JhengHei',sans-serif;
	line-height: 1.2rem;
	background-color: #eaeef2;
}


.bg-01 {background-color: #eaeef2;}
.color-01 {color: #527a99;}
a.btn-pro {font-size: 15px;line-height: 15px;color: #000;font-weight: 400;text-decoration: none;position: relative;text-transform: capitalize;}
a.btn-alt {font-size: 15px;text-transform: capitalize;}
a.btn-alt.small {font-size: 15px;}
.btn-alt2 { background-color: #84a0b6 !important;border: 1px solid #84a0b6 !important;color: #FFFFFF !important;font-size: 15px !important;}
.btn-alt2:hover { background-color: #FFFFFF !important;border: 1px solid #FFFFFF !important;color: #84a0b6 !important;font-size: 15px !important;}
.btn-alt.btn-alt2.active {background-color: #84a0b6 !important;}
.single-news-more {text-align: right;padding-right: 10px;}
.single-news-more2 {text-align: right;padding-right: 25px;}
#main-wrap {background: #eaeef2;}
#main-wrap .container-fluid {padding: 0 150px 0 150px;}
i.material-icons.service {font-size: 40px;font-weight: 400;}
.detail-img img {max-width: 100%;}
.index-home  .page-slogan {background-color: #eaeef2;}
.page-slogan {background-color: #FFFFFF;}
.page-slogan #home-header {width: 900px;}

.projects-items .single-item.hover-effects .item {overflow: hidden;}
.projects-items .single-item.hover-effects:hover img {transform: scale(1.05);}

header {background-color: #ffffff;background-image: url("../../images/header_bg.png");background-repeat: repeat-x;background-position: top center;padding-top: 50px;}
.index-home header {background-color: #eaeef2;background-image: none;}
header.border {border-bottom: 0px solid rgba(0, 0, 0, 0);box-shadow: 0 0 0 0 rgb(0 0 0 / 0%);}
header nav.navbar {border-bottom: 1px solid rgba(0, 0, 0, 0.6);height: 68px;}
header nav.navbar #logo {width: auto;position: relative;float: left;background-color: #ffffff;}
.index-home header nav.navbar #logo {background-color: #eaeef2;}
header nav.navbar #logo a.navbar-brand {height: auto;line-height: inherit;padding: 0 0 15px 0;}
header nav.navbar #logo a.navbar-brand img {max-height: none !important;width: 363px !important;}
header nav.navbar #menu, header nav.navbar #sidemenu, header nav.navbar #menu-classic {position: relative;float: right; margin: 25px 0 25px 0;width: auto;}
header nav.navbar #menu .menu-holder ul li, header nav.navbar #sidemenu .menu-holder ul li, header nav.navbar #menu-classic .menu-holder ul li {/*min-width:110px;*/}
header nav.navbar #menu .menu-holder ul li a, header nav.navbar #sidemenu .menu-holder ul li a, header nav.navbar #menu-classic .menu-holder ul li a {margin-left: 30px;font-size: 18px;line-height: 26px;font-weight: 400;color: #000000;padding: 10px 0;}
header nav.navbar #menu .menu-holder ul li a:hover, header nav.navbar #sidemenu .menu-holder ul li a:hover, header nav.navbar #menu-classic .menu-holder ul li a:hover {color: #000000 !important;font-weight: 400;}
header nav.navbar #menu .menu-holder ul li a.active, header nav.navbar #sidemenu .menu-holder ul li a.active, header nav.navbar #menu-classic .menu-holder ul li a.active {color: #527a99 !important;font-weight: 400;}
header nav.navbar #menu .menu-holder ul li a.active2, header nav.navbar #sidemenu .menu-holder ul li a.active2, header nav.navbar #menu-classic .menu-holder ul li a.active2 {color: #707f8e !important;font-weight: 400;}


#page-slogan {position: relative;z-index: 2;}
#page-slogan #home-header .text {padding: 30px 15px 30px 15px;}
#page-slogan #home-header h1, #page-slogan #home-header h2, #page-slogan #home-header p {color: #000000 !important;}
#page-slogan #home-header .page-header-t1 {font-size: 1.3rem;line-height: 1.3rem;padding: 0 0 10px 0;font-weight: 600;}
#page-slogan #home-header .page-header-t3 {font-size: 1rem;line-height: 1.5rem;font-weight: 400;}
#page-slogan #home-header .page-header-t2 {font-size: 1.2rem;line-height: 1.6rem;padding: 0 0 5px 0;font-weight: 600;margin-top: 30px;}
#page-slogan #home-header .page-header-t4 {font-size: 1rem;line-height: 1.5rem;font-weight: 400;}
#page-content {padding: 40px 0 40px 0;}
#page-content #projects ul.filters li, #page-content #projects-filters ul.filters li, #page-content #masonry-filters ul.filters li {font-size: 1.2rem;color: #444;font-weight: 400;margin-bottom: 5px;}
#page-content #projects .projects-items .single-item .item .content, #page-content #projects .masonry-items .single-item .item .content, #page-content #projects-filters .projects-items .single-item .item .content, #page-content #projects-filters .masonry-items .single-item .item .content, #page-content #masonry-filters .projects-items .single-item .item .content, #page-content #masonry-filters .masonry-items .single-item .item .content {padding: 25px 8px;}
#page-content #projects .projects-items .single-item .item h3, #page-content #projects .masonry-items .single-item .item h3, #page-content #projects-filters .projects-items .single-item .item h3, #page-content #projects-filters .masonry-items .single-item .item h3, #page-content #masonry-filters .projects-items .single-item .item h3, #page-content #masonry-filters .masonry-items .single-item .item h3 {font-weight: 600;font-size: 17px;line-height: 22px;color: #527a99;margin-bottom: 8px;}
#page-content #projects .projects-items .single-item .item p, #page-content #projects .masonry-items .single-item .item p, #page-content #projects-filters .projects-items .single-item .item p, #page-content #projects-filters .masonry-items .single-item .item p, #page-content #masonry-filters .projects-items .single-item .item p, #page-content #masonry-filters .masonry-items .single-item .item p {color:#909090;font-size: 15px;font-weight: 400;}
#page-content #news .single-news article h3 {font-size: 17px;line-height: 22px;font-weight: 600;}
#page-content #projects.page, #page-content #projects-filters.page, #page-content #masonry-filters.page {padding: 0 0 25px 0!important;}
#page-content #projects .projects-items .single-item .item, #page-content #projects .masonry-items .single-item .item, #page-content #projects-filters .projects-items .single-item .item, #page-content #projects-filters .masonry-items .single-item .item, #page-content #masonry-filters .projects-items .single-item .item, #page-content #masonry-filters .masonry-items .single-item .item {margin: 20px;}


.about-01 {font-size: 1.5rem !important;font-weight: 200;}
.about-02 {width: 60px;height: 60px;}
.about-03 {margin-bottom: 40px;}
.about-04 {font-size: 18px !important;}
.single-item .item .content .meta {color: #527a99;margin-bottom: 10px;}
.detail-page {margin-top: 25px;}
.detail-page2 {font-size: 25px;}
.detail-page3 strong {font-weight: 700 !important;}
.detail-page4 {font-size: 20px !important;margin-top: 25px !important;margin-bottom: 15px !important;}
.detail-page5 .text {padding: 5px 50px !important;}
.contact-01 {padding: 80px 0 60px 0;}
.contact-011 {font-size: 1.3rem !important;line-height: 2rem !important; font-weight: 600 !important;}
.contact-02 {color: #000000;font-size: 1.1rem;}
.contact-03 {padding: 100px 0 60px 0;}
.contact-03 .map {width: 90%;}
.contact-031 {font-size: 20px;font-weight: 600;line-height: 28px;}
.contact-032 {font-size: 18px;font-weight: 600;line-height: 28px;margin-bottom: 30px;}
.contact-033 {font-size: 17px;font-weight: 400;line-height: 28px;}
.contact-034 {font-size: 17px;font-weight: 400;line-height: 28px;}
.contact-035 {font-size: 17px;font-weight: 400;line-height: 28px;}
#contact-form #submit-contact.btn-alt.active, #search-form #submit-contact.btn-alt.active {background-color: #84a0b6;}
.pagenav {text-align: left;padding-left: 20px;}
.info-01 .text {padding: 30px 15px 0px 15px !important;}


footer .container-fluid {padding: 0 150px 0 150px;}
footer, .footer {position: relative;padding: 0 0 50px 0;background-color: #eaeef2;}
footer .footer-01 {font-size: 12px;line-height: 1.1rem;font-weight: 400;margin: 35px 0 5px 0;}
footer .footer-02 {margin: 0 0 5px 0;}
footer .footer-021 {float: left;font-size: 0.9rem;line-height: 1.5rem;font-weight: 500;margin-right: 10px;}
footer .footer-022 {float: left;font-size: 0.9rem;line-height: 1.5rem;font-weight: 500;margin-right: 10px;}
footer .footer-023 {float: left;font-size: 0.9rem;line-height: 1.5rem;font-weight: 400;margin-right: 10px;}
footer .footer-024 {float: left;font-size: 0.9rem;line-height: 1.5rem;font-weight: 400;margin-right: 10px;}
footer .footer-03 {font-size: 0.9rem;font-weight: 400;}
footer .footer-04 {margin-top: 80px;padding-left: 20px;}
footer .footer-041 {font-size: 0.9rem;font-weight: 400;line-height: 1.5rem;}
footer .footer-042 {font-size: 0.9rem;font-weight: 400;line-height: 1.5rem;}
footer .footer-043 {font-size: 0.9rem;line-height: 1.2rem;font-weight: 500;padding: 2px 0;}
footer .footer-05 {margin-top: 45px;}
footer .footer-05 .social {float: none;margin-bottom: 0px;}
footer .footer-05 ul.social li, .footer ul.social li {color: #747474;border-radius: 40px;border: 1px solid #747474;margin-right:15px;}
footer .footer-05 ul.social li a, .footer ul.social li a {width: 38px;height: 38px;display: inline-block;text-align: center;}
footer .footer-05 ul.social li a:hover, .footer ul.social li a:hover {color: #707f8e !important;}
footer .footer-05 ul.social li i, .footer .footer-05 ul.social li i {color: #747474;padding: 0;line-height:38px;font-size: 20px;}



.pagination>li>a, .pagination>li>span {color: #7f92a5;border: 1px solid #ddd;}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {background-color: #7f92a5;border-color: #7f92a5;}

@media (max-width: 1525px) {
	#main-wrap .container-fluid {padding: 0 100px 0 100px;}
	footer .container-fluid {padding: 0 100px 0 100px;}
	header nav.navbar #logo a.navbar-brand img {max-height: none !important;width: 363px !important;}
	header nav.navbar {height: 73px;}
	header nav.navbar #menu, header nav.navbar #sidemenu, header nav.navbar #menu-classic {margin: 30px 0 25px 0;}
}

@media (max-width: 1400px) {
	#main-wrap .container-fluid {padding: 0 50px 0 50px;}
	footer .container-fluid {padding: 0 50px 0 50px;}
	header nav.navbar #logo a.navbar-brand img {max-height: none !important;width: 300px !important;}	
	header nav.navbar {height: 55px;}
	header nav.navbar #menu, header nav.navbar #sidemenu, header nav.navbar #menu-classic {margin: 20px 0 25px 0;}
	#page-slogan #home-header .page-header-t1 {font-size: 18px;line-height: 1.3rem;padding: 0 0 10px 0;font-weight: 400;}
	#page-slogan #home-header .page-header-t3 {font-size: 14px;line-height: 22px;font-weight: 400;letter-spacing: 2px;}
	#page-slogan #home-header .page-header-t2 {font-size: 16px;line-height: 1.3rem;padding: 0 0 5px 0;font-weight: 400;margin-top: 30px;}
	#page-slogan #home-header .page-header-t4 {font-size: 14px;line-height: 1.5rem;font-weight: 100;}
}

@media (max-width: 1199px) {	
	#main-wrap .container-fluid {padding: 0 15px 0 15px;}
	footer .container-fluid {padding: 0 15px 0 15px;}
	header nav.navbar #logo a.navbar-brand img {max-height: none !important;width: 270px !important;}
	header nav.navbar {height: 50px;}
	header nav.navbar #menu, header nav.navbar #sidemenu, header nav.navbar #menu-classic {margin: 15px 0 25px 0;}
}

@media (max-width: 991px) {
	header nav.navbar #logo a.navbar-brand {padding: 5px 0 15px 0;}
	header nav.navbar #logo a.navbar-brand img {max-height: none !important;width: 250px !important;}
	header nav.navbar {height: 50px;}
	header nav.navbar #menu, header nav.navbar #sidemenu, header nav.navbar #menu-classic {margin: 10px 0 25px 0;}
	header nav.navbar #menu-responsive .menu-button, header nav.navbar #menu-responsive-sidemenu .menu-button, header nav.navbar #menu-responsive-classic .menu-button {margin: 20px 0;}
	.contact-01 {padding: 40px 0 30px 0;}
	.contact-03 .map {width: 100%;}
	.contact-031 {margin-top: 50px;}
	footer .footer-021, footer .footer-022, footer .footer-023, footer .footer-024 {float: none;}
	footer .footer-02 {margin: 0 0 30px 0;}
	footer .footer-04 {margin: 30px 0 0 0;}
}

@media (max-width: 768px) {
	header nav.navbar #logo a.navbar-brand img {max-height: 150px !important;}
	.page-slogan #home-header {width: 100%;}

}

@media (max-width: 479px) {
	header nav.navbar #logo a.navbar-brand img {max-height: 100px !important;}
	.detail-page4 {line-height: 26px !important;}
	.detail-page5 .text {padding: 5px 30px !important;}
}