/* Qianglong Mo (SukeBeta) 2015 */

@import "base";

/*======================================================================
      Global
  ======================================================================*/
html {
  padding: 0;
  margin: 0;
  font-family: "microsoft yahei", Arial, "Helvetica Neue", Helvetica, sans-serif;
}

body {
  min-width: 1215px;
  width: 100%;
  padding: 0;
  margin: 0;
}

a {
  text-decoration: none;
}

li {
  list-style: none;
}

.block {
  display: block;
}

.layout {
  width: 1215px;
  min-width: 1215px;
  margin-left: auto;
  margin-right: auto;
}

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

p, a {
  .font-smooth;
}

/*======================================================================
      Main
  ======================================================================*/
body {
  overflow-x: hidden;
  min-width: 1215px;
  background: #f7f9fa;
}

/* header */
header {
  min-width: 1215px;
  height: 90px;
  background: #fff;
  .box-shadow(0, 1px, 9px, rgba(4, 0, 0, .12));
  position: relative;
  z-index: 1000;
}

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

.header-nav {
  padding: 35px 0 0 54px;

  .item {
    display: inline-block;
    margin-left: 30px;
    margin-right: 30px;
    text-decoration: none;

    .c_strong;
  }

  .item:hover {
    color: #2694bb;
  }
}

.header-signbar {
  height: 60px;
  line-height: 60px;
  margin: 16px 0 0 37px;
  border-left: 1px solid #ccc;
}

.header-sign-before {
  a {
    display: inline-block;
    margin: 0 25px;
    .fs12;
    text-decoration: none;

    .c_light;
  }

  a:hover {
    color: #2694bb;
  }
}

.header-sign-after {
  margin-left: 50px;
  position: relative;

  .header-droplist-wrap {
    display: inline-block;

  }

  .header-user {
    padding: 0 20px 0 0;
    color: #6c7280;
    .fs14;

    background: url("../images/trangle-down-small.png") no-repeat right center;
  }

  ul {
    display: none;
    position: absolute;
    top: 50px;
    left: -25px;
    width: 122px;
    padding: 10px 0 12px 0;
    text-align: center;
    background: #fff;
    border: 1px solid #e5e5e5;

    li {
      padding: 9px 0;
      line-height: 18px;
    }

    a {
      display: block;
      .c_normal;
    }

    a:hover{
      .c_blue;
    }
  }

  ul:after {
    content:'';
    width: 17px;
    height: 8px;
    background: url("../images/border-arrow-up.png") no-repeat;
    position: absolute;
    top: -8px;
    left: 53px;
  }

  .header-droplist-wrap:hover ul{
    display: block;
  }
}

.pr {
  position: relative;
}

.header-float {
  position: absolute;
  right: -65px;
  top: 25px;
  width: 65px;
  height: 254px;
  z-index: 100;

  .item {
    display: block;
  }

  .item01 {
    height: 65px;
    background: #ffc600 url('../images/header-float01.png') no-repeat center center;
  }

  .item02 {
    height: 65px;
    background: #1aa9eb url('../images/header-float02.png') no-repeat center center;
  }

  .item03 {
    height: 65px;
    background: #00ba9d url('../images/header-float03.png') no-repeat center center;
  }

  .item04 {
    height: 58px;
    background: #dd3d57 url('../images/header-float04.png') no-repeat center center;
  }
}


/* inner page main */
/* body */
.body {
  padding-top: 47px;
}
.body-hd {
  margin: 0 0 35px 0;
}

.body-bd {
  padding-bottom: 110px;
}


/* footer */
footer {
  min-height: 262px;
  padding: 58px 0 0 0!important;
  background: #fff;
  border-top: 1px solid #d9d9de;
}

@keyframes logoRotate {
  from {
    .transform(rotate(0deg));
  }
  to {
    .transform(rotate(360deg));
  }
}

@-webkit-keyframes logoRotate {
  from {
    .transform(rotate(0deg));
  }
  to {
    .transform(rotate(360deg));
  }
}

@-o-keyframes logoRotate {
  from {
    .transform(rotate(0deg));
  }
  to {
    .transform(rotate(360deg));
  }
}

@-moz-keyframes logoRotate {
  from {
    .transform(rotate(0deg));
  }
  to {
    .transform(rotate(360deg));
  }
}

.footer-logo {
  width: 187px;
  height: 118px;
  margin-right: 120px;

  .footer-logo-container {
    display: inline-block;
    width: 186px;
    height: 110px;
    background: url("../images/footer-logo.png") no-repeat;
    position: relative;

    .trangle01 {
      position: absolute;
      top: 10px;
      left: 137px;
      width: 6px;
      height: 12px;
      background: url("../images/footer-logo-trangle01.png") no-repeat;

      .animation(logoRotate, 2s, infinite);
    }

    .trangle02 {
      position: absolute;
      top: 4px;
      left: 145px;
      width: 11px;
      height: 11px;
      background: url("../images/footer-logo-trangle02.png") no-repeat;

      .animation(logoRotate, 2.5s, infinite);
    }

    .trangle03 {
      position: absolute;
      top: 20px;
      left: 145px;
      width: 8px;
      height: 10px;
      background: url("../images/footer-logo-trangle03.png") no-repeat;

      .animation(logoRotate, 3s, infinite);
    }

    .trangle04 {
      position: absolute;
      top: 29px;
      left: 150px;
      width: 9px;
      height: 8px;
      background: url("../images/footer-logo-trangle04.png") no-repeat;

      .animation(logoRotate, 3.5s, infinite);
    }

    .trangle05 {
      position: absolute;
      top: 20px;
      left: 163px;
      width: 10px;
      height: 7px;
      background: url("../images/footer-logo-trangle05.png") no-repeat;

      .animation(logoRotate, 5s, infinite);
    }
  }
}

.footer-nav {
}

.footer-nav-item {
  width: 218px;
  padding-left: 18px;
  margin-left: 43px;
  border-left: 1px solid #d9d9de;

  li {
    padding: 9px 0;
  }

  a {
    color: #000;
    font-size: 14px;
  }

  a:hover {
    color: #2694bb;
  }
}

.footer-nav-item.mid {
  margin-left: 0;
}

.footer-nav-item.last {
  width: 180px;
}

.footer-layer {
  margin-top: 45px;
  text-align: center;
  .fs12;
  .c_black;
}

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

@media screen and (max-width: 1215px){
  .header-float {
    right: 0;
  }
}