/* BASIC css start */
.productMoreBtn{text-align:center}
.productMoreBtn span{    padding: 10px 25px;
    cursor: pointer;
    border: 1px solid #ccc;
    font-size: 14px;
    display: inline-table;
    color: #333;}
.prdMoreWrap .crema-product-reviews-count,.prdMoreWrap .item-wrap .item-cont .item-list .prd-subname{font-size:12px}
.threeBnSlideInner .slick-arrow,.threeBnSlideInner .slick-slide>div{font-size:0}
.prdMoreWrap .crema-product-reviews-count{margin-left:4px}
.threeBnSlide{    margin: 120px 0 50px;}
.threeBnSlideWrap{font-size:0;letter-spacing:0}
.threeBnSlide .slick-prev{left:0;background:url(/design/jojean/phps/main/main_plan_prev.png) no-repeat rgba(0,0,0,.4);background-position:center right 20px}
.threeBnSlide .slick-next{right:0;background:url(/design/jojean/phps/main/main_plan_next.png) no-repeat rgba(0,0,0,.4);background-position:center left 20px}
.threeBnSlide .slick-arrow{content:"";position:absolute;top:0;width:calc((100% - 1084px)/ 2);max-width:410px;height:100%;z-index:4}
.threeBnSlide .slick-list{padding:0!important}
.threeBnSlideInner .bnItem Img{width:100%}
.threeBnSlideInner .slick-slider.threeBnSlideBox:after,.threeBnSlideInner .slick-slider.threeBnSlideBox:before{display:block}
.threeBnSlideInner .bnItem .bnImg{margin:0}
.threeBnSlide .slick-next:focus,.threeBnSlide .slick-prev:focus,.threeBnSlide .slick-slide img:focus{outline:0}

/* 메인 상단 슬라이드 배너 */
#mainSpot {position:relative;min-width:1366px;height:750px;overflow:hidden;}
#mainSpot .mainSpotArea {position:absolute;top:0;left:50%;width:1920px;height:750px;margin-left:-960px;text-align: center;}
#mainSpot .bx-controls-direction { position:absolute;top:50%;margin-top:-40px; z-index:60;text-align:center;width: 100%; }
#mainSpot .bx-controls-direction a { display:inline-block;position:absolute;top:0;width:80px;height:80px;text-indent:-9999em;transition:all 0.3s ease;-webkit-transition:all 0.3s ease; }
#mainSpot .bx-controls-direction .bx-prev {left:50%;margin-left: -940px; background:url(/design/jojean/phps/main/btn_prev_off.png) 0 0 no-repeat }
#mainSpot .bx-controls-direction .bx-prev:hover { background:url(/design/jojean/phps/main/btn_prev_on.png) 0 0 no-repeat }
#mainSpot .bx-controls-direction .bx-next {right:50%;margin-right: -940px; background:url(/design/jojean/phps/main/btn_next_off.png) 0 0 no-repeat }
#mainSpot .bx-controls-direction .bx-next:hover { background:url(/design/jojean/phps/main/btn_next_on.png) 0 0 no-repeat }
#mainSpot .bx-pager {position: absolute;text-align:center;bottom:25px;width: 100%;}
#mainSpot .bx-pager .bx-pager-item { display:inline-block; margin:0 5px }
#mainSpot .bx-pager .bx-pager-item a { display:block; width:10px; height:10px; text-indent:-9999em; border-radius:25px; background:#b5b5b5; -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out; }
#mainSpot .bx-pager .bx-pager-item .active { background:#717171 }

/* 검색 */
#mainSearch { padding-top:100px }
#mainSearch .search { margin:0 auto; position:relative; width:454px; height:38px; border:1px solid #ccc }
#mainSearch .search input { width:405px; height:38px; font-size:13px; text-indent:10px; line-height:38px; border:0 }
#mainSearch .search a { position:absolute; top:0; right:5px; width:38px; height:38px; text-indent:-9999em; background:url(/design/jojean/phps/main/btn_main_search.gif) 0 0 no-repeat }
#mainSearch .hashTag { padding-top:15px; text-align:center }
#mainSearch .hashTag a { padding:0 10px; font-size:13px; color:#000 }

/* 메인영상 */
#mv_play {margin:0 auto; text-align:center}
#mv_play h2{font-size:18px; font-family: 'EB Garamond', 'Noto Sans KR', 'Apple SD Gothic Neo', '맑은 고딕', 'malgun gothic', 'sans-serif'; margin-top:100px}
#mv_play video{width:1366px; margin:20px 0 50px }



/* 배너 */
.alignBanner { margin:0 auto; padding-top:140px; width:100%; min-width:1366px; max-width:1584px }
.alignBanner p img { width:100% }

.bannerFour { padding-top:100px; width:100%; min-width:1366px; max-width:1584px; margin:60px auto 80px; overflow:hidden }
.bannerFour ul { *zoom:1 }
.bannerFour ul:after { display:block; clear:both; content:'' }
.bannerFour li { float:left; width:25% }
.bannerFour li a { display:block; padding-right:6px }
.bannerFour li img { width:100% }

.fullBanner { margin:00px 0 0 0; position:relative; width:100%; min-width:1366px; height:656px; overflow:hidden }
.fullBanner .fullImage { margin-left:-960px; position:absolute; top:0; left:50%; width:1920px }

/* TREND Pick */
.titleArea {padding: 75px 0 30px; text-align: center;}
.titleArea .p01 {font-size: 43px; font-weight: 800; color: #000;}
.titleArea .p02 {margin-top: 10px; color: #666; font-size: 16px; font-weight: bold;}
.titleArea .p03 {  text-align: right;  margin: auto;  color: #666;  max-width: 1370px;  min-width: 1366px;}
.newItemArea {position: relative; }
.newItemArea .item-wrap {position: relative; overflow: inherit;}
.newItemArea .swiper {position: relative; overflow: hidden;}
.newItemArea .swiper-wrapper {overflow: }
.newItemArea .swiper-button-prev:after,
.newItemArea .swiper-button-next:after {display: none;}
.newItemArea .swiper-button-prev,
.newItemArea .swiper-button-next {width: 59px; height: 80px; background: url('/design/jojean/phps/main/main_bnt_arrow.png') center center no-repeat; transform: translateY(-150%);}
.newItemArea .swiper-button-prev {left: -60px; background-position: 0px -0;}
.newItemArea .swiper-button-next {right: -60px; background-position: 17px -80px;}
@media screen and (max-width: 1730px){
    .newItemArea .swiper-button-prev,
    .newItemArea .swiper-button-next {display: none;}
}

.be_color{background:rgb(208 200 171 / 24%) !important}

/* 타임세일 */
#timeSale { display:none; margin-top:100px; background:#ebebeb }
#timeSale .listArea { margin:0 auto; padding:40px 0 100px; width:100%; min-width:1366px; max-width:1450px; overflow:hidden }
#timeSale .listArea ul { *zoom:1 }
#timeSale .listArea ul:after { display:block; clear:both; content:'' }
#timeSale .listArea li { float:left; width:25% }
#timeSale .listArea li a { display:block; padding:0 9px }
#timeSale .listArea li img { width:100% }

/* 타이머 */
.clockArea { /*margin-top:16px;*/ display:inline-block;  background:#ad9377; box-shadow: 3.507px 7.19px 10px 0px rgba(0, 0, 0, 0.15); box-sizing:border-box; padding:10px 24px; text-align:center; }
.clockArea > div {display:inline-block; vertical-align:top; font-size:20px; color:#fff; font-weight:700}
.clockArea .tBox .times {display:inline-block; vertical-align:top;}
.clockArea .tBox .smalltext {display:inline-block; vertical-align:top;}
.clockArea .tBoxTime {margin:0 4px;  }
.clockArea .tBoxTime img { width:24px; }

/* 메인 타이틀 */
.columnTitle { /*padding-top:80px;*/ text-align:center }
.columnTitle h3 { font-size:36px; color:#000; font-weight:bold }
.columnTitle p { padding-top:15px; font-size:24px; color:#666 }
.mainTitle { padding:120px 0 75px; text-align:center }
.mainTitle h3 { font-size:43px; color:#000; font-weight:bold }
.mainTitle h3 span { font-weight:normal }


/* 시즌 off 세일 */
#seasonSale { margin-top:100px; background:#f5f5f5; }
#seasonSale .item-wrap { padding-top:40px }
#seasonSale .item-column-more { display:none }
#seasonSale .item-column-more.active { display:block }
#seasonSale .item-more-area { padding-bottom:75px; text-align: center; }
#seasonSale .item-more {display: inline-block; width: 240px; height: 40px; line-height: 40px; font-size: 14px; color: #000; border: 1px solid #e4e4e4; border-radius: 8px; box-sizing: border-box; background-color: rgba(0,0,0,0);}




/* 메이드아이템 */
#just_better .item-wrap {
    width: calc(100% - 0px);
    margin: 0 auto;
    max-width:100%;
    min-width: 1366px;
    overflow: hidden;
    display: inline-flex;
    align-items: flex-start;
}

#just_better .item-wrap .mainTitle {
    width:15%;
    padding:0px;
    margin-left: 20px;
    text-align: left;}

#just_better .item-wrap .mainTitle h3 {
    font-size: 28;
    color: #000;
    font-weight: bold;
    letter-spacing: -0.8px;
    
}

#just_better .item-wrap .mainTitle h4{    
    font-size: 24x;
    color: #000;
    font-weight:400;
    letter-spacing: -0.2px;
    margin-top:30px;
    color: #939393;
}

#just_better .item-wrap .item-cont {width:85%}



/* 포토리뷰 */
#mainReviewArea { margin:0 auto; padding-bottom:30px; max-width:1584px; min-width:1366px; overflow:hidden }
#mainReviewArea .mainTitle { padding-top:30px }

/* 인스타그램 */
#instaArea { margin:0 auto; max-width:1584px; min-width:1366px; overflow:hidden }
#instaArea .mainTitle { padding-bottom:60px }

/* 인스타그램 */
.insta-wrap { width:100%; max-width:1560px;min-width:1200px; padding-top:70px; margin:0 auto; text-align:center}
.insta-wrap h2 { padding-bottom:35px }
#instaPics { margin: 0 10px; overflow: hidden; }  
.insta-box {position: relative;width: 10%;float: left;}  
.image-layer {overflow: hidden;margin: 2px;box-sizing: border-box;position: relative;}  
.image-layer img { max-width: 100%;width: 100%; display:block; -webkit-transition: .5s ease-in-out; transition: .5s ease-in-out;}
.image-layer img:hover {-webkit-transform: scale(1.15); transform: scale(1.15);}



.point_per {color:#bf7175}


/* ====================================================
   슬로우앤드 2톤 교차 배경 (상단 메뉴바 & 햄버거 메뉴 복구)
==================================================== */

/* 1. 전체 기본 바탕 & 상단 헤더 */
html,
body, 
#wrap, 
#contentWrapper,
#header,
#headerWrap,
#topWrap,
.headerWrap,
.header_wrap,
.header-top,
.header_inner,
.navWrap,
.menu_bar,
.navigation,
[class*="header"],
[id*="header"],
[class*="gnb"],
[id*="gnb"] {
    background-color: #f6f4ed !important;
}

/* 헤더 내 일반 li, a 투명화 (햄버거 영역은 제외) */
[class*="header"] ul,
[class*="header"] li:not([class*="menu"]):not([class*="cate"]) {
    background-color: transparent !important;
}

/* ----------------------------------------------------
   [햄버거 아이콘 강제 복구 및 레이어 설정]
---------------------------------------------------- */
/* (1) 햄버거 아이콘 및 햄버거 감싸는 영역 복구 */
.all-menu,
.allMenu,
.btn-all-menu,
.btn-menu,
.category-btn,
.menu-trigger,
.hambuger,
.hamburger,
.btn_side_menu,
#header .all-menu-box,
#navWrap .allMenu,
.nav_btn,
.btn_all_category,
li.all-menu,
li.allMenu {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 99 !important;
}

/* 햄버거 작대기(선) 색상 선명하게 복구 */
.all-menu span,
.allMenu span,
.btn-all-menu span,
.menu-trigger span,
.btn_side_menu span,
.hambuger span,
.hamburger span {
    display: block !important;
    visibility: visible !important;
    background-color: #333 !important;
}

/* 햄버거가 이미지 아이콘일 경우 숨김 방지 */
.all-menu img,
.allMenu img,
.category-btn img,
.btn-menu img,
.hamburger img {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* (2) 햄버거 클릭 시 열리는 카테고리 전체 메뉴 배경 (#f6f4ed 불투명 고정) */
.allCategory,
.allMenuWrap,
.all-menu-wrap,
.all_menu_box,
.all_category_box,
.sideMenuWrap,
.side-navi,
.category-layer,
.all-category-layer,
.category-sub,
#header .all-menu-view,
[class*="all_menu"],
[class*="all-menu"],
[class*="sideMenu"],
[class*="side_menu"] {
    background: #f6f4ed !important;
    background-color: #f6f4ed !important;
    opacity: 1 !important;
    visibility: visible;
}

/* 열린 메뉴 내부 텍스트 및 박스 */
.allCategory ul,
.allMenuWrap ul,
.all-menu-wrap ul {
    background-color: #f6f4ed !important;
}

.allCategory a,
.allMenuWrap a,
.all-menu-wrap a,
.sideMenuWrap a {
    color: #333 !important;
}

/* 2. 섹션 공통 스타일 (풀와이드 & 상하 여백) */
.newItemArea,
#seasonSale,
#main_prd > div,
#mainReviewArea,
#instaArea,
#just_better {
    width: 100% !important;
    padding-top: 100px !important;
    padding-bottom: 120px !important;
    box-sizing: border-box !important;
}

/* 내부 콘텐츠 배경 투명화 */
.item-wrap,
.item-cont,
.item-column,
.swiper,
.swiper-wrapper {
    background-color: transparent !important;
}




/* ====================================================
   2. 섹션 공통 여백 재조정 (적절한 여백감 확보)
==================================================== */
.newItemArea,
#seasonSale,
#main_prd > div,
#mainReviewArea,
#instaArea,
#just_better {
    width: 100% !important;
    padding-top: 75px !important;    /* 50px에서 75px로 적당히 확장 */
    padding-bottom: 75px !important; /* 50px에서 75px로 적당히 확장 */
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    box-sizing: border-box !important;
}

/* 타이틀 기본 여백 */
.titleArea {
    padding: 30px 0 35px !important;
}
.mainTitle {
    padding: 40px 0 35px !important;
}
.columnTitle {
    padding-top: 30px !important;
    padding-bottom: 25px !important;
}

/* 내부 콘텐츠 배경 투명화 */
.item-wrap,
.item-cont,
.item-column,
.swiper,
.swiper-wrapper {
    background-color: transparent !important;
}




/* ====================================================
   슬로우앤드 2톤 교차 배경 (실시간 팬츠 BEST 및 전체 순서 재정렬)
==================================================== */

/* [톤 1: #f6f4ed] TREND Pick */
#trendPick {
    background-color: #f6f4ed !important;
}

/* [톤 2: #eae5dd] 얼리 어텀 제작템 */
#mdpick6 {
    background-color: #eae5dd !important;
}

/* [톤 1: #f6f4ed] TIME DEAL (기존 .be_color 덮어쓰기 무력화) */
#seasonSale,
#seasonSale.be_color {
    background-color: #f6f4ed !important;
}

/* [톤 2: #eae5dd] 지금딱! 맨투맨티셔츠 */
#mdpick7 {
    background-color: #f6f4ed  !important;
}

/* [톤 1: #f6f4ed] 실시간 팬츠 BEST */
#mdpick1 {
    background-color: #eae5dd !important;
}

/* [톤 2: #eae5dd] 선선해지는 가을, 아우터준비 */
#mdpick5 {
    background-color: #f6f4ed !important;
}

/* [톤 1: #f6f4ed] 기본 베이직 티셔츠 */
#mdpick4 {
    background-color: #eae5dd !important;
}

/* [톤 2: #eae5dd] 간절기 셔츠&블라우스 */
#mdpick2 {
    background-color: #f6f4ed !important;
}

/* [톤 1: #f6f4ed] F/W 니트 베스트 */
#mdpick3 {
    background-color: #eae5dd !important;
}

/* [톤 2: #eae5dd] WEEKLY BEST */
#mdpick3 + div {
    background-color: #f6f4ed !important;
}

/* [톤 1: #f6f4ed] NEW 7% */
#mdpick3 + div + div {
    background-color: #eae5dd !important;
}

/* [톤 2: #eae5dd] MADE ITEM (JUST BETTER) */
#just_better {
    background-color: #f6f4ed !important;
}

/* [톤 1: #f6f4ed] BEST ITEM */
#just_better + div {
    background-color: #f6f4ed !important;
}

/* [톤 2: #eae5dd] WITH ITEM */
#just_better + div + div {
    background-color: #eae5dd !important;
}

/* [톤 1: #f6f4ed] PHOTO REVIEW & INSTAGRAM */
#mainReviewArea,
#instaArea {
    background-color: #f6f4ed !important;
}



/* 서브 타이틀: 얇은 Noto Sans KR + 감성 브라운 톤 적용 */
.titleArea .p02,
.columnTitle p,
#just_better .item-wrap .mainTitle h4 {
    font-family: 'Noto Sans KR', 'Apple SD Gothic Neo', sans-serif !important;
    font-weight: 400 !important;
    color: #847361 !important;
    letter-spacing: -0.3px;
}

/* 얼리 어텀 섹션(#mdpick6) 할인율 포인트 컬러 적용 */
#mdpick6 .titleArea .p01 span,
#mdpick6 .mainTitle h3 span,
#mdpick6 .point_per,
#mdpick6 h3 span {
    color: #864647 !important;
    font-weight: 700;
}
/* BASIC css end */