@import url(./variables.less);

.nav {
  background-color: @mainColor;
  height: 9.3333vw;
  display: flex;
  justify-content: space-around;

  .left,
  .right {
    width: 10%;
    text-align: center;

    img {
      margin-top: 2.6667vw;
      height: 4vw;
      width: 4.5333vw;
    }
  }

  .nav-main {
    flex: 1;
    text-align: center;
    line-height: 9.3333vw;
    font-size: 4vw;
    color: @normalColor;
  }
}

.main {
  //   margin-top: 2.6667vw;
  background-color: @normalColor;

  .slideTxtBox {
    .hd {
      line-height: 8.8vw;
      background: linear-gradient(0deg, #d4eefb, @normalColor);

      ul {
        display: flex;
        justify-content: space-around;
        align-items: center;

        li {
          list-style: none;
          height: 8.8vw;
          margin-right: 1.3333vw;

          a {
            color: #5ca0d4;
            font-size: 3vw;
          }
        }

        .on {
          a {
            font-weight: bold;
            color: @mainColor;
          }

          border-bottom: 0.6667vw solid @mainColor;
        }
      }
    }

    .bd {
      .picture {
        height: 53.3333vw;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .introduce {
        padding: 0 3.8667vw 6.6667vw 3.8667vw;
        background: @normalColor;
        line-height: 5vw;
        margin-top: 4vw;
        p {
          // text-indent: 2em;
          font-size: 3vw;
          margin: 0;
          text-align: justify;
          color: #333;
        }
      }
      img {
        max-width: 100%;
        height: auto;
        margin: 2vw 0;
      }

      .listIntroduction {
        padding: 0 4vw 0.2vw 4vw;

        .listIntroduction-top {
          padding-top: 4.4vw;
          //   height: 9.6vw;
          border-bottom: 0.1333vw solid #eee;
          display: flex;
          justify-content: start;

          font-weight: bold;
          color: @mainColor;

          .top-title {
            height: 5.3333vw;
            border-bottom: 0.6667vw solid @mainColor;
          }
        }
      }

      .introducer {
        border-bottom: 0.1333vw solid #eee;

        .introducer-top {
          margin-top: 3.2vw;
        }

        .contacted {
          display: flex;
          justify-content: start;
          margin-bottom: 4vw;

          div {
            margin-right: 4.3333vw;
          }
        }
      }

      .pictureList {
        padding: 4.1333vw 4vw;
        display: flex;
        height: auto;
        justify-content: space-between;
        flex-wrap: wrap;
        font-size: 3vw;
        div {
          width: 44.8vw;
          margin-bottom: 4vw;
          text-align: center;
          border: 1px solid #eee;
          height: 36vw;
          
          img {
            width: 100%;
            height: 100% ;
            margin: 0;
          }
          p {
            margin: 0;
            text-align: center;
            font-size: 3vw;
            padding: 1.5vw 0;
            background: #166aa6;
            color: #fff;
          }
        }
      }
      .pictureList a {
        display: block;
        height: 30vw;
      }
      .upAndDown {
        display: flex;
        justify-content: space-between;
        // height: 13.3333vw;
        padding: 0 4vw 5.3333vw 4vw;
        margin-top: 4vw;

        div {
          line-height: 13.3333vw;
          text-align: center;
          background-color: @mainColor;
          width: 42.6667vw;

          a {
            color: @normalColor;
            padding: 1vw 2vw;
            border: 1px solid #eee;
            font-size: 2vw;
          }
        }
      }
      .upAndDown a {
        padding: 1vw 2vw;
        border: 1px solid #eee;
        font-size: 3.2vw;
      }
      .upAndDown .current{
        background: #166aa6;
        color: #fff;
      }
    }
  }
}