@charset "UTF-8";
/* --------------------- 공통--------------------- */
.tit_area {
  position: relative;
}
.tit_area span {
  font-size: clamp(24px, 1.56vw, 30px);
  font-weight: 700;
  color: #bc9c5f;
  padding-bottom: 20px;
  font-family: "Pretendard";
  letter-spacing: 0px;
}
.tit_area h2 {
  font-size: clamp(36px, 2.71vw, 52px);
  font-weight: 700;
}
.tit_area p {
  font-size: clamp(18px, 1.04vw, 20px);
  color: #444;
  line-height: 1.5;
}
.tit_area .swiper_controller {
  position: absolute;
  right: 0;
  bottom: 0;
}
.tit_area .swiper_controller button {
  width: clamp(35px, 2.5vw, 48px);
  height: clamp(35px, 2.5vw, 48px);
  border-radius: 50%;
  background-color: #fff;
  border: 1px solid #999;
  position: relative;
}
.tit_area .swiper_controller button::after {
  content: "";
  background-image: url(../img/swiper_right_gray_arrow.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  width: 6px;
  height: 12px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.tit_area .swiper_controller .prev_btn {
  margin-right: clamp(10px, 0.83vw, 16px);
  transform: rotate(180deg);
}

/* --------------------- sec 1 start--------------------- */
.sec_1 {
  background-image: url(../img/company_bg1.png);
  background-repeat: no-repeat;
  background-size: 50% auto;
  background-position: center right;
}
.sec_1 .container .wrapper {
  position: relative;
}
.sec_1 .container .wrapper .tit_area p {
  width: fit-content;
}
.sec_1 .container .wrapper .swiper_company .swiper-container {
  overflow: hidden;
}
.sec_1 .container .wrapper .swiper_company .swiper-container .swiper-wrapper .swiper-slide {
	height: clamp(235px, 13.02vw, 250px);
}
.sec_1 .container .wrapper .swiper_company .swiper-container .swiper-wrapper .swiper-slide .swiper_link {
	height: 100%;
  border: 1px solid #ddd;
  border-radius: 10px;
  padding: clamp(30px, 2.08vw, 40px);
  background-color: #fff;
  transition: 0.3s;
}
.sec_1 .container .wrapper .swiper_company .swiper-container .swiper-wrapper .swiper-slide .swiper_link dl span {
  font-size: clamp(16px, 0.94vw, 18px);
  color: #fff;
  background-color: #bc9c5f;
  font-weight: 700;
  padding: clamp(5px, 0.36vw, 7px) clamp(10px, 0.78vw, 15px);
  width: fit-content;
  border-radius: 4px;
}
.sec_1 .container .wrapper .swiper_company .swiper-container .swiper-wrapper .swiper-slide .swiper_link dl dt {
  font-size: clamp(22px, 1.35vw, 26px);
  font-weight: 700;
  line-height: 1.5;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  padding-top: 0;
}
.sec_1 .container .wrapper .swiper_company .swiper-container .swiper-wrapper .swiper-slide .swiper_link dl dd {
  font-size: clamp(16px, 0.94vw, 18px);
  color: #999;
  line-height: 1.5;
  word-break: break-all;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.sec_1 .container .wrapper .swiper_company .swiper-container .swiper-wrapper .swiper-slide:hover .swiper_link {
  background-color: #bc9c5f;
}
.sec_1 .container .wrapper .swiper_company .swiper-container .swiper-wrapper .swiper-slide:hover .swiper_link dl span {
  color: #bc9c5f;
  background-color: #fff;
}
.sec_1 .container .wrapper .swiper_company .swiper-container .swiper-wrapper .swiper-slide:hover .swiper_link dl dt {
  color: #fff;
}
.sec_1 .container .wrapper .swiper_company .swiper-container .swiper-wrapper .swiper-slide:hover .swiper_link dl dd {
  color: #fff;
}

/* --------------------- sec 2 start--------------------- */
.sec_2 {
  background-color: #f7f7f7;
}
.sec_2 .container .wrapper .cont_area ul .list_item {
  width: calc((100% - clamp(40px, 3.13vw, 60px)) / 3);
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid #ddd;
  transition: opacity 1s ease, transform 1s ease, box-shadow 0.3s ease;
}
.sec_2 .container .wrapper .cont_area ul .list_item:nth-child(2) {
  transition-delay: 0.1s;
}
.sec_2 .container .wrapper .cont_area ul .list_item:nth-child(3) {
  transition-delay: 0.2s;
}
.sec_2 .container .wrapper .cont_area ul .list_item p {
  background-color: #fff;
  font-size: clamp(14px, 1.04vw, 20px);
  font-weight: 700;
  padding: clamp(12px, 1.04vw, 20px) clamp(15px, 1.56vw, 30px);
}
.sec_2 .container .wrapper .cont_area ul .list_item p::before {
  content: "";
  width: clamp(13px, 0.94vw, 18px);
  height: clamp(8px, 0.68vw, 13px);
  background-image: url(../img/company_check_ico.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  margin-right: clamp(8px, 0.73vw, 14px);
}
.sec_2 .container .wrapper .cont_area ul .list_item .img_area {
  height: clamp(200px, 13.02vw, 250px);
}
.sec_2 .container .wrapper .cont_area ul .list_item .img_area img {
  height: 100%;
  object-fit: cover;
}
.sec_2 .container .wrapper .cont_area ul .list_item:hover {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}

/* --------------------- sec 3 start--------------------- */
.sec_3 .container .wrapper {
  position: relative;
}
.sec_3 .container .wrapper .swiper_lawyer .swiper-container {
  overflow: hidden;
}
.sec_3 .container .wrapper .swiper_lawyer .swiper-container .swiper-wrapper .swiper-slide .swiper_link .img_area {
  height: clamp(360px, 23.96vw, 460px);
  background-color: #e5e5e5;
  border-radius: 10px;
  overflow: hidden;
}
.sec_3 .container .wrapper .swiper_lawyer .swiper-container .swiper-wrapper .swiper-slide .swiper_link .img_area img {
  height: 100%;
  object-fit: cover;
}
.sec_3 .container .wrapper .swiper_lawyer .swiper-container .swiper-wrapper .swiper-slide .swiper_link h3 {
  font-size: clamp(16px, 0.94vw, 18px);
  font-weight: 700;
  width: fit-content;
  position: relative;
  transition: 0.3s;
  padding-bottom: 3px;
}
.sec_3 .container .wrapper .swiper_lawyer .swiper-container .swiper-wrapper .swiper-slide .swiper_link h3::before {
  content: "";
  width: 0;
  height: 2px;
  background-color: #bc9c5f;
  display: block;
  position: absolute;
  bottom: 0;
  right: 0;
  transition: 0.4s;
}
.sec_3 .container .wrapper .swiper_lawyer .swiper-container .swiper-wrapper .swiper-slide .swiper_link h3 span {
  font-size: clamp(26px, 1.88vw, 36px);
  margin-right: 5px;
  transition: 0.3s;
}
.sec_3 .container .wrapper .swiper_lawyer .swiper-container .swiper-wrapper .swiper-slide .swiper_link p {
  font-size: clamp(14px, 0.83vw, 16px);
  color: #555;
}
.sec_3 .container .wrapper .swiper_lawyer .swiper-container .swiper-wrapper .swiper-slide:hover .swiper_link h3 {
  color: #bc9c5f;
}
.sec_3 .container .wrapper .swiper_lawyer .swiper-container .swiper-wrapper .swiper-slide:hover .swiper_link h3::before {
  width: 100%;
}
.sec_3 .container .wrapper .swiper_lawyer .swiper-container .swiper-wrapper .swiper-slide:hover .swiper_link h3 span {
  color: #bc9c5f;
}

.sec_4 .container .wrapper .counsel_area {
  border-radius: 10px;
  padding: clamp(50px, 3.75vw, 72px) 0;
  background-image: url(../img/company_bg2.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.sec_4 .container .wrapper .counsel_area .left_cont {
  padding-right: clamp(35px, 4.17vw, 80px);
  position: relative;
}
.sec_4 .container .wrapper .counsel_area .left_cont::after {
  content: "";
  width: 1px;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.1);
  display: block;
  position: absolute;
  top: 0;
  right: 0;
}
.sec_4 .container .wrapper .counsel_area .left_cont h4 {
  font-size: clamp(22px, 1.56vw, 30px);
  font-weight: 700;
  color: #fff;
  line-height: 1.3;
}
.sec_4 .container .wrapper .counsel_area .left_cont p {
  font-size: clamp(14px, 0.94vw, 18px);
  color: #aaa;
  line-height: 1.6;
}
.sec_4 .container .wrapper .counsel_area .right_cont {
  flex-direction: column;
  padding-left: clamp(30px, 4.17vw, 80px);
}
.sec_4 .container .wrapper .counsel_area .right_cont span {
  font-size: clamp(13px, 0.94vw, 18px);
  color: #fff;
  font-weight: 200;
}
.sec_4 .container .wrapper .counsel_area .right_cont span::before {
  content: "";
  width: 18px;
  height: 13px;
  background-image: url(../img/check_ico.png);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  margin-right: 10px;
}
.sec_4 .container .wrapper .counsel_area .right_cont .call {
  font-size: clamp(30px, 2.5vw, 48px);
  font-weight: 700;
  color: #fff;
}
.sec_4 .container .wrapper .counsel_area .right_cont .counsel_btn {
  width: clamp(110px, 8.85vw, 170px);
  font-size: clamp(14px, 0.94vw, 18px);
  font-weight: 700;
  color: #fff;
  background-color: #0f394e;
  padding: clamp(8px, 0.68vw, 13px);
  border-radius: 4px;
}

/* --------------------- RWD --------------------- */
@media (max-width: 900px) {
  .sec_3 .container .wrapper .swiper_lawyer .swiper-container .swiper-wrapper .swiper-slide .swiper_link .img_area {
    height: 500px;
  }
}
@media (max-width: 800px) {
  .sec_4 .container .wrapper .counsel_area {
    flex-direction: column;
    align-items: flex-start;
    padding: 50px;
  }
  .sec_4 .container .wrapper .counsel_area .left_cont {
    padding-right: 0;
  }
  .sec_4 .container .wrapper .counsel_area .left_cont::after {
    display: none;
  }
  .sec_4 .container .wrapper .counsel_area .right_cont {
    padding-left: 0;
    margin-top: 30px;
  }
}
@media (max-width: 750px) {
  .tit_area {
    position: unset;
  }
  .tit_area span {
    font-size: clamp(20px, 4.53vw, 34px);
    padding-bottom: clamp(15px, 4vw, 30px);
  }
  .tit_area h2 {
    font-size: clamp(26px, 6.67vw, 50px);
    word-break: break-all;
  }
  .tit_area p {
    font-size: clamp(16px, 4vw, 30px);
  }
  .tit_area .swiper_controller {
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
  }
  .tit_area .swiper_controller button {
    width: clamp(35px, 9.33vw, 70px);
    height: clamp(35px, 9.33vw, 70px);
  }
  .tit_area .swiper_controller button::after {
    width: clamp(7px, 1.87vw, 14px);
    height: clamp(11px, 2.93vw, 22px);
    background-image: url(../img/swiper_mo_right_gray_arrow.png);
  }
  .tit_area .swiper_controller .prev_btn {
    margin-right: clamp(10px, 2.67vw, 20px);
  }
  .sec_1 {
    background-image: url(../img/company_mo_bg1.png);
    background-position: center;
    background-size: auto;
    transition: background-image 0.3s;
  }
  .sec_1 .container .wrapper .swiper_company .swiper-container .swiper-wrapper .swiper-slide {
	height: clamp(210px, 53.33vw, 400px);
  }
  .sec_1 .container .wrapper .swiper_company .swiper-container .swiper-wrapper .swiper-slide .swiper_link {
    padding: clamp(25px, 6.67vw, 50px);
  }
  .sec_1 .container .wrapper .swiper_company .swiper-container .swiper-wrapper .swiper-slide .swiper_link dl span {
    font-size: clamp(14px, 3.73vw, 28px);
    padding: clamp(5px, 1.33vw, 10px) clamp(9px, 2.4vw, 18px);
  }
  .sec_1 .container .wrapper .swiper_company .swiper-container .swiper-wrapper .swiper-slide .swiper_link dl dt {
    font-size: clamp(22px, 5.33vw, 40px);
    line-height: 1.3;
  }
  .sec_1 .container .wrapper .swiper_company .swiper-container .swiper-wrapper .swiper-slide .swiper_link dl dd {
    font-size: clamp(16px, 4vw, 30px);
  }
  .sec_2 .container .wrapper .cont_area ul {
    flex-direction: column;
  }
  .sec_2 .container .wrapper .cont_area ul .list_item {
    width: 100%;
  }
  .sec_2 .container .wrapper .cont_area ul .list_item:not(:last-child) {
    margin-bottom: clamp(20px, 5.33vw, 40px);
  }
  .sec_2 .container .wrapper .cont_area ul .list_item p {
    font-size: clamp(16px, 4vw, 30px);
    padding: clamp(15px, 4vw, 30px);
  }
  .sec_2 .container .wrapper .cont_area ul .list_item p::before {
    width: clamp(13px, 3.47vw, 26px);
    height: clamp(9px, 2.4vw, 18px);
    background-image: url(../img/company_mo_check_ico.png);
    margin-right: clamp(10px, 2.67vw, 20px);
  }
  .sec_2 .container .wrapper .cont_area ul .list_item .img_area {
    height: clamp(150px, 36.67vw, 275px);
  }
  .sec_3 .container .wrapper .swiper_lawyer .swiper-container .swiper-wrapper .swiper-slide .swiper_link .img_area {
    height: clamp(210px, 62.67vw, 470px);
  }
  .sec_3 .container .wrapper .swiper_lawyer .swiper-container .swiper-wrapper .swiper-slide .swiper_link h3 {
    font-size: clamp(16px, 4vw, 30px);
  }
  .sec_3 .container .wrapper .swiper_lawyer .swiper-container .swiper-wrapper .swiper-slide .swiper_link h3 span {
    font-size: clamp(22px, 6.13vw, 46px);
    margin-right: clamp(3px, 0.67vw, 5px);
  }
  .sec_3 .container .wrapper .swiper_lawyer .swiper-container .swiper-wrapper .swiper-slide .swiper_link p {
    font-size: clamp(14px, 3.47vw, 26px);
    line-height: 1.4;
  }
  .sec_4 .container .wrapper .counsel_area {
    padding: clamp(35px, 9.33vw, 70px) clamp(30px, 8vw, 60px);
  }
  .sec_4 .container .wrapper .counsel_area .left_cont {
    width: 100%;
  }
  .sec_4 .container .wrapper .counsel_area .left_cont h4 {
    font-size: clamp(22px, 5.33vw, 40px);
    line-height: 1.4;
  }
  .sec_4 .container .wrapper .counsel_area .left_cont p {
    font-size: clamp(14px, 4vw, 30px);
  }
  .sec_4 .container .wrapper .counsel_area .right_cont {
    width: 100%;
    margin-top: 0;
  }
  .sec_4 .container .wrapper .counsel_area .right_cont span {
    font-size: clamp(16px, 4vw, 30px);
  }
  .sec_4 .container .wrapper .counsel_area .right_cont span::before {
    width: clamp(13px, 3.47vw, 26px);
    height: clamp(9px, 2.4vw, 18px);
    background-image: url(../img/mo_check_ico.png);
    margin-right: clamp(10px, 2.67vw, 20px);
  }
  .sec_4 .container .wrapper .counsel_area .right_cont .call {
    font-size: clamp(30px, 6.4vw, 48px);
  }
  .sec_4 .container .wrapper .counsel_area .right_cont .counsel_btn {
    width: 100%;
    font-size: clamp(16px, 4vw, 30px);
    padding: clamp(14px, 3.6vw, 27px) 0;
  }
}