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;}

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

/* nav */
nav{background:#0b366b;}
nav ul{display:flex;justify-content:space-around;padding: 20px 0;width:980px;margin: 0 auto;}
nav ul a{display: block; color: #fff;text-decoration: none;font-size: 30px;position: relative;}
nav ul a i{color: #adb5bd;}
nav ul a::after{content: '';display: block;position: absolute;left: 45%;bottom:-5px;height:2px;width: 0%;background: #fff;transition: all .5s;}
nav ul a:hover::after{width: 100%;left: 0;}

/* 高普考不一樣了？ */
.different{padding: 60px 0;width: 1000px;margin: 0 auto;text-align: center;}
.different h2{font-size: 54px;text-align: center;line-height: 1.1;margin-bottom:30px;}
.different h2 span{color: #d10000;display: block;}
.different .chat{background: #000;color: #fff;width: 100%;box-sizing: border-box;padding: 15px 0;margin-bottom: 30px;text-align: center;border-radius: 50px;font-size: 30px;position: relative;}
.different .chat span{color: #a3d4ff;}
.different .chat em{color: #ffff00;}
.different .chat::after{content: ''; position: absolute;left:49%;bottom:-15px;display: block;width: 0;height: 0;border-style: solid;border-width:15px 10px 0 10px;border-color:#000 #fff;}

.different .CPone,.different .CPtwo{margin-bottom:50px;text-align:left;}
.different .CPone ul{display:flex;justify-content: space-between;}
.different .CPone ul li{width: 48%;position: relative;line-height: 1.6;font-size: 19px;}
.different .CPone ul li span{position: absolute;top: 0;color: #fff;font-size: 22px;font-weight: bold;box-sizing: border-box;padding:5px;}
.different .CPone .News{border:2px solid #d10000;border-radius: 10px;padding:60px 30px 20px 30px;box-sizing: border-box;}
.different .CPone .News span{background:#d10000;}
.different .CPone .Tips{height: 100%;border:2px solid #0b366b;border-radius: 10px;padding:60px 30px 30px 30px;box-sizing: border-box;}
.different .CPone .Tips span{background:#0b366b;}

.different .CPtwo ul{display:flex;justify-content: space-between;}
.different .CPtwo ul li{width: 48%;}
.different .CPtwo table{width: 100%;}
.different .CPtwo table td{padding:10px;border:1px solid #fff;background: #a3d4ff;text-align: center;font-size: 18px;font-weight: bold;}
.different .CPtwo table thead td{background: #ffe400;text-align: center;}
.different .CPtwo table tbody tr:first-child td{background:#dcdcdc;}
.different .CPtwo ul li:first-child{position: relative;}
.different .CPtwo ul li:first-child>p{color:#00479d;font-weight:bold;position: absolute;line-height:2;}
.different .CPtwo ul li:nth-child(2){background: #ffd3c6;border-radius: 10px;box-sizing:border-box;padding:20px 8px;display: flex;justify-content:space-around;align-items: center;}
.different .CPtwo ul li:nth-child(2) img{width:20%;}
.different .CPtwo ul li:nth-child(2) div{width:75%;line-height:1.6;font-size: 17px;}
.different .CPtwo ul li:nth-child(2) div p:first-child{color:#d10000;font-weight: bold;font-size: 22px;line-height: 1.8;}
.different>p{font-size:18px;font-weight: bold;line-height:1;margin-bottom: 20px;}

.different>a{overflow: hidden; position: relative; display: inline-block; font-size:28px;background: #d10000;color: #fff;border-radius: 100px;text-decoration: none;padding:10px 40px;font-weight: bold;border: 1px solid #d10000;}
.different>a i{margin-right:5px;}
.different>a:hover{color:#d10000;}
.different>a::after{content:'';border-radius:50px;display: block;position: absolute;top: 0;right: 0;background: #fff;width: 100%;height: 100%;transform: translateX(100%);transition: all .8s;z-index:0;}
.different>a:hover::after{border-radius:0;transform: translateX(0);}
.different>a span{position: relative;z-index: 10;transition: all .8s;}

.different .tagP{line-height: 1.5;font-size:16px; font-weight:bold; text-decoration: underline; color:#000;margin:10px 0;}

/* 第一次準備公職 */
.firstbkg{background:#00479d;padding: 80px 0;}
.first{text-align: center;width: 1000px;margin: 0 auto;}
.first h2{font-size: 54px;line-height: 1.1;color: #fff;}
.first h2 span{display: block;color: #ffe400;}
.first ul{display: flex;justify-content: space-between;flex-wrap: wrap;margin:40px 0 10px 0;}
.first ul li{width: 48%;display: flex;margin-bottom: 30px;background: #fff;border-radius: 10px;}
.first ul li>div{box-sizing: border-box;padding:28px;text-align: center;}
.first ul div .head{color: #d10000;border-radius: 50px;border: 1px solid #d10000;font-size: 30px;box-sizing: border-box;padding:0 20px;margin-bottom: 10px;}
.first ul div p{line-height:1.2;font-size: 22px;}
.first ul div p span{display: block;}
.first>p{font-size:24px;font-weight: bold;line-height: 2;margin-bottom: 20px;color: #fff;}
.first>a{ display: inline-block; background: #ffe400;color:#00479d;text-decoration:none;font-size:30px;font-weight: bold;box-sizing: border-box;padding: 15px 40px;border-radius:50px;font-weight: bold;}
.first>a i{margin-right:5px;}
.first>a{overflow: hidden; position: relative; display: inline-block; font-size:28px;background: #fff;color: #00479d;border-radius: 100px;text-decoration: none;padding:10px 40px;font-weight: bold;border: 1px solid #fff;}
.first>a i{margin-right:5px;}
.first>a:hover{color:#fff;border: 1px solid #fff;}
.first>a::after{content:'';border-radius:50px;display: block;position: absolute;top: 0;right: 0;background: #00479d;width: 100%;height: 100%;transform: translateX(100%);transition: all .8s;z-index:0;}
.first>a:hover::after{border-radius:0;transform: translateX(0);}
.first>a span{position: relative;z-index: 10;transition: all .8s;}
.first .tagP{line-height: 1.5;font-size:16px; font-weight:bold; text-decoration: underline; color:#fff;}

/* 你是不是也有這些疑惑？ */
.doubt{width:1000px;padding:80px calc((100% - 1000px)/2);text-align: center;background: #c3d2e0;}
.doubt h2{font-size: 50px;color: #2c3e50;text-align: center;}
.doubt h2 span{display: block;}
.doubt>ul{margin-top:40px;margin-bottom: 20px;display: flex;justify-content: space-between;}
.doubt>ul>li{width:23%;display: flex;flex-flow: column;}
.doubt>ul>li>a{display: block;}
.doubt>ul>li img{width:100%;}
.doubt>ul>li>a>p{display: none;}
.doubt li:nth-child(odd) .head{background:#ac804b;}
.doubt li:nth-child(even) .head{background:#00479d;}
.doubt li:nth-child(odd) a:hover img{filter:drop-shadow(0 0 15px #00479d);}
.doubt li:nth-child(even) a:hover img{filter:drop-shadow(0 0 15px #a87a3d);}

.doubt .down{height: 100%;text-align: left;transition:all .8s;cursor:default;background: #fff;border-radius: 10px;box-sizing: border-box;padding: 20px;font-size:18px;line-height:1.6;}
.doubt .down .head{font-weight: bold;color: #fff;text-align: center;border-radius:40px;box-sizing: border-box;padding:10px 0;margin-bottom:10px;}
.doubt>p{color:#fff;line-height: 5;font-size: 27px;font-weight: bold;}
.doubt>a{color: #b9976e;background: #000;border-radius: 10px;font-size: 28px;text-decoration: none;padding:15px 30px;font-weight: bold;}
.doubt a i{animation:slideRight .8s linear infinite;}
.doubt a:hover i{animation:none;}

/* 6階段建構式課程 */
.creatStepbkg{background: #fff;padding:80px 0;}
.creatStep{width: 1000px;margin: 0 auto;text-align: center;}
.creatStep h2{font-size: 54px;line-height: 1.2;}
.creatStep h2 span{color: #d10000;display: block;}
.creatStep .tagP{line-height: 1.5;font-size:16px; font-weight:bold; text-decoration: underline; color:#000;}

/* step-time */
.step-time{width: 100%;position: relative;display: flex;justify-content: space-around;margin:100px 0 40px 0;padding:0 1%;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:nth-child(3)::before{content: '';display: block;position: absolute;z-index: 5;right: 0;top: 0;width: 50%;height: 50%;background: #e74c3c;}
.step-time li:nth-child(3)::after{content: '';display: block;position: absolute;z-index: 5;right: 0;bottom: 0;width: 50%;height: 50%;background: #c43e3f;}
.step-time li:nth-child(5)::before{content: '';display: block;position: absolute;z-index: 5;left: 0;top: 0;width: 50%;height: 50%;background: #e74c3c;}
.step-time li:nth-child(5)::after{content: '';display: block;position: absolute;z-index: 5;left: 0;bottom: 0;width: 50%;height: 50%;background: #c43e3f;}
.step-time li:nth-child(4)::before{content: '';display: block;position: absolute;top: 0;left: 0;right: 0;width: 100%;height: 50%;background: #e74c3c;}
.step-time li:nth-child(4)::after{content: '';display: block;position: absolute;bottom: 0;left: 0;right: 0;width: 100%;height: 50%;background: #c43e3f;}
.step-time li>p{position: absolute;top:-150%;display: block;width: 100%; text-align: center;color: #6c7c94;font-size: 17px;font-weight: bold;}

/* step-Content */
.step-Content{display: flex;justify-content: space-around;padding:0 1%;box-sizing: border-box;margin-bottom:60px;}
.step-Content li{width: 16%;font-size:20px;font-weight: bold;line-height: 1.5;}
.step-Content li>p:nth-child(2){font-size:20px;line-height:1.6;color: #3d476c;font-weight: bold;}
.step-Content li>p:nth-child(3){text-align:left;}
.step-Content .step-chat::before{content:'';display:block;position: absolute;top:-15px;left: 49%; width: 0;height: 0;border-style: solid;border-width:0 9px 15px 9px;border-color: transparent transparent #b1b4b6  transparent;}
.step-Content .step-chat::after{content:'';display:block;position: absolute;top:-13px;left:49.5%; width: 0;height: 0;border-style: solid;border-width:0 8px 14px 8px;border-color: transparent transparent #e0eaf3 transparent;}
.step-Content .step-chat{color: #3d476c;border: 1px solid #b1b4b6;background: #e0eaf3;box-sizing: border-box;padding:5px 10px 10px 10px;width:160%;transform:translateX(-30%);line-height: 1.6;border-radius: 10px;margin-top:30px;}
.step-Content .step-chat span{color: #e74c3c;}
.step-Content .step-chat p{line-height:1.2;}
.step-mibile{display: none;}

.creatStep>p{font-size:24px;font-weight: bold;line-height:1.6;margin-bottom: 20px;color: #646c89;}
.creatStep>a{overflow: hidden; position: relative; display: inline-block; font-size:28px;background: #a7a7a8;color: #fff;border-radius: 100px;text-decoration: none;padding:10px 40px;font-weight: bold;border: 1px solid #a7a7a8;}
.creatStep>a i{margin-right:5px;}
.creatStep>a:hover{color:#a7a7a8;border: 1px solid #a7a7a8;}
.creatStep>a::after{content:'';border-radius:50px;display: block;position: absolute;top: 0;right: 0;background: #fff;width: 100%;height: 100%;transform: translateX(100%);transition: all .8s;z-index:0;}
.creatStep>a:hover::after{border-radius:0;transform: translateX(0);}
.creatStep>a span{position: relative;z-index: 10;transition: all .8s;}

/* 想上榜 先找對方法 */
.findRightbkg{background:#d10000;padding: 80px 0;}
.findRight{width: 1000px;margin: 0 auto;text-align: center;}
.findRight>h2{font-size: 54px;text-align: center;color:#fff;}
.findRight h2 span{display: block;color: #ffe06e;}
.findRight .board{ margin: 20px 0; box-sizing: border-box; text-align:left;position: relative;z-index: 99;}
.findRight .board ul{display: flex;flex-wrap: wrap;justify-content:space-between; }
.findRight .board ul li{
    width:32%; background: #fff;padding:20px;box-sizing: border-box;border-radius: 10px;margin-bottom:10px;
    line-height: 1.4; text-align: center;
}
.findRight .board ul li img{ float: left; width: 40%;}
.findRight .board ul li h2{ font-size: 22px;}
.findRight .board ul li h3{ clear: both; margin: 0 0 10px; font-size: 30px; color: #c6000f;}
.findRight .board ul li p{ float: right; margin: 3px 0; padding: 2px 0; background-color: #00479d; width: 55%; border-radius: 50px; font-size: 18px; color: #fff;}

.findRight .exp{margin: 20px 0;text-align: left;}
.findRight .exp li{margin-bottom: 10px;background: #fff;border-radius: 10px;box-sizing: border-box;padding:20px 40px;display: flex;justify-content:space-between;align-items: center;line-height: 1.6;font-size: 18px;}
.findRight .exp li img{width: 25%;}
.findRight .exp li>div{width: 70%;}
.findRight .exp li>div p{margin-bottom: 10px;font-size: 18px;}
.findRight .exp .head{font-size: 24px;color:#0b366b;font-weight:bold;margin-bottom:10px;}
.findRight .exp span{color: #d10000;}
.findRight>p{font-size:24px;font-weight: bold;line-height: 2;margin-bottom: 20px;color: #fff;}
.findRight>a{ display: inline-block; background: #000;color:#fff;text-decoration:none;font-size:30px;box-sizing: border-box;padding: 15px 40px;border-radius:50px;font-weight: bold;}
.findRight>a i{margin-right:5px;}
.findRight>a:hover{color: yellow;}
.findRight .tagP{line-height: 1.5;font-size:16px; font-weight:bold; text-decoration: underline; color: #fff;}

.findRight>a{overflow: hidden; position: relative; display: inline-block; font-size:28px;background: #000;color: #fff;border-radius: 100px;text-decoration: none;padding:10px 40px;font-weight: bold;border: 1px solid #000;}
.findRight>a i{margin-right:5px;}
.findRight>a:hover{color:#000;border: 1px solid #000;}
.findRight>a::after{content:'';border-radius:50px;display: block;position: absolute;top: 0;right: 0;background: #fff;width: 100%;height: 100%;transform: translateX(100%);transition: all .8s;z-index:0;}
.findRight>a:hover::after{border-radius:0;transform: translateX(0);}
.findRight>a span{position: relative;z-index: 10;transition: all .8s;}

/* 做的更多,只為助你上榜 */
.onList{overflow: hidden;width:900px;padding: 80px calc((100% - 900px)/2);text-align: center; background-color:#f0f1f5 ;}
.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%;}
.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: #024f94;}
.onList .Content ul li:nth-child(even) .left{background: #e60012;}
.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: #FFF;box-sizing: border-box;padding:15px 20px;text-align: left;}
.onList>p{font-size:24px;font-weight: bold;line-height: 2;margin-bottom: 20px;}
.onList>a{ display: inline-block; font-size:28px;background: #000;color: #fff;border-radius: 50px;text-decoration: none;padding:15px 40px;font-weight: bold;}
.onList>a:hover{color:yellow;}
.onList .tagP{line-height: 1.5;font-size:16px; font-weight:bold; text-decoration: underline;color:#000;}

.onList>a{overflow: hidden; position: relative; display: inline-block; font-size:28px;background: #000;color: #fff;border-radius: 100px;text-decoration: none;padding:10px 40px;font-weight: bold;border: 1px solid #000;}
.onList>a i{margin-right:5px;}
.onList>a:hover{color:#000;border: 1px solid #000;}
.onList>a::after{content:'';border-radius:50px;display: block;position: absolute;top: 0;right: 0;background: #fff;width: 100%;height: 100%;transform: translateX(100%);transition: all .8s;z-index:0;}
.onList>a:hover::after{border-radius:0;transform: translateX(0);}
.onList>a span{position: relative;z-index: 10;transition: all .8s;}

/*footer*/
footer{background: #707070;width: 880px;padding:40px calc((100% - 880px)/2);display: flex;justify-content: space-between;}
footer .footer{width:70%;}
footer .footer>a{position: relative; display: block;background: #fff;border-radius: 10px;text-decoration: none;padding:10px;font-size: 22px;font-weight: bold;color: #c30d23;}
footer .footer>a:active{box-shadow: 4px 4px 15px gray inset;}
footer .footer>a i{position: absolute;right:10px;}

footer .footer ul{display: flex;align-items: center;margin-top:3%;}
footer .footer ul li{text-align: center;border-left:1px solid #666666;}
footer .footer ul li:first-child{border: 0;}
footer .footer ul>li a{ font-size: 18px;font-weight: bold;color: #fff;text-decoration: none;box-sizing: border-box;position: relative;padding:0 10px;}
footer .footer ul>li a::after{content:'';transition: all .5s linear;display: block;background: #fff;height: 1px;position: absolute;left:49%;bottom:-3px; width: 0%;}
footer .footer ul>li a:hover::after{width:60%;left:20%;}

/* other */
@media(max-width:1050px){
/* nav */
nav ul{width: 98%;}
nav ul a{font-size:26px;}

/* main */
/* 高普考不一樣了？ */
.different{width: 98%;margin:0 auto;}

/* 第一次準備公職 */
.first{width: 98%;margin: 0 auto;}
.first ul li{align-items: center;}
.first ul li>div{padding: 0 10px;}
.first ul div .head{font-size: 3vw;}
.first ul div p{font-size:2.5vw;line-height: 1.3;}

/* 你是不是也有這些疑惑？ */
.doubt{width:900px;padding:80px calc((100% - 900px)/2);text-align: center;background: #c3d2e0;}
.doubt .down{padding: 20px 10px;}

/* 6階段建構式課程 */
.creatStep{width: 98%;margin: 0 auto;}
.step-Content{margin-bottom: 40px;}
.step-Content .step-chat{margin-top:60px;}

/* 想上榜 先找對方法 */
.findRight{width: 98%;margin: 0 auto;}

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


/*ipad*/
@media(max-width:768px){
/* nav */
nav ul a{font-size:3vw;}
nav ul a i{margin-left: 5px;}

/* 高普考不一樣了？ */
.different h2{font-size:5.5vw;line-height:1.3;}
.different .chat{font-size:3vw;font-weight: bold;}

/* 第一次準備公職 */
.first h2{font-size:5.5vw;line-height: 1.3;}
.first ul div .head{font-size:2.5vw;}
.first ul div p{font-size:2.4vw;}

/* 你是不是也有這些疑惑？ */
.doubt{width:94%;padding:80px 3%;text-align: center;background: #c3d2e0;}
.doubt h2{font-size: 5vw;}
.doubt ul{flex-wrap: wrap;justify-content: space-around;}
.doubt ul li{width:23%;}
.doubt .down{padding:10px;font-weight: normal;font-size: 18px;line-height:1.6;}
.doubt .down .head{font-size: 2.2vw;margin-bottom:10px;padding:5px 0;}

/* 6階段建構式課程 */
.step-Content li>p:nth-child(2){font-size: 18px;line-height:2;}
.step-Content li{font-size:17px;}
.step-Content .step-chat{margin-top:40px;}

/* 想上榜 先找對方法 */
.findRight h2{font-size: 5.5vw;line-height: 1.1;}
.findRight .board ul{display: flex;flex-wrap: wrap;justify-content:space-between; }
.findRight .board ul li{ padding:20px;margin-bottom:10px;}
.findRight .board ul li img{ float: none; width: 100%;}
.findRight .board ul li h2{ font-size: 20px;}
.findRight .board ul li h3{ font-size: 24px; }
.findRight .board ul li p{ float:none; margin: 4px 0; width: 100%; font-size: 20px;}

.findRight .exp li{flex-wrap: wrap;justify-content: center;}
.findRight .exp li>div{width: 100%;}
.findRight .exp .head{font-size:3.5vw;}

/* onList */
.onList{width: 96%;padding: 40px 2%;}
.onList h6{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;}

/*footer*/
footer{width: 98%;padding: 40px calc((100% - 98%)/2);justify-content:space-around;}
footer>img{width: 25%;}
footer .footer ul>li a{padding:0 7px;}
}

/*phone*/
@media(max-width:767px){
/* header */
header{background: url(../images/header-mobile-alt.jpg)no-repeat;padding-bottom: 112%;background-size: cover;}

/* nav */
nav ul {flex-wrap: wrap;width:100%;padding: 0;}
nav ul li{width:100%;box-sizing: border-box;padding:10px 20px;border-bottom: 1px solid #fff;}
nav ul li:last-child{border: 0;}
nav ul a{font-size:4.5vw;text-align: center;}

/* 高普考不一樣了？ */
.different{width: 90%;}
.different h2{font-size:7vw;font-weight: bold;}
.different .chat{font-size:3.6vw;}
.different .CPone{margin-bottom:30px;}
.different .CPone ul{flex-wrap: wrap;}
.different .CPone ul li{width: 98%;margin:0 auto 40px auto;}
.different .CPone .News{padding:50px 25px 20px 25px;}

.different .CPtwo{margin-bottom:0;}
.different .CPtwo ul{flex-wrap: wrap;}
.different .CPtwo ul li{width:100%;margin-bottom:60px;}
.different .CPtwo ul li:nth-child(2){margin-bottom: 30px;}
.different>p{font-size:5vw;}
.different>a{font-size:6vw;}

/* 第一次準備公職 */
.first{width: 95%;}
.first h2{font-size:5.8vw;font-weight: bold;}
.first ul li{width:100%;justify-content: space-between;}
.first ul li img{width: 40%;}
.first ul li>div{padding:10px 0;width:70%;}
.first ul div .head{font-size: 6vw;margin-bottom: 10px;padding:2px 10px;width: 80%;margin: 0 auto;}
.first ul div p{font-size:5vw;line-height: 1.2;padding:0 5px;margin: 10px 0;}
.first>p{font-size:6vw;}
.first>a{font-size:6vw;}

/* 你是不是也有這些疑惑？ */
.doubt{width:94%;padding:80px 3% 40px 3%;text-align: center;background: #c3d2e0;}
.doubt h2{font-size:8vw;line-height: 1.3;font-weight: bold;}
.doubt ul{flex-wrap: wrap;justify-content: space-around;width:70%;margin:30px auto;}
.doubt ul li{margin-bottom: 20px;width:100%;}
.doubt li a img{display: none !important;}
.doubt li a{text-decoration:none;display: block;box-sizing: border-box;padding:10px;border-radius: 10px;position: relative;margin-bottom:20px;}
.doubt li a::after{content:'';display: block;width: 0;height: 0;border-style: solid;border-width:18px 17px 0 17px;position: absolute;bottom: 0;left:calc((100% - 34px)/2);transform: translateY(100%);}
.doubt li:nth-child(odd) a::after{border-color:#00479d transparent;}
.doubt li:nth-child(even) a::after{border-color:#a87a3d transparent;}
.doubt>ul>li>a>p{display:block;color: #fff;cursor: pointer;font-weight: bold;font-size: 26px;line-height: 1.3;}
.doubt li:nth-child(odd) a{background: #00479d;}
.doubt li:nth-child(even) a{background: #a87a3d;}
.doubt .down{transition:unset;opacity: 1 !important; padding:15px;font-weight: normal;font-size: 18px;line-height:1.6;display: none;text-align: center;margin-top: 5px;}
.doubt .down .head{font-size:5.5vw;font-weight:normal; margin-bottom:10px;background: #ac804b;padding: 3px 15px;display: inline-block;}
.doubt .down p{text-align: left;}
/* 6階段建構式課程 */
.creatStepbkg{padding: 50px 0;}
.creatStep h2{font-size:7.5vw;font-weight: bold;}
.step{display: none;}
.step-mibile{display: block;}
.step-mibile img{width: 100%;}
.creatStep>p{font-size: 6vw;}
.creatStep>a{font-size:6vw;}
.creatStep .tagP{font-size:14px;}

/* 想上榜 先找對方法 */
.findRightbkg{ padding: 50px 0;}
.findRight h2{font-size:7vw;font-weight: bold;}
.findRight .board ul{ margin: 0 auto; width: 96%; flex: none; flex-wrap: wrap;justify-content:space-between; }
.findRight .board ul li{ width: 100%; padding:20px;margin-bottom:10px;}
.findRight .board ul li img{ float: none; margin: 0 auto; width: 200px; height: 200px;}
.findRight .board ul li h2{ font-size: 20px;}
.findRight .board ul li h3{ font-size: 30px; }
.findRight .board ul li p{ float:none; margin: 5px 0; width: 100%; font-size: 24px;}
.findRight .exp li{padding:20px 10px;width: 96%;margin:0 auto 30px auto;}
.findRight .exp li img{width:40%;}
.findRight .exp .head{font-size:5.5vw;text-align: center;}
.findRight .exp .head span{display: block;}
.findRight>p{font-size: 6vw;}
.findRight>a{font-size: 5.5vw;}
.findRight .tagP{font-size:14px;}

/* onList */
.onList{width: 96%;padding:30px 2% 60px 2%;}
.onList h2{font-size:8vw;}
.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;}
.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{	flex-wrap: wrap;padding-bottom: 20px;}
footer>img{	width: auto;max-width: 180px;height:75px;}
footer .footer{width: 100%;}
footer .footer>a{font-size:5vw;width: 90%;display: block;margin:10px auto;}

footer .footer ul{width:90%; flex-wrap: wrap;justify-content:flex-start;margin:20px auto 0 auto;}
footer .footer ul li{width:33%;margin-bottom: 20px;box-sizing: border-box;border-left: 1px solid #9b9b9b;}
footer .footer ul li:first-Child{border: 0;}
footer .footer ul li a{padding: 5px;border: 0;}
}

@media(max-width:400px){
.different .chat{font-size:5vw;padding:10px 15px;line-height: 1.3;}


.onList .Content ul li .left{font-size: 5vw;}
.onList>p{font-size:5vw;}
}

*{ 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;}

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


#cloudservice{ font-family:Arial, Helvetica,"微軟正黑體",sans-serif; text-size-adjust:none; font-size:15px;box-sizing: border-box;}
#cloudservice.cloudstudy{ padding: 100px 0; width: 100%; background-color: #f8f8f8;text-align: center;}
#cloudservice.cloudstudy .title{ margin: 0 auto; max-width: 1200px; display: flex; justify-content: center; box-sizing: border-box;text-align: left;}
#cloudservice.cloudstudy .title-L{ padding: 0 20px 0 0; width: 40%; text-align: right;}
#cloudservice.cloudstudy .title-L img{ width: 100%; max-width: 260px;}
#cloudservice.cloudstudy .title-R{ width: 60%; display: flex; flex-wrap: wrap; align-items: flex-end;}
#cloudservice.cloudstudy .title-R h2{ margin: 0; padding: 0; font-size: 4.8em; font-weight: normal; font-style: italic;}
#cloudservice.cloudstudy .title-R div{ padding: 10px 20px; width: 100%; background-color: #ff3b4f; font-size: 2.5em; color: #FFFFFF; border-radius: 20px 0 0 0;}
#cloudservice.cloudstudy .main{ margin: 0 auto; max-width: 1200px; box-sizing: border-box;}
#cloudservice.cloudstudy .main ul{ margin: 60px auto; width: 100%; display: flex; justify-content: space-around;}
#cloudservice.cloudstudy .main ul li{ width: 200px; text-align: center;}
#cloudservice.cloudstudy .main ul li img{ width: 100%; max-width: 200px; height:auto;}
#cloudservice.cloudstudy .main ul li .cloudstudy-btn01,.cloudstudy-btn02,.cloudstudy-btn03,.cloudstudy-btn04,.cloudstudy-btn05{ cursor: pointer; transition-duration: .5s }
#cloudservice.cloudstudy .main ul li .cloudstudy-btn01:hover,.cloudstudy-btn02:hover,.cloudstudy-btn03:hover,.cloudstudy-btn04:hover,.cloudstudy-btn05:hover{ transform: translateY(-10px);}
#cloudservice.cloudstudy .main ul li .cloudstudy-sub01,.cloudstudy-sub02,.cloudstudy-sub03,.cloudstudy-sub04,.cloudstudy-sub05{ display: none;}
#cloudservice.cloudstudy .main ul li h3{ margin: 0; padding: 5px 0; font-size: 1.8em; font-style: italic; border-bottom: 0px dashed #a0a0a0;}
#cloudservice.cloudstudy .main ul li h3:nth-child(2){ border-bottom: 1px dashed #a0a0a0;}
#cloudservice.cloudstudy .main ul li .green{ color: #15b494;}
#cloudservice.cloudstudy .main ul li .orange{ color: #f58e01;}
#cloudservice.cloudstudy .main ul li .purple{ color: #9f57e7;}
#cloudservice.cloudstudy .main ul li .light-purple{ color: #cba1f5;}
#cloudservice.cloudstudy .main ul li .blue{ color: #00c5e3;}
#cloudservice.cloudstudy .main ul li .red{ color: #ff3b4f;}
#cloudservice.cloudstudy .main ul li .light-red{ color: #ff8290;}
#cloudservice.cloudstudy .info{ box-sizing: border-box; width: 100%; padding: 20px 18px; background-color: #414141; border-radius: 15px; color: #FFFFFF; line-height: 1.5;}
#cloudservice.cloudstudy .info h4{ font-size: 1.2em;text-align: center;}
#cloudservice.cloudstudy .info p{ padding: 10px 0 0 0; font-size: 1.1em; text-align: justify;}
#cloudservice>a{ display:inline-block; text-decoration: none; color: #FFFFFF;font-size:20px;padding:8px 25px;box-sizing: border-box;font-weight: bold;margin:0 auto; background-color: #000000; border-radius: 30px;}


/* == 平版版型區 ============================================================================= */
@media screen and ( min-width:768px ) and ( max-width:1024px ){
	
/*專為你的上榜需求-實體雲端串流學習不間斷*/
#cloudservice{text-size-adjust:none; font-size:15px; box-sizing: border-box;}
#cloudservice.cloudstudy{ padding: 80px 0; width: 100%;text-align:center;}
#cloudservice.cloudstudy .title{ margin: 0 auto; width: 100%;text-align:left;}
#cloudservice.cloudstudy .title-L{ padding: 0; width: 35%; text-align:center;}
#cloudservice.cloudstudy .title-L img{ width: 100%; max-width: 260px;}
#cloudservice.cloudstudy .title-R{ width: 75%;}
#cloudservice.cloudstudy .title-R h2{ margin: 0; padding: 0; font-size: 4em;}
#cloudservice.cloudstudy .title-R div{ padding: 10px 20px; width: 100%; font-size: 2.2em;}
#cloudservice.cloudstudy .main{ margin: 0 auto; padding: 0 2%; width: 100%;text-align:left;}
#cloudservice.cloudstudy .main ul{ margin: 40px auto; }
#cloudservice.cloudstudy .main ul li{ width: 18%;}
#cloudservice.cloudstudy .main ul li .cloudstudy-btn01:hover,.cloudstudy-btn02:hover,.cloudstudy-btn03:hover,.cloudstudy-btn04:hover,.cloudstudy-btn05:hover{ transform: translateY(0px);}
#cloudservice.cloudstudy .main ul li h3{ padding: 5px 0; font-size: 1.5em;}
#cloudservice.cloudstudy .info{ width: 100%; padding: 15px; border-radius: 10px;}
#cloudservice.cloudstudy .info h4{ font-size: 1.1em;}
#cloudservice.cloudstudy .info p{ padding: 5px 0 0 0; font-size: 1em; }
}

/* == 手機版型區 ============================================================================= */
@media screen and ( max-width:767px ){
	
/*專為你的上榜需求-實體雲端串流學習不間斷*/
#cloudservice.cloudstudy{ padding: 50px 2%; width: 100%;}
#cloudservice.cloudstudy .title{ width: 100%; flex-wrap: wrap;}
#cloudservice.cloudstudy .title-L{ padding: 0; width: 50%;}
#cloudservice.cloudstudy .title-R{ width: 100%; text-align: center; justify-content: center; }
#cloudservice.cloudstudy .title-R h2{ font-size: 2.5em; font-style: normal;}
#cloudservice.cloudstudy .title-R div{ padding: 10px; width: 90%; font-size: 1.5em; border-radius: 20px;}
#cloudservice.cloudstudy .main{ width: 100%;}
#cloudservice.cloudstudy .main ul{ margin: 20px auto; width: 100%; flex-wrap: wrap; justify-content:space-between;}
#cloudservice.cloudstudy .main ul li{ padding: 10px 0; width: 48%; text-align: center;}
#cloudservice.cloudstudy .main ul li:last-child{ margin: 0 auto; width: 50%;}
#cloudservice.cloudstudy .main ul li .cloudstudy-btn01:hover,.cloudstudy-btn02:hover,.cloudstudy-btn03:hover,.cloudstudy-btn04:hover,.cloudstudy-btn05:hover{ transform: translateY(0px);}
#cloudservice.cloudstudy .main ul li img{ width: 90%; height:auto;}
#cloudservice.cloudstudy .main ul li h3{ padding: 2px 0; font-size: 1.3em;}
#cloudservice.cloudstudy .info h4{ font-size: 1em;}
#cloudservice.cloudstudy .info p{ padding: 5px 0 0 0; font-size: 1em; }
#cloudservice>a{line-height:40px; border-radius: 30px;padding: 5px 20px;font-size:6vw;}
}