|
|
@@ -21,7 +21,6 @@ time, mark, audio, video {
|
|
|
padding: 0;
|
|
|
border: 0;
|
|
|
font-size: 100%;
|
|
|
- font: inherit;
|
|
|
vertical-align: baseline;
|
|
|
}
|
|
|
|
|
|
@@ -355,10 +354,10 @@ header .header--ham--wrap .header--ham--menu .ham--r ul li a.actv {
|
|
|
}
|
|
|
|
|
|
main {
|
|
|
- padding-top: 180px !important;
|
|
|
+ padding-top: 170px !important;
|
|
|
}
|
|
|
main.actv {
|
|
|
- padding-top: 100px !important;
|
|
|
+ padding-top: 90px !important;
|
|
|
}
|
|
|
main .main--visual--section {
|
|
|
overflow: hidden;
|
|
|
@@ -558,6 +557,19 @@ 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;
|
|
|
}
|
|
|
@@ -688,16 +700,16 @@ main .section--container .mna--impor--wrap .desc--wrap p {
|
|
|
main .section--container .mna--impor--wrap .desc--wrap p b {
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
-main .section--container .mna--maching--wrap {
|
|
|
+main .section--container .mna--matching--wrap {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
align-items: center;
|
|
|
margin-bottom: 100px;
|
|
|
}
|
|
|
-main .section--container .mna--maching--wrap .txt--wrap {
|
|
|
+main .section--container .mna--matching--wrap .txt--wrap {
|
|
|
width: 367px;
|
|
|
}
|
|
|
-main .section--container .mna--maching--wrap .txt--wrap > h3 {
|
|
|
+main .section--container .mna--matching--wrap .txt--wrap > h3 {
|
|
|
color: #222;
|
|
|
font-size: 40px;
|
|
|
letter-spacing: -0.8px;
|
|
|
@@ -705,30 +717,30 @@ main .section--container .mna--maching--wrap .txt--wrap > h3 {
|
|
|
line-height: 1.4;
|
|
|
margin-bottom: 80px;
|
|
|
}
|
|
|
-main .section--container .mna--maching--wrap .txt--wrap > h3 b {
|
|
|
+main .section--container .mna--matching--wrap .txt--wrap > h3 b {
|
|
|
font-weight: 600;
|
|
|
}
|
|
|
-main .section--container .mna--maching--wrap .txt--wrap > h3 b.color--blue {
|
|
|
+main .section--container .mna--matching--wrap .txt--wrap > h3 b.color--blue {
|
|
|
color: #008cff;
|
|
|
}
|
|
|
-main .section--container .mna--maching--wrap .txt--wrap > p {
|
|
|
+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--maching--wrap .seq--wrap {
|
|
|
+main .section--container .mna--matching--wrap .seq--wrap {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
gap: 30px;
|
|
|
}
|
|
|
-main .section--container .mna--maching--wrap .seq--wrap .seq--box {
|
|
|
+main .section--container .mna--matching--wrap .seq--wrap .seq--box {
|
|
|
padding: 35px 40px;
|
|
|
display: flex;
|
|
|
gap: 40px;
|
|
|
}
|
|
|
-main .section--container .mna--maching--wrap .seq--wrap .seq--box .numb {
|
|
|
+main .section--container .mna--matching--wrap .seq--wrap .seq--box .numb {
|
|
|
color: #008cff;
|
|
|
font-size: 15px;
|
|
|
font-weight: 800;
|
|
|
@@ -741,31 +753,31 @@ main .section--container .mna--maching--wrap .seq--wrap .seq--box .numb {
|
|
|
border-radius: 50%;
|
|
|
margin-bottom: 20px;
|
|
|
}
|
|
|
-main .section--container .mna--maching--wrap .seq--wrap .seq--box p {
|
|
|
+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--maching--wrap .seq--wrap .seq--box:nth-child(1) {
|
|
|
+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--maching--wrap .seq--wrap .seq--box:nth-child(2) {
|
|
|
+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--maching--wrap .seq--wrap .seq--box:nth-child(2) .numb {
|
|
|
+main .section--container .mna--matching--wrap .seq--wrap .seq--box:nth-child(2) .numb {
|
|
|
color: #8486FB;
|
|
|
}
|
|
|
-main .section--container .mna--maching--wrap .seq--wrap .seq--box:nth-child(3) {
|
|
|
+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--maching--wrap .seq--wrap .seq--box:nth-child(3) .numb {
|
|
|
+main .section--container .mna--matching--wrap .seq--wrap .seq--box:nth-child(3) .numb {
|
|
|
color: #7EC5FF;
|
|
|
}
|
|
|
main .section--container .mna--free--wrap {
|
|
|
@@ -1398,6 +1410,138 @@ main .section--container .mna--qna--wrap .qna--wrap .answer--wrap .inner--box >
|
|
|
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;
|