/* == 共用區 ============================================================================= */

*{
	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%;/*避免ios用戶字體自動放大*/
	font-family:'微軟正黑體', Arial, Helvetica, sans-serif;
	width:100%;
	height:100%;
    background-attachment: fixed;
    background-image:url("../images/s-01.png");
	background-repeat:no-repeat;

	background-position: center top;
	}


ul{ list-style:none;}
li{ list-style:none;}


.content{
	width:100%;
	margin:0 auto;
	padding:0;
	text-align:center;}


.content img{
    max-width:1000px;}

	
ul{ list-style:none; }
.maxw img{max-width:980px;}
.Stay{ width:100%; height:auto; background-color:#FFFFFF; text-align:center; margin:3px auto; font-size:1.5em; color:#003399; max-width:980px; }
.texthidden{
	display:block; /*轉換為塊級元素*/
	height:0; 
	width:0; 
	overflow:hidden;
	}/*隱藏文字，切勿使用display:none;*/

table{
	max-width:1200px;
	text-align: center;}

.TOP-WEB {
	text-decoration:none;
    color:  #FF3;
    font-size: 25px;
    text-align:center;
    background-color:#000;
}
.add {
	font-size: 16px;
	color: #FF9;
	background-color: #000;
    text-align: center;
}
.add2 {
	font-size: 15px;
	color: #FFF;
	background-color: #000;
    text-align: center;
}
.add3 {
	font-size: 20px;
	color: #FF3;
	text-decoration: blink;
	background-color: #000;
    text-align: center;
}

.Stay{  
	text-align:center; 
	margin:0 auto;
	padding:2% auto;
	font-size: 30px;
}

.footer {
	font-family: "微軟正黑體";
	font-size: 16px;
	color: #FF9;
	background-color: #000;
	text-align:center;
    padding:0 auto;
	margin:0 auto;
}
.footer2 {
	font-family: "微軟正黑體";
	font-size: 15px;
	color: #FFF;
	background-color: #000;
    text-align:center; 
}
.footer3 {
	font-family: "微軟正黑體";
	font-size: 20px;
	color: #FF3;
	text-decoration: blink;
	background-color: #000;
    text-align:center; 
}

.red{ color: #C00E11; font-size:36px; 
    font-weight:bold;}
.red2{ color: #C00E11;font-weight:bold;}
.yel{ color: #C9BC9C; font-size:30px; 
    font-weight:bold;}
.mark{ color: #C00E11; font-size:24px; 
    font-weight:bold;}
.gr{ color: #47AC93; font-size:28px; 
    font-weight:bold;}
.text-orange{color:#eb7624;font-size:24px;font-weight:bold;}
.pale-orange,.hover-pale-orange:hover{color:#5F5479!important;background-color:#FCF2E9!important}
.black{ color: #000; font-size:24px; }




/* == 桌機版 ============================================================================= */

/*按鈕*/
.btn{ 
    padding:1% 0; 
	width:100%;

	text-align:center;position: fixed;z-index:900; 
    background-color:rgba(255,255,255,0.77);
	}
	
.btn ul{
	margin:0 auto; 
	list-style:none;
	}
.btn li{ 
    display:inline-block; width:45%;
	margin:1%; 
	padding:0; 
	 
	}
.btn li a{
	display:block; 
	border-radius:6px; -webkit-border-radius:6px; 
	background:


background: -webkit-linear-gradient(90deg, rgb(216, 18, 63), rgb(158, 63, 232));
background: linear-gradient(90deg, rgb(216, 18, 63), rgb(158, 63, 232));


    font-size:2em; 
	line-height:60px; 
	text-decoration:none; 
	color:#fff;
	transition:0.5s;
	}
.btn li a:hover{ 
    transform:translate(0,5px);
    box-shadow:1px 1px 15px rgba(20%,20%,40%,0.5);
	}


/*選單*/
.menu{ 
    padding:2% 0 0 0; 
	width:100%;
    background-color:rgba(239,237,223,0.8);
	text-align:center;
    position:fixed;
	top:0;
	z-index:1;
	}
.menu h2{
    font-size:1.8em; 
	line-height:1.6;
	color:#000;
	}
.menu ul{
	margin:0 auto; 
	width:1200px; 
	list-style:none;
	}
.menu li{ 
    display:inline-block; 
	margin:4px; 
	padding:0; 
	width:30%; 
	}
.menu li a{
	display:block; 
	border-radius:6px; -webkit-border-radius:6px; 
	background:#C30D23;
    font-size:2em; 
	line-height:60px; 
	text-decoration:none; 
	color:#FFFFFF;
	transition:0.5s;
	}
.menu li a:hover{ 
    transform:translate(0,5px);
    box-shadow:1px 1px 15px rgba(20%,20%,40%,0.5);
	}



/*各班連結*/
.link{ 
    padding:0 0 3% 0; 
	width:100%;
	text-align:center;  
	}
.link h2{
    font-size:1.8em; 
	line-height:1.6;
	color:#000;
	}
.link ul{
	margin:0 auto; 
	width:1200px; 
	list-style:none;
	}
.link li{ 
    display:inline-block; 
	margin:4px; 
	padding:0; 
	width:20%; 
	}
.link li a{
	display:block; 
	border-radius:50px; -webkit-border-radius:50px; 
	background:#40220F;
    font-size:1.5em; 
	line-height:60px; 
	text-decoration:none; 
	color:#FFFFFF;
	transition:0.5s;
	}
.link li a:hover{ 
    transform:translate(0,5px);
    box-shadow:1px 1px 15px rgba(20%,20%,40%,0.5);
	}


	

/*桌機刊頭*/
#header{
	width:100%;
	max-width:1000px;
    
	margin:0 auto;}



	
/*手機刊頭*/
#header-m{
	width:0;
	height:0;
 
	overflow:hidden;}
	


.c {
	overflow: hidden;
	width:100%;	max-width:1000px;
    
	margin:0 auto;
	padding:0;
	 
}



.c .left{width:18%;
	margin:1%;
	float:left;
	transition:0.5s;
}


.c .left:hover{
transform:scale(0.95,0.95);}






.b {
	overflow: hidden;
	width:100%;	max-width:1000px;
    
	margin:0 auto;
	padding:0;
	 
}



.b .left{width:48%;
	margin:1%;
	float:left;
	transition:0.5s;
}


.b .right{width:48%;
	margin:1%;
	float:left;
	transition:0.5s;
}


.b .left:hover{
transform:scale(0.95,0.95);}


.b .right:hover{
transform:scale(0.95,0.95);}

  
.ytre{
	max-width: 1000px;
	width:100%;
	margin:0% auto;
	padding:2%;
	display:block;
	text-align:center;
}
	

.ytre a{	
	padding:2% 1%;
	border-radius:30px;
	transition:0.5s;
		width:48%;
	font-size:24px;
background-color:#F08600;
	color:#F7EDBF;
	text-decoration:none;
	font-weight:bold;	
	display:inline-block;
	transition:0.5s;
}


.ytre:hover{	
	transform:scale(0.95,0.95);}

.ytre 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);}
}

.suitable2{max-width: 1200px;
	}
.suitable2 a{font-size: 32px;color: #F6F8C2;background:#36BD27;text-decoration: none;padding: 0.5em 1.5em;border-radius: 50px; width:100%;

}

.suitable2 a:hover{
	transition: 0.5s;
	transform: scale(0.95,0.95);color: #36BD27;background: #FFE362;
}
.suitable2 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);}
}

.main02{text-align: center;width: 100%; margin: 5% auto;}

/* == 手機版 ============================================================================= */
@media screen and (max-width:767px){

body{
	background-position:50% 5%;
	background-size: 150%;}    
 /*桌機刊頭*/
#header{
	width:0;
	height:0;
	overflow:hidden;}
	
/*手機刊頭*/
#header-m{
	overflow:visible;
	display:block;
	width:100%;
	height:auto;
	margin:0;}   
		

.b {
	overflow: hidden;
	width:100%;
	margin:0 auto;
	padding:0;
	 
}



.b .left{width:95%;
	margin:2%;
	float:left;
	transition:0.5s;
}


.b .right{width:95%;
	margin:2%;
	float:left;
	transition:0.5s;
}


.b .left:hover{
transform:scale(0.95,0.95);}


.b .right:hover{
transform:scale(0.95,0.95);}

  	

.c {
	overflow: hidden;
	width:100%;
	margin:0 auto;
	padding:0;
	 
}



.c .left{width:30%;
	margin:1%;
	float:left;
	transition:0.5s;
}



.c .left:hover{
transform:scale(0.95,0.95);}

/*間距*/
.padding-lr{
	width:100%;
    padding:3% 0; }
.center{	
	max-width:1200px;	
	margin:0 auto;}

.padding-lr ul{width:100%;}

.padding-lr li{
	width:43%;
	display:inline-block;
	height:auto;
	margin:0 auto;
    text-align:center;
	}	
    

/*選單*/
.menu{ 
    padding:2% 0 0 0; 
	width:100%;
	text-align:center;  
	}
.menu h2{
    font-size:1.8em; 
	line-height:1.6;
	color:#000;
	}
.menu ul{
	margin:0 auto; 
	width:100%; 
	list-style:none;
	}
.menu li{ 
    display:inline-block; 
	margin:4px; 
	padding:0; 
	width:30%; 
	}
.menu li a{
	display:block; 
	border-radius:6px; -webkit-border-radius:6px; 
	background:#C30D23;
    font-size:0.8em; 
	line-height:30px; 
	text-decoration:none; 
	color:#FFFFFF;
	transition:0.5s;
	}
.menu li a:hover{ 
    transform:translate(0,5px);
    box-shadow:1px 1px 15px rgba(20%,20%,40%,0.5);
	}
.OU{ 
  
	width:100%;


    background-color:#FDDDE5;
	}
	  

/*按鈕*/
.btn{ 
    padding:1% 0; 
	width:100%;

	text-align:center;position: fixed;z-index:900; 
    background-color:rgba(255,255,255,0.77);
	}
	
.btn ul{
	margin:0 auto; 
	list-style:none;
	}
.btn li{ 
    display:inline-block; width:45%;
	margin:1%; 
	padding:0; 
	 
	}
.btn li a{
	display:block; 
	border-radius:6px; -webkit-border-radius:6px; 
	background:


background: -webkit-linear-gradient(90deg, rgb(216, 18, 63), rgb(158, 63, 232));
background: linear-gradient(90deg, rgb(216, 18, 63), rgb(158, 63, 232));


    font-size:1.1em; 
	line-height:60px; 
	text-decoration:none; 
	color:#fff;
	transition:0.5s;
	}
.btn li a:hover{ 
    transform:translate(0,5px);
    box-shadow:1px 1px 15px rgba(20%,20%,40%,0.5);
	}
    
/*各班連結*/
.link{ 
    padding: 0 0 5% 0; 
	width:100%;
	text-align:center;  
	}
.link h2{
    font-size:1.4em; 
	line-height:1.6;
	color:#000;
	}
.link ul{
	margin:0 auto; 
	width:100%; 
	list-style:none;
	}
.link li{ 
    display:inline-block; 
	margin:4px; 
	padding:0; 
	width:30%; 
	}
.link li a{
	display:block; 
	border-radius:6px; -webkit-border-radius:50px; 
	background:#40220F;
    font-size:1.2em; 
	line-height:40px; 
	text-decoration:none; 
	color:#FFFFFF;
	transition:0.5s;
	}
.link li a:hover{ 
    transform:translate(0,5px);
    box-shadow:1px 1px 15px rgba(20%,20%,40%,0.5);
	}       
    
    
    
    
    }