@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Varela+Round|Open+Sans:700|Titillium+Web:400,700');
/* CSS Document */
::-webkit-scrollbar {height: 6px; width: 6px;}
::-webkit-scrollbar-track {background: #fff; border-radius: 3px;}
::-webkit-scrollbar-thumb {background: #bbb; border-radius: 3px;}

.container {position: relative; width: 100%;}
.nav .open>a, .nav .open>a:hover, .nav .open>a:focus {background-color: transparent; border: 0;}
.nav>li>a:hover, .nav>li>a:focus {background-color: transparent;}
.dropdown-menu > li > a {color: #6e5e68;}
.dropdown-menu > li > a:hover, .dropdown-menu >li > a:focus {background-color: transparent;}

body {background: #fff; color: #6e5e68; font-family: 'Varela Round', 'Open Sans', '微軟正黑體', sans-serif!important; font-size: 16px; position: relative; word-break: break-word; z-index: 0; -ms-overflow-style: scrollbar !important; /*fix ie scrollbar covering content*/}
a, a:hover, a:active, a:focus {cursor: pointer; text-decoration: none;}
button:focus {outline: none;}
body.mmOpen {overflow-y: auto;}
body.mmOpen #mmBg {background: rgba(0,0,0,0.4); bottom: 0; content: ''; display: block; height: 100%; left: 0; position: fixed; right: 0; top: 0; width: 100%; z-index: 100;}
.zh .zh-hide, .en .en-hide {display: none;}
.moreBtn {color: #fff; display: block; font-size: 15px; height: 28px; letter-spacing: 2px; text-indent: 2px; padding: 5px 4px; position: absolute; right: 15px; top: 3px; text-align: center; min-width: 60px;}
body.en .moreBtn {letter-spacing: 0; text-indent: 0;}
div.alignleft {float: left;}
div.aligncenter {margin: 0 auto;}
div.alignright {float: right;}

.moreBtn:hover {color: #fff;}
.attIcon:before {content: " "; display: inline-block; height: 15px; margin-left: 4px; width: 15px; -webkit-transition: color 0.2s ease; transition: color 0.2s ease;}
.vertical-center {align-items: center; display: flex; height: 100%; justify-content: center;}
.loading {color: #333; display: table; font-size: 30px;margin: 30px 0; opacity: 0.3; padding: 30px; text-align: center;}

/* modal box style start */
.modal-dialog {background: #fff; box-shadow: 0 0 16px rgba(0, 0, 0, 0.29); border-radius: 20px; margin: auto; max-height: 90vh; left: 50%; overflow: hidden; position: absolute; top: 50% !important; transform: translate(-50%, -50%) !important; -ms-transform: translate(-50%, -50%) !important; -webkit-transform: translate(-50%, -50%) !important; width: 90%;}
.modal .modal-header {border: 0; min-height: 45px; padding: 15px 15px 10px; position: relative;}
.modal .modal-title:before {content: " "; display: inline-block; height: 30px; margin-right: 10px; vertical-align: top; width: 26px;}
.modal .modal-title {font-size: 24px; font-weight: bold;}
.modal button.close {display: block; height: 45px; opacity: 1; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 45px;}
.modal .close .icon {display: block; height: 20px; margin: auto; width: 20px;}
.modal-content {border: 0; border-radius: 0; box-shadow: none; height: 100%;}
.modal-body {margin: 0 10px 23px; max-height: calc(90vh - 83px); overflow: auto; padding: 0 15px;}
.modal-backdrop {background: transparent;}
/* modal box style end */

/* header style start */
header {height: 230px; overflow: hidden; padding: 0; position: relative;}
header .container {overflow: hidden; z-index: 2;}
header .schLogoContainer {overflow: hidden;}
header.ul_image {background-position: center top!important; background-repeat: no-repeat!important; background-size: auto 100%!important;}
#schLogo {background: rgba(255,255,255,0.7); box-shadow: 0 2px 2px rgba(0,0,0,0.1); overflow: hidden; padding-left: 5px; padding-top: 8px; position: fixed; z-index: 501;}
.mmOpen #schLogo {background: rgba(255,255,255,1);}
#schLogo .schLogo {float: left; margin-right: 5px; height: 40px;}
#schLogo .schName {display: table-cell; height: 40px; vertical-align: middle;}
#schLogo a {color: #4a4a4a; display: inline-block; position: relative; z-index: 2;}
#schLogo .schName {max-width: calc(100vw - 96px);}
#schLogo .schName .schName_ch {display: block; font-size: 18px; font-weight: bold; line-height: 1.2em;}
#schLogo .schName .schName_en {font-family: 'Varela Round', sans-serif; display: block; font-size: 12px; line-height: 1.2em; margin-top: 2px;}
#login {display: none;}
/* header style end */

/* main menu style start */
body.mmOpen #mainMenu {opacity: 1;}
#mainMenu {border: 0; overflow-y: auto; position: fixed; top: 0; width: 100%; z-index: 500;}
#mainMenu .navbar-header {position: fixed; top: 0; z-index: 999;}
#header .navbar-toggle {margin-right: 10px; top: 1px; position: absolute; right: -5px; z-index: 999;}

#mainMenu .navbar-toggle .icon-bar {height: 3px;}
#mainMenu ul {background: #fff; padding: 0;}
#mainMenu ul li {min-height: 40px;}
#mainMenu #navbar > ul > li {border-bottom: 1px solid #f2f2f2; font-size: 18px;}
#mainMenu .navbar-nav {margin: 0 -15px;}
#mainMenu .dropdown > a {color: #6e5e68;}
#mainMenu .nav > .dropdown > a {min-height: 50px;}
#mainMenu .navbar-nav > li > a {line-height: 1.2em; padding: 15px;}
#mainMenu .navbar-nav > li:not(.login):not(.lang) > a:not(.dropdown-toggle) {padding-left: 60px;}
#mainMenu .page_item  a {color: #6e5e68; padding: 15px;}
#mainMenu .nav .dropdown-toggle {display: block; float: right; height: 50px; padding: 0; position: absolute; right: 7px; top: 0; width: 40px;}
#mainMenu .nav .dropdown-toggle > .dropdown-icon:before {background: url(../images/menu_arrow_down.png) center center no-repeat; background-size: 100% 100%; content: " "; height: 10px; left: calc(50% - 5px); position: absolute; top: calc(50% - 5px); width: 10px;}
#mainMenu .open > .dropdown-toggle > .dropdown-icon:before {background: url(../images/menu_arrow_up.png) center center no-repeat; background-size: 100% 100%;}
#mainMenu .page_item a:first-child {width: calc(100% - 50px);}
#mainMenu .sub-level .page_item {background: #fbfbfb;}
#mainMenu .sub-level .dropdown-menu.children .page_item {background: #f7f4f2;}
#mainMenu .sub-level a, #mainMenu .sub-level .dropdown-menu.children .page_item a {font-size: 17px; padding: 12px 0 12px 30px; white-space: normal;}
#mainMenu .dropdown-menu.children .dropdown-menu.children a:not(.dropdown-toggle) {padding: 12px 0 12px 40px;}
#mainMenu img {height: auto; left: 10px; max-height: 38px; max-width: 48px; position: absolute; top: 6px; width: auto;}
/* main menu style end */

/* Slider style start */
#slideshowArea {margin-top: -30px;}
#sliderDetails .modal-dialog {min-height: unset;}
#sliderDetails .modal-header svg {font-size: 25px;}
#sliderDetails .modal-body .title {font-size: 21px;}
#sliderDetails.modal .modal-title:before {display: none;}
/* Slider style end */

/* latest news style start */
#latestNews {margin: 30px 0 20px;}
#latestNews .title:before {background: url(../images/icon_news.png) center center no-repeat; background-size: 100% 100%; content: " "; display: inline-block; height: 30px; margin-right: 5px; vertical-align: text-top; width: 30px;}
body.en #latestNews .title:before {vertical-align: text-bottom;}
#latestNews .title {color: #1aacc4; font-size: 28px; font-weight: bold; margin: 0;}
body.en #latestNews .title {font-size: 25px;}
#latestNews .moreBtn {background: url(../images/btn_news_more.png) center center no-repeat; background-size: 100% 100%;}
#latestNews .moreBtn:hover {background: url(../images/btn_news_more_h.png) center center no-repeat; background-size: 100% 100%;}
#latestNews .newsFrame {background: #fff; border: 4px solid #26cbd3; border-radius: 23px; box-shadow: 0 13px 0 #1aacc4, 0 18px 0 rgba(23,89,96,0.2); margin-top: 5px; list-style: none; padding: 20px 10px 15px; padding-left: 0;}
#newsList {list-style: none; padding-left: 0;}
#newsList li {margin-left: 38px;}
#newsList .newsTitle:before {background: url(../images/list_style.png) center center no-repeat; background-size: 100% 100%; content: " "; height: 15px; margin-left: -25px; margin-top: 2px; position: absolute; width: 15px;}
#newsList .newsTitle {color: #1795aa; display: block; font-size: 21px; line-height: 25px; margin: 0; position: relative;}
#newsList .attIcon:before {background: url(../images/news_attIcon.png) center center no-repeat; background-size: 100% 100%;}
#newsList a:hover .attIcon:before {background: url(../images/news_attIcon_h.png) center center no-repeat; background-size: 100% 100%;}
#newsList a:hover .newsTitle {color: #23c8cc;}
#newsList .newsDes {color: #6e5e68; display: block; margin-top: 12px; max-height: 68px;}
#newsList .newsDate {color: #6e5e68; display: block; margin: 12px 0 20px;}
#newsList:after {clear: both; content: " "; display: table;}
#latestNews .withImg .newsImg {display: block; float: right; height: 100px; margin: 12px 0 25px 10px; overflow: hidden; position: relative; text-align: center; width: 150px;}
#latestNews .withImg .newsImg > img {height: auto; left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 150px;}
#latestNews .withImg .newsDes, #latestNews .withImg .newsDate {float: left; width: calc(100% - 160px);}
#latestNews #newsList a:after {display: table; margin-left: 38px; width: calc(100% - 38px);}
#latestNews #newsList a:not(:last-child):after {background: url(../images/news_divider.png) center center repeat-x; background-size: auto 100%; content: " "; height: 1px; margin-bottom: 20px;}
#latestNews .noRecord {color: #9f959d; display: table; margin: 0 0 10px 0; padding: 30px; text-align: center; width: 100%;}
#latestNews .noRecord span {display: table-cell; font-size: 20px; vertical-align: middle;}
#latestNews .noNewsDes .newsDes {display: none;}
#latestNews .loading {width: 100%;}
/* latest news style end */

/* notice style start */
#notice {margin: 30px 0 20px;}
#notice .title:before {background: url(../images/icon_notice.png) center center no-repeat; background-size: 100% 100%; content: " "; display: inline-block; height: 30px; margin-right: 5px; vertical-align: text-top; width: 30px;}
body.en #notice .title:before {vertical-align: text-bottom;}
#notice .title {color: #ea6868; font-size: 28px; font-weight: bold; margin: 0;}
body.en #notice .title {font-size: 25px;}
#notice .moreBtn {background: url(../images/btn_notice_more.png) center center no-repeat; background-size: 100% 100%;}
#notice .moreBtn:hover {background: url(../images/btn_notice_more_h.png) center center no-repeat; background-size: 100% 100%;}
#notice .noticeFrame {background: #fff; border: 4px solid #f79c9c; border-radius: 23px; box-shadow: 0 13px 0 #ea6868, 0 18px 0 rgba(23,89,96,0.2); margin-top: 5px; list-style: none; padding: 20px 10px 15px; padding-left: 0;}
#noticeList {list-style: none; padding-left: 0;}
#noticeList li {margin-left: 38px;}
#noticeList .noticeTitle:before {background: url(../images/list_style.png) center center no-repeat; background-size: 100% 100%; border-radius: 50%; content: " "; height: 15px; margin-left: -25px; margin-top: 2px; position: absolute; width: 15px;}
#noticeList .noticeTitle {color: #ea6868; display: block; font-size: 21px; line-height: 25px; margin: 0; position: relative;}
#noticeList a:hover .noticeTitle {color: #f79c9c;}
#noticeList .attIcon:before {background: url(../images/notice_attIcon.png) center center no-repeat; background-size: 100% 100%;}
#noticeList a:hover .attIcon:before {background: url(../images/notice_attIcon_h.png) center center no-repeat; background-size: 100% 100%;}
#noticeList .noticeDes {color: #6e5e68; display: block; margin-top: 12px; max-height: 68px;}
#noticeList .noticeDate {color: #6e5e68; display: block; margin: 12px 0 20px;}
#noticeList:after {clear: both; content: " "; display: table;}
#notice #noticeList a:after {display: table; margin-left: 25px; width: calc(100% - 25px);}
#notice #noticeList a:not(:last-child):after {background: url(../images/notice_divider.png) center center repeat-x; background-size: auto 100%; content: " "; height: 1px; margin-bottom: 20px;}
#notice .noRecord {color: #9f959d; display: table; margin: 0 0 10px 0; padding: 30px 0; text-align: center; width: 100%;}
#notice .noRecord span {display: table-cell; font-size: 20px; vertical-align: middle;}
#notice .noNoticeDes .noticeDes {display: none;}
#notice .loading {width: 100%;}
/* notice style end */

/* homework style start */
#homework {display: block; margin: 30px 0 30px; padding: 0 20px;}
#homework:after {clear: both; content: " "; display: table;}
#homework .title:before {background: url(../images/icon_hw.png) center center no-repeat; background-size: 100% 100%; content: " "; display: inline-block; height: 35px; margin-right: 5px; vertical-align: text-top; width: 35px;}
body.en #homework .title:before {vertical-align: text-bottom;}
#homework .title {color: #559942; font-size: 28px; font-weight: bold; margin: 0;}
body.en #homework .title {font-size: 25px;}
#homework .hwFrame {background: #85d165; border: 4px solid #85bf67; border-radius: 35px 35px 0 0; margin-top: 5px; list-style: none; padding: 10px 10px 0; position: relative;}
#homework .homeworkWarp {background: #84d85d; border-radius: 35px 35px 0 0; padding: 22px 5px 40px;}
#homework.col-md-6 .homeworkWarp {min-height: 378px;}
#homework .form-group {background: url(../images/datePicker_c.png) repeat-x; background-size: auto 100%; height: 50px; margin: auto; max-width: 390px; position: relative; width: calc(100% - 20px);}
#homework .input-group {width: 100%;}
#homework .form-group:before {background: url(../images/datePicker_l.png) no-repeat right; background-size: 100% 100%; content: " "; display: block; height: 50px; left: -10px; position: absolute; width: 10px;}
#homework .form-group:after {background: url(../images/datePicker_r.png) no-repeat left; background-size: 100% 100%; content: " "; display: block; height: 50px; right: -10px; position: absolute; top: 0; width: 10px;}
#homework input#homeworkDate {background: transparent; border: none; border-radius: 0; box-shadow: none; color: #559942; font-family: 'Titillium Web'; font-size: 24px; height: 50px;}
#homework .input-group-addon.datetimepicker-addon {background: url(../images/btn_cal.png) center center no-repeat; background-size: auto 32px;  background-color: transparent; border: 0; height: 45px; width: 45px;}
#homework .input-group-addon.datetimepicker-addon:hover {background: url(../images/btn_cal_h.png) center center no-repeat; background-size: auto 32px;}
#homework .classArea {margin: 20px auto 0; max-width: 410px; position: relative;}
#homework .nav-tabs {border-bottom: 0; padding-bottom: 16px; position: relative;}
#homework .classTab > .classkWarp:after {background: #74bf51; border-radius: 2px; content: " "; display: block; height: 4px; width: 100%;}
#homework .nav-tabs > li:first-child {display: table; font-size: 18px; height: 34px; line-height: 22.5px; padding: 5px 0; width: 50px;}
#homework .nav-tabs > li:first-child span {color: #376823; display: table-cell; vertical-align: middle;}
#homework .nav-tabs > li > a {background: #74bf51; border: 0; border-radius: 50%; color: #fff; font-size: 22px; height: 30px; line-height: 22px; margin-right: 2px; padding: 5px 4px; position: relative; text-align: center; width: 30px;}
#homework .nav-tabs > li:last-child > a {margin-right: 0;}
#homework .nav-tabs > li.active > a, #homework .nav-tabs > li.active > a:focus {background-color: #fff; color: #74bf51;}
#homework .nav-tabs > li.active > a:after {background: #fff; border-radius: 50%; bottom: -25px; content: " "; display: block; height: 8px; left: 50%; transform: translateX(-50%); position: absolute; width: 8px;}
#homework .nav-tabs > li > a:hover, #homework .nav-tabs > li.active > a:hover {background: #fff; color: #74bf51; cursor: pointer;}
#homework ul.classList {font-size: 18px; list-style: none; margin: 25px -15px; padding-left: 0; width: calc(100% + 30px);}
#homework ul.classList:after {clear: both; content: " "; display: table;}
#homework ul.classList > li {float: left; display: block; margin-bottom: 20px; text-align: center; width: 20%;}
#homework .bootstrap-datetimepicker-widget.dropdown-menu {border: 0; border-radius: 20px; margin: 0; -webkit-box-shadow: 0 0 3px rgba(0,0,0,0.3); box-shadow: 0 0 3px rgba(0,0,0,0.3); left: auto!important; padding: 20px; right: 0!important;}
#homework .bootstrap-datetimepicker-widget.dropdown-menu:before, #homework .bootstrap-datetimepicker-widget.dropdown-menu:after {display: none;}
#homework th.picker-switch {color: #2b9957; font-size: 26px; font-weight: normal;}
#homework .bootstrap-datetimepicker-widget table td.old, #homework .bootstrap-datetimepicker-widget table td.new {background: transparent; color: transparent;}
#homework .bootstrap-datetimepicker-widget table td.old:hover, #homework .bootstrap-datetimepicker-widget table td.new:hover {background: transparent; color: transparent;}
#homework .bootstrap-datetimepicker-widget table td.day.old:hover:after, #homework .bootstrap-datetimepicker-widget table td.old.new:hover:after {color: transparent;}
#homework th.prev, #homework th.next {color: #2b9957; font-size: 24px;}
#homework .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {background: transparent; cursor: pointer;}
#homework .bootstrap-datetimepicker-widget table thead tr:last-child th {color: #2b9957; font-size: 17px; padding-top: 15px;}
#homework .bootstrap-datetimepicker-widget table td.day:not(.old):not(.new) {color: #2b9957; font-family: 'Titillium Web'; font-size: 17px; font-weight: bold; height: 20px; line-height: 20px; position: relative; width: 20px;}
#homework .bootstrap-datetimepicker-widget table td span.active {background: #2b9957;}
#homework  .bootstrap-datetimepicker-widget table td.day:hover, #homework .bootstrap-datetimepicker-widget table td.hour:hover, #homework .bootstrap-datetimepicker-widget table td.minute:hover, #homework .bootstrap-datetimepicker-widget table td.second:hover {background: transparent;}
#homework  .bootstrap-datetimepicker-widget table td.day:not(.old):not(.new):hover:after, #homework .bootstrap-datetimepicker-widget table td.hour:hover:after, #homework .bootstrap-datetimepicker-widget table td.minute:hover:after, #homework .bootstrap-datetimepicker-widget table td.second:hover:after {background-color: #e6e6e6; border-radius: 50%; display: block; content: " "; height: 30px; left: 50%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); width: 30px; z-index: -1;}
#homework .bootstrap-datetimepicker-widget table td.active, #homework .bootstrap-datetimepicker-widget table td.active:hover {background-color: transparent; text-shadow: none;}
#homework .bootstrap-datetimepicker-widget table td.active:after, #homework .bootstrap-datetimepicker-widget table td.active:hover:after {background-color: #fff5b0; border-radius: 50%; display: block; content: " "; height: 30px; left: 50%; position: absolute; top: 50%; transform: translateX(-50%) translateY(-50%); width: 30px; z-index: -1;}
#homework .bootstrap-datetimepicker-widget table td.today:before {display: none;}
#homework ul.classList > li > a {color: #fff; font-weight: bold;}
#homework ul.classList > li > a:hover {color: #74bf51;}
#homework .hwFrameFooter {bottom: -30px; height: 95px; left: 0; padding: 0 15px; position: absolute; width: 100%;}
#homework .frame_l {background: url(../images/bg_hw_l.png) left bottom no-repeat; background-size: auto 44px; display: block; float: left; height: 95px; position: relative; width: 70px; z-index: 1;}
#homework .frame_l:before {background: url(../images/bg_hw_book.png) left bottom no-repeat; background-size: auto 100%; content: " "; display: block; height: 64px; left: 1px; position: absolute; top: -10px; width: 119px;}
#homework .frame_c:before {background: #ffe683; border-radius: 5px; content: " "; display: block; height: 10px; left: 45%; position: absolute; top: 41px; width: 17px;}
#homework .frame_c {background: url(../images/bg_hw_c.png) center bottom repeat-x; background-size: auto 44px; display: block; float: left; height: 95px; position: relative; width: calc(100% - 140px); z-index: 0;}
#homework .frame_c:after {background: #fff; border-radius: 5px; content: " "; display: block; height: 10px; position: absolute; left: 65%; top: 41px; width: 48px;}
#homework .frame_r {background: url(../images/bg_hw_r.png) right bottom no-repeat; background-size: auto 44px; display: block; float: left; height: 95px;  position: relative; width: 70px; z-index: 1;}
#homework .frame_r:before {background: url(../images/bg_hw_erase.png) right bottom no-repeat; background-size: auto 100%; content: " "; display: block; height: 60px; right: 12px; position: absolute; top: -10px; width: 39px; z-index: 1px;}

#homework.ip ::-webkit-scrollbar {background: #84d85d; border-radius: 3px; height: 6px; width: 6px;}
#homework.ip ::-webkit-scrollbar-track {background: #96ea72; border-radius: 3px;}
#homework.ip ::-webkit-scrollbar-thumb {background: #74bf51; border-radius: 3px;}
#homework.ip .subjectGroup {padding: 20px 0 40px;}
#homework.ip .subjectGroupList {color: #376823; list-style: none; padding-left: 0px;}
#homework.ip .groupItem {margin-bottom: 15px; position: relative;}
#homework.ip .groupItem a:focus {outline: none;}
#homework.ip .subjectGroupList::-webkit-scrollbar {background: #74bf51; height: 6px; width: 6px;}
#homework.ip .subjectGroupList label {font-size: 16px; font-weight: normal; vertical-align: middle;}
#homework.ip .subjectGroupList.ch label {display: inline-block; margin-bottom: 0; margin-right: 10px; width: 95px;}
#homework.ip .subjectGroupList.en label {display: block; padding-left: 10px; width: calc(100% - 10px);}
#homework.ip .subjectGroupList.ch .bootstrap-select {width: calc(100% - 110px);}
#homework.ip .subjectGroupList.en .bootstrap-select {width: 100%;}
#homework.ip .bootstrap-select {cursor: pointer; display: inline-block; position: relative; vertical-align: middle;}
#homework.ip .bootstrap-select button {background: #74bf51; border: 1px solid #74bf51; color: #adf98a; font-size: 16px; min-height: 30px; padding: 6px 10px;}
#homework.ip .dropdown-backdrop {display: none;}
#homework.ip .btn-group.open .dropdown-toggle {box-shadow: none;}
#homework.ip .btn-default:hover {background-color: #85d165; border-color: #74bf51;}
#homework.ip .btn-default, #homework.ip .btn-default:active, #homework.ip .btn-default.active, #homework.ip .open > .dropdown-toggle.btn-default {background-color: #74bf51; border-color: #74bf51;}
#homework.ip .bootstrap-select.btn-group .dropdown-menu {background: #74bf51; color: #376823}
#homework.ip .bootstrap-select.btn-group .dropdown-menu.inner {font-size: 16px;}
#homework.ip .bootstrap-select.btn-group .dropdown-menu li {min-height: 30px;}
#homework.ip .bootstrap-select.btn-group .dropdown-menu li a {white-space: normal;}
#homework.ip .dropdown-menu > li > a {color: #fff;}
#homework.ip .dropdown-menu > li > a:hover, #homework.ip .dropdown-menu > li > a:focus {background-color: #85d165;}
#homework.ip .bootstrap-select .dropdown-toggle:focus {outline: none!important;}
#homework.ip .btn-default:focus, .btn-default.focus {background-color: #74bf51; border-color: #74bf51; outline: none!important;}

#homeworkDetails ::-webkit-scrollbar {background: #fff; height: 6px; width: 6px;}
#homeworkDetails ::-webkit-scrollbar-track {background: #eee; border-radius: 3px;}
#homeworkDetails ::-webkit-scrollbar-thumb {background: #74bf51; border-radius: 3px;}
#homeworkDetails.modal .modal-title:before {background: url(../images/icon_hw.png) center center no-repeat; background-size: 100% 100%;}
#homeworkDetails.modal .modal-title, #homeworkDetails.modal .modal-title .small {color: #559942;}
#homeworkDetails.modal button.close {background: url(../images/btn_hw_close.png) center center no-repeat; background-size: 20px 20px;}
#homeworkDetails.modal button.close:hover {background: url(../images/btn_hw_close_h.png) center center no-repeat; background-size: 20px 20px;}
#homeworkDetails.withHw .modal-body img {display: block; height: auto; margin: auto; max-height: 100%; max-width: 100%; width: auto;}
#homeworkDetails.withHw .modal-dialog {max-height: 90vh;}
#homeworkDetails.noHw .modal-body {color: #9f959d; font-size: 20px; height: 140px; padding: 50px; text-align: center;}
#homeworkDetails.noHw .loading {font-size: 20px; display: block; height: auto; margin: 0; padding: 6px 0; width: 100%;}
#homeworkDetails.ip .modal-body {max-height: calc(90vh - 50px); overflow-y: auto; padding: 10px 24px 5px;}
@media only screen and (orientation: landscape){
#homeworkDetails .modal-body {max-height: calc(90vh - 75px); overflow: auto;}
}
#homeworkDetails.ip .hwInfo {border-bottom: 1px solid #eee; padding-bottom: 15px; padding-top: 10px;}
#homeworkDetails.ip .hwTitle {color: #559942; font-size: 21px; font-weight: bold;}
#homeworkDetails.ip .hwContent {margin-top: 10px;}
#homeworkDetails.ip .submit {margin-top: 20px;}
#homework .loading {display: block; height: 200px; opacity: 0.3; padding: 70px 0; z-index: 999;}
#homeworkDetails.ip .attachment {margin: 10px 0;}
#homeworkDetails.ip .attachment:last-child {margin-bottom: 0;}
#homeworkDetails.ip .attIcon {color: #74bf51;}
#homeworkDetails.ip .attIcon:hover {color: #85d165;}
#homeworkDetails.ip .attIcon:before {background: url(../images/hw_attIcon.png) center center no-repeat; background-size: 100% 100%;}
#homeworkDetails.ip .attIcon:hover:before {background: url(../images/hw_attIcon_h.png) center center no-repeat; background-size: 100% 100%;}
#homeworkDetails.ip .subjectGroupName {border-top: 1px solid #ededed; color: #999; font-size: 14px; padding: 10px 0;}
#homeworkDetails.ip.noHw .modal-body {padding: 30px 25px 10px;}
#homeworkDetails.ip.noHw .subjectGroupName {bottom: 0; padding-bottom: 0; position: absolute; width: calc(100% - 50px);}
/* homework style end */

/* calendar style start */
#calendar {display: block; margin: 40px 0 20px; overflow: hidden;}
#calendar .title span:before {background: url(../images/icon_cal.png) center center no-repeat; background-size: 100% 100%; content: " "; display: inline-block; height: 30px; margin-right: 5px; vertical-align: text-top; width: 30px;}
body.en #calendar .title:before {vertical-align: text-bottom;}
#calendar .title {color: #c48765; font-size: 28px; font-weight: bold; margin: 0;}
body.en #calendar .title {font-size: 25px;}
#calendar .btn_lastmonth:before, #calendar .btn_nextmonth:before {content: " "; display: inline-block; height: 25px; position: absolute; top: 2px; width: 25px; z-index: 3;}
#calendar .btn_lastmonth:before {background: url(../images/btn_cal_arrow_l.png) center center no-repeat; background-size: auto 27px; left: 0; position: absolute;}
#calendar .btn_nextmonth:before {background: url(../images/btn_cal_arrow_r.png) center center no-repeat; background-size: auto 27px; position: absolute; right: 0;}
#calendar .year_month {color: #c48765; font-size: 25px; max-width: 340px; margin: 0 auto; padding: 0; position: relative; text-align: center; width: calc(100% - 15px);}
#calendar .year_month a {color: #c48765;}
#calendar ul {display: table; list-style: none; max-width: 450px; margin: 10px auto auto; padding: 0; width: 100%;}
#calendar ul:after {clear: both; content: " "; display: table;}
#calendar li {color: #c48765; display: table-cell; float: left; font-size: 17px; font-weight: bold; margin: 4px 0; text-align: center; width: 14.2%;}
#calendar li:not(.cal_head) {padding: 3px 0 0;}
#calendar ul a {color: #c48765; display: block; height: 26px; line-height: 26px; width: 26px;}
#calendar ul div {border: 2px solid transparent; border-radius: 50%; display: block; height: 30px; margin: auto; position: relative; width: 30px;}
#calendar ul li:not(.noEvent):not(.blank_date) div:hover {box-shadow: 0 0 5px rgba(0,0,0,0.3);}
#calendar ul li.noEvent a {cursor: default; pointer-events: none;}
#calendar .holiday div {background: rgba(255, 255, 255, 0.5);}
#calendar .today div {border: 1.5px solid #ffcb27;}
#calendar .today a {color: #c48765;}
#calendar .date {font-size: 16px; line-height: 21px;}
#calendar .cycle {color: #c48765; display: block; font-size: 12px; opacity: 0.7; position: absolute; right: -12px; text-align: center; top: -10px; transform: scale(0.75); width: 15px;}
#calendar .event div {background: #c48765;}
#calendar .event div a {color: #fff;}
#calendar .calendarWrap {display: table; margin: 0 auto 20px; padding-top: 30px; position: relative; width: 100%}
#calendar .calendarWrap:before, #calendar .calendarWrap:after {background: url(../images/cal.png) center center no-repeat; background-size: 100% 100%; content: " "; display: block; height: 50px; left: 50px; position: absolute; top: 5px; width: 18px; z-index: 1;}
#calendar .calendarWrap:after {left: auto; right: 50px;}
#calendar .calendarFrame {background: url(../images/bg_cal_bl.png) left bottom no-repeat, url(../images/bg_cal_br.png) right bottom no-repeat; background-color: #fff5b0; background-size: auto 41px, auto 80px; border: 2px solid #fffce3; border-radius: 30px; box-shadow: 0 11px 0 #ffd176, 0 17px 0 rgba(23,89,96,0.2); padding: 30px 10px 25px; position: relative;}
#calendar .calendarFrame:before {background: url(../images/../images/bg_col_balloon.png) left bottom no-repeat; background-size: auto 97px; content: " "; height: 97px; position: absolute; right: -44px; top: -20px; width: 225px; z-index: 2;}
#calendar .calendarFrame:after {background: url(../images/../images/bg_col_balloon2.png) left bottom no-repeat; background-size: auto 100px; content: " "; height: 120px; position: absolute; left: -29px; top: 19px; width: 58px; z-index: 2;}

#calendarDetails ::-webkit-scrollbar {background: #fff; height: 6px; width: 6px;}
#calendarDetails ::-webkit-scrollbar-track {background: #eee; border-radius: 3px;}
#calendarDetails ::-webkit-scrollbar-thumb {background: #c48765; border-radius: 3px;}
#calendarDetails.modal .modal-title:before {background: url(../images/icon_cal.png) center center no-repeat; background-size: 100% 100%;}
#calendarDetails.modal .modal-title, #calendarDetails.modal .modal-title .small {color: #c48765;}
#calendarDetails.modal button.close {background: url(../images/btn_cal_close.png) center center no-repeat; background-size: 20px 20px;}
#calendarDetails.modal button.close:hover {background: url(../images/btn_cal_close_h.png) center center no-repeat; background-size: 20px 20px;}
#calendarDetails .tbl_events tr {display: block;}
#calendarDetails .tbl_events td {color: #6e5e68; vertical-align: top;}
#calendarDetails .tbl_events td:first-child {color: #c48765; min-width: 80px; padding: 15px 10px 15px 0;}
#calendarDetails .tbl_events td:last-child {padding: 15px 10px; width: 100%;}
#calendarDetails .tbl_events tr:not(:last-child):after {background: url(../images/divider.png) center center repeat-x; background-size: auto 100%; content: " "; display: table; height: 1px;  width: 100%;}
#calendarDetails .tbl_events td:first-child.holiday {color: #9f959d;}

#calendar .loading {display: block; height: 200px; padding: 70px 0; opacity: 0.15;}
/* calendar style end */

/* Photo slide show style start */
#photoSlideShow {margin: 20px 0 20px; padding: 15px; position: relative;}
#photoSlideShowWrap {background: #fff; border-radius: 20px; box-shadow: 0 6px 0 rgba(23,89,96,0.2); display: block; height: 284px; padding: 12px; overflow: hidden;}
#photoSlideShow .empty {left: 50%; position: absolute; transform: translateX(-50%) translateY(-50%); top: 50%;}
/* Photo slide show style end */

/* Useful links banner style start */
#usefulLinks {margin: 30px auto 20px; text-align: center;}
#usefulLinks .ulBanner {float: left; height: 55px; margin-bottom: 5px; text-align: center; width: 50%;}
#usefulLinks .ulBanner a > img {height: auto; max-height: 55px; max-width: 90%; width: auto;}
#usefulLinks:after {clear: both; content: " "; display: table; height: 60px;}
/* Useful links banner style end */

/* Modal box strat */
.alertBox .modal-backdrop {background: transparent;}
.alertBox .modal-backdrop.in {filter: alpha(opacity=70); opacity: 0.7;}
#alertMsg {box-shadow: 0 0 5px rgba(0, 0, 0, 0.45);}
#alertMsg .modal-dialog {max-height: 80vh; margin: 0; width: 95%;}
#alertMsg .modal-content {background-clip: unset; border: 0;}
#alertMsg .modal-header {background: #fff; border: 0; padding: 17px 55px 8px; position: relative;}
#alertMsg.modal button.close {right: 10px; top: 12px; transform: none;}
#alertMsg .modal-title {font-size: 27px; max-width: 100%; text-align: center;}
#alertMsg.modal .modal-title:before {display: none;}
#alertMsg .modal-body {min-height: 140px; padding: 10px 0 0;}
#alertMsg .modal-body .content::-webkit-scrollbar-track {background: #eee; border-radius: 3px;}
#alertMsg .modal-body .content {min-height: 100px; max-height: calc(80vh - 140px); overflow-y: auto; padding: 0 10px 10px;}
#alertMsg .content:after {clear: both; content: " "; display: table;}
/* Modal box end */

/* Inner page banner style start */
#innerPageBanner {margin-bottom: 50px; margin-top: -160px; padding: 0 15px;}
#innerPageBanner .container {max-width: 1300px; width: 100%;}
#innerPageBannerWrap {border-radius: 10px; height: 62px; margin: 0 auto; overflow: hidden; position: relative; width: 290px;}
#innerPageBannerWrap img {height: auto; left: 50%; max-height: 62px; max-width: 290px; position: absolute; top: 50%; transform: translate(-50%, -50%); width: auto;}
#innerPageBanner.noBanner #innerPageBannerWrap {height: 0;}
#innerPageBanner.noBanner {display: none;}
/* Inner page banner style end */

/* Inner page dropdown menu style start */
#innerPageMenu {border-radius: 25px; display: inline-block; min-height: 40px; position: relative; top: -30px; vertical-align: middle; width: 100%;}
#innerPageMenu a:focus {outline: none;}
#innerPageMenu img {display: none;}
#innerPageMenu .dropdown-backdrop {display: none;}
#innerPageMenu .pageTitle > .dropdown-icon:before {background: url(../images/dropdown_arrow_down.png) center center no-repeat; background-size: 15px 15px; content: " "; height: 40px; left: 0;  position: absolute; top: 50%; transform: translateY(-50%); width: 40px;}
#innerPageMenu.open .pageTitle > .dropdown-icon:before {background: url(../images/dropdown_arrow_up.png) center center no-repeat; background-size: 15px 15px;}
#innerPageMenu .pageTitle > .dropdown-icon:after {background: rgba(255,255,255,0.2); content: " "; display: block; height: 100%; left: 39px; position: absolute; width: 2px;}
#innerPageMenu .pageTitle > .title {color: #fff; display: inline-block; font-size: 25px; max-height: 105px; margin: 12px 5px 7px 0; padding-left: 50px; width: 100%;}
#innerPageMenu .dropdown-menu {border: none; border-radius: 0 0 5px 5px; margin: 0; min-width: 235px; padding: 0; z-index: 1;}
#innerPageMenu > .dropdown-menu {border-radius: 15px; box-shadow: 0 0 2px rgba(0,0,0,0.35); max-height: calc(100vh - 150px); overflow-x: hidden; overflow-y: auto; top: calc(100% + 10px);}
#innerPageMenu li ul {display: none;}
#innerPageMenu li.open ul {display: block;}
#innerPageMenu .dropdown-menu.children {background: #fbfbfb; box-shadow: none; padding: 0; position: relative; width: 100%;}

#innerPageMenu .dropdown-menu a {color: #6e5e68; font-size: 17px; position: relative; white-space: normal;}
#innerPageMenu .dropdown-menu a:hover, #innerPageMenu .dropdown-menu .open > a {color: #9f959d;}
/*#innerPageMenu li.current_page_parent > a:not(.dropdown-toggle):hover , #innerPageMenu li.current_page_item > a:hover {color: #9f959d!important;}*/
#innerPageMenu .dropdown-menu > li > a {padding: 15px;}
#innerPageMenu li > a:not(.dropdown-toggle) {padding-right: 45px;}
#innerPageMenu .page_item_has_children {position: relative;}
#innerPageMenu .page_item_has_children:after {clear: both; content: " "; display: table;}
#innerPageMenu .page_item_has_children a {padding: 8px 35px 8px 15px;}
#innerPageMenu .page_item_has_children .dropdown-toggle {display: block; font-size: 12px; height: 50px; top: 0; padding: 0; position: absolute; right: 0; width: 50px;}
#innerPageMenu .children a {padding: 8px 15px 8px 25px;}
#innerPageMenu li a > .dropdown-icon:before {background: url(../images/subMenu_dropdown_down.png) center center no-repeat; background-size: 10px 10px; content: " "; color: transparent; height: 50px; position: absolute; top: 0; width: 50px;}

/* DC menu style start */
#dcMenuContainer {position: relative;}
#dcMenu {display: block; margin-bottom: 20px; min-height: 40px; min-width: 200px; vertical-align: middle; max-width: calc(100% - 45px);}
#dcMenu .dropdown-backdrop {display: none;}
#dcMenu .pageTitle > .dropdown-icon:before {color: #333; content: "\e259"; display: inline-block; font-family: 'Glyphicons Halflings'; font-size: 16px; left: 0; height: 40px; padding-top: 10px; position: absolute; text-align: center; top: 0; width: 20px;}
#dcMenu.open .pageTitle > .dropdown-icon:before {content: "\e260"; padding-top: 12px;}
#dcMenu a:focus {outline: none;}
#dcMenu .pageTitle > .title {color: #1a1a1a; display: inline-block; font-size: 24px; padding: 3px 20px 3px 0;}
#dcMenu.dropdown .pageTitle > .title {margin-left: 30px;}
#dcMenu .dropdown-menu.children {box-shadow: none; padding: 0; position: relative; width: 100%;}
#dcMenu .page_item_has_children:after {clear: both; content: " "; display: table;}
#dcMenu .dropdown-menu {border: none; border-radius: 0; margin: 0; padding: 0; z-index: 1;}
#dcMenu > .dropdown-menu {border-radius: 15px; box-shadow: 0 3px 12px rgba(0,0,0,0.2); max-height: calc(100vh - 150px); padding: 10px 0; overflow-x: hidden; overflow-y: auto; top: 40px; width: 250px;}
#dcMenu .dropdown-menu a {color: #1a1a1a; font-size: 17px; position: relative; white-space: normal;}
#dcMenu .dropdown-menu li a:hover, #dcMenu .dropdown-menu li a:focus {background: #fff;}
#dcMenu .dropdown-menu > li > a {padding: 15px;}
#dcMenu .dropdown-menu.children > li > a {padding: 8px 15px 8px 25px;;}
#dcMenu .page_item_has_children {position: relative;}
#dcMenu .page_item_has_children a {padding: 8px 35px 8px 15px;}
#dcMenu .page_item_has_children > a {max-width: calc(100% - 45px);}
#dcMenu .page_item_has_children .dropdown-toggle {display: block; font-size: 12px; height: 50px; position: absolute; right: 0; top: 0; padding: 0; width: 50px;}
#dcMenu .children a {padding: 8px 15px 8px 25px;}
#dcMenu li a > .dropdown-icon:before {background: url(../images/subMenu_dropdown_down.png) center center no-repeat; background-size: 10px 10px; content: " "; display: block; height: 50px; width: 50px;}
#dcMenu li.open a > .dropdown-icon:before {background: url(../images/subMenu_dropdown_up.png) center center no-repeat; background-size: 10px 10px;}
#dcMenu li ul {display: none;}
#dcMenu li.open ul {display: block;}
@-moz-document url-prefix() {
	#dcMenu .pageTitle > .dropdown-icon:before {padding-top: 12px;}
	#dcMenu.open .pageTitle > .dropdown-icon:before {padding-top: 14px;}
}
#dcMenuContainer .backBtn {border: 1px solid #ddd; border-radius: 3px; color: #9e9e9e; font-size: 14px; padding: 4px; position: absolute; right: 0; top: 5px;}
#dcMenuContainer .backBtn:hover {background: #fafafa;}
/* DC menu style end */

/* latest news inner page style start */
#innerPageMenu.news {background: #23c8cc;}
#innerPageMenu.news li a:hover, #innerPageMenu.news li.open > a, #innerPageMenu.news li.current_page_ancestor > a, #innerPageMenu.news li.current_page_item > a {color: #23c8cc;}
#innerPageMenu.news li a:hover > .dropdown-icon:before, #innerPageMenu.news li.current_page_ancestor > a > .dropdown-icon:before {background: url(../images/subMenu_dropdown_down_news.png) center center no-repeat; background-size: 10px 10px; content: " "; color: transparent; height: 50px; position: absolute; top: 0; width: 50px;}
#innerPageMenu.news li.open a > .dropdown-icon:before, #innerPageMenu.news li.current_page_ancestor.open > a > .dropdown-icon:before {background: url(../images/subMenu_dropdown_up_news.png) center center no-repeat; background-size: 10px 10px;}
#innerPageMenu.notice {background: #f48282;}
#innerPageMenu.notice li a:hover, #innerPageMenu.notice li.open > a, #innerPageMenu.notice li.current_page_ancestor > a, #innerPageMenu.notice li.current_page_item > a {color: #f48282;}
#innerPageMenu.notice li a:hover > .dropdown-icon:before, #innerPageMenu.notice li.current_page_ancestor > a > .dropdown-icon:before {background: url(../images/subMenu_dropdown_down_notice.png) center center no-repeat; background-size: 10px 10px; content: " "; color: transparent; height: 50px; position: absolute; top: 0; width: 50px;}
#innerPageMenu.notice li.open a > .dropdown-icon:before, #innerPageMenu.notice li.current_page_ancestor.open > a > .dropdown-icon:before {background: url(../images/subMenu_dropdown_up_notice.png) center center no-repeat; background-size: 10px 10px;}
/* latest news inner page style end */

#innerPageMenu li ul {display: none;}
#innerPageMenu li.open ul {display: block;}
@-moz-document url-prefix() {
	#innerPageMenu .pageTitle > .dropdown-icon:before {padding-top: 12px;}
	#innerPageMenu.open .pageTitle > .dropdown-icon:before {padding-top: 14px;}
}

#innerPageMenu:not(.dropdown) .pageTitle > .title:before {border-radius: 50%; content: " "; display: inline-block; height: 10px; left: 0; margin: 15px; position: absolute; top: 2px; width: 10px;}
#innerPageMenu:not(.dropdown) .pageTitle > .title {padding-left: 20px; padding-right: 20px; width: auto;}
/* Inner page dropdown menu style end */

/* Inner page - Breadcrumbs style start */
#breadcrumbs {color: #434343; margin-bottom: 30px; margin-top: 10px;}
#breadcrumbs .breadcrumbsList {list-style: none; padding: 0;}
.breadcrumbsList li {display: inline-block; font-size: 13px;}
.breadcrumbsList a {color: #9f959d;}
.breadcrumbsList a:hover {color: #434343;}
.breadcrumbsList li:not(:last-child):after {color: #6e5e68; content: ">"; display: inline-block; margin: 0 0 0 5px;}
.breadcrumbsList li.archive.date-day {display: none;}
/* Inner page - Breadcrumbs style end */

/* Content area style start */
#innerPageContent {padding: 0 0 100px;}
#innerPageContent .container {background: #fff;}

.lms-area {display: block; padding-bottom: 100px; width: 100%; word-wrap: break-word; word-break: break-word;}
.lms-area:after {clear: both;}
.lms-area .post-title01 {font-size: 20px; line-height: 150%; margin: 15px 0;}
.lms-area .post-title02 {font-size: 16px; font-weight: bold; line-height: 150%; margin: 5px 0;}
.lms-area .post-date {color: #999; font-size: 14px;margin-bottom: 10px;}
.lms-area .newsImg {display: block; margin-bottom: 15px; margin-top: 15px;}
.lms-area .newsImg > img {box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.22);}
.lms-area .attIcon {display: inline-block; margin-right: 20px; padding-left: 20px; position: relative;}
.lms-area .attIcon:before {content: " "; display: block; left: 0; position: absolute; top: 3px;}

.lms-area img {height: auto; max-width: 100%;}
.lms-area table {max-width: 100%;}

.lms-area .navigation {clear: both; display: table; font-family: 'Roboto', sans-serif!important; text-align: center; width: 100%;}
.lms-area .wp-paginate {list-style-type: none; margin: 30px auto 0; padding-left: 0; width: 100%;}
.lms-area .wp-paginate li {display: inline-block; line-height: 1.5em; width: 35px;}
.lms-area .wp-paginate li a {background: transparent; border: none; color: #777777; display: inline-block; font-size: 18px; margin: 0; padding: 10px; position: relative; width: 35px;}
.lms-area .wp-paginate .current {background: transparent; border: none; color: #333; display: inline-block; font-size: 18px; padding: 10px; width: 35px;}
.lms-area .wp-paginate .prev, .lms-area .wp-paginate .next {color: transparent;}
.lms-area .wp-paginate .prev.inactive, .lms-area .wp-paginate .next.inactive {cursor: default; pointer-events: none;}
.lms-area .wp-paginate .prev.inactive:after, .lms-area .wp-paginate .next.inactive:after {opacity: 0.5;}
.lms-area .wp-paginate .prev:hover, .lms-area .wp-paginate .next:hover {color: transparent;}
.lms-area .wp-paginate .prev:after, .lms-area .wp-paginate .next:after {color: #333; display: block; font-family: FontAwesome; position: absolute; text-align: center; top: calc(50% - 12px); width: 35px;}
.lms-area .wp-paginate .prev:after {content: "\f053"; left: 0;}
.lms-area .wp-paginate .next:after {content: "\f054"; right: 0;}
/* Special fix for IE9 and above */
@media screen and (-ms-high-contrast: none) {
	.lms-area table {table-layout: fixed; width: 100%;}
}
/* Inner page style end */

/* Footer style start */
footer {overflow: hidden; position: relative;}
footer #schInfo {padding-top: 50px;}
footer .container {z-index: 2;}
#schInfo {min-height: 360px; position: relative;}
footer #schInfo {min-height: 360px; position: relative;}
footer.ul_image #schInfo {background-position: center center!important; background-repeat: repeat-x; background-size: auto 100%!important; min-height: 420px;}
#schInfo .schName_ch {font-size: 28px;}
#schInfo .schName_en {font-size: 25px; letter-spacing: 0;}
#schInfo .infoList {margin-top: 20px; margin-bottom: 60px;}
#schInfo .infoList  span {display: block; font-size: 17px; line-height: 30px; margin-bottom: 10px; padding-left: 25px;}
#schInfo .infoList  span.address {line-height: 34px;}
#schInfo .infoList span:before {content: " "; display: block; height: 20px; margin-left: -25px; margin-top: 4px; vertical-align: middle; position: absolute; width: 20px;}
#schInfo .infoList span.address:before {background: url("../images/icon_address.png") center center no-repeat; background-size: auto 100%;}
#schInfo .infoList span.tel:before {background: url("../images/icon_tel.png") center center no-repeat; background-size: auto 100%;}
#schInfo .infoList span.fax:before {background: url("../images/icon_fax.png") center center no-repeat; background-size: auto 100%;}
#schInfo .infoList span.mail:before {background: url("../images/icon_mail.png") center center no-repeat; background-size: auto 100%;}
#schInfo .infoList span.web:before {background: url("../images/icon_web.png") center center no-repeat; background-size: auto 100%;}
#schInfo .infoList a.map:before {background: url("../images/icon_map.png") center center no-repeat; background-size: auto 100%; content: " "; display: inline-block; height: 34px; vertical-align: bottom; width: 30px;}
#schInfo .infoList a.map:hover:before {background: url("../images/icon_map_h.png") center center no-repeat; background-size: auto 100%;}

#copyright {color: #fff; padding: 22px 0 25px; position: relative; z-index: 2;}
#copyright span {display: block; text-align: center;}
#copyright .logo {background: url("../images/eclassLogo_w.png") center center no-repeat; background-size: auto 100%; content: " "; display: inline-block; height: 15px; margin-bottom: -2px; width: 43px;}
/* Footer style end */

#backToTop {border: 2px solid #fff; border-radius: 50%; bottom: 10px; display: block; height: 50px; opacity: 0.7; position: fixed; right: 15px; text-align: center; width: 50px; z-index: 99;}
#backToTop:hover {cursor: pointer;}
#backToTop > div:before {background: url("../images/btn_backToTop.png") center center no-repeat; background-size: auto 15px; content: " "; display: table-cell; height: 46px; width: 46px;}

@media (min-width: 360px) {
	#homework .nav-tabs > li > a {height: 34px; margin-right: 5px; padding: 7px 4px; width: 34px;}

	/* Inner page start */
	#innerPageBannerWrap {height: 71px; width: 330px;}
	#innerPageBannerWrap img {max-height: 71px; max-width: 330px;}
	/* Inner page end */
}
@media (min-width: 375px) {
	.modal .modal-title {font-size: 27px;}
	.modal button.close {height: 50px;}
	#homework .nav-tabs {padding-bottom: 20px;}
	#homework .nav-tabs > li > a {height: 34px; margin-right: 7px; padding: 7px 4px; width: 34px;}
	#homework .bootstrap-datetimepicker-widget.dropdown-menu {width: 22em;}
	#calendar .calendarFrame {padding: 30px 20px 25px;}
	#calendar ul li div {height: 34px; width: 34px;}
	#calendar ul li a {height: 30px; padding: 3px 0; width: 30px;}
	#calendar .calendarFrame:after {background-size: auto 120px; bottom: 55px; left: -33px; top: auto;}

	#alertMsg.modal button.close {top: 10px;}

	/* Useful links banner style start */
	#usefulLinks .ulBanner {height: 60px;}
	#usefulLinks .ulBanner a > img {max-height: 60px; max-width: 95%;}
	/* Useful links banner style end */
}
@media (min-width: 375px) {
	/* Inner page start */
	#innerPageBannerWrap {height: 74px; width: 345px;}
	#innerPageBannerWrap img {max-height: 74px; max-width: 345px;}
	/* Inner page end */
}
@media (min-width: 414px) {
	/* Inner page start */
	#innerPageBannerWrap {height: 83px; width: 384px;}
	#innerPageBannerWrap img {max-height: 83px; max-width: 384px;}
	/* Inner page end */
}
@media (min-width: 425px) {
	#homework .nav-tabs > li > a {margin-right: 10px;}

	/* Inner page start */
	#innerPageBannerWrap {height: 85px; width: 395px;}
	#innerPageBannerWrap img {max-height: 85px; max-width: 395px;}
	/* Inner page end */
}
@media (min-width: 480px) {
	/* Inner page start */
	#innerPageBannerWrap {height: 97px; width: 450px;}
	#innerPageBannerWrap img {max-height: 97px; max-width: 450px;}
	/* Inner page end */
}
@media (min-width: 568px) {
	/* Homework style start */
	#homework .homeworkWarp {padding: 22px 5px 10px;}
	#homework .nav-tabs > li:first-child {font-size: 23px; height: 38px; line-height: 23px; padding: 6px 0 2px 15px; width: 80px;}
	#homework .nav-tabs > li > a {font-size: 25px; height: 38px; margin-right: 18px; padding: 9px 4px; width: 38px;}
	#homework .frame_c:before {background: #fff; left: 37%; width: 48px;}
	#homework .frame_c:after {background: #ffe683; left: 75%; width: 17px;}
	#homework .bootstrap-datetimepicker-widget.dropdown-menu {width: 23em;}
	/* Homework style end */

	/* Calendar style start */
	#calendar .calendarWrap {width: calc(100% - 88px);}
	#calendar .cycle {transform: scale(1);}
	/* Calendar style end */

	#usefulLinks .ulBanner {width: 33.3%;}

	/* Inner page start */
	#innerPageBannerWrap {height: 116px; width: 538px;}
	#innerPageBannerWrap img {max-height: 116px; max-width: 538px;}
	/* Inner page end */
}
@media (min-width: 640px) {
	/* Inner page start */
	#innerPageBannerWrap {height: 131px; width: 610px;}
	#innerPageBannerWrap img {max-height: 131px; max-width: 610px;}
	/* Inner page end */
}
@media (min-width: 667px) {
	/* Inner page start */
	#innerPageBannerWrap {height: 137px; width: 637px;}
	#innerPageBannerWrap img {max-height: 137px; max-width: 637px;}
	/* Inner page end */
}
@media (min-width: 736px) {
	/* Inner page start */
	#innerPageBannerWrap {height: 152px; width: 706px;}
	#innerPageBannerWrap img {max-height: 152px; max-width: 706px;}
	/* Inner page end */
}
@media (min-width: 768px) {
	.moreBtn {height: 30px; padding: 5px 4px; min-width: 65px;}

	header {height: 300px; padding: 0;}
	header.t_image {z-index: auto;}
	#header .navbar-toggle {top: 15px; right: -10px;}
	#schLogo {padding-bottom: 5px; padding-top: 15px;}
	#schLogo .schLogo {height: 55px;}
	#schLogo .schName .schName_ch {font-size: 24px; margin-top: 7px;}
	#schLogo .schName .schName_en {font-size: 16px;}

	#alertMsg .modal-header {padding: 17px 65px 8px;}
	.modal button.close {height: 60px; width: 60px;}
	.modal .modal-header {min-height: 55px;}
	.modal .modal-title {font-size: 30px;}

	#slideshowArea {margin-top: -50px;}

	/* latest news style start */
	#latestNews {margin: 50px 0 40px;}
	#latestNews .title:before {height: 35px; margin-right: 10px; width: 35px;}
	body.en #latestNews .title:before {vertical-align: text-top;}
	#latestNews .title, body.en #latestNews .title {font-size: 32px;}
	#latestNews .withImg .newsTitle {float: left; width: calc(100% - 160px);}
	#latestNews .withImg .newsImg {margin-top: 0;}
	#latestNews .noRecord {padding: 40px 15px;}
	/* latest news style end */

	/* notice style start */
	#notice {margin: 50px 0 40px;}
	#notice .title:before {height: 35px; margin-right: 10px; width: 35px;}
	body.en #notice .title:before {vertical-align: text-top;}
	#notice .title, body.en #notice .title {font-size: 32px;}
	#notice .noRecord {padding: 40px 15px;}
	/* notice style end */

	/* homework style start */
	#homework .title:before {height: 35px; margin-right: 10px; width: 35px;}
	body.en #homework .title:before {vertical-align: text-top;}
	#homework .title, body.en #homework .title {font-size: 32px;}
	#homework.ip .homeworkWarp {padding: 40px 15px 0;}
	#homework.ip .subjectGroup {margin: 15px auto 30px; width: 80%;}
	#homeworkDetails.ip .hwInfo {width: 522px;}

	#homeworkDetails.withHw .modal-dialog {display: table; max-width: 570px; min-width: 300px; width: auto;}
	#homeworkDetails.noHw .modal-dialog {display: block; max-width: 400px;}

	#homework .loading {padding: 70px 0;}
	/* homework style end */

	/* calendar style start */
	#calendar .title span:before {height: 35px; margin-right: 10px; width: 35px;}
	body.en #calendar .title:before {vertical-align: text-top;}
	#calendar .title, body.en #calendar .title {font-size: 32px;}
	#calendarDetails .modal-body {max-height: 370px;}
	@media (max-height: 568px) and (orientation: landscape) {
		#calendarDetails .modal-body {max-height: calc(90vh - 83px);}
	}
	#calendarDetails .modal-dialog {max-height: 460px; height: 90vh; width: 570px;}
	#calendar .loading {padding: 70px 0;}
	/* calendar style end */

	/* Useful links banner style start */
	#usefulLinks:before {clear: both; content: " "; display: table; height: 50px;}
	#usefulLinks .ulBanner {height: 81px;}
	#usefulLinks .ulBanner a > img {max-height: 81px;}
	/* Useful links banner style end */

	#alertMsg.modal button.close {right: 4px; top: 4px;}

	/* Inner page style start */
	#innerPageBanner {margin-top: -200px;}
	#innerPageBannerWrap {height: 159px; width: 738px;}
	#innerPageBannerWrap img {max-height: 159px; max-width: 738px;}
	#innerPageMenu {margin-left: 100px; vertical-align: middle; max-width: calc(100% - 100px); width: auto;}
	#innerPageMenu img {display: block; left: -100px; max-height: 85px; position: absolute; top: -20px;}
	#innerPageMenu .pageTitle > .title {max-height: 40px; padding-left: 55px; padding-right: 25px;}
	/* Inner page style end */

	/* Footer style start */
	#schInfo .container {padding: 0 30px;}
	#copyright .container {padding: 0 30px;}
	#copyright .row > span:first-child {text-align: left; padding-left: 0;}
	#copyright .row > span:last-child {text-align: right; padding-right: 0;}
	/* Footer style end */

	#backToTop {bottom: 90px; right: 30px;}
}
@media (min-width: 812px) {
	#innerPageBannerWrap {height: 168px; width: 782px;}
	#innerPageBannerWrap img {max-height: 168px; max-width: 782px;}
}
@media (min-width: 853px) {
	#innerPageBannerWrap {height: 177px; width: 823px;}
	#innerPageBannerWrap img {max-height: 177px; max-width: 823px;}
}
@media (min-width: 896px) {
	#innerPageBannerWrap {height: 187px; width: 866px;}
	#innerPageBannerWrap img {max-height: 187px; max-width: 866px;}
}
@media (max-width: 991px) {
	body:not(.mmOpen) #mainMenu {display: none;}
	#header .navbar-toggle {position: fixed;}
}

@media (min-width: 992px) {
	.moreBtn {font-size: 17px; height: 35px; padding: 5px 4px; min-width: 75px;}

	header {min-height: 375px; margin-top: 0; padding: 0 15px;}
	header.ul_image {background-size: auto 350px!important;}
	#schLogo {background: transparent; box-shadow: none; padding: 40px 15px; position: relative;}
	#schLogo .schLogo {height: 70px;}
	#schLogo .schName .schName_ch {font-size: 28px; margin-top: 7px;}
	#schLogo .schName .schName_en {font-size: 20px;}
	#login {display: block; margin-top: 18px; padding: 17px 15px; text-align: right;}
	#login form {display: inline-block;}
	#login .logo {display: inline-block; height: 19px; margin-right: 10px;}
	#login a:not(.btn_login):not(.btn_lang) {background: rgba(255,255,255,0.8); border-radius: 20px 0 0 20px; display: inline-block; height: 40px; margin-right: -4px; padding: 8px 5px 7px 15px; position: relative;}
	#login a:not(.btn_login):not(.btn_lang):after {background: #e6e6e6; content: " "; height: 22px; position: absolute; right: 0; top: 9px; width: 1px;}
	#login .input {background: rgba(255,255,255,0.8); border-radius: 0 5px 5px 0; display: inline-block; height: 40px; padding: 8px 0; width: 235px;}
	#login .form-control {background: transparent; border: 0; box-shadow: none; color: #adadad; display: inline-block; font-size: 14px; height: 22px; padding: 0 20px 0 10px;}
	#login .form-control:first-child {border-radius: 0; border-right: #e6e6e6 solid 1px; padding: 0; width: 90px;}
	#login .form-control:last-child {width: calc(100% - 108px);}
	#login .btn_login {background: url(../images/btn_login.png) center center no-repeat; background-size: 100% 100%; border-radius: 3px; display: inline-block; height: 32px; margin-left: -20px; position: absolute; width: 32px; top: 21px; transition: background-image 0.3s ease-in-out;}
	#login .btn_lang {border-radius: 50%; color: #fff; display: inline-block; height: 40px; margin-left: 35px; padding: 9px 0;  text-align: center; transition: 0.3s ease-in-out; vertical-align: middle; width: 42px;}
	#login .btn_lang:hover {box-shadow: 0 0 2px rgba(0,0,0,0.15);}

	/* main menu style start */
	#mainMenu {height: auto; max-height: none; min-height: 70px; margin-bottom: 5px; margin-top: -70px; overflow-y: visible; position: relative;}
	#mainMenu .navbar-header {display: none;}
	#mainMenu .container {margin: 0 auto; padding: 0;}
	#mainMenu .navbar-nav {float: none; display: flex; flex-wrap: wrap; justify-content: center; margin: 0 auto; padding: 0 21px; position: relative; width: 100%;}
	#mainMenu .navbar-nav:before {height: 36px; width: 13px; left: 8px; position: absolute; top: -10px;}
	#mainMenu .navbar-nav:after {height: 36px; width: 13px; right: 8px; position: absolute; top: -10px;}

	#mainMenu .dropdown-menu {border: 0; box-shadow: 0 4px 2px rgba(0,0,0,0.3); margin: 0; min-width: 175px;}
	#mainMenu ul li {min-height: 45px; position: relative;}
	#mainMenu li.login, #mainMenu li.lang {display: none;}
	#mainMenu #navbar > ul > li {font-size: 20px;}
	.en #mainMenu #navbar > ul > li {font-size: 16px;}
	#mainMenu .nav > li > .dropdown-toggle {display: none;}
	#mainMenu .dropdown .dropdown-toggle > .dropdown-icon:before {background: url("../images/menu_arrow.png") center center no-repeat; background-size: 100% 100%;}
	#mainMenu .nav .dropdown-toggle {height: 45px; right: 0; top: 0; width: 40px;}
	#mainMenu .nav > li:hover > .dropdown-menu {display: block; z-index: 99;}
	#mainMenu .nav > li.showRight:hover > ul {left: auto; right: 0;}
	#mainMenu .sub-level a, #mainMenu .sub-level .dropdown-menu.children .page_item a, #mainMenu .dropdown-menu.children .dropdown-menu.children a:not(.dropdown-toggle) {padding: 11px 35px 11px 15px;}
	#mainMenu .nav > li > .dropdown-menu li:hover > .dropdown-menu {display: block; left: 100%; margin-top: 0; top: 0; z-index: 98;}
	#mainMenu .nav > li > .dropdown-menu li:hover > .dropdown-menu a {padding: 11px 15px;}
	#mainMenu #navbar > ul > li {border-bottom: none; display: table-cell; float: none; width: 12.5%; position: relative; text-align: center;}
	#mainMenu .navbar-nav > li:nth-child(n+9) {margin-top: 55px;}
	#mainMenu #navbar > ul > li::before {content: " "; display: block; height: calc(100% + 10px); position: absolute; width: 100%;}
	#mainMenu .navbar-nav > li:not(:nth-last-child(-n+3)):after {content: " "; display: block; height: 32px; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px;}
	#mainMenu .navbar-nav > li:nth-child(8n+0):after {display: none;}
	#mainMenu .navbar-nav > li > ul > li.showRight > ul {left: -100%!important;}
	#mainMenu #navbar > ul > li.login, #mainMenu #navbar > ul > li.lang {display: none;}
	#mainMenu .nav > li:hover > .dropdown-menu {border-radius: 5px; color: #fff; margin-top: 10px; padding: 5px 0;}
	#mainMenu .navbar-nav > li > a {align-items: center; display: flex; font-weight: bold; height: 100%; justify-content: center;}
	#mainMenu .dropdown > a {color: #fff;}
	#mainMenu .navbar-nav > li:not(.login):not(.lang) > a:not(.dropdown-toggle) {padding: 16px 8px 10px;}
	#mainMenu .sub-level .page_item {background: transparent;}
	#mainMenu .sub-level .dropdown-menu.children .page_item {background: transparent;}
	#mainMenu .page_item a {color: #fff}
	#mainMenu .page_item a:first-child {width: auto;}
	#mainMenu .nav > li > .dropdown-menu li:hover > .dropdown-menu {border-radius: 0 5px 5px 5px; left: 100%!important; top: -5px!important; padding: 5px 0;}
	#mainMenu .nav > li > .dropdown-menu li.showRight:hover > .dropdown-menu {border-radius: 5px 0 5px 5px; left: -100%!important;}
	#mainMenu .dropdown .dropdown-toggle > .dropdown-icon:before {background: url("../images/menu_arrow_right.png") center center no-repeat; background-size: 100% 100%; height: 11px; width: 11px;}
	#mainMenu img {left: 50%; max-height: 100px; max-width: 85px; top: -55px; transform: translateX(-50%);}

	#headerSpace {display: none;}
	/* main menu style end */

	#slideshowArea {margin-top: 0;}

	/* latest news style start */
	#latestNews ::-webkit-scrollbar {background: #fff; height: 6px; width: 6px;}
	#latestNews ::-webkit-scrollbar-track {background: #e9fdff; border-radius: 3px;}
	#latestNews ::-webkit-scrollbar-thumb {background: #26cbd3; border-radius: 3px;}
	#latestNews .title:before {height: 40px; margin-right: 10px; width: 40px;}
	#latestNews #newsList {max-height: 385px; overflow: auto; padding-right: 10px;}
	#latestNews .title, body.en #latestNews .title {font-size: 35px;}

	#latestNews .loading {padding: 100px 0;}

	#latestNews.col-md-6 {padding-right: 24px;}
	#latestNews.col-md-6 #newsList {height: 385px;}
	#latestNews.col-md-6 .noRecord {height: 385px; padding: 100px 15px;}
	/* latest news style end */

	/* notice style start */
	#notice ::-webkit-scrollbar {background: #fff; height: 6px; width: 6px;}
	#notice ::-webkit-scrollbar-track {background: #fff3f3; border-radius: 3px;}
	#notice ::-webkit-scrollbar-thumb {background: #f79c9c; border-radius: 3px;}
	#notice .title:before {height: 40px; margin-right: 10px; width: 40px;}
	#notice #noticeList {max-height: 385px; overflow: auto; padding-right: 10px;}
	#notice .title, body.en #notice .title {font-size: 35px;}
	#notice .loading {padding: 100px 0;}

	#notice.col-md-6 {padding-left: 24px;}
	#notice.col-md-6 #noticeList {height: 385px;}
	#notice.col-md-6 .noRecord {height: 385px; padding: 100px 15px;}
	/* notice style end */

	/* homework style start */
	#homework {margin: 40px 0 20px;}
	#homework .title:before {height: 40px; margin-right: 10px; width: 40px;}
	#homework .title, body.en #homework .title {font-size: 35px;}
	#homework .homeworkWarp {padding: 45px 5px 40px;}
	#homework .classArea {margin-top: 40px;}
	#homework .classTab > .classkWarp:after {border-radius: 3px; height: 6px;}
	#homework .nav-tabs > li.active > a:after {bottom: -27px; height: 10px; width: 10px;}
	#homework .loading {height: 193px;}

	#homework.col-md-6 {padding-left: 24px;}
	#homework:not(.col-md-6) .hwFrame {margin-left: auto; margin-right: auto;}
	#homework:not(.col-md-6) .hwFrame:before {background: url("../images/bg_hw.png") center center no-repeat; background-size: auto 500px; content: " "; display: block; height: 100%; left: 0; position: absolute; top: 0; width: 100%; z-index: 0;}
	#homework:not(.col-md-6) .hwFrameFooter {left: 50%; /*max-width: 1000px;*/ transform: translateX(-50%);}
	#homework .frame_l:before {left: 5px;}
	#homework:not(.col-md-6) .form-group {max-width: 500px;}
	#homework:not(.col-md-6) .classArea {max-width: 500px;}

	#homework.ip .subjectGroup {max-width: 500px; width: 100%;}
	#homework.ip:not(.col-md-6) .subjectGroup {max-width: 550px;}
	#homework.ip .subjectGroupList {max-height: 190px; overflow-y: auto; padding: 5px 5px 20px;}
	#homework.ip.col-md-6 .subjectGroupList {height: 190px;}
	/* homework style end */

	/* Calendar style start */
	#calendar .title span:before {height: 40px; margin-right: 10px; width: 40px;}
	#calendar .title, body.en #calendar .title {font-size: 35px;}
	#calendar ul {height: 275px; margin: 20px auto auto;}
	#calendar .cycle {transform: scale(1);}
	#calendar .loading {height: 225px; padding: 90px 0;}

	#calendar.col-md-6 {padding-left: 24px;}
	#calendar:not(.col-md-6) .year_month {max-width: 500px;}
	#calendar:not(.col-md-6)  ul {max-width: 500px;}
	/* Calendar style end */

	/* Useful links banner style start */
	#usefulLinks .ulBanner {height: 75px; width: 25%;}
	#usefulLinks .ulBanner a > img {max-height: 75px;}
	/* Useful links banner style end */

	/* Modal box strat */
	#alertMsg .modal-dialog {width: 780px;}
	/* Modal box end */

	/* Inner page style start */
	#innerPageBanner {margin-bottom: 0; margin-top: 0px; padding: 0 30px;}
	#innerPageContent {padding: 60px 30px 100px;}
	#innerPageContent .container {border-radius: 20px; padding: 0 20px;}
	#innerPageBannerWrap {height: 207px; width: 962px;}
	#innerPageBannerWrap img {max-height: 207px; max-width: 962px;}
	/* Inner page style end */

	#backToTop {right: 40px;}
}

@media (min-width: 1024px) {
	#innerPageBannerWrap {height: 208px; width: 964px;}
	#innerPageBannerWrap img {max-height: 208px; max-width: 964px;}
}
@media (min-width: 1080px) {
	#innerPageBannerWrap {height: 220px; width: 1020px;}
	#innerPageBannerWrap img {max-height: 220px; max-width: 1020px;}
}

@media (min-width: 1200px) {
	#schLogo .schName .schName_en {font-size: 25px;}
	.en #mainMenu #navbar > ul > li {font-size: 18px;}

	/* Index modules style end */
	#homework .nav-tabs > li:first-child {padding: 6px 0 2px 15px; width: 80px;}
	#homework.ip .subjectGroup {margin-bottom: 15px;}
	#homework.ip .subjectGroupList {padding-bottom: 0;}
	#calendar:not(.col-md-6) .calendarFrame {background-size: auto 150px, auto 250px;}

	#usefulLinks .ulBanner {height: 90px; margin-bottom: 20px;}
	#usefulLinks .ulBanner a > img {max-height: 90px; max-width: 250px;}
	/* Index modules style end */

	/* Inner page start */
	#innerPageBanner .container {width: 1140px;}
	#innerPageBannerWrap {height: 246px; width: 1140px;}
	#innerPageBannerWrap img {max-height: 246px; max-width: 1140px;}
	/* Inner page end */

}

@media (min-width: 1280px) {
	.container {width: 1250px;}

	/* Inner page start */
	#innerPageBanner .container {width: 1250px;}
	#innerPageBannerWrap {height: 269px; width: 1250px;}
	#innerPageBannerWrap img {max-height: 269px; max-width: 1250px;}
	/* Inner page end */

	#innerPageContent .container {width: 1250px;}
}

@media (min-width: 1366px) {
	.container {width: 1330px;}

	/* Inner page start */
	#innerPageBanner .container {width: 1300px;}
	#innerPageBannerWrap {height: 280px; width: 1300px;}
	#innerPageBannerWrap img {max-height: 280px; max-width: 1300px;}
	/* Inner page end */

	#innerPageContent .container {width: 1300px;}
}

@media (min-width: 1600px) {
	#backToTop {bottom: 50px; right: 50px;}
}