@font-face
 font-family: 'Helvetica'
 src: url('../font/Helvetica-Light.otf')
h1, h2, h3, h4, h5
  font-weight: lighter
body
  margin: 0
  padding: 0
  padding-top: 50px
  font-family: 'Helvetica'
  background-color: #222
  color: #ccc
  .page-title
    text-align: center
  .sample-title
    text-align: center
    margin-top: 30px
    margin-bottom: 30px
  .slider-container.first-sample
    width: 900px
    height: 400px
    border: 5px solid #1c1c1c
    // border: 5px solid purple
    border-radius: 3px
    margin: 0 auto 50px
    position: relative
    .slider
      height: 100%
      .slide-wrapper
        overflow: hidden
        -webkit-user-select: none
        -moz-user-select: none
        -ms-user-select: none
        user-select: none

      .slide-tracker
        // border: 1px solid red
        .my-fr-current
          .item
            &::before
              background-color: rgba(#000, 0)
      .item
        width: 100%
        height: 100%
        overflow: hidden
        position: relative
        &::before
          content: ''
          position: absolute
          left: 0
          top: 0
          width: 100%
          height: 100%
          background-color: rgba(#000, .8)
          transition: background-color 1s
        img
          width: 100%
          height: 100%
          object-fit: cover
          object-position: center center
    .prev-slide, .next-slide
      position: absolute
      top: 50%
      transform: translateY(-50%)
      font-size: 50px
      cursor: pointer
      color: #888
      transition: color .3s
      &:hover
        color: #ccc
    .prev-slide
      left: -70px
    .next-slide
      right: -70px
