@charset "utf-8";
/* CSS Document */


nav,
nav ul,
nav li {
  width: 100%;
  text-align: center;
  float: left;
}
.headbox { clear: both; overflow: hidden; *zoom:1;
  height: 65px; background: url("https://libvpn.swfu.edu.cn/vpn/89/https/M33GK5UDNAYG63LYPMYGG5C/index/2022/m/js/bj_dh201304.jpg;vpn_img") no-repeat center top, #183878; background-size: 100% 100%; }
  .logoarea { clear: both; height: 65px; padding: 0 5px; overflow: hidden; *zoom:1;
    width: 308px; margin: 0 auto; }
    .logoarea h2 { float: left; width: 70px; display: inline; padding-top: 12px; }
    .logoarea h2 a { display: inline-block; width: 68px; height: 38px;  overflow: hidden; background-size: 68px auto; }
    .headnav { display: inline; color: #fff; height: 65px; clear: both; padding: 4px 0; line-height: 24px; text-align: center; }
    .headnav1 { height: 52px; padding: 6px 0 0; line-height: 52px; text-align: center; float: left; font-weight: bold; font-family: Georgia; padding-left: 10px; font-size: 18px; font-style: italic; text-shadow: 1px 5px 20px blue; }
    .headnav1 a { width: 38px; display: inline-block; color: #fff; }
    .headnav2 { padding: 12px 0 0; text-align: center; float: left }
    .headnav2 .dh {  background-repeat: no-repeat; background-size: 28px auto; width: 28px; text-align: center; background-position: center top; float: left; height: 40px; }
/* 滑动*/
.fliptab .container {
  position: relative;
  width: 700%;
  display: -webkit-box; /*white-space: nowrap;*/
  -webkit-backface-visibility: hidden;
  -webkit-appearance: caps-lock-indicator;
  clear: both;
  -webkit-transition-property: left, top, translate;
  -webkit-transition-duration: 0.4s;
}
.fliptab .container > * {
  display: block;
  -webkit-transform: translate3d(0, 0, 0);
  -webkit-box-flex: 1;
  width: 0;
}
.articles {
  margin: -1px auto 0 auto;
  height: 100%;
  overflow: hidden;
}
.nav-2 .container {
  width: 400%;
}
.nav-3 .container {
  width: 500%;
}
.nav-4 .container {
  width: 600%;
}
*[touch="false"].nav-2 .container {
  width: 200%;
}
*[touch="false"].nav-3 .container {
  width: 300%;
}
*[touch="false"].nav-4 .container {
  width: 400%;
}
.fliptab .touching {
  -webkit-transition-property: none;
}
.nav-btn {
  height: 42px;
  width: 50px;
  position: absolute;
  top: 18px;
  right: 10px;
  -moz-transition: 0.3s;
  -o-transition: 0.3s;
  -webkit-transition: 0.3s;
  transition: 0.3s;
  cursor: pointer;
}
.nav-btn.active {
  position: fixed;
  z-index: 25;
}
.nav-btn-bar {
  height: 1px;
  width: 23px;
  display: block;
  margin: 7px auto;
  position: relative;
  background-color: #fff;
  -moz-transition: 0.4s;
  -o-transition: 0.4s;
  -webkit-transition: 0.4s;
  transition: 0.4s;
}
.nav-btn-bar:nth-of-type(1) {
  -moz-animation: rotateR 1.5s cubic-bezier(0.5, 0.2, 0.2, 1);
  -webkit-animation: rotateR 1.5s cubic-bezier(0.5, 0.2, 0.2, 1);
  animation: rotateR 1.5s cubic-bezier(0.5, 0.2, 0.2, 1);
}
.nav-btn-bar:nth-of-type(2) {
  -moz-animation: fade 1.5s cubic-bezier(0.1, 0.8, 0.1, 1);
  -webkit-animation: fade 1.5s cubic-bezier(0.1, 0.8, 0.1, 1);
  animation: fade 1.5s cubic-bezier(0.1, 0.8, 0.1, 1);
}
.nav-btn-bar:nth-of-type(3) {
  -moz-animation: rotateL 1.5s cubic-bezier(0.5, 0.2, 0.2, 1);
  -webkit-animation: rotateL 1.5s cubic-bezier(0.5, 0.2, 0.2, 1);
  animation: rotateL 1.5s cubic-bezier(0.5, 0.2, 0.2, 1);
}
.nav-btn.active .nav-btn-bar:nth-of-type(1) {
  -moz-transform: translateY(10px) rotate(45deg);
  -ms-transform: translateY(10px) rotate(45deg);
  -webkit-transform: translateY(10px) rotate(45deg);
  transform: translateY(10px) rotate(45deg);
}
.nav-btn.active .nav-btn-bar:nth-of-type(2) {
  opacity: 0;
}
.nav-btn.active .nav-btn-bar:nth-of-type(3) {
  -moz-transform: translateY(-6px) rotate(-45deg);
  -ms-transform: translateY(-6px) rotate(-45deg);
  -webkit-transform: translateY(-6px) rotate(-45deg);
  transform: translateY(-6px) rotate(-45deg);
}
.nav {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  z-index: 21;
  background: #0c3a77;
  width: 100%;
  height: 100%;
}
.nav a {
  display: block;
  color: #fff;
  font-size: 18px;
  line-height: 30px;
  padding: 0 10%;
  width: auto;
}
.nav.active {
  display: block;
}
.nav ul {
  width: 40%;
  margin: 60px 2%;
}
.nav ul {
  padding: 0;
  list-style: none;
  text-align: right;
  direction: rtl;
  font-size: 1.1rem;
  line-height: 2rem;
}
.nav ul li {
  width: 100%;
  font-size: 16px;
  line-height: 32px;
}
.menu-text {
  color: #fff;
  margin-bottom: 20px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  font-weight: 100;
}
.menu-text li a {
  display: block;
  font-weight: bold;
  margin-bottom: 10px;
  color: #fff;
  text-decoration: none;
  font-style: normal;
}


