@charset "utf-8";

#dkHd{position:sticky;top:0;z-index:20;transform:translateY(0);transition:transform .45s cubic-bezier(.19,1,.22,1);background:#fff}
#dkHd.is-nav-only{transform:translateY(calc(-1 * var(--dkHd-hide-offset, 60px)))}
#dkHd.is-nav-only-back{transform:translateY(0);box-shadow:none}
#dkHd .logo{padding:25px 0}
#dkHd .logo a{display:block}
#dkHd .logo img{width:180px}
#dkHd .nav-btn{display:none;position:absolute;top:15px;left:10px;width:36px;height:36px;color:#111}
#dkHd .nav-btn-close{display:none;position:absolute;left:5px;top:11px;width:36px;height:36px;color:#111}
#dkHd .nav-btn-close svg{width:20px;height:20px}
#dkHd .nav-wrap{width:100%}
#dkHd .nav-wrap.on{display:block}
#dkHd .nav-wrap .search{display:none;gap:8px;width:100%;height:45px;margin-top:10px;padding:0 10px 0 20px;border-radius:50px;background:#f2f2f2}
#dkHd .nav-wrap .search-input{width:100%;height:100%;font-size:14px;color:#111}
#dkHd .nav-wrap .search-input::placeholder{color:#aaa}
#dkHd .nav-wrap .search-btn{flex-shrink:0;width:30px;height:30px;padding-bottom:2px;border-radius:50%;color:#fff;background:linear-gradient(126deg,rgba(20, 192, 222, 1) 0%, rgba(0, 106, 255, 1) 100%)}
#dkHd .nav-wrap .search-btn svg{margin:auto;width:17px;height:17px}
#dkHd .nav{overflow-x:auto;overflow-y:hidden;width:100%;padding:16px 0;border-bottom:1px solid #e5e5e5}
#dkHd .nav-menu{gap:30px}
#dkHd .nav-menu li a{position:relative;font-size:14px;font-weight:600;color:#111;white-space:nowrap}
#dkHd .nav-menu li a.on:before{content:"";position:absolute;left:0;bottom:-20px;width:100%;height:3px;background:#111}
@media(hover:hover){#dkHd .nav-menu li a:hover{color:#666}}
#dkHd .mo-nav{display:none;gap:10px;padding-top:20px;border-top:1px solid #e5e5e5}
#dkHd .mo-nav a{font-size:14px;font-weight:500;color:#888}

#dkHd .auth{display:flex;align-items:center;gap:20px;position:absolute;right:70px;top:15px}
#dkHd .auth .search{gap:8px;width:280px;height:50px;padding:0 10px 0 20px;border-radius:50px;background:#f2f2f2}
#dkHd .auth .search-input{width:100%;height:100%;font-size:14px;color:#111}
#dkHd .auth .search-input::placeholder{color:#aaa}
#dkHd .auth .search-btn{flex-shrink:0;width:32px;height:32px;padding-bottom:2px;border-radius:50%;color:#fff;background:linear-gradient(126deg,rgba(20, 192, 222, 1) 0%, rgba(0, 106, 255, 1) 100%)}
#dkHd .auth .search-btn svg{margin:auto;width:17px;height:17px}
#dkHd .auth-link{gap:20px}
#dkHd .auth-link a{font-size:14px;font-weight:500;color:#aaa}
#dkHd .auth-icon{gap:8px}
#dkHd .auth-icon a{position:relative;color:#111}
#dkHd .auth-icon-cart{margin-left:4px}
#dkHd .auth-icon-cart .added{position:absolute;top:0;right:-3px;width:10px;height:10px;border-radius:50%;border:2px solid #fff;background:var(--primary)}
#dkHd .auth-user{position:relative;width:36px;height:36px}
#dkHd .auth-user > a{width:100%;height:100%}
#dkHd .auth-user > a svg{margin:auto}
#dkHd .auth-user-pf {position:relative;width:max-content;margin:0 auto}
#dkHd .auth-user-pf .img{overflow:hidden;width:60px;height:60px;margin:0 auto;border-radius:50%;border:1px solid #e5e5e5}
#dkHd .auth-user-pf img{width:100%;height:100%;object-fit:contain}
#dkHd .auth-user-pf .icon{position:absolute;right:-3px;bottom:0;width:20px;height:20px;border-radius:50%;border:1px solid #d9d9d9;color:var(--dark);background:#fff}
#dkHd .auth-user-pf .icon svg{width:12px;height:12px;margin:auto;color:#aaa}
#dkHd .auth-user-menu{display:none;flex-flow:column;gap:12px;position:absolute;right:-10px;top:100%;z-index:10;transform:translateY(5px);min-width:200px;width:max-content;padding:15px 18px;border-radius:6px;border:1px solid #e5e5e5;background:#fff}
#dkHd .auth-user-menu *{line-height:1}
#dkHd .auth-user-menu p{margin-bottom:5px;font-size:13px;color:#aaa;text-align:center}
#dkHd .auth-user-menu a{font-weight:500;color:#111}
#dkHd .auth-user-menu.on{display:flex;transform:translateY(0)}
#dkHd .auth-user-menu a.sm{padding-top:10px;margin-top:3px;border-top:1px solid #e5e5e5;font-size:13px;font-weight:400;color:#aaa}
#dkHd .auth-user-menu a:hover{color:#555}


@media(max-width:1280px){
#dkHd .nav-menu{justify-content:start;margin:0 20px}   
#dkHd .nav-menu li:last-child{padding-right:20px}
#dkHd .auth{right:10px}
}
@media(max-width:1024px){
#dkHd.sub{align-items:flex-start}
#dkHd .logo{padding-left:16px}
}
@media(max-width:768px){
#dkHd{height:56px;border-bottom:1px solid #e5e5e5}    
#dkHd.sub{align-items:center}        
#dkHd .nav-wrap{display:none;position:fixed;z-index:105;width:100%;height:100vh;padding:56px 16px 0;background:#fff}
#dkHd .nav-wrap:before{display:block;content:"";position:absolute;left:0;top:55px;width:100%;height:1px;background:#e5e5e5}
#dkHd .nav-wrap .search{display:flex}
#dkHd .nav-btn{display:block;top:11px;left:5px}
#dkHd .nav-btn-close{display:block}
#dkHd .nav{overflow:unset;overflow-y:auto;height:calc(100vh - 56px);padding:0;border:none}
#dkHd .nav-menu{flex-direction:column;gap:10px;margin:0;padding:20px 0}
#dkHd .nav-menu li a.on{color:var(--primary)}
#dkHd .nav-menu li a.on:before{display:none}
#dkHd .logo{padding:16px 0}
#dkHd .logo img{width:120px}
#dkHd .auth{top:17px;right:5px}
#dkHd .auth .search{display:none}    
#dkHd .auth-icon a.heart{display:none}
#dkHd .auth-user-menu{display:none!important}
#dkHd .mo-nav{display:flex}
}
@media(max-width:480px){
#dkHd .nav-btn svg{width:20px;height:20px}
#dkHd .auth-link {top:10px;gap:10px}
#dkHd .auth-link a{font-size:13px}
#dkHd .auth-link .join{display:none}
#dkHd .auth-icon{gap:4px}
#dkHd .auth-icon a svg{width:20px;height:20px}
}