/*通用設定*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
body{
	font-family:"微軟正黑體";
	box-sizing: border-box;
}
.clearfix{
	clear: both;
}

/*置頂按鈕*/
.gotop { position: fixed; right:5px;  bottom:30%; width: 50px;  height: 50px; background-color: #f95a57;  padding: 15px 10px;
  opacity: 0;  transition: all 0.4s ease-in-out 0s;  z-index: 999;  border-radius: 50%; }
.gotop a{ text-align: center; color: #fff; text-decoration:none;}
.gotop:active{ box-shadow:1px 1px 3px 2px rgba(20%,20%,40%,0.5) inset;transition: all 0s;}

/*=============桌機版================*/
/* header */
header{overflow: hidden; background:url(../images/header.jpg)no-repeat;width: 100%;height: 0;padding-bottom: 41.66%;background-size: cover;position: relative;}
header img{position: absolute;width: 100%;}
header .run{
	transform-origin:26% 63.05%;
	animation-name: running;
	animation-duration:1.5s;
	animation-timing-function:linear;
}
@keyframes running{
	0%{transform:translateY(-50px)translateX(-500px)scale(0.1);}
	50%{transform:translateY(-50px)scale(0.1);}
	100%{transform:translateY(0px)scale(1);}
}

/* nav */
nav{background: #ffe400;width: 100%;padding-top:30px;padding-bottom:30px;}
.nav{width:700px;margin: 0 auto;}
.nav ul li{box-sizing: border-box;}
.nav ul li a{color: #fff;font-size: 36px;text-decoration: none;background: #000;margin:20px;display:block;text-align:left;padding: 10px 10px 10px 150px;}
.nav ul li a:hover{background: #fff;color: #000;}
.nav ul li a:hover span{color: #003399;}
.nav ul li a:active{box-shadow:0px 0px 4px 4px #666666;}

.nav span{color:#f91321;}

/* main */

/* main01 */
.main01bkg{background: #c6000f;padding-top: 80px;padding-bottom: 80px;}
.main01{width: 1000px;margin: 0 auto;text-align: center;}
.main01 h2{font-size: 60px;color: #fff;}
.main01 h2 em{color:#00ffff;}
.main01 ul{display: flex;justify-content: space-between;margin-top:220px;}
.main01 ul li{background:#003399;border-radius: 10px;border: 5px solid #cccc33;position: relative;font-size: 25px;box-sizing: border-box;width: 30%;margin-bottom:30px;padding:60px 30px 40px 30px;}
.main01 ul li img{position: absolute;top:-160px;left:4%;width: 272px;height: 220px;}
.rotate{
	animation-name:rotate;
	animation-duration:.8s;
	animation-timing-function:linear;
}
@keyframes rotate{
	from{transform:rotateY(0deg)}
	to{transform:rotateY(360deg)}
}

.main01 ul li em{color: #ffcc66;display: block;line-height:1.5;}
.main01 ul li p{color:#fff;display: block;line-height:1.5;}
.main01>p{color: #ffe400;font-size: 30px;margin-top:25px;margin-bottom:35px;}
.main01 a{background: #ffe400;text-decoration: none;padding:10px 25px;font-size: 33px;border-radius: 10px;font-weight: bold;color: #00479d;}
.main01 a:hover{box-shadow:0 0 15px 4px #cccc33;}
.main01 a:active{background: #998A00;}

/* main02 */
.main02bkg{width: 100%;background:url(../images/main02bkg.jpg)no-repeat;background-size: cover;}
.main02bkg{
	background-size: 100% 100%;
	background-position: center;
	position: relative;
	/* z-index: -1; */
	animation-name:qq;
	animation-duration:3s;
	animation-timing-function:linear;
	animation-iteration-count: infinite;
}
@keyframes qq{
0%{background-size: 180% 180%;}
20%{background-size: 100% 100%;}
40%{background-size: 140% 140%;}
60%{background-size: 100% 100%;}
80%{background-size: 120% 120%;}
100%{background-size: 160% 160%;}
}
.main02{width: 1024px;margin: 0 auto;padding-top:60px;padding-bottom:60px;text-align: center;}
.main02 h3{ margin: 0 0 20px; font-size: 48px;text-align: center;line-height:1.2;}
.main02 h3 span{color: #c6000f;}
.main02>div{display: flex;justify-content:space-between;align-items:center;}
.main02 table{width:57%;}
.main02 table td{color:#00479d;border: 1px solid #00479d;text-align: center;padding:10px;font-size: 24px;vertical-align: middle;}
.main02 table thead td{color: #fff;background:#00479d;line-height: 1.3;}
.main02 .up{width: 40%;height: 100%;box-sizing: border-box;background:#ffe400;padding:25px;border-radius: 10px;position: relative;text-align: left;}
.main02 .up::before{position: absolute;content: "";width: 30px;height: 30px;clip-path: polygon(100% 0%, 0 0, 50% 100%);background-color: #ffe400;top: calc((100% - 30px) / 2);left: -25px;transform: rotate(90deg);}
.main02 .up img{height: 40%;margin-left: 10px;}
.main02 .up ul li{font-size: 26px; line-height: 1.5;  color: #333333;}
.main02 .up ul span{color: #c6000f;font-size: 30px;font-weight: bold;}
.main02>p{color: #333333;font-size: 30px;line-height:4;margin-bottom: 10px;}
.main02>a{font-size: 33px;color: #fff;background: #c6000f;text-decoration: none;padding: 10px 20px;border-radius: 10px;}
.main02>a:hover{box-shadow:0 0 15px 4px #FF6B6B;}
.main02>a:active{background:#7A0000;}

.main02 .mobile-table{display: none;}

/* main03 */
.main03bkg{background:#ddeef3;padding-top:80px;padding-bottom: 80px;}
.main03{width: 1024px;margin: 0 auto;text-align: center;}
.main03 h4{font-size: 60px;line-height: 1.5;margin-bottom: 20px;}

.main03 .circle{color: #fff;width: 185px;height: 185px;border-radius: 99em;font-size: 20px;box-sizing: border-box;padding:25px 10px;transform: translateX(-800px);transition: all .5s;display: flex; justify-content: center; align-items: center; flex-flow: wrap;}
.main03 .circle span{display: block;color: #ffff00;font-size: 30px;}
.main03 .pRight{transform: translateX(0px);}

.main03 li{margin-bottom:30px;display: flex;justify-content:space-between;align-items: center;}
.main03 li .triangle{height: 0;width: 0;border-top:15px solid transparent;border-bottom:15px solid transparent;}
.main03 li .triangle p{transition: all 5s;}
.main03 li .fade{opacity: 0;transition: .5s;}
.main03 li .fadeIn{opacity: 1;}

#shk-1{
	border-left: 25px solid #4bbce0;
	animation: shk-1 3s linear infinite;
}
@keyframes shk-1{
	0%{border-left: 25px solid #4bbce0;transform: translateX(-10px);}
	25%{transform: translateX(10px);}
	50%{border-left: 25px solid #108389;transform: translateX(-10px);}
	75%{transform: translateX(10px);}
	100%{border-left: 25px solid #4bbce0;transform: translateX(-10px);}
}

#shk-2{
	border-left: 25px solid #00b4bf;
	animation: shk-2 3s linear infinite;
}
@keyframes shk-2{
	0%{border-left: 25px solid #00b4bf;transform: translateX(-10px);}
	25%{transform: translateX(10px);}
	50%{border-left: 25px solid #33858A;transform: translateX(-10px);}
	75%{transform: translateX(10px);}
	100%{border-left: 25px solid #00b4bf;transform: translateX(-10px);}
}

#shk-3{
	border-left: 25px solid #0089be;
	animation: shk-3 3s linear infinite;
}
@keyframes shk-3{
	0%{border-left: 25px solid #0089be;transform: translateX(-10px);}
	25%{transform: translateX(10px);}
	50%{border-left: 25px solid #1E7A9F;transform: translateX(-10px);}
	75%{transform: translateX(10px);}
	100%{border-left: 25px solid #0089be;transform: translateX(-10px);}
}
.UPclose{
	transform:translateX(-420px) translateY(50px) scale(0.01) !important;
}
.DOWNclose{
	transform:translateX(-420px) translateY(-50px) scale(0.01) !important;
}

.main03 li .rectangle{font-size: 18px;width:75%;}
.main03 li .rectangle p{transition:all 2s;width: 90%;background: #fff;padding: 20px;text-align: justify;font-size: 20px;line-height: 1.5;}
.main03 li:first-child .rectangle p:hover{
	transition:all .1s;
	color: #fff;
	background: #4bbce0;
}
.main03 li:nth-child(2) .rectangle p:hover{
	transition:all .1s;
	color: #fff;
	background: #00b4bf;
}
.main03 li:nth-child(3) .rectangle p:hover{
	transition:all .1s;
	color: #fff;
	background: #0089be;
}
.main03 .UP{transform:translateX(-420px) translateY(50px) scale(0.01);}
.main03 .DOWN{transform:translateX(-420px) translateY(-50px) scale(0.01);}
.main03 .UPafter{transform:translateX(0px) translateY(0px) scale(1);}
.main03 .DOWNafter{transform:translateX(0px) translateY(0px) scale(1);}

.main03>p{color: #333333;font-size: 30px;line-height:2;margin-bottom: 10px;}
.main03>a{font-size: 33px;color: #fff;background: #c6000f;text-decoration: none;padding: 10px 20px;border-radius: 10px;}
.main03>a:hover{box-shadow:0 0 15px 4px #FF6B6B;}
.main03>a:active{background:#7A0000;}

/* main04 */
.main04bkg{padding-top:60px;padding-bottom:60px;}
.main04{width: 1024px;margin: 0 auto;text-align: center;}
.main04 h5{font-size: 60px;text-align: center;line-height:2;}
.main04 div{display: flex;justify-content:space-between; margin-bottom: 40px;}

.main04 .schedule{width: 60%;}
.main04 .schedule span{width: 100%;height:auto;display:block;font-size: 30px;color: #c6000f;font-weight: bold;text-align: center;background: #f9e9e9;line-height: 1.3;}
.main04 .schedule span em{font-size: 14px;}
.main04 .schedule td{border: 1px solid #c6000f;padding:18.5px;text-align:justify;line-height: 1.2;}
.main04 .schedule thead td{background: #c6000f;color: #fff;font-size: 40px;text-align: center;}
.main04 .schedule tbody{background:#f9e9e9;text-align: left;line-height: 1.2;}

.main04 .teacher{width: 35%;}
.main04 .teacher thead{background: #0068b7;color: #fff;text-align: center;vertical-align: middle;}
.main04 .teacher thead td{font-size: 40px;text-align: center;padding: 10px;line-height: 1.5;}
.main04 .teacher thead span{color:#fcf900;}
.main04 .teacher tbody td{vertical-align: middle;border: 1px solid #0068b7;padding:10px;line-height: 1.5;text-align: justify;display: flex;justify-content: space-between;}
.main04 .teacher tbody{background:#d4f1ff;}
.main04 .teacher tbody span{display: flex;align-items: center;justify-content: center;width: 50%; text-align: center; margin-right: 10px;background: #fff;color: #0068b7;font-weight: bold;font-size: 25px;padding: 5px;}

.main04>p{color: #333333;font-size: 30px;line-height:2;margin-bottom: 10px;margin-top: 20px;}
.main04>a{font-size: 33px;color: #fff;background: #b68d10;text-decoration: none;padding: 10px 20px;border-radius: 10px;}
.main04>a:hover{box-shadow: 0px 0px 15px 4px #EBB514;}
.main04>a:active{background:#5E4808;box-shadow: 0px 0px 15px 4px #5E4808;}

/* main05 */
.main05bkg{background: #ffe400;padding-top: 60px;padding-bottom: 60px;}
.main05{width:1024px;margin: 0 auto;text-align: center;}
.main05>div{display: flex;justify-content: space-around;align-items: center;}
.main05>div>img{height: 260px;transform: translateY(260px);}
.main05 .Upp{
	animation:Upp 1s linear;
	transform: translateY(0px)
}
@keyframes Upp{
	from{transform: translateY(260px);}
	to{transform:translateY(0px)}
}
.main05 h6{font-size: 54px; border-radius: 10px;width: 100%;padding: 30px; }
.main05 h6 span{font-weight: bold;}

.main05 .board{ margin: 0 0 20px; box-sizing: border-box; text-align:left;position: relative;z-index: 99;}
.main05 .board ul{display: flex;flex-wrap: wrap;justify-content:space-between; }
.main05 .board ul li{
    width:32%;background: #c6000f;color: #fff;padding:20px;box-sizing: border-box;border-radius: 10px;margin-bottom:10px;
    line-height: 1.4; text-align: center;
}
.main05 .board ul li img{ float: left; width: 40%;}
.main05 .board ul li h2{ font-size: 22px;}
.main05 .board ul li h3{ clear: both; margin: 0 0 10px; font-size: 30px; color: #ffe400;}
.main05 .board ul li p{ float: right; margin: 3px 0; padding: 2px 0; background-color: #FFF; width: 55%; border-radius: 50px; font-size: 18px; color: #000;}

.main05 .exp ul{position: relative;}
.main05 .exp li{background: #fff;margin-bottom: 30px;border-radius: 10px;box-sizing: border-box;padding:30px;text-align: left;display: flex;align-items: center;}
.main05 .exp li .content{width:76%;float: left;}
.main05 .exp li .name{font-size: 26px;color:#00479d;font-weight: bold;border-bottom: 2px dashed gray;margin-bottom: 20px;padding-bottom: 20px;}
.main05 .exp li .name span{color: #ed1c24;}
.main05 .exp li p{font-size: 20px;line-height: 1.5; text-align: justify;}
.main05 .exp li img{width: 186px;height: auto;float: right;}

.main05>p{color: #333333;font-size: 30px;line-height:2;margin-bottom: 10px;margin-top: 20px;}
.main05>a{font-size: 33px;color: #fff;background: #c6000f;text-decoration: none;padding: 10px 20px;border-radius: 10px;}
.main05>a:hover{box-shadow:0 0 15px 4px #FF6B6B;}
.main05>a:active{background:#7A0000;}

/* == 多元學習模式 == */
.studymode {padding: 110px calc((100% - 1000px) / 2);box-sizing: border-box;text-align: center;}
.studymode h1 {font-size: 60px;color: #00479d;}
.studymode h2 {display: inline-block;padding: 5px 40px;margin: 20px 0px 60px 0px;font-size: 1.8rem;line-height: 1.4;color: #00b4bf;text-align: center;border: 1px dashed #00b4bf;}
.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 {text-decoration: none;background: #c6000f;color: #fff;font-size: 33px;display: inline-block;padding: 10px 20px; width: 35%;border-radius: 10px; }
.studymode>.btn a:hover{box-shadow:0 0 15px 4px #FF6B6B;}
.studymode>.btn a:active{background:#7A0000;}
.studymodemobile {display: none;}

/* footer */
.footer{ padding: 50px calc((100% - 1200px)/2); width:100%; background:#898989; box-sizing: border-box;}
.footer ul{display: flex; flex-wrap: wrap;}
.footer ul li{ width: 20%; margin: 8px 0;}
.footer ul li a{ display:inline-block; font-size:20px; text-decoration:none; color:#FFF; position: relative;}
.footer ul li a::after{ content:''; display: inline-block; position: absolute; bottom:-2px; left: 45%; width: 0; height: 1px; background:#fff; transition: all .8s;}
.footer ul li a:hover::after{ left: 0; width: 99%;}

/*=====其他版型=====*/
@media (max-width: 1200px) {
  .footer{ padding: 50px 5%;}
  .footer li{ text-align: center;}
}

@media(max-width:1050px){

/* nav */
/* nav{display: none;} */

/*main01*/
.main01{width: 95%;}
.main01 h2 {font-size: 58px;}

/*main02*/
.main02{width: 95%;}
.main02 h3 {font-size: 45px;}

/*main03*/
.main03{width: 95%;}

/*main04*/
.main04{width: 95%;}
.main04 div{align-items: center;}
.main04 .schedule{width: 63%;}
.main04 .schedule td{padding: 10px;}
.main04 .teacher tbody td{align-items: center;}

/*main05*/
.main05{width: 95%;}
.main05 h6{font-size: 46px;}
.main05 .exp li .name{font-size: 22px;}

/* == 多元學習模式 == */
.studymode {padding: 80px 4%;}
.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: 1rem;line-height: 1.6;color: #4d4d4d;border-top: #4d4d4d 1px solid;}
.studymode .btn a {width: 30%;}

}
@media(max-width:960px){
	.main01 ul li img{left: 0%;}

	.main05 li{padding:20px;}
	.main05 li img{width: 170px;height: 170px;display:table-cell;vertical-align: middle;}
}

/*=============平板================*/
@media(max-width:768px){
    
 
/* main01 */
.main01 h2{font-size: 56px;}
.main01 ul{margin-top: 200px;}
.main01 ul li{font-size: 24px;box-sizing: border-box;padding: 0 20px 20px 20px;margin-bottom: 0;}
.main01 ul li img{max-width: 100%;height: auto;left: 0;right: 0;top:-140px;}
.main01 ul li p{margin-top:40px;font-weight: bold;font-size: 18px;line-height: 1.5;}
.main01 ul li em{margin: 0;}

/*main02*/
.main02 .up img{width: 40%;}
.main02 .up ul li{font-size: 20px;}
.main02 .up ul span{font-size: 28px;}

/*main03*/
.main03 .circle{width: 170px;height: 170px;font-size: 20px;}
.main03 .circle span{font-size: 28px;}

#shk-1{animation: none;}
#shk-2{animation: none;}
#shk-3{animation: none;}

.main03 li .rectangle p{width: 80%;}

/*main04*/
.main04 h5{font-size: 48px;}
.main04 .teacher thead td{font-size: 32px;}

/*main05*/
.main05 h6{font-size: 36px;}
.main05 li .content{width: 70%;}
.main05 li .name{font-size: 24px;}
.main05 .board ul{display: flex;flex-wrap: wrap;justify-content:space-between; }
.main05 .board ul li{ padding:20px;margin-bottom:10px;}
.main05 .board ul li img{ float: none; width: 100%;}
.main05 .board ul li h2{ font-size: 20px;}
.main05 .board ul li h3{ font-size: 24px; }
.main05 .board ul li p{ float:none; margin: 4px 0; width: 100%;}

/* footer */
.footer { padding: 30px 4%;}
.footer ul li{ text-align: center;}
	
}

/*==============行動版================*/
@media(max-width:767px){

/* header */
header{background:url(../images/mobile-header.jpg)no-repeat;padding-bottom:129.46%;width: 100%;background-size: cover;}
header img{display: none;}

/* nav */
nav{padding: 20px 0 20px;}
.nav{width:100%;}
.nav ul li a{margin:10px;padding:5px 15px;font-size: 22px;overflow: hidden; text-align: center;}

/* main */

/* main01 */
.main01bkg{padding:60px 0 60px 0;}
.main01 h2{font-size:9vw;line-height: 1.3;}
.main01 h2 em{display: block;}
.main01 ul{display: block;margin-top: 30px;}
.main01 ul li{width: 100%;padding:8vw 10px 10px 10px;font-size: 22px;margin-top:80px;}
.main01 ul li img{max-width:50%;height: auto;left:23vw;top:-20vw;}
.main01>p{font-size: 24px;}
.main01 a{font-size: 24px;}

/* main02 */
.main02bkg{background:none;}
.main02>div{display: block;}
.main02 h3{font-size: 9vw;}
.main02 table{display: none;}
.main02 .mobile-table{display: table;width: 100%;}
.main02 .mobile-table .f-td{background:#00479d;color: #fff;}
.main02 .mobile-table td{font-size: 16px;font-weight: bold;}
.main02 .up{width: 100%;margin-top:40px; padding: 20px;}
.main02 .up::before{position: absolute;content: "";width: 30px;height: 30px;clip-path: polygon(100% 0%, 0 0, 50% 100%);background-color: #ffe400;left: calc((100% - 30px) / 2);top: -25px;transform: rotate(180deg);}

.main02>p{
	font-size: 20px;
}
.main02 .up img{margin-left: 20px;}
.main02 .up ul li{line-height:1.3;font-size: 15px;font-weight: bold;}
.main02 .up ul span{font-size: 26px;}
.main04 .schedule td{padding: 5px;}
.main04 .schedule span em{display: block;font-size: 12px;line-height: 2;}

/* main03 */
.main03 h4{font-size:12vw;}
.main03 li{display: block;}
.main03 .circle{margin: 0 auto;}
.main03 li .triangle{
	margin:10px auto;
	border: 0 !important;
	border-left: 15px solid transparent !important;
	border-right:15px solid transparent !important;
	border-top: 20px solid #666666 !important;
}
.main03 li .rectangle{width: 100%;box-sizing: border-box;}
.main03 li .rectangle p{padding: 10px;margin: 0 auto;}
.main03>p{font-size: 22px;margin-bottom:20px;}

/*main04*/
.main04 h5{font-size:7vw;}
.main04 div{display: block;}
.main04 .schedule{width: 100%;margin: 30px 0;}
.main04 .schedule span{font-size: 7.5vw;}
.main04 .teacher{width: 100%;margin: 30px 0 0 0;}
.main04 .teacher tbody span{font-size: 8vw;}
.main04>p{font-size: 6vw;margin-bottom: 20px;}
.main04>a{font-size: 24px;}

/*main05*/
.main05>div{display: block;}
.main05>div>img{width: 100%;height: auto;position: relative;z-index:1;transform: translateY(0);}
.main05 h6{width:90%;padding:15px;margin: 0 auto 10px auto;position: relative;z-index: 5; font-size: 32px; }
.main05 .board ul{ flex: none; flex-wrap: wrap;justify-content:space-between; }
.main05 .board ul li{ width: 100%; padding:20px;margin-bottom:10px;}
.main05 .board ul li img{ float: none; margin: 0 auto; width: 200px; height: 200px;}
.main05 .board ul li h2{ font-size: 20px;}
.main05 .board ul li h3{ font-size: 30px; }
.main05 .board ul li p{ float:none; margin: 5px 0; width: 100%; font-size: 24px;}

.main05 .exp li{display: block;padding: 20px;}
.main05 .exp li .content{width: 100%;}
.main05 .exp li img{float: none;display: block;margin: 0 auto; width: 186px; height: auto;}
.main05 .exp li .name{text-align: center; font-size: 5.2vw;line-height: 1.3;}
.main05 .exp li .name span{display: block;text-align: center;}
.main05 .exp li p{font-size: 4.6vw;}
.main05>p{font-size: 22px;margin-bottom: 30px;}
.main05>a{font-size: 24px;}

/* == 多元學習模式 == */
.studymode {display: none;}
.studymodemobile {display: block;text-align: center;padding: 40px 5%;}
.studymodemobile h1 {font-size: 10vw;color: #004993;}
.studymodemobile h2 {display: inline-block;margin: 25px 0px;padding: 5px 10px;font-size: 5vw;color: rgb(155, 0, 18);outline: rgb(155, 0, 18) 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: 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;flex-flow: column;gap: 15px;justify-content: center;margin: 30px 0px 0px;width: 100%;}
.studymodemobile .btn a {text-decoration: none;background: rgb(214, 0, 26);color: #fff;font-size: 7.5vw;display: inline-block;padding: 10px 0px; width: 100%; border-radius: 10px; }

/* footer */
 .footer{ padding: 30px 2% 70px;}
 .footer ul li{ width: 33%;}
 .footer ul li a{ font-size: 16px;}

}