@charset "utf-8";
.page-banner{background-color: #BAD2C4; overflow: hidden;}
.page-banner-img{height: 210px;}
.page-banner img{width: 100%;}

/* path */
.page-path{ height: 40px;line-height: 20px; display: flex; align-items: center; flex-wrap: wrap; overflow: hidden; }
.page-path i{margin-right: 5px; font-size: 18px; color: #999;}
.page-path a{color: #777;}
.page-path b{display: inline-block; margin: 0 7px; width: 6px; height: 6px; border-top: 1px solid #777; border-right: 1px solid #777; transform: rotate(45deg);}
.page-path span{flex: 1; color:#777;}

@media(max-width:768px){
	.page-path{padding: 10px 0; height: auto;}
}

/*  */
.column { float: left; }

@media screen and (max-width: 450px) {
	.column { float: none; position: relative; clear: both; }
}
.size-1of4 { width: 25%; }
.size-1of3 { width: 33.333%; }
.size-1of2 { width: 50%; }

#fh5co-main { padding-top: 5em; }
#fh5co-board .item { margin: 10px 10px 20px 10px; background: #fff; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; overflow: hidden; -webkit-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); -moz-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07); }
#fh5co-board .item a { display: block; }
#fh5co-board .item .fh5co-desc { padding: 20px; float: left; line-height: 24px; }
#fh5co-board .item .fh5co-item-title { font-family: "Montserrat", arial, sans-serif; font-size: 17px; line-height: 24px; margin: 0; padding: 0; }
#fh5co-board .item img { max-width: 100%; -webkit-transition: 0.2s; -o-transition: 0.2s; transition: 0.2s; }
#fh5co-board .item .fh5co-board-img { border-top-left-radius: 4px; border-top-right-radius: 4px; overflow: hidden; }
#fh5co-board .item .image-popup:hover img { opacity: .5; }
.js .animate-box { opacity: 0; }

#fh5co-board[data-columns]::before { content: '4 .column.size-1of4'; }

/* Configurate salvattore with media queries */
@media screen and (max-width: 450px) {
	#fh5co-board[data-columns]::before { content: '1 .column'; }
}

@media screen and (min-width: 451px) and (max-width: 700px) {
	#fh5co-board[data-columns]::before { content: '2 .column.size-1of2'; }
}

@media screen and (min-width: 701px) and (max-width: 850px) {
	#fh5co-board[data-columns]::before { content: '3 .column.size-1of3'; }
}

@media screen and (min-width: 851px) {
	#fh5co-board[data-columns]::before { content: '4 .column.size-1of4'; }
}

/* service */
.service-title{padding-bottom: 15px;}
.service-title h3{margin-bottom: 15px; font-size: 28px;font-weight: bold;color: #666;text-align: center;}
.service-title p{line-height: 35px;color: #666; font-size: 16px;}

@media (max-width:768px) {
	.service-title h3{font-size: 18px;}
	.service-title p{line-height: 25px;font-size: 14px;}
}



.service-box{background: #EFF5F1;}
.service-box ul{display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap;}
.service-box li{position: relative; width: 20%;}
.service-box li img{max-width: 100%;}


.service-all ul{display: flex; justify-content: center; align-items: center;}
.service-all ul li{ width: 25%; margin-right: 1px; flex: 1; cursor: pointer;}
.service-all-mask{position: absolute; left: 0;top: 0;width: 100%;height: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; text-align: center; color: #fff; visibility: hidden; opacity: 0;}

.service-all-mask p{font-size: 28px;}
.service-all-mask span{font-size: 20px;}

.service-all ul li:hover .service-all-mask{ visibility: visible; opacity: 1;}


@media (max-width:768px) {

	.service-all-mask p{font-size: 14px;}
	.service-all-mask span{font-size: 12px;}
}

.layui-layer{transition: none;}
.hide-content{display: none;}


/* contact */

.contact-title {text-align: center;color: #507480;
	line-height: 35px;}
.contact-title h3{margin-bottom: 20px; font-weight: bold; font-size: 28px; text-align:center;}


@media(max-width:768px){
	.contact-title h3{margin-bottom: 0; font-size: 18px; }

}

.form-input {margin-top: 15px; display: flex; justify-content: flex-start; align-items: center;}

.form-input label{ display: block;  width: 90px; text-align: right;color: #507480;}
.form-input input,
.form-input select,
.form-input textarea{flex: 1; display: block; width: 100%; padding: 0 10px; line-height: 35px;  border: 1px solid #ccc;}

.form-input span{display: block; margin-left: 2px;  width: 60px; text-align: right;color: #507480; background-color: #969896;height: 37px;}

.form-input button{margin-left: 90px; display: inline-block; padding: 0 60px; line-height: 35px; background-color: #DBC36E; color: #fff;}
.form-input button:hover{opacity: .7;}

/*  */
.news li{margin-bottom: 25px;}
.news li:nth-child(2n) a{background-color: #EFF5F1;}

.news-pic{width: 24%;}
.news-pic img{width: 100%;}

.news-content{flex: 1;padding: 20px;color: #507480;font-size: 16px;}
.news-content h3{margin-bottom: 10px; font-weight: bold;}
.news-content p{margin-bottom: 15px; font-size: 14px; line-height: 24px; height: 48px; overflow: hidden;}
.news-content span{font-size: 12px;}
.news li a:hover{text-decoration: underline;}
@media (max-width:768px) {
	.news li a{flex-direction: column;}
	.news-pic{display: none;}
}

/* pagination */
.pagination{padding: 20px 0;}
.pagination ul{display: flex; justify-content: center; align-items: center;}
.pagination ul li a{display: block; margin: 0 2px; width: 35px; height: 35px; line-height: 33px; text-align: center; border: 1px solid #eee;}

.pagination ul li span{    display: inline-block;width: 35px;height: 35px;background-color: #507480;color: white;line-height: 35px;text-align: center;}

.pagination ul li:first-child a{padding-left: 3px;}
.pagination ul li:last-child a{padding-right: 3px;}
.pagination ul li:first-child span{border-top: none;border-right: none;}
.pagination ul li:last-child span{border-bottom: none;border-left: none;}

.pagination ul li a.active,
.pagination ul li a:hover{border: 1px solid var(--mColor); background-color: var(--mColor); color: #fff;}
.pagination ul li a:hover span{border-color: #fff;}