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


.fc01{ color: #ffe000;}


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


/*按鈕配色*/
@keyframes btncolor01{
	
 from, 50%, to{ background-color:#a24dca; }
 25%, 75%{ background-color:#5d0089; }
	}
.btncolor01{ animation-name: btncolor01; 
             animation-iteration-count:infinite;}
@keyframes btncolor02{
	
 from, 50%, to{ background-color:#ff7e00; }
 25%, 75%{ background-color:#ff3300; }
	}
.btncolor02{ animation-name: btncolor02; 
             animation-iteration-count:infinite;}

@keyframes btncolor03{
	
 0%, 50%, to{ background-color:#00bee0; }
 25%, 75%{ background-color:#008ca5; }
	}
.btncolor03{ animation-name: btncolor03; 
             animation-iteration-count:infinite;
			 }

/*======================================== 上方標題 ========================================*/

header{
	width:100%;
	max-width:1000px;
	margin:20px auto ;
	background-color:#FFF;
	text-align:center;
	}

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

/* == 按鈕 == */
.btn a{ clear:both; padding:0; display:block; width:320px; height:60px; line-height:60px; text-align:center; font-size:1.8em;  border-radius:50px; -webkit-border-radius:50px;
		text-decoration:none; font-weight:bold; color:#FFF; }
.btn a.A{ margin:0 auto; background-color:#e4007f; }
.btn a.B{ margin:0 auto; background-color:#ffe000; color:#000; }
.btn a.C{ margin:0 auto; background-color:#e33f43; color:#FFF; }
.btn a:hover { position:relative; top:1px; left:1px;}


/* == 刊頭 == */
.head{ width:100%; height:960px; background:url(../images/bn.jpg); background-position:center;}
.head .main{ margin:0 auto; padding:0; width:1200px;}
.head .main h1{ text-indent:-9999px;}
.head .main .youtube{ float:right; margin:350px 80px 0 0; width:700px; background:#000; padding:10px;}


/* ==區塊01== */
.con01{ margin:0 auto; padding:80px 0; width:1200px; overflow:hidden;}
.con01 .menu{ display:block; width:100%; max-width:1200px; }
.con01 .menu ul{ margin:0 auto; width:100%; text-align:center;display: flex;justify-content: space-between;}
.con01 .menu li{ display:inline-block; margin:0 20px; padding:0; width:100%; max-width:320px; height:auto; transition-duration:0.4s; }
.con01 .menu li:hover{ margin:-5px 20px 0 20px;}
.con01 .menu-mobile{ display:none;}

/* == 區塊02 強勢攻榜 四大加持==2024.03.28更新 */
.con02{ clear:both; width:100%; padding:80px calc((100% - 1200px)/2); background:#f0f3f6; text-align:center;}
.con02 h2{ margin:0; padding:0 0 10px 0; font-size:5em; font-weight:normal;}
.con02 .main ul{ margin: 50px 0; display: flex; justify-content: space-between;}
.con02 .main ul li{ width: 250px;}
.con02 .main ul li a{ display: block; text-decoration: none; text-align: center; cursor: pointer;}
.con02 .main ul li a i{ font-size: 3em; animation: arrowmove 1.5s linear infinite alternate;}
.con02 .main ul li img{ max-width: 100%;}
.con02 .main ul li>div{ display: none; margin-top: 10px; padding: 20px; background-color: #fff; border-width: 1px; border-style: dashed; border-radius: 15px; text-align: left;}
.con02 .main ul li>div p{ font-size: 1.3em; line-height: 1.5;}
.con02 .main ul li:nth-child(1) i{ color: #AF93EF;}
.con02 .main ul li:nth-child(2) i{ color: #A0CA20;}
.con02 .main ul li:nth-child(3) i{ color: #FF8454;}
.con02 .main ul li:nth-child(4) i{ color: #00CFEE;}
.con02 .main ul li:nth-child(1) div{ border-color: #AF93EF;}
.con02 .main ul li:nth-child(2) div{ border-color: #A0CA20;}
.con02 .main ul li:nth-child(3) div{ border-color: #FF8454;}
.con02 .main ul li:nth-child(4) div{ border-color: #00CFEE;}
.con02 .main-mobile{ display: none;}

@keyframes arrowmove{
        0%{ transform: translateY(-8px);}
        20%{ /*從 20% 的地方才開始變形*/}
        50%{ transform: translateY(0px); }
        80%{ }
        100%{ transform: translateY(-10px)}
}

/* == 區塊03 == */
.con03{ margin:0; padding:80px 0 0; width:100%; background:url(../images/con03_bg.jpg) no-repeat #f0f3f6; background-position:top center;
        text-align:center; overflow:hidden;}
.con03 .main{ height:450px;}
.con03 .main h2{ font-size:4.2em; line-height:1.1; font-weight:normal; }
.con03 .box{ display:block; background:#f1f1f1; padding:0 0 80px;}
.con03 .box img{ width:1000px;}
.con03 .box2 { display:none;}
.con03 .box2 img{ width:100%;}


/* ==區塊04== */
.con04{ margin:0; padding:80px 0 100px; width:100%; background-color:#4e8dc2; }
.con04 .wrap{ margin:0 auto; width:100%; max-width:1000px;}
.con04 .title{ margin:0; width:100%; text-align:center;}
.con04 .title img{ width:100%; max-width:250px;}
.con04 .title h2{ font-size:4.3em; color:#ffe001;}
.con04 .title h3 span{ font-size:0.7em; font-weight:normal;}

.con04 .box-wrap{ display:table; margin:25px 0 0 0; padding:0; width:100%; 
                  height:120px; border:2px solid #000; border-radius:15px; background-color:#FFF;
				  }
.con04 .box-wrap ul{ display:table-row;}
.con04 .box-wrap ul li{ display:table-cell; vertical-align:middle;}
.con04 .box-wrap ul li:nth-child(1){ width:24%; background-color:#000; border-radius:10px 0 0 10px;
                                     font-size:2.3em; color:#FFF; text-align:center;
									 }
.con04 .box-wrap ul li:nth-child(2){ width:13%; padding:10px; max-width:95px; }
.con04 .box-wrap ul li:nth-child(3){ width:38%; }
.con04 .box-wrap ul li:nth-child(3) p{ font-size:2em; line-height:1.2;}
.con04 .box-wrap ul li:nth-child(4){ width:24%; }
.con04 .box-wrap ul li:nth-child(4) a{ display:block; width:90%; height:50px; line-height:50px; background-color:#ff7e00;
                                       font-size:1.4em; color:#FFF; border-radius:10px; text-align:center; text-decoration:none;}

/*必備線上資源*/
.resource{ padding:80px calc((100% - 1100px)/2); }
.resource h2{ padding: 20px 0; font-size: 4em; font-weight: 500; text-align: center;}
.resource p{ font-size: 1.4em; line-height: 1.6;}
.resource ul{ margin: 20px 0 60px; width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.resource ul li{ width: 33%; margin: 5px 0; padding: 15px; text-decoration: none; font-size: 1.6em; color: #fff; 
      background-color: #4d8dc1; border-radius: 5px;}

/* == 多元學習模式 == */
.studymode {
	padding: 80px calc((100% - 1000px) / 2);
	text-align: center;
	background-color: #F5F5F5;
}
.studymode img{ max-width: 100%;}
.studymode h1 {
	font-size: 4em;
	color: #333;
	font-weight: normal;
  }
.studymode h1 span{
	color: #3D85F9;
}  
.studymode h2 {
	display: inline-block;
	margin: 20px 0px 60px 0px;
	padding: 10px 40px;
	box-sizing:border-box;
	font-size: 1.8rem;
	color: #4d4d4d;
	border-radius: 999px;
	outline: #4d4d4d 1px dashed;
}
.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: 26.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;
	box-sizing:border-box;
	font-size: 1.4rem;
	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 ul li .box p {
	margin: 20px 0px 0px 0px;
	padding: 12px 0px 0px;
	box-sizing:border-box;
	font-size: 1.25rem;
	line-height: 1.6;
	color: #4d4d4d;
	border-top: #4d4d4d 1px solid;
}
.studymode .btn {
	display: flex;
	justify-content:center;
	align-items: center;
	width: 100%;
	margin: 0 auto;
}
.studymode .btn a {
  clear: both;
  margin: 0 8px;
  box-sizing:border-box;
  background-color: #3D85F9;
  border-radius: 50px;
  font-size: 1.6em;
  color: #fff;
  text-align: center;
  text-decoration: none;
} 
.studymodemobile{ display: none;}

/* == 留單區 == */
.con05{ padding:80px calc((100% - 1200px)/2); width:100%; text-align:center;}
.con05 h3{ margin:10px auto; display:block; width:350px; font-size:1.4em; text-align:center;}
.con05 img{ width:80%; height:auto;}
.con05 a{ margin:auto; display:block; width:30%; height:75px;
          line-height:75px; font-size:2.3em; color:#FFF; text-align:center; text-decoration:none;
		  border-radius:50px;
		  border:2px solid #f28f00;
		  background: #fba518; /* Old browsers */
          background: -moz-linear-gradient(top, #fba518 0%, #f67101 100%); /* FF3.6-15 */
          background: -webkit-linear-gradient(top, #fba518 0%,#f67101 100%); /* Chrome10-25,Safari5.1-6 */
          background: linear-gradient(to bottom, #fba518 0%,#f67101 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fba518', endColorstr='#f67101',GradientType=0 ); /* IE6-9 */ }
.con05 a:hover{ font-weight:bold;}

/* == 志系班址 == */
.footer{ padding:50px calc((100% - 1000px)/2) ; width:100%; background-color:#e10000; }
.footer-con{ display: flex; justify-content: center; align-items: center;}
.footer-conL{ width:30%; padding-right: 20px;}
.footer-conL img{ max-width: 100%;}
.footer-conR{ width: 70%;}
.footer-btn{ width:100%; }
.footer-btn a{ display:block; padding: 10px 20px; width:100%; border-radius:10px; font-size:22px; text-decoration:none; color:#e10000; 
	background-color: #fff; position: relative;}
.footer-btn a::after{ content: '\f105'; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; top: 14px; right: 20px;}
.footer-conR ul{ margin:20px 0 0; display: flex; justify-content: flex-start; }
.footer-conR li a{ display:block; padding:0 10px; line-height:20px; font-size:20px; text-decoration:none; color:#FFF;border-right:1px solid #a20000;				}
.footer-conR li:nth-child(1) a{ padding:0 10px 0 0;}
.footer-conR li:nth-child(9) a{ padding:0 0 0 10px; border-right:none;}


/* == line連結展開區塊 == */
.line-wrap{ display: none; width: 100%; padding: 50px 20%; background-color: rgba(0,0,0,0.8); position: fixed; bottom: 0; left: 0; z-index: 999; text-align: center;}
.line-wrap a{ text-decoration: none; display: block;}
.line-wrap .close{ position: absolute; top: 20px; right: 20px; font-size: 20px; color: #fff;}
.line-wrap .linebox p{ padding-bottom:20px; font-size: 2em; color: #fff;}
.line-wrap .linebox ul{ display: flex; justify-content: center;}
.line-wrap .linebox ul li{ width: 10%; margin: 0 10px; }
.line-wrap .linebox ul a{ padding: 10px 0; border-radius: 10px; background-color: #06C755; font-size: 1.2em; color: #fff; transition: 0.5s all linear;}
.line-wrap .linebox ul a:hover{ box-shadow: 0px 0px 10px rgba(6, 199, 85, 1); transform: translateY(-3px);}

/* == 手機版型區 ============================================================================= */

@media screen and ( max-width:767px ){
	
/* == 按鈕 == */
.btn a{ clear:both; padding:0; display:block; width:90%; height:60px; line-height:60px; font-size:1.8em;}

.head{ width:100%; height:0; background: url(../images/m_bn.jpg) no-repeat #ffe000; background-size: contain; padding-bottom:180%; }
.head .main{ margin:0 auto; padding:0 14px; width:100%; text-align:center;}
.head .main h1{ text-indent:-9999px;}
.head .main .youtube{ float:none; margin:110% 0 0; width:100%; background:#000; padding:10px;}

/* == 區塊01 == */
.con01{ margin:0 auto; padding:20px 10px; width:100%; overflow: hidden; }
.con01 .menu{ display:none;}
.con01 .menu-mobile{ display:block; }
.con01 .menu-mobile ul{ list-style:none; margin:0 auto; padding:0;}
.con01 .menu-mobile li{ margin:5px 0; padding:0;}
.con01 .menu-mobile li img { width:100%;}

/* == 區塊02 == */
.con02{ padding:30px 5%;}
.con02 h2{ font-size:2.2em;}
.con02 .main{ display: none;}
.con02 .main-mobile{ display: block; margin: 0 0 30px; text-align: left;}
.con02 .main-mobile img{ display: block; margin: 0 auto;}
.con02 .main-mobile .infoBtn{ display: flex; flex-wrap: wrap; justify-content: space-between;}
.con02 .main-mobile .infoBtn a{ display: block; width: 49%; margin-top: 5px; padding: 10px 0 10px 10px; font-size: 1.2em; color: #fff; border-radius: 5px; cursor: pointer;}
.con02 .main-mobile .infoBtn a.arrow{ position: relative;}
.con02 .main-mobile .infoBtn a.arrow::after{content: '\f078'; font-family: 'Font Awesome 5 Free'; font-weight: 700; position: absolute; top: 13px; right: 10px; color: #fff;}
.con02 .main-mobile .infoBtn .infoBtn01{ background-color: #AF93EF;}
.con02 .main-mobile .infoBtn .infoBtn02{ background-color: #A0CA20;}
.con02 .main-mobile .infoBtn .infoBtn03{ background-color: #FF8454;}
.con02 .main-mobile .infoBtn .infoBtn04{ background-color: #00CFEE;}
.con02 .main-mobile .infoBox{ margin:8px 0 0; padding: 20px; background-color: #fff; border: 2px dashed #AF93EF; border-radius: 5px; text-align: left;}
.con02 .main-mobile .infoBox p{ font-size: 1.1em; line-height: 1.5;}

/* == 區塊03 == */
.con03{ margin:0; padding:30px 0 ;  width:100%; background:#f1f1f1; text-align:center; overflow:hidden;}
.con03 .main{ height: auto;}
.con03 .main h2{ font-size:2.2em; line-height:1.1; font-weight:normal; margin:0 0 10px; }
.con03 .box{ display:none; background:#f1f1f1; padding:0 0 80px;}
.con03 .box img{ width:1000px;}
.con03 .box2 { display:block;}
.con03 .box2 img{ width:100%;}

/* ==區塊04== */
.con04{ margin:0; padding:30px 0; width:100%; background-color:#4e8dc2;}
.con04 .wrap{ margin:0 auto; width:100%;}
.con04 .title{ margin:0; width:100%; text-align:center;}
.con04 .title h2{ font-size:2.2em; color:#ffe001;}
.con04 .title h3 span{ font-size:0.7em; font-weight:normal;}

.con04 .box-wrap{ display:block; margin:20px auto 0 auto; padding:0; width:86%; 
                  height:auto; border:2px solid #000; border-radius:15px; background-color:#FFF;
				  }
.con04 .box-wrap ul{ display:block; text-align:center;}
.con04 .box-wrap ul li{ display:block; vertical-align:middle;}
.con04 .box-wrap ul li:nth-child(1){ width:100%; padding:10px 0; background-color:#000; border-radius:10px 10px 0 0;
                                     font-size:1.3em; color:#FFF; text-align:center;
									 }
.con04 .box-wrap ul li:nth-child(2){ margin:0 auto; width:100%; padding:10px; max-width:190px; }
.con04 .box-wrap ul li:nth-child(3){ width:100%; }
.con04 .box-wrap ul li:nth-child(3) p{ font-size:1em;}
.con04 .box-wrap ul li:nth-child(4){ margin:0 auto; width:100%; }
.con04 .box-wrap ul li:nth-child(4) a{ display:block; margin:10px auto 20px auto; width:80%; height:50px; line-height:50px; 
background-color:#ff7e00; font-size:1.3em; color:#FFF; border-radius:10px; text-align:center; text-decoration:none;}

/*必備線上資源*/
.resource{ padding:65px 5%;}
.resource h2{ padding: 10px 0; font-size:2.2em;}
.resource p{ padding: 0; font-size:16px; text-align:justify;}
.resource ul{ margin: 10px 0 30px; flex-wrap: wrap;}
.resource ul li{ width: 48%; margin: 5px 0; font-size: 1.2em;}
.resource ul li:nth-child(7){ width: 100%;}
.resource ul li:nth-child(8){ width: 100%;}
.resource ul li:nth-child(9){ width: 100%;}

/* == 多元學習模式 == */
.studymode { display: none;}
.studymodemobile {
    display: block;
    text-align: center;
    padding: 65px 5%;
	background-color: #f5f5f5;
  }
.studymodemobile img{ max-width: 100%;}
.studymodemobile h1 {
    font-size: 2.5rem;
    font-weight: normal;
    color: #000;
  }
.studymodemobile h1 span{
	color: #3D85F9;
}  
.studymodemobile h2 {
    display: inline-block;
    margin: 15px 0px 25px;
    padding: 5px 30px;
    font-size: 1.2rem;
    color: #4d4d4d;
    border-radius: 999px;
    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 ul li i {
    padding: 15px 0px 10px 0px;
    font-size: 2rem;
    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.3rem;
    line-height: 1.6;
    color: #4d4d4d;
    border-top: #4d4d4d 1px solid;
}
.studymodemobile .btn {
	display: flex;
	flex-flow: column;
	gap: 20px;
    justify-content: center;
    margin: 30px 0px 0px;
	width: 100%;
}
.studymodemobile .btn a {
	clear: both;
	margin: 0 auto;
	width: 75%;
	background-color: #3D85F9;
	border-radius: 50px;
	font-size: 1.3em;
	color: #fff;
	text-align: center;
	text-decoration: none;
	height: 50px;
    line-height: 50px;
}
@keyframes arrowmove{
        0%{ transform: translateY(-8px);}
        20%{ /*從 20% 的地方才開始變形*/}
        50%{ transform: translateY(0px); }
        80%{ }
        100%{ transform: translateY(-10px)}
}

/* == 留單區 == */
.con05{ padding:60px 2%; width:100%; }
.con05 h3{ margin:10px auto; display:block; width:350px; font-size:1.4em;}
.con05 img{ width:90%; height:auto;}
.con05 a{ margin:5px auto; display:block; width:80%; height:60px;
		  line-height:60px; font-size:1.8em; border-radius:50px; border:2px solid #f28f00;
		  background: #fba518; /* Old browsers */
          background: -moz-linear-gradient(top, #fba518 0%, #f67101 100%); /* FF3.6-15 */
          background: -webkit-linear-gradient(top, #fba518 0%,#f67101 100%); /* Chrome10-25,Safari5.1-6 */
          background: linear-gradient(to bottom, #fba518 0%,#f67101 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
          filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fba518', endColorstr='#f67101',GradientType=0 ); /* IE6-9 */ }

/* == 志系班址 == */
.footer{ padding:50px 2%; }
.footer-con{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.footer-conL{ width:80%; padding-right: 0; margin-bottom: 20px;}
.footer-conR{ width: 100%;}
.footer-btn{ width:100%;}
.footer-btn a{ padding: 10px 15px; width:100%; border-radius:10px; font-size:18px; position: relative;}
.footer-btn a::after{ content: '\f105'; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; top: 14px; right: 15px;}
.footer-conR ul{ display: flex; flex-wrap: wrap; justify-content: center; }
.footer-conR li a{ margin:5px 0; padding:0 10px; line-height:18px; font-size:18px;}

/* == line連結展開區塊 == */
.line-wrap{ display: none; width: 100%; padding: 40px 5% 60px;}
.line-wrap .linebox p{ padding:20px 0; font-size: 1.3em;}
.line-wrap .linebox ul{ display: flex; flex-wrap: wrap; justify-content: center;}
.line-wrap .linebox ul li{ width: 30%; margin: 5px; }
.line-wrap .linebox ul a{ font-size: 1em; }
}


/* == 平版版型區 ============================================================================= */
@media screen and ( min-width:768px ) and ( max-width:1024px ){
	
/* == 按鈕 == */
.btn a{ clear:both; padding:0; display:block; width:320px; height:60px; line-height:60px; font-size:1.8em; }

.head{ width:100%; height:0; background:url(../images/bn.jpg) no-repeat; background-position:center; background-size:cover; padding-bottom:85%;}
.head .main{ margin:0 auto; padding:0; width:100%; text-align:center; overflow:hidden;}
.head .main h1{ text-indent:-9999px;}
.head .main .youtube{ float:right; margin:240px 30px 0 0; width:60%; background:#000; padding:10px;}

/* ==區塊01== */
.con01{ margin:0 auto; padding:60px 0; width:100%; overflow:hidden; }
.con01 .menu{ display:block; width:100%; max-width:1200px; }
.con01 .menu ul{ margin:0 auto; width:100%; text-align:center;}
.con01 .menu li{ display:inline-block; margin:0 10px; padding:0; width:100%; max-width:30%; height:auto; transition-duration:0.4s; }
.con01 .menu li:hover{ margin:0;}
.con01 .menu-mobile{ display:none;}


/* == 區塊02 == */
.con02{ padding:50px 5%;}
.con02 h2{ margin:0; padding:0; font-size:4em;}

/* == 區塊03 == */
.con03{ margin:0; padding:50px 20px 0; width:100%; background:url(../images/con03_bg.jpg) no-repeat #f0f3f6; background-position:top center;
        text-align:center; overflow:hidden;}
.con03 .main{ height:450px;}
.con03 .main h2{ font-size:4.2em; line-height:1.1; font-weight:normal; }
.con03 .box{ display:block; background:#f1f1f1; padding:0 0 50px;}
.con03 .box img{ width:100%;}
.con03 .box2 { display:none;}
.con03 .box2 img{ width:100%;}


/* ==區塊04== */
.con04{ margin:0; padding:50px 20px 80px; width:100%; background-color:#4e8dc2; }
.con04 .wrap{ margin:0 auto; width:100%; max-width:1000px;}
.con04 .title{ margin:0; width:100%; text-align:center;}
.con04 .title img{ width:100%; max-width:250px;}
.con04 .title h2{ font-size:4.3em; color:#ffe001;}
.con04 .title h3 span{ font-size:0.7em; font-weight:normal;}

.con04 .box-wrap{ display:table; margin:25px 0 0 0; padding:0; width:100%; 
                  height:120px; border:2px solid #000; border-radius:15px; background-color:#FFF;
				  }
.con04 .box-wrap ul{ display:table-row;}
.con04 .box-wrap ul li{ display:table-cell; vertical-align:middle;}
.con04 .box-wrap ul li:nth-child(1){ width:28%; background-color:#000; border-radius:10px 0 0 10px;
                                     font-size:2em; color:#FFF; text-align:center;
									 }
.con04 .box-wrap ul li:nth-child(2){ width:13%; padding:10px; max-width:95px; }
.con04 .box-wrap ul li:nth-child(3){ width:34%; }
.con04 .box-wrap ul li:nth-child(3) p{ font-size:2em; line-height:1.2;}
.con04 .box-wrap ul li:nth-child(4){ width:24%; }
.con04 .box-wrap ul li:nth-child(4) a{ display:block; width:90%; height:50px; line-height:50px; background-color:#ff7e00;
                                       font-size:1.4em; color:#FFF; border-radius:10px; text-align:center; text-decoration:none;}
/*必備線上資源*/
.resource{ padding:65px 2%;}
.resource ul{ margin: 20px 0 40px;}
.resource ul li{font-size: 1.5em;}

/* == 多元學習模式 == */
	.studymode { padding: 80px 5% 0; box-sizing:border-box;}
	.studymode h1 {	font-size: 3.1em;}
	.studymode h2{ font-size: 1.5em;}
	.studymode ul li { width:30%;}
	.studymode ul li .topword .circle span {
		width: 36px;
		height: 36px;
		font-size: 1.5rem;
	}
	.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.2rem;
		line-height: 1.6;
		color: #4d4d4d;
		border-top: #4d4d4d 1px solid;
	}

/* == 留單區 == */
.con05{ padding:80px 5%; width:100%; text-align:center; }
.con05 h3{ margin:10px auto; display:block; width:350px; font-size:1.4em; text-align:center;}
.con05 img{ width:90%; height:auto;}
.con05 a{ margin:5px auto; display:block; width:50%; height:65px; line-height:65px; font-size:2.2em;}

/* == 志系班址 == */
.footer{ padding:50px 2%;}
.footer-con{ display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.footer-conL{ width:100%; text-align: center; padding-right: 0; margin-bottom: 20px;}
.footer-conR{ width: 100%;}
.footer-btn{ width:100%;}
.footer-btn a{ padding: 10px 20px; font-size:22px; position: relative;}
.footer-btn a::after{ content: '\f105'; font-family: "Font Awesome 5 Free"; font-weight: 900; position: absolute; top: 14px; right: 20px;}
.footer-conR ul{ display: flex; flex-wrap: wrap; justify-content: center; }
.footer-conR li a{ margin:5px 0; padding:0 10px; line-height:20px; font-size:20px;}

/* == line連結展開區塊 == */
.line-wrap{ display: none; width: 100%; padding: 50px 2%;}
.line-wrap .linebox p{ padding-bottom:20px; font-size: 2em;}
.line-wrap .linebox ul{ display: flex; flex-wrap: wrap; justify-content: center;}
.line-wrap .linebox ul li{ width: 20%; margin: 5px; }
.line-wrap .linebox ul a{ font-size: 1.2em;}
}

/* == 平版版型區 ============================================================================= */
@media(max-width:768px){
	/* == 多元學習模式 == */
	.studymode { padding: 80px 5% 0;}
	.studymode h1 {	font-size: 3.5em;}
	.studymode h2{ font-size: 1.5em;}
	.studymode ul li .topword .circle{ width: 50%;}
	.studymode ul li .topword .circle span{font-size: 1.5rem;}
	.studymode ul li{ width: 30%;}
	.studymode ul li .box p{font-size: 1rem;}

}