@charset "utf-8";
h2.sect-title{font-family: 'Gyeonggi Cheonnyeon Batang', serif}
p.cont-category-text{line-height: 160%}
section.cont.remodeling h2.sect-title{text-align: center;}
section.cont.remodeling p.cont-category-text{text-align: center;}
ul.remodeling-list{display:flex; flex-wrap:nowrap}
.remodeling-list-before{justify-content:center}
img.remodeling-item-img{display:block; width:100%}
.remodeling-item-text{display:flex; align-items:center; justify-content:center}
.remodeling-item-no{display:block; color:var(--color-secondary); font-weight:600}
.remodeling-item-title{font-weight: 700}
.remodeling-list-ico{width:2rem; height:2rem; margin:3rem auto}
.remodeling-list-ico svg{display:block; width:100%; height:100%; fill:var(--color-tertiary)}
@media screen and (max-width:1280px){
	section.cont.remodeling{margin-bottom: 6.25rem}
	h2.sect-title{font-size: 1.56rem; margin-bottom: 2rem}
	p.cont-category-text{font-size: 1rem; margin: 1.33rem 0}
	ul.remodeling-list{gap:2vw}
	.remodeling-item{width:calc(100% / 3)}
	img.remodeling-item-img{border-radius:1rem}
	.remodeling-item-text{margin-top:1.33rem}
	.remodeling-item-no{font-size: 1.6rem; margin-right: 0.53rem}
	.remodeling-item-title{font-size: 1rem}
}
@media screen and (min-width:1281px){
	section.cont.remodeling{margin-bottom: 6.25rem}
	h2.sect-title{font-size: 2.19rem; margin-bottom: 3.12rem}
	p.cont-category-text{font-size: 1.13rem; margin: 1.87rem 0}
	section.cont.remodeling p.cont-category-text{margin: 1.87rem auto; max-width: 700px;}
	ul.remodeling-list{gap:1.24rem}
	.remodeling-item{width:calc(100% / 3)}
	img.remodeling-item-img{border-radius:1.25rem}
	.remodeling-item-text{margin-top:1.25rem}
	.remodeling-item-no{font-size: 1.37rem; margin-right: 10px}
	.remodeling-item-title {font-size: 1.12rem}
}

.remodeling-bna p.cont-category-text{font-weight: 600; max-width: none}
.remodeling-bna-list{display:flex; align-items:center}
.remodeling-bna-item{flex:1}
.remodeling-bna-item-ico svg{display:block; width:100%; height:100%; fill:var(--color-tertiary); transform:rotate(-90deg)}
@media screen and (max-width:1280px){
	.remodeling-bna p.cont-category-text{font-size: 1.04rem}
	.remodeling-bna{margin-top:3rem}
	.remodeling-bna-item-ico{width:1rem; height:1rem; margin:0 0.6rem}
}
@media screen and (min-width:1281px){
	.remodeling-bna p.cont-category-text{font-size: 22px}
	.remodeling-bna{margin-top:5rem}
	.remodeling-bna-list{flex-wrap:nowrap}
	.remodeling-bna-item-ico{width:2rem; height:2rem; margin:0 3rem}
}

/* 리모델링 절차(process) */
section.cont.process{position:relative; background: url(/image/remodeling/proc-bg.jpg) no-repeat 50% 0; background-size: cover; background-attachment: fixed; color:#fff; text-align:center}
section.cont.process:before{content:''; position:absolute; top:0; right:0; bottom:0; left:0; background-color:rgba(0,0,0,.5)}
.remodeling-proc{position:relative; display:flex}
.remodeling-proc-item{display:flex; flex-direction:column; align-items:center}
.remodeling-proc-ico{width:3.12rem; height:3.12rem}
.remodeling-proc-ico svg{display:block; width:100%; height:100%; fill:#fff}
.remodeling-proc-no{font-size:1.6rem; font-weight:900}
.remodeling-proc-title{display:flex; flex-direction:column; justify-content:center; height:2.4em; line-height:1.2em; font-size:1rem; font-weight:700}
@media screen and (max-width:1280px){
	section.cont.process{padding:6rem 0}
	section.cont.process h2.sect-title{margin-bottom:3rem}
	.remodeling-proc{flex-wrap:wrap; column-gap:3vw; row-gap:2rem}
	.remodeling-proc-item{width:calc(100% / 3 - 2vw)}
	.remodeling-proc-no{margin:0.6rem 0}
}
@media screen and (min-width:1281px){
	section.cont.process{padding:8rem 0}
	section.cont.process h2.sect-title{margin-bottom:3rem}
	.remodeling-proc{flex-wrap:nowrap}
	.remodeling-proc-item{width:calc(100% / 6)}
	.remodeling-proc-no{margin:1rem 0}
}

/* 리모델링의 장점(merit) */
ul.merit-list{display: flex; flex-wrap: wrap}
li.merit-item{display: flex; align-items: flex-start}
div.merit-img{flex-shrink: 0; overflow: hidden; display: flex; justify-content: center; border-radius: 18px}
h3.merit-title{color: var(--color-text)}
span.merit-title-kor{display: block}
span.merit-no{display: block; color: #DCDCDC; font-weight: 600}
p.merit-desc {color: var(--color-text-light); line-height: 158%}
@media screen and (max-width:1280px){
	section.cont.merit{padding-top:8rem; margin-bottom:6.25rem}
	ul.merit-list{row-gap:2rem; column-gap:20px}
	li.merit-item{flex-wrap: wrap}
	div.merit-img{align-items: center; width: 100%}
	div.merit-img img{width: 100%}
	div.merit-text{margin-top: 1.33rem}
	h3.merit-title{font-size: 1.07rem}
	span.merit-title-kor{font-size: 14px; margin-top:3px}
	span.merit-no{font-size: 2rem; margin-top: 10px}
	p.merit-desc{font-size: 1rem}
}
@media screen and (max-width:428px){
	li.merit-item{width:100%}
}
@media screen and (min-width:429px) and (max-width:767px){
	li.merit-item{width: calc(50% - 20px)}
}

@media screen and (min-width:768px) and (max-width:1280px){
	li.merit-item{width: calc(50% - 20px)}
}
@media screen and (min-width:1281px){
	section.cont.merit{padding-top:8rem; margin-bottom:6.25rem}
	ul.merit-list{row-gap:1.88rem; column-gap:20px}
	li.merit-item{width: calc(50% - 10px)}
	div.merit-img{height: 11.69rem; align-items: center; width: 9.37rem}
	div.merit-img img{height: 100%}
	div.merit-text{margin-left: 1.87rem}
	h3.merit-title{font-size: 1.25rem}
	span.merit-title-kor{font-size: 1rem; margin-top:5px}
	span.merit-no{font-size: 2.5rem; margin-top: 10px}
	p.merit-desc{font-size: 15px}
}

/* 봉분 수선 접수(receipt) */
.receipt-list{margin:0 0 3rem 0}
.receipt-item{display:flex; align-items:flex-start}
.receipt-item:last-child{margin:0}
.receipt-lbl{display:flex; align-items:center; font-weight:700}
.receipt-lbl:before{content: ''; display:block; background-color: var(--color-primary); border-radius:50%}
.receipt-desc{flex:1; font-size:1rem}
@media screen and (max-width:1280px){
	.receipt-item{margin:0 0 1rem 0}
	.receipt-lbl {font-size: 1.12rem}
	.receipt-lbl:before {width: 5px; height: 5px; margin-right: 8px}
	.receipt-desc{padding:0.1rem 0 0 1rem}
}
@media screen and (min-width:1281px){
	.receipt-list{}
	.receipt-item{margin:0 0 1rem 0}
	.receipt-lbl {font-size: 1.12rem}
	.receipt-lbl:before{width: 5px; height: 5px; margin-right: 10px}
	.receipt-desc{padding:0.1rem 0 0 1rem}
}