/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/


.si-line:hover,
.si-colored.si-line { background-color: #00b900 !important; }

.posts-md .entry-content p {
	line-height: 28px !important;
	text-align: justify;
	display: -webkit-box;
	overflow: hidden;
	-o-text-overflow: ellipsis;
	text-overflow: ellipsis;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
}

.tagcloud a { 
	padding-left: 8px;
	padding-right: 8px;
	margin-right: 10px;
	margin-bottom: 10px;
}

.entry-image img {
	width: auto;
}

.entry-meta ul li {
	z-index: 99;
}

/* ------------------------------------------------------------------ */

.free-img-wrapper {
	position: relative;
	/*margin-bottom: 30px;*/
	transition: all .2s ease-in;
	width: 100%;
}

.bg-imgbox {
	background: #eee;
	overflow: hidden;

	position: relative;
}

/* === Controller: Box Shape === */

/* Default: Golden Ratio */
.bg-imgbox:after {
	content: "";
	display: block;

	padding-top: 62.5%;
}

.bg-imgbox.square:after { padding-top: 100%; }
.bg-imgbox.square-80:after { padding-top: 80%;}
.bg-imgbox.square-60:after { padding-top: 60%;}
.bg-imgbox.square-58:after { padding-top: 58%;}
.bg-imgbox.square-56:after { padding-top: 56%;}
.bg-imgbox.square-54:after { padding-top: 54%;}
.bg-imgbox.square-52:after { padding-top: 52%;}

/* === Controller End === */

/* 遮罩 */
.brightness {
	-webkit-filter: brightness(.85);
}


/* === Controller: IMG's max-width or max-height === */

img.bg-imgbox-img {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: 50%;

	transform: translateX(-50%); 

	margin: auto;

	transition: all .2s ease-in;
}

.bg-imgbox-img.maxW {
	max-height: none;
	max-width: 100%;
}

.bg-imgbox-img.maxH {
	max-height: 100%;
	max-width: none;
}

/* === Controller End === */


.upon-element {
	display: block;

	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);

	text-align: center;
}

.upon-element img {
	width: 80%;
	transition: all .2s ease-in;
}


.free-img-wrapper:hover .bg-imgbox img {
	opacity: .85;
	transition: all .2s ease-in;

	cursor: pointer;
}


.free-img-wrapper:hover .upon-element img {
	width: 88%;
	transition: all .2s ease-in;

	cursor: pointer;
}

/* ------------------------------------------------------------------ */

@media screen and (min-width: 767px) {
	.stretched-link.hor-layout:after {
		left: -72%;
	}
}

/* ------------------------------------------------------------------ */


.dark #header-wrap,
.block-slider-2.slider-element { background-color: #080E2C; }

.block-slider-2 .swiper-pagination {
	--color: #FFF;
	--gap: 10px;
	--line-width: 50px;
	display: flex;
	width: auto;
	justify-content: center;
	counter-reset: item;
    bottom: 50px !important;
    transform: translateX(-50%);
    align-items: center;
}

.block-slider-2 .swiper-pagination,
.block-slider-2 .swiper-pagination::before,
.block-slider-2 .swiper-pagination::after {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
}

.block-slider-2 .swiper-pagination::before {
	content: "";
	width: var(--line-width, 50px);
	height: 1px;
	background-color: var(--color, #FFF);
}

.block-slider-2 .swiper-pagination span::before {
	content: "0" counter(item);
	counter-increment: item;
	font-weight: 700;
	color: var(--color, #FFF);
}

.block-slider-2 .swiper-pagination::after {
	content: attr(swiper-slides-total);
	left: calc(50% + var(--gap, 10px) + var(--line-width, 50px));
	font-weight: 700;
	color: var(--color, #FFF);
	opacity: 0.6;
}

.block-slider-2 .swiper-pagination span {
	position: absolute;
	left: calc(50% - var(--gap, 10px) - var(--line-width, 50px));
	width: auto;
	height: auto;
	margin: 0;
	-webkit-transition: all .3s ease;
	transition: all .3s ease;
}

.block-slider-2 .swiper-pagination span:not(.swiper-pagination-bullet-active) {
    opacity: 0;
    -webkit-transform: translateY(-100%);
    -ms-transform: translateY(-100%);
    transform: translateY(-100%);
}

.block-slider-2 .swiper-pagination span.swiper-pagination-bullet-active ~ .swiper-pagination-bullet {
    -webkit-transform: translateY(100%);
    -ms-transform: translateY(100%);
    transform: translateY(100%);
}

.block-slider-2 .swiper-pagination span,
.block-slider-2 .swiper-pagination span:hover,
.block-slider-2 .swiper-pagination span.swiper-pagination-bullet-active {
	background-color: transparent !important;
	border: 0;
}

.block-card-9 .grid-inner .btn-hover {
	opacity: 0;
	display: block;
	transition: opacity .3s ease, transform .3s .1s ease;
	margin-top: 15px;
	position: absolute;
	transform: translateY(0);
}
.block-card-9 .grid-inner:hover .btn-hover {
	opacity: 1;
	transform: translateY(-5px);
}

.block-card-9 .grid-inner .grid-image {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center center;
}

.block-card-9 .grid-inner:hover .grid-image {
	-webkit-animation: kenburns 20s ease-out both;
    animation: kenburns 20s ease-out both;
}

.block-card-9 .grid-inner .grid-icon,
.block-card-9 .grid-inner .grid-content {
	transition: transform .3s ease;
}

.block-card-9 .grid-inner:hover .grid-content { transform: translateY(-45px); }
.block-card-9 .grid-inner:hover .grid-icon { transform: translateY(-5px); }

@-webkit-keyframes kenburns {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 84% 84%;
            transform-origin: 84% 84%;
  }
  100% {
    -webkit-transform: scale(1.25) translate(20px, 15px);
            transform: scale(1.25) translate(20px, 15px);
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
  }
}
@keyframes kenburns {
  0% {
    -webkit-transform: scale(1) translate(0, 0);
            transform: scale(1) translate(0, 0);
    -webkit-transform-origin: 84% 84%;
            transform-origin: 84% 84%;
  }
  100% {
    -webkit-transform: scale(1.25) translate(20px, 15px);
            transform: scale(1.25) translate(20px, 15px);
    -webkit-transform-origin: right bottom;
            transform-origin: right bottom;
  }
}


/* === Index Hero Banner Images Link Area === */

a.bg-link-area:after {
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
}

/* Owl Carousel Nav 的顯示造成手機版跑版 */
@media screen and (max-width: 767px) {
	.owl-nav {display: none;}
}

/* ------------------------------------------------------------------ */

.mb-30 { margin-bottom: 30px !important; }

.fs-7 { font-size: 0.95rem !important; }
.fs-8 { font-size: 0.90rem !important; }