@charset "UTF-8";
body {
    font-family: 'Outfit', 'Pretendard', sans-serif;
    letter-spacing: -0.02em;
    --theme  : #00DB8B;
    --light1 : #f3fcf9;
    --light2 : #EDFDF7;
    --light3 : #1DE49C;
    --dark1  : #00A86B;
    --dark2  : #006849;
    --emph   : #007A8B;
    --mark   : #FFB800;

    --hdH : 6.25em;
    --secM : 6.25em;
    --titM : 1.5em;
}
.inner { max-width: 1400px; }
.inner.min { max-width: 1200px; }

.color { color: var(--theme); }
.bg { background-color: #FAFAFA; }
.bg-c { background-color: #EDF8F4; }

.btn-black { font-weight: 600; background-color: #000; border: 2px solid #000; color: #fff; transition: 0.3s; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; }
.btn-black:hover { background-color: #fff; color: #000; }

.btn-theme { font-weight: 600; background-color: var(--theme); border: 2px solid var(--theme); color: #fff; transition: 0.3s; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; }
.btn-theme:hover { background-color: #fff; color: var(--theme); }

.btn-line { font-weight: 600; background-color: transparent; border: 2px solid var(--theme); color: var(--theme); transition: 0.3s; display: inline-flex; justify-content: center; align-items: center; cursor: pointer; }
.btn-line:hover { background-color: var(--theme); color: #fff; }

/* 상단 */
.header { position: fixed; left: 0; top: 0; width: 100%; z-index: 999; transition: 0.4s; background-color: #fff; border-bottom: 1px solid #ddd; }
.header .inner { max-width: 1400px; height: var(--hdH); display: flex; justify-content: space-between; position: relative; z-index: 5; }
.header .logo { width: 12em; display: flex; align-items: center; transition: 0.4s; }
.header .logo img { width: 100%; }
.header .gnb { display: flex; font-weight: 500; text-align: center; }
.header .gnb > li { font-size: 1.25em; margin: 0 1.5em; position: relative; display: flex; align-items: center; }
.header .gnb > li > a { position: relative; }
.header .gnb > li > a::before { content:""; width: 0.25em; height: 0.25em;border-radius: 1em; display: inline-block; position: absolute; right: -0.3em; top: -0.35em; }
.header .gnb > li:hover > a,
.header .gnb > li.active > a { color: var(--theme); }
.header .gnb > li:hover > a::before,
.header .gnb > li.active > a::before { background-color: var(--theme); }

.header .lnb li { font-size: 1.125em; margin-bottom: 0.75em; color: #777; }
.header .lnb li:hover { color: var(--theme); }
.header .tnb { display: flex; font-size: 1em; align-items: center; }
.header .tnb .btn-black { padding: 0.5em 1.25em; border-radius: 5em; cursor: pointer; }
.header .tnb .btn-talk i { margin-right: 0.5em; }
.header .family { position: relative; margin-left: 0.5em; }
.header .family dt { position: relative; z-index: 5; }
.header .family dt i { margin-left: 0.5em; }
.header .family dd { font-size: 0.9em; flex-direction: column; position: absolute; top: 50%; left: 0; width: 100%; border: 2px solid #000; border-radius: 0 0 0.5em 0.5em; padding: 2em 1em 1em; display: none; background-color: #fff; font-weight: 600; }
.header .family dd a { line-height: 2.25; padding: 0 0.8em; margin-bottom: 0.5em; display: block; border-radius: 0.4em; }
.header .family dd a:last-child { margin-bottom: 0; }
.header .family dd a:hover { background-color: #f4f4f4; }
.header .family:hover dt i { transform: rotate(180deg); }
.header .family:hover dd { display: flex; }

/* 하단 */
.footer { background-color: #000; padding: 8em 0 4em; color: #fff; }
.footer .inner { max-width: 1400px; }
.footer .inner a { display: flex; align-items: center; }
.footer .area { display: flex; justify-content: space-between; flex-wrap: wrap; }
.footer .logo { width: 12em; -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); opacity: 0.6; }
.footer .logo img { width: 100%; }
.footer .addr .item:nth-child(1) { margin-bottom: 3em; }
.footer .addr .item h4 { font-size: 2em; font-weight: 500; }
.footer .addr .item p { font-size: 1.125em; font-weight: 500; margin-top: 0.3em; }
.footer .addr .item p b { font-size: 2.875em; font-weight: 500; line-height: 1; }
.footer .area:nth-child(2) { font-size: 1em; opacity: 0.6; margin-top: 8em; }
.footer .info { display: flex; gap: 2em; }
.footer .info span:nth-child(1) { margin-right: 1em; }
.footer .copyright { font-weight: 400; }

/* wrapper */
.wrapper { margin-top: var(--hdH); overflow: hidden; }
.section { padding: var(--secM) 0; }
.contact2 { background: linear-gradient(to right, var(--dark2), var(--dark1)); }
.contact2 { padding: 7em 0; color: #fff; text-align: center; }
.contact2 h5 { font-size: 1.5em; font-weight: 700; }
.contact2 p { font-size: 1.125em; margin: 1em 0 3em; }
.contact2 .btn-square { font-size: 1.125em; padding: 0.8em 4em; line-height: 1.5; background-color: #fff; color: #000;transition: 0.3s; }
.contact2 .btn-square:hover { background-color: #000; color: #fff;}

/* sub */
.sub .tab-cate { margin-bottom: 3em; }
.sub .tab-cate ul { display: flex; justify-content: center; gap: 1em; }
.sub .tab-cate li { font-size:1.0625em; transition: 0.3s; }
.sub .tab-cate li a { display: block; padding: 0.625em 1.6em; border: 1px solid #ddd; color: #bbb; background-color: #fff; border-radius: 5em; }
.sub .tab-cate li:hover a,
.sub .tab-cate li.active a { border-color: var(--theme); background-color: var(--theme); color: #fff; }

.sub .tab-lnb { margin-bottom: 3em; }
.sub .tab-lnb ul { display: flex; justify-content: center; }
.sub .tab-lnb li { font-size: 1.0625em; }
.sub .tab-lnb li a { display: block; padding: 1em 3.6em; color: #bbb; border-bottom: 2px solid transparent; transition: 0.3s; font-weight: 500; }
.sub .tab-lnb li:hover a { background-color: var(--theme); color: #fff;  }
.sub .tab-lnb li.active a { border-color: var(--theme); color: var(--theme); background-color: transparent; }

.sub .typo1 { font-size: 2.75em; font-weight: 700; }
.sub .typo2 { font-size: 2.5em; font-weight: 700; }
.sub .typo3 { font-size: 1.875em; font-weight: 700; }
.sub .typo5 { font-size: 1.5em; }
.sub .typo6 { font-size: 1.25em; }
.sub .typo7 { font-size: 1.125em; }
.sub .typo8 { font-size: 1em; }
.sub .typo9 { font-size: 0.875em; }
.sub .thin { font-weight: 400; }

.sub .visual-common { text-align: center; padding-top: var(--secM);}
.sub .visual-common h2 { font-weight: 900; text-transform: uppercase; }
.sub .visual-common p { font-weight: 700; margin: 1.5em 0 2.5em; }

.sub .hashtag { display: flex; gap: 1.25em; color: #89B7A7; }
.sub .thumb { background-color: #ddd !important; }

/* cost */
.cost .list { display: flex; flex-wrap: wrap; gap: 1.5em; text-align: left; }
.cost .item { flex: 1 1 0; padding: 3em 2.5em 3.5em; background-color: #fff; box-shadow: 3px 3px 15px rgba(0,0,0,0.1);}
.cost .item .typo8 { display: inline-flex; padding: 0.2em 0.6em; border-radius: 0.3em; color: #fff; margin-bottom: 2em; background-color: var(--dark1); }
.cost .item .typo2 { display: flex; align-items: center; margin-bottom: 0.3em; }
.cost .item .typo2 small { font-weight: 500; font-size: 0.5em; margin-top: 0.3em; margin-left: 0.3em; }
.cost .item .typo7 { line-height: 1.6; font-weight: 600; margin-bottom: 2em; opacity: 0.7; }
.cost .item .btn-theme { width: 100%; max-width: 250px; font-size: 1.25em; padding: 0.8em 0; margin-bottom: 1.5em; }
.cost .item .desc { font-size: 1em; }
.cost .item .desc li { margin-bottom: 0.75em; display: flex; align-items: center; }
.cost .item .desc li:last-child { margin-bottom: 0; }
.cost .item .desc i { margin-right: 0.3em; }

/* chatting */
.chatting .con { position: relative; }
.chatting .list { width: 80%; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.chatting .item { font-weight: 500; }
.chatting .item h5 { margin-bottom: 0.5em; }
.chatting .item p { line-height: 1.5; padding: 0.5em 0.8em; box-shadow: 3px 3px 8px rgba(0,0,0,0.15); display: inline-block; }
.chatting .item:nth-child(odd) { text-align: left; }
.chatting .item:nth-child(odd) p { background: linear-gradient(to right, var(--theme), var(--dark1)); color: #fff; border-radius: 0 0.5em 0.5em 0.5em; }
.chatting .item:nth-child(even) { text-align: right; }
.chatting .item:nth-child(even) p { background-color: #fff; color: #777; border-radius: 0.5em 0 0.5em 0.5em; border: 1px solid var(--theme); }

.marquee { --gap: 1.5em; display: flex; flex-direction: column; gap: var(--gap); }
.marquee-con { overflow: hidden; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: flex; position: relative; gap: var(--gap); }
.marquee-list { position: relative; display: flex; flex-shrink: 0; justify-content: space-around; -webkit-animation: marqueeX 80s linear infinite; animation: marqueeX 80s linear infinite; gap: var(--gap); }
.marquee-con.reverse .marquee-list { animation-direction: reverse !important; }
.marquee-item.img { height: 12vw; }
.marquee-item.img img { height: 100%; }
@-webkit-keyframes marqueeX {
    0% {
        transform: translateZ(0)
    }
    to {
        transform: translate3d(calc(-100% - 1em),0,0)
    }
}
@keyframes marqueeX {
    0% {
        transform: translateZ(0)
    }
    to {
        transform: translate3d(calc(-100% - 1em),0,0)
    }
}
@-webkit-keyframes marqueeY {
    0% {
        transform: translateZ(0)
    }
    to {
        transform: translate3d(0,calc(-100% - 1em),0)
    }
}
@keyframes marqueeY {
    0% {
        transform: translateZ(0)
    }
    to {
        transform: translate3d(0,calc(-100% - 1em),0)
    }
}

/* flex-box */
.flex-box { display: flex; align-items: center; }
.flex-box .txt { padding-left: var(--secM); }
.flex-box .txt h5 { margin-bottom: 0.75em; }
.flex-box .txt h2 { margin-bottom: 0.6em; line-height: 1.4; }
.flex-box .txt p { line-height: 1.6; font-size: 1.375em; margin-bottom: 1.5em; }
.flex-box .txt p:last-child { margin-bottom: 0; }
.flex-box .con { text-align: center; min-width: 50%; justify-content: flex-start; }
.flex-box.reverse { flex-direction: row-reverse; justify-content: space-between; }

/* 간편상담 */
.contact .visual { padding: var(--secM) 0; color: #fff; background: url(../img/visual_contact.jpg) no-repeat center/cover; text-align: center; }
.contact .visual .inner { padding: 2.25em 0; }
.contact .visual p { margin-top: 1em; }

.contact-write { padding-bottom: var(--secM); }
.contact-write .inner { display: flex; }
.contact-write .box { width: 55%; margin-top: -5em; padding: 4em 3em; background-color: #fff; box-shadow: 0 0 15px rgba(0,0,0,0.15); text-align: center; }
.contact-write .txt { padding: 6em 3em; }

.contact-write .step { display: flex; justify-content: center; }
.contact-write .step .num { display: flex; align-items: center; }
.contact-write .step .num span { font-size: 1.125em; line-height: 1.75; display: block; width: 1.75em; height: 1.75em;border-radius: 5em; background-color: #eee; color: #aaa; }
.contact-write .step .num::before,
.contact-write .step .num::after { content:""; display: block; height: 0.2em; width: 3em; background-color: #eee; vertical-align: top; }
.contact-write .step p { display: inline-block; margin-top: 0.5em; color: #888; }
.contact-write .step li:first-child .num::before,
.contact-write .step li:last-child .num::after { background-color: transparent; }

.contact-write .frm-wrap { margin: 4em 0 2em; }
.contact-write .frm-wrap dl { display: none; }
.contact-write .frm-wrap dt { margin-bottom: 1em; font-weight: 700; }
.contact-write .frm-wrap dd { text-align: left; font-size: 1.125em; }
.contact-write .frm-wrap dd > div { margin-bottom: 0.75em; }
.contact-write .frm-wrap dd small { color: #777; margin-bottom: 0.5em; display: block; }
.contact-write .frm-wrap dd small i { font-size: 1.125em; margin-right: 0.2em;vertical-align: middle; margin-top: -0.2em; }

.contact-write .chk-item input { display: none; }
.contact-write .chk-item label { display: flex; height: 3.5em; align-items: center; border: 1px solid #ddd; padding: 0 1em; cursor: pointer; }
.contact-write .chk-item label i { width: 1.25em; height: 1.25em; border: 1px solid #ccc; display: inline-flex; align-items: center; justify-content: center; color: #bbb; border-radius: 5em; margin-right: 0.3em; }
.contact-write .chk-item label:hover { color: var(--theme);}
.contact-write .chk-item label:hover i { color: var(--theme); border-color: var(--theme); }
.contact-write .chk-item input:checked + label { color: var(--theme); border-color: var(--theme);}
.contact-write .chk-item input:checked + label i { background-color: var(--theme); border-color: var(--theme); color: #fff; }

.contact-write .frm-item .frm_input,
.contact-write .frm-item .btn_frmline { height: 3em; line-height: 3; }
.contact-write .frm-item .btn_frmline { background-color: var(--dark1); border-color: var(--dark1); color: #fff; }
.contact-write .frm-item .frm_input:focus,
.contact-write .frm-item textarea:focus { border-color: var(--theme); }
.contact-write .frm-item .frm_input:hover::-webkit-input-placeholder, .contact-write .frm-item textarea:hover::-webkit-input-placeholder { color: var(--theme); }
.contact-write .frm-item .frm_input:hover::-moz-placeholder, .contact-write .frm-item textarea:hover::-moz-placeholder { color: var(--theme); }
.contact-write .frm-item .frm_input:hover:-ms-input-placeholder, .contact-write .frm-item textarea:hover:-ms-input-placeholder { color: var(--theme); }
.contact-write .frm-item .frm_input:hover::-ms-input-placeholder, .contact-write .frm-item textarea:hover::-ms-input-placeholder { color: var(--theme); }
.contact-write .frm-item .frm_input:hover::placeholder,
.contact-write .frm-item textarea:hover::placeholder { color: var(--theme); }

.contact-write .btn-confirm button { font-size: 1.25em; width: 35%; max-width: 150px; height: 2.5em; border: 2px solid var(--theme);border-radius: 5em; display: none; margin: 0 0.5em; }
.contact-write .btn-confirm .btn-move { background-color: #fff; color: var(--theme); }
.contact-write .btn-confirm .btn-submit { background-color: var(--theme); color: #fff; }
.contact-write .btn-confirm .btn-next { display: inline-block; }

.contact-write .step li.active p { color: var(--theme); }
.contact-write .step li.active .num span { background-color: var(--theme); color: #fff; }
.contact-write .step.active_2 li:nth-child(2) p { color: var(--theme); }
.contact-write .step.active_2 li:nth-child(1) .num::after { background-color: var(--theme); }
.contact-write .step.active_2 li:nth-child(2) .num::before { background-color: var(--theme); }
.contact-write .step.active_2 li:nth-child(2) .num span { background-color: var(--theme); color: #fff; }
.contact-write .step.active_3 li p { color: var(--theme); }
.contact-write .step.active_3 li:nth-child(1) .num::after { background-color: var(--theme); }
.contact-write .step.active_3 li:nth-child(2) .num::before { background-color: var(--theme); }
.contact-write .step.active_3 li:nth-child(2) .num span { background-color: var(--theme); color: #fff; }
.contact-write .step.active_3 li:nth-child(2) .num::after { background-color: var(--theme); }
.contact-write .step.active_3 li:nth-child(3) .num::before { background-color: var(--theme); }
.contact-write .step.active_3 li:nth-child(3) .num span { background-color: var(--theme); color: #fff; }
.contact-write .frm-wrap dl.active { display: block; }

.contact-write .txt { color: #888; }
.contact-write .txt dt { font-weight: 700; }
.contact-write .txt dd { margin-top: 2em; }
.contact-write .txt dd .typo7 { margin-bottom: 0.3em; }
.contact-write .txt dd .typo7::before { content:"·"; margin-right: 0.5em; display: inline-block; }
.contact-write .txt dd a { margin-left: 1em; color: var(--theme); display: inline-block; }
.contact-write .txt dd a.line { border: 1px solid var(--theme); padding: 0.2em 1em;border-radius: 5em; }

/* 스토리 */
.story-con h2 { text-align: center; margin-bottom: 1em; }
.story-con .tab-cate li a { color: #666; border-color: #eee; }
.story-list > ul { display: flex; flex-wrap: wrap; gap: 2em; }
.story-list .item { width: calc((100% - 4em)/3); height: auto; box-shadow: 0 0.5em 2em rgba(0,0,0,0.15); background-color: #fff; border-radius: 0.75em; overflow: hidden; transition: 0.3s; text-align: left; }
.story-list .item a { height: 100%; display: flex; flex-direction: column; }
.story-list .item .thumb { width: 100%; background: no-repeat center top/cover; padding-top: 80%; transition: 0.3s; margin-top: auto; border-top: 1px solid #eee; }
.story-list .item .txt { flex-grow: 1; padding: 2.5em 2em 2em; display: flex; flex-direction: column; word-break: keep-all; background-color: #fff; }
.story-list .item .txt h5 { font-size: 1.75em; font-weight: 700; line-height: 1.4; }
.story-list .item .txt p { font-size: 1em; color: #999; margin-top: 1em; }
.story-list .item .txt p span { display: inline-block; margin-right: 0.75em; }
.story-list .item:hover { box-shadow: 0.5em 0.8em 2em rgba(0,0,0,0.25); }

/* 상품안내 */
/*.product .visual-common .tab-lnb li:last-child { display: none; }*/
.product-con h3 { margin-bottom: 1em; }
.product h3::before { content:""; width: 1.25em; height: 0.125em; background-color: #000; display: block; margin-bottom: 0.5em; }
.product-con1 { padding-top: 0; }
.product-list > ul { display: flex; flex-wrap:wrap; gap: 2em; }
.product-list .item { width: calc((100% - 6em)/4);box-shadow: none; border: 0; text-align: left;  }
.product-list .item .thumb { width: 100%; background: no-repeat center/100%; padding-top: 70%; transition: 0.3s; border-radius: 0.5em; }
.product-list .item .txt h5 { font-size: 1.125em; font-weight: 500; margin-top: 0.5em; }
.product-list .item .txt h4 { font-size: 1.5em; text-align: right; font-weight: 700; }
.product-list .item .txt h4 small { font-weight: 500; font-size: 0.75em; }
.product-list .item .txt p { font-size: 1em; text-align: right; }
.product-list .item .txt p span { margin-right: 0.5em; }

.product .view { display: flex; flex-wrap: wrap; align-items: flex-start; }
.product .txt-area { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 1em; }
.product .txt-area h5 { font-weight: 700; }
.product .txt-area p { font-size: 0.9em; color: #777;}
.product .txt-area p span { margin-right: 0.5em; }
.product .img-area { width: 50%;border-radius: 1em; overflow: hidden; }
.product .img-area img { width: 100%; height: auto; }
.product .frm-area { width: 45%; margin-left: auto; border: 1px solid #ddd; padding: 1em; }
.product .frm-area dl { border-bottom: 1px solid #ddd; padding: 1.5em; }
.product .frm-area dl:last-child { border-bottom: 0; }
.product .frm-area dt { font-weight: 700; margin-bottom: 1em; }
.product .frm-area dd { display: flex; flex-direction: column; }
.product .frm-area dd > * { width: 100%; margin-bottom: 0.5em; }
.product .frm-area .chk_wrap { display: flex; }
.product .frm-area .chk_wrap dt { width: 5em; }
.product .frm-area .frm_input,
.product .frm-area .btn-submit { height: 2.8em; }
.product .frm-area .btn-submit { background-color: var(--theme); border: 0; color: #fff; }
.product .detail-area { width: 100%; margin-top: 2em; }
.product .detail-tab { font-size: 1.125em; display: flex; border-bottom: 1px solid var(--theme); }
.product .detail-tab span { padding: 0.7em 2em; color: #999; border: 1px solid #ddd; border-bottom-color: var(--theme); margin-bottom: -1px; margin-left: -1px; background-color: #fafafa; cursor: pointer;}
.product .detail-tab span:hover { background-color: #fff; color: var(--theme); }
.product .detail-tab span.active { color: var(--theme); border-color: var(--theme); border-bottom-color: #fff; background-color: #fff; position: relative; z-index: 1; }
.product .detail-box { margin-top: 2em; }
.product .detail-con { text-align: center; display: none; font-size: 1.125em; line-height: 1.6; }
.product .detail-con h5 { font-weight: 700; text-align: left; }
.product .detail-con img { max-width: 100%; }
.product .detail-con .line { border: 0; width: 100%; height: 1px; background-color: #ddd; margin: 3em 0; }
.product .detail-con.active { display: block; }

/* 웹사이트 제작 */
.website3 { text-align: center; }
.website3 h2 { margin-bottom: var(--titM); }
.website3 .btn-theme { font-size: 1.25em; padding: 0.75em 2.6em; margin-top: 3em; border-radius: 5em; }

.website4 { text-align: center; }
.website4 h2 { margin-bottom: var(--titM); }
.website4 .list { display: flex; flex-wrap: wrap; gap: 1.5em; word-break: keep-all; }
.website4 .item { padding: 4em 3em; flex: 1 1 30%; background-color: #fff; border: 1px solid #eee; box-shadow: 3px 3px 15px rgba(0,0,0,0.1); }
.website4 .item .typo5 { font-weight: 700; margin: 1em 0 0.5em; }
.website4 .item img { max-width: 25%; }

.website5 h2 { margin-bottom: var(--titM); }

.website6 { text-align: center; }
.website6 h2 { margin-bottom: var(--titM); }
.website6 .list { display: flex; gap: 1.5em; word-break: keep-all; }
.website6 .item { flex: 1 1 0; padding: 2em 0; background-color: #fff; position: relative; border: 1px solid #eee; box-shadow: 3px 3px 15px rgba(0,0,0,0.1); }
.website6 .item .typo8 { position: absolute; top: 0; left: 0; background-color: var(--dark2); color: #fff; font-weight: 600; padding: 0.2em 0.7em 0.2em 0.5em; border-radius: 0 0 0.5em 0;}
.website6 .item .typo7 { margin-top: 0.75em; font-weight: 600; }

/* 홈페이지 제작 */
.homepage1 { padding-top: 3.125em; }
.homepage1 .flex-box { gap: 5em; }
.homepage1 .txt { white-space: nowrap; }

.homepage3 { padding-bottom: 3.125em; }
.homepage3 .txt { white-space: nowrap; }
.homepage3 .con { margin-left: -7em; }

.homepage4 { text-align: center; padding-top: 0; }
.homepage4 .inner { border-top: 1px solid #ddd; padding-top: var(--secM);  }
.homepage4 h2 { margin-bottom: 0.5em; }
.homepage4 .con { margin-top: 3.125em; }

/* 랜딩페이지 제작 */
.landing1 .txt { white-space: nowrap; position: relative; z-index: 5; }
.landing1 .con { position: relative; }
.landing1 .con img { position: relative; z-index: 5; }
.landing1 .con::before,
.landing1 .con::after { display: inline-block; position: absolute; }
.landing1 .con::before { content: ""; background: url(../img/img_landing1_circle_01.png) no-repeat center/100%; left: -30%; top: 0; width: 70%; padding-top: 70%; }
.landing1 .con::after {content: ""; background: url(../img/img_landing1_circle_02.png) no-repeat center/100%; right: -5%; top: -15%; width: 30%; padding-top: 30%; }

.landing2 h2 { margin-bottom: var(--titM); text-align: center; }

/* 애프터서비스 */
.as-write .price { font-size: 1em; }
.as-write .free { flex: 1 1 100%; display: grid; padding-bottom: 3em; grid-template-areas: "area1 area3" "area2 area4"; -moz-column-gap: 8em; column-gap: 8em; }
.as-write .free .typo8 { grid-area: area1; justify-self: start; background-color: var(--mark); }
.as-write .free .typo2 { grid-area: area2; font-size: 3em;}
.as-write .free .typo7 { grid-area: area3; margin-bottom: 0; font-size: 1.125em; }
.as-write .free .yellow { color: var(--mark); }
.as-write .free .desc { grid-area: area4; display: flex; flex-wrap: wrap; }
.as-write .free .desc li { flex: 1 1 50%; }
.as-write .frm-wrap { max-width: 800px; margin: 2em auto 0; display: none; }
.as-write .frm-wrap form { display: flex; }
.as-write .frm-wrap .txt { width: 30%; text-align: left; margin-right: 3em; display: flex; flex-direction: column; }
.as-write .frm-wrap .txt hr { margin: 1em 0; width: 100%; height: 1px; background-color: #ddd; border: 0; }
.as-write .frm-wrap .txt h5 { color: #888; }
.as-write .frm-wrap .txt h4 { font-weight: 700; color: var(--dark1); }
.as-write .frm-wrap .txt p small { font-weight: 500; font-size: 0.5em; }
.as-write .frm-wrap .btn-submit { margin-top: auto; border: 0; padding: 0.75em 0; }
.as-write .frm-wrap ul { text-align: left; flex-grow: 1; }
.as-write .frm-wrap li { padding: 0 1em; display: flex; align-items: center; border: 1px solid #dedede; margin-bottom: 0.5em; background-color: #fff;}
.as-write .frm-wrap li:last-child { margin-bottom: 0; }
.as-write .frm-wrap label { width: 6em; }
.as-write .frm-wrap .frm_input { border: 0; height: 3em; }

.as-list { text-align: center; }
.as-list h2 { margin-bottom: var(--titM); }
.as-list .list { display: flex; gap: 1.5em; flex-wrap: wrap; }
.as-list .item { flex: 1 1 20%; background-color: #fff; border: 1px solid #dedede; padding: 4em 2em; }
.as-list .item:last-child { margin-bottom: 0; }
.as-list .item img { max-width: 40%; margin-bottom: 1em; }

/* 포트폴리오 */
.portfolio-con { padding-top: 0; }
.portfolio-list > ul { display: flex; flex-wrap: wrap; gap: 2em; }
.portfolio-list .item { width: calc((100% - 4em)/3); height: auto; box-shadow: 0 0.5em 2em rgba(0,0,0,0.15); background-color: #fff; overflow: hidden; transition: 0.3s; text-align: left;  }
.portfolio-list .item .thumb { width: 100%; background: no-repeat center/100%; padding-top: 70%; transition: 0.3s; }
.portfolio-list .item .txt { padding: 1.5em; }
.portfolio-list .item .txt h5 { font-size: 1.5em; font-weight: 600; }
.portfolio-list .item .txt p { font-size: 1.125em; color: #777; margin-top: 0.5em; }
.portfolio-list .item:hover { box-shadow: 0.5em 0.8em 2em rgba(0,0,0,0.25); }

/* 운영대행 공통 */
.service1 { text-align: center; }
.service1 h2 { margin-bottom: var(--titM); }
.service1 .list { display: flex; margin-top: var(--conM); }
.service1 .item { flex: 1 1 0; color: #fff; }
.service1 .item a { padding: 4em 0 2em; display: flex; flex-direction: column; height: 100%; }
.service1 .item h5 { font-weight: 600; }
.service1 .item p { font-weight: 600; margin: 0.3em 0 0.6em; }
.service1 .item img { max-width: 100%; }
.service1 .item:nth-child(1) { background-color: #fdbd0d; }
.service1 .item:nth-child(2) { background-color: #3280db; }
.service1 .item:nth-child(3) { background-color: #f55873; }
.service1 .item:nth-child(4) { background-color: #00da8b; }
.service1 .btn-confirm { margin-top: 3em; }
.service1 .btn-confirm a { font-size: 1.25em; padding: 0.675em 2em; margin: 0 0.2em; }

.service2 { padding-bottom: 3.125em; }
.service3 { padding-top: 3.125em; }

.performance3 { text-align: center; padding-bottom: 0; }
.performance3 .txt h2 { margin-bottom: 0.5em; }
.performance3 .txt p { font-size: 1.375em; margin-bottom: 0.75em; line-height: 1.6; }
.performance3 .txt p:last-child { margin-bottom: 0; }
.performance3 .con img { width: 40%; }

.power2 .flex-box > .con img,
.power3 .flex-box > .con img,
.media3 .flex-box > .con img,
.log2 .flex-box > .con img { max-width: 75%; }



/* main */
.main .section { padding: 8em 0; }
.main .typo-1 { font-size: 4.875em; line-height: 1.25; font-weight: 700; }
.main .typo-2 { font-size: 2.875em; line-height: 1.25; font-weight: 700; }
.main .typo-3 { font-size: 2.875em; line-height: 1.25; font-weight: 700; }
.main .typo-5 { font-size: 1.875em; line-height: 1.5; }
.main .typo-6 { font-size: 1.25em; line-height: 1.5; margin-top: 1.5em; color: #666; }
.main .typo-7 { font-size: 1.125em; }
.main .tit .typo-6 { font-size: 1.375em; }
.main .tit .btn-theme { font-size: 1.125em; padding: 0.8em 2.5em; margin-top: 4em; border-radius: 0.5em; font-weight: 500; }

.visual-main { height: calc(100vh - var(--hdH)); background: var(--theme); color: #fff; display: flex; align-items: center; position: relative; }
.visual-main .inner { max-width: 1200px; }
.visual-main .typo-1 { margin: 0.3em 0 1em; }
.visual-main .btn-round { color: #fff; border: 2px solid #fff; font-size: 1.25em; padding: 1em 2em; align-items: center; white-space: nowrap; display: inline-flex; font-weight: 600; border-radius: 5em;transition: 0.4s; }
.visual-main .btn-round img { width: 30%; margin-left: 1em; transition: 0.4s; }
.visual-main .btn-round:hover { background-color: #fff !important; color: #000; }
.visual-main .btn-round:hover img { -webkit-filter: invert(1); filter: invert(1); }

.visual-main .img-box { padding-top: 10%; position: absolute; right: 0; bottom: 0; width: 60%; }
.visual-main .img-box .img { width: 100%; vertical-align: top; }
.visual-main .img-box .icon { position: absolute; -webkit-animation: main_icon 1.5s ease-in-out alternate infinite; animation: main_icon 1.5s ease-in-out alternate infinite; }
.visual-main .img-box .icon1 { top: 32%; right: 46%; width: 9%; }
.visual-main .img-box .icon2 { top: 8%; right: 44%; width: 5%; }
.visual-main .img-box .icon3 { top: 0; right: 32%; width: 7%; }
.visual-main .img-box .icon4 { top: 8%; right: 20%; width: 7%; }
.visual-main .img-box .icon5 { top: 25%; right: 13%; width: 8%; }
.visual-main .img-box .icon6 { top: 40%; right: 9%; width: 11%; }

@-webkit-keyframes main_icon {
    0% {
        transform: translateZ(0); opacity: 1;
    }
    100% {
        transform: translate3d(0,30%,0); opacity: 0;
    }
}

@keyframes main_icon {
    0% {
        transform: translateZ(0); opacity: 1;
    }
    100% {
        transform: translate3d(0,30%,0); opacity: 0;
    }
}
@-webkit-keyframes main_icon2 {
    0% {
        transform: translate3d(0,10%,0); opacity: 0;
    }
    100% {
        transform: translateZ(0); opacity: 1;
    }
}
@keyframes main_icon2 {
    0% {
        transform: translate3d(0,10%,0); opacity: 0;
    }
    100% {
        transform: translateZ(0); opacity: 1;
    }
}

.story-main { overflow: hidden; }
.story-main .con { width: 50%; position: relative; height: 34.5em; }
.story-main .swiper { position: absolute; left: 0; width: 50vw; padding: 2em 0; }
.story-main .item { margin-right: 2em; height: auto; width: 100%; max-width: 23em; }

.main .service1 .item a { height: 40vw; position: relative; padding: 5em 3em; }
.main .service1 .item img  { position: absolute;  width: 100%; top: 50%; left: 50%; transform: translate(-50%,-50%);transition: 0.4s; }
.main .service1 .item:nth-child(1) a { justify-content: flex-end; align-items: center;}
.main .service1 .item:nth-child(1) img { top: 40%; left: 55%; width: 140%;}
.main .service1 .item:nth-child(2) a { justify-content: flex-start; align-items: center; }
.main .service1 .item:nth-child(2) img { top: 60%; }
.main .service1 .item:nth-child(3) a { justify-content: flex-end; align-items: center;}
.main .service1 .item:nth-child(3) img { top: 40%; }
.main .service1 .item:nth-child(4) a { justify-content: flex-start; align-items: center;}
.main .service1 .item:nth-child(4) img { top: 60%;  }

.main .merit { padding: 14em 0; text-align: center; }
.main .merit .con { margin-top: 3em; }
.main .merit dl {display: flex; align-items: flex-start; }
.main .merit dt { width: 12em; height: 12em; background-color: #c8a063; color: #fff; display: inline-flex; align-items: center; justify-content: center; border-radius: 50em; position: relative; z-index: 5;}
.main .merit dd { margin-top: 6em; font-weight: 500; flex: 1 1 0;  flex-direction: column; display: flex; justify-content: center; align-items: flex-end; position: relative; }
.main .merit dd .box { width: 12em; text-align: left; padding-top: 4em; position: relative; }
.main .merit dd h5 { width: 100%; border: 1px solid var(--point); padding: 0.6em 0; color: var(--point);border-radius: 5em; background-color: #fff; position: relative; text-align: center; }
.main .merit dd p { margin-top: 1em; margin-left: 21%; color: var(--point); }
.main .merit dd::before { content:""; width: 100%; height: 1px; background-color: #c8a063; display: block; position: absolute; right: 9.5em; top: 0; }
.main .merit dd .box::before { content:""; width: 1px; height: 11.4em; background-color: var(--point); display: block; position: absolute; left: 21%; top: 0; }
.main .merit dd p::before { content:""; width: 1.25em; height: 1px; background-color: var(--point); display: inline-block; vertical-align: middle; margin-right: 0.3em; }
.main .merit dd:nth-of-type(1) { --point: var(--theme); }
.main .merit dd:nth-of-type(2) { --point: #7861da; }
.main .merit dd:nth-of-type(3) { --point: #F88E26; }

.portfolio-main { overflow: hidden; }
.portfolio-main .con { width: 55%; }
.portfolio-main .marquee { width: 100%; flex-direction: row; height: 50vw; }
.portfolio-main .marquee-con { flex: 1 1 0; flex-direction: column; overflow: visible; }
.portfolio-main .marquee-list { flex-direction: column; -webkit-animation: marqueeY 60s linear infinite; animation: marqueeY 60s linear infinite; }
.portfolio-main .marquee-con:hover .marquee-list { -webkit-animation-play-state: paused; animation-play-state: paused; }
.portfolio-main .item { width: 100%; }

.main .partners { padding: 12.5em 0; }
.main .partners .tit { text-align: center; margin-bottom: 3em; }
.main .partners .list { display: flex; flex-wrap: wrap; }
.main .partners .item { width: 16.666%; padding: 1em; }
.main .partners .item span { padding: 2em; width: 100%; height: 100%; background-color: #f8f8f8; display: flex; align-items: center; justify-content: center;border-radius: 0.75em; }
.main .partners .item img { max-width: 100%; max-height: 100%; }

.main .counsel { text-align: center; }
.main .counsel .list { display: flex; margin-top: 4em; justify-content: center; }
.main .counsel .list li { width: 25%; margin: 2%; padding: 4em 1em; background-color: #fff; box-shadow:3px 3px 15px rgba(0,0,0,0.1); border-radius: 0.5em; }
.main .counsel .list p { margin-top: 1em; color: var(--dark1); }
.main .counsel .list small { font-size: 1.125em; color: var(--dark1); margin-top:0.5em; display: block; opacity: 0.6; }
.main .counsel .list img { width: 35%; }


/****************************** container ******************************/
.container { padding: 12em 0 8em; }

/******************************** 반응형 **********************************/
br.mb { display: none; }
.mb-header { display: none; }

@media screen and (max-width: 1480px){
    .inner { width: 96%; }

    .header,
    .footer,
    .wrapper { font-size: 1vw; }

    .homepage1 .con img,
    .homepage3 .con img,
    .landing1 .con img { width: 100%; }

    .flex-box > .txt { white-space: nowrap; padding-left: 4em; }
}
@media screen and (max-width: 1280px){
    .inner { width: 94%; }

    .header,
    .footer,
    .wrapper { font-size: 1.125vw; }

    .sub .flex-box { gap: 5em; }
    .flex-box > .txt { padding-left: 0; }
    .flex-box > .con img { max-width: 100%; }

    .homepage3 .con { margin-left: 0; }
}
@media screen and (max-width: 1024px){
    .visual-main { height: 70vw; }

    .sub .tab-lnb li { flex: 1 1 0; }
    .sub .tab-lnb li a { padding: 1em 0; }

    .sub .tab-lnb li,
    .sub .tab-cate li { font-size: 1.25em; }

    .flex-box,
    .flex-box.reverse { justify-content: space-around; }
    .flex-box > .con { min-width: 0; width: 80%; max-width: 40%; }

    .sub .tab-cate ul { flex-wrap: wrap; }
}
@media screen and (max-width: 768px){
    br.mb { display: block; }
    body { --hdH : 3.4em; }
    .visual-main .btn-round {position: relative;z-index: 1};
    .footer { font-size: 2.25vw; }
    .header { display: none; }
    .wrapper { font-size: 2.5vw; }

    .mb-header { font-size: 2.5vw; position: fixed; left: 0; top: 0; width: 100%; background-color: #fff; border-bottom: 1px solid #ddd; display:flex; justify-content: space-between; align-items: center; height: 3.5em; padding: 0 3%; z-index: 999; }
    .mb-header::before { position: fixed; right: 0; top: 0; width: 100%; height: 100vh; background-color: rgba(0,0,0,0.5); content:""; z-index: 1;transform: translateX(100%);transition: 0.6s;  }
    .mb-header .logo { width: 8em; }
    .mb-header .logo img { width: 100%; }
    .mb-header .mnb-btn { font-size: 1.875em; position: relative; z-index: 50; }
    .mb-header .mnb-btn .xi-close { display: none; }
    .mb-header .mnb { position: fixed; right: 0; top: 0; width: 80%; height: 100vh; background-color: #fff; padding: 3.5em 0; z-index: 30; transform: translateX(100%);transition: 0.6s; }
    .mb-header .mnb li { }
    .mb-header .mnb a { display: block; }
    .mb-header .mnb .gnb > li  { margin-bottom: 1em; }
    .mb-header .mnb .gnb > li > a { font-size: 1.25em; padding: 0.625em 1.25em; font-weight: 700; }
    .mb-header .mnb .lnb { font-size: 1.125em; }
    .mb-header .mnb .lnb a { padding: 0.3em 2em; }

    .mb-header.open .mnb-btn .xi-bars { display: none; }
    .mb-header.open .mnb-btn .xi-close { display: block; }
    .mb-header.open .mnb { transform: translateX(0); }
    .mb-header.open::before { transform: translateX(0); }

    .footer { padding: 4em 0 2em; text-align: center; }
    .footer .area:nth-child(1) { flex-direction: column-reverse; }
    .footer .logo { opacity: 1; margin: 0 auto 3em; }
    .footer .area:nth-child(2) { flex-direction: column; gap: 3em; margin-top: 3em; }
    .footer .info { flex-direction: column; gap: 0.5em; }
    .footer .addr .item h4 { font-size: 1.75em; }

    .wrapper { word-break: keep-all; }

    .sub .hashtag { justify-content: center; }

    .sub .tab-lnb li { font-size: 1.125em; }
    .sub .tab-cate li { font-size: 1em; }

    .sub .tab-lnb ul { flex-wrap: wrap; }
    .sub .tab-lnb li { flex: 0 0 0; }
    .sub .tab-lnb li a { white-space: nowrap; }

    .sub .typo1 { font-size: 2.875em; font-weight: 700; }
    .sub .typo2 { font-size: 2.25em; font-weight: 700; }

    .flex-box,
    .flex-box.reverse { flex-direction: column-reverse; justify-content: center; }
    .flex-box > div { width: 100%; text-align: center; }
    .flex-box > .con { max-width: 100%; }
    .flex-box > .con > img { width: 85%; }
    .flex-box > .txt { white-space: normal; }

    .service .tab-lnb li { flex: 0 0 27%; }
    .website .tab-lnb li { flex: 0 0 25%; }
    .product .tab-lnb li { flex: 0 0 30%; }

    .service1 .list { flex-wrap: wrap; }
    .service1 .item { flex: 1 1 50% }

    .chatting .flex-box > .con { width: 90%; }
    .chatting .flex-box > .con > img { width: 100%; }

    .power2 .flex-box > .con img,
    .power3 .flex-box > .con img,
    .media3 .flex-box > .con img,
    .log2 .flex-box > .con img { width: 45%; }

    .story-list .item,
    .portfolio-list .item,
    .product-list .item { width: calc((100% - 2em)/2); }

    .performance3 .con img { width: 60%; }

    .website4 .item { padding: 3em 0; flex: 1 0 40%; font-size: 0.9em;}

    .website6 .list { flex-wrap: wrap; }
    .website6 .item { flex: 1 1 30%; }


    .cost .item { flex: 1 1 100%; }
    .cost .item .desc { font-size: 1.125em; }

    .as-write .free { display: block; }
    .cost .item .desc { display: block; margin-top: 1.5em; }

    .as-list .item { flex: 1 1 40%; }

    .portfolio-list .item .txt h5 { font-size: 1.375em; }

    .product .view { flex-direction: column; }
    .product .img-area { width: 100%; }
    .product .frm-area { width: 100%; margin-top: 2em; }

    .story-list .item .txt { padding: 1.5em 1.25em 1.25em; }
    .story-list .item .txt h5 { font-size: 1.375em; }

    .contact-write .inner { flex-direction: column; }
    .contact-write .box,
    .contact-write .txt { width: 100%; }

    .contact-write .box { padding: 3em 2em; }
    .contact-write .txt { padding: 3em 2em; }

    .bo_view_tit { padding: 0 3em; }

    .main .inner { width: 100%; }
    .main .typo-1 { font-size: 3.5em; line-height: 1.25; font-weight: 700; }
    .main .typo-2 { font-size: 2.5em; line-height: 1.25; font-weight: 700; }
    .main .typo-3 { font-size: 2.25em; line-height: 1.25; font-weight: 700; }
    .main .typo-5 { font-size: 1.875em; line-height: 1.5; }
    .main .typo-6 { font-size: 1.25em; line-height: 1.5; margin-top: 1.5em; color: #666; }
    .main .typo-7 { font-size: 1.125em; }
    .main .tit .btn-theme { margin-top: 2em; }

    .visual-main { height: 100vw; }
    .visual-main .inner { padding: 0 3%; }
    .visual-main .img-box { width: 80%; padding-top: 12%; }
    .story-main .con { width: 100%; }
    .story-main .swiper { position: static; width: 100%; }
    .main .service1 .item a { height: 100%; padding: 3em; justify-content: space-between !important; align-items: center !important; }
    .main .service1 .item a .txt { margin: 0 !important; text-align: center !important; }
    .main .service1 .item a .img { position: static; transform: translate(0,0) !important; }
    .main .merit dl { flex-wrap: wrap; }
    .main .merit dt { width: 80%; height: 4em; margin: auto; }
    .main .merit dd { flex:1 1 30%; margin: 0.5em; margin-top: 0; }
    .main .merit dd::before { display: none; }
    .main .merit dd .box { width: 100%; }
    .main .merit dd .box::before { left: 50%; top: 0; }
    .main .merit dd p { margin-left: 0; margin-top: 1em; background-color: #fff; text-align: center; position: relative; z-index: 5; }
    .main .merit dd p::before { display: none; }

    .portfolio-main { padding-bottom: 4em; }
    .portfolio-main .flex-box { flex-direction: column; }
    .portfolio-main .con { margin-bottom: 3em; }
    .portfolio-main .marquee { overflow: hidden; }
    .portfolio-main .portfolio-list .item { width: 100%; }

    .main .partners .item { width: 25%; padding: 0.5em; }
    .main .partners .item span { padding: 1em; }
    .main .counsel .list { flex-wrap: wrap; }
    .main .counsel .list li { width: 40%; padding: 3em 1em; }

    .as-write .frm-wrap form { display: block; }
    .as-write .frm-wrap .txt { width: 100%; margin-bottom: 2em; }

}
@media screen and (max-width: 586px){
    .footer { font-size: 2.375vw; }
    .wrapper { font-size: 2.675vw; }
    .mb-header { font-size: 3vw; }
}
@media screen and (max-width:320px){
.main .counsel .list li { width: 60%; }
.main .partners .item { width: 20%; }
}