|
|
@@ -1,877 +1,877 @@
|
|
|
-@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"); @import url("https://fonts.googleapis.com/css?family=Roboto:400,300,500,700"); html,body {position:relative; height:100%;}
|
|
|
-html, body, header, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, label, a, p, form, input, textarea, table, hr, span, em {margin:0; padding:0; box-sizing:border-box;}
|
|
|
-/* { } */
|
|
|
-body {overflow-x:hidden; font-family:"open sans", "Roboto", "Malgun Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:12px; background-color:#f3f3f4;}
|
|
|
-h1, h2, h3, h4, h5, h6 {display:inline-block;}
|
|
|
-ul, ol {list-style:none;}
|
|
|
-ul::after, ol::after {display:block; clear:both; content:'';}
|
|
|
-img {vertical-align:middle; border-style:none;}
|
|
|
-a {text-decoration:none;}
|
|
|
-em, i {font-style:normal;}
|
|
|
-table {border-collapse:collapse;}
|
|
|
-th {text-align:inherit;}
|
|
|
-label {position:relative; margin-right:20px; display:inline-block; -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
|
|
|
-label:last-child {margin-right:0 !important;}
|
|
|
-input,button,select,textarea {font-family:inherit; font-size:inherit;}
|
|
|
-input.btn-sm {padding:1px 6px;}
|
|
|
-input[type=text] {width:100%;}
|
|
|
-input[type=text], input[type=file], input[type=date], [type=password], textarea {padding:4px 3px 4px 5px; color:inherit; border-radius:1px; vertical-align:middle; margin:1px 3px 2px 0;}
|
|
|
-input[type=date],input[type=time],input[type=datetime-local],input[type=month] {-webkit-appearance:listbox;}
|
|
|
-input[readonly="readonly"], input[disabled="disabled"], input[readonly="readonly"]:before, input[disabled="disabled"]:before, select[readonly="readonly"], select[disabled="disabled"] {background-color:#eee !important;}
|
|
|
-button, select {text-transform:none;}
|
|
|
-button,[type=button],[type=reset],[type=submit] {margin:0; -webkit-appearance:button; border-radius:0; cursor:pointer; background-color:transparent; border-color:transparent;}
|
|
|
-button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner {padding:0; border-style:none;}
|
|
|
-textarea {overflow:auto; resize:vertical; width:100%; margin:4px 0; vertical-align:middle; line-height:22px; height:32px;}
|
|
|
-.textareaR2 {min-height:60px; line-height:26px;}
|
|
|
-.textareaR3 {min-height:96px; line-height:26px;}
|
|
|
-.textareaR4 {min-height:134px; line-height:26px;}
|
|
|
-.byteChk {line-height:20px; padding-left:20px; display:inline-block; vertical-align:middle;}
|
|
|
-select {margin:0 3px 1px 0; padding:3px 10px 3px 3px; color:inherit; border-radius:1px; vertical-align:middle;}
|
|
|
-select, input[type=text], input[type=file], input[type=date], input[type=password], textarea {border:1px solid #dbdbdb;}
|
|
|
-select:focus, input:focus, textarea:focus, button:focus, .outline {outline:2px auto #4D90FE;}
|
|
|
-.formControl {background:#eee;}
|
|
|
-.off {display:none !important;}
|
|
|
-.scrollOff {overflow:hidden;}
|
|
|
-.f25 {font-size:25px;}
|
|
|
-
|
|
|
-html,body,#wrapper,#container {min-height:100%; height:100%;}
|
|
|
-#wrapper {position:relative; min-width:1240px;}
|
|
|
-
|
|
|
-/* 로그인 --------------- */
|
|
|
-.loginBg {background:#f3f3f4;}
|
|
|
-.loginWrap {width:500px; box-shadow:0 7px 7px -5px rgba(0, 0, 0, 0.1);}
|
|
|
-.loginWrap .loginBox input[type=text],
|
|
|
-.loginWrap .loginBox input[type=password]{padding:10px; width:100%; border:1px solid #ced4da; border-radius:.25rem;}
|
|
|
-.loginWrap .loginBox li:nth-of-type(2), .loginBox li:nth-of-type(3) {padding-bottom:10px;}
|
|
|
-.loginWrap .loginBox li:nth-of-type(4) {padding:10px 0 50px 0; line-height:30px; text-align:left;}
|
|
|
-.loginWrap .loginBox li:nth-of-type(5) {margin-bottom:30px; text-align:center;}
|
|
|
-.loginWrap .loginBox a {display:inline-block; padding:10px;}
|
|
|
-.loginWrap .loginBox .dot {color:#ccc;}
|
|
|
-.loginWrap .btn-black {background-color:#555; color:#fff; font-weight:bold; float:right; margin:0 !important;}
|
|
|
-.loginWrap .btn-black:hover{background-color:#000; box-shadow:none;}
|
|
|
-.loginWrap .btn-purple {background-color:#667eea; color:#fff; font-weight:bold; float:right; margin:0 !important;}
|
|
|
-.loginWrap .btn-purple:hover{background-color:#2e38cb; box-shadow:none;}
|
|
|
-.loginWrap .loginInfo {color:#888; line-height:23px; text-align:left;}
|
|
|
-.loginWrap .loginInfo em i {margin-right:7px;}
|
|
|
-.loginWrap .loginInfo p:first-child{margin-bottom:15px;}
|
|
|
-.loginWrap .loginInfo p span {display:inline-block; margin-bottom:15px; line-height:40px; font-size:16px; font-weight:bold; border-bottom:1px solid #000;}
|
|
|
-
|
|
|
-/* 로그인 style :black */
|
|
|
-.login_black {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); background:#fff;}
|
|
|
-.login_black .logo { padding:25px 0; text-align:center; background:#000;}
|
|
|
-.login_black .loginInfo em {color:#555; font-weight:bold;}
|
|
|
-.login_black .loginCont > ul {padding:60px 60px 70px;}
|
|
|
-.login_black .loginBox li:nth-of-type(5) {border-top:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4;}
|
|
|
-.login_black .loginBox a {color:#555}
|
|
|
-
|
|
|
-/* 보안 인증 */
|
|
|
-.loginWrap .certiFrm {padding:40px 60px 70px;}
|
|
|
-.loginWrap .certiFrm h2{margin:10px 0 30px;}
|
|
|
-.loginWrap .certiFrm h2 i{margin-right:10px;}
|
|
|
-.loginWrap .certiFrm .alertBox{margin-bottom:15px}
|
|
|
-.loginWrap .certiFrm .input{height:45px; position:relative;}
|
|
|
-.loginWrap .certiFrm .input input[type=text]{position:relative; padding:10px; width:45px; height:45px; line-height:45px; font-size:16px; border:1px solid #ced4da; border-radius:.25rem; text-align:center;}
|
|
|
-.loginWrap .certiFrm .input input[type=text]:focus{color:#4D90FE;font-weight:bold;}
|
|
|
-.loginWrap .certiFrm .input .countdown{display:inline-block; position:relative; padding-left:20px; line-height:45px; height:45px;color:red; text-align:center;vertical-align:top; font-size:14px}
|
|
|
-.loginWrap .certiFrm .info{margin-top:20px; line-height:22px; color:#555;}
|
|
|
-.loginWrap .certiFrm .button{margin:25px 0 50px;}
|
|
|
-.loginWrap .certiFrm .button button{margin:0 5px !important; padding:5px 20px; height:32px; float:right}
|
|
|
-.loginWrap .certiFrm .button button:focus{outline:2px auto #4D90FE !important; }
|
|
|
-.loginWrap .certiFrm .button .btn-black{width:100px !important;}
|
|
|
-
|
|
|
-/* 로그인 :alert */
|
|
|
-.alertBox {position:relative; padding:10px 40px 10px 10px; margin-bottom:10px; border:1px solid; border-radius:.25rem; line-height:22px;}
|
|
|
-.alertBox .alertClose {position:absolute; top:0; right:5px; padding:0 10px; height:40px; text-indent:-9999px; background:url('../../image/btn_sltClose.png') no-repeat 50% 50%;}
|
|
|
-.alertBox .alertClose:hover {background:url('../../image/btn_sltCloseOn.png') no-repeat 50% 50%;}
|
|
|
-.alert-success {color:#155724; background-color:#d4edda; border-color:#c3e6cb;}
|
|
|
-.alert-info {color:#0c5460; background-color:#d1ecf1; border-color:#bee5eb;}
|
|
|
-.alert-warning {color:#856404; background-color:#fff3cd; border-color:#ffeeba;}
|
|
|
-.alert-danger {color:#721c24; background-color:#f8d7da; border-color:#f5c6cb;}
|
|
|
-
|
|
|
-/* header--------------- */
|
|
|
-header {position:fixed; top:0; left:0; right:0; z-index:10; min-width:1240px; width:100%; height:60px; line-height:60px; color:#fff; background:linear-gradient(135deg,#667eea 0,#764ba2 100%);}
|
|
|
-header a, header button {color:#fff;}
|
|
|
-.header-logo {float:left; width:260px; line-height:60px; background:rgba(250, 251, 252, 0.1); overflow:hidden;}
|
|
|
-.header-logo a {display:inline-block; margin:0 10px 0 20px; width:184px; height:60px;}
|
|
|
-.header-logo .lnbClose {width:30px; line-height:30px; display:inline-block !important;}
|
|
|
-.header-logo .lnbClose:hover {color:rgba(255, 255, 255, 0.8);}
|
|
|
-.header-menu {position:absolute; left:260px; padding:0 0 0 30px; font-weight:bold;}
|
|
|
-.header-menu .menu {display:inline-block; -ms-user-select:none; -webkit-user-select:none; user-select:none;}
|
|
|
-.header-menu .menu a {display:inline-block; margin-right:7px; padding:0 14px; line-height:34px; border-radius:50px; background:rgba(0, 0, 0, 0.07);}
|
|
|
-.header-menu .menu a:hover {color:rgba(255, 255, 255, 0.8);}
|
|
|
-.header-menu .menu a.on {background:rgba(0, 0, 0, 0.3);}
|
|
|
-.header-info {display:inline-block; float:right; margin-right:20px;}
|
|
|
-.header-info a {color:rgba(255, 255, 255, 0.8);}
|
|
|
-.header-info a:hover {color:#fff;}
|
|
|
-.header-info i.heart {font-size:6px; color:rgba(255, 255, 255, 0.4); margin-right:3px;}
|
|
|
-.header-info i.dot {font-size:13px; color:rgba(255, 255, 255, 0.4); margin:0 3px;}
|
|
|
-.header-info-sm {display:none; float:right; margin-right:20px;}
|
|
|
-.header-info-sm a {display:inline-block; padding:0 7px; color:rgba(255, 255, 255, 0.8);}
|
|
|
-.header-info-sm a:hover {color:#fff;}
|
|
|
-
|
|
|
-/* GNB:툴팁--------------- */
|
|
|
-.tooltip .tooltiptext {visibility:hidden; position:absolute; top:48px; right:20px; z-index:1; padding:0 15px; line-height:30px; color:#fff; font-size:13px; text-align:center; background-color:#233646; border-radius:3px;}
|
|
|
-.tooltip .tooltiptext::after {content:""; position:absolute; bottom:100%; right:38px; border-width:5px; border-style:solid; border-color:transparent transparent #233646 transparent;}
|
|
|
-.tooltip .tooltiptext.logout::after {right:10px;}
|
|
|
-.tooltip:hover .tooltiptext {visibility:visible;}
|
|
|
-
|
|
|
-/* LNB--------------- */
|
|
|
-#lnb-wrapper {position:fixed; top:60px; left:-260px; width:260px; height:100%; vertical-align:top; overflow-y:auto; transition:left .3s; -webkit-transition:left .3s;}
|
|
|
-#lnb-wrapper:after{content:''; position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%; background-color:#2f4050;}
|
|
|
-#lnb-wrapper.on {left:0;}
|
|
|
-#lnb {margin-bottom:60px; width:260px;}
|
|
|
-#lnb a {display:block; color:#a7b1c2;}
|
|
|
-#lnb a:hover {color:#fff;}
|
|
|
-#lnb a.on {color:#fff;}
|
|
|
-#lnb .dep2 {padding:14px 20px 14px 35px; background:url('../../image/icon_dep2.png') 10px 50% no-repeat, url('../../image/icon_depArr2.png') 222px 50% no-repeat; background-color:#233646; cursor:pointer;}
|
|
|
-#lnb .dep2.on {display:block; background:url('../../image/icon_dep2On.png') 10px 50% no-repeat, url('../../image/icon_depArr2On.png') 222px 50% no-repeat; background-color:#233646;}
|
|
|
-#lnb .dep3 {padding:5px 0 10px 10px; border-left:4px solid #8597eb; cursor:pointer;}
|
|
|
-#lnb .dep3 a {padding:10px; cursor:pointer;}
|
|
|
-#lnb .dep4 {padding:5px 0 10px 20px; cursor:pointer;}
|
|
|
-#lnb .dep4 a {padding:10px; cursor:pointer;}
|
|
|
-
|
|
|
-/* main--------------- */
|
|
|
-#main-wrapper {position:relative; left:0; top:0; margin-left:0; min-height:100%; padding-bottom:60px; vertical-align:top; color:#222; transition:margin-left .3s; -webkit-transition:margin-left .3s;}
|
|
|
-#main-wrapper.on {margin-left:260px;}
|
|
|
-#main {padding-top:60px; position:relative;}
|
|
|
-#main .main-title {height:60px; margin-left:20px; margin-right:20px;}
|
|
|
-#main .main-title h1 {padding-top:15px; font-size:20px; color:#333; font-weight:700;}
|
|
|
-#main .main-title ol {margin-top:25px; float:right; color:#666;}
|
|
|
-#main .main-title li {float:left;}
|
|
|
-#main .main-title li::before {padding:0 5px; content:"/"; color:#999;}
|
|
|
-#main .main-title li:nth-of-type(1)::before {content:none !important;}
|
|
|
-#main .main-title i {padding-right:3px; color:#999;}
|
|
|
-#main .sub-title {margin:0 20px 10px; font-size:14px; color:#6c7dda; font-weight:bold;}
|
|
|
-#main .sub-title i {margin-right:10px;}
|
|
|
-
|
|
|
-/* 패널영역 스타일--------------- */
|
|
|
-.panelStyle {position:relative; margin:0 20px 30px 20px; padding:15px 15px 0; background-color:#fff; border-top:2px solid #dfe2e3; box-shadow:0 7px 7px -5px rgba(0, 0, 0, 0.04);}
|
|
|
-.panelStyle::after, .frmStyle::after{position:relative; bottom:-5px; content:''; display:block; border:1px solid rgba(255,255,255,0);}
|
|
|
-.panelStyle .panelTitle {margin:-15px -15px 0; padding:0 20px; line-height:40px; border-bottom:1px solid #e7eaec;}
|
|
|
-.panelStyle .panelControl {position:absolute; top:0; right:15px; color:#c4c4c4;}
|
|
|
-.panelStyle .panelControl i {padding:10px 10px; cursor:pointer;}
|
|
|
-.panelStyle .panelContent {margin-top:10px;}
|
|
|
-.panelStyle h2 {margin-right:10px; font-size:14px; font-weight:bold;}
|
|
|
-.panelStyle h3 {margin-right:10px; font-size:12px; font-weight:normal; line-height:25px;}
|
|
|
-.panelStyle h3 i {padding-right:5px}
|
|
|
-.panelStyle h4 {padding-left:23px; height:31px; line-height:31px; background:url('../../image/icon_h4.png') no-repeat 3px 50%; color:#666;}
|
|
|
-.panelStyle .panelBar {display:table; width:100%; padding-bottom:10px;}
|
|
|
-.panelStyle .panelBar h4 {margin-bottom:0;}
|
|
|
-.panelStyle .panelBar > li {display:table-cell;}
|
|
|
-.panelStyle .panelBar > .center {text-align:center;}
|
|
|
-.panelStyle .panelBar > .right {text-align:right;}
|
|
|
-
|
|
|
-/* 패널 내부 테이블 여러개 배치 */
|
|
|
-.panelStyle .division + .panelBar {padding-bottom:15px;}
|
|
|
-.panelStyle .division {display:table; width:100%;}
|
|
|
-.panelStyle .division > li, .panelStyle .division > div {display:table-cell; padding-right:40px;}
|
|
|
-.panelStyle .division > li:last-child, .panelStyle .division > div:last-child {padding-right:0;}
|
|
|
-/* table, grid, button 상하 여백 */
|
|
|
-.ag-theme-balham{margin-bottom:15px !important;}
|
|
|
-.frmStyle + .panelBar {padding-bottom:15px;}
|
|
|
-.ag-theme-balham {margin:10px 0 15px;}
|
|
|
-.ag-theme-balham + .panelBar{padding-bottom:15px;}
|
|
|
-.panelBar + .ag-theme-balham {margin:0 0 15px;}
|
|
|
-.panelBar + .frmStyle {margin-top:0;}
|
|
|
-
|
|
|
-/* TABS 영역 --------------- */
|
|
|
-.tabs {position:relative; margin-bottom:30px; margin-left:20px; margin-right:20px;}
|
|
|
-.tabs h2 {position:absolute; top:0; z-index:2; margin-left:10px; font-size:14px; line-height:34px;}
|
|
|
-.tabs h2 i {margin-right:12px;}
|
|
|
-.tabsNav {overflow:hidden; position:relative; top:0; z-index:2; padding:0 30px 0 20px; height:35px;}
|
|
|
-.tabsNav ul {display:inline-block;}
|
|
|
-.tabsNav li {float:left; position:relative;}
|
|
|
-.tabsNav li a {padding:0 20px; line-height:35px; height:35px; display:block; color:#888; font-weight:bold; background-color:#f9f9f9; border:1px solid #dfe2e3; border-bottom:2px solid #dfe2e3; border-top-left-radius:.25rem; border-top-right-radius:.25rem;}
|
|
|
-.tabsNav li.on a {background-color:#fff; color:#222; border:1px solid #ccc; border-bottom:2px solid #fff;}
|
|
|
-.tabsCont {position:relative; top:-2px; z-index:1;}
|
|
|
-.tabsCont::after {display:block}
|
|
|
-.tab {display:none;}
|
|
|
-.tab > .panelStyle{margin:0;}
|
|
|
-.tab.on {display:block;}
|
|
|
-.popupTabs {padding-top:10px;}
|
|
|
-.tabContArea {overflow-x:hidden; overflow-y:auto;}
|
|
|
-.tabBtnArea {padding:15px 0 20px 0;}
|
|
|
-.popup .tabsCont {box-shadow:none;}
|
|
|
-.popup .tabs {margin-bottom:0;}
|
|
|
-
|
|
|
-/* Add TABS 영역 --------------- */
|
|
|
-.btn-add-tab {position:absolute; top:5px; right:0; z-index:2; padding:0 10px;}
|
|
|
-.tabsNav .ui-tabs-active a {background-color:#fff; color:#222; border:1px solid #ccc; border-bottom:2px solid #fff;}
|
|
|
-.tab-del {position:absolute; top:1px; right:1px; padding:4px 6px; color:gray; cursor:pointer; border-top-right-radius:.25rem;}
|
|
|
-.tab-del:hover {color:#f40552;}
|
|
|
-a, button, .ui-state-active, .ui-state-focus, .ui-state-hover {outline:0 !important;}
|
|
|
-.tabsNav .ui-corner-top a {padding:0 35px 0 20px}
|
|
|
-
|
|
|
-/* tabsJr 영역 --------------- */
|
|
|
-.tabsJr {position:relative;}
|
|
|
-.tabsJrNav {overflow:hidden; position:relative; top:0; z-index:2; height:31px; margin:0 30px 0 20px;}
|
|
|
-.tabsJrNav > ul {display:inline-block;}
|
|
|
-.tabsJrNav li {float:left;}
|
|
|
-.tabsJrNav li a {padding:0 20px; line-height:30px; height:30px; display:block; color:#888; /*font-weight:bold; */ background-color:#f9f9f9; border:1px solid #ccc; border-top-left-radius:.25rem; border-top-right-radius:.25rem;}
|
|
|
-.tabsJrNav li.on a {padding-bottom:2px; font-weight:bold; color:#555; background-color:#fff; border-top:1px solid #ccc; border-right:1px solid #ccc; border-bottom:1px solid #fff;}
|
|
|
-.tabsJrCont {position:relative; top:-2px; z-index:1;}
|
|
|
-.tabsJrCont::after {display:block}
|
|
|
-.tabJr {display:none;}
|
|
|
-.tabJr .panelStyle{margin:0; border-top:1px solid #ddd; min-height:20px; padding:20px 15px 0; box-shadow:0 -5px 7px -5px rgba(0, 0, 0, 0.05);}
|
|
|
-.tabJr.on {display:block;}
|
|
|
-.tabJrContArea {vertical-align:middle;}
|
|
|
-
|
|
|
-/* modal, modeless popup --------------- */
|
|
|
-.modalPopup{display:none; position:fixed; left:0; top:0; z-index:11; width:100%; height:100%; background:rgba(0,0,0,0.5);}
|
|
|
-.modalPopup > .panelStyle{position:absolute; top:50%; left:50%; z-index:11; -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); margin:0; border:1px solid #79797a; border-radius:3px;}
|
|
|
-.modalPopup > .panelStyle .close {position:absolute; top:0; right:0; font-size:18px; padding:5px 15px 8px;}
|
|
|
-.modalPopup .tabs{ margin:0;}
|
|
|
-.modalPopup .tabs .panelStyle{box-shadow:none}
|
|
|
-.modalPopup .tab > .panelStyle{overflow-y:auto;}
|
|
|
-
|
|
|
-/*MODELESS POPUP --------------- */
|
|
|
-.modelessPopup{display:none; position:absolute; z-index:11; top:50%; left:50%;}
|
|
|
-.modelessPopup.draggable {cursor:move;}
|
|
|
-.modelessPopup .panelStyle{margin:0; border:1px solid #ccc; border-radius:3px;}
|
|
|
-.modelessPopup .panelStyle .close {position:absolute; top:0; right:0; font-size:18px; padding:5px 15px 8px;}
|
|
|
-.modelessPopup .tabs{ margin:0;}
|
|
|
-.modelessPopup .tabs .panelStyle{box-shadow:none}
|
|
|
-.modelessPopup .tab > .panelStyle{overflow-y:auto;}
|
|
|
-
|
|
|
-/*VIDEO POPUP --------------- */
|
|
|
-.videoPopup {display:none; position:fixed; top:50%; left:50%; z-index:11; -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); margin:0; border:1px solid #79797a; border-radius:3px;}
|
|
|
-.modalPopup::before{position:fixed; left:0; top:0; z-index:11; width:100%; height:100%; background:rgba(0,0,0,0.5);}
|
|
|
-.videoPopup .close {position:absolute; top:-20px; right:-20px; z-index:1; width:40px; height:40px; line-height:20px; font-size:20px; border:1px solid #666; border-radius:50px; background-color:#fff;}
|
|
|
-.videoPopup iframe{width:100%; height:100%}
|
|
|
-
|
|
|
-
|
|
|
-#btnTop {display:none; position:fixed; right:0; bottom:50px; width:40px; line-height:10px; font-size:10px; background:#fff; border:1px solid #ddd; border-right:none; padding:3px 0 5px 0; box-shadow:5px 5px 5px -4px rgba(0, 0, 0, 0.07); color:#1c84c6;}
|
|
|
-#btnTop i {width:100%; font-size:12px;}
|
|
|
-#btnTop:hover {padding-right:30px; width:70px; font-weight:bold;}
|
|
|
-
|
|
|
-
|
|
|
-/* 컨텐트 스크롤--------------- */
|
|
|
-.xScroll {overflow-x:auto;}
|
|
|
-.yScroll {overflow-y:auto;}
|
|
|
-
|
|
|
-/* 폼테이블 스타일 --------------- */
|
|
|
-.frmStyle {width:100%; margin-bottom:15px;}
|
|
|
-.frmStyle th {border-top:1px solid #dae0fd;}
|
|
|
-.frmStyle tr:last-child th {border-bottom:1px solid #dae0fd;}
|
|
|
-.frmStyle tr:last-child td {border-bottom:1px solid #eee;}
|
|
|
-.frmStyle th {padding:0 15px; height:36px; line-height:24px; white-space:nowrap; text-align:center; background:#e9ecfb;}
|
|
|
-.frmStyle td {padding:0 10px 0 10px; line-height:36px; position:relative; border-top:1px solid #eee; border-right:1px solid #eee;}
|
|
|
-
|
|
|
-/* 체크박스&라디오박스 공통--------------- */
|
|
|
-input[type=radio] {position:absolute; top:50%; left:0; width:18px; height:18px; transform:translate(0,-50%); -ms-transform:translate(0,-50%);}
|
|
|
-label.chkBox, label.rdoBtn {position:relative; display:inline-block; padding-left:26px; height:22px; line-height:22px; vertical-align:middle; cursor:pointer;}
|
|
|
-/* 체크박스 :전체선택 버튼--------------- */
|
|
|
-input[type=checkbox] {position:absolute; top:0; left:0; width:0; height:0;}
|
|
|
-input[type=button].chkBox {margin-left:-2px; padding-left:24px; height:22px; vertical-align:middle; background:url('../../image/icon_checkN.png') no-repeat 0 50%;}
|
|
|
-
|
|
|
-/* 체크박스--------------- */
|
|
|
-label.chkBox::before {position:absolute; top:2px; left:0; content:''; width:16px; height:16px; border:1px solid #dbdbdb; background:#fff;}
|
|
|
-label.chkBox.checked::after {position:absolute; top:6px; left:3px; content:''; width:8px; height:4px; border-bottom:3px solid #676a6c; border-left:3px solid #676a6c; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
|
|
|
-label.chkBox .formControl::before {background:#eee;}
|
|
|
-
|
|
|
-/* 라디오버튼--------------- */
|
|
|
-input[type=radio]::before {position:absolute; top:0; left:0; content:''; width:16px; height:16px; border:1px solid #dbdbdb; border-radius:50%; background:#fff;}
|
|
|
-input[type=radio]:checked::after {position:absolute; top:5px; left:5px; content:''; width:8px; height:8px; border-radius:50%; background:#676a6c;}
|
|
|
-input[type=radio].formControl::before {background:#eee;}
|
|
|
-
|
|
|
-/* 토글 스위치--------------- */
|
|
|
-.switchBox{ display:inline-block;position:relative; width:60px; height:28px; vertical-align:middle;border-radius:25px;overflow:hidden;}
|
|
|
-.switchBox input[type="checkbox"]{position:absolute;visibility:hidden;}
|
|
|
-.switchBox label{display:block;position:absolute;top:0;width:60px;height:28px;background-color:#aaa;transition-duration:0.2s;}
|
|
|
-.switchBox label span{position:absolute;left:0;top:50%;z-index:1;width:26px;height:23px;border-radius:25px;transform:translate(3px, -50%);transition-duration:0.2s;background-color:#fff;text-indent:-9999px;}
|
|
|
-.switchBox label:before,label:after{position:absolute;top:0;width:52%;font-size:11px;line-height:27px;color:#fff;text-align:center;}
|
|
|
-.switchBox label:before{left:0;content:'ON';}
|
|
|
-.switchBox label:after{right:0;content:'OFF';}
|
|
|
-.switchBox input:checked + label span{transform:translate(31px, -50%);}
|
|
|
-.switchBox input:checked::before, .switchBox input:checked::after{border:none}
|
|
|
-.switch-base input:checked + label{color:#fff; background-color:#8597eb;}
|
|
|
-.switch-primary input:checked + label{color:#fff; background-color:#1ab394;}
|
|
|
-.switch-success input:checked + label{color:#fff; background-color:#1c84c6;}
|
|
|
-.switch-info input:checked + label{color:#fff; background-color:#23c6c8; }
|
|
|
-.switch-warning input:checked + label{color:#fff; background-color:#f8ac59;}
|
|
|
-.switch-danger input:checked + label{color:#fff; background-color:#ed5565;}
|
|
|
-.switch-black input:checked + label{color:#fff; background-color:#222;}
|
|
|
-.switchBox + .switchBox {margin-left:6px;}
|
|
|
-
|
|
|
-/* 테이블 스타일--------------- */
|
|
|
-.tableStyle {width:100%; max-width:100%; margin-bottom:15px;}
|
|
|
-.tableStyle th {position:relative; padding:7px 0; color:#333; border-top:1px solid #dae0fd; border-bottom:1px solid #dae0fd; border-right:1px solid #dae0fd; background-color:#e9ecfb; text-align:center;}
|
|
|
-.tableStyle th:last-child {border-right:none;}
|
|
|
-.tableStyle td {position:relative; padding:7px 0; border-right:1px solid #ebebeb; border-bottom:1px solid #ebebeb; text-align:center;}
|
|
|
-.tableStyle td:last-child {border-right:none;}
|
|
|
-.tableStyle tbody tr:nth-of-type(2n) {background-color:rgba(0, 0, 0, 0.02);}
|
|
|
-.tableStyle tbody tr:hover {background-color:rgba(224,243,255,0.6);}
|
|
|
-.tableStyle + .panelBar {padding-bottom:15px;}
|
|
|
-/* 스캔 */
|
|
|
-.scanTbl th {font-size:25px; line-height:80px;}
|
|
|
-.scanTbl td {line-height:80px;}
|
|
|
-.scanTbl input[type=text] {line-height:50px; font-size:32px;}
|
|
|
-.scanTbl .btn {overflow-y:hidden; margin-bottom:1px; padding:12px 30px; font-size:25px;}
|
|
|
-table.noPad tr > td, td.noPad {padding:0 !important;}
|
|
|
-th[rowspan] {border-bottom:1px solid #dae0fd;}
|
|
|
-td[rowspan] {border-bottom:1px solid #eee;}
|
|
|
-.nowrap {white-space:nowrap;}
|
|
|
-.solidR {border-right:1px solid #eee; vertical-align:middle;}
|
|
|
-.solidL {border-left:1px solid #eee; vertical-align:middle;}
|
|
|
-.solidT {border-top:1px solid #eee;}
|
|
|
-.solidB {border-bottom:1px solid #eee;}
|
|
|
-.dashR {border-right:1px solid #dae0fd;}
|
|
|
-.dashL {border-left:1px solid #dae0fd;}
|
|
|
-.noPad table.frmStyle > tr:first-child th {border-top:0 !important;}
|
|
|
-.noPad table.frmStyle > tr:first-child td {border-top:0 !important;}
|
|
|
-.noPad table.frmStyle > tr:last-child th {border-bottom:0 !important;}
|
|
|
-.noPad table.frmStyle > tr:last-child td {border-bottom:0 !important;}
|
|
|
-
|
|
|
-
|
|
|
-/* Q&A 스타일--------------- */
|
|
|
-.qnaStyle {width:100%; max-width:100%;}
|
|
|
-.qnaStyle th {position:relative; padding:7px 0; color:#333; border-top:1px solid #dae0fd; border-bottom:1px solid #dae0fd; border-right:1px solid #dae0fd; background-color:#e9ecfb; text-align:center;}
|
|
|
-.qnaStyle th:last-child {border-right:none;}
|
|
|
-.qnaStyle td {position:relative; padding:7px 0; text-align:center;}
|
|
|
-.qnaStyle tr td {border-bottom:1px solid #ecf5f7;}
|
|
|
-.qnaStyle tbody tr:nth-of-type(3n+1) td {background-color:rgba(224,243,255,0.6);}
|
|
|
-.qnaStyle tbody tr:nth-of-type(3n) td {border-bottom:1px solid #ddd;}
|
|
|
-.qnaClaim { text-align:left !important; padding-left:10px !important;}
|
|
|
-.qnaClaim .goods {font-weight:bold; line-height:26px;}
|
|
|
-.qnaClaim .cont {line-height:22px; padding:10px 0; color:#1d3e9d;}
|
|
|
-.qnaClaim .email {line-height:26px;}
|
|
|
-.qnaClaim .email em {border-bottom:1px solid #aaa;}
|
|
|
-.lineRound {border:2px solid #ccc; border-radius:15px; padding:4px 14px; font-weight:bold;}
|
|
|
-
|
|
|
-/* 내부 테이블 디자인 */
|
|
|
-.subTable {display:table; width:100%;}
|
|
|
-.subTable dl {display:table; width:100%;}
|
|
|
-.subTable dt, .subTable dd {display:table-cell;}
|
|
|
-.subTable dt {vertical-align:middle; white-space:nowrap; width:8%; padding:0 15px; background:#e9ecfb; text-align:center; border-bottom:1px solid #dae0fd;}
|
|
|
-.subTable dl:last-child dt {border-bottom:none;}
|
|
|
-.subTable dd {border-bottom:1px solid #eee; padding:3px 20px 3px 10px;}
|
|
|
-.subTable dl:last-child dd {border-bottom:none;}
|
|
|
-
|
|
|
-/* button --------------- */
|
|
|
-.btn {border-radius:3px; vertical-align:middle; white-space:nowrap;font-size:12px;user-select:none;}
|
|
|
-.btn-lg {padding:4px 20px 5px; height:28px; overflow-y:hidden;}
|
|
|
-.btn-sm {margin-top:-2px; line-height:100%; height:28px; overflow-y:hidden;}
|
|
|
-.btn-ssm {margin-top:-2px; line-height:100%; height:22px; overflow-y:hidden;}
|
|
|
-.btn + .btn {margin-left:6px;}
|
|
|
-.btn:first-child {margin-left:0;}
|
|
|
-
|
|
|
-/* 버튼 색상 */
|
|
|
-.btn-white {color:#555 !important; background-color:#fff !important; border:1px solid #ccc !important;}
|
|
|
-.btn-default {color:#555; background-color:#eee; border:1px solid #dcdcdc;}
|
|
|
-.btn-gray {color:#fff; background-color:#aaa; border:1px solid #aaa;}
|
|
|
-.btn-base {color:#fff; background-color:#8597eb; border:1px solid #8597eb;}
|
|
|
-.btn-primary {color:#fff; background-color:#1ab394; border:1px solid #1ab394;}
|
|
|
-.btn-success {color:#fff; background-color:#1c84c6; border:1px solid #1c84c6;}
|
|
|
-.btn-info {color:#fff; background-color:#23c6c8; border:1px solid #23c6c8;}
|
|
|
-.btn-pink {color:#fff; background-color:#feada6; border:1px solid #feada6;}
|
|
|
-.btn-warning {color:#fff; background-color:#f8ac59; border:1px solid #f8ac59;}
|
|
|
-.btn-danger {color:#fff; background-color:#ed5565; border:1px solid #ed5565;}
|
|
|
-.btn-dark {color:#fff; background-color:#6c757d; border:1px solid #6c757d;}
|
|
|
-.btn.icn {line-height:28px; height:28px; padding:0 8px; background-color:#eee; border:1px solid #dbdbdb;}
|
|
|
-.btn.icn i {padding-top:6px; width:12px; vertical-align:top; font-size:14px; text-align:center;}
|
|
|
-
|
|
|
-/* 페이징 --------------- */
|
|
|
-.tablePaging {position:relative; display:inline-block; vertical-align:middle;}
|
|
|
-.tablePaging a {display:inline-block; float:left; margin:0 5px; width:28px; height:28px; line-height:28px; text-align:center; border:1px solid #ccc; border-radius:50px; cursor:pointer;}
|
|
|
-.tablePaging a.arrow {background-color:rgba(0, 0, 0, 0.03); border-color:#ebebeb;}
|
|
|
-.tablePaging .num.on {background:#8597eb; color:#fff; border-color:#8597eb;}
|
|
|
-
|
|
|
-/* 다중 Select Box */
|
|
|
-.mSelectWrap select {display:none;}
|
|
|
-.mSelectBox {display:inline-block; position:relative; top:-1px; margin:2px 0 2px 0; padding:0 7px 0 0; width:100%; height:auto !important; min-height:29px; border:1px solid #e5e6e7; vertical-align:middle;}
|
|
|
-.mSelected {overflow:auto;}
|
|
|
-.mSelected li {float:left; margin:2px 5px 3px; line-height:24px; padding:0 7px; background:#dbedf9; -ms-user-select:none; -moz-user-select:-moz-none; -webkit-user-select:none; user-select:none;}
|
|
|
-.mSelected li.srchFld {margin:0; padding:0; background:none;}
|
|
|
-.mSelected .srchFld input {width:25px; margin:0; padding:0; border:none; outline:none;}
|
|
|
-.mSelected a {border:none !important; float:right; margin-left:3px; padding:0 3px; width:15px; line-height:22px; text-indent:-9999px; background:url('../../image/btn_sltClose.png') no-repeat 100% 50%;}
|
|
|
-.mSelected a:hover {background:url('../../image/btn_sltCloseOn.png') no-repeat 100% 50%;}
|
|
|
-.mSelecting {display:none; overflow-y:auto; overflow-x:hidden; position:absolute; top:100%; left:-1px; z-index:1; width:100%; max-height:156px; line-height:30px; border:1px solid #e5e6e7; background:#fff;}
|
|
|
-.mSelecting li {margin:0 10px; cursor:pointer;}
|
|
|
-
|
|
|
-/* 멀티 Select Box */
|
|
|
-.mSelWrap {display:inline-block;}
|
|
|
-.mSelWrap select {height:100px; padding:7px 0;}
|
|
|
-.mSelWrap .mSelBtn {margin:0 0 0 5px; float:right; width:33px; vertical-align:top;}
|
|
|
-.mSelWrap .mSelBtn .btn {margin:0; vertical-align:top;}
|
|
|
-.mSelWrap option {padding:4px 100px 4px 10px;}
|
|
|
-
|
|
|
-/* 파일첨부 --------------- */
|
|
|
-.uFile {overflow:hidden; position:relative; display:inline-block; margin:-2px 5px 0 0; width:80%; height:28px; vertical-align:middle; border:1px solid #dbdbdb;}
|
|
|
-.lrStyle .uFile {margin-top:2px;}
|
|
|
-.uFileInput {position:absolute; top:0; width:100%; margin:0 !important; padding:0 !important; line-height:28px; border:none !important;}
|
|
|
-.uFileLabel {position:absolute; top:0; right:0; left:0; z-index:1; margin:0; padding:0 7px; width:cals(100% - 7px); line-height:28px; height:28px; background-color:#fff; border-radius:1px; overflow:hidden; white-space:nowrap;}
|
|
|
-.uFileLabel::after {position:absolute; top:0; right:0; bottom:0; width:30px; z-index:3; line-height:28px; content:" "; border-left:1px solid #dbdbdb; background:#eee url('../../image/icon_upload.png') no-repeat 50% 50%;}
|
|
|
-
|
|
|
-/* badge --------------- */
|
|
|
-.badge {float:right; margin-top:2px; padding:0 5px; min-width:9px; line-height:18px; color:#fff; font-size:12px; font-weight:600; border-radius:3px; text-align:center; text-shadow:1px 1px 1px rgba(0,0,0,0.4); letter-spacing:-0.5px;}
|
|
|
-.badge-warning {background-color:#ed7908;}
|
|
|
-.badge-primary {background-color:#1ab394;}
|
|
|
-.badge-danger {background-color:#ed5565;}
|
|
|
-.badge-success {background-color:#2fa4e7;}
|
|
|
-.badge-info {background-color:#23c6c8;}
|
|
|
-.badge.circle {border-radius:50px;}
|
|
|
-.dep3 .badge {position:relative; top:-28px; right:20px;}
|
|
|
-
|
|
|
-/* tag */
|
|
|
-.tagNum {display:inline-block; margin-left:5px; padding:0 3px 0 2px; min-width:13px; line-height:16px; font-weight:normal; color:#fc5555; background:#fff; border-radius:5px;}
|
|
|
-
|
|
|
-/* footer --------------- */
|
|
|
-footer {position:absolute; bottom:0; left:0; width:100%; height:40px; background-color:#fff; border-top:1px solid #e7eaec; line-height:39px; font-size:13px;}
|
|
|
-footer .f-left {float:left; padding-left:20px; line-height:38px;}
|
|
|
-footer .f-right {float:right; padding-right:20px; line-height:38px;}
|
|
|
-
|
|
|
-/* 이미지 카드 */
|
|
|
-.dexterArea {min-width:350px; min-height:180px; padding:0 !important; vertical-align:top; background:#f1f1f1; vertical-align:top;}
|
|
|
-.dexterTable {display:table; width:100%; overflow-y:auto;}
|
|
|
-.dexterTable > li {display:table-cell; vertical-align:top; line-height:30px;}
|
|
|
-.dexterNo div {padding:0 10px; border-top:1px solid #ddd; border-right:1px solid #ddd; background:#fff;}
|
|
|
-.dexterNo div:first-child {margin-top:36px;}
|
|
|
-.dexterNo div:last-child {border-bottom:1px solid #ddd;}
|
|
|
-
|
|
|
-/* 수정용 이미지 카드 */
|
|
|
-.cardArea {width:100%; padding:0 0 20px; overflow-y:auto;}
|
|
|
-.imgCard {vertical-align:top; position:relative; display:inline-block; margin:20px 20px 0 0; padding:10px 10px 0 10px; border:1px solid #dbdbdb;}
|
|
|
-.imgCard ul {display:table;}
|
|
|
-.imgCard li {display:table-cell;}
|
|
|
-.imgCard img {margin-right:15px;}
|
|
|
-.imgCard li:nth-of-type(2) {padding-top:20px; max-width:150px; line-height:24px}
|
|
|
-.imgCard p {font-size:12px;}
|
|
|
-.imgCard .cardClose {position:absolute; top:0; right:0; background:url('../../image/btn_sltClose.png') no-repeat 50% 50%; text-indent:-9999px;}
|
|
|
-.imgCard .cardClose:hover {background:#f1f1f1 url('../../image/btn_sltCloseOn.png') no-repeat 10px 50%;}
|
|
|
-.verticalTop {vertical-align:top;}
|
|
|
-
|
|
|
-/* 조회용 이미지 카드 */
|
|
|
-.cardArea2 {padding:10px 0;}
|
|
|
-.cardArea2 ul, .cardArea2 .box {vertical-align:top; position:relative; display:inline-block; margin:10px; border:1px solid #dbdbdb; max-width:300px;}
|
|
|
-.cardArea2 li {display:table-cell; line-height:26px; vertical-align:middle;}
|
|
|
-.cardArea2 li:nth-of-type(2) {padding:0 10px;}
|
|
|
-.cardArea2 .cardDel {position:absolute; top:0; right:0; background:url('../../image/btn_sltClose.png') no-repeat 50% 50%; text-indent:-9999px;}
|
|
|
-.cardArea2 .cardDel:hover {background:#f1f1f1 url('../../image/btn_sltCloseOn.png') no-repeat 50% 50%;}
|
|
|
-
|
|
|
-/* 테이블 외부 안내문구 */
|
|
|
-.panelStyle > .notice {margin:0 0 15px ;}
|
|
|
-.panelContent > .notice {margin:15px 0;}
|
|
|
-.notice em {color:red;}
|
|
|
-.notice li, p.dot {padding-left:20px; background:url('../../image/dot_bk.png') no-repeat 5px 10px; line-height:24px;}
|
|
|
-p.dot .btn {margin-left:10px !important;}
|
|
|
-p.dot em {color:red;}
|
|
|
-
|
|
|
-/* 정렬 */
|
|
|
-.txt {line-height:36px;}
|
|
|
-.aC {text-align:center !important;}
|
|
|
-.aR {text-align:right !important;}
|
|
|
-.aL {text-align:left !important;}
|
|
|
-.vaT {vertical-align:top !important;}
|
|
|
-.vaM {vertical-align:middle !important;}
|
|
|
-.vaB {vertical-align:bottom !important;}
|
|
|
-
|
|
|
-/* 테이블 내부 안내문구 */
|
|
|
-.infoTxt {line-height:26px; padding:5px 0;}
|
|
|
-.infoTxt i {margin-right:7px;}
|
|
|
-.infoTxt em {color:red;}
|
|
|
-.infoTxtTh {display:inline-block; text-align:left; font-weight:normal; font-size:12px;}
|
|
|
-.infoTxtTh li {padding-top:3px;}
|
|
|
-.infoTxtTh i {padding-right:5px;}
|
|
|
-.srchOption {overflow:auto; padding:10px 0; line-height:36px;}
|
|
|
-
|
|
|
-/* 유의사항 안내 */
|
|
|
-.infoBox {margin:0 20px 20px; padding:7px 10px; border-top:2px solid #dfe2e3; border-bottom:2px solid #dfe2e3; background:#fff}
|
|
|
-.infoBox p {padding-left:25px; line-height:20px; font-size:12px; background:url('../../image/dot_bk.png') no-repeat 10px 50%; background-size:3px auto;}
|
|
|
-
|
|
|
-/* 검색결과 안내문 */
|
|
|
-.srchNotice {padding-bottom:7px; font-weight:normal; font-size:14px;}
|
|
|
-.srchNotice em {color:red;}
|
|
|
-
|
|
|
-/* 필수입력항목 */
|
|
|
-.required {display:inline-block; position:relative; top:-3px; width:12px; height:7px; background:url('../../image/icon_required.png') no-repeat 0 50%;}
|
|
|
-
|
|
|
-
|
|
|
-/* COLOR DESIGN -------------------------------------*/
|
|
|
-/*Color :Base ---*/
|
|
|
-.color-mPurple header,span.color-mPurple {background:linear-gradient(135deg,#667eea 0,#764ba2 100%) !important;}
|
|
|
-.color-purple header,span.color-purple {background:#667eea !important;}
|
|
|
-
|
|
|
-/*Color :Gray ---*/
|
|
|
-.color-mGray header,span.color-mGray {background:linear-gradient(to right,#6c757d 0%,#555 100%) !important;}
|
|
|
-.color-gray header,span.color-gray {background:#666 !important;}
|
|
|
-.color-mGray .frmStyle th,.color-mGray .tableStyle th,.color-gray .frmStyle th,.color-gray .tableStyle th {background:#eee !important; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
|
|
|
-.color-mGray .tablePaging .num.on,.color-gray .tablePaging .num.on {background:#888 !important; border-color:#888 !important;}
|
|
|
-.color-mGray #lnb .dep3,.color-gray #lnb .dep3 {border-color:#777 !important;}
|
|
|
-.color-mGray .tabsJrNav li.on a,.color-gray .tabsJrNav li.on a {color:#333;}
|
|
|
-
|
|
|
-/*Color :Blue ---*/
|
|
|
-.color-mBlue header,span.color-mBlue {background:linear-gradient(to right,#4481eb 0%,#04befe 100%) !important;}
|
|
|
-.color-blue header,span.color-blue {background:#0042a5 !important;}
|
|
|
-.color-mBlue .frmStyle th,.color-mBlue .tableStyle th,.color-blue .frmStyle th,.color-blue .tableStyle th {background:#d8eafc !important; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
|
|
|
-.color-mBlue .tablePaging .num.on,.color-blue .tablePaging .num.on {background:#3e91de !important; border-color:#3e91de !important;}
|
|
|
-.color-mBlue #lnb .dep3,.color-blue #lnb .dep3 {border-color:#3e91de !important;}
|
|
|
-.color-mBlue .tabsJrNav li.on a,.color-blue .tabsJrNav li.on a {background:#d8eafc;}
|
|
|
-.color-mBlue .tabJr.on,.color-blue .tabJr.on {border-top:4px solid #d8eafc;}
|
|
|
-.color-mBlue .tabsJrNav li.on a,.color-blue .tabsJrNav li.on a {color:#333;}
|
|
|
-
|
|
|
-/*Color :Green ---*/
|
|
|
-.color-mGreen header,span.color-mGreen {background:linear-gradient(135deg,#00b09b 0,#96c93d 100%) !important;}
|
|
|
-.color-green header,span.color-green {background:#00b09b !important;}
|
|
|
-.color-mGreen .frmStyle th,.color-mGreen .tableStyle th,.color-green .frmStyle th,.color-green .tableStyle th {background:#e5f7f5 !important; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
|
|
|
-.color-mGreen .tablePaging .num.on,.color-green .tablePaging .num.on {background:rgba(0,176,155,0.8); border-color:rgba(0,176,155,0.8) !important;}
|
|
|
-.color-mGreen #lnb .dep3,.color-green #lnb .dep3 {border-color:#00b09b !important;}
|
|
|
-.color-mGreen .tabsJrNav li.on a,.color-green .tabsJrNav li.on a {background:#e5f7f5;}
|
|
|
-.color-mGreen .tabJr.on,.color-green .tabJr.on {border-top:4px solid #e5f7f5;}
|
|
|
-.color-mGreen .tabsJrNav li.on a,.color-green .tabsJrNav li.on a {color:#333;}
|
|
|
-
|
|
|
-/*Color :Pink ---*/
|
|
|
-.color-mPink header,span.color-mPink {background:linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114)) !important;}
|
|
|
-.color-pink header,span.color-pink {background:#feada6 !important;}
|
|
|
-.color-mPink .frmStyle th,.color-mPink .tableStyle th,.color-pink .frmStyle th,.color-pink .tableStyle th {background:#fff7f6 !important; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
|
|
|
-.color-mPink .tablePaging .num.on,.color-pink .tablePaging .num.on {background:#feada6; border-color:#feada6 !important;}
|
|
|
-.color-mPink #lnb .dep3,.color-pink #lnb .dep3 {border-color:#feada6 !important;}
|
|
|
-.color-mPink .tabsJrNav li.on a,.color-pink .tabsJrNav li.on a {background:#fff7f6;}
|
|
|
-.color-mPink .tabJr.on,.color-pink .tabJr.on {border-top:4px solid #fff7f6;}
|
|
|
-.color-mPink .tabsJrNav li.on a,
|
|
|
-.color-pink .tabsJrNav li.on a {color:#333;}
|
|
|
-
|
|
|
-/*Color :black ---*/
|
|
|
-.color-black header, span.color-black{background:#3E3E3E !important;}
|
|
|
-.color-black .header-logo{background:#000 !important;}
|
|
|
-.color-black .header-menu .menu a{background:#000 !important;}
|
|
|
-.color-black .header-menu .menu a.on{background:#fff !important; color:#000 !important;}
|
|
|
-.color-black #lnb-wrapper{background-color:#b2b2b2 !important;}
|
|
|
-.color-black #lnb .dep2{background-color:#545454 !important;}
|
|
|
-.color-black #lnb .dep3{border-color:#000 !important;}
|
|
|
-.color-black #lnb .dep3{background:#fdfdfd !important; }
|
|
|
-.color-black #lnb .dep3 a{color:#111111 !important;}
|
|
|
-.color-black #lnb a{color:#fff !important;}
|
|
|
-.color-black .frmStyle th, .color-black .tableStyle th, .color-black .frmStyle th, .color-black .tableStyle th{background:#eee !important; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
|
|
|
-.color-black .tablePaging .num.on, .color-black .tablePaging .num.on{background:#888 !important; border-color:#888 !important;}
|
|
|
-.color-black .tabsJrNav li.on a, .color-black .tabsJrNav li.on a{color:#333; background:#eee !important}
|
|
|
-.color-black .tabJr.on, .color-black .tabJr.on { border-top:4px solid #eee;}
|
|
|
-
|
|
|
-/* 폰트 컬러, 폰트 두께 */
|
|
|
-.cBlue {color:#127fdc !important;}
|
|
|
-.cGray {color:#666 !important;}
|
|
|
-.cRed {color:red !important;}
|
|
|
-.bold {font-weight:bold !important;}
|
|
|
-
|
|
|
-/* 배경 투명도 */
|
|
|
-.bgOp6 {opacity:0.6; color:#000 !important;}
|
|
|
-
|
|
|
-/* 여백 지정 */
|
|
|
-hr {border:0; padding-bottom:10px;}/* 기본 여백 :10px */
|
|
|
-.pad10 {padding:10px 0 !important;}
|
|
|
-.pad15 {padding:15px 0 !important;}
|
|
|
-.pad20 {padding:20px 0 !important;}
|
|
|
-.padT3 {padding-top:3px !important;}
|
|
|
-.padT5 {padding-top:5px !important;}
|
|
|
-.padT10 {padding-top:10px !important;}
|
|
|
-.padT15 {padding-top:15px !important;}
|
|
|
-.padT20 {padding-top:20px !important;}
|
|
|
-.padT30 {padding-top:30px !important;}
|
|
|
-.padT40 {padding-top:40px !important;}
|
|
|
-.padR20 {padding-right:20px !important;}
|
|
|
-.padL10 {padding-left:10px !important;}
|
|
|
-.padB5 {padding-bottom:5px !important;}
|
|
|
-.padB10 {padding-bottom:10px !important;}
|
|
|
-.padB15 {padding-bottom:15px !important;}
|
|
|
-.padB20 {padding-bottom:20px !important;}
|
|
|
-.padB30 {padding-bottom:30px !important;}
|
|
|
-.padB40 {padding-bottom:40px !important;}
|
|
|
-.marT5 {margin-top:5px !important;}
|
|
|
-.marT10 {margin-top:10px !important;}
|
|
|
-.marT15 {margin-top:15px !important;}
|
|
|
-.marT20 {margin-top:20px !important;}
|
|
|
-.marR3 {margin-right:3px !important;}
|
|
|
-.marL5 {margin-left:5px !important;}
|
|
|
-.marL10 {margin-left:10px !important;}
|
|
|
-.marL20 {margin-left:20px !important;}
|
|
|
-.marR10 {margin-right:10px !important;}
|
|
|
-.marR20 {margin-right:20px !important;}
|
|
|
-
|
|
|
-/* 넓이 지정 --------------- */
|
|
|
-.w20 {width:20px !important;}
|
|
|
-.w50 {width:50px !important;}
|
|
|
-.w60 {width:60px !important;}
|
|
|
-.w70 {width:60px !important;}
|
|
|
-.w80 {width:80px !important;}
|
|
|
-.w90 {width:80px !important;}
|
|
|
-.w100 {width:100px !important;}
|
|
|
-.w130 {width:130px !important;}
|
|
|
-.w150 {width:150px !important;}
|
|
|
-.w200 {width:200px !important;}
|
|
|
-.w300 {width:300px !important;}
|
|
|
-.w400 {width:400px !important;}
|
|
|
-.w500 {width:500px !important;}
|
|
|
-.w600 {width:600px !important;}
|
|
|
-.w800 {width:800px !important;}
|
|
|
-.w100p {width:100% !important;}
|
|
|
-.w90p {width:90% !important;}
|
|
|
-.w80p {width:80% !important;}
|
|
|
-.w70p {width:70% !important;}
|
|
|
-.w60p {width:60% !important;}
|
|
|
-.w50p {width:50% !important;}
|
|
|
-.w40p {width:40% !important;}
|
|
|
-.w30p {width:30% !important;}
|
|
|
-.w20p {width:20% !important;}
|
|
|
-.h100 {height:100px !important;} /*alert, confirm 컨텐츠 높이에 사용*/
|
|
|
-
|
|
|
-
|
|
|
-/*-- 캘린더 --------------*/
|
|
|
-#calendar {max-width:900px; margin:20px 0 50px 20px;}
|
|
|
-
|
|
|
-/*-- error page --------------*/
|
|
|
-#errPage {padding-top:40px; width:650px; background:#fff; position:relative; top:48%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); border-radius:9px; vertical-align:middle; overflow:hidden; box-shadow:0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24);}
|
|
|
-#errPage .errImg {padding-left:50px; display:table-cell; vertical-align:middle; padding-bottom:30px;}
|
|
|
-#errPage .errImg div {border-radius:50%; position:relative; display:inline-block; width:140px; height:140px; color:#fff; background:#d196e4; box-shadow:2px 2px 6px 0 rgba(0,0,0,0.2) inset;}
|
|
|
-#errPage .fa-television {position:absolute; top:30px; left:28px; font-weight:bold; font-size:80px;}
|
|
|
-#errPage .fa-info {position:absolute; top:49px; left:66px; font-size:34px;}
|
|
|
-#errPage .errTxt {padding:0 50px; display:table-cell; padding-bottom:40px;}
|
|
|
-#errPage .errTxt .ttl {font-size:16px; font-weight:bold; padding-bottom:20px;}
|
|
|
-#errPage .errTxt .cont { padding-bottom:20px; line-height:26px;}
|
|
|
-#errPage .errTxt .tel {color:#777;}
|
|
|
-#errPage .errBtn {width:100%; background:#f9f9fa; line-height:70px; text-align:right;}
|
|
|
-#errPage .errBtn .btn {margin-right:30px; border-radius:33px; background:#858b90; color:#fff; padding:5px 30px; line-height:24px; font-weight:bold; -webkit-transition:0.2s; transition:0.2s;}
|
|
|
-#errPage .errBtn .btn:hover {background:#555;}
|
|
|
-
|
|
|
-/*-- DEXTER --------------*/
|
|
|
-.dexterNo { width:43px;}
|
|
|
-.dexterNo div { padding:0 10px; border-top:1px solid #ddd; border-right:1px solid #ddd; background:#fff; text-align:right;}
|
|
|
-.dexterNo div:first-child {margin-top:28px;}
|
|
|
-
|
|
|
-/*-- 회원추가 --------------*/
|
|
|
-.memAddWrap {line-height:26px; padding:3px 0;}
|
|
|
-.memAdd {margin-right:15px; padding:2px 27px 2px 0; position:relative; line-height:24px; height:24px; white-space:nowrap;}
|
|
|
-.memAdd button {position:absolute; top:3px; right:0; bottom:0; width:18px; height:18px; border:1px solid #dbdbdb; border-radius:3px; text-indent:-9999px; background:#eee url('../../image/btn_sltClose.png') no-repeat 50% 50%;}
|
|
|
-.memAdd button:hover {background:#eee url('../../image/btn_sltCloseOn.png') no-repeat 50% 50%;}
|
|
|
-
|
|
|
-/*-- Date Picker --------------*/ /* 20200521 수정 */
|
|
|
-table.mtz-monthpicker {border:1px solid #ddd; border-top:none;}
|
|
|
-.mtz-monthpicker-month {padding:7px; cursor:pointer;}
|
|
|
-.ui-datepicker-trigger {padding:0;}
|
|
|
-.ui-datepicker {z-index:800 !important; text-align:center; background:#fff;}
|
|
|
-.ui-datepicker .ui-datepicker-today,
|
|
|
-.ui-datepicker .ui-state-highlight {background:#fff7cf !important;}
|
|
|
-.ui-datepicker .ui-state-active {border:1px solid red !important;}
|
|
|
-.ui-datepicker .ui-datepicker-prev {position:absolute; top:3px; left:3px; width:30px; line-height:30px; text-indent:-9999px; background:url('../../image/icon_prev.png') no-repeat 50% 50%;}
|
|
|
-.ui-datepicker .ui-datepicker-next {position:absolute; top:3px; right:3px; width:30px; line-height:30px; text-indent:-9999px; background:url('../../image/icon_next.png') no-repeat 50% 50%;}
|
|
|
-.ui-datepicker .ui-datepicker-calendar {padding:5px; border:1px solid #ddd; border-top:none; text-align:center;}
|
|
|
-.ui-datepicker .ui-datepicker-calendar th{padding:5px 0}
|
|
|
-.ui-datepicker-week-end {text-align:center;}
|
|
|
-.ui-datepicker-calendar .ui-state-default {display:inline-block; text-align:center; width:32px; line-height:24px; border:none;}
|
|
|
-.ui-datepicker-header {position:relative; background:#d0e9ff; text-align:center; padding:5px; border:1px solid #ddd; border-bottom:none;}
|
|
|
-.ui-datepicker-buttonpane button {background-color:#eee; border:1px solid #dcdcdc; line-height:24px; border-radius:3px; margin:0 5px 5px 5px;}
|
|
|
-.ui-datepicker-current {float:left;}
|
|
|
-.ui-datepicker-close {float:right;}
|
|
|
-
|
|
|
-/* prograss bar */
|
|
|
-.prograssWrap {display:flex; flex-direction:row;}
|
|
|
-.prograssWrap > li {display:flex; align-items:center;}
|
|
|
-.prograssWrap > li:nth-of-type(1) {width:96%}
|
|
|
-.prograssWrap > li:nth-of-type(2) {margin-left:1.5rem !important}
|
|
|
-.prograss-lg {display:flex; width:100%; height:1rem; background-color:#f4f5fd; border-radius:.65rem; overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.1);}
|
|
|
-.prograss-sm {display:flex; width:100%; height:.5rem; background-color:#f4f5fd; border-radius:.65rem; overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.1);}
|
|
|
-.prograss-bar {display:flex; border-top-right-radius:.65rem; border-bottom-right-radius:.65rem; transition:width .6s ease;}
|
|
|
-.prograss-bar.bg-info {background-color:#11c5db;}
|
|
|
-.prograss-txt.bg-info {color:#11c5db; font-weight:bold;}
|
|
|
-.prograss-bar.bg-success {background-color:#1bc943;}
|
|
|
-.prograss-txt.bg-success {color:#1bc943; font-weight:bold;}
|
|
|
-.prograss-bar.bg-danger {background-color:#f83245;}
|
|
|
-.prograss-txt.bg-danger {color:#f83245; font-weight:bold;}
|
|
|
-.prograss-bar.bg-base {background:linear-gradient(135deg,#667eea 0,#764ba2 100%);}
|
|
|
-.prograss-txt.bg-base {color:#8597eb; font-weight:bold;}
|
|
|
-
|
|
|
-/* Multi CheckBox */
|
|
|
-.multiCheckBox {position:relative; display:inline-block; width:auto; line-height:27px; margin:3px 3px 3px 0;}
|
|
|
-.multiCheckBox .sltBtn {padding-left:5px; width:100%; height:27px; color:#555; text-align:left; border:1px solid #dbdbdb; box-sizing:border-box; -webkit-touch-callout:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;}
|
|
|
-.multiCheckBox .sltBtn::after {position:absolute; top:6px; right:10px; content:''; width:7px; height:7px; border-bottom:1px solid #555; border-left:1px solid #555; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
|
|
|
-.multiCheckBox .sltBtn.on::after {top:10px; -webkit-transform:rotate(135deg); transform:rotate(135deg);}
|
|
|
-.multiCheckBox ul {display:none; position:absolute; top:26px; left:0; z-index:1; width:100%; height:auto; border:1px solid #dbdbdb; background:#fff;}
|
|
|
-.multiCheckBox li {padding:3px 10px;}
|
|
|
-.multiCheckBox li:hover {background-color:Highlight; color:HighlightText;}
|
|
|
-.multiCheckBox label {display:flex;}
|
|
|
-
|
|
|
-/* checkBox More */
|
|
|
-.checkBoxList {overflow:hidden; padding-right:36px; height:36px;}
|
|
|
-.checkBoxList.on {overflow:visible; height:auto;}
|
|
|
-.checkBoxList .more {position:absolute; top:-1px; right:0; width:36px; height:38px; border:1px solid #eee; background:#f7f7f7;}
|
|
|
-.checkBoxList ul {display:flex; flex-wrap:wrap;}
|
|
|
-.checkBoxList li {justify-content:flex-start; line-height:36px;}
|
|
|
-.checkBoxList[data-unit='1'] li {flex-basis:100%;}
|
|
|
-.checkBoxList[data-unit='2'] li {flex-basis:50%;}
|
|
|
-.checkBoxList[data-unit='3'] li {flex-basis:33%;}
|
|
|
-.checkBoxList[data-unit='4'] li {flex-basis:25%;}
|
|
|
-.checkBoxList[data-unit='5'] li {flex-basis:20%;}
|
|
|
-.checkBoxList[data-unit='6'] li {flex-basis:16.6%;}
|
|
|
-.checkBoxList[data-unit='7'] li {flex-basis:14.2%;}
|
|
|
-.checkBoxList[data-unit='8'] li {flex-basis:12.5%;}
|
|
|
-
|
|
|
-/* 아이콘 툴팁 버튼 */
|
|
|
-.iconTooltip {display:inline-block; position:relative; margin-right:10px;}
|
|
|
-.iconTooltip i {position:relative; color:#46a1ff; width:15px; height:15px; line-height:16px; border-radius:50%; border:1px solid #46a1ff; cursor:pointer; text-align:center;}
|
|
|
-.iconTooltip:hover i {box-shadow:0px 3px 7px 0px rgba(0,0,0,0.4);}
|
|
|
-.iconTooltip span {display:none; position:absolute; top:36px; z-index:5; padding:10px 15px; line-height:24px; color:#fff; background:#6d6d6d; box-shadow:0px 3px 7px 0px rgba(0,0,0,0.2); border-radius:5px;}
|
|
|
-.iconTooltip span:after {position:absolute; top:-4px; content:''; background:#6d6d6d; width:8px; height:8px; -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
|
|
|
-.iconTooltip span.left {left:-10px}
|
|
|
-.iconTooltip span.left:after {left:15px;}
|
|
|
-.iconTooltip span.right {right:-10px}
|
|
|
-.iconTooltip span.right:after {right:15px;}
|
|
|
-.iconTooltip span.center {left:50%;}
|
|
|
-.iconTooltip span.center:after {right:5px;}
|
|
|
-.iconTooltip:hover span{display:block;}
|
|
|
-
|
|
|
-/* 상품이동 */
|
|
|
-.itemMove {display:inline-block; width:800px; border:1px solid #eee;}
|
|
|
-.itemMove .item {float:left; display:table; margin:0 10px 20px 0; width:220px; border:1px solid #eee;}
|
|
|
-.itemMove .item li {display:table-cell; vertical-align:top;}
|
|
|
-.itemMove .item li:nth-of-type(1) {width:80px;}
|
|
|
-.itemMove .item li:nth-of-type(1) img {width:80px; height:80px;}
|
|
|
-.itemMove .item button {width:16px; height:16px; text-indent:-9999px;}
|
|
|
-.itemMove .item input {width:30px; height:14px !important; line-height:14px}
|
|
|
-.itemMove .item li:nth-of-type(2) div {line-height:20px}
|
|
|
-
|
|
|
-/* 상품 Dragable :20200129 */
|
|
|
-.sortableWrap #sortable { overflow-y:auto }
|
|
|
-.sortableWrap {margin:20px 0; width:100%; max-height:675px;}
|
|
|
-.sortableWrap .itemWrap {display:inline-block;}
|
|
|
-.sortableWrap .item {float:left; margin-right:12px; margin-bottom:12px; padding:5px 8px; line-height:20px; border:1px solid #ddd; vertical-align:top; background:#fff;}
|
|
|
-.sortableWrap .item > li {float:left; vertical-align:middle;}
|
|
|
-.sortableWrap .item .img {margin-top:3px; margin-right:10px; width:80px;}
|
|
|
-.sortableWrap .item .img img {width:80px; height:80px; cursor:move;}
|
|
|
-.sortableWrap .btnArea {text-align:center; margin-top:15px; padding:0 10px;}
|
|
|
-.sortableWrap button.icnSm {overflow:hidden; position:relative; width:24px; height:20px; background-color:#fff;}
|
|
|
-.sortableWrap button.icnSm i {position:absolute; top:-4px; left:-3px; width:24px; line-height:24px; font-size:15px; color:#888;}
|
|
|
-.sortableWrap button.icnSm:hover i {color:#111;}
|
|
|
-.sortableWrap button.icnSm:last-child {margin-right:0;}
|
|
|
-.sortableWrap .item .cont {width:114px;}
|
|
|
-.sortableWrap .item .cont li em {margin:0 3px 0 7px;}
|
|
|
-.sortableWrap .item .cont .no {font-weight:bold; padding-bottom:3px;}
|
|
|
-.sortableWrap .item .cont .title {padding-bottom:3px; border-bottom:1px solid #eee;}
|
|
|
-.sortableWrap .item .cont .price {padding-top:3px; padding-bottom:3px;}
|
|
|
-.sortableWrap .item .cont input {margin-left:5px; width:37px;}
|
|
|
-
|
|
|
-
|
|
|
-.ag-theme-balham.lh60 .ag-cell {line-height:60px !important; height:60px;}
|
|
|
-.ag-theme-balham.lh70 .ag-cell {line-height:70px !important; height:70px;}
|
|
|
-.ag-theme-balham.lh80 .ag-cell {line-height:80px !important; height:80px;}
|
|
|
-.ag-theme-balham.lh90 .ag-cell {line-height:90px !important; height:90px;}
|
|
|
-.ag-theme-balham.lh100 .ag-cell {line-height:100px !important; height:100px;}
|
|
|
-.ag-theme-balham.lh110 .ag-cell {line-height:110px !important; height:110px;}
|
|
|
-.ag-theme-balham.lh120 .ag-cell {line-height:120px !important; height:120px;}
|
|
|
-
|
|
|
-
|
|
|
-/* 테이블 상품명 클릭시 이미지 레이어 활성화 */
|
|
|
-.viewImg {position:relative; color:blue; cursor:pointer}
|
|
|
-.thumbLayer {display:inline-block; position:absolute; top:0; right:0; z-index:5; border:1px solid #ddd}
|
|
|
-.thumbLayer img {width:100%; height:auto;}
|
|
|
-
|
|
|
-/* dashboard */
|
|
|
-.flexWrap{display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; color:#676a6c;}
|
|
|
-.flexWrap li{padding:0 20px 20px; width:calc(33.3%);}
|
|
|
-.flexWrap.unit4 li{width:calc(25%);}
|
|
|
-.flexWrap.unit5 li{width:calc(20%);}
|
|
|
-.flexWrap.unit6 li{width:calc(16.6%);}
|
|
|
-.flexWrap .title{padding:15px; font-weight:600; border:1px solid #e7eaec; border-top:2px solid #e7eaec;}
|
|
|
-.flexWrap .title h5{font-size:15px; font-weight:bold;}
|
|
|
-.flexWrap .title span{float:right; padding:1px 8px; font-size:10px; border-radius:0.25em;}
|
|
|
-.flexWrap .content{padding:15px; border:1px solid #e7eaec; border-top:none;}
|
|
|
-.flexWrap .content em{font-size:30px; font-weight:200;}
|
|
|
-.statText {margin-top:5px}
|
|
|
-.statText::after{display:block; clear:both; content:''}
|
|
|
-.statText span:nth-of-type(1){float:left; font-size:11px;}
|
|
|
-.statText span:nth-of-type(2){float:right; font-size:13px; font-weight:600;}
|
|
|
-.txt-success{color:#1c84c6;}
|
|
|
-.txt-info{color:#23c6c8;}
|
|
|
-.flexWrap .txt-danger{color:#ed5565;}
|
|
|
-.flexWrap .bg-success{background:#1c84c6;}
|
|
|
-.flexWrap .bg-info{background:#23c6c8;}
|
|
|
-.flexWrap .bg-danger{background:#ed5565;}
|
|
|
-.btn.on{-webkit-box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);}
|
|
|
-.dbChart .btn-group{float:right; line-height:37px;}
|
|
|
-.dbChart .btn-group button{margin:0; height:23px;}
|
|
|
-.dbChart .boxleft{float:left; margin:20px 15px 20px 15px; width:calc(100% - 490px);}
|
|
|
-.dbChart .boxRight{float:left; margin:20px 20px 20px 40px; width:400px;}
|
|
|
-.dbChart .boxRight em{font-size:24px; font-weight:200;}
|
|
|
-.dbChart .boxRight > div{margin-bottom:25px;}
|
|
|
-.dbChart .boxRight .statText .c1 {color:#FF7043}
|
|
|
-.dbChart .boxRight .progress .c1 {background:#FF7043}
|
|
|
-.dbChart .boxRight .statText .c2 {color:#48C9B0}
|
|
|
-.dbChart .boxRight .progress .c2 {background:#48C9B0}
|
|
|
-.dbChart .boxRight .statText .c3 {color:#ca9900}
|
|
|
-.dbChart .boxRight .progress .c3 {background:#FFD54F}
|
|
|
-.progress{display:-ms-flexbox; display:flex; margin-top:5px; height:1rem; overflow:hidden; font-size:.75rem; background-color:#e9ecef; border-radius:.25rem;}
|
|
|
-.progress-mini{height:5px; margin-bottom:0;}
|
|
|
-.progress > div{height:5px; margin-bottom:0; transition:width 0.3s;}
|
|
|
-
|
|
|
-
|
|
|
-/* 카테고리 Sort */
|
|
|
-.categoryOrder {margin-bottom:15px; background:#fcfcfc;}
|
|
|
-.categoryOrder li {clear:both; padding-left:15px; line-height:40px; cursor:move; border-top:1px dashed red; }
|
|
|
-.categoryOrder li button.on {background-image:url(../../image/icon_cate_minus.png);}
|
|
|
-/* .categoryOrder li:after {content:''; position:absolute; top:8px; left:-10px; width:21px; height:21px; background:url(../../image/line_cate.png)} */
|
|
|
-.categoryOrder li:before{position:relative; content:''; width:1px; height:100%; background:#ddd;}
|
|
|
-.categoryOrder li ol{display:none}
|
|
|
-/* .categoryOrder ol:last-child li {background-image:none !important} */
|
|
|
-.categoryOrder button{position:relative; z-index:200; padding:0 15px 0; margin:0; line-height:40px; cursor:pointer; background-image:url(../../image/icon_cate_plus.png); background-repeat:no-repeat; background-position:0 0;}
|
|
|
-
|
|
|
-
|
|
|
-
|
|
|
-/* 반응형:GNB 유저명,등급,로그아웃 --------------- */
|
|
|
-@media ( max-width:1370px ) {
|
|
|
- .header-info { display:none;}
|
|
|
- .header-info-sm { display:inline-block;}
|
|
|
-}
|
|
|
-
|
|
|
-/* 반응형 :dashboard(20200522) --------------- */
|
|
|
-@media ( max-width:1023px ) {
|
|
|
- /* 대시보드 */
|
|
|
- #wrapper.dashboard{width:100%; min-width:100%;}
|
|
|
- .dashboard .header-logo{width:100%}
|
|
|
- .dashboard #lnb-wrapper{display:none;}
|
|
|
- .dashboard .header-menu{display:none;}
|
|
|
- .dashboard .tabs{margin-left:0; margin-right:0;}
|
|
|
- .dashboard .tabs h2{position:relative; margin:10px 15px}
|
|
|
- .dashboard .tabsNav li:first-child{margin-left:0}
|
|
|
- .dashboard .tabsNav li:last-child{margin-right:0}
|
|
|
- .dashboard .tabsNav li a{font-size:16px}
|
|
|
- .dashboard .flexWrap li{width:100%}
|
|
|
- .dashboard .flexWrap.unit4 li{width:100%}
|
|
|
- .dashboard .flexWrap.unit5 li{width:100%}
|
|
|
- .dashboard .flexWrap.unit6 li{width:100%}
|
|
|
- .dashboard .boxStyle{margin-left:0; margin-right:0;}
|
|
|
- .dashboard .dbChart .boxleft{clear:left; margin:30px 15px 0 0; width:100%;}
|
|
|
- .dashboard .dbChart .boxRight{clear:right; width:100%; margin:30px 20px 20px;}
|
|
|
-}
|
|
|
-
|
|
|
-/* Fix Input Zoom on devices older than iPhone 5:*/
|
|
|
-@media screen and (device-aspect-ratio:2/3) {
|
|
|
- select, textarea, input[type="text"], input[type="password"],
|
|
|
- input[type="datetime"], input[type="datetime-local"],
|
|
|
- input[type="date"], input[type="month"], input[type="time"],
|
|
|
- input[type="week"], input[type="number"], input[type="email"],
|
|
|
- input[type="url"]{ font-size:16px;}
|
|
|
-}
|
|
|
-
|
|
|
-/* Fix Input Zoom on iPhone 5, 5C, 5S, iPod Touch 5g */
|
|
|
-@media screen and (device-aspect-ratio:40/71) {
|
|
|
- select, textarea, input[type="text"], input[type="password"],
|
|
|
- input[type="datetime"], input[type="datetime-local"],
|
|
|
- input[type="date"], input[type="month"], input[type="time"],
|
|
|
- input[type="week"], input[type="number"], input[type="email"],
|
|
|
- input[type="url"]{ font-size:16px;}
|
|
|
-}
|
|
|
-
|
|
|
-/* Fix Input Zoom on iPhone 6, iPhone 6s, iPhone 7 */
|
|
|
-@media screen and (device-aspect-ratio:375/667) {
|
|
|
- select, textarea, input[type="text"], input[type="password"],
|
|
|
- input[type="datetime"], input[type="datetime-local"],
|
|
|
- input[type="date"], input[type="month"], input[type="time"],
|
|
|
- input[type="week"], input[type="number"], input[type="email"],
|
|
|
- input[type="url"]{ font-size:16px;}
|
|
|
-}
|
|
|
-
|
|
|
-/* Fix Input Zoom on iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus, iPhone 8, iPhone X, XS, XS Max */
|
|
|
-@media screen and (device-aspect-ratio:9/16) {
|
|
|
- select, textarea, input[type="text"], input[type="password"],
|
|
|
- input[type="datetime"], input[type="datetime-local"],
|
|
|
- input[type="date"], input[type="month"], input[type="time"],
|
|
|
- input[type="week"], input[type="number"], input[type="email"],
|
|
|
- input[type="url"]{ font-size:16px;}
|
|
|
+@import url("https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700"); @import url("https://fonts.googleapis.com/css?family=Roboto:400,300,500,700"); html,body {position:relative; height:100%;}
|
|
|
+html, body, header, div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, label, a, p, form, input, textarea, table, hr, span, em {margin:0; padding:0; box-sizing:border-box;}
|
|
|
+/* { } */
|
|
|
+body {overflow-x:hidden; font-family:"open sans", "Roboto", "Malgun Gothic", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size:12px; background-color:#f3f3f4;}
|
|
|
+h1, h2, h3, h4, h5, h6 {display:inline-block;}
|
|
|
+ul, ol {list-style:none;}
|
|
|
+ul::after, ol::after {display:block; clear:both; content:'';}
|
|
|
+img {vertical-align:middle; border-style:none;}
|
|
|
+a {text-decoration:none;}
|
|
|
+em, i {font-style:normal;}
|
|
|
+table {border-collapse:collapse;}
|
|
|
+th {text-align:inherit;}
|
|
|
+label {position:relative; margin-right:20px; display:inline-block; -webkit-touch-callout:none; -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;}
|
|
|
+label:last-child {margin-right:0 !important;}
|
|
|
+input,button,select,textarea {font-family:inherit; font-size:inherit;}
|
|
|
+input.btn-sm {padding:1px 6px;}
|
|
|
+input[type=text] {width:100%;}
|
|
|
+input[type=text], input[type=file], input[type=date], [type=password], textarea {padding:4px 3px 4px 5px; color:inherit; border-radius:1px; vertical-align:middle; margin:1px 3px 2px 0;}
|
|
|
+input[type=date],input[type=time],input[type=datetime-local],input[type=month] {-webkit-appearance:listbox;}
|
|
|
+input[readonly="readonly"], input[disabled="disabled"], input[readonly="readonly"]:before, input[disabled="disabled"]:before, select[readonly="readonly"], select[disabled="disabled"] {background-color:#eee !important;}
|
|
|
+button, select {text-transform:none;}
|
|
|
+button,[type=button],[type=reset],[type=submit] {margin:0; -webkit-appearance:button; border-radius:0; cursor:pointer; background-color:transparent; border-color:transparent;}
|
|
|
+button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner {padding:0; border-style:none;}
|
|
|
+textarea {overflow:auto; resize:vertical; width:100%; margin:4px 0; vertical-align:middle; line-height:22px; height:32px;}
|
|
|
+.textareaR2 {min-height:60px; line-height:26px;}
|
|
|
+.textareaR3 {min-height:96px; line-height:26px;}
|
|
|
+.textareaR4 {min-height:134px; line-height:26px;}
|
|
|
+.byteChk {line-height:20px; padding-left:20px; display:inline-block; vertical-align:middle;}
|
|
|
+select {margin:0 3px 1px 0; padding:3px 10px 3px 3px; color:inherit; border-radius:1px; vertical-align:middle;}
|
|
|
+select, input[type=text], input[type=file], input[type=date], input[type=password], textarea {border:1px solid #dbdbdb;}
|
|
|
+select:focus, input:focus, textarea:focus, button:focus, .outline {outline:2px auto #4D90FE;}
|
|
|
+.formControl {background:#eee;}
|
|
|
+.off {display:none !important;}
|
|
|
+.scrollOff {overflow:hidden;}
|
|
|
+.f25 {font-size:25px;}
|
|
|
+
|
|
|
+html,body,#wrapper,#container {min-height:100%; height:100%;}
|
|
|
+#wrapper {position:relative; min-width:1240px;}
|
|
|
+
|
|
|
+/* 로그인 --------------- */
|
|
|
+.loginBg {background:#f3f3f4;}
|
|
|
+.loginWrap {width:500px; box-shadow:0 7px 7px -5px rgba(0, 0, 0, 0.1);}
|
|
|
+.loginWrap .loginBox input[type=text],
|
|
|
+.loginWrap .loginBox input[type=password]{padding:10px; width:100%; border:1px solid #ced4da; border-radius:.25rem;}
|
|
|
+.loginWrap .loginBox li:nth-of-type(2), .loginBox li:nth-of-type(3) {padding-bottom:10px;}
|
|
|
+.loginWrap .loginBox li:nth-of-type(4) {padding:10px 0 50px 0; line-height:30px; text-align:left;}
|
|
|
+.loginWrap .loginBox li:nth-of-type(5) {margin-bottom:30px; text-align:center;}
|
|
|
+.loginWrap .loginBox a {display:inline-block; padding:10px;}
|
|
|
+.loginWrap .loginBox .dot {color:#ccc;}
|
|
|
+.loginWrap .btn-black {background-color:#555; color:#fff; font-weight:bold; float:right; margin:0 !important;}
|
|
|
+.loginWrap .btn-black:hover{background-color:#000; box-shadow:none;}
|
|
|
+.loginWrap .btn-purple {background-color:#667eea; color:#fff; font-weight:bold; float:right; margin:0 !important;}
|
|
|
+.loginWrap .btn-purple:hover{background-color:#2e38cb; box-shadow:none;}
|
|
|
+.loginWrap .loginInfo {color:#888; line-height:23px; text-align:left;}
|
|
|
+.loginWrap .loginInfo em i {margin-right:7px;}
|
|
|
+.loginWrap .loginInfo p:first-child{margin-bottom:15px;}
|
|
|
+.loginWrap .loginInfo p span {display:inline-block; margin-bottom:15px; line-height:40px; font-size:16px; font-weight:bold; border-bottom:1px solid #000;}
|
|
|
+
|
|
|
+/* 로그인 style :black */
|
|
|
+.login_black {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); -ms-transform:translate(-50%, -50%); background:#fff;}
|
|
|
+.login_black .logo { padding:25px 0; text-align:center; background:#000;}
|
|
|
+.login_black .loginInfo em {color:#555; font-weight:bold;}
|
|
|
+.login_black .loginCont > ul {padding:60px 60px 70px;}
|
|
|
+.login_black .loginBox li:nth-of-type(5) {border-top:1px solid #e4e4e4; border-bottom:1px solid #e4e4e4;}
|
|
|
+.login_black .loginBox a {color:#555}
|
|
|
+
|
|
|
+/* 보안 인증 */
|
|
|
+.loginWrap .certiFrm {padding:40px 60px 70px;}
|
|
|
+.loginWrap .certiFrm h2{margin:10px 0 30px;}
|
|
|
+.loginWrap .certiFrm h2 i{margin-right:10px;}
|
|
|
+.loginWrap .certiFrm .alertBox{margin-bottom:15px}
|
|
|
+.loginWrap .certiFrm .input{height:45px; position:relative;}
|
|
|
+.loginWrap .certiFrm .input input[type=text]{position:relative; padding:10px; width:45px; height:45px; line-height:45px; font-size:16px; border:1px solid #ced4da; border-radius:.25rem; text-align:center;}
|
|
|
+.loginWrap .certiFrm .input input[type=text]:focus{color:#4D90FE;font-weight:bold;}
|
|
|
+.loginWrap .certiFrm .input .countdown{display:inline-block; position:relative; padding-left:20px; line-height:45px; height:45px;color:red; text-align:center;vertical-align:top; font-size:14px}
|
|
|
+.loginWrap .certiFrm .info{margin-top:20px; line-height:22px; color:#555;}
|
|
|
+.loginWrap .certiFrm .button{margin:25px 0 50px;}
|
|
|
+.loginWrap .certiFrm .button button{margin:0 5px !important; padding:5px 20px; height:32px; float:right}
|
|
|
+.loginWrap .certiFrm .button button:focus{outline:2px auto #4D90FE !important; }
|
|
|
+.loginWrap .certiFrm .button .btn-black{width:100px !important;}
|
|
|
+
|
|
|
+/* 로그인 :alert */
|
|
|
+.alertBox {position:relative; padding:10px 40px 10px 10px; margin-bottom:10px; border:1px solid; border-radius:.25rem; line-height:22px;}
|
|
|
+.alertBox .alertClose {position:absolute; top:0; right:5px; padding:0 10px; height:40px; text-indent:-9999px; background:url('/image/btn_sltClose.png') no-repeat 50% 50%;}
|
|
|
+.alertBox .alertClose:hover {background:url('/image/btn_sltCloseOn.png') no-repeat 50% 50%;}
|
|
|
+.alert-success {color:#155724; background-color:#d4edda; border-color:#c3e6cb;}
|
|
|
+.alert-info {color:#0c5460; background-color:#d1ecf1; border-color:#bee5eb;}
|
|
|
+.alert-warning {color:#856404; background-color:#fff3cd; border-color:#ffeeba;}
|
|
|
+.alert-danger {color:#721c24; background-color:#f8d7da; border-color:#f5c6cb;}
|
|
|
+
|
|
|
+/* header--------------- */
|
|
|
+header {position:fixed; top:0; left:0; right:0; z-index:10; min-width:1240px; width:100%; height:60px; line-height:60px; color:#fff; background:linear-gradient(135deg,#667eea 0,#764ba2 100%);}
|
|
|
+header a, header button {color:#fff;}
|
|
|
+.header-logo {float:left; width:260px; line-height:60px; background:rgba(250, 251, 252, 0.1); overflow:hidden;}
|
|
|
+.header-logo a {display:inline-block; margin:0 10px 0 20px; width:184px; height:60px;}
|
|
|
+.header-logo .lnbClose {width:30px; line-height:30px; display:inline-block !important;}
|
|
|
+.header-logo .lnbClose:hover {color:rgba(255, 255, 255, 0.8);}
|
|
|
+.header-menu {position:absolute; left:260px; padding:0 0 0 30px; font-weight:bold;}
|
|
|
+.header-menu .menu {display:inline-block; -ms-user-select:none; -webkit-user-select:none; user-select:none;}
|
|
|
+.header-menu .menu a {display:inline-block; margin-right:7px; padding:0 14px; line-height:34px; border-radius:50px; background:rgba(0, 0, 0, 0.07);}
|
|
|
+.header-menu .menu a:hover {color:rgba(255, 255, 255, 0.8);}
|
|
|
+.header-menu .menu a.on {background:rgba(0, 0, 0, 0.3);}
|
|
|
+.header-info {display:inline-block; float:right; margin-right:20px;}
|
|
|
+.header-info a {color:rgba(255, 255, 255, 0.8);}
|
|
|
+.header-info a:hover {color:#fff;}
|
|
|
+.header-info i.heart {font-size:6px; color:rgba(255, 255, 255, 0.4); margin-right:3px;}
|
|
|
+.header-info i.dot {font-size:13px; color:rgba(255, 255, 255, 0.4); margin:0 3px;}
|
|
|
+.header-info-sm {display:none; float:right; margin-right:20px;}
|
|
|
+.header-info-sm a {display:inline-block; padding:0 7px; color:rgba(255, 255, 255, 0.8);}
|
|
|
+.header-info-sm a:hover {color:#fff;}
|
|
|
+
|
|
|
+/* GNB:툴팁--------------- */
|
|
|
+.tooltip .tooltiptext {visibility:hidden; position:absolute; top:48px; right:20px; z-index:1; padding:0 15px; line-height:30px; color:#fff; font-size:13px; text-align:center; background-color:#233646; border-radius:3px;}
|
|
|
+.tooltip .tooltiptext::after {content:""; position:absolute; bottom:100%; right:38px; border-width:5px; border-style:solid; border-color:transparent transparent #233646 transparent;}
|
|
|
+.tooltip .tooltiptext.logout::after {right:10px;}
|
|
|
+.tooltip:hover .tooltiptext {visibility:visible;}
|
|
|
+
|
|
|
+/* LNB--------------- */
|
|
|
+#lnb-wrapper {position:fixed; top:60px; left:-260px; width:260px; height:100%; vertical-align:top; overflow-y:auto; transition:left .3s; -webkit-transition:left .3s; background-color:#2f4050;}
|
|
|
+#lnb-wrapper:after{content:''; position:absolute; top:0; left:0; z-index:-1; width:100%; height:100%;}
|
|
|
+#lnb-wrapper.on {left:0;}
|
|
|
+#lnb {margin-bottom:100px; width:260px;}
|
|
|
+#lnb a {display:block; color:#a7b1c2;}
|
|
|
+#lnb a:hover {color:#fff;}
|
|
|
+#lnb a.on {color:#fff;}
|
|
|
+#lnb .dep2 {padding:14px 20px 14px 35px; background:url('/image/icon_dep2.png') 10px 50% no-repeat, url('/image/icon_depArr2.png') 222px 50% no-repeat; background-color:#233646; cursor:pointer;}
|
|
|
+#lnb .dep2.on {display:block; background:url('/image/icon_dep2On.png') 10px 50% no-repeat, url('/image/icon_depArr2On.png') 222px 50% no-repeat; background-color:#233646;}
|
|
|
+#lnb .dep3 {padding:5px 0 10px 10px; border-left:4px solid #8597eb; cursor:pointer;}
|
|
|
+#lnb .dep3 a {padding:10px; cursor:pointer;}
|
|
|
+#lnb .dep4 {padding:5px 0 10px 20px; cursor:pointer;}
|
|
|
+#lnb .dep4 a {padding:10px; cursor:pointer;}
|
|
|
+
|
|
|
+/* main--------------- */
|
|
|
+#main-wrapper {position:relative; left:0; top:0; margin-left:0; min-height:100%; padding-bottom:60px; vertical-align:top; color:#222; transition:margin-left .3s; -webkit-transition:margin-left .3s;}
|
|
|
+#main-wrapper.on {margin-left:260px;}
|
|
|
+#main {padding-top:60px; position:relative;}
|
|
|
+#main .main-title {height:60px; margin-left:20px; margin-right:20px;}
|
|
|
+#main .main-title h1 {padding-top:15px; font-size:20px; color:#333; font-weight:700;}
|
|
|
+#main .main-title ol {margin-top:25px; float:right; color:#666;}
|
|
|
+#main .main-title li {float:left;}
|
|
|
+#main .main-title li::before {padding:0 5px; content:"/"; color:#999;}
|
|
|
+#main .main-title li:nth-of-type(1)::before {content:none !important;}
|
|
|
+#main .main-title i {padding-right:3px; color:#999;}
|
|
|
+#main .sub-title {margin:0 20px 10px; font-size:14px; color:#6c7dda; font-weight:bold;}
|
|
|
+#main .sub-title i {margin-right:10px;}
|
|
|
+
|
|
|
+/* 패널영역 스타일--------------- */
|
|
|
+.panelStyle {position:relative; margin:0 20px 30px 20px; padding:15px 15px 0; background-color:#fff; border-top:2px solid #dfe2e3; box-shadow:0 7px 7px -5px rgba(0, 0, 0, 0.04);}
|
|
|
+.panelStyle::after, .frmStyle::after{position:relative; bottom:-5px; content:''; display:block; border:1px solid rgba(255,255,255,0);}
|
|
|
+.panelStyle .panelTitle {margin:-15px -15px 0; padding:0 20px; line-height:40px; border-bottom:1px solid #e7eaec;}
|
|
|
+.panelStyle .panelControl {position:absolute; top:0; right:15px; color:#c4c4c4;}
|
|
|
+.panelStyle .panelControl i {padding:10px 10px; cursor:pointer;}
|
|
|
+.panelStyle .panelContent {margin-top:10px;}
|
|
|
+.panelStyle h2 {margin-right:10px; font-size:14px; font-weight:bold;}
|
|
|
+.panelStyle h3 {margin-right:10px; font-size:12px; font-weight:normal; line-height:25px;}
|
|
|
+.panelStyle h3 i {padding-right:5px}
|
|
|
+.panelStyle h4 {padding-left:23px; height:31px; line-height:31px; background:url('/image/icon_h4.png') no-repeat 3px 50%; color:#666;}
|
|
|
+.panelStyle .panelBar {display:table; width:100%; padding-bottom:10px;}
|
|
|
+.panelStyle .panelBar h4 {margin-bottom:0;}
|
|
|
+.panelStyle .panelBar > li {display:table-cell;}
|
|
|
+.panelStyle .panelBar > .center {text-align:center;}
|
|
|
+.panelStyle .panelBar > .right {text-align:right;}
|
|
|
+
|
|
|
+/* 패널 내부 테이블 여러개 배치 */
|
|
|
+.panelStyle .division + .panelBar {padding-bottom:15px;}
|
|
|
+.panelStyle .division {display:table; width:100%;}
|
|
|
+.panelStyle .division > li, .panelStyle .division > div {display:table-cell; padding-right:40px;}
|
|
|
+.panelStyle .division > li:last-child, .panelStyle .division > div:last-child {padding-right:0;}
|
|
|
+/* table, grid, button 상하 여백 */
|
|
|
+.ag-theme-balham{margin-bottom:15px !important;}
|
|
|
+.frmStyle + .panelBar {padding-bottom:15px;}
|
|
|
+.ag-theme-balham {margin:10px 0 15px;}
|
|
|
+.ag-theme-balham + .panelBar{padding-bottom:15px;}
|
|
|
+.panelBar + .ag-theme-balham {margin:0 0 15px;}
|
|
|
+.panelBar + .frmStyle {margin-top:0;}
|
|
|
+
|
|
|
+/* TABS 영역 --------------- */
|
|
|
+.tabs {position:relative; margin-bottom:30px; margin-left:20px; margin-right:20px;}
|
|
|
+.tabs h2 {position:absolute; top:0; z-index:2; margin-left:10px; font-size:14px; line-height:34px;}
|
|
|
+.tabs h2 i {margin-right:12px;}
|
|
|
+.tabsNav {overflow:hidden; position:relative; top:0; z-index:2; padding:0 30px 0 20px; height:35px;}
|
|
|
+.tabsNav ul {display:inline-block;}
|
|
|
+.tabsNav li {float:left; position:relative;}
|
|
|
+.tabsNav li a {padding:0 20px; line-height:35px; height:35px; display:block; color:#888; font-weight:bold; background-color:#f9f9f9; border:1px solid #dfe2e3; border-bottom:2px solid #dfe2e3; border-top-left-radius:.25rem; border-top-right-radius:.25rem;}
|
|
|
+.tabsNav li.on a {background-color:#fff; color:#222; border:1px solid #ccc; border-bottom:2px solid #fff;}
|
|
|
+.tabsCont {position:relative; top:-2px; z-index:1;}
|
|
|
+.tabsCont::after {display:block}
|
|
|
+.tab {display:none;}
|
|
|
+.tab > .panelStyle{margin:0;}
|
|
|
+.tab.on {display:block;}
|
|
|
+.popupTabs {padding-top:10px;}
|
|
|
+.tabContArea {overflow-x:hidden; overflow-y:auto;}
|
|
|
+.tabBtnArea {padding:15px 0 20px 0;}
|
|
|
+.popup .tabsCont {box-shadow:none;}
|
|
|
+.popup .tabs {margin-bottom:0;}
|
|
|
+
|
|
|
+/* Add TABS 영역 --------------- */
|
|
|
+.btn-add-tab {position:absolute; top:5px; right:0; z-index:2; padding:0 10px;}
|
|
|
+.tabsNav .ui-tabs-active a {background-color:#fff; color:#222; border:1px solid #ccc; border-bottom:2px solid #fff;}
|
|
|
+.tab-del {position:absolute; top:1px; right:1px; padding:4px 6px; color:gray; cursor:pointer; border-top-right-radius:.25rem;}
|
|
|
+.tab-del:hover {color:#f40552;}
|
|
|
+a, button, .ui-state-active, .ui-state-focus, .ui-state-hover {outline:0 !important;}
|
|
|
+.tabsNav .ui-corner-top a {padding:0 35px 0 20px}
|
|
|
+
|
|
|
+/* tabsJr 영역 --------------- */
|
|
|
+.tabsJr {position:relative;}
|
|
|
+.tabsJrNav {overflow:hidden; position:relative; top:0; z-index:2; height:31px; margin:0 30px 0 20px;}
|
|
|
+.tabsJrNav > ul {display:inline-block;}
|
|
|
+.tabsJrNav li {float:left;}
|
|
|
+.tabsJrNav li a {padding:0 20px; line-height:30px; height:30px; display:block; color:#888; /*font-weight:bold; */ background-color:#f9f9f9; border:1px solid #ccc; border-top-left-radius:.25rem; border-top-right-radius:.25rem;}
|
|
|
+.tabsJrNav li.on a {padding-bottom:2px; font-weight:bold; color:#555; background-color:#fff; border-top:1px solid #ccc; border-right:1px solid #ccc; border-bottom:1px solid #fff;}
|
|
|
+.tabsJrCont {position:relative; top:-2px; z-index:1;}
|
|
|
+.tabsJrCont::after {display:block}
|
|
|
+.tabJr {display:none;}
|
|
|
+.tabJr .panelStyle{margin:0; border-top:1px solid #ddd; min-height:20px; padding:20px 15px 0; box-shadow:0 -5px 7px -5px rgba(0, 0, 0, 0.05);}
|
|
|
+.tabJr.on {display:block;}
|
|
|
+.tabJrContArea {vertical-align:middle;}
|
|
|
+
|
|
|
+/* modal, modeless popup --------------- */
|
|
|
+.modalPopup{display:none; position:fixed; left:0; top:0; z-index:11; width:100%; height:100%; background:rgba(0,0,0,0.5);}
|
|
|
+.modalPopup > .panelStyle{position:absolute; top:50%; left:50%; z-index:11; -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); margin:0; border:1px solid #79797a; border-radius:3px;}
|
|
|
+.modalPopup > .panelStyle .close {position:absolute; top:0; right:0; font-size:18px; padding:5px 15px 8px;}
|
|
|
+.modalPopup .tabs{ margin:0;}
|
|
|
+.modalPopup .tabs .panelStyle{box-shadow:none}
|
|
|
+.modalPopup .tab > .panelStyle{overflow-y:auto;}
|
|
|
+
|
|
|
+/*MODELESS POPUP --------------- */
|
|
|
+.modelessPopup{display:none; position:absolute; z-index:11; top:50%; left:50%;}
|
|
|
+.modelessPopup.draggable {cursor:move;}
|
|
|
+.modelessPopup .panelStyle{margin:0; border:1px solid #ccc; border-radius:3px;}
|
|
|
+.modelessPopup .panelStyle .close {position:absolute; top:0; right:0; font-size:18px; padding:5px 15px 8px;}
|
|
|
+.modelessPopup .tabs{ margin:0;}
|
|
|
+.modelessPopup .tabs .panelStyle{box-shadow:none}
|
|
|
+.modelessPopup .tab > .panelStyle{overflow-y:auto;}
|
|
|
+
|
|
|
+/*VIDEO POPUP --------------- */
|
|
|
+.videoPopup {display:none; position:fixed; top:50%; left:50%; z-index:11; -ms-transform:translate(-50%, -50%); transform:translate(-50%, -50%); margin:0; border:1px solid #79797a; border-radius:3px;}
|
|
|
+.modalPopup::before{position:fixed; left:0; top:0; z-index:11; width:100%; height:100%; background:rgba(0,0,0,0.5);}
|
|
|
+.videoPopup .close {position:absolute; top:-20px; right:-20px; z-index:1; width:40px; height:40px; line-height:20px; font-size:20px; border:1px solid #666; border-radius:50px; background-color:#fff;}
|
|
|
+.videoPopup iframe{width:100%; height:100%}
|
|
|
+
|
|
|
+
|
|
|
+#btnTop {display:none; position:fixed; right:0; bottom:50px; width:40px; line-height:10px; font-size:10px; background:#fff; border:1px solid #ddd; border-right:none; padding:3px 0 5px 0; box-shadow:5px 5px 5px -4px rgba(0, 0, 0, 0.07); color:#1c84c6;}
|
|
|
+#btnTop i {width:100%; font-size:12px;}
|
|
|
+#btnTop:hover {padding-right:30px; width:70px; font-weight:bold;}
|
|
|
+
|
|
|
+
|
|
|
+/* 컨텐트 스크롤--------------- */
|
|
|
+.xScroll {overflow-x:auto;}
|
|
|
+.yScroll {overflow-y:auto;}
|
|
|
+
|
|
|
+/* 폼테이블 스타일 --------------- */
|
|
|
+.frmStyle {width:100%; margin-bottom:15px;}
|
|
|
+.frmStyle th {border-top:1px solid #dae0fd;}
|
|
|
+.frmStyle tr:last-child th {border-bottom:1px solid #dae0fd;}
|
|
|
+.frmStyle tr:last-child td {border-bottom:1px solid #eee;}
|
|
|
+.frmStyle th {padding:0 15px; height:36px; line-height:24px; white-space:nowrap; text-align:center; background:#e9ecfb;}
|
|
|
+.frmStyle td {padding:0 10px 0 10px; line-height:36px; position:relative; border-top:1px solid #eee; border-right:1px solid #eee;}
|
|
|
+
|
|
|
+/* 체크박스&라디오박스 공통--------------- */
|
|
|
+input[type=radio] {position:absolute; top:50%; left:0; width:18px; height:18px; transform:translate(0,-50%); -ms-transform:translate(0,-50%);}
|
|
|
+label.chkBox, label.rdoBtn {position:relative; display:inline-block; padding-left:26px; height:22px; line-height:22px; vertical-align:middle; cursor:pointer;}
|
|
|
+/* 체크박스 :전체선택 버튼--------------- */
|
|
|
+input[type=checkbox] {position:absolute; top:0; left:0; width:0; height:0;}
|
|
|
+input[type=button].chkBox {margin-left:-2px; padding-left:24px; height:22px; vertical-align:middle; background:url('/image/icon_checkN.png') no-repeat 0 50%;}
|
|
|
+
|
|
|
+/* 체크박스--------------- */
|
|
|
+label.chkBox::before {position:absolute; top:2px; left:0; content:''; width:16px; height:16px; border:1px solid #dbdbdb; background:#fff;}
|
|
|
+label.chkBox.checked::after {position:absolute; top:6px; left:3px; content:''; width:8px; height:4px; border-bottom:3px solid #676a6c; border-left:3px solid #676a6c; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
|
|
|
+label.chkBox .formControl::before {background:#eee;}
|
|
|
+
|
|
|
+/* 라디오버튼--------------- */
|
|
|
+input[type=radio]::before {position:absolute; top:0; left:0; content:''; width:16px; height:16px; border:1px solid #dbdbdb; border-radius:50%; background:#fff;}
|
|
|
+input[type=radio]:checked::after {position:absolute; top:5px; left:5px; content:''; width:8px; height:8px; border-radius:50%; background:#676a6c;}
|
|
|
+input[type=radio].formControl::before {background:#eee;}
|
|
|
+
|
|
|
+/* 토글 스위치--------------- */
|
|
|
+.switchBox{ display:inline-block;position:relative; width:60px; height:28px; vertical-align:middle;border-radius:25px;overflow:hidden;}
|
|
|
+.switchBox input[type="checkbox"]{position:absolute;visibility:hidden;}
|
|
|
+.switchBox label{display:block;position:absolute;top:0;width:60px;height:28px;background-color:#aaa;transition-duration:0.2s;}
|
|
|
+.switchBox label span{position:absolute;left:0;top:50%;z-index:1;width:26px;height:23px;border-radius:25px;transform:translate(3px, -50%);transition-duration:0.2s;background-color:#fff;text-indent:-9999px;}
|
|
|
+.switchBox label:before,label:after{position:absolute;top:0;width:52%;font-size:11px;line-height:27px;color:#fff;text-align:center;}
|
|
|
+.switchBox label:before{left:0;content:'ON';}
|
|
|
+.switchBox label:after{right:0;content:'OFF';}
|
|
|
+.switchBox input:checked + label span{transform:translate(31px, -50%);}
|
|
|
+.switchBox input:checked::before, .switchBox input:checked::after{border:none}
|
|
|
+.switch-base input:checked + label{color:#fff; background-color:#8597eb;}
|
|
|
+.switch-primary input:checked + label{color:#fff; background-color:#1ab394;}
|
|
|
+.switch-success input:checked + label{color:#fff; background-color:#1c84c6;}
|
|
|
+.switch-info input:checked + label{color:#fff; background-color:#23c6c8; }
|
|
|
+.switch-warning input:checked + label{color:#fff; background-color:#f8ac59;}
|
|
|
+.switch-danger input:checked + label{color:#fff; background-color:#ed5565;}
|
|
|
+.switch-black input:checked + label{color:#fff; background-color:#222;}
|
|
|
+.switchBox + .switchBox {margin-left:6px;}
|
|
|
+
|
|
|
+/* 테이블 스타일--------------- */
|
|
|
+.tableStyle {width:100%; max-width:100%; margin-bottom:15px;}
|
|
|
+.tableStyle th {position:relative; padding:7px 0; color:#333; border-top:1px solid #dae0fd; border-bottom:1px solid #dae0fd; border-right:1px solid #dae0fd; background-color:#e9ecfb; text-align:center;}
|
|
|
+.tableStyle th:last-child {border-right:none;}
|
|
|
+.tableStyle td {position:relative; padding:7px 0; border-right:1px solid #ebebeb; border-bottom:1px solid #ebebeb; text-align:center;}
|
|
|
+.tableStyle td:last-child {border-right:none;}
|
|
|
+.tableStyle tbody tr:nth-of-type(2n) {background-color:rgba(0, 0, 0, 0.02);}
|
|
|
+.tableStyle tbody tr:hover {background-color:rgba(224,243,255,0.6);}
|
|
|
+.tableStyle + .panelBar {padding-bottom:15px;}
|
|
|
+/* 스캔 */
|
|
|
+.scanTbl th {font-size:25px; line-height:80px;}
|
|
|
+.scanTbl td {line-height:80px;}
|
|
|
+.scanTbl input[type=text] {line-height:50px; font-size:32px;}
|
|
|
+.scanTbl .btn {overflow-y:hidden; margin-bottom:1px; padding:12px 30px; font-size:25px;}
|
|
|
+table.noPad tr > td, td.noPad {padding:0 !important;}
|
|
|
+th[rowspan] {border-bottom:1px solid #dae0fd;}
|
|
|
+td[rowspan] {border-bottom:1px solid #eee;}
|
|
|
+.nowrap {white-space:nowrap;}
|
|
|
+.solidR {border-right:1px solid #eee; vertical-align:middle;}
|
|
|
+.solidL {border-left:1px solid #eee; vertical-align:middle;}
|
|
|
+.solidT {border-top:1px solid #eee;}
|
|
|
+.solidB {border-bottom:1px solid #eee;}
|
|
|
+.dashR {border-right:1px solid #dae0fd;}
|
|
|
+.dashL {border-left:1px solid #dae0fd;}
|
|
|
+.noPad table.frmStyle > tr:first-child th {border-top:0 !important;}
|
|
|
+.noPad table.frmStyle > tr:first-child td {border-top:0 !important;}
|
|
|
+.noPad table.frmStyle > tr:last-child th {border-bottom:0 !important;}
|
|
|
+.noPad table.frmStyle > tr:last-child td {border-bottom:0 !important;}
|
|
|
+
|
|
|
+
|
|
|
+/* Q&A 스타일--------------- */
|
|
|
+.qnaStyle {width:100%; max-width:100%;}
|
|
|
+.qnaStyle th {position:relative; padding:7px 0; color:#333; border-top:1px solid #dae0fd; border-bottom:1px solid #dae0fd; border-right:1px solid #dae0fd; background-color:#e9ecfb; text-align:center;}
|
|
|
+.qnaStyle th:last-child {border-right:none;}
|
|
|
+.qnaStyle td {position:relative; padding:7px 0; text-align:center;}
|
|
|
+.qnaStyle tr td {border-bottom:1px solid #ecf5f7;}
|
|
|
+.qnaStyle tbody tr:nth-of-type(3n+1) td {background-color:rgba(224,243,255,0.6);}
|
|
|
+.qnaStyle tbody tr:nth-of-type(3n) td {border-bottom:1px solid #ddd;}
|
|
|
+.qnaClaim { text-align:left !important; padding-left:10px !important;}
|
|
|
+.qnaClaim .goods {font-weight:bold; line-height:26px;}
|
|
|
+.qnaClaim .cont {line-height:22px; padding:10px 0; color:#1d3e9d;}
|
|
|
+.qnaClaim .email {line-height:26px;}
|
|
|
+.qnaClaim .email em {border-bottom:1px solid #aaa;}
|
|
|
+.lineRound {border:2px solid #ccc; border-radius:15px; padding:4px 14px; font-weight:bold;}
|
|
|
+
|
|
|
+/* 내부 테이블 디자인 */
|
|
|
+.subTable {display:table; width:100%;}
|
|
|
+.subTable dl {display:table; width:100%;}
|
|
|
+.subTable dt, .subTable dd {display:table-cell;}
|
|
|
+.subTable dt {vertical-align:middle; white-space:nowrap; width:8%; padding:0 15px; background:#e9ecfb; text-align:center; border-bottom:1px solid #dae0fd;}
|
|
|
+.subTable dl:last-child dt {border-bottom:none;}
|
|
|
+.subTable dd {border-bottom:1px solid #eee; padding:3px 20px 3px 10px;}
|
|
|
+.subTable dl:last-child dd {border-bottom:none;}
|
|
|
+
|
|
|
+/* button --------------- */
|
|
|
+.btn {border-radius:3px; vertical-align:middle; white-space:nowrap;font-size:12px;user-select:none;}
|
|
|
+.btn-lg {padding:4px 20px 5px; height:28px; overflow-y:hidden;}
|
|
|
+.btn-sm {margin-top:-2px; line-height:100%; height:28px; overflow-y:hidden;}
|
|
|
+.btn-ssm {margin-top:-2px; line-height:100%; height:22px; overflow-y:hidden;}
|
|
|
+.btn + .btn {margin-left:6px;}
|
|
|
+.btn:first-child {margin-left:0;}
|
|
|
+
|
|
|
+/* 버튼 색상 */
|
|
|
+.btn-white {color:#555 !important; background-color:#fff !important; border:1px solid #ccc !important;}
|
|
|
+.btn-default {color:#555; background-color:#eee; border:1px solid #dcdcdc;}
|
|
|
+.btn-gray {color:#fff; background-color:#aaa; border:1px solid #aaa;}
|
|
|
+.btn-base {color:#fff; background-color:#8597eb; border:1px solid #8597eb;}
|
|
|
+.btn-primary {color:#fff; background-color:#1ab394; border:1px solid #1ab394;}
|
|
|
+.btn-success {color:#fff; background-color:#1c84c6; border:1px solid #1c84c6;}
|
|
|
+.btn-info {color:#fff; background-color:#23c6c8; border:1px solid #23c6c8;}
|
|
|
+.btn-pink {color:#fff; background-color:#feada6; border:1px solid #feada6;}
|
|
|
+.btn-warning {color:#fff; background-color:#f8ac59; border:1px solid #f8ac59;}
|
|
|
+.btn-danger {color:#fff; background-color:#ed5565; border:1px solid #ed5565;}
|
|
|
+.btn-dark {color:#fff; background-color:#6c757d; border:1px solid #6c757d;}
|
|
|
+.btn.icn {line-height:28px; height:28px; padding:0 8px; background-color:#eee; border:1px solid #dbdbdb;}
|
|
|
+.btn.icn i {padding-top:6px; width:12px; vertical-align:top; font-size:14px; text-align:center;}
|
|
|
+
|
|
|
+/* 페이징 --------------- */
|
|
|
+.tablePaging {position:relative; display:inline-block; vertical-align:middle;}
|
|
|
+.tablePaging a {display:inline-block; float:left; margin:0 5px; width:28px; height:28px; line-height:28px; text-align:center; border:1px solid #ccc; border-radius:50px; cursor:pointer;}
|
|
|
+.tablePaging a.arrow {background-color:rgba(0, 0, 0, 0.03); border-color:#ebebeb;}
|
|
|
+.tablePaging .num.on {background:#8597eb; color:#fff; border-color:#8597eb;}
|
|
|
+
|
|
|
+/* 다중 Select Box */
|
|
|
+.mSelectWrap select {display:none;}
|
|
|
+.mSelectBox {display:inline-block; position:relative; top:-1px; margin:2px 0 2px 0; padding:0 7px 0 0; width:100%; height:auto !important; min-height:29px; border:1px solid #e5e6e7; vertical-align:middle;}
|
|
|
+.mSelected {overflow:auto;}
|
|
|
+.mSelected li {float:left; margin:2px 5px 3px; line-height:24px; padding:0 7px; background:#dbedf9; -ms-user-select:none; -moz-user-select:-moz-none; -webkit-user-select:none; user-select:none;}
|
|
|
+.mSelected li.srchFld {margin:0; padding:0; background:none;}
|
|
|
+.mSelected .srchFld input {width:25px; margin:0; padding:0; border:none; outline:none;}
|
|
|
+.mSelected a {border:none !important; float:right; margin-left:3px; padding:0 3px; width:15px; line-height:22px; text-indent:-9999px; background:url('/image/btn_sltClose.png') no-repeat 100% 50%;}
|
|
|
+.mSelected a:hover {background:url('/image/btn_sltCloseOn.png') no-repeat 100% 50%;}
|
|
|
+.mSelecting {display:none; overflow-y:auto; overflow-x:hidden; position:absolute; top:100%; left:-1px; z-index:1; width:100%; max-height:156px; line-height:30px; border:1px solid #e5e6e7; background:#fff;}
|
|
|
+.mSelecting li {margin:0 10px; cursor:pointer;}
|
|
|
+
|
|
|
+/* 멀티 Select Box */
|
|
|
+.mSelWrap {display:inline-block;}
|
|
|
+.mSelWrap select {height:100px; padding:7px 0;}
|
|
|
+.mSelWrap .mSelBtn {margin:0 0 0 5px; float:right; width:33px; vertical-align:top;}
|
|
|
+.mSelWrap .mSelBtn .btn {margin:0; vertical-align:top;}
|
|
|
+.mSelWrap option {padding:4px 100px 4px 10px;}
|
|
|
+
|
|
|
+/* 파일첨부 --------------- */
|
|
|
+.uFile {overflow:hidden; position:relative; display:inline-block; margin:-2px 5px 0 0; width:80%; height:28px; vertical-align:middle; border:1px solid #dbdbdb;}
|
|
|
+.lrStyle .uFile {margin-top:2px;}
|
|
|
+.uFileInput {position:absolute; top:0; width:100%; margin:0 !important; padding:0 !important; line-height:28px; border:none !important;}
|
|
|
+.uFileLabel {position:absolute; top:0; right:0; left:0; z-index:1; margin:0; padding:0 7px; width:cals(100% - 7px); line-height:28px; height:28px; background-color:#fff; border-radius:1px; overflow:hidden; white-space:nowrap;}
|
|
|
+.uFileLabel::after {position:absolute; top:0; right:0; bottom:0; width:30px; z-index:3; line-height:28px; content:" "; border-left:1px solid #dbdbdb; background:#eee url('/image/icon_upload.png') no-repeat 50% 50%;}
|
|
|
+
|
|
|
+/* badge --------------- */
|
|
|
+.badge {float:right; margin-top:2px; padding:0 5px; min-width:9px; line-height:18px; color:#fff; font-size:12px; font-weight:600; border-radius:3px; text-align:center; text-shadow:1px 1px 1px rgba(0,0,0,0.4); letter-spacing:-0.5px;}
|
|
|
+.badge-warning {background-color:#ed7908;}
|
|
|
+.badge-primary {background-color:#1ab394;}
|
|
|
+.badge-danger {background-color:#ed5565;}
|
|
|
+.badge-success {background-color:#2fa4e7;}
|
|
|
+.badge-info {background-color:#23c6c8;}
|
|
|
+.badge.circle {border-radius:50px;}
|
|
|
+.dep3 .badge {position:relative; top:-28px; right:20px;}
|
|
|
+
|
|
|
+/* tag */
|
|
|
+.tagNum {display:inline-block; margin-left:5px; padding:0 3px 0 2px; min-width:13px; line-height:16px; font-weight:normal; color:#fc5555; background:#fff; border-radius:5px;}
|
|
|
+
|
|
|
+/* footer --------------- */
|
|
|
+footer {position:absolute; bottom:0; left:0; width:100%; height:40px; background-color:#fff; border-top:1px solid #e7eaec; line-height:39px; font-size:13px;}
|
|
|
+footer .f-left {float:left; padding-left:20px; line-height:38px;}
|
|
|
+footer .f-right {float:right; padding-right:20px; line-height:38px;}
|
|
|
+
|
|
|
+/* 이미지 카드 */
|
|
|
+.dexterArea {min-width:350px; min-height:180px; padding:0 !important; vertical-align:top; background:#f1f1f1; vertical-align:top;}
|
|
|
+.dexterTable {display:table; width:100%; overflow-y:auto;}
|
|
|
+.dexterTable > li {display:table-cell; vertical-align:top; line-height:30px;}
|
|
|
+.dexterNo div {padding:0 10px; border-top:1px solid #ddd; border-right:1px solid #ddd; background:#fff;}
|
|
|
+.dexterNo div:first-child {margin-top:36px;}
|
|
|
+.dexterNo div:last-child {border-bottom:1px solid #ddd;}
|
|
|
+
|
|
|
+/* 수정용 이미지 카드 */
|
|
|
+.cardArea {width:100%; padding:0 0 20px; overflow-y:auto;}
|
|
|
+.imgCard {vertical-align:top; position:relative; display:inline-block; margin:20px 20px 0 0; padding:10px 10px 0 10px; border:1px solid #dbdbdb;}
|
|
|
+.imgCard ul {display:table;}
|
|
|
+.imgCard li {display:table-cell;}
|
|
|
+.imgCard img {margin-right:15px;}
|
|
|
+.imgCard li:nth-of-type(2) {padding-top:20px; max-width:150px; line-height:24px}
|
|
|
+.imgCard p {font-size:12px;}
|
|
|
+.imgCard .cardClose {position:absolute; top:0; right:0; width:24px; background:url('/image/btn_sltClose.png') no-repeat 50% 50%; text-indent:-9999px;}
|
|
|
+.imgCard .cardClose:hover {background:#f1f1f1 url('/image/btn_sltCloseOn.png') no-repeat 50% 50%;}
|
|
|
+.verticalTop {vertical-align:top;}
|
|
|
+
|
|
|
+/* 조회용 이미지 카드 */
|
|
|
+.cardArea2 {padding:10px 0;}
|
|
|
+.cardArea2 ul, .cardArea2 .box {vertical-align:top; position:relative; display:inline-block; margin:10px; border:1px solid #dbdbdb; max-width:300px;}
|
|
|
+.cardArea2 li {display:table-cell; line-height:26px; vertical-align:middle;}
|
|
|
+.cardArea2 li:nth-of-type(2) {padding:0 10px;}
|
|
|
+.cardArea2 .cardDel {position:absolute; top:0; right:0; background:url('/image/btn_sltClose.png') no-repeat 50% 50%; text-indent:-9999px;}
|
|
|
+.cardArea2 .cardDel:hover {background:#f1f1f1 url('/image/btn_sltCloseOn.png') no-repeat 50% 50%;}
|
|
|
+
|
|
|
+/* 테이블 외부 안내문구 */
|
|
|
+.panelStyle > .notice {margin:0 0 15px ;}
|
|
|
+.panelContent > .notice {margin:15px 0;}
|
|
|
+.notice em {color:red;}
|
|
|
+.notice li, p.dot {padding-left:20px; background:url('/image/dot_bk.png') no-repeat 5px 10px; line-height:24px;}
|
|
|
+p.dot .btn {margin-left:10px !important;}
|
|
|
+p.dot em {color:red;}
|
|
|
+
|
|
|
+/* 정렬 */
|
|
|
+.txt {line-height:36px;}
|
|
|
+.aC {text-align:center !important;}
|
|
|
+.aR {text-align:right !important;}
|
|
|
+.aL {text-align:left !important;}
|
|
|
+.vaT {vertical-align:top !important;}
|
|
|
+.vaM {vertical-align:middle !important;}
|
|
|
+.vaB {vertical-align:bottom !important;}
|
|
|
+
|
|
|
+/* 테이블 내부 안내문구 */
|
|
|
+.infoTxt {line-height:26px; padding:5px 0;}
|
|
|
+.infoTxt i {margin-right:7px;}
|
|
|
+.infoTxt em {color:red;}
|
|
|
+.infoTxtTh {display:inline-block; text-align:left; font-weight:normal; font-size:12px;}
|
|
|
+.infoTxtTh li {padding-top:3px;}
|
|
|
+.infoTxtTh i {padding-right:5px;}
|
|
|
+.srchOption {overflow:auto; padding:10px 0; line-height:36px;}
|
|
|
+
|
|
|
+/* 유의사항 안내 */
|
|
|
+.infoBox {margin:0 20px 20px; padding:7px 10px; border-top:2px solid #dfe2e3; border-bottom:2px solid #dfe2e3; background:#fff}
|
|
|
+.infoBox p {padding-left:25px; line-height:20px; font-size:12px; background:url('/image/dot_bk.png') no-repeat 10px 50%; background-size:3px auto;}
|
|
|
+
|
|
|
+/* 검색결과 안내문 */
|
|
|
+.srchNotice {padding-bottom:7px; font-weight:normal; font-size:14px;}
|
|
|
+.srchNotice em {color:red;}
|
|
|
+
|
|
|
+/* 필수입력항목 */
|
|
|
+.required {display:inline-block; position:relative; top:-3px; width:12px; height:7px; background:url('/image/icon_required.png') no-repeat 0 50%;}
|
|
|
+
|
|
|
+
|
|
|
+/* COLOR DESIGN -------------------------------------*/
|
|
|
+/*Color :Base ---*/
|
|
|
+.color-mPurple header,span.color-mPurple {background:linear-gradient(135deg,#667eea 0,#764ba2 100%) !important;}
|
|
|
+.color-purple header,span.color-purple {background:#667eea !important;}
|
|
|
+
|
|
|
+/*Color :Gray ---*/
|
|
|
+.color-mGray header,span.color-mGray {background:linear-gradient(to right,#6c757d 0%,#555 100%) !important;}
|
|
|
+.color-gray header,span.color-gray {background:#666 !important;}
|
|
|
+.color-mGray .frmStyle th,.color-mGray .tableStyle th,.color-gray .frmStyle th,.color-gray .tableStyle th {background:#eee !important; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
|
|
|
+.color-mGray .tablePaging .num.on,.color-gray .tablePaging .num.on {background:#888 !important; border-color:#888 !important;}
|
|
|
+.color-mGray #lnb .dep3,.color-gray #lnb .dep3 {border-color:#777 !important;}
|
|
|
+.color-mGray .tabsJrNav li.on a,.color-gray .tabsJrNav li.on a {color:#333;}
|
|
|
+
|
|
|
+/*Color :Blue ---*/
|
|
|
+.color-mBlue header,span.color-mBlue {background:linear-gradient(to right,#4481eb 0%,#04befe 100%) !important;}
|
|
|
+.color-blue header,span.color-blue {background:#0042a5 !important;}
|
|
|
+.color-mBlue .frmStyle th,.color-mBlue .tableStyle th,.color-blue .frmStyle th,.color-blue .tableStyle th {background:#d8eafc !important; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
|
|
|
+.color-mBlue .tablePaging .num.on,.color-blue .tablePaging .num.on {background:#3e91de !important; border-color:#3e91de !important;}
|
|
|
+.color-mBlue #lnb .dep3,.color-blue #lnb .dep3 {border-color:#3e91de !important;}
|
|
|
+.color-mBlue .tabsJrNav li.on a,.color-blue .tabsJrNav li.on a {background:#d8eafc;}
|
|
|
+.color-mBlue .tabJr.on,.color-blue .tabJr.on {border-top:4px solid #d8eafc;}
|
|
|
+.color-mBlue .tabsJrNav li.on a,.color-blue .tabsJrNav li.on a {color:#333;}
|
|
|
+
|
|
|
+/*Color :Green ---*/
|
|
|
+.color-mGreen header,span.color-mGreen {background:linear-gradient(135deg,#00b09b 0,#96c93d 100%) !important;}
|
|
|
+.color-green header,span.color-green {background:#00b09b !important;}
|
|
|
+.color-mGreen .frmStyle th,.color-mGreen .tableStyle th,.color-green .frmStyle th,.color-green .tableStyle th {background:#e5f7f5 !important; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
|
|
|
+.color-mGreen .tablePaging .num.on,.color-green .tablePaging .num.on {background:rgba(0,176,155,0.8); border-color:rgba(0,176,155,0.8) !important;}
|
|
|
+.color-mGreen #lnb .dep3,.color-green #lnb .dep3 {border-color:#00b09b !important;}
|
|
|
+.color-mGreen .tabsJrNav li.on a,.color-green .tabsJrNav li.on a {background:#e5f7f5;}
|
|
|
+.color-mGreen .tabJr.on,.color-green .tabJr.on {border-top:4px solid #e5f7f5;}
|
|
|
+.color-mGreen .tabsJrNav li.on a,.color-green .tabsJrNav li.on a {color:#333;}
|
|
|
+
|
|
|
+/*Color :Pink ---*/
|
|
|
+.color-mPink header,span.color-mPink {background:linear-gradient(to right, rgb(242, 112, 156), rgb(255, 148, 114)) !important;}
|
|
|
+.color-pink header,span.color-pink {background:#feada6 !important;}
|
|
|
+.color-mPink .frmStyle th,.color-mPink .tableStyle th,.color-pink .frmStyle th,.color-pink .tableStyle th {background:#fff7f6 !important; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
|
|
|
+.color-mPink .tablePaging .num.on,.color-pink .tablePaging .num.on {background:#feada6; border-color:#feada6 !important;}
|
|
|
+.color-mPink #lnb .dep3,.color-pink #lnb .dep3 {border-color:#feada6 !important;}
|
|
|
+.color-mPink .tabsJrNav li.on a,.color-pink .tabsJrNav li.on a {background:#fff7f6;}
|
|
|
+.color-mPink .tabJr.on,.color-pink .tabJr.on {border-top:4px solid #fff7f6;}
|
|
|
+.color-mPink .tabsJrNav li.on a,
|
|
|
+.color-pink .tabsJrNav li.on a {color:#333;}
|
|
|
+
|
|
|
+/*Color :black ---*/
|
|
|
+.color-black header, span.color-black{background:#3E3E3E !important;}
|
|
|
+.color-black .header-logo{background:#000 !important;}
|
|
|
+.color-black .header-menu .menu a{background:#000 !important;}
|
|
|
+.color-black .header-menu .menu a.on{background:#fff !important; color:#000 !important;}
|
|
|
+.color-black #lnb-wrapper{background-color:#b2b2b2 !important;}
|
|
|
+.color-black #lnb .dep2{background-color:#545454 !important;}
|
|
|
+.color-black #lnb .dep3{border-color:#000 !important;}
|
|
|
+.color-black #lnb .dep3{background:#fdfdfd !important; }
|
|
|
+.color-black #lnb .dep3 a{color:#111111 !important;}
|
|
|
+.color-black #lnb a{color:#fff !important;}
|
|
|
+.color-black .frmStyle th, .color-black .tableStyle th, .color-black .frmStyle th, .color-black .tableStyle th{background:#eee !important; border-top:1px solid #ddd; border-bottom:1px solid #ddd;}
|
|
|
+.color-black .tablePaging .num.on, .color-black .tablePaging .num.on{background:#888 !important; border-color:#888 !important;}
|
|
|
+.color-black .tabsJrNav li.on a, .color-black .tabsJrNav li.on a{color:#333; background:#eee !important}
|
|
|
+.color-black .tabJr.on, .color-black .tabJr.on { border-top:4px solid #eee;}
|
|
|
+
|
|
|
+/* 폰트 컬러, 폰트 두께 */
|
|
|
+.cBlue {color:#127fdc !important;}
|
|
|
+.cGray {color:#666 !important;}
|
|
|
+.cRed {color:red !important;}
|
|
|
+.bold {font-weight:bold !important;}
|
|
|
+
|
|
|
+/* 배경 투명도 */
|
|
|
+.bgOp6 {opacity:0.6; color:#000 !important;}
|
|
|
+
|
|
|
+/* 여백 지정 */
|
|
|
+hr {border:0; padding-bottom:10px;}/* 기본 여백 :10px */
|
|
|
+.pad10 {padding:10px 0 !important;}
|
|
|
+.pad15 {padding:15px 0 !important;}
|
|
|
+.pad20 {padding:20px 0 !important;}
|
|
|
+.padT3 {padding-top:3px !important;}
|
|
|
+.padT5 {padding-top:5px !important;}
|
|
|
+.padT10 {padding-top:10px !important;}
|
|
|
+.padT15 {padding-top:15px !important;}
|
|
|
+.padT20 {padding-top:20px !important;}
|
|
|
+.padT30 {padding-top:30px !important;}
|
|
|
+.padT40 {padding-top:40px !important;}
|
|
|
+.padR20 {padding-right:20px !important;}
|
|
|
+.padL10 {padding-left:10px !important;}
|
|
|
+.padB5 {padding-bottom:5px !important;}
|
|
|
+.padB10 {padding-bottom:10px !important;}
|
|
|
+.padB15 {padding-bottom:15px !important;}
|
|
|
+.padB20 {padding-bottom:20px !important;}
|
|
|
+.padB30 {padding-bottom:30px !important;}
|
|
|
+.padB40 {padding-bottom:40px !important;}
|
|
|
+.marT5 {margin-top:5px !important;}
|
|
|
+.marT10 {margin-top:10px !important;}
|
|
|
+.marT15 {margin-top:15px !important;}
|
|
|
+.marT20 {margin-top:20px !important;}
|
|
|
+.marR3 {margin-right:3px !important;}
|
|
|
+.marL5 {margin-left:5px !important;}
|
|
|
+.marL10 {margin-left:10px !important;}
|
|
|
+.marL20 {margin-left:20px !important;}
|
|
|
+.marR10 {margin-right:10px !important;}
|
|
|
+.marR20 {margin-right:20px !important;}
|
|
|
+
|
|
|
+/* 넓이 지정 --------------- */
|
|
|
+.w20 {width:20px !important;}
|
|
|
+.w50 {width:50px !important;}
|
|
|
+.w60 {width:60px !important;}
|
|
|
+.w70 {width:60px !important;}
|
|
|
+.w80 {width:80px !important;}
|
|
|
+.w90 {width:80px !important;}
|
|
|
+.w100 {width:100px !important;}
|
|
|
+.w130 {width:130px !important;}
|
|
|
+.w150 {width:150px !important;}
|
|
|
+.w200 {width:200px !important;}
|
|
|
+.w300 {width:300px !important;}
|
|
|
+.w400 {width:400px !important;}
|
|
|
+.w500 {width:500px !important;}
|
|
|
+.w600 {width:600px !important;}
|
|
|
+.w800 {width:800px !important;}
|
|
|
+.w100p {width:100% !important;}
|
|
|
+.w90p {width:90% !important;}
|
|
|
+.w80p {width:80% !important;}
|
|
|
+.w70p {width:70% !important;}
|
|
|
+.w60p {width:60% !important;}
|
|
|
+.w50p {width:50% !important;}
|
|
|
+.w40p {width:40% !important;}
|
|
|
+.w30p {width:30% !important;}
|
|
|
+.w20p {width:20% !important;}
|
|
|
+.h100 {height:100px !important;} /*alert, confirm 컨텐츠 높이에 사용*/
|
|
|
+
|
|
|
+
|
|
|
+/*-- 캘린더 --------------*/
|
|
|
+#calendar {max-width:900px; margin:20px 0 50px 20px;}
|
|
|
+
|
|
|
+/*-- error page --------------*/
|
|
|
+#errPage {padding-top:40px; width:650px; background:#fff; position:relative; top:48%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); border-radius:9px; vertical-align:middle; overflow:hidden; box-shadow:0 0 2px 0 rgba(0,0,0,0.12), 0 2px 2px 0 rgba(0,0,0,0.24);}
|
|
|
+#errPage .errImg {padding-left:50px; display:table-cell; vertical-align:middle; padding-bottom:30px;}
|
|
|
+#errPage .errImg div {border-radius:50%; position:relative; display:inline-block; width:140px; height:140px; color:#fff; background:#d196e4; box-shadow:2px 2px 6px 0 rgba(0,0,0,0.2) inset;}
|
|
|
+#errPage .fa-television {position:absolute; top:30px; left:28px; font-weight:bold; font-size:80px;}
|
|
|
+#errPage .fa-info {position:absolute; top:49px; left:66px; font-size:34px;}
|
|
|
+#errPage .errTxt {padding:0 50px; display:table-cell; padding-bottom:40px;}
|
|
|
+#errPage .errTxt .ttl {font-size:16px; font-weight:bold; padding-bottom:20px;}
|
|
|
+#errPage .errTxt .cont { padding-bottom:20px; line-height:26px;}
|
|
|
+#errPage .errTxt .tel {color:#777;}
|
|
|
+#errPage .errBtn {width:100%; background:#f9f9fa; line-height:70px; text-align:right;}
|
|
|
+#errPage .errBtn .btn {margin-right:30px; border-radius:33px; background:#858b90; color:#fff; padding:5px 30px; line-height:24px; font-weight:bold; -webkit-transition:0.2s; transition:0.2s;}
|
|
|
+#errPage .errBtn .btn:hover {background:#555;}
|
|
|
+
|
|
|
+/*-- DEXTER --------------*/
|
|
|
+.dexterNo { width:43px;}
|
|
|
+.dexterNo div { padding:0 10px; border-top:1px solid #ddd; border-right:1px solid #ddd; background:#fff; text-align:right;}
|
|
|
+.dexterNo div:first-child {margin-top:28px;}
|
|
|
+
|
|
|
+/*-- 회원추가 --------------*/
|
|
|
+.memAddWrap {line-height:26px; padding:3px 0;}
|
|
|
+.memAdd {margin-right:15px; padding:2px 27px 2px 0; position:relative; line-height:24px; height:24px; white-space:nowrap;}
|
|
|
+.memAdd button {position:absolute; top:3px; right:0; bottom:0; width:18px; height:18px; border:1px solid #dbdbdb; border-radius:3px; text-indent:-9999px; background:#eee url('/image/btn_sltClose.png') no-repeat 50% 50%;}
|
|
|
+.memAdd button:hover {background:#eee url('/image/btn_sltCloseOn.png') no-repeat 50% 50%;}
|
|
|
+
|
|
|
+/*-- Date Picker --------------*/ /* 20200521 수정 */
|
|
|
+table.mtz-monthpicker {border:1px solid #ddd; border-top:none;}
|
|
|
+.mtz-monthpicker-month {padding:7px; cursor:pointer;}
|
|
|
+.ui-datepicker-trigger {padding:0;}
|
|
|
+.ui-datepicker {z-index:800 !important; text-align:center; background:#fff;}
|
|
|
+.ui-datepicker .ui-datepicker-today,
|
|
|
+.ui-datepicker .ui-state-highlight {background:#fff7cf !important;}
|
|
|
+.ui-datepicker .ui-state-active {border:1px solid red !important;}
|
|
|
+.ui-datepicker .ui-datepicker-prev {position:absolute; top:3px; left:3px; width:30px; line-height:30px; text-indent:-9999px; background:url('/image/icon_prev.png') no-repeat 50% 50%;}
|
|
|
+.ui-datepicker .ui-datepicker-next {position:absolute; top:3px; right:3px; width:30px; line-height:30px; text-indent:-9999px; background:url('/image/icon_next.png') no-repeat 50% 50%;}
|
|
|
+.ui-datepicker .ui-datepicker-calendar {padding:5px; border:1px solid #ddd; border-top:none; text-align:center;}
|
|
|
+.ui-datepicker .ui-datepicker-calendar th{padding:5px 0}
|
|
|
+.ui-datepicker-week-end {text-align:center;}
|
|
|
+.ui-datepicker-calendar .ui-state-default {display:inline-block; text-align:center; width:32px; line-height:24px; border:none;}
|
|
|
+.ui-datepicker-header {position:relative; background:#d0e9ff; text-align:center; padding:5px; border:1px solid #ddd; border-bottom:none;}
|
|
|
+.ui-datepicker-buttonpane button {background-color:#eee; border:1px solid #dcdcdc; line-height:24px; border-radius:3px; margin:0 5px 5px 5px;}
|
|
|
+.ui-datepicker-current {float:left;}
|
|
|
+.ui-datepicker-close {float:right;}
|
|
|
+
|
|
|
+/* prograss bar */
|
|
|
+.prograssWrap {display:flex; flex-direction:row;}
|
|
|
+.prograssWrap > li {display:flex; align-items:center;}
|
|
|
+.prograssWrap > li:nth-of-type(1) {width:96%}
|
|
|
+.prograssWrap > li:nth-of-type(2) {margin-left:1.5rem !important}
|
|
|
+.prograss-lg {display:flex; width:100%; height:1rem; background-color:#f4f5fd; border-radius:.65rem; overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.1);}
|
|
|
+.prograss-sm {display:flex; width:100%; height:.5rem; background-color:#f4f5fd; border-radius:.65rem; overflow:hidden; box-shadow:inset 0 1px 2px rgba(0,0,0,.1);}
|
|
|
+.prograss-bar {display:flex; border-top-right-radius:.65rem; border-bottom-right-radius:.65rem; transition:width .6s ease;}
|
|
|
+.prograss-bar.bg-info {background-color:#11c5db;}
|
|
|
+.prograss-txt.bg-info {color:#11c5db; font-weight:bold;}
|
|
|
+.prograss-bar.bg-success {background-color:#1bc943;}
|
|
|
+.prograss-txt.bg-success {color:#1bc943; font-weight:bold;}
|
|
|
+.prograss-bar.bg-danger {background-color:#f83245;}
|
|
|
+.prograss-txt.bg-danger {color:#f83245; font-weight:bold;}
|
|
|
+.prograss-bar.bg-base {background:linear-gradient(135deg,#667eea 0,#764ba2 100%);}
|
|
|
+.prograss-txt.bg-base {color:#8597eb; font-weight:bold;}
|
|
|
+
|
|
|
+/* Multi CheckBox */
|
|
|
+.multiCheckBox {position:relative; display:inline-block; width:auto; line-height:27px; margin:3px 3px 3px 0;}
|
|
|
+.multiCheckBox .sltBtn {padding-left:5px; width:100%; height:27px; color:#555; text-align:left; border:1px solid #dbdbdb; box-sizing:border-box; -webkit-touch-callout:none; -webkit-user-select:none; -ms-user-select:none; user-select:none;}
|
|
|
+.multiCheckBox .sltBtn::after {position:absolute; top:6px; right:10px; content:''; width:7px; height:7px; border-bottom:1px solid #555; border-left:1px solid #555; -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
|
|
|
+.multiCheckBox .sltBtn.on::after {top:10px; -webkit-transform:rotate(135deg); transform:rotate(135deg);}
|
|
|
+.multiCheckBox ul {display:none; position:absolute; top:26px; left:0; z-index:1; width:100%; height:auto; border:1px solid #dbdbdb; background:#fff;}
|
|
|
+.multiCheckBox li {padding:3px 10px;}
|
|
|
+.multiCheckBox li:hover {background-color:Highlight; color:HighlightText;}
|
|
|
+.multiCheckBox label {display:flex;}
|
|
|
+
|
|
|
+/* checkBox More */
|
|
|
+.checkBoxList {overflow:hidden; padding-right:36px; height:36px;}
|
|
|
+.checkBoxList.on {overflow:visible; height:auto;}
|
|
|
+.checkBoxList .more {position:absolute; top:-1px; right:0; width:36px; height:38px; border:1px solid #eee; background:#f7f7f7;}
|
|
|
+.checkBoxList ul {display:flex; flex-wrap:wrap;}
|
|
|
+.checkBoxList li {justify-content:flex-start; line-height:36px;}
|
|
|
+.checkBoxList[data-unit='1'] li {flex-basis:100%;}
|
|
|
+.checkBoxList[data-unit='2'] li {flex-basis:50%;}
|
|
|
+.checkBoxList[data-unit='3'] li {flex-basis:33%;}
|
|
|
+.checkBoxList[data-unit='4'] li {flex-basis:25%;}
|
|
|
+.checkBoxList[data-unit='5'] li {flex-basis:20%;}
|
|
|
+.checkBoxList[data-unit='6'] li {flex-basis:16.6%;}
|
|
|
+.checkBoxList[data-unit='7'] li {flex-basis:14.2%;}
|
|
|
+.checkBoxList[data-unit='8'] li {flex-basis:12.5%;}
|
|
|
+
|
|
|
+/* 아이콘 툴팁 버튼 */
|
|
|
+.iconTooltip {display:inline-block; position:relative; margin-right:10px;}
|
|
|
+.iconTooltip i {position:relative; color:#46a1ff; width:15px; height:15px; line-height:16px; border-radius:50%; border:1px solid #46a1ff; cursor:pointer; text-align:center;}
|
|
|
+.iconTooltip:hover i {box-shadow:0px 3px 7px 0px rgba(0,0,0,0.4);}
|
|
|
+.iconTooltip span {display:none; position:absolute; top:36px; z-index:5; padding:10px 15px; line-height:24px; color:#fff; background:#6d6d6d; box-shadow:0px 3px 7px 0px rgba(0,0,0,0.2); border-radius:5px;}
|
|
|
+.iconTooltip span:after {position:absolute; top:-4px; content:''; background:#6d6d6d; width:8px; height:8px; -ms-transform:rotate(-45deg); -webkit-transform:rotate(-45deg); transform:rotate(-45deg);}
|
|
|
+.iconTooltip span.left {left:-10px}
|
|
|
+.iconTooltip span.left:after {left:15px;}
|
|
|
+.iconTooltip span.right {right:-10px}
|
|
|
+.iconTooltip span.right:after {right:15px;}
|
|
|
+.iconTooltip span.center {left:50%;}
|
|
|
+.iconTooltip span.center:after {right:5px;}
|
|
|
+.iconTooltip:hover span{display:block;}
|
|
|
+
|
|
|
+/* 상품이동 */
|
|
|
+.itemMove {display:inline-block; width:800px; border:1px solid #eee;}
|
|
|
+.itemMove .item {float:left; display:table; margin:0 10px 20px 0; width:220px; border:1px solid #eee;}
|
|
|
+.itemMove .item li {display:table-cell; vertical-align:top;}
|
|
|
+.itemMove .item li:nth-of-type(1) {width:80px;}
|
|
|
+.itemMove .item li:nth-of-type(1) img {width:80px; height:80px;}
|
|
|
+.itemMove .item button {width:16px; height:16px; text-indent:-9999px;}
|
|
|
+.itemMove .item input {width:30px; height:14px !important; line-height:14px}
|
|
|
+.itemMove .item li:nth-of-type(2) div {line-height:20px}
|
|
|
+
|
|
|
+/* 상품 Dragable :20200129 */
|
|
|
+.sortableWrap #sortable { overflow-y:auto }
|
|
|
+.sortableWrap {margin:20px 0; width:100%; max-height:675px;}
|
|
|
+.sortableWrap .itemWrap {display:inline-block;}
|
|
|
+.sortableWrap .item {float:left; margin-right:12px; margin-bottom:12px; padding:5px 8px; line-height:20px; border:1px solid #ddd; vertical-align:top; background:#fff;}
|
|
|
+.sortableWrap .item > li {float:left; vertical-align:middle;}
|
|
|
+.sortableWrap .item .img {margin-top:3px; margin-right:10px; width:80px;}
|
|
|
+.sortableWrap .item .img img {width:80px; height:80px; cursor:move;}
|
|
|
+.sortableWrap .btnArea {text-align:center; margin-top:15px; padding:0 10px;}
|
|
|
+.sortableWrap button.icnSm {overflow:hidden; position:relative; width:24px; height:20px; background-color:#fff;}
|
|
|
+.sortableWrap button.icnSm i {position:absolute; top:-4px; left:-3px; width:24px; line-height:24px; font-size:15px; color:#888;}
|
|
|
+.sortableWrap button.icnSm:hover i {color:#111;}
|
|
|
+.sortableWrap button.icnSm:last-child {margin-right:0;}
|
|
|
+.sortableWrap .item .cont {width:114px;}
|
|
|
+.sortableWrap .item .cont li em {margin:0 3px 0 7px;}
|
|
|
+.sortableWrap .item .cont .no {font-weight:bold; padding-bottom:3px;}
|
|
|
+.sortableWrap .item .cont .title {padding-bottom:3px; border-bottom:1px solid #eee;}
|
|
|
+.sortableWrap .item .cont .price {padding-top:3px; padding-bottom:3px;}
|
|
|
+.sortableWrap .item .cont input {margin-left:5px; width:37px;}
|
|
|
+
|
|
|
+
|
|
|
+.ag-theme-balham.lh60 .ag-cell {line-height:60px !important; height:60px;}
|
|
|
+.ag-theme-balham.lh70 .ag-cell {line-height:70px !important; height:70px;}
|
|
|
+.ag-theme-balham.lh80 .ag-cell {line-height:80px !important; height:80px;}
|
|
|
+.ag-theme-balham.lh90 .ag-cell {line-height:90px !important; height:90px;}
|
|
|
+.ag-theme-balham.lh100 .ag-cell {line-height:100px !important; height:100px;}
|
|
|
+.ag-theme-balham.lh110 .ag-cell {line-height:110px !important; height:110px;}
|
|
|
+.ag-theme-balham.lh120 .ag-cell {line-height:120px !important; height:120px;}
|
|
|
+
|
|
|
+
|
|
|
+/* 테이블 상품명 클릭시 이미지 레이어 활성화 */
|
|
|
+.viewImg {position:relative; color:blue; cursor:pointer}
|
|
|
+.thumbLayer {display:inline-block; position:absolute; top:0; right:0; z-index:5; border:1px solid #ddd}
|
|
|
+.thumbLayer img {width:100%; height:auto;}
|
|
|
+
|
|
|
+/* dashboard */
|
|
|
+.flexWrap{display:-ms-flexbox; display:flex; -ms-flex-wrap:wrap; flex-wrap:wrap; color:#676a6c;}
|
|
|
+.flexWrap li{padding:0 20px 20px; width:calc(33.3%);}
|
|
|
+.flexWrap.unit4 li{width:calc(25%);}
|
|
|
+.flexWrap.unit5 li{width:calc(20%);}
|
|
|
+.flexWrap.unit6 li{width:calc(16.6%);}
|
|
|
+.flexWrap .title{padding:15px; font-weight:600; border:1px solid #e7eaec; border-top:2px solid #e7eaec;}
|
|
|
+.flexWrap .title h5{font-size:15px; font-weight:bold;}
|
|
|
+.flexWrap .title span{float:right; padding:1px 8px; font-size:10px; border-radius:0.25em;}
|
|
|
+.flexWrap .content{padding:15px; border:1px solid #e7eaec; border-top:none;}
|
|
|
+.flexWrap .content em{font-size:30px; font-weight:200;}
|
|
|
+.statText {margin-top:5px}
|
|
|
+.statText::after{display:block; clear:both; content:''}
|
|
|
+.statText span:nth-of-type(1){float:left; font-size:11px;}
|
|
|
+.statText span:nth-of-type(2){float:right; font-size:13px; font-weight:600;}
|
|
|
+.txt-success{color:#1c84c6;}
|
|
|
+.txt-info{color:#23c6c8;}
|
|
|
+.flexWrap .txt-danger{color:#ed5565;}
|
|
|
+.flexWrap .bg-success{background:#1c84c6;}
|
|
|
+.flexWrap .bg-info{background:#23c6c8;}
|
|
|
+.flexWrap .bg-danger{background:#ed5565;}
|
|
|
+.btn.on{-webkit-box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125); box-shadow:inset 0 3px 5px rgba(0, 0, 0, 0.125);}
|
|
|
+.dbChart .btn-group{float:right; line-height:37px;}
|
|
|
+.dbChart .btn-group button{margin:0; height:23px;}
|
|
|
+.dbChart .boxleft{float:left; margin:20px 15px 20px 15px; width:calc(100% - 490px);}
|
|
|
+.dbChart .boxRight{float:left; margin:20px 20px 20px 40px; width:400px;}
|
|
|
+.dbChart .boxRight em{font-size:24px; font-weight:200;}
|
|
|
+.dbChart .boxRight > div{margin-bottom:25px;}
|
|
|
+.dbChart .boxRight .statText .c1 {color:#FF7043}
|
|
|
+.dbChart .boxRight .progress .c1 {background:#FF7043}
|
|
|
+.dbChart .boxRight .statText .c2 {color:#48C9B0}
|
|
|
+.dbChart .boxRight .progress .c2 {background:#48C9B0}
|
|
|
+.dbChart .boxRight .statText .c3 {color:#ca9900}
|
|
|
+.dbChart .boxRight .progress .c3 {background:#FFD54F}
|
|
|
+.progress{display:-ms-flexbox; display:flex; margin-top:5px; height:1rem; overflow:hidden; font-size:.75rem; background-color:#e9ecef; border-radius:.25rem;}
|
|
|
+.progress-mini{height:5px; margin-bottom:0;}
|
|
|
+.progress > div{height:5px; margin-bottom:0; transition:width 0.3s;}
|
|
|
+
|
|
|
+
|
|
|
+/* 카테고리 Sort */
|
|
|
+.categoryOrder {margin-bottom:15px; background:#fcfcfc;}
|
|
|
+.categoryOrder li {clear:both; padding-left:15px; line-height:40px; cursor:move; border-top:1px dashed red; }
|
|
|
+.categoryOrder li button.on {background-image:url(/image/icon_cate_minus.png);}
|
|
|
+/* .categoryOrder li:after {content:''; position:absolute; top:8px; left:-10px; width:21px; height:21px; background:url(/image/line_cate.png)} */
|
|
|
+.categoryOrder li:before{position:relative; content:''; width:1px; height:100%; background:#ddd;}
|
|
|
+.categoryOrder li ol{display:none}
|
|
|
+/* .categoryOrder ol:last-child li {background-image:none !important} */
|
|
|
+.categoryOrder button{position:relative; z-index:200; padding:0 15px 0; margin:0; line-height:40px; cursor:pointer; background-image:url(/image/icon_cate_plus.png); background-repeat:no-repeat; background-position:0 0;}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+/* 반응형:GNB 유저명,등급,로그아웃 --------------- */
|
|
|
+@media ( max-width:1370px ) {
|
|
|
+ .header-info { display:none;}
|
|
|
+ .header-info-sm { display:inline-block;}
|
|
|
+}
|
|
|
+
|
|
|
+/* 반응형 :dashboard(20200522) --------------- */
|
|
|
+@media ( max-width:1023px ) {
|
|
|
+ /* 대시보드 */
|
|
|
+ #wrapper.dashboard{width:100%; min-width:100%;}
|
|
|
+ .dashboard .header-logo{width:100%}
|
|
|
+ .dashboard #lnb-wrapper{display:none;}
|
|
|
+ .dashboard .header-menu{display:none;}
|
|
|
+ .dashboard .tabs{margin-left:0; margin-right:0;}
|
|
|
+ .dashboard .tabs h2{position:relative; margin:10px 15px}
|
|
|
+ .dashboard .tabsNav li:first-child{margin-left:0}
|
|
|
+ .dashboard .tabsNav li:last-child{margin-right:0}
|
|
|
+ .dashboard .tabsNav li a{font-size:16px}
|
|
|
+ .dashboard .flexWrap li{width:100%}
|
|
|
+ .dashboard .flexWrap.unit4 li{width:100%}
|
|
|
+ .dashboard .flexWrap.unit5 li{width:100%}
|
|
|
+ .dashboard .flexWrap.unit6 li{width:100%}
|
|
|
+ .dashboard .boxStyle{margin-left:0; margin-right:0;}
|
|
|
+ .dashboard .dbChart .boxleft{clear:left; margin:30px 15px 0 0; width:100%;}
|
|
|
+ .dashboard .dbChart .boxRight{clear:right; width:100%; margin:30px 20px 20px;}
|
|
|
+}
|
|
|
+
|
|
|
+/* Fix Input Zoom on devices older than iPhone 5:*/
|
|
|
+@media screen and (device-aspect-ratio:2/3) {
|
|
|
+ select, textarea, input[type="text"], input[type="password"],
|
|
|
+ input[type="datetime"], input[type="datetime-local"],
|
|
|
+ input[type="date"], input[type="month"], input[type="time"],
|
|
|
+ input[type="week"], input[type="number"], input[type="email"],
|
|
|
+ input[type="url"]{ font-size:16px;}
|
|
|
+}
|
|
|
+
|
|
|
+/* Fix Input Zoom on iPhone 5, 5C, 5S, iPod Touch 5g */
|
|
|
+@media screen and (device-aspect-ratio:40/71) {
|
|
|
+ select, textarea, input[type="text"], input[type="password"],
|
|
|
+ input[type="datetime"], input[type="datetime-local"],
|
|
|
+ input[type="date"], input[type="month"], input[type="time"],
|
|
|
+ input[type="week"], input[type="number"], input[type="email"],
|
|
|
+ input[type="url"]{ font-size:16px;}
|
|
|
+}
|
|
|
+
|
|
|
+/* Fix Input Zoom on iPhone 6, iPhone 6s, iPhone 7 */
|
|
|
+@media screen and (device-aspect-ratio:375/667) {
|
|
|
+ select, textarea, input[type="text"], input[type="password"],
|
|
|
+ input[type="datetime"], input[type="datetime-local"],
|
|
|
+ input[type="date"], input[type="month"], input[type="time"],
|
|
|
+ input[type="week"], input[type="number"], input[type="email"],
|
|
|
+ input[type="url"]{ font-size:16px;}
|
|
|
+}
|
|
|
+
|
|
|
+/* Fix Input Zoom on iPhone 6 Plus, iPhone 6s Plus, iPhone 7 Plus, iPhone 8, iPhone X, XS, XS Max */
|
|
|
+@media screen and (device-aspect-ratio:9/16) {
|
|
|
+ select, textarea, input[type="text"], input[type="password"],
|
|
|
+ input[type="datetime"], input[type="datetime-local"],
|
|
|
+ input[type="date"], input[type="month"], input[type="time"],
|
|
|
+ input[type="week"], input[type="number"], input[type="email"],
|
|
|
+ input[type="url"]{ font-size:16px;}
|
|
|
}
|
eskim