#school {

	position: relative;
	background: #ffffff;
}
#school .school-thumb {
	background-color: #ffffff;
	box-shadow: 0px 1px 2px 0px rgba(90, 91, 95, 0.15);
	cursor: pointer;
	display: block;
	margin-bottom: 25px;
	position: relative;
	top: 0px;
	transition: all 0.4s ease-in-out;
}
#school .school-thumb:hover {
	box-shadow: 0px 16px 22px 0px rgba(90, 91, 95, 0.3);
	top: -5px;
}
#school .school-thumb img {
	border-top-right-radius: 2px;
	border-bottom-left-radius: 2px;
	width: 100%;
}

.school {
	margin: 0 auto;
	list-style: none;
	text-align: center;
}
.school li {
	display: inline-block;
	margin: 0;
	padding: 20px;
	text-align: left;
	position: relative;
}
.school figure {
	margin: 0;
	position: relative;
}
.school figure img {
	width: 100%;
	max-width: 100%;
	display: block;
	position: relative;
}
.school figcaption {
	text-align: left;
	text-align: justify;
	position: absolute;
	top: 0;
	left: 0;
	padding: 42px 22px;
	/* background: #304352; */
	color: #e4af4c;
}
.school figcaption h1 {
	font-size: 1.6rem;
	line-height: 2rem;
	margin: 0;
	color: #fff;
	letter-spacing: 0.1rem;
}
.school figcaption p {
	font-size: 1rem;
	line-height: 1.2rem;
	margin: 0;
	padding-bottom: 12px;
	color: #fff;
	letter-spacing: 0.8rem;
	text-transform: uppercase;
	word-wrap: break-word;
}
.school figcaption small {
	font-size: 1.1rem;
	text-align: left;
}
.school figcaption a {
	
	padding: 5px 10px;
	border-radius: 2px;
	display: inline-block;
	background: #17a2b8;
	color: #fff;
}
/* Caption Style 4 */
.study li {
	-webkit-perspective: 1700px;
	-moz-perspective: 1700px;
	perspective: 1700px;
	-webkit-perspective-origin: 0 50%;
	-moz-perspective-origin: 0 50%;
	perspective-origin: 0 50%;
}
.study figure {
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}
.study figure > div {
	overflow: hidden;
}
.study figure img {
	-webkit-transition: 0.4s;
	-moz-transition: 0.4s;
	transition: 0.4s;
}
.no-touch .study figure:hover img, .study figure.cs-hover img {
	-webkit-transform: translateX(25%);
	-moz-transform: translateX(25%);
	-ms-transform: translateX(25%);
	transform: translateX(25%);
}
.study figcaption {
	height: 100%;
	width: 50%;
	opacity: 0;
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transform-origin: 0 0;
	-moz-transform-origin: 0 0;
	-ms-transform-origin: 0 0;
	transform-origin: 0 0;
	-webkit-transform: rotateY(-90deg);
	-moz-transform: rotateY(-90deg);
	-ms-transform: rotateY(-90deg);
	transform: rotateY(-90deg);
	-webkit-transition: all 0.4s, opacity 0.1s 0.3s;
	-moz-transition: all 0.4s, opacity 0.1s 0.3s;
	-ms-transition: all 0.4s, opacity 0.1s 0.3s;
	transition: all 0.4s, opacity 0.1s 0.3s;
}
.no-touch .study figure:hover figcaption, .study figure.cs-hover figcaption {
	opacity: 1;
	-webkit-transform: rotateY(0deg);
	-moz-transform: rotateY(0deg);
	-ms-transform: rotateY(0deg);
	transform: rotateY(0deg);
	-webkit-transition: all 0.4s, opacity 0.1s;
	-moz-transition: all 0.4s, opacity 0.1s;
	-ms-transition: all 0.4s, opacity 0.1s;
	transition: all 0.4s, opacity 0.1s;
}
.study figcaption a {
	position: absolute;
	bottom: 20px;
	right: 20px;
}
.bt-g{
	position: absolute;
	bottom: 20px;
	right: 20px;
	color: #fff;
    background-color: #f87408;
    border-color: #f87408;
}
.bt-g:hover {
    color: #fff;
    background-color: #ce5c00;
    border-color: #ce5c00;
}


/*---------------------------------------
   Responsive Mobile         
-----------------------------------------*/
@media (max-width: 1199px) {
	.school figcaption {
		padding: 12px 12px;
	}	
}


@media (min-width: 768px) and (max-width: 991px) {
	.study figcaption {
		height: 100%;
		width: 100%;
	}
}

@media (max-width: 575px) {
.mb-575{padding-bottom: 3rem;}}
@media (max-width: 504px) {
	.study figcaption {
		height: 100%;
		width: 100%;
	}
}





@media (max-width: 380px) {
	.mb-575{padding-bottom: 1.2rem;}
	.school figcaption h1 {
		font-size: 1.2rem;
		line-height: 2rem;
		margin: 0;
		color: #fff;
		letter-spacing: 0.05rem;
	}
	.school figcaption h1 {font-size: 1.3rem;}
	.school figcaption small {
		font-size: 0.95rem;
		text-align: left;
		line-height: 1;
	}
	.bt-g {
		bottom: 10px;
		right: 10px;
	}
	.btn {
		padding: .375rem .65rem;
		font-size: .95rem;
		line-height: 1.2;
		
	}
	

}










/*---------------------------------------
   學校簡介頁面 影片RWD
-----------------------------------------*/
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }



.grid figure{position:relative;float:left;overflow:hidden;margin:2px 2px;max-height:300px;width:100% !important;text-align:left;cursor:pointer;}
.grid figure img{position:relative;display:block;min-height:100%;max-width:100%;}
.grid figure figcaption{padding:2em;color:#fff;text-transform:uppercase;font-size:1.25em;-webkit-backface-visibility:hidden;backface-visibility:hidden;}
.grid figure figcaption::before,
.grid figure figcaption::after{pointer-events:none;}
.grid figure figcaption,
.grid figure figcaption > a{position:absolute;top:0;left:0;width:100%;height:100%;}
.grid figure figcaption > a{z-index:1000;text-indent:200%;white-space:nowrap;font-size:0;}
.grid figure h2{word-spacing:-0.15em;font-weight:300;}
.grid figure h2 span{font-weight:800;}
.grid figure h2,
.grid figure p{margin:0;}
.grid figure p{letter-spacing:1px;font-size:68.5%;}
figure.effect-layla_1{background:#0d3f52;}
figure.effect-layla_1 img{height:330px;width:100% !important;}
figure.effect-layla_1 figcaption{padding:3em;}
figure.effect-layla_1 figcaption::before,
figure.effect-layla_1 figcaption::after{position:absolute;content:'';}
figure.effect-layla_1 figcaption::before{top:50px;right:30px;bottom:50px;left:30px;border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:0 0;transform-origin:0 0;}
figure.effect-layla_1 figcaption::after{top:30px;right:50px;bottom:30px;left:50px;border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);transform:scale(1,0);-webkit-transform-origin:100% 0;transform-origin:100% 0;}
figure.effect-layla_1 h2{font-size:24px;padding-top:14% !important;-webkit-transition:-webkit-transform 0.35s;transition:transform 0.35s;}
figure.effect-layla_1 p{padding:0.5em 2em;text-transform:none;-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0);}
figure.effect-layla_1 img,
figure.effect-layla_1 h2{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}
figure.effect-layla_1 img,
figure.effect-layla_1 figcaption::before,
figure.effect-layla_1 figcaption::after,
figure.effect-layla_1 p{-webkit-transition:opacity 0.35s, -webkit-transform 0.35s;transition:opacity 0.35s, transform 0.35s;}
figure.effect-layla_1:hover img{opacity:0.5;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
figure.effect-layla_1:hover figcaption::before,
figure.effect-layla_1:hover figcaption::after{-webkit-transform:scale(1);transform:scale(1);}
figure.effect-layla_1:hover h2,
figure.effect-layla_1:hover p{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
figure.effect-layla_1:hover figcaption::after,
figure.effect-layla_1:hover h2,
figure.effect-layla_1:hover p,
figure.effect-layla_1:hover img{-webkit-transition-delay:0.15s;transition-delay:0.15s;}
figure.effect-layla_2{background:#ffc300;}
figure.effect-layla_2 img{height:330px;width:100% !important;}
figure.effect-layla_2 figcaption{padding:3em;}
figure.effect-layla_2 figcaption::before,
figure.effect-layla_2 figcaption::after{position:absolute;content:'';}
figure.effect-layla_2 figcaption::before{top:50px;right:30px;bottom:50px;left:30px;border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:0 0;transform-origin:0 0;}
figure.effect-layla_2 figcaption::after{top:30px;right:50px;bottom:30px;left:50px;border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);transform:scale(1,0);-webkit-transform-origin:100% 0;transform-origin:100% 0;}
figure.effect-layla_2 h2{font-size:24px;padding-top:14% !important;-webkit-transition:-webkit-transform 0.35s;transition:transform 0.35s;}
figure.effect-layla_2 p{padding:0.5em 2em;text-transform:none;-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0);}
figure.effect-layla_2 img,
figure.effect-layla_2 h2{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}
figure.effect-layla_2 img,
figure.effect-layla_2 figcaption::before,
figure.effect-layla_2 figcaption::after,
figure.effect-layla_2 p{-webkit-transition:opacity 0.35s, -webkit-transform 0.35s;transition:opacity 0.35s, transform 0.35s;}
figure.effect-layla_2:hover img{opacity:0.8;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
figure.effect-layla_2:hover figcaption::before,
figure.effect-layla_2:hover figcaption::after{-webkit-transform:scale(1);transform:scale(1);}
figure.effect-layla_2:hover h2,
figure.effect-layla_2:hover p{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
figure.effect-layla_2:hover figcaption::after,
figure.effect-layla_2:hover h2,
figure.effect-layla_2:hover p,
figure.effect-layla_2:hover img{-webkit-transition-delay:0.15s;transition-delay:0.15s;}
figure.effect-layla_3{background:#ff008a;}
figure.effect-layla_3 img{height:330px;width:100% !important;}
figure.effect-layla_3 figcaption{padding:3em;}
figure.effect-layla_3 figcaption::before,
figure.effect-layla_3 figcaption::after{position:absolute;content:'';}
figure.effect-layla_3 figcaption::before{top:50px;right:30px;bottom:50px;left:30px;border-top:1px solid #fff;border-bottom:1px solid #fff;-webkit-transform:scale(0,1);transform:scale(0,1);-webkit-transform-origin:0 0;transform-origin:0 0;}
figure.effect-layla_3 figcaption::after{top:30px;right:50px;bottom:30px;left:50px;border-right:1px solid #fff;border-left:1px solid #fff;-webkit-transform:scale(1,0);transform:scale(1,0);-webkit-transform-origin:100% 0;transform-origin:100% 0;}
figure.effect-layla_3 h2{font-size:24px;padding-top:14% !important;-webkit-transition:-webkit-transform 0.35s;transition:transform 0.35s;}
figure.effect-layla_3 p{padding:0.5em 2em;text-transform:none;-webkit-transform:translate3d(0,-10px,0);transform:translate3d(0,-10px,0);}
figure.effect-layla_3 img,
figure.effect-layla_3 h2{-webkit-transform:translate3d(0,-30px,0);transform:translate3d(0,-30px,0);}
figure.effect-layla_3 img,
figure.effect-layla_3 figcaption::before,
figure.effect-layla_3 figcaption::after,
figure.effect-layla_3 p{-webkit-transition:opacity 0.35s, -webkit-transform 0.35s;transition:opacity 0.35s, transform 0.35s;}
figure.effect-layla_3:hover img{opacity:0.8;-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
figure.effect-layla_3:hover figcaption::before,
figure.effect-layla_3:hover figcaption::after{-webkit-transform:scale(1);transform:scale(1);}
figure.effect-layla_3:hover h2,
figure.effect-layla_3:hover p{-webkit-transform:translate3d(0,0,0);transform:translate3d(0,0,0);}
figure.effect-layla_3:hover figcaption::after,
figure.effect-layla_3:hover h2,
figure.effect-layla_3:hover p,
figure.effect-layla_3:hover img{-webkit-transition-delay:0.15s;transition-delay:0.15s;}

#edm figcaption a{border:1px solid #fff;margin-top:1em;display:inline-block;color:#fff;padding:0 2em;}
#edm figcaption a:hover{text-decoration:none;padding:0 3em;}