/*移动端*/
.m-btn {
  position: absolute;
  top: 4px;
  bottom: 0;
  right: 90px;
  padding: 0 15px;
  height: 100%;
  display: none;
  line-height: 56px;
  cursor: pointer;
}

.m-btn i {
  color: #6b7386;
  opacity: 0.7;
  font-size: 20px;
  line-height: 48px;
}

.m-btn .fa-remove {
  color: #fff;
}

.m-btn:hover i {
  opacity: 1
}

.m-nav {
  width: 70%;
  background: #434957;
  position: fixed;
  top: 0;
  bottom: 0;
  left: -70%;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  z-index: 999;
  overflow-y: scroll;
  overflow-x: hidden;
}

.m-nav .m-btn {
  height: 48px;
  line-height: 48px;
  left: auto;
  right: -45px;
  display: none;
}

.m-nav ul {
  padding-top: 0px;
}

.m-nav li {
  width: 100%;
  position: relative;
}

.m-nav li a {
  padding: 0 25px;
  line-height: 48px;
  color: #fff;
  display: block;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.m-nav li a:hover {
  background: rgba(0, 0, 0, 0.1);
}

.m-nav ul li>ul {
  display: none;
}

.m-nav li em[class*="dot"] {
  position: absolute;
  top: 0px;
  right: 0px;
  width: 48px;
  height: 48px;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0);
  cursor: pointer;
}

.m-nav li em[class*="dot"] .fa {
  font-size: 18px;
  color: #fff;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  position: absolute;
  width: 48px;
  line-height: 48px;
  top: 0;
  left: 0;
}

.m-nav li em[class*="dot"] .fa.open {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

.m-nav ul li>ul li {
  background: rgba(0, 0, 0, 0.15);
}

.m-nav ul li>ul li a {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  opacity: 0.8;
  font-size: 14px;
  text-indent: 1em
}

/*搜索和黑暗模式*/
.search,
.darkmode {
  float: right;
  margin-left: 15px;
  position: relative;
}

.darkmode i {
  font-weight: 900;
}

.search i.fa,
.darkmode i.fa {
  color: #6b7386;
  line-height: 78px;
  opacity: 0.7;
  font-size: 18px;
  padding-left: 10px;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
  cursor: pointer;
  display: block;
  width: 28px;
}

.search i.fa:hover,
.darkmode i.fa:hover {
  opacity: 1;
}

.search .s-form {
  padding: 20px;
  line-height: none;
  display: block;
  background: #fff;
  position: absolute;
  right: 0;
  top: 100%;
  display: none;
  box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.1);
  border: 1px solid #eee;
  border-top: none;
  z-index: 1;
}

.search .s-form .sform {
  width: 258px;
  padding-right: 32px;
  position: relative;
}

.search .s-form button {
  border: medium none;
  background: #ff3636;
  position: absolute;
  top: 0;
  right: 0;
  cursor: pointer;
}

.search .s-form button i {
  color: #fff;
  font-size: 18px;
  height: 32px;
  line-height: 32px;
  padding: 0 10px;
  width: 40px;
}

.search .s-form button:hover {
  opacity: 1
}

.search .s-form .sinput {
  background: #f8f8f8;
  border: 1px solid #eee;
  padding: 5px 0 0 10px;
  height: 32px;
  line-height: 32px;
  width: 100%;
  font-size: 14px;
}

.search .s-form .arrow {
  position: absolute;
  top: -17px;
  right: -2px;
  line-height: 26px;
  color: #fff;
  font-size: 20px;
  opacity: 1;
}

#mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .5);
  z-index: 899;
  display: none;
}

/* Banner动画 */
@-webkit-keyframes mountains-in {
  0% {
    -webkit-transform: scale(1.5);
  }

  100% {
    -webkit-transform: scale(1);
  }
}

@-moz-keyframes mountains-in {
  0% {
    -moz-transform: scale(1.5);
  }

  100% {
    -moz-transform: scale(1);
  }
}

@keyframes mountains-in {
  0% {
    transform: scale(1.5);
  }

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

@-webkit-keyframes moving {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
  }

  100% {
    -webkit-transform: translate3d(-50%, 0, 0);
  }
}

@-moz-keyframes moving {
  0% {
    -moz-transform: translate3d(0, 0, 0);
  }

  100% {
    -moz-transform: translate3d(-50%, 0, 0);
  }
}

@keyframes moving {
  0% {
    transform: translate3d(0, 0, 0);
  }

  100% {
    transform: translate3d(-50%, 0, 0);
  }
}

#banner-bear {
  height: 320px;
  background: #464853 url(../image/bg-container.png) repeat-x;
  width: 100%;
  position: relative;
  font-size: 22px;
}

/* SLOGAN */
.typing {
  color: #fff;
  position: absolute;
  top: 25%;
  left: 50%;
  z-index: 1;
  transform: translate(-50%, -50%);
  text-shadow: 1px 1px 0px rgba(0, 0, 0, 2);
  font-size: 30px;
  font-weight: bold;
}

@media (max-width:1199px) {
  .typing {
    font-size: 16px;
  }
}

.banner-wrap,
#stage {
  width: 100%;
  height: 100%;
}

#stage {
  overflow: hidden;
  position: relative;
  z-index: 0;
}

#stage .space {
  width: 3840px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  background: url(../image/bg-space.png) repeat-x;
}

#stage .mountains {
  width: 100%;
  height: 17.78125em;
  overflow: hidden;
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity 0.2s linear 0s;
  -moz-transition: opacity 0.2s linear 0s;
  transition: opacity 0.2s linear 0s;
  -webkit-transform-origin: center top;
  -moz-transform-origin: center top;
  transform-origin: center top;
}

#stage .mountain {
  width: 240em;
  position: absolute;
  left: 0;
  bottom: 0;
}

#stage .mountain-1 {
  height: 10.5em;
  z-index: 3;
  background: url(../image/bg-mountain-1.png) repeat-x;
  background-size: auto 50%;
  background-position: 0 bottom;
}

#stage .mountain-2 {
  height: 12em;
  z-index: 2;
  background: url(../image/bg-mountain-2.png) repeat-x;
  background-size: auto 50%;
  background-position: 0 bottom;
}

#stage .mountain-3 {
  height: 17.78125em;
  z-index: 1;
  background: url(../image/bg-mountain-3.png) repeat-x;
  background-size: auto 30%;
  background-position: 0 bottom;
}

#stage .bear-wrapper {
  width: 6.25em;
  height: 3.125em;
  position: absolute;
  margin-left: -3.125em;
  left: 50%;
  bottom: 40px;
  z-index: 999;
}

.bear-words {
  display: none;
  width: 6.25em;
  height: 2.8125em;
  position: absolute;
  bottom: 5.3125em;
  left: 50%;
  margin-left: -2.1875em;
  z-index: 5;
}

.bear-words span {
  display: block;
  width: 9.375em;
  height: 1.875em;
  line-height: 1.875em;
  margin-left: 0.9375em;
  font-size: 0.4375em;
  color: #fff;
}

.bear-words .bear-words-background {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  border: 0;
}

#stage .bear {
  width: 3.12em;
  height: 1.625em;
  position: absolute;
  margin-left: -1.5625em;
  left: -4%;
  bottom: 20px;
  z-index: 999;
  background: url("../image/bear.png") 0 0 no-repeat;
  background-size: 25em 100%;
  opacity: 0;
}

 #stage .space {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-animation: moving 450s linear 0.8s infinite normal none;
  -moz-animation: moving 450s linear 0.8s infinite normal none;
  animation: moving 450s linear 0.8s infinite normal none;
}

 #stage .mountains {
  opacity: 1;
  -webkit-animation: mountains-in 0.8s ease-out 0s 1 normal forwards;
  -moz-animation: mountains-in 0.8s ease-out 0s 1 normal forwards;
  animation: mountains-in 0.8s ease-out 0s 1 normal forwards;
}

 #stage .mountain-1 {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-animation: moving 100s linear 0.8s infinite normal none;
  -moz-animation: moving 100s linear 0.8s infinite normal none;
  animation: moving 100s linear 0.8s infinite normal none;
}

 #stage .mountain-2 {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-animation: moving 160s linear 0.8s infinite normal none;
  -moz-animation: moving 160s linear 0.8s infinite normal none;
  animation: moving 160s linear 0.8s infinite normal none;
}

 #stage .mountain-3 {
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-animation: moving 360s linear 0.8s infinite normal none;
  -moz-animation: moving 360s linear 0.8s infinite normal none;
  animation: moving 360s linear 0.8s infinite normal none;
}

 #stage .bear {
  opacity: 1;
  -webkit-transition: opacity 0.4s linear 0.6s;
  -moz-transition: opacity 0.4s linear 0.6s;
  transition: opacity 0.4s linear 0.6s;
}

  #stage .bear {
  -webkit-animation: bear-run-in 3.6s step-end 0.6s 1 normal forwards, bear-run 0.8s steps(8) 4.2s infinite normal forwards;
  -moz-animation: bear-run-in 3.6s step-end 0.6s 1 normal forwards, bear-run 0.8s steps(8) 4.2s infinite normal forwards;
  animation: bear-run-in 3.6s step-end 0.6s 1 normal forwards, bear-run 0.8s steps(8) 4.2s infinite normal forwards;
}

.no-preserve3d  #stage .bear,
.no-csstransforms3d  #stage .bear {
  left: 50%;
  -webkit-animation: bear-run 0.8s steps(8) 0.6s infinite normal forwards;
  -moz-animation: bear-run 0.8s steps(8) 0.6s infinite normal forwards;
  animation: bear-run 0.8s steps(8) 0.6s infinite normal forwards;
}

  #stage .bear.reset,
.no-preserve3d  #stage .bear.reset,
.no-csstransforms3d  #stage .bear.reset {
  left: 50%;
  opacity: 1;
  -webkit-animation: none 0s linear 0s infinite normal none;
  -moz-animation: none 0s linear 0s infinite normal none;
  animation: none 0s linear 0s infinite normal none;
}

  #stage .bear.running,
.no-preserve3d  #stage .bear.running,
.no-csstransforms3d  #stage .bear.running {
  left: 50%;
  -webkit-animation: bear-run 0.8s steps(8) 0s infinite normal none;
  -moz-animation: bear-run 0.8s steps(8) 0s infinite normal none;
  animation: bear-run 0.8s steps(8) 0s infinite normal none;
}

@-webkit-keyframes bear-run {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -25em 0;
  }
}

@-moz-keyframes bear-run {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -25em 0;
  }
}

@keyframes bear-run {
  0% {
    background-position: 0 0;
  }

  100% {
    background-position: -25em 0;
  }
}

@-webkit-keyframes bear-run-in {
  0% {
    background-position: 0em 0;
    left: -4%;
  }

  1.38888889% {
    background-position: -3.125em 0;
    left: -2.25%;
  }

  2.77777778% {
    background-position: -6.25em 0;
    left: -0.5%;
  }

  4.16666667% {
    background-position: -9.375em 0;
    left: 1.25%;
  }

  5.55555556% {
    background-position: -12.5em 0;
    left: 3%;
  }

  6.94444444% {
    background-position: -15.625em 0;
    left: 4.75%;
  }

  8.33333333% {
    background-position: -18.75em 0;
    left: 6.5%;
  }

  9.72222222% {
    background-position: -21.875em 0;
    left: 8.25%;
  }

  11.11111111% {
    background-position: -25em 0;
    left: 10%;
  }

  11.11111111% {
    background-position: 0em 0;
    left: 10%;
  }

  12.77777778% {
    background-position: -3.125em 0;
    left: 11.5%;
  }

  14.44444444% {
    background-position: -6.25em 0;
    left: 13%;
  }

  16.11111111% {
    background-position: -9.375em 0;
    left: 14.5%;
  }

  17.77777778% {
    background-position: -12.5em 0;
    left: 16%;
  }

  19.44444444% {
    background-position: -15.625em 0;
    left: 17.5%;
  }

  21.11111111% {
    background-position: -18.75em 0;
    left: 19%;
  }

  22.77777778% {
    background-position: -21.875em 0;
    left: 20.5%;
  }

  24.44444444% {
    background-position: -25em 0;
    left: 22%;
  }

  24.44444444% {
    background-position: 0em 0;
    left: 22%;
  }

  26.38888889% {
    background-position: -3.125em 0;
    left: 23.25%;
  }

  28.33333333% {
    background-position: -6.25em 0;
    left: 24.5%;
  }

  30.27777778% {
    background-position: -9.375em 0;
    left: 25.75%;
  }

  32.22222222% {
    background-position: -12.5em 0;
    left: 27%;
  }

  34.16666667% {
    background-position: -15.625em 0;
    left: 28.25%;
  }

  36.11111111% {
    background-position: -18.75em 0;
    left: 29.5%;
  }

  38.05555556% {
    background-position: -21.875em 0;
    left: 30.75%;
  }

  40% {
    background-position: -25em 0;
    left: 32%;
  }

  40% {
    background-position: 0em 0;
    left: 32%;
  }

  42.22222222% {
    background-position: -3.125em 0;
    left: 33%;
  }

  44.44444444% {
    background-position: -6.25em 0;
    left: 34%;
  }

  46.66666667% {
    background-position: -9.375em 0;
    left: 35%;
  }

  48.88888889% {
    background-position: -12.5em 0;
    left: 36%;
  }

  51.11111111% {
    background-position: -15.625em 0;
    left: 37%;
  }

  53.33333333% {
    background-position: -18.75em 0;
    left: 38%;
  }

  55.55555556% {
    background-position: -21.875em 0;
    left: 39%;
  }

  57.77777778% {
    background-position: -25em 0;
    left: 40%;
  }

  57.77777778% {
    background-position: 0em 0;
    left: 40%;
  }

  60.27777778% {
    background-position: -3.125em 0;
    left: 40.75%;
  }

  62.77777778% {
    background-position: -6.25em 0;
    left: 41.5%;
  }

  65.27777778% {
    background-position: -9.375em 0;
    left: 42.25%;
  }

  67.77777778% {
    background-position: -12.5em 0;
    left: 43%;
  }

  70.27777778% {
    background-position: -15.625em 0;
    left: 43.75%;
  }

  72.77777778% {
    background-position: -18.75em 0;
    left: 44.5%;
  }

  75.27777778% {
    background-position: -21.875em 0;
    left: 45.25%;
  }

  77.77777778% {
    background-position: -25em 0;
    left: 46%;
  }

  77.77777778% {
    background-position: 0em 0;
    left: 46%;
  }

  80.55555556% {
    background-position: -3.125em 0;
    left: 46.5%;
  }

  83.33333333% {
    background-position: -6.25em 0;
    left: 47%;
  }

  86.11111111% {
    background-position: -9.375em 0;
    left: 47.5%;
  }

  88.88888889% {
    background-position: -12.5em 0;
    left: 48%;
  }

  91.66666667% {
    background-position: -15.625em 0;
    left: 48.5%;
  }

  94.44444444% {
    background-position: -18.75em 0;
    left: 49%;
  }

  97.22222222% {
    background-position: -21.875em 0;
    left: 49.5%;
  }

  100% {
    background-position: -25em 0;
    left: 50%;
  }
}

@-moz-keyframes bear-run-in {
  0% {
    background-position: 0em 0;
    left: -4%;
  }

  1.38888889% {
    background-position: -3.125em 0;
    left: -2.25%;
  }

  2.77777778% {
    background-position: -6.25em 0;
    left: -0.5%;
  }

  4.16666667% {
    background-position: -9.375em 0;
    left: 1.25%;
  }

  5.55555556% {
    background-position: -12.5em 0;
    left: 3%;
  }

  6.94444444% {
    background-position: -15.625em 0;
    left: 4.75%;
  }

  8.33333333% {
    background-position: -18.75em 0;
    left: 6.5%;
  }

  9.72222222% {
    background-position: -21.875em 0;
    left: 8.25%;
  }

  11.11111111% {
    background-position: -25em 0;
    left: 10%;
  }

  11.11111111% {
    background-position: 0em 0;
    left: 10%;
  }

  12.77777778% {
    background-position: -3.125em 0;
    left: 11.5%;
  }

  14.44444444% {
    background-position: -6.25em 0;
    left: 13%;
  }

  16.11111111% {
    background-position: -9.375em 0;
    left: 14.5%;
  }

  17.77777778% {
    background-position: -12.5em 0;
    left: 16%;
  }

  19.44444444% {
    background-position: -15.625em 0;
    left: 17.5%;
  }

  21.11111111% {
    background-position: -18.75em 0;
    left: 19%;
  }

  22.77777778% {
    background-position: -21.875em 0;
    left: 20.5%;
  }

  24.44444444% {
    background-position: -25em 0;
    left: 22%;
  }

  24.44444444% {
    background-position: 0em 0;
    left: 22%;
  }

  26.38888889% {
    background-position: -3.125em 0;
    left: 23.25%;
  }

  28.33333333% {
    background-position: -6.25em 0;
    left: 24.5%;
  }

  30.27777778% {
    background-position: -9.375em 0;
    left: 25.75%;
  }

  32.22222222% {
    background-position: -12.5em 0;
    left: 27%;
  }

  34.16666667% {
    background-position: -15.625em 0;
    left: 28.25%;
  }

  36.11111111% {
    background-position: -18.75em 0;
    left: 29.5%;
  }

  38.05555556% {
    background-position: -21.875em 0;
    left: 30.75%;
  }

  40% {
    background-position: -25em 0;
    left: 32%;
  }

  40% {
    background-position: 0em 0;
    left: 32%;
  }

  42.22222222% {
    background-position: -3.125em 0;
    left: 33%;
  }

  44.44444444% {
    background-position: -6.25em 0;
    left: 34%;
  }

  46.66666667% {
    background-position: -9.375em 0;
    left: 35%;
  }

  48.88888889% {
    background-position: -12.5em 0;
    left: 36%;
  }

  51.11111111% {
    background-position: -15.625em 0;
    left: 37%;
  }

  53.33333333% {
    background-position: -18.75em 0;
    left: 38%;
  }

  55.55555556% {
    background-position: -21.875em 0;
    left: 39%;
  }

  57.77777778% {
    background-position: -25em 0;
    left: 40%;
  }

  57.77777778% {
    background-position: 0em 0;
    left: 40%;
  }

  60.27777778% {
    background-position: -3.125em 0;
    left: 40.75%;
  }

  62.77777778% {
    background-position: -6.25em 0;
    left: 41.5%;
  }

  65.27777778% {
    background-position: -9.375em 0;
    left: 42.25%;
  }

  67.77777778% {
    background-position: -12.5em 0;
    left: 43%;
  }

  70.27777778% {
    background-position: -15.625em 0;
    left: 43.75%;
  }

  72.77777778% {
    background-position: -18.75em 0;
    left: 44.5%;
  }

  75.27777778% {
    background-position: -21.875em 0;
    left: 45.25%;
  }

  77.77777778% {
    background-position: -25em 0;
    left: 46%;
  }

  77.77777778% {
    background-position: 0em 0;
    left: 46%;
  }

  80.55555556% {
    background-position: -3.125em 0;
    left: 46.5%;
  }

  83.33333333% {
    background-position: -6.25em 0;
    left: 47%;
  }

  86.11111111% {
    background-position: -9.375em 0;
    left: 47.5%;
  }

  88.88888889% {
    background-position: -12.5em 0;
    left: 48%;
  }

  91.66666667% {
    background-position: -15.625em 0;
    left: 48.5%;
  }

  94.44444444% {
    background-position: -18.75em 0;
    left: 49%;
  }

  97.22222222% {
    background-position: -21.875em 0;
    left: 49.5%;
  }

  100% {
    background-position: -25em 0;
    left: 50%;
  }
}

@keyframes bear-run-in {
  0% {
    background-position: 0em 0;
    left: -4%;
  }

  1.38888889% {
    background-position: -3.125em 0;
    left: -2.25%;
  }

  2.77777778% {
    background-position: -6.25em 0;
    left: -0.5%;
  }

  4.16666667% {
    background-position: -9.375em 0;
    left: 1.25%;
  }

  5.55555556% {
    background-position: -12.5em 0;
    left: 3%;
  }

  6.94444444% {
    background-position: -15.625em 0;
    left: 4.75%;
  }

  8.33333333% {
    background-position: -18.75em 0;
    left: 6.5%;
  }

  9.72222222% {
    background-position: -21.875em 0;
    left: 8.25%;
  }

  11.11111111% {
    background-position: -25em 0;
    left: 10%;
  }

  11.11111111% {
    background-position: 0em 0;
    left: 10%;
  }

  12.77777778% {
    background-position: -3.125em 0;
    left: 11.5%;
  }

  14.44444444% {
    background-position: -6.25em 0;
    left: 13%;
  }

  16.11111111% {
    background-position: -9.375em 0;
    left: 14.5%;
  }

  17.77777778% {
    background-position: -12.5em 0;
    left: 16%;
  }

  19.44444444% {
    background-position: -15.625em 0;
    left: 17.5%;
  }

  21.11111111% {
    background-position: -18.75em 0;
    left: 19%;
  }

  22.77777778% {
    background-position: -21.875em 0;
    left: 20.5%;
  }

  24.44444444% {
    background-position: -25em 0;
    left: 22%;
  }

  24.44444444% {
    background-position: 0em 0;
    left: 22%;
  }

  26.38888889% {
    background-position: -3.125em 0;
    left: 23.25%;
  }

  28.33333333% {
    background-position: -6.25em 0;
    left: 24.5%;
  }

  30.27777778% {
    background-position: -9.375em 0;
    left: 25.75%;
  }

  32.22222222% {
    background-position: -12.5em 0;
    left: 27%;
  }

  34.16666667% {
    background-position: -15.625em 0;
    left: 28.25%;
  }

  36.11111111% {
    background-position: -18.75em 0;
    left: 29.5%;
  }

  38.05555556% {
    background-position: -21.875em 0;
    left: 30.75%;
  }

  40% {
    background-position: -25em 0;
    left: 32%;
  }

  40% {
    background-position: 0em 0;
    left: 32%;
  }

  42.22222222% {
    background-position: -3.125em 0;
    left: 33%;
  }

  44.44444444% {
    background-position: -6.25em 0;
    left: 34%;
  }

  46.66666667% {
    background-position: -9.375em 0;
    left: 35%;
  }

  48.88888889% {
    background-position: -12.5em 0;
    left: 36%;
  }

  51.11111111% {
    background-position: -15.625em 0;
    left: 37%;
  }

  53.33333333% {
    background-position: -18.75em 0;
    left: 38%;
  }

  55.55555556% {
    background-position: -21.875em 0;
    left: 39%;
  }

  57.77777778% {
    background-position: -25em 0;
    left: 40%;
  }

  57.77777778% {
    background-position: 0em 0;
    left: 40%;
  }

  60.27777778% {
    background-position: -3.125em 0;
    left: 40.75%;
  }

  62.77777778% {
    background-position: -6.25em 0;
    left: 41.5%;
  }

  65.27777778% {
    background-position: -9.375em 0;
    left: 42.25%;
  }

  67.77777778% {
    background-position: -12.5em 0;
    left: 43%;
  }

  70.27777778% {
    background-position: -15.625em 0;
    left: 43.75%;
  }

  72.77777778% {
    background-position: -18.75em 0;
    left: 44.5%;
  }

  75.27777778% {
    background-position: -21.875em 0;
    left: 45.25%;
  }

  77.77777778% {
    background-position: -25em 0;
    left: 46%;
  }

  77.77777778% {
    background-position: 0em 0;
    left: 46%;
  }

  80.55555556% {
    background-position: -3.125em 0;
    left: 46.5%;
  }

  83.33333333% {
    background-position: -6.25em 0;
    left: 47%;
  }

  86.11111111% {
    background-position: -9.375em 0;
    left: 47.5%;
  }

  88.88888889% {
    background-position: -12.5em 0;
    left: 48%;
  }

  91.66666667% {
    background-position: -15.625em 0;
    left: 48.5%;
  }

  94.44444444% {
    background-position: -18.75em 0;
    left: 49%;
  }

  97.22222222% {
    background-position: -21.875em 0;
    left: 49.5%;
  }

  100% {
    background-position: -25em 0;
    left: 50%;
  }
}

/*========首页搜索======*/
.primary-menus {
  width: 50%;
  position: absolute;
  top: 55%;
  left: 50%;
  z-index: 3;
  transform: translate(-50%, -50%);
  font-size: 16px;
  opacity: .95;
}

.primary-menus ul {
  list-style: none;
  padding: 0;
}

.primary-menus ul li {
  display: inline-block;
  color: #fff;
  padding: 0 14px;
  height: 36px;
  line-height: 36px;
  font-size: 14px;
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
  cursor: pointer;
}

.primary-menus ul li:first-child {
  cursor: auto;
  color: rgba(255, 255, 255, .8);
}

.primary-menus ul li:first-child:hover {
  color: rgba(255, 255, 255, .8);
  background-color: transparent;
}

.primary-menus ul li:hover {
  background: #fff;
  color: #3c3c3c;
  opacity: .8;
}

.primary-menus ul li.current {
  background: #fff;
  color: #3c3c3c;
}

.primary-menus .cont {
  position: relative;
  top: -1px;
}

.primary-menus .right-link {
  position: absolute;
  right: 0;
  top: 0;
}

.primary-menus .right-link a {
  display: inline-block;
  margin-top: 10px;
  padding-right: 5px;
  color: #dff2ff;
  text-decoration: none;
  font-size: 13px;
}

.primary-menus .right-link a:hover {
  color: #fff;
}

.primary-menus .left-cont {}

.primary-menus .left-cont .search.hidden {
  display: none;
}

.primary-menus .left-cont form {
  width: 100%;
  position: relative;
}

.primary-menus .left-cont input {
  box-sizing: border-box;
  width: 100%;
  border: none;
  font-size: 15px;
  line-height: 20px;
  height: 48px;
  padding: 11px 100px 11px 26px;
  border-radius: 3px;
  color: #9f9f9f;
  outline: none;
}

.primary-menus .left-cont input:focus {
  color: #3c3c3c;
}

.primary-menus .left-cont button {
  height: 48px;
  box-sizing: border-box;
  min-width: 100px;
  margin-left: -5px;
  cursor: pointer;
  background-color: #e34f4f;
  color: #fff;
  font-size: 15px;
  line-height: 40px;
  border-top-right-radius: 3px;
  border-bottom-right-radius: 3px;
  position: absolute;
  right: 1px;
  top: 0;
  border: 5px solid #fff;
  border-radius: 9px;
  padding: 0 15px;
}

.primary-menus .left-cont button:hover {
  background-color: #ff3636;
}

@media (max-width:1199px) {
  .primary-menus ul li {
    padding: 0 12px;
  }
}

@media (max-width:991px) {
  .primary-menus {
    float: left;
    margin-left: 0;
    width: 90%;
    top: 60%;
  }

  .primary-menus .right-link {
    display: none;
  }

  .primary-menus .left-cont {
    margin-right: 0;
  }
}

@media (max-width:767px) {
  .primary-menus ul li {
    padding: 0 5px;
    font-size: 13px;
    height: 28px;
    line-height: 24px;
    margin-right: 6px;
  }

  .primary-menus ul li:first-child {
    display: none;
  }

  .primary-menus .left-cont input {
    height: 34px;
    line-height: 14px;
    font-size: 13px;
    padding: 10px 6em 10px 10px;
    border-radius: 0 3px 3px 3px;
  }

  .primary-menus .left-cont button {
    height: 34px;
    line-height: 34px;
    width: 6em;
    font-size: 12px;
    border: none;
    border-radius: 2px;
    margin-right: -2px;
  }
}