@charset "utf-8";

/*========================================================================
메인 레이아웃
========================================================================*/

.body-main { overflow-x:auto !important; }
.body-main #header .header-wrap { position:absolute; top:0; left:0; right:0; z-index:100; }
.body-main:not(.fp-viewing-1Page) #header .header-wrap { background:rgba(149,125,99,0.15); }
.body-main:not(.fp-viewing-1Page) #header h1.top-logo { margin:20px 0; }
.body-main #container { padding-bottom:0; }
.body-main #contents { width:100%; padding:0; }
.body-main .side-floating { display:inline; }

.main-inner { position:relative; max-width:1690px; min-width:1210px; width:100%; padding:0 5px; margin:0 auto; box-sizing:border-box; }
.main-inner::after { content:""; display:block; clear:both; }


/*========================================================================
메인 영역
========================================================================*/
/* 메인 비주얼 */
.main-visual { position:relative; }
.main-visual .slider-wrap .slick-slide { position:absolute !important; top:0; left:0 !important; width:100% !important; min-height:100vh; }
.main-visual .slick-slider .slick-track { width:100% !important; }
.main-visual .slider-wrap .slick-slide img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }

/* 좌우버튼 */
.main-visual .slick-btn { display:inline-flex; vertical-align:middle; justify-content: space-between; width:85px; margin:0 0 0 16px; font-size:0; }
.main-visual .slick-btn > button { position:static; display:inline-block; width:8px; height:15px; font-size:0; background:no-repeat 50% 50%; transform: translate(0, 0); cursor:pointer; transition:all 0.3s ease; }
.main-visual .slick-btn .slick-prev { background-image:url("../img/main_prev_btn.png"); }
.main-visual .slick-btn .slick-next { background-image:url("../img/main_next_btn.png"); }

/* progress bar & caption */
.main-visual .slick-control { display:flex; align-items:center; position:absolute; bottom:70px; left:50%; z-index:100; transform:translateX(-50%); }
.main-visual .slick-control .progressbar { width:300px; height:2px; background:rgba(66,66,66,0.2); }
.main-visual .slick-control #progress { position:relative; height:2px; width:0; background:#424242; z-index:400; }
.main-visual .slick-control #progress.progress-ani { animation:progressW 1; width:100%; }
.main-visual .slick-control .caption { position:absolute; right:17px; }
.main-visual .slick-control .caption > span { position:relative; color:#424242; font-size:15px; font-weight:400; opacity:1; }
.main-visual .slick-control .caption .total { padding:0 0 0 7px; margin:0 0 0 7px; opacity:0.7; }
.main-visual .slick-control .caption .total::before { content:""; position:absolute; top:4px; left:0; width:1px; height:11px; background:#897d73; }

/* 비주얼 타이틀 */
.visual-title { position:absolute; top:50%; left:50%; width:1410px; transform:translate(-50%, -194px); text-align:left; pointer-events:none; }
.visual-title em { display:block; color:var(--basic-color); font-size:18px; font-weight:300; }
.visual-title h3 { margin:32px 0 0; color:var(--basic-color); font-size:56px; font-weight:800; line-height:1.2; letter-spacing:-2px; }
.visual-title h4 { margin:32px 0 0; color:var(--oilve-color); font-size:56px; font-weight:800; line-height:1.2; letter-spacing:-2px; }
.visual-title h5 { margin:0; color:var(--basic-color); font-size:56px; font-weight:800; line-height:1.2; letter-spacing:-2px; }
.visual-title h6 { position:relative; display:block; width:400px; height:85px; margin:30px 0 0 0; }
.visual-title span { position:relative; display:block; width:193px; height:56px; line-height:54px; margin:40px 0 0; padding:0 0 0 30px; color:#000; font-size:16px; font-weight:300; border:1px solid rgba(34,34,34,1); border-radius:10px; box-sizing:border-box; }
.visual-title span2 { position:relative; display:block; width:193px; height:56px; line-height:54px; margin:40px 0 0; padding:0 0 0 30px; color:#fff; font-size:16px; font-weight:300; border:1px solid rgba(238,238,233,1); border-radius:10px; box-sizing:border-box; }
.visual-title span::before { content:""; position:absolute; top:20px; right:40px; width:1px; height:15px; background:#000;  }
.visual-title span2::before { content:""; position:absolute; top:20px; right:40px; width:1px; height:15px; background:#eeeee9;  }
.visual-title span::after { content:""; position:absolute; top:50%; right:33px; width:15px; height:1px; background:#000;  }
.visual-title span2::after { content:""; position:absolute; top:50%; right:33px; width:15px; height:1px; background:#eeeee9;  }

/* 비주얼 타이틀 모션 */
.main-visual .slider-wrap .slick-slide { position:relative; }
.main-visual .slider-wrap .slick-slide .visual-title > * { opacity:0; transition: all 1s; }
.main-visual .slider-wrap .slick-active .visual-title > * { backface-visibility:hidden; animation:TransXRR 1s ease-out both; opacity:1; }

/* 메인 애니메이션 */
.fadeIn { opacity:0; animation-duration:1s; animation-delay:.6s; transition: opacity 1s 0.6s; }
.active .fadeIn { opacity:1; }
.active .transR { animation-name:TransXRR; }
.active .transV { animation-name:TransVV; }
.active .transY { animation-name:TransYY; }
.main-wide-bn img { width:100%; transition: transform 6s linear; }
.active .main-wide-bn img { transform: scale(1.2) rotate(0.002deg); transition-delay:1s; }

/* 풀페이지 네비 */
#fp-nav.right { right:30px; }
#fp-nav ul li { display:flex; width:8px; height:8px; margin:0; padding:9px 0; }
#fp-nav ul li a span,
#fp-nav ul li:hover a span { width:100%; height:100%; margin:-4px 0 0 -4px; border:1px solid #555555; background:none; box-sizing:border-box; }
#fp-nav ul li a.active span,
#fp-nav ul li:hover a.active span { width:100%; height:100%; margin:-4px 0 0 -4px; border:0; background:#424242; }

/* box 간격 */
.main-wrap > div:not(.fp-auto-height) { min-height:100vh; }
.main-box { padding:0; }
.main-box2 { padding:0; }
.main-box3 { padding:0; overflow:hidden; }
.main-box4 { padding:0; }
.main-box5 { padding:0; }

/* 메인 타이틀 */
.main-wrap .goods_list_tit { display:none; }
.main-wrap .title h2 { margin:0 0 30px; color:var(--basic-color); font-size:38px; font-weight:400; line-height:1.25; letter-spacing:-1px; }
.main-wrap .title h3 { margin:0 0 30px; color:var(--basic-color); font-size:38px; font-weight:400; line-height:1.25; letter-spacing:-1px; }
.main-wrap .title h4 { margin:0 0 30px; color:var(--basic-color); font-size:38px; font-weight:400; line-height:1.25; letter-spacing:-1px; }
.main-wrap .title p { color:#ced4da; font-size:16px; font-weight:400; } /* color:#80593a */

/* 하프 영역 (배너 & 상품) */
.main-half-box { display:flex; flex-wrap:wrap; width:100%; }
.main-half-box > div { position:relative; width:50%; }
.main-half-box > div .title h2 { color:#222; font-size:50px; font-weight:600; }
.main-half-box > div .title h3 { color:#222; font-size:50px; font-weight:200; }
.main-half-box > div .title h4 { color:#fff; font-size:50px; font-weight:200; }
.main-half-box .box-left .title { position:absolute; top:50%; right:0; width:clamp(600px, 50vw, 1000px); padding-left:3.8%; box-sizing:border-box; z-index:1; }
.main-half-box .box-left .title > * { transform:translateY(-200%); }
.main-half-box .box-right .title h2 { font-weight:400; }
.main-half-box .box-right .title h3 { font-weight:400; }
.main-half-box .box-right .title h4 { font-weight:400; }
.main-half-box .box-left { display:flex; justify-content:flex-end; height:0; padding-top:100vh; background:#f4e4d7; }
.main-half-box .box-left img { position:absolute; top:0; bottom:0; right:0; width:clamp(600px, 50vw, 1000px); height:clamp(640px, 100%, 1080px); object-fit:cover; }
.main-half-box .box-right { display:flex; justify-content:flex-start; background:#ede8e2; }
.main-half-box .box-right > div { display:flex; flex-direction:column; justify-content:center; align-items:center; width:clamp(600px, 50vw, 1000px); }
.main-half-box .box-right .goods_list { min-height:485px; }
/* NEW 상품 */
/* 탭진열 */
.main-half-box .goods_tab_tit ul { display:flex; justify-content:center; align-items:center; gap:50px; width:auto; margin:0 0 45px; }
.main-half-box .goods_tab_tit ul li { width:auto !important; }
.main-half-box .goods_tab_tit ul li a { padding:0; margin:0; color:var(--basic-color); font-size:18px; font-weight:400; line-height:1.2; border:0; }
.main-half-box .goods_tab_tit ul li.on a { font-weight:400; background:none; border:0; border-bottom:1px solid var(--basic-color); }
/* 상품 진열 */
.main-half-box .goods_tab_cont { max-width:420px; }
.main-half-box .goods_tab_cont .goods_tab_box { padding:0 0 60px; overflow:hidden; }
.main-half-box .goods_list_cont .item_cont { padding:0; }
.main-half-box .goods_list_cont .item_info_cont { text-align:center; }
.main-half-box .goods_list_cont .item_tit_box .item_name { font-size:18px; }
.main-half-box .goods_list_cont .item_icon_box { display:none; }
.main-half-box .goods_list_cont .sale-rate { font-size:18px; }
/* 좌우버튼 */
.main-half-box .swiper-button-prev,
.main-half-box .swiper-button-next { display:block !important; position:absolute; top:45%; width:19px; height:37px; margin:0; background:no-repeat 0 0; background-size:19px auto; } 
.main-half-box .swiper-button-prev { left:-50px; background-image:url("../img/main_prd_prev.png"); }
.main-half-box .swiper-button-next { right:-50px; background-image:url("../img/main_prd_next.png"); }
/* 페이징 */
.main-half-box .swiper-pagination { bottom:0; color:#3d3d3d; font-size:15px; }
.main-half-box .swiper-pagination span { padding:0 2px; color:#999999; font-size:12px; vertical-align:2px; }
.main-half-box .swiper-pagination em { color:#999999; }

/* BEST PRODUCT */
.main-prd1 .goods_list_cont > div { overflow:hidden; }
.main-prd1 .goods_list_cont .item_cont { padding:0 0 clamp(100px,15vh,140px); }
.main-prd1 .goods_list_cont .item_icon_box { display:none; }
/* 스크롤바 */
.main-prd1 .swiper-scrollbar { left:0; bottom:0; width:100%; height:3px; border-radius:3px; background:#e1e1e1; }
.main-prd1 .swiper-scrollbar-drag { border-radius:3px; background:var(--basic-color); }

/* 와이드 배너 */
.main-wide-bn { display:flex; justify-content:center; align-items:center; overflow:hidden; } 
.main-wide-bn .title { position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:100%; text-align:center; z-index:1; }
.main-wide-bn .title h2 { color:#fff; font-size:46px; font-weight:500; text-align:center; }
.main-wide-bn .title p { color:#fff; font-size:17px; font-weight:400; text-align:center; }
.main-wide-bn .title span { position:relative; display:block; width:223px; height:60px; line-height:58px; margin:40px auto 0; padding:0 0 0 25px; color:#fff; font-size:18px; font-weight:400; border:2px solid rgba(255,255,255,0.4); border-radius:10px; box-sizing:border-box; text-align:left; }
.main-wide-bn .title span::before { content:""; position:absolute; top:21px; right:32px; width:2px; height:14px; background:#fff;  }
.main-wide-bn .title span::after { content:""; position:absolute; top:50%; right:26px; margin-top:-1px; width:14px; height:2px; background:#fff;  }
.main-wide-bn span { display:block; height:100vh; }
.main-wide-bn span img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }

/* 리뷰 */
.main-review { overflow:hidden; }
.main-review ul li .review-thumb img { width:100%; }
.main-review .point { display:flex; justify-content:space-between; margin:15px 0; }
.main-review .point .rating { display:inline-block; vertical-align:middle; width:115px; height:20px; margin:0; padding:0; background:url("../img/review_bg.png") no-repeat 0 0; text-indent:-9999px; }
.main-review .point .rating span { display:block; height:20px; background:url("../img/review_fill.png") no-repeat 0 0; }
.main-review .review-prd { display:flex; flex-direction:column; align-items:center; }
.main-review .review-prd .img { position:relative; width:95px; height:95px; margin:-55px 0 0; border:2px solid #fbf7f0; border-radius:50%; overflow:hidden; }
.main-review .review-prd .img img { width:100%; }
.main-review .review-prd .name { margin:0 0 10px; }
.main-review .review-prd .name a { color:var(--point-color); font-size:14px; }
.main-review .review-prd .subject { color:#666666; font-size:14px; }

/* 인스타그램 */
.main-insta { position:relative; }
.main-insta .insta-bn { position:absolute; top:0; left:calc((100% + 10px)/ 2); width:calc((100% - 40px)/ 4); padding-top:24.2%; background:#e8d1bd; }
.main-insta .insta-bn:nth-of-type(2) { top:calc(50% - 3px); left:0; width:calc((100% - 20px)/ 2); padding-top:24.2%; background:#fbf7f0; }
.main-insta .insta-bn > span { position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; color:var(--basic-color); font-size:35px; font-weight:500; text-align:center; }
.main-insta .insta-bn:nth-of-type(2) > span { font-size:36px; font-weight:300; letter-spacing:-1px; }
.main-insta .insta-bn:nth-of-type(2) > span strong { font-weight:600; }