/* MDB 卡片／圖片遮罩相容層（移除 MDB 後，列表頁仍使用相關 class） */

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.white-text {
	color: #fff !important;
}

.font-small {
	font-size: 0.9rem;
}

.rgba-orange-strong,
.view .mask.rgba-orange-strong {
	background-color: rgba(255, 152, 0, 0.7);
}

.rgba-black-strong,
.view .mask.rgba-black-strong {
	background-color: rgba(0, 0, 0, 0.7);
}

.rgba-black-light,
.view .mask.rgba-black-light {
	background-color: rgba(0, 0, 0, 0.3);
}

.rgba-indigo-light,
.view .mask.rgba-indigo-light,
.jarallax .mask.rgba-indigo-light {
	background-color: rgba(63, 81, 181, 0.3);
}

.rgba-white-strong,
.view .mask.rgba-white-strong {
	background-color: rgba(255, 255, 255, 0.9);
}

.jarallax .mask.rgba-white-strong {
	background-color: rgba(255, 255, 255, 0.7);
}

.rgba-white-slight,
.view .mask.rgba-white-slight,
.jarallax .mask.rgba-white-slight {
	background-color: rgba(255, 255, 255, 0.1);
}

.rgba-stylish-strong {
	background-color: rgba(62, 69, 81, 0.7);
}

.dark-grey-text {
	color: #4f4f4f !important;
}

.full-bg-img {
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
}

.z-depth-1 {
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.hoverable {
	transition: box-shadow 0.25s;
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12);
}

.hoverable:hover {
	box-shadow: 0 8px 17px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

.view {
	position: relative;
	overflow: hidden;
	cursor: default;
}

.view img,
.view video,
.view iframe {
	display: block;
}

.view .mask {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
	transition: opacity 0.4s ease-in-out;
}

.view.overlay .mask {
	opacity: 0;
}

.view.overlay:hover .mask,
.view.overlay .mask:hover,
.view.overlay a:hover .mask {
	opacity: 1;
}

.view.zoom img,
.view.zoom video,
.view.zoom iframe {
	transition: transform 0.2s linear;
}

.view.zoom:hover img,
.view.zoom:hover video,
.view.zoom:hover iframe {
	transform: scale(1.1);
}

.view a {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}

.view a .mask {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* jarallax 視差區塊（about 等 CMS 內容頁） */
.jarallax {
	position: relative;
	z-index: 0;
	min-height: 300px;
	overflow: hidden !important;
	height: auto;
}

.jarallax > .jarallax-img {
	position: absolute;
	object-fit: cover;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 0;
}

/* jarallax JS 產生的容器：勿用 -100，否則背景會沉到 body 白底下方 */
.jarallax > [id^="jarallax-container-"] {
	z-index: 0 !important;
	height: 100% !important;
	overflow: hidden !important;
}

.jarallax > [id^="jarallax-container-"] .jarallax-img,
.jarallax > [id^="jarallax-container-"] img {
	object-fit: cover;
	object-position: 50% 50%;
}

/* mask 維持 relative，內容才能撐開區塊高度（院長的話等長文） */
.jarallax .mask {
	position: relative;
	z-index: 1;
	width: 100%;
}

.jarallax .mask > .container,
.jarallax .mask > .container-fluid {
	position: relative;
	z-index: 2;
}

/* 內頁下方系所連結（icCollege） */
.card.card-image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.card.card-image.icCollege {
	width: 100%;
}