@charset "UTF-8";
/* index certificate 무한 루프 */
/* 원본용 */
/*
@keyframes slide01 {
  0% {
    transform: translateX(-100%);
  }
  50% {
    transform: translateX(0%);
  }
  50.01% {
    transform: translateX(-200%);
  }
  100% {
    transform: translateX(-100%);
  }
}
*/
/* 복제용 */
/*
@keyframes slide02 {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}
*/
/* 원본용 */
@keyframes slide01 {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-100%);
  }
  50.01% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}
/* 복제용 */
@keyframes slide02 {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-200%);
  }
}
/* 버튼 hover용 */
@keyframes pulse_kakao {
  0% {
    box-shadow: 0 0 0 0 #ffba33;
  }
}
@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 #7d573d;
  }
}
@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;
  }
}
.breadcrumb {
  padding-top: clamp(160px, 10.94vw, 210px);
}

/* --------------------- sec 1 start --------------------- */
.sec_1 .container .wrapper .lawyer_area {
  overflow: hidden;
  position: relative;
}
.sec_1 .container .wrapper .lawyer_area::before, .sec_1 .container .wrapper .lawyer_area::after {
  position: absolute;
  bottom: 0;
  right: 0;
}
.sec_1 .container .wrapper .lawyer_area::before {
  content: "";
  width: 100%;
  background: #f5f5f5;
  height: clamp(200px, 15.63vw, 300px);
  z-index: -2;
}
.sec_1 .container .wrapper .lawyer_area::after {
  z-index: -1;
  font-size: clamp(99px, 9.38vw, 180px);
  line-height: 1.2; /* 216px */
  font-weight: 600;
  letter-spacing: -0.05em;
  content: "Attoryney at Law";
  color: #e4e4e4;
  transform: translateX(3%);
}
.sec_1 .container .wrapper .lawyer_area .inner {
  position: relative;
}
.sec_1 .container .wrapper .lawyer_area .inner img {
  width: clamp(380px, 28.65vw, 550px);
}
.sec_1 .container .wrapper .lawyer_area .inner h3 {
  position: absolute;
  left: calc(clamp(340px, 28.65vw, 550px) + 8.85vw);
  bottom: clamp(200px, 15.63vw, 300px);
  font-size: clamp(24px, 1.77vw, 34px);
  line-height: 1.21; /* 41px */
  font-weight: 400;
}
.sec_1 .container .wrapper .lawyer_area .inner h3 strong {
  font-size: clamp(40px, 3.13vw, 60px);
  line-height: 1.2; /* 72px */
  font-weight: 600;
  padding-right: 1.04vw;
}
.sec_1 .container .wrapper .tab_list {
  position: sticky;
  top: 30px;
  background: #fff;
  z-index: 1;
}
.sec_1 .container .wrapper .info_area .info_box {
  margin-right: 7.81vw;
  width: calc(100% - 7.81vw - clamp(200px, 18.23vw, 350px));
}
.sec_1 .container .wrapper .info_area .info_box ul {
  border-bottom: 2px solid #d9d9d9;
}
.sec_1 .container .wrapper .info_area .info_box ul .list_tit {
  font-size: clamp(24px, 1.56vw, 30px);
  line-height: 1.2; /* 36px */
  font-weight: 600;
}
.sec_1 .container .wrapper .info_area .info_box ul:not(.list_certificate) li:not(.list_tit) {
  font-size: clamp(18px, 1.04vw, 20px);
  line-height: 1.2; /* 24px */
  font-weight: 400;
  padding-left: 48px;
  padding-bottom: 15px;
  position: relative;
}
.sec_1 .container .wrapper .info_area .info_box ul:not(.list_certificate) li:not(.list_tit)::before {
  position: absolute;
  top: 5px;
  left: 0;
  content: "";
  width: 15px;
  height: 15px;
  border-radius: 100%;
  background: #77513b;
  margin-right: 33px;
}
.sec_1 .container .wrapper .info_area .info_box ul.list_certificate .list_item {
  overflow-x: auto;
  overflow-y: hidden;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.sec_1 .container .wrapper .info_area .info_box ul.list_certificate .list_item div dl {
  margin-right: clamp(15px, 1.04vw, 20px);
  width: clamp(120px, 8.33vw, 160px);
}
.sec_1 .container .wrapper .info_area .info_box ul.list_certificate .list_item div dl dt img {
  width: clamp(120px, 8.33vw, 160px);
  border: 1px solid #d9d9d9;
}
.sec_1 .container .wrapper .info_area .info_box ul.list_certificate .list_item div dl dd {
  padding: 15px 0 35px;
  font-size: 14px;
  line-height: 1.21; /* 17px */
  font-weight: 400;
}
.sec_1 .container .wrapper .info_area .link_box {
  width: clamp(200px, 18.23vw, 350px);
  padding-bottom: 50px;
}
.sec_1 .container .wrapper .info_area .link_box .inner {
  position: sticky;
  z-index: 2;
  top: 250px;
}
.sec_1 .container .wrapper .info_area .link_box a {
  border: 1px solid #d9d9d9;
  font-size: clamp(17px, 1.04vw, 20px);
  font-weight: 600;
  line-height: clamp(55px, 3.65vw, 70px);
  padding: 0 clamp(20px, 1.82vw, 35px);
  margin-bottom: 20px;
  transition: 0.3s;
}
.sec_1 .container .wrapper .info_area .link_box a span {
  width: 100%;
  background-repeat: no-repeat;
  background-position: center right;
  background-size: auto;
  background-image: url(../img/right_gray_arrow.png);
}
.sec_1 .container .wrapper .info_area .link_box a:hover {
  box-shadow: 0 0 0 0.4em transparent;
  animation: pulse 1s;
}

/* --------------------- RWD --------------------- */
@media (max-width: 900px) {
  .sec_1 .container .wrapper .info_area .info_box {
    width: 100%;
    margin-right: 0;
  }
  .sec_1 .container .wrapper .info_area .link_box {
    display: none;
  }
}
@media (max-width: 720px) {
  .breadcrumb {
    padding-top: clamp(120px, 33.33vw, 240px);
    padding-bottom: clamp(80px, 13.89vw, 100px);
  }
  .sec_1 .container .wrapper .lawyer_area::before {
    height: clamp(100px, 38.33vw, 276px);
  }
  .sec_1 .container .wrapper .lawyer_area::after {
    font-size: clamp(30px, 22.22vw, 160px);
    line-height: 1.2; /* 192px */
    white-space: nowrap;
    right: unset;
    left: -10%;
  }
  .sec_1 .container .wrapper .lawyer_area .inner img {
    width: clamp(100px, 55.56vw, 400px);
  }
  .sec_1 .container .wrapper .lawyer_area .inner h3 {
    bottom: clamp(100px, 38.33vw, 276px);
    right: 5.56vw;
    left: unset;
    font-size: clamp(12px, 3.33vw, 24px);
    line-height: 1.21; /* 29px */
  }
  .sec_1 .container .wrapper .lawyer_area .inner h3 strong {
    font-size: clamp(20px, 5.56vw, 40px);
    line-height: 1.2; /* 48px */
    padding-left: 1.39vw;
  }
  .sec_1 .container .wrapper .tab_list {
    top: clamp(40px, 13.89vw, 100px);
  }
  .sec_1 .container .wrapper .info_area .info_box ul {
    border-bottom-width: clamp(3px, 0.56vw, 4px);
  }
  .sec_1 .container .wrapper .info_area .info_box ul .list_tit {
    font-size: clamp(18px, 5vw, 36px);
    line-height: 1.19; /* 43px */
  }
  .sec_1 .container .wrapper .info_area .info_box ul:not(.list_certificate) li:not(.list_tit) {
    font-size: clamp(15px, 3.89vw, 28px);
    line-height: 1.21; /* 34px */
    padding-bottom: clamp(10px, 2.78vw, 20px);
    padding-left: clamp(24px, 7.5vw, 54px);
  }
  .sec_1 .container .wrapper .info_area .info_box ul:not(.list_certificate) li:not(.list_tit)::before {
    width: clamp(8px, 2.78vw, 20px);
    height: clamp(8px, 2.78vw, 20px);
    top: 1.25vw;
  }
  .sec_1 .container .wrapper .info_area .info_box ul.list_certificate .list_item:nth-child(2) div dl {
    margin-right: clamp(15px, 5.56vw, 40px);
    width: clamp(120px, 41.67vw, 300px);
  }
  .sec_1 .container .wrapper .info_area .info_box ul.list_certificate .list_item:nth-child(2) div dl dt img {
    width: clamp(120px, 41.67vw, 300px);
  }
  .sec_1 .container .wrapper .info_area .info_box ul.list_certificate .list_item:last-child div dl {
    margin-right: clamp(20px, 2.78vw, 20px);
    width: clamp(90px, 33.33vw, 240px);
  }
  .sec_1 .container .wrapper .info_area .info_box ul.list_certificate .list_item:last-child div dl dt img {
    width: clamp(90px, 33.33vw, 240px);
  }
  .sec_1 .container .wrapper .info_area .info_box ul.list_certificate .list_item div dl dt img {
    border-width: 2px;
  }
  .sec_1 .container .wrapper .info_area .info_box ul.list_certificate .list_item div dl dd {
    padding: clamp(15px, 4.17vw, 30px) 0 clamp(30px, 8.33vw, 60px);
    font-size: clamp(15px, 3.89vw, 28px);
    line-height: 1.21; /* 34px */
  }
}