@charset "UTF-8"; @import 'reset'; @import 'mixin'; section{ overflow-x: hidden; } br{ &.mo{ display: none; } } header{ position: fixed; width: 100%; top: 0; left: 0; z-index: 1000; background: #fff; .header--line--banner--wrap{ background-image: url(../img/top_line_bg.svg); background-size: cover; background-repeat: no-repeat; background-position: center; background-color: #2ECC71; width:100%; padding:0px; @include flex-center; overflow: hidden; transition: all linear .2s; height:100px; &.actv{ padding:0px 0px; height:0px; &+.header--contents--wrap{ .header--dim{ top: 170px; } } } .inner--contents{ width:100%; max-width: 1200px; display: flex; padding: 0 20px; flex-direction: column; align-items: center; justify-content: center; text-align: center; position: relative; .close--btn{ width: 44px; height: 44px; background-color: transparent; background-size: 20px 20px; background-repeat: no-repeat; background-position: center; background-image: url(../img/ico--close.svg); border: 1px solid #fff; border-radius: 50%; position: absolute; top: calc(50% - 22px); right:20px; } h3{ color: #FFF; text-align: center; font-size: 20px; font-style: normal; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.4px; } p{ color: #FFF; font-size: 15px; letter-spacing: -0.3px; font-weight: 500; } } } .header--contents--wrap{ width:100%; @include flex-center; min-height:80px; .hnb--wrap{ @include flex-center; gap:10px; button{ padding:0px; border:0px; background: none; width:30px; height:30px; @include flex-center; &.hmb--btn{ display: none; } } } .header--contents{ width:100%; display: flex; flex-direction: column; .header--logo--wrap{ border-bottom: 1px solid #d9d9d9; .logo--wrap{ height: 100px; align-items: center; margin: 0 auto; width: 100%; max-width:1200px; display: flex; justify-content: space-between; padding: 20px 0; .logo{ max-width: 210px; display: flex; align-items: center; width: 25%; height: 58px; a{ display: inline-block; img{ width: 100%; } } } .txt{ width: calc(70% - 20px); display: flex; flex-direction: column; gap: 15px; justify-content: center; p{ color: #000; font-size: 15px; font-weight: 300; letter-spacing: -0.15px; line-height: 1; span{ color: #1aaf59; font-weight: 600; } &:last-child{ font-size: 18px; span{ font-weight: 700; } } } } .ham--btn{ display: none; width: 30px; min-width: 30px; height: 30px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 22 22' fill='none'%3E%3Cline y1='11' x2='22' y2='11' stroke='black' stroke-width='2'%3E%3C/line%3E%3Cline y1='18' x2='22' y2='18' stroke='black' stroke-width='2'%3E%3C/line%3E%3Cline y1='4' x2='22' y2='4' stroke='black' stroke-width='2'%3E%3C/line%3E%3C/svg%3E"); background-repeat: no-repeat; background-size: 22px 22px; background-position: center; cursor: pointer; } } } &.actv{ .header--gnb--wrap{ .sub--wrap{ max-height: 500px; } } } .header--gnb--wrap{ .gnb--wrap{ width: 100%; max-width: 1200px; margin: 0 auto; >ul{ width: 100%; @include flex-center; li{ width: 20%; position: relative; text-align: center; a{ width: 100%; color: #000; font-size: 17px; height: 70px; display: inline-block; line-height: 70px; font-style: normal; font-weight: 600; letter-spacing: -0.34px; } ul{ /*!2025-07-23 추가 */ pointer-events: none; position: absolute; top:-500px; left:50%; opacity: 0; transform: translateX(-50%) translateY(-20px); transition: transform linear .2s, opacity linear .4s; background: transparent; padding:10px; z-index: 1000; li{ padding:5px; a{ color: #191919; font-size: 17px; font-style: normal; font-weight: 500; letter-spacing: -0.34px; white-space: nowrap; strong{ color: #5D1BB8; font-size: 17px; font-style: normal; font-weight: 700; letter-spacing: -0.34px; } } } } } } } .sub--wrap{ max-height: 0; transition: max-height 0.3s; overflow: hidden; >ul{ max-width: 1200px; 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: 270px!important; &.actv{ padding-top: 170px!important; } .main--visual--section{ overflow: hidden; position: relative; .main--visual--wrap{ width:100%; .main--visual--img{ width:100%; overflow: hidden; height:500px; position: relative; img{ position: absolute; left:50%; transform: translateX(-50%); } .main--visual--txt{ position: absolute; width: 100%; left: 50%; transform: translateX(-50%); height: 100%; padding: 0 20px; display: flex; align-items: center; justify-content: center; flex-direction: column; max-width: 1200px; gap: 40px; text-align: center; .sub--title{ display: none; } h3{ color: #191919; font-size: 50px; font-weight: 700; } p{ font-size: 18px; color: #191919; font-weight: 400; 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: 90px; padding: 20px 35px; border-radius: 1000px; background: rgba(255, 255, 255, 0.60); backdrop-filter: blur(2px); .prev--next--wrap{ padding-top: 20px; @include flex-center; display: flex; gap: 15px; align-items: center; justify-content: center; button{ @include flex-center; width: 18px; height: 18px; border: none; background-color: transparent; background-image: url(../img/ico--swiper--left.svg); background-repeat: no-repeat; background-position: center; &.next--btn{ background-image: url(../img/ico--swiper--right.svg); } } } .play--pause{ @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; .swiper-pagination-bullet{ width: 34px; height: 34px; border-radius: 50%; border: none; opacity: 1; background-color: transparent; cursor: pointer; position: relative; &::after{ position: absolute; content: ''; width: 4px; height: 4px; background-color: #000; border-radius: 50%; left: calc(50% - 2px); top: calc(50% - 2px); display: inline-block; } &.swiper-pagination-bullet-active{ border: 1px solid rgba(0, 0, 0, 0.50); } } } .main--visual--progress{ display: flex; justify-content: center; flex-direction: column; margin-right: 20px; .main--visual--progress--bar{ display: flex; align-items: center; } .progress-title{ padding-left: 30px; width: 230px; color: #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 500; line-height: 1; margin-bottom: 4px; } .progress-bar{ width: 200px; height: 2px; background-color: rgba(0, 0, 0, 0.2)!important; border-radius: 100px; position: relative; overflow: hidden; } .progress-text{ color: #000; font-size: 15px; font-weight: 500; width: 30px; } } } } .mna--reason--wrap{ overflow-x: hidden; .btn--wrap{ display: flex; justify-content: center; padding: 40px 0; gap: 10px; button{ border: 1px solid #dadada; background-color: #fff; width: 50px; height: 50px; border-radius: 50%; background-repeat: no-repeat; background-position: center; &.play--btn{ background-image: url(../img/ico--swiper--pause.svg); &.pause{ background-image: url(../img/ico--swiper--play.svg); } } &.prev--btn{ background-image: url(../img/ico--swiper--left2.svg); } &.next--btn{ background-image: url(../img/ico--swiper--right2.svg); } } } .swiper-slide{ transform: translateX(50%); height: auto; .reason--box{ border-radius: 30px; border: 1px solid #EEE; background: #FFF; box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.08); height: 100%; display: flex; padding: 40px 45px 70px; flex-direction: column; >span{ color: #1aaf59; font-size: 18px; font-weight: 700; line-height: 1; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; margin-bottom: 45px; } dt{ color: #000; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; margin-bottom: 35px; } dd{ color: #333; font-size: 15px; font-weight: 300; letter-spacing: -0.15px; } } } } .mna--prof--wrap{ display: flex; justify-content: center; align-items: center; flex-direction: column; .nav--wrapper{ display: flex; align-items: center; justify-content: center; gap:10px; padding-bottom:50px; padding-top:40px; button{ display: flex; width: 50px; height: 50px; border-radius: 50px; border-radius: 100px; border: 1px solid #DADADA; background: #fff; justify-content: center; align-items: center; &.play--btn{ display: none; } } } .prof--man--swiper{ width:100%; .swiper-slide{ max-width:494px; .prof--card{ display: flex; width:100%; padding:30px 40px; border-radius: 30px; border: 1px solid #E2E2E2; background: #FFF; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05); align-items: center; justify-content: flex-start; gap:30px; .thumb{ min-width: 150px; overflow: hidden; width:150px; height:150px; border-radius: 150px; } .desc--wrap{ >h2{ color: #191919; font-size: 20px; font-style: normal; font-weight: 800; line-height: 100%; /* 20px */ span{ color: #1AAF59; font-size: 15px; font-style: normal; font-weight: 600; line-height: 100%; /* 15px */ margin-left:12px; } } .key--word{ display: flex; padding-top:30px; flex-wrap: wrap; gap:5px; span{ color: #1AAF59; text-align: center; font-size: 13px; font-style: normal; font-weight: 500; line-height: 100%; /* 13px */ border-radius: 100px; border: 1px solid rgba(46, 204, 113, 0.50); padding:8px 10px; } } } } } } } .faq--wrapper{ width: 100%; display: flex; justify-content: center; .inner--contents{ width:100%; max-width:1200px; .section--title{ color: #191919; text-align: center; font-size: 35px; font-style: normal; font-weight: 800; line-height: 100%; /* 35px */ letter-spacing: -0.7px; } .faq--list--wrap{ width:100%; max-width:1200px; padding-top:70px; ul{ width: 100%; border-bottom:1px solid #E6E6E6; li{ width: 100%; text-align: left; border-top:1px solid #E6E6E6; position: relative; @for $i from 1 through 9 { &:nth-of-type(#{$i}) { .faq--item--title { &::before { content: 'Q#{$i}'; } } } } .faq--item--title{ padding:30px 20px; position: relative; cursor: pointer; transition: background-color 0.3s ease; &:after{ content:''; display: block; width:100%; height:1px; width:18px; height:18px; background: url(../img/chv_down.svg) no-repeat center center / contain; position: absolute; top:50%; right:20px; transform: translateY(-50%); } &.active{ &:after{ background: url(../img/chv_up.svg) no-repeat center center / contain; transform: translateY(-50%) rotate(0deg); } } > p{ padding-left:60px; color: #222; font-size: 18px; font-style: normal; font-weight: 400; line-height: 100%; /* 18px */ letter-spacing: -0.36px; } &::before{ content:''; display:inline-flex; align-items: center; justify-content: center; position: absolute; top:50%; left:20px; transform: translateY(-50%); width:40px; min-width:40px; height:40px; border-radius: 40px; border-radius: 100px; border: 1px solid #E6E6E6; background: #FFF; color: #2ECC71; text-align: center; font-size: 15px; font-style: normal; font-weight: 700; line-height: 100%; /* 15px */ letter-spacing: -0.3px; } } .faq--item--content{ position: relative; padding:30px 20px; border-top: 1px solid #E6E6E6; background: #F6F6F6; display: none; > p{ padding-left:60px; color: #333; font-size: 16px; font-style: normal; font-weight: 400; letter-spacing: -0.32px; } &::before{ content:'A'; position: absolute; top: 30px; left:20px; color: #FFF; text-align: center; font-size: 17px; font-style: normal; font-weight: 700; line-height: 100%; /* 17px */ letter-spacing: -0.34px; display: inline-flex; align-items: center; justify-content: center; width:40px; min-width:40px; height:40px; border-radius: 100px; background: linear-gradient(180deg, #65CC2E 0%, #2ECC71 52.4%, #2597D0 100%); } } } } } } } .gray--section{ background-color: #f9f9f9; } .green--section{ background-color: #2ECC71; } .light--green--section{ background-color: #e9f7ef; } .impt--section{ background: url(../img/dear_bg.png) no-repeat center center / cover; } .section--container{ max-width: 1200px; width: 100%; margin: 0 auto; &.p--120{ padding: 120px 0; } &.p--100{ padding: 100px 0; } .title--wrap{ >h2{ text-align: center; color: #000; font-size: 35px; font-weight: 300; strong{ font-weight: 700; } } >p{ text-align: center; } &.big{ >h2{ color: #000; font-size: 50px; font-weight: 300; letter-spacing: -0.5px; margin-bottom: 60px; line-height: 1.4; strong{ font-weight: 700; } } >p{ color: #000; font-weight: 300; line-height: 1.7; font-size: 18px; } } &.le{ >h2, >p{ text-align: left; } } } .now--box--wrap{ .box--top{ display: flex; margin-bottom: 90px; justify-content: space-between; .box{ gap: 40px; width: 33.333%; display: flex; flex-direction: column; align-items: center; text-align: center; >p{ color: #000; font-size: 18px; font-weight: 300; strong{ font-weight: 700; } } } } .box--bot{ display: flex; gap: 40px; .box{ width: 50%; border-radius: 20px; padding: 0 40px; display: flex; align-items: center; height: 120px; background-size: cover; background-repeat: no-repeat; background-position: right bottom; background-image: url(../img/bg--now1.svg); &:last-child{ background-image: url(../img/bg--now2.svg); } } } } .growth--logic--wrap{ display: flex; flex-wrap: wrap; gap: 40px; >div{ width: calc((100% - 120px) / 3); } .title--box{ width: calc((100% - 120px) / 3 + 40px); h2{ color: #fff; font-size: 45px; font-weight: 300; letter-spacing: -0.45px; strong{ font-weight: 800; color: #fff; } } .btn--wrap{ display: flex; flex-wrap: wrap; gap: 15px; a{ display: inline-block; padding: 20px 30px; color: #fff; border-radius: 1000px; border: 1px solid #fff; line-height: 1; } } } .logic--box{ border-radius: 25px; background-color: #fff; min-height: 350px; padding: 50px 45px 70px; dt{ color: #333; font-size: 22px; font-weight: 700; letter-spacing: -0.22px; margin-bottom: 30px; strong{ color :#1aaf59; font-weight: 700; } } dd{ color: #444; font-size: 15px; font-weight: 400; letter-spacing: -0.15px; line-height: 1.7; } &.special{ width: calc((100% - 120px) / 3 + 40px); background-color: #139e4e; background-image: url(../img/ico--logic.svg); background-repeat: no-repeat; background-position: right bottom; dt{ color :#fff; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font; } dd{ color: #fff; } } } } .best--service--wrap{ display: flex; gap: 40px; .service--box{ padding: 40px 45px 70px; border: 1px solid #e5e5e5; border-radius: 25px; position: relative; width: calc((100% - 80px) / 3); .service--img{ img{ width: 70%; max-width: 140px; } } &:nth-child(2){ .service--numb{ background-image: url(../img/numb--service2.svg); } } &:nth-child(3){ .service--numb{ background-image: url(../img/numb--service3.svg); } } .service--numb{ position: absolute; right: 0; display: inline-block; width: 25%; max-width: 100px; background-size: 100%; height: 100px; background-repeat: no-repeat; background-position: top right; top: 10px; background-image: url(../img/numb--service1.svg); } h3{ margin-top: 40px; margin-bottom: 30px; font-size: 22px; color: #191919; font-weight: 300; letter-spacing: -0.22px; line-height: 1.4; strong{ font-weight: 700; } } p{ color: #333; font-size: 16px; letter-spacing: -0.16px; line-height: 1.7; font-weight: 300; } } } .process--plan--wrap{ .title--wrap{ margin-bottom: 70px; span{ color: #1aaf59; font-size: 15px; text-transform: uppercase; display: inline-block; margin-bottom: 25px; } h2{ font-size: 30px; font-weight: 400; margin-bottom: 25px; } p{ font-size: 18px; font-weight: 300; } } .content--wrap{ h3{ .ico{ width: 20px; height: 20px; background-image: url(../img/ico--heart.svg); display: inline-block; background-repeat: no-repeat; background-position: center; margin-right: 15px; } color: #000; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; display: flex; align-items: center; margin-bottom: 40px; } .direct--wrap{ display: flex; justify-content: space-between; align-items: center; gap: 20px; .circle{ display: flex; min-width: 190px; justify-content: center; gap: 12px; padding: 20px 40px; background-color: #2ECC71; align-items: center; border-radius: 100px; p{ color: #fff; font-size: 16px; font-weight: 600; line-height: 1; letter-spacing: -0.17px; } .ico{ width: 25px; min-width: 25px; height: 25px; display: inline-block; background-position: center; background-repeat: no-repeat; background-size: 100%; background-image: url(../img/ico--direct1.svg); } &:nth-of-type(2){ background-color: #188345; .ico{ background-image: url(../img/ico--direct2.svg); } } &:nth-of-type(3){ .ico{ background-image: url(../img/ico--direct3.svg); } } &:nth-of-type(4){ background-color: #188345; .ico{ background-image: url(../img/ico--direct4.svg); } } } .bar{ width: 70px; height: 1px; border-bottom: 3px dashed #2ecc71; } } .process--wrap{ /*! 20250904 수정 : S */ .process--title{ width: 100%; display: flex; align-items: center; gap: 15px; .process--circle{ position: relative; padding: 25px 30px; text-align: center; width: fit-content; background-image: url(../img/bg--process.svg); background-repeat: no-repeat; background-size: cover; color: #222; font-size: 16px; margin: 12px auto; border-radius: 1000px; letter-spacing: -0.16px; font-weight: 600; &::after{ content: ''; width: calc(100% + 24px); height: calc(100% + 24px); border: 5px solid #DDEE81; position: absolute; display: inline-block; border-radius: inherit; top: -12px; left: -12px; } } .arrow{ flex: 1; margin-left: 53px; margin-right: 25px; height: 20px; background-color: #2ecc71; position: relative; .arrow--bar{ width: 100%; display: inline-block; background-position: right center; background-repeat: no-repeat; width: 100%; height: 20px; background-image: url(../img/ico--rainbow--arrow7.svg); } .arrow--tail{ display: inline-block; position: absolute; width: 20px; height: 110px; top: 0; left: 0; background-color: #2ECC71; background-repeat: no-repeat; &::before{ content: ''; position: absolute; bottom: -20px; left: -6.5px; width: 33px; height: 20px; background-image: url(../img/ico--arrow.svg); } } &.right{ margin-right: 53px; margin-left: 25px; .arrow--bar{ background-position: left center; background-image: url(../img/ico--rainbow--arrow8.svg); } .arrow--tail{ left: auto; right: 0; } } } } /*! 20250904 수정 : E */ .process--cont{ padding-top: 60px; .process--top{ display: flex; align-items: center; justify-content: space-between; .process--side--title{ /*! 20250911 수정 */ display: none; } .process--side{ width: 123px; display: flex; gap: 15px; flex-direction: column; justify-content: center; position: relative; &.mo{ /*! 20250911 수정 */ display: none; } &::after{ content: ''; display: inline-block; width: 70px; height: 100%; z-index: 3; background-repeat: no-repeat; background-position: center; background-image: url(../img/ico--rainbow--arrow1.svg); position: absolute; top: 0; left: calc(100% + 20px); } &:last-child{ &::after{ left: auto; right: calc(100% + 20px); background-image: url(../img/ico--rainbow--arrow2.svg); } } .circle{ color: #444; font-size: 16px; text-align: center; padding: 19px 0; border-radius: 100px; border: 2px solid #ddee81; font-weight: 600; line-height: 1; letter-spacing: -0.16px; strong{ font-weight: 600; color: #1aaf59; } } .line{ height: 50px; width: 50%; border-right: 3px dashed #ddee81; } &.right{ &::after{ /*! 20250911 수정 */ transform: rotate(180deg); left: auto; right: calc(100% + 20px); } } } .process--circle{ width: calc(100% - 300px); height: 410px; display: flex; background-image: url(../img/bg--process--circle.svg); background-repeat: no-repeat; background-position: center; align-items: center; justify-content: center; background-size: 100%; position: relative; &::after{ content: ''; background-repeat: no-repeat; background-position: center; display: inline-block; width: 33px; height: 71px; background-image: url(../img/ico--rainbow--arrow3.svg); position: absolute; top: calc(100% - 40px); } .circle{ width: 28%; display: flex; flex-direction: column; gap: 35px; align-items: center; position: relative; &::after{ content: ''; position: absolute; right: -7.5px; display: inline-block; top: calc(50% - 15px); width: 30px; height: 30px; background-image: url(../img/ico--process--arrow.svg); } &:last-child{ &::after{ display: none; } } .ico{ width: 80px; height: 80px; background-position: center; background-size: 100%; background-repeat: no-repeat; display: inline-block; } p{ font-size: 18px; font-weight: 400; color: #000; strong{ font-weight: 700; } } &:nth-child(1){ .ico{ background-image: url(../img/ico--process--circle1.svg); } } &:nth-child(2){ .ico{ background-image: url(../img/ico--process--circle2.svg); } } &:nth-child(3){ .ico{ background-image: url(../img/ico--process--circle3.svg); } } } } } .process--bot{ padding-top: 50px; padding-bottom: 120px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px; .process--side--title{ /*! 20250911 수정 */ display: none; } .process--side{ width: 100%; display: flex; gap: 15px; align-items: center; justify-content: center; &.mo{ /*! 20250911 수정 */ display: none; } .arrow{ flex: 1; margin-left: 53px; margin-right: 25px; height: 20px; position: relative; background-color: #2ECC71; &::after{ position: absolute; bottom: -6.7px; right: -13px; background-size: 137px 33px; background-position: right center; background-repeat: no-repeat; content: ''; width: 100%; height: 33px; background-image: url(../img/ico--rainbow--arrow5.svg); } &::before{ content: ''; display: inline-block; position: absolute; width: 20px; height: 90px; bottom: 0; left: 0; background-color: #2ECC71; background-repeat: no-repeat; background-image: url(../img/ico--rainbow--arrow--bar.svg); } &.right{ margin-right: 53px; margin-left: 25px; &::after{ right: auto; left: -13px; bottom: -6px; background-position: left center; background-image: url(../img/ico--rainbow--arrow6.svg); } &::before{ left: auto; right: 0; } } } .circle{ width: 123px; color: #444; font-size: 16px; text-align: center; padding: 19px 0; border-radius: 100px; border: 2px solid #B0D48C; font-weight: 600; line-height: 1; letter-spacing: -0.16px; strong{ font-weight: 600; color: #1aaf59; } } .line{ width: 50px; height: 1px; border-bottom: 3px dashed #B0D48C; } } .line{ display: inline-block; width: 33px; height: 71px; background-image: url(../img/ico--rainbow--arrow4.svg); } .process--txt{ text-align: center; font-weight: 700; font-size: 25px; line-height: 1; color: #333; strong{ color: #188345; } span{ /*! 20250911 수정 */ display: none; } } .process--blue--circle{ color: #fff; letter-spacing: -0.18px; font-size: 18px; font-weight: 400; position: relative; padding: 36px 80px; border-radius: 1000px; background-color: #5281FF; &::after{ content: ''; position: absolute; width: 85px; height: 104px; top: 20px; left: calc(100% - 50px); background-image: url(../img/ico--process.svg); } strong{ color: #fff; font-weight: 700; } } } .process--box{ display: flex; flex-direction: column; gap: 30px; .box{ padding: 55px 200px 55px 70px; background-color: #f0f3f5; background-repeat: no-repeat; background-position: right 40px bottom -20px; &:nth-child(1){ background-image: url(../img/img--process1.svg); background-position: right 40px center; } &:nth-child(2){ background-image: url(../img/img--process2.svg); } &:nth-child(3){ background-image: url(../img/img--process3.svg); } h4{ color: #000; margin-bottom: 30px; font-size: 20px; font-weight: 700; letter-spacing: -0.2px; strong{ color: #009840; } } li{ position: relative; padding-left: 15px; &::before{ position: absolute; left: 0px; top: 12px; content: ''; width: 2px; height: 2px; background-color: #000; border-radius: 50%; } } p, li{ font-size: 15px; color: #000; font-weight: 300; line-height: 1.7; letter-spacing: -0.15px; strong{ color: #009840; font-weight: 600; } } } } } } } } .four--strategy--wrap{ .strategy--cont1{ display: flex; gap: 120px; margin-bottom: 140px; .cont--left{ width: 50%; position: relative; &::before{ content: ''; position: absolute; height: 400px; width: 1000%; border-radius: 0 1000px 1000px 0; background-color: rgba(53, 201, 149, 0.10); right: 0; top: 50%; transform: translateY(-50%); z-index: -1; } .box--wrap{ width: 440px; display: flex; flex-wrap: wrap; gap: 40px; position: relative; &::before{ content: ''; position: absolute; width: 346px; height: 346px; border-radius: 30px; border: 1px solid rgba(53, 201, 149, 0.50); transform: rotate(-45deg); top: 0; left: 45px; z-index: -1; } li{ display: flex; justify-content: center; text-align: center; flex-direction: column; padding: 25px; align-items: center; width: 200px; max-width: 200px; height: 150px; border-radius: 30px; border: 1px solid #1BB57F; gap: 10px; background-color: #35C995; span{ color: #fff; font-size: 15px; letter-spacing: -0.3px; font-weight: 600; } div{ color: #fff; font-size: 15px; font-weight: 500; letter-spacing: -0.3px; } strong{ color: #fff; font-size: 50px; font-weight: 800; line-height: 1; } &:nth-child(3){ height: 170px; } &:last-child{ height: 170px; border: 1px solid #079C68; background-color: #1AAC78; strong{ font-weight: 800; font-size: 20px; } div{ font-size: 15px; font-weight: 600; span{ font-size: 14px; display: block; } &.percent--wrap{ display: flex; width: 100%; flex-direction: column; } &.percent{ display: flex; align-items: center; width: 100%; gap: 5px; .line{ flex: 1; border-bottom: 1px dashed #fff; } strong{ color: #ff0; font-size: 14px; font-weight: 800; letter-spacing: -0.28px; } } } } } } } .cont--right{ width: 40%; display: flex; align-items: center; dl{ dt{ color: #222; font-size: 35px; font-weight: 700; margin-bottom: 15px; } dd{ div{ margin-bottom: 40px; font-weight: 300; font-size: 20px; color: #333; strong{ color: #1aaf59; font-weight: 800; } } span{ color: #222; font-size: 18px; font-weight: 300; } } } } } .strategy--cont2{ margin-bottom: 60px; display: flex; align-items: center; flex-direction: column; .question, .question2{ color: #333; font-size: 25px; font-weight: 300; letter-spacing: -0.5px; margin-bottom: 20px; strong{ color: #191919; font-weight: 800; } } .question2{ margin-bottom: 40px; strong{ color: #1AAF59; } } .answer, .answer2{ letter-spacing: -0.36px; text-align: center; color: #555; font-size: 18px; margin-bottom: 40px; font-weight: 300; } .answer2{ color: #222; margin-bottom: 50px; } .result{ padding: 20px 30px; border-radius: 100px; background-color: rgba(26, 175, 89, 0.1); font-weight: 300; font-size: 19px; strong{ font-weight: 600; } } } .strategy--cont3{ display: flex; flex-direction: column; gap: 35px; .box{ padding: 30px 50px; border-radius: 40px; border: 1px solid #EEE; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10); background-repeat: no-repeat; background-position: right 40px bottom; dt{ margin-bottom: 20px; color: #1aaf59; font-size: 30px; font-weight: 700; } dd{ ul{ display: flex; flex-direction: column; gap: 18px; } li{ color: #333; font-size: 15px; font-weight: 300; padding-left: 15px; position: relative; &::before{ background-color: #8b8b8b; width: 5px; height: 5px; display: inline-block; border-radius: 50%; content: ''; position: absolute; top: 8px; left: 3px; } } } &:nth-child(1){ background-image: url(../img/img--strategy1.svg); } &:nth-child(2){ background-position: right 100px bottom; background-image: url(../img/img--strategy2.svg); } &:nth-child(3){ background-image: url(../img/img--strategy3.svg); } } } } .mna--dream--wrap{ display: flex; gap: 40px; justify-content: center; .dream--cont{ width: 50%; background-color: #d1eede; padding: 60px 50px 80px; border-radius: 30px; h4{ letter-spacing: -0.6px; font-size: 30px; color: #191919; font-weight: 300; line-height: 1.4; margin-bottom: 35px; strong{ font-weight: 700; } } .sub--txt{ margin-bottom: 40px; font-size: 18px; font-weight: 300; color: #333; } .box{ padding: 30px; background-color: #B4DAC4; margin-bottom: 50px; border-radius: 20px; .box--title{ color: #397251; font-size: 18px; font-weight: 700; letter-spacing: -0.36px; margin-bottom: 15px; } .box--desc{ font-weight: 400; font-size: 15px; color: #333; li{ position: relative; padding-left: 12px; font-size: 15px; color: #333; &::before{ position: absolute; left: 0; top: 0; content: '-'; } } } } .chat{ display: flex; gap: 30px; .chat--img{ min-width: 90px; width: 90px; height: 90px; border-radius: 50%; background-image: url(../img/img--dream.svg); background-repeat: no-repeat; background-position: bottom center; background-color: #bde8cf; } .chat--bubble{ border-radius: 20px; padding: 25px; border: 1px solid #EEE; width: 100%; background: #FFF; margin-bottom: 40px; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05); span{ color: #1aaf59; font-size: 15px; font-weight: 500; } } } .chat--answer{ margin-bottom: 50px; line-height: 1.7; color: #111; font-size: 16px; font-weight: 400; letter-spacing: -0.32px; ul{ margin-top: 10px; display: flex; flex-direction: column; gap: 10px; li{ position: relative; padding-left: 10px; line-height: 1.4; color: #111; font-size: 15px; font-weight: 400; letter-spacing: -0.3px; &::before{ content: ''; width: 3px; height: 3px; border-radius: 50%; display: inline-block; background-color: #111; position: absolute; left: 0; top: 7px; } } } &:last-child{ margin-bottom: 0; } } &.purple{ background-color: #e4e9ff; .box{ background-color: #D0D9FF; .box--title{ color: #3A54C5; } } .chat{ .chat--img{ background-color: #cfd8ff; } } } } } .family--business--wrap{ .family--cont--wrap{ margin-bottom: 80px; display: flex; gap: 20px; justify-content: space-between; .cont--left{ display: flex; flex-direction: column; position: relative; h2{ color: #333; font-size: 40px; font-weight: 300; letter-spacing: -0.45px; margin-bottom: 50px; strong{ font-weight: 700; color: #191919; } } span{ color: #333; font-size: 20px; font-weight: 300; letter-spacing: -0.4px; margin-bottom: 80px; } .btn--wrap{ display: flex; gap: 15px; a{ display: inline-block; padding: 20px 30px; background-color: #fff; color: #1aaf59; font-weight: 500; border-radius: 1000px; border: 1px solid rgba(46, 204, 113, 0.50); line-height: 1; } } .family--img{ position: absolute; bottom: 80px; right: 0; } } .cont--right{ width: 700px; gap: 60px; display: flex; .family--box--wrap{ width: 50%; display: flex; flex-direction: column; gap: 50px; } .family--box{ display: flex; border-radius: 30px; background-color: #f6f6f6; padding: 35px 35px 60px 35px; flex-direction: column; .ico{ width: 70px; height: 70px; background-size: 35px 35px; background-color: #2ecc71; border-radius: 15px; background-position: center; background-repeat: no-repeat; margin-bottom: 50px; } p{ font-size: 23px; color: #000; letter-spacing: -0.46px; font-weight: 500; margin-bottom: 25px; } span{ color: #000; font-size: 16px; font-weight: 300; letter-spacing: -0.32px; } .ico{ &.ico1{ background-image: url(../img/ico--family1.svg); } &.ico2{ background-image: url(../img/ico--family2.svg); } &.ico3{ background-image: url(../img/ico--family3.svg); } &.ico4{ background-image: url(../img/ico--family4.svg); } &.ico5{ background-image: url(../img/ico--family5.svg); } } } } } .family--table--wrap{ .table--title{ margin-bottom: 30px; width: fit-content; border-radius: 1000px; padding: 15px 30px; color: #1aaf59; letter-spacing: -0.32px; font-size: 16px; font-weight: 600; border: 1px solid rgba(46, 204, 113, 0.50); } .table--wrap{ margin-bottom: 50px; &:last-child{ margin-bottom: 0; } } table{ width: 100%; text-align: center; tr{ &:first-child{ th{ border-bottom: none; .ico{ background-image: url(../img/ico--strategy1.svg); } } } th{ border: 1px solid #d7d7d7; background-color: #f3f3f3; color: #222; font-size: 16px; font-weight: 600; padding: 25px 20px; &:nth-of-type(2){ background-color: #2ecc71; border-color: #17b55a; color: #fff; } } td{ color: #111; padding: 25px 20px; background-color: #fff; font-size: 16px; font-weight: 400; letter-spacing: -0.32px; border: 1px solid #e0e0e0; &.color--green{ color: #0f9247; strong{ color: #0f9247; font-weight: 700; } } ul{ li{ text-align: left; color: #111; font-size: 16px; font-weight: 400; position: relative; padding-left: 10px; &::before{ content: ''; width: 3px; height: 3px; border-radius: 50%; background-color: #111; display: inline-block; top: 10px; left: 0; position: absolute; } } } } } } } } .impt--search--wrap{ display: flex; align-items: center; justify-content: center; flex-direction: column; > ul{ display: flex; align-items: center; justify-content: center; gap:40px; row-gap: 35px; padding-top:70px; width:100%; max-width:1200px; flex-wrap: wrap; li{ display: flex; align-items: center; justify-content: space-between; gap:25px; width:calc( (100% - 80px ) / 3); border-radius: 100px; padding:20px 30px; position: relative; &:nth-of-type(odd){ background: linear-gradient(134deg, #52ABFF 6.76%, #5281FF 50.56%, #AE52FF 93.53%); } &:nth-of-type(even){ background: linear-gradient(134deg, #6DF3C4 6.76%, #2ECC71 50.56%, #25AD92 93.53%); } &:after{ content: ''; display: block; width:18px; height:18px; background: url(../img/ic_arrow_02.svg) no-repeat center; } .title{ color: #FFF; font-size: 18px; width: calc(100% - 110px); font-style: normal; font-weight: 600; line-height: 100%; /* 18px */ letter-spacing: -0.36px; } .thumbs{ display: inline-flex; min-width:34px; width: 34px; height: 34px; background: url(../img/thumbs_ic.png) no-repeat center; } } } .section--title--center{ color: #333; text-align: center; font-size: 35px; font-style: normal; font-weight: 300; line-height: 100%; /* 35px */ letter-spacing: -0.7px; strong{ color: #191919; font-size: 35px; font-style: normal; font-weight: 800; line-height: 100%; letter-spacing: -0.7px; } } } .impt--list--wrap{ width:100%; padding-top:50px; ul{ display: flex; align-items: stretch; justify-content: center; gap:50px; li{ display: flex; flex-direction: column; border-radius: 30px; background: #FFF; padding:55px 50px; width: 50%; h3{ color: #000; font-size: 20px; font-style: normal; font-weight: 600; line-height: 100%; strong{ color: #225DFF; } } .captions{ padding-top:30px; color: #000; font-size: 16px; font-style: normal; margin-bottom: 60px; font-weight: 300; line-height: 2.1; /* 16px */ } .thumb{ width: 100%; max-width: 204px; height:130px; margin-top: auto; &.thumb--01{ background: url(../img/dear_bg_ic01.png) no-repeat center center / contain; } &.thumb--02{ background: url(../img/dear_bg_ic02.png) no-repeat center center / contain; } } } } } .all--progress--wrap{ .title--wrap{ h2{ color: #333; letter-spacing: -1px; strong{ font-weight: 800; color: #1AAF59; } } } .month--text--contents{ >p{ color: #191919; font-size: 17px; font-style: normal; font-weight: 300; letter-spacing: -0.34px; display: flex; } .month--gap{ margin-bottom: 30px; > span{ &:nth-of-type(1){ border-radius: 1000px; border: 1px dashed #2ECC71; color: #1AAF59; font-size: 16px; font-style: normal; font-weight: 600; line-height: 100%; /* 16px */ letter-spacing: -0.32px; display: inline-flex; align-items: center; justify-content: center; padding:20px; margin-right:25px; } &:nth-of-type(2){ color: #111; font-size: 20px; font-style: normal; font-weight: 500; line-height: 100%; /* 20px */ letter-spacing: -0.4px; strong{ font-weight: 800; } } } } } .compatibility--inner--conls{ width:100%; display: flex; align-items: flex-start; justify-content: flex-start; height: 280px; flex-direction: column; border-radius: 30px; background: #2ECC71 url(../img/line_more_bg.png) no-repeat 100% bottom; padding: 30px 50px 30px 50px; position: relative; >h2{ color: #FFF; font-size: 25px; font-style: normal; font-weight: 700; line-height: 100%; /* 25px */ letter-spacing: -0.5px; margin-bottom:17px; margin-left: -50px; display: flex; align-items: center; padding-left: 50px; position: relative; background: url(../img/dot_more_bg.png) no-repeat center; width:301px; height:64px; } .captions{ color: #FFF; font-size: 16px; font-style: normal; font-weight: 500; line-height: 1.9; letter-spacing: -0.32px; } .desc{ color: #EF0; font-size: 16px; font-style: normal; font-weight: 600; line-height: 1.9; letter-spacing: -0.32px; margin-top: 25px; } .btn--wrapper{ position: absolute; top: 50px; right:55px; display: flex; gap:15px; button{ border-radius: 1000px; background: #FFF; color: #1AAF59; font-size: 15px; font-style: normal; font-weight: 600; display: flex; align-items: center; justify-content: center; letter-spacing: -0.3px; line-height: 100%; padding:20px; border:0px; } } } .step--section{ &:last-child{ padding-bottom:0px; } .inner--s--title{ span{ &:nth-of-type(1){ color:#1AAF59; font-size: 25px; font-style: normal; font-weight: 700; letter-spacing: -0.5px; margin-right:30px; em{ font-style: normal; } } &:nth-of-type(2){ color: #444; font-size: 17px; font-style: normal; font-weight: 300; letter-spacing: -0.34px; } } } .inner--grid{ display: flex; align-items:flex-start; justify-content: space-between; margin-top:40px; position: relative; &:after{ content:''; display: block; width:calc(100% - 180px); left: 90px; height:1px; background: rgba(46, 204, 113, 0.50); position: absolute; top:55px; z-index: -1; } .grid{ display: flex; justify-content: center; align-items: center; flex-direction: column; &.mo{ display: none; } .thumb{ width:110px; height:110px; border-radius: 110px; border: 2px solid rgba(46, 204, 113, 0.50); background: #FFF; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 10px 0 rgba(46, 204, 113, 0.20); } .desc{ padding-top:20px; color: #000; text-align: center; font-size: 15px; font-style: normal; font-weight: 300; line-height: 1.5; /* 15px */ letter-spacing: -0.6px; strong{ font-weight: 700; letter-spacing: -0.3px; } } } } } .progress--section{ $color_1: #222222; $color_2: #191919; $font-family_1: Pretendard, var(--default-font-family); .progress--title{ .step--label { display: block; position: relative; color: #222; font-size: 25px; font-weight: 700; letter-spacing: -0.5px; } } .progress--container { overflow: hidden; box-sizing: border-box; position: relative; width: 1200px; height: 316px; margin: 0 auto; &.mo{ display: none; overflow: visible; flex-direction: column; width: 100%; gap: 40px; height: auto; .progress--box{ padding: 15px 30px 15px 20px; align-items: center; border-radius: 100px; border: 1px solid rgba(46, 204, 113, 0.60); background: #FFF; box-shadow: 0 0 15px 0 rgba(46, 204, 113, 0.30); display: flex; gap: 30px; position: relative; .ico{ width: 60px; height: 60px; border-radius: 50%; background-color: #2ecc71; background-position: center; background-repeat: no-repeat; &.ico1{ background-image: url(../img/blk_03.svg); } &.ico2{ background-image: url(../img/blk_02.svg); } &.ico3{ background-image: url(../img/blk_04.svg); } &.ico4{ background-image: url(../img/blk_01.svg); } } .progress--txt{ display: flex; gap: 10px; flex-direction: column; span{ color: #191919; font-size: 17px; font-weight: 400; line-height: 1; letter-spacing: -0.34px; } strong{ color: #191919; line-height: 1; font-size: 18px; font-weight: 700; letter-spacing: -0.34px; } } &:nth-child(1){ &::after{ display: inline-block; width: 12px; height: 12px; border-radius: 50%; content: ''; bottom: -18px; left: -5px; background-color: #ffd034; position: absolute; } } &:nth-child(2){ &::before{ display: inline-block; width: 12px; height: 12px; border-radius: 50%; content: ''; top: -14px; right: -6px; background-color: #ac7fe2; position: absolute; } &::before{ display: inline-block; width: 12px; height: 12px; border-radius: 50%; content: ''; top: -14px; right: -6px; background-color: #ac7fe2; position: absolute; } &::after{ display: inline-block; width: 95px; height: 95px; background-size: 100%; background-repeat: no-repeat; content: ''; top: 23px; right: -40px; background-image: url(../img/blue_ic01.svg); position: absolute; z-index: -1; } } &:nth-child(3){ &::before{ display: inline-block; width: 61px; height: 61px; content: ''; left: -30px; background-size: 100%; background-repeat: no-repeat; z-index: -1; top: 60%; background-image: url(../img/purple_ic01.svg); position: absolute; } &::after{ display: inline-block; width: 12px; height: 12px; border-radius: 50%; content: ''; left: -22px; bottom: -50px; background-color: #59d8c8; position: absolute; } } &:nth-child(4){ &::before{ display: inline-block; width: 79px; height: 79px; content: ''; right: -30px; background-size: 100%; background-repeat: no-repeat; z-index: -1; top: 60%; background-image: url(../img/clovar_ic.svg); position: absolute; } &::after{ display: inline-block; width: 12px; height: 12px; border-radius: 50%; content: ''; top: 4px; right: -18px; background-color: #f96ba5; position: absolute; } } &:last-child{ margin-top: 62px; &::after{ content: ''; left: calc(50% - 80px); bottom: 100%; width: 160px; height: 82px; position: absolute; background-size: 100%; background-image: url(../img/man_arrow_bg.svg); display: inline-block; } } } } * { box-sizing: border-box; } } // Step 01 - 사전 진행 .progress--step.step--01 { position: absolute; width: 110px; height: 266px; top: 10px; left: 0; font-size: 0px; z-index: 27; .step--circle { position: relative; width: 110px; height: 110px; background: rgba(46, 204, 113, 0.1); z-index: 3; overflow: visible auto; border-radius: 1000px; .step--circle--inner { position: relative; width: 72px; height: 72px; margin: 19px 0 0 19px; background: rgba(46, 204, 113, 0.2); z-index: 4; overflow: visible auto; border-radius: 1000px; .step--circle--core { position: relative; width: 36px; height: 36px; margin: 18px 0 0 18px; background: #2ecc71; z-index: 5; border-radius: 1000px; } } } .step--desc { position: relative; width: 70px; height: 40px; margin: 20px 0 0 20px; font-family: $font-family_1; font-size: 15px; font-weight: 400; text-align: center; text-overflow: initial; white-space: nowrap; letter-spacing: -0.3px; z-index: 6; .desc--main { position: relative; color: $color_2; font-family: $font-family_1; font-size: 15px; font-weight: 400; text-align: center; letter-spacing: -0.3px; } .desc--sub { position: relative; color: $color_2; font-family: $font-family_1; font-size: 15px; font-weight: 700; text-align: center; letter-spacing: -0.3px; } } } // Step 06 - M&A진행결정시 .progress--step.step--06 { position: absolute; width: 222px; height: 162px; top: 0px; right: 0; z-index: 28; .step--arrow { position: relative; width: 160px; height: 82px; margin: 0 0 0 32px; background: url(../img/man_arrow_bg.svg) no-repeat center; background-size: cover; z-index: 28; } .step--box { display: flex; align-items: center; flex-wrap: nowrap; gap: 20px; position: relative; width: 222px; margin: 0 0 0 0; padding: 15px 30px 15px 20px; background: #ffffff; border: 1px solid rgba(46, 204, 113, 0.5); z-index: 21; border-radius: 100px; box-shadow: 0 0 10px 0 rgba(46, 204, 113, 0.3); .step--icon { flex-shrink: 0; position: relative; width: 50px; height: 50px; background: #2ecc71; z-index: 22; border-radius: 1000px; .icon--img { position: relative; width: 24px; height: 19px; margin: 16px 0 0 13px; background: url(../img/blk_01.svg) no-repeat center; background-size: cover; z-index: 23; overflow: hidden; } } .step--desc { flex-shrink: 0; position: relative; width: 102px; font-family: $font-family_1; font-size: 15px; font-weight: 400; text-align: left; text-overflow: initial; white-space: nowrap; letter-spacing: -0.3px; z-index: 24; .desc--main { position: relative; color: $color_2; font-family: $font-family_1; font-size: 15px; font-weight: 400; text-align: left; letter-spacing: -0.3px; } .desc--sub { position: relative; color: $color_2; font-family: $font-family_1; font-size: 15px; font-weight: 700; text-align: left; letter-spacing: -0.3px; } } } } // 나머지 Progress Steps와 Line 연결 요소들 // Step 03 - M&A 상담 .progress--step.step--03 { position: absolute; width: 313px; height: 308px; top: 8px; left: 365px; z-index: 29; .step--badge { &.badge--blue { position: relative; width: 79px; height: 79px; margin: 229px 0 0 0; background: url(../img/blue_ic01.svg) no-repeat center; background-size: cover; overflow: hidden; } &.badge--purple { position: absolute; width: 57px; height: 57px; top: 0; left: 41px; background: url(../img/purple_ic01.svg) no-repeat center; background-size: cover; z-index: 1; overflow: hidden; } } .step--box { display: flex; align-items: center; flex-wrap: nowrap; gap: 20px; position: absolute; width: 239px; height: 80px; top: 26px; left: 74px; padding: 15px 30px 15px 20px; background: #ffffff; border: 1px solid rgba(46, 204, 113, 0.5); z-index: 11; border-radius: 100px; box-shadow: 0 0 10px 0 rgba(46, 204, 113, 0.3); .step--icon { flex-shrink: 0; position: relative; width: 50px; height: 50px; background: #2ecc71; z-index: 12; border-radius: 1000px; .icon--img { position: relative; width: 21px; height: 22px; margin: 14px 0 0 15px; background: url(../img/blk_02.svg) no-repeat center; background-size: cover; z-index: 13; overflow: hidden; } } .step--desc { flex-shrink: 0; position: relative; width: 119px; font-family: $font-family_1; font-size: 15px; font-weight: 400; text-align: left; text-overflow: initial; white-space: nowrap; letter-spacing: -0.3px; z-index: 14; .desc--sub { position: relative; color: $color_2; font-family: $font-family_1; font-size: 15px; font-weight: 700; text-align: left; letter-spacing: -0.3px; } .desc--main { position: relative; color: $color_2; font-family: $font-family_1; font-size: 15px; font-weight: 400; text-align: left; letter-spacing: -0.3px; } } } .step--dot.dot--purple { position: absolute; width: 10px; height: 10px; top: 153px; left: 19px; background: url(../img/purple_dot01.svg) no-repeat center; background-size: cover; z-index: 29; border-radius: 50%; } } // Step 02 - M&A궁합 담당자 전화 .progress--step.step--02 { position: absolute; width: 228px; height: 218px; top: 51px; left: 180px; z-index: 30; .step--dot.dot--green { position: relative; width: 10px; height: 10px; margin: 0 0 0 164px; background: url(../img/green_dot01.svg) no-repeat center; background-size: cover; z-index: 30; border-radius: 50%; } .step--box { display: flex; align-items: center; flex-wrap: nowrap; gap: 20px; position: relative; width: 228px; margin: 128px 0 0 0; padding: 15px 30px 15px 20px; background: #ffffff; border: 1px solid rgba(46, 204, 113, 0.5); z-index: 7; border-radius: 100px; box-shadow: 0 0 10px 0 rgba(46, 204, 113, 0.3); .step--icon { flex-shrink: 0; position: relative; width: 50px; height: 50px; background: #2ecc71; z-index: 8; border-radius: 1000px; .icon--img { position: relative; width: 18px; height: 18px; margin: 16px 0 0 16px; background: url(../img/blk_03.svg) no-repeat center; background-size: cover; z-index: 9; overflow: hidden; } } .step--desc { flex-shrink: 0; position: relative; width: 108px; font-family: $font-family_1; font-size: 15px; font-weight: 400; text-align: left; text-overflow: initial; white-space: nowrap; letter-spacing: -0.3px; z-index: 10; .desc--main { position: relative; color: $color_2; font-family: $font-family_1; font-size: 15px; font-weight: 400; text-align: left; letter-spacing: -0.3px; } .desc--sub { position: relative; color: $color_2; font-family: $font-family_1; font-size: 15px; font-weight: 700; text-align: left; letter-spacing: -0.3px; } } } } // Step 05 - 진행 여부 결정 .progress--step.step--05 { position: absolute; width: 252.5px; height: 154px; top: 105px; left: 726px; z-index: 32; .step--dot.dot--pink { position: relative; width: 10px; height: 10px; margin: 0 0 0 173px; background: url(../img/pink_dot01.svg) no-repeat center; background-size: cover; z-index: 32; border-radius: 50%; } .step--line.line--04 { position: absolute; width: 49.5px; height: 61.5px; top: 16.5px; left: 203px; background: url(../img/line_05.svg) no-repeat center; background-size: cover; z-index: 16; } .step--box { display: flex; align-items: center; flex-wrap: nowrap; gap: 20px; position: absolute; width: 203px; height: 80px; top: 37px; left: 0; padding: 15px 30px 15px 20px; background: #ffffff; border: 1px solid rgba(46, 204, 113, 0.5); z-index: 17; border-radius: 100px; box-shadow: 0 0 10px 0 rgba(46, 204, 113, 0.3); .step--icon { flex-shrink: 0; position: relative; width: 50px; height: 50px; background: #2ecc71; z-index: 18; border-radius: 1000px; .icon--img { position: relative; width: 20px; height: 22px; margin: 14px 0 0 15px; background: url(../img/blk_04.svg) no-repeat center; background-size: cover; z-index: 19; overflow: hidden; } } .step--desc { flex-shrink: 0; position: relative; width: 83px; font-family: $font-family_1; font-size: 15px; font-weight: 400; text-align: left; text-overflow: initial; white-space: nowrap; letter-spacing: -0.3px; z-index: 20; .desc--sub { position: relative; color: $color_2; font-family: $font-family_1; font-size: 15px; font-weight: 700; text-align: left; letter-spacing: -0.3px; } .desc--main { position: relative; color: $color_2; font-family: $font-family_1; font-size: 15px; font-weight: 400; text-align: left; letter-spacing: -0.3px; } } } .step--badge.badge--clover { position: absolute; width: 63px; height: 63px; top: 91px; left: 165px; background: url(../img/clovar_ic.svg) no-repeat center; background-size: cover; z-index: 2; overflow: hidden; } } // Step Line - 연결선 .progress--step.step--line { position: absolute; width: 70px; height: 199px; top: 31px; left: 110px; z-index: 31; .step--dot.dot--yellow { position: relative; width: 10px; height: 10px; margin: 0 0 0 14px; background: url(../img/yellow_dot01.svg) no-repeat center; background-size: cover; z-index: 31; border-radius: 50%; } .step--line.line--02 { position: relative; width: 70px; height: 164px; margin: 25.5px 0 0 0; background: url(../img/line_03.svg) no-repeat center; background-size: cover; z-index: 25; } } // 전역 라인 요소들 .step--line.line--01 { position: absolute; width: 90.5px; height: 155px; top: 67.5px; left: 44px; background: url(../img/line_02.svg) no-repeat center; background-size: cover; z-index: 26; } .step--line.line--03 { position: absolute; width: 47px; height: 108px; top: 74.5px; left: 679px; background: url(../img/line_04.svg) no-repeat center; background-size: cover; z-index: 15; } } } } } footer{ display: flex; align-items: center; justify-content: center; width:100%; background: #191919; section{ width:100%; padding-top:40px; padding-bottom:55px; max-width:1200px; display: flex; gap: 20px; align-items: flex-end; justify-content: space-between; .footer--left{ >a{ display: block; width: 35%; min-width: 100px; max-width: 163px; img{ width: 100%; } } .copy--text{ display: flex; flex-direction: column; gap:20px; margin-top:30px; p{ color: #FFF; font-size: 16px; font-style: normal; font-weight: 500; line-height: 1.4; letter-spacing: -0.32px; display: flex; flex-wrap: wrap; span{ color: #FFF; font-size: 16px; font-style: normal; font-weight: 500; line-height: 1.4; letter-spacing: -0.32px; margin-right:31px; position: relative; &::after{ content:''; display: block; width:1px; height:100%; background: #535353; position: absolute; top:50%; width:1px; height:15px; right:-16px; transform: translateY(-50%); } &:last-child{ margin-right:0px; &::after{ display: none; } } } } } } .footer--right{ min-width: 320px; display: flex; gap:50px; a{ color: #FFF; font-size: 16px; font-style: normal; font-weight: 500; line-height: 1.4; letter-spacing: -0.32px; text-transform: uppercase; } } } } .top--btn{ background-color: #2ECC71; border-radius: 50%; position: fixed; right: 30px; width: 70px; cursor: pointer; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2); height: 70px; bottom: 30px; z-index: 100; background-repeat: no-repeat; background-position: center; background-image: url(../img/ico--top.svg); opacity: 0; transition: opacity 0.3s ease; &.actv{ opacity: 1; } } /*! 20250904 수정 */ main .section--container .process--plan--wrap .content--wrap .direct--wrap .bar{ position: relative; &::after{ position: absolute; right: 0; content: ''; display: inline-block; background-image: url(../img/ico--bar.svg); width: 12px; height: 12px; background-repeat: no-repeat; transform: rotate(45deg); top: -4.5px; } &.mo2{ display: none; } } main .section--container .process--plan--wrap .content--wrap .direct--wrap .circle{ &:nth-of-type(2){ &::before{ content: ''; width: 12px; height: 12px; background-image: url(../img/ico--bar.svg); display: inline-block; transform: rotate(135deg); position: absolute; top: calc(100% + 32px); left: calc(50% - 4.5px); } } &.mo{ display: none; &:nth-of-type(5){ background-color: #188345; } } } main .section--container .process--plan--wrap .content--wrap .process--wrap .process--title .arrow--wrap{ display: none; }