@charset "utf-8";

/* ===================================
	공통클래스
 =================================== */
body { background-color:#fff; }

/***** Align *****/
.alignL {text-align:left !important;}
.alignR {text-align:right !important;}
.alignC {text-align:center !important;}
.valignM {vertical-align:middle !important;}
.valignT {vertical-align:top !important;}
.valignB {vertical-align:bottom !important;}

.floatL {float:left !important;}
.floatR {float:right !important;}


/***** width *****/
.wdAuto {width:auto !important;}

.wdP10 {width:10% !important;}
.wdP20 {width:20% !important;}
.wdP30 {width:30% !important;}
.wdP40 {width:40% !important;}
.wdP50 {width:50% !important;}
.wdP60 {width:60% !important;}
.wdP70 {width:70% !important;}
.wdP80 {width:80% !important;}
.wdP90 {width:90% !important;}
.wdP95 {width:95% !important;}
.wdP100 {width:100% !important;}

/*Border*/
.BD {border:1px solid #ccc !important;}
.BDT {border-top:1px solid #ccc !important;}
.BDR {border-right:1px solid #ccc !important;}
.BDB {border-bottom:1px solid #ccc !important;}
.BDL {border-left:1px solid #ccc !important;}

/*Margin*/
.MAT_1 {margin-top:-1px !important;}
.MAT0 {margin-top:0 !important;}
.MAT-XXL {margin-top:160px !important;}
.MAT-XL {margin-top:120px !important;}
.MAT-L {margin-top:80px !important;}
.MAT-M {margin-top:60px !important;}
.MAT-S {margin-top:40px !important;}
.MAT-XS {margin-top:20px !important;}
.MAT-XXS {margin-top:10px !important;}


@media all and (max-width:1024px){
	/*Margin*/
	.MAT-XXL {margin-top:140px !important;}
	.MAT-XL {margin-top:100px !important;}
	.MAT-L {margin-top:60px !important;}
	.MAT-M {margin-top:40px !important;}
	.MAT-S {margin-top:30px !important;}
	.MAT-XS {margin-top:15px !important;}
	.MAT-XXS {margin-top:5px !important;}
}


@media all and (max-width:768px){
	/*Margin*/
	.MAT-XXL {margin-top:100px !important;}
	.MAT-XL {margin-top:80px !important;}
	.MAT-L {margin-top:50px !important;}
	.MAT-M {margin-top:30px !important;}
	.MAT-S {margin-top:10px !important;}
	.MAT-XS {margin-top:5px !important;}
}


@media only screen and (min-width: 769px) {
	.pc {display:block !important;}
	.mo {display:none !important;}
}

@media only screen and (max-width: 768px) {
	.pc {display:none !important;}
	.mo {display:block !important;}
}

/* 제품소개 */
.products-list-item {position: fixed; top: 0; left: 0; z-index: 9999; width: 0; height: 0; overflow: hidden;}
.products-list-item.active {width: 100%; height: 100vh;}
.products-list-item-dimmed {display: block; content: ''; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.8); position: absolute; top: 0; left: 0;}
.products-item-list {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 1; max-width: 500px; width: 40%;}
.product-text {background: #462a0e; padding: 20px;}
.product-text h4 {font-size: 20px; color: #fff; margin-top: 15px;}
.product-text p {margin-top: 10px; font-size: 16px; line-height: 1.4; color: #ded7d0;}
.products-list .newBoard__certificate-item .thumb span {background-size: cover !important;}
/* -------- 제품 이미지 백그라운드로 들어가요! ------------- */
.products-item.nth-1 .product-img.nth-1 {background: url('../images/common/board/img_sample01.jpg') no-repeat center / cover;}
.products-item.nth-1 .product-img.nth-2 {background: url('../images/common/board/img_sample02.jpg') no-repeat center / cover;}
.products-item.nth-1 .product-img.nth-3 {background: url('../images/common/board/img_sample03.jpg') no-repeat center / cover;}

/* .product {max-height: 80vh;} */

.products-list-dot {text-align: center; padding: 10px;}
.products-list-dot ul {display:block; font-size:0;}
.products-list-dot li{display:inline-block; cursor:pointer; margin:0; width:26px; height:28px; line-height:30px; text-align:center;transition:all 0.3s ease-in-out; border-radius: 50%; background:rgba(255, 255, 255, 0.0);}
.products-list-dot li+li {margin-left: 5px;}
.products-list-dot button {display:inline-block; position:relative; width:8px; height:8px; border:0px solid #fff;  overflow:hidden;  background-color:#fff; box-sizing:border-box; transition:all .2s ease-in-out;  font-size:0; border-radius:4px;}
.products-list-dot li:hover,
.products-list-dot li.slick-active {background:rgba(255, 255, 255, 0.5);}
.products-list-dot li:hover button,
.products-list-dot li.slick-active button {background-color:#fff;}

.products-list-arrow {display:inline-block; width:60px; height:28px; cursor: pointer; text-indent:-9999px; overflow:hidden; background-repeat:no-repeat; transition:all .3s ease-in-out; background-size:auto 100%; z-index: 1;}

.products-list-arrow.prev {background-image:url('../images/main/slider_arrow01.png'); background-position:0 50%; left:0; position: absolute; top: 50%; left: 50%; transform: translate(-400px, -50%);}
.products-list-arrow.next {background-image:url('../images/main/slider_arrow02.png'); background-position:100% 50%;right:0; position: absolute; top: 50%; right: 50%; transform: translate(400px, -50%);}
.products-list-arrow.prev:focus,
.products-list-arrow.prev:hover {background-position:-60px 50%;}
.products-list-arrow.next:focus,
.products-list-arrow.next:hover {background-position:0 50%;}

.products-list-close {display:block; position: fixed; right: 20px; top: 25px; width: 50px; height: 50px; z-index:1002; padding:0; font-size:0; background-color:#fff; font-weight:700; text-align:center; transition: all 0.3s ease-in-out; border-radius:50%;  overflow:hidden; text-indent:-8888888px;}

.products-list-close span:before,
.products-list-close span:after {content:''; display:block; width:28px; height:2px; background-color:#222; position:absolute; top:50%; left:50%;transition: all 0.3s ease-in-out;}

.products-list-close span:before {transform:translate(-50%, -50%) rotate(45deg);}
.products-list-close span:after {transform:translate(-50%, -50%) rotate(-45deg);}

.products-list-close:hover span:before,
.products-list-close:focus span:before {transform:translateX(-50%) rotate(-45deg); background-color:#fff;}
.products-list-close:hover span:after,
.products-list-close:focus span:after {transform:translateX(-50%) rotate(45deg); background-color:#fff;}
.products-list-close:hover,
.products-list-close:focus {background-color:#736451;}

.main__products-list .nolist{font-size: 18px;padding: 100px 0 50px}

@media only screen and (max-width: 1025px) {
    .products-list-arrow.prev {transform: translate(-300px, -50%);}
    .products-list-arrow.next {transform: translate(300px, -50%);}
}

@media only screen and (max-width: 768px) {
    .products-item-list {width: 60%;}
}

@media only screen and (max-width: 640px) {
    .products-item-list {width: 80%;}

    .products-list-arrow.prev {top: 95%; transform: translate(-190px, -50%);}
    .products-list-arrow.next {top: 95%; transform: translate(190px, -50%);}
}

@media only screen and (max-width: 480px) {
    .products-list-arrow.prev {top: 90%; transform: translate(-125px, -50%);}
    .products-list-arrow.next {top: 90%; transform: translate(125px, -50%);}
}
