@charset "UTF-8";
body {
    font-family: 'Outfit', 'Pretendard', sans-serif;
    letter-spacing: -0.02em;
    --theme  : #3067ec;
    --light1 : #F3F6FF;
    --light2 : #DFE5F5;
    --light3 : #5475CB;
    --dark1  : #254BAB;
    --dark2  : #214298;
    --mark   : #FFD600;
    /*--emph     : ;*/
}
.inner { max-width: 1400px; }

html.js .portfolio .item.moveUp{ opacity:0; transform: translateY(40px) scale(0.985); }

.seo-h1{
    position:absolute;
    width:1px;
    height:1px;
    padding:0;
    margin:-1px;
    overflow:hidden;
    clip:rect(0,0,0,0);
    border:0;
}

.seo-block{
    position:absolute;
    left:-9999px;
    width:1px;
    height:1px;
    overflow:hidden;
}

.kakao-chat{
    position: fixed;
    right: 60px;
    bottom: 60px;
    z-index: 9999;
}

.kakao-chat img{
    width: 60px;
    height: 60px;
    cursor: pointer;
    transition: 0.3s ease;
}

.kakao-chat img:hover{
    transform: scale(1.1);
}
/* color */
.star{color:#FE655F;}
.bg-orange { background-color: #FFEBC6; }
.bg-pink { background-color: #FFDAFF; }
.bg-blue { background-color: #FE655F; }
.bg-green { background-color: #C4E5AE; }

.orange { background-color: #E9A63A; }
.pink { background-color: #C86BC0; }
.blue { background-color: #4F86D9; }
.green { background-color: #6FBF5E; }

/* swiper */
.swiper-paging { width: 100%; bottom: 5% !important; position: absolute; left: 0; z-index: 5; text-align: center; }
.swiper-bullet { display: inline-block; width: 12px; height: 12px; margin: 12px; border-radius: 15px; background-color: #fff; transform: scale(0.5); opacity: 0.75; cursor: pointer; transition: 0.3s; }
.swiper-bullet-active { transform: scale(1); opacity: 1; }

/* typo */
[class*='typo'] { font-weight: 700; }
.typo-1 { font-size: 5.375em; line-height: 1.3; letter-spacing: -0.03em; }
.typo-2 { font-size: 3.95em; line-height: 1.33; }
.typo-3 { font-size: 3.25em; line-height: 1.38; }
.typo-4-m { font-size: 3em; font-weight: 500; line-height: 1.25; }
.typo-4 { font-size: 2.625em; line-height: 1.43; }
.typo-5-m { font-size: 2.25em; font-weight: 500; line-height: 1.39; }
.typo-5 { font-size: 1.875em; line-height: 1.53; }
.typo-6-m { font-size: 1.5em; font-weight: 500; line-height: 1.5; }
.typo-6 { font-size: 1.25em; line-height: 1.57; letter-spacing: 0; }
.typo-62 { font-size: 1.32em; line-height: 1.57; letter-spacing: 0; }
.typo-7-m { font-size: 1.25em; font-weight: 500; line-height: 1.5; }
.typo-7 { font-size: 1.25em; line-height: 1.59; letter-spacing: 0; font-weight: 700; }
.typo-72 { font-size: 1.05em; line-height: 1.59; letter-spacing: 0; font-weight: 700; }
.thin { font-weight: 300; }
.medium { font-weight: 500; }

/* btn */
.btn-round { border-radius: 100em; display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; color: #fff; vertical-align: middle; transition: all .25s ease-out; background-color: #000; line-height: 1.57; border: 0; }
.btn-round:hover { background-color: var(--theme); }
.btn-round.pink { color: #000; background-color: #ffdaff; }
.btn-round.pink:hover { color: #fff; background-color: #ff5839; }
.btn-round.blue { background-color: var(--theme); }
.btn-round.blue:hover { background-color: #000; }
.btn-round.white { color: #000; background-color: #fff; }
.btn-round.white:hover { color: #fff; background-color: #000; }
.btn-round.line { border: 2px solid #000; }

/* btn size */
.btn-round { padding: 0.6em 3em; font-size: 1.25em; font-weight: 700; }
.btn-round.large { font-size: 1.5em; }
.btn-round.small { padding: 0.6em 2.25em; font-size: 1.125em; }

/* header */
#header { width: 94%; position: fixed; left: 50%; top: 1.5em; transform: translateX(-50%); background-color: #fff; padding: 1em; border-radius: 5em; z-index: 9999; transition: 0.4s; box-shadow: 2px 2px 15px rgba(0,0,0,0.05); }
.header-inner { display: flex; align-items: center; max-width: 1700px; }
.header-inner a { font-size: 1.125em; font-weight: 600; transition: 0.4s; }
.header-logo { width: 3em; margin-right: 6.25vw; cursor: pointer; }
.header-logo img { width: 100%; }
.header-gnb { display: flex; align-items: center; }
.header-gnb-item { margin-right: 2.5em; }
.header-gnb-item:hover { color: var(--theme); }
.header-tnb { margin-left: auto; display: flex; align-items: center; }
.header-tnb > * { margin-left: 1em; }
.header-tnb .btn-round { padding: 0.4em 2em; }
.header-tnb .btn-round i { margin-right: 0.3em; }
.header-tnb .btn-round:hover { color: #000; background-color: #fff; }
.header-tnb .family { position: relative; }
.header-tnb .family span { margin-left: 0; position: relative; z-index: 5; cursor: pointer; }
.header-tnb .family ul { position: absolute; top: 50%; left: 0; width: 100%; background-color: #fff; border: 2px solid #000; border-radius: 0 0 1em 1em; padding: 2em 1.25em 1em; font-size: 0.9em; display: none; }
.header-tnb .family a { display: flex; padding: 0.4em 0.8em; line-height: 1.75; border-radius: 0.5em; }
.header-tnb .family a:hover { background-color: #f4f4f4; }
.header-tnb .family:hover span i { transform: rotate(180deg) }
.header-tnb .family:hover span { color: #000; background-color: #fff; }
.header-tnb .family:hover ul { display: block; }

/*#header.hide { transform: translate(-50%,-100%); top: 0; }*/

/* topBtn */
#topBtn { font-size: 1.25em; font-weight: 700; width:3.25em; height: 3.25em; background-color: #fff; box-shadow: 2px 2px 15px rgba(0,0,0,0.15); display: flex; align-items: center; justify-content: center; border-radius: 5em; position: fixed; right: 0; bottom: -1em; margin-right: 2.875em; margin-bottom: 7em; opacity: 0; transition: 0.4s; cursor: pointer; }
#topBtn.show { bottom: 0; opacity: 1; }

/* footer */
#footer { background-color: #000; padding: 8em 0 4em; color: #fff; }
.footer-inner a { display: flex; align-items: center; }
.footer-box { display: flex; justify-content: space-between; flex-wrap: wrap; }
.footer-logo { width: 6em; -webkit-filter: invert(1); filter: invert(1); }
.footer-logo img { width: 100%; }
.footer-contact-item:nth-child(1) { margin-bottom: 3em; }
.footer-contact-item h4 { font-size: 2.25em; font-weight: 500; }
.footer-contact-item p { font-size: 1.25em; font-weight: 500; margin-top: 0.3em; }
.footer-contact-item p b { font-size: 3em; font-weight: 500; line-height: 1; }
.footer-box:nth-child(2) { font-size: 1.125em; 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: 500; }

/* content */
.tit { margin-bottom: 4.5em; text-align: center; }
.tit .typo-5 { margin-top: 1em; color: #666; }
.tit .typo-6 { margin-top: 0.5em; }
.tit .typo-62 { margin-top: 0.1em; }
.tit .btn-round { margin-top: 3em; }
.section { padding: 8em 0; overflow: hidden; }

/* 흐르는 슬라이드 */
.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-con{ overflow:hidden; position:relative; }
.marquee{ width:100%; overflow:hidden; }
.marquee-list{ display:flex; align-items:center; flex-shrink:0; gap:var(--gap); animation: marqueeX 60s linear infinite; will-change: transform; }
.marquee-con.reverse .marquee-list { animation-direction: reverse; }
.marquee-item.img{ height:12vw;display:flex;align-items:center; }
.marquee-item.img img{ height:100%; width:auto; display:block; object-fit:contain; }

.marquee-item.shape { width: 18vw; height: 18vw; }
.marquee-item.shape1 { -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); }
.marquee-item.shape2 { -webkit-clip-path: polygon(100% 0,100% 0,100% 100%,0 100%); clip-path: polygon(100% 0,100% 0,100% 100%,0 100%); }
.marquee-item.shape4 { -webkit-clip-path: polygon(50% 0,50% 0,100% 100%,0 100%); clip-path: polygon(50% 0,50% 0,100% 100%,0 100%); }

.marquee-item.shape-img1 { -webkit-filter: invert(90%) sepia(81%) saturate(748%) hue-rotate(311deg) brightness(103%) contrast(101%); filter: invert(90%) sepia(81%) saturate(748%) hue-rotate(311deg) brightness(103%) contrast(101%); }
.marquee-item.shape-img2 { -webkit-filter: invert(79%) sepia(9%) saturate(2256%) hue-rotate(277deg) brightness(99%) contrast(85%); filter: invert(79%) sepia(9%) saturate(2256%) hue-rotate(277deg) brightness(99%) contrast(85%); }
.marquee-item.shape-img3 { -webkit-filter: invert(83%) sepia(24%) saturate(5991%) hue-rotate(181deg) brightness(99%) contrast(91%); filter: invert(83%) sepia(24%) saturate(5991%) hue-rotate(181deg) brightness(99%) contrast(91%); }
.marquee-item.shape-img4 { -webkit-filter: invert(92%) sepia(15%) saturate(1055%) hue-rotate(39deg) brightness(91%) contrast(90%); filter: invert(92%) sepia(15%) saturate(1055%) hue-rotate(39deg) brightness(91%) contrast(90%); }

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

/* visual */
.visual { overflow: hidden; padding: 12.5em 0 28.5em; color: #fff; position: relative; background-color: #FE655F; }
.visual .marquee-item img{ width:22vw; max-width:420px; height:auto; display:block; }
.visual::before,
.visual::after { content:""; width: 70vw; height: 70vw; background-color: #fff; transform: translate(0) scale(1); display: block; bottom: -58vw; position: absolute; }
.visual::before { right: 40%; border-radius: 700px; }
.visual::after { left: 50%; }

/* special */
.special-wrap { display: grid; gap: 1.5em; }
.special-box { padding: 3em 3vw; border-radius: 2em; position: relative; }
.special-box .typo-5-m { font-weight: 700; }
.special-box .typo-6 { margin-top: 1em; }
.special-box:nth-child(2) { grid-column: 2; grid-row: 1 / 3; }
.special-box1 { background-color: #FE655F; color: #fff; }
.special-box2 { background-color: #FECF33; }
.special-box3 { background-color: #F350C0; color: #fff; }
.special-box1 .img { width: 45%; margin-top: -10%; margin-left: auto; display: flex; }
.special-box2 .img { width: 90%; margin: 3em 0 0 auto; display: flex; flex-direction: column; max-width: 480px; }
.special-box2 .img-item { width: 70%; }
.special-box2 .img-item:nth-child(even) { align-self: flex-end; }
.special-box3 .img { width: 15%; display: flex; margin-left: auto; margin-top: -10%; }

/* cost */
.cost-list { display: flex; gap: 2em; }
.cost-list-item { width: 33.33%; padding: 5em 3vw 3.75em; border-radius:50px;background-color: var(--bg-color1); }
.cost-list-item .typo-7-m { padding: 0.2em 1em; border-radius: 0.3em; background-color: var(--bg-color2); color: #fff; }
.cost-list-item .typo-3 { margin-top: 0.875em; }
.cost-list-item .typo-7 { margin-top: 0.875em; }
.cost-list-item .btn-round { width: 70%; max-width: 260px; font-size: 1.25em; padding: 0.8em 0; margin-top: 2em; }
.cost-list-desc { margin-top: 2.5em; font-size: 1.25em; line-height: 1.85; }
.cost-list-desc li { display: flex; gap: 0.75em; align-items: center; }
.cost-list-desc .check { width: 1.25em; }
.cost-list-item.plan-b .check { -webkit-filter: invert(1); filter: invert(1); }
.cost-list-item.plan-c .check { -webkit-filter: invert(1); filter: invert(1); }
.cost-list-item.plan-a { --bg-color1: #DFE5F5;--bg-color2: #66686f; }
.cost-list-item.plan-b { --bg-color1: #3067ec;--bg-color2: #0c43c8; color:#fff; }
.cost-list-item.plan-c { --bg-color1: #FE655F;--bg-color2: #e91710; color:#fff;}

/* portfolio */
.portfolio { text-align: center; }
.portfolio .inner { max-width: 1600px; }
.portfolio .list { display: flex; flex-wrap: wrap; text-align: left; }
.portfolio .item { width: 23%; margin: 1.5% 1%; }
.portfolio .img { width: 100%; margin-bottom: 0.875em; border-radius: 1em; overflow: hidden; background: no-repeat center/cover; }
.portfolio .img a { width: 100%; padding-top: 100%; display: block; }
.portfolio h5 { font-size: 1.55em; font-weight: 700; }
.portfolio p { font-size: 1.25em; color: #555; }

/* service */
.service-list { display: flex; flex-wrap: wrap; text-align: center; }
.service-item { width: 23%; margin: 1%; color: #fff; perspective: 37em; }
.service-item .icon { width: 35%; margin-bottom: 1em; }
.service-item .card { width: 100%; padding-top: 100%; position: relative; transition: 0.8s; transform-style: preserve-3d; border-radius: 1em; }  
.service-item .front,
.service-item .back { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.service-item .back { transform: rotateY(180deg); }
.service-item:hover .card { transform: rotateY(180deg); }

/* merit */
.merit-inner { max-width: 1400px; }
.merit-paging-txt { margin-top: 0.5em; }
.merit-paging-item { color: #999; cursor: pointer; display: inline-block; margin: 0 16px; font-weight: 600; }
.merit-paging-item-active { color: #0c43c8; }
.merit-img { padding: 5em 0; text-align: center; display: flex; align-items: center; justify-content: center; }
.merit-img img { width: 80%; max-width: 900px; border-radius: 1em; }

/* after */
.after-wrap { width: 100%; display: flex; align-items: center; justify-content: space-between; }
.after-con { width: 49%; padding: 5vw 7vw; display: flex; align-items: center; justify-content: center; }
.after-con.orange { background-color: #ffdf9f; }
.after-box { width: 100%; text-align: center; }
.after-box .typo-5 { margin-bottom: 1em; }
.after-list { width: 100%; display: flex; flex-wrap: wrap; color: #fff; justify-content: center; }
.after-item { width: 48%; padding-top: 48%; position: relative; margin: 1%; }
.after-item .icon { width: 35%; }
.after-item .bg1 { background-color: #FFA800; }
.after-item .bg2 { background-color: #FFC34F; }
.after-item .box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 0.5em; }
.after-list.other .after-item { width: 100%; }
.after-list.other .after-item .icon { width: 18%; }

/* partners */
.partners-list { display: flex; flex-wrap: wrap; justify-content: center; }
.partners-item { width: 16.6667%; min-width: 17em; height: 12em; padding: 1em; }
.partners-item span { background-color: #f8f8f8; padding: 2em; display: flex; justify-content: center; align-items: center; border-radius: 1em; width: 100%; height: 100%; }
.partners-item img { max-width: 100%; max-height: 100%; }

/* inquiry */
.inquiry { padding-bottom: 0; }
.inquiry-inner { width: 90%; max-width: 835px; padding-bottom: 8em; }
.inquiry-form { font-size: 1.125em; line-height: 1.89; font-weight: 800; }
.inquiry-form ::-webkit-input-placeholder { color: #aaa; font-weight: 600; }
.inquiry-form ::-moz-placeholder { color: #aaa; font-weight: 600; }
.inquiry-form :-ms-input-placeholder { color: #aaa; font-weight: 600; }
.inquiry-form ::-ms-input-placeholder { color: #aaa; font-weight: 600; }
.inquiry-form ::placeholder { color: #aaa; font-weight: 600; }
.inquiry-form li { margin-bottom: 2em; }
.inquiry-form li:last-child { margin-bottom: 0; }
.inquiry-form input[type='text'],
.inquiry-form .file-box label,
.inquiry-form textarea { height: auto; display: block; width: 100%; font-weight: 500; }
.inquiry-form input[type='text'] { padding: 1em 0; border: 0; border-bottom: 2px solid #ddd; }
.inquiry-form .file-box { margin-top: 1em; }
.inquiry-form .file-box input[type='file'] { display: none; }
.inquiry-form .file-box label { padding: 0.6em 1.5em; border: 2px solid #ddd; border-radius: 5em; cursor: pointer; color: #aaa; }
.inquiry-form textarea { padding: 1em; height: 12em; margin-top: 1em; border: 2px solid #ddd; }
.inquiry-btn { text-align: center; margin-top: 3em; }
.inquiry-btn .btn-round { font-size: 1.25em; }
.inquiry .marquee { --gap: 2em; height: 18vw; overflow: hidden; }

/* fade */
.fade-up,
.fade-down,
.fade-right,
.fade-left { opacity: 0; }
.fade-up { transform: translateY(3rem); }
.fade-down { transform: translateY(-3rem); }
.fade-right { transform: translateX(-3rem); }
.fade-left { transform: translateX(3rem); }
.fade-up.on,
.fade-down.on { -webkit-animation: fadeY 0.4s ease-out 0s 1 normal forwards; animation: fadeY 0.4s ease-out 0s 1 normal forwards; }
.fade-right.on,
.fade-left.on { -webkit-animation: fadeX 0.4s ease-out 0s 1 normal forwards; animation: fadeX 0.4s ease-out 0s 1 normal forwards; }
@-webkit-keyframes fadeY {
    100% { transform: translateY(0); opacity: 1; }
}
@keyframes fadeY {
    100% { transform: translateY(0); opacity: 1; }
}
@-webkit-keyframes fadeX {
    100% { transform: translateX(0); opacity: 1; }
}
@keyframes fadeX {
    100% { transform: translateX(0); opacity: 1; }
}


/* container */
.container { padding: 12em 0 8em; }
/* =========================================
   SERVICE 섹션 - 제목+내용 상시 노출 (컨셉 유지)
   아이콘 > 제목 > 라인 > 설명
========================================= */

/* flip 관련 제거 */
.service-item { perspective: none; }
.service-item .card{
  transform: none !important;
  transform-style: flat !important;
  transition: transform .25s ease, box-shadow .25s ease;
}

/* front/back 겹침 해제 */
.service-item .front,
.service-item .back{
  position: static !important;
  inset: auto !important;
  width: 100%;
  height: auto !important;
  backface-visibility: visible !important;
  transform: none !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* 카드 레이아웃(정사각 느낌 유지하면서 가독성 확보) */
.service-item .card{
  padding-top: 0;                 /* 기존 정사각 트릭 해제 */
  min-height: 320px;              /* 높이 통일감 */
  border-radius: 1em;
  padding: 2.4em 2.2em 2.2em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  box-shadow: 0 12px 28px rgba(0,0,0,0.12);
}

/* hover는 '뒤집기' 대신 고급스럽게 떠오르기 */
.service-item:hover .card{
  transform: translateY(-8px) !important;
  box-shadow: 0 22px 48px rgba(0,0,0,0.18);
}

/* 아이콘 */
.service-item .icon{
  width: 76px;     /* 기존 비율 유지하면서 고정값으로 안정 */
  margin: 0 0 1em 0 !important;
  opacity: .95;
}

/* 제목 */
.service-item h5{
  margin: 0 !important;
  font-weight: 800;
  font-size: 1.35em;
  line-height: 1.25;
}

/* 얇은 라인 (투명 흰색/블랙 자동대응) */
.service-item .front::after{
  content:"";
  width: 62%;
  height: 1px;
  margin: 1.2em 0 1.2em;
  background: rgba(255,255,255,0.35);
}

/* 카드 컬러가 밝을 때(노란/연두 등) 라인을 어두운 톤으로 */
.service-item .card.orange .front::after,
.service-item .card.green  .front::after{
  background: rgba(0,0,0,0.18);
}

/* 설명(내용) */
.service-item .back{
  padding: 0 !important;
}
.service-item .back p{
  margin: 0 !important;
  font-weight: 600;
  font-size: 1.25em;
  line-height: 1.65;
  text-align: center;
  opacity: .95;
}

.service-item .back p{
  display: block;
  overflow: visible;
  -webkit-line-clamp: unset;
  -webkit-box-orient: initial;
}

/* flip hover 규칙 무력화 (기존 코드에 있던 rotate 제거) */
.service-item:hover .card{ transform: translateY(-8px) !important; }

/* ===============================
   아이콘 POP 애니메이션
================================ */

/* 기본 상태 */
.service-item .icon{
  transition: 
    transform .35s cubic-bezier(.22,.61,.36,1),
    filter .35s ease;
}

/* hover 시 */
.service-item:hover .icon{
  transform: translateY(-4px) scale(1.08);
  filter: drop-shadow(0 6px 12px rgba(0,0,0,0.15));
}

/* 카드 컬러가 어두운 경우 그림자 더 자연스럽게 */
.service-item .card.pink:hover .icon,
.service-item .card.blue:hover .icon{
  filter: drop-shadow(0 6px 14px rgba(0,0,0,0.25));
}

@supports not (aspect-ratio: 1 / 1){
  .service-item .card{ 
    height: 0;
    padding-top: 100%;
    position: relative;
  }
  .service-item .front,
  .service-item .back{
    position: absolute;
    left: 0; right: 0;
    text-align: center;
    padding: 2.6em 2.2em;
  }
  .service-item .front{ top: 0; }
  .service-item .back{ top: 55%; transform: translateY(-50%); }
}

/* 포트폴리오 영역 */
/* =========================
   PORTFOLIO - 행(한줄) 단위 순차 등장
========================= */

/* 카드 기본(숨김) */
.js .portfolio .item.moveUp { opacity:0; transform: translateY(40px) scale(0.985); }

/* 등장 애니메이션 클래스 */
.portfolio .item.moveUp.on{
  animation: portfolioPop .6s cubic-bezier(.22,.61,.36,1) forwards;
}

/* 과하지 않은 '팝' */
@keyframes portfolioPop{
  0%   { opacity: 0; transform: translateY(40px) scale(0.985); }
  60%  { opacity: 1; transform: translateY(-6px) scale(1.01); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/******************************** 반응형 **********************************/
@media screen and (max-width: 1780px){
    .inner { padding-left: 2%; padding-right: 2%; }
    .portfolio-tit { padding: 0 4vw; }
}
@media screen and (max-width: 1480px){
    #header, #footer, .main { font-size: 1vw; }
    #footer { padding: 6em 0 4em; }
    .footer-box:nth-child(2) { margin-top: 5em; display: block; }
    .footer-copyright { margin-top: 1em; }

}
@media screen and (max-width: 1280px){
   #topBtn { margin-right: 0.875em; margin-bottom: 4em; }
}
@media screen and (max-width: 767px){
    .visual {padding: 11em 0 15em;}
    .main { font-size: 1.875vw; word-break: keep-all; }
    .typo-2 { font-size: 3.75em; }
    .typo-3 { font-size: 2.5em; }
    .typo-5 { font-size: 2.5em; }
    .typo-6-m { font-size: 2.375em; }
    .typo-6 { font-size: 2.25em; }
    .typo-62 { font-size: 1.95em; }
    .typo-7 { font-size:1.5em;}
    .typo-72{ font-size:1.5em;}
    .typo-7-m { font-size: 1.875em; }
    .btn-round { font-size: 4vw; }
    .portfolio .item { width: 48%; margin: 1%; }
    .portfolio h5 { font-size: 1.95em; font-weight: 700; }
    .portfolio p { font-size: 1.65em; color: #555; margin-bottom:1em;}
    /*.marquee-item.img { height: 14em; }*/
    .marquee-item.shape { width: 24vw; height: 24vw; }

    .special-box { text-align: center; }
    .special-box .typo-5-m { font-size: 2.875em; }
    .special-box:nth-child(2) { grid-column: 1; grid-row: 3; }
    .special-box1 .img { width: 80%; margin: 3em auto 0; }
    .special-box2 .img { width: 80%; margin: 3em auto 0; }
    .special-box3 .img { width: 20%; margin: 3em auto 0; }

    .cost { padding-bottom: 0; }
    .cost .inner { padding: 0; }
    .cost-list { flex-direction: column; font-size: 3.25vw; gap: 0; }
    .cost-list-item { width: 100%; padding: 8vw 6vw; margin-bottom:5em;}
    .service-item { width: 100%; margin: 0 0 1.2em; }
    .service-list { flex-direction: column;gap: 1.5em; }
    .service-item .card{ min-height: 220px; }
    .service-item h5{ font-size: 3em; }
    .service-item .icon{ width: 55px; }
    .service-item .back p{ font-size: 2.5em; }
    .merit-paging-item { margin: 0 0.5em; }
    .after-wrap { flex-direction: column; }
    .after-con { width: 98%; margin-bottom: 5%; }
    .after-item,
    .after-list.other .after-item { width: 31.33%; padding-top: 31.33%; }
    .after-item .icon,
    .after-list.other .after-item .icon { width: 40%; margin-bottom: 0.5em; }
    .inquiry-form { font-size: 4vw; }
    .inquiry-form .file-box label { border-radius: 1em; }
    .inquiry-btn .btn-round { font-size: 1.125em; }
    .inquiry .marquee { height: 24vw; }


    #header { font-size: 3vw; top: 1em; }
    .header-inner { padding: 0; }
    .header-logo { display: none; }
    .header-gnb { font-size: 0.9em; flex-grow: 1; margin-right: 0; justify-content: space-between; }
    .header-gnb-item { margin-right: 0; }
    .header-tnb { display: none; }

    #footer { padding: 8vw 5vw; font-size: 2.5vw; }
    .footer-logo { margin-bottom: 2em; }
    .footer-box { flex-direction: column; }
    .footer-info { flex-direction: column; gap: 0.5em }
    .footer-box:nth-child(1) { flex-direction: column-reverse;}

    #topBtn { font-size: 0.9em; margin-right: 1.25em; margin-bottom: 5em; }

    .kakao-chat
    {
    right: 20px;
    bottom: 20px;
    }

    .kakao-chat img
    {
    width: 45px;
    height: 45px;
    }

   
}