@charset "utf-8";

/*** 공통 ***/
.homepage .subpart {padding:150px 0;}
.homepage .titWrap h2 {font-size:clamp(30px, 4vw, 70px); line-height:1.1; font-weight:700; color:#000; letter-spacing:-.1vw;}
.homepage .titWrap h2 strong {font-weight:700;}
.homepage .titWrap > p {padding-top:60px; position:relative;}
.homepage .titWrap > p:before {content:""; width:50px; height:2px;  position:absolute;}
.homepage .horiz {display:flex; justify-content:space-between; gap:3vw;}
.homepage .horiz .left {flex:1;}
.homepage .horiz .right {width:60%;}
.homepage .inner.normal {display:flex; flex-direction:column; gap:50px;}
.homepage .inner.normal .btnWrap {margin-top:20px !important;}


/****** 추천·제안 ******/
.homepage .subpart.suggestion {background:var(--bg1);}
.homepage .subpart.suggestion h2 strong {display:inline-block; color:#3551C4;}
.homepage .subpart.suggestion .horiz .titWrap {text-align:left; position:sticky; top:150px;}
.homepage .subpart.suggestion .titWrap > p:before {background:#000; top:30px; left:50%; transform:translateX(-50%);}
.homepage .subpart.suggestion .horiz .titWrap > p:before {background:#000; top:30px; left:0; transform:translateX(0);}
.homepage .subpart.suggestion .titWrap > p {color:var(--base2);}
.homepage .subpart.suggestion .titWrap > p:before {background:#000; top:30px; left:50%; transform:translateX(-50%);}
.homepage .subpart.suggestion .squareWrap {display:grid; grid-template-columns:repeat(5, 1fr); gap:20px; justify-content:center;}
.homepage .subpart.suggestion .horiz .squareWrap {margin-top:0; grid-template-columns:repeat(3,1fr);}
.homepage .subpart.suggestion .squareWrap > li {background:#fff; padding:clamp(30px,3vw,50px); border-radius:clamp(10px, 1.2vw, 20px); box-shadow:rgba(100, 100, 111, 0.2);}
.homepage .subpart.suggestion .squareWrap > li span {font-size:clamp(32px, 4vw, 64px); font-weight:700; color:var(--base2); opacity:0.2; line-height:1;}
.homepage .subpart.suggestion .squareWrap > li p {font-size:clamp(18px, 1.5vw, 20px); font-weight:500; color:#000; word-break:break-all; line-height:1.4; margin-top:50px;}
.homepage .subpart.suggestion .squareWrap.lab > li.bg_bx {background:url(/images/homepage/bg_lab_bx.webp) no-repeat center / cover;}
.homepage .subpart.suggestion .squareWrap.shop > li.bg_bx {background:url(/images/homepage/bg_shop_bx.webp) no-repeat center / cover;}


/****** 전략·구성 ******/
.homepage .subpart.composition {background:var(--blue);}
.homepage .subpart.composition .horiz .titWrap {position:sticky; top:150px;}
.homepage .subpart.composition .titWrap > span {color:#fff; display:block; text-align:center; font-size:24px;}
.homepage .subpart.composition .horiz .titWrap > span {text-align:left;}
.homepage .subpart.composition h2 {color:var(--base4);}
.homepage .subpart.composition h2 strong {color:var(--base4);}
.homepage .subpart.composition .titWrap > p {color:#fff; text-align:center;}
.homepage .subpart.composition .horiz .titWrap > p {text-align:left;}
.homepage .subpart.composition .titWrap > p:before {background:#fff; top:30px; left:50%; transform:translateX(-50%);}
.homepage .subpart.composition .horiz .titWrap > p:before {left:0; transform:translateX(0);}
.homepage .subpart.composition .squareWrap {display:grid; grid-template-columns:repeat(3,1fr); gap:20px; color:var(--base2);}
.homepage .subpart.composition .horiz .squareWrap {}
.homepage .subpart.composition .squareWrap > li {background:#fff; border-radius:clamp(10px, 1.2vw, 20px); padding:clamp(30px, 3vw, 50px); position:relative; padding-right:7vw; word-break:break-all;}
.homepage .subpart.composition .squareWrap > li:before {content:""; display:block; width:40px; height:40px; border-radius:50%; background:var(--blue) url(/images/common/i-checkW.svg) no-repeat center / 12px; position:absolute; right:50px; top:50px;}
.homepage .subpart.composition .squareWrap > li dt {font-size:clamp(18px, 1.7vw, 20px); font-weight:600; line-height:1.4; color:#000;}
.homepage .subpart.composition .squareWrap > li dd {margin-top:10px; }
.homepage .subpart.composition .squareWrap > li > ul {margin-top:30px;}
.homepage .subpart.composition .squareWrap > li > ul li {padding-left:26px; position:relative;}
.homepage .subpart.composition .squareWrap > li > ul li:before {content:""; display:block; width:3px; height:3px; border-radius:50%; background:var(--base2); position:absolute; top:11px; left:10px;}


/****** 홈페이지 기능, 구조 ******/
.homepage .subpart.p_function {background:#fff;}
.homepage .subpart.p_function .titWrap h2 {color:#000;}
.homepage .subpart.p_function .titWrap h2 strong {color:var(--blue); font-weight:700;}
.homepage .subpart.p_function .titWrap > p {color:var(--base2);}
.homepage .subpart.p_function .titWrap > p:before {background:#000; top:30px; left:50%; transform:translateX(-50%);}
.homepage .subpart.p_function .squareWrap {display:grid; grid-template-columns:repeat(4,1fr); gap:20px; text-align:left;}
.homepage .subpart.p_function .squareWrap > li {background:var(--bg1); border-radius:clamp(10px, 1.2vw, 20px); padding:clamp(30px,2vw,50px);}
.homepage .subpart.p_function .squareWrap > li .tit .icon {display:block;}
.homepage .subpart.p_function .squareWrap > li .tit .icon img {filter:invert(0); transition:filter 0.3s; width:50px;}
.homepage .subpart.p_function .squareWrap > li ul {margin-top:50px; color:var(--base2);}
.homepage .subpart.p_function .squareWrap > li h3 {font-size:clamp(18px,1.5vw,20px); font-weight:600; line-height:1.2; color:#000; transition:all 0.3s;}

.homepage .subpart.p_function .squareWrap .tit .icon {display:flex; align-items:center; justify-content:center; flex:0 0 56px; width:56px; height:56px; border-radius:50%; background:#f4f6fb; color:#000;}
.homepage .subpart.p_function .squareWrap .tit .icon svg {display:block; width:40px; height:40px; fill:var(--blue);}
.homepage .subpart.p_function .squareWrap .tit .icon img {display:none;}

.homepage .subpart.p_function .squareWrap > li ul > li+li {margin-top:10px;}
.homepage .subpart.p_function .squareWrap > li ul > li > p {font-weight:600;}
.homepage .subpart.p_function.dev {padding-bottom:0;}
.homepage .subpart.p_function.dev .squareWrap > li ul > li > p {margin-bottom:10px;}


/****** 홈페이지 제작사례 ******/
.homepage .subpart.examples {text-align:center;}
.homepage .subpart.examples h2 {color:#fff; font-size:clamp(38px, 3vw, 48px); line-height:1.1; font-weight:700;}
.homepage .subpart.examples .portWrap {display:grid; grid-template-columns:repeat(3,1fr); gap:40px; margin-top:50px;}
.homepage .subpart.examples .portWrap .img {border-radius:clamp(10px, 1.2vw, 20px); overflow:hidden;}
.homepage .subpart.examples .portWrap .img img {width:100%;}
.homepage .subpart.examples .portWrap article:hover .img img {transform:scale(1.05);}
.homepage .subpart.examples .portWrap article  p {color:#fff; margin-top:20px; font-size:24px; font-weight:500; transition:all 0.3s;}

.homepage .subpart.examples .portWrap article:hover  p {color:var(--base4);}
.homepage .subpart.examples .portWrap article ol,
.homepage .subpart.examples .portWrap article ul {margin-top:20px; display:flex; justify-content:center; gap:5px; flex-wrap:wrap;} 
.homepage .subpart.examples .portWrap article ol>li,
.homepage .subpart.examples .portWrap article ul>li {color:#fff; font-size:14px; padding:5px 10px; background:rgba(0,0,0,.2); backdrop-filter: blur(10px); border-radius:7px;}


/* ******* Pc ~ 태블릿 이하(~1249) ******** */
@media screen and (max-width:1249px) { 
	/*** 공통 ***/
	.homepage .subpart {padding:80px 0 60px;}

	/****** 추천·제안 ******/
	.homepage .subpart.suggestion .squareWrap {grid-template-columns:repeat(2,1fr);}
	.homepage .subpart.suggestion .horiz .squareWrap {grid-template-columns:repeat(2,1fr);}
	.homepage .subpart.suggestion .squareWrap > li p {margin-top:10px;}

	/****** 전략·구성 ******/
	.homepage .subpart.composition .squareWrap {grid-template-columns:repeat(2, 1fr);}
	.homepage .subpart.composition .titWrap > span {font-size:20px;}
	.homepage .subpart.composition .squareWrap > li:before {top:40px; right:40px;}
	.homepage .subpart.composition .squareWrap > li > ul {margin-top:20px;}

	.homepage .subpart.p_function .squareWrap {grid-template-columns:repeat(2,1fr);}
	.homepage .subpart.p_function .squareWrap > li ul {margin-top:30px;}
	.homepage .subpart.p_function .squareWrap > li .tit .icon {margin-bottom:0px;}

	/****** 홈페이지 제작사례 ******/
	.homepage .subpart.examples h2 {font-size:36px;}
	.homepage .subpart.examples .portWrap {margin-top:50px;}
	.homepage .subpart.examples .portWrap article p {font-size:20px;}

}


/* ******* 태블릿 이하(~991) ******** */
@media screen and (max-width:991px) { 
	/*** 공통 ***/
	.homepage .horiz {flex-direction:column; gap:30px;}
	.homepage .horiz .left {width:100%;}
	.homepage .horiz .right {width:100%;}
    .homepage .inner.normal .btnWrap {align-items:center;}
	.homepage .subpart.examples .btnWrap {align-items:center;}
	/****** 추천·제안 ******/
	.homepage .subpart.suggestion .squareWrap {grid-template-columns:repeat(1,1fr); gap:10px;}
	.homepage .subpart.suggestion .horiz .left {width:100%;}
	.homepage .subpart.suggestion .horiz .titWrap {text-align:center;}
	.homepage .subpart.suggestion .horiz .titWrap h2 {text-align:center;}
	.homepage .subpart.suggestion .horiz .titWrap > p:before {left:50%; transform:translateX(-50%);}

	.swiper-wrapper-container {overflow-x:hidden;}
	.homepage .subpart.suggestion .w991swiper { margin-top:40px;}


	/****** 전략·구성 ******/
	.homepage .subpart.composition .w991swiper {margin-top:40px;}
	.homepage .subpart.composition .horiz .left {width:100%;}
	.homepage .subpart.composition .horiz .titWrap h2 {text-align:center;}
	.homepage .subpart.composition .horiz .titWrap > span {text-align:center;}
	.homepage .subpart.composition .horiz .titWrap > p {text-align:center;}
	.homepage .subpart.composition .horiz .titWrap > p:before {left:50%; transform:translateX(-50%);}

	/****** 홈페이지 기능, 구조  ******/

}


/* ******* 태블릿 이하(~767) ******** */
@media screen and (max-width:767px) { 
	/*** 공통 ***/
	.contents .sub-toptext {height:calc(100% - 65px); padding:0 10vw; word-break:keep-all;}
	.homepage .subpart {padding:60px 0 50px;}
	.homepage .inner.normal {display:flex; flex-direction:column; gap:30px;}	
	.homepage .titWrap h2 {line-height:1.4;}
	
	
	/****** 추천·제안 ******/
	.homepage .subpart.suggestion .squareWrap.lab > li.bg_bx {/*min-height:225px;*/}

	/****** 전략·구성 ******/
	.homepage .subpart.p_function .squareWrap {grid-template-columns:repeat(1,1fr); gap:10px;}
	.homepage .subpart.composition .titWrap > span {font-size:16px;} 
	.homepage .subpart.composition .squareWrap {grid-template-columns:1fr; gap:10px;}
	.homepage .subpart.composition .squareWrap > li dt {padding-right:50px;}

	.homepage .subpart.composition .squareWrap > li:before {top:20px; right:30px; width:35px; height:35px;}
	.homepage .subpart.composition .squareWrap > li > ul {margin-top:15px;}
	.homepage .subpart.composition .squareWrap > li > ul li {padding-left:15px;}
	.homepage .subpart.composition .squareWrap > li > ul li:before {left:3px; top:11px;}

	/****** 홈페이지 기능, 구조  ******/

	/****** 홈페이지 제작사례 ******/
	.homepage .subpart.examples h2 {font-size:24px;}
	.homepage .subpart.examples .portWrap {grid-template-columns:1fr; margin-top:40px; gap:50px;}
	.homepage .subpart.examples .portWrap article > ul {margin-top:10px;}
}

/* ******* 모바일 (~500) ******** */
@media screen and (max-width:500px) {  
.homepage .subpart.suggestion .squareWrap > li {padding: clamp(20px, 3vw, 50px);}
.homepage .subpart.suggestion .squareWrap > li p {font-size: clamp(16px, 1.5vw, 20px);}
.homepage .subpart.suggestion .squareWrap > li span {font-size: clamp(28px, 4vw, 64px);}


}