/** * Layout */ .page-wrapper { margin-left:200px; } .page-wrapper .page-content { min-height:calc(100vh - 50px - 2px); padding:0; background:rgba(232,235,242, 1.0); } .navbar-custom .topbar-nav { height:50px; } .navbar-custom .nav-link { max-height:50px; line-height:50px; } .frame { max-width:100%; width:100%; background-color:rgba(255,255,255, 1.0); display:flex; position:relative; } .frame.disabled { cursor:not-allowed !important; } #frame_wrapper .frame { max-width:40px; } .active_1 #frame_1, .active_2 #frame_2, .active_3 #frame_3 { flex-direction:column; } .active_1 #frame_3 { margin-left:1px; } .active_1 #frame_1 { max-width:100%; } .active_1.frames_2 #frame_1 { max-width:calc(100% - 40px); } .active_1.frames_3 #frame_1 { max-width:calc(100% - 80px); } .active_2.frames_2 #frame_2 { max-width:calc(100% - 300px); } .active_2.frames_3 #frame_2 { max-width:calc(100% - 300px - 40px); } .active_3 #frame_3 { max-width:calc(100% - 600px); } .active_1 #frame_2, .active_1 #frame_3, .active_2 #frame_3 { cursor:pointer; } .active_1 #frame_2:hover, .active_1 #frame_3:hover, .active_2 #frame_3:hover { border:1px solid rgba( 50,100,170, 0.5); } .active_1 #frame_2:hover .frame_arrow, .active_1 #frame_3:hover .frame_arrow, .active_2 #frame_3:hover .frame_arrow { color:rgba( 50,100,170, 1.0); } iFrame { width:100%; height:100%; display:none; } .active_1 #frame_1 iFrame, .active_2 #frame_1 iFrame, .active_2 #frame_2 iFrame, .active_3 #frame_2 iFrame, .active_3 #frame_3 iFrame { display:initial; } .active_2 #frame_1, .active_3 #frame_1, .active_3 #frame_2 { max-width:300px; } .frame_arrow { margin-left:calc(50% - 6px); font-size:20px; display:flex; align-items:center; } .active_1 #frame_1 .frame_arrow, .active_2 #frame_1 .frame_arrow, .active_2 #frame_2 .frame_arrow, .active_3 #frame_2 .frame_arrow, .active_3 #frame_3 .frame_arrow { display:none; } .folder { width:30px; height:110px; padding-bottom:5px; position:absolute; left:-30px; display:flex; background:rgba( 30, 45, 70, 1.0); color:rgba(255,255,255, 1.0); cursor:pointer; border-top-left-radius:3px; border-bottom-left-radius:20px; transition:height 0.2s; z-index:10; } .folder:hover { color:rgba( 50,180,255, 1.0); } .active_1 .folder, .active_2 #frame_3 .folder { display:none; } .folder_arrow { margin-left:calc(50% - 6px); font-size:20px; display:flex; align-items:center;} .active_1 #frame_1, .active_2 #frame_2, .active_3 #frame_3 { border-left: 1px solid rgba( 30, 45, 70, 1.0); } .active_2 #frame_1, .active_3 #frame_1, .active_3 #frame_2 { border-left: 1px solid rgba( 30, 45, 70, 0.3); } .active_2 #frame_1 .folder, .active_3 #frame_1 .folder, .active_3 #frame_2 .folder { height:90px; } .active_3 #frame_2 .folder:hover { height:110px; } .half_size #frame_1 .buttons_r, .active_2 #frame_1 .buttons_r, .active_3 #frame_1 .buttons_r, .half_size .dataTables_filter, .half_size .buttons_r { display:none; } .half_size .modal .dataTables_filter { display:flex; } #frame_1, #frame_2, #frame_3 { flex:1; transition:max-width 0.3s, border 0.3s } .frame> .card { width:100%; height:100vh; margin:0; overflow:hidden; /* overflow-x:hidden; */ } body.popup .frame> .card { height:100%; } #frame_wrapper .frame> .card { height:calc(100vh - 50px - 40px); } /* .collection.popup { display:flex !important; } .collection.popup .frame { flex-direction:column; } */ .collection.popup .card { border-bottom:none; } .frame, .frame> .card:not(.widget)> .card-header { padding:0 !important; } .frame> .card> .card-header .nav-link { padding:15px 20px; } .card-header .nav-link { font-size:14px; line-height:24px; color:rgba( 50, 60,100, 1.0); } .card-header .nav-link.active { font-size:16px; color:rgba( 50, 60,100, 1.0); } .nav.nav-tabs .nav-link, .nav.nav-tabs .nav-link:not(.active):focus, .nav.nav-tabs .nav-item.show, .nav.nav-tabs .nav-item.show:not(.active):focus { background-color:rgba(255,255,255, 0.5); } .card-header .nav-link.active { font-weight:500; color:rgba( 50,100,170, 1.0); } .nav.nav-tabs .nav-link.active, .nav.nav-tabs .nav-link.active:hover, .nav.nav-tabs .nav-item.show.active, .nav.nav-tabs .nav-item.show.active:hover { padding:14px 25px 13px; border-color:rgba(215,220,225, 1.0) rgba(215,220,225, 1.0) transparent; border-top:4px solid rgba( 25,100,255, 1.0); color:rgba( 50,100,170, 1.0); border-top-left-radius:0; border-top-right-radius:10px; } .nav.nav-tabs .nav-link:not(.active), .nav.nav-tabs .nav-link:not(.active):focus, .nav.nav-tabs .nav-link:not(.active):hover, .nav.nav-tabs .nav-item.show:not(.active), .nav.nav-tabs .nav-item.show:not(.active):focus, .nav.nav-tabs .nav-item.show:not(.active):hover { border-color:rgba(215,220,225, 1.0); } .nav.nav-tabs .nav-item { order:2; transition:order 1s; } .nav.nav-tabs { border:none; flex-wrap:nowrap; background:rgba(215,220,225, 1.0); } .nav.nav-tabs .nav-link { white-space:nowrap; border-left:0; } .nav-link.noPadding { padding:0 !important; } .nav-link i { margin-right:5px; } .h165 { height:165px; } .break_before { break-before:always; } .break_after { break-after:always; } /** * Sub Tabs */ .nav.sub_tabs { margin-bottom:-9px; font-size:14px; background:transparent; } .nav.sub_tabs .nav-link { color:rgba( 50,100,170, 1.0); } .nav.sub_tabs .nav-link.active, .nav.sub_tabs .nav-link.active:hover, .nav.sub_tabs .nav-item.show.active, .nav.sub_tabs .nav-item.show.active:hover { padding:5px 20px 10px; font-weight:500; border:0; border-bottom:4px solid rgba( 25,100,255, 1.0); color:rgba( 25,100,255, 1.0); border-radius:0 !important; } .nav.sub_tabs .nav-link:not(.active), .nav.sub_tabs .nav-link:not(.active):focus, .nav.sub_tabs .nav-link:not(.active):hover, .nav.sub_tabs .nav-item.show:not(.active), .nav.sub_tabs .nav-item.show:not(.active):focus, .nav.sub_tabs .nav-item.show:not(.active):hover { border:0; } .sub_tabs_content .tab-pane { display:none; } .sub_tabs_content .active { display:block; } .left-sidenav-menu li>a i { font-size:14px; } .nav-link.dropdown-toggle { display:flex; align-items:center; line-height:1em; } .info_wrapper { align-items:stretch; } .profile_box { border:1px solid rgba(200,210,220, 1.0); border-radius:5px; box-shadow:0 0 0 3px rgba(210,220,230, 0.3); background-color:rgba(255,255,255, 1.0); } .profile_box table th { color:rgba( 50, 60,100, 0.6); } .profile { padding:40px 0 20px; text-align:center; } /* 나의 정보 */ .profile> i { font-size:80px; color:rgba( 50, 60,100, 0.6); transition:color 0.3s; } .profile_box:hover i { color:rgba( 50, 60,100, 1.0); } .profile_box:hover button.btn-outline-danger>i { color:rgba(245, 50, 90, 1.0); } .profile_box:hover button.btn-outline-danger:hover>i { color:rgba(255,255,255, 1.0); } .profile_icon { font-size:30px; } /* 상단 Icon */ .profile_icon img { width:100px; border-radius:50px; } .profile_thum, .profile_thum img { width:24px; height:24px; } #myinfo { display:flex; align-items:center; text-align:right; } #myinfo .u_id { font-size:13px; } #myinfo .u_auth { font-size:11px; } #myinfo .myinfo_name { padding-right:10px; } /** * Half System */ .half_size .w50_on_half { min-width:50px !important; width:50px !important; } .half_size .w80_on_half { min-width:80px !important; width:80px !important; } .half_size .w180_on_half { min-width:180px !important; width:180px !important; } .half_size .w200_on_half { min-width:200px !important; width:200px !important; } .half_size .w230_on_half { min-width:230px !important; width:230px !important; } .half_size .w280_on_half { min-width:280px !important; width:280px !important; } .half_size .w300_on_half { min-width:300px !important; width:300px !important; } .half_size .w100p_on_half { min-width:100% !important; width:100% !important; } .half_size .block_on_half { display:block; } .half_size .infoTable col:first-child, .half_size .infoTable th, .half_size .buttons-excel, .half_size .noHalf { display:none; } .half_size .row.column-on-half { flex-direction:column; } .half_size .btn_reload { opacity:0.5; } .half_size .flexWrap_on_half { flex-wrap:wrap; } .half_size .flexWrap_on_half .section { margin-left:0; } .half_size .flexWrap_on_half .section+.section{ margin-top:10px; } .order_first { order:1 !important; } .half_size .nav-tabs:not(.order_first), .half_size .buttons_l, .half_size .buttons_r { cursor:not-allowed; } .active_2 #frame_1 .nav-tabs a.nav-link, .active_3 #frame_1 .nav-tabs a.nav-link, .half_size .nav-tabs a.nav-link, .half_size .buttons_l button, .half_size .buttons_r button { pointer-events:none; } .half_size .modal .infoTable col:first-child { display:table-column; } .half_size .modal .infoTable th { display:table-cell; } .half_size .modal .buttons-excel { display:inline-flex; } .half_size .modal .noHalf { display:initial; } .half_size .modal .nav-tabs a.nav-link, .half_size .modal .buttons_l button, .half_size .modal .buttons_r button { pointer-events:auto; } .half_size .modal .w50_on_half, .half_size .modal .w80_on_half, .half_size .modal .w180_on_half, .half_size .modal .w200_on_half, .half_size .modal .w230_on_half, .half_size .modal .w280_on_half, .half_size .modal .w300_on_half, .half_size .modal .w100p_on_half { min-width:auto !important; width:initial !important; } /* Top */ #topSearch { height:50px; display:flex; align-items:center; } .search_util { display:none; } #topSearch.active .search_util { display:flex; align-items:center; } /** * LNB */ .left-sidenav { min-width:200px; border-right:1px solid rgba(200,210,220, 1.0); } /** * Simple Bar */ [data-simplebar]:not(.dashboard) { max-height:calc(100vh - 114px); } /* iFrame 내부 */ .metismenu[data-simplebar] { max-height:calc(100vh - 52px); } /* LNB */ #frame_wrapper [data-simplebar] { max-height:calc(100vh - 204px); } /* Main */ .max_h400> [data-simplebar] { max-height:calc(400px - 60px); } /* Dashboard Widget */ .max_h450> [data-simplebar] { max-height:calc(450px - 127px); } /* Dashboard Widget */ /** * Card */ .frame> .card { border-bottom-left-radius:0; } .card_neck { min-height:53px; margin:0; padding:15px 15px 10px 20px; border-bottom:1px solid rgba(215,220,225, 1.0); display:flex; justify-content:space-between; white-space:nowrap; } /** * Tab */ .tab-pane.flex.active { height:100%; display:flex; flex-direction:column; } .show_only_content .show_only:not(.active) { display:none; } /** * jsTree */ .jstree { width:calc(100% - 10px); overflow:hidden; } .jstree-anchor.jstree-clicked i:not(.fa-question-circle)::before, .jstree-open>.jstree-anchor>.jstree-icon::before { content:'\f07c'; } .jstree-anchor { width:100%; padding-right:10px; } .jstree li { color:rgba( 50, 60,100, 1.0); } .jstree-icon:not(.jstree-ocl) { color:rgba(255,185, 35, 1.0); font-size:18px !important; transition:all 0.3s; } .jstree-anchor i { margin-right:5px !important; } .jstree-anchor:hover, .jstree-anchor:hover i, .jstree-anchor.jstree-clicked, .jstree-anchor.jstree-clicked i { color:rgba( 0, 70,225, 1.0) !important; font-weight:500; } .jstree-anchor.jstree-clicked i { font-weight:900; } .jstree-anchor.jstree-clicked { background-color:rgba(220,240,250, 1.0); } #jstree_move { padding:0 15px; } /** * Form */ .disabled_input { min-width:60px; height:27px; padding:3px 12px; display:block; border:1px solid rgba(225,235,245, 1.0); border-radius:2px; background-color:rgba(240,245,250, 1.0); text-align:left; } .disabled_input+button { margin-left:1px; } /** * Buttons */ .replica { margin:10px 0 20px; float:right; } .buttons_l, .buttons_r { font-size:0; display:flex; align-items:center; } .buttons_l span { font-size:13px; } .buttons> *, .buttons_l>*, .buttons_r>* { margin:0; } .buttons> *:not(:first-child), .buttons_l>*:not(:first-child), .buttons_r>*:not(:first-child) { margin-left:5px; } .buttons.disabled, .buttons_l.disabled, .buttons_r.disabled { cursor:not-allowed; } .editable+ .btn_reload { margin:0; } .btn-outline-light:hover { border-color:rgba(210,215,220, 1.0); color:rgba( 0, 0, 0, 1.0); background-color:rgba(240,245,250, 1.0); } /** * Modal */ .modal-content .modal-footer>* { margin:0; } .modal-content .modal-footer>*:not(:first-child) { margin-left:10px; } .modal-content pre { margin-bottom: 0; } .modal_transparent .modal-content, .modal_transparent .modal-content> * { margin:0; padding:0; border:0; background-color:transparent; color:rgba(255,255,255, 1.0); } .modal_transparent .modal-content .progress-icon-spin { font-size:80px; color:rgba(255,255,255, 1.0) !important; } .modal_transparent .modal-content> .modal-footer { font-size:14px; color:rgba(255,255,255, 1.0) !important; } tr.auth .btn { width:70px; } .btn.check_trigger::before { font-size:16px; line-height:16px; vertical-align:bottom; } .btn.check_trigger::before { content:'\f14a'; font-family:'Font Awesome 5 Free'; font-weight:900; margin-left:3px; } .btn.check_trigger::after { content:attr(data-unchecked-text); margin-left:5px; } .btn.check_trigger.checked::before{ content:'\f0c8'; font-family:'Font Awesome 5 Free'; font-weight:400; margin-left:3px; } .btn.check_trigger.checked::after { content:attr(data-checked-text); margin-left:5px; } /** * Icons */ .fa-external-link-square-alt { margin:2px 0 0 3px; vertical-align:top; font-size:10px; opacity:0.5; } a .fa-user-circle, a .fa-sign-out-alt { opacity:0.5; } a:hover i { opacity:1; } .infoTable .mdi.mdi-memory { font-size:18px; line-height:15px; display:inline-block; } .infoTable .mdi.mdi-memory::before { vertical-align:middle; margin-right:-3px; } .fa-info-circle.info { margin-right:5px; cursor:pointer; transition:color 0.3s; font-size:16px; color:rgba( 50, 60,100, 0.6); vertical-align:bottom; } .fa-info-circle.infor, .icon_hover:hover .fa-info-circle.info { color:rgba(245, 50, 90, 1.0); } /* Template Icon */ .template_icon, .tRow, .tCol { border-color:rgba( 50, 60,100, 1.0); display:flex; flex:1; } .template_icon { flex-direction:column; } .template_icon.type3, .tRow { flex-direction:row; } .template_icon { width:40px; height:40px; } .template_icon.large { width:100px; height:100px; cursor:pointer; } .template_icon { border:2px solid; } .tRow+ .tRow { border-top:1px solid; } .tCol+ .tCol { border-left:1px solid; } .template_icon.type2 { width:25px; } .template_icon.type2.large { width:50px; } .type2:not(.reverse)>.tRow:last-child, .type2.reverse> .tRow:first-child { flex:3; } .template_icon.type3 { height:25px; margin:7px 0; } .template_icon.type3.large { height:50px; margin:7px 0; } .type3:not(.reverse)>.tCol:last-child, .type3.reverse> .tCol:first-child { flex:3; } #pref_table .fa-square, #pref_table .fa-check-square { font-size:18px; color:rgba( 0,120,255, 1.0); } #pref_table tr.selected th { background-color:rgba(200,225,245, 1.0); } #pref_table tr.selected td:not([rowspan]) { background-color:rgba(200,230,240, 0.5); } .tCol { align-items:center; justify-content:center; font-size:18px; font-weight:500; color:rgba( 50, 60,100, 0.5); } .tCol.selected { background-color:rgba( 0,120,255, 0.3); color:rgba( 50, 60,100, 1.0); } /* Calendar */ #schedule_calendar table:not(.checkTable)> *> *> *:not(.text-center):first-child { padding-left:0; } .fc th, .fc td { border-width:1px 1px 1px 0; } .fc-prev-button, .fc-next-button { padding-top:4px !important; } #calendar .fc-dayGridMonth-view, #calendar .fc-timeGridWeek-view, #calendar .fc-timeGridDay-view { border:1px solid rgba( 50, 60,100, 0.5); box-shadow:0 0 0 4px rgba( 30,100,255, 0.1); border-radius:2px; } #calendar .fc-monthGridDay-view { } #calendar .fc-dayGridMonth-view .fc-widget-content { border-top:0 !important; border-color:rgba(210,220,230, 1.0); } #calendar table, #calendar .fc-head-container { border-top:0 !important; border-bottom:0 !important; } #calendar .fc-day-header.fc-widget-header { border-bottom:1px solid rgba( 50, 60,100, 0.3); } /* #calendar.fc-unthemed td { border-color:rgba(210,220,230, 1.0); } */ #calendar.fc-unthemed .fc-divider { border-color:transparent; } #calendar .fc-day-number { padding-right:6px; } /* 일정 Bar */ #calendar tr>td>.fc-day-grid-event { border-left: 5px solid; } #calendar .fc-axis.fc-widget-header, #calendar .fc-axis.fc-widget-content, #calendar .fc-content-skeleton .fc-axis, #calendar .fc-highlight-skeleton .fc-axis { width:65px !important; padding-right:10px; } #calendar .fc-row .fc-content-skeleton { padding-bottom:2px !important; } #calendar .fc-day-top.fc-today { background:rgba(210,220,230, 0.3) !important; } #calendar .fc-event { margin:5px; padding:5px; border-radius:2px; border:none; cursor:pointer; background-color:rgba(23,97,253,0.18); font-size:12px; color:rgba( 30,100,255, 1.0); } #calendar.fc-ltr .fc-h-event.fc-not-start, #calendar.fc-rtl .fc-h-event.fc-not-end { margin-left:0 !important; padding-left:1px !important; border-left-width:0 !important; border-top-left-radius:0 !important; border-bottom-left-radius:0 !important; } #calendar.fc-ltr .fc-h-event.fc-not-end, #calendar.fc-rtl .fc-h-event.fc-not-start { margin-right:0 !important; border-right-width:0 !important; padding-right:1px !important; border-top-right-radius:0 !important; border-bottom-right-radius:0 !important; } #calendar .fc-time-grid-event { border:1px solid rgba( 50, 60,100, 0.4); } tr[data-time="13:00:00"] td { border-top:1px solid rgba( 50, 60,100, 0.3); } #calendar .ctrl_display, #calendar .ctrl_text { background-color:rgba( 0, 70,225, 0.1) !important; color:rgba( 0, 70,225, 1.0) !important; } #calendar .ctrl_device { background-color:rgba( 20,170, 20, 0.1) !important; color:rgba( 20,170, 20, 1.0) !important; } #calendar .ctrl_default { background-color:rgba( 0, 0, 0, 0.1) !important; color:rgba( 0, 0, 0, 1.0) !important; border-left-color:rgba( 0, 0, 0, 0.3) !important; } #calendar .emergency { background-color:rgba(255, 60,160, 0.1) !important; color:rgba(245, 50, 90, 1.0) !important; } #calendar .emergency .fc-title::after { content:'\f071'; margin-left:3px; font-family:'Font Awesome 5 Free'; font-weight:900; } #calendar .group_scope .fc-title::before { content:'\f07c'; margin-right:3px; font-family:'Font Awesome 5 Free'; font-weight:900; } #calendar .fc-title { font-weight:500; } #calendar .fc-time { font-weight:400; display:none; } /* timepicker */ .dtp div.dtp-date, .dtp div.dtp-time { background:#21344c; color:#1761fd; } .dtp> .dtp-content> .dtp-date-view> header.dtp-header { background:#1c2d41; } /* schedule 등록에서 사용 */ tr.target_range { display:none; } tr.target_range.active_range { display:table-row; } /* * Coloring Rule * .yellow { color:rgba(255,220, 0, 1.0); } .orange { color:rgba(255,185, 35, 1.0); } 기본 { color:rgba( 50, 60,100, 1.0); } .active { color:rgba( 0, 70,225, 1.0); } .pending { color:rgba( 50,150, 50, 1.0); } .inactive { color:rgba( 50, 60,100, 1.0); } .stopped { color:rgba(245, 50, 90, 1.0); } */ /* 회원, 기업, 디바이스, 분할 템플릿 상태 */ .active.users, /* 정상 */ .active.company, /* 활성 */ .active.device, /* ON */ .active.service, /* 사용중 */ .active.template { color:rgba( 50, 60,100, 1.0); } /* 사용중 */ .pending.users, /* 등록대기 */ .pending.company { color:rgba( 50,150, 50, 1.0); } /* 등록대기 */ .inactive.users, /* 휴면 */ .inactive.company, /* 비활성 */ .inactive.device, /* Off-Line */ .inactive.service, /* 미사용 */ .inactive.auth, /* 미사용 */ .inactive.schedule, /* 미사용 */ .inactive.template { color:rgba(150,160,170, 1.0); } /* 미사용 */ .inactive.template .template_icon, .inactive.template .template_icon> * { border-color:rgba(150,160,170, 1.0); } /* 미사용 */ .inactive.label, .inactive .label.ctrl_display, .inactive .label.ctrl_text, .inactive .label.ctrl_device, .inactive .label.ctrl_default, .inactive .label { background-color:rgba(150,160,170, 1.0); } /* 미사용 */ .inactive th, .inactive td { font-weight:300; } .stopped.users, /* 정지 */ .stopped.company, /* 중지 */ .stopped.device, /* OFF */ .stopped.service { color:rgba(245, 50, 90, 1.0); } /* 사용정지 */ /* 회원 유형, 권한 */ .user_type.admin, /* 관리자 */ .user_type.coadmin { color:rgba(255,140, 50, 1.0); } /* 추가 관리자 */ .user_type.company, /* 기업 회원 */ .user_type.personal { color:rgba( 0, 70,225, 1.0); } /* 일반 회원 */ .user_level.admin { color:rgba(255,140, 50, 1.0); } /* 관리 권한 - System 관리자, 기업 관리자 */ .user_level.common { color:rgba( 0, 70,225, 1.0); } /* 일반 권한 - 위 관리자 제외 모두*/ /* Simple Bar */ .simplebar-horizontal { display:none; } .simplebar-content-wrapper { overflow-x:hidden !important; } .simplebar-track.simplebar-vertical .simplebar-scrollbar::before { right:2px; } .simplebar-track.simplebar-vertical .simplebar-scrollbar { width:8px; } /* Dashboard */ .dashboard { width:100%; height:calc(100vh - 90px); display:flex; align-items:center; justify-content:center; } .personal .dashboard { padding:4% 10%; } .sales .dashboard { padding:4% 20%; } .company .dashboard { padding:4% 10%; } .admin .dashboard { padding:4% 10%; } .enlarge-menu.personal .dashboard { padding:4% 13%; } .enlarge-menu.sales .dashboard { padding:4% 23%; } .enlarge-menu.company .dashboard { padding:4% 13%; } .enlarge-menu.admin .dashboard { padding:4% 13%; } .gray_shallow { font-size:12px; font-weight:400; } /* Media Size */ @media ( max-width:1800px ) { .personal .dashboard { padding:4% 9%; } .sales .dashboard { padding:4% 19%; } .company .dashboard { padding:4% 9%; } .admin .dashboard { padding:4% 9%; } .enlarge-menu.personal .dashboard { padding:4% 12%; } .enlarge-menu.sales .dashboard { padding:4% 22%; } .enlarge-menu.company .dashboard { padding:4% 12%; } .enlarge-menu.admin .dashboard { padding:4% 12%; } .gray_shallow { font-size:12px; } } @media ( max-width:1700px ) { .personal .dashboard { padding:4% 7%; } .sales .dashboard { padding:4% 17%; } .company .dashboard { padding:4% 7%; } .admin .dashboard { padding:4% 7%; } .enlarge-menu.personal .dashboard { padding:4% 10%; } .enlarge-menu.sales .dashboard { padding:4% 20%; } .enlarge-menu.company .dashboard { padding:4% 10%; } .enlarge-menu.admin .dashboard { padding:4% 10%; } .gray_shallow { font-size:11px; } } @media ( max-width:1600px ) { .personal .dashboard { padding:4% 5%; } .sales .dashboard { padding:4% 15%; } .company .dashboard { padding:4% 5%; } .admin .dashboard { padding:4% 5%; } .enlarge-menu.personal .dashboard { padding:4% 8%; } .enlarge-menu.sales .dashboard { padding:4% 18%; } .enlarge-menu.company .dashboard { padding:4% 8%; } .enlarge-menu.admin .dashboard { padding:4% 8%; } .gray_shallow { font-size:10px; } } @media ( max-width:1400px ) { .personal .dashboard { padding:4% 2%; } .sales .dashboard { padding:4% 12%; } .company .dashboard { padding:4% 2%; } .admin .dashboard { padding:4% 2%; } .enlarge-menu.personal .dashboard { padding:4% 5%; } .enlarge-menu.sales .dashboard { padding:4% 15%; } .enlarge-menu.company .dashboard { padding:4% 5%; } .enlarge-menu.admin .dashboard { padding:4% 5%; } .gray_shallow { font-size:9px; } } .dashboard .row:not(:last-of-type) { margin-bottom:15px; } .widget_wrapper { width:100%; } .dashboard .card.widget { height:calc(100% - 16px); height:100%; border:1px solid rgba( 50, 60,100, 0.3); } .dashboard .card.widget:hover { border:1px solid rgba( 50, 60,100, 0.6); box-shadow:0 0 0 3px rgba( 50, 60,100, 0.2); } .dashboard .card-header { padding:10px 15px; } .dashboard .card-body { padding:15px 20px; } .dashboard .card-header { border:0; background-image:linear-gradient( 90deg, transparent 5px, rgba( 50, 60,100, 0.2) 5px calc(100% - 5px), transparent calc(100% - 5px) ); background-size:100% 1px; background-position:0px 100%; background-repeat:no-repeat; } .dashboard .comment_box { background-color:rgba(240,245,255, 1.0); border-radius:4px; } .dashboard .comment_box.blue_box:hover { background-color:rgba(230,240,255, 1.0); border:1px solid rgba( 30,100,255, 1.0); box-shadow:0 0 0 3px rgba( 30,100,255, 0.3); } .dashboard .card.widget, .dashboard .comment_box { transition:all 0.3s; } .dashboard .comment_box:hover li { box-shadow:0 0 0 1px rgba( 30,100,255, 0.2); } .dashboard .list-group-itemgroup-item { border-color:rgba( 50, 60,100, 0.2); } .dashboard .list-group-item.device:last-child { border-bottom-width:1px !important; } .dashboard .list-group-item.empty::before { content:'• '; } .dashboard .list-group.flex-row li { border-bottom-width:0 !important; } .dashboard .dashboard_item { display:flex; justify-content:space-between; padding:10px 16px; } .dashboard .dashboard_item .month { font-size:16px; font-weight:600; } .dashboard .dashboard_item .number { font-size:18px; font-weight:500; color:rgba( 30,100,255, 1.0); } .dashboard .dashboard_item .number2 { font-size:14px; font-weight:500; color:rgba( 30,100,255, 1.0); } .dashboard .dashboard_item .number3 { font-size:12px; font-weight:500; color:rgba( 30,100,255, 1.0); } .dashboard .dashboard_item .unit { font-size:10px; font-weight:500; } .dashboard .list_header .number { font-size:20px; font-weight:600; color:rgba( 30,100,255, 1.0); } .dashboard .list_header .unit { font-size:12px; font-weight:500; } .dashboard .list_footer { text-align:right; align-self:center; } .dashboard .sales_summary { margin-bottom:10px; border-radius:3px; } .card.widget:hover .sales_summary .dashboard_item { background-color:rgba(230,240,255, 1.0); box-shadow:0 0 0 1px rgba( 30,100,255, 0.3); } .dashboard .com_info { width:100%; display:flex; align-items:center; } .dashboard .com_info .info_label { width:80px; padding:5px 0; text-align:right; color:rgba( 50, 60,100, 0.6); } .dashboard .com_info .info_content { flex:1; padding:5px 10px 5px 20px; font-weight:500; } .dashboard .nav.sub_tabs .nav-link.active, .dashboard .nav.sub_tabs .nav-link.active:hover, .dashboard .nav.sub_tabs .nav-item.show.active, .dashboard .nav.sub_tabs .nav-item.show.active:hover, .dashboard .nav.sub_tabs .nav-link, .dashboard .nav.sub_tabs .nav-link:hover { padding:0 12px 6px; font-size:14px; line-height:22px; } .dashboard table { margin:0 !important; } .dashboard .svc_end { color:rgba( 50, 60,100, 0.5); } .usage_title { font-size:16px; font-weight:600; } .usage_title i { font-size:18px; } .usage_label { font-size:13px; font-weight:500; } .media h6 { margin:0; margin-top:2px !important; } .media .mdi-wifi { color:rgba( 30,100,255, 1.0); } .media .mdi-wifi-off { color:rgba(245, 50, 90, 1.0); } .company .media .mdi-wifi-off { font-size:16px; margin:5px 5px 0 0; } .comment_box .progress { background-color:rgba( 30,100,255, 0.2); } .device .progress { margin:3px 0 0 18px; background-color:rgba( 50, 60,100, 0.2); } .device .progress-bar { min-width:5%; padding-right:5px; text-align:right; } .device .device_type { margin-left:5px; font-size:11px; } .device .device_group { font-size:11px; color:rgba(155,165,200, 1.0); } .progress-bar { overflow:visible; } .dashboard .number[data-red-cnt] { color:rgba(245, 50, 90, 1.0); } .dashboard .number[data-red-cnt^="0"] { color:rgba( 50, 60,100, 0.5); } /* 주문, 배송, 입고 */ .ordered { color:rgba(255,140, 50, 1.0); } /* 주문완료 */ .shipping { color:rgba( 50,150, 50, 1.0); } /* 배송중 */ .shipped { color:rgba( 50, 60,100, 1.0); } /* 배송완료 */ .canceled, /* 주문취소 */ .returned, /* 반품 */ .incoming { color:rgba(245, 50, 90, 1.0); } /* 입고 */ .outgoing { color:rgba( 50,150, 50, 1.0); } /* 출고 */ /* 결제 */ .paid { color:rgba(255,140, 50, 1.0); } /* 결제완료 */ .refunded { color:rgba(245, 50, 90, 1.0); } /* 환불완료 */ .label.square:not(.btn) { background-color:rgba( 50, 60,100, 0.4); } .label:not(.btn) { background-color:rgba( 50, 60,100, 1.0); color:rgba(255,255,255, 1.0) !important; font-weight:500; } .label.active { background-color:rgba( 0, 70,225, 1.0); } .label.pending { background-color:rgba( 20,170, 20, 1.0); } .label.waiting, .label.inactive { background-color:rgba(150,160,170, 1.0); } .label.stopped, .label.denied, .label.emergency { background-color:rgba(245, 50, 90, 1.0); } .label.schedule { background-color:rgba(130,190,255, 1.0); } .label.admin, .label.coadmin { background-color:rgba(255,140, 50, 1.0); font-weight:400; } .label.subscription { background-color:rgba( 0, 70,225, 1.0); margin-left:5px; } .label.substitute { background-color:rgba(245, 50, 90, 1.0); margin-left:5px; } /* .label.company, .label.personal { background-color:rgba( 50, 60,100, 1.0); font-weight:400; } */ .label.registered { margin-left:5px; font-size:10px; } /* 유•무료 */ .label.paid { background-color:rgba(245, 50, 90, 1.0); } .label.free { background-color:rgba( 0, 70,225, 1.0); } /* 전시 */ .label.display_on { background-color:rgba( 0, 70,225, 1.0); } .label.display_off { background-color:rgba(245, 50, 90, 1.0); } /* 판매자, 작가 */ .label.reseller { background-color:rgba( 0, 70,225, 1.0); } .label.author { color:rgba( 50, 60,100, 1.0); } .reseller .reseller_text { color:rgba( 0, 70,225, 1.0); } /* 스케줄 */ .schedule .label.active, .schedule .label.waiting, .schedule .label.emergency { margin-left:10px; } /* 대기중 */ .label.ctrl_display { background-color:rgba( 0, 70,225, 1.0); margin-right:10px; } /* 전시 제어 */ .label.ctrl_text { background-color:rgba( 0, 70,225, 1.0); margin-right:10px; } /* 자막 제어 */ .label.ctrl_device { background-color:rgba( 20,170, 20, 1.0); margin-right:10px; } /* 디바이스 제어 */ .label.ctrl_default { background-color:rgba( 0, 0, 0, 1.0); margin-right:10px; } /* 기본 일정 */ .label.collection, .label.file { background-color:rgba( 0, 70,225, 1.0); margin-right:5px; } /* 컬렉션, File 전시 */ .label.text { background-color:rgba( 50, 60,100, 1.0); margin-right:5px; } /* 자막 전시 */ .label.btn { background-color:rgba(255,255,255, 1.0); color:rgba( 50, 60,100, 1.0); font-weight:500; } .label.btn-outline-primary { color:rgba( 0, 70,225, 1.0); } .label> i { margin-right:5px; } /** * Device */ .device_memo { padding-top:10px !important; } .device_memo * { font-size:13px !important; } /** * License */ .sum_title { display:inline-flex; white-space:nowrap; font-size:14px; font-weight:500; color:rgba( 50, 60,100, 1.0); } /** * Auth */ .inactive.auth span.blue_deep, .inactive.auth span.red { color:rgba(150,160,170, 1.0) !important; } /* 미사용 /** * 입, 출고 */ .card-body.order_list { height:calc(70vh - 204px); max-height:calc(70vh - 204px) !important; } .card-body+ .card-body.device_list { height:calc(30vh - 8px); max-height:calc(30vh - 8px) !important; margin-top:10px; } .card_neck+ .card-body.device_list { height:calc(100vh - 204px); max-height:calc(100vh - 204px) !important; } .card-body.device_list { border-top:1px solid rgba(200,210,220, 1.0); background-color:rgba(210,220,230, 0.2); } .card-body.device_list table thead { background-color:rgba(210,220,230, 0.4); } .card-body.device_list tbody { background-color:rgba(255,255,255, 1.0); } /** * 아트워크 */ .art_wrapper { border-radius:4px; position:relative; cursor:pointer; } .art_image { width:100%; position:relative; overflow:hidden; border-radius:3px; text-align:center; line-height:16px; } .art_wrapper::before, .art_wrapper::after { width:45px; height:18px; border-radius:20px; display:inline-block; transition:opacity 0.3s; text-align:center; position:absolute; top:5px; z-index:10; opacity:0.3; line-height:16px; } .art_wrapper::before { width:auto; right:55px; font-family:'Font Awesome 5 Free'; font-size:18px; line-height:18px; } .art_wrapper.image_type::before { content:'\f03e'; } .art_wrapper.movie_type::before { content:'\f008'; } .art_wrapper.paid_type::before, .art_wrapper.vip_type::before, .art_wrapper.vip_expired::before { color:rgba(255,220, 0, 1.0); text-shadow:0 0 1px rgba( 0, 0, 0, 1.0), 0 0 2px rgba( 0, 0, 0, 1.0), 0 0 3px rgba( 0, 0, 0, 1.0); font-weight:900; } .art_wrapper.paid_type::after { content:'유료'; right:5px; box-shadow: 0 0 2px 2px rgba( 0, 0, 0, 0.5); color: rgba( 0, 0, 0, 1.0); background-color:rgba(255,220, 0, 1.0); font-weight:500; } .art_wrapper.vip_type::after, .art_wrapper.vip_expired::after { content:'VIP'; right:5px; box-shadow: 0 0 2px 2px rgba( 0, 0, 0, 0.5); color: rgba( 0, 0, 0, 1.0); background-color:rgba(255,220, 0, 1.0); font-weight:500; } .art_wrapper.custom_type::before { color:rgba( 0, 70,225, 1.0); text-shadow:0 0 1px rgba(255,255,255, 1.0), 0 0 2px rgba(255,255,255, 1.0), 0 0 3px rgba(255,255,255, 1.0); font-weight:900; } .art_wrapper.custom_type::after { content:'개인용'; right:5px; box-shadow: 0 0 2px 2px rgba(255,255,255, 0.5); color: rgba(255,255,255, 1.0); background-color:rgba( 0, 70,225, 1.0); font-weight:400; } .art_wrapper.free_type::before { color:rgba( 0, 0, 0, 1.0); text-shadow:0 0 1px rgba(255,255,255, 1.0), 0 0 1px rgba(255,255,255, 1.0), 0 0 3px rgba(255,255,255, 1.0); font-weight:900; } .art_wrapper.free_type::after { content:'무료'; right:5px; box-shadow: 0 0 2px 2px rgba(255,255,255, 0.5); color: rgba(255,255,255, 1.0); background-color:rgba( 0, 0, 0, 1.0); font-weight:400; } .art_wrapper:hover::before, .art_wrapper:hover::after, .art_wrapper.checked::before, .art_wrapper.checked::after { opacity:0.8; } .item_title { margin-right:5px; opacity:0.6; } .art_image::after { content:''; display:block; padding-bottom:100%; } .art_image> img { height:100%; position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); } .art_image> .radio { position:absolute; left:8px; top:4px; z-index:10; } .art_image> .checkbox { position:absolute; left:5px; top:5px; z-index:10; } .art_detail .art_image> .checkbox { position:absolute; left:15px; top:15px; z-index:10; } .art_image> button { position:absolute; right:5px; top:5px; border:1px solid rgba(255,255,255, 0.6); width:20px; height:20px; min-width:20px !important; padding:2px 1px 0 0; font-size:12px; color:rgba(255,255,255, 0.6); background-color:rgba( 0, 0, 0, 0.2); } .art_image:hover> button { color:rgba(255,255,255, 1.0); border-color:rgba(255,255,255, 1.0); } .art_image> button:hover { background-color:rgba( 0, 0, 0, 1.0); } .art_wrapper .art_image> button { left:5px; right:auto; top:5px; padding:0; } .art_wrapper .art_image:hover> button { color:rgba(255,255,255, 1.0); border-color:rgba(255,255,255, 1.0); } .art_wrapper .art_image> button:hover { background-color:rgba( 0, 0, 0, 1.0); } .art_image input[type="checkbox"]:checked+ label::before { outline:1px solid rgba(255,255,255, 1.0) !important } .art_desc { height:160px; padding-bottom:5px; position:relative; display:flex; flex-direction:column; justify-content:space-between; } .art_desc> *> * { padding:0 10px; } #artwork_info .art_title { padding-left:0; font-size:16px; font-weight:500; } #artwork_list .tab-content[data-simplebar] { height:calc(100vh - 300px); max-height:calc(100vh - 285px); } #artwork_list .col-md-2 { max-width:350px; min-width:160px; } .art_title { font-size:14px; font-weight:500; color:rgba( 50, 60,100, 1.0); transition:color 0.5s; } .art_reseller { max-width:100%; margin-top:2px; padding:0 5px; font-size:14px; font-weight:400; display:inline-block; color:rgba(255,255,255, 1.0); background-color:rgba( 50, 60,100, 0.6); transition:background-color 0.3s; } .art_author { padding-top:5px; font-weight:500; color:rgba( 50, 60,100, 0.8); line-height:16px; transition:padding-top 0.3s; } .art_material { } .art_imgSize { } .art_regData, .art_status { font-size:12px; text-align:right; } .art_title, .art_reseller, .art_author { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .art_price { margin:5px 0 10px; font-size:13px; } .art_paid_type, .art_regData> .item_title { display:none; } .art_regData::before { content:'• '; } .custom_type .art_desc { justify-content:start; } .custom_type .photo_bracket { height:auto; } .custom_type .art_price { display:none; } .custom_type .art_regData { text-align:left; } .custom_type .art_regData::before { content:''; } .custom_type .art_regData> .item_title { display:inline-flex; } .art_price> .flexBetween { padding:2px 0; border-top:2px solid rgba( 50, 60,100, 0.5); } .art_price> .flexBetween+ .flexBetween { border:1px solid rgba( 50, 60,100, 0.2); border-width:1px 0; } .art_price .price_title { padding-left:3px; } .art_price .price { padding-right:3px; } .art_comment { margin:5px 0 10px; font-size:11px; } .black_screen { background-color:rgba( 0, 0, 0, 0.3); transition:background-color 0.3s, opacity 0.3s; } .photo_bracket { height:120px; margin-top:-55px; transition:margin 0.3s; overflow:hidden; } .photo_bracket .black_screen { width:100%; /* height:55px; */ padding:5px 10px; border-bottom-right-radius:3px; border-bottom-left-radius:3px; } .photo_bracket .art_title { font-weight:400; color:rgba(255,255,255, 1.0); } .photo_bracket .art_reseller { font-size:12px; background-color:rgba(0,0,0, 0.8); } .art_title:hover, .art_wrapper:hover .art_title { color:rgba( 50, 60,100, 1.0) !important; font-weight:500 !important; transition:all 0.3s; } .art_wrapper:hover .art_reseller { background-color:rgba( 50, 60,100, 0.8) !important; } .art_wrapper.custom_type .art_reseller { color:rgba( 0, 70,225, 1.0); background-color:rgba(255,255,255, 1.0) !important; font-weight:600; } .art_detail.custom_type .art_reseller { color:rgba(255,255,255, 1.0); background-color:rgba( 0, 70,225, 0.7) !important; } .art_detail.custom_type:hover .art_reseller, .art_wrapper.custom_type:hover .art_reseller, .half_size .custom_type:not(.selected):hover .art_reseller { color:rgba(255,255,255, 1.0); background-color:rgba( 0, 70,225, 1.0) !important; font-weight:400; } .half_size .custom_type:not(.selected) .art_reseller { color:rgba(255,255,255, 1.0); background-color:rgba( 0, 70,225, 0.7) !important; } .art_wrapper:hover { border-color:rgba( 50, 60,100, 0.6); } .art_wrapper:hover .art_author { width:100%; padding:3px 12px 5px 5px; position:absolute; top:-24px; right:0; font-weight:250; font-style:oblique; text-align:right; color:rgba(255,255,255, 1.0); background-color:rgba(0,0,0, 0.4); border-bottom-right-radius:3px; border-bottom-left-radius:3px; } .art_wrapper:hover .art_author>.item_title { display:none; } .art_wrapper:hover .art_desc { margin-top:0; } .art_wrapper:hover .photo_bracket { margin-top:0; padding-bottom:0; } .art_wrapper:hover .black_screen { padding:2px 10px 0; background-color:rgba(0,0,0, 0.0); } .art_wrapper:hover .art_imgSize, .art_wrapper:hover .art_paid_type, .art_wrapper:hover .art_status .item_title { display:none; } .art_wrapper .art_status { text-align:left; } .art_wrapper .display_on, .art_wrapper .display_off, .art_wrapper .pending, .art_wrapper .denied { padding:0 10px 3px; font-size:10px; font-weight:300; } .search_detail .flexTop { margin-top:5px; } .custom_type .black_screen, .custom_type.art_wrapper:hover .art_author { background-color:rgba( 0, 70,225, 0.5); } .thumbnail .art_imgSize, .thumbnail .art_size, .thumbnail .art_status, .thumbnail .desc_bracket { display:none !important; } .thumbnail .art_desc, .thumbnail .photo_bracket { height:auto; padding-bottom:0; } .thumbnail .art_wrapper:hover .photo_bracket { margin-top:-55px; } body:not(.half_size) .thumbnail .art_wrapper:hover .black_screen { opacity:0; } .thumbnail .art_author { display:none; } .thumbnail .art_wrapper:hover .art_author { display:block; } .art_image input[type=radio]+ label::before { width:18px; height:18px; border-width:2px; } .art_image input[type=radio]+ label::after { width:8px; height:8px; top:7px; left:7px; } .vip_expired:not(.inactive):not(:hover) .black_screen { background-color:rgba( 0, 0, 0, 0.4); } .vip_expired:not(.inactive):not(:hover) .art_title { opacity:0.5; } .vip_expired:not(.inactive):not(:hover) .art_reseller { opacity:0.3; } /* 전시물 없음 */ .art_wrapper.none .art_image { border: 1px solid rgba(210,220,230, 1.0); display:flex; align-items:center; justify-content:center; } .art_wrapper.none::before, .art_wrapper.none::after { content:none; } /* 아트워크 상세 */ .art_detail img { border:10px solid rgba( 50, 60,100, 0.2); } .art_detail .art_image { width:auto !important; height:350px; } /* .art_detail .art_image::before { top:15px; right:15px; } */ .art_detail .art_image::after { content:none; } .art_detail .art_image img { height:350px; position:relative; top:0; left:0; transform:none; } .art_detail .art_image input[type="checkbox"]:checked+ label::before { box-shadow:0 0 0 1000px rgba(255,255,255, 0.5) !important; } .custom_type .art_detail .art_image input[type="checkbox"]:checked+ label::before { box-shadow:0 0 0 1000px rgba( 0, 70,225, 0.4) !important; } .art_detail .art_desc { min-width:400px; padding:10px 10px 10px 25px; } .art_detail .art_regData { text-align:left; color:inherit; } .art_detail .art_status { margin-top:5px; text-align:left; color:inherit; } .art_detail .tab-pane, .art_detail .tab-pane .art_desc { height:100%; } .art_detail .tab-pane .art_desc { display:flex; flex-direction:column; justify-content:space-between; } .art_detail:hover .art_reseller { background-color:rgba( 50, 60,100, 0.8) !important; } .art_detail:hover .item_title { opacity:0.8; } .art_detail .art_price { margin:0; font-size:14px; } .art_detail .item_content { font-weight:500; } .art_info_detail { padding:0 20px; display:flex; flex-direction:column; font-size:14px; } .art_info_detail .d_title { width:100px; font-weight:500; } .art_info_detail .d_content { flex:1; font-size:14px; } .art_info_detail .d_title, .art_info_detail .d_content { padding-bottom:10px; } .art_info_detail .d_content .price { font-size:16px; line-height:14px; border-bottom:1px solid rgba( 0, 70,225, 1.0); } .art_info_detail .label { font-size:12px; } .search_form select.filtered, .search_form input.filtered { border-color:rgba( 30,100,255, 1.0); color:rgba( 30,100,255, 1.0); } .h_divider { margin-bottom:5px; } /* 아트워크 분류 */ .category_row:not(:first-child) { margin-top:10px; } .c_title { width:80px; font-size:15px; font-weight:500; flex-shrink:0; background-image:linear-gradient( 90deg, rgba( 80,110,250, 1.0) 14px, transparent 14px ); background-size:100% 2px; background-position:0px 0px; background-repeat:no-repeat; } .c_title::first-letter { font-size:18px; color:rgba( 80,110,250, 1.0); } .c_items { padding-left:10px; display:flex; flex-wrap:wrap; line-height:32px; align-items:center; } .c_items .item:not(:last-child) { margin-right:5px; } .c_items .color_label { width:24px; height:24px; padding:0; } .c_items .item>.btn-check:focus+.btn, .c_items .item>.btn:focus { box-shadow:none; } .category { white-space:nowrap; } .category:not(:first-child) { margin-top:20px; } .category .c_title { width:100%; } .category .c_items { margin-top:10px; } .category .item { order:2; } .category .item.just { order:1; } .popup .c_items { flex:1; } .popup .section.flexRow { width:600px; } .active .step_label { color:rgba( 80,110,250, 1.0); } /* 아트워크 담기 */ .cart_neck { display:flex; align-items:center; justify-content:space-between; padding:8px 20px; background-color:rgba(220,230,235, 1.0); } .cart_body { padding:12px 0 10px; display:flex; align-items:stretch; } .cart_body .scroll_left, .cart_body .scroll_right { width:30px; height:100px; display:flex; align-items:center; justify-content:center; cursor:pointer; } .cart_body .scroll_left i, .cart_body .scroll_right i { font-size:20px; } .cart_body .art_image_list { width:calc(100% - 60px); height:100px; white-space:nowrap; /* overflow-x:auto; overflow-y:hidden; */ overflow:hidden; } .cart_body .art_image_list .art_image { display:inline-block; flex-shrink:0; } .cart_body .art_image { width:100px; height:100px; } .scroll_left:hover i, .scroll_right:hover i { color:rgba(245, 50, 90, 1.0); } .cart_body .art_image:not(:first-child){ margin-left:10px; } /** * Scrollbar */ .scrollbar { width:100%; height:10px; background-color:rgba( 0, 0, 0, 0.1); } .scrollbar .handle { width:100px; /* overriden if dynamicHandle: 1 */ height:100%; border-radius:10px; background-color:rgba( 0, 0, 0, 0.3); transition:width 0.3s; } .slidee { display:flex; } /* ::-webkit-scrollbar { 세로축 스크롤바 길이 width: 10px; 가로축 스크롤바 길이 height: 10px; } ::-webkit-scrollbar-track { background-color:rgba(0,0,0, 0.1); } ::-webkit-scrollbar-track-piece { background-color:rgba(0,0,0, 0.1); } ::-webkit-scrollbar-thumb { border-radius:10px; background-color:rgba( 0, 0, 0, 0.3); } */ /* ::-webkit-scrollbar-button { background-color: darkblue; width: 20px; height: 10px; } */ /** * 컬렉션 */ .collection_title, .meter { display:flex; align-items:center; } .collection_title { font-size:14px; font-weight:500; color:rgba( 0, 70,225, 1.0); } .meter { font-weight:400; color:rgba( 50, 60,100, 1.0); } .brace { margin-left:10px; margin-right:5px; } .brace~ .brace { margin-left:5px; margin-right:0; } .table_title+ .meter { margin-left:10px; } .collection_title::before { content:"• "; } .table_title+ .collection_title { margin-left:10px; } .table_title+ .collection_title::before { content:none; } body .art_size, body.device .art_status, .card-body.device .art_status, body.collection .art_status, .card-body.collection .art_status, body.schedule .art_status, .card-body.schedule .art_status { display:none; } body.device .art_size, .card-body.device .art_size, body.collection .art_size, .card-body.collection .art_size, body.schedule .art_size, .card-body.schedule .art_size { display:block; } .tippy-btn.info { width:18px; line-height:16px; } .art_size>.item_content { font-weight:500; color:rgba( 0, 70,225, 1.0); } .dropify-wrapper { border-radius:5px; } .dropify-message> .file-icon { color:rgba( 0, 70,225, 1.0) !important; } /* 스케줄 */ /* .emergency .label { background-color:rgba(245, 50, 90, 1.0); } */ .emergency:not(.inactive) { color:rgba(245, 50, 90, 1.0) !important } .emergency> th::after, .emergency> td.iteration::before { content:'\f071'; font-family:'Font Awesome 5 Free'; font-weight:900; color:rgba(245, 50, 90, 1.0) !important } .emergency> th::after { margin-left:5px; } .emergency> td.iteration::before { margin-right:5px; } .emergency .fa-exclamation-triangle, .fa-infinity { margin-right:5px; } .waiting:not(.inactive) { color:rgba(150,160,170, 1.0) !important } .waiting.label { color:rgba(255,255,255, 1.0) !important } .waiting> th::after { content:'\f017'; font-family:'Font Awesome 5 Free'; font-weight:900; color:rgba( 0, 0, 0, 1.0) !important } .waiting> th::after { margin-left:5px; } .waiting .label { opacity:0.5; } /* 컬렉션, 스케줄 - 화면 분할, 삭제/제외 대상 표시 */ tr.schedule_type, tr.display_content, tr.target_range { display:table-row; } .art_image img { transition:opacity 0.3s; } .split .art_wrapper:not(.inactive) .art_image:not([data-split-num=""])::before { content:attr(data-split-num); padding:11px 13px 15px; border:1px solid rgba(255,255,255, 0.5); border-radius:5px; position: absolute; left:auto; right:5px; top:28px; transform:none; font-size:24px; font-weight:600; z-index:10; color:rgba(255,255,255, 0.5); background-color:rgba( 0, 0, 0, 0.1); } .split .art_wrapper:not(.inactive) .art_image:not([data-split-num=""])::before { transition:all 0.3s; } .split:hover .art_wrapper:not(.inactive) .art_image::before { border-color:rgba(255,255,255, 1.0); color:rgba(255,255,255, 1.0); background-color:rgba( 0, 0, 0, 0.4); } .split_random .art_image> .radio { display:none; } .remove_on_inactive .art_wrapper.inactive .art_image img, .remove_on_checked .art_wrapper.checked .art_image img { opacity:0.4; } .remove_on_inactive .art_wrapper.inactive::before { color:rgba(255,255,255, 1.0); text-shadow:0 0 1px rgba( 0, 0, 0, 1.0), 0 0 2px rgba( 0, 0, 0, 1.0), 0 0 3px rgba( 0, 0, 0, 1.0); opacity:0.8; } .remove_on_inactive .art_wrapper.inactive::after { background-color:rgba(255,255,255, 1.0); box-shadow:0 0 3px 1px rgba( 0, 0, 0, 0.5); color:rgba( 0, 0, 0, 1.0); opacity:0.8; } .vip_expired .art_image::after { content:''; background-color:rgba( 0, 0, 0, 0.6); } .vip_expired.art_image::after { content:''; background-color:rgba( 0, 0, 0, 0.6); width:100%; position:absolute; top:0; } .vip_expired .art_image img, .vip_expired.art_image img { mix-blend-mode:multiply; } .vip_expired.inactive .art_image::after { background-color:transparent; } .vip_expired.inactive .art_image img { mix-blend-mode:normal; } .remove_on_inactive .art_wrapper.inactive.custom_type::after { font-weight:500; } .art_image::before { padding:2px 0 4px; font-size:16px; z-index:10; white-space:pre; transition:top 0.3s; position: absolute; left:50%; top:calc(50% - 18px); transform:translate(-50%, -50%); } .vip_expired .art_image::before, .vip_expired.art_image::before { content:'VIP 멤버십 만료'; top:50%; color:rgba(255,255,255, 1.0); font-weight:400; border-top:1px solid rgba(255,255,255, 1.0); border-bottom:1px solid rgba(255,255,255, 1.0); } .expired.inactive .art_image::after { background-color:transparent; } .expired.inactive .art_image img { mix-blend-mode:normal; } .expired .art_image::before, .expired.art_image::before { content:'삭제 예정'; width:100%; top:50%; padding:4px 0 6px; color:rgba(245, 50, 90, 1.0); font-weight:600; border-top:1px solid rgba(245, 50, 90, 1.0); border-bottom:1px solid rgba(245, 50, 90, 1.0); background-color:rgba(255,255,255, 0.8); box-shadow:0 0 0 2px rgba(255,255,255, 0.5); } .expired .art_image::before { top:calc(50% - 18px); } .remove_on_inactive .art_wrapper.inactive .checkbox-single label::before { border:1px solid rgba(245, 50, 90, 1.0); } /* .remove_on_inactive.collection .art_wrapper.inactive .art_image::before { content:'컬렉션에서 제외'; color:rgba( 0, 0, 0, 1.0); font-weight:600; */ .remove_on_inactive .art_wrapper.inactive .art_image::before { content:'컬렉션에서 제외'; color:rgba( 0, 0, 0, 1.0); font-weight:600; border-top:1px solid rgba( 50, 60,100, 1.0); border-bottom:1px solid rgba( 50, 60,100, 1.0); } /* .remove_on_inactive.collection .custom_type.inactive .art_image::before { content:'콘텐츠 삭제'; color:rgba(245, 50, 90, 1.0); font-weight:600; */ .remove_on_inactive .custom_type.inactive .art_image::before { content:'콘텐츠 삭제'; color:rgba(245, 50, 90, 1.0); font-weight:600; border-top:1px solid rgba(245, 50, 90, 1.0); border-bottom:1px solid rgba(245, 50, 90, 1.0); } /* .remove_on_inactive.schedule .art_wrapper.inactive .art_image::before { content:'스케줄 적용 제외'; } */ .vip_expired:hover .art_image::before, .art_wrapper.expired:hover .art_image::before, .remove_on_inactive .art_wrapper.inactive:hover .art_image::before { top:calc(50% - 6px); } /* 추천 컬렉션 */ tr.recommended th::before { content:''; width:15px; height:15px; margin-right:5px; margin-bottom:-3px; background-image:url('/static/html/assets/images/common/B.png'); display:inline-block; } tr.recommended { color:rgba( 0, 70,225, 1.0); } tr.expired th::before { content:'\f071'; margin-right:5px; font-family:'Font Awesome 5 Free'; font-weight:900; } tr.expired { color:rgba(245, 50, 90, 1.0); } .art_wrapper.no_data { border:1px solid rgba( 50, 60,100, 0.2); cursor:not-allowed; } .art_wrapper.no_data .art_image { display:flex; align-items:center; justify-content:center; } .art_wrapper.no_data span { font-size:13px; padding:5px; border-top:1px solid rgba( 50, 60,100, 0.2); border-bottom:1px solid rgba( 50, 60,100, 0.2); } /** * Half System */ body:not(.half_size) .col-md-2 { margin-bottom:20px; } .half_size .col-md-2 { width:270px; } .half_size .col-md-2.selected { order:1; overflow:hidden; } .half_size .col-md-2.selected .art_wrapper { height:420px; } .half_size .col-md-2.selected .art_wrapper.custom_type { height:360px; } .col-md-2 { order:2; transition:0.3s; } .half_size .col-md-2:not(.selected) .art_wrapper { display:flex; align-items:center; cursor:pointer; padding:0; border:0; border-radius:0; border-bottom:1px solid rgba( 50, 60,100, 0.4); } .half_size .col-md-2.selected .art_wrapper { padding:0 0 10px; border:0; } .half_size .col-md-2.selected .photo_bracket{ margin-top:-56px; } .half_size .col-md-2.selected:hover .photo_bracket{ margin-top:0; } .half_size .col-md-2 .art_image { border-radius:3px; } .half_size .col-md-2 .art_image:not(.selected) { width:35px; height:35px; } .half_size .col-md-2 .art_image> button, .half_size .col-md-2 .art_image> .checkbox { display:none; } .half_size .col-md-2:not(.selected) .art_desc .desc_bracket, .half_size .col-md-2:not(.selected) .art_desc> *> *:not(.black_screen) { display:none; } .half_size .col-md-2.selected .art_desc, .half_size .col-md-2.selected:hover .art_desc .photo_bracket, .half_size .col-md-2:not(.selected) .art_desc .photo_bracket { height:auto; } .half_size .col-md-2:not(.selected) .art_desc { height:auto; max-width:219px; height:auto; padding:5px 0 0 10px; } .half_size .col-md-2:not(.selected) .photo_bracket{ height:120px; margin-top:0; transition:margin 0.3s; overflow:hidden; } .half_size .col-md-2:not(.selected) .black_screen { padding:0 10px 5px 0; background-color:rgba(0,0,0, 0.0); } .half_size .col-md-2:not(.selected) .art_title { font-size:12px; font-weight:400; color:rgba( 50, 60,100, 0.6); } .half_size .col-md-2:not(.selected) .art_reseller { font-size:10px; font-weight:300; padding-bottom:2px; background-color:rgba( 50, 60,100, 0.6); } .half_size .col-md-2:not(.selected) .art_wrapper::before, .half_size .col-md-2:not(.selected) .art_wrapper::after, .half_size .col-md-2:not(.selected) .art_wrapper:not(.inactive) .art_image::before, .half_size .art_wrapper.inactive:not(.selected) .art_image::before { content:none !important; } .half_size .collection_title .meter { display:none !important; } /* Login */ .login .page-wrapper { margin:0 !important; background-color:rgba(210,210,220,1.0); } .login .login-content { width:100%; height:100%; display:flex; align-items:center; justify-content:center; } .login .tab-content { padding:30px 40px 0; } .login .auth-header-box { padding:25px 80px 20px; background-color:rgba( 50, 60,100, 1.0); } .login .form-label { font-size:12px; } .login .card { min-width:200px; max-width:60%; border:1px solid rgba(170,180,200, 1.0); border-radius:5px; overflow:hidden; box-shadow:0 0 0 3px rgba(170,180,200, 0.5); } #sub_list ul { padding-left:1rem; } #sub_list ul> li { list-style-type:none; } #sub_list[data-simplebar] { width:600px; height:20%; max-height:200px; padding:15px 20px; border:1px solid rgba(170,180,200, 1.0); border-radius:5px; } #sub_list .simplebar-offset { padding:20px 0; } #register_biz { width:640px; } /* Only Mobile */ @media only screen and (hover: none) and (pointer: coarse) { body:not(.enlarge-menu), body:not(.enlarge-menu) .card, .simplebar-content-wrapper { overflow:auto !important; } /* .simplebar-horizontal { display:initial; } */ .w100_on_mobile { width:100px; } .w120_on_mobile { width:120px; } .flat_on_mobile { width:0; } .wAuto_on_mobile { width:auto; } .login> .page-wrapper { height:100vh; } .profile_box { width:auto !important; padding-bottom:20px } .profile { padding:20px 0; text-align:center; } .info_wrapper { display:block; } .info_wrapper> div { margin-left:0 !important; } .info_wrapper table.infoTable { margin-top:10px !important; } } /* Media Size */ @media only screen and ( max-width:720px ) { body:not(.enlarge-menu), body:not(.enlarge-menu) .card, .simplebar-content-wrapper { overflow:auto !important; } /* .simplebar-horizontal { display:initial; } */ .w100_on_mobile { width:100px; } .w120_on_mobile { width:120px; } .flat_on_mobile { width:0; } .wAuto_on_mobile { width:auto; } .login> .page-wrapper { height:100vh; } .profile_box { width:auto !important; padding-bottom:20px } .profile { padding:20px 0; text-align:center; } .info_wrapper { display:block; } .info_wrapper> div { margin-left:0 !important; } .info_wrapper table.infoTable { margin-top:10px !important; } .dashboard { flex-wrap:wrap; } .dashboard .row, .row .card { margin-bottom:0 !important; } .row .col-lg-4 { padding-bottom:10px !important; } .page-content footer, .dashboard .comment_box, .export_buttons, .noMobile { display:none; } #frame_wrapper .frame> .card { height:calc(100vh - 55px); } .active_2 #frame_1, .active_3 #frame_2 { max-width:30px; } .active_3 #frame_1 { max-width:0; } .active_2 #frame_2, .active_3 #frame_3 { max-width:100% !important; } .active_2 #frame_1 .tab-content, .card-body> .flexTop, .card-body> .flexStretch, .art_detail .flexStretch, .table_utils, .collection_title, .collection_title>span { display:block; } .collection_title>span.info { display:none; } .table_utils { height:auto; } .table_utils>*, .collection_title>.meter>.brace { margin-left:0 !important; } .section+ .section { margin-left:0; margin-top:10px } .w100_on_mobile { width:100px; } .w120_on_mobile { width:120px; } .flat_on_mobile { width:0; } .wAuto_on_mobile { width:auto; } #btnResetDevice { padding:3px 3px 5px 6px; } table:not(.checkTable):not(.noPadding)> tbody th:not(.text-center), table:not(.checkTable):not(.noPadding)> *> *> *:not(.text-center):first-child { padding-left:10px } td button { display:none } } @media ( max-width:1024px ) { } @media ( max-width:1350px ) { }