@charset "utf-8";
/* CSS Document */
body {
  background-color: #F6EDDC;
}
a{
      outline: none; /* for Firefox Google Chrome  */
      behavior:expression(this.onFocus=this.blur()); /* for IE */
}

img {
	border: 0;
}

td img {display: block;}
body {
  margin-left: 0px;
  margin-top: 0px;
}

/*.style4 {
  font-size: 20px;
  color: #0000FF;
}*/


#index_r1_c1 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 69px;
	margin-bottom: 0;
	width: 1600px;
}
#index_r2_c1 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 46px;
	margin-bottom: 0;
	width: 68px;
}
#index_r2_c2 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 46px;
	margin-bottom: 0;
	width: 153px;
}
#index_r2_c3 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 46px;
	margin-bottom: 0;
	width: 20px;
}
#index_r2_c4 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 46px;
	margin-bottom: 0;
	width: 153px;
}
#index_r2_c5 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 46px;
	margin-bottom: 0;
	width: 20px;
}
#index_r2_c6 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 46px;
	margin-bottom: 0;
	width: 154px;
}
#index_r2_c7 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 46px;
	margin-bottom: 0;
	width: 20px;
}
#index_r2_c8 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 46px;
	margin-bottom: 0;
	width: 153px;
}
#index_r2_c9 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 46px;
	margin-bottom: 0;
	width: 20px;
}
#index_r2_c10 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 46px;
	margin-bottom: 0;
	width: 153px;
}
#index_r2_c11 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 46px;
	margin-bottom: 0;
	width: 20px;
}
#index_r2_c12 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 46px;
	margin-bottom: 0;
	width: 154px;
}
#index_r2_c13 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 46px;
	margin-bottom: 0;
	width: 19px;
}
#index_r2_c14 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 46px;
	margin-bottom: 0;
	width: 120px;
}
#index_r2_c15 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 46px;
	margin-bottom: 0;
	width: 21px;
}
#index_r2_c16 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 46px;
	margin-bottom: 0;
	width: 289px;
}
#index_r2_c17 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 46px;
	margin-bottom: 0;
	width: 63px;
}
#index_r3_c1 {
	margin-left: 0px;
	margin-top: 0px;
	display: inline;
	float: left;
	height: 74px;
	margin-bottom: 0;
	width: 1600px;
}

.contact-email {
	width : 100px;
	z-index: 100;
	position: fixed; 
	right: 0px; 
	top: 18%;
}


.slider_container {
    margin: 0px auto;
    width: 1600px;
    height: 701px;
    position: relative;
    border: 0px;       
}
.slider_container div {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    filter: alpha(opacity=0);
}
.slider_container div {
    -webkit-animation: round 25s linear infinite;
            animation: round 25s linear infinite;
}

@-webkit-keyframes round {
    4% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 0 - 1秒 淡入*/
    }
    20% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 1- 5秒靜止*/
    }
    24% {
        opacity: 0;
        filter: alpha(opacity=0);
        /* 5-6秒淡出*/
    }
}
@keyframes round {
    4% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 0 - 1秒 淡入*/
    }
    20% {
        opacity: 1;
        filter: alpha(opacity=100);
        /* 1- 5秒靜止*/
    }
    24% {
        opacity: 0;
        filter: alpha(opacity=0);
        /* 5-6秒淡出*/
    }
}
.slider_container div:nth-child(5) {
    -webkit-animation-delay: 0s;
            animation-delay: 0s;
}

.slider_container div:nth-child(4) {
    -webkit-animation-delay: 5s;
            animation-delay: 5s;
}

.slider_container div:nth-child(3) {
    -webkit-animation-delay: 10s;
            animation-delay: 10s;
}

.slider_container div:nth-child(2) {
    -webkit-animation-delay: 15s;
            animation-delay: 15s;
}

.slider_container div:nth-child(1) {
    -webkit-animation-delay: 20s;
            animation-delay: 20s;
}
/* Thumbnails */

	.thumbnails {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-flex-direction: row;
		-webkit-flex-direction: row;
		-ms-flex-direction: row;
		flex-direction: row;
		position: relative;
		margin: 0 0 2em -2em;
	}

		.thumbnails a {
			-moz-transition: all 0.2s ease;
			-webkit-transition: all 0.2s ease;
			-ms-transition: all 0.2s ease;
			transition: all 0.2s ease;
			border-bottom: none;
			display: block;
			width: 100%;
			margin: 0 0 2em 0;
			text-align: center;
			border-radius: 4px;
			box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25);
			background-color: rgba(255, 255, 255, 0.075);
			cursor: pointer;
			outline: 0;
			overflow: hidden;
		}

			.thumbnails a img {
				display: block;
				width: 100%;
				border-top-left-radius: 4px;
				border-top-right-radius: 4px;
			}

			.thumbnails a h3 {
				margin: 1em;
			}

			.thumbnails a:hover {
				background-color: rgba(255, 255, 255, 0.25);
				box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.25), 0 0 0.5em 0 #FF6382;
			}
				.thumbnails > div {
			display: -moz-flex;
			display: -webkit-flex;
			display: -ms-flex;
			display: flex;
			-moz-flex-direction: column;
			-webkit-flex-direction: column;
			-ms-flex-direction: column;
			flex-direction: column;
			width: calc(100% / 4);
			padding-left: 2em;
		}
			.thumbnails > div > :last-child {
				margin-bottom: 0;
			}

		@media screen and (max-width: 1600px) {

			.thumbnails {
				margin: 0 0 2em -1.5em;
			}

				.thumbnails a {
					margin: 0 0 1.5em 0;
				}

				.thumbnails > div {
					padding-left: 1.5em;
				}

		}

		@media screen and (max-width: 980px) {

			.thumbnails h3 {
				font-size: 0.8em;
			}

		}

		@media screen and (max-width: 480px) {

			.thumbnails {
				display: block;
			}

				.thumbnails a {
					margin: 0 0 2em 0 !important;
				}

				.thumbnails > div {
					display: block;
					width: 100%;
				}

					.thumbnails > div:last-child > :last-child {
						margin-bottom: 0 !important;
					}

				.thumbnails h3 {
					font-size: 1em;
				}

		}

/*以下這坨為網頁CSS相簿幻燈片*/
.gallery-wrapper{ display: block; list-style: none; width: 1170px; margin: 3em 0 2em 7.5em; padding: 10px; background-color: rgba(0,0,0,0); position: absolute;} 
.gallery-wrapper li{ display: block; float: left; list-style: none; width: calc(100% / 5); height: 144px; padding: 10px; margin: 0 0 3em; } 
.gallery-wrapper a{ display: block; width: 100%; overflow: hidden; margin: 0 0 2em 0; cursor: pointer; border-radius: 5px 5px 5px 5px;} 
.gallery-wrapper img{ display: block; width: 100%; object-fit: cover; background-color: #eee; transition: .5s; border-radius: 5px 5px 5px 5px; } 
.gallery-wrapper a:hover img{ transform: scale(1.1); } 
.hidden-images-wrapper > div{ position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,1); opacity: 0; transition: .6s; pointer-events: none; z-index:1;} 
.hidden-images-wrapper > div:target{ opacity: 1; pointer-events: auto; } 
.hidden-images-wrapper img{ display: block; position: absolute; z-index: 3; top: 0; right: 0; bottom: 0; left: 0; width: 640px; height: 480px; max-width: 90%; max-height: 90%; margin: auto; padding: 0px; background-color: #fff; border-radius: 5px; object-fit: contain; transition: .7s; transform: translateY(-30px); } 
.hidden-images-wrapper div:target img{ transform: translateY(0); } 
.img-prev, .img-next{ display: block; position: absolute; z-index: 4; top: 0; bottom: 0; height: 50px; margin: auto 0; padding: 0 20px; color: #333; font-size: 16px; line-height: 50px; text-decoration: none; background-color: #fff; } 
.img-prev:hover, .img-next:hover{ background-color: #eee; } 
.img-prev{ left: 0px; border-radius: 0 5px 5px 0; } 
.img-next{ right: 0px; border-radius: 5px 0 0 5px; } 
.img-close{ position: absolute; z-index: 2; top: 0; right: 0; bottom: 0; left: 0; cursor: default; }
/*以上這坨為網頁CSS相簿幻燈片*/



/*----------------------------------------------------------------------*/

/*以下是控制csr圖片highlight*/
.ori-img {
    position: relative;
    /*left: 10%;*/
    width: auto;
    height: auto;
    /*border: 1px solid black;*/
    /*margin: 0px 10px 0px 10px;*/
    overflow: hidden;
    /*background-color:#F6EDDC;*/
}
.high-img {
    transition: opacity 1s ease;
    width: 100%;
    height: 100%;
    
}
.ori-img:hover .high-img, .ori-img:focus .higt-img {
    -moz-opacity:0.4;
    filter:alpha(opacity=40); /*  IE8 及更早的版本 */  
    opacity: 0.4;
    -webkit-border-radius: 2px;
    -moz-border-radius: 2px;
    border-radius: 2px;  
    /*background-color:#FFFFF;*/
}
/*--------------------------------------------------------------------------------------------------*/

.toTop-arrow {
	width: 5rem;
	height: 5rem;
	padding: 0;
	margin: 0;
	border: 0;
	border-radius: 33%;
	opacity: 0.6;
	background: #808080;
	cursor: pointer;
	position:fixed;
	right: 0.3rem;
	bottom: 1rem;
	display: none;
}
.toTop-arrow::before , .toTop-arrow::after  {
	width: 47px;
	height: 8px;
	border-radius: 3px;
	background: #FFFFFF;
	position: absolute;
	content: "";
}
.toTop-arrow::before {
	transform: rotate(-45deg) translate(0, -50%);
	left: 5px;
}
.toTop-arrow::after {
	transform: rotate(45deg) translate(0, -50%);
	right: 5px;
}

.toTop-arrow:focus {outline: none;}