@charset "utf-8";
body{ padding: 0; margin: 0; font-family: "Microsoft Yahei"; }
*{ list-style: none; text-decoration: none; padding: 0; margin: 0; -webkit-transition: 300ms; -moz-transition: 300ms;-o-transition: 300ms;transition: 300ms; font-weight: normal; }

#menu { margin: 0; padding: 0; position: fixed; left: 0; top: 0; height: 60px; list-style-type: none; z-index: 70; background: #113961; width: 100%; box-shadow:0 3px 5px rgba(125, 124, 124, 0.6);-webkit-transition: 300ms; -moz-transition: 300ms;-o-transition: 300ms;transition: 300ms; }
.menu_p{ width: 1024px; margin: 0 auto; }
.menu_p .logo{ float: left; height: 60px; }
#menu ul{ text-align:center; }
#menu ul li { display:inline-block; margin:  0 10px 0 0; font-size: 14px;}
#menu a { float: left; padding: 0 20px;  color: #fff; text-decoration: none; line-height: 60px;}
#menu .active a { color: #c49d51; }
#menu .logo{ background: url(../images/logo_a.png) no-repeat; width: 60px; height: 60px; position:absolute; }
#menu.menu1{ background: #fff;box-shadow:0 3px 5px rgba(125, 124, 124, 0.6); }
#menu.menu2{ box-shadow:0 3px 5px rgba(0, 0, 0, 0.6);  }
#menu.menu1 a { float: left; padding: 0 20px;  color: #000; text-decoration: none; line-height: 60px;}
#menu.menu1 .active a { color: #c49d51; }
#menu.menu1 .logo{background: url(../images/logo_b.png) no-repeat;}

.page { text-align: center;  color: #fff;}
.page1{ background: url(../images/page1.jpg) no-repeat center center; background-size: cover; }
.page_box{ width: 1100px; margin: 0 auto; height: 100%; position: relative; }
.pwenzi{ position: absolute; left: 0;  vertical-align: middle; transform: translate(0,-50%); top: 50%; color: #000; text-align: left;}
.pwenzi h3{ color: #c49d51; line-height: 40px; padding-bottom: 20px; font-weight: normal; font-size: 34px; }
.pwenzi h1{ color: #20283b; line-height: 60px; line-height: 80px; font-size: 60px; animation-delay:0.3s;-webkit-animation-delay:0.3s;}
.pwenzi h5{ font-size: 15px; color: #a4a4a4; line-height: 24px; text-transform: uppercase; font-weight: normal; font-family: Arial; padding: 10px 0; animation-delay:0.5s;-webkit-animation-delay:0.5s;}
.pwenzi h6{ font-size: 12px; color: #c49d51; line-height: 18px;animation-delay:0.7s;-webkit-animation-delay:0.7s; }
.pimg { height: 100%; position: absolute; right: 0;}
.pimg img{height: 90%;position: absolute;right: 0;bottom: 0;animation-delay:1s;-webkit-animation-delay:1s; }
.page2{ background: url(../images/page2.jpg) no-repeat; background-size: cover; }
.p2wz{ width: 431px; text-align: left; padding:100px 0 30px 0; position: relative; left: 50%; transform: translate(-50%,0);}
.p2wz h1{ padding-bottom: 15px; font-size: 34px; font-weight: normal; }
.p2wz h2{animation-delay:0.2s;-webkit-animation-delay:0.2s;}
.page_box .none{ display: none; }
.p2img ul li{ display: inline-block ; margin: 0 2.5%; }
.p2img ul li .img{ overflow: hidden;  background: #fff;  padding:15px 15px 0 15px;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box; box-shadow: 0 0 15px rgba(0,0,0,0.3);line-height: 0;} 
.p2img ul li .img p{ line-height: 40px; text-align: center; color: #000; font-size: 14px; }
.p2img ul li .more{ text-align: right; line-height: 30px; }
.p2img ul li .more a{ font-size: 12px; color: #fff; }
.p2img ul li img{ height: 362px; line-height: 0; }
.p2img ul li:hover .img{ transform: scale(1.1); }
.p2img ul li:hover .img { box-shadow: 0 0 15px rgba(0,0,0,1);}
.p2img ul li:nth-child(1){animation-delay:0.3s;-webkit-animation-delay:0.3s;}
.p2img ul li:nth-child(2){animation-delay:0.6s;-webkit-animation-delay:0.6s;}
.p2img ul li:nth-child(3){animation-delay:0.9s;-webkit-animation-delay:0.9s;}
.p2img ul li.animated{ display: inline-block !important; }



.page3{ background: url(../images/page3.jpg) no-repeat; background-size: cover; }
.page3 .page_box{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;margin-top: 60px}
.quan{ margin: 0 auto;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);}
.quanbox{width: 600px; height: 600px; background: url(../images/quan.png) no-repeat; background-size: cover; position: relative;}
.list_box{  width: 100px; height: 100px; border-radius: 100px; color: #fff; line-height: 100px; text-align: center;  font-size: 14px; position: absolute;}
.list_box p{ background: #80193d; width: 100%; height: 100%; border-radius: 100%; box-shadow: 0 0 15px rgba(0,0,0,0.8);  }
.box11{left: 92px; top: 0;}
.box21{right: 92px; top: 0;}
.box31{left: -50px; top: 230px;}
.box41{right: -50px; top: 230px;}
.box51{left: 92px; bottom: 0;}
.box61{right: 92px; bottom: 0;}
.box1{animation-delay:0.5s;-webkit-animation-delay:0.5s; }
.box2{animation-delay:1s;-webkit-animation-delay:1s; }
.box3{animation-delay:3s;-webkit-animation-delay:3s; }
.box4{animation-delay:1.5s;-webkit-animation-delay:1.5s; }
.box5{lanimation-delay:2.5s;-webkit-animation-delay:2.5s; }
.box6{animation-delay:2s;-webkit-animation-delay:2s; }
.list_box img{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; }
.list_box:hover img{opacity: 1; }
.list_box:hover{ opacity: 1;-webkit-animation:change 0.5s linear;animation-delay:0s;-webkit-animation-delay:0s;}

.p3wz{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);animation-delay:3.5;-webkit-animation-delay:3.5s; }
.p3wz img{ width: 350px; }
.p3wz a{ background:#fff; line-height: 28px; height: 30px; display: inline-block; color: #3c1524; font-size: 12px; padding: 0 1rem;  float: left; box-shadow: 0 0 5px rgba(0,0,0,0.8); border-radius: 2px; }
.page4{ background: #e94d56; }
.p4wz{ width: 377px; text-align: left; padding:100px 0 0px 0; position: relative; left: 50%; transform: translate(-50%,0);}
.p4wz h1{ padding-bottom: 15px; font-size: 24px; font-weight: normal; text-align: center; }
.p4wz h2{animation-delay:0.2s;-webkit-animation-delay:0.2s;}
.p4img {animation-delay:0.4s;-webkit-animation-delay:0.4s;}
.p4img img{ height: 580px; }
.p4more{ position: absolute; border: 1px solid #fff; padding: 5px 10px; color: #fff; bottom:10%; right:25%; font-weight: normal; font-size: 12px;animation-delay:1s;-webkit-animation-delay:1s; }

.page5{ background: url(../images/page5.jpg) no-repeat; background-size: cover;}
.p5nr{ text-align: left; font-size: 14px; line-height: 34px; padding-top: 10px; width:900px; margin:0 auto;}
.pbox_tr h1{ padding-bottom: 30px; }
.pbox_tr{position: relative; left: 50%; top: 50%; transform: translate(-50%,-50%); padding-top: 40px;}
.pbox_tr a.more{ border: 1px solid #fff; padding: 5px 10px; color: #fff; font-size: 12px; line-height: 20px; }
.contact{width:715px; margin:30px auto auto auto; position:  absolute; top: 400px; color: #000; left: 50%; transform: translate(-50%,0); text-align: left; color: #113961; line-height: 30px;}
.contact h6{  margin-bottom: 15px; padding-bottom: 10px; text-align:center; display:block; margin:0 auto; width:320px; background:#fff;}
.contact .animated > b{ width:715px; background:#113961; height:1px; display:block; position:absolute; margin-top:-25px; z-index:-1;}
.contact .memo{ font-size: 17px; line-height:35px;  }
.contact .memo p.hui{ color: #646464; font-size: 14px; }
.contact .memo b{ font-weight:bold;}

.contact_left{ width:357px; border-right:1px solid #113961; float:left;}
.contact_right{ width:257; float:left; padding-left:100px;}


@media screen and (min-width: 1440px) {
	.menu_p{ width: 1100px; }
	.page_box{ width: 1100px; }
    .pimg img{height: 90%;}
}
@media screen and (min-width: 1680px) {
	.menu_p{ width: 1100px; }
	.page_box{ width: 1100px; }
  .pimg img{height: 90%;}
  .quanbox{width: 664px; height: 664px; background: url(../images/quan.png) no-repeat; background-size: cover;}
  .list_box{  width: 114px; height: 114px; border-radius: 114px; color: #fff; line-height: 114px; text-align: center; }
  .p3wz img{ width: 432px; }
  .p4img img{ height: 722px; }
}

@-webkit-keyframes fadeInUpa {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
            transform: translate3d(0, 10%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInUpa {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
            transform: translate3d(0, 10%, 0);
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInUp1 {
  -webkit-animation-name: fadeInUpa;
          animation-name: fadeInUpa;
}
@-webkit-keyframes bigfd {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes bigfd {
  0% {
    opacity: 0;
    transform: scale(0);
  }

  100% {
    opacity: 1;
   transform: scale(1);
  }
}

@-webkit-keyframes change{
  0%{-webkit-transform:rotate(0deg);}
  50%{-webkit-transform:rotate(180deg);}
  100%{-webkit-transform:rotate(360deg);}
}
.bigfd{-webkit-animation-name: bigfd;animation-name: bigfd;}
.loading {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  background: #000;
  z-index: 9999
}
.ab {
  width: 100%;
  padding: 80% 0 0 0;
  position: absolute;
}
.battery {
  width: 68px;
  height: 24px;
  border: 1px #fff solid;
  border-radius: 2px;
  position: relative;
  -webkit-animation: charge 5s linear infinite;
  -moz-animation: charge 5s linear infinite;
  animation: charge 5s linear infinite;
  margin: 0 auto 0 auto;
}
.battery:after {
  width: 6px;
  height: 10px;
  background-color: #fff;
  border-radius: 0px 1px 1px 0px;
  position: absolute;
  content: "";
  top: 6px;
  right: -6px;
}
@-webkit-keyframes charge {
 0% {
box-shadow: inset 0px 0px 0px #fff;
}
 100% {
box-shadow: inset 68px 0px 0px #fff;
}
}
@-moz-keyframes charge {
 0% {
box-shadow: inset 0px 0px 0px #fff;
}
 100% {
box-shadow: inset 68px 0px 0px #fff;
}
}
@keyframes charge {
 0% {
box-shadow: inset 0px 0px 0px #fff;
}
 100% {
box-shadow: inset 68px 0px 0px #fff;
}
}