@charset "utf-8";
/* 共用區 */

*{
	margin:0; 
	padding:0;
	-webkit-box-sizing:border-box; /*safari & chrome*/
	-moz-box-sizing:border-box; /*firebox*/
	box-sizing:border-box; /*解除padding影響寬度關係*/
	}

html, body{
	-webkit-text-size-adjust: 100%;
	width:100%;
	height:100%;
	font-family:"微軟正黑體", Arial, Helvetica,sans-serif; 
	}
a{ text-decoration:none;}


/*圖片切換*/
.pic{
	width:100%;
	margin:0 auto;
	padding:0;
	text-align:center;}
	
.pic-m{
	width:0;
	height:0;
	overflow:hidden;}



	
/* 桌機版 */

/*nav*/
nav{padding: 10px 0;
	display:flex;justify-content: center;background: #006699;
	z-index:1;
	width:100%;
	position:fixed;  top: 0px;
}
nav ul{display:flex;
	justify-content: space-between;
width:900px;
	max-width:1500px;
	padding: 1% 0;
}
nav ul li a{font-size: 28px;
	font-weight: bold;
	color: #fff;text-decoration: none;position: relative;}

nav ul li a::after{content: '';background: #fff;height: 2px;width: 0;
	position: absolute;bottom:0;left: 51%;transition: all .5s;}

nav ul li i{color:#fff;animation: upDown 1s linear infinite;}
@keyframes upDown{
0%{transform: translateY(0px);}
25%{transform: translateY(-5px);}
75%{transform: translateY(5px);}
100%{transform: translateY(0px);}
}
nav ul li a:hover i{animation: none;}
nav ul li a:active::after{left: 0;width: 100%;}uto;}
nav ul a i{animation: none;}


.bnn2{  margin:0 auto; 

	display:flex;justify-content: center;background: #fff;
	z-index:1;
		width:100%;
position:fixed;	bottom: 0px;
}


.bnn2 ul{list-style:none; text-align:center	;display:flex;		width:100%;
	justify-content: space-between;
	

	max-width:1500px;

	
	
}
.bnn2 li{ width:22%; margin:1%;padding:1%; font-size:24px; font-weight:bold;
	color:#FFFFFF;display:inline-block; background-color:#036EB7;border-radius:30px;}
.bnn2 li a{display:block;color:#FFFFFF;text-decoration: none;position: relative;}
	

 .bnn2 ul li a::after{content: '';background: #fff;height: 2px;width: 0;
	left: 51%;transition: all .5s;
	 
content:'\f0a5';display: inline-block; font-family:"Font Awesome 5 Free";animation:slideR 1s linear infinite;}
@keyframes slideR{
 0%{transform: translateX(0);}
 50%{transform: translateX(10px);}
 100%{transform: translateX(0);}
}

.bnn3{ width:980px; margin:0 auto; padding:1%;}
.bnn3 ul{list-style:none; text-align:center}
.bnn3 li{ width:40%; margin:1%;padding:1%; font-size:24px; font-weight:bold; color:#FFFFFF;display:inline-block; background-color:#0093CD;border-radius:30px;}
.bnn3 li a{display:block;color:#FFFFFF;text-decoration:none;}
	  
.bnn3 a::after{content:'\f0a5';display: inline-block; font-family:"Font Awesome 5 Free";animation:slideR 1s linear infinite;}
@keyframes slideR{
 0%{transform: translateX(0);}
 50%{transform: translateX(10px);}
 100%{transform: translateX(0);}
}

.bnn4{ width:980px; margin:0 auto; padding:1%;}
.bnn4 ul{list-style:none; text-align:center}
.bnn4 li{ width:45%; margin:1%;padding:1%; font-size:24px; font-weight:bold; color:#FFFFFF;display:inline-block; background-color:#F5BC2C;border-radius:30px;}
.bnn4 li a{display:block;color:#FFFFFF;text-decoration:none;}
	  
.bnn4 a::after{content:'\f0a5';display: inline-block; font-family:"Font Awesome 5 Free";animation:slideR 1s linear infinite;}
@keyframes slideR{
 0%{transform: translateX(0);}
 50%{transform: translateX(10px);}
 100%{transform: translateX(0);}
}




/* 留單 */
.Stay{ width:100%; height:auto; background-color:#FFFFFF; text-align:center; margin:1% auto; font-size:1.5em; color:#003399; max-width:980px; padding:1%; }

	

	


/* 手機版 */
@media screen and ( max-width:767px ){
	
 	/*nav*/
.nav{width: 100%;
	z-index:1;
	padding:1% 0 1% 0;
	}
nav ul{width: 100%;
	margin: 0 auto;
	padding: 1% 0;
	justify-content: space-between;
	}
nav ul li a{font-size: 18px;text-decoration:none;
	vertical-align:middle;}	
nav{padding:1% 0;
	height: 60px;
	}
nav ul li{margin: 0 auto;
	text-align: center;
padding: 0 0 2% 0;text-decoration:none;
	margin:  0 auto;
	}

nav ul a i{animation: none;}	
		/*圖片切換*/
.pic{
	width:0;
	height:0;
	overflow:hidden;}
.pic-m{
	display:block;
	width:100%;
	height:auto;
	margin:0;}

.bnn2{ width:100%; margin:0 auto; padding:1%;	z-index:1;	height: 60px;position:fixed;	bottom: 0px;}
.bnn2 ul{list-style:none; text-align:center;
	width: 100%;margin: 0 auto;
	padding: 1% 0;
	justify-content: space-between;
	}
.bnn2 li{ width:24%; margin:1%;padding:1%; font-size:16px; font-weight:bold; color:#FFFFFF;display:inline-block; background-color:#036EB7;border-radius:15px;}
.bnn2 li a{display:block;color:#FFFFFF;text-decoration:none;}



.bnn3{ width:100%; margin:0 auto; padding:1%;}
.bnn3 ul{list-style:none; text-align:center}
.bnn3 li{ width:50%; margin:1%;padding:1%; font-size:15px; font-weight:bold; color:#FFFFFF;display:inline-block; background-color:#0093CD;border-radius:15px;}
.bnn3 li a{display:block;color:#FFFFFF;text-decoration:none;}

.bnn4{ width:100%; margin:0 auto; padding:1%;}
.bnn4 ul{list-style:none; text-align:center}
.bnn4 li{ width:45%; margin:1%;padding:1%; font-size:12px; font-weight:bold; color:#FFFFFF;display:inline-block; background-color:#F5BC2C;border-radius:15px;}
.bnn4 li a{display:block;color:#FFFFFF;text-decoration:none;}

/* 留單 */
.Stay{ width:100%; height:auto; background-color:#FFFFFF; text-align:center; margin:3px auto; font-size:16px; color:#003399; max-width:100%; }



}