@charset "utf-8";
@import url('https://fonts.googleapis.com/css?family=Roboto:400,700|Ubuntu:300,400');
/* CSS Document */
::-webkit-scrollbar {border-radius: 2.5px; height: 6px; width: 6px;}
::-webkit-scrollbar-track {background: #fff; border-radius: 2.5px;}
::-webkit-scrollbar-thumb {background: #bbb; border-radius: 2.5px;}
body {color: #434343; font-family: 'Ubuntu', "微軟正黑體", Helvetica, Arial, sans-serif; font-size: 16px; position: relative; word-break: break-word;}
body.mmOpen {max-height: 100%; overflow-y: hidden;}
body.mmOpen:after {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;}
a, a:hover, a:focus {cursor: pointer; text-decoration: none;}
button:focus {outline: none;}
div.alignleft {float: left;}
div.aligncenter {margin: 0 auto;}
div.alignright {float: right;}
.container {width: 100%;}

.zh .zh-hide, .en .en-hide {display: none;}
.modal-backdrop {background: transparent;}
.modal-dialog {box-shadow: 0 0 16px rgba(0, 0, 0, 0.29); left: 50%; margin: auto; max-height: 90vh; 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 button.close {display: block; height: 60px; opacity: 1; position: absolute; right: 0; top: 0; width: 50px;}
.modal .close .icon {background: url(../images/close.png) center center no-repeat; background-size: cover; display: block; height: 20px; margin: auto; width: 20px;}
.modal .modal-content {border: 0; border-radius: 0;}
.modal .modal-header {background: #999; color: #fff; min-height: 55px; padding: 11px;}
.modal .modal-title {font-size: 22px; max-width: calc(100% - 50px); position: relative;}
.modal .modal-header .small {color: #fff; font-size: 20px;}
.modal .modal-body {padding: 20px 25px;}
.loading {color: #333; display: table; margin: 30px 0; opacity: 0.2; text-align: center; width: 100%;}
.indexHr {background: url(../images/hr.png) no-repeat center bottom; background-size: 100% 100%; border: 0; height: 25px; margin: 25px 0; width: 100%;}
#backToTop {background: rgba(67, 67, 67, 0.29);}

/* Header style start */
header {background: #fff; border-top: 5px solid; padding: 7px 0 2px; position: fixed; top: 0; width: 100%; z-index: 1001;}
/*#schLogo {max-width: calc(100vw - 35px);}*/
body.mmOpen header {-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.15); box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);}
#schLogo .schLogoContainer {max-width: calc(100% - 35px);}
#schLogo .schLogoContainer img {float: left; margin-left: -10px; margin-right: 5px; height: 40px; z-index: 3;}
#schLogo .schName {display: table-cell; height: 40px; vertical-align: middle;}
#schLogo a {color: #212121; display: inline-block;}
#schLogo .schName .schName_ch {display: block; font-size: 18px; line-height: 1.2em;}
#schLogo .schName .schName_en {display: block; font-size: 12px; line-height: 1.2em;}
#header .navbar-toggle {margin-right: 5px; margin-top: 5px; position: fixed; right: 0; top: 10px; z-index: 999;}
/* Header style end */

/* Main menu style start */
body.mmOpen #mainMenu {border: 0; margin-bottom: 0; opacity: 1; z-index: 500;}
#navbar {border: 0; width: 100%; z-index: 2;}
#navbar > ul {background: #fff; display: block; margin: 0 -15px; position: absolute; width: 100%;}
#mainMenu .nav .dropdown-toggle {display: block; font-size: 12px; float: right; height: 35px; padding: 0; position: absolute; text-align: center; right: 0; top: 0; width: 35px;}
#mainMenu .nav .dropdown-toggle > .dropdown-icon {color: #fff; display: block; height: 38px; text-align: center; width: 38px;}
#mainMenu .nav .dropdown-toggle > .dropdown-icon:before {content: "\f0d7"; font-family: FontAwesome; position: absolute; right: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}
#mainMenu .open > .dropdown-toggle > .dropdown-icon:before {content: "\f0d8";}
#mainMenu .nav > li > a:hover, #mainMenu .nav > li > a:focus {background-color: transparent;}
#mainMenu .nav .open > a, #mainMenu .nav .open > a:hover, #mainMenu .nav .open > a:focus {background-color: transparent; border: none;}
#mainMenu .dropdown-menu > li > a:hover, #mainMenu .dropdown-menu > li > a:focus {background-color: transparent;}
/* Main menu style end */

/* Index modules style starts */
.modules-break {height: 30px; width: 100%;}
h1.title {font-size: 25px; letter-spacing: 1px; margin: 0 auto 20px; position: relative; padding-left: 32px; text-indent: 1px; word-spacing: 5px;}
h1.title:before {content: " "; display: inline-block; height: 25px; left: 0; position: absolute; top: -1px; width: 25px;}
.moreBtn {border-radius: 3px; color: #fff; display: block; float: right; margin: -2px auto 0; padding: 3px; text-align: center; width: 70px; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
.moreBtn:hover {-webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -ms-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; transition: all 0.2s ease-in-out;}
a.moreBtn:hover, a.moreBtn:focus {color: #fff;}
.attIcon:before {background: url(../images/attachIcon.png) no-repeat center 1px; background-size: auto 100%; content: " "; display: inline-block; height: 16px; margin-right: 4px; width: 16px; -webkit-transition: color 0.2s ease; transition: color 0.2s ease;}
.attIcon:hover:before {background: url(../images/attachIconH.png) no-repeat center 1px; background-size: auto 100%; content: " ";}
#calendar .loading, #latestNews .loading, #notice .loading, #homework .loading {font-size: 30px; padding: 30px;}

/* Slider style start*/
#sliderDetails .modal-body .title {font-size: 21px;}
#sliderDetails .modal-body p {margin-top: 16px;}
/* Slider style end*/

/* Calendar style start */
#calendar {margin-bottom: 50px; padding: 10px;}
#calendar .calendarWrap {display: table; max-width: 400px; margin: 0 auto; width: calc(100% - 10px);}
#calendar .year_month {font-size: 23px; height: 30px; margin: 0 0 15px; position: relative; text-align: center; width: 100%;}
#calendar .year_month a:hover {color: #434343;}
#calendar .btn_lastmonth {float: left;}
#calendar .btn_nextmonth {float: right;}
#calendar .btn_lastmonth:before, #calendar .btn_nextmonth:before {display: inline-block; font-family: 'Glyphicons Halflings'; font-size: 14px; height: 30px; width: 30px;}
#calendar .btn_lastmonth:before {content: "\e257";}
#calendar .btn_nextmonth:before {content: "\e258";}
#calendar ul {list-style: none; padding: 0; width: 100%;}
#calendar li {color: #7c7c7c; display: inline-block; float: left; font-size: 17px; margin: 2px 0; padding: 5px 0 0; text-align: center; width: 14.2%;}
#calendar li.cal_head {margin-bottom: 5px; padding: 0;}
#calendar ul div {border: 2px solid transparent; border-radius: 50%; display: block; height: 28px; margin: auto; position: relative; width: 28px;}
#calendar li:not(.noEvent):not(.blank_date) div:hover {box-shadow: 0 0 8px rgba(0, 0, 0, 0.19);}
#calendar li.noEvent a {cursor: default; pointer-events: none;}
#calendar a {color: #7c7c7c; display: table-cell; height: 24px; vertical-align: middle; width: 24px;}
#calendar .holiday div {background: #f0f0f0;}
#calendar .date {font-size: 16px;}
#calendar .cycle {display: block; font-size: 12px; opacity: 0.6; position: absolute; right: -12px; text-align: center; top: -8px; transform: scale(0.75); width: 15px;}

#calendarDetails ::-webkit-scrollbar-track {border-radius: 0;}
#calendarDetails ::-webkit-scrollbar-thumb {border-radius: 0;}
#calendarDetails .tbl_events {display: block; max-height: calc(90vh - 85px); min-height: 115px; overflow-y: auto; padding: 0 10px; width: 100%;}
#calendarDetails .tbl_events tr:not(:last-child) {border-bottom: 1px solid #e7e7e7;}
#calendarDetails .tbl_events td {color: #545454; vertical-align: top;}
#calendarDetails .tbl_events td:first-child {min-width: 80px; padding: 15px 10px 15px 0;}
#calendarDetails .tbl_events td:first-child.holiday {color: #888;}
#calendarDetails .tbl_events td:last-child {padding: 15px 10px; width: 100%;}
/* Calendar style end */

/* Latest news style start */
#latestNews {margin-bottom: 30px; padding: 10px;}
#latestNews h1.title {float: left; margin: 0 5px 25px 0; width: calc(100% - 75px);}
#latestNews #newsList {list-style: none; margin: 15px 0; padding: 0 5px; width: 100%;}
#latestNews #newsList a {display: inline-block; position: relative; width: 100%;}
#latestNews #newsList a:not(:last-child) {margin-bottom: 30px;}
#latestNews #newsList a:after {content: " "; display: table; width: 100%;}
#latestNews h2.newsTitle {font-size: 16px; margin: 0 0 10px;}
#latestNews .moreBtn:hover {background: #434343;}
#latestNews a:hover h2.newsTitle {color: #434343;}
#latestNews a:hover .attIcon:before {background: url(../images/attachIconH.png) no-repeat center 1px; background-size: auto 100%; -webkit-transition: color 0.2s ease; transition: color 0.2s ease;}
#latestNews .withImg .newsImg {box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.22); float: right; display: block; height: 110px; overflow: hidden; position: relative; text-align: center; width: 110px;}
#latestNews .withImg .newsImg > img {height: auto; left: 0; position: absolute; top: 50%; transform: translateY(-50%); width: 110px;}
#latestNews .withImg.noNewsDes h2.newsTitle {float: left; width: calc(100% - 130px);}
#latestNews .newsDes, #latestNews .newsDate {color: #545454; display: block;}
#latestNews .newsDes {margin-top: 5px; max-height: 90px;}
#latestNews .withImg .newsDes, #latestNews .withImg .newsDate {float: left; width: calc(100% - 130px);}
#latestNews li:not(.noNewsDes) .newsDes {margin-bottom: 2px;}
#latestNews .newsDate {color: #aeaeae;}
#latestNews .noRecord {display: table; margin: 15px 0; padding: 15px; text-align: center; width: 100%;}
/* Latest news style end */

/* Notice style start */
#notice {margin-bottom: 30px; padding: 10px;}
#notice h1.title {float: left; margin: 0 5px 25px 0; width: calc(100% - 75px);}
#notice #noticeList {list-style: none; margin: 15px 0;  padding: 0 5px; width: 100%;}
#notice #noticeList a {display: inline-block; width: 100%;}
#notice #noticeList a:not(:last-child) {margin-bottom: 30px;}
#notice #noticeList > a:after {content: " "; display: table; width: 100%;}
#notice :not(.moreBtn) a {color: #545454;}
#notice .moreBtn:hover {background: #434343;}
#notice h2.noticeTitle {font-size: 16px; margin: 0 0 10px;}
#notice a:hover h2.noticeTitle {color: #434343;}
#notice a:hover .attIcon:before {background: url(../images/attachIconH.png) no-repeat center 1px; background-size: auto 100%; -webkit-transition: color 0.2s ease; transition: color 0.2s ease;}
#notice .noticeDes {display: block; max-height: 90px;}
#notice .noticeAtt, #notice .noticeDate {display: block;}
#notice .noticeDate {color: #adadad;}
#notice .noRecord {display: table; margin: 15px 0; padding: 15px; text-align: center; width: 100%;}
/* Notice style end */

/* Homework style start */
#homework {margin-bottom: 30px; padding: 10px;}
#homework h1.title {color: #fff; font-size: 25px; letter-spacing: 2px; margin: 0 auto 10px; text-indent: 2px; word-spacing: 5px;}
#homework .homeworkWarp {margin: 0 auto; max-width: 565px;}
#homework .classArea {margin: 0 auto;}
#homework .form-group {margin: 30px 0 20px;}
#homework .input-group {border-radius: 3px; margin: auto; width: 100%;}
#homework.ip .input-group {max-width: 325px;}
#homework .input-group .form-control {background: #fff; border: none; box-shadow: none; font-size: 18px; height: auto; padding: 10px 20px;}
#homework .input-group .form-control:hover {color: #434343; cursor: pointer;}
#homework .input-group .input-group-addon {border: none; height: 45px; width: 45px;}
#homework .input-group .input-group-addon:hover {background: url(../images/calendarIconH.png) center center no-repeat; background-size: auto 45px;}
#homework .classTab {border: 1px solid #e3e3e3; border-radius: 3px; box-shadow: 0 0 6px rgba(3, 0, 0, 0.09); margin: auto; width: 100%;}
#homework .classTab ul.nav-tabs {border: none; padding-top: 6px;}
#homework .classTab ul.nav-tabs li {color: #fff; display: inline-block; height: 35px; text-align: center; vertical-align: middle;}
#homework .classTab ul.nav-tabs li:first-child span {font-size: 18px; display: table-cell; height: 35px; vertical-align: middle; width: 65px;}
#homework .classTab ul.nav-tabs li:not(:first-child) {margin-right: 3px;}
#homework .classTab .nav-tabs a {color: #fff;}
#homework .classTab ul.nav-tabs a {background: transparent; border: 0; display: table-cell; font-size: 20px; height: 35px; padding: 0; vertical-align: middle; -webkit-transition: all 0.5s ease; transition: all 0.5s ease;}
#homework .classTab ul.nav-tabs > li.active > a, #homework .nav-tabs > li.active > a:hover, #homework .nav-tabs > li.active > a:focus {background: #fff;}
#homework .classTab ul.nav-tabs.item-3 a {width: 70px;}
#homework .classTab ul.nav-tabs.item-6 a {width: 35px;}
#homework .classTab ul.nav-tabs > li:hover:not(.active) > a {background: rgba(255, 255, 255, 0.17);}
#homework .classList {height: 130px; list-style: none; margin: 0; padding: 17px 20px;}
#homework .classList:after {content: " "; clear: both; display: table;}
#homework .classList > li {display: inline-block; float: left; height: 47px; margin-bottom: 3px; text-align: center; vertical-align: middle; width: 20%;}
#homework .classList > li > a {border-radius: 3px; display: inline-block; font-size: 20px; height: 47px; text-align: center; padding-top: 9px; width: 47px; -webkit-transition: all 0.5s ease; transition: all 0.5s ease;}
#homework .classList > li > a:hover {background: #f3f3f3; -webkit-transition: all 0.5s ease; transition: all 0.5s ease;}
#homework .tab-content {background: #fff;}
#homework .datepicker {color: #fff;}
#homework .datepicker table {border-collapse: inherit;}
#homework .bootstrap-datetimepicker-widget .list-unstyled {margin: 10px auto;}
#homework .bootstrap-datetimepicker-widget table thead tr:first-child th {font-size: 18px; font-weight: normal;}
#homework .bootstrap-datetimepicker-widget table thead tr:first-child th:hover {background: rgba(255, 255, 255, 0.15);}
#homework .bootstrap-datetimepicker-widget table thead tr:first-child th.prev, #homework .bootstrap-datetimepicker-widget table thead tr:first-child th.next {font-size: 12px;}
#homework .bootstrap-datetimepicker-widget table thead tr:last-child th.dow {color: #7c7c7c; padding-top: 15px;}
#homework .bootstrap-datetimepicker-widget table td span {color: #7c7c7c;}
#homework .bootstrap-datetimepicker-widget table td span:hover, #homework .bootstrap-datetimepicker-widget table td span.active {background: #f0f0f0; color: #7c7c7c;}
#homework .bootstrap-datetimepicker-widget table td.old {visibility: hidden;}
.bootstrap-datetimepicker-widget table td.new {display: none;}
.bootstrap-datetimepicker-widget table td.today:before {bottom: 0; border-radius: 50%; height: 32px; left: 50%; right: 0; top: 50%; transform: translate(-50%, -50%); width: 32px;}
#homework .homeworkWarp .bootstrap-datetimepicker-widget.dropdown-menu:before, #homework .homeworkWarp .bootstrap-datetimepicker-widget.dropdown-menu:after, #homework .homeworkWarp .bootstrap-#homework .datetimepicker-widget.dropdown-menu:before, #homework .homeworkWarp .bootstrap-datetimepicker-widget.dropdown-menu:after {display: none;}
#homework .bootstrap-datetimepicker-widget.dropdown-menu {border: none; margin: 0; width: 100%; box-shadow: 0 0 16px rgba(0, 0, 0, 0.29);}
#homework .bootstrap-datetimepicker-widget table td.day {border-radius: 50%; color: #7c7c7c; height: 32px; position: relative;}
#homework .bootstrap-datetimepicker-widget table td.day:hover {background: url(../images/dayPickerBg.png) center center no-repeat; background-size: auto 100%;}
#homework .bootstrap-datetimepicker-widget table td.active, #homework .bootstrap-datetimepicker-widget table td.active:hover {background: url(../images/dayPickerBg.png) center center no-repeat; background-size: auto 100%;}
#homework .bootstrap-datetimepicker-widget table td.active:before, #homework .bootstrap-datetimepicker-widget table td.active:hover:before {border-radius: 50%; content: " "; display: block; height: 30px; left: 50%; position: absolute; transform: translate(-50%, -50%); top: 50%; width: 30px;}
#homework.ip {padding: 20px 15px 17px;}
#homework.ip .form-group {margin: 20px 0 25px;}
#homework.ip .subjectGroupList {list-style: none; padding-left: 0px;}
#homework.ip .subjectGroupList.en {font-family: 'Ubuntu', "微軟正黑體", Helvetica, Arial, sans-serif;}
#homework.ip .subjectGroupList .groupItem {margin-bottom: 25px; position: relative;}
#homework.ip .selectGroup:focus {outline: none;}

#homework.ip .groupItem a:focus {outline: none;}
#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% - 115px);}
#homework.ip .subjectGroupList.en .bootstrap-select {width: 100%;}
#homework.ip .subjectGroupList .btn:active, #homework.ip .subjectGroupList .btn.active {box-shadow: none;}
#homework.ip .bootstrap-select {cursor: pointer; display: inline-block; outline: none; position: relative; vertical-align: middle;}
#homework.ip .bootstrap-select button {background: #fff; border: 0; font-size: 18px; min-height: 45px; padding: 6px 10px;}
#homework.ip .dropdown-menu {margin: 0; padding: 0; z-index: 10;}
#homework.ip .dropdown-menu > li > a {color: #fff; padding: 12px 10px; white-space: normal;}
#homework.ip .caret {border-top: 5px dashed; border-top: 5px solid \9; border-right: 5px solid transparent; border-left: 5px solid transparent;}
#homework.ip .btn-group.open .dropdown-toggle {box-shadow: none;}
#homework.ip .btn-default:active, #homework.ip .btn-default.active, #homework.ip .open > .dropdown-toggle.btn-default {background-color: #fff; border-color: #ddd;}
#homework.ip .dropdown-backdrop {display: none;}
#homework.ip .bootstrap-select.btn-group .dropdown-menu.inner {font-size: 18px;}
#homework.ip .bootstrap-select.btn-group .dropdown-menu li {min-height: 45px;}
#homework.ip .bootstrap-select .dropdown-toggle:focus {outline: none;}
#homework.ip .btn-default:focus, .btn-default.focus {outline: none!important;}

#homework.ip .dropdown-menu > li > a:hover, #homework.ip .dropdown-menu > li > a:focus {background-color: rgba(255, 255, 255, 0.15);}

#homeworkDetails ::-webkit-scrollbar-track {border-radius: 0;}
#homeworkDetails ::-webkit-scrollbar-thumb {border-radius: 0;}
#homeworkDetails .modal .modal-title {font-size: 25px;}

#homeworkDetails.noHw .modal-dialog {max-height: 60vh;}
#homeworkDetails .modal-content {border: 0; border-radius: 0;}
#homeworkDetails.noHw .modal-body, #homeworkDetails.ip.noHw .modal-body {font-size: 20px; height: 145px; padding: 50px; text-align: center;}
#homeworkDetails.noHw .loading {display: block; font-size: 20px; height: auto; margin: 0; padding: 6px 0; width: 100%;}
#homeworkDetails.withHw .modal-body img {display: block; height: auto; margin: auto; max-height: 100%; max-width: 100%; width: auto;}
#homeworkDetails.ip .hwInfo {border-bottom: 1px solid #eee; padding-bottom: 15px; padding-top: 10px;}
@media only screen and (orientation: landscape) {
	#homeworkDetails .modal-body {max-height: calc(90vh - 60px); overflow: auto;}
}
#homeworkDetails.ip .modal-body {max-height: calc(90vh - 50px); overflow-y: auto; padding: 10px 24px 5px;}
#homeworkDetails.ip .hwTitle {font-size: 21px; font-weight: bold;}
#homeworkDetails.ip .hwContent {margin-top: 10px;}
#homeworkDetails.ip .submit {margin-top: 20px;}
#homeworkDetails.ip .attachment {margin: 10px 0;}
#homeworkDetails.ip .attachment:last-child {margin-bottom: 0;}
.subjectGroupName {border-top: 1px solid #ededed; color: #999; font-size: 14px; padding: 10px 0;}
#homeworkDetails.ip.noHw .modal-body {padding: 40px 25px 10px;}
#homeworkDetails.ip.noHw .subjectGroupName {bottom: 0; position: absolute; width: calc(100% - 50px);}

/* Specail fix for class start */
#homework .classTab ul.nav-tabs.item-3 a {width: 74px;}
#homework .classTab ul.nav-tabs.item-6 li:first-child span {font-size: 16px; width: 48px;}
#homework .classTab ul.nav-tabs.item-6 a {font-size: 13px; width: 38px;}
/* Specail fix for class end */
/* Homework style end */

/* Photo slide show style start */
#photoSlideShow {padding: 10px; position: relative;}
#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-top: 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;}
/* Useful links banner style end */

/* Modal box strat */
#alertMsg {box-shadow: 0 0 5px rgba(0, 0, 0, 0.45);}
#alertMsg .modal-dialog {left: 50%; max-height: 80vh; min-height: 200px; margin: 0; top: 50%; transform: translate(-50%, -50%); width: 95%;}
#alertMsg .modal-content {background-clip: unset; border: 0; border-radius: 0;}
#alertMsg .modal-header {background: #fff; border: 0; padding: 17px 55px 8px; position: relative;}
#alertMsg .modal-title {font-size: 27px; max-width: 100%; text-align: center;}
#alertMsg .close {opacity: 1; position: absolute; right: 0; top: 2px;}
#alertMsg.modal .close .icon {background: url(../images/close_2.png) center center no-repeat; background-size: cover;}
#alertMsg .modal-body {min-height: 140px; padding: 10px 10px 20px;}
#alertMsg .modal-body .content {min-height: 100px; max-height: calc(80vh - 140px); overflow-y: auto; padding: 0 10px;}
#alertMsg .content:after {clear: both; content: " "; display: table;}
/* Modal box end */
/* Index modules style end */

/* Inner page style start */
/* Inner page banner style start */
#innerPageBanner .container {width: 320px;}
#innerPageBannerWrap {height: 64px; overflow: hidden; position: relative; width: 320px;}
#innerPageBannerWrap img {height: auto; left: 50%; max-height: 64px; max-width: 320px; position: absolute; top: 50%; transform: translate(-50%, -50%); width: auto;}
#innerPageBanner.noBanner #innerPageBannerWrap {height: 0;}
/* Inner page banner style end */

#mainContent {background: #fff; display: block; margin-bottom: 50px; min-height: 50px; padding: 10px;}

/* Inner page dropdown menu style start */
#innerPageMenu {display: inline-block; margin-top: 10px; min-height: 40px; min-width: 200px; vertical-align: middle; max-width: 100%;}
#innerPageMenu .dropdown-backdrop {display: none;}
#innerPageMenu ul {background: #7d7d7d;}
#innerPageMenu .pageTitle > .dropdown-icon:before {background: #7d7d7d; border-radius: 3px; color: #fff; 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: 40px;}
#innerPageMenu .pageTitle[aria-expanded="true"] > .dropdown-icon:before {border-radius: 3px 3px 0 0;}
#innerPageMenu a:focus {outline: none;}
#innerPageMenu .pageTitle > .title {color: #434343; display: inline-block; font-size: 22px;}
#innerPageMenu .title {padding: 7px 0;}
#innerPageMenu.dropdown .pageTitle > .title {margin-left: 40px; padding: 7px 0 7px 10px;}
#innerPageMenu > .dropdown-menu {max-height: calc(100vh - 150px); overflow: auto; top: 39px;}
#innerPageMenu .open .pageTitle > .dropdown-icon:before {content: "\e260";}
#innerPageMenu .dropdown-menu.children {padding: 0; position: relative; width: 100%;}
#innerPageMenu .dropdown-menu {border: none; border-radius: 0; margin: 0; min-width: 235px; padding: 0; -webkit-box-shadow: none; box-shadow: none; z-index: 1;}
#innerPageMenu .dropdown-menu a {color: #fff; font-size: 17px; position: relative; white-space: normal;}
#innerPageMenu .dropdown-menu > li > a {padding: 8px 15px;}
#innerPageMenu .dropdown-menu > li > a:hover, #innerPageMenu .dropdown-menu > li > a:focus {background: transparent; color: #d1d1d1;}
#innerPageMenu .page_item_has_children {position: relative;}
#innerPageMenu .page_item_has_children > a {max-width: calc(100% - 45px);}
#innerPageMenu .page_item_has_children .dropdown-toggle {display: block; font-size: 12px; height: 40px; margin-right: 5px; margin-top: -40px; padding: 0; position: absolute; right: 0; width: 35px;}
#innerPageMenu .dropdown-menu > li > a:hover, #innerPageMenu .dropdown-menu > li > a:focus {background: transparent;}
#innerPageMenu .dropdown-menu > li > a:hover, #innerPageMenu .dropdown-menu > li > a.dropdown-toggle:hover > .dropdown-icon:before, #innerPageMenu .dropdown-menu > li.open > a, #innerPageMenu .dropdown-menu > li.open > a.dropdown-toggle > .dropdown-icon:before, #innerPageMenu .current_page_parent > a, #innerPageMenu .current_page_item > a {color: #d1d1d1;}
#innerPageMenu .children a {padding: 8px 15px 8px 25px;}
#innerPageMenu li.dropdown-submenu.open ul {background: #898989; display: block; height: auto;}

#innerPageMenu li a > .dropdown-icon:before {content: "\f0dd"; font-family: FontAwesome; position: absolute; text-align: center; top: calc(50% - 9px); width: 35px;}
#innerPageMenu li.open a > .dropdown-icon:before {content: "\f0de"; padding-top: 4px;}
#innerPageMenu li ul {display: none;}
#innerPageMenu li.open ul {display: block;}
/* Inner page dropdown menu style end */

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

/* 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: #7d7d7d; 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 .dropdown-menu {border: none; border-radius: 0; margin: 0; padding: 0; z-index: 1;}
#dcMenu > .dropdown-menu {border: 1px solid #ccc; max-height: calc(100vh - 150px); overflow: auto; top: 40px; width: 250px; z-index: 999;}
#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: 8px 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: 40px; margin-right: 5px; margin-top: -40px; padding: 0; position: absolute; right: 0; width: 35px;}
#dcMenu .children a {padding: 8px 15px 8px 25px;}
#dcMenu li a > .dropdown-icon:before {color: #333; content: "\f0dd"; font-family: FontAwesome; position: absolute; text-align: center; top: calc(50% - 9px); width: 35px;}
#dcMenu li.open a > .dropdown-icon:before {content: "\f0de"; padding-top: 4px;}
#dcMenu .pageTitle > .dropdown-icon:before {color: #7d7d7d;}
#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 */

/* Content area style start */
.lms-area {display: block; width: 100%; word-break: break-word; word-wrap: break-word;}
.lms-area .attIcon:hover:before {background: url(../images/attachIconH2.png) no-repeat center 1px; background-size: auto 100%; content: " ";}
p {margin: 0 0 20px;}
.lms-area:after {clear: both;}
.lms-area .post-title01 {color: #434343; font-size: 20px; line-height: 150%; margin: 15px 0;}
.lms-area .post-title02 {color: #434343; 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;}
.lms-area img {height: auto; max-width: 100%;}
.lms-area table {max-width: 100%;}

.lms-area .navigation {clear: both; display: table; font-family: Roboto; 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;}
.lms-area .wp-paginate .prev:not(.inactive):hover:after, .lms-area .wp-paginate .next:not(.inactive):hover:after {color: #434343;}
.lms-area ol.wp-paginate a:hover, .lms-area ol.wp-paginate a:active {color: #434343;}
.lms-area .pagination .page-item.prev:not(.inactive) a:hover:after, .lms-area .pagination .page-item.next:not(.inactive) a:hover:after {color: #434343;}

.lms-area .photo_list_pagination li a:hover {color: #434343;}
.lms-area ul.photo_list_pagination .prev a:hover, .lms-area ul.photo_list_pagination .next a:hover {color: #434343;}
/* 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 #schInfo {background:#666; color: #fff; padding: 20px 0px 30px;}
#schInfo {background:#666; color: #fff;}
#schInfo .schName_ch {font-size: 20px;}
#schInfo .schName_en {font-size: 16px; font-weight: lighter; line-height: 16px; margin-bottom: 15px;}
#schInfo .infoList a {color: #fff;}
#schInfo span {display: block; margin: 2px 0;}

footer #copyright {background: #999; color: #fff; font-family: "Verdana", "微軟正黑體"; font-size: 12px; padding: 10px; text-align: center;}
#copyright .row > div:first-child {margin-left: 50px; max-width: calc(100% - 100px);}
#copyright .row > div {padding: 5px 15px;}
#copyright img {height: auto; vertical-align: text-top; width: 35px;}
/* Footer style end */

#backToTop {bottom: 10px; color: #fff; display: block; height: 50px; position: fixed; right: 10px; text-align: center; width: 50px; z-index: 99;}
#backToTop > div:before {content: "\f106"; display: table-cell; font-family: FontAwesome; font-size: 30px; font-weight: bold; height: 50px; vertical-align: middle; width: 50px;}
#backToTop:hover {cursor: pointer;}

@-moz-document url-prefix() {
	.moreBtn {padding: 4px 0 1px;}
}

@media (min-width: 360px) {
	#homework .classTab ul.nav-tabs.item-3 a {width: 80px;}
	#homework .classTab ul.nav-tabs.item-6 a {width: 40px;}

	/* Specail fix for class start */
	#homework .classTab ul.nav-tabs.item-3 a {width: 85px;}
	#homework .classTab ul.nav-tabs.item-6 li:first-child span {font-size: 16px; width: 48px;}
	#homework .classTab ul.nav-tabs.item-6 a {font-size: 14px; width: 45px;}
	/* Specail fix for class end */

	#usefulLinks .ulBanner {height: 60px;}
	#usefulLinks .ulBanner a > img {max-height: 60px; max-width: 95%;}

	/* Inner page start */
	#innerPageBanner .container {width: 360px;}
	#innerPageBannerWrap {height: 72px; width: 360px;}
	#innerPageBannerWrap img {max-height: 72px; max-width: 360px;}
	/* Inner page end */
}
@media (min-width: 375px) {
	#homework .classTab ul.nav-tabs.item-3 a {width: 90px;}
	#homework .classTab ul.nav-tabs.item-6 a {width: 45px;}

	/* Inner page start */
	#innerPageBanner .container {width: 375px;}
	#innerPageBannerWrap {height: 75px; width: 375px;}
	#innerPageBannerWrap img {max-height: 75px; max-width: 375px;}
	/* Inner page end */
}
@media (min-width: 414px) {
	/* Inner page start */
	#innerPageBanner .container {width: 414px;}
	#innerPageBannerWrap {height: 83px; width: 414px;}
	#innerPageBannerWrap img {max-height: 83px; max-width: 414px;}
	/* Inner page end */
}
@media (min-width: 425px) {
	.container {width: 415px;}
	#homework .classTab ul.nav-tabs.item-3 {padding-left: 12px;}
	#homework .classTab ul.nav-tabs.item-3 li:first-child span {width: 95px;}
	#homework .classTab ul.nav-tabs.item-3 a {width: 85px;}
	#homework .classTab ul.nav-tabs.item-6 {padding-left: 10px;}
	#homework .classTab ul.nav-tabs.item-6 a {width: 45px;}
	#homework .classTab ul.nav-tabs li:first-child span {width: 80px;}

	/* Specail fix for class start */
	#homework .classTab ul.nav-tabs.item-3 a {width: 93px;}
	#homework .classTab ul.nav-tabs.item-6 a {font-size: 16px; width: 50px;}
	/* Specail fix for class end */
}
@media (min-width: 480px) {
	/* Inner page start */
	#innerPageBanner .container {width: 480px;}
	#innerPageBannerWrap {height: 96px; width: 480px;}
	#innerPageBannerWrap img {max-height: 96px; max-width: 480px;}
	/* Inner page end */
}
@media (min-width: 568px) {
	#calendar .cycle {transform: scale(0.85);}

	.container {width: 558px;}
	#homework .classTab ul.nav-tabs.item-3 a {width: 155px;}
	#homework .classTab ul.nav-tabs.item-3 {padding-left: 15px;}
	#homework .classTab ul.nav-tabs.item-3 li:first-child span {width: 120px;}
	#homework .classTab ul.nav-tabs.item-3 a {width: 130px;}
	#homework .classTab ul.nav-tabs.item-6 a {width: 70px;}

	/* Specail fix for class start */
	#homework .classTab ul.nav-tabs.item-3 a {width: 127px;}
	#homework .classTab ul.nav-tabs.item-6 li:first-child span {font-size: 18px; width: 60px;}
	#homework .classTab ul.nav-tabs.item-6 a {font-size: 18px; width: 71px;}
	/* Specail fix for class end */

	#usefulLinks .ulBanner {margin-bottom: 10px; width: 33.333333%;}

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

	#dcMenu {max-width: calc(100% - 50px);}
	#dcMenuContainer .backBtn {right: 5px;}
	/* Inner page end */
}
@media (min-width: 640px) {
	.container {width: 630px;}
	/* Specail fix for class start */
	#homework .classTab ul.nav-tabs.item-3 a {width: 133px;}
	#homework .classTab ul.nav-tabs.item-6 li:first-child span {width: 63px;}
	/* Specail fix for class end */

	/* Inner page start */
	#innerPageBanner .container {width: 640px;}
	#innerPageBannerWrap {height: 128px; width: 640px;}
	#innerPageBannerWrap img {max-height: 128px; max-width: 640px;}
	/* Inner page end */
}
@media (min-width: 667px) {
	/* Inner page start */
	#innerPageBanner .container {width: 667px;}
	#innerPageBannerWrap {height: 133px; width: 667px;}
	#innerPageBannerWrap img {max-height: 133px; max-width: 667px;}
	/* Inner page end */
}
@media (min-width: 736px) {
	/* Inner page start */
	#innerPageBanner .container {width: 736px;}
	#innerPageBannerWrap {height: 147px; width: 736px;}
	#innerPageBannerWrap img {max-height: 147px; max-width: 736px;}
	/* Inner page end */
}
@media (max-width: 767px) {
	#homework:not(.ip).col-xs-12 .classList {height: auto;}
}
@media (min-width: 768px) {
	.container {width: 758px;}
	.modal .modal-title {max-width: calc(100% - 65px); margin: auto; text-align: center;}

	#header {padding: 13px 0;}
	#schLogo .schLogoContainer {display: block; text-align: left; max-width: 100%;}
	#schLogo .schLogoContainer img {height: 60px; margin-left: 0; margin-right: 10px;}
	#schLogo .schName {height: 60px;}
	#schLogo .schName .schName_ch {font-size: 25px;}
	#schLogo .schName .schName_en {font-size: 14px;}
	#header .navbar-toggle {margin-top: 20px;}

	/* Index modules style start */
	.modules-break {height: 30px;}
	#calendar .loading, #homework .loading {padding: 80px 30px;}
	#latestNews .loading, #notice .loading {padding: 85px 30px 75px;}
	#calendar {height: 380px; margin-bottom: 10px;}

	#latestNews {height: 380px; margin-bottom: 25px;}
	#latestNews #newsList {height: 300px; margin-top: 40px; overflow-y: scroll;}
	#latestNews .withImg h2.newsTitle {float: left; width: calc(100% - 130px);}
	#latestNews .withImg .newsImg {margin-right: 10px;}
	#latestNews .newsDes {max-height: 50px;}
	#latestNews .noRecord {height: 300px; padding: 100px 15px;}
	#latestNews.col-sm-12 {height: auto;}
	#latestNews.col-sm-12 .noRecord {height: auto; padding: 40px 15px;}

	#calendar .cycle {transform: scale(1);}
	#calendarDetails .modal-dialog {max-height: 480px; width: 570px;}
	#calendarDetails .tbl_events {max-height: 375px;}
	@media (max-height: 568px) and (orientation: landscape) {
		#calendarDetails .tbl_events {max-height: calc(90vh - 83px);}
	}
	#notice {height: 380px; margin-bottom: 25px;}
	#notice #noticeList {height: 300px; margin-top: 40px; overflow-y: scroll;}
	#notice .noticeDes {max-height: 50px;}
	#notice .noRecord {height: 300px; padding: 100px 15px;}
	#notice.col-sm-12 {height: auto;}
	#notice.col-sm-12 .noRecord {height: auto; padding: 40px 15px;}

	#homework {height: 380px; margin-bottom: 20px;}
	#homework .form-group {margin: 30px 0;}
	#homework .input-group .form-control {font-size: 22px;}
	#homework .classTab ul.nav-tabs.item-3 li:first-child span {width: 65px;}
	#homework .classTab ul.nav-tabs.item-6 li:first-child span {width: 65px;}
	#homework .classTab ul.nav-tabs.item-6 {padding-left: 10px;}
	#homework .classTab ul.nav-tabs.item-3 a {width: 85px;}
	#homework .classTab ul.nav-tabs.item-6 a {width: 42px;}
	#homework.ip .subjectGroupList {max-height: 162px; overflow: auto;}
	#homework.ip .subjectGroupList .groupItem {margin: 0 auto 20px; max-width: 800px;}
	#homework.ip .subjectGroupList.ch .bootstrap-select {width: calc(100% - 120px);}
	#homework.ip .subjectGroupList.en .bootstrap-select {width: calc(100% - 10px);}
	#homeworkDetails.withHw .modal-dialog {display: table; max-width: 500px; min-width: 300px; width: auto;}
	#homeworkDetails.noHw .modal-dialog {display: block; max-width: 400px;}
	#homework:not(.ip).col-sm-12 .classList {height: auto;}
	#homework.col-sm-12 {height: auto; margin-bottom: 50px;}
	#homework.col-sm-12 .classTab ul.nav-tabs.item-6 li:first-child span {width: 65px;}
	#homework.col-sm-12 .classTab ul.nav-tabs.item-6 a {width: 75px;}
	#homework.col-sm-12.ip .subjectGroupList {max-height: 250px;}

	/* Specail fix for class start */
	#homework .classTab ul.nav-tabs.item-3 a {width: 83px;}
	#homework .classTab ul.nav-tabs.item-6 li:first-child span {font-size: 16px; width: 45px;}
	#homework .classTab ul.nav-tabs.item-6 a {font-size: 14px; width: 46px;}
	#homework.col-sm-12 .classTab ul.nav-tabs.item-6 li:first-child span {font-size: 18px; width: 65px;}
	#homework.col-sm-12 .classTab ul.nav-tabs.item-6 a {font-size: 18px; width: 70px;}
	/* Specail fix for class end */

	#usefulLinks .ulBanner {height: 81px;}
	#usefulLinks .ulBanner a > img {max-height: 81px;}

	#photoSlideShow {height: 350px;}
	/* Index modules style end */

	/* Inner page style start */
	#innerPageBanner .container {width: 768px;}
	#innerPageBannerWrap {height: 154px; width: 768px;}
	#innerPageBannerWrap img {max-height: 154px; max-width: 768px;}

	#innerPageMenu {margin-top: 15px; min-height: 50px;}
	#innerPageMenu .pageTitle > .dropdown-icon:before {font-size: 20px; height: 45px; width: 45px;}
	#innerPageMenu .pageTitle > .title {font-size: 24px;}
	#innerPageMenu .pageTitle > .title {padding: 6px 0;}
	#innerPageMenu.dropdown .pageTitle > .title {margin-left: 45px; padding: 6px 0 6px 20px;}
	#innerPageMenu > .dropdown-menu {max-height: 500px; top: 44px;}

	#dcMenu {max-width: calc(100% - 55px);}
	#dcMenuContainer .backBtn {right: 10px;}
	/* Inner page style end */

	#schInfo span {margin: 3px 0;}
	#schInfo .schName_ch {font-size: 25px;}
	#schInfo .schName_en {font-size: 16px;}

	footer #schInfo {padding: 30px 0px 40px;}

	#copyright .row > div:first-child {text-align: left; margin-left: 0; max-width: none;}
	#copyright .row > div:last-child {text-align: right;}
	#copyright img {vertical-align: text-bottom; width: 45px;}

	#backToTop {bottom: 60px;height: 60px; right: 10px; width: 60px;}
	#backToTop > div:before {font-size: 38px; height: 60px; width: 60px;}
}
@media (min-width: 812px) {
	#innerPageBanner .container {width: 812px;}
	#innerPageBannerWrap {height: 162px; width: 812px;}
	#innerPageBannerWrap img {max-height: 162px; max-width: 812px;}
}
@media (min-width: 853px) {
	.container {width: 843px;}

	#innerPageBanner .container {width: 853px;}
	#innerPageBannerWrap {height: 171px; width: 853px;}
	#innerPageBannerWrap img {max-height: 171px; max-width: 853px;}
}
@media (min-width: 896px) {
	.container {width: 886px;}

	#innerPageBanner .container {width: 896px;}
	#innerPageBannerWrap {height: 179px; width: 896px;}
	#innerPageBannerWrap img {max-height: 179px; max-width: 896px;}
}
@media (min-width: 992px) {
	.container {width: 970px;}
	.modal button.close {height: 55px; width: 55px;}

	#schLogo .schLogoContainer img {height: 73px; margin-left: 0; margin-right: 10px;}
	#schLogo .schName {height: 80px;}
	#schLogo .schName .schName_ch {font-size: 27px;}
	#schLogo .schName .schName_en {font-size: 21px;}

	#header .navbar-toggle {margin-top: 26px; right: 5px;}

	/* Index modules style starts */
	#calendar {margin-bottom: 0;}
	#calendar h1.title, #latestNews h1.title, #notice h1.title, #homework h1.title {font-size: 25px;}
	#calendar.col-md-6 .calendarWrap {max-width: 450px;}
	#calendar.col-md-12 .calendarWrap {max-width: 600px;}
	#latestNews.col-md-4 .noRecord, #latestNews.col-md-6 .noRecord {padding: 90px 15px;}
	#latestNews.col-md-12 #newsList {height: auto; max-height: 300px;}
	#notice {height: 380px;}
	#notice #noticeList {height: 300px;}
	#notice.col-md-4 .noRecord, #notice.col-md-6 .noRecord, #notice.col-md-8 .noRecord {padding: 90px 15px;}
	#notice.col-md-12 #noticeList {height: auto; max-height: 300px;}
	#homework, #photoSlideShow {height: 380px; margin-bottom: 0;}
	#homework .form-group {margin: 30px 0 20px;}
	#homework .input-group {max-width: none;}
	#homework.col-md-4 .classTab ul.nav-tabs li:first-child span {width: 65px;}
	#homework.col-md-4 .classTab ul.nav-tabs.item-3 a {width: 70px;}
	#homework.col-md-4 .classTab ul.nav-tabs.item-6 a {width: 35px;}
	#homework.col-md-4 .classList {height: 130px; padding: 17px 20px 0}
	#homework.col-md-4 .classList > li {height: 47px; padding: 0 10px;}
	#homework.col-md-4 .classList > li > a {height: 47px; padding-top: 9px; width: 47px;}
	#homework.col-md-6 .homeworkWarp {max-width: 450px;}
	#homework.col-md-6 .classTab ul.nav-tabs.item-3 li:first-child span {width: 100px;}
	#homework.col-md-6 .classTab ul.nav-tabs.item-6 li:first-child span {width: 55px;}
	#homework.col-md-6 .classTab ul.nav-tabs.item-6 {padding-left: 10px;}
	#homework.col-md-6 .classTab ul.nav-tabs.item-3 a {width: 100px;}
	#homework.col-md-6 .classTab ul.nav-tabs.item-6 a {width: 60px;}
	#homework .classTab ul.nav-tabs.item-6 {padding-left: 5px;}
	#homework .classTab ul.nav-tabs.item-3 {padding-left: 10px;}
	#homework .classTab ul.nav-tabs.item-3 li:first-child span {width: 70px;}
	#homework .classTab ul.nav-tabs.item-3 a {width: 70px;}
	#homework.ip .subjectGroupList {max-height: 185px; overflow: auto;}
	#homework.ip.md-fullWidth-module .input-group {max-width: 325px;}
	#homework.ip.md-fullWidth-module .subjectGroupList {max-height: 300px;}
	#homework.ip.md-fullWidth-module .subjectGroupList .groupItem {max-width: 800px;}
	#homework.ip.md-fullWidth-module .subjectGroupList.ch label {margin-right: 5px; width: 155px;}
	#homework.ip.md-fullWidth-module .subjectGroupList.ch .bootstrap-select {width: calc(100% - 165px);}

	/* Specail fix for class start */
	#homework .classTab ul.nav-tabs.item-3 a {font-size: 20px; width: 95px;}
	#homework.col-md-4 .classTab ul.nav-tabs.item-6 li:first-child span {width: 50px;}
	#homework.col-md-4 .classTab ul.nav-tabs.item-6 a {line-height: 17px; width: 38px;}
	#homework.col-sm-12.col-md-4 .classTab ul.nav-tabs.item-6 a {font-size: 14px;}
	/* Specail fix for class end */

	#usefulLinks {margin-top: 30px;}
	#usefulLinks .ulBanner {height: 75px; margin-bottom: 15px; width: 25%;}
	#usefulLinks .ulBanner a > img {max-height: 75px;}
	/* Index modules style end */

	/* Inner page style start */
	#innerPageBanner.noBanner #innerPageBannerWrap {height: 30px;}
	#innerPageBanner .container {width: 992px;}
	#innerPageBannerWrap {height: 198px; width: 992px;}
	#innerPageBannerWrap img {max-height: 198px; max-width: 992px;}
	#breadcrumbs {margin-bottom: 30px;}

	#innerPageMenu {margin-top: 0;}
	#innerPageMenu > .dropdown-menu {max-height: 500px; top: 49px;}
	#innerPageMenu .pageTitle > .dropdown-icon:before {font-size: 20px; height: 50px; width: 50px;}
	#innerPageMenu .pageTitle > .title {font-size: 28px;}
	#innerPageMenu .pageTitle > .title {padding: 7px 0;}
	#innerPageMenu.dropdown .pageTitle > .title {padding: 7px 0 7px 20px;}

	#dcMenu > .dropdown-menu {max-height: 500px;}
	/* Inner page style end */

	#schInfo .schName_ch {font-size: 27px;}
	#schInfo .schName_en {font-size: 21px; line-height: 21px;}
	#schInfo span {margin: 5px 0;}

	/* Modal box strat */
	#alertMsg .modal-dialog {width: 780px;}
	#alertMsg .modal-body .content {max-height: 515px;}
	/* Modal box end */
}

@media (max-width: 999px) {
	body:not(.mmOpen) #mainMenu {border: 0; margin-bottom: 0; opacity: 0; z-index: -1;}
	#header {box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);}
	#header .container {width: 100vw;}
	#login {display: none;}
	#mainMenu {overflow-x: hidden; overflow-y: auto; position: fixed; left: 0; right: 0; top: 0; width: 100vw;}
	#mainMenu .container {width: 100vw;}
	#mainMenu #navbar {width: 100vw;}
	#mainMenu .navbar-nav > li > a:not(.dropdown-toggle) {background-color: transparent; color: #1a1a1a; max-width: calc(100% - 40px); padding: 8px 15px;}
	#mainMenu .navbar-nav > li > .dropdown-menu, #mainMenu .navbar-nav > li.open > .dropdown-menu ul {border: none; border-radius: 0; display: none; width: 100%;}
	#mainMenu .sub-level {font-size: 16px; padding: 0;}
	#mainMenu .navbar-nav > li.open > .dropdown-menu, #mainMenu .navbar-nav > li.open > .dropdown-menu li.open ul {display: block;}
	#mainMenu .navbar-nav .open .dropdown-menu > li > a:not(.dropdown-toggle) {max-width: calc(100% - 40px); padding: 8px 0 8px 25px;}
	#mainMenu .navbar-nav .open .dropdown-menu > li > .dropdown-menu {font-size: 16px; padding: 0;}
	#mainMenu .navbar-nav .open .dropdown-menu > li > .dropdown-menu > li > a:not(.dropdown-toggle) {padding: 8px 15px 8px 35px;}
}
@media (min-width: 1000px) {
	#header:not(.menuAlwaysCollapse) {padding: 35px 0; position: relative;}
	#header:not(.menuAlwaysCollapse){border-bottom: none;}
	#header.menuAlwaysCollapse {box-shadow: 0 0 10px rgba(0, 0, 0, 0.2); position: fixed;}
	#header.menuAlwaysCollapse .row {position: relative;}
	#header.menuAlwaysCollapse .navbar-toggle {display: block; position: absolute;}
	#headerSpace:not(.menuAlwaysCollapse) {display: none;}

	#login {margin-top: 22px; text-align: right;}
	#header.menuAlwaysCollapse #login {margin-top: 25px;}
  #login form {display: inline-block; position: relative;}
	#login form > a:first-child:after {content: " "; display: inline-block; height: 21px; left: 70px; position: absolute; top: 7px; width: 1px;}
	#login .logo {left: 15px; position: absolute; top: 10px; width: 42px;}
	#login .input {border: 1px solid; border-radius: 17px; float: left; height: 35px; padding: 5px 8px 5px 60px; width: 315px;}
	.en #login .input {padding: 5px 8px 5px 70px;}
	#login input:-webkit-autofill, #login input:-webkit-autofill:hover, #login input:-webkit-autofill:focus {background-color: #fff !important; -webkit-box-shadow: 0 0 0 30px #fff inset!important;}
	@-moz-document url-prefix() {
		#login .logo {margin-top: 10px;}
		#login .input {padding: 6px 8px 4px;}
	}

	#login input.form-control {background: transparent; border: none; border-radius: 0; box-shadow: none; display: inline-block;  font-size: 14px; height: 21px; padding: 0; vertical-align: text-bottom; width: calc(47% - 33px);}
	#login input.form-control:first-child {border-right: 1px solid; margin-right: 5px;}
	#login .btn_login {display: inline-block; font-size: 18px; height: 20px; margin-left: 5px; margin-right: 5px;}
	.en #login .btn_login {font-size: 16px;}
	#login .lang {display: inline-block; font-size: 18px; margin-left: 15px; margin-top: 5px; vertical-align: top;}

	#header.menuAlwaysCollapse .navbar-toggle {margin-top: 15px;}

	/* Main menu style start */
	#mainMenu .nav > li > ul li a {color: #434343;}
	#mainMenu .container {width: 100%;}
	#mainMenu {background: #fff; border: 0; border-radius: 0; margin-bottom: 0; width: 100%; z-index: 999;}
	#mainMenu #navbar {padding:0; position: relative; width: 100%;}
	#mainMenu .nav {text-align: center; width: 100%;}
	#mainMenu .nav:after {clear: both; display: block;}
	#mainMenu .navbar-nav {float: none; display: flex; flex-wrap: wrap; justify-content: center; margin: 0; min-height: 50px; position: relative; width: 100%;}
	#mainMenu #navbar > ul > li {display: table-cell; float: none; max-width: 12.5%;}
	#mainMenu ul > li {display: inline-block; float: none; font-size: 18px; vertical-align: middle;}
	.en #mainMenu ul > li {font-size: 16px;}
	#mainMenu ul > li:hover, #mainMenu .nav > li.current_page_parent > a, #mainMenu .nav > li.current_page_item > a {background: #fff;}
	#mainMenu .nav > li > a {align-items: center; color: #fff; display: flex; height: 100%; padding: 10px 12px; word-wrap: break-word;}
	#mainMenu .nav > li > a:focus, #mainMenu .nav > li > a:hover {background-color: transparent;}
	#mainMenu .nav > li > .dropdown-toggle {display: none;}
	#mainMenu .nav > li > ul {border: 0; border-radius: 0; display: block; height: 0; overflow: hidden; opacity: 0; padding: 0; text-align: left; width: 190px; -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.175); box-shadow: 0 2px 2px rgba(0,0,0,0.175);}
	#mainMenu .nav > li:hover > ul {display: block!important; height: auto; opacity: 1; overflow: visible; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.15);}
	#mainMenu .nav > li.showRight:hover > ul {left: auto; right: 0;}
	#mainMenu .nav > li > ul li {font-size: 16px; position: relative; width: 190px;}
	#mainMenu .nav > li > ul li a {padding: 6px 10px; white-space: normal;}
	#mainMenu .nav > li > ul li.current_page_item > a {color: #fff;}
	#mainMenu .nav > li > ul li.current_page_item > .dropdown-toggle > .dropdown-icon {color: #fff;}
	#mainMenu .nav > li > ul > li > a {padding: 6px 35px 6px 15px;}
	#mainMenu .nav > li > ul > li > ul {border: 0; border-radius: 0; display: block; left: 100%!important; height: 0; overflow: hidden; margin: 0; opacity: 0; padding: 0; text-align: left; top: 0; width: 190px; -webkit-box-shadow: 0 2px 2px rgba(0,0,0,0.175); box-shadow: 0 2px 2px rgba(0,0,0,0.175);}
	#mainMenu .navbar-nav > li > ul > li.showRight > ul {left: -100%!important;}
	#mainMenu .nav > li > .dropdown-menu li.showRight:hover > .dropdown-menu {left: -100%!important;}
	#mainMenu .nav > li > ul > li:hover {height: auto; overflow: visible;}
	#mainMenu .nav > li > ul > li:hover > ul {display: block; height: auto; opacity: 1; overflow: visible;}
	#mainMenu .nav .dropdown-toggle {display: block; font-size: 12px; float: right; height: 35px; margin: 0; padding: 0; pointer-events: none; position: absolute; right: 0; top: calc(50% - 17px); width: 35px;}
	#mainMenu .nav .dropdown-toggle > .dropdown-icon:before {content: "\f0da"; font-family: FontAwesome; position: absolute; text-align: center;}
	#mainMenu .nav > li > ul > li:hover > .dropdown-toggle > .dropdown-icon {color: #fff;}
	#mainMenu #navbar > ul > li.login, #mainMenu #navbar > ul > li.lang {display: none;}
	/* Main menu style end */

	#calendar.md-left-module, #latestNews.md-left-module, #homework.md-left-module {padding: 10px 10px 10px 0;}
	#latestNews.md-right-module, #notice.md-right-module, #homework.md-right-module, #photoSlideShow.md-right-module {padding: 10px 0 10px 10px;}
	#calendar.md-fullWidth-module, #latestNews.md-fullWidth-module, #notice.md-fullWidth-module, #homework.md-fullWidth-module, #photoSlideShow.md-fullWidth-module {padding: 10px 0;}
	#notice.lg-center-module {padding: 10px;}
	#homework.lg-right-module {padding: 10px 0 10px 10px;}
	#photoSlideShow.lg-fullWidth-module {padding: 10px 0;}

	#schInfo .container, #copyright .container {padding: 0;}

	/* Inner page start */
	#innerPageBanner .container {width: 1000px;}
	#innerPageBannerWrap:before {background: url(../images/shadow.png) no-repeat; background-size: 100% auto; content: " "; display: block; height: 30px; position: absolute; top: 0; width: 100%; z-index: 1;}

	#innerPageContent {padding: 15px 0;}
	#mainContent {padding: 0;}
	/* Inner page end */
}
@media (min-width: 1024px) {
	#mainMenu .container {width: 1024px;}

	#innerPageBanner .container {width: 1024px;}
	#innerPageBannerWrap {height: 204px; width: 1024px;}
	#innerPageBannerWrap img {max-height: 204px; max-width: 1024px;}
}
@media (min-width: 1080px) {
	#mainMenu .container {width: 1080px;}

	#innerPageBanner .container {width: 1080px;}
	#innerPageBannerWrap {height: 216px; width: 1080px;}
	#innerPageBannerWrap img {max-height: 216px; max-width: 1080px;}
}
@media (min-width: 1200px) {
	.container {width: 1170px;}

	#header .container, #mainMenu .container {width: 1200px;}

	#schLogo .schLogoContainer img {margin-right: 15px;}
	#login .logo {margin-right: 15px;}
	#login .input {margin-left: 0;}
	#login input.form-control {width: calc(50% - 38px);}

	/* Main menu style start */

	#mainMenu ul > li {font-size: 20px;}
	.en #mainMenu ul > li {font-size: 18px;}
	#mainMenu .nav > li > ul li {font-size: 17px;}
	#mainMenu .nav > li > ul {width: 200px;}
	#mainMenu .nav > li > ul li {width: 200px;}
	#mainMenu .nav > li > ul > li > ul {width: 200px;}
	/* Main menu style end */

	#homework .classTab ul.nav-tabs li {height: 47px;}
	#homework .classTab ul.nav-tabs li:first-child span {height: 47px;}
	#homework .classTab ul.nav-tabs a {height: 47px;}
	#homework.col-md-4 .classTab ul.nav-tabs.item-6 li:first-child span {width: 65px;}
	#homework.col-md-4 .classTab ul.nav-tabs.item-3 li:first-child span {width: 75px;}
	#homework.col-md-4 .classTab ul.nav-tabs.item-3 a {width: 90px;}
	#homework.col-md-4 .classTab ul.nav-tabs.item-6 a {width: 47px;}

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

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

	#dcMenu {max-width: calc(100% - 60px);}
	#dcMenuContainer .backBtn {right: 15px;}
	/* Inner page end */
}

@media (min-width: 1230px) {
	.container {width: 1200px;}

	#header .container {width: 1230px;}
}