@charset "utf-8";
/* *******************************************************
 * filename : content.css
 * description : 서브페이지 컨텐츠 CSS
 * date : 2022-03-14
******************************************************** */

/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
.custom-scrollbar-cover,
.cm-scroll-drag-guide{display:none;}

/* -------- 공통 :: 탭 -------- */
/* Tab 공통 스타일 */
.sub-tab-wrapper-style{position:relative; height:60px; margin-bottom:15px; }
.sub-tab-list-style ul{display:table; width:100%; height:100%; table-layout:fixed;}
.sub-tab-list-style ul:after{display:none}
.sub-tab-list-style ul li{/* float:left; */ display:table-cell; vertical-align:middle; position:relative; width:20%; background-color:#fff; border:1px solid #e5e5e5; border-left:0 }
.sub-tab-list-style ul li:first-child{border-left:1px solid #e5e5e5;}
.sub-tab-list-style ul li a{display:table; height:58px; width:100%; }
.sub-tab-list-style ul li a em{display:table-cell; vertical-align:middle; color:#494949; font-size:18px; letter-spacing:-0.30px; text-align:center;}
.sub-tab-list-style ul li.selected{z-index:1; background-color:#333; border-color:#333;}
.sub-tab-list-style ul li.selected a em{color:#fff; }
/* Tab Fixed Move*/
.sub-tab-list-style.top-fixed{position:fixed; top:70px; left:0; width:100%; height:60px;}
/* Mobile Tab Drop Menu */
.sub-drop-open-btn-style{display:none}

@media all and (min-width:1025px){
	/* Tab Fixed Background */
	.sub-tab-list-style:before{position:absolute; top:0px; bottom:0px; left:50%; width:0; content:""; background-color:#fff; border-bottom:1px solid #e5e5e5; transition:all 0.5s}
	.sub-tab-list-style.top-fixed:before{width:100%; margin-left:-50%}
}

/* ******************  마감자재 & led디스플레이 공통 ********************** */
/***** 제품 리스트 *****/
.cm-product-list-wrap {display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 5rem 1.333rem; padding: 1rem 0 5rem 0;}
.cm-product-list-wrap .cm-product-list a {position: relative;}
.cm-product-list-wrap .cm-product-list a .icon {display: flex; align-items: center; justify-content: center; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 6rem; height: 6rem; border-radius: 50%; opacity: 0; visibility: hidden; transition: var(--transition-custom); backdrop-filter: blur(20px); background-color: rgba(165, 146, 102, 0.7);}
.cm-product-list-wrap .cm-product-list a .icon i {font-size: 2.4rem; color: #fff;}
.cm-product-list-wrap .cm-product-list .img-box {position: relative; width: 100%; height: 0; padding-top: 100%; background-color: #f7f7f7;}
.cm-product-list-wrap .cm-product-list .img-box::before {position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; border: 2px solid var(--main-color); box-sizing: border-box; opacity: 0; visibility: hidden; transition: var(--transition-custom); z-index: 1;}
.cm-product-list-wrap .cm-product-list .img-box .img {display: flex; align-items: center; justify-content: center; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #f7f7f7; /*  */}
.cm-product-list-wrap .cm-product-list .img-box .img img {max-width: 100%; max-height: 100%;}
.cm-product-list-wrap .cm-product-list .txt-box {text-align: center; margin-top: 2rem;}
.cm-product-list-wrap .cm-product-list .txt-box .cm-product-list-tit {font-size: 1.6rem; font-weight: 400; letter-spacing: -0.05em; line-height: 1.2; color: #aaa; word-break: break-word;}
.cm-product-list-wrap .cm-product-list .txt-box .cm-product-list-txt {font-size: 2.4rem; font-weight: 600; letter-spacing: -0.05em; line-height: 1.66; color: #000; transition: var(--transition-custom); word-break: break-word;}

/*** 카테고리 없는 버전 ***/
.cm-product-list-wrap.none-category-style .cm-product-list .img-box .img img {max-width: 52.942%; max-height: 52.942%; box-shadow: 0 2rem 4rem 0 rgba(0, 0, 0, 0.2);}

/*** 카테고리 버전 ***/
.bbs-top-list-box.category-ver .board-custom-select-box.category-select-box {position: relative;}
.bbs-top-list-box.category-ver .board-custom-select-box.category-select-box::before {position: absolute; top: 50%; right: 0; content: ""; width: 1px; height: 15px; background-color: rgba(0, 0, 0, 0.1); transform: translateY(-50%);}
.bbs-top-list-box.category-ver .board-search-box {width: 575px;}
.bbs-top-list-box.category-ver .board-search-box .board-search-inner {max-width: 575px;}

.cm-product-list-wrap.category-style .cm-product-list .img-box .img {box-shadow: none;}
.cm-product-list-wrap.category-style .cm-product-list .img-box .category {position: absolute; top: 2rem; left: 2rem; display: flex; align-items: center; justify-content: center; min-width: 7rem; height: 3rem; padding: 0 1.5rem; box-sizing: border-box; background-color: var(--main-color); border-radius: 1.5rem; font-size: 1.2rem; font-weight: 600; letter-spacing: -0.025em; color: #fff; z-index: 1;}

@media all and (min-width: 801px) {
	.cm-product-list-wrap .cm-product-list a:hover .icon {opacity: 1; visibility: visible;}
	.cm-product-list-wrap .cm-product-list a:hover .img-box::before {opacity: 1; visibility: visible;}
	.cm-product-list-wrap .cm-product-list a:hover .txt-box .cm-product-list-txt {color: var(--main-color);}
}

/***** 제품 뷰 *****/
.product-view-content {padding-bottom: 4.5rem;}
.product-view-top-con {display: flex; align-items: stretch;}
.product-view-top-con .product-view-slide-wrap {position: relative; width: 42.858%;}
.product-view-top-con .product-view-slide-wrap img {position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; max-width: 100%; max-height: 100%; object-fit: cover;}
.product-view-top-con .product-view-info-wrap {width: 57.143%; padding-left: 7.14%; box-sizing: border-box;}
.product-view-big-slide {margin-bottom: 1.5rem;}
.product-view-big-slide .slide {position: relative; width: 100%; min-height: auto; /* height: 0; padding-top: 60rem;  */background-color: #f7f7f7; cursor: pointer;}
.product-view-big-slide .slide span {position: relative; display: block; height: 0; padding-top: 100%;}
.product-view-big-slide .slide.tile img {max-width: 51.667%; max-height: 51.667%; box-shadow: 0 2rem 4rem 0 rgba(0, 0, 0, 0.2);}
.product-view-small-slide {overflow: hidden;}
.product-view-small-slide .slick-list {margin: 0 -0.8rem;}
.product-view-small-slide .slide {position: relative; min-height: auto; /* height: 0; padding-top: 13.8rem; */ margin: 0 0.8rem; transition: var(--transition-custom); cursor: pointer; background-color: #f7f7f7;}
.product-view-small-slide .slide span {position: relative; display: block; height: 0; padding-top: 100%;}
.product-view-small-slide .slide.tile img {box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.2); max-width: 44.203%; max-height: 44.203%;}
.product-view-small-slide .slide::before {position: absolute; top: 0; left: 0; content: ""; width: 100%; height: 100%; border: 2px solid #a59266; box-sizing: border-box; transition: var(--transition-custom); opacity: 0; visibility: hidden; z-index: 1;}
.product-view-small-slide .slide.slick-current::before {opacity: 1; visibility: visible;}

.product-view-info-wrap .view-info-tit-box {padding-bottom: 3.5rem; border-bottom: 1px solid #ddd;}
.product-view-info-wrap .view-info-tit-box .inner-box {display: flex; align-items: center; justify-content: space-between;}
.product-view-info-wrap .view-info-tit-box .view-info-st {margin-bottom: 1rem; font-size: 2.5rem; font-weight: 400; letter-spacing: -0.05em; line-height: 1.6em; color: #aaa; word-break: break-word;}
.product-view-info-wrap .view-info-tit-box .view-info-tit {font-size: 5rem; font-weight: 600; letter-spacing: -0.05em; line-height: 1.4em; color: #000; word-break: break-word;}
.product-view-info-wrap .view-info-tit-box .view-share-btn {display: flex; align-items: center; justify-content: center; width: 5rem; height: 5rem; border-radius: 50%; border: 1px solid #eee; box-sizing: border-box;}
.product-view-info-wrap .view-info-tit-box .view-share-btn i {font-size: 2.4rem; color: #ccc;}

.product-view-top-con .product-view-info-wrap {padding-top: 5rem;}
.product-view-info-wrap .view-editor-box {min-height: 39rem; padding: 4.5rem 0; border-bottom: 1px solid #ddd; box-sizing: border-box;}
.product-view-info-wrap .view-editor-box .editor p {font-size: 1.8rem; font-weight: 400; letter-spacing: -0.025em; line-height: 1.8; color: #555;}
.product-view-info-wrap .view-btn-box {display: flex; gap: 1rem; margin-top: 5rem;}
.product-view-info-wrap .product-view-btn {display: flex; align-items: center; justify-content: center; width: 50%; height: 7.5rem;}
.product-view-info-wrap .product-view-btn span {margin-right: 1.2rem; font-size: 2rem; font-weight: 700; color: #fff;}
.product-view-info-wrap .product-view-btn i {font-size: 2.4rem; color: #fff;}
.product-view-info-wrap .product-view-btn.gold {background-color: #a59266;}
.product-view-info-wrap .product-view-btn.black {background-color: #000;}

.product-view-detail-con {margin: 12rem 0 8rem 0; /* background-color: #ddd; min-height: 138.5rem; */}
/* .product-view-detail-con img {display: block; margin-left: auto; margin-right: auto;} */

.product-view-content .cm-main-btn {margin: 0 auto; filter: none;}
.product-view-content .cm-main-btn i {font-size: 2.4rem; font-weight: 400;}

/* **** 공유버튼박스 STYLE 01 **** */
.share-btn-wrapper{position:relative; }
.share-btn-wrapper .share-open-btn{font-size:24px; color:#aaa;}
.share-container{display:none;}
.share-list-con{position:fixed; top:0px; left:0px; bottom:0px; right:0px; background:rgba(0,0,0,0.8); z-index:9999 }
.share-list-con .table-layout{display:table; width:100%; height:100%; }
.share-list-con .table-cell-layout{display:table-cell; width:100%; vertical-align:middle;}
.share-box{position:relative; z-index:100; width:94%; max-width:320px; margin:0px auto; background-color:#fff; padding:35px 30px; -webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; -webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;}
.share-box ul{overflow:hidden;}
.share-box ul li{float:left; width:33.33%; text-align:center; margin:10px 0; line-height:normal;}
.share-box ul li a{display:block; }
.share-box ul li .icon{display:flex; align-items: center; justify-content: center; width:40px; height:40px; border-radius:50%;  margin:0px auto; background-color:#333;}
.share-box ul li .icon img {max-width: 100%; max-height: 100%;}
.share-box ul li i{color:#fff; font-size:24px; line-height:40px; -webkit-transition:all 0.3s;-moz-transition:all 0.3s;-o-transition:all 0.3s;transition:all 0.3s;}
.share-box ul li.share-kakao .icon{background-color:#fab900;}
.share-box ul li.share-facebook .icon{background-color:#395498;}
.share-box ul li.share-blog .icon{background-color:#03cf5d;}
.share-box ul li.share-twt .icon{background-color:#000;}
.share-box ul li.share-link .icon{background-color:#777;}
.share-box ul li.share-google .icon{background-color:#dd4e42}
.share-box ul li.share-insta .icon{background-color:#bc1698}
.share-box ul li .share-sns-tit{display:block; padding-top:8px; color:#888; font-size:14px; letter-spacing:-0.25px; font-weight:300;}
.share-close-btn{position:absolute; top:-25px; right:0px;}
.share-close-btn i{color:#fff; font-size:22px;}
/* url 공유박스 있을때 */
.share-url-box{height:37px; position:relative; border:1px solid #e5e5e5; background-color:#f5f5f5; padding-right:80px; -webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:5px; margin-top:18px}
.share-url-box p{height:35px; border:0; background:none; width:100%; text-indent:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#64a4d5; font-size:14px; letter-spacing:-0.25px; line-height:35px;}
.share-url-box .share-copy-btn{position:absolute; top:0px; right:0px; height:100%; width:80px; background:none; border:0; border-left:1px solid #e5e5e5; color:#333; font-size:14px; letter-spacing:-0.25px; font-weight:300;}      

/* ******************  led디스플레이 ********************** */
/* .display-page .product-view-big-slide .slide {padding-top: 20%;} */
.display-page .product-view-small-slide .slick-list {margin: 0 -0.8rem;}
.display-page .product-view-small-slide .slide {/* padding-top: 6.8932%;  */margin: 0 0.8rem;}

/* ******************  카달로그 ********************** */
.catalog-list-wrap {display: grid; grid-template-columns: repeat(2, 1fr); grid-gap: 2rem;}
.catalog-list-wrap .catalog-list {display: flex; border: 1px solid #eee; box-sizing: border-box;}
.catalog-list-wrap .catalog-list .img-box {display: flex; align-items: center; justify-content: center; width: 47.967%; background-color: #f7f7f7; padding: 6.5rem 6rem; box-sizing: border-box;}
.catalog-list-wrap .catalog-list .img-box img {max-width: 100%; box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.1);}
.catalog-list-wrap .catalog-list .txt-box {display: flex; flex-direction: column; justify-content: space-between; width: 52.033%; padding: 7rem 5rem 5rem 5rem; box-sizing: border-box;}
.catalog-list-wrap .catalog-list .txt-box .catalog-list-tit {font-size: 1.2rem; font-weight: 400; letter-spacing: -0.025em; line-height: 1.2; color: var(--main-color);}
.catalog-list-wrap .catalog-list .txt-box .catalog-list-txt {margin-top: 1rem; font-size: 3.4rem; font-weight: 600; letter-spacing: -0.05em; line-height: 1.2; color: #000;}
.catalog-list-wrap .catalog-list .catalog-btn {display: flex; align-items: center; justify-content: space-between; background-color: #fff; width: 100%; height: 6rem; padding: 0 10% 0 11%; box-sizing: border-box; border: 2px solid var(--main-color); transition: all 0.3s;}
.catalog-list-wrap .catalog-list .catalog-btn span {font-size: 1.8rem; font-weight: 700; color: var(--main-color); transition: all 0.3s;}
.catalog-list-wrap .catalog-list .catalog-btn i {font-size: 2.4rem; color: var(--main-color); transition: all 0.3s;}

@media all and (min-width: 801px) {
	.catalog-list-wrap .catalog-list .catalog-btn:hover {background-color: var(--main-color);}
	.catalog-list-wrap .catalog-list .catalog-btn:hover span, .catalog-list-wrap .catalog-list .catalog-btn:hover i {color: #fff;}
}

/* ******************  온라인 문의 ********************** */
.contact-content {position: relative; display: flex; padding: 5rem 0;}
.contact-content .left-info-wrap {width: 39.286%;}
.contact-content .left-info-wrap .contact-info-tit {font-size: 5rem; font-weight: 600; letter-spacing: -0.05em; line-height: 1.3; color: #000;}
.contact-content .left-info-wrap .contact-info-tit span {color: var(--main-color);}
.contact-content .left-info-wrap .info-box {margin-top: 6rem; padding: 4.5rem 5rem; background-color: #f7f7f7; box-sizing: border-box;}
.contact-content .left-info-wrap .info-box .info-box-tit {margin-bottom: 1.5rem; font-size: 2.4rem; font-weight: 600; letter-spacing: -0.05em; line-height: 1.4; color: #000;}
.contact-content .left-info-wrap .info-box .inner-list li {display: flex;}
.contact-content .left-info-wrap .info-box .inner-list li span {display: inline-block; padding-right: 2rem; width: 6rem; font-size: 1.8rem; font-weight: 400; letter-spacing: -0.05em; line-height: 1.66; color: #000;}
.contact-content .left-info-wrap .info-box .inner-list li p {width: calc(100% - 8rem); font-size: 1.8rem; font-weight: 400; letter-spacing: -0.05em; line-height: 1.66; color: #666;}

.contact-content .cm-main-btn {margin-top: 4rem; filter: blur(0); color: #000;}
.contact-content .cm-main-btn:before {background-color: #000;}

.contact-content .right-info-wrap {width: 60.715%; padding-left: 12.14%; box-sizing: border-box;}
.contact-content .right-info-wrap .contact-form li {margin-bottom: 2rem;}
.contact-content .right-info-wrap .contact-form li h5 {margin-bottom: 1rem; font-size: 1.7rem; font-weight: 600; letter-spacing: -0.055em; line-height: 1.4; color: #000;}
.contact-content .right-info-wrap .contact-form li input {width: 100%; height: 4.5rem; border: none; border-bottom: 2px solid #e5e5e5; font-size: 1.4rem; font-weight: 400; letter-spacing: -0.055em; color: #000; outline: none; transition: border-color 0.3s;}
.contact-content .right-info-wrap .contact-form li input::placeholder {font-size: 1.4rem; font-weight: 400; letter-spacing: -0.055em; color: rgba(0, 0, 0, 0.2);}
.contact-content .right-info-wrap .contact-form li textarea {width: 100%; min-height: 19.5rem; padding: 2.5rem; border: 2px solid #e5e5e5; box-sizing: border-box; font-size: 1.4rem; font-weight: 400; letter-spacing: -0.055em; color: #000; outline: none; transition: border-color 0.3s;}
.contact-content .right-info-wrap .contact-form li textarea::placeholder {font-size: 1.4rem; font-weight: 400; letter-spacing: -0.055em; color: rgba(0, 0, 0, 0.4);}
.contact-content .right-info-wrap .contact-form li input:focus, .contact-content .right-info-wrap .contact-form li textarea:focus {border-color: #000;}

.contact-content .agree-box {display: flex; justify-content: space-between; padding-top: 1rem;}
.contact-content .agree-tit{color: #222; font-size: 2rem; letter-spacing: -0.05em; font-weight: 500;}
.contact-content .agree-txt{font-size: 1.5rem; font-weight: 400; letter-spacing: -0.05em; line-height: 1.4; color: rgba(0, 0, 0, 0.55);}
.contact-content .agree-txt input{display: none;}
.contact-content .agree-txt label{position: relative; padding-left: 3.2rem; }
.contact-content .agree-txt label i{position: absolute; left: 0; font-size: 2.2rem; color: #aaa;}
.contact-content .agree-txt input:checked + label i{color: #000;}
.contact-content .agree-btn {position: relative; display: flex; font-size: 1.4rem; font-weight: 600; letter-spacing: -0.045em; line-height: 1.4; color: rgba(0, 0, 0, 0.55);}
.contact-content .agree-btn::before {position: absolute; content: ""; left: 0; bottom: -1rem; width: 100%; height: 2px; background-color: #000;}
.contact-content .agree-btn i {margin-left: 1.2rem; font-size: 1.9rem; color: rgba(0, 0, 0, 0.7);}