html, body, div, span, iframe,
h1, h2, h3, h4, h5, h6, p,
a,em, img, q, s,strong, sub, sup,
b, u, i,dl, dt, dd, ol, ul, li,form, label,
table,tbody, tfoot, thead, tr, th, td,
article, aside, canvas, footer, header,
menu, nav,mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;
}
article, aside, details,
footer, header,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:"微軟正黑體" !important;
}
.clearfix{clear:both;}

/* ===== desktop ===== */
.bodybkg::after{content:'';position: fixed;top: 0;left: 0;width: 100%;height: 100%;background:rgb(0, 0, 0,0.5);}

/* nav */
nav{background: #990000;width: 100%;padding:20px calc((100% - 1200px)/2);box-sizing: border-box;justify-content:flex-end;display:flex;position: relative;z-index: 9999;}
nav ul{display:flex;}
nav ul li{margin: 0 5px;box-sizing: border-box;border-radius: 50px;overflow: hidden;}
nav ul li a{color: #fff;text-decoration: none;font-size: 20px;display: block;width: 100%;height: 100%;padding: 10px 15px;}
nav ul li:hover{background: #fff;}
nav ul li:hover a{color: #990000;}

nav.nav{position: fixed;top:0;left: 0;right: 0;width: 100%;}

/* header */
header{background:url(../images/header.jpg)no-repeat;width: 100%;height: 0;padding-bottom:32.29%;background-size: cover;}

/*aside*/
aside{position: fixed;bottom:0;left:-100%;transition: all .5s; background: #33B4AD; height: 100%;box-sizing: border-box;padding:0 20px 80px 20px; z-index: 50;box-sizing: border-box;display: flex;flex-flow: column;justify-content: space-between;align-items: center;}
aside.aside-open{left: 0;}
aside .aside-close{position: absolute;top:85px;right:5px;}
aside p{font-weight: bold;font-size: 20px;}
aside a{color: #fff;font-size: 18px;text-decoration: none;}
aside a:hover{text-decoration: underline;}

/* main */
/* main01 */
.main01{padding:60px calc((100% - 1200px)/2);text-align: center;}
.main01 h2{font-family: 'Noto Sans TC', sans-serif;font-weight: bold;font-size: 60px;line-height: 2;}
.main01 h2 span{color:#990000;}
.main01 ul{display:flex;justify-content: space-between;flex-wrap: wrap;}
.main01 ul li{width: 23%;margin:30px 0;}
.main01 ul li a{position: relative;display: block;overflow: hidden;border-radius: 10px;width: 100%;height: 0;padding-bottom:75%;}
.main01 ul li a img{width: 100%;height: 100%;position: absolute;left: 0;top: 0;transition:all .5s;}
.main01 ul li a>div{position: absolute;bottom: 0;left: 0;width: 100%;height:37%;text-decoration: none;color: #fff;background:rgb(0, 0, 0,0.5); z-index: 5;display: flex;align-items: center;justify-content: center; padding:2% 10%;box-sizing: border-box;font-size:23px;text-align: left;font-weight: bold;}
.main01 ul li a:hover img{transform: scale(1.1);}
.main01 ul li>p{color:#990000;font-weight: bold;font-size: 18px;margin: 10px 0;line-height: 1.2;}
.main01 ul li>p span{display: block;}

/* main02 */
.main02{background: #ecdec3;padding:20px calc((100% - 1200px)/2) 80px calc((100% - 1200px)/2);overflow: hidden;}
.main02 .head{position: relative;margin-bottom: 60px;}
.main02 .head img{position: absolute;}
.main02 .head .Img-1{top:-10%;left:13%;transform: scale(1.2);}
.main02 .head .Img-2{bottom:5%;right:10%;transform: scale(0.9);}
.main02 .head .Img-3{bottom:-35%;right:17%;transform: scale(0.9);}
.main02 .head h3{font-family: 'Noto Sans TC', sans-serif;font-weight: bold;font-size: 60px;color: #990000;text-align: center;padding: 30px 0;}
.main02 .head p{font-size:36px;font-family: 'Noto Sans TC', sans-serif;color: #000;text-align: center;display: flex;align-items: center;justify-content: center;}
.main02 .head p::before{content:'';display:block;height:3px;width:30px;background: #000;}
.main02 .head p::after{content:'';display:block;height:3px;width:30px;background: #000;}

.main02>ul{display: flex;justify-content: space-between;margin-bottom:60px;}
.main02 .course{line-height: 0;}
.main02 .course img{border: 1px solid #990000;}
.main02 .course div p{color: #fff;background: #990000;line-height: 2;text-align: center;font-size: 22px;font-weight: bold;font-family: 'Noto Sans TC', sans-serif;}
.main02 ul li>p{font-size: 22px;text-align: center;border-bottom: 1px dashed #8f8a81;line-height:2;}
.main02 ul li .classA{text-align: center;margin: 10px 0;font-size: 22px;}
.main02 ul li a{font-size: 22px;color: #990000;font-weight: bold;line-height:1.3;margin: 0 5px 0 0;text-decoration: none;}
.main02 ul li a:hover{text-decoration:underline;}


/* main03 */
.main03{padding:100px calc((100% - 1200px)/2);text-align: center;}
.main03 h4{font-size: 60px;color: #990000;font-family: 'Noto Sans TC', sans-serif;line-height: 1.6;}
.main03>p{font-size:36px;font-family: 'Noto Sans TC', sans-serif;color: #000;text-align: center;display: flex;align-items: center;justify-content: center;}
.main03>p::before{content:'';display:block;height:3px;width:30px;background: #000;}
.main03>p::after{content:'';display:block;height:3px;width:30px;background: #000;}
.main03 ul{display: flex;justify-content: space-between;margin:30px 0;}
.main03 ul li{width: 21%;}
.main03 ul li img{width: 100%;margin-bottom:20px;}
.main03 ul li a{width: 100%;display:block;background: #990000;color: #fff;font-weight:bold;text-decoration: none;font-size: 28px;border-radius:10px;line-height:1.6;margin:10px 0;overflow: hidden;}
.main03 ul li a i{position: relative;}
.main03 ul li a i::after{content:'\f101';font-family: "Font Awesome 5 Free";font-style: normal;position: absolute;right:0;overflow: hidden;transition:all 0s;}
.main03 ul li a:hover i::after{transition:all .8s;opacity: 0;transform: translateX(20px);}

/* footer */
footer{background: #293946;padding:35px;box-sizing: border-box;padding:40px calc((100% - 1200px)/2);}
footer ul{display: flex;justify-content: space-between;margin-bottom:20px;}
footer ul li{border-right: 1px solid #fff;width: 9%;text-align: center;}
footer ul li:last-child{border: 0;}
footer ul a{color: #fff;text-decoration: none;font-size: 18px;}
footer>p{color: #fff;text-align: center;}

footer ul a{position: relative;}
footer ul a::after{content:'';position: absolute;bottom: 0;left: 45%;background:#fff;height:1px;width:0;transition: all .5s;}
footer ul a:hover::after{width: 100%;left:0;}

/* bottom */
.bottom{position: fixed;bottom:10%;right:2%;display: flex;flex-flow: column;}
.bottom a{text-decoration: none;font-weight: bold;text-align: center;}
.bottom .gotop{color: #33B4AD;font-size:50px;margin-bottom:10px;}
.bottom .askLine{background:#33B4AD;color: #fff;width: 100px;height: 100px;border-radius:99em;display: flex;justify-content: center;align-items: center;font-size:20px;}

/* ===== other ===== */
@media(max-width:1250px){
/* nav */
/* header */
/* main */
.main01{padding:60px calc((100% - 1100px)/2);}

.main02{padding:20px calc((100% - 900px)/2) 80px calc((100% - 900px)/2);}
.main02 .head{width:700px;margin:20px auto;}
.main02 .head .Img-1{left:-10%;top: -40%;}
.main02 .head .Img-2{right:-20%;bottom:35%;}
.main02 .head .Img-3{right:-10%;bottom:-10%;}
.main02>ul li{width: 25%;}
.main02>ul li img{width: 100%;box-sizing: border-box;}
.main02 ul li>p{font-size:18px;line-height: 3;}
.main02 ul li a{font-size: 20px;}

.main03{padding:80px calc((100% - 850px)/2);}
.main03 ul li a{font-size:22px;}

/* footer */
footer ul{flex-wrap: wrap;justify-content:flex-start;}
footer ul li{width:18%;margin:10px 10px;}
}

@media(max-width:1100px){
/* main */
.main01 ul li{width: 24%;}
.main01 ul li a>div{font-size: 20px;padding: 2% 3%;}
.main01 ul li>p{font-size: 16px;}
.main02 ul li a{font-size:18px;}

/* footer */
footer ul{flex-wrap: wrap;justify-content:flex-start;}
footer ul li{width:17%;margin:10px 10px;}
}

/* ===== table ===== */
@media(max-width:768px){
/* nav */
nav{padding: 20px 1%;box-sizing: border-box;}

/* header */
/* main */
/* main01 */
.main01{padding: 60px 2%;}
.main01 h2{font-size:5vw;}
.main01 ul li a>div{font-size:2.2vw;line-height: 1.3;height: 40%;}
.main01 ul li a>div>p{text-align: center;}
.main01 ul li>p{font-size: 18px;}
.main01 ul li>p span{display:inline;}

/* main02 */
.main02{width: 98%;padding:0 1% 60px 1%;}
.main02 .head{width: 98%;margin:60px auto;}
.main02 .head h3{position: relative;z-index:20;padding-top: 0;}
.main02 .head .Img-1{left: 0;}
.main02 .head .Img-2{right: -70px;bottom:40%;}
.main02 .head .Img-3{right:0;bottom:-20%;}
.main02>ul li{width: 24%;}
.main02 ul li .classA{font-size: 18px;}
.main02 ul li>p{font-size: 16px;}
.main02 ul li a{font-size: 16px;margin: 0;}

/* main03 */
.main03{width: 98%;padding:50px 1%;}
.main03 ul{margin: 40px 0;}
.main03 ul li{width: 23%;}
.main03 ul li a i::after{display: none;}

/* footer */

/* bottom */
.bottom{position: fixed;bottom:2%;right:2%;display: flex;flex-flow: column;}
}
/* ===== phone ===== */
@media(max-width:767px){
/* nav */
nav{display: block;}
nav ul{display: flex;justify-content: space-around;}
nav ul li{border-radius: 0;}
nav ul li a{box-sizing: border-box;padding:0;font-size:6vw;}

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

/* main */
/* main01 */
.main01{padding:40px 2%;}
.main01 h2{font-size:10vw;line-height: 1.3;}
.main01 h2 span{display: block;}
.main01 ul{justify-content: center;}
.main01 ul li{width: 90%;margin: 30px 0 0 0;}
.main01 ul li a>div{font-size:6vw;height: 30%;}
.main01 ul li>p{font-size:5.5vw;}

/* main02 */
.main02{padding:20px 1%;}
.main02 .head{margin:0;width: 100%;padding:50px 0;}
.main02 .head .Img-1{left: -10%;top: -30%;}
.main02 .head .Img-2{right: -30%;}
.main02 .head .Img-3 {right: -8%;bottom: -3%;}
.main02 .head h3{font-size:10vw;padding-bottom:15px;}
.main02 .head p{position: relative;z-index: 20;font-size:7vw;}
.main02>ul{flex-wrap: wrap;}
.main02>ul li{width: 90%;margin: 0 auto 30px auto;}
.main02 ul li>p{font-size:7vw;line-height:2.5;}
.main02 ul li .classA{font-size:7vw;}
.main02 ul li a{font-size:7vw;margin-right:5px;}

/* main03 */
.main03{padding:40px 1% 10px 1%;}
.main03 h4{font-size:12vw;}
.main03>p{font-size:6.5vw;}
.main03>p::before,.main03>p::after{width:5%;}
.main03 ul{flex-wrap: wrap;}
.main03 ul li{width:80%;margin: 0 auto 50px auto;}
.main03 ul li img{margin-bottom:5px;}
.main03 ul li a{line-height:1.8;}

/* footer */
footer ul li{width:31%;margin:10px 1%;}
footer ul li a{display: block;width: 100%;height: 100%;}
footer>p{font-size: 14px;}

/* bottom */
.bottom .gotop{font-size: 30px;}
.bottom .askLine{width:80px;height:80px;font-size: 16px;}
}