@import url('../style');
#index{
  background-color: #f5f5f5;
  padding-bottom: 50 * @px1;
  .banner,
  .news-banner>div{
    height: 60vh;
    position: relative;
    .angle-box{
      display: none;
      position: absolute;
      z-index: 15;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      i{
        display: block;
        font-size: 20 * @px1;
        color: white;
        background-color: rgba(0, 0, 0, 0.8);
        opacity: 0.5;
        padding: 20 * @px1 5 * @px1;
        position: absolute;
      }
      i:first-child{
        left: 0;
      }
      i:last-child{
        right: 0;
      }
    }
    .banner-box{
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      z-index: 10;
      .img-box{
        background-size: cover;
        //background-size: contain;
        background-position: center;
        background-repeat: no-repeat;
        height: 100%;
        position: absolute;
        width: 100%;
        top: 0;
        left: 0;
        z-index: -1;
        opacity: 0;
        transition: all 0.5s linear;
        p{
          position: absolute;
          color: white;
          top: 50%;
          transform: translateY(-50%);
          font-size: 40 * @px1;
          white-space: nowrap;
          opacity: 0.5;
          width: 100%;
          text-align: center;
        }
      }
      .img-box.active{
        opacity: 1;
        z-index: 10;
      }
    }
    .point-box{
      position: absolute;
      bottom: 30 * @px1;
      left: 50%;
      transform: translateX(-50%);
      z-index: 10;
      span{
        display: block;
        width: 10 * @px1;
        height: 10 * @px1;
        border-radius: 50%;
        background-color: white;
        opacity: 0.3;
        margin: 0 5 * @px1;
        cursor: pointer;
        transition: all 0.3s linear;
      }
      span.active,
      span:hover{
        opacity: 0.7;
      }
    }
  }
  .notice{
    background-color: white;
    padding-left: 20 * @px1;
    >div{
      width: 1280 * @px1;
      margin: auto;
      .notice-box{
        position: relative;
        .title{
          color: @systemColor;
          font-weight: 600;
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          left: 0;
          font-size: 24 * @px1;
          line-height: 1;
        }
        .new-list-box{
          padding: 30 * @px1 0;
          padding-left: 130 * @px1;
          position: relative;
          padding-right: 30 * @px1;
          >p{
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            i{
              display: block;
              font-size: 14 * @px1;
              line-height: 1;
              cursor: pointer;
            }
          }
          >div{
            position: relative;
            height: 18 * @px1;
            overflow: hidden;
            >div.content-box{
              position: absolute;
              top: 50%;
              transform: translateY(-50%);
              left: 0;
              height: 100%;
              width: 100%;
              >div{
                position: relative;
                height: 100%;
                p{
                  position: absolute;
                  top: -18 * @px1;
                  left: 0;
                  width: 100%;
                  a{
                    display: block;
                    line-height: 1;
                    font-size: 18 * @px1;
                    color: #333333;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    max-width: 100%;
                  }
                }
                p.active{
                  top: 0;
                }
              }
            }
          }
        }
      }
    }
  }
  .part{
    margin: auto;
    margin-top: 20 * @px1;
    width: 1280 * @px1;
    >div{
      background-color: white;
      padding: 20 * @px1 0;
      .title-box{
        padding: 15 * @px1 25 * @px1;
        >div{
          position: relative;
          h2{
            color: #808080;
            font-size: 14 * @px1;
            font-weight: 400;
            padding-right: 180 * @px1;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            b{
              color: @systemColor;
              font-size: 30 * @px1;
              font-weight: 600;
            }
          }
          .more{
            position: absolute;
            right: 0;
            bottom: 0;
            border: 1px solid #ababab;
            overflow: hidden;
            a{
              display: block;
              p{
                padding: 15 * @px1 60 * @px1;
                position: relative;
                span{
                  display: block;
                  font-size: 12 * @px1;
                  line-height: 1;
                  color: #333333;
                  position: relative;
                  z-index: 20;
                }
              }
              p:after{
                content: "";
                display: block;
                position: absolute;
                opacity: 0;
                height: 0;
                top: 50%;
                left: 50%;
                transform: translateX(-50%) translateY(-50%) rotateZ(45deg);
                width: 140%;
                background-color: @systemColor;
                transition: all 0.1s linear;
                transform-origin: center;
                z-index: -1;
              }
            }
            a:hover{
              p{
                span{
                  color: white;
                }
              }
              p:after{
                opacity: 1;
                height: 300%;
                z-index: 10;
              }
            }
          }
        }
      }
      .mobile-more{
        display: none;
        font-size: 0;
        padding-top: 15 * @px1;
        a{
          display: inline-block;
          border: 1px solid #d0d0d0;
          padding: 5 * @px1 15 * @px1;
          i{
            display: block;
            color: @systemColor;
            font-size: 12 * @px1;
            line-height: 1;
            font-weight: 600;
          }
        }
      }
    }
  }
  .common{
    >div{
    }
  }
  .part.company{
    display: none;
    .text-content{
      padding: 10 * @px1 20 * @px1 0;
      p{
        text-indent: 26 * @px1;
        font-size: 13 * @px1;
        line-height: 2;
        overflow: hidden;
        text-overflow:ellipsis;
        word-break: break-all;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 3;
        color: #707070;
      }
    }
  }
  .part.news-box{
    .news{
      padding-right: 20 * @px1;
      .news-list{
        padding: 0 10 *@px1;
        width: 35%;
        ul{
          padding: 0 20 * @px1;
          li{
            padding: 20 * @px1 0;
            border-bottom: 1px solid #f0f0f0;
            >p{
              position: relative;
              padding-left: 30 * @px1;
              i{
                position: absolute;
                font-size: 16 * @px1;
                line-height: 1;
                top: 50%;
                left: 0;
                transform: translateY(-50%);
                color: #999999;
              }
              a{
                font-size: 15 * @px1;
                line-height: 1;
                color: black;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                display: block;
                max-width: 100%;
              }
            }
            .time-box{
              display: none;
              margin-top: 15 * @px1;
              p{
                font-size: 12 * @px1;
                color: #8b8b8b;
                position: relative;
                padding-left: 15 * @px1;
                line-height: 1;
                transform: scale(0.8);
                transform-origin: left;
                i{
                  display: block;
                  font-size: 12 * @px1;
                  position: absolute;
                  top: 50%;
                  transform: translateY(-50%);
                  left: 0;
                }
                span{
                  color: #515151;
                  margin-left: 5 * @px1;
                }
              }
            }
          }
        }
        h2{
          padding: 0 30 * @px1;
          border-bottom: 1px solid #cccccc;
          p{
            color: @systemColor;
            font-size: 20 * @px1;
            line-height: 1;
            font-weight: 600;
            border-bottom: 2 * @px1 solid @systemColor;
            padding: 20 * @px1 0;
          }
        }
      }
      .news-banner{
        width: 65%;
        padding: 0 10 * @px1;
        >div{
          .angle-box{
            i{
              font-size: 40 * @px1;
              opacity: 0.7;
              font-weight: 400;
              cursor: pointer;
            }
          }
          .point-box{
            white-space: nowrap;
            span{
              display: inline-block;
              float: none;
              border-radius: 0;
              width: auto;
              height: auto;
              background-color: white;
              color: #666666;
              font-size: 12 * @px1;
              line-height: 1;
              padding: 10 * @px1 40 * @px1;
            }
            span.active,
            span:hover{
              background-color: #FF8800;
              color: white;
            }
          }
        }
        >div:hover{
          .angle-box{
            display: block;
          }
        }
      }
    }
  }
  .part.product-box{
    >div{
      .produce-list{
        ul{
          padding-top: 20 * @px1;
          padding-bottom: 15 * @px1;
          li{
            width: 100% / 6;
            padding-bottom: 25 * @px1;
            >div{
              a{
                display: block;
                img{
                  display: block;
                  height: 130 * @px1;
                  margin: auto;
                }
                p{
                  font-size: 18 * @px1;
                  line-height: 1;
                  color: #333333;
                  margin-top: 25 * @px1;
                }
              }
            }
          }
        }
      }
      .mobile-more{
        padding: 0;
      }
    }
  }
  .part.enter-us{
    >div{
      .part-box{
        .introduce{
          width: 45%;
          >p{
            padding: 10 * @px1 20 * @px1;
            color: #707070;
            font-size: 14 * @px1;
            line-height: 2;
            text-indent: 28 * @px1;
          }
          ul{
            padding: 20 * @px1 20 * @px1;
            li{
              width: 50%;
              p{
                line-height: 1;
                font-size: 12 * @px1;
                color: #707070;
                span{
                  font-size: 50 * @px1;
                  color: #FF8C00;
                  margin-right: 5 * @px1;
                }
              }
              p:last-child{
                margin-top: 25 * @px1;
                font-size: 14 * @px1;
              }
            }
          }
          .more{
            margin-top: 50 * @px1;
            margin-left: 25 * @px1;
            >div{
              display: inline-block;
              a{
                display: block;
                position: relative;
                p{
                  font-size: 12 * @px1;
                  color: #333;
                  padding: 10 * @px1 35 * @px1;
                }
                i:before,
                i:after{
                  position: absolute;
                  display: block;
                  content: "";
                  transition: all 0.2s linear;
                }
                i.border-x:before{
                  top: 0;
                  left: 0;
                  width: 100%;
                  height: 1px;
                  background-color: #d3a368;
                  transform-origin: left;
                }
                i.border-x:after{
                  bottom: 0;
                  left: 0;
                  width: 100%;
                  height: 1px;
                  background-color: #d3a368;
                  transform-origin: left;
                }
                i.border-y:before{
                  top: 0;
                  left: 0;
                  height: 100%;
                  width: 1px;
                  background-color: #d3a368;
                  transform-origin: bottom;
                }
                i.border-y:after{
                  top: 0;
                  right: 0;
                  height: 100%;
                  width: 1px;
                  background-color: #d3a368;
                  transform-origin: bottom;
                }
                i.angle:before{
                  height: 1px;
                  width: 115 * @px1;
                  background-color: #d3a368;
                  left: 15 * @px1;
                  top: 17 * @px1;
                  transform: translateX(-25 * @px1) scaleX(0.2);
                  transform-origin: 0 0;
                }
                i.angle:after{
                  width: 0;
                  height: 0;
                  border: 3 * @px1 solid transparent;
                  border-left-color: #d3a368;
                  border-left-width: 6 * @px1;
                  top: 15 * @px1;
                  left: 10 * @px1;
                }
              }
              a:after{
                position: absolute;
                display: block;
                content: "";
                background-color: #d3a368;
                top: -1 * @px1;
                right: 20 * @px1;
                height: 3 * @px1;
                width: 30 * @px1;
                transform: scaleX(0);
                transition: all 0.1s linear;
                transform-origin: right;
              }
              a:hover:after{
                transform: scaleX(1);
                transition-delay: 0.2s;
              }
              a:hover{
                i.border-x:before,
                i.border-x:after{
                  transform: scaleX(0);
                }
                i.border-y:before,
                i.border-y:after{
                  transform: scaleY(0);
                }
                i.angle:before{
                  transform: scaleX(1);
                  left: 2 * @px1;
                }
                i.angle:after{
                  left: 124 * @px1;
                  opacity: 0;
                }
              }
            }
          }
        }
        .introduce-detail{
          width: 55%;
          padding-right: 20 * @px1;
          ul{
            li{
              >div{
                img{
                  display: block;
                  height: 185 * @px1;
                  width: 228 * @px1;
                }
                .text-box{
                  background-color: #eb6100;
                  height: 185 * @px1;
                  width: calc(100% - 228 * @px1);
                  padding: 30 * @px1 40 * @px1;
                  h3{
                    font-size: 14 * @px1;
                    line-height: 1;
                    color: white;
                  }
                  p{
                    margin-top: 10 * @px1;
                    width: 100%;
                    color: white;
                    overflow: hidden;
                    font-size:12px;
                    text-overflow:ellipsis;
                    word-break: break-all;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 4;
                    line-height: 2;
                  }
                }
              }
            }
            li:last-child{
              >div{
                .text-box{
                  background-color: #f0f0f0;
                  h3{
                    color: #808080;
                  }
                  p{
                    color: #808080;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
  .part.media{
    >div{
      .info-box{
        position: relative;
        padding-right: 330 * @px1;
        .media-list{
          padding: 10 * @px1 20 * @px1;
          ul{
            li{
              width: 100% / 3;
              padding: 5 * @px1;
              >a{
                display: block;
                color: black;
                border: 1px solid #f1f1f1;
                transition: all 0.1s linear;
                .img-box{
                  background-position: center;
                  background-size: cover;
                  height: 200 * @px1;
                }
                .media-bottom{
                  padding: 20 * @px1;
                  .time-box{
                    border-bottom: 1px solid #dddddd;
                    position: relative;
                    padding-bottom: 30 * @px1;
                    .time{
                      padding: 10 * @px1 20 * @px1;
                      position: absolute;
                      top: 0;
                      left: 0;
                      border-right: 1px solid #dddddd;
                      span{
                        display: block;
                        font-size: 40 * @px1;
                        line-height: 1;
                        font-weight: 600;
                      }
                      p{
                        color: #707070;
                        font-size: 14 * @px1;
                        line-height: 1;
                        margin-top: 10 * @px1;
                      }
                    }
                    .content{
                      padding: 10 * @px1 20 * @px1;
                      padding-left: 115 * @px1;
                      p{
                        font-size: 18 * @px1;
                        overflow: hidden;
                        text-overflow:ellipsis;
                        word-break: break-all;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                        -webkit-line-clamp: 2;
                        line-height: 1.5;
                        max-width: 100%;
                      }
                    }
                  }
                  .detail-box{
                    padding: 20 * @px1 0;
                    p{
                      font-size: 14 * @px1;
                      line-height: 1;
                      color: #7F7F7F;
                    }
                    i{
                      font-size: 16 * @px1;
                      line-height: 1;
                      display: block;
                      color: #707070;
                    }
                  }
                }
              }
              a:hover{
                transform: translateY(-15 * @px1);
                box-shadow: 0 0 10 * @px1 10 * @px1 #e5e5e5;
              }
            }
          }
        }
        .contact-list{
          position: absolute;
          right: 0;
          top: 0;
          padding-right: 25 * @px1;
          padding-top: 15 * @px1;
          ul{
            li{
              padding: 10 * @px1 0;
              >div{
                display: table;
                position: relative;
                padding-right: 10 * @px1;
                padding-left: 50 * @px1;
                background-color: rgba(204,204, 204, 0.2);
                width: 270 * @px1;
                height: 120 * @px1;
                .icon-box{
                  position: absolute;
                  top: 50%;
                  transform: translateY(-50%) translateX(-50%);
                  left: 0;
                  width: 50 * @px1;
                  img{
                    display: block;
                    width: 100%;
                  }
                }
                .info{
                  display: table-cell;
                  vertical-align: middle;
                  >span{
                    display: block;
                    line-height: 1;
                    font-size: 14 * @px1;
                    font-weight: 600;
                    color: #333333;
                  }
                  p{
                    color: #666666;
                    line-height: 1.5;
                    font-size: 14 * @px1;
                    margin-top: 15 * @px1;
                    max-width: 100%;
                    span{
                      display: block;
                      line-height: 1;
                    }
                    span:last-child{
                      margin-top: 5 * @px1;
                    }
                  }
                }
              }
            }
            li:first-child{
              padding-top: 0;
            }
          }
        }
      }
    }
  }
  .code-box{
    position: fixed;
    right: 20 * @px1;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
    >ul{
      li{
        background-color: #f5f5f5;
        padding: 15 * @px1 10 * @px1;
        img{
          display: block;
          max-width: 100 * @px1;
          margin: auto;
          padding: 5 * @px1;
          background-color: white;
        }
        p{
          margin-top: 15 * @px1;
          color: #666666;
          font-size: 14 * @px1;
          line-height: 1;
        }
      }
      li:last-child{
        margin-top: 10 * @px1;
      }
    }
  }
}
@media (max-width: 1300px) {
  #index{
    .banner{
      .banner-box{
        .img-box{
          p{
            font-size: 30 * @px1;
          }
        }
      }
    }
    .notice{
      >div{
        width: 1000 * @px1;
      }
    }
    .part{
      width: 1000 * @px1;
    }
  }
}
@media (max-width: 1100px) {
  #index{
    .part.product-box{
      >div{
        .produce-list{
          ul{
            li{
              >div{
                a{
                  p{
                    font-size: 16 * @px1;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
@media (max-width: 1030px) {
  #index{
    .notice{
      >div{
        width: 900 * @px1;
      }
    }
    .part{
      width: 900 * @px1;
    }
    //#index .part.media > div .info-box .media-list ul li > a .media-bottom .time-box .content
    .part.media{
      >div{
        .info-box{
          .media-list{
            ul{
              li{
                >a{
                  .media-bottom{
                    .time-box{
                      .time{
                        padding: 10 * @px1;
                      }
                      .content{
                        padding-left: 75 * @px1;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
@media (max-width: 1000px) {
  #index{
    .banner{
      .banner-box{
        .img-box{
          p{
            font-size: 26 * @px1;
          }
        }
      }
    }
    .notice{
      >div{
        width: 800 * @px1;
      }
    }
    .part{
      width: 800 * @px1;
    }
    .part.news-box{
      .news{
        .news-list{
          width: 100%;
        }
        .news-banner{
          display: none;
        }
      }
    }
    .part.product-box{
      >div{
        .produce-list{
          ul{
            li{
              width: 100% / 3;
              >div{
                a{
                  img{
                    height: 100 * @px1;
                  }
                  p{
                    font-size: 16 * @px1;
                  }
                }
              }
            }
          }
        }
      }
    }
    .part.enter-us{
      >div{
        .part-box{
          .introduce{
            width: 100%;
          }
          .introduce-detail{
            display: none;
          }
        }
      }
    }

    .part.media{
      >div{
        .info-box{
          padding-right: 0;
          .contact-list{
            display: none;
          }
        }
      }
    }
  }

}
@media (max-width: 800px) {
  #index{
    background-color: white;
    .banner{
      .banner-box{
        .img-box{
          p{
            font-size: 26 * @px1;
          }
        }
      }
    }
    .banner{
      height: 40vh;
      .angle-box{
        display: block;
      }
      .banner-box{
        .img-box{
          p{
            font-size: 12 * @px1;
          }
        }
      }
      .point-box{
        span{
          width: 20 * @px1;
          height: 2 * @px1;
          border-radius: 0;
        }
        span.active{
          background-color: #017ab3;
        }
      }
    }
    .notice{
      display: none;
    }
    .part{
      width: 100%;
      margin: 0;
      padding-top: 30 * @px1;
      >div{
        padding: 0;
        .title-box{
          >div{
            text-align: center;
            h2{
              font-weight: 600;
              padding-right: 0;
              display: inline-block;
              overflow: initial;
              span{
                display: none;
              }
              b{
                font-size: 20 * @px1;
                position: relative;
                display: block;
              }
              b:after{
                position: absolute;
                content: "";
                display: block;
                width: 60 * @px1;
                margin: auto;
                left: 0;
                right: 0;
                height: 2 * @px1;
                background-color: @systemColor;
                bottom: -10 * @px1;
              }
            }
            .more{
              display: none;
            }
          }
        }
        .mobile-more{
          display: block;
        }
      }
    }
    .part.company{
      display: block;
    }
    .part.news-box{
      >div{
        .news{
          padding-right: 0;
          .news-list{
            h2{
              font-size: 0;
              border: none;
              p{
                display: inline-block;
                font-size: 20 * @px1;
                border: none;
                position: relative;
                padding: 0;
              }
              p:after{
                position: absolute;
                content: "";
                display: block;
                width: 60 * @px1;
                margin: auto;
                left: 0;
                right: 0;
                height: 2 * @px1;
                background-color: @systemColor;
                bottom: -10 * @px1;
              }
            }
            ul{
              padding: 0;
              padding-top: 30 * @px1;
              li{
                border: none;
                padding: 15 * @px1 0;
                >p{
                  padding-left: 0;
                  i{
                    display: none;
                  }
                }
                .time-box{
                  display: block;
                }
              }
            }
          }
        }
      }
    }
    .part.product-box{
      >div{
        .produce-list{
          ul{
            padding-bottom: 0;
            li{
              width: 100% / 2;
              >div{
                a{
                  img{
                    height: 60 * @px1;
                  }
                  p{
                    font-size: 14 * @px1;
                  }
                }
              }
            }
            li.pc-show{
              display: none;
            }
          }
        }
      }
    }
    .part.enter-us{
      display: none;
    }
    .part.media{
      display: none;
    }
    .code-box{
      display: none;
    }
  }
}