/* 초기화 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;500;700;900&display=swap');

html{min-width:320px;overflow-y:scroll}
body{min-width:320px;margin:0;padding:0;font-size:0.75em;font-family:'Noto Sans KR', dotum, sans-serif;background:#fff}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Noto Sans KR', dotum, sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}
ol,ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:'Noto Sans KR', dotum, sans-serif;font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}
textarea, select {font-family:'Noto Sans KR', dotum, sans-serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}
input, textarea, button { appearance: none; -moz-appearance: none; -webkit-appearance: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; }
*, :after, :before { -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box; }


#wrap { width: 100%; height: 100%; min-height: 100vh; background: #fcfcfc; }
.inner { width: 90%; max-width: 1024px; margin: 0 auto; padding: 50px 0; }
.main { text-align: center; }
.main h1 { font-size: 30px; font-weight: 700; color: #222; }
.main ul { display: flex; justify-content: space-around; margin-top: 50px; }
.main ul > li { width: 300px; margin-right: 10px; }
.main ul > li:last-of-type { margin-right: 0; }
.main ul > li .title { position: relative; display: block; font-size: 20px; font-weight: 700; color: #fff; line-height: 65px; padding: 0 25px; }
.main ul > li:nth-of-type(1) .title { background: #00ab91; }
.main ul > li:nth-of-type(2) .title { background: #005dea; }
.main .sub_link li { position: relative; margin-top: 20px; }
.main .sub_link li::before { position: absolute; left: 50%; top: -20px; width: 1px; height: 20px; background: #cccccc; content: ''; display: block; }
.main .sub_link li a { display: block; font-size: 15px; font-weight: 500; color: #333; line-height: 65px; background: #e6e6e6; padding: 0 25px; }


@media screen and (max-width: 1024px) {
    .inner { padding: 30px 0 50px; }
    .main { text-align: left; }
    .main h1 { font-size: 24px; }
    .main ul { flex-direction: column; align-items: center; margin-top: 0; }
    .main ul > li { width: 100%; margin-right: 0; margin-top: 30px; }
    .main ul > li .title { font-size: 18px; line-height: 56px; }
    .main .sub_link li { margin-top: 0; }
    .main .sub_link li::before { display: none; }
    .main .sub_link li a { font-size: 14px; line-height: 56px; background: #f3f3f3; border-bottom: 1px solid #e6e6e6; }
}