@charset "utf-8";
/* CSS Document */

*{ 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;}

.co1{ color:#c41a1f;}
.co2{ color:#ffffff;}

/* == 桌機版優先 ============================================================================= */
.btn { clear:both; margin:0 auto; padding:0; width:35%;}
.btn a{ display:block; padding:0 15px;height:60px; line-height:60px;	border-radius:3px;  -webkit-border-radius:3px;	font-size:2em; text-decoration:none; text-align:center; color:#FFF; font-weight:bold; background-color:#000000;}
.btn a:hover { position:relative; top:1px; left:1px;}

.btn2 { clear:both; margin:30px 0 0 0; padding:0; width:100%;}
.btn2 ul { margin:0; padding:0; width:100%;	list-style:none; text-align:center;	}
.btn2 li { display:inline-block;}
.btn2 li a{ display:inline-block; width:100%; height:60px; line-height:60px; padding:0 30px; border-radius:3px;  -webkit-border-radius:3px;	font-size:2em; text-decoration:none; text-align:center; color:#FFF;}
.btn2 li a:hover { position:relative; top:1px; left:1px;}
.btn2 li.A a{ background-color:#c30000;}
.btn2 li.B a{ background-color:#000000;}

/*2018.3/30增加置頂選單*/
.top{ margin:0; padding:0;
      width:100%;
	  height:60px; line-height:60px;
	  background-color:#000;
	  font-size:1.1em; color:#666;
	  position:fixed; z-index:999;
	  top:0;
	  text-align:center;
	  }
.top a{ text-decoration:none; color:#FFF;}
.top a:hover{ text-decoration:underline;}

/* == 刊頭 == */
.head{ width:100%; margin: 60px 0 0 0;
       height:650px;
       background-image:url(../images/hand-xl.jpg);
	   background-repeat:no-repeat;
	   background-position:top;
	   background-size:cover;
	   overflow:hidden;
	   }

/* == 麵包屑 == */
.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;}

/* == 區塊1 == */		 
.con01{ margin:0 auto;
        padding:80px 20px 80px 20px;
		width:100%;
		max-width:1000px;
		}
.con01-image{ margin:0 auto; width:100%; max-width:330px; height:auto;}
.con01 h2{ margin:0 auto; padding:20px 0; width:100%;
           display:block; font-size:3.3em;
		   text-align:center; color:#ffffff; background-color:#000;
		   }
.con01 ul{ margin:40px 0; padding:0; width:100%; overflow:hidden;}
.con01 ul li{ display:block; float:left; margin:0 10px; width:300px;}
.con01 ul li .imagebox{ margin:0 auto; width:100%; max-width:125px; text-align:center;}
.con01 ul li h3{ display:block; padding:20px 0; width:300px; height:auto;
                 text-align:center; font-size:2em; color:#FFF; 
				 border-radius:10px 10px 0 0;}
.con01 ul li h3.a{ background-color:#c30000;}
.con01 ul li h3.b{ background-color:#00bc54;}
.con01 ul li h3.c{ background-color:#00aace;}
.con01 ul li .textbox{ margin:0; padding:20px 20px 0 20px; width:300px; height:130px;
                       font-size:1.4em; text-align:center; color:#333;
					   border-radius:0 0 10px 10px; font-weight:bold;
					   }
.con01 ul li .textbox.b01{ border:3px solid #c30000;}
.con01 ul li .textbox.b02{ border:3px solid #00bc54;}
.con01 ul li .textbox.b03{ border:3px solid #00aace;}
.con01 h4{ margin:0; padding:0 0 40px 0; font-size:1.8em; font-weight:normal;}


/* == 區塊2 == */
.con02{ margin:0 auto;
        padding:80px 0;
		width:100%;
		background-color:#f5f5f5; overflow:hidden; background-image:url(../images/bg002_10.gif);
		}
.con02 .main{ margin:0 auto; padding:0 20px;
			  width:100%; max-width:1000px;
			 }
.con02 .con02-image{ margin:0 auto; width:100%; max-width:235px; height:auto;}
.con02 .main h2{ margin:0 auto; padding:20px 0; width:100%;
                 display:block; font-size:3.3em;
		         text-align:center; color:#ffffff; background-color:#000;
		       }
.con02 .main h3{ margin:0; padding:0 0 40px 0; font-size:1.7em; line-height:1.6; color:#c30000; text-align:center;}
.con02 .main ul{ margin:40px 0; padding:0; width:100%; overflow:hidden;}
.con02 .main ul li{ display:block; float:left; margin:15px; padding:20px;
                    width:450px; height:auto;
					border:3px solid #a5a5a5; border-radius:5px; background-color:#FFF;
					}
.con02 .main ul li p{ margin:0; padding:0 0 5px 0; font-size:1.6em; font-weight:bold;}
.con02 .main ul li p.fc01{ color:#c30000;}
.con02 .main ul li p.fc02{ color:#00cc60;}
.con02 .main ul li p.fc03{ color:#00aace;}
.con02 .main ul li .con02-btn{ display:block; float:left; margin:0 2px 2px 0; font-size:2em; color:#FFF; border-radius:5px;}
.con02 .main ul li .con02-btn a{ display:block; padding:10px; text-decoration:none; color:#FFF;}
.con02 .main ul li .A{ background-color:#c30000;}
.con02 .main ul li .B{ background-color:#00cc60;}
.con02 .main ul li .C{ background-color:#00aace;}

/* == 區塊3 == */
.con03{ margin:0 auto; padding:80px 20px;
		width:100%; overflow:hidden; background-color:#00bc54; }
.con03 .main{ margin:0 auto; padding:0 20px;
			  width:100%; max-width:1000px;
			 }
.con03-image{ margin:0 auto; width:100%; max-width:235px; height:auto;}
.con03 h2{ margin:0 auto; padding:20px 0; width:60%;
           display:block; font-size:3.3em;
		   text-align:center; color:#ffffff; background-color:#000;
		   }
.con03 h3{ padding:20px 0; font-size:1.8em; text-align:center; font-weight:normal; line-height:1.5; color:#FFF;}
.con03 ul{ margin:0; padding:0 90px 40px 90px; width:100%; overflow:hidden;}
.con03 li{ display:block; float:left; margin:0 10px; width:240px; text-align:center}
.con03 li img{ margin:10px 0; width:100%; max-width:165px;}
.con03 li h3{ display:block; margin:0 auto; padding:0; width:100%; height:60px; line-height:60px;
              border-radius:10px; background-color:#ffffff;
			  font-size:1.9em; color:#00bc54;}
.con03 li h3 a{ display:block; color:#00bc54; text-decoration:none;}

/* == 多元學習模式 == */
.con04{ clear:both; margin:0 auto;
        padding:80px 0;
		width:100%;
		text-align:center;
		background-color:#f8f8f8;
		}
.con04 h2{ margin:0 auto; padding:20px 0; width:60%;
           display:block; font-size:3.3em;
		   border:3px solid #eb3f90; text-align:center; color:#eb3f90;
		   background-color:#FFF;
		   }
.con04 h3{ text-align:center;
           font-size:1.6em; line-height:1.5;
		   font-weight:normal;
		   padding:30px 0 0 0;
		   }
.con04-main{ margin:0 auto;
             width:100%;
             max-width:1000px;
		     overflow:hidden;
			 }
.con04-main ul{ margin:50px auto 0 auto;
           padding:0;
		   width:100%;
		   overflow:hidden;
		   }
.con04-main li{ display:block;
           margin:0 20px; padding:0;
		   width:210px;
		   float:left;}
.con04-main li h4{ display:block; width:210px; height:100px; }
.con04-main li h5{ display:block;
              width:210px; height:50px; line-height:50px;
			  background-color:#6a6a6a;
			  font-size:1.6em;
			  color:#ffffff; }
.con04-main li .box01{ padding:10px 0; width:210px;
                  font-size:1.3em; line-height:1.6;
				  border-bottom:1px solid #CCC;}
.con04-main li .box02{ padding:10px 0;
                  font-size:1.2em; line-height:1.6;
				  text-align:center;
				  color:#CCC;}
.con04-main li .box02 a{ color:#c30000;}
.con04-main li .box02 a:hover{ text-decoration:none;}


/* 多元學習模式 */
.studymode{ padding:100px calc((100% - 1200px)/2); text-align: center;}
.studymode h1{ font-size: 3.5em; color: #01a280;}
.studymode h2{ display: inline-block; margin: 30px 0; padding: 10px 20px; font-size:1.6em; color: #2c3c49; border:1px solid #2c3c49;}
.studymode ul {display: flex;justify-content: space-between;margin: 60px 0px 40px 0px;}
.studymode ul:nth-of-type(2) {justify-content: space-evenly;}
.studymode ul li {width: 28.5%;}
.studymode ul li .topword {margin: 0px 0px 10px 0px;display: flex;justify-content: flex-start;align-items: center;}
.studymode ul li .topword .circle {display: flex;justify-content: flex-start;width: 40%;}
.studymode ul li .topword .circle span {width: 36px;height: 36px;display: flex;justify-content: center;align-items: center;font-size: 1.8rem;font-weight: 700;color: #3d85f9;border-radius: 999px;outline: #fbb03b 2px solid;}
.studymode ul li .topword p {width: 60%;padding: 3px 0px;font-size: 1.35rem;font-weight: 700;font-style: italic; color: #fbb03b;text-align: justify;border-bottom: #fbb03b 2px solid;}
.studymode ul li .topword span:nth-child(2) {transform: translate(-2px);}
.studymode ul li .topword span:nth-child(3) {transform: translate(-4px);}
.studymode img {max-width: 100%;display: block;margin: 0 auto;}
.studymode ul li .box p {margin: 20px 0px 0px 0px;padding: 12px 0px 0px;font-size:1.4rem; line-height: 1.6;color: #4d4d4d;border-top: #4d4d4d 1px solid;}
.studymode .btn{ display: flex; justify-content: center;align-items: center; gap: 20px; width: 100%;}
.studymode .btn a{ padding: 0 15px; height: 60px; line-height: 60px; border-radius: 3px; -webkit-border-radius: 3px; font-size: 2em; text-decoration: none; text-align: center; color: #FFF; font-weight: bold; background-color: #000000;}
/* .studymode .btn a.A{ background-color: #f95a57;}
.studymode .btn a.B{ background-color: #2c3c49;} */
.studymodemobile {display: none;}

/* == 班址 == */
.FOOTER{ margin:1px 0 0;width:100%; background-color:#2c3c49;  overflow:hidden;}
.FOOTER-CON{ margin:0 auto; padding:50px 0; max-width:1200px; display: flex; justify-content: center; align-items: center; overflow:hidden; }
.FOOTER-CONL{ max-width:230px;}
.FOOTER-CONR ul{ margin:0; display: flex; flex-wrap: wrap;}
.FOOTER-CONR li{ width: 24%;}
.FOOTER-CONR li a{ display:block; padding:0; margin:0 40px 10px 0; height:21px; font-size:20px; text-decoration:none; color:#FFF;  }
				   
				   
/* == 平版版型區 ============================================================================= */
@media screen and ( min-width:768px ) and ( max-width:1024px ){
.btn { clear:both; margin:0 auto; padding:0; width:35%;}
.btn a{ display:block; padding:0 15px;height:60px; line-height:60px;	border-radius:3px;  -webkit-border-radius:3px;	font-size:2em; text-decoration:none; text-align:center; color:#FFF; font-weight:bold; background-color:#000000;}
.btn a:hover { position:relative; top:1px; left:1px;}

.btn2 { clear:both; margin:20px 0 0 0; padding:0; width:100%;}
.btn2 ul { margin:0; padding:0; width:100%;	list-style:none; text-align:center;	}
.btn2 li { display:inline-block;}
.btn2 li a{ display:inline-block; width:100%; height:60px; line-height:60px; padding:0 30px; border-radius:3px;  -webkit-border-radius:3px;	font-size:2em; text-decoration:none; text-align:center; color:#FFF;}
.btn2 li a:hover { position:relative; top:1px; left:1px;}
.btn2 li.A a{ background-color:#c30000;}
.btn2 li.B a{ background-color:#000000;}

/*2018.3/30增加置頂選單*/
.top{ margin:0; padding:0;
      width:100%;
	  height:60px; line-height:60px;
	  background-color:#000;
	  font-size:1em; color:#666;
	  position:fixed; z-index:999;
	  top:0;
	  text-align:center;
	  }
.top a{ text-decoration:none; color:#FFF;}
.top a:hover{ text-decoration:underline;}	

.head{ width:100%;
       height:auto;
	   margin:60px 0 0 0;
	   padding-bottom:95%;
	   background-image:url(../images/hand-m.jpg);
	   background-size:cover;
	   overflow:hidden;
       }
/* == 麵包屑 == */
.path{ margin:0 auto 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;}			   
		 
/* == 區塊1 == */		 
.con01{ margin:0 auto;
        padding:80px 20px;
		width:100%;
		}
.con01-image{ margin:0 auto; width:100%; max-width:330px; height:auto;}
.con01 h2{ margin:0 auto; padding:20px 0; width:100%;
           display:block; font-size:3em;
		   text-align:center; color:#ffffff; background-color:#000;
		   }
.con01 ul{ margin:30px 0; padding:0; width:100%; overflow:hidden;}
.con01 ul li{ display:block; float:left; margin:0 1%; width:31%;}
.con01 ul li .imagebox{ margin:0 auto; width:100%; max-width:125px; text-align:center;}
.con01 ul li h3{ display:block; padding:20px 0; width:100%; height:auto;
                 text-align:center; font-size:2em; color:#FFF; 
				 border-radius:10px 10px 0 0;}
.con01 ul li h3.a{ background-color:#c30000;}
.con01 ul li h3.b{ background-color:#00bc54;}
.con01 ul li h3.c{ background-color:#00aace;}
.con01 ul li .textbox{ margin:0; padding:10px 10px 0 10px; width:100%; height:150px;
                       font-size:1.4em; text-align:center; color:#333;
					   border-radius:0 0 10px 10px; font-weight:bold;
					   }
.con01 ul li .textbox.b01{ border:3px solid #c30000;}
.con01 ul li .textbox.b02{ border:3px solid #00bc54;}
.con01 ul li .textbox.b03{ border:3px solid #00aace;}
.con01 h4{ margin:0; padding:0 0 20px 0; font-size:1.5em; font-weight:normal; text-align:center;}


/* == 區塊2 == */
.con02{ margin:0 auto;
        padding:80px 0;
		width:100%;
		background-color:#f5f5f5; overflow:hidden; background-image:url(../images/bg002_10.gif);
		}
.con02 .main{ margin:0 auto; padding:0 20px;
			  width:100%;
			 }
.con02 .con02-image{ margin:0 auto; width:100%; max-width:235px; height:auto;}
.con02 .main h2{ margin:0 auto; padding:20px 0; width:100%;
                 display:block; font-size:3em;
		         text-align:center; color:#ffffff; background-color:#000;
		       }
.con02 .main h3{ margin:0; padding:0 0 20px 0; font-size:1.5em; line-height:1.6; color:#c30000; text-align:center;}
.con02 .main ul{ margin:30px 0; padding:0; width:100%; overflow:hidden;}
.con02 .main ul li{ display:block; float:left; margin:1%; padding:20px;
                    width:48%; height:auto;
					border:3px solid #a5a5a5; border-radius:5px; background-color:#FFF;
					}
.con02 .main ul li p{ margin:0; padding:0 0 5px 0; font-size:1.6em; font-weight:bold;}
.con02 .main ul li p.fc01{ color:#c30000;}
.con02 .main ul li p.fc02{ color:#00cc60;}
.con02 .main ul li p.fc03{ color:#00aace;}
.con02 .main ul li .con02-btn{ display:block; float:left; margin:0 2px 2px 0; font-size:2em; color:#FFF; border-radius:5px;}
.con02 .main ul li .con02-btn a{ display:block; padding:10px; text-decoration:none; color:#FFF;}
.con02 .main ul li .A{ background-color:#c30000;}
.con02 .main ul li .B{ background-color:#00cc60;}
.con02 .main ul li .C{ background-color:#00aace;}

/* == 區塊3 == */
.con03{ margin:0 auto; padding:80px 20px;
		width:100%; overflow:hidden; background-color:#00bc54; }
.con03 .main{ margin:0 auto; padding:0 20px;
			  width:100%;}
			  
.con03-image{ margin:0 auto; width:100%; max-width:235px; height:auto;}
.con03 h2{ margin:0 auto; padding:20px 0; width:60%;
           display:block; font-size:3.3em;
		   text-align:center; color:#ffffff; background-color:#000;
		   }
.con03 h3{ padding:20px 0; font-size:1.8em; text-align:center; font-weight:normal; line-height:1.5; color:#FFF;}
.con03 ul{ margin:0; padding:0 90px 40px 90px; width:100%; overflow:hidden;}
.con03 li{ display:block; float:left; margin:0 1%; width:31%; text-align:center}
.con03 li img{ margin:10px 0; width:100%; max-width:165px;}
.con03 li h3{ display:block; margin:0 auto; padding:0; width:100%; height:60px; line-height:60px;
              border-radius:10px; background-color:#ffffff;
			  font-size:1.9em; color:#00bc54;}
.con03 li h3 a{ display:block; color:#00bc54; text-decoration:none;}


/* == 多元學習模式 == */
.con04{ clear:both; margin:0 auto;
        padding:60px 0 50px 0;
		width:100%;
		overflow:hidden;
		text-align:center;
		}
.con04 h2{ margin:0 2%; padding:20px 0; width:96%;
           display:block; font-size:3em;
		   border:3px solid #eb3f90; text-align:center; color:#eb3f90;
		   background-color:#FFF;
		   }
.con04 h3{ text-align:center;
           font-size:1.4em;
		   font-weight:normal;
		   padding:10px 10px;
		   }
.con04-main{ margin:0 auto;
             width:100%;
		     overflow:hidden;
			 }
.con04-main ul{ margin:10px auto;
           padding:0;
		   width:100%;
		   overflow:hidden;
		   text-align:center;
		   }
.con04-main li{ display:block;
           margin:0 1%; padding:0;
		   width:23%;
		   float:left;}
.con04-main li h4{ display:block; width:100%; height:auto; }
.con04-main li h5{ display:block;
              width:100%; height:50px; line-height:50px;
			  background-color:#6a6a6a;
			  font-size:1.6em;
			  color:#ffffff; }
.con04-main li .box01{ padding:10px 0; width:100%;
                  font-size:1.2em; line-height:1.6;
				  border-bottom:1px solid #CCC;
				  }
.con04-main li .box02{ padding:10px 0;
                  font-size:1em; line-height:1.6;
				  text-align:center;
				  color:#CCC;}
.con04-main li .box02 a{ color:#c30000;}
.con04-main li .box02 a:hover{ text-decoration:none;}



/* == 班址 == */
.FOOTER{ width:100%;
      height:auto;
	  background-color:#1d1d1d;
	  }
.FOOTER-CON{ margin:0 auto;
          padding:30px 0;
          width:100%;
		  height:auto;
		  display:inline-block;
		  }
.FOOTER-CON{ margin:10px auto; width:23%; float:left;}
.FOOTER-CONR{ margin:0 auto; width:77%; float:right;}
.FOOTER-CONR ul{ width:100%; margin:0;}
.FOOTER-CONE 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;
				   }

}



/* == 手機版型區 ============================================================================= */
@media screen and ( max-width:767px ){
.btn { clear:both; margin:0 auto; padding:0; width:80%;}
.btn a{ display:block; padding:0 15px;height:60px; line-height:60px;	border-radius:3px;  -webkit-border-radius:3px;	font-size:1.3em; text-decoration:none; text-align:center; color:#FFF; font-weight:bold; background-color:#000000;}
.btn a:hover { position:relative; top:1px; left:1px;}

.btn2 { clear:both; margin:20px 0 0 0; padding:0; width:100%;}
.btn2 ul { margin:0; padding:0; width:100%;	list-style:none; text-align:center;	}
.btn2 li { display:inline-block; margin:0 0 5px 0;}
.btn2 li a{ display:inline-block; width:100%; height:50px; line-height:50px; padding:0 20px; border-radius:3px;  -webkit-border-radius:3px;	font-size:1.3em; text-decoration:none; text-align:center; color:#FFF;}
.btn2 li a:hover { position:relative; top:1px; left:1px;}
.btn2 li.A a{ background-color:#c30000;}
.btn2 li.B a{ background-color:#000000;}

/*2018.3/30增加置頂選單*/
.top{ margin:0; padding:0;
      width:100%;
	  height:50px; line-height:50px;
	  background-color:#000;
	  font-size:0.8em; color:#666;
	  position:fixed; z-index:999;
	  top:0;
	  text-align:center;
	  }
.top a{ text-decoration:none; color:#FFF;}
.top a:hover{ text-decoration:underline;}	

/* == 刊頭 == */
.head{ width:100%;
       height:auto;
	   margin:50px 0 0 0;
	   padding-bottom:140%;
	   background-image:url(../images/hand-s.jpg);
	   background-size:cover;
	   overflow:hidden;
       }
/* == 麵包屑 == */
.path{ display:none;}
	
/* == 區塊1 == */		 
.con01{ margin:0 auto;
        padding:40px 10px;
		width:100%;
		}
.con01-image{ margin:0 auto; width:100%; max-width:231px; height:auto;}
.con01 h2{ margin:0 auto; padding:15px 10px; width:100%;
           display:block; font-size:1.9em;
		   text-align:center; color:#ffffff; background-color:#000;
		   }
.con01 ul{ margin:20px 0 0 0; padding:0; width:100%; overflow:hidden;}
.con01 ul li{ display:block; float:none; margin:0 0 20px 0; width:100%;}
.con01 ul li .imagebox{ margin:0 auto; width:100%; max-width:100px; text-align:center;}
.con01 ul li h3{ display:block; padding:10px 0; width:100%; height:auto;
                 text-align:center; font-size:1.6em; color:#FFF; 
				 border-radius:10px 10px 0 0;}
.con01 ul li h3.a{ background-color:#c30000;}
.con01 ul li h3.b{ background-color:#00bc54;}
.con01 ul li h3.c{ background-color:#00aace;}
.con01 ul li .textbox{ margin:0; padding:10px; width:100%; height:auto;
                       font-size:1.1em; text-align:center; color:#333;
					   border-radius:0 0 10px 10px; font-weight:bold;
					   }
.con01 ul li .textbox.b01{ border:3px solid #c30000;}
.con01 ul li .textbox.b02{ border:3px solid #00bc54;}
.con01 ul li .textbox.b03{ border:3px solid #00aace;}
.con01 h4{ margin:0; padding:0 0 20px 0; font-size:1em; font-weight:normal; text-align:center;}

/* == 區塊2 == */
.con02{ margin:0 auto;
        padding:40px 0;
		width:100%;
		background-color:#f5f5f5; overflow:hidden; background-image:url(../images/bg002_10.gif);
		}
.con02 .main{ margin:0 auto; padding:0 10px;
			  width:100%;
			 }
.con02 .con02-image{ margin:0 auto; width:100%; max-width:188px; height:auto;}
.con02 .main h2{ margin:0 auto; padding:15px 10px; width:100%;
                 display:block; font-size:1.9em;
		         text-align:center; color:#ffffff; background-color:#000;
		       }
.con02 .main h3{ margin:0; padding:0 0 10px 0; font-size:1em; line-height:1.5; color:#c30000; text-align:left;}
.con02 .main ul{ margin:20px 0 10px 0; padding:0; width:100%; overflow:hidden;}
.con02 .main ul li{ display:block; float:none; margin:0 0 10px 0; padding:15px;
                    width:100%; height:auto; overflow:hidden;
					border:2px solid #a5a5a5; border-radius:5px; background-color:#FFF;
					}
.con02 .main ul li p{ margin:0; padding:0 0 5px 0; font-size:1.1em; font-weight:normal;}
.con02 .main ul li p.fc01{ color:#c30000;}
.con02 .main ul li p.fc02{ color:#00cc60;}
.con02 .main ul li p.fc03{ color:#00aace;}
.con02 .main ul li .con02-btn{ display:block; float:left; margin:0 2px 2px 0; font-size:1.1em; color:#FFF; border-radius:5px;}
.con02 .main ul li .con02-btn a{ display:block; padding:10px; text-decoration:none; color:#FFF;}
.con02 .main ul li .A{ background-color:#c30000;}
.con02 .main ul li .B{ background-color:#00cc60;}
.con02 .main ul li .C{ background-color:#00aace;}

/* == 區塊3 == */
.con03{ margin:0 auto; padding:40px 0;
		width:100%; overflow:hidden; background-color:#00bc54; }
.con03 .main{ margin:0 auto; padding:0 10px;
			  width:100%;}
			  
.con03-image{ margin:0 auto; width:100%; max-width:188px; height:auto;}
.con03 h2{ margin:0 auto; padding:15px 10px; width:100%;
           display:block; font-size:1.9em;
		   text-align:center; color:#ffffff; background-color:#000;
		   }
.con03 h3{ padding:10px 0; font-size:1em; text-align:left; font-weight:normal; line-height:1.5; color:#FFF;}
.con03 ul{ margin:0 0 20px 0; padding:0; width:100%; overflow:hidden;}
.con03 li{ display:block; float:none; margin:0 0 10px 0; width:100%; text-align:center}
.con03 li img{ margin:10px 0; width:100%; max-width:165px;}
.con03 li h3{ display:block; margin:0 auto; padding:0; width:70%; height:50px; line-height:50px;
              border-radius:10px; background-color:#ffffff; text-align:center;
			  font-size:1.8em; color:#00bc54;}
.con03 li h3 a{ display:block; color:#00bc54; text-decoration:none;}


/* == 多元學習模式 == */
.con04{ clear:both; margin:0 auto;
        padding:40px 0;
		width:100%;
		overflow:hidden;
		text-align:center;
		}
.con04 h2{ margin:0 auto; padding:10px 0; width:94%;
           display:block; font-size:2em;
		   border:3px solid #eb3f90; text-align:center; color:#eb3f90;
		   background-color:#FFF;
		   }
.con04 h3{ text-align:center;
           font-size:1.1em;
		   font-weight:normal;
		   padding:5px 10px;
		   }
.con04-main{ margin:0 auto;
             width:100%;
		     overflow:hidden;
			 }
.con04-main ul{ margin:10px auto 0 auto;
           padding:0 8%;
		   width:100%;
		   overflow:hidden;
		   text-align:center;
		   }
.con04-main li{ display:block;
           margin:0; padding:0;
		   width:100%;
		   float:none;}
.con04-main li h4{ display:block; width:100%; height:auto; }
.con04-main li h5{ display:block;
              width:100%; height:50px; line-height:50px;
			  background-color:#6a6a6a;
			  font-size:1.6em;
			  color:#ffffff; }
.con04-main li .box01{ padding:10px 0; width:100%;
                  font-size:1.2em; line-height:1.6;
				  border-bottom:1px solid #CCC;}
.con04-main li .box02{ padding:10px 0;
                  font-size:1em; line-height:1.6;
				  text-align:center;
				  color:#CCC;}
.con04-main li .box02 a{ color:#c30000;}
.con04-main li .box02 a:hover{ text-decoration:none;}

/*學習方式超多元*/
.studymode {display: none;}
.studymodemobile{ display: block; padding:65px 4%; text-align: center;}
.studymodemobile h1{ font-size: 7.2vw; color: #01a280;}
.studymodemobile h2{ display: inline-block; margin: 20px 0; padding: 10px 20px; font-size:4.5vw; color: #2c3c49; border: #2c3c49 1px solid;}
.studymodemobile ul {display: flex;flex-wrap: wrap;justify-content: space-between;align-items: center;gap: 25px;margin: 25px 0px 0px 0px;}
.studymodemobile ul li {width: 100%;}
.studymodemobile ul li a {cursor: pointer; text-decoration: none;}
.studymodemobile ul li .topword {margin: 0px 0px 10px 0px;display: flex;justify-content: flex-start;align-items: center;}
.studymodemobile ul li .topword .circle {display: flex;justify-content: flex-start;width: 40%;}
.studymodemobile ul li .topword .circle span {width: 10vw;height: 10vw;display: flex;justify-content: center;align-items: center;font-size: 6vw;font-weight: 700;color: #3d85f9;border-radius: 999px;outline: #fbb03b 2px solid;}
.studymodemobile ul li .topword p {width: 60%;padding: 3px 0px;font-size: 6vw;font-weight: 700;font-style: italic;color: #fbb03b;text-align: justify;border-bottom: #fbb03b 2px solid;}
.studymodemobile ul li .topword span:nth-child(2) {transform: translate(-2px);}
.studymodemobile ul li .topword span:nth-child(3) {transform: translate(-4px);}
.studymodemobile img {display: block;max-width: 100%;margin: 0 auto;}
.studymodemobile ul li i {padding: 15px 0px 10px 0px;font-size: 8vw;animation: arrowmove 1s linear infinite alternate;}
.studymodemobile ul li .sublist {display: none;}
.studymodemobile ul li .sublist p {display: inline-block;padding: 12px 0px 0px;font-size: 5.5vw;line-height: 1.6;color: #4d4d4d;border-top: #4d4d4d 1px solid;}
.studymodemobile .btn{ display: flex; justify-content: center; flex-wrap: wrap; gap: 10px;}
.studymodemobile .btn a{ display: block;padding: 0 15px;height: 60px; width: 100%;line-height: 60px;border-radius: 3px;-webkit-border-radius: 3px;font-size: 1.3em;text-decoration: none;text-align: center;color: #FFF;font-weight: bold;background-color: #000000;}
	 
/* == 班址 == */

  /* footer */
  .FOOTER-CON{flex-wrap: wrap;}
  .FOOTER-CONR{width: 100%;margin: 0 auto;}
  .FOOTER-CONR ul{margin-top:20px;}
  .FOOTER-CONR ul li{width:33%;text-align: center;}
  .FOOTER-CONR li a{margin: 0 0 10px 0;font-size:17px;}

}