/** default layout on large screen **/

/* Global, header and footer */


@import url('layout-legacy.css') all and (-ms-high-contrast: none), (-ms-high-contrast: active);  /* import legacy in IE10/11 */


body, html
{
  margin: 0;
  padding: 0;
  font-size: 20px;
  height: 100%;
}

.FullWidth
{
  display: block;
  position: relative;
  width: 100%;
}

body
{
  min-width: 20rem;
  /*max-width: 100rem;*/
  margin: 0 auto;
  position: relative;
}

.MainContentWrapper,
.MainContent .MainContentWrapper,
.MainNav .NavRegion,
.MainHeader #logoStage,
.SearchPanel {
  max-width: 1400px; /* 60rem; */
}


.MainHeader .HeaderWrapper {
  height: 170px;
}

.MainHeader #logoStage {
  background-position-x: 10%;
}

.MainNav {
  position: static;
  /*
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  */
}

.MainNav .NavRegion {
  margin: 0 auto;
}

.MainNav .NavMenuIcon {
  display: none;
}
.MainNav .sub-item {
  display: block;
}

#panelSearch {
  /*
  margin: 0 auto;
  position: relative;
  top: -2.5rem;
  */
  position: absolute;
  top: 0.5rem;
  right: 1rem;
}

#panelSearch .SearchWrapper {
  /*
  position: absolute;
  right: 1rem;
  bottom: 0.2rem;
  */
  z-index: 100;
}

#panelSearch table,
#panelSearch table tbody,
#panelSearch table tbody tr {
  display: block;
  text-align: left;
  overflow: hidden;
  padding: 0;
  margin: 0;
}

#panelSearch table tbody tr {
  display: flex;
  justify-content: flex-end;
}

#panelSearch table tbody tr td {
  /*float: left;*/
}

#panelSearch table .keyword {
  display: block;
  width: 0 !important;
  padding: 0; /* hide the border */
  transition: width 300ms;
  overflow: hidden;
}

.Touch #panelSearch table .keyword /* on touch screen, should search box at any time */
{
  width: 10rem !important;
  transition: none;
}

#panelSearch:hover table .keyword,
#panelSearch:active table .keyword,
#panelSearch:focus table .keyword {
  width: 10rem !important;
  visibility: visible;
}

#panelSearch .keyword,
#panelSearch .search {
  margin: 0;
}

.MainContent .MainContentWrapper {
  margin: 0 auto;

  padding-left: 3rem;
  padding-right: 3rem;

}

.MainPage .SlideNewsSection .SlideNav a {
  font-family: "宋体", sans-serif; /*"Arial", "Microsoft YaHei", "\u5b8b\u4f53", Tahoma, Geneva, sans-serif;*/
  font-size: 3em;
  font-weight: bold;
  color: #ccc;
  text-decoration: none;
  cursor: pointer;
}

.MainPage .SlideNewsSection .SlideNav a:hover {
  color: #666;
}

.MainPage .SlideNewsSection .Slide
{
  visibility: hidden;
}
.MainPage .SlideNewsSection .Slide.n1
{
  visibility: visible;
}

.MainPage .ImageGallery {
  padding-top: 0.2rem;
  margin-top: 1rem;
}

@supports (display: flex) {

  body {
    display: flex;
    flex-direction: column;
  }

  .MainHeader,
  .MainFooter
    /*.MainNav*/
  {
    flex: 0 0 auto;
  }

  .MainContent {
    flex: 1 0 auto;
  }

  .MainHeader .HeaderWrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .MainHeader #logoStage {
    flex: 1 1 auto;
  }
  .MainHeader #logoStage {
    position: static;
    background-position-y: bottom;
  }

  .MainHeader .MainNav {
    flex: 0 0 auto;
    position: static;
  }

  #panelSearch .SearchWrapper {
    display: flex;
    justify-content: flex-end;
  }

  .MainNav ul.wp-menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
  }

  .MainNav ul.wp-menu .menu-item {
    flex: 0 1 auto;
    min-width: 6rem;
  }

  .MainNav ul.wp-menu .menu-item.FlexSpace {
    flex: 1 1 auto;
    visibility: hidden;
  }

  .MainNav ul.wp-menu .menu-item.AssocMenuItem {
    /*justify-self: end;*/
    margin-left: auto;
  }

  ul.news_list li {
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
  }

  ul.news_list li .NewsTitle,
  ul.news_list li .NewsMeta {
    display: block;
    flex: 1 1 0;
  }

  ul.news_list li .NewsMeta {
    flex: 0 1 auto;
    margin-left: auto;
  }

  .CalendarNewsBlock ul.news_list li {
    justify-content: flex-start;
  }

  /* main.htm */
  .MainPage .NewsSection {
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .MainPage .NewsSection .NewsBlock {
    flex: 1 1 15rem;
    overflow: hidden;
  }

  .MainPage .SlideNewsSection {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
  }

  .MainPage .SlideNewsSection .SlideNav {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .MainPage .SlideNewsSection .SlideStage {
    flex: 1 1 auto;
  }

  .MainPage .SlideNewsSection .SlideNav a {
    flex: 0 0 auto;
  }

  .MainPage .SlideNewsSection .SlideStage {
    position: relative;
  }

  .MainPage .SlideNewsSection .SlideStage,
  .MainPage .SlideNewsSection .Slide {
    width: 100%;
    overflow: hidden;
    height: 18rem;
  }

  .MainPage .SlideNewsSection .SlideContainer {
    position: relative;
    width: 100%;
    height: 100%;
  }

  .MainPage .SlideNewsSection .Slide {
    position: absolute;
    display: flex;
    flex-direction: row;
    flex-wrap: initial;
    /*flex-wrap: wrap;*/
    /*max-height: 400px; */
    list-style: none;
    margin: 0;
  }

  .MainPage .SlideNewsSection .Slide > div {
    /*
    margin: 0.5rem;
    */
    margin: 0;
    min-width: 10rem;
  }

  .MainPage .SlideNewsSection .Slide .SlideImageContent {
    margin-right: 0.25rem;
  }

  .MainPage .SlideNewsSection .Slide .SlideTextContent {
    margin-left: 0.25rem;
  }

  .MainPage .SlideNewsSection .Slide .SlideImageContent,
  .MainPage .SlideNewsSection .Slide .SlideTextContent {
    display: block;
    position: relative;
    /*min-width: 50%;*/
    /*min-height: 10em;*/
    /*height: 100%;*/
    flex: 1 1 50%;
    max-width: 50%;
    overflow: hidden;
  }

  .SlideNewsSection .SlideTextContent .NewsTitle,
  .SlideNewsSection .SlideTextContent .NewsDetails {
    margin: 0;
    padding: 1rem 1rem;
  }

  .MainPage .SlideNewsSection .Slide .SlideTextContent {
    max-width: 70%;
  }

  .MainPage .SlideNewsSection .Slide .SlideImageContent /* .SlideImageContainer */
  {
    /*visibility: visible;*/
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    position: relative;
    text-align: right;
  }

  .MainPage .SlideNewsSection .Slide .SlideImageContent .SlideImageContainer {
    position: relative;
    width: 100%;
    height: 100%;
    flex: 0 0 auto;
    /*
    display: flex;
    flex-direction: column;
    justify-content: center;
    */
  }

  .MainPage .SlideNewsSection .Slide img {
    /*
    max-width: 100%;
    max-height: 100%;
    */
    width: 100%;
    /*max-height: 100%;*/
    /*flex: 0 0 auto;*/
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .MainPage .SlideNewsSection .Slide .SlideTextContent {
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .MainPage .SlideNewsSection .Slide .SlideTextContent .NewsTitle {
    flex: 0 0 auto;
    overflow: hidden;
  }

  .MainPage .SlideNewsSection .Slide .SlideTextContent .NewsDetails {
    flex: 0 1 auto;
    overflow: hidden;
  }

  .MainPage .SlideNewsSection .Slide .SlideTextContent .NewsDetails .NewsTextWrapper {
    display: block;
    /*max-height: 100%;*/
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .MainPage .ImageGallery ul {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    max-height: 10rem;
  }

  .MainPage .ImageGallery ul li {
    flex: 1 1 auto;
  }

  .MainPage .ImageGallery ul li img {
    width: 100%;
    height: 100%;
  }

  /* listcolumn.htm */
  .ListColumnPage .MainContentWrapper {
    display: flex;
    flex-direction: row;
  }

  .ListColumnPage .NavBlock {
    flex: 0 0 12rem;
  }

  .ListColumnPage .ContentBlock {
    flex: 1 1 auto;
  }

  /************* Screen adapter **********************/
  /** for small screens  **/
  @media screen and (max-height: 600px) {

  }
  @media screen and (max-width: 60rem)      /* small desktop screen */ {
    body, html {
      font-size: 16px;
    }

    .MainHeader .HeaderWrapper {
      height: 160px;
    }

    .MainContent .MainContentWrapper {
      padding-left: 2rem;
      padding-right: 2rem;
    }

    .MainHeader #logoStage {
      /* background-position-x: 5%; */
    }

    .MainPage .NewsSection.NormalNewsSection {
      flex-wrap: wrap;
    }

    .MainPage .NewsSection.NormalNewsSection .NewsBlock {
      min-width: 15rem;
    }

    .MainPage .SlideNewsSection .Slide img {
      width: auto;
      height: 100%;
    }
  }

  @media screen and (max-width: 40rem) {
    .MainContent .MainContentWrapper {
      padding-left: 0;
      padding-right: 0;
    }

    .ListColumnPage .MainContentWrapper {
      flex-direction: column;
    }

    .ListColumnPage .NavBlock {
      order: 1;
      margin-top: 0.5rem;
    }

    .ListColumnPage .ContentBlock img,
    .DisplayInfoPage .Article img {
      width: auto !important;
      height: auto !important;
      max-width: 100%;
    }
  }

  @media screen and (max-width: 35rem) {
    .MainHeader .HeaderWrapper {
      height: 130px;
    }

    .MainHeader #logoStage {
      /* background-position-x: 0; */
      /*height: 100px;*/
      background-image: url("./logo2.png");
      background-position: -85px;
    }

    .MainNav .NavRegion {
      float: left;
    }

    .MainNav .NavMenuIcon {
      display: block;
      transition: background-color, color 0.5s;
    }

    .MainNav .menu-item {
      font-weight: normal;
    }

    .MainNav ul.wp-menu {
      max-width: 0;
      transition: left, width, max-width 0.5s;
      white-space: nowrap;
      overflow: hidden;
      /*display: none;*/
      position: absolute;
      flex-direction: column;
      background-color: rgba(255, 255, 255, 0.8);
      /*background-color: rgba(65,85,101,0.3);*/
      border: 1px solid #4c83bd /*#1384e2*/;
      left: -2px; /* offset to hide the border */
    }

    .MainNav ul.wp-menu li a {
      color: #000;
      padding: 0.4em 2em;
    }

    .MainNav ul.wp-menu li a:hover,
    .MainNav ul.wp-menu li a:active,
    .MainNav ul.wp-menu li a:focus {
      color: #fff;
    }

    .MainNav .NavRegion:hover ul.wp-menu,
    .MainNav .NavRegion:active ul.wp-menu,
    .MainNav .NavRegion.Focused ul.wp-menu {
      display: flex;
      max-width: 10rem;
      left: 0;
    }

    .MainNav ul.wp-menu .menu-item.AssocMenuItem {
      margin-left: initial;
    }

    .MainNav .menu-item:hover .sub-menu,
    .MainNav .menu-item:active .sub-menu {
      display: none;
      /*
      height: 100%;
      max-height: 100%;
      */
    }

    #panelSearch {
      top: auto;
      bottom: 0.3rem;
    }

    #panelSearch .SearchWrapper {
      /*
      right: 0.5rem;
      bottom: -2.1rem;
      */
      z-index: 200000;
    }
  }
  @media screen and (max-width: 35rem)      /* mobile phone */ {
    .MainPage .NewsSection {
      flex-direction: column;
    }

    .MainPage .NewsSection .NewsBlock {
      flex: 1 1 auto;
    }

    .MainPage .NewsSection.NormalNewsSection {
      flex-wrap: nowrap;
    }

    .MainPage .NewsSection.SlideNewsSection {
      flex-direction: row;
    }

    .MainPage .SlideNewsSection .Slide {
      flex-direction: column;
    }

    .MainPage .SlideNewsSection .SlideStage,
    .MainPage .SlideNewsSection .Slide {
      height: 30rem;
    }

    .MainPage .SlideNewsSection .Slide .SlideImageContent,
    .MainPage .SlideNewsSection .Slide .SlideTextContent {
      max-width: initial;
      max-height: 50%;
      flex: 1 1 auto;
    }

    .MainPage .SlideNewsSection .Slide .SlideTextContent {
      max-width: 100%;
      justify-content: flex-start;
    }

    .MainPage .SlideNewsSection .Slide .SlideImageContent {
      text-align: center;
    }

    .MainPage .SlideNewsSection .Slide img {
      width: auto;
      height: 100%;
    }

    .MainPage .SlideNewsSection.NewsBlock .NewsTitle {
      /*white-space: nowrap;*/
    }

    .SlideNewsSection .SlideTextContent .NewsTitle,
    .SlideNewsSection .SlideTextContent .NewsDetails {
      margin: 0;
      padding: 0.3rem 1rem;
    }

    .MainPage .NewsBlock.CalendarNews {
      order: -1;
    }

    .MainPage .ImageGallerySection,
    .MainPage .ImageGallery {
      display: none;
    }
  }
}