.loaderTop{
    width: 100%;
    height: 100vh;
    position:fixed;
    text-align: center;
    background-color: #H5H5H5;
    z-index: 4;
}
.loaderTopBlock{
    width: 10em;
    height: 30%;
    display: inline-block;
    vertical-align: middle;
}

.loaderTopBlock > img{
    width: 100%;
    height: 100%;
    display: inline-block;
}

.loaderTop:before{
    content: '';
    width: 10px; /*為展示區域加寬，使用代碼時請改成0*/
    height: 100%;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}
.loaderTop:after{
    content: '';
    width: 10px; /*為展示區域加寬，使用代碼時請改成0*/
    height: 100%;
    display: inline-block;
    position: relative;
    vertical-align: middle;
}



.aboutBanners {
  max-width: var(--max-info-width);
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

#about, #building, #lecture, #newsList, #philosophy, #philosophyData, #service {
  position: relative;
  z-index: 2;
}

.about, .building, .lecture, .newsList, .philosophy, .service {
  padding-left: var(--menuWidth);
  margin: 0 auto;
  max-width: calc(var(--menuWidth) + var(--max-info-width));
  position: relative;
}


.about > *, .building > *, .lecture > *, .newsList > *, .philosophy > *, .service > * {
  position: relative;
  z-index: 2;
}

.aboutInfo {
  display: flex; 
  justify-content: space-between;
  margin: 110px auto;
  max-width: var(--max-info-width);
}

.aboutInfo > div {
  width: 50%;
}

.aboutInfo p {
  margin: 0;
}

.aboutInfo .left {
  margin-right: 3em;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.about .left .top, .building .left, .lectureInfo .left, .philosophyInfo .left, .serviceInfo .left, .newsInfo .left {
  display: flex;
  flex-direction: row-reverse;
}

.about .left .top p, .building .left p, .lectureInfo .left p, .philosophyInfo .left p, .serviceInfo .left p, .newsInfo .left p {
  writing-mode: vertical-rl;
  font-size: 2.8rem;
  line-height: 1.2em;
  font-weight: 600;
  margin: 0 0.1em;
}

.about .left .bottom p {
  font-weight: 400;
}

.about .right img {
  width: 342px;
  height: 162px;
  object-fit: cover;
}

.about .right p:last-child {
  text-align: right;
}

.decoration {
  position: absolute;
  z-index: 2;
  left: 0;
  padding-left: 180px;
}

.decoration h2 {
  font-size: 1.25rem;
  writing-mode: vertical-rl;
  position: absolute;
  top: 3em;
  left: calc(var(--menuWidth) - 100px);
}

.decoration img {
  writing-mode: vertical-rl;
  height: 20rem;
  width: 20rem;
  object-fit: contain;
}

/* building */
.buildingInfo, .lectureInfo {
  display: flex; 
  justify-content: space-between;
  margin: 47px 0 160px 0;
}

.lectureInfo {
  margin-bottom: 0;
}

.buildingInfo .left {
  margin-top: 10em;
  left: 0;
}

.buildingInfo > .right, .lectureInfo > .right {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 630px;
}

.buildingInfo .right a > img, .lectureInfo .right a > img {
  width: 300px;
  height: 300px;
  object-fit: cover;
}

#about .decoration {
  top: 600px;
}

#building .decoration, #lecture .decoration {
  top: 360px;
}

.buildingBg, .lecturegBg, .newsListBg {
  width: 100vw;
  height: 350px;
  background-image: url("/static/main/img/link/bg0816.jpg") ;
  display: block;
  position: absolute;
  left: 0; 
  top: 0;
  z-index: 1;
}

.lecturegBg {
  background: #C7DDE9;
  height: 600px;
}

.lectureInfo .title {
  font-size: 1.5em;
  font-weight: 700;
  width: 300px;
  margin: 0.5em 0 0.5em 0;
}

.lectureInfo .content {
  word-break: break-all;
  width: 300px;
  height: 4.5em;
  overflow: hidden;
}

.readmore {
  text-docoration: none;
  background: #947728;
  color: #FFF;
  padding: 0.3em 0.8em;
}

.newsListBg {
  height: 250px;
  top: 100px;
}

.buildingBg {
  top: 300px;
}

.lecturegBg {
  top: 120px;
  width: calc(100vw - 2em);
}

.right > a > p {
  margin: 0 0 2em 0;
}

.right > div > p {
  margin: 0.5em 0 2em 0;
}

.newsInfo {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 8em;
}

.newsLists {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 630px;
}

.newsLists > div {
  margin-bottom: 1.5em;
}

.newsLists > div img, .newsText {
  width: 300px;
  height: auto;
}

.newsText .newsDate {
  text-align: right;
  margin: 0;
  font-weight: 700;
  margin: 0.3em;
}

.newsText .newsHr {
  border-bottom: 1px solid #947728;
}

.newsText .title {
  font-size: 1.5em;
  font-weight: 700;
  margin: 0.8em 0;
}

/* .newsList {
  min-height: 350px;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 100px;
} */

/* .newsList a {
  display: block;
}

.newsInfo a .date {
  margin-right: 2em;
}

.newsInfo a .title {
  font-weight: 600;
}

.newsInfo a:hover span {
  color: var(--mainColor);
} */

/* 滑鼠放大效果 */
.right .caseImg a > img {
  display: block;
  object-fit: contain;
  object-position: 50% 50%;
}

 
.right .caseImg a > img {
  transition: transform 2s, opacity 1.5s ease-in-out;
  transform-origin: center center;
}

.right .caseImg {
  width: 300px;
  height: 300px;
  overflow: hidden;
}

.right .caseImg:hover img {
  opacity: 0.8;
  transform: scale(1.3);
}

.right .caseImg a {
  position: relative;
  height: 100%;
  display: block;
}

@media screen and (max-width: 1300px) {
  .buildingInfo .right a > img, .lectureInfo .right a > img {
    width: 250px;
    height: 250px;
  }
  .right .caseImg {
    width: 250px;
    height: 250px;
  }
  .buildingInfo > .right, .lectureInfo > .right {
    width: 530px;
  }
}

@media screen and (max-width: 1200px) {
  .buildingInfo .right a > img, .lectureInfo .right a > img {
    width: 200px;
    height: 200px;
  }
  .right .caseImg {
    width: 200px;
    height: 200px;
  }
  .buildingInfo > .right, .lectureInfo > .right {
    width: 430px;
  }
  .about .left .top p, .building .left p, .lectureInfo .left p, .philosophyInfo .left p, .serviceInfo .left p {
    font-size: 2rem;
  }
  .about .right img {
    width: 273.6px; /* 150px */
    height: 129.6px; /* 71px */
  }
}

@media screen and (max-width: 1000px) {
  .decoration img {
    height: 10rem;
    width: 10rem;
  }
  .decoration {
    padding-left: 100px;
  }
}

@media screen and (max-width: 820px) {
  .about .left .top p, .building .left p, .lectureInfo .left p, .philosophyInfo .left p, .serviceInfo .left p {
    font-size: 1.5rem;
  }
  #about .decoration {
    top: 360px;
  }
  html {
    font-size: 14px;
  }
}

@media screen and (max-width: 750px) {
  .decoration {
    padding-left: 0px;
  }
  .buildingInfo .left, .lectureInfo .left{
    margin-top: 0em;
  }
  .buildingInfo > .right, .lectureInfo > .right {
    margin-left: 0;
    flex-direction: column;
    width: 200px; /* 150px */
  }
  :root {
    --menuWidth: 0px;
  }
  .about, .building, .lecture, .newsList, .philosophy, .service {
    max-width: 100vw;
  }
  .aboutBanners {
    min-width: 100vw;
    margin: 0;
  }
  .aboutInfo .left {
    margin-right: 1em;
  }
  .aboutInfo {
    margin: 10px 2.5em;
    max-width: 100vw;
  }
  .buildingInfo, .lectureInfo {
    margin: 47px 3em 60px 3em;
  }
  html {
    font-size: 12px;
  }
  .newsInfo {
    margin: 10px 2.5em;
    max-width: 100vw;
  }
  .newsInfo > .left > p{
    font-size: 1.5rem;
  }
  .newsList {
    padding-top: 0;
    top: 0;
    min-height: 150px;
  }
  .newsListBg {
    height: 150px;
    top: 0;
  }
  
  .decoration h2 {
    left: 0;
  }
}

@media screen and (max-width: 370px) {
  .rights {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
}

@media screen and (max-width: 320px) {
  html {
    font-size: 10px;
  }
}