@import url("./css/reset.css");
/***
Index
=================
1. General Styles
2. Header
2.1. Top Navigation
2.2. Navigation

3. Featured Section
4. Main Section

5. Content&Sidebar 

6. Footer Section
6.1. Footer top
6.2. Footer
6.3. Footer bottom
7. Teacher photo
=================
***/
/***     1. General Styles     ***/
body {color: #595757;background-color: #f4f4f4;background-image: url('../images/bg.gif');background-repeat: repeat-x;font-size: 12px;line-height: 18px;margin-top: 0}
a {color:#595757;text-decoration:none;}
a:hover { text-decoration:underline; }
h1 {color: #ff802d;text-decoration: none;font-weight: bold;font-size: 15px;font-family: Arial, Helvetica, sans-serif;text-align: right;background-image: url('../images/h1.gif');background-repeat: no-repeat;line-height: 20px;height: 40px;padding-top: 10px;padding-right: 5px;} 
h2 {text-transform:none;color: #ff802d;text-decoration: none;font-weight: normal;font-size: 15px;background-image: url('../images/content.gif');background-repeat: no-repeat;background-position: left top;height: 30px;line-height: 30px;padding-left: 20px;}
p {margin-top: 10px;margin-bottom: 10px;margin-left: 15px;margin-right: 10px;}
h3 {font-size: 15px;color: #ff802d;font-family: "微軟正黑體", "新細明體";text-decoration: none;line-height: 20px;} 
h4 {font-size: 22px;font-weight: bold;color: #f46000;font-family: "Arial", " Helvetica", "sans-serif","微軟正黑體", "新細明體";text-decoration: none;line-height: 28px;margin: 1.5em 0 .5em;}
.content {font-size: 12px;line-height: 18px;color: #595757;}
.content-english {font-size: 12px;line-height: 18px;color: #595757;font-family: Arial, Helvetica, sans-serif;}
.teachername-english {font-size: 15px;line-height: 20px;color: #595757;font-family: Arial, Helvetica, sans-serif;font-weight: bold;}
.teachername {font-size: 15px;line-height: 20px;color: #595757;font-weight: bold;}
.title {font-size: 15px;line-height: 22px;color: #595757;font-family: "微軟正黑體", "新細明體";}
.writeword {font-size: 12px;line-height: 18px;color: #fff;}
p {font-size: 12px;line-height: 18px;}
.line {clear: both;border-bottom: 1px solid #ddd;margin-top: 25px;margin-bottom: 40px;}
/***     2. Header     ***/
#header-wrapper {height:200px;background-image: url('../images/title-bg.gif');background-repeat: no-repeat;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;background-position: center top;}
#header { width:1000px; margin:0 auto; position:relative; z-index:2; }
/*     2.1.Top Navigation     */
#top {padding-top: 8px;padding-right: 6px;padding-bottom: 0;padding-left: 0px;text-align: right;}
#top a {font-size: 12px;color: #595757;text-decoration: none;}
#logo { position:absolute; top:30px; left:0; }
#header-banner { position:absolute; right:0; top:41px; }
/* ¾ãÅé³]¸m*/
#navigation-wrapper {position:absolute;width:1000px;left:0;top: 165px;}
.menu {height:35px;background-image: url('../images/tabright.gif');background-repeat: repeat-x;background-position: top;z-index: auto;bottom: 0px;width: 1000px;list-style-image: none;list-style-type: none;padding: 0px;margin: 0px;left: 5px;right: 5px;}
.menu li {display:block;position:relative;float: left;background-image: url('../images/tableft.gif');background-repeat: no-repeat;background-position: right top;}
/* ³]¸m¿ï³æ°Ï¶ô*/
.menu li dl {background-image: url('../images/tabright.gif');background-repeat: repeat-x;margin:0;padding:0;}
.menu li dl:hover {visibility: inherit;background-image: url('../images/tabright01.gif');background-repeat: repeat-x;background-position: 0px 0px;}
/* ³]¸m¥D¿ï³ædt */
.menu li dt {overflow: hidden;}
.menu li dt a {font-size:15px;color:#FFF;font-weight:normal;text-decoration: none;height: 26px;display: block;padding-top: 10px;padding-right: 10px;padding-left: 10px;width: 80px;text-align: center;}
.menu li dt a:hover {visibility: inherit;background-image: url('../images/tabright01.gif');background-repeat: repeat-x;background-position: 0px 0px;text-decoration: none;}
.menu #current a{visibility: inherit;background-image: url('../images/tabright01.gif');background-repeat: repeat-x;background-position: 0px 0px;text-decoration: none;}
/* ³]¸m¤l¿ï³ædd */
.menu li dd {float:none;background-color:#e85c01;height:25px;width: 180px;display: block;margin:0;padding-top: 9px;padding-right: 0;padding-bottom: 0;padding-left: 5px;border-bottom-width: 1px;border-bottom-style: solid;border-bottom-color: #fff;}
.menu li dd.last {border-bottom:0;}
.menu li dd a {color:#FFF;font-size: 12px;padding-right: 10px;padding-left: 10px;}
.menu li dd a:hover {background-position: 0px 4px;background-image: url('../images/sub-arrow.gif');background-repeat: no-repeat;text-decoration: none;}
/*ÁôÂäl¿ï³æ*/
.menu li dd { display:none;}
/* ·Æ¹«·Æ¤JÅã¥Ü¤l¿ï³æ */
.menu li:hover dd, .menu li a:hover dd { display:block;}
/*ie6 hack*/
.menu li:hover,.menu li a:hover { border:0;}
.menu table { border-collapse:collapse;padding:0; text-align:left;}
/***     3. Adv Section     ***/
.slider {position:relative;z-index:1;width: 1000px;margin: 0 auto;}
.sliderContent {overflow:hidden;height:250px;position:relative;}
.sliderArrows a {display:block;text-indent:-9999px;outline:none;z-index:50;background-image:url('../images/prev_next.png');width:42px;height:43px;position:absolute;top:50%;margin-top:-34px;}
.prev { background-position:0 0; left:10px; }
.prev:hover { background-position:0 -44px; }
.next { right:10px; background-position:-44px 0; }
.next:hover { background-position:-44px -44px; }
/***     4. Main Section     ***/
#main-wrapper {width:960px;background:#FFF;padding:20px;overflow:hidden;margin-top: 0;margin-right: auto;margin-bottom: 0;margin-left: auto;}
#main {margin-right: 330px;margin-left: 194px;}
#main_word {margin-bottom: 10px;margin-top: 10px;}
#right {float: right;width: 310px;}
#right_word {margin-bottom: 5px;}
#left {float: left;width: 174px;}
#left_photo {padding-bottom: 15px;}
#clear_both {clear: both;}
.float-left {float: left;margin-right: 10px;margin-bottom: 10px;}
.float-center {float: center;}
.float-right {float: right;}
/***     5. Content&Sidebar     ***/
#Sidebar {float: left;width: 190px;background-image: url('../images/menu03.gif');background-repeat: no-repeat;background-position: right top;}
#Sidebar .sidemenu {list-style:none;margin-bottom: 10px;}
#Sidebar .sidemenu li {border-bottom-width: 1px;border-top-style: none;border-right-style: none;border-bottom-style: dotted;border-left-style: none;border-bottom-color: #CCCCCC;width: 180px;background-image: url('../images/menu01.gif');background-repeat: no-repeat;background-position: -2px center;height: 35px;}
#Sidebar .sidemenu li a {display:block;font-weight:normal;color: #ff802d;text-decoration:none;min-height:18px;text-align: left;font-size: 13px;padding-left: 20px;padding-top: 10px;height: 35px;}
* html body #Sidebar .sidemenu li a { height: 18px; }
#Sidebar .sidemenu li a:hover {color: #ff802d;font-weight: bold;background-image: url('../images/menu02.gif');background-repeat: repeat-x;font-size: 13px;}
#Content {width: 750px;float: right;}
#course {margin-bottom: 10px;padding-bottom: 20px;}
.align-right {text-align: right; }
.align-center {text-align: center; }
/* bodyBottom */
#bodyBottom{width:1000px;height: 145px;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;background-color: #FFFFFF;}
/***     6. Footer Section     ***/
#footer-top-wrapper , #footer-wrapper, #footer, #footer-bottom-wrapper , .slider ,#header-wrapper{clear: both;display: table;}
/*     6.1. Footer top     */
#footer-top-wrapper {width:100%;height:30px;background-color: #676767;}
#footer-top {width:1000px;padding-top:10px;margin-top: 0;margin-right: auto;margin-bottom: 0;margin-left: auto;}
#footer-top a { color:#FFFFFF;}
#footer-navigation li { display:block; float:left; margin-right:10px; }
#footer-navigation span {margin-right:5px;color: #FFFFFF;}
#back-top {float:right;background:url('../images/back-top.png') no-repeat right;padding-right:26px;}
/*     6.2. Footer     */
#footer-wrapper {width:100%;overflow:hidden;background-color: #676767;}
#footer {width:1000px;margin-right: auto;margin-left: auto;padding-top: 10px;padding-bottom: 0px;}
.footer-widget a { color:#fff;}
.footer-widget.right { float:right}
.footer-widget li {margin-bottom: 2px;}
/*     6.3. Footer bottom    */
#footer-bottom-wrapper {width:100%;height:25px;background-color: #676767;}
#footer-bottom {width:1000px;margin-right: auto;margin-left: auto;margin-top: 0px;margin-bottom: 0px;padding-top: 0px;}
.footer-bottom-left {float:left;color: #FFFFFF;}
.footer-bottom-left a {color: #FFFFFF;}
.footer-bottom-left a:hover {text-decoration:none; }
/*     7 TEACHER-PHOTO    */
#teacher-photo {width: 710px;height: 100px;margin: 0 auto;}
#teacher ul.teachermenu{width: 100%;list-style: none;margin: 0;padding-top: 10px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;}
#teacher ul.teachermenu li{margin: 0px;float: left;width: 83px;height: 93px;overflow: hidden;position: relative;margin: 0px;padding-right: 5px;}
#teacher ul.teachermenu li a:hover img
{position: absolute;left: 0px;top: -93px;}
/*°¼ÃäÄæSocial*/
.social {position: fixed;display:block;right:-250px;top: 35%;z-index: 99999;}
.social ul {padding: 0px;-webkit-transform: translate(-270px, 0);-moz-transform: translate(-270px, 0);-ms-transform: translate(-270px, 0);-o-transform: translate(-270px, 0);transform: translate(0, 0);}
.social ul li {display: block;margin: 5px;background: rgba(0, 0, 0, 0.2);width: 300px;text-align: left;padding: 10px;-webkit-border-radius: 30px 0 0 30px;-moz-border-radius: 30px 0 0 30px;border-radius: 30px 0 0 30px;-webkit-transition: all 1s;-moz-transition: all 1s;-ms-transition: all 1s;-o-transition: all 1s;transition: all 1s;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.social ul li:hover {-webkit-transform: translate(-100px, 0);-moz-transform: translate(-100px, 0);-ms-transform: translate(-100px, 0);-o-transform: translate(-100px, 0);transform: translate(-100px, 0);background: rgba(0, 0, 0, 0.5);}
.social ul li#social-line:hover {background: #11b71f;}
.social ul li#social-fb:hover {background: #016beb;}
.social ul li#social-signup:hover {background: #fe8a01;}
.social ul li:hover a {color: #fff;}
.social ul li:hover i {color: #fff;-webkit-transform: rotate(360deg);-moz-transform: rotate(360deg);-ms-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);-webkit-transition: all 1s;-moz-transition: all 1s;-ms-transition: all 1s;-o-transition: all 1s;transition: all 1s;}
.social ul li i {padding: 5px 5px 5px 6px;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;width: 40px;height: 40px;font-size: 30px;background: #ffffff;-webkit-transform: rotate(0deg);-moz-transform: rotate(0deg);-ms-transform: rotate(0deg);-o-transform: rotate(0deg);transform: rotate(0deg);-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
.social ul li a{color: #fff;font-size:20px;line-height:1.5;font-family:"微軟正黑體", Arial, sans-serif;text-decoration:none;}
/**/
dt.tag_new_menu > a:before {content: '';display: block;position: absolute;margin-left: -10px;top: 0;width: 50px;height: 40px;background-image: url('../images/tag-newmenu.svg');background-size: contain;background-repeat: no-repeat;}
/**/
ul.style1 {position: relative;margin: 0}
ul.style1 > li {padding: .5em .5em .5em 2em!important;border-bottom: dashed 1px silver;list-style-type: none!important}
ul li:last-child, ol li:last-child {border-bottom: none}
ul.style1 > li:before {font-family: "Font Awesome 5 Free";content: "\f138";position: absolute;left: .5em;font-weight: 900;color: #f45e00}
ul.style1 > li p:last-child, ol.style2 > li p:last-child {margin-bottom: 0}
ol.style2 {counter-reset: number;list-style-type: none !important;padding: 0 0.5em;position: relative;margin-left: 0;border-radius: 0 10px 10px 10px}
ol.style2 > li {line-height: 1.5;padding: 1em 0 1em 2.5em!important;border-bottom: dashed 1px silver;list-style-type: none !important;margin-bottom: 0}
ol.style2 > li:before {counter-increment: number;content: counter(number);position: absolute;left: .75em;color: #fff;background: #f45e00;width: 7px;height: 19px;padding: 0 5px 0 7px;font-weight: 900;border-radius: 50%;margin-top: 3px}
ol li:last-of-type {border-bottom: none}
ol.style2.start4 {counter-reset: number 3;}
ol.style2.start5 {counter-reset: number 4;}
ol.style2.start6 {counter-reset: number 5;}
@media screen and (max-width: 991px){ul.sm-border li:last-child, ol.sm-border li:last-child {border-bottom: dashed 1px silver}}
/**/
a.normal-hover {cursor: pointer;color: #337ee4;border: 1px solid transparent;border-bottom: 1px solid #337ee4}
a.normal-hover:hover {border-bottom: 1px solid transparent;text-decoration: none}
a.normal-hover:active, a.normal-hover:focus {text-decoration: none;outline: none;border: 1px solid;background-color: rgba(51,126,228,.16)}