/* CSS Document */
body {}

article.swiper-container {
  width : 100%!important;
  height: 100%!important;

  .swiper-slide {
    background-position: center;
    background-size    : cover;

    .p1 {
      width : 100%!important;
      height: 100%!important;

      .swiper-pagination {
        font-size   : 0;
        line-height : 0;
        bottom      : 5%;
        text-align  : left;
        padding-left: 25%;

        .swiper-pagination-bullet {
          width        : 14px;
          height       : 14px;
          border       : 1px solid transparent;
          border-radius: 0;
          position     : relative;
          background   : none;
          opacity      : 1;
          transition   : $tr4;

          &::after {
            background-color: #fff;
            width           : 8px;
            height          : 8px;
            content         : "";
            display         : block;
            position        : absolute;
            top             : 50%;
            margin-top      : -4px;
            left            : 50%;
            margin-left     : -4px;
            transition      : $tr4;
          }

          &.swiper-pagination-bullet-active {
            border    : 1px solid #fff;
            transition: $tr4;

            &::after {
              width      : 6px;
              height     : 6px;
              margin-top : -3px;
              margin-left: -3px;
              transition : $tr4;
            }
          }
        }
      }

      .swiper-slide {
        .text {
          color       : #fff;
          padding-left: 25%;

          .en {
            font-family: "FlamaCondensedBold_1";
            @include font-size($p1-font-sizes);
          }

          .ch {
            font-size  : 40px;
            line-height: 40px;
            margin-top : 20px;
            font-weight: bold;
          }
        }
      }
    }

    .area-list {
      overflow: hidden;

      .item {
        float   : left;
        position: relative;
        @include area-list-item-margin($area-list-item-margin);

        a {
          display    : block;
          color      : #fff;
          margin-left: 36 * 3px;

          .tit {
            position: absolute;
            left    : 0;
            top     : 0;
            z-index : 1;

            .en {
              font-family: "FlamaCondensedBold_1";
              @include font-size($area-list-en-size);
            }

            .ch {
              @include font-size($area-list-ch-size);
            }

            .line {
              width           : 40px;
              background-color: #fff;
              height          : 8px;
              margin-top      : 20px;
            }
          }

          .pic {
            @include area-list-item-pic($area-list-item-pic);
            padding-bottom     : 128%;
            background-position: center;
            background-size    : cover;
          }
        }
      }
    }

    .about {
      padding-left: 25%;
      width       : 75%;
      color       : #fff;

      .inner {
        width: 80%;
      }

      .tit {
        .en {
          font-family: "FlamaCondensedBold_1";
          @include font-size($about-tit-en-size);
        }

        .ch {
          @include font-size($about-tit-ch-size);
        }
      }

      .content {
        @include font-size($about-con-size);
        padding: 2% 0 5%;
      }

      .more {
        a {
          color        : #fff;
          display      : inline-block;
          border       : 1px solid #fff;
          line-height  : 40px;
          padding      : 0 50px;
          border-radius: 50px;
        }
      }
    }

    .p3 {
      width : 100%!important;
      height: 100%!important;

      .text {
        color       : #fff;
        padding-left: 25%;
        width       : 75%;

        .ch {
          font-size  : 40px;
          font-weight: bold;
        }

        .en {
          font-family: "FlamaCondensedBold_1";
          font-size  : 28px;
        }

        .content {
          width: 80%;
          @include font-size($about-con-size);
        }
      }
    }

    .about-nav {
      padding-left: 25%;
      width       : 75%;
      position    : absolute;
      left        : 0;
      bottom      : 4%;
      z-index     : 4;
      overflow    : hidden;

      .inner {
        width   : 80%;
        overflow: hidden;
        position: relative;

        &::after {
          content      : "";
          display      : block;
          border-bottom: 1px solid #fff;
          width        : 100%;
          position     : absolute;
          top          : 50%;
        }
      }

      .item {
        line-height: 0;
        font-size  : 0;
        width      : 12.5%;
        height     : 72px;
        position   : relative;
        z-index    : 1;

        &.click {
          cursor: pointer;
        }

        i {
          font-family: "FlamaCondensedBold_1";
          font-size  : 20px;
          line-height: 1em;
          height     : 0;
          font-style : normal;
          display    : block;
          color      : #fff;
          position   : absolute;
          left       : 50%;
          margin-left: -8px;
          top        : 0;
          z-index    : 1;
          transition : $tr4;
        }

        span {
          width        : 14px;
          height       : 14px;
          display      : block;
          border       : 1px solid #fff;
          border-radius: 0;
          position     : absolute;
          opacity      : 1;
          transition   : $tr4;
          background   : none;
          top          : 50%;
          left         : 50%;
          margin-top   : -7px;
          margin-left  : -7px;

          &::after {
            background-color: #fff;
            width           : 8px;
            height          : 8px;
            content         : "";
            display         : block;
            position        : absolute;
            top             : 50%;
            margin-top      : -4px;
            left            : 50%;
            margin-left     : -4px;
            transition      : $tr4;
          }

          &.bn {
            border: 1px solid transparent;
          }
        }

        &.on {
          height: 72px;

          i {
            top       : 50%;
            margin-top: -.5em;
            transition: $tr4;
          }

          span {
            position           : absolute;
            width              : 72px;
            height             : 72px;
            margin-top         : -36px;
            margin-left        : -36px;
            border             : 1px solid transparent;
            background-position: center;
            background-size    : cover;

            &::after {
              background-color: #fff;
              width           : 0;
              height          : 0;
            }
          }
        }
      }
    }

    .news {
      color       : #fff;
      padding-left: 25%;
      width       : 75%;

      .inner {
        width: 80%;
      }

      .tit {
        .en {
          font-family: "FlamaCondensedBold_1";
          @include font-size($about-tit-en-size);
        }

        .ch {
          @include font-size($about-tit-ch-size);
        }
      }

      .list {
        margin-top: 5%;

        .item {
          float: left;

          a {
            color: #fff;
          }
        }
      }
    }

    .market {
      color       : #fff;
      padding-left: 25%;
      width       : 75%;

      .inner {
        width: 80%;
      }

      .tit {
        .en {
          font-family: "FlamaCondensedBold_1";
          @include font-size($about-tit-en-size);
        }

        .ch {
          @include font-size($about-tit-ch-size);
        }
      }

      .list {
        margin-top: 5%;

        .item {
          float: left;

          a {
            color: #fff;
          }
        }
      }
    }
  }
}

.mouse {
  position  : fixed;
  z-index   : 4;
  right     : 4%;
  top       : 50%;
  margin-top: -203px;
}

.article-nav {
  position  : fixed;
  z-index   : 4;
  left      : 0;
  top       : 50%;
  color     : #fff;
  margin-top: -120px;

  .item {
    @include article-nav-item($article-nav-item);
    padding-top   : 15px;
    padding-bottom: 15px;
    position      : relative;
    @include font-size($about-con-size);

    &::after {
      content      : "";
      display      : block;
      position     : absolute;
      @include article-nav($article-nav);
      border-bottom: 1px solid #fff;
      top          : 50%;
      transition   : $tr4;
    }

    &.on {
      &::after {
        @include article-nav-on($article-nav-on);
        left      : 0;
        transition: $tr4;
      }
    }
  }
}