웹/반응형 작업 완료

assets/css/media.css

@@ -0,0 +1,475 @@
+@media (max-width: 1600px) {
+  header .header--line--banner--wrap {
+    background-image: url(../img/img--top--banner--mo.svg);
+    background-position: left 20px bottom;
+    background-size: contain;
+    padding: 0 20px;
+  }
+  header .header--contents--wrap .header--contents .header--gnb--wrap {
+    padding: 0 20px;
+  }
+  header .header--contents--wrap .header--contents .header--gnb--wrap .gnb--wrap {
+    height: 80px;
+  }
+  header .header--contents--wrap .header--contents .header--gnb--wrap .gnb--wrap > ul li a {
+    padding: 15px 20px;
+  }
+  main {
+    padding-top: 160px !important;
+  }
+  main.actv {
+    padding-top: 80px !important;
+  }
+  main .section--container .mna--impor--wrap {
+    gap: 70px;
+  }
+  footer .footer--container {
+    padding: 0 20px;
+  }
+}
+@media (max-width: 1200px) {
+  header .header--contents--wrap .header--contents .header--gnb--wrap .gnb--wrap > ul {
+    display: none;
+  }
+  header .header--contents--wrap .header--contents .header--gnb--wrap .gnb--wrap .user--wrap {
+    margin-left: auto;
+  }
+  header .header--contents--wrap .header--contents .header--gnb--wrap .gnb--wrap .ham--wrap {
+    margin-left: 25px;
+    width: 24px;
+    height: 24px;
+    cursor: pointer;
+    background-image: url(../img/ico--ham.svg);
+  }
+  header .header--ham--wrap {
+    display: block;
+  }
+  main .section--container {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+  main .section--container .title--wrap .title {
+    font-size: 35px;
+  }
+  main .section--container .mna--impor--wrap {
+    flex-direction: column-reverse;
+    height: auto;
+    position: relative;
+  }
+  main .section--container .mna--impor--wrap::after {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    bottom: 20px;
+    right: -100px;
+    width: 304px;
+    height: 472px;
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-image: url(../img/bg--wedding--mo.svg);
+  }
+  main .section--container .mna--impor--wrap .desc--wrap {
+    width: 100%;
+  }
+  main .section--container .mna--impor--wrap .desc--wrap h3 {
+    text-align: center;
+  }
+  main .section--container .mna--impor--wrap .desc--wrap p {
+    text-align: center;
+  }
+  main .section--container .mna--impor--wrap .desc--wrap::after {
+    display: none;
+  }
+  main .section--container .mna--impor--wrap .img--wrap {
+    align-self: self-start;
+    margin-left: -20px;
+    width: 70%;
+  }
+  main .section--container .mna--impor--wrap .img--wrap::before {
+    width: 100%;
+    background-size: cover;
+  }
+  main .section--container .mna--maching--wrap .txt--wrap {
+    width: 40%;
+  }
+  main .section--container .mna--maching--wrap .txt--wrap > h3 {
+    font-size: 36px;
+  }
+  main .section--container .mna--free--wrap {
+    gap: 40px;
+    padding: 25px 40px;
+  }
+  main .section--container .mna--free--wrap .desc--wrap h3 {
+    font-size: 20px;
+  }
+  main .section--container .mna--reason--wrap {
+    padding: 40px 450px 40px 40px;
+  }
+  main .section--container .mna--reason--wrap h3 {
+    font-size: 22px;
+    margin-bottom: 25px;
+  }
+  main .section--container .mna--reason--wrap p {
+    font-size: 18px;
+  }
+  main .section--container .mna--sol--wrap {
+    margin-top: 35px;
+    gap: 20px;
+    flex-wrap: wrap;
+  }
+  main .section--container .mna--sol--wrap .sol--left {
+    padding: 40px;
+    width: 100%;
+  }
+  main .section--container .mna--sol--wrap .sol--right {
+    width: 100%;
+    gap: 20px;
+    flex-direction: row;
+  }
+  main .section--container .mna--sol--wrap .sol--right .sol--top {
+    width: 50%;
+    height: auto;
+    padding: 40px;
+  }
+  main .section--container .mna--sol--wrap .sol--right .sol--bot {
+    width: 50%;
+    height: auto;
+    padding: 40px 40px 0 40px;
+  }
+  main .section--container .mna--apply--wrap {
+    gap: 0px;
+    position: relative;
+  }
+  main .section--container .mna--apply--wrap .apply--content .title--wrap h3 {
+    padding-top: 60px;
+    margin-bottom: 40px;
+  }
+  main .section--container .mna--apply--wrap .apply--content .title--wrap .title {
+    font-size: 40px;
+  }
+  main .section--container .mna--apply--wrap .apply--bg {
+    width: 100%;
+    position: absolute;
+    top: 0px;
+  }
+  main .section--container .mna--apply--wrap .apply--bg::before {
+    bottom: auto;
+    width: 164px;
+    height: 164px;
+    background-size: 100%;
+  }
+  main .section--container .mna--differ--wrap {
+    gap: 20px;
+  }
+  main .section--container .mna--differ--wrap .differ--top {
+    gap: 20px;
+  }
+  main .section--container .mna--differ--wrap .differ--top > div {
+    width: calc(50% - 10px);
+    padding: 40px 80px 60px 40px;
+  }
+  main .main--visual--section .main--visual--wrap .main--visual--img .main--visual--txt > p {
+    font-size: 14px;
+    margin-bottom: 40px;
+  }
+  main .main--visual--section .main--visual--wrap .main--visual--img .main--visual--txt > h3 {
+    font-size: 36px;
+  }
+}
+@media (max-width: 1024px) {
+  header .header--line--banner--wrap .inner--contents p {
+    font-size: 14px;
+  }
+  main .section--container .desc--box--wrap {
+    padding: 60px 40px 60px 380px;
+    background-position: left 20px bottom;
+  }
+  main .section--container .mna--maching--wrap {
+    gap: 60px;
+    flex-direction: column;
+  }
+  main .section--container .mna--maching--wrap .txt--wrap {
+    width: 100%;
+    text-align: center;
+  }
+  main .section--container .mna--maching--wrap .txt--wrap > h3 {
+    margin-bottom: 60px;
+  }
+  main .section--container .mna--maching--wrap .seq--wrap {
+    width: 100%;
+  }
+  main .section--container .mna--maching--wrap .seq--wrap .seq--box {
+    margin: 0 !important;
+  }
+  main .section--container .mna--maching--wrap .seq--wrap .seq--box .seq--right {
+    margin-left: auto;
+  }
+  main .section--container .mna--reason--wrap {
+    background-size: 218px 119px;
+    padding-right: 280px;
+    background-position: right 40px bottom -1px;
+  }
+  main .section--container .mna--sol--wrap .sol--right .sol--bot .bubble--wrap {
+    align-items: flex-end;
+    gap: 15px;
+  }
+  main .section--container .mna--sol--wrap .sol--right .sol--bot .bubble--wrap .img {
+    width: 136px;
+  }
+  main .section--container .mna--sol--wrap .sol--right .sol--bot .bubble--wrap .img img {
+    width: 100%;
+  }
+  main .section--container .mna--sol--wrap .sol--right .sol--bot .bubble--wrap .bubble {
+    padding: 25px 20px;
+    font-size: 15px;
+    margin-bottom: 40px;
+  }
+  main .section--container .mna--sol--wrap .sol--right .sol--bot .bubble--wrap .bubble b {
+    font-size: 15px;
+  }
+}
+@media (max-width: 768px) {
+  header .header--line--banner--wrap .inner--contents {
+    justify-content: flex-start;
+  }
+  header .header--line--banner--wrap .inner--contents > p {
+    text-align: left;
+    padding-left: 166px;
+  }
+  header .header--line--banner--wrap .inner--contents > p .mo {
+    display: block;
+  }
+  main .blue--section .section--container {
+    padding-top: 60px;
+  }
+  main .section--container {
+    padding-top: 60px;
+    padding-bottom: 80px;
+  }
+  main .section--container .title--wrap .title {
+    font-size: 30px;
+  }
+  main .section--container .title--wrap .desc {
+    font-size: 16px;
+  }
+  main .section--container .title--wrap .desc.color--blue {
+    font-size: 15px;
+  }
+  main .section--container .desc--box--wrap {
+    padding: 45px 40px 145px 40px;
+    background-size: 208px 130px;
+    background-position: right bottom;
+  }
+  main .section--container .desc--box--wrap > h3 {
+    font-size: 22px;
+    margin-bottom: 25px;
+  }
+  main .section--container .desc--box--wrap > p {
+    font-size: 15px;
+  }
+  main .section--container .mna--impor--wrap {
+    margin-top: 60px;
+    margin-bottom: 80px;
+    gap: 100px;
+  }
+  main .section--container .mna--impor--wrap::after {
+    width: 118px;
+    height: 176px;
+    right: -36px;
+  }
+  main .section--container .mna--impor--wrap .desc--wrap h3 {
+    font-size: 20px;
+    margin-bottom: 40px;
+  }
+  main .section--container .mna--impor--wrap .desc--wrap p {
+    font-size: 15px;
+  }
+  main .section--container .mna--impor--wrap .img--wrap {
+    width: 82%;
+    height: 300px;
+  }
+  main .section--container .mna--maching--wrap {
+    margin-bottom: 80px;
+  }
+  main .section--container .mna--maching--wrap .txt--wrap > h3 {
+    font-size: 30px;
+  }
+  main .section--container .mna--maching--wrap .txt--wrap > p {
+    font-size: 16px;
+  }
+  main .section--container .mna--maching--wrap .seq--wrap {
+    gap: 20px;
+  }
+  main .section--container .mna--maching--wrap .seq--wrap .seq--box {
+    padding: 30px 35px;
+    gap: 20px;
+  }
+  main .section--container .mna--maching--wrap .seq--wrap .seq--box .seq--left .numb {
+    font-size: 13px;
+    width: 26px;
+    margin-bottom: 15px;
+    height: 26px;
+  }
+  main .section--container .mna--maching--wrap .seq--wrap .seq--box .seq--left > p {
+    font-size: 17px;
+  }
+  main .section--container .mna--free--wrap {
+    padding: 30px 30px;
+    align-items: flex-start;
+    gap: 30px;
+  }
+  main .section--container .mna--free--wrap .img--wrap {
+    width: 108px;
+    min-width: 108px;
+  }
+  main .section--container .mna--free--wrap .img--wrap img {
+    width: 100%;
+  }
+  main .section--container .mna--free--wrap .desc--wrap h3 {
+    font-size: 18px;
+    margin-bottom: 15px;
+  }
+  main .section--container .mna--free--wrap .desc--wrap p {
+    font-size: 15px;
+  }
+  main .section--container .mna--reason--wrap {
+    padding: 45px 40px 144px 40px;
+    margin-top: 30px;
+  }
+  main .section--container .mna--reason--wrap p {
+    font-size: 15px;
+  }
+  main .section--container .mna--sol--wrap::before {
+    width: 572px;
+    height: 281px;
+    background-size: 100%;
+    right: 20px;
+    top: -115px;
+  }
+  main .section--container .mna--sol--wrap .sol--left > ol {
+    gap: 30px;
+  }
+  main .section--container .mna--sol--wrap .sol--left > ol > li {
+    flex-direction: column;
+  }
+  main .section--container .mna--sol--wrap .sol--left > p:last-child {
+    margin-top: 40px;
+  }
+  main .section--container .mna--sol--wrap .sol--right {
+    flex-direction: column;
+  }
+  main .section--container .mna--sol--wrap .sol--right .sol--top {
+    width: 100%;
+  }
+  main .section--container .mna--sol--wrap .sol--right .sol--top > ol > li > ol > li {
+    flex-direction: column;
+  }
+  main .section--container .mna--sol--wrap .sol--right .sol--bot {
+    width: 100%;
+  }
+  main .section--container .mna--apply--wrap .apply--content .title--wrap .title {
+    font-size: 30px;
+    margin-bottom: 50px;
+  }
+  main .section--container .mna--apply--wrap .apply--content .title--wrap .desc {
+    font-size: 16px;
+    margin-bottom: 60px;
+  }
+  main .section--container .mna--apply--wrap .apply--content .circle {
+    margin-bottom: 25px;
+  }
+  main .section--container .mna--apply--wrap .apply--content ol {
+    gap: 20px;
+  }
+  main .section--container .mna--apply--wrap .apply--content ol li {
+    width: 100%;
+  }
+  main .section--container .mna--differ--wrap {
+    margin-top: 100px;
+  }
+  main .section--container .mna--differ--wrap .differ--top {
+    flex-direction: column;
+  }
+  main .section--container .mna--differ--wrap .differ--top > div span {
+    font-size: 17px;
+    margin-bottom: 30px;
+  }
+  main .section--container .mna--differ--wrap .differ--top > div h3 {
+    font-size: 22px;
+  }
+  main .section--container .mna--differ--wrap .differ--top > div a {
+    margin-top: 35px;
+  }
+  main .section--container .mna--differ--wrap .differ--top > div.differ--left {
+    width: 100%;
+    padding: 40px 40px 120px 40px;
+    background-image: url(../img/img--differ1--mo.svg);
+  }
+  main .section--container .mna--differ--wrap .differ--top > div.differ--right {
+    padding: 40px 40px 186px 40px;
+    width: 100%;
+    background-image: url(../img/img--differ2--mo.svg);
+    background-position: bottom 30px right 16px;
+  }
+  main .section--container .mna--differ--wrap .differ--bot {
+    padding: 40px;
+    background-size: cover;
+    background-position: left 100px center;
+  }
+  main .section--container .mna--process--wrap {
+    margin-top: 60px;
+  }
+  main .section--container .mna--qna--wrap .qna--wrap.active .answer--wrap {
+    padding: 30px 20px;
+    gap: 20px;
+  }
+  main .section--container .mna--qna--wrap .qna--wrap .question--wrap > p {
+    font-size: 16px;
+  }
+  main .section--container .mna--qna--wrap .qna--wrap .answer--wrap .inner--box > p {
+    font-size: 15px;
+  }
+  main .section--container .mna--qna--wrap .qna--wrap .answer--wrap .inner--box > ul {
+    margin-top: 20px;
+    gap: 20px;
+  }
+  main .section--container .mna--qna--wrap .qna--wrap .answer--wrap .inner--box > ul > li {
+    font-size: 15px;
+    padding-left: 25px;
+  }
+  main .section--container .mna--qna--wrap .qna--wrap .answer--wrap .inner--box > ul > li::before {
+    top: 8px;
+    left: 0px;
+  }
+  main .main--visual--section .main--visual--wrap .main--visual--img {
+    height: 650px;
+  }
+  main .main--visual--section .main--visual--wrap .main--visual--img img {
+    max-width: 100%;
+    width: 100%;
+    object-fit: cover;
+    max-height: 100%;
+  }
+  main .main--visual--section .main--visual--wrap .main--visual--img::before {
+    height: 305px;
+  }
+  footer .footer--wrap .footer--top .footer--link {
+    column-gap: 30px;
+    row-gap: 20px;
+  }
+  footer .footer--wrap .footer--top .footer--link a {
+    font-size: 15px;
+  }
+  footer .footer--wrap .footer--bot .footer--inner--top {
+    padding: 40px 0 30px;
+  }
+  footer .footer--wrap .footer--bot .footer--inner--bot {
+    padding: 30px 0 40px;
+  }
+}
+@media (max-width: 500px) {
+  main .section--container .mna--impor--wrap .img--wrap {
+    width: 70%;
+    height: 155px;
+  }
+}

assets/css/style.css

@@ -0,0 +1,1457 @@
+@charset "UTF-8";
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  font-size: 100%;
+  font: inherit;
+  vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+  display: block;
+}
+
+ol, ul {
+  list-style: none;
+}
+
+blockquote, q {
+  quotes: none;
+}
+
+blockquote:before, blockquote:after,
+q:before, q:after {
+  content: "";
+  content: none;
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+a {
+  text-decoration: none;
+}
+
+.ico {
+  display: inline-block;
+}
+
+* {
+  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+  word-break: keep-all;
+  color: #000;
+  box-sizing: border-box;
+}
+
+.mo {
+  display: none;
+}
+
+article section {
+  overflow: hidden;
+}
+
+header {
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  background: #fff;
+}
+header .header--line--banner--wrap {
+  background-image: url(../img/img--top--banner.svg);
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-color: #2F2F2F;
+  width: 100%;
+  padding: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  transition: all linear 0.2s;
+  height: 80px;
+}
+header .header--line--banner--wrap.actv {
+  height: 0px;
+}
+header .header--line--banner--wrap .inner--contents {
+  width: 100%;
+  max-width: 1600px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  position: relative;
+}
+header .header--line--banner--wrap .inner--contents .close--btn {
+  width: 38px;
+  cursor: pointer;
+  height: 38px;
+  background-color: transparent;
+  background-size: 18px 18px;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-image: url(../img/ico--close.svg);
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  border-radius: 50%;
+  position: absolute;
+  top: calc(50% - 19px);
+  right: 0;
+}
+header .header--line--banner--wrap .inner--contents p {
+  color: #FFF;
+  font-size: 17px;
+  letter-spacing: -0.3px;
+  font-weight: 300;
+}
+header .header--line--banner--wrap .inner--contents p > b {
+  font-weight: 600;
+  color: #1eff00;
+}
+header .header--contents--wrap {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+header .header--contents--wrap .header--contents {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+}
+header .header--contents--wrap .header--contents.actv .header--gnb--wrap .sub--wrap {
+  max-height: 500px;
+}
+header .header--contents--wrap .header--contents .header--gnb--wrap {
+  border-bottom: 1px solid #E9E9E9;
+}
+header .header--contents--wrap .header--contents .header--gnb--wrap .gnb--wrap {
+  width: 100%;
+  max-width: 1600px;
+  margin: 0 auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+header .header--contents--wrap .header--contents .header--gnb--wrap .gnb--wrap > ul {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+header .header--contents--wrap .header--contents .header--gnb--wrap .gnb--wrap > ul li {
+  position: relative;
+}
+header .header--contents--wrap .header--contents .header--gnb--wrap .gnb--wrap > ul li a {
+  text-align: center;
+  padding: 25px 50px;
+  color: #000;
+  font-size: 17px;
+  display: inline-block;
+  font-style: normal;
+  font-weight: 600;
+  letter-spacing: -0.34px;
+}
+header .header--contents--wrap .header--contents .header--gnb--wrap .gnb--wrap > ul li a span {
+  display: inline-block;
+  font-size: 13px;
+  font-weight: 400;
+  color: #444;
+}
+header .header--contents--wrap .header--contents .header--gnb--wrap .gnb--wrap .user--wrap {
+  border-radius: 50%;
+  overflow: hidden;
+  width: 50px;
+  height: 50px;
+  min-width: 50px;
+  background-image: url(../img/img--user.svg);
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: cover;
+  cursor: pointer;
+}
+header .header--contents--wrap .header--contents .header--gnb--wrap .sub--wrap {
+  max-height: 0;
+  transition: max-height 0.3s;
+  overflow: hidden;
+}
+header .header--contents--wrap .header--contents .header--gnb--wrap .sub--wrap > ul {
+  max-width: 1600px;
+  padding-bottom: 10px;
+  margin: 0 auto;
+  width: 100%;
+  display: flex;
+}
+header .header--contents--wrap .header--contents .header--gnb--wrap .sub--wrap > ul li {
+  width: 20%;
+}
+header .header--contents--wrap .header--contents .header--gnb--wrap .sub--wrap > ul li a {
+  display: inline-block;
+  text-align: center;
+  width: 100%;
+  line-height: 1;
+  font-size: 16px;
+  font-weight: 400;
+  padding: 10px 0;
+}
+header .header--ham--wrap {
+  background-color: #ffffff;
+  position: fixed;
+  left: 100%;
+  top: 0;
+  width: 100%;
+  height: 100vh;
+  transition: all 0.3s;
+  z-index: 10001;
+  display: flex;
+  flex-direction: column;
+}
+header .header--ham--wrap.actv {
+  left: 0%;
+}
+header .header--ham--wrap .header--ham--top {
+  background-color: #2ecc71;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+header .header--ham--wrap .header--ham--top .logo--wrap {
+  display: inline-block;
+  max-width: 210px;
+  width: 25%;
+}
+header .header--ham--wrap .header--ham--top .logo--wrap img {
+  width: 100%;
+}
+header .header--ham--wrap .header--ham--top .login--menu {
+  display: flex;
+  gap: 20px;
+}
+header .header--ham--wrap .header--ham--top .login--menu .ico--user {
+  display: inline-block;
+  width: 24px;
+  height: 24px;
+  background-repeat: no-repeat;
+  background-image: url(../img/ico_user.svg);
+}
+header .header--ham--wrap .header--ham--top .login--menu .ico--close {
+  display: inline-block;
+  cursor: pointer;
+  background-repeat: no-repeat;
+  width: 24px;
+  height: 24px;
+  background-image: url(../img/ico_close2.svg);
+}
+header .header--ham--wrap .header--ham--menu {
+  display: flex;
+}
+header .header--ham--wrap .header--ham--menu .ham--l {
+  position: relative;
+  width: 51%;
+  height: calc(100vh - 84px);
+  overflow-y: auto;
+  background-color: #F5F5F5;
+}
+header .header--ham--wrap .header--ham--menu .ham--l ul {
+  padding: 0;
+  margin-bottom: 0;
+}
+header .header--ham--wrap .header--ham--menu .ham--l ul li {
+  list-style: none;
+  cursor: pointer;
+  padding: 30px 10px;
+  color: #222222;
+  line-height: 1;
+  letter-spacing: -0.3px;
+  border-bottom: 1px solid #E3E3E3;
+  font-weight: 400;
+  background-color: #F5F5F5;
+  font-size: 15px;
+  text-align: center;
+}
+header .header--ham--wrap .header--ham--menu .ham--l ul li.actv {
+  background-color: #ffffff;
+}
+header .header--ham--wrap .header--ham--menu .ham--l .menu--login {
+  text-decoration: none;
+  color: #555;
+  width: 100%;
+  font-size: 16px;
+  font-weight: 500;
+  margin: 50px 0;
+  line-height: 1;
+  letter-spacing: -0.32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 12px;
+}
+header .header--ham--wrap .header--ham--menu .ham--l .menu--login .ico {
+  width: 16px;
+  height: 16px;
+}
+header .header--ham--wrap .header--ham--menu .ham--l .menu--login .ico.login {
+  background-image: url(../img/ico_login.svg);
+}
+header .header--ham--wrap .header--ham--menu .ham--l .menu--login .ico.logout {
+  background-image: url(../img/ico_logout.svg);
+}
+header .header--ham--wrap .header--ham--menu .ham--r {
+  width: 49%;
+  padding: 0 15px;
+  height: calc(100vh - 84px);
+  overflow-y: auto;
+}
+header .header--ham--wrap .header--ham--menu .ham--r ul {
+  padding: 0;
+  display: none;
+}
+header .header--ham--wrap .header--ham--menu .ham--r ul.actv {
+  display: block;
+}
+header .header--ham--wrap .header--ham--menu .ham--r ul li {
+  list-style: none;
+}
+header .header--ham--wrap .header--ham--menu .ham--r ul li a {
+  width: 100%;
+  font-size: 15px;
+  display: inline-block;
+  color: #222222;
+  line-height: 1;
+  padding: 30px 15px;
+  letter-spacing: -0.3px;
+  border-bottom: 1px solid #F6F6F6;
+  text-decoration: none;
+}
+header .header--ham--wrap .header--ham--menu .ham--r ul li a.actv {
+  color: #315BFF;
+  font-weight: 500;
+}
+
+main {
+  padding-top: 180px !important;
+}
+main.actv {
+  padding-top: 100px !important;
+}
+main .main--visual--section {
+  overflow: hidden;
+  position: relative;
+}
+main .main--visual--section .main--visual--wrap {
+  width: 100%;
+}
+main .main--visual--section .main--visual--wrap .main--visual--img {
+  width: 100%;
+  overflow: hidden;
+  height: 420px;
+  position: relative;
+}
+main .main--visual--section .main--visual--wrap .main--visual--img::before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: inline-block;
+  background: linear-gradient(180deg, rgba(255, 255, 255, 0.8) 28.13%, rgba(255, 255, 255, 0) 100%);
+  z-index: 2;
+}
+main .main--visual--section .main--visual--wrap .main--visual--img img {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+main .main--visual--section .main--visual--wrap .main--visual--img .main--visual--txt {
+  z-index: 3;
+  position: absolute;
+  width: 100%;
+  left: 50%;
+  top: 0;
+  transform: translateX(-50%);
+  height: calc(100% - 100px);
+  padding: 0 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  max-width: 1200px;
+  text-align: center;
+}
+main .main--visual--section .main--visual--wrap .main--visual--img .main--visual--txt h3 {
+  color: #111;
+  font-size: 50px;
+  font-weight: 400;
+  line-height: 1.4;
+}
+main .main--visual--section .main--visual--wrap .main--visual--img .main--visual--txt h3 b {
+  font-weight: 700;
+}
+main .main--visual--section .main--visual--wrap .main--visual--img .main--visual--txt p {
+  font-size: 17px;
+  color: #000;
+  font-weight: 500;
+  margin-bottom: 30px;
+}
+main .main--visual--section .main--visual--pager {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: 30px;
+  z-index: 9;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 46px;
+  padding: 5px 15px;
+  border-radius: 100px;
+  background: rgba(255, 255, 255, 0.2);
+  backdrop-filter: blur(2px);
+}
+main .main--visual--section .main--visual--pager .prev--next--wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  gap: 10px;
+  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: 20px;
+  height: 20px;
+  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 .prev--next--wrap button.play--btn {
+  margin-left: 5px;
+  background-image: url(../img/ico--pause.svg);
+  border-radius: 50%;
+  background-size: 24px 24px;
+  background-color: rgba(0, 0, 0, 0.15);
+  width: 36px;
+  height: 36px;
+}
+main .main--visual--section .main--visual--pager .prev--next--wrap button.play--btn.pause {
+  background-image: url(../img/ico--play.svg);
+}
+main .main--visual--section .main--visual--pager .play--pause {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 11px;
+}
+main .main--visual--section .main--visual--pager .play--pause 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);
+  backdrop-filter: blur(2px);
+}
+main .main--visual--section .main--visual--pager .main--visual--fraction {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+main .main--visual--section .main--visual--pager .main--visual--fraction span {
+  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: #000;
+  font-weight: 800;
+}
+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;
+  margin-right: 20px;
+  gap: 5px;
+  align-items: center;
+  justify-content: center;
+  padding-top: 20px;
+}
+main .main--visual--section .main--visual--pager .main--visual--progress {
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  margin-right: 25px;
+}
+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-bar {
+  width: 100px;
+  height: 4px;
+  background-color: rgba(0, 0, 0, 0.15) !important;
+  border-radius: 100px;
+  position: relative;
+  overflow: hidden;
+}
+main .main--visual--section .main--visual--pager .main--visual--progress .progress-text {
+  color: #000;
+  font-size: 12px;
+  font-weight: 700;
+  width: 20px;
+}
+main .main--visual--section .main--visual--pager .main--visual--progress .progress-total {
+  color: #000;
+  font-size: 12px;
+  font-weight: 700;
+  width: 20px;
+  text-align: right;
+}
+main .blue--section {
+  background: linear-gradient(180deg, #008CFF 0%, #68BBFF 100%);
+}
+main .blue--section .section--container {
+  padding-top: 110px;
+  padding-bottom: 80px;
+}
+main .faq--section {
+  background-color: #F8F8F8;
+}
+main .section--container {
+  max-width: 1200px;
+  margin: 0 auto;
+  width: 100%;
+  padding: 120px 0 150px;
+}
+main .section--container .title--wrap {
+  text-align: center;
+  position: relative;
+  z-index: 3;
+}
+main .section--container .title--wrap .title {
+  color: #000;
+  font-size: 45px;
+  line-height: 1.4;
+  font-weight: 400;
+}
+main .section--container .title--wrap .title > b {
+  font-weight: 700;
+}
+main .section--container .title--wrap.color--white .title {
+  color: #fff;
+}
+main .section--container .title--wrap.color--white .title b {
+  color: #fff;
+}
+main .section--container .title--wrap .desc {
+  margin-top: 40px;
+  color: #000;
+  font-size: 18px;
+  font-weight: 300;
+  line-height: 1.4;
+}
+main .section--container .title--wrap .desc.color--blue {
+  margin-top: 35px;
+  color: #008cff;
+  font-size: 17px;
+  font-weight: 400;
+}
+main .section--container .desc--box--wrap {
+  margin-top: 80px;
+  background-color: #e9f5ff;
+  border-radius: 50px;
+  width: 100%;
+  background-image: url(../img/img--box1.svg);
+  background-repeat: no-repeat;
+  background-position: left 60px bottom;
+  padding: 70px 80px 70px 450px;
+}
+main .section--container .desc--box--wrap > h3 {
+  margin-bottom: 35px;
+  font-size: 25px;
+  font-weight: 700;
+  letter-spacing: -0.5px;
+  color: #333;
+}
+main .section--container .desc--box--wrap > p {
+  color: #444;
+  letter-spacing: -0.34px;
+  font-size: 17px;
+  font-weight: 300;
+  line-height: 1.7;
+}
+main .section--container .mna--impor--wrap {
+  margin-top: 130px;
+  margin-bottom: 120px;
+  height: 450px;
+  display: flex;
+  align-items: center;
+  gap: 120px;
+}
+main .section--container .mna--impor--wrap .img--wrap {
+  position: relative;
+  height: 450px;
+  width: 500px;
+}
+main .section--container .mna--impor--wrap .img--wrap::before {
+  content: "";
+  width: 1000%;
+  right: 0;
+  height: 100%;
+  position: absolute;
+  background-image: url(../img/img--wedding.png);
+  background-repeat: no-repeat;
+  background-position: right center;
+  display: inline-block;
+}
+main .section--container .mna--impor--wrap .desc--wrap {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: 100%;
+  position: relative;
+}
+main .section--container .mna--impor--wrap .desc--wrap::after {
+  content: "";
+  display: inline-block;
+  z-index: -1;
+  position: absolute;
+  width: 304px;
+  left: 110%;
+  height: 472px;
+  top: 40%;
+  background-image: url(../img/bg--wedding.svg);
+}
+main .section--container .mna--impor--wrap .desc--wrap h3 {
+  color: #111;
+  font-size: 32px;
+  font-weight: 400;
+  letter-spacing: -0.64px;
+  line-height: 1.7;
+  margin-bottom: 50px;
+}
+main .section--container .mna--impor--wrap .desc--wrap h3 b {
+  color: #008cff;
+  font-weight: 700;
+}
+main .section--container .mna--impor--wrap .desc--wrap p {
+  color: #111;
+  font-size: 18px;
+  font-weight: 300;
+  letter-spacing: -0.36px;
+  line-height: 1.7;
+}
+main .section--container .mna--impor--wrap .desc--wrap p b {
+  font-weight: 600;
+}
+main .section--container .mna--maching--wrap {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 100px;
+}
+main .section--container .mna--maching--wrap .txt--wrap {
+  width: 367px;
+}
+main .section--container .mna--maching--wrap .txt--wrap > h3 {
+  color: #222;
+  font-size: 40px;
+  letter-spacing: -0.8px;
+  font-weight: 400;
+  line-height: 1.4;
+  margin-bottom: 80px;
+}
+main .section--container .mna--maching--wrap .txt--wrap > h3 b {
+  font-weight: 600;
+}
+main .section--container .mna--maching--wrap .txt--wrap > h3 b.color--blue {
+  color: #008cff;
+}
+main .section--container .mna--maching--wrap .txt--wrap > p {
+  color: #444;
+  font-size: 18px;
+  letter-spacing: -0.36px;
+  line-height: 1.7;
+  font-weight: 400;
+}
+main .section--container .mna--maching--wrap .seq--wrap {
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+main .section--container .mna--maching--wrap .seq--wrap .seq--box {
+  padding: 35px 40px;
+  display: flex;
+  gap: 40px;
+}
+main .section--container .mna--maching--wrap .seq--wrap .seq--box .numb {
+  color: #008cff;
+  font-size: 15px;
+  font-weight: 800;
+  width: 30px;
+  height: 30px;
+  background-color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  margin-bottom: 20px;
+}
+main .section--container .mna--maching--wrap .seq--wrap .seq--box p {
+  color: #fff;
+  font-size: 18px;
+  line-height: 1.4;
+  font-weight: 500;
+}
+main .section--container .mna--maching--wrap .seq--wrap .seq--box:nth-child(1) {
+  margin-right: 140px;
+  border-radius: 40px 40px 10px 40px;
+  background-color: #1a98ff;
+}
+main .section--container .mna--maching--wrap .seq--wrap .seq--box:nth-child(2) {
+  border-radius: 40px 40px 40px 10px;
+  background-color: #8486FB;
+  margin-left: auto;
+}
+main .section--container .mna--maching--wrap .seq--wrap .seq--box:nth-child(2) .numb {
+  color: #8486FB;
+}
+main .section--container .mna--maching--wrap .seq--wrap .seq--box:nth-child(3) {
+  background-color: #7EC5FF;
+  border-radius: 40px 40px 10px 40px;
+  margin-right: auto;
+}
+main .section--container .mna--maching--wrap .seq--wrap .seq--box:nth-child(3) .numb {
+  color: #7EC5FF;
+}
+main .section--container .mna--free--wrap {
+  border-radius: 50px;
+  border: 1px solid #DDD6D2;
+  background-color: #FFFCF3;
+  display: flex;
+  gap: 70px;
+  padding: 45px 60px;
+  align-items: center;
+}
+main .section--container .mna--free--wrap .desc--wrap h3 {
+  margin-bottom: 20px;
+  font-size: 25px;
+  font-weight: 700;
+  letter-spacing: -0.5px;
+}
+main .section--container .mna--free--wrap .desc--wrap p {
+  color: #444;
+  font-size: 18px;
+  font-weight: 300;
+  line-height: 1.7;
+  letter-spacing: -0.36px;
+}
+main .section--container .mna--free--wrap .desc--wrap p b {
+  font-weight: 500;
+  color: #f70;
+}
+main .section--container .mna--reason--wrap {
+  margin-top: 50px;
+  border-radius: 50px;
+  background-color: #3263ce;
+  background-image: url(../img/img--reason.svg);
+  background-repeat: no-repeat;
+  background-position: right 65px bottom;
+  padding: 70px 560px 70px 60px;
+}
+main .section--container .mna--reason--wrap h3 {
+  color: #fff600;
+  font-size: 30px;
+  margin-bottom: 40px;
+  font-weight: 700;
+  letter-spacing: -0.6px;
+}
+main .section--container .mna--reason--wrap p {
+  color: #fff;
+  font-size: 20px;
+  font-weight: 400;
+  letter-spacing: -0.4px;
+  line-height: 1.7;
+}
+main .section--container .mna--sol--wrap {
+  display: flex;
+  gap: 40px;
+  margin-top: 70px;
+  position: relative;
+}
+main .section--container .mna--sol--wrap::before {
+  content: "";
+  width: 1138.414px;
+  right: calc(28% + 150px);
+  height: 559.298px;
+  top: -174px;
+  display: inline-block;
+  position: absolute;
+  z-index: 1;
+  background-image: url(../img/bg--blue--section.svg);
+}
+main .section--container .mna--sol--wrap .sol--left {
+  padding: 45px 45px 55px;
+  border-radius: 40px;
+  border: 1px solid #FFF;
+  background: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(4px);
+  width: 60%;
+  z-index: 2;
+}
+main .section--container .mna--sol--wrap .sol--left > h4 {
+  margin-bottom: 30px;
+  font-size: 20px;
+  font-weight: 600;
+}
+main .section--container .mna--sol--wrap .sol--left > p {
+  font-size: 17px;
+  color: #333;
+  font-weight: 400;
+  margin-bottom: 45px;
+  line-height: 1.7;
+}
+main .section--container .mna--sol--wrap .sol--left > p:last-child {
+  margin-top: 45px;
+  margin-bottom: 0;
+}
+main .section--container .mna--sol--wrap .sol--left > p > b {
+  color: #07f;
+  font-weight: 700;
+}
+main .section--container .mna--sol--wrap .sol--left > p > b.color--black {
+  font-weight: 600;
+  color: #000;
+}
+main .section--container .mna--sol--wrap .sol--left > ol {
+  display: flex;
+  flex-direction: column;
+  gap: 35px;
+}
+main .section--container .mna--sol--wrap .sol--left > ol > li {
+  line-height: 1.7;
+  display: flex;
+  align-items: start;
+  gap: 16px;
+}
+main .section--container .mna--sol--wrap .sol--left > ol > li > span {
+  width: 50px;
+  padding: 8px 10px;
+  display: flex;
+  border-radius: 100px;
+  border: 1px solid rgba(0, 140, 255, 0.5);
+  background-color: #FFF;
+  line-height: 1;
+  color: #008cff;
+  font-size: 14px;
+  font-weight: 600;
+  justify-content: center;
+  align-items: center;
+}
+main .section--container .mna--sol--wrap .sol--left > ol > li > p {
+  color: #333;
+  font-size: 16px;
+  font-weight: 400;
+}
+main .section--container .mna--sol--wrap .sol--left > ol > li > p > b {
+  color: #07f;
+  font-weight: 600;
+}
+main .section--container .mna--sol--wrap .sol--right {
+  width: 40%;
+  display: flex;
+  flex-direction: column;
+  gap: 40px;
+}
+main .section--container .mna--sol--wrap .sol--right .sol--top {
+  border-radius: 40px;
+  border: 1px solid #FFF;
+  background-color: rgba(255, 255, 255, 0.8);
+  backdrop-filter: blur(4px);
+  height: calc(100% - 440px);
+  padding: 40px 45px 40px 40px;
+}
+main .section--container .mna--sol--wrap .sol--right .sol--top > h4 {
+  color: #222;
+  font-size: 20px;
+  font-weight: 600;
+}
+main .section--container .mna--sol--wrap .sol--right .sol--top > ol {
+  margin-top: 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+main .section--container .mna--sol--wrap .sol--right .sol--top > ol > li {
+  display: flex;
+  gap: 12px;
+}
+main .section--container .mna--sol--wrap .sol--right .sol--top > ol > li > span {
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background-color: #7678fa;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 700;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  display: flex;
+  min-width: 25px;
+}
+main .section--container .mna--sol--wrap .sol--right .sol--top > ol > li p {
+  color: #333;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.7;
+}
+main .section--container .mna--sol--wrap .sol--right .sol--top > ol > li p b {
+  color: #111;
+  font-weight: 500;
+}
+main .section--container .mna--sol--wrap .sol--right .sol--top > ol > li > ol > li {
+  display: flex;
+}
+main .section--container .mna--sol--wrap .sol--right .sol--top > ol > li > ol > li > span {
+  color: #7330ff;
+  font-size: 16px;
+  font-weight: 700;
+  min-width: 60px;
+  line-height: 1.7;
+}
+main .section--container .mna--sol--wrap .sol--right .sol--bot {
+  padding: 40px 45px 0px 40px;
+  display: flex;
+  flex-direction: column;
+  height: 400px;
+  border-radius: 40px;
+  border: 1px solid #FFF;
+  background: rgba(132, 74, 255, 0.5);
+  backdrop-filter: blur(4px);
+}
+main .section--container .mna--sol--wrap .sol--right .sol--bot > h4 {
+  color: #fff;
+  font-size: 20px;
+  font-weight: 600;
+}
+main .section--container .mna--sol--wrap .sol--right .sol--bot > p {
+  color: #fff;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 1.7;
+  margin-top: 30px;
+}
+main .section--container .mna--sol--wrap .sol--right .sol--bot > p .numb {
+  border-radius: 100px;
+  background-color: #fff157;
+  width: 20px;
+  height: 20px;
+  margin-left: 5px;
+  margin-right: 5px;
+  color: #6C7EFF;
+  display: inline-flex;
+  vertical-align: 2px;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  font-size: 12px;
+  font-weight: 700;
+}
+main .section--container .mna--sol--wrap .sol--right .sol--bot .bubble--wrap {
+  display: flex;
+  margin-top: auto;
+  gap: 24px;
+}
+main .section--container .mna--sol--wrap .sol--right .sol--bot .bubble--wrap .img img {
+  vertical-align: top;
+}
+main .section--container .mna--sol--wrap .sol--right .sol--bot .bubble--wrap .bubble {
+  margin-top: 12px;
+  padding: 30px 15px;
+  border-radius: 20px;
+  background: #FFF;
+  height: fit-content;
+  color: #222;
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 1.7;
+  position: relative;
+}
+main .section--container .mna--sol--wrap .sol--right .sol--bot .bubble--wrap .bubble::before {
+  content: "";
+  position: absolute;
+  width: 16px;
+  height: 18px;
+  background-image: url(../img/ico--bubble--tail.svg);
+  right: 100%;
+  top: calc(50% - 9px);
+}
+main .section--container .mna--sol--wrap .sol--right .sol--bot .bubble--wrap .bubble b {
+  color: #7330ff;
+  font-size: 16px;
+  font-weight: 600;
+}
+main .section--container .mna--apply--wrap {
+  display: flex;
+  gap: 160px;
+}
+main .section--container .mna--apply--wrap .apply--bg {
+  position: relative;
+  width: 230px;
+  min-width: 230px;
+}
+main .section--container .mna--apply--wrap .apply--bg::before {
+  content: "";
+  position: absolute;
+  bottom: 40px;
+  right: 0;
+  background-image: url(../img/bg--apply.png);
+  width: 700px;
+  height: 700px;
+}
+main .section--container .mna--apply--wrap .apply--content .title--wrap {
+  text-align: left;
+}
+main .section--container .mna--apply--wrap .apply--content .title--wrap h3 {
+  color: #000;
+  font-size: 18px;
+  font-weight: 600;
+  margin-bottom: 50px;
+  position: relative;
+  display: inline-block;
+}
+main .section--container .mna--apply--wrap .apply--content .title--wrap h3::before {
+  position: absolute;
+  width: 100%;
+  content: "";
+  display: inline-block;
+  background: rgba(0, 208, 255, 0.2);
+  height: 15px;
+  bottom: -4px;
+}
+main .section--container .mna--apply--wrap .apply--content .title--wrap .title {
+  margin-bottom: 40px;
+  font-size: 50px;
+  font-weight: 700;
+}
+main .section--container .mna--apply--wrap .apply--content .title--wrap .desc {
+  color: #000;
+  font-size: 18px;
+  font-weight: 500;
+  margin-bottom: 70px;
+}
+main .section--container .mna--apply--wrap .apply--content .title--wrap .desc b {
+  font-weight: 700;
+  color: #008cff;
+}
+main .section--container .mna--apply--wrap .apply--content .circle {
+  padding: 15px;
+  line-height: 1;
+  color: #fff;
+  width: fit-content;
+  border-radius: 100px;
+  font-size: 16px;
+  font-weight: 600;
+  background-color: #222;
+  margin-bottom: 30px;
+}
+main .section--container .mna--apply--wrap .apply--content > p {
+  margin-bottom: 30px;
+  color: #000;
+  font-weight: 400;
+  line-height: 1.7;
+}
+main .section--container .mna--apply--wrap .apply--content > p.mb--50 {
+  margin-bottom: 50px;
+}
+main .section--container .mna--apply--wrap .apply--content > p b {
+  font-weight: 600;
+}
+main .section--container .mna--apply--wrap .apply--content > p b.big {
+  font-size: 22px;
+}
+main .section--container .mna--apply--wrap .apply--content > p.type2 {
+  padding-left: 16px;
+  position: relative;
+}
+main .section--container .mna--apply--wrap .apply--content > p.type2::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: "※";
+}
+main .section--container .mna--apply--wrap .apply--content ol {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 30px;
+}
+main .section--container .mna--apply--wrap .apply--content ol li {
+  display: flex;
+  gap: 15px;
+  width: calc(50% - 15px);
+  line-height: 24px;
+}
+main .section--container .mna--apply--wrap .apply--content ol li span {
+  color: #000;
+  font-size: 12px;
+  font-weight: 700;
+  border-radius: 100px;
+  width: 25px;
+  height: 25px;
+  min-width: 25px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  border: 1px solid rgba(0, 0, 0, 0.5);
+  background: #FFF;
+}
+main .section--container .mna--differ--wrap {
+  display: flex;
+  margin-top: 120px;
+  flex-direction: column;
+  gap: 60px;
+}
+main .section--container .mna--differ--wrap .differ--top {
+  display: flex;
+  gap: 60px;
+}
+main .section--container .mna--differ--wrap .differ--top > div {
+  width: calc(50% - 30px);
+  border-radius: 30px;
+  background-color: #EBF4FF;
+  padding: 60px 140px 70px 60px;
+  background-image: url(../img/img--differ1.svg);
+  background-repeat: no-repeat;
+  background-position: right bottom;
+}
+main .section--container .mna--differ--wrap .differ--top > div span {
+  color: #333;
+  font-size: 19px;
+  font-weight: 500;
+  letter-spacing: -0.38px;
+  display: inline-block;
+  margin-bottom: 40px;
+}
+main .section--container .mna--differ--wrap .differ--top > div span b {
+  color: #008cff;
+  font-weight: 700;
+}
+main .section--container .mna--differ--wrap .differ--top > div h3 {
+  color: #222;
+  font-size: 25px;
+  font-weight: 800;
+  letter-spacing: -0.5px;
+  margin-bottom: 25px;
+}
+main .section--container .mna--differ--wrap .differ--top > div p {
+  color: #555;
+  font-size: 16px;
+  line-height: 1.7;
+  font-weight: 400;
+}
+main .section--container .mna--differ--wrap .differ--top > div p.type2 {
+  margin-top: 25px;
+  color: #7330ff;
+  font-size: 15px;
+  font-weight: 400;
+}
+main .section--container .mna--differ--wrap .differ--top > div a {
+  padding: 15px 20px;
+  display: flex;
+  width: fit-content;
+  line-height: 1;
+  gap: 5px;
+  color: #fff;
+  font-size: 15px;
+  font-weight: 600;
+  border-radius: 100px;
+  background-color: #008CFF;
+  box-shadow: 0 5px 8px 0 #BCD9FF;
+  margin-top: 50px;
+}
+main .section--container .mna--differ--wrap .differ--top > div a .ico {
+  width: 16px;
+  height: 16px;
+  background-image: url(../img/ico--btn--arrow.svg);
+}
+main .section--container .mna--differ--wrap .differ--top > div.differ--right {
+  background-color: #F3EEFF;
+  background-image: url(../img/img--differ2.svg);
+  background-position: bottom 62px right 20px;
+}
+main .section--container .mna--differ--wrap .differ--top > div.differ--right span b {
+  color: #7330FF;
+}
+main .section--container .mna--differ--wrap .differ--top > div.differ--right a {
+  background: #9765FF;
+  box-shadow: 0 5px 8px 0 #E3D4FF;
+}
+main .section--container .mna--differ--wrap .differ--bot {
+  border-radius: 30px;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  background-color: #F3F7FF;
+  background-position: right center;
+  background-image: url(../img/img--kmx.png);
+  background-size: contain;
+  background-repeat: no-repeat;
+  padding: 60px;
+}
+main .section--container .mna--differ--wrap .differ--bot .logo--wrap {
+  margin-bottom: 30px;
+}
+main .section--container .mna--differ--wrap .differ--bot h3 {
+  font-size: 22px;
+  color: #222;
+  font-weight: 600;
+  margin-bottom: 35px;
+  letter-spacing: -0.44px;
+}
+main .section--container .mna--differ--wrap .differ--bot a {
+  display: flex;
+  gap: 5px;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  padding: 15px 20px;
+  line-height: 1;
+  background-color: #013893;
+  border-radius: 100px;
+  color: #fff;
+  font-size: 15px;
+  font-weight: 600;
+}
+main .section--container .mna--differ--wrap .differ--bot a .ico {
+  width: 16px;
+  height: 16px;
+  background-image: url(../img/ico--btn--arrow.svg);
+}
+main .section--container .mna--process--wrap {
+  margin-top: 120px;
+}
+main .section--container .mna--process--wrap .process--wrap {
+  margin-top: 80px;
+}
+main .section--container .mna--process--wrap .process--wrap img {
+  width: 100%;
+}
+main .section--container .mna--qna--wrap {
+  margin-top: 70px;
+}
+main .section--container .mna--qna--wrap .qna--wrap {
+  display: flex;
+  flex-direction: column;
+  border-top: 1px solid #E9E9E9;
+}
+main .section--container .mna--qna--wrap .qna--wrap:last-child .question--wrap {
+  border-bottom: 1px solid #E9E9E9;
+}
+main .section--container .mna--qna--wrap .qna--wrap.active .question--wrap {
+  border-bottom: 1px solid #E9E9E9;
+}
+main .section--container .mna--qna--wrap .qna--wrap.active .question--wrap .arrow {
+  background-image: url(../img/ico--faq--arrow--up.svg);
+}
+main .section--container .mna--qna--wrap .qna--wrap.active .answer--wrap {
+  max-height: 1000px;
+  padding: 45px 20px;
+}
+main .section--container .mna--qna--wrap .qna--wrap.active:last-child .answer--wrap {
+  border-bottom: 1px solid #E9E9E9;
+}
+main .section--container .mna--qna--wrap .qna--wrap .question--wrap {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 25px;
+  cursor: pointer;
+  padding: 25px 20px;
+  background-color: #fff;
+}
+main .section--container .mna--qna--wrap .qna--wrap .question--wrap .ico {
+  width: 38px;
+  height: 38px;
+  border-radius: 50%;
+  border: 1px solid #e8e8e8;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  background: linear-gradient(159deg, #008CFF 12.57%, #67B3FF 49%, #B487FF 76.99%, #CBA6FF 92.33%);
+  background-clip: text;
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  font-size: 16px;
+  font-weight: 800;
+}
+main .section--container .mna--qna--wrap .qna--wrap .question--wrap .arrow {
+  width: 18px;
+  height: 18px;
+  display: inline-block;
+  background-image: url(../img/ico--faq--arrow--down.svg);
+}
+main .section--container .mna--qna--wrap .qna--wrap .question--wrap > p {
+  color: #111;
+  font-size: 17px;
+  font-weight: 600;
+  width: calc(100% - 106px);
+}
+main .section--container .mna--qna--wrap .qna--wrap .answer--wrap {
+  max-height: 0;
+  padding: 0;
+  transition: all 0.3s;
+  overflow: hidden;
+  background-color: #F5FCFF;
+  display: flex;
+  gap: 25px;
+}
+main .section--container .mna--qna--wrap .qna--wrap .answer--wrap .ico {
+  width: 38px;
+  min-width: 38px;
+  height: 38px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  text-align: center;
+  border-radius: 1000px;
+  background: linear-gradient(159deg, #008CFF 12.57%, #67B3FF 64.72%, #CBA6FF 92.33%);
+  font-size: 16px;
+  font-weight: 800;
+  color: #fff;
+}
+main .section--container .mna--qna--wrap .qna--wrap .answer--wrap .inner--box {
+  line-height: 1.7;
+}
+main .section--container .mna--qna--wrap .qna--wrap .answer--wrap .inner--box > p {
+  font-size: 16px;
+  font-weight: 500;
+  color: #333;
+}
+main .section--container .mna--qna--wrap .qna--wrap .answer--wrap .inner--box > ul {
+  margin-top: 30px;
+  display: flex;
+  flex-direction: column;
+  gap: 30px;
+}
+main .section--container .mna--qna--wrap .qna--wrap .answer--wrap .inner--box > ul > li {
+  color: #333;
+  font-size: 16px;
+  padding-left: 45px;
+  font-weight: 400;
+  position: relative;
+}
+main .section--container .mna--qna--wrap .qna--wrap .answer--wrap .inner--box > ul > li::before {
+  content: "";
+  width: 4px;
+  position: absolute;
+  height: 4px;
+  border: 2px solid #99a9b8;
+  border-radius: 50%;
+  left: 20px;
+  top: 10px;
+}
+
+footer {
+  background-color: #111;
+}
+footer .footer--wrap .footer--container {
+  max-width: 1600px;
+  width: 100%;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+}
+footer .footer--wrap .footer--top {
+  border-bottom: 1px solid #323232;
+}
+footer .footer--wrap .footer--top .footer--link {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 25px 0;
+  gap: 40px;
+}
+footer .footer--wrap .footer--top .footer--link a {
+  color: #fff;
+  font-size: 16px;
+  font-weight: 600;
+}
+footer .footer--wrap .footer--bot .footer--inner--top {
+  padding: 50px 0;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+footer .footer--wrap .footer--bot .footer--inner--top p {
+  color: #fff;
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: -0.32px;
+}
+footer .footer--wrap .footer--bot .footer--inner--top .contact--list {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 15px;
+}
+footer .footer--wrap .footer--bot .footer--inner--top .contact--list .bar {
+  width: 1px;
+  height: 11px;
+  background: rgba(255, 255, 255, 0.5);
+}
+footer .footer--wrap .footer--bot .footer--inner--bot {
+  padding: 30px 0;
+  border-top: 1px solid #323232;
+  color: #9d9fac;
+  font-size: 13px;
+  line-height: 1.7;
+  font-weight: 400;
+  letter-spacing: -0.26px;
+}

assets/img/bg--blue--section.svg

@@ -0,0 +1,14 @@
+<svg width="1105" height="560" viewBox="0 0 1105 560" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="152.484" y="0.000244141" width="857.864" height="185.72" rx="92.8599" transform="rotate(20.6463 152.484 0.000244141)" fill="url(#paint0_linear_81_85)" fill-opacity="0.5"/>
+<rect x="-34" y="372.335" width="1136.31" height="197.888" rx="98.9438" transform="rotate(-19.1275 -34 372.335)" fill="url(#paint1_linear_81_85)"/>
+<defs>
+<linearGradient id="paint0_linear_81_85" x1="152.484" y1="92.8601" x2="1010.35" y2="92.8601" gradientUnits="userSpaceOnUse">
+<stop stop-color="#55B3FF" stop-opacity="0.5"/>
+<stop offset="1" stop-color="#55FFCF"/>
+</linearGradient>
+<linearGradient id="paint1_linear_81_85" x1="-34" y1="471.279" x2="1102.31" y2="471.279" gradientUnits="userSpaceOnUse">
+<stop stop-color="#82D9FF" stop-opacity="0"/>
+<stop offset="1" stop-color="#006FFF"/>
+</linearGradient>
+</defs>
+</svg>

assets/img/ico--btn--arrow.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.33331 8H12.6666" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M8 3.33301L12.6667 7.99967L8 12.6663" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/img/ico--bubble--tail.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 0C12.5 8.5 6 13.5 0 18H16V0Z" fill="white"/>
+</svg>

assets/img/ico--close.svg

@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13.5 4.5L4.5 13.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M4.5 4.5L13.5 13.5" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/img/ico--faq--arrow--down.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="M4.5 6.75L9 11.25L13.5 6.75" stroke="#ADBFCE" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/img/ico--faq--arrow--up.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="M4.5 11.25L9 6.75L13.5 11.25" stroke="#008CFF" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/img/ico--ham.svg

@@ -0,0 +1,6 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18 10H6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 6H3" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M21 14H3" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+<path d="M18 18H6" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/img/ico--pause.svg

@@ -0,0 +1,10 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_68_26)">
+<path d="M15 7C15 6.73478 15.1054 6.48043 15.2929 6.29289C15.4804 6.10536 15.7348 6 16 6C16.2652 6 16.5196 6.10536 16.7071 6.29289C16.8946 6.48043 17 6.73478 17 7V17C17 17.2652 16.8946 17.5196 16.7071 17.7071C16.5196 17.8946 16.2652 18 16 18C15.7348 18 15.4804 17.8946 15.2929 17.7071C15.1054 17.5196 15 17.2652 15 17V7ZM7 7C7 6.73478 7.10536 6.48043 7.29289 6.29289C7.48043 6.10536 7.73478 6 8 6C8.26522 6 8.51957 6.10536 8.70711 6.29289C8.89464 6.48043 9 6.73478 9 7V17C9 17.2652 8.89464 17.5196 8.70711 17.7071C8.51957 17.8946 8.26522 18 8 18C7.73478 18 7.48043 17.8946 7.29289 17.7071C7.10536 17.5196 7 17.2652 7 17V7Z" fill="black"/>
+</g>
+<defs>
+<clipPath id="clip0_68_26">
+<rect width="24" height="24" fill="white"/>
+</clipPath>
+</defs>
+</svg>

assets/img/ico--play.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 17L15 12L10 7" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/img/ico--swiper--left.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="M12.5 15L7.5 10L12.5 5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/img/ico--swiper--right.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="M7.5 15L12.5 10L7.5 5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

assets/js/common.js

@@ -0,0 +1,104 @@
+  $(function(){
+    $(".header--line--banner--wrap .close--btn").on("click", function(){
+      $(".header--line--banner--wrap").addClass("actv");
+      $("main").addClass("actv");
+    });
+
+    $(".header--contents").on("mouseenter", function(){
+       $(this).addClass("actv");
+    })
+    $(".header--contents").on("mouseleave", function(){
+      $(this).removeClass("actv");
+    });
+
+    $(".ham--btn").on("click", function(){
+      $(".header--ham--wrap").addClass("actv");
+    });
+
+    $(".header--ham--wrap .ico--close").on("click", function(){
+      $(".header--ham--wrap").removeClass("actv");
+    });
+
+    $('.ham--l li').each(function (index) {
+      $(this).on('click', function () {
+        $('.ham--l li').removeClass('actv');
+        $(this).addClass('actv');
+
+        $('.ham--r ul').removeClass('actv');
+        $('.ham--r ul').eq(index).addClass('actv');
+      });
+    });
+
+    const swiper = new Swiper('.main--visual', {
+      loop: true,
+      autoplay: {
+        delay: 5000,
+        disableOnInteraction: false,
+      },
+      navigation: {
+        nextEl: ".prev--next--wrap .next--btn",
+        prevEl: ".prev--next--wrap .prev--btn",
+      },
+      on: {
+        slideChange: function () {
+          // progress bar 업데이트
+          const totalSlides = this.slides.length;
+          const currentIndex = this.realIndex;
+          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, #000 ${progressPercent}%, rgba(0,0,0,0.15) ${progressPercent}%)`;
+          }
+          if (progressText) {
+            progressText.textContent = `${(currentIndex + 1)}`;
+          }
+          if (progressTitle && this.slideTitles && this.slideTitles[currentIndex]) {
+            progressTitle.textContent = this.slideTitles[currentIndex];
+          }
+        },
+        init: function () {
+          // 초기 progress bar 설정
+          const totalSlides = this.slides.length;
+          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');
+          const progressTotal = document.querySelector('.main--visual--progress .progress-total');
+
+          if (progressBar) {
+            progressBar.style.background = `linear-gradient(to right, #000 ${(1 / totalSlides) * 100}%, rgba(0,0,0,0.15) ${(1 / totalSlides) * 100}%)`;
+          }
+          if (progressText) {
+            progressText.textContent = `1`;
+          }
+          if (progressTotal) {
+            progressTotal.textContent = `${totalSlides}`;
+          }
+        }
+      }
+    });
+
+    $(".play--btn").on("click", function(){
+      if ($(this).hasClass("pause")) {
+        swiper.autoplay.start();
+        $(this).removeClass("pause");
+      } else {
+        swiper.autoplay.stop();
+        $(this).addClass("pause");
+      }
+    });
+
+    // FAQ 아코디언 - 단일선택
+    $(".faq--section .question--wrap").on("click", function(){
+      const $qnaWrap = $(this).closest(".qna--wrap");
+
+      if ($qnaWrap.hasClass("active")) {
+        $qnaWrap.removeClass("active");
+      } else {
+        $(".faq--section .qna--wrap").removeClass("active");
+        $qnaWrap.addClass("active");
+      }
+    });
+  });

assets/scss/media.scss

@@ -0,0 +1,611 @@
+@media(max-width: 1600px){
+  header{
+    .header--line--banner--wrap{
+      background-image: url(../img/img--top--banner--mo.svg);
+      background-position: left 20px bottom;
+      background-size: contain;
+      padding: 0 20px;
+    }
+    .header--contents--wrap{
+      .header--contents{
+        .header--gnb--wrap{
+          padding: 0 20px;
+          .gnb--wrap{
+            height: 80px;
+            >ul{
+              li{
+                a{
+                  padding: 15px 20px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+  main{
+    padding-top: 160px!important;
+    &.actv{
+      padding-top: 80px!important;
+    }
+    .section--container{
+      .mna--impor--wrap{
+        gap: 70px;
+        .desc--wrap{
+          &::after{
+          }
+        }
+      }
+    }
+  }
+  footer{
+    .footer--container{
+      padding: 0 20px;
+    }
+  }
+}
+
+@media(max-width: 1200px){
+  header{
+    .header--contents--wrap{
+      .header--contents{
+        .header--gnb--wrap{
+          .gnb--wrap{
+            >ul{
+              display: none;
+            }
+            .user--wrap{
+              margin-left: auto;
+            }
+            .ham--wrap{
+              margin-left: 25px;
+              width: 24px;
+              height: 24px;
+              cursor: pointer;
+              background-image: url(../img/ico--ham.svg);
+            }
+          }
+        }
+      }
+    }
+    .header--ham--wrap{
+      display: block;
+    }
+  }
+  main{
+    .section--container{
+      padding-left: 20px;
+      padding-right: 20px;
+      .title--wrap{
+        .title{
+          font-size: 35px;
+        }
+      }
+      .mna--impor--wrap{
+        flex-direction: column-reverse;
+        height: auto;
+        position: relative;
+        &::after{
+            content: '';
+            display: inline-block;
+            position: absolute;
+            bottom: 20px;
+            right: -100px;
+            width: 304px;
+            height: 472px;
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-image: url(../img/bg--wedding--mo.svg);
+        }
+        .desc--wrap{
+          width: 100%;
+          h3{
+            text-align: center;
+          }
+          p{
+            text-align: center;
+          }
+          &::after{
+            display: none;
+          }
+        }
+        .img--wrap{
+          align-self: self-start;
+          margin-left: -20px;
+          width: 70%;
+          &::before{
+            width: 100%;
+            background-size: cover;
+          }
+        }
+      }
+      .mna--maching--wrap{
+        .txt--wrap{
+          width: 40%;
+          >h3{
+            font-size: 36px;
+          }
+        }
+      }
+      .mna--free--wrap{
+        gap: 40px;
+        padding: 25px 40px;
+        .desc--wrap{
+          h3{
+            font-size: 20px;
+          }
+        }
+      }
+      .mna--reason--wrap{
+        padding: 40px 450px 40px 40px;
+        h3{
+          font-size: 22px;
+          margin-bottom: 25px;
+        }
+        p{
+          font-size: 18px;
+        }
+      }
+      .mna--sol--wrap{
+        margin-top: 35px;
+        gap: 20px;
+        flex-wrap: wrap;
+        .sol--left{
+          padding: 40px;
+          width: 100%;
+        }
+        .sol--right{
+          width: 100%;
+          gap: 20px;
+          flex-direction: row;
+          .sol--top{
+            width: 50%;
+            height: auto;
+            padding: 40px;
+          }
+          .sol--bot{
+            width: 50%;
+            height: auto;
+            padding: 40px 40px 0 40px;
+          }
+        }
+      }
+      .mna--apply--wrap{
+        gap: 0px;
+        position: relative;
+        .apply--content{
+          .title--wrap{
+            h3{
+              padding-top: 60px;
+              margin-bottom: 40px;
+            }
+            .title{
+              font-size: 40px;
+            }
+          }
+        }
+        .apply--bg{
+          width: 100%;
+          position: absolute;
+          top: 0px;
+          &::before{
+            bottom: auto;
+            width: 164px;
+            height: 164px;
+            background-size: 100%;
+          }
+        }
+      }
+      .mna--differ--wrap{
+        .differ--top{
+          gap: 20px;
+          >div{
+            width: calc(50% - 10px);
+            padding: 40px 80px 60px 40px;
+          }
+        }
+        gap: 20px;
+      }
+    }
+    .main--visual--section{
+      .main--visual--wrap{
+        .main--visual--img{
+          .main--visual--txt{
+            >p{
+              font-size: 14px;
+              margin-bottom: 40px;
+            }
+            >h3{
+              font-size: 36px;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media(max-width: 1024px){
+  header{
+    .header--line--banner--wrap{
+      .inner--contents{
+        p{
+          font-size: 14px;
+        }
+      }
+    }
+  }
+  main{
+    .section--container{
+      .desc--box--wrap{
+        padding: 60px 40px 60px 380px;
+        background-position: left 20px bottom;
+      }
+      .mna--maching--wrap{
+        gap: 60px;
+        flex-direction: column;
+        .txt--wrap{
+          width: 100%;
+          text-align: center;
+          >h3{
+            margin-bottom: 60px;
+          }
+        }
+        .seq--wrap{
+          width: 100%;
+          .seq--box{
+            margin: 0!important;
+            .seq--right{
+              margin-left: auto;
+            }
+          }
+        }
+      }
+      .mna--reason--wrap{
+        background-size: 218px 119px;
+        padding-right: 280px;
+        background-position: right 40px bottom -1px;
+      }
+      .mna--sol--wrap{
+        .sol--right{
+          .sol--bot{
+            .bubble--wrap{
+              align-items: flex-end;
+              gap: 15px;
+              .img{
+                width: 136px;
+                img{
+                  width: 100%;
+                }
+              }
+              .bubble{
+                padding: 25px 20px;
+                font-size: 15px;
+                margin-bottom: 40px;
+                b{
+                  font-size: 15px;
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@media(max-width: 768px){
+  header{
+    .header--line--banner--wrap{
+      .inner--contents{
+        justify-content: flex-start;
+        >p{
+          text-align: left;
+          padding-left: 166px;
+          .mo{
+            display: block;
+          }
+        }
+      }
+    }
+  }
+  main{
+    .blue--section{
+      .section--container{
+        padding-top: 60px;
+      }
+    }
+    .section--container{
+      padding-top: 60px;
+      padding-bottom: 80px;
+      .title--wrap{
+        .title{
+          font-size: 30px;
+        }
+        .desc{
+          font-size: 16px;
+          &.color--blue{
+            font-size: 15px;
+          }
+        }
+      }
+      .desc--box--wrap{
+        padding: 45px 40px 145px 40px;
+        background-size: 208px 130px;
+        background-position: right bottom;
+        >h3{
+          font-size: 22px;
+          margin-bottom: 25px;
+        }
+        >p{
+          font-size: 15px;
+        }
+      }
+      .mna--impor--wrap{
+        margin-top: 60px;
+        margin-bottom: 80px;
+        gap: 100px;
+        &::after{
+          width: 118px;
+          height: 176px;
+          right: -36px;
+        }
+        .desc--wrap{
+          h3{
+            font-size: 20px;
+            margin-bottom: 40px;
+          }
+          p{
+            font-size: 15px;
+          }
+        }
+        .img--wrap{
+          width: 82%;
+          height: 300px;
+        }
+      }
+      .mna--maching--wrap{
+        margin-bottom: 80px;
+        .txt--wrap{
+          >h3{
+            font-size: 30px;
+          }
+          >p{
+            font-size: 16px;
+          }
+        }
+        .seq--wrap{
+          gap: 20px;
+          .seq--box{
+            padding: 30px 35px;
+            gap: 20px;
+            .seq--left{
+              .numb{
+                font-size: 13px;
+                width: 26px;
+                margin-bottom: 15px;
+                height: 26px;
+              }
+              >p{
+                font-size: 17px;
+              }
+            }
+          }
+        }
+      }
+      .mna--free--wrap{
+        padding: 30px 30px;
+        align-items: flex-start;
+        gap: 30px;
+        .img--wrap{
+          width: 108px;
+          min-width: 108px;
+          img{
+            width: 100%;
+          }
+        }
+        .desc--wrap{
+          h3{
+            font-size: 18px;
+            margin-bottom: 15px;
+          }
+          p{
+            font-size: 15px;
+          }
+        }
+      }
+      .mna--reason--wrap{
+        padding: 45px 40px 144px 40px;
+        margin-top: 30px;
+        p{
+          font-size: 15px;
+        }
+      }
+      .mna--sol--wrap{
+        &::before{
+          width: 572px;
+          height: 281px;
+          background-size: 100%;
+          right: 20px;
+          top: -115px;
+        }
+        .sol--left{
+          >ol{
+            gap: 30px;
+            >li{
+              flex-direction: column;
+            }
+          }
+          >p{
+            &:last-child{
+              margin-top: 40px;
+            }
+          }
+        }
+        .sol--right{
+          flex-direction: column;
+          .sol--top{
+            width: 100%;
+            >ol{
+              >li{
+                >ol{
+                  >li{
+                    flex-direction: column;
+                  }
+                }
+              }
+            }
+          }
+          .sol--bot{
+            width: 100%;
+          }
+        }
+      }
+      .mna--apply--wrap{
+        .apply--content{
+          .title--wrap{
+            .title{
+              font-size: 30px;
+              margin-bottom: 50px;
+            }
+            .desc{
+              font-size: 16px;
+              margin-bottom: 60px;
+            }
+          }
+          .circle{
+            margin-bottom: 25px;
+          }
+          ol{
+            gap: 20px;
+            li{
+              width: 100%;
+            }
+          }
+        }
+      }
+      .mna--differ--wrap{
+        margin-top: 100px;
+        .differ--top{
+          flex-direction: column;
+          >div{
+            span{
+              font-size: 17px;
+              margin-bottom: 30px;
+            }
+            h3{
+              font-size: 22px;
+            }
+            a{
+              margin-top: 35px;
+            }
+            &.differ--left{
+              width: 100%;
+              padding: 40px 40px 120px 40px;
+              background-image: url(../img/img--differ1--mo.svg);
+            }
+            &.differ--right{
+              padding: 40px 40px 186px 40px;
+              width: 100%;
+              background-image: url(../img/img--differ2--mo.svg);
+              background-position: bottom 30px right 16px;
+            }
+          }
+        }
+        .differ--bot{
+          padding: 40px;
+          background-size: cover;
+          background-position: left 100px center;
+        }
+      }
+      .mna--process--wrap{
+        margin-top: 60px;
+      }
+      .mna--qna--wrap{
+        .qna--wrap{
+          &.active{
+            .answer--wrap{
+              padding: 30px 20px;
+              gap: 20px;
+            }
+          }
+          .question--wrap{
+            >p{
+              font-size: 16px;
+            }
+          }
+          .answer--wrap{
+            .inner--box{
+              >p{
+                font-size: 15px;
+              }
+              >ul{
+                margin-top: 20px;
+                gap: 20px;
+                >li{
+                  font-size: 15px;
+                  padding-left: 25px;
+                  &::before{
+                    top: 8px;
+                    left: 0px;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    .main--visual--section{
+      .main--visual--wrap{
+        .main--visual--img{
+          height: 650px;
+          img{
+            max-width: 100%;
+            width: 100%;
+            object-fit: cover;
+            max-height: 100%;
+          }
+          &::before{
+            height: 305px;
+          }
+        }
+      }
+    }
+  }
+  footer{
+    .footer--wrap{
+      .footer--top{
+        .footer--link{
+          column-gap: 30px;
+          row-gap: 20px;
+          a{
+            font-size: 15px;
+          }
+        }
+      }
+      .footer--bot{
+        .footer--inner--top{
+          padding: 40px 0 30px;
+        }
+        .footer--inner--bot{
+          padding: 30px 0 40px;
+        }
+      }
+    }
+  }
+}
+
+@media(max-width: 500px){
+  main{
+    .section--container{
+      .mna--impor--wrap{
+        .img--wrap{
+          width: 70%;
+          height: 155px;
+        }
+      }
+    }
+  }
+}

assets/scss/style.scss

@@ -0,0 +1,1479 @@
+@charset "UTF-8";
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
+
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section {
+	display: block;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+a{
+	text-decoration: none;
+}
+.ico{
+	display: inline-block;
+}
+
+// 믹스인
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+*{
+	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
+	word-break: keep-all;
+	color: #000;
+	box-sizing: border-box;
+}
+
+.mo{
+	display: none;
+}
+
+article{
+	section{
+		overflow: hidden;
+	}
+}
+
+header{
+  position: fixed;
+  width: 100%;
+  top: 0;
+  left: 0;
+  z-index: 1000;
+  background: #fff;
+  .header--line--banner--wrap{
+    background-image: url(../img/img--top--banner.svg);
+    background-size: cover;
+    background-repeat: no-repeat;
+    background-position: center;
+		background-color: #2F2F2F;
+    width:100%;        
+    padding:0px;    
+    @include flex-center;
+    overflow: hidden;
+    transition: all linear .2s;
+    height:80px;
+
+    &.actv{
+      height:0px;
+    }    
+    .inner--contents{
+      width:100%;
+      max-width: 1600px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      text-align: center;
+      position: relative;
+      .close--btn{
+        width: 38px;
+				cursor: pointer;
+        height: 38px;
+        background-color: transparent;
+        background-size: 18px 18px;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-image: url(../img/ico--close.svg);
+        border: 1px solid rgba(255, 255, 255, 0.50);
+        border-radius: 50%;
+        position: absolute;
+        top: calc(50% - 19px);
+				right: 0;
+      }
+      p{
+        color: #FFF;
+        font-size: 17px;
+        letter-spacing: -0.3px;
+        font-weight: 300;
+				>b{
+					font-weight: 600;
+					color: #1eff00;
+				}
+      }
+    }
+  }
+
+  .header--contents--wrap{
+    width:100%;
+    @include flex-center;
+    .header--contents{
+      width:100%;
+      display: flex;
+      flex-direction: column;
+      &.actv{
+        .header--gnb--wrap{
+          .sub--wrap{
+            max-height: 500px;
+          }
+        }
+      }
+      .header--gnb--wrap{
+				border-bottom: 1px solid #E9E9E9;
+        .gnb--wrap{
+          width: 100%;
+          max-width: 1600px;
+          margin: 0 auto;
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+          >ul{
+            @include flex-center;
+            li{
+							position: relative;
+              a{
+								text-align: center;
+								padding: 25px 50px;
+                color: #000;
+                font-size: 17px;
+                display: inline-block;
+                font-style: normal;
+                font-weight: 600;  
+                letter-spacing: -0.34px;
+								span{
+									display: inline-block;
+									font-size: 13px;
+									font-weight: 400;
+									color: #444;
+								}
+              }
+            }
+          }
+					.user--wrap{
+						border-radius: 50%;
+						overflow: hidden;
+						width: 50px;
+						height: 50px;
+						min-width: 50px;
+						background-image: url(../img/img--user.svg);
+						background-repeat: no-repeat;
+						background-position: center;
+						background-size: cover;
+						cursor: pointer;
+					}
+        }
+        .sub--wrap{
+          max-height: 0;
+          transition: max-height 0.3s;
+          overflow: hidden;
+          >ul{
+            max-width: 1600px;
+            padding-bottom: 10px;
+            margin: 0 auto;
+            width: 100%;
+            display: flex;
+            li{
+              width: 20%;
+              a{
+                display: inline-block;
+                text-align: center;
+                width: 100%;
+                line-height: 1;
+                font-size: 16px;
+                font-weight: 400;
+                padding: 10px 0;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  .header--ham--wrap{
+    background-color: #ffffff;
+    position: fixed;
+    left: 100%;
+    top: 0;
+    width: 100%;
+    height: 100vh;
+    transition: all 0.3s;
+    z-index: 10001;
+    display: flex;
+    flex-direction: column;
+    &.actv{
+      left: 0%;
+    }
+    .header--ham--top{
+      background-color: #2ecc71;
+      padding: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .logo--wrap{
+        display: inline-block;
+        max-width: 210px;
+        width: 25%;
+        img{
+          width: 100%;
+        }
+      }
+      .login--menu{
+        display: flex;
+        gap: 20px;
+        .ico--user{
+          display: inline-block;
+          width: 24px;
+          height: 24px;
+          background-repeat: no-repeat;
+          background-image: url(../img/ico_user.svg);
+        }
+        .ico--close{
+          display: inline-block;
+          cursor: pointer;
+          background-repeat: no-repeat;
+          width: 24px;
+          height: 24px;
+          background-image: url(../img/ico_close2.svg);
+        }
+      }
+    }
+    .header--ham--menu{
+      display: flex;
+      .ham--l{
+        position: relative;
+        width: 51%;
+        height: calc(100vh - 84px);
+        overflow-y: auto;
+        background-color: #F5F5F5;
+        ul{
+          padding: 0;
+          margin-bottom: 0;
+          li{
+            list-style: none;
+            cursor: pointer;
+            padding: 30px 10px;
+            color: #222222;
+            line-height: 1;
+            letter-spacing: -0.3px;
+            border-bottom: 1px solid #E3E3E3;
+            font-weight: 400;
+            background-color: #F5F5F5;
+            font-size: 15px;
+            text-align: center;
+            &.actv{
+              background-color: #ffffff;;
+            }
+          }
+        }
+        .menu--login{
+          text-decoration: none;
+          color: #555;
+          width: 100%;
+          font-size: 16px;
+          font-weight: 500;
+          margin: 50px 0;
+          line-height: 1;
+          letter-spacing: -0.32px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          text-align: center;
+          gap: 12px;
+          .ico{
+            width: 16px;
+            height: 16px;
+            &.login{
+              background-image: url(../img/ico_login.svg);
+            }
+            &.logout{
+              background-image: url(../img/ico_logout.svg);
+            }
+          }
+        }
+      }
+      .ham--r{
+        width: 49%;
+        padding: 0 15px;
+        height: calc(100vh - 84px);
+        overflow-y: auto;
+        ul{
+          padding: 0;
+          display: none;
+          &.actv{
+            display: block;
+          }
+          li{
+            list-style: none;
+            a{
+              width: 100%;
+              font-size: 15px;
+              display: inline-block;
+              color: #222222;
+              line-height: 1;
+              padding: 30px 15px;
+              letter-spacing: -0.3px;
+              border-bottom: 1px solid #F6F6F6;
+              text-decoration: none;
+              &.actv{
+                color: #315BFF;
+                font-weight: 500;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+}
+
+main{
+	  padding-top: 180px!important;
+  &.actv{
+    padding-top: 100px!important;
+  }
+  
+  .main--visual--section{
+    overflow: hidden;
+    position: relative;
+    .main--visual--wrap{
+      width:100%;
+      .main--visual--img{
+        width:100%;
+        overflow: hidden;
+        height:420px;
+        position: relative;
+				&::before{
+					content: '';
+					width: 100%;
+					height: 100%;
+					position: absolute;
+					top: 0;
+					left: 0;
+					display: inline-block;
+					background: linear-gradient(180deg, rgba(255, 255, 255, 0.80) 28.13%, rgba(255, 255, 255, 0.00) 100%);
+					z-index: 2;
+				}
+        img{
+          position: absolute;
+          left:50%;
+          transform: translateX(-50%);
+        }
+        .main--visual--txt{
+					z-index: 3;
+          position: absolute;
+          width: 100%;
+          left: 50%;
+					top: 0;
+          transform: translateX(-50%);
+          height: calc(100% - 100px);
+          padding: 0 20px;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          flex-direction: column;
+          max-width: 1200px;
+          text-align: center;
+          h3{
+            color: #111;
+            font-size: 50px;
+            font-weight: 400;
+						line-height: 1.4;
+						b{
+							font-weight: 700;
+						}
+          }
+          p{
+            font-size: 17px;
+            color: #000;
+            font-weight: 500;
+            margin-bottom: 30px;
+          }
+        }
+      }
+    }
+    .main--visual--pager{
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      bottom:30px;
+      z-index: 9;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      height: 46px;
+			padding: 5px 15px;
+      border-radius: 100px;
+      background: rgba(255, 255, 255, 0.20);
+      backdrop-filter: blur(2px);
+      .prev--next--wrap{
+        @include flex-center;
+        display: flex;
+        gap: 10px;
+        align-items: center;
+        justify-content: center;
+        button{
+          @include flex-center;
+          width: 20px;
+          height: 20px;
+          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--btn{
+						margin-left: 5px;
+						background-image: url(../img/ico--pause.svg);
+						border-radius: 50%;
+						background-size: 24px 24px;
+						background-color: rgba(0, 0, 0, 0.15);
+						width: 36px;
+						height: 36px;
+						&.pause{
+							background-image: url(../img/ico--play.svg);
+						}
+					}
+        }
+      }
+      .play--pause{
+        @include flex-center;
+        gap:11px;
+        button{          
+          @include flex-center;
+          width: 50px;
+          height: 50px;          
+          border-radius: 50px;
+          border:0px;          
+          background: rgba(255, 255, 255, 0.80);
+          backdrop-filter: blur(2px);
+        }
+      }
+      .main--visual--fraction{
+        display: flex;
+        align-items: center;
+        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:#000;
+            font-weight: 800;
+          }
+          &.fraction-separator{
+            background-color: #000;
+            width: 1px;
+            height: 12px;
+            display: inline-block;
+            margin: 0 10px;
+          }
+        }
+      }
+      .main--visual--pagination{
+        display: flex;
+        margin-right: 20px;
+        gap: 5px;
+        align-items: center;
+        justify-content: center;
+        padding-top: 20px;
+      }
+      .main--visual--progress{
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+        margin-right: 25px;
+        .main--visual--progress--bar{
+          display: flex;
+          align-items: center;
+        }
+        .progress-bar{
+          width: 100px;
+          height: 4px;
+          background-color: rgba(0, 0, 0, 0.15)!important;
+          border-radius: 100px;
+          position: relative;
+          overflow: hidden;
+        }
+        .progress-text{
+          color: #000;
+          font-size: 12px;
+          font-weight: 700;
+          width: 20px;
+        }
+				.progress-total{
+					color: #000;
+          font-size: 12px;
+          font-weight: 700;
+          width: 20px;
+					text-align: right;
+				}
+      }
+    }
+  }
+	.blue--section{
+		background: linear-gradient(180deg, #008CFF 0%, #68BBFF 100%);
+		.section--container{
+			padding-top: 110px;
+			padding-bottom: 80px;
+		}
+	}
+	.faq--section{
+		background-color: #F8F8F8;
+	}
+	.section--container{
+		max-width: 1200px;
+		margin: 0 auto;
+		width: 100%;
+		padding: 120px 0 150px;
+		.title--wrap{
+			text-align: center;
+			position: relative;
+			z-index: 3;
+			.title{
+				color: #000;
+				font-size: 45px;
+				line-height: 1.4;
+				font-weight: 400;
+				>b{
+					font-weight: 700;
+				}
+			}
+			&.color--white{
+				.title{
+					color: #fff;
+					b{
+						color: #fff;
+					}
+				}
+			}
+			.desc{
+				margin-top: 40px;
+				color: #000;
+				font-size: 18px;
+				font-weight: 300;
+				line-height: 1.4;
+				&.color--blue{
+					margin-top: 35px;
+					color: #008cff;
+					font-size: 17px;
+					font-weight: 400;
+				}
+			}
+		}
+		.desc--box--wrap{
+			margin-top: 80px;
+			background-color: #e9f5ff;
+			border-radius: 50px;
+			width: 100%;
+			background-image: url(../img/img--box1.svg);
+			background-repeat: no-repeat;
+			background-position: left 60px bottom;
+			padding: 70px 80px 70px 450px;
+			>h3{
+				margin-bottom: 35px;
+				font-size: 25px;
+				font-weight: 700;
+				letter-spacing: -0.5px;
+				color: #333;
+			}
+			>p{
+				color: #444;
+				letter-spacing: -0.34px;
+				font-size: 17px;
+				font-weight: 300;
+				line-height: 1.7;
+			}
+		}
+		.mna--impor--wrap{
+			margin-top: 130px;
+			margin-bottom: 120px;
+			height: 450px;
+			display: flex;
+			align-items: center;
+			gap: 120px;
+			.img--wrap{
+				position: relative;
+				height: 450px;
+				width: 500px;
+				&::before{
+					content: '';
+					width: 1000%;
+					right: 0;
+					height: 100%;
+					position: absolute;
+					background-image: url(../img/img--wedding.png);
+					background-repeat: no-repeat;
+					background-position: right center;
+					display: inline-block;
+				}
+			}
+			.desc--wrap{
+				display: flex;
+				flex-direction: column;
+				justify-content: center;
+				height: 100%;
+				position: relative;
+				&::after{
+					content: '';
+					display: inline-block;
+					z-index: -1;
+					position: absolute;
+					width: 304px;
+					left: calc(110%);
+					height: 472px;
+					top: 40%;
+					background-image: url(../img/bg--wedding.svg);
+				}
+				h3{
+					color: #111;
+					font-size: 32px;
+					font-weight: 400;
+					letter-spacing: -0.64px;
+					line-height: 1.7;
+					margin-bottom: 50px;
+					b{
+						color: #008cff;
+						font-weight: 700;
+					}
+				}
+				p{
+					color: #111;
+					font-size: 18px;
+					font-weight: 300;
+					letter-spacing: -0.36px;
+					line-height: 1.7;
+					b{
+						font-weight: 600;
+					}
+				}
+			}
+		}
+		.mna--maching--wrap{
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			margin-bottom: 100px;
+			.txt--wrap{
+				width: 367px;
+				>h3{
+					color: #222;
+					font-size: 40px;
+					letter-spacing: -0.8px;
+					font-weight: 400;
+					line-height: 1.4;
+					margin-bottom: 80px;
+					b{
+						font-weight: 600;
+						&.color--blue{
+							color: #008cff;
+						}
+					}
+				}
+				>p{
+					color: #444;
+					font-size: 18px;
+					letter-spacing: -0.36px;
+					line-height: 1.7;
+					font-weight: 400;
+				}
+			}
+			.seq--wrap{
+				display: flex;
+				flex-direction: column;
+				gap: 30px;
+				.seq--box{
+					padding: 35px 40px;
+					display: flex;
+					gap: 40px;
+					.numb{
+						color: #008cff;
+						font-size: 15px;
+						font-weight: 800;
+						width: 30px;
+						height: 30px;
+						background-color: #fff;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						border-radius: 50%;
+						margin-bottom: 20px;
+					}
+					p{
+						color: #fff;
+						font-size: 18px;
+						line-height: 1.4;
+						font-weight: 500;
+					}
+					&:nth-child(1){
+						margin-right: 140px;
+						border-radius: 40px 40px 10px 40px;
+						background-color: #1a98ff;
+					}
+					&:nth-child(2){
+						.numb{
+							color: #8486FB;
+						}
+						border-radius: 40px 40px 40px 10px;
+						background-color: #8486FB;
+						margin-left: auto;
+					}
+					&:nth-child(3){
+						.numb{
+							color: #7EC5FF;
+						}
+						background-color: #7EC5FF;
+						border-radius: 40px 40px 10px 40px;
+						margin-right: auto;
+					}
+				}
+			}
+		}
+		.mna--free--wrap{
+			border-radius: 50px;
+			border: 1px solid #DDD6D2;
+			background-color: #FFFCF3;
+			display: flex;
+			gap: 70px;
+			padding: 45px 60px;
+			align-items: center;
+			.desc--wrap{
+				h3{
+					margin-bottom: 20px;
+					font-size: 25px;
+					font-weight: 700;
+					letter-spacing: -0.5px;
+				}
+				p{
+					color: #444;
+					font-size: 18px;
+					font-weight: 300;
+					line-height: 1.7;
+					letter-spacing: -0.36px;
+					b{
+						font-weight: 500;
+						color: #f70;
+					}
+				}
+			}
+		}
+		.mna--reason--wrap{
+			margin-top: 50px;
+			border-radius: 50px;
+			background-color: #3263ce;
+			background-image: url(../img/img--reason.svg);
+			background-repeat: no-repeat;
+			background-position: right 65px bottom;
+			padding: 70px 560px 70px 60px;
+			h3{
+				color: #fff600;
+				font-size: 30px;
+				margin-bottom: 40px;
+				font-weight: 700;
+				letter-spacing: -0.6px;
+			}
+			p{
+				color: #fff;
+				font-size: 20px;
+				font-weight: 400;
+				letter-spacing: -0.4px;
+				line-height: 1.7;
+			}
+		}
+		.mna--sol--wrap{
+			display: flex;
+			gap: 40px;
+			margin-top: 70px;
+			position: relative;
+			&::before{
+				content: '';
+				width: 1138.414px;
+				right: calc(28% + 150px);
+				height: 559.298px;
+				top: -174px;
+				display: inline-block;
+				position: absolute;
+				z-index: 1;
+				background-image: url(../img/bg--blue--section.svg);
+			}
+			.sol--left{
+				padding: 45px 45px 55px;
+				border-radius: 40px;
+				border: 1px solid #FFF;
+				background: rgba(255, 255, 255, 0.80);
+				backdrop-filter: blur(4px);
+				width: 60%;
+				z-index: 2;
+				>h4{
+					margin-bottom: 30px;
+					font-size: 20px;
+					font-weight: 600;
+				}
+				>p{
+					font-size: 17px;
+					color: #333;
+					font-weight: 400;
+					margin-bottom: 45px;
+					line-height: 1.7;
+					&:last-child{
+						margin-top: 45px;
+						margin-bottom: 0;
+					}
+					>b{
+						color: #07f;
+						font-weight: 700;
+						&.color--black{
+							font-weight: 600;
+							color: #000;
+						}
+					}
+				}
+				>ol{
+					display: flex;
+					flex-direction: column;
+					gap: 35px;
+					>li{
+						line-height: 1.7;
+						display: flex;
+						align-items: start;
+						gap: 16px;
+						>span{
+							width: 50px;
+							padding: 8px 10px;
+							display: flex;
+							border-radius: 100px;
+							border: 1px solid rgba(0, 140, 255, 0.50);
+							background-color: #FFF;
+							line-height: 1;
+							color: #008cff;
+							font-size: 14px;
+							font-weight: 600;
+							justify-content: center;align-items: center;
+						}
+						>p{
+							color: #333;
+							font-size: 16px;
+							font-weight: 400;
+							>b{
+								color: #07f;
+								font-weight: 600;
+							}
+						}
+					}
+				}
+			}
+			.sol--right{
+				width: 40%;
+				display: flex;
+				flex-direction: column;
+				gap: 40px;
+				.sol--top{
+					border-radius: 40px;
+					border: 1px solid #FFF;
+					background-color: rgba(255, 255, 255, 0.80);
+					backdrop-filter: blur(4px);
+					height: calc(100% - 440px);
+					padding: 40px 45px 40px 40px;
+					>h4{
+						color: #222;
+						font-size: 20px;
+						font-weight: 600;
+					}
+					>ol{
+						margin-top: 30px;
+						display: flex;
+						flex-direction: column;
+						gap: 30px;
+						>li{
+							display: flex;
+							gap: 12px;
+							>span{
+								width: 25px;
+								height: 25px;
+								border-radius: 50%;
+								background-color: #7678fa;
+								color: #fff;
+								font-size: 12px;
+								font-weight: 700;
+								justify-content: center;
+								align-items: center;
+								text-align: center;
+								display: flex;
+								min-width: 25px;
+							}
+							p{
+								color: #333;
+								font-size: 16px;
+								font-weight: 400;
+								line-height: 1.7;
+								b{
+									color: #111;
+									font-weight: 500;
+								}
+							}
+							>ol{
+								>li{
+									display: flex;
+									>span{
+										color: #7330ff;
+										font-size: 16px;
+										font-weight: 700;
+										min-width: 60px;
+										line-height: 1.7;
+									}
+								}
+							}
+						}
+					}
+				}
+				.sol--bot{
+					padding: 40px 45px 0px 40px;
+					display: flex;
+					flex-direction: column;
+					height: 400px;
+					border-radius: 40px;
+					border: 1px solid #FFF;
+					background: rgba(132, 74, 255, 0.50);
+					backdrop-filter: blur(4px);
+					>h4{
+						color: #fff;
+						font-size: 20px;
+						font-weight: 600;
+					}
+					>p{
+						color: #fff;
+						font-size: 16px;
+						font-weight: 400;
+						line-height: 1.7;
+						margin-top: 30px;
+						.numb{
+							border-radius: 100px;
+							background-color: #fff157;
+							width: 20px;
+							height: 20px;
+							margin-left: 5px;
+							margin-right: 5px;
+							color: #6C7EFF;
+							display: inline-flex;
+							vertical-align: 2px;
+							align-items: center;
+							justify-content: center;
+							text-align: center;
+							font-size: 12px;
+							font-weight: 700;
+						}
+					}
+					.bubble--wrap{
+						display: flex;
+						margin-top: auto;
+						gap: 24px;
+						.img{
+							img{
+								vertical-align: top;
+							}
+						}
+						.bubble{
+							margin-top: 12px;
+							padding: 30px 15px;
+							border-radius: 20px;
+							background: #FFF;
+							height: fit-content;
+							color: #222;
+							font-size: 16px;
+							font-weight: 600;
+							line-height: 1.7;
+							position: relative;
+							&::before{
+								content: '';
+								position: absolute;
+								width: 16px;
+								height: 18px;
+								background-image: url(../img/ico--bubble--tail.svg);
+								right: 100%;
+								top: calc(50% - 9px);
+							}
+							b{
+								color: #7330ff;
+								font-size: 16px;
+								font-weight: 600;
+							}
+						}
+					}
+				}
+			}
+		}
+		.mna--apply--wrap{
+			display: flex;
+			gap: 160px;
+			.apply--bg{
+				position: relative;
+				width: 230px;
+				min-width: 230px;
+				&::before{
+					content: '';
+					position: absolute;
+					bottom: 40px;
+					right: 0;
+					background-image: url(../img/bg--apply.png);
+					width: 700px;
+					height: 700px;
+				}
+			}
+			.apply--content{
+				.title--wrap{
+					text-align: left;
+					h3{
+						color: #000;
+						font-size: 18px;
+						font-weight: 600;
+						margin-bottom: 50px;
+						position: relative;
+						display: inline-block;
+						&::before{
+							position: absolute;
+							width: 100%;
+							content: '';
+							display: inline-block;
+							background: rgba(0, 208, 255, 0.20);
+							height: 15px;
+							bottom: -4px;
+						}
+					}
+					.title{
+						margin-bottom: 40px;
+						font-size: 50px;
+						font-weight: 700;
+					}
+					.desc{
+						color: #000;
+						font-size: 18px;
+						font-weight: 500;
+						margin-bottom: 70px;
+						b{
+							font-weight: 700;
+							color: #008cff;
+						}
+					}
+				}
+				.circle{
+					padding: 15px;
+					line-height: 1;
+					color: #fff;
+					width: fit-content;
+					border-radius: 100px;
+					font-size: 16px;
+					font-weight: 600;
+					background-color: #222;
+					margin-bottom: 30px;
+				}
+				>p{
+					&.mb--50{
+						margin-bottom: 50px;
+					}
+					margin-bottom: 30px;
+					color: #000;
+					font-weight: 400;
+					line-height: 1.7;
+					b{
+						font-weight: 600;
+						&.big{
+							font-size: 22px;
+						}
+					}
+					&.type2{
+						padding-left: 16px;
+						position: relative;
+						&::before{
+							position: absolute;
+							top: 0;
+							left: 0;
+							content: '※';
+						}
+					}
+				}
+				ol{
+					display: flex;
+					flex-wrap: wrap;
+					gap: 30px;
+					li{
+						display: flex;
+						gap: 15px;
+						width: calc(50% - 15px);
+						span{
+							color: #000;
+							font-size: 12px;
+							font-weight: 700;
+							border-radius: 100px;
+							width: 25px;
+							height: 25px;
+							min-width: 25px;
+							display: flex;
+							justify-content: center;
+							align-items: center;
+							text-align: center;
+							border: 1px solid rgba(0, 0, 0, 0.50);
+							background: #FFF;
+						}
+						p{
+						}
+						line-height: 24px;
+					}
+				}
+			}
+		}
+		.mna--differ--wrap{
+			display: flex;
+			margin-top: 120px;
+			flex-direction: column;
+			gap: 60px;
+			.differ--top{
+				display: flex;
+				gap: 60px;
+				>div{
+					width: calc(50% - 30px);
+					border-radius: 30px;
+					background-color: #EBF4FF;
+					padding: 60px 140px 70px 60px;
+					background-image: url(../img/img--differ1.svg);
+					background-repeat: no-repeat;
+					background-position: right bottom;
+					span{
+						color: #333;
+						font-size: 19px;
+						font-weight: 500;
+						letter-spacing: -0.38px;
+						display: inline-block;
+						margin-bottom: 40px;
+						b{
+							color: #008cff;
+							font-weight: 700;
+						}
+					}
+					h3{
+						color: #222;
+						font-size: 25px;
+						font-weight: 800;
+						letter-spacing: -0.5px;
+						margin-bottom: 25px;
+					}
+					p{
+						color: #555;
+						font-size: 16px;
+						line-height: 1.7;
+						font-weight: 400;
+						&.type2{
+							margin-top: 25px;
+							color: #7330ff;
+							font-size: 15px;
+							font-weight: 400;
+						}
+					}
+					a{
+						padding: 15px 20px;
+						display: flex;
+						width: fit-content;
+						line-height: 1;
+						gap: 5px;
+						color: #fff;
+						font-size: 15px;
+						font-weight: 600;
+						border-radius: 100px;
+						background-color: #008CFF;
+						box-shadow: 0 5px 8px 0 #BCD9FF;
+						margin-top: 50px;
+						.ico{
+							width: 16px;
+							height: 16px;
+							background-image: url(../img/ico--btn--arrow.svg);
+						}
+					}
+					&.differ--right{
+						background-color: #F3EEFF;
+						background-image: url(../img/img--differ2.svg);
+						background-position: bottom 62px right 20px;
+						span{
+							b{
+								color: #7330FF
+							}
+						}
+						a{
+							background: #9765FF;
+							box-shadow: 0 5px 8px 0 #E3D4FF;
+						}
+					}
+				}
+			}
+			.differ--bot{
+				border-radius: 30px;
+				overflow: hidden;
+				display: flex;
+				flex-direction: column;
+				justify-content: space-between;
+				background-color: #F3F7FF;
+				background-position: right center;
+				background-image: url(../img/img--kmx.png);
+				background-size: contain;
+				background-repeat: no-repeat;
+				padding: 60px;
+				.logo--wrap{
+					margin-bottom: 30px;
+				}
+				h3{
+					font-size: 22px;
+					color: #222;
+					font-weight: 600;
+					margin-bottom: 35px;
+					letter-spacing: -0.44px;
+				}
+				a{
+					display: flex;
+					gap: 5px;
+					align-items: center;
+					justify-content: center;
+					width: fit-content;
+					padding: 15px 20px;
+					line-height: 1;
+					background-color: #013893;
+					border-radius: 100px;
+					color: #fff;
+					font-size: 15px;
+					font-weight: 600;
+					.ico{
+						width: 16px;
+						height: 16px;
+						background-image: url(../img/ico--btn--arrow.svg);
+					}
+				}
+			}
+		}
+		.mna--process--wrap{
+			margin-top: 120px;
+			.process--wrap{
+				margin-top: 80px;
+				img{
+					width: 100%;
+				}
+			}
+		}
+		.mna--qna--wrap{
+			margin-top: 70px;
+			.qna--wrap{
+				display: flex;
+				flex-direction: column;
+				border-top: 1px solid #E9E9E9;
+				&:last-child{
+					.question--wrap{
+						border-bottom: 1px solid #E9E9E9;
+					}
+				}
+				&.active{
+					.question--wrap{
+						border-bottom: 1px solid #E9E9E9;
+						.arrow{
+							background-image: url(../img/ico--faq--arrow--up.svg);
+						}
+					}
+					.answer--wrap{
+						max-height: 1000px;
+						padding: 45px 20px;
+					}
+					&:last-child{
+						.answer--wrap{
+							border-bottom: 1px solid #E9E9E9;
+						}
+					}
+				}
+				.question--wrap{
+					display: flex;
+					justify-content: space-between;
+					align-items: center;
+					gap: 25px;
+					cursor: pointer;
+					padding: 25px 20px;
+					background-color: #fff;
+					.ico{
+						width: 38px;
+						height: 38px;
+						border-radius: 50%;
+						border: 1px solid #e8e8e8;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						text-align: center;
+						background: linear-gradient(159deg, #008CFF 12.57%, #67B3FF 49%, #B487FF 76.99%, #CBA6FF 92.33%);
+						background-clip: text;
+						-webkit-background-clip: text;
+						-webkit-text-fill-color: transparent;
+						font-size: 16px;
+						font-weight: 800;
+					}
+					.arrow{
+						width: 18px;
+						height: 18px;
+						display: inline-block;
+						background-image: url(../img/ico--faq--arrow--down.svg);
+					}
+					>p{
+						color: #111;
+						font-size: 17px;
+						font-weight: 600;
+						width: calc(100% - 106px);
+					}
+				}
+				.answer--wrap{
+					max-height: 0;
+					padding: 0;
+					transition: all 0.3s;
+					overflow: hidden;
+					background-color: #F5FCFF;
+					display: flex;
+					gap: 25px;
+					.ico{
+						width: 38px;
+						min-width: 38px;
+						height: 38px;
+						display: flex;
+						justify-content: center;
+						align-items: center;
+						text-align: center;
+						border-radius: 1000px;
+						background: linear-gradient(159deg, #008CFF 12.57%, #67B3FF 64.72%, #CBA6FF 92.33%);
+						font-size: 16px;
+						font-weight: 800;
+						color: #fff;
+					}
+					.inner--box{
+						line-height: 1.7;
+						>p{
+							font-size: 16px;
+							font-weight: 500;
+							color: #333;
+						}
+						>ul{
+							margin-top: 30px;
+							display: flex;
+							flex-direction: column;
+							gap: 30px;
+							>li{
+								color: #333;
+								font-size: 16px;
+								padding-left: 45px;
+								font-weight: 400;
+								position: relative;
+								&::before{
+									content: '';
+									width: 4px;
+									position: absolute;
+									height: 4px;
+									border: 2px solid #99a9b8;
+									border-radius: 50%;
+									left: 20px;
+									top: 10px;
+								}
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
+footer{
+	background-color: #111;
+	.footer--wrap{
+		.footer--container{
+			max-width: 1600px;
+			width: 100%;
+			margin: 0 auto;
+			display: flex;
+			flex-direction: column;
+		}
+		.footer--top{
+			border-bottom: 1px solid #323232;
+			.footer--link{
+				display: flex;
+				flex-wrap: wrap;
+				padding: 25px 0;
+				gap: 40px;
+				a{
+					color: #fff;
+					font-size: 16px;
+					font-weight: 600;
+				}
+			}
+		}
+		.footer--bot{
+			.footer--inner--top{
+				padding: 50px 0;
+				display: flex;
+				flex-direction: column;
+				gap: 20px;
+				p{
+					color: #fff;
+					font-size: 16px;
+					font-weight: 400;
+					letter-spacing: -0.32px;
+				}
+				.contact--list{
+					display: flex;
+					align-items: center;
+					flex-wrap: wrap;
+					gap: 15px;
+					.bar{
+						width: 1px;
+						height: 11px;
+						background: rgba(255, 255, 255, 0.50);
+					}
+				}
+			}
+			.footer--inner--bot{
+				padding: 30px 0;
+				border-top: 1px solid #323232;
+				color: #9d9fac;
+				font-size: 13px;
+				line-height: 1.7;
+				font-weight: 400;
+				letter-spacing: -0.26px;
+			}
+		}
+	}
+}

index.html

@@ -0,0 +1,532 @@
+<!DOCTYPE html>
+<html lang="ko">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="./assets/css/style.css">
+    <link rel="stylesheet" href="./assets/css/media.css">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css"/>
+    <script src="https://code.jquery.com/jquery-3.7.1.js" integrity="sha256-eKhayi8LEQwp4NKxN+CfCh+3qOVUtJn3QNZ0TciWLP4=" crossorigin="anonymous"></script>
+    <script src="./assets/js/common.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
+    <title>세부마</title>
+    </head>
+    <body>
+        <header>
+            <div class="header--line--banner--wrap">
+                <div class="inner--contents">        
+                    <button type="button" class="close--btn">
+                    </button>
+                    <p>모두 어렵다고 생각하는 M&A 매칭, <br class="mo">Deal 정보 압도적 1위, <br class="mo"><b>세부마</b>와 진행하세요.</p>
+                </div>
+            </div>
+            <div class="header--contents--wrap">
+                <div class="header--contents">
+                    <div class="header--gnb--wrap">
+                        <div class="gnb--wrap">
+                            <div class="logo--wrap">
+                                LOGO
+                            </div>
+                            <ul>
+                                <li>
+                                    <a href="#">세부마란? (Sebuma)</a>
+                                </li>
+                                <li>
+                                    <a href="#">매도티저 등록<br><span>(M&A자문조직등록)</span></a>
+                                </li>
+                                <li>
+                                    <a href="#">매수티저 등록<br><span>(M&A자문조직등록)</span></a>
+                                </li>
+                                <li><a href="#">Q&A 상담 신청</a></li>
+                                <li><a href="#">M&A 당사자 등록<br><span>(매도자, 매수자 직접 등록)</span></a></li>
+                                <li><a href="#">매경딜정보</a></li>
+                            </ul>
+                            <div class="user--wrap">
+                            </div>
+                            <div class="ham--wrap">
+                            </div>
+                        </div>
+                        <!-- <div class="sub--wrap">
+                            <ul>
+                                <li>
+                                    <a href="#">상담신청</a>
+                                </li>
+                                <li>
+                                    <a href="#">상담신청</a>
+                                </li>
+                                <li>
+                                    <a href="#">상담신청</a>
+                                </li>
+                                <li>
+                                    <a href="#">상담신청</a>
+                                </li>
+                                <li>
+                                    <a href="#">상담신청</a>
+                                </li>
+                                <li>
+                                    <a href="#">상담신청</a>
+                                </li>
+                            </ul>
+                        </div> -->
+                    </div>
+                </div>
+            </div>
+            <div class="header--ham--wrap">
+                <div class="header--ham--top">
+                    <a href="/" class="logo--wrap">
+                    <!-- <img src="./assets/img/header_logo.svg" alt="M&A 궁합"> -->
+                    </a>
+                    <div class="login--menu">
+                    <div class="ico--close"></div>
+                    </div>
+                </div>
+                <div class="header--ham--menu">
+                    <div class="ham--l">
+                    <ul>
+                        <li class="menu--1 actv">M&A 상담 신청</li>
+                        <li class="menu--2">매도자님께 ★꿈 실현</li>
+                        <li class="menu--3">매수자님께 ★꿈 실현</li>
+                        <li class="menu--4">주요 내용</li>
+                        <li class="menu--5">문의/신청</li>            
+                    </ul>
+                    </div>
+                    <div class="ham--r">
+                    <ul class="menu--sub--1 actv">            
+                        <li><a href="#">기업매도 상담신청</a></li>
+                        <li><a href="#">기업매수 상담신청</a></li>
+                    </ul>
+                    <ul class="menu--sub--2">
+                        <li><a href="#">매도자님께 ★꿈 실현</a></li>
+                    </ul>
+                    <ul class="menu--sub--3">
+                        <li><a href="#">매수자님께 ★꿈 실현</a></li>
+                    </ul>
+                    <ul class="menu--sub--4">
+                        <li><a href="#">M&A의뢰 6가지 이유</a></li>
+                        <li><a href="#">M&A와 궁합</a></li>
+                        <li><a href="#">차별화 전략</a></li>
+                        <li><a href="#">M&A궁합의 탁월성</a></li>
+                        <li><a href="#">가업승계형 M&A전략</a></li>
+                        <li><a href="#">전문인력</a></li>
+                        <li><a href="#">FAQ</a></li>
+                    </ul>
+                    <ul class="menu--sub--5">
+                        <li>
+                        <a href="#">가업승계 문의</a>
+                        </li>    
+                        <li>
+                        <a href="#">회생기업 문의</a>
+                        </li>   
+                        <li>
+                        <a href="#">이멜 문의</a>
+                        </li>           
+                    </ul>         
+                    </div>
+                </div>
+            </div>
+        </header>
+        <main>
+            <article>
+                <section class="main--visual--section">
+                    <div class="main--visual--wrap main--visual">
+                        <div class="swiper-wrapper">
+                            <div class="swiper-slide">
+                                <div class="main--visual--img">          
+                                    <picture>
+                                        <source srcset="./assets/img/img--main1--mo.png" media="(max-width: 768px)">
+                                        <img src="./assets/img/img--main1.png" alt="메인 비주얼 이미지 1">
+                                    </picture>
+                                    <div class="main--visual--txt">
+                                        <p>OVERWHELMING FIRST PLACE</p>
+                                        <h3>세부마는 <b>M&A 자문기관의 <br />매칭센터</b>입니다</h3>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="swiper-slide">
+                                <div class="main--visual--img">          
+                                    <picture>
+                                        <source srcset="./assets/img/img--main1--mo.png" media="(max-width: 768px)">
+                                        <img src="./assets/img/img--main1.png" alt="메인 비주얼 이미지 1">
+                                    </picture>
+                                    <div class="main--visual--txt">
+                                        <p>OVERWHELMING FIRST PLACE</p>
+                                        <h3>세부마는 <b>M&A 자문기관의 <br />매칭센터</b>입니다</h3>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>        
+                    <div class="main--visual--pager">
+                        <div class="main--visual--progress">
+                            <p class="progress-title"></p>
+                            <div class="main--visual--progress--bar">
+                                <span class="progress-text">1</span>
+                                <div class="progress-bar"></div>
+                                <span class="progress-total"></span>
+                            </div>
+                        </div>
+                        <div class="prev--next--wrap">
+                            <button type="button" class="prev--btn"></button>
+                            <button type="button" class="next--btn"></button>
+                            <button type="button" class="play--btn"></button>
+                        </div>
+                    </div>
+                </section>
+            </article>
+            <article>
+                <section class="">
+                    <div class="section--container">
+                        <div class="title--wrap">
+                            <h2 class="title">M&A자문조직은 <b>세부마를 신청</b>하세요</h2>
+                            <p class="desc">세부마(SeBuMa, Seller Buyer Matching)는 M&A자문조직의 매도/매수 매칭 시스템입니다.</p>
+                            <p class="desc color--blue">※ M&A 자문/전문조직이 아니고 직접 소속회사 M&A(매도, 매수)를 희망하는 경우 “M&A 당사자 등록” 메뉴에 등록하세요!</p>
+                        </div>
+                        <div class="desc--box--wrap">
+                            <h3>M&A 자문(전문) 조직</h3>
+                            <p>회계법인/회계사, 세무법인/세무사, 증권회사, 법무법인/변호사, M&A 전문 회사, 사모펀드, 개인 프리랜서 등 M&A 자문을 전문으로 하면서 매년 M&A 실적이 있는 조직 또는 개인</p>
+                        </div>
+                        <div class="mna--impor--wrap">
+                            <div class="img--wrap"></div>
+                            <div class=desc--wrap>
+                                <h3>M&A에서 가장 중요한 매도자·매수자 매칭은 <br />
+                                    <b>결혼 시 어떤 신랑과 어떤 신부를 만나느냐</b> 만큼 <br />중요합니다.</h3>
+                                <p>* 상대방을 못 만나면, 결혼을 못하는 것처럼 M&A도 못하게 됩니다.<br><b>결국 어렵게 의뢰받은 딜 정보를 사장되게(사라지게) 됩니다.</b></p>
+                            </div>
+                        </div>
+                        <div class="mna--maching--wrap">
+                            <div class="txt--wrap">
+                                <h3>세부마는 의뢰받은 <b>M&A 기업수 1만개 이상</b> 딜정보를 보유하고 있는 <b class="color--blue">압도적 1위 매도-매수 매칭조직</b>입니다.</h3>
+                                <p>세부마(SeBuMa)는 M&A자문조직에게 최적의 매칭을  만들어 드립니다.</p>
+                            </div>
+                            <div class="seq--wrap">
+                                <div class="seq--box">
+                                    <div class="seq--left">
+                                        <i class="numb">1</i>
+                                        <p>자문조직, 세부마(SeBuMa) 신청</p>
+                                    </div>
+                                    <div class="seq--right">
+                                        <img src="./assets/img/ico--seq1.svg" alt="">
+                                    </div>
+                                </div>
+                                <div class="seq--box">
+                                    <div class="seq--left">
+                                        <i class="numb">2</i>
+                                        <p>매도/매수 매칭을 거래소와 <br />매칭 후 각자 진행</p>
+                                    </div>
+                                    <div class="seq--right">
+                                        <img src="./assets/img/ico--seq2.svg" alt="">
+                                    </div>
+                                </div>
+                                <div class="seq--box">
+                                    <div class="seq--left">
+                                        <i class="numb">3</i>
+                                        <p>M&A 성공건 수 급증</p>
+                                    </div>
+                                    <div class="seq--right">
+                                        <img src="./assets/img/ico--seq3.svg" alt="">
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                        <div class="mna--free--wrap">
+                            <div class="img--wrap">
+                                <img src="./assets/img/img--free.svg" alt="">
+                            </div>
+                            <div class="desc--wrap">
+                                <h3>매칭 Free</h3>
+                                <p>거래소는 매칭을 위한 시스템 구축, 압도적 1위 딜 정보 축적, 매칭 요청 시 매칭을 위한 많은 기업분석, 시간/노력, 인건비 등의 실비용을 우선 부담.<br /><b>성공하면 자문 조직은 거래소에 매칭 fee 지급 (수령금액의 5%, 개인은 10%)</b></p>
+                            </div>
+                        </div>
+                        <div class="mna--reason--wrap">
+                            <h3>★★  세부마를 해야 하는 이유!</h3>
+                            <p>귀하(M&A자문조직)가 의뢰받은 M&A 딜 정보는 상대방을 찾지 못해 매칭을 못하면 아무 의미가 없습니다. 매칭을 통해 우선 성공시키는 것이 중요합니다.</p>
+                        </div>
+                    </div>
+                </section>
+            </article>
+            <article>
+                <section class="blue--section">
+                    <div class="section--container">
+                        <div class="title--wrap color--white">
+                            <h2 class="title">M&A매칭이 <b>왜! 절대적으로 중요</b>한가?</h2>
+                        </div>
+                        <div class="mna--sol--wrap">
+                            <div class="sol--left">
+                                <h4>현상황</h4>
+                                <p><b>실제로 매도기업과 매수자가 매칭을 못하니 M&A 진행을 못하고, 진행을 못하니 성공도 못하는 경우가 거의 100%에 가깝습니다. </b>딜 정보를 몇 개, 몇 십 개, 몇 백 개 가지고 있다고 하여 매칭이 되지는 않습니다. 왜냐하면 그만큼 M&A 매칭이 어렵기 때문입니다. 그런데 매도기업, 매수기업의 매칭이 안 되면 한 걸음도 나아 갈 수 없습니다. 그만큼 매칭은 M&A에서 아주 중요합니다. 이는 남녀가 결혼을 해야 하는데 서로 상대방을 못 만나면 한 단계도 진행할 수 없는 것과 같은 이치입니다.
+                                </p>
+                                <h4>매칭 논리</h4>
+                                <ol>
+                                    <li><span>첫째!</span><p>매수자에게는 매도기업의 <b>아이템, 매출액, 이익구조, 성장력, 확장성, 경쟁력, 시장 확장력, 시너지, 기술력, 인력, 소재지</b> 등이 우선 맞아야 합니다.<br />매도자에게는 매수자가 매도기업을 잘 키울 수 있는 경영능력, 자금능력이 있는지를 신뢰할 수 있어야 합니다.<br>이와 같이 한 두 가지도 아니고 여러 가지가 모두 맞아야 합니다.</p></li>
+                                    <li><span>둘째!</span><p>매도기업과 매수기업의 <b>M&A 딜 조건이 맞아야</b> 합니다. 매도/매수 금액, 지분, 구주/신주, 자산구조, 절차, 조건 등 여러 분야 조건을 맞추기가 쉽지 않으며, 특히 거래금액의 경우 10여 가지 이상의 팩터를 어떻게 판단하느냐에 따라 금액이 달라지기 때문에 매우 어렵습니다.</p></li>
+                                    <li><span>셋째!</span><p><b>M&A는 수학공식으로도 풀기 어려운 이러한 과정을 극비로 진행해야 하기 때문에 더 어렵습니다.</b> 매수자에 맞는 매도기업, 또는 매도기업에 맞는 매수자를 극비로 발굴하여 매칭한다는 것은 매우 쉽지 않은 일입니다.</p></li>
+                                    <li><span>넷째!</span><p>매수자-매도자 간의 <b>여러 조건 과정을 심도 있게 거치다 보면 1차 매칭→2차 매칭→3차 매칭까지 되어야 비로소 성공</b>할 수 있습니다. 사실 1차 매칭도 어렵지만, 1차 매칭에 성공해도 그다음 단계인 2차 매칭, 3차 매칭에서 결렬되는 경우가 허다합니다.</p></li>
+                                </ol>
+                                <p>이러한 어려운 과정의 매칭에 성공하기 위해서는 <b class="color--black">대규모의 딜 정보(수천 개 이상, 1만 개 이상)를 갖고 있어야 하는 것이 ★★필수사항</b>입니다.<br>즉 외부 수십 곳에 티저를 뿌리면서 진행한다고 되는 것이 아니며, 오히려 소문만 나고, 딜 진행은 안 되기 때문입니다.</p>
+                            </div>
+                            <div class="sol--right">
+                                <div class="sol--top">
+                                    <h4>해결을 위한 조건</h4>
+                                    <ol>
+                                        <li><span>1</span><p>매수자와 매도자가 원하는 10여가지 이상의 팩터를 맞출 수 있는 매칭이어야 합니다.</p></li>
+                                        <li><span>2</span><p>극비로 진행할 수 있으면서, 소문 안나게 진행하는 매칭이어야 합니다.</p></li>
+                                        <li><span>3</span>
+                                            <ol>
+                                                <li><span>1차 매칭</span><br class="mo"><p>(<b>계량적 매칭</b> : 아이템, 매출액, 이익, 자산 구조 등)</p></li>
+                                                <li><span>2차 매칭</span><p>(<b>속성 매칭</b> : 성장성, 경쟁력, 시너지, 잠재 능력 등)</p></li>
+                                                <li><span>3차 매칭</span><p>(<b>조건 매칭</b> : 가격, 조건 매칭 등)</p></li>
+                                                <li><p>즉 1차, 2차, 3차 매칭을 충족할 수 있는 매칭이어야 합니다.</p></li>
+                                            </ol>
+                                        </li>
+                                    </ol>
+                                </div>
+                                <div class="sol--bot">
+                                    <h4>해결책</h4>
+                                    <p>상기 <span class="numb">1</span>항, <span class="numb">2</span>항, <span class="numb">3</span>항을 만족시키기 위해서는 수천개 또는 1만개 이상의 딜 정보를 갖고 있으면서 내부 매칭을 통해 극비로 진행하는 시스템이 반드시 필요합니다.</p>
+                                    <div class="bubble--wrap">
+                                        <div class="img"><img src="./assets/img/img--solution.svg" alt=""></div>
+                                        <div class="bubble">그 해결책은 바로!<br>
+                                            <b>세부마(SeBuMa)</b>입니다!</div>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </article>
+            <article>
+                <section class="">
+                    <div class="section--container">
+                        <div class="mna--apply--wrap">
+                            <div class="apply--bg"></div>
+                            <div class="apply--content">
+                                <div class="title--wrap">
+                                    <h3>APPLICATION</h3>
+                                    <h2 class="title">세부마 신청</h2>
+                                    <p class="desc">실적이 있는 <b>M&A 자문</b> / <b>
+                                        전문 조직 또는 개인 사업자 (프리랜서)</b> 가능.  단, <b>세부마 대상 여부를 심사!</b></p>
+                                </div>
+                                <h4 class="circle">대상/방법</h4>
+                                <p class="mb--50">M&A 딜정보를 한쪽만 보유하고 있어 상대방과 매칭을 못하고 있는 <b>회계법인, 법무법인, 증권회사, 펀드, M&A 딜 자문 조직은 세부마 신청</b></p>
+                                <h4 class="circle">프로세스</h4>
+                                <p>M&A자문 조직이 매도티저(또는 매수티저)를 <b class="big">세부마</b>에 제출 → <b class="big">세부마</b>는 갖고 있는 많은 딜 정보 중에서 최적의 정보와 매칭 → 각자 진행</p>
+                                <p class="type2">M&A 전문/자문조직으로써 M&A 경험이 많지 않거나, 독자적 M&A 진행이 어려운 경우 → 보유 딜정보를 거래소와 합작 진행 (각자 진행 아님) (성공시 보유딜 정보의 수수료 5:5 분배)</p>
+                                <p class="type2">독자적 M&A 진행 : M&A 진행시 심도 있는 기업 분석, 가치 평가, IM 자료 작성, 딜 구조 설계, 계약서 작성, 진행 리더십, 기타 독자적으로 운영할 수 있어야 한다는 의미입니다.</p>
+                                <h4 class="circle">세부마 혜택</h4>
+                                <ol>
+                                    <li><span>1</span><p>매도/매수 매칭 성공률 크게 향상</p></li>
+                                    <li><span>2</span><p>모바일로 정기적으로 M&A희망 기업정보 제공</p></li>
+                                    <li><span>3</span><p>상대방을 못 찾아서 진행 못하는 경우 방지</p></li>
+                                    <li><span>4</span><p>2조직 간의 100% 내부 매칭으로 신속진행, 비밀유지 탁월</p></li>
+                                </ol>
+                            </div>
+                        </div>
+                        <div class="mna--differ--wrap">
+                            <div class="differ--top">
+                                <div class="differ--left">
+                                    <span>@세부마와 <b>당사자</b>의 차이점</span>
+                                    <h3>M&A 당사자</h3>
+                                    <p>M&A자문(전문)조직이 아니고, M&A를 직접 희망하는 기업체 대표님(소속 임직원 포함)은 세부마 메뉴 중 M&A 당사자 등록 메뉴를 이용하시기 바랍니다.</p>
+                                    <a href="#">당사자 M&A 신청<i class="ico"></i></a>
+                                </div>
+                                <div class="differ--right">
+                                    <span>@세부마와 <b>파트너</b>의 차이점</span>
+                                    <h3>M&A 파트너</h3>
+                                    <p>M&A를 직접 희망하는 당사자가 아니며, 다른 기업 M&A딜 정보 보유자로서 M&A전문/자문조직이 아닌 분 (예. 컨설턴트, 기업협회 사무국, 회계사, 변호사, 기업체 임직원 등)은 거래소의 파트너 신청 메뉴에 파트너로 등록하세요.</p>
+                                    <p class="type2">* 파트너는 본인의 고유 업무를 수행하면서, 보유하고 있는 M&A 딜 정보를 한국 M&A거래소에 제공하고 M&A 성공시 수수료를 쉐어하는 제도입니다.</p>
+                                    <a href="#">파트너 M&A 신청<i class="ico"></i></a>
+                                </div>
+                            </div>
+                            <div class="differ--bot">
+                                <div class="logo--wrap">
+                                    <img src="./assets/img/logo--kmx.svg" alt="한국M&A거래소">
+                                </div>
+                                <h3>M&A 종합 정보 열람</h3>
+                                <a href="#">열람하러 가기<i class="ico"></i></a>
+                            </div>
+                        </div>
+                        <div class="mna--process--wrap">
+                            <div class="title--wrap">
+                                <h2 class="title">세부마 <b>흐름도</b></h2>
+                                <p class="desc">세부마 흐름도</p>
+                            </div>
+                            <div class="process--wrap">
+                                <img src="./assets/img/img--process.png" alt="세부마 흐름도">
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </article>
+            <article>
+                <section class="faq--section">
+                    <div class="section--container">
+                        <div class="title--wrap">
+                            <h2 class="title">세부마 / M&A 매칭 <b>Q&A</b></h2><p class="desc">세부마 Q&A</p>
+                        </div>
+                        <div class="mna--qna--wrap">
+                            <div class="qna--wrap">
+                                <div class="question--wrap">
+                                    <i class="ico">Q</i>
+                                    <p>세부마 신청자격은 어떻게 되나요?</p>
+                                    <i class="arrow"></i>
+                                </div>
+                                <div class="answer--wrap">
+                                    <i class="ico">A</i>
+                                    <div class="inner--box">
+                                        <p>세부마는 M&A 자문조직, 중개조직, 전문 조직의 보유 딜정보에 대해 매도 기업과 매수 기업을 매칭하는 조직입니다.<br />M&A를 자문/전문으로 하면서 M&A 실적이 있어야 합니다.</p>
+                                        <ul>
+                                            <li>보내준 매도 티저 또는 매수 티저를 세부마에서 매칭 → 매도, 매수를 세부마와 M&A 자문 조직이 각자 진행</li>
+                                            <li>만일 M&A를 할 수 있더라도, M&A 전문 사업부 또는 팀이 없고, M&A 실적이 없다면 한국 M&A 거래소의 파트너 제도 활용.<br>보유하고 있는 M&A 딜정보를 한국 M&A 거래소의 웹사이트 “파트너 등록 메뉴”에 등록 → 마트너 승인 → 보유 딜 정보 등록.<br>→ 거래소에서 M&A 성공 및 수수료 쉐어</li>
+                                            <li>M&A를 희망하는 당사자는 세부마의 “M&A 당사자 등록” 메뉴에 직접 등록<br>* M&A 당사자라 함은 매도를 희망하는 매도 기업 대표 또는 소속 임직원, 매수를 희망하는 매수 기업 대표 또는 소속 임직원 의미</li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="qna--wrap">
+                                <div class="question--wrap">
+                                    <i class="ico">Q</i>
+                                    <p>매칭 fee 5%, 10%는 어떻게 구분하나요?</p>
+                                    <i class="arrow"></i>
+                                </div>
+                                <div class="answer--wrap">
+                                    <i class="ico">A</i>
+                                    <div class="inner--box">
+                                        <p>세부마는 M&A 자문조직, 중개조직, 전문 조직의 보유 딜정보에 대해 매도 기업과 매수 기업을 매칭하는 조직입니다.<br />M&A를 자문/전문으로 하면서 M&A 실적이 있어야 합니다.</p>
+                                        <ul>
+                                            <li>보내준 매도 티저 또는 매수 티저를 세부마에서 매칭 → 매도, 매수를 세부마와 M&A 자문 조직이 각자 진행</li>
+                                            <li>만일 M&A를 할 수 있더라도, M&A 전문 사업부 또는 팀이 없고, M&A 실적이 없다면 한국 M&A 거래소의 파트너 제도 활용.<br>보유하고 있는 M&A 딜정보를 한국 M&A 거래소의 웹사이트 “파트너 등록 메뉴”에 등록 → 마트너 승인 → 보유 딜 정보 등록.<br>→ 거래소에서 M&A 성공 및 수수료 쉐어</li>
+                                            <li>M&A를 희망하는 당사자는 세부마의 “M&A 당사자 등록” 메뉴에 직접 등록<br>* M&A 당사자라 함은 매도를 희망하는 매도 기업 대표 또는 소속 임직원, 매수를 희망하는 매수 기업 대표 또는 소속 임직원 의미</li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="qna--wrap">
+                                <div class="question--wrap">
+                                    <i class="ico">Q</i>
+                                    <p>어떤 경우에 각자 진행을 하고, 합작 진행을 할 수 있나요?</p>
+                                    <i class="arrow"></i>
+                                </div>
+                                <div class="answer--wrap">
+                                    <i class="ico">A</i>
+                                    <div class="inner--box">
+                                        <p>세부마는 M&A 자문조직, 중개조직, 전문 조직의 보유 딜정보에 대해 매도 기업과 매수 기업을 매칭하는 조직입니다.<br />M&A를 자문/전문으로 하면서 M&A 실적이 있어야 합니다.</p>
+                                        <ul>
+                                            <li>보내준 매도 티저 또는 매수 티저를 세부마에서 매칭 → 매도, 매수를 세부마와 M&A 자문 조직이 각자 진행</li>
+                                            <li>만일 M&A를 할 수 있더라도, M&A 전문 사업부 또는 팀이 없고, M&A 실적이 없다면 한국 M&A 거래소의 파트너 제도 활용.<br>보유하고 있는 M&A 딜정보를 한국 M&A 거래소의 웹사이트 “파트너 등록 메뉴”에 등록 → 마트너 승인 → 보유 딜 정보 등록.<br>→ 거래소에서 M&A 성공 및 수수료 쉐어</li>
+                                            <li>M&A를 희망하는 당사자는 세부마의 “M&A 당사자 등록” 메뉴에 직접 등록<br>* M&A 당사자라 함은 매도를 희망하는 매도 기업 대표 또는 소속 임직원, 매수를 희망하는 매수 기업 대표 또는 소속 임직원 의미</li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="qna--wrap">
+                                <div class="question--wrap">
+                                    <i class="ico">Q</i>
+                                    <p>파트너제도와 세부마제도의 차이점은?</p>
+                                    <i class="arrow"></i>
+                                </div>
+                                <div class="answer--wrap">
+                                    <i class="ico">A</i>
+                                    <div class="inner--box">
+                                        <p>세부마는 M&A 자문조직, 중개조직, 전문 조직의 보유 딜정보에 대해 매도 기업과 매수 기업을 매칭하는 조직입니다.<br />M&A를 자문/전문으로 하면서 M&A 실적이 있어야 합니다.</p>
+                                        <ul>
+                                            <li>보내준 매도 티저 또는 매수 티저를 세부마에서 매칭 → 매도, 매수를 세부마와 M&A 자문 조직이 각자 진행</li>
+                                            <li>만일 M&A를 할 수 있더라도, M&A 전문 사업부 또는 팀이 없고, M&A 실적이 없다면 한국 M&A 거래소의 파트너 제도 활용.<br>보유하고 있는 M&A 딜정보를 한국 M&A 거래소의 웹사이트 “파트너 등록 메뉴”에 등록 → 마트너 승인 → 보유 딜 정보 등록.<br>→ 거래소에서 M&A 성공 및 수수료 쉐어</li>
+                                            <li>M&A를 희망하는 당사자는 세부마의 “M&A 당사자 등록” 메뉴에 직접 등록<br>* M&A 당사자라 함은 매도를 희망하는 매도 기업 대표 또는 소속 임직원, 매수를 희망하는 매수 기업 대표 또는 소속 임직원 의미</li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="qna--wrap">
+                                <div class="question--wrap">
+                                    <i class="ico">Q</i>
+                                    <p>딜 정보를 보유하고 있는데 M&A 자문/전문 조직이 아닌데 어떻게 하면 될까요?</p>
+                                    <i class="arrow"></i>
+                                </div>
+                                <div class="answer--wrap">
+                                    <i class="ico">A</i>
+                                    <div class="inner--box">
+                                        <p>세부마는 M&A 자문조직, 중개조직, 전문 조직의 보유 딜정보에 대해 매도 기업과 매수 기업을 매칭하는 조직입니다.<br />M&A를 자문/전문으로 하면서 M&A 실적이 있어야 합니다.</p>
+                                        <ul>
+                                            <li>보내준 매도 티저 또는 매수 티저를 세부마에서 매칭 → 매도, 매수를 세부마와 M&A 자문 조직이 각자 진행</li>
+                                            <li>만일 M&A를 할 수 있더라도, M&A 전문 사업부 또는 팀이 없고, M&A 실적이 없다면 한국 M&A 거래소의 파트너 제도 활용.<br>보유하고 있는 M&A 딜정보를 한국 M&A 거래소의 웹사이트 “파트너 등록 메뉴”에 등록 → 마트너 승인 → 보유 딜 정보 등록.<br>→ 거래소에서 M&A 성공 및 수수료 쉐어</li>
+                                            <li>M&A를 희망하는 당사자는 세부마의 “M&A 당사자 등록” 메뉴에 직접 등록<br>* M&A 당사자라 함은 매도를 희망하는 매도 기업 대표 또는 소속 임직원, 매수를 희망하는 매수 기업 대표 또는 소속 임직원 의미</li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="qna--wrap">
+                                <div class="question--wrap">
+                                    <i class="ico">Q</i>
+                                    <p>딜 정보를 보유하고 있는데 M&A자문 / 전문조직인데 M&A 실적이 거의 없고, 진행 경험이 별로 없는데 어떻게 하면 될까요?</p>
+                                    <i class="arrow"></i>
+                                </div>
+                                <div class="answer--wrap">
+                                    <i class="ico">A</i>
+                                    <div class="inner--box">
+                                        <p>세부마는 M&A 자문조직, 중개조직, 전문 조직의 보유 딜정보에 대해 매도 기업과 매수 기업을 매칭하는 조직입니다.<br />M&A를 자문/전문으로 하면서 M&A 실적이 있어야 합니다.</p>
+                                        <ul>
+                                            <li>보내준 매도 티저 또는 매수 티저를 세부마에서 매칭 → 매도, 매수를 세부마와 M&A 자문 조직이 각자 진행</li>
+                                            <li>만일 M&A를 할 수 있더라도, M&A 전문 사업부 또는 팀이 없고, M&A 실적이 없다면 한국 M&A 거래소의 파트너 제도 활용.<br>보유하고 있는 M&A 딜정보를 한국 M&A 거래소의 웹사이트 “파트너 등록 메뉴”에 등록 → 마트너 승인 → 보유 딜 정보 등록.<br>→ 거래소에서 M&A 성공 및 수수료 쉐어</li>
+                                            <li>M&A를 희망하는 당사자는 세부마의 “M&A 당사자 등록” 메뉴에 직접 등록<br>* M&A 당사자라 함은 매도를 희망하는 매도 기업 대표 또는 소속 임직원, 매수를 희망하는 매수 기업 대표 또는 소속 임직원 의미</li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                            <div class="qna--wrap">
+                                <div class="question--wrap">
+                                    <i class="ico">Q</i>
+                                    <p>딜 정보를 보유하고 있고 M&A자문 / 조직이며, M&A 실적도 좀 있고, 진행 경험도 어느 정도 있습니다. 세부마 이용 할 수 있나요?</p>
+                                    <i class="arrow"></i>
+                                </div>
+                                <div class="answer--wrap">
+                                    <i class="ico">A</i>
+                                    <div class="inner--box">
+                                        <p>세부마는 M&A 자문조직, 중개조직, 전문 조직의 보유 딜정보에 대해 매도 기업과 매수 기업을 매칭하는 조직입니다.<br />M&A를 자문/전문으로 하면서 M&A 실적이 있어야 합니다.</p>
+                                        <ul>
+                                            <li>보내준 매도 티저 또는 매수 티저를 세부마에서 매칭 → 매도, 매수를 세부마와 M&A 자문 조직이 각자 진행</li>
+                                            <li>만일 M&A를 할 수 있더라도, M&A 전문 사업부 또는 팀이 없고, M&A 실적이 없다면 한국 M&A 거래소의 파트너 제도 활용.<br>보유하고 있는 M&A 딜정보를 한국 M&A 거래소의 웹사이트 “파트너 등록 메뉴”에 등록 → 마트너 승인 → 보유 딜 정보 등록.<br>→ 거래소에서 M&A 성공 및 수수료 쉐어</li>
+                                            <li>M&A를 희망하는 당사자는 세부마의 “M&A 당사자 등록” 메뉴에 직접 등록<br>* M&A 당사자라 함은 매도를 희망하는 매도 기업 대표 또는 소속 임직원, 매수를 희망하는 매수 기업 대표 또는 소속 임직원 의미</li>
+                                        </ul>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+            </article>
+        </main>
+        <footer>
+            <div class="footer--wrap">
+                <div class="footer--top">
+                    <div class="footer--container">
+                        <div class="footer--link">
+                            <a href="#">회사 소개</a>
+                            <a href="#">개인정보취급방침</a>
+                            <a href="#">이용약관</a>
+                            <a href="#">CONTACT US</a>
+                        </div>
+                    </div>
+                </div>
+                <div class="footer--bot">
+                    <div class="footer--container">
+                        <div class="footer--inner--top">
+                            <p>서울시 영등포구 여의대로 66 IM 증권 빌딩 16층</p>
+                            <p>16 Foor, 66, Yeoui-daero, Yeongdeungpo-gu, Seoul, Republic of Korea</p>
+                            <div class="contact--list">
+                                <p>Tel. 82-2-783-7500</p>
+                                <span class="bar"></span>
+                                <p>Fax. 82-2-780-1762</p>
+                                <span class="bar"></span>
+                                <p>E-mail. admin@kmx.kr</p>
+                            </div>
+                            <p>Copyright 2014 Korea M&A Exchang co., LTD. All RIGHTS RESREVED.</p>
+                        </div>
+                        <div class="footer--inner--bot">
+                            한국 M&A 거래소의 사전 서면동의 없이 한국 M&A 거래소 사이트의 일체의 정보, 콘텐츠 및 UI 등과 <br>한국 M&A거래소에 등록된 기업의 정보들을 상업적 목적으로 전재, 전송, 스크래핑 등 무단으로 사용할 수 없으며 적발시 법적인 조치를 취할 수 있습니다.
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </footer>
+    </body>
+</html>