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

*{
	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/bg.jpg");
	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;
}
.footer3 {
	font-family: "微軟正黑體";
	font-size: 20px;
	color: #FF3;
	text-decoration: blink;
	background-color: #000;
}

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




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


/*選單*/
.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);
	}


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

/* == 表格 == */
.table{	
    margin:0 auto;
	padding:80px 0; 
	width:100%; 
	overflow:hidden; 
	background: url(../images/bg.gif);
	}
.table .box{ 
    margin:0 auto;
	width:1000px; 
	text-align:center;
	}
.table .box h2{ font-size:3em;}
.table .box table{ 
    margin:30px 0 40px; 
	width:100%; 
	border:none; 
	border-collapse:collapse; /*表格欄位邊框合併*/
	font-size:1.5em;
	}
.table .box tr{ border-bottom:1px dashed #ccc;} /*表格列設定*/
.table .box tr.A{ background-color:rgba(222,128,98,0.6);}
.table .box tr.A:hover {background-color:rgba(222,128,98,0.9);}

.table .box tr.B{ background-color:rgba(255,255,255,0.6);}
.table .box tr.B:hover{ background-color:rgba(255,255,255,0.9);}

.table .box tr.C{ background-color:rgba(201,188,156,0.6);}
.table .box tr.C:hover{ background-color:rgba(201,188,156,0.9);}

.table .box tr:first-child{ border-top:1px dashed #ccc;}
.table .box td{ border-right:1px solid #999; padding:5px 0;}/*表格資料設定*/
.table .box td:first-child {border-left:1px solid #999;} 


/*各班連結*/
.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:#185E9C;
    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);
	}


/*line*/
.line{ 
    padding:0 0 3% 0; 
	width:100%;
	text-align:center;  
	}
.line h2{
    font-size:1.8em; 
	line-height:1.6;
	color:#000;
	}
.line ul{
	margin:0 auto; 
	width:1200px; 
	list-style:none;
	}
.line li{ 
    display:inline-block; 
	margin:4px; 
	padding:0; 
	width:20%; 
	}
.line li a{
	display:block; 
	border-radius:50px; -webkit-border-radius:50px; 
	background:#EA5514;
    font-size:1.5em; 
	line-height:60px; 
	text-decoration:none; 
	color:#FFFFFF;
	transition:0.5s;
	}
.line li a:hover{ 
    transform:translate(0,5px);
    box-shadow:1px 1px 15px rgba(20%,20%,40%,0.5);
	}
/*浮動連結*/
  div#social-address{
        position:fixed; bottom:50%; left:0; z-index:1000!important;box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.3);
        font-family: '微軟正黑體'; font-size: 16px!important;text-align: center;
    }
    div#social-address .social-btn{color:white;padding: 16px 8px;cursor: pointer; display: block;}
    div#social-address a{color: inherit;text-decoration:none;}
    div#social-address p{margin:0;}
    div#social-address a:hover,div#social-address .social-btn:hover{-webkit-filter:brightness(60%) contrast(150%);    -o-filter:brightness(60%) contrast(150%);    filter:brightness(60%) contrast(150%);}
    div#social-address img {    width: 1em;    padding: 0 0 0.25em 0;}
    div#social-address .mlu{ background-color:#304E8E;}
    div#social-address .mline{ background-color:#45B035; }
    div#social-address .social-btn.mline{position: relative;}
    div#social-address #social-address-lines{
        position: absolute;
        background: rgba(255, 255, 255, 0.9);
        color: #3f9831;
        top: 0%;
        left: 100%;
        margin: 0.5em 0.25em;
        border: 2px solid;
        border-radius: 0.25em;
        box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.5);
        width: 6em;
        display: inline-table;
    }
    div#social-address #social-address-lines a{display: block;padding: 0 0.5em;}
    div#social-address #social-address-lines a:hover{background: #ededed;}
    div#social-address #social-address-lines p{line-height: 1;border-bottom: 1px solid #ededed;margin: 0;padding: 0.5em 0;}
    div#social-address #social-address-lines a:last-child p{border-bottom: none;}
	



div#social-address .mline2{ background-color:#00F; }
    div#social-address .social-btn.mline2{position: relative;}
    div#social-address #social-address-lines2{
        position: absolute;
        background: rgba(255, 255, 255, 0.9);
        color:#06F;
        top: 0%;
        left: 100%;
        margin: 0.5em 0.25em;
        border: 2px solid;
        border-radius: 0.25em;
        box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.5);
        width: 6em;
        display: inline-table;
    }
    div#social-address #social-address-lines2 a{display: block;padding: 0 0.5em;}
    div#social-address #social-address-lines2 a:hover{background: #ededed;}
    div#social-address #social-address-lines2 p{line-height: 1;border-bottom: 1px solid #ededed;margin: 0;padding: 0.5em 0;}
    div#social-address #social-address-lines2 a:last-child p{border-bottom: none;}	




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

body{
	background-position:60% 18%;
	background-size: 150%;}    
    
/*選單*/
.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);
	}
    

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

    
/* == 表格 == */
.table{	
    margin:0 auto; 
	padding:40px 15px; 
	width:100%; 
	overflow:hidden; 
	background: url(../images/bg.gif);
	}
.table .box{ 
    margin:0 auto; 
	width:100%; 
	text-align:center;
	}
.table .box h2{ font-size:2.2em;}
.table .box table{ 
    margin:10px 0 20px; 
	width:100%; 
	border:none; 
	border-collapse:collapse; /*表格欄位邊框合併*/
	font-size:1em;
	}
.table .box tr{ border-bottom:1px dashed #ccc;} /*表格列設定*/
.table .box tr.A{ background-color:rgba(222,128,98,0.6);}
.table .box tr.A:hover {background-color:rgba(222,128,98,0.9);}

.table .box tr.B{ background-color:rgba(255,255,255,0.6);}
.table .box tr.B:hover{ background-color:rgba(255,255,255,0.9);}

.table .box tr.C{ background-color:rgba(201,188,156,0.6);}
.table .box tr.C:hover{ background-color:rgba(201,188,156,0.9);}
    
.table .box tr:first-child{ border-top:1px dashed #ccc;}
.table .box td{ border-right:1px solid #999; padding:5px 0;}/*表格資料設定*/
.table .box td:first-child {border-left:1px solid #999;}
    
    
    
/*各班連結*/
.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:40%; 
	}
.link li a{
	display:block; 
	border-radius:6px; -webkit-border-radius:50px; 
	background:#185E9C;
    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);
	} 
/*line*/
.line{ 
    padding: 0 0 5% 0; 
	width:100%;
	text-align:center;  
	}
.line h2{
    font-size:1.4em; 
	line-height:1.6;
	color:#000;
	}
.line ul{
	margin:0 auto; 
	width:100%; 
	list-style:none;
	}
.line li{ 
    display:inline-block; 
	margin:4px; 
	padding:0; 
	width:40%; 
	}
.line li a{
	display:block; 
	border-radius:6px; -webkit-border-radius:50px; 
	background:#EA5514;
    font-size:1.2em; 
	line-height:40px; 
	text-decoration:none; 
	color:#FFFFFF;
	transition:0.5s;
	}
.line li a:hover{ 
    transform:translate(0,5px);
    box-shadow:1px 1px 15px rgba(20%,20%,40%,0.5);
	}       
    	
    
 /*浮動連結*/
div#social-address{ width: 100%;bottom: 0;content: "";display: inline-block;clear: both; }
    div#social-address .social-btn{ display: block;float: left;width: 49.99%;padding: 8px 0;}
    div#social-address img {    width: 1em;    padding:0.25em 0.25em 0 0;}
    div#social-address br{display: none;}
    div#social-address .mlu{display: inline-block; }
    div#social-address #social-address-lines{width: 100%;top:initial;bottom:100%;left: 0;}
 
     div#social-address #social-address-lines2{width: 100%;top:initial;bottom:100%;left: 0;}   
    
    
    }