//IE8
@import 'variable';
/*projects start*/
.projects {
  .section {
    .section-left li:before {
      content: '●';
      width: 0;
      height: 0;
      margin-top: -14px;
      font-size: 22px;
      color: #565656;
    }
  }
}
/*projects end*/
/*product begin*/
.products {
  ul {
    li {
      &.products-image-large {
        margin-bottom: 25px;
        .products-image {
          width: 625px;
          margin-right: 25px;
        }
        .products-detail {
          width: 300px;
          h3 {
            font-size: 25px;
            margin-top: 80px;
            text-align: center;
          }
        }
      }
      &.products-image-small {
        width: 300px;
        margin-right: 25px;
        }
    }
  }
}
/*product end*/

///////////////////////

.container-width-small{
  .banner {
    .banner-box {
      width: @container-width-small;
    }
  }
  .download {
    width: @container-width-small;
    .download-element(-467px, 10px);

    .download-element(@a, @b) {
      .android,
      .iphone {
        margin-left: @a;
      }
      .app-screen {
        margin-left: @b;
      }
    }

  }
  .character {
    ul {
      width: @container-width-small;
    }
  }
  .projects {
    .projects-header {
      .project-header-left{
        div {
          width: @container-width-small/4 + 50;
          margin-right: @container-width-small/4 - 50;
        }
      }
      .project-header-right{
        div {
          width: @container-width-small / 4 * 3 - 50;
          margin-left: -@container-width-small/4 + 50;
        }
      }
    }
    .section {
      width: @container-width-small;
      .section-left {
        width: @container-width-small/2-121;
      }
      .section-right {
        width: @container-width-small/2+100;
      }
    }
  }
  .products {
    ul {
      width: @container-width-small;
      @mr: @container-width-small/33;
      li {
        &.products-image-large {
          margin-bottom: @mr;
          .products-image {
            width: (@container-width-small + @mr)/3*2-@mr;
            margin-right: @mr;
          }
          .products-detail {
            width: (@container-width-small + @mr)/3-@mr;
          }
          margin-bottom: @mr;
        }
        &.products-image-small {
          width: (@container-width-small + @mr)/3-@mr;
          margin-right: @mr;
        }
      }
    }
  }

}
.container-width{
  .banner {
    .banner-box {
      width: @container-width;
    }
  }
  .download {
    width: @container-width;
    .download-element(-500px, 50px);

    .download-element(@a, @b) {
      .android,
      .iphone {
        margin-left: @a;
      }
      .app-screen {
        margin-left: @b;
      }
    }

  }
  .character {
    ul {
      width: @container-width;
    }
  }
  .projects {
    .projects-header {
      .project-header-left{
        div {
          width: @container-width/4 + 50;
          margin-right: @container-width/4 - 50;
        }
      }
      .project-header-right{
        div {
          width: @container-width/ 4 * 3 - 50;
          margin-left: -@container-width/4 + 50;
        }
      }
    }
    .section {
      width: @container-width;
      .section-left {
        width: @container-width/2-121;
      }
      .section-right {
        width: @container-width/2+100;
      }
    }
  }
  .products {
    ul {
      width: @container-width;
      @mr: @container-width/33;
      li {
        &.products-image-large {
          margin-bottom: @mr;
          .products-image {
            width: (@container-width + @mr)/3*2-@mr;
            margin-right: @mr;
          }
          .products-detail {
            width: (@container-width + @mr)/3-@mr;
          }
          margin-bottom: @mr;
        }
        &.products-image-small {
          width: (@container-width + @mr)/3-@mr;
          margin-right: @mr;
        }
      }
    }
  }

}
.container-width-large{
  .banner {
    .banner-box {
      width: @container-width-large;
    }
  }
  .download {
    width: @container-width-large;
    .download-element(-540px, 120px);

    .download-element(@a, @b) {
      .android,
      .iphone {
        margin-left: @a;
      }
      .app-screen {
        margin-left: @b;
      }
    }

  }
  .character {
    ul {
      width: @container-width-large;
    }
  }
  .projects {
    .projects-header {
      .project-header-left{
        div {
          width: @container-width-large/4 + 50;
          margin-right: @container-width-large/4 - 50;
        }
      }
      .project-header-right{
        div {
          width: @container-width-large / 4 * 3 - 50;
          margin-left: -@container-width-large/4 + 50;
        }
      }
    }
    .section {
      width: @container-width-large;
      .section-left {
        width: @container-width-large/2-121;
      }
      .section-right {
        width: @container-width-large/2+100;
      }
    }
  }
  .products {
    ul {
      width: @container-width-large;
      @mr: @container-width-large/33;

      li {
        &.products-image-large {
          margin-bottom: @mr;
          .products-image {
            width: (@container-width-large + @mr)/3*2-@mr;
            margin-right: @mr;
          }
          .products-detail {
            width: (@container-width-large + @mr)/3-@mr;
          }
          margin-bottom: @mr;
        }
        &.products-image-small {
          width: (@container-width-large + @mr)/3-@mr;
          margin-right: @mr;
        }
      }
    }
  }

}
