/*通用設定*/
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:"微軟正黑體" !important;
	box-sizing: border-box;
}
.clearfix{
	clear: both;
}

/* == 桌機版優先 ============================================================================= */
/*header*/
header{height: 0;width: 100%;background:url(../images/header.jpg)no-repeat;padding-bottom: 38.54%;background-size: cover;}

/*nav*/
nav{background:#111B40;padding-top: 3%;}
.nav{width: 1000px;margin: 0 auto;}
.magnifier{float: left;}
.nav ul{float:left;}
.nav ul li{line-height: 0.8;margin-top: 20px;margin-left: 10px;}
.nav ul li a{display: block;width: 100%; color: #fff;font-size: 34px;text-decoration: none;background: #ff7200;border-radius: 10px;padding:0.3em;padding-right:20%;}
.nav ul li a i{margin-left: 20px;width: 50px;}
.nav ul li a:active{background: #C25700;box-shadow:inset 3px 3px 3px 3px rgba(20%,20%,40%,0.5);}
/*main*/
main{width: 100%;box-sizing: border-box;}

.main01,.main02,.main03,.main04{width: 1000px;margin: 0 auto;}
.main01bkg{background: #5f9337;padding-top: 100px;padding-bottom: 100px;}
.main02bkg{background: #fff;padding-top: 100px;padding-bottom: 100px;}
.main03bkg{background: #609ddd;padding-top: 100px;padding-bottom: 100px;}
.main04bkg{background: #fff;padding-top: 100px;padding-bottom: 100px;}

/*main01*/
.main01{text-align: center;}
.main01 h2{text-align: center;color: #fff;font-size: 60px;}
.main01 h2 em{color: yellow;}
.main01 ul{display: flex;justify-content: space-between;margin-top: 50px;margin-bottom: 30px;}
.main01 li{float: left;text-align: center;box-sizing:border-box;padding: 20px;width: 24%;}
.circle{color: #ff7200;font-weight: bold;font-size:60px;border-radius: 99em;background: #fff;width:200px;height: 200px;box-sizing: border-box;padding: 10px;line-height: 1.1;}
.circle em{display: inherit; font-size: 28px;line-height: 1;font-weight: normal;}
.main01 li>p{color: #fff;font-size: 30px;margin-top: 30px;}

/*main02*/
.main02{text-align: center;}
.main02 h3{font-size: 60px;font-weight: bold;margin-bottom: 100px;}
.main02 h3 em{color: #ff7200;}
.main02content{position: relative;}
.main02content img{display: block;margin: 0 auto;margin-bottom: 80px;}
.relax::before,.money::before{
	content:'';
	position: absolute;
	top: 0;
	left: 0;
	height: 0;
	border-top: 40px solid #ff7200;
	border-right: 40px solid transparent;
}
.relax,.money{position: absolute;font-size: 20px;width: 350px;background: #fff;box-shadow:5px 5px 20px gray;padding:20px;text-align: left;line-height: 1.2;}
.main02 .relax{left: 0;top: 0;transition:all 1.2s;}
.main02 .money{right: 0;bottom: 0;transition:all 1.2s;}
.main02 span{font-size: 30px;text-decoration: underline;color: #ff3300;font-weight: bold;}
.main02 div em{font-size: 30px;font-weight: bold;}
.down{transform: translateY(-100px);}
.top{transform: translateY(100px);}

.get{text-decoration: none;background: #000;color: #fff;border-radius: 10px;padding: 0.2em 3em;font-size: 34px;}
.get:hover{color: #fff600;}

/*main03*/
.main03 h4{text-align: center;font-size: 60px;color: #fff;}

.main03 ul{display: flex;justify-content: space-between;margin-top: 80px;}
.main03 ul li{width: 30%;background: #fff;box-sizing:border-box;position: relative;}
.main03 ul li img{width: 100%;}
.main03 em{color: #d15c00;}
.identity{background: #1B2B65;color: #fff;font-size: 26px;box-sizing: border-box;padding: 20px;line-height: 1.2;font-weight: bold;}

.experience .name{font-size:24px;line-height:1.8;}
.name-1::after{content:'半年考取';color: #fff;background: #ff3300;border-radius:30px;padding: 0.1em 0.5em; }
.name-2::after{content:'一年考取';color: #fff;background: #ff3300;border-radius:30px;padding: 0.1em 0.5em; }
.name-3::after{content:'一年考取';color: #fff;background: #ff3300;border-radius:30px;padding: 0.1em 0.5em; }

.experience{padding:10px 20px;text-align: center;height:410px;}
.experience p{text-align:left;margin-bottom: 10px;font-size: 20px;line-height: 1.2;}

.know{font-size: 24px; color: #5f9337;border: 3px solid #5f9337;text-decoration: none;font-weight:bold;display: block; padding:0.5em;position: absolute;bottom: 20px;left:20px;right:20px;}
.know:hover{background: #5f9337;color: #fff;}
.know:active{border: 3px solid #416525;background:#416525;}

/*main04*/
.main04{box-sizing: border-box;}
.main04 h5{text-align: center;font-size: 60px;margin-bottom: 40px;}
.main04 h5::after{content: '零基礎也不怕';}
.main04 .pyramid{float: left;width: 30%;height: 400px;background-size:contain;position: relative;padding-right:200px;}
.pyramid img{position: absolute; right:0;}
.mod{
	left: -10px;
}
.t-1{
	bottom: 256px;

}
.t-2{
	bottom: 149px;
}
.t-3{
	bottom: 0;
}

.easy{float:left;width: 50%;padding-top: 8%;padding-bottom: 8%; display: flex;align-items: center;text-align: center;}
.easy p{font-size: 50px;font-weight: bold;text-align: left;}
.easy em{color: #ff3300;}
.easy .strength{font-size: 22px;color: #fff;background: #ff3300;padding: 0.2em 0.5em;border-radius: 50px;line-height: 2;margin-top: 20px;text-align: center;margin-bottom: 30px;}
.easy a{color:#ff3300;text-decoration: none;font-size: 30px;position: relative;padding: 0.2em 0.5em 0.2em 0.5em;}
.easy a::after{content:'';position: absolute;display: block;margin: 0 auto;width: 0;height: 2px;left:0%;right: 0;bottom: 0px;background-color: #ff3300;transition: all 1s;}
.easy a:hover::after{width: 100%;left: 0;opacity: 1;}
.easy a:active{color: #fff;background: #C72800;}

/*footer*/
footer{background: #ff7200;padding-top: 40px;padding-bottom: 40px;}
.footer{width: 1000px;margin: 0 auto;}
.footer img{float: left;width: 20%;}
.footer .now{display:block;font-size:24px;background: #fff;font-weight:bold;width: 100%;padding: 0.2em 0.5em;text-decoration: none;color: #609ddd;border-radius: 10px;margin-bottom: 20px;margin-top: 15px;position: relative;}
.footer .now i{position: absolute;right: 10px;}
.footer .now:active{box-shadow:inset 3px 3px 3px 3px rgba(20%,20%,40%,0.5);}
.footer .list{width: 70%;float: left;margin-left:5%;}
.list li{float: left;color:#fff;border-right:2px solid #fff;}
.list li a{margin:2px 10px;font-size:20px;color: #fff;text-decoration: none;}
.list li a:hover{border-bottom: 1px solid #fff;}
.list .finala{border-right:0;}

/*其他版型*/
@media(max-width: 1024px) and (min-width: 769px){
.nav{width: 90%;}
.nav ul{width: 60%;}
.nav ul li{margin-left:0;}

.main01, .main02, .main03, .main04{width: 900px;}

.main01 li{padding: 0;}
.circle{width: 180px;height: 180px;font-size:46px;}
.circle em{font-size: 24px;}
.experience{height: 520px;}

.main02 .relax{left: 10px;}
.main02 .money{right: 10px;}

.main03 .identity{height:120px; }

.main04bkg{padding-bottom: 60px;}
.main04 .pyramid{width:80%;padding-right: 0;float: none;margin: 0 auto;}
.mod{left:210px;}
.easy{margin: 0 auto;float:none;}

.footer{width: 90%;}
}

/* == 平版版型區 ============================================================================= */
@media(max-width:768px) and (min-width: 768px){
/*header*/
header{height: 0;width: 100%;background:url(../images/mobile-header.jpg)no-repeat;padding-bottom:144.44%;background-size: cover;}

/*nav*/
nav{padding-bottom: 5%;}
.nav{width: 90%;}
nav img{display: none;}
.nav ul{width: 100%;}
.nav ul li a{padding-right: 0;}

/*main*/
.main01, .main02, .main03, .main04{width: 90%;}
/*main01*/
.main01 h2{font-size: 56px;}
.main01 ul{display: block;}
.main01 ul::after{
  content: ""; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
.main01 ul li{width: 50%;}
.circle{margin: 0 auto;}
.main01 ul li>p{line-height: 1.2;}

/*main02*/
.main02 h3{font-size: 56px;margin-bottom:60px;}
.relax,.money{position: static;width:90%;margin:0 auto;}
.main02content img{margin-top: 60px;margin-bottom: 60px;}
.main02content{margin-bottom: 30px;}

/*main03*/
.main03 ul {display: block;}
.main03 ul li{width: 100%;margin-bottom: 20px;}
.main03 ul li::after{content: '';display: block;clear: both;  visibility: hidden;height: 0;}
.identityDiv{float: left;width:42%;}
.experience{float: right;background: #fff;width: 50%;height: auto;padding-top: 0.2em;}
.know{position: static;}

/*main04*/
.main04bkg{padding-bottom: 60px;}
.main04 .pyramid{width:80%;padding-right: 0;float: none;margin: 0 auto;}
.mod{left: 40px;}
.easy{width: 100%;}
.easy p{font-size: 46px;}
.easy .strength{width: 50%;margin: 0 auto;margin-top: 20px;margin-bottom: 20px;}

/*footer*/
.footer{width: 90%;}
.footer img{margin-top: 25px;}
.footer .list{margin-left: 3%;}
.list li{line-height: 1.2;}

}

/* == 手機版型區 ============================================================================= */
@media(max-width: 767px){

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

/*nav*/
nav{padding-bottom: 5%;}
.nav{width: 90%;}
nav img{display: none;}
.nav ul{width: 100%;}
.nav ul li{margin-left: 0;}
.nav ul li a{padding-right: 0;font-size: 20px;width: 98%;}
.nav ul li a i{width: auto;margin-left: 0;}

/*main*/
.main01bkg, .main02bkg, .main03bkg, .main04bkg{padding-bottom: 60px;padding-top: 60px;}
.main01, .main02, .main03, .main04{width: 95%;}

/*main01*/
.main01 h2{font-size: 52px;}
.main01 h2 em{font-size: 42px;display: block;}
.main01 ul{display: flex;flex-flow: wrap;}
.main01 ul::after{
  content: ""; 
  display: block; 
  height: 0; 
  clear: both; 
  visibility: hidden;
}
.main01 ul li{width:48%;padding:10px;}
.circle{margin: 0 auto;width: 130px;height: 130px;line-height: 1;}
.circle p{font-size: 28px;}
.circle p em{font-size: 16px;}
.circle img{height: 50%;}
.main01 ul li>p{line-height: 1.2;font-size: 16px;}

/*main02*/
.main02 h3{font-size: 50px;margin-bottom:70px;line-height: 1.1;}
.main02 h3 em{display: block;font-size: 42px;}
.relax, .money{position: static;width:80%;margin:0 auto;margin-bottom: 40px;}
.main02content img{
	max-width: 100%;
	margin-bottom:50px;
  	animation-duration: 3s;
}
@keyframes Rotate{
    from { transform: rotateY(0); }
    to{ transform: rotateY(360deg); }
}
.Rotate{
	animation: Rotate;
}
.get{padding: 5px 40px;}

/*main03*/
.main03 h4{font-size: 52px;}
.main03 ul{display: block;}
.main03 ul li{width:100%;margin-bottom: 10px;}
.experience .name{font-size: 26px;text-align: center;}

/*main04*/
.main04 h5{font-size:56px;font-weight: bold;}
.main04 h5::after{display: block;font-size: 48px;line-height: 1.2;}
.pyramid img{display: block;}
.main04 .pyramid{width:250px;height:250px;padding: 0;margin-left: 10%;margin-bottom:20px;}
.pyramid .t-3,.pyramid .t-2,.pyramid .t-1{width:100%;right:-20%;}
.t-2{bottom:76px;}
.t-1{bottom:131px;}
.mod{left: 0;width: 90%;}
.easy{width: 90%;margin: 0 auto;text-align: center;display: block;padding:0;float: none;}
.easy::before{content:'';display: block;height: 0;visibility: hidden;clear: both;}
.easy p{font-size: 28px;}
.easy i{width: 50px;}

/*footer*/
.footer{width: 98%;}
.footer img{float: none;width:60%;display: block;margin: 0 auto;}
.footer .list{float:none;width: 98%;margin: 0 auto;}
.footer .now{font-size:15px;padding:0.5em 1px;}
.list li{margin-bottom: 10px;}
.list .finala{border-right:2px solid #fff;}

}
@media(max-width: 350px){
.main04 .pyramid{margin-left:1%;}
}