@charset "UTF-8";
/* --------------------- sec 1 start--------------------- */
.sec_1 .container .wrapper .lawyer_area ul {
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(40px, 4.17vw, 80px) clamp(10px, 1.04vw, 20px);
}
.sec_1 .container .wrapper .lawyer_area ul li:nth-child(4n+1) {
  transition-delay: 0.1s;
}
.sec_1 .container .wrapper .lawyer_area ul li:nth-child(4n+2) {
  transition-delay: 0.2s;
}
.sec_1 .container .wrapper .lawyer_area ul li:nth-child(4n+3) {
  transition-delay: 0.3s;
}
.sec_1 .container .wrapper .lawyer_area ul li:nth-child(4n+4) {
  transition-delay: 0.4s;
}
.sec_1 .container .wrapper .lawyer_area ul li:hover dl dt {
  display: inline-block;
}
.sec_1 .container .wrapper .lawyer_area ul li:hover dl dt::before {
  width: 100%;
}
.sec_1 .container .wrapper .lawyer_area ul li:hover dl dt span::after {
  width: 100%;
}
.sec_1 .container .wrapper .lawyer_area ul li .thumb_area {
  position: relative;
  height: unset;
  padding-bottom: 127%;
  background: #e5e5e5;
}
.sec_1 .container .wrapper .lawyer_area ul li .thumb_area img {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 96%;
}
.sec_1 .container .wrapper .lawyer_area ul li dl dt {
  font-weight: 700;
  font-size: 18px;
  position: relative;
}
.sec_1 .container .wrapper .lawyer_area ul li dl dt::before {
  position: absolute;
  content: "";
  width: 0%;
  height: 2px;
  bottom: 0;
  right: 0;
  background: #1e3960;
  transition: 0.4s;
}
.sec_1 .container .wrapper .lawyer_area ul li dl dt span {
  font-size: clamp(28px, 1.88vw, 36px);
  line-height: 1.19; /* 43px */
  padding-right: 0.52vw; /*10px*/
  position: relative;
}
.sec_1 .container .wrapper .lawyer_area ul li dl dt span::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  color: #1e3960;
  overflow: hidden;
  transition: 0.4s;
}
.sec_1 .container .wrapper .lawyer_area ul li dl dd {
  font-size: clamp(15px, 0.89vw, 17px);
  color: #555555;
}

/* --------------------- RWD --------------------- */
@media (max-width: 1100px) {
  .sec_1 .container .wrapper .lawyer_area ul {
    grid-template-columns: repeat(3, 1fr);
  }
  .sec_1 .container .wrapper .lawyer_area ul li:nth-child(3n+1) {
    transition-delay: 0.1s;
  }
  .sec_1 .container .wrapper .lawyer_area ul li:nth-child(3n+2) {
    transition-delay: 0.2s;
  }
  .sec_1 .container .wrapper .lawyer_area ul li:nth-child(3n+3) {
    transition-delay: 0.3s;
  }
}
@media (max-width: 750px) {
  .sec_1 .container .wrapper .lawyer_area ul {
    grid-template-columns: repeat(2, 1fr);
    gap: 10.67vw 2.67vw;
  }
  .sec_1 .container .wrapper .lawyer_area ul li:nth-child(2n+1) {
    transition-delay: 0.1s;
  }
  .sec_1 .container .wrapper .lawyer_area ul li:nth-child(2n+2) {
    transition-delay: 0.2s;
  }
  .sec_1 .container .wrapper .lawyer_area ul li dl dt {
    font-size: clamp(15px, 4vw, 30px);
  }
  .sec_1 .container .wrapper .lawyer_area ul li dl dt span {
    font-size: clamp(21px, 6.13vw, 46px);
    padding-right: 1.33vw;
  }
  .sec_1 .container .wrapper .lawyer_area ul li dl dd {
    padding-top: 1.87vw; /*14px*/
    font-size: clamp(12px, 3.47vw, 26px);
    line-height: 1.38; /* 36px */
  }
}
/* 버튼 hover용 */
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #1e3960;
  }
}
@keyframes pulse_green {
  0% {
    box-shadow: 0 0 0 0 #82a006;
  }
}
@keyframes pulse_red {
  0% {
    box-shadow: 0 0 0 0 #d65047;
  }
}
@keyframes pulse_yellow {
  0% {
    box-shadow: 0 0 0 0 #eeab00;
  }
}
@keyframes pulse_white {
  0% {
    box-shadow: 0 0 0 0 #fff;
  }
}
@keyframes pulse_sky_blue {
  0% {
    box-shadow: 0 0 0 0 #4380d6;
  }
}