#wrap{
	position: relative;
	width: 100%;
	height: 100%;
}

/* ================ layout ================ */
/* -- header -- */
#header{
	position: fixed;
	width: 100%;
	height: 55px;
	top: 0;
	left: 0;
	padding-top: 20px;
	border-bottom: 1px #dedede solid;
	background: #fff;
	z-index: 1000;	
}

#header .otis-logo{
	width: 130px;
	margin: auto;
	text-align: center;
}
#header .all-menu{
	display: block;
	position: absolute;
	top: 20px;
	left: 10px;
	width: 25px;
	height: 18px;
}
#header .all-menu i{
	display: block;
	width: 100%;
	height: 3px;
	margin-bottom: 4px;
	background-color: #041e42;
}
#header .all-menu i:nth-child(2){
	width: 90%;
}
#header .top-side{
	position: absolute;
	top: 20px;
	right: 10px;
	/* width: 60px; */
	width: 65px;
	text-align: right;
}
#header .top-side a{
	display: inline-block;
	width: 28px;
}
#header .top-side i{
	display: inline-block;
	height: 20px;
	text-align: center;
}
#header .top-side i img{
	height: 100%;
}

.bookmark-menu{
	display:block;
	position: absolute;
	top: 54px;
	right: 0;
	/* padding: 15px; */
	background: #fff;
	border: 1px #ccc solid;
	z-index: 1000;
}
.bookmark-menu li{
	/* margin-bottom: 10px; */
	padding: 5px 15px 5px 15px;
}
.bookmark-menu li:last-child{
	margin-bottom: 10px;
	
}
.bookmark-menu li:nth-child(2){
	margin-top: 10px;
}


/* -- GNB -- */

 .gnb-navigation{
	position: fixed;
	display: flex;
	display: -webkit-flex;
	top: 0;
	left: -390px;
	width: 380px;
	height: 100%;
	max-height: 100%;
	background: #041e43;
	z-index: 1030;	
 }
 @media(max-width: 480px){ 
	 .gnb-navigation{
		left: -92%;
		width: 90%;
	 }
 } 
 /*kimsungjun*/
 /* burger */
#header .burger {
	position:absolute;
	    display: block;
    top: 20px;
    left: 10px;
    width: 25px;
    height: 18px;
}
#header .hidden {
  visibility: hidden;
}
#header button {
  cursor: pointer;
}

/* remove blue outline */
#header button:focus {
  outline: 0;
}

#header .burger-button {
  position: relative;
  height: 20px;
  width: 42px;
  display: block;
  z-index: 999;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  pointer-events: all;
  transition: transform .6s cubic-bezier(.165,.84,.44,1);
}

#header .burger-bar {
  background-color: #130f40;
  position: absolute;
  top: 50%;
  right: 6px;
  left: 6px;
  height: 3px;
  width: auto;
  margin-top: -1px;
  transition: transform .6s cubic-bezier(.165,.84,.44,1),opacity .3s cubic-bezier(.165,.84,.44,1),background-color .6s cubic-bezier(.165,.84,.44,1);
}

#header .burger-bar--1 {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}

#header .burger-bar--2 {
  /* transform-origin: 100% 50%; */
  transform-origin: 0% 100%;
  transform: scaleX(.8);
}

#header .burger-button:hover .burger-bar--2 {
  transform: scaleX(.8);
}

#header .no-touchevents .burger-bar--2:hover {
  transform: scaleX(.8);
}

#header .burger-bar--3 {
  transform: translateY(8px);
}

#header #burger.active .burger-button {
  transform: rotate(-180deg);
}

#header #burger.active .burger-bar {
  /* background-color: #fff; */
}

#header #burger.active .burger-bar--1 {
  transform: rotate(45deg)
}

#header #burger.active .burger-bar--2 {
  opacity: 0;
}

#header #burger.active .burger-bar--3 {
  transform: rotate(-45deg)
}

/** sidebar **/

.sidebar .slide-enter-active,
.sidebar .slide-leave-active
{
  transition: transform 0.5s ease;
}

.sidebar .slide-enter,
.sidebar .slide-leave-to {
  transform: translateX(-100%);
  transition: all 150ms ease-in 0s
}

.sidebar .sidebar-backdrop {
  /* background-color: rgba(19, 15, 64, .4); */
  background: rgba(0,0,0,0.2);
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  cursor: pointer;
  z-index: 2000;
  /* top :54px; */
}

.sidebar .sidebar-panel {
  display: flex;
  /* overflow-y: auto; */
  /* background-color: #130f40; */
  position: fixed;
  left: 0;
  top: 0;
  height: 100vh;
  z-index: 2000;
  
  width: 380px;
  /* top :54px; */
}

@media (max-width: 480px){
	.sidebar .sidebar-panel {	   
	    width: 90%;
	}
}
 /*kimsungjun*/
 
.main-nav{
	flex: 0 0 auto;
	-webkit-flex:  0 0 auto;
	width: 130px;
	padding-top: 30px;
	background: #041e43;
}
.main-nav .top-menu{
	padding-bottom: 10px;
}
.main-nav .top-menu a{
	display: block;
	padding: 5px 15px;
	color: #c9c9c9;
	font-size: 1.2rem;
}
.main-nav .main-menu{
	width :100%; 
	border-top: 1px #304462 solid;
}
.main-nav .main-menu li{
	font-weight: bold;
}
.main-nav ul li.active{
	background: #113465;
}
.main-nav ul li a{
	display: block;
	padding: 10px 15px;
	color: #c9c9c9;
}
.main-nav ul li.active a{
	color: #fff;
}
.subnav-area{
	flex: 1;
	-webkit-flex: 1;
	height: 100%;
	background: #fff;
}
.subnav-area .btn-close{
    position: absolute;
    top: 15px;
    right: 15px;
    color: #f65275;
	font-size: 60px;
}

.subnav-area .burger {
	position:absolute;
	    display: block;
    top: 15px;
    right: 25px;
    width: 25px;
    height: 18px;
}
.subnav-area .hidden {
  visibility: hidden;
}
.subnav-area button {
  cursor: pointer;
}

/* remove blue outline */
.subnav-area button:focus {
  outline: 0;
}

.subnav-area .burger-button {
  position: relative;
  height: 20px;
  width: 42px;
  display: block;
  z-index: 999;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  pointer-events: all;
  transition: transform .6s cubic-bezier(.165,.84,.44,1);
}

.subnav-area .burger-bar {
  background-color: #f65275;
  position: absolute;
  top: 50%;
  right: 6px;
  left: 6px;
  height: 3px;
  width: auto;
  margin-top: -1px;
  transition: transform .6s cubic-bezier(.165,.84,.44,1),opacity .3s cubic-bezier(.165,.84,.44,1),background-color .6s cubic-bezier(.165,.84,.44,1);
}

.subnav-area .burger-bar--1 {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}

.subnav-area .burger-bar--2 {
  /* transform-origin: 100% 50%; */
  transform-origin: 0% 100%;
  transform: scaleX(.8);
}

.subnav-area .burger-button:hover .burger-bar--2 {
  transform: scaleX(.8);
}

.subnav-area .no-touchevents .burger-bar--2:hover {
  transform: scaleX(.8);
}

.subnav-area .burger-bar--3 {
  transform: translateY(8px);
}

.subnav-area #burger.active .burger-button {
  transform: rotate(-180deg);
}

.subnav-area #burger.active .burger-bar {
  /* background-color: #fff; */
}

.subnav-area #burger.active .burger-bar--1 {
  transform: rotate(45deg)
}

.subnav-area #burger.active .burger-bar--2 {
  opacity: 0;
}

.subnav-area #burger.active .burger-bar--3 {
  transform: rotate(-45deg)
}













.subnav-area .nav-inner{
	width: 100%;
	padding: 95px 0 50px 0; 
	overflow: hidden;
}
.subnav-area .nav-scroll{    
    overflow: scroll; 
    overflow-x: hidden;
    /* height: 540px; */
    height: 100vh;
    border-top: 1px #dedede solid;
}
.subnav-area .nav-scroll > ul{
	width: 100%; 
}
.subnav-area .nav-scroll .sub-nav{
	margin-bottom: 25px;
}
.subnav-area .nav-scroll .sub-nav h3{
	padding: 11px 20px;
	border-bottom: 1px solid #dedede;
	color: #041e43;
	font-size: 16px;
	font-weight: 800;
}
.subnav-area .nav-scroll .sub-nav .sub-menu > li{
	position: relative;
}
.subnav-area .nav-scroll .sub-nav .sub-menu > li > a {	
	position: relative;
	display: block;
	padding: 8px 20px;
	border-bottom: 1px #dedede solid;
	font-size: 14px;    
}
.subnav-area .nav-scroll .sub-nav .sub-menu .nav-list{
	/* display: none; */
	border-bottom: 1px #dedede solid;
}
.subnav-area .nav-scroll .sub-nav .sub-menu .nav-list a{
	display: block;
	padding: 5px 20px;
	font-size: 13px;
}
.subnav-area .nav-scroll .sub-nav .sub-menu .nav-list a.active{
	color: #041e43;
    font-weight: bold;
}
.subnav-area .nav-scroll .sub-nav .sub-menu .nav-list a:before{
	content: "·";
	display: inline-block;
	margin-right: 1px;
}
.subnav-area .nav-scroll .sub-nav .sub-menu > li > a > i , .subnav-area .nav-scroll .sub-nav .sub-menu > li > a > svg{
	display: block;
	position: absolute;
	top: 12px;
	right: 15px;
	width: 15px;
	height: 9px;
	color: #ccc;
	transition: all ease 0.3s;
}
.subnav-area .nav-scroll .sub-nav .sub-menu > li.active > a{
	color: #f65275;
}
.subnav-area .nav-scroll .sub-nav .sub-menu > li.active > a > i , .subnav-area .nav-scroll .sub-nav .sub-menu > li.active > a > svg{
	right: 18px;
	-webkit-transform: rotateY(-180deg);
	transform: rotateY(-180deg);
	color: #f65275;
}
.nav-inner .nav-scroll > ul > li:last-child{
	height: 520px;
}

/* -- footer -- */
.footer{
	padding: 10px 10px 70px 10px;
	background: #eee;
	text-align: center;
	font-size: 1.2rem;
}
.footer address{
	margin-bottom: 10px;
}
.footer .button{
	padding: 3px 10px;
	font-size: 12px;
}
.fixfixed #wrap{
	min-height: 100%;
	height: initial;
}
.fixfixed .footer-menu{
	position: absolute;
	bottom: 0;
}
.footer-menu{
	position: fixed;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 60px;
	padding: 10px 0;
	background: #041e42;
	text-align: center;
	z-index: 1000;
}
.footer-menu a{
	display: block;
	float: left;
	width: 20%;
	color: #fff;
	font-size: 0.9rem;
}
.footer-menu i{
	display: block;
	width: 30px;
	height: 30px;
	margin: auto;
}
.footer-menu .dash{
	background: url(../images/icon_dash.png) no-repeat;
	background-size: 100%;
	-webkit-background-size: 100%;
}
.footer-menu .calendar{
	background: url(../images/icon_calendar.png) no-repeat;
	background-size: 100%;
	-webkit-background-size: 100%;
}
.footer-menu .todo{
	background: url(../images/icon_todo.png) no-repeat;
	background-size: 100%;
	-webkit-background-size: 100%;
}
.footer-menu .notice{
	background: url(../images/icon_notice.png) no-repeat;
	background-size: 100%;
	-webkit-background-size: 100%;
}
.footer-menu .svey{
	background: url(../images/icon_svey.png) no-repeat;
	background-size: 100%;
	-webkit-background-size: 100%;
}

.footer-menu .employee{
	background: url(../images/icon_employee.png) -6px -86px no-repeat;
}

/* ================ 서브상단  ================ */
.content-top{
	position: relative;
	padding: 0 10px;
	background: #fff;
	box-shadow: 0px 1px 4px rgba(0, 0, 0, .2);
	/*kimsungjun container에서 상단 으로 이동 20200318원복*/
	/* top: 55px; */
   /*  z-index: 1; */
}
.content-top .title-area{
	position: relative;
	height: 45px;
}
.content-top .title-area h2{
	color: #333;
	font-size: 1.8rem;
	line-height: 4.5rem;
}
.content-top .title-area h2 i{
	display: inline-block;
	width: 22px;
	height: 22px;
	margin-bottom: 2px;
	/*border: 1px #dedede solid;
	border-radius: 2px;*/
	font-size: 2.2rem;
	color: #2767c1;
	text-align: center;
	line-height: 1.8rem;
	vertical-align: middle;
}
.content-top .title-area .open-depthmenu{
	display: inline-block;
	border: 1px #dedede solid;
	border-radius: 50px;
	width: 25px;
	height: 25px;
	vertical-align: middle;
	line-height: 2.3rem;
	text-align: center;
}
.content-top .title-area .aside-btn{
	position: absolute;
	top: 12px;
	right: 0;
}
.content-top .title-area .aside-btn a{
	margin-left: 5px;
	color: #999;
	font-size: 12px;	
}
.content-top .title-area .aside-btn i{
	display: inline-block;
	width: 17px;
	height: 17px;
	margin-right: 3px;
	border: 1px #ccc solid;
	border-radius: 100%;
	text-align: center;
	line-height: 15px;
}
.content-top .page-btn{
	padding: 8px 0;
	border-top: 1px #dedede solid;
	text-align: right;
}
.content-top .page-btn button,
.content-top .page-btn a{
	height: 30px;
}
/*kimsungjun 간격이 벌어지지 않아서 추가*/
.content-top .page-btn button.btn_default {
	margin-right:3px;
}
.content-top .page-btn button.btn_default:last-child {
    margin-right: 0;
}
/*kimsungjun 간격이 벌어지지 않아서 추가*/

/* lnb */
.container_fix_top .sidebar .sidebar-panel {
 
  width : 200px;
  /* top :54px; */
}
 /* burger */
.lnb-close .burger {
	position:absolute;
	    display: block;
    top: 10px;
    right: 10px;
    width: 25px;
    height: 18px;
}
.lnb-close .hidden {
  visibility: hidden;
}
.lnb-close button {
  cursor: pointer;
}

/* remove blue outline */
.lnb-close button:focus {
  outline: 0;
}

.lnb-close .burger-button {
  position: relative;
  height: 20px;
  width: 42px;
  display: block;
  z-index: 999;
  border: 0;
  border-radius: 0;
  background-color: transparent;
  pointer-events: all;
  transition: transform .6s cubic-bezier(.165,.84,.44,1);
}

.lnb-close .burger-bar {
  background-color: #130f40;
  position: absolute;
  top: 50%;
  right: 6px;
  left: 6px;
  height: 3px;
  width: auto;
  margin-top: -1px;
  transition: transform .6s cubic-bezier(.165,.84,.44,1),opacity .3s cubic-bezier(.165,.84,.44,1),background-color .6s cubic-bezier(.165,.84,.44,1);
}

.lnb-close .burger-bar--1 {
  -webkit-transform: translateY(-8px);
  transform: translateY(-8px);
}

.lnb-close .burger-bar--2 {
  /* transform-origin: 100% 50%; */
  transform-origin: 0% 100%;
  transform: scaleX(.8);
}

.lnb-close .burger-button:hover .burger-bar--2 {
  transform: scaleX(.8);
}

.lnb-close .no-touchevents .burger-bar--2:hover {
  transform: scaleX(.8);
}

.lnb-close .burger-bar--3 {
  transform: translateY(8px);
}

.lnb-close #burger.active .burger-button {
  transform: rotate(-180deg);
}

.lnb-close #burger.active .burger-bar {
   background-color: #fff; 
}
.lnb-close #burger.active .burger-bar--1 {
  transform: rotate(45deg)
}

.lnb-close #burger.active .burger-bar--2 {
  opacity: 0;
}

.lnb-close #burger.active .burger-bar--3 {
  transform: rotate(-45deg)
}


.lnb-area{
	position: absolute;
	width: 200px;
	height: 100%;
	top: 0;
	/* left: -200px;	 */
	background: #fff;
	z-index: 2000;
}
.lnb-area .lnb-title{
	height: 100px;
	padding: 60px 10px 0 20px;
	background: #2767c1;
	font-size: 2rem;
	font-weight: 500;
	color: #fff;
}
.lnb-area .lnb-close{
	position: absolute;
	top: 10px;
	right: 10px;
	color: #fff;
	font-size: 60px;
}
.lnb-nav{
	padding: 20px;
}
.lnb-nav li{
	margin-bottom: 5px;
}

.lnb-nav li.active a{
	font-weight: 900;
	color: #2767c1;
}

/* ================ dashboard  ================ */
.dashboard-box{
	padding: 20px 10px 10px 10px;
	background: #fff;
}
.dashboard-box:last-child{
	margin-bottom: 30px;
}
.dashboard-box.gray{
	background: #eee;
}

/* ================ container box ================ */
.container{
	position: relative;
	min-height: 100%; 
	padding-top: 55px;
}
.sub-area{
	padding: 10px 10px 80px 10px;
}
.sub-area section{
	margin-bottom: 20px;
}
.sub-area section:last-child{
	margin-bottom: 0;
}

.group-wrap{
	position: relative;
	margin-bottom: 20px;
}
.group-wrap:last-child{
	margin-bottom: 0;
}
.group-wrap .abs-title{
	/* -- legal에서 사용됨(파일업로드 구분) -- */
	position: absolute;
	left: 0;
	top: 10px;
	color: #2767c1;
	font-weight: bold;
}

/* -- 테이블 목록보기 갯수 -- */
.sort-area{
	padding-bottom: 5px;	
	/*border-bottom: 1px #dedede solid;*/
	text-align: right;
}
.sort-area select{
	width: auto;
}

.fieldset-area{
	padding: 10px;
}

/* --border-top, margin-top 이 들어간 박스 --*/
.inline-box{
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px #dedede solid;
}
.inner-span{
	/* 요청 테이블에서 사용 */
	display: block;
	padding: 5px 0 10px 0;
}

/* title, button이 같은 라인 */
.caption-title{
    display: flex;
    display: -webkit-flex;
    align-items: center;
    margin-bottom: 5px;
    font-weight: bold;
}
.caption-title .tit{
	flex: auto;
	-webkit-flex: auto;
	font-weight: bold;
}
.caption-title  button{
	flex: 0 0 auto;
	-webkit-flex: 0 0 auto;
	margin: 0 1px;
}

/* ================ 조회영역  ================ */
/*위임관리 위임자 정보 */ 
.delegate-box{
	background: #2767c1;
}
.delegate-box .user{
	position: relative;
	padding: 10px;
	/*border-bottom: 1px #3c76c8 solid;*/
	/*box-shadow: 0px 2px 4px rgba(0, 0, 0, .1);*/
	color: #f5f5f5;
	text-align: center;
}
.delegate-box .user .info-icon{
	display: none;
	position: absolute;
	top: 30px;
	left: 10px;
	padding: 0 8px;
	background: #829af7;
	color: #fff;
	font-size: 1.2rem;
}

.delegate-box .user-alist{
	padding: 15px 10px;
	text-align: center;
}
.delegate-box .user-alist li{
	display: inline-block;
	margin-right: 10px;
	color: #dedede;
	font-size: 1.3rem;
}
.delegate-box .user-alist li:last-child{
	margin-right: 0;
}
.delegate-box .user-alist li a{
	color: #dedede;
}
.delegate-box .user-alist li i{
	display: block;
	margin-bottom: 5px;
}
.search-area{
	padding: 10px;
	background: #f6f6f6;
	border-bottom: 1px #dedede solid;
}
.search-area .search-btn{
	/* margin-bottom: 8px; kimsungjun 20200316*/
	text-align: right;
}
.search-btn .toggle-search{
	padding: 2px 5px;
	border: 1px #ccc solid;
	font-size: 1.2rem;
	text-align: center;
	display: inline-block;
    width: 65px;
}
.search-btn .toggle-search i{
	margin-left: 5px;
	font-size: 11px;
	color: #999;
}
.search-btn .toggle-search i.fa-plus{	
	color: #f65275;
}

.search-list li{
	clear: both;
	overflow: hidden;
	margin-bottom: 3px;
}
.search-list li:last-child{
	margin-bottom: 0;
}

.search-area input[type="date"]:disabled,
.search-area input[type="text"]:disabled,
.search-area input[type="text"]:read-only,
.search-area input[type="date"]:read-only{
	background: url(../images/bg_disabled.png);
}

/*  select / input */
.input-box{
	/*clear: both;*/
	position: relative;
	/*margin-bottom: 3px;*/
	border: 1px #ccc solid;
	background: #fff;
}
.input-box label{
	display: block;
	position: absolute;
	left: 10px;
	top: 8px;
	color: #8a8a8a;
	font-size: 1.2rem;
}
.input-box label:after{
	position: absolute;
	right: 0;
	content: "|";
	color: #dedede;
}

.input-box.tit_lg_ch{
	height: 60px;
}
.input-box.tit_lg_ch label.fix:after{
	position: absolute;
	right: 0;
	content: "";
	color: #dedede;
}
.input-box.tit_lg_ch label.fix{
	width: auto !important;
	margin-right: 3px !important;
}

.input-box label .es{
	color: #f65275;
}
.input-box select,
.input-box input{
	height: 33px;
	margin-bottom: 0;
	border: none;
	line-height: 3.2rem;
}
.input-box textarea{
	margin-bottom: 0;
	border: none;
}
/* 제목 길이에 따른 폼크기 설정 */
.tit_sm .input-box{
	padding-left: 63px;
}
.tit_sm .input-box label{
	width: 55px;
}
.tit_md .input-box{
	padding-left: 75px;
}
.tit_md .input-box label{
	width: 65px;
}

.input-box.tit_lg{
	padding-left: 95px;
}
.input-box label.tit_lg{
	width: 85px;
}

.tit_lg .input-box{
	padding-left: 80px;
}
.tit_lg .input-box label{
	width: 75px;
}
.input-box.tit_none {
	padding-left: 0;
}
/*.search-list .input-box + .input-box{
	padding-left: 0;
}*/

/* ================ 검색  ================ */
.list-search{
}
.list-search select{
	width: 25%;
}
.list-search input[type="text"]{
	width : -webkit-calc(75% - 43px);
	width : calc(75% - 43px);
}
.list-search .btn-search{
	width: 35px;
	height: 35px;
	color: #f65275;
}

/* ================ List :  basic-list(기본형)  ================ */
/*  계약검토요청 > 거래담당자 > 추가버튼 클릭시 생성되는 리스트 */
.basic-list li{
	margin-bottom: 10px;
}
.basic-list li .num{
	display: block;
	margin-bottom: 5px;	
}
/*  li에 숫자 생성 */
.decimal-list{
	padding-left: 20px;
}
.decimal-list > li{
	list-style: decimal;
	line-height: 1.5;
}

/* ================ List : data-list  ================ */
.data-list{}
.data-list > dt{	
	padding: 10px 5px;  
	border-bottom: 1px #dedede solid
}
.data-list > dd{
	/* 아코디언으로 활용시 */
	/*kimsjungjun 20191106*/
	/* padding: 10px 5px;  */
	border-bottom: 1px #dedede solid
}
.data-list > dd.active{
	/* 아코디언으로 활용시 */
	background: #f5f5f5;
}
.data-list > li{
	position: relative;	
	padding: 10px 5px;
	border-bottom: 1px #dedede solid;
}
.data-list > li.fixed{
	/* 리스트 상단 고정되는 공지 */
	padding: 10px;
	background: #f5fafc;
}
.data-list li .add-file{
	position: absolute;
	top: 3px;
	right: 5px;
	width: 30px;
	height: 30px;
}
.data-list .tag{
	display: inline-block;
	position: absolute;
	top: 10px;
	right: 10px;
}
.data-list .label-group{
	display: flex;
	display: -webkit-flex;
	overflow: hidden;
	margin-bottom: 5px;
	text-align: right;
}
.data-list .label-group .lg-r{
	flex: 0 0 auto;
	-webkit-flex: 0 0 auto;
	margin-left: auto;
}
.data-list .label-group span{
	display: inline-block;
	font-size: 1.2rem;
}
.data-list .label-group span:after{
	margin: 0 3px 0 5px;
	content: "|";
	color: #ccc;
	font-size: 10px;
	vertical-align: bottom;
}
.data-list .label-group span.checkbox:after{
	content: "";
	margin: 0;
}
.data-list .label-group span:last-child:after{
	content: "";
	margin-right: 0;
}
.data-list .title-group{
	margin-bottom: 6px;
	clear: both;
	font-weight: bold;
	/*kimsungjun*/
	word-break: break-all;
}
.data-list .title-group .checkbox{
	margin-right: 5px;
}

.data-list .cont-group{
	margin-bottom: 10px;
}
.data-list .info-group{
	padding-top: 6px;
	background: url(../images/dot_line.png) repeat-x top;
	font-size: 1.2rem;
}
.data-list dd .info-group{
	padding-top: 0;
	background: none;
	/*kimsjungjun 20191106*/
	padding: 10px 5px;
}
.data-list .info-group > span:after{
	padding-right: 5px;
	content: ",";
}
.data-list .info-group > span:last-child:after{
	content: "";	
	padding-right: 0;
}
.data-list .info-group > span.hit{
	
}

/* lagel-group i요소 스타일 */
.data-list .label-group i{
	display: inline-block;
}
.data-list  .label-num{
	/* list 번호 */
	display: inline-block;
	margin-right: 5px;
	font-weight: bold;
}
.data-list  .label-num:after{
	content: ".";
}
.data-list .label-item{
	color: #3d71ba;
}
.data-list .label-group .label-type{
	/* list 유형(승인, 요청, 처리 등) */
	padding: 2px 5px;
	margin-right: 2px;
	background: #a69679;
	color: #fff;
	font-size: 1.2rem;
}
.data-list .label-group .label-type.val_on{
	background: #cea55c;
}
.data-list .label-group .label-type.val_off{
	background: #b9b9b9;
}
.data-list .comment-view{
	padding: 2px 5px;
	border: 1px #cf9311 solid;
	color: #cf9311;
}

/* ================ List : file-list(첨부파일)  ================ */
.file-area{
	padding-top: 5px;
}
.file-area .add-file{
	display: none;
}
.file-area .file-upload{
	height: 30px;
	margin-bottom: 0;
	padding: 0 10px;	
	border: 1px #f65275 solid;
	color: #f65275;
	line-height: 28px;
	/* margin-top: 3px; */
}

.file-area > .btn-group.right > button.button.btn-sm {
	position: absolute;
    right: 90px;
}

.file-list{
	margin-top: 10px;
	border-top: 1px #dedede dotted;
}
.file-list li{
	padding: 3px;
	border-bottom: 1px #dedede dotted;
	font-size: 1.2rem;
	/*kimsungjun*/
	word-break: break-all;
}
.file-list li:last-child{
	border-bottom: 0px #dedede dotted;
}
.file-list .size{
	color: #a98226;
}
/*.file-area + .btn-group{
	margin-top: 20px;
}*/

/* ================ List : file-notice(텍스트 리스트)  ================ */
.file-notice{
	margin-bottom: 10px;
}
.file-notice p,
.file-notice li{
	position: relative;
	padding-left: 8px;
	color: #3d71ba;
	font-size: 1.3rem;
}
.file-notice p:before,
.file-notice li:before{
	position: absolute;
	left: 0;
	content: "·";
	color: #5f5f5f;
}

/* ================ List : 특정페이지에만 사용된 리스트  ================ */
/* 기사직평가에 사용되었음 */
.inner-rating li{
	display: flex;
	display: -webkit-flex;
	margin-bottom: 10px;
	padding: 0 5px 10px 5px;
	border-bottom: 1px #dedede solid;
}
.inner-rating li:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}
.inner-rating li .num{
	min-width: 15px;
	padding-right: 5px;
	font-size: 1.2rem;
}
.inner-rating .info-area{
	flex: 1 1 auto;
}
.inner-rating .info-area span{
	display: inline-block;
}

.inner-rating .info-area span:after{
	display: inline-block;
	content: ",";
	margin-right: 3px;
	clear: both;
}
.inner-rating .info-area span:last-child:after{
	content: "";
	margin-right: 0;
}
.inner-rating .btn-group{
	margin-top: 5px;
}

/* 인감날인 요청 > 승인규정 같은 형태의 리스트에 사용 */
.inner-list{
	margin-bottom: 10px;
}
.inner-list li{
	position: relative;
	margin-bottom: 3px;
	padding-left: 10px;
}
.inner-list li:before{
	position: absolute;
	top: 0;
	left: 0;
	content: "·";
}
.inner-list li span{
	/* display: inline-block; */
	display: table-cell;
}
.inner-list li .tit{
	min-width: 60px; 
	font-weight: bold;
}
.inner-list li .cont:before{
	margin-right: 5px;
	content: ":";
	color: #999;
	font-size: 1.2rem;
}

/* ================ 요청, 상세  ================ */
.data-request{
	overflow: hidden;
}
.data-request > li{
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	-webkit-flex-wrap: wrap; 
	width: 100%;	
	justify-content: center;
  	align-items: center;
}
.data-request > li.col-5{
	float: left;
	width: 50%;
}
/* 20200423 추가 */
.data-request > li.col-6{
	float: left;
	width: 60%;
}
.data-request > li.col-4{
	float: left;
	width: 40%;
} /* */

.data-request > li > label,
.data-request > li .subject{
	/* 타이틀이 label이 아닌경우 subject 클래스 사용 */
	width: 90px;
	padding: 0 8px;
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1.1;
}
.data-request > li > label.wd-8,
.data-request > li .subject.wd-8 {
	width: 80px;
}
.data-request > li.flex-inline.tit_sm > label{
	width: 65px;
}

.data-request > li.flex-inline.tit_md > label{
	width: 70px;
}

.data-request > li > label.center{
	text-align: center;
}

/* 20200423 추가 */
.data-request li.col + li.col label{
	width: auto;
} /* */

.data-request li.col-5 + li.col-5 label{
	
}
.data-request > li.al-top{
	/* label 세로정렬 상단(== vertical-aling: top) */
	/* input이 여러개인경우 */
	align-items: baseline;
}
.data-request > li .subject .es,
.data-request > li label .es{
	/* label 필수항목 표시 */
	color: #c62548;
}
.data-request .data-td{
	flex: 1;
	position: relative;
}
.data-request .data-td .txt-in{
	/* input + text일때 */
	padding-left: 5px;
	font-size: 1.2rem;
}
.data-request .data-td .txt-cont{
	display: block;
	padding: 5px 0 8px 0;
}

/* ================ calendar  ================ */
.calendar-choice{
	margin-bottom: 10px;
}
.calendar-btn{
	margin-bottom: 10px;
}
.fc-today-button:disabled{
	background: #f65275 !important;
	border-color: #f65275 !important;
	color: #fff;
	opacity: 1;
}
/* 캘린더 플러그인과 충돌날까봐 class는 schedule로 사용 */
.schedule-area .select-date{
	display: flex;
	display: -webkit-flex;
	margin-left: -2px;
	margin-right: -2px;	
}
.schedule-area .select-date select{
	flex: auto;
	-webkit-flex: auto;
	margin: 0 2px;
}
.schedule-inner{
	margin-top: 5px;
}
.schedule-head{
	position: relative;	
	padding: 12px 0;
	background: #f65275;
	text-align: center;	
}
.schedule-head .date_today{
	color: #fff;
	font-size: 1.8rem;
}
.schedule-head button{
	position: absolute;
	background: transparent;
	border: transparent;
	color: #fff;
	font-size: 2rem;
}
.schedule-head .date_prev{
	top: 10px;
	left: 10px;
}
.schedule-head .date_next{
	top: 10px;
	right: 10px;
}
.schedule-box{
	padding: 10px 0;
	border: 1px #dedede solid;
}
.schedule-box .schedule{
	width: 100%;	
}
.schedule-box .schedule td{
	position: relative;
	width: 14.2857%;
	padding: 5px 3px;
	text-align: center;
}
.schedule-box .schedule td:nth-child(1){
	color: #f65275;
}
.schedule-box .schedule td:nth-child(7){
	color: #3767ab;
}
.schedule-box .schedule td .today{
	display: inline-block;
	width: 28px;
	height: 28px;
	background: #cea55c;
	border-radius: 100%;
	color: #fff;
	font-weight: bold;
	line-height: 26px;
}
.schedule-box .schedule td .sday{
	display: block;
	position: absolute;
	width: 10px;	
	left: 50%;
	bottom: 2px;
	margin-left: -5px;
	border-bottom: 2px #f65275 dotted;
}
.fc-unthemed .fc-list-empty {
    height:200px;
}
/* ================ 공지사항 view ================ */
.view-area{
	padding-bottom: 80px;
}
.view-area .view-title{
	padding: 20px;
	background: #eee;
	/*kimsungjun*/
	word-break: break-all;
}
.view-area .view-title h2{
	color: #525252;
}
.view-area .view-inner{
	padding: 20px;
	border-bottom: 1px #dedede solid;
}
.view-area .view-info{
	padding: 10px 20px;
	border-top: 1px #dedede solid;
	border-bottom: 1px #dedede solid;
	font-size: 12px;
}
.view-area .view-info span{
}
.view-area .view-info span:after{
	content: ",";
	display: inline-block;
	margin: 0 1px ;
}
.view-area .view-info span:last-child:after{
	content: "";
	margin: 0;
}
.view-area .view-info span:last-child{margin-right: 0;}
.view-area .board-btn{
	padding: 20px;
	border-bottom: 1px #dedede solid;
	text-align: center;
}
.view-area .file-area{
	padding: 10px;
}

/* ================ 업무전달 modal / 개인설정 ================ */
.work-user{
	overflow: hidden;
	margin-bottom: 20px;
}
.work-user .user-inner{
	overflow: hidden;
	margin-bottom: 10px;
}
.work-user .photo-area{
	float: left;
	width: 128px;
}
.work-user .photo{
	display: block;
	width: 128px;
	height: 148px;
	border: 1px #ccc solid;
	text-align: center;
}
.work-user .user-info{
	float: left;
	width: calc(100% - 128px);
	width: -webkit-calc(100% - 128px);
	width: -moz-calc(100% - 128px);
	padding-left: 10px;
}
.work-user .user-info li{
	display: flex;
	line-height: 2.4rem;
	font-size: 1.2rem;
}
.work-user .user-info .tit{
	min-width: 60px;
}
.work-user .user-info .cont{
	flex: 1;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}

.work-comment{
	padding: 10px;
	background: #f6f6f6;
}
/* 승인담당자 변경 */
.layer-wrap{
	display:flex;
	display:-webkit-flex;
	align-items:center;
	justify-content:center;	
	-webkit-align-item:center;
	-webkit-justify-content:center;
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
}
.person-change{	
	width: 320px;
	margin: auto;
	padding: 20px;
	border: 2px solid #3571B5;
	background: #fff;
	z-index: 1000;	 
}
.person-change h1{
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px #dedede solid;
	color: #3571B5;
	font-weight: bold;
}

/* 개인설정 */
.myinfo-wrap{
	padding: 20px 0;
	border-top: 1px #dedede solid;
	border-bottom: 1px #dedede solid;
}
.photo-area .photo-btn{
	margin-top: 5px;
	margin-right: -1px;
}
.photo-area .photo-btn .button{
	display: block;
	float: left;
	width: 50%;
	margin-right: -1px;
	padding: 3px 0;
	border-radius: 0;
	color: #999;
	font-size: 11px;
}
.photo-area .photo-btn .button i{
	display: block;	
}
.photo-area .photo-btn .button i.choice{color: #cea55c;}
.photo-area .photo-btn .button i.save{color: #f65275;}

tr.detail {
  display: none;
  width: 100%;
}
tr.detail div {
  display: none;
}
.showmore:hover {
  cursor: pointer;
}
/* ================ table 형 list(accordion) ================ */
.acc-head{
  display: table;
  width: 100%;
  padding: 8px 0;
  border-top: 1px #041e42 solid;
  border-bottom: 1px #ccc solid;
}
.acc-head span{
  position: relative;
  display: table-cell;
  font-size: 12px;
  font-weight: bold;
  text-align: center;
  word-break: break-all;
}
.acc-list dt{
  display: table;
  width: 100%;
  padding: 8px 0;
  border-bottom: 1px #dedede solid;
  text-align: center;
}
.acc-list dt span{  
  display: table-cell;
}
.acc-head .tooltip,
.tooltip{
  display: block;
  width: 120px;
  position: absolute;
  padding: 3px 5px;
  top: -30px;
  left: 50%;
  margin-left: -60px;
  border-radius: 3px;
  background: #5a8ace;  
  color: #fff;
  font-size: 11px;
  font-weight: normal;
}
.acc-head .tooltip:after,
.tooltip:after{
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #5a8ace transparent transparent transparent;
}
.acc-list dd{
  overflow: hidden;
  padding: 10px;
  border-bottom: 1px #dedede solid;
  background: #f6f6f6;
}
.acc-list dt.active{
  color: #0c6bc3;
}

/* ================ 설문조사 ================ */
.survey-wrap{
	margin-bottom: 10px;
	padding-bottom: 10px;
	border-bottom: 1px #dedede solid;
}
.survey-wrap:last-child{
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: 0;
}
.survey-wrap .title-group{
	margin-bottom: 10px;
	font-weight: bold;
}
.survey-wrap .num{
	display: inline-block;	
}
.survey-wrap .num:after{
	content: ".";
	padding-right: 5px;
}
.survey-wrap .survey-item{
	padding: 0 10px;
}
.survey-wrap .survey-item li{
	display: flex;
	display: -webkit-flex;
	align-items: center;
}
.survey-wrap .survey-item .etc input[type="checkbox"] + label{
	flex: 0 0 auto;
	margin-right: 10px;
}
.survey-wrap .survey-item .etc input[type="text"]{
	flex: 1 1 auto
}
.survey-result .sr-total{
	margin-bottom: 10px;
	text-align: right;
}
.survey-result .sr-total span{
	display: inline-block;
	margin-left: 10px;
}
.survey-result .sr-area{
	margin-bottom: 20px;
	padding-bottom: 20px;
	border-bottom: 1px #dedede solid;
}
.survey-result .sr-tit{
	margin-bottom: 10px;
	font-weight: bold;
}
.survey-result .sr-item li{
	margin-bottom: 10px;
}
.survey-result .sr-item .tit{
	display: block;
	margin-bottom: 5px;
}
.survey-result .sr-item li .bar{
	position: relative;
	overflow: hidden;
	height: 16px;
	padding: 2px 40px 2px 2px;
	background: #eee;
	border: 1px #ccc solid;
	border-radius: 1.5rem;
}
.survey-result .sr-item .bar p{
	position: relative;
	max-width: 100%;
	height: 10px;
	padding: 0 5px;
	border-radius: inherit;
	text-align: right;
	color: #fff;
	font-size: 9px;
	line-height: 1.6rem;
}
.survey-result .sr-item .bar .percent{
	position: absolute;
	top: -2px;
	right: 5px;
	width: 35px;
	text-align: right;
}

.survey-result .sr-item li:nth-child(1) .bar p{background: #ccc;}
.survey-result .sr-item li:nth-child(2) .bar p{background: #bababa;}
.survey-result .sr-item li:nth-child(3) .bar p{background: #a5a5a5;}
.survey-result .sr-item li:nth-child(4) .bar p{background: #898989;}
.survey-result .sr-item li:nth-child(5) .bar p{background: #787878;}

.survey-result .sr-item li .bar .best{background: #cea55c !important;}
.survey-result .sr-item li .bar .best{background: #f65275 !important;}

/* ================ 평가결과 ================ */
.rating-section{
	padding-top: 20px;
}
.rating-section .info{
	margin-bottom: 5px;
	text-align: right
}
.rating-section .sum{color: #f65275;}

/* ================ 사원정보조회 ================ */
.staff-section .td1{width: 15%;}
.staff-section .td2{width: 50%;}
.staff-section .td3{width: 25%;}
.staff-section .td4{width: 10%;}
.staff-list dd{
	position: relative;
	padding: 10px 0 10px 115px;
	background: #fff;
}
.staff-list .td2{
	text-align: left;
}
.staff-list .photo{
	position: absolute;
	top: 10px;
	left: 0;
	width: 108px;
	height: 128px;
	border: 1px #ccc solid;
	text-align: center;
	line-height: 128px;
}
.staff-detail{
	position: relative;
	padding: 10px 0 10px 115px;
}
.staff-detail .photo{
	position: absolute;
	top: 10px;
	left: 0;
	width: 108px;
	height: 128px;
	border: 1px #ccc solid;
	text-align: center;
	line-height: 128px;
}

/* ================ talk ================ */
.talk-area{
	margin-top: 10px;
	padding-top: 10px;
	border-top: 1px #dedede solid;
}
.talk-list li{
	overflow: hidden;
	clear: both;
	margin-bottom: 5px;
}
.talk-list .talk-box{
	display: inline-block;
	max-width: 85%;
	padding: 10px;	
	border-radius: .5rem;	
	word-break: break-all;
}
.talk-list .talk-left{
	position: relative;
	float: left;
	border: 1px #ccc solid;
	background: #f5f5f5;
}
.talk-list .talk-left a{
	color:#5f5f5f
}
.talk-list .talk-right{
	float: right;
	border: 1px #bf9853 solid;
	background: #cea55c;
	color: #fff;
}
.talk-list .talk-right a{
	color:#fff
}
/* ================ 사용자선택 / 사용자조회 / 부서선택 madal ================ */
.user-pop .user-choice{
	overflow-y: auto;
	max-height: 150px;
	padding: 10px;
	background: #f6f6f6;
	border: 1px #dedede solid;
}
.user-pop .user-choice li,
.user-pop .user-choice p{
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
	margin-bottom: 10px;
}
.user-pop .user-choice span{
	flex: 0 0 auto;
}
.user-pop .user-choice .button{
	margin-left: auto;
}
/* 하스너 용접위치 조정 */
.weld-wrap{
	position: relative;
	max-width: 333px;
	margin: auto;
	padding: 30px 0;
}
.weld-wrap img{
	width: 100%;	
}
.weld-wrap .weld-form{
	display: block;
	position: absolute;
	text-align: center;	
	z-index: 100;
}
.weld-wrap .weld-form.wi-1{
	width: 100%;
	top: 0;
	left: 0;
}
.weld-wrap .weld-form.wi-2{
	width: 50%;
	bottom: 5px;
}
.weld-wrap .weld-form.wi-3{
	width: 25%;
	bottom: 50px;
}
.weld-wrap .weld-form.wi-4{
	width: 75%;
	bottom: 5px;
}
.weld-wrap .weld-form.wi-5{
	width: 16.6666%;
	left: -2px;
	bottom: 94px;
}
.weld-wrap .weld-form.wi-6{
	width: 50%;
	bottom: 48px;
}
.weld-wrap .weld-form.wi-7{
	width: 75%;
	bottom: 0;
}
.weld-wrap .weld-form input{
	width: 60px;
	height: 3rem;
	border: 1px #333 solid;
}
.weld-wrap .weld-form input::placeholder{
	text-align: center;
}

/* ================ progress  ================ */
.progress{
    flex: 0 0 auto;
    -webkit-flex: 0 0 auto;
    margin-left: auto;  
}
.progress .p_tit{
    font-size: 1.1rem !important;
    /*kimsjungjun 20191106*/
    display: table !important;
}
.progress-inner{
    display: inline-block;
    width: 110px;
    height: 12px;
    background: #eee;
    border-radius: 6px;
    text-align: left;
    vertical-align: middle;
}
.progress-bar{   
    display: block !important;
    height: 12px;
    width: 100%;
    background: linear-gradient(to right, #8e9ede 30px, #596cb4 60px, #42559c 100%);
    border-radius: 6px;
    transition: 0.4s linear;
}
.percent{
    display: inline-block;
    width: 32px;
   font-size: 1.1rem !important;
}
.progress span:after{
    display: none;
}

/* ================ 패스워드변경 ================ */
#passChangeLayer label{
	display: block;
	margin-bottom: 5px;
}

/* ================ 기타 ================ */
.txt-notice{
	/* form 설명텍스트 */
	margin-bottom: 5px;
	color: #f65275;
	font-size: 1.3rem;
}
.seal-img{
	/* 인감이미지 */
	width: 150px;
	height: 150px;
	/* background: #eee; */
	/* text-align: center; */
	    margin: 0 auto 3px;
}
.seal-img.noimg{
	background: #eee;
}
.result-txt{
	/* 리스트 항목이 없을때(ex-조회된 결과가 없습니다.) */
	padding: 30px 0 !important;
	text-align: center;
	font-size: 1.4rem !important;
}
.photo img{
	width: 100%;
	/*kimsungjun*/
	height: 146px;
}
.tip-wrap{
	/* tooltip box */
	position: relative;
}

/* ===============kimsungjun 승인팝업(업무잔달) */
.editTable ol {
    list-style: decimal;
    list-style-type: decimal;
    padding-left: 15px;
}
.editTable ul {
	list-style: disc;
	list-style-type: disc;
	padding-left: 20px;
}

.editTable p > img {
	width:100% !important;
	height:100% !important;
}

div.work-user #reqConetents fieldset {
	border: 1px solid; 
	padding: 5px;
	margin-top: 5px;
	clear: both;
	float: left;
	width: 100%;
}

div.work-user #reqConetents hr {
	float: left;	
	width: 100%;
}
/*첨부파일 파일첨부버튼*/
div.work-user #reqConetents fieldset .btn-group.right{
	display: none;
}
/*첨부파일 파일을 첨부하세요.*/
div.work-user #reqConetents fieldset #fileTable{
	display: none;
}
/*첨부파일삭제번튼*/
fieldset #fileList li span.button { 
	display: none;
}

div.work-user #reqConetents{
	height:190px;
	width:100%;
	border: 1px #ccc solid;  
	padding: 8px;
	overflow:scroll;
	word-break: break-word;
	overflow-x: hidden;
	line-height: 150%;
}
div.work-user #reqConetents div.registNeSvcCollab.contractleft{
	width:70px;	
	float:left;
	clear: both;    
	word-break: keep-all;
	text-align:justify;
	text-justify:inter-cluster
}
div.work-user #reqConetents div.registNeSvcCollab.contractright{
	width:calc(100% - 70px);
	float:left;
   
}
div.work-user #reqConetents div.registNeSvcCollab2.contractleft{
	width:120px;	
	float:left;
	clear: both;    
	word-break: keep-all;
	text-align:justify;
	text-justify:inter-cluster
}
div.work-user #reqConetents div.registNeSvcCollab2.contractright{
	width:calc(100% - 120px);
	float:left;
   
}

div.work-user #reqConetents div.contractRegist.contractleft{
	width:65px;	
	float:left;
	clear: both;    
	word-break: keep-all;
	text-align:justify;
	text-justify:inter-cluster
}
div.work-user #reqConetents div.contractRegist.contractright{
	width:calc(100% - 65px);
	float:left;
   
}
div.work-user #reqConetents div.contractRegist2.contractleft{
	width:240px;	
	float:left;
	clear: both;    
	word-break: keep-all;
	text-align:justify;
	text-justify:inter-cluster
}
div.work-user #reqConetents div.contractRegist2.contractright{
	width:calc(100% - 240px);
	float:left;
}

div.work-user #reqConetents div.sealRegist.contractleft{
	width:70px;	
	float:left;
	clear: both;    
	word-break: keep-all;
	text-align:justify;
	text-justify:inter-cluster
}
div.work-user #reqConetents div.sealRegist.contractright{
	width:calc(100% - 70px);
	float:left;
   
}

div.work-user #reqConetents div.registOekSystem.contractleft{
	width:80px;	
	float:left;
	clear: both;    
	word-break: keep-all;
	text-align:justify;
	text-justify:inter-cluster
}
div.work-user #reqConetents div.registOekSystem.contractright{
	width:calc(100% - 80px);
	float:left;
   
}
/*div edit*/
[contenteditable=true]:empty:before{
  content: attr(placeholder);
  display: block; /* For Firefox */
  color: #cfcbd0;
}
 
div[contenteditable=true] {
  border: 1px #ccc solid;
  color : #333;
  font-size: 12px;
  width: 100%;
  padding: 5px;
  height:200px;
}









/* card */
.card-area{
	padding-bottom: 100px;
}
.card-area .area-box{
	height: 20px;
	background: #f9f9f9;
}
.card-area section .btn-send{
	position: absolute;
	left: 0;
	bottom: -55px;
	padding: 0 10px;
}

/* card list */
.card-list{
	border-top: 1px #dedede solid;
}
.card-list li{
	padding: 10px 0;
	border-bottom: 1px #dedede solid;
}
.card-list .cl-info{
	margin-bottom: 5px;
}
.card-list .cl-info span{
	display: inline-block;
	vertical-align: middle;
}
.card-list .cl-info .ci-label{
	display: inline-block;
	width: 50px;
	margin-right: 5px;
	padding: 2px 0;
	border: 1px #dedede solid;
	border-radius: 2px;
	font-size: 11px;
	text-align: center;
}
.ci-label.r_txt{
	color: #2c35b6;
}
.ci-label.s_txt{
	color: #a67e38;
}
.card-list .cl-info .ci-name{
	color: #333;
	font-size: 14px;
	font-weight: bold;
}
.card-list .cl-info .ci-group-right{
	float: right;
	font-size: 11px;
	color: #999;
}
.card-list .cl-info .ci-num:after{
	display: inline-block;
	content: "";
	clear: both;
	margin: 0 5px;
	width: 1px;
	height: 10px;
	background: #dedede;
	vertical-align: middle;
}

/* card send */
.card-send{
	padding-top: 3px;
}
.card-send > li{
	position: relative;
	display: flex;
	display: -webkit-flex;
	width: 100%;
	min-height: 40px;
	padding: 8px 15px;
	border-top: 1px #dedede solid;	
}
.card-send > li:first-child{
	border-top: 0;
}
.card-send > li h3{
	flex: 0 0 70px;
	font-size: 12px;
	font-weight: bold;
}
.card-send > li h3 + div,
.card-send > li p{
	flex: 1 1 auto;
	margin-left: 10px;
}
.card-send input,
.card-send textarea{
	padding: 0;
	border: 0;
}
.card-send .card-to{	
}

.card-send .card-to .to-info li{
	display: flex;
	display: -webkit-flex;
	width: calc(100% -30px);
	width: -webkit-calc(100% - 30px);
	margin-bottom: 3px;
}
.card-send .card-to .c_name{
	flex: 0 0 auto;
	margin-right: 10px;
	font-size: 16px;
	color: #333;	
}
.card-send .card-to .c_num{
	font-size: 12px;
}
.card-send .c_dept{
	flex: 1 1 auto;
	font-size: 12px;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}
/*.card-send .c_label{
	display: inline-block;
	margin-right: 5px;
	padding: 1px 4px;
	border-radius: 2px;
	background: #666;
	color: #fff;
	font-size: 11px;
}*/
.card-send .card-to .user-search{
	position: absolute;
	top: 10px;
	right: 15px;
	width: 24px;
	height: 24px;
	border: 1px #dedede solid;
	border-radius: 100%;
	background: #fff url(../images/icon_search.png) no-repeat center;
	font-size: 0;
}
.card-send .card-design{
	align-items: center;
}
.card-send .card-cont{
	align-items: flex-start;
}
.card-send .card-cont .card-thumb{
	flex: 0 0 70px;
	min-height: 100px;
	margin-right: 10px;
	border: 1px #dedede solid;
	background: url(../images/no_image.png) no-repeat;
	background-size: 100%;
}
.card-send .card-cont .card-thumb img{
	display: block;
	width: 100%;
}
.card-send .card-cont .card-txt{
	min-height: 190px;
}
.btn-card-send{
	padding: 10px;
}

/* card view */
/* .card-view .card-view-header{
	padding: 10px;
	border-bottom: 1px #dedede solid;
	background: #f9f9f9;
}
.card-view .card-view-header h3{
	font-weight: bold;
}
.card-view .card-view-header h3{
	margin-bottom: 5px;
	font-size: 16px;
}
.card-view .card-view-header p{
	font-size: 12px;
	color: #999;
}
.card-view .card-view-info .v-tit{
	margin-right: 10px;
} */
.card-view .card-visual img{
	width: 100%;
}
.card-view-cont{
	position: relative;
	overflow: hidden;
	padding: 80px 20px 20px 20px;
}
.card-view-cont i{
	display: block;
	position: absolute;
	top: 0;
	right: 10px;
}
.card-view-cont .cv-tit{
	display: inline-block;
	padding: 0 5px 8px 5px;
	border-bottom: 1px #dedede solid;
}
.card-view-cont .cv-tit span{
	margin-right: 5px;
	font-size: 18px;
	color: #ccc;
}
.card-view-cont .cv-tit.to{	
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: bold;
}
.card-view-cont .cv-tit.from{
	float: right;
	margin-top: 10px;
}
.card-view-cont .cv-message{
	background: url(../images/card_cont_bg.png);
	line-height: 3rem;
}
.card-view .btn-group{
	padding-right: 20px;
}

/* popup card choice */
.card-choice{
	display: flex;
	display: -webkit-flex;
	flex-wrap: wrap;
}
.card-choice li{
	flex: 0 0 33.33%;
	padding: 10px;
}
.card-choice label{
	display: block;
}
.card-choice .card-choice-thumb img{
	position: relative;
	width: 100%;
	z-index: 999;
}
.card-choice .checkbox input[type=checkbox] + label:before{
	position: absolute;
	z-index: 1000;
}


/* 2020-03-09 comment */
.comment-wrap{
	margin-top: 10px;
}
.comment-group{
	margin: 0 10px;
	padding: 10px;
	border: 1px #dedede solid; 
	background: #f6f6f6;
}
.comment-module{
	padding: 10px;
	border: 1px #dedede solid;
	background: #fff;
}
.comment-module .comment-input{
	height: 80px;
	padding: 0;
	border: 0;
	background: #fff;
}

.comment-module .comment-foot{
	overflow: hidden;
	padding-top: 10px;
	border-top: 1px #dedede solid;
}
.comment-module .txt-byte{
	font-size: 12px;
	color: #999;
}
.comment-module .btn-comment{
	float: right;
	width: 50px;
	height: 28px;
	font-size: 12px;
}

.comment-content{
}
.comment-list li{
	padding: 15px 0;
	border-bottom: 1px #dedede solid;
}
.comment-list li:last-child{
	border-bottom: 0;
}
.comment-list li > div{
	padding: 0 20px;
}
.comment-list .reply-group{
	margin: 10px 15px;
}
.comment-list .reply-info{
	margin-bottom: 5px;
}
.comment-list .reply-info > span{
	font-size: 12px;
}
.comment-list .reply-info .cl-date{
	margin-left: 8px;
	color: #999;
}
.comment-list .reply-info .cl-btn{
	float: right;
	font-size: 12px;
	color: #999;
}


/* ================ 공통에 추가할것 ================ */
.sort-area .sort-btn{
	float: left;
}

.flex-inline .input-box + input[type="text"],
.flex-inline .input-box + input[type="text"] + button.button{
	margin-bottom: 0;
} /* common 에 취합할것 */

.data-list > li.reply{
	/* 댓글 */
	padding-left: 30px;
	background: #fbfbfb url(../images/icon_reply.png) 10px 30px no-repeat;
}
.data-list .reply .re{
	display: inline-block;
	margin-right: 5px;
}

/*******************신규추가************************/
/* 2020-02-28 */
/* .sub-area.sip{
    height: -webkit-calc(100% - (55px + 92px + 115px));
    height: calc(100% - (55px + 92px + 115px));
	padding: 0;
	border-top: 1px #dedede solid;
}
.sub-area.sip.long{
	height: -webkit-calc(100% - (55px + 92px));
    height: calc(100% - (55px + 92px));
} */
/*kimsungjun*/
.blurEffect {
  filter: blur(4px);
  -webkit-filter: blur(4px);
}
.clickShieldDiv {
	position: absolute;
    width: 100%;
    z-index: 1;
    background-color: #f6f5f800 !important;
}
#sipDateChange .pignose-calendar {
     width: 100%;
}
#sipDateChange .pignose-calendar .pignose-calendar-top {
    padding: 1.6em 0;
}
#sipDateChange .pignose-calendar .pignose-calendar-unit {
    height: 3.0em;
}
#sipDateChange .pignose-calendar .pignose-calendar-top .pignose-calendar-top-date {
    padding: 1.0em 0;
}
.sub-area.sip{
	position: absolute;
    width: 100%;
    height: calc(100% - (55px + 92px + 200px));
	height: -webkit-calc(100% - (55px + 92px + 200px));
	padding: 0;	
}
.sub-area.sip.long {
    height: -webkit-calc(100% - (55px + 167px));
    height: calc(100% - (55px + 167px));
}
/*kimsungjun*/
.sip-container{
	display: flex;
	display: -webkit-flex;
	height: 100%;
}
.sip-container > div{
	overflow-y: auto;
}
.sip-label{
	width: 80px;
	margin-right: -1px;
	background: #ebebeb;
}
.sip-label li{
	position: relative;
	padding: 10px;
}
.sip-label li.active:after{
	position: absolute;
	display: block;
	content: "";
	top: 50%;
	right: 0;
	margin-top: -5px;
	border-width: 6px;
  	border-style: solid;
  	border-color: transparent #fff transparent transparent;
	z-index: 1000;
}
.sip-label li a{
	display: block;
	height: 30px;
	border-radius: 3px;
	font-size: 16px;
	color: #999;
	line-height: 28px;
	text-align: center;
}
.sip-label li.active a{
	background: #5a8ace;
	color: #fff;
	font-weight: bold;
}
.sip-list{
	flex: 1 1 auto;
	padding: 10px 15px;
	border-left: 1px #dedede solid;
	background: #fff;
}
.sip-list li{
	position: relative;
	margin-bottom: 10px;
	padding: 10px 15px;
	border: 1px #dedede solid;
	border-radius: 8px;
	background: #fff;
}
.sip-list  span{
	display: block;
}
.sip-list .date{
	color: #333;
}
.sip-list .tit{
	color: #666;
	font-size: 12px;
}

.sip-list .sip-list-btn{
	position: absolute;
	top: 10px;
	right: 10px;
}
.sip-list .sip-list-btn a{
	display: inline-block;
	width: 24px;
	height: 24px;
	font-size: 0;
}
.sip-list .sip-list-btn a.edit{
	background: url(../images/icon_edit.png) no-repeat;
}
.sip-list .sip-list-btn a.send{
	background: url(../images/icon_mail.png) no-repeat;
}
.sip-list .sip-list-btn a.disabled{
	opacity: .2;
}
.search-result{
	margin-top: 5px;
	padding: 0 10px;
}
.search-result span{
	display: inline-block;
	font-size: 12px;
}
.search-result .tit{
	width: 70px;
	margin-right: 5px;
}
.search-result .cont{
	font-size: 14px;
}
.search-result .em{
	color: #5684b8;
}



/*kimsungjun 20200521 2단으로 줄이기*/
@media screen and (min-width:649px) { 
  	.search-list > li { 
    	display: inline-block;
    	width: 49.7%;
    	vertical-align: top;
	}
	.search-list > li.odd {
		width: 100%;
	}
	
	.sub-area.sip{
	    height: calc(100% - (23px + 92px + 200px));
		height: -webkit-calc(100% - (23px + 92px + 200px));
	}
	/* .data-request > li {
	    width: 49.7%;
	    float: left;
	} */	
}
@media screen and (min-width:899px) { 
	.search-list  > li { 
    	width: 33%;
	}
	
	.search-list > li.odd { /*1개짜리*/
		width: 100%;
	}
	
	.search-list > li.even { /*2개짜리*/
		width: 49.7%;
	}
	
	.sub-area.sip{
	    height: calc(100% - (76px + 200px));
		height: -webkit-calc(100% - (76px + 200px));
	}
}
/*kimsungjun 20200521 2단으로 줄이기*/