@charset "utf-8";
@import url("../font/pretendard.css");
@import url("line-awesome.css");

/******************* common *******************/
html,
body {
    height: 100%;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    background: #fff;
    color: #1a1a1a;
    word-wrap: break-word;
    word-break: keep-all;
    line-height: 1.5;
    font-family:
        "Pretendard",
        "NotoSansKR_Light",
        "맑은고딕",
        Malgun Gothic,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Oxygen,
        Ubuntu,
        Cantarell,
        "Open Sans",
        "Helvetica Neue",
        sans-serif;
    -webkit-text-size-adjust: none; /* 크롬, 사파리, 오페라 신버전 */
    -ms-text-size-adjust: none; /* IE */
    -moz-text-size-adjust: none; /* 파이어폭스 */
    -o-text-size-adjust: none; /* 오페라 구버전 */
}
html {
    font-size: 62.5%; /* 1rem = 10px 처럼 사용 */
    scroll-behavior: smooth;
}
body {
    font-size: 1.6rem; /* = 16px */
}
textarea {
    border: 1px solid var(--gray300);
}
li {
    list-style: none;
}
table {
    border-collapse: collapse;
}
img,
fieldset {
    border: none;
}
a {
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}
label {
    cursor: pointer;
}
strong {
    font-weight: normal;
}
em,
address {
    font-style: normal;
}
select {
    appearance: none;
}
button {
    background: inherit;
    border: none;
    box-shadow: none;
    border-radius: 0;
    overflow: visible;
    cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-weight: normal;
    font-size: inherit;
}
img {
    -webkit-user-drag: none; /* Safari/Chrome */
    user-select: none; /* 텍스트 선택 방지 (필요시) */
    pointer-events: none; /* 클릭이나 드래그 완전 차단 (필요시) */
}

:root {
    --light-box-color: #e6f6f1;
    --text-color: #fabd52;
    --main-color: #fabd52;
    --main_hover-color: #007d52;
    --main-light-color: #dbeaff;
    --main-light-hover-color: #ceebe1;
    --bg-color: #f7f7f8;
    --input-bg-color: #fff;
    --input-login-bg-color: #f4f5f7;
    --search-bg-color: #f7f7f8;
    --table_border: #646a73;

    /* Primary */
    --navy900: #000d7f;
    --navy700: #5d66db;
    --navy500: #a2a8ea;
    --navy300: #d1d3f5;
    --navy200: #e8e9fa;
    --navy100: #eeeffb;

    /* Secondary */
    --org: #ff7826;
    --vlt: #e8e9fa;
    --vlt300: #eeeffb;
    --error: #ff7777;
    --error-bg: #ffe8e8;

    /* Gray */
    --white: #ffffff;
    --black: #000000;
    --gray700: #646a73;
    --gray600: #8f959e;
    --gray500: #a7a7a7;
    --gray400: #d0d3d6;
    --gray300: #dee0e3;
    --gray200: #eff0f1;
    --gray100: #f2f3f5;
    --gray000: #f5f6f7;

    /* Gradation */
    --gdb100: rgb(100, 115, 244);
    --gdl100: linear-gradient(-30deg, rgba(100, 115, 244, 1) 0%, rgba(131, 93, 240, 1) 80%);

    /* point color */
    --ppl600: #5e5ac1;
    --ppl500: #9a87ef;
    --ppl400: #b0a0f5;
    --ppl300: #e6e2fd;

    /* line color*/
    --line-color: #e2e2e2;
    --line-light-color: #92dac2;
    --line-hover-color: #144df4;
    --line-wht: #fff;

    /*font size*/
    --lps-body-font-size: 0.9rem;
    --lps-nav-size: 1rem;
    --lps-nav-deps-size: 0.95rem;
    --lps-header-size: 1.5rem;
    --lps-box-tit-size: 1.2rem;
    --lps-table-th-size: 1rem;
    --lps-table-td-size: 0.95rem;
    --lps-table-th-bg: #f7f7f8;
    --lps-pop-tit: 1.2rem;
    --lps-pop-tit-sm: 1.1rem;
}

/******************* 웹접근성 Hidden Content *******************/
.skip {
    position: relative;
    z-index: 100000;
}
.skip a {
    position: absolute;
    top: -40px;
    left: 0;
    background: #333;
    color: #fff;
    padding: 8px;
    border-radius: 3px;
}
.skip a:focus {
    top: 0;
}
.blind {
    font-size: 0;
}
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    clip-path: polygon(0 0, 0 0, 0 0);
    white-space: nowrap;
}
/* 키보드로 버튼에 포커스 시 */
a:focus-visible,
input[type="radio"]:focus-visible,
input[type="checkbox"]:focus-visible,
button:focus-visible {
    outline-style: 2px solid #000;
}
/* 마우스, 터치로 버튼에 포커스 시 */
a:focus:not(:focus-visible),
input[type="radio"]:focus:not(:focus-visible),
input[type="checkbox"]:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
button:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
    outline-style: none; /*box-shadow: 1px 1px 5px rgba(1, 1, 0, .7);*/
}

/* 클릭&포커스 방지 */
.ev_no {
    pointer-events: none;
}

/* Display control & Position */
.dp_no {
    display: none;
}
.ps_rltv {
    position: relative;
}
.ov_y_s {
    overflow-y: auto;
}

/* GAP Size */
.mg_bt_4 {
    margin-bottom: 4px;
}
.mg_tp_10 {
    margin-top: 10px;
}
.mg_bt_10 {
    margin-bottom: 10px;
}
.grid_gap_04 {
    display: grid;
    gap: 4px;
}
.pt_0 {
    padding: 0 !important;
}
.pt_1_0 {
    padding: 1rem 0 !important;
}

.h100 {
    height: 100%;
}
.h200 {
    height: 200px;
}
.h350 {
    height: 350px;
}

/* text style */
.txt_hd_tit {
    font-size: var(--font_L);
    font-weight: 700;
}
.txt_modal_tit {
    font-size: var(--font_m);
    font-weight: 700;
}

.txt_10 {
    font-size: 0.625rem;
}
.txt_12 {
    font-size: 0.75rem;
}

.txt_wht {
    color: var(--white) !important;
}
.txt_dis {
    color: var(--gray500) !important;
}
.txt_gry {
    color: var(--gray700) !important;
}
.txt_red {
    color: var(--error) !important;
}
.txt_org {
    color: var(--org) !important;
}
.txt_blu {
    color: var(--main_color) !important;
}
.txt_bold {
    font-weight: 900 !important;
}
.txt_weit_600 {
    font-weight: 600 !important;
}

.bd_1px {
    border: 1px solid var(--gray600);
}

.pd_10 {
    padding: 10px;
}

/* icon*/
.ic_logout {
    display: inline-block;
    height: 100%;
    padding-left: 10px;
    font-size: 0;
    vertical-align: top;
}
.ic_logout img {
    vertical-align: middle;
}

/* Input Field */
.input_field_wrap {
    box-sizing: border-box;
}
input {
    position: relative;
    height: 40px;
    padding: 0.6rem 1rem;
    width: 100%;
    border: 1px solid var(--gray300);
    font-size: 1.6rem;
    background: #fff;
    border-radius: 0.1875rem;
}
input:hover {
    outline: 0;
    border: 1px solid var(--main-color);
}
input:focus {
    outline: 0;
    border: 1px solid var(--navy900);
}
input:read-only {
    border: 1px solid var(--gray400);
    background: var(--gray500);
}

.input_wrap {
    display: grid;
    grid-template-columns: 140px 1fr;
    grid-auto-rows: auto 26px;
    gap: 4px;
    grid-template-areas:
        "label    input"
        "alert    alert";
}
.input_wrap label {
    grid-area: label;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-right: 0.5rem;
}

.input_alertmsg {
    grid-area: alert;
    color: var(--error);
    font-size: var(--font_ss);
    text-indent: 1rem;
}

.input_btn_add_wrap {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 150px;
    grid-auto-rows: auto 26px;
    gap: 4px;
}
.input_in_btn {
    position: relative;
    line-height: 40px;
    width: 100%;
    font-size: var(--font_m);
    border-radius: 0.1875rem;
}
.input_in_time {
    position: absolute;
    right: 110px;
    top: 12px;
    color: var(--error);
}
.input_in_time_full {
    position: absolute;
    right: 10px;
    bottom: 8px;
    color: var(--error);
}
.input_in_chk {
    width: 100%;
    margin: 0 auto;
}
.input_in_chk .chkbox_item {
    margin: 0.6rem 0;
    padding-right: 0;
    justify-content: center;
}

/*Input Radio*/
.radio_wrap {
    display: flex;
    gap: 16px;
}
.radio_item {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    cursor: pointer;
}
.radio_item::before {
    content: "";
    width: 16px;
    height: 16px;
    margin-right: 8px;
    border-radius: 50%;
    display: block;
    border: 1px solid var(--gray600);
    background-color: var(--white);
    box-shadow: 0 0 0 4px transparent inset;
}
.radio_item[aria-checked="true"]::before {
    border: 1px solid var(--main_color);
    box-shadow: 0 0 0 4px var(--white) inset;
    background: var(--main_color);
}

/*RADIO Button Style*/
.radio_btn_wrap {
    display: flex;
}
.radio_btn_wrap.ea2 li {
    width: 50%;
}
.radio_btn_item {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    padding: 0.455rem 0;
    width: 100%;
    border: 1px solid var(--gray300);
    font-size: var(--font_m);
    background: var(--gray200);
    border-radius: 0.1875rem;
    text-align: center;
}

.radio_btn_item[aria-checked="true"] {
    border: 1px solid var(--main_color);
    color: var(--main_color);
    background: var(--white);
}

.radio_btn_item_read-only {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    position: relative;
    padding: 0.455rem 0;
    width: 100%;
    border: 1px solid var(--gray300);
    font-size: var(--font_m);
    background: var(--gray200);
    border-radius: 0.1875rem;
    text-align: center;
}

.radio_btn_item_read-only[aria-checked="true"] {
    border: 1px solid var(--black);
    color: var(--black);
    background: var(--gray500);
}

/*Input Check-Box*/
.chkbox_wrap {
    display: flex;
    gap: 8px;
}
.chkbox_item {
    display: flex;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    padding-right: 0.8rem;
}
.chkbox_item::before {
    content: "";
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid var(--gray100);
    box-shadow: 0 0 0 0 var(--white) inset;
    background: url(../images/icon_chk_nor_blk.svg) no-repeat center;
    background-size: 100%;
    display: block;
    box-sizing: border-box;
    flex-shrink: 0;
}
.chkbox_item[aria-checked="true"]::before {
    content: "";
    background: url(../images/icon_chk_chk_blk.svg) no-repeat center;
    background-size: 100%;
}
.chkbox_item.chkbox_all {
    font-size: var(--font_L);
    font-weight: 700;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--gray600);
}

.chkbox_item_reverse {
    display: flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    gap: 10px;
    align-items: center;
    cursor: pointer;
    margin-bottom: 0.725rem;
}
.chkbox_item_reverse::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 9px;
    border: 1px solid var(--gray600);
    box-shadow: 0 0 0 0 var(--white) inset;
    background: var(--white) url(../images/check_gry.svg) no-repeat center;
    display: block;
    box-sizing: border-box;
}
.chkbox_item_reverse[aria-checked="true"]::before {
    content: "";
    background: var(--main_color) url(../images/check_wht.svg) no-repeat center;
}
.chkbox_item_reverse.chkbox_all {
    font-size: var(--font_L);
    font-weight: 700;
    padding-bottom: 0.8rem;
    border-bottom: 1px solid var(--gray600);
}

.chkbox_wrap.vertical li {
    position: relative;
    padding-top: 0.5rem;
}
.chkbox_wrap.vertical li a {
    display: block;
    height: 16px;
    width: 16px;
    top: 26px;
    right: 0;
    position: absolute;
    /* transition: 0.3s; */
}
.chkbox_wrap.vertical li a span {
    display: block;
    height: 16px;
    width: 16px;
    padding: 0 0 0 20px;
    background: url(../images/icon_arrow_dwn.svg) no-repeat center center;
    transform: translateY(-50%) rotate(-90deg);
    /* transition: 0.3s; */
    flex-shrink: 0;
}

.chkbox_wrap.vertical {
    flex-direction: column;
}
.chkbox_wrap.horizontal {
    flex-direction: row;
}

/* Select Box*/
.listbox_wrap {
    position: relative;
}
/* .listbox_wrap:hover, .listbox_wrap:focus {border: 1px solid var(--main_color);}  */
.btn_listbox {
    width: 100%;
    border: 1px solid var(--gray300);
    background: var(--gray200);
    font-size: var(--font_m);
    border-radius: 3px;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    padding: 0.6rem 1rem;
    position: relative;
}
.btn_listbox .icon_listbox {
    /* border: 1px solid black; */
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-size: 10px;
}
.btn_listbox .icon_listbox span {
    display: block;
    height: 16px;
    width: 16px;
    background: url(../images/icon_arrow_dwn.svg) no-repeat center center;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    /* transition: 0.3s; */
}
.btn_listbox[aria-expanded="true"] .icon_listbox span {
    transform: translateY(-50%) rotate(180deg);
}
.btn_listbox:hover,
.btn_listbox:focus {
    border: 1px solid var(--main_color);
}
.listbox_wrap .listbox {
    position: absolute;
    top: 103%;
    width: 100%;
    background-color: var(--white);
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.3);
    z-index: 1;
}
.listbox_item {
    padding: 0.6rem 1rem;
    box-sizing: border-box;
}
.listbox_item:hover,
.listbox_item:focus {
    background: var(--gray200);
}

/* Bank Select Box*/
.bank_listbox_wrap {
    padding: 0;
}
.bank_btn_listbox {
    width: 100%;
    border: 1px solid var(--gray300);
    background: var(--gray200);
    font-size: var(--font_m);
    border-radius: 3px;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    padding: 0.6rem 1rem;
    position: relative;
}
.bank_btn_listbox .bank_icon_listbox {
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    background-size: 10px;
}
.bank_btn_listbox .bank_icon_listbox span {
    display: block;
    height: 16px;
    width: 16px;
    background: url(../images/icon_arrow_dwn.svg) no-repeat center center;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    /* transition: 0.3s; */
}
.bank_btn_listbox[aria-expanded="true"] .bank_bank_icon_listbox span {
    transform: translateY(-50%) rotate(180deg);
}
.bank_btn_listbox:hover,
.bank_btn_listbox:focus {
    border: 1px solid var(--main_color);
}
.bank_listbox_dim {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
}
.bank_listbox_con {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 90%;
    background: rgba(255, 255, 255, 1);
    border-radius: 0.8rem 0.8rem 0 0;
    z-index: 101;
}
.bank_listbox_con .tab_wrap {
    width: 100%;
    padding: 20px 20px 0;
    height: 100%;
}
.bank_listbox_con .tab_list {
    width: 100%;
    display: flex;
}
.bank_listbox_con .tab_wrap .tab_horizontal {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.bank_listbox_con .tab_list li {
    padding: 0;
    width: 50%;
}
.bank_listbox_con .tab_item {
    width: 100%;
    display: block;
    padding: 0.625rem 2.5rem;
    transition: 0.3s;
    text-align: center;
    background: var(--gray200);
}
.bank_listbox_con .tab_horizontal .tab_list {
    flex-direction: row;
}
.bank_listbox_con .tab_horizontal .tab_item {
    flex-direction: row;
    font-weight: 500;
    line-height: 1.4rem;
    border: 3px solid var(--gray200);
}
.bank_listbox_con .tab_horizontal .tab_item:hover {
    text-decoration: none;
}
.bank_listbox_con .tab_horizontal .tab_item[aria-selected="true"] {
    background: var(--white);
    font-weight: 800;
    border: 3px solid var(--gray200);
    border-radius: 3px;
}
.bank_listbox_con .tab_horizontal .tab_area {
    display: block;
    background: var(--gray200);
    border: none;
    border-radius: 6px;
}
.bank_listbox_con .tab_horizontal .tab_content {
    display: block;
    height: 100%;
    overflow-y: scroll;
}
.bank_listbox_con .tab_horizontal .tab_panel {
    padding: 0 0 1rem;
    margin-top: 1rem;
    background: var(--white);
    border: none;
    height: calc(100vh - 240px);
    overflow-y: scroll;
}

.bank_listbox_con .tab_horizontal .tab_panel ul {
    width: 100%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-auto-rows: auto;
    gap: 10px;
    grid-template-areas: "li li li";
}
.bank_listbox_con .tab_horizontal .tab_panel ul li {
    width: 100%;
}
.bank_listbox_con .tab_horizontal .tab_panel ul li div {
    background: var(--gray200);
    text-align: center;
    width: 100%;
    border-radius: 10px;
    padding: 12px 0;
}
.bank_listbox_con .tab_horizontal .tab_panel ul li div span:first-child {
    display: block;
    width: 24px;
    height: 24px;
    margin: 0 auto 10px;
}
.bank_listbox_con .tab_horizontal .tab_panel ul li div span:last-child {
    display: block;
    word-break: break-all;
    font-size: var(--font_s);
}
.bank_listbox_con .tab_horizontal .tab_panel ul li:last-child {
    clear: both;
}
.bank_listbox_item {
    box-sizing: border-box;
}
.bank_listbox_item:hover,
.bank_listbox_item:focus {
    background: var(--gray200);
}

.bank_input_field_wrap label,
.bank_listbox_wrap label {
    font-size: var(--font_ss);
    font-weight: 600;
}

.bank_shinhan {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_jeju {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_kb {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_nh {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_ibk {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_kdb {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_soohyup {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_shinhyup {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_woori {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_hana {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_citi {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_kakaobank {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_kbank {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_toss {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_koreapost {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_bnk {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_kwangju {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_im {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_shinhan_saving {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_kyungnam {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_junbok {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_saemaul {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_sb_saving {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_sc {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_sanlim {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_sbi {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_welcome {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_aqon {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_dashin_saving {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_koreabank {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.bank_nonghyup {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}

.stock_shinhan {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_kyobo {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_daol {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_daeshin {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_meritz {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_mirae {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_bookuk {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_samsung {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_sangsangin {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_shinyoung {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_sk {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_uanta {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_yoojin {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_ls {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_kakaopay {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_naverpay {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_kiwoom {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_toss {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_woori_ib {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_woori_capital {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_im {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_hankook {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_hanhwa {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_hyundaicha {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_bnk {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_db {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_ibk {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_kb {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_nh {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_hankookposs {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_cape {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_hanyang {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_reading {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_hankookstock {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}
.stock_hana {
    background: url(../images/bank/bank_shinhan.png) no-repeat;
    background-size: contain;
}

/* button style */
.btn_wrap {
    box-sizing: border-box;
}
.btns {
    width: 100%;
    box-sizing: border-box;
    padding: 0 1.25rem;
    height: 3rem;
    line-height: 3rem;
    font-size: var(--font_m);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 3px;
}
.btns_s {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.85rem;
    height: 1.625rem;
    line-height: 1.625rem;
    font-size: var(--font_s);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 1.625rem;
}
.btns_ls {
    width: 100%;
    box-sizing: border-box;
    padding: 0 0.85rem;
    height: 2.125rem;
    line-height: 2.125rem;
    font-size: var(--font_s);
    font-weight: 600;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 1.625rem;
}
/* .btns:hover {box-shadow:inset 0 0 0 100px rgba(0,0,0,.1);}
.btns.active {box-shadow:inset 0 0 0 100px rgba(0,0,0,.2);} */
.btn_gray {
    background: var(--gray200);
    border: 1px solid var(--gray200);
    color: var(--black);
}
.btn_gray:hover,
.btn_gray:focus {
    background: var(--gray300);
    border: 1px solid var(--gray300);
    color: var(--black);
}
.btn_bord {
    background: var(--main-color);
    border: 1px solid var(--main-color);
    color: var(--white);
}
.btn_bord:hover,
.btn_bord:focus {
    background: var(--main-color);
    color: var(--white);
    text-decoration: underline;
}
.btn_pup_lgt {
    background: var(--navy200);
    border: 1px solid var(--navy200);
    color: var(--black);
}
.btn_pup_lgt:hover,
.btn_pup_lgt:focus {
    background: var(--gray300);
    border: 1px solid var(--gray300);
    color: var(--black);
}
.btn_line {
    background: var(--white);
    border: 1px solid var(--main-color);
    color: var(--main-color);
}
.btn_line:hover,
.btn_line:focus {
    background: var(--gray100);
    border: 1px solid var(--main-color);
    color: var(--main-color);
}
.btn_line_gry {
    background: var(--white);
    border: 1px solid var(--gray300);
    color: var(--black);
}
.btn_line_gry:hover,
.btn_line_gry:focus {
    background: var(--gray100);
    border: 1px solid var(--main-color);
    color: var(--main-color);
}
.btn_line_light_gry {
    background: var(--gray100);
    border: 1px solid var(--gray400);
    color: var(--gray600);
}
.btn_line_light_gry:hover,
.btn_wht:focus {
    background: var(--gray200);
    border: 1px solid var(--main-color);
    color: var(--main-color);
}
.btn_wht {
    background: var(--white) url(../images/icon_arrow_rgt.svg) no-repeat right 10px center;
    background-size: 8px 12px;
    border: 1px solid var(--white);
    color: var(--black);
    text-align: left;
}
.btn_wht:hover,
.btn_wht:focus {
    background: var(--gray200);
    border: 1px solid var(--main-color);
    color: var(--main-color);
}

.btn_s_line_gry {
    background: var(--white);
    border: 1px solid var(--gray500);
    color: var(--gray600);
    font-size: var(--font_ss);
    padding: 3px;
    border-radius: 3px;
}

.btn_dis {
    background: var(--gray500);
    border: 1px solid var(--black);
    color: var(--gray600);
}
/* .btns:disabled,
.btns[disabled],
.btns:disabled:hover,
.btns[disabled]:hover {border: 1px solid #ccc; background: #eee; color: #ccc; box-shadow:0 0 0;} */
.flex_btween {
    display: grid;
    grid-template-columns: auto;
    grid-auto-rows: auto;
    gap: 0.825rem;
    grid-template-areas: "div    div";
}

.btn_square_sch {
    width: 2.5rem;
    box-sizing: border-box;
    height: 2.5rem;
    line-height: 2.5rem;
    cursor: pointer;
    vertical-align: middle;
    border-radius: 3px;
    background: url(../images/icon_search_blk.svg) no-repeat center;
    background-size: 24px;
}

/* Top Button */
.btn_square_prev {
    width: 1.25rem;
    height: 1.25rem;
}
.btn_square_prev span {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background: url(../images/icon_back_blk.svg) no-repeat center;
    font-size: 0;
}

.btn_square_prev_wht {
    width: 1.25rem;
    height: 1.25rem;
}
.btn_square_prev_wht span {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background: url(../images/icon_back_wht.svg) no-repeat center;
    font-size: 0;
}

.btn_square_info {
    width: 1.25rem;
    height: 1.25rem;
}
.btn_square_info span {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background: url(../images/icon_info_blk.svg) no-repeat center;
    font-size: 0;
}

.btn_square_blk_info {
    width: 1.25rem;
    height: 1.25rem;
}
.btn_square_blk_info span {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background: url(../images/icon_info_line_blk.svg) no-repeat center;
    font-size: 0;
}

.btn_square_beacon {
    width: 1.25rem;
    height: 1.25rem;
}
.btn_square_beacon span {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background: url(../images/beacon_gry.svg) no-repeat center;
    font-size: 0;
}

.btn_close {
    width: 1.25rem;
    height: 1.25rem;
    background: none;
    background: #fff;
    border: none;
}
.btn_close span {
    display: block;
    width: 1.25rem;
    height: 1.25rem;
    background: url(../images/icon_x.svg) no-repeat center;
    font-size: 0;
}

/* 토글버튼 */
.btn_toggle.dark {
    box-sizing: border-box;
    width: 2.25rem;
    height: 0.875rem;
    transition: 0.3s;
    position: relative;
    cursor: pointer;
    background-color: var(--gray300);
    border-radius: 0.875rem;
    box-shadow: 0 0 8px -2px rgba(0, 0, 0, 0.25);
}
.btn_toggle.dark[aria-pressed="true"] {
    background-color: var(--main_color);
}
.btn_toggle.dark span {
    box-sizing: border-box;
    width: 1.25rem;
    height: 1.25rem;
    display: block;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 0;
    transition: 0.3s;
    border-radius: 50%;
    background-color: var(--white);
    box-shadow: 0 0 4px 4px var(--gray300);
}
.btn_toggle.dark[aria-pressed="true"] span {
    left: 100%;
    transform: translateY(-50%) translateX(-100%);
    box-shadow: 0 0 4px 4px var(--main_color);
}

/* 아코디언 버튼 */

.btn_expanded {
    padding: 0.5rem;
    border-radius: 0.5rem;
    border: 1px solid var(--gray600);
    width: 100%;
    text-align: left;
    position: relative;
    cursor: pointer;
}
.btn_expanded .icon_expanded {
    /* border: 1px solid black; */
    position: absolute;
    right: 0.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 10px;
    height: 10px;
}
.btn_expanded .icon_expanded span {
    background-color: var(--main_color);
    display: block;
    height: 2px;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
    position: absolute;
    transition: 0.3s;
}
.btn_expanded .icon_expanded span:first-child {
    transform: translateY(-50%) rotate(90deg);
}
.btn_expanded[aria-expanded="true"] .icon_expanded span:first-child {
    transform: translateY(-50%);
}
.expanded_content {
    padding: 1rem;
    margin-top: 0.2rem;
    border-radius: 0.5rem;
    border: 1px solid var(--gray600);
    background: var(--gray200);
    width: 100%;
    text-align: left;
    box-sizing: border-box;
}

.ico_reflash button {
    width: 100%;
    height: 100%;
    background: url(../images/icon_reflash.svg) no-repeat center center;
    background-size: cover;
}
.ico_sch {
    width: 100%;
    height: 100%;
}
.ico_sch button {
    width: 100%;
    height: 100%;
}

.ico_sch button::before {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    content: "";
    width: 50%;
    height: 50%;
    background-color: var(--main_color);
    mask-image: url(../images/icon_search_blk.svg);
    mask-repeat: no-repeat;
    mask-position: center left;
    mask-size: contain;
}

/* table 
.table_wrap {border:1px solid var(--gray300);overflow-x: auto;}
.table_wrap table {min-width:768px;border:none;}
table {width:100%;}
table caption {position:absolute;overflow:hidden;clip:rect(0 0 0 0);margin:-1px;width:1px;height:1px;}
table thead tr:first-child{border-top:none;}
table thead tr th {padding:0.6rem 0.5rem;background:var(--gray200);border-right:1px solid var(--gray300);}
table thead tr:last-child {border-bottom:none;background:var(--gray200);}
table thead tr th:last-child {border-right:none;}
table tbody tr:last-child {border-bottom:none;}
table tbody tr td {text-align: center;padding:0.6rem 0.5rem;border-top:1px solid var(--gray300);border-right:1px solid var(--gray300);}
table tbody tr td:last-child {border-right:none;}


/* 탭 */
.tab_wrap {
    width: 100%;
}
.tab_list {
    width: 100%;
    display: flex;
}

.tab_wrap .tab_horizontal {
    display: flex;
    flex-direction: column;
}
.tab_list li {
    padding: 0;
}
.tab_item {
    width: 100%;
    display: flex;
    height: 40px;
    border-bottom: 2px solid transparent;
    transition: 0.3s;
    align-items: center;
    justify-content: center;
}
.tab_horizontal .tab_list {
    flex-direction: row;
    color: var(--gray600);
    font-size: var(--font_L);
    font-weight: 600;
}
.tab_horizontal .tab_item {
    flex-direction: row;
}
.tab_horizontal .tab_item:hover {
    text-decoration: none;
}
.tab_horizontal .tab_item[aria-selected="true"] {
    border-bottom: 2px solid var(--main_color);
    color: var(--main_color);
    font-size: var(--font_L);
    font-weight: 600;
}
.tab_horizontal .tab_area {
    display: block;
}
.tab_horizontal .tab_content {
    display: block;
}
.tab_horizontal .tab_panel {
    padding: 1rem;
    border-top: 1px solid var(--gray600);
}

.tab_wrap .tab_vertical {
    display: flex;
    flex-direction: row;
}
.tab_vertical .tab_list {
    flex-direction: column;
    color: var(--gray600);
    font-size: var(--font_L);
    font-weight: 600;
}
.tab_vertical .tab_item {
    flex-direction: column;
    background: transparent;
    border-radius: 0.25rem;
}
.tab_vertical .tab_item:hover {
    text-decoration: none;
}
.tab_vertical .tab_item[aria-selected="true"] {
    background: var(--main_color);
    color: var(--white);
    font-size: var(--font_L);
    font-weight: 600;
}
.tab_vertical .tab_area {
    width: 20%;
}
.tab_vertical .tab_content {
    width: 80%;
}
.tab_vertical .tab_panel {
    padding: 1rem;
}

/* 프로그래스 바 */
.progress_wrap {
    position: relative;
    background-color: var(--gray300);
    width: 100%;
    height: 16px;
    border-radius: 8px;
}
.progress_bar {
    width: 24px;
    height: 24px;
    background-color: var(--white);
    box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.25);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
}
.progress_num {
    background-color: var(--main_color);
    padding: 0.25rem 1rem;
    margin-top: 1rem;
    display: block;
    width: fit-content;
    color: var(--white);
}

/* 슬라이드 */
.slide_wrap {
    position: relative;
    padding-bottom: 32px;
}
.btn_play_wrap {
    position: absolute;
    z-index: 10;
}
.btn_slide_arrow_wrap {
    position: absolute;
    z-index: 10;
    top: calc(50% - 32px);
    transform: translateY(-50%);
    width: 100%;
    box-sizing: border-box;
}
.btn_slide_arrow {
    width: 36px;
    height: 36px;
    position: absolute;
    top: 0;
    cursor: pointer;
    background-color: #fff;
    border-radius: 50%;
    box-shadow: 0 0 8px -4px;
    transition: 0.3s;
}
.btn_slide_arrow.prev {
    left: -12px;
}
.btn_slide_arrow.prev:hover {
    left: 0px;
}
.btn_slide_arrow.next {
    right: -12px;
}
.btn_slide_arrow.next:hover {
    right: 0px;
}
.btn_slide_num_wrap {
    position: absolute;
    z-index: 10;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: row;
    gap: 8px;
}
.btn_slide_num_wrap ul {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}
.btn_slide_num {
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    display: block;
    background-color: var(--gray300);
    box-shadow: 0 0 8px -2px rgba(0, 0, 0, 0.5);
    border-radius: 50%;
    transition: 0.3s;
}
.btn_slide_num.active {
    background-color: var(--org);
}
.btn_autoplay {
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--gray600);
    border-radius: 50%;
    background-color: transparent;
    position: relative;
    font-family: "Line Awesome Free";
    box-shadow: 0 0 8px -2px rgba(0, 0, 0, 0.5);
}
.btn_autoplay[aria-pressed="true"] {
    content: "\f04c";
}
.btn_autoplay[aria-pressed="false"] {
    content: "\f04b";
}
.btn_autoplay::before {
    font-family: "Line Awesome Free";
    content: "\f04b";
    font-size: 1rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    cursor: pointer;
}
.btn_autoplay[aria-pressed="true"]::before {
    content: "\f04c";
}
.btn_autoplay[aria-pressed="false"]::before {
    content: "\f04b";
}
.slide {
    padding: 0.5rem;
    box-sizing: border-box;
}
.slide li {
    box-shadow: inset 0 0 1px 0 #111;
    display: flex;
    background-image: url("https://picsum.photos/1280/720?random=1");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    height: 500px;
}

/* Menu - Context */

.context_menu_wrap {
    display: flex;
    flex-direction: column;
    width: 300px;
    border: 1px solid #fff;
    padding: 0 1rem;
    border-radius: 0.25rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    margin: 1rem 0 2rem;
}
.context_menu_wrap li {
    border-bottom: 1px solid var(--gray200);
    padding: 0.25rem;
    position: relative;
}
.context_menu_wrap li:last-child {
    border: none;
}
.context_menu_item {
    width: 100%;
    text-align: left;
    cursor: pointer;
    padding: 0.5rem 0.25rem;
    transition: 0.3s ease-in-out;
}
.context_menu_item:hover {
    padding-left: 0.5rem;
}
.context_submenu_wrap {
    width: auto;
    min-width: 100px;
    max-width: 200px;
    border: 1px solid #fff;
    position: absolute;
    padding: 0 1rem;
    top: 0;
    right: 0;
    transform: translateX(100%);
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: 10;
}
.context_submenu_item {
    display: block;
    width: 100%;
    box-sizing: border-box;
    text-align: left;
    cursor: pointer;
    padding: 0.5rem 0.25rem;
    transition: 0.3s ease-in-out;
}
@media (max-width: 768px) {
    .context_menu_wrap {
        width: 100%;
    }
    .context_submenu_wrap {
        max-width: initial;
        box-sizing: border-box;
        width: 100%;
        top: 100%;
        left: 0;
        right: unset;
        transform: none;
    }
}

/* footer UI Menu - Context */

.ft_user_menu_wrap {
    display: flex;
    flex-direction: row;
    width: 100%;
    background: var(--white);
    border-radius: 0.25rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    margin: 1rem 0 2rem;
    z-index: 11;
}
.ft_user_menu_wrap ul {
    padding-bottom: 140px;
}
.ft_user_menu_wrap li {
    position: relative;
    width: 20%;
    height: 60px;
}
.ft_user_menu_wrap li:last-child {
    border: none;
}
.ft_user_menu_item {
    width: 100%;
    height: 60px;
    text-align: center;
    cursor: pointer;
    transition: 0.3s ease-in-out;
}

.ft_user_menu_item div {
    width: 100%;
    height: 20px;
    margin: 0 auto 2px;
    text-align: center;
}
.ft_menu_icon {
    position: relative;
    display: block;
    width: 20px;
    height: 20px;
}

/* svg 아이콘 변경 */
.ft_menu_icon {
    background-repeat: no-repeat;
    background-size: 20px 20px;
}

.ft_user_menu_item span {
    display: block;
    text-align: center;
    margin: 0 auto;
    font-size: var(--font_ss);
    margin-bottom: 4px;
}
.ft_user_menu_item.ft_select span {
    color: var(--main_color);
}
/* user */
.ftmi_01 {
    background-image: url("../images/ft_icon_use_01_nor.svg");
}
.ftmi_02 {
    background-image: url("../images/ft_icon_use_02_nor.svg");
}
.ftmi_03 {
    background-image: url("../images/ft_icon_use_03_nor.svg");
}
.ftmi_04 {
    background-image: url("../images/ft_icon_use_04_nor.svg");
}
.ftmi_05 {
    background-image: url("../images/ft_icon_use_05_nor.svg");
}

.ft_user_menu_item.ft_select span.ftmi_01 {
    background-image: url("../images/ft_icon_use_01_sel.svg");
}
.ft_user_menu_item.ft_select span.ftmi_02 {
    background-image: url("../images/ft_icon_use_02_sel.svg");
}
.ft_user_menu_item.ft_select span.ftmi_03 {
    background-image: url("../images/ft_icon_use_03_sel.svg");
}
.ft_user_menu_item.ft_select span.ftmi_04 {
    background-image: url("../images/ft_icon_use_04_sel.svg");
}
.ft_user_menu_item.ft_select span.ftmi_05 {
    background-image: url("../images/ft_icon_use_05_sel.svg");
}

/* admin */
.ft_admin_menu_wrap {
    display: flex;
    flex-direction: row;
    width: 100%;
    background: var(--white);
    border-radius: 0.25rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    margin: 1rem 0 2rem;
    z-index: 11;
}
.ft_admin_menu_wrap ul {
    padding-bottom: 140px;
}
.ft_admin_menu_wrap li {
    position: relative;
    width: 25%;
    height: 60px;
}
.ft_admin_menu_wrap li:last-child {
    border: none;
}

.ftmia_01 {
    background-image: url("../images/ft_icon_admin_01_nor.svg");
}
.ftmia_02 {
    background-image: url("../images/ft_icon_admin_02_nor.svg");
}
.ftmia_03 {
    background-image: url("../images/ft_icon_admin_03_nor.svg");
}
.ftmia_04 {
    background-image: url("../images/ft_icon_admin_04_nor.svg");
}

.ft_user_menu_item.ft_select span.ftmia_01 {
    background-image: url("../images/ft_icon_admin_01_sel.svg");
}
.ft_user_menu_item.ft_select span.ftmia_02 {
    background-image: url("../images/ft_icon_admin_02_sel.svg");
}
.ft_user_menu_item.ft_select span.ftmia_03 {
    background-image: url("../images/ft_icon_admin_03_sel.svg");
}
.ft_user_menu_item.ft_select span.ftmia_04 {
    background-image: url("../images/ft_icon_admin_04_sel.svg");
}

/* svg 아이콘 mask 컬러변경 */
/* .ft_menu_icon::before {
    position: absolute;
    top:0;
    left:0;
    content: "";
    width: 20px;
    height: 20px;
    background-color:var(--gray700);
    
    mask-repeat: no-repeat;
    mask-position: center left;
    mask-size: contain;
}
.ftmi_01 {mask-image: url("../images/ft_icon_use_01_nor.svg");}
.ftmi_02 {mask-image: url("../images/ft_icon_use_02_nor.svg");}
.ftmi_03 {mask-image: url("../images/ft_icon_use_03_nor.svg");}
.ftmi_04 {mask-image: url("../images/ft_icon_use_04_nor.svg");}
.ftmi_05 {mask-image: url("../images/ft_icon_use_05_nor.svg");}

.ft_user_menu_item span {display:block;text-align:center;margin:0 auto;font-size:var(--font_ss);margin-bottom:4px;}
.ft_user_menu_item:hover span, .ft_user_menu_item:focus span {color:var(--main_color);}
.ft_user_menu_item:hover .ft_menu_icon::before, .ft_user_menu_item:focus .ft_menu_icon::before {background-color:var(--main_color);}

.ft_user_menu_item.ft_select span::before {background-color:var(--main_color);}
.ft_user_menu_item.ft_select span {color:var(--main_color);} */

.ft_user_submenu_wrap {
    position: fixed;
    bottom: 52px;
    width: 100%;
    height: calc(100% - 112px);
    padding: 0 1rem;
    background-color: var(--white);
    border-radius: 0.5rem 0.5rem 0 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    z-index: -1;
}
.ft_user_submenu_wrap ul {
    display: flex;
    flex-wrap: wrap;
    margin-top: 60px;
}
.ft_user_submenu_wrap li {
    position: relative;
    width: 25%;
    height: 102px;
}
.ft_user_submenu_item {
    display: block;
    width: 72px;
    height: 72px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    padding: 0.5rem 0.25rem;
    transition: 0.3s ease-in-out;
    border-radius: 10px;
    margin: 15px auto;
    background-position: top 6px center;
    background-size: 30px 30px;
    background-repeat: no-repeat;
}
.ft_user_submenu_item span {
    display: block;
    padding-top: 36px;
}
.ft_user_submenu_item:hover {
    background-color: var(--main_color);
    color: var(--white);
}

.ftusmi_01 {
    background-image: url("../images/menu_icon_01.svg");
}
.ftusmi_02 {
    background-image: url("../images/menu_icon_02.svg");
}
.ftusmi_03 {
    background-image: url("../images/menu_icon_03.svg");
}
.ftusmi_04 {
    background-image: url("../images/menu_icon_04.svg");
}
.ftusmi_05 {
    background-image: url("../images/menu_icon_05.svg");
}
.ftusmi_06 {
    background-image: url("../images/menu_icon_06.svg");
}
.ftusmi_07 {
    background-image: url("../images/menu_icon_07.svg");
}
.ftusmi_08 {
    background-image: url("../images/menu_icon_08.svg");
}
.ftusmi_09 {
    background-image: url("../images/menu_icon_09.svg");
}
.ftusmi_10 {
    background-image: url("../images/menu_icon_10.svg");
}

.ft_user_logout_wrap {
    position: fixed;
    bottom: 76px;
    width: calc(100% - 2rem);
}

/* List Menu */
.list_menu_wrap {
    width: 100%;
    margin-bottom: 30px;
}
.list_menu_wrap ul {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10px;
}
.list_menu_wrap li {
    position: relative;
    width: 100%;
}
.list_menu_item {
    display: block;
    width: 100%;
    height: 72px;
    box-sizing: border-box;
    text-align: center;
    cursor: pointer;
    padding: 0.5rem 0.25rem;
    transition: 0.3s ease-in-out;
    border-radius: 0.5rem;
    margin: 5px auto;
    background-position: center right 1rem;
    background-size: 8px 12px;
    background-repeat: no-repeat;
    background-image: url(../images/icon_arrow_rgt.svg);
    background-color: var(--white);
    box-shadow: 0 0 10px -6px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--white);
}

.list_menu_item span {
    display: block;
    text-align: left;
    padding-left: 1rem;
}
.list_menu_item span:first-child {
    font-size: var(--font_m);
    font-weight: 700;
}
.list_menu_item span:last-child {
    font-size: var(--font_s);
    font-weight: 500;
    color: var(--gray700);
}
.list_menu_item:hover {
    border: 1px solid var(--main_color);
}

/* Menu - Desktop */
.desktop_menu_wrap {
    /* border: 1px solid black; */
    display: flex;
    gap: 4px;
    box-sizing: border-box;
}
.desktop_menu_wrap li {
    flex: 1;
    height: auto;
    position: relative;
}
.desktop_menu_item {
    box-sizing: border-box;
    border: 1px solid #ccc;
    padding: 0.5rem;
    width: 100%;
    display: block;
    text-align: center;
    cursor: pointer;
}
.desktop_submenu_wrap {
    display: flex;
    flex-direction: column;
    position: absolute;
    box-sizing: border-box;
    top: 100%;
    left: 0;
    z-index: 10;
    background-color: #fff;
    width: 100%;
    padding: 0.25rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.desktop_submenu_item {
    width: 100%;
    display: block;
    border-bottom: 1px solid #eee;
    text-decoration: dotted;
    text-decoration-line: none;
    padding: 0.5rem 0.25rem;
    transition: 0.3s all;
    box-sizing: border-box;
}
.desktop_submenu_item {
    border-bottom: none;
}
.desktop_submenu_item:hover {
    text-decoration: none;
    padding-left: 0.5rem;
}
@media (max-width: 768px) {
    .desktop_menu_wrap {
        flex-direction: column;
    }
    .desktop_submenu_wrap {
        position: unset;
    }
}

/* Menu - Tree */
.treemenu_wrap {
    width: 300px;
    height: 200px;
    padding: 1rem 0.5rem;
    box-shadow: 0 0 16px -8px rgba(0, 0, 0, 0.5);
}
.treemenu_wrap .treemenu {
    padding: 0;
}
.treemenu_wrap .treemenu ul {
    padding-left: 0.5rem;
}
.treemenu_wrap .treemenu ul li {
    border-left: 1px solid var(--gray600);
    padding: 0.6rem 1rem;
}
.treemenu_wrap .treemenu ul li.lt_n {
    border-left: 0;
}
.treemenu_wrap .treemenu ul li span {
    padding-left: 0.3rem;
}
.treemenu_wrap .treemenu ul li:last-child {
    /* border-left: 1px solid #757575;
    border-bottom: 1; */
    margin-bottom: 0.25rem;
}
.treemenu_wrap .treemenu ul li a {
    display: block;
    /* border-bottom: 1px solid #757575; */
    padding: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: 0.3s;
}
.treemenu_wrap .treemenu ul li a:hover,
.treemenu_wrap .treemenu ul li a:focus {
    padding-left: 0.4rem;
}
.treemenu_wrap .treemenu ul li a[aria-expanded="false"]::before,
.treemenu_wrap .treemenu ul li a[aria-expanded="true"]::before {
    font-family: "Line Awesome Free";
    content: "";
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--org);
}
.treemenu_wrap .treemenu ul li a[aria-expanded="false"]::before {
    content: "\f07b";
}
.treemenu_wrap .treemenu ul li a[aria-expanded="true"]::before {
    content: "\f07c";
}
.treemenu_wrap .treemenu ul li a:hover {
    text-decoration: none;
}

/* Modal Popup */
.modal_wrap {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
}
.modal_dim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 100;
}
.modal_container {
    position: relative;
    width: 90%;
    height: auto;
    background: #fff;
    border-radius: 0.8rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    margin: 0;
    z-index: 101;
}

.modal_container_btm {
    position: absolute;
    width: 100%;
    height: auto;
    background: #fff;
    border-radius: 0.8rem 0.8rem 0 0;
    bottom: 0;
    margin: 0;
    z-index: 101;
}

.modal_tit_wrap {
    padding: 1.25rem 1.25rem 0;
}
.mh_bg {
    background-color: var(--main_color);
    color: var(--white);
    border-radius: 0.8rem 0.8rem 0 0;
    padding-bottom: 1.25rem;
}
.modal_con_wrap {
    padding: 1.25rem;
    max-height: 80%;
    overflow-y: auto;
}
.modal_con_wrap iframe {
    width: 100%;
    height: calc(100vh - 300px);
}
.modal_ft_wrap {
    padding: 0 1.25rem 1.25rem;
}

.modal_header_wrap {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 20px;
}
.modal_hd_lf_menu_wrap {
    min-width: 20px;
    text-align: center;
    font-size: 0;
}
.modal_hd_rt_menu_wrap {
    min-width: 20px;
    text-align: center;
    font-size: 0;
    position: relative;
}
.modal_hd_tit_wrap {
    text-align: center;
    display: flex;
    align-items: center;
}

.modal_header_center_wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
}
.img_inc_center {
    padding-top: 50px;
}
.iic_map {
    background: url(../images/icon_local.svg) no-repeat;
    background-size: 40px;
    background-position: center top;
}

.md_icon_info_wht {
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    background: url(../images/icon_info_wht.svg) no-repeat 0 center;
    margin-right: 0.5rem;
    font-size: 0;
}
.modal_con_wrap dl dt {
    font-size: var(--font_ss);
    color: var(--gray700);
    font-weight: 700;
}
.modal_con_wrap dl dd {
    font-size: var(--font_s);
    margin-bottom: 1rem;
    text-align: justify;
    word-break: break-all;
}
.dl_horizontal {
    background: var(--gray200);
    padding: 0.825rem 1rem;
    border-radius: 3px;
}
.dl_horizontal dl {
    display: grid;
    grid-template-columns: auto;
    grid-auto-rows: auto;
    gap: 0.825rem;
    grid-template-areas: "dt    dd";
}
.dl_horizontal dl dt {
    font-size: var(--font_m);
    color: var(--main_color);
    font-weight: 700;
}
.dl_horizontal dl dd {
    font-size: var(--font_m);
    margin-bottom: 0;
    text-align: justify;
    word-break: break-all;
}
.md_info_txt {
    font-size: var(--font_s);
    padding: 0.5rem 0;
}

/*캘린더 */
.calendar_sch_wrap {
    width: 100%;
    margin: 0 auto;
    position: relative;
}

.date-range {
    margin: 10px 0;
    display: grid;
    grid-template-columns: 1fr 1fr 40px;
    grid-auto-rows: auto;
    gap: 10px;
    grid-template-areas: "p  p   button";
}
.date-range input {
    width: 100%;
    height: 38px;
    background: var(--white) url(../images/form_icon_cld_nor.svg) no-repeat right 10px center;
    background-size: 16px;
    border: 1px solid var(--gray400);
    border-radius: 3px;
    padding: 0 30px 0 10px;
}
.date-range input:hover,
.date-range input:focus {
    border: 1px solid var(--main_color);
}

.calendar-container {
    width: 100%;
    max-width: 320px;
    margin: 20px auto;
    border: 1px solid var(--gray400);
    border-radius: 10px;
    padding: 0 10px 10px 10px;
    background-color: var(--white);
    box-shadow: 0 0 10px -6px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    display: none;
    /* 중앙정렬 */
    /* position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); */

    /* Input 밑 */
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    font-size: var(--font_s);
    font-weight: 700;
    padding: 10px 0;
    border-bottom: 1px solid var(--gray400);
}
.calendar-header span {
    color: var(--black);
}
.calendar-header button {
    width: 40px;
    height: 40px;
}
.calendar-header button:first-of-type {
    background: url(../images/form_icon_arrow_prev_blk.svg) no-repeat center;
}
.calendar-header button:last-of-type {
    background: url(../images/form_icon_arrow_next_blk.svg) no-repeat center;
}

.calendar-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: var(--font_s);
    font-weight: 500;
    color: var(--gray700);
    margin-bottom: 5px;
}

.calendar-dates {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
}

.calendar-dates .date {
    padding: 10px;
    cursor: pointer;
}

.calendar-dates .date.selected {
    background-color: var(--main_color);
    color: var(--white);
    border-radius: 8px;
}

.calendar-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 999;
    display: none;
}
.calendar-dates .date.today {
    background-color: var(--gray200);
}
.calendar-dates .date.in-range {
    background-color: var(--vlt);
}
.calendar-dates.month-view,
.calendar-dates.year-view {
    grid-template-columns: repeat(4, 1fr);
}
.calendar-days.month-view,
.calendar-days.year-view {
    display: none;
}

/* faq */

.faq-answer ul {
    padding-left: 12px;
    margin: 4px 0;
}
.faq-answer ul li {
    list-style: disc;
    list-style-position: inside;
}
.faq-answer ul li::marker {
    margin-right: 4px !important;
}
.faq-answer ol {
    padding-left: 12px;
    margin: 4px 0;
}
.faq-answer ol li {
    list-style: decimal;
}
.faq-answer ol li::marker {
    margin-right: 4px !important;
}

.faq-answer ul.list-none li {
    list-style: none;
}

#timee_faq {
    display: block;
}

/* 탭 컨테이너 구조: 레이아웃을 위해 폭 지정 */
.tab_container {
    width: 100%;
    max-width: 1440px;
    margin: 0 auto;
    margin-bottom: 10rem;
}
.tab_inner {
    width: 100%;
}

/* tab_header: 카테고리 버튼 그룹 레이아웃 */
.tab_header {
    display: flex;
    gap: 8px;
    flex-wrap: nowrap;
    align-items: center;
    margin-bottom: 12px;
    overflow-x: auto;
    padding: 4px 0;
}

/* tab_category: 버튼 역할(기능적 최소) */
.tab_category {
    -webkit-appearance: none;
    appearance: none;
    padding: 0.75rem 1.25rem;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    background-color: #f4f6f8;
    border-radius: 0.75rem;
    white-space: nowrap;
}
.tab_category.active {
    /* 활성 상태 표시(장식 제외) */
    font-weight: 700;
    color: var(--main-color);
}
.tab_category:hover {
    /* hover 반응 가능 영역 */
}

/* 탭 콘텐츠 영역: 블록 레이아웃 */
.tab_content {
    display: block;
}
.tab_item {
    display: block;
    padding: 8px 0;
}
.tab_item_question {
    /* 질문 영역(클릭 가능) */
    cursor: pointer;
    font-weight: 600;
}
.tab_item_answer {
    display: none;
    padding-top: 8px;
}

/* FAQ 리스트(렌더러 클래스): 구조/상호작용에 필요한 최소값 */
.faq-list {
    display: block;
    margin: 0;
    padding: 0;
}
.faq-item {
    display: block;
    padding: 12px 8px;
    border-color: #e7eaf0;
    border-width: 1px 0 1px 0;
    border-style: solid;
    margin-bottom: 1rem;
}
.faq-question {
    display: block;
    width: 100%;
    text-align: left;
    background: none;
    border: 0;
    padding: 8px 24px 8px 40px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    position: relative; /* pseudo elements 위치 기준 */
}
.faq-question[aria-expanded="true"] {
    /* 확장 상태 표시용(장식 제외) */
    font-weight: 700;
}
.faq-answer {
    display: none;
    font-size: 14px;
    padding: 16px 8px 16px 60px;
    margin-top: 12px;
    position: relative; /* pseudo elements 위치 기준 */
    background-color: #f4f6f8;
}

/* FAQ 질문의 왼쪽 아이콘 (30x30) */
.faq-question::before {
    content: "";
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-image: url("../images/icon_q.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* FAQ 질문의 오른쪽 화살표 (16x16) - 기본은 우측을 바라봄 */
.faq-question::after {
    content: "";
    position: absolute;
    right: 24px; /* 기존 padding-right과 맞춤 */
    top: 50%;
    transform: translateY(-50%) rotate(0deg);
    width: 16px;
    height: 16px;
    background-image: url("../images/arrow.svg");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.18s ease;
}
/* 열린 상태에서는 화살표가 아래를 가리키도록 회전 */
.faq-question[aria-expanded="true"]::after {
    transform: translateY(-50%) rotate(90deg);
}

/* FAQ 답변의 왼쪽 아이콘 (30x30) */
.faq-answer::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 6px;
    width: 40px;
    height: 40px;
    background-image: url("../images/icon_a.png");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 기존 페이지 탭 구성(기능적 최소) */
.faq-tabs {
}
.faq-tab-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.faq-tab-btn {
    padding: 6px 10px;
    cursor: pointer;
}
.faq-tab-btn.active {
    font-weight: 700;
}
.faq-tab-content {
    display: block;
}

/* 아코디언 관련(페이지 기존 마크업): 최소 동작 속성 */
.ac_area {
}
.accordion {
}
.accordion-item {
    padding: 8px 0;
}
.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}
.accordion-content {
    display: none;
    padding-top: 8px;
}
.aco_tit {
    font-weight: 600;
}
.aco_con {
    /* 답변 영역(텍스트 레이아웃) */
}
.arrow {
    width: 24px;
    height: 24px;
    display: inline-block;
}

/* 상태 메시지(로딩/에러): 레이아웃 정보만 유지 */
.faq-loading {
    padding: 12px 0;
}
.faq-error {
    padding: 12px 0;
}
/* faq */