@charset "UTF-8";
/* ------------------- 섹션1 -------------------- */
#sec1 {
  padding-top: clamp(210px, 10.94vw, 210px);
}
#sec1 .top_area {
  max-width: 1750px;
  width: 90%;
}
#sec1 .top_area .tit_area {
  margin-left: clamp(70px, 9.11vw, 175px);
}
#sec1 .top_area .tit_area h2 {
  color: #222;
  font-size: clamp(40px, 3.13vw, 60px);
  line-height: 1.3;
}
#sec1 .top_area .tit_area h2 span {
  font-size: inherit;
}
#sec1 .top_area .tit_area p {
  font-size: clamp(20px, 1.46vw, 28px);
}
#sec1 .top_area .img_wrapper {
  height: clamp(230px, 21.88vw, 420px);
  border-radius: 20px;
  overflow: hidden;
}
#sec1 .top_area .img_wrapper img {
  height: 100%;
  object-fit: cover;
}
#sec1 .bottom_area .bottom_tit_area h3 {
  font-size: clamp(34px, 2.81vw, 54px);
  font-weight: 700;
}
#sec1 .bottom_area .bottom_tit_area p {
  font-size: clamp(20px, 1.46vw, 28px);
  line-height: 1.5;
}
#sec1 .bottom_area ul {
  max-width: 1385px;
  width: 90%;
}
#sec1 .bottom_area ul li {
  flex-direction: column;
}
#sec1 .bottom_area ul li::before {
  content: "";
  width: clamp(60px, 5.73vw, 110px);
  height: clamp(60px, 5.73vw, 110px);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
}
#sec1 .bottom_area ul li p {
  font-size: clamp(20px, 1.46vw, 28px);
  line-height: 1.5;
}
#sec1 .bottom_area ul li p span {
  font-weight: 700;
}
#sec1 .bottom_area ul .item1 {
  margin-right: clamp(46px, 4.79vw, 92px);
}
#sec1 .bottom_area ul .item1::before {
  background-image: url(../img/centerinfo1_icon1.svg);
}
#sec1 .bottom_area ul .item2 {
  margin-right: clamp(40px, 4.01vw, 77px);
  transition-delay: 0.1s;
}
#sec1 .bottom_area ul .item2::before {
  background-image: url(../img/centerinfo1_icon2.svg);
}
#sec1 .bottom_area ul .item3 {
  margin-right: clamp(20px, 2.08vw, 40px);
  transition-delay: 0.2s;
}
#sec1 .bottom_area ul .item3::before {
  background-image: url(../img/centerinfo1_icon3.svg);
}
#sec1 .bottom_area ul .item4 {
  transition-delay: 0.4s;
}
#sec1 .bottom_area ul .item4::before {
  background-image: url(../img/centerinfo1_icon4.svg);
}

/* ------------------- 섹션2 -------------------- */
#sec2 {
  background-color: #f9f9f9;
}
#sec2 .top_area .tit_area h2 {
  font-size: clamp(34px, 2.81vw, 54px);
  font-weight: 700;
}
#sec2 .top_area .tit_area p {
  font-size: clamp(20px, 1.46vw, 28px);
  line-height: 1.5;
}
#sec2 .top_area .center_swiper {
  height: clamp(340px, 22.4vw, 430px);
}
#sec2 .top_area .center_swiper .swiper-container {
  height: 100%;
}
#sec2 .top_area .center_swiper .swiper-slide {
  background-color: #fff;
  border-radius: 20px;
  border: 1px solid #ddd;
  transition: box-shadow 0.3s;
}
#sec2 .top_area .center_swiper .swiper-slide .txt_wrapper {
  padding: clamp(40px, 3.13vw, 60px) clamp(3px, 2.6vw, 50px);
}
#sec2 .top_area .center_swiper .swiper-slide .txt_wrapper .num {
  font-size: clamp(18px, 1.25vw, 24px);
  color: var(--color-point);
  font-weight: 700;
}
#sec2 .top_area .center_swiper .swiper-slide .txt_wrapper h3 {
  font-size: clamp(30px, 2.08vw, 40px);
  color: var(--color-point);
  font-weight: 700;
}
#sec2 .top_area .center_swiper .swiper-slide .txt_wrapper p {
  font-size: clamp(18px, 1.25vw, 24px);
  line-height: 1.6;
  word-break: break-all;
}
#sec2 .top_area .center_swiper .swiper-slide:hover {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
}
#sec2 .bottom_area {
  background-image: url(../img/centerInfo1_img2.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
#sec2 .bottom_area p {
  font-size: clamp(36px, 2.4vw, 46px);
  font-weight: 700;
  color: #fff;
  line-height: 1.5;
  padding: clamp(100px, 8.33vw, 160px) 0;
}
#sec2 .bottom_area p .ta_br {
  display: none;
}

/* ------------------- 섹션3 -------------------- */
#sec3 .top_area .tit_area h2 {
  font-size: clamp(34px, 2.81vw, 54px);
  font-weight: 700;
}
#sec3 .top_area .tit_area p {
  font-size: clamp(20px, 1.46vw, 28px);
  line-height: 1.5;
}
#sec3 .top_area .tit_area .swiper-navigation {
  width: 60px;
  position: relative;
}
#sec3 .top_area .tit_area .swiper-navigation div {
  width: 8px;
  height: 15px;
  background-image: url(../img/right_arrow_9.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  opacity: 1;
}
#sec3 .top_area .tit_area .swiper-navigation div::after {
  display: none;
}
#sec3 .top_area .tit_area .swiper-navigation .swiper-button-prev {
  left: 0;
  top: 0;
  transform: rotate(180deg);
}
#sec3 .top_area .success_swiper .swiper-container {
  position: relative;
  padding: 0 10px clamp(40px, 2.86vw, 55px);
  overflow: hidden;
}
#sec3 .top_area .success_swiper .swiper-slide {
  border: 1px solid #ddd;
  border-radius: 20px;
  transition: box-shadow 0.3s;
}
#sec3 .top_area .success_swiper .swiper-slide a {
  padding: clamp(30px, 2.6vw, 50px);
}
#sec3 .top_area .success_swiper .swiper-slide a dl > span {
  font-size: clamp(20px, 1.25vw, 24px);
  font-weight: 700;
  color: var(--color-point);
}
#sec3 .top_area .success_swiper .swiper-slide a dl dt {
  font-size: clamp(22px, 1.35vw, 26px);
  font-weight: 700;
  word-break: break-all;
  -webkit-line-clamp: 1;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
#sec3 .top_area .success_swiper .swiper-slide a dl dd {
  font-size: clamp(16px, 1.04vw, 20px);
  line-height: 1.6;
  word-break: break-all;
  -webkit-line-clamp: 4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
}
#sec3 .top_area .success_swiper .swiper-slide:hover {
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
#sec3 .top_area .success_swiper .swiper-pagination {
  top: 99%;
  height: 2px;
  background-color: #eee;
}
#sec3 .top_area .success_swiper .swiper-pagination .swiper-pagination-progressbar-fill {
  background-color: #999;
}
#sec3 .bottom_area .bottom_tit_area h3 {
  font-size: clamp(34px, 2.81vw, 54px);
  font-weight: 700;
}
#sec3 .bottom_area .bottom_tit_area p {
  font-size: clamp(20px, 1.46vw, 28px);
  line-height: 1.5;
}
#sec3 .bottom_area .bottom_tit_area p .ta_br,
#sec3 .bottom_area .bottom_tit_area p .s_br {
  display: none;
}
#sec3 .bottom_area ul li {
  width: calc((100% - clamp(50px, 4.17vw, 80px)) / 3);
  border: 1px solid #bbb;
  margin-bottom: 16px;
}
#sec3 .bottom_area ul li:not(:nth-child(3n)) {
  margin-right: clamp(25px, 2.08vw, 40px);
}
#sec3 .bottom_area ul li a {
  padding: clamp(18px, 1.2vw, 23px) clamp(20px, 1.56vw, 30px);
  transition: background-color 0.3s;
}
#sec3 .bottom_area ul li a .txt span {
  font-size: clamp(16px, 0.94vw, 18px);
  color: #999;
  font-weight: 300;
  transition: color 0.3s;
}
#sec3 .bottom_area ul li a .txt p {
  font-size: clamp(22px, 1.46vw, 28px);
  font-weight: 700;
  transition: color 0.3s;
}
#sec3 .bottom_area ul li a > span {
  width: clamp(30px, 2.08vw, 40px);
  height: clamp(30px, 2.08vw, 40px);
  border-radius: 50%;
  border: 1px solid #222;
  transition: border-color 0.3s;
}
#sec3 .bottom_area ul li a > span::after {
  content: "";
  width: 5px;
  height: 10px;
  background-image: url(../img/right_arrow_b.svg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: block;
  transition: all 0.3s;
}
#sec3 .bottom_area ul li:hover a {
  background-color: var(--color-point);
}
#sec3 .bottom_area ul li:hover a .txt span {
  color: #fff;
}
#sec3 .bottom_area ul li:hover a .txt p {
  color: #fff;
}
#sec3 .bottom_area ul li:hover a > span {
  border-color: #fff;
}
#sec3 .bottom_area ul li:hover a > span::after {
  background-image: url(../img/right_arrow_w.svg);
}

@media (max-width: 1100px) {
  #sec2 .bottom_area p .ta_br {
    display: block;
  }
}
@media (max-width: 1000px) {
  #sec1 .top_area .tit_area {
    margin-left: 0;
  }
  #sec3 .bottom_area ul li {
    width: calc((100% - 25px) / 2);
  }
  #sec3 .bottom_area ul li:nth-child(3n) {
    margin-right: 25px;
  }
  #sec3 .bottom_area ul li:nth-child(2n), #sec3 .bottom_area ul li:nth-child(6n) {
    margin-right: 0;
  }
}
@media (max-width: 900px) {
  #sec3 .bottom_area .bottom_tit_area p .ta_br {
    display: block;
  }
}
@media (max-width: 750px) {
  #sec1 {
    padding-top: clamp(135px, 34vw, 255px);
  }
  #sec1 .top_area .tit_area h2 {
    font-size: clamp(29px, 7.07vw, 53px);
  }
  #sec1 .top_area .tit_area h2 span {
    margin-right: 0;
  }
  #sec1 .top_area .tit_area p {
    font-size: clamp(16px, 3.73vw, 28px);
  }
  #sec1 .top_area .img_wrapper {
    height: clamp(210px, 56vw, 420px);
  }
  #sec1 .bottom_area {
    width: 85%;
  }
  #sec1 .bottom_area .bottom_tit_area h3 {
    font-size: clamp(29px, 7.07vw, 53px);
  }
  #sec1 .bottom_area .bottom_tit_area p {
    font-size: clamp(16px, 3.73vw, 28px);
  }
  #sec1 .bottom_area ul {
    flex-direction: column;
  }
  #sec1 .bottom_area ul li {
    width: 100%;
    flex-direction: row;
    margin-right: 0 !important;
  }
  #sec1 .bottom_area ul li:not(:last-child) {
    margin-bottom: clamp(30px, 8vw, 60px);
  }
  #sec1 .bottom_area ul li::before {
    width: clamp(60px, 16vw, 120px);
    height: clamp(60px, 16vw, 120px);
    margin-right: clamp(20px, 5.33vw, 40px);
  }
  #sec1 .bottom_area ul li p {
    padding-top: 0;
    text-align: left;
    font-size: clamp(20px, 4.53vw, 34px);
    width: calc(100% - clamp(80px, 21.33vw, 160px));
  }
  #sec2 .top_area {
    width: 100%;
  }
  #sec2 .top_area .tit_area {
    width: calc(100% - 12.26vw);
    margin: 0 auto;
  }
  #sec2 .top_area .tit_area h2 {
    font-size: clamp(29px, 7.07vw, 53px);
  }
  #sec2 .top_area .tit_area p {
    font-size: clamp(16px, 3.73vw, 28px);
  }
  #sec2 .top_area .center_swiper {
    height: clamp(320px, 72vw, 540px);
    width: calc(100% - 12.26vw);
    margin: 0 auto;
  }
  #sec2 .top_area .center_swiper .swiper-slide .txt_wrapper {
    padding: clamp(30px, 8vw, 60px) clamp(25px, 6.67vw, 50px);
  }
  #sec2 .top_area .center_swiper .swiper-slide .txt_wrapper .num {
    font-size: clamp(18px, 4vw, 30px);
  }
  #sec2 .top_area .center_swiper .swiper-slide .txt_wrapper h3 {
    font-size: clamp(26px, 5.33vw, 40px);
  }
  #sec2 .top_area .center_swiper .swiper-slide .txt_wrapper p {
    font-size: clamp(16px, 4vw, 30px);
  }
  #sec2 .top_area .center_swiper .swiper-slide:hover {
    box-shadow: none;
  }
  #sec2 .bottom_area p {
    font-size: clamp(26px, 5.6vw, 42px);
    padding: clamp(75px, 20vw, 150px) 0;
  }
  #sec2 .bottom_area p .ta_br {
    display: none;
  }
  #sec3 {
    width: 100%;
  }
  #sec3 .top_area .tit_area {
    width: calc(100% - 12.28vw);
    margin: 0 auto;
  }
  #sec3 .top_area .tit_area h2 {
    font-size: clamp(29px, 7.07vw, 53px);
  }
  #sec3 .top_area .tit_area p {
    font-size: clamp(16px, 3.73vw, 28px);
  }
  #sec3 .top_area .swiper-navigation {
    display: none;
  }
  #sec3 .top_area .success_swiper {
    margin-left: 6.13vw;
  }
  #sec3 .top_area .success_swiper .swiper-container {
    padding: 0;
    padding-bottom: clamp(33px, 8.67vw, 65px);
  }
  #sec3 .top_area .success_swiper .swiper-slide a {
    padding: clamp(30px, 8vw, 60px) clamp(25px, 6.67vw, 50px);
  }
  #sec3 .top_area .success_swiper .swiper-slide a dl > span {
    font-size: clamp(20px, 4.27vw, 32px);
  }
  #sec3 .top_area .success_swiper .swiper-slide a dl dt {
    font-size: clamp(24px, 5.07vw, 38px);
  }
  #sec3 .top_area .success_swiper .swiper-slide a dl dd {
    font-size: clamp(18px, 4vw, 30px);
  }
  #sec3 .top_area .success_swiper .swiper-slide:hover {
    box-shadow: none;
  }
  #sec3 .top_area .success_swiper .swiper-pagination {
    width: calc(100% - 6.13vw);
    margin: 0 auto;
  }
  #sec3 .bottom_area {
    width: 90%;
    margin: 0 auto;
  }
  #sec3 .bottom_area .bottom_tit_area h3 {
    font-size: clamp(29px, 7.07vw, 53px);
  }
  #sec3 .bottom_area .bottom_tit_area p {
    font-size: clamp(16px, 3.73vw, 28px);
  }
  #sec3 .bottom_area .bottom_tit_area p .ta_br {
    display: none;
  }
  #sec3 .bottom_area ul li {
    width: 100%;
    margin-right: 0 !important;
    margin-bottom: clamp(10px, 2.67vw, 20px);
  }
  #sec3 .bottom_area ul li a {
    padding: clamp(15px, 4vw, 30px) clamp(20px, 5.33vw, 40px);
  }
  #sec3 .bottom_area ul li a .txt span {
    font-size: clamp(12px, 3.2vw, 24px);
  }
  #sec3 .bottom_area ul li a .txt p {
    font-size: clamp(18px, 4.53vw, 34px);
  }
  #sec3 .bottom_area ul li a > span {
    width: clamp(30px, 8vw, 60px);
    height: clamp(30px, 8vw, 60px);
  }
  #sec3 .bottom_area ul li a > span::after {
    width: clamp(5px, 1.33vw, 10px);
    height: clamp(8px, 2.13vw, 16px);
  }
}
@media (max-width: 400px) {
  #sec3 .bottom_area .bottom_tit_area p .mo_br {
    display: none;
  }
  #sec3 .bottom_area .bottom_tit_area p .s_br {
    display: block;
  }
}