@charset "UTF-8";
input,select,.btn,[role='button'],textarea,
.chip [type=checkbox] ~ label{display: inline-flex; align-items: center;border:0.1rem solid rgba(var(--black),.2);font-size: 100%;height:var(--fm-h-l);border-radius:var(--fm-rd-l);padding: 0 var(--fm-pd-l);}
[type="checkbox"],[type="radio"]{height:var(--rdo-sz-l) !important;width:var(--rdo-sz-l) !important;padding:0;accent-color:var(--primary40);transition:.25s linear;}

.btn,[role='button']{background-color: #fff;}
textarea{width: 100%;min-height:200px;padding:var(--fm-pd-l);;}
select:focus,button:focus,textarea:focus,
input:focus{border-color:var(--primary30);border-width:0.2rem;outline: none;border-radius:var(--fm-rd-l);transition:.25s linear;}
/*input[readonly]{border-color:var(--gray10);background-color:none;color:var(--gray10);}*/
input[readonly]:focus{border-width:0.1rem}
input:disabled{border-color:var(--gray10);background-color:var(--gray5);color:var(--gray30);}

form [class^=hint]{display: block;font-size:90%;margin-top: var(--spacer2);color:var(--primary60)}

.file_box {display: flex;width: 100%;gap: 1rem;}
.file_box input.upload_flie{flex:1!important;border:1px solid var(--info);height: var(--fm-h-l);display: flex;border-radius: var(--fm-rd-l);padding: 0 var(--fm-pd-l);align-items: center;background: var(--info5);}
.file_box input[type="file"] {overflow: hidden;position: absolute;width: 0;height: 0;padding: 0;border: 0;}

.error{display:inline-flex;flex-direction: column;gap:var(--spacer2)}
.error input{border-color:var(--danger);border-width:0.2rem;}
.error input:focus{border-color:var(--danger)}
.error .hint{font-size:95%;color:var(--danger)}
.error .hint::before{content:'\f06a';font-family:var(--ifont2);margin-right: var(--spacer1);}

.column{flex-direction:column;}

.con_wrap > div + div{padding: var(--spacer5) 0;}
/** date **/

.calendar_input{display: inline-flex;flex:1;position: relative;}
.calendar_input input{background:rgb(var(--white));text-align: left;width: 100%;padding-right: 38px;}
.calendar_input [class*=-trigger] {position: absolute;right: 1.3rem;top: 0;width:2.2rem;height: 100%;background:url(../images/icon/calendar.svg) no-repeat center / 2.2rem;text-indent: -999.9rem;cursor: pointer;}
[class*=-datepicker].ui-widget.ui-widget-content{z-index: 5002 !important;background:var(--primary2)}
[class*=-datepicker] .ui-widget-header {border: 0 !important;background: none !important;}
[class*=-datepicker] .ui-datepicker-title{display: flex;gap:var(--spacer2);align-items: center;justify-content: center;}
[class*=-datepicker] .ui-datepicker-title .m {color: #000 !important;}
[class*=-datepicker] select.ui-datepicker-month,
[class*=-datepicker] select.ui-datepicker-year {min-width: 70px;width: auto !important;height: var(--bt-h-xs);border-radius:var(--bt-rd-xs);}
[class*=-datepicker] table{margin:var(--spacer1) 0;}
[class*=-datepicker] td {padding: 0 !important;border: 1px solid #eaeaea !important;background:rgb(var(--white));}
[class*=-datepicker] td span,
[class*=-datepicker] td a {padding:1rem !important;border: 0 !important;background: none !important;}

[class*=-datepicker] .ui-state-default,
[class*=-datepicker] .ui-widget-content .ui-state-default,
[class*=-datepicker] .ui-widget-header .ui-state-default,
[class*=-datepicker] .ui-button,
[class*=-datepicker] .ui-button.ui-state-disabled:hover,
[class*=-datepicker] .ui-button.ui-state-disabled:active {line-height: 1;text-align: center;}
[class*=-datepicker] .ui-widget-header .ui-state-hover,
[class*=-datepicker] .ui-widget-header .ui-corner-all:focus {top: 4px;background:rgb(var(--white));border:0;border-radius: var(--rdfull);}
[class*=-datepicker] .ui-datepicker-prev-hover,
[class*=-datepicker] .ui-datepicker-prev {left: 0px;}
[class*=-datepicker] .ui-datepicker-next-hover,
[class*=-datepicker] .ui-datepicker-next {right: 0px;}
[class*=-datepicker] .ui-widget-header .ui-corner-all {cursor: pointer;}
[class*=-datepicker] .ui-widget-header .ui-datepicker-prev .ui-icon {background: url(../images/icon/i_cal_move.svg) no-repeat 50% 50%;}
[class*=-datepicker] .ui-widget-header .ui-datepicker-next .ui-icon {background: url(../images/icon/i_cal_move.svg) no-repeat 50% 50%;transform: rotate(180deg);}
[class*=-datepicker] .ui-state-highlight,
[class*=-datepicker].ui-widget-content .ui-state-highlight,
[class*=-datepicker] .ui-widget-header .ui-state-highlight {font-weight: bold !important;color:var(--primary) !important;}
[class*=-datepicker] .ui-state-hover,
[class*=-datepicker].ui-widget-content .ui-state-hover,
[class*=-datepicker] .ui-widget-header .ui-state-hover,
[class*=-datepicker] .ui-state-focus,
[class*=-datepicker].ui-widget-content .ui-state-focus,
[class*=-datepicker] .ui-widget-header .ui-state-focus,
[class*=-datepicker] .ui-button:hover,
[class*=-datepicker] .ui-button:focus {color:var(--primary) !important;}
[class*=-datepicker] .ui-state-active,
[class*=-datepicker].ui-widget-content .ui-state-active,
[class*=-datepicker] .ui-widget-header .ui-state-active,
[class*=-datepicker] a.ui-button:active,
[class*=-datepicker] .ui-button:active,
[class*=-datepicker] .ui-button.ui-state-active:hover {color: #fff !important;background:var(--primary) !important;}
.ui-widget select {color: #222;}
[class*=-datepicker] dl{display:flex; align-items: center;gap:var(--spacerde2);margin-top:var(--spacer2);}
[class*=-datepicker] dl>dt{padding: 0 !important;}
[class*=-datepicker] dl .ui_tpicker_time_label{padding-right:var(--spacer1) !important}
[class*=-datepicker] .ui-timepicker-select{background:rgb(var(--white));height: var(--bt-h-xs);}
[class*=-datepicker] .ui-datepicker-buttonpane button,[class*=-datepicker] .ui-datepicker-buttonpane .ui-state-hover{background:var(--primary);color: #fff !important;height:var(--bt-h-xs);border-radius:var(--bt-rd-xs);}

/* custom select */
.selectbox {display: flex;position: relative;}
.selectbox .selected {display:flex;position: relative; align-items: center; min-width: 13rem;width: auto;max-width: 100%;height: 4.8rem;padding: 0 3.2rem 0 1.6rem;border: 1px solid var(--bd);border-radius: var(--rd5);font-family: inherit;font-size: 1.7rem;color: #222;letter-spacing: -0.03em;background: rgba(var(--white),1);}
.selectbox .selected::after {content: "\EA4E";font-family: var(--ifont3);font-size: 1.5rem; position: absolute;right:1.2rem;top:50%;transform: translateY(-50%); transition-duration: .5s;}
.selectbox.on .selected::after {transform: translateY(-50%) rotate(180deg);}
.selectbox .selectoptions {width: 100%;display: none;position: absolute;left: 0rem;top: 4rem;padding: 0.5rem 0 0.3rem;border: 2px solid var(--bd);border-top: 0;border-radius:0 0 var(--rd5) var(--rd5);background: rgba(var(--white),1);z-index: 999;}
.selectbox .selectoptions .option a {display: block;width: 100%;height: 100%;padding: 0.6rem 1.6rem;font-size: 1.6rem;color: #222;}
.selectbox .selectoptions .option a:hover,
.selectbox .selectoptions .option.on {font-weight: bold;text-decoration: underline;}
.selectbox.disabled .selected {color: var(--disabled-font2);background-color: var(--disabled-bg);  border-color: var(--disabled-bd); cursor: default;}
.selectbox.err .selected,
.selectbox.err .selectoptions {border: 2px solid var(--err-bdr);}
.selectbox.err .selectoptions {border-top: 0;}
select{appearance:none;background:rgb(var(--white)) url(../images/icon/i_select_arrow.svg) no-repeat right var(--spacer3) center / auto 20%;padding-right:var(--fm-h-m);position: relative;}
select.sm{padding-right:var(--fm-h-s);padding-right:var(--fm-h-s);}

/*button*/
.btn{min-width: 18rem;display: flex;align-items: center;justify-content: center;}
.btn.xs{height:var(--bt-h-xs);padding: 0 var(--bt-pd-xs);font-size: var(--bt-fz-xs);border-radius:var(--bt-rd-xs);}
.btn.sm{height:var(--bt-h-s);padding: 0 var(--bt-pd-s);font-size: var(--bt-fz-s);border-radius: var(--bt-rd-s);}
.btn.md{height:var(--bt-h-m);padding: 0 var(--bt-pd-m);font-size: var(--bt-fz-m);border-radius: var(--bt-rd-m);}
.btn.lg{height:var(--bt-h-l);padding: 0 var(--bt-pd-l);font-size: var(--bt-fz-l);border-radius: var(--bt-rd-l);}
.btn.xl{height:var(--bt-h-xl);padding: 0 var(--bt-pd-xl);font-size: var(--bt-fz-xl);border-radius: var(--bt-rd-xl);}
.btn.block{display: block;width: 100%;}

.btn.primary{background-color: var(--primary);color: rgb(var(--white));border-radius: var(--bt-rd-m);height: var(--bt-h-m);}
.btn.primary:hover, .btn.primary:active{background: var(--primary40);color: rgb(var(--white));}
.btn.line{border: .1rem solid var(--primary)!important;background: rgb(var(--white))!important;color: var(--primary);}
.btn.cancel{background: var(--point5)!important;color: var(--gray90)!important;border: none;}
.btn.gray{background: var(--gray5)!important;color: var(--gray90)!important;border: none;}
.btn.point{background: var(--point)!important;color: rgb(var(--white))!important;border: none;}

.ico{display:inline-flex;align-items: center;justify-content: center;font-size:0 !important;line-height: 0; position:relative;padding:var(--bt-pd-s); height: auto;}
.ico::before{font-size:var(--fz-title-l);font-family:var(--ifont3);position: absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:inherit}
.ico.sch::before{content:'\F0D1';}
.ico.del::before{content:'\F4C8';font-size:var(--fz-body-s);}
.ico.up::before{content:'\EA78';}
.ico.dn::before{content:'\EA4E';}

.input{display:flex;flex-direction:column;gap:var(--spacer6);width: 100%;}
.input2{display:flex;flex-direction:column;gap:var(--spacer3);width: 100%;}
.input > label{font-size: 0;line-height:0;}
.input .label{font-size:inherit; line-height: inherit;}

#guide .int_wrap{width:auto;max-width:100%;flex-wrap: unset;}
.int_wrap input{flex:1;width:100%;}
.int_wrap.auto{max-width:50%;}
.int_wrap.check{gap:var(--spacer6)}
.input.check{gap:var(--spacer3);}
.int_wrap.check.s01{flex-direction: column!important;align-items: flex-start;}

.check div{display: flex;align-items:center;gap:var(--spacer2);white-space:nowrap;}

.sch_wrap.box{background: var(--bg2);padding: var(--spacer10);border-radius: var(--rd10);}
.sch_wrap,.int_wrap{display:flex;align-items:center;gap:1rem;flex-direction:row !important;}
.sch_wrap{justify-content: center;text-align: center;}
.sch_wrap .btn,.int_wrap .btn{min-width: 80px;justify-content:center;background-color:rgb(var(--white));padding:0 var(--spacer5);}
.sch_wrap .calendar_input{width:100%;flex:auto}

.pos{position: relative;flex: 1;}
.pos input{width:100%;padding-right:var(--fm-h-l);}
.pos button{position: absolute;right:0.5rem;top:50%;height:82%;transform: translateY(-50%);}
.pos button::before{content: "\ECB5";font-family: var(--ifont3);font-size: var(--fz-body-m);}
.pos button:active::before, .pos button.pw_show::before{content: "\ECB7";}

.tlist{}
.tlist>li{position: relative; padding-left: var(--spacer8);color:var(--point90);font-weight: 400;}
.tlist>li::before {position: absolute;left:0;top:0;content:"•";color: var(--primary);}
.tlist>li+li{margin-top:var(--spacer1);}
.tlist>li>.info,.tlist>li>.tlist{margin:var(--spacer2) 0 var(--spacer3);}
.tlist>li>.tlist>li+li{margin-top:var(--spacer2);}
.tlist.dash>li{padding-left:var(--spacer8);} 
.tlist.dash>li::before{content:"-"}
.tlist.num>li{padding-left:var(--spacer12);}
.tlist.num>li:before{content:counter(list-item) '.' ;}

/*tab*/
[role='tablist']{display:inline-flex;margin-bottom:var(--spacer8);height:var(--tab-h-m);justify-content: center;gap:0;width: 100%;}
[role='tablist'] li{flex:1;height:100%;}
[role='tablist'] li *{display:flex;align-items: center; justify-content: center;font-size:var(--fz-body-l);height:100%;}
[role='tablist'] li *[aria-selected="true"]{font-weight:600}
[role='tabpanel']{display:none;}
[role='tabpanel'].on{display:revert;}

/*tab*/
.tab{text-align: center;padding-bottom: var(--spacer10);}
[role='tablist'].s01{height:var(--tab-h-l);}
[role='tablist'].s01 li *{font-weight:500;color: var(--gray);background-color:var(--gray5);border-radius:var(--tab-br-s) var(--tab-br-s) 0 0;border: .1rem solid var(--gray10);border-bottom: .1rem solid rgb(var(--black));}
[role='tablist'].s01 li *[aria-selected="true"]{color:rgb(var(--black));background-color:rgb(var(--white));border: .1rem solid rgb(var(--black));border-bottom: 0;border-radius:var(--tab-br-s) var(--tab-br-s) 0 0;}

[role='tablist'].s02{height: var(--tab-h-m);border-bottom: .2rem solid var(--bd);align-items: flex-start;justify-content: flex-start;}
[role='tablist'].s02 li{flex: 0;min-width: 5rem;}
[role='tablist'].s02 li *{padding: var(--tab-pd);}
[role='tablist'].s02 li *[aria-selected="true"]{color: var(--primary);position: relative;}
[role='tablist'].s02 li *[aria-selected="true"]::before{content: "";position: absolute;bottom:-.2rem;left:0;width: 100%;height: .2rem;background: var(--primary);}

[role='tablist'].s03{height: var(--tab-h-m);}
[role='tablist'].s03 li *{border-bottom: .2rem solid var(--bd);}
[role='tablist'].s03 li *[aria-selected="true"]{color: var(--primary);border-bottom: .2rem solid var(--primary);}

[role='steplist']{display: flex;width: 100%;align-items: center;justify-content: center;position: relative;z-index: 1;}
[role='steplist']::before{content: "";width: 100%;height: .1rem;background: rgba(var(--black),.2);position: absolute;top:2.5rem;left:0;z-index: 0;}
[role='steplist'] li {flex:1;display: flex;align-items: center;justify-content: center;flex-direction: column;position: relative;}
[role='steplist'] li span:nth-child(1){position: relative;display: flex;align-items: center;justify-content: center;flex-direction: column;}
[role='steplist'] li span:nth-child(1)::before{content:"";width: 5rem;height: 5rem;background: var(--gray5);border:.5rem solid var(--gray20);border-radius: var(--rd50);margin-bottom: var(--spacer2);}
/* custom */
[role='steplist'] li[aria-selected="true"]::before, [role='steplist'] li.completed::before{content: "";width: 100%;height: .1rem;background: rgba(var(--black),1);position: absolute;top:2.5rem;left:0;z-index: 0;}
[role='steplist'] li.active::before{width: 50%;}
[role='steplist'] li.active span:nth-child(1)::before{border-color: var(--secondary);background: var(--secondary) url(../images/icon/i_step_on.png)center center no-repeat;}
[role='steplist'] li.completed span:nth-child(1)::before{border-color: var(--secondary);background: var(--secondary) url(../images/icon/i_step_check.png)center center no-repeat;}

/*accordion*/
.accordion{scroll-snap-align: start;background:rgb(var(--white));border-top: .2rem solid var(--point);}
.accord_item{border-bottom: 0.1rem solid rgba(var(--black),.2);}
.accord_btn{position: relative;padding:var(--spacer5) var(--spacer10) var(--spacer5) 0;text-align: left;transition:.4s ease-out; width: 100%;font-size:130%;font-weight:600;min-height:var(--fm-h-xl);}
.accord_btn:focus{border-radius: 0;}
.accord_btn::after{content:"\f107"; font-family:var(--ifont2);position: absolute; right:0;transition:.4s ease-out;font-weight:400}
.accord_btn > *{font-weight:400;font-size: 80%;padding-left:1.6rem; color:rgb(var(--gray4))}
.accord_btn.active::after{content:"\f106";}
.accord_panel {max-height:0;overflow: hidden;transition:max-height 0.3s ease-out; }
.active .accord_panel{height: auto;max-height:1000vh;transition:max-height 1s ease-out;}
.accord_conts{padding:var(--spacer1) 0 var(--spacer5);text-align: left;overflow-y:auto;}

/*modal*/
.scroll_no{overflow:hidden !important;}
.modal,.md_back {display: none;visibility: hidden;z-index: -1;}
.md_back{position: fixed;top: 0;right: 0;bottom: 0;left: 0;background-color:rgba(var(--black), 0.5);}
.modal {position: fixed;top: 0;right: 0;bottom: 0;left: 0;overflow-x: hidden;overflow-y: auto;width: 100%;height: 100%;opacity: 0;transition: visibility .15s .3s, z-index 0s .3s, opacity .2s;}
.modal.in {visibility: visible;z-index: 1010;transition-delay: 0s;opacity: 1;}
.modal.shown {display: block;}
.modal.sample{ position:relative; z-index:100;display: block;opacity: 1;visibility: visible;}
.in .md_back{visibility: visible;display: block;z-index:1000;}

.md_dialog{display: flex;align-items: center;justify-content: flex-start;flex-direction: row;position: relative;z-index:1020;width:80%;max-width:84.6rem;height: calc(100% - var(--spacer10)* 2);min-height: calc(100% - var(--spacer10)* 2);margin: var(--spacer10) auto;}

.md_dialog.xl{max-width:136rem;}
.md_dialog.lg{max-width:128rem;}
.md_dialog.sm{max-width:64rem;}
.md_dialog.xs{max-width:48rem;}

.md_content{position: relative;overflow: hidden;width: 100%;max-height: 100%;background-color: rgb(var(--white));border-radius: var(--rd20);outline-color: transparent;transition: outline-color .1s;display: flex;align-items: flex-start;justify-content: flex-start;flex-direction: column;padding:var(--spacer19)}
.md_content .title{font-size: var(--fz-title-m);border-bottom:0.15rem solid;font-weight: 600;margin-bottom:var(--spacer8);padding:0 var(--spacer10) var(--spacer4);flex:1;width: 100%; margin-top: calc(var(--spacer10)*-0.5);}
.md_content .ctit{font-size: var(--fz-title-s);}
.md_content .box{background: var(--gray5);display: flex;align-items: center;justify-content: center;gap:var(--spacer4);padding: var(--spacer8);border-radius: var(--rd10);}
.md_content .conts{display: flex;justify-content: flex-start;flex-direction: column;gap:var(--spacer8);overflow-y: auto;width:100%;max-width:100%;}
.md_content .tit{font-size: var(--fz-title-s);margin-bottom: 0;}
.md_content .tip{margin:var(--spacer8) var(--spacer10) 0;display:flex;flex:1;width:calc(100% - var(--spacer10)*2);max-width:100%;}
.md_content .tip .box{border:1px solid rgba(var(--black),0.02);padding: var(--spacer5);font-size: 0.9em;width:100%}

[class*=md_dialog] .btn_wrap{display: flex;width: 100%;align-items: center;justify-content: flex-end;flex-direction: row;gap:var(--spacer11);}
[class*=md_dialog] .btn_wrap .btn{border-radius:var(--rd30);min-width:18rem;justify-content: center;}
[class*=md_dialog] .btn_wrap .primary{ background-color: var(--primary);color:rgb(var(--white))}
[class*=md_dialog] .close{position: absolute;top:calc(var(--spacer19) * 0.5);right:calc(var(--spacer19) * 0.5); z-index:901;}
[class*=md_dialog] .close::before{content:'\F4C8';font-size: var(--fz-body-xl);}


/* //241114 pagination style 수정*/
[class*=pagination] {display: flex;align-items: center;justify-content: center;flex-direction: row;gap: var(--spacer2);width: 100%;margin-top: var(--spacer10);}

[class*=pagination] .prev::before {content: "\f104";}
[class*=pagination] .next::after {content: "\f105";}
[class*=pagination] .links {display: flex;align-items: center;justify-content: center;flex-direction: row;gap: var(--spacer2);}
[class*=pagination] .links a,
[class*=pagination] .links span {display: flex;align-items: center;justify-content: center;flex-direction: row;color: var(--gray50);min-width: 4rem;height: 4rem;}
[class*=pagination] .links a:hover {border-radius:var(--rdfull);background-color: var(--point5);transition: 0.4s ease-in-out;}
[class*=pagination] .links a:active {background-color: var(--point5);transition: 0.4s ease-in-out;}
[class*=pagination] .links span::before {content:'…';}
[class*=pagination] .links a.active {font-weight: 700;color:rgb(var(--white));border-radius:var(--rdfull);background-color: var(--point60);}

[class*=pagination] a.navi {display: inline-flex;align-items: center;justify-content: center;min-width:4rem;height: 4rem;font-size:0;border-radius:var(--rdfull);border:0.1rem solid rgba(var(--black),.6);color: rgb(var(--black));}
[class*=pagination] a.navi:hover {background-color: var(--point60);color:rgb(var(--white));transition: 0.4s ease-in-out;}
[class*=pagination] a.navi:active {color:rgb(var(--white));}
[class*=pagination] a.navi::before,
[class*=pagination] a.navi::after{display: inline-flex;align-items: center;justify-content: center; font-family:var(--ifont2);font-size:var(--fz-body-m);}

/* //기존 스타일 */
.pagination .prev {order: 1;}
.pagination .links {order: 2;}
.pagination .next {order: 3;}

/* //241114 수정완료*/

/* loading - 전체화면 */
.loading.entire {display:flex;position: fixed;left: 0;top: 0;bottom: 0;width: 100%;height: 100%;background: rgba(255, 255, 255, 0.7);z-index: 9999; align-items: center; justify-content: center;}
.loading.entire .wrap {position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);text-align:center;z-index: 99;}
.loading.entire .wrap strong {display: block;font-size: 2rem;font-weight: 500;color: #222; text-transform: capitalize; margin-top:10%;}
.loading.entire .wrap strong::after {content: ' .';position: relative;left: -0.5rem;animation: loading_dots 1s steps(5, end) infinite;}
.loading.entire .spinner::before{content: "";display:flex;display: inline-flex;height: 5rem;width: 5rem;border: 0.4rem dashed var(--primary);border-top-color: var(--gray20);border-radius: var(--rdfull);-webkit-animation: spin 900ms infinite linear;animation: spin 900ms infinite linear;}
@keyframes loading_dots {
    0%, 20% {color: rgba(0, 0, 0, 0);text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0);}
    40% {color: #000;text-shadow: .25em 0 0 rgba(0, 0, 0, 0), .5em 0 0 rgba(0, 0, 0, 0);}
    60% {text-shadow: .25em 0 0 #000, .5em 0 0 rgba(0, 0, 0, 0);}
    80%, 100% {text-shadow: .25em 0 0 #000, .5em 0 0 #000;}
}
@keyframes spin {
    from { transform: rotate(0deg); }
	to { transform: rotate(359deg); }
}