@charset "utf-8"; /* color tokens */ :root { --orz-white: #fff; --orz-text: #333; --orz-line: #959595; --orz-border: #808080; --orz-border-light: #ccc; --orz-gray-100: #f5f5f5; --orz-sky: #e0e5ef; --orz-red: #E5363D; --orz-orange: #B45309; --orz-blue: #1462BA; --orz-green: #00926e; --orz-green_dark: #003221; --orz-bluegray: #454F69; --orz-navy: #162344; } /* boxes */ [class*=obox-] { padding: 10px 15px; border: 1px solid var(--orz-border); background: var(--orz-white); text-align: center; border-radius: 5px; } .obox-red { border: 1px solid var(--orz-red); background: var(--orz-red); color: var(--orz-white); } .obox-sky { background: var(--orz-sky); font-weight: 700; color: var(--orz-text); } .obox-green { border: 1px solid var(--orz-green); background: var(--orz-green); color: var(--orz-white); } .obox-green_dark { border: 1px solid var(--orz-green_dark); background: var(--orz-green_dark); color: var(--orz-white); } .obox-bluegray { border: 1px solid var(--orz-bluegray); background: var(--orz-bluegray); color: var(--orz-white); } .obox-navy { border: 1px solid var(--orz-navy); background: var(--orz-navy); color: var(--orz-white); } .obox-gray { display: block; background: var(--orz-gray-100); color: var(--orz-text); } /* one_box */ .one_box { margin-bottom: 20px; width: 100%; } .one_box dt { margin-bottom: -3px; font-weight: 600; } .one_box dd { padding: 10px 3px; border: 1px solid var(--orz-border-light); border-top: 0; border-radius: 0 0 10px 10px; } .one_box dd p { margin: 2px 0; } /* sub,board library : 큰요소 */ /* Swiper Tabs */ .section.tab { padding: 0 24px; } .swiper-tabs { margin: 0; padding: 0; overflow: visible; position: relative; } .swiper-tabs__swiper { overflow: hidden; } .swiper-tabs.has-next .swiper-tabs__swiper { padding-right: 72px; } .swiper-tabs.has-prev .swiper-tabs__swiper { padding-left: 72px; } .swiper-tabs.has-next::after, .swiper-tabs.has-prev::before { position: absolute; top: 0; bottom: 0; z-index: 1; width: 96px; content: ''; pointer-events: none; } .swiper-tabs.has-next::after { right: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 70%); } .swiper-tabs.has-prev::before { left: 0; z-index: 2; background: linear-gradient(270deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 1) 70%); } .swiper-tabs .swiper-wrapper { align-items: center; } .swiper-tabs .swiper-slide { width: auto; } .swiper-tab { display: inline-flex; align-items: center; justify-content: center; padding: 12px 14px; background: transparent; font-size: 1.6rem; font-weight: 700; color: #33363D; letter-spacing: -0.02em; white-space: nowrap; cursor: pointer; } .swiper-tab.is-active { background-color: #33363D; color: #fff; border-radius: 10px; } .swiper-tab:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); } /*** modal ***/ .modal-overlay { margin: 0 auto; position: fixed; top: 0; right: 0; left: 0; z-index: 70; width: min(100%, var(--app-max-width)); height: 100dvh; max-height: 100vh; background: rgba(0, 0, 0, 0.52); } .modal-overlay[hidden] { display: none !important; } .modal { display: grid; place-items: center; margin: 0 auto; padding: 24px; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 75; width: min(100%, var(--app-max-width)); } .modal[hidden] { display: none !important; } .modal__panel { display: flex; flex-direction: column; box-shadow: var(--shadow); overflow: hidden; width: 100%; max-width: 380px; max-height: calc(100dvh - 48px); background: var(--surface); border-radius: var(--radius-sm); } .modal__header { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--border); } .modal__title { margin: 0; font-size: 1.7rem; font-weight: 700; letter-spacing: -0.02em; } .modal__close { flex-shrink: 0; margin-left: auto; padding: 0; border: 0; position: relative; width: 32px; height: 32px; background: transparent; cursor: pointer; } .modal__close::before, .modal__close::after { position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; background: #111; content: ""; border-radius: 999px; transform-origin: center; } .modal__close::before { transform: translate(-50%, -50%) rotate(45deg); } .modal__close::after { transform: translate(-50%, -50%) rotate(-45deg); } .modal__close:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); border-radius: 6px; } .modal__body { padding: 18px; overflow: auto; font-size: 1.6rem; font-weight: 400; line-height: 1.4; -webkit-overflow-scrolling: touch; } .swiper-tabs__prev, .swiper-tabs__next { display: grid; place-items: center; border: 1px solid rgba(30, 33, 36, 0.18); position: absolute; top: 50%; z-index: 2; width: 40px; height: 40px; background: var(--surface); cursor: pointer; transform: translateY(-50%); border-radius: 999px; } .swiper-tabs__prev { left: 0; } .swiper-tabs__next { right: 0; } .swiper-tabs__prev::before, .swiper-tabs__next::before { width: 14px; height: 14px; background-color: #1e2124; content: ''; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center center; -webkit-mask-size: contain; mask-repeat: no-repeat; mask-position: center center; mask-size: contain; -webkit-mask-image: url(/images/common/i-arrow-right.svg); mask-image: url(/images/common/i-arrow-right.svg); forced-color-adjust: none; } .swiper-tabs__prev::before { transform: rotate(180deg); } .swiper-tabs__prev.swiper-button-disabled, .swiper-tabs__next.swiper-button-disabled { cursor: default; opacity: 0.35; } .swiper-tabs__prev[hidden], .swiper-tabs__next[hidden] { display: none !important; } .swiper-tabpanels { padding: 20px 0 0; } .swiper-tabpanel[hidden] { display: none !important; } .swiper-tabpanel { background: var(--surface); font-size: 1.6rem; border-radius: var(--radius-sm); } /* table */ table .text-center th, table .text-center td { text-align: center; } table tbody.text-n1-center tr> :nth-child(1) { text-align: center; } table tbody.text-n2-center tr> :nth-child(2) { text-align: center; } table tbody.text-n3-center tr> :nth-child(3) { text-align: center; } table tbody.text-n4-center tr> :nth-child(4) { text-align: center; } table tbody.text-n5-center tr> :nth-child(5) { text-align: center; } table .text-end th, table .text-end td { text-align: right; } table tbody.text-n1-end tr> :nth-child(1) { text-align: right; } table tbody.text-n2-end tr> :nth-child(2) { text-align: right; } table tbody.text-n3-end tr> :nth-child(3) { text-align: right; } table tbody.text-n4-end tr> :nth-child(4) { text-align: right; } table tbody.text-n5-end tr> :nth-child(5) { text-align: right; } /* table (기본 및 가로스크롤) */ table:where(.t1) { margin-top: 10px; margin-bottom: 10px; border-top: 2px solid #555555; border-bottom: 1px solid #e5e7eb; border-right: 1px solid #e5e7eb; border-left: 1px solid #e5e7eb; background: #ffffff; table-layout: fixed; border-collapse: collapse; } table:where(.t1) thead th { padding: 12px 0px; border: 1px solid #d7dde5; border-top: 0; background: #f7f7f7; font-weight: 700; color: #1d1d1d; text-align: center; } table:where(.t1) tbody th, table:where(.t1) tbody td { padding: 12px 10px; border: 1px solid #e5e7eb; vertical-align: top; font-size: 1.4rem; color: #1d1d1d; word-break: break-word; overflow-wrap: anywhere; } table:where(.t1) tbody th { background: #fafafa; font-weight: 600; } table:where(.t1) tbody tr:last-child th, table:where(.t1) tbody tr:last-child td { border-bottom: 0; } table:where(.t1) tbody tr.is-highlight th, table:where(.t1) tbody tr.is-highlight td { background: #fff6e7; } table:where(.t1) tfoot th, table:where(.t1) tfoot td { padding: 12px 10px; border: 1px solid #d7dde5; border-top: 2px solid #555555; background: #fafafa; font-size: 1.4rem; font-weight: 700; color: #1d1d1d; } table:where(.t1) tfoot th { text-align: center; } table:where(.t1) tfoot td { text-align: right; } .table-scroll { margin-top: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table-scroll.is-table-scroll-enhanced { overflow: visible; } .table-scroll__top, .table-scroll__body { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } .table-scroll__top { margin-bottom: 8px; height: 14px; } .table-scroll__spacer { width: 100%; min-width: 1000px; height: 1px; } .table-scroll__body>table:where(.t1), .table-scroll>table:where(.t1) { margin-top: 0; min-width: 1000px; } /* table (.t2: card layout) */ table:where(.t2) { margin-top: 10px; margin-bottom: 10px; border-top: 2px solid #555555; width: 100%; background: #ffffff; border-collapse: collapse; } table:where(.t2) thead { display: none; } table:where(.t2), table:where(.t2) tbody, table:where(.t2) tr, table:where(.t2) th, table:where(.t2) td { display: block; width: 100%; } table:where(.t2) tbody tr { display: flex; flex-direction: column; padding: 1.2rem 0; border-bottom: 1px solid #e5e7eb; width: auto; background: #fff; } table:where(.t2) tbody th, table:where(.t2) tbody td { padding: .1rem 0; border: none; vertical-align: top; font-size: 1.4rem; color: #1d1d1d; text-align: left; word-break: break-word; overflow-wrap: anywhere; } table:where(.t2) tbody th { font-weight: 600; } table:where(.t2) tbody td.tdTitle { padding-bottom: 1rem; font-size: 1.7rem; font-weight: 600; line-height: 1.4; order: -1; } table:where(.t2) tbody td[data-label]:not(.tdTitle)::before { display: inline-flex; margin-right: 0; padding: .3rem .6rem; min-width: 5.5rem; background: #f3f4f6; font-size: 1.2rem; color: #000000; text-align: center; content: attr(data-label); border-radius: .4rem; } table:where(.t2) tbody td[data-label]:not(.tdTitle) { display: flex; gap: .6rem; align-items: flex-start; } /* img */ .img-full { display: block; margin: 0 -24px; width: calc(100% + 48px); max-width: none; height: auto; } /* title */ .secTit { position: relative; padding-left: 13px; margin-bottom: 20px; font-size: 1.9rem; font-weight: 700; line-height: 1.4; color: #33363D; } .secTit::before { position: absolute; top: .35em; left: 0; width: 3px; height: 16px; background-color: #EB4249; content: ''; } .thirdTit { font-size: 1.8rem; font-weight: 600; line-height: 1.5; } .fourthTit { font-size: 1.6rem; font-weight: 400; line-height: 1.5; } .fifthTit { font-size: 1.4rem; font-weight: 500; line-height: 1.3; color: var(--muted); } .box-title { font-size: 1.8rem; font-weight: 700; line-height: 1.5; color: var(--green); text-align: center; } /* box */ /* box(기본) */ .box { padding: 20px; border: 1px solid var(--border); border-radius: var(--radius-sm); } .box.bg { background-color: var(--surface-soft); } /* box (title) */ .box-index { margin-top: 20px; margin-bottom: 25px; padding: 15px; border: 1px solid #ddd; position: relative; background-color: #f8f8f8; box-sizing: border-box; } .dashed_line { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px dashed #ddd; font-size: 18px; text-align: center; } /* btn */ /* btn(기본) */ .btn-wrap {} .btn { padding: 8px 10px; border: 1px solid #ddd; text-align: center; border-radius: 4px; flex: 0 0 auto; white-space: nowrap; } .btn.primary { border: unset; background-color: var(--brand); color: #fff; } .btn.primary-line { border-color: var(--brand); color: var(--brand); } .btn-text { color: var(--brand); font-weight: 700; text-decoration-line: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; cursor: pointer; } /* btn(아이콘) */ .btn.self::after { display: inline-block; margin-left: 4px; width: 10px; height: 10px; background-image: url(/images/common/i-arrow-right.svg); background-repeat: no-repeat; background-position: center center; content: ''; } /* btn(게시판) */ .btn-icon { display: inline-block; padding: 6px 8px; border: 1px solid #58616a; border-style: solid; flex: 0 0 auto; width: auto; min-height: 3rem; vertical-align: middle; font-size: 1.4rem; line-height: 1.4; white-space: normal; word-break: keep-all; overflow-wrap: anywhere; transition: 0.4s ease-in-out; cursor: pointer; border-radius: 5px; text-align: center; } .btn-icon .svg-icon { margin-left: 2px; vertical-align: text-bottom; } /* toggle switch */ .ui-switch { width: 100%; } .ui-switch__input { margin: -1px; padding: 0; border: 0; overflow: hidden; clip: rect(0, 0, 0, 0); position: absolute; width: 1px; height: 1px; white-space: nowrap; } .ui-switch__label { display: flex; gap: 12px; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; } .ui-switch__text { font-size: 1.6rem; font-weight: 600; color: #1d1d1d; } .ui-switch__track { flex: 0 0 auto; position: relative; width: 44px; height: 24px; background: #cbd5e1; transition: background 160ms ease; border-radius: 999px; forced-color-adjust: none; } .ui-switch__track::after { box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18); position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; background: #ffffff; transition: transform 160ms ease; content: ""; border-radius: 999px; } .ui-switch__input:checked+.ui-switch__label .ui-switch__track { background: var(--brand); } .ui-switch__input:checked+.ui-switch__label .ui-switch__track::after { transform: translateX(20px); } .ui-switch__input:focus-visible+.ui-switch__label .ui-switch__track { outline: none; box-shadow: 0 0 0 2px var(--focus-ring-contrast), 0 0 0 5px var(--focus-ring); } .ui-switch__input:disabled+.ui-switch__label { cursor: not-allowed; opacity: 0.55; } /* accordion */ .ui-accordion { border: 1px solid var(--border); overflow: hidden; background: #ffffff; border-radius: var(--radius-sm); } .ui-accordion.is-no-radius { border-radius: 0; } .ui-accordion.is-bg { background: #f3f6fb; } .ui-accordion__item+.ui-accordion__item { border-top: 1px solid #e5e7eb; } .ui-accordion__summary { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 16px 14px; font-size: 1.6rem; font-weight: 600; color: #1d1d1d; list-style: none; cursor: pointer; } .ui-accordion__summary::-webkit-details-marker { display: none; } .ui-accordion__summary::after { display: block; flex: 0 0 auto; width: 24px; height: 24px; background-image: url(/images/common/i-plus-toggle.svg); background-repeat: no-repeat; background-position: center center; background-size: 12px; content: ""; forced-color-adjust: none; } .ui-accordion__item[open]>.ui-accordion__summary::after { background-image: url(/images/common/i-minus-toggle.svg); } .ui-accordion__summary:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus-ring-contrast), inset 0 0 0 5px var(--focus-ring); } .ui-accordion__content { padding: 0 14px 16px; font-size: 1.5rem; color: #3b4a5a; } /* accordion content helpers */ .faq-prefix-title { align-items: flex-start; } .faq-prefix-title__text { position: relative; flex: 1 1 auto; min-width: 0; padding-left: 1.8em; } .faq-prefix-title__text::before { position: absolute; top: 0; left: 0; content: "Q."; } .faq-prefix-line { position: relative; padding-left: 1.8em; } .faq-prefix-line::before { position: absolute; top: 0; left: 0; content: attr(data-prefix); } /* list */ /* list(기본:block) */ .list-info {} .list-info li { display: block; margin-left: 20px; } .list-info li::before { display: inline-block; margin-right: 10px; margin-bottom: 4px; margin-left: -13px; width: 3px; height: 3px; background-color: #333; content: ''; border-radius: 3px; } .list-info ul { margin: 10px 0; } .list-info .list-info { margin: 0; } .list-info li ul:not(.list-num)>li, .list-info li ol:not(.list-num)>li { display: inline-block; margin-left: 20px; } .list-info li ul.list-info>li, .list-info li ol.list-info>li, .list-info.list-info li .list-info li { display: block; margin-left: 20px; } .list-info li ul:not(.list-num)>li::before, .list-info li ol:not(.list-num)>li::before { display: inline-block; margin-right: 5px; margin-left: -15px; width: unset; height: unset; background-color: unset; content: '-'; } /* list(기본:inline-block) */ .list-index {} .list-index li { display: inline-block; margin-left: 20px; } .list-index li::before { display: inline-block; margin-right: 10px; margin-bottom: 4px; margin-left: -13px; width: 3px; height: 3px; background-color: #333; content: ''; border-radius: 3px; } .list-index ul { margin: 10px 0; } .list-index li li { display: inline-block; margin-left: 20px; } .list-index li li::before { display: inline-block; margin-right: 5px; margin-left: -15px; content: '-'; } /* list(번호) */ .list-num { margin-top: 12px; margin-bottom: 0; padding-left: 0; counter-reset: list-num; list-style: none; } .list-num>li { margin-left: unset; padding-left: 20px; position: relative; font-size: 1.6rem; line-height: 1.5; color: #1d1d1d; } .list-num>li+li { margin-top: 8px; } .list-num>li::before { display: block; position: absolute; top: 0; left: 0; margin: 0; width: auto; height: auto; background: none; border-radius: 0; font-weight: 700; color: var(--brand); content: counter(list-num) "."; counter-increment: list-num; } /* list(제목+내용) */ .list-dtdd { margin-bottom: 25px; } .list-dtdd dl { display: flex; margin-bottom: 4px; } .list-dtdd dl>dt { flex-shrink: 0; margin-right: 15px; font-weight: 500; color: #EB4249; } .list-dtdd.dtdd-70 dl>dt { min-width: 70px; } .list-dtdd.dtdd-80 dl>dt { min-width: 80px; } .list-dtdd.dtdd-90 dl>dt { min-width: 90px; } .list-dtdd.dtdd-100 dl>dt { min-width: 100px; } .list-dtdd dl>dd {} /* list(썸네일 + 내용) */ .list-thumb { margin-top: 12px; margin-bottom: 0; padding-left: 0; border-top: 1px solid #e5e7eb; list-style: none; } .list-thumb>li { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid #e5e7eb; } .list-thumb .thumb { flex: 0 0 100px; border: 1px solid #d7dbe0; overflow: hidden; width: 100px; background: #f5f6f7; } .list-thumb .thumb img { display: block; width: 100%; height: 100%; object-fit: cover; } .list-thumb .info { display: flex; justify-content: flex-start; flex: 1 1 auto; flex-direction: column; min-width: 0; min-height: 100px; } .list-thumb .title { margin: 0 0 6px; font-size: 1.6rem; font-weight: 700; color: #1d1d1d; } .list-thumb .desc { margin: 4px 0 0; font-size: 1.5rem; color: #3b4a5a; word-break: keep-all; } /* image title */ .img-title-wrap { display: inline-block; position: relative; max-width: 100%; } .img-title-wrap img { display: block; width: 100%; height: auto; } .img-title-wrap[data-title]::after { padding: 4px 8px; position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, 0.7); font-size: 1.4rem; font-weight: 600; color: #fff; content: attr(data-title); border-radius: 2px; } .img-title { padding: 4px 8px; position: absolute; right: 8px; bottom: 8px; background: rgba(0, 0, 0, 0.7); font-size: 1.4rem; font-weight: 600; color: #fff; border-radius: 2px; } /* image full + title */ .img-title-wrap.is-full, .img-full-wrap { display: block; margin: 0 -24px; position: relative; width: calc(100% + 48px); max-width: none; } .img-title-wrap.is-full .img-full, .img-full-wrap .img-full { display: block; margin: 0; width: 100%; height: auto; } /* image viewer */ .img-view-wrap { display: inline-block; position: relative; max-width: 100%; } .img-view-wrap img { display: block; width: 100%; height: auto; } .content-image-row { align-items: stretch; } .content-image-row>figure { flex: 1 1 0; min-width: 0; } .content-image-row>img { flex: 1 1 0; min-width: 0; } .content-image-row img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; } .img-view-btn { padding: 0; border: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18); position: absolute; bottom: 8px; left: 8px; width: 32px; height: 32px; background: #ffffff url(/images/common/i-multi.svg) no-repeat center; background-size: 18px 18px; cursor: pointer; border-radius: 8px; } .img-view-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); } .modal__panel--image { max-width: 720px; } .img-modal__body { padding: 12px; } .img-modal__figure { margin: 0; overflow: hidden; background: #0f1114; border-radius: 10px; } .img-modal__img { display: block; width: 100%; height: auto; max-height: 70vh; object-fit: contain; } .img-modal__caption { margin: 0; padding: 10px 12px; background: rgba(0, 0, 0, 0.75); font-size: 1.4rem; font-weight: 600; color: #fff; } /* map embed */ .map-embed { width: 100%; max-width: 100%; } .map-embed__link { display: block; } .map-embed__img { display: block; border: 1px solid #ccc; width: 100%; height: auto; } .map-embed__bar { display: flex; gap: 12px; align-items: center; justify-content: space-between; padding: 7px 11px; border: 1px solid #dfdfdf; border-color: rgba(0, 0, 0, 0.1); overflow: hidden; background-color: #f9f9f9; border-radius: 0 0 2px 2px; } .map-embed__brand { display: inline-flex; align-items: center; } .map-embed__more-link { font-size: 12px; line-height: 15px; color: #000; text-decoration: none; } /* kakao roughmap responsive */ .map-roughmap { overflow: hidden; position: relative; width: 100%; max-width: 100%; background: #fff; aspect-ratio: 16 / 9; border-radius: 2px; box-sizing: border-box; } .map-roughmap::after { border: 1px solid #ccc; position: absolute; z-index: 2; content: ""; pointer-events: none; inset: 0; border-radius: 2px; } .map-roughmap .root_daum_roughmap { border: 0 !important; width: 100% !important; height: 100% !important; } .map-roughmap .root_daum_roughmap .wrap_map, .map-roughmap .root_daum_roughmap .map { border: 0 !important; outline: 0 !important; width: 100% !important; height: 100% !important; } /* icon (개인정보처리방침) */ i.pro_icon img { margin-top: -3px; margin-left: 5px; width: 36px; } /* board search tabs */ .section.board-search-page { display: flex; flex-direction: column; gap: 40px; padding: 0 24px; } .PageNameWrap.board_search .text-blue, .board-search-page .text-blue { color: #3454dd; } .board-search-form { width: 100%; } .board-search-field { position: relative; } .board-search-input { padding: 0 52px 0 16px; border: 1px solid #58616a; width: 100%; height: 48px; background: #ffffff; font-size: 1.7rem; line-height: 1.5; color: #111111; border-radius: 8px; } .board-search-input::placeholder { color: #8a949e; } .board-search-submit { padding: 0; border: 0; position: absolute; top: 50%; right: 16px; width: 24px; height: 24px; background: transparent url(/images/common/i-search.svg) no-repeat center center / contain; transform: translateY(-50%); } .board-tabs { display: grid; background: #FFFFFF; grid-template-columns: repeat(2, 1fr); } .board-tabs .tab { margin-right: -1px; margin-bottom: -1px; padding: 7px 12px 8px; border: 1px solid #B1B8BE; position: relative; min-height: 60px; background: #FFFFFF; color: #464C53; } .board-tabs .tab p { margin-bottom: unset; font-size: 1.6rem; font-weight: 600; line-height: 1.3; text-align: center; } .board-tabs .tab .label {} .board-tabs .tab .count { font-size: 1.6rem; } .board-tabs .tab.is-active { background: #FDEDED; color: #EB4249; } .board-tabs .tab.is-active::after { display: block; outline: 1px solid #EB4249; position: absolute; top: 50%; left: 50%; z-index: 1; width: 100%; height: 100%; content: ''; transform: translate(-50%, -50%); } .board-tabpanels { margin-top: 0; } .board-tabpanel[hidden] { display: none; } /* pagination */ .krds-pagination { display: flex; gap: 0rem; justify-content: center; margin-top: 2rem; font-size: 1.5rem; } .krds-pagination .page-links { gap: 0; } .krds-pagination .page-links .page-link { padding: .3rem 1rem; width: auto; height: auto; border-radius: 5px; } .krds-pagination .page-links .page-link.active { background: var(--brand); color: #fff; } /* board detail search */ .board-search-detail { margin-top: 0; padding: 24px; border: 1px solid #e2e6ec; background: #f1f4f8; } .board-search-detail .ui-accordion__summary { padding: 0; font-size: 1.6rem; font-weight: 700; line-height: 1.5; color: #000000; } .board-search-detail .ui-accordion__summary::after { width: 24px; height: 24px; background-color: transparent; background-image: url(/images/common/i-plus-toggle.svg); background-repeat: no-repeat; background-position: center center; background-size: 12px; mask: none; -webkit-mask: none; } .board-search-detail .ui-accordion__item[open]>.ui-accordion__summary::after { background-image: url(/images/common/i-minus-toggle.svg); } .board-search-detail .ui-accordion__content { padding: 20px 0 0; } .board-search-detail.is-bg { background: #f3f6fb; } .board-search-detail.is-no-radius { border-radius: 0; } .board-search-detail.is-no-radius .detail-chip, .board-search-detail.is-no-radius .detail-date-input, .board-search-detail.is-no-radius .detail-search-submit { border-radius: 8px; } .detail-search-title { margin-bottom: 20px; font-size: 2rem; font-weight: 700; color: #111111; } .detail-search-form { display: flex; gap: 15px; flex-direction: column; } .detail-search-group { display: flex; gap: 5px; flex-direction: column; margin: 0; padding: 0; border: 0; } .detail-search-label { margin-bottom: 10px; overflow: unset; width: unset; height: unset; font-size: unset; font-size: 1.6rem; font-weight: 500; line-height: unset; color: #1A1A1A; text-indent: unset; } .detail-search-options { display: grid; gap: 5px; } .detail-search-options.is-two { grid-template-columns: repeat(2, 1fr); } .detail-search-options.is-three { grid-template-columns: repeat(3, 1fr); } .detail-search-options.is-six { grid-template-columns: repeat(6, 1fr); } .detail-search-options.is-four { grid-template-columns: repeat(4, 1fr); } .detail-chip { display: inline-flex; align-items: center; justify-content: center; border: 1px solid #b1b8be; width: 100%; height: var(--form-button-size-height); background: #ffffff; font-size: 1.5rem; font-weight: 500; color: #1e2124; text-decoration: none; cursor: pointer; border-radius: 8px; } .detail-chip.is-active { border-color: #33363d; background: #33363d; color: #ffffff; } .detail-search-dates { display: grid; gap: 5px; align-items: center; grid-template-columns: 1fr auto 1fr; } .detail-date-field { display: flex; position: relative; width: 100%; } .detail-date-input { padding: 0 38px 0 14px; border: 1px solid #b1b8be; width: 100%; height: var(--form-input-size-height); background: #ffffff; font-size: 1.6rem; color: #1e2124; border-radius: 8px; } .detail-date-input::placeholder { color: #9aa2ab; } .detail-date-field::after { position: absolute; top: 50%; right: 12px; width: 18px; height: 18px; background: url(/images/board/i-calendar.svg) no-repeat center center / contain; content: ''; pointer-events: none; transform: translateY(-50%); } .detail-date-sep { font-size: 1.6rem; font-weight: 500; color: #1e2124; text-align: center; } .detail-search-submit { display: inline-flex; align-items: center; justify-content: center; margin-top: 6px; border: 0; height: var(--form-button-size-height); background: #eb4249; font-size: 1.8rem; font-weight: 500; color: #ffffff; text-decoration: none; cursor: pointer; border-radius: 8px; } @media (max-width: 360px) { .detail-search-options.is-six, .detail-search-options.is-four { grid-template-columns: repeat(3, 1fr); } } /* board card */ .board-card { margin-top: 0; border: 1px solid #d6d8da; overflow: hidden; background: #ffffff; } .board-card+.board-card { margin-top: 20px; } .board-card__header { padding: 10px 18px; border-bottom: 0; background: #f3f6fb; font-size: 1.6rem; line-height: 1.5; font-weight: 700; } .board-card__list { padding: 18px 18px 0; } .board-card__item { padding: 0; } .board-card__item+.board-card__item { margin-top: 20px; border-top: 0; } .board-card__meta { display: flex; gap: 10px; align-items: center; font-size: 1.5rem; line-height: 1.5; color: #33363d; } .board-card__tag { padding: 2px 10px; border: 1px solid #d6d8da; background: #f3f6fb; font-size: 1.4rem; font-weight: 400; color: #111111; border-radius: 4px; } .board-card__title { display: block; margin-top: 5px; font-size: 1.6rem; line-height: 1.5; font-weight: 600; color: #000000; } .board-card__desc { margin-top: 5px; overflow: hidden; display: -webkit-box; font-size: 1.5rem; line-height: 1.5; color: #515151; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .board-card__path { margin-top: 5px; overflow: hidden; font-size: 1.4rem; line-height: 1.6; color: #515151; text-overflow: ellipsis; white-space: nowrap; } .board-card__more { padding: 20px 18px 18px; text-align: right; }