@charset "utf-8";
/* CSS Document */

.classNote{
	padding-bottom:20px;
	font-family:"微軟正黑體", "新細明體", sans-serif;
	font-size:16px;
	color:#2f2f2f;
	text-align:center;
	line-height:1.8;}

ul.facList li{
	padding:0 10px 20px 10px;
	cursor:pointer;}

ul.facList li .Img{
	position:relative;
	overflow:hidden;}

ul.facList li .Img:before{
	content:"";
	border:1px solid #FFF;
	position:absolute;
	top:10px;
	left:10px;
	right:10px;
	bottom:10px;
	z-index:5;
	opacity:0;
	transition:all 0.4s ease;}

ul.facList li .Img a{
	display:block;
	background:#0099e5;
	position:relative;
	overflow:hidden;}

ul.facList li .Img img{
	display:block;
	width:100%;
	
	transition: all 0.4s ease;}

ul.facList li .Img a:before{
	content:"";
	background:url(../images/icon_mask.png) no-repeat;
	width:108px;
	height:53px;
	
	position:absolute;
	left:50%;
	top:50%;
	margin-left:-54px;
	margin-top:-27px;
	
	opacity:0;
	-webkit-backface-visibility: hidden;
	transform: translateY(10px) rotateY(180deg);
	transform-style: preserve-3d;
	transition:all 0.4s ease;}

ul.facList li .Img a:after{
	content:"- Read more -";
	font-size:12px;
	color:#FFF;
	width:100%;
	text-align:center;
	
	opacity:0;
	transition:all 0.4s ease;
	
	position:absolute;
	bottom:10%;
	left:0;}

ul.facList li .Txt{
	padding:15px 20px;
	background:#F9F9F9;}

ul.facList li .Txt h3{
	font-size:16px;}

ul.facList li .Txt h3 strong{
	font-weight:normal;}

ul.facList li .Txt h3 strong a{
	position:relative;
	display:block;
	color:#000;}

ul.facList li .Txt p{
	margin-top:10px;
	font-size:13px;
	color:#888;
	line-height:1.8;
	height:60px;}

ul.facList li:hover .Img:before{
	opacity:0.7;}
ul.facList li:hover  .Img img{
	opacity:0.1;
	transform:scale(1.1);}
ul.facList li:hover  .Img a:before{
	opacity:1;
	transform:translateY(-10px) rotateY(0deg);}
ul.facList li:hover  .Img a:after{
	opacity:1;}
	
/******內頁******/
.contentBox{}

.contentBox .leftBox{
	float:left;
	width:64%;}

.contentBox .leftBox .Img{}

.contentBox .leftBox .Img img{
	width:100%;}

.contentBox .leftBox h3{
	margin:10px 0 20px 0;}

.contentBox .leftBox h3.sectionTitle strong{
	font-size: 25px;
	font-family:"微軟正黑體", "新細明體", sans-serif;}

.contentBox .rightBox{
	float:right;
	width:30%;}

/*767*/
@media (max-width: 767px){
.contentBox .classBox{
	float:none;
	width:100%;}

.contentBox .itemBox{
	float:none;
	width:100%;
	margin-top:30px;}

ul.facList li.col-4{
	width:50%;}		

/*內頁*/
.contentBox .leftBox{
	float:none;
	width:100%;
	padding:0;}

.contentBox .rightBox{
	float:none;
	width:100%;
	margin-top:20px;}
}
/*767 end*/

@media (max-width:640px){

}

/*480*/
@media (max-width: 480px){
ul.facList{
	margin:0;}	

ul.facList li.col-3{
	width:100%;
	padding:0 0 30px 0;}

ul.facList li .Txt p{
	height:auto;}

}
/*360 end*/