/* Material Icons */
.material-symbols-outlined, .material-symbols-rounded, .material-symbols-rounded { vertical-align: middle; }

/* Fixed */
.fixedBar { position: fixed; display: flex; align-items: center; justify-content: center; min-width: 5%; padding: 5px; box-shadow: var(--boxShadow); border-radius: 30px; z-index: 10; background: var(--bodycolor); }
.fixedBar.fixedRightBottom { right: 2.5%; bottom: 2.5%; }

/* Nav */
#brandName { width: 15%; }
.topNav { display: flex; align-items: center; justify-content: space-between; font-family: var(--mainfont); }
.topNav .topNavLi > a { position: relative; padding: 0 1rem; }
.topNav .topNavLi > a::after { position: absolute; content: ''; width: 1px; height: 70%; top: 50%; transform: translateY(-50%); right: 0; background: var(--border); }
.topNav .topNavLi:last-child > a::after { display: none; }

/* Toggle */
.toggleWrap { display: flex; align-items: center; }
.toggleWrap > .toggleBox { width: 0; height: 0; opacity: 0; }
.toggleWrap > .toggleBox ~ label { position: relative; width: 60px; height: 30px; border-radius: 30px; cursor: pointer; background: var(--gray); transition: background .2s ease;  }
.toggleWrap > .toggleBox ~ label > .togglemode { position: absolute; color: var(--bodycolor); font-size: .95rem; top: 50%; transform: translateY(-50%); user-select: none; }
.toggleWrap > .toggleBox ~ label > .togglemode:first-child { left: 10px; }
.toggleWrap > .toggleBox ~ label > .togglemode:last-child { right: 10px; }
.toggleWrap > .toggleBox ~ label::after { position: absolute; content: ''; width: 24px; height: 24px; background: var(--bodycolor); border-radius: 50%; top: 50%; transform: translateY(-50%); right: 3px; transition: right .25s ease; }
.toggleWrap > .toggleBox:checked ~ label { background: var(--pointcolor); }
.toggleWrap > .toggleBox:checked ~ label::after { right: 33px; }

/* Toggle Ver.2 */
.toggleWrap2 { display: flex; align-items: center; user-select: none; letter-spacing: 0; }
.toggleWrap2 > .toggleBox { width: 0; height: 0; opacity: 0; }
.toggleWrap2 > .toggleBox ~ label { position: relative; width: 60px; height: 25px; border-radius: .25rem; background: var(--gray); transition: background .2s ease; cursor: pointer; }
.toggleWrap2 > .toggleBox ~ label::before, .toggleWrap2 > .toggleBox ~ label::after { transition: all .2s ease; }
.toggleWrap2 > .toggleBox ~ label::before
{ position: absolute; content: '숨김'; width: calc(50% - 3px); color: var(--bodycolor); font-size: .7rem; font-weight: 700; font-family: var(--monofont); text-align: center; top: 50%; left: 3px; transform: translateY(-50%); text-shadow: 0 0 1px rgba(0, 0, 0, .5); }
.toggleWrap2 > .toggleBox ~ label::after
{ position: absolute; content: ''; width: 19px; height: 19px; border-radius: .125rem; background: var(--bodycolor); top: 50%; transform: translateY(-50%); right: 3px; }
.toggleWrap2 > .toggleBox:checked ~ label { background: var(--pointcolor); }
.toggleWrap2 > .toggleBox:checked ~ label::before { content: '보임'; left: 50%; }
.toggleWrap2 > .toggleBox:checked ~ label::after { right: calc(100% - 22px); }

/* Range */
.rangeBox { width: 100%; display: block; margin: .5rem 0; user-select: none; }
.rangeBox > .rangeHeadline { display: none; }
.rangeBox > .rangeInputs, .rangeBox > .rangeInputs > label.rangeLabel { width: 50%; position: relative; }
.rangeBox > .rangeInputs { display: flex; align-items: center; }
.rangeBox > .rangeInputs > label.rangeLabel { display: flex; align-items: center; justify-content: space-between; }
.rangeBox > .rangeInputs > label.rangeLabel > .rangeName { position: absolute; right: .5rem; top: 50%; transform: translateY(-50%); font-size: .7rem; color: var(--gray); }
.rangeBox > .rangeInputs > label.rangeLabel > .rangeInput { font-size: .8rem; padding: .3rem; border-radius: .25rem; width: 100%; background: transparent; outline: none; border: 1px solid var(--border2); background: var(--bodycolor); }
.rangeBox > .rangeSlider {
    display: flex; position: relative; margin: .5rem 0; width: 50%; z-index: 1; height: 16px;
    background-image: linear-gradient(to right, var(--gray2) 0, var(--secondcolor) 0, var(--secondcolor) 100%, var(--gray2) 100%);
    background-size: 100% 4px; background-repeat: no-repeat; background-position: center;
}
.rangeBox > .rangeSlider > .rangeSliderInput { cursor: grab; width: 100%; height: 100%; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: transparent; }
.rangeBox > .rangeSlider > .rangeSliderInput::-webkit-slider-runnable-track
{ background: none; width: 100%; height: 100%; }
.rangeBox > .rangeSlider > .rangeSliderInput::-webkit-slider-thumb
{ background-color: var(--bodycolor); border: 1px solid var(--secondcolor); border-radius: 50%; box-sizing: border-box; pointer-events: auto; width: 16px; height: 16px; -webkit-appearance: none; }
.rangeBox > .rangeSlider > .rangeSliderInput::-webkit-slider-thumb:hover
{ box-shadow: 0px 2px 6px rgba(0, 0, 0, .25); }
.rangeBox > .rangeSlider > .rangeSliderInput::-webkit-slider-thumb:active
{ box-shadow: 0px 4px 10px rgba(0, 0, 0, .4); }
.rangeBox > .rangeSlider > .rangeSliderInput:last-of-type { position: absolute; }
.rangeBox > .rangeSlider > .rangeSliderInput:focus { outline: none; }
.rangeBox > .rangeSlider > .rangeSliderInput:not(:only-of-type) { pointer-events: none; right: 0; }
.rangeBox > .rangeStep { width: 50%; position: relative; margin-bottom: 1.5rem; }
.rangeBox > .rangeStep > .rStep { position: absolute; font-size: .65rem; font-weight: 700; font-family: var(--monofont); }
.rangeBox > .rangeStep > .rStep.rs0 { left: 0; }
.rangeBox > .rangeStep > .rStep.rs25 { left: 25%; transform: translateX(-25%); }
.rangeBox > .rangeStep > .rStep.rs50 { left: 50%; transform: translateX(-50%); }
.rangeBox > .rangeStep > .rStep.rs75 { left: 75%; transform: translateX(-75%); }
.rangeBox > .rangeStep > .rStep.rs100 { left: 99%; transform: translateX(-99%); }

/* Card */
.card { position: relative; display: flex; min-width: 0; word-wrap: break-word; background: #fbfbfb; box-shadow: var(--boxShadow); background-clip: padding-box; margin: 4rem 0; }
.cardMd { min-width: 35%; max-width: 50%; }
.cardLg { min-width: 70%; max-width: 85%; }
.cardXl { min-width: 85%; max-width: 100%; }
.cardFull { min-width: 100%; max-width: 100%; }
.cardRow { flex-direction: row; }
.cardColumn { flex-direction: column; }
.cardBody { flex: 1 1 auto; padding: 2rem 4rem; }
.cardBodyTit { padding: .8rem 0; margin-bottom: .8rem; font-size: 1.1rem; font-weight: 700; color: var(--textcolor); border-bottom: 1px solid var(--pointcolor); }
.cardBodyTitSm h1 { position: relative; margin-bottom: .25rem; font-size: 1.1rem; font-weight: 700; color: var(--textcolor); padding-left: 15px; }
.cardBodyTitSm h1::before { position: absolute; content: ''; width: 3px; height: 100%; background: var(--pointcolor); top: 0; left: 0; }
.cardBodyTit small, .cardBodyTitSm small { font-weight: 400; }
.cardNav { margin: 1.5rem 2rem 0 2rem; }
.cardList { background: var(--bodycolor); margin: 1rem 2rem; border: 1px solid var(--border2); box-shadow: 0 5px 5px rgba(var(--secondcolor-rgb), .3); box-sizing: border-box; user-select: none; }
.cardList .cardLi { padding: 1.5rem 2rem; border-bottom: 1px solid var(--border2); }
.cardList .cardLi:last-child { border-bottom: 0; }
.cardList .cardLi .listTit { display: inline-block; }
.cardList .cardLi .listTit a { transition: color .2s ease;   }
.cardList .cardLi .listTit:hover a { color: var(--pointcolor); }
.cardList .cardLi .listCont .tag_el { font-size: .7rem; font-weight: 700; background: var(--border2); color: var(--pointcolor); padding: .1rem .2rem; margin-right: .2rem; border-radius: .2rem; white-space: pre; }
.cardList .cardLi .listCont .tag_etc { font-size: .6rem; font-weight: 700; background: var(--light); color: var(--gray); padding: .1rem .3rem; border-radius: .2rem; }
.cardList .cardLi .listScroll { max-height: 100px; overflow-y: scroll; background: var(--light); }
.cardList .cardLi .listScroll li { padding: .25rem .5rem; background: var(--light); border-radius: .25rem; cursor: help; }
.cardList .cardLi .listScroll li:hover { background: var(--gray2); }
.cardList .cardLi .listNav li { cursor: pointer; display: flex; align-items: center; margin: 0 .25rem; padding: .15rem .3rem; box-sizing: border-box; transition: all .25s ease-in-out; }
.cardList .cardLi .listNav li:hover { background: var(--light); }
.cardList .cardLi .listNav li > small { margin-left: .15rem; font-size: .8rem; font-weight: 700; }
.cardList .cardLi.disabled { background: var(--gray2); border-color: var(--light); }
.cardList .cardLi.disabled .listTit { opacity: .3; }
.cardList .cardLi.disabled .listCont { display: none; }
.cardTree { max-height: 500px; overflow-y: scroll; border: 1px solid var(--border2); background: var(--bodycolor); padding: 1rem 1.5rem; box-sizing: border-box; user-select: none; }
.cardTree .addWrap { cursor: pointer; }
.cardTree .addWrap:hover span { color: var(--pointcolor); }
.cardTree .orderWrap { display: none; }
.cardTree .orderWrap.on { display: flex; }
ul[data-card-depth="1"] > li { margin-bottom: .5rem; }
ul[data-card-depth="2"] > li { position: relative; padding: .2rem 0; cursor: help; }
ul[data-card-depth="2"] > li.on { background: var(--border2); }
ul[data-card-depth="2"] > li:hover { background: var(--light); }
ul[data-card-depth="2"] > li .orderTag { padding: 0 .3rem; background: var(--light); font-weight: 700; }
.cardTreeSection { padding: 1rem 1.5rem; background: var(--bodycolor); box-sizing: border-box; }
.cardTreeSection .emptyBase { padding: 2rem 0; text-align: center; }

/* CARDS TABS */
.cardTabWrap { background: var(--gray2); }
.cardTabWrap .cardTabs { display: inline-flex; align-items: center; width: auto; background: var(--gray2); }
.cardTabWrap .cardTabs .cardTab { padding: .75rem 1.5rem; font-size: 1.1rem; }
.cardTabWrap .cardTabs .cardTab a { color: var(--gray); }
.cardTabWrap .cardTabs .cardTab.active { background: #fbfbfb; }
.cardTabWrap .cardTabs .cardTab.active a { color: var(--textcolor); font-weight: 700; }

/* Form */
.reqLabel { font-weight: 700; color: var(--pointcolor); margin-left: 5px; }
.formGroup { position: relative; width: 100%; }
.formGroup::after { position: absolute; content:''; top: 50%; transform: translateY(-50%); right: 10px; color: var(--pointcolor); }
.formGroup input, .formGroup select, .formGroup textarea { outline: none; margin: 5px 0; padding: 10px 10px 10px 50px; background: var(--bodycolor); border: 1px solid var(--border); border-radius: 5px; transition: border .2s ease, background .2s ease; color: var(--textcolor); }
.formGroup input,.formGroup textarea { width: 100%; box-sizing: border-box; }
.formGroup label { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); color: var(--gray2); transition: color .2s ease; }
.formGroup label .material-symbols-rounded { vertical-align: middle; }
.formGroup input::placeholder { text-align: right; color: var(--gray2); font-size: .9rem; transition: color .2s ease; }
.formGroup input:focus, .formGroup select:focus, .formGroup textarea:focus { border-color: var(--gray2); background: var(--light); }
.formGroup input:focus ~ label, .formGroup select:focus ~ label, .formGroup textarea:focus ~ label { color: var(--pointcolor); }
.formGroup input:focus::placeholder { color: var(--textcolor); }
.formGroup input:read-only, .formGroup textarea:read-only { font-weight: 700; }
.formGroup input:disabled, .formGroup textarea:disabled { background: var(--gray); cursor: not-allowed; }

.formRow { position: relative; display: flex; align-items: center; flex-wrap: wrap; padding: .35rem 0; width: 100%; user-select: none; }
.formRow > .formLabel { width: 20%; display: block; }
.formRow > .formWrap { width: 80%; display: flex; align-items: center; }
.formRow > .formWrap ~ .regSlot { position: absolute; left: 20%; bottom: -10px; font-weight: 700; font-size: .8rem; }
.formRow input, .formRow select, .formRow textarea { outline: none; padding: .5rem; background: var(--bodycolor); border: 1px solid var(--border); border-radius: .2rem; transition: border .2s ease; box-sizing: border-box; font-family: var(--mainfont); color: var(--textcolor); font-size: .9rem; }
.formRow textarea { resize: none; min-height: 200px; }
.formRow input:focus, .formRow select:focus, .formRow textarea:focus { border-color: var(--pointcolor); }
.formRow input:read-only, .formRow textarea:read-only { font-weight: 700; }
.formRow input:disabled, .formRow textarea:disabled, .formRow select:disabled { background: var(--gray2); cursor: not-allowed; }
.formRow .division { margin: 0 .5rem; }
.formRow .input_attr:disabled { background: var(--gray2); color: var(--gray); cursor: not-allowed; }

.formRow .formTable { width: 100%; border-spacing: 0; border: 1px solid var(--gray2); background: var(--bodycolor); }
.formRow .formTable th, .formRow .formTable td { position: relative; padding: .25rem 0; border-bottom: 1px solid var(--gray2); border-right: 1px solid var(--gray2); font-weight: 700; font-size: .85rem; }
.formRow .formTable th { padding: .5rem 0; }
.formRow .formTable tr:last-child td { border-bottom: none; }
.formRow .formTable th:last-child, .formRow .formTable td:last-child { border-right: none; }
.formRow .formTable td input, .formRow .formTable td textarea { background: transparent; border: none; letter-spacing: -.05rem; font-size: .85rem; }
.formRow .formTable td select { background: transparent; border: none; }
.formRow .uiBox { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); cursor: pointer; }
.formRow .liner.moveBox { position: absolute; right: 35px; top: 50%; transform: translateY(-50%); cursor: grab; }

.searchSection { padding: .25rem 1rem; }
.searchWrap { position: relative; display: flex; align-items: center; justify-content: center; padding: 1rem .25rem; }
.searchWrap > select, .searchWrap > input { box-sizing: border-box; border: 1px solid var(--border); outline: none; transition: border .2s ease; }
.searchWrap > select { width: 80px; border-right: none; padding: .5rem; font-size: .85rem; transition: box-shadow .25s ease; }
.searchWrap > input { width: 100%; padding: .5rem .5rem .5rem 1.8rem; font-size: .85rem; border-radius: .25rem; transition: box-shadow .25s ease; }
.searchWrap > select ~ input { width: calc(100% - 80px); border-top-left-radius: 0; border-bottom-left-radius: 0; }
.searchWrap > input::placeholder { font-size: .85rem; }
.searchWrap > select:focus, .searchWrap > input:focus { border-color: rgba(var(--pointcolor-rgb), .5); box-shadow: 0 0 5px rgba(var(--pointcolor-rgb), .3); }
.searchWrap > button { position: absolute; left: .3rem; top: 50%; transform: translateY(-45%); background: transparent; display: flex; align-items: center; justify-content: center; padding: .5rem; }
.searchWrap > button > span { color: var(--gray2); font-size: 1rem; transition: font-size .3s ease, color .2s ease; }
.searchWrap > button:hover > span { color: var(--gray); }
.searchWrap > input:focus + button > span { color: var(--gray); font-size: 1.1rem; }

.detailSearchBox 
{   padding: 1rem; margin-bottom: 2rem; height: 0; opacity: 0; box-shadow: 0 2px 5px rgba(0, 0, 0, .2); overflow: hidden;
    border-radius: .5rem; transition: max-height .1s ease-out, opacity .12s ease-out; }
.detailSearchBox.show { height: auto; opacity: 1; }

/* FOLD LIST */
.foldings { max-height: 70vh; overflow-y: scroll; border: 1px solid var(--gray2); }
.foldings::-webkit-scrollbar { display: none; }
.foldings .fold_list { width: 100%; }
.foldings .fold_list .fold_tit { position: relative; display: flex; align-items: center; justify-content: space-between; padding: .5rem 1rem; font-size: 1rem; cursor: pointer; color: var(--bodycolor); background: rgba(0, 0, 0, .8); border: 1px solid rgba(0, 0, 0, .5); }
.foldings .fold_list .fold_tit > .fold_tit_txt { display: flex; align-items: center; justify-content: center; }
.foldings .fold_list .fold_tit > .fold_count { font-family: var(--monofont); }
.foldings .fold_list .fold_con { display: none; overflow: auto; height: 60vh; }
.foldings .fold_list .fold_con > table { width: 100%; border: 1px solid var(--dark); border-spacing: 0; }
.foldings .fold_list .fold_con > table > thead > tr > th { padding: .5rem 0; font-weight: 700; background: #f9f9f9; color: var(--textcolor); position: sticky; top: 0; z-index: 2; font-size: .8rem; border-bottom: 1px solid var(--dark); }
.foldings .fold_list .fold_con > table > tbody > tr:hover > td { background: #fafafa; }
.foldings .fold_list .fold_con > table > tbody > tr > td { border-bottom: 1px solid var(--dark); text-align: left; position: relative; padding: .8rem; font-size: .9rem; border-left: 1px solid var(--dark); }
.foldings .fold_list .fold_con > table > tbody > tr > td:first-child { border-left: 0; }
.foldings .fold_list .fold_con > table > tbody > tr > td.setTd { background: #f1f1f1; }
.foldings .fold_list .fold_con > table > tbody > tr > td.input_td { padding: .25rem 0; }
.foldings .fold_list .fold_con > table > tbody > tr > td > input { width: 95%; margin: 0 auto; border: none; border-bottom: 1px solid var(--gray2); background: transparent; outline: none; padding: .2rem .4rem; box-sizing: border-box; display: block; }
.foldings .fold_list .fold_con > table > tbody > tr > td > input:disabled { border-bottom: 0; font-weight: 700; }
.foldings .fold_list .fold_con > table > tbody > tr > td > input:disabled
.foldings .fold_list .fold_con > table > tbody > tr > td > input:focus,
.foldings .fold_list .fold_con > table > tbody > tr > td > input:active
{ border-color: var(--textcolor); }
.foldings .fold_list .fold_con > table > tbody > tr > td > .code_tag { display: inline-block; font-size: .7rem; font-weight: 700; margin-right: .5rem; padding: .2rem .4rem .1rem; background: var(--secondcolor); color: var(--textcolor); }

/* 인증 */
.certifyBox { width: 100%; position: relative;  }
.codeTrigger, .codeChecker { position: relative; left: 20%; }
.codeTrigger { display: flex; align-items: center; }
.codeTrigger .setTimer { margin: 0 1rem; display: none; align-items: center; }
.codeTrigger .setTimer.on { display: flex; }
.codeChecker { display: none; align-items: center; }
.codeChecker.on { display: flex; }
.codeChecker > input { outline: none; padding: .5rem; background: var(--bodycolor); border: 1px solid var(--border); transition: border .2s ease; box-sizing: border-box; font-family: var(--mainfont); color: var(--textcolor); font-size: .8rem; }
.codeChecker > button { outline: none; padding: .5rem .6rem; background: var(--bodycolor); font-size: .8rem; font-weight: 700; border: 1px solid var(--border); border-left: none; }

.portrait_wrap { width: 120px; height: auto; box-sizing: border-box; border: 1px solid var(--gray2); display: flex; align-items: center; justify-content: center; background: var(--bodycolor); }
.portrait_wrap.ptype_common { aspect-ratio: 3/4; }
.portrait_wrap.ptype_hosp { aspect-ratio: 1/1; }
.portrait_wrap.setter { width: 200px; height: auto; }
.portrait { position: relative; width: 110px; height: auto; border: 1px solid var(--gray2); }
.portrait_wrap.ptype_common .portrait { aspect-ratio: 3/4; }
.portrait_wrap.ptype_hosp .portrait { aspect-ratio: 1/1; }
.portrait_wrap.setter .portrait { width: 180px; height: auto; }
.portrait_setter { position: absolute; color: var(--gray); width: 2.5rem; height: 2.5rem; bottom: -1rem; right: -1rem; background: var(--bodycolor); border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 6px rgba(0, 0, 0, .25); cursor: pointer; }
.portrait_list { position: absolute; display: none; bottom: -10%; right: 0; width: 120%; box-shadow: 2px 2px 10px rgba(0, 0, 0, .2); border-radius: .5rem; overflow: hidden; }
.portrait_list.on { display: block; }
.portrait_list li { padding: .4rem .5rem; font-size: .8rem; font-weight: 700; background: var(--bodycolor); cursor: pointer; transition: background .2s ease; display: flex; align-items: center; }
.portrait_list li:hover { background: var(--light); }
.portrait img { width: 100%; height: 100%; user-select: none; }
.portrait_wrap.ptype_common .portrait img { object-fit: cover;  }
.portrait_wrap.ptype_hosp .portrait img { object-fit: contain; }
.savePortrait { display: none; }
.savePortrait button { border-radius: 1rem; }

.formBox { margin: .5rem 0; border: 1px solid var(--gray2); background: var(--bodycolor); font-weight: 400; font-size: .9rem; box-sizing: border-box; }
.fixBox { position: fixed; width: 100vw; bottom: 0; left: 0; background: var(--bodycolor); border-top: 1px solid var(--border); }
.fixBox input { border: none; outline: none; width: 100%; height: 100%; padding: 1rem 1.5rem; font-size: 1.5rem; font-weight: 700; }
.fixBox button { flex-grow: 1; }

.checkGroup { user-select: none; }
.checkGroup input[type=checkbox] { width: 1px; height: 1px; opacity: 0; }
.checkGroup input[type=checkbox] ~ label { position: relative; color: var(--textcolor); cursor: pointer; padding-left: 25px; user-select: none; }
.checkGroup input[type=checkbox] ~ label::before { position: absolute; content: ''; width: 1.2rem; height: 1.2rem; background: var(--bodycolor); color: var(--bodycolor); border: 1px solid var(--border); border-radius: .2rem; top: 50%; transform: translateY(-50%); left: 0; transition: background .2s ease; }
.checkGroup input[type=checkbox] ~ label::after { position: absolute; content: ''; width: 1.1rem; height: .7rem; top: 0; left: 4px; border: 3px solid transparent; border-top: none; border-right: none; transform: rotate(-50deg); transition: border-color .2s ease; }
.checkGroup input[type=checkbox]:checked ~ label::after { border-color: var(--pointcolor); }
.checkGroup input[type=radio] { width: 1px; height: 1px; opacity: 0; }
.checkGroup input[type=radio] ~ label { position: relative; color: var(--textcolor); cursor: pointer; padding-left: 25px; user-select: none; }
.checkGroup input[type=radio] ~ label::before { position: absolute; content: ''; width: 1.2rem; height: 1.2rem; background: var(--bodycolor); color: var(--bodycolor); border: 1px solid var(--border); border-radius: 50%; top: 50%; transform: translateY(-50%); left: 0; transition: background .2s ease; }
.checkGroup input[type=radio] ~ label::after { position: absolute; content: ''; width: .65rem; height: .4rem; top: .3rem; left: .25rem; border: 2px solid transparent; border-top: none; border-right: none; transform: rotate(-50deg); transition: border-color .2s ease; }
.checkGroup input[type=radio]:checked ~ label::before { background: var(--pointcolor); }
.checkGroup input[type=radio]:checked ~ label::after { border-color: var(--bodycolor);}

.checkListFrm { user-select: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; cursor: pointer; transition: background .15s ease; display: flex; align-items: center; justify-content: center; }
.checkListFrm input { width: 1px; height: 1px; opacity: 0; }
.checkListFrm input ~ label { position: relative; top: -15%; left: -10%; }
.checkListFrm input ~ label::before { position: absolute; content: ''; width: 1.2rem; height: .7rem; top: 0; left: 0; border: .25rem solid var(--gray2); border-top: 0; border-right: 0; transform: rotate(-50deg); transition: border-color .2s ease-out; }
.checkListFrm:hover input ~ label::before { border-color: var(--gray); }
.checkListFrm input:checked ~ label::before { border-color: var(--textcolor); }
.checkListFrm input:disabled ~ label::before, .checkListFrm:hover input:disabled ~ label::before { border-color: var(--gray2); }
.checkListFrm input:disabled:checked ~ label::before { border-color: var(--pointcolor); }

.imgCheckGroup { user-select: none; display: flex; align-items: center; justify-content: center; }
.imgCheckGroup input[type=checkbox], .imgCheckGroup input[type=radio] { width: 1px; height: 1px;; opacity: 0; }
.imgCheckGroup .select_box
{ display: flex; align-items: center; justify-content: center; min-width: 80%; max-width: 80%; margin: 1rem 0; padding: .5rem 1rem; cursor: pointer; box-sizing: border-box; border-radius: .5rem; border: 1px solid var(--secondcolor); box-shadow: 1px 1px 2.5px rgba(var(--secondcolor-rgb), .2); transition: background .2s ease, box-shadow .2s ease; }
.imgCheckGroup .select_box .ico { margin-right: .5rem; }
.imgCheckGroup .select_box .ico > img { max-width: 50px; height: auto; opacity: .5; transition: opacity .2s ease; }
.imgCheckGroup .select_box .txt { text-align: center; font-weight: 700; color: var(--gray); transition: color .2s ease; }
.imgCheckGroup .select_box:hover { background: rgba(var(--pointcolor-rgb), .1); box-shadow: 2px 2px 3.5px rgba(var(--secondcolor-rgb), .4); }
.imgCheckGroup input[type=checkbox]:checked ~ .select_box,
.imgCheckGroup input[type=radio]:checked ~ .select_box
{ background: rgba(var(--pointcolor-rgb), .15); box-shadow: 2px 2px 5px rgba(var(--secondcolor-rgb), .6); }
.imgCheckGroup .select_box:hover .ico > img { opacity: .9; }
.imgCheckGroup input[type=checkbox]:checked ~ .select_box .ico > img,
.imgCheckGroup input[type=radio]:checked ~ .select_box .ico > img
{ opacity: 1; }
.imgCheckGroup .select_box:hover .txt { color: var(--gray); }
.imgCheckGroup input[type=checkbox]:checked ~ .select_box .txt,
.imgCheckGroup input[type=radio]:checked ~ .select_box .txt
{ color: var(--textcolor); }

.btnGroup { display: flex; align-items: center; justify-content: center; }
.btnGroup > a , .btnGroup > button { cursor: pointer; font-weight: 700; }
.btnGroup > a { position: relative; margin-right: .5rem; padding-right: .6rem; color: var(--textcolor); }
.btnGroup > a:last-child { margin-right: 0; padding-right: 0; }
.btnGroup > a::after { display: block; position: absolute; content: ''; width: 1px; height: 70%; top: 50%; transform: translateY(-50%); right: 0; background: var(--border); }
.btnGroup > a:last-child:after { display: none; }

/* Button */
.outlineBtn { border-style: solid; border-width: 1px; }
.addrow { cursor: pointer; }
.dateRange { text-align: center; overflow-x: scroll; }

/* DAUM POST */
.addr > .addr_list { display: none; position: absolute; width: 50%; max-height: 350px; overflow-y: scroll; top: -50px; left: 20%; z-index: 100; box-sizing: border-box; border: 1px solid var(--pointcolor); padding: 0; }

/* SORTABLE */
.dragging { box-shadow: 0 0 5px rgba(var(--pointcolor-rgb), .5); border: 1px solid rgba(var(--pointcolor-rgb), .3);  }

/* LOCATIONS */
#location_si, #location_gu { height: 250px; overflow-y: scroll; }
#location_si { border-right: 1px solid var(--gray2); }
#location_si li { cursor: pointer; }
#location_si li:hover { background: var(--light); }
#location_si li.active { background: var(--border2); color: var(--pointcolor); font-weight: 700; }
#location_basket .loc_el, #location_basket .material-symbols-outlined, #location_basket .material-symbols-rounded, #location_basket .material-symbols-rounded { font-size: .8rem; }
#location_basket .loc_el { margin-right: 10px; margin-bottom: 7.5px; background: var(--border2); padding: .15rem .3rem; border-radius: .3rem; font-weight: 700; }
#location_basket .loc_el:last-child { margin-right: 0; }
#location_basket .material-symbols-outlined, #location_basket .material-symbols-rounded, #location_basket .material-symbols-rounded { color: var(--gray); }

/* AUTOCOMPLETE UI */
.ui-widget-content { max-height: 300px; overflow-x: hidden; overflow-y: scroll; font-family: var(--mainfont); font-size: .9rem; }
.ui-menu .ui-menu-item-wrapper { padding: .5rem .35rem; }
.ui-menu .ui-menu-item-wrapper:hover { background: var(--border2); border-color: var(--border2); color: var(--textcolor); }

/* STEPS */
.resumeSteps { display: flex; align-items: flex-end; justify-content: flex-end; }
.resumeSteps .resumeStep { margin-left: .25rem; padding: .5rem 1rem .25rem; cursor: pointer; background: var(--bodycolor); border: 1px solid var(--light); box-sizing: border-box; }
.resumeSteps .resumeStep:first-child { margin-left: 0; }
.resumeSteps .resumeStep a { color: var(--textcolor); text-align: right; }
.resumeSteps .resumeStep a .stepTit { font-size: .85rem; font-weight: 700; margin-bottom: .1rem; }
.resumeSteps .resumeStep a small { font-size: 1.1rem; display: inline-block; }
.resumeSteps .resumeStep.curStep a .stepTit { background: var(--pointcolor); color: var(--bodycolor); padding-right: .5rem; font-weight: 300; }
.resumeSteps .resumeStep.curStep a small { color: var(--pointcolor); font-weight: 700; }

button[type='submit']:disabled { background: var(--gray); cursor: not-allowed; }


/* PAGING */
.pagination li{background-color:#224bb7;margin: 0 2px;border-radius: 3px;width:2.5em;} 
.pagination a {color:#fff;padding:10px;display: block;text-align: center;}
.pagination .active{background-color:var(--gray);}

@media(max-width: 1200px){
    .material-symbols-outlined, .material-symbols-rounded, .material-symbols-rounded { font-size: 1.5rem; }

    div[data-tag=modalPopup].sm, div[data-tag=modalPopup].md, div[data-tag=modalPopup].lg, div[data-tag=modalPopup].xl { width: 75% !important; }

    .cardMd, .cardLg, .cardXl { max-width: 100%; min-width: 100%; }
    .cardBody{ padding: 2rem; }
    .cardTabWrap .cardTabs .cardTab a > span { display: none; }

    .formRow > .formLabel { width: 100%; margin-bottom: .5rem; font-size: 1.3rem; }
    .formRow > .formWrap { width: 100%; }
    .formRow input, .formRow select, .formRow textarea { width: 100%; padding: .75rem .5rem; font-size: 1.2rem; }
    .checkGroup.width15 {width: 20%;}

    .imgCheckGroup .select_box { min-width: 95%; max-width: 95%; }

    .codeTrigger.width60 {left: 50%; transform:  translateX(-50%); width: 100%}
}

@media(max-width: 990px){
    .checkGroup.width15{width: 33.3333%;}
}

@media(max-width: 768px){
    #brandName { width: 25%; }
    .topNav > li { font-size: 1rem; }
    .material-symbols-outlined, .material-symbols-rounded, .material-symbols-rounded { font-size: 2rem; }

    .contBox { margin-bottom: 3rem; }

    #location_si, #location_gu { height: 180px; }
    #location_si li, #location_gu li { font-size: 1.2rem; }
    #location_si li.width50 { width: 100%; }
    #location_gu li.width25 { width: 50%; }
    #location_basket .loc_el { font-size: 1.2rem; padding: .3rem .75rem; border-radius: .5rem; }
    #location_basket .loc_el, #location_basket .material-symbols-outlined, #location_basket .material-symbols-rounded, #location_basket .material-symbols-rounded { font-size: 1rem; }

    .cardBodyTitSm { flex-wrap: wrap; }
    .cardBodyTitSm > h1 { margin-bottom: 1rem; font-size: 1.5rem; }
    .cardBodyTitSm > .width50 { width: 100%; }
    .cardBodyTitSm > .width50.flex-between { justify-content: space-evenly; }

    .cardBodyTit { font-size: 1.5rem; margin-bottom: 1.5rem; }

    .cardList .cardLi { padding: 1rem; }
    .cardList .cardLi .listTit { margin-bottom: 1rem; }
    .cardList .cardLi .listCont .font-14 { font-size: 1.3rem; }
    .cardList .cardLi .listCont .flex { flex-wrap: wrap; }
    .cardList .cardLi .listCont .width25 { width: 50%; margin-bottom: .5rem; }
    .cardList .cardLi .listCont .width50, .cardList .cardLi .listCont .width75 { width: 100%; }
    .cardList .cardLi .listCont > .width50 { margin-bottom: 1rem; }
    .cardList .cardLi .listCont > .width50 > .width25 { font-weight: 700; }
    .cardList .cardLi .listCont > .width50 > .width25 .material-symbols-outlined { font-size: 1.8rem; }
    .cardList .cardLi .listCont .tag_el { font-size: 1rem; }
    .cardList .cardLi .listNav li > small { font-size: 1.2rem; }

    .formBox .width25, .formRow .width25 { width: 50%; margin-bottom: .25rem; }
    .formBox .width50, .formRow .width50, .formBox .width75, .formRow .width75 { width: 100%; margin-bottom: .5rem; }
    .formRow { white-space: nowrap; }
    .formRow .formTable { width: auto; min-width: 150%; max-width: 150%; }
    /* .formRow .formTable colgroup { display: none; } */
    .formRow .width45 { width: 100%; }
    .formRow .width10 { width: 0; }
    .formRow button { padding: .5rem 1rem; }
    .formRow button > .material-symbols-outlined { display: none; }
    .formRow button > .font-14 { font-size: 1.2rem; }
    .formRow .liner.moveBox { display: none; }
    .formRow textarea { padding: 1rem; font-size: 1.2rem; }

    .checkGroup.width25 { width: 50%; }
    .checkGroup.width50, .checkGroup.width75 { width: 100%; }
    .checkGroup input[type=radio] ~ label, .checkGroup input[type=checkbox] ~ label { font-size: 1.2rem; padding-left: 2rem; }
    .checkGroup input[type=radio] ~ label::before, .checkGroup input[type=checkbox] ~ label::before { width: 1.5rem; height: 1.5rem; }
    .checkGroup input[type=radio] ~ label::after { top: .4rem; left: .4rem; }
    .checkGroup input[type=checkbox] ~ label::after { top: .15rem; left: .35rem; }
    .toggleWrap > .toggleBox ~ label > .togglemode { font-size: 1.2rem; }

    .fixBox .container { width: 95%; }
    .fixBox .container .flex-between { flex-wrap: wrap; padding: 0 0 1.5rem; }
    .fixBox .container .flex-between > div { width: 100%; }

    div[data-tag=modalPopup].sm, div[data-tag=modalPopup].md, div[data-tag=modalPopup].lg, div[data-tag=modalPopup].xl { width: 90% !important; }
    div[data-tag=modalPopup] .modalBody h1.font-24 { font-size: 2rem; }
    div[data-tag=modalPopup] .modalBody .formRow.width50 { width: 100%; }
    div[data-tag=modalPopup] .modalBody .formRow label { font-size: 1.2rem; }
    div[data-tag=modalPopup] .modalBody .formRow > label { font-weight: 700; margin-bottom: .5rem; }
    div[data-tag=modalPopup] .modalBody label.text-center { text-align: left; }
    div[data-tag=modalPopup] .modalBody .flex { flex-wrap: wrap; }
    div[data-tag=modalPopup] .modalFooter button { padding: .75rem 2rem; margin-left: .5rem; }
    div[data-tag=modalPopup] .modalFooter button.font-14 { font-size: 1.5rem; }

    #memberBox .font-14 { font-size: 1rem; }
    .detailSearchBox h6 { margin-top: 1rem; margin-bottom: .5rem; }
    .detailSearchBox .width50,
    .rangeBox > .rangeInputs,
    .rangeBox > .rangeInputs > label.rangeLabel,
    .rangeBox > .rangeSlider,
    .rangeBox > .rangeStep
    { width: 100%; }
    .detailSearchBox .formBox .width20 { width: 33.3%; }

    .addr > .addr_list { width: 100%; max-height: 300px; left: 0; top: 50px; }
    
}