/*通用設定*/
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;
}
/* == 桌機版優先 ============================================================================= */
.wrap{
	overflow: hidden;
}

/*header*/
header{background:url(../images/header.jpg)no-repeat;background-size:cover;width: 100%;height: 0;padding-bottom:44.58%;overflow: hidden; position: relative;}
.cha{position: absolute;width: 100%;top: 0;z-index: 5;padding-bottom: 44.58%;background-size: cover;}
.fire{position: absolute;width: 100%;bottom:0;animation-name:Up;animation-duration:.4s;animation-timing-function:linear;}
@keyframes Up{
from{transform:translateY(400px);}
to{transform:translateY(0px);}
}
.boom{position: absolute;z-index:3;width: 100%;}
.boom{
	transform:translateX(-1vw) scale(1.2);
	animation-name:Boom;
	animation-duration:1.5s;
	animation-timing-function:linear;
}
@keyframes Boom{
0%{transform:translateX(21vw) scale(0);}
40%{transform:translateX(21vw) scale(0);}
50%{transform:translateX(19vw) scale(0.12);}
100%{transform:translateX(-1vw) scale(1.2);}	
}

/*nav*/
nav{background: #12254d;padding-top:40px;padding-bottom:40px;}
.nav{width: 900px;margin: 0 auto;}
.nav>p{font-size: 36px;font-weight: bold;color: #fff;text-align:left;line-height: 2;margin-left: 10px;}
.nav em{color: red;}
.nav ul{display:flex;flex-wrap: wrap;align-content: space-around;}
.nav ul li{width: 100%;margin:10px 0;box-sizing: border-box;background: #ffe400;position: relative;z-index:0;}

.nav ul a{display: block;color: #000; width: 100%; text-decoration: none;font-size: 36px;padding:15px;font-weight: bold;}
.nav ul em{color: red;transition: all .5s;position: relative;}

.nav ul a:hover{
	animation-name: opop;
	animation-duration:.5s;
	transform:translateX(80px) scale(1.2);
}
@keyframes opop{
	from{transform:translateX(0) scale(1);opacity:0.8;}
	to{transform:translateX(80px) scale(1.2);opacity: 1;}
}
.nav ul li::after{
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	z-index:-1;
	width: 100%;
	height: 100%;
	display: block;
}
.nav ul li:active::after{
	content: '';
	position: absolute;
	box-shadow:0 0 15px 4px #727272 inset;
}

/*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: 26px;box-sizing: border-box;width: 30%;margin-bottom:30px;}
.main01 ul li img{position: absolute;top:-160px;left:15px;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 img{
	animation-timing-function:linear;
	animation-name: jumpqq;
	animation-duration:2s;
	animation-iteration-count: infinite;
} */
/* @keyframes jumpqq{
	0%{transform: scale(0.1) translateY(-300px);}
	5%{transform: scale(0.3) translateY(-250px);}
	10%{transform: scale(0.1) translateY(-300px);}
	15%{transform: scale(0.3) translateY(-250px);}
	20%{transform: scale(0.1) translateY(-300px);}
	25%{transform: scale(0.3) translateY(-250px);}
	30%{transform: scale(0.1) translateY(-300px);}
	35%{transform: scale(0.3) translateY(-250px);}
	40%{transform: scale(0.1) translateY(-300px);}
	45%{transform: scale(0.3) translateY(-250px);}
	50%{transform: scale(0.1) translateY(-300px);}
	55%{transform: scale(0.3) translateY(-250px);}
	60%{transform: scale(0.1) translateY(-300px);}
	65%{transform: scale(0.3) translateY(-250px);}
	70%{transform: scale(0.1) translateY(-300px);}
	75%{transform: scale(0.3) translateY(-250px);}
	80%{transform: scale(0.5) translateY(-200px);}
	100%{transform: scale(1) translateY(0px);;}
} */

.main01 ul li em{color: #ffcc66;margin-top:80px;display: block;}
.main01 ul li p{color:#fff;display: block;margin:0 30px 30px 30px;}
.main01>p{color: #fff;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{padding-top: 80px;padding-bottom: 80px;}
.main02{width: 1000px;margin: 0 auto;text-align: center;}
.main02 ul{display: flex;justify-content: space-between;flex-wrap: wrap;margin-bottom:30px;}
.main02 ul li{width: 50%;font-size: 66px;}
.main02 ul li img{opacity: 0;transition: all 1s;}
.jump{
	animation-name: jump;
	animation-duration:.8s;
	animation-timing-function:linear;
	opacity: 1 !important;
}
@keyframes jump{
0%{transform:perspective(400px) scale(0.1) translateY(-300px);}
50%{transform:perspective(400px) scale(0.5) translateY(-200px);}
100%{transform:perspective(400px) scale(1) translateY(0px);;}
}

.main02>p{font-size: 30px;margin-bottom:30px;}
.main02>a{font-size: 33px;color: #fff;background: red;text-decoration: none;padding:10px 25px;border-radius: 10px;}
.main02>a:hover{box-shadow:0 0 15px 4px #FF6B6B;}
.main02>a:active{background:#7A0000;}

/*main03*/
.main03bkg{background:url(../images/main03.jpg)no-repeat;background-size:cover;background-attachment: fixed;}
.main03{width: 1000px;margin: 0 auto;padding-top:120px;padding-bottom:120px;text-align: center;}
.main03 h3{font-size: 68px;text-align: left;margin-bottom:50px;}
.main03 h3 em{color: #ff3333;}
.main03 ul{text-align: left;}
.main03 ul li{width: 100%;display: flex;justify-content: space-between;margin-bottom: 25px;border-radius: 10px;position: relative;}
.main03 ul li>img{position: absolute;right:60px;top:-320px;width: 320px;height: 320px;}

.main03 ul li>img{filter: drop-shadow(0 0 15px #ffe400);
	animation-name: six;
	animation-duration:1s;
	animation-iteration-count: infinite;
	animation-timing-function:linear;}
@keyframes six{
	0%{filter: drop-shadow(0 10px 5px 5px #000);}
	100%{filter: drop-shadow(0 10px 200px 200px #000);}
}

.main03 ul .left{width: 30%;background: #12254d;border-top-left-radius:10px;border-bottom-left-radius:10px;box-sizing: border-box;font-size: 32px;padding: 25px;color:#fff;line-height: 1.3;}
.main03 ul .left em{color: #00ffff;display: block;}
.main03 ul .right{width: 70%;background: #ffe400;border-top-right-radius:10px;border-bottom-right-radius:10px;box-sizing: border-box;padding: 20px;display: flex;justify-content:space-between;align-items: center;}
.main03 .rightContent{width:70%;}
.main03 ul .rightTitle{font-size: 22px;font-weight: bold;}
.main03 ul .rightName{font-size: 24px;color:#666666;line-height: 2;border-bottom: 1px dashed #666666;margin-bottom: 15px;font-weight: bold;}
.main03 .rightContent p{font-size: 18px;line-height: 1.3;}
.main03 .rightContent em{color: red;}
.main03 .mobile-right{display: none;}
.main03 ul .right img{border-radius: 99em;width:150px;height:150px;float:right;}
.main03>p{text-align: center;font-size:30px;margin-bottom:30px;}
.main03>a{background: #e60012;color: #fff;padding: 0.3em 1em;font-size: 33px;text-decoration: none;border-radius: 10px;}
.main03>a:hover{box-shadow:0 0 15px 4px #FF6B6B;}
.main03>a:active{background:#7A0000;}

/*course*/
.coursebkg{background: #eee;padding:80px 0;}
.course{text-align: center;width: 1100px;margin: 0 auto;}
.course h2{font-size: 55px;font-weight: bold;color: #451ead;margin-bottom:40px;}
.course .part01-mobile{display: none;}
.course .part01{margin-bottom: 40px;}
.course .part01 p{text-align: center;}
.course .part01 p:first-child{font-size: 35px;color: #fff;background: #451ead;border-radius: 50px;padding: 0.2em 2em;display: inline;position: relative;}
.course .part01 p:first-child::before{content: '';display: block;background: #000;width: 200px;height: 1px;position: absolute;left: -200px;top:48%;}
.course .part01 p:first-child::after{content: '';display: block;background: #000;width: 200px;height: 1px;position: absolute;right: -200px;top:48%;}
.course .part01 p:nth-child(2){margin:30px 0 40px 0;font-size:25px;font-weight: bold;}

.course .part02{margin-top: 100px;}
.course .part02>p{text-align: center;}
.course .part02>p:first-child{font-size: 35px;color: #fff;background: #451ead;border-radius: 50px;padding: 0.2em 2em;display: inline;position: relative;}
.course .part02>p:first-child::before{content: '';display: block;background: #000;width: 200px;height: 1px;position: absolute;left: -200px;top:48%;}
.course .part02>p:first-child::after{content: '';display: block;background: #000;width: 200px;height: 1px;position: absolute;right: -200px;top:48%;}

.course .part02>p:nth-child(2){margin:30px 0 40px 0;font-size:25px;font-weight: bold;}

.course .part02 ul{margin-bottom: 80px;width:80%;margin: 0 auto; }
.course .part02 ul li{display: flex;justify-content:space-between;align-items: center;text-align: left;}
.course .part02 ul li:first-child{margin-bottom:20px;}
.course .part02 ul li .course{background: #e60012;box-sizing: border-box;padding:15px 10px 15px 30px;border-radius: 10px;color: #fff;font-size: 20px;line-height: 1.5;text-align: left;}
.course .part02 ul li .course span{color: #ffe100;font-size: 24px;}

.course .hundred{margin-bottom:20px;font-size:30px;font-weight: bold;color:#e8380d;}
.course>a{font-size: 34px;color: #fff;background: #000;text-decoration: none;padding: 0.2em 1.5em;border-radius: 50px;}


/*main04*/
.main04bkg{padding-top: 80px;padding-bottom: 80px;}
.main04{width: 1000px;margin: 0 auto;text-align: center;}
.main04 h4{font-size: 54px;line-height: 1.2;}
.main04 ul{display: flex; justify-content: space-around;flex-wrap: wrap;margin-bottom: 20px;margin-top: 20px;}
.main04 ul li{margin-bottom: 10px;}
.main04>p{text-align: center;font-size:30px;margin-bottom:30px;}
.main04>a{background: #e60012;color: #fff;padding: 0.3em 1em;font-size: 33px;text-decoration: none;border-radius: 10px;}
.main04>a:hover{box-shadow:0 0 15px 4px #FF6B6B;}
.main04>a:active{background:#7A0000;}

/*footer*/
footer{padding-top:40px;padding-bottom: 40px;background:#898989;}
.footer{width: 1000px;margin: 0 auto;display: flex;justify-content:center;}
.footerRight>a{font-size: 22px;color: red;background: #fff;padding: 0.2em 10em 0.2em 0.5em;text-decoration:none;border-radius: 10px;display: block;font-weight: bold;margin-top: 20px;margin-bottom:10px;margin-left: 10px;position: relative;}
.footerRight>a i{position: absolute;right:10px;}
.footerRight>a:active{box-shadow: 0 0 15px 5px #898989 inset;}
.footerRight ul{display: flex;justify-content: space-around;}
.footerRight ul li a{font-size: 20px;color: #fff;text-decoration: none;font-weight: bold;position: relative;}
.footerRight ul a::after{content: '';background: #fff;transition: all .5s; width: 0;height:1px;position: absolute;bottom: 0;left: 40%;}
.footerRight ul a:hover::after{width: 100%;left: 0;}
.footerRight ul a:active{color: #666666;}
.footerRight ul a:active::after{background: #666666;}


@media(max-width:1120px){
.main01{width: 98%;}
.course{width: 98%;}
}
@media(max-width: 950px){
.nav{width: 95%;}
}
/* == 平版版型區 ============================================================================= */
@media(max-width:768px){
/*header*/

/*nav*/
.nav{width: 95%;}
.nav ul a{width: 98%;font-size: 33px;}
.nav ul a:hover{
	animation:none;
	transform:none;
}

/*main*/

/*main01*/
.main01{width: 95%;}
.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 em{margin-top:40px;font-weight: bold;font-size: 18px;line-height: 1.5;}
.main01 ul li p{margin: 0;}

/*main02*/
.main02{width: 98%;}
.main02 ul{width: 100%;}
.main02 ul li{font-size: 58px;}
.main02 ul li img{width: 90%;}

/*main03*/
.main03{width: 98%;}
.main03 h3{font-size: 54px;line-height: 1.2;}
.main03 ul .right{padding: 15px;}
.main03 ul .rightTitle{font-size: 22px;}
.main03 ul .rightName{font-size: 20px;}
.main03 ul .left{font-size: 28px;}
.main03 ul .left em{margin: 0 0 10px 0;}
.main03>p{font-weight: bold;}

/*course*/
.course .part01 {overflow: hidden;padding-top:20px;}
.course .part01 p:first-child::before{left:-20%;width:20%;}
.course .part01 p:first-child::after{right:-20%;width:20%;}

.course .part02{margin-top: 80px;}
.course .part02 p:first-child::before{left:-20%;width:20%;}
.course .part02 p:first-child::after{right:-20%;width:20%;}
.course .part02 ul li {justify-content: space-around;}

/*main04*/
.main04{width: 95%;}
.main04 ul{justify-content: space-between;margin-top: 20px;}
.main04 ul li{width:30%;}
.main04 ul li img{width: 100%;}

/*footer*/
.footer{width: 90%;justify-content: space-around;}
.footer img{width: 30%;}
.footerRight{width: 65%;}
.footerRight>a{padding: 0.2em 0.2em 0.2em 0.2em};

}

/* == 手機版型區 ============================================================================= */
@media(max-width:767px){

/*header*/
header{background:url(../images/header-mobile.jpg)no-repeat;background-size:cover;width: 100%;height: 0;padding-bottom:144.44%; position:static;}
.cha{display:none;}
.boom{display: none;}
.fire{display: none;}

/*nav*/
.nav{width: 98%;}
.nav>p{font-size: 5vw;}
.nav ul a{font-size:4.6vw;font-weight: bold; padding: 10px 0 10px 5px;}

/*main*/

/*main01*/
.main01bkg{padding-top: 40px;padding-bottom: 40px;}
.main01 h2{font-size: 36px;}
.main01 h2 em{display: block;margin-top: 50px;}
.main01 ul{display: block;margin-top:50px;}
.main01 ul li{width: 85%;margin: 0 auto; margin-top:50px;font-size: 6vw;}
.main01 ul li img{top:-55px;left:-30px;width: 110px;}
.main01 ul li em{font-size: 22px;}
.main01>p{font-size:5.5vw;}
.main01 a{font-size: 25px;}

/*main02*/
.main02bkg{padding-top:50px;padding-bottom: 30px;}
.main02 ul{display: block;}
.main02 ul li{width: 100%;font-size: 8vw;}
.main02 ul li:first-child{margin-bottom:35px;}
.main02 ul li img{opacity: 1;}
.main02 a{font-size: 25px;}


/*main03*/
.main03{margin: 0 auto 0 auto;padding:40px 0 ;}
.main03 h3{font-size: 40px; margin-bottom: 10vw;text-align: center;}
.main03 ul li>img{display: none;}
.main03 ul li{display: block;}
.main03 ul .left{width: 100%;border-bottom-left-radius:0;border-top-right-radius:10px;text-align: center;}
.main03 ul .right{width: 100%;border-top-right-radius:0;border-bottom-left-radius:10px;padding:10px;}
.main03 ul .rightTitle{line-height: 1.5;margin-top:10px;text-align: center;}
.main03 ul .rightTitle em{display: block;}
.main03 .rightContent{width: 100%;}
.main03 .rightContent p{line-height:2;}
.main03 ul .right img{float:none;display:none;margin: 0 auto;}
.main03 ul .right .mobile-right{display: block;}
.main03 ul .rightName{padding-bottom: 10px;font-size: 16px;text-align: center;}

/* course */
.course h2{font-size: 15vw;line-height: 1.1;}

.course .part01 p:first-child{font-size: 8vw}
.course .part01 p:first-child::before,.course .part01 p:first-child::after{display: none;}
.course .part01 p:nth-child(2){font-size: 4vw;}
.course .part01 .into{display: none;}

.course .part01-mobile{display: block;overflow: hidden;}

.course .part01-mobile ul li:first-child{background:#1fbb7b; position: relative;z-index: 1;}
.course .part01-mobile ul li:nth-child(2){background:#0055e3;position: relative;z-index: 3;}
.course .part01-mobile ul li:nth-child(3){background: #ff7e00;position: relative;z-index: 3;}
.course .part01-mobile ul li:nth-child(4){background:#d93b94;position: relative;z-index: 1;}
.course .part01-mobile ul li{font-size:20px;color: #fff;padding:10px 20px 20px 20px;box-sizing: border-box;border: 2px solid #fff;margin-bottom: 20px;line-height: 1.2;}
.course .part01-mobile ul li span{line-height: 1.5; font-size: 12vw;text-shadow:0px 0px 5px #000;}

.course .part02::before{content:'';display: block;width: 80%;height: 1px;background: #000;margin: 0 auto 50px auto;}
.course .part02{margin: 0;}
.course .part02 p:first-child{font-size: 8vw;}
.course .part02 p:first-child::before,.course .part02 p:first-child::after{display: none;}
.course .part02>p:nth-child(2){font-size:4vw;}

.course .part02 ul{margin-bottom: 40px;}
.course .part02 ul li img{width: 60%;}
.course .part02 ul li{display: block;text-align: center;}
.course .part02 ul li:first-child{margin-bottom: 35px;}
.course .part02 ul li .course{width: 96%;margin: 0 auto;padding: 15px;}
.course .part02 ul li .course span{text-align:left;}
.course .part02 ul p{margin-bottom: 10px;font-size:4.7vw;}

.course .hundred{font-size:7vw;}
.course>a{font-size: 26px;padding: 0.2em 2em;}

/*main04*/
.main04bkg{padding-top: 40px;padding-bottom: 40px;}	
.main04 h4{font-size:9vw;}
.main04 ul{justify-content: center;}
.main04 ul li{width:60%;}

/*footer*/
footer{padding-top: 20px;padding-bottom: 20px;}
.footer{flex-wrap: wrap;width: 95%;}
.footer img{width:200px;height: auto;margin-bottom: 10px;}
.footerRight{width: 100%;}
.footerRight>a{margin: 0;font-size: 18px;}
.footerRight ul{margin: 10px; flex-wrap: wrap;justify-content: space-between;}
.footerRight ul li a{line-height:1.5;}
.footerRight ul li{width:80px;}
}