@charset "UTF-8";

/* =========== mmenu 기본 설정 =========== */
:root { --color-primary: #5888aa; --color-callout: #fad188; --color-text: #fff; --color-dark-bg: #2a6787; --color-dark-border: #2a6787; --color-light-bg: rgb(255 255 255 / 15%); --color-light-border: rgb(255 255 255 / 60%); --color-gold: #ffda71; --color-silver: #ced0ca; --color-bronze: #bba6a2; --section-padding: clamp(85px, 15vw, 150px); --container-padding: clamp(15px, 4vw, 30px); }
.high-contrast { --color-primary: #265d79; --color-callout: #fff; --color-dark-bg: #22526c; --color-dark-border: #22526c; --color-light-bg: #fff; --color-light-border: #fff; }
*, *:before, *:after { -webkit-box-sizing: border-box; box-sizing: border-box; }
html, body, [id] { scroll-margin-top: 50px; }
body { min-height: 100vh; font-size: 1.8rem; line-height: 22px; color: #666; background-color: #fff; -webkit-text-size-adjust: none; }
h1, h2, h3, h4, h5, h6 { font-size: 130%; }
a { color: inherit; /* text-decoration: underline; */ }
body { --mm-min-size: 190px; }
#menu:not(.mm-menu):not(.mm) { display: none; }
#header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: space-between; position: -webkit-sticky; position: sticky; top: 0; z-index: 10; height: 70px; font-size: 1.8rem; font-weight: 400; color: #fff; }
#header a { -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 50%; right: 0; width: 50px; height: 50px; text-decoration: none; }
#header a[href="#menu"] { display: -webkit-box; display: -ms-flexbox; display: flex; }
.mm-wrapper--opened #header a[href="#menu"] { display: none; }
#header a[href="#page"] { display: none; }
.mm-wrapper--opened #header a[href="#page"] { display: -webkit-box; display: -ms-flexbox; display: flex; }
/* #content { position: relative; padding: 125px 50px 50px 50px; text-align: center; } */



/* width: 100%; height: 100%; max-height: 90px; background: #00000040; backdrop-filter: blur(24px); position: fixed; top: 0; z-index: 999; transition: background-color 0.3s; -webkit-backdrop-filter: blur(24px); */







/* ==============  mmenu_레이아웃  ================ */
:root { --header-color: #666; }

#header 

#header .logo { display: block; }
#header .logo a { width: 100%; height: 100%; position: unset; }

#header .header-right {width: auto; display: flex; align-items: center; gap: 10px; }
#header .toggle-container { height: 38px;}
#header .dark-light-toggle { width: 38px; height: 38px; }
#header .dark-light-toggle > div { width: 100%; height: 100%; }

#menu .fa-solid, #page .fa-solid { position: unset; transform: translateY(0) ; font-size: 3.4rem; color: #fff; }


/* display: flex; justify-content: center; gap: 20px; margin-top: 20px;  */
.social { display: flex; justify-content: center; }
.social a { display: flex; justify-content: center; flex-basis: unset; flex-grow: unset; } /* 왜 unset으로 하면 내가 원하는대로 작동할까? */
.social a i { display: inline-block; font-size: 1.8rem; color: #fff; }

/* .mm-btn--next:after { border: 2px solid #fff !important; } */
.suB_m.mm-listview > .mm-listitem::after { inset-inline-start: 10px;}

.download { width: 90%; border: none; margin: 20px auto !important; }
.download .pdfDownload {padding: 25px 0; background: #ffcc00; display: flex; justify-content: center; border: none; font-size: 1.8rem; font-weight: 700; border-radius: 20px; margin-top: 0 !important; color: #000 !important;}
.download.mm-listitem::after { border-bottom: none; display: none; position: none;}
/* content: ""; border-color: inherit; border-bottom-width: 1px; border-bottom-style: solid; display: block; position: absolute; inset-inline-start: 20px; inset-inline-end: 20px; bottom: 0 */