/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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, input, button, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; box-sizing: border-box; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } 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; } button { background-color: transparent; } /* reset end */ :root { --link-color: #004AD6; --HD_Discovery_Blue: #002F87; --HD-Trust-Blue: #172451; --HD_Green1: #38D430; --HD_Green2: #00AE42; --HD_Green3: #00823D; --Black: #000000; --Black9: #101820; --Black4: #333447; --Black3: #393939; --Black2: #6A6A6A; --Black1: #D0D0D0; --White: #fff; --Red1: #E52F2F; --Yellow1: #E88740; --text-primary: #141C24; --text-secondary: #344051; --text-tertiary: #637083; --font-primary: 'HD'; --font-secondary: 'Pretendard'; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; font-family: var(--font-primary); color: var(--text-primary); font-weight: 400; } a { text-decoration: none; color: var(--text-primary); } input, textarea, select { font-family: var(--font-primary); } .hd-input, .hd-select { border: 1px solid #97A1AF; width: 100%; border-radius: 6px; padding: 0 10px; font-size: 12px; color: var(--text-secondary); outline: none; height: 30px; background: var(--White); } .hd-select { -o-appearance: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' viewBox='0 0 21 20' fill='none'%3E%3Cpath d='M16.083 7.5L10.9568 12.6262C10.5663 13.0167 9.93309 13.0167 9.54257 12.6262L4.41634 7.49999' stroke='%23637083' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") calc(100% - 8px) center no-repeat #fff; } .hd-textarea-wrap { border: 1px solid #97A1AF; width: 100%; border-radius: 6px; overflow: hidden; background: var(--White); } .hd-textarea { display: block; width: 100%; padding: 10px; height: auto; line-height: 19px; outline: none; resize: none; font-size: 12px; border: 0; height: 100%; color: var(--text-secondary); } .hd-input::placeholder { color: #97A1AF; font-weight: 300; } .hd-input:focus { border: 1px solid var(--HD_Green3); } .hd-input.readonly { border: 1px solid #CED2DA; background: #F2F4F7; } .hd-input.datepicker { padding-right: 35px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M16.6663 8.33333V6.16667C16.6663 5.0621 15.7709 4.16667 14.6663 4.16667H5.33301C4.22844 4.16667 3.33301 5.0621 3.33301 6.16667V8.33333M16.6663 8.33333V15.5C16.6663 16.6046 15.7709 17.5 14.6663 17.5H5.33301C4.22844 17.5 3.33301 16.6046 3.33301 15.5V8.33333M16.6663 8.33333H3.33301M6.66634 2.5V5.83333M13.333 2.5V5.83333' stroke='%23637083' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E") calc(100% - 7px) center no-repeat #fff; } .hd-radio { display: none; } .hd-radio+label { padding-left: 28px; position: relative; font-size: 14px; color: var(--text-secondary); } .hd-radio+label::before { content: ''; width: 20px; height: 20px; border-radius: 20px; position: absolute; left: 0; top: -4px; background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.75 10C0.75 4.89137 4.89137 0.75 10 0.75C15.1086 0.75 19.25 4.89137 19.25 10C19.25 15.1086 15.1086 19.25 10 19.25C4.89137 19.25 0.75 15.1086 0.75 10Z' fill='white'/%3E%3Cpath d='M0.75 10C0.75 4.89137 4.89137 0.75 10 0.75C15.1086 0.75 19.25 4.89137 19.25 10C19.25 15.1086 15.1086 19.25 10 19.25C4.89137 19.25 0.75 15.1086 0.75 10Z' stroke='%23CED2DA' stroke-width='1.5'/%3E%3C/svg%3E%0A"); } .hd-radio:checked+label::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M0.75 10C0.75 4.89137 4.89137 0.75 10 0.75C15.1086 0.75 19.25 4.89137 19.25 10C19.25 15.1086 15.1086 19.25 10 19.25C4.89137 19.25 0.75 15.1086 0.75 10Z' fill='white'/%3E%3Cpath d='M0.75 10C0.75 4.89137 4.89137 0.75 10 0.75C15.1086 0.75 19.25 4.89137 19.25 10C19.25 15.1086 15.1086 19.25 10 19.25C4.89137 19.25 0.75 15.1086 0.75 10Z' stroke='%2300AE42' stroke-width='1.5'/%3E%3Ccircle cx='10' cy='10' r='6' fill='%2300AE42'/%3E%3C/svg%3E"); } .hd-input-file { display: flex; align-items: center; gap: 0 6px; } .hd-input-file .hd-input { width: 200px; height: 30px; } .hd-input-file label { border: 1px solid #CED2DA; height: 30px; line-height: 28px; border-radius: 6px; padding: 0 10px; font-size: 12px; background: var(--White); cursor: pointer; } .hd-input-file input[type=file] { display: none; } .hd-input-file .upload { width: 100px; height: 30px; border-radius: 6px; text-align: center; line-height: 30px; background: var(--text-tertiary); font-size: 12px; color: var(--White); font-weight: 300; cursor: pointer; } .hd-checkbox { display: none; } .hd-checkbox+label { font-size: 12px; color: #000; position: relative; padding-left: 22px; } .hd-checkbox+label::before { content: ''; width: 16px; height: 16px; border-radius: 3px; border: 1px solid #000; background: #fff; position: absolute; left: 0; top: -3px; box-sizing: border-box; } .hd-checkbox:checked+label::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Crect x='0.5' y='0.5' width='15' height='15' rx='2.5' fill='%2300AE42' stroke='%2300AE42'/%3E%3Cpath d='M12 5.60001L6.92308 10.4L4 7.61819' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); border: 0; } /*스크롤*/ .scroll { overflow: overlay; } .scroll::-webkit-scrollbar { width: 3px; } .scroll::-webkit-scrollbar-track { background-color: #fff; } .scroll::-webkit-scrollbar-thumb { border: 0px solid transparent; background-color: #CED2DA; background-clip: content-box; } /* datepicker */ #ui-datepicker-div { font-size: 0.85em !important; } .ellipsis-line1 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-overflow: ellipsis; } .ellipsis-line2 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; } .ellipsis-line3 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis; } .ellipsis-line4 { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; text-overflow: ellipsis; } .w-100 { width: 100% !important; } .d-flex { display: flex !important; } .flex-center { justify-content: center !important; align-items: center !important; } .flex-wrap { flex-wrap: wrap !important; } .flex-ac { align-items: center !important; } .flex-as { align-items: flex-start !important; } .flex-ae { align-items: flex-end !important; } .flex-js { justify-content: flex-start !important; } .flex-je { justify-content: flex-end !important; } .flex-jc { justify-content: center !important; } .flex-jsb { justify-content: space-between !important; } .flex-col { flex-direction: column !important; } .flex-0-0 { flex: 0 0 auto !important; } .flex-1-1 { flex: 1 1 auto !important; } .flex-0-1 { flex: 0 1 auto !important; } .flex-1-0 { flex: 1 0 auto !important; } .mx-auto { margin-left: auto !important; margin-right: auto !important; } .tar { text-align: right !Important; } .tal { text-align: left !Important; } .tac { text-align: center !Important; } @media screen and (min-width: 769px) { hr.line { width: 100%; background: #E4E7EC; height: 1px; border: 0; } .w-lg-100 { width: 100% !important; } .d-lg-flex { display: flex !important; } .flex-lg-center { justify-content: center !important; align-items: center !important; } .flex-lg-wrap { flex-wrap: wrap !important; } .flex-lg-ac { align-items: center !important; } .flex-lg-as { align-items: flex-start !important; } .flex-lg-ae { align-items: flex-end !important; } .flex-lg-js { justify-content: flex-start !important; } .flex-lg-je { justify-content: flex-end !important; } .flex-lg-jc { justify-content: center !important; } .flex-lg-jsb { justify-content: space-between !important; } .flex-lg-col { flex-direction: column !important; } .flex-lg-0-0 { flex: 0 0 auto !important; } .flex-lg-1-1 { flex: 1 1 auto !important; } .flex-lg-0-1 { flex: 0 1 auto !important; } .flex-lg-1-0 { flex: 1 0 auto !important; } .mx-lg-auto { margin-left: auto !important; margin-right: auto !important; } } @media screen and (max-width: 768px) { hr.line { width: calc(100% - 56px); background: #E4E7EC; height: 1px; border: 0; margin: 0 auto; } .pc { display: none !important; } .w-xs-100 { width: 100% !important; } .d-xs-flex { display: flex !important; } .flex-xs-center { justify-content: center !important; align-items: center !important; } .flex-xs-wrap { flex-wrap: wrap !important; } .flex-xs-ac { align-items: center !important; } .flex-xs-as { align-items: flex-start !important; } .flex-xs-ae { align-items: flex-end !important; } .flex-xs-js { justify-content: flex-start !important; } .flex-xs-je { justify-content: flex-end !important; } .flex-xs-jc { justify-content: center !important; } .flex-xs-jsb { justify-content: space-between !important; } .flex-xs-col { flex-direction: column !important; } .flex-xs-0-0 { flex: 0 0 auto !important; } .flex-xs-1-1 { flex: 1 1 auto !important; } .flex-xs-0-1 { flex: 0 1 auto !important; } .flex-xs-1-0 { flex: 1 0 auto !important; } .mx-xs-auto { margin-left: auto !important; margin-right: auto !important; } } /* ====================== 버튼 ====================== */ .btn-wrap { display: flex; align-items: center; gap: 0 10px; } .button { min-width: 100px; height: 36px; padding: 10px 16px 8px; display: flex; justify-content: center; align-items: center; font-size: 14px; border-radius: 6px; line-height: 1; cursor: pointer; } .button.submit { background: var(--HD_Green2); border: 1px solid var(--HD_Green2); color: var(--White); } .button.reset { color: var(--text-tertiary); border: 1px solid #CED2DA; background: #fff; } .button.gray { background: var(--text-tertiary); color: #fff; } .button-sm { min-width: 100px; height: 30px; padding: 8px; display: flex; justify-content: center; align-items: center; font-size: 12px; color: var(--White); border-radius: 6px; line-height: 1; cursor: pointer; } .button-sm.green { background: var(--HD_Green2); } .button-sm.gray { background: var(--text-tertiary); } .button-save { padding-top: 1px; cursor: pointer; width: 100%; height: 24px; display: flex; justify-content: center; align-items: center; background: var(--text-tertiary); border-radius: 4px; font-size: 10px; color: var(--White); font-weight: 300; } .button-modify { padding-top: 1px; cursor: pointer; width: 44px; height: 24px; display: flex; justify-content: center; align-items: center; background: var(--text-tertiary); border-radius: 4px; font-size: 10px; color: var(--White); font-weight: 300; } .button-view { padding-top: 1px; cursor: pointer; width: 44px; height: 24px; display: flex; justify-content: center; align-items: center; background: var(--HD_Green2); border-radius: 4px; font-size: 10px; color: var(--White); font-weight: 300; } .button-resend { padding-top: 1px; cursor: pointer; width: 100%; text-align: center; line-height: 22px; height: 24px; border-radius: 4px; font-size: 10px; color: var(--text-secondary); font-weight: 300; border: 1px solid #CED2DA; } .button-reset { padding-top: 1px; cursor: pointer; width: 100%; text-align: center; line-height: 22px; height: 24px; border-radius: 4px; font-size: 10px; color: var(--text-secondary); font-weight: 300; border: 1px solid #CED2DA; } .button-delete { cursor: pointer; width: 24px; height: 24px; border-radius: 4px; border: 1px solid #E4E7EC; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M3.99999 4.66667H12V12C12 13.1046 11.1046 14 9.99999 14H5.99999C4.89542 14 3.99999 13.1046 3.99999 12V4.66667Z' fill='white'/%3E%3Cpath d='M5.99999 3.33333C5.99999 2.59695 6.59694 2 7.33332 2H8.66666C9.40304 2 9.99999 2.59695 9.99999 3.33333V4.66667H5.99999V3.33333Z' fill='white'/%3E%3Cpath d='M6.66666 7.33333V11.3333M9.33332 7.33333V11.3333M2.66666 4.66667H13.3333M3.99999 4.66667V12C3.99999 13.1046 4.89542 14 5.99999 14H9.99999C11.1046 14 12 13.1046 12 12V4.66667H3.99999ZM9.99999 4.66667V3.33333C9.99999 2.59695 9.40304 2 8.66666 2H7.33332C6.59694 2 5.99999 2.59695 5.99999 3.33333V4.66667H9.99999Z' stroke='%23344051' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center no-repeat; } .button-excel { padding: 0 10px 0 35px; height: 30px; border: 1px solid var(--HD_Green2); border-radius: 6px; color: var(--HD_Green3); font-size: 12px; display: flex; align-items: center; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='18' viewBox='0 0 20 18' fill='none'%3E%3Cpath d='M5 2.25C5 1.14543 5.89543 0.25 7 0.25H18C19.1046 0.25 20 1.14543 20 2.25V15.75C20 16.8546 19.1046 17.75 18 17.75H7C5.89543 17.75 5 16.8546 5 15.75V2.25Z' fill='%232FB776'/%3E%3Cpath d='M5 13.375H20V15.75C20 16.8546 19.1046 17.75 18 17.75H7C5.89543 17.75 5 16.8546 5 15.75V13.375Z' fill='url(%23paint0_linear_820_10580)'/%3E%3Crect x='12.5' y='9' width='7.5' height='4.375' fill='%23229C5B'/%3E%3Crect x='12.5' y='4.625' width='7.5' height='4.375' fill='%2327AE68'/%3E%3Cpath d='M5 2.25C5 1.14543 5.89543 0.25 7 0.25H12.5V4.625H5V2.25Z' fill='%231D854F'/%3E%3Crect x='5' y='4.625' width='7.5' height='4.375' fill='%23197B43'/%3E%3Crect x='5' y='9' width='7.5' height='4.375' fill='%231B5B38'/%3E%3Cpath d='M5 7.625C5 5.96815 6.34315 4.625 8 4.625H9.5C11.1569 4.625 12.5 5.96815 12.5 7.625V12.875C12.5 14.5319 11.1569 15.875 9.5 15.875H5V7.625Z' fill='black' fill-opacity='0.3'/%3E%3Cpath d='M0 5.375C0 4.27043 0.895431 3.375 2 3.375H9.25C10.3546 3.375 11.25 4.27043 11.25 5.375V12.625C11.25 13.7296 10.3546 14.625 9.25 14.625H2C0.89543 14.625 0 13.7296 0 12.625V5.375Z' fill='url(%23paint1_linear_820_10580)'/%3E%3Cpath d='M8.125 12.125L6.36383 8.9375L8.04768 5.875H6.67311L5.63359 7.83036L4.61125 5.875H3.19373L4.88617 8.9375L3.125 12.125H4.49957L5.60782 10.0536L6.70747 12.125H8.125Z' fill='white'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_820_10580' x1='5' y1='15.5625' x2='20' y2='15.5625' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23163C27'/%3E%3Cstop offset='1' stop-color='%232A6043'/%3E%3C/linearGradient%3E%3ClinearGradient id='paint1_linear_820_10580' x1='0' y1='9' x2='11.25' y2='9' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23185A30'/%3E%3Cstop offset='1' stop-color='%23176F3D'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E") 10px center no-repeat; } .button-active { width: 60px; height: 24px; border-radius: 24px; border: 1px solid var(--HD_Green2); text-align: center; line-height: 23px; color: var(--HD_Green2); font-size: 10px; font-weight: 400; } .button-inactive { width: 60px; height: 24px; border-radius: 24px; border: 1px solid #97A1AF; text-align: center; line-height: 23px; color: #97A1AF; font-size: 10px; font-weight: 300; } .button-Active { width: 60px; height: 24px; border-radius: 24px; border: 1px solid var(--HD_Green2); text-align: center; line-height: 23px; color: var(--HD_Green2); font-size: 10px; font-weight: 400; } .button-Inactive, .button-InActive { width: 60px; height: 24px; border-radius: 24px; border: 1px solid #97A1AF; text-align: center; line-height: 23px; color: #97A1AF; font-size: 10px; font-weight: 300; } .button-add { display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0 8px 0 calc(8px + 26px); height: 30px; border-radius: 6px; border: 0; text-align: center; color: var(--White); font-size: 12px; font-weight: 300; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 10L10 10M10 10L15 10M10 10V5M10 10L10 15' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 8px center no-repeat var(--HD_Green2); } .button-deleted { width: 100%; height: 24px; border: 1px solid #97A1AF; border-radius: 100px; text-align: center; display: block; line-height: 23px; font-size: 10px; color: #97A1AF; } .button-search { width: 100px; height: 30px; border-radius: 6px; text-align: center; line-height: 30px; background: var(--text-tertiary); font-size: 12px; color: var(--White); font-weight: 300; cursor: pointer; } .button-pdf { width: 116px; height: 30px; border-radius: 6px; text-align: center; line-height: 30px; background: var(--text-tertiary); font-size: 12px; color: var(--White); font-weight: 300; cursor: pointer; } .button-pdf > span { display: inline-block; height: 30px; line-height: 30px; padding-left: 28px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M11.25 2.5L15.8334 7.1875M11.25 2.5V6.35417C11.25 6.8144 11.6231 7.1875 12.0834 7.1875H15.8334M11.25 2.5H6.66669C5.28598 2.5 4.16669 3.61929 4.16669 5V15C4.16669 16.3807 5.28597 17.5 6.66669 17.5H10M15.8334 7.1875V9.84375M14.5834 17.5L14.5834 12.5M14.5834 12.5L16.6667 14.5833M14.5834 12.5L12.5 14.5833' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") left center no-repeat; } .button-cart { padding: 0 8px 0 36px; height: 30px; line-height: 30px; border-radius: 6px; font-size: min(3.3333vw,12px); color: var(--White); font-weight: 300; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M2.5 2.5H3.66962C4.44778 2.5 5.12238 3.03848 5.29484 3.7973L5.75758 5.83333M7.08333 11.6667H13.6549C14.7114 11.6667 15.6539 11.0025 16.0092 10.0075L17.1023 6.94695C17.2961 6.40424 16.8938 5.83333 16.3175 5.83333H5.75758M7.08333 11.6667L5.75758 5.83333M7.08333 11.6667L7.5713 13.3745C7.77572 14.09 8.4297 14.5833 9.17384 14.5833H15M9.16667 16.6667H9.175M14.1667 16.6667H14.175' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 8px center no-repeat #637083; cursor: pointer; } .button-change-pwd { padding: 0 8px 0 36px; height: 30px; line-height: 30px; border-radius: 6px; font-size: min(3.3333vw,12px); color: var(--White); font-weight: 300; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M8.3335 11.7088C7.80411 11.1685 7.06628 10.8333 6.25016 10.8333C4.63933 10.8333 3.3335 12.1392 3.3335 13.75C3.3335 15.3608 4.63933 16.6667 6.25016 16.6667C7.86099 16.6667 9.16683 15.3608 9.16683 13.75C9.16683 12.9553 8.84899 12.2348 8.3335 11.7088ZM8.3335 11.7088L12.5265 7.51578M15.4168 4.58333L14.3909 5.63026M12.5265 7.51578L13.3651 6.67719L14.3909 5.63026M12.5265 7.51578L14.1774 9.16667M14.3909 5.63026L16.6774 7.91667' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") 8px center no-repeat #637083; cursor: pointer; } .button-apply { width: 41px; height: 30px; border-radius: 4px; background: #637083; color: #fff; font-size: 10px; text-align: center; line-height: 29px; font-weight: 300; cursor: pointer; } #resetButton { width: 80px; height: 30px; line-height: 28px; border: 1px solid #CED2DA; border-radius: 4px; margin-left: 10px; font-size: 12px; color: var(--text-secondary); gap: 0 4px; cursor: pointer; } .flag-usa { background: url('../img/usa.svg') !important; } .flag-canada { background: url('../img/canada.svg') !important; }