@charset "utf-8";
body{overflow:hidden;height:100%;}
.main{position:fixed;height:100%;width:100%;z-index:999;}

.indexbanner{width: 100%;height: 100%;overflow:hidden;clear:both;position: relative;background: url(../images/index/bg.jpg) no-repeat top center; background-size:100% 100%;}
.indexbanner .bannerbox{width:100%; height:100%; max-width:1400px; margin:0 auto; position:relative; overflow:hidden;}
.indexbanner .bannerbox .pro_1{width:410px; height:410px; position:absolute; top:180px; left:100px; background:url(../images/index/pro_1.png) no-repeat center center;}
.indexbanner .bannerbox .pro_2{width:866px; height:748px; position:absolute; top:20px; right:10px; background:url(../images/index/pro_2.png) no-repeat center center;}
.indexbanner .bannerbox .cerico{position:fixed; z-index:999; left:205px; bottom:80px;}
.indexbanner .bannerbox .cerico span{position:relative; margin-right:20px; float:left;}
.indexbanner .bannerbox .cerico span.ce{background:url(../images/index/ce.png) no-repeat center center; background-size:100%; height:60px; width:60px;}
.indexbanner .bannerbox .cerico span.tuv{background:url(../images/index/tuv.png) no-repeat center center; background-size:100%; height:60px; width:60px;}

/*LOGO特效*/
.luxonlogo{position:absolute;right:80px;top:40px;}
.luxonlogo .luxon_logo_ide{background:url(../images/index/luxon_logo_ide.png) no-repeat center center;height: 80px;width: 88px;float: left;background-size: 100% 100%;}
.luxonlogo .luxon_logo_red{background:url(../images/index/luxon_logo_red.png) no-repeat center center;height: 80px;width: 193px;float: left;background-size: 100% 100%;}
.luxonlogo .luxon_logo_x{background:url(../images/index/luxon_logo_x.png) no-repeat center center;height: 80px;width: 38px;position:absolute;right: 79px;background-size: 100% 100%;}
.luxonlogo .luxon_logo_text{font-size: 17px;position:absolute;width: 281px;left: 0;text-align: center;top: 86px;color: #444;}

/*按钮特效*/
.indexmenu{position: absolute;top: 20px; left:40px; z-index: 99;}
#workarea{position:absolute;width:100%;height:100%;background-color:#1e1a3e;}

#personal{color:white;text-decoration:none;position:absolute;bottom:15px;right:2%}
.spot{position:absolute;width:100%;height:100%;top:0;left:0}
.svg-wrapper{margin-top:0;position:relative;width: 100px;height:40px;display:inline-block;border-radius:3px;margin-left:5px;margin-right:5px;}
#shape{stroke-width:2px;fill:transparent;stroke:#bebebe;stroke-dasharray:40 400;stroke-dashoffset:-168;transition:1s all ease}
#text{margin-top:-35px;text-align:center}
#text a{color: #eee;text-decoration:none;font-weight:100;font-size:14px;}
.svg-wrapper:hover #shape{stroke-dasharray:50 0;stroke-width:2px;stroke-dashoffset:0;stroke:#fff}

footer{position:fixed;bottom:0;background:none;padding-left:20px;z-index: 1000;}
footer p{color:#666; font-size:14px; line-height:30px;}
footer a{color:#666;}

/*菜单选择器*/
.select_cate{
    position:  absolute;
    bottom: 0;
    left: 50%;
    margin-left: -70px;
}
.select_cate .select_cate_btn{background:#000; color:#fff; padding:10px 30px; border:none;}
.select_cate i{margin-right:6px;}

.cd-bouncy-nav-trigger {
  background: #ffffff;
  color: #444;
  height: 50px;
  line-height: 50px;
  width: 140px;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 0 6px rgba(122, 122, 122, 0.4);
  font-size: 14px;
  text-align: center;
  display: block;
}
.cd-bouncy-nav-trigger:hover {
  background: #91bf14;
  color: #fff!important;
}

.cd-bouncy-nav-modal {
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(75, 75, 75, 0.9);
  opacity: 0;
  visibility: hidden;
  -webkit-transition: opacity 0.3s 0.6s, visibility 0s 0.9s;
  -moz-transition: opacity 0.3s 0.6s, visibility 0s 0.9s;
  transition: opacity 0.3s 0.6s, visibility 0s 0.9s;
}
.cd-bouncy-nav-modal.fade-in {
  visibility: visible;
  opacity: 1;
  -webkit-transition: opacity 0.1s 0s, visibility 0s 0s;
  -moz-transition: opacity 0.1s 0s, visibility 0s 0s;
  transition: opacity 0.1s 0s, visibility 0s 0s;
}

.cd-bouncy-nav-modal.fade-in .cd-close {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  -ms-transform: scale(1);
  -o-transform: scale(1);
  transform: scale(1);
  -webkit-transition: -webkit-transform 0.3s 0s, visibility 0.3s 0s;
  -moz-transition: -moz-transform 0.3s 0s, visibility 0.3s 0s;
  transition: transform 0.3s 0s, visibility 0.3s 0s;
}

.cd-bouncy-nav {
  position: absolute;
  left: 50%;
  top: 50vh;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  width: 716px;
  background: #fff;
  padding: 20px;
}
.cd-bouncy-nav li {
  width: 204px;
  float: left;
  height: 234px;
  margin: 10px;
  text-align:center;
  position:relative;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform: translateY(100vh);
  -moz-transform: translateY(100vh);
  -ms-transform: translateY(100vh);
  -o-transform: translateY(100vh);
  transform: translateY(100vh);
  text-align: center;
}
.cd-bouncy-nav li img{width:100%;display: block;}
.cd-bouncy-nav li p{line-height:  30px;font-size: 14px;text-align: center;z-index: 999;position: relative;}
.is-visible .cd-bouncy-nav li {
  /* used to assign a tranlsateY value when the animation is over */
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}
.fade-in .cd-bouncy-nav li {
  -webkit-animation: cd-move-in 0.4s;
  -moz-animation: cd-move-in 0.4s;
  animation: cd-move-in 0.4s;
}
.fade-out .cd-bouncy-nav li {
  -webkit-animation: cd-move-out 0.4s;
  -moz-animation: cd-move-out 0.4s;
  animation: cd-move-out 0.4s;
}
.fade-in .cd-bouncy-nav li, .fade-out .cd-bouncy-nav li {
  -webkit-animation-fill-mode: forwards;
  -moz-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}
.fade-in .cd-bouncy-nav li:nth-of-type(2), .fade-out .cd-bouncy-nav li:nth-of-type(2) {
  -webkit-animation-delay: 0.1s;
  -moz-animation-delay: 0.1s;
  animation-delay: 0.1s;
}
.fade-in .cd-bouncy-nav li:nth-of-type(3), .fade-out .cd-bouncy-nav li:nth-of-type(3) {
  -webkit-animation-delay: 0.15s;
  -moz-animation-delay: 0.15s;
  animation-delay: 0.15s;
}
.fade-in .cd-bouncy-nav li:nth-of-type(4), .fade-out .cd-bouncy-nav li:nth-of-type(4) {
  -webkit-animation-delay: 0.25s;
  -moz-animation-delay: 0.25s;
  animation-delay: 0.25s;
}
.fade-in .cd-bouncy-nav li:nth-of-type(5), .fade-out .cd-bouncy-nav li:nth-of-type(5) {
  -webkit-animation-delay: 0.3s;
  -moz-animation-delay: 0.3s;
  animation-delay: 0.3s;
}
.fade-in .cd-bouncy-nav li:nth-of-type(6), .fade-out .cd-bouncy-nav li:nth-of-type(6) {
  -webkit-animation-delay: 0.4s;
  -moz-animation-delay: 0.4s;
  animation-delay: 0.4s;
}
.cd-bouncy-nav a {
  display: block;
  color: #666;
}
.no-touch .cd-bouncy-nav a:hover::before {
  background-color: #DC965A;
}
.cd-bouncy-nav li:nth-of-type(2) a::before {
  background-position: -80px 0;
}
.cd-bouncy-nav li:nth-of-type(3) a::before {
  background-position: -160px 0;
}
.cd-bouncy-nav li:nth-of-type(4) a::before {
  background-position: -240px 0;
}
.cd-bouncy-nav li:nth-of-type(5) a::before {
  background-position: -320px 0;
}
.cd-bouncy-nav li:nth-of-type(6) a::before {
  background-position: -400px 0;
}


@-webkit-keyframes cd-move-in {
  0% {
    -webkit-transform: translateY(100vh);
  }
  65% {
    -webkit-transform: translateY(-1.5vh);
  }
  100% {
    -webkit-transform: translateY(0vh);
  }
}
@-moz-keyframes cd-move-in {
  0% {
    -moz-transform: translateY(100vh);
  }
  65% {
    -moz-transform: translateY(-1.5vh);
  }
  100% {
    -moz-transform: translateY(0vh);
  }
}
@keyframes cd-move-in {
  0% {
    -webkit-transform: translateY(100vh);
    -moz-transform: translateY(100vh);
    -ms-transform: translateY(100vh);
    -o-transform: translateY(100vh);
    transform: translateY(100vh);
  }
  65% {
    -webkit-transform: translateY(-1.5vh);
    -moz-transform: translateY(-1.5vh);
    -ms-transform: translateY(-1.5vh);
    -o-transform: translateY(-1.5vh);
    transform: translateY(-1.5vh);
  }
  100% {
    -webkit-transform: translateY(0vh);
    -moz-transform: translateY(0vh);
    -ms-transform: translateY(0vh);
    -o-transform: translateY(0vh);
    transform: translateY(0vh);
  }
}
@-webkit-keyframes cd-move-out {
  0% {
    -webkit-transform: translateY(0vh);
  }
  100% {
    -webkit-transform: translateY(-100vh);
  }
}
@-moz-keyframes cd-move-out {
  0% {
    -moz-transform: translateY(0vh);
  }
  100% {
    -moz-transform: translateY(-100vh);
  }
}
@keyframes cd-move-out {
  0% {
    -webkit-transform: translateY(0vh);
    -moz-transform: translateY(0vh);
    -ms-transform: translateY(0vh);
    -o-transform: translateY(0vh);
    transform: translateY(0vh);
  }
  100% {
    -webkit-transform: translateY(-100vh);
    -moz-transform: translateY(-100vh);
    -ms-transform: translateY(-100vh);
    -o-transform: translateY(-100vh);
    transform: translateY(-100vh);
  }
}

@media screen and (max-width: 1399px) { 
    .indexbanner .bannerbox .pro_2{
      right: 10%;
    }
  }