/* 사용자 공통 스타일 파일입니다. 공통으로 적용할 스타일 코드를 작성해주세요. */

@import url(https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css);

a, a:hover { text-decoration:none; }
a { color:inherit; }
em { font-style:normal; }
input:focus, button:focus, select:focus { outline:none; }

/* font */
body, th, td, input, select, textarea, button { font-family:"Montserrat", "pretendard", "Malgun Gothic", Verdana, Dotum, AppleGothic, sans-serif; }

/* 포인트 컬러 */
:root { --point-color:#ED6D00; --basic-color:#121212; --color-point:#ED6D00 !important; }


/*========================================================================
상단 영역
========================================================================*/
.header { min-height:49px; height:auto; }
.header .header-top { display:flex; justify-content:space-between; padding:14px 15px; text-align:left; box-sizing:border-box; }

/* 로고 */
.header h1.header__logo { display:inline-block; vertical-align:top; width:110px; height:auto; margin:0; padding:0; }
.header h1.header__logo a { display:block; height:auto; font-size:0; line-height:1; }
.header h1.header__logo img { width:100%; height:auto; vertical-align:top; }

/* 햄버거 버튼 */
.header__hamburger { position:static; transform:none; width: 20px; height: 18px; font-size:0; background:none; }
.header__hamburger span { position: relative; width:100%; height:100%; background:none; }
.header__hamburger span::before { content:""; position:absolute; top:0; left:0; width:100%; height:10px; border-top:2px solid var(--basic-color); border-bottom:2px solid var(--basic-color); box-sizing:border-box; }
.header__hamburger span::after { content:""; position:absolute; bottom:0; left:0; width:100%; height:1px; border-bottom:2px solid var(--basic-color); box-sizing:border-box; }

/* 장바구니 */
.header__link-basket { position:relative; top:auto; right:auto; transform:none; }

/* 회원메뉴 */
.header .header-right { display:flex; align-items: center; }
.header .top-account { display:flex; align-items:center; justify-content:center; gap:13px; height:100%; margin-right:12px; }
.header .top-account > li { display:inline-block; position:static; width:18px; height:21px; font-size:0; }
.header .top-account > li > a { position:relative; display:block; width:100%; height:100%; }
.header .top-account .basket a .ico { display:inline-block; vertical-align:top; width:100%; height:100%; font-size:0; background:url("/assets/images/top_cart_btn.png") no-repeat 50%; background-size:auto 100%; }
.header .top-account .basket a .header__link-basket-badge { position:absolute; top:-3px; right:-5px; display:block; width:13px; height:13px; line-height:13px; padding:0; color:#fff; font-size:10px; font-weight:500; background:var(--point-color); border-radius:50%; text-align:center; text-indent:0; }
.header .top-account .search { width:24px; height:25px; }
.header .top-account .search a { width:100%; height:100%; background:url("/assets/images/bottom_search_icon.png") no-repeat 50%; background-size:100% auto; text-indent:-9999px; }


/* 서브 타이틀 영역 */
.header .header-top .header-left { width:calc(100% - 110px); }
.header__back { left:20px; }
.header__title { height:auto; margin:0 0 0 60px; line-height:revert; text-overflow:ellipsis; white-space:nowrap; overflow:hidden; text-align:left; }
.header__title[data-title="기획전"] { font-size:0; }
.header__title[data-title="기획전"]::before {  content:"이벤트"; display:inline-block; font-size: 16px; }
.header.header--sub { height:52px; }


/*========================================================================
하단 영역
========================================================================*/
.footer { position:relative; padding:0; background:#424242; }
.footer .footer-wrap { background:#f8f8f8; }

/* 고객센터 */
.footer .footer-content { padding:26px 0; margin:0 13px; }
.footer .cont-box { padding:0; color:var(--basic-color); line-height:1; }
.footer .cont-box dt { height:30px; line-height:30px; margin:0; color:#121212; font-size:14px; font-weight:500; background:url("/assets/images/footer_arr_off.png") 100% 50% no-repeat; background-size:14px auto; cursor:pointer; }
.footer .cont-box dt.on { background-image:url("/assets/images/footer_arr_on.png"); }
.footer .cont-box dd { max-height:0; overflow:hidden; transition:max-height 0.3s ease; }
.footer .cont-box strong { display:block; margin:7px 0 0; color:#121212; font-size:17px; font-weight:500; }
.footer .cont-box p { margin:14px 0 0; color:#757575; font-size:11px; line-height:1.78; }
.footer .cont-box.column1 > div { padding-bottom:17px; }
.footer .cont-box strong { display:flex; align-items:center; gap:10px; }
.footer .cont-box strong > span:first-child { font-size:15px; }
.footer .cont-box strong > span:nth-child(2) { font-size:16px; }
.footer .cont-box.column2 { margin-top:5px; }
.footer .cont-box .bank-info { display:inline-flex; flex-direction:column; justify-content:center; }
.footer .cont-box .bank-info strong > span:first-child { flex:1; }

/* 하단 메뉴 */
.footer .footer-menu { padding:23px 0; margin:0 13px; line-height:1.4; border-top:1px solid #BDBDBD; }
.footer .footer-menu ul { width:100%; padding:0; box-sizing:border-box; }
.footer .footer-menu li { position:relative; padding:8px 0; font-size:14px; font-weight:400; line-height:1; }
.footer .footer-menu li a { color:#424242; font-weight:400; }
.footer .footer-menu li.insta a::after { content:""; display:inline-block; width:8px; height:8px; margin-left:8px; background:url("/assets/images/footer_more_icon.png") no-repeat; background-size:100% auto; }

/* 회사 정보 */
.footer-info { position:relative; padding:33px 15px 53px; text-align:left; }
.footer .footer-info address { color:#E0E0E0; font-size:11px; font-weight:400; line-height:1.78; }
.footer .footer-info address a { color:#E0E0E0; }
.footer .footer-info address .font-montserrat { font-weight:400; }
.footer .footer-info .copyright { margin:7px 0 0; color:#E0E0E0; font-size:11px; font-weight:400; }

.footer__mark { margin:0; }
.footer__mark:has(*) { margin-block-end: 12px; }


/*========================================================================
하단 메뉴 네비게이션
========================================================================*/
.nav-bottom { position:fixed; bottom:0; width:100%; height:auto; padding:0; border:0; background:#fff; transition:all .5s ease-out; }
.nav-bottom.active { bottom:-50px; transition:all .3s ease-out; }
.nav-bottom ul { display:flex; justify-content:space-around; }
.nav-bottom ul li { flex:1; display:flex; justify-content:center; text-align:center; }
.nav-bottom ul li div,
.nav-bottom ul li a { min-width:24px; }
.nav-bottom ul li span img { width:24px; padding:12px 0; }
.nav-bottom ul li .all-btn-open { display:flex; align-items:center; justify-content:center; }
.nav-bottom ul li .all-btn-open span { display:block; position:relative; width:20px; height:15px; font-size:0; cursor:pointer; }
.nav-bottom ul li .all-btn-open span::before { content:""; position:absolute; top:0; left:0; width:100%; height:50%; border-top:1px solid var(--basic-color); border-bottom:1px solid var(--basic-color); box-sizing:border-box; }
.nav-bottom ul li .all-btn-open span::after { content:""; position:absolute; bottom:0; left:0; width:100%; height:1px; border-bottom:1px solid var(--basic-color); box-sizing:border-box; }


/*========================================================================
사이드 플로팅
========================================================================*/
.side-floating { opacity:0; visibility:hidden; position:fixed; right:11px; bottom:55px; transition:opacity 0.3s ease, visibility 0.3s ease, bottom 0.3s; z-index:10; }
.side-floating.show { opacity:1; visibility:visible; }
.side-floating ul li { margin:5px 0 0; }
.side-floating ul li button,
.side-floating ul li a { display:flex; align-items:center; justify-content:center; width:38px; height:38px; border:0; border-radius:50%; overflow:hidden; box-sizing:border-box; }
.side-floating ul li img { width:100%; }
.side-floating .top-btn { position:static; padding:0; }
.side-floating.on { bottom:10px; }
.side-floating.end-stop { position:absolute; bottom:auto; top: -180px; }
.side-floating.end-stop.on { top: -180px; }


/*========================================================================
상품 목록
========================================================================*/
/* 상품 정보 표시 공통 */
.thumb-item__img { border:0; }
.thumb-item__info { position:relative; }
.product-thumb-title { width:86%; margin:4px 0 10px; padding:0; color:#424242; font-size:12px; line-height:1.2; }
.thumb-item em { color: var(--basic-color); font-size: 14px; font-weight: 600;}
.product-thumb-price--origin { order:2; width:100%; margin:5px 0 0; color:#BDBDBD; font-size:10px; }
/* 할인율 */
.product-thumb__immediately-percent { order:1; margin:0 0 0 3px; color: var(--point-color); font-size: 14px; font-weight: 600; }
/* 좋아요버튼 */
.thumb-fab { position:absolute; bottom:auto; top:13px; right:0; width:28px; height:28px; /*width:14px; height:13px; background: url("/assets/images/wish_icon_m.png") no-repeat 50%; background-size:100% auto;*/ border-radius:0; }
.thumb-fab svg { width:100%; /*display:none;*/ }


/*========================================================================
게시판
========================================================================*/
.body-board-list .l-content { padding:20px 0; }
.body-board-list .l-content > search-field > div,
.body-board-list .l-content .board,
.body-board-list .l-content .l-title { margin:0 20px; }

.board-tab.swiper { margin:10px 0; padding:0 20px; }
.board-tab ul { display:flex; margin:0; padding:0; border:0; text-wrap:nowrap; } 
.board-tab ul li { display:inline-block; width:auto; padding:0; margin:0 10px 0 0; border:0; }
.board-tab ul li a { display:block; padding:12px 18px; margin:0; color:#757575; font-size:14px; font-weight:300; line-height:1; border:1px solid #BDBDBD; border-radius:5px; box-sizing:border-box; }
.board-tab ul li a.active { color:#000; font-weight:300; border:1px solid var(--basic-color); }