@charset "UTF-8";
/*-------------------------------------------------------------------
    파일정의 : common.css 모든 페이지에 공통으로 적용되는 기본 css( 정렬, 크기, 여백 등등)
    작성자 : 이정은(lje)
    작성일 : 2019-11-26
    속성순서 : 표시 > 위치 > 넘침/흐름 > 크기/간격 > 박스모양 > 폰트/정렬 > 기타
-------------------------------------------------------------------*/

/* 정렬( overflow, float, text-align, vertical-align ) */
.of {
	overflow: hidden !important;
}

.fl {
	float: left !important;
}

.fr {
	float: right !important;
}

.fn {
	float: none !important;
}

.cl {
	clear: both !important;
}

.tl {
	text-align: left !important;
}

.tc {
	text-align: center !important;
}

.tr {
	text-align: right !important;
}

.ver-top {
	vertical-align: top !important;
}

.ver-mid {
	vertical-align: middle !important;
}

.ver-bot {
	vertical-align: bottom !important;
}

/* 포지션 ( position ) */
.po-re, .relative {
	position: relative;
}

.po-static, .static {
	position: static !important;
}

/* display */
.block {
	display: block !important;
}

.none {
	display: none;
}

.inblock {
	display: inline-block;
}

.inline {
	display: inline;
}

.center-block {
	display: block;
	margin-right: auto;
	margin-left: auto;
}

.invisible {
	visibility: hidden;
}

.flex, .d-flex {
	display: flex;
	display: -webkit-flex;
}

.flex-center {
	display: flex;
	display: -webkit-flex;
 	-webkit-align-items: center;
  	align-items: center;
	-webkit-justify-content: center;
	justify-content: center;
}

.flex-align-center {
	display: flex;
	display: -webkit-flex;
 	-webkit-align-items: center;
  	align-items: center;
}

.flex-align-end {
	display: flex;
	display: -webkit-flex;
 	-webkit-align-items: flex-end;
	align-items: flex-end;
}

.flex-space-between {
	display: flex;
	display: -webkit-flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
}

.flex-r {
	margin-left: auto;
}
.flex-r>* {
	display: inline-block;
	margin-left: 5px;
  vertical-align: middle;
}

.flex1 {
	flex: 1 !important;
	-webkit-flex: 1 !important;
}
.flex1dot5 {
	flex: 1.5 !important;
	-webkit-flex: 1.5 !important;
}
.flex1dot6 {
	flex: 1.6 !important;
	-webkit-flex: 1.6 !important;
}
.flex2 {
	flex: 2 !important;
	-webkit-flex: 2 !important;
}

/* 크기 ( width, height ) */
/* width */
.w-auto {
	width: auto !important;
}
.minW-auto {
	min-width: auto !important;
}

.w100 {
	width: 100% !important;
}

.w90 {
	width: 90%;
}

.w80 {
	width: 80%;
}

.w70 {
	width: 70%;
}

.w60 {
	width: 60%;
}

.w50 {
	width: 50%;
}

.w40 {
	width: 40%;
}

.w30 {
	width: 30%;
}

.min-w50px {
	min-width: 50px !important;
}
.min-w150px {
	min-width: 150px !important;
}

.w80px {
	width: 80px !important;
}

.w100px {
	width: 100px !important;
}

.w120px {
	width: 120px !important;
}

.w150px {
	width: 150px !important;
}

.w200px {
	width: 200px !important;
}

.w350px {
	width: 350px !important;
}

.w-select {
	width: 220px !important;
}

.w100-imp {
	width: 100% !important;
}

/* height */
.h-auto {
	height: auto !important;
}

.h100 {
	height: 100%;
}

.h40px {
	height: 40px;
}

.h100px {
	height: 100px;
}

/* 마진, 패딩 ( margin, padding ) */
/* margin */
.mar0 {
	margin: 0 !important;
}

.mt0 {
	margin-top: 0 !important;
}

.mr0 {
	margin-right: 0 !important;
}

.mb0 {
	margin-bottom: 0 !important;
}

.ml0 {
	margin-left: 0 !important;
}

.mt05 {
	margin-top: 5px !important;
}

.mt10 {
	margin-top: 10px !important;
}

.mt15 {
	margin-top: 15px !important;
}

.mt20 {
	margin-top: 20px !important;
}

.mt30 {
	margin-top: 30px !important;
}

.mr05 {
	margin-right: 5px !important;
}

.mr10 {
	margin-right: 10px !important;
}

.mr15 {
	margin-right: 15px !important;
}

.mr20 {
	margin-right: 20px !important;
}

.mr30 {
	margin-right: 30px !important;
}

.mb05 {
	margin-bottom: 5px !important;
}

.mb10 {
	margin-bottom: 10px !important;
}

.mb15 {
	margin-bottom: 15px !important;
}

.mb20 {
	margin-bottom: 20px !important;
}

.mb30 {
	margin-bottom: 30px !important;
}

.ml02 {
	margin-left: 2px !important;
}

.ml05 {
	margin-left: 5px !important;
}

.ml10 {
	margin-left: 10px !important;
}

.ml15 {
	margin-left: 15px !important;
}

.ml20 {
	margin-left: 20px !important;
}

.ml30 {
	margin-left: 30px !important;
}

.ml40 {
	margin-left: 40px !important;
}

.mlr05 {
	margin: 0 5px;
}

.mlr10 {
	margin: 0 10px;
}

.mlr20 {
	margin: 0 20px;
}

/* padding */
.pad0 {
	padding: 0 !important
}

.pad10 {
	padding: 10px !important;
}

.pad15 {
	padding: 15px !important;
}

.pad20 {
	padding: 20px !important;
}

.pt0 {
	padding-top: 0 !important;
}

.pr0 {
	padding-right: 0 !important;
}

.pb0 {
	padding-bottom: 0 !important;
}

.pl0 {
	padding-left: 0 !important;
}

.pt05 {
	padding-top: 5px !important;
}

.pt10 {
	padding-top: 10px !important;
}

.pt15 {
	padding-top: 15px !important;
}

.pt20 {
	padding-top: 20px !important;
}

.pt30 {
	padding-top: 30px !important;
}

.pr05 {
	padding-right: 5px !important;
}

.pr10 {
	padding-right: 10px !important;
}

.pr15 {
	padding-right: 15px !important;
}

.pr20 {
	padding-right: 20px !important;
}

.pr30 {
	padding-right: 30px !important;
}

.pb05 {
	padding-bottom: 5px !important;
}

.pb10 {
	padding-bottom: 10px !important;
}

.pb15 {
	padding-bottom: 15px !important;
}

.pb20 {
	padding-bottom: 20px !important;
}

.pb30 {
	padding-bottom: 30px !important;
}

.pl05 {
	padding-left: 5px !important;
}

.pl10 {
	padding-left: 10px !important;
}

.pl15 {
	padding-left: 15px !important;
}

.pl20 {
	padding-left: 20px !important;
}

.pl30 {
	padding-left: 30px !important;
}

.pb05 {
	padding-bottom: 5px !important;
}

.pb10 {
	padding-bottom: 10px !important;
}

.pb15 {
	padding-bottom: 15px !important;
}

.pb20 {
	padding-bottom: 20px !important;
}

.pb30 {
	padding-bottom: 30px !important;
}

.ptb007 {
	padding: 7px 0;
}

.plr0 {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.plr05 {
	padding: 0 5px !important;
}

.plr10 {
	padding: 0 10px !important;
}

.plr15 {
	padding: 0 15px !important;
}

.plr20 {
	padding: 0 20px !important;
}

/* 배경 ( background ) */
.bg-trans {
	background-color: transparent !important;
}

.bg-white {
	background-color: #fff !important;
}

.bg-navy {
	background-color: #252d3a !important;
}

.bg-gray {
	background-color: #f5f5f5 !important;
}

.bg-none {
	background: none !important;
}

/* 폰트 ( font, text ) */
.f-red {
	color: #cc0033 !important;
}

.f-black {
	color: #222;
}

.f-808 {
	color: #808080;
}

.f-000 {
	color: #000 !important;
}

.f-point {
	color: #ff6600;
}

.f-blue {
	color: #2d508a !important;
}

.f-blue2 {
	color: #1f68c9 !important;
}

.f-blue3 {
	color: #1d50a4 !important;
}

.f-white {
	color: #fff !important;
}

.f-admin-blue {
	color: #3b6cb9;
}

.f-bold {
	font-weight: 700 !important;
}
.f-violet {
	color: #a32576 !important;
}

.f-normal {
	font-weight: 400 !important;
}

.ft15 {
	font-size: 15px !important;
	line-height: 1.2;
}

.ft14 {
	font-size: 14px !important;
	line-height: 1.2;
}

.ft13 {
	font-size: 13px !important;
	line-height: 1.2;
}

.ft12 {
	font-size: 12px !important;
	line-height: 1.2;
}

.lh30 {
	line-height: 30px;
}

.lh1_6 {
	line-height: 1.6;
}

.txt-udline {
	text-decoration: underline;
}

.txt-udline:hover {
	color: #2d508a;
	text-decoration: underline;
}

em.required {
	color: #ed145b;
    font-style: normal;
}

/* ellipsis */
.ellipsis {
	text-overflow: ellipsis;
	white-space: nowrap;
	word-wrap: normal;
	width: 100%;
	overflow: hidden;
}
.ellipsis2 {
	position: relative;
}
.ellipsis2:before {
    content: '&nbsp';
    visibility: hidden;
}
.ellipsis2 .el-txt {
	position: absolute;
	left: 10px;
	right: 10px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.ellipsis2 .el-txt2 {
	position: absolute;
	left: 0;
	right: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 2줄 이상 말줄임 */
.multi-line-ellipsis {
  	max-width: 100%;
	word-break: break-all;
	overflow: hidden;
	position: relative;
	/* text-align: justify; */
	margin-right: -1em;
	padding-right: 1em;
	line-height: 1.5em;
}

.multi-line-ellipsis.two-line {
  max-height: calc( 1.5em * 2 );
}

.multi-line-ellipsis.three-line {
  max-height: calc( 1.5em * 3 );
}

.multi-line-ellipsis.five-line {
  max-height: calc( 1.5em * 5 );
}

.multi-line-ellipsis:before {
    content: '...';
    position: absolute;
    right: 0;
    bottom: 0;
}

.multi-line-ellipsis:after {
    content: '';
    position: absolute;
    right: 0;
    width: 1em;
    height: 1em;
    margin-top: 0.2em;
    background: #fff;
}

/* 보더 ( border ) */
.bt-none {
	border-top: none !important;
}

.br-none {
	border-right: none !important;
}

.bb-none {
	border-bottom: none !important;
}

.bl-none {
	border-left: none !important;
}

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

/* cursor */
.cursor, .clickable, .pointer {
	cursor: pointer;
}

.cursor-d {
	cursor: default;
}

.cursor-m, .move {
	cursor: move;
}

/* 스크롤바 영역 밖으로 생성 */
.scroll-space {
	padding-right: 15px;
    margin-right: -15px;
}
.scroll-space2 {
	padding-right: 20px;
    margin-right: -20px;
}

/* box-shadow */
.boxShad-none {
	box-shadow: none !important;
}