@charset "UTF-8";
/*** Button (before 202206) ***/
.btn:focus, .btn:focus:active, .active.btn:focus, .focus.btn, .focus.btn:active, .focus.active.btn { outline: none !important; }

button { padding: 4px 10px; }

button.btn { display: inline-block; overflow: visible; zoom: 1; height: 23px; line-height: 24px; margin: 0; border: 1px solid #CCC; border-radius: 4px; background-color: #F0F0F0; }

button.btn:-moz-focus-inner { padding: 0; border: 0; }

button.btn[disabled], button.btn[disabled]:hover, button.btn[disabled]:active { position: relative; background-color: #fff !important; color: #000 !important; opacity: .4; cursor: not-allowed; }

button.btn.disabled { position: relative; opacity: .4; cursor: not-allowed; }

button.btn.strong { font-weight: bold; }

button.btn span.rightArrow { display: inline-block; width: 20px; height: 100%; margin-top: -4px; margin-right: -10px; margin-left: 10px; border-left: 1px solid #DADADA; background: url(/resources/img/icon/arrow_right2.png) center no-repeat; vertical-align: middle; opacity: .8; }

button.btn.xsmall { margin-left: 2px; padding: 8px 12px 8px 32px; vertical-align: top; }

button.btn.xsmall:before { left: 12px !important; }

button.btn.small { padding: 8px 10px 8px 37px !important; }

button.btn.middle { height: 30px; line-height: 30px; }

button.btn.middle:last-child { margin-right: 0 !important; }

button.btn.large { height: 36px; line-height: 36px; padding: 0 20px; font-weight: bold; }

button.btn.xlarge { height: 46px; line-height: 46px; padding: 0 30px; font-weight: bold; }

button.btn img { margin-right: 3px; vertical-align: middle; }

/*** Btn Group ***/
.btn-group { display: inline-block; zoom: 1; margin: 0; padding: 0; vertical-align: middle; }

.btn-group button.btn { margin-left: -1px; border-radius: 0; font-size: 12px; }

.btn-group button.btn:first-child { border-radius: 3px 0 0 3px; }

.btn-group button.btn:last-child { border-radius: 0 3px 3px 0; }

.btn-group.paginate { border-bottom: none; }

.btn-group.paginate button.btn { background-color: #FFFFFF; background-image: -webkit-gradient(linear, left top, left bottom, from(white), to(rgba(255, 255, 255, 0))); background-image: linear-gradient(white, rgba(255, 255, 255, 0)); -webkit-box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.3) inset; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05), 0 1px 0 rgba(255, 255, 255, 0.3) inset; }

.btn-group.paginate button.btn:hover { background-color: #EEE; color: #555; }

.btn-group.paginate button.btn:active { background: #F5F5F5; text-shadow: none; }

.btn-group.paginate button.btn:first-child { border-radius: 8px 0 0 8px; }

.btn-group.paginate button.btn:last-child { border-radius: 0 8px 8px 0; }

/*** Btn Tab ***/
button.tab { display: inline-block; *display: inline; overflow: visible; position: relative; zoom: 1; height: 33px; line-height: 33px; margin: 0; margin-bottom: -1px; margin-left: 1px; padding: 5px; border: 1px solid #DADADA; border-bottom: none; border-radius: 5px 5px 0 0; background-color: #FFFFFF; font-size: 12px; color: #555; text-decoration: none; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.9); white-space: nowrap; -webkit-box-shadow: 0 1px 0 #FFF inset; box-shadow: 0 1px 0 #FFF inset; cursor: pointer; outline: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }

button.tab.on.gray { background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.02))); background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02)); color: #064E7D; }

button.tab.off { top: 0; height: 31px; line-height: 31px; border: 1px solid #E0E0E0; border-bottom: 1px solid #DADADA; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.03)), to(rgba(255, 255, 255, 0))); background-image: linear-gradient(rgba(0, 0, 0, 0.03), rgba(255, 255, 255, 0)); color: #999; }

button.tab.off:hover { border: 1px solid #E5E5E5; color: #888; }

button.tab.off[disabled]:hover { top: 1px; height: 31px; line-height: 31px; border: 1px solid #F0F0F0; border-bottom: 1px solid #DADADA; color: #AAA; }

button.tab.strong { font-weight: bold; }

/* Button Type ABC 220816 */
.btn-bc { display: inline-block; position: relative; height: 40px; line-height: 38px; margin: 0; padding: 0 10px; border: 1px solid transparent; border-radius: 5px; background-color: var(--ui-color-darkgray1); font-size: 16px; color: #fff; text-align: center; text-decoration: none; -webkit-transition: all 0.2s ease; transition: all 0.2s ease; cursor: pointer; min-width: 140px; -webkit-appearance: none; }

.btn-bc + .btn-bc { margin-left: 4px; }

.btn-bc.typ-a { background-color: var(--ui-color-darkgray1); color: #fff; border-color: var(--ui-color-darkgray1); }

.btn-bc.typ-b { background-color: #fff; color: #212b33; border-color: var(--ui-color-darkgray1); }

.btn-bc.typ-c { background-color: #27425c; color: #fff; border-color: var(--ui-color-darkgray1); position: relative;}

.btn-bc.typ-c .delete-icon { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); cursor: pointer; font-size: 13px;}

.btn-bc.typ-d { background-color: #fff; color: #212b33; border-color: var(--ui-color-darkgray1); position: relative; margin: 0; }

.btn-bc.typ-d .select-icon { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); cursor: pointer; font-size: 20px;}

.btn-bc.typ-b:hover { border-color: #ccd1d9; }

.btn-bc.typ-d:hover { border-color: #ccd1d9; }

.btn-bc:hover { background-color: #ccd1d9; color: var(--ui-color-darkgray1); border-color: #ccd1d9; }

.btn-bc:active { background-color: #ccd1d9; color: #fff; border-color: #ccd1d9 !important; }

.btn-bc.typ-a:disabled, .btn-bc.typ-b:disabled, .btn-bc.typ-c:disabled, .btn-bc.typ-d:disabled { background-color: #e6e9ed; color: #999; cursor: not-allowed; border-color: #e6e9ed; }

.btn-bc.typ-a:hover:disabled, .btn-bc.typ-b:hover:disabled, .btn-bc.typ-c:hover:disabled, .btn-bc.typ-d:hover:disabled { background-color: #e6e9ed; color: #999; cursor: not-allowed; border-color: #e6e9ed; }

.btn-bc.smal { height: 34px; line-height: 32px; font-size: 12px; }

.btn-list { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }

.btn-list .btn-bc.small { width: calc((100% - 10px) / 2); min-width: auto; }

/* Icon Button */
[class^="icon-btn-"] { position: relative; height: 34px; line-height: 1; padding: 8px 16px 8px 43px; border: 1px solid var(--ui-color-gray1); border-radius: 3px; background-color: #fff; -webkit-transition: all .2s; transition: all .2s; }

[class^="icon-btn-"]:hover { background-color: #333333; color: #fff; }

[class^="icon-btn-"]::before { content: ""; display: inline-block; position: absolute; top: 50%; left: 18px; width: 20px; height: 20px; background-repeat: no-repeat; background-size: 500px auto; background-image: url(../img/common/icon_set.png); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }

/*** File, 파일 첨부 ***/
.fuFileUploadArea { position: relative; height: 100%; }

.fuFileUploadArea .btn { padding: 0; }

.fuFileUploadArea label.fuButtonLabel { display: block !important; width: 100% !important; height: 100% !important; line-height: 21px; margin: 0; padding: 0 10px; font-size: 11px; color: #666; cursor: pointer; }

.fuFileUploadArea .totalInfo { position: absolute; top: 5px; right: 0; height: 35px; line-height: 35px; font-size: 11px; color: #999; }

.fuFileUploadArea div.title { height: 30px; line-height: 30px; font-size: 11px; color: #888; letter-spacing: -1px; }

.fuButtonArea { height: 35px; line-height: 35px; }

div.fuWrap { height: calc(100% - 40px); border: 1px solid #EAEAEA; background-color: #fff; }

div.fuWrap.view { border-radius: 3px; }

div.fuWrap.hover { border: 1px solid #498DB6 !important; background: #F8FCFF !important; }

.fuFilelist_title { height: 20px; border: 1px solid #EAEAEA; border-bottom: none; border-radius: 5px 5px 0 0; background: #FAFAFA; }

div.fuFilelist { position: relative; height: 86px; overflow-y: scroll; overflow-x: hidden; }

div.fuFilelist ul.fileul { display: none; overflow: hidden; position: relative; height: 28px; line-height: 28px; padding: 0 10px; border-bottom: 1px solid #F5F5F5; white-space: nowrap; cursor: pointer; text-overflow: ellipsis; }

div.fuFilelist ul.fileul.icon { float: left; margin: 5px 0 0 5px; padding: 5px; border: 1px solid #EAEAEA; border-radius: 5px; color: #888; }

div.fuFilelist ul.fileul.icon:after { content: ' '; display: block; clear: both; }

.fuFileUploadArea label.checkbox_label { display: inline-block; line-height: 20px; padding-top: 2px; font-size: 12px; letter-spacing: 0; cursor: pointer; }

.fuFileUploadArea label.checkbox_label input[type=checkbox] { visibility: hidden; position: absolute; }

.fuFileUploadArea label.checkbox_label input[type=checkbox] + span { display: inline-block; width: 13px; height: 20px !important; margin-top: 0; margin-right: 3px; background: url(/view/core/img/icon/ui-check-box-uncheck.png) left center no-repeat; vertical-align: middle; cursor: pointer; }

.fuFileUploadArea label.checkbox_label input[type=checkbox]:checked + span { background: url(/view/core/img/icon/ui-check-box-blue.png) left center no-repeat; color: #333; }

.previewTitle { height: 20px; line-height: 20px; font-size: 11px; color: #666; text-align: center; }

.fuPreviewWrap { display: inline-block; width: 100px; height: 100%; padding: 5px; border-right: 1px dotted #DADADA; vertical-align: top; }

.fuPreviewWrap .photoArea { width: 100%; height: 90px; border: 1px solid #EAEAEA; background-repeat: no-repeat; background-position: center; background-size: 100px; opacity: 1; }

.fuPreviewWrap .photoArea.loadingPhoto { background-size: 14px; background-image: url("data:image/gif;base64,R0lGODlhDgAOAPcFAP///+/v797e3r29vTHOAP///wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH/C05FVFNDQVBFMi4wAwEAAAAh+QQFBQAFACwAAAAADgAOAAAIRQALCBwIAMDAgwgLIhwYIIBAhQUGDDjY0KFCiRMpOhwocaHHgwJCCliIcYDIkQhLflzZkWNGlxM7YjzYsubLlDc/tjwYEAAh+QQFBQAFACwAAAAADAAIAAAILQALCBwYIMDAgwQNIhQgQGBBgQAACGTY8GFEiRMbDoyIsKPAASAHeCwQUqTHgAAh+QQFBQAFACwCAAAADAAIAAAILQALCCwgQMDAgwMLIiwwYIBAhQUCBBDY0KFCiRMpOhwocaHHjwIBiATwcSSAgAAh+QQFBQAFACwGAAAACAAMAAAILAAHDChAsKDAggYHFhAggOBBhg0RMkRIsWKAiwEQYsxYESEAABU/gqT4kWBAACH5BAUFAAUALAYAAgAIAAwAAAgvAAsILDBgwECBBQ0eLHiwoUMBEAUcjCjR4cEAAQYCAFAAY8YCGwViFBiyYcmDAQEAIfkEBQUABQAsAgAGAAwACAAACC8ACwgcKHCAwQEECR5EmLBhAQAACAoQMBBixAABCkyk+DBiAYwCJzYE6VAgSYIBAQAh+QQFBQAFACwAAAYADAAIAAAILQABCARQoKDBggMJHlzIsGGAAAcHDDD4EKIAAQUkTizwsODFghIZfmzoEaPBgAAh+QQJBQAFACwAAAIACAAMAAAILAALFAAAQKDBgQQPCkyoUGGAhwEOQozYsGIBAQIUYsw4YIBAjAI7NhSpsGNAADs=") !important; opacity: .5 !important; }

.fuPreviewWrap + .fuFilelistWrap { display: inline-block; width: calc(100% - 100px); vertical-align: middle; }

div.fuFilelist ul.fileul.reject * { color: #AAA; text-decoration: line-through !important; }

div.fuFilelist u.progressBar u { width: 36px; background: #A92121; }

div.fuFilelist ul.fileul.reject u.progressBar font { width: 36px; color: #FFF; text-align: center; text-decoration: none !important; }

div.fuFilelist ul.fileul u.filesize { float: right; margin-right: 10px; font-size: 11px; color: #AAA; text-align: right; text-decoration: none; }

div.fuFilelist.view ul.fileul u.filesize { float: right; margin-right: 5px; }

div.fuFilelist ul.fileul:hover { background: #FAFAFA; }

div.fuFilelist ul.fileul img.fileDelete { margin-top: -3px; margin-right: 5px; }

div.fuFilelist ul.fileul u.progressBar { display: inline-block; position: relative; width: 40px; height: 17px; margin-top: 5px; margin-right: 5px; padding: 1px; border: 1px solid #EAEAEA; border-radius: 5px; vertical-align: middle; }

div.fuFilelist ul.fileul strong.filename { display: inline-block; overflow: hidden; font-weight: normal; vertical-align: middle; white-space: nowrap; text-overflow: ellipsis; }

div.fuFilelist ul.fileul u.progressBar font { position: absolute; top: 0; z-index: 1; width: 40px; height: 15px; line-height: 15px; font-family: tahoma; font-size: 9px; text-align: center; }

div.fuFilelist ul.fileul u.progressBar font.done { color: #FFF; }

div.fuFilelist ul.fileul u.progressBar font.wait { margin-left: -2px; color: #FFF; }

div.fuFilelist ul.fileul u.progressBar u { display: inline-block; position: absolute; z-index: 0; height: 13px; border-radius: 4px; background: #CACACA; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.02))); background-image: linear-gradient(rgba(255, 255, 255, 0), rgba(0, 0, 0, 0.02)); text-decoration: none; }

div.fuFilelist ul.fileul u.progressBar u.done { width: 36px; background: #7bd339; }

div.fuFilelist ul.fileul u.progressBar u.wait { width: 36px; background: #999; }

div.fuFilelist .filement { background-color: #fff; font-size: 11px; color: #AAA; letter-spacing: -1px; text-align: center; }

div.fuFilelist .filement img { margin-top: -3px; vertical-align: middle; }

input.fuFile { overflow: hidden; position: absolute; z-index: -1; width: 0.1px; height: 0.1px; opacity: 0; }

.fileSizeArea { font-weight: bold; color: #fc6e51; }

.fuFilelist.scrollbar-inner > .scroll-element.scroll-y { width: 5px !important; height: calc(100% - 10px); margin-top: 5px; margin-bottom: 5px; }

.fuFilelist .scroll-element_outer { border-radius: 5px !important; }

.fuFilelist .scroll-element_track { background-color: transparent !important; }

.fuFilelist.scrollbar-inner > .scroll-element .scroll-element_track { background-color: #E0E0E0 !important; }

.fuFilelist.scrollbar-inner > .scroll-element .scroll-bar { background-color: #666 !important; }

.fuFilelist.scrollbar-inner > .scroll-element.scroll-x { display: none; }

/*** 툴팁 221014 ***/
.tooltip-con { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 150px; margin: 0 auto 20px; padding: 40px; border: 1px solid #ccc; background-color: #fff; text-align: center; }

.tooltip-con li { display: inline-block; }

.tooltip { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; position: relative; width: 14px; height: 14px; margin-left: 4px; border-radius: 50%; background: url(/resources/img/icon/icon_info.svg) no-repeat; background-size: 14px 14px; vertical-align: middle; }

.tooltip:hover .tooltiptext { visibility: visible; opacity: 1; }

.tooltip .tooltiptext { visibility: hidden; position: absolute; bottom: 19px; left: 50%; z-index: 100; line-height: 20px; padding: 6px 9px; border-radius: 4px; background-color: #454e56; font-size: 12px; color: #fff; text-align: center !important; -webkit-transition: opacity 0.3s; transition: opacity 0.3s; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: 0; min-width: 160px; }

.tooltip .tooltiptext.right { bottom: -10px; left: calc(100% + 5px); -webkit-transform: translate(0, 0); transform: translate(0, 0); }

.tooltip .tooltiptext.right:after { top: 50%; left: -5px; -webkit-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); }

.tooltip .tooltiptext.left { bottom: -10px; left: -5px; -webkit-transform: translate(-100%, 0); transform: translate(-100%, 0); }

.tooltip .tooltiptext.left:after { top: 50%; right: -10px; left: initial; -webkit-transform: translateY(-50%) rotate(-90deg); transform: translateY(-50%) rotate(-90deg); }

.tooltip .tooltiptext.bottom { bottom: -280%; }

.tooltip .tooltiptext.bottom:after { top: -10px; right: initial; left: 50%; margin-left: 0; -webkit-transform: translateX(-50%) rotate(-180deg); transform: translateX(-50%) rotate(-180deg); }

.tooltip .tooltiptext:after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -5px; border-width: 5px; border-style: solid; border-color: #454e56 transparent transparent transparent; }

/*** 브라우저 팝업 수정 (template4, popup/front/popup/userPopup) 220727 ***/
/* 사용자조회팝업 */
.popupContent { padding: 20px 0; }

.popupLayer01 > .titleArea { width: calc(100% - 40px); margin: 0 20px; }

.popupLayer01 .tui-grid-content-area.tui-grid-no-scroll-x { border-bottom: 1px solid #9a9a9a; }

/*** Tab1 샘플 수정 작업 220722 ***/
.divTab1 { display: inline-block; width: calc(100% - 40px); }

.divTab1 .tabNav { overflow: hidden; position: relative; border-bottom: none; }

.divTab1 .tabNav:after { content: ''; position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: 0; border-bottom: 1px solid #ccc; }

.divTab1 .tabNav button { float: left; height: 40px; line-height: 40px; padding: 0 20px; border: 0; border-bottom: 0; background-color: #ECECEE; font-size: 14px; color: #000; cursor: pointer; outline: none; }

.divTab1 .tabNav button:not(:first-child) { border-left: 1px solid #fff; }

.divTab1 .tabNav button:hover { border-bottom: 0; text-decoration: underline; }

.divTab1 .tabNav button.on { position: relative; z-index: 2; border: 0; border: 1px solid #ccc; border-bottom: 0; background-color: #F3F6FB; font-weight: 700; color: #000; }

.divTab1 .tabContent { display: none; padding: 20px; border: 1px solid #ccc; border-top: none; background-color: #F3F6FB; }

.divTab1 .tabContent + table { border: 0 none; }

.divTab1 .tabContent table { width: 100%; }

.divTab1 .tabContent .btnClose { float: right; font-size: 28px; cursor: pointer; }

.divTab1 .tabContent .btnClose:hover { color: red; }

.divTab1 .dtcBtnWrap { width: 100%; margin-top: 20px; }

.divTab1 .dtcBtnWrap table { width: 100%; }

.divTab1 .dtcBtnWrap table td { width: 100%; padding: 0; border: none; background: none; }

/*** Tab2 샘플 수정 작업 220727 ***/
.divTab { display: inline-block; width: calc(100% - 40px); margin: 20px; }

.divTab .dtc-table { float: left; width: 100%; margin: 0; }

.divTab .dtc-table .tabs { float: left; position: relative; width: 100%; padding: 0; border-bottom: 0; }

.divTab .dtc-table .tabs:after { content: ''; position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: 0; border-bottom: 1px solid #ccc; }

.divTab .dtc-table .tabs li { overflow: hidden; float: left; position: relative; margin: 0; padding: 0; border-left: none; }

.divTab .dtc-table .tabs li a { display: block; position: relative; height: 40px; line-height: 40px; padding: 0 20px; border-bottom: 0; border-left: 1px solid #fff; background-color: #f6f9fe; font-size: 14px; color: #000; text-decoration: none; -webkit-transition: all 0.3s ease-in; transition: all 0.3s ease-in; cursor: pointer; outline: none; }

.divTab .dtc-table .tabs li a:hover { text-decoration: underline; }

.divTab .dtc-table .tabs li.active a { z-index: 2; border: 1px solid #ccc; background-color: #fff; font-weight: 700; color: #000; border-width: 1px 1px 0; }

.divTab .dtc-table .tab_container { overflow: hidden; float: left; clear: both; width: 100%; border: 1px solid #ccc; border-top: 0; border-bottom: 0; background: #fff; }

.divTab .dtc-table .tab_container .tab_content { padding: 20px; }

.divTab .dtc-table .tab_container .tab_content table:after { content: ''; height: 0; }

.divTab .dtcBtnWrap { width: 100%; margin-top: 20px; }

.divTab .dtcBtnWrap table { width: 100%; }

.divTab .dtcBtnWrap table td { width: 100%; padding: 0; border: none; background: none; }

.divTab > .dtc-table:after { width: 0; }

.divTab > .dtc-table:before { width: 0; }

/*** 가이드 탭 메뉴 220916 ***/
.navTab .tabNav { margin-bottom: 20px; }

.navTab .tabNav:after { border-bottom: 0; }

.navTab .tabContent { padding: 0; border: 0; }

.navTab .tabContent h2 { margin: 40px 0 10px 0; font-size: 22px; color: #000; letter-spacing: -0.3px; }

.navTab .tabContent h2:first-child { margin-top: 0; }

/*** Tab3 jquery ui-tab 수정 작업 220901 ***/
#tabs { padding: 0; }

#tabs .ui-tabs-nav { display: -webkit-box; display: -ms-flexbox; display: flex; }

#tabs .tab-list { position: relative; padding: 0; border: 0; border-radius: 0; }

#tabs .tab-list:after { content: ''; position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; height: 0; border-bottom: 1px solid #ccc; }

#tabs .tab-list li { margin: 0; }

#tabs .tab-list li a { height: 40px; line-height: 40px; padding: 0 20px; border-left: 1px solid #fff; background-color: #f6f9fe; font-family: 'NotoSansKR', 'Dotum', '돋움', 'Helvetica', 'Apple SD Gothic Neo', sans-serif; font-size: 14px; color: #000; }

#tabs .tab-list li a:hover { text-decoration: underline; }

#tabs .tab-list li.ui-tabs-active { z-index: 2; padding-bottom: 0; }

#tabs .tab-list li.ui-tabs-active a { border: 1px solid #ccc; background-color: #fff; font-weight: 700; border-width: 1px 1px 0; }

#tabs .ui-tabs-panel { padding: 20px; border: 1px solid #ccc; border-top: 0 solid #ccc !important; border-bottom: 1px solid #ccc !important; border-radius: 0; }

#tabs table tr th, #tabs table tr td { border: 1px solid #e4e3e3 !important; }

#tabs > .dtc-table table:after { content: ''; height: 0; }

/*** 선도형 디지털클리스터 공동협업시스템 ITSM 팝업 220808 ***/
.divProcessFlow .topProcessArea { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; margin: 20px 0; padding: 10px 0; }

.divProcessFlow .topProcessArea ul { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100px; text-align: center; }

.divProcessFlow .topProcessArea ul li { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; height: 100%; border: 0; border-radius: 0; background: none; text-align: center; -webkit-box-shadow: none; box-shadow: none; }

.divProcessFlow .topProcessArea ul li:nth-child(1) { visibility: hidden; }

.divProcessFlow .topProcessArea ul li:nth-child(2):before { display: none; }

.divProcessFlow .topProcessArea ul li > div { display: inline-block; width: 90px; height: 90px; border: 1px solid #ccc; border-radius: 50%; background-color: #eaeaea; text-align: center; }

.divProcessFlow .topProcessArea ul li > div.on { background-color: #c8dce4; -webkit-box-shadow: 0px 0 2px 6px #ebf0a1; box-shadow: 0px 0 2px 6px #ebf0a1; }

.divProcessFlow .topProcessArea ul li span { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; height: 100%; padding: 10px; font-size: 13px; text-align: center; }

.divProcessFlow .topProcessArea ul li:nth-child(odd) { border-color: #6EC0F2; }

.divProcessFlow .topProcessArea ul li:nth-child(even) { border-color: #5D8AC5; }

.divProcessFlow .topProcessArea ul li + li { position: relative; margin-left: 0; }

.divProcessFlow .topProcessArea ul li + li:before { content: ''; position: absolute; top: 50%; left: -9px; width: 18px; height: 18px; background: url(/resources/img/icon/arrow-right-flow.svg) no-repeat center; font-size: 20px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); opacity: .6; -webkit-filter: opacity(0.6); filter: opacity(0.6); }

.divProcessFlow .dtc-table { margin: 0; border-width: 1px 0 0 0; border-style: solid; border-color: #7a95b8; }

.divProcessFlow .dtc-table.table01 { margin-top: 0; border-width: 0; }

.divProcessFlow .dtc-table > div { margin-bottom: 0 !important; }

.divProcessFlow .dtc-table table { display: table; width: 100%; }

.divProcessFlow .dtc-table table tr th, .divProcessFlow .dtc-table table tr td { padding: 10px 5px; }

.divProcessFlow .dtc-table table tr th { font-size: 14px; color: #000; text-align: center; }

.divProcessFlow .dtc-table table tr td { position: relative; font-size: 14px; color: #000; text-align: center; }

.divProcessFlow .dtc-table table tr td.emp { color: #088dc3; }

.divProcessFlow .dtc-table table { table-layout: fixed; }

/*** 가이드에 따른 디자인 수정 220811 ***/
button.btn.middle, button.btn.xsmall { overflow: hidden; position: relative; height: 34px; line-height: initial; margin-right: 2px; margin-bottom: 4px; padding: 8px 16px 8px 43px; border: 1px solid var(--ui-color-gray1); border-radius: 3px; background-color: #fff; font-family: 'Arial'; font-weight: normal; font-size: 13px; white-space: nowrap; -webkit-transition: all .2s ease; transition: all .2s ease; cursor: pointer; }

button.btn.middle.on, button.btn.xsmall.on { background-color: #333; color: #fff; border-color: var(--ui-color-darkgray1); }

button.btn.middle:hover, button.btn.xsmall:hover { background-color: #333; color: #fff; border-color: var(--ui-color-darkgray1); }

button.btn.middle:hover.disabled, button.btn.xsmall:hover.disabled { opacity: .4; }

button.btn.middle:disabled:hover, button.btn.xsmall:disabled:hover { border-color: rgba(49, 59, 68, 0.4); }

button.btn.middle:before, button.btn.xsmall:before { content: ""; display: inline-block; position: absolute; top: 50%; left: 18px; width: 20px; height: 20px; background-repeat: no-repeat; background-size: 500px auto; background-image: url(/resources/img/common/icon_set.png); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }

button.btn.middle.disabled, button.btn.xsmall.disabled { opacity: .4; }

button.btn.middle.disabled:hover, button.btn.xsmall.disabled:hover { background-color: transparent; color: var(--ui-color-darkgray1); }

button.btn.middle.disabled:hover:before, button.btn.xsmall.disabled:hover:before { content: ''; background-color: #fff; }

input[type="button"].btn.middle { position: relative; height: 34px; line-height: initial; padding: 8px 16px 8px 43px; border: 1px solid var(--ui-color-gray1); border-radius: 3px; background-color: #fff; font-family: 'Arial'; font-weight: normal; font-size: 13px; -webkit-transition: all .2s; transition: all .2s; cursor: pointer; }

input[type="button"].btn.middle:hover.disabled { opacity: .4; }

input[type="button"].btn.middle:before { content: ""; display: inline-block; position: absolute; top: 50%; left: 18px; width: 20px; height: 20px; background-repeat: no-repeat; background-size: 500px auto; background-image: url(/resources/img/common/icon_set.png); -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }

input[type="button"].btn.middle.disabled { opacity: .4; }

input[type="button"].btn.middle.disabled:hover { background-color: transparent; color: var(--ui-color-darkgray1); }

input[type="button"].btn.middle.disabled:hover:before { content: ''; background-color: #fff; }

/*** Icon Button : Image Set ***/
.icon-btn-001:before { background-position: -296px -0px; }

.icon-btn-001:hover:before, .icon-btn-001.on:before { background-position: -316px -0px; }

.icon-btn-001[disabled="disabled"]:hover:before { background-position: -296px -0px; }

.icon-btn-002:before { background-position: -296px -20px; }

.icon-btn-002:hover:before, .icon-btn-002.on:before { background-position: -316px -20px; }

.icon-btn-002[disabled="disabled"]:hover:before { background-position: -296px -20px; }

.icon-btn-003:before { background-position: -296px -40px; }

.icon-btn-003:hover:before, .icon-btn-003.on:before { background-position: -316px -40px; }

.icon-btn-003[disabled="disabled"]:hover:before { background-position: -296px -40px; }

.icon-btn-004:before { background-position: -296px -60px; }

.icon-btn-004:hover:before, .icon-btn-004.on:before { background-position: -316px -60px; }

.icon-btn-004[disabled="disabled"]:hover:before { background-position: -296px -60px; }

.icon-btn-005:before { background-position: -296px -80px; }

.icon-btn-005:hover:before, .icon-btn-005.on:before { background-position: -316px -80px; }

.icon-btn-005[disabled="disabled"]:hover:before { background-position: -296px -80px; }

.icon-btn-006:before { background-position: -296px -100px; }

.icon-btn-006:hover:before, .icon-btn-006.on:before { background-position: -316px -100px; }

.icon-btn-006[disabled="disabled"]:hover:before { background-position: -296px -100px; }

.icon-btn-007:before { background-position: -296px -120px; }

.icon-btn-007:hover:before, .icon-btn-007.on:before { background-position: -316px -120px; }

.icon-btn-007[disabled="disabled"]:hover:before { background-position: -296px -120px; }

.icon-btn-008:before { background-position: -296px -140px; }

.icon-btn-008:hover:before, .icon-btn-008.on:before { background-position: -316px -140px; }

.icon-btn-008[disabled="disabled"]:hover:before { background-position: -296px -140px; }

.icon-btn-009:before { background-position: -296px -160px; }

.icon-btn-009:hover:before, .icon-btn-009.on:before { background-position: -316px -160px; }

.icon-btn-009[disabled="disabled"]:hover:before { background-position: -296px -160px; }

.icon-btn-010:before { background-position: -296px -180px; }

.icon-btn-010:hover:before, .icon-btn-010.on:before { background-position: -316px -180px; }

.icon-btn-010[disabled="disabled"]:hover:before { background-position: -296px -180px; }

.icon-btn-011:before { background-position: -296px -200px; }

.icon-btn-011:hover:before, .icon-btn-011.on:before { background-position: -316px -200px; }

.icon-btn-011[disabled="disabled"]:hover:before { background-position: -296px -200px; }

.icon-btn-012:before { background-position: -296px -220px; }

.icon-btn-012:hover:before, .icon-btn-012.on:before { background-position: -316px -220px; }

.icon-btn-012[disabled="disabled"]:hover:before { background-position: -296px -220px; }

.icon-btn-013:before { background-position: -296px -240px; }

.icon-btn-013:hover:before, .icon-btn-013.on:before { background-position: -316px -240px; }

.icon-btn-013[disabled="disabled"]:hover:before { background-position: -296px -240px; }

.icon-btn-014:before { background-position: -296px -260px; }

.icon-btn-014:hover:before, .icon-btn-014.on:before { background-position: -316px -260px; }

.icon-btn-014[disabled="disabled"]:hover:before { background-position: -296px -260px; }

.icon-btn-015:before { background-position: -296px -280px; }

.icon-btn-015:hover:before, .icon-btn-015.on:before { background-position: -316px -280px; }

.icon-btn-015[disabled="disabled"]:hover:before { background-position: -296px -280px; }

.icon-btn-016:before { background-position: -296px -300px; }

.icon-btn-016:hover:before, .icon-btn-016.on:before { background-position: -316px -300px; }

.icon-btn-016[disabled="disabled"]:hover:before { background-position: -296px -300px; }

.icon-btn-017:before, .icon-btn-017.on:before { background-position: -296px -320px; }

.icon-btn-017:hover:before { background-position: -316px -320px; }

.icon-btn-017[disabled="disabled"]:hover:before { background-position: -296px -320px; }

.icon-btn-018:before { background-position: -296px -340px; }

.icon-btn-018:hover:before, .icon-btn-018.on:before { background-position: -316px -340px; }

.icon-btn-018[disabled="disabled"]:hover:before { background-position: -296px -340px; }

.icon-btn-019:before { background-position: -296px -360px; }

.icon-btn-019:hover:before, .icon-btn-019.on:before { background-position: -316px -360px; }

.icon-btn-019[disabled="disabled"]:hover:before { background-position: -296px -360px; }

.icon-btn-020:before { background-position: -296px -380px; }

.icon-btn-020:hover:before, .icon-btn-020.on:before{ background-position: -316px -380px; }

.icon-btn-020[disabled="disabled"]:hover:before { background-position: -296px -380px; }

.icon-btn-021:before { background-position: -296px -400px; }

.icon-btn-021:hover:before, .icon-btn-021.on:before { background-position: -316px -400px; }

.icon-btn-021[disabled="disabled"]:hover:before { background-position: -296px -400px; }

.icon-btn-022:before { background-position: -296px -420px; }

.icon-btn-022:hover:before, .icon-btn-022.on:before { background-position: -316px -420px; }

.icon-btn-022[disabled="disabled"]:hover:before { background-position: -296px -420px; }

.icon-btn-023:before { background-position: -296px -440px; }

.icon-btn-023:hover:before, .icon-btn-023.on:before { background-position: -316px -440px; }

.icon-btn-023[disabled="disabled"]:hover:before { background-position: -296px -440px; }

.icon-btn-024:before { background-position: -296px -460px; }

.icon-btn-024:hover:before, .icon-btn-024.on:before { background-position: -316px -460px; }

.icon-btn-024[disabled="disabled"]:hover:before { background-position: -296px -460px; }

.icon-btn-025:before { background-position: -296px -480px; }

.icon-btn-025:hover:before, .icon-btn-025.on:before { background-position: -316px -480px; }

.icon-btn-025[disabled="disabled"]:hover:before { background-position: -296px -480px; }

.icon-btn-040:before { background-position: -296px -500px; }

.icon-btn-040:hover:before, .icon-btn-040.on:before { background-position: -316px -500px; }

.icon-btn-040[disabled="disabled"]:hover:before { background-position: -296px -500px; }

.icon-btn-041:before { background-position: -296px -520px; }

.icon-btn-041:hover:before, .icon-btn-041.on:before { background-position: -316px -520px; }

.icon-btn-041[disabled="disabled"]:hover:before { background-position: -296px -520px; }

.icon-btn-042:before { background-position: -296px -540px; }

.icon-btn-042:hover:before, .icon-btn-042.on:before { background-position: -316px -540px; }

.icon-btn-042[disabled="disabled"]:hover:before { background-position: -296px -540px; }

.icon-btn-043:before { background-position: -296px -560px; }

.icon-btn-043:hover:before, .icon-btn-043.on:before { background-position: -316px -560px; }

.icon-btn-043[disabled="disabled"]:hover:before { background-position: -296px -560px; }

.icon-btn-044:before { background-position: -296px -580px; }

.icon-btn-044:hover:before, .icon-btn-044.on:before { background-position: -316px -580px; }

.icon-btn-044[disabled="disabled"]:hover:before { background-position: -296px -580px; }

.icon-btn-045:before { background-position: -296px -600px; }

.icon-btn-045:hover:before, .icon-btn-045.on:before { background-position: -316px -600px; }

.icon-btn-045[disabled="disabled"]:hover:before { background-position: -296px -600px; }

.icon-btn-026:before { background-position: -336px -0px; }

.icon-btn-026:hover:before, .icon-btn-026.on:before { background-position: -356px -0px; }

.icon-btn-026[disabled="disabled"]:hover:before { background-position: -336px -0px; }

.icon-btn-027:before { background-position: -336px -20px; }

.icon-btn-027:hover:before, .icon-btn-027.on:before { background-position: -356px -20px; }

.icon-btn-027[disabled="disabled"]:hover:before { background-position: -336px -20px; }

.icon-btn-028:before { background-position: -336px -40px; }

.icon-btn-028:hover:before, .icon-btn-028.on:before { background-position: -356px -40px; }

.icon-btn-028[disabled="disabled"]:hover:before { background-position: -336px -40px; }

.icon-btn-029:before { background-position: -336px -60px; }

.icon-btn-029:hover:before, .icon-btn-029.on:before { background-position: -356px -60px; }

.icon-btn-029[disabled="disabled"]:hover:before { background-position: -336px -60px; }

.icon-btn-030:before { background-position: -336px -80px; }

.icon-btn-030:hover:before, .icon-btn-030.on:before { background-position: -356px -80px; }

.icon-btn-030[disabled="disabled"]:hover:before { background-position: -336px -80px; }

.icon-btn-031:before { background-position: -336px -100px; }

.icon-btn-031:hover:before, .icon-btn-031.on:before { background-position: -356px -100px; }

.icon-btn-031[disabled="disabled"]:hover:before { background-position: -336px -100px; }

.icon-btn-032:before { background-position: -336px -120px; }

.icon-btn-032:hover:before, .icon-btn-032.on:before { background-position: -356px -120px; }

.icon-btn-032[disabled="disabled"]:hover:before { background-position: -336px -120px; }

.icon-btn-033:before { background-position: -336px -140px; }

.icon-btn-033:hover:before, .icon-btn-033.on:before { background-position: -356px -140px; }

.icon-btn-033[disabled="disabled"]:hover:before { background-position: -336px -140px; }

.icon-btn-034:before { background-position: -336px -160px; }

.icon-btn-034:hover:before, .icon-btn-034.on:before { background-position: -356px -160px; }

.icon-btn-034[disabled="disabled"]:hover:before { background-position: -336px -160px; }

.icon-btn-035:before { background-position: -336px -180px; }

.icon-btn-035:hover:before, .icon-btn-035.on:before { background-position: -356px -180px; }

.icon-btn-035[disabled="disabled"]:hover:before { background-position: -336px -180px; }

.icon-btn-036:before { background-position: -336px -200px; }

.icon-btn-036:hover:before, .icon-btn-036.on:before { background-position: -356px -200px; }

.icon-btn-036[disabled="disabled"]:hover:before { background-position: -336px -200px; }

.icon-btn-037:before { background-position: -336px -220px; }

.icon-btn-037:hover:before, .icon-btn-037.on:before { background-position: -356px -220px; }

.icon-btn-037[disabled="disabled"]:hover:before { background-position: -336px -220px; }

.icon-btn-038:before { background-position: -336px -240px; }

.icon-btn-038:hover:before, .icon-btn-038.on:before { background-position: -356px -240px; }

.icon-btn-038[disabled="disabled"]:hover:before { background-position: -336px -240px; }

.icon-btn-039:before { background-position: -336px -260px; }

.icon-btn-039:hover:before, .icon-btn-039.on:before { background-position: -356px -260px; }

.icon-btn-039[disabled="disabled"]:hover:before { background-position: -336px -260px; }

.icon-btn-046:before { background-position: -336px -280px; }

.icon-btn-046:hover:before, .icon-btn-046.on:before { background-position: -356px -280px; }

.icon-btn-046[disabled="disabled"]:hover:before { background-position: -336px -280px; }

.icon-btn-047:before { background-position: -336px -300px; }

.icon-btn-047:hover:before, .icon-btn-047.on:before { background-position: -356px -300px; }

.icon-btn-047[disabled="disabled"]:hover:before { background-position: -336px -300px; }

.icon-btn-048:before { background-position: -336px -320px; }

.icon-btn-048:hover:before, .icon-btn-048.on:before { background-position: -356px -320px; }

.icon-btn-048[disabled="disabled"]:hover:before { background-position: -336px -320px; }

.icon-btn-049:before { background-position: -336px -340px; }

.icon-btn-049:hover:before, .icon-btn-049.on:before { background-position: -356px -340px; }

.icon-btn-049[disabled="disabled"]:hover:before { background-position: -336px -340px; }

.icon-btn-050:before { background-position: -336px -360px; }

.icon-btn-050:hover:before, .icon-btn-050.on:before { background-position: -356px -360px; }

.icon-btn-050[disabled="disabled"]:hover:before { background-position: -336px -360px; }

.icon-btn-051:before { background-position: -336px -380px; }

.icon-btn-051:hover:before, .icon-btn-051.on:before { background-position: -356px -380px; }

.icon-btn-051[disabled="disabled"]:hover:before { background-position: -336px -380px; }

.icon-btn-052:before { background-position: -336px -400px; }

.icon-btn-052:hover:before, .icon-btn-052.on:before { background-position: -356px -400px; }

.icon-btn-052[disabled="disabled"]:hover:before { background-position: -336px -400px; }

.icon-btn-053:before { background-position: -336px -420px; }

.icon-btn-053:hover:before, .icon-btn-053.on:before { background-position: -356px -420px; }

.icon-btn-053[disabled="disabled"]:hover:before { background-position: -336px -420px; }

.icon-btn-054:before { background-position: -336px -440px; }

.icon-btn-054:hover:before, .icon-btn-054.on:before { background-position: -356px -440px; }

.icon-btn-054[disabled="disabled"]:hover:before { background-position: -336px -440px; }

.icon-btn-055:before { background-position: -336px -460px; }

.icon-btn-055:hover:before, .icon-btn-055.on:before { background-position: -356px -460px; }

.icon-btn-055[disabled="disabled"]:hover:before { background-position: -336px -460px; }

.icon-btn-056:before { background-position: -336px -480px; }

.icon-btn-056:hover:before, .icon-btn-056.on:before { background-position: -356px -480px; }

.icon-btn-056[disabled="disabled"]:hover:before { background-position: -336px -480px; }

.icon-btn-057:before { background-position: -336px -500px; }

.icon-btn-057:hover:before, .icon-btn-057.on:before { background-position: -356px -500px; }

.icon-btn-057[disabled="disabled"]:hover:before { background-position: -336px -500px; }

.icon-btn-058:before { background-position: -336px -520px; }

.icon-btn-058:hover:before, .icon-btn-058.on:before { background-position: -356px -520px; }

.icon-btn-058[disabled="disabled"]:hover:before { background-position: -336px -520px; }

/* 예외 Icon Button - Calendar */
.icon-btn-012, .icon-btn-013 { padding: 15px 20px !important; background-color: transparent; font-size: 0; color: transparent; }

.icon-btn-022, .icon-btn-023 { padding: 15px 20px !important; border: none !important; background-color: transparent !important; font-size: 0; color: transparent; }

.icon-btn-022:hover, .icon-btn-023:hover { background-color: transparent; }

.icon-btn-012::before, .icon-btn-013::before, .icon-btn-022::before, .icon-btn-023::before { left: 50% !important; -webkit-transform: translate(-50%, -50%) !important; transform: translate(-50%, -50%) !important; }

.icon-btn-022:hover:before { background-position: -296px -420px; }

.icon-btn-023:hover:before { background-position: -296px -440px; }

.icon-btn-053 { padding: 15px 20px !important; background-color: var(--ui-color-darkgray1) !important; font-size: 0; color: transparent; border-color: var(--ui-color-darkgray1) !important; }

.icon-btn-053::before, .icon-btn-054::before { left: 10px !important; }

.icon-btn-054 { padding: 15px 20px !important; background-color: #fff !important; font-size: 0; color: transparent; }

.icon-btn-054:hover { background-color: #fff !important; border-color: var(--ui-color-gray1) !important; }

.icon-btn-053:before { background-position: -356px -420px !important; }

.icon-btn-054:hover:before { background-position: -336px -440px !important; }

/*** More Button ***/
.more-btn { display: inline-block; position: relative; }

.more-btn button { display: -webkit-inline-box; display: -ms-inline-flexbox; display: inline-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; overflow: hidden; width: 30px; height: 32px; border: 0; background-color: transparent; }

.more-btn button span, .more-btn button span:before, .more-btn button span:after { width: 3px; height: 3px; border-radius: 50%; background-color: var(--ui-color-darkgray1); }

.more-btn button span { display: block; position: relative; top: 1px; width: 3px; height: 3px; text-indent: -999px; background-color: var(--ui-color-darkgray1); border-radius: 50%; }

.more-btn button span:before { content: ''; position: absolute; top: 0; left: -6px; }

.more-btn button span:after { content: ''; position: absolute; top: 0; right: -6px; }

.more-btn .view { display: none; position: absolute; top: -50%; left: -40px; z-index: 99; padding: 10px 0; border: 1px solid #b7b6b6; border-radius: 5px; background-color: #fff; text-align: left; -webkit-box-shadow: 0 2px 1.4px 0.6px rgba(6, 0, 1, 0.1); box-shadow: 0 2px 1.4px 0.6px rgba(6, 0, 1, 0.1); -webkit-transform: translateX(-50%); transform: translateX(-50%); min-width: 80px; }

.more-btn .view ul li a { display: block; line-height: 1.2; padding: 2px 15px; color: #000; text-decoration: none; }

.more-btn .view ul li a:hover { background-color: #ececec; }

/*** 스위치 토글 버튼 220919 ***/
.switchToggle { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -ms-flex-align: center; align-items: center; }

.rememberMent { margin-right: 0; margin-left: 10px; font-size: 14px; letter-spacing: -1px; vertical-align: middle; cursor: pointer; }

.switch { display: block; display: inline-block; position: relative; width: 60px; height: 24px; margin-right: 0; border-radius: 18px; background-color: #fff; -webkit-box-shadow: inset 0 -1px #fff, inset 0 1px 1px rgba(0, 0, 0, 0.05); box-shadow: inset 0 -1px #fff, inset 0 1px 1px rgba(0, 0, 0, 0.05); cursor: pointer; }

.switch .switch-input { position: absolute; top: 0; left: 0; opacity: 0; }

.switch .switch-label { display: block; position: relative; height: inherit; border-radius: inherit; background: #000; font-size: 10px; -webkit-transition: 0.15s ease-out; transition: 0.15s ease-out; text-transform: uppercase; -webkit-transition-property: opacity background-color; transition-property: opacity background-color; }

.switch .switch-label:before, .switch .switch-label:after { position: absolute; top: 50%; line-height: 1; -webkit-transition: inherit; transition: inherit; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); }

.switch .switch-label:before { content: attr(data-off); right: 11px; color: #fff; }

.switch .switch-label:after { content: attr(data-on); left: 11px; color: #fff; opacity: 0; }

.switch .switch-input:checked ~ .switch-label { background: #3bafda; }

.switch .switch-input:checked ~ .switch-label:before { opacity: 0; }

.switch .switch-input:checked ~ .switch-label:after { opacity: 1; }

.switch .switch-handle { position: absolute; top: 4px; left: 4px; width: 16px; height: 16px; border-radius: 10px; background: white; -webkit-transition: left 0.15s ease-out; transition: left 0.15s ease-out; }

.switch .switch-handle:before { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 6px; background: #f9f9f9; }

.switch .switch-input:checked ~ .switch-handle { left: 38px; }

/*** PC Screen 1024 ***/
@media screen and (max-width: 800px) { .divTopArea .btn_group button + button { margin-left: 0 !important; margin-right: 4px !important; } }