/*******************************
  Class Name : /css/common/common.css
  Description : 공통
  Modification Information

       수정일       수정자           수정내용
    ----------------    ---------     ---------------------------
    2017.07.27     손영식    최초 생성

    author   :  웹 디자인팀 손영식
*******************************/

/*
@import url('https://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700,800');
@import url('http://fonts.googleapis.com/earlyaccess/notosanskr.css');
@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');
@import url('https://fonts.googleapis.com/css?family=Montserrat:100,200,300,400,600,700,800,900');
@import url('https://fonts.googleapis.com/css?family=Playfair+Display:400,700,900');
@import url('https://fonts.googleapis.com/css?family=Pacifico');
*/
@import url('../font/fontawesome-webfont.woff2');

html{position:relative;min-height:100%}
body {
	font-family:'Noto Sans KR', 'Noto Sans', '맑은고딕', MalgunGothic, -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif ;
	font-size:14px;
	font-weight: 400;
	color:#000;
	line-height: 1.5;
	background-color:#fff;
	overflow-x:auto;
  	overflow-y:auto;
  	letter-spacing:-.5px;
}
body,
nav#header{
	min-width: 768px;
}
div#page-container{
	min-width: 1024px;
	/* min-height:100vh;
	height:100%;
	/* 	min-width: 1007px; */
	position: relative;
}

.page-header-fixed.on-top-banner{
	/* padding-top: 140px; */
}
.page-header-fixed{
	/* padding-top: 70px; */
}

.on-sidebar.page-sidebar-fixed{
	padding-left: 200px;
}
.sidebar {
	width : 200px;
}

.on-sidebar .sidebar-collapse-btn a.fold, .sidebar-collapse-btn a.colaps {
	display:block;
}
.on-sidebar .sidebar-collapse-btn a.colaps, .sidebar-collapse-btn a.fold {
	display:none;
}

.page-sidebar-fixed{
	padding-left: 8px;
}

.navbar-toggler {
  display: none;
}
button{
	cursor:pointer;
}
.content{
	padding: 15px 15px 0 15px;
}
.on-bpinfo .content {
    padding-top: 63px;
}

/* 스크롤바 작동으로 인한 추가 2017-10-17 */
/* .content {
	position:fixed;
	right:0;
	top:118px;
	bottom:0;
	width: calc(100vw - 200px);
	overflow:auto;
	height: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: none;
}
 */


@media(max-width: 1199px){
	.on-sidebar.page-sidebar-fixed {
	    padding-left: 164px;
	}
/* 	.content {
		width: calc(100vw - 100px);
		width: 907px;
		left:100px;
	} */
}

@media(max-width: 767px){
	/*.page-sidebar-fixed {
	    padding-left: 0px;
	}
	*/
}

.hide{ display:none }



/*********************************
*		PAGE LOADER
*********************************/
#page-loader{
	position:fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	background:#E6E8EC;
	z-index:9999
}
#page-loader .hide{ display:none }

@-webkit-keyframes rotation{
	from{ -webkit-transform:rotate(0) }
	to{ -webkit-transform:rotate(359deg) }
}
@-moz-keyframes rotation{
	from{ -moz-transform:rotate(0) }
	to{ -moz-transform:rotate(359deg) }
}
@-o-keyframes rotation{
	from{ -o-transform:rotate(0) }
	to{ -o-transform:rotate(359deg) }
}
@keyframes rotation{
	from{ transform:rotate(0) }
	to{ transform:rotate(359deg) }
}




/*********************************
*		SPINNER
*********************************/
.spinner,.spinner-small{
	height:40px;
	width:40px;
	position:absolute;
	top:50%;
	left:50%;
	margin:-20px 0 0 -20px;
	border:2px solid #fff;
	border-top:2px solid #007aff;
	border-radius:100%
}
.spinner,.spinner-small{
	-webkit-animation:rotation .6s infinite linear;
	-moz-animation:rotation .6s infinite linear;
	-o-animation:rotation .6s infinite linear;
	animation:rotation .6s infinite linear
}
.spinner-small{
	border:2px solid rgba(0,0,0,.05);
	border-top:2px solid #007aff;
	height:30px;
	width:30px;
	margin:-15px 0 0 -15px
}


/*******************************
*		Breadcrumb
********************************/
.breadcrumb.style-pure {
  padding: 0;
/*   padding: 13px; */
  margin-bottom:0;
  list-style: none;
  background-color: #fff;

}
.breadcrumb-item + .breadcrumb-item::before {
  color: #bababa;
}
.breadcrumb-item {
  font-size:14px;
}
.breadcrumb-item.link {
	color:#0D5CAB;
}
.breadcrumb-item.active {
  color: #bababa;
}
.sub-title {
	letter-spacing: -1.5px;
	margin-bottom:0;
	padding-right:10px;
	color: #282828;
}
.sub-title-help {
	font-size:25px;
	color:#bababa;
}
.sub-title-help:hover {
	color:#0397D7;
}
.sub-title-divider {
/* 	height:1px;
	background-color:#dedede; */
	margin-top:10px;
	margin-bottom:10px;
}

.sub-title {
 position:relative;
}
.sub-title:before {
/*   position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 0px;
  content: "\f10c";
  font-family: 'FontAwesome';
  color: #0397d5;
  font-size: 13px;
 */

 position:absolute;
  top: 50%;
  right:0;
  left:0;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  height:3px;
  background-color:#111;
  width:100%;
 }
.sub-stitle {
	/* margin-top:10px; */
	margin-bottom:0;
	font-weight:700 !important;
	display:inline-block;
}

 .sub-title-box {
border:2px solid #f0f0f0;
padding:15px;
text-align:center;
margin-bottom:20p;
}
.sub-title-line {
	position:relative;
	/* margin-bottom:5px; */
}


/* 공통 Title with form */
.titleArea {
	height:36px;
}
.titleArea .float-left,
.titleArea .float-right {
	height:36px;
}
.titleArea .float-right {
	padding-top:1px;
}
.titleArea .float-left .sub-stitle {
	line-height:35px;
}
.titleArea .float-left .sub-stitleCnt {
	line-height:1.4;
	margin-top: 7px;
}
.titleArea .float-right .in-table {
	height:27px !important;
	padding: 5px 10px !important;
	vertical-align:baseline;
}
/* .titleArea .float-right label {
	line-height:35px;
}
 */
/************************ 버전 업 추가 CSS *************************/

.d-none {
  display: none !important;
}

.d-inline {
  display: inline !important;
}

.d-inline-block {
  display: inline-block !important;
}

.d-block {
  display: block !important;
}

.d-table {
  display: table !important;
}

.d-table-row {
  display: table-row !important;
}

.d-table-cell {
  display: table-cell !important;
}

.m-0 {
  margin: 0 !important;
}

.mt-0,
.my-0 {
  margin-top: 0 !important;
}

.mr-0,
.mx-0 {
  margin-right: 0 !important;
}

.mb-0,
.my-0 {
  margin-bottom: 0 !important;
}

.ml-0,
.mx-0 {
  margin-left: 0 !important;
}

.m-1 {
  margin: 0.25rem !important;
}

.mt-1,
.my-1 {
  margin-top: 0.25rem !important;
}

.mr-1,
.mx-1 {
  margin-right: 0.25rem !important;
}

.mb-1,
.my-1 {
  margin-bottom: 0.25rem !important;
}

.ml-1,
.mx-1 {
  margin-left: 0.25rem !important;
}

.m-2 {
  margin: 0.5rem !important;
}

.mt-2,
.my-2 {
  margin-top: 0.5rem !important;
}

.mr-2,
.mx-2 {
  margin-right: 0.5rem !important;
}

.mb-2,
.my-2 {
  margin-bottom: 0.5rem !important;
}

.ml-2,
.mx-2 {
  margin-left: 0.5rem !important;
}

.m-3 {
  margin: 1rem !important;
}

.mt-3,
.my-3 {
  margin-top: 1rem !important;
}

.mr-3,
.mx-3 {
  margin-right: 1rem !important;
}

.mb-3,
.my-3 {
  margin-bottom: 1rem !important;
}

.ml-3,
.mx-3 {
  margin-left: 1rem !important;
}

.m-4 {
  margin: 1.5rem !important;
}

.mt-4,
.my-4 {
  margin-top: 1.5rem !important;
}

.mr-4,
.mx-4 {
  margin-right: 1.5rem !important;
}

.mb-4,
.my-4 {
  margin-bottom: 1.5rem !important;
}

.ml-4,
.mx-4 {
  margin-left: 1.5rem !important;
}

.m-5 {
  margin: 3rem !important;
}

.mt-5,
.my-5 {
  margin-top: 3rem !important;
}

.mr-5,
.mx-5 {
  margin-right: 3rem !important;
}

.mb-5,
.my-5 {
  margin-bottom: 3rem !important;
}

.ml-5,
.mx-5 {
  margin-left: 3rem !important;
}

.p-0 {
  padding: 0 !important;
}

.pt-0,
.py-0 {
  padding-top: 0 !important;
}

.pr-0,
.px-0 {
  padding-right: 0 !important;
}

.pb-0,
.py-0 {
  padding-bottom: 0 !important;
}

.pl-0,
.px-0 {
  padding-left: 0 !important;
}

.p-1 {
  padding: 0.25rem !important;
}

.pt-1,
.py-1 {
  padding-top: 0.25rem !important;
}

.pr-1,
.px-1 {
  padding-right: 0.25rem !important;
}

.pb-1,
.py-1 {
  padding-bottom: 0.25rem !important;
}

.pl-1,
.px-1 {
  padding-left: 0.25rem !important;
}

.p-2 {
  padding: 0.5rem !important;
}

.pt-2,
.py-2 {
  padding-top: 0.5rem !important;
}

.pr-2,
.px-2 {
  padding-right: 0.5rem !important;
}

.pb-2,
.py-2 {
  padding-bottom: 0.5rem !important;
}

.pl-2,
.px-2 {
  padding-left: 0.5rem !important;
}

.p-3 {
  padding: 1rem !important;
}

.pt-3,
.py-3 {
  padding-top: 1rem !important;
}

.pr-3,
.px-3 {
  padding-right: 1rem !important;
}

.pb-3,
.py-3 {
  padding-bottom: 1rem !important;
}

.pl-3,
.px-3 {
  padding-left: 1rem !important;
}

.p-4 {
  padding: 1.5rem !important;
}

.pt-4,
.py-4 {
  padding-top: 1.5rem !important;
}

.pr-4,
.px-4 {
  padding-right: 1.5rem !important;
}

.pb-4,
.py-4 {
  padding-bottom: 1.5rem !important;
}

.pl-4,
.px-4 {
  padding-left: 1.5rem !important;
}

.p-5 {
  padding: 3rem !important;
}

.pt-5,
.py-5 {
  padding-top: 3rem !important;
}

.pr-5,
.px-5 {
  padding-right: 3rem !important;
}

.pb-5,
.py-5 {
  padding-bottom: 3rem !important;
}

.pl-5,
.px-5 {
  padding-left: 3rem !important;
}

.m-auto {
  margin: auto !important;
}

.mt-auto,
.my-auto {
  margin-top: auto !important;
}

.mr-auto,
.mx-auto {
  margin-right: auto !important;
}

.mb-auto,
.my-auto {
  margin-bottom: auto !important;
}

.ml-auto,
.mx-auto {
  margin-left: auto !important;
}


.float-left {
  float: left !important;
}

.float-right {
  float: right !important;
}

.float-none {
  float: none !important;
}

@media (min-width: 576px) {
  .float-sm-left {
    float: left !important;
  }
  .float-sm-right {
    float: right !important;
  }
  .float-sm-none {
    float: none !important;
  }
}

@media (min-width: 768px) {
  .float-md-left {
    float: left !important;
  }
  .float-md-right {
    float: right !important;
  }
  .float-md-none {
    float: none !important;
  }
}

@media (min-width: 992px) {
  .float-lg-left {
    float: left !important;
  }
  .float-lg-right {
    float: right !important;
  }
  .float-lg-none {
    float: none !important;
  }
}

@media (min-width: 1200px) {
  .float-xl-left {
    float: left !important;
  }
  .float-xl-right {
    float: right !important;
  }
  .float-xl-none {
    float: none !important;
  }
}

.border-0 {
  border: 0 !important;
}

.border-top-0 {
  border-top: 0 !important;
}

.border-right-0 {
  border-right: 0 !important;
}

.border-bottom-0 {
  border-bottom: 0 !important;
}

.border-left-0 {
  border-left: 0 !important;
}


.table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th {
	vertical-align:middle;
}

/* Custom */
/* .d-flex.justify-content-center.align-items-center {
  display: table-cell !important;
  text-align:center;
  vertical-align:middle;
  width:100%;
} */
.vertical-middle {
	vertical-align: middle !important;}
.vertical-top {
	vertical-align: top !important;}
.vertical-bottom {
	vertical-align: bottom !important;}
.vertical-sub {
	vertical-align: sub !important;}
.vertical-baseline {
	vertical-align: baseline !important;
	vertical-align: -webkit-baseline-middle !important;}



/* .row {
	border:1px solid red;
}
.row > [class*='col-'] {
	border:1px solid green;
} */

.w-25 {
  width: 25% !important;
}

.w-50 {
  width: 50% !important;
}

.w-75 {
  width: 75% !important;
}

.w-100 {
  width: 100% !important;
}

.h-25 {
  height: 25% !important;
}

.h-50 {
  height: 50% !important;
}

.h-75 {
  height: 75% !important;
}

.h-100 {
  height: 100% !important;
}

.mw-100 {
  max-width: 100% !important;
}

.mh-100 {
  max-height: 100% !important;
}

.col, .col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
  position: relative;
  min-height: 1px;
  padding-right: 15px;
  padding-left: 15px;
  	float:left;
}
.col-12{
	width: 100%;
}
.col-11 {
    width: 91.66666667%;
  }
  .col-10 {
    width: 83.33333333%;
  }
  .col-9 {
    width: 75%;
  }
  .col-8 {
    width: 66.66666667%;
  }
  .col-7 {
    width: 58.33333333%;
  }
  .col-6 {
    width: 50%;
  }
  .col-5 {
    width: 41.66666667%;
  }
  .col-4 {
    width: 33.33333333%;
  }
  .col-3 {
    width: 25%;
  }
  .col-2 {
    width: 16.66666667%;
  }
  .col-1 {
    width: 8.33333333%;
  }


@media (min-width: 992px) {
	.col-1, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-10, .col-11, .col-12 {
	float:left;
	}
}

.no-gutters {
  margin-right: 0;
  margin-left: 0;
}

.no-gutters > .col,
.no-gutters > [class*="col-"] {
  padding-right: 0;
  padding-left: 0;
}

/* Select Custom */
.select-custom {
	-webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
/*     appearance: none; */
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 2px;
}
.select-custom {
	width: 100%;
    font-size: 13px;
    height: 27px;
    /* line-height: 26px; */
    color: #111;
    background: url(../img/select-arrow@2x.png) 100% 50% no-repeat #fff;
    background-size:20px 8px;
    padding: 0 25px 0 10px !important;
    border:1px solid #ccc;
}

.select-custom.select-lg {
	height: 32px;
}
 /*For IE10+*/
.select-custom::-ms-expand {
        display: none;
}
 /*For IE9*/
.ie9 .select-custom{
	background:#fff;
	padding:3px 5px;
}
.form-control,
.select-custom {
	/* border-color:  #dcdcdc !important ; */
}

.form-inline .form-control {
	vertical-align:baseline;
}
.btn-toolbar {
	margin-left:0;
}
.code-box {
	margin:0;
}
.code-box > .col,
.code-box > .col-2 {
	position: relative;
	min-height: 1px;
	width: 16.66666667%;
	float:left;
	padding-left:0 !important;
}
.code-box > .col:not(:last-child),
.code-box > .col-2:not(:last-child) {
	 padding-right:8px !important;

}

nav[aria-label="Page navigation example"] {
	text-align:center;
}

/* 수정완료 후 삭제할것 */
.btn-toolbar > div:last-child {
	float:right;}
.btn-toolbar > div:first-child {
	float:left;}

.btn-toolbar.mb-1 {
	margin-bottom:10px !important;
}
.btn-toolbar .sub-stitle {
	float:left !important;
}
.d-inline.radio-list {
}
.input-daterange {
	width:180px;
}
.input-group-sm>.input-group-addon {
	height:auto;
	line-height:inherit;
}
.border {
	border:1px solid #ddd;
}
.modal-body.p-0 {
	text-align: center;
}
.form-inline.checkbox-group input + label {
	margin-right:16px;
}

/* 공지사항 템플릿 */
.noticeType {
	width:723px;
	height:auto;
	display:block;
	border:1px solid #ddd;
}
.noticeType + .noticeType {
	margin-top:15px;
}
.noticeImg {
	padding:5px;
}
.noticeText .notice-header {
	padding:20px;
	/* border-bottom:1px solid #eee; */
}
.noticeText .notice-header .title {
	margin-bottom:0;
	line-height:1;
	border-top: 3px solid #111;
	padding-top:10px;
	letter-spacing:-1px;
}
.noticeText .notice-body {
	padding:20px;
}
.noticeText .notice-body  p {
	font-size: 15px;
}
.noticeText .notice-footer {
	background-color:#f5f5f5;
	padding:20px;
}
.noticeText .notice-footer span {
	font-size:12px;
	opacity:.7;
	line-height:16px;
}

.noticePay {
	padding-top:50px;
	padding-bottom:50px;
	text-align:center;
}
.noticePay .pay-block {
	color:#fff;
}
.noticePay .pay-title {
	margin-bottom:40px;
}
.noticePay .pay-date {
	padding-bottom:30px;
	line-height:1.4;
	letter-spacing:-1px;
}
.noticePay p span {
	font-size:18px;
	border-bottom:1px solid red;

}
.icon-box {
	display:block;
	width:70px;
	height:70px;
	text-align:center;
	margin:0 auto;
	border-radius:50%;
}
.icon-box  i{
	font-size:33px;
	line-height:70px;
	padding-left:2px;
}