/* font */
@font-face {
    font-family: 'paybooc';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-07@1.0/paybooc-ExtraBold.woff') format('woff');
    font-weight: 800;
    font-style: normal;
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url('../../static/fonts/pretendard/Pretendard-SemiBold.woff2') format('woff2'), url('../../assets/fonts/pretendard/Pretendard-SemiBold.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url('../../static/fonts/pretendard/Pretendard-Medium.woff2') format('woff2'), url('../../assets/fonts/pretendard/Pretendard-Medium.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url('../../static/fonts/pretendard/Pretendard-Regular.woff2') format('woff2'), url('../../assets/fonts/pretendard/Pretendard-Medium.woff') format('woff');
}

/* reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
html {
font-size: 16px;
}
body {
line-height: 1;
font-family: 'Pretendard', '맑은 고딕', sans-serif;
color: #212121;
}
ol, ul {
list-style: none;
}
blockquote, q {
quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
a {
text-decoration: none;
}
strong {
font-weight: 600;
}
button {
border: 0;
background: none;
font-family: "Pretendard", sans-serif;
}


header {width: 100%; height: 80px; display: flex; align-items: center; background: #fff; box-sizing: border-box;}
header .header-container {width: 1000px; margin: 0 auto;}
header .logo {display: block; width: 218px;}
.content {width: 1000px; padding: 40px 40px 50px; margin: 0 auto; color: #606060; letter-spacing: -.45px; line-height: 1.45;}
.page-title {margin-bottom: 2rem; display: flex; justify-content: space-between; align-items: center;}
h1 {color: #212121; font-family: 'paybooc', 'Pretendard', '맑은 고딕', sans-serif; font-size: 2rem; font-weight: 800;}
h2 {color: #212121; font-family: 'paybooc', 'Pretendard', '맑은 고딕', sans-serif; font-size: 1.0625rem; font-weight: 800; letter-spacing: -1px; margin-bottom: 20px;}
h2:not(:first-of-type) {margin-top: 2rem;}
h2.title {font-size: 1.25rem; color: #212121;}
h2.title:not(:first-of-type) {margin-top: 4rem;}
hr {margin-bottom: 3.5rem; border: 0; border-top: 1px solid #e0e0e0;}
p:not(:last-child) {margin-bottom: 6px;}
a {color: #447bc4;}
.mt-1 {margin-top: .5rem;}
.mt-2 {margin-top: .75rem;}
.mt-3 {margin-top: 1rem;}
.mb-1 {margin-bottom: .5rem;}
.mb-2 {margin-bottom: .75rem;}
.mb-3 {margin-bottom: 1rem;}
.clearfix::after {display: block; content: ""; clear: both;}
.box {margin-bottom: 2rem; border: 1px solid #e0e0e0; background-color: #f5f5f5; padding: 1rem; border-radius: 4px; line-height: 1.35; color: #707070;}
.dropdown {width: 180px; position: relative;}
.dropdown button {display: block; width: 100%; position: relative; padding: .65rem .75rem; padding-right: 2rem; border: 1px solid #ccc; text-align: left; border-radius: 4px; font-size: .875rem; letter-spacing: -.5px; color: #606060; cursor: pointer;}
.dropdown button::after {position: absolute; content: ""; width: 0; height: 0; top: 1.125rem; right: .75rem; border-top: 6px solid #909090; border-bottom: 5px solid transparent; border-left: 5px solid transparent; border-right: 5px solid transparent;}
.dropdown .dropdown-menu {display: none; position: absolute; z-index: 10; width: 100%; margin-top: 4px; padding: .45rem 0; box-sizing: border-box; box-shadow: 2px 0px 12px rgba(125,125,125,0.25); border-radius: 4px; background-color: #fff;}
.dropdown .dropdown-menu li {height: 2.25rem; line-height: 2.25rem; margin-bottom: 0; padding: 0 .75rem; color: #707070; font-size: .875rem;}
.dropdown .dropdown-menu li:hover {background-color: #eef3fb;}
.dropdown .dropdown-menu a {display: block; color: #707070;}
.dropdown.active button::after {top: .875rem; transform: rotate(180deg);}
.dropdown.active .dropdown-menu {display: block;}
ol {margin-left: 1rem;}
ol ol {margin-top: 4px; margin-left: 0;}
ol li p:first-of-type {text-indent: -1rem;}
ol li ol li p:first-of-type {text-indent: 0;}
li:not(:last-of-type) {margin-bottom: 4px;}
ul:not(.dropdown-menu) li {position: relative; padding-left: 10px;}
ul:not(.dropdown-menu) li::before {position: absolute; content: ""; left: 0; top: 7px; width: 4px; height: 4px; border-radius: 10px; background-color: #c0c0c0;}
ul+p, ol+p {margin-top: 5px;}
table {width: 100%; margin: 10px 0 20px; border-top: 1px solid #999;}
table th, table td {color: #606060; vertical-align: middle; font-size: .875rem;}
table th:not(:last-child), table td:not(:last-child) {border-right: 1px solid #ccc;}
table th {background: #f1f1f4; border-bottom: 1px solid #ccc; text-align: center; font-weight: 600; padding: .75rem;}
table td {text-align: center; padding: 8px; border-bottom: 1px solid #ccc;}

@media (max-width: 1200px) {
    header .header-container {width: 90%;}
    .content {width: 90%;}
}
@media (max-width: 768px) {
    body {font-size: 14px;}
    .content {padding: 30px 1rem 50px; box-sizing: border-box;}
    h1 {font-size: 1.75rem;}
}
@media (max-width: 576px) {
    header .header-container {width: 95%;}
    .content {width: 95%;}
    .page-title {display: block; margin-bottom: 1.5rem;}
    .page-title h1 {margin-bottom: 1rem;}
    .page-title .dropdown {width: 100%;}
}