@charset "utf-8";

@import url("reset.css");

@import url("loading.css");

/* ----------------------------------------------------------------------------------------------------------------*/

/* ---------------------------------->>> Main <<<------------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/



html { height:100% }

body { margin-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; -webkit-text-size-adjust:none; font-size:12px; overflow-y:scroll }

body, td, th { font-size:12px; font-family: Arial, "文泉驛正黑", "WenQuanYi Zen Hei", "儷黑 Pro", "Microsoft JhengHei", "新細明體", "PMingLiU", sans-serif; }

.iframe_ch { display:none }

.middle{ vertical-align:middle; }

.width100{ width:100%;}

.left{ text-align:left !important; }

.jq_hidden{ display:none; }



/*PageLoad*/

#wrapper { opacity: 0; -webkit-transition: opacity 0.5s ease-in; -moz-transition: opacity 0.5s ease-in; -o-transition: opacity 0.5s ease-in; -ms-transition: opacity 0.5s ease-in; transition: opacity 0.5s ease-in;}

#wrapper.load { opacity: 1; }



.overlay{ position:absolute; display:none; width:100%; height:100%; z-index:9; top:0; left:0; background-color: rgba(0,0,0, 0.5); transition: 0.5s; z-index:99; }





/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> Common <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/



@keyframes dropHeader {

  0% {

    transform: translateY(-50%);

  }

  100% {

    transform: translateY(0);

  }

}





#wrapper{ width:100%; position:relative; overflow:hidden; min-height:1000px; }



#header{ position:relative; max-width:1200px; height:85px; margin:0 auto; animation: 1s ease-out 0s 1 dropHeader; }

#header .logo{ position:absolute; top:10px; }

#header .nav1{ position:absolute; top:30px; right:0; letter-spacing:1px; color:#989898; }

#header .nav1 a{ color:#989898; }



#banner{ max-width:1200px; margin:0 auto; }

#banner .flexslider{ max-width:1200px; margin:5px auto; }



#menu{ max-width:1200px; margin:0 auto; text-align:center; overflow:hidden; }

#menu img{margin: 20px 7px 0 7px;text-align:center;display:inline-block;box-sizing: border-box;}



#mobile_menu{ display:none; margin:0 5px 0 20px;}

#hideMenu{ position:fixed; top:0; right:0; width:250px; overflow:hidden; display:none; }

#hideMenu .bTitle{width:100%; padding:20px 0; text-align:center; font-size:30px; background:#16bde0; color:#FFF; letter-spacing:5px;}



#hideMenu .nav2{ width:100%; height:25px; }

#hideMenu .nav2 div{ float:left; color:#16BDE0; font-size:12px; padding:5px; cursor:hand; cursor:pointer; margin:0 3.5px; text-decoration:underline; }



#hideMenu ul{ list-style:none; margin:0; padding:0; }

#hideMenu ul li{display:inline-block;width:100%;background:#fff;color:#0161d6;padding: 10px 0 10px 10px;font-size:16px;letter-spacing:1px;border-bottom:2px solid #FFF;cursor:hand;cursor:pointer;}

#hideMenu ul li::before{ content:"» ";}

#hideMenu ul li:hover{ background:#16bde0; color:#fff; -webkit-transition:.6s;-ms-transition:.6s;-moz-transition:.6s;}

#hideMenu ul li ul li{ color:#000;}

#hideMenu .nav3 li::before{ content:"　";}



#hideMenu div{ font-size:18px; font-weight:normal; letter-spacing:1px; margin-bottom:5px; }

#hideMenu div a{ text-decoration:none; color:#000;}

#hideMenu div a:hover{ text-decoration:underline;}



#container{ max-width:1250px; margin:30px auto; padding:0 10px; box-sizing: border-box; overflow:hidden; }

#container .contain-left{ float:left; max-width:240px; width:20%; margin:0 25px; box-sizing: border-box; }

#submenu{ position:relative; max-width:200px; width:100%; background:url(../../images/menu-bg.jpg) repeat; min-height:500px; padding:30px 0 0 0; -webkit-border-radius:3px; -moz-border-radius:3px; border-radius:3px; }

#submenu .submenu-title{ background:#003578; color:#FFF; height:25px; line-height:25px; letter-spacing:2px; font-size:15px; box-sizing:border-box; padding:0 0 0 30px;}

#submenu .submenu-left{ position:absolute; top:23px; left:-7px; }

#submenu .submenu-right{ position:absolute; top:24px; right:-5px; }

#submenu .submenu-items ul{ list-style:none; margin:0; padding:40px 0 0 30px; }

#submenu .submenu-items ul li{ color:#ffffff; text-decoration:none; font-size:15px; padding:10px 0; cursor:hand; cursor:pointer; letter-spacing:1px; }

#submenu .submenu-items ul li::before{ content:url(../../images/subnav-items.png); padding-right:5px; vertical-align:middle; }

#submenu .submenu-items ul li:hover{ color:#FBEA38; text-decoration:underline; }

#submenu .submenu-items ul li.on{ color:#FBEA38; text-decoration:underline; font-size:15px; padding:10px 0; cursor:hand; cursor:pointer; letter-spacing:1px; }



#submenu .abgne-news-scroll { width: 200px; height: 500px; overflow: hidden; position: relative; margin-top:50px; }

#submenu .abgne-news-scroll ul, li { margin: 0; padding: 0; list-style: none; }

#submenu .abgne-news-scroll ul { position: absolute; }

#submenu .abgne-news-scroll li { height: 65px; padding: 5px 0 5px 10px; }


#container .contain-right{ float:left; width:75%; overflow:hidden; box-sizing: border-box; }

#container .contain-right .contain-title{ position:relative; color:#095CA2; letter-spacing:1px; font-size:20px; text-shadow:1px 1px #EBEBEB; border-bottom:1px solid #BFBFBF; padding:0 0 5px 50px; margin:10px 0 30px 0; }

#container .contain-right .contain-title span{ font-size:12px; color:#70D6ED; padding:0 0 0 5px; }

#container .contain-right .contain-title img{ position:absolute; top:-8px; left:0; }



/*課程*/

#container .course_container{text-align:center;width:100%;overflow:hidden;vertical-align: top;}

#container .course-info-item{margin:20px 5px 0 5px;text-align:center;display:inline-block;box-sizing: border-box;width:33%;max-width:295px;min-height:350px;vertical-align: top;border:1px solid #D6D6D6;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}

#container .course-info-item:hover{ box-shadow:4px 4px 12px -2px rgba(20%,20%,40%,0.2); border:1px solid #16BDE1; }

#container .course-info-item .course-info-title{ position:relative; background:#16BDE1;border-top-left-radius:5px; border-top-right-radius:5px; box-sizing:border-box; padding:10px 10px 10px 70px; color:#4D00B9; font-size:16px; letter-spacing:1px; line-height:22px; text-align:left; }

#container .course-info-item .course-info-title img{ position:absolute; top:5px; left:5px; }

#container .course-info-item .course-info-content{ box-sizing: border-box; padding:10px; color:#535454; text-align:left; font-size:14px; letter-spacing:1px; line-height:25px; }

#container .course-info-item .course-info-date{ box-sizing: border-box; margin:10px 10px; padding:10px; color:#ff873d; letter-spacing:1px; text-align:left; border-top:1px solid #e9e9e9; border-bottom:1px solid #e9e9e9; }

#container .course-info-item .course-info-btn{ box-sizing: border-box; margin:10px 10px; color:#FFF; width:80px; background:#636363; padding:6px 8px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; cursor:hand; cursor:pointer; }

#container .course-detail{ box-sizing:border-box; padding:10px 50px; }

#container .course-detail-title{ font-size:18px; color:#484848; letter-spacing:1px; font-weight:bold; margin-bottom:50px; line-height:22px; }

#container .course-detail-item{ background:#f2f2f2; color:#0078ff; font-weight:bold; letter-spacing:1px; font-size:15px; padding:5px 10px; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; }

#container .course-detail-content{ color:#484848; font-size:15px; letter-spacing:1px; line-height:25px; padding:20px 5px;}



/*討論區*/

#container .forum-title{width:100%; overflow:hidden; padding:5px 0; color:#0078ff; background:#f2f2f2; -webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;}

#container .forum-title-items{ float:left; text-align:center; font-size:15px; letter-spacing:1px; }

#container .forum-content{width:100%; overflow:hidden; padding:5px 0; color:#0078ff; border-bottom:1px solid #ebebeb; }

#container .forum-content-items{ float:left; text-align:center; padding:10px 0; color:#535454; font-size:15px; letter-spacing:1px; line-height:22px; }

#container .forum-content-items a{ color:#535454; text-decoration:none; }

#container .forum-content-items a:hover{ color:#0078ff; text-decoration:underline; }

#container .forum-title .column-title1{ width:30%; box-sizing:border-box; padding-right:5px; }

#container .forum-title .column-title2{ width:60%;}

#container .forum-title .column-title3{ width:20%;}

#container .forum-title .column-title4{ width:65%;}

#container .forum-title .column-title5{ width:100%;}

#container .forum-content .column-content1{ width:30%; color:#909090; box-sizing:border-box; padding-right:5px; font-size:14px; }

#container .forum-content .column-content2{ width:60%; text-align:left;}

#container .forum-content .column-content3{ width:20%;}

#container .forum-content .column-content4{ width:65%; text-align:left;}

#container .forum-content .column-content5{ width:100%; text-align:left;}





.message_text_a { border:1px solid #CCC; padding:5px; margin:5px; }

.message_text_b { color:#006 }

.message_text_c { line-height:20px; letter-spacing:1px; padding:10px 0; }

.message_text_d { line-height:20px; color: #666; font-size:11px; letter-spacing:1px; padding:5px 0; }



/*連絡我們*/

#contact{ width: 100%; }

#contact .info{margin-top:20px; font-size:14px; letter-spacing:2px; color:#535454; font-size:15px;}

#contact .title{display:inline-block; padding-top:100px; font-size:24px; font-weight:bold; color:#00A53C; width:auto;}

#contact .line{height:1px; border-bottom:1px solid #D6D6D6;}

#contact .item{color:#333; font-size:18px;  font-weight:bold; padding:30px 0;}

#contact span{display:inline-block; background:#0078ff; color: #fff;line-height:30px; height:30px;font-size:14px;letter-spacing:1px;width: 75px;margin: 5px 20px 0 0;text-align: center;}

#contact .ctitle{ font-size:14px; color:#8c8b8b; letter-spacing:1px; height:50px; width:150px;}

#contact .input1{ max-width:560px; width:100%; height:25px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border:1px solid #d8d4d4; padding-left:10px; color:#666; }

#contact .input2{ max-width:260px; width:100%; height:25px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border:1px solid #d8d4d4; padding-left:10px; color:#666; }

#contact .textarea{ max-width:560px; width:98%; height:200px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; border:1px solid #d8d4d4; padding:10px; color:#666; }

#contact #cancel_btn{ cursor:pointer; cursor:hand; }





#container .course-more{width:100%; margin:30px 0; padding:30px 0; text-align:center; cursor:pointer; cursor:hand; }

#container .course-more span{background:#15b7df; color:#fff; width:103px; height:103px; line-height:103px; font-size:18px; letter-spacing:1px; display:inline-block; -webkit-border-radius: 50px;-moz-border-radius: 50px;border-radius: 50px; cursor:hand; cursor:pointer; }



#footer{ width:100%; margin:0 auto; letter-spacing:1px; background:#ECEAEB; }

#footer .footer-wrapper{ background:url(../../images/footer-bg.png) no-repeat bottom left; max-width:1200px; text-align:left; margin:0 auto; min-height:145px; overflow:hidden; }

#footer .footer-contain{ padding-left:280px;}

#footer .footer-contain-left{ padding-top:20px; float:left;}

#footer .footer-contain-right{ padding-top:20px; float:right; color:#484848; margin-right:30px; line-height:23px; font-size:13px; letter-spacing:1px; }

#copyright{ width:100%; margin:0 auto; }

#copyright .copyright-wrapper{ background:url(../../images/copyright-bg.png) no-repeat; padding:8px 0; max-width:1200px; text-align:center; margin:0 auto; color:#898989; letter-spacing:1px; }

#copyright .copyright-wrapper a{ color:#898989; text-decoration:none; }

#copyright .copyright-wrapper a:hover{ text-decoration:underline; }



@media screen and (max-width: 1270px) {



	#container .course-info-item{ max-width:none; min-height:inherit; width:48%; }

	#container .course-info-item .course-info-title img{ top:-10px; }



}



@media screen and (max-width: 1223px) {



	#menu img{ width:18.5% }

	#container .contain-right{ width:70%; }



}



@media screen and (max-width: 1023px) {



	#mobile_menu{ display:inline-block;}

	#menu{ display:none; }

	#container .contain-left{ display:none; }

	#container .contain-right{ width:100%; }

	#container .course-info-item{ width:auto; max-width:295px; width:48%; }

	

	#footer .footer-wrapper{ background:none; }

	#footer .footer-contain{ padding-left:20px; }

	#footer .footer-contain-left{ float:none; }

	#footer .footer-contain-right{ float:none; }

	#copyright .copyright-wrapper{ background:none; padding-left:20px; text-align:left; line-height:20px; }

	



}



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



	.none768px{ display:none; }

	.flex-control-nav{ display:none }	

	#container .course-info-item{ width:95%; max-width:none; }

	#container .course-detail{ padding:0;}

	#contact_table{ width:90%;}



}



@media screen and (max-width: 480px) {



	#header .logo{ width:80%; }

	#header{ height:70px; }

	

	#container .forum-content .column-title1 , #container .forum-content .column-content1{ width:30%; min-width:90px; }

	#container .forum-content .column-title2 , #container .forum-content .column-content2{ width:75%; }

	.column-title3 , .column-content3{ display:none; }

	#contact_table{ width:80%;}

	#contact .ctitle{ width:60px; }

	#contact .info{ font-size:12px;}

	

}





/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> forum <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/









/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> CSS Animation <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/



/*

* { -webkit-transition: all 0.5s; }

*/



@-webkit-keyframes swing

{

	15%

	{

		-webkit-transform: translateX(5px);

		transform: translateX(5px);

	}

	

	30%

	{

		-webkit-transform: translateX(-5px);

		transform: translateX(-5px);

	}

	

	50%

	{

		-webkit-transform: translateX(3px);

		transform: translateX(3px);

	}

	

	65%

	{

		-webkit-transform: translateX(-3px);

		transform: translateX(-3px);

	}

	

	80%

	{

		-webkit-transform: translateX(2px);

		transform: translateX(2px);

	}

	

	100%

	{

		-webkit-transform: translateX(0);

		transform: translateX(0);

	}

}



@keyframes swing

{

	15%

	{

		-webkit-transform: translateX(5px);

		transform: translateX(5px);

	}

	

	30%

	{

		-webkit-transform: translateX(-5px);

		transform: translateX(-5px);

	}

	

	50%

	{

		-webkit-transform: translateX(3px);

		transform: translateX(3px);

	}

	

	65%

	{

		-webkit-transform: translateX(-3px);

		transform: translateX(-3px);

	}

	

	80%

	{

		-webkit-transform: translateX(2px);

		transform: translateX(2px);

	}

	

	100%

	{

		-webkit-transform: translateX(0);

		transform: translateX(0);

	}

}



.swing:hover{

  		-webkit-animation: swing 1s ease;

        animation: swing 1s ease;

        -webkit-animation-iteration-count: 1;

        animation-iteration-count: 1;	

}



/* ----------------------------------------------------------------------------------------------------------------*/

/* ------------------------------>>> Loadaction <<<----------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/



.Loadaction_Box { position: fixed; left: 0px; top:0px; background-image:url(../../images/action_bg.png); z-index:100000000 }

.Loadaction { position: fixed; padding-top:5px; width: 220px; height: 45px; left: 42%; top: 42%; background-image:url(../../images/action_bg.png); -webkit-border-radius: 2px; -moz-border-radius: 2px; border-radius: 2px; }

.Actionupload_Text { font-size:13px; color:#FFFFFF; height:20px; }



@media screen and (max-width: 1023px) {

	.Loadaction { margin-left:-80px; }

}



/* ----------------------------------------------------------------------------------------------------------------*/

/* ---------------------------------->>> pagelink <<<--------------------------------------------------------------*/

/* ----------------------------------------------------------------------------------------------------------------*/

#page{  text-align:center; clear:both; /*position:absolute; bottom:10px; left:50%*/ }

#page ul{ list-style:none; margin:15px auto; padding:0; display:inline-block;}

#page ul li{ width:20px; height:20px; color:#999; line-height:23px; float:left; margin-right:7px; border:1px #ccc solid;  transition:0.7s; }

#page ul li a{ color:inherit; text-decoration:none; display:inline-block; width:20px; height:20px;}

#page ul li:hover{ background:#16BDE1;}

#page ul li:hover a{ color:#fff;}

#page ul li.ch{ background:#16BDE1; color:#fff; border:1px solid #16BDE1;}