@charset "UTF-8";

body { background: #f6f5ff; }


input[type="text"],
input[type="email"],
input[type="password"] { padding: 0 16px; width: 100%; border: 1px solid #e3e3e3; border-radius: 8px; font-size: 1rem; font-weight: 400; outline: none; }

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus { border: 1px solid var(--blue); }

input[type="text"]:read-only,
input[type="email"]:read-only { background: #f3f5f7; color: #999; }

.container { min-width: 0; width: 100%; min-height: 100dvh; display: grid;  grid-template-rows: auto 1fr auto; background: #f8f9fa; }
.layout { display: flex; justify-content: center; }
.layout.ly-head { position: sticky; top: 0; z-index: 100; height: 80px; background: #5543ff; }
.layout.ly-foot { background: #e9ecef; }

.ly-head .ly-inner { display: flex; justify-content: space-between; align-items: center; color: #fff; }

.ly-head .main-logo a { display: flex; justify-content: flex-start; align-items: center; gap: 10px; }
.ly-head .main-logo a span { font-weight: 700; font-size: 26px; letter-spacing: 0.5px; }

.ly-head .gnbs { display: flex; }
.ly-head .gnbs button,
.ly-head .gnbs a { display: flex; align-items: center; width:100%; height: 48px; background: transparent; font-weight: 500; }

.ly-head .gnbs .gnb { position: relative; }
.ly-head .gnbs .gnb .trigger { background: transparent none no-repeat right center / 24px; }

.ly-head .gnb .lnbs { display: none; flex-direction: column; background: #fff; }
.ly-head .gnbs .gnb[data-active="on"] .lnbs { display: flex; }
.ly-head .gnb .lnbs a,
.ly-head .gnb .lnbs button { display: flex; align-items: center; color: #444; }

.footer { padding: 30px 0; color: #6e6e6e; }
.footer button { color: inherit; }
.footer .fnb-group { display: flex; justify-content: center; align-items: center; }
.footer .fnb-group ul { height: 22px; display: flex; justify-content: center; align-items: center; }
.footer .fnb-group ul .fnb { background: transparent; }

.footer .company-detail { margin-top: 20px; display: flex; justify-content: space-between; }
.footer .company-detail h2 { font-size: 16px; }

.footer dl { margin-top: 8px; display: grid; grid-template-columns: max-content 1fr; gap: 0 10px; }
.footer dl dt { position: relative; height: 20px; display: flex; align-items: center; }
.footer dl dd { height: 20px; display: flex; align-items: center; }
.footer dl dt::after { position: absolute; top: 50%; right: -8px; content:":"; line-height:1; transform: translateY(-50%); }

.footer .copyright { margin-top: 8px; text-align: center; }

.company-info .details { border-top: 1px solid #e3e3e3; }
.company-info .details li { padding: 5px 0; display: flex; justify-content: flex-start; align-items: center; gap: 10px; border-bottom: 1px solid #e3e3e3; }

.company-info .details .label { width: 40px; }
.company-info .details .value { flex: 1; word-break: keep-all; white-space: pre-wrap; }
.company-info .company .details .label { width: 80px; }

.company-info section:not(:nth-of-type(1)) { margin-top: 20px; }
.company-info h2 { position: relative; padding-left: 14px; height: 24px; display:flex; align-items: center; font-size: 18px; }
.company-info h2::before { position: absolute; top: 0; left: 0; content:""; width: 10px; height: 100%; display: block; background: var(--amber);}

.footer .company-summary .bizinfo-open { position: relative; margin-left: 4px;  padding: 0 4px 0 24px; height: 22px; color:#fff; -webkit-tap-highlight-color: transparent; }
.footer .company-summary .bizinfo-open::before { position: absolute; top: 50%; left: 2px; content:""; display: block; width: 20px; height: 20px; background: url('/public/images/icon/layer.svg') no-repeat center center / 20px; transform: translateY(-50%); }


.paginator { display: flex; justify-content: center; align-items: center; gap: 12px; }
.paginator .page.unlink,
.paginator .page.nowpage { cursor: default; pointer-events: none; }
.paginator .page.nowpage { font-weight: 700; }
.paginator .page { padding: 0 18px; line-height: 50px; min-width: 50px; height: 50px; display: block; color: #8e8e8e; border: 1px solid #8e8e8e; border-radius: 8px; text-align: center; font-size: 1.2rem; background: transparent no-repeat center center / 40px; }

.paginator .page.first { background-image: url('/public/images/paginator/first.svg'); }
.paginator .page.prevblock { background-image: url('/public//images/paginator/prev_block.svg'); }
.paginator .page.prev { background-image: url('/public/images/paginator/prev.svg'); }
.paginator .page.last { background-image: url('/public/images/paginator/last.svg'); }
.paginator .page.nextblock { background-image: url('/public/images/paginator/next_block.svg'); }
.paginator .page.next { background-image: url('/public/images/paginator/next.svg'); }

.paginator .page.first.unlink { background-image: url('/public/images/paginator/first_unlink.svg'); }
.paginator .page.prevblock.unlink { background-image: url('/public/images/paginator/prev_block_unlink.svg'); }
.paginator .page.prev.unlink { background-image: url('/public/images/paginator/prev_unlink.svg'); }
.paginator .page.last.unlink { background-image: url('/public/images/paginator/last_unlink.svg'); }
.paginator .page.nextblock.unlink { background-image: url('/public/images/paginator/next_block_unlink.svg'); }
.paginator .page.next.unlink { background-image: url('/public/images/paginator/next_unlink.svg'); }

 /* 모바일 */
@media screen and (max-width: 1024px) {
    .layout.ly-head .ly-inner,
    .layout.ly-main .ly-inner,
    .layout.ly-foot .ly-inner { width: 100%; min-width: 100%; } 
    .layout.ly-head .ly-inner { padding: 0 16px; }
    
    .ly-head .menu { width: 48px; height: 48px; background: none no-repeat center center / 40px; }
    .ly-head .menu[aria-expanded="false"] { background-image: url('/public/images/icon/menu.svg'); }
    .ly-head .menu[aria-expanded="true"] { background-image: url('/public/images/icon/close_menu.svg'); }

    .ly-head .gnbs { position: absolute; top: 100%; left: 0; z-index: 88; width: 100%; display: none; flex-direction: column; background: #fff; box-shadow: 0 5px 10px -1px rgba(0, 0, 0, 0.5); }
    .ly-head .gnbs[data-expend="true"] { display: flex; }
    .ly-head .gnbs > li:not(:last-child) { border-bottom: 1px solid #e3e3e3; }
    .ly-head .gnbs button, .ly-head .gnbs a { padding: 0 24px; justify-content: flex-start; color: #444; }
    .ly-head .gnbs .gnb .trigger { background-position: right 16px center; }
    .ly-head .gnbs .gnb[data-active="on"] .trigger { background-image: url('/public/images/icon/arrow_dark_on.svg'); }
    .ly-head .gnbs .gnb[data-active="off"] .trigger { background-image: url('/public/images/icon/arrow_dark_off.svg'); }
    .ly-head .gnb .lnbs { position: static; width: 100%; }
    .ly-head .gnb .lnbs a, .ly-head .gnb .lnbs button { width: 100%;  padding: 0 24px 0 36px; }
    .ly-head .gnb .lnbs a:active, .ly-head .gnb .lnbs button:active { color: #fff; background: var(--blue); }

    .footer .company-detail { display: none; }
    .footer .company-summary { display: flex; justify-content: center; align-items: center; }
}

/* PC */
@media screen and (min-width: 1025px) {
    .layout.ly-head .ly-inner,
    .layout.ly-main .ly-inner,
    .layout.ly-foot .ly-inner { width: var(--width); min-width: var(--width); } 
    
    .layout.ly-main .ly-inner { display: flex; justify-content: center; }
    .layout.ly-head .menu{ display: none; }
    
    

    .ly-head .gnbs { align-items: center; gap: 8px; }
    .ly-head .gnbs button, .ly-head .gnbs a { padding: 0 12px; justify-content: center; color: #fff; }

    .ly-head .gnbs .gnb .trigger { padding: 0 24px 0 12px; }
    .ly-head .gnbs .gnb[data-active="on"] .trigger { background-image: url('/public/images/icon/arrow_on.svg'); }
    .ly-head .gnbs .gnb[data-active="off"] .trigger { background-image: url('/public/images/icon/arrow_off.svg'); }
    
    .ly-head .gnb .lnbs { position: absolute; left: 50%; width: max-content; transform: translateX(-50%); box-shadow: rgba(0, 0, 0, 0.1) 0px 20px 25px -5px, rgba(0, 0, 0, 0.04) 0px 10px 10px -5px; }
    .ly-head .gnb .lnbs a, .ly-head .gnb .lnbs button { padding: 0 24px; justify-content: center; }
    .ly-head .gnb .lnbs a:hover, .ly-head .gnb .lnbs button:hover { background: var(--blue); color: #fff; }

    .footer .company-summary { display: none; }
}