@charset "utf-8";
.pgs-banner{ position: relative;}

.pgs-banner-imgs img{width: 100%;}

.pgs-banner-content{position: absolute; inset: 0; z-index: 1;}
.pgs-banner-content .container{height: 100%; align-items: center;}
.pgs-banner-content h3,
.pgs-banner-content p{color: var(--yf-green-default);}


.pgs-banner-white .pgs-banner-content h3,
.pgs-banner-white .pgs-banner-content p{color: #fff;}

.pgs-banner-green .pgs-banner-content h3,
.pgs-banner-green .pgs-banner-content p{color: var(--yf-green-default);}
/* 
|----------------------
|   breadcrumb
|----------------------
*/

.pgs-breadcrumb{ line-height: 30px; display: flex; align-items: center; flex-wrap: wrap; overflow: hidden; }
.pgs-breadcrumb b{display: inline-block; margin: 0 7px; width: 6px; height: 6px; border-top: 1px solid #777; border-right: 1px solid #777; transform: rotate(45deg);}
.pgs-breadcrumb a,
.pgs-breadcrumb span{margin: 5px 0; color:#808080; white-space: nowrap;}
.pgs-breadcrumb span{color: #3C3C3C;}
@media(max-width:768px){
	.pgs-breadcrumb{padding: 10px 0; height: auto;}
}

.pgs-breadcrumb-ctrl{ padding: 60px 0; align-items: center;}
.pgs-breadcrumb-back{ width: 150px; margin-right: 30px;}
.pgs-breadcrumb-back a{display: block; line-height: 50px; font-size: 16px; color: #3C3C3C; text-align: center; border: 1px solid #EBEBEB; }

@media (max-width:768px) {
	.pgs-breadcrumb-ctrl{ padding: 30px 0;}
	.pgs-breadcrumb-back{ width: 120px; margin-right: 30px;}
	.pgs-breadcrumb-back a{ line-height: 40px; font-size: 16px; }
}

/* 
|----------------------
|   title
|----------------------
*/
.pgs-title {padding-bottom: 20px;}
.pgs-title h3 {position: relative; color: var(--yf-green-default);}
.pgs-title p {line-height: 1; color: rgba(57, 170, 161,.2);}
.pgs-title span{ margin-top: 35px; display: inline-block; width: 60px; height: 3px; background-color: var(--yf-green-light);}

.pgs-title-white h3,
.pgs-title-white h4 {color: #fff;}
.pgs-title-center{text-align: center;}
@media (max-width:1200px) {
	.pgs-title h3 { font-size: 28px;}
}

@media (max-width:768px) {
	.pgs-title h3 { font-size: 24px;}
}

@media (max-width:640px) {
	.pgs-breadcrumb{display: none;}
}

/* 
|----------------------
|   paging
|----------------------
*/
.paging{ margin-top: 100px;}
.paging.center{display: flex; justify-content: center;}
.paging ul{margin-left: -8px;}
.paging-maxpage span,
.paging-prev span,
.paging-next span,
.paging-link a{ position: relative; display: flex; align-items: center; justify-content: center; margin:2px 8px; width: 40px;  height: 40px;  font-size: 16px;  background-color: #fff; border: 1px solid var(--yf-green-light);}
/* hover */
.paging-link a:hover,
.paging-link a:hover{background-color: var(--yf-green-light); color: #fff;}
/*  */
.paging-maxpage span,
.paging-prev span,
.paging-next span,
.paging-prev a,
.paging-next a{width: auto; padding: 0 15px;}

.paging-prev span,
.paging-next span{cursor: inherit;}

/* .paging-prev a i,
.paging-next a i{ position: absolute; top: 14px;  display: inline-block; width: 8px; height: 8px;border: 1px solid #333; transform: rotate(45deg);}
.paging-prev a i{left: 15px; border-right: none; border-top: none;}
.paging-next a i{left: 13px; border-left: none; border-bottom: none;} */
/* hover */
/* .paging-prev a:hover i,
.paging-next a:hover i{border-color: #fff;} */

/* active */
.paging ul li a.current,
.paging ul li a:hover{ background-color: var(--yf-green-light); color: #fff;}

@media (max-width:768px) {
	.paging{ margin-top: 50px; text-align: center;}
	.paging ul{margin-left: -4px;}

	.paging-prev span,
	.paging-next span,
	.paging-link a{ margin:2px 4px; width: 30px;  height: 30px; font-size: 12px;}
	.paging-prev span,
	.paging-next span,
	.paging-prev a,
	.paging-next a{ width: auto; padding: 0 10px;}
}

/* tags */
.tags-show{position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; }
.tags-show::before{ position: absolute; left: 0; bottom: 0; z-index: -1; content: ''; display: flex; width: 50px; height: 100px; background-color: var(--yf-green-light);}
.tags-show span{ position: absolute; left: 0; bottom: 0; z-index: 1; display: inline-block; padding: 0 40px 0 55px; line-height: 50px; white-space: nowrap; color: #fff; background-color: var(--yf-green-light);}

.loading{ margin-top: 70px; text-align: center;}
.loading a{ display: inline-block; padding: 0 32px; line-height: 40px; font-size: 16px; border: 1px solid var(--yf-green-default);color: var(--yf-green-default);}
.loading a:hover{background-color: var(--yf-green-default); color: #fff;}