#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: var(--headerHeight); width: 240px; height: calc(100dvh - var(--headerHeight)); border-right: solid 1px #dedfe2; transition: left 0.2s; background: #fff; overflow-y: auto;}
#snb::-webkit-scrollbar{width : 6px;}
#snb::-webkit-scrollbar-thumb{background-color: #ccc; border-radius: 3px;}
#snb.closed {left: -240px;}
#snb.opened {left: 0;}
#snb div:not(.notice-box) {height: 100px; background: url('/images/customer-center/ic_support.svg') 90% 67% no-repeat #4353e4; background-size: 34px 30px; padding: 25px 30px;}
#snb div.notice-box{ margin-top: -24px; display: flex; flex-direction: column; padding: 20px 29px; background-color: #fcfdff; gap: 20px; border-bottom: 1px dotted #dedfe2; border-top: 1px dotted #dedfe2;}
#snb div.notice-box dl dt{ font-size: 13px; font-weight: 600; letter-spacing: -0.02em; text-align: left; color: #2469b9; margin-bottom: 2px;}
#snb div.notice-box dl dd { padding-top: 5px; position: relative; display: inline-block; padding-right: 20px; font-size: 13px; color: #444;}
#snb div.notice-box p { font-weight: 400; font-size: 12px; line-height: 1.4; letter-spacing: -0.03em; color: #666;}
#snb div span {font-family: 'Poppins'; font-size: 14px; color: #98a4ff;}
#snb div p {font-weight: 700; font-size: 27px; letter-spacing: -0.81px; color: #fff; margin-top: 7px;}
#snb h2 {width: calc(100% - 27px); height: 23px; margin: 30px 0 0 27px; font-size: 16px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 12px; letter-spacing: -0.48px; text-align: left; color: #000;}
#snb ul {margin-bottom: 24px; padding-bottom: 23px; border-bottom: 1px solid rgb(222, 223, 226); margin-top: 4px;}
#snb ul li {width: calc(100% - 20px);}
#snb ul li a {font-size: 14px; padding: 9px 0 9px 27px; color: rgb(68, 68, 68); border-radius: 0 25px 25px 0; width: 100%; display: block;}
#snb ul li a:hover {background-color: rgb(239, 239, 240);}
#snb ul li a.active {background-color: #e6f4f1; font-weight: 500;}
#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;}
}