.tutorials-head{
  font-size: 20px;
  margin-top: 40px;
  position: relative;
  &::after{
    content: '';
    position: absolute;
    bottom: -5px;
    width: 30px;
    height: 3px;
    background: #2071F4;
    left: 0;
  }
}
.topics{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top: 30px;
  &::after{
    content:'';
    width: 420px;
    height: 0;
  }
  .topics-card{
    cursor: pointer;
    height: 360px;
    width: 420px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 10px 2px #eee;
    margin-bottom: 40px;
    position: relative;
    &:hover{
      background: rgb(255, 251, 251);
    }
    img{
      width: 100px;
      max-width: 100px;
      max-height: 100px;
      margin-bottom: 40px;
      &.topics-card-img{
        width: 84px;
        height: 84px;
        position: absolute;
        left: 0;
        top: 0;
      }
    }
    .topics-title{
      font-size: 20px;
      position: relative;
      margin-bottom: 20px;
      color: #686868;
      &::after{
        position: absolute;
        content: '';
        width: 36px;
        height: 3px;
        background: #2071F4;
        bottom: -10px;
        left: 50%;
        transform: translateX(-50%);
      }
    }
    .topics-des{
      font-size: 16px;
      line-height: 20px;
      color: #B3B3B3;
      width: 314px;
      word-break: break-word;
    }
  }
}
.tutorials-box>div:first-child>ul{
  list-style: none;
  margin: 0;
  width: 300px;
  padding: 0;
  margin-bottom: 5px;
  li{
    cursor: pointer;
    overflow: hidden;
    transition: all .3s;
    user-select: none;
    text-overflow: ellipsis;
    white-space: nowrap;
    &:not(:first-child){
      height: 0;
    }
    &:first-child{
      font-weight: 600;
      font-size: 16px;
      &::before{
        border-right: 1px solid #000;
        transform: translateY(-3px) translateX(3px) rotate(45deg) ;
        transition: all .3s;
      }
    }
    &::before{
        content: '';
        display: inline-block;
        width: 8px;
        height: 8px;
        border-bottom: 1px solid #000;
        transform: translateY(-5px) translateX(5px);
        margin-right: 8px;
    }
    &:hover{
      // text-decoration: underline;
      color: #134699;
      font-weight: 600;
    }
  }
  &.open{
    li{
      &:first-child{
        &::before{
          transform: translateY(0) translateX(3px) rotate(-135deg) ;
        }
      }
      &:not(:first-child){
        height: 24px;
      }
    }
  }
}
.tutorials-main{
  img{
    max-width: 100%;
  }
}