/*--------main-------*/


/*--------gallery----*/
	.gallery select{
		width: 250px;
	}
	.gallery_title{
		position: relative;
		border-bottom: 1px solid #D0AB3F;
		padding-bottom: 20px;
		margin-bottom: 30px;
	}
	.gallery_title:before{
		content: "";
		position: absolute;
		width: 100px;
		height: 3px;
		background-color: #D0AB3F;
		left: 0;
		right: 0;
		bottom: -2px;
		margin: auto;
	}

	.gallery_row{
		margin-top: 50px;
	}
	.gallery_row .col_25{
		padding: 15px 10px;
	}
	.gallery_box{
		display: block;
	}
	.gallery_box:hover .gallery_img{
	    box-shadow: 0px 0px 7px rgba(0,0,0,.4);
	    background-size: 105%;
	}
	.gallery_img{
		background-size: 100%;
		background-position: center;
		background-repeat: no-repeat;
		/*border: 1px solid #ddd;*/
		width: 100%;
		height: 0;
		padding-top: 65%;
		-webkit-transform: translate3d(0, 0, 0);
		-webkit-backface-visibility: hidden;
		-webkit-perspective: 1000;
		-webkit-transition: all .2s ease;
		   -moz-transition: all .2s ease;
		    -ms-transition: all .2s ease;
		     -o-transition: all .2s ease;
		        transition: all .2s ease;
	}
	.gallery_text p{
		margin-bottom: -3px;
	}
	.gallery_text small{
		display: block;
		font-size: .9rem;
		opacity: .7;
	}
	.gallery_text{
		position: relative;
	}
	.gallery_text span{
		position: absolute;
		top: -8px;
		left: 15px;
		border-color: #D0AB3F transparent transparent  transparent ;
	    border-style: solid solid solid solid;
	    border-width: 8px;
	 
	    /* 設定 width、height 可更好理解原理 */
	    height: 0px;
	    width: 0px;
	}

/*--------gallery_info----*/
	.gallery_info{
		padding-top: 200px;
	}
	.info_head,
	.introduction{
		padding-bottom: 20px;
		border-bottom: 1px solid #ddd;
		margin-bottom: 50px;
	}
	.introduction{
		
	}

	.introduction h2{
		line-height: .8rem;
	}
	.introduction p{
		opacity: .6;
	}
	.introduction_text{
		margin-top: 30px;
	}
	.introduction_text p{
		opacity: 1;
	}
	.info_img .col_25{
		position: relative;
		padding: 12px;
	}

	.work_photo{
		background-size: cover;
		background-position: center;
		position: relative;
		height: 0;
		padding-top: 100%;
		cursor: pointer;
		-webkit-transition: all .3s ease;
		   -moz-transition: all .3s ease;
		    -ms-transition: all .3s ease;
		     -o-transition: all .3s ease;
		        transition: all .3s ease;
	}
	.work_photo:hover{
		    box-shadow: 0px 0px 7px rgba(0,0,0,.3);
	}
	.info_img .magnifie{
		position: absolute;
		bottom: 15px;
		right: 15px;
		opacity: 0;
		-webkit-transition: all .3s ease;
		   -moz-transition: all .3s ease;
		    -ms-transition: all .3s ease;
		     -o-transition: all .3s ease;
		        transition: all .3s ease;
	}
	.photo_lightbox{
		position: fixed;
		background-color: #fff;
	    width: 80%;
	    height: 90vh;
	    top: 5vh;
	    max-width: 1300px;
	    z-index: 10;
	    left: 0;
	    right: 0;
	    margin: auto;
	    padding: 70px 15px;
	    box-shadow: 0px 0px 7px rgba(0,0,0,.25); 
	    display: none;
	    overflow: hidden;
		z-index: 11;
	}
	.photo_lightbox.active{
		display: block;
	}
	.close_photo{
		position: absolute;
		width: 40px;
		height: 40px;
		/*border: 1px solid #ddd;*/
		top: 30px;
		right: 40px;
		cursor: pointer;
	}
	.close_photo span{
		position: absolute;
		width: 100%;
		height: 2px;
		margin-top: 18px;
		background-color: #D0AB3F;
		-moz-transform:rotate(45deg);
		-webkit-transform:rotate(45deg);
		-o-transform:rotate(45deg);
		-ms-transform:rotate(45deg);
		transform:rotate(45deg);
		-webkit-transition: all .3s ease;
		   -moz-transition: all .3s ease;
		    -ms-transition: all .3s ease;
		     -o-transition: all .3s ease;
		        transition: all .3s ease;
	}
	.close_photo span:before{
		content: "";
		position: absolute;
		width: 100%;
		height: 2px;
		background-color: #D0AB3F;
		background-color: #D0AB3F;
		-moz-transform:rotate(90deg);
		-webkit-transform:rotate(90deg);
		-o-transform:rotate(90deg);
		-ms-transform:rotate(90deg);
		transform:rotate(90deg);
		-webkit-transition: all .3s ease;
		   -moz-transition: all .3s ease;
		    -ms-transition: all .3s ease;
		     -o-transition: all .3s ease;
		        transition: all .3s ease;
	}
	.close_photo:hover span,
	.close_photo:hover span:before{
		background-color: #ba630a;
	}
	@keyframes owl_photo {
	    from{
	    	opacity: 0
	    }
	    to{
	    	opacity: 1;
	    }
	}
	@keyframes photo_lightbox {
	    from{
	    	opacity: 0;
	    	-moz-transform:scale(.9);
			-webkit-transform:scale(.9);
			-o-transform:scale(.9);
			-ms-transform:scale(.9);
			transform:scale(.9);
	    }
	    to{
	    	opacity: 1;
	    	-moz-transform:scale(1);
			-webkit-transform:scale(1);
			-o-transform:scale(1);
			-ms-transform:scale(1);
			transform:scale(1);
	    }
	}
	.photo_lightbox{
		animation: photo_lightbox .5s;
	}
	
	.owl_photo{
		position: absolute;
		width: 90%;
		height: 80%;
		top: 10%;
		left: 5%;
		/*overflow: hidden;*/
	}
	.owl_photo .item{
		position: relative;
		height: 71vh;
	}
	.owl_photo .item img{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		width: auto;
		height: auto;
		max-width: 100%;
		max-height: 100%;
	}
	.close_photo_bg{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,.5);
		z-index: 10;
		display: none;
		animation: owl_photo .5s;
	}

	.close_photo_bg.active{
		display: block;
	}
	.owl_photo{
		text-align: center;
	}
	.owl_photo .owl-dots {
		margin-top: 20px;
		display: inline-block;
	}
	.owl_photo .owl-theme .owl-dots .owl-dot span{
		width: 8px;
		height: 8px;
		margin: 0 5px;
		cursor: pointer;
	}
	.owl_photo .owl-theme .owl-dots .owl-dot.active span{
		background-color: #666;
	}
	.owl-nav .owl-prev,
	.owl-nav .owl-next{
		position: absolute;
		top: 45%;
		width: 40px;
		height: 40px;
		/*border: 1px solid #ddd;*/
		background-size: cover;
		background-position: center;
		cursor: pointer;
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}
	.owl-nav .owl-prev{
		left: -40px;
		background-image: url(../img/next_page-01.jpg);
	}
	.owl-nav .owl-next{
		right: -40px;
		background-image: url(../img/next_page-02.jpg);
	}
	.owl-nav .owl-prev:hover{
		background-image: url(../img/next_page-03.jpg);
	}
	.owl-nav .owl-next:hover{
		background-image: url(../img/next_page-04.jpg);
	}
	#info_img{
		text-align: left;
	}
	#info_img .col_25{
		position: relative;
		width: 23.5%;
		margin: .5% .4%;
		height: 0;
		padding-top: 23.5%;
		overflow: hidden;
		/*border: 1px solid #ccc;*/
		-webkit-transition: all .25s ease;
		   -moz-transition: all .25s ease;
		    -ms-transition: all .25s ease;
		     -o-transition: all .25s ease;
		        transition: all .25s ease;
	}
	#info_img .col_25:hover{
		box-shadow: 0px 0px 5px rgba(0,0,0,.3);
	}
	#info_img .col_25 img{
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		margin: auto;
		width: 100%;
		min-height: 100%;
		min-width: 100%;
		cursor: pointer;
	}
	.viewer-flip-vertical{
		display: none;
	}
	.viewer-toolbar li{
		margin: 0 4px;
		width: 30px;
		height: 30px;
	}
	.viewer-toolbar li:before {
	    margin: 5px;
	}
	.viewer-toolbar .viewer-large {
	    height: 30px;
	    margin-bottom: 0;
	    margin-top: 0;
	    width: 30px;
	}
	.viewer-navbar {
	    padding: 10px 0;
	}
	.viewer-toolbar ul{
		padding:5px 0 10px; 
	}
/*---------RWD--------------*/

    @media (max-width:1023px) {
		.photo_lightbox{
			width: 90%
		}
		.info_img .col_25{
			width: 33.33%;
		}
		
     }
    @media (max-width:768px) {
    	.photo_lightbox.active,
    	.close_photo_bg.active{
			display: none;
		}
		.info_img .col_25{
			width: 100%;
			margin-left: 0;
		}
		.gallery_row .col_25{
			width: 50%;
		}
		#info_img .col_25{
			width: 47%;
			margin: 1% .6%;
			padding-top: 47%;
		}

    }
    @media (max-width:620px) {

    }
    @media (max-width:480px) {
       .gallery_row .col_25{
			width: 100%;
		}
    }
    @media (max-width:420px) {
		#info_img .col_25{
			width: 100%;
			margin: 1.5% 0;
			padding-top: 100%;
		}
    }