body{margin:0;padding:0;background: url(../img/webbg3.jpg) no-repeat;background-size:cover;background-attachment: fixed;width:100%;height:100%;min-height: 800px;}
ul{margin:0;padding: 0;}
li{list-style: none;margin:0;padding: 0;}
a{text-decoration:none;color:#87CEFF;}
.box{width:700px;height:750px;margin:auto;margin-top:5%;background-color: black;position:relative;opacity: 0;}
.box .navul{width:600px;height:100px;margin:auto;position: relative;padding:0;}
.box .navul .navli{width:130px;height:100px;margin-left:20px;float: left;position: relative;color:white;text-align:center;font-size: 15px;border-radius:0 0 12% 12%;transition-duration:1s;transition-delay: 100ms;-o-transition-delay: 100ms;-o-transition-duration:1s;-moz-transition-delay: 100ms;-moz-transition-duration:1s;-webkit-transition-delay: 100ms;-webkit-transition-duration:1s;}
.box .navul .navli:hover{background:#16d069; font-size: 18px;transition-delay: 100ms;transform: scale(1.1);transition-duration:500ms;-o-transition-delay: 100ms;-o-transform: scale(1.1);-o-transition-duration:500ms;-moz-transition-delay: 100ms;-moz-transform: scale(1.1);-moz-transition-duration:500ms;-webkit-transition-delay: 100ms;-webkit-transform: scale(1.1);-webkit-transition-duration:500ms;}
.box .navul .navli:hover .iconfont{font-size:25px;transition-delay: 100ms;transition-duration:500ms;-o-transition-delay: 100ms;-o-transition-duration:500ms;-moz-transition-delay: 100ms;-moz-transition-duration:500ms;-webkit-transition-delay: 100ms;-webkit-transition-duration:500ms;}
.box .navul .navli .icon{display: block;padding-bottom:8px;margin-top:8px;}
.box .list{width:600px;height:550px;margin:30px 50px;position: absolute;color:white;font-size: 18px;display: none;}
.box .list ul{width: 600px;height: 550px;margin:0 auto;}
.box .list ul li{margin-left: auto;margin-right: auto;}
.box .list .img-me{width:150px;height: 200px;background: url(../img/me.jpg);background-size: 150px 200px;display: block;border-radius: 10px; }
.box .list .infor,.name{width:500px;height: 50px;margin-top: 20px;font-size: 26px;text-align: center;}
.box .list .name span{width:50px;text-align: right;font-size:16px;display: inline-block;}
.box .list .infor span{width:150px;text-align: right;display: block;float: left;}
.box .list .infor div{width: 330px;float: left;font-size:20px;text-align: left;margin-left: 20px;margin-top: 20px;}
.box .demo ul li{text-align: center;list-style:decimal;width: 550px;}
.box .demo ul li span{width:120px;height:20px;display: block;float: right;}
/*@-webkit-keyframes show{
  form{transform: scale(0.1);}
  to{transform: scale(1);}
}*/
/*iconfont*/
@font-face {
  font-family: 'iconfont';  /* project id 250914 */
  src: url('//at.alicdn.com/t/font_pj8f15uenyi4quxr.eot');
  src: url('//at.alicdn.com/t/font_pj8f15uenyi4quxr.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_pj8f15uenyi4quxr.woff') format('woff'),
  url('//at.alicdn.com/t/font_pj8f15uenyi4quxr.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_pj8f15uenyi4quxr.svg#iconfont') format('svg');
}
.iconfont{
  font-family:"iconfont" !important;
  font-size:28px;font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
@media screen and (max-width: 710px){
  body{background: black;}
  .box{margin:0;padding: 0;width: 100%;height:100%;opacity: 1;}
}


.footer{
    text-align: center;
    /*padding: 0 auto;*/
   
    background-color: #fff;
    width: 100%;
    height: 34px;
    font-size: 20px;
    line-height: 34px;
}