.sidenav{position: fixed;top: 50%;right: 40px;z-index: 999;margin-top: -230px;font-size: 12px;width: 168px;height: 321px;background: url(./sidenav.png);padding: 220px 0 0 60px;}
.sidenav{
-webkit-animation:bounceInDown 1s .2s ease both;
-moz-animation:bounceInDown 1s .2s ease both;
}
@-webkit-keyframes bounceInDown {
    0% {
        opacity: 0;
        -webkit-transform: translateY(-2000px)
    }
    60% {
        opacity: 1;
        -webkit-transform: translateY(30px)
    }
    80% {
        -webkit-transform: translateY(-10px)
    }
    100% {
        -webkit-transform: translateY(0)
    }
}
@-moz-keyframes bounceInDown {
    0% {
        opacity: 0;
        -moz-transform: translateY(-2000px)
    }
    60% {
        opacity: 1;
        -moz-transform: translateY(30px)
    }
    80% {
        -moz-transform: translateY(-10px)
    }
    100% {
        -moz-transform: translateY(0)
    }
}

canvas {
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: fixed;

}
canvas.flare {
  opacity: 5;
}
.area{
    width: 100%;
    height: 1100px;
    background: url(1.jpg) no-repeat scroll center top;
    background-color:#fdf3ec;
}
.containers{width:1200px; margin:0 auto;}
.img1{padding-top:575px;padding-left:48px;}
.area1{
    width: 100%;
    height:457px;
    background: url(2.png) no-repeat scroll center -100px;
}
.area2{
    width: 100%;
    height:550px;
    background: url(3.png) no-repeat scroll center center;
    position:relative;
}
.area22{
    width: 100%;
    height:818px;
    background: url(5.jpg) no-repeat scroll center center;
    position:relative;
}
.lasts{ width: 60px; height: 50px; margin-top:97px; margin-left:128px; margin-bottom:-147px; float: left;}
.lastss{ width: 60px; height: 50px; margin-top:97px; margin-left:760px; margin-bottom:-147px; float: left;}
.area3{
    width: 100%;
    height:615px;
    background: url(4.png) no-repeat scroll center center;
    z-index: 120;
position:relative;

}

#names {
    width: 290px;
    height: 40px;
    margin-bottom: 20px;
    font-size: 17px;
}
#shoujis {
    width: 290px;
    height: 40px;
    margin-bottom: 20px;
    font-size: 17px;
}
input{ border:none; }
.ove {
    width: 680px;
    height: 350px;
    margin: 0 auto;
    padding-top: 265px;
    position: relative;
}
.ullist {
    padding-top: 102px;
    margin-left: -20px;
}
#introduces {
    width: 290px;
    height: 90px;
    border: none;
    outline: none;
    resize: none;
}
.submit {
    font-size: 22px;
    color: #ffffff;
    background: #ed4040;
    margin-left: 95px;
    margin-top: 28px;
}
.diycss {
    font-size: 19px;
    color: #ffffff;
    margin-left: 501px;
    margin-top: -33px;
    display: block;
}
.area4{
    width: 100%;
    height:373px;
    background: url(5.png) no-repeat scroll center center;
}
.area5{
    width: 100%;
    height:875px;
    background: url(6.png) no-repeat scroll center center;
}
.area6{
    width: 100%;
    height:746px;
    background: url(7.jpg) no-repeat scroll center center;
}
.fjjs{width: 1000px; margin:0 auto; padding-top: 125px;padding-left:100px;}
.fj{width: 287px; height: 300px; float: left;margin-right: 15px; text-align: center; margin-bottom: 15px;}
.area1 .head {
    width: 820px;
    height: 100px;
    margin: 0 auto;
    color: #ffffff;
    line-height: 30px;
    padding-top: 190px;
    padding-left: 30px;
    position:relative;
}
.s6{font-size: 24px; color: #333333;display: block;padding-top: 5px;}
.s7{font-size: 18px; color: #333333;direction: block}
.siz1{font-size: 18px;text-indent: 2em;}
.siz2{font-size: 24px;text-indent: 5.5em;line-height: 60px;}
.siz3{font-size: 18px;color: #333333; text-indent: 2em;}
.main{width: 100%; background: #fdf3ec;z-index: -2}
.area2 .head {
    width: 820px;
    height: 100px;
    margin: 0 auto;
    color: #ffffff;
    padding-top: 205px;
    padding-left: 30px;
}
.xiak{width: 260px; height: 120px; float: left;margin-top: 255px; margin-left: 30px;margin-right: 15px;}
.cente{width: 930px;height: 130px; margin:0 auto; }
.student{font-size: 18px; color: #333333; line-height: 40px;}
.students{display:block;color: #666666;font-size: 14px; padding-left: 18px;line-height: 25px;}
.studnett{display:block;color: #666666;font-size: 14px; padding-left: 22px;line-height: 20px;}
.titl{font-size: 20px; color: #ffffff;padding-top:90px;text-align:center;}
.dj{padding-left:10px; font-size: 18px; clear: both; text-align: center; padding-top: 12px; cursor:pointer;color: #8a0303;}


.containerres{
  margin: 0 auto;
  width: 1250px;
  padding-top: 169px;
}

.direction-reveal__card:first-child{
  float: left;
  margin-left:42px;
  margin-top:225px;
  display: block;
}
.direction-reveal__card{
  float: left;
  margin-right:1px;
  margin-top:225px;
  display: block;
}
.direction-reveal__card img{
    width: 360px;
  height: 237px;;
}
.dsr{width:380px; height: 50px; margin-left:28px; margin-top:-10px; float:left}
.direction-reveal--grid-bootstrap .direction-reveal__card {
  margin-top:88px;
  margin-bottom: 15px;
}
.direction-reveal__overlay {
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: translate3d(0, -200%, 0);
          transform: translate3d(0, -100%, 0);
  width: 100%;
  height: 100%;

  color: #fff;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.6);
  -webkit-animation-duration: 0.3s;
          animation-duration: 0.3s;
  -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
          animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}
.swing--in-top .direction-reveal__overlay {
  -webkit-animation-name: swing--in-top;
          animation-name: swing--in-top;
}

.swing--in-bottom .direction-reveal__overlay {
  -webkit-animation-name: swing--in-bottom;
          animation-name: swing--in-bottom;
}

.swing--in-left .direction-reveal__overlay {
  -webkit-animation-name: swing--in-left;
          animation-name: swing--in-left;
}

.swing--in-right .direction-reveal__overlay {
  -webkit-animation-name: swing--in-right;
          animation-name: swing--in-right;
}

.swing--out-top .direction-reveal__overlay {
  -webkit-animation-name: swing--out-top;
          animation-name: swing--out-top;
}

.swing--out-bottom .direction-reveal__overlay {
  -webkit-animation-name: swing--out-bottom;
          animation-name: swing--out-bottom;
}

.swing--out-left .direction-reveal__overlay {
  -webkit-animation-name: swing--out-left;
          animation-name: swing--out-left;
}

.swing--out-right .direction-reveal__overlay {
  -webkit-animation-name: swing--out-right;
          animation-name: swing--out-right;
}

.direction-reveal [class*='swing--'] .direction-reveal__overlay {
  -webkit-transform: rotate3d(0, 0, 0, 0);
          transform: rotate3d(0, 0, 0, 0);
  -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
          animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
}

.swing--in-top, .swing--out-top {
  -webkit-perspective-origin: center top;
          perspective-origin: center top;
}

.swing--in-top .direction-reveal__overlay, .swing--out-top .direction-reveal__overlay {
  -webkit-transform-origin: center top;
          transform-origin: center top;
}

.swing--in-bottom, .swing--out-bottom {
  -webkit-perspective-origin: center bottom;
          perspective-origin: center bottom;
}

.swing--in-bottom .direction-reveal__overlay, .swing--out-bottom .direction-reveal__overlay {
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}

.swing--in-left, .swing--out-left {
  -webkit-perspective-origin: left center;
          perspective-origin: left center;
}

.swing--in-left .direction-reveal__overlay, .swing--out-left .direction-reveal__overlay {
  -webkit-transform-origin: left center;
          transform-origin: left center;
}

.swing--in-right, .swing--out-right {
  -webkit-perspective-origin: right center;
          perspective-origin: right center;
}

.swing--in-right .direction-reveal__overlay, .swing--out-right .direction-reveal__overlay {
  -webkit-transform-origin: right center;
          transform-origin: right center;
}

@-webkit-keyframes swing--in-top {
  0% {
    -webkit-transform: rotate3d(-1, 0, 0, 90deg);
            transform: rotate3d(-1, 0, 0, 90deg);
  }
}

@keyframes swing--in-top {
  0% {
    -webkit-transform: rotate3d(-1, 0, 0, 90deg);
            transform: rotate3d(-1, 0, 0, 90deg);
  }
}

@-webkit-keyframes swing--out-top {
  100% {
    -webkit-transform: rotate3d(-1, 0, 0, 90deg);
            transform: rotate3d(-1, 0, 0, 90deg);
  }
}

@keyframes swing--out-top {
  100% {
    -webkit-transform: rotate3d(-1, 0, 0, 90deg);
            transform: rotate3d(-1, 0, 0, 90deg);
  }
}

@-webkit-keyframes swing--in-bottom {
  0% {
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
  }
}

@keyframes swing--in-bottom {
  0% {
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
  }
}

@-webkit-keyframes swing--out-bottom {
  100% {
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
  }
}

@keyframes swing--out-bottom {
  100% {
    -webkit-transform: rotate3d(1, 0, 0, 90deg);
            transform: rotate3d(1, 0, 0, 90deg);
  }
}

@-webkit-keyframes swing--in-left {
  0% {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
  }
}

@keyframes swing--in-left {
  0% {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
  }
}

@-webkit-keyframes swing--out-left {
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
  }
}

@keyframes swing--out-left {
  100% {
    -webkit-transform: rotate3d(0, 1, 0, 90deg);
            transform: rotate3d(0, 1, 0, 90deg);
  }
}

@-webkit-keyframes swing--in-right {
  0% {
    -webkit-transform: rotate3d(0, -1, 0, 90deg);
            transform: rotate3d(0, -1, 0, 90deg);
  }
}

@keyframes swing--in-right {
  0% {
    -webkit-transform: rotate3d(0, -1, 0, 90deg);
            transform: rotate3d(0, -1, 0, 90deg);
  }
}

@-webkit-keyframes swing--out-right {
  100% {
    -webkit-transform: rotate3d(0, -1, 0, 90deg);
            transform: rotate3d(0, -1, 0, 90deg);
  }
}

@keyframes swing--out-right {
  100% {
    -webkit-transform: rotate3d(0, -1, 0, 90deg);
            transform: rotate3d(0, -1, 0, 90deg);
  }
}

.slide--in-top .direction-reveal__overlay {
  -webkit-animation-name: slide--in-top;
          animation-name: slide--in-top;
}

.slide--in-bottom .direction-reveal__overlay {
  -webkit-animation-name: slide--in-bottom;
          animation-name: slide--in-bottom;
}

.slide--in-left .direction-reveal__overlay {
  -webkit-animation-name: slide--in-left;
          animation-name: slide--in-left;
}

.slide--in-right .direction-reveal__overlay {
  -webkit-animation-name: slide--in-right;
          animation-name: slide--in-right;
}

.slide--out-top .direction-reveal__overlay {
  -webkit-animation-name: slide--out-top;
          animation-name: slide--out-top;
}

.slide--out-bottom .direction-reveal__overlay {
  -webkit-animation-name: slide--out-bottom;
          animation-name: slide--out-bottom;
}

.slide--out-left .direction-reveal__overlay {
  -webkit-animation-name: slide--out-left;
          animation-name: slide--out-left;
}

.slide--out-right .direction-reveal__overlay {
  -webkit-animation-name: slide--out-right;
          animation-name: slide--out-right;
}

.direction-reveal [class*='slide--'] .direction-reveal__overlay {
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
          animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@-webkit-keyframes slide--in-top {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

@keyframes slide--in-top {
  0% {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

@-webkit-keyframes slide--out-top {
  100% {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

@keyframes slide--out-top {
  100% {
    -webkit-transform: translate3d(0, -100%, 0);
            transform: translate3d(0, -100%, 0);
  }
}

@-webkit-keyframes slide--in-bottom {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}

@keyframes slide--in-bottom {
  0% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}

@-webkit-keyframes slide--out-bottom {
  100% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}

@keyframes slide--out-bottom {
  100% {
    -webkit-transform: translate3d(0, 100%, 0);
            transform: translate3d(0, 100%, 0);
  }
}

@-webkit-keyframes slide--in-left {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slide--in-left {
  0% {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}

@-webkit-keyframes slide--out-left {
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}

@keyframes slide--out-left {
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
            transform: translate3d(-100%, 0, 0);
  }
}

@-webkit-keyframes slide--in-right {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}

@keyframes slide--in-right {
  0% {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}

@-webkit-keyframes slide--out-right {
  100% {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}

@keyframes slide--out-right {
  100% {
    -webkit-transform: translate3d(100%, 0, 0);
            transform: translate3d(100%, 0, 0);
  }
}

.rotate--in-top .direction-reveal__overlay {
  -webkit-animation-name: rotate--in-top;
          animation-name: rotate--in-top;
}

.rotate--in-bottom .direction-reveal__overlay {
  -webkit-animation-name: rotate--in-bottom;
          animation-name: rotate--in-bottom;
}

.rotate--in-left .direction-reveal__overlay {
  -webkit-animation-name: rotate--in-left;
          animation-name: rotate--in-left;
}

.rotate--in-right .direction-reveal__overlay {
  -webkit-animation-name: rotate--in-right;
          animation-name: rotate--in-right;
}

.rotate--out-top .direction-reveal__overlay {
  -webkit-animation-name: rotate--out-top;
          animation-name: rotate--out-top;
}

.rotate--out-bottom .direction-reveal__overlay {
  -webkit-animation-name: rotate--out-bottom;
          animation-name: rotate--out-bottom;
}

.rotate--out-left .direction-reveal__overlay {
  -webkit-animation-name: rotate--out-left;
          animation-name: rotate--out-left;
}

.rotate--out-right .direction-reveal__overlay {
  -webkit-animation-name: rotate--out-right;
          animation-name: rotate--out-right;
}

.direction-reveal [class*='rotate--'] .direction-reveal__overlay {
  -webkit-transform: rotate(0);
          transform: rotate(0);
  -webkit-animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
          animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.rotate--in-top .direction-reveal__overlay, .rotate--out-top .direction-reveal__overlay {
  -webkit-transform-origin: left top;
          transform-origin: left top;
}

.rotate--in-bottom .direction-reveal__overlay, .rotate--out-bottom .direction-reveal__overlay {
  -webkit-transform-origin: left bottom;
          transform-origin: left bottom;
}

.rotate--in-left .direction-reveal__overlay, .rotate--out-left .direction-reveal__overlay {
  -webkit-transform-origin: left top;
          transform-origin: left top;
}

.rotate--in-right .direction-reveal__overlay, .rotate--out-right .direction-reveal__overlay {
  -webkit-transform-origin: right top;
          transform-origin: right top;
}

@-webkit-keyframes rotate--in-top {
  0% {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}

@keyframes rotate--in-top {
  0% {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}

@-webkit-keyframes rotate--out-top {
  100% {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}

@keyframes rotate--out-top {
  100% {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}

@-webkit-keyframes rotate--in-bottom {
  0% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}

@keyframes rotate--in-bottom {
  0% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}

@-webkit-keyframes rotate--out-bottom {
  100% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}

@keyframes rotate--out-bottom {
  100% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}

@-webkit-keyframes rotate--in-left {
  0% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}

@keyframes rotate--in-left {
  0% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}

@-webkit-keyframes rotate--out-left {
  100% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}

@keyframes rotate--out-left {
  100% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
}

@-webkit-keyframes rotate--in-right {
  0% {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}

@keyframes rotate--in-right {
  0% {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}

@-webkit-keyframes rotate--out-right {
  100% {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}

@keyframes rotate--out-right {
  100% {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
  }
}

.direction-reveal__card {
  display: inline-block;
  position: relative;
  overflow: hidden;
  -webkit-perspective: 400px;
          perspective: 400px;
}
.dianj{
  clear: both;
  margin: 0 auto;
  width: 1200px;
  font-size: 13px;
}
.dianj li:first-child{
  text-indent: 3em;
  margin-left: 230px;
   width: 78px;
}
.dianj li{
  text-indent: 3em;
   width: 78px;
  float: left;
  margin-left: 217px;
}
.dianj li a{
  color: #000000;
}
.direction-reveal__title {
  margin-top: 0;
}

.direction-reveal__text {
font-size: 16px;
margin-top: 20px;
display: block;
text-align: center;
}

.direction-reveal--3-grid-flexbox {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  margin-right: -10px;
  margin-left: -10px;
}

.direction-reveal--3-grid-flexbox .direction-reveal__card {
  -webkit-box-flex: 0;
      -ms-flex: 0 0 33.333333%;
          flex: 0 0 33.333333%;
  max-width: 33.333333%;
  border: 10px solid transparent;
}

.direction-reveal--3-grid-cssgrid {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: (1fr)[3];
      grid-template-columns: repeat(3, 1fr);
  margin-right: -10px;
  margin-left: -10px;
}

.direction-reveal--3-grid-cssgrid .direction-reveal__card {
  border: 10px solid transparent;
}