/*Google網路中文字型應用02 – cwTeXYen (Chinese Traditional) 圓體字型*/
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);

*{margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
html{ width:100%; height:100%; font-family:Arial, Helvetica,"微軟正黑體",sans-serif; text-size-adjust:none;
      font-size:15px;}
ul{ margin:0; padding:0; list-style:none;}
p{ margin:0; padding:0;}


/* == 桌機版優先 ============================================================================= */

/* ==刊頭== */
.head{
	width: 100%;
	height:882px;
	background-color:#2F8DC0;
	position:relative;
	}
.head_bg{
	width:auto;
	height:882px;
	background-position:center;
	background-image:
	url(images/01-01.gif);
	background-repeat:no-repeat;
	margin:0px auto;
	}

/* == 區塊01 == */
.con01{
	width:100%;
	height:960px;
	background-color:
	#F57910;
	position:relative;
}
.con01 .image01{
	width:auto;
	height:880px;
	background-position:center;
	background-image:
	url(images/02.png);
	background-repeat:no-repeat;
	margin:0px auto;
}
.con01-btn{ 
    margin:0 auto 3px;
    padding:10px 0;
    width:15%;
    height:auto;
    background-color:#070203;
    border-radius:20px;
    font-size:2em;
    color:#23ea3e;
    text-align:center;
    }
.con01-btn a{ 
    display:block;
    text-decoration:none;
    color: #FFF;
    }
/* == 區塊01 == */

/* == 區塊02 == */
.con02{
	width:100%;
	height:800px;
	background-color:#77C7C8;
	position:relative;
}
.con02 .image02{
	width:auto;
	height:720px;
	background-position:center;
	background-image:url(images/03.png);
	background-repeat:no-repeat;
	margin:0px auto;
}
.con02-btn{ 
    margin:0 auto 3px;
    padding:10px 0;
    width:15%;
    height:auto;
    background-color:#070203;
    border-radius:20px;
    font-size:2em;
    color:#23ea3e;
    text-align:center;
    }
.con02-btn a{ 
    display:block;
    text-decoration:none;
    color: #FFF;
    }
/* == 區塊02 == */

/* == 區塊03 == */
.con03{
	width:100%;
	height:850px;
	background-color:#94B89C;
	position:relative;
}
.con03 .image03{
	width:auto;
	height:766px;
	background-position:center;
	background-image:url(images/04.png);
	background-repeat:no-repeat;
	margin:0px auto;
}
.con03-btn{ 
    margin:0 auto 3px;
    padding:10px 0;
    width:15%;
    height:auto;
    background-color:#070203;
    border-radius:20px;
    font-size:2em;
    color:#23ea3e;
    text-align:center;
    }
.con03-btn a{ 
    display:block;
    text-decoration:none;
    color: #FFF;
    }
/* == 區塊03 == */

/* == 區塊04 == */
.con04{
	margin:0;
    padding:0;
	width:100%;
    height:850px;
	background-color:
	#EFEFEF;
	position:relative;
}
.con04 .image04{
	width:auto;
	height:766px;
	background-position:center;
	background-image:
	url(images/05.png);
	background-repeat:no-repeat;
	margin:0px auto;
}
.con04-btn{ 
    margin:0 auto 3px;
    padding:10px 0;
    width:15%;
    height:auto;
    background-color:#070203;
    border-radius:20px;
    font-size:2em;
    color:#23ea3e;
    text-align:center;
    }
.con04-btn a{ 
    display:block;
    text-decoration:none;
    color: #FFF;
    }
/* == 區塊04 == */

/* == 區塊05 == */
.con05{
	width:100%;
	height:1950px;
	background-color:#94B89C;
	position:relative;
}
.con05 .image05{
	width:auto;
	height:1864px;
	background-position:center;
	background-image:
	url(images/06.png);
	background-repeat:no-repeat;
	margin:0px auto;
}
.con05-btn{ 
    margin:0 auto 3px;
    padding:10px 0;
    width:15%;
    height:auto;
    background-color:#070203;
    border-radius:20px;
    font-size:2em;
    color:#23ea3e;
    text-align:center;
    }
.con05-btn a{ 
    display:block;
    text-decoration:none;
    color: #FFF;
    }
/* == 區塊05 == */

/* == 區塊06 == */
.con06{
	width:100%;
	height:1340px;
	background-color:#77C7C8;
	position:relative;
}
.con06 .image06{
	width:auto;
	height:1255px;
	background-position:center;
	background-image:
	url(images/07.png);
	background-repeat:no-repeat;
	margin:0px auto;
}
.con06-btn{ 
    margin:0 auto 3px;
    padding:10px 0;
    width:15%;
    height:auto;
    background-color:#070203;
    border-radius:20px;
    font-size:2em;
    color:#23ea3e;
    text-align:center;
    }
.con06-btn a{ 
    display:block;
    text-decoration:none;
    color: #FFF;
    }
/* == 區塊06 == */

/* == 區塊07 == */
.con07{
	width:100%;
	height:855px;
	background-color:
	#0062A4;
	position:relative;
}
.con07 .image07{
	width:auto;
	height:773px;
	background-position:center;
	background-image:
	url(images/08.png);
	background-repeat:no-repeat;
	margin:0px auto;
}
.con07-btn{ 
    margin:0 auto 3px;
    padding:10px 0;
    width:15%;
    height:auto;
    background-color:#070203;
    border-radius:20px;
    font-size:2em;
    color:#23ea3e;
    text-align:center;
    }
.con07-btn a{ 
    display:block;
    text-decoration:none;
    color: #FFF;
    }
/* == 區塊07 == */

/* == 區塊07 == */
.con08{
	width:100%;
	height:1550px;
	background-color:
	#EFEFEF;
	position:relative;
}
.con08 .image08{
	width:auto;
	height:1458px;
	background-position:center;
	background-image:
	url(images/09.png);
	background-repeat:no-repeat;
	margin:0px auto;
}
.con08-btn{ 
    margin:0 auto 3px;
    padding:10px 0;
    width:15%;
    height:auto;
    background-color:#070203;
    border-radius:20px;
    font-size:2em;
    color:#23ea3e;
    text-align:center;
    }
.con08-btn a{ 
    display:block;
    text-decoration:none;
    color: #FFF;
    }
/* == 區塊07 == */


/* == 班系連結 == */
.footer{
	padding:50px 0;
	overflow:hidden;
	background-color:#0060a9;
	}
.footer-main{
	margin:0 auto;
	padding:0 100px;
	width:1200px;
	}
.footer-main dl{ float:left; margin:0; padding:0 20px;	width:250px; border-right:1px solid #0879b8;}
.footer-main dl:nth-child(4){ border-right:0px solid #FFF;}
.footer-main dt,dd{ display:block;}
.footer-main dt{
	float:left;
	margin:0 0 5px 0;
	width:120px;
	height:32px;
	line-height:32px;
	border-radius:5px;
	background-color:#FFF;
	text-align:center;
	font-size:1.3em;
	color:#0060a9;
	}
.footer-main dt a{ display:block; text-decoration:none; color:#0060a9;}
.footer-main dd a{ display:block; text-decoration:none; color:#FFF;}
.footer-main dd{
	float:right;
	margin:0 0 5px 0;
	width:85px;
	height:32px;
	line-height:32px;
	border-radius:5px;
	background-color:#7edf00;
	text-align:center;
	font-size:1.2em;
	color:#FFF;
	}
/* == 手機版型區 ============================================================================= */
@media screen and ( max-width:767px ){
.wrap{
	margin:0 auto;
	width:100%;}
/* ==刊頭== */
.head{
	width:100%;
	height:auto;
	position:relative;
	}

.head_bg {
	width: 100%;
	height: 0;
	background-image:
	url(images/m_01.gif);
	padding-bottom: 162.5%;
	background-size: cover;
	position: relative;
	overflow: hidden;
    /*抓目前的寬度，計算出所需高度，計算方式為圖片高度除以寬度*/
    }	
/* ==刊頭== */

/* == 區塊01 == */
.con01{
	width:100%;
	height:auto;
	position:relative;
	}
.con01 .image01{
	width: 100%;
	height: 0;
	background-image:
	url(images/m_02.gif);
	padding-bottom: 172.7%;
	background-size: cover;
	position: relative;
	overflow: hidden;
    /*抓目前的寬度，計算出所需高度，計算方式為圖片高度除以寬度*/
    }	
.con01-btn{ 
    margin:0 auto 0;
    padding:5px 0;
    width:50%;
    height:auto;
    background-color:#070203;
    border-radius:10px;
    font-size:2em;
    color:#23ea3e;
    text-align:center;
    }
.con01-btn a{ 
    display:block;
    text-decoration:none;
    color: #FFF;
    }
/* == 區塊01 == */
/* == 區塊02 == */
.con02{
	width:100%;
	height:auto;
	position:relative;
	}
.con02 .image02{
	width: 100%;
	height: 0;
	background-image:
	url(images/m_03.gif);
	padding-bottom: 110.1%;
	background-size: cover;
	position: relative;
	overflow: hidden;
    /*抓目前的寬度，計算出所需高度，計算方式為圖片高度除以寬度*/
    }	
.con02-btn{ 
    margin:0 auto 0 ;
    padding:5px 0;
    width:50%;
    height:auto;
    background-color:#070203;
    border-radius:10px;
    font-size:2em;
    color:#23ea3e;
    text-align:center;
    }
.con02-btn a{ 
    display:block;
    text-decoration:none;
    color: #FFF;
    }
/* == 區塊02 == */
/* == 區塊03 == */
.con03{
	width:100%;
	height:auto;
	position:relative;
	}
.con03 .image03{
	width: 100%;
	height: 0;
	background-image:
	url(images/m_04.gif);
	padding-bottom: 160%;
	background-size: cover;
	position: relative;
	overflow: hidden;
    /*抓目前的寬度，計算出所需高度，計算方式為圖片高度除以寬度*/
    }	
.con03-btn{ 
    margin:0 auto 0;
    padding:5px 0;
    width:50%;
    height:auto;
    background-color:#070203;
    border-radius:10px;
    font-size:2em;
    color:#23ea3e;
    text-align:center;
    }
.con03-btn a{ 
    display:block;
    text-decoration:none;
    color: #FFF;
    }
/* == 區塊03 == */
/* == 區塊04 == */
.con04{
	width:100%;
	height:auto;
	position:relative;
	}
.con04 .image04{
	width: 100%;
	height: 0;
	background-image:
	url(images/m_05.gif);
	padding-bottom: 162%;
	background-size: cover;
	position: relative;
	overflow: hidden;
    /*抓目前的寬度，計算出所需高度，計算方式為圖片高度除以寬度*/
    }	
.con04-btn{ 
    margin:0 auto 0;
    padding:5px 0;
    width:50%;
    height:auto;
    background-color:#070203;
    border-radius:10px;
    font-size:2em;
    color:#23ea3e;
    text-align:center;
    }
.con04-btn a{ 
    display:block;
    text-decoration:none;
    color: #FFF;
    }
/* == 區塊04 == */

/* == 區塊05 == */
.con05{
	width:100%;
	height:auto;
	position:relative;
	}
.con05 .image05{
	width: 100%;
	height: 0;
	background-image:
	url(images/m_06.gif);
	padding-bottom: 238.8%;
	background-size: cover;
	position: relative;
	overflow: hidden;
    /*抓目前的寬度，計算出所需高度，計算方式為圖片高度除以寬度*/
    }	
.con05-btn{ 
    margin:0 auto 0;
    padding:5px 0;
    width:50%;
    height:auto;
    background-color:#070203;
    border-radius:10px;
    font-size:2em;
    color:#23ea3e;
    text-align:center;
    }
.con05-btn a{ 
    display:block;
    text-decoration:none;
    color: #FFF;
    }
/* == 區塊05 == */

/* == 區塊06 == */
.con06{
	width:100%;
	height:auto;
	position:relative;
	}
.con06 .image06{
	width: 100%;
	height: 0;
	background-image:
	url(images/m_07.gif);
	padding-bottom: 159.7%;
	background-size: cover;
	position: relative;
	overflow: hidden;
    /*抓目前的寬度，計算出所需高度，計算方式為圖片高度除以寬度*/
    }	
.con06-btn{ 
    margin:0 auto 0;
    padding:5px 0;
    width:50%;
    height:auto;
    background-color:#070203;
    border-radius:10px;
    font-size:2em;
    color:#23ea3e;
    text-align:center;
    }
.con06-btn a{ 
    display:block;
    text-decoration:none;
    color: #FFF;
    }
/* == 區塊06 == */
/* == 區塊07 == */
.con07{
	width:100%;
	height:auto;
	position:relative;
	}
.con07 .image07{
	width: 100%;
	height: 0;
	background-image:
	url(images/m_08.gif);
	padding-bottom: 129.0%;
	background-size: cover;
	position: relative;
	overflow: hidden;
    /*抓目前的寬度，計算出所需高度，計算方式為圖片高度除以寬度*/
    }	
.con07-btn{ 
    margin:0 auto 0;
    padding:5px 0;
    width:50%;
    height:auto;
    background-color:#070203;
    border-radius:10px;
    font-size:2em;
    color:#23ea3e;
    text-align:center;
    }
.con07-btn a{ 
    display:block;
    text-decoration:none;
    color: #FFF;
    }
/* == 區塊07 == */

/* == 區塊08 == */
.con08{
	width:100%;
	height:auto;
	position:relative;
	}
.con08 .image08{
	width: 100%;
	height: 0;
	background-image:
	url(images/m_09.gif);
	padding-bottom: 146.9%;
	background-size: cover;
	position: relative;
	overflow: hidden;
    /*抓目前的寬度，計算出所需高度，計算方式為圖片高度除以寬度*/
    }	
.con08-btn{ 
    margin:0 auto 0;
    padding:5px 0;
    width:50%;
    height:auto;
    background-color:#070203;
    border-radius:10px;
    font-size:2em;
    color:#23ea3e;
    text-align:center;
    }
.con08-btn a{ 
    display:block;
    text-decoration:none;
    color: #FFF;
    }
/* == 區塊08 == */



/* == 班系連結 == */
.footer{
	padding:30px 0 25px 0;
	overflow:hidden;
	background-color:#0060a9;
	}
.footer-main{
	margin:0 auto;
	padding:0;
	width:100%;
	}
.footer-main dl{ float:left; margin:0; padding:0 2%; width:50%; border-right:0px solid #0879b8;}
.footer-main dl:nth-child(4){ border-right:0px solid #FFF;}
.footer-main dt,dd{ display:block;}
.footer-main dt{
	float:left;
	margin:0 0 5px 0;
	width:55%;
	height:30px;
	line-height:30px;
	border-radius:5px;
	background-color:#FFF;
	text-align:center;
	font-size:0.9em;
	color:#0060a9;
	}
.footer-main dt a{ display:block; text-decoration:none; color:#0060a9;}
.footer-main dd a{ display:block; text-decoration:none; color:#FFF;}
.footer-main dd{
	float:right;
	margin:0 0 5px 0;
	width:40%;
	height:30px;
	line-height:30px;
	border-radius:5px;
	background-color:#7edf00;
	text-align:center;
	font-size:0.9em;
	color:#FFF;
	}


