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

3. Adv Section
4. Main Section

5. Content&left

6. Footer Section
6.1. Footer top
6.2. Footer
6.3. Footer bottom
7. Teacher photo
8. Styling Lists
=================
***/
/***     1. General Styles     ***/
body {color: #373737;background-image: url(images/main-bg.gif);background-repeat: repeat-x;font-size: 12px;line-height: 18px;background-position: center top;font-family: "微軟正黑體", Arial, "新細明體";background-color: #FFFFFF}
a {color:#373737;text-decoration:none}
a:hover { text-decoration:underline; }
h1 {color: #b30101;text-decoration: none;font-weight: normal;font-size: 24px;text-align: left;line-height: 30px}
h2 {text-transform:none;color: #970000;text-decoration: none;font-weight: normal;font-size: 16px;background-image: url(images/wordbg.png);background-repeat: no-repeat;background-position: left top;height: 35px;line-height: 35px;padding-left: 20px;margin-bottom: 20px}
h3 {font-size: 12px;color: #656565;line-height: 16px;padding:5px 0;margin:0 0 5px 0;border-bottom:1px solid #dadada;border-top:1px solid #dadada}
h3 a {font-size: 12px;color: #656565;text-decoration: none}
h3 a:hover {font-size: 12px;color: #656565;text-decoration: underline}
.word {font-size: 12px;line-height: 18px;color: #373737}
.word-english {font-size: 12px;line-height: 18px;color: #373737;font-family: Arial, Helvetica, sans-serif}
.teachername-english {font-size: 15px;line-height: 20px;color: #373737;font-family: Arial, Helvetica, sans-serif;font-weight: bold}
.numberword {font-size: 18px;line-height: 20px;color: #373737;font-weight: normal}
.teachername {font-size: 15px;line-height: 20px;color: #373737;font-weight: bold}
.title {font-size: 15px;line-height: 22px;color: #373737}
.writeword {font-size: 12px;line-height: 18px;color: #fff}
p {font-size: 12px;line-height: 18px}
.english {font-family: Verdana, Arial, Helvetica, sans-serif;font-size: 13px;line-height: 24px}
.japanese {font-size: 13px;line-height: 24px}
p.clr, .clr { clear:both; padding:0; margin:0; background:none; }
/*- Widget Title - */
.wtitle { padding:0 0 10px 0; margin:0; }
.wtitle h1 {margin:0;padding:5px 0;color:#970000;text-align:left;border-bottom:1px solid #dadada;font-size: 24px;font-style: normal;font-weight: normal;font-variant: normal}
.pic img {display:block;padding:7px;margin-top: 0;margin-bottom: 0;margin-left: 15;background-color: #FFFFFF}
.line {clear: both;border-bottom: 1px solid #ddd;margin-top: 25px;margin-bottom: 40px}
.float-left {float: left;margin-right: 10px;margin-bottom: 10px}
.float-right {float: right}
.align-right {text-align: right; }
.align-center {text-align: center; }
/*-- 心理測驗 --*/
.psyche{background-image:url(images/psyche/psyche-top.jpg);height:400px;padding-top:200px;padding-left:170px}
/*--英語俱樂部 --*/
.club{width:729px;padding:40px 0}
.club p{width:452px;line-height:100px;color:#656565;font-size:11pt}
.club img{padding-left:7px;padding-top:12px}
/*--測驗介紹 --*/
#test{width:729px;padding:40px 0}
#test a{display:block;padding-top:3px;font-size:12pt;text-align:center;letter-spacing:12px;line-height:20px;color:#666;text-decoration: none}
#test a:hover{color:#660000;background-color:#FF9999}
#test p{padding:6px;text-align:center;line-height: 20px}
/***     2. Header     ***/
#header-wrapper {height:200px;background-image: url(images/main-bg.gif);background-repeat: repeat-x;margin-top: 0px;margin-right: auto;margin-bottom: 0px;margin-left: auto;background-position: center top;background-color: #FFFFFF}
#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;color: #FFFFFF}
#top a {font-size: 12px;color: #fff;text-decoration: none}
#logo { position:absolute; top:18px; left:0; }
#header-word {position:absolute;right:0;top:41px;font-size: 4em;color: #FFFFFF;font-weight: bold;line-height: normal}
/*     2.2.Navigation  整體設置    */
#navigation-wrapper {position:absolute;width:1000px;left:0;top: 144px;z-index: 9999}
.menu {height:45px;background-image: url(images/tabright.gif);background-repeat: repeat-x;background-position: top;z-index: auto;bottom: 0px;width: 1100px;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/tabright.gif);background-repeat: no-repeat;background-position: right top}
/* 設置選單區塊*/
.menu li dl {margin:0;padding:0}
.menu li dl:hover {visibility: inherit;background-image: url(images/tabright01.gif);background-repeat: repeat-x;background-position: 0px 0px}
/* 設置主選單dt */
.menu li dt {overflow: hidden}
.menu li dt a {font-size:15px;color:#535352;font-weight:normal;text-decoration: none;height: 32px;display: block;padding-top: 14px;padding-right: 5px;padding-left: 5px;width: 75px;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;color: #FFF}
.menu #current a{visibility: inherit;background-image: url(images/tabright01.gif);background-repeat: repeat-x;background-position: 0px 0px;text-decoration: none;height: 32px;color: #FFF}
/* 設置子選單dd */
.menu li dd {float:none;background-color:#313131;height:25px;width: auto;display: block;margin:0;padding-top: 9px;padding-right: 10px;padding-bottom: 0;padding-left: 10px;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}
/*隱藏子選單*/
.menu li dd { display:none}
/* 滑鼠滑入顯示子選單 */
.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     ***/
/*-#Icon font-*/
@font-face {font-family: 'WebSymbolsRegular';src: url('./fonts/websymbols-regular-webfont.eot');src: url('./fonts/websymbols-regular-webfont.eot@#iefix') format('embedded-opentype'), url('./fonts/websymbols-regular-webfont.woff') format('woff'), url('./fonts/websymbols-regular-webfont.ttf') format('truetype'), url('./fonts/websymbols-regular-webfont.svg#WebSymbolsRegular') format('svg');font-weight: normal;font-style: normal}
.icon {font-family: 'WebSymbolsRegular';font-size: 12px;line-height: 1px}
.full-width-wrapper, .fixed-width-wrapper, #banner, #slider-wrapper {clear: both;display: table}
.full-width-wrapper {width: 100%}
.fixed-width-wrapper {width: 1000px;margin: 0 auto}
#slider-frame {background-color:#f4f4f4;height: 340px}
.slider {margin: 10px 10px 10px 10px;position: relative}
.slider-small {display:none}
.rslides {position: relative;list-style: none;overflow: hidden;width: 100%;padding: 0;margin: 0}
.rslides li {position: absolute;display: none;width: 100%;left: 0;top: 0}
.rslides li:first-child {position: relative;display: block;float: left}
.rslides img {display: block;height: auto;float: left;width: 100%;border: 0;max-height: 320px}
a.rslides_nav {position: absolute;z-index: 1;top: 40%;margin-right:20px;margin-left:20px}
a.rslides_nav.next {color:rgba(255,255,255,0.6);font-family: 'WebSymbolsRegular';font-size: 30px;right: 0;text-decoration:none}
a.rslides_nav.prev {color:rgba(255,255,255,0.6);font-family: 'WebSymbolsRegular';font-size: 30px;left: 0;text-decoration:none}
ul.rslides_tabs {text-align: center;margin: 0;padding: 0 0 15px 0;position: relative;height: auto;background-color: #f4f4f4}
ul.rslides_tabs li {display: inline-block;background:none;width: 12px;height: 12px;padding: 0px;border-radius:10px;margin: 15px 10px 0 0;vertical-align: top}
ul.rslides_tabs li a {display: block;padding: 0px;background: #5c5a5e;margin: 0px;width: 12px;height: 12px;padding: 0px;border-radius:10px;line-height: 0px;text-indent: -9999px}
ul.rslides_tabs li.rslides_here a {text-indent: -9999px;background: #e64a42;padding: 0px;margin: 0px;width: 12px;height: 12px;padding: 0px;border-radius:10px;display: block;line-height: 1px}
/***     4. Main Section     ***/
#main-wrapper {width:1000px;background:#FFF;overflow:hidden;margin-top: 0;margin-right: auto;margin-bottom: 0;margin-left: auto;padding-top: 20px;padding-bottom: 20px}
#main {float: right;width: 730px}
#main_word {margin-bottom: 10px;margin-top: 10px}
#right {float: right;width: 310px}
#right_word {margin-bottom: 5px}
#clear_both {clear: both}
/***     5. Content&left     ***/
#left {float: left;width: 250px;font-size: 12px;color: #656565}
#left_photo {padding-bottom: 30px}
#left_contact {padding-bottom: 15px;background-color: #f4f4f4;margin-bottom: 30px}
.content {margin-bottom: 30px;padding-bottom: 15px}
#course {margin-bottom: 10px;padding-bottom: 20px}
/* corplogo */
#corplogo {overflow: hidden; width: 1000px; height: 65px}
/***     6. Footer Section     ***/
#footer-top-wrapper , #footer-wrapper, #footer, #footer-bottom-wrapper {clear: both;display: table}
/*     6.1. Footer top     */
#footer-top-wrapper {width:100%;height:30px;background-image: url(images/footer-bg.gif);background-repeat: repeat-x;background-position: top}
#footer-top {width:1000px;padding-top:10px;margin-top: 0;margin-right: auto;margin-bottom: 0;margin-left: auto}
#footer-top a { color:#FFF; }
#footer-navigation li { display:block; float:left; margin-right:5px; }
#footer-navigation span {margin-right:5px;color: #FFF}
#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: #2e2e2e}
#footer {width:1000px;margin-right: auto;margin-left: auto;padding-top: 10px;padding-bottom: 0px}
.footer-widget { width:350px}
.footer-widget a { color:#fff;  }
.footer-widget.right { float:right; }
.footer-widget li {margin-bottom: 1px}
/*     6.3. Footer bottom    */
#footer-bottom-wrapper {width:100%;height:25px;background-color: #2e2e2e}
#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: #FFF}
.footer-bottom-left a {color: #FFF}
.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}
/*     8 Styling Lists    */
/*- List -*/
.list { height:30px; color:#373737; font:normal 12px/13px;  clear:both; padding:0 0 10px 0; }
.list li { float:left; margin:0; padding:0 5px 0 0; }
.list li a { display:block; float:left; padding:9px 10px; text-align:center; text-decoration:none; color:#373737; }
.list li a:hover { color:#373737; background:#f0f0f0; padding:8px 9px; border:1px solid #dadada; }
.list li a.active { color:#373737; background:#f0f0f0; padding:8px 9px; border:1px solid #dadada; }
div.tabs_list { border:1px solid #dadada; padding:0; margin:0; }
div.tabs_list ul {list-style:none;text-align:left;padding: 10px}
div.tabs_list ul li { font:normal 12px ; padding:0; margin:0; }
div.tabs_list ul li a {font-size: 11px;font-weight: bold;color: #49190e;text-decoration: underline;font-family: Arial, Helvetica, sans-serif;background-image: url(images/more.gif);background-repeat: no-repeat;background-position: right;padding-right: 10px;float: right}
/*     9 holder-QA    */
.holder {width:715px; margin:5px; padding:5px; border:1px solid #ddd; background:#f8f8f8}
a.hid {color:#373737;text-decoration:none;outline-style:none;position:relative;z-index:500;font-size: 16px}
a.hid em {display:none;font-size: 12px;line-height: 16px}
a.hid:hover {text-decoration:none}
a.hid:active, a.hid:focus {background:#f8f8f8}
a.hid:active span, a.hid:focus span {display:none}
a.hid:active em, a.hid:focus em {display:block;background:#f8f8f8;color:#373737;width:715px;font-style:normal;cursor:default;margin:5px;padding:5px;position:absolute;border:1px solid #ddd;border-width:0 1px 1px 1px;left: -5px;top: -5px}
/*     10QA     */
#qa {background-image: url(images/working-holiday/Q.gif);line-height: 3em;padding-left: 40px;background-repeat: no-repeat;background-position: left 5px;font-size: 14px}
#qa a:link {text-decoration: none}
#qa a:visited {text-decoration: none}
#qa a:hover {text-decoration: none;color: #6C0005}
#qa a:active {text-decoration: none}
#aq {background-image: url(images/working-holiday/A.gif);line-height: 22px;padding-left: 40px;background-repeat: no-repeat;color: #373737;font-size: 12px;padding-top: 5px;margin-bottom: 5px}
/* Table 1 Style */
table.table1{font-size: 12px;line-height: 18px;font-style: normal;border-collapse:separate}
.table1 td{padding:2px;border: 1px solid #FFFFFF}
/*     12VIDEO     */
ul.playlist {margin: 0;padding: 0;list-style: none;width: 250px;float: right}
ul.playlist li {margin: 2px;float: right}
ul.playlist li a img {border: 0;vertical-align: middle}
.tv {width: 730px;height: 380px;background-color: #050007}
.video {float: left;width: 480px;height: 380px}
/*側邊欄Social*/
.social {position: fixed;display:block;right:-250px;top: 25%;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;text-decoration:none}
/**/
.tag_new_menu > dl:after {content: '';display: block;position: absolute;left: 0;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:#970000}
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:#970000;width: 10px;height: 21px;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)}