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

.contentBox .leftBox{
	padding:0 25px 0 0;
	border-right: 1px solid #ececec;
float:left;}



.contentBox .rightBox{
	float: right;
	padding:0 0 0 25px;}

.classNote{
	padding-bottom:20px;
	
	font-size:15px;
	color:#222;
	text-align:center;
	line-height:1.8;}

ul.facList{
	margin:0 -15px;}

ul.facList li{
	position: relative;
    overflow: hidden;
    display: inline-block;
    padding: 0px;
    margin: -2px -2px;
    float: none;
}
ul.facList li .Txt {
	position: absolute;
	z-index: 10;
	top: 20%;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(38,35,36,0.80);
	transition: 0.9s;
	opacity: 0;
}
ul.facList li .item:before{
	content: "";
	z-index: 15;
	display: block;
	position: absolute;
	top: -80px;
	left: -80px;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 80px 80px 0 0;
	border-color: #b59e74 transparent transparent transparent;
	transition: 0.9s;
}
ul.facList li:hover .item:before{
	top: 0;
	left: 0;
	transition: 0.9s;
}
ul.facList li .item:after{
	z-index: 20;
	color: #fff;
	content: "\f06e";
	font-family: fontAwesome;
	text-align: center;
	display: block;
	position: absolute;
	top: -80px;
	left: -80px;
	width: 50px;
	height: 50px;
	line-height: 50px;
	transition: 0.9s;
}
ul.facList li:hover .item:after{
	transition: 0.9s;
	top: 0;
	left: 0;
}
ul.facList li:hover .Txt{top: 0;
transition: 0.9s;
opacity: 1;}
ul.facList li .Txt a{
	letter-spacing: 8px;
	width: 70%;
	position:absolute;
	top: 50%;
	left: 15%;
	transform: translateY(-50%);
	display: block;
	color: #fff;
	text-align: center;
	font-size: 21px;
}
ul.facList li .Txt a strong{
	letter-spacing: 3px;
	font-size: 27px;
	font-weight: normal;
	padding: 15px 0;
	margin: 0 0 15px 0;
	display: block;
	border-bottom: 1px solid #837876;
	font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif";	
}
ul.facList li .Img {
	position:relative;
	z-index: 1;
}
ul.facList li .Img img{
	width: 100%;
	display: block;
}
		
/******內頁******/
.contentBox{}
.contentBox h4{
	color: #b59e74;
	display: inline-block;
	font-size: 15px;
	padding:5px 30px 10px 10px;
	border-bottom: 1px solid #b59e74;
	margin-bottom: 10px;
	position:relative;
}
.contentBox h4:after{
	content: "";
	display: block;
	width: 1px;
	height: 15px;
	background:#b59e74;
	transform: rotate(-25deg);
	position:absolute;
	right: 3px;
	bottom: -1px;
}
.contentBox .Img{}

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



@media (max-width: 1023px){
.contentBox .leftBox{
	padding:0;
	border-right: none;
float:none;}

.contentBox .rightBox{
	float: none;
	padding:0;}
}


/*640*/
@media (max-width: 640px){
	ul.facList li .Txt {
	padding:30px 30px 50px 30px;
    position: relative;
    top: auto;
    left: auto;
	margin: 0;
    width: 100%;
    height: auto;
    background-color: rgba(38,35,36,0.0);
    transition: 0.9s;
    opacity: 1;
}
	ul.facList li .Txt a {
    width: 100%;
    position: relative;
    top: auto;
    left: auto;
    transform: translateY(0%);
    display: block;
    color: #000;
    text-align: center;
    font-size: 18px;
}
}

/*480*/
@media (max-width: 480px){}
/*480 end*/