@mixin img-list($list-name) {
  .#{$list-name} {
    position: absolute;
    top: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    .#{$list-name}-li {
      position: relative;
      float: left;
      overflow: hidden;
      .#{$list-name}-li-img {
        width: 100%;
        border-radius: 8px;
      }
      .#{$list-name}-li-title {
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 0;
        padding-left: 20px;
        background: rgba(0, 0, 0, 0.3);
        line-height: 40px;
        transition: height 0.3s ease-in-out 0s;
        //-webkit-transition: height .8s ease-in-out .5s;
      }
      .#{$list-name}-li-transition {
        height: 40px;
      }
    }
  }
}
@mixin ne-carousel {
  .ne-carousel-warp {
    position: relative;
    .left-arrow-container,
    .right-arrow-container {
      position: absolute;
      top: 50%;
      z-index: 10;
      width: 24px;
      height: 24px;
      background-size: 100%;
      transform: translateY(-50%);
      cursor: pointer;
    }

    .left-arrow-container {
      left: 0;
      margin-left: 10px;
    }
    .right-arrow-container {
      right: 0;
      margin-right: 10px;
    }
    .arrow {
      z-index: 10;
      width: 24px;
      height: 24px;
      background-size: 100%;
    }
    .left-arrow {
      background: url('data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAStJREFUSA21lj0OgkAQhf3B2BkrSDwDtJ7BxMpbWGvvDbT2IibeAxJCZWUBhQWNP2TV91QSYsEOLEzyYOMy39udDYzdzjf6uI2gIdT7/lT7+kTmHUoh1cWFcBviuMl4AZYQPoYGTZJ/rM/iWQ6Wpa0Y0sC05mWL67UJ/xjXMoiiaBEEwbxs6fmclQ+k9ziOV7Ztr5VSZ+QcdHmVdpDDAc3CMNzo4JwXGxThKM/S87xjYwZ14aIdmMBFBpIylD2jPQPHcXZJkmwBGbiuu/d9f1YG/J/TGjDBxERkYGLCL96EAGnkh84XzbKsqS6v8pvMcuFTccqy7KGDc77yDiTQ4jPiMygmVRnTgD20rXjSgA26rbjTgN2fDbrpIDNl0+fgCnFMmf67YMlv0AVSb2HPbWEEttEzAAAAAElFTkSuQmCC')
        no-repeat center;
    }
    .right-arrow {
      background: url('data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAURJREFUSA21VjFugzAUbRKhTI3apULII1NzCBJO0hNUYmLKwNaBnYVbpFdA4gJduldIGRIpSxOkOH0PkqVS7GDwk55tMH7v8zF8Rg8tJuhm4BQct6eMW4mVR3APnkZoKP4CcjwkzhDbUPwJdIZUvmg1wTMdTIstTGnQN+eq4MY2xRtjrUGWZaKqqvcoip5Vod6a40N+vDXJ83mev7muG4dhuKzrel0UxUF1/f85rYGU8hviC8dxXoMgWMDks4uJ1qAsywNFKW5iojXgLTNiU5O7DPqYaHcRxfvCg4CWcRzPkaavM8Cex/esY3A2xamtNsALZhr5NXC1Ad7iD4O0XMU97S7yff9HCLFNkmSVpumOt9wF/GY3eeqyqMu11rcpDVhDbUHSgAXaFo40YPVngR4a1NxzF3HwC3JM9v27YMpZM7bg6Q//rKolnsCHJwAAAABJRU5ErkJggg==')
        no-repeat center;
    }
    .container {

      @include img-list(container-slide);
      display: flex;
      position: relative;
      overflow: hidden;
      align-items: center;
      justify-content: space-between;
      width: 100%;
      height: auto;
      margin: 0 auto;
      border-radius: 8px;
      cursor: pointer;
      .container-glimmer {
        width: 100%;
        margin: 0;
        padding: 0;
        .container-glimmer-li {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
        }
        .container-glimmer-li-title {
          position: absolute;
          bottom: 0;
          left: 0;
          width: 100%;
          height: 0;
          padding-left: 20px;
          background: rgba(0, 0, 0, 0.3);
          line-height: 40px;
          transition: height 0.3s ease-in-out 0s;
          //-webkit-transition: height .8s ease-in-out .5s;
        }
        .container-glimmer-li-transition {
          height: 40px;
        }
      }
      .container-custom {
        position: relative;
        width: 100%;
        min-height: 80px;
        .container-custom-inner {
          .custom-slide-slick {
            float: left;
          }
        }
      }
      .dots-index-container {
        display: flex;
        position: absolute;
        bottom: 0;
        justify-content: center;
        width: 100%;
        margin: 0 auto;
        .dots {
          margin-bottom: 15px;
          .inner {
            .dots-list {
              display: flex;

              position: relative;
              flex-direction: row;
              .dot-item {
                display: inline-block;
                width: 9px;
                height: 9px;
                margin-right: 8px;
                border: 1px solid #e3e3e3;
                border-radius: 10px;
                background: white;
              }
              &:last-child {
                margin-right: 0;
              }
              .on {
                border: 1px solid #e25050;
                background: #e25050;
              }
            }
          }
        }
      }
    }
    .img-index-container {
      position: relative;
      overflow: hidden;
      width: 100%;
      margin: 10px auto 0;
      .smallImg {
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        box-sizing: border-box;
        transition: all 0.2s ease-in-out 0.1s;
        &-item {
          display: flex;
          overflow: hidden;
          align-items: center;
          max-height: 64px;
          cursor: pointer;
        }
        &-on {
          border: 4px solid #337ab7;
        }
      }
    }
    @keyframes animate {
      0% {
        left: 0;
      }
      100% {
        left: -100%;
      }
    }
  }
}