@charset "utf-8";



section#course {
	background-size: 100%;
	background-position: center;
	margin: 0px 0 0 0;
	padding-top: 30px;
}

section#course > div#TOP-BAR { float: left; width:61%; }
section#course > div#TOP-BAR div.BOX-TOP { 
	width: auto; 
	height: 22px; 
	margin: 18px 0 0 2%; 
	float: left; 
	font-size: 16px;
	line-height: 22px;
	padding: 0 0 0 0;
	color: #555;
	font-weight: 400;
}
section#course > div#TOP-BAR a { font-weight: 600; }
section#course > div#TOP-BAR a:hover { color:#357c5a; text-decoration: underline; }
section#course > div#TOP-BAR div.BOX-TOP { overflow: hidden; }
section#course > div#TOP-BAR div.BOX-TOP div.Circle { width: 22px; height: 22px; line-height: 22px; text-align: center; border-radius: 50%; float: left; margin: 0 5px 0 0; color: #FFF; font-size: 12px;  }
section#course > div#TOP-BAR div.BOX-TOP a { display: block; }
section#course > div#TOP-BAR div.BOX-TOP:nth-child(1) div.Circle { background: #d13b3b }
section#course > div#TOP-BAR div.BOX-TOP:nth-child(2) div.Circle { background: #d86323 }
section#course > div#TOP-BAR div.BOX-TOP:nth-child(3) div.Circle { background: #F39800 }
section#course > div#TOP-BAR div.BOX-TOP:nth-child(4) div.Circle { background: #2bad60 }
section#course > div#TOP-BAR div.BOX-TOP:nth-child(5) div.Circle { background: #2b8bcc }
section#course > div#TOP-BAR div.BOX-TOP:nth-child(6) div.Circle { background: #76638d }

section#course > div#TOP-BAR div.BOX-TOP:nth-child(1) > a:hover { color: #d13b3b }
section#course > div#TOP-BAR div.BOX-TOP:nth-child(2) > a:hover { color: #d86323 }
section#course > div#TOP-BAR div.BOX-TOP:nth-child(3) > a:hover { color: #F39800 }
section#course > div#TOP-BAR div.BOX-TOP:nth-child(4) > a:hover { color: #2bad60 }
section#course > div#TOP-BAR div.BOX-TOP:nth-child(5) > a:hover { color: #2b8bcc }
section#course > div#TOP-BAR div.BOX-TOP:nth-child(6) > a:hover { color: #76638d }


section#course .nav-tabs { width: 32%; margin:0 0 0 1%; float: right; padding: 0; }
section#course .nav-tabs > li { 
	float: left; 
	background: none; 
	color: rgba(0,0,0,0.4); 
	font-size: 16px;
	text-align: center; 
	transition: .10s linear; 
	background: rgba(255,255,255,0);
	border: solid 1px rgba(0,0,0,0.09);
	/* width: 17%;  */ height: 50px; line-height: 30px;
	border-radius: 4px;
	margin: 0px 1.5% 0 0; 
}

section#course .nav-tabs > li:hover {
 border:none;
 background: rgba(0,0,0,0.2); border: solid 1px rgba(0,0,0,0); color: #FFF; transition: .20s linear;
}

section#course .nav-tabs > li a {
	background: none;
	border:0;
}
section#course .nav-tabs > li.active a,
section#course .nav-tabs > li a:hover { color: #FFF }
section#course .nav-tabs > li.active,
section#course .nav-tabs > li.active:hover,
section#course .nav-tabs > li.active:focus {
	background: #C94551; ;
}

#ucomlnk_style li a { background: #C33 !important; color: #FF0; }
#morelnk_style li a { background: #2F4052 !important; color: #FFF; }

section#course { position: relative; }
section#course a { color: #555; }
section#course { width: 100%; clear: both; }
section#course div.BOX { background: #FFF; height: 360px; border-radius: 5px; overflow: hidden; border: solid 2px #F2EFEB; box-shadow: rgba(44,53,66,0.1) 0 0 0px 0  }
section#course div.BOX:hover { border: solid 2px #FC0; }
section#course > div.tab-content div.tab-pane { clear: both; padding: 10px 0 0 0; }
section#course > div.tab-content div.BOX div.Banner { width: 100%; height: auto; overflow: hidden; }
section#course > div.tab-content div.BOX div.Banner img { width: 100%; }
section#course > div.tab-content div.BOX div.Content { padding: 8px 10px 0 10px; }
section#course > div.tab-content div.BOX div.Content h3 { 
	font-size: 1.25em; 
	padding: 0 0 5px 0; 
	color:#BA6345 !important; 
	overflow:hidden; 
	text-overflow:ellipsis; 
	white-space: nowrap; 
	border-bottom: solid 2px #EFEFED;
}
section#course > div.tab-content div.BOX div.Content p { font-size: 14px; padding: 4px 0 0 0; }

section#course div.TAB-BTN { 
	position: absolute; 
	top: 270px; 
	width: 40px; height: 40px; line-height: 43px; 
	text-align: center; 
	background-color: #8ca0a5; 
	color: #FFF;
	border-radius: 4px;
	font-size: 2em;
	opacity: 0.2;
	transition: 0.3s;
}
section#course div.TAB-BTN:hover { cursor: pointer; opacity: 0.6; transition: 0.3s; }
section#course div.TAB-BTN.btnNext { right: 0.8%; }
section#course div.TAB-BTN.btnPrevious { left: 0.8%; }

/* Important_EventBanner AWS */

section#course > div.Important_EventBanner { 
	width: 1313px;
	margin: auto; 
	position: relative;
	animation-name: EventBanner-T; 
    animation-duration: 3s; 
    animation-iteration-count: initial; 
}

	/*MOV
	@keyframes EventBanner-T {
	    0%  { top: -1200px;  }
	    100%  { top: 0px;  }
	}*/

section#course > div.Important_EventBanner img { width: 100%; border-radius: 8px; margin-bottom: 20px; }
section#course > div.Important_EventBanner > div.AD-BTN-Close { position: absolute; top: 10px; right: 10px; width: 20px; height: 20px; text-align: center; color: #FFF; background-color: #000; border-radius: 3px; }
section#course > div.Important_EventBanner > div.AD-BTN-Close:hover { cursor: pointer; }
section#course > div.EventAD { 
	width: 110px;
	display: block;
	position: fixed; 
	right: -20px; top: 100px; 
	z-index: 555; 
	transition: 0.3s; 
	animation-name: EventAD-M; 
    animation-duration: 5s; 
    animation-iteration-count: infinite; 
}
section#course > div.EventAD:hover { width: 150px; right: 25px; transition: 0.3s; animation-iteration-count: initial; animation-name: initial;  }

	/*MOV*/
	@keyframes EventAD-M {
	    0%  { right: -20px;  }
	    70%  { right: 25px;  }
	    1000%  { right:-20px;  }

	}


section#course > div.EventAD img { width: 100%; box-shadow: rgba(0,0,0,0.15) 0 0 10px 0; background-color: #FFF; border-radius: 5px; transition: 0.3s; }
section#course > div.EventAD img:hover { cursor: pointer; box-shadow: rgba(0,0,0,0.3) 0 0 50px 0; transition: 0.3s;  }


	@media (max-width: 1440px) {
		section#course div.BOX { height: 345px;}
		section#course > div.tab-content div.BOX div.Banner { height: 220px; }

		section#course > div#TOP-BAR { width: 52%; }
		section#course .nav-tabs { width: 414px;margin: 23px 0 0 1%; }


		/* Important_EventBanner */
		section#course > div.Important_EventBanner { width: 1156px; height: 308px;margin-bottom: 20px; }
		section#course > div.EventAD { width: 80px; }

	}
	@media (max-width: 1280px) {

		section#course > div#TOP-BAR div.BOX-TOP { font-size: 14px;}
		section#course div.BOX { height: 315px;}
		section#course > div.tab-content div.BOX div.Content h3 { font-size: 16px; }
		section#course > div.tab-content div.BOX div.Banner { height: 195px; }
		
	


		/* Important_EventBanner AWS */
		section#course > div.Important_EventBanner { width: 1026px; height: 273px; margin-bottom: 20px;}

	}
	@media (max-width: 1200px) {
		section#course > div#TOP-BAR div.BOX-TOP { height: 30px; font-size: 14px; line-height: 30px; }
		section#course > div#TOP-BAR div.BOX-TOP div.Circle { width: 35px; height: 30px; line-height: 30px; border-radius: 4px; margin: 0 8px 0 0; color: #FFF; font-size: 1.3em;  }

		section#course .nav-tabs > li { font-size: 15px; }
		section#course div.BOX { height: 290px;}
		section#course > div.tab-content div.BOX div.Banner { height: 170px; }
		section#course > div.tab-content div.BOX div.Content h3 { font-size: 15px }
		section#course > div.tab-content div.BOX div.Content p { font-size: 13px; }
		section#course div.TAB-BTN { width: 30px; height: 30px; line-height: 33px; font-size: 1.5em; }
		section#course div.TAB-BTN.btnNext { right: 1%; }
		section#course div.TAB-BTN.btnPrevious { left: 1%; }

		section#course .nav-tabs { width: 42%;margin: 23px 0 0 1%; }


		/* Important_EventBanner AWS */
		section#course > div.Important_EventBanner { width: 905px; height: 241px; }


	}
	@media (max-width: 1160px) {
		section#course .nav-tabs { width: 100%; margin: 10px 0; float: initial; clear: both; padding: 0; }
		section#course .nav-tabs > li { font-size: 17px; margin: 10px 1% 0px; }
		section#course div.BOX { /*height: auto;*/ width: 48%; margin: 10px 1%;  border-radius: 3px; /*clear: both;*/ float: left !important;  }
		section#course div.BOX:nth-child(1) { width: 98%; height: auto; margin: 10px 1% !important; clear: both; float: none !important; }
		section#course > div.tab-content div.BOX div.Banner { height: auto; }



		/* ��������s�վ�20201022 */
		section#course > div#TOP-BAR { display: block; }
		section#course > div#TOP-BAR div.BOX-TOP:nth-child(1){display: none;}
		section#course > div#TOP-BAR div.BOX-TOP:nth-child(2){display: none;}
		section#course > div#TOP-BAR div.BOX-TOP:nth-child(3){display: none;}
		section#course > div#TOP-BAR div.BOX-TOP:nth-child(4){display: none;}
		section#course > div#TOP-BAR div.BOX-TOP:nth-child(5){display: none;}
	
		section#course > div#TOP-BAR div.BOX-TOP { 
			height: 30px; 
			font-size: 20px;
			line-height: 30px;
		}

		section#course div.TAB-BTN { display: none; }

		/* Important_EventBanner AWS */
		section#course > div.Important_EventBanner { width: 100%; height: 190px; margin-top: 25px; }
	}

	@media (max-width: 800px) {


		/* Important_EventBanner AWS */
		section#course > div.Important_EventBanner { height: 140px; }
	}

	@media (max-width: 780px) {
		
	}

	/*iPad 1-~4 Gen Mini*/
	@media (max-width: 768px) {

	}

	/*Mobile Device Start*/
	@media (max-width: 599px) {
		section#course .nav-tabs { width: 100%; margin: 3px 0 3px 0; float: initial; padding: 0; clear: both; }
		section#course .nav-tabs > li { font-size: 16px; }
		section#course div.BOX { clear: both; width: 100%; height: auto !important; margin: 10px 0 !important; }
		section#course > div.tab-content div.BOX div.Banner { width: 100%; height: 200px; float: initial; }
		section#course > div.tab-content div.BOX div.Content { width: 100%; float: initial; }
		section#course > div.tab-content div.BOX div.Content h3 { font-size: 16px; }
		section#course > div.tab-content div.BOX div.Content p { font-size: 12px; }

		/* Important_EventBanner AWS */
		section#course > div.Important_EventBanner { height: 90px; }
	}






	/*??��????��?��????�設�?*/
	

	div#alert_notify { 
		width: 100%; height: 100%; 
		position: fixed; 
		top: 0; left: 0; 
		z-index: 99999; 
		background: rgba(108,130,135,0.85);  

	}
	div#alert_notify > div#alert_middle { 
		width: 800px; 
		background-color: #FFF; 
		margin: auto; 
		position: relative; 
		top: 80px; 
		padding: 25px;
		border-radius: 15px;
		border: solid 5px #EFEFED;
		box-shadow: rgba(0,0,0,0.2) 0 0 50px 5px;
	}

	div#alert_notify > div#alert_middle h1 { text-align: center; font-size: 28px; font-weight: 600; color: #555; }
	div#alert_notify > div#alert_middle h2 { 
		text-align: left; 
		font-size: 20px; 
		font-weight: 600; 
		color: #C33; 
		 
		padding: 0 0 9px 0; 
		clear: both;
	}

	div#alert_notify > div#alert_middle > div.BTN-Alert-Close { 
		width: 80px; height: 35px; line-height: 35px; 
		background-color: #999; 
		color: #FFF; 
		clear: both; 
		margin: 10px auto; 
		text-align: center;
		font-size: 16px;
		border-radius: 3px; transition: 0.2s;
	}
	div#alert_notify > div#alert_middle > div.BTN-Alert-Close:hover { background-color: #C33; cursor: pointer; transition: 0.2s; }

	div#important_msg { 
		 
		position: fixed; 
		left: 0; top: 100px; 
		font-size: 20px;
		padding: 15px 10px 15px 4px;
		background-color: #C33; 
		border-top-right-radius: 12px;
		border-bottom-right-radius: 12px;
		color: #FFF;
		writing-mode: vertical-lr;

		
		animation-name: Important_MSG; 
    	animation-duration: 1s; 
    	animation-iteration-count: infinite; 

	 }

	 div#important_msg:hover { cursor: pointer; transition: 0.3s; padding: 15px 10px 15px 24px;  }

	 /*MOV*/

		@keyframes Important_MSG {
		    0%  { background: #C33; }
		    50%  { background: #e55555;  }
		    100%  { background: #C33; }
		}


		@media (max-width: 900px) {
			div#alert_notify > div#alert_middle { width: 90%; } 
		}

		@media (max-width: 599px) {
			div#alert_notify > div#alert_middle { width: 95%; border: solid 2px #EFEFED; border-radius: 8px; } 
			div#alert_notify > div#alert_middle h1 { font-size: 20px; }
			div#alert_notify > div#alert_middle h2 { font-size: 15px; }
			div#alert_notify > div#alert_middle > div.BTN-Alert-Close { width: 60px; height: 25px; line-height: 25px; font-size: 13px; }

			div#important_msg { font-size: 14px; top: 80px; padding: 10px 6px 10px 3px; border-top-right-radius: 5px; border-bottom-right-radius: 5px; z-index: 99999; }
			div#important_msg:hover { padding: 10px 6px 10px 20px;  }


			section#course > div#TOP-BAR {
				width: 100%;
			}
			.nav > li > a { padding: 5px 8px; }
		}