@charset "utf-8";

/* ************ 메인페이지 스타일 ************ */

/* 공통 */
.main .titWrap h2 {font-size:clamp(30px, 4vw, 70px); line-height:1.1;}
.main .mainpart {padding:150px 0;}
.swiper-container.w991swiper {overflow:visible;}


/* ============================================
   메인 대표화면
   ============================================ */
.maintop {min-height:100vh; position:relative; overflow:hidden; display:flex; flex-direction:column; align-items:center; justify-content:end; gap:7vh; padding:150px 0 10vh !important; background:#000 url(/images/common/bg_main.webp) no-repeat center/cover;}
.main .maintop .titWrap {color:#fff; padding:0 10vw;}
.main .maintop .titWrap .wrap {text-align:center;}
.main .maintop .titWrap h1 {font-size:clamp(30px, 5vw, 70px); color:var(--base4); line-height:1.2; letter-spacing:-.1vw;}
.main .maintop .titWrap h1 span {display:block;}
.maintop h1 .line {display:block;}
.main .maintop .titWrap .h1sub {font-size:clamp(16px, 3vw, 20px); margin-top:10px;}
.main .maintop .titWrap .desc {display:flex; flex-direction:column; color:#fff; opacity:0.5; margin-top:20px;}
.main .maintop .titWrap .desc+.desc {margin-top:0;}
.main .maintop .titWrap .desc span {display:block;}


/* ============================================
   CTA 배너존 (hero 직하단)
   ============================================ */
.ctaZone {position:relative; width:100%; padding:clamp(40px, 8vw, 80px); margin-top:10vh;}
.ctaZone .inner {position:relative;}
.ctaList {display:grid; width:100%; grid-template-columns:repeat(4, 1fr); gap:20px; list-style:none; padding:0; margin:0;}

/* 카드 공통 */
.cta-card {position:relative; list-style:none;}
.cta-card > a {position:relative; display:flex; flex-direction:column; justify-content:space-between; height:100%; min-height:300px; padding:clamp(30px, 3vw, 60px); border-radius:clamp(14px, 1.3vw, 22px); background:#f6f8fa; color:#111; overflow:hidden; transition:all .4s cubic-bezier(.2,.7,.3,1); text-decoration:none;}
.cta-card > a:hover {transform:translateY(-8px); box-shadow:0 25px 40px -15px rgba(0,0,0,.25);}

/* 배지 */
.cta-badge {position:absolute; top:25px; right:25px; z-index:3; display:block; padding:10px 20px !important; border-radius:100px; background:rgba(255,255,255,.25); color:#fff; font-size:12px; font-weight:600; line-height:1; letter-spacing:.02em;}

/* 타이틀 / 설명 */
.cta-card .cta-title {position:relative; z-index:2; font-size:clamp(20px, 2vw, 28px); font-weight:700; line-height:1.1; margin:0 0 10px;}
.cta-card .cta-title strong {font-weight:inherit;}
.cta-desc {position:relative; z-index:2; line-height:1.3; opacity:.7; margin-top:20px !important; flex:1;}

/* CTA 링크 */
.cta-link {position:relative; z-index:2; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; padding-top:15px; border-top:1px solid rgba(255,255,255,.2);}
.cta-arrow {position:relative; display:inline-block; width:18px; height:2px; background:currentColor; transition:width .3s ease;}
.cta-arrow::after {content:""; position:absolute; right:0; top:50%; width:8px; height:8px; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:translateY(-50%) rotate(45deg);}
.cta-card > a:hover .cta-arrow {width:30px;}

/* 테마 컬러 */
.cta-theme-blue > a {background:var(--blue); color:#fff;}
.cta-theme-red > a {background:var(--base1); color:#fff;}
.cta-theme-navy > a {background:var(--base2); color:#fff;}
.cta-theme-yellow > a {background:var(--base4); color:#1a1a1a;}
.cta-theme-yellow .cta-badge {background:rgba(0,0,0,.15); color:#1a1a1a;}
.cta-theme-yellow .cta-link {border-top-color:rgba(0,0,0,.15);}
.cta-theme-yellow > a::before {background:rgba(0,0,0,.06);}
.cta-theme-dark > a {background:#1a1a1a; color:#fff;}


/* ============================================
   카테고리
   ============================================ */
.category {display:flex; justify-content:center; margin-top:20px !important;}
.category li:first-child a {border-radius:10px 0 0 10px;}
.category li:last-child a {border-radius:0 10px 10px 0;}
.category li+li {margin-left:-1px;}
.category a {display:block; color:#000; padding:20px 40px; font-size:clamp(16px, 1vw, 20px); font-weight:500; line-height:1; background:#fff; border:1px solid var(--border);}
.category a:hover {background:var(--base3); color:#fff; border-color:var(--base3);}
.category .active {background:var(--blue); color:#fff; border-color:var(--blue);}


/* ============================================
   제작실적
   ============================================ */
.mainpart.production {text-align:center;}
.mainpart.production .titWrap > p {margin-top:30px; opacity:0.5;}
.mainpart.production .flip-cardWrap {display:grid; grid-template-columns:repeat(4,1fr); gap:40px; margin-top:70px;}
.flip-card {display:block; background-color:transparent; width:100%; height:100%; perspective:1000px;}
.mainpart.production .flip-cardWrap li {z-index:1; place-self:center; width:100%; aspect-ratio:415/600;}
.mainpart.production .flip-cardWrap li:hover {z-index:10;}
.mainpart.production .flip-card-front img, .mainpart.production .flip-card-back img {object-fit:cover; width:100%; height:100%; object-position:top; border-radius:clamp(10px, 1.2vw, 20px); box-shadow:30px 30px 20px rgba(0,0,0,.1);}
.flip-card-inner {position:relative; width:100%; height:100%; transition:transform 1s; transform-style:preserve-3d;}
.flip-card:hover .flip-card-inner {transform:rotateY(180deg);}
.flip-card-front, .flip-card-back {position:absolute; width:100%; height:100%; backface-visibility:hidden; border:1px solid #ccc; display:flex; align-items:center; justify-content:center; font-size:1.2em;}
.flip-card-front {color:#000;}
.flip-card-back {color:#fff; transform:rotateY(180deg);}
.mainpart.production .txt {position:absolute; bottom:10%;}
.mainpart.production .txt dt {font-size:clamp(16px,1.5vw,20px); font-weight:600; line-height:1.2;}
.mainpart.production .txt dt span {display:block;}
.mainpart.production .txt dd {font-size:clamp(12px,1.2vw,16px); color:var(--base2);}
.mainpart.production .txt.white dt, .mainpart.production .txt.white dd {color:#fff;}


/* ============================================
   제공 서비스
   ============================================ */
.mainpart.service {position:relative; background:url(/images/main/bg_mainpart_typeG.webp) no-repeat center / cover; inset:0;}
.mainpart.service:before {content:""; display:block; background:rgba(0,0,0,0.3); width:100%; height:100%; z-index:1; position:absolute; top:0;}
.mainpart.service .inner {position:relative; z-index:2;}
.mainpart.service h2 {color:#fff;}
.mainpart.service .titWrap {color:#fff; text-align:center;}
.mainpart.service .titWrap dl {margin-top:50px;}
.mainpart.service .titWrap dt {font-size:24px; line-height:1.3;}
.mainpart.service .titWrap dd {opacity:0.5; margin-top:20px;}
.mainpart.service .squareWrap {display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:100px; justify-content:center;}
.mainpart.service .squareWrap li a {display:block; padding:clamp(30px,2vw,50px); box-sizing:border-box; background:#fff; border-radius:clamp(10px, 1.2vw, 20px); width:100%; height:100%;}
.mainpart.service .squareWrap li .tit {display:flex; justify-content:space-between;}
.mainpart.service .squareWrap li .tit h3 {color:#000; font-size:clamp(20px, 1.7vw, 24px); font-weight:560; line-height:1.2;}
.mainpart.service .squareWrap li .tit h3 span {display:block;}
.mainpart.service .squareWrap li p {color:var(--base2); opacity:0.7; margin-top:30px; letter-spacing:-0.5px;}
.mainpart.service .squareWrap li a:hover {background:var(--blue);}
.mainpart.service .squareWrap li a:hover .tit h3 {color:#fff;}
.mainpart.service .squareWrap li a:hover p {color:#fff;}
.mainpart.service .squareWrap .tit .googleIcon {display:flex; align-items:center; justify-content:center; flex:0 0 clamp(52px, 3.125vw, 72px); width:clamp(52px, 3.125vw, 72px); aspect-ratio:1/1; border-radius:50%; background:#f4f6fb; color:#000;}
.mainpart.service .squareWrap .tit .googleIcon svg {display:block; width:52%; height:52%; fill:var(--blue);}
.mainpart.service .squareWrap li a:hover .googleIcon {background:#fff; color:var(--blue);}


/* ============================================
   홈페이지 제작과정
   ============================================ */
.mainpart.process {background:#f2f3f8;}
.mainpart.process .titWrap h2 {color:#000;}
.mainpart.process .titWrap p {color:var(--base2); margin-top:30px; text-align:center;}
.mainpart.process .titWrap p strong {display:inline-block; font-weight:600; color:#fff; background:var(--blue); padding:10px 20px; border-radius:7px; margin-bottom:8px;}
.mainpart.process .squareWrap {display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:100px; justify-content:center;}
.mainpart.process .squareWrap > li {width:100%; background:#fff; padding:clamp(30px,3vw,50px); box-shadow:25px 30px 29px 0 rgba(100,100,111,.2); box-sizing:border-box; border-radius:clamp(10px, 1.2vw, 20px);}
.mainpart.process .squareWrap > li .num {font-size:clamp(32px, 4vw, 64px); color:rgba(35,65,125,0.2); display:block; position:relative; font-weight:700; line-height:1;}
.mainpart.process .squareWrap > li .num:before {content:""; display:block; width:50px; height:2px; background:var(--base2); border-radius:0 2px 2px 0; position:absolute; right:0; bottom:24px;}
.mainpart.process .squareWrap > li .num:after {content:""; display:block; width:20px; height:2px; background:var(--base2); border-radius:0 2px 2px 0; transform:rotate(45deg); position:absolute; right:-2px; bottom:32px;}
.mainpart.process .squareWrap > li:last-child .num:before, .mainpart.process .squareWrap > li:last-child .num:after {display:none;}
.mainpart.process .squareWrap > li dt {font-size:clamp(22px, 1.7vw, 32px); font-weight:600; color:#000; margin-top:20px;}
.mainpart.process .squareWrap > li dd {color:var(--base2); margin-top:15px;}
.mainpart.process .squareWrap > li > ul {margin-top:20px;}
.mainpart.process .squareWrap > li > ul li {border:1px solid var(--border); color:var(--base2); border-radius:7px; padding:15px 20px; text-align:left; line-height:1; background:url(/images/main/i-check_navy.svg) no-repeat 94% center; font-size:15px; letter-spacing:-0.3px;}
.mainpart.process .squareWrap > li > ul li.on {background:var(--base2) url(/images/main/i-check_W.svg) no-repeat 94% center; color:#fff; border:1px solid var(--base2);}
.mainpart.process .squareWrap > li > ul li+li {margin-top:5px;}


/* ============================================
   제작후기
   ============================================ */
.mainpart.reviews {text-align:center;}
.mainpart.reviews .commentWrap {display:grid; grid-template-columns:repeat(4,1fr); margin-top:50px;}
.mainpart.reviews .commentWrap li {position:relative; padding:30px;}
.mainpart.reviews .commentWrap dl {margin-top:30px;}
.mainpart.reviews .commentWrap dt {font-size:clamp(18px,1.5vw,24px); font-weight:500;}
.mainpart.reviews .commentWrap dd {color:var(--base2); word-break:break-all; margin-top:10px;}
.mainpart.reviews .commentWrap li .circle {display:block; width:clamp(70px,10vw,120px); aspect-ratio:1/1; margin:0 auto; border-radius:50%;}
.mainpart.reviews .commentWrap li .circle.face1 {background:#f2f2f2 url(/images/main/mainpart_typeH_face1.png) no-repeat center / cover;}
.mainpart.reviews .commentWrap li .circle.face2 {background:#f2f2f2 url(/images/main/mainpart_typeH_face2.png) no-repeat center / cover;}
.mainpart.reviews .commentWrap li .circle.face3 {background:#f2f2f2 url(/images/main/mainpart_typeH_face3.png) no-repeat center / cover;}
.mainpart.reviews .commentWrap li .circle.face4 {background:#f2f2f2 url(/images/main/mainpart_typeH_face4.png) no-repeat center / cover;}


/* ============================================
   FAQ 팝업 열기 버튼
   ============================================ */
.faqBtnWrap {margin-top:60px !important; display:flex; justify-content:center; text-align:center;}
.faqOpenBtn {display:flex; align-items:center; gap:25px; padding:25px 40px; background:#fff; border-radius:clamp(10px, 1.2vw, 20px); text-align:center; transition:all .3s ease; max-width:700px; width:100%; cursor:pointer;  border: 1px solid #efefef !important;}
.faqOpenBtn:hover {border-color:var(--blue); background:var(--blue); transform:translateY(-3px); box-shadow:0 15px 30px rgba(53,81,196,.2);}
.faqOpenBtn .faq-icon {flex:0 0 56px; width:56px; height:56px; display:flex; align-items:center; justify-content:center; background:var(--bg1); border-radius:50%; transition:all .3s ease;}
.faqOpenBtn .faq-icon svg {width:28px; height:28px; fill:var(--blue); transition:all .3s ease;}
.faqOpenBtn:hover .faq-icon {background:rgba(255,255,255,.2);}
.faqOpenBtn:hover .faq-icon svg {fill:#fff;}
.faqOpenBtn .faq-text {flex:1; display:flex; flex-direction:column; gap:5px;}
.faqOpenBtn .faq-text strong {font-size:clamp(16px, 1.4vw, 20px); font-weight:600; color:#000; line-height:1.3; transition:color .3s ease;}
.faqOpenBtn .faq-text em {font-style:normal; font-size:14px; color:var(--gray1); transition:color .3s ease;}
.faqOpenBtn:hover .faq-text strong, .faqOpenBtn:hover .faq-text em {color:#fff;}
.faqOpenBtn .faq-arrow {flex:0 0 40px; width:40px; height:40px; display:flex; align-items:center; justify-content:center; background:var(--bg1); border-radius:50%; font-size:24px; font-weight:300; color:var(--blue); transition:all .3s ease;}
.faqOpenBtn:hover .faq-arrow {background:#fff; transform:rotate(90deg);}


/* ============================================
   FAQ 팝업 본체
   ============================================ */
.faqPopOverlay {position:fixed; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,.6); z-index:99998; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease;}
.faqPopOverlay.active {opacity:1; visibility:visible;}
.faqPopup {position:fixed; left:50%; top:50%; transform:translate(-50%,-50%) scale(.95); width:90%; max-width:1000px; max-height:85vh; background-color:#fff; z-index:99999; box-sizing:border-box; overflow-y:auto; display:flex; flex-direction:column; opacity:0; visibility:hidden; transition:opacity .3s ease, visibility .3s ease, transform .3s ease;}
.faqPopup.active {opacity:1; visibility:visible; transform:translate(-50%,-50%) scale(1);}
.faqPopup .closeBtn {position:absolute; right:25px; top:25px; background:url(/images/common/icon_close.png) no-repeat center / 20px; width:30px; height:30px; z-index:10; border:0; cursor:pointer;}

/* 팝업 헤더 */
.faqPopup .popHead {padding: clamp(40px, 5vw, 80px);}
.faqPopup .popTag {display:inline-block; padding:6px 16px; background:var(--blue); color:#fff; font-size:13px; font-weight:600; letter-spacing:.05em; border-radius:100px; margin-bottom:15px;}
.faqPopup .popHead h2 {font-size:clamp(22px, 2.2vw, 30px); line-height:1.3; color:#000; font-weight:400; word-break:keep-all;}
.faqPopup .popHead h2 strong {color:var(--blue); font-weight:700;}
.faqPopup .popHead p {margin-top:12px; color:var(--gray1); font-size:15px; line-height:1.5; word-break:keep-all;}

/* 팝업 본문 (Q&A) */
.faqPopup .popBody {padding: clamp(40px, 5vw, 80px); padding-top:0; overflow-y:auto; flex:1;}
.faqPopup .popBody dl {padding:25px 0; border-top:1px solid var(--border); position:relative;}
.faqPopup .popBody dl:first-child {border-top:none;}
.faqPopup .popBody dt {font-size:clamp(16px, 1.2vw, 18px); font-weight:600; color:#000; padding-left:35px; line-height:1.4; position:relative; word-break:keep-all;}
.faqPopup .popBody dt:before {content:"Q"; position:absolute; left:0; top:-2px; width:24px; height:24px; border-radius:50%; background:var(--blue); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;}
.faqPopup .popBody dd {margin-top:12px; padding-left:35px; color:var(--base2); line-height:1.6; font-size:15px; word-break:keep-all; position:relative;}
.faqPopup .popBody dd:before {content:"A"; position:absolute; left:0; top:-2px; width:24px; height:24px; border-radius:50%; background:var(--base1); color:#fff; display:flex; align-items:center; justify-content:center; font-size:13px; font-weight:700;}

/* 팝업 푸터 */
.faqPopup .popFoot {padding:40px; background:var(--bg1); border-top:1px solid var(--border);}
.faqPopup .popInquireBtn {display:flex; align-items:center; justify-content:center; gap:10px; padding:20px; background:var(--base1); color:#fff; border-radius:10px; font-size:18px; font-weight:600; text-align:center; transition:all .3s ease;}
.faqPopup .popInquireBtn:hover {background:var(--blue); transform:translateY(-2px); box-shadow:0 10px 20px rgba(53,81,196,.3);}


/* ============================================
   PC ~ 태블릿 (~1249)
   ============================================ */
@media screen and (max-width:1249px) {
	.main .mainpart {padding:100px 0;}

	/* 메인 최상단 */
	.maintop {padding:20vh 0 60px !important;}

	/* CTA 배너존 */
	.ctaList {grid-template-columns:repeat(2, 1fr);}
	.cta-card > a {min-height:240px;}

	/* 카테고리 */
	.category a {padding:1.7vw 2vw;}

	/* 제작실적 */
	.mainpart.production .titWrap > p {margin-top:25px;}
	.mainpart.production .flip-cardWrap {grid-template-columns:repeat(3,1fr); margin:70px auto 0;}
	.mainpart.production .flip-card {width:100%; height:100%;}

	/* 제공 서비스 */
	.mainpart.service .squareWrap {grid-template-columns:repeat(2,1fr);}

	/* 홈페이지 제작과정 */
	.mainpart.process .squareWrap {grid-template-columns:repeat(2,1fr); margin-top:40px;}

	/* 제작후기 */
	.main .mainpart.reviews {padding:100px 0 80px;}
	.mainpart.reviews .commentWrap {grid-template-columns:repeat(2,1fr); gap:40px 20px;}
}


/* ============================================
   태블릿 (~991)
   ============================================ */
@media screen and (max-width:991px) {
	.swiper-container.w991swiper {overflow:hidden;}
	.main .mainpart {padding:80px 0;}

	/* 카테고리 */
	.category {display:grid; grid-template-columns:repeat(2,1fr); gap:5px;}
	.category a {padding:4vw 1vw; border-radius:10px !important;}
	.category li:first-child {grid-column:span 2;}

	/* 제작실적 */
	.mainpart.production .flip-cardWrap {grid-template-columns:repeat(3,1fr); width:100%; gap:50px 10px; margin:50px auto 0;}
	.mainpart.production .flip-card {width:100%; height:100%;}

	/* 제공 서비스 */
	.mainpart.service .titWrap dl {margin-top:35px;}
	.mainpart.service .squareWrap {display:grid; margin-top:40px; gap:10px; justify-content:start;}

	/* 홈페이지 제작과정 */
	.mainpart.process .titWrap p {margin-top:20px;}
	.mainpart.process .squareWrap {grid-template-columns:repeat(2,1fr);}

	/* 제작후기 */
	.mainpart.reviews .commentWrap li {padding:0;}
    .mainpart.reviews .faqBtnWrap {margin-top:40px;}
   
}


/* ============================================
   모바일 (~767)
   ============================================ */
@media screen and (max-width:767px) {
	.main .mainpart {padding:60px 0;}
	.main .mainpart.reviews {padding:60px 0 40px;}
	.main .titWrap h2 {word-break:break-all;}
	.main .maintop {min-height:100vh; background:#000 url(/images/common/bg_main_mob2.webp) no-repeat center/cover;}
	.main .maintop .titWrap .desc {margin-top:3vh; line-height:1.4;}
	.cta-desc {flex:0; margin-top:0!important;}
	.cta-card > a {min-height:210px;}
	/* 메인 최상단 */
	.maintop .inner {flex-direction:column; padding:0 20px;}
	.main .maintop .titWrap h1+p {font-size:14px;}

	/* CTA 배너존 */
	.ctaList {grid-template-columns:1fr; gap:12px;}
	.cta-badge {top:20px; right:20px; font-size:11px; padding:4px 10px;}


	/* 제작실적 */
	.mainpart.production .flip-cardWrap {grid-template-columns:repeat(2,1fr); margin:20px auto 0; gap:10px;}

	/* 제공 서비스 */
	.mainpart.service .titWrap dl {margin-top:30px;}
	.mainpart.service .titWrap dt {font-size:18px;}
	.mainpart.service .squareWrap {grid-template-columns:repeat(1,1fr);}

	/* 홈페이지 제작과정 */
	.mainpart.process .squareWrap {grid-template-columns:repeat(1,1fr); gap:10px;}
	.mainpart.process .squareWrap > li .num:before, .mainpart.process .squareWrap > li .num:after {display:none;}
	.mainpart.reviews .commentWrap {grid-template-columns:1fr;}
	/* FAQ 팝업 */
	.faqOpenBtn {flex-direction:column; align-items: center; padding:20px 30px; gap:10px;}
    .mainpart.reviews .faqBtnWrap {margin-top:32px;}
	
}