@charset "utf-8";
/* filename : main.css / date : 2024-03-20 / name : kohwonji / email : wonjikoh@kakao.com */

.main-inner h4{    font-size: 12px; }

/* main banner h 120->300*/
.main-banner {width: 100%; height: 220px; margin: 0 auto;    position: absolute;    left: 0;}
.main-banner button[class^="bn-"] {background-color: rgba(8, 11, 38, .1); color: #fff;}
.main-banner button[class^="bn-"]:hover {background-color: var(--col-primary);}
.main-banner .bn-prev-mb {left: 30px;}
.main-banner .bn-next-mb {right: 30px;}
.main-banner .banner-slider {width: 100%; _height: 120px;    left: 16px;}
.main-banner .banner-slider .sd-item {width: inherit; _height: 120px; font-size: 0; position: relative; overflow: hidden;}
.main-banner .banner-slider .sd-item img {max-width: none; position: absolute; top: 0; left: 50%; transform: translateX(-50%);}
.main-banner .swiper-pagination {position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);}
.main-banner:hover button[class^="bn-"] {opacity: 1;}



/* md pick */
.md-pick {width: 100%;  height: auto; margin: 30px auto 0; position: relative;}
.md-pick button[class^="bn-"] {width: 30px; border-radius: 0; top: 50%; transform: translateY(-50%);}
.md-pick:hover button[class^="bn-"] {opacity: 1;}
.md-pick .mp-slider {width: 100%; height: auto; margin-top: 10px;}
.md-pick .mp-slider .sd-item {width: 100%; height: auto; }
.md-pick .mp-slider .sd-item .md-best { margin-bottom: 20px; }
.md-pick .mp-slider .sd-item .md-best img {    width: 100%;    height: 100%;    object-fit: cover;}
.md-pick .mp-slider .sd-item .md-prod-list {width: 100% ;display: grid; gap: 10px 15px; margin-bottom: 10px; grid-template-columns: repeat(3, calc((100% - 32px) / 3));}
.md-pick .bn-prev-mdp {left: 0;}
.md-pick .bn-next-mdp {right: 0;}
.md-pick .swiper-pagination2 {position: absolute; top: 8px; right: 0 !important;}
.md-pick .swiper-pagination2 span {background-color: #a9acb3;}

/* business : category */
.cateitem-wrap {width: 100%;  height: auto; margin: 15px auto;} /* margin 130px->320px*/
.cateitem-wrap ul {width: 100%; height: auto; display: grid;    grid-template-columns: repeat(5, 1fr); align-items: center; text-align: center; font-size: var(--ft-size13); gap: 10px 10px;}
.cateitem-wrap ul li {    margin-bottom: 10px;  }
/* .cateitem-wrap ul li a {display: block; width: 100%; height: 100%;} */
.cateitem-wrap ul li a { display: flex; width: 100%; height: 100%; flex-direction: column; align-items: center; grid-template-columns: repeat(5, calc((100% - 40px) / 5)); }
.cateitem-wrap ul li a i {display: block; width: 74px; height: 74px; margin: 0 auto 5px; background-color: var(--col-bg2); background-position: center; background-repeat: no-repeat; border-radius: 22px;}
.cateitem-wrap ul li a:hover {font-weight: var(--ft-medium);}
.cateitem-wrap ul li a:hover i {background-color: var(--col-primary);}
.cateitem-wrap ul li a:hover span {text-decoration: underline;}
/* business : category : icon hover */
.cateitem-wrap ul li a:hover .cate-icon1 {background-image: var(--cate-icon1-hover);} .cateitem-wrap ul li a:hover .cate-icon2 {background-image: var(--cate-icon2-hover);} .cateitem-wrap ul li a:hover .cate-icon3 {background-image: var(--cate-icon3-hover);} .cateitem-wrap ul li a:hover .cate-icon4 {background-image: var(--cate-icon4-hover);} .cateitem-wrap ul li a:hover .cate-icon5 {background-image: var(--cate-icon5-hover);} .cateitem-wrap ul li a:hover .cate-icon6 {background-image: var(--cate-icon6-hover);} .cateitem-wrap ul li a:hover .cate-icon7 {background-image: var(--cate-icon7-hover);} .cateitem-wrap ul li a:hover .cate-icon8 {background-image: var(--cate-icon8-hover);} .cateitem-wrap ul li a:hover .cate-icon9 {background-image: var(--cate-icon9-hover);} .cateitem-wrap ul li a:hover .cate-icon10 {background-image: var(--cate-icon10-hover);} .cateitem-wrap ul li a:hover .cate-icon11 {background-image: var(--cate-icon11-hover);} .cateitem-wrap ul li a:hover .cate-icon12 {background-image: var(--cate-icon12-hover);}
/* business : category */
.cateitem-list {text-decoration :none;}
.cateitem-list span { font-size: 12px; font-weight: 700; margin-top:20px; }

/* hanasignmall special */
/* .hnsm-special {width: 100%; height: auto; padding: 0; background-color: var(--col-bg);} */
.hnsm-special {width: calc(100% + 32px); margin:0 -16px; padding:35px 0; background-color: #F6F7FC; }
.hnsm-special .inner {width: calc(100% - 32px);  margin: 0 auto;}
.hnsm-special .inner h3 {text-align: center;    margin: 12px 0; }
.hnsm-special .inner h4 {font-weight: var(--ft-bold); font-size: var(--ft-size20); line-height: 1.3;}
.hnsm-special-title {align-items: center; font-size: 12px; font-weight: 800; color: var(--dark-black);}

.hnsm-special .detail-sch-slider {width: 100%;   overflow: hidden; position: relative;}
.hnsm-special .detail-sch-slider .sd-item {width: 100%;}

.hnsm-special .self-design {width: 100%; height: auto; padding-top: 40px; margin-top: 40px; display: grid; grid-template-columns: 320px 1fr; column-gap: 20px; border-top: 1px solid #dcdde2; position: relative;}
.hnsm-special .self-design .self-slider {width: 100%; height: auto; overflow: hidden; display: grid; grid-template-columns: repeat(4, 1fr);}
.hnsm-special .self-design .self-slider .sd-item a {display: block;}
.hnsm-special .self-design .self-slider .sd-item a img {border-radius: 4px;}
.hnsm-special .self-design .self-slider .sd-item a:hover img {opacity: .75;}
.hnsm-special .self-design .bt-line {background-color: #fff; position: absolute; bottom: 80px; left: 0;}

/* board gallery list */
.mn-bo-gallery {width: 100%;  margin: 0 auto;     position: relative; }
.mn-bo-gallery .mtitle {text-align: center;}
.mn-bo-gallery .gallery-list {width: 100%; height: auto; margin-top: 32px; display: grid; grid-template-columns: repeat(5, 1fr); column-gap: 20px;}
.mn-bo-gallery .gallery-list li {padding-bottom:40px;}
.mn-bo-gallery .gallery-list li a {display: block; width: 100%; height: 100%;}
.mn-bo-gallery .gallery-list .thumb {width: 224px; height: 224px; border-radius: 4px; overflow: hidden; line-height: 0;}
.mn-bo-gallery .gallery-list .post-info {width: 224px; height: auto; padding-top: 20px;}
.mn-bo-gallery .gallery-list .post-info h4 {width: 100%; font-weight: var(--ft-medium); font-size: var(--ft-size16); color: var(--col-black) !important; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; overflow: hidden;}
.mn-bo-gallery .gallery-list .post-info p {width: 100%; padding-top: 8px; color: var(--col-gray) !important; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; overflow: hidden;}
.mn-bo-gallery .bt-line.big {margin: 0 auto;}
.mn-bo-gallery .gallery-list li a:hover .thumb {opacity: .75;}
.mn-bo-gallery .bt-more {font-weight: var(--ft-bold); position: absolute; top: 23px; right: 20px;}

/* board list */
.mn-bo-warp {width: 100%;  height: 328px; margin: 96px auto 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;}
.mn-bo-warp .list-wrap {width: 100%; height: auto; padding: 20px 20px 10px; border: 1px solid var(--col-line2); border-radius: 4px; position: relative;}
.mn-bo-warp .list-wrap h3 {font-weight: var(--ft-bold); font-size: var(--ft-size20);}
.mn-bo-warp .list-wrap .tb-wrap {width: 100%; height: auto; margin-top: 20px;}
.mn-bo-warp .list-wrap .tb-wrap table {width: inherit; text-align: center; table-layout: fixed; font-weight: var(--ft-medium);}
.mn-bo-warp .list-wrap .tb-wrap thead th {padding: 16px 0; border-top: 1px solid #12358f;    text-align: center; border-bottom: 1px solid var(--col-line2); color: #12358f; font-weight: var(--ft-semibold);}
.mn-bo-warp .list-wrap .tb-wrap table tbody th {text-align: left;}
.mn-bo-warp .list-wrap .tb-wrap table a {display: block; padding: 5px 0; white-space:nowrap; text-overflow:ellipsis; word-break:break-all; overflow:hidden;}
.mn-bo-warp .list-wrap:not(:nth-child(1)) .tb-wrap table tbody td {padding: 14px 0; color: var(--col-gray);}
.mn-bo-warp .list-wrap:nth-child(1) .tb-wrap table tbody th {padding: 5px 0;}
.mn-bo-warp .list-wrap:nth-child(1) .tb-wrap table tbody td:nth-child(2) {color: var(--col-gray);}
.mn-bo-warp .list-wrap .bt-more {font-weight: var(--ft-bold); position: absolute; top: 37px; right: 20px;}

/* prod-banner */
.prod-conex {width: 100%;  height: auto; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;}
.prod-conex .thumb-banner {padding-left: 90px; grid-column: 1 / 4; display: flex; flex-direction: column; justify-content: center; border-radius: 4px; background-position: center; background-repeat: no-repeat;}
.prod-conex .thumb-banner span {font-weight: var(--ft-bold); text-transform: uppercase; color: var(--col-gray);}
.prod-conex .thumb-banner .mtitle {padding: 16px 0 32px;}
.prod-conex .thumb-banner .bt-line.gray {border-color: var(--col-gray);    margin-top: 110px;}
.prod-conex .thumb-banner .bt-line.gray:hover {background-color: #fff;}
.prod-conex .thumb-banner .bt-line::after {display: none;}
.prod-conex .thumb-prod {border-radius: 4px; overflow: hidden;}
.prod-conex .thumb-prod a:hover {opacity: .75;}

/* product */
.prod-wrap {width: 100%;  height: auto; margin: 30px auto;}
.prod-wrap .mtitle {text-align: center;}
.prod-wrap .prod-item-list {margin-top: 10px;}
.prod-wrap .prod-item .item-pic {}
.prod-wrap .bt-line.big {margin: 0 auto;}

.prod-wrap .prod-item-list {width: 100%; height: auto; display: grid; grid-template-columns: repeat(4, calc((100% - 22px) / 4)); column-gap: 7px;}
.prod-wrap .prod-item .item-info h4{     padding: 5px 0 0 0;white-space: nowrap; text-overflow: ellipsis; word-break: break-all; overflow: hidden;  }





/* business */
/*
.busi-wrap {width: 100%;  height: 455px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr);}
*/
.busi-wrap {width: 100%;  height: 455px; margin: 0 auto; }
.busi-wrap .client-wrap {padding: 80px 50px; grid-column: 1 / 4; background: url("../image/shop/bg_client.jpg") center / cover no-repeat; border-radius: 4px 0 0 4px; text-align: center;}
.busi-wrap .client-wrap .mtitle {color: #fff;}
.busi-wrap .client-wrap .mtitle mark {position: relative; z-index: 1;}
.busi-wrap .client-wrap .mtitle mark::after {content: ''; display: block; width: 100%; height: 10px; background-color: var(--col-secondary); position: absolute; bottom: 0; left: 0; z-index: -1;}
.busi-wrap .client-wrap .client-list {width: 636px; height: auto; margin-top: 40px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;    left: 162px;    position: relative;}
.busi-wrap .client-wrap .client-list li.FirstIMG {position: absolute;    width: 144px;    left: -160px;}
.busi-wrap .client-wrap .client-list li {}

.busi-wrap .estimate-disc {background-color: var(--col-primary); display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 0 4px 4px 0;}
.busi-wrap .estimate-disc i {display: block; width: 147px; height: 153px; padding: 32px 0 0 4px; position: relative; z-index: 1;}
.busi-wrap .estimate-disc i::before {content: ''; display: block; width: 128px; height: 128px; border-radius: 100%; background-color: #749df5; position: absolute; top: 0; left: 0; z-index: -1;}
.busi-wrap .estimate-disc h4 {padding: 24px 0; color: #fff; font-weight: var(--ft-bold); font-size: var(--ft-size20);}
.busi-wrap .estimate-disc .bt-line::after {display: none;}

/* naver blog */
.naver-blog {width: 100%;    height: auto;    padding: 20px 0 30px;    margin-top: 20px;    background-color: var(--col-bg);}
.naver-blog .inner {width: 100%;  height: auto; margin: 0 auto;}
.naver-blog .mtitle {text-align: center; font-family: var(--fm-eng); text-transform: uppercase; color: var(--col-gray);}
.naver-blog .mtitle span {color: var(--col-primary);}
.naver-blog .mtitle::before {content: var(--blog-icon); display: block; width: 48px; height: 48px; margin: 0 auto;}
.naver-blog ul {width: 100%; height: auto; margin-top: 32px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 27px;}
.naver-blog ul li {line-height: 0;}



/*메인 레이어팝업 관리*/
#layerPopup {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 800px;
    _background: rgba(128, 128, 128, 0.5); /* 반투명 회색 배경 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000;
    pointer-events: none; /* 기본적으로 클릭 불가 */
}

#pop-wrap {
    background: white;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    pointer-events: auto; /* 팝업 내용 클릭 가능하게 설정 */
}
/*메인 레이어팝업 관리*/

/* 에디션 */
.edition-wrap { width: calc(100% + 40px); height: auto; margin: 40px -20px 0 -20px; }
.b-edition-wrap { width: calc(100% + 40px); height: auto; margin: 20px -20px 0 -20px; }

/* 메인 폰트 크기 */
.m-mtitle { font-size: 17px; text-align: center; font-weight: bold; color: var(--dark-black); }

/* 셀프디자인 3개일때 */
.prod-item .item-pic .m-bdg-self-3 {width: 45px !important;height: 45px;padding: 0;border: 0;border-radius: 0;position: absolute;top: 0;left: 0;z-index: 1;}
/* 셀프디자인 4개일때 */
.prod-item .item-pic .m-bdg-self-4 {width: 40px !important;height: 40px;padding: 0;border: 0;border-radius: 0;position: absolute;top: 0;left: 0;z-index: 1;}

/* 단지 안내도, 업체 사진 */
.longbannerimg {
    width: calc(100% + 40px);
    margin: 20px -20px;
}

/* 소재모음 */
.custom-bt-more {display: block; margin: 11px 0;font-weight: var(--ft-bold);font-size: 10px; text-decoration: none;text-align: right;}
.custom-title {display: block; margin-top: 10px; font-size: 12px; font-weight: 500;}

/* 상품별 베너 이미지 */
.icon-banner-img { margin-top: 240px; }

/* business 시공사례 */
.gallery-wrap{ width: 100%; height: auto; margin: 30px auto; }
.gallery-wrap .gallery-list { width: 100%; display: grid; gap: 10px 15px; margin: 10px 0; grid-template-columns: repeat(3, calc((100% - 32px) / 3)); }
.gallery-img { position: relative; }
.gallery-img .item-pic { width: 100%; position: relative; }
.gallery-img .item-pic a { display: block; width: 100%; height: 100%; }
.gallery-img .item-pic img { border-radius: 4px; transition: all .3s; }
.gallery-title { font-size: 12px; font-weight: bold; margin: 8px 0; width: 100%; white-space: nowrap; text-overflow: ellipsis; word-break: break-all; overflow: hidden; padding: 10px 0 0 0; }
.gallery-desc { font-size: 11px; color: var(--col-gray) !important; }

/* business 공간별 */
.business-p-item { margin-bottom: 20px; }
.business-p-wrap { position:relative; margin-top:10px; }
.business-p-wrap img { width:100%; display:block; }

/* business 공간별 추천상품 슬라이드 */
.showpop-header { display: flex; justify-content: space-between; align-items: center; padding: 15px 10px; }
.showpop-title { font-size: 19px; font-weight: 600; color: #333; }  
.more-button { background-color: #cdcdcc; border: none; border-radius: 15px; padding: 9px 13px; display: flex; align-items: center; font-size: 12px; color: #ffffff; cursor: pointer; }
.more-button:hover { color: #ffffff; cursor: pointer; text-decoration:none; }
.showpop-content { padding: 0 10px 20px 10px; }
.area-box { position: absolute; width: 15px; height: 15px; background: url("../image/common/btn_plus_over.gif"); background-size: cover; cursor: pointer; border-radius: 50%; }
.item-ul { overflow-x: auto; gap: 10px; }
.showpop-img { display: grid; grid-template-columns: 80px 1fr; gap: 1.5rem; }
.showpop-flex { display: flex; flex-direction: column; }
.showpop-center { justify-content: center; gap: 0.5rem; align-items: flex-start; }
.showpop-m-name { line-height: 13px; font-weight: 600; font-size: 13px; text-align: left; }
.showpop-m-price { line-height: 15px; font-size: 13px; overflow: hidden; color: var(--navybutton); }
.showpop-m-price .sale { color: #ff4040; font-size:11px; font-weight: 800; }
.showpop-m-price .discount {font-weight: var(--ft-medium); font-size: 11px; }
.business-p-item .mtitle { text-align: center; }

/* 맞춤제작 */
.m-custom-wrap { width: 100%; height: auto; margin: 30px 0 0 0; }
.m-custom-list { display: grid; position: relative; overflow: hidden; height: auto; margin:0 -20px; }
#m-custom-img { width: 100%; grid-area: 1 / 1; height: auto; object-fit: cover; object-position: top; /*transform: translateY(-23%);*/ } 
.m-custom-item { display: flex; flex-direction: column; padding: 70% 11% 0%; grid-area: 1 / 1; position: relative;  height: fit-content; }
.m-custom-item ul{ height: fit-content; display: grid; grid-template-columns: repeat(3, calc((100% - 10px) / 3)); gap: 8px; }
.m-custom-item .bt-more { align-self: flex-end; margin-bottom: 15px; font-weight: var(--ft-bold); font-size: 10px; text-decoration: none; }

/* 공간별 상품*/
.spc-items-wrap{ width: 100%; height: auto; margin: 30px auto; }
.spc-items-wrap .spcTabSwiper{ height: 136px; margin-top: 20px; width: 100%; overflow: hidden; position: relative; }
@media (max-height: 844px) {
    .spc-items-wrap .spcTabSwiper {
        height: 125px;
    }
}
@media (max-height: 670px) {
    .spc-items-wrap .spcTabSwiper {
        height: 115px;
    }
}
.spc-items-wrap .spcTabSwiper .swiper-slide .tab-btn{ display: block; width: 100%; height: 100%; background-size: cover; background-repeat: no-repeat; object-fit: contain; }
.spc-items-wrap .spcTabSwiper .swiper-wrapper .spc-prod-item { position: relative; margin: 0; padding: 0; border-right: 1px solid #eeeeee; border-bottom: 1px solid #eeeeee; }

.spc-items-wrap .spcTabSwiper .swiper-wrapper .spc-prod-item:nth-child(n + 10) { border-bottom: none;}
.spc-items-wrap .spcTabSwiper .swiper-wrapper .spc-prod-item:nth-child(n + 1),
.spc-items-wrap .spcTabSwiper .swiper-wrapper .spc-prod-item:nth-child(n + 2){ border-left: 1px solid #eeeeee; }

.spc-items-wrap .spc-slider-wrapper { margin-top: 10px; position: relative; }
.spc-items-wrap .spc-slider-wrapper .spc-item-list .spc-all-btn{ display: flex; justify-content: center; margin-top: 20px; }
.spc-items-wrap .spc-slider-wrapper .spc-item-list .spc-all-btn .btn-spc{ background: #83A0FE; font-size: 16px; /*border-radius: 8px;*/ height: 24px; width: 55%; margin: 0 auto; color: #ffffff; }

.spc-items-wrap .spcTabSwiper .spc-btn { position: absolute; transform: translateY(-50%); z-index: 10; width: 25px; height: 25px; background-color: #E9E9E9; border-radius: 50%; opacity: 0.7; }
.spc-items-wrap .spcTabSwiper .spc-button-prev{ margin-left: 3px; top: 50%; }
.spc-items-wrap .spcTabSwiper .spc-button-next{ right: 0; top: 50%; }
.spc-btn .material-icons { font-size: 23px; color: #7C7C7C; }

.spc-all-btn .spc-button-prev2{ left: 0; top: 93%; }
.spc-all-btn .spc-button-next2{ right: 0; top: 93%; }

/* 크기조정*/
.prod-item .item-review .grades-wrap button { width: 11px; height: 11px; }
.prod-item .item-util { bottom: 5px; right: 6px; }
.prod-item .item-util i[class^="icon-"] {width: 17px; height: 21px; background-size: 100% 100%;}
div[class^="swiper-pagination"] span { width: 8px; height: 8px; }
.container { padding: 16px 20px; }