@charset "UTF-8";
/* CSS Document */
/*主選單*/
#header ul li a.herenow{color:#608ff7;}


.photo_4xn{ display:block; margin:0; width:76%; padding:30px 12%;list-style-type:none; position:relative; text-align:center}
.photo_4xn li{ display: block; float:left;margin:2.5%; padding:0;width:27%;height:auto;overflow:hidden;box-shadow: 0px 0px 9px rgba(0, 0, 0, 0.7);}
.photo_4xn li img{display:block;width:100%;height:auto;}
.photo_4xn li:hover{transform:scale(0.98,0.98);transition:0.2s ease-in-out;}

.photo_4xn li:hover .albunname{ display:block;}
.albunname{ display:none; position:absolute; width:100%;text-align:center; line-height:30%; z-index:992; color:#fff; margin:0; padding-top:38%;font-family: 'Hind Vadodara',"Microsoft JhengHei", sans-serif; font-size:14px; letter-spacing:1.5px; font-weight:lighter;}

.zoomin li:hover{cursor:pointer;}
.zoomin li:hover img{ opacity:0.3;transition:0s linear; filter:saturate(10%) blur(4px);}
.zoomin li:hover:before{ content:url(../images/icon/zoom-01.png); float:left; position:absolute; top:35%;left:45%;}
.zoomin li:hover:after{ 
content:'';float:left; position:absolute;background: linear-gradient(to left,rgba(85,67,70,1),rgba(69,80,91,1))!important;left:0;top:0; z-index:-1;height:100%; width:100%;}


.photographerlist {display:block; margin:0px; padding:30px 12%;list-style-type:none; position:relative; text-align:center}
.photographerlist ul{width:80%;}
.photographerlist li{ display: inline-block; float:left;margin:1%; width:29%;overflow:hidden; background-color:#f3f3f3}
.photographerlist li:hover{background:#e3e3e3;left:0;top:0; z-index:-1;color:#fff;}
.photographerlist li:hover h3{ visibility:hidden;transition : all 0.1s linear;}
.photographerlist li:hover p{ visibility:hidden;transition : all 0.1s linear;}
.photographerlist li a{margin:0;
	letter-spacing:2px; display:block;text-decoration:none;
	 text-align:left;color:#000;}
.photographerlist li p{margin:60px 0 0 8%;font-family: 'Hind Vadodara',"Microsoft JhengHei", sans-serif;font-size:14px;font-weight:lighter;}
.photographerlist li h3{ margin:-10px 0 20px 8%;font-family: 'Lato', sans-serif; font-weight:700;font-style: normal;font-size:30px;line-height:30px;}


/*線動畫*/
.photographerlist li *{  
-webkit-transition : all 0.3s linear;
-moz-transition : all 0.3s linear;
-ms-transition : all 0.3s linear;
-o-transition : all 0.3s linear;
transition : all 0.3s linear;
}
.chinesename { color: rgba(0,0,0,0);display:block; position: relative; float:none; text-align:left;margin:0 0 0 8%; top:130px;
font-family: 'Hind Vadodara',"Microsoft JhengHei", sans-serif;font-size:28px;letter-spacing:30px;transform:translateY(15px)}
.photographerlist li:hover .chinesename {color: rgba(0,0,0,1);transform:translateY(0px)}
/*線動畫*/

.albumlist {display:block; margin:0px; padding:30px 12%;list-style-type:none; position:relative; text-align:center}
.albumlist ul{width:80%;}
.albumlist li{display: block;position:relative; float:left;margin:1%; width:31%;overflow:hidden; background-color:#f3f3f3; text-align:center}
.albumlist li:hover{background:#e3e3e3;left:0;top:0; color:#000;}
.albumlist li:hover h3{color:#000;}
.albumlist li:hover p{ color:#000;}
.albumlist li a{ margin:0;letter-spacing:2px; display:block;text-decoration:none;text-align:left;color:#000;}
.albumlist li p{margin:60px 0 0 8%;font-family: 'Hind Vadodara',"Microsoft JhengHei", sans-serif;font-size:14px;font-weight:lighter;}
.albumlist li h3{margin:-10px 0 20px 8%;font-family: 'Lato', sans-serif; font-weight:700;font-style: normal;font-size:30px;line-height:30px;}
.albumlist li img{display:block;float:left;width:100%;height:auto;}

@media screen and (max-width:768px){
	.photo_4xn{display:block; width:98%;margin:2% 1%; padding:0;list-style-type:none; position:relative;}
	.photo_4xn li{ display: inline-block; float:left;margin:0 0 1% 0;width:100%; height:auto; overflow:auto;box-shadow: 0px 0px 0px rgba(0, 0, 0, 0);}
	.photographerlist li{width:100%;}
	
	.albumlist li{width:100%;}
	.albumlist li h3 { font-size:20px; overflow: visible;}
	
	
}