/* 48px */ /* 32px */ /* 24px */ /* 20px */ /* 16px */ /* 16px */ * { margin: 0px; padding: 0px; -webkit-font-smoothing: antialiased; } *, ::before, ::after { box-sizing: inherit; } /* Chrome, Safari, Edge, Opera */ input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* Firefox */ input[type=number] { -moz-appearance: textfield; appearance: textfield; } .input_hidden { display: none; } a { cursor: pointer; } /* latin */ @font-face { font-family: "Eczar"; font-style: normal; font-weight: 700; font-display: swap; src: local("Eczar"), url(/fonts/Eczar.woff2), url(https://fonts.gstatic.com/s/eczar/v22/BXR2vF3Pi-DLmxcpJB-qbNTyTMDX-tmmrjgUC2daW2wr.woff2) format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* latin */ @font-face { font-family: "Roboto"; font-style: normal; font-weight: 400; font-display: swap; src: local("Roboto"), local("Roboto-Regular"), url(/fonts/RobotoRegular.woff2), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus input:-webkit-autofill, textarea:-webkit-autofill, textarea:-webkit-autofill:hover textarea:-webkit-autofill:focus, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus { border: none; -webkit-text-fill-color: inherit !important; -webkit-box-shadow: 0 0 0px 1000px #FFFFFF inset; transition: background-color 5000s ease-in-out 0s; } html { box-sizing: border-box; height: 100%; width: 100%; } body { overflow-x: hidden; overflow-y: auto; pointer-events: auto; height: 100%; width: 100%; display: flex; flex-direction: column; height: 100vh; /* IE 10-11 bug */ } body > div, body > footer { flex-shrink: 0; /* Chrome flex-shrink bug */ } /* for reference, inputs should always be written this way: <input id=radio-demo name=radio-demo type=radio value=yes><label for=radio-demo>yes</label> */ /* remove standard-styles */ input { -webkit-appearance: none; -moz-appearance: none; appearance: none; border: none; border-radius: 0; font-size: 1em; width: 100%; } /* graceful degradation for ie8 */ input[type=checkbox], input[type=radio] { width: auto; -webkit-appearance: none; appearance: none; display: none; float: left; margin-right: 0.75em; background: transparent; border: none; } input[type=checkbox]:checked, input[type=checkbox]:not(:checked), input[type=radio]:checked, input[type=radio]:not(:checked) { background: transparent; position: relative; visibility: hidden; margin: 0; padding: 0; } input[type=checkbox] + label, input[type=radio] + label { cursor: pointer; } input[type=checkbox]:checked + label::before, input[type=checkbox]:not(:checked) + label::before, input[type=radio]:checked + label::before, input[type=radio]:not(:checked) + label::before { content: " "; display: inline-block; width: 14px; height: 14px; position: relative; top: 1px; border: 1px solid #bbb; background: white; margin-right: 7px; box-shadow: inset 0 1px 1px 0 rgba(0, 0, 0, 0.1); } input[type=radio]:checked + label::before, input[type=radio]:not(:checked) + label::before { border-radius: 30px; } input[type=checkbox]:hover + label::before, input[type=radio]:hover + label::before { background: #ddd; box-shadow: inset 0 0 0 2px white; } input[type=checkbox]:checked + label::before, input[type=radio]:checked + label::before { background: #000428; box-shadow: inset 0 0 0 2px white; } input[type=text] { padding-left: 10px; } main { display: flex; flex: 1 0 auto; /* IE 10-100 bug */ flex-shrink: 0; width: 100%; flex-direction: column; overflow-y: hidden; } a { cursor: pointer; color: #000428; } a[href^=tel]:link, a[href^=tel]:visited, a[href^=tel]:hover { cursor: default; text-decoration: none; color: #000; } img { flex-shrink: 0; } @media only screen and (max-width: 837px) { a[href^=tel]:link, a[href^=tel]:visited, a[href^=tel]:hover { text-decoration: underline; color: #000428; } } i { cursor: pointer; } textarea:focus, input:focus, textarea, input { outline: none; -webkit-box-shadow: none; box-shadow: none; } header { display: flex; flex-direction: row; justify-content: space-between; height: 94px; flex-wrap: nowrap; max-width: 1080px; position: relative; } header > div { display: flex; flex-direction: column; height: 100%; justify-content: center; } header > div > a { display: flex; flex-direction: row; } header > div > a > span { width: 100%; height: 100%; max-width: 400px; } header > div > a > span > img { padding: 0px; margin: 0px; align-self: flex-start; display: flex; justify-content: center; flex-direction: column; } header > div > nav { display: flex; flex-direction: row; flex-wrap: nowrap; list-style-type: none; justify-content: flex-end; align-items: center; min-height: 54px; line-height: 54px; overflow: visible; } header > div > nav > .language-select-wrapper { position: relative; margin-right: 10px; cursor: pointer; display: flex; align-items: center; } header > div > nav > .language-select-wrapper > p { margin: 8px; z-index: 1; } header > div > nav > .language-select-wrapper > .language-select-dropdown { min-width: 180px; display: none; position: absolute; right: -4px; top: -4px; background-color: white; color: black; border-radius: 4px; box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8); z-index: 1002; transition: opacity 0.5s; -o-transition: opacity 0.5s; -ms-transition: opacity 0.5s; -moz-transition: opacity 0.5s; -webkit-transition: opacity 0.5s; opacity: 0; } header > div > nav > .language-select-wrapper > .language-select-dropdown > a { display: inline-block; flex-direction: row; width: 100%; line-height: 54px; font-size: 1em; color: #000428; padding-right: 10px; text-decoration: none; cursor: pointer; @border-radius (5px); } header > div > nav > .language-select-wrapper > .language-select-dropdown > a > img { width: 16px; height: 16px; position: relative; top: 2px; margin: 0px 10px; } header > div > nav > .language-select-wrapper > .language-select-dropdown > a:hover { color: #000428; background-color: #efefef; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } header > div > nav > .language-select-wrapper > p { color: #ffffff; } header > div > nav > .language-select-wrapper.selected .language-select-dropdown { opacity: 1; display: block; } header > div > nav > .language-select-wrapper.selected > p { color: #000428; } header > div > nav > a { display: flex; align-items: center; padding: 2.5px 5px; color: #ffffff; text-decoration: none; margin-left: 10px; white-space: nowrap; } header > div > nav > a > i { padding: 2.5px 0px; } header > div > nav > a:hover, header > div > nav > a.active { background-color: #ffffff; color: #000428; } header > div > nav#mobile_menu { display: none; } textarea:focus, input:focus { outline: none; } *:focus { outline: none; } h1, h2, h3, h4, h5, h6 { font-family: "Noto Serif KR", "Eczar", serif; font-weight: 100; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1 { font-size: 3em; } h2 { font-size: 2.5em; } h3 { font-size: 1.875em; } h4 { font-size: 1.5em; } h5 { font-size: 1.2em; } @media only screen and (max-width: 837px) { p, a, strong, label, input, li, address { font-size: 0.8rem; } header { padding: 10px 0px; height: 54px; } header div nav#desktop_menu { display: none; } header div nav#mobile_menu { pointer-events: auto; position: relative; display: flex; height: auto; padding: 0px; margin: 0px; } header div nav#mobile_menu #mobile_drawer_icon { display: flex; color: white; } header div nav#mobile_menu #mobile_drawer_icon p { margin-right: 10px; } header div nav#mobile_menu #mobile_flyout { overflow: hidden; position: fixed; top: 0; right: 0; background: #ffffff; z-index: 998; width: 100%; height: 100%; display: none; flex-direction: column; background: rgba(0, 0, 0, 0.375); } header div nav#mobile_menu #mobile_drawer_icon_close { display: flex; flex-direction: column; align-items: flex-end; min-height: 50px; justify-content: center; padding-right: 10px; } header div nav#mobile_menu #mobile_flyout_close { box-shadow: 0px 0px 100px black; overflow-y: scroll; position: fixed; top: 0; right: 0; background: #ffffff; z-index: 999; width: 80%; height: 100%; display: flex; flex-direction: column; overflow-y: auto; overflow-x: auto; pointer-events: auto; } header div nav#mobile_menu #mobile_flyout_close > a, header div nav#mobile_menu #mobile_flyout_close > div#language-select-wrapper { z-index: 1000; color: #ffffff; } header div nav#mobile_menu #mobile_flyout_close > a:hover, header div nav#mobile_menu #mobile_flyout_close > div#language-select-wrapper:hover { color: #000428 important; } header div nav#mobile_menu #mobile_flyout_close > .language-select-wrapper { position: relative; cursor: pointer; display: flex; flex-direction: row-reverse; align-items: center; } header div nav#mobile_menu #mobile_flyout_close > .language-select-wrapper > p { margin: 8px; z-index: 1; } header div nav#mobile_menu #mobile_flyout_close > .language-select-wrapper > .language-select-dropdown { opacity: 1; position: absolute; min-width: 180px; } header div nav#mobile_menu #mobile_flyout_close > .language-select-wrapper .language-select-dropdown { width: 100%; display: block; position: absolute; cursor: pointer; right: -4px; top: -4px; color: black; border-radius: 4px; opacity: 1; } header div nav#mobile_menu #mobile_flyout_close > .language-select-wrapper .language-select-dropdown > a { display: inline-block; flex-direction: row; width: 100%; font-size: 1em; color: #000428; padding-right: 10px; text-decoration: none; } header div nav#mobile_menu #mobile_flyout_close > .language-select-wrapper .language-select-dropdown > a > img { width: 16px; height: 16px; position: relative; top: 2px; margin: 0px 10px; } header div nav#mobile_menu #mobile_flyout_close > .language-select-wrapper:hover { color: #000428; background-color: #efefef; border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; } header div nav#mobile_menu #mobile_flyout_close > .language-select-wrapper:hover > p { color: #000428; } header div nav#mobile_menu #mobile_flyout_close > a { text-decoration: none; background-color: #ffffff; padding: 10px; padding-left: 20px; color: #333333; } header div nav#mobile_menu #mobile_flyout_close > a:hover { background-color: rgb(100, 181, 246); color: #ffffff; } header div nav#mobile_menu #mobile_flyout_close > a:active, header div nav#mobile_menu #mobile_flyout_close > a:focu { background-color: #000428; color: #ffffff; } header div > a > span > img { max-height: 32px; width: auto; } footer #footer-content { flex-direction: column; } #footer-content > section { padding: 0px; } h1 { font-size: 2.5em; } h2 { font-size: 1.875em; } h3 { font-size: 1.5em; } h4 { font-size: 1.2em; } h5 { font-size: 1em; } span { margin-left: 0px; } span > img { max-width: 100%; } } p, a, strong, label, input, li, address, dd, dl, dt, input, select, option { font-style: normal; font-size: 1em; -webkit-font-smoothing: antialiased; font-family: "Noto Serif KR", "Roboto", sans-serif; text-shadow: none; padding: 0px; line-height: 32px; font-size: 1.2rem; } select { padding: 5px; width: 100%; } option { font-size: 1em; } .flex { display: flex; flex-shrink: 0; } .input-field { width: 100%; display: flex; background-color: #ffffff; border: 1px solid #ffffff; padding-left: 20px; height: 40px; line-height: 40px; color: #555555; font-size: 1em; } .input-field:focus { background-color: transparent; color: #ffffff; } input::placeholder { color: #555555; font-size: 1em; text-overflow: ellipsis; } input:focus::placeholder { color: #ffffff; text-overflow: ellipsis; } .round-corners-all { -webkit-border-radius: 5px; -moz-border-radius: 5px; -ms-border-radius: 5px; border-radius: 5px; } .hero-shadow { -webkit-box-shadow: 0px 28px 42px -15px rgba(0, 0, 0, 0.71); -moz-box-shadow: 0px 28px 42px -15px rgba(0, 0, 0, 0.71); box-shadow: 0px 28px 42px -15px rgba(0, 0, 0, 0.71); } #header { width: 100%; padding: 0px 20px; display: flex; align-items: center; flex-direction: column; background-image: linear-gradient(135deg, #004e92 0px, #000428 1500px); color: #fff; } #header > div { width: 100%; display: flex; flex-direction: column; padding: 0px; max-width: 1080px; } .word-break { /* These are technically the same, but use both */ overflow-wrap: break-word; word-wrap: break-word; -ms-word-break: break-all; /* This is the dangerous one in WebKit, as it breaks things wherever */ /* Instead use this non-standard one: */ word-break: break-word; /* Adds a hyphen where the word breaks, if supported (No Blink) */ -ms-hyphens: auto; -moz-hyphens: auto; -webkit-hyphens: auto; hyphens: auto; } .clickable { cursor: pointer; } .noselect { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */ } footer { flex-shrink: 0; width: 100%; display: flex; align-items: center; flex-direction: column; background-image: linear-gradient(135deg, #004e92 0px, #000428 1500px); color: #fff; } footer > #fp-footer-container { max-width: 1080px; justify-content: flex-start; display: flex; margin: 20px; } footer > #fp-footer-container > #fp-footer { display: block; } footer #footer-content { display: flex; flex-direction: row; width: 100%; justify-content: flex-start; margin: 20px; max-width: 1080px; padding: 40px 0px; } footer #footer-content > section { padding: 0px; display: flex; flex-direction: column; } footer #footer-content > section a { color: #ffffff; text-decoration: none; margin-left: 10px; padding: 2.5px 10px; white-space: nowrap; } footer #footer-content > section a:hover { background-color: #ffffff; color: #000428; } .has-error { color: #e20000; text-align: right; } .has-error p, .has-error label { font-size: 1em; text-shadow: none; } .help-block.has-error { font-size: 0.8em; padding: 0px !important; margin: 10px 0px; background-color: #ffe3e3; border-radius: 5px; color: #e20000; font-weight: bold; border: 1px solid #ffa6a6; } .help-block.has-error p { padding: 10px 20px; margin: 0px; } .help-block.has-error p strong, .help-block.has-error p a { font-size: inherit; } .green-action { cursor: pointer; font-weight: bold; color: #ffffff; border: solid 1px #538312; background: linear-gradient(#7db72f, #4e7d0e); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); } .green-action p { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); font-weight: bold; } a.green-action { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) !important; } .green-action:hover { background: #538018; background: -webkit-gradient(linear, left top, left bottom, from(#6b9d28), to(#436b0c)); background: -moz-linear-gradient(top, #6b9d28, #436b0c); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#6b9d28", endColorstr="#436b0c"); background-color: #538018; color: #ffffff; } .green-action:active { color: #a9c08c; background: -webkit-gradient(linear, left top, left bottom, from(#4e7d0e), to(#7db72f)); background: -moz-linear-gradient(top, #4e7d0e, #7db72f); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#4e7d0e", endColorstr="#7db72f"); } .blue-action { cursor: pointer; display: flex; font-weight: bold; color: #d9eef7; border: solid 1px #0076a3; background: #0095cd; background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); } .blue-action p { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3); font-weight: bold; white-space: nowrap; } a.blue-action { text-shadow: 0 1px 1px rgba(0, 0, 0, 0.3) !important; } .blue-action:hover { background: #007ead; background: -webkit-gradient(linear, left top, left bottom, from(#0095cc), to(#00678e)); background: -moz-linear-gradient(top, #0095cc, #00678e); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0095cc", endColorstr="#00678e"); color: #ffffff; } .blue-action:active { color: #80bed6; background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee)); background: -moz-linear-gradient(top, #0078a5, #00adee); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#0078a5", endColorstr="#00adee"); } .red-action { color: #faddde; border: solid 1px #980c10; background: #d81b21; background: -webkit-gradient(linear, left top, left bottom, from(#ed1c24), to(#aa1317)); background: -moz-linear-gradient(top, #ed1c24, #aa1317); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ed1c24", endColorstr="#aa1317"); } .red-action:hover { color: #ffffff; background: #b61318; background: -webkit-gradient(linear, left top, left bottom, from(#c9151b), to(#a11115)); background: -moz-linear-gradient(top, #c9151b, #a11115); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#c9151b", endColorstr="#a11115"); } .red-action:active { color: #de898c; background: -webkit-gradient(linear, left top, left bottom, from(#aa1317), to(#ed1c24)); background: -moz-linear-gradient(top, #aa1317, #ed1c24); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#aa1317", endColorstr="#ed1c24"); } .change-language-image-sm { width: 16px; height: 16px; } #logout-form { display: none; } .drop_files { overflow: scroll; padding: 5px; display: flex; flex-direction: column; width: 100%; background: #717070; align-items: center; justify-content: center; margin-bottom: 10px; border-radius: 3px; cursor: pointer; } .drop_files p { display: flex; line-height: 1; font-family: sans-serif; max-width: 300px; color: white; text-shadow: 0px 0px 1px black; font-weight: bold; font-size: 12px; } .drop_files .drop_files_msg { font-size: 14px; } @keyframes skeleton-loading { 0% { background-color: hsl(200, 20%, 80%); } 100% { background-color: hsl(200, 20%, 95%); } } .border-hover:hover { box-shadow: 0px 0px 0px #288aaa inset; } /*# sourceMappingURL=main.css.map */ i.material-icons.menu.white { height: 32px; width: 32px; background-size: 100%; background-image: url("data:image/svg+xml;charset=utf-8;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2aWV3Qm94PSIwIDk2IDk2MCA5NjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZD0iTTEwNSA4NDF2LTkxaDc1MHY5MUgxMDVabTAtMjE5di05MWg3NTB2OTFIMTA1Wm0wLTIyMHYtOTJoNzUwdjkySDEwNVoiIHN0eWxlPSJmaWxsOiByZ2IoMjU1LCAyNTUsIDI1NSk7Ii8+Cjwvc3ZnPg=="); } i.material-icons.close { height: 32px; width: 32px; background-size: 100%; background-image: url("data:image/svg+xml;charset=utf-8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iNDgiIHZpZXdCb3g9IjAgOTYgOTYwIDk2MCIgd2lkdGg9IjQ4Ij48cGF0aCBkPSJtMjQ5IDg3MC02My02MyAyMzEtMjMxLTIzMS0yMzAgNjMtNjQgMjMxIDIzMCAyMzEtMjMwIDYzIDY0LTIzMCAyMzAgMjMwIDIzMS02MyA2My0yMzEtMjMwLTIzMSAyMzBaIi8+PC9zdmc+"); }