@charset "utf-8";
/* *******************************************************
 * filename : main.css
 * description : 메인 레이아웃 및 컨텐츠 CSS
 * date : 2022-08-08
******************************************************** */

.ms-preloader {width: 100%; height: 100%; top: 0; left: 0; opacity: 1; visibility: visible; background-color: #000; position: fixed; z-index: 9999999;}

/* ******************  메인 비주얼 ********************** */
#mainContainer{overflow:hidden;}
#mainVisual{overflow:visible; /* overflow:hidden; */ width:100%; position:relative; padding-top:calc(var(--header-height) + var(--header-top) + 3rem); padding-bottom:3rem; box-sizing:border-box; background:#fff;}
.main-visual-con .slick-track,
.main-visual-con .slick-list {
	-webkit-perspective: 2000;
	-webkit-backface-visibility: hidden;
	overflow:visible !important;
}
.main-visual-con, 
.main-visual-con .slick-list,  
.main-visual-con .slick-track, 
.main-visual-item{
	height:100%;
}
.main-visual-con{display: flex; z-index:1; margin:0 calc(-1 * var(--area-padding)); width:calc(100% + (2 * var(--area-padding) - 1rem));}
/* 메인 비주얼 :: 이미지 */
.main-visual-item{position:relative; margin:0 var(--area-padding);}
.main-visual-item .main-visual-img{
	width:100%;
	height:0;
	padding-top:100%;
	position: relative;
	z-index:1;
}
.main-visual-item .main-visual-img .img{position: absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; max-width:640px; z-index:7; border-radius:1rem; overflow:hidden; transition:var(--transition-custom2); z-index:9;}
/* .main-visual-item .main-visual-img .img:before{position: absolute; content:''; width:100%; height:10rem; background: linear-gradient(180deg, rgba(34, 34, 34, 0) 0%, #000000 175%); background-blend-mode: darken; bottom:0;} */
.main-visual-item .main-visual-img .img img{width:100%; }
.main-visual-item .main-visual-img .bg{position: absolute; top:40%; left:50%; transform:translate(-50%, -50%); width:64.6875vh; max-width:780px; transition:var(--transition-custom2); opacity:0; z-index:-1; overflow:visible !important; pointer-events: none;}
.main-visual-item .main-visual-img .bg img{width:100%; filter: blur(2rem); }

.main-visual-item.slick-current + .main-visual-item .main-visual-img .img{transform:translate(calc(-50% - 4.5rem), -50%) scale(0.92);}
.main-visual-item.slick-current + .main-visual-item .main-visual-img .bg{opacity:0; padding-bottom:5rem;}
.main-visual-item.slick-current .main-visual-img .bg,
.main-visual-item.clone-active .main-visual-img .bg{opacity:1;}

/* 메인 비주얼 :: 텍스트 */
.main-visual-txt-con{
	position:absolute; 
	left:0px; top:0;
	width:100%; 
	height:100%;
	z-index:9;
}
.main-visual-txt-box{
	display:flex;
	align-items: flex-end;
	height:100%;
}
.main-visual-txt-inner{padding:2.5rem; box-sizing:border-box;}
.main-visual-txt-box .main-visual-txt1,
.main-visual-txt-box .main-visual-txt2{
	opacity:0; 
}
.main-visual-txt-box .main-visual-txt1{font-size:2.8rem; font-weight:600; line-height:1.3; color:#fff; margin-bottom:1rem; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);}
.main-visual-txt-box .main-visual-txt2{font-size:1.5rem; font-weight:600; color:#fff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);}
/* 메인 비주얼 :: 텍스트 :: active효과 */
.slick-active .main-visual-txt1,
.clone-active .main-visual-txt1,
.slick-active .main-visual-txt2,
.clone-active .main-visual-txt2{
	animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;
}
.slick-active .main-visual-txt1,
.clone-active .main-visual-txt1{animation-delay:0.1s;}
.slick-active .main-visual-txt2,
.clone-active .main-visual-txt2{animation-delay:0.3s;}
.main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-fade-out 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}
.active-item .main-visual-txt-box .cm-word-split-JS.splitting .char{animation: text-active-animation 1.5s cubic-bezier(0.4, 0, 0.2, 1) both;}

/* 메인 비주얼 :: Animation */
@keyframes image-zoom-out {
	from {
		transform: scale(1.08,1.08)
	}
	to {
		transform: scale(1.0,1.0)
	}
}
@keyframes text-active-animation {
	from {
		opacity:0;filter:Alpha(opacity=0);
		-webkit-transform: translateY(50px); 
		transform: translateY(50px); 
	}
	to {
		opacity:1.0;filter:Alpha(opacity=100);
		-webkit-transform: translateY(0); 
		transform: translateY(0); 
	}
}
@keyframes text-fade-out {
	from {
		opacity:1.0;filter:Alpha(opacity=100);
	}
	to {
		opacity:0;filter:Alpha(opacity=0);
	}
}

/* 메인 비주얼 :: Dots */
.main-visual-dots{position: relative; z-index:10; margin-top:2.5rem;}
.main-visual-dots ul{display:flex; align-items:center; justify-content:center;}
.main-visual-dots li{margin:0 4px;}
.main-visual-dots li button{cursor:pointer; margin:0px; padding:0px; background:none; vertical-align:top; width:6.5px; height:6.5px; background-color:#fff; font-size:0; border-radius:6.5px; transition:var(--transition-custom);}
.main-visual-dots li.slick-active button{background-color:var(--main-color); width:25px;}

/* 메인 비주얼 :: Arrows */
.main-visual-con .slick-arrow{position: absolute; top:50%; transform:translateY(-50%); font-size:3rem; color:#fff; z-index:99;}
.main-visual-con .slick-arrow i{filter: drop-shadow(2px 4px 3px rgba(0, 0, 0, 0.5));}
.main-visual-con .slick-arrow.slick-prev{left:calc(1.5rem + var(--area-padding));}
.main-visual-con .slick-arrow.slick-next{right:calc(1.5rem + var(--area-padding));}

/* ******************  메인 컨텐츠 ********************** */
/* -------- 메인 컨텐츠 :: 공통 -------- */
/* 공통 :: 타이틀 */
.main-tit-box{margin-bottom:2rem;}
.main-tit-box .main-tit{color:#1f1f1f; font-size:2.2rem; font-weight:700; letter-spacing:-0.03em;}

/* 공통 :: 링크 */
.cm-link-btn{display: flex; align-items:center; justify-content:center; width:100%; height:6rem; font-size:2rem; line-height:1; letter-spacing:-0.03em; color:#fff; font-weight:600; background:#ccc; border-radius:6rem;}
.cm-link-btn.btn-style01{background:var(--main-color);}
.cm-link-btn.btn-style02{background:#ddd; color:#666;}
.cm-link-btn.btn-style03{background:rgba(220,99,46,0.15); color:var(--main-color);}
.cm-link-btn.btn-style04{background:#e0f4cf; color:#4fa235;}
.cm-link-btn.small{height:5rem; font-size:1.6rem;}
.cm-link-btn.wide{width:100% !important;}

.cm-link-box.twin{display: flex; margin:0 -0.5rem;}
.cm-link-box.twin .cm-link-btn{/* width:calc(50% - 1rem); */ width:calc(100% - 1rem); margin:0 0.5rem;}

/* -------- 메인 컨텐츠 :: 컨텐츠1(퀵메뉴) -------- */
#mainContent1{background:#fff; padding-bottom:5.5rem; margin-top:3rem;}
.main-quick-menu{display: flex; flex-wrap:wrap; margin:-1rem -1rem -1.2rem;}
.main-quick-menu .list-item{width:calc(20% - 1.4rem); margin:1.2rem 0.7rem; text-align:center; opacity:0; transform:translateY(30px); transition: var(--transition-custom2); }
.main-quick-menu .list-item .img{display: block; position: relative; width:100%; height:0; padding-top:100%; border-radius:1.5rem; overflow:hidden;}
.main-quick-menu .list-item .img img{position: absolute; top:0; left:0; right:0; bottom:0; width:100%; height:100%; object-fit:cover; transition:var(--transition-custom);}
.main-quick-menu .list-item .txt{font-size:1.2rem; letter-spacing:-0.025em; color:#656565; font-weight:500; margin-top:1rem;}

.main-quick-menu .list-item a:hover .img img{transform:scale(1.05);}
/* animated */
.animated.main-quick-menu .list-item{opacity:1; transform:translateY(0);}
.animated.main-quick-menu .list-item:nth-child(1){transition-delay:0.1s}
.animated.main-quick-menu .list-item:nth-child(2){transition-delay:0.2s}
.animated.main-quick-menu .list-item:nth-child(3){transition-delay:0.3s}
.animated.main-quick-menu .list-item:nth-child(4){transition-delay:0.4s}
.animated.main-quick-menu .list-item:nth-child(5){transition-delay:0.5s}
.animated.main-quick-menu .list-item:nth-child(6){transition-delay:0.6s}
.animated.main-quick-menu .list-item:nth-child(7){transition-delay:0.7s}
.animated.main-quick-menu .list-item:nth-child(8){transition-delay:0.8s}
.animated.main-quick-menu .list-item:nth-child(9){transition-delay:0.9s}
.animated.main-quick-menu .list-item:nth-child(10){transition-delay:1s}

/* -------- 메인 컨텐츠 :: 컨텐츠2(이벤트) -------- */
#mainContent2{background:#fff; padding-bottom:5.5rem;}
.main-event-menu{}
.main-event-menu .event-item{box-sizing:border-box; background:#fef8ec; border-radius:1rem; margin-bottom:1rem;}
.main-event-menu .event-item:last-child{margin-bottom:0;}
.main-event-menu .event-item a{display: block; padding:2rem 1.3rem;}
.main-event-menu .event-item dl dt{font-size:1.6rem; color:#222; font-weight:700;}
.main-event-menu .event-item dl dd{font-size:1.2rem; color:#868686; margin-top:1.3rem;}

/* -------- 메인 컨텐츠 :: 컨텐츠3(기획전) -------- */
#mainContent3{margin-bottom:6rem; background:#fff; overflow:hidden;}
#mainContent3 .main-tit-box{position: relative; z-index:1;}
.main-exhibition-con{}
.exhibition-img-banner{position: relative; margin-bottom:4rem;}
.exhibition-img-banner:before{position: absolute; content:''; width:100vw; height:200vh; top:50%; left:50%; transform:translateX(-50%); background:#fbf8f2;}
.exhibition-img-banner .banner-img{position: relative; width:100%;}
.exhibition-img-banner .banner-img span{display: block; position: relative; width:100%; height:0; padding-top:100%; overflow:hidden; border-radius:1rem;}
.exhibition-img-banner .banner-img span .banner-img-bg{position: absolute; display: block; width:100%; height:30%; bottom:0; left:0; z-index:1; /* background: linear-gradient(to bottom,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.3) 90%,rgba(0,0,0,0.3) 100%) */}
.exhibition-img-banner .banner-img span img{position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:100%; height:100%; object-fit:cover;}
.exhibition-img-banner .banner-txt{position: absolute; z-index:1; bottom:3rem; left:2.2rem;}
.exhibition-img-banner .banner-txt dt{font-size:3rem; line-height:1.2; letter-spacing:-0.01em; color:#fff; font-weight:600; margin-bottom:0.8rem; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);}
.exhibition-img-banner .banner-txt dd{font-size:1.5rem; line-height:1.2; letter-spacing:-0.02em; color:#fff; text-shadow: 0 0 3px rgba(0, 0, 0, 0.5);}

.main-exhibition-list{margin-bottom:4rem;}

/* 제품 공통 */
/* 레이아웃 */
.cm-prd-item{background:#fff; border-radius:1rem; box-shadow: 2px 2px 15px 0px rgba(0,0,0,0.15); padding:1.5rem; box-sizing:border-box; margin-bottom:2rem;}
.cm-prd-item:last-child{margin-bottom:0;}
.cm-prd-top-box{position: relative; padding-bottom:1.5rem; margin-bottom:1rem; border-bottom:1px solid #eee; /* cursor:pointer; */}
.cm-prd-bottom-box{margin-bottom:2rem; display: none;}
.cm-prd-category{display: flex; flex-wrap:wrap; margin:-1.5px -1.5px 1rem;}

.cm-prd-item.bd-0 .cm-prd-top-box{padding-bottom:0; margin-bottom:0; border-bottom:0;}
.prd-toggle-JS .cm-prd-top-box{cursor:pointer;}
/* 카테고리 */
.cm-prd-category .cm-category{display: block; font-size:1rem; line-height:1.8; padding:0 0.6rem; margin:1.5px; border-radius:3px;}
.cm-prd-category .cm-category.gray{background:#f1f1f1; color:#716d6d;}
.cm-prd-category .cm-category.orange{background:#ffe9db; color:#d2570a;}
.cm-prd-category .cm-category.pink{background:rgba(244,154,193,0.25); color:#ec008c;}
.cm-prd-category .cm-category.blue{background:#d6f0f9; color:#2060cd;}
.cm-prd-category .cm-category.purple{background:#f7e7ff; color:#854ac5;}
.cm-prd-category .cm-category.green{background:#e0f4cf; color:#4fa235;}
/* 타이틀 */
.cm-prd-tit{font-size:1.6rem; line-height:1.2; letter-spacing:-0.03em; color:#222; font-weight:700;}
.cm-prd-txt{font-size:1.2rem; line-height:1.33; letter-spacing:-0.03em; color:#666;}
.cm-prd-tit + .cm-prd-txt{margin-top:1rem;}
/* 체크박스 */
.cm-prd-checkbox{}
.cm-prd-checkbox .checkbox-item{/* display: flex; justify-content:space-between; */ margin-bottom:0.7rem;}
.cm-prd-checkbox .checkbox-item:after{clear: both; display: block; content: "";}
.cm-prd-checkbox .checkbox-item:last-child{margin-bottom:0;}
.cm-prd-checkbox .checkbox-item .left-txt{float:left; font-size:1.4rem; line-height:1.14; letter-spacing:-0.03em; color:#474747; font-weight:500;}

.cm-prd-checkbox .checkbox-item .right-box{float:right; display: flex; justify-content:flex-end; text-align:right;}
.cm-prd-checkbox .checkbox-item .right-box .price-box{position: relative; display: flex; align-items:flex-end;}
.cm-prd-checkbox .checkbox-item .right-box .price-box .price-cancle{font-size:1.1rem; color:#999; margin-right:0.5rem; text-decoration: line-through;}
.cm-prd-checkbox .checkbox-item .right-box .price-box .price{font-size:1.4rem; color:#666;}

.cm-prd-checkbox .checkbox-item .right-box input[type="checkbox"]{display: none;}
.cm-prd-checkbox .checkbox-item .right-box input[type="checkbox"] + .price-box{padding-right:2.3rem;}
.cm-prd-checkbox .checkbox-item .right-box input[type="checkbox"] + .price-box .icon{position: absolute; top:calc(50% + 2px); right:0; transform:translateY(-50%); width:1.5rem;}
.cm-prd-checkbox .checkbox-item .right-box input[type="checkbox"] + .price-box .icon svg{width:100%; height:100%;}
.cm-prd-checkbox .checkbox-item .right-box input[type="checkbox"]:checked + .price-box .icon svg rect{fill:#000;}
/* 날짜 + 버튼 */
.cm-prd-bottom-con{display: flex; justify-content:space-between; align-items: center; /* margin-top:2rem; */}
.cm-prd-bottom-con .prd-date{font-size:1rem; color:var(--main-color);}
.cm-prd-bottom-con .prd-btn{display: flex; align-items:center; justify-content:center; min-width: 5rem; padding-inline: 0.7rem; height:2rem; font-size:1.2rem; color:#fff; font-weight:600; background:var(--main-color); border-radius:2rem;}

/* 제품 스타일02 */
.cm-prd-item.prd-style02{}
.cm-prd-item.prd-style02 .prd-info{display: flex; align-items:center; margin-bottom:1rem;}
.cm-prd-item.prd-style02 .prd-info .cm-prd-category{margin:0;}
.cm-prd-item.prd-style02 .prd-info .cm-category{display: inline-block; font-size:1.2rem; font-weight:500; padding:5px 8px; box-sizing:border-box; border-radius:3px; line-height:1;}
.cm-prd-item.prd-style02 .prd-info .txt{font-size:1.4rem; line-height:1.14; letter-spacing:-0.03em; color:#666; padding-left:1rem; box-sizing:border-box; }
.cm-prd-item.prd-style02 .price-box{text-align:right; margin-top:0.5rem;}
.cm-prd-item.prd-style02 .price-box .price{font-size:1.4rem; color:#666; font-weight:500;}
/* 취소 */
.cm-prd-item.prd-style02.cancel .prd-info .txt,
.cm-prd-item.prd-style02.cancel .cm-prd-tit,
.cm-prd-item.prd-style02.cancel .price-box .price{color:#999;}

/* 랭킹 */
.rank-box.cm-prd-top-box{position: relative; padding-left:4rem;}
.rank-box.cm-prd-top-box .prd-rank-num{position: absolute; top:0; left:0; display: flex ; align-items: center; justify-content: center; font-size: 1.6rem; color: #fff; font-weight: 700; width: 2.5rem; height: 2.5rem; background: #222; border-radius: 3px;}


/* 제품 스타일 Toggle */
.cm-prd-item.prd-toggle-JS .cm-prd-top-box:before{position: absolute; content:'\e942'; top:calc(50% - 0.75rem); right:0; transform:translateY(-50%); width:3rem; height:3rem; border-radius:50%; background:#eee; font-family:'xeicon'; font-size:1.8rem; color:#555; text-align:center; line-height:2.8rem;}
.cm-prd-item.prd-toggle-JS .cm-prd-top-box .prd-top-info{width:calc(100% - 4rem); padding-right:3rem; box-sizing:border-box;}

.cm-prd-item.prd-toggle-JS.open .cm-prd-top-box:before{content:'\e945';}

/* 제품 스타일 delete */
.cm-prd-top-box .prd-top-info{width:calc(100% - 4rem);}
.cm-prd-top-box .prd-delete-btn{position: absolute; top:calc(50% - 0.75rem); right:0; transform:translateY(-50%); width:3rem; height:3rem; border-radius:50%; background:#eee; display: flex; align-items:center; justify-content:center;}
.cm-prd-top-box .prd-delete-btn svg{width:1.8rem;}
.cm-prd-top-box .prd-delete-btn svg *{stroke:#555;}

/* 체크박스 */
.cm-prd-txt + .cm-prd-checkbox{margin-top:1rem;}

.cm-prd-top-box.flex{display: flex;}
.cm-prd-top-box.flex .prd-total-num{display: flex; align-items:center; justify-content:center; font-size:1.6rem; color:#fff; font-weight:700; width:2.5rem; height:2.5rem; background:#222; border-radius:3px; margin-right:1.4rem;}


/* 상품리스트 NEW */
.prd-new-style .cm-prd-item .cm-prd-bottom-box{display: block;}
/* 상품리스트 NEW :: 옵션이 n회 이상인 상품 */
.prd-new-style .cm-prd-item.prd-new-JS .cm-prd-bottom-box{/* display: none; */}
.prd-new-style .cm-prd-item.prd-new-JS .cm-prd-bottom-box .checkbox-item{display: none;}
.prd-new-style .cm-prd-item.prd-new-JS .cm-prd-bottom-box .checkbox-item:first-child{display: block;}

.prd-new-style .cm-prd-item.prd-new-JS .cm-prd-bottom-box .checkbox-item.clearfix .left-txt{float:left;}
.prd-new-style .cm-prd-item.prd-new-JS .cm-prd-bottom-box .checkbox-item.clearfix .right-box{float:right;}

.prd-new-style .cm-prd-item.prd-new-JS .cm-prd-bottom-con .buy-btn{display: none;}




/* -------- 메인 컨텐츠 :: 컨텐츠4(배너 슬라이드) -------- */
#mainContent4{position: relative; margin-bottom:6rem;}
.main-banner-slide{position: relative; z-index:1;}
.main-banner-slide .list-item{position: relative;}
.main-banner-slide .list-item .img{position: relative; display: block; width:100%; height:0; padding-top:30.53%;}
.main-banner-slide .list-item .img img{position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; width:100%; height:100%; object-fit:cover;}
.main-banner-slide .list-item .txt-box{position: absolute; top:0; display: flex; flex-direction:column; justify-content: center; width:50%; height:100%; padding:var(--area-padding); box-sizing:border-box;}
.main-banner-slide .list-item .txt-box .tit{font-size:2rem; letter-spacing:-0.03em; color:#fff; font-weight:700;}
.main-banner-slide .list-item .txt-box .txt{font-size:1.4rem; line-height:1.1; letter-spacing:-0.03em; color:#fff; margin-top:0.8rem;}

.main-banner-count{position: absolute; bottom:1rem; right:var(--area-padding); background:rgba(0,0,0,0.5); border-radius:2rem; width:4.5rem; height:2rem; z-index:2; display: flex; align-items:center; justify-content:center;}
.main-banner-count span{font-size:1.2rem; color:#fff; letter-spacing:0.09em;}

/* -------- 메인 컨텐츠 :: 컨텐츠5(Top5) -------- */
.main-rank-con{margin-bottom:6rem;}
.main-rank-list{margin-bottom:3rem;}


.more-con-JS{overflow:hidden; max-height:53rem; padding:var(--area-padding); margin:0 calc(-1 * var(--area-padding)); box-sizing:border-box;}

.more-btn-JS{position: relative;}
.more-btn-JS:before{position: absolute; content:''; width:calc(100% + (2 * var(--area-padding))); height:15rem; top:0; left:calc(-1 * var(--area-padding)); right:calc(-1 * var(--area-padding)); transform:translateY(-100%); background: linear-gradient(to bottom,  rgba(251,248,242,0) 0%,rgba(251,248,242,0.6) 80%,rgba(251,248,242,1) 100%);}

.more-con-JS.open{max-height:none;}
.more-con-JS.open + div{display: none;}



/* -------- 메인 팝업 -------- */
#mobilePopupBox{position: absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.75); z-index:99999; display: flex; justify-content: center; align-items: center;}
#mobilePopupBox > .area{width:100%; padding:0 3.5rem;}
#mobilePopupBox .count-box{display: inline-flex; align-items:center; justify-content:center; padding:0 1.5rem; height:2.8rem; font-size:1.5rem; color:#fff; border-radius:2.8rem; background:rgba(255,255,255,0.15); margin-bottom:2rem;}
#mobilePopupBox .count-box .slash{margin:0 3px;}
#mobilePopupBox .popup-rolling-box{margin:0 -1rem;}
#mobilePopupBox .popup-rolling-box .slick-list{overflow:visible;}
#mobilePopupBox .popup-item{margin:0 1rem;}
#mobilePopupBox .popup-item img{width:100%; border-radius:1rem;}
#mobilePopupBox .popup-btn-controls{display: flex; align-items:center; justify-content:space-between; margin-top:2rem;}
#mobilePopupBox .popup-btn-controls .today-close-btn{font-size:1.7rem; color:#fff; font-weight:500;}
#mobilePopupBox .popup-btn-controls .close-btn{display: flex; align-items:Center; justify-content:center; width:12rem; height:4rem; font-size:1.7rem; color:#fff; font-weight:500; background:#000; border-radius:4rem;}