@charset "UTF-8";
:root {
    --width-main : 1200px;
}
/*
html,body{scrollbar-gutter: stable both-edges;}
.layout-container { width: 100%; height: 100%; height: 100vh; height: 100dvh; min-height: 100%; overflow-y: auto; }
*/

/* 레이아웃 공통 */
.layout-container { width: 100%; min-height: 100%; }
.layout-container > .layout-head { width: 100%; height: 70px; border-bottom: 1px solid #e3e3e3; box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.3); background: #fff; }

.layout-container > .layout-head.fixed{ position: fixed; top: 0;left: 0; right: 0; z-index: 1000; }
.layout-container > .layout-body.fixed-padding { padding-top: 70px;}
.layout-container > .layout-foot { background: #094c76; color: #fff; }
/* end 레이아웃 공통 */

/* 헤더 */
.header { height: 70px; display: flex; justify-content: space-between; align-items: center; }
.header .logo-wrap a { display: block; height: 36px; font-size: 0; }
.header .gnbs a { position: relative; display: block; font-size: 1rem; font-weight: 500; }
.header .gnbs { display: flex; background: #fff; }

.header .gnbs .gnb > a::after{ position: absolute; top: 50%; right: 0; content: ""; display: block; width: 24px; height: 24px; background: url('../images/icon/arrow_down.svg') no-repeat center center / cover; transform: translate(-50%, -50%); transition: transform .18s ease; }

.header .gnbs li { position: relative; }
.header .gnbs li .lnbs { display : none;  }
.header .gnbs li .lnbs a { font-weight: 400; }
.header .gnbs li.active .lnbs { display: block; }

.header .gnbs .gnb.active > a::after {
    transform: translate(-50%, -50%) rotate(180deg);
}
/* end 헤더 */

/* 푸터 */
.footer { padding-top: 16px; }
.footer .infodesk { padding: 0 16px; }
.footer .infodesk .fnbs { display: flex; z-index: 1; justify-content: center; align-items: center; }
.footer .infodesk .fnbs li { position: relative; padding-right: 8px; }
.footer .infodesk .fnbs li:not(:first-child) { margin-left: 8px; }
.footer .infodesk .fnbs li:not(:last-child)::after { position: absolute; right: -2px; content:"|"; color: rgba(255,255,255, 0.5); }
.footer .infodesk .foot-logo { font-size: 30px; font-weight: 700; }
.footer .infodesk .site-info dt { font-weight: 700; }
.footer .infodesk .site-info dd { margin-top: 4px; font-size: 15px; }
.footer .copyright { margin-top: 20px; padding: 16px; text-align: center; color: #f5fafd; font-size: 0.875rem; font-weight: 400; border-top: 1px solid rgba(255,255,255, 0.2); }
/* end 푸터 */

/* 모달 공통 */
.layout-modal { position: fixed; top: 0; left: 0; z-index: 9999; width: 100%; height: 100dvh; display: none; justify-content: center; align-items: center; background: rgba(0, 0, 0, .5); backdrop-filter: blur(2px); }
.layout-modal.active { display: flex; }
.layout-modal .modal-wrap { border-radius: 24px; background: #fff; display: flex; flex-direction: column; overflow: hidden; }
.layout-modal .modal-head { flex-shrink: 0; height: 48px; }
.layout-modal .modal-head header { position: relative; height: 48px; display: flex; justify-content: center; align-items: center; }
.layout-modal .modal-head header button { position: absolute; top: 50%; right: 0; width: 40px; height: 40px; display: block; border-radius: 50%;  background: transparent url('../images/icon/close.svg') no-repeat center center / 26px; transform: translateY(-50%); }
.layout-modal .modal-wrap header button:hover { background-color: #f0f0f0; }
.layout-modal .modal-foot { flex-shrink: 0; height: 48px; display: flex; justify-content: flex-end; align-items: center; gap: 8px; text-align: right; font-size: 0; }
.layout-modal .modal-body { flex: 1 1 auto; overflow-y: auto; scrollbar-width: none; }
.layout-modal .modal-body::-webkit-scrollbar { display: none; }
.layout-modal .modal-foot button { padding: 0 16px; height:32px; border-radius: 16px; font-size: 14px; }
.layout-modal .modal-foot .confirm { display: none; }
.layout-modal.confirm .modal-foot .confirm { display: block; }
/* end 모달 공통*/

/* 개인정보취급방침/이용약관 */
.modal-body .legalterms { max-height: calc(100% - 48px - 48px); line-height: 1.5; font-size: 14px; color:#444; }
.modal-body .legalterms .section { margin-top: 12px; }
.modal-body .legalterms .introduce {margin-top: 4px; text-indent: 8px; }
.modal-body .legalterms .subsection {margin-top: 4px; }
.modal-body .legalterms .paragraph { padding-left: 8px; }
.modal-body .legalterms .note { padding-left: 8px; }

.modal-body .legalterms .scroll-x { width:100%; overflow-x: auto; }

.modal-body .legalterms .marker::before{ position: relative; content: "•"; font-size: 14px; }

.modal-body .legalterms table { width: 100%; }
.modal-body .legalterms table th { height: 30px; border : 1px solid #e3e3e3; }
.modal-body .legalterms table td { padding: 5px; text-align: center; border : 1px solid #e3e3e3; }
.modal-body .legalterms table td.text-left { text-align: left; }

.modal-body .legalterms .tbl-item .col-type { min-width: 110px; width: 80px; }
.modal-body .legalterms .tbl-item .col-item { min-width: 170px; width: 100px; }
.modal-body .legalterms .tbl-item .col-purpose { min-width: 400px; width: auto; max-width: 100%; }

.modal-body .legalterms .tbl-decree .col-decree { min-width: 300px; width: auto; }
.modal-body .legalterms .tbl-decree .col-info { min-width: 200px; width: auto; }
.modal-body .legalterms .tbl-decree .col-period { min-width: 70px; width: auto; }

.modal-body .legalterms .tbl-entrust .col-biz { min-width: 150px; width: auto; }
.modal-body .legalterms .tbl-entrust .col-work { min-width: 470px; width: auto; }

.modal-body .legalterms .tbl-contact .col-type { min-width: 150px; width: auto; }
.modal-body .legalterms .tbl-contact .col-name { min-width: 80px; width: auto; }
.modal-body .legalterms .tbl-contact .col-role { min-width: 80px; width: auto; }
.modal-body .legalterms .tbl-contact .col-tel { min-width: 120px; width: auto; }
.modal-body .legalterms .tbl-contact .col-email { min-width: 180px; width: auto; }

.modal-body .legalterms .tbl-gov .col-agency { min-width: 200px; width: auto; }
.modal-body .legalterms .tbl-gov .col-link { min-width: 240px; width: auto; }
.modal-body .legalterms .tbl-gov .col-tel { min-width: 200px; width: auto; }
/* end 개인정보취급방침/이용약관 */

input[type="text"],
input[type="password"],
input[type="email"] { padding: 0 16px; width: 100%; height: 48px; border:1px solid #e7e7e9; border-radius: 8px; outline: none; }
input[type="text"]::placeholder {  }

input[type="text"]:focus,
input[type="password"]:focus, 
input[type="email"]:focus { border:1px solid #094c76; }

/* PC */
@media screen and (min-width: 1025px) {
    .layout-container > .layout-head,
    .layout-container > .layout-foot { min-width: var(--width-main); }
    .layout-container > .layout-head > .header,
    .layout-container > .layout-body > .main,
    .layout-container > .layout-foot > .footer { margin: 0 auto; width: var(--width-main); min-width: var(--width-main); }
    .layout-container > .layout-body > .main { height: auto; min-height: calc(100vh - 70px - 274px); }

    .layout-modal .modal-wrap { padding: 30px; max-width: 1000px; max-height: 800px; }
    .layout-modal .modal-body { margin-top: 20px; }
    .header { justify-content: space-between; }
    .header .menu-wrap .gnbs { justify-content: flex-start; gap: 8px; }
    .header .gnbs a { padding: 0 12px;  height: 48px; line-height: 48px; }
    .header .gnbs a:hover { color: #094c76; }

    .header .gnbs .gnb > a { padding: 0 24px 0 12px; } 
    .header .gnbs .gnb > a::after { right: -14px; }
    .header .gnbs li { position: relative; }
    .header .gnbs li .lnbs { position: absolute; top: 100%; left: 50%; width: max-content; text-align: center; background: #fff; 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; }

    .header .gnbs li .lnbs a { padding: 0 24px; display: block; height: 40px; line-height: 40px; }
    .header .gnbs li .lnbs a:hover { color: #ffff; background: var(--main); }
    .header .menu-wrap .menu { display: none; }
    .footer .infodesk .infomation { margin-top: 20px; display: flex; justify-content: center; align-items: flex-start; gap: 60px; }
    .footer .infodesk .site-info { padding-top: 10px; display: flex; justify-content: center; align-items: flex-start; gap: 40px; }
}

/* 모바일 */
@media screen and (max-width: 1024px) {
    .layout-container > .layout-head { position: relative; }
    .layout-container > .layout-head > .header,
    .layout-container > .layout-body > .main,
    .layout-container > .layout-foot > .footer { width: 100%; }
    .layout-container > .layout-body > .main { height: auto; }

    .layout-modal .modal-wrap { padding: 16px; width: 90vw; min-width: 290px; max-width: 600px; max-height: 80%; }
    .layout-modal .modal-body { margin-top: 8px; }
    .layout-modal .modal-foot { margin-top: 12px; }

    .header { padding : 0 16px; }
    .header .menu-wrap { height: 48px; text-align: right; }

    .header .menu-wrap .menu { width: 48px; height: 48px; background: url('../images/icon/menu.svg') no-repeat center center / 48px; }
    .header .menu-wrap .menu.close { background-image: url('../images/icon/close.svg'); }
    .header .menu-wrap .gnbs { position: absolute; top: 100%; left: 0; width: 100%; max-height: 0; flex-direction: column; text-align: left; background: #fff; box-shadow: 0 5px 10px -1px rgba(0, 0, 0, 0.5); transition: max-height .15s ease,
    opacity .1s linear; opacity: 0; pointer-events: none; }
    .header .menu-wrap .menu.close + .gnbs { opacity: 1; pointer-events: auto; max-height: calc(100vh - 70px); transition: max-height .15s ease, opacity .1s linear; -webkit-overflow-scrolling: touch; overflow-y: auto; }

    .header .menu-wrap .gnbs li > a { padding: 0 24px; height: 48px; line-height: 48px; }
    .header .menu-wrap .gnbs > li:not(:last-child) { border-bottom: 1px solid #e3e3e3; }
    .header .menu-wrap .gnbs .gnb .lnb { padding-left: 16px; }

    .header .menu-wrap .gnbs .gnb .lnb a:active { color: #fff; background: #094c76; }

    .footer .infodesk .foot-logo { margin-top: 20px; width: 100%; text-align: center; }
    .footer .infodesk .site-info dl { margin-top: 20px; text-align: center; }
    .footer .infodesk .site-info dd {font-size: clamp(14px, 4vw, 15px); }
}