@charset "UTF-8";
/* education_top teacher slider */
/*------------------------------------------------*/

#eduInterview{
  --lightblueColor: #DBE9F0;
  --mainblueColor: #0B3A9E;
  --mainblueColor__hover: #00277a;
}


#eduInterview{
  background-color: #fff;
  position:relative;
  padding: 80px 0;
  @media only screen and (max-width: 767px) {
    padding: 40px 0;
  }
  &:before{
    width:100%;
    height: 500px;
    content: "";
    background-color: var(--lightblueColor);
    position:absolute;
    top: 0;
    left: 0;
    @media only screen and (max-width: 767px) {
      height: 380px;
    }
  }
  .contBox{
    position:relative;
    z-index:2;
    .titleAndTextArea{
      .title{
        text-align: center;
        img{
          width:auto;
          height: 106px;
          @media only screen and (max-width: 767px) {
            width: 100%;
            height: auto;
            max-height: 90px;
          }
        }
      }
      .catch{
        margin-top: 35px;
        font-size: 18px;
        line-height: 1.8;
        text-align: center;
        @media only screen and (max-width: 767px) {
          margin-top: 20px;
          font-size: 14px;
       }
      }
    }
    .interviewSliderArea{
      margin-top: 60px;
      @media only screen and (max-width: 767px) {
        margin-top: 35px;
      }
      .interviewSlider{
        @media only screen and (max-width: 1400px) {
          position:relative;
          &:before,&:after{
            width: 80px;
            height: 100%;
            content: "";
            display: block;
            background-color: #000;
            position:absolute;
            top:0;
            z-index:9;
          }
          &:before{
            left: 0;
            background: #ffffff;
background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
          }
          &:after{
            right: 0;
            background: #ffffff;
background: linear-gradient(90deg, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
transform: rotate(180deg);
          }
          @media only screen and (max-width: 767px) {
            &:before,&:after{
              display: none;
            }
          }
        }
        .slick-dots{
          bottom: -30px;
          @media only screen and (max-width: 767px) {
            bottom: -20px;
          }
          li{
            width: 12px;
            height: 12px;
            margin: 0 7.5px;
            background-color: var(--lightblueColor);
            border-radius: 50%;
            @media only screen and (max-width: 767px) {
              width: 10px;
              height: 10px;
              margin: 0 6px;
            }
            &.slick-active{
              background-color: var(--mainblueColor);
            }
            button{
              font-size: 0;
              &:before{
                display: none;
              }
            }
          }
        }
        .slick-prev,.slick-next{
          width: 50px;
          height: 50px;
          background-color: var(--mainblueColor);
          border-radius: 50%;
          position:absolute;
          z-index: 10;
          &:before{
            content:"";
          }
          &:after{
            width: 8px;
            height: 20px;
            content: "";
            display: block;
            background-image: url(../images/under/education/interview/arrow.svg);
            background-size: 100% auto;
            background-position: center center;
            background-repeat: no-repeat;
            position:absolute;
            top: 50%;
            right: 20px;
            transform: translateY(-50%);
            
          }
          @media only screen and (max-width: 767px) {
            display: none!important;

            width: 35px;
            height: 35px;
            &:after{
              width: 6px;
              height: 16px;
              left: 50%;
              right: auto;
              transform: translateY(-50%) translateX(-50%);
            }
          }
        }
        .slick-prev{
          left: 10px;
        }
        .slick-next{
          right: 10px;
          &:after{
            transform: translateY(-50%) rotate(180deg);
            @media only screen and (max-width: 767px) {
              margin-left:-2px;
            }
          }
        }
        .slick-list{
          padding-bottom:10px!important;
        }
        .slick-track{
          display: flex!important;
        }
        .slick-slide{
          height: auto!important;
        }
        .slide{
          /* width: 515px; */
          margin: 0 7.5px;
          flex-direction: column;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
            padding: 35px 30px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
            @media only screen and (max-width: 1400px) {
              width: 450px;
            }
            @media only screen and (max-width: 767px) {
              margin: 0 4px;
              padding: 20px;
              border-radius: 5px;
            }
            .imgAndTitleWrap{
              display: flex;
              justify-content: space-between;
              align-items: center;
              .img{
                width: 85px;
                overflow: hidden;
                @media only screen and (max-width: 767px) {
                  width: 50px;
                }
                img{
                  border-radius: 50%;
                  object-fit: cover;
                  aspect-ratio: 1 / 1;
                }
              }
              .titleWrap{
                width:calc(100% - (85px + 20px));
                @media only screen and (max-width: 767px) {
                  width:calc(100% - (50px + 12px));
                }
                .title{
                  font-size: 20px;
                  font-weight: bold;
                  line-height: 1.35;
                  color: var(--mainblueColor);
                  @media only screen and (max-width: 767px) {
                    font-size: 16px;
                  }
                }
                .name{
                  margin-top: 12px;
                  font-size: 13px;
                  line-height: 1.3;
                  @media only screen and (max-width: 767px) {
                    margin-top: 10px;
                    font-size: 12px;
                  }
                }
              }
            }
            .textWrap{
              margin-top: 30px;
              padding-bottom: 20px;
              @media only screen and (max-width: 767px) {
                margin-top: 20px;
                padding-bottom: 15px;
              }
              .text{
                font-size: 16px;
                line-height: 1.6;
                @media only screen and (max-width: 767px) {
                  font-size: 14px;
                }
              }
            }
            .moreViewBtnWrap{
              margin-top:auto;
              .moreViewBtn{
                display: block;
                background-color: var(--mainblueColor);
                border-radius: 4px;
                font-size:16px;
                color: #fff;
                text-align: center;
                padding:  15px;
                box-sizing: border-box;
                position:relative;
                transition: background-color 0.3s ease 0s;
                &:after{
                  width: 5px;
                  height: 12px;
                  content: "";
                  display: block;
                  background-image: url(../images/under/education/interview/arrow.svg);
                  background-size: 100% auto;
                  background-position: center center;
                  background-repeat: no-repeat;
                  position:absolute;
                  top: 50%;
                  right: 20px;
                  transform: translateY(-50%) rotate(180deg);
                }
                @media only screen and (max-width: 767px) {
                  font-size: 14px;
                  padding: 12px;
                }
                &:hover{
                  background-color: var(--mainblueColor__hover);
                }
              }
            }
        }
      }
    }
  }
}