﻿@charset "utf-8";

*, *:after, *:before {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

html, body {
    font-family: 'Noto Sans KR', '맑은 고딕','Malgun Gothic','Apple SD Gothic Neo',나눔고딕,'Nanum Gothic',돋움,Dotum,굴림,Gulim,sans-serif;
    width: 100%;
	height: 100%;
	font-size: 14px;
	color: #666;
	line-height: 1.4;
	margin: 0;
	padding: 0;
	background-color: #f3f3f3;
    letter-spacing: -0.5px;
	-ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
     text-rendering: optimizeLegibility !important;
}
body { overflow-y: auto; }



h1 { font-size: 28px; }
h2 { font-size: 24px; }
h3 { font-size: 18px; }
h4 { font-size: 16px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }

.wrap {
    position: relative;
    width: 100%;
    min-height: 100%;
    margin: 0 auto;
    height: 100%; 
}

footer { color: #999; height: 120px; }
footer p { letter-spacing: 0; }
footer .logo img { width: 100%; height: auto; }
footer .footer-content { overflow: hidden; }
footer .links { overflow: hidden; }
footer .links > li { float: left; }
footer .links > li > a { font-weight: bold; color: #999; text-decoration: none; }

@media (min-width: 960px) { /* desktop */
    .wrap { min-width: 960px; }
    footer { padding: 20px 50px; }
    footer .logo { width: 90px; float: left; }
    footer .footer-content { padding-left: 20px; }
    footer .links { margin: 0 -10px 10px -10px; }
    footer .links > li { padding: 0 10px; font-size: 12px; }
    footer p { font-size: 11px; }
}
@media (max-width: 960px) { /* mobile */
    footer { padding: 15px 20px; }
    footer .logo { width: 70px; margin-bottom: 8px; }
    footer .links { margin: 0 -6px 10px -6px; }
    footer .links > li { padding: 0 6px; font-size: 11px; }
    footer p { font-size: 9px; }
}

/*header, aside .pd-menu, h1, h2, h3, h4, h5, h6 { font-family: 'Noto Sans KR'; }*/

a { color: #2dbdbe; }
a:hover { color: #53e3d1; }

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

/* Layout */
.flex { display: flex; flex-direction: row; flex-wrap: wrap; }
.flex.flex-padding { margin-left: -10px; margin-right: -10px; } /* flex-padding 하위 flex-fluid는 20px의 간격을 지닌다*/
.flex.flex-padding .flex-fluid { padding-left: 10px; padding-right: 10px; margin-bottom: 20px; }
.flex.flex-column { flex-direction: column; }
.flex.flex-vcenter { align-items: center; }
.flex-fluid { flex: 1; }
.flex-fluid .box { height: 100%; margin-bottom: 0; }
.flex-half { width: 50%; padding-left: 10px; padding-right: 10px; margin-bottom: 20px; }

.row { margin-left: -10px; margin-right: -10px; width: auto; }
.row > div[class^=col-] { padding: 0 10px; }
.nopadding { padding: 0 !important; }

.grid { display: flex; flex-direction: row; flex-wrap: wrap; margin-left: -10px; margin-right: -10px; }
.grid .grid-item .box { height: 100%; }
.grid .grid-item { padding-left: 10px; padding-right: 10px; margin-bottom: 20px; }
@media only screen and (min-width: 1681px) {
    .grid .grid-item { width: 50%; }
    .grid.grid-max-2 .grid-item { width: 50%; }
    .grid.grid-max-3 .grid-item { width: 33.33%; }
}
@media only screen and (min-width: 1281px) and (max-width: 1680px) {
    .grid .grid-item { width: 33.33%; }
    .grid.grid-max-2 .grid-item { width: 50%; }
}
@media only screen and (min-width: 961px) and (max-width: 1280px) {
    .grid .grid-item { width: 50%; }
}
@media only screen and (max-width: 960px) {
    .grid .grid-item { width: 100%; }
}


/* Box */
.box {
    display: flex;
    flex-direction: column;
    position: relative;
    background-color: #fff;
    border: 1px solid #e7e7e7;
    margin-bottom: 20px;
    -webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.05);
    box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.05);
}
.box h3 { font-weight: 700; margin-bottom: 10px; }
.box > p { font-size: 12px; margin-bottom: 18px; }
.box-title { font-size: 18px; font-weight: 700; }
.box-desc { font-size: 12px; font-weight: 400; margin-bottom: 12px; }
.box-header, .box-body { position: relative; }
.box-header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; height: 60px; padding: 0 10px 0 20px; }
.box-header.box-header-lg { height: 80px; }
.box-header h3 { margin-bottom: 0; }
.box-body { flex: 1; padding: 30px; border-top: 1px solid #e7e7e7; }
.box-footer { padding: 10px 20px; }
.box.box-solid { padding: 30px; }

/* 박스에 여백없이 테이블이 그대로 들어갈 경우*/
.box > .table { border: none; }
.box > .table + .pagination-container { padding: 15px; }
.box.box-transparent {
    background-color: transparent;
    border: none;
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

/* Message */
.message {
    background-color: #e4e4e4;
    border: 1px solid #dedede;
    margin-bottom: 20px;
    padding: 30px;
    -webkit-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.05);
    -moz-box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.05);
    box-shadow: 0px 5px 20px 0px rgba(0,0,0,0.05);
    position: relative;
}
.message.message-warning { background-color: #f37268; border-color: #e26056; color: #fff; }
.message.message-success { background-color: #39c0c7; border-color: #31b6bd; color: #fff; }
.message.message-closeable { padding-right: 50px; }
.message .close-alarm { text-indent: -9999px; font-size: 0px; position: absolute; top: 12px; right: 12px; display: block; width: 40px; height: 40px; background-color: transparent; }
.message .close-alarm:before,
.message .close-alarm:after {
    content: ''; display: block; width: 30px; height: 2px; background-color: #fff;
    position: absolute; left: 50%; top: 50%; margin-left: -14px; 
}
.message .close-alarm:before {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}
.message .close-alarm:after {
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}




/* SNS외부로그인 */
.providers { text-align: center; padding: 50px 0 30px; }
.providers .provider { display: inline-block; position: relative; margin: 0 20px; }
.providers .provider i {
    display: block; width: 60px; height: 60px;
    background-image: url('../images/provider.png');
    background-size: 180px 60px;
    margin-bottom: 10px; 
}
.providers .provider.Google i { background-position-x: 0; }
.providers .provider.Naver i { background-position-x: -60px; }
.providers .provider.Kakao i { background-position-x: -120px; }
.providers .provider p { text-align: center; font-size: 12px; }
.providers .provider form { position: absolute; display: none; top: 0; left: 0; }
.providers .provider form .remove-provider {
    display: block; width: 60px; height: 60px;
    text-indent: -9999px; border: none; outline: none;
    background: url('../images/provider_remove.png'); }
.providers .provider:hover form { display: block; }



/* ============ Library Custom ============= */

/* Jscrollpane */
.custom-scroll { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; height: 100%; }
.custom-scroll .jspPane { width: 100% !important; }
.custom-scroll .jspVerticalBar { width: 6px; right: 4px; background: transparent; }
.custom-scroll .jspTrack { background: transparent; }  
.jspContainer:hover .jspTrack { opacity: 1; }
.custom-scroll .jspDrag { background: rgba(0, 0, 0, 0.1); }

/* jQuery Confirm */
.jconfirm { font-family: '맑은 고딕','Malgun Gothic','Apple SD Gothic Neo',나눔고딕,'Nanum Gothic',돋움,Dotum,굴림,Gulim,sans-serif; }
.jconfirm.jconfirm-type-a .jconfirm-bg,
.jconfirm.jconfirm-type-b .jconfirm-bg { opacity: .6; background-color: #000; }
.jconfirm.jconfirm-type-a .jconfirm-box { display: flex; align-items: center; border-radius: 0px; padding: 60px 50px; }
.jconfirm.jconfirm-type-b .jconfirm-box { border-radius: 0px; padding: 60px 50px; }
.jconfirm.jconfirm-type-a .jconfirm-box div.jconfirm-title-c,
.jconfirm.jconfirm-type-b .jconfirm-box div.jconfirm-title-c { display: none !important; }
.jconfirm.jconfirm-type-a .jconfirm-box div.jconfirm-content-pane,
.jconfirm.jconfirm-type-b .jconfirm-box div.jconfirm-content-pane
{ font-size: 18px; font-weight: bold; word-break: keep-all; margin-bottom: 0; }
.jconfirm.jconfirm-type-a .jconfirm-box div.jconfirm-content-pane { padding-right: 40px; }
.jconfirm.jconfirm-type-b .jconfirm-box div.jconfirm-content-pane { text-align: center; margin-bottom: 40px; }
.jconfirm.jconfirm-type-a .jconfirm-box .jconfirm-buttons { padding-bottom: 0; display: flex; }
.jconfirm.jconfirm-type-b .jconfirm-box .jconfirm-buttons { padding-bottom: 0; text-align: center; }
.jconfirm.jconfirm-type-a .jconfirm-box .jconfirm-buttons button,
.jconfirm.jconfirm-type-b .jconfirm-box .jconfirm-buttons button { height: 50px; line-height: 50px; font-size: 18px; font-weight: bold; padding: 0 24px; margin-bottom: 0; }
.jconfirm-cont { text-align: left; }
.jconfirm-cont .jconfirm-cont-title { font-size: 18px; font-weight: 700; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid #ddd; }
.jconfirm-cont label { float: left; display: block; width: 80px; font-size: 12px; font-weight: 400; }
.jconfirm-cont label + p { overflow: hidden; font-size: 14px; margin-bottom: 10px; font-weight: 700; }
.jconfirm-cont input[type="text"] { font-size: 14px; }

/* CK Editor */
.cke { width: 100% !important; }
.cke_editable p { margin: 0; line-height: 1.6; }
.ck-editor__editable { min-height: 600px; }

/* Dropzone */
.dz-template { display: none; }
.dropzone .dz-message {
    width: 100%; min-height: 100px; padding: 20px;
    text-align: center; line-height: 60px;
    border: 1px dashed #c7c7c7;
    cursor: pointer;
    margin-bottom: 10px;
    background-image: linear-gradient(45deg, #f7f7f7 25%, #f0f0f0 25%, #f0f0f0 50%, #f7f7f7 50%, #f7f7f7 75%, #f0f0f0 75%, #f0f0f0 100%);
    background-size: 28.28px 28.28px;
}
.dropzone.dz-drag-hover .dz-message { background: #d8f3f4; border-color: #6fcbd0; }
.dropzone .dz-preview {
    position: relative; 
    display: flex; flex-direction: row; align-items: center;
    padding: 8px 16px 8px 8px; margin-bottom: 5px;
    border: 1px solid #e1e1e1; background-color: #f7f7f7; padding-bottom: 15px;
}
.dropzone .dz-thumb { }
.dropzone .dz-thumb img { max-width: 120px; height: auto; max-height: 80px; object-fit: contain; }
.dropzone .dz-details { flex: 1; margin-left: 10px; }
.dropzone .dz-fileinfo { margin-bottom: 8px; }
.dropzone .dz-filename { font-size: 14px; }
.dropzone .dz-filesize { font-size: 12px; font-weight: 400; color: #999; margin-left: 10px; }
.dropzone .dz-filesize strong { font-weight: 400; }
.dropzone .dz-progress { width: 100%; height: 8px; background-color: #e5e5e5; border: 1px solid #d5d5d5; position: relative; }
.dropzone .dz-progress .dz-upload { position: absolute; top: -1px; bottom: 1px; background-color: #2dbdbe; }
.dropzone .dz-error-message { color: #ff0000; line-height: 1.4; }
.dropzone .file-delete { background-color: #999; border-color: #999; }
.dropzone + .txt-help { margin-bottom: 20px; }
.dropzone .dz-preview.dz-error { background-color: #fff0f0; }
.dropzone .dz-preview.dz-error .dz-progress { display: none; }

/* Selectize */
.selectize-control { line-height: 1; }
.selectize-control.loading { position: relative; top: auto; left: auto; margin: 0;  }
.selectize-control.loading::after { position: absolute; top: 50%; left: 50%; margin-top: -8px; z-index: 1; }
.selectize-input { border-color: #d8d8d8; box-shadow: none; -webkit-box-shadow: none; line-height: 1; }
.selectize-input > input { height: 17px; }
.selectize-control.multi .selectize-input>div,
.selectize-control.single .has-items > span,
.selectize-control.single .has-items .item {
    background-color: #2c0058; color: #fff; border: 1px solid #2c0058;
    border-radius: 3px; padding: 11px 10px 10px;
}
.selectize-control.single.plugin-remove_button .remove-single { color: #fff; top: 4px; right: 5px; }

.selectize-control .selectize-input > .item + input { margin-left: 6px !important; }
.selectize-control.multi .selectize-input:not(.input-active) > .item + input {
   width: 32px !important; height: 32px !important; 
   background: url('../images/selectize_placeholder_icon.png') no-repeat 100% !important;
   cursor: pointer;
}

.selectize-control.multi .selectize-input>div.active { background-color: #2c0058; color: #fff; border: 1px solid #2c0058; }
.selectize-control.plugin-remove_button [data-value] { padding-right: 30px!important; }
.selectize-control.plugin-remove_button [data-value] .remove { width: 24px; font-size: 20px; border-left: none; line-height: 26px; }

.selectize-result { padding: 6px 8px; border-bottom: 1px solid #e7e7e7; }
.selectize-result > img { width: 30px; height: 30px; object-fit: contain; margin-right: 10px; }
.selectize-result .selectize-title { font-size: 14px; color: #333; margin-right: 10px;  }
.selectize-result .selectize-info { font-size: 11px; color: #999; }

.checks.checks-inline + .selectized + .selectize-control { display: inline-block; vertical-align: middle; width: calc(100% - 33px); }


/* Tooltipset & TooltipCustom */
.tooltip_templates { display: none; }
.tooltipster-sidetip .tooltipster-box { background-color: #323c48; border-radius: 0; border: none; }
.tooltipster-sidetip .tooltipster-content { padding: 30px; }


ul.list { padding-left: 10px; }
ul.list > li { list-style: disc; text-align: left; }

/* jquery-sortable */
body.dragging, body.dragging * { cursor: move !important; }
.dragged { position: absolute !important; opacity: 0.5; z-index: 2000; }
.uploaded.uploaded-multi .file.placeholder { position: relative; }
.uploaded.uploaded-multi .placeholder:before { position: absolute; /** Define arrowhead **/ }


::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}
::-webkit-scrollbar-button {
  width: 0px;
  height: 0px;
}
::-webkit-scrollbar-thumb {
  background: #fff;
	border: 1px solid #ccc;
  border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
  background: #eaf3fa;
}
::-webkit-scrollbar-thumb:active {
  background: #cbe7f1;
}
::-webkit-scrollbar-track {
  background: #e4e4e4;
  border-left: 1px solid #dbdbdb;

  border-radius: 0px;
}
::-webkit-scrollbar-track:hover {
  background: #dbdbdb;
}
::-webkit-scrollbar-track:active {
  background: #dbdbdb;
}
::-webkit-scrollbar-corner {
  background: transparent;
}


