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

html{ width:100%; height:100%; font-family:Arial, Helvetica,"微軟正黑體",sans-serif; text-size-adjust:none;
      font-size:15px;}

ul,p{ margin:0; padding:0; list-style:none;}
.co01{ color:#F00;}
.co02{ color:#F00;}
.co03{ color:#1fbe75;}
.co04{ color:#ff9000;}
.co05{ color:#FF0;}
.co06{ color:#56af29;}
.co07{ color:#66ff00;}
.co08{ color:#00d2ff;}
.aL a{ color:#00a29c;}
.bL a{ color:#ad008b;}
img{ display: block; margin: 0 auto; max-width: 100%;}
/*======================================== AD ========================================*/

header{	width:100%;	margin:0; padding:15px 0; overflow:hidden; background-color:#FFF; text-align:center; overflow:hidden;}
header .box01{ display:block; margin:0 auto; padding:0; width:100%; max-width:1000px; height:auto;}
header .box02{ display:none; margin:0 auto; padding:0 2%; width:100%; max-width:540px; height:auto;}

/*底色*/
.con-bg-green{ background-color: #00999b;}
.con-bg-red{ background-color: #e21b4e;}
.con-bg-blue{ background-color: #2b7eb9;}

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

/* 置頂班系 2024.0403修改 */
.top{ width:100%; padding: 20px calc((100% - 1000px)/2); background-color:#FFF; border-bottom:1px solid #CCC;}
.top-con{ display: flex; justify-content: flex-start; align-items: center;}
.top-conL{ width: 25%; text-align: center}
.top-conL img{ max-width: 100%;}
.top-conR{ width: 60%;}
.top-btn{ width:100%; height:44px; line-height:44px; padding:0 20px; border-radius:10px; background-color:#e60015; font-size:20px; color:#FFF; }
.top-btn a{ display:block; height:44px;	text-decoration:none; color:#FFF; position: relative;}
.top-btn a::after{ content: '\f105'; font-family: 'Font Awesome 5 Free'; font-weight: 700; position: absolute; top: 0; right: 5px;}

.HEAD{ width:100%;
       height:550px;
       background-image:url(../images/hand-L.png);
	   background-repeat:no-repeat;
	   background-position:top;
	   background-size:cover;
	   overflow:hidden;
	   }

/* ==廣告區01== */
.CON01{ padding:50px 0; background-image: url(../images/bg-image.gif);}
.CON01 h2{ font-size:4rem; text-align:center; text-decoration:underline; }
.CON01-BOX{ font-size:2.3em;}

/* ==我們為穩定未來而努力== */
.con-recommend{ padding:70px 0; background-color: #ffe100;}
.con-recommend h2{ font-size:4rem; text-align:center; text-decoration:underline;}
.con-recommend .tryexam{ background-image: url(../images/bg-image.gif);}
.con-recommend .tryexam-title{ 
	width: 50%; margin: 0 auto; padding: 10px 0; background-color: #e21b4e;
	font-size: 2rem; color: #fff; border-radius: 0 0 20px 20px;
}
.con-recommend .experience-wp{ background-image: url(../images/image21.jpg); background-repeat: no-repeat; 
	background-position: center center; background-size: cover;}
.con-recommend .experience-box img{ border: 2px solid #000; border-radius: 50%;}
.con-recommend .experience-box h3{ padding: 10px 0; color: #fff; background-color: #000;}
.con-recommend .experience-box h4{ margin: 0 auto; width: 70%; padding: 10px 0; 
	font-size: 1.3rem; color: #fff; background-color: #00999b; border-radius: 50px;
}
.con-recommend .recommend-btn a{
	display:block; margin: 40px auto 0; padding: 10px 0;
    width:400px;
	background-color:#000;
	font-size:2rem;
	text-align:center;
	text-decoration:none;
	color:#FFF;
	border-radius:50px;
}
.con-recommend .recommend-btn a:hover{ color: #ffe100;}

/*輪播*/
.exam-swiper-fn{
    position: relative;
    margin: 30px 0px 0; padding: 0 60px;
}

.exam-swiper-fn .swiper-wrapper{
    height: auto;
}

.exam-swiper-fn .swiper-slide{
    margin: 0px;
    padding: 0px;
}

.exam-swiper-fn .swiper-button-next{
    position: absolute;
    z-index: 57;
    top: calc(100%/2);
    background: rgba(0, 0, 0, 0.5);
    right: 10px;
    width: 40px;
    height: 40px;
    border-radius: 25px;
}

.exam-swiper-fn .swiper-button-next:hover{
    background: #999;
    transition: all 0.3s;
}

.exam-swiper-fn .swiper-button-prev{
    position: absolute;
    z-index: 57;
    background: rgba(0, 0, 0, 0.5);
    left: 10px;
    width: 40px;
    height: 40px;
    border-radius: 25px;
}

.exam-swiper-fn .swiper-button-prev:hover{
    background: #999;
    transition: all 0.3s;
}

.exam-swiper-fn .swiper-button-next img{
    position: absolute;
    z-index: 57;
    left: 12px;
    top: 12px;
    width: 40%;
}

.exam-swiper-fn .swiper-button-prev img{
    position: absolute;
    z-index: 57;
    right: 12px;
    top: 12px;
    width: 40%;
}

/* ==廣告區02 國考入門款：初等考三大優勢== */
.CON02{ padding:80px 0; width:100%;	background-color:#00d9ec; }
.CON02 h2{ margin:0 0 40px 0; font-size:4em; text-align:center; text-decoration:underline;}
.con2-text h4{ padding: 10px 0; font-size:2rem; color:#FFF; text-align:center; }
.con2-text h4.blue{ background-color:#0078cc;}
.con2-text h4.red{ background-color:#e21b4e;}
.con2-text h4.oran{ background-color:#ff9000;}
.con2-text p{ font-size:1.6em;
                 text-align:center;
				 line-height:1.5; margin-bottom: 0;}
.CON02-BTN a{ display:block;
              width:400px;
			  margin:50px auto 0 auto; padding: 10px 0;
			  background-color:#000;
			  font-size:2rem;
			  text-align:center;
			  text-decoration:none;
			  color:#FFF;
			  border-radius:50px;
			  }
.CON02-BTN a:hover{ color: #00d9ec;}

/* ==廣告區03=熱門報考類科= */
.CON03{ padding:80px 0; background-image: url(../images/bg-image.gif);}
.CON03 h2{ margin:0 0 40px 0; font-size:4em; text-align:center; text-decoration:underline;}
.CON03 .box-A{ padding: 20px; border-radius: 20px; text-align: center;}
.CON03 .box-A h3{ font-size: 1.6rem; color: #fff; text-decoration: underline;}
.CON03 .box-A p{ margin-bottom: 0; font-size: 1.2rem; color: #fff100;}

.CON03-BTN{ margin-top: 50px; display:flex; justify-content: center;}
.CON03-BTN a{ display:block; margin: 0 5px; padding: 10px 0; width: 380px; background-color:#000; font-size:2em;
			  text-align:center; text-decoration:none; color:#FFF;	border-radius:50px;}
.CON03-BTN a.blue{ background-color: #0078cc;}
.CON03-BTN a:hover{ color: #fff100;}

/* ==廣告區04=投考組合= */
.CON04{ padding:70px 0px; background-color:#ffe100; text-align: center;}
.CON04 h2{ margin:0 0 40px 0; font-size:4em; text-align:center; text-decoration:underline;}
.CON04 h4{ display: inline-block; padding: 10px 30px; font-size: 1.6rem; color: #ffe100; background-color: #000; border-radius: 50px;}
.CON04 .con-set01{ padding: 0; display: flex; justify-content: center; align-items: center;}
.CON04 .con-set01 li:nth-child(odd){ padding: 10px 50px; border-radius: 50px; 
	font-size: 2.1rem; font-weight: bold; color: #fff;}
.CON04 .con-set01 li:nth-child(odd) span{ font-size: 1rem;}
.CON04 .con-set01 li:nth-child(even){ padding: 0 20px; font-size: 2rem; color: #c5ae00;}
.CON04 .set02-box{ width: 20%; border-radius: 20px; background-color: #fff;}
.CON04 .set02-box h3{ padding: 15px 0 0; font-size: 1.8rem; color: #fff; background-color: #000;
	 text-align: center; position: relative; border-radius: 20px 20px 0 0;}
.CON04 .set02-box h3:after{ content: ''; position: absolute; left: 0; bottom: -29px; width: 100%; height: 30px; clip-path: polygon(100% 0, 0 0, 50% 100%); background-color: #000;}
.CON04 .set02-box p{ padding: 30px 15px 0; font-size: 1.5rem; font-weight: bold; color: #e21b4e;}

.CON04-BTN a{ display:block; width:400px; padding: 10px 0; margin:40px auto 0;
			  background-color:#000; font-size:2em; text-align:center;	text-decoration:none;
			  color:#FFF; border-radius:50px; }
.CON04-BTN a:hover{ color: #ffe100;}
			 
/* == 留單按鈕 == */
.CON06{ margin:80px auto;
        padding:0;
		width:100%;
		max-width:1000px;
		text-align:center;
		}
.CON06 h3{ margin:10px auto; display:block; width:350px; font-size:1.4em; text-align:center;}
.CON06 img{ width:80%; height:auto;}
.CON06 a{ margin:auto; display:block;
          width:42%; padding: 10px 0;
		  font-size:2.4em;
		  color:#FFF;
		  text-align:center;
		  text-decoration:none;
		  border-radius:50px;
		  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 */ }
.CON06 a:hover{ font-weight:bold;}



/* ===== other ===== */
@media (max-width: 1200px) {
}

/* == 平版版型區 ============================================================================= */
@media screen and ( min-width:768px ) and ( max-width:1024px ){
	
header{	width:100%;	margin:0; padding:2% 0; overflow:hidden; background-color:#FFF;	text-align:center;}
header .box01{ display:block; margin:0 auto; padding:0 2%; width:100%; max-width:1000px; height:auto;}
header .box02{ display:none; margin:0 auto; padding:0 2%; width:100%; max-width:540px; height:auto;}

/*======================================== AD ========================================*/	
/* 置頂班系 2024.0403修改 */
.top{ width:100%; padding: 20px 5%;}
.top-con{ flex-wrap: wrap; justify-content: center;}
.top-conL{ width: 100%;}
.top-conR{ margin-top: 10px; width: 80%;}
.top-btn{ font-size:16px;}

.HEAD{ width:100%;
       height:auto;
	   margin:0;
	   padding-bottom:55%;
	   background-image:url(../images/hand-L.png);
	   background-size:cover;
	   overflow:hidden;
       }
		 

/* ==廣告區01== */

/* ==我們為穩定未來而努力== */
.con-recommend .tryexam{ margin-top: 20px;}
.con-recommend .tryexam-title{ 	width: 100%; }
.con-recommend .experience-wp{ }
.con-recommend .experience-box img{ border: 2px solid #000; border-radius: 50%;}
.con-recommend .experience-box h4{ width: 100%; font-size: 1.1rem;}

/* ==廣告區02== */
.con2-text h4{ font-size:1.8rem; }
.con2-text p{ font-size:1.3em;}


/* ==廣告區03=熱門報考類科= */
.CON03 .box-A{ padding: 15px;}
.CON03 .box-A h3{ font-size: 1.3rem;}
.CON03 .box-A p{ font-size: 1.1rem;}
.CON03-BTN{ flex-wrap: wrap; }
.CON03-BTN a{ display:block; margin: 5px 0; width: 60%;}

/* ==廣告區04=投考組合= */
.CON04 .con-set01{ padding: 0; display: flex; justify-content: center; align-items: center;}
.CON04 .con-set01 li:nth-child(odd){ padding: 10px 20px; font-size: 1.5rem;}
.CON04 .con-set01 li:nth-child(odd) span{ font-size: 1rem;}
.CON04 .con-set01 li:nth-child(even){ padding: 0 15px; font-size: 1.5rem;}
.CON04 .set02-box{ width: 25%;}
			 
/* == 留單按鈕 == */
.CON06{ margin:30px auto;
        padding:0;
		width:100%;
		text-align:center;
		}
.CON06 h3{ margin:10px auto; display:block; width:350px; font-size:1.4em; text-align:center;}
.CON06 img{ width:90%; height:auto;}
.CON06 a{ margin:5px auto; display:block;
          width:45%; padding: 12px 0;
		  font-size:2em;}

}


/* == 手機版型區 ============================================================================= */
@media screen and ( max-width:767px ){
	
header{	width:100%;	margin:0; padding:2% 0; overflow:hidden; background-color:#FFF;	text-align:center;}
header .box01{ display:none; margin:0 auto; padding:0; width:100%; max-width:1000px; height:auto;}
header .box02{ display:block; margin:0 auto; padding:0 2%; width:100%; max-width:540px; height:auto;}
	
.ad-brand{ display: block; padding: 10px 5%; font-size: 1.2em;}

/*======================================== AD ========================================*/			
/* 置頂班系 2024.0403修改 */
.top{ width:100%; padding: 20px 5%;}
.top-con{ flex-wrap: wrap; justify-content: center;}
.top-conL{ width: 100%;}
.top-conR{ margin-top: 10px; width: 100%;}
.top-btn{ font-size:16px;}

.HEAD{ width:100%;
       height:auto;
	   margin:0;
	   padding-bottom:80%;
	   background-image:url(../images/hand-M.png);
	   background-size:cover;
	   overflow:hidden;
       }	   

/* ==廣告區01== */
.CON01{ padding:40px 0;width:100%;}
.CON01 h2{ font-size:2.5rem; }
.CON01-BOX{ font-size:1.5em;}

/* ==我們為穩定未來而努力== */
.con-recommend{ padding:50px 0;}
.con-recommend h2{ font-size:2rem;}
.con-recommend .tryexam{ margin-top: 20px; border: 1px solid #e21b4e;}
.con-recommend .tryexam-title{ width: 100%; font-size: 1.5rem;}
.con-recommend .experience-box h3{ font-size: 1.6rem;}
.con-recommend .recommend-btn a{ width:85%; font-size:1.5rem;}

/*輪播*/
.exam-swiper-fn{
    position: relative;
    margin: 10px 0 0; padding: 0 20px;
}
.exam-swiper-fn .swiper-button-next{
    right: -25px;
}

.exam-swiper-fn .swiper-button-prev{
    left: -25px;
}

/* ==廣告區02== */
.CON02{ padding:50px 0;}
.CON02 h2{ margin:0 0 20px; font-size:2.2rem;}
.con2-text h4{ font-size:1.4rem;}
.con2-text p{ font-size:1.3em; text-align:center; line-height:1.5;}
.CON02-BTN a{ width:85%; margin:20px auto 0 auto; font-size:1.5rem;}

/* ==廣告區03=熱門報考類科= */
.CON03{ padding:50px 0;}
.CON03 h2{ margin:0 0 20px; font-size:3rem;}
.CON03 .box-A{ padding: 15px 20px;}
.CON03 .box-A h3{ font-size: 1.3rem;}
.CON03 .box-A p{ margin-bottom: 0; font-size: 1.1rem;}
.CON03-BTN{ margin-top: 30px; flex-wrap: wrap; justify-content: center;}
.CON03-BTN a{ margin: 5px 0; padding: 10px 0; width: 80%; font-size:1.6em;}

/* ==廣告區04== */
.CON04{ padding:50px 0px;}
.CON04 h2{ margin:0 0 20px; font-size:3rem;}
.CON04 h4{ font-size: 1.4rem;}
.CON04 .con-set01{ display: flex; flex-wrap: wrap;}
.CON04 .con-set01 li:nth-child(odd){ width: 70%; padding: 8px 0; font-size: 1.6rem;}
.CON04 .con-set01 li:nth-child(odd) span{ font-size: 1rem;}
.CON04 .con-set01 li:nth-child(even){ width: 50%; padding: 2px 0; font-size: 1.5rem; transform: rotate(90deg);}
.CON04 .set02-box{ width: 45%; margin: 10px 5px 0;}
.CON04 .set02-box h3{ padding: 15px 0 0; font-size: 1.3rem;}
.CON04 .set02-box h3:after{ height: 15px; bottom: -14px;}
.CON04 .set02-box p{ padding: 15px 10px 0; font-size: 1rem;}
.CON04-BTN a{ width:80%; padding: 10px 0; margin:0 auto; font-size:1.6em;}


/* == 留單按鈕 == */
.CON06{ margin:30px auto;
        padding:0;
		width:100%;
		text-align:center;
		}
.CON06 h3{ margin:10px auto; display:block; width:250px; font-size:1.2em; text-align:center;}
.CON06 img{ width:90%; height:auto;}
.CON06 a{ margin:5px auto; display:block;
          width:80%; padding: 10px 0;
		  font-size:1.6em;}		 

}