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

/* 라이트 모드에 적용될 color 정의 */
@media (prefers-color-scheme: light) {
    :root {
        /* Primary */
        --main_color:#000FC6;
        --navy900:#000D7F;
        --navy700:#5D66DB;
        --navy500:#A2A8EA;
        --navy300:#D1D3F5;
        --navy200:#E8E9FA;
        --navy100:#EEEFFB;

        /* Secondary */
        --org:#FF7826;
        --vlt:#E8E9FA;
        --vlt300:#EEEFFB;
        --error:#DE232C;                    

        /* Gray */
        --white:#ffffff; 
        --black:#000000;
        --gray700:#646A73;
        --gray600:#8F959E;
        --gray500:#BBBFC4;
        --gray400:#D0D3D6;
        --gray300:#DEE0E3;
        --gray200:#EFF0F1;
        --gray100:#F2F3F5;
        --gray000:#F7F7F7;
        --wht:#fff;


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

        /* point color */
        --ppl700:#4650D6;
        --ppl600:#5E5AC1;
        --ppl500:#9A87EF;
        --ppl400:#B0A0F5;
        --ppl300:#E6E2FD;
        --ppl200:#F3F4FF;

        /* 화살표 icon */
        --select_arrow:#fff url(../images/icon_arrow_down_1px.svg)no-repeat right 8px center;              /* Select 화살표 기본(다운) */
        --select_arrow_up:#fff url(../images/icon_arrow_down_1px.svg)no-repeat right 8px center;           /* Select 화살표 업 */
        --select_arrow_left:#fff url(../images/icon_arrow_down_1px.svg)no-repeat right 8px center;         /* Select 화살표 왼쪽 */
        --select_arrow_right:#fff url(../images/icon_arrow_down_1px.svg)no-repeat right 8px center;        /* Select 화살표 오른쪽 */
    }
}

/* 다크 모드에 적용될 color 정의 */
@media (prefers-color-scheme: dark) {
    :root {
        /* Primary */
        --main_color:#000FC6;
        --navy900:#000D7F;
        --navy700:#5D66DB;
        --navy500:#A2A8EA;
        --navy300:#D1D3F5;
        --navy200:#E8E9FA;
        --navy100:#EEEFFB;

        /* Secondary */
        --org:#FF7826;
        --vlt:#E8E9FA;
        --vlt300:#EEEFFB;

        --error:#DE232C;                    

        /* Gray */
        --white:#ffffff;
        --black:#000000;
        --gray700:#646A73;
        --gray600:#8F959E;
        --gray500:#BBBFC4;
        --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%);


        /* 화살표 icon */
        --select_arrow:#fff url(../images/icon_arrow_down_1px.svg)no-repeat right 8px center;              /* Select 화살표 기본(다운) */
        --select_arrow_up:#fff url(../images/icon_arrow_down_1px.svg)no-repeat right 8px center;           /* Select 화살표 업 */
        --select_arrow_left:#fff url(../images/icon_arrow_down_1px.svg)no-repeat right 8px center;         /* Select 화살표 왼쪽 */
        --select_arrow_right:#fff url(../images/icon_arrow_down_1px.svg)no-repeat right 8px center;        /* Select 화살표 오른쪽 */


    }
}



/* font size 정의 */
:root {

    --font_XXXL:1.5rem;         /*24px*/
    --font_XXL:1.375rem;        /*22px*/
    --font_XL:2.5rem;           /*20px*/
    --font_L:1.125rem;          /*18px*/
    --font_m:1rem;              /*16px*/
    --font_s:0.875rem;          /*14px*/
    --font_ss:0.75rem;          /*12px*/
    --font_xs:0.625rem;         /*10px*/
    --font_xxs:0.5625rem;       /*9px*/

}

/******************* reset *******************/
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,button,acronym,address,big,cite,code,del,dfn,em,img,ins,input,kbd,q,s,samp,
small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,textarea,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,
aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,
nav,output,ruby,section,summary,time,mark,audio,video {
    box-sizing:border-box;
    /* margin:0;
    padding:0;
    border:0;
    vertical-align:baseline;
    line-height:1; */
}

/******************* 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;
  }

#root{display: flex;flex-direction: column; min-height: 100vh;}
.submain {flex: 1;}

/******************* 웹접근성 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 */
h1 {font-size:var(--font_XXXL);font-weight:700;}
h2 {font-size:var(--font_XXL);font-weight:700;}
h3 {font-size:var(--font_L);font-weight:700;}
h4 {font-size:var(--font_L);font-weight:600;}
h5 {font-size:var(--font_m);font-weight:700;}
h6 {font-size:var(--font_m);font-weight:600;}

.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;padding:0.6rem 1rem;width:100%; height: 6rem; border-radius: 1.4rem; text-indent:1rem ;
    border:none;
    font-size: 1.6rem;
    border-radius: 1.4rem;
    background:var(--gray200);}
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 100px;
    grid-auto-rows: auto 26px;
    gap: 4px;
}
.input_in_btn {position:relative;padding:0.6rem 1rem;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;
    margin-bottom:0.725rem;
}
.chkbox_item::before {
    content: "";
    width: 18px;
    height: 18px;
    border-radius: 9px;
    border: 1px solid var(--gray600);
    box-shadow: 0 0 0 0 var(--white) inset;
    background:url(../images/check_gry.svg)no-repeat center;
    display: block;
    box-sizing: border-box;
}
.chkbox_item[aria-checked="true"]::before {
    content: "";
    background:var(--main_color) url(../images/check_wht.svg)no-repeat center;
}
.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: 50%;
    right:0;
    position: absolute;
    /* transition: 0.3s; */
}
.chkbox_wrap.vertical li a span {    
    display: block;
    height: 16px;
    width: 16px;
    background:url(../images/icon_arrow_dwn.svg)no-repeat center center;
    transform: translateY(-50%) rotate(-90deg);
    /* transition: 0.3s; */
}

.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%;
    height: 6rem;
    background:var(--gray200);
    font-size:1.7rem;
    border-radius: 1.4rem;
    cursor: pointer;
    text-align: left;
    box-sizing: border-box;
    padding:0.6rem 2rem;
    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;
    right: 2rem;
    /* 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: 110%;
    width: 100%;
    background-color: var(--white);
    box-shadow: 0 4px 12px -4px rgba(0, 0, 0, 0.3);
    z-index:1;
    max-height: 29.8rem;
    height: fit-content;
    padding: 2.6rem 2rem;
    border: 1px solid #9D9D9D;
    font-size: 1.7rem;
    border-radius: 1.4rem;
}
.listbox_item {
    padding:0.6rem 1rem;
    box-sizing: border-box;
}
.listbox_item:hover, .listbox_item:focus {background: #fff; font-weight: 600;}
.input_field_wrap label, .listbox_wrap label {font-size:var(--font_ss); font-weight:600;}


/* 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);border:1px solid var(--navy900);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;}
.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;
}