@charset "utf-8";
/* /css/page_clean.css */

/* ==================================================
   청소 히어로
================================================== */
#boxHeroClean {width:100%;border-radius:1.5rem;overflow:hidden;}
#boxHeroClean .heroVisual {position:relative;width:100%;}
#boxHeroClean .heroVisual .heroImage {display:block;width:100%;}
#boxHeroClean .heroVisual .heroImage img {display:block;width:100%;height:auto;}
#boxHeroClean .heroVisual .heroBanner {position:absolute;left:50%;bottom:2.8%;display:grid;grid-template-columns:repeat(3,1fr);width:calc(100% - 17%);max-width:1660px;padding:1rem 2rem;background:rgba(255,255,255,0.94);border-radius:1.2rem;box-shadow:0 0 1rem rgba(0,42,110,0.08);transform:translateX(-50%);}
#boxHeroClean .heroVisual .heroBanner .bannerItem {display:flex;align-items:center;justify-content:center;min-width:0;padding:0 1.4rem;}
#boxHeroClean .heroVisual .heroBanner .bannerItem .bannerIcon {flex:0 0 auto;display:block;width:3.8rem;height:3.8rem;margin-right:1.2rem;object-fit:contain;}
#boxHeroClean .heroVisual .heroBanner .bannerItem .bannerText {min-width:0;}
#boxHeroClean .heroVisual .heroBanner .bannerItem .bannerText strong {display:block;margin-bottom:0.35rem;font-size:1.25rem;font-weight:500;line-height:1.35;color:#111827;}
#boxHeroClean .heroVisual .heroBanner .bannerItem .bannerText p {margin:0;font-size:1.15rem;font-weight:400;line-height:1.4;color:#687386;letter-spacing:-0.02rem;}

@media (max-width:1024px) {
	#boxHeroClean .heroVisual .heroBanner {width:calc(100% - 8%);padding:1.4rem 1rem;}
	#boxHeroClean .heroVisual .heroBanner .bannerItem {padding:0 0.7rem;}
	#boxHeroClean .heroVisual .heroBanner .bannerItem .bannerIcon {width:3rem;height:3rem;margin-right:0.8rem;}
	#boxHeroClean .heroVisual .heroBanner .bannerItem .bannerText p {display:none;}
}

@media (max-width:768px) {
	#boxHeroClean {border-radius:0;}
	#boxHeroClean .heroVisual .heroBanner {position:static;grid-template-columns:repeat(2,1fr);gap:0.8rem;width:100%;max-width:none;padding:1.2rem;border-radius:0;box-shadow:none;transform:none;}
	#boxHeroClean .heroVisual .heroBanner .bannerItem {justify-content:flex-start;padding:0.8rem;}
	#boxHeroClean .heroVisual .heroBanner .bannerItem .bannerIcon {width:2.8rem;height:2.8rem;margin-right:0.8rem;}
	#boxHeroClean .heroVisual .heroBanner .bannerItem .bannerText strong {margin-bottom:0;font-size:1.25rem;font-weight:500;letter-spacing:-0.05rem;}
	#boxHeroClean .heroVisual .heroBanner .bannerItem .bannerText p {display:none;}
}

@media (max-width:480px) {
	#boxHeroClean .heroVisual .heroBanner {gap:0.4rem;padding:0.8rem;}
	#boxHeroClean .heroVisual .heroBanner .bannerItem {padding:0.6rem 0.4rem;}
	#boxHeroClean .heroVisual .heroBanner .bannerItem .bannerIcon {width:2.4rem;height:2.4rem;margin-right:0.6rem;}
}

/* ==================================================
   청소 종류
================================================== */
#boxCleanType {width:100%;}
#boxCleanType .contain {width:100%;max-width:100%;margin:0 auto;padding:106px 0 0;}
#boxCleanType .contain .sectionTitle {font-size:2rem;font-weight:500;line-height:1.35;text-align:left;margin-bottom:1.5rem;}
#boxCleanType .contain .cleanTypeList {display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem;}
#boxCleanType .contain .cleanTypeList .cleanTypeItem {overflow:hidden;border:1px solid #e7ebf1;border-radius:1rem;background:#fff;box-shadow:0 0.35rem 1rem rgba(24,51,90,.05);}
#boxCleanType .contain .cleanTypeList .cleanTypeItem .cleanTypeImage {width:100%;aspect-ratio:16 / 9;overflow:hidden;}
#boxCleanType .contain .cleanTypeList .cleanTypeItem .cleanTypeImage img {display:block;width:100%;height:100%;object-fit:cover;}
#boxCleanType .contain .cleanTypeList .cleanTypeItem .cleanTypeContent {padding:1.4rem;text-align:center;}
#boxCleanType .contain .cleanTypeList .cleanTypeItem .cleanTypeContent h3 {display:flex;align-items:center;justify-content:center;gap:.35rem;margin:0;color:#1b2639;font-size:1.5rem;font-weight:500;line-height:1.4;letter-spacing:-.035em;}
#boxCleanType .contain .cleanTypeList .cleanTypeItem .cleanTypeContent h3 .material-symbols-rounded {flex:0 0 auto;color:#0059d9 !important;font-size:1.35rem;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;}
#boxCleanType .contain .cleanTypeList .cleanTypeItem .cleanTypeContent p {margin-top:.55rem;margin-bottom:0;color:#79869a;font-size:1.15rem;font-weight:400;line-height:1.6;}
#boxCleanType .contain .cleanTypeList .cleanTypeItem .cleanTypeContent .cleanTypeButton {display:block;width:100%;margin-top:1.2rem;padding:.8rem 1rem;border:1px solid #dbe6f5;border-radius:.25rem;background:#f6f9fd;color:#0059d9;font-size:1rem;font-weight:500;line-height:1.2;cursor:pointer;transition:background .2s,border-color .2s,color .2s;}
#boxCleanType .contain .cleanTypeList .cleanTypeItem .cleanTypeContent .cleanTypeButton:hover {border-color:#0059d9;background:#0059d9;color:#fff;}

@media (max-width:1024px) {
	#boxCleanType .contain .cleanTypeList {grid-template-columns:repeat(2,1fr);}
}

@media (max-width:768px) {
	#boxCleanType .contain {padding:2.5rem 0 0;}
	#boxCleanType .contain .sectionTitle {font-size:1.7rem;}
	#boxCleanType .contain .cleanTypeList {grid-template-columns:repeat(2,1fr);gap:1rem;}
	#boxCleanType .contain .cleanTypeList .cleanTypeItem .cleanTypeContent {padding:1.1rem;}
}

/* ==================================================
   바로24 특별한 혜택
================================================== */
#boxBenefit {width:100%;margin-top:2rem;}
#boxBenefit .contain {display:flex;align-items:stretch;width:100%;margin:0 auto;border-radius:1rem;overflow:hidden;background:linear-gradient(90deg,#0c5de8 0%,#2f78ef 100%);padding:0;}
#boxBenefit .contain .benefitTitle {display:flex;flex-direction:column;justify-content:center;flex:0 0 24%;padding:1.6rem 2rem;color:#fff;}
#boxBenefit .contain .benefitTitle p {margin:0;font-size:1.25rem;font-weight:500;line-height:1.45;}
#boxBenefit .contain .benefitTitle h2 {margin:.15rem 0 0;font-size:1.7rem;font-weight:700;line-height:1.25;letter-spacing:-.035em;background:linear-gradient(90deg,#9ed8ff 0%,#ffffff 75%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;}
#boxBenefit .contain .benefitList {display:grid;grid-template-columns:repeat(5,1fr);flex:1;margin:.8rem;padding:.9rem 1rem;border-radius:.8rem;background:rgba(255,255,255,.88);backdrop-filter:blur(8px);}
#boxBenefit .contain .benefitList .benefitItem {display:flex;align-items:center;justify-content:center;gap:.7rem;min-width:0;padding:.6rem .9rem;border-right:1px solid rgba(0,89,217,.12);}
#boxBenefit .contain .benefitList .benefitItem:last-child {border-right:0;}
#boxBenefit .contain .benefitList .benefitItem .material-symbols-rounded {flex:0 0 auto;color:#0059d9;font-size:3rem;font-weight:normal;font-style:normal;line-height:1;font-variation-settings:'FILL' 0,'wght' 400,'GRAD' 0,'opsz' 24;}
#boxBenefit .contain .benefitList .benefitItem .benefitText {min-width:0;}
#boxBenefit .contain .benefitList .benefitItem .benefitText h3 {margin:0;color:#0059d9;font-size:1.15rem;font-weight:500;line-height:1.35;letter-spacing:-.035em;white-space:nowrap;}
#boxBenefit .contain .benefitList .benefitItem .benefitText p {margin:.3rem 0 0;color:#6f7d90;font-size:1rem;font-weight:400;line-height:1.45;white-space:nowrap;}

@media (max-width:1100px) {
	#boxBenefit .contain {display:block;}
	#boxBenefit .contain .benefitTitle {display:block;padding:1.4rem 1.6rem;}
	#boxBenefit .contain .benefitTitle p {display:inline-block;margin-right:.35rem;}
	#boxBenefit .contain .benefitTitle h2 {display:inline-block;margin:0;font-size:1.5rem;}
	#boxBenefit .contain .benefitList {grid-template-columns:repeat(5,minmax(160px,1fr));overflow-x:auto;margin:0 .8rem .8rem;}
}

@media (max-width:768px) {
	#boxBenefit .contain {border-radius:.8rem;}
	#boxBenefit .contain .benefitTitle {padding:1.2rem 1.3rem;}
	#boxBenefit .contain .benefitList {grid-template-columns:1fr 1fr;gap:.5rem;overflow:visible;padding:.8rem;}
	#boxBenefit .contain .benefitList .benefitItem {justify-content:flex-start;padding:.8rem;border-right:0;border-bottom:1px solid rgba(0,89,217,.1);}
	#boxBenefit .contain .benefitList .benefitItem:nth-last-child(-n+2) {border-bottom:0;}
	#boxBenefit .contain .benefitList .benefitItem .benefitText h3 {white-space:normal;}
	#boxBenefit .contain .benefitList .benefitItem .benefitText p {white-space:normal;}
}

@media (max-width:520px) {
	#boxBenefit .contain .benefitList {grid-template-columns:1fr;}
	#boxBenefit .contain .benefitList .benefitItem {border-bottom:1px solid rgba(0,89,217,.1);}
	#boxBenefit .contain .benefitList .benefitItem:last-child {border-bottom:0;}
}

/* ==================================================
   전문 장비와 차별화된 청소
================================================== */
#boxCleanPremium {width:100%;}
#boxCleanPremium .contain {width:100%;max-width:100%;margin:0 auto;padding:106px 0 0;}
#boxCleanPremium .contain .premiumTitle {margin-bottom:1.5rem;}
#boxCleanPremium .contain .premiumTitle h2 {margin:0;color:#1b2639;font-size:2rem;font-weight:500;line-height:1.35;text-align:left;}
#boxCleanPremium .contain .premiumList {display:grid;grid-template-columns:repeat(5,1fr);gap:1rem;padding:1.2rem;border-radius:1.2rem;background:linear-gradient(180deg,#f6f9ff 0%,#eef4ff 100%);}
#boxCleanPremium .contain .premiumList .premiumItem {overflow:hidden;border:1px solid #e5ebf4;border-radius:.9rem;background:#fff;box-shadow:0 .3rem 1rem rgba(24,51,90,.05);}
#boxCleanPremium .contain .premiumList .premiumItem .premiumImage {width:100%;aspect-ratio:16 / 9;overflow:hidden;background:#f7f8fa;}
#boxCleanPremium .contain .premiumList .premiumItem .premiumImage img {display:block;width:100%;height:100%;object-fit:cover;}
#boxCleanPremium .contain .premiumList .premiumItem .premiumContent {padding:1rem 1rem 1.1rem;text-align:center;}
#boxCleanPremium .contain .premiumList .premiumItem .premiumContent h3 {margin:0;color:#1b2639;font-size:1.25rem;font-weight:500;line-height:1.4;letter-spacing:-.035em;}
#boxCleanPremium .contain .premiumList .premiumItem .premiumContent p {margin:.45rem 0 0;color:#79869a;font-size:1.15rem;font-weight:400;line-height:1.6;}

@media (max-width:1024px) {
	#boxCleanPremium .contain .premiumList {grid-template-columns:repeat(3,1fr);}
}

@media (max-width:768px) {
	#boxCleanPremium .contain {padding:3rem 1.5rem;}
	#boxCleanPremium .contain .premiumList {grid-template-columns:repeat(2,1fr);gap:.8rem;padding:1rem;}
}

@media (max-width:520px) {
	#boxCleanPremium .contain .premiumList {grid-template-columns:1fr;}
}

/* ==================================================
   청소 전후 비교
================================================== */
#boxCleanBeforeAfter {width:100%;}
#boxCleanBeforeAfter .contain {width:100%;max-width:100%;margin:0 auto;padding:106px 0 0;}
#boxCleanBeforeAfter .contain .beforeAfterTitle {margin-bottom:1.5rem;}
#boxCleanBeforeAfter .contain .beforeAfterTitle h2 {margin:0;color:#1b2639;font-size:2rem;font-weight:500;line-height:1.35;text-align:left;}
#boxCleanBeforeAfter .contain .beforeAfterList {display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;}
#boxCleanBeforeAfter .contain .beforeAfterList .beforeAfterItem {overflow:hidden;border:1px solid #e5ebf4;border-radius:.9rem;background:#fff;box-shadow:0 .3rem 1rem rgba(24,51,90,.05);}
#boxCleanBeforeAfter .contain .beforeAfterList .beforeAfterItem .beforeAfterImage {position:relative;width:100%;aspect-ratio:16 / 9;overflow:hidden;background:#f7f8fa;}
#boxCleanBeforeAfter .contain .beforeAfterList .beforeAfterItem .beforeAfterImage::after {content:"";position:absolute;top:0;left:50%;width:3px;height:100%;background:rgba(255,255,255,.8);transform:translateX(-50%);pointer-events:none;}
#boxCleanBeforeAfter .contain .beforeAfterList .beforeAfterItem .beforeAfterImage img {display:block;width:100%;height:100%;object-fit:cover;}
#boxCleanBeforeAfter .contain .beforeAfterList .beforeAfterItem .beforeAfterInfo {display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:.8rem 1rem;}
#boxCleanBeforeAfter .contain .beforeAfterList .beforeAfterItem .beforeAfterInfo .beforeText {justify-self:start;color:#79869a;font-size:.9rem;font-weight:400;line-height:1.4;}
#boxCleanBeforeAfter .contain .beforeAfterList .beforeAfterItem .beforeAfterInfo strong {color:#1b2639;font-size:1.25rem;font-weight:500;line-height:1.4;letter-spacing:-.035em;}
#boxCleanBeforeAfter .contain .beforeAfterList .beforeAfterItem .beforeAfterInfo .afterText {justify-self:end;color:#0059d9;font-size:1rem;font-weight:500;line-height:1.4;}

@media (max-width:1024px) {
	#boxCleanBeforeAfter .contain .beforeAfterList {grid-template-columns:repeat(2,1fr);}
}

@media (max-width:768px) {
	#boxCleanBeforeAfter .contain {padding:3rem 1.5rem;}
	#boxCleanBeforeAfter .contain .beforeAfterTitle h2 {font-size:1.7rem;text-align:left;}
	#boxCleanBeforeAfter .contain .beforeAfterList {gap:.8rem;}
}

@media (max-width:520px) {
	#boxCleanBeforeAfter .contain .beforeAfterList {grid-template-columns:1fr;}
}

/* ==================================================
   청소 무료 견적 신청
================================================== */
#boxCleanQuoteButton {width:100%;}
#boxCleanQuoteButton .contain {width:100%;max-width:100%;margin:0 auto;padding:5rem 0 0;}
#boxCleanQuoteButton .contain .quoteArea {position:relative;display:flex;align-items:center;min-height:16rem;overflow:hidden;padding:2.5rem 4rem;border-radius:1rem;background:linear-gradient(110deg,#0758df 0%,#1472ed 58%,#2d8bf2 100%);}
#boxCleanQuoteButton .contain .quoteArea:after {content:"";position:absolute;right:3%;top:18%;width:5rem;height:5rem;border-radius:50%;background:rgba(255,255,255,.07);}
#boxCleanQuoteButton .contain .quoteArea .quoteContent {position:relative;z-index:2;flex:1;color:#fff;}
#boxCleanQuoteButton .contain .quoteArea .quoteContent h2 {margin:0;color:#fff;font-size:1.75rem;font-weight:700;line-height:1.35;letter-spacing:-.035em;}
#boxCleanQuoteButton .contain .quoteArea .quoteContent p {margin:.6rem 0 0;color:rgba(255,255,255,.9);font-size:1.15rem;font-weight:400;line-height:1.6;}
#boxCleanQuoteButton .contain .quoteArea .quoteContent .quoteButton {display:inline-flex;align-items:center;justify-content:center;gap:.7rem;margin-top:1.5rem;padding:.9rem 2rem;border-radius:.55rem;background:#fff;color:#0059d9;font-size:1.15rem;font-weight:500;line-height:1.4;text-decoration:none;box-shadow:0 .25rem .8rem rgba(0,43,119,.15);transition:transform .2s,box-shadow .2s;}
#boxCleanQuoteButton .contain .quoteArea .quoteContent .quoteButton:hover {transform:translateY(-.1rem);box-shadow:0 .4rem 1rem rgba(0,43,119,.22);}
#boxCleanQuoteButton .contain .quoteArea .quoteContent .quoteButton span {font-size:1.3rem;line-height:1;}
#boxCleanQuoteButton .contain .quoteArea .quoteImage {position:absolute;right:8%;bottom:0;z-index:1;height:110%;pointer-events:none;}
#boxCleanQuoteButton .contain .quoteArea .quoteImage img {display:block;width:auto;height:100%;object-fit:contain;object-position:center bottom;}

@media (max-width:768px) {
	#boxCleanQuoteButton .contain {padding:1.5rem;}
	#boxCleanQuoteButton .contain .quoteArea {min-height:15rem;padding:2rem 2rem;}
	#boxCleanQuoteButton .contain .quoteArea .quoteContent {max-width:62%;}
	#boxCleanQuoteButton .contain .quoteArea .quoteContent h2 {font-size:1.55rem;}
	#boxCleanQuoteButton .contain .quoteArea .quoteImage {right:-3%;height:95%;}
}

@media (max-width:520px) {
	#boxCleanQuoteButton .contain .quoteArea {min-height:22rem;align-items:flex-start;padding:2rem;}
	#boxCleanQuoteButton .contain .quoteArea .quoteContent {max-width:100%;}
	#boxCleanQuoteButton .contain .quoteArea .quoteContent p {max-width:60%;}
	#boxCleanQuoteButton .contain .quoteArea .quoteImage {right:-8%;height:65%;}
}
/* ==================================================
   청소 이용후기 글씨 크기
================================================== */
#boxCleanReview #boxReview .boxReviewSlider .boxReviewList .boxReviewItem .boxReviewContent{font-size:1.15rem;}