html, body {
  width: 100%;
  height: 100%;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

html {
  background-color: #FFF; }

.swiper-container, .swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%; }

.swiper-slide {
  width: 100%;
  height: 100%;
  background: url(../img/slide_bg.jpg) no-repeat left top;
  background-size: cover;
  overflow: hidden; }

.swiper-slide.xx {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0; }

@-webkit-keyframes spin {
  from {
    -webkit-transform: rotate(0deg); }
  to {
    -webkit-transform: rotate(360deg); } }
@keyframes spin {
  from {
    transform: rotate(0deg); }
  to {
    transform: rotate(360deg); } }
.section_1_wrap {
  position: absolute;
  top: 45%;
  left: 50%;
  z-index: 2;
  margin-left: -119px;
  margin-top: -119px;
  width: 239px;
  height: 239px;
  /* microsoft ie */
  animation-name: spin;
  -webkit-animation-name: spin;
  animation-duration: 12000ms;
  /* 40 seconds */
  -webkit-animation-duration: 12000ms;
  /* 40 seconds */
  animation-iteration-count: infinite;
  -webkit-animation-iteration-count: infinite;
  animation-timing-function: linear;
  -webkit-animation-timing-function: linear; }
  .section_1_wrap img {
    width: 239px;
    height: 239px; }

.section_1_title {
  position: absolute;
  left: 50%;
  top: 45%;
  z-index: 3;
  width: 205px;
  height: 205px;
  margin-left: -102px;
  margin-top: -102px; }

@-webkit-keyframes updown {
  0%,30% {
    opacity: 0;
    -webkit-transform: translate(0, -8px); }
  60% {
    opacity: 1;
    -webkit-transform: translate(0, 0); }
  100% {
    opacity: 0;
    -webkit-transform: translate(0, 10px); } }
@keyframes updown {
  0%,30% {
    opacity: 0;
    transform: translate(0, -8px); }
  60% {
    opacity: 1;
    transform: translate(0, 0); }
  100% {
    opacity: 0;
    transform: translate(0, 10px); } }
.next-page {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 183px;
  height: 77px;
  z-index: 999;
  margin-left: -91px;
  text-align: center;
  background: url(../img/next_page_bg.png) no-repeat 0 0;
  background-size: 183px 77px; }
  .next-page img {
    position: absolute;
    bottom: 12px;
    left: 50%;
    margin-left: -13px;
    width: 26px;
    height: 8px;
    -webkit-animation: updown 1.5s infinite ease-in-out; }

#array1 {
  position: absolute;
  z-index: 999;
  -webkit-animation: start 1.5s infinite ease-in-out; }

.square-wrap {
  position: absolute;
  left: 50%;
  top: 0;
  width: 320px;
  height: 100%;
  margin-left: -160px; }

.square {
  position: absolute;
  left: 0;
  top: 0;
  width: 140px;
  height: 140px;
  background: url(../img/square_bg.png) no-repeat 0 0;
  background-size: 140px 140px;
  box-sizing: border-box;
  padding-top: 5px;
  padding-left: 5px; }

.square-1 {
  left: 65px;
  top: -60px; }

.square-2 {
  left: 140px;
  top: 15px; }

.square-3 {
  left: 70px;
  top: 85px; }

.square-4 {
  left: 0;
  top: 155px; }

.square-5 {
  left: 140px;
  top: 155px; }

.square-6 {
  left: 280px;
  top: 155px; }

.square-7 {
  left: 70px;
  top: 225px; }

.square-8 {
  left: 140px;
  top: 295px; }

.square-9 {
  left: 70px;
  top: 365px; }

.square-brand, .square-brand-title {
  width: 130px;
  height: 130px;
  background: url(../img/square.png) no-repeat 0 0;
  background-size: 130px 780px; }

.square-brand-1 {
  background-position: 0 0; }

.square-brand-2 {
  background-position: 0 -130px; }

.square-brand-3 {
  background-position: 0 -650px; }

.square-brand-4 {
  background-position: 0 -260px; }

.square-brand-5 {
  background-position: 0 -390px; }

.square-brand-6 {
  background-position: 0 -520px; }

.swiper-slide-3 .section-top {
  width: 100%; }
.swiper-slide-3 .txt-wrap {
  position: absolute;
  left: 0;
  top: 203px;
  width: 100%;
  text-align: center; }
.swiper-slide-3 .txt-container {
  position: relative;
  box-sizing: border-box;
  width: 320px;
  height: 63px;
  padding-left: 85px;
  padding-right: 23px;
  overflow: hidden;
  margin: 0 auto;
  margin-bottom: 20px;
  background: url(../img/section_2_txt_wrap.png) no-repeat 0 0;
  background-size: 320px 63px; }
  .swiper-slide-3 .txt-container p {
    font-size: 12px;
    color: #666;
    line-height: 16px;
    text-align: left;
    padding-top: 8px; }
.swiper-slide-3 .txt-container:before {
  position: absolute;
  left: 8px;
  top: 0;
  width: 63px;
  height: 63px;
  content: "";
  background: url(../img/section_2_txt_1.png) no-repeat 0 0;
  background-size: 63px 189px; }
.swiper-slide-3 .txt-container.learn:before {
  background-position: 0 0; }
.swiper-slide-3 .txt-container.cooperation:before {
  background-position: 0 -63px; }
.swiper-slide-3 .txt-container.innovate:before {
  background-position: 0 -126px; }

.swiper-slide-4 .contact {
  position: absolute;
  top: 65px;
  left: 50%;
  margin-left: -160px;
  width: 100%;
  max-width: 320px;
  padding-top: 25px;
  background-color: #FFF; }
  .swiper-slide-4 .contact h3 {
    font-size: 22x;
    color: #333;
    padding-left: 18px;
    padding-right: 18px; }
    .swiper-slide-4 .contact h3 span {
      color: #166eb7; }
  .swiper-slide-4 .contact p {
    font-size: 12px;
    color: #777;
    line-height: 20px;
    padding: 12px 18px 25px 18px;
    padding-left: 18px;
    padding-right: 18px; }
.swiper-slide-4 ul.handle {
  display: block;
  width: 100%;
  background-color: #FFF; }
  .swiper-slide-4 ul.handle li {
    border-top: 1px solid #DCE1E6; }
    .swiper-slide-4 ul.handle li a {
      display: block;
      width: 100%;
      height: 38px;
      line-height: 38px;
      text-align: center;
      font-size: 12px;
      color: #333; }
      .swiper-slide-4 ul.handle li a span {
        display: inline-block;
        position: relative;
        height: 38px;
        padding-left: 28px; }
      .swiper-slide-4 ul.handle li a span:after {
        position: absolute;
        left: 0;
        top: 9px;
        width: 20px;
        height: 20px;
        content: "";
        background: url(../img/section_4_handle.png) no-repeat 0 0;
        background-size: 20px 40px; }
      .swiper-slide-4 ul.handle li a span.tel:after {
        background-position: 0 -20px; }
      .swiper-slide-4 ul.handle li a span.mail:after {
        background-position: 0 0; }

@media screen and (min-resolution: 2.5dppx) {
  .square-brand, .square-brand-title {
    background-image: url(../img/square@3x.png); }

  .txt-container:before {
    background-image: url(../img/section_2_txt_1@3x.png); }

  ul.handle li span:after {
    background-image: url(../img/section_4_handle@3x.png); } }

/*# sourceMappingURL=base.css.map */