@charset "utf-8";


body { background-color: #EFEFED; font-family: Helvetica, Arial, "微軟正黑體", sans-serif; }

section { width: 1200px; margin: auto; }
section div.BOX { float: left; margin: 10px 1%; }
section div.NormalBOX { width: 31.33333%; }
section div.BTN-MORE { clear: both; width: 200px; text-align: center; margin: 20px auto; font-size: 1.3em; }


h1, h2, h3, h4, h5, h6 { line-height: 1.65; clear: both; margin: 0; padding: 0;  }
p { font-size: 15px }
ul { list-style:none; padding: 0 0 0 0; }

a { text-decoration: none; color: #555; }
a:link, a:active, a:visited { text-decoration: none; }




div#RoadMap { clear: both; }
div#RoadMap > div.RoadmapContent { padding: 30px 0 0 0; margin: 0 0 55px 0; }
div#RoadMap > div.RoadmapContent > h1, div#RoadMap > div.RoadmapContent > h2 { font-weight: 600; text-align: center; }
div#RoadMap > div.RoadmapContent > h2 { padding-bottom: 60px; }
div#RoadMap > div.RoadmapContent > div.section > div.BOX { width: 31.3333%; margin: 10px 1%; padding: 15px; background: #666; border-radius: 3px; }
div#RoadMap > div.RoadmapContent > div.section > div.BOX > h3 { text-align: center; font-size: 20px; color: #FFF; }
div#RoadMap > div.RoadmapContent > div.section > div.BOX > ul > li { background: #222; color: #FFF; margin: 7px 0; padding: 10px 5%;  text-align: center; font-size: 15px; border-radius: 3px;  }
div#RoadMap > div.RoadmapContent > div.section > div.BOX > ul > li > h5 { font-size: 16px; color: #FFE888 }
div#RoadMap > div.RoadmapContent > div.section > div.BOX > div.ICON { 
	margin: 15px auto 0 auto; 
	border-radius: 99em; 
	text-align: center; 
	width: 30px; height: 30px; line-height: 32px; 
	font-size: 1.5em; 
	background: #FFF; 
	color: #999;
	clear: both;
}

div.MAPcontrol > div.BTN-Close { 
	width: 300px; height: 50px; line-height: 50px; 
	background: #666; 
	color: #FFF; 
	font-size: 18px; 
	text-align: center; 
	margin: 15px auto; 
	border-radius: 4px;
}
div.MAPcontrol > div.BTN-Close:hover { cursor: pointer; background: #096; }

/*各養成班流程圖section內需要BOX置中的設定*/
div#RoadMap > div.RoadmapContent > div.singleContent {  }
div#RoadMap > div.RoadmapContent > div.singleContent > div.BOX { float: none; margin: 10px auto; }



/*微軟養成班 流程圖*/
div#RoadMap > div#UMSVBD > div.section > div.BOX { background: #4E7EAF }
div#RoadMap > div#UMSVBD > div.section > div.BOX > div.ICON { color: #4E7EAF }
div#RoadMap > div#UMSVBD > div.section > div.BOX ul li { background: #32363A; }

/*Java養成班 流程圖*/
div#RoadMap > div#UJWADP { padding: 30px 10%; }
div#RoadMap > div#UJWADP > div.section > div.BOX { width: 48%; background: #AF192B; }
div#RoadMap > div#UJWADP > div.section > div.BOX > div.ICON { color: #AF192B }
div#RoadMap > div#UJWADP > div.section > div.BOX ul li { background: #2B2627;}

/*手機養成班 流程圖*/
div#RoadMap > div#UMBTTR > div.section > div.BOX { background: #D1702F; }
div#RoadMap > div#UMBTTR > div.section > div.BOX > div.ICON { color: #D1702F }
div#RoadMap > div#UMBTTR > div.section > div.BOX ul li { background: #33302E; }

/*網工養成班 流程圖*/
div#RoadMap > div#UMTTR > div.section > div.BOX { background: #3793BC; }
div#RoadMap > div#UMTTR > div.section > div.BOX > div.ICON { color: #3793BC; }
div#RoadMap > div#UMTTR > div.section > div.BOX ul li { background: #2D3135; }
div#RoadMap > div#UMTTR > div.section > div.BOX > div.LC { clear: both; }
div#RoadMap > div#UMTTR > div.section > div.BOX > div.LC > div.TAB { background: #FFD869; color: #222; text-align: center; border-radius: 3px; padding: 10px 0; }
div#RoadMap > div#UMTTR > div.section > div#UMTTR_CH02 > div.LC > div.TAB { width: 100%; float: left; margin: 0 1%; }
div#RoadMap > div#UMTTR > div.section > div#UMTTR_CH02 > div.ICON { margin-top: 65px; }

/*多媒體成班 流程圖*/

div#RoadMap > div#MIWUD > div.section > div.BOX { background: #269B74; }
div#RoadMap > div#MIWUD > div.section > div.BOX { width: 31.33%; }
div#RoadMap > div#MIWUD > div.section > div.BOX > div.ICON { color: #269B74 }
div#RoadMap > div#MIWUD > div.section > div.BOX ul li { background: #26302D; }





@media screen and (min-width: 768px) {

}

@media screen and (max-width: 1156px) {
	section { width: 800px !important; margin: auto; padding: 10px 20px !important; }
	div#RoadMap > div.RoadmapContent > div.section { padding: 0!important; margin: 0!important; }
	div#RoadMap > div.RoadmapContent > div.section > div.BOX { width: 100%; float: none; margin: 15px auto !important; }
}

@media screen and (max-width: 820px) {
	section { width: 100% !important; margin: auto; padding: 10px 20px !important; }
	div.BOX { width: 100% !important; }
}