sebuma/assets/scss/style.scss

@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;
}

// 믹스인
@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: 170px!important;
  &.actv{
    padding-top: 90px!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;
		}
	}
	.matching--section{
		background-image: url(../img/bg--matching.png);
		background-size: cover;
		background-attachment: fixed;
		background-repeat: no-repeat;
		.section--container{
			padding-top: 100px;
			padding-bottom: 100px;
			.title--wrap{
				.title{
					font-size: 40px;
				}
			}
		}
	}
	.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--matching--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;
								}
							}
						}
					}
				}
			}
		}
		.mna--teaser--wrap{
			margin-top: 60px;
			display: flex;
			gap: 40px;
			.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;
				>h3{
					font-size: 35px;
					color: #333;
					letter-spacing: -0.7px;
					font-weight: 400;
					>b{
						color: #7330FF;
						font-weight: 700;
					}
				}
				>h4{
					margin-top: 50px;
					color: #333;
					font-size: 25px;
					font-weight: 500;
					margin-bottom: 30px;
					letter-spacing: -0.5px;
					>b{
						font-weight: 700;
						color: #222;
					}
				}
				.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.50);
					b{
						color: #7330ff;
						font-weight: 800;
					}
				}
				>ul{
					display: flex;
					flex-direction: column;
					gap: 10px;
					>li{
						padding-left: 25px;
						position: relative;
						font-size: 18px;
						font-weight: 500;
						letter-spacing: -0.36px;
						&::before{
							content: 'ㆍ';
							top: 0;
							left: 5px;
							position: absolute;
						}
						>b{
							font-weight: 700;
						}
						>span{
							font-size: 17px;
							font-weight: 500;
						}
					}
				}
				.desc{
					margin-top: 40px;
					font-weight: 400;
					letter-spacing: -0.34px;
					color: #555;
					font-size: 17px;
				}
				>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;
					>b{
						color: #fff;
						font-size: 14px;
						font-weight: 700;
						letter-spacing: -0.28px;
					}
					>span{
						letter-spacing: -0.28px;
						color: #fff;
						font-size: 14px;
						font-weight: 400;
					}
					.ico{
						width: 14px;
						margin-left: 10px;
						height: 14px;
						background-image: url(../img/ico--btn--arrow2.svg);
					}
				}
				&.blue--type{
					background-image: url(../img/img--matching2.svg);
					>h3{
						>b{
							color: #008cff;
						}
					}
					.circle{
						border: 1px dashed rgba(0, 140, 255, 0.50);
						color: #008cff;
						>b{
							color: #008cff;
						}
					}
					>a{
						margin-top: auto;
						background-color: #008CFF;
					}
				}
			}
		}
	}
}

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;
			}
		}
	}
}