@charset "utf-8";

/* 메리트 */
.wrap-merit {padding: 180px 0 150px 0;}
.wrap-merit .text .slogan strong {display: block; font-family: pb; font-size: 90px; line-height: 1; color: #1473e6;}
.wrap-merit .text .slogan p {padding-top: 10px; font-family: pr; font-size: 60px; line-height: 1; color: #393838;}
.wrap-merit .text .desc {padding-top: 35px; font-family: nr; font-size: 17px; color: #666666;}

.wrap-merit .slide {display: flex; align-items: flex-end; width: 100%; margin-top: -14.5%;}
.wrap-merit .info {display: flex; align-items: flex-end; flex-shrink: 0; width: 44%; padding-left: 190px;}
.wrap-merit .info li {display: flex; flex-direction: column;}
.wrap-merit .info em {font-family: pr; font-size: 20px; color: #333333;}
.wrap-merit .info em i {font-family: pb; font-size: 24px; color: #000000;}
.wrap-merit .info strong {padding: 21px 0 25px 0; font-family: nb; font-size: 50px; line-height: 1; color: #252525;}
.wrap-merit .info p {font-family: nr; font-size: 17px; color: #999999;}
.wrap-merit .info .link {margin-top: 110px;}
.wrap-merit .info .link a {position: relative; display: inline-flex; align-items: center; padding-bottom: 25px; font-family: nr; font-size: 20px; color: #000000;}
.wrap-merit .info .link a::after {content: ''; display: block; width: 20px; height: 19px; margin: 0 0 0 95px; background: url('../images/btn-merit.png') no-repeat center;}
.wrap-merit .info .link a::before {content: ''; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: #000000;}
.wrap-merit .info .link .deco {position: relative; display: inline-flex;}
.wrap-merit .info .link .deco::after {content: ''; position: absolute; left: 71%; top: -100%; z-index: -1; width: 145px; height: 145px; border-radius: 100%; background: #f3f3f3;}
.wrap-merit .info-slide {width: 100%;}
.wrap-merit .thumb {align-items: center; width: calc(100% - 44%);}
.wrap-merit .thumb .img {display: flex; justify-content: center; align-items: center; overflow: hidden; max-width: 640px; max-height: 640px; border-radius: 100%;}
.wrap-merit .thumb .img img {object-fit: cover;}
.wrap-merit .thumb .paging {margin-top: 40px;}
.wrap-merit .thumb .paging ul {display: flex; justify-content: center; max-width: 640px;}
.wrap-merit .thumb .paging li {width: auto; height: auto; margin: 0 10px; background: none; opacity: 1;}
.wrap-merit .thumb .paging button {display: block; width: 15px; height: 15px; background: #dbdbdb; border-radius: 100%; text-indent: -99999px;}
.wrap-merit .thumb .paging .swiper-pagination-bullet-active button {background: #252525;}
.wrap-merit .thumb .paging .on button {background: #252525;}

.wrap-merit .side-slide1 {position: absolute; left: -11%; bottom: 8%; width: 250px;}
.wrap-merit .side-slide1 .img {overflow: hidden; display: flex; width: 250px; height: 250px; border-radius: 100%;}
.wrap-merit .side-slide1 .img img {object-fit: cover;}

.wrap-merit .side-slide2 {position: absolute; right: -11%; top: -8%; width: 320px;}
.wrap-merit .side-slide2 .img {overflow: hidden; display: flex; width: 320px; height: 320px; border-radius: 100%;}
.wrap-merit .side-slide2 .img img {object-fit: cover;}

@media screen and (max-width: 1450px) {
  .wrap-merit {padding: 100px 0;}
  .wrap-merit .text .slogan strong {font-size: 65px;}
  .wrap-merit .text .slogan p {font-size: 45px;}
  .wrap-merit .text .desc {padding-top: 25px; font-size: 16px;}

  .wrap-merit .info {padding-left: 140px;}
  .wrap-merit .info em {font-size: 18px;}
  .wrap-merit .info em i {font-size: 20px;}
  .wrap-merit .info strong {font-size: 40px;}
  .wrap-merit .info p {font-size: 16px;}
  .wrap-merit .thumb .img {max-width: 580px; max-height: 580px;}
  .wrap-merit .thumb .paging ul {max-width: 580px;}

  .wrap-merit .side-slide1 {left: -7%; width: 210px;}
  .wrap-merit .side-slide1 .img {width: 210px; height: 210px;}
  .wrap-merit .side-slide2 {r: -9%; width: 270px;}
  .wrap-merit .side-slide2 .img {width: 270px; height: 270px;}
}

@media screen and (max-width: 1220px) {
  .wrap-merit .info {width: 48%;}
  .wrap-merit .thumb .img {max-width: 520px; max-height: 520px;}
}

@media screen and (max-width: 1100px) {
  .wrap-merit {padding: 120px 0 70px 0;}
  .wrap-merit .text .slogan strong {font-size: 40px;}
  .wrap-merit .text .slogan p {font-size: 30px;}
  .wrap-merit .text .desc {padding-top: 11px; font-size: 15px;}

  .wrap-merit .slide {margin-top: 25px;}
  .wrap-merit .info {width: 40%; padding-left: 60px; padding-bottom: 225px;}
  .wrap-merit .info em {font-size: 16px;}
  .wrap-merit .info em i {font-size: 18px;}
  .wrap-merit .info strong {padding: 6px 0 15px 0; font-size: 30px;}
  .wrap-merit .info p {font-size: 15px;}
  .wrap-merit .info .link {margin-top: 40px;}
  .wrap-merit .info .link a {padding-bottom: 10px; font-size: 16px;}
  .wrap-merit .info .link a::after {margin: 0 0 0 50px;}
  .wrap-merit .info .link .deco::after {width: 75px; height: 75px;}
  .wrap-merit .thumb .img {max-width: 500px; max-height: 500px;}
  .wrap-merit .thumb .paging ul {max-width: 500px;}
  .wrap-merit .thumb .paging {margin-top: 20px;}

  .wrap-merit .side-slide1 {left: 40px; bottom: 0; width: 180px;}
  .wrap-merit .side-slide1 .img {width: 180px; height: 180px;}
  .wrap-merit .side-slide2 {right: 40px; top: -60px; width: 220px;}
  .wrap-merit .side-slide2 .img {width: 220px; height: 220px;}
}

@media screen and (max-width: 960px) {
  .wrap-merit {padding: 70px 0 80px 0;}
  .wrap-merit .info {padding-left: 0;}
  .wrap-merit .thumb .img {max-width: 450px; max-height: 450px;}
  .wrap-merit .thumb .paging ul {max-width: 450px;}
  .wrap-merit .side-slide1 {bottom: 0; width: 150px;}
  .wrap-merit .side-slide1 .img {width: 150px; height: 150px;}
  .wrap-merit .side-slide2 {top: -30px; width: 190px;}
  .wrap-merit .side-slide2 .img {width: 190px; height: 190px;}
  .wrap-merit .text .desc {font-size: 14px;}
}

@media screen and (max-width: 800px) {
  .wrap-merit .side-slide1 {left: 20px;}
  .wrap-merit .side-slide2 {right: 20px;}
}

@media screen and (max-width: 750px) {
  .wrap-merit .text .desc {padding-right: 42%;}
  .wrap-merit .text .desc br {display: none;}
}

@media screen and (max-width: 650px) {
  .wrap-merit {padding: 50px 0 50px 0;}
  .wrap-merit .text .slogan strong {font-size: 28px;}
  .wrap-merit .text .slogan p {padding-top: 5px; font-size: 20px;}
  .wrap-merit .text .desc {padding-right: 42%; font-size: 13px;}

  .wrap-merit .info {width: 45%; padding-left: 0;}
  .wrap-merit .info strong {padding: 6px 0 8px 0; font-size: 24px;}
  .wrap-merit .info p {font-size: 13px;}
  .wrap-merit .info .link a {font-size: 14px;}
  .wrap-merit .info .link a::after {margin: 0 0 0 30px;}
  .wrap-merit .info .link .deco::after {left: 76%; top: -62%; width: 60px; height: 60px;}
  .wrap-merit .thumb .img {max-width: 300px; max-height: 300px;}
  .wrap-merit .thumb .paging ul {max-width: 300px;}

  .wrap-merit .side-slide1 {left: 20px; bottom: 0; width: 130px;}
  .wrap-merit .side-slide1 .img {width: 130px; height: 130px;}
  .wrap-merit .side-slide2 {right: 20px; top: -10px; width: 150px;}
  .wrap-merit .side-slide2 .img {width: 150px; height: 150px;}
}

@media screen and (max-width: 550px) {
  .wrap-merit .thumb .img {max-width: 260px; max-height: 260px;}
  .wrap-merit .thumb .paging ul {max-width: 260px;}
}