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

div#error-code-page {position: fixed; left: 0; top: 70px; width: 240px; height: calc(100vh - 70px); border-right: solid 1px #eaeef5; overflow: hidden auto;}
div#error-code-page::-webkit-scrollbar {width: 6px;}
div#error-code-page::-webkit-scrollbar-thumb {background-color: #ccc; border-radius: 3px;}
div#error-code-page div {min-height: 63px; display: flex; align-items: center; padding-left: 38px;}
div#error-code-page div ~ div {border-top: solid 1px #eaeef5;}
div#error-code-page p {font-weight: 500; font-size: 14px; color: #282828; padding-left: 26px; background: url('/images/error-code/search/ic_filter.svg') left center no-repeat;}
div#error-code-page #closeBtn {width: 24px; height: 24px; display: none; cursor: pointer; margin-left: auto; background: url('/images/error-code/search/ic_close.svg') center no-repeat;}
div#error-code-page input {border: solid 1px #cfd3db; background-color: #fff; width: 18px; height: 18px;}
div#error-code-page input:checked {border-color: #3478de; background: url('/images/error-code/search/ic_check.svg') center no-repeat #3478de;}
div#error-code-page label {font-size: 14px; letter-spacing: -0.42px; color: #282828; margin-left: 10px; margin-bottom: 2px; display: flex; cursor: pointer;}
div#error-code-page dl {padding: 20px 0;}
div#error-code-page dt {font-weight: 700; font-size: 13px; color: #404040; padding-left: 10px; position: relative; line-height: 10px;}
div#error-code-page dt:before,
div#error-code-page dt:after  {content: ''; display: block; position: absolute; width: 4px; height: 4px; left: 0; top: 0; background: #d81d39;}
div#error-code-page dt:after {bottom: 0; top: auto; background-color: #253b8f;}
div#error-code-page dd {display: flex; align-items: center; margin-top: 16px;}
div#error-code-page #tooltip {width: 18px; height: 18px; margin-left: 5px; background: url("/images/common/document/tooltip-icon.svg") center no-repeat;}
div#error-code-page #tooltip b {position: fixed; display: none; width: 275px; font-weight: 400; font-size: 13px; line-height: 1.38; letter-spacing: -0.03em; color: #282828; background-color: #f0f3fa; border-radius: 4px; padding: 9px 12px 7px; text-align: left;}
div#error-code-page #tooltip.over b {display: block;}
div#error-code-page #tooltip.over b:before {content: ''; position: absolute; bottom: 11px; left: -12px; width: 0; height: 0; border-top: solid 10px #eceff7; border-left: solid 7px transparent; border-right: solid 7px transparent; transform: rotate(90deg);}


article {width: 962px; border-radius: 10px; border: solid 1px #e5ecf5; margin: 22px 0 100px 250px; padding: 20px 40px 40px;}
article .preface {text-align: right;}
article .preface small {font-size: 13px; letter-spacing: 0.07px; color: #696969; display: inline-block; padding-left: 18px; background: url('/images/error-code/search/ic_mail.svg') left center no-repeat;}
article h1 {font-weight: 500; font-size: 20px; letter-spacing: -0.6px; color: #151515;}
article #keyword-box {margin-top: 15px; position: relative; width: 442px;}
article #keyword-box input {width: 100%; height: 46px; border-radius: 5px; border: solid 1px #dbdef0; background-color: #fff; font-size: 16px; letter-spacing: -0.48px; color: #333; padding-left: 15px;}
article #keyword-box input::placeholder {color: #707070;}
article #keyword-box button {position: absolute; right: 16px; top: 50%; transform: translateY(-50%); background: url('/images/error-code/search/ic_search.svg') no-repeat; width: 16px; height: 16px;}
article #mobile-filter {display: none; margin-right: 25px; width: 70px; height: 30px; border-radius: 15px; border: solid 1px #151515; font-size: 16px; letter-spacing: -0.48px; color: #151515; text-align: center; padding: 0 0 3px 20px; background: url('/images/error-code/search/ic_filter.svg') 10px center no-repeat; background-size: 16px 16px; }
article .error-list-btn-container {margin-top: 30px; display: flex; align-items: center;}
article .error-list-btn-container #download-excel {width: 140px; height: 36px; border: solid 1px #ced2db; border-radius: 2px; background: url('/images/error-code/search/ic_excel.webp') 10px center no-repeat #fafafa; background-size: 16px 16px; font-size: 13px; color: #111; text-align: left; padding-left: 30px; position: relative;}
article .error-list-btn-container #download-excel:after {content: ''; background: url('/images/error-code/search/ic_download.svg') no-repeat; display: inline-block; width: 10px; height: 12px; position: absolute; right: 10px; top: 50%; transform: translateY(-50%);}
article .error-list-btn-container .pagination-wrapper {margin-left: auto; display: flex;}
article .error-list-btn-container .pagination-wrapper .page-number {display: flex; font-size: 15px; color: #748093; align-items: center;}
article .error-list-btn-container .pagination-wrapper .page-number .current {font-weight: 700; color: #1a56e9;}
article .error-list-btn-container .pagination-wrapper .btn-group {display: flex; height: 30px; border: solid 1px #ced2db; border-radius: 2px; margin-left: 12px;}
article .error-list-btn-container .pagination-wrapper .btn-group button {background: url('/images/common/ic_right-arrow.svg') center no-repeat; transform: scaleX(-1); width: 30px;}
article .error-list-btn-container .pagination-wrapper .btn-group button ~ button {border-left: solid 1px #ced2db; transform: scaleX(1);}
article .error-list-btn-container .pagination-wrapper select {border: solid 1px #ced2db; border-radius: 2px; font-size: 15px; color: #111; width: 91px; height: 30px; margin-left: 26px; padding-left: 10px;}

article .error-list-container {padding: 0; margin-top: 15px;}
article .error-list-container ul.thead {border-top: solid 1px #a7adc3; height: 40px; background-color: #fcfcfd;}
article .error-list-container ul.thead li {display: flex; align-items: center; height: 100%;}
article .error-list-container ul.thead li div {font-size: 15px; color: #222;}
article .error-list-container ul.thead li .item {width: 17%; text-align: center;}
article .error-list-container ul.thead li .code {width: 20%; text-align: center;}
article .error-list-container ul.thead li .message {width: 63%; text-align: center;}

article .error-list-container ul.tbody {border-bottom: solid 1px #a7adc3;}
article .error-list-container ul.tbody li {display: grid; grid-template-areas: "item code message arrow" "desc desc desc desc"; grid-template-columns: 17% 20% auto 7%; align-items: center; border-top: solid 1px #dee1e8; min-height: 49px; padding: 14px 0;}
article .error-list-container ul.tbody li:hover {background-color: #dee1e8;}
article .error-list-container ul.tbody li.empty {height: calc(100vh - 558px); background: none; place-items: center; font-size: 15px; grid-template-areas: "empty"; grid-template-columns: auto; grid-template-rows: auto;}
article .error-list-container ul.tbody li div {color: #111; font-size: 15px; line-height: 1.35;}
article .error-list-container ul.tbody li .item {grid-area: item; text-align: center;}
article .error-list-container ul.tbody li .code {grid-area: code; text-align: center;}
article .error-list-container ul.tbody li .message {grid-area: message; text-align: left; padding-left: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
article .error-list-container ul.tbody li .description {grid-area: desc; display: none;}
article .error-list-container ul.tbody li.clickable {cursor: pointer;}
article .error-list-container ul.tbody li.clickable:after {content: ''; grid-area: arrow; display: block; width: 10px; height: 6px; background: url(/images/error-code/search/icon_arrow.svg) center no-repeat; justify-self: center; margin-top: 8px;}
article .error-list-container ul.tbody li.clickable.active {background-color: #f4f5f7;}
article .error-list-container ul.tbody li.clickable.active:after {background-image: url(/images/error-code/search/icon_arrow_active.svg);}
article .error-list-container ul.tbody li.clickable.active .description {display: block;}
article .error-list-container ul.tbody li.clickable.active > div {font-size: 16px; font-weight: 500; word-break: break-all; white-space: initial;}
article .error-list-container ul.tbody li.clickable.active > div.description {height: auto; font-weight: 400; padding: 20px 3% 0; line-height: 1.125;}
article .error-list-container ul.tbody li.clickable > div.description * {color: #111; font-size: 15px; line-height: 1.35;}
article .error-list-container ul.tbody li.clickable > div.description a {color: rgb(77, 100, 228); display: inline-block; padding-right: 18px; position: relative; margin-right: 3px;}
article .error-list-container ul.tbody li.clickable > div.description a:after {content: ''; background: url(/images/common/document/icon_goto_link_arrow.png) center no-repeat; background-size: contain; position: absolute; top: -2px; right: 0; width: 15px; height: 100%;}

@media (max-width: 1720px) {
	main form:after {width: 15vw;}
}
@media (max-width: 1480px) {
	main form:after {content: none;}
}
@media (max-width: 1250px) {
	header {height: 110px;}
	div#error-code-page {top: 110px; height: calc(100vh - 110px);}
	article {min-width: auto; width: calc(100% - 260px); margin-right: 10px;}
}
@media (max-width: 980px) {
	header {height: 63px;}
	div#error-code-page {top: 63px; width: 24.5%; min-width: 180px; height: calc(100vh - 63px);}
	div#error-code-page 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) {
	article .error-list-container ul.thead {display: none;}
	article .error-list-container ul.tbody li {grid-template-areas: "item code" "message message" "desc desc"; grid-template-columns: 50% 50%; grid-template-rows: auto; grid-row-gap: 10px; padding: 14px 0 9px;}
	article .error-list-container ul.tbody li:hover {background-color: transparent;}
	article .error-list-container ul.tbody li.clickable {cursor: initial;}
	article .error-list-container ul.tbody li.clickable:after {content: none;}
	article .error-list-container ul.tbody li .item {font-weight: 500; color: #707070; letter-spacing: -0.75px; padding: 0 10px; text-align: left;}
	article .error-list-container ul.tbody li .code {text-align: left; padding: 0 10px; font-weight: 500; color: #333; letter-spacing: -0.45px;}
	article .error-list-container ul.tbody li .message {color: #333; letter-spacing: -0.45px; padding: 0 10px; font-weight: 500; font-size: 16px; text-wrap: wrap;}
	article .error-list-container ul.tbody li .description {display: block; padding: 10px; font-weight: 400; color: #333; letter-spacing: -0.45px; font-size: 13px; line-height: 18px; height: auto;}
	article .error-list-container ul.tbody li .description * {line-height: inherit; font-size: 13px;}
	article .error-list-container ul.tbody li.clickable.active {background-color: transparent;}
	article .error-list-container ul.tbody li.clickable.active > div.item {font-size: 15px;}
	article .error-list-container ul.tbody li.clickable.active > div.code {font-size: 15px;}
	article .error-list-container ul.tbody li.clickable.active > div.message {font-size: 16px;}
	article .error-list-container ul.tbody li.clickable.active > div.description {padding: 10px; line-height: 18px;}
	article .error-list-container ul.tbody li.clickable > div.description * {font-size: 13px;}
}
@media (max-width: 756px) {
	article {margin-left: 190px;}
}
@media (max-width: 740px) {
	html.scroll-stop {overflow-y: hidden;}
	div#error-code-page {left: -315px;}
	article {margin-left: 10px; width: calc(100% - 20px);}
	article #keyword-box {width: 100%;}
	article #mobile-filter {display: block;}
	article .mobile-shown-btn button {display: block;}
	article .error-list-btn-container #download-excel {display: none;}
	article .error-list-btn-container .pagination-wrapper select {display: none;}
	div#error-code-page div {padding: 0 20px;}
	div#error-code-page div:first-of-type {height: 63px; min-height: auto;}
	div#error-code-page div:first-of-type label {margin-left: 0;}
	div#error-code-page dl {width: 100%;}
	div#error-code-page dt {font-size: 14px;}
	div#error-code-page dt:before {top: 1px;}
	div#error-code-page dt:after {bottom: -1px;}
	div#error-code-page dd {margin-top: 10px;}
	div#error-code-page div:first-of-type {background: #a6adc5; padding-bottom: 10px; padding-top: 10px; align-items: center;}
	div#error-code-page p {background-image: none; padding-left: 0; font-weight: 700; font-size: 18px; color: #fff;}
	div#error-code-page #closeBtn {display: block;}
	main.mobile-active div#error-code-page input {order: 2; margin-left: auto; width: 24px; height: 24px;}
	main.mobile-active div#error-code-page label {order: 1; font-size: 16px;}
	main.mobile-active:before {content: ''; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.5); z-index: 10000;}
	main.mobile-active div#error-code-page {top: 0; left: 0; height: 100dvh; z-index: 10001; background-color: #fff; width: 80%; border-right: none; transition: left 0.2s;}
}
@media (max-width: 500px) {
	header {height: 53px;}
	div#error-code-page div:first-of-type {height: 53px;}
	article {border: none; margin: 0; flex-grow: 1; padding: 15px;}
	article .preface small {display: none;}
}
@media (max-width: 340px) {
}