.section.section-hw, .homework-view {
  height: 100%; }
  .section.section-hw .outer-box, .homework-view .outer-box {
    background-image: linear-gradient(135deg, #4DA3AE 0%, #00CC9F 50%); }
  .section.section-hw .class-grid, .homework-view .class-grid {
    width: 100%;
    text-align: center; }
  .section.section-hw .class-cell, .homework-view .class-cell {
    width: calc(99% / 4);
    border: 2px solid transparent; }
  .section.section-hw .class-cell a, .homework-view .class-cell a {
    background: #F2E6E6;
    color: #24349B;
    height: 40px;
    line-height: 40px; }
    .section.section-hw .class-cell a:hover, .homework-view .class-cell a:hover {
      background: #5665c7;
      color: #FFF;
      text-decoration: none; }

.homework-view .class-grid {
  max-width: 400px; }
.homework-view .class-section .title {
  font-size: 20px;
  margin-bottom: 10px; }
@media (min-width: 768px) {
  .homework-view .breadcrumbs {
    margin-left: 6rem; } }
.homework-view .breadcrumbs a {
  color: #5665c7; }
.homework-view .homework.page-bg {
  max-width: 800px; }
.homework-view #past-homework > div {
  padding: 20px 20px 50px;
  margin: auto; }
  @media (min-width: 576px) {
    .homework-view #past-homework > div {
      min-width: 400px;
      width: 80%; } }
  .homework-view #past-homework > div a.sort-link {
    color: #777; }
  .homework-view #past-homework > div a {
    color: #23ad9f; }
.homework-view table {
  border: 1px solid #e5e5e5; }
.homework-view .table-striped tbody tr:nth-of-type(odd) {
  background-color: rgba(0, 0, 0, 0.03); }

@media (min-width: 768px) {
  .section.section-calendar {
    height: auto; } }
.section.section-calendar .outer-box {
  background-image: linear-gradient(135deg, #0F1590 0%, #4272ED 50%); }
.section.section-calendar #index-calendar .datepicker table tbody tr td.active {
  background-color: #5665c7;
  color: #FFF; }
.section.section-calendar #index-calendar .datepicker table tbody tr td.holiday {
  background-color: #ff9ab5;
  color: #FFF; }
.section.section-calendar #index-calendar .datepicker table tr th {
  width: calc(100% / 7); }
.section.section-calendar .calendar-box .datepicker table thead tr:nth-child(2) {
  background-color: #2035de;
  color: #FFF; }
  .section.section-calendar .calendar-box .datepicker table thead tr:nth-child(2) .datepicker-switch {
    font-size: 22px;
    padding: 5px; }
  .section.section-calendar .calendar-box .datepicker table thead tr:nth-child(2) th.next, .section.section-calendar .calendar-box .datepicker table thead tr:nth-child(2) th.prev {
    color: #FFF !important;
    opacity: 0.5; }
.section.section-calendar .calendar-box .datepicker table thead tr:nth-child(3) {
  background: none;
  color: #000; }
.section.section-calendar .calendar-box .datepicker table tbody tr {
  background: none; }
.section.section-calendar .calendar-box .calendar-details {
  background: none;
  height: auto;
  max-height: 220px;
  margin-top: 20px; }
  @media (min-width: 768px) {
    .section.section-calendar .calendar-box .calendar-details {
      max-height: 410px; } }
  @media (min-width: 1024px) {
    .section.section-calendar .calendar-box .calendar-details {
      max-height: 320px; } }
  @media (min-width: 1280px) {
    .section.section-calendar .calendar-box .calendar-details {
      max-height: 370px; } }
  .section.section-calendar .calendar-box .calendar-details > div {
    margin-top: 10px;
    margin-bottom: 10px; }
    .section.section-calendar .calendar-box .calendar-details > div div {
      padding: 0; }
    .section.section-calendar .calendar-box .calendar-details > div.event {
      border-color: #343bdb; }
    .section.section-calendar .calendar-box .calendar-details > div.holiday {
      border-color: #ff9ab5; }
  .section.section-calendar .calendar-box .calendar-details div {
    border-bottom: none; }
  .section.section-calendar .calendar-box .calendar-details div .calendar-item-date {
    color: #777;
    font-size: 13px; }

.page-wrap {
  padding: 0 12px; }
  @media (min-width: 576px) {
    .page-wrap {
      margin-top: 1rem; } }
  @media (min-width: 768px) {
    .page-wrap {
      margin-top: 2rem; } }
  @media (min-width: 1024px) {
    .page-wrap {
      padding: 0 45px; } }
  .page-wrap .page-bg {
    background-color: #FFF;
    max-width: 1200px;
    margin: 30px auto;
    box-shadow: 5px 5px 20px rgba(0, 0, 0, 0.4);
    min-height: 400px;
    padding: 22px 12px 50px; }
    @media (min-width: 1024px) {
      .page-wrap .page-bg {
        padding: 30px 50px 100px;
        min-height: 600px; } }
  .page-wrap .page-title {
    color: #5665c7;
    margin-top: 10px; }

a {
  text-decoration: none; }
  a:hover {
    text-decoration: none !important; }

.breadcrumbBar .breadcrumbs a, .subMenuTab a {
  color: #5665c7; }

html {
  width: 100%;
  height: 100%;
  overflow-x: hidden; }

body {
  font-family: "Microsoft JhengHei", "PingFang TC", "Microsoft Yahei", Tahoma, Helvetica, Arial, STXihei, sans-serif;
  font-size: 16px;
  padding-top: 9.5vw;
  overflow-x: hidden; }
  body .container-fluid {
    padding-left: 0 !important;
    padding-right: 0 !important; }

.header-background {
  background: transparent linear-gradient(0deg, #A0E2FF 0%, #D9F3FF 100%);
  box-shadow: 0 10px 10px #00000029; }

.container {
  align-items: center; }

#header {
  position: relative; }
  @media (min-width: 992px) {
    #header {
      padding-bottom: 20px; } }
  @media (max-width: 576px) {
    #header .navbar {
      justify-content: center; } }
  #header #mainmenu {
    display: none; }
  #header .banner {
    max-width: 90vw; }
    #header .banner .banner__image {
      height: 100%;
      width: 100%;
      object-fit: contain; }
  #header .navbar .button {
    margin-bottom: auto;
    padding-bottom: 1rem; }
    @media (min-width: 576px) {
      #header .navbar .button {
        margin-left: auto; } }
    @media (min-width: 992px) {
      #header .navbar .button {
        position: absolute;
        top: 20px;
        right: -10px; } }
    #header .navbar .button a:not(:first-child) {
      margin-left: 12px; }
    #header .navbar .button .button__login {
      width: 6rem; }
    #header .navbar .button .button__pta {
      width: 7rem; }
    #header .navbar .button .btn {
      box-shadow: 2px 2px 5px rgba(20, 20, 20, 0.5);
      border-radius: 50px;
      background-color: #24349B;
      color: #ffffff;
      border-style: none; }
      #header .navbar .button .btn:hover {
        box-shadow: 3px 3px 5px rgba(20, 20, 20, 0.7); }
        #header .navbar .button .btn:hover .button__login_content {
          font-weight: bold; }
      #header .navbar .button .btn .button__login_content {
        overflow: hidden; }
        @media (max-width: 576px) {
          #header .navbar .button .btn .button__login_content {
            font-size: 0.75rem; } }

.navigation--bar {
  display: none; }

.navigation-bar-mobile {
  display: block;
  background-color: #D9F3FF; }

.navbar-toggler {
  float: left !important; }

.news {
  align-items: center; }
  .news .horizontal-line {
    align-items: center;
    border-bottom: solid 3px #5665c7;
    width: 65%;
    height: 1px;
    padding: 20px 0 0 0;
    margin-left: 20px;
    margin-bottom: 20px; }
  .news .news-updates {
    color: #393939;
    margin-left: 10px;
    text-align: left;
    letter-spacing: 0; }
    .news .news-updates a {
      color: #393939;
      width: 160px;
      max-height: 70px;
      overflow: hidden; }
      @media (min-width: 768px) and (max-width: 991px) {
        .news .news-updates a {
          width: 450px; } }
  .news .content {
    border-radius: 63px;
    height: 125px;
    width: 360px;
    background: #d5f1ff;
    margin: 20px auto 0 auto; }
  .news .date-frame {
    border-radius: 50%;
    display: inline-block;
    height: 95px;
    width: 100px;
    background-color: #5665c7;
    margin: auto 0 auto 13px; }
    .news .date-frame .date {
      color: white;
      text-align: center;
      margin-top: 35%; }
  .news .arrow {
    margin: 15px 0 0 50%; }

.subtitle {
  letter-spacing: 2.9px;
  color: #5665c7;
  font-size: 29px; }

.vertical--line {
  display: none; }
  .vertical--line .vertical-dashed-line {
    border-left: solid 3px #5665c7;
    border-left-style: dashed;
    height: 368px; }

.story-content {
  display: flex;
  align-items: center;
  flex-direction: column; }
  .story-content .story-event {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: transparent linear-gradient(0deg, #A0E2FF 0%, #D9F3FF 100%);
    box-shadow: 0 10px 10px #00000029; }
    .story-content .story-event .story-event-description {
      color: #5665c7;
      font-weight: bolder;
      font-size: 1.4rem !important;
      padding-top: 36%; }
  .story-content .story-img {
    border-radius: 30px;
    width: 410px;
    overflow: hidden;
    padding: 0; }

.body-content {
  background: url("../images/bg_mobile.jpg") no-repeat center;
  background-size: 100% 100%; }

.school-name {
  text-align: center; }

.button-more {
  padding: 0 20px !important;
  border-radius: 50px !important;
  border-color: #5665c7;
  color: #5665c7;
  left: 10px; }

.button-more:hover {
  background-color: #5665c7 !important; }

.arrow {
  border: solid #5665c7;
  border-width: 0 4px 4px 0;
  display: inline-block;
  padding: 5px; }

.up {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg); }

.down {
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg); }

.left {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg); }

.right {
  transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg); }

.pageContainer {
  margin-right: auto;
  margin-left: auto; }

.pageContentBar {
  min-height: 900px;
  box-shadow: rgba(0, 0, 0, 0.35) 0 5px 15px;
  line-height: 165%;
  background: white; }
  .pageContentBar .page-title {
    font-size: 2rem;
    color: #24349B;
    font-weight: bolder;
    margin-bottom: 30px;
    padding-top: 25px;
    line-height: normal; }

.album-image-box .album-image img {
  width: 100%;
  height: auto; }

@media (min-width: 576px) {
  .news .date-frame .date {
    color: white;
    text-align: center;
    margin-top: 35%; }
  .news .arrow {
    margin: 15px 0 0 50%; } }
@media (min-width: 768px) {
  #mainmenu {
    display: flex;
    position: absolute;
    z-index: 100;
    bottom: -2px; }

  .jumbotron {
    display: block; }

  .news .content {
    width: 420px;
    margin-left: auto;
    margin-right: auto; }

  .news__horizontal__line {
    align-items: center;
    border-bottom: solid 3px #5665c7;
    width: 60%;
    height: 1px;
    padding: 20px 0 0 0;
    margin-left: 20px;
    margin-bottom: 20px; } }
@media only screen and (max-width: 992px) {
  .menu-item-label {
    font-size: 0.8em; } }
.menu-item {
  flex: 1;
  list-style: none;
  position: relative;
  text-align: center;
  cursor: pointer; }

.menu-item:last-child {
  border-right: none; }

.sub-menu {
  display: none;
  position: absolute;
  list-style: none;
  padding: 0;
  top: 20px;
  left: 10px;
  width: 169px; }
  .sub-menu .sub-menu {
    left: 100%;
    top: 0; }

.menu-item:hover > .sub-menu {
  display: block; }

@media (min-width: 992px) {
  .body-content {
    background: url("../images/bg_desktop.jpg") no-repeat center;
    background-size: 100% 100%; }

  body {
    padding-top: 0; }

  .navbar {
    padding-top: 20px; }

  .jumbotron {
    height: 464px; }

  .news {
    left: 1vh; }
    .news .content {
      width: 360px;
      margin-left: auto;
      margin-right: auto; }
    .news .horizontal-line {
      align-items: center;
      border-bottom: solid 3px #5665c7;
      width: 65%;
      height: 1px;
      padding: 20px 0 0 0;
      margin-left: 20px;
      margin-bottom: 20px; }
    .news .news__horizontal__line {
      align-items: center;
      border-bottom: solid 3px #5665c7;
      width: 34%;
      height: 1px;
      padding: 20px 0 0 0;
      margin-left: 20px;
      margin-bottom: 20px; }

  .vertical-dashed-line {
    border-left: solid 3px mediumpurple;
    border-left-style: dashed;
    height: 400px; }

  .story-content {
    display: flex !important;
    align-items: center; }
    .story-content .story-event {
      margin-right: 5px;
      width: 208px !important;
      height: 208px !important;
      border-radius: 50%;
      background: transparent linear-gradient(0deg, #A0E2FF 0%, #D9F3FF 100%);
      box-shadow: 0 10px 10px #00000029; }
      .story-content .story-event .story-event-description {
        color: #5665c7 !important;
        font-size: 29px; }
    .story-content .story-img {
      border-radius: 30px;
      height: 320px;
      overflow: hidden;
      padding: 0; }
      .story-content .story-img img {
        height: 100%;
        width: 100%;
        object-fit: fill; }

  .story-img-award {
    top: 0px; }

  .pageMenuBar {
    align-items: center;
    padding: 0;
    background: white;
    box-shadow: #a6b9d9 -1px 0px 2px; }
    .pageMenuBar .categoryTitle {
      background-color: #24349B;
      color: #ffffff;
      font-size: 1.2rem; }
      .pageMenuBar .categoryTitle div {
        padding-top: 1rem;
        padding-bottom: 1rem; }

  .menuActive {
    background: #5665c7; }
    .menuActive .menu-text {
      color: #ffffff;
      font-weight: bolder; }

  .news-slider .slick-list {
    height: 600px; }
    .news-slider .slick-list .slick-slide {
      height: 125px !important; }

  .photoAlbum-slider {
    height: 208px !important;
    width: 208px !important;
    padding-right: 50px; }
    .photoAlbum-slider .story-event {
      width: 208px !important;
      height: 208px !important; }
    .photoAlbum-slider .slick-list {
      height: 243px !important;
      width: 230px !important; }
      .photoAlbum-slider .slick-list .slick-slide {
        width: 208px !important;
        height: 208px !important;
        margin-bottom: 2rem; }

  .awardEvent-slider {
    width: 208px;
    height: 208px; }

  .award-image-slider {
    width: 410px !important;
    height: 320px !important;
    padding-top: 30px; }
    .award-image-slider .slick-track img {
      object-fit: contain;
      width: 100%;
      height: auto; }
    .award-image-slider .slick-slide {
      margin-top: 0; } }
@media (min-width: 992px) and (max-width: 1200px) {
  .news .horizontal-line {
    width: 60%; }
  .news .news__horizontal__line {
    width: 17%; }

  .story-content .story-img img {
    width: 88%; }

  .photoAlbum-image-slider {
    margin-left: 0.5rem; } }

/*# sourceMappingURL=main-style.css.map */