/*--------------------------------------
    eyoom (이윰빌더) - Enhanced Shopping Mall Version
--------------------------------------*/

/*---------- Wrapper ----------*/
.wrapper {position:relative;overflow:hidden;background:#fafafa}

/*---------- Header & Navbar ----------*/
#hd {position:relative;border-bottom:1px solid #e8e8e8;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,0.08)}
#hd:after {display:block;visibility:hidden;clear:both;content:""}
#hd-h1 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
.to-content a {z-index:1000;position:absolute;top:0;left:0;width:0;height:0;font-size:0;line-height:0;overflow:hidden}

/* header wrap */
.header-wrap {position:relative;background-color:#fff;transition:all .3s ease 0s;border-bottom:1px solid rgba(0,0,0,0.08);z-index:1002;box-shadow:0 2px 8px rgba(0,0,0,0.06)}
.page-header-wrap {border-bottom:0}

/* top header */
.top-header {border-bottom:1px solid rgba(0,0,0,0.08);background:#f8f9fa;padding:8px 0}
.top-header-nav:after {content:"";display:block;clear:both}
.top-header-nav li {float:left;display:block;padding:0;color:#666;margin-right:20px}
.top-header-nav li > a {display:block;color:#666;height:40px;line-height:40px;padding:0;font-size:0.875rem;transition:color 0.3s ease}
.top-header-nav li > a:hover {color:#2563eb}
.top-header-nav li > a i {margin-right:6px;color:#9ca3af}
.top-header-nav .cs-nav {margin:0}
.top-header-nav .cs-nav.s-nav {margin-right:20px}
.top-header-nav .cs-nav a {position:relative;display:block;width:100px}
.top-header-nav .cs-nav a.disabled {pointer-events:none}
.top-header-nav .cs-nav a span {display:block;position:absolute;width:100px;height:40px;text-align:center;border-left:1px solid rgba(0,0,0,0.08);font-size:0.875rem;transition:all 0.3s ease}
.top-header-nav .cs-nav.s-nav a span {border-right:1px solid rgba(0,0,0,0.08)}
.top-header-nav .cs-nav .activate {color:#2563eb;font-weight:600;background-color:#fff;height:41px;border-radius:4px 4px 0 0}
.top-header-nav .cs-nav .deactivate {color:#9ca3af;background-color:#f1f5f9;transition:all 0.3s ease}
.top-header-nav .cs-nav .deactivate:hover {color:#2563eb;background-color:#e2e8f0}
.top-header-nav li .eyoom-form {margin-top:8px}
.top-header-nav li.dropdown > a {cursor:pointer}
.top-header-nav li.dropdown .dropdown-menu {background-color:#fff;padding:8px 0;border:1px solid rgba(0,0,0,0.1);box-shadow:0 10px 25px rgba(0,0,0,0.15);border-radius:8px;margin:0;left:inherit;right:0}
.top-header-nav li.dropdown .dropdown-menu a {display:block;padding:8px 16px;color:#374151;font-size:0.875rem;transition:all 0.2s ease}
.top-header-nav li.dropdown .dropdown-menu a:hover {background-color:#f3f4f6;color:#2563eb}
.top-header-nav li.dropdown:hover > .dropdown-menu {display:block}
.top-header-nav.thn-end {float:right}
.top-header-nav.thn-end li {margin-right:0;margin-left:20px}
.top-header-nav.thn-end li.dropdown .dropdown-menu {left:inherit;right:0}
.navbar-mobile-toggler {display:none}

@media (max-width:991px) {
    .top-header-mobile-btn {display:block;position:absolute;top:10px;left:15px}
    .navbar-mobile-toggler {display:block;position:fixed;bottom:20px;right:20px;width:50px;height:50px;line-height:50px;border:0;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);margin-bottom:0;font-size:1.2rem;color:#fff;border-radius:50%;z-index:1000;box-shadow:0 4px 15px rgba(0,0,0,0.2);transition:all 0.3s ease}
    .navbar-mobile-toggler:hover {transform:scale(1.05)}
}
@media (max-width:576px) {
    .top-header-nav li {margin-right:8px}
}

/* header title */
.header-title {position:relative;border-bottom:1px solid rgba(0,0,0,0.08);background:#fff}
.header-title .container {position:relative;height:100px;display:flex}
.header-title .title-logo {align-self:center}
.header-title .title-logo img {width:auto;height:50px}
.header-title .header-title-search {position:absolute;top:29px;left:50%;width:450px;transform:translateX(-50%)}
.header-title .header-title-search .eyoom-form .input {margin-bottom:0}
.header-title .header-title-search .eyoom-form .input input {height:46px;border:2px solid #e5e7eb;color:#374151;border-radius:25px;padding-left:20px;font-size:0.95rem;transition:all 0.3s ease}
.header-title .header-title-search .eyoom-form .input input:focus {border-width:2px !important;border-color:#2563eb !important;box-shadow:0 0 0 3px rgba(37, 99, 235, 0.1)}
.header-title .header-title-search .eyoom-form .input-button .button {height:42px;line-height:42px;font-size:1.2rem;padding:0 18px;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);color:#fff;top:2px;right:2px;border-left:0;opacity:1;border-radius:20px;transition:all 0.3s ease}
.header-title .header-title-search .eyoom-form .input-button .button:hover {transform:scale(1.05);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.header-title .header-title-btn {position:absolute;top:35px;right:15px;height:36px}
.header-title .header-title-btn .title-btn {position:relative;float:left}
.header-title .header-title-btn .title-btn .title-btn-in {position:relative;width:130px;height:36px;line-height:36px;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);text-align:left;font-size:0.9rem;color:#fff;padding:0 12px;border-radius:6px 0 0 6px;display:flex;justify-content:space-between;transition:all 0.3s ease}
.header-title .header-title-btn .title-btn .title-btn-in.title-btn-navy {background:linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);border-radius:0 6px 6px 0}
.header-title .header-title-btn .title-btn .title-btn-in:hover {transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.header-title .header-title-btn .title-btn .title-btn-in .title-btn-text {font-size:0.9rem;color:#fff}
.header-title .header-title-btn .title-btn .title-btn-in i {display:block;position:absolute;top:8px;right:12px}
.header-title .header-title-btn .title-btn .title-btn-in .badge {position:absolute;top:8px;right:8px;border-radius:12px;font-size:0.75rem}
.header-title .header-title-btn .title-btn .title-btn-in .badge-indigo {background:#6366f1}
.header-title .header-title-btn .title-btn .title-btn-in .badge-dark {background:#374151}
.header-title-mobile-btn {display:none;position:absolute;top:32px;right:15px}
.header-title-mobile-btn .navbar-toggler {font-size:1.5rem;padding:.25rem .75rem;line-height:1}

@media (max-width:991px) {
    .header-title {text-align:left;border-bottom:0}
    .header-title .title-logo img {height:44px}
    .header-title .header-title-btn {display:none}
    .header-title-mobile-btn {display:block}
}

/* navbar */
.navbar {padding:0;background:#fff;border-top:1px solid #f1f5f9}
.navbar-nav li {position:relative;list-style:none}
.navbar-nav a,.navbar-toggler {color:#374151}
.navbar-nav>li>.nav-link {font-weight:500;font-size:1.1rem;padding:18px 18px 18px 18px !important;transition:all 0.3s ease;position:relative}
/* .navbar-nav>li>.nav-link:before {content:'';position:absolute;bottom:0;left:30%;width:0;height:3px;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);transition:all 0.3s ease;transform:translateX(-50%)}
.navbar-nav>li>.nav-link.active {color:#2563eb}
.navbar-nav>li>.nav-link.active:before {width:100%}
.navbar-nav>li>.nav-link:hover {color:#2563eb;transform:translateY(-1px)}
.navbar-nav>li>.nav-link:hover:before {width:100%} */
.navbar-nav .search-menu {position:absolute;top:0;right:0}
.navbar-nav>.nav-empty {font-size:0.875rem;padding:20px 15px !important;color:#6b7280}
.navbar-nav>.nav-empty>a {color:#3b82f6;padding:0;transition:color 0.3s ease}
.navbar-nav>.nav-empty>a:hover {color:#2563eb}
.navbar-nav>li.dropdown-mega-menu>.nav-link {position:absolute;top:0;right:0;font-size:1.25rem;padding:17px 20px !important;border-left:1px solid rgba(0,0,0,0.08);border-right:1px solid rgba(0,0,0,0.08)}
.navbar-nav>li>.pc-search-btn {font-size:1.125rem;padding:18px 15px !important;transition:all 0.3s ease}
.navbar-nav>li>.pc-search-btn:hover {color:#2563eb;transform:scale(1.1)}
.navbar-nav .dropdown-toggle::after {border:0 none;font-family:'Font Awesome\ 5 Free';content:"\f0d7";font-weight:900;height:auto;line-height:normal;margin-left:8px;vertical-align:middle;width:auto;color:#9ca3af;font-size:0.75rem;transition:all 0.3s ease}
.navbar-nav .dropdown:hover .dropdown-toggle::after {transform:rotate(180deg);color:#2563eb}
.navbar-nav .dropdown-toggle:only-child::after {display:none}
.navbar-nav .dropdown-mega-menu .dropdown-toggle::after {display:none}
.navbar-nav .dropdown-menu {background-color:#fff;border:1px solid rgba(0,0,0,0.1);border-radius:8px;margin:0;min-width:14rem;padding:12px 0;top:120%;display:inherit;opacity:0;visibility:hidden;transition:all 0.3s ease;box-shadow:0 10px 25px rgba(0,0,0,0.15)}
.navbar-nav .dropdown-menu .dropdown-toggler::after {position:absolute;right:12px;top:12px}
.navbar-nav .dropdown:hover>.dropdown-menu {z-index:10;top:100% !important;opacity:1;visibility:visible;transform:translateY(0)}
.navbar-nav .dropdown-submenu .dropdown-menu {left:100%;margin-top:1px}
.navbar-nav .dropdown-submenu:hover > .dropdown-menu {z-index:10;top:-12px !important;opacity:1;visibility:visible}
.navbar-nav .dropdown-item {position:relative;padding:8px 30px 8px 18px !important;color:#374151;font-size:1rem;transition:all 0.2s ease;border-radius:4px;margin:0 8px}
.navbar-nav .dropdown-item i {position:absolute;top:10px;right:18px}
.navbar-nav .dropdown-item.active,.navbar-nav .dropdown-item:active,.navbar-nav .dropdown-item:focus,.dropdown-item:hover {background-color:#f3f4f6;color:#2563eb}
.navbar-nav .dropdown-menu li a.active,.navbar-nav .dropdown-menu li a:hover,.navbar-nav .dropdown-menu>ul>.mega-menu-col ul>li:hover>a,.navbar-nav .dropdown-menu>ul>li:hover>a {background-color:#f3f4f6;color:#2563eb}
.navbar-nav .dropdown-mega-menu {position:static}
.navbar-nav .mega-menu {display:table;padding:20px 0;width:100%;-ms-flex-wrap:wrap;flex-wrap:wrap}
.navbar-nav .dropdown-mega-menu .dropdown-menu {right:0;border-radius:12px}
.navbar-nav .mega-menu-col {border-right:1px solid #e5e7eb;flex:0 0 auto;width:20% !important}
.navbar-nav .mega-menu-col:nth-child(5) {border-right:0}
.navbar-nav .mega-menu-col:nth-child(10) {border-right:0}
.navbar-nav .mega-menu-col:nth-child(15) {border-right:0}
.navbar-nav .mega-menu-col:nth-child(6) h5,.navbar-nav .mega-menu-col:nth-child(7) h5,.navbar-nav .mega-menu-col:nth-child(8) h5,.navbar-nav .mega-menu-col:nth-child(9) h5,.navbar-nav .mega-menu-col:nth-child(10) h5,.navbar-nav .mega-menu-col:nth-child(11) h5,.navbar-nav .mega-menu-col:nth-child(12) h5,.navbar-nav .mega-menu-col:nth-child(13) h5,.navbar-nav .mega-menu-col:nth-child(14) h5,.navbar-nav .mega-menu-col:nth-child(15) h5 {border-top:1px solid #e5e7eb;padding-top:24px;margin-top:18px}
.navbar-nav .mega-menu-col h5 a {display:block;padding:8px 18px 12px !important;font-size:1.125rem;color:#1f2937;font-weight:700;transition:all 0.3s ease}
.navbar-nav .mega-menu-col h5 a:hover, .navbar-nav .mega-menu-col h5 a.active {background-color:#f9fafb;color:#2563eb}
.navbar-nav .mega-menu-col .mega-menu-item {position:relative;padding:8px 18px;display:block;width:100%;clear:both;font-weight:400;font-size:1rem;color:#374151;text-decoration:none;white-space:nowrap;transition:all 0.2s ease;border-radius:4px;margin:2px 8px}
.navbar-nav .mega-menu-col .mega-menu-item:hover {background-color:#f3f4f6;color:#2563eb}
.navbar-nav .mega-menu-col .menu3-ul .mega-menu-item {margin-left:18px;border-left:2px solid #d1d5db;color:#6b7280}
.navbar-nav .mega-menu-col .menu3-ul .mega-menu-item:before {content:"";position:absolute;top:16px;left:-1px;width:8px;height:2px;background-color:#d1d5db}

@media (min-width:992px) {
    .navbar {z-index:20}
    .navbar-nav {max-height:65px}
}
@media (max-width:1199px) {
    .navbar-nav>li>.nav-link {padding:25px 10px !important}
}
@media (max-width:991px) {
    .navbar {height:0}
}

/* sidebar nav (mobile) */
.sidebar-left .sidebar-member-menu, .sidebar-left .sidebar-mobile-menu {display:none}
@media (max-width:991px) {
    .sidebar-left.offcanvas {position:fixed;bottom:0;z-index:1004;display:flex;flex-direction:column;max-width:100%;width:320px;background-color:#fff;background-clip:padding-box;outline:0;transition:transform .3s ease-in-out;border-radius:12px 0 0 0}
    .offcanvas-backdrop {z-index:1003}
    .sidebar-left .sidebar-left-content {padding-bottom:24px}
    .sidebar-left.show .sidebar-left-content {position:relative;height:100%;width:100%;overflow-y:auto;-webkit-overflow-scrolling:touch}
    .sidebar-left .offcanvas-header {padding:20px}
    .sidebar-left .sidebar-member-menu {position:relative;display:block;background:linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);padding:8px 20px;border-top:1px solid #d1d5db}
    .sidebar-left .sidebar-member-menu .sidebar-member-btn-box {display:block;float:left;width:50%}
    .sidebar-left .sidebar-member-menu .sidebar-member-btn {position:relative;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);width:140px;height:36px;line-height:36px;color:#fff;text-align:center;font-size:0.875rem;border-radius:6px;transition:all 0.3s ease}
    .sidebar-left .sidebar-member-menu .sidebar-member-btn:hover {transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
    
    /* nav */
    .sidebar-left .navbar-nav {position:relative;margin:0;float:none;border-bottom:1px solid #e5e7eb}
    .sidebar-left .navbar-nav > .nav-li-divider {display:none}
    .sidebar-left .navbar-nav > .nav-li-space {height:44px;border-bottom:none;border-top:1px solid #e5e7eb;background:#fff}
    .sidebar-left .navbar-nav > li {float:none}
    .sidebar-left .navbar-nav > li > a {line-height:48px;padding:0 20px !important;font-size:1rem;color:#374151;transition:all 0.3s ease}
    .sidebar-left .navbar-nav > li > a > .nav-cate-icon {width:24px;text-align:center;margin-right:8px}
    .sidebar-left .navbar-nav > li a {border-bottom:none;border-top:1px solid #e5e7eb}
    .sidebar-left .navbar-nav > li a:hover {border-top:1px solid #e5e7eb;background-color:#f9fafb;color:#2563eb}
    .sidebar-left .navbar-nav > li:first-child > a {border-top:1px solid transparent}
    .sidebar-left .navbar-nav > li > .nav-link.active {color:#2563eb;background-color:#eff6ff}
    .sidebar-left .navbar-nav > li.navbar-nav-home {display:block}
    .sidebar-left .navbar-nav > li.navbar-nav-home > a {background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);color:#fff;border-top:1px solid transparent}
    .sidebar-left .navbar-nav > li > .cate-dropdown-open {position:absolute;top:1px;right:0;width:48px;height:48px;line-height:48px;margin:0;padding:0;text-align:center;border:0;border-left:1px solid #f1f5f9;z-index:1;transition:all 0.3s ease}
    .sidebar-left .navbar-nav > li > .cate-dropdown-open:before {font-family:'Font Awesome\ 5 Free';content:"\f067";font-weight:900;color:#6b7280}
    .sidebar-left .navbar-nav > li > .cate-dropdown-open:hover {border-top:0;background-color:#f3f4f6}
    .sidebar-left .navbar-nav > li > .cate-dropdown-open.show:before {font-family:'Font Awesome\ 5 Free';content:"\f068";font-weight:900;color:#2563eb}
    .sidebar-left .navbar-nav .dropdown > a:after {display:none}
    .sidebar-left .navbar-nav .dropdown-menu {position:relative;border:0;float:none;width:auto;margin:0;padding:0;box-shadow:none;background-color:transparent;display:none}
    .sidebar-left .navbar-nav .dropdown-menu:after {content:"";position:absolute;top:12px;bottom:12px;left:24px;width:2px;background:#e5e7eb}
    .sidebar-left .navbar-nav .dropdown-menu > li > a {color:#6b7280;line-height:32px;border-top:1px solid #e5e7eb;transition:all 0.3s ease}
    .sidebar-left .navbar-nav .dropdown-menu > li:first-child > a {border-top:1px solid #e5e7eb}
    .sidebar-left .navbar-nav .dropdown-menu.show {display:block;opacity:1;visibility:visible}
    .sidebar-left .navbar-nav .dropdown-submenu > a {position:relative;color:#6b7280;font-size:1rem;background:#fafafa;line-height:32px;padding:8px 20px 8px 40px !important;border-top:0;transition:all 0.3s ease}
    .sidebar-left .navbar-nav .dropdown-submenu > a:after {content:"";position:absolute;top:50%;left:20px;width:12px;height:12px;transform:translateY(-50%);border:2px solid #d1d5db;border-radius:50%;background:#fff;z-index:1}
    .sidebar-left .navbar-nav .dropdown-submenu:first-child > a {border-top:1px solid #e5e7eb}
    .sidebar-left .navbar-nav .dropdown-submenu > a:hover {background:#f3f4f6;color:#2563eb;border-top:0}
    .sidebar-left .navbar-nav .dropdown-submenu > a.active {background:#eff6ff;color:#2563eb;font-weight:600}
    .sidebar-left .navbar-nav .dropdown-submenu:first-child > a:hover {border-top:1px solid #e5e7eb}
    .sidebar-left .navbar-nav .dropdown-submenu:hover > .dropdown-menu {top:0 !important}
    .sidebar-left .navbar-nav .dropdown-menu.show .dropdown-menu {display:block;opacity:1;visibility:visible;left:0}
    .sidebar-left .navbar-nav .dropdown-menu .dropdown-menu .dropdown-submenu > a {border-top:0;padding: 8px 20px 8px 50px !important;}
    .sidebar-left .navbar-nav .dropdown-menu .dropdown-menu .dropdown-submenu > a:after {left:25px;width:14px;height:2px;border:0;border-radius:inherit;background:#d1d5db}
    .sidebar-left .navbar-nav .dropdown-item i {position:absolute;top:14px;right:20px}
    .sidebar-left .sidebar-mobile-menu {position:relative;display:block;margin-top:48px;border-top:1px solid #e5e7eb;border-bottom:1px solid #e5e7eb;background:linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%)}
    .sidebar-left .sidebar-mobile-menu:after {content:"";display:block;clear:both}
    .sidebar-left .sidebar-mobile-menu a {display:block;float:left;width:50%;line-height:48px;padding:0 20px;border-bottom:1px solid #e5e7eb;font-weight:500;transition:all 0.3s ease}
    .sidebar-left .sidebar-mobile-menu a:hover {background-color:#fff;color:#2563eb}
    .sidebar-left .sidebar-mobile-menu a:nth-child(odd) {border-right:1px solid #e5e7eb}
    .sidebar-left .sidebar-mobile-menu a:nth-child(5) {border-bottom:0}
}

/*---------- Page Title ----------*/
.page-title-wrap {position:relative;width:100%;height:85px;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);padding:0;display:flex;box-shadow:inset 0 -2px 4px rgba(0,0,0,0.1)}
.page-title-wrap > .container {position:relative;display:flex;justify-content:space-between}
.page-title-wrap h2 {margin:0;font-size:1.5rem;color:#fff;font-weight:700;display:flex;align-items:center}
.page-title-wrap .sub-breadcrumb-wrap {display:flex;align-items:center}
.page-title-wrap .sub-breadcrumb {color:#e0e7ff;font-size:0.875rem}
.page-title-wrap .sub-breadcrumb:after {content:"";display:block;clear:both}
.page-title-wrap .sub-breadcrumb li {float:left;margin-left:8px}
.page-title-wrap .sub-breadcrumb li:before {content:"/";margin-right:8px;color:#c7d2fe}
.page-title-wrap .sub-breadcrumb li:first-child:before {display:none}
.page-title-wrap .sub-breadcrumb a {color:#fff;transition:color 0.3s ease}
.page-title-wrap .sub-breadcrumb a:hover {color:#f1f5f9}

/*---------- Sub Nav ----------*/
.sub-nav-wrap {position:relative;z-index:3;padding:24px 0 0;margin-bottom:40px}
.sub-nav-home {display:none}
.sub-nav-list {position:relative}
.sub-nav-title {position:relative;margin:0;padding:0 36px 0 18px;font-size:0.875rem;line-height:36px;border:1px solid #d1d5db;border-radius:6px;background:#fff;transition:all 0.3s ease}
.sub-nav-title:hover {border-color:#2563eb;box-shadow:0 0 0 3px rgba(37, 99, 235, 0.1)}
.sub-nav-title i {position:absolute;top:10px;right:12px;transition:transform 0.3s ease}
.sub-nav-list.active .sub-nav-title i {transform:rotate(180deg)}
.sub-nav-list ul {display:none;position:absolute;top:37px;left:0;z-index:10;width:100%;padding:12px 0;border:1px solid #d1d5db;border-top:0 none;background:#fff;border-radius:0 0 6px 6px;box-shadow:0 4px 6px rgba(0,0,0,0.1)}
.sub-nav-list li a {display:block;padding:0 18px;font-size:0.875rem;line-height:36px;transition:all 0.2s ease;border-radius:4px;margin:0 8px}
.sub-nav-list li a:hover {background-color:#f3f4f6;color:#2563eb}
.sub-nav-depth1 {margin-bottom:12px}
.sub-nav-wrap .sub-breadcrumb-wrap {display:none}

@media (min-width:992px){
    .sub-nav-wrap {position:relative;width:100%;height:80px;background:#fff;padding:0;margin-bottom:40px;border-bottom:1px solid #e5e7eb;box-shadow:0 2px 4px rgba(0,0,0,0.05)}
    .sub-nav-wrap .container {position:relative}
    .sub-nav-wrap-in:after {content:"";display:block;clear:both}
    .sub-nav-home {display:block;float:left}
    .sub-nav-home a {display:block;height:60px;padding:0 18px;line-height:60px;font-size:1.25rem;color:#374151;border-left:1px solid #d1d5db;border-right:1px solid #d1d5db;transition:all 0.3s ease}
    .sub-nav-home a:hover {color:#2563eb;background-color:#f9fafb}
    .sub-nav-list {float:left;margin:0 0 0 -1px}
    .sub-nav-title {min-width:220px;padding:0 50px 0 28px;line-height:60px;font-size:1rem;border:0 none;color:#374151;border-right:1px solid #d1d5db;background:transparent;border-radius:0}
    .sub-nav-title.cursor-pointer {cursor:pointer}
    .sub-nav-title i {top:22px;right:24px}
    .sub-nav-title:hover {color:#2563eb;font-weight:600;background-color:#f9fafb}
    .sub-nav-list ul {top:60px;padding:0;border-radius:8px;box-shadow:0 10px 25px rgba(0,0,0,0.15)}
    .sub-nav-list li {float:none}
    .sub-nav-list li a {padding:12px 18px;border-top:1px solid #d1d5db;font-size:0.95rem;margin:0}
    .sub-nav-list li:first-child a {border-top:0}
    .sub-nav-list li a:hover {color:#2563eb;background:#f3f4f6}
    .sub-nav-list li.active a {color:#2563eb;font-weight:600;background:#eff6ff}
    .sub-nav-wrap .sub-breadcrumb-wrap {display:block;position:absolute;top:30px;right:20px}
    .sub-nav-wrap .sub-breadcrumb {color:#9ca3af}
    .sub-nav-wrap .sub-breadcrumb:after {content:"";display:block;clear:both}
    .sub-nav-wrap .sub-breadcrumb li {float:left;margin-left:8px}
    .sub-nav-wrap .sub-breadcrumb li:before {content:"/";margin-right:8px}
    .sub-nav-wrap .sub-breadcrumb li:first-child:before {display:none}
    .sub-nav-wrap .sub-breadcrumb a {color:#6b7280;transition:color 0.3s ease}
    .sub-nav-wrap .sub-breadcrumb a:hover {color:#2563eb}
}
@media (max-width:992px) {
    .sub-nav-wrap {padding-top:24px;background:#fff}
}

/*---------- Body ----------*/
.basic-body {position:relative;padding:40px 0;background:#fff}
.basic-body:after {content:"";display:block;clear:both}

/*---------- Page Title ----------*/
.subpage-title {position:relative;font-size:1.75rem;border-bottom:1px solid #e5e7eb;font-weight:700;padding:12px 0;line-height:1.6;color:#1f2937;background:#fff;margin-bottom:36px}
.subpage-title::after {content:"";position:absolute;bottom:-2px;left:0;width:60px;height:4px;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-radius:2px}
.subpage-title .back-btn {display:block;position:absolute;top:18px;right:0;text-align:center;padding:8px 18px;margin:0;font-weight:500;line-height:1;border:1px solid #d1d5db;font-size:0.875rem;border-radius:6px;transition:all 0.3s ease;background:#fff}
.subpage-title .back-btn:hover {color:#2563eb;border-color:#2563eb;background-color:#f9fafb}
@media (max-width:767px) {
    .subpage-title .back-btn {display:none}
}

/*---------- Main Contents ----------*/
.shop-main-slider-top {margin-top:-41px}
.basic-body-main {float:left;padding:0;width:100%}
.main-heading h2 {position:relative;text-align:center;font-size:2rem;margin:0 0 36px;font-weight:700}
.main-heading h2 strong {color:#1f2937}
.main-heading h2:after {content:"";position:absolute;bottom:-12px;left:50%;display:block;width:40px;height:3px;margin-left:-20px;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);border-radius:2px}
@media (max-width:576px) {
    .main-slider {margin:0 -15px}
}
/*---------- Footer ----------*/
.footer {
  position: relative;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  /* background: #f8f9fa; */
  margin-top: auto; /* sticky footer 지원 */
}

.footer-top {
  margin-bottom: 0px;
  padding: 48px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 24px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.footer-nav a {
  color: #374151;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: all 0.2s ease;
  padding: 4px 0;
}

.footer-nav a:hover {
  color: #2563eb;
  transform: translateY(-1px);
}

.footer-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #2563eb;
  transition: width 0.3s ease;
}

.footer-nav a:hover::after {
  width: 100%;
}

.footer-right-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  align-items: center;
}

.footer-right-nav a {
  color: #374151;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
  position: relative;
  transition: all 0.2s ease;
  padding: 4px 0;
}

.footer-right-nav a:hover {
  color: #2563eb;
  transform: translateY(-1px);
}

.footer-right-nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: #2563eb;
  transition: width 0.3s ease;
}

.footer-right-nav a:hover::after {
  width: 100%;
}

.footer-cont-info {
  position: relative;
  font-size: 1rem;
  margin: 30px 0;
  word-break: keep-all;
  text-align: center;
  line-height: 1.8;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

.footer-cont-info strong {
  color: #1f2937;
  font-weight: 600;
}

.footer-cont-info span {
  color: #6b7280;
}

.footer-cont-info span.info-divider {
  margin: 0 12px;
  color: #d1d5db;
  font-weight: 300;
}

.footer-cont-info a {
  color: #6b7280;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: all 0.2s ease;
  padding-bottom: 1px;
}

.footer-cont-info a:hover {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

.footer-copyright {
  color: #9ca3af;
  font-size: 0.875rem;
  text-align: center;
  padding: 40px 20px;
  /* background: #ffffff; */
  border-top: 1px solid rgba(0, 0, 0, 0.05);
  line-height: 1.6;
}

.footer-copyright span {
  display: inline;
  transition: opacity 0.3s ease;
}

/* 태블릿 반응형 */
/* 태블릿 반응형 - 768px 이상은 가로 정렬 유지 */
@media (min-width: 768px) and (max-width: 991px) {
  .footer-top {
    padding: 40px 20px;text-align:left;
  }
  
  .footer-nav,
  .footer-right-nav {
    gap: 16px;
  }
  
  .footer-nav a,
  .footer-right-nav a {
    font-size: 0.9rem;text-align:left;
  }
  
  .footer-cont-info {
    margin-top: 32px;text-align:left;
  }
}

/* 모바일 반응형 */
@media (max-width: 767px) {
  .footer-top {
    padding: 32px 16px;
    margin-bottom: 32px;
  }
  
  .footer-nav,
  .footer-right-nav {
    gap: 16px;
    flex-direction: column;
  }
  
  .footer-nav a,
  .footer-right-nav a {
    font-size: 0.95rem;
  }
  
  .footer-cont-info {
    font-size: 0.9rem;
    margin-top: 24px;
    padding: 0 16px;
  }
  
  .footer-cont-info span.info-divider {
    margin: 0 8px;
  }
  
  .footer-copyright {
    padding: 32px 16px;
    font-size: 0.8rem;
  }
  
  .footer-copyright span {
    display: none;
  }
}

/* 작은 모바일 */
@media (max-width: 480px) {
  .footer-top {
    padding: 24px 12px;
  }
  
  .footer-cont-info {
    font-size: 0.85rem;
    line-height: 1.7;
  }
  
  .footer-copyright {
    padding: 24px 12px;
  }
}

/* 다크 모드 지원 */
@media (prefers-color-scheme: dark) {
  .footer {
    background: #1f2937;
    border-top-color: rgba(255, 255, 255, 0.1);
  }
  
  .footer-top {
    border-bottom-color: rgba(255, 255, 255, 0.1);
  }
  
  .footer-nav a,
  .footer-right-nav a {
    color: #d1d5db;
  }
  
  .footer-nav a:hover,
  .footer-right-nav a:hover {
    color: #60a5fa;
  }
  
  .footer-cont-info strong {
    color: #f9fafb;
  }
  
  .footer-cont-info span {
    color: #9ca3af;
  }
  
  .footer-cont-info span.info-divider {
    color: #6b7280;
  }
  
  .footer-cont-info a {
    color: #9ca3af;
  }
  
  .footer-cont-info a:hover {
    color: #60a5fa;
    border-bottom-color: #60a5fa;
  }
  
  .footer-copyright {
    background: #111827;
    color: #6b7280;
    border-top-color: rgba(255, 255, 255, 0.05);
  }
}

/*---------- Search Full ----------*/
.search-full {position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0, 0, 0, 0.9);display:none;z-index:1010;backdrop-filter:blur(4px)}
.search-full .search-field {position:absolute;top:50%;left:0;right:0;transform:translateY(-50%)}
.search-field h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
.search-field form {position:relative;width:35%;margin:0 auto}
.search-field #mobile_search_input {font-size:1.375rem;padding:15px 40px 15px 15px;-webkit-appearance:none;display:block;background:rgba(255,255,255,0.1);color:#fff;width:100%;border:none;border:2px solid rgba(255,255,255,0.3);margin:0 auto;border-radius:12px;backdrop-filter:blur(10px)}
.search-field #mobile_search_input:focus {border-color:#3b82f6;box-shadow:0 0 0 3px rgba(59, 130, 246, 0.3)}
.search-field .search-btn {position:absolute;top:50%;right:15px;width:50px;height:50px;transform:translateY(-50%);border:0;cursor:pointer;color:#3b82f6;background:transparent;font-size:1.375rem;transition:all 0.3s ease}
.search-field .search-btn:hover {transform:translateY(-50%) scale(1.1)}
.search-full .search-close-btn {position:absolute;top:30px;right:30px;width:60px;height:60px;cursor:pointer;z-index:1;transition:all 0.3s ease}
.search-full .search-close-btn:hover {transform:scale(1.1)}
.search-close-btn:after {content:"";height:60px;border-left:3px solid #fff;position:absolute;transform:rotate(45deg);left:29px;border-radius:2px}
.search-close-btn:before {content:"";height:60px;border-left:3px solid #fff;position:absolute;transform:rotate(-45deg);left:29px;border-radius:2px}
@media (max-width:1199px) {
	.search-field form {width:60%}
}
@media (max-width:767px) {
	.search-field form {width:85%}
}

/*---------- Sidebar Shop Member ----------*/
.sidebar-shop-member-wrap {position:fixed;top:0;bottom:0;right:0;z-index:1004;height:100%;background:#fff;box-shadow:-4px 0 15px rgba(0,0,0,0.1)}
.sidebar-shop-member-btn {z-index:1002;position:absolute;top:50%;left:-52px;width:46px;height:110px;transform:translateY(-50%);background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);border:0;font-size:1.25rem;color:#fff;border-radius:6px;transition:all 0.3s ease;box-shadow:0 4px 15px rgba(0,0,0,0.2)}
.sidebar-shop-member-btn:hover {transform:translateY(-50%) scale(1.05)}
.sidebar-shop-member-btn.mo-btn {display:none}
.sidebar-shop-member-btn i {display:block;width:46px;height:55px;line-height:55px}
.sidebar-shop-member-btn .direction-icon {display:block;width:46px;height:55px;line-height:55px;background:#1f2937;border-bottom-left-radius:6px;border-bottom-right-radius:6px}
.sidebar-shop-member-btn.active .fa-outdent {display:none}
.sidebar-shop-member-btn.active .direction-icon:before {display:block;width:46px;height:55px;line-height:55px;content:"\f00d";font-family:'Font Awesome\ 5 Free';font-weight:900;background:#374151;border-bottom-left-radius:6px;border-bottom-right-radius:6px}
.sidebar-shop-member.offcanvas {position:fixed;bottom:0;z-index:1004;display:flex;flex-direction:column;max-width:100%;width:320px;background-color:#fff;background-clip:padding-box;outline:0;transition:transform .3s ease-in-out;overflow-y:auto !important;height:100%;-webkit-overflow-scrolling:touch}
.sidebar-shop-member-in {padding:20px}
.sidebar-shop-member .rside-nav-list {margin:0 0 30px;padding:0;list-style:none;border:1px solid #e5e7eb;border-radius:8px;overflow:hidden}
.sidebar-shop-member .rside-nav-list:after {content:"";display:block;clear:both}
.sidebar-shop-member .rside-nav-list li {float:left;width:50%}
.sidebar-shop-member .rside-nav-list li a {display:block;width:100%;padding:12px 15px;text-align:center;font-size:0.875rem;transition:all 0.3s ease}
.sidebar-shop-member .rside-nav-list li a:hover {background-color:#f3f4f6;color:#2563eb}
.sidebar-shop-member .rside-nav-list li:nth-child(1) {border-bottom:1px solid #e5e7eb}
.sidebar-shop-member .rside-nav-list li:nth-child(2) {border-bottom:1px solid #e5e7eb;border-left:1px solid #e5e7eb}
.sidebar-shop-member .rside-nav-list li:nth-child(4) {border-left:1px solid #e5e7eb}
.sidebar-shop-member .shop-member-box {position:relative;margin-bottom:30px}
.sidebar-shop-member .shop-member-box .shop-member-box-title {position:relative;height:44px;line-height:44px;text-align:center;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);color:#fff;margin-bottom:12px;border-radius:6px;font-weight:600}
.sidebar-shop-member .shop-member-box .shop-member-box-title .badge {position:absolute;top:-12px;right:-10px;background:#ef4444;border-radius:12px}
.sidebar-shop-member .shop-member-box .panel .panel-heading {background-color:transparent;border:0;padding:0;}
.sidebar-shop-member .shop-member-box .panel .panel-title {position:relative;height:44px;margin:0;font-size:1rem;color:#fff;line-height:1.5;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);border:0;padding:12px 30px 12px 65px;cursor:pointer;border-radius:6px;transition:all 0.3s ease}
.sidebar-shop-member .shop-member-box .panel .panel-title:hover {transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,0.15)}
.sidebar-shop-member .shop-member-box .panel .panel-title .count-num {display:block;position:absolute;top:0;left:0;width:55px;height:44px;line-height:44px;text-align:center;background-color:#1f2937;color:#fbbf24;font-size:0.875rem;border-radius:6px 0 0 6px;font-weight:700}
.sidebar-shop-member .shop-member-box .panel .panel-body {border:0;padding:0}
.sidebar-shop-member .shop-member-box .op-area {border:1px solid #e5e7eb;margin:12px 0 36px;padding:15px;border-radius:8px;background:#fafafa}
.sidebar-shop-member .shop-member-box .op-area h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.sidebar-shop-member .shop-member-box .op-area li {border-bottom:1px solid #f1f5f9;position:relative;padding:12px 0;min-height:100px;padding-left:85px}
.sidebar-shop-member .shop-member-box .op-area li a {font-weight:600;color:#1f2937;transition:color 0.3s ease}
.sidebar-shop-member .shop-member-box .op-area li a:hover {color:#2563eb}
.sidebar-shop-member .shop-member-box .op-area li .prd-img {position:absolute;top:12px;left:0px;padding:4px;border:1px solid #e5e7eb;border-radius:6px}
.sidebar-shop-member .shop-member-box .op-area li .prd-name {display:block;font-weight:600;margin-bottom:6px}
.sidebar-shop-member .shop-member-box .op-area li .prd-cost {display:block;font-weight:700;color:#dc2626;margin:6px 0 0;font-size:1.05rem}
.sidebar-shop-member .shop-member-box .op-area .li-empty {padding:40px 0;padding-left:0;color:#9ca3af;border-bottom:0;text-align:center;min-height:inherit}
.sidebar-shop-member .shop-member-box #stv {position:relative}
.sidebar-shop-member .shop-member-box #stv_pg {display:block;text-align:center;margin:12px 0 0;line-height:24px}
.sidebar-shop-member .shop-member-box .stv-item {display:none;padding:0 12px;word-break:break-all}
.sidebar-shop-member .shop-member-box #up {position:absolute;bottom:12px;left:12px;width:36px;height:24px;overflow:hidden;border:1px solid #d1d5db;border-radius:4px;transition:all 0.3s ease}
.sidebar-shop-member .shop-member-box #up:hover {border-color:#2563eb;background-color:#f3f4f6}
.sidebar-shop-member .shop-member-box #up span {position:absolute;font-size:0;line-height:0;overflow:hidden}
.sidebar-shop-member .shop-member-box #down {position:absolute;bottom:12px;right:12px;width:36px;height:24px;overflow:hidden;border:1px solid #d1d5db;border-radius:4px;transition:all 0.3s ease}
.sidebar-shop-member .shop-member-box #down:hover {border-color:#2563eb;background-color:#f3f4f6}
.sidebar-shop-member .shop-member-box #down span {position:absolute;font-size:0;line-height:0;overflow:hidden}

@media (max-width:767px) {
    .sidebar-shop-member-btn.pc-btn {display:none}
    .sidebar-shop-member-btn.mo-btn {display:block;z-index:1000}
    .sidebar-shop-member-btn {position:fixed;top:inherit;transform:inherit;bottom:20px;left:20px;width:50px;height:50px;line-height:50px;background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);margin-bottom:0;font-size:1.2rem;border-radius:50%;box-shadow:0 4px 15px rgba(0,0,0,0.2)}
    .sidebar-shop-member-btn:hover {transform:scale(1.05)}
    .sidebar-shop-member-btn i {width:50px;height:50px;line-height:50px}
    .sidebar-shop-member-btn .direction-icon {display:none}
    .sidebar-shop-member-btn.active {background:#374151}
    .sidebar-shop-member-btn.active i {display:none}
    .sidebar-shop-member-btn.active:before {content:"\f00d";font-family:'Font Awesome\ 5 Free';font-weight:900}
}

/*---------- Offcanvas ----------*/
.offcanvas-backdrop {z-index:1003;backdrop-filter:blur(2px)}

/*---------- My Home ----------*/
.my-home>.container {padding-left:0;padding-right:0}

/*---------- Eb BackToTop ----------*/
.eb-backtotop {position:fixed;right:20px;bottom:20px;height:52px;width:52px;cursor:pointer;display:block;border-radius:50% !important;box-shadow:0 4px 15px rgba(0,0,0,0.2);background:linear-gradient(135deg, #667eea 0%, #764ba2 100%);z-index:1001;opacity:0;visibility:hidden;transform:translateY(20px);transition:all 0.3s ease}
.eb-backtotop.active-progress {opacity:1;visibility:visible;transform:translateY(0)}
.eb-backtotop:hover {transform:scale(1.05)}
.eb-backtotop:after {position:absolute;content:"\f106";font-family:'Font Awesome\ 5 Free';font-weight:900;text-align:center;font-size:18px;color:#fff;left:0;top:0;height:52px;width:52px;line-height:32px;cursor:pointer;display:block;z-index:1;transition:all 0.3s ease}
.eb-backtotop:hover:after {color:#f1f5f9}
.eb-backtotop svg path {fill:none}
.eb-backtotop svg.backtotop-progress path {stroke:#e0e7ff;stroke-width:4;box-sizing:border-box;transition:all 0.3s ease}
.eb-backtotop .progress-count {display:block;position:absolute;bottom:10px;left:0;right:0;font-size:11px;text-align:center;color:#e0e7ff;font-weight:600}
.eb-backtotop svg.backtotop-progress path {stroke:#fff}

@media (max-width:991px) {
	.eb-backtotop {bottom:80px}
}

/* ============================================
   992px ~ 1399px 강제 offcanvas 설정
   ============================================ */
@media (min-width: 992px) and (max-width: 1399px) {
    /* 네비게이션 숨김 */
    .nav-wrap,
    .navbar {
        display: none !important;
    }
    
    /* 헤더 모바일 버튼 표시 */
    .header-title-mobile-btn {
        display: block !important;
    }
    
    /* 위시리스트/장바구니 버튼 숨김 */
    .header-title .header-title-btn {
        display: none !important;
    }
    
    /* 검색창 숨김 */
    .header-title .header-title-search {
        display: none !important;
    }
    
    /* 플로팅 햄버거 버튼 표시 */
    .navbar-mobile-toggler {
        display: block !important;
    }
    
    /* offcanvas 강제 설정 */
    .sidebar-left.offcanvas:not(.show) {
        transform: translateX(-100%) !important;
    }
    
    .sidebar-left.offcanvas.show {
        transform: translateX(0) !important;
    }
    
    .sidebar-left.offcanvas {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        z-index: 1045 !important;
        width: 300px !important;
        max-width: 100% !important;
        visibility: visible !important;
        background-color: #fff !important;
        transition: transform 0.3s ease-in-out !important;
    }
    
    .sidebar-left .sidebar-member-menu,
    .sidebar-left .sidebar-mobile-menu {
        display: block !important;
    }
    
    .sidebar-left .navbar-nav {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
        visibility: visible !important;
        position: relative !important;
        margin: 0 !important;
        float: none !important;
        border-bottom: 1px solid #e5e5e5 !important;
    }
    
    .sidebar-left .navbar-nav > li {
        float: none !important;
    }
    
    .sidebar-left .navbar-nav > li > a {
        line-height: 42px !important;
        padding: 0 15px !important;
        font-size: .9375rem !important;
        color: #000 !important;
        border-top: 1px solid #e5e5e5 !important;
    }
}

/* ============================================
   사이드바 메뉴 버튼 간격 조정
   ============================================ */
.sidebar-left .sidebar-member-menu {
    padding: 15px 20px !important;
}

.sidebar-left .sidebar-member-menu .m-t-10 {
    margin-top: 12px !important;
    margin-bottom: 12px !important;
}

.sidebar-left .sidebar-member-menu .sidebar-member-btn-box {
    padding: 4px !important;
}

.sidebar-left .sidebar-member-menu .sidebar-member-btn {
    width: 100% !important;
    margin: 0 !important;
}