@charset "utf-8";
section div.BOX { float: left; margin: 10px; }
div#RoadMap { clear: both; }
div#RoadMap > div.RoadmapContent { padding: 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; }
section div.BOX { width: 31.3333%; margin: 10px 1%; padding: 15px; background: #666; border-radius: 3px; }
section div.BOX > h3 { text-align: center; font-size: 20px; color: #FFF; }
section div.BOX ul { padding: 0; margin: 0; }
section div.BOX ul > li { background: #222; color: #FFF; margin: 7px 0; padding: 10px 5%;  text-align: center; font-size: 15px; border-radius: 3px; list-style: none; ; }
section div.BOX > ul > li > h5 { font-size: 16px; color: #FFE888 }
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.2em; 
	background: #FFF; 
	color: #999;
	clear: both;
}
section div.BOX > div.ICON i{ 
margin: 0;padding: 0;
}
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; }

/*Modal*/
.modal-header { display: block; -ms-flex-align: start; border: none; margin:20px 0 0; }
.modal-title{text-align: center;}

.modal-content {
	position: relative;
	display: -ms-flexbox;
	display: flex;
	-ms-flex-direction: column;
	flex-direction: column;
	width: 100%;
	pointer-events: auto;
	background-color: rgba(255, 255, 255, 0.918);
	background-clip: padding-box;
	border: 1px solid rgba(0,0,0,.2);
	border-radius: .3rem;
	outline: 0;
}
.modal {padding: 0 !important;}
.modal-dialog.modal-lg {max-width: 90%;margin: 0 auto;padding: 0;}



@media screen and (min-width: 768px) {
  div#RoadmapContent .modal-dialog { width: 90%; }
}

@media screen and (max-width: 1156px) {
	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: 767px) {
	.modal-dialog.modal-lg {max-width: 100%;margin: 0 auto;}

}