@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap'); * {margin: 0; padding: 0; list-style: none; word-break: keep-all; overflow-wrap: normal; box-sizing: border-box;} html {font-size: 10px; box-sizing: border-box; -webkit-overflow-scrolling: touch;} body { 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; font-size: 1.6rem; line-height: 1;} a {text-decoration: none; color: inherit;} img {vertical-align: top;} button {border: none; cursor: pointer;} /* header */ .header {width: 100%; height: 72px; position: fixed; top: 0; left: 0; display: block; z-index: 100; background: #fff; border-bottom: 1px solid #e5e5e5;} .header .headerArea {max-width: 1400px; height: 72px; display: flex; align-items: center; justify-content: space-between; margin: 0 auto;padding: 0 20px;} .header .headerArea h1 a img {width: 180px; height: auto;} .header .headerArea .gnb {height:100%;} .header .headerArea .gnb .swiper-wrapper {display: flex; gap:100px;height:100%;padding:0;box-sizing:border-box;} .header .headerArea .gnb .swiper-wrapper button {position:relative;padding:4px 0 0;letter-spacing: 0.5px; color: #000; background: none; height:100%; font-weight: bold; font-size: 15px; box-sizing: border-box;} .header .headerArea .gnb .swiper-wrapper button.active:after {content:'';position:absolute;left:0;bottom:0;display:block;width:100%;height:4px;background:#059f6c;} .header .headerArea {} /* contents */ .contents-Wrap {width: 100%; margin-top: 70px; text-align: center;} /* section 1 */ .contents-wrap .contents-wrap-cw1 {margin-top: 72px; background: linear-gradient(100deg, #1ca06c, #256cb5); margin-top: 72px; overflow: hidden;} #section1 {width: 100%; height:700px ; padding: 20px; display: flex; flex-direction: column; align-content: space-between; justify-content: center; gap: 10px;} #section1 .section1-wrap {display: flex; justify-content: center; align-items: center;position: relative; height: 100%;} #section1 .section1-wrap .section1-txt {padding:0 20px 0 0;} #section1 .section1-wrap .section1-txt h3 {line-height:1.2;font-size: 40px; font-weight: bold; text-align: left; letter-spacing: -1.5px; margin-bottom: 20px; color: #fff;} #section1 .section1-wrap .section1-txt h2 {line-height:1.2;font-size: 70px; font-weight: 700; text-align: left; letter-spacing: -0.5px; margin-bottom: 50px; color: #fff;} #section1 .section1-wrap .section1-txt p {line-height:1.2;font-size: 24px; font-weight: 400; text-align: left; letter-spacing: -0.5px; margin-bottom: 20px; color: #fff; ;line-height: 1.2;} #section1 .section1-wrap .section1-txt .section-btn {display: flex; flex-direction: row; flex-wrap: nowrap; gap: 16px;} #section1 .section1-wrap .section1-txt .section-btn button {border: 2px solid #0F62FE; padding: 18px 32px; font-family: Roboto;font-size: 20px;font-weight: 500;line-height: 20px;letter-spacing: 0.5px;text-align: left; } #section1 .section1-wrap .section1-txt .section-btn button.btn-price {color: #fff; background: #0F62FE;} #section1 .section1-wrap .section1-txt .section-btn button.btn-demo {color: #0F62FE; background: #fff;} #section1 .section1-wrap .section1-img > img {margin-right:-250px;} #section1 .section1-wrap .section1-btnWrap {display: flex; gap: 16px;} #section1 .section1-wrap .section1-btnWrap .section1-btn1, .section1-btn2 {padding: 18px 32px; font-size: 20px; font-weight: 500; border: 3px solid #fff; box-sizing: border-box; background: #fff;} .section1-btn1 {color: #059f6c;} .section1-btn2 {color: #fff; background: none;} /* section 2 */ .contents-wrap .contents-wrap-cw2 {background: #FFFFFF;} #section2 {width: 100%; height:auto; background: #fff; padding: 80px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center;} #section2 .section2-wrap {width: 100%; display: flex; flex-direction: column; gap: 48px;} #section2 .section2-wrap p {font-family: Roboto; font-size: 42px; font-weight: 700; line-height: 46.2px; text-align: center;} #section2 .section2-wrap > div {display: flex; justify-content: space-evenly} #section2 .section2-wrap > div img {width: 175px;} /* section 3 */ .contents-wrap .contents-wrap-cw3 {background: #eaedf3;} #section3 {width: 100%; height:auto; padding: 80px 20px;} #section3 .section3-wrap {max-width: 900px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 80px; margin: 0 auto;} #section3 .section3-wrap .section3-slide-wrap {width: 100%; display: flex; flex-direction: column; gap: 48px;} #section3 .section3-wrap .section3-slide-wrap .section3-title {font-size: 42px; font-weight: 700; text-align: center; line-height: 1.5;} #section3 .section3-wrap .section3-slide-wrap .section3-contents {font-size: 18px; font-weight: 400; text-align: center; line-height: 1.5;} .slider-topmenu {width: 100%; height: 56px; background: #fff; border: 1px solid #c1c7cd; border-width: 1px 1px 0 1px;; border-radius: 20px 20px 0 0; padding: 0 16px; display: flex; justify-content: space-between; align-items: center;} .slider-topmenu div {display: flex; gap: 5px;} .slider-topmenu .mac-ico1 {width: 13.33px; height: 13.33px; border-radius: 20px; background: #f27163;} .slider-topmenu .mac-ico2 {width: 13.33px; height: 13.33px; border-radius: 20px; background: #eabf45;} .slider-topmenu .mac-ico3 {width: 13.33px; height: 13.33px; border-radius: 20px; background: #53a04e;} .swiper-button-next {width:50px;height:50px;background:url('/images/chevron-right.svg') no-repeat 50%;background-size:100%;} .swiper-button-prev {width:50px;height:50px;background:url('/images/chevron-left.svg') no-repeat 50%;background-size:100%;} #prevBtn1:hover, #nextBtn1:hover, #prevBtn2:hover, #nextBtn2:hover, #prevBtn3:hover, #nextBtn3:hover {cursor: pointer;} #slider1 {width: 100%; overflow: hidden;height:500px; max-height:500px;border: 1px solid #c1c7cd; border-width: 0 1px 1px 1px;; border-radius: 0 0 20px 20px;box-sizing:border-box;} #slider1 .sliderWrap1 { height: 100%; display: flex;} #slider1 .slider1 {width: 100%; height: 100%; background-size: cover; background-position: top; background-repeat: no-repeat;} #slider1 .slider1.s1 {background-image: url(../images/sec3_img1.png);} #slider1 .slider1.s2 {background-image: url(../images/sec3_img2.png);} #slider1 .slider1.s3 {background-image: url(../images/sec3_img3.png);} #slider2 {width: 100%; overflow: hidden;height:500px; max-height:500px;border: 1px solid #c1c7cd; border-width: 0 1px 1px 1px;; border-radius: 0 0 20px 20px;} #slider2 .sliderWrap2 { height: 100%; display: flex;} #slider2 .slider2 {width: 100%; height: 100%; background-size: cover; background-position: top; background-repeat: no-repeat;} #slider2 .slider2.s1 {background-image: url(../images/sec3_img4_pc.png);} #slider2 .slider2.s2 {background-image: url(../images/sec3_img4_mo.png);} #slider2 .slider2.s3 {background-image: url(../images/sec3_img5_pc.png);} #slider2 .slider2.s4 {background-image: url(../images/sec3_img5_mo.png);} #slider3 {width: 100%; overflow: hidden;height:500px; max-height:500px;border: 1px solid #c1c7cd; border-width: 0 1px 1px 1px;; border-radius: 0 0 20px 20px;} #slider3 .sliderWrap3 { height: 100%; display: flex;} #slider3 .slider3 {width: 100%; height: 100%; background-size: cover; background-position: top; background-repeat: no-repeat;} #slider3 .slider3.s1 {background-image: url(../images/sec3_img6_pc.png);} #slider3 .slider3.s2 {background-image: url(../images/sec3_img6_mo.png);} #slider3 .slider3.s3 {background-image: url(../images/sec3_img7_pc.png);} #slider3 .slider3.s4 {background-image: url(../images/sec3_img7_mo.png);} /* section 4 */ .contents-wrap .contents-wrap-cw4 {background: #FFFFFF;overflow-x:hidden;} #section4 {width:100%;;margin: 0 auto; padding: 80px 20px;background: #fff; display: flex; flex-direction: column; justify-content: center;} #section4 .section_wrap {width: 100%; display: flex; flex-direction: column; gap: 64px;} #section4 .section4-title {font-family: Roboto; font-size: 42px; font-weight: 700; line-height: 42px; letter-spacing: 1px; text-align: center;} #section4 .cardWrap {position: relative;} #section4 .cardWrap .card-container {display: flex; transition: transform 0.5s ease;margin:0 0 150px;} #section4 .cardWrap:last-child .card-container {margin:0;} #section4 .cardWrap .card-container .box {border: 1px solid #ddd; color: #333; text-align: left; border-radius: 20px; overflow: hidden;} #section4 .cardWrap .card-container .box img {width: 100%; height: auto; max-height: 200px; object-fit: cover;} #section4 .cardWrap .card-container .box .box-txt {padding: 24px 16px 16px 16px; display: flex; flex-direction: column; gap: 16px; text-align: center; min-height: 146px;} #section4 .cardWrap .card-container .box .box-txt .title {font-family: Roboto; font-size: 20px; font-weight: 700; line-height: 22px;} #section4 .cardWrap .card-container .box .box-txt .contents {font-family: Roboto; font-size: 16px; font-weight: 400; line-height: 22.4px; padding-top: 0;} /* section 5 */ #section5 {background: #F2F4F8; padding: 80px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center;} #section5 > p {font-size: 42px; font-weight: 700; text-align: center; color: #333; margin-bottom: 100px;} .pricing-tab {width: 100%; display: flex; flex-direction: row; gap: 120px; margin-bottom: 110px; align-items: center;} .pricing-tab .pricing-txt-wrap {width: 100%; max-width: 480px;} .pricing-tab .pricing-txt-wrap .pricing-title {font-family: DM Sans; font-size: 28px; font-weight: 700; line-height: 1.2; color: #170F49; margin-bottom: 16px;} .pricing-tab .pricing-txt-wrap .pricing-content {font-family: DM Sans; font-size: 16px; font-weight: 400; line-height: 1.2; color: #6F6C90; margin-bottom: 58px;} .pricing-tab .pricing-calbox {width: 100%; max-width: 800px; height: auto; background: #fff; margin: 0 auto; padding: 49px 60px 34px; border-radius: 20px; border: 1px solid #EFF0F5; box-shadow: 8px 8px 22px rgb(0, 0, 0, 0.05);} .pricing-tab .pricing-calbox .price {font-family: DM Sans; font-size: 20px; font-weight: 500; line-height: 22px; text-align: left; color: #6F6C90;} .pricing-tab .pricing-calbox .price #totalAmount {font-family: DM Sans; font-size: 45px; font-weight: 700; line-height: 66px; text-align: left; color: #170F49;} .pricing-tab .pricing-info {width: 100%; max-width: 830px;} .pricing-tab .pricing-info .slide_box {display: flex; justify-content: space-between; margin-bottom: 50px; padding-bottom: 30px; border-bottom: 1px solid #ebebeb;} .pricing-tab .pricing-info .slide_box .inner {display: flex; gap: 12px; flex-direction: column;} .pricing-tab .pricing-info .slide_box .inner > p {font-family: DM Sans; font-size: 14px; font-weight: normal; text-align: left; color: #059f6c;} .pricing-tab .pricing-info .slide_box .inner > h6 {font-family: DM Sans; font-size: 28px; font-weight: bold; text-align: left; color: #170F49;} .pricing-tab .pricing-info .slide_box > button {font-family: DM Sans; font-size: 18px; font-weight: 500; line-height: 1; text-align: center; padding: 16px 34px; border-radius: 96px; background: #059f6c; color: #fff;} .pricing-tab .pricing-info .info_box {display: flex; text-align: left; justify-content: space-between; align-items: center;margin-bottom: 37px;} .pricing-tab .pricing-info .info_box > ul > li {color: #6F6C90;font-family: "DM Sans";font-size: 18px;font-style: normal;font-weight: 400;line-height:1.2;} .pricing-tab .pricing-info .btm_txt {margin: 10px auto; font-size: 12px; font-weight: 400; line-height: 1.2;} .pricing-tab .pricing-info .btm_txt > li {color: #a9a9a9; font-family: DM Sans;} .pricing-tab .pricing-calbox .pricing-wrap {display: flex; justify-content: space-between; margin-bottom: 50px; padding-bottom: 30px; border-bottom: 1px solid #ebebeb;} .pricing-tab .pricing-calbox .pricing-wrap .inner {display: flex; gap: 12px; flex-direction: column;} .pricing-tab .pricing-calbox .pricing-wrap .inner > p {font-family: DM Sans; font-size: 14px; font-weight: normal; text-align: left; color: #059f6c;} .pricing-tab .pricing-calbox .pricing-wrap .inner > h6 {font-family: DM Sans; font-size: 28px; font-weight: bold; text-align: left; color: #170F49;} .pricing-tab .pricing-calbox .pricing-wrap > button {font-family: DM Sans; font-size: 18px; font-weight: 500; line-height: 1; text-align: center; padding: 16px 34px; border-radius: 96px; background: #059f6c; color: #fff;} .pricing-tab .pricing-calbox .btm_box {display: flex;flex-wrap: wrap;justify-content: space-between; text-align: left; margin: 18px 0 0 12px; margin-bottom: 37px; gap: 7px;} .pricing-tab .pricing-calbox .btm_box span {font-family: DM Sans; font-size: 34px; line-height: 1; font-weight: 700; text-align: left; color: #170F49;} .pricing-tab .pricing-calbox .btm_box span:first-child {font-family: DM Sans; font-size: 12px; font-weight: 400; line-height: 15px; text-align: right; color: #EB5757;} @media (max-width: 1200px) { .pricing-tab {flex-direction: column !important;} .pricing-tab .pricing-txt-wrap {width: 100%; max-width: 480px; text-align: center;} .pricing-tab .pricing-calbox {padding: 30px !important;} .pricing-tab .pricing-calbox .price {text-align: right;} .pricing-tab .pricing-calbox .price #totalAmount {} } /* header */ .swiper-wrapper {display: flex;} /* 슬라이더 */ .slider-container { position: relative; width: 100%; max-width: 780px; margin-top: 20px; border-radius: 5px; } .slider { width: 100%; -webkit-appearance: none; background: linear-gradient(to right, #059f6c 0%, #059f6c 50%, #bcbcbf 50%, #bcbcbf 100%); height: 8px; border-radius: 5px; outline: none; } .slider::-webkit-slider-thumb {-webkit-appearance: none; appearance: none; width: 20px; height: 20px; background: white; border: 1.5px solid #D9DBE9; border-radius: 50%; cursor: pointer; } .slider::-moz-range-thumb { width: 20px; height: 20px; background: white; border: 2px solid #d0d0d0; border-radius: 50%; cursor: pointer; } .value-label { position: absolute; bottom: 25px; left: 0; transform: translateX(-55%); padding: 8px 20px; background-color: #059f6c; color: white; border-radius: 50px; font-size: 16px;} /* footer */ #footer {background:#231f20;} #footer .footer-wrap {max-width:1400px;margin:auto;padding:40px 20px;} #footer .footer-wrap .inner .logo_box {display:block;margin:0 0 20px;} #footer .footer-wrap .inner .logo_box > img {max-width:140px;width: calc(50% - 10px);} #footer .footer-wrap .inner .logo_box > img + img {margin:0 0 0 10px;} #footer .footer-wrap .inner .lst > li { display:inline-flex; align-items: center; } #footer .footer-wrap .inner .lst > li::after { content: ''; display: inline-block; width: 2px; height: 14px; margin: 0 3px 0 10px; background: #ffffff70; vertical-align: top; } #footer .footer-wrap .inner .lst > li:last-child::after { content: none; } #footer .footer-wrap .inner .lst li {line-height:1.3;font-size:15px;color:#fff;} #footer .footer-wrap .inner > p {line-height:1.3;margin:10px 0 0;font-size:15px;color:#fff;} /* 상담 */ #modal {display: none;justify-content: center;align-items: center; position: fixed; z-index: 200; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5);} #modal .modal-content {overflow-y:auto;width: 80%; max-width: 1000px;max-height:100%;background-color: white; padding: 40px 124px;} #modal .modal-content .contact-form h4{font-family: Roboto; font-size: 42px; font-weight: 700; line-height: 46.2px; text-align: left; margin-bottom: 10px;} #modal .modal-content .contact-form .close {color: #ccc; position: absolute; right: 30px; top: 20px; font-size: 48px; font-weight: bold;} #modal .modal-content .contact-form .close:hover, #modal .modal-content .close:focus {color: black; text-decoration: none; cursor: pointer;} #modal .modal-content .contact-form .contact-form-group {display: flex; flex-direction: column; margin-bottom: 16px; gap: 7px;} #modal .modal-content .contact-form .contact-form-group .contact-label.required::after {content: "*"; color: #f00; font-size: 14px; margin-left: 5px;} select[name="inquiry_type"], select[name="industry"], select[name="company_size"], input[name="company_name"], input[name="name"], input[name="position"], input[name="phone"], input[name="email"], input[name="message"], textarea {background: #F2F4F8; padding: 13px 16px; border:none; border-bottom: 1px solid #C1C7CD; height: 44px;} textarea {resize: none; width: 100%; height: 130px; } select {width: 100%;} input[name="submit"] {background: #0F62FE; font-size: 16px; font-weight: 500; color: #fff; letter-spacing: 0.5px; padding:16px 28px; border:none; cursor: pointer;} .term-agreement {} .term-agreement p {font-weight: bold;} .term-agreement ul {margin-left: 10px; margin-bottom: 20px;} .term-agreement ul li::before {content: "·"; margin-right: 5px; font-size: 18px;} .term-agreement .contact-form-group {display: flex; flex-direction: row !important;} /* swiper */ .swiper-slide > img {display:block;width:100%;} .swiper-button-next:after, .swiper-button-prev:after {display:none;} .murti .swiper-slide {position:relative;} .murti .swiper-slide > img:last-child {flex: 1 1;position:absolute;top:100%;right:0;width:auto;height:100%;max-height:100%;} .murti .swiper-slide.swiper-slide-active.animatable > img:first-child {visibility: initial;} .murti .swiper-slide.swiper-slide-active.animatable > img:last-child {top:100%;} .murti .swiper-slide.swiper-slide-active.animated > img:first-child {animation-duration: 0;} .murti .swiper-slide.swiper-slide-active.animated > img:last-child {top:0;transition-property:top;transition-duration: 1.5s;} .murti .swiper-slide.swiper-slide-active > img:last-child {top:0;transition-property:top;transition-duration: 1.5s;} .murti .swiper-slide.swiper-slide-prev > img:last-child, .murti .swiper-slide.swiper-slide-next > img:last-child {flex: 1 1;top:100%;} @media all and (max-width:1870px) { #section1 .section1-wrap .section1-img > img {max-width:100%;margin:0;} } @media all and (max-width:1200px) { #section1 {height:auto;padding:40px 20px;} #section1 .section1-wrap .section1-txt h3 {font-size:25px;} #section1 .section1-wrap .section1-txt h2 {font-size:40px;} #section1 .section1-wrap .section1-txt p {font-size:17px;} #modal .modal-content {width:90%;padding:40px;} } @media all and (min-width:1024px) { } @media all and (max-width:1023px) { .header .headerArea .gnb .swiper-wrapper {gap: 50px;} #section1 .section1-wrap {align-items: flex-start;flex-direction: column;} #section1 .section1-wrap .section1-txt {padding:0;} #section1 .section1-wrap .section1-txt h3 > br {display:none;} #section1 .section1-wrap .section1-txt h2 > br {display:none;} #section1 .section1-wrap .section1-txt h2 {margin:0 0 30px;} #section1 .section1-wrap .section1-btnWrap .section1-btn1, .section1-btn2 {padding:10px 20px;} #section1 .section1-wrap .section1-img {width:100%;margin:20px 0 0;text-align:right;} #section1 .section1-wrap .section1-img > img {max-width:500px;width:100%;display:inline-block;} #slider1, #slider2, #slider3 {height:auto;max-height:auto;} #section3 .section3-wrap .section3-slide-wrap .section3-contents br {display:none;} #section4 .section_wrap {gap:40px;} #section4 .cardWrap .card-container {margin:0 0 70px;} .pricing-tab {gap: 70px;} .swiper-button-next, .swiper-container-rtl .swiper-button-prev {right:0;} .swiper-button-prev, .swiper-container-rtl .swiper-button-next {left:0;} } @media all and (max-width:767px) { .header {height:auto;} .header .headerArea {flex-direction: column;height:auto;} .header .headerArea h1 {padding:20px 0 10px;} .header .headerArea .gnb {width:100%;} .header .headerArea .gnb .swiper-wrapper {gap:initial;} .header .headerArea .gnb .swiper-wrapper {justify-content: space-around;} .header .headerArea .gnb .swiper-wrapper button {height:50px;} .contents-wrap .contents-wrap-cw1 {margin-top: 118px;} #section1 {padding:30px 20px;} #section1 .section1-wrap .section1-txt h2 {margin:0 0 20px;font-size:30px;} #section1 .section1-wrap .section1-txt h3 {margin:0 0 10px;font-size:22px;} #section1 .section1-wrap .section1-txt p {font-size:15px;} #section1 .section1-wrap .section1-txt p br {display:none;} #section2, #section3, #section4 {padding:40px 20px;} #section2 .section2-wrap {gap: 30px;} #section2 .section2-wrap p, #section3 .section3-wrap .section3-slide-wrap .section3-title, #section4 .section4-title {line-height:1.2;font-size:30px;} #section2 .section2-wrap > div {flex-direction: column;align-items: center;gap: 30px;} #section3 .section3-wrap {gap:40px;} #section3 .section3-wrap .section3-slide-wrap {gap: 30px;} #section3 .section3-wrap .section3-slide-wrap .section3-contents {line-height:1.2;font-size:17px;} #section4 .section_wrap {gap:30px;} #section4 .cardWrap .card-container {margin:0 0 30px;} #section5 > p {line-height:1.2;font-size:30px;margin:0 0 40px;} .pricing-tab .pricing-calbox {padding:30px 20px !important;} .pricing-tab .pricing-txt-wrap .pricing-title {font-size:20px;} .pricing-tab .pricing-txt-wrap .pricing-content br {display:none;} .slider-container {width:calc(100% - 60px);padding:0;margin:60px auto 0;} .pricing-tab {gap: 40px;margin-bottom:40px;} .pricing-tab .pricing-txt-wrap .pricing-content {margin:0;} .pricing-tab .pricing-info .info_box {flex-direction: column;} .pricing-tab .pricing-calbox .btm_box {flex-direction: column; align-items: center;gap: 20px;margin:0;} .pricing-tab .pricing-calbox .pricing-wrap {margin:0 0 40px;} .pricing-tab .pricing-calbox .price #totalAmount {font-size:35px;} #modal .modal-content {width:calc(100% - 40px);padding:30px 20px;} #modal .modal-content .contact-form h4 {font-size:30px;} #footer .footer-wrap .inner .lst li {display:inline-block;} #footer .footer-wrap .inner .lst > li::after {display:none;} } @media all and (max-width:479px) { .pricing-tab .pricing-info .slide_box, .pricing-tab .pricing-calbox .pricing-wrap {flex-direction: column;} .pricing-tab .pricing-info .slide_box .inner,.pricing-tab .pricing-calbox .pricing-wrap .inner {margin:0 0 20px;} #section4 .cardWrap .card-container .box .box-txt {padding:20px 10px;} }