@charset "utf-8";

/* ************ 메인페이지 스타일 ************ */
/* 공통 */
.main .titWrap h2 {font-size:70px; line-height:1.1;} 
.main .mainpart {padding:150px 0;}
.swiper-container.w991swiper {overflow:visible;}

/* 탭 */
.tab-wrapper {overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; text-align:center;}
.tab-wrapper::-webkit-scrollbar {display:none;}
.tab-scroll {display:inline-flex; cursor:grab; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; }
.tab-scroll, .tab-item, .tab-item > button {user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
  -webkit-user-drag:none;}
.tab-wrapper:active .tab-scroll {cursor:grabbing;}
.tab-wrapper.typeA .tab-scroll {border:1px solid #DDE1EB!important; border-radius:10px; overflow:hidden;}
.tab-wrapper.typeA .tab-item > button {display:block; color:#000; font-weight:600; padding:20px 40px; font-size:20px; white-space:nowrap; user-select:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; line-height:1.1; transition:none; background:#fff;}
.tab-wrapper.typeA .tab-item+.tab-item>button {border-left:1px solid #DDE1EB; }
.tab-wrapper.typeA .tab-item.active button {background:var(--blue); color:#fff;}


/* 메인 대표화면 */
.maintop {height:100vh; min-height:800px; position:relative; overflow:hidden; display:flex; align-items:center; justify-content:center; padding-top:100px !important;}
.maintop .cover {position:absolute; width:100%; height:100%; left:0; top:0; background:url("/assets/user/images/common/bg_main.webp") no-repeat center/cover; transform:scale(1.2); transition:2s ease;}
.maintop .cover.active {transform:scale(1);}
.maintop .cover:after {content:""; position:absolute; left:0; top:0; width:100%; height:100vh; background:rgba(0,0,0,0.1); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); /* 사파리 호환 */ z-index:1;}
.maintop .inner {display:flex; gap:5vw; width:90vw; justify-content:space-between; position:relative; z-index:2; transform:scale(.9); transition:1.5s ease; opacity:0;}
.maintop .inner.active {transform:scale(1); opacity:1;}

.main .maintop .titWrap {color:#fff;}
.main .maintop .titWrap .wrap {margin-top:7vh;}
.main .maintop .titWrap h1 {font-size:clamp(30px, 6vw, 60px); color:var(--base4); line-height:1.2;}
.main .maintop .titWrap h1 span {display:block;}
.main .maintop .titWrap .h1sub {font-size:clamp(20px, 3vw, 24px); line-height:1.2; margin-top:10px;}
.main .maintop .titWrap .desc {display:flex; flex-direction:column; color:#fff; opacity:0.5;  margin-top:3vh;}
.main .maintop .titWrap .desc span {display:block;}

.main .maintop .scroll_down {display:flex; align-items:center; gap:10px; position:absolute; left:0; bottom:0; transform:translateX(-100%) rotate(90deg); transform-origin:right bottom;}
.main .maintop .scroll_down span {position:relative; display:flex; font-size:10px; font-weight:600; letter-spacing:2px; line-height:1;}
.main .maintop .scroll_down .icon {position:relative; width:25px; height:13px; border:2px solid rgba(255,255,255,.3); border-radius:100px; overflow:hidden;}
.main .maintop .scroll_down .icon:after {content:""; position:absolute; top:5px; left:0; width:7px; height:3px; border-radius:50%; background:#fff; animation:scrollAni 1s infinite;}
@keyframes scrollAni {
	from {left:0; opacity:0;}
	50%{opacity:1;}
	to {left:calc(100% - 10px); opacity:0;}
}

.maintop h2 {color:#fff;}
.maintop h2 .empha {color:var(--base1);}
.maintop .banner1 {width:500px; height:650px; border-radius:20px; overflow:hidden;}
.maintop .banner1 img {aspect-ratio:5/6.5; object-fit:cover; width:100%;}

@keyframes ani_slideDown {
	from{transform:translateY(-35px); opacity:0;}
	50%{transform:translateY(0);opacity:1;}
	to{transform:translateY(35px); opacity:0;}
}


/* 홈페이지 제작과정 */
.mainpart.process {background:#f2f3f8; text-align:center;}
.mainpart.process .titWrap h2 {color:#000;}
.mainpart.process .titWrap p {color:var(--base2); font-size:24px; font-weight:500; margin-top:30px;}
.mainpart.process .titWrap p strong {font-weight:500; display:inline-block; color:#fff; background:var(--blue); padding:3px 15px; border-radius:7px;}
.mainpart.process .squareWrap.desktop {display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:100px; justify-content:center;}


/* ************************ 태블릿 (~1499) ************************ */
@media screen and (max-width:1499px) { 
	.mainpart.process .squareWrap.desktop {grid-template-columns:repeat(2,1fr);}
}

.mainpart.process .squareWrap > li {width:100%; background:#fff; padding:50px 30px; box-shadow:rgba(100, 100, 111, 0.2) 25px 30px 29px 0px; box-sizing:border-box; border-radius:20px;}
.mainpart.process .squareWrap > li .num {font-size:64px; color:rgba(35,65,125,0.2); display:block; position:relative; font-weight:900; 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:32px; font-weight:800; color:#000; margin-top:20px;}
.mainpart.process .squareWrap > li dd {color:var(--base2); margin-top:15px; line-height:1.5;}
.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; font-weight:600; line-height:1; background:url(/assets/user/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(/assets/user/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.production {text-align:center;}
.mainpart.production .tab-wrapper {margin-top:50px;}
.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 {aspect-ratio:415/600; object-fit:cover; height:100%; object-position:top; border-radius: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:black;}
.flip-card-back {color:white; transform:rotateY(180deg);}
.mainpart.production .txt {position:absolute; bottom:70px; font-weight:700;}
.mainpart.production .txt dt {font-size:24px; color:#000; line-height:1;}
.mainpart.production .txt dt span {font-size:20px; display:block;}
.mainpart.production .txt dd {font-size:16px; color:var(--base2); margin-top:10px;}
.mainpart.production .txt.white dt, .mainpart.production .txt.white dd {color:#fff;}


/* 제공 서비스 */
.mainpart.service {position:relative; background:url(/assets/user/images/main/bg_mainpart_typeG.webp) no-repeat center / cover;}
.mainpart.service h2 {color:#fff;}
.mainpart.service:before {content:""; display:block; background:rgba(0,0,0,0.3) no-repeat center / cover; width:100%; height:100%; z-index:1; position:absolute; top:0;}
.mainpart.service .inner {position:relative; z-index:2;}
.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;}


/* ************************ 태블릿 (~1499) ************************ */
@media screen and (max-width:1499px) { 
	.mainpart.service .squareWrap {grid-template-columns:repeat(2,1fr); margin-top:80px;}
}
.mainpart.service .squareWrap li {padding:50px; box-sizing:border-box; background:#fff; border-radius:20px; width:100%;}
.mainpart.service .squareWrap li:hover {background:var(--blue);}
.mainpart.service .squareWrap li .tit {display:flex; justify-content:space-between;}
.mainpart.service .squareWrap li .tit h3 {color:#000; font-size:28px; font-weight:700;}
.mainpart.service .squareWrap li:hover .tit h3 {color:#fff;}
.mainpart.service .squareWrap li .tit h3 span {font-size:16px; display:block; margin-top:10px;}
.mainpart.service .squareWrap li .tit img {width:60px; height:50px; object-fit:contain;}
.mainpart.service .squareWrap li p {color:var(--base2); opacity:0.7; margin-top:30px; letter-spacing:-0.5px;}
.mainpart.service .squareWrap li:hover p {color:#fff;}
.mainpart.service .squareWrap li:hover .tit img {filter:invert(1);}


/* 제작후기 */
.main .mainpart.reviews {padding:150px 0 100px;}
.mainpart.reviews {text-align:center;}
.mainpart.reviews .squareWrap li p {color:var(--base2); opacity:0.7; margin-top:30px; letter-spacing:-0.5px;}
.mainpart.reviews .commentWrap {display:grid; grid-template-columns:repeat(4,1fr); margin-top:50px;}
.mainpart.reviews .commentWrap li {position:relative;}
.mainpart.reviews .commentWrap li+li:before {content:""; height:100px; width:1px; background:var(--border); position:absolute; left:0; top:0; }
.mainpart.reviews .commentWrap li:nth-child(2n-1) {padding-right:50px;}
.mainpart.reviews .commentWrap li:nth-child(2n) {padding-left:50px;}
.mainpart.reviews .commentWrap li:nth-child(2) {padding-right:50px;}
.mainpart.reviews .commentWrap li:nth-child(3) {padding-left:50px;}
.mainpart.reviews .commentWrap dl {margin-top:30px;}
.mainpart.reviews .commentWrap dt {font-size:24px; font-weight:700;}
.mainpart.reviews .commentWrap dd {color:var(--base2); word-break:break-all; margin-top:10px;}
.mainpart.reviews .commentWrap li .circle {display:block; width:120px; height:120px; margin:0 auto; border-radius:50%;}
.mainpart.reviews .commentWrap li .circle.face1 {background:
#f2f2f2 url(/assets/user/images/main/mainpart_typeH_face1.png) no-repeat center / cover;}
.mainpart.reviews .commentWrap li .circle.face2 {background:#f2f2f2 url(/assets/user/images/main/mainpart_typeH_face2.png) no-repeat center / cover;}
.mainpart.reviews .commentWrap li .circle.face3 {background:#f2f2f2 url(/assets/user/images/main/mainpart_typeH_face3.png) no-repeat center / cover;}
.mainpart.reviews .commentWrap li .circle.face4 {background:#f2f2f2 url(/assets/user/images/main/mainpart_typeH_face4.png) no-repeat center / cover;}


/* ************************ 태블릿 (~1249) ************************ */
@media screen and (max-width:1249px) {
	.main .mainpart {padding:100px 0;}
	.main .titWrap h2 {font-size:50px;}	
	.tab-wrapper.typeA .tab-item > a {font-size:18px; padding:15px 35px;}

	/* 메인 최상단 */
	.maintop {height:auto; min-height:auto; padding:10vh 0 !important;}	
	.maintop .banner1 {height:auto; width:100%;}

	/* 홈페이지 제작과정 */
	.mainpart.process .titWrap p {font-size:20px;}
	.mainpart.process .squareWrap.desktop {margin-top:60px;}

	/* 제작실적 */
	.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.production .flip-card-back:after {background-size:40px;}
	.mainpart.production .txt {bottom:40px;}
	.mainpart.production .txt dt {font-size:24px;}
	.mainpart.production .txt dt span {font-size:16px; margin-top:5px;}
	.mainpart.production .txt dd {margin-top:0;}
	.mainpart.production .tab-wrapper {margin-top:40px;}

	/* 제공 서비스 */
	.mainpart.reviews .commentWrap.desktop {grid-template-columns:repeat(2,1fr); row-gap:50px;}
	.mainpart.reviews .commentWrap.desktop li:nth-child(2n-1) {margin-left:0; padding-left:0;}
	.mainpart.reviews .commentWrap.desktop li:nth-child(3):before {display:none;}
	.mainpart.reviews .commentWrap.desktop li:nth-child(2) {padding-right:0;}
	.mainpart.reviews .commentWrap.desktop dd {max-width:350px; margin:10px auto 0;}

	/* 제작후기 */
	.main .mainpart.reviews {padding:100px 0 80px;}
}

/* ************************ 태블릿 (~991) ************************ */
@media screen and (max-width:991px) {
	.swiper-container.w991swiper {overflow:hidden;}	
	.main .titWrap h2 {font-size:30px;}
	.main .mainpart {padding:80px 0;}
	
	/* 메인 대표화면 */

	/* 홈페이지 제작과정 */
	.mainpart.process .titWrap p {font-size:18px; margin-top:50px;}
	.mainpart.process .squareWrap { }
	.mainpart.process .squareWrap.desktop {display:none;}
	.tab-wrapper.typeA .tab-item > a {font-size:16px;} 
	.mainpart.process .squareWrap-clone {margin-top:50px;}
	.mainpart.process .squareWrap-clone > li {width:100%; background:#fff; padding:50px 30px; box-shadow:none; box-sizing:border-box; border-radius:20px; height:auto;}
	.mainpart.process .squareWrap-clone > li .num {font-size:45px; color:rgba(35,65,125,0.2); display:block; position:relative; font-weight:900; line-height:1;}
	.mainpart.process .squareWrap-clone > li .num:before {content:""; display:block; width:50px; height:2px; background:var(--base2); border-radius:0 2px 2px 0; position:absolute; right:0; bottom:14px;}
	.mainpart.process .squareWrap-clone > 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:22px;}
	.mainpart.process .squareWrap-clone > li:last-child .num:before, .mainpart.process .squareWrap > li:last-child .num:after {display:none;}
	.mainpart.process .squareWrap-clone > li dt {font-size:24px; font-weight:800; color:#000; margin-top:10px;}
	.mainpart.process .squareWrap-clone > li dd {color:rgba(35,65,125,0.5); margin-top:15px; line-height:1.5;}
	.mainpart.process .squareWrap-clone > li > ul {margin-top:20px;}
	.mainpart.process .squareWrap-clone > li > ul li {border:1px solid var(--border); color:var(--base2); border-radius:7px; padding:15px 20px; text-align:left; font-weight:600; line-height:1; background:url(/assets/user/images/main/i-check_navy.svg) no-repeat 94% center; font-size:15px; letter-spacing:-0.3px;}
	.mainpart.process .squareWrap-clone > li > ul li.on {background:var(--base2) url(/assets/user/images/main/i-check_W.svg) no-repeat 94% center; color:#fff; border:1px solid var(--base2);}
	.mainpart.process .squareWrap-clone > li > ul li+li {margin-top:5px;}

	/* 제작실적 */
	.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.production .txt {bottom:30px;}
	.mainpart.production .txt dt {font-size:20px;}

	/* 제공 서비스 */
	.mainpart.service .titWrap dl {margin-top:35px;}
	.mainpart.service .titWrap dt {font-size:20px;}
	.mainpart.service .titWrap dd {font-size:16px;}
	.mainpart.service .squareWrap {display:grid; margin-top:60px; gap:20px; justify-content:start;}
	.mainpart.service .swiper-container.w991swiper {margin-top:40px;}
	.mainpart.service .squareWrap-clone li {padding:50px; box-sizing:border-box; background:#fff; border-radius:20px; width:100%; transition:all 0.3s;}
	.mainpart.service .squareWrap-clone li:hover {background:var(--blue);}
	.mainpart.service .squareWrap-clone li .tit {display:flex; justify-content:space-between;}
	.mainpart.service .squareWrap-clone li .tit h3 {color:#000; font-size:24px; font-weight:700;}
	.mainpart.service .squareWrap-clone li:hover .tit h3 {color:#fff;}
	.mainpart.service .squareWrap-clone li .tit h3 span {font-size:16px; display:block; margin-top:10px;}
	.mainpart.service .squareWrap-clone li .tit img {width:45px; height:50px; object-fit:contain;}
	.mainpart.service .squareWrap-clone li p {color:var(--base2); opacity:0.7; margin-top:30px; letter-spacing:-0.5px;}
	.mainpart.service .squareWrap-clone li:hover p {color:#fff;}
	.mainpart.service .squareWrap-clone li:hover .tit img {filter:invert(1);}

	/* 제작후기 */	
	.mainpart.reviews .squareWrap-clone li {position:relative;}
	.mainpart.reviews .squareWrap-clone li+li:before {content:""; height:100px; width:1px; background:var(--border); position:absolute; left:0; top:0; display:none;}
	.mainpart.reviews .squareWrap-clone li:nth-child(2n-1) {}
	.mainpart.reviews .squareWrap-clone li:nth-child(2n) {}
	.mainpart.reviews .squareWrap-clone li:nth-child(2) {}
	.mainpart.reviews .squareWrap-clone li:nth-child(3) {}
	.mainpart.reviews .squareWrap-clone dl {margin-top:30px;}
	.mainpart.reviews .squareWrap-clone dt {font-size:24px; font-weight:700;}
	.mainpart.reviews .squareWrap-clone dd {color:var(--base2); word-break:break-all; margin-top:10px; max-width:400px; margin:10px auto 0;}
	.mainpart.reviews .swiper-container.w991swiper {margin-top:40px;} 
	.mainpart.reviews .squareWrap-clone li .circle {display:block; width:120px; height:120px; margin:0 auto; border-radius:50%;}
	.mainpart.reviews .squareWrap-clone li .circle.face1 {background:
	#f2f2f2 url(/assets/user/images/main/mainpart_typeH_face1.png) no-repeat center / cover;}
	.mainpart.reviews .squareWrap-clone li .circle.face2 {background:#f2f2f2 url(/assets/user/images/main/mainpart_typeH_face2.png) no-repeat center / cover;}
	.mainpart.reviews .squareWrap-clone li .circle.face3 {background:#f2f2f2 url(/assets/user/images/main/mainpart_typeH_face3.png) no-repeat center / cover;}
	.mainpart.reviews .squareWrap-clone li .circle.face4 {background:#f2f2f2 url(/assets/user/images/main/mainpart_typeH_face4.png) no-repeat center / cover;}
}


@media screen and (max-width:767px) {
	.main .mainpart {padding:60px 0;} 
	.main .mainpart.reviews {padding:60px 0 40px;}
	.main .titWrap h2 {font-size:24px; word-break:break-all;}
	
	/* 메인 최상단 */
	.maintop .inner {flex-direction:column;}
	.main .maintop .titWrap h1+p {font-size:14px;}

	/* 홈페이지 제작과정 */
	.mainpart.process .squareWrap-clone {grid-template-columns:repeat(1,1fr); margin-top:40px;}
	.mainpart.process .squareWrap-clone > li {min-height:auto; padding:30px 20px; height:auto;}
	.mainpart.process .squareWrap-clone > li dt {font-size:20px;}
	.mainpart.process .squareWrap-clone > li dd {margin-top:10px;}
	.mainpart.process .squareWrap-clone > li .num {font-size:36px;}
	.mainpart.process .titWrap p {font-size:16px;}
	.tab-wrapper.typeA .tab-item > a {padding:13px 25px; font-size:15px;}
	/* 제작실적 */
	.mainpart.production .tab-wrapper {margin-top:30px;}
	.mainpart.production .flip-cardWrap {grid-template-columns:repeat(2,1fr); margin:40px auto 0;}

	/* 제공 서비스 */
	.mainpart.service .titWrap dl {margin-top:30px;}
	.mainpart.service .titWrap dt {font-size:18px;}
	.mainpart.service .squareWrap-clone {margin-top:40px; gap:0;}
	.mainpart.service .squareWrap-clone li {padding:35px 30px;}
	.mainpart.service .squareWrap-clone li .tit h3 {font-size:20px;}
	.mainpart.service .squareWrap-clone li .tit h3 span {font-size:15px;}
	.mainpart.service .squareWrap-clone li p {margin-top:20px;}

	.mainpart.service .swiper-container.w991swiper {margin-top:0px;}

	/* 제작후기 */
	.mainpart.reviews .squareWrap-clone {margin-top:40px;}
	.mainpart.reviews .squareWrap-clone dt {font-size:20px;}
	.mainpart.reviews .squareWrap-clone dl {margin-top:20px;}
	.mainpart.reviews .swiper-container.w991swiper {margin-top:0;}
}


@media screen and (max-width:500px) {
	.main .mainpart {padding:50px 0;}
	/* 메인 최상단 */
	.maintop .banner1 {width:auto; height:auto;}

	/* 홈페이지 제작과정 */
	.tab-wrapper.typeA .tab-item > a {padding:13px 15px; font-size:15px;}

	/* 제작실적 */
	.mainpart.production .txt {bottom:15px;}
	.mainpart.production .txt dt {/*font-size:16px;*/ line-height:18px; padding:0 10px;}
	.mainpart.production .txt dt span {/*font-size:14px;*/ line-height:1.1;} 
	.mainpart.production .txt dd {/*font-size:14px;*/}
	.mainpart.production .flip-card-front, .mainpart.production .flip-card-back {}

	/* 제공 서비스 */
	.mainpart.service .squareWrap {}
	.mainpart.service .squareWrap-clone {margin-top:30px;}
	.mainpart.service .squareWrap li {padding:25px; width:100%!important;}

	/* 제작후기 */
	.mainpart.reviews .squareWrap-clone {margin-top:30px;}
	.mainpart.reviews .squareWrap-clone li:nth-child(2n) {padding:0;}
	.mainpart.reviews .squareWrap-clone li:nth-child(2n-1) {padding:0;}
	.mainpart.reviews .squareWrap-clone li+li:before {display:none;}
}