/*** 공통 ***/
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; font-size:17px; word-break:break-all; padding-left:50px; font-size:20px; color:#000;}
.checklist > li:before {content:""; display:block; width:40px; height:40px; border-radius:50%; background:var(--blue) url(/assets/user/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; font-weight:500;}
.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(/assets/user/images/common/i-checkRed.png) no-repeat center / 12px; margin-right:10px; transform:translateY(-2px);}


/*** 버튼 ***/
.btnWrap .red_btn {display:inline-block; position:relative; background:var(--base1); border-radius:10px; color:#fff; font-size:24px; font-weight:700; padding:25px 0; width:250px; text-align:left;}
.btnWrap .navy_btn {display:inline-block; position:relative; background:var(--base2); border-radius:10px; color:#fff; font-size:24px; font-weight:700; padding:25px 0; text-align:left;}
.btnWrap .red_btn.quest {position:relative; padding-left:55px;}
.btnWrap a span {position:relative; display:inline-block;}
.btnWrap a span:after, .btnWrap a span:before {content:""; display:block; position:absolute; transition:all 0.3s;}
.btnWrap a span:after {width:32px; height:2px; background:#fff; border-radius:0 2px 2px 0; right:-55px; bottom:15px;}
.btnWrap a span:before {width:15px; height:2px; border-radius:0 2px 2px 0; background:#fff; right:-57px; bottom:20px; transform:rotate(45deg);}
.btnWrap a:hover span:after {width:52px; right:-75px;}
.btnWrap a:hover span:before {right:-77px;}
.btnWrap .red_btn.ebook {width:auto; padding:25px 110px 25px 60px;}
.btnWrap .navy_btn.ebook {width:auto; padding:25px 110px 25px 60px;}


/****** 서비스 추천 ******/
.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 .btnWrap {margin-top:50px;}
.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: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: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(/assets/user/images/service/tag_red.png) no-repeat center / contain; }
.service .subpart.recom_decal .sm_part .tag_shape.navy {background:url(/assets/user/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: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;}
.service .subpart.recom_decal .btnWrap.double {display:flex; justify-content:center; gap:10px; padding-left:23px; margin-top:70px; flex-wrap:wrap;}


/* ******* 태블릿 이하(~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;}

	/****** 자주 묻는 질문 ******/
	.service .subpart.faq_st {padding:80px 0 60px;}
	.service .subpart.faq_st .inner {gap:70px;}
	.service .subpart.faq_st .left {width:420px;}
	.service .subpart.faq_st .titWrap > span {font-size:20px;}
	.service .subpart.faq_st .right {width:calc(100% - 490px);}
	.service .subpart.faq_st .right dl {padding:0 40px 30px 70px;}
	.service .subpart.faq_st .right.num dl {position:relative; padding:0px 50px 30px 100px;}
	.service .subpart.faq_st .right.num dl dt:before {left:-100px;}
	.service .subpart.faq_st .right dl dt:before {font-size:55px; left:-70px; }
}


/* ******* 태블릿 이하(~991) ******** */
@media screen and (max-width:991px) { 
	/*** 버튼 ***/
	.btnWrap .red_btn {font-size:20px; padding:20px 0; width:210px;}
	.btnWrap a span:before {bottom:17px;}
	.btnWrap a span:after {bottom:12px;}
	.btnWrap .red_btn.quest {padding-left:43px;}
	.btnWrap .navy_btn {font-size:20px;}
	.btnWrap .navy_btn.ebook {padding:20px 90px 20px 40px; }
	.btnWrap .red_btn.ebook {padding:20px 90px 20px 40px;}
	
	.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 .btnWrap {margin-top:30px;}
	.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:30px;}

	/****** 자주 묻는 질문 ******/
	.service .subpart.faq_st {padding:60px 0 40px;} 
	.service .subpart.faq_st .inner {flex-direction:column; gap:45px;}
	.service .subpart.faq_st .left {width:100%;}
	.service .subpart.faq_st .right {width:100%;}
	.service .subpart.faq_st .titWrap > p strong {font-size:20px;}
	.service .subpart.faq_st .titWrap > p {margin-top:30px;}
	.service .subpart.faq_st .titWrap > p:before {top:0;}
}


/* ******* 태블릿 이하(~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;}

	/*** 버튼 ***/
	.btnWrap .red_btn {font-size:18px; padding:15px 0; width:200px;}
	.btnWrap .red_btn.quest {padding-left:40px;}
	.btnWrap .navy_btn {font-size:18px;}
	.btnWrap .red_btn.ebook {padding:15px 90px 15px 40px;}
	.btnWrap .navy_btn.ebook {padding:15px 90px 15px 40px;}

	/****** 서비스 추천 ******/
	.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;}
	.service .subpart.recom_decal .btnWrap.double {margin-top:50px;}

	/****** 자주 묻는 질문 ******/
	.service .subpart.faq_st {padding:50px 0 40px;}  
	.service .subpart.faq_st .titWrap > span {font-size:16px;}
	.service .subpart.faq_st .right dl {padding:0 30px 30px 50px;}
	.service .subpart.faq_st .right dl dt {font-size:18px;}
	.service .subpart.faq_st .right dl dt:before {font-size:40px; left:-50px; top:-7px;}
	.service .subpart.faq_st .right.num dl {position:relative; padding:0px 50px 30px 70px;}
	.service .subpart.faq_st .right.num dl dt:before {left:-70px;}
	.service .subpart.faq_st .right dl dd {font-size:16px;}
}	

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

	.checklist > li {font-size:16px; padding-left:40px;}
	.checklist + p.addit {margin-top:30px;}
	.checklist > li+li {margin-top:10px;}

	/****** 서비스 추천 ******/
	.service .subpart.recommend .titWrap > p {padding-top:30px;}
	.service .subpart.recommend .sm_part .txtWrap .checklist {margin-top:20px;}

	/****** 서비스 추천 - 데칼코마니타입  ******/
	.service .subpart.recom_decal {padding:50px 0;}
	.service .subpart.recom_decal .sm_part h3 {padding-right:60px;}
	.service .subpart.recom_decal .sm_part {padding:40px 20px;}
	.service .subpart.recom_decal .sm_part .tag_shape {font-size:16px; width:60px; height:78px;
	right:20px;}
	.service .subpart.recom_decal .sm_part .table.typeA {margin-top:30px;}

	/****** 자주 묻는 질문 ******/
	.service .subpart.faq_st {padding:40px 0 40px;}  
	.service .subpart.faq_st .titWrap > p {margin-top:0;}
	.service .subpart.faq_st .titWrap > p:before {top:24px;}
	.service .subpart.faq_st .right dl {padding:0 0px 30px 40px;}
	.service .subpart.faq_st .right dl dt:before {left:-40px;}
	.service .subpart.faq_st .right.num dl {padding:0px 50px 30px 55px;}
	.service .subpart.faq_st .right.num dl dt:before {left:-55px; top:-5px;}
	.service .subpart.faq_st .right dl dt:before {font-size:30px;}
}