설계도 하고있음

css/main.css

@@ -5,13 +5,14 @@
   color: #191919;
 }
 
-div, ol, ul, li, a, p, h1, h2, h3, h4, h5, h6, span, section, header, main, footer {
+div, ol, ul, li, a, p, h1, h2, h3, h4, h5, h6, span, strong, section, header, main, footer, dl, dt, dd {
   padding: 0px;
   margin: 0px;
   list-style: none;
   box-sizing: border-box;
   text-decoration: none;
   color: #191919;
+  word-break: keep-all;
 }
 
 body {
@@ -16360,32 +16361,42 @@ main .main--visual--section .main--visual--pager {
   position: absolute;
   left: 50%;
   transform: translateX(-50%);
-  bottom: 35px;
+  bottom: 30px;
   z-index: 9;
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
   align-items: center;
-  width: 100%;
-  max-width: 1200px;
-  gap: 11px;
+  height: 90px;
+  padding: 20px 35px;
+  border-radius: 1000px;
+  background: rgba(255, 255, 255, 0.6);
+  -webkit-backdrop-filter: blur(2px);
+          backdrop-filter: blur(2px);
 }
 main .main--visual--section .main--visual--pager .prev--next--wrap {
+  padding-top: 20px;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 11px;
+  display: flex;
+  gap: 15px;
+  align-items: center;
+  justify-content: center;
 }
 main .main--visual--section .main--visual--pager .prev--next--wrap button {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: 50px;
-  height: 50px;
-  border-radius: 50px;
-  border: 0px;
-  background: rgba(255, 255, 255, 0.8);
-  -webkit-backdrop-filter: blur(2px);
-          backdrop-filter: blur(2px);
+  width: 18px;
+  height: 18px;
+  border: none;
+  background-color: transparent;
+  background-image: url(../img/ico--swiper--left.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+}
+main .main--visual--section .main--visual--pager .prev--next--wrap button.next--btn {
+  background-image: url(../img/ico--swiper--right.svg);
 }
 main .main--visual--section .main--visual--pager .play--pause {
   display: flex;
@@ -16409,42 +16420,537 @@ main .main--visual--section .main--visual--pager .main--visual--fraction {
   display: flex;
   align-items: center;
   justify-content: center;
-  border-radius: 100px;
-  background: rgba(255, 255, 255, 0.8);
-  -webkit-backdrop-filter: blur(2px);
-          backdrop-filter: blur(2px);
-  width: 80px;
-  height: 50px;
 }
 main .main--visual--section .main--visual--pager .main--visual--fraction span {
-  color: #737373;
-  font-size: 16px;
+  font-size: 13px;
   font-style: normal;
+  line-height: 1;
   letter-spacing: -0.32px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.5);
 }
 main .main--visual--section .main--visual--pager .main--visual--fraction span.swiper-pagination-current {
-  color: #333;
-  font-weight: 500;
+  color: #000;
+  font-weight: 800;
 }
-main .main--visual--section .main--visual--pager .main--visual--fraction span.swiper-pagination-total {
-  color: #737373;
+main .main--visual--section .main--visual--pager .main--visual--fraction span.fraction-separator {
+  background-color: #000;
+  width: 1px;
+  height: 12px;
+  display: inline-block;
+  margin: 0 10px;
 }
 main .main--visual--section .main--visual--pager .main--visual--pagination {
   display: flex;
-  gap: 8px;
+  margin-right: 20px;
+  gap: 5px;
   align-items: center;
   justify-content: center;
+  padding-top: 20px;
 }
 main .main--visual--section .main--visual--pager .main--visual--pagination .swiper-pagination-bullet {
-  width: 12px;
-  height: 12px;
+  width: 34px;
+  height: 34px;
   border-radius: 50%;
-  background: rgba(255, 255, 255, 0.5);
   border: none;
+  opacity: 1;
+  background-color: transparent;
   cursor: pointer;
-  transition: all 0.3s ease;
+  position: relative;
+}
+main .main--visual--section .main--visual--pager .main--visual--pagination .swiper-pagination-bullet::after {
+  position: absolute;
+  content: "";
+  width: 4px;
+  height: 4px;
+  background-color: #000;
+  border-radius: 50%;
+  left: calc(50% - 2px);
+  top: calc(50% - 2px);
+  display: inline-block;
 }
 main .main--visual--section .main--visual--pager .main--visual--pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
-  background: #fff;
-  transform: scale(1.2);
+  border: 1px solid rgba(0, 0, 0, 0.5);
+}
+main .main--visual--section .main--visual--pager .main--visual--progress {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  margin-right: 20px;
+}
+main .main--visual--section .main--visual--pager .main--visual--progress .main--visual--progress--bar {
+  display: flex;
+  align-items: center;
+}
+main .main--visual--section .main--visual--pager .main--visual--progress .progress-title {
+  padding-left: 30px;
+  color: #000;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 1;
+  margin-bottom: 4px;
+}
+main .main--visual--section .main--visual--pager .main--visual--progress .progress-bar {
+  width: 200px;
+  height: 2px;
+  background-color: rgba(0, 0, 0, 0.2) !important;
+  border-radius: 100px;
+  position: relative;
+  overflow: hidden;
+}
+main .main--visual--section .main--visual--pager .main--visual--progress .progress-text {
+  color: #000;
+  font-size: 15px;
+  font-weight: 500;
+  width: 30px;
+}
+main .mna--reason--wrap {
+  overflow-x: hidden;
+}
+main .mna--reason--wrap .btn--wrap {
+  display: flex;
+  justify-content: center;
+  padding: 40px 0;
+  gap: 10px;
+}
+main .mna--reason--wrap .btn--wrap button {
+  border: 1px solid #dadada;
+  background-color: #fff;
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+main .mna--reason--wrap .btn--wrap button.play--btn {
+  background-image: url(../img/ico--swiper--pause.svg);
+}
+main .mna--reason--wrap .btn--wrap button.play--btn.pause {
+  background-image: url(../img/ico--swiper--play.svg);
+}
+main .mna--reason--wrap .btn--wrap button.prev--btn {
+  background-image: url(../img/ico--swiper--left2.svg);
+}
+main .mna--reason--wrap .btn--wrap button.next--btn {
+  background-image: url(../img/ico--swiper--right2.svg);
+}
+main .mna--reason--wrap .swiper-slide {
+  transform: translateX(50%);
+  height: auto;
+}
+main .mna--reason--wrap .swiper-slide .reason--box {
+  border-radius: 30px;
+  border: 1px solid #EEE;
+  background: #FFF;
+  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.08);
+  height: 100%;
+  display: flex;
+  padding: 40px 45px 70px;
+  flex-direction: column;
+}
+main .mna--reason--wrap .swiper-slide .reason--box > span {
+  color: #1aaf59;
+  font-size: 18px;
+  font-weight: 700;
+  line-height: 1;
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  -webkit-text-decoration-skip: ink;
+          text-decoration-skip-ink: auto;
+  text-decoration-thickness: auto;
+  text-underline-offset: auto;
+  text-underline-position: from-font;
+  margin-bottom: 45px;
+}
+main .mna--reason--wrap .swiper-slide .reason--box dt {
+  color: #000;
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: -0.2px;
+  margin-bottom: 35px;
+}
+main .mna--reason--wrap .swiper-slide .reason--box dd {
+  color: #333;
+  font-size: 15px;
+  font-weight: 300;
+  letter-spacing: -0.15px;
+}
+main .gray--section {
+  background-color: #f9f9f9;
+}
+main .green--section {
+  background-color: #2ECC71;
+}
+main .section--container {
+  max-width: 1200px;
+  width: 100%;
+  margin: 0 auto;
+}
+main .section--container.p--120 {
+  padding: 120px 0;
+}
+main .section--container.p--100 {
+  padding: 100px 0;
+}
+main .section--container .title--wrap > h2 {
+  text-align: center;
+  color: #000;
+  font-size: 35px;
+  font-weight: 300;
+}
+main .section--container .title--wrap > h2 strong {
+  font-weight: 700;
+}
+main .section--container .title--wrap > p {
+  text-align: center;
+}
+main .section--container .title--wrap.big > h2 {
+  color: #000;
+  font-size: 50px;
+  font-weight: 300;
+  letter-spacing: -0.5px;
+  margin-bottom: 60px;
+  line-height: 1.4;
+}
+main .section--container .title--wrap.big > h2 strong {
+  font-weight: 700;
+}
+main .section--container .title--wrap.big > p {
+  color: #000;
+  font-weight: 300;
+  line-height: 1.7;
+  font-size: 18px;
+}
+main .section--container .title--wrap.le > h2, main .section--container .title--wrap.le > p {
+  text-align: left;
+}
+main .section--container .now--box--wrap .box--top {
+  display: flex;
+  margin-bottom: 90px;
+  justify-content: space-between;
+}
+main .section--container .now--box--wrap .box--top .box {
+  gap: 40px;
+  width: 33.333%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+}
+main .section--container .now--box--wrap .box--top .box > p {
+  color: #000;
+  font-size: 18px;
+  font-weight: 300;
+}
+main .section--container .now--box--wrap .box--top .box > p strong {
+  font-weight: 700;
+}
+main .section--container .now--box--wrap .box--bot {
+  display: flex;
+  gap: 40px;
+}
+main .section--container .now--box--wrap .box--bot .box {
+  width: 50%;
+  border-radius: 20px;
+  padding: 0 40px;
+  display: flex;
+  align-items: center;
+  height: 120px;
+  background-size: 100%;
+  background-image: url(../img/bg--now1.svg);
+}
+main .section--container .now--box--wrap .box--bot .box:last-child {
+  background-image: url(../img/bg--now2.svg);
+}
+main .section--container .growth--logic--wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 40px;
+}
+main .section--container .growth--logic--wrap > div {
+  width: calc((100% - 120px) / 3);
+}
+main .section--container .growth--logic--wrap .title--box {
+  width: calc((100% - 120px) / 3 + 40px);
+}
+main .section--container .growth--logic--wrap .title--box h2 {
+  color: #fff;
+  font-size: 45px;
+  font-weight: 300;
+  letter-spacing: -0.45px;
+}
+main .section--container .growth--logic--wrap .title--box h2 strong {
+  font-weight: 800;
+  color: #fff;
+}
+main .section--container .growth--logic--wrap .title--box .btn--wrap {
+  display: flex;
+  gap: 15px;
+}
+main .section--container .growth--logic--wrap .title--box .btn--wrap a {
+  display: inline-block;
+  padding: 20px 30px;
+  color: #fff;
+  border-radius: 1000px;
+  border: 1px solid #fff;
+  line-height: 1;
+}
+main .section--container .growth--logic--wrap .logic--box {
+  border-radius: 25px;
+  background-color: #fff;
+  min-height: 350px;
+  padding: 50px 45px 70px;
+}
+main .section--container .growth--logic--wrap .logic--box dt {
+  color: #333;
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.22px;
+  margin-bottom: 30px;
+}
+main .section--container .growth--logic--wrap .logic--box dt strong {
+  color: #1aaf59;
+  font-weight: 700;
+}
+main .section--container .growth--logic--wrap .logic--box dd {
+  color: #444;
+  font-size: 15px;
+  font-weight: 400;
+  letter-spacing: -0.15px;
+  line-height: 1.7;
+}
+main .section--container .growth--logic--wrap .logic--box.special {
+  width: calc((100% - 120px) / 3 + 40px);
+  background-color: #139e4e;
+  background-image: url(../img/ico--logic.svg);
+  background-repeat: no-repeat;
+  background-position: right bottom;
+}
+main .section--container .growth--logic--wrap .logic--box.special dt {
+  color: #fff;
+  text-decoration-line: underline;
+  text-decoration-style: solid;
+  -webkit-text-decoration-skip: ink;
+          text-decoration-skip-ink: auto;
+  text-decoration-thickness: auto;
+  text-underline-offset: auto;
+  text-underline-position: from-font;
+}
+main .section--container .growth--logic--wrap .logic--box.special dd {
+  color: #fff;
+}
+main .section--container .best--service--wrap {
+  display: flex;
+  gap: 40px;
+}
+main .section--container .best--service--wrap .service--box {
+  padding: 40px 45px 70px;
+  border: 1px solid #e5e5e5;
+  border-radius: 25px;
+  position: relative;
+  width: calc((100% - 80px) / 3);
+}
+main .section--container .best--service--wrap .service--box:nth-child(2) .service--numb {
+  background-image: url(../img/numb--service2.svg);
+}
+main .section--container .best--service--wrap .service--box:nth-child(3) .service--numb {
+  background-image: url(../img/numb--service3.svg);
+}
+main .section--container .best--service--wrap .service--box .service--numb {
+  position: absolute;
+  right: 0;
+  display: inline-block;
+  width: 100px;
+  height: 100px;
+  background-repeat: no-repeat;
+  background-position: top right;
+  top: 10px;
+  background-image: url(../img/numb--service1.svg);
+}
+main .section--container .best--service--wrap .service--box h3 {
+  margin-top: 40px;
+  margin-bottom: 30px;
+  font-size: 22px;
+  color: #191919;
+  font-weight: 300;
+  letter-spacing: -0.22px;
+  line-height: 1.4;
+}
+main .section--container .best--service--wrap .service--box h3 strong {
+  font-weight: 700;
+}
+main .section--container .best--service--wrap .service--box p {
+  color: #333;
+  font-size: 16px;
+  letter-spacing: -0.16px;
+  line-height: 1.7;
+  font-weight: 300;
+}
+main .section--container .process--plan--wrap .title--wrap {
+  margin-bottom: 70px;
+}
+main .section--container .process--plan--wrap .title--wrap span {
+  color: #1aaf59;
+  font-size: 15px;
+  text-transform: uppercase;
+  display: inline-block;
+  margin-bottom: 25px;
+}
+main .section--container .process--plan--wrap .title--wrap h2 {
+  font-size: 30px;
+  font-weight: 400;
+  margin-bottom: 25px;
+}
+main .section--container .process--plan--wrap .title--wrap p {
+  font-size: 18px;
+  font-weight: 300;
+}
+main .section--container .process--plan--wrap .content--wrap h3 {
+  color: #000;
+  font-size: 20px;
+  font-weight: 700;
+  letter-spacing: -0.2px;
+  display: flex;
+  align-items: center;
+  margin-bottom: 40px;
+}
+main .section--container .process--plan--wrap .content--wrap h3 .ico {
+  width: 20px;
+  height: 20px;
+  background-image: url(../img/ico--heart.svg);
+  display: inline-block;
+  background-repeat: no-repeat;
+  background-position: center;
+  margin-right: 15px;
+}
+main .section--container .process--plan--wrap .content--wrap .direct--wrap {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 20px;
+}
+main .section--container .process--plan--wrap .content--wrap .direct--wrap .circle {
+  display: flex;
+  min-width: 190px;
+  justify-content: center;
+  gap: 12px;
+  padding: 20px 40px;
+  background-color: #2ECC71;
+  align-items: center;
+  border-radius: 100px;
+}
+main .section--container .process--plan--wrap .content--wrap .direct--wrap .circle p {
+  color: #fff;
+  font-size: 17px;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: -0.17px;
+}
+main .section--container .process--plan--wrap .content--wrap .direct--wrap .circle .ico {
+  width: 25px;
+  height: 25px;
+  display: inline-block;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: 100%;
+  background-image: url(../img/ico--direct1.svg);
+}
+main .section--container .process--plan--wrap .content--wrap .direct--wrap .circle:nth-of-type(2) {
+  background-color: #188345;
+}
+main .section--container .process--plan--wrap .content--wrap .direct--wrap .circle:nth-of-type(2) .ico {
+  background-image: url(../img/ico--direct2.svg);
+}
+main .section--container .process--plan--wrap .content--wrap .direct--wrap .circle:nth-of-type(3) .ico {
+  background-image: url(../img/ico--direct3.svg);
+}
+main .section--container .process--plan--wrap .content--wrap .direct--wrap .circle:nth-of-type(4) {
+  background-color: #188345;
+}
+main .section--container .process--plan--wrap .content--wrap .direct--wrap .circle:nth-of-type(4) .ico {
+  background-image: url(../img/ico--direct4.svg);
+}
+main .section--container .process--plan--wrap .content--wrap .direct--wrap .bar {
+  width: 70px;
+  height: 1px;
+  border-bottom: 3px dashed #2ecc71;
+}
+main .section--container .process--plan--wrap .content--wrap .process--wrap .process--title {
+  text-align: center;
+  font-weight: 700;
+  font-size: 25px;
+  line-height: 1;
+  color: #333;
+  margin-bottom: 45px;
+}
+main .section--container .process--plan--wrap .content--wrap .process--wrap .process--title strong {
+  color: #188345;
+}
+main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--side {
+  width: 123px;
+  display: flex;
+  gap: 15px;
+  flex-direction: column;
+  justify-content: center;
+}
+main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--side .circle {
+  color: #444;
+  font-size: 16px;
+  text-align: center;
+  padding: 20px 0;
+  border-radius: 100px;
+  border: 2px solid #ddee81;
+  font-weight: 600;
+  line-height: 1;
+  letter-spacing: -0.16px;
+}
+main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--side .circle strong {
+  font-weight: 600;
+  color: #1aaf59;
+}
+main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--side .line {
+  height: 50px;
+  width: 50%;
+  border-right: 3px dashed #ddee81;
+}
+main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--circle {
+  width: calc(100% - 346px);
+  height: 390px;
+  display: flex;
+  background-image: url(../img/bg--process--circle.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  align-items: center;
+  justify-content: center;
+  background-size: 100%;
+}
+main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--circle .circle {
+  width: 28%;
+  display: flex;
+  flex-direction: column;
+  gap: 35px;
+  align-items: center;
+}
+main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--circle .circle .ico {
+  width: 80px;
+  height: 80px;
+  background-position: center;
+  background-size: 100%;
+  background-repeat: no-repeat;
+  display: inline-block;
+}
+main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--circle .circle:nth-child(1) .ico {
+  background-image: url(../img/ico--process--circle1.svg);
+}
+main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--circle .circle:nth-child(2) .ico {
+  background-image: url(../img/ico--process--circle2.svg);
+}
+main .section--container .process--plan--wrap .content--wrap .process--wrap .process--cont .process--top .process--circle .circle:nth-child(3) .ico {
+  background-image: url(../img/ico--process--circle3.svg);
 }/*# sourceMappingURL=main.css.map */

css/reset.css

@@ -4,13 +4,14 @@
   color: #191919;
 }
 
-div, ol, ul, li, a, p, h1, h2, h3, h4, h5, h6, span, section, header, main, footer {
+div, ol, ul, li, a, p, h1, h2, h3, h4, h5, h6, span, strong, section, header, main, footer, dl, dt, dd {
   padding: 0px;
   margin: 0px;
   list-style: none;
   box-sizing: border-box;
   text-decoration: none;
   color: #191919;
+  word-break: keep-all;
 }
 
 body {

img/bg--process--circle.svg

@@ -0,0 +1,5 @@
+<svg width="879" height="394" viewBox="0 0 879 394" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M317.738 75.0352C286.697 44.1106 243.917 25 196.682 25C101.865 25 25 102.005 25 196.996C25 291.987 101.865 368.992 196.682 368.992C243.917 368.992 286.697 349.881 317.738 318.957" stroke="#D5EB62" stroke-opacity="0.8" stroke-width="50" stroke-linecap="round"/>
+<path d="M561.193 75.0352C592.234 44.1106 635.014 25 682.249 25C777.067 25 853.931 102.005 853.931 196.996C853.931 291.987 777.067 368.992 682.249 368.992C635.014 368.992 592.234 349.881 561.193 318.957" stroke="#D5EB62" stroke-opacity="0.8" stroke-width="50" stroke-linecap="round"/>
+<path d="M559.222 75.0352C528.135 44.1106 485.292 25 437.987 25C390.682 25 347.839 44.1106 316.752 75.0352M559.222 318.957C528.135 349.881 485.292 368.992 437.987 368.992C390.682 368.992 347.839 349.881 316.752 318.957" stroke="#66AE1D" stroke-opacity="0.5" stroke-width="50" stroke-linecap="round"/>
+</svg>

img/bg--process--circle1.svg

@@ -0,0 +1,3 @@
+<svg width="343" height="394" viewBox="0 0 343 394" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M317.772 75.0352C286.731 44.1106 243.952 25 196.716 25C101.899 25 25.0344 102.005 25.0344 196.996C25.0344 291.987 101.899 368.992 196.716 368.992C243.952 368.992 286.731 349.881 317.772 318.957" stroke="#D5EB62" stroke-opacity="0.8" stroke-width="50" stroke-linecap="round"/>
+</svg>

img/bg--process--circle2.svg

@@ -0,0 +1,3 @@
+<svg width="294" height="394" viewBox="0 0 294 394" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M268.256 75.0352C237.17 44.1106 194.327 25 147.022 25C99.7165 25 56.8735 44.1106 25.7866 75.0352M268.256 318.957C237.17 349.881 194.327 368.992 147.022 368.992C99.7165 368.992 56.8735 349.881 25.7866 318.957" stroke="#66AE1D" stroke-opacity="0.5" stroke-width="50" stroke-linecap="round"/>
+</svg>

img/bg--process--circle3.svg

@@ -0,0 +1,3 @@
+<svg width="343" height="394" viewBox="0 0 343 394" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M25.2279 75.0352C56.2689 44.1106 99.0486 25 146.284 25C241.101 25 317.966 102.005 317.966 196.996C317.966 291.987 241.101 368.992 146.284 368.992C99.0486 368.992 56.2689 349.881 25.2279 318.957" stroke="#D5EB62" stroke-opacity="0.8" stroke-width="50" stroke-linecap="round"/>
+</svg>

img/ico--direct1.svg

@@ -0,0 +1,11 @@
+<svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_84_587)">
+<path d="M8.7473 11.2988C9.88959 10.7379 10.6647 9.56535 10.6222 8.21917C10.5668 6.4874 9.13403 5.07111 7.36736 5.00268C5.43032 4.92756 3.83657 6.444 3.83657 8.32516C3.83657 9.62711 4.60065 10.753 5.71313 11.2988L1.4583 15.4675C0.180568 16.7194 0.180568 18.7483 1.4583 19.9993L7.23021 14.3442L13.0021 19.9993C14.2799 18.7475 14.2799 16.7186 13.0021 15.4675L8.7473 11.2988Z" fill="#02715C"/>
+<path d="M20.2868 11.2988C21.4291 10.7379 22.2043 9.56535 22.1617 8.21917C22.1072 6.4874 20.6744 5.07111 18.9069 5.00268C16.9699 4.92756 15.3761 6.444 15.3761 8.32516C15.3761 9.62711 16.1402 10.753 17.2527 11.2988L12.9978 15.4675C11.7201 16.7194 11.7201 18.7483 12.9978 19.9993L18.7698 14.3442L24.5417 19.9993C25.8194 18.7475 25.8194 16.7186 24.5417 15.4675L20.2868 11.2988Z" fill="#D0FF00"/>
+</g>
+<defs>
+<clipPath id="clip0_84_587">
+<rect width="25" height="25" fill="white" transform="translate(0.5)"/>
+</clipPath>
+</defs>
+</svg>

img/ico--direct3.svg

@@ -0,0 +1,5 @@
+<svg width="26" height="25" viewBox="0 0 26 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.5 1H3.5V3H12.5V1Z" fill="#02715C"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.5 8.54924V11.6818H21.6169V13.6174H16.5V15.4697H21.6169V17.4053H16.5V19.2576H21.6169V21.1932H16.5V24H24.5V6L16.5 8.54924Z" fill="#D0FF00"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.5 24H4.76456V15.8416H11.2354V24H14.5V4H1.5V24ZM3.90281 6.19387H12.0972V8.31156H3.90281V6.19387ZM3.90281 10.2579H12.0972V12.3755H3.90281V10.2579Z" fill="#02715C"/>
+</svg>

img/ico--direct4.svg

@@ -0,0 +1,9 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.445 8.12206H19.2964C19.8396 8.12206 20.2949 7.68424 20.285 7.14981C20.2754 6.63145 19.845 6.21362 19.3155 6.21362H14.9147C14.2932 6.21362 14.0742 5.69507 14.2384 5.32055C14.499 4.72576 14.7262 3.87031 14.8645 3.2275C15.0582 2.33032 14.8398 1.28497 13.9197 1.00982C13.6265 0.958665 13.345 1.11114 13.2355 1.38061C13.0856 1.75081 12.5702 3.06641 11.8921 4.4412C11.4299 5.3768 10.2668 6.20422 9.31885 6.57207C9.32064 6.59637 9.34015 13.6059 9.33736 13.6396C9.88442 13.7658 10.8153 13.9879 11.3259 14.273C11.8873 14.5858 12.5246 14.752 13.1696 14.752C13.4101 14.752 12.7067 14.751 16.9005 14.7587C17.4296 14.7587 17.8598 14.3418 17.87 13.8235C17.8803 13.288 17.4252 12.8502 16.8814 12.8502H15.4452C15.3552 12.8502 15.2828 12.7744 15.2915 12.6838C15.2991 12.6051 15.371 12.5465 15.4516 12.5465H17.7016C18.2448 12.5465 18.6997 12.109 18.6896 11.5734C18.6796 11.0551 18.2492 10.6382 17.7207 10.6382H15.4516C15.372 10.6382 15.2997 10.5806 15.2915 10.5022C15.2824 10.4119 15.3538 10.3345 15.4452 10.3345H18.6141C19.1445 10.3345 19.5904 9.92232 19.6013 9.40023C19.6127 8.86345 19.1741 8.42602 18.6322 8.42602H15.4518C15.3714 8.42602 15.2995 8.3684 15.2917 8.28962C15.2826 8.19908 15.3542 8.12226 15.4454 8.12226L15.445 8.12206Z" fill="#59D28C"/>
+<path d="M8.80822 6.64664C8.80702 6.18139 8.42579 5.79492 7.93646 5.79492L6.26522 5.80139C5.78604 5.80335 5.39725 6.18825 5.39844 6.65958L5.41815 13.5521C5.41934 14.0223 5.80675 14.404 6.28632 14.404H6.2899L7.96115 14.3976C8.44033 14.3956 8.82912 14.0103 8.82793 13.539L8.80822 6.64664Z" fill="#59D28C"/>
+<path d="M9.26185 20.7321L9.70559 22.0759C9.74441 22.1935 9.60764 22.2915 9.50591 22.2188L7.92186 21.0858C7.87647 21.0533 7.81476 21.0533 7.76937 21.0858L6.18512 22.219C6.08339 22.2917 5.94663 22.1939 5.98545 22.0761L6.59064 20.2429C6.60796 20.1904 6.58905 20.1326 6.54346 20.1L4.95901 18.9669C4.85728 18.8942 4.90964 18.7358 5.03526 18.7358H6.99337C7.04951 18.7358 7.09928 18.7002 7.1168 18.6476L7.72219 16.8143C7.76101 16.6967 7.93003 16.6967 7.96885 16.8143L8.57384 18.6476C8.59116 18.7002 8.64093 18.7358 8.69727 18.7358H10.6554C10.781 18.7358 10.8334 18.8942 10.7316 18.9669L9.32655 19.9719C9.30445 19.9877 9.27777 19.9962 9.2503 19.9962H8.67378C8.54816 19.9962 8.4958 20.1545 8.59753 20.2272L9.21447 20.6684C9.23656 20.6842 9.25309 20.7066 9.26165 20.7323L9.26185 20.7321Z" fill="#D0FF00"/>
+<path d="M4.36574 18.967L4.82183 20.3484C4.86065 20.466 4.72388 20.5638 4.62215 20.4911L3.13247 19.4256C3.08708 19.3931 3.02536 19.3931 2.97997 19.4256L1.49029 20.4911C1.38856 20.5638 1.25179 20.466 1.29061 20.3484L1.85957 18.6246C1.87689 18.5721 1.85798 18.5143 1.81239 18.482L0 17.1856H2.2406C2.29674 17.1856 2.34651 17.1499 2.36403 17.0974L2.93299 15.3733C2.97181 15.2558 3.14083 15.2558 3.17965 15.3733L3.74861 17.0974C3.76593 17.1499 3.81569 17.1856 3.87203 17.1856H5.71349C5.83911 17.1856 5.89146 17.3439 5.78973 17.4166L4.42586 18.3922C4.40377 18.4081 4.37709 18.4165 4.34962 18.4165H4.03747C3.91185 18.4165 3.85949 18.5748 3.96122 18.6476L4.31876 18.9033C4.34086 18.9192 4.35738 18.9415 4.36594 18.9672L4.36574 18.967Z" fill="#D0FF00"/>
+<path d="M18.6783 20.2427L19.2833 22.0759C19.3221 22.1935 19.1854 22.2913 19.0836 22.2186L17.4996 21.0854C17.4542 21.0529 17.3925 21.0529 17.3471 21.0854L15.763 22.2186C15.6613 22.2913 15.5246 22.1935 15.5634 22.0759L16.0067 20.7325C16.0153 20.7068 16.0316 20.6844 16.0539 20.6686L16.671 20.227C16.7728 20.1543 16.7204 19.996 16.5948 19.996H16.0183C15.9908 19.996 15.9641 19.9873 15.942 19.9717L14.5371 18.9667C14.4354 18.894 14.4878 18.7356 14.6134 18.7356H16.5715C16.6276 18.7356 16.6774 18.7 16.6949 18.6474L17.2999 16.8143C17.3387 16.6967 17.5078 16.6967 17.5466 16.8143L18.1516 18.6474C18.1689 18.7 18.2187 18.7356 18.275 18.7356H20.2331C20.3587 18.7356 20.4111 18.894 20.3094 18.9667L18.7253 20.0998C18.6799 20.1324 18.6608 20.19 18.6781 20.2425L18.6783 20.2427Z" fill="#D0FF00"/>
+<path d="M23.4095 18.6248L23.9784 20.3486C24.0173 20.4662 23.8805 20.564 23.7788 20.4913L22.2891 19.4258C22.2437 19.3933 22.182 19.3933 22.1366 19.4258L20.6469 20.4913C20.5452 20.564 20.4084 20.4662 20.4472 20.3486L20.9033 18.9668C20.9119 18.9411 20.9282 18.9188 20.9505 18.9029L21.3074 18.6476C21.4092 18.5748 21.3568 18.4165 21.2312 18.4165H20.9196C20.8922 18.4165 20.8655 18.4079 20.8434 18.3922L19.4795 17.4166C19.3778 17.3439 19.4301 17.1856 19.5558 17.1856H21.397C21.4532 17.1856 21.5029 17.1499 21.5204 17.0974L22.0894 15.3733C22.1282 15.2558 22.2972 15.2558 22.3361 15.3733L22.905 17.0974C22.9223 17.1499 22.9721 17.1856 23.0285 17.1856H24.8697C24.9953 17.1856 25.0477 17.3439 24.946 17.4166L23.4563 18.4821C23.4109 18.5147 23.3918 18.5723 23.4091 18.6248H23.4095Z" fill="#D0FF00"/>
+<path d="M12.5109 18.2845L11.8697 20.227C11.8524 20.2795 11.8026 20.3152 11.7463 20.3152H9.67149C9.54587 20.3152 9.49351 20.4736 9.59524 20.5463L11.2739 21.7468C11.3192 21.7794 11.3384 21.837 11.321 21.8895L10.6798 23.832C10.641 23.9496 10.7778 24.0474 10.8795 23.9747L12.5581 22.7741C12.6035 22.7416 12.6652 22.7416 12.7106 22.7741L14.3892 23.9747C14.4909 24.0474 14.6277 23.9496 14.5889 23.832L13.9476 21.8895C13.9303 21.837 13.9492 21.7792 13.9948 21.7468L15.6734 20.5463C15.7752 20.4736 15.7228 20.3152 15.5972 20.3152H13.5224C13.4663 20.3152 13.4165 20.2795 13.399 20.227L12.7578 18.2845C12.7189 18.1669 12.5499 18.1669 12.5111 18.2845H12.5109Z" fill="#D0FF00"/>
+</svg>

img/ico--heart.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.0018 19L9.06655 18.5449C3.15167 15.6492 -0.234072 11.2989 0.0126076 6.9079C0.158989 4.28307 1.63906 2.15666 3.87544 1.35756C4.54229 1.11919 5.21727 1 5.88412 1C7.65153 1 9.02589 1.82077 9.99634 2.66862C10.9695 1.82077 12.3439 1 14.1086 1C14.7781 1 15.4531 1.11919 16.1172 1.35756C18.3536 2.15666 19.8337 4.28307 19.9828 6.9079C20.2295 11.2989 16.8437 15.6492 10.9288 18.5449L9.99905 19H10.0018Z" fill="#2ECC71"/>
+</svg>

img/ico--now1.svg

@@ -0,0 +1,25 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_84_97)">
+<path d="M89.7468 61.6518H91.1395C93.5768 61.6518 93.8289 59.0225 93.8289 59.0225V37.3725C92.1 25.7937 81.4265 24.1172 81.4265 24.1172H71.1371C71.1371 24.1172 59.9473 26.0711 58.7227 37.3725V59.0225C58.7227 59.0225 58.9748 61.6518 61.4241 61.6518H62.8528" fill="#2ECC71"/>
+<path d="M91.1515 62.5563H89.7588C89.2665 62.5563 88.8583 62.1462 88.8583 61.6517C88.8583 61.1572 89.2665 60.7471 89.7588 60.7471H91.1515C92.7483 60.7471 92.9404 59.0103 92.9524 58.9379V37.4448C91.3676 27.1445 82.2069 25.1785 81.3664 25.0217H71.2332C70.2246 25.2147 60.7277 27.3375 59.6351 37.4689V59.0103C59.6711 59.2153 59.9113 60.7351 61.4361 60.7351H62.8648C63.3571 60.7351 63.7653 61.1451 63.7653 61.6397C63.7653 62.1342 63.3571 62.5443 62.8648 62.5443H61.4361C58.8547 62.5443 57.9542 60.2888 57.8462 59.0947V37.3604C59.1309 25.4197 70.885 23.2366 70.993 23.2125C71.0411 23.2125 71.0891 23.2004 71.1491 23.2004H81.4385C81.4385 23.2004 81.5345 23.2004 81.5825 23.2004C81.6906 23.2125 92.9284 25.1182 94.7414 37.2156C94.7414 37.2639 94.7414 37.3 94.7414 37.3483V58.9982C94.6213 60.2767 93.7208 62.5322 91.1515 62.5322V62.5563Z" fill="#111111"/>
+<path d="M65.5781 93.0231V58.9622H86.9733V93.0231" fill="#2ECC71"/>
+<path d="M87.8737 37.3845H86.0728V93.1196H87.8737V37.3845Z" fill="#111111"/>
+<path d="M66.4787 37.3845H64.6777V93.1196H66.4787V37.3845Z" fill="#111111"/>
+<path d="M76.8761 64.45H75.0752V93.0231H76.8761V64.45Z" fill="#111111"/>
+<path d="M77.5245 27.2168H75.1233V29.7376H77.5245V27.2168Z" fill="#211449"/>
+<path d="M77.5245 32.2463H75.1233V42.8964H77.5245V32.2463Z" fill="#111111"/>
+<path d="M76.3238 22.2958C71.7254 22.2958 67.9795 18.4121 67.9795 13.6479C67.9795 8.88372 71.7254 5 76.3238 5C80.9222 5 84.6682 8.88372 84.6682 13.6479C84.6682 18.4121 80.9222 22.2958 76.3238 22.2958ZM76.3238 6.82125C72.722 6.82125 69.7804 9.88481 69.7804 13.66C69.7804 17.4352 72.71 20.4987 76.3238 20.4987C79.9377 20.4987 82.8672 17.4352 82.8672 13.66C82.8672 9.88481 79.9377 6.82125 76.3238 6.82125Z" fill="#111111"/>
+<path d="M51.1106 60.2163L46.4282 53.7394L41.7457 47.2505L37.0633 53.7394L32.3809 60.2163H36.1628V93.0229H47.3166V60.2163H51.1106Z" fill="#CCFFE1"/>
+<path d="M47.3167 93.9275H36.1629C35.6706 93.9275 35.2624 93.5174 35.2624 93.0229V61.1329H32.3689C32.0327 61.1329 31.7206 60.9399 31.5645 60.6384C31.4084 60.3369 31.4444 59.975 31.6365 59.6976L41.0014 46.7197C41.3376 46.2493 42.118 46.2493 42.4541 46.7197L51.819 59.6976C52.0231 59.975 52.0471 60.3369 51.891 60.6384C51.735 60.9399 51.4228 61.1329 51.0866 61.1329H48.1931V93.0229C48.1931 93.5174 47.7849 93.9275 47.2927 93.9275H47.3167ZM37.0633 92.1183H46.4162V60.2283C46.4162 59.7338 46.8244 59.3237 47.3167 59.3237H49.3457L41.7458 48.7943L34.1458 59.3237H36.1749C36.6671 59.3237 37.0753 59.7338 37.0753 60.2283V92.1183H37.0633Z" fill="#111111"/>
+<path d="M27.1221 77.5123L22.4396 71.0234L17.7572 64.5344L13.0748 71.0234L8.39233 77.5123H12.1743V93.0231H23.3281V77.5123H27.1221Z" fill="#CCFFE1"/>
+<path d="M23.3281 93.9276H12.1743C11.6821 93.9276 11.2739 93.5176 11.2739 93.0231V78.4169H8.38037C8.04419 78.4169 7.73203 78.2239 7.57595 77.9224C7.41987 77.6208 7.45589 77.259 7.64799 76.9816L17.0129 64.0037C17.349 63.5333 18.1294 63.5333 18.4656 64.0037L27.8305 76.9816C28.0226 77.259 28.0586 77.6208 27.9025 77.9224C27.7464 78.2239 27.4343 78.4169 27.0981 78.4169H24.2046V93.0231C24.2046 93.5176 23.7964 93.9276 23.3041 93.9276H23.3281ZM13.0748 92.1185H22.4277V77.5123C22.4277 77.0178 22.8359 76.6077 23.3281 76.6077H25.3572L17.7572 66.0782L10.1573 76.6077H12.1863C12.6786 76.6077 13.0868 77.0178 13.0868 77.5123V92.1185H13.0748Z" fill="#111111"/>
+<path d="M90.9472 92.2029H9.62891V94.0121H90.9472V92.2029Z" fill="#222222"/>
+<path d="M100 92.2029H95.0415V94.0121H100V92.2029Z" fill="#211449"/>
+<path d="M5.49886 92.2029H0V94.0121H5.49886V92.2029Z" fill="#211449"/>
+</g>
+<defs>
+<clipPath id="clip0_84_97">
+<rect width="100" height="100" fill="white"/>
+</clipPath>
+</defs>
+</svg>

img/ico--now2.svg

@@ -0,0 +1,31 @@
+<svg width="115" height="100" viewBox="0 0 115 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M49.7572 89.0437V75.9578C47.5525 60.0535 33.9211 57.7634 33.9211 57.7634H20.7936C20.7936 57.7634 6.51971 60.4435 4.95752 75.9578V89.0437" fill="#73E2DE"/>
+<path d="M49.7571 89.9873C49.2406 89.9873 48.8123 89.5595 48.8123 89.0436V76.0333C46.7587 61.513 34.9919 58.9336 33.8328 58.7197H20.8818C19.6471 58.9713 7.31336 61.8905 5.88975 76.071V89.0562C5.88975 89.5721 5.474 89.9999 4.94487 89.9999C4.41574 89.9999 4 89.5721 4 89.0562V75.9703C5.61259 59.8395 20.4534 56.87 20.6046 56.8449C20.6676 56.8449 20.718 56.8323 20.781 56.8323H33.9084C33.9084 56.8323 34.0092 56.8323 34.0596 56.8449C34.1982 56.87 48.3965 59.4369 50.6768 75.8445C50.6768 75.8823 50.6768 75.9326 50.6768 75.9703V89.0562C50.6768 89.5721 50.2485 89.9999 49.7319 89.9999L49.7571 89.9873Z" fill="#211449"/>
+<path d="M41.9464 75.958H40.0566V89.2829H41.9464V75.958Z" fill="#211449"/>
+<path d="M14.6329 75.958H12.7432V89.2829H14.6329V75.958Z" fill="#211449"/>
+<path d="M36.907 44.4765C36.907 49.8996 32.6487 54.2909 27.4078 54.2909C22.1669 54.2909 17.9087 49.8996 17.9087 44.4765C17.9087 39.0534 22.1669 34.6621 27.4078 34.6621C32.6487 34.6621 36.907 39.066 36.907 44.4765Z" fill="white"/>
+<path d="M27.4079 55.2469C21.6504 55.2469 16.9639 50.4152 16.9639 44.4888C16.9639 38.5624 21.6504 33.7307 27.4079 33.7307C33.1653 33.7307 37.8519 38.5624 37.8519 44.4888C37.8519 50.4152 33.1653 55.2469 27.4079 55.2469ZM27.4079 35.6055C22.6961 35.6055 18.8536 39.5816 18.8536 44.4762C18.8536 49.3708 22.6835 53.3469 27.4079 53.3469C32.1323 53.3469 35.9621 49.3708 35.9621 44.4762C35.9621 39.5816 32.1323 35.6055 27.4079 35.6055Z" fill="#211449"/>
+<path d="M29.1212 61.3242H26.6016V64.0421H29.1212V61.3242Z" fill="white"/>
+<path d="M29.0709 66.584H26.5513V78.7262H29.0709V66.584Z" fill="white"/>
+<path d="M110.028 89.0437V75.9578C107.823 60.0535 94.1916 57.7634 94.1916 57.7634H81.0641C81.0641 57.7634 66.7902 60.4435 65.228 75.9578V89.0437" fill="#2ECC71"/>
+<path d="M110.028 89.9873C109.511 89.9873 109.083 89.5595 109.083 89.0436V76.0333C107.029 61.513 95.2624 58.9336 94.1033 58.7197H81.1523C79.9176 58.9713 67.5839 61.8905 66.1603 76.071V89.0562C66.1603 89.5721 65.7445 89.9999 65.2154 89.9999C64.6863 89.9999 64.2705 89.5721 64.2705 89.0562V75.9703C65.8831 59.8395 80.7239 56.87 80.8751 56.8449C80.9381 56.8449 80.9885 56.8323 81.0515 56.8323H94.1789C94.1789 56.8323 94.2797 56.8323 94.3301 56.8449C94.4687 56.87 108.667 59.4369 110.947 75.8445C110.947 75.8823 110.947 75.9326 110.947 75.9703V89.0562C110.947 89.5721 110.519 89.9999 110.002 89.9999L110.028 89.9873Z" fill="#211449"/>
+<path d="M102.217 75.958H100.327V89.2829H102.217V75.958Z" fill="#211449"/>
+<path d="M74.9034 75.958H73.0137V89.2829H74.9034V75.958Z" fill="#211449"/>
+<path d="M97.1775 44.4765C97.1775 49.8996 92.9192 54.2909 87.6783 54.2909C82.4374 54.2909 78.1792 49.8996 78.1792 44.4765C78.1792 39.0534 82.4374 34.6621 87.6783 34.6621C92.9192 34.6621 97.1775 39.066 97.1775 44.4765Z" fill="white"/>
+<path d="M87.6784 55.2469C81.921 55.2469 77.2344 50.4152 77.2344 44.4888C77.2344 38.5624 81.921 33.7307 87.6784 33.7307C93.4358 33.7307 98.1224 38.5624 98.1224 44.4888C98.1224 50.4152 93.4358 55.2469 87.6784 55.2469ZM87.6784 35.6055C82.9666 35.6055 79.1241 39.5816 79.1241 44.4762C79.1241 49.3708 82.954 53.3469 87.6784 53.3469C92.4028 53.3469 96.2327 49.3708 96.2327 44.4762C96.2327 39.5816 92.4028 35.6055 87.6784 35.6055Z" fill="#211449"/>
+<path d="M89.3917 61.3242H86.8721V64.0421H89.3917V61.3242Z" fill="white"/>
+<path d="M89.341 66.584H86.8213V78.7262H89.341V66.584Z" fill="white"/>
+<path d="M54.3433 39.1035V39.8333C54.3433 41.5445 55.2377 42.9412 56.359 42.9412H59.7857C60.8944 42.9412 61.8015 41.5445 61.8015 39.8333V39.1035H54.3433Z" fill="#2ECC71"/>
+<path d="M59.7858 43.5703H56.359C54.8724 43.5703 53.7134 41.9346 53.7134 39.8333V39.1035C53.7134 38.7512 53.9905 38.4744 54.3433 38.4744H61.8015C62.1543 38.4744 62.4314 38.7512 62.4314 39.1035V39.8333C62.4314 41.922 61.2724 43.5703 59.7858 43.5703ZM54.9732 39.7326V39.8333C54.9732 41.2929 55.7039 42.312 56.359 42.312H59.7858C60.4409 42.312 61.1716 41.2929 61.1716 39.8333V39.7326H54.9732Z" fill="#211449"/>
+<path d="M66.6768 24.9733C66.6768 20.3052 62.8847 16.5178 58.2107 16.5178C53.5367 16.5178 49.7446 20.3052 49.7446 24.9733C49.7446 27.2633 50.6643 29.3394 52.1509 30.8619C53.1588 33.2023 53.9021 35.6811 53.9021 35.6811H62.3682C62.5193 34.6996 63.313 33.0261 63.8044 31.6546C65.4925 30.0315 66.6894 27.5527 66.6894 24.9607L66.6768 24.9733Z" fill="#F1CE4B"/>
+<path d="M62.3556 36.3102H53.8895C53.6123 36.3102 53.3604 36.1214 53.2848 35.8572C53.2848 35.832 52.5667 33.4539 51.6092 31.2142C49.9966 29.5156 49.1147 27.3011 49.1147 24.9733C49.1147 19.9654 53.1966 15.8887 58.2107 15.8887C63.2249 15.8887 67.3067 19.9654 67.3067 24.9733C67.3067 27.5527 66.1981 30.1699 64.3335 32.0195C64.1823 32.4222 64.006 32.8625 63.8422 33.2904C63.4642 34.234 63.0737 35.2029 62.9855 35.7943C62.9351 36.0963 62.6705 36.3227 62.3682 36.3227L62.3556 36.3102ZM54.3431 35.0519H61.8517C62.028 34.3976 62.343 33.6175 62.6705 32.7996C62.8595 32.3341 63.0485 31.8685 63.1997 31.4407C63.2375 31.3526 63.2879 31.2646 63.3509 31.2016C65.039 29.5785 66.0343 27.2507 66.0343 24.9607C66.0343 20.6449 62.5194 17.1343 58.1981 17.1343C53.8769 17.1343 50.362 20.6449 50.362 24.9607C50.362 27.0117 51.1557 28.9368 52.5793 30.4089C52.6297 30.4593 52.6801 30.5222 52.7053 30.5977C53.4738 32.3718 54.0785 34.2089 54.3431 35.0393V35.0519Z" fill="#211449"/>
+<path d="M62.2674 35.593H53.877V39.1036H62.2674V35.593Z" fill="#2ECC71"/>
+<path d="M62.2675 39.7327H53.877C53.5242 39.7327 53.2471 39.4558 53.2471 39.1035V35.593C53.2471 35.2407 53.5242 34.9639 53.877 34.9639H62.2675C62.6202 34.9639 62.8974 35.2407 62.8974 35.593V39.1035C62.8974 39.4558 62.6202 39.7327 62.2675 39.7327ZM54.5069 38.4744H61.6376V36.2221H54.5069V38.4744Z" fill="#211449"/>
+<path d="M58.8531 10H57.5933V14.0767H58.8531V10Z" fill="#211449"/>
+<path d="M69.3767 15.4995L66.7778 17.7686L67.607 18.7159L70.2059 16.4468L69.3767 15.4995Z" fill="#211449"/>
+<path d="M72.321 24.9858H69.1714V26.2441H72.321V24.9858Z" fill="#211449"/>
+<path d="M46.7058 15.0616L45.8765 16.0088L48.4844 18.2866L49.3138 17.3395L46.7058 15.0616Z" fill="#211449"/>
+<path d="M46.5573 24.9858H42.8408V26.2441H46.5573V24.9858Z" fill="#211449"/>
+<path d="M49.8206 43.563L41.0532 51.7L42.7684 53.5434L51.5358 45.4065L49.8206 43.563Z" fill="#7FC9EA"/>
+<path d="M65.6655 43.5653L63.9497 45.4082L72.7142 53.5482L74.4301 51.7054L65.6655 43.5653Z" fill="#7FC9EA"/>
+</svg>

img/ico--now3.svg

@@ -0,0 +1,21 @@
+<svg width="100" height="100" viewBox="0 0 100 100" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_84_167)">
+<path d="M25.0493 78.2537V63.9728C26.7523 47.026 42.3169 44.1104 42.3169 44.1104H56.643C56.643 44.1104 71.5169 46.6095 73.9225 63.9728V78.2537" fill="#2ECC71"/>
+<path d="M73.9343 79.1463C73.446 79.1463 73.0411 78.7417 73.0411 78.2538V64.0442C70.7904 48.0496 57.7861 45.241 56.5833 45.0149H42.4239C41.1378 45.2767 27.5262 48.4542 25.9543 64.068V78.2538C25.9543 78.7417 25.5613 79.1463 25.0611 79.1463C24.561 79.1463 24.168 78.7417 24.168 78.2538V63.9728C25.9185 46.4787 42.0071 43.2654 42.1739 43.2416C42.2334 43.2416 42.281 43.2297 42.3406 43.2297H56.6667C56.6667 43.2297 56.762 43.2297 56.8096 43.2416C56.9644 43.2654 72.3504 46.0621 74.8274 63.8538C74.8274 63.8895 74.8274 63.9371 74.8274 63.9728V78.2538C74.8274 78.7417 74.4225 79.1463 73.9343 79.1463Z" fill="#111111"/>
+<path d="M65.2648 63.9849H63.4785V78.5276H65.2648V63.9849Z" fill="#111111"/>
+<path d="M35.4694 63.9849H33.6831V78.5276H35.4694V63.9849Z" fill="#111111"/>
+<path d="M59.9056 29.6152C59.9056 35.5418 55.2613 40.3378 49.5451 40.3378C43.8289 40.3378 39.1846 35.5418 39.1846 29.6152C39.1846 23.6886 43.8289 18.8926 49.5451 18.8926C55.2613 18.8926 59.9056 23.7005 59.9056 29.6152Z" fill="white"/>
+<path d="M49.5452 41.2304C43.3408 41.2304 38.2915 36.0178 38.2915 29.6152C38.2915 23.2125 43.3408 18 49.5452 18C55.7496 18 60.7989 23.2125 60.7989 29.6152C60.7989 36.0178 55.7496 41.2304 49.5452 41.2304ZM49.5452 19.7851C44.3292 19.7851 40.0778 24.1884 40.0778 29.6152C40.0778 35.0419 44.3292 39.4452 49.5452 39.4452C54.7612 39.4452 59.0126 35.03 59.0126 29.6152C59.0126 24.2003 54.7612 19.7851 49.5452 19.7851Z" fill="#111111"/>
+<path d="M23.9414 68.3523L28.288 77.1351L37.9936 78.5513L30.9675 85.3942L32.6228 95.0577L23.9414 90.4997L15.26 95.0577L16.9153 85.3942L9.88916 78.5513L19.5947 77.1351L23.9414 68.3523Z" fill="#F1CE4B"/>
+<path d="M15.2601 95.9504C15.0695 95.9504 14.8909 95.8909 14.7361 95.7838C14.4622 95.5815 14.3193 95.2483 14.3788 94.915L15.9627 85.7157L9.26999 79.1941C9.03182 78.9561 8.93655 78.599 9.04373 78.2777C9.15091 77.9564 9.42481 77.7184 9.77016 77.6708L19.0113 76.326L23.1436 67.9478C23.2984 67.6384 23.608 67.448 23.9415 67.448C24.2868 67.448 24.5964 67.6384 24.7393 67.9478L28.8716 76.326L38.1128 77.6708C38.4462 77.7184 38.732 77.9564 38.8392 78.2777C38.9464 78.599 38.8511 78.9561 38.6129 79.1941L31.9203 85.7157L33.5041 94.915C33.5637 95.2483 33.4208 95.5934 33.1469 95.7838C32.873 95.9861 32.5038 96.0099 32.2061 95.8552L23.9415 91.5114L15.6649 95.8552C15.5339 95.9266 15.391 95.9623 15.2481 95.9623L15.2601 95.9504ZM11.8065 79.1703L17.5346 84.7518C17.749 84.9541 17.8442 85.2516 17.7966 85.5372L16.439 93.4155L23.5247 89.6906C23.7867 89.5597 24.0963 89.5597 24.3583 89.6906L31.4439 93.4155L30.0863 85.5372C30.0387 85.2516 30.134 84.9541 30.3483 84.7518L36.0764 79.1703L28.1571 78.0159C27.8594 77.9683 27.6093 77.7898 27.4783 77.528L23.9415 70.3518L20.3927 77.528C20.2617 77.7898 20.0116 77.9683 19.7139 78.0159L11.7946 79.1703H11.8065Z" fill="#111111"/>
+<path d="M75.1484 68.3523L79.4951 77.1351L89.2006 78.5513L82.1745 85.3942L83.8417 95.0577L75.1484 90.4997L66.467 95.0577L68.1223 85.3942L61.0962 78.5513L70.8018 77.1351L75.1484 68.3523Z" fill="#F1CE4B"/>
+<path d="M83.8418 95.9501C83.6989 95.9501 83.556 95.9144 83.425 95.843L75.1485 91.4992L66.8839 95.843C66.5862 95.9978 66.217 95.9739 65.9431 95.7716C65.6692 95.5693 65.5263 95.2361 65.5858 94.9029L67.1697 85.7036L60.477 79.1819C60.2389 78.9439 60.1436 78.5869 60.2508 78.2656C60.3579 77.9442 60.6318 77.7062 60.9772 77.6586L70.2183 76.3138L74.3506 67.9357C74.6483 67.3287 75.6487 67.3287 75.9583 67.9357L80.0906 76.3138L89.3317 77.6586C89.6652 77.7062 89.951 77.9442 90.0581 78.2656C90.1653 78.5869 90.07 78.9439 89.8319 79.1819L83.1392 85.7036L84.7231 94.9029C84.7826 95.2361 84.6397 95.5812 84.3658 95.7716C84.211 95.8906 84.0204 95.9382 83.8418 95.9382V95.9501ZM75.1485 89.607C75.2914 89.607 75.4343 89.6427 75.5653 89.7141L82.651 93.4391L81.2934 85.5608C81.2457 85.2751 81.341 84.9776 81.5554 84.7753L87.2834 79.1938L79.3642 78.0395C79.0664 77.9918 78.8164 77.8133 78.6854 77.5515L75.1366 70.3753L71.5997 77.5515C71.4687 77.8133 71.2186 77.9918 70.9209 78.0395L63.0017 79.1938L68.7297 84.7753C68.9441 84.9776 69.0394 85.2751 68.9917 85.5608L67.6341 93.4391L74.7198 89.7141C74.8508 89.6427 74.9937 89.607 75.1366 89.607H75.1485Z" fill="#111111"/>
+<path d="M49.1041 65.77L54.5464 76.7902L66.717 78.5634L57.9046 87.1439L59.9886 99.2589L49.1041 93.5346L38.2196 99.2589L40.2917 87.1439L31.4912 78.5634L43.6619 76.7902L49.1041 65.77Z" fill="#F1CE4B"/>
+<path d="M59.9889 100.151C59.846 100.151 59.7031 100.116 59.5721 100.044L49.1044 94.5459L38.6367 100.044C38.339 100.199 37.9698 100.175 37.6959 99.9727C37.422 99.7704 37.2791 99.4372 37.3386 99.1039L39.3393 87.4531L30.8603 79.2058C30.6222 78.9678 30.5269 78.6108 30.6341 78.2894C30.7412 77.9681 31.0151 77.7301 31.3605 77.6825L43.0667 75.9807L48.3065 65.3771C48.6042 64.7701 49.6046 64.7701 49.9142 65.3771L55.154 75.9807L66.8602 77.6825C67.1936 77.7301 67.4795 77.9681 67.5866 78.2894C67.6938 78.6108 67.5985 78.9678 67.3604 79.2058L58.8933 87.4531L60.894 99.1039C60.9535 99.4372 60.8106 99.7823 60.5367 99.9727C60.3819 100.08 60.1914 100.139 60.0127 100.139L59.9889 100.151ZM33.4088 79.182L40.9231 86.501C41.1375 86.7033 41.2328 87.0008 41.1851 87.2864L39.4107 97.6163L48.6995 92.737C48.9615 92.6061 49.2711 92.6061 49.5331 92.737L58.8219 97.6163L57.0475 87.2864C56.9998 87.0008 57.0951 86.7033 57.3095 86.501L64.8238 79.182L54.4395 77.6706C54.1418 77.623 53.8917 77.4445 53.7607 77.1827L49.1163 67.781L44.4719 77.1827C44.3409 77.4445 44.0908 77.623 43.7931 77.6706L33.4088 79.182Z" fill="#111111"/>
+</g>
+<defs>
+<clipPath id="clip0_84_167">
+<rect width="100" height="100" fill="white"/>
+</clipPath>
+</defs>
+</svg>

img/ico--process--arrow.svg

@@ -0,0 +1,3 @@
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.25 22.5L18.75 15L11.25 7.5" stroke="#C4C4C4" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

img/ico--process--circle2.svg

@@ -0,0 +1,15 @@
+<svg width="80" height="80" viewBox="0 0 80 80" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_84_652)">
+<path d="M7.89387 42.5462C7.76106 42.5295 7.62826 42.5044 7.48715 42.5044C5.11321 42.5044 3.1792 44.4445 3.1792 46.8445C3.1792 48.4584 4.05905 49.8466 5.35392 50.5908C6.81481 49.5121 8.49151 48.726 10.3259 48.3413C9.00613 46.7274 8.13458 44.7288 7.89387 42.5462Z" fill="#DDEE81"/>
+<path d="M74.6712 50.5908C75.9661 49.8382 76.8459 48.45 76.8459 46.8445C76.8459 44.4528 74.9202 42.5044 72.538 42.5044C72.3969 42.5044 72.2724 42.5295 72.1396 42.5462C71.8988 44.7288 71.0273 46.7274 69.7075 48.3413C71.5336 48.726 73.2186 49.5121 74.6712 50.5908Z" fill="#DDEE81"/>
+<path d="M40.0168 27.8369C44.9057 27.8369 48.8734 23.8397 48.8734 18.9143C48.8734 13.9889 44.9057 10 40.0168 10C35.1278 10 31.1602 13.9972 31.1602 18.9226C31.1602 23.8481 35.1278 27.8453 40.0168 27.8453V27.8369Z" fill="#DDEE81"/>
+<path d="M42.3823 67.8341V61.1525C42.3823 54.8557 46.8147 49.5874 52.6998 48.3414C51.131 46.4264 50.193 43.9762 50.193 41.3086C50.193 38.641 51.1808 36.0821 52.816 34.1421C50.9318 32.5365 48.4997 31.5581 45.8353 31.5581H34.2063C31.5418 31.5581 29.1098 32.5365 27.2256 34.1421C28.8525 36.0738 29.8485 38.5741 29.8485 41.3086C29.8485 44.0431 28.9106 46.4264 27.3418 48.3414C33.2268 49.5957 37.6593 54.864 37.6593 61.1525V67.8341C37.6593 69.0299 36.6964 69.9999 35.5095 69.9999H44.557C43.37 69.9999 42.4072 69.0299 42.4072 67.8341H42.3823Z" fill="#DDEE81"/>
+<path d="M37.6427 67.8342V61.1526C37.6427 54.8558 33.2102 49.5875 27.3252 48.3415C28.894 46.4265 29.8319 43.9763 29.8319 41.3087C29.8319 38.6411 28.8442 36.0822 27.209 34.1422C25.1919 31.7422 22.1789 30.2202 18.8172 30.2202C12.7495 30.2202 7.81075 35.1958 7.81075 41.3087C7.81075 41.7268 7.83565 42.145 7.88545 42.5547C8.12617 44.7373 8.99772 46.7359 10.3175 48.3498C8.49139 48.7345 6.80639 49.5206 5.34551 50.5993C2.10832 52.9826 0 56.8209 0 61.161V67.8425C0 69.0383 0.962855 70.0084 2.14982 70.0084H35.4762C36.6632 70.0084 37.6261 69.0383 37.6261 67.8425L37.6427 67.8342ZM18.8338 34.5519C22.5275 34.5519 25.5323 37.5791 25.5323 41.3004C25.5323 45.0216 22.5275 48.0488 18.8338 48.0488C15.1401 48.0488 12.1353 45.0216 12.1353 41.3004C12.1353 37.5791 15.1401 34.5519 18.8338 34.5519ZM33.343 65.6683H4.32455V61.161C4.32455 56.3275 8.22577 52.4056 13.0234 52.4056H24.6524C29.4501 52.4056 33.343 56.3359 33.343 61.161V65.6683Z" fill="#2ECC71"/>
+<path d="M74.6712 50.5909C73.2103 49.5122 71.5336 48.7345 69.7075 48.3415C71.0273 46.7275 71.8988 44.7289 72.1395 42.5463C72.181 42.1366 72.2142 41.7268 72.2142 41.3087C72.2142 35.1958 67.2755 30.2202 61.2078 30.2202C57.8461 30.2202 54.8413 31.7505 52.8243 34.1422C51.1974 36.0739 50.2014 38.5742 50.2014 41.3087C50.2014 44.0432 51.1393 46.4265 52.7081 48.3415C46.8231 49.5958 42.3906 54.8641 42.3906 61.1526V67.8342C42.3906 69.03 43.3535 70 44.5404 70H77.8669C79.0538 70 80.0167 69.03 80.0167 67.8342V61.1526C80.0167 56.8125 77.9084 52.9742 74.6712 50.5909ZM61.1995 34.5519C64.8932 34.5519 67.898 37.5791 67.898 41.3004C67.898 45.0216 64.8932 48.0488 61.1995 48.0488C57.5058 48.0488 54.501 45.0216 54.501 41.3004C54.501 37.5791 57.5058 34.5519 61.1995 34.5519ZM75.7087 65.6683H46.6903V61.161C46.6903 56.3275 50.5915 52.4056 55.3809 52.4056H67.0098C71.8075 52.4056 75.7087 56.3359 75.7087 61.161V65.6683Z" fill="#2ECC71"/>
+</g>
+<defs>
+<clipPath id="clip0_84_652">
+<rect width="80" height="80" fill="white"/>
+</clipPath>
+</defs>
+</svg>

img/ico--swiper--left.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12 14L7 9L12 4" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

img/ico--swiper--left2.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.25 13.5L6.75 9L11.25 4.5" stroke="#222222" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

img/ico--swiper--pause.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<line x1="4.75" y1="3.75" x2="4.75" y2="14.25" stroke="#222222" stroke-width="1.5" stroke-linecap="round"/>
+<line x1="13.75" y1="3.75" x2="13.75" y2="14.25" stroke="#222222" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

img/ico--swiper--play.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.6288 8.15781L5.05875 2.11667C4.94188 2.04375 4.82156 2 4.68406 2C4.30938 2 4.00344 2.32812 4.00344 2.72917H4V15.2708H4.00344C4.00344 15.6719 4.30938 16 4.68406 16C4.825 16 4.94187 15.949 5.06906 15.876L14.6288 9.84219C14.8556 9.64167 15 9.33906 15 9C15 8.66094 14.8556 8.36198 14.6288 8.15781Z" fill="#222222"/>
+</svg>

img/ico--swiper--right.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 14L11 9L6 4" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

img/ico--swiper--right2.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6.75 13.5L11.25 9L6.75 4.5" stroke="#222222" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

img/numb--service1.svg

@@ -0,0 +1,3 @@
+<svg width="82" height="60" viewBox="0 0 82 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M22.0981 59.02C18.3581 59.02 15.1281 58.51 12.4081 57.49C9.74479 56.4133 7.53479 54.7417 5.77812 52.475C4.07812 50.2083 2.80312 47.2617 1.95312 43.635C1.10312 39.9517 0.678124 35.5317 0.678124 30.375C0.678124 24.9917 1.10312 20.43 1.95312 16.69C2.80312 12.95 4.10646 9.91833 5.86312 7.595C7.61979 5.27166 9.82979 3.57166 12.4931 2.495C15.1565 1.41833 18.3298 0.879996 22.0131 0.879996C25.8665 0.879996 29.1248 1.41833 31.7881 2.495C34.5081 3.57166 36.7181 5.27166 38.4181 7.595C40.1748 9.91833 41.4498 12.95 42.2431 16.69C43.0365 20.43 43.4331 24.9917 43.4331 30.375C43.4331 37.2883 42.6965 42.8417 41.2231 47.035C39.7498 51.2283 37.4265 54.2883 34.2531 56.215C31.1365 58.085 27.0848 59.02 22.0981 59.02ZM22.0981 47.8C23.4581 47.8 24.6198 47.5733 25.5831 47.12C26.6031 46.61 27.4531 45.7317 28.1331 44.485C28.8131 43.2383 29.2948 41.4817 29.5781 39.215C29.9181 36.8917 30.0881 33.945 30.0881 30.375C30.0881 26.635 29.9181 23.575 29.5781 21.195C29.2948 18.815 28.8415 16.9733 28.2181 15.67C27.5948 14.31 26.7731 13.375 25.7531 12.865C24.7898 12.355 23.5715 12.1 22.0981 12.1C20.6815 12.1 19.4631 12.355 18.4431 12.865C17.4231 13.375 16.5731 14.2817 15.8931 15.585C15.2698 16.8883 14.7881 18.7583 14.4481 21.195C14.1648 23.575 14.0231 26.635 14.0231 30.375C14.0231 33.945 14.1931 36.8917 14.5331 39.215C14.8731 41.4817 15.3831 43.2383 16.0631 44.485C16.7431 45.7317 17.5648 46.61 18.5281 47.12C19.5481 47.5733 20.7381 47.8 22.0981 47.8ZM68.1416 58V16.265L55.1366 23.235L51.0566 13.63L69.9266 1.985H81.4016V58H68.1416Z" fill="#E0FEED"/>
+</svg>

index.html

@@ -3,7 +3,7 @@
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>이거머지</title>
+  <title>M&A 궁합</title>
   <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">  
   <link rel="stylesheet" href="./css/main.css" />
   <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
@@ -98,24 +98,352 @@
                   <source srcset="./img/main_vs01.png" media="(max-width: 768px)">
                   <img src="./img/main_vs01.png" alt="메인 비주얼 이미지 1">
                 </picture>
+                <div class="main--visual--txt">
+                  <h3>M&A 궁합으로2</h3>
+                  <p>서로 잘 맞는 매수자♡매도자 찾기</p>
+                </div>
               </div>
             </div>
           </div>
         </div>        
         <div class="main--visual--pager">
-          <div class="main--visual--fraction"></div>
-          <div class="main--visual--pagination"></div>
           <div class="main--visual--progress">
-            <div class="progress-bar"></div>
-            <span class="progress-text">01</span>
+            <p class="progress-title"></p>
+            <div class="main--visual--progress--bar">
+              <span class="progress-text">01</span>
+              <div class="progress-bar"></div>
+            </div>
           </div>
+          <div class="main--visual--pagination"></div>
           <div class="prev--next--wrap">
             <button type="button" class="prev--btn"></button>
+            <div class="main--visual--fraction"></div>
             <button type="button" class="next--btn"></button>
           </div>
         </div>
       </section>
     </article>
+
+    <article>
+      <section>
+        <div class="section--container p--120">
+          <div class="title--wrap big le">
+            <h2>매도기업, 매수기업의 M&A 성공<br>
+            <strong>M&A 궁합이 책임지겠습니다!</strong></h2>
+            <p>M&A를 통해 세상은 빠르게 발전하는데 왜 대부분의 기업들은 M&A 활용을 잘하지 못할까요?<br> 많은 기업들이 매각을 못해서 하루아침에 도산하고, 법정관리 절차를 밟다가 무너지고 잘나가는 기업도 매수타이밍, 매도타이밍을 놓쳐서 <br>
+            M&A로 무장한 외국기업에 뒤처지고 위험에 처하곤 합니다. <br>세계적으로나 국내에서나 시가총액 1위부터 수 백위까지 잘나가는 기업은 대부분 M&A로 커왔으며, 지금도 물밑에서는 치열한 M&A 싸움이 <br>
+            벌어지고 있습니다.</p>
+          </div>
+        </div>
+      </section>
+    </article>
+
+    <article>
+      <section class="gray--section">
+        <div class="section--container p--100">
+          <div class="title--wrap">
+            <h2 class="mb--80">이제부터 <strong>M&A 궁합이</strong>
+            </h2>
+          </div>
+          <div class="now--box--wrap">
+            <div class="box--top">
+              <div class="box">
+                <div class="box--img">
+                  <img src="./img/ico--now1.svg" alt="">
+                </div>
+                <p>
+                  <strong>성장형 궁합</strong>을 통해<br>
+                   기업 성장력을 높이겠습니다.
+                </p>
+              </div>
+              <div class="box">
+                <div class="box--img">
+                  <img src="./img/ico--now2.svg" alt="">
+                </div>
+                <p>
+                  <strong>시너지 궁합</strong>을 통해<br>
+                   사업 시너지를 창출시키겠습니다.
+                </p>
+              </div>
+              <div class="box">
+                <div class="box--img">
+                  <img src="./img/ico--now3.svg" alt="">
+                </div>
+                <p>
+                  <strong>기업가치 궁합</strong>을 통해<br>
+                   기업가치(=주식가치)를 크게 높이겠습니다.
+                </p>
+              </div>
+            </div>
+            <div class="box--bot">
+              <div class="box">
+                <p>누구든지 M&A궁합을 통해 <strong>M&A 꿈★</strong>을 실현하십시오</p>
+              </div>
+              <div class="box">
+                <p>지금부터 M&A궁합이 <strong>여러분의 M&A를 <br>직접</strong> 도와드리겠습니다</p>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </article>
+
+    <article>
+      <section>
+        <div class="section--container pt--120">
+          <div class="title--wrap">
+            <h2 class="">M&A궁합을 선택해야하는 <strong>6가지 이유</strong></h2>
+          </div>
+        </div>
+        <div class="mna--reason--wrap reason--swiper pb--120">
+          <div class="btn--wrap">
+            <button class="prev--btn"></button>
+            <button class="play--btn"></button>
+            <button class="next--btn"></button>
+          </div>
+          <div class="swiper-wrapper">
+            <div class="swiper-slide">
+              <div class="reason--box">
+                <span>01</span>
+                <dl>
+                  <dt>처음부터 성사될 때까지 그 어떤수수료도 제로</dt>
+                  <dd>착수금 없음, 월별 자문료 없음, 가치평가
+                  수수료 없음, 중간 수수료 없음 성공을 못하
+                  면 성공될 때까지 비용 0입니다.</dd>
+                </dl>
+              </div>
+            </div>
+            <div class="swiper-slide">
+              <div class="reason--box">
+                <span>02</span>
+                <dl>
+                  <dt>M&A궁합의 겉궁합, 속궁합 분석 능력 탁월</dt>
+                  <dd>기업의 사업아이템, 매출액, 이익, 자산,
+                  부채의 숫자는 보면 바로 알 수 있는 겉궁합
+                  에 해당합니다. 대부분의 M&A전문조직은
+                  겉궁급만을 보고 판단합니다.
+                  그러나 겉궁합도 좋지만 속궁합이 더 중요
+                  합니다. 매도기업과의 시너지창출, 매도기
+                  업의 성장력, 핵심역량, 미래가치는 속궁합
+                  에서 나오기 때문입니다.</dd>
+                </dl>
+              </div>
+            </div>
+            <div class="swiper-slide">
+              <div class="reason--box">
+                <span>03</span>
+                <dl>
+                  <dt>매치드의 수천개 B2B매칭 시스템 활용 → M&A매칭 탁월</dt>
+                  <dd>M&A에서 가장 중요한 것은 어떤 상대방과 매칭하느냐 입니다. 제휴·협력의 매칭의 노하우가 매도기업의 성장력, 잠재능력 등 최고의 가치를 만들 수 있는 매수기업과 매칭합니다.</dd>
+                </dl>
+              </div>
+            </div>
+            <div class="swiper-slide">
+              <div class="reason--box">
+                <span>04</span>
+                <dl>
+                  <dt>매도기업/매수기업 시너지 발굴에 탁월</dt>
+                  <dd>매치드는 제휴/협력 매칭 플랫폼 조직으로서 대기업, 중기업, 소기업이 연결되어 있습니다. <br>제휴, 협력의 논리에 “지분+경영권”을 삽입하면 시너지 창출 M&A가 됩니다. M&A궁합(매치드)은 바로 양사간 시너지 분석, 창출에 탁월합니다.</dd>
+                </dl>
+              </div>
+            </div>
+            <div class="swiper-slide">
+              <div class="reason--box">
+                <span>05</span>
+                <dl>
+                  <dt>딜 구조 설계 능력 탁월</dt>
+                  <dd>제휴/협력의 조건 설계 노하우는 “딜 구조 설계 능력”을 크게 높였습니다. M&A궁합은 매치드의 제휴·협력의 시너지, 가치창출 설계능력을 보유하고 있어 Deal 구조설계 능력이 매우 뛰어납니다.</dd>
+                </dl>
+              </div>
+            </div>
+            <div class="swiper-slide">
+              <div class="reason--box">
+                <span>06</span>
+                <dl>
+                  <dt>탁월한 기업분석 능력/기업성장 전략 능력 보유</dt>
+                  <dd>M&A궁합(매치드)의 주특기가 제휴/협력 논리에 맞는 상대방 선별과 두 조직의 시너지 및 성장 전략을 수행하는 것입니다 .M&A 후 매도기업과 매수기업의 강한 협력/협업을 통해 기업가치를 키워야 하는 것이 필수입니다. 이것이 M&A 궁합의 주특기입니다.</dd>
+                </dl>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </article>
+
+    <article>
+      <section class="green--section">
+        <div class="section--container p--100">
+          <div class="growth--logic--wrap">
+            <div class="title--box">
+              <h2 class="mb--50">M&A를 통한<br> <strong>성장 논리</strong></h2>
+              <div class="btn--wrap">
+                <a href="#">매도 상담신청</a>
+                <a href="#">매수 상담신청</a>
+              </div>
+            </div>
+            <div class="logic--box">
+              <dl>
+                <dt><strong>대중화</strong>되고 있는 M&A</dt>
+                <dd>이제 M&A는 스피드시대에 맞게 대중화되고
+                  있습니다. 초기엔 큰 기업 위주의 M&A였으나
+                  지금은 모든 기업이 M&A관심을 갖고 뛰어 들
+                  고 있습니다. 큰 기업이 M&A를 통해 기업성
+                  장, 기업가치가 높아지고 있다면 중소기업도
+                  마찬가지 논리가 적용됩니다.</dd>
+              </dl>
+            </div>
+            <div class="logic--box">
+              <dl>
+                <dt><strong>접근과 진행</strong>을 돕는 M&A</dt>
+                <dd>그러나 M&A는 하고 싶다고 되는 것은 아닙니
+                  다. 많은 M&A자문 조직들이 있지만 제대로
+                  진행되지 않고 있습니다. M&A진행에 놓여 있
+                  는 장애물/허들이 많기 때문입니다.</dd>
+              </dl>
+            </div>
+            <div class="logic--box special">
+              <dl>
+                <dt>나만의 M&A 궁합</dt>
+                <dd>M&A 궁합은 대기업, 중견기업, 중기업, 소기업,
+                  크로스보더 M&A 모두 진행하고 있습니다.
+                  누구나 나만의 M&A(맞춤식 M&A)가 이루어 질
+                  수 있도록 “M&A궁합”이 돕겠습니다.</dd>
+              </dl>
+            </div>
+            <div class="logic--box">
+              <dl>
+                <dt><strong>누구나!</strong> 편하게 진행</dt>
+                <dd>M&A궁합은 이것들을 제거했습니다.<br>
+                  누구나 M&A(매도,매수)를 편하게 진행 할 수
+                  있습니다.</dd>
+              </dl>
+            </div>
+            <div class="logic--box">
+              <dl>
+                <dt>다양한 <strong>수익과 가치</strong> 성장</dt>
+                <dd>그래서 기업매수를 통해서 매출을 올리고, 성
+                  장력을 높이고, 기업가치를 높일 수 있습니다.
+                  매도를 통해서 자금을 회수하고, 희망하는 기
+                  업을 인수하든지, 다른 목적으로 편하게 활용
+                  할 수 있습니다</dd>
+              </dl>
+            </div>
+          </div>
+        </div>
+      </section>
+    </article>
+
+    <article>
+      <section>
+        <div class="section--container p--120">
+          <div class="title--wrap mb--70">
+            <h2>M&A 의뢰자님께 <strong>최상의 서비스 제공</strong></h2>
+          </div>
+          <div class="best--service--wrap">
+            <div class="service--box">
+              <span class="service--numb"></span>
+              <div class="service--img">
+                <img src="./img/bg--service1.svg" alt="">
+              </div>
+              <h3><strong>나만의 M&A가 필요</strong> <br>하신가요?</h3>
+              <p>궁합을 통한 맞춤식 M&A로 해결합니다.</p>
+            </div>
+            <div class="service--box">
+              <span class="service--numb"></span>
+              <div class="service--img">
+                <img src="./img/bg--service2.svg" alt="">
+              </div>
+              <h3>기업매도 희망하는데 <strong>진정한 가치를 인정</strong>받고 싶으신가요?</h3>
+              <p>매도 기업에 대한 체계적인 시스템 분석을 통해 숨어있는 능력/가치를 파악합니다.</p>
+            </div>
+            <div class="service--box">
+              <span class="service--numb"></span>
+              <div class="service--img">
+                <img src="./img/bg--service3.svg" alt="">
+              </div>
+              <h3>기업매수를 하고 싶은데 <strong>원하는 기업</strong>을 만날 수 있나요?</h3>
+              <p>궁합을 통한 맞춤식 M&A로 해결합니다.</p>
+            </div>
+          </div>
+        </div>
+      </section>
+    </article>
+
+    <article>
+      <section class="gray--section">
+        <div class="section--container p--120">
+          <div class="process--plan--wrap">
+            <div class="title--wrap le">
+              <span>M&A compatibility Architecture</span>
+              <h2><strong>M&A 궁합</strong> 진행 설계도</h2>
+              <p>M&A에서 매수기업 (매수자)과 매도기업 간의 궁합이 잘 맞으면, 진행도 순탄하고, M&A 후에도 기업의 높은 성장, 가치 극대화를 달성합니다.</p>
+            </div>
+            <div class="content--wrap">
+              <h3><i class="ico"></i> M&A궁합 진행 방향</h3>
+              <div class="direct--wrap mb--110">
+                <div class="circle">
+                  <i class="ico"></i>
+                  <p>겉 궁합</p>
+                </div>
+                <span class="bar"></span>
+                <div class="circle">
+                  <i class="ico"></i>
+                  <p>속 궁합</p>
+                </div>
+                <span class="bar"></span>
+                <div class="circle">
+                  <i class="ico"></i>
+                  <p>기업 성장력 제고</p>
+                </div>
+                <span class="bar"></span>
+                <div class="circle">
+                  <i class="ico"></i>
+                  <p>기업 가치 극대화 실현</p>
+                </div>
+              </div>
+              <div class="process--wrap">
+                <div class="process--title">
+                  <strong>9</strong> PROCESS
+                </div>
+                <div class="process--cont">
+                  <div class="process--top">
+                    <div class="process--side">
+                      <div class="circle">사람과 <strong>사람</strong></div>
+                      <span class="line"></span>
+                      <div class="circle">사람과 <strong>기업</strong></div>
+                      <span class="line"></span>
+                      <div class="circle">기업과 <strong>기업</strong></div>
+                    </div>
+                    <div class="process--circle">
+                      <div class="circle">
+                        <i class="ico"></i>
+                        <p>3가지의 <strong>결합</strong></p>
+                      </div>
+                      <div class="circle">
+                        <i class="ico"></i>
+                        <p>3가지의 <strong>매칭/융합</strong></p>
+                      </div>
+                      <div class="circle">
+                        <i class="ico"></i>
+                        <p>3가지의 <strong>Flow</strong></p>
+                      </div>
+                    </div>
+                    <div class="process--side right">
+                      <div class="circle"><strong>효율과</strong> 진행</div>
+                      <span class="line"></span>
+                      <div class="circle"><strong>전략적</strong> 진행</div>
+                      <span class="line"></span>
+                      <div class="circle"><strong>가치창출</strong> 진행</div>
+                    </div>
+                  </div>
+                  <div class="process--bot"></div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </section>
+    </article>
   </main>
 </body>
 </html>

js/common.js

@@ -21,10 +21,10 @@
 
     const swiper = new Swiper('.main--visual', {
       loop: true,
-      // autoplay: {
-      //   delay: 5000,
-      //   disableOnInteraction: false,
-      // },
+      autoplay: {
+        delay: 5000,
+        disableOnInteraction: false,
+      },
       pagination: {
         el: '.main--visual--fraction',
         type: "fraction",
@@ -33,6 +33,11 @@
         },
         formatFractionTotal: function (number) {
           return number.toString().padStart(2, '0');
+        },
+        renderFraction: function (currentClass, totalClass) {
+          return '<span class="' + currentClass + '"></span>' +
+                 '<span class="fraction-separator"></span>' +
+                 '<span class="' + totalClass + '"></span>';
         }
       },
       navigation: {
@@ -56,13 +61,17 @@
           const progressPercent = ((currentIndex + 1) / totalSlides) * 100;
           const progressBar = document.querySelector('.main--visual--progress .progress-bar');
           const progressText = document.querySelector('.main--visual--progress .progress-text');
+          const progressTitle = document.querySelector('.main--visual--progress .progress-title');
           
           if (progressBar) {
-            progressBar.style.background = `linear-gradient(to right, #fff ${progressPercent}%, rgba(255,255,255,0.3) ${progressPercent}%)`;
+            progressBar.style.background = `linear-gradient(to right, #fff ${progressPercent}%, rgba(0,0,0,0.2) ${progressPercent}%)`;
           }
           if (progressText) {
             progressText.textContent = `${(currentIndex + 1).toString().padStart(2, '0')}`;
           }
+          if (progressTitle && this.slideTitles && this.slideTitles[currentIndex]) {
+            progressTitle.textContent = this.slideTitles[currentIndex];
+          }
         },
         init: function () {
           // 초기 동그라미 pagination 생성
@@ -83,6 +92,7 @@
           // 초기 progress bar 설정
           const progressBar = document.querySelector('.main--visual--progress .progress-bar');
           const progressText = document.querySelector('.main--visual--progress .progress-text');
+          const progressTitle = document.querySelector('.main--visual--progress .progress-title');
           
           if (progressBar) {
             progressBar.style.background = `linear-gradient(to right, #fff 50%, rgba(255,255,255,0.3) 50%)`;
@@ -90,28 +100,52 @@
           if (progressText) {
             progressText.textContent = `01`;
           }
+          
+          // 각 슬라이드의 제목 가져오기
+          const slideTitles = [];
+          this.slides.forEach(slide => {
+            const titleElement = slide.querySelector('.main--visual--txt h3');
+            if (titleElement) {
+              slideTitles.push(titleElement.textContent);
+            }
+          });
+          
+          // 첫 번째 슬라이드 제목 설정
+          if (progressTitle && slideTitles.length > 0) {
+            progressTitle.textContent = slideTitles[0];
+          }
+          
+          // 슬라이드 제목 배열을 swiper 인스턴스에 저장
+          this.slideTitles = slideTitles;
         }
       }      
     });
 
-    const swiper2 = new Swiper('.prof--swiper.pc', {            
+    const swiper2 = new Swiper('.reason--swiper', {            
       loop: true,
-      slidesPerView: "auto",
-      spaceBetween: 30,
+      slidesPerView: 5,
+      spaceBetween: 40,
+      autoplay: {
+        delay: 3000,
+        disableOnInteraction: false,
+      },
       navigation: {
-        nextEl: ".prof--swiper--action .btn--wrap .next--btn",
-        prevEl: ".prof--swiper--action .btn--wrap .prev--btn",
+        nextEl: ".reason--swiper .btn--wrap .next--btn",
+        prevEl: ".reason--swiper .btn--wrap .prev--btn",
       },
     });
 
-    const swiper3 = new Swiper('.prof--swiper.mo', {            
-      loop: true,
-      slidesPerView: 1,
-      spaceBetween: 15,
-      navigation: {
-        nextEl: ".prof--swiper--action .btn--wrap .next--btn",
-        prevEl: ".prof--swiper--action .btn--wrap .prev--btn",
-      },
+    // play/pause 버튼 기능
+    $(".reason--swiper .btn--wrap .play--btn").on("click", function(){
+      if($(this).hasClass("pause")){
+        // 현재 일시정지 상태이면 재생
+        swiper2.autoplay.start();
+        $(this).removeClass("pause");
+      } else {
+        // 현재 재생 상태이면 일시정지
+        swiper2.autoplay.stop();
+        $(this).addClass("pause");
+      }
     });
 
     $(window).on("scroll", function(){

scss/main.scss

@@ -305,27 +305,37 @@ main{
     }
     .main--visual--pager{
       position: absolute;
-      left:50%;
+      left: 50%;
       transform: translateX(-50%);
-      bottom:35px;
+      bottom:30px;
       z-index: 9;
       display: flex;
-      justify-content: flex-end;
+      justify-content: center;
       align-items: center;
-      width:100%;
-      max-width:1200px;
-      gap:11px;
+      height: 90px;
+      padding: 20px 35px;
+      border-radius: 1000px;
+      background: rgba(255, 255, 255, 0.60);
+      backdrop-filter: blur(2px);
       .prev--next--wrap{
+        padding-top: 20px;
         @include flex-center;
-        gap:11px;
+        display: flex;
+        gap: 15px;
+        align-items: center;
+        justify-content: center;
         button{
           @include flex-center;
-          width: 50px;
-          height: 50px;          
-          border-radius: 50px;
-          border:0px;          
-          background: rgba(255, 255, 255, 0.80);
-          backdrop-filter: blur(2px);
+          width: 18px;
+          height: 18px;
+          border: none;
+          background-color: transparent;
+          background-image: url(../img/ico--swiper--left.svg);
+          background-repeat: no-repeat;
+          background-position: center;
+          &.next--btn{
+            background-image: url(../img/ico--swiper--right.svg);
+          }
         }
       }
       .play--pause{
@@ -344,62 +354,575 @@ main{
       .main--visual--fraction{
         display: flex;
         align-items: center;
-        justify-content: center;        
-        border-radius: 100px;
-        background: rgba(255, 255, 255, 0.80);
-        backdrop-filter: blur(2px);
-        width:80px;
-        height:50px;
-        span{
-          color: #737373;          
-          font-size: 16px;
+        justify-content: center;
+        span{ 
+          font-size: 13px;
           font-style: normal;                   
+          line-height: 1;
           letter-spacing: -0.32px;
+          font-weight: 500;
+          color: rgba(0, 0, 0, 0.50);
           &.swiper-pagination-current{
-            color:#333;
-            font-weight: 500;
+            color:#000;
+            font-weight: 800;
           }
-          &.swiper-pagination-total{
-            color: #737373;
+          &.fraction-separator{
+            background-color: #000;
+            width: 1px;
+            height: 12px;
+            display: inline-block;
+            margin: 0 10px;
           }
         }
       }
       .main--visual--pagination{
         display: flex;
-        gap: 8px;
+        margin-right: 20px;
+        gap: 5px;
         align-items: center;
         justify-content: center;
+        padding-top: 20px;
         .swiper-pagination-bullet{
-          width: 12px;
-          height: 12px;
+          width: 34px;
+          height: 34px;
           border-radius: 50%;
-          background: rgba(255, 255, 255, 0.5);
           border: none;
+          opacity: 1;
+          background-color: transparent;
           cursor: pointer;
-          transition: all 0.3s ease;
+          position: relative;
+          &::after{
+            position: absolute;
+            content: '';
+            width: 4px;
+            height: 4px;
+            background-color: #000;
+            border-radius: 50%;
+            left: calc(50% - 2px);
+            top: calc(50% - 2px);
+            display: inline-block;
+          }
           &.swiper-pagination-bullet-active{
-            background: #fff;
-            transform: scale(1.2);
+            border: 1px solid rgba(0, 0, 0, 0.50);
           }
         }
       }
       .main--visual--progress{
         display: flex;
-        align-items: center;
-        gap: 10px;
+        justify-content: center;
+        flex-direction: column;
+        margin-right: 20px;
+        .main--visual--progress--bar{
+          display: flex;
+          align-items: center;
+        }
+        .progress-title{
+          padding-left: 30px;
+          color: #000;
+          font-size: 16px;
+          font-weight: 500;
+          line-height: 1;
+          margin-bottom: 4px;
+        }
         .progress-bar{
-          width: 100px;
-          height: 4px;
-          background: rgba(255, 255, 255, 0.3);
-          border-radius: 2px;
+          width: 200px;
+          height: 2px;
+          background-color: rgba(0, 0, 0, 0.2)!important;
+          border-radius: 100px;
           position: relative;
           overflow: hidden;
         }
         .progress-text{
-          color: #fff;
-          font-size: 14px;
+          color: #000;
+          font-size: 15px;
           font-weight: 500;
-          min-width: 30px;
+          width: 30px;
+        }
+      }
+    }
+  }
+
+  .mna--reason--wrap{
+    overflow-x: hidden;
+    .btn--wrap{
+      display: flex;
+      justify-content: center;
+      padding: 40px 0;
+      gap: 10px;
+      button{
+        border: 1px solid #dadada;
+        background-color: #fff;
+        width: 50px;
+        height: 50px;
+        border-radius: 50%;
+        background-repeat: no-repeat;
+        background-position: center;
+        &.play--btn{
+          background-image: url(../img/ico--swiper--pause.svg);
+          &.pause{
+            background-image: url(../img/ico--swiper--play.svg);
+          }
+        }
+        &.prev--btn{
+          background-image: url(../img/ico--swiper--left2.svg);
+        }
+        &.next--btn{
+          background-image: url(../img/ico--swiper--right2.svg);
+        }
+      }
+    }
+    .swiper-slide{
+      transform: translateX(50%);
+      height: auto;
+      .reason--box{
+        border-radius: 30px;
+        border: 1px solid #EEE;
+        background: #FFF;
+        box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.08);
+        height: 100%;
+        display: flex;
+        padding: 40px 45px 70px;
+        flex-direction: column;
+        >span{
+          color: #1aaf59;
+          font-size: 18px;
+          font-weight: 700;
+          line-height: 1;
+          text-decoration-line: underline;
+          text-decoration-style: solid;
+          text-decoration-skip-ink: auto;
+          text-decoration-thickness: auto;
+          text-underline-offset: auto;
+          text-underline-position: from-font;
+          margin-bottom: 45px;
+        }
+        dt{
+          color: #000;
+          font-size: 20px;
+          font-weight: 700;
+          letter-spacing: -0.2px;
+          margin-bottom: 35px;
+        }
+        dd{
+          color: #333;
+          font-size: 15px;
+          font-weight: 300;
+          letter-spacing: -0.15px;
+        }
+      }
+    }
+  }
+
+  .gray--section{
+    background-color: #f9f9f9;
+  }
+
+  .green--section{
+    background-color: #2ECC71;
+  }
+
+  .section--container{
+    max-width: 1200px;
+    width: 100%;
+    margin: 0 auto;
+    &.p--120{
+      padding: 120px 0;
+    }
+    &.p--100{
+      padding: 100px 0;
+    }
+    .title--wrap{
+      >h2{
+        text-align: center;
+        color: #000;
+        font-size: 35px;
+        font-weight: 300;
+        strong{
+          font-weight: 700;
+        }
+      }
+      >p{
+        text-align: center;
+      }
+      &.big{
+        >h2{
+          color: #000;
+          font-size: 50px;
+          font-weight: 300;
+          letter-spacing: -0.5px;
+          margin-bottom: 60px;
+          line-height: 1.4;
+          strong{
+            font-weight: 700;
+          }
+        }
+        >p{
+          color: #000;
+          font-weight: 300;
+          line-height: 1.7;
+          font-size: 18px;
+        }
+      }
+      &.le{
+        >h2, >p{
+          text-align: left;
+        }
+      }
+    }
+    .now--box--wrap{
+      .box--top{
+        display: flex;
+        margin-bottom: 90px;
+        justify-content: space-between;
+        .box{
+          gap: 40px;
+          width: 33.333%;
+          display: flex;
+          justify-content: center;
+          flex-direction: column;
+          align-items: center;
+          text-align: center;
+          >p{
+            color: #000;
+            font-size: 18px;
+            font-weight: 300;
+            strong{
+              font-weight: 700;
+            }
+          }
+        }
+      }
+      .box--bot{
+        display: flex;
+        gap: 40px;
+        .box{
+          width: 50%;
+          border-radius: 20px;
+          padding: 0 40px;
+          display: flex;
+          align-items: center;
+          height: 120px;
+          background-size: 100%;
+          background-image: url(../img/bg--now1.svg);
+          &:last-child{
+            background-image: url(../img/bg--now2.svg);
+          }
+        }
+      }
+    }
+    .growth--logic--wrap{
+      display: flex;
+      flex-wrap: wrap;
+      gap: 40px;
+      >div{
+        width: calc((100% - 120px) / 3);
+      }
+      .title--box{
+        width: calc((100% - 120px) / 3 + 40px);
+        h2{
+          color: #fff;
+          font-size: 45px;
+          font-weight: 300;
+          letter-spacing: -0.45px;
+          strong{
+            font-weight: 800;
+            color: #fff;
+          }
+        }
+        .btn--wrap{
+          display: flex;
+          gap: 15px;
+          a{
+            display: inline-block;
+            padding: 20px 30px;
+            color: #fff;
+            border-radius: 1000px;
+            border: 1px solid #fff;
+            line-height: 1;
+          }
+        }
+      }
+      .logic--box{
+        border-radius: 25px;
+        background-color: #fff;
+        min-height: 350px;
+        padding: 50px 45px 70px;
+        dt{
+          color: #333;
+          font-size: 22px;
+          font-weight: 700;
+          letter-spacing: -0.22px;
+          margin-bottom: 30px;
+          strong{
+            color :#1aaf59;
+            font-weight: 700;
+          }
+        }
+        dd{
+          color: #444;
+          font-size: 15px;
+          font-weight: 400;
+          letter-spacing: -0.15px;
+          line-height: 1.7;
+        }
+        &.special{
+          width: calc((100% - 120px) / 3 + 40px);
+          background-color: #139e4e;
+          background-image: url(../img/ico--logic.svg);
+          background-repeat: no-repeat;
+          background-position: right bottom;
+          dt{
+            color :#fff;
+            text-decoration-line: underline;
+            text-decoration-style: solid;
+            text-decoration-skip-ink: auto;
+            text-decoration-thickness: auto;
+            text-underline-offset: auto;
+            text-underline-position: from-font;
+          }
+          dd{
+            color: #fff;
+          }
+        }
+      }
+    }
+    .best--service--wrap{
+      display: flex;
+      gap: 40px;
+      .service--box{
+        padding: 40px 45px 70px;
+        border: 1px solid #e5e5e5;
+        border-radius: 25px;
+        position: relative;
+        width: calc((100% - 80px) / 3);
+        &:nth-child(2){
+          .service--numb{
+            background-image: url(../img/numb--service2.svg);
+          }
+        }
+        &:nth-child(3){
+          .service--numb{
+            background-image: url(../img/numb--service3.svg);
+          }
+        }
+        .service--numb{
+          position: absolute;
+          right: 0;
+          display: inline-block;
+          width: 100px;
+          height: 100px;
+          background-repeat: no-repeat;
+          background-position: top right;
+          top: 10px;
+          background-image: url(../img/numb--service1.svg);
+        }
+        h3{
+          margin-top: 40px;
+          margin-bottom: 30px;
+          font-size: 22px;
+          color: #191919;
+          font-weight: 300;
+          letter-spacing: -0.22px;
+          line-height: 1.4;
+          strong{
+            font-weight: 700;
+          }
+        }
+        p{
+          color: #333;
+          font-size: 16px;
+          letter-spacing: -0.16px;
+          line-height: 1.7;
+          font-weight: 300;
+        }
+      }
+    }
+    .process--plan--wrap{
+      .title--wrap{
+        margin-bottom: 70px;
+        span{
+          color: #1aaf59;
+          font-size: 15px;
+          text-transform: uppercase;
+          display: inline-block;
+          margin-bottom: 25px;
+        }
+        h2{
+          font-size: 30px;
+          font-weight: 400;
+          margin-bottom: 25px;
+        }
+        p{
+          font-size: 18px;
+          font-weight: 300;
+        }
+      }
+      .content--wrap{
+        h3{
+          .ico{
+            width: 20px;
+            height: 20px;
+            background-image: url(../img/ico--heart.svg);
+            display: inline-block;
+            background-repeat: no-repeat;
+            background-position: center;
+            margin-right: 15px;
+          }
+          color: #000;
+          font-size: 20px;
+          font-weight: 700;
+          letter-spacing: -0.2px;
+          display: flex;
+          align-items: center;
+          margin-bottom: 40px;
+        }
+        .direct--wrap{
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          gap: 20px;
+          .circle{
+            display: flex;
+            min-width: 190px;
+            justify-content: center;
+            gap: 12px;
+            padding: 20px 40px;
+            background-color: #2ECC71;
+            align-items: center;
+            border-radius: 100px;
+            p{
+              color: #fff;
+              font-size: 17px;
+              font-weight: 600;
+              line-height: 1;
+              letter-spacing: -0.17px;
+            }
+            .ico{
+              width: 25px;
+              height: 25px;
+              display: inline-block;
+              background-position: center;
+              background-repeat: no-repeat;
+              background-size: 100%;
+              background-image: url(../img/ico--direct1.svg);
+            }
+            &:nth-of-type(2){
+              background-color: #188345;
+              .ico{
+                background-image: url(../img/ico--direct2.svg);
+              }
+            }
+            &:nth-of-type(3){
+              .ico{
+                background-image: url(../img/ico--direct3.svg);
+              }
+            }
+            &:nth-of-type(4){
+              background-color: #188345;
+              .ico{
+                background-image: url(../img/ico--direct4.svg);
+              }
+            }
+          }
+          .bar{
+            width: 70px;
+            height: 1px;
+            border-bottom: 3px dashed #2ecc71;
+          }
+        }
+        .process--wrap{
+          .process--title{
+            text-align: center;
+            font-weight: 700;
+            font-size: 25px;
+            line-height: 1;
+            color: #333;
+            margin-bottom: 45px;
+            strong{
+              color: #188345;
+            }
+          }
+          .process--cont{
+            .process--top{
+              display: flex;
+              align-items: center;
+              justify-content: space-between;
+              .process--side{
+                width: 123px;
+                display: flex;
+                gap: 15px;
+                flex-direction: column;
+                justify-content: center;
+                .circle{
+                  color: #444;
+                  font-size: 16px;
+                  text-align: center;
+                  padding: 20px 0;
+                  border-radius: 100px;
+                  border: 2px solid #ddee81;
+                  font-weight: 600;
+                  line-height: 1;
+                  letter-spacing: -0.16px;
+                  strong{
+                    font-weight: 600;
+                    color: #1aaf59;
+                  }
+                }
+                .line{
+                  height: 50px;
+                  width: 50%;
+                  border-right: 3px dashed #ddee81;
+                }
+                &.right{
+
+                }
+              }
+              .process--circle{
+                width: calc(100% - 346px);
+                height: 390px;
+                display: flex;
+                background-image: url(../img/bg--process--circle.svg);
+                background-repeat: no-repeat;
+                background-position: center;
+                align-items: center;
+                justify-content: center;
+                background-size: 100%;
+                .circle{
+                  width: 28%;
+                  display: flex;
+                  flex-direction: column;
+                  gap: 35px;
+                  align-items: center;
+                  .ico{
+                    width: 80px;
+                    height: 80px;
+                    background-position: center;
+                    background-size: 100%;
+                    background-repeat: no-repeat;
+                    display: inline-block;
+                  }
+                  &:nth-child(1){
+                    .ico{
+                      background-image: url(../img/ico--process--circle1.svg);
+                    }
+                  }
+                  &:nth-child(2){
+                    .ico{
+                      background-image: url(../img/ico--process--circle2.svg);
+                    }
+                  }
+                  &:nth-child(3){
+                    .ico{
+                      background-image: url(../img/ico--process--circle3.svg);
+                    }
+                  }
+                }
+              }
+            }
+            .process--bot{
+
+            }
+          }
         }
       }
     }

scss/reset.scss

@@ -8,13 +8,14 @@
 
 
 
-div, ol, ul , li , a , p , h1 , h2 , h3, h4 ,h5, h6, span, section, header, main, footer{
+div, ol, ul , li , a , p , h1 , h2 , h3, h4 ,h5, h6, span, strong, section, header, main, footer, dl, dt, dd{
   padding:0px;
   margin:0px;
   list-style: none;
   box-sizing: border-box;
   text-decoration: none;
   color: #191919;
+  word-break: keep-all;
 }
 
 body{