@charset "utf-8";
/*
 * layout.css — 모바일 골격 (clean-room rewrite)
 * 헤더 / 사이드바 네비게이션 / 푸터 / 고정 탑버튼.
 * 아이콘은 /assets/img/icon, /assets/img/btn 의 자산 사용.
 */

#wrap { min-width: 320px; width: 100%; }
.ly_wrap { -webkit-overflow-scrolling: touch; }

/* ===================== HEADER ===================== */
#header_wrap header {
  position: relative;
  width: 100%;
  min-width: 320px;
  background: #fff;
  z-index: 300;
}
#header_wrap header.h_on { position: fixed; top: 0; left: 0; }

.header_box {
  position: relative;
  border-bottom: 1px solid #cbcbcb;
}
.header_box .h_logo {
  width: 110px;
  margin: 0 auto;
  padding: 15px 0;
  text-align: center;
  line-height: 0;
}
.header_box .h_logo a { display: block; font-size: 0; }
.header_box .h_logo img { width: 100%; }

/* 좌/우 아이콘 묶음 */
.header_box .left_menu { position: absolute; top: 0; left: 5px; display: flex; }
.header_box .right_menu { position: absolute; top: 0; right: 5px; display: flex; }
.header_box .left_menu li,
.header_box .right_menu li { position: relative; }

/* 아이콘 버튼 공통: 텍스트 숨기고 배경 아이콘 */
.header_box .side_menu,
.header_box .top_search,
.header_box .mypage,
.header_box .cart {
  display: inline-block;
  vertical-align: top;
}
.header_box .side_menu { padding: 18px 7px; }
.header_box .side_menu span {
  display: block; width: 20px; height: 15px; font-size: 0;
  background: url('/assets/img/icon/icon_menu.png') no-repeat center / contain;
}
.header_box .top_search { padding: 17px 7px; background: none; border: 0; }
.header_box .top_search span {
  display: block; width: 18px; height: 17px; font-size: 0;
  background: url('/assets/img/icon/icon_search.png') no-repeat center / contain;
}
.header_box .mypage { padding: 16px 7px; }
.header_box .mypage span {
  display: block; width: 21px; height: 21px; font-size: 0;
  background: url('/assets/img/icon/icon_mypage.png') no-repeat center / contain;
}
.header_box .cart { padding: 16px 7px; }
.header_box .cart span {
  display: block; width: 20px; height: 21px; font-size: 0;
  background: url('/assets/img/icon/icon_cart.png') no-repeat center / contain;
}
.header_box .cart_count {
  position: absolute; top: 8px; right: 0;
  min-width: 16px; padding: 2px 5px; border-radius: 999px;
  background: #ab3e55; color: #fff; font-size: 11px; line-height: 1.2; text-align: center;
}

/* 서브 상단 (서브페이지 제목바) */
.sub_top {
  position: relative; padding: 0 45px; border-top: 1px solid #dbdcde; background: #fff;
}
.sub_top .sub_top_left { position: absolute; top: 0; left: 0; }
.sub_top h2 {
  display: block; padding: 12px 0; font-size: 15px; line-height: 15px; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sub_top .sub_top_right2 { position: absolute; top: 5px; right: 5px; }

/* 위치 내비 */
.navi_g { background: #f9f9f9; border-top: 1px solid #dbdcde; }
.navi_g ul { padding: 6px 10px; font-size: 0; }
.navi_g ul li {
  display: inline-block; font-size: 12px; padding-left: 17px;
  background: url('/assets/img/icon/icon_arrow_next.png') no-repeat 5px center / 7px 11px;
}
.navi_g ul li:first-child { padding-left: 0; background: none; }

/* ===================== 사이드바 네비 ===================== */
#wrap nav { display: none; position: fixed; inset: 0; z-index: 1001; }
#wrap nav.on { display: block; }
#wrap nav .bg { position: fixed; inset: 0; background: rgba(0,0,0,0.8); z-index: 1001; }
#wrap nav .left_close {
  position: fixed; top: 20px; left: 300px; width: 29px; height: 29px; z-index: 1002; font-size: 0;
  background: url('/assets/img/icon/icon_left_x.png') no-repeat center / contain;
}
#wrap nav .nav_box {
  position: fixed; top: 0; left: 0; width: 290px; height: 100%;
  background: #fff; z-index: 1001; overflow-y: auto; -webkit-overflow-scrolling: touch;
}

/* 다국어 */
.nav_language { display: flex; width: 100%; background: #f3f3f3; }
.nav_language .tit { width: 30%; padding: 13px 15px; font-size: 15px; font-weight: 700; color: #262626; }
.nav_language .language_box { width: 70%; }

/* 배너/로그인 */
.nav_banner { position: relative; width: 274px; margin: 0 auto; padding: 8px 0; text-align: center; }
.nav_banner img { width: 100%; }
.nav_banner .left_logo { position: absolute; top: 50px; left: 20px; }
.nav_banner .left_logo img { width: 112px; }
.nav_banner .login_txt { position: absolute; top: 30px; left: 0; padding: 0 20px; font-size: 16px; text-align: left; line-height: 20px; }
.nav_banner .nav_login { position: absolute; top: 84px; left: 10px; }
.nav_banner .nav_login ul { font-size: 0; }
.nav_banner .nav_login ul li { display: inline-block; padding: 0 10px; }
.nav_banner .nav_login ul li a { font-size: 15px; color: #222; }

/* 탭메뉴 */
.nav_tabmenu_box { padding-top: 25px; }
.nav_tabmenu { display: flex; width: 100%; }
.nav_tabmenu li { width: 50%; text-align: center; }
.nav_tabmenu li span { display: block; padding: 10px 0; margin: 0 8px; background: #e8e8e8; color: #acacac; }
.nav_tabmenu li.on span { background: #ab3e55; color: #fff; font-weight: 700; }

/* 게시판 */
.nav_community_box { padding-top: 25px; }
.nav_community_box .comm_tit {
  padding: 10px; margin: 0 10px; font-size: 18px; font-weight: 700; color: #272727; border-bottom: 1px solid #000;
}
.nav_community_box .board_cate li { padding: 0 25px; }
.nav_community_box .board_cate li a { display: block; padding: 12px 0; font-size: 16px; color: #1c1c1c; }

.nav_banner2 { width: 274px; margin: 0 auto; padding: 20px 0 50px; }

/* ===================== FOOTER ===================== */
#footer { margin-top: 15px; }
#footer .ft_button_box { padding: 0 25px; background: #5d5d5d; }
#footer .ft_button_box ul { display: flex; width: 100%; padding-top: 24px; }
#footer .ft_button_box ul li { width: 50%; }
#footer .ft_button_box ul li:first-child { padding-right: 6px; }
#footer .ft_button_box ul li:last-child { padding-left: 6px; }
#footer .ft_button_box ul li a {
  display: block; padding: 10px 0; background: #484848; color: #aeaeae; font-size: 13px; text-align: center; border-radius: 2px;
}
#footer .ft_info2_box { background: #5d5d5d; }
#footer .ft_menu { display: flex; width: 100%; }
#footer .ft_menu li { width: 25%; }
#footer .ft_menu li a { display: block; padding: 18px 0; font-size: 11px; color: #d1d1d1; text-align: center; letter-spacing: -1px; }
#footer .ft_menu li a.privacy { color: #fff; font-weight: 700; }
#footer .ft_address { padding: 0 50px; text-align: center; font-size: 12px; color: #e0e0e0; word-break: keep-all; }
#footer .ft_sns_btn { width: 100%; text-align: center; }
#footer .ft_sns_btn li { display: inline-block; padding: 10px 5px; }
#footer .ft_sns_btn li a { display: block; width: 36px; }
#footer .ft_copy { padding: 15px 0 30px; color: #e0e0e0; font-size: 12px; text-align: center; }
#footer .ft_btn_top a {
  display: block; width: 100%; height: 46px; line-height: 46px; text-align: center;
  color: #fff; font-size: 13px; font-weight: 700; background: #5d5d5d;
  border-top: 1px solid #505050; border-bottom: 1px solid #787878;
}
#footer .ft_btn_top a span {
  padding-left: 15px; background: url('/assets/img/icon/icon_top_arrow.png') no-repeat 0 center / 10px 6px;
}

/* 고정 탑버튼 */
.fixed_btn_top { position: fixed; right: 11px; bottom: 85px; z-index: 200; }
.fixed_btn_top span {
  display: inline-block; width: 42px; height: 42px; font-size: 0;
  background: url('/assets/img/btn/btn_top.png') no-repeat 0 0 / 42px 42px;
}