@charset "utf-8";

/* **************************************** *
 * 공통 슬라이드
 *********************************************/
.swiper-container{overflow:visible; margin-left: 0; margin-right: 0; line-height: 1;  height: auto; }
.swiper-slide{height: auto; margin: 0; height: auto;}
.swiper-slide img{width:100%; object-fit: cover; }



/* 슬라이드 페이지네이션 */
.swiper-controls{position: absolute; right: 20rem; bottom: 20rem;}
/* .swiper-pagination{position: relative; bottom: auto; display:inline-flex; justify-content:center; align-items:center; position:relative; gap:5rem; padding: 3rem 10rem 2rem; font-size: 12rem; font-weight: 500; color: rgba(255, 255, 255, .3); border-radius: 20rem; background:rgba(0, 0, 0, .7);}
.swiper-pagination-current {color: var(--f);} */
.swiper-pagination{position: absolute; bottom: auto; display:inline-flex; justify-content:center; align-items:center;gap:5rem; padding: 3rem 10rem 2rem; font-size: 12rem; font-weight: 500; color: rgba(255, 255, 255, .3); border-radius: 20rem; bottom: 18rem !important; gap: 2rem;}
.swiper-pagination-current {color: var(--f);}
.swiper-pagination-current span{color: var(--f);}
.swiper-pagination span{background-color: #fff; border-radius: 50%; width: 6rem; height: 6rem;}



/* **************************************** *
 * 메인
 *********************************************/
#content.main{padding-top:0rem;}
section[class^="main-"] {padding-top: 42rem;}
section[class^="main-"] .sec-line {margin-top: 42rem;}

.main > .content-wrap {padding-bottom: 42rem ;}

.main-header {padding-top: 0 !important;}
.main-visual{padding-top: 75rem !important; border-radius: 10rem;}
.main-header .sec-line, .main-event .sec-line {margin-top: 0 !important;}

/* header */
.main-header__inr {position: relative; padding-bottom: 20rem;}
/* .main-header img {height: 15rem;} */
.main-header .logo img{height: 30rem}

/* 메인 섹션 */
.main-sec-box {display: flex; flex-direction: column; gap: 12rem;}

/* 바로가기 배너 섹션 */
.go_banner ul{display: flex; align-items: center; justify-content: center; gap: 10rem;flex-wrap: wrap}
.go_banner ul li{width: calc(50% - 5rem); background: #fff; box-shadow: 0 0 8px rgba(0,0,0,.08); padding: 16rem 14rem; border-radius: 8rem; border: 1px solid #eee; position: relative; aspect-ratio: 1.5 / 1;}
.go_banner ul li div{flex-shrink: 0;}
.go_banner ul li span{font-size: 12rem; color: #aaa; }
.go_banner ul li p{font-size: 16rem; font-weight: 600; color: #444;}
.go_banner img{width: 22%; position: absolute; right: 14rem; bottom: 16rem;}

.main-sec-01{padding: 42rem 0;}
.main-feature .sec-tit{font-weight: 400;}
.main-list ul{display: flex; flex-direction: column; gap: 10px;} 
.main-list ul li{background-color: #fff; border-radius: 8rem; padding: 20rem 16rem; border: 1px solid #eee; box-shadow: 0 0 12rem rgba(0,0,0,.06); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8rem; text-align: center;}
.main-list ul li span{font-size: 12rem; background-color: var(--c-01); color: #fff; border-radius: 20px; padding: 4rem 10rem; width: max-content;}
.main-list ul li h6{font-weight: 600; font-size: 17rem; color: #444; }
.main-list ul li p{font-size: 13rem; color: #666;}



/* 추천 제품 + 실시간 베스트 제품 */
.main-sec figure.main-list__thum { overflow: hidden; aspect-ratio: 1.35/1; width:100%; position: relative; padding-bottom: 66%;}
.main-list__thum img{position: absolute; width: 100%; height:100%; left:50%; top:50%;transform: translate(-50%, -50%); object-fit: cover;}


.main-sec .swiper-slide > div {display: flex; flex-direction: column; gap: 10rem; width: 100%;}
.main-sec .main-list__txt {display: flex; flex: 1; flex-direction: column; gap: 2rem;}
.main-sec .main-list__txt > span, .pd-cate{display: block; width: max-content; height: auto; padding: 3rem 6rem 3rem; text-align: center; line-height: 1.45; font-size: 12rem; color: #036F56bb; background-color: #E5F8F3; border-radius: 2rem; margin-bottom: 5rem;}
.main-sec .main-list__txt > small{font-size: 12rem; font-weight: 800; color: #888;}
.main-sec .main-list__txt > strong.prd-name {font-size: 16rem; display: -webkit-box;/* Flexbox 설정 */ -webkit-box-orient: vertical;/* 세로 방향으로 정렬 */ -webkit-line-clamp: 1; /* 표시할 줄 수 */overflow: hidden;/*  넘치는 부분 숨김 */text-overflow: ellipsis; font-weight: 500; line-height: 1.2;}
.main-sec .main-list__txt > b.prd-pay {font-size: 18rem; font-weight: 700; line-height: 1.2;}
.prd-review {display: flex; gap: 2rem; color: #888; font-weight: 500;}
.prd-review > i {display: block; width: 14rem; height: 14rem; overflow: hidden;}
.prd-review > i img{width: 100%; height: 100%;}















/* 견적요청 */
.main-estimate .content-tab {margin-bottom: 15rem;}
.tab__item img {width: 100%; border-radius: 0rem;}
.tab__item .btn-basic {margin-top: 7rem;}


/* 시공사례 */
.main-case .swiper-slide {flex-wrap: wrap;}
.case-list__img {position: relative; width: 100%; height: 220rem; border-radius: 7rem; background-repeat: no-repeat; background-position: center; background-size: cover;}
.case-list__cate {z-index: 51; position: absolute; left: 10rem; top: 10rem; display: inline-block; padding: 3rem 10rem; color: var(--f); font-size: 13rem; font-weight: 700; text-align: center; border-radius: 3rem; box-shadow: 2rem 2rem 5rem rgba(0, 0, 0, .2);}
.case-list__cont strong {display: block; min-height: 53rem; margin-top: 15rem; font-size: 16rem; font-weight: 700; color: var(--b-02);}
.case-list__price {display: inline-flex; align-items: center; margin-top: 20rem; font-size: 18rem; font-weight: 700; color: var(--c-01);}
.case-list__price span {margin-right: 5rem; font-size: 12rem; color: var(--g-02);}
.case-list__tag {display: flex; flex-wrap: wrap; margin-top: 12rem;}
.case-list__tag li {margin-right: 3rem; margin-bottom: 3rem; padding: 3rem 7rem 2rem; font-weight: 400; font-size: 12rem; color: var(--g-02); border-radius: 3rem; background: #f0f0f0;}

[data-category="cate1"] {background-color: var(--c-01);}
[data-category="cate2"] {background-color: var(--c-02);}
[data-category="cate3"] {background-color: #FF7A00;}


/* 베스트 */
.main-tip__inr {overflow: hidden; position: relative; width: 100%; color: var(--f); text-align: center; border-radius: 7rem;}
.main-tip__inr > *:not(img) {position: relative;}

.main .shop-main-list__txt > i {display: flex; align-items: center;}
.main .star {display: inline-block; width: 14rem; height: 14rem; background-image:url(../img/ic-star.svg); background-repeat: no-repeat; background-position: center; background-size: cover;}