@charset "utf-8";

/*** 공통 ***/
span.tx_yellow {color:var(--base4);}
span.tx_blue {color:var(--blue);}
span.tx_red {color:var(--base1);}
span.tx_redline {text-decoration:underline!important; color:var(--base1); text-underline-offset:3px;}

.service .subpart {padding:120px 0;}
.service .titWrap h2 {font-size:64px; font-weight:700; color:#000; text-align:center; line-height:1.2; }
.service .horizon .titWrap h2 {text-align:left; }
.service .titWrap h2 strong {font-weight:700;}
.service .titWrap > p {padding-top:50px; position:relative; font-size:17px; color:#000;}
.service .titWrap > p:before {content:""; width:50px; height:2px; position:absolute;}

.checklist > li+li {margin-top:20px;}
.checklist > li {position:relative; word-break:break-all; padding-left:50px; font-size:18px; font-weight:500; color:#000;}
.checklist > 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; left:0; top:-4px; }
p.addit {color:var(--base2);}
.checklist + p.addit {margin-top:40px;}
.sm_part h3 + p.addit {margin-top:10px;}
.table.typeA tr th, .table.typeA tr td {border:1px solid var(--border); padding:15px 20px;}
.table.typeA tr th {background:var(--bg1); text-align:left; color:#000;}
.table.typeA tr td {color:var(--base2);}
.table.typeA tr th.check {position:relative;}
.table.typeA tr span.check {display:inline-block; width:12px; height:8px; background:url(/images/common/i-checkRed.png) no-repeat center / 12px; margin-right:10px; transform:translateY(-2px);}


/****** 서비스 추천 ******/
.service .subpart.recommend {background:#fff;}
.service .subpart.recommend .horizon {display:flex;}
.service .subpart.recommend .horizon .left {width:50%;}
.service .subpart.recommend .horizon .right {width:50%;}
.service .subpart.recommend .titWrap {position:sticky; top:120px; padding-right:30px;}
.service .subpart.recommend .sm_part h3 {color:#000; font-size:36px;}
.service .subpart.recommend .right .sm_part .txtWrap {padding-top:70px;}
.service .subpart.recommend .right .sm_part:nth-child(2) {border-top:1px solid var(--border); margin-top:70px;}
.service .subpart.recommend .bg {overflow:hidden; border-radius:clamp(10px, 1.2vw, 20px);}
.service .subpart.recommend .bg img {aspect-ratio:86/30; width:100%;}
.service .subpart.recommend .sm_part .txtWrap .checklist {margin-top:30px;}
.service .subpart.recommend .sm_part .table.typeA {margin-top:10px;}
.table.typeA tr th  {box-sizing:border-box;}
.table.typeA.domain tr th {width:25%; min-width:210px;}
.table.typeA.hosting tr th {width:20%; min-width:185px;}


/****** 서비스 캐치프레이즈 ******/
.service .subpart.s_catchphrase {padding:200px 0;}
.service .subpart.s_catchphrase h2 {color:#fff; font-size:48px; text-align:center; line-height:1.25;}


/****** 서비스 추천 - 데칼코마니타입  ******/
.service .subpart.recom_decal {padding:120px 0; background:#fff;}
.service .subpart.recom_decal .titWrap p {text-align:center; padding-top:30px;}
.service .subpart.recom_decal .gridWrap {margin-top:70px; display:grid; grid-template-columns:1fr 1fr; gap:40px;}
.service .subpart.recom_decal .sm_part {border:1px solid var(--border); padding:50px; position:relative; border-radius:clamp(10px, 1.2vw, 20px);}
.service .subpart.recom_decal .sm_part .tag_shape {display:flex; position:absolute; width:136px; height:175px;  top:-1px; right:50px; justify-content:center; align-items:center; color:#fff; font-size:36px; line-height:1.2; font-weight:700;}

.service .subpart.recom_decal .sm_part .tag_shape.red {background:url(/images/service/tag_red.png) no-repeat center / contain; }
.service .subpart.recom_decal .sm_part .tag_shape.navy {background:url(/images/service/tag_navy.png) no-repeat center / contain;}
.service .subpart.recom_decal .sm_part h3 {font-size:48px; line-height:1.2; font-weight:700; color:#000; padding-top:30px; padding-right:clamp(100px, 10vw, 150px);}
.service .subpart.recom_decal .sm_part .checklist {padding-top:70px;}
.service .subpart.recom_decal .sm_part .tx_red {text-align:center; color:var(--base1);}
.service .subpart.recom_decal .sm_part .table.typeA {margin-top:50px;}
.service .subpart.recom_decal .sm_part .table.typeA tr th {width:35%; min-width:215px;}
.service .subpart.recom_decal .sm_part .printWrap {display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:50px;}
.service .subpart.recom_decal .sm_part .printWrap li img {aspect-ratio:288 / 400; width:100%; box-shadow:rgba(0, 0, 0, 0.1) 10px 10px 10px 10px;}


/* ******* 태블릿 이하(~1249) ******** */
@media screen and (max-width:1249px) { 
	/*** 공통 ***/
	.service .titWrap h2 {font-size:45px;}
	.service .titWrap > p {font-size:16px;}
	.service .subpart {padding:80px 0;}

	.checklist > li {font-size:18px;}
	.checklist > li:before {top:-7px;}

	/****** 서비스 추천 ******/
	.service .subpart.recommend .right .sm_part .txtWrap {padding-top:45px;}
	.service .subpart.recommend .sm_part h3 {font-size:30px;}
	.service .subpart.recommend .right .sm_part:nth-child(2) {margin-top:50px;}

	/****** 서비스 캐치프레이즈  ******/
	.service .subpart.s_catchphrase {padding:60px 0;}
	.service .subpart.s_catchphrase h2 {font-size:36px;}

	/****** 서비스 추천 - 데칼코마니타입  ******/
	.service .subpart.recom_decal {padding:80px 0;}
	.service .subpart.recom_decal .gridWrap {margin-top:50px; grid-template-columns:1fr;}
	.service .subpart.recom_decal .sm_part h3 {font-size:36px; padding-top:10px;}
	.service .subpart.recom_decal .sm_part .checklist {padding-top:40px;}
	.service .subpart.recom_decal .sm_part .tag_shape {width:100px; height:129px; font-size:24px;}
}


/* ******* 태블릿 이하(~991) ******** */
@media screen and (max-width:991px) { 
	.service .subpart {padding:60px 0;}

	/****** 서비스 추천 ******/
	.service .subpart.recommend h2 {font-size:30px;}
	.service .subpart.recommend .horizon {flex-direction:column; gap:50px;}
	.service .subpart.recommend .horizon .left {width:100%;}
	.service .subpart.recommend .horizon .right {width:100%;}
	.service .subpart.recommend .right .sm_part .txtWrap {padding-top:35px;}
	.service .subpart.recommend .titWrap {padding-right:0;}

	/****** 서비스 캐치프레이즈  ******/
	.service .subpart.s_catchphrase {padding:45px 0;}
	.service .subpart.s_catchphrase h2 {font-size:30px;}

	/****** 서비스 추천 - 데칼코마니타입  ******/
	.service .subpart.recom_decal {padding:60px 0;}
	.service .subpart.recom_decal .sm_part h3 {font-size:30px;}
	.service .titWrap > p {padding-top:40px;}
	.faq_st .titWrap > p:before {top:16px;}
}


/* ******* 태블릿 이하(~767) ******** */
@media screen and (max-width:767px) { 
	/*** 공통 ***/
	.service .titWrap h2 {font-size:30px;}
	.checklist > li {padding-left:45px;}
	.checklist > li:before {width:30px; height:30px; top:-2px;}
	.checklist > li+li {margin-top:15px;}

	/****** 서비스 추천 ******/
	.service .subpart.recommend .sm_part h3 {font-size:24px;}
	.service .subpart.recommend .sm_part .table.typeA tr {display:grid;}
	.service .subpart.recommend .sm_part .table.typeA.domain tr th {width:100%;}
	.service .subpart.recommend .sm_part .table.typeA.domain tr+tr th {border-top:0;}
	.service .subpart.recommend .sm_part .table.typeA.domain tr td {border-top:0;}
	.service .subpart.recommend .sm_part .table.typeA.hosting tr th {width:100%;}
	.service .subpart.recommend .sm_part .table.typeA.hosting tr+tr th {border-top:0;}
	.service .subpart.recommend .sm_part .table.typeA.hosting tr td {border-top:0;}
	.service .subpart.recommend .right .sm_part:nth-child(2) {margin-top:30px;}

	/****** 서비스 추천 - 데칼코마니타입  ******/
	.service .subpart.recom_decal .sm_part .table.typeA {margin-top:40px;}
	.service .subpart.s_catchphrase h2 {font-size:24px;} 
	.service .subpart.recom_decal .sm_part {padding:40px 30px;}
	.service .subpart.recom_decal .sm_part .table.typeA tr {display:grid;}
	.service .subpart.recom_decal .sm_part .table.typeA tr th {width:100%;}
	.service .subpart.recom_decal .sm_part .table.typeA tr+tr th {border-top:0;}
	.service .subpart.recom_decal .sm_part .table.typeA tr td {border-top:0;}
	.service .subpart.recom_decal .sm_part .tx_red {text-align:left; padding:10px 20px;}
	.service .subpart.recom_decal .sm_part .printWrap {margin-top:30px;}
	.service .subpart.recom_decal .sm_part h3 {font-size:24px;}
	.service .subpart.recom_decal .sm_part .tag_shape {font-size:18px; width:70px; height:91px; right:30px;}
	.service .subpart.recom_decal .sm_part .checklist {padding-top:30px;}
	.service .subpart.recom_decal .gridWrap {margin-top:30px;}
}

/* ******* 태블릿 이하(~500) ******** */
@media screen and (max-width:500px) { 
.service .subpart.recom_decal .sm_part {padding:40px 16px;}
}