@import "variables";

.carousel-index {
  width: 100%;
  img {
    display: block;
    width: 100%;
  }
}

.xcx-menu-wrapper {
  padding: 10px;
  background-color: $bg-content-base;
  -webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
  margin-bottom: 18px;
  .new-content {
    max-width: 1080px;
    margin: 0 auto;
    padding: 0 10px;
  }
  .xcx-menu-item {
    display: inline-block;
    float: left;
    padding-left: 80px;
    padding-right: 20px;
    position: relative;
    height: 80px;
    .media {
      position: absolute;
      width: 80px;
      height: 80px;
      padding: 15px;
      top: 0;
      left: 0px;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      background-color: #821919;
      img {
        display: block;
        height: 100%;
        margin: 0 auto;
      }
    }
    .info {
      padding: 20px 10px 0px 10px;
      color: $red;
      line-height: 1.2;
      -webkit-transform-origin: top center;
      -moz-transform-origin: top center;
      -ms-transform-origin: top center;
      -o-transform-origin: top center;
      transform-origin: top center;
      -webkit-transform: scale(0.9);
      -moz-transform: scale(0.9);
      -ms-transform: scale(0.9);
      -o-transform: scale(0.9);
      transform: scale(0.9);
      .top {
        font-size: 22px;
        font-weight: bolder;
      }
      .down {
        font-size: 12px;
        text-transform: uppercase;
      }
    }
    &:last-child {
      padding-right: 0;
    }
  }
}

//检索
.retrieve-wrapper {
  .content {
    //border:1px solid #ccc;
    padding: 20px;
    background-color: $bg-content-base;
    margin-bottom: 10px;
    .ret-item {
      margin-bottom: 20px;
      max-height: 26px;
      overflow: hidden;
      -webkit-transition: all 0.35s;
      -moz-transition: all 0.35s;
      -ms-transition: all 0.35s;
      -o-transition: all 0.35s;
      transition: all 0.35s;
      &:last-child {
        margin-bottom: 0;
      }
      .right {
        padding-left: 80px;
        text-align: left;
        padding-right: 30px;
        position: relative;
        line-height: 26px;
        a {
          color: #333;
          padding: 0 20px;
          display: inline-block;

          &.active, &:hover {
            color: $red;
          }
        }
        .more {
          position: absolute;
          right: 10px;
          top: 0;
          -webkit-transition: all 0.35s;
          -moz-transition: all 0.35s;
          -ms-transition: all 0.35s;
          -o-transition: all 0.35s;
          transition: all 0.35s;
          display: none;
          &.open {
            -webkit-transform: rotateX(180deg);
            -moz-transform: rotateX(180deg);
            -ms-transform: rotateX(180deg);
            -o-transform: rotateX(180deg);
            transform: rotateX(180deg);
          }
        }
        .num-wrapper {
          padding-left: 20px;
        }
        .num {
          color: $red;
          font-weight: bolder;
        }
      }
      .left {
        width: 80px;
        display: inline-block;
        line-height: 26px;
        float: left;
        color: #999999;
      }

    }
  }
}

//排序
.paixu-wrapper {
  margin-bottom: 20px;
  .content {
    background-color: $bg-content-base;
    .paixu {
      font-size: 14px;
      line-height: 44px;
      border: 1px solid $border-dd;
      .px-update {
        width: 150px;
        float: left;
        border-right: 1px solid $border-dd;
      }
      .px-jifen {
        width: 210px;
        float: left;
        border-right: 1px solid $border-dd;
      }
      .px-search {
        width: 340px;
        float: right;
      }
      .paixu-item {
        padding: 0 10px;
        color: $font-light;
        cursor: pointer;
        &.active {
          color: $red;
          &.up {
            .arrow {
              transform: rotateX(180deg);
            }
          }
        }
        .word, .arrow {
          display: inline-block;
          padding-right: 10px;
        }
        .arrow {
          float: right;
        }
        .search-wrapper {
          position: relative;
          .search-form {
            margin-top: 7px;
            padding-left: 10px;
            height: 32px;
            border: 1px solid $border-dd;
            -webkit-border-radius: 4px;
            -moz-border-radius: 4px;
            border-radius: 4px;
            .search-input {
              line-height: 30px;
              padding-left: 10px;
              height: 30px;
              width: 250px;
              outline: none;
              border: 0;
              display: inline-block;
              float: left;
            }
            .icon-search {
              display: inline-block;
              line-height: 30px;
              float: left;
              color: #999;
            }
          }

        }
      }
    }
  }
}

//项目
.project-wrapper {
  .project-item {
    margin-bottom: 10px;
    padding: 0;
    background-color: $bg-ff;
    .project-media {
      .title {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        padding: 25px;
        font-size: 30px;
        font-weight: 500;
        color: $font-ff;
      }
    }
    .project-content {
      background-image: url("./../img/bg-logo.png");
      background-repeat: no-repeat;
      background-position: right bottom;
      .content-content {
        padding: 25px 35px;
        .top {
          margin-bottom: 30px;
          .cats, .go-detail {
            display: inline-block;
          }
          .go-detail {
            float: right;
            a {
              color: $red;
            }

          }
          .cats {
            color: $font-light;
          }
        }
        .middle{
          overflow: hidden;
          margin-bottom: 40px;
          .left,.right{
            float: left;
            .project-fs{
              color: $font-light;
            }
            h2{
              font-size: 40px;
              font-weight: bolder;
              margin-top: 20px;
            }

          }
          .left{
            width: 60%;
            text-align: center;
          }
          .right{
            width: 40%;
          }
        }
        .bottom{
          color: $font-light;
        }
      }

    }
  }
}