@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%; 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: 170px !important; } main.actv { padding-top: 90px !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; /*! 2025-11-11 추가 : S */ font-size: inherit; } main .main--visual--section .main--visual--wrap .main--visual--img .main--visual--txt h3.type2 { font-size: 30px; } main .main--visual--section .main--visual--wrap .main--visual--img .main--visual--txt h3.type2 b { font-size: 50px; /*! 2025-11-11 추가 : E */ } 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 .matching--section { background-image: url(../img/bg--matching.png); background-size: cover; background-attachment: fixed; background-repeat: no-repeat; } main .matching--section .section--container { padding-top: 100px; padding-bottom: 100px; } main .matching--section .section--container .title--wrap .title { font-size: 40px; } 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--matching--wrap { display: flex; justify-content: space-between; align-items: center; margin-bottom: 100px; } main .section--container .mna--matching--wrap .txt--wrap { width: 367px; } main .section--container .mna--matching--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--matching--wrap .txt--wrap > h3 b { font-weight: 600; } main .section--container .mna--matching--wrap .txt--wrap > h3 b.color--blue { color: #008cff; } main .section--container .mna--matching--wrap .txt--wrap > p { color: #444; font-size: 18px; letter-spacing: -0.36px; line-height: 1.7; font-weight: 400; } main .section--container .mna--matching--wrap .seq--wrap { display: flex; flex-direction: column; gap: 30px; } main .section--container .mna--matching--wrap .seq--wrap .seq--box { padding: 35px 40px; display: flex; gap: 40px; } main .section--container .mna--matching--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--matching--wrap .seq--wrap .seq--box p { color: #fff; font-size: 18px; line-height: 1.4; font-weight: 500; } main .section--container .mna--matching--wrap .seq--wrap .seq--box:nth-child(1) { margin-right: 140px; border-radius: 40px 40px 10px 40px; background-color: #1a98ff; } main .section--container .mna--matching--wrap .seq--wrap .seq--box:nth-child(2) { border-radius: 40px 40px 40px 10px; background-color: #8486FB; margin-left: auto; } main .section--container .mna--matching--wrap .seq--wrap .seq--box:nth-child(2) .numb { color: #8486FB; } main .section--container .mna--matching--wrap .seq--wrap .seq--box:nth-child(3) { background-color: #7EC5FF; border-radius: 40px 40px 10px 40px; margin-right: auto; } main .section--container .mna--matching--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; } main .section--container .mna--teaser--wrap { margin-top: 60px; display: flex; gap: 40px; } main .section--container .mna--teaser--wrap .teaser--box { width: 50%; display: flex; flex-direction: column; padding: 65px 60px; line-height: 1.4; border-radius: 30px; background-color: #fff; background-image: url(../img/img--matching1.svg); background-repeat: no-repeat; background-position: right top; } main .section--container .mna--teaser--wrap .teaser--box > h3 { font-size: 35px; color: #333; letter-spacing: -0.7px; font-weight: 400; } main .section--container .mna--teaser--wrap .teaser--box > h3 > b { color: #7330FF; font-weight: 700; } main .section--container .mna--teaser--wrap .teaser--box > h4 { margin-top: 50px; color: #333; font-size: 25px; font-weight: 500; margin-bottom: 30px; letter-spacing: -0.5px; } main .section--container .mna--teaser--wrap .teaser--box > h4 > b { font-weight: 700; color: #222; } main .section--container .mna--teaser--wrap .teaser--box .circle { width: fit-content; line-height: 1; margin-top: 35px; padding: 15px 25px; border-radius: 100px; color: #7330ff; font-size: 16px; font-weight: 400; border: 1px dashed rgba(115, 48, 255, 0.5); } main .section--container .mna--teaser--wrap .teaser--box .circle b { color: #7330ff; font-weight: 800; } main .section--container .mna--teaser--wrap .teaser--box > ul { display: flex; flex-direction: column; gap: 10px; } main .section--container .mna--teaser--wrap .teaser--box > ul > li { padding-left: 25px; position: relative; font-size: 18px; font-weight: 500; letter-spacing: -0.36px; } main .section--container .mna--teaser--wrap .teaser--box > ul > li::before { content: "ㆍ"; top: 0; left: 5px; position: absolute; } main .section--container .mna--teaser--wrap .teaser--box > ul > li > b { font-weight: 700; } main .section--container .mna--teaser--wrap .teaser--box > ul > li > span { font-size: 17px; font-weight: 500; } main .section--container .mna--teaser--wrap .teaser--box .desc { margin-top: 40px; font-weight: 400; letter-spacing: -0.34px; color: #555; font-size: 17px; } main .section--container .mna--teaser--wrap .teaser--box > a { margin-top: 60px; padding: 20px 40px; width: fit-content; font-size: 18px; font-weight: 600; letter-spacing: -0.36px; background-color: #7330ff; border-radius: 100px; color: #fff; } main .section--container .mna--teaser--wrap .teaser--box > a > b { color: #fff; font-size: 14px; font-weight: 700; letter-spacing: -0.28px; } main .section--container .mna--teaser--wrap .teaser--box > a > span { letter-spacing: -0.28px; color: #fff; font-size: 14px; font-weight: 400; } main .section--container .mna--teaser--wrap .teaser--box > a .ico { width: 14px; margin-left: 10px; height: 14px; background-image: url(../img/ico--btn--arrow2.svg); } main .section--container .mna--teaser--wrap .teaser--box.blue--type { background-image: url(../img/img--matching2.svg); } main .section--container .mna--teaser--wrap .teaser--box.blue--type > h3 > b { color: #008cff; } main .section--container .mna--teaser--wrap .teaser--box.blue--type .circle { border: 1px dashed rgba(0, 140, 255, 0.5); color: #008cff; } main .section--container .mna--teaser--wrap .teaser--box.blue--type .circle > b { color: #008cff; } main .section--container .mna--teaser--wrap .teaser--box.blue--type > a { margin-top: auto; background-color: #008CFF; } 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; }