@charset "utf-8";
@import url('fonts.css');

/* reset */
html,body{width:100%;height:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:none;background-color:#fff;*word-break:break-all;-ms-word-break:break-all;-webkit-font-smoothing:antialiased;}
html,body,div,span,iframe,h1,h2,h3,h4,h5,h6,p,a,address,em,img,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,button{ margin:0;padding:0;font-weight:inherit;font-style:inherit;font-size:100%;font-family:inherit;}
body,input,select,textarea,button,pre{font-family:'roboto', 'Noto Sans KR', Dotum,Verdana,Arial,AppleGothic,Sans-serif;font-size:14px;line-height:1.438em;color:#fff;}

ol,ul{ list-style:none;}
img,fieldset,iframe,button{border:0 none}
img{vertical-align:middle;border:0 none}
label{ display:inline-block}
label,button{cursor:pointer}
button{ background:none;}
textarea{resize:none} /* 사이즈고정 */
table{ width:100%;border-collapse:collapse;border-spacing:0;empty-cells:show;}
th{ text-align:inherit;}
input,select,button{ outline:none!important; vertical-align:middle;}
input[type="text"],input[type="password"],input[type="number"] { /* text-indent:5px */ padding:0 5px;}
input[type="password"],input[type="file"],input[type="text"],input[type="number"] { height:22px; vertical-align:middle;}
select, select.form-control{ height:28px; font-size:inherit; padding:1px 2px; box-shadow:none!important; background:#262626; border:1px solid #333;}
select + select{ margin-left:7px;}
textarea,input { border:1px solid #444; background:none;}
select:hover,select:focus,textarea:hover,textarea:focus,input:hover,input:focus{ border:1px solid #b8860b;}
textarea[readonly],button[readonly],select[readonly],input[readonly],
textarea[disabled],button[disabled],select[disabled],input[disabled]{ background:#222;}
textarea[disabled],button[disabled],select[disabled],input[disabled]{ cursor:not-allowed !important;}
input:disabled:hover{ border:1px solid #e8e8e8; border-top-color:#bcbcbc; border-left-color:#bcbcbc;}

a{ color:#999;}
a:active, a:hover, a:focus{ color:#999; text-decoration:none;}
a.btn:link, a.btn:visited{ text-decoration:none;}
*:focus,*:hover{outline:none!important;}

::-moz-selection{background:#f07726;color:#fff;text-shadow:none}
::selection{background:#f07726;color:#fff;text-shadow:none}

/* Common */
caption{text-indent:-5000em;font-size:0;line-height:0}
legend{position:absolute;left:-5000em;font-size:0;height:0;}
.blind,hr{position:absolute;left:-5000em;top:-5000em;font-size:1px;text-indent:-5000em;line-height:1px}
.hidden{display:none}
marquee{ display:block; vertical-align:middle;}
.btn_area{ display:block; clear:both; position:relative; margin-top:10px;}
.btn_area:after{ display:block; clear:both; content:'';}

.cb{ clear:both}
.fl{ float:left}
.fr{ float:right !important}
.dinblock{ display: inline-block;}
.dblock{display: block;}

.tl{ text-align:left !important}
.tr{ text-align:right}
.tc{ text-align:center !important;}

.fz16{ font-size:16px;}

.ml5{ margin-left:5px;}
.ml10{ margin-left:10px;}

.mt10{ margin-top:10px;}
.mt20{ margin-top:20px;}
.mt30{ margin-top:30px;}

.w-4xs{ width:30px !important;}
.w-3xs{ width:50px !important;}
.w-2xs{ width:70px !important;}
.w-xs{ width:100px !important;}
.w-sm{ width:130px !important;}
.w-md{ width:150px !important;}
.w-lg{ width:200px !important;}
.w-2lg{ width:300px !important;}
.w-3lg{ width:400px !important;}
.w-4lg{ width:500px !important;}
.w-width{ width:100% !important;}

.txtover{ display:inline-block; max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; vertical-align:middle;}

.clr-666{ color:#666;}
.clr-999{ color:#999;}
.clr-primary{ color:#b8860b;}

select + input,
select + select,
select + .datepicker_area,
.datepicker_area + .btn-group{ margin-left:5px;}

/* Bootstrap */
.btn-darklight{ background-color:#444; border-color:#444;}
.btn-lg{ font-size:18px;}

/* checkbox, radio style */
.frm-chk,
.frm-rdo{ position:relative; padding-left:18px; cursor:pointer; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none; vertical-align:middle;}
.frm-chk input,
.frm-rdo input{ position:absolute; opacity:0; cursor:pointer;}
.frm-chk .frmark,
.frm-rdo .frmark{ position:absolute; top:50%; left:0; margin-top:-7px; width:14px; height:14px; background-color:#111; border-radius:50%; border:1px solid #444;}
.frm-chk .frmark:after,
.frm-rdo .frmark:after{ content:""; position:absolute; display:none;}
.frm-chk input:hover ~ .frmark,
.frm-rdo input:hover ~ .frmark{ border-color:#666}
.frm-chk input:checked ~ .frmark:after,
.frm-rdo input:checked ~ .frmark:after{ display:block;}
.frm-chk input:disabled ~ .frmark,
.frm-rdo input:disabled ~ .frmark{ border:1px solid #666; opacity:.5; cursor:not-allowed;}
* + .frm-chk,
* + .frm-rdo,
.frm-chk + .frm-chk,
.frm-rdo + .frm-rdo{ margin-left:20px !important;}
.frm-chk .tooltip-inner,
.frm-rdo .tooltip-inner{ width:max-content;}

/* checkbox, radio style */
.frm-chk .frmark {border-radius:2px;}
.frm-chk input:checked ~ .frmark { background:#b8860b; border-color:#b8860b;}
.frm-chk .frmark:after { left:2px; top:2px; width:8px; height:5px; border:solid #fff; border-width:0 0 2px 2px; -webkit-transform:rotate(-45deg); -ms-transform:rotate(-45deg); transform:rotate(-45deg);}
.frm-rdo .frmark { border-radius:50%;}
.frm-rdo input:checked ~ .frmark { border-color:#666;}
.frm-rdo .frmark:after { top:3px; left:3px; width:6px; height:6px; border-radius:50%; background:#b8860b;}
.frm-rdo-v2 .frmark{ background-color:#fff; border:1px solid #333;}
.frm-rdo-v2 input:hover ~ .frmark{ border-color:#111}
.frm-rdo-v2 input:checked ~ .frmark { border-color:#111;}
.frm-rdo-v2 .frmark:after {background:red;}

/* Bootstrap-Paginate */
.pagination{ height:28px; margin:0 auto;}
.pagination > li{ display:inline-block; margin:0 2px;}
.pagination-sm > li > a, .pagination-sm > li > span{ color:#fff;}
.pagination .btn_page { padding:4px; background:#111;}
.pagination .btn_page span{ display:block; width:20px; height:20px; font-size:0; }
.pagination .first_page span{ background-position:-5px -165px;}
.pagination .prev_page span{ background-position:-35px -165px;}
.pagination .next_page span{ background-position:-65px -165px;}
.pagination .last_page span{ background-position:-95px -165px;}
.pagination li.disabled span{ opacity:.5;}

/* 안내 */
.group_dsc{ margin-top:100px;}
.dsc,
.dsc-info,
.dsc-info-danger{ margin-top:10px; font-size:12px; color:#888; padding-left:15px; text-indent:-7px; line-height:16px; vertical-align:middle;}
.dsc{ padding-left:5px;}
.dsc-info:before{ display:inline-block; clear:both; content:'\f06a'; width:7px; font-size:11px; font-family:'Font Awesome 5 Free'; font-weight:900;}
.dsc-info-danger:before{ display:inline-block; clear:both; content:'\f06a'; width:7px; font-size:11px; font-family:'Font Awesome 5 Free'; font-weight:900;}
.dsc-info-danger{color:#fa2828;}
.dsc-info+.dsc-info{ margin-top:5px;}

/* 파일첨부 */
.file_area{ display:inline-flex; width:266px; margin-right:3px; vertical-align:middle;}
.file_area input[type="text"]{ flex:1; margin-right:5px; font-size:12px;}
.file_area *{ vertical-align:middle;}

/* datetimepicker - 테이블 내 캘린더 이용시 border 문제로 테이블아래 위치해야함 */
.datepicker_area{ display:inline-block; position:relative; vertical-align:middle;}
.datepicker_day{ width:100px; background:url('../images/calendar-month.png') no-repeat 80px center; padding-right:20px; line-height:24px; letter-spacing:0;}
.datepicker_month{ width:80px; background:url('../images/calendar-month.png') no-repeat 60px center; padding-right:20px; line-height:24px;}
.bootstrap-datetimepicker-widget{ border-radius:0; box-shadow:3px 3px 0 0 rgba(0,0,0,.2);}
.bootstrap-datetimepicker-widget .list-unstyled{ margin:20px;}
.bootstrap-datetimepicker-widget table th,
.bootstrap-datetimepicker-widget table td{ height:initial; border:none !important; background:#fff; text-align:center!important; font-size:12px; font-family:'malgun gothic';}
.bootstrap-datetimepicker-widget table td span{ display:block; float:left; width:31.8%; height:34px; line-height:34px; border-radius:0;}
.bootstrap-datetimepicker-widget table td.active,
.bootstrap-datetimepicker-widget table td.active:hover,
.bootstrap-datetimepicker-widget table td span.active{ background-color:#b8860b!important; border-radius:0;}
.bootstrap-datetimepicker-widget table td.day{ width:15px; height:15px; line-height:15px;}
.bootstrap-datetimepicker-widget table td.day:hover,
.bootstrap-datetimepicker-widget table td.hour:hover,
.bootstrap-datetimepicker-widget table td.minute:hover,
.bootstrap-datetimepicker-widget table td.second:hover{ background-color:#eee; border-radius:0;}
.bootstrap-datetimepicker-widget table td.today:before{ border-bottom-color:#b8860b;}
.bootstrap-datetimepicker-widget table tr th:first-child.day,
.bootstrap-datetimepicker-widget table tr td:first-child.day,
.bootstrap-datetimepicker-widget table tr th:first-child.dow{ color:#d76b00;}
.bootstrap-datetimepicker-widget table tr th:last-child.day,
.bootstrap-datetimepicker-widget table tr td:last-child.day,
.bootstrap-datetimepicker-widget table tr th:last-child.dow{ color:#164ebe;}
.bootstrap-datetimepicker-widget table tr td:first-child.old,
.bootstrap-datetimepicker-widget table tr td:first-child.new,
.bootstrap-datetimepicker-widget table tr td:last-child.old,
.bootstrap-datetimepicker-widget table tr td:last-child.new{color:#777}
.bootstrap-datetimepicker-widget table tr td.active{ color:#fff!important;}
.bootstrap-datetimepicker-widget table tr td.disabled{ color:#777!important;}
.bootstrap-datetimepicker-widget table thead th{ font-weight:bold!important;}
.bootstrap-datetimepicker-widget table thead tr:nth-of-type(2) th{ background:none; border-radius:0;}
.bootstrap-datetimepicker-widget table thead tr:nth-of-type(2) th:first-child{ border-radius:4px 0 0 4px;}
.bootstrap-datetimepicker-widget table thead tr:nth-of-type(2) th:last-child{ border-radius:0 4px 4px 0;}
.bootstrap-datetimepicker-widget table thead tr:first-child th{ height:25px; padding:0; background:none;  border-radius:0; font-weight:800!important; font-size:13px; vertical-align:middle;}
.bootstrap-datetimepicker-widget table thead tr:first-child th.prev span,
.bootstrap-datetimepicker-widget table thead tr:first-child th.next span{ font-size:16px;}
.bootstrap-datetimepicker-widget table.table-condensed{ background:#fff;}
.bootstrap-datetimepicker-widget table.table-condensed tr{ vertical-align:0;}
.bootstrap-datetimepicker-widget table.table-condensed a{ color:#333;}
.bootstrap-datetimepicker-widget .picker-switch td span{ height:25px; margin:0; line-height:25px; border:1px solid #ddd; color:#666;}
.bootstrap-datetimepicker-widget .picker-switch .fa-calendar-day:before{ content:'오늘'; font-weight:800;}
.bootstrap-datetimepicker-widget .picker-switch td:first-child{ padding-right:5px;}
.bootstrap-datetimepicker-widget .btn{ box-shadow:none;}
.bootstrap-datetimepicker-widget .btn:hover{ color:#b8860b;}
.bootstrap-datetimepicker-widget .picker-switch{ margin-top:5px;}


/* 로딩바 */
.loader_area.on{ display:flex;}
.loader_area.pos_a{ position:absolute;}
.loader_area{ display:none; position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:1081; align-items:center; justify-content:center;}
.loader_area .loader { width:40px; height:40px; border:5px solid rgba(255,255,255,.5); border-radius: 50%; border-top: 5px solid #fff; border-bottom: 5px solid #fff; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite;}
.loader_area .loader:before { content:''; position:absolute; top:50%; left: 50%; width:60px; height:60px; border:3px solid rgba(255,255,255,0); border-radius:50%; border-left:3px solid #fff; border-right:3px solid #fff; transform:translate(-50%, -50%);}
.loader_area .loader_txt{ display:none;}

.loader_area2{ position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:1039; display:flex; align-items:center; justify-content:center;}
.loader_area2 span { display:fixed; position:absolute; top:50%; left:50%; margin:-20px 0 0 -20px; border: 5px solid rgba(255,255,255,.5); border-radius: 50%; border-top: 5px solid #fff; border-bottom: 5px solid #fff; width: 40px; height: 40px; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite;}
.loader_area2 span:before { clear:both; content:''; position:absolute;	margin:-15px 0 0 -15px;	border: 3px solid rgba(255,255,255,0); border-radius: 50%; border-left: 3px solid #fff; border-right: 3px solid #fff; width: 60px; height: 60px;}

.loader_area3.pos_a{ position:absolute;}
.loader_area3{ position:fixed; left:0; top:0; width:100%; height:100%; background:rgba(0,0,0,.5); z-index:1081; display:flex; align-items:center; justify-content:center;}
.loader_area3 .loader{ width:80px; height:80px; border:5px solid rgba(255,255,255,.5); border-radius: 50%; border-top: 5px solid #fff; border-bottom: 5px solid #fff; -webkit-animation: spin 1.5s linear infinite; animation: spin 1.5s linear infinite;}
.loader_area3 .loader:before { content:''; position:absolute; top:50%; left: 50%; width:100px; height:100px; border: 3px solid rgba(255,255,255,0); border-radius: 70%; border-left: 3px solid #fff; border-right: 3px solid #fff; transform:translate(-50%, -50%);}
.loader_area3 .loader_txt{ height:40px; padding:0 20px; font-size:20px; background:#fff; border-radius:30px; position:absolute; line-height:40px; font-weight:bold; text-align:center; letter-spacing:-1px;}

.loader_area_txt .loader{ width:160px; height:160px; border-width:10px}
.loader_area_txt .loader:before{ width:240px; height:240px; border-width:5px;}
.loader_area_txt .loader_txt{ display:block; position:absolute; left:50%; top:50%; width:120px; height:40px; margin:-10px 0 0 -60px; font-size:30px; color:#fff; text-align:center;}
.loader_area_txt .loader_txt span{ font-size:50px; font-weight:800;}

.txt_connect:after{ position:absolute; clear:both; content:'CONNECTING...'; left:50%; top:50%; width:100px; height:20px; margin:-10px 0 0 -50px; font-family:'montserrat'; font-weight:700; color:#333; line-height:20px; letter-spacing:-.5px; text-align:center; background:#fff; border-radius:10px;}
.section_viewer .loader_area2 span{ margin-top:-5px;}
.section_viewer .txt_connect:after{ margin-top:5px;}

@-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg);} 100% { -webkit-transform: rotate(360deg);} }
@keyframes spin { 0% { transform: rotate(0deg);} 100% { transform: rotate(360deg);} }

/* 로딩바 - Dot Falling */
.loader_dot { display: flex; justify-content: center; align-items: center; position: relative; padding: 32px 0; margin: 0 -5%; overflow: hidden; width:50px;}
.dot_falling { position: relative; left: -9999px; box-shadow: 9999px 0 0 0 #fff; animation: dot_falling 1s infinite linear; animation-delay: 0.1s;}
.dot_falling, .dot_falling::before, .dot_falling::after { width: 6px; height: 6px; border-radius: 5px; background-color: #fff; color: #fff;}
.dot_falling::before, .dot_falling::after { content: ""; display: inline-block; position: absolute; top: 0;}
.dot_falling::before { animation: dot_falling_before 1s infinite linear; animation-delay: 0s;}
.dot_falling::after { animation: dot_falling_after 1s infinite linear; animation-delay: 0.2s;}
@keyframes dot_falling {
  0% {box-shadow: 9999px -15px 0 0 rgba(152, 128, 255, 0);}
  25%, 50%, 75% {box-shadow: 9999px 0 0 0 #fff;}
  100% {box-shadow: 9999px 15px 0 0 rgba(152, 128, 255, 0);}
}
@keyframes dot_falling_before {
  0% {box-shadow: 9984px -15px 0 0 rgba(152, 128, 255, 0);}
  25%, 50%, 75% {box-shadow: 9984px 0 0 0 #fff;}
  100% {box-shadow: 9984px 15px 0 0 rgba(152, 128, 255, 0);}
}
@keyframes dot_falling_after {
  0% {box-shadow: 10014px -15px 0 0 rgba(152, 128, 255, 0);}
  25%, 50%, 75% {box-shadow: 10014px 0 0 0 #fff;}
  100% {box-shadow: 10014px 15px 0 0 rgba(152, 128, 255, 0);}
}