|
|
@@ -0,0 +1,1010 @@
|
|
|
+@charset "UTF-8";
|
|
|
+@import url("font.css");
|
|
|
+@import url("font-awesome.min.css");
|
|
|
+
|
|
|
+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","맑은 고딕",Dotum,"돋움",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"], select[readonly="readonly"], select[disabled="disabled"],textarea[readonly="readonly"] ,textarea[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:700; 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:700; 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;}
|
|
|
+
|
|
|
+/* 로그인 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:600;}
|
|
|
+.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:700;}
|
|
|
+.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; width:30px; 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:#f8e7b4;}
|
|
|
+.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:600;}
|
|
|
+.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 {float:right; margin-right:20px;}
|
|
|
+.header-info a {display:inline-block; position:relative; color:#e3dced;}
|
|
|
+.header-info a:hover {color:#fff;}
|
|
|
+.header-info a.mob i {display:none;}
|
|
|
+.header-info a .tooltip {display:none;}
|
|
|
+.header-info i.bar, .header-info i.dot {color:#e3dced; margin:0 3px;}
|
|
|
+.header-info .sltLayerpop {position:fixed; top:60px; right:0; line-height:50px; border-bottom-left-radius:9px; background-image:linear-gradient(to bottom, #5d5d5d, 10px, #828282); box-shadow:0 6px 12px rgb(0 0 0 / 18%)}
|
|
|
+.header-info .sltLayerpop .close{color:#fff; position: absolute; right:5px;top:15px;}
|
|
|
+.header-info .sltLayerpop .selectArea {background-image:linear-gradient(to bottom, #5d5d5d, 10px, #828282); padding:0 10px 0 15px;}
|
|
|
+/* 반응형:GNB 유저명,등급,로그아웃 --------------- */
|
|
|
+@media ( max-width:1370px ) {
|
|
|
+ .header-info a {padding:0 7px;}
|
|
|
+ .header-info a.mob i {display:inline-flex;}
|
|
|
+ .header-info a strong {display:none;}
|
|
|
+ .header-info a.mob:hover::after {content:""; position:absolute; top:40px; left:50%; transform:translateX(-50%); border-width:5px; border-style:solid; border-color:transparent transparent #233646 transparent;}
|
|
|
+ .header-info a.mob:hover .tooltip {display:unset; position:fixed; top:50px; 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; white-space:nowrap;}
|
|
|
+ .header-info i.bar, .header-info i.dot {display:none;}
|
|
|
+}
|
|
|
+
|
|
|
+/* 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;}
|
|
|
+#lnb a {display:block; color:#a7b1c2;}
|
|
|
+#lnb a::selection {background:none;}
|
|
|
+#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') right 15px top 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') right 15px top 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:700;}
|
|
|
+#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:700;}
|
|
|
+.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;} /* 210316 */
|
|
|
+.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:700; 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 {z-index:1;}
|
|
|
+.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, input[type=range] {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; 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:600; 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:600;}
|
|
|
+
|
|
|
+/* 컨텐트 스크롤--------------- */
|
|
|
+.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;}
|
|
|
+
|
|
|
+/* 체크박스 & 라디오버튼 : 공통--------------- */
|
|
|
+label.chkBox, label.rdoBtn {position:relative; display:inline-block; padding-left:26px; height:22px; line-height:22px; vertical-align:middle; cursor:pointer;}
|
|
|
+label.chkBox input, label.rdoBtn input{position:absolute; top:2px; left:0; width:0; height:0; border:none;}
|
|
|
+/* 체크박스 */
|
|
|
+label.chkBox::after {content:''; position:absolute;top:0; left:0;width:22px; height:22px;}
|
|
|
+label.chkBox input::after{content:''; position:absolute; top:0; left:0; width:18px; height:18px;background:url('../../image/icon_checkN.png') no-repeat 0 0;}
|
|
|
+label.chkBox input:checked::after{background:url('../../image/icon_checkY.png') no-repeat 0 0;}
|
|
|
+label.chkBox input[disabled='disabled']::after, label.chkBox input[readonly='readonly']::after{background:url('../../image/icon_checkND.png') no-repeat 0 0;}
|
|
|
+label.chkBox input[disabled='disabled']:checked::after, label.chkBox input[readonly='readonly']:checked::after{background:url('../../image/icon_checkYD.png') no-repeat 0 0;}
|
|
|
+/* 라디오버튼 */
|
|
|
+label.rdoBtn::after {content:''; position:absolute;top:0; left:0;width:22px; height:22px;}
|
|
|
+label.rdoBtn input::after{content:''; position:absolute; top:0; left:0; width:18px; height:18px;background:url('../../image/icon_radioN.png') no-repeat 0 0;}
|
|
|
+label.rdoBtn input:checked::after{background:url('../../image/icon_radioY.png') no-repeat 0 0;}
|
|
|
+label.rdoBtn input[disabled='disabled']::after, label.rdoBtn input[readonly='readonly']::after{background:url('../../image/icon_radioND.png') no-repeat 0 0;}
|
|
|
+label.rdoBtn input[disabled='disabled']:checked::after, label.rdoBtn input[readonly='readonly']:checked::after{background:url('../../image/icon_radioYD.png') no-repeat 0 0;}
|
|
|
+
|
|
|
+/* 토글 스위치--------------- */
|
|
|
+.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;font-size:0;color:#fff;}
|
|
|
+.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:600; 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:600;}
|
|
|
+
|
|
|
+/* 내부 테이블 디자인 */
|
|
|
+.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, .btn.active {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;}
|
|
|
+.btnGroup{display:inline-block;}
|
|
|
+.btnGroup .btn + .btn{margin:0;}
|
|
|
+
|
|
|
+/* 페이징 --------------- */
|
|
|
+.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; padding:3px 6px; line-height:1; color:#fff; font-size:12px; font-weight:600; border-radius:2px; letter-spacing:-0.5px; text-shadow:0px 0px 2px rgba(0,0,0,0.6); box-shadow:-0px -0px 0.1px 1px rgba(0,0,0,0.2);}
|
|
|
+.badge-warning {background-color:#ed7908;}
|
|
|
+.badge-primary {background-color:#1fb685;}
|
|
|
+.badge-danger {background-color:#ea3838;}
|
|
|
+.badge-success {background-color:#2fa4e7;}
|
|
|
+.badge-info {background-color:#23c6c8;}
|
|
|
+.badge.circle {border-radius:50px;}
|
|
|
+.dep3 .badge {position:relative; top:-28px; right:15px;}
|
|
|
+
|
|
|
+/* badge-등급 ------------*/
|
|
|
+.badgeLevel{overflow:hidden;display:inline-block;margin:5px 0 0;padding:0;width:50px;height:50px;line-height:46px;font-size:30px;font-weight:600;border-radius:100%;text-align:center;vertical-align:top;box-sizing:border-box;}
|
|
|
+.badgeLevel.white{background-color:#fff;border:1px solid #333;color:#333;}
|
|
|
+.badgeLevel.dark1{background-color:#ccc;border:1px solid #ccc;color:#333;}
|
|
|
+.badgeLevel.dark2{background-color:#aaa;border:1px solid #aaa;color:#333;}
|
|
|
+.badgeLevel.dark3{background-color:#777;border:1px solid #777;color:#fff;}
|
|
|
+.badgeLevel.black{background-color:#333;border:1px solid #333;color:#fff;}
|
|
|
+
|
|
|
+/* tag */
|
|
|
+.tagNum {display:inline-block; margin-left:5px; padding:0 3px; min-width:16px; 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:23px;}
|
|
|
+.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:0; 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:600 !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:600; 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:600; 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:600; -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;
|
|
|
+ background-image: linear-gradient(45deg,rgba(255,255,255,.15) 25%,transparent 25%,transparent 50%,rgba(255,255,255,.15) 50%,rgba(255,255,255,.15) 75%,transparent 75%,transparent);
|
|
|
+ background-size: 1rem 1rem;
|
|
|
+ -webkit-animation: progress-bar-stripes 1s linear infinite; animation: progress-bar-stripes 1s linear infinite;}
|
|
|
+.prograss-bar.bg-info {background-color:#1c84c6;}
|
|
|
+.prograss-txt.bg-info {color:#1c84c6;}
|
|
|
+.prograss-bar.bg-success {background-color:#1ab394;}
|
|
|
+.prograss-txt.bg-success {color:#1ab394;}
|
|
|
+.prograss-bar.bg-danger {background-color:#f83245;}
|
|
|
+.prograss-txt.bg-danger {color:#f83245;}
|
|
|
+.prograss-bar.bg-base {background-color:#f8ac59;}
|
|
|
+.prograss-txt.bg-base {color:#ffa749;}
|
|
|
+
|
|
|
+/* Multi CheckBox */
|
|
|
+.multiCheckBox {position:relative; display:inline-block; width:auto; line-height:27px; margin:3px 3px 3px 0;}
|
|
|
+.multiCheckBox::after{content:'';display:block;height:auto;}
|
|
|
+.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:hover {background-color:Highlight;color:HighlightText;}
|
|
|
+.multiCheckBox label {display:flex;padding-left:36px;border:3px solid transparent;height:28px;}
|
|
|
+.multiCheckBox label.chkBox::after, .multiCheckBox label.chkBox input::after{left:7px;}
|
|
|
+
|
|
|
+/* 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:600; 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:56px !important; height:60px;}
|
|
|
+.ag-theme-balham.lh70 .ag-cell {line-height:66px !important; height:70px;}
|
|
|
+.ag-theme-balham.lh80 .ag-cell {line-height:76px !important; height:80px;}
|
|
|
+.ag-theme-balham.lh90 .ag-cell {line-height:86px !important; height:90px;}
|
|
|
+.ag-theme-balham.lh100 .ag-cell {line-height:96px !important; height:100px;}
|
|
|
+.ag-theme-balham.lh110 .ag-cell {line-height:106px !important; height:110px;}
|
|
|
+.ag-theme-balham.lh120 .ag-cell {line-height:114px !important; height:120px;}
|
|
|
+.ag-theme-balham .cell-span {border-right:none !important;}
|
|
|
+
|
|
|
+/* 테이블 상품명 클릭시 이미지 레이어 활성화 */
|
|
|
+.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:600;}
|
|
|
+.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;}
|
|
|
+
|
|
|
+/* 메인 공지팝업 */
|
|
|
+.noticeWrap{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:800px;background-color:#fff;}
|
|
|
+.noticeWrap .swiper-container{overflow:hidden;position:relative;top:0;}
|
|
|
+.noticeWrap .swiper-wrapper{display:flex;width:100%;transition-property:transform;box-sizing:content-box;}
|
|
|
+.noticeWrap .swiper-slide{overflow-y:auto;max-height:500px;padding:20px 20px 40px;flex-shrink:0;position:relative;width:100%;height:100%;transition-property:transform;}
|
|
|
+.noticeWrap .swiper-slide img{max-width:100%;height:auto;}
|
|
|
+.noticeWrap .swipeControl{display:inline-block;position:absolute;top:-35px;right:0;/* transform:translate(-50%,0); */z-index:1;width:100px;}
|
|
|
+.noticeWrap .swipeControl button{text-indent:-9999px;}
|
|
|
+.noticeWrap .swipeControl button[aria-label]{position:absolute;width:30px;height:30px;}
|
|
|
+.noticeWrap .swipeControl button[aria-label]::after{top:6px;width:12px;height:12px;}
|
|
|
+.noticeWrap .swipeControl button[aria-label].arr{top:0;}
|
|
|
+.noticeWrap .swipeControl button[aria-label].arr.prev{left:0;}
|
|
|
+.noticeWrap .swipeControl button[aria-label].arr.next{right:0}
|
|
|
+.noticeWrap .swipeControl button[aria-label].arr::after{position:absolute;display:block;content:'';border-bottom:1px solid #fff;border-left:1px solid #fff}
|
|
|
+.noticeWrap .swipeControl button[aria-label].arr.prev::after{-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg)}
|
|
|
+.noticeWrap .swipeControl button[aria-label].arr.next::after{-webkit-transform:rotate(-135deg);-ms-transform:rotate(-135deg);transform:rotate(-135deg)}
|
|
|
+.noticeWrap .swipeControl .prev:after{left:8px;}
|
|
|
+.noticeWrap .swipeControl .next:after{right:8px;}
|
|
|
+.noticeWrap .swipeControl .swiper-button-disabled:after{border-color:#ddd;}
|
|
|
+.noticeWrap .swipeControl .swiper-pagination{line-height:28px;width:100%;text-align:center;}
|
|
|
+.noticeWrap .swipeControl .swiper-pagination-bullet{display:inline-block;margin:0 5px;width:10px;height:10px;background:#ddd;border-radius:50%;cursor:pointer;}
|
|
|
+.noticeWrap .swipeControl .swiper-pagination-fraction span{font-size:14px;}
|
|
|
+.noticeWrap .swipeControl .swiper-pagination-fraction i{color:#ccc;}
|
|
|
+.noticeWrap .swipeControl .swiper-pagination-current{color:#fff;font-weight:600;}
|
|
|
+.noticeWrap .swipeControl .swiper-pagination-total{color:#ccc}
|
|
|
+.noticeWrap .btnArea{display:flex;background-color:#f0f0f0;}
|
|
|
+.noticeWrap .btnArea > span{flex:1;position:relative;}
|
|
|
+.noticeWrap .btnArea > span::after{content:'';position:absolute;top:50%;right:0;transform:translate(0, -50%);width:1px;height:15px;background-color:#ccc;}
|
|
|
+.noticeWrap .btnArea > span:last-child::after{background-color:unset;}
|
|
|
+.noticeWrap .btnArea button{width:100%;height:50px;color:#000}
|
|
|
+.noticeWrap .title{line-height:34px;padding:0 0 10px 0;font-size:18px;font-weight:600;border-bottom:1px solid #ececec;}
|
|
|
+.noticeWrap .content{padding:20px 0 20px;line-height:26px;font-size:13px;}
|
|
|
+.noticeWrap .download li{line-height:26px;}
|
|
|
+.noticeWrap .download i{margin-right:15px;}
|
|
|
+.noticeWrap .download a{border-bottom:1px solid #337ab7;color:#337ab7;}
|
|
|
+.noticeWrap .download a:visited{border-bottom:1px solid #999;color:#333;}
|
|
|
+
|
|
|
+/* 이미지 좌표값 가져오기 */
|
|
|
+#pictureOffset > li{vertical-align:top;}
|
|
|
+#pictureOffset > li:nth-of-type(1){width:700px;padding-right:20px;-webkit-user-select:none;user-select:none;}
|
|
|
+#pictureOffset .picWrap{overflow:hidden;position:relative;width:700px;height:700px;background-color:#ddd;text-align:center;}
|
|
|
+#pictureOffset .picWrap .thumb{height:0;padding-top:100%;background-color:#f5f5f5;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;}
|
|
|
+#pictureOffset .dataWrap{min-width:727px;}
|
|
|
+#pictureOffset .dataWrap th{background:#e9f7ff;}
|
|
|
+#pictureOffset .dataWrap td{padding-left:20px;}
|
|
|
+#pictureOffset .dataWrap td input{margin:0 0 0 10px;}
|
|
|
+#pictureOffset .dataWrap td span{margin-right:30px;}
|
|
|
+#pictureOffset .dataWrap td span:nth-of-type(1) input{width:70px;}
|
|
|
+#pictureOffset .dataWrap td span .per{display:inline-block;padding-left:5px;line-height:30px;color:#777;font-size:13px;}
|
|
|
+#pictureOffset .dataWrap td span:nth-of-type(2) input{width:70px;}
|
|
|
+#pictureOffset .dataWrap td span:nth-of-type(3) input{width:120px;}
|
|
|
+#pictureOffset .dataWrap .btnDel{position:absolute;right:4px;margin-right:0;}
|
|
|
+#pictureOffset .pos{position:absolute;width:0px;height:0px;}
|
|
|
+#pictureOffset .pos i{overflow:hidden;position:absolute;left:0;top:0;transform:translate(-50%,-50%);width:40px;height:40px;line-height:1;color:#fff;font-size:20px;text-align:center;background-color:#fd4802;border-radius:100%;box-sizing:border-box;padding-top:10px;}
|
|
|
+
|
|
|
+/* 고객 리뷰 */ /* 210420 */
|
|
|
+.reviewWrap{padding:10px 10px;}
|
|
|
+.reviewWrap .prodInfo{margin-bottom:20px;min-height:80px; padding:13px;border:2px solid #d3d3d3;}
|
|
|
+.reviewWrap .prodInfo::after{content:'';display:block;clear:both;}
|
|
|
+.reviewWrap .prodImg{float:left;width:80px;height:80px;}
|
|
|
+.reviewWrap .prodImg img{width:100%;height:100%;}
|
|
|
+.reviewWrap .prodInfo dl{margin-left:100px;margin-bottom:12px !important;display:block;}
|
|
|
+.reviewWrap .prodInfo dl:last-child{margin-bottom:0 !important;}
|
|
|
+.reviewWrap .orderInfo{padding:10px 15px;background-color:#dae0ff;}
|
|
|
+.reviewWrap .user_review {margin-bottom:30px;}
|
|
|
+.reviewWrap .user_review .star_score {overflow: hidden;position:relative;width:95px;height:14px;}
|
|
|
+.reviewWrap .user_review .star_score .star {position:absolute; top:0; width:100%; height:100%;background:#ccc;}
|
|
|
+.reviewWrap .user_review .star_score .star::after{content:'';position:absolute;top:0;left:0;z-index:2;width:100%;height:100%; background:url('../../image/star_empty.png') no-repeat 0 0; background-size:100% 100%; image-rendering:pixelated;}
|
|
|
+.reviewWrap .user_review .star_score .star .progbar {position:absolute;top:50%;left:0;transform:translateY(-50%);height:13px;background:#fd4802;}
|
|
|
+.reviewWrap .user_review .star_score .score {color:#222; font-size:16px; font-weight:200; line-height:1;}
|
|
|
+.reviewWrap .user_review .star_score .score em {font-weight:500;}
|
|
|
+.reviewWrap .user_review .star_score img{position:absolute;top:0;left:0;width:95px;height:100%; }
|
|
|
+.reviewWrap .user_review dl{margin-bottom:15px;display:flex;width:auto}
|
|
|
+.reviewWrap .user_review dl::after{content:'';display:block;clear:both;}
|
|
|
+.reviewWrap .user_review dl dt{float:left;color:#888;display:table-cell;white-space: nowrap;}
|
|
|
+.reviewWrap .user_review dl dt:first-child{margin-left:10px;}
|
|
|
+.reviewWrap .user_review dl dd{float:left;margin:0 50px 0 15px; color: #fd4802;display:table-cell;}
|
|
|
+.reviewWrap .user_review dl dd:last-child{margin-right:0;}
|
|
|
+.reviewWrap .user_review dl dd.cBk{color:#000;}
|
|
|
+.reviewWrap .user_review .rvPic dd{display:table;overflow:hidden;width:100%;height:80px;}
|
|
|
+.reviewWrap .user_review .rvPic dd .picList{display:table-cell;width:890px;background:url(../../image/bg_photo.png) repeat 0 0;background-size:90px 90px;}
|
|
|
+.reviewWrap .user_review .rvPic dd .picList a{float:left;position:relative;width:80px;height:80px;margin-right:10px;overflow:hidden;}
|
|
|
+.reviewWrap .user_review .rvPic dd .picList a:last-child{margin-right:0;}
|
|
|
+.reviewWrap .user_review .rvPic dd .picList a iframe{width:100%;height:100%;border:0;}
|
|
|
+.reviewWrap .user_review .rvPic dd .picList a.mov::after{content:'';position:absolute;left:0;top:0;z-index:2;width:100%;height:100%;background: rgba(0,0,0,0.3) url('../../image/ico_play.png') no-repeat 50% 50%;}
|
|
|
+.reviewWrap .user_review .rvPic dd .picList a span{display:block;padding-top:100%;height:0;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:#ddd;}
|
|
|
+.reviewWrap .user_review .rvPic dd .chk{display:table-cell;position:relative;padding-left:20px;vertical-align:top;color:#000;text-align:center;}
|
|
|
+.reviewWrap .user_review .rvPic dd .chk::after{content:'';position:absolute;top:0;left:20px;width:1px;height:100%;border-left:1px dashed #cfcfcf;}
|
|
|
+.reviewWrap .user_review .rvPic dd .chk i{display:block;margin:3px 0 10px 0;color:#888;text-align:center;}
|
|
|
+.reviewWrap .user_review .rvPic dd .chk .switchBox label:before{content:'보임';left:2px;}
|
|
|
+.reviewWrap .user_review .rvPic dd .chk .switchBox label:after{content:'숨김';right:2px;}
|
|
|
+.reviewWrap .user_review .rvTxt dd{overflow-y:auto;height:160px;padding:10px 20px;line-height:2;word-break:keep-all;background-color:#f5f5f5;color:#666;}
|
|
|
+.reviewWrap .panelBar .date{margin-left:10px;color:#666;}
|
|
|
+/* 사용자 팝업 : 공통 */
|
|
|
+.uPopupWrap {position:fixed;top:0;left:0;z-index:12;width:100%;height:100%;background-color:rgba(0, 0, 0, 0.5);}
|
|
|
+.uPopupWrap .area{position:relative;top:50%;left:50%;transform:translate(-50%, -50%);background-color:#fff;}
|
|
|
+/* 사용자 팝업 : 리뷰 > 업로드파일 확대보기 */
|
|
|
+.uPopupWrap .reviewPic .picList{position:relative;width:100%;height:100%;}
|
|
|
+.uPopupWrap .reviewPic .picList li{display:none;position:absolute;top:0;left:0;width:100%;height:100%;}
|
|
|
+.uPopupWrap .reviewPic .picList li.on{display:block;}
|
|
|
+.uPopupWrap .reviewPic .picList li iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0;}
|
|
|
+.uPopupWrap .reviewPic .picList li .img{position:absolute;top:0;left:0;width:100%;height:100%;background-repeat:no-repeat;background-position:50% 50%;background-size:contain;background-color:#ddd;}
|
|
|
+.uPopupWrap .reviewPic .btnArr{position:absolute;top:50%;transform:translateY(-50%);width:70px;height:70px;text-indent:-9999px;/*border-radius:100%; background-color:#fff;text-indent:-9999px; box-shadow:0 0 5px 5px rgba(0,0,0,0.1);*/}
|
|
|
+.uPopupWrap .reviewPic .btnArr:hover::after{border-color:#fd4802;}
|
|
|
+.uPopupWrap .reviewPic .btnArr::after{content:'';position:absolute;top:22px;width:20px;height:20px;border-left:2px solid #fff;border-bottom:2px solid #fff;}
|
|
|
+.uPopupWrap .reviewPic .btnArr.prev{left:-100px;}
|
|
|
+.uPopupWrap .reviewPic .btnArr.prev::after{left:26px;-ms-transform:rotate(45deg);-webkit-transform:rotate(45deg);transform:rotate(45deg);}
|
|
|
+.uPopupWrap .reviewPic .btnArr.next{right:-100px;}
|
|
|
+.uPopupWrap .reviewPic .btnArr.next::after{right:26px;-ms-transform:rotate(-135deg);-webkit-transform:rotate(-135deg);transform:rotate(-135deg);}
|
|
|
+.uPopupWrap .reviewPic .btnClose{position:absolute;top:-50px;right:0;width:50px;height:50px;background:url(../../image/btn_close_lg.png) no-repeat 50% 50%;text-indent:-9999px;}
|
|
|
+
|
|
|
+
|
|
|
+/* 반응형 :dashboard(20200522) --------------- */
|
|
|
+@media ( max-width:1023px ) {
|
|
|
+ /* 대시보드 */
|
|
|
+ #wrapper.dashboard{width:100%; min-width:100%;}
|
|
|
+ .dashboard .header-logo{width:100%}
|
|
|
+ .dashboard .lnbClose{display:none !important;}
|
|
|
+ .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 .panelStyle{margin: 0 0 30px;}
|
|
|
+ .dashboard .dbChart .boxleft{clear:left; margin:30px 15px 0 0; width:100%;}
|
|
|
+ .dashboard .dbChart .boxRight{clear:right; width:100%;margin:30px 0 20px; padding:0 20px;}
|
|
|
+ .dashboard footer{height:auto;}
|
|
|
+}
|
|
|
+
|
|
|
+/* 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; }
|
|
|
+ #main-wrapper{padding-bottom:97px;}
|
|
|
+}
|
|
|
+
|
|
|
+/* 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;}
|
|
|
+}
|
gagamel