/* BASIC css start */
.menu_on {height:100%; overflow:hidden;}
.menu_off {height:auto; overflow:initial;}
a.font-pink {color:#d76161dd}

.subName {    margin: 5px 0 10px;   line-height: 16px; font-size:11px }

/* 스냅추가 */
.headroom .topBanner {height: 38px; overflow: hidden;}
.headroom .topBanner.swiper{height: 100%;}
.headroom .topBanner .swiper-wrapper,
.headroom .topBanner .swiper-slide { height: 38px;}
.headroom .topBanner a {display: block; background-color: #ad9377; color: #fff; font-weight: 600; text-align: center; line-height: 38px;}

.headroom--not-top{position: fixed; top: 0; left: 0; width: 100%; z-index: 999;}
.headroom--unpinned .headWrap{overflow: hidden; height: 0 ! important;}

.headroom--not-top .rollingWrap {opacity: 1; transition: 0.2s; height: 100%;}
.rollingWrap { position: Relative; height: 0; z-index: 999; border-top: 1px solid #0000001a; padding-right: 38px; background: rgba(255, 255, 255, 0.95); box-shadow: 0px 0px 6px 0 #0000001c; opacity: 0; transition: 0.1s;}
.rollingMenu {margin: 0;}
.rollingWrap .rollingBtn { width: 37px; height: 40px; box-shadow: -1px 0px 9px 0 #0000001c; position: absolute; top: 0; right: 0; z-index: 1000;}
.rollingWrap .rollingBtn:after { content: '\e943'; font-family: xeicon; color: #000; font-size: 16px; line-height: 40px; position: absolute; top: 0; left: 50%; margin-left: -8px;}
.rollingWrap .rollingBtn.on:after { content: '\e946'; font-family: xeicon; color: #000; font-size: 16px; line-height: 40px; position: absolute; top: 0; left: 50%; margin-left: -8px;}
.rollingMenu .swiper-slide { width: auto; height: 40px; line-height: 40px; font-size: 14px; margin: 0 13px;}
.point01{font-weight: 600; color: #eeb1b1;}
.point02{font-weight: 600; color: #ad9377;}
.point03{font-weight: 600; color: #ff6b13;}
.rollingMenu .swiper-slide.on:after { content: ''; position: absolute; width: 100%; height: 2px; background: #000; bottom: 0; left: 0;}
.rollingMenu .swiper-slide.active a {color: #990000;}
.rollingMenu .swiper-slide a {font-weight: 500;}
.rollingAllmenu { display: none; position: absolute; width: calc(100% - 20px); top: 39px; left: 0; padding: 10px; background: rgba(255,255,255,0.85);}
.rollingAllmenu ul {font-size: 0;text-align: left;}
.rollingAllmenu ul.last {margin-top: 20px;}
.rollingAllmenu ul li {display: inline-block;width: 33.333%;text-align: center;height: 25px;line-height: 25px;font-size: 11px;margin-bottom: 4px;}
.rollingAllmenu ul li a {font-size: 13px;margin: 0 2px;margin-bottom: 4px;display: block;border: 1px solid #ddd;box-sizing: border-box;}

/* 스냅추가 */

/* 헤더랩*/
.header{position: fixed; top: 0; left: 0; width: 100%; z-index: 999;}
#header{position: relative; height: 60px; line-height: 60px; display: flex; align-items: center; justify-content: space-between; padding: 0 16px;}
#header .logo{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); height: 40px; width: 110px;}
#header .logo img{max-width: 110px;}
#header .searchToggle{background-position: -46px 0;}
#header .ham{background-position: -90px 0;}
#header .cart{background-position: -178px 0; position: relative;}
#header .cart .count{position: absolute; background: #f80406; color: #fff; font-size: 10px; width: 16px; height: 16px; border-radius: 10px; text-align: center; left: 50%; line-height: 16px; margin-left: 2px; top: 0;}


/* 아이콘 화이트 */
.headroom--top #header .logo{background-image: url('/design/jojean/snap/mo/logo_white.png'); background-repeat: no-repeat; background-size: contain;}
.headroom--top #header a:not(.logo){width: 24px; height: 25px; background-image: url(/design/jojean/snap/mo/mo_menu_white.svg);}

/* 아이콘 블랙 */
.headroom--not-top #header .logo{background-image: url('https://img.just-one.co.kr/shopping_mall/justone_logo.png'); background-repeat: no-repeat; background-size: contain;}
.headroom--not-top #header{background-color: rgba(255,255,255,0.95);}
.headroom--not-top #header a:not(.logo){width: 24px; height: 25px; background-image: url(/design/jojean/phps/img/mo_menu.svg);}


/* 검색창 */
#searchWrap {display: none; position: fixed; bottom:63px; width: 100%; padding: 15px 10px 10px; background-color: #fff; box-sizing: border-box; z-index: 999;}
#searchWrap .search {position: relative; width: 100%;}
#searchWrap .search input {width: 100%; height: 45px; padding: 0 40px 0 5px; border: 1px solid #ddd; color: #707070; box-sizing: border-box; box-shadow: none;}
#searchWrap .search .searchBtn {position: absolute; top: 0; right: 0; width: 45px; height: 45px; padding-top:10px; text-align: center; box-sizing: border-box; display: block;}
.keywordWrap {}
.keywordWrap .title {font-size: 17px; color: #333; text-align: center; line-height: 40px; width: 100%; float: left; font-weight: 700; margin: 10px 0; border-bottom: 2px solid #f07777;}
.keywordWrap .keywords {display: flex; justify-content: space-between; padding: 10px 30px; text-align: center;}
.keywordWrap .keywords ul {width: 33%; max-width: 33%; text-align: left; margin-bottom: 5px; display: inline-grid;}
.keywordWrap .keywords ul:nth-child(3) {width: auto!important;}
.keywordWrap .keywords ul li {}
.keywordWrap .keywords ul li a {padding-right: 8px; color: #000; line-height: 31px;}
.keywordWrap .keywords ul li .num{display: inline-block; margin-right: 8px; font-size: 12px; text-align: right; letter-spacing: -1px; color: #f07777;}
#searchWrap .schPopImg {padding: 0 21px;}
#searchWrap .schPopImg a {display: table; margin: 0 auto; width: 100%; max-width: 442px;}
#searchWrap .schPopImg img {width: 100%}


/* 하단 메뉴 */
.nav_box {position:fixed; left:0; bottom:0; width: 100%; background:#fff; z-index: 999; border-top:1px solid #e6e6e6}
.nav_box .nav_item {display:inline-block; width:16.666%; float:left; height:100%; text-align: center; box-sizing:border-box; padding:7px 0 6px; position:relative; }
.nav_box .nav_item span { display:block;  }
.nav_box .nav_item:not(.wish,.backBtn) .icon {margin:0 auto; width: 24px; height: 25px; background: url(/design/jojean/phps/img/mo_menu.svg) no-repeat;}
.nav_box .nav_item.home .icon {background-position: -2px 0;}
.nav_box .nav_item.wish .icon {margin: 4px auto; width: 24px;}
.nav_box .nav_item.basket2 .icon {background-position: -179px 0;}
.nav_box .nav_item.my .icon {background-position: -135px 0;}
.nav_box .nav_item.searchToggle .icon {background-position: -47px 0;}
.nav_box .nav_item .txt {font-size:11px; margin-top:4px; }
.nav_box .nav_item .menu {width:55px; height:55px; display:block; position:absolute; bottom:10px; left:50%; margin-left:-27.5px; background:url('/design/jojean/phps/m/menu.gif') no-repeat; background-size: 100%; line-height:55px; color:#fff;}
.nav_box .nav_item .menu em {line-height: 15px; margin-top: 12.5px; display: block;}
.nav_box .nav_item.basket2 .count {position: absolute; background: #f80406; color: #fff; font-size: 10px; width: 16px; height: 16px; border-radius: 10px; text-align: center; left: 50%; line-height: 16px; margin-left: 2px; top: 5px;}
.nav_box .backBtn span{margin: 2px auto;}
.nav_box .backBtn span img{width: 24px;}

/* 우측 고정 메뉴 */
.rightFixMenu{position:fixed;bottom:135px;right:15px;z-index:100;}
.rightFixMenu .link{width:38px;height:38px;margin-top:3px;border:1px solid #ddd;line-height:1;background-color:rgba(255,255,255,0.9);opacity:0.7;border-radius:50%;text-align:center;display:block;}
.rightFixMenu .link .txt{font-size:10px;color:#000;line-height:1;padding:2px 0;white-space:nowrap;display:block;}
.rightFixMenu .link .topIcon{margin:7px 3px 0 0;}
.rightFixMenu .link .btmIcon{margin:7px 4px 0 0;}
.rightFixMenu .link.btmBtn .txt{padding-top:6px;}
.rightFixMenu .kakaoPlusLink{width:40px;height:40px;margin-top:3px;border:0;opacity:0.63;display:block;}
.rightFixMenu .naverTalkLink{width:40px;height:40px;margin-top:3px;border:0;opacity:0.63;display:block;}
.rightFixMenu.on{visibility:visible;opacity:1;}
.rightFixMenu .youtubekLink {width:40px;height:40px;margin-top:3px;border:0;opacity:0.63;display:block;}
.rightFixMenu .youtubeTalkIcon { width: 40px;  height: 40px;  background-position: -83px 0;}

/* 사이드메뉴 */
#langLink {position: absolute; top: 24px; right: 65px; font-size: 12px;}
.side_menu_box {position:fixed; top:0; left:-100%;  width:100%; height:100vh; z-index:9999; background:#fff; box-sizing:border-box; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; bottom:0; overflow-y:auto;}
.side_menu_box.open {left:0}
.side_head {position:relative; padding:20px 16px 24px; box-sizing:border-box;  }
.side_logo img {width:150px; }
.side_closed {position:absolute; top:22px; right:16px; width:20px; }
.side_head .icon_btn {position:absolute; top:19px; right:52px; width:24px; }
.side_login {padding:0 16px; }
.side_txt {font-size:14px; margin-bottom:16px; }
.side_btn {display:block; }
.side_btn .btn {display:inline-block; width:auto;  border:1px solid #ad9377; font-size:14px; font-weight:600; background:#ad9377; color:#fff;  border-radius:30px; height:34px; line-height:34px; padding:0 30px }
.side_btn .btn:last-child {color:#ad9377; background:#fff; margin-left:4px; }
.side_my {margin-top:20px; background:#f6f6f6; text-align:center; padding:16px}
.side_my li {display:inline-block; position: relative; vertical-align:top; margin-right:28px; }
.side_my li:last-child {margin-right:0}
.side_my li span {display:block; text-align:center;}
.side_my li span.count {position: absolute; top: 0; background: #f80406; color: #fff; font-size: 10px; width: 16px; height: 16px; border-radius: 10px; text-align: center; right: 0; line-height: 16px;}
.side_my li .icon img {width:26px; }
.side_my li .txt {margin-top:4px; font-size:12px; }
.side_mid_box { padding:24px 16px;}
.side_tab {font-size:18px; color:#bbbbbb; font-weight:600; margin-right:24px; padding-right:24px; background:url('/design/jojean/phps/m/icn_arrow_down_gy.png')no-repeat center right/18px auto;  }
.side_tab:last-child {margin-right:0}
.side_tab.active {color:#000; background-image:url('/design/jojean/phps/m/icn_arrow_down_bk.png')}
.side_tab_con_box { margin-top:24px; }
.side_tab_con {display:none; }
.side_tab_con.active {display:block; }
.side_menu_list {border-top: 1px solid #ddd;}
.side_menu_list li {line-height:46px; border-bottom: 1px solid #ddd; padding-left: 14px; border-left: 1px solid #ddd; border-right: 1px solid #ddd;}
.side_menu_list li:last-child {margin-bottom:0; }
.side_menu_list li a {display:block; font-size:14px; }
.side_btm_box {padding:24px 16px; }
.side_tt {font-size:18px;font-weight: 600; color:#000; margin-bottom:24px;  }
.side_sns {display:block; }
.side_sns_item {display:inline-block; width:45px; vertical-align: top; margin-right:8px; }
.side_sns_item:last-child {margin-right:0; }

.subMenuPlanList{padding:0 16px;margin:0 0 26px}
.subMenuPlanList li{border:1px solid #ddd;margin:-1px;height:45px;line-height:45px;padding:0 14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:-.1em}
.subMenuPlanList li em{font-weight:700}
.subMenuEventList{padding:15px 16px 0;margin-bottom:50px}
.subMenuEventList li{display:table;padding-left:80px;border-bottom:1px solid #ddd;width:100%;height:70px;box-sizing:border-box;background-position:left 15px center!important;letter-spacing:-.1em}
.subMenuEventList li a{display:table-cell;vertical-align:middle}
.subMenuEventList li:nth-child(1){background:url(/design/jojean/phps/m/m_menu_event_icon01.png) no-repeat;border-top:1px solid #ddd}
.subMenuEventList li:nth-child(2){background:url(/design/jojean/phps/m/m_menu_event_icon02.png) no-repeat}
.subMenuEventList li:nth-child(3){background:url(/design/jojean/phps/m/m_menu_event_icon03.png) no-repeat}
.subMenuEventList li:nth-child(4){background:url(/design/jojean/phps/m/m_menu_event_icon04.png) no-repeat}
.subMenuEventList em{display:block;margin-bottom:3px;font-size:13px;font-weight:700}

.columnHide {display:none; }



/* 최근 본 상품 */
#ly_lastView {width:100%; position:absolute; top:36px; left:0; background-color:#fff; z-index:101; padding-bottom:20px; box-shadow: 0 1px 10px #717171; display:none;}
/* //최근 본 상품 */

@media screen and (min-width:768px) {
    #header #menu {width:85px;}
    #header .headerTop {padding-right:85px;}
    #header .search {padding-right:85px;}
    #header .search .searchBox input {width:95%;}
    #header .search .btn_search {width:85px;}
}

/* 다찾다 자동완성*/
.search-auto-complete-list { display:none; z-index:1; position:absolute; top:43px; left:0; width:100%; line-height:14px; background:#fff; box-shadow:0px 0px 5px 0px rgb(0 0 0 / 20%); }
.search-auto-complete-list ul { width:100%; padding:8px 5px 10px 5px; border-bottom:1px solid #ddd; display: flex; flex-wrap: wrap;}
.search-auto-complete-list ul li { text-align:center; margin: 3px; }
.search-auto-complete-list ul li a { display:block; padding:8px 14px; color:#000; border: 1px solid #eee; border-radius: 10px; background:none; font-family:'malgun gothic'; font-size:11px; letter-spacing:-1px; } 
.search-auto-complete-list ul li a strong { color:#ab3e41; }
.search-auto-complete-list ul li a:hover { background:#f2f2f2; }
.search-auto-complete-list ul li a:hover span {}
.search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#666; font-size:11px; }


/* 다찾다 검색 파인더 - 레이어 */
#allfinder-ctr { z-index: 100; position: fixed; right:0; bottom:50%; }
#allfinder-ctr a { display:block; width:77px; height:64px; background:url('/images/common/allfinder_ctrl_mo.png') no-repeat 0 0; background-size:100% 100%; border:none; outline:none; font-size:0; }

.all-finder-layer { z-index:200; position:fixed; top:0; left:0; width:100%; height:100%; background:#fff; overflow-y:auto; }
.all-finder-layer .finder-hd { z-index:1; position:fixed; top:0; left:0; width:100%; height:60px; border-bottom:1px solid #e7e7e7; background:#fff; }
.all-finder-layer .finder-hd .fa-close { position:absolute; top:17px; right:10px; font-size:26px; color:#000; }
.all-finder-layer .finder-hd .finder-tit { height:60px; line-height:60px; padding:0 10px; font-size:16px; font-weight:bold; color:#000; letter-spacing:-2px; }
.all-finder-layer .finder-search { position:relative; margin:0 10px 20px; border:2px solid #000; border-radius:3px; }
.all-finder-layer .finder-search .fa-search { display: inline-block; width: 40px; height: 42px; line-height: 42px; text-align: center; font-size: 18px; }
.all-finder-layer .finder-search .txt-input { width:85%; height:42px; line-height:42px; margin:0; padding:0; font-size:14px; outline:none; border:none; color: #000; vertical-align:top; letter-spacing:-1px; }
.all-finder-layer .finder-search .txt-input::-webkit-input-placeholder { color:#b1b1b1; }
.all-finder-layer .finder-search dd { background:#FFF; }
.all-finder-layer .finder-opt { padding:60px 0 55px; color:#000; }
.all-finder-layer .finder-opt dl dt { position:relative; height:53px; line-height:53px; padding:0 10px; border-top:1px solid #e7e7e7; font-size:14px; font-weight:bold; color:#000; letter-spacing:-1px; }
.all-finder-layer .finder-opt dl dt .fa { position:absolute; top:50%; right:10px; margin-top:-13px; font-size:25px; color:#b2b2b2; }
.all-finder-layer .finder-opt dl dt > .finder-tooltip-btn { display:inline-block; width:20px; height:20px; line-height:20px; margin-top:0; border:1px solid #cecece; border-radius:20px; color:#666; font-size:11px; background:#fff; text-align:center; outline:none; }
.all-finder-layer .finder-opt dl dt .finder-comm-layer { display:none; position:absolute; top:43px; left:10px; width:70%; padding:0 15px 11px; border:1px solid #000; background:#fff; text-align:left; font-weight:normal; color:#000; z-index:1 }
.all-finder-layer .finder-opt dl dt .finder-comm-layer .finder-btn-close { display:inline-block; position:absolute; top:10px; right:14px; margin:0; font-size:19px; color:#000; outline:none; }
.all-finder-layer .finder-opt dl dt .finder-comm-layer .finder-layer-tit { padding:13px 0; border-bottom:1px solid #e5e5e5; font-size:14px; font-weight:bold; line-height:14px; }
.all-finder-layer .finder-opt dl dt .finder-comm-layer .finder-layer-cnt { padding-top:13px; line-height:1.5; font-size:13px; }
.all-finder-layer .finder-opt dl dd { display:none; padding:10px 5px 0; border-top:1px solid #e7e7e7; background:#f4f4f4; font-size:0; }
.all-finder-layer .finder-opt dl dd label { display:inline-block; width:33.3333%; text-align:center; line-height:18px;}
.all-finder-layer .finder-opt .finder-color label { width:12.5%; }
.all-finder-layer .finder-opt .finder-price .finder-price-input { padding:0 5px 10px; text-align:right; font-size:12px; }
.all-finder-layer .finder-opt .finder-price .finder-price-input:after { clear: both; content: ""; display: block; }
.all-finder-layer .finder-opt .finder-price .finder-price-input span { float:left; display:inline-block; height:34px; line-height:34px; }
.all-finder-layer .finder-opt .finder-price .finder-price-input label { display: inline-block; width: 33%; padding: 0 8px; border: 1px solid #ccc; border-radius:3px; color: #666; background:#fff; }
.all-finder-layer .finder-opt .finder-price .finder-price-input label .txt-input { display: inline-block; width: 84%; height: 32px; line-height: 32px; padding: 0; border: none; background: none; color: #000; outline:none; text-align:right; }
.all-finder-layer .finder-opt .finder-child-category { padding:0; }
.all-finder-layer .finder-opt .finder-child-category .mobile-select-category { padding:15px; margin-bottom:9px; border-bottom:1px solid #e7e7e7; font-size:14px; font-weight:bold; color:#9a9a9a; background:#fff; word-break:break-all; letter-spacing:-1px; }
.all-finder-layer .finder-opt .finder-child-category .mobile-select-category .pd-2px { padding:0 2px; }
.all-finder-layer .finder-opt .finder-child-category .mobile-select-category .fc-black { color:#000; }
.all-finder-layer .finder-opt .finder-child-category .mobile-select-category .fa { margin-left:2px; color:#000; }
.all-finder-layer .finder-btn-c { z-index:1; position:fixed; bottom:0; left:0; width:100%; height:55px; text-align: center; font-size:0; }
.all-finder-layer .finder-btn-c a.reset { display: inline-block; width: 30%; height: 55px; line-height: 55px; background: #999; color: #fff; font-size: 16px; font-weight: bold; letter-spacing: 1px; border:none; }
.all-finder-layer .finder-btn-c button { display: inline-block; width: 70%; height: 55px; line-height: 55px; background: #000; color: #fff; font-size: 16px; font-weight: bold; letter-spacing: -0.5px; border:none; }
.all-finder-layer .finder-btn-c button span.fa-search { margin-right:5px; margin-top:-2px; vertical-align:middle; font-size:0.750em; }
.all-finder-layer .finder-btn-c button span.finder-count { display:inline-block; color:#ffd800; font-size:18px; vertical-align:middle; }

.all-finder-layer .finder-opt .finder-options { display:inline-block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; width:80%; height:22px; padding: 5px 5%; line-height:22px; border: 1px solid #ccc; word-break:break-all; border-radius: 20px; background:#fff; color:#000; text-align:center; font-size:12px; }
.all-finder-layer .finder-opt .finder-options.on { font-weight: bold; border: 1px solid #000; box-shadow:2px 2px 3px #d2d2d2; }
.all-finder-layer .finder-opt .finder-option-color em { display: inline-block; width: 33px; height: 33px; border-radius:20px; font-size:0; vertical-align:middle; }
.all-finder-layer .finder-opt .finder-option-color.color-picker { width:33px; height:33px; padding: 0; border: none; } 
.all-finder-layer .finder-opt .finder-option-color.color-picker .fa-check { display:none; width:33px; height:33px; margin-top:-25px; color:#fff; text-align:center; font-size:16px; }
.all-finder-layer .finder-opt .finder-option-color.color-picker.on .fa-check { display:block; }
.all-finder-layer .finder-opt .finder-option-color.color-picker.on.finder-option-color-white .fa-check { color:#000; }

.finder-option-color.finder-option-color-black em { background-color: #000; }
.finder-option-color.finder-option-color-white em { background-color: #FFF; width: 20px; height: 20px; border: 1px solid #e5e5e5; }
.finder-option-color.finder-option-color-gray em { background-color: #808080; }
.finder-option-color.finder-option-color-beige em { background-color: #e5d0b2; }
.finder-option-color.finder-option-color-brown em { background-color: #aa6810; }
.finder-option-color.finder-option-color-navy em { background-color: #425583; }
.finder-option-color.finder-option-color-blue em { background-color: #0000ff; }
.finder-option-color.finder-option-color-light-blue em { background-color: #62acff; }
.finder-option-color.finder-option-color-red em { background-color: #ff0000; }
.finder-option-color.finder-option-color-orange em { background-color: #ffa500; }
.finder-option-color.finder-option-color-yellow em { background-color: #ffff00; }   
.finder-option-color.finder-option-color-pink em { background-color: #ffc0cb; }
.finder-option-color.finder-option-color-purple em { background-color: #800080; }
.finder-option-color.finder-option-color-jaju em { background-color: #a63f7f; }
.finder-option-color.finder-option-color-khaki em { background-color: #2f5e2f; }
.finder-option-color.finder-option-color-green em { background-color: #008000; }
.finder-option-color.finder-option-color-light-green em { background-color: #72dd95; }
.finder-option-color.finder-option-color-silver em { background-color: #dfdfdf; }
.finder-option-color.finder-option-color-gold em { background-color: #cfbc4e; }
.finder-option-color.finder-option-color-apricot em { background-color: #fbceb1;  }

.all-finder-layer .search-auto-complete-list { display:none; z-index:1; position:absolute; top:43px; left:0; width:100%; line-height:14px; background:#fff; box-shadow:0px 0px 5px 0px rgb(0 0 0 / 20%); }
.all-finder-layer .search-auto-complete-list ul { width:100%; padding:8px 5px 10px 5px; border-bottom:1px solid #ddd; display: flex; flex-wrap: wrap;}
.all-finder-layer .search-auto-complete-list ul li { text-align:center; margin: 3px; }
.all-finder-layer .search-auto-complete-list ul li a { display:block; padding:8px 14px; color:#000; border: 1px solid #eee; border-radius: 10px; background:none; font-family:'malgun gothic'; font-size:11px; letter-spacing:-1px; } 
.all-finder-layer .search-auto-complete-list ul li a strong { color:#ab3e41; }
.all-finder-layer .search-auto-complete-list ul li a:hover { background:#f2f2f2; }
.all-finder-layer .search-auto-complete-list ul li a:hover span {}
.all-finder-layer .search-auto-complete-list .search-list-close { display:block; padding:10px 11px; text-align:right; color:#666; font-size:11px; }


/* BASIC css end */