*{ 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;}
.fc02{ color: #FF29A2;}
.co01{ color:#1fbe75;}
.co02{ color:#dd9c00;}
.co03{ color:#f66e00;}


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

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

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:2em;  border-radius:5px; -webkit-border-radius:5px;
		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:760px; background:url(../images/main_bg1.gif); background-position:top center; }
.head .main{ margin:0 auto; padding:220px 0 0; width:1000px; }
.head .main img { float:left; width:280px;}
.head .main dl{ float:right; width:65%;}
.head .main h1{ font-size:2.4em; font-weight:normal; }
.head .main h2{ font-size:3em; line-height:1.5; }
.head .main dt{ margin:10px 0; padding:0 15px; height:50px; background:#4d8dc1; font-size:1.8em; font-weight:bold; line-height:50px; color:#FFF;}
.head .main dd{ padding:10px 0; font-size:1.6em; line-height:1.6;}


/* == 區塊01 == */
.con01{ width:100%; padding:80px 0; background:#f0f3f6; text-align:center;}
.con01 .main{ margin:0 auto; max-width:1000px; overflow:hidden;}
.con01 .main h2{ margin:0; padding:0 0 10px 0; font-size:3.6em; line-height:1.2; font-weight:normal;}

.course_wrapper dd{ float:left; margin:2% 1%; width:31%;}
.course{ width:100%; margin:0 auto; clear:both; margin-bottom:10px;}
.course .bt { display:block; width:100%; clear:both; border-radius:10px 10px 0 0; -webkit-border-radius:10px 10px 0 0; padding:20px 30px; }
.course .bt.A{ background:#af93ef;}
.course .bt.B{ background:#fea257;}
.course .bt.C{ background:#a0ca20;}
.course .bt h3{ padding-bottom:8px; font-size:2.2em; line-height:1.4; color:#FFF; border-bottom:1px dashed #FFFFFF;}
.course .bt h4{ margin:10px 0 0; height:80px; font-size:1.6em; line-height:1.2;}
.course .bt h5 { margin:0 auto 10px; padding:10px 0 0; width:100px; height:100px; border-radius:50%; background:#fff; font-size:5em; line-height:100px;}
.course .bt h5.A{ color:#af93ef;}
.course .bt h5.B{ color:#fea257;}
.course .bt h5.C{ color:#a0ca20;}

#box_1, #box_2, #box_3{ display:none; }

.course .course_box{ padding:10px 0 20px; width:100%; background:#FFF;  overflow:hidden;  border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; }
.course .course_box.A{ border-left:7px solid #af93ef; border-right:7px solid #af93ef; border-bottom:7px solid #af93ef;}
.course .course_box.B{ border-left:7px solid #fea257; border-right:7px solid #fea257; border-bottom:7px solid #fea257;}
.course .course_box.C{ border-left:7px solid #a0ca20; border-right:7px solid #a0ca20; border-bottom:7px solid #a0ca20;}
.course .course_box ul{ width:100%; margin:0 auto; overflow:hidden;}
.course .course_box li.CLASS{ margin:0 auto 15px; width:60%; height:40px; background:#000; font-size:1.8em; font-weight:bold; line-height:40px; color:#FFF;}
.course .course_box li img{ margin:20px 0; width:200px;}
.course .course_box li p{ margin:0 50px; font-size:1.4em; line-height:1.4; text-align:justify; }

/* == 區塊02 == */
.con02{ width:100%; padding:80px 0; background-color:#4d8dc1; text-align:center;}
.con02 .main{ margin:0 auto; width:100%; max-width:1000px;}
.con02 h2{ font-size:3.6em; font-weight:normal; color:#FFF;}
.con02 ul{ margin:30px 0; padding:0; width:100%; overflow:hidden;}
.con02 li{ display:block; width:32%; height:300px; float:left;}
.con02 li .box01{ margin:0 auto 20px ; width:50px; height:50px; line-height:50px; border-radius:50%;
                 font-size:2.5em; color:#FFF;}
.con02 li .box01-a{ background-color:#1fbe75; }
.con02 li .box01-b{ background-color:#ffb400; }
.con02 li .box01-c{ background-color:#f66e00; }
.con02 li h3{ display:block; width:100%; height:50px; line-height:50px;
              font-size:1.8em; color:#FFF;}
.con02 li h3.a{ background-color:#1fbe75;}
.con02 li h3.b{ background-color:#ffb400;}
.con02 li h3.c{ background-color:#f66e00;}
.con02 li .box02{ margin:0; padding:20px 25px; width:100%; height:200px; background-color:#FFF; text-align:left;}
.con02 li .box02 p{ font-size:1.4em;}
.con02 li:nth-child(2){ margin:0 2%;}
.con02 img{ clear:both; max-width:100%; height:auto;}


/* == 區塊03 == */
.con03{ margin:0; padding:0; width:100%; height:560px;
        background-image:url(../images/new-main_con03_bg.jpg); background-position:top center; background-repeat:repeat-x;
		}
.con03 .warp{ margin:0 auto; padding:100px 0 0 270px; width:100%; max-width:1000px;}
.con03 .warp h2{ padding:0 0 20px 0; font-size:2.7em; color:#FFF; font-style:italic;}
.con03 .warp ul{ margin:0; padding:0; width:100%;}
.con03 .warp li{ display:block; margin:0 0 4px 0; padding:10px 20px; width:100%; height:auto;
                background-color:#FFF; border-radius:30px; font-size:2.1em; font-style:italic;
				position:relative;}
.con03 .warp li span{ margin:0 0 0 35px;}
.con03 .warp li img{ position:absolute; top:12px;}


/* == 區塊04 == */
.con04{ margin:0 auto; padding:30px 0 50px; width:100%; max-width:1000px; height:auto; text-align:center; }
.con04 h2{ font-size:5em; color:#000; font-weight:normal; }
.con04 .bimg01{ display:block; margin:30px 0 0 0; padding:0; width:100%;}
.con04 .bimg02{ display:none; margin:20px 0 0 0; padding:0; width:100%;}


/* == 區塊05 == */
.con05{ margin:0; padding:120px 0 80px; width:100%; background:url(../images/main_con05_bg.gif) no-repeat #f0f3f6; background-position:top center; text-align:center; overflow:hidden;}
.con05 h2{ display:block; margin:10px auto; padding:40px; width:35%; border:8px solid #4d8dc1; background-color:#ffe000;
           font-size:2.8em; line-height:1.4; font-weight:normal; color:#4d8dc1;
		   }
.con05 ul{ margin:100px auto 0; padding:0; width:100%; max-width:1200px; overflow:hidden;}
.con05 li{ display: inline-block; margin:0 5%; padding:0; text-align:center;}
.con05 li img{ width:240px; border-radius:50%; border:10px solid #ffe000;}
.con05 li p{ margin:20px 0 0; padding:5%; background:#4d8dc1; font-size:1.5em; color:#FFF;}

/*必備線上資源*/
.resource{ padding:80px calc((100% - 1100px)/2); background-color: #4d8dc1;}
.resource h2{ padding: 20px 0; font-size: 4em; font-weight: 500; text-align: center; color: #ffe000;}
.resource p{ font-size: 1.4em; line-height: 1.6; color: #fff;}
.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: #4d8dc1; 
      background-color: #fff; border-radius: 5px;}
/* == 多元學習模式 == */
.studymode {
	padding: 80px calc((100% - 1000px) / 2) 0;
	text-align: center;
}
.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;
}
.studymodemobile{ display: none;}

/* == 留單區 == */
.con06{ padding:0 0 80px;}
.con06 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 */ }
.con06 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;}


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

@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: auto; background: url(../images/m_main_bg1.gif) no-repeat #ffe000; background-position:top center; background-size: contain; }
.head .main{ margin:0 auto; padding:80px 14px 20px; width:100%; text-align:center; }
.head .main img { float:none; margin:0 auto; width:45%;}
.head .main dl{ float:none; width:100%;}
.head .main h1{ margin:20px 0 10px; font-size:1.4em; line-height:1.1; font-weight:bold; }
.head .main h2{ font-size:2em; line-height:1.1; color:#ff29a2;}
.head .main dt{ margin:10px 0; padding:10px 12px; height:auto; background:#4d8dc1; font-size:1.2em; font-weight: bold; line-height:1.2; color:#FFF; text-align:justify; }
.head .main dd{ padding:10px 15px; font-size:1.1em; line-height:1.6; text-align:justify; }


/* == 區塊01 == */
.con01{ width:100%; padding:30px 14px; background:#f0f3f6; text-align:center;}
.con01 .main{ margin:0 auto; max-width:100%; overflow:hidden;}
.con01 .main h2{ margin:0; padding:0 0 10px 0; font-size:1.8em; line-height:1.2; font-weight:normal;}

.course_wrapper dd{ display:inline-block; float:none; margin:2% 1%; width:90%;}
.course{ width:100%; margin:0 auto; clear:both; margin-bottom:10px;}
.course .bt { display:block; width:100%; clear:both; border-radius:10px 10px 0 0; -webkit-border-radius:10px 10px 0 0; padding:20px; }
.course .bt.A{ background:#af93ef;}
.course .bt.B{ background:#fea257;}
.course .bt.C{ background:#a0ca20;}
.course .bt h3{ padding-bottom:8px; font-size:1.8em; line-height:1.4; color:#FFF; border-bottom:1px dashed #FFFFFF;}
.course .bt h4{ margin:10px 0 0; height:70px; font-size:1.4em; line-height:1.2;}
.course .bt h5 { margin:0 auto 10px; padding:10px 0 0; width:100px; height:100px; border-radius:50%; background:#fff; font-size:5em; line-height:100px;}
.course .bt h5.A{ color:#af93ef;}
.course .bt h5.B{ color:#fea257;}
.course .bt h5.C{ color:#a0ca20;}

#box_1, #box_2, #box_3{ display:none; }

.course .course_box{ padding:10px 0 20px; width:100%; background:#FFF;  overflow:hidden;  border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; }
.course .course_box.A{ border-left:7px solid #af93ef; border-right:7px solid #af93ef; border-bottom:7px solid #af93ef;}
.course .course_box.B{ border-left:7px solid #fea257; border-right:7px solid #fea257; border-bottom:7px solid #fea257;}
.course .course_box.C{ border-left:7px solid #a0ca20; border-right:7px solid #a0ca20; border-bottom:7px solid #a0ca20;}
.course .course_box ul{ width:100%; margin:0 auto; overflow:hidden;}
.course .course_box li.CLASS{ margin:0 auto 15px; width:80%; height:40px; background:#000; font-size:1.8em; font-weight:bold; line-height:40px; color:#FFF;}
.course .course_box li img{ margin:20px 0; width:200px;}
.course .course_box li p{ margin:0 30px; font-size:1.3em; line-height:1.4; text-align:justify; }


/* == 區塊02 == */
.con02{ width:100%; padding:30px 14px 10px; background-color:#4d8dc1; text-align:center;}
.con02 .main{ margin:0 auto; width:100%; max-width:1000px;}
.con02 h2{ font-size:1.9em; font-weight:none; color:#FFF;}
.con02 ul{ margin:20px 0 0; padding:0; width:100%; overflow:hidden;}
.con02 li{ display:block; width:100%; height:300px; float:none;}
.con02 li .box01{ margin:0 auto 20px ; width:50px; height:50px; line-height:50px; border-radius:50%;
                 font-size:2.5em; color:#FFF;}
.con02 li .box01-a{ background-color:#1fbe75; }
.con02 li .box01-b{ background-color:#ffb400; }
.con02 li .box01-c{ background-color:#f66e00; }
.con02 li h3{ display:block; width:100%; height:50px; line-height:50px;
              font-size:1.6em; color:#FFF;}
.con02 li h3.a{ background-color:#1fbe75;}
.con02 li h3.b{ background-color:#ffb400;}
.con02 li h3.c{ background-color:#f66e00;}
.con02 li .box02{ margin:0; padding:20px ; width:100%; height:140px; background-color:#FFF; text-align:left;}
.con02 li .box02 p{ font-size:1.2em;}
.con02 li:nth-child(2){ margin:0 2%;}
.con02 img{ display:none; clear:both; width:1000px; height:auto;}



/* == 區塊03 == */
.con03{ margin:0; padding:0; width:100%; height:auto;
        background-image:none; background-color:#01c5c3; background-position:top left; background-repeat: no-repeat;
		}
.con03 .warp{ margin:0 auto; padding:10% 5%; width:100%;}
.con03 .warp h2{ padding:0 0 20px 0; font-size:2.2em; color:#FFF; font-style:italic; text-align:center;}
.con03 .warp ul{ margin:0; padding:0; width:100%;}
.con03 .warp li{ display:block; margin:0 0 5px 0; padding:10px 10px; width:100%; height:auto;
                background-color:#FFF; border-radius:15px; font-size:1.1em; font-style:italic;
				position:relative;}
.con03 .warp li span{ margin:0 0 0 28px;}
.con03 .warp li img{ position:absolute; top:6px; width:25px; height:auto;}


/* == 區塊04 == */
.con04{ margin:0 auto; padding:40px 4% ; width:100%; height:auto; text-align:center; }
.con04 h2{ font-size:3.2em; color:#000; font-weight:normal; }
.con04 .bimg01{ display:none; margin:10px 0 0 0; padding:0; width:100%;}
.con04 .bimg02{ display:block; margin:10px 0 0 0; padding:0; width:100%;}


/* == 區塊05 == */
.con05{ margin:0; height:auto; padding:40px 0 20px; width:100%; background:url(../images/main_con05_bg_m.gif) no-repeat #f0f3f6; 
        background-position:top center; background-size: contain;text-align:center; overflow:hidden;
		}
.con05 h2{ display:block; margin:10px auto 20px; padding:20px; width:80%; border:8px solid #4d8dc1; background-color:#ffe000;
           font-size:1.6em; line-height:1.2; font-weight:normal; color:#4d8dc1;
		   }
.con05 ul{ margin:0 auto 0; padding:0; width:100%; max-width:100%; overflow:hidden;}
.con05 li{ display: inline-block; margin:0 5%; padding:0; text-align:center;}
.con05 li img{ width:240px; border-radius:50%; border:10px solid #ffe000;}
.con05 li p{ margin:20px 0; padding:5%; background:#4d8dc1; font-size:1.5em; color:#FFF;}

/*必備線上資源*/
.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% 0;box-sizing:border-box;
  }
.studymodemobile img{ max-width: 100%;}
.studymodemobile h1 {
    font-size: 2.8rem;
    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;
}
@keyframes arrowmove{
        0%{ transform: translateY(-8px);}
        20%{ /*從 20% 的地方才開始變形*/}
        50%{ transform: translateY(0px); }
        80%{ }
        100%{ transform: translateY(-10px)}
}

/* == 留單區 == */
.con06{ margin:0 auto 50px; padding:0; width:100%; text-align:center;}
.con06 h3{ margin:10px auto; display:block; width:350px; font-size:1.4em; text-align:center;}
.con06 img{ width:90%; height:auto;}
.con06 a{ margin:5px auto; display:block; width:85%; height:55px;
		  line-height:50px; font-size:1.8em; border-radius:50px; border:2px solid #f28f00;}
.con06 a:hover{ font-weight:bold;}

/* == 志系班址 == */
.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;}

}


/* == 平版版型區 ============================================================================= */
@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/main_bg1.gif); background-position:top center; background-size:cover; padding-bottom:77%; }
.head .main{ margin:0 auto; padding:150px 20px 0; width:100%; }
.head .main img { float:left; width:22%;}
.head .main dl{ float:right; width:75%;}
.head .main h1{ font-size:2em; font-weight:normal;}
.head .main h2{ font-size:2.6em; line-height:1.5; color:#ff29a2;}
.head .main dt{ margin:10px 0; padding:0 15px; height:50px; background:#4d8dc1; font-size:1.5em; font-weight:bold; line-height:50px; color:#FFF;}
.head .main dd{ padding:10px; font-size:1.3em; line-height:1.6; text-align:justify;}


/* == 區塊01 == */
.con01{ width:100%; padding:50px 0; background:#f0f3f6; text-align:center;}
.con01 .main{ margin:0 auto; max-width:100%; overflow:hidden;}
.con01 .main h2{ margin:0; padding:0 0 10px 0; font-size:2.6em; line-height:1.2; font-weight:normal;}

.course_wrapper dd{ float:left; margin:2% 1%; width:31%;}
.course{ width:100%; margin:0 auto; clear:both; margin-bottom:10px;}
.course .bt { display:block; width:100%; clear:both; border-radius:10px 10px 0 0; -webkit-border-radius:10px 10px 0 0; padding:20px ; }
.course .bt.A{ background:#af93ef;}
.course .bt.B{ background:#fea257;}
.course .bt.C{ background:#a0ca20;}
.course .bt h3{ padding-bottom:8px; font-size:1.6em; line-height:1.4; color:#FFF; border-bottom:1px dashed #FFFFFF;}
.course .bt h4{ margin:10px 0 0; height:80px; font-size:1.3em; line-height:1.2;}
.course .bt h5 { margin:0 auto 10px; padding:10px 0 0; width:100px; height:100px; border-radius:50%; background:#fff; font-size:5em; line-height:100px;}
.course .bt h5.A{ color:#af93ef;}
.course .bt h5.B{ color:#fea257;}
.course .bt h5.C{ color:#a0ca20;}

#box_1, #box_2, #box_3{ display:none; }

.course .course_box{ padding:10px 0 20px; width:100%; background:#FFF;  overflow:hidden;  border-radius:0 0 10px 10px; -webkit-border-radius:0 0 10px 10px; }
.course .course_box.A{ border-left:7px solid #af93ef; border-right:7px solid #af93ef; border-bottom:7px solid #af93ef;}
.course .course_box.B{ border-left:7px solid #fea257; border-right:7px solid #fea257; border-bottom:7px solid #fea257;}
.course .course_box.C{ border-left:7px solid #a0ca20; border-right:7px solid #a0ca20; border-bottom:7px solid #a0ca20;}
.course .course_box ul{ width:100%; margin:0 auto; overflow:hidden;}
.course .course_box li.CLASS{ margin:0 auto 15px; width:80%; height:40px; background:#000; font-size:1.8em; font-weight:bold; line-height:40px; color:#FFF;}
.course .course_box li img{ margin:20px 0; width:200px;}
.course .course_box li p{ margin:0 20px; font-size:1.2em; line-height:1.4; text-align:justify; }

/* == 區塊02 == */
.con02{ width:100%; padding:50px 20px; background-color:#4d8dc1; text-align:center;}
.con02 .main{ margin:0 auto; width:100%; max-width:100%;}
.con02 h2{ font-size:3.2em; font-weight:normal; color:#FFF;}
.con02 ul{ margin:30px 0 20px; padding:0; width:100%; overflow:hidden;}
.con02 li{ display:block; width:32%; height:260px; float:left;}
.con02 li .box01{ margin:0 auto 20px ; width:50px; height:50px; line-height:50px; border-radius:50%;
                 font-size:2.5em; color:#FFF;}
.con02 li .box01-a{ background-color:#1fbe75; }
.con02 li .box01-b{ background-color:#ffb400; }
.con02 li .box01-c{ background-color:#f66e00; }
.con02 li h3{ display:block; width:100%; height:50px; line-height:50px;
              font-size:1.4em; color:#FFF;}
.con02 li h3.a{ background-color:#1fbe75;}
.con02 li h3.b{ background-color:#ffb400;}
.con02 li h3.c{ background-color:#f66e00;}
.con02 li .box02{ margin:0; padding:20px 15px; width:100%; height:200px; background-color:#FFF; text-align:left;}
.con02 li .box02 p{ font-size:1.1em;}
.con02 li:nth-child(2){ margin:0 2%;}
.con02 img{ clear:both; width:100%; height:auto;}


/* == 區塊03 == */
.con03{ margin:0; padding:0; width:100%; height:0;
        background-image:url(../images/new-main_con03_bg.jpg); padding-bottom:55%; background-position:42% 0%; 
		}
.con03 .warp{ margin:0 auto; padding:80px 0 0 30%; width:100%;}
.con03 .warp h2{ padding:0 0 20px 0; font-size:2.3em; color:#FFF; font-style:italic;}
.con03 .warp ul{ margin:0; padding:0; width:100%;}
.con03 .warp li{ display:block; margin:0 0 5px 0; padding:20px 20px; width:98%; height:auto;
                background-color:#FFF; border-radius:30px; font-size:1.6em; font-style:italic;
				position:relative;}
.con03 .warp li span{ margin:0 0 0 35px;}
.con03 .warp li img{ position:absolute; top:20px;}


/* == 區塊04 == */
.con04{ margin:0 auto; padding:50px 30px 0; width:100%; height:auto; text-align:center; }
.con04 h2{ margin:0; font-size:4.7em; color:#000; font-weight:normal; }
.con04 .bimg01{ display:block; margin:30px 0 0 0; padding:0; width:100%;}
.con04 .bimg02{ display:none; margin:10px 0 0 0; padding:0; width:100%;}


/* == 區塊05 == */
.con05{ margin:0; height:0; padding:60px 0; width:100%; background:url(../images/main_con05_bg_t.gif) no-repeat #f0f3f6; background-size: contain; padding-bottom:72%; 
        background-position:top center; text-align:center; overflow:hidden;}
.con05 h2{ display:block; margin:10px auto; padding:40px; width:60%; border:8px solid #4d8dc1; background-color:#ffe000;
           font-size:1.8em; line-height:1.4; font-weight:normal; color:#4d8dc1;
		   }
.con05 ul{ margin:30px auto 0; padding:0; width:100%; max-width:100%; overflow:hidden;}
.con05 li{ display: inline-block; margin:0 3%; padding:0; width:24%;text-align:center;}
.con05 li img{ width:100%; border-radius:50%; border:10px solid #ffe000;}
.con05 li p{ margin:20px 0 0; padding:5%; background:#4d8dc1; font-size:1.2em; color:#FFF;}

/*必備線上資源*/
.resource{ padding:65px 2%;}
	
/* == 多元學習模式 == */
.studymode { padding: 80px 5% 0; box-sizing:border-box;}
.studymode h1 {	font-size: 3.5em;}
.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;
}

/* == 留單區 == */
.con06{ margin:40px auto 60px; padding:0; width:100%;  }
.con06 a{ margin:5px auto; 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{ 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;}

}

/* == 平版版型區 ============================================================================= */
@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;}

}