@charset "utf-8";
body { margin: 0; padding: 0; height: 100%; font-family: Microsoft YaHei, "微软雅黑"; color: #000;  background: #fff;}
dd, dl, dt, li, ol, ul { margin: 0; padding: 0; list-style: none }
.fl { float: left }
.fr { float: right }
.clear { clear: both }
a { text-decoration: none; transition: all .2s linear 0s }
:focus { outline: 0 }
img { border: 0 }
::-webkit-scrollbar {
  width: 9px;
  background-color: #000;
}
::-webkit-scrollbar-thumb {
  border: solid 2px #000;
  width: 5px;
  border-radius: 4px;
  background-color: #0d4850;
}
::-webkit-scrollbar-corner {
  background-color: #000;
}
::-webkit-scrollbar:horizontal {
  height: 9px;
}
::-webkit-selection {
  background: #0d4850;
  color: #fff;
}
::-moz-selection {
  background: #0d4850;
  color: #fff;
}
::selection {
  background: #0d4850;
  color: #fff;
}
.index{overflow: hidden;}
.showpicmain{padding-right: 200px;}
.head{position: fixed; top: 0; right: 0; width: 200px; height: 100%;background: #0670a3;}
.homehead{position: absolute; top: 0; right: 0; width: 200px; height: 100%;background: #0670a3;}
.logo{ width: 180px; right: 0; top: 20px; height: 100%; padding-left: 10px; position: relative;}
.logo img{max-width: 100%; margin: 0 auto; display: block;}
.menu{position: absolute; width: 100%; z-index: 11; top: 250px;}
.menu ul{overflow: hidden;}
.menu ul li{float: left; width: 100%;}
.menu ul li a{text-align: center; color: #fff; display: block; font-size: 1rem; line-height: 2rem; padding: 8px 0;}
.qr{position: absolute; bottom: 20px; width: 60%; right: 20%;}
.qr img{width: 100%;}
.qr p{text-align: center; line-height: 1rem; color: #fff;}
.content{width:calc(80% - 200px); height: 100%; position: absolute; left: 0; padding: 0 10%;}
.sname{width: 100%; display: block; overflow: hidden; text-align: center; color: #000; font-weight: bold; padding: 50px 0; font-size: 2rem;}
.content p{text-indent: 2em; line-height: 2; text-align: justify; font-size: 1.1rem;}
.content img{max-width: 100%; border-radius: 4px;}

.swiper-container {
    width: 100%;
    height: 100%;
  }

  .swiper-slide {
    text-align: center;
    font-size: 18px;
    background: #fff;

    /* Center slide text vertically */
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
  }

  .list{width: 100%; height: 400px;}
  .list .swiper-slide a p{color: #000; text-indent: 0; text-align: center;}
.waphead{display: none;}
.waplist{display: none;}
@media (max-width: 767px){
  .head ,.homehead{display: none;}
  .showpicmain{padding-right: 0; padding-top: 4rem;}
  .waphead{position: fixed; width: 100%; height: 4rem; top: 0; background: #0670a3; z-index: 99; display: block;}
  .waphead .waplogo img{width: 64%; padding-top: .75rem;}
  .content{width: 88%; padding: 5rem 6%;}
  .sname{padding: 20px 0; font-size: 1.8rem;}
  .content .ft{margin-left: -2em}
  .content p{font-size: 1rem;}
  .hometop{padding-top: 12px;}
  .list{display: none;}
  .waplist{display: block; width: 100%; padding: 5% 0 10%; overflow: hidden;}
  .waplist ul li{float: left; width: 45%; margin-right: 10%;}
  .waplist ul li:nth-child(2n){margin-right: 0;}
  .waplist ul li a{display: block;}
  .waplist ul li a p{color: #000; font-size: .8rem; text-indent: 0; line-height: 1.2;}
  /**
  * Navigation Defaults
  */
  .nav {
    position: absolute;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    -webkit-transition-property: all;
    transition-property: all;
    -webkit-transition-duration: 300ms;
            transition-duration: 300ms;
  }
  .nav--active .nav {
    opacity: 1;
    background-color: #0670a3;
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: auto;
  }
  .nav__list {
    margin: 0;
    padding: 10px;
  }
  .nav__item {
    list-style-type: none;
    text-align: left;
    padding: 10px 20px;
  }
  .nav__link {
    font-size: 1.3em;
    text-transform: uppercase;
    text-decoration: none;
    color: #FFFFFF;
    opacity: 1;
    -webkit-transition: opacity 300ms ease-in-out;
    transition: opacity 300ms ease-in-out;
  }
  /* Default navigation icon */
  .nav__trigger {
    display: block;
    position: absolute;
    width: 30px;
    height: 25px;
    right: 15px;
    top: 18px;
    z-index: 200;
  }
  .nav--active .nav__trigger {
    opacity: 0.5;
  }
  .nav__icon {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 5px;
    background-color: #FFFFFF;
    -webkit-transition-property: background-color, -webkit-transform;
    transition-property: background-color, -webkit-transform;
    transition-property: background-color, transform;
    transition-property: background-color, transform, -webkit-transform;
    -webkit-transition-duration: 300ms;
            transition-duration: 300ms;
  }
  .nav__icon:before,
  .nav__icon:after {
    content: '';
    display: block;
    width: 30px;
    height: 5px;
    position: absolute;
    background: #FFFFFF;
    -webkit-transition-property: margin, -webkit-transform;
    transition-property: margin, -webkit-transform;
    transition-property: margin, transform;
    transition-property: margin, transform, -webkit-transform;
    -webkit-transition-duration: 300ms;
            transition-duration: 300ms;
  }
  .nav__icon:before {
    margin-top: -10px;
  }
  .nav__icon:after {
    margin-top: 10px;
  }

  .style-5 .nav {
    -webkit-transform: translate(100%, -100%) scale(0.5);
            transform: translate(100%, -100%) scale(0.5);
    border-radius: 100%;
  }
  .style-5 .nav--active .nav {
    -webkit-transform: translateY(0) scale(1);
            transform: translateY(0) scale(1);
    border-radius: 0;
    width: 100%;
    height: 100%;
  }
  .style-5 .nav__link {
    opacity: 0;
    -webkit-transition-delay: 500ms;
            transition-delay: 500ms;
  }
  .style-5 .nav--active .nav__link {
    opacity: 1;
  }
  .style-5 .nav--active .nav__icon {
    background: rgba(0, 0, 0, 0);
  }
  .style-5 .nav--active .nav__icon:before {
    margin-top: 0;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  .style-5 .nav--active .nav__icon:after {
    margin-top: 0;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }

}