*{ margin:0; padding:0; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}

html,body{ width:100%; height:100%; font-family:"微軟正黑體", Arial, Helvetica,sans-serif; text-size-adjust:none;
      font-size:15px;}
ul{ margin:0; padding:0; list-style:none;}
.co01{ color:#e33f43;}
.co02{ color:#289b3a;}

p{ margin:0; padding:0;}

/* == 桌機版優先 ============================================================================= */

html,body{ font-size:15px;}

/* ==刊頭== */
.head{ height:920px; background-image:url(../images/header_bg.gif); background-position:top center;}
.head .wrap{ margin:0px auto; width:100%; max-width:1000px; height:930px; overflow:hidden; position:relative;}
.head-t01{ position:absolute; width:314px; height:68px; top:180px; left:0; z-index:2; }
.head-t02{ position:absolute; width:630px; height:200px; top:250px; left:370px; z-index:1;}
.head-t01 img{ max-width:100%;}
.head-t02 img{ max-width:100%;}
.news{ margin:470px 0 0;}
.news dt{ padding:10px 0; background:#000; font-size:4vmin; font-weight:bold;  text-align:center; color:#52f5bd;}
.news dd{ padding:30px; border:8px solid #000; border-top:none; background:#FFF; }
.news dd h2{ font-size:3.4vmin; line-height:1.5; color:#e33f43;}
.news dd p{ margin:0; font-size:2.8vmin; line-height:1.4; text-align:justify; }
.news dd p:first-of-type{ margin-bottom:20px;}
.news dd a{ font-weight:bold; color:#399; }
.news dd a:hover { text-decoration:none; }
.news dd h3 { font-size:1.8vmin; font-weight: normal; line-height:1.5; text-align:right; color:#666;}


/* ==區塊01== */
.con01{ padding:80px 0; background:#235f79; overflow:hidden; }
.con01 .wrap{ margin:0 auto; width:100%; max-width:1000px; text-align:center;}
.con01 .wrap h2{ margin:0 auto; font-size:6.8vmin; font-weight: normal; color:#fed635; }
.con01 .box{
	display:block; margin:20px auto; width:100%; max-width:1000px; height:530px; overflow:hidden; position:relative;
    background-image:url(../images/con01_bg.gif); background-size:cover;
	}
.con01 .box .arrow{ position:absolute; width:560px; height:240px; top:170px; left:230px; z-index:2; }
.con01 .box .arrow img{ max-width:100%;}
.con01 .box_m{ display:none;}
.con01 .btn{ margin:0; padding:0; width:100%; text-align:center;}
.con01 .btn a{
	position:relative; display:block; margin:20px auto; padding:0; width:300px; height:60px; line-height:60px; border-radius:10px;
    background-color:#e33f43; font-size:2em; color:#FFF; text-decoration:none; text-align:center;
	}
.con01 .btn p:after{ 
    position: absolute;
	font-family:'FontAwesome';content:"\f0a6";color:#FFF; font-size: 1.2em; 
	animation:hactive .5s linear infinite alternate;
	}
@keyframes hactive{	from{ right:30px; bottom:-4px;}
                    to{ right:30px; bottom:8px;}	}


/* == 區塊02 == */
.con02{ padding:80px 0; overflow:hidden; overflow:hidden;}
.con02 .wrap{ margin:0 auto; width:100%; max-width:1000px; text-align:center; }
.con02 h2{ font-size:7vmin; font-weight: normal; color:#235f79;}
.con02 h4{ font-size:2.2vmin; line-height:1.4; font-weight: normal;}
.con02 .box{ margin:40px auto; overflow:hidden;}
.con02 .left { float:left; padding:40px 0 0;  width:210px;}
.con02 .right { float:right; width:770px;}
.con02 .right dl{ width:240px; margin:0 5px; display:inline-block;}
.con02 .right dd.A { padding:15px; border:6px solid #09ada5;}
.con02 .right dd.B { padding:15px; border:6px solid #6e62a9;}
.con02 .right dd h3{ font-size:2.1vmin; color:#e33f43;}
.con02 .right dd p{ margin:10px 0; height:50px; font-size:2vmin; }

.con02 .btn{ clear:both; margin:0; padding:0; width:100%; text-align:center;}
.con02 .btn a{ display:block; margin:0 auto; padding:0; width:100%; height:44px; line-height:44px; border-radius:10px;
               background-color:#e33f43; font-size:2em; color:#FFF; text-decoration:none; text-align:center;
			   position:relative;}
.con02 .btn p:after{ position: absolute;
	                 font-family:'FontAwesome';content:"\f0a6";color:#FFF; font-size: 1.2em; 
	                 animation:hactive .5s linear infinite alternate;
	                 }


/* == 區塊03 == */
.con03{ padding:80px 0; overflow:hidden; background:#b8e2f4; }
.con03 .wrap{ margin:0 auto; width:100%; max-width:1000px; text-align:center; }
.con03 .wrap h2{ font-size:7vmin; font-weight: normal; color:#235f79;}
.con03 .box01 ul{ margin:20px auto 0; padding:0; width:100%; overflow:hidden; }
.con03 .box01 li{ margin:0 auto; width:47%; }
.con03 .box01 li p{ padding:10px 0; border-radius:0 0 8px 8px; -webkit-border-radius:0 0 8px 8px; background:#fff; font-size:4.4vmin;}
.con03 .box02 { overflow:hidden;}
.con03 .box02 ul{ margin:20px auto 30px; padding:0; width:100%; }
.con03 .box02 li { display:inline-block; margin:0 1%;  width:47%; }
.con03 .box02 li p{ padding:10px 0; border-radius:0 0 8px 8px; -webkit-border-radius:0 0 8px 8px; background:#fff; font-size:4.4vmin;}
.con03 .btn a{
	position:relative; display:block; margin:20px auto; padding:0; width:300px; height:60px; line-height:60px; border-radius:10px;
    background-color:#e33f43; font-size:2em; color:#FFF; text-decoration:none; text-align:center;
	}
.con03 .btn p:after{ 
    position: absolute;
	font-family:'FontAwesome';content:"\f0a6";color:#FFF; font-size: 1.2em; 
	animation:hactive .5s linear infinite alternate;
	}


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


/* == 留單 == */
.con05{ padding:80px 0; background:#F7F7F7; overflow:hidden;}
.con05 .wrap{ margin:0 auto; width:100%; max-width:900px; text-align:center; }
.con05 .left { float:left; width:20%;}
.con05 .left img{ width:100%; transform:rotate(-15deg);}
.con05 .right { float:right; width:80%;}
.con05 .right h2{ font-size:4.4vmin; line-height:1.6;}
.con05 .right h3{ font-size:4vmin; font-style:italic; font-weight:normal; text-decoration:underline;}
.con05 a{ margin:auto; display:block; width:80%; height:65px;
          line-height:60px; font-size:2.2em; color:#FFF; text-align:center; text-decoration:none;
		  border-radius:10px; -webkit-border-radius:10px;
		  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 */ }
.con05 a:hover{ font-weight:bold;}


/* == 班址 == */
.footer{ background-color:#235f79; overflow:hidden; }
.footer .wrap{ margin:0 auto; padding:50px 0; width:100%; max-width:1000px; overflow:hidden; text-align:center;}
.footer .left{ float:left; width:18%;  }
.footer .left img { width:100%;}
.footer .right{ float:right; width:82%; }
.footer .right li {
	display:inline-block; padding:0; margin:0 1%; width:14%; line-height:1.5;
    font-size:1.3em; 
	}
.footer .right li a{ text-decoration:none; color:#FFF; }




/* == 手機版型區 ============================================================================= */
@media screen and ( max-width:767px ){
	
html,body{ font-size:12px;}	

/* ==刊頭== */
.head{ width:100%; padding:0 10px; height:0; background: url(../images/header_bg_m.gif); background-size:cover; padding-bottom:177.78%; background-position:bottom center;}
.head .wrap{ margin:0px auto; width:100%; max-width:1000px; height:930px; overflow:hidden; position:relative;}
.head-t01{ display:none; position:absolute; width:29%; height:auto; top:5%; left:0; z-index:2; }
.head-t02{ display:none; position:absolute; width:32%; height:auto; top:5%; left:0; z-index:1;}
.head-t01 img{ max-width:100%;}
.head-t02 img{ max-width:100%;}
.news{ margin:82% 0 0;}
.news dt{ padding:10px ; background:#000; font-size:4.8vmin; line-height:1.2; font-weight:bold;  text-align:center; color:#52f5bd;}
.news dd{ padding:14px; border:8px solid #000; border-top:none; background:#FFF; }
.news dd h2{ font-size:7vmin; line-height:1.2; color:#e33f43;}
.news dd p{ margin:5px 0; font-size:5vmin; line-height:1.4; text-align:justify;}
.news dd p:first-of-type{ margin-bottom:20px;}
.news dd a{ font-weight:bold; color:#399; }
.news dd a:hover { text-decoration:none; }
.news dd h3 { font-size:1.8vmin; font-weight: normal; line-height:1.5; text-align:right; color:#666;}


/* ==區塊01== */
.con01{ width:100%; height:auto; padding:40px 10px; overflow:hidden; }
.con01 .wrap{ margin:0 auto; padding:0; width:100%; text-align:center;}
.con01 .wrap h2{ margin:0 auto; font-size:9.5vmin; line-height:1.1; font-weight: normal; color:#fed635;}
.con01 .wrap h3 { font-size:7vmin; line-height:1.5; color:#e33f43;}
.con01 .wrap h4 { font-size:6vmin; }
.con01 .box{ display:none;}
.con01 .box_m{ display:block;}
.con01 .box_m table { margin:20px 0; font-size:4.5vmin; line-height:1.1;}
.con01 .box_m td{ padding:5px;}
.con01 .btn{ margin:0; padding:0; width:100%; text-align:center; }
.con01 .btn a{
	position:relative; display:block; margin:10px auto 0; padding:0; width:100%; height:60px; line-height:60px; border-radius:10px;
    background-color:#e33f43; font-size:2em; color:#FFF; text-decoration:none; text-align:center;
	}
.con01 .btn p:after{ 
    position: absolute;
	font-family:'FontAwesome';content:"\f0a6";color:#FFF; font-size: 1.2em; 
	animation:hactive .5s linear infinite alternate;
	}
@keyframes hactive{	from{ right:18%; bottom:-5px;}
                    to{ right:18%; bottom:8px;}	}


/* == 區塊02 == */
.con02{ padding:40px 10px; overflow:hidden; overflow:hidden;}
.con02 .wrap{ margin:0 auto; width:100%; max-width:1000px; text-align:center; }
.con02 h2{ font-size:10vmin; line-height:1.1; font-weight: normal; color:#235f79;}
.con02 h4{ margin:20px 0; font-size:5vmin; line-height:1.4; font-weight: normal;}
.con02 .box{ margin:0 auto; overflow:hidden;}
.con02 .left { margin:0 auto; float:none; padding: 0;  width:80%;}
.con02 .right { float:none; width:100%;}
.con02 .right dl{ width:100%; margin:10px 0; display:inline-block;}
.con02 .right dd.A { padding:15px; border:6px solid #09ada5;}
.con02 .right dd.B { padding:15px; border:6px solid #6e62a9;}
.con02 .right dd h3{ font-size:7.8vmin; color:#e33f43;}
.con02 .right dd p{ margin:10px 0; height:70px; font-size:7vmin; }

.con02 .btn{ clear:both; margin:0; padding:0; width:100%; text-align:center;}
.con02 .btn a{ display:block; margin:0 auto; padding:0; width:100%; height:50px; line-height:50px; border-radius:10px;
               background-color:#e33f43; font-size:2em; color:#FFF; text-decoration:none; text-align:center;
			   position:relative;}
.con02 .btn p:after{ position: absolute;
	                 font-family:'FontAwesome';content:"\f0a6";color:#FFF; font-size: 1.2em; 
	                 animation:hactive .5s linear infinite alternate;
	                 }


/* == 區塊03 == */
.con03{ padding:40px 10px; overflow:hidden; background:#b8e2f4; }
.con03 .wrap{ margin:0 auto; width:100%; max-width:1000px; text-align:center; }
.con03 .wrap h2{ font-size:9vmin; font-weight: normal; color:#235f79;}
.con03 .box01 ul{ margin:20px auto 0; padding:0; width:100%; overflow:hidden; }
.con03 .box01 li{ margin:0 auto; width:100%; }
.con03 .box01 li p{ padding:10px 0; border-radius:0 0 8px 8px; -webkit-border-radius:0 0 8px 8px; background:#fff; font-size:8vmin;}
.con03 .box02 { overflow:hidden;}
.con03 .box02 ul{ margin:20px auto 0; padding:0; width:100%; }
.con03 .box02 li { display:inline-block; margin:0 auto 20px;  width:100%; }
.con03 .box02 li p{ padding:10px 0; border-radius:0 0 8px 8px; -webkit-border-radius:0 0 8px 8px; background:#fff; font-size:8vmin;}
.con03 .btn a{
	position:relative; display:block; margin:10px auto; padding:0; width:100%; height:60px; line-height:60px; border-radius:10px;
    background-color:#e33f43; font-size:2em; color:#FFF; text-decoration:none; text-align:center;
	}
.con03 .btn p:after{ 
    position: absolute;
	font-family:'FontAwesome';content:"\f0a6";color:#FFF; font-size: 1.2em; 
	animation:hactive .5s linear infinite alternate;
	}
			   
/* == 區塊04 == */
.con04{ margin:0 auto; padding:40px 0 ; width:100%; max-width:1000px; height:auto; text-align:center; }
.con04 h2{  font-size:10vmin; line-height:1.2; font-weight: normal; color:#235f79; }
.con04 .bimg01{ display:none; margin:30px auto 0; padding:0; width:90%;}
.con04 .bimg02{ display:block; margin:20px 0 0 0; padding:0; width:100%;}


/* == 留單 == */
.con05{ padding:40px 10px; background:#F7F7F7; overflow:hidden;}
.con05 .wrap{ margin:0 auto; width:100%; max-width:900px; text-align:center; }
.con05 .left { float:none; width:40%; margin:0 auto 20px;}
.con05 .left img{ width:100%; transform:rotate(-15deg);}
.con05 .right { float:none; width:100%;}
.con05 .right h2{ font-size:8vmin; line-height:1.2;}
.con05 .right h3{ font-size:7.5vmin; font-style:italic; font-weight:normal; text-decoration:underline;}
.con05 a{ margin:10px auto 0; display:block; width:80%; height:65px;
          line-height:60px; font-size:2.2em; color:#FFF; text-align:center; text-decoration:none;
		  border-radius:10px; -webkit-border-radius:10px;
		  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 */ }
.con05 a:hover{ font-weight:bold;}


/* == 班址 == */
.footer{ background-color:#235f79; overflow:hidden; }
.footer .wrap{ margin:0 auto; padding:40px 0; width:100%; max-width:1000px; overflow:hidden; text-align:center;}
.footer .left{ float:none; margin:0 auto 10px; width:40%;  }
.footer .right{ float:none; width:100%; }
.footer .right li {
	display:inline-block; padding:0; margin:0 1%; width:30%; line-height:1.5;
    font-size:1.3em; 
	}
.footer .right li a{ text-decoration:none; color:#FFF; }

}




/* == 平版版型區 ============================================================================= */
@media screen and ( min-width:768px ) and ( max-width:1024px ){

html,body{ font-size:15px;}
	

/* ==刊頭== */
.head{ height:0; background-size: cover; padding-bottom:100%; background-position: center;}
.head .wrap{ padding:0 2%; height: auto; }
.head-t01{ width:32%; height:auto; top:20%; left:1%; }
.head-t02{ width:50%; height:auto; top:25%; left:50%;}

.news{ margin:380px 0 0;}


/* ==區塊01== */
.con01{ padding:50px 20px;}
.con01 .wrap{ margin:0 auto; width:100%; max-width:1000px; text-align:center;}
.con01 .wrap h2{ font-size:6vmin;}
.con01 .box{
	margin:20px auto; width:100%; max-width:1000px; height:0; 
    background-image:url(../images/con01_bg.gif); background-size:cover; padding-bottom:53%;
	}
.con01 .box .arrow{ position:absolute; width:350px; height: auto; top:140px; left:230px; z-index:2; }
.con01 .box .arrow img{ max-width:100%;}
.con01 .wrap img{ margin:20px 0 0 0; padding:0; width:100%; max-width:1000px;}
.con01 .wrap h3{ font-size:2.4em; color:#000; text-align:center;}


@keyframes hactive{	from{ right:30px; bottom:-4px;}
                    to{ right:30px; bottom:8px;}	}



/* == 區塊02 == */
.con02{ padding:50px 0;}
.con02 h2{ font-size:6.4vmin; }
.con02 h4{ font-size:2.1vmin; }
.con02 .box{ margin:0 auto; }
.con02 .left { float:none; width:210px; margin:0 auto 20px;}
.con02 .right { float:none; width:100%;}
.con02 .right dl{ width:30%; margin:0 5px; display:inline-block;}
.con02 .right dd h3{ font-size:2.4vmin; color:#e33f43;}
.con02 .right dd p{ height:50px; font-size:2.2vmin; }



/* == 經驗談區塊03 == */
.con03{ padding:50px 20px; }


/* == 區塊04 == */
.con04{ padding:50px 20px ;}


/* == 留單 == */
.con05{ padding:50px 20px;}

			   
/* == 班址 == */
.footer .wrap{ padding:50px 20px;}
.footer .left{ width:30%; }
.footer .right{ width:70%; }
.footer .right li {	width:20%;}

}