@charset "utf-8";

/********* 서브 *********/
#hd_h1 {display: none;}

.sub-wrapper {position: relative; padding-top: 58px;}
.sub-wrapper::after {position: absolute; top: 0; left: 50%; transform: translateX(-50%); max-width: 1570px; width: calc(100% - 60px); height: 100%; z-index: -1; display: block; border-left: 1px solid #DFDFDF; border-right: 1px solid #DFDFDF; content: '';}
.sub-wrapper .inner {position: relative; width: calc(100% - 60px); max-width: 1520px; margin: 0 auto;}
.sub-wrapper .inner-s {position: relative; width: calc(100% - 60px); max-width: 1062px; margin: 0 auto;}
.sub-wrapper .inner::after {content: ''; display: block; width: 55%; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: -1; border-left: 1px dashed #DFDFDF; border-right: 1px dashed #DFDFDF;}
.sub-wrapper .inner::before {content: ''; display: block; width: 1px; height: 100%; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: -1; border-left: 1px dashed #DFDFDF;}
.sub-wrapper .btn-area {display: flex; align-items: center; column-gap: 26px;}
.sub-wrapper #container_title {display: none;}
.sub-wrapper .bg {background-color: #F9FAFB;}
.sub-wrapper .bg-dark {background-color: #111827;}
.sub-wrapper .bg .inner::after,
.sub-wrapper .bg .inner::before,
.sub-wrapper .bg-dark .inner::after,
.sub-wrapper .bg-dark .inner::before {display: none;}
.sub-wrapper .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
.sub-wrapper .img-effect {overflow: hidden;}
.sub-wrapper .img-effect img {transition: transform 0.5s ease;}
.sub-wrapper .img-effect:hover img {transform: scale(1.05);}

.sub-wrapper .tit {margin-bottom: 30px;}
.sub-wrapper .tit > h2 {font-size: 36px; font-weight: 700;}
.sub-wrapper .tit > p {font-size: 20px; color: #484848; padding-top: 10px;}
.sub-wrapper .btn-circle {font-size: 16px; color: #505050; font-weight: 500; background-color: #F3F4F6; padding: 10px; border-radius: 100px;}
.sub-wrapper h3 {font-size: 32px;}
.sub-wrapper h4 {font-size: 24px;}
.sub-wrapper h5 {font-size: 20px;}
.sub-wrapper .font-bold {font-weight: 700;}
.sub-wrapper .font-semibold {font-weight: 600;}
.sub-wrapper .lightgreen {color: #10B981;}
.sub-wrapper .lightgreen-bg {background-color: #10B981;}
.sub-wrapper .yellowgreen-bg {background-color: #ECFDF5;}
.sub-wrapper .green {color: #059166;}
.sub-wrapper .green-bg {background-color: #059166;}
.sub-wrapper .gray {color: #484848;}
.sub-wrapper ul.common-flex {display: flex; flex-wrap: wrap; gap: 24px;}
.sub-wrapper ul.common-flex-2 li {width: calc(100% / 2 - 12px);}
.sub-wrapper ul.common-flex-3 li {width: calc(100% / 3 - 16px);}
.sub-wrapper .sub-flex-card {display: flex; flex-direction: column; row-gap: 20px; align-items: flex-start;}
.sub-wrapper .sub-flex-card .btn-area {column-gap: 24px; flex-wrap: wrap; row-gap: 8px;}
.sub-wrapper .sub-flex-card p {line-height: 1.67;}

.sub-wrapper .section-100 {padding: 100px 0;}
.sub-wrapper .section-120 {padding: 120px 0;}
.sub-wrapper .section-130 {padding: 130px 0;}
.sub-wrapper .section-150 {padding: 150px 0;}
.sub-wrapper .section-200 {padding: 200px 0;}
.sub-wrapper .pb-200 {padding-bottom: 200px;}

.sub-wrapper .card {border-radius: 30px; border: 3px solid #E8E8E8; background-color: #fff;}
.sub-wrapper .card.bg-dark {background-color: #111827; border: 1px solid #111827;}
.sub-wrapper .card.bg-green {background-color: #379F80; border: 1px solid #379F80;}

.sub-wrapper .icon {display: flex; align-items: center; justify-content: center; border-radius: 10px; flex-shrink: 0;}
.sub-wrapper .icon-60 {width: 60px; height: 60px;}

.sub-cont-2 {padding: 0 0 140px 0;}
.sub-cont-2 .tit-text-center {padding-top: 80px;}
.sub-cont-2 .tit-area {display: flex; flex-direction: column; row-gap: 10px; align-items: center; justify-content: center; text-align: center;}
.sub-cont-2 .tit-area > span {font-size: 32px; font-weight: 500; font-family: 'Roboto Mono', monospace;}

.text-center {display: flex; flex-direction: column; align-items: center; text-align: center;}

.round-bullet {width: fit-content; display: flex; align-items: center; column-gap: 10px; padding: 5px 20px; border-radius: 100px; background-color: #EBF1FD; margin-bottom: 10px; font-size: 15px; text-transform: uppercase; font-weight: 500; color: #1362EB;}
.round-bullet > span {width: 8px; height: 8px; border-radius: 50%; background-color: #1362EB; flex-shrink: 0;}

/* input */
.website-form .checkbox-area {display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 12px;}
.website-form .checkbox-area .checkbox-item {width: calc(100% / 2 - 12px);}
.website-form .checkbox-item input[type="checkbox"] {display:none;}
.website-form .checkbox-item input[type="checkbox"] + label{position: relative; width: 100%; height: 44px; border: 1px solid #EEEEEE; display: flex; align-items: center; column-gap: 6px; justify-content: space-between; padding: 0 20px 0 50px;  cursor:pointer; color: #464646 !important; padding-top: -1px; font-size: 15px; border-radius: 10px;}
.website-form .checkbox-item input[type="checkbox"] + label:hover {color: #2461E9 !important; border: 1px solid #2461E9; transition: all 0.3s;}
.website-form .checkbox-item input[type="checkbox"] + label:before{position:absolute; content:""; display:inline-block; box-sizing: border-box; background-color: #fff; width:20px; height:20px; border:1px solid #E0E0E0; border-radius: 5px; left: 20px; top: 50%; transform: translate(0, -50%);}
.website-form .checkbox-item input[type="checkbox"] + label .green {color: #00B896;}
.website-form .checkbox-item input[type="checkbox"]:checked + label {color: #2461E9 !important; border: 1px solid #2461E9; transition: all 0.3s;}
.website-form .checkbox-item input[type="checkbox"]:checked + label:before {content:""; color: #2461E9 !important; background-color: #2461E9; border: 1px solid #2461E9; background-image: url('../img/chk.svg'); background-repeat: no-repeat; background-position: 50%;}

.website-form .radio-area {display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 12px;}
.website-form .radio-area .radio-item {width: calc(100% / 2 - 12px);}
.website-form .radio-item input[type="radio"] {display:none;}
.website-form .radio-item input[type="radio"] + label{position: relative; width: 100%; height: 44px; border: 1px solid #EEEEEE; display: flex; align-items: center; justify-content: space-between; padding: 0 20px 0 50px;  cursor:pointer; color: #464646 !important; padding-top: -1px; font-size: 15px; border-radius: 10px;}
.website-form .radio-item input[type="radio"] + label:hover {color: #2461E9 !important; border: 1px solid #2461E9; transition: all 0.3s;}
.website-form .radio-item input[type="radio"] + label:before{position:absolute; content:""; display:inline-block; box-sizing: border-box; background-color: #fff; width:20px; height:20px; border:1px solid #E0E0E0; border-radius: 5px; left: 20px; top: 50%; transform: translate(0, -50%);}
.website-form .radio-item input[type="radio"]:checked + label {color: #2461E9 !important; border: 1px solid #2461E9; transition: all 0.3s;}
.website-form .radio-item input[type="radio"]:checked + label:before {content:""; color: #2461E9 !important; background-color: #2461E9; border: 1px solid #2461E9; background-image: url('../img/chk.svg'); background-repeat: no-repeat; background-position: 50%;}

.contact-form .radio-area {display: flex; flex-wrap: wrap; column-gap: 16px; row-gap: 16px;}
.contact-form .radio-item input[type="radio"] {display:none;}
.contact-form .radio-item input[type="radio"] + label{position: relative; width: 100%; height: 48px; border: 1px solid #EEEEEE; display: flex; align-items: center; justify-content: space-between; padding: 0 20px 0 45px; background-color: #fff;  cursor:pointer; color: #464646 !important; padding-top: -1px; font-size: 18px; border-radius: 10px;}
.contact-form .radio-item input[type="radio"] + label:before{position:absolute; content:""; display:inline-block; box-sizing: border-box; background-color: #fff; width:17px; height:17px; border:1px solid #A1A1A1; border-radius: 2px; left: 20px; top: 50%; transform: translate(0, -50%);}
.contact-form .radio-item input[type="radio"] + label:hover,
.contact-form .radio-item input[type="radio"]:checked + label {color: #202020 !important; border: 1px solid #00B896; background-color: #E4F3F2; transition: all 0.3s;}
.contact-form .radio-item input[type="radio"] + label:hover:before,
.contact-form .radio-item input[type="radio"]:checked + label:before {content:""; background-color: #00B896; border: 1px solid #00B896; background-image: url('../img/chk.svg'); background-repeat: no-repeat; background-position: 50%;}

.started-form .checkbox-area {display: flex; flex-wrap: wrap; gap: 10px; flex-wrap: wrap;}
.started-form .checkbox-item input[type="checkbox"] {display:none;}
.started-form .checkbox-item input[type="checkbox"] + label{position: relative; width: 100%; height: 38px; border: 1px solid #E2E6EF; display: flex; align-items: center; column-gap: 6px; justify-content: space-between; padding: 0 20px;  cursor:pointer; color: #373737 ;font-size: 15px; border-radius: 100px; background-color: #F7F8FC;}
.started-form .checkbox-item input[type="checkbox"] + label:hover,
.started-form .checkbox-item input[type="checkbox"]:checked + label {color: #2461E9 !important; border: 1px solid #2461E9; transition: all 0.3s;}

.started-form .radio-area {display: flex; flex-wrap: wrap; gap: 10px; flex-wrap: wrap;}
.started-form .radio-item input[type="radio"] {display:none;}
.started-form .radio-item input[type="radio"] + label{position: relative; width: 100%; height: 38px; border: 1px solid #E2E6EF; display: flex; align-items: center; justify-content: space-between; padding: 0 20px;  cursor:pointer; color: #373737 ;font-size: 15px; border-radius: 100px; background-color: #F7F8FC;}
.started-form .radio-item input[type="radio"] + label:hover,
.started-form .radio-item input[type="radio"]:checked + label {color: #2461E9 !important; border: 1px solid #2461E9; transition: all 0.3s;}

.started-form .add-radio-area {flex-direction: column; row-gap: 16px;}
.started-form .add-radio-area .radio-item {display: flex; align-items: center; column-gap: 20px;}
.started-form .add-radio-area .radio-item input[type="text"] {width: 100%; height: 44px; background-color: #fff; border: 1px solid #EEEEEE; padding: 12px 20px; color: #000000; font-size: 15px; font-weight: 500; border-radius: 10px; outline: none; box-shadow: none;}
.started-form .add-radio-area .radio-item input[type="text"]::placeholder {color: #9A9A9A;}
.started-form .add-radio-area .radio-item input[type="radio"] + label {width: fit-content; border-radius: 10px;}

.checkbox-style-2.checkbox-area {display: flex; flex-wrap: wrap; column-gap: 24px; row-gap: 12px;}
.checkbox-style-2.checkbox-area .checkbox-item {width: calc(100% / 2 - 12px);}
.checkbox-style-2 .checkbox-item input[type="checkbox"] {display:none;}
.checkbox-style-2 .checkbox-item input[type="checkbox"] + label{position: relative; width: 100%; height: 66px; border: 1px solid #E0E0E0; background-color: #fff; display: flex; align-items: center; column-gap: 6px; justify-content: space-between; padding: 0 43px; cursor:pointer; color: #000;  font-size: 15px; border-radius: 10px;}
.checkbox-style-2 .checkbox-item input[type="checkbox"] + label .icon {column-gap: 10px; color: #000;}
.checkbox-style-2 .checkbox-item input[type="checkbox"] + label .price {font-weight: 600;}
.checkbox-style-2 .checkbox-item input[type="checkbox"] + label:hover,
.checkbox-style-2 .checkbox-item input[type="checkbox"]:checked + label {background-color: #F7F8FC; color: #000 !important; border: 1px solid #2461E9; transition: all 0.3s;}

.fileupload-item {display: flex; align-items: center; column-gap: 10px;}
.fileupload-item input[type=file]::file-selector-button {display: none;}
.fileupload-item input[type=file] {width: calc(100% - 130px) !important; border: 1px solid #eee !important; background-color: #fff !important; padding: 0 20px !important; line-height: 44px;}
.fileupload-item label {width: 120px;height: 44px;line-height:44px;background: #000; border-radius: 10px; color: #fff;display: flex;align-items: center;justify-content: center;cursor: pointer; font-size: 15px; column-gap: 10px;}
.fileupload-item label svg {width: 16px;}
.fileupload-item .file_del {width: 100%; display: flex; align-items: center; column-gap: 10px;}
.fileupload-item .file_del label {width: 100%; background-color: #EEE; color: #656565;}
.fileupload-item .file_del input[type="checkbox"] {width: 44px !important; height: 44px;}

/* input layout */
.input-box,
.input-area {display: flex; flex-direction: column; row-gap: 30px;}
.input-area .input_multi,
.input-area .input_triple {width: 100%; display: flex; column-gap: 30px;}
.input-area .input_multi > div {width: calc(100% / 2);}
.input-area .input_triple > div {width: calc(100% / 3);}
.input-area .input-item {width: 100%;}
.input-area .input-item > span {position: relative; display: inline-block; font-size: 15px; font-weight: 500; padding-bottom: 10px;}
.input-area .input-item.must > span::after {position: absolute; top: -2px; right: -11px; font-size: 18px; content: '*'; color: #00B896;}
.input-area .input-item.checkbox-area {display: flex; flex-direction: column; row-gap: 10px; padding-top: 30px;}
.input-area .input-item .input-item-area {display: flex; column-gap: 10px;}
.input-area .input-item .input-item-area input,
.input-area .input-item .input-item-area select,
.input-area .input-item .input-item-area.textarea-area textarea,
.input-area .input-item .input-item-area.fileupload-item .span-upload {width: 100%; height: 44px; background-color: #fff; border: 1px solid #EEEEEE; padding: 12px 20px; color: #000000; font-size: 15px; font-weight: 500; border-radius: 10px; outline: none; box-shadow: none;}
.input-area .input-item .input-item-area input:focus,
.input-area .input-item .input-item-area select:focus,
.input-area .input-item .input-item-area.link-item-area input:focus,
.input-area .input-item .input-item-area.textarea-area textarea:focus {border: 1px solid #2461E9; transition: all 0.3s;}
.input-area .input-item .input-item-area input::placeholder,
.input-area .input-item .input-item-area select::placeholder,
.input-area .input-item .input-item-area.link-item-area input::placeholder,
.input-area .input-item .input-item-area.textarea-area textarea::placeholder {color: #9A9A9A;}
.input-area .input-item .input-item-area select {padding:0 42px 0 20px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis; outline: none;appearance: none;}
.input-area .input-item .input-item-area.textarea-area textarea {height: 120px; resize: none; white-space: pre-line;}
.input-area .input-item .input-item-area.textarea-area .wr_content {width: 100%;}
.input-area .input-item .input-item-area.fileupload-item {flex-wrap: wrap; row-gap: 20px;}
.input-area .input-item .input-item-area.radio-area {display: flex; align-items: center; column-gap: 10px;}
.input-area .input-item .input-item-area.radio-area .radio-item {width: 50%;}
.input-area .input-item .input-item-area.link-item-area {position: relative;}
.input-area .input-item .input-item-area.link-item-area label {position: absolute; top: 50%; left: 20px; transform: translate(0, -50%); width: 30px; height: 30px; background-color: #555; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.input-area .input-item .input-item-area.link-item-area input {border: 1px solid #ebebeb; padding: 16px 20px 16px 62px;}
.input-area .input-item .input-item-area.phone-item-area .select-item {width: 130px; flex-shrink: 0;}
.input-area .select-item {position: relative; cursor: pointer;}
.input-area .select-item svg {position: absolute; top: 50%; right: 20px; transform: translate(0, -50%) rotate(0deg); transition: transform 0.3s ease; pointer-events: none;}
.input-area .select-item:focus-within svg {transform: translate(0, -50%) rotate(180deg);}

.input-cont .sticky-area {display: flex; align-items: flex-start; column-gap: 22px;}
.input-cont .sticky-area .input-box,
.input-cont .sticky-area .tab-area {width: 67.2%;}
.input-cont .sticky-area .sticky-box {width: 32.8%; position: sticky; top: 80px;}
.input-cont .input-card {background-color: #fff; border-radius: 10px; border: 1px solid #eee; padding: 30px; box-shadow: 0 4px 10px rgba(204, 204, 204, 0.25);}
.input-cont .input-group > .green {color: #00B896; padding-bottom: 10px; font-family: 'Roboto Mono', monospace; font-weight: 500;}
.input-cont .input-group > h3 {margin-bottom: 40px; font-size: 24px;}
.input-cont .submit-btn-area {display: flex; flex-direction: column; align-items: center; row-gap: 12px; margin-top: 40px;}
.input-cont .submit-btn-area .btn-submit {width: 100%; height: 64px; display: flex; align-items: center; justify-content: center; column-gap: 10px; padding: 0 12px; text-transform: uppercase; font-size: 20px; font-weight: 500; color: #fff; background-color: #0D1F3C; border-radius: 10px;}
.input-cont .submit-btn-area p {display: flex; align-items: center; column-gap: 10px; color: #6E6E6E;}
.input-cont .submit-btn-area p svg {flex-shrink: 0;}

#bo_w .btn-area {display: flex; justify-content: center; align-items: center; column-gap: 20px; margin-top: 60px;}
#bo_w .btn-area .round-btn {border: 1px solid #000;}

.sub-visual {display: flex; align-items: flex-start; justify-content: space-between; padding: 60px 0 103px 0; column-gap: 60px;}
.sub-visual .img-wrap {display: block; width: 619px; height: 100%; aspect-ratio: 619/619; border-radius: 50px; transition: background-size 0.6s cubic-bezier(0.22, 1, 0.36, 1);}
.sub-visual.business .img-wrap {background: url(../img/sub/sub-business_bg.webp) no-repeat center center / cover;}
.sub-visual.ecommerce .img-wrap {background: url(../img/sub/sub-ecommerce_bg.webp) no-repeat center center / cover;}
.sub-visual.erp .img-wrap {background: url(../img/sub/sub-erp_bg.webp) no-repeat center center / cover;}
.sub-visual.platform .img-wrap {background: url(../img/sub/sub-platform_bg.webp) no-repeat center center / cover;}
.sub-visual.website .img-wrap {background: url(../img/sub/sub-website_bg.webp) no-repeat center center / cover;}
.sub-visual.about .img-wrap {background: url(../img/sub/sub-about_bg.webp) no-repeat center center / cover;}
.sub-visual .info {padding-top: 40px;}
.sub-visual .info .btn-green {color: #047857; background-color:#ECFDF5;}
.sub-visual h2 {font-size: 64px; line-height: 84px; font-weight: 700; padding-top: 58px; padding-bottom: 33px;}
.sub-visual h2.gray {font-size: 20px; line-height: 1.5; font-weight: 400; padding-top: 0; padding-bottom: 0;}
.sub-visual .btn-area {margin-top: 73px;}
.sub-visual .btn-square{position:relative;display:flex;column-gap:10px;align-items:center;justify-content:center;overflow:hidden;z-index:1;color:#fff;font-weight:500;background-color:#111827;border:3px solid #111827;padding:20px 30px;font-size:20px;transition:color .35s ease,border-color .35s ease,background-color .35s ease;}
.sub-visual .btn-square::before{content:"";position:absolute;inset:0;background-color:#1F2937;transform:scaleX(0);transform-origin:left center;transition:transform .45s ease;z-index:-1;}
.sub-visual .btn-square:hover::before{transform:scaleX(1);transform-origin:left center;}
.sub-visual .btn-square:not(:hover)::before{transform-origin:right center;}
.sub-visual .btn-square svg,
.sub-visual .btn-square span,
.sub-visual .btn-square i{position:relative;z-index:2;}
.sub-visual .btn-square.bg-white{background-color:#fff;color:#111827;border-color:#111827;}
.sub-visual .btn-square.bg-white::before{background-color:#111827;}
.sub-visual .btn-square.bg-white:hover{color:#fff;}
.sub-visual .btn-square.bg-white svg path{fill:#111827;transition:fill .35s ease;}
.sub-visual .btn-square.bg-white:hover svg path{fill:#fff;}
.sub-visual .btn-square svg path{transition:fill .35s ease;}

.sub-violet {color: #9D43F0 !important;}
.sub-violet_bg {background-color: #9D43F0 !important;}
.sub-lightviolet_bg {background-color: #FAF5FF !important;}
.sub-lightviolet-card {background-color: #fff; border: 1px solid #E9D5FF !important;}
.sub-blue {color: #2F71F0 !important;}
.sub-blue_bg {background-color: #2F71F0 !important;}
.sub-lightblue_bg {background-color: #EFF6FF !important;}
.sub-lightblue-card {background-color: #fff; border: 1px solid #9ABDFF !important;}
.sub-mint {color: #06B2D0 !important;}
.sub-mint_bg {background-color: #06B2D0 !important;}
.sub-lightmint_bg {background-color: #ECFEFF !important;}
.sub-lightmint-card {background-color: #fff; border: 1px solid #B3ECF6 !important;}
.sub-blueViolet {color: #5C5CED !important;}
.sub-blueViolet_bg {background-color: #5C5CED !important;}
.sub-lightblueViolet_bg {background-color: #EEF2FF !important;}
.sub-lightblueViolet-card {background-color: #fff; border: 1px solid #ABABF2 !important;}

/* 커밍쑨 */
.commingsoon-cont .flex {max-width: 914px; width: calc(100% - 32px); margin: 0 auto; padding: 180px 0; display: flex; column-gap: 52px; align-items: center;}
.commingsoon-cont .flex .info {display: flex; flex-direction: column; row-gap: 10px;}
.commingsoon-cont .flex .info h2 {font-size: 40px; font-weight: 600;}
.commingsoon-cont .flex .info .round-btn {background-color: #DDEFFF; margin-top: 30px;}

/* business */
.business-cont .tit {margin-bottom: 40px;}
.business-cont .section01 ul li {display: flex; flex-direction: column; justify-content: center; row-gap: 20px; height: 490px; padding: 40px; border: 1px solid #E8E8E8;}
.business-cont .section01 ul li h3 {padding-top: 20px;}
.business-cont .section02 ul {column-gap: 32px; row-gap: 60px;}
.business-cont .section02 ul li {width: calc(100% / 2 - 16px); display: flex; align-items: center; column-gap: 20px;}
.business-cont .section02 ul li .icon {width: 129px; height: 129px; flex-shrink: 0;}
.business-cont .section02 ul li .text {display: flex; flex-direction: column; row-gap: 10px;}
.business-cont .section03 .tit h2,
.business-cont .section03 h5,
.business-cont .section03 span {color: #fff;}
.business-cont .section03 .tit p {color: #898989;}
.business-cont .section03 ul {display: flex; align-items: center; justify-content: space-between;}
.business-cont .section03 ul li.circle {aspect-ratio: 1/1; width: 9vw; height: 9vw; border-radius: 50%; display: flex; align-items: center; flex-direction: column; justify-content: center;}
.business-cont .section03 ul li.circle span {font-size: 2.2vw;}
.business-cont .section03 ul li.circle h5 {font-size: 1vw;}
.business-cont .section03 ul li.line {width: 6.5vw; height: 0.4vw;}
.business-cont .section04 ul li {height: 466px; border-radius: 30px; overflow: hidden;}

/* ecommerce */
.ecommerce-cont .section01 .card {padding: 40px 60px; display: flex; align-items: center; justify-content: space-between; column-gap: 10px; border: 2px solid #E8E8E8;}
.ecommerce-cont .section01 .card li {display: flex; flex-direction: column; align-items: center; row-gap: 20px; text-align: center;}
.ecommerce-cont .section01 .card li .icon {width: 120px; height: 120px; border-radius: 20px;}
.ecommerce-cont .section02 .card {padding: 60px;}
.ecommerce-cont .section02 .card.bg-dark h3,
.ecommerce-cont .section02 .card.bg-dark p,
.ecommerce-cont .section02 .card.bg-green h3,
.ecommerce-cont .section02 .card.bg-green p {color: #fff;}
.ecommerce-cont .section02 .card.bg-dark .btn-circle {color: #fff; background-color: #303845;}
.ecommerce-cont .section02 .card.bg-green {background-color: transparent; background: linear-gradient(to right, #059468 , #047957);}
.ecommerce-cont .section02 .card.bg-green .btn-circle {color: #fff; background-color: #379F80;}
.ecommerce-cont .section03 .card {box-shadow: 4px 4px 4px 2px rgba(173, 173, 173, 0.25); border: 1px solid #E8E8E8;}
.ecommerce-cont .section04 .inner {padding: 200px 0;}
.ecommerce-cont .section04 .bg-dark {padding: 80px 20px; border-radius: 30px;}
.ecommerce-cont .section04 .bg-dark .tit {text-align: center; color: #fff; margin-bottom: 50px;}
.ecommerce-cont .section04 .bg-dark ul {display: flex; align-items: center;}
.ecommerce-cont .section04 .bg-dark ul li {width: calc(100% / 4); display: flex; align-items: center; justify-content: center; flex-direction: column; row-gap: 10px;}
.ecommerce-cont .section04 .bg-dark ul li span {font-size: 48px; font-weight: 700;}
.ecommerce-cont .section04 .bg-dark ul li h3 {color: #fff;}

/* erp */
.erp-cont .section01 ul li {height: 360px; display: flex; flex-direction: column; row-gap: 16px; justify-content: center; padding: 0 50px;}
.erp-cont .section01 ul li p {font-size: 18px; line-height: 30px;}
.erp-cont .section01 ul li svg {flex-shrink: 0;}
.erp-cont .section02 ul {column-gap: 24px; row-gap: 40px;}
.erp-cont .section02 ul .card {height: 400px; display: flex; flex-direction: column; row-gap: 30px; padding: 50px 40px;}
.erp-cont .section02 ul .card img {width: fit-content;}
.erp-cont .section02 ul .card .text p {padding-top: 10px;}
.erp-cont .section02 ul .card .btn-area {column-gap: 20px; flex-wrap: wrap; row-gap: 8px;}
.erp-cont .section02 ul .card .btn-circle {border-radius: 10px;}
.erp-cont .section03 .card {padding: 50px 56px; display: flex; flex-direction: column; row-gap: 50px; border: 2px solid #E8E8E8;}
.erp-cont .section03 .card > li {background-color: #E8E8E8; border-radius: 30px; padding: 30px 72px;}
.erp-cont .section03 .card > li .bullet {display: flex; column-gap: 16px; align-items: center; font-weight: 500; margin-bottom: 20px;}
.erp-cont .section03 .card > li .bullet span {width: 14px; height: 14px; border-radius: 50%; background-color: #059166; flex-shrink: 0;}
.erp-cont .section03 .card > li .flex {width: 100%; display: flex; column-gap: 47px;}
.erp-cont .section03 .card > li .flex p {font-size: 15px; font-weight: 500;}
.erp-cont .section03 .card > li .flex span.green {font-size: 18px; font-weight: 500;}
.erp-cont .section03 .card > li .flex li {flex: 1; background-color: #fff; border-radius: 10px; display: flex; flex-direction: column; row-gap: 10px; align-items: center; justify-content: center;}
.erp-cont .section03 .card > li:nth-of-type(1) .flex li {padding: 16px;}
.erp-cont .section03 .card > li:nth-of-type(2) .flex {column-gap: 28px;}
.erp-cont .section03 .card > li:nth-of-type(2) .flex li {padding: 30px;}
.erp-cont .section03 .card > li:nth-of-type(3) .flex {column-gap: 60px;}
.erp-cont .section03 .card > li:nth-of-type(3) .flex li {padding: 12px;}

/* platform */
.platform-cont .section01 ul .card {padding: 50px 50px 40px;}
.platform-cont .section02 > .card {padding: 40px 55px; display: flex; column-gap: 60px; row-gap: 40px; flex-wrap: wrap}
.platform-cont .section02 ul li:not(:last-of-type) {width: calc(100% / 4 - 46px); height: 386px; padding: 0 3.4vw; display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 30px; align-items: flex-start; border: 1px solid #7D7D7D !important; background-color: #2D3442 !important;}
.platform-cont .section02 ul li:not(:last-of-type) h3 {color: #fff; font-weight: 500;}
.platform-cont .section02 ul li:not(:last-of-type) .list {display: flex; flex-direction: column; row-gap: 18px;}
.platform-cont .section02 ul li:not(:last-of-type) .bullet {display: flex; column-gap: 10px; align-items: flex-start; color: #fff; font-size: 16px;}
.platform-cont .section02 ul li:not(:last-of-type) .bullet span {display: block; width: 8px; height: 8px; margin-top: 5px; border-radius: 50%;}
.platform-cont .section02 ul li:not(:last-of-type) .bullet.violet span {background-color: #C88CFF;}
.platform-cont .section02 ul li:not(:last-of-type) .bullet.blue span {background-color: #98BFFF;}
.platform-cont .section02 ul li:not(:last-of-type) .bullet.mint span {background-color: #B5E9F2;}
.platform-cont .section02 ul li:not(:last-of-type) .bullet.blueViolet span {background-color: #9D9FFF;}
.platform-cont .section02 ul li:last-of-type {width: 100%; display: flex; align-items: center; justify-content: center; column-gap: 30px;}
.platform-cont .section02 ul li:last-of-type h3 {font-weight: 500; flex-shrink: 0;}
.platform-cont .section02 ul li:last-of-type .gradient-line {display: block; width: 33vw; height: 1px; background: linear-gradient(to right, rgba(157, 94, 240, 0) 0%, rgba(157, 94, 240, 1) 50%, rgba(157, 94, 240, 0) 100%);}
.platform-cont .section03 ul {display: flex; column-gap: 24px;}
.platform-cont .section03 ul li {width: 35%; border-radius: 30px; overflow: hidden;}
.platform-cont .section03 ul li img {width: 100%; height: 100%; object-fit: cover;}
.platform-cont .section03 ul li:nth-of-type(1) {width: 65%;}

/* website */
.website-cont .section01 ul .card {padding: 50px 50px 40px; display: flex; align-items: flex-start; column-gap: 40px;}
.website-cont .section02 ul li .icon {width: 80px; height: 80px; border-radius: 10px;}
.website-cont .section02 ul li.icon-green .icon {background-color: #D1FAE5;}
.website-cont .section02 ul li.icon-blue .icon {background-color: #DBEAFE;}
.website-cont .section02 ul li.icon-violet .icon {background-color: #F3E8FF;}
.website-cont .section02 ul li {display: flex; flex-direction: column; align-items: flex-start; row-gap: 30px; }
.website-cont .section02 ul li h3 {padding-bottom: 10px;}
.website-cont .section03 .card-wrapper {align-items: center;}
.website-cont .section03 .card {width: 410px; height: fit-content; border-radius: 10px; background-color: #fff; border: 1px solid #e0e0e0; padding: 60px 20px;}
.website-cont .section03 .card.popular {border: 1px solid transparent; background:linear-gradient(#fff, #fff) padding-box, linear-gradient(to bottom, #2461E9, #143783) border-box;}
.website-cont .section03 .card.popular .btn-area {width: 100%; display: flex; justify-content: flex-end; margin-bottom: 20px;}
.website-cont .section03 .card .popular-btn {font-size: 14px; color: #fff; padding: 4px 10px; border-radius: 100px; background: linear-gradient(to right, #598DFF, #3134FF);}
.website-cont .section03 .card .top-info {padding-bottom: 30px; border-bottom: 1px solid #E0E0E0;}
.website-cont .section03 .card .top-info .plan-name {display: inline-block; font-size: 20px; font-weight: 600; margin-bottom: 8px;}
.website-cont .section03 .card .top-info p {font-size: 16px; font-weight: 400; color: #777; margin-bottom: 20px;}
.website-cont .section03 .card .top-info .price {display: inline-block; font-size: 24px; font-weight: 600; margin-bottom: 8px;}
.website-cont .section03 .card .top-info .gray {margin-bottom: 0;}
.website-cont .section03 .card .bot-info  {padding-top: 30px; display: flex; flex-direction: column; row-gap: 14px; margin-bottom: 50px;}
.website-cont .section03 .card .bot-info li {display: flex; align-items: center; column-gap: 10px; color: #575757;}
.website-cont .section03 .card .bot-info li .check-icon {width: 24px; height: 24px; border-radius: 50%; background-color: #E8F1FF; display: flex; align-items: center; justify-content: center;}
.website-cont .section03 .card .start-btn {width: 100%; background: #0B1C2D; display: flex; align-items: center; justify-content: center; column-gap: 10px; font-size: 16px; font-weight: 500; border-radius: 100px; padding: 10px;}
.website-cont .section03 .card .start-btn.navy-line {border: 1px solid #0B1C2D; color: #0B1C2D; background-color: #fff;}
.website-cont .section03 .swiper-btn-area {display: none;}
.website-cont .section03 .swiper-btn-area .swiper-button-next,
.website-cont .section03 .swiper-btn-area .swiper-button-prev {width: 30px !important; height: 48px !important; top: 27%;}
.website-cont .section03 .swiper-btn-area .swiper-button-prev {left: 4px; background: url(../img/main/arrow-left.svg) no-repeat center center / cover;}
.website-cont .section03 .swiper-btn-area .swiper-button-next {right: 4px; background: url(../img/main/arrow-right.svg) no-repeat center center / cover;}
.website-cont .section03 .swiper-btn-area .swiper-button-next:after,
.website-cont .section03 .swiper-btn-area .swiper-rtl .swiper-button-prev:after,
.website-cont .section03 .swiper-btn-area .swiper-button-prev:after,
.website-cont .section03 .swiper-btn-area .swiper-rtl .swiper-button-next:after {content: '' !important;}
.website-cont .section03 .plan-add {width: 100%; margin-top: 30px; border-left: 0; border-right: 0;}
.website-cont .section03 .plan-add > span {font-size: 20px; font-weight: 600;}
.website-cont .section03 .plan-add > p {font-size: 15px; color: #333; padding-top: 10px; padding-bottom: 30px;}
.website-cont .section03 .plan-add ul {display: flex; gap: 24px; flex-wrap: wrap;}
.website-cont .section03 .plan-add ul li {width: calc(100% / 2 - 12px); background-color: #fff; border: 1px solid #E0E0E0; border-radius: 10px; padding: 30px 43px; display: flex; align-items: center; justify-content: space-between;}
.website-cont .section03 .plan-add ul li .icon {display: flex; align-items: center; column-gap: 10px; font-size: 16px;}
.website-cont .section03 .plan-add ul li > p {font-size: 18px; font-weight: 600;}

.website-cont .section03 {padding: 60px 0;}
.website-cont .section03 .card-20 {border-radius: 20px; background-color: #fff; border: 1px solid #E2E2E2; padding: 40px;}
.website-cont .section03 > .inner {display: flex; flex-direction: column; row-gap: 50px;}
.website-cont .section03 > .inner .line {display: block; width: 100%; height: 1px; background-color: #E0E0E0;}
.website-cont .section03 > .inner > div .tit {margin-bottom: 50px;}

.website-cont .section03 .plan-cont .plan-card-area {display: flex; align-items: flex-end; column-gap: 10px;}
.website-cont .section03 .plan-cont .plan-card-area .info-top .grade {width: fit-content; padding: 6px 20px; background-color: #F1F3F7; color: #252B32; border-radius: 100px; font-size: 20px; font-weight: 500;}
.website-cont .section03 .plan-cont .plan-card-area .info-top {display: flex; flex-direction: column; row-gap: 20px; padding: 55px 20px 20px; background-color: #fff; border: 1px solid #EBEBEB; border-radius: 20px 20px 0 0;}
.website-cont .section03 .plan-cont .plan-card-area .info-top > div > p {font-size: 16px; color: #777; padding-top: 8px;}
.website-cont .section03 .plan-cont .plan-card-area .info-top > a {width: 100%; height: 44px; display: flex ; justify-content: center; align-items: center; font-size: 20px; font-weight: 500; color: #fff; border-radius: 10px; text-align: center; background-color: #2461E9;}
.website-cont .section03 .plan-cont .plan-card-area .table {display: flex; flex-direction: column;}
.website-cont .section03 .plan-cont .plan-card-area .table > li {width: 100%; height: 50px; display: flex; justify-content: center; align-items: center; font-weight: 500; font-size: 15px; padding: 0 20px; background-color: #fff; border-bottom: 1px solid #EBEBEB;}
.website-cont .section03 .plan-cont .plan-card-area .table > li .circle {width: 30px; height: 30px; border-radius: 50%; background: #E8F1FF url(../img/check-blue.svg) no-repeat center center;}
.website-cont .section03 .plan-cont .plan-card-area .table > li .line-b {width: 10px; height: 2px; display: block; background-color: #1A1A1A;}
.website-cont .section03 .plan-cont .plan-card-area .table .mo-mode {display: none;}
.website-cont .section03 .plan-cont .plan-card-area .business {position: relative; border-radius: 20px 20px 0 0; border: 2px solid #2461E9;}
.website-cont .section03 .plan-cont .plan-card-area .business .popular{position: absolute; right: 20px; top: 20px; padding: 4px 10px; font-size: 14px; color: #fff; border-radius: 40px; background: linear-gradient(to right, #598DFF, #3134FF);}
.website-cont .section03 .plan-cont .plan-card-area .business .info-top .grade {background-color: #E6FAF8; color: #015E57;}
.website-cont .section03 .plan-cont .plan-card-area .business .info-top {border: 0;}
.website-cont .section03 .plan-cont .plan-card-area .overview {width: calc(100% / 4);}
.website-cont .section03 .plan-cont .plan-card-area .subscription-swiper {position: relative; width: calc(100% * 3 / 4);}
.website-cont .section03 .plan-cont .plan-card-area .subscription-swiper .swiper-btn-area {display: none;}
.website-cont .section03 .plan-cont .plan-card-area .subscription-swiper .swiper-btn-area .swiper-button-next,
.website-cont .section03 .plan-cont .plan-card-area .subscription-swiper .swiper-btn-area .swiper-button-prev {width: 30px !important; height: 48px !important;}
.website-cont .section03 .plan-cont .plan-card-area .subscription-swiper .swiper-btn-area .swiper-button-prev {left: 4px; background: url(../img/main/arrow-left.svg) no-repeat center center / cover;}
.website-cont .section03 .plan-cont .plan-card-area .subscription-swiper .swiper-btn-area .swiper-button-next {right: 4px; background: url(../img/main/arrow-right.svg) no-repeat center center / cover;}
.website-cont .section03 .plan-cont .plan-card-area .subscription-swiper .swiper-btn-area .swiper-button-next:after,
.website-cont .section03 .plan-cont .plan-card-area .subscription-swiper .swiper-btn-area .swiper-rtl .swiper-button-prev:after,
.website-cont .section03 .plan-cont .plan-card-area .subscription-swiper .swiper-btn-area .swiper-button-prev:after,
.website-cont .section03 .plan-cont .plan-card-area .subscription-swiper .swiper-btn-area .swiper-rtl .swiper-button-next:after {content: '' !important;}
.website-cont .section03 .plan-cont .plan-card-area .overview .table > li {font-size: 17px; justify-content: flex-start; font-weight: 600;}
.website-cont .section03 .plan-cont .plan-card-area .overview .table > li:nth-of-type(1) {background-color: transparent; border-bottom: 0; font-size: 15px; font-weight: 500; color: #aaa; padding: 0 30px;}
.website-cont .section03 .plan-cont .plan-card-area .business .table > li {background-color: #EBF1FD; border-bottom: 0;}
.website-cont .section03 .plan-cont .plan-card-area .business .table > li .circle {background: #A7F22E url(../img/check-black.svg) no-repeat center center;}
.website-cont .section03 .plan-cont .plan-card-area .pro .info-top .grade {background-color: #FFF3BE; color: #9F5521;}

.website-cont .section03 .payment-cont .icon-tit {display: flex; align-items: center; column-gap: 10px; flex-wrap: wrap; row-gap: 14px;}
.website-cont .section03 .payment-cont .icon-tit .icon {width: 50px; height: 50px; border-radius: 10px; background-color: #EBF1FD;}
.website-cont .section03 .payment-cont .icon-tit h3 {font-weight: 500;}
.website-cont .section03 .payment-cont .icon-tit h3 {color: #464646;}
.website-cont .section03 .payment-cont .card-20 {display: flex; flex-direction: column; row-gap: 30px; align-items: flex-start;}
.website-cont .section03 .payment-cont .card-20 > ul {width: 100%; display: flex; flex-direction: column; row-gap: 20px;}
.website-cont .section03 .payment-cont .card-20 > ul .arrow-bullet {width: 100%; display: flex; align-items: center; column-gap: 10px; font-size: 15px;} 
.website-cont .section03 .payment-cont .price-wrap {width: 100%;}
.website-cont .section03 .payment-cont .price-wrap > span {margin-bottom: 16px;}
.website-cont .section03 .payment-cont .price-wrap ul {width: 100%; display: flex; flex-direction: column; row-gap: 10px;}
.website-cont .section03 .payment-cont .price-wrap ul li {width: 100%; height: 60px; display: flex; justify-content: space-between; align-items: center; padding: 0 30px; border: 1px solid #E2E2E2; border-radius: 10px;}
.website-cont .section03 .payment-cont .price-wrap ul li:hover {border: 1px solid #2461E9; transition: all 0.2s; box-shadow: 0 4px 10px rgba(19, 98, 235, 0.2);}
.website-cont .section03 .payment-cont .price-wrap ul li:hover span:nth-of-type(1) {color: #2461E9; transition: all 0.2s;}

.website-cont .section03 .add-cont .card-20 {display: flex; align-items: center; column-gap: 30px;}
.website-cont .section03 .add-cont .card-20 .icon {width: 50px; height: 50px; border-radius: 10px; background-color: #EBF1FD; }
.website-cont .section03 .add-cont .card-20 .info {display: flex; flex-direction: column; row-gap: 10px;}
.website-cont .section03 .add-cont .card-20 .info span:not(.blue) {font-size: 18px; font-weight: 500;}
.website-cont .section03 .add-cont .card-20 .info span.blue {color: #2461E9;}
.website-cont .section03 .add-cont .card-20:hover {border: 1px solid #2461E9; transition: all 0.2s; box-shadow: 0 4px 10px rgba(19, 98, 235, 0.2);}
.website-cont .section03 .add-cont .card-20:hover .icon {background-color: #2461E9; transition: all 0.2s;}
.website-cont .section03 .add-cont .card-20:hover .icon svg path {fill: #fff; transition: all 0.2s;}

.website-cont .section04 {margin: 48px 0;}
.website-cont .section04 .text-center {color: #fff; margin-bottom: 60px;}
.website-cont .section04 .inner > ul {display: flex; flex-direction: column; row-gap: 30px;}
.website-cont .section04 .inner > ul li {width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; row-gap: 10px; padding: 40px 0; border: 1px solid #4F5661; border-radius: 30px; background-color: #1F2937;}
.website-cont .section04 .inner > ul li h3,
.website-cont .section04 .inner > ul li p {color: #fff; width: calc(100% - 80px); max-width: 1030px;}

/* website-input-form */
.website-form.input-cont {background-color: #F9FAFB; padding: 120px 0 146px;}
.website-form.input-cont .sticky-top {display: flex; flex-direction: column; row-gap: 10px; margin-bottom: 30px;}
.website-form.input-cont .sticky-top > span {font-size: 15px; font-weight: 500;}
.website-form.input-cont .sticky-top .btn-area {display: flex; column-gap: 20px; align-items: center; row-gap: 10px;}
.website-form.input-cont .sticky-top .btn-area .round-bullet {height: 42px; margin-bottom: 0; flex-shrink: 0; text-align: center;}
.website-form.input-cont .sticky-top .btn-area .change-btn {display: flex; align-items: center; justify-content: center; background-color: #fff; border: 1px solid #E4E4E4; column-gap: 10px; text-align: center; width: 100%; height: 42px; padding: 0 20px; border-radius: 100px; font-size: 14px; color: #595959; align-items: center; }
.website-form.input-cont .sticky-bottom {width: 100%; border-radius: 20px; background-color: #FAFAFA; border: 1px solid #F5F5F5; padding: 20px; }
.website-form.input-cont .sticky-bottom p:not(.gray) {font-weight: 500; padding-bottom: 8px;}
.website-form.input-cont .sticky-bottom p.gray {color: #787878; font-size: 15px;}

.website-form.input-cont .input-box {display: flex; flex-direction: column; row-gap: 30px;}
.website-form.input-cont .input-box .input-top .input-area {flex-direction: row; flex-wrap: wrap; column-gap: 24px;}
.website-form.input-cont .input-box .input-top .input-area .input-item {width: calc(100% / 2 - 12px);}
.website-form.input-cont .input-box .input-top .input-area .input-item:last-of-type {width: 100%;}

/* about */
.sub-visual.about {align-items: center;}
.about .info h3 {font-size: 48px; font-weight: 700;}
.about .info span {font-size: 15px; color: #27BFA6; padding-top: 20px; padding-bottom: 60px;}
.about .info p {font-size: 15px;}
.about-cont p,
.about-cont span {line-height: 1.4;}
.about-cont .bg-dark .inner {display: flex; align-items: flex-start; column-gap: 30px; justify-content: space-between;}
.about-cont .aboutgreen {color: #27BFA6 !important;}
.about-cont .about-tit {font-family: 'Roboto Mono', monospace; font-weight: 500; font-size: 16px;}
.about-cont .about-flex {display: flex; flex-direction: column; row-gap: 20px;}
.about-cont .about-flex p {color: #fff; font-size: 15px; line-height: 1.4;}
.about-cont .about-flex h2 {font-size: 36px; color: #fff; font-family: 'Roboto Mono', monospace; font-weight: 500;} 
.about-cont .section01 .about-flex {max-width: 620px;}
.about-cont .section01 .about-flex h2 {padding-bottom: 40px;}
.about-cont .section01 .card-area {display: flex; flex-direction: column; align-items: flex-end;}
.about-cont .section01 .card-area .about-card {width: 332px; border: 1px solid #27BFA6; padding: 40px;}
.about-cont .section01 .card-area .about-card:nth-of-type(1) {margin-right: 270px;}
.about-cont .section01 .card-area .about-card:nth-of-type(2) {margin-top: -30px; margin-bottom: 42px;}
.about-cont .section01 .card-area .about-card:nth-of-type(3) {margin-right: 194px;}
.about-cont .section01 .card-area .about-card span {font-weight: 500; font-size: 20px; padding-bottom: 10px;}
.about-cont .section01 .card-area .about-card p {font-size: 15px; color: #fff;}
.about-cont .section02 .about-tit {padding-bottom: 8px;}
.about-cont .section02 .left {margin: 40px 0;}
.about-cont .section02 ul {display: flex; column-gap: 24px;}
.about-cont .section02 ul li {width: 362px; height: 300px; transition: all 0.3s; cursor: pointer; padding: 50px; background-color: #fff; border: 1px solid #D9D9D9;}
.about-cont .section02 ul li:hover {border: 1px solid #27BFA6; box-shadow: 0 8px 30px rgba(110, 110, 110, 0.2);}
.about-cont .section02 ul li:hover h3 {color: #27BFA6; transition: all 0.3s;}
.about-cont .section02 ul li h3 {font-size: 20px; font-weight: 500; padding-top: 30px;}
.about-cont .section02 ul.right {justify-content: flex-end;}
.about-cont .section02 ul.right li:nth-of-type(1) {border: 0; cursor: initial; background-color: transparent;}
.about-cont .section02 ul.right li:nth-of-type(1):hover {border: 0; box-shadow: none;}
.about-cont .section02 > p:last-of-type {font-size: 20px; text-align: right; padding-top: 40px;}
.about-cont .section03 {background-color: #fff; margin-bottom: 100px;}
.about-cont .section03 .inner {display: flex; column-gap: 30px; align-items: center; justify-content: space-between;}
.about-cont .section03 .left h2 {font-size: 40px; font-weight: 700; padding-bottom: 40px;}
.about-cont .section03 .left p {font-size: 20px;}
.about-cont .section03 .right {width: 620px; flex-shrink: 0; display: flex; flex-direction: column; row-gap: 6px; align-items: flex-start; justify-content: center; padding: 57px 50px; border-left: 7px solid #2CE5C3;}
.about-cont .section03 .right li {font-size: 18px; color: #262626;}
.about-cont .section03 .right li:nth-of-type(1) {font-weight: 500; padding-bottom: 14px; color: #000;}
.about-cont .section04 .about-flex {row-gap: 30px;}
.about-cont .section04 .about-tit {color: #fff;}
.about-cont .section05 {padding: 100px 0 120px 0;}
.about-cont .section05 .about-tit {padding-bottom: 40px;}
.about-cont .section05 > div {display: flex; align-items: flex-start; column-gap: 30px;}
.about-cont .section05 .map {width: 60%; flex-shrink: 0;}
.about-cont .section05 .map iframe {width: 100% !important;}
.about-cont .section05 .info {display: flex; flex-direction: column; row-gap: 40px;}
.about-cont .section05 .info li span {font-size: 16px; color: #A8A8A8; font-family: 'Roboto Mono', monospace;}
.about-cont .section05 .info li p {font-size: 18px; font-weight: 500; padding-top: 12px;}

/* 흔들림 */
.vibrate-1 {
	-webkit-animation: vibrate-1 5s linear infinite both;
	        animation: vibrate-1 5s linear infinite both;
}
.vibrate-1:hover,
.card:hover .vibrate-1 {
	animation-play-state: paused;
}
@-webkit-keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-5px, 5px);
            transform: translate(-5px, 5px);
  }
  40% {
    -webkit-transform: translate(-5px, -5px);
            transform: translate(-5px, -5px);
  }
  60% {
    -webkit-transform: translate(5px, 5px);
            transform: translate(5px, 5px);
  }
  80% {
    -webkit-transform: translate(5px, -5px);
            transform: translate(5px, -5px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes vibrate-1 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(-5px, 5px);
            transform: translate(-5px, 5px);
  }
  40% {
    -webkit-transform: translate(-5px, -5px);
            transform: translate(-5px, -5px);
  }
  60% {
    -webkit-transform: translate(5px, 5px);
            transform: translate(5px, 5px);
  }
  80% {
    -webkit-transform: translate(5px, -5px);
            transform: translate(5px, -5px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
.vibrate-2 {
	-webkit-animation: vibrate-2 5s linear infinite both;
	        animation: vibrate-2 5s linear infinite both;
}
.vibrate-2:hover {
	animation-play-state: paused;
}
@-webkit-keyframes vibrate-2 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(7px, -7px);
            transform: translate(7px, -7px);
  }
  40% {
    -webkit-transform: translate(7px, 7px);
            transform: translate(7px, 7px);
  }
  60% {
    -webkit-transform: translate(-7px, 7px);
            transform: translate(-7px, 7px);
  }
  80% {
    -webkit-transform: translate(-7px, -7px);
            transform: translate(-7px, -7px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}
@keyframes vibrate-2 {
  0% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
  20% {
    -webkit-transform: translate(7px, -7px);
            transform: translate(7px, -7px);
  }
  40% {
    -webkit-transform: translate(7px, 7px);
            transform: translate(7px, 7px);
  }
  60% {
    -webkit-transform: translate(-7px, 7px);
            transform: translate(-7px, 7px);
  }
  80% {
    -webkit-transform: translate(-7px, -7px);
            transform: translate(-7px, -7px);
  }
  100% {
    -webkit-transform: translate(0);
            transform: translate(0);
  }
}

/* pricing */
.pricing-cont .text-center > p.gray {font-size: 15px; color: #333; padding-top: 20px; padding-bottom: 70px; text-align: center;}
.pricing-cont .tab {display: inline-flex; justify-content: center; background-color: #fff; border: 1px solid #CFDEFF; overflow: hidden; margin-top: 40px; border-radius: 100px;}
.pricing-cont .tab a {font-size: 20px; font-weight: 500; padding: 16px 30px;}
.pricing-cont .tab a:hover {color: #2461E9; transition: 0.2s;}
.pricing-cont .tab-cont .text-center > p {font-size: 24px; font-weight: 600; text-align: center; text-transform: uppercase;}
.pricing-cont .card-section {background-color: #F4F6F8; padding: 60px 0;}
.pricing-cont .card-wrapper {align-items: center;}
.pricing-cont .card {width: 410px; height: fit-content; border-radius: 10px; background-color: #fff; border: 1px solid #e0e0e0; padding: 60px 20px;}
.pricing-cont .card.popular {border: 1px solid transparent; background:linear-gradient(#fff, #fff) padding-box, linear-gradient(to bottom, #2461E9, #143783) border-box;}
.pricing-cont .card.popular .btn-area {width: 100%; display: flex; justify-content: flex-end; margin-bottom: 20px;}
.pricing-cont .card .popular-btn {font-size: 14px; color: #fff; padding: 4px 10px; border-radius: 100px; background: linear-gradient(to right, #598DFF, #3134FF);}
.pricing-cont .card .top-info {padding-bottom: 30px; border-bottom: 1px solid #E0E0E0;}
.pricing-cont .card .top-info .plan-name {display: inline-block; font-size: 20px; font-weight: 600; margin-bottom: 8px;}
.pricing-cont .card .top-info p {font-size: 16px; font-weight: 400; color: #777; margin-bottom: 20px;}
.pricing-cont .card .top-info .price {display: inline-block; font-size: 24px; font-weight: 600; margin-bottom: 8px;}
.pricing-cont .card .top-info .gray {margin-bottom: 0;}
.pricing-cont .card .bot-info  {padding-top: 30px; display: flex; flex-direction: column; row-gap: 14px; margin-bottom: 50px;}
.pricing-cont .card .bot-info li {display: flex; align-items: center; column-gap: 10px; color: #575757;}
.pricing-cont .card .bot-info li .check-icon {width: 24px; height: 24px; border-radius: 50%; background-color: #E8F1FF; display: flex; align-items: center; justify-content: center;}
.pricing-cont .card .start-btn {width: 100%; background: #0B1C2D; display: flex; align-items: center; justify-content: center; column-gap: 10px; font-size: 16px; font-weight: 500; border-radius: 100px; padding: 10px;}
.pricing-cont .card .start-btn.navy-line {border: 1px solid #0B1C2D; color: #0B1C2D; background-color: #fff;}
.pricing-cont .swiper-btn-area {display: none;}
.pricing-cont .swiper-btn-area .swiper-button-next,
.pricing-cont .swiper-btn-area .swiper-button-prev {width: 30px !important; height: 48px !important; top: 24%;}
.pricing-cont .swiper-btn-area .swiper-button-prev {left: 4px; background: url(../img/main/arrow-left.svg) no-repeat center center / cover;}
.pricing-cont .swiper-btn-area .swiper-button-next {right: 4px; background: url(../img/main/arrow-right.svg) no-repeat center center / cover;}
.pricing-cont .swiper-btn-area .swiper-button-next:after,
.pricing-cont .swiper-btn-area .swiper-rtl .swiper-button-prev:after,
.pricing-cont .swiper-btn-area .swiper-button-prev:after,
.pricing-cont .swiper-btn-area .swiper-rtl .swiper-button-next:after {content: '' !important;}
.pricing-cont .plan-add {width: calc(100% - 60px) !important; padding-top: 50px; padding-bottom: 60px; border-left: 0; border-right: 0;}
.pricing-cont .plan-add > span {font-size: 20px; font-weight: 600;}
.pricing-cont .plan-add > p {font-size: 15px; color: #333; padding-top: 10px; padding-bottom: 30px;}
.pricing-cont .plan-add ul {display: flex; gap: 24px; flex-wrap: wrap;}
.pricing-cont .plan-add ul li {width: calc(100% / 2 - 12px); background-color: #fff; border: 1px solid #E0E0E0; border-radius: 10px; padding: 30px 43px; display: flex; align-items: center; justify-content: space-between;}
.pricing-cont .plan-add ul li .icon {display: flex; align-items: center; column-gap: 10px; font-size: 16px;}
.pricing-cont .plan-add ul li > p {font-size: 18px; font-weight: 600;}
.pricing-cont .tab-cont#section-packages .text-center {padding-bottom: 30px;}
.pricing-cont .tab-cont#section-plan {border-top: 1px solid #DFDFDF;}
.pricing-cont .tab-cont#section-plan > span {text-align: center; display: block;}
.pricing-cont .tab-cont#section-plan .text-center {padding-top: 100px; row-gap: 10px; padding-bottom: 60px;}
.pricing-cont .tab-cont#section-plan .text-center span {font-size: 16px; font-weight: 500;}
.pricing-cont .tab-cont#section-plan .text-center span.gray {line-height: 1.4; color: #4D4D4D; font-weight: 400;}
.pricing-cont .tab-cont#section-plan .card-wrapper {align-items: flex-start;}
.pricing-cont .tab-cont#section-plan .card {height: stretch;}
.pricing-cont .tab-cont#section-plan .card > p {padding: 18px 0; font-size: 15px; }
.pricing-cont .tab-cont#section-plan .card .top-info .plan-name {display: block; font-size: 18px; font-weight: 500; margin-bottom: 20px;}
.pricing-cont .tab-cont#section-plan .card .bot-info {row-gap: 30px; border-bottom: 1px solid #E0E0E0; padding-bottom: 36px; margin-bottom: 0px;}
.pricing-cont .tab-cont#section-plan .card .bot-info ul {display: flex; flex-direction: column; row-gap: 10px;}
.pricing-cont .tab-cont#section-plan .card .bot-info ul li:not(:last-of-type) {margin-bottom: 4px;}
.pricing-cont .tab-cont#section-plan .card .bot-info ul li:first-of-type {margin-bottom: 0; color: #141414;}
.pricing-cont .tab-cont#section-plan .card .start-btn {margin-top: 30px;}

/* get started - form */
.started-form .tit {display: flex; flex-direction: column; row-gap: 10px; align-items: center; text-align: center; margin-bottom: 0; padding: 60px 0;}
.started-form .tit .round-bullet {padding: 10px 20px; background-color: #F5F9FF; margin-bottom: 0;}
.started-form .tit > h2 b {font-weight: 700; color: #2461E9;}
.started-form .tit > p {padding: 10px 0;}
.started-form .tit .btn-area {gap: 10px; flex-wrap: wrap; justify-content: center;}
.started-form .tit .btn-area .round-bullet {font-size: 14px; color: #484848; border: 1px solid #D2D2D2; background-color: #F9FAFB;}
.started-form .tit .btn-area .round-bullet .circle {width: 10px; height: 10px; background-color: #059166;}

.started-form .sticky-area {padding: 60px 0 120px 0;}
.started-form .tab-area > p {padding-bottom: 10px; color: #4E4E4E; font-family: 'Roboto Mono', monospace;}
.started-form .tab-nav {display: flex; align-items: center; column-gap: 30px;}
.started-form .tab-nav .tab-item {position: relative; width: 50%; height: 200px; display: flex; align-items: center; column-gap: 30px; border: 1px solid #EEEEEE; border-radius: 10px; cursor: pointer; background-color: #ffff; box-shadow: 0 4px 10px rgba(204, 204, 204, 0.25); padding: 30px;}
.started-form .tab-nav .tab-item::after {position: absolute; width: 100%; height: 100%; border-radius: 10px; border: 2px solid rgba(36, 97, 233, 0.3); background-color: transparent; top: 0; left: 0; content: ''; opacity: 0; visibility: hidden;}
.started-form .tab-nav .tab-item .img-wrap {width: 50px; height: 50px; margin-top: -24px; flex-shrink: 0; border: 1px solid #E8E8E8; border-radius: 10px; overflow: hidden;}
.started-form .tab-nav .tab-item .text > h3 {position: relative; padding-bottom: 10px; color: #2C2C2C; font-size: 20px;}
.started-form .tab-nav .tab-item .text > h3::after {position: absolute; width: 26px; height: 26px; border-radius: 50%; background: #2461E9 url(../img/sub/check-icon.svg) no-repeat center center; content: ''; opacity: 0; visibility: hidden; right: 0; bottom: 10px;}
.started-form .tab-nav .tab-item .text > span {font-weight: 500; color: #919191;}
.started-form .tab-nav .tab-item.active,
.started-form .tab-nav .tab-item:hover {background-color: #F5F9FF; border: 1px solid transparent; transition: all 0.2s;}
.started-form .tab-nav .tab-item.active .text > h3,
.started-form .tab-nav .tab-item:hover .text > h3 {color: #2461E9; transition: all 0.2s;}
.started-form .tab-nav .tab-item:hover::after,
.started-form .tab-nav .tab-item.active::after,
.started-form .tab-nav .tab-item.active .text > h3::after,
.started-form .tab-nav .tab-item:hover .text > h3::after {opacity: 1; visibility: visible; transition: all 0.2s;}
.started-form .tab-wapper .input-box {width: 100%;}
.started-form .tab-wapper .tab-cont {display: none; flex-direction: column; row-gap: 30px; margin-top: 30px;}
.started-form .tab-wapper .tab-cont.active {display: flex;}
.started-form .input-group > h3 {margin-bottom: 10px; font-size: 24px;}
.started-form .input-group > span {display: block; font-size: 16px; color: #919191; padding-bottom: 20px; margin-bottom: 40px; border-bottom: 1px solid #E6ECF2;}
.started-form .input-area {flex-direction: row; flex-wrap: wrap; column-gap: 24px;}
.started-form .input-area .input-item {width: calc(100% / 2 - 12px);}
.started-form .input-area .input-item.w-100 {width: 100%;}
.started-form .input-area .input-item.must > span::after {color: #000;}
.started-form .input-area .num-item {width: 100%; display: flex; flex-direction: column; row-gap: 20px;}
.started-form .input-area .num-item .input-item {display: flex; column-gap: 30px; align-items: flex-start;}
.started-form .input-area .num-item .input-item > span {display: flex; align-items: center; column-gap: 10px; font-size: 18px; padding-bottom: 0; padding-top: 6px;}
.started-form .input-area .num-item .input-item > span .num {width: 26px; height: 26px; border-radius: 5px; background-color: #0D1F3C; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 14px;}
.started-form .sticky-box {display: flex; flex-direction: column; row-gap: 30px;}
.started-form .sticky-box ul {display: flex; flex-direction: column; row-gap: 20px;}
.started-form .sticky-box ul li:not(.line) {display: flex; align-items: flex-start; column-gap: 20px;}
.started-form .sticky-box ul li:not(.line) .icon {width: 40px; height: 40px; background-color: #E8F0FE; border-radius: 10px;}
.started-form .sticky-box ul li:not(.line) .info {color: #919191;}
.started-form .sticky-box ul li:not(.line) .info b {display: block; color: #000;}
.started-form .sticky-box ul li.line {width: 100%; height: 1px; background-color: #E6ECF2;}
.started-form .sticky-box .bg-dark {padding: 20px; border-radius: 20px; background-color: #13294B;}
.started-form .sticky-box .bg-dark p:not(.gray) {color: #fff; font-weight: 500; padding-bottom: 8px;}
.started-form .sticky-box .bg-dark p.gray {color: #DEDEDE;}


/* insights */
/* insights - list */
.insights-cont {width: calc(100% - 60px) !important; margin: 0 auto; padding: 0 0 180px 0;}
.insights-cont .btn_bo_user {position: relative; display: flex; align-items: center; column-gap: 10px; justify-content: flex-end; margin-bottom: 20px;}
.insights-cont .tit-text-center {padding-bottom: 60px;}
.insights-cont .insights-cate {display: flex; justify-content: center; align-items: center; column-gap: 18px; row-gap: 10px; flex-wrap: wrap; padding: 30px 0; margin-bottom: 80px; border-bottom: 1px solid #D9D9D9;}
.insights-cont .insights-cate li {padding: 6px 14px; border: 1px solid #000; border-radius: 40px; background-color: #fff; font-size: 14px;}
.insights-cont #gall_ul {display: flex; flex-wrap: wrap; column-gap: 40px; row-gap: 250px;}
.insights-cont #gall_ul li {width: calc(100% / 3 - 27px);}
.insights-cont #gall_ul li:nth-child(3n + 2) {margin-top: 60px;}
.insights-cont #gall_ul li:hover svg path {fill: #000; transition: all 0.2s;}
.insights-cont #gall_ul li .gall_img {width: 100%; height: 560px; border-radius: 20px; overflow: hidden;}
.insights-cont #gall_ul li .gall_img a {position: relative; width: 100%; height: 100%; cursor: none;}
.insights-cont #gall_ul li .gall_img a img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;}
.insights-cont #gall_ul li:hover .gall_img a img {transform: scale(1.05);}
.insights-cont #gall_ul li .gall_img a span.date {position: absolute; bottom: 20px; left: 20px; z-index: 1; background-color: #252525; padding: 6px 10px; border-radius: 40px; font-size: 10px; font-weight: 600; color: #fff;}
.insights-cont #gall_ul li .gall_con .gall_text_href {width: 100%; display: flex; flex-direction: column; row-gap: 10px; padding-top: 30px;}
.insights-cont #gall_ul li .gall_con .gall_text_href .bo-tit {font-size: 20px; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.insights-cont #gall_ul li .gall_con .gall_text_href .bo_cnt {font-size: 16px; color: #999; font-weight: 500; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis; margin-bottom: 20px;}

#custom-cursor {transition: opacity 0.2s, width 0.2s; opacity: 0; position: fixed; top: 0; left: 0; aspect-ratio: 1/1; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); z-index: 99999; cursor: none; display: flex; align-items: center; justify-content: center; flex-direction: column; row-gap: 6px; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.2); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);}
#custom-cursor span {color: #fff; font-size: 16px; font-weight: 700; font-family: 'Roboto Mono', monospace;}
#custom-cursor.click {opacity: 1; width: 80px;}

.inner-s .bo_v_nb {width: 100%; margin-top: 120px; display: flex; align-items: center; justify-content: space-between;}
.inner-s .bo_v_nb li:not(.list) a {display: flex; align-items: center; border: 1px solid #000; border-radius: 100px; padding: 10px 20px; column-gap: 10px;}
.inner-s .bo_v_nb li:not(.list) a span {font-size: 18px; text-transform: uppercase;}
.inner-s .bo_v_nb li.list {width: 266px; height: 55px;}
.inner-s .bo_v_nb li.list a {width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 500; text-transform: uppercase; background-color: #F4F4F4; border-radius: 100px;}
.inner-s .bo_v_nb .disabled {font-size: 0;}

/* insights - view */
.insights-cont .inner-s {max-width: 748px; width: 100%; margin: 0 auto;}
.insights-cont .inner-s header {display: flex; align-items: center; justify-content: center; row-gap: 20px; flex-direction: column; padding-top: 80px; margin-bottom: 90px; text-align: center;}
.insights-cont .inner-s header h2 {font-size: 24px; font-weight: 500; }
.insights-cont .inner-s header span.date {background-color: #252525; padding: 6px 10px; border-radius: 40px; font-size: 10px; font-weight: 600; color: #fff;}
.insights-cont .inner-s #bo_v_img {width: 100%; text-align: center;}
.insights-cont .inner-s #bo_v_img img {width: 100%; height: auto;}
.insights-cont .inner-s #bo_v_con {width: 100%;}
.insights-cont .inner-s #bo_v_atc {display: flex; align-items: center; justify-content: center; row-gap: 30px; flex-direction: column;}

/* portfolio */
.portfolio-cont .tit-text-center {padding-bottom: 78px;}
.portfolio-cont .portfolioSwiper {width: 100%; height: 100%; }
.portfolio-cont .portfolioSwiper .swiper-wrapper {transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);}
.portfolio-cont .gall_img {width: 100%; height: 100%; border-radius: 30px; overflow: hidden; cursor: none;}
.portfolio-cont .gall_img a {width: 100%; height: 32vw !important;}
.portfolio-cont .gall_img a img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; object-position: top;}
.portfolio-cont .gall_img a:hover img {transform: scale(1.05);}
.portfolio-cont .gall_text_href a {display: flex; flex-direction: column; row-gap: 14px; text-align: center; align-items: center; justify-content: center; padding-top: 30px;}
.portfolio-cont .gall_text_href a .bo-tit {font-size: 20px; font-weight: 500;}
.portfolio-cont .gall_text_href a .bo_cnt { display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.portfolio-cont .swiper-btn-area .swiper-button-next,
.portfolio-cont .swiper-btn-area .swiper-button-prev {width: 30px !important; height: 48px !important;}
.portfolio-cont .swiper-btn-area .swiper-button-prev {left: 10%; background: url(../img/main/arrow-left.svg) no-repeat center center / cover;}
.portfolio-cont .swiper-btn-area .swiper-button-next {right: 10%; background: url(../img/main/arrow-right.svg) no-repeat center center / cover;}
.portfolio-cont .swiper-btn-area .swiper-button-next:after,
.portfolio-cont .swiper-btn-area .swiper-rtl .swiper-button-prev:after,
.portfolio-cont .swiper-btn-area .swiper-button-prev:after,
.portfolio-cont .swiper-btn-area .swiper-rtl .swiper-button-next:after {content: '' !important;}

/* portfolio - view */
.portfolio-view::after,
.portfolio-view-cont .inner::after,
.portfolio-view-cont .inner::before {display: none;}
.portfolio-view-cont .project-pc {width: 70%; overflow: hidden; border-radius: 20px;}
.portfolio-view-cont .project-mo {width: 22%; overflow: hidden; border-radius: 20px;}
.portfolio-view-cont .project-pc img,
.portfolio-view-cont .project-mo img {width: 100%; height: 100%; object-fit: cover; object-position: top;}
.portfolio-view-cont ._bullet {display: flex; align-items: center; column-gap: 10px; font-size: 16px; color: #A7F22E; font-weight: 600; font-family: "DM Sans", sans-serif; text-transform: uppercase; font-weight: 600;}
.portfolio-view-cont ._bullet span {width: 20px; height: 1.5px; background-color: #A7F22E; display: block;}
.portfolio-view-cont .project-img-cont {display: flex; align-items: flex-start; column-gap: 80px; justify-content: space-between;}
.portfolio-view-cont .inner-s .bo_v_nb {margin-top: 0; padding: 60px 0;}
.portfolio-view-cont .title-area {padding: 60px 0;}
.portfolio-view-cont .title-area .nav {display: flex; column-gap: 12px; align-items: center;}
.portfolio-view-cont .title-area .nav .back a {display: flex; align-items: center; column-gap: 6px;}
.portfolio-view-cont .title-area .nav .back a svg {fill: transparent !important;}
.portfolio-view-cont .title-area .nav li {color: #9AA0B2; font-size: 12px; font-weight: 500;}
.portfolio-view-cont .title-area .nav li.circle {width: 3px; height: 3px; border-radius: 50%; background-color: #9AA0B2;}
.portfolio-view-cont .concept-area {display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 26px 0;}
.portfolio-view-cont .concept-area li {padding: 4px 12px; background-color: #F0F1F4; border: 1px solid rgba(11, 18, 32, 0.08); border-radius: 2px; color: #5A6278; font-size: 11px; font-weight: 500;}
.portfolio-view-cont .concept-area li.live {border: 1px solid rgba(101, 246, 101, 0.3); background-color: rgba(101, 246, 101, 0.12); color: #1A8A1A;}
.portfolio-view-cont .title-area .title {font-size: 96px; font-weight: 800; font-family: 'Roboto Mono', monospace; text-transform: uppercase; letter-spacing: -1px;}
.portfolio-view-cont .btn-area {width: 100%; display: flex; justify-content: flex-end; align-items: center; column-gap: 12px; margin-top: 20px;}
.portfolio-view-cont .btn-area a {display: flex; align-items: center; justify-content: center; height: 42px; padding: 0 22px; border-radius: 2px; font-size: 13px; font-weight: 500; color: #071421;border: 1px solid rgba(11, 18, 32, 0.14); background-color: #fff;}
.portfolio-view-cont .btn-area a.green{border: 1px solid #A7F22E; background-color: #A7F22E; }
.portfolio-view-cont .section-hero {background: url(../img/sub/hero-image.webp) no-repeat center center / cover; padding: 80px 0;}
.portfolio-view-cont .section-hero .project-pc {height: 424px;}
.portfolio-view-cont .section-hero .project-mo {height: 355px;}
.portfolio-view-cont .section-design {display: flex; flex-direction: column; row-gap: 120px; padding: 88px 0 120px 0;}
.portfolio-view-cont .section-design ._bullet {color: #000; padding-bottom: 20px;}
.portfolio-view-cont .section-design ._bullet span {background-color: #000;}
.portfolio-view-cont .section-design .project-pc,
.portfolio-view-cont .section-design .project-mo {border: 1px solid rgba(11, 18, 32, 0.08);}
.portfolio-view-cont .section-overview {padding: 60px 0;}
.portfolio-view-cont .section-overview .overview-top {display: flex; align-items: flex-start; justify-content: space-between; column-gap: 40px; margin-bottom: 64px;}
.portfolio-view-cont .section-overview .overview-top .tit {flex-shrink: 0; margin-bottom: 0;}
.portfolio-view-cont .section-overview .overview-top .tit > h2 {font-size: 48px; font-weight: 800; padding-top: 15px;}
.portfolio-view-cont .section-overview .overview-top .project-info {font-size: 17px; font-weight: 300; color: #5A6278; line-height: 1.6; max-width: 886px;}
.portfolio-view-cont .section-overview .project-detail {display: flex; align-items: flex-start;}
.portfolio-view-cont .section-overview .project-detail li {width: calc(100% / 4); height: stretch; padding: 32px 28px; border: 1px solid rgba(11, 18, 32, 0.08); border-left: 0 !important;}
.portfolio-view-cont .section-overview .project-detail li:nth-of-type(1) {border-left: 1px solid rgba(11, 18, 32, 0.08) !important;}
.portfolio-view-cont .section-overview .project-detail li > span {color: #9AA0B2; font-size: 10px; font-weight: 600; padding-bottom: 13px;}
.portfolio-view-cont .section-overview .project-detail li > p {color: #0B1220; font-weight: 700; font-size: 17px;}

.portfolio-view-cont .section-process .tit h2 {font-size: 48px; color: #fff; font-weight: 800; padding-top: 10px;}
.portfolio-view-cont .section-process ul {display: flex; align-items: flex-start; margin-top: 60px;}
.portfolio-view-cont .section-process ul li {position: relative; display: flex; flex-direction: column; row-gap: 10px;}
.portfolio-view-cont .section-process ul li::after {position: absolute; width: 100%; height: 1px; background-color: rgba(255, 255, 255, 0.1); left: 0; top: 32px; display: block; content: '';}
.portfolio-view-cont .section-process ul li .num {position: relative; z-index: 2; width: 64px; height: 64px; border-radius: 50%; background-color: #131D32; border: 1px solid rgba(255, 255, 255, 0.12); display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 700; color: rgba(255, 255, 255, 0.5); margin-bottom: 22px;}
.portfolio-view-cont .section-process ul li .tit {display: block; font-size: 17px; font-weight: 1.4; font-weight: 700; color: #fff; margin-bottom: 0;}
.portfolio-view-cont .section-process ul li .info {font-weight: 300; line-height: 1.6; font-size: 13px; color: rgba(255, 255, 255, 0.45); margin-bottom: 38px; padding-right: 28px;}
.portfolio-view-cont .section-process ul li .period {width: fit-content; font-size: 10px; font-weight: 600; line-height: 16px; padding: 4px 10px; border: 1px solid #A7F22E; color: #A7F22E;}
.portfolio-view-cont .section-process ul li.yellowgreen .num {background-color: #A7F22E; border: #A7F22E; color: #0B1220;}
.portfolio-view-cont .section-feedback > h2 {width: calc(100% - 60px); margin: 0 auto; text-align: center; font-size: 48px; font-weight: 800; margin-bottom: 30px;}
.portfolio-view-cont .section-feedback .loop_cont {display: flex; overflow: hidden;}
.portfolio-view-cont .section-feedback .review.n1:last-child {animation-delay: 10s;}
.portfolio-view-cont .section-feedback .review.n1 {margin-right: 1242px;}
.portfolio-view-cont .section-feedback .review {display: flex; align-items: center; column-gap: 64px; animation: roll 20s linear infinite forwards;}
.portfolio-view-cont .section-feedback .review .review_li {position: relative; width: 100%; max-width: 860px; height: 340px; padding: 56px 64px; border: 1px solid rgba(11, 18, 32, 0.08); flex-shrink: 0; background-color: #fff;}
.portfolio-view-cont .section-feedback .review .review_li > img {position: absolute; left: 44px; top: 30px;}
.portfolio-view-cont .section-feedback .review .review_li .user {display: flex; justify-content: space-between; align-items: center; margin-top: 36px;}
.portfolio-view-cont .section-feedback .review .review_li .user .user-info {display: flex; align-items: center; column-gap: 16px;}
.portfolio-view-cont .section-feedback .review .review_li .user .user-info .icon {width: 46px; height: 46px; background-color: #0B1220; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: 700; color: #fff;}
.portfolio-view-cont .section-feedback .review .review_li .user .user-info .info {display: flex; flex-direction: column; row-gap: 2px;}
.portfolio-view-cont .section-feedback .review .review_li .user .user-info .info .name {font-size: 15px; font-weight: 700; line-height: 24px;}
.portfolio-view-cont .section-feedback .review .review_li .user .user-info .info .area {color: #9AA0B2; font-size: 13px; line-height: 20px;}
.portfolio-view-cont .section-feedback .review .review_li .star {display: flex; align-items: center; column-gap: 3px;}

/* 롤링 애니메이션 정의 */
@keyframes roll {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

/* contact */
.contact-form.input-cont .sticky-area {column-gap: 60px;}
.contact-form.input-cont .sticky-area .sticky-box {top: -80px;}
.contact-form.input-cont .sticky-area .input-box {background-color: #F7F8FA; padding: 130px 52px;}
.contact-form.input-cont .sticky-area .input-box .input-group:nth-of-type(1) {margin-bottom: 100px;}
.contact-form .sticky-box {padding-top: 190px; padding-bottom: 60px;}
.contact-form .sticky-box > .bullet {display: flex; align-items: center; column-gap: 10px; font-size: 18px; color: #00B896; font-family: 'Roboto Mono', monospace; text-transform: uppercase;}
.contact-form .sticky-box > .bullet span {width: 24px; height: 1px; display: block; background-color: #00B896;}
.contact-form .sticky-box > h2 {font-size: 48px; font-weight: 700; line-height: 1.4; margin-top: 40px; margin-bottom: 20px;}
.contact-form .sticky-box > h2 b {color: #00B896; font-weight: 700;}
.contact-form .sticky-box > p {color: #757C87; font-size: 18px; line-height: 1.4; padding-bottom: 80px;}
.contact-form .sticky-box > ul {display: flex; flex-direction: column; row-gap: 30px;}
.contact-form .sticky-box > ul li {display: flex; align-items: center; column-gap: 26px;}
.contact-form .sticky-box > ul li .num {width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #E4E4E4; color: #E4E4E4; font-weight: 600; font-size: 15px;}
.contact-form .sticky-box > ul li .text {display: flex; flex-direction: column; row-gap: 8px;}
.contact-form .sticky-box > ul li .text > span {font-size: 18px; font-weight: 500;}
.contact-form .sticky-box > ul li .text > p {font-size: 15px; color: #757C87;}
.contact-form .sticky-box > ul li.active .num {background-color: #0D1F3C; border: 1px solid #0D1F3C; color: #fff; transition: all 0.3s;}
.contact-form .tit {display: flex; align-items: center; column-gap: 10px; font-size: 18px; font-weight: 500; font-family: 'Roboto Mono', monospace; padding-bottom: 20px; border-bottom: 1px solid #DEDEDE;}
.contact-form .tit .num {width: 30px; height: 30px; border-radius: 5px; background-color: #0D1F3C; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 600;}
.contact-form .input-area {row-gap: 40px;}
.contact-form .input-area .input-item > span {font-size: 18px; padding-bottom: 16px;}
.contact-form .input-area .input-item.must > span::after {color: #000;}
.contact-form .input-area .input-item .input-item-area input,
.contact-form .input-area .input-item .input-item-area select,
.contact-form .input-area .input-item .input-item-area.textarea-area textarea {height: 48px; font-size: 18px; color: #565656; border: 1px solid #E9E9E9; box-shadow: 0 1px 9px rgba(140, 140, 140, 0.1);}
.contact-form .input-area .input-item .input-item-area.textarea-area textarea {height: 200px; padding: 20px;}
.contact-form .input-area .input-item .input-item-area input:focus,
.contact-form .input-area .input-item .input-item-area select:focus,
.contact-form .input-area .input-item .input-item-area.textarea-area textarea:focus  { border: 1px solid #00B896;}
.contact-form .submit-btn-area {margin-top: 92px; padding-top: 40px; border-top: 1px solid #DEDEDE; row-gap: 4px;}
.contact-form .submit-btn-area .start-btn {height: 50px; display: flex; align-items: center; justify-content: center; padding: 0 20px; font-size: 18px; font-weight: 500; color: #fff; column-gap: 16px; border-radius: 100px; background-color: #0D1F3C; margin-bottom: 16px;}
.contact-form .submit-btn-area p {font-size: 18px; font-weight: 500; color: #3C3C3C;}
.contact-form .submit-btn-area span {font-size: 16px; color: #6C6C6C;}
.contact-form #contact-details .input-area {flex-direction: row; flex-wrap: wrap; column-gap: 24px;}
.contact-form #contact-details .input-area .input-item {width: calc(100% / 2 - 12px);}


/* 반응형 */
@media screen and (min-width: 1800px) {
    .platform-cont .section02 ul li:not(:last-of-type) {padding: 0 67px;}
    .portfolio-cont .gall_img a {height: 600px !important;}
}
@media screen and (max-width: 1440px) {
  .sub-visual {align-items: center;}

  .website-form.input-cont .sticky-top .btn-area {flex-wrap: wrap;}
  .website-form.input-cont .sticky-top .btn-area .round-bullet {width: 100%; justify-content: center;}
  
  .business-cont .section03 ul li.circle {width: 12vw; height: 12vw;}
  .business-cont .section03 ul li.circle span {font-size: 3vw;}
  .business-cont .section03 ul li.circle h5 {font-size: 1.4vw;}

  .erp-cont .section01 ul li {height: auto; padding: 60px 50px;}
  .erp-cont .section02 ul .card {height: auto;}

  .started-form .tab-nav {flex-wrap: wrap; row-gap: 20px;}
  .started-form .tab-nav .tab-item {width: 100%; height: auto; padding: 40px 30px;}
  

}
@media screen and (max-width: 1280px) {

    .contact-form.input-cont .sticky-area {column-gap: 30px;}

    .ecommerce-cont .section01 .card {flex-wrap: wrap; justify-content: center; row-gap: 20px;}
    .ecommerce-cont .section01 .card li:not(.arrow) {width: calc(100% / 4);}
    .ecommerce-cont .section01 .card li:nth-of-type(6) {display: none;}

    .erp-cont .section03 .card > li {padding: 30px 40px;}

    .website-cont .section03 .plan-cont .plan-card-area .subscription-swiper .swiper-btn-area {display: block;}

    .platform-cont .section02 > .card {column-gap: 30px;}
    .platform-cont .section02 ul li:not(:last-of-type) {width: calc(100% / 4 - 23px); padding: 0 3vw;}

    .about-cont .section01.bg-dark .inner {flex-direction: column; row-gap: 40px;}
    .about-cont .section01 .card-area {width: 100%; align-items: center;}
    .about-cont .section03 .right {width: 40%;}

    .insights-cont #gall_ul li .gall_img {height: 42vw !important;}

    .checkbox-style-2 .checkbox-item input[type="checkbox"] + label {padding: 0 20px;}
    .started-form .sticky-box ul li:not(.line) {flex-direction: column; row-gap: 10px;}

}
@media screen and (max-width: 1024px) {
    .sub-visual .img-wrap {display: none;}
    .sub-visual.about .img-wrap {display: block; width: 100%; height: 42vw;}
    .sub-visual.about {flex-direction: column; align-items: flex-start; row-gap: 30px;}
    
    /* business */
    .business-cont .section01 ul li {width: 100%; height: auto; padding: 50px 40px;}
    .business-cont .section01 ul li h3 {padding-top: 0;}
    .business-cont .section02 ul {row-gap: 40px;}
    .business-cont .section02 ul li {width: 100%;}
    .business-cont .section04 ul li {height: 44vw;}

    /* ecommerce */
    .ecommerce-cont .section02 .card {padding: 60px 45px;}
    .ecommerce-cont .section04 .bg-dark ul {flex-wrap: wrap; row-gap: 20px;}
    .ecommerce-cont .section04 .bg-dark ul li {width: calc(100% / 2);}
    
    /* erp */
    .erp-cont .section01 ul li:last-of-type {width: 100%;}
    .erp-cont .section01 ul li,
    .erp-cont .section02 ul .card {width: calc(100% / 2 - 12px);}
    .erp-cont .section03 .card {padding: 40px 48px;}
    .erp-cont .section03 .card {padding: 4vw 4.4vw}
    .erp-cont .section03 .card > li {padding: 3vw 4vw;}
    .erp-cont .section03 .card > li .flex {column-gap: 0 !important; justify-content: space-between;}
    .erp-cont .section03 .card > li .flex li {flex: revert;}
    .erp-cont .section03 .card > li:nth-of-type(1) .flex li {width: 16vw;}
    .erp-cont .section03 .card > li:nth-of-type(2) .flex li {width: 13.5vw; padding: 30px 0;}
    .erp-cont .section03 .card > li:nth-of-type(3) .flex li {width: 23vw;}
    .erp-cont .section03 .card > li .flex p,
    .erp-cont .section03 .card > li .flex span.green {text-align: center;}

    /* platform */
    .platform-cont .section02 ul {column-gap: 40px;}
    .platform-cont .section02 ul li:not(:last-of-type) {width: calc(100% / 2 - 20px); padding: 0 4vw;}

    /* website */
    .website-cont .section01 ul .card {width: 100%;}
    .website-cont .section02 ul li {width: 100%; flex-direction: row; column-gap: 40px;}
    .website-cont .section03 .payment-cont .common-flex li {width: 100%;}
    .website-cont .section03 .add-cont .card-20 {width: calc(100% / 2 - 12px);}
    .website-cont .section03 .plan-cont .plan-card-area .overview {display: none;}
    .website-cont .section03 .plan-cont .plan-card-area .subscription-swiper {width: 100%;}
    .website-cont .section03 .plan-cont .plan-card-area .table > li {justify-content: space-between;}
    .website-cont .section03 .plan-cont .plan-card-area .table .mo-mode {display: block; width: 50%;}
    .website-form.input-cont {padding: 60px 0 120px;}
    .website-form.input-cont .sticky-top .btn-area {flex-wrap: nowrap;}
    .website-form.input-cont .sticky-top .btn-area .round-bullet,
    .website-form.input-cont .sticky-top .btn-area .change-btn {width: 50%;}
    .input-cont .sticky-area {flex-direction: column-reverse; row-gap: 30px;}
    .input-cont .sticky-area .sticky-box {width: 100%; position: revert;}
    .input-cont .sticky-area .input-box {width: 100%;}

    /* about */
    .about-cont .section02 ul {flex-wrap: wrap; row-gap: 24px;}
    .about-cont .section02 ul li {width: calc(100% / 2 - 12px); height: auto;}
    .about-cont .section02 ul.left li:last-of-type {width: 100%;}
    .about-cont .section02 ul.right li:nth-of-type(1) {display: none;}
    .about-cont .section03 .inner {flex-direction: column; row-gap: 40px;}
    .about-cont .section03 {margin-bottom: 80px;}
    .about-cont .section03 .right {width: 100%;}
    .about-cont .section04.bg-dark .inner {flex-direction: column-reverse; row-gap: 40px;}
    .about-cont .section04.bg-dark .inner .img-wrap {width: 100%;}
    .about-cont .section04.bg-dark .inner .img-wrap img {width: 100%; height: 100%; object-fit: cover;}
    .about-cont .section05 > div {flex-direction: column; row-gap: 40px;}
    .about-cont .section05 .map {width: 100%; height: 56vw;}
    .about-cont .section05 .map iframe {height: 100% !important;}
    
    /* insights */
    .insights-cont #gall_ul li {width: calc(100% / 2 - 20px);}
    .insights-cont #gall_ul li .gall_img {height: 54vw !important;}
    .insights-cont #gall_ul li:nth-child(3n + 2) {margin-top: 0;}
    .insights-cont #gall_ul li:nth-child(2n) {margin-top: 60px;}

    /* contact */
    .contact-form.input-cont .sticky-area {width: 100%; flex-direction: column;}
    .contact-form.input-cont .sticky-area .sticky-box {width: calc(100% - 60px); margin: 0 auto; padding: 40px 0 40px 0;}
    .contact-form.input-cont .sticky-area .input-box {padding: 60px 40px;}
    .contact-form .sticky-box > p {padding-bottom: 0;}
    .contact-form .sticky-box > ul {display: none;}

    /* get-started */
    .input-cont .sticky-area .tab-area {width: 100%;}
    .started-form .sticky-area .sticky-box {display: none;}
    .started-form .tit {padding: 40px 0;}
    .started-form .tit > h2 {font-size: 28px;}
    .started-form .tit > p {font-size: 16px;}

    /* porfolio */
    .portfolio-view-cont .project-img-cont {column-gap: 4vw;}
    .portfolio-view-cont .section-design {row-gap: 100px;}
    .portfolio-view-cont .title-area .title {font-size: 76px;}
    .portfolio-view-cont .section-overview .overview-top {flex-direction: column; row-gap: 30px;}
    .portfolio-view-cont .section-overview .project-detail {flex-wrap: wrap;}
    .portfolio-view-cont .section-overview .project-detail li {width: calc(100% / 2);}
    .portfolio-view-cont .section-overview .project-detail li:nth-of-type(1),
    .portfolio-view-cont .section-overview .project-detail li:nth-of-type(2) {border-bottom: 0 !important;}
    .portfolio-view-cont .section-overview .project-detail li:nth-of-type(3) {border-left: 1px solid rgba(11, 18, 32, 0.08) !important;}
    .portfolio-view-cont .section-process ul {flex-wrap: wrap; row-gap: 40px;}
    .portfolio-view-cont .section-process ul li {width: calc(100% / 2);}
    .portfolio-view-cont .section-process ul li:nth-of-type(5) {width: 100%;}

}
@media screen and (max-width: 768px) {

    .input-area .input_multi,
    .input-area .input_triple{flex-direction: column; row-gap: 30px;}
    .input-area .input_multi > div {width: 100%;}

    .sub-cont-2 {padding: 0 0 100px 0;}
    .sub-cont-2 .tit-text-center {padding-top: 60px;}

    .sub-wrapper .section-120{padding: 80px 0;}
    .sub-wrapper .section-130,
    .sub-wrapper .section-150 {padding: 100px 0;}
    .sub-wrapper .section-200 {padding: 120px 0;}
    .sub-wrapper .pb-200 {padding-bottom: 120px;}
    .sub-wrapper .tit > h2 {font-size: 32px;}
    .sub-wrapper .tit > p {font-size: 18px;}

    .sub-wrapper::after,
    .sub-wrapper .inner::after,
    .sub-wrapper .inner::before {display: none;}

    .sub-wrapper ul.common-flex-2 li {width: 100%;}
    .sub-wrapper .sub-flex-card .card .btn-area {column-gap: 20px;}

    .sub-visual {padding: 40px 0 60px 0;}
    .sub-visual h2 {font-size: 48px; line-height: 1.4; padding-top: 38px; padding-bottom: 13px;}
    .sub-visual h2.gray {font-size: 18px; padding-top: 0; padding-bottom: 0;}
    .sub-visual .info {padding-top: 0;}
    .sub-visual .btn-square {padding: 16px 24px; font-size: 18px;}
    .sub-visual .btn-area {margin-top: 48px; column-gap: 20px;}

    .commingsoon-cont .flex {flex-direction: column; row-gap: 52px; padding: 140px 12vw;}
    .commingsoon-cont .flex .img-wrap {width: 90%;}

    /* business */
    .business-cont .section02 ul li .text h4 {font-size: 22px;}
    .business-cont .section02 ul li .text p {font-size: 15px;}
    .business-cont .section03 ul li.circle {width: 15.5vw; height: 15.5vw;}
    .business-cont .section03 ul li.circle span {font-size: 5vw;}
    .business-cont .section03 ul li.circle h5 {font-size: 2.4vw;}
    .business-cont .section03 ul li.line {width: 0.6vw; height: 0.6vw; border-radius: 50%;}
    
    /* ecommerce */
    .ecommerce-cont .section01 .card {column-gap: 24px;}
    .ecommerce-cont .section01 .card li:not(.arrow) {width: calc(100% / 3);}
    .ecommerce-cont .section01 .card li:nth-of-type(6) {display: block;}
    .ecommerce-cont .section01 .card li:nth-of-type(4n) {display: none;}
    .ecommerce-cont .section02 .card {padding: 60px 45px;}
    .ecommerce-cont .section04 .inner {padding: 120px 0;}
    
    /* erp */
    .erp-cont .section01 ul li,
    .erp-cont .section02 ul .card {width: 100%;}
    .erp-cont .section03 .card {padding: 40px 48px;}
    .erp-cont .section03 .card > li {padding: 30px 40px;}
    .erp-cont .section03 .card > li .flex {flex-wrap: wrap; row-gap: 10px;}
    .erp-cont .section03 .card > li .flex li {width: 100% !important;}
    .erp-cont .section03 .card > li:nth-of-type(2) .flex li {padding: 20px 0;}

    /* platform */
    .platform-cont .section02 ul li:not(:last-of-type) {width: 100%; padding: 0 5vw;}
    .platform-cont .section03 ul {flex-wrap: wrap; gap: 24px;}
    .platform-cont .section03 ul li {width: 100% !important; height: 44vw;}

    /* website */
    .website-cont .section03 > .inner > div .tit {margin-bottom: 30px;}
    .website-cont .section03 .plan-add ul li {width: 100%;}
    .website-cont .section03 .add-cont .card-20 {flex-direction: column; align-items: flex-start; row-gap: 30px;}
    .website-cont .section04 {margin: 0; padding: 80px 0;}
    .website-cont .section04 .text-center {margin-bottom: 30px; font-size: 28px;}

    /* about */
    .about-cont .section01 .card-area .about-card {width: 48%;}
    .about-cont .section01 .card-area .about-card:nth-of-type(1) {margin-right: 42vw;}
    .about-cont .section01 .card-area .about-card:nth-of-type(2) {margin-left: 28vw;}
    .about-cont .section01 .card-area .about-card:nth-of-type(3) {margin-right: 18vw;}
    .about-cont .section02 > p:last-of-type {text-align: left;}
    .about-cont .section03 {margin-bottom: 40px;}
    .about-cont .section05 {padding: 80px 0;}

    /* pricing */
    .pricing-cont .plan-add ul li {width: 100%;}
    .started-form .input-area .input-item,
    .checkbox-style-2.checkbox-area .checkbox-item {width: 100%;}

    /* insights */
    .insights-cont #gall_ul {column-gap: 30px; row-gap: 160px;}
    .insights-cont #gall_ul li {width: calc(100% / 2 - 15px);}
    .insights-cont .inner-s header {padding-top: 60px; margin-bottom: 40px;}
    .inner-s .bo_v_nb li:not(.list) a span {display: none;}

    /* portfolio */
    .portfolio-cont .gall_img a {height: 50vw !important;}

    /* contact */
    .contact-form.input-cont .sticky-area .input-box {padding: 50px 30px;}
    .contact-form.input-cont .sticky-area .input-box .input-group:nth-of-type(1) {margin-bottom: 60px;}
    .contact-form #contact-details .input-area .input-item {width: 100%;}

    #custom-cursor.click {width: 12vw; row-gap: 0.8vw;}
    #custom-cursor span {font-size: 2vw;}
    #custom-cursor svg {width: 2.4vw; height: auto;}


}

@media screen and (max-width: 640px) {

    .website-form.input-cont {padding: 30px 0 120px;}
    .website-form.input-cont .tit {display: none;}
    .website-form .radio-area .radio-item,
    .website-form .checkbox-area .checkbox-item,
    .website-form.input-cont .input-box .input-top .input-area .input-item {width: 100%;}

    .contact-form .radio-area .radio-item {width: 100%;}
}

@media screen and (max-width: 500px) {
    .sub-wrapper .inner {width: calc(100% - 32px);}
    
    .sub-wrapper .section-100,
    .sub-wrapper .section-120,
    .sub-wrapper .section-130,
    .sub-wrapper .section-150 {padding: 80px 0;}
    .sub-wrapper .section-200 {padding: 100px 0;}
    .sub-wrapper .pb-200 {padding-bottom: 100px;}
    
    .sub-cont-2 {padding: 0 0 80px 0;}
    
    .inner-s .bo_v_nb {margin-top: 80px; column-gap: 20px;}
    .inner-s .bo_v_nb li.list {width: 54%;}

    .ecommerce-cont .section03 .card {width: 100%; height: 68vw;}
    .ecommerce-cont .section04 .inner {padding: 100px 0;}
    .ecommerce-cont .section04 .bg-dark {padding: 70px 20px;}
    .ecommerce-cont .section04 .bg-dark ul li {width: 100%;}
    
    .erp-cont .section03 .card {padding: 0; border: 0; border-radius: 0;}
    
    .website-cont .section01 ul .card {flex-direction: column; row-gap: 20px;}
    .website-cont .section02 ul li {flex-direction: column; row-gap: 20px;}
    .website-cont .section03 .swiper-btn-area {display: block;}
    .website-cont .section03 .add-cont .card-20 {width: 100%; flex-direction: row; align-items: center;}
    .website-form.input-cont {padding: 20px 0 120px;}
    .website-form.input-cont .sticky-top .btn-area {flex-wrap: wrap;}
    .website-form.input-cont .sticky-top .btn-area .round-bullet,
    .website-form.input-cont .sticky-top .btn-area .change-btn {width: 100%;}

    .portfolio-view-cont .btn-area {justify-content: flex-start;}
    
    .about-cont .section01 .card-area .about-card {width: 100%;}
    .about-cont .section01 .card-area .about-card.vibrate-1 {-webkit-animation: none;animation: none;}
    .about-cont .section01 .card-area .about-card.vibrate-2 {-webkit-animation: none;animation: none;}
    .about-cont .section01 .card-area .about-card:nth-of-type(1) {margin-right: 0;}
    .about-cont .section01 .card-area .about-card:nth-of-type(2) {margin-left: 0; margin: 30px 0;}
    .about-cont .section01 .card-area .about-card:nth-of-type(3) {margin-right: 0;}
    .about-cont .section02 ul li {width: 100%;}
    .about-cont .section03 .right {padding: 10vw;}
    .about-cont .section05 .info {row-gap: 30px;}
    .about-cont .section05 .map {height: 76vw;}

    .pricing-cont .plan-add {width: 100%;}
    .pricing-cont .swiper-btn-area {display: block;}

    .insights-cont {width: calc(100% - 32px) !important;}
    .insights-cont .tit-text-center {padding-bottom: 30px;}
    .insights-cont #gall_ul {column-gap: 30px; row-gap: 60px;}

    .contact-form.input-cont .sticky-area .sticky-box {width: calc(100% - 32px);}
    .contact-form.input-cont .sticky-area .input-box {padding: 50px 16px;}

    .started-form .tit > h2 {font-size: 24px;}
    .started-form .tit > p {font-size: 15px;}
    .started-form .tab-nav .tab-item {align-items: flex-start; padding: 30px 20px;}
    .started-form .tab-nav .tab-item .text > span {display: none;}
    .started-form .tab-nav .tab-item .img-wrap {margin-top: 0; width: 60px; height: 60px;}
    .started-form .tab-nav .tab-item .text > h3 {padding-bottom: 0; font-size: 18px;}
    .started-form .tab-nav .tab-item .text > h3::after {right: auto; left: 0; bottom: -36px;}

    .portfolio-view-cont .section-hero {padding: 60px 0;}
    .portfolio-view-cont .section-design {padding: 40px 0 100px 0;}
    .portfolio-view-cont .section-overview .overview-top {margin-bottom: 40px;}
    .portfolio-view-cont .section-feedback > h2,
    .portfolio-view-cont .section-process .tit h2,
    .portfolio-view-cont .section-overview .overview-top .tit > h2 {font-size: 36px; word-break: keep-all;}
    .portfolio-view-cont .section-process ul li,
    .portfolio-view-cont .section-overview .project-detail li {width: 100%;}
    .portfolio-view-cont .section-overview .project-detail li:nth-of-type(2),
    .portfolio-view-cont .section-overview .project-detail li:nth-of-type(4) {border-left: 1px solid rgba(11, 18, 32, 0.08) !important;}
    .portfolio-view-cont .section-overview .project-detail li:nth-of-type(3) {border-bottom: 0 !important;}
    .portfolio-view-cont .section-feedback .review .review_li {max-width: 540px; padding: 40px 50px; height: 300px;}
    .portfolio-view-cont .section-feedback .review .review_li > h4 {font-size: 18px; }
    .portfolio-view-cont .section-feedback .review .review_li > img {left: 34px; top: 26px;}
    .portfolio-view-cont .title-area .title {font-size: 14vw;}


}
@media screen and (max-width: 480px) {
    
    .sub-visual .btn-area {flex-wrap: wrap; row-gap: 8px;}
    .sub-visual .btn-square {width: 224px; justify-content: space-between;}
    .sub-visual.erp .btn-square,
    .sub-visual.platform .btn-square {width: 248px;}

    /* .business-cont .section02 ul li {align-items: flex-start; flex-direction: column; row-gap: 10px;}
    .business-cont .section02 ul li .icon {width: 20vw; height: 20vw;}
    .business-cont .section02 ul li .icon img {width: 8vw; height: 8vw;} */
    .business-cont .section02 ul li {flex-direction: column; row-gap: 20px; align-items: flex-start; background-color: #ECFDF5; padding: 40px 36px; border-radius: 30px;}
    .business-cont .section02 ul li .icon {width: auto; height: auto; background-color: transparent;}
    .business-cont .section02 ul li .icon img {width: 36px; height: 36px;}

    .ecommerce-cont .section01 .card {column-gap: 4vw; row-gap: 6vw; padding: 6vw 8vw;}
    .ecommerce-cont .section01 .card li {row-gap: 4vw;}
    .ecommerce-cont .section01 .card li h3 {font-size: 5vw;}
    .ecommerce-cont .section01 .card li .icon {width: 26vw; height: 26vw;}
    .ecommerce-cont .section01 .card li .icon svg {width: 10vw; height: auto;}
    .ecommerce-cont .section01 .card li.arrow svg {width: 7vw;}

    .platform-cont .section01 ul .card,
    .website-cont .section01 ul .card {padding: 11vw 11vw 10vw;}
    .platform-cont .section02 > .card {padding: 8vw 12vw;}

    .commingsoon-cont .flex {padding: 120px 0;}

    .input-cont .input-card {padding: 20px;}
    .input-cont .input-group > h3 {font-size: 24px; margin-bottom: 30px;}

    .website-form .checkbox-item input[type="checkbox"] + label {height: auto; padding: 12px 20px 12px 50px;}

}

@media screen and (max-width: 375px) {

    .business-cont .section01 ul li {padding: 14vw 12vw;}
    .business-cont .section01 ul li h3 {font-size: 9vw;}

    .ecommerce-cont .section04 .bg-dark ul li span {font-size: 42px;}

    .website-cont .section03 .card-20 {padding: 40px 30px;}
    .website-form.input-cont .sticky-top .btn-area .round-bullet {font-size: 4.2vw;}
    .input-cont .submit-btn-area .btn-submit {font-size: 5vw;}
    .input-area .input-item .input-item-area.phone-item-area {flex-wrap: wrap; row-gap: 10px;}
    .input-area .input-item .input-item-area.phone-item-area .select-item {width: 100%;}

    .erp-cont .section01 ul li,
    .erp-cont .section02 ul .card {padding: 40px 36px;}

    .insights-cont #gall_ul li {width: 100%;}
    .insights-cont #gall_ul li .gall_img {height: 114vw !important;}
    .insights-cont #gall_ul li:nth-child(2n) {margin-top: 0;}

    .contact-form .input-area {row-gap: 30px;}
}

@media screen and (max-width: 340px)  {
    .sub-visual h2 {font-size: 12vw;}
    .website-cont .section03 .add-cont .card-20 {flex-direction: column; align-items: flex-start;}
}

/* heading 계층 정리: h4→h3 / h5→h3 변환 후 폰트 크기 유지 오버라이드 */
.erp-cont h3.font-bold,
.erp-cont h3.bullet { font-size: 24px; }
.platform-cont .section01 ul li h3.font-bold { font-size: 24px; }
.platform-cont .section02 ul li h3 { font-size: 20px; }
.ecommerce-cont .section01 .card li h3 { font-size: 20px; }
.ecommerce-cont .section02 .card h3.font-bold { font-size: 24px; }
.website-cont .section02 ul li h3,
.website-cont .section03 .payment-cont .icon-tit h3,
.website-cont .section04 .inner > ul li h3 { font-size: 24px; }

/* ── Related Services Section ───────────────────────────────────────────── */
.sub-wrapper .section-80 {padding: 80px 0;}
.section-related {border-top: 1px solid #E8E8E8;}
.section-related .tit {margin-bottom: 40px;}
.section-related .related-card {
    padding: 36px 40px;
    display: flex;
    flex-direction: column;
    row-gap: 16px;
    min-height: 210px;
    justify-content: space-between;
    transition: border-color 0.25s, box-shadow 0.25s;
    cursor: pointer;
}
.section-related .related-card:hover {
    border-color: #0B1C2D;
    box-shadow: 0 4px 20px rgba(11,28,45,0.08);
}
.section-related .related-card h3 {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.3;
}
.section-related .related-card p {
    font-size: 15px;
    color: #484848;
    line-height: 1.65;
    flex: 1;
}
.section-related .related-card .round-btn {
    align-self: flex-start;
    font-size: 14px;
    padding: 8px 18px;
    display: flex;
    align-items: center;
    column-gap: 8px;
    margin-top: 4px;
}
.section-related .related-card .round-btn svg {flex-shrink: 0;}

@media screen and (max-width: 1024px) {
    .section-related ul.common-flex-3 li {width: calc(100% / 2 - 12px);}
}
@media screen and (max-width: 640px) {
    .section-related ul.common-flex-3 li {width: 100%;}
    .section-related .related-card {min-height: auto;}
}

/* ── Insight Article 본문 타이포그래피 ────────────────────────────────────── */

/* 아티클 타이틀 */
.insights-cont .inner-s header #bo_v_title .bo_v_tit {
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3;
    color: #0B1C2D;
    display: block;
}

/* 본문 베이스 */
#bo_v_con {
    width: 100%;
    font-size: 17px;
    line-height: 1.85;
    color: #2C2C2C;
    word-break: break-word;
}

/* 단락 */
#bo_v_con p {
    margin-bottom: 1.6rem;
    font-size: 17px;
    line-height: 1.85;
    color: #2C2C2C;
}

/* 섹션 제목 H2 (## 변환) */
#bo_v_con h2 {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.3;
    color: #0B1C2D;
    margin-top: 3.2rem;
    margin-bottom: 1rem;
    padding-bottom: 0.6rem;
    border-bottom: 2px solid #F0F0F0;
}

/* 소제목 H3 (### 변환) */
#bo_v_con h3 {
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #0B1C2D;
    margin-top: 2.4rem;
    margin-bottom: 0.75rem;
}

/* H4 (#### 변환) */
#bo_v_con h4 {
    font-size: 17px;
    font-weight: 700;
    color: #0B1C2D;
    margin-top: 1.8rem;
    margin-bottom: 0.5rem;
}

/* 헤딩 직후 단락 상단 여백 제거 */
#bo_v_con h2 + p,
#bo_v_con h3 + p,
#bo_v_con h4 + p { margin-top: 0; }

/* 목록 */
#bo_v_con ul {
    padding-left: 0;
    margin-bottom: 1.6rem;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    list-style: none;
}
#bo_v_con ul li {
    padding-left: 1.4rem;
    position: relative;
    line-height: 1.75;
    color: #2C2C2C;
    font-size: 17px;
}
#bo_v_con ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.65em;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: #27BFA6;
    flex-shrink: 0;
}

/* 볼드 */
#bo_v_con strong {
    font-weight: 700;
    color: #0B1C2D;
}

/* 이탤릭 */
#bo_v_con em { font-style: italic; }

/* 인라인 코드 */
#bo_v_con code {
    font-family: 'Roboto Mono', monospace;
    font-size: 14px;
    background-color: #F4F6F8;
    padding: 2px 7px;
    border-radius: 5px;
    color: #0B1C2D;
}

/* 구분선 */
#bo_v_con hr {
    border: none;
    border-top: 1px solid #E8E8E8;
    margin: 3rem 0 2rem;
}

/* 링크 */
#bo_v_con a {
    color: #27BFA6;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: color 0.2s;
}
#bo_v_con a:hover { color: #0B1C2D; }

/* hr 뒤 이탤릭 단락 — 아웃트로 스타일 */
#bo_v_con hr + p {
    color: #888;
    font-size: 15px;
    font-style: italic;
    line-height: 1.7;
    margin-bottom: 0;
}

/* ── 반응형 ────────────────────────────────────────────────────────────── */
@media screen and (max-width: 768px) {
    .insights-cont .inner-s header #bo_v_title .bo_v_tit {font-size: 26px;}
    #bo_v_con {font-size: 16px;}
    #bo_v_con p, #bo_v_con ul li {font-size: 16px;}
    #bo_v_con h2 {font-size: 22px; margin-top: 2.4rem;}
    #bo_v_con h3 {font-size: 18px; margin-top: 2rem;}
}