#snb-bg {width: 100vw; height: 100dvh; display: none; position: fixed; z-index: 99996; background: rgba(0,0,0,0.4); top: 0; left: 0;}
#snb {position: fixed; left: 0; top: calc(var(--headerHeight) + var(--snbHeight)); width: 240px; height: calc(100vh - calc(var(--headerHeight) + var(--snbHeight))); border-right: solid 1px #dedfe2; transition: left 0.2s; background: #fff; overflow-y: auto; padding-top: 12px;}
#snb::-webkit-scrollbar{width : 6px;}
#snb::-webkit-scrollbar-thumb{background-color: #ccc; border-radius: 3px;}
#snb.closed {left: -240px;}
#snb.opened {left: 0;}
#snb > dl { display: flex; flex-direction: column; align-items: stretch; padding: 0 15px;}
#snb > dl ~ dl {margin-top: 10px; border-top: solid 1px #F0F0F0; padding-top: 10px;}
#snb > dl > dt span {display: flex; align-items: center; height: 28px; padding: 3px 10px 4px; font-weight: 700; font-size: 14px; letter-spacing: -0.03em; line-height: 1.3; color: #404040; position: relative;}
#snb > dl > dt span::before {content: ''; display: block; position: absolute; width: 4px; height: 4px; left: 0; top: 9px; background: #f5551d;}
#snb > dl > dt span::after  {content: ''; display: block; position: absolute; width: 4px; height: 4px; left: 0; bottom: 9px; background: #253b8f;}
#snb > dl > dd a {display: flex; align-items: center; height: 32px; padding: 3px 10px 4px; font-size: 15px; letter-spacing: -0.03em; line-height: 1.3; color: #333; border-radius: 4px;}
#snb > dl > dd a.active {background: #EFF3F9; font-weight: 700; color: #2A6EED;}
#snb > .link-wrap {display: flex; flex-direction: column; gap: 10px; margin-top: 10px; border-top: solid 1px #F0F0F0; padding-top: 20px;}
#snb > .link-wrap a {display: flex; align-items: center; width: 200px; height: 40px; margin: 0 auto; border-radius: 3px; font-weight: 500; font-size: 14px; letter-spacing: -0.02em; color: #006CFF; padding: 0 0 0 38px;}
#snb > .link-wrap a.proposal {background: url("/images/customer-center/ic_book-blue.svg") left 12px top 14px no-repeat, url("/images/customer-center/ic_right-arrow-blue.svg") right 14px center no-repeat #EFF7FF;}
#snb > .link-wrap a.client {background: url("/images/customer-center/ic_people-blue.svg") left 12px top 14px no-repeat, url("/images/customer-center/ic_right-arrow-blue.svg") right 14px center no-repeat #EFF7FF; margin-bottom: calc(var(--footerHeight) + 20px);}
#snb-toggle-btn-open {position: fixed; display: none; width: 42px; height: 42px; bottom: 25px; left: 0; border-radius: 0 100% 100% 0; z-index: 99999; background: url("/images/common/document/icon_nav_toggle_arrow_open.png") center/17px no-repeat rgb(101, 100, 100); transition: all 0.25s ease-out 0s;}
#snb-toggle-btn-close{position: fixed; display: none; width: 42px; height: 42px; bottom: 25px; left: 218px; border-radius: 100%; background: url("/images/common/document/icon_nav_toggle_arrow.png") center/17px no-repeat rgb(101, 100, 100); transition: all 0.25s ease-out 0s;}

@media (max-width: 980px) {
    #snb { width: 24.5%; min-width: 200px;}
    #snb div {padding-left: 20px;}
}

@media (max-width: 900px) {
	#snb {top: 0; left: -240px; width: 240px; height: 100dvh; border-right: none; z-index: 99997;}
	#snb.closed #snb-toggle-btn-open {display: block; left: 0; opacity: 1;}
	#snb.opened #snb-toggle-btn-open {display: block; left: 218px; opacity: 0; visibility: hidden;}
	#snb.closed #snb-toggle-btn-close {display: block; left: 0; opacity: 0; visibility: hidden;}
	#snb.opened #snb-toggle-btn-close {display: block; left: 218px; opacity: 1;}
	#snb.closed + #snb-bg {display: none;}
	#snb.opened + #snb-bg {display: block;}
	#snb-toggle-btn-open {display: block; left: 0; opacity: 1;}
	#snb-toggle-btn-close {display: none; left: 0; opacity: 0;}
}