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

.contentBox .leftBox{
	padding:0 50px 0 0;}

.contentBox .rightBox{
	padding:0;}

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

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

ul.facList li{
	padding:0 15px 30px 15px;}

ul.facList li .item{
}
ul.facList li .Img{
	position:relative;
	overflow:hidden;
	background:#000;
	-webkit-box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.15);
	box-shadow: 1px 1px 2px 1px rgba(0,0,0,0.15);}


ul.facList li .Img img.homeRtl{
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
	position:absolute;
	top:-5px;
	left:-5px;
	opacity:0;
	z-index:99;}
ul.facList li .Img img.homeRtr{
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
	position:absolute;
	top:-5px;
	right:-5px;
	opacity:0;
	z-index:99;}
ul.facList li .Img img.homeRdl{
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
	position:absolute;
	bottom:-5px;
	left:-5px;
	opacity:0;
	z-index:99;}
ul.facList li .Img img.homeRdr{
	-webkit-transition: all 0.4s ease;
	-moz-transition: all 0.4s ease;
	-o-transition: all 0.4s ease;
	transition: all 0.4s ease;
	position:absolute;
	bottom:-5px;
	right:-5px;
	opacity:0;
	z-index:99;}


ul.facList li:hover .Img img.homeRtl{
	top:0;
	left:0;
	opacity:1;}
ul.facList li:hover .Img img.homeRtr{
	top:0;
	right:0;
	opacity:1;}
ul.facList li:hover .Img img.homeRdl{
	bottom:0;
	left:0;
	opacity:1;}
ul.facList li:hover .Img img.homeRdr{
	bottom:0;
	right:0;
	opacity:1;}


ul.facList li .Img a{
	position:relative;
	display:block;
	width:100%;
}

ul.facList li .Img a:before{
	content:"";
	display:block;
	position:absolute;
	top:0;
	right:0;
	left:0;
	bottom:0;
	border:1px solid #9f811b;
	z-index:80;
	opacity:0;
	-webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;}

ul.facList li:hover .Img a:before{
	border:2px solid #9f811b;
	opacity:1;}

ul.facList li .Img a:after {
    font-family: 'Cookie', cursive;
    font-size: 35px;
    content: "Detail";
    display: block;
    top: 50%;
    left: 50%;
    width: 80px;
    margin-left: -40px;
    margin-top: 0px;
    text-align: center;
    position: absolute;
    color: #9f811b;
    opacity: 0;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
    z-index: 100;
}

ul.facList li:hover .Img a:after{
	margin-top:-20px;
	opacity:1;
}

ul.facList li .Img a img{
	position:relative;
	display:block;
	width:100%;
	-webkit-transition:all 0.4s ease;
	-moz-transition:all 0.4s ease;
	-o-transition:all 0.4s ease;
	transition:all 0.4s ease;}
ul.facList li:hover .Img a img{
	-webkit-filter: blur(3px); /* Chrome, Opera */
       -moz-filter: blur(3px);
        -ms-filter: blur(3px);    
            filter: blur(3px);
	opacity:0.3;}
ul.facList li .Txt{
	padding: 20px 15px;
	text-align:center;
	position:relative;
}

ul.facList li .Txt h3{
	color:#eee;}

ul.facList li .Txt h3 strong{
	font-weight:normal;
	line-height:25px;
	color: #707070;}
ul.facList li .Txt h3 strong a{
	display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
	font-size:20px;
    color: #707070;}

ul.facList li:hover .Txt h3 strong a{
	color:#9f811b;}

ul.facList li .Txt p{
	font-size: 14px;
    color: #707070;
    width: 100%;
	margin-top:20px;
    line-height: 20px;
    height: 40px;
    overflow: hidden;
    text-align: center;}
		


		
/******內頁******/
.contentBox{}

.contentBox .leftBox .Img{}

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

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

.contentBox .rightBox .link{
	margin-bottom:40px;}

.contentBox .rightBox .link a{
	display:inline-block;
	padding:10px 15px;
	
	font-size:16px;
	color:#FFF;
	box-shadow:2px 2px 2px #CCC;
	border-radius:3px;
	text-align:center;
	
	-webkit-transition:none;
	-moz-transition:none;
	-o-transition:none;
	transition:none;}

@media (max-width: 1023px){
.contentBox .leftBox{
		padding:0 0 30px 0;}
ul.side_album li {
	width: 15%;
}
}

/*640*/
@media (max-width: 640px){
	ul.side_album li {

	width: 33.33%;

}}

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