*{ 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,p{ margin:0; padding:0; list-style:none;}

/*隱藏SchemaDIV*/
.boxhide{ display:none;}
.boxhide p{ margin:0; padding:0;}

/* == 桌機版優先 ============================================================================= */

.fs01{ font-weight:bold;}
.fs02{ text-decoration:underline;}
.fs03{ font-size:40px;}
.fc01{ color: #e60012;}
.fc02{ color: #009e82;}
.fc03{ color: #FFFF00;}
.fc04{ color: #339900;}
.co01{ color: #00a057;}
.co02{ color: #00a0e9;}
.co03{ color: #009f98;}


/* == 麵包屑 == */
.path{ margin:0 auto; width:100%; padding:0 0 0 20px; font-size:16px; line-height:50px; color:#000; background:#FFF; }
.path ol{ margin:0; padding:0; width:100%;}
.path li{ margin:0; padding:0; display:inline-block;}
.path li a{ color:#000; text-decoration:underline;}
.path li a:hover{ text-decoration:none;}


.head{ width:100%; height:560px; background:url(../images/banner.jpg); background-position:center;}
.head .main { margin:0 auto; width:1000px;}
.head .main h1 a{
	float:left;
	margin:48px 0 20px 200px;
	padding: 0 0 0 20px;
	display:block;
	width:350px;
	height:44px;
	overflow:hidden;
	border-radius:50px;
	background: #F00;
	color:#fff;
	font-size:0.7em;
	text-align:left;
	line-height:44px;
	}
.head .board{ float:right; width:450px; height:560px; background:url(../images/board.png) no-repeat;}
.head .btn a{
	float:right; 
	display:block;
	margin:370px 35px 0;
	width:42%;
	height:50px;
	line-height:50px;
	background-color:#fff100;
	border-radius:10px;
	font-size:2em;
	color:#000;
	text-decoration:none;
	text-align:center;
	}
.head_m {
	display:none;
	}


		   

/* == 區塊01 == */
.con01{ width:100%; background:url(../images/bg01.gif);	}
.con01 .main{ margin:0 auto; width:1000px; padding:20px 0 0; overflow:hidden;}
.con01 .main h1 a{ display:none;}
.con01 .main h2{ margin:0; font-size:4em; color:#333; margin:50px 0 10px;}
.con01 .main .left{
	float:left;
	width:620px;
	padding:10px;
	background:#FC0;
	border-radius:15px;
	-webkit-border-radius:15px;
	}
.con01 .main .left h2{ margin:0; padding:0; font-size:2em; text-indent:10px;}
.con01 .main .left h3{ margin:0 ; padding:0; font-size:1.6em; line-height:1.6em; text-indent:10px; color:#e60012;}
.con01 .main .left p{ padding:20px 25px 14px; background:#FFF; font-size:1.3em; line-height:1.6; color:#444; text-align:justify; text-indent:2px;}
.con01 .main .left h4{ margin:0; padding:0 30px 0 0; background:#FFF; color:#333; font-size:1.2em; line-height:0; font-weight:normal; text-align: right;}
.con01 .main .right{
	float:right;
	display:block;
	width:350px;
	height:320px;
	background:url(../images/BOX01_R.png);
	background-size:cover;
	text-indent:-9999px;
	}
.con01 .main .btn {clear:both; padding:40px 0 60px;}
.con01 .main .btn ul {
	margin:0;
	padding:0;
	list-style:none;
	text-align:center;
	}
.con01 .main .btn li {
	display:inline-block;
	}
.con01 .main .btn li a{
	display:inline-block;
	width:240px;
	height:60px;
	line-height:60px;
	border-radius:10px;
	font-size:1.5em;
	text-decoration:none;
	text-align:center;
	color:#FFF;
	}
.con01 .main .btn li a:hover { position:relative; top:1px; left:1px;}
.con01 .main .btn li.A a{ background-color:#000;}
.con01 .main .btn li.B a{ background-color:#e60012;}



/* == 區塊02 == */
.con02{ width:100%;	background:#8fcb24;	}
.con02 .main{ margin:0 auto; 
			 width:1000px;
			 padding:50px 0 0;
			 overflow:hidden;  
			 }
.con02 .main h2{ margin:0 0 50px; font-size:4em; line-height:1.1em; color:#333; text-align: center;}
.con02 .main .left{ float:left; width:500px; height:458px; background:url(../images/BOX02_L.png) no-repeat; background-size:cover; text-indent:-9999px;}
.con02 .main .right { float:right; width:500px; height:458px; background:url(../images/BOX02_R.png) no-repeat; background-size:cover; text-indent:-9999px;}
.con02 .main .btn {clear:both; padding:40px 0 60px;}
.con02 .main .btn ul {
	margin:0;
	padding:0;
	list-style:none;
	text-align:center;
	}
.con02 .main .btn li {
	display:inline-block;
	}
.con02 .main .btn li a{
	display:inline-block;
	width:240px;
	height:60px;
	line-height:60px;
	border-radius:10px;
	font-size:1.5em;
	text-decoration:none;
	text-align:center;
	color:#FFF;
	}
.con02 .main .btn li a:hover { position:relative; top:1px; left:1px;}
.con02 .main .btn li.A a{ background-color:#003d3a;}
.con02 .main .btn li.B a{ background-color:#e60012;}
		   
			      
			   
			   
/* == 區塊03 == */
.con03{ width:100%; background:#eee;	}
.con03 .main{ margin:0 auto; 
             padding:50px 0 0;
			 width:1000px;
			 text-align:center;
			 overflow:hidden;
			 }
.con03 .main h2{ margin:0; font-size:4em; color:#333;}
.con03 .main h3{ margin:10px auto; display:block; width:300px; font-size:1.4em; text-align:center;}
.con03 .main h4{ clear:both; margin:0; font-size:1.8em; color:#333;}
.con03 .box { margin:40px 0 0; overflow:hidden;}
.con03 .box .left { float:left; padding:50px 0 0; width:40%; }
.con03 .box .left img{ width:350px;}
.con03 .box .right { float:right; width:60%;}
.con03 .box .right ul{ margin:0 auto; overflow:hidden;}
.con03 .box .right li{ display:inline-block; margin:15px 25px; float:left; width:35%;}
.con03 .box .right li img{ width:220px;}


.con03 .main .btn {clear:both; padding:40px 0 60px;}
.con03 .main .btn ul {
	margin:0;
	padding:0;
	list-style:none;
	text-align:center;
	}
.con03 .main .btn li {
	display:inline-block;
	}
.con03 .main .btn li a{
	display:inline-block;
	width:280px;
	height:60px;
	line-height:60px;
	border-radius:10px;
	font-size:1.5em;
	text-decoration:none;
	text-align:center;
	color:#FFF;
	}
.con03 .main .btn li a:hover { position:relative; top:1px; left:1px;}
.con03 .main .btn li.A a{ background-color:#e60012;}
.con03 .main .btn li.B a{ background-color:#000;}


/* == 區塊04 == */
.con04{ width:100%; padding:80px 0; background-color:#eb6100; text-align:center;}
.con04 .main{ margin:0 auto; width:100%; max-width:1200px;}
.con04 h2{ font-size:3.6em; font-weight:normal; color:#FFF;}
.con04 ul{ margin:30px 0; padding:0; width:100%; overflow:hidden;}
.con04 li{ display:block; width:24%; margin:0 5px; height:250px; float:left;}
.con04 li .box01{ margin:0 auto 20px ; width:50px; height:50px; line-height:50px; border-radius:50%;
                 font-size:2.5em; color:#FFF;}
.con04 li .box01-a{ background-color:#7561d7; }
.con04 li .box01-b{ background-color:#1fbe75; }
.con04 li .box01-c{ background-color:#00a0e9; }
.con04 li .box01-d{ background-color:#00c6bd; }
.con04 li h3{ display:block; width:100%; height:60px; line-height:60px;
              font-size:2.2em; color:#FFF;}
.con04 li h3.a{ background-color:#7561d7;}
.con04 li h3.b{ background-color:#1fbe75;}
.con04 li h3.c{ background-color:#00a0e9;}
.con04 li h3.d{ background-color:#00c6bd;}
.con04 li .box02{ margin:0; padding:20px 25px; width:100%; height:200px; background-color:#FFF; text-align:left;}
.con04 li .box02 p{ font-size:1.3em;}
.con04 img{ clear:both; margin:20px 0; width:70%; height:auto;}


/* == 區塊05 == */
.con05{ width:100%;	background:#26cfff;	}
.con05 .main{ margin:0 auto; padding:0;
			 width:1000px;
			 padding:80px 0 0;
             text-align:center;
			 overflow:hidden;  
			 }
.con05 .main h2{ margin:0 0 40px; font-size:4em; line-height:1.1em; color:#333;}
.con05 .main h3{ clear:both; margin:0;font-size:1.8em; color:#333;}
.con05 .main dl{
	display:inline;
	float:left;
	margin:0 15px 30px;
	padding:25px;
	width:470px;
	border-radius:20px;
	-webkit-border-radius:20px;
	border:12px solid #0075a9;
	text-align:left;
	}
.con05 .main dl.a{ background:url(../images/BOX04_L.png) no-repeat #FFF 25px 25px; background-size:30%; }
.con05 .main dl.b{ background:url(../images/BOX04_R.png) no-repeat #fff 25px 25px; background-size:30%; }
.con05 .main dt{ font-size:2.2em; line-height:1.2em; font-weight:bold; padding: 0 0 30px 140px; border-bottom:5px solid #eee; }
.con05 .main dd ul{ margin:20px 0 0 10px;}
.con05 .main dd li { font-size:1.4em; line-height:1.8em; }
.con05 .main dd li a{ color:#ff3300;}
.con05 .main dd li a:hover{ text-decoration:none;}
.con05 .main img{ margin:40px auto 50px;	width:350px; height:60px; }	

.con05 .main .btn {clear:both; padding:40px 0 60px;}
.con05 .main .btn ul {
	margin:0;
	padding:0;
	list-style:none;
	text-align:center;
	}
.con05 .main .btn li {
	display:inline-block;
	}
.con05 .main .btn li a{
	display:inline-block;
	width:280px;
	height:60px;
	line-height:60px;
	border-radius:10px;
	font-size:1.5em;
	text-decoration:none;
	text-align:center;
	color:#FFF;
	}
.con05 .main .btn li a:hover { position:relative; top:1px; left:1px;}
.con05 .main .btn li.A a{ background-color:#e60012;}
			   


/* == 多元學習模式 == */
.study{ clear:both; margin:0 auto;
        padding:50px 0;
		width:100%;
		background:url(../images/bg01.gif);
		overflow:hidden;
		text-align:center;
		}
.study .main{
	margin:0 auto;
	width:1000px;
	}
.study h1{ margin:0;
           padding:0;
		   font-size:2.6em;
		   font-weight:normal;
		   }
.study h2{ display:block;
           margin:10px auto;
		   padding:0;
		   width:310px;
		   height:40px;
		   line-height:40px;
		   font-size:1.6em;
		   font-weight:normal;
		   color:#FFF;
		   text-align:center;
		   background-color:#000;
		   }
.study .box ul{ margin:50px auto;
           padding:0;
		   width:100%;
		   overflow:hidden;
		   }
.study .box li{ display:block;
           margin:0 20px; padding:0;
		   width:210px;
		   float:left;
		   overflow:hidden;
		   display:inline;
			}
.study .box li h3{ display:block; width:210px; height:100px; }
.study .box li h4{ display:block;
              width:210px; height:50px; line-height:50px;
			  background-color:#2ec34a;
			  font-size:1.6em;
			  color:#FFF; }
.study .box li .box01{ padding:10px 0; width:210px;
                  font-size:1.3em; line-height:1.6;
				  border-bottom:1px solid #CCC;}
.study .box li .box02{ padding:10px 0;
                  font-size:1.2em; line-height:1.6;
				  text-align:center;
				  color:#CCC;}
.study .box li .box02 a{ color:#e60015;}
.study .box li .box02 a:hover{ text-decoration:none;}
		   
.study .main .btn {clear:both; }
.study .main .btn ul {
	margin:0;
	padding:0;
	list-style:none;
	text-align:center;
	}
.study .main .btn li {
	display:inline-block;
	}
.study .main .btn li a{
	display:inline-block;
	width:280px;
	height:60px;
	line-height:60px;
	border-radius:10px;
	font-size:1.5em;
	text-decoration:none;
	text-align:center;
	color:#FFF;
	}
.study .main .btn li a:hover { position:relative; top:1px; left:1px;}
.study .main .btn li.A a{ background-color:#e60012;}
.study .main .btn li.B a{ background-color:#000;}



/* == 班址 == */
.footer{ width:100%;
	     background-color:#888;
		 overflow:hidden;
	    }
.footer-con{ margin:0 auto;
          padding:50px 0;
          width:100%;
		  max-width:1000px;
		  overflow:hidden;
		  }
.footer-conL{ width:230px;
           float:left;}
.footer-conR{ width:770px;
           float:right;}
.footer-conR ul{ width:770px; margin:0;}
.footer-conR li a{ display:block;
                   padding:0;
				   margin:0 40px 10px 0;
				   width:100px;
				   height:21px;
                   font-size:20px;
				   text-decoration:none;
				   color:#FFF;
				   float:left;
				   }
				   

/* == 手機版型區 ============================================================================= */
@media screen and ( max-width:767px ){
.fs01{ font-weight:bold;}
.fs02{ text-decoration:underline;}
.fs03{ font-size:40px;}
.fc01{ color: #e60012;}
.fc02{ color: #009e82;}
.fc03{ color: #FFFF00;}
.fc04{ color: #339900;}


/* == 麵包屑 == */
.path{ display:none;}

.head{ display:none;}
.head_m {
	display:block;
	width:100%;
	height:0;
	background:url(../images/m_bn.jpg) no-repeat;
	background-size:cover;
	padding-bottom:67.23%;
	position:relative;
	}
.head_m .btn a{
	position:absolute; 
    display:block;
	top:54%;
	left:17%;
	width:40%;
	height:30px;
	line-height:28px;
	background-color:#ff0000;
	border-radius:6px;
	font-size:1em;
	font-weight:bold;
	color:#ffff00;
	text-decoration:none;
	text-align:center;
	}


		   

/* == 區塊01 == */
.con01{ width:100%; background:url(../images/bg01.gif);	}
.con01 .main{ margin:0 auto; width:100%; padding:15px 10px; overflow:hidden; text-align:center;}
.con01 .main h1 a{
	float:none;
	margin:20px auto 20px;
	padding: 0;
	display:block;
	width:100%;
	height:44px;
	overflow:hidden;
	border-radius:50px;
	background: #F00;
	color:#fff;
	font-size:0.6em;
	text-align: center;
	line-height:44px;
	}
.con01 .main h2{ margin:0; font-size:2.3em; color:#333; margin:0 0 10px;}
.con01 .main .left{
	float:none;
	width:100%;
	padding:10px;
	background:#FC0;
	border-radius:8px;
	-webkit-border-radius:8px;
	}
.con01 .main .left h2{ margin:0; padding:0; font-size:1.7em; text-indent:10px;}
.con01 .main .left h3{ margin:0 ; padding:0; font-size:1.3em; line-height:1.6em; text-indent:10px; color:#e60012;}
.con01 .main .left p{ padding:15px; background:#FFF; font-size:1.2em; line-height:1.6; color:#444; text-align:justify; text-indent:2px;}
.con01 .main .left h4{ margin:0; padding:0 15px 0 0; background:#FFF; color:#333; font-size:1.2em; line-height:0; font-weight:normal; text-align: right;}
.con01 .main .right{
	float:none;
	margin-top:10px;
	display:block;
	width:100%;
	height:0;
	background:url(../images/BOX01_R.png);
	background-size:cover;
	padding-bottom:91.42%;
	text-indent:-9999px;
	}
.con01 .main .btn {clear:both; padding:0;}
.con01 .main .btn ul {
	margin:0;
	padding:10px 0 0;
	list-style:none;
	text-align:center;
	}
.con01 .main .btn li {
	display:inline-block;
	width:100%;
	margin:2px 0;
	}
.con01 .main .btn li a{
	display:inline-block;
	width:100%;
	height:60px;
	line-height:60px;
	border-radius:10px;
	font-size:1.5em;
	text-decoration:none;
	text-align:center;
	color:#FFF;
	}
.con01 .main .btn li.A a{ background-color:#000;}
.con01 .main .btn li.B a{ background-color:#e60012;}


/* == 區塊02 == */
.con02{ width:100%;	background:#8fcb24;	}
.con02 .main{ margin:0 auto; width:100%; padding:15px 10px; overflow:hidden;}
.con02 .main h2{ margin:10px 0 20px; font-size:2em; line-height:1.1em; color:#333; text-align: center;}
.con02 .main .left{ float:none; width:100%; height:0; background:url(../images/BOX02_L.png) no-repeat; background-size:cover; padding-bottom:91.56%; text-indent:-9999px;}
.con02 .main .right { float:none; width:100%; height:0; background:url(../images/BOX02_R.png) no-repeat; background-size:cover; padding-bottom:91.56%; text-indent:-9999px;}
.con02 .main .btn {clear:both; padding:0;}
.con02 .main .btn ul {
	margin:0;
	padding:20px 0 0;
	list-style:none;
	text-align:center;
	}
.con02 .main .btn li {
	display:inline-block;
	width:100%;
	margin:2px 0;
	}
.con02 .main .btn li a{
	display:inline-block;
	width:100%;
	height:60px;
	line-height:60px;
	border-radius:10px;
	font-size:1.5em;
	text-decoration:none;
	text-align:center;
	color:#FFF;
	}
.con02 .main .btn li.A a{ background-color:#003d3a;}
.con02 .main .btn li.B a{ background-color:#e60012;}	   



/* == 區塊03 == */
.con03{ width:100%; background:#eee;}
.con03 .main{ margin:0 auto; padding:15px 10px; width:100%; text-align:center; overflow:hidden; }
.con03 .main h2{ margin:0; font-size:2em; color:#333;}
.con03 .main h3{ margin:10px auto; display:block; width:100%; font-size:1.3em; text-align:center;}
.con03 .main h4{ clear:both; margin:10px 0; font-size:1.4em; color:#333;}
.con03 .box { margin:0; overflow:hidden;}
.con03 .box .left { float:none; padding:20px 0 0; width:100%; }
.con03 .box .left img{ width:100%;}
.con03 .box .right { float:none; width:100%;}
.con03 .box .right ul{ margin:10px auto 20px; overflow:hidden;}
.con03 .box .right li{ display:inline-block; margin:10px 0; float:none; width:100%;}
.con03 .box .right li img{ width:100%;}

.con03 .main .btn {clear:both; padding:0;}
.con03 .main .btn ul {
	margin:0;
	padding:0;
	list-style:none;
	text-align:center;
	}
.con03 .main .btn li {
	display:inline-block;
	width:100%;
	margin:2px 0;
	}
.con03 .main .btn li a{
	display:inline-block;
	width:100%;
	height:60px;
	line-height:60px;
	border-radius:10px;
	font-size:1.5em;
	text-decoration:none;
	text-align:center;
	color:#FFF;
	}
.con03 .main .btn li a:hover { position:relative; top:1px; left:1px;}
.con03 .main .btn li.A a{ background-color:#e60012;}
.con03 .main .btn li.B a{ background-color:#000;}


/* == 區塊04 == */
.con04{ width:100%; padding:30px 14px 10px; background-color:#eb6100; text-align:center;}
.con04 .main{ margin:0 auto; width:100%; max-width:1000px;}
.con04 h2{ font-size:2em; font-weight:none; color:#FFF;}
.con04 ul{ margin:20px 0 0; padding:0; width:100%; overflow:hidden;}
.con04 li{ display:block; width:100%; height:280px; float:none;}
.con04 li .box01{ margin:0 auto 20px ; width:50px; height:50px; line-height:50px; border-radius:50%;
                 font-size:2.5em; color:#FFF;}
.con04 li .box01-a{ background-color:#7561d7; }
.con04 li .box01-b{ background-color:#1fbe75; }
.con04 li .box01-c{ background-color:#00a0e9; }
.con04 li .box01-d{ background-color:#00c6bd; }
.con04 li h3{ display:block; width:100%; height:60px; line-height:60px;
              font-size:2em; color:#FFF;}
.con04 li h3.a{ background-color:#7561d7;}
.con04 li h3.b{ background-color:#1fbe75;}
.con04 li h3.c{ background-color:#00a0e9;}
.con04 li h3.d{ background-color:#00c6bd;}
.con04 li .box02{ margin:0; padding:20px ; width:100%; height:130px; background-color:#FFF; text-align:left;}
.con04 li .box02 p{ font-size:1.4em;}
.con04 img{ display:none; clear:both; width:1000px; height:auto;}


/* == 區塊05 == */
.con05{ width:100%;	background:#26cfff;	}
.con05 .main{ margin:0 auto; padding:15px 10px; width:100%; text-align:center; overflow:hidden; }
.con05 .main h2{ margin:0 0 20px; font-size:2.3em; line-height:1.1em; color:#333;}
.con05 .main h3{ clear:both; margin:0;font-size:1.4em; color:#333;}
.con05 .main dl{
	float:left;
	margin:0 0 20px;
	padding:20px;
	width:100%;
	border-radius:15px;
	-webkit-border-radius:15px;
	border:10px solid #0075a9;
	text-align:left;
	}
.con05 .main dl.a{ background:url(../images/BOX04_L.png) no-repeat #FFF 20px 25px; background-size:25%; }
.con05 .main dl.b{ background:url(../images/BOX04_R.png) no-repeat #fff 20px 25px; background-size:25%; }
.con05 .main dt{ font-size:1.7em; line-height:1em; font-weight:bold; padding: 0 0 20px 80px; border-bottom:5px solid #eee; }
.con05 .main dd ul{ margin:20px 0 0 0;}
.con05 .main dd li { font-size:1.2em; line-height:1.4em; }
.con05 .main dd li a{ color:#ff3300;}
.con05 .main dd li a:hover{ text-decoration:none;}
.con05 .main img{ margin:40px auto 50px; width:350px; height:60px; }	

.con05 .main .btn {clear:both; padding:10px 0 0;}
.con05 .main .btn ul {
	margin:0;
	padding:0;
	list-style:none;
	text-align:center;
	}
.con05 .main .btn li {
	display:inline-block;
	width:100%;
	}
.con05 .main .btn li a{
	display:inline-block;
	width:100%;
	height:60px;
	line-height:60px;
	border-radius:10px;
	font-size:1.5em;
	text-decoration:none;
	text-align:center;
	color:#FFF;
	}
.con05 .main .btn li.A a{ background-color:#e60012;}



/* == 多元學習模式 == */
.study{ clear:both; margin:0 auto;
        padding:20px 0 ;
		width:100%;
		overflow:hidden;
		text-align:center;
		background-color:#eee;
		}
.study .main{
	margin:0 auto;
	padding:0 10px;
	width:100%;
	}
.study .main h1{ margin:0;
           padding:0;
		   font-size:2.6em;
		   font-weight:normal;
		   }
.study .main h2{ 
    display:block;
    margin:10px auto;
    padding:0;
	width:100%;
	height:40px;
	line-height:40px;
	font-size:1.6em;
	font-weight:normal;
	color:#FFF;
	text-align:center;
	background-color:#000;
		   }
.study .main ul{ 
           margin:20px auto;
           padding:0 15px;
		   overflow:hidden;
		   text-align:center;
		   }
.study .main li{ 
           display: inline-block;
           margin:0; padding:0;
		   width:90%;
		   float:none;}
.study .main li h3{ display:block; width:100%; height:auto; }
.study .main li h4{ display:block;
              width:100%; height:50px; line-height:50px;
			  background-color:#2ec34a;
			  font-size:1.6em;
			  color:#FFF; }
.study .main li .box01{ padding:10px 0; width:100%;
                  font-size:1.2em; line-height:1.6;
				  border-bottom:1px solid #CCC;}
.study .main li .box02{ padding:10px 0;
                  font-size:1em; line-height:1.6;
				  text-align:center;
				  color:#CCC;}
.study .main li .box02 a{ color:#e60015;}
.study .main li .box02 a:hover{ text-decoration:none;}
		   
.study .main .btn {clear:both; padding:0;}
.study .main .btn ul {
	margin:0;
	padding:0;
	list-style:none;
	text-align:center;
	}
.study .main .btn li {
	display:inline-block;
	width:100%;
	margin:2px 0;
	}
.study .main .btn li a{
	display:inline-block;
	width:100%;
	height:60px;
	line-height:60px;
	border-radius:10px;
	font-size:1.5em;
	text-decoration:none;
	text-align:center;
	color:#FFF;
	}
.study .main .btn li.A a{ background-color:#e60012;}
.study .main .btn li.B a{ background-color:#000;}
		   




/* == 班址 == */
.footer{ width:100%;
         height:auto;
	     background-color:#888;
		 overflow:hidden;
	  }
.footer-con{ margin:0 auto;
             padding:30px 0;
             width:100%;
		     height:auto;
			 overflow:hidden;
		  }
.footer-conL{ margin:0 auto 15px auto; width:100%; max-width:230px;
              float:none;}
.footer-conR{ width:100%;
              float:none;}
.footer-conR ul{ width:100%; margin:0 auto; padding:0 0 0 6%;}
.footer-conR li a{ display:block;
                   padding:0;
				   margin:0 0 10px 0;
				   width:30%;
				   height:21px;
                   font-size:18px;
				   text-decoration:none;
				   color:#FFF;
				   float:left;
				   }
}


/* == 平版版型區 ============================================================================= */
@media screen and ( min-width:768px ) and ( max-width:1024px ){
	
.head{ width:100%; height:0; background:url(../images/banner.jpg); background-position:center; background-size:cover; padding-bottom:55%;}
.head .main { margin:0 auto; width:100%;}
.head .main h1 a{
	float:left;
	margin:32px 0 20px 160px;
	padding: 0 0 0 20px;
	display:block;
	width:320px;
	height:34px;
	overflow:hidden;
	border-radius:50px;
	background: #F00;
	color:#fff;
	font-size:0.65em;
	text-align:left;
	line-height:34px;
	}
.head .board{ margin:-50px 5px 0 0; float:right; width:360px; height:0; background:url(../images/board.png) no-repeat; background-size:cover; padding-bottom:50%;}
.head .btn a{
	float:right; 
	display:block;
	margin:300px 35px 0;
	width:40%;
	height:40px;
	line-height:40px;
	background-color:#fff100;
	border-radius:10px;
	font-size:1.2em;
	color:#000;
	text-decoration:none;
	text-align:center;
	}
.head_m {
	display:none;
	}

/* == 麵包屑 == */
.path{ margin:0 auto; padding:0 2%; width:100%; font-size:15px; line-height:50px; color:#666; }
.path ol{ margin:0; padding:0; width:100%;}
.path li{ margin:0; padding:0; display:inline-block;}
.path li a{ color:#000; text-decoration:underline;}
.path li a:hover{ text-decoration:none;}
		   

/* == 區塊01 == */
.con01{ width:100%; background:url(../images/bg01.gif);	}
.con01 .main{ margin:0 auto; width:100%; padding:20px 10px 0; overflow:hidden;}
.con01 .main h1 a{ display:none;}
.con01 .main h2{ margin:0; font-size:4em; color:#333; margin:40px 0 10px;}
.con01 .main .left{
	float:left;
	width:59%;
	padding:10px;
	background:#FC0;
	border-radius:15px;
	-webkit-border-radius:15px;
	}
.con01 .main .left h2{ margin:0; padding:0; font-size:1.4em; text-indent:10px;}
.con01 .main .left h3{ margin:0 ; padding:0; font-size:1.6em; line-height:1.6em; text-indent:10px; color:#e60012;}
.con01 .main .left p{ padding:20px 25px 14px; background:#FFF; font-size:1.3em; line-height:1.6; color:#444; text-align:justify; text-indent:2px;}
.con01 .main .left h4{ margin:0; padding:0 30px 0 0; background:#FFF; color:#333; font-size:1.2em; line-height:0; font-weight:normal; text-align: right;}
.con01 .main .right{
	float:right;
	display:block;
	width:40%;
	height:0;
	background:url(../images/BOX01_R.png);
	background-size:cover;
	text-indent:-9999px;
	padding-bottom:36.5%;
	}
.con01 .main .btn {clear:both; padding:40px 0 60px;}
.con01 .main .btn ul {
	margin:0;
	padding:0;
	list-style:none;
	text-align:center;
	}
.con01 .main .btn li {
	display:inline-block;
	}
.con01 .main .btn li a{
	display:inline-block;
	width:240px;
	height:60px;
	line-height:60px;
	border-radius:10px;
	font-size:1.5em;
	text-decoration:none;
	text-align:center;
	color:#FFF;
	}
.con01 .main .btn li a:hover { position:relative; top:1px; left:1px;}
.con01 .main .btn li.A a{ background-color:#000;}
.con01 .main .btn li.B a{ background-color:#e60012;}



/* == 區塊02 == */
.con02{ width:100%;	background:#8fcb24;	}
.con02 .main{ margin:0 auto; 
			 width:100%;
			 padding:50px 0 0;
			 overflow:hidden;  
			 }
.con02 .main h2{ margin:0 0 50px; font-size:3em; line-height:1.1em; color:#333; text-align: center;}
.con02 .main .left{ float:left; width:48%; height:0; background:url(../images/BOX02_L.png) no-repeat; background-size:cover; text-indent:-9999px; padding-bottom:45%;}
.con02 .main .right { float:right; width:48%; height:0; background:url(../images/BOX02_R.png) no-repeat; background-size:cover; text-indent:-9999px;padding-bottom:45%;}
.con02 .main .btn {clear:both; padding:40px 0 60px;}
.con02 .main .btn ul {
	margin:0;
	padding:0;
	list-style:none;
	text-align:center;
	}
.con02 .main .btn li {
	display:inline-block;
	}
.con02 .main .btn li a{
	display:inline-block;
	width:240px;
	height:60px;
	line-height:60px;
	border-radius:10px;
	font-size:1.5em;
	text-decoration:none;
	text-align:center;
	color:#FFF;
	}
.con02 .main .btn li a:hover { position:relative; top:1px; left:1px;}
.con02 .main .btn li.A a{ background-color:#003d3a;}
.con02 .main .btn li.B a{ background-color:#e60012;}
		   
			      
			   
			   
/* == 區塊03 == */
.con03{ width:100%; background:#eee;	}
.con03 .main{ margin:0 auto; 
             padding:50px 0 0;
			 width:100%;
			 text-align:center;
			 overflow:hidden;
			 }
.con03 .main h2{ margin:0; font-size:3.6em; color:#333;}
.con03 .main h3{ margin:10px auto; display:block; width:300px; font-size:1.4em; text-align:center;}
.con03 .main h4{ clear:both; margin:0; font-size:1.8em; color:#333;}
.con03 .box { margin:30px 0 0; overflow:hidden;}
.con03 .box .left { float:left; padding:50px 0 0; width:42%; }
.con03 .box .left img{ width:280px;}
.con03 .box .right { float:right; width:58%;}
.con03 .box .right ul{ margin:0 auto; overflow:hidden;}
.con03 .box .right li{ display:inline-block; margin:15px ; float:left; width:40%;}
.con03 .box .right li img{ width:180px;}

.con03 .main .btn {clear:both; padding:40px 0 60px;}
.con03 .main .btn ul {
	margin:0;
	padding:0;
	list-style:none;
	text-align:center;
	}
.con03 .main .btn li {
	display:inline-block;
	}
.con03 .main .btn li a{
	display:inline-block;
	width:280px;
	height:60px;
	line-height:60px;
	border-radius:10px;
	font-size:1.5em;
	text-decoration:none;
	text-align:center;
	color:#FFF;
	}
.con03 .main .btn li a:hover { position:relative; top:1px; left:1px;}
.con03 .main .btn li.A a{ background-color:#e60012;}
.con03 .main .btn li.B a{ background-color:#000;}


/* == 區塊04 == */
.con04{ width:100%; padding:50px 20px; background-color:#eb6100; text-align:center;}
.con04 .main{ margin:0 auto; width:100%; max-width:100%;}
.con04 h2{ font-size:3.2em; font-weight:normal; color:#FFF;}
.con04 ul{ margin:30px 0 20px; padding:0; width:100%; overflow:hidden;}
.con04 li{ display: inline-block; width:48%; height:300px; float:none;}
.con04 li .box01{ margin:0 auto 20px ; width:50px; height:50px; line-height:50px; border-radius:50%;
                 font-size:2.5em; color:#FFF;}
.con04 li .box01-a{ background-color:#7561d7; }
.con04 li .box01-b{ background-color:#1fbe75; }
.con04 li .box01-c{ background-color:#00a0e9; }
.con04 li .box01-d{ background-color:#00c6bd; }
.con04 li h3{ display:block; width:100%; height:60px; line-height:60px;
              font-size:2em; color:#FFF;}
.con04 li h3.a{ background-color:#7561d7;}
.con04 li h3.b{ background-color:#1fbe75;}
.con04 li h3.c{ background-color:#00a0e9;}
.con04 li h3.d{ background-color:#00c6bd;}
.con04 li .box02{ margin:0; padding:20px 25px; width:100%; height:150px; background-color:#FFF; text-align:left;}
.con04 li .box02 p{ font-size:1.7em;}
.con04 img{ clear:both; width:100%; height:auto;}


/* == 區塊05 == */
.con05{ width:100%;	background:#26cfff;	}
.con05 .main{ margin:0 auto; padding:0;
			 width:100%;
			 padding:50px 0 0;
             text-align:center;
			 overflow:hidden;  
			 }
.con05 .main h2{ margin:0 0 40px; font-size:3.2em; line-height:1.1em; color:#333;}
.con05 .main h3{ clear:both; margin:0;font-size:1.8em; color:#333;}
.con05 .main dl{
	display: inline-block;
	float:left;
	margin:0 15px 30px;
	padding:25px;
	width:46%;
	border-radius:20px;
	-webkit-border-radius:20px;
	border:12px solid #0075a9;
	text-align:left;
	}
.con05 .main dl.a{ background:url(../images/BOX04_L.png) no-repeat #FFF 25px 25px; background-size:30%; }
.con05 .main dl.b{ background:url(../images/BOX04_R.png) no-repeat #fff 25px 25px; background-size:30%; }
.con05 .main dt{ font-size:1.6em; line-height:1.2em; font-weight:bold; padding: 0 0 30px 120px; border-bottom:5px solid #eee; }
.con05 .main dd ul{ margin:20px 0 0 10px;}
.con05 .main dd li { font-size:1em; line-height:1.8em; }
.con05 .main dd li a{ color:#ff3300;}
.con05 .main dd li a:hover{ text-decoration:none;}
.con05 .main img{ margin:40px auto 50px;	width:350px; height:60px; }	

.con05 .main .btn {clear:both; padding:40px 0 60px;}
.con05 .main .btn ul {
	margin:0;
	padding:0;
	list-style:none;
	text-align:center;
	}
.con05 .main .btn li {
	display:inline-block;
	}
.con05 .main .btn li a{
	display:inline-block;
	width:280px;
	height:60px;
	line-height:60px;
	border-radius:10px;
	font-size:1.5em;
	text-decoration:none;
	text-align:center;
	color:#FFF;
	}
.con05 .main .btn li a:hover { position:relative; top:1px; left:1px;}
.con05 .main .btn li.A a{ background-color:#e60012;}	   


/* == 多元學習模式 == */
.study{ clear:both; margin:0 auto;
        padding:50px 0;
		width:100%;
		background:url(../images/bg01.gif);
		overflow:hidden;
		text-align:center;
		}
.study .main{
	margin:0 auto;
	width:100%;
	}
.study h1{ margin:0;
           padding:0;
		   font-size:2.6em;
		   font-weight:normal;
		   }
.study h2{ display:block;
           margin:10px auto;
		   padding:0;
		   width:310px;
		   height:40px;
		   line-height:40px;
		   font-size:1.6em;
		   font-weight:normal;
		   color:#FFF;
		   text-align:center;
		   background-color:#000;
		   }
.study h3{ margin:10px auto; display:block; width:300px; font-size:1.4em; text-align:center;}

.study .box ul{ margin:20px auto;
           padding:0;
		   width:100%;
		   overflow:hidden;
		   text-align:center;
		   }
.study .box li{ display:block;
           margin:0 1%; padding:0;
		   width:23%;
		   float:left;}
.study .box li h5{ display:block; width:100%; height:auto; }
.study .box li h4{ display:block;
              width:100%; height:50px; line-height:50px;
			  background-color:#2ec34a;
			  font-size:1.6em;
			  color:#FFF; }
.study .box li .box01{ padding:10px 0; width:100%;
                  font-size:1.2em; line-height:1.6;
				  border-bottom:1px solid #CCC;}
.study .box li .box02{ padding:10px 0;
                  font-size:1em; line-height:1.6;
				  text-align:center;
				  color:#e60015;}
.study .box li .box02 a{ color:#e60015;}
.study .box li .box02 a:hover{ text-decoration:none;}
		   
.study .main .btn {clear:both; }
.study .main .btn ul {
	margin:0;
	padding:0;
	list-style:none;
	text-align:center;
	}
.study .main .btn li {
	display:inline-block;
	}
.study .main .btn li a{
	display:inline-block;
	width:300px;
	height:60px;
	line-height:60px;
	border-radius:10px;
	font-size:2em;
	text-decoration:none;
	text-align:center;
	color:#FFF;
	}
.study .main .btn li a:hover { position:relative; top:1px; left:1px;}
.study .main .btn li.A a{ background-color:#e60012;}
.study .main .btn li.B a{ background-color:#000;}



/* == 班址 == */
.footer{ width:100%;
      height:auto;
	  background-color:#888;
	  }
.footer-con{ margin:0 auto;
          padding:30px 0;
          width:100%;
		  height:auto;
		  display:inline-block;
		  }
.footer-conL{ margin:10px auto; width:23%; float:left;}
.footer-conR{ margin:0 auto; width:77%; float:right;}
.footer-conR ul{ width:100%; margin:0;}
.footer-conR li a{ display:block;
                   padding:0;
				   margin:0 0 10px 0;
				   width:20%;
				   height:21px;
                   font-size:18px;
				   text-decoration:none;
				   color:#FFF;
				   float:left;
				   }
	
	
	}