@charset "utf-8";
@import "component.css";
@import "space.css";

/*
 * Project		:	대시보드
 * File			:	common.css
 * Author		:	YoungJae Lee
 * Date			:	May. 2018
 * Description	:	문서 초기화,웹폰트,글로벌 클래스 네임,기본레이아웃,기본스타일(헤더,팝업,달력,첨부파일,프린트)
 */
 
 
 
/* --
	web reset
---------------------------------------------------------- */

html, body {height:100%; overflow:hidden;}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0; padding:0;}
fieldset,img {border:none; vertical-align: middle;}
dl,ul,ol,menu,li {list-style:none;}
.ck dl,.ck ul,.ck ol,.ck menu,.ck li, .viewContent dl,.viewContent ul,.viewContent ol,.viewContent menu,.viewContent li {list-style: revert;}
blockquote,q {quotes: none;}
blockquote:before,blockquote:after,q:before,q:after {content:''; content:none;}
input,select,textarea,button {vertical-align:middle;}
button {border:0 none; background-color:transparent; cursor:pointer;}
body,th,td,input,select,textarea,button {font-size: 13px; /*overflow-x: hidden; */ color: var(--he-gray-dark); font-weight: 500;
font-family: Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif; font-feature-settings: "tnum","cv13";}
a {color:inherit; text-decoration:none; cursor:pointer;}
a:active,a:hover {text-decoration:none;} 
address,caption,cite,code,dfn,em,var {font-style:normal; font-weight:normal;}
iframe {border:none; width:100%; height:100%;}
table {border-spacing:0; border-collapse:collapse;}
caption {overflow:hidden; position:absolute; width:0; height:0; line-height:0; text-indent:-9999px;}

*, ::after, ::before { -webkit-box-sizing: border-box; box-sizing: border-box;}

/* --
	font style
---------------------------------------------------------- */

/* :: 프리텐다드 */
@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: swap;
	src: local('Pretendard Black'), url('/static/font/pretendard/woff2/Pretendard-Black.woff2') format('woff2'), url('/static/font/pretendard/woff/Pretendard-Black.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 800;
	font-display: swap;
	src: local('Pretendard ExtraBold'), url('/static/font/pretendard/woff2/Pretendard-ExtraBold.woff2') format('woff2'), url('/static/font/pretendard/woff/Pretendard-ExtraBold.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: swap;
	src: local('Pretendard Bold'), url('/static/font/pretendard/woff2/Pretendard-Bold.woff2') format('woff2'), url('/static/font/pretendard/woff/Pretendard-Bold.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 600;
	font-display: swap;
	src: local('Pretendard SemiBold'), url('/static/font/pretendard/woff2/Pretendard-SemiBold.woff2') format('woff2'), url('/static/font/pretendard/woff/Pretendard-SemiBold.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url('/static/font/pretendard/woff2/Pretendard-Medium.woff2') format('woff2'), url('/static/font/pretendard/woff/Pretendard-Medium.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: swap;
	src: local('Pretendard Regular'), url('/static/font/pretendard/woff2/Pretendard-Regular.woff2') format('woff2'), url('/static/font/pretendard/woff/Pretendard-Regular.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 300;
	font-display: swap;
	src: local('Pretendard Light'), url('/static/font/pretendard/woff2/Pretendard-Light.woff2') format('woff2'), url('/static/font/pretendard/woff/Pretendard-Light.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url('/static/font/pretendard/woff2/Pretendard-ExtraLight.woff2') format('woff2'), url('/static/font/pretendard/woff/Pretendard-ExtraLight.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 100;
	font-display: swap;
	src: local('Pretendard Thin'), url('/static/font/pretendard/woff2/Pretendard-Thin.woff2') format('woff2'), url('/static/font/pretendard/woff/Pretendard-Thin.woff') format('woff');
}


/* :: 본고딕 */
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 100;
	src: url('/static/font/notokr/notokr-light.eot');
	src: url('/static/font/notokr/notokr-light.eot?#iefix') format('embedded-opentype'),
		 url('/static/font/notokr/notokr-light.woff2') format('woff2'),
		 url('/static/font/notokr/notokr-light.woff') format('woff');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 300;
	src: url('/static/font/notokr/notokr-regular.eot');
	src: url('/static/font/notokr/notokr-regular.eot?#iefix') format('embedded-opentype'),
		 url('/static/font/notokr/notokr-regular.woff2') format('woff2'),
		 url('/static/font/notokr/notokr-regular.woff') format('woff');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 500;
	src: url('/static/font/notokr/notokr-medium.eot');
	src: url('/static/font/notokr/notokr-medium.eot?#iefix') format('embedded-opentype'),
		 url('/static/font/notokr/notokr-medium.woff2') format('woff2'),
		 url('/static/font/notokr/notokr-medium.woff') format('woff');
}
@font-face {
	font-family: 'Noto Sans KR';
	font-style: normal;
	font-weight: 700;
	src: url('/static/font/notokr/notokr-bold.eot');
	src: url('/static/font/notokr/notokr-bold.eot?#iefix') format('embedded-opentype'),
		 url('/static/font/notokr/notokr-bold.woff2') format('woff2'),
		 url('/static/font/notokr/notokr-bold.woff') format('woff');
}

/* :: 나눔고딕 */
@font-face {
	font-family: 'Nanum Gothic';
	font-style: normal;
	font-weight: 400;
	src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot);
	src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.eot?#iefix) format('embedded-opentype'),
	url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff2) format('woff2'),
	url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.woff) format('woff'),
	url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Regular.ttf) format('truetype');
}
@font-face {
	font-family: 'Nanum Gothic';
	font-style: normal;
	font-weight: 700;
	src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.eot);
	src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.eot?#iefix) format('embedded-opentype'),
	url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff2) format('woff2'),
	url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.woff) format('woff'),
	url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-Bold.ttf) format('truetype');
}
@font-face {
	font-family: 'Nanum Gothic';
	font-style: normal;
	font-weight: 800;
	src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.eot);
	src: url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.eot?#iefix) format('embedded-opentype'),
	url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.woff2) format('woff2'),
	url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.woff) format('woff'),
	url(//fonts.gstatic.com/ea/nanumgothic/v5/NanumGothic-ExtraBold.ttf) format('truetype');
}

/* :: 한나체 - 도장 사용 */
@font-face {
  font-family: 'Hanna';
  font-style: normal;
  font-weight: 400;
  src: url(//fonts.gstatic.com/ea/hanna/v3/BM-HANNA.eot);
  src: url(//fonts.gstatic.com/ea/hanna/v3/BM-HANNA.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/hanna/v3/BM-HANNA.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/hanna/v3/BM-HANNA.woff) format('woff'),
       url(//fonts.gstatic.com/ea/hanna/v3/BM-HANNA.ttf) format('truetype');
}

/* 출처 – 이사만루 공폰트*/
@font-face {
    font-family: 'esamanru_Light';
    src: url('/static/font/esamanru/esamanru_Light.woff2') format('woff2');
}
.esamanru-light {font-family: 'esamanru_Light', sans-serif;}

@font-face {
    font-family: 'esamanru_Medium';
    src: url('/static/font/esamanru/esamanru_Medium.woff2') format('woff2');
}
.esamanru-medium {font-family: 'esamanru_Medium', sans-serif;}

@font-face {
    font-family: 'esamanru_Bold';
    src: url('/static/font/esamanru/esamanru_Bold.woff2') format('woff2');
}
.esamanru-bold {font-family: 'esamanru_Bold', sans-serif;}



/* --
	Global Classname
---------------------------------------------------------- */

/*  :: chrome input set */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {transition: background-color 5000s ease-in-out 0s !important; font-size: inherit !important;}

::-webkit-input-placeholder,
::-moz-placeholder,
:-ms-input-placeholder,
:-moz-placeholder {color: var(--he-gray-600); font-size:12px;}

/* :: 텍스트 제공 타입 */
.ir-pm {display: block; overflow: hidden; font-size: 0px; line-height: 0; text-indent: -9999px;} /* 사용된 이미지내 의미있는 텍스트의 대체텍스트를 제공할때 */
.ir-wa {display: block; overflow: hidden; position: relative; z-index: -10; width: 100%; height: 100%;} /* 중요한 이미지 대체텍스트로 이미지off시에도 대체 텍스트를 보여주고자 할때 */
.screen-out {overflow: hidden; position: absolute; width: 0; height: 0; line-height: 0; text-indent: -9999px;} /* 대체텍스트가 아닌 접근성을 위한 숨김텍스트를 제공할때 */
.cancel {text-decoration: line-through; color: var(--he-gray-500);}
.bold {font-weight: bold;}
.preLine {white-space: pre-line;}

/* :: useful */
.skip {width: 1px; height: 1px; font-size: 0; line-height: 0; position: absolute; left: -999px; overflow: hidden; visibility: hidden;}
.dimm {position: fixed; top: 0; left: 0; bottom: 0; right: 0; z-index: 95; background: rgba(0,0,0,.5);}
.cl-b {clear: both;}
.show {display: block;}
.hide {display: none;}
.clear-g {display: block; overflow: visible; width: auto; clear: both;}
.clear-g:after {display: block; visibility: hidden; height: 0; font-size: 0; clear: both; content: '';}
.t-l {text-align: left !important;}
.t-r {text-align: right !important;}
.t-c {text-align: center !important;}
.overflow {overflow: hidden !important;}
.overflow-y {overflow-y: hidden !important;}
.dis-inline {display: inline-block;}
.basic-height {line-height: 32px; display: inline-block;}
.scl {overflow-y:auto !important;}
.scl-x {overflow-x:auto !important;}

/* :: 위치 속성 공통 클래스 */
.f-l,
.fl-box {float: left;}
.f-r {float: right;}
.rel {position: relative;}
.ab {position: absolute;}
.ab-l {position: absolute; top: 0; left: 0;}
.ab-r {position: absolute; top: 0; right: 0;}
.static {position: static !important;}
.btn-r {position: absolute; top: 0px; right: 1px;}
.ab-n {position: inherit;}
.flex {display: -webkit-box; display: -ms-flexbox; display: flex;}
.flex.verLayout {flex-direction: column;}
.flex.ver-cen {align-items:center;}
.flex.ver-start {align-items:start;}
.flex.ver-end {align-items:end;}
.flex.spaceBet {justify-content: space-between;}
.flex > .fixCol {flex-shrink: 0;}
.flex > .flexCol {flex-grow: 1;}

/* :: loading bar */
#displayLoadingImgBox {display: none;}

.loading-wrap {position: absolute; top: 50%; left: 50%; margin-top: -4px; margin-left: -4px;}
.loading-wrap .loader {position: relative; width: 8px; height: 8px; background-color: var(--he-main1); box-shadow: -14px 0px 0px rgba(var(--he-main1-rgb), 0.5); border-radius: 50%;
    -webkit-animation: circle_classic 1s ease-in-out infinite alternate;
       -moz-animation: circle_classic 1s ease-in-out infinite alternate;
            animation: circle_classic 1s ease-in-out infinite alternate;}
@-webkit-keyframes circle_classic{
    0%{ opacity: 0.1; -webkit-transform: rotate(0deg) scale(0.5);}
   100%{opacity: 1; -webkit-transform: rotate(360deg) scale(1.2);}   
}
@-moz-keyframes circle_classic{
    0%{ opacity: 0.1; -moz-transform: rotate(0deg) scale(0.5);}
   100%{opacity: 1; -moz-transform: rotate(360deg) scale(1.2);}   
}
@keyframes circle_classic{
    0%{ opacity: 0.1; transform: rotate(0deg) scale(0.5);}
   100%{opacity: 1; transform: rotate(360deg) scale(1.2);}   
}



/* --
	jquery plugin style
---------------------------------------------------------- */

/* :: calendar */
.yearText:after{content:'년'}
.gldp-flatwhite {position: fixed; padding: 2px 3px 5px; background-color: var(--he-base); font-size: 12px; margin: 0 0 0 6px; min-width: 232px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    -ms-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    -o-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);}
    
.gldp-flatwhite .prev-arrow {font-size:16px;}
.gldp-flatwhite .core {float: left; position: relative; background-color: var(--he-base); text-align: center; box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;}

.gldp-flatwhite .monyear,
.gldp-flatwhite .monyear select {margin-top: 0px; background-color: var(--he-base); color: var(--he-gray-dark);}

.gldp-flatwhite .monyear span {margin: 0 5px;}
.gldp-flatwhite .prev-arrow,
.gldp-flatwhite .next-arrow {text-shadow: none; font-size: 18px; width: 20px; height: 20px;}
.gldp-flatwhite .prev-arrow,
.gldp-flatwhite .next-arrow {display: block; overflow: hidden; font-size: 0px; line-height: 0; text-indent: -9999px;}
.gldp-flatwhite .prev-arrow{background:url("/static/images/com/web/cal-prev.gif") no-repeat; background-size:8px auto; background-position:top 10px right}
.gldp-flatwhite .next-arrow{background:url("/static/images/com/web/cal-next.gif") no-repeat; background-size:8px auto; background-position:top 10px right }
.gldp-flatwhite .prev-arrow:hover,
.gldp-flatwhite .prev-arrow:focus,
.gldp-flatwhite .prev-arrow:active,
.gldp-flatwhite .next-arrow:hover,
.gldp-flatwhite .next-arrow:focus,
.gldp-flatwhite .next-arrow:active {color: var(--he-base);}
.gldp-flatwhite .prev-arrow-off,
.gldp-flatwhite .next-arrow-off {color: var(--he-gray-400);}
.gldp-flatwhite .dow {background-color: var(--he-gray-100); cursor: default; font-weight: bold;}
.gldp-flatwhite .sat {color: var(--he-blue);}
.gldp-flatwhite .sun {color: var(--he-red);}
.gldp-flatwhite .outday {color: var(--he-gray-400)!important;}
.gldp-flatwhite .mon,
.gldp-flatwhite .tue,
.gldp-flatwhite .wed,
.gldp-flatwhite .thu,
.gldp-flatwhite .fri,
.gldp-flatwhite .sat,
.gldp-flatwhite .sun,
.gldp-flatwhite .selected {border: 2px solid var(--he-base);}

.gldp-flatwhite .mon:hover,
.gldp-flatwhite .tue:hover,
.gldp-flatwhite .wed:hover,
.gldp-flatwhite .thu:hover,
.gldp-flatwhite .fri:hover,
.gldp-flatwhite .sat:hover,
.gldp-flatwhite .sun:hover {background-color: var(--he-gray-200);}
.gldp-flatwhite .noday {color: var(--he-gray-100); cursor: wait !important;}

.gldp-flatwhite .selected,
.gldp-flatwhite .selected:hover {font-weight: bold; color: var(--he-base); background-color: var(--he-main1);}

.gldp-flatwhite .today {box-shadow: inset 0 -2px 0px var(--he-main1); color: var(--he-main1); font-weight: bold;}

/* :: monthly picker */
.ui-datepicker .ui-datepicker-header {color: var(--he-base); padding: 0 !important; border: none; background-color: var(--he-main1);}

.ui-datepicker table {width: 96% !important; margin: 5px auto !important;}
.ui-datepicker table td {color: var(--he-gray-dark) !important; font-weight: 500 !important;}
.ui-datepicker table td:hover {cursor: pointer !important; background-color: var(--he-gray-100); transition: all 0.4s;}
.ui-state-active,
.ui-widget-content .ui-state-active,
.ui-widget-header .ui-state-active {font-weight: bold; background: var(--he-gray-200) !important; color: var(--he-main1) !important; border: none !important; text-align: left;}

.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default {text-align: center;}

select.mtz-monthpicker-year {display: block; width: 94%; border: none; background: none; outline: none; padding: 8px 0; color: var(--he-base); font-weight: bold; margin: 0 auto;}
select.mtz-monthpicker-year option {color: var(--he-gray-dark)}

/* :: fullcalendar */
.fc-day-header {padding: 5px 0 !important;}
.fc-sat {color: var(--he-blue);}
.fc-sun {color: var(--he-red);}
.fc-nonbusiness {background: var(--he-gray-300) !important;}
.fc-body .fc-row {min-height: calc((100vh - 151px) / 6)!important; max-height: 171px !important; height: auto !important;}
a.fc-more {font-size: 12px !important; color: var(--he-main1); display: inline-block; border-radius: 3px; padding: 2px 6px 3px; margin: 2px !important;}
a.fc-more:hover {background: var(--he-main1); color: #fff; transition: .3s; text-decoration: none !important;}
.fc-unthemed .fc-list-heading td {background: var(--he-gray-200) !important;}

@media (max-height: 700px) {
	.fc-body .fc-row {min-height:100px !important;}
}


/* --
	프린트 설정
---------------------------------------------------------- */
@media print {
	 .price_match_no_print {
        display:none !important;
    }
    #header{
    	display:none;
    }

	/* background image print */
	* {-webkit-print-color-adjust:exact; color-adjust: exact !important;} /* Chrome, Safari, Firefox */
}



/* --
	window popup
---------------------------------------------------------- */
.winPop-wrap {display:flex; flex-direction: column; width: 100%; height: 100%;}
.winPop-wrap > div {flex-shrink: 0;}
.winPop-wrap > div.winPop-body {flex-shrink: 1; flex-grow: 1;}

.winPop-head {display:flex; align-items:center; justify-content: space-between; height: 55px; border-bottom: 1px solid var(--he-gray-400); border-top: 2px solid var(--he-main1); background: var(--he-gray-100); padding: 0 15px;}
.winPop-head .titArea {font-size: 14px; font-weight: bold; display:flex; align-items:center;}
.winPop-head .titArea i {color: var(--he-main1); margin-right: 8px; font-size: 16px;}

.winPop-body {padding: 15px; overflow-y: auto;}
.winPop-body.type02 {padding: 0; overflow-y: hidden;}

.winPop-foot {display: flex; justify-content: center; align-items: center; height: 50px; border-top: 1px solid var(--he-gray-400); background: var(--he-gray-100);}
.winPop-foot > * {margin: 0 3px;}



/* --
	LAYER POPUP
---------------------------------------------------------- */
.popArea {display:none; position:fixed; top:0; left:0; right:0; bottom:0; z-index:100;}
.popDimm {display:block; position:fixed; top:0; left:0; right:0; bottom:0; background:#000000; opacity:0; z-index:110;}
.popWrap {position:fixed; top:50%; left:50%; width:280px; margin-left:-140px; z-index:120; perspective:600px; -webkit-perspective:600px; -moz-perspective:600px; -ms-perspective:600px; -o-perspective:600px;}
.popWrap.type02 {width:230px; margin-left:-115px;}
.popFront, .popBack {position:absolute; top:0; left:0; right:0; bottom:0; -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; opacity:0; transform-style:preserve-3d; -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; -o-transform-style:preserve-3d; backface-visibility:hidden; -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; -o-backface-visibility:hidden;}
.popFront {background-color:#ffffff; opacity:0;}
.popBack {background-color:#fb6e52;}
.popArea.on {display:block;}
.popArea.on .popDimm {animation:popDimm 0.4s forwards; -webkit-animation:popDimm 0.4s forwards; -moz-animation:popDimm 0.4s forwards; -ms-animation:popDimm 0.4s forwards; -o-animation:popDimm 0.4s forwards;}
.popArea.on .popFront {animation:popFront 1.2s ease-in-out forwards; -webkit-animation:popFront 1.2s ease-in-out forwards; -moz-animation:popFront 1.2s ease-in-out forwards; -ms-animation:popFront 1.2s ease-in-out forwards; -o-animation:popFront 1.2s ease-in-out forwards;}
.popArea.on .popBack {animation:popBack 1.2s ease-in-out forwards; -webkit-animation:popBack 1.2s ease-in-out forwards; -moz-animation:popBack 1.2s ease-in-out forwards; -ms-animation:popBack 1.2s ease-in-out forwards; -o-animation:popBack 1.2s ease-in-out forwards;}
.popArea.close {opacity:0;}
.popTit {position:absolute; top:0; left:0; right:0; padding:8px 15px; border-bottom:1px solid #e6e6ee; -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; border-top-left-radius:10px; border-top-right-radius:10px; background-color:#ffffff; color:#fb6e52; font-size:0.750rem; font-weight:bold; z-index:10;}
.popInner {overflow:hidden; position:relative; padding:48px 10px 12px;}
.popInner.type02 {padding-top:64px;}
.popInner.type03 {padding:25px;}
.popArea .btnWrap {margin-top:20px;}
.popArea .btnWrap.type02 {margin-top:30px;}
.popArea .btnWrap.type02 a {margin:0 2px;}
.popCfm .txtCfm {text-align:center; font-size:20px;}
.popCfm .accent {color:#fb6e52 !important;}
.popCfm .btnType01 {display:inline-block; padding:0 50px; margin-left:52px !important;}

.popArea.type02 .popFront, .popArea.type02 .popBack {animation:popOpen 0.4s forwards; -webkit-animation:popOpen 0.4s forwards; -moz-animation:popOpen 0.4s forwards; -ms-animation:popOpen 0.4s forwards; -o-animation:popOpen 0.4s forwards; transform-style:initial; -webkit-transform-style:initial; -moz-transform-style:initial; -ms-transform-style:initial; -o-transform-style:initial; backface-visibility:initial; -webkit-backface-visibility:initial; -moz-backface-visibility:initial; -ms-backface-visibility:initial; -o-backface-visibility:initial;}

@-webkit-keyframes popDimm {0% {opacity:0;} 100% {opacity:0.5;}}
@-webkit-keyframes popOpen {0% {opacity:0;} 100% {opacity:1;}}
@-webkit-keyframes popFront {0% {color:#ffffff; z-index:900; opacity:0; -webkit-transform:rotateY(180deg) translate(0); -moz-transform:rotateY(180deg) translate(0);} 30% {opacity:0; -webkit-transform:rotateY(180deg) translate(0); -moz-transform:rotateY(180deg) translate(0);} 70% {opacity:0;} 100% {opacity:1; z-index:1000; -webkit-transform:rotateX(0deg) rotateY(0deg); -moz-transform:rotateX(0deg) rotateY(0deg);}}
@-webkit-keyframes popBack {0% {z-index:1000; opacity:0; -webkit-transform:rotateX(0deg) rotateY(0deg) translate(-80px); -moz-transform:rotateX(0deg) rotateY(0deg) translate(-80px);} 30% {opacity:1; -webkit-transform:rotateY(0deg) translate(0); -moz-transform:rotateY(0deg) translate(0);} 100% {opacity:1; z-index:900; -webkit-transform:rotateY(-180deg); -moz-transform:rotateY(-180deg);}}

/* 팝업  관련 CSS CLASS 추가  2016-10-06 */
.print-container {padding: 10px 10px; margin-bottom: 20px;}
.print-frm {padding: 5px;}
.head-wrap {width: 100%; text-align: center;}
.head-tit {display: inline-block; height: 25px; line-height: 25px; width:150px; border-radius: 10px; padding: 10px 10px; font-weight: bold; font-size: 25px; border:1px solid; font-family: '맑은 고딕',verdana,arial,helvetica,sans-serif;}
.memo-cont {padding: 25px; font-size: 16px !important; font-family: '맑은 고딕',verdana,arial,helvetica,sans-serif;}




	
	
	
	

/* --
	file attach --- old (추후 확인 후 삭제)
---------------------------------------------------------- */
.attachFile {display: block; height: 22px; margin-bottom: 5px;}

.jquery-filestyle {display: inline-block; padding: 4px 20px; background: #fff; border: 1px solid #3494f3; color: #3494f3 !important; font-size: 12px; cursor: pointer;}
.jquery-filestyle label {padding: 0 20px;}
.jquery-filestyle * {color: inherit !important; vertical-align: top; cursor: pointer;}
.fileDownLst .btnType01 {margin-left: 5px;}

.fileDownLst > .MultiFile-label {padding-top: 5px;}
.fileDownLst > .MultiFile-label:first-of-type {padding-top: 0;}

.MultiFile-label {font-size: 12px; display: flex; align-items: center;}
.MultiFile-label:hover {text-decoration: underline; color: var(--he-main1); cursor: pointer;}

.MultiFile-remove {}

.icn_fileDel {background: #dd2424; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 5px;}
.icn_fileDel img {}

.MultiFile-export {}
.MultiFile-export input {width: 100%; padding-top: 2px; line-height: 1em; background: none; color: #4f525a; font-size: 12px; font-weight: normal; text-align: right; outline: none;}
.MultiFile-export i {color: var(--he-main1);}

.MultiFile-title {display: inline-block; padding: 0 8px;}

.fileLst02 > li {margin-top: 3px;}
.fileLst02 > li:first-child {margin-top: 0;}

.fileLstDown {display: inline-block; padding-left: 12px; background: url(/static/images/com/web/icon_file_list.png) left 5px no-repeat; vertical-align: top;}

.fileLstDown:hover,
.fileLstDown:focus {color: #fb6e52; text-decoration: underline;}

.btnAdd {position: absolute; top: 15px; right: 20px;}

.previewFileLst .MultiFile-export {}
.previewFileLst.MultiFile-title {margin-top: 0;}
.previewFileLst > div {padding: 5px; max-height: 130px; overflow-x: hidden; overflow-y: auto !important; background: #fafafa; border: 1px solid #d1d1d1;}

.previewFile {margin-top: 20px;}
.tit-cont.preview {font-size: 12px; border-left: 2px solid #fd637d;}
.previewFile {height: 80%;}
.previewFile ul {margin-left: 3px; margin-top: 5px; overflow-x: hidden; margin-bottom: 20px; background: #fafafa; border: 1px solid #d1d1d1;}
.previewFile li {width: auto; border-top: 1px dashed #adadad; padding: 10px 10px;}
.previewFile li:first-child {border-top: none;}
.previewFile li p {font-size: 12px;}
.previewFile li p:before {content: '＊'; color: #ff618e;}
.previewFile li img {width: 100%; height: auto; cursor: pointer;}

.imgFile,
.docFile {position: relative;}
.imgFile .attach-i,
.docFile .attach-i {position: absolute; left: 90px; top: 4px; color: #2872bb;}
.fileWrap {padding: 3px 0 0;}
.fileWrap.type-inline {position: relative; width: 100%; height: 30px; padding: 0;}
.fileWrap.type-inline .attachFile {position: absolute; top: 6px; margin: 0; display: inline-block;}
.fileWrap.type-inline .fileList {position: absolute; left: 90px; top: 5px; margin: 0; padding: 0; display: inline-block; border: none;}
.fileList,
.imgFileList,
.docFileList {box-sizing: border-box; padding: 5px; overflow-y: auto; border: 1px solid #e0e0e0;}
.fileList {border: none; margin-top: 0;}

.btnFile {display: inline-block; position: relative; vertical-align: top;}
.btnFile a {display: inline-block; height: 12px; line-height: 12px; padding: 4px 20px; border: 1px solid #41515d; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; color: #41515d !important; font-size: 12px; vertical-align: top; z-index: 10;}
.btnFile input {overflow: hidden; position: absolute; top: 2px; left: 2px; width: 0; height: 0; border: none; background: none;}
.btnAdd {position: absolute; top: 15px; right: 20px;}


/* --
	fileUploadForm --- new
---------------------------------------------------------- */
.fileAttachWrap {width: 100%; height: 100%;}

/* input file custom */
.fileAttachWrap .fileAttachBtn {}
.fileAttachWrap .fileAttachBtn label {padding: 8px 20px; background-color:var(--he-main1); border-radius: 4px; color: white; cursor: pointer; display: inline-block;}
.fileAttachWrap .fileAttachBtn input {display: none;}	

.fileAttachWrap .fileList {height: calc(100% - 40px); margin-top: 10px; overflow-y: auto; padding: 0 5px 5px; border: 1px solid var(--he-gray-400); position: relative;}
.fileAttachWrap .fileDownLst {min-height: 100%;}

/* --
	"댓글" 레이아웃 - 게시판 및 전자결재에서 공통 사용
----------------------------------------------------------------------------------------------------- */
.comWrap{overflow:hidden; margin-top:30px; position:relative; background:#fff;}

.comCount {padding:0 10px;}
.comCount i {color:#5e5e77;}
.comCount span {font-weight:900; color:#dc3e2d;}

.comWrite {margin-top:15px;}
.comWrite .txt-wrap {overflow-y:auto;}
.comWrite .txt-wrap textarea {height:80px;}
.comWrite .comSaveArea {display: flex; justify-content: flex-end; background: #f9f9fa; border-bottom: 1px solid #d4d5d6; border-right: 1px solid #d4d5d6; border-left: 1px solid #d4d5d6; text-align: right;}
.comWrite .comSaveBtn {height:40px !important; line-height:40px !important;}

.comWrite.bigCom {margin-top: 0; background: #f9f9fa; padding:20px 30px; border-bottom:1px solid #d4d5d6;}
.comWrite.bigCom .comSaveArea {background:#fff;}

.comLstWrap {}
.comLst {padding:10px 10px; border-bottom:1px solid #d4d5d6; line-height: 20px;}
.comName {font-weight:800; font-size:13px;}
.comDate {display:inline-block; margin-left:3px; color:#a4a4a4; font-size:12px; font-weight:normal;}
.comBtnArea {display:flex; justify-content: flex-end; overflow:hidden;}
.comBtnArea em {margin: 0 5px;}
.comBtnArea a {float:left; border-left:2px solid #d4d5d6; padding:0 8px;}
.comBtnArea a:first-child {border-left:none;}
.comBtnArea a i {margin-right:5px; color:#9999a9;}
.comCon {margin-top:5px; line-height:1.6; white-space: pre-wrap;}
.comLst.reply .overflow, .comLst.reply .comCon {margin-left: 28px;}
.frmComment:not(.modify) .modify {display: none;}
.frmComment:not(.reply) .reply {display: none;}
.sec-edit:not(.active) {display: none;}
.del-text {color: #c0c0c0;}