@import "variables";
.block-meetourcoachs-default {
    margin-bottom: @margin-bottom-block-large;
  h2 {
    text-align: center;
    color: #222222;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 70px;
  }
  .sp-slides {
    .image-123 {
      .slider {
        .slick-list {
          @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
            height: 490px;
          }

          @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
            height: 450px;
          }

          @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
            height: 450px;
          }

          @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
            height: 510px;
          }
          @media (min-width: @screen-md-min)  and (max-width: @screen-md-max) { // 992 ~ 1200
            height: 400px;
          }
          .slick-track {
            .slick-slide {
              margin-right: 15px;
              margin-left: 15px;
              .wrapper-employee {
                overflow: hidden;
                position: relative;
                width: 100%;
                height: 485px;
                margin-bottom: 30px;
                border: @border-gray;
                transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
                @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
                  height: 440px;
                }
                @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
                  height: 390px;
                }
                @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
                  height: 440px;
                }
                @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
                  height: 480px;
                }
                @media (min-width: @screen-md-min)  and (max-width: @screen-md-max) { // 992 ~ 1200
                  height: 390px;
                }
                &:hover {
                  .tes-content {
                    height: 209px;
                    background-color: @text-color-p7;
                    padding-top: 15px;
                    h3.name {
                      color: @text-color-4;
                      margin-bottom: 5px;
                    }
                    .content{
                      display: block;
                      p{
                        color: @text-color-p4;
                      }
                    }
                    p.category{
                      color: @text-color-4;
                      margin-bottom: 15px;
                    }
                    .team-social{
                      background-color: @text-color-p7;
                      a{
                        i{
                          color: @text-color-p4;
                        }
                      }
                    }
                  }

                }
                .cover-image-service-trainer {
                  width: 100%;
                  height: 420px;
                  position: absolute;
                  top: 0;
                  left: 0;
                  @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
                    height: 370px;
                  }
                  @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
                    height: 300px;
                  }
                  @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
                    height: 350px;
                  }
                  @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
                    height: 390px;
                  }
                  @media (min-width: @screen-md-min)  and (max-width: @screen-md-max) { // 992 ~ 1200
                    height: 300px;
                  }

                  div {
                    width: 100%;
                    height: 100%;
                    padding-bottom: calc(100% * 420 / 380);
                    position: absolute;
                    @media (min-width: @screen-sm-min)  and (max-width: @screen-sm-max) { //768 ~992
                      padding-bottom: calc(100% * 300 / 274);
                    }
                    img {
                      position: absolute;
                      width: 100%;
                      height: 100%;
                      top: 50%;
                      left: 50%;
                      transform: translate(-50%, -50%);
                      object-fit: cover;
                      object-position: center;
                    }
                  }
                }
                .tes-content {
                  color: @text-color-4;
                  transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
                  position: absolute;
                  bottom: 0;
                  left: 0;
                  width: 100%;
                  height: 88px;
                  background-color: @text-color-p6;
                  padding: 10px 20px 15px 20px;
                  h3.name {
                    color: @text-color-1;
                    font-size: @font-size-h3;
                    font-weight: @font-weight-semibold;
                    line-height: @line-height-computed-h3;
                    margin-bottom: 10px;
                  }
                  p.category{
                    color: @text-color-2;
                    font-size: @font-size-medium;
                    line-height: @line-height-computed-h4;
                  }
                  .team-social {
                    display: flex;
                    background-color: @text-color-p6;
                    justify-content: flex-end;
                    align-items: flex-end;
                    width: 50%;
                    padding: 0 20px;
                    position: absolute;
                    bottom: 10px;
                    right: 0;
                    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
                    a {
                      display: inline-block;
                      & + a {
                        margin-left: 10px;
                      }
                      i {
                        color: @text-color-2;
                        transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
                        font-size: 18px;
                      }
                    }
                  }
                  .content {
                    display: none;
                    transition: all 0.3s cubic-bezier(.25, .8, .25, 1);
                    p {
                      color: @text-color-2;
                      font-size: @font-size-base;
                      display: -webkit-box;
                      -webkit-line-clamp: 3;
                      -webkit-box-orient: vertical;
                      height: 68px;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      @media (min-width: @screen-xxxs-min) and (max-width: @screen-xxxs-max) { // 0 ~ 409
                        height: 61px;
                      }
                      @media (min-width: @screen-xxs-min)  and (max-width: @screen-xxs-max) { // 409 ~ 600
                        height: 61px;
                      }
                      @media (min-width: @screen-xs-min)  and (max-width: @screen-xs-max) { // 600 ~ 768
                        height: 61px;
                      }
                    }
                  }
                }


              }
            }
          }
        }
      }
    }
  }
}