@charset "UTF-8";
.hidden {
  display: none;
  visibility: hidden
}
.wrap {
  border: 0;
  padding: 0;
  margin: 0 auto;
  *zoom: 1;
  position: relative
}
.wrap:after {
  clear: both;
  content: "";
  display: table
}
.clear {
  clear: both;
  font-size: 0;
  line-height: 0;
  height: 0;
  visibility: hidden
}
.clearfix:before, .clearfix:after {
  content: "";
  display: table
}
.clearfix:after {
  clear: both
}
.clearfix {
  zoom: 1
}
.wrap:after, .wrap:before, .container:after, .container:before {
  content: "";
  display: table
}
.wrap:after, .container:after {
  clear: both
}
.clear {
  clear: both
}
.fl {
  float: left
}
.fr {
  float: right
}
.absolute {
  position: absolute
}
.pors {
  position: relative
}
.tl {
  text-align: left
}
.tc {
  text-align: center
}
.tr {
  text-align: right
}
.hide {
  opacity: 0
}
nav li, .index-banner li, .item-list li, .inner-tab li {
  list-style-type: none
}
input:-ms-input-placeholder, textarea:-ms-input-placeholder {
  color: #6f6f6f
}
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
  color: #6f6f6f
}
.index-banner {
  position: static;
  width: 100%;
  height: 82vh;
  overflow: hidden
}
.index-banner .swiper-container {
  position: relative;
  width: 100%;
  height: 100%
}
.index-banner .carousel-inner {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden
}
.page-header-fullscreen-trame {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%
}
@media(min-width:768px) {
  .index-banner .carousel-inner {
    position: absolute;
    top: 0;
    padding-top: 0
  }
}
.index-banner .carousel-item {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  overflow: hidden;
  z-index: 10;
  opacity: 0
}
.index-banner .carousel-item .video-inner {
  height: 100%;
  overflow: hidden;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 50%;
  z-index: 8;
  width: 2560px;
  margin-left: -1280px;
  background-color: #fff;
  text-align: center
}
.index-banner .carousel-item .video video {
  position: relative;
  display: inline-block;
  vertical-align: baseline
}
.index-banner .carousel-item.carousel-item-prev {
  transform-origin: center right;
  transform: translateX(-100%)
}
.index-banner .carousel-item.carousel-item-next {
  transform-origin: center right;
  transform: translateX(100%)
}
.index-banner .carousel-item:active {
  cursor: -webkit-grab !important;
  cursor: grab !important
}
.index-banner .carousel-item.active {
  z-index: 15;
  opacity: 1;
  transform-origin: center right
}
.index-banner .carousel-item1 img {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  -moz-transition: all 4.5s linear;
  -o-transition: all 4.5s linear;
  transition: all 4.5s linear
}
.index-banner .carousel-item1.active img {
  top: -200px
}
.index-banner .carousel-item2 .bg-img {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0
}
.index-banner .carousel-item2 .img-box {
  width: 1600px;
  height: 100%;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2
}
.index-banner .carousel-item2 .img-box .img1 {
  width: 143px;
  height: 286px;
  position: absolute;
  left: 647px;
  top: 532px;
  background: url(../img/004.png) top center no-repeat;
  background-size: 100%;
  padding: 10px;
  z-index: 3
}
.index-banner .carousel-item2 .img-box .img1 img {
  width: 100%;
  opacity: 0;
  transition: all ease .3s;
  transition-delay: 1.5s
}
.index-banner .carousel-item2.active .img-box .img1 img {
  opacity: 1
}
.index-banner .carousel-item2 .img-box .img2 {
  width: 332px;
  height: 391px;
  position: absolute;
  right: -44px;
  top: 447px;
  background: url(../img/005.png) top center no-repeat;
  background-size: 100%;
  padding: 23px 35px 0 35px;
  z-index: 3
}
.index-banner .carousel-item2 .img-box .img2 img {
  width: 100%;
  opacity: 0;
  transition: all ease .3s;
  transition-delay: 1s
}
.index-banner .carousel-item2.active .img-box .img2 img {
  opacity: 1
}
.index-banner .carousel-item2 .img-box .img3 {
  width: 760px;
  height: 755px;
  position: absolute;
  top: 184px;
  right: 160px;
  background: url(../img/006.png) top center no-repeat;
  background-size: 100%;
  padding: 20px
}
.index-banner .carousel-item2 .img-box .img3 img {
  width: 100%;
  opacity: 0;
  transition: all ease .3s;
  transition-delay: .5s
}
.index-banner .carousel-item2.active .img-box .img3 img {
  opacity: 1
}
@media(max-width:1680px) {
  .index-banner .carousel-item2 .img-box .img1 {
    width: 100px;
    height: 286px;
    position: absolute;
    left: 667px;
    top: 502px;
    padding: 7px
  }
  .index-banner .carousel-item2 .img-box .img2 {
    width: 182px;
    height: 391px;
    position: absolute;
    right: 180px;
    top: 447px;
    padding: 13px 25px 0 25px
  }
  .index-banner .carousel-item2 .img-box .img3 {
    width: 36%;
    position: absolute;
    top: 22%;
    right: 18%;
    padding: 20px 10px
  }
}
.index-banner .carousel-item3 .bg-img {
  width: 100%;
  position: absolute;
  left: 0;
  top: 0
}
.index-banner .carousel-item3 .img-box {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden
}
.index-banner .carousel-item3 .img-box li {
  position: absolute;
  width: 100%;
  height: 100%
}
.index-banner .carousel-item3 .img-box li img {
  width: 100%;
  height: 100%
}
.index-banner .carousel-item3 .img-box .img1 {
  z-index: 2;
  top: -20px;
  position: absolute
}
.index-banner .carousel-item3 .img-box .img2 {
  z-index: 3;
  right: -20px;
  position: absolute
}
.static .carousel-item {
  -webkit-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  transform: translateX(-100%);
  cursor: default !important
}
.static.is-mobile .carousel-item {
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  opacity: 0
}
.index-banner .carousel-item-inner {
  position: absolute;
  width: 100%;
  height: 100%
}
.carousel-item-image-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden
}
.carousel-item-image-wrapper:before {
  z-index: 20
}
.carousel-item-image-wrapper:after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: .2;
  background-color: #000;
  z-index: 8
}
@media(min-width:768px) {
  .carousel-item-image-wrapper:after {
    content: none
  }
}
.carousel-item-image {
  position: relative;
  height: 100%;
  width: 100%;
  overflow: hidden
}
.carousel-item-image:before {
  opacity: .2;
  z-index: 20
}
.banner-background {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%
}
.carousel-item-image img {
  position: relative;
  width: 100%;
  height: 100%;
  max-width: none;
  z-index: 10
}
.index-banner .swiper-inner-text-wrap {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  text-align: center
}
.carousel-item1 .page-header-fullscreen-text {
  background: url(../img/bannerbg.png) center center no-repeat;
  background-size: cover
}
.index-banner .swiper-inner-text {
  position: absolute;
  top: 45%;
  left: 8.6%;
  width: auto;
  color: #fff;
  line-height: 1.3;
  transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -webkit-transform: translateY(-50%)
}
.index-banner .carousel-item1 .swiper-inner-text {
  text-align: left
}
.index-banner .carousel-item1 .swiper-inner-text .cansual-des {
  font-size: 30px;
  line-height: 48px
}
.index-banner .carousel-item1 .swiper-inner-text .cansual-des span {
  font-size: 48px;
  display: block;
  line-height: 1.8;
  font-weight: bold;
  color: #f7e400;
}
.index-banner .carousel-item .link {
  width: 135px;
  height: 50px;
  background: #fff url(../img/icon22.png) 95px center no-repeat;
  display: block;
  font-size: 14px;
  line-height: 50px;
  color: #333;
  font-family: 'sheepsansbol';
  padding-left: 20px;
  margin-top: 48px
}
.index-banner .carousel-item2 .swiper-inner-text {
  text-align: left
}
.index-banner .carousel-item2 .cansual-title {
  font-size: 48px;
  color: #fff
}
.index-banner .cansual-line {
  width: 0;
  height: 3px;
  margin: 25px 0 20px;
  background: #fff
}
.index-banner .cansual-des {
  font-size: 18px;
  color: #fff;
  line-height: 1.8
}
.index-banner .carousel-item3 .cansual-des {
  font-size: 36px;
  line-height: 60px
}
.index-banner .carousel-item3 .cansual-des .s1 {
  font-size: 48px;
  line-height: 78px;
  font-family: 'gotham-medium'
}
.index-banner .carousel-item2 .cansual-des {
  text-align: left;
  font-size: 22px
}
.index-banner .carousel-item2 .cansual-des .s1 {
  font-size: 30px;
  font-family: 'gotham-medium'
}
.index-banner .carousel-item2 .cansual-des .s2 {
  font-size: 48px;
  font-weight: bold;
  display: block
}
.index-banner .carousel-item3 .cansual-des .s2 {
  font-size: 48px;
  font-weight: bold;
  display: block
}
.index-banner .carousel-item .cansual-title {
  margin-bottom: 10px;
  font-size: 40px;
  font-weight: bold;
  color: #fff;
  text-align: left
}
.index-banner .carousel-item3 .cansual-item-title .en-word {
  display: block;
  padding-bottom: 15px;
  font-family: 'AkzidenzGrotesk-BoldCondAlt';
  font-size: 84px;
  color: #fff;
  line-height: .9
}
.index-banner .carousel-item4 .swiper-inner-text {
  padding-left: 50%;
  text-align: left
}
.index-banner .carousel-item4 .cansual-item-title {
  font-size: 48px;
  color: #fff
}
.index-banner .carousel-item3 .cansual-des {
  margin-bottom: 35px
}
.index-banner .cansual-item-title {
  position: relative;
  margin-bottom: 15px
}
.index-banner .cansual-item-title .small-title {
  display: block;
  margin-bottom: -10px;
  font-size: 22px;
  line-height: 36px
}
.index-banner .cansual-item-title .number {
  font: normal 180px/1 'AkzidenzGrotesk-BoldCondAlt';
  color: #fff;
  letter-spacing: 3px;
  margin-left: -6px
}
.index-banner .carousel-item3 .cansual-item-title .number {
  padding-bottom: 15px;
  font: normal 84px/1 'AkzidenzGrotesk-BoldCondAlt'
}
.index-banner .cansual-item-title .number .add-icon {
  font-size: 60px;
  line-height: 180px;
  vertical-align: 40px
}
.carousel-item-subtitle-line {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 30px;
  height: 3px;
  background-color: #fff;
  content: ''
}
.index-banner .cansual-item-title .small-title, .index-banner .cansual-item-title .number, .index-banner .cansual-sub-title, .index-banner .carousel-item .cansual-des, .index-banner .carousel-item .cansual-line, .index-banner .carousel-item3 .cansual-title, .index-banner .carousel-item3 .radiu-button {
  display: block;
  opacity: 0;
  transform: translate3d(-150%, 0, 0);
  transition: all 1s;
  transition-delay: .2s;
  overflow: hidden
}
.index-banner .carousel-item2 .cansual-des {
  transform: translate3d(150%, 0, 0)
}
.index-banner .carousel-item3 .cansual-des, .index-banner .carousel-item3 .cansual-line, .index-banner .carousel-item3 .cansual-title, .index-banner .carousel-item3 .radiu-button {
  text-align: left;
  transform: translate3d(0, -150%, 0)
}
.index-banner .carousel-item .cansual-line {
  transition-delay: .2s
}
.index-banner .carousel-item3 .cansual-des {
  transition-delay: .4s
}
.index-banner .active .cansual-item-title .small-title, .index-banner .active .cansual-item-title .number, .index-banner .active .cansual-sub-title, .index-banner .carousel-item.active .cansual-des, .index-banner .carousel-item3.active .cansual-title, .index-banner .carousel-item.active .cansual-line, .index-banner .carousel-item3.active .radiu-button {
  opacity: 1;
  transform: none
}
.index-banner .carousel-item2 .cansual-title {
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, -80);
  -webkit-transform: matrix(1, 0, 0, 1, 0, -80);
  -moz-transform: matrix(1, 0, 0, 1, 0, -80);
  transition: all 1000ms cubic-bezier(0.35, 0.85, 0.55, 1) .6s;
  -webkit-transition: all 1000ms cubic-bezier(0.35, 0.85, 0.55, 1) .6s;
  -moz-transition: all 1000ms cubic-bezier(0.35, 0.85, 0.55, 1) .6s
}
.index-banner .carousel-item2.active .cansual-title {
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);
  -webkit-transform: matrix(1, 0, 0, 1, 0, 0);
  -moz-transform: matrix(1, 0, 0, 1, 0, 0)
}
.index-banner .carousel-item .cansual-line {
  width: 45px
}
.index-banner .carousel-item3 .radiu-button {
  color: #fff;
  text-align: center;
  border: 1px solid #fff;
  background: transparent
}
.index-banner .carousel-item3 .radiu-button:hover {
  color: #333;
  background: #fff
}
.carousel-item-subtitle-line-timer {
  position: absolute;
  top: 0;
  left: 0;
  background-color: #fff;
  display: block;
  height: 100%;
  -webkit-transform-origin: left;
  -ms-transform-origin: left;
  transform-origin: left
}
.active .carousel-item-subtitle-line-timer {
  animation: linewidth 5s;
  -moz-animation: linewidth 5s;
  -webkit-animation: linewidth 5s;
  -o-animation: linewidth 5s;
  animation-delay: 1s;
  -webkit-animation-delay: 1s
}
@keyframes linewidth {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}
@-moz-keyframes linewidth {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}
@-webkit-keyframes linewidth {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}
@-o-keyframes linewidth {
  from {
    width: 0
  }
  to {
    width: 100%
  }
}
.page-header-fullscreen-text {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  text-align: center;
  z-index: 25
}
.collapsing .page-header-fullscreen-text {
  transition: .8s -webkit-transform cubic-bezier(.19, 1, .22, 1);
  transition: .8s transform cubic-bezier(.19, 1, .22, 1)
}
.index-banner .cansual-sub-title span {
  display: block;
  font-size: 20px;
  line-height: 32px
}
.page-header-bar {
  position: absolute;
  right: 0;
  left: 0;
  bottom: 0;
  height: 70px;
  line-height: 70px;
  z-index: 55;
  transform-origin: bottom;
  -webkit-transform-origin: bottom;
  -moz-transform-origin: bottom;
  transform: rotateX(0deg) translate3d(0, 0, 0);
  -webkit-transform: rotateX(0deg) translate3d(0, 0, 0);
  -moz-transform: rotateX(0deg) translate3d(0, 0, 0);
  transition: all .65s cubic-bezier(0.55, 0.65, 0.55, 1) 0s;
  -webkit-transition: all .65s cubic-bezier(0.55, 0.65, 0.55, 1) 0s;
  -moz-transition: all .65s cubic-bezier(0.55, 0.65, 0.55, 1) 0s
}
.page-header-bar-inner {
  transition: -webkit-transform .4s;
  transition: transform .4s;
  -webkit-transform-origin: center bottom;
  -ms-transform-origin: center bottom;
  transform-origin: center bottom
}
.page-header-bar-hidden .page-header-bar-inner, .static.home .page-header-bar-inner {
  transition: visibility .4s steps(1, end), -webkit-transform .4s;
  transition: visibility .4s steps(1, end), transform .4s;
  visibility: hidden;
  -webkit-transform: rotateX(94deg) rotateZ(0);
  transform: rotateX(94deg) rotateZ(0)
}
.no-transition .page-header-bar-inner {
  transition: none
}
.page-header-collapsed .page-header-bar-inner {
  visibility: hidden;
  transition: none
}
.carousel-bar-inner {
  width: 100%;
  height: 100%
}
.carousel-bar-title-word {
  padding-left: 75px;
  font-size: 12px;
  color: #666
}
.carousel-scroll-btn {
  z-index: 56;
  position: absolute;
  bottom: 50px;
  left: 160px;
  width: 52px;
  height: 52px;
  border: 1px solid #fff;
  border-radius: 100%;
  overflow: hidden;
  cursor: pointer
}
.carousel-scroll-btn .carousel-scroll-btn-icon {
  position: absolute;
  display: block;
  width: 52px;
  height: 52px;
  margin: 0 auto;
  background: url(../img/icon2.png) no-repeat center center;
  cursor: pointer;
  animation: downico 1.5s ease-out infinite
}
@keyframes downico {
  0% {
    top: 0;
    opacity: 1
  }
  35% {
    top: 50%;
    opacity: 0
  }
  65% {
    top: -50%;
    opacity: 0
  }
  100% {
    top: 0;
    opacity: 1
  }
}
.carousel-controls {
  position: absolute;
  right: 0;
  top: 0;
  width: 465px;
  height: 70px;
  background: rgba(255, 255, 255, .6)
}
.carousel-controls .count {
  position: absolute;
  left: 0;
  width: 180px;
  padding-left: 66px;
  font: bold 18px/80px 'gotham-medium';
  color: #999
}
.carousel-controls .count span {
  display: inline-block
}
.carousel-controls .count .current {
  color: #222
}
.carousel-controls .controls {
  position: absolute;
  left: 180px
}
.carousel-controls .carousel-line {
  z-index: 1;
  position: absolute;
  left: 50%;
  top: 18px;
  display: block;
  width: 1px;
  height: 35px;
  background: #e5e5e5;
  opacity: .3
}
.carousel-controls .carousel-control {
  float: left;
  width: 70px;
  height: 70px;
  cursor: pointer
}
.carousel-controls .swiper-button-next, .carousel-controls .swiper-button-prev {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: 0;
  top: 0;
  margin-top: 0
}
.carousel-controls .swiper-button-line {
  z-index: 1;
  position: absolute;
  top: 0;
  display: block;
  width: 25px;
  height: 100%;
  overflow: hidden;
  transition: all .45s ease-out 0s;
  -webkit-transition: all .45s ease-out 0s;
  -moz-transition: all .45s ease-out 0s
}
.carousel-controls .swiper-button-prev {
  left: initial
}
.carousel-controls .swiper-button-next {
  right: initial
}
.carousel-controls .swiper-button-prev .swiper-button-line {
  background: url(../img/icon4.png) no-repeat left center;
  left: 15px
}
.carousel-controls .swiper-button-next .swiper-button-line {
  background: url(../img/icon3.png) no-repeat right center;
  right: 15px
}
.carousel-controls .swiper-button-prev:hover .swiper-button-line {
  width: 35px
}
.carousel-controls .swiper-button-next:hover .swiper-button-line {
  width: 35px
}
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both
}
.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite
}
.animated.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s
}
@-webkit-keyframes fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
@keyframes fadeIn {
  0% {
    opacity: 0
  }
  100% {
    opacity: 1
  }
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn
}
@-webkit-keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@keyframes fadeInDown {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
.fadeInDown {
  -webkit-animation-name: fadeInDown;
  animation-name: fadeInDown
}
@-webkit-keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@keyframes fadeInDownBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
.fadeInDownBig {
  -webkit-animation-name: fadeInDownBig;
  animation-name: fadeInDownBig
}
@-webkit-keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
.fadeInLeft {
  -webkit-animation-name: fadeInLeft;
  animation-name: fadeInLeft
}
@-webkit-keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@keyframes fadeInLeftBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
.fadeInLeftBig {
  -webkit-animation-name: fadeInLeftBig;
  animation-name: fadeInLeftBig
}
@-webkit-keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@keyframes fadeInRight {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight
}
@-webkit-keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@keyframes fadeInRightBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
.fadeInRightBig {
  -webkit-animation-name: fadeInRightBig;
  animation-name: fadeInRightBig
}
@-webkit-keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@keyframes fadeInUp {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
  animation-name: fadeInUp
}
@-webkit-keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
@keyframes fadeInUpBig {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0)
  }
  100% {
    opacity: 1;
    -webkit-transform: none;
    transform: none
  }
}
.fadeInUpBig {
  -webkit-animation-name: fadeInUpBig;
  animation-name: fadeInUpBig
}
@-webkit-keyframes fadeOut {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}
@keyframes fadeOut {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0
  }
}
.fadeOut {
  -webkit-animation-name: fadeOut;
  animation-name: fadeOut
}
@-webkit-keyframes fadeOutDown {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
}
@keyframes fadeOutDown {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0)
  }
}
.fadeOutDown {
  -webkit-animation-name: fadeOutDown;
  animation-name: fadeOutDown
}
@-webkit-keyframes fadeOutDownBig {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0)
  }
}
@keyframes fadeOutDownBig {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, 2000px, 0);
    transform: translate3d(0, 2000px, 0)
  }
}
.fadeOutDownBig {
  -webkit-animation-name: fadeOutDownBig;
  animation-name: fadeOutDownBig
}
@-webkit-keyframes fadeOutLeft {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }
}
@keyframes fadeOutLeft {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0)
  }
}
.fadeOutLeft {
  -webkit-animation-name: fadeOutLeft;
  animation-name: fadeOutLeft
}
@-webkit-keyframes fadeOutLeftBig {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0)
  }
}
@keyframes fadeOutLeftBig {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(-2000px, 0, 0);
    transform: translate3d(-2000px, 0, 0)
  }
}
.fadeOutLeftBig {
  -webkit-animation-name: fadeOutLeftBig;
  animation-name: fadeOutLeftBig
}
@-webkit-keyframes fadeOutRight {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }
}
@keyframes fadeOutRight {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(100%, 0, 0);
    transform: translate3d(100%, 0, 0)
  }
}
.fadeOutRight {
  -webkit-animation-name: fadeOutRight;
  animation-name: fadeOutRight
}
@-webkit-keyframes fadeOutRightBig {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0)
  }
}
@keyframes fadeOutRightBig {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(2000px, 0, 0);
    transform: translate3d(2000px, 0, 0)
  }
}
.fadeOutRightBig {
  -webkit-animation-name: fadeOutRightBig;
  animation-name: fadeOutRightBig
}
@-webkit-keyframes fadeOutUp {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
}
@keyframes fadeOutUp {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0)
  }
}
.fadeOutUp {
  -webkit-animation-name: fadeOutUp;
  animation-name: fadeOutUp
}
@-webkit-keyframes fadeOutUpBig {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0)
  }
}
@keyframes fadeOutUpBig {
  0% {
    opacity: 1
  }
  100% {
    opacity: 0;
    -webkit-transform: translate3d(0, -2000px, 0);
    transform: translate3d(0, -2000px, 0)
  }
}
.fadeOutUpBig {
  -webkit-animation-name: fadeOutUpBig;
  animation-name: fadeOutUpBig
}
@media(max-width:1200px) {
  .index-banner .carousel-item2 .img-box .img1 {
    left: 735px;
    top: 370px
  }
  .index-banner .carousel-item2 .img-box .img2 {
    right: 295px;
    top: 355px
  }
}
@media(max-width:900px) {
  .index-banner .carousel-item1 .swiper-inner-text .cansual-des {
    font-size: 18px;
    line-height: 24px
  }
  .index-banner .carousel-item1 .swiper-inner-text .cansual-des span {
    font-size: 26px;
    line-height: 30px;
    margin-bottom: 10px
  }
  .index-banner .carousel-item2 .cansual-des {
    font-size: 18px;
    line-height: 24px
  }
  .index-banner .carousel-item2 .cansual-des .s2 {
    font-size: 26px;
    line-height: 30px
  }
  .index-banner .carousel-item2 .img-box {
    width: 100%
  }
  .index-banner .carousel-item2 .img-box .img1 {
    left: 335px;
    top: 235px;
    height: 205px
  }
  .index-banner .carousel-item2 .img-box .img2 {
    height: 210px;
    right: 0;
    top: 218px
  }
  .index-banner .carousel-item2 .img-box .img3 {
    width: 50%;
    top: 15%;
    right: 6%;
    height: 330px;
    padding: 20px 1px
  }
  .index-banner .carousel-item3 .cansual-des {
    font-size: 18px;
    line-height: 24px
  }
  .index-banner .carousel-item3 .cansual-des .s2 {
    font-size: 26px;
    line-height: 30px
  }
  .index-banner .carousel-item .link {
    width: 135px;
    height: 40px;
    line-height: 40px;
    margin-top: 30px
  }
  .carousel-scroll-btn {
    left: 70px
  }
  .page-header-bar {
    height: 50px;
    line-height: 50px
  }
  .carousel-controls {
    width: 400px;
    height: 50px
  }
  .carousel-controls .count {
    width: 150px;
    padding-left: 40px;
    font: bold 18px/50px 'gotham-medium'
  }
  .carousel-controls .controls {
    left: 150px
  }
  .carousel-controls .carousel-control {
    height: 50px
  }
}
.phonebanner {
  display: none
}
.phone-banner {
  display: none
}
@media(max-width:767px) {
  header .logo {
    width: 94px
  }
  header .right-side .menu_ico img {
    width: 25px
  }
  .ny-banner {
    height: 360px
  }
  .foot-button .makelink {
    display: none
  }
  .about-address {
    display: none
  }
  .index-banner {
    height: 300px
  }
  .index-banner .carousel-item1 img {
    width: 220%;
    left: -25%;
    max-width: initial
  }
  .index-banner .carousel-item1.active img {
    top: -140px
  }
  .page-header-bar {
    display: none
  }
  .phonebanner {
    display: block;
    position: absolute;
    left: 0;
    bottom: 16px;
    text-align: center;
    width: 100%;
    z-index: 9
  }
  .phonebanner span {
    width: 7px;
    height: 7px;
    background: #fff;
    border-radius: 50%;
    margin: 0 5px;
    display: inline-block;
    transition: all ease .5s
  }
  .phonebanner span.active {
    width: 15px
  }
  .index-banner {}
  .phone-banner {
    width: 100%;
    position: relative;
    display: block
  }
  .pbanner-box {
    width: 100%;
    position: relative
  }
  .pbanner-box .img {
    width: 100%
  }
  .pbanner-box .img img {
    width: 100%
  }
  .pbanner-box .tbox {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%)
  }
  .pbanner-box .tbox .t1 {
    font-size: 26px;
    line-height: 30px;
    color: #f7e400;
  }
  .pbanner-box .tbox .t2 {
    font-size: 18px;
    line-height: 24px;
    color: #fff;
    margin-top: 9px
  }
  .pbanner-box .tbox2 {
    width: 100%;
    position: absolute;
    left: 0;
    top: 110px;
    text-align: center
  }
  .pbanner-box .tbox2 .t1 {
    font-size: 26px;
    line-height: 1;
    color: #fff
  }
  .pbanner-box .tbox2 .t2 {
    font-size: 18px;
    line-height: 24px;
    color: #fff;
    margin-top: 11px
  }
  .pbanner-box .tbox3 {
    width: 100%;
    position: absolute;
    left: 0;
    top: 110px;
    text-align: center
  }
  .pbanner-box .tbox3 .t1 {
    font-size: 26px;
    line-height: 1;
    color: #fff
  }
  .pbanner-box .tbox3 .t2 {
    font-size: 18px;
    line-height: 24px;
    color: #fff;
    margin-top: 11px
  }
  .phone-banner .swiper-pagination {
    bottom: 16px
  }
  .phone-banner .swiper-pagination .swiper-pagination-bullet {
    width: 7px;
    height: 7px;
    border-radius: 3px;
    background: #fff;
    opacity: 1
  }
  .phone-banner .swiper-pagination .swiper-pagination-bullet-active {
    width: 15px
  }
  .carousel-scroll-btn {
    display: none
  }
  .carousel-controls {
    width: 210px
  }
  .carousel-controls .count {
    width: 90px;
    padding-left: 15px
  }
  .carousel-controls .controls {
    left: 90px
  }
  .carousel-controls .carousel-control {
    width: 60px;
    height: 50px
  }
  .index-banner .carousel-item2 .bg-img {
    width: 200%;
    left: -50%;
    max-width: initial;
    height: 100%
  }
  .index-banner .carousel-item2 .img-box .img3 {
    width: 70%;
    top: 28%;
    right: 15%;
    height: 330px;
    padding: 10px 5px
  }
  .index-banner .carousel-item2 .img-box .img2 {
    right: 65px;
    top: 312px;
    width: 95px;
    height: 115px;
    padding: 8px 10px 0 10px
  }
  .index-banner .carousel-item2 .img-box .img1 {
    left: 115px;
    top: 335px;
    height: 82px;
    width: 40px;
    padding: 3px
  }
  .index-banner .carousel-item3 .bg-img {
    height: 100%
  }
  .index-banner .carousel-item3 .img-box .img2 {
    top: 20%;
    height: auto
  }
  .index-banner .carousel-item3 .img-box li.img2 img {
    height: auto
  }
  .index-banner .swiper-inner-text {
    left: 3%
  }
  .index-banner .carousel-item1 .swiper-inner-text .cansual-des, .index-banner .carousel-item2 .cansual-des, .index-banner .carousel-item3 .cansual-des {
    font-size: 18px;
    line-height: 24px
  }
  .index-banner .carousel-item1 .swiper-inner-text .cansual-des span, .index-banner .carousel-item2 .cansual-des .s2, .index-banner .carousel-item3 .cansual-des .s2 {
    font-size: 26px;
    line-height: 30px;
    margin-bottom: 10px;
    display: block
  }
  .index-banner .carousel-item .link {
    background: #fff url(../img/icon22.png) 68px center no-repeat;
    width: 100px;
    font-size: 12px;
    padding-left: 10px;
    margin-top: 10px
  }
}