@import url("grid.css");
@import url("set.css");

:root{
  --color-theme:    rgba(22, 152, 160, 1);
  --color-themeop1: rgba(22, 152, 160, .1);
  --color-themeop2: rgba(22, 152, 160, .2);
  --color-themeop5: rgba(22, 152, 160, .5);
}

/* 主体 */
body {font-size: 16px; color:#0A4448;background: rgba(243, 247, 247, 1);}
.container{width: 1200px; margin: 0 auto; position: relative;}
.header{position: fixed; z-index: 9; width: 100%; padding: 10px 0;transition: .4s; background: rgba(255, 255, 255, 0.8); backdrop-filter: blur(4px); box-shadow: 0 0 10px rgba(0, 0, 0, 0.12);}
.fp-viewing-header .header{box-shadow: none; backdrop-filter: none; color: #fff;background: linear-gradient(180deg, var(--color-themeop5) 0%, rgba(0, 0, 0, 0) 100%);;}


.footer{padding: 120px 0 60px; letter-spacing: 1px; background: url(../images/sh.png) center bottom/100% auto no-repeat, linear-gradient(0deg, rgba(22, 152, 160, 1) 0%, rgba(22, 152, 160, 0) 82.98%) ;}
.footer .mgl20, .fp-viewing-header .header .mgl20{filter:invert(100%) drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.32));}

.nav li{display: inline-block;margin: 5px 0 5px 60px;}
.nav li:hover{color: var(--color-theme);}
.nav~button{display: none;}

/* ----------------------- SUB ----------------------- */
.subbanner{width: 100%; padding: 200px 0 100px; color: #fff; text-align: center; background: url(../images/pic.jpg) no-repeat center top; background-size: cover; }
.subbanner span:first-child{ font-size:48px; font-weight: bold; text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.32);}
.subbanner span:nth-child(2){font-size:clamp(4px, 5vw, 60px); opacity: 33%; text-transform: uppercase; position: relative; display: block; margin-top: -100px;}
.subbanner.list01{ background-image: url(../images/list-about.jpg) }
.subbanner.list02{ background-image: url(../images/list-news.jpg) }
.subbanner.list03{ background-image: url(../images/list-info.jpg) }
.subbanner.list04{ background-image: url(../images/list-contact.jpg) }
.subbanner.list05{ background-image: url(../images/list-hr.jpg) }
.subbanner + .section{padding-top: 100px;}

.list .cp:hover .bgwhite{background: var(--color-theme) !important;color: white;box-shadow: 0px 24px 44px var(--color-themeop2), 0px 24px 44px var(--color-themeop2); transition: .3s;}
.list .cp:hover .theme{color: white !important;}
.pager{margin: 60px 0 0; font-size: 18px;}

.pager .container > .page-item {
  display: inline-block;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.22);
  width: 40px;
  height: 40px;
  line-height: 40px;
  background: #fff;
  border-radius: 2px;
  margin: 0 8px 16px;
}

.pager .container > .on,
.pager .container > .page-item:hover {
  color: white;
  background: var(--color-theme);
}

.pager .container .disabled, .pager .container .disabled:hover {
  color: rgba(0, 0, 0, 0.22);
  background: #fff;
  cursor: not-allowed;
}
.detail{padding: 60px;}
.sub{padding-top: 120px !important;}

/* ----------------------- RES ----------------------- */
@media (min-width: 1025px){
  .brief .col-md-7 .theme{padding-right: 21% !important;}
  .brief .col-md-6{margin-left: -8.4%;}
  .brief .col-md-6 .flex{margin-left: 16.8%;}
  .footer .col-md-4 {text-align: right;}
}
@media (max-width: 1024px){
  .fp-viewing-header .header{color: #000;}
  .header .flex.jcs{transform: scale(.8); transform-origin: left center;}
  .nav{height: 0; overflow: hidden;position: absolute;z-index: 9; width: calc(100% - 30px); top: 90px; background: #fff; border-radius: 32px;box-shadow: 0 4px 2px var(--color-themeop1);}
  .nav li{width: calc(100% - 30px); padding: 20px 40px; margin: 0; border-bottom: 1px solid #eee;}
  .nav~button{display:block;width: 25px;height: 30px;top: 30px;right: 15px;position: absolute;background-color: transparent;border: none;outline: none;cursor: pointer;}
  .nav~button span {display: block;width: 25px;height: 2px;background: var(--color-theme) ;margin-bottom: 6px;transition: 0.5s;}
  .nav.on {height: auto;}
  .nav.on~button span:nth-child(1) {transform: rotate(45deg);}
  .nav.on~button span:nth-child(2) {display: none;}
  .nav.on~button span:nth-child(3) {transform: rotate(-45deg) translate(5px, -5px);}
  .detail{padding: 60px 20px;}
  .footer{text-align: center;}
}

.rich-text-content table {
  border-collapse: collapse;
  width: 100%;
}
.rich-text-content table td,
.rich-text-content table th {
  border: 1px solid #ccc;
  padding: 8px;
}