label:after { content: ""; clear: both; }
/* input's initial css */
input[type=email], input[type=number], input[type=password], input[type=tel], input[type=text], input[type=time], input[type=date], input[type=month], input[type=search], input[type=week] { height: 35px; border-radius: 5px; border: 1px solid #dedede; text-indent: 7px; }
input[type=checkbox], input[type=radio] { vertical-align: middle; width: 20px; height: 20px; margin: auto 3px auto auto; }
input[type=checkbox] + a { vertical-align: middle; margin-left: 3px; margin-top: auto; margin-bottom: auto; font-weight: normal; }
input[type=checkbox] + label, input[type=radio] + label { vertical-align: middle; margin-left: 3px; margin-top: auto; margin-bottom: auto; font-weight: normal; /*min-width: 70px;*/ }
input[type=email], input[type=number], input[type=password], input[type=text] { padding: 0; width: 100%; }
input[type=number] { text-align: right; padding-right: 7px; }
input[type=time], input[type=date], input[type=month], input[type=week], input[type=tel] { padding: 0; width: 120px; }
input:focus { border: 1px solid black; }
select { height: 35px; padding: 0; border: 1px solid #dedede; border-radius: .25rem; text-indent: 7px; width: 100%; }
textarea { padding: .375rem .3rem; border: 1px solid #dedede; width: 100%; }
a { color: blue; }
a:hover, a:visited { text-decoration: none; }
div { vertical-align: middle; }
:disabled { background-color: lightgray; }
div.guidedInputBox { position: relative; }
div.guidedInputBox input { width: 100%; border: 0; border-radius: 5px; outline: none; color: black; font-size: 1em; transition: 0.5s; }
div.guidedInputBox span { position: absolute; left: 0; padding: 10px; pointer-events: none; font-size: 1em; color: rgba(0,0,0,0.5); text-transform: uppercase; }
div.guidedInputBox input:valid ~ span, div.guidedInputBox input:focus ~ span { color: white; transform: translateX(10px) translateY(-4px); font-size: 0.65em; padding: 0 10px; background: darkslategray; border-left: 1px solid white; border-right: 1px solid white; letter-spacing: 0.2em; }
div.guidedInputBox input:valid, div.guidedInputBox input:focus { border: 1px solid white; }
/* Table */
table.ex_table01 { border-top: 2px solid darkblue; border-bottom: 1px solid darkblue; }
table.ex_table01 > tbody > tr > th { background-color: lightgray; padding: 7px 10px; font-size: medium; font-weight: normal; }
table.ex_table01 > tbody > tr > td { background-color: white; padding: 7px 10px; font-size: medium; font-weight: normal; }
table.ex-table101 > thead > tr > th, table.ex-table101 > tbody > tr > th { padding-left: 5px; }
/* Tab */
.tab_block { display: flex; flex-wrap: wrap; }
.tab_each { display: none; order: 1; width: 100%; }
.tab_block > label { background-color: #f0f0f0; color: black; padding: 17px 10px; width: auto; text-align: center; cursor: pointer; border-right: 1px solid #eee; border-bottom: 1px solid #eee; transition: all 600ms ease-in-out; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.tab_block > input[type="radio"] { display: none; }
.tab_block > input[type="radio"] + label:hover { background-color: lightgray; }
.tab_block > input[type="radio"]:checked + label { background: dodgerblue; color: white; border-right: 1px solid transparent; border-bottom: 1px solid transparent; }
.tab_block > input[type="radio"]:checked + label + .tab_each { display: block; }
/* Tab (old version) */
.tab { padding: 0; background-color: #f1f1f1; border-top-left-radius: 10px; border-top-right-radius: 10px; display: inline-block; }
.tab li { background-color: inherit; float: left; border: none; outline: none; cursor: pointer; padding: 14px 16px; transition: 0.3s; font-size: 17px; border-top-left-radius: 10px; border-top-right-radius: 10px; }
.tab li:hover { background-color: #ddd; }
.tab li.active { background-color: #4285f4; color: white; }
.tabcontent { display: none; /*padding: 6px 0;*/ border-top: none; }
/* Hide Number Arrow */
input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
/* Chrome, Safari, Edge, Opera */ 
input[type=number] { -moz-appearance: textfield; }
/* Firefox */
/* Top Menu */
ul.top-menu { position: absolute; right: 66px; top: 64px; }
ul.top-menu > li { float: left; margin-left: 5px; }
ul.top-menu > li.has-submenu { position: relative; }
ul.top-menu > li > a { color: white; padding: 6px 25px; border: 1px solid white; border-radius: 5px; }
ul.top-menu > li > a:hover { background-color: darkcyan; color: white !important; }
ul.top-menu > li.has-submenu > ul.submenu { display: none; list-style-type: none; position: absolute; padding: 0; width: max-content; right: 0; background-color: darkcyan; border: solid 1px #f0f0f0; z-index: 100; top: 20px; }
ul.top-menu > li.has-submenu:hover > ul.submenu { display: block; color: white !important; }
ul.top-menu > li.has-submenu > ul.submenu > li { float: none; min-width: 110px; }
ul.top-menu > li.has-submenu > ul.submenu > li:hover { background-color: dodgerblue; }
ul.top-menu > li.has-submenu > ul.submenu > li > a { color: white; font-weight: normal; font-size: 13px; padding: 3px 10px; line-height: 30px; width: 200px; display: block; }
ul.top-menu > li.has-submenu > ul.submenu > li:hover > a { color: white; }
/* File Upload */
label.myUpload { display: inline-block; }
label.myUpload > input[type="file"] { position: fixed; top: -1000px; }
label.myUpload > span { cursor: pointer; }
/* buttons */
.ex_btn { display: inline-block; padding: 3px 10px; color: white !important; font: 11px/11px Tahoma,arial,sans-serif,'Fontawesome'; border-radius: 3px; background-color: dodgerblue; border: 0; text-decoration: none; -webkit-user-select: none; user-select: none; }
.ex_btnS { display: inline-block; padding: 5px 10px; color: white !important; font: 12px/14px Tahoma,arial,sans-serif,'Fontawesome'; border-radius: 3px; background-color: dodgerblue; border: 0; text-decoration: none; -webkit-user-select: none; user-select: none; }
.ex_btnM { display: inline-block; padding: 7px 15px; color: white !important; font: 14px/14px Tahoma,arial,sans-serif,'Fontawesome'; border-radius: 5px; background-color: dodgerblue; border: 0; text-decoration: none; -webkit-user-select: none; user-select: none; }
.ex_btnL { display: inline-block; padding: 8px 20px; color: white !important; font: 17px/17px Tahoma,arial,sans-serif,'Fontawesome'; border-radius: 8px; background-color: dodgerblue; border: 0; text-decoration: none; -webkit-user-select: none; user-select: none; }
.ex_btn:hover, .ex_btnS:hover, .ex_btnM:hover, .ex_btnL:hover { color: beige; }
.ex_btn.medium, .ex_btnS.medium, .ex_btnM.medium, .ex_btnL.medium { padding: 8px 20px; font-size: 12px; }
.ex_btn.blue, .ex_btnS.blue, .ex_btnM.blue, .ex_btnL.blue { background-color: dodgerblue; }
.ex_btn.darkblue, .ex_btnS.darkblue, .ex_btnM.darkblue, .ex_btnL.darkblue { background-color: darkblue; }
.ex_btn.darkgreen, .ex_btnS.darkgreen, .ex_btnM.darkgreen, .ex_btnL.darkgreen { background-color: darkgreen; }
.ex_btn.darkred, .ex_btnS.darkred, .ex_btnM.darkred, .ex_btnL.darkred { background-color: darkred; }
.ex_btn.gray, .ex_btnS.gray, .ex_btnM.gray, .ex_btnL.gray { background-color: #666; }
.ex_btn.green, .ex_btnS.green, .ex_btnM.green, .ex_btnL.green { background-color: green; }
.ex_btn.lightgray, .ex_btnS.lightgray, .ex_btnM.lightgray, .ex_btnL.lightgray { background-color: lightgray; }
.ex_btn.red, .ex_btnS.red, .ex_btnM.red, .ex_btnL.red { background-color: red; }
.ex_infobtn { display: inline-block; padding: 3px 10px; color: black !important; font: 11px/11px Tahoma,arial,sans-serif,'Fontawesome'; border-radius: 3px; background-color: white; border: 0; text-decoration: none; border: 2px solid black; }
.ex_infobtnS { display: inline-block; padding: 5px 10px; color: black !important; font: 12px/14px Tahoma,arial,sans-serif,'Fontawesome'; border-radius: 3px; background-color: white; border: 0; text-decoration: none; border: 2px solid black; }
.ex_infobtnM { display: inline-block; padding: 7px 15px; color: black !important; font: 14px/14px Tahoma,arial,sans-serif,'Fontawesome'; border-radius: 5px; background-color: white; border: 0; text-decoration: none; border: 2px solid black; }
.ex_infobtnL { display: inline-block; padding: 8px 20px; color: black !important; font: 17px/17px Tahoma,arial,sans-serif,'Fontawesome'; border-radius: 8px; background-color: white; border: 0; text-decoration: none; border: 2px solid black; }
.ex_infobtn:hover, .ex_infobtnS:hover, .ex_infobtnM:hover, .ex_infobtnL:hover { color: beige; }
.ex_infobtn.blue, .ex_infobtnS.blue, .ex_infobtnM.blue, .ex_infobtnL.blue { color: dodgerblue; border-color: dodgerblue; }
.ex_infobtn.darkblue, .ex_infobtnS.darkblue, .ex_infobtnM.darkblue, .ex_infobtnL.darkblue { color: darkblue; border-color: darkblue; }
.ex_infobtn.darkgreen, .ex_infobtnS.darkgreen, .ex_infobtnM.darkgreen, .ex_infobtnL.darkgreen { color: darkgreen; border-color: darkgreen; }
.ex_infobtn.darkred, .ex_infobtnS.darkred, .ex_infobtnM.darkred, .ex_infobtnL.darkred { color: darkred; border-color: darkred; }
.ex_infobtn.gray, .ex_infobtnS.gray, .ex_infobtnM.gray, .ex_infobtnL.gray { color: #666; border-color: #666; }
.ex_infobtn.lightgray, .ex_infobtnS.lightgray, .ex_infobtnM.lightgray, .ex_infobtnL.lightgray { color: lightgray; border-color: lightgray; }
.ex_infobtn.green, .ex_infobtnS.green, .ex_infobtnM.green, .ex_infobtnL.green { color: green; border-color: green; }
.ex_infobtn.red, .ex_infobtnS.red, .ex_infobtnM.red, .ex_infobtnL.red { color: red; border-color: red; }
.ex_sup { position: relative; top: -5px; text-decoration: none; color: dodgerblue; }
.content_block { margin-top: 10px; background: white; padding: 10px; border-radius: 20px; box-shadow: 3px 3px lightgrey; }
/* Print */
@media print { @page { size: auto; /* auto is the initial value */ margin: 5mm 5mm; /* this affects the margin in the printer settings */ text-align: center; }}
/* datagrid related */
.exPopup .ex-datagrid-wrap .ex-datagrid > tbody > tr > td { padding: 8px 3px; }
/* secondary button */
.btn-secondary.active, .btn-secondary:active, .show > .btn-secondary.dropdown-toggle { color: #fff; background-color: #2764e3; border-color: darkblue; }
.btn-secondary:not(:disabled):not(.disabled).active, .btn-secondary:not(:disabled):not(.disabled):active, .show > .btn-secondary.dropdown-toggle { color: #fff; background-color: #2764e3; border-color: darkblue; }
.solo_link_list:before { content: "\f054"; font-family: FontAwesome; padding-right: 5px; }
.solo_link_list:hover { color: #0060be; }

/* special effect */
/* 1. Shining Text */ .shining_text { position: relative; font-family: sans-serif; text-transform: uppercase; font-size: 2em; letter-spacing: 4px; overflow: hidden; background: linear-gradient(90deg, #000, #fff, #000); background-repeat: no-repeat; background-size: 80%; animation: shining 3s linear infinite; -webkit-text-fill-color: transparent; }
@keyframes shining { 0% { background-position: -500%; }
100% { background-position: 500%; }
}
/* 2. Ticker */
.ticker { position: relative; width: 100%; overflow: hidden; }
.ticker > .scroll { width: 100%; display: flex; }
.ticker > .scroll > div { color: #000; font-size: 2em; background: #fff; white-space: nowrap; font-weight: 900; animation: ticker 10s linear infinite; animation-delay: -10s; }
@keyframes ticker { 0% { transform: translateX(200%); }
100% { transform: translateX(-100%); }
}
/* 3. Animated Check Box */
.ex-checkbox { position: relative; width: 120px !important; height: 30px !important; -webkit-appearance: none; background: linear-gradient(0deg, #333, #000); outline: none; border-radius: 20px; box-shadow: 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0,0,0,1), 0 5px 20px rgba(0,0,0,.5), inset 0 0 15px rgba(0,0,0,.2); }
.ex-checkbox:before { content: ''; position: absolute; top: 0; left: 0; width: 80px; height: 30px; background: linear-gradient(0deg, #000, #6b6b6b); border-radius: 20px; box-shadow: 0 0 0 1px #232323; transform: scale(.98, .96); transition: .5s; }
.ex-checkbox:checked:before { left: 40px; }
.ex-checkbox:after { content: ''; position: absolute; top: calc(50% - 2px); left: 60px; width: 4px; height: 4px; background: linear-gradient(0deg, #6b6b6b, #000); border-radius: 50%; transition: .5s; }
.ex-checkbox:checked { background: linear-gradient(0deg, #6dd1ff, #20b7ff); box-shadow: 0 0 2px #6dd1ff, 0 0 0 4px #353535, 0 0 0 5px #3e3e3e, inset 0 0 10px rgba(0,0,0,1), 0 5px 20px rgba(0,0,0,.5), inset 0 0 15px rgba(0,0,0,.2); }
.ex-checkbox:checked:after { background: #63cdff; left: 100px; box-shadow: 0 0 5px #13b3ff, 0 0 15px #13b3ff; }
/* 100px = 60px + 40px */ 
/* 4. Flip Button 3d */
/* <a href="#" class="ex-flip-button"> <span class="front">Click</span> <span class="center"></span> <span class="back">Here</span> </a> */
a.ex-flip-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 200px; height: 60px; text-align: center; transform-style: preserve-3d; perspective: 1000px; transform-origin: center center; }
a.ex-flip-button > span { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-align: center; line-height: 60px; font-size: 24px; background: rgba(255, 255, 255, .05); transform-style: preserve-3d; backface-visibility: hidden; border-radius: 30px; text-transform: uppercase; color: #fff; transition: 1s; }
a.ex-flip-button > span.front { transform: rotateX(0deg) translateZ(20px); }
a.ex-flip-button:hover span.front { transform: rotateX(-180deg) translateZ(20px); }
a.ex-flip-button > span.back { transform: rotateX(180deg) translateZ(20px); }
a.ex-flip-button:hover span.back { transform: rotateX(0deg) translateZ(20px); }
a.ex-flip-button > span.center { background: linear-gradient(to left, #c31a5b, #7129bd); }
a.ex-flip-button > span.center:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to left, #ffdd1f, #c31a5b); border-radius: 30px; transform: translateZ(-1px); }
a.ex-flip-button:hover span.center { transform: rotateX(-180deg); }
/* 5. Reveal Text (hide -> rising animation) */
p.reveal { display: inline-block; border-bottom: 5px solid #fff; overflow: hidden; box-shadow: 0px 1px 0px rgba(0, 0, 0, .5); animation: reveal 2s linear forwards; }
@keyframes reveal { 0% { width: 0px; height: 0px; }
30% { width: 100%; height: 0px; }
60% { width: 100%; height: 80px; }
80% { width: 100%; height: 80px; box-shadow: 0px 1px 0px rgba(0, 0, 0, .5); }
100% { width: 100%; height: 80px; box-shadow: 0px 5px 0px rgba(0, 0, 0, .5); }
}
/* 6. Vertical Menu */
.vmenu { position: fixed; inset: 10px; background: #287bff; width: 66px; border-left: 10px solid #287bff; overflow: hidden; border-radius: 50px; box-shadow: 15px 15px 25px rgba(0, 0, 0, 0.05); transition: 0.5s; box-sizing: initial; z-index: 10; }
.vmenu.active { width: 300px; border-radius: 20px; }
.vmenu > .toggle { position: absolute; bottom: 15px; right: 15px; width: 50px; height: 50px; background: #fff; border-radius: 50%; box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.15); cursor: pointer; display: flex; justify-content: center; align-items: center; }
.vmenu > .toggle::before { content: ''; position: absolute; width: 26px; height: 3px; border-radius: 3px; background: #365fa1; transform: translateY(-5px); transition: 1s; }
.vmenu > .toggle::after { content: ''; position: absolute; width: 26px; height: 3px; border-radius: 3px; background: #365fa1; transform: translateY(5px); transition: 1s; }
.vmenu.active .toggle::before { transform: translateY(0px) rotate(-405deg); }
.vmenu.active .toggle::after { transform: translateY(0px) rotate(225deg); }
.vmenu ul { position: absolute; top: 0; left: 0; width: 100%; padding: 0; }
.vmenu ul li { position: relative; list-style: none; width: 100%; border-top-left-radius: 30px; border-bottom-left-radius: 30px; }
.vmenu ul li:hover { background: #fff; }
.vmenu ul li:nth-child(1) { top: 20px; margin-bottom: 40px; background: none; }
.vmenu ul li:not(:first-child):hover::before { content: ''; position: absolute; top: -20px; right: 0; width: 20px; height: 20px; background: transparent; border-bottom-right-radius: 20px; box-shadow: 7.5px 7.5px 7.5px #fff; }
.vmenu ul li:not(:first-child):hover::after { content: ''; position: absolute; bottom: -20px; right: 0; width: 20px; height: 20px; background: transparent; border-top-right-radius: 20px; box-shadow: 7.5px -7.5px 7.5px #fff; }
.vmenu ul li a { position: relative; display: flex; width: 100%; text-decoration: none; color: #fff; }
.vmenu ul li:hover:not(:first-child) a { color: #365fa1; }
.vmenu ul li a .icon { position: relative; display: block; min-width: 60px; height: 60px; line-height: 60px; text-align: center; }
.vmenu ul li a .icon { font-size: 1.75em; }
.vmenu ul li a .title { position: relative; display: block; padding: 0 10px; height: 60px; line-height: 60px; text-align: start; white-space: nowrap; font-family: arial; }
/* 7. Chat Area */
.ex_chat1 { position: relative; width: 80%; margin-left: 11px; padding: 5px 14px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, .7); background-color: gold; }
.ex_chat1:after { position: absolute; content: ""; width: 0; height: 0; top: 5px; border-top: 15px solid gold; left: -15px; border-left: 15px solid transparent; }
.ex_chat1 + p { margin: 5px 25px; width: 80%; }
.ex_chat2 { position: relative; width: 80%; margin-left: calc(20% - 11px); margin-right: 10px; padding: 5px 14px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, .7); background-color: lightgray; }
.ex_chat2:after { position: absolute; content: ""; width: 0; height: 0; top: 5px; border-top: 15px solid lightgray; right: -15px; border-right: 15px solid transparent; }
.ex_chat2 + p { margin: 5px calc(20% - 11px); width: 80%; }
.ex_chat1w { position: relative; width: 80%; margin-left: 11px; padding: 5px 14px; border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; -moz-box-shadow: 0px 0px 6px rgba(0, 0, 0, .7); background-color: greenyellow; }
.ex_chat1w:after { position: absolute; content: ""; width: 0; height: 0; top: 5px; border-top: 15px solid greenyellow; left: -15px; border-left: 15px solid transparent; }
.ex_chat1w + p { margin: 5px 25px; width: 80%; }
/* 8. Hidden Checkbox, Radiobutton */
.ex_hidden_button { position: absolute; clip: rect(0,0,0,0); pointer-events: none; }
.ex_hidden_button + label { padding: 7px 5px; background-color: #6c757d; color: white; margin-left: 0 !important; margin-right: 0; }
.ex_hidden_button:checked + label { padding: 7px 5px; background-color: #2764e3; color: white; margin-left: 0 !important; margin-right: 0; }
/* 9. blink */
.ex_blink { animation: ex_blinker 3s linear infinite; }
@keyframes ex_blinker { 50% { opacity: 0; }}
/* 10. Progress Bar */ /* 반투명 회색 배경 (클릭 방지용) */
.progress-overlay { position: fixed; top: 0; left: 0; width: 100vw; /* 화면 전체 너비 */ height: 100vh; /* 화면 전체 높이 */ background-color: rgba(128, 128, 128, 0.6); /* 회색 바탕의 반투명 설정 */ z-index: 9998; /* 프로그레스 요소들보다 한 단계 낮게 설정 */ }
/* 프로그레스 바 전체 배경 (기존 동일) */
.progress-container { position: fixed; top: 300px; left: 50%; transform: translateX(-50%); width: 60%; height: 8px; background-color: #f0f0f0; /* 오버레이가 회색이므로 바 배경을 살짝 더 밝게 조정 */ border-radius: 10px; overflow: hidden; z-index: 9999; /* 오버레이보다 위에 표시 */ box-shadow: 0 4px 10px rgba(0,0,0,0.3); /* 배경이 어두워졌으므로 그림자도 조금 더 진하게 */ }
/* 실제 진행률을 나타내는 색상 바 (기존 동일) */
.progress-bar { width: 0%; height: 100%; background-color: #4caf50; transition: width 0.3s ease; }
/* 진행 상태 텍스트 (기존 동일) */
.progress-text { position: fixed; top: 250px; left: 50%; transform: translateX(-50%); background-color: rgba(0, 0, 0, 0.85); /* 텍스트가 더 잘 보이도록 배경을 살짝 어둡게 */ color: #ffffff; padding: 6px 14px; border-radius: 20px; font-size: 14px; font-weight: bold; z-index: 9999; /* 오버레이보다 위에 표시 */ }

.auto-height {
    width: 100%;
    min-height: 32px; /* 최소 높이 설정 */
    resize: none; /* 사용자가 수동으로 조절하지 못하게 차단 */
    overflow-y: hidden; /* 스크롤바 숨김 */
    box-sizing: border-box;
    padding: 10px;
    line-height: 1.5;
}