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;
}
.clearfix{clear:both;}

.btn:hover{
	border: 0;
}

/*置頂按鈕*/
.gotop { position: fixed; right:5px;  bottom:200px; width: 55px;  height: 55px; background-color: #fed300; display: flex; justify-content: center; align-items: center;
	opacity: 1;  transition: all 0.4s ease-in-out 0s;  z-index: 999;  border-radius: 50%; }
  .gotop a{  font-size:20px; color: #000; text-decoration:none;}
  .gotop:active{ box-shadow:1px 1px 3px 2px rgba(0,0,0,0.5) inset;transition: all 0s;}

/*========== desktop ==========*/
/* header */
header{background: url(../images/header-alt.jpg)no-repeat;width: 100%;height: 0;padding-bottom:36.45%;background-size: cover;position: relative;overflow: hidden;position: relative;z-index:25;}
.header-1{position: absolute;width: 100%;height: 100%;background: url(../images/header-1.png)no-repeat;background-size:cover;transform-origin:0 0;transition: all .8s;transform: scale(0);}
.header-1-animation{transform: scale(1);}
.header-2{position: absolute;width: 100%;height: 100%;background: url(../images/header-2.png)no-repeat;background-size:cover;transform-origin:0 0;transform:scale(0);animation-timing-function:linear;}
.header-2-animation{animation:header2animation 1.2s;animation-fill-mode: forwards;}
@keyframes header2animation{
	0%{transform:scale(0);transform-origin:0 0;}
	66%{transform:scale(0.1);transform-origin:0 0;}
	66%{transform:scale(0.1);transform-origin:18% 40%;animation-timing-function:ease-in-out;}
	100%{transform: scale(1);}
}
.header-3{position: absolute;width: 100%;height: 100%;background: url(../images/header-3.png)no-repeat;background-size:cover;transform-origin:0 0;transition: all .8s;opacity: 0;transition-delay:1.4s;}
.header-3-animation{opacity: 1;}
/* header */

/* nav */
.nav2{background: #000;position: relative;z-index: 25;}
.nav2 ul{display: flex;justify-content:space-between;width: 1200px;margin: 0 auto; padding: 0;}
.nav2 ul li{border-right: 1px solid #fff;text-align: center;width: 100%;}
.nav2 ul li:last-Child{border: 0;}
.nav2 ul a{color:#fff;font-size: 26px;text-decoration: none;display: block;width: 100%;height: 100%;padding:15px 20px;box-sizing: border-box;font-weight: bold;}
.nav2 ul a:hover{ color: #ff7200;}
.nav2 ul a i{margin-left:5px;}
/* nav */

/* main */
main{
	position: relative;;
}
.bkg{
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width:100px;
	z-index:20;
}
.fireman{
	position: relative;
	width: 100%;
	height: 100%;
}
.fireman::before{
	content:'';
	display: block;
	position: absolute;
	background: url(../images/column.png);
	background-repeat: repeat-y;
	height:100%;
	width:90px;
}
.man{
	display: block;
	position: absolute;
	top: -400px;
	left:0;
	background:url(../images/bkgfireman.png)no-repeat;
	height: 235px;
	width: 90px;
	z-index:10;
	transition:all .8s;
	z-index:10;
}
.man .chat{
	display: block;
	position: absolute;
	top: 10px;
	left:-100px;
	z-index:10;
	transition:all .8s;
	background: #fff;
	border: 1px solid #000;
	border-radius: 10px;
	color: #000;
	box-sizing: border-box;
	padding:5px 10px;
	opacity: 0;
	transition:all .5s;
}
.man .chatOp{
	opacity: 1;
}

/* 109消防警察缺額多少？ */
.shortagebkg{background: #ff7200;padding: 80px 0; width: 100%;}
.shortage{width: 1000px;margin: 0 auto;text-align: center;}
.shortage h2{display: flex;justify-content:space-between;}
.shortage h2 img{width:15%;}
.shortage h2 div{width:83%;display: flex;flex-flow: column;justify-content:center;}
.shortage h2 p{text-align:left;color: #fff;padding:10px 30px;box-sizing: border-box;font-weight: bold;font-size: 32px;border-radius: 10px;}
.shortage h2 div p:first-child{background: #3d476c;margin-bottom: 10px;}
.shortage h2 div p:nth-child(2){background: #64ab07;}
.shortage .Winning{font-size:36px;font-weight: bold;margin:40px 0 20px 0;text-align: left;}
.shortage .Winning span{background:#e60012;color: #fff;box-sizing: border-box;padding:3px 15px;margin-right:10px;}
.shortage>div{background: #fff;border-radius: 10px;box-sizing: border-box;padding:20px 35px;text-align: justify;font-size: 24px;line-height: 1.6;margin-bottom: 50px;}
.shortage>p{font-size: 24px;color: #fff;margin-bottom:20px;}
.shortage>a{font-size: 28px;font-weight: bold;color: #fff;background: #000;text-decoration: none;border-radius: 50px;padding:7px 35px;}
.shortage>a i{margin-right:5px;}
.shortage>a:hover{color:yellow;}
/* 109消防警察缺額多少？ */

/* == Q3：我適合考警察嗎？ == */
.qa-03{	padding: 90px calc((100% - 1000px)/2); height: auto; background-color: #f0f1f5; overflow: hidden; box-sizing: border-box;}
.qa-03 h2{ font-size: 3em; font-weight: 700; text-align: center; color: #3d476c;}
.qa-03 h3{ padding: 20px 0; font-size: 1.5em; line-height: 1.5; text-align: center; }
.qa-03 ul{ margin: 50px 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: space-between;}
.qa-03 ul li{ width: 23%; text-align: center;}
.qa-03 ul li h4{ font-size: 1.6em; line-height: 1.5; font-weight: 700; color:#ff7200;}
.qa-03 ul li img{ max-width: 100%;}
.qa-03 ul li p{ font-size: 1.1em; line-height: 1.5;}
.qa-03 h5{ padding-bottom: 20px; font-size: 1.6em; color: #e60012; text-align: center; font-weight: 700;}
.qa-03-btn{ display: flex; justify-content: center; text-align: center;}
.qa-03-btn a{ text-decoration: none; display: block; width: 32%; margin: 0 10px; padding:15px 0; font-size:1.7em; background-color: #000000; font-weight: bold; border-radius: 50px;}
.qa-03-btn a.A{ color: #78ff00;}
.qa-03-btn a.B{ color: yellow;}
.qa-03-btn a:hover{ color:#fff;}

/* 想當消防警察怎麼準備？ */
.preparebkg{background:#ff7200;padding: 80px 0 120px 0;box-sizing: border-box;position: relative;}
.prepare{width: 1000px;margin: 0 auto;text-align: center;}
.prepare h2{display: flex;justify-content:space-between;}
.prepare h2 img{width:15%;}
.prepare h2 div{width:83%;display: flex;flex-flow: column;justify-content:center;}
.prepare h2 p{text-align:left;color: #fff;padding:10px 30px;box-sizing: border-box;font-weight: bold;font-size: 32px;border-radius: 10px;}
.prepare h2 div p:first-child{background: #3d476c;margin-bottom: 10px;}
.prepare h2 div p:nth-child(2){background: #64ab07;}
.prepare .Winning{font-size:36px;font-weight: bold; color: #fff; margin:40px 0 20px 0;text-align: left;}
.prepare .Winning span{background:#e60012;color: #fff;box-sizing: border-box;padding:3px 15px;margin-right:10px;}
.prepare>div{ position: relative; margin: 30px 0 50px;box-sizing: border-box;padding:20px 30px;background: #fff;border-radius: 10px;line-height: 1.6;}
.prepare>div p{text-align: left;font-size: 24px;font-weight: bold;}
.prepare .head{font-size: 28px;font-weight: bold;color: #10a3f7;line-height: 2;}
.prepare .dot{font-size: 25px;display: flex;align-items: center;font-weight: bold;}
.prepare .dot i{font-size:14px;}
.prepare .twice{font-size: 25px;display: flex;align-items: center;color:#e61505;}
.prepare .twice i{font-size:14px;}
.prepare>div ul{text-align: left;display: flex;justify-content:flex-start; padding: 0;}
.prepare>div ul li{margin-right:30px;}
.prepare>div img{position: absolute;right:30px;top:20%;height:60%;}
.prepare>p{font-size: 24px;margin:50px 0 20px 0;}
.prepare>a{font-size: 28px;font-weight: bold;color: #fff;background: #000;text-decoration: none;border-radius: 50px;padding:7px 35px;}
.prepare>a i{margin-right:5px;}
.prepare>a:hover{color:yellow;}
/* 想當消防警察怎麼準備？ */

/* 消防警察好考嗎？ */
.easybkg{background: #43c6eb;padding: 80px 0 120px 0;box-sizing: border-box;position: relative;}
.easy{width: 1000px;margin: 0 auto;text-align: center;}
.easy h2{display: flex;justify-content:space-between;}
.easy h2 img{width:15%;}
.easy h2 div{width:83%;display: flex;flex-flow: column;justify-content:center;}
.easy h2 p{text-align:left;color: #fff;padding:10px 30px;box-sizing: border-box;font-weight: bold;font-size: 32px;border-radius: 10px;}
.easy h2 div p:first-child{background: #3d476c;margin-bottom: 10px;}
.easy h2 div p:nth-child(2){background: #64ab07;}
.easy ul{display: flex;justify-content: space-between;box-sizing: border-box;padding:0 1%;margin:100px 0 20px 0;}
.easy ul li{width: 48%;background: #fff;border-radius: 10px;position: relative;padding:100px 20px 20px 20px;box-sizing:border-box;}
.easy ul li .tit{color:#ff0000;font-weight: bold;font-size: 28px;line-height: 1.6;}
.easy ul img{position: absolute;top:-50px;left:30%;width:40%;}
.easy ul .name{line-height:1.6;font-weight: bold;font-size: 28px;margin:10px 0;}
.easy ul li p{text-align: left;font-size: 18px;line-height: 1.6;}
.easy ul li span{color: #de3946;}
.easy>p{font-size: 24px;margin-bottom:30px;margin-top:20px;}
.easy>a{font-size: 28px;font-weight: bold;color: #fff;background: #000;text-decoration: none;border-radius: 50px;padding:7px 35px;}
.easy>a i{margin-right:5px;}
.easy>a:hover{color:yellow;}
/* 消防警察好考嗎？ */

/* 我沒有基礎 也能考消防警察？ */
.inexperiencedbkg{ background: #fff;padding: 80px 0;box-sizing: border-box;}
.inexperienced{ width: 1000px; margin: 0 auto;text-align: center;}
.inexperienced h2{display: flex;justify-content:space-between;}
.inexperienced h2 img{width:15%;}
.inexperienced h2 div{width:83%;display: flex;flex-flow: column;justify-content:center;}
.inexperienced h2 p{text-align:left;color: #fff;padding:10px 30px;box-sizing: border-box;font-weight: bold;font-size: 32px;border-radius: 10px;}
.inexperienced h2 div p:first-child{background: #3d476c;margin-bottom: 10px;}
.inexperienced h2 div p:nth-child(2){background: #64ab07;}
.inexperienced h3{font-size: 24px;margin:50px 0 20px 0;}
.inexperienced .btn{ display: flex; justify-content: center;}
.inexperienced .btn a{ text-decoration: none; display: block; width: 32%; margin: 0 10px; padding:15px 0; font-size:1.7em; background-color: #000000; font-weight: bold; border-radius: 50px;}
.inexperienced .btn a.A{ color: #78ff00;}
.inexperienced .btn a.B{ color: yellow;}
.inexperienced .btn a:hover{color:#fff;}
/* 我沒有基礎 也能考消防警察？ */

/* 我適合上消防警察什麼課程？ */
.coursebkg{background: #ff7200;padding: 80px 0 120px 0;box-sizing: border-box;position: relative;z-index:23;}
.course{width: 1000px;margin: 0 auto;text-align: center;}
.course h2{display: flex;justify-content:space-between;}
.course h2 img{width:15%;}
.course h2 div{width:83%;display: flex;flex-flow: column;justify-content:center;}
.course h2 p{text-align:left;color: #fff;padding:10px 30px;box-sizing: border-box;font-weight: bold;font-size:30px;border-radius: 10px;}
.course h2 div p:first-child{background: #3d476c;margin-bottom: 10px;}
.course h2 div p:nth-child(2){background: #64ab07;}
.course ul{display: flex;justify-content: space-between;align-items: stretch;margin:35px 0 50px 0; padding: 0;}
.course ul li{width: 30%;display: flex;flex-flow: column;}
.course ul li img{width:80%;margin: 0 auto;}
.course ul li>div{background: #fff;box-sizing: border-box;padding:20px;text-align: center;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;height:100%;}
.course ul .head{ margin-bottom: 10px; font-size: 20px;color: #fff;background: red;padding:3px 20px;box-sizing: border-box;font-weight: bold;border-radius: 50px;display: inline-block;}
.course ul .className{text-align: center;font-size: 28px;font-weight: bold;line-height:1.6;}
.course ul .red{color:red;}
.course ul p{text-align: left;font-size: 18px;line-height: 1.6;}
.course>p{font-size: 24px;color: #fff;margin-bottom:20px;}
.course>a{font-size: 28px;font-weight: bold;color: #fff;background: #000;text-decoration: none;border-radius: 50px;padding:7px 35px;}
.course>a i{margin-right:5px;}
.course>a:hover{color:yellow;}
/* 我適合上消防警察什麼課程？ */

/* step-time */
.step-time{width: 100%;position: relative;display: flex;justify-content: space-around;margin:100px 0 50px 0;padding:0 1% 0 0;box-sizing: border-box;}
.step-time::before{content: '';display: block; position: absolute;top: 0;left: 0;right: 0;width: 100%;height: 50%;background:#c3d2e0;border-top-left-radius: 50px;border-top-right-radius: 50px;overflow: hidden;z-index:0;}
.step-time::after{content: '';display: block; position: absolute;bottom: 0;left: 0;right: 0;width: 100%;height: 50%;background:#93aacc;border-bottom-left-radius: 50px;border-bottom-right-radius: 50px;overflow: hidden;z-index:0;}
.step-time li{position: relative;z-index: 10;width: 100%;}
.step-time li .dot{ width: 20px;height: 20px;border-radius: 99em;background: #3d476c;border: 1px solid #fff;margin: 0 auto;position: relative;z-index: 10;}
.step-time li>p{position: absolute;top:-300%;display: block;width: 100%; text-align: center;color: #6c7c94;font-size: 20px;}
.step-time li span{font-weight: bold;color: #3d476c;line-height: 1.6;}
.step-time li:nth-child(4) span{color:#ba2b20;font-weight: bold;}
.step-time li:nth-child(4)::after{content:'限額報名';background:#ba2b20;color: #fff;font-weight: bold;display: block;position: absolute;bottom:-150%;left:30%;box-sizing: border-box;padding:5px;border-radius:5px;}

/* step-Content */
.step-Content{display: flex;justify-content: space-around;box-sizing: border-box;margin-bottom:60px;padding:0 1% 0 0;}
.step-Content li{width: 18%;font-size:20px;line-height: 1.5;text-align: center;}
.step-Content li:first-child>p:nth-child(2){text-align: center;}
.step-Content li>p:nth-child(2){font-size:20px;line-height:1.3;text-align: left;}
.step-mibile{display: none;}
/* 我適合上消防警察什麼課程？ */

/* 做的更多,只為助你上榜 */
.onList{overflow: hidden;padding: 80px calc((100% - 900px)/2);text-align: center;}
.onList h2{font-size:50px;display:inline;padding: 20px 0;}
.onList .Content{margin:30px 0;display: flex;justify-content: space-between;}
.onList .Content ul{width:100%; padding: 0;}
.onList .Content ul li{display: flex;justify-content: space-between;margin-bottom:2px;border-radius: 10px;overflow: hidden;font-size: 24px;}
.onList .Content ul li:nth-child(odd) .left{background: #3d476c;}
.onList .Content ul li:nth-child(even) .left{background: #ff7200;}
.onList .Content ul .left{width: 30%;color: #fff;font-weight: bold;box-sizing: border-box;padding:15px 20px;}
.onList .Content ul .right{width: 70%;background: #f0f1f5;box-sizing: border-box;padding:15px 20px;text-align: left;}
.onList>p{font-size:24px;font-weight: bold;margin-bottom:20px;}
.onList>a{font-size:28px;background: #000;color: #fff;border-radius: 50px;text-decoration: none;padding:5px 25px;font-weight: bold;}
.onList>a:hover{color:yellow;}
/* 做的更多,只為助你上榜 */

/* main */

/* footer */
.footer{ padding: 50px calc((100% - 1200px)/2); width:100%; background:#272d42; box-sizing: border-box;}
.footer ul{display: flex; flex-wrap: wrap; padding: 0;}
.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%;}

/* freepik */
.freepik{background: #fff;text-align: center;padding: 15px 0;position: relative;z-index:23;}
.freepik a{color:#959595;font-size: 14px;}
/* freepik */

/* other */
@media(max-width:1250px){
/* nav */
.nav2 ul{width: 98%;}
.nav2 ul a{font-size: 22px;padding: 10px 15px;}

/* main */
main{overflow: hidden;}
.bkg{transform: translateX(20px);}

/* 109消防警察缺額多少？ */
.shortage{width:80%;margin: 0 auto;}
.shortage .Winning{font-size: 30px;}
.shortage>div p:first-child{font-size:28px;}
.shortage>div{font-size: 21px;}

/* 想當消防警察怎麼準備？ */
.prepare{width:90%;}
.prepare>div img{right:20px;}

/* 消防警察好考嗎？ */
.easy{width:85%;}
.easy ul{justify-content: flex-start;}
.easy ul .name{font-size:24px;}
.easy li:first-child{margin-right: 10px;}
/* 我沒有基礎 也能考消防警察？ */
.inexperienced{width:90%;}
.step-time li>p{font-size: 18px;}
.step-Content{margin-bottom: 40px;}
.step-Content .step-chat{margin-top:60px;}

/* 我適合上消防警察什麼課程？ */
.course{width: 98%;margin: 0 auto;}
.course h2 div p:nth-child(2){padding: 10px 20px;font-size:28px;}

/* 做的更多,只為助你上榜 */
.onList{width: 90%;margin:0 auto;padding: 80px 1%;}
.onList .Content ul li{font-size: 22px;}
.onList .Content ul .right{padding: 15px 0 15px 20px;}
}

@media (max-width: 1200px) {
  .footer{ padding: 50px 5%;}
  .footer li{ text-align: center;}
}

@media(max-width:1050px){
/* Q：消防警察好考嗎？*/
.easy ul{justify-content: flex-start;}
/* Q：消防警察好考嗎？*/
/* 6階段建構式課程 */
.step-time li>p{font-size:16px;}
.step-Content{margin-bottom: 40px;}
.step-Content .step-chat{margin-top:60px;}

}
/*========== ipad ==========*/
@media(max-width:768px){
/* header */
/* header */

/* nav */
/* nav */

/* main */
main{overflow:auto;}
.bkg{transform:0;display: none;}

/* 109消防警察缺額多少？ */
.shortagebkg{padding:50px 0;}
.shortage{width:90%;margin: 0 auto;}
.shortage h2 p{font-size:28px;padding:10px 20px;}
.shortage .Winning{font-size:3.5vw;}
.shortage>div{font-size:2.5vw;line-height: 1.6;padding: 20px;}
.shortage>div p:first-child{font-size: 3vw;}
.shortage>a{font-size:3vw;}
/* 109消防警察缺額多少？ */

/* == Q3：我適合考警察嗎？ == */
.qa-03{	padding: 90px 2%;}
.qa-03 h2{ font-size: 3em;}
.qa-03 h3{ padding: 20px 0; font-size: 1.4em; }
.qa-03 ul{ margin: 30px 0;}
.qa-03 ul li{ width: 23%;}
.qa-03 ul li h4{ font-size: 1.3em;}
.qa-03 ul li p{ font-size: 1em;}
.qa-03 h5{ padding-bottom: 20px; font-size: 1.5em;}
.qa-03-btn{ display: flex; justify-content: center;}
.qa-03-btn a{ width: 40%; margin: 0 10px; padding:15px 0; font-size:1.5em;}

/* 想當消防警察怎麼準備？ */
.preparebkg{padding: 80px 0;}
.prepare h2 p{font-size:28px;padding: 10px 20px;}
.prepare .head{font-size:24px;}
.prepare .Winning{font-size:3.5vw;}
.prepare>div{margin-top: 0;}
.prepare>div p{font-size: 20px;}
.prepare>div img{height:50%;top: 25%;}
.prepare .dot{font-size:22px;}
.prepare .twice{font-size: 22px;}
.prepare>p{margin:30px 0 20px 0;font-size: 20px;}
.prepare>a{font-size: 3vw;}
/* 想當消防警察怎麼準備？ */

/* 消防警察好考嗎？ */
.easybkg{padding:80px 0;}
.easy h2 p{font-size: 28px;padding: 10px 20px;}
.easy ul{flex-wrap: wrap;justify-content: center;margin:80px 0 20px 0;}
.easy ul li{width: 90%;margin-bottom:80px;padding:90px 20px 20px 20px;}
.easy li:first-child {margin-right:0;}
.easy ul li:last-child{margin-bottom: 0;}
.easy ul img{width:26%;left: 37%;}
.easy ul li .tit{font-size: 26px;}
.easy ul .name{margin: 0;font-size: 24px;}
.easy ul li p{font-size: 20px;}
.easy>p{margin:30px 0 20px 0;font-size: 20px;}
/* .easy>a{font-size:3vw;} */
/* 消防警察好考嗎？ */

/* 我沒有基礎 也能考消防警察？ */
.inexperienced{width: 95%;}
.inexperienced h2 p{font-size: 28px;padding: 10px 20px;}
.step-time{padding: 0;margin:80px 0 40px 0;}
.step-time li>p{font-size:2vw;top: -250%;}

.step-Content{padding: 0;}
.step-Content li>p:nth-child(2){font-size:16px;line-height:1.3;}
.step-Content li{font-size:17px;}
.step-Content .step-chat{margin-top:40px;}
.inexperienced .btn{ display: flex; justify-content: center;}
.inexperienced .btn a{ width: 40%; margin: 0 10px; padding:15px 0; font-size:1.5em;}
/* 我沒有基礎 也能考消防警察？ */

/* 我適合上消防警察什麼課程？ */
.coursebkg{padding:80px 0;}
.course h2 p{font-size:3vw;}
.course h2 div p:nth-child(2){font-size:3vw;}
.course ul{margin:20px 0 40px 0;}
.course ul li{width: 32%;}
.course ul .head{display: block;text-align: center;padding: 5px 15px;font-size:2.5vw;}
.course ul .className{font-size:20px;line-height:1.3;}
.course ul p{font-size:16px;line-height:1.3;margin-bottom: 10px;}
.course ul li>div{padding:20px;}
.course>p{font-size: 20px;}
.course>a{font-size: 3vw;}
/* 我適合上消防警察什麼課程？ */

/* 做的更多,只為助你上榜 */
/* onList */
.onList{width: 96%;padding: 40px 2%;}
.onList h2{font-size: 46px;}
.onList .Content{margin-top:30px;}
.onList .Content .left{font-size: 26px;}
.onList .Content .right{font-size: 20px;}
.onList>a{font-size: 28px;}
.onList .Content ul li .left{width:32%;}
.onList .Content ul .right{width:68%;padding: 15px 0 15px 5px;}
.onList>p{font-size: 20px;}
.onList>a{font-size: 3vw;}
/* 做的更多,只為助你上榜 *

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

}

/*========== phone ==========*/
@media(max-width:767px){
/* header */
header{background: url(../images/header-mobile.jpg)no-repeat;width: 100%;height: 0;padding-bottom:140%;background-size: cover;position: relative;overflow: hidden;position: relative;}
header div{display: none;}
/* header */

/* nav */
.nav2 ul a{padding: 10px 15px 5px 15px;}
.nav2 ul a i{margin:0 5%;}
/* nav */

/* 109消防警察缺額多少？ */
.shortagebkg{padding:40px 0;}
.shortage{width: 90%;}
.shortage h2{flex-wrap: wrap;}
.shortage h2 img{margin-left:5%;}
.shortage h2 div{width: 100%;}
.shortage h2 div p:first-child{margin-bottom: 5px;}
.shortage h2 p{padding:10px;font-size:5vw;}

.shortage ul{margin:20px 0;flex-wrap: wrap;}
.shortage ul li{width: 100%;margin-bottom:40px;}
.shortage ul li:last-child{margin-bottom:0;}
.shortage ul .head{font-size: 5vw;}
.shortage>p{margin-bottom:15px;}
.shortage>a{font-size: 4vw;}
/* 109消防警察缺額多少？ */

/* line連結展開區塊 */
.line-wrap {
    padding: 50px 5vw;
}
.line-wrap .linebox ul li {
	width: 22vw;
}
/* line連結展開區塊 */

/* == Q3：我適合考警察嗎？ == */
.qa-03{	padding: 50px 4%;}
.qa-03 h2{ font-size: 2em;}
.qa-03 h3{ font-size: 1.1em;}
.qa-03 ul{ margin: 0; justify-content: center;}
.qa-03 ul li{ margin: 10px 0; width: 100%; }
.qa-03 ul li h4{ font-size: 1.6em;}
.qa-03 ul li p{ font-size: 1.1em; line-height: 1.5;}
.qa-03 h5{ padding: 10px 0; font-size: 1.3em;}
.qa-03-btn{ display: flex; flex-wrap: wrap;}
.qa-03-btn a{ width: 100%; margin: 5px 0; padding:15px 0; font-size:1.4em;}


/* 想當消防警察怎麼準備？ */
.preparebkg{padding:40px 0 120px 0;}
.prepare{width: 90%;}
.prepare h2{flex-wrap: wrap;}
.prepare h2 img{margin-left:5%;}
.prepare h2 div{width: 100%;}
.prepare h2 div p:first-child{margin-bottom: 5px;}
.prepare h2 p{padding:10px;font-size:5vw;}

.prepare>div{padding:20px;}
.prepare>div img{display: none;}
.prepare .head{font-size:4.5vw;line-height:1;margin-bottom: 5px;}

.prepare>div p{font-size:4vw;}
.prepare>div ul li{margin-right:0px;}
.prepare .dot{font-size:4vw;}
.prepare .twice{font-size:4vw;}
.prepare>p{margin-bottom:15px;}
.prepare>a{font-size: 4vw;}
/* 想當消防警察怎麼準備？ */

/* 消防警察好考嗎？ */
.easybkg{padding:40px 0 60px 0;}
.easy{width: 90%;}
.easy h2{flex-wrap: wrap;}
.easy h2 img{margin-left:5%;}
.easy h2 div{width: 100%;}
.easy h2 div p:first-child{margin-bottom: 5px;}
.easy h2 p{padding:10px;font-size:5vw;}

.easy ul{margin:90px 0 20px 0;padding: 0;}
.easy ul li{width: 100%;padding:60px 20px 20px 20px;}
/* 消防警察好考嗎？ */

/* 我沒有基礎 也能考消防警察？ */
.inexperiencedbkg{padding:40px 0;}
.inexperienced{width: 90%;}
.inexperienced h2{flex-wrap: wrap;}
.inexperienced h2 img{margin-left:5%;}
.inexperienced h2 div{width: 100%;}
.inexperienced h2 div p:first-child{margin-bottom: 5px;}
.inexperienced h2 p{padding:10px;font-size:5vw;}
.step{display: none;}
.step-mibile{display: block;}
.step-mibile img{width: 100%;}
.inexperienced .btn{ display: flex; flex-wrap: wrap;}
.inexperienced .btn a{ width: 100%; margin: 5px 0; padding:15px 0; font-size:1.4em;}
/* 我沒有基礎 也能考消防警察？ */

/* 我適合上消防警察什麼課程？ */
.coursebkg{padding:40px 0 120px 0;}
.course{width: 90%;}
.course h2{flex-wrap: wrap;}
.course h2 img{margin-left:5%;}
.course h2 div{width: 100%;}
.course h2 div p:first-child{margin-bottom: 5px;}
.course h2 p{padding:10px;font-size:4vw;}
.course ul{flex-wrap: wrap;margin: 20px auto 10px auto;width: 90%;}
.course ul li{width: 100%;margin-bottom: 20px;}
.course ul li img{width: 50%;margin: 0 auto;}
.course ul p{font-size: 5vw;}
.course ul .head{font-size:6vw;}
.course ul .className{font-size:6vw;line-height: 1.1;}
.course>p{margin-bottom:15px;}
.course>a{font-size: 4vw;}
/* 我適合上消防警察什麼課程？ */

/* 做的更多,只為助你上榜 */
/* onList */
.onList{width: 92%;padding:60px 4%;}
.onList h2{font-size:6vw; line-height: 2;}
.onList .Content{justify-content:center;flex-wrap: wrap;margin-bottom:10px;}
.onList .Content ul{margin: 0 auto;}
.onList .Content ul li{flex-wrap: wrap;margin-bottom: 20px;}
.onList .Content ul li .left{width: 100%; display: flex;align-items: center;justify-content: center;font-size:5vw;padding:10px 5px;font-size: 4vw;}
.onList .Content ul li .right{width: 100%; line-height: 1.3; box-sizing: border-box; padding: 20px;}
.onList .Content .right{padding: 10px;}

.onList .Content ul:nth-child(2) li:nth-child(odd) div:first-child{background: #17399b !important;}
.onList .Content ul:nth-child(2) li:nth-child(even) div:first-child{background:#e60012 !important;}

.onList>p{font-size: 20px;}
.onList>a{font-size: 18px;}
.onList .tagP{font-size:14px;}

/* 做的更多,只為助你上榜 */
/* footer */
 .footer{ padding: 30px 2% 40px;}
 .footer ul li{ width: 33%;}
 .footer ul li a{ font-size: 16px;}

/* freepik */
.freepik{font-size: 4vw;line-height: 1.2; padding: 0;}
/* freepik */
}

@media(max-width:400px){
/* nav */
.nav2 ul{flex-wrap: wrap;}
.nav2 ul li{border-bottom: 1px solid #fff;border-right:0;}
.nav2 ul li:last-child{border-bottom:0;}
.nav2 ul a{padding:10px 0;}

/* main */


/* 109消防警察缺額多少？ */
.shortage h2 p{font-size:6vw;}
.shortage .Winning{font-size:7vw;}
.shortage .Winning span{padding: 3px 10px;margin-right:0;}
.shortage .Winning em{display: block;font-size:6.5vw;margin-top:15px;line-height: 1.3;}
.shortage>div{padding: 15px;font-size: 5vw;}
.shortage>div p:first-child{font-size: 5vw;line-height: 1.3;margin-bottom: 10px;}
.shortage>p{font-size:6vw;}
.shortage>a{font-size:6vw;padding: 7px 30px;}
/* 109消防警察缺額多少？ */

/* 想當消防警察怎麼準備？ */
.preparebkg {padding: 40px 0 60px;}
.prepare h2 p{font-size:5.8vw;}
.prepare .Winning{font-size:7vw;}
.prepare .Winning span{padding: 3px 10px;margin-right:0;}
.prepare .Winning em{display: block;font-size:6.5vw;margin-top:15px;line-height: 1.3;}
.prepare>div{padding:20px 10px;margin:20px 0 10px 0;}
.prepare .head{font-size: 5.3vw;margin-bottom: 10px;}
.prepare>div{ margin: 20px 0 40px 0;}
.prepare>div p{font-size: 5vw;line-height: 1;margin-bottom: 10px;}
.prepare>div ul{flex-wrap: wrap;margin-bottom: 10px;}
.prepare .dot{font-size: 5vw;width: 100%;}
.prepare .twice{font-size:5vw;}
.prepare>p{font-size:6vw;}
.prepare>a{font-size:5vw;padding: 7px 30px;}
/* 想當消防警察怎麼準備？ */

/* 消防警察好考嗎？ */
.easybkg{padding: 40px 0 80px 0;}
.easy h2 p{font-size:5vw;}
.easy ul{margin:80px 0 20px 0;}
.easy ul li{padding:20px 10px;}
.easy ul .head{font-size: 6vw;}
.easy ul .name{font-size:6vw;line-height: 2;}
.easy ul li>p{font-size:5vw;}
.easy>p{font-size:5.5vw;margin:20px 0;}
.easy>a{font-size:6vw;padding: 7px 30px;}
/* 消防警察好考嗎？ */

/* 我沒有基礎 也能考消防警察？ */
.inexperienced h2 p{font-size:5.2vw;}
.inexperienced ul .head{font-size: 6vw;}
.inexperienced ul li>p{font-size:5vw;}
.step-mibile{margin-top:20px;}
.step-mibile img{transform: scale(1.1);}
.inexperienced>p{font-size:5.5vw;margin:20px 0;}
.inexperienced>a{font-size:6vw;padding: 7px 30px;}
/* 我沒有基礎 也能考消防警察？ */

/* 我適合上消防警察什麼課程？ */
.course{width: 95%;}
.course h2 p{font-size:6vw;padding:10px 5px;}
.course h2 div p:nth-child(2){font-size:5.5vw;padding:10px;line-height: 1.2;}
.course ul .head{font-size:8vw;}
.course ul .className{font-size: 7vw;line-height: 1;}
.course ul li>p{font-size:5vw;}
.course ul p{font-size: 6vw;}
.course>p{font-size:5.5vw;}
.course>a{font-size:6vw;padding: 7px 30px;}
/* 我適合上消防警察什麼課程？ */

/* 做的更多,只為助你上榜 */
.onList .Content ul li .left{font-size:6vw;}
.onList>p{ margin-bottom:10px;}
.onList>a{padding: 10px 50px; display: inline-block;}
/* 做的更多,只為助你上榜 */

/*.footer ul li{width: 28%;}*/
}

*{ margin:0; padding:0;}

html{ 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;}
p{ margin:0; padding:0;}