@charset "UTF-8";
/********************************** Fonts S ************************************/
@font-face { font-family: "SpoqaHanSansNeo"; font-style: normal; font-weight: 500; src: url("/font/SpoqaHanSansNeoMedium.woff2") format("woff2"), url("/font/SpoqaHanSansNeoMedium.woff") format("woff"); }
/********************************** Fonts E ************************************/
/********************************** Initial S ************************************/
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary, time, mark, audio, video { margin: 0; padding: 0; -webkit-print-color-adjust: exact; -webkit-tap-highlight-color: transparent; }
body { word-break: break-all; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
nav ul, ul, ol, li { list-style: outside none none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ""; content: none; }
a:link, a:visited, a:hover, a:active { text-decoration: none; }
hr { display: none; }
em, address, i { font-style: normal; }
img { border: 0 none; vertical-align: top; }
fieldset { border: 0 none; }
input { border: none;
    /* -webkit-text-fill-color: transparent;
    caret-color: transparent; */
}
input, select { margin: 0; padding: 0; vertical-align: middle; }
input[type=submit], input[type=reset], input[type=button] { border: 0; }
button { margin: 0; padding: 0; border: 0 none; cursor: pointer; }
textarea { margin: 0; padding: 0; }
table { width: 100%; border-collapse: collapse; border-spacing: 0; table-layout: fixed; }
caption, legend { overflow: hidden; width: 100%; height: 0; line-height: normal; font-size: medium; opacity: 0; word-break: break-all; }
fieldset, legend { position: relative; top: 0; left: 0; }
* { scrollbar-width: none !important; -ms-overflow-style: none !important; }
::-webkit-scrollbar { display: none !important; }
/********************************** Initial E ************************************/
/********************************** Common S ************************************/
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; }
html { font-size: 10px; }
body { font-family: "SpoqaHanSansNeo", "malgun", "Apple SD Gothic Neo", "돋움", Dotum, Verdana, Arial, sans-serif; font-size: 1.4rem; color: var(--gray8); line-height: 1.5; }
a { color: var(--gray8); -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; }
a:hover { text-decoration: none; }
img { -webkit-touch-callout: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; -webkit-user-select: none; }
textarea { appearance: none; -webkit-appearance: none; display: inline-block; padding: 1rem; border: 0.1rem solid #ddd; background: var(--white); line-height: 1.5; font-family: "SpoqaHanSansNeo", "Apple SD Gothic Neo", "malgun", "돋움", Dotum, Verdana, Arial, sans-serif; font-size: 1.4rem; color: var(--gray8); box-sizing: border-box; }
input, select, button { font-family: "SpoqaHanSansNeo", "Apple SD Gothic Neo", "malgun", "돋움", Dotum, Verdana, Arial, sans-serif; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; }
/* select{appearance:none;-webkit-appearance:none} */
input, textarea, button { appearance: none; -moz-appearance: none; -webkit-appearance: none; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; }
/* input[type="text"], input[type="password"], input[type="date"], input[type="time"], input[type="tel"], input[type="number"] {} */
input[type=radio], input[type=checkbox], button, label { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -webkit-tap-highlight-color: transparent; }
input[type=date]::-ms-clear { display: none; }
input[type=date]::-ms-reveal { display: none; }
input:active { background-color: transparent; }
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
input[type=number] { -moz-appearance: textfield; }

/*
input[readonly="readonly"] {}
input[disabled="disabled"] {}
input::placeholder {}
input::-webkit-input-placeholder {}
input::-moz-input-placeholder {}
input::-ms-input-placeholder {}
textarea::placeholder {}
textarea::-webkit-input-placeholder {}
textarea::-moz-input-placeholder {}
textarea::-ms-input-placeholder {}
*/
button { background-color: rgba(255, 255, 255, 0); }
/*다국어 폰트 초기화*/
.language *, .language ~ *, .language ~ popuparea * { font-family: "SpoqaHanSansNeo", "malgun", "Apple SD Gothic Neo", "돋움", Dotum, Verdana, Arial, sans-serif !important; }
:root { --jb-blue: #0565f0; --blue1:#f0f6ff; --blue2:#e5f1ff; --blue3:#c2dcff; --blue4:#5697f0; --blue5:#307ff0; --blue6:#175ec7; --blue7:#1d2d47; --blue8:#d1dcea; --gray1:#f5f7fa; --gray2:#f2f5f7; --gray3:#eceff4; --gray4:#e1e3e5; --gray5:#c0c6cc; --gray6:#a9b0b8; --gray7:#8c959f; --gray8:#6e7780; --gray9:#515961; --gray10:#212529; --white: #ffffff; --informative: #0565f0; --success: #00a684; --danger: #e5493a; --warning: #e18700; --disabled_bg: #b0ccf6; --shadow1:0px 1px 6px 0px rgba(33, 37, 41, 0.04), 0px 1px 1px 0px rgba(33, 37, 41, 0.02); --shadow2:0px 1px 16px 0px rgba(33, 37, 41, 0.04), 0px 6px 10px 0px rgba(33, 37, 41, 0.02); --shadow3:0px 2px 22px -1px rgba(33, 37, 41, 0.04), 0px 8px 10px 0px rgba(33, 37, 41, 0.02); --content01:#a162f7; --content02:#5979ff; --content03:#19a562; --content04:#1dbbd0; --content05:#0698a1; --content06:#c6a600; --content07:#ac4375; --content08:#6435c8; --content09:#1f4079; --content10:#ea695b; --content11:#b081ec; --content12:#1cb48f; --content13:#4685cf; --content14:#787aa8; --content15:#e4f7ff; --content16:#07a0e0; --content17:#d1e6ff; --content18:#fff8d4; --content19:#ff588e; --content20:#ec7995; --content21:#ffeef6; --content22:#ff3e3e; --content23:#feb031; --content24:#fff8b9; --content25:#fff1eb; --content26:#e1f8e1; --content27:#fff5db; --content28:#9d520d; --content29:#00a98b; --content30:#e2ffee; --content31:#0d9d7b; --content32:#e5f0ff; --content33:#edffdc; --content34:#3e9914; --content35:#d9ffe3; --content36:#d1f7ff; --content37:#f5ffcf; --content38:#5e9506; --content39:#d8ffd8; --content40:#0d9d4f; --content41:#f9f1ff; --content42:#dee5fa; --content43:#2f41e5; --content44:#e5fffd; --content45:#00a684; }
/* ----------------------- 공통 ----------------------- */
.bg_gray { background: var(--gray1); }
/* .inner { padding-left: 2rem !important; padding-right: 2rem !important; } */
.expendPad { margin-left: -2rem !important; margin-right: -2rem !important; padding-left: 2rem !important; padding-right: 2rem !important; }
[data-sticky=true] { width: 100%; position: fixed; left: 0; right: 0; top: -10rem; z-index: 3; background-color: var(--white); margin-top: 0; animation: topFix 0.5s forwards; }
@keyframes topFix {
    from { top: -10rem; }
    to { top: 5.2rem; }
}
.topFixed { position: fixed; width: 100%; left: 0; right: 0; padding-left: 2rem !important; padding-right: 2rem !important; background-color: var(--white); z-index: 10; top: 5.2rem; }
.dropShadow2 { box-shadow: var(--shadow2); }
.fontHGG { font-family: "HGGGothicssi" !important; }
.bodyScrollHidden { overflow: hidden !important; }
.hidden { overflow: hidden; position: absolute; clip: rect(0, 0, 0, 0); clip-path: circle(0); width: 1px; height: 1px; margin: -1px; border: 0; padding: 0; white-space: nowrap; }
.jbb_ub .hidden{display:inline !important;}
.yScroll { overflow-x: auto; overflow-y: hidden; white-space: nowrap; -webkit-overflow-scrolling: touch; font-size: 0; }
/* layout */
/* #contents { width: 100%; height: 100%; padding-top: 5.2rem; display: flex; flex-direction: column; } */
/* #contents .sec {display: flex; display: -webkit-flex; flex-direction: column; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; max-height: 100%; height: 100%; flex-grow: 1; padding-top: 5.2rem; padding-left: 2rem; padding-right: 2rem; padding-bottom: 2rem;} */
.bottomBtnArea { padding: 2rem; background-color: var(--white); display: flex; flex-direction: column; align-items: center; position: fixed; left: 0; bottom: 0; right: 0; z-index: 1; }
.bottomBtnArea .activeOrgKeypad .bottomBtnArea { bottom: -92px; }
.bottomBtnArea > *:not(:first-child) { margin-top: 1.6rem; }
.bottomBtnArea-m24 > *:not(:first-child) { margin-top: 2.4rem; }
.bottomBtnArea-gray { background-color: var(--gray1); }
.bottomBtnArea.row { flex-direction: row; }
.bottomBtnArea.row > *:not(:first-child) { margin-top: 0; margin-left: 0.8rem; }
.bottomBtnArea.full > * { width: 100%; }
.bottomBtnArea.gap32 > *:not(:first-child) { margin-top: 3.2rem; }

.activeOrgKeypad .bottomBtnArea{bottom:-100%;}

/* cmp_indicator_dot */
.cmp_indicator_dot { width: 100%; font-size: 0; text-align: center; margin-top: 1.6rem; }
.cmp_indicator_dot .swiper-pagination-bullet { width: 0.6rem; height: 0.6rem; background-color: var(--gray5); border-radius: 0.6rem; transition: all 0.2s; margin: 0 0.3rem !important; opacity: 1; }
.cmp_indicator_dot .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--jb-blue); width: 1.2rem; }
/* text */
.jb-blue { color: var(--jb-blue) !important; }
.blue1 { color: var(--blue1) !important; }
.blue2 { color: var(--blue2) !important; }
.blue3 { color: var(--blue3) !important; }
.blue4 { color: var(--blue4) !important; }
.blue5 { color: var(--blue5) !important; }
.blue6 { color: var(--blue6) !important; }
.blue7 { color: var(--blue7) !important; }
.gray1 { color: var(--gray1) !important; }
.gray2 { color: var(--gray2) !important; }
.gray3 { color: var(--gray3) !important; }
.gray4 { color: var(--gray4) !important; }
.gray5 { color: var(--gray5) !important; }
.gray6 { color: var(--gray6) !important; }
.gray7 { color: var(--gray7) !important; }
.gray8 { color: var(--gray8) !important; }
.gray9 { color: var(--gray9) !important; }
.gray10 { color: var(--gray10) !important; }
.white { color: var(--white) !important; }
.danger { color: var(--danger) !important; }
.success { color: var(--success) !important; }
.jb-blue .base { color: var(--jb-blue) !important; }
.blue1 .base { color: var(--blue1) !important; }
.blue2 .base { color: var(--blue2) !important; }
.blue3 .base { color: var(--blue3) !important; }
.blue4 .base { color: var(--blue4) !important; }
.blue5 .base { color: var(--blue5) !important; }
.blue6 .base { color: var(--blue6) !important; }
.blue7 .base { color: var(--blue7) !important; }
.gray1 .base { color: var(--gray1) !important; }
.gray2 .base { color: var(--gray2) !important; }
.gray3 .base { color: var(--gray3) !important; }
.gray4 .base { color: var(--gray4) !important; }
.gray5 .base { color: var(--gray5) !important; }
.gray6 .base { color: var(--gray6) !important; }
.gray7 .base { color: var(--gray7) !important; }
.gray8 .base { color: var(--gray8) !important; }
.gray9 .base { color: var(--gray9) !important; }
.gray10 .base { color: var(--gray10) !important; }
.white .base { color: var(--white); }
.danger .base { color: var(--danger) !important; }
.tL { text-align: left !important; }
.tC { text-align: center !important; }
.tR { text-align: right !important; }
.wB { font-weight: bold !important; }
.wM { font-weight: 500 !important; }
.wL { font-weight: 400 !important; }
.w100 { font-weight: 100 !important; }
.w200 { font-weight: 200 !important; }
.w300 { font-weight: 300 !important; }
.w400 { font-weight: 400 !important; }
.w600 { font-weight: 600 !important; }
.w800 { font-weight: 800 !important; }
.w900 { font-weight: 900 !important; }
.t12 { font-size: 1.2rem; line-height: 2rem; color: var(--gray8); font-weight: 500; word-break: keep-all; }
.t14 { font-size: 1.4rem; line-height: 2.2rem; color: var(--gray8); font-weight: 500; word-break: keep-all; }
.t16 { font-size: 1.6rem; line-height: 2.4rem; color: var(--gray10); font-weight: 500; word-break: keep-all; }
.t18 { font-size: 1.8rem; line-height: 2.6rem; color: var(--gray10); font-weight: 500; word-break: keep-all; letter-spacing:-0.2px;}
.t20 { font-size: 2rem; line-height: 2.8rem; color: var(--gray10); font-weight: bold; word-break: keep-all; letter-spacing:-0.6px;}

.flexInfoIcon{display:flex !important;}
.flexInfoIcon .ic16{margin-right:0.4rem;flex-shrink:0;margin-top:0.2rem;}

.t12G { font-family: "HGGGothicssi"; font-size: 1.2rem; line-height: 2rem; color: var(--gray8); font-weight: 800; word-break: keep-all; }
.t14G { font-family: "HGGGothicssi"; font-size: 1.4rem; line-height: 2.2rem; color: var(--gray8); font-weight: 800; word-break: keep-all; }
.t16G { font-family: "HGGGothicssi"; font-size: 1.6rem; line-height: 2.4rem; color: var(--gray10); font-weight: 800; word-break: keep-all; }
.t18G { font-family: "HGGGothicssi"; font-size: 1.8rem; line-height: 2.4rem; color: var(--gray10); font-weight: 800; word-break: keep-all; }
.t20G { font-family: "HGGGothicssi"; font-size: 2rem; line-height: 2.8rem; color: var(--gray10); font-weight: 800; word-break: keep-all;letter-spacing:-0.6px;}
.sDot { position: relative; padding-left: 1.2rem; }
.sDot::before { content: ""; position: absolute; left: 0; top: 0.7rem; display: block; width: 0.3rem; height: 0.3rem; border-radius: 50%; background-color: var(--gray5); z-index: 1; }
.gray9.sDot::before{background-color: var(--gray8);}

.rotate90 { transform: rotate(90deg) !important; }
.rotate180 { transform: rotate(180deg) !important; }
.rotate270 { transform: rotate(270deg) !important; }
.rotate360 { transform: rotate(360deg) !important; }
/* 아이콘 사이즈 공통 ============================== */
.ic12 { display: inline-block; vertical-align: middle; text-indent: -9999px; width: 1.2rem; height: 1.2rem; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; }
.ic14 { display: inline-block; vertical-align: middle; text-indent: -9999px; width: 1.4rem; height: 1.4rem; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; }
.ic16 { display: inline-block; vertical-align: middle; text-indent: -9999px; width: 1.6rem; height: 1.6rem; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; }
.ic20 { display: inline-block; vertical-align: middle; text-indent: -9999px; width: 2rem; height: 2rem; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; }
.ic24 { display: inline-block; vertical-align: middle; text-indent: -9999px; width: 2.4rem; height: 2.4rem; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; }
.ic28 { display: inline-block; vertical-align: middle; text-indent: -9999px; width: 2.8rem; height: 2.8rem; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; }
.ic32 { display: inline-block; vertical-align: middle; text-indent: -9999px; width: 3.2rem; height: 3.2rem; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; }
.ic40 { display: inline-block; vertical-align: middle; text-indent: -9999px; width: 3.2rem; height: 3.2rem; background-repeat: no-repeat; background-position: center center; background-size: 100% auto; }
.big_font { font-size: 11px; }
.skeleton { position: relative; overflow: hidden; border-radius: 10px !important; }
.skeleton::after { content: ""; display: block; position: absolute !important; left: -3px !important; top: 0 !important; width: calc(100% + 6px) !important; height: 100% !important; background: #e1e3e6; background: linear-gradient(90deg, #e1e3e6 5%, var(--gray1) 25%, #e1e3e6 45%); border-radius: 5px !important; background-size: 200% 100% !important; animation: 1.5s shine linear infinite !important; z-index: 10; }
@keyframes shine {
    to { background-position-x: -200%; }
}
@media all and (max-width:359px) {
    html { font-size: 8px; }
    .big_font { font-size: 9px; }
}
@media print {
    html, body { width: 100%; }
}
/* layout class jbb_ub */
.jbb_ub.ios.m-body { overflow: visible; }
.jbb_ub #header { position: fixed; z-index: 50; width: 100%; }
.jbb_ub .sec { padding-bottom: 2rem; height: max-content; }
.jbb_ub .sec.flexCont{height:100%;} 
.jbb_ub .sec.fullsize { padding-bottom: 0rem; height: calc(100vh - 5.2rem); height: calc(var(--vh, 1vh) * 100 - 5.2rem); }
.jbb_ub .inner { padding-left: 2rem !important; padding-right: 2rem !important; }
.jbb_ub popuparea .inner{padding-left: 0rem !important; padding-right: 0rem !important; }
.jbb_ub #calendar_area .inner{padding-left: 0rem !important; padding-right: 0rem !important; }
.jbb_ub .page.mobile #contents { height: 100%; overflow: hidden; }
.jbb_ub .page.mobile .sec { height: 100%; max-height: none; overflow-y: auto; overflow-x: hidden; }
#headerUB ~ #contents { padding-top: 0; height: calc(100% - 5.2rem); }