header {height: 70px;}
header .header-area {position: fixed; width: 100%; z-index: 9999;}
main {display: flex; justify-content: center;}
main:after {content: ''; display: block; width: 330px; margin-left: 23px;}

#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: 70px; width: 240px; height: calc(100dvh - 70px); 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 ul {margin-bottom: 24px; padding-bottom: 23px; border-bottom: 1px solid rgb(222, 223, 226); margin-top: 4px;}

#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;}

.copyBtn {width: 12px; height: 13px; position: absolute; z-index: 2; top: 7px; right: 2px; text-align: center; cursor: pointer; background: url("/images/common/document/copy-icon.svg") center/contain no-repeat; }
.copyBtn.copied::before { content: "Copied!"; font-size: 11px; background-color: rgb(64, 64, 64); border-radius: 3px; color: rgb(255, 255, 255); padding: 2px 7px 3px 8px; position: absolute; top: -22px; right: -22px; }

#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;}

article {width: 962px; border-radius: 10px; border: solid 1px #e5ecf5; margin: 34px 0 68px 250px; padding: 30px 40px 50px; background-color: #fcfdff;}
article h1 {font-weight: 500; font-size: 29px; letter-spacing: -1.45px; color: #282828; text-align: center;}
article > p {font-size: 16px; letter-spacing: -0.8px; color: #333; line-height: 22px; margin-top: 15px; text-align: center; padding: 0 10px; word-break: keep-all;}
article > p a {font-weight: 500; font-size: 16px; letter-spacing: -0.8px; color: #1c6efa;}

article form div.form-service-wrap div dl dd input, label {cursor : pointer}

@media (max-width: 1720px) {
	main:after {width: 15vw;}
}
@media (max-width: 1480px) {
	main:after {content: none;}
}
@media (max-width: 1250px) {
	header {height: 110px;}
	#snb {top: 110px; height: calc(100dvh - 110px);}
	article {min-width: auto; width: calc(100% - 260px); margin-right: 10px;}
}
@media (max-width: 980px) {
	header {height: 63px;}
	#snb {top: 63px; width: 24.5%; min-width: 200px; height: calc(100dvh - 63px);}
	#snb div {padding-left: 20px;}
	article {margin-left: calc(24.5% + 10px); width: calc(75.5% - 20px); padding: 20px;}
	article .error-list-btn-container #download-excel {font-size: 0; width: 55px;}
}
@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;}
	article {margin-left: 10px; width: calc(100% - 20px);}
	#snb-toggle-btn-open {display: block; left: 0; opacity: 1;}
	#snb-toggle-btn-close {display: none; left: 0; opacity: 0;}
}
@media (max-width: 500px) {
	header {height: 53px;}
	article {border: none; margin: 0; flex-grow: 1; padding: 15px;}
}