/* Qianglong Mo (SukeBeta) 2015 */

/*======================================================================
      Global
  ======================================================================*/
html {
  padding: 0;
  margin: 0;
}

body {
  min-width: 1190px;
  padding: 0;
  margin: 0;
  .font-smooth;
  font-family: "Helvetica Neue", 'Microsoft YaHei', '微软雅黑', Arial,  Helvetica, sans-serif;
}

li {
  list-style: none;
}

.layout {
  max-width: 1190px;
  margin-left: auto;
  margin-right: auto;
}

.font-smooth {
  -webkit-font-smoothing: antialiased;
}

/*======================================================================
      Function
  ======================================================================*/

.box-sizing(@value){
  -webkit-box-sizing: @value;
  -moz-box-sizing: @value;
  box-sizing: @value
}


.transition(@key:all, @duration:.2s){
  -webkit-transition: @key @duration;
  -moz-transition: @key @duration;
  -ms-transition: @key @duration;
  -o-transition: @key @duration;
  transition: @key @duration;
}

.transform(@property){
  -webkit-transform: @property;
  -moz-transform: @property;
  -ms-transform: @property;
  -o-transform: @property;
  transform: @property;
}

.transform-origin(@origin){
  -webkit-transform-origin: @origin;
  -moz-transform-origin: @origin;
  -ms-transform-origin: @origin;
  -o-transform-origin: @origin;
  transform-origin: @origin;
}

.box-shadow(@x, @y, @size, @color){
  box-shadow: @x @y @size @color;
  -webkit-box-shadow: @x @y @size @color;
  -moz-box-shadow: @x @y @size @color;
  -o-box-shadow: @x @y @size @color;
  -ms-box-shadow: @x @y @size @color;
}

.animation(@name, @seconds, @style, @totaltime) {
  animation: @name @seconds @style @totaltime;
  -ms-animation: @name @seconds @style @totaltime;
  -webkit-animation: @name @seconds @style @totaltime;
  -moz-animation: @name @seconds @style @totaltime;
  -o-animation: @name @seconds @style @totaltime;
}

/*======================================================================
      Main
  ======================================================================*/

/* header */
header {
  height: 94px;
  background: #121212;

  /* nav */
  nav {
    padding: 38px 0 0 220px;

    a {
      margin: 0 13px;
      font-size: 22px;
      color: #fff;
      text-decoration: none;
    }

    a:hover {
      color: #0077c3;
    }
  }
}

.header-logo {
  width: 253px;
  height: 94px;
  background: url("../images/header-logo.png") no-repeat;
}

/* kv */
.kv {
  height: 763px;
  position: relative;
  overflow: hidden;

  .kv-bg-wrap {
    position: absolute;
    left: 0;
    right: 0;
    height: 763px;
  }
  .kv-bg {
    height: 763px;
    background: url("../images/kv01.jpg") no-repeat center top;
  }

  .flyWrap {
    height: 763px;
    position: relative;
    z-index: 100;

    .fly {
      position: absolute;
      right: -46px;
      bottom: 0;
      z-index: 100;
      width: 0;
      height: 0;
      opacity: .1;
      .transition(all, 1.5s);

      img {
        display: block;
        width: 100%;
      }
    }

    .fly.animated {
      right: -46px;
      bottom: 230px;
      width: 626px;
      height: 355px;
      opacity: 1;
    }
  }
}

.kv-mask{
  width: 100%;
  position: absolute;
  bottom: 0;
  z-index: 100;
  background: url("../images/kv-mask-out.png") repeat-x;
}

.kv-mask-inner{
  height: 59px;
  background: url("../images/kv-mask-inner.png") no-repeat center bottom;
}

/* section begin */
.section {}
.section-title {
  height: 124px;
  background-repeat: no-repeat;
  background-position: center top;
}

/* section 01 */
.section01{
  padding: 38px 0 85px 0;
  background: #e6e6e6;

  .section-title {
    background-image: url("../images/index-title01.png");
  }
}

/* product */
.product {
  .item {

  }

  aside {
    width: 375px;
  }

  dl {
    dt {
      margin-bottom: 4px;
      font-size: 40px;
      color: #0058e2;
    }

    dd {
      font-size: 24px;
      color: #000;
    }
  }

  .desc {
    margin-top: 28px;
    font-size: 18px;
    line-height: 22px;
    color: #000;
  }

  .btn-more {
    margin-top: 34px;
  }

  main {
    img {
      .transition(all, .25s);
    }

    img:hover {
      margin-right: 5px;
    }
  }

  .item01 {
    margin-top: 25px;

    dl {
      margin-top: 60px;
    }
  }

  .item02 {
    margin-top: 115px;

    dl {
      margin-top: 128px;
    }
  }

  .item03 {
    margin-top: 120px;

    dl {
      margin-top: 100px;
    }
  }
}

/* section 02 */
.section02{
  padding: 42px 0 0 0;

  .section-inner {
    min-height: 317px;
  }

  .section-title {
    background-image: url("../images/index-title02.png");
  }

  .kv02 {
    height: 900px;
    margin-top: 74px;
    background: url("../images/kv02.jpg") no-repeat center bottom;
    background-size: cover;
    background-attachment: fixed;
  }
}

/* service */
.service {
  margin: 50px 0 0 108px;
  color: #3e3a39;

  dt {
    font-size: 28px;
    margin-bottom: 22px;
  }

  dd {
    font-size: 18px;
    line-height: 28px;
  }
}
/* button */
.btn-more {
  display: inline-block;
  width: 121px;
  height: 39px;
  background: url("../images/btn-more.png") no-repeat;
}

/* section 03 */
.section03{
  padding: 20px 0 63px 0;
  background: #f2f1ec;

  .desc {
    padding: 52px 0 36px 0;
    font-size: 18px;
    line-height: 22px;
    color: #000;
  }

  .section-title {
    background-image: url("../images/index-title03.png");
  }

  .kv02 {
    height: 597px;
    margin-top: 74px;
    background: url("../images/kv02.jpg") no-repeat center top;
  }
}


/* footer */
footer {
  padding: 28px 0 0 0;
  background: #037ed9;
}

.footer-title {
  height: 124px;
  background: url("../images/footer-title.png") no-repeat center top;
}

.footer-info {
  margin: 50px 0 58px 0;

  li {
    line-height: 36px;
    color: #fff;
    text-align: center;

    img, span {
      vertical-align: middle;
    }

    img {
      margin-right: 12px;
    }
  }
}
.footer-copyright {
  line-height: 64px;
  color: #fff;
  font-size: 16px;
  text-align: center;
  background: #034677;
}

/*======================================================================
      Responsive
  ======================================================================*/

@media screen and (max-width: 1260px){
}