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

/*置頂按鈕*/
.gotop { position: fixed; right:5px;  bottom:255px; width: 75px;  height: 75px; background-color: #fed300; display: flex; justify-content: center; align-items: center;
  opacity: 0;  transition: all 0.4s ease-in-out 0s;  z-index: 999;  border-radius: 50%; }
.gotop a{  font-size:20px; color: #000; text-decoration:none;}
.gotop:active{ box-shadow:1px 1px 3px 2px rgba(0,0,0,0.5) inset;transition: all 0s;}

/* == 桌機版優先 ============================================================================= */
.btn { clear:both; margin:30px 0 0 0; padding:0;}
.btn ul { margin:0; padding:0;	list-style:none; text-align:center;	}
.btn li { display:inline-block;}
.btn li a{ display:inline-block; padding:0 15px;height:60px; line-height:60px;	border-radius:3px;  -webkit-border-radius:3px;	font-size:1.6em; text-decoration:none; text-align:center; color:#FFF; font-weight:bold;}
.btn li a:hover { position:relative; top:1px; left:1px;}
.btn li a.A{ background-color:#000000;}
.btn li a.B{ background-color:#e4007f;}

.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:#000000;}
.btn2 li.B a{ background-color:#e4007f;}

.btn3{ clear:both; margin:0 auto; padding:0; width:35%; overflow:hidden;
       height:60px; line-height:60px; padding:0 20px; border-radius:3px;  -webkit-border-radius:3px;
	   font-size:30px; text-decoration:none; text-align:center; color:#FFF; background-color:#000000;}
.btn3 a{ display:block; color:#FFF; text-decoration:none;}
.btn3 a:hover { position:relative; top:1px; left:1px;}

/* == 刊頭 == */
.head{ width:100%;
       height:750px;
       background-image:url(../images/hand-xl.jpg);
	   background-repeat:no-repeat;
	   background-position:top;
	   background-size:cover;
	   overflow:hidden;
	   }
		 
/* == 區塊1 == */		 
.con01{ margin:0 auto;
        padding:80px 20px;
		width:100%;
		max-width:1000px;
		}
.con01-image{ margin:0 auto; width:100%; max-width:500px; height:auto;}
.con01 h2{ margin:0 auto; padding:20px 0; width:60%;
           display:block; font-size:3.3em;
		   border:3px solid #ff8b00; text-align:center; color:#ff8b00;
		   }
.con01 h3{ padding:15px 0; font-size:2em; text-align:center; font-weight:normal;}
.con01 td{ padding:15px;}
.con01 td.fs01{ font-size:2em; color:#FFF;}
.con01 td.fs02{ font-size:1.6em;}


/* == 區塊2 == */
.con02{ margin:0 auto;
        padding:80px 0;
		width:100%;
		background-color:#00c8bc; overflow:hidden;
		}
.con02 .main{ margin:0 auto; padding:0 20px;
			  width:100%; max-width:1000px;
			  text-align:center;
			 }
.con02 .main p{ margin:0; padding:0; font-size:1.5em; color:#FF0;}
.con02 .main h2{ margin:25px auto; padding:20px 0; width:75%;
                 display:block; font-size:3.3em;
		         border:3px solid #fff; text-align:center; color:#fff;}
.con02 .main-box01{ margin:0 auto; padding:0 120px; width:100%; overflow:hidden;}
.con02 .main-box01 ul{ margin:0; padding:0; width:100%; text-align:center;}
.con02 .main-box01 li{ display:block; float:left; margin:20px 20px; width:200px;}
.con02 .main-box01 li img{ width:100%; max-width:200px;}
.con02 .main-box01 li h3{ padding:10px 0 0 0; width:160px; font-size:1.7em; color:#FFF; text-align:center; }
.con02 .main-box01 li h3 a{ color:#FFF;}

.con02 .main-box02{ margin:0 auto; padding:0; width:100%; overflow:hidden; text-align:left;}
.con02 .main-box02 ul{ margin:0; padding:30px 50px; width:100%;
                       border-radius:20px; background-color:#FFF; overflow:hidden;
					   }
.con02 .main-box02 li{ display:block; float:left; padding:0 0 10px 0; width:25%; font-size:1.9em;
                       color:#e4007f;}
.con02 .main-box02 li a{ color:#e4007f; text-decoration:none; }

/* == 區塊3 == */
.con03{ margin:0 auto; padding:80px 20px;
		width:100%;	max-width:1000px; overflow:hidden;
		}
.con03-image{ margin:0 auto; width:100%; max-width:500px; height:auto;}
.con03 h2{ margin:0 auto; padding:20px 0; width:60%;
           display:block; font-size:3.3em;
		   border:3px solid #45b035; text-align:center; color:#45b035;
		   }
.con03 h3{ padding:20px 0; font-size:1.7em; text-align:center; font-weight:normal; line-height:1.5;}
.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{ width:100%; max-width:165px;}
.con03 li p{ margin:0; padding:5px 0; font-size:1.8em; color:#297fcf; line-height:1.5; }
.con03 li h3{ display:block; margin:0 auto; padding:0; width:100%; height:60px; line-height:60px;
              border-radius:10px; background-color:#45b035;
			  font-size:1.9em; color:#FFF;}
.con03 li h3 a{ display:block; color:#FFF;}

/* == 多元學習模式 == */
.studymode {
	padding: 60px calc((100% - 1000px) / 2);
	box-sizing: border-box;
	text-align: center;
	background-color: rgb(254, 235, 212);
}
  .studymode h1 {
	font-size: 60px;
	color: rgb(255, 139, 0);
  }
  .studymode h2 {
	display: inline-block;
	padding: 5px 40px;
	margin: 20px 0px 60px 0px;
	font-size: 1.8em;
	line-height: 1.4;
	color: #4d4d4d;
	text-align: center;
	border-radius: 999px;
	border: 1px dashed #4d4d4d;
  }
  .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.35rem;
	line-height: 1.6;
	color: #4d4d4d;
	border-top: #4d4d4d 1px solid;
  }
  .studymode .btn {
	display: flex;
	justify-content: space-around;
	align-items: center;
	width: 100%;
	margin: 0 auto;
  }
  .studymode .btn a {
	clear: both;
	padding: 20px 0px;
	line-height: 1;
	width: 45%;
	background-color: #000;
	font-size: 30px;
	font-weight: normal;
	color: #fff;
	text-align: center;
	text-decoration: none;
  }
  .studymodemobile {
	display: none;
  }


/* == 班址 == */
.footer{ margin:1px 0 0;width:100%; background-color:#000;  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:30px 0 0 0; padding:0;}
.btn ul { margin:0; padding:0;	list-style:none; text-align:center;	}
.btn li { display:inline-block;}
.btn li a{ display:inline-block; margin:0 0 5px 0; padding:0 15px; height:60px; line-height:60px;	border-radius:3px;  -webkit-border-radius:3px;	font-size:1.6em; text-decoration:none; text-align:center; color:#FFF; font-weight:bold;}
.btn li a:hover { position:relative; top:1px; left:1px;}
.btn li a.A{ background-color:#000000;}
.btn li a.B{ background-color:#e4007f;}

.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:#000000;}
.btn2 li.B a{ background-color:#e4007f;}

.btn3{ clear:both; margin:0 auto; padding:0; width:35%; overflow:hidden;
       height:60px; line-height:60px; padding:0 20px; border-radius:3px;  -webkit-border-radius:3px;
	   font-size:30px; text-decoration:none; text-align:center; color:#FFF; font-weight:bold; background-color:#000000;}
.btn3 a{ display:block; color:#FFF;}
.btn3 a:hover { position:relative; top:1px; left:1px;}


.head{ width:100%;
       height:auto;
	   margin:0;
	   padding-bottom:90%;
	   background-image:url(../images/hand-m.jpg);
	   background-size:cover;
	   overflow:hidden;
       }
			   
		 
/* == 區塊1 == */		 
.con01{ margin:50px auto;
        padding:0 10px;
		width:100%; overflow:hidden;
		}
.con01-image{ margin:0 auto; width:100%; height:auto;}
.con01 h2{ margin:0 auto; padding:20px 0; width:100%;
           display:block; font-size:3em;
		   border:3px solid #ff8b00; text-align:center; color:#ff8b00;
		   }
.con01 h3{ padding:15px 0; font-size:1.6em; text-align:center; font-weight:normal;}
.con01 td{ padding:15px;}
.con01 td.fs01{ font-size:1.8em; color:#FFF;}
.con01 td.fs02{ font-size:1.4em;}


/* == 區塊2 == */
.con02{ margin:0 auto;
        padding:80px 0;
		width:100%;
		background-color:#00c8bc; overflow:hidden;
		}
.con02 .main{ margin:0 auto; padding:0 20px;
			  width:100%;
			  text-align:center;
			 }
.con02 .main p{ margin:0; padding:0; font-size:1.5em; color:#FF0;}
.con02 .main h2{ margin:25px auto; padding:20px 0; width:100%;
                 display:block; font-size:3em;
		         border:3px solid #fff; text-align:center; color:#fff;}
.con02 .main-box01{ margin:0 auto; padding:0 120px; width:100%; overflow:hidden;}
.con02 .main-box01 ul{ margin:0; padding:0; width:100%; text-align:center;}
.con02 .main-box01 li{ display:block; float:left; margin:20px 20px; width:200px;}
.con02 .main-box01 li img{ width:100%; max-width:200px;}
.con02 .main-box01 li h3{ padding:10px 0 0 0; width:160px; font-size:2em; color:#FFF; text-align:center; }
.con02 .main-box01 li h3 a{ color:#FFF;}

.con02 .main-box02{ margin:0 auto; padding:0; width:100%; overflow:hidden; text-align:left;}
.con02 .main-box02 ul{ margin:0; padding:30px; width:100%;
                       border-radius:20px; background-color:#FFF; overflow:hidden;
					   }
.con02 .main-box02 li{ display:block; float:left; padding:0 0 10px 0; width:25%; font-size:1.5em;
                       color:#e4007f;}
.con02 .main-box02 li a{ color:#e4007f; text-decoration:none; }

/* == 區塊3 == */
.con03{ margin:0 auto; padding:80px 20px;
		width:100%;	overflow:hidden;
		}
.con03-image{ margin:0 auto; width:100%; max-width:500px; height:auto;}
.con03 h2{ margin:0 auto; padding:20px 0; width:100%;
           display:block; font-size:3em;
		   border:3px solid #45b035; text-align:center; color:#45b035;
		   }
.con03 h3{ padding:20px 0; font-size:1.6em; text-align:center; font-weight:normal; line-height:1.5;}
.con03 ul{ margin:0; padding:0 0 20px 0; width:100%; overflow:hidden;}
.con03 li{ display:block; float:left; margin:0; width:33%; text-align:center}
.con03 li img{ width:100%; max-width:165px;}
.con03 li p{ margin:0; padding:5px 0; font-size:1.5em; color:#297fcf; line-height:1.5; }
.con03 li h3{ display:block; margin:0 auto 20px auto; padding:0; width:90%; height:60px; line-height:60px;
              border-radius:10px; background-color:#45b035;
			  font-size:1.8em; color:#FFF;}
.con03 li h3 a{ display:block; color:#FFF;}

/* == 多元學習模式 == */
.studymode {padding: 80px 5%;}
.studymode h1 {font-size: 3em;}
.studymode ul li {width: 30%;}
.studymode ul li .topword .circle span { width: 30px; height: 30px; font-size: 1.25rem;}
.studymode ul li .topword p {font-size: 1rem;}
.studymode ul li .box p { margin: 20px 0px 0px 0px; padding: 12px 0px 0px; font-size: 1.25rem; line-height: 1.6; color: #4d4d4d; border-top: #4d4d4d 1px solid;}

 /* footer */
 .footer-conr li a{margin: 0 0 10px 0;font-size:18px;}
}



/* == 手機版型區 ============================================================================= */
@media screen and ( max-width:767px ){
.btn { clear:both; margin:10px 0 0 0; padding:0;}
.btn ul { margin:0; padding:0;	list-style:none; text-align:center; width:100%;}
.btn li { display:inline-block; width:80%;}
.btn li a{ display:inline-block; margin:0 0 5px 0; padding:0; width:100%; height:50px; line-height:50px;	border-radius:3px;  -webkit-border-radius:3px;	font-size:1.2em; text-decoration:none; text-align:center; color:#FFF; font-weight:bold;}
.btn li a:hover { position:relative; top:1px; left:1px;}
.btn li a.A{ background-color:#000000;}
.btn li a.B{ background-color:#e4007f;}

.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:block;}
.btn2 li a{ display:block; width:80%; margin:0 auto 5px auto; height:50px; line-height:50px; padding:0; border-radius:3px;  -webkit-border-radius:3px;	font-size:1.4em; text-decoration:none; text-align:center; color:#FFF;}
.btn2 li a:hover { position:relative; top:1px; left:1px;}
.btn2 li.A a{ background-color:#000000;}
.btn2 li.B a{ background-color:#e4007f;}

.btn3{ clear:both; margin:0 auto; padding:0; width:50%; overflow:hidden;
       height:50px; line-height:50px; padding:0; border-radius:3px;  -webkit-border-radius:3px;
	   font-size:1.5em; text-decoration:none; text-align:center; color:#FFF; background-color:#000000;}
.btn3 a{ display:block; color:#FFF; text-decoration:none;}
.btn3 a:hover { position:relative; top:1px; left:1px;}

/* == 刊頭 == */
.head{ width:100%;
       height:auto;
	   margin:0;
	   padding-bottom:140%;
	   background-image:url(../images/hand-s.jpg);
	   background-size:cover;
	   overflow:hidden;
       }
		 
/* == 區塊1 == */		 
.con01{ margin:0 auto;
        padding:40px 10px;
		width:100%; overflow:hidden;
		}
.con01-image{ margin:0 auto; width:60%; height:auto;}
.con01 h2{ margin:0 auto; padding:10px 0; width:100%;
           display:block; font-size:2em;
		   border:3px solid #ff8b00; text-align:center; color:#ff8b00;
		   }
.con01 h3{ padding:15px 0; font-size:1.2em; text-align:center; font-weight:normal;}
.con01 td{ padding:10px;}
.con01 td.fs01{ font-size:1.2em; color:#FFF;}
.con01 td.fs02{ font-size:1em;}


/* == 區塊2 == */
.con02{ margin:0 auto;
        padding:40px 0;
		width:100%;
		background-color:#00c8bc; overflow:hidden;
		}
.con02 .main{ margin:0 auto; padding:0 10px;
			  width:100%; }
.con02 .main p{ margin:0; padding:0; font-size:1.2em; color:#FF0; text-align:center;}
.con02 .main h2{ margin:10px auto; padding:10px 0; width:100%;
                 display:block; font-size:1.4em;
		         border:3px solid #fff; text-align:center; color:#fff;}
.con02 .main-box01{ margin:0 auto; padding:0; width:100%; overflow:hidden;}
.con02 .main-box01 ul{ margin:0; padding:0; width:100%; text-align:center; text-align:center;}
.con02 .main-box01 li{ display:inline-block; margin:5px 1%; width:31%;}
.con02 .main-box01 li img{ width:100%; max-width:200px;}
.con02 .main-box01 li h3{ padding:5px 0 0 0; width:80%; font-size:1.3em; color:#FFF; text-align:center; }
.con02 .main-box01 li h3 a{ color:#FFF;}

.con02 .main-box02{ margin:10px auto 0 auto; padding:0; width:100%; overflow:hidden; text-align:left;}
.con02 .main-box02 ul{ margin:0; padding:10px 20px; width:100%;
                       border-radius:10px; background-color:#FFF; overflow:hidden;
					   }
.con02 .main-box02 li{ display:block; float:left; padding:0 0 5px 0; width:33.3%; font-size:1em;
                       color:#e4007f;}
.con02 .main-box02 li a{ color:#e4007f; text-decoration:none; }

/* == 區塊3 == */
.con03{ margin:0 auto; padding:40px 10px;
		width:100%; overflow:hidden;
		}
.con03-image{ margin:0 auto; width:60%; height:auto;}
.con03 h2{ margin:0 auto; padding:10px 0; width:100%;
           display:block; font-size:2em;
		   border:3px solid #45b035; text-align:center; color:#45b035;
		   }
.con03 h3{ padding:10px 0; font-size:1.2em; text-align:center; font-weight:normal; line-height:1.5;}
.con03 ul{ margin:0; padding:0; width:100%; overflow:hidden;}
.con03 li{ display:block; float:none; margin:0 0 20px 0; width:100%; text-align:center}
.con03 li img{ width:100%; max-width:165px;}
.con03 li p{ margin:0; padding:5px 0; font-size:1.4em; color:#297fcf; line-height:1.5; }
.con03 li h3{ display:block; margin:0 auto; padding:0; width:80%; height:50px; line-height:50px;
              border-radius:10px; background-color:#45b035;
			  font-size:1.5em; color:#FFF;}
.con03 li h3 a{ display:block; color:#FFF;}

/* == 多元學習模式 == */
.studymode {display: none;}
.studymodemobile {display: block;text-align: center;padding: 80px 5%;background-color: rgb(254, 235, 212);}
.studymodemobile h1 {font-size: 2.5em;color: rgb(255, 139, 0);font-weight: normal;}
.studymodemobile h2 {display: inline-block;margin: 25px 0px;padding: 5px 40px;font-size: 1.4rem;color: #4d4d4d;outline: #4d4d4d 1px dashed;}
.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;}
.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: 40px;height: 40px;display: flex;justify-content: center;align-items: center;font-size: 2rem;font-weight: 700;color: #3d85f9;border-radius: 999px;outline: #fbb03b 2px solid;}
.studymodemobile ul li .topword p {width: 60%;padding: 3px 0px;font-size: 1.6rem;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: 3rem;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: 1.6rem;line-height: 1.6;color: #4d4d4d;border-top: #4d4d4d 1px solid;}
.studymodemobile .btn {display: flex;flex-flow: column;gap: 35px;justify-content: center;margin: 70px 0px 0px;width: 100%;}
.studymodemobile .btn a {clear: both;margin: 0 auto;padding: 11.5px 0px;line-height: 1;width: 100%;background-color: #000;font-size: 1.5em;font-weight: normal;color: #fff;text-align: center;text-decoration: none;}

 /* footer */
 .footer-con{flex-wrap: wrap;}
 .footer-conr{width: 100%;margin: 0 auto;}
 .footer-conr ul{margin-top:20px; justify-content: center;}
 .footer-conr ul li{width:33%;text-align: center;}
 .footer-conr li a{margin: 0 0 10px 0;font-size:18px;}

}

@media (max-width: 430px) {

	/* == 多元學習模式 == */
	.studymodemobile h1 {
	  font-size: 2em;
	}
	.studymodemobile h2 {
	  padding: 5px 25px;
	  font-size: 1.15rem;
	}
	.studymodemobile ul li .topword .circle {
	  width: 30%;
	}
	.studymodemobile ul li .topword .circle span {
	  width: 33px;
	  height: 33px;
	  font-size: 1.6rem;
	}
	.studymodemobile ul li .topword p {
	  width: 70%;
	  font-size: 1.15rem;
	}
	.studymodemobile ul li i {
	  font-size: 2rem;
	}
	.studymodemobile ul li .sublist p {
	  font-size: 1.3rem;
	}
	.studymodemobile .btn {
	  gap: 20px;
	}
  }