@charset "utf-8";

/* color 및 폰트사이즈 변수설정 */
:root {
    --100vh: calc(var(--vh, 1vh) * 100);
    --100vw: calc(var(--vw, 1vw) * 100);
    --scalew: var(--scalew);

    --main-font: "Pretendard", sans-serif;

    --primary: #335c97;
    --primary-light: #4e84d3;
    --cobalt-blue: #3882f5;
    --alice-blue: #e6eefa;
    --secondary: #f2f6fd;
    --tertiary: #e2eeff;
    --quaternary: #ecf3fe;
    --yellow-light: #fff9eb;
    --positive: #51c2ac;
    --negative: #ff5f6a;
    --dismiss: #666666;
    /* red */
    --red-300: #ff5f6a;
    --red-400: #ff2e3c;
    --red-500: #fa0011;
    /* green */
    --green-400: #51c2ac;
    /* blue */
    --blue-50: #f1f6fe;
    --blue-100: #caddfc;
    --blue-200: #99bffa;
    --blue-300: #69a0f7;
    --blue-400: #3882f5;
    --blue-500: #0c64ed;
    --blue-600: #0a50bd;
    --blue-700: #073b8d;
    --blue-800: #05275c;
    /* dark-blue */
    --dark-blue-50: #f2f6fb;
    --dark-blue-100: #d9e3f2;
    --dark-blue-200: #b3c7e5;
    --dark-blue-300: #8dacd8;
    --dark-blue-400: #6790cb;
    --dark-blue-500: #4074bf;
    --dark-blue-600: #335c97;
    --dark-blue-700: #274672;
    --dark-blue-800: #1a2e4c;

    --lc-gray: #c4cbd3;

    /* gray Scale */
    --c-gray-50: #f9fafa;
    --c-gray-100: #f4f5f6;
    --c-gray-200: #e3e5e8;
    --c-gray-300: #c7ccd1;
    --c-gray-400: #b0b7bf;
    --c-gray-500: #85909d;
    --c-gray-600: #6a7684;
    --c-gray-700: #4f5867;
    --c-gray-800: #3a404b;
    --c-gray-900: #2c313a;
    --white: #ffffff;
    --gray-000: #f8fafd;
    --gray-100: #f6f7f8;
    --gray-200: #f8f8f8;
    --gray-300: #eeeeee;
    --gray-400: #b0b9c2;
    --gray-500: #81878c;

    --bg-gray: #eaeaea;
    --bg-light-gray2: #f2f3f5; /* TabBtn, Table */
    --bg-light-gray6: #f4f5f6; /* boxBg */
    --bg-light-pink: #ffeeec;

    --bg-dim-white: rgba(255, 255, 255, 0.8);
    --bg-dim-gray: rgba(79, 88, 103, 0.7);
    --bg-dim-primary: rgba(57, 132, 243, 0.08);
    --bg-dim-focusBlue: rgba(56, 130, 245, 0.1);
    --bg-readonly: #e9e9e9;
    --bg-disabled: #e9e9e9;

    --fc-readonly: #666;
    --fc-disabled: #666;

    --bx-s-default: 0px 2px 4px rgba(15, 57, 97, 0.1);
    --bx-s-footer: 0px -2px 4px rgba(15, 57, 97, 0.1);
    --input-box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.16);
    --focused-box-shadow: inset 0 0 0 2px rgba(0, 162, 197, 1);
    --active-box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.6);
    --focused-transition: box-shadow 0.3s ease;

    /* 폰트사이즈 변수설정 */
    --fs-ex: 3.4rem;
    --fs-xxxl: 2.8rem; /* 간편인증 키패드 */
    --fs-xxl: 2.6rem;
    --fs-xl: 2.4rem;
    --fs-l: 2.2rem;
    --fs-ml: 2rem;
    --fs-m: 1.8rem;
    --fs-ms: 1.6rem;
    --fs-s: 1.5rem;
    --fs-xs: 1.4rem;
    --fs-xxs: 1.2rem;

    /* 폰트두께변수설정 */
    --fw-regular: 400;
    --fw-default: 500;
    --fw-bold: 700;

    /* line-height 변수설정 */
    --lnh-default: 1.2;
    --lnh-ex: 3.8rem;
    --lnh-xxxl: 2.8rem;
    --lnh-xxl: 2.6rem;
    --lnh-xl: 2.4rem;
    --lnh-l: 2.2rem;
    --lnh-ml: 2rem;
    --lnh-m: 1.8rem;
    --lnh-ms: 1.6rem;
}

/* reset.css */
html {
    font-size: 10px; /* 1rem = 10px */
    width: 100%;
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
    vertical-align: middle;

    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: constant(safe-area-inset-bottom);
}
body {
    width: 100%;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    font-family: "Pretendard Variable", "Pretendard", sans-serif;
    font-size: 1.6rem;
    font-weight: var(--fw-default);
    line-height: 1.2;
    letter-spacing: -0.5px;

    padding-bottom: env(safe-area-inset-bottom);
    padding-bottom: constant(safe-area-inset-bottom);
}
/* iOS WebView일 때만 default 굵기 변경코드 */
.ios-webview {
    --fw-default: 500;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    color: var(--c-gray-900);
    font-family: "Pretendard Variable", "Pretendard", sans-serif;
}
html {
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}
a {
    color: var(--c-gray-900);
    text-decoration: none;
    -webkit-touch-callout: none;
    user-select: none;
    -webkit-user-select: none;
}
a:active,
a:hover {
    text-decoration: none;
}
button,
input,
select,
textarea {
    vertical-align: middle;
    border: 0;
    background: none;
    cursor: pointer;
}
input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
}
fieldset,
img {
    border: 0;
}
dl,
ul,
ol,
menu,
li {
    list-style: none;
}
blockquote,
q {
    quotes: none;
}
blockquote::before,
blockquote::after,
q::before,
q::after {
    content: "";
}
table {
    border-collapse:separate;
    border-spacing:0;
}
/* Body Text */
p {
    /* 기본 문단 폰트 크기 설정 */
}
/* Main Section */
main {
    padding: 2rem;
}
/* Misc */
address,
caption,
cite,
code,
dfn,
em,
var {
    font-style: normal;
    font-weight: normal;
}
/* hide :접근성 측면 스크린리더가 내용을 읽을수 있음 */
.hide {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}
/* display :none 내용을 완전히 숨김 스크린리더가 내용을 못읽음*/
.dpNone {
    display: none !important;
}

.ellipsis {
    overflow: hidden;
    display: inline-block;
    max-width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ellipsis2 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.ellipsis3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.ellipsis4 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
}
.ellipsis5 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
}

/* title font */
h4 {
    font-size: 3.2rem;
    line-height: 1.2;
    font-weight: var(--fw-default);
}
h5 {
    font-size: 2.8rem;
    line-height: 1.2;
    font-weight: var(--fw-default);
}
h6 {
    font-size: 2.4rem;
    line-height: 1.2;
    font-weight: var(--fw-default);
}
h7 {
    font-size: 2.2rem;
    line-height: 1.2;
    font-weight: var(--fw-default);
}
h8 {
    font-size: 2rem;
    line-height: 1.2;
    font-weight: var(--fw-default);
}

/* flex */
.noFlex {
    flex: none !important;
}
.flex {
    display: flex !important;
}
.flexL {
    display: flex !important;
    justify-content: flex-start !important;
}
.flexR {
    display: flex !important;
    justify-content: flex-end !important;
}
.flexC {
    display: flex !important;
    justify-content: center !important;
}
.flexSb {
    display: flex !important;
    justify-content: space-between !important;
}
.flexAt {
    display: flex !important;
    align-items: flex-start !important;
}
.flexAb {
    display: flex !important;
    align-items: flex-end !important;
}
.flexAc {
    display: flex !important;
    align-items: center !important;
}
.flex-column {
    flex-direction: column !important;
}
.flex-wrap {
    flex-wrap: wrap !important;
}
.nowrap {
    flex-wrap: nowrap !important;
}
.flex1 {
    flex: 1;
}
.flex-1 {
    flex: 1 !important;
}
.gap5 {
    gap: 0.5rem !important;
}
.gap10 {
    gap: 1rem !important;
}
.gap12 {
    gap: 1.2rem !important;
}
.gap15 {
    gap: 1.5rem !important;
}
.gap20 {
    gap: 2rem !important;
}
/* display */
.dpBlock {
    display: block;
}

/* margin */
.m0 {
    margin: 0 !important;
}
.mt0 {
    margin-top: 0 !important;
}
.mt3 {
    margin-top: 0.3rem !important;
}
.mt5 {
    margin-top: 0.5rem !important;
}
.mt7 {
    margin-top: 0.7rem !important;
}
.mt10 {
    margin-top: 1rem !important;
}
.mt12 {
    margin-top: 1.2rem !important;
}
.mt15 {
    margin-top: 1.5rem !important;
}
.mt18 {
    margin-top: 1.8rem !important;
}
.mt20 {
    margin-top: 2rem !important;
}
.mt22 {
    margin-top: 2.2rem !important;
}
.mt25 {
    margin-top: 2.5rem !important;
}
.mt30 {
    margin-top: 3rem !important;
}
.mt32 {
    margin-top: 3.2rem !important;
}
.mt35 {
    margin-top: 3.5rem !important;
}
.mt40 {
    margin-top: 4rem !important;
}
.mt45 {
    margin-top: 4.5rem !important;
}
.mt50 {
    margin-top: 5rem !important;
}
.mt52 {
    margin-top: 5.2rem !important;
}
.mt55 {
    margin-top: 5.5rem !important;
}
.mt80 {
    margin-top: 8rem !important;
}

.mb0 {
    margin-bottom: 0 !important;
}
.mb5 {
    margin-bottom: 0.5rem !important;
}
.mb10 {
    margin-bottom: 1rem !important;
}
.mb12 {
    margin-bottom: 1.2rem !important;
}
.mb14 {
    margin-bottom: 1.4rem !important;
}
.mb15 {
    margin-bottom: 1.5rem !important;
}
.mb18 {
    margin-bottom: 1.8rem !important;
}
.mb20 {
    margin-bottom: 2rem !important;
}
.mb25 {
    margin-bottom: 2.5rem !important;
}
.mb30 {
    margin-bottom: 3rem !important;
}
.mb35 {
    margin-bottom: 3.5rem !important;
}
.mb40 {
    margin-bottom: 4rem !important;
}
.mb50 {
    margin-bottom: 5rem !important;
}

.ml8 {
    margin-left: 0.8rem !important;
}
.ml10 {
    margin-left: 1rem !important;
}
.ml13 {
    margin-left: 1.3rem !important;
}
.ml14 {
    margin-left: 1.4rem !important;
}
.ml15 {
    margin-left: 1.5rem !important;
}
.ml20 {
    margin-left: 2rem !important;
}
.mtb0 {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
.mtb5 {
    margin-top: 0.5rem !important;
    margin-bottom: 0.5rem !important;
}
.mtb10 {
    margin-top: 1rem !important;
    margin-bottom: 1rem !important;
}
.mtb15 {
    margin: 1.5rem 0 !important;
}
.mtb20 {
    margin: 2rem 0 !important;
}

/* padding */
.pt0 {
    padding-top: 0 !important;
}
.pt5 {
    padding-top: 0.5rem !important;
}
.pt8 {
    padding-top: 0.8rem !important;
}
.pt10 {
    padding-top: 1rem !important;
}
.pt15 {
    padding-top: 1.5rem !important;
}
.pt20 {
    padding-top: 2rem !important;
}
.pt22 {
    padding-top: 2.2rem !important;
}
.pt25 {
    padding-top: 2.5rem !important;
}
.pt30 {
    padding-top: 3rem !important;
}
.pt32 {
    padding-top: 3.2rem !important;
}
.pt40 {
    padding-top: 4rem !important;
}
.pt50 {
    padding-top: 5rem !important;
}
.pt55 {
    padding-top: 5.5rem !important;
}
.pt60 {
    padding-top: 6rem !important;
}
.pt70 {
    padding-top: 7rem !important;
}
.pt80 {
    padding-top: 8rem !important;
}
.pt100 {
    padding-top: 10rem !important;
}
.pt130 {
    padding-top: 13rem !important;
}

.pb0 {
    padding-bottom: 0 !important;
}
.pb5 {
    padding-bottom: 0.5rem !important;
}
.pb10 {
    padding-bottom: 1rem !important;
}
.pb15 {
    padding-bottom: 1.5rem !important;
}
.pb20 {
    padding-bottom: 2rem !important;
}
.pb30 {
    padding-bottom: 3rem !important;
}
.pb33 {
    padding-bottom: 3.3rem !important;
}
.pb35 {
    padding-bottom: 3.5rem !important;
}
.pb40 {
    padding-bottom: 4rem !important;
}
.pb50 {
    padding-bottom: 5rem !important;
}
.pb80 {
    padding-bottom: 8rem !important;
}
.pb100 {
    padding-bottom: 10rem !important;
}
.pb140 {
    padding-bottom: 14rem !important;
}
.pb250 {
    padding-bottom: 25rem !important;
}

.p0 {
    padding: 0 !important;
}
.p10 {
    padding: 1rem !important;
}
.pr0 {
    padding-right: 0 !important;
}
.pr20 {
    padding-right: 2rem !important;
}
.pl0 {
    padding-left: 0 !important;
}
.pl5 {
    padding-left: 0.5rem !important;
}
.pl10 {
    padding-left: 1rem !important;
}
.pl20 {
    padding-left: 2rem !important;
}
.pl25 {
    padding-left: 2.5rem !important;
}
.plr0 {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.plr20 {
    padding: 0 2rem !important;
}

.ptb0 {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
.ptb10 {
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
}
.ptb20 {
    padding: 2rem 0 !important;
}
.ptb25 {
    padding: 2.5rem 0 !important;
}
.ptb30 {
    padding: 3rem 0 !important;
}
.ptb50 {
    padding: 5rem 0 !important;
}

.grayBoxp {
    padding: 1.5rem 1rem 1rem 2rem !important;
}

/* font-size */
.fs38 {
    font-size: 3.8rem !important;
}
.fs28 {
    font-size: 2.8rem !important;
}
.fs26 {
    font-size: 2.6rem !important;
}
.fs24 {
    font-size: 2.4rem !important;
}
.fs22 {
    font-size: 2.2rem !important;
}
.fs20 {
    font-size: 2rem !important;
}
.fs18 {
    font-size: 1.8rem !important;
}
.fs16 {
    font-size: 1.6rem !important;
}
.fs14 {
    font-size: 1.4rem !important;
}

/* font-weight */
.fw400 {
    font-weight: var(--fw-regular) !important;
}
.fw500 {
    font-weight: var(--fw-default) !important;
}
.fw700,
.bold {
    font-weight: var(--fw-bold) !important;
}

.text-l {
    text-align: left !important;
}
.text-r {
    text-align: right !important;
}
.text-c {
    text-align: center !important;
}

/* color */
.colorMain {
    color: var(--cobalt-blue) !important;
}
.colorBlue {
    color: var(--cobalt-blue) !important;
    font-weight: inherit;
}
.red {
    color: var(--negative);
    font-weight: inherit;
}
.color-main {
    color: #0f3961 !important;
}
.color-sub {
    color: #3b7bdb !important;
}
.color-sub2 {
    color: #3984f3 !important;
}
.color-red {
    color: #e00000 !important;
}
.gray900 {
    color: var(--c-gray-900);
}
/* color */
.mainColor {
    color: #0c3356 !important;
}

/* bg */
.bgLgray {
    background-color: var(--gray-200) !important;
    border: 1px solid var(--gray-200) !important;
} /*selectbox 적용*/
.bgCgray100 {
    background-color: var(--gray-000) !important;
}
.bgtrans {
    background-color: transparent;
}
/* width */
.w3 {
    width: 3rem !important;
}
.w5 {
    width: 5rem !important;
}
.w6 {
    width: 6rem !important;
}
.w7 {
    width: 7rem !important;
}
.w8 {
    width: 8rem !important;
}
.w10 {
    width: 10rem !important;
}
.w12 {
    width: 12rem !important;
}
.w15 {
    width: 15rem !important;
}
.w18 {
    width: 18rem !important;
}
.w20 {
    width: 20rem !important;
}
.w25 {
    width: 25rem !important;
}
.w30 {
    width: 30rem !important;
}
.w30p {
    width: 30% !important;
}
.w50p {
    width: 50% !important;
}
.w70p {
    width: 57% !important;
}
.w100p {
    width: 100% !important;
}
.w80 {
    width: 8rem !important;
}
.wfit {
    width: fit-content !important;
}

/* height */
.h200 {
    height: 20rem !important;
}
.h423 {
    height: 42.3rem !important;
}
.h100 {
    height: 10rem !important;
}

/* line-height */
.lh10 {
    line-height: 1 !important;
}
.lh14 {
    line-height: 1.4 !important;
}

/* align */
.at {
    vertical-align: top !important;
}
.ab {
    vertical-align: bottom !important;
}
.al {
    text-align: left !important;
}
.ar {
    text-align: right !important;
}
.ac {
    text-align: center !important;
}

/* border */
.brd0 {
    border: none !important;
}
.brdT1 {
    border-top: 1px solid var(--c-gray-200);
}
.brdB1 {
    border-bottom: 1px solid var(--c-gray-200);
}
.brdT6 {
    border-top: 6px solid var(--gray-1s00);
}
.brdT12 {
    border-top: 12px solid var(--gray-100);
}
.brdT8 {
    border-top: 8px solid var(--c-gray-100);
}

/* 링크 */
/* .underline {
  color: var(--cobalt-blue) !important;
  text-decoration: underline !important;
} */
.onlyunderline {
    text-decoration: underline !important;
}

.asterisk {
    display: inline-block;
    color: var(--negative);
    margin: 0 0.3rem;
}
/********************** button style ***************************/
/* 상단 헤더버튼 */
.comBtn {
    font-size: 2rem;
    font-weight: var(--fw-bold);
    padding: 0 2rem;
    color: #0f3b62;
    border: 1px solid #0f3b62;
    border-radius: 0.4rem;
    height: 42px;
    line-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.reflBtn {
    width: 2rem;
    height: 2rem;
    background: url(../img/ico_refresh.svg) no-repeat center;
    background-size: 1.8rem;
}
.backBtn {
    width: 2.4rem;
    height: 2.4rem;
    background: url(../img/ico-back.svg) left center no-repeat;
    background-size: 2.4rem auto;
}
/* 공통버튼 사이즈 */
.bigBtn {
    width: 100%;
    height: 5.7rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-m);
    font-weight: var(--fw-default);
    border-radius: 1rem;
    padding: 0 2rem;
}
.bigBtn.downloadBtn2 {
    justify-content: flex-start;
    padding-right: 50px;
    text-align: left;
}
.lBtn {
    width: 100%;
    height: 5.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-m);
    font-weight: var(--fw-default);
    border-radius: 1rem;
    padding: 0 1rem;
}
.mBtn {
    width: 100%;
    height: 4.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-m);
    font-weight: var(--fw-default);
    border-radius: 1rem;
    padding: 0 1rem;
}
.sBtn {
    width: 100%;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    font-weight: var(--fw-default);
    border-radius: 0.6rem;
    padding: 0 1rem;
}
.xsBtn {
    height: 2.6rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    font-weight: var(--fw-default);
    border-radius: 0.4rem;
    padding: 0 1rem;
}
/* 버튼 색상 타입 */
.basicBtn {
    background: var(--primary);
    color: var(--white);
}
.basicBtn:active {
    background: var(--dark-blue-700);
}
.basicBtn:disabled {
    background: var(--c-gray-200);
    color: var(--c-gray-400);
}
.focusBlueBtn {
    background: var(--cobalt-blue);
    color: var(--white);
}
.skyBtn {
    background: var(--blue-50);
    color: var(--primary);
}
.skyBtn:active {
    background: var(--blue-100);
}
.skyBtn:disabled {
    color: var(--dark-blue-300);
}
.blueBtn {
    background: var(--bg-dim-primary);
    color: var(--cobalt-blue);
    border: 1px solid var(--cobalt-blue);
}
.blueBtn:disabled {
    background: var(--c-gray-200);
    color: var(--c-gray-400);
    border: 1px solid var(--c-gray-200);
}
.grayBtn {
    background: var(--c-gray-100);
    color: var(--c-gray-800);
}
.grayBtn:active {
    background: var(--c-gray-200);
}
.grayBtn:disabled {
    background: var(--c-gray-100);
    color: var(--c-gray-300);
}
.whiteBtn {
    background: var(--white);
    color: var(--c-gray-800);
    border: 1px solid var(--c-gray-200);
}
.whiteBtn.on,
.whiteBtn:active {
    background: var(--blue-50);
    color: var(--cobalt-blue);
    border-color: var(--cobalt-blue);
}
.whiteBtn:disabled {
    background: var(--c-gray-100);
    color: var(--c-gray-300);
    border-color: var(--c-gray-300);
}
.noClick {
    pointer-events: none;
    cursor: default;
}
/* 선택버튼 */
.btnWrap.selbtnB > .mBtn {
    height: 4.9rem !important;
    font-size: var(--fs-ms) !important;
}
button[data-auth-btn] {
    height: 4.9rem;
    font-size: var(--fs-ms);
}
.btnWrap > button[data-auth-btn] {
    height: 4.7rem;
    font-size: var(--fs-ms);
}
/* .btnWrap > button[data-auth-btn]:first-child {font-size:var(--fs-m);} */
/* 버튼사이즈 */
.btn40 {
    flex: 0 0 calc(40% - 0.5rem);
}
.btn60 {
    flex: 0 0 calc(60% - 0.5rem);
}
.btn30 {
    flex: 0 0 calc(30% - 0.5rem);
}
.btn70 {
    flex: 0 0 calc(70% - 0.5rem);
}

/* 이미지 버튼 */
.addBtn {
    background: #fff url("../img/ico_plus.svg") no-repeat center center;
    background-size: 1.8rem;
    color: var(--c-gray-700);
    border: 1px solid var(--c-gray-200);
}
.addIco::before {
    content: "";
    display: inline-block;
    width: 2.4rem;
    height: 2.4rem;
    margin-right: 1rem;
    background: #fff url("../img/ico_add.svg") no-repeat center center;
    background-size: 2.2rem;
}
.cancelBtn {
    background: #e8ecf0;
    color: #333;
}
.yesBtn {
    background: var(--white);
    color: #171717;
    border: 1px solid #cdd4da;
}
.downloadBtn {
    width: 100%;
    height: 6rem;
    font-size: 2.2rem;
    border: 1px solid #0c3356;
    color: #0c3356;
    border-radius: 1rem;
    font-weight: var(--fw-bold);
    display: flex;
    align-items: center;
    justify-content: center;
}
.uploadBtn {
    background: url("../img/ico_upload.svg") center center no-repeat;
    background-size: 2.4rem;
    width: 6.4rem;
}
.downloadBtn2 {
    background: url("../img/ico-download.svg") center right 2rem no-repeat;
    background-size: 2.4rem;
}
.arrowBtn {
    background: url("../img/ico_arrow_rightB.svg") center right 1.5rem no-repeat;
    background-size: 2.4rem;
    justify-content: flex-start !important;
    padding: 0 2rem;
}
.arrowBtn:active {
    background: var(--c-gray-100) url("../img/ico_arrow_right.svg") center right
        1.5rem no-repeat;
    background-size: 2.4rem;
    border-color: var(--c-gray-200);
    color: var(--c-gray-800);
}

.txtArrowBtn {
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    background: url("../img/ico_arrow_right.svg") top 0.6rem right no-repeat;
    background-size: 1.4rem;
    padding: 0.5rem 2rem 0.5rem 0;
}
.txtArrowDetailBtn {
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    background: url("../img/ico_arrow_sdown.svg") top 0.6rem right no-repeat;
    background-size: 1.4rem;
    padding: 0.5rem 2rem 0.5rem 0;
}
.arrowUp {
    display: inline-block;
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    background: url("../img/ico_arrow_down_s.svg") no-repeat center right;
    background-size: 1.6rem;
    padding: 0.5rem 2rem 0.5rem 0;
}
.arrowDown {
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    background: url("../img/ico_arrow_up_s.svg") no-repeat center right;
    background-size: 1.6rem;
    padding: 0.5rem 2rem 0.5rem 0;
}
.arrowBtmBtn {
    position: relative;
    padding: 0.5rem 2.5rem 0.5rem 0;
}
.arrowBtmBtn::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 0;
    width: 2rem;
    height: 2rem;
    background: url("../img/ico_arrow_sdown.svg") center right no-repeat;
    background-size: 2rem;
    transition: transform 0.3s ease;
}
.arrowBtmBtn.close::after {
    transform: translateY(-50%) rotate(180deg);
}
.arrowrightB {
    width: 2.4rem;
    height: 2.4rem;
    background: url("../img/ico_arrow_right_login.svg") no-repeat center;
    background-size: 2.4rem;
}
.arrowB {
    width: 3rem !important;
    height: 3rem;
    background: url("../img/ico_arrow_down_B.svg") no-repeat center;
    background-size: 2.6rem;
}
.arrowB.open {
    transform: rotate(0deg);
}
.arrowB.close {
    transform: rotate(180deg);
}
.popClose {
    width: 2.4rem;
    height: 2.4rem;
    background: url(../img/ico-close-black.svg) no-repeat center right;
    background-size: 1.8rem;
    flex: 0 0 auto;
}
/* icon 계좌복사 */
.btnCopy {
    width: 1.8rem;
    height: 1.8rem;
    background: url(../img/ico-copy.svg) no-repeat center left;
    background-size: 1.2rem;
    margin: 0 0.5rem;
}

button:disabled,
button.disabled {
    pointer-events: none;
}
a:disabled,
a.disabled {
    pointer-events: none;
}

/********************** 기본 스타일을 위한 checkbox **********************/
.checkbox {
    display: none; /* 체크박스를 숨깁니다 */
}
.checkbox + label {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: #000;
    font-size: 1.6rem;
}
.checkbox + label::before {
    content: "";
    display: inline-block;
    width: 2rem;
    height: 2rem;
    margin-right: 0.5rem;
    border: 1px solid #ccc;
    background-size: contain;
    background-repeat: no-repeat;
    border-radius: 0.2rem;
}
.checkbox:checked + label::before {
    background-image: url("../img/ico-checkbox.svg"); /* 체크되었을 때 이미지 */
}

/********************** 스위치 checkbox ***************************/
.toggleInput {
    display: none;
} /* 기존의 checkbox 버튼 숨기기 */
/* 토글 스타일 지정*/
.toggleLabel {
    -webkit-appearance: none !important;
    position: relative;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    width: 7.5rem !important;
    height: 3rem;
    border-radius: 3rem;
    cursor: pointer;
    background: #c4cbd3;
    transition: box-shadow 0.3s ease-in-out, padding 0.25s ease-in-out;
    transition-delay: 0.1s, 0s;
}
.toggleLabel::after {
    content: "";
    position: absolute;
    left: 0.4rem;
    top: 50%;
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 100%;
    background-color: var(--white);
    transform: translateY(-50%);
    box-shadow: 1px 3px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}
/* 스위치(체크박스)가 토글(체크)되었을 때 글씨(ON/OFF) */
.toggleLabel::before {
    content: "쉬운홈";
    font-size: var(--fs-s);
    color: var(--white);
    position: absolute;
    left: 2.9rem;
    top: 55%;
    transform: translateY(-55%);
    transition: all 0.4s;
}
/* 토글 ON 스타일 지정*/
.toggleInput:checked + .toggleLabel {
    background: var(--cobalt-blue);
}
/* 토글 ON인 경우에 버튼 위치 지정 */
.toggleInput:checked + .toggleLabel::after {
    left: calc(100% - 2.5rem);
}
/* 토글 ON인 경우에 버튼 위치 지정 */
.toggleInput:checked + .toggleLabel::before {
    content: "쉬운홈";
    color: var(--white);
    left: 0.9rem;
}

/********************** input ***************************/
textarea {
    width: 100%;
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    border: 1px solid var(--c-gray-200);
    padding: 1.2rem;
    border-radius: 1rem !important;
}
textarea:focus {
    outline: none;
    border: 1px solid var(--cobalt-blue);
}

.input,
.input:disabled {
    -webkit-appearance: none;
    appearance: none;
    -webkit-text-fill-color: inherit;
    opacity: 1;
}
.input {
    width: 100%;
    height: 5.4rem;
    font-size: var(--fs-m);
    color: var(--c-gray-800);
    border: 1px solid var(--c-gray-200);
    padding: 0 1.6rem;
    border-radius: 1rem !important;
}
input::placeholder {
    color: var(--c-gray-300);
}
/* Chrome, Safari, Opera, Microsoft Edge */
::-webkit-input-placeholder {
    color: var(--c-gray-300);
}
/* Firefox 19+ */
::-moz-placeholder {
    color: var(--c-gray-300);
}
/* Firefox 18- */
:-moz-placeholder {
    color: var(--c-gray-300);
}
/* Internet Explorer 10-11 */
:-ms-input-placeholder {
    color: var(--c-gray-300);
}

.input[readonly] {
    border-color: var(--c-gray-200) !important;
}

.input:focus {
    outline: none;
    border: 1px solid var(--cobalt-blue);
}
.select.errorInput,
.select.errorInput:focus,
.input.errorInput,
.input.errorInput:focus {
    outline: none;
    border-color: var(--negative) !important;
}
.select.errorInput ~ p.valueMsg,
.input.errorInput ~ p.valueMsg {
    display: block;
    position: relative;
    font-size: var(--fs-xs);
    color: var(--negative);
    font-weight: var(--fw-regular);
    padding-left: 1.5rem;
}
.select.errorInput ~ p.valueMsg::before,
.input.errorInput ~ p.valueMsg::before {
    content: "";
    display: block;
    position: absolute;
    width: 1.4rem;
    height: 1.4rem;
    top: 0.1rem;
    left: 0;
    background: url(../img/ico_serror.svg) no-repeat center / 1.4rem;
}
.input.agreeInput,
.input.agreeInput:focus {
    outline: none;
    border-color: var(--cobalt-blue) !important;
}
.input.agreeInput ~ p.valueMsg {
    display: block;
    font-size: var(--fs-xs);
    color: var(--cobalt-blue);
}
.select.correctInput,
.select.correctInput:focus,
.input.correctInput,
.input.correctInput:focus {
    outline: none;
    border-color: var(--positive) !important;
}
.select.correctInput ~ p.valueMsg,
.input.correctInput ~ p.valueMsg {
    display: block;
    position: relative;
    font-size: var(--fs-xs);
    color: var(--positive);
    font-weight: var(--fw-regular);
    padding-left: 1.5rem;
}
.select.correctInput ~ p.valueMsg::before,
.input.correctInput ~ p.valueMsg::before {
    content: "";
    display: block;
    position: absolute;
    width: 1.4rem;
    height: 1.4rem;
    top: 0.1rem;
    left: 0;
    background: url(../img/ico_scorrect.svg) no-repeat center / 1.4rem;
}

.select:disabled,
.input:disabled,
.input.disabled {
    background: var(--c-gray-100) !important;
    color: var(--c-gray-300) !important;
    border-color: var(--c-gray-300) !important;
    pointer-events: none;
}
.inputArrow {
    position: relative;
    background: url("../img/ico_select.svg") center right 1.5rem no-repeat;
    background-size: 1.8rem;
}
/* input-clear */
.clearInput {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1.5rem;
    width: 2rem;
    height: 2rem;
    background: url(../img/ico_data_del.svg) no-repeat top left / contain;
}

.pw[type="password"] {
}
.pw[type="password"]::placeholder {
    color: var(--c-gray-800) !important;
}

.msgInput {
    width: calc(100% - 7rem) !important;
    position: relative;
    margin-top: 2.5rem;
    padding-right: 2.5rem;
}
.msgInput::after {
    content: "";
    position: absolute;
    right: 0.5rem;
    bottom: 0;
    width: 1.8rem;
    height: 1.8rem;
    background: url("../img/ico_edit.svg") no-repeat center center / contain;
    pointer-events: none;
}
.msgInput .sinput {
    display: block;
    width: 100%;
    padding: 0.5rem 0;
    border-width: 0 0 1px;
    border-style: solid;
    border-color: var(--c-gray-300);
    border-radius: 0 !important;
    font-size: 1.6rem;
    line-height: 1.2;
    outline: none;
    box-sizing: border-box;
    touch-action: manipulation;
    -webkit-user-select: none;
    -webkit-appearance: none;
    appearance: none;
}
.msgInput .sinput:focus {
    border-color: var(--cobalt-blue);
}

/* 인풋박스 datePicker */
.dateInput {
    display: flex;
    gap: 0.5rem;
    width: 100%;
    align-items: center;
    justify-content: space-between;
}
.dateInput .input {
    height: 4.3rem;
    padding: 0 0.5rem;
}
.dateInput .input.time {
    width: 6rem;
}
.dateInput .datePickerIco {
    background: url("../img/ico_date.svg") no-repeat center left 1rem / 2.4rem;
    padding-left: 4rem;
}
.icoCal {
    background: url("../img/ico_date_off.svg") no-repeat center left 0.8rem /
        2.4rem;
    padding-left: 3.6rem;
    padding-right: 1rem;
}
.icoCal.placeholder {
    background: url("../img/ico_date_off.svg") no-repeat center left 0.8rem /
        2.4rem;
    padding-left: 3.6rem;
}

.icoId {
    background: url("../img/ico_id.svg") no-repeat center left 1rem / 2.4rem;
    padding-left: 4rem;
    padding-right: 1rem;
}
.icoPw {
    background: url("../img/ico_pw.svg") no-repeat center left 1rem / 2.4rem;
    padding-left: 4rem;
    padding-right: 1rem;
}

/* checkbox */
input[type="checkbox"] {
    /* appearance: none;          
	-webkit-appearance: none;  
	-moz-appearance: none;      */
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    cursor: pointer;
    padding: 0;
    border: 0;
    outline: none;
}
input[type="checkbox"]:focus-visible + .chkIcon,
input[type="checkbox"]:focus-visible + label::before {
    outline: 2px solid orange;
    border-radius: 4px;
}
input:disabled {
    pointer-events: none;
}

/* radio button */
input[type="radio"] {
    /* appearance: none;          
	-webkit-appearance: none;  
	-moz-appearance: none;     */
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
    margin: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
    outline: none;
}
input[type="radio"]:focus-visible + label {
    outline: 2px solid orange;
    outline-offset: 4px;
    border-radius: 4px;
}
/* 라디오버튼 아이콘 설정 (기본) */
.roundChk.gap3 {
    gap: 3rem;
}
.roundChk.gap2 {
    gap: 2rem;
}
.roundChk.gap1 {
    gap: 1rem;
}
.roundChk {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
    margin: 1rem 0;
}
.roundChk > li {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.roundChk > li > label {
    position: relative;
    display: inline-block;
    padding: 0 0 0 3rem;
    font-size: var(--fs-xs);
    color: var(--c-gray-700);
    line-height: 2.4rem;
}
.roundChk > li > label:before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -1.15rem;
    left: 0;
    width: 2.1rem;
    height: 2.1rem;
    background: url("../img/d_ch_unchecked.svg") center/contain no-repeat;
}
.roundChk > li > input[type="radio"]:checked + label:before {
    background: url("../img/d_ch_checked.svg") center/contain no-repeat;
}
.roundChk > li > input[type="radio"]:checked + label {
    color: var(--c-gray-900);
}

.roundChk > li > input[type="checkbox"]:checked + label:before {
    background: url("../img/d_ch_checked.svg") center/contain no-repeat;
}
.roundChk > li > input[type="checkbox"]:checked + label {
    color: var(--c-gray-900);
}
.roundChk.fs16 label {
    font-size: var(--fs-ms);
    color: var(--c-gray-800);
    line-height: 1.7;
}
.roundChk.brd {
    position: relative;
    border-radius: 1rem;
    border: 1px solid var(--c-gray-200);
    padding: 1.5rem;
    margin: 0 0 1rem;
}
/* 라디오버튼만 라벨텍스트없음 */
.rdoBox {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: fit-content;
}
.rdoBox input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 1;
    height: 1;
    outline: none;
}
.rdoBox .rdoIcon {
    width: 2.4rem;
    height: 2.4rem;
    background: url("../img/d_ch_unchecked.svg") center/contain no-repeat;
    cursor: pointer;
}
.rdoBox input[type="radio"]:checked + .rdoIcon {
    background: url("../img/d_ch_checked.svg") center/contain no-repeat;
}
.rdoBox input[type="radio"]:focus-visible + .rdoIcon {
    outline: 2px solid orange;
    outline-offset: 0;
    border-radius: 50%;
}

/* round 체크박스 */
.rndChk.gap3 {
    gap: 3rem;
}
.rndChk {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    position: relative;
    width: 100%;
    margin:2rem 0;
}
.rndChk > li {
    position: relative;
    display: inline-flex;
    align-items: center;
}
.rndChk > li > label {
    position: relative;
    display: inline-flex;
    font-size: var(--fs-xs);
    color: var(--c-gray-700);
    line-height: 2.4rem;
    padding: 0 0 0 3rem;
}
.rndChk > li > label:before {
    content: "";
    position: absolute;
    top: 50%;
    margin-top: -1.15rem;
    left: 0;
    width: 2.1rem;
    height: 2.1rem;
    background: url("../img/d_ch_unchecked.svg") center/contain no-repeat;
}
.boxChk > input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.rndChk > li > input[type="checkbox"]:checked ~ label:before {
    background: url("../img/d_ch_checked.svg") center/contain no-repeat;
}
.rndChk > li > input[type="radio"]:checked ~ label:before {
    background: url("../img/d_ch_checked.svg") center/contain no-repeat;
}
.rndChk.fs16 label {
    font-size: var(--fs-ms);
    color: var(--c-gray-800);
    line-height: 1.7;
}
/* 삭제확인 */
.rndChk.addTxt > li {
    flex-direction: column;
    align-items: flex-start;
}
.rndChk.addTxt > li > span.sTxt {
    position: relative;
    display: inline-flex;
    font-size: var(--fs-xs);
    color: var(--c-gray-600);
    line-height: 1.4;
    padding: 0 0 0 3.5rem;
}
/* round 체크박스 단독 */
.chkBox {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: fit-content;
}
.chkBox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 1;
    height: 1;
    outline: none;
}
.chkBox .chkIcon {
    width: 2.1rem;
    height: 2.1rem;
    background: url("../img/d_ch_unchecked.svg") center/contain no-repeat;
    cursor: pointer;
}
.chkBox input[type="checkbox"]:checked + .chkIcon {
    background: url("../img/d_ch_checked.svg") center/contain no-repeat;
}
.chkBox input[type="checkbox"]:focus-visible + .chkIcon {
    outline: 2px solid orange;
    outline-offset: 0;
    border-radius: 50%;
}
.chkBox.txt {
    font-size: 1.6rem;
    color: var(--c-gray-800);
    line-height: 1.7;
}
.chkBox.txt .chkIcon {
    margin-right: 1rem;
}

.basedChk li {margin-top:1rem;}
.basedChk li:first-child {margin-top:0;}
.basedChk li label {position:relative; display:inline-flex; padding-left:1.9rem; color:var(--c-gray-800); font-size:1.4rem; line-height:2rem;}
.basedChk li label:before {content:''; position: absolute; top:0.25rem; left:0; width:1.5rem; height:1.5rem; background-color:var(--white); border:1px solid var(--c-gray-200); border-radius:.4rem; box-sizing:border-box;}
.basedChk input[type="checkbox"] {position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;}
.basedChk input[type="checkbox"]:checked + label:after {content:''; position: absolute; top:0.25rem; left:0; width:1.5rem; height:1.5rem; background:url(../img/ico_check_readonly.svg) no-repeat center center/2rem;}

.basedChk.rowColumn {display: flex; align-items: center; gap:1.2rem;}
.basedChk.rowColumn li {margin-top:0;}

/* selectBox */
select,
.select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: url("../img/ico-select-down.svg") no-repeat right 1.6rem center;
    background-size: 2.4rem auto;
    border-radius: 1rem;
    color: var(--c-gray-800);
    border: 1px solid var(--c-gray-200);
    width: 100%;
    height: 5.4rem;
    font-size: var(--fs-m);
    padding: 0 4rem 0 1.6rem;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
}
.select.ui {
    position: relative;
    background: none;
    display: flex;
    align-items: center;
    width: 100%;
    height: 5.4rem;
    overflow: hidden;
    padding: 0 4rem 0 1.2rem;
}
.select.ui::after {
    content: "";
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 1.2rem;
    width: 2.4rem;
    height: 2.4rem;
    background: url("../img/ico-select-down.svg") no-repeat center / 2.4rem;
}
.select.ui > span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    color: var(--c-gray-800);
    font-weight: var(--fw-regular);
    text-overflow: ellipsis;
    white-space: nowrap;
}
.select.ui > span.placeholder {
    color: var(--c-gray-300);
}
.select.disabled {
    background: var(--c-gray-100) !important;
    border-color: var(--c-gray-300) !important;
    pointer-events: none;
}
.select.disabled::after {
    opacity: 0.3;
}
.select.disabled > span {
    color: var(--c-gray-400) !important;
}
.select.readonly {
    pointer-events: none;
}
.select.readonly::after {
    opacity: 0.3;
}
.select.readonly > span {
    color: var(--c-gray-400) !important;
}

select:required:invalid {
    color: var(--c-gray-300);
}
option[value=""][disabled] {
    display: none;
}

.grayInput {
    background-color: var(--bg-light-gray2) !important;
    border-color: var(--bg-light-gray2) !important;
}

/* 로딩바 */
@keyframes flicker {
    from {
        opacity: 1;
    }
    to {
        opacity: 0;
    }
}

@keyframes loading-bar {
    0% {
        width: 0;
        opacity: 0;
    }
    90% {
        width: 100%;
        opacity: 1;
    }
    100% {
        width: 100%;
        opacity: 0;
    }
}
/* 스피너 */
@keyframes rotate {
    100% {
        transform: rotate(360deg);
    }
}
/* 스트로크 효과 (밝은 부분처럼 보이게 함) */
@keyframes dash {
    0% {
        stroke-dasharray: 1, 150;
        stroke-dashoffset: 0;
    }
    50% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -35;
    }
    100% {
        stroke-dasharray: 90, 150;
        stroke-dashoffset: -124;
    }
}

/* 750px 너비 해상도 */
@media (min-width: 750px) {
    html {
        font-size: 11px;
    }
}
@media (max-width: 560px) {
    html {
        font-size: 11px;
    }
    .bioWrap,
    .patternWrap {
        margin-top: 2rem !important;
    }
    .bionLock {
        margin-top: 8rem !important;
    }
    .patternReg {
        margin-top: 8rem !important;
    }
    .ScanIdBox {
        margin-bottom: 4rem !important;
    }
}
/* 414px 너비 해상도 */
@media (max-width: 414px) {
    html {
        font-size: 10px; /* 1rem = 10px */
    }
}
@media (max-width: 400px) {
    html {
        font-size: 10px;
    }
}
@media (max-width: 375px) {
    html {
        font-size: 10px;
    }
    .bioWrap,
    .patternWrap {
        margin-top: 0 !important;
    }
    .bionLock {
        margin-top: 6rem !important;
    }
    .patternReg {
        margin-top: 6rem !important;
    }
    .ScanIdBox {
        margin-bottom: 2rem !important;
    }
}
@media (max-width: 360px) {
    /* html { font-size: 8.7px;} */
    html {
        font-size: 9.3px;
    }
    .bioWrap,
    .patternWrap {
        margin-top: 2rem !important;
    }
    .bionLock {
        margin-top: 8rem !important;
    }
    .patternReg {
        margin-top: 8rem !important;
    }
    .ScanIdBox {
        margin-bottom: 4rem !important;
    }
}
@media (max-width: 344px) {
    /* html { font-size: 7.2px;} */
    html {
        font-size: 8.7px;
    }
}