@import url("reset.css");

body {
	background:#CCC url(myimages/new_bg.gif) no-repeat fixed center bottom;
	font-family:"微軟正黑體", Arial, Helvetica, sans-serif;
}
/* =============================================================================== */
#TOPTOP {
	width:980px;
	height:31px;
	margin:2px auto;
	background-image:url(myimages/toptop_bg.gif);
	position:relative;
}
#TOPTOP h5{
	text-indent:-9999px;
}

#TOPTOP ul.CONTACT{
	font:13px/28px Verdana, Geneva, sans-serif;
	text-align:right;
	color:#EEE;
	padding-right:11px;
	position:absolute;
	right:5px;
	top:0px;
}
#TOPTOP ul.CONTACT li{
	display:inline-block;
	margin-right:5px;
	background:url(myimages/contact_icons.png) no-repeat 0px 2px;
	text-indent:28px;
}

#TOPTOP ul.CONTACT li.TEL{ background-position:0px 2px;}
#TOPTOP ul.CONTACT li.MOB{ background-position:0px -23px;}
#TOPTOP ul.CONTACT li.MAIL{ background-position:0px -48px; text-indent:30px;}

#TOPTOP ul.CONTACT li a{
	color:#EEE;
	text-decoration:none;
}

#TOPTOP #BTN{
	display: none;
}

/* =============================================================================== */
#TITLETITLE {
	width:980px;
	height:106px;
	margin:0 auto;
	background-image:url(myimages/title.jpg);
	clear:both;
}
#TITLETITLE h2 {
	text-indent:-9999px;
	display:block;
	width:320px;
	height:106px;
	background-image:url(myimages/logo.jpg);
}
#TITLETITLE h2 a {
	display:block;
	width:320px;
	height:106px;
	background-image:url(myimages/logo.jpg);
}
/* =============================================================================== */
#NAVNAV {
	width:980px;
	height:45px;
	margin:0 auto;
	background-image:url(myimages/bgbg.gif);
}
#NAVNAV ul {
	padding-left:2px;
}
#NAVNAV li {
	float:left;
	padding:0 1px;
}
#NAVNAV li a {
	display:block;
	width:120px;
	line-height:40px;
	background-image:url(myimages/btn.jpg);
	text-align:center;
	background-position:bottom;
	font-size:14px;
	text-decoration:none;
	color:#000000;
	letter-spacing:2px;
	font-weight:normal;
}
#NAVNAV li a:hover {
	line-height:45px;
	color:#FF0000;
}


/* =============================================================================== */
#MAINMAIN {
	width:980px;
	margin:0 auto;
	background-image:url(myimages/bgbg.gif);
	position:relative;
	padding-top:20px;
	padding-bottom:25px;
}
#MAINMAIN #ICON {
	float:left;
	width:130px;
	position:absolute;
	top:20px;
}
#MAINMAIN #ICON h2{
	width:80px;
	height:400px;
	margin:0 auto;
	background-image:url(myimages/free_course.gif);
	font-size:11px;
	text-indent:-9999px;
}
#MAINMAIN #CONTENT {
	float:right;
	width:850px;
}

#MAINMAIN #ICON li {
	width:100px;
	margin:0 auto;
}
#MAINMAIN #ICON li a {
	display:block;
	width:80px;
	height:70px;
	background-repeat:no-repeat;
	text-indent:-9999px;
}
#MAINMAIN #ICON li a:hover {
	background-position:10px top;
}
#MAINMAIN #ICON li.PS a {
	background-image:url(myimages/ps.jpg);
}
#MAINMAIN #CONTENT .COURSE h3.PS2 a {
	background-image: url(myimages/ps_title_2.jpg);
}
#MAINMAIN #ICON li.AI a {
	background-image:url(myimages/ai.jpg);
}
#MAINMAIN #ICON li.FL a {
	background-image:url(myimages/fl.jpg);
}
#MAINMAIN #ICON li.DW a {
	background-image:url(myimages/dw.jpg);
}
#MAINMAIN #ICON li.CSS a {
	background-image:url(myimages/css.jpg);
}
#MAINMAIN #ICON li.JS a {
	background-image:url(myimages/js.jpg);
}
#MAINMAIN #ICON li.APP a {
	background-image:url(myimages/app.jpg);
}
#MAINMAIN #ICON li.RWD a {
	background-image:url(myimages/rwd.jpg);
}

#MAINMAIN #ICON li.PHP a {
	background-image:url(myimages/php.jpg);
}

#MAINMAIN #CONTENT .COURSE {
	width:830px;
	margin:0 auto;
	clear:both;
	margin-bottom:10px;
}
#MAINMAIN #CONTENT .COURSE h3 a {
	display:block;
	width:830px;
	height:40px;
	font-size:16px;
	line-height:40px;
	text-indent:45px;
	color:#FFF;
	letter-spacing:2px;	
	clear:both;
	text-decoration:none;
	text-shadow:1px 1px 1px #111;
}
#MAINMAIN #CONTENT .COURSE h3 a:hover {
	color:#9FF;
}
#MAINMAIN #CONTENT .COURSE h3.PS a {
	background-image:url(myimages/ps_title.jpg);
}
#MAINMAIN #CONTENT .COURSE h3.AI a {
	background-image:url(myimages/ai_title.jpg);
}
#MAINMAIN #CONTENT .COURSE h3.FL a {
	background-image:url(myimages/fl_title.jpg);
}
#MAINMAIN #CONTENT .COURSE h3.DW a {
	background-image:url(myimages/dw_title.jpg);
}
#MAINMAIN #CONTENT .COURSE h3.CSS a {
	background-image:url(myimages/css_title.jpg);
}
#MAINMAIN #CONTENT .COURSE h3.JS a {
	background-image:url(myimages/js_title.jpg);
}
#MAINMAIN #CONTENT .COURSE h3.PHP a {
	background-image:url(myimages/php_title.jpg);
}
#MAINMAIN #CONTENT .COURSE h3.WP a {
	background-image:url(myimages/wp_title.jpg);
}
#MAINMAIN #CONTENT .COURSE h3.ANDROID a {
	background-image:url(myimages/android_title.jpg);
}
#MAINMAIN #CONTENT .COURSE h3.MOBILE a {
	background-image:url(myimages/mobile_web_title.jpg);
}
#MAINMAIN #CONTENT .COURSE h3.GIT a {
	background-image:url(myimages/git_title.gif);
}
#MAINMAIN #CONTENT .COURSE .COURSE_BOX {
	width:830px;
	background-image:url(myimages/course_box.gif);
	background-position:left bottom;
	padding-bottom:12px;
	overflow:hidden;
}
#MAINMAIN #CONTENT .COURSE .COURSE_BOX h4 {
	width:830px;
	height:15px;
	background-image:url(myimages/course_box.gif);
	line-height:15px;
	font-size:12px;
	text-indent:-9999px;
}
#MAINMAIN #CONTENT .COURSE .COURSE_BOX ul {
	width:800px;
	margin:0 auto;
	overflow:hidden;
}
#MAINMAIN #CONTENT .COURSE .COURSE_BOX li {
	float:left;
}
#MAINMAIN #CONTENT .COURSE .COURSE_BOX ul.SECOND {
	margin-top:10px;
	padding-top:5px;
	border-top:1px dashed #CCC;
}
#MAINMAIN #CONTENT .COURSE .COURSE_BOX li.DATE {
	display:block;
	width:200px;
	height:25px;
	line-height:24px;
	background-image:url(myimages/01.gif);
	font-size:14px;
	padding-left:115px;
	letter-spacing:1px;
	font-weight:bold;
}
#MAINMAIN #CONTENT .COURSE .COURSE_BOX li.TIME {
	display:block;
	width:285px;
	height:25px;
	line-height:24px;
	background-image:url(myimages/02.gif);
	font-size:14px;
	padding-left:60px;
	letter-spacing:2px;
	font-weight:bold;
}
#MAINMAIN #CONTENT .COURSE .COURSE_BOX li.MORE a {
	display:block;
	width:85px;
	height:25px;
	line-height:25px;
	background-image:url(myimages/more.gif);
	font-size:14px;
	padding-left:20px;
	letter-spacing:2px;
	text-decoration:none;
}
#MAINMAIN #CONTENT .COURSE .COURSE_BOX li.MORE a:hover {
	background-position:left bottom;
	color:#F00;
}
/* =============================================================================== */

#MAINMAIN h1 {
	width:520px;
	height:90px;
	margin:0 auto;
	background-image:url(myimages/css.gif);
	text-indent:-9999px;
}

#MAINMAIN .TIME{
	width:800px;
	height:150px;
	margin:0 auto;
}

/* ==首頁的圖框=========================== */

#MAINMAIN .box{ width:320px; height:200px; float:left; background-image:url(../myimages/border.jpg); margin-left:3px; margin-bottom:10px; position:relative;}
#MAINMAIN .box:hover{ background-image:url(../myimages/border2.jpg);}
#MAINMAIN .box h3{ position:absolute; top:10px; right:25px; font-size:12px; color:#666666;font-family:Arial,"微軟正黑體"; font-weight:normal;}
#MAINMAIN .box h2{ position:absolute; top:33px; left:20px; font-size:14px; font-family:Arial,"微軟正黑體"; line-height:22px; letter-spacing:1px;}
#MAINMAIN .box img{ position:absolute; top:61px; left:195px;}
#MAINMAIN .box p{ position:absolute; top:58px; font-size:12px; padding-left:20px; padding-right:130px;pxfont-family:Arial; line-height:18px; letter-spacing:1px; color:#666666; text-align:justify;}
#MAINMAIN .box h2 a{ color:#000000;text-decoration:none;}
#MAINMAIN .box a{ color:#0000FF}
#MAINMAIN .box a:hover{ color:#FF0000;}
	
/* =============================================================================== */
#FOOTFOOT {
	clear:both;
	width:980px;
	margin:0 auto;
	background-image:url(myimages/bgbg.gif);
	text-align:center;
}
#FOOTFOOT h2 {
	text-indent:-9999px;
}
#FOOTFOOT h2 a {
	display:block;
	width:980px;
	height:41px;
	background-image:url(myimages/foot.gif);
}
#FOOTFOOT p {
	color:#006699;
	font-size:11px;
	letter-spacing:2px;
}
#FOOTFOOT a {
	color:#006699;
	font-size:13px;
	letter-spacing:2px;
}
#FOOTFOOT a:hover {
	color:#FF0000;
	text-decoration:none;
}
#FOOTFOOT h6 {
	font-size:13px;
	letter-spacing:1px;
	color:#444444;
	line-height:25px;
	font-weight:normal;
}
#FOOTFOOT h5 {
	font-size:13px;
	letter-spacing:1px;
	color:#444444;
	line-height:25px;
	font-weight:normal;
}


br.clearfloat {
	clear:both;
	height:0;
	font-size: 1px;
	line-height: 0px;
}

/* ==手機版型====================================== */

@media screen and ( max-width:667px ){
	
	html, body {
		background:#F2F2F2 none no-repeat;
		font-family:"微軟正黑體", Arial, Helvetica, sans-serif;
		-webkit-text-size-adjust:none;
		width: 100%;
		min-height: 100%;
	}
	/* =============================================================================== */
	#TOPTOP {
		width:100%;
		height:40px;
		margin:0 auto;
		background-image:none;
		background-color:#344d64;
		text-indent:40px;
		position: fixed;
		top: 0;
		z-index: 888;
	}
	#TOPTOP h5{
		text-indent:15px;
		line-height:40px;
		color:#FFF;
		font-size:13px;
	}
	#TOPTOP ul.CONTACT{
		display: none;
	}

	#TOPTOP #BTN{
		display: block;
		width: 40px;
		height: 30px;
		background-size: 40px 30px;
		background-image:url(myimages/s-btn.png);
		text-indent: -9999px;
		position: absolute;
		right: 10px;
		top: 5px;
		cursor: pointer;
	}
	
	/* =============================================================================== */
	#TITLETITLE {
		width:100%;
		height:106px;
		margin:0 auto;
		background-image:url(myimages/title.jpg);
		clear:both;
		margin-top: 31px;
	}
	#TITLETITLE h2 {
		text-indent:-9999px;
		display:block;
		width:320px;
		height:106px;
		background-image:url(myimages/logo.jpg);
	}
	#TITLETITLE h2 a {
		display:none;
	}
	/* =============================================================================== */
	#NAVNAV {
		width:100%;
		height:100%;
		background-image:none;
		background-color: rgba(0,0,0,0.7);
		position:fixed;
		top:0;
		z-index: 999;
		display: none;
	}
	#NAVNAV ul {
		padding-left:0px;
		width: 260px;
		height: 360px;
		background-color: #FFF;
		position: absolute;
		top: 50%;
		left: 50%;
		margin-left: -130px;
		margin-top: -180px;
		box-shadow: 0px 0px 25px #000;
	}
	#NAVNAV li {
		float:none;
		padding:0;
		clear: both;
	}
	
	@font-face{
		font-family:SOSA;
		src:url(/course/sosa.ttf);
	}
	
	#NAVNAV li:before {
		content:"l";
		font-size:25px;
		line-height:44px;
		float:left;
		color:#FFF;
		font-family:SOSA;
		text-indent:20px;
		text-shadow:0px 0px 5px #666666;
	}
	#NAVNAV li a {
		display:block;
		width:100%;
		line-height:44px;
		background-image:none;
		text-align:left;
		text-indent: 10px;
		font-size:15px;
		text-decoration:none;
		color:#000000;
		letter-spacing:2px;
		font-weight:normal;
		background-color: #FFF;
		border: 1px solid #EEE;
		margin-bottom: -1px;
	}
	#NAVNAV li a:hover {
		line-height:44px;
		color:#FF0000;
	}

	#NAVNAV li a:after{
		content:"›";
		font-family:Verdana, Geneva, sans-serif;
		font-size:20px;
		color:#666;
		text-shadow:0px 1px 1px #111;
		margin-right: 10px;
		line-height:44px;
		float: right;
	} 

	/* =============================================================================== */
	#MAINMAIN {
		width:100%;
		background-image:none;
		background-color:#FFF;
		position:relative;
		padding-top:20px;
		padding-bottom:25px;
	}
	#MAINMAIN #ICON {
		display:none;
		position:absolute;
		top:0;
	}
	
	#MAINMAIN #CONTENT {
		float:none;
		width:100%;
	}
	
	#MAINMAIN #CONTENT .COURSE {
		width:100%;
		clear:both;
		margin-bottom:10px;
	}
	#MAINMAIN #CONTENT .COURSE h3 a {
		display:block;
		width:100%;
		height:40px;
		font-size:16px;
		line-height:40px;
		text-indent:45px;
		color:#FFF;
		letter-spacing:2px;	
		clear:both;
		text-decoration:none;
		text-shadow:1px 1px 1px #111;
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis;
	}
	#MAINMAIN #CONTENT .COURSE h3 a:hover {
		color:#9FF;
	}
	#MAINMAIN #CONTENT .COURSE h3.PS a {
		background-image:url(myimages/ps_title.jpg);
	}
	#MAINMAIN #CONTENT .COURSE h3.AI a {
		background-image:url(myimages/ai_title.jpg);
	}
	#MAINMAIN #CONTENT .COURSE h3.FL a {
		background-image:url(myimages/fl_title.jpg);
	}
	#MAINMAIN #CONTENT .COURSE h3.DW a {
		background-image:url(myimages/dw_title.jpg);
	}
	#MAINMAIN #CONTENT .COURSE h3.CSS a {
		background-image:url(myimages/css_title.jpg);
	}
	#MAINMAIN #CONTENT .COURSE h3.JS a {
		background-image:url(myimages/js_title.jpg);
	}
	#MAINMAIN #CONTENT .COURSE h3.PHP a {
		background-image:url(myimages/php_title.jpg);
	}
	#MAINMAIN #CONTENT .COURSE h3.WP a {
		background-image:url(myimages/wp_title.jpg);
	}
	#MAINMAIN #CONTENT .COURSE h3.ANDROID a {
		background-image:url(myimages/android_title.jpg);
	}
	#MAINMAIN #CONTENT .COURSE h3.MOBILE a {
		background-image:url(myimages/mobile_web_title.jpg);
	}
	#MAINMAIN #CONTENT .COURSE .COURSE_BOX {
		width:100%;
		background-image:url(myimages/course_box_2.gif);
		background-size: 100% auto;
		background-position:left bottom;
		padding-bottom:15px;
		overflow:hidden;
	}
	#MAINMAIN #CONTENT .COURSE .COURSE_BOX h4 {
		width:100%;
		height:15px;
		background-image:url(myimages/course_box_2.gif);
		background-size: 100% auto;
		line-height:15px;
		font-size:12px;
		text-indent:-9999px;
	}
	#MAINMAIN #CONTENT .COURSE .COURSE_BOX ul {
		width:80%;
		margin:0 auto;
		overflow:hidden;
		text-align:center;
	}
	#MAINMAIN #CONTENT .COURSE .COURSE_BOX ul.SECOND {
		margin-top:5px;
		padding-top:5px;
		border-top:1px dashed #CCC;
	}
	
	#MAINMAIN #CONTENT .COURSE .COURSE_BOX li {
		float:none;
		padding-left:0px;
	}
	#MAINMAIN #CONTENT .COURSE .COURSE_BOX li.DATE {
		display:inline;
		line-height:30px;
		background-image:none;
		font-size:15px;
		padding-left:0px;
		letter-spacing:1px;
		font-weight:bold;
	}
	#MAINMAIN #CONTENT .COURSE .COURSE_BOX li.TIME {
		display:inline;
		line-height:30px;
		background-image:none;
		font-size:15px;
		padding-left:5px;
		letter-spacing:2px;
		font-weight:bold;
	}
	#MAINMAIN #CONTENT .COURSE .COURSE_BOX li.MORE a {
		display:block;
		width:100%;
		height:35px;
		line-height:35px;
		background-image:none;
		background-color:#F5F5F5;
		box-shadow: inset 0px 0px 1px #DDD;
		color:#000;
		text-align:center;
		font-size:15px;
		padding-left:0px;
		letter-spacing:2px;
		text-decoration:none;
		clear:both;
		border-radius: 10px;
		margin-bottom: 10px;
	}
	#MAINMAIN #CONTENT .COURSE .COURSE_BOX li.MORE a:hover {
		background-position:left bottom;
		color:#F00;
		box-shadow: inset 1px 1px 25px #ccc;
	}

	/* ==首頁的圖框=========================== */

	#MAINMAIN .box{ width:320px; height:200px; float:none; background-image:url(../myimages/border.jpg); margin:0 auto ; margin-bottom:10px; position:relative;}

	@media screen and (orientation:landscape){
		#MAINMAIN .box{ float: left;}
	}

	/* =============================================================================== */
	
	#MAINMAIN h1 {
		width:520px;
		height:90px;
		margin:0 auto;
		background-image:url(myimages/css.gif);
		text-indent:-9999px;
	}
	
	#MAINMAIN .TIME{
		width:800px;
		height:150px;
		margin:0 auto;
	}
		
		
	/* =============================================================================== */
	#FOOTFOOT {		
		width:100%;
		background-color: #FFF;
		background-image:none;
		text-align:left;
		clear:both;
		-webkit-box-sizing:border-box;
		-moz-box-sizing:border-box;
		box-sizing:border-box;
		
	}
	
	#FOOTFOOT h2 a {
		display:block;
		width:100%;
		height:41px;
		background-image:url(myimages/foot.gif);
		background-position: -10px 0px;
		text-indent:-9999px;
	}
	#FOOTFOOT p {
		color:#006699;
		font-size:11px;
		letter-spacing:0px;
		padding: 0 20px;
	}
	#FOOTFOOT a {
		color:#006699;
		font-size:13px;
		letter-spacing:0px;
	}
	#FOOTFOOT a:hover {
		color:#FF0000;
		text-decoration:none;
	}
	#FOOTFOOT h6 {
		font-size:13px;
		letter-spacing:0px;
		color:#444444;
		line-height:25px;
		font-weight:normal;
		padding: 0 20px;
	}
	#FOOTFOOT h5 {
		font-size:13px;
		letter-spacing:0px;
		color:#444444;
		line-height:25px;
		font-weight:normal;
		text-align: center;
	}
}