@charset "UTF-8";

body{
		min-width:375px;
    font-family:'Roboto', sans-serif,'微軟正黑體';
}
a{	color:inherit; text-decoration: none; }

li{
	list-style-type: none;
}

/* 整體容器/顯示區域,圖片容器/圖片 */
.slideshow{
	position:relative;
	background-color: black;
	width:100%;
	height:768px;
  margin:0 auto;	
  overflow: hidden;	
}
.slideshow-slides{
	position:absolute;
	width: 100%;
	height:100%;
}
.slideshow-slides .slide{
	position:absolute;
	width: 100%;
	height:100%;
}
.slideshow-slides .slide img{
	position:absolute;
	margin-left:-640px;	
	left:50%;
	cursor:default;	
}
/* 指標 */
.slideshow-indicator {
	position:absolute;
	height:16px;
	bottom:5px;
	left:0;
	right:0;
	text-align:center;
	z-index: 100;
}
.slideshow-indicator a {
	overflow:hidden;
	display:inline-block;
	width:16px;
	height:16px;
}
.slideshow-indicator a:before{
	content:url(../img/icon.png);
	margin-left:-110px;
    display: inline-block;	
}
.slideshow-indicator a.active:before{
	margin-left:-130px;
}
.slideshow-indicator a.active {
    cursor: default;
}
/* 瀏灠功能(prev/next) */
.slideshow-nav a{
	position:absolute;
	display:inline-block;
	width:72px;
	height: 72px;
	left:50%;
	top:50%;	
	margin-top:-36px;		
	overflow: hidden;
}
.slideshow-nav a:before{
	content: url('../img/icon.png');
	display: inline-block;			
}		
.slideshow-nav a.prev {
	margin-left: -772px;
}
.slideshow-nav a.prev:before {
	margin-top: -20px;
}				
.slideshow-nav a.next {
	margin-left: 700px;
}
.slideshow-nav a.next:before {
	margin-top: -20px;
	margin-left: -80px;			
}
/* dock */
.dock{
	position: relative;
	display: flex;
	width:350px;
	margin:20px auto;
	margin-bottom: 30px;
}
.dock > ul {
	width:100%;
	display: flex;
	justify-content: center;
	padding:0;
}		
.dock > ul > li a{
	position: relative;
	margin:20px 20px;
	font-size: 40px;
	color:#f1b400;
	text-align: center;
	border:1px solid #f1b400;
	padding:5px;
	font-weight: 300;
	transition: all 0.3s;
}



/* laptop */
@media (max-width: 1440px) {
  body {
    width:1440px;
    margin:0 auto;
    overflow: hidden;
  }
  .slideshow{
  	width:1440px;
  	height:675px;
  }
	.slideshow-slides .slide img{
		width:1200px;
		height:675px;
		margin-left:-600px;
	}
	 .slideshow-nav a.prev {
		margin-left: -682px;
	}		
	.slideshow-nav a.next {
		margin-left: 610px;
	}
}

/* ipad pro */
@media (max-width: 1024px) {
  body {
  	width:1024px;
    margin:0 auto;
    overflow: hidden;
  }
  .slideshow{
  	width:1024px;
  	height:520px;
  	background-color: #676767;
  }
	.slideshow-slides .slide img{
		width:880px;
		height:483px;
		margin-left:-440px;
	}
	 .slideshow-nav a.prev {
		margin-left: -511px;
	}		
	.slideshow-nav a.next {
		margin-left: 441px;
	}
}

/* smart phone - horizontal */
@media (max-width: 815px) {
  body {
  	width:815px;
  	margin:0 auto;
	  overflow: hidden;  	
  }
  .slideshow{
  	width:815px;
  	height:338px;
  }
	.slideshow-slides .slide img{
		width:600px;
		height:338px;
		margin-left:-300px;
	}
	 .slideshow-nav a.prev {
		margin-left: -372px;
	}		
	.slideshow-nav a.next {
		margin-left: 300px;
	}
}
/* ipad */
@media (max-width: 768px) {
  body {
  	width:768px; 	
  }
  .slideshow{
  	width:768px;
  	height:450px;
  }
	.slideshow-slides .slide img{
		width:600px;
		height:432px;
		margin-left:-300px;
	}
	 .slideshow-nav a.prev {
		margin-left: -372px;
	}		
	.slideshow-nav a.next {
		margin-left: 300px;
	}
}

/* smart phone - vertical */
@media (max-width: 375px) {
body{
	width:375px;
	margin:0;
}
.slideshow{
	width:360px;
	height:230px;
}
.slideshow-slides .slide img{
	width:360px;
	height:200px;
	margin-left:-180px;
}
.slideshow-nav a.prev {
	margin-left: -172px;
}		
.slideshow-nav a.next {
	margin-left: 100px;
}
}