@charset "utf-8";

#shGnb{display:flex;align-items:center;position:sticky;top:0;z-index:20;width:100%;height:65px;padding:0 4%;background:#fff}
#shGnb:after{position:absolute;top:100%;right:0;left:0;z-index:1;height:4px;background:linear-gradient(0deg, rgba(255,255,255,0) 0%, rgba(55,87,86,0.1) 100%);content:""}
#shLogo{width:230px}
#shLogo img{width:100%;object-fit:cover}
#shGnb nav{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
#shGnb nav ul{display:flex;gap:40px}
#shGnb nav ul li a{font-size:17px;font-weight:700;color:var(--dark)}
#shGnb .user-tip{display:flex;align-items:center;gap:15px;margin-left:auto}
#shGnb .user-tip li a{font-size:14px;font-weight:500;color:#aaa;transition:all .2s}
#shGnb .user-tip li a:hover{color:var(--dark)}
#shGnb .contact{padding:10px 22px;margin-left:20px;border-radius:4px;font-size:14px;font-weight:600;color:#fff;background-color:var(--dark);transition:all.3s}
#shGnb .contact:hover{background-color:var(--primary)}

.profile-toggle{display:flex;align-items:center;gap:10px;margin-left:20px;font-size:14px;font-weight:600;color:var(--primary)}
.profile-toggle .toggle-switch{position:relative;display:inline-block;width:50px;height:26px}
.profile-toggle .toggle-switch input{opacity:0;width:0;height:0}
.profile-toggle .slider{position:absolute;cursor:pointer;top:0;left:0;right:0;bottom:0;border-radius:34px;background:#ccc;transition:0.4s}
.profile-toggle .slider:before{position:absolute;content:"";left:3px;bottom:3px;width:20px;height:20px;;border-radius:50%;background:#fff;transition:0.4s}
.profile-toggle .toggle-switch input:checked + .slider{background:var(--primary)}
.profile-toggle .toggle-switch input:checked + .slider:before{transform:translateX(24px)}
.profile-toggle .toggle-switch input:disabled + .slider{background:#e0e0e0;cursor:not-allowed}
.profile-toggle .toggle-switch input:disabled + .slider:before{background:#c0c0c0}

#moGnb{display:none;position:relative;z-index:15;align-items:center;padding:5px 15px 5px 5px;border-bottom:1px solid #e9e9e9}
#moGnbBtn{position:relative;width:45px;height:45px;margin-right:5px}
#moGnbBtn span{display:block;position:absolute;top:22px;left:12px;width:22px;height:2px;background:var(--dark)}
#moGnbBtn span:after{display:block;content:"";position:absolute;top:6px;width:100%;height:100%;background:var(--dark)}
#moGnbBtn span:before{display:block;content:"";position:absolute;top:-6px;width:100%;height:100%;background:var(--dark)}
#moGnbNav{display:none;position:fixed;top:0;right:0;bottom:0;left:0;background:#fff}
#moGnbNav .close{position:absolute;right:0;top:0;border:none;width:45px;height:45px;background:none}
#moGnbNav .close svg{width:30px;height:30px}
#moGnbNav .user-tip{display:flex;align-items:center;gap:15px;height:45px;padding:0 15px;background:#f7f7f7}
#moGnbNav .user-tip li a{font-size:14px;font-weight:500;color:#aaa;transition:all .2s}
#moGnbNav .nav li{border-bottom:1px solid #e1e1e1}
#moGnbNav .nav li a{padding:0 15px;font-size:15px;line-height:38px}
@media(max-width:1024px){
#shGnb{padding:0 15px}    
#shLogo{width:170px}
#shGnb nav{position:relative;left:auto;top:auto;transform:none;margin-left:30px}
#shGnb nav ul{gap:25px}
#shGnb nav ul li a{font-size:15px}
#shGnb .user-tip li a{font-size:13px}
}
@media(max-width:860px){
#shGnb{display:none}
#moGnb{display:flex}    
#moGnb .logo img{width:150px}
.profile-toggle{margin-left:auto;font-size:13px}
.profile-toggle .toggle-switch{width:48px;height:24px}
.profile-toggle .slider:before{width:18px;height:18px}
}
@media(max-width:360px){
#moGnb .logo img{width:140px}    
.profile-toggle{font-size:12px}
.profile-toggle .toggle-switch{width:45px;height:21px}
.profile-toggle .slider:before{width:15px;height:15px}
}