@import "base.less";
@import "element.less";
@import "reset.less";

//设计的基础宽度
@base_width: 750;

//清除默认样式
*{
  margin: 0;
  padding: 0;
}

//包裹区域
.wrap {
  width: 100%;
//视频播放区
    .short-view {
      width: 100%;
      height: ( 400vw / @base_width ) * 100;
//视频预览图
        img {
          width: 100%;
        }
      //遮罩
      #wrapMask {
        width: 100%;
        height: ( 400vw / @base_width ) * 100;
        background-color: rgba(0,0,0,0.3);
        position: absolute;
        display: none;

        #wrapMaskWord {
          position: relative;
          top:50%;
          left:23%;

          a{
            text-decoration: underline;
            color: rgb(46,171,229);
          }

          span {
            color: gainsboro;
          }
        }
      }
//播放按钮
      .play-icon {
        opacity:0.55;
        background-size:cover;
        background-image:url(./img/shortvideo/shortvideo_play.png);
        position:absolute;
        left: (280vw / @base_width) * 100;
        top: (130vw / @base_width) * 100;
        width: (140vw / @base_width) * 100;
        height: (140vw / @base_width) * 100;
      }
  }

//内包裹区域
  .inner-wrap {
    box-sizing: border-box;
    padding: 0 ( 30vw / @base_width ) * 100;
//详细介绍
      .video-details {
        color: #bababa;
        font-size: ( 24vw / @base_width ) * 100;
        width: 100%;

        .video-details-content {
          padding-bottom: ( 30vw / @base_width ) * 100;

            h1{
              box-sizing: border-box;
              color: #fff;
              padding-left: ( -6vw / @base_width ) * 100;
              padding-bottom: ( 5vw / @base_width ) * 100;
              font-size: ( 40vw / @base_width ) * 100;
              padding-top: ( 45vw / @base_width ) * 100;
            }
        }

        .video-details-tags {
          font-size: ( 28vw / @base_width ) * 100;
          color: #989898;
        }

        p{
          font-size: ( 28vw / @base_width ) * 100;
          line-height: ( 40vw / @base_width ) * 100;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 5;
          overflow: hidden;
        }
      }
      //高清影视图标
      .app-logo {
        width: 100%;
        height: ( 160vw / @base_width ) * 100;
        border-top: 1px solid rgb(52,52,52);
        border-bottom: 1px solid rgb(52,52,52);
        padding-top: ( 10vw / @base_width ) * 100;
        margin-top: ( 36vw / @base_width ) * 100;

        .short-logo-icon {
          width: ( 90vw / @base_width ) * 100;
          height: ( 90vw / @base_width ) * 100;
          padding: ( 28vw / @base_width ) * 100 0;
          padding-right:( 25vw / @base_width ) * 100 ;
          background-image: url("img/shortvideodetail/gaoqingLogo.png");
          background-position: center center;
          background-repeat: no-repeat;
          background-size: contain;
        }

        .short-logo-word {
          float: left;
          padding-left: ( 140vw / @base_width ) * 100;
          padding-top: ( 41vw / @base_width ) * 100;

          p:nth-child(1) {
            color: #fff;
            font-size: ( 38vw / @base_width ) * 100;
            transform: translateY(-( 12vw / @base_width ) * 100);
          }

          p:nth-child(2) {
            color: #747474;
            transform: translateY(-( 12vw / @base_width ) * 100);
            font-size: ( 24vw / @base_width ) * 100;
            //padding-top: ( 8vw / @base_width ) * 100;
            padding-left: ( 3vw / @base_width ) * 100;
            letter-spacing: ( 1vw / @base_width ) * 100;
          }
        }

        .openapp {
          float: right;
          width:( 150vw / @base_width ) * 100 ;
          height: ( 62vw / @base_width ) * 100;
          line-height: ( 62vw / @base_width ) * 100;
          text-align: center;
          color: #fff;
          font-size: ( 28vw / @base_width ) * 100;
          border-radius: ( 8vw / @base_width ) * 100;
          margin: ( 44vw / @base_width ) * 100 0;
          background-color: #a80101;
        }
      }

      .video-list {

        .video-everyone {
          font-size: ( 26vw / @base_width ) * 100;
          display: inline-block;
          color: #b5b5b5;
          padding-top: ( 35vw / @base_width ) * 100;
          padding-bottom: ( 25vw / @base_width ) * 100;
        }

        ul {
          list-style: none;

            li {
              position: relative;

            .video-list-img {
              display: inline-block;
              float: left;
              width: ( 298vw / @base_width ) * 100;
              height: ( 180vw / @base_width ) * 100;
              margin-right: ( 30vw / @base_width ) * 100;
              margin-bottom: ( 30vw / @base_width ) * 100;
              position:relative;
              background-image:url(./img/shortvideo/beforeLoadingVideo.png);
              border: none;
            }

            .contentName {
              color: #fff;
              display: inline;
              font-size: ( 30vw / @base_width ) * 100;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              overflow: hidden;
              position: relative;
              top:( 30vw / @base_width ) * 100;;

              span {
                line-height:( 0vw / @base_width ) * 100;; ;
              }
            }

            .vider-list-tags {
              color: #989898;
              display: inline;
              position: relative;
              top:( 40vw / @base_width ) * 100;
              font-size: ( 24vw / @base_width ) * 100;
            }
          }
        }
      }
  }
}