@charset "utf-8";
/***********************************************************
 *
 * 사용영역 : POPUP, DIALOG, TAB, CALENDAR
 * 개    요 : Default CSS를 상속받아 한화생명 CSS로 재정의, 
 *			  디자인적요소가 Default 스타일과 다를 경우 이곳에 작성한다.
 *
 **********************************************************/
 
/**
	POPUP, DIALOG
**/
.ui-dialog {
	position: fixed;
}
.ui-corner-all {
	border-radius: 6px;	
}
.ui-widget.ui-widget-content {
	border: 0;
	background-color: #fff;
}
.ci-dialog {
	padding: 0;	
}
.ci-dialog .ui-dialog-titlebar {
	padding: 18px 0 23px 30px;
    border-radius: 5px 5px 0 0;
    font-size: 22px;
    color: #fff;
    background-color: #937b6e;
    border: 0;
    height: auto;
    font-weight: normal;
    text-align: left;
    margin-bottom: 0;
    font-family: inherit;
}
.ci-dialog .ui-dialog-titlebar-close {
	position: absolute;
    right: 20px;
    top: 27px;
	width: 17px;
    height: 16px;
    background: url(../img/button/btn_close_white.png) no-repeat 0 50%;
    border-radius: 0;
    margin: 0;
}
.ui-dialog .ui-dialog-content {
	padding: 18px 18px 0;
	background-color: #fff;
	border-radius: 0 0 6px 6px;
}
.ui-dialog .ui-dialog-content:after {
	content: "";
	display: block;
	height: 18px;
	width: 100%;
}
.ui-dialog-buttonpane.ui-widget-content {
	border-radius: 0 0 6px 6px;
}
.ui-widget button.btn_large_black,
.ui-widget button.btn_large_orange {
	font-size: 18px;
	font-family: '';
}
.ui-icon,.ui-widget-content .ui-icon,
.ui-state-hover .ui-icon,.ui-state-focus .ui-icon,.ui-button:hover .ui-icon,.ui-button:focus .ui-icon,
.ui-state-active .ui-icon,.ui-button:active .ui-icon,
.ui-state-highlight .ui-icon,.ui-button .ui-state-highlight.ui-icon,
.ui-state-error .ui-icon,.ui-state-error-text .ui-icon,
.ui-button .ui-icon {
	/*jquery ui css에서 없는 이미지 사용으로 console에 출력되는것 차단용*/
	background-image: none;
}
.ui-widget-content td a {color:#f37321;}

/* alert layer 관련 추가 */
.ui-dialog .layer_alert {
	position: relative;
	padding-top : 0px;
	padding-bottom: 12px;
}

.ui-dialog.notitle .ui-dialog-content {
	padding : 0;
}
.ui-dialog.notitle .ui-dialog-titlebar {
	background-color: #FFFFFF;
}
.ui-dialog.notitle .ui-dialog-titlebar-close {
	width: 17px;
    height: 16px;
    background: url(/resources/main/img/button/btn_close_brown.png) no-repeat 0 50%;
}

/* 전화상담(ARS) 안내 팝업 */
.ars_info{padding-left:168px;border:1px solid #e9e9e9;border-radius:2px;background:#fafafa url('/resources/main/img/icon/ico_ars_white.png') 47px center no-repeat;}
.ars_number_info, .ars_plan_info{display:inline-block;padding:30px 30px 30px 0;vertical-align:middle;}
.ars_number_info .ami_fir{color:#000;font-size:20px;}
.ars_number_info .ami_sec{color:#666;font-size:16px;padding-top:12px;}
.ars_plan_info{display:inline-block;padding:30px 0;vertical-align:middle;}
.ars_plan_info dd{padding-left:30px;border-left:1px solid #e3e3e3;}
.ars_plan_info .api_fir{color:#222;font-size:16px;}
.ars_plan_info .api_sec{color:#666;font-size:16px;padding-top:12px;}
/**
	TAB
**/
/*
.ci-tab > .tab-selector {margin-bottom:40px; height: auto;}
.ci-tab > .tab-selector a {display:block;color:#222;font-size:16px;line-height:20px;text-decoration:none;}
.ci-tab > .tab-selector:after {content:'';display:block;clear:both;}
.ci-tab > .tab-selector li {float:left;width:20%;}
.ci-tab > .tab-selector li a {position:relative;z-index:1;height:57px;font-size:18px;text-align:center;line-height:55px;text-decoration:none;border:solid #dcdcdc;border-width:1px 1px 1px 0;box-sizing:border-box;background-color:#fff; color:#222}
.ci-tab > .tab-selector li:first-child a {border-left:1px solid #dcdcdc;}
.ci-tab > .tab-selector li.active a {border-bottom:0;color:#f37321;background-color:#fff;}
.ci-tab > .tab-selector li.active a:after {content:'';position:absolute;left:-1px;top:-1px;z-index:2;width:100%;height:3px;padding:0 1px;background-color:#f37321;}
.ci-stab .tab-selector {margin-bottom:25px;margin-left:-5px;}
.ci-stab .tab-selector:after {content:'';display:block;clear:both;}
.ci-stab .tab-selector li {position:relative;float:left;margin-bottom:15px;padding:0 15px;line-height:1em;}
.ci-stab .tab-selector li:first-child {}
.ci-stab .tab-selector li a {display:inline-block;position:relative;text-decoration:none;}
.ci-stab .tab-selector li:after {content:'';position:absolute;right:0;top:1px;width:1px;height:13px;background-color:#dcdcdc;}
.ci-stab .tab-selector li:last-child:after {display:none;}
.ci-stab .tab-selector li.active a {padding-right:15px;color:#f37321;text-decoration:none;background:url('../img/common/arr_tab_on.gif') no-repeat right 4px !important;}
.ci-stab .tab-selector li.active a:after {content:'';position:absolute;left:0;bottom:-2px;width:100%;height:1px;background-color:#f37321;}
*/
/**
	CALENDAR
**/
.calendarIndi {background: url();}
.calendarInput {width:144px;}
.calendarWrapper .calOpenBtn {margin-left:10px;margin-right:0;vertical-align:middle;cursor:pointer;}
.calendarDiv .calendarTitle {display:inline-block;width:116px;height:35px;font-weight:normal;font-size:18px;color:#222;line-height:35px;vertical-align:top;}
.calendarDiv {padding:0;border:1px solid #e7e7e7;border-radius:3px;width:319px;letter-spacing:-1px;box-shadow:none;}
.calendarDiv .wrap {padding:0;margin:0;min-width:0;}
.calendarDiv .c-prevYear,
.calendarDiv .c-prevMonth,
.calendarDiv .c-nextMonth,
.calendarDiv .c-nextYear {overflow:hidden;text-transform:capitalize;text-indent:-9999px;background-color:#ffffff;cursor:pointer;border:1px solid #ebebeb;border-radius:2px;box-shadow:none;}
.calendarDiv .month {height:30px;padding:13px 0;text-align:center;background-color:#f9f9f9;}
.calendarDiv .month a {display:inline-block;}
.calendarDiv .c-prevYear {display:inline-block;width:34px;height:33px;margin:0;background:url('/resources/main/img/button/btn_arrow01.png') #fff no-repeat 10px -35px;}
.calendarDiv .body_mon .c-prevYear {margin-right:12px;}
.calendarDiv .c-prevMonth {display:inline-block;width:34px;height:33px;margin:0;background:url('/resources/main/img/button/btn_arrow01.png') #fff no-repeat 12px -105px;}
.calendarDiv .c-nextMonth {display:inline-block;width:34px;height:33px;margin:0;background:url('/resources/main/img/button/btn_arrow01.png') #fff no-repeat 14px -140px;}
.calendarDiv .c-nextYear {display:inline-block;width:34px;height:33px;margin:0;background:url('/resources/main/img/button/btn_arrow01.png') #fff no-repeat 10px -70px;}
.calendarDiv .body_mon .c-nextYear {}
.calendarDiv .calendarTable {padding:10px 15px;border-top:1px solid #e7e7e7;}
.calendarDiv .calendarTable table{width:100%;border-top:0 none;border-right:none;border-bottom:none;table-layout:auto;margin:0;}
.calendarDiv .calendarTable thead{/*border-bottom:1px solid #777777;*/}
.calendarDiv .calendarTable tr{height:auto;line-height:22px;border:none;}
.calendarDiv .calendarTable th,
.calendarDiv .calendarTable td{height:30px;line-height:22px;margin:0 !important;padding:2px 0 !important;font-weight:normal;text-align:center;border:none !important;}
.calendarDiv .body_mon .calendarTable tr:first-child td {padding-top:3px !important;}
.calendarDiv .calendarTable td {}
.calendarDiv .calendarTable td > a {display:inline-block;min-width:30px;width:auto;height:30px;line-height:28px;text-decoration:none;border:1px solid transparent;box-sizing:border-box;}
.calendarDiv .calendarTable td > a:hover {border:1px solid #e8e8e8;border-radius:2px;background-color:#fafafa;color:#444444;}
.calendarDiv a:VISITED,.calendarDiv a {color:black;}
.calendarDiv .sundayCol{color:#f37321;}
.calendarDiv .saturdayCol{color:#937b6e;}
.calendarDiv .today {color:#fff;border:0 none;border-radius:2px;background-color:#44464a;}
.calendarDiv .body_mon a.select {color:#fff;border:0 none;border-radius:2px;background-color:#44464a;}
.calendarDiv .select {border:1px solid #9FDFE1;border-radius:2px;background-color:#CFF0F1;color:#444444;}
.calendarDiv #closeBtn {position:relative;width:100%;height:41px;top:0;right:0;padding:0;margin:0;font-size:15px;color:#222;border-top:1px solid #e7e7e7;background:url('/resources/main/img/button/btn_close_calendar.png') #f9f9f9 no-repeat 50% 50%;}

/**
	GRID
**/

.CI-GRID {
	font-size: 16px;
	clear: both;
}
.CI-GRID table {
	line-height: 22px;
	border-bottom-width: 0;
}
.CI-GRID table th, .CI-GRID table td {
	height: 30px;
	border-top: 0;
	line-height: inherit;
	/* th, td보다 컨텐츠가 클 경우 ... 처리 되어 있던것 해제 */
	overflow: hidden;
	white-space: normal;
	text-overflow: clip;
}
.CI-GRID table thead th, .CI-GRID table thead td {
	background-color: #f9f9f9;
}
.CI-GRID table tbody tr:first-child th, .CI-GRID table tbody tr:first-child td{
	border-top-width: 0;
}
.CI-GRID table tfoot tr:first-child th, .CI-GRID table tfoot tr:first-child td {
	border-top-width: 0;
}
.CI-SCROLL-WRAPPER {
	border-top: 1px solid #404348;
	border-bottom: 1px solid #e6e6e6;
}
.CI-SCROLL-WRAPPER .CI-THEAD-WRAPPER {
	background-color: #f9f9f9;
}

.CI-SCROLL-WRAPPER .CI-THEAD-WRAPPER .dataTable td {
	font-weight:bold;
}
.CI-SCROLL-WRAPPER .CI-THEAD-WRAPPER table,
.CI-SCROLL-WRAPPER .CI-TBODY-WRAPPER table,
.CI-SCROLL-WRAPPER .CI-TBODY-WRAPPER {
	border-top: 0;
}
.CI-SCROLL-WRAPPER .CI-TBODY-WRAPPER {
	/* 그리드 scroll-wrapper border-bottom 1px과 tr의 border-bottom 1px의 겹침으로 두줄 나오기 때문에 margin-bottom -1px 처리*/
	margin-bottom: -1px;
}
.CI-SCROLL-WRAPPER .CI-TBODY-WRAPPER table {
	border-collapse: separate;
}
.CI-SCROLL-WRAPPER .CI-TBODY-WRAPPER table tr.last th,
.CI-SCROLL-WRAPPER .CI-TBODY-WRAPPER table tr.last td{
	/*border-bottom-width: 0;*/
	/* 그리드 wrapper의 높이보다 테이블 높이가 적을 경우 밑줄이 나와야 하므로 border-bottom 이 있어야 함. */
}
.CI-PAGING-WRAPPER {
	margin-top: 30px;
	position: relative;
	display: block;
	width: 100%;
	vertical-align: middle;
}
.CI-PAGING-WRAPPER .CI-NUMBER-BUTTON,
.CI-PAGING-WRAPPER .CI-NUMBER-FIRST-BUTTON,
.CI-PAGING-WRAPPER .CI-NUMBER-PREV-BUTTON,
.CI-PAGING-WRAPPER .CI-NUMBER-NEXT-BUTTON,
.CI-PAGING-WRAPPER .CI-NUMBER-LAST-BUTTON {
	display: inline-block;
	overflow: hidden;
	text-align: left;
	text-indent: -9999px;
	border: 1px solid #e8e8e8;
	border-radius: 3px;
	box-sizing: border-box;
	margin-right: 4px; /* 소스상에 엔터로  가 생기는데 그리드 js는 append로 되어 간격이 없다.  그 간격(4px)만큼 띄어준 값 */
}
.CI-PAGING-WRAPPER .CI-NUMBER-FIRST-BUTTON {
	width: 36px;
	height: 35px;
	background: url(/resources/main/img/button/btn_arrow01.png) no-repeat 10px -35px;
}
.CI-PAGING-WRAPPER .CI-NUMBER-PREV-BUTTON {
	width: 36px;
	height: 35px;
	margin-right: 14px; /* 소스상에 엔터로  가 생기는데 그리드 js는 append로 되어 간격이 없다.  그 간격(4px)만큼 띄어준 값 */
	background: url(/resources/main/img/button/btn_arrow01.png) no-repeat 12px -105px;
}
.CI-PAGING-WRAPPER .CI-NUMBER-NEXT-BUTTON {
	width: 36px;
	height: 35px;
	margin-left: 10px;
	background: url(/resources/main/img/button/btn_arrow01.png) no-repeat 14px -140px;
}
.CI-PAGING-WRAPPER .CI-NUMBER-LAST-BUTTON {
	width: 36px;
	height: 35px;
	background: url(/resources/main/img/button/btn_arrow01.png) no-repeat 10px -70px;
	margin-right: 0;
}
.CI-PAGING-WRAPPER .CI-NUMBER-BUTTON {
	display: inline-block;
	min-width: 36px;
	height: 35px;
	color: #222;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	box-sizing: border-box;
	vertical-align: top;
	background-color: #fff;
	text-indent: 0;
	line-height: 32px;
	padding: 0;
	text-align: center;
	font-size: 16px;
}
.CI-PAGING-WRAPPER .CI-NUMBER-BUTTON.this {
	height: 35px;
	color: #fff;
	border: 0 none;
	background-color: #7d7f82;
}
.CI-PAGING-WRAPPER .CI-NUMBER-BUTTON:hover,
.CI-PAGING-WRAPPER .CI-NUMBER-FIRST-BUTTON:hover,
.CI-PAGING-WRAPPER .CI-NUMBER-PREV-BUTTON:hover,
.CI-PAGING-WRAPPER .CI-NUMBER-NEXT-BUTTON:hover,
.CI-PAGING-WRAPPER .CI-NUMBER-LAST-BUTTON:hover {
	font-weight: normal;
	text-decoration: underline;
	font-size: 1em;
}

/**
	webPonent Grid
**/
.CI-GRID-AREA * {
	font-size: 16px;
}
.CI-GRID-WRAPPER {
	border: 0;
	border-top: 1px solid #404348;
	border-bottom: 1px solid #e6e6e6;
}
.CI-GRID-HEADER-SCROLLER {
	background-color: #f7f9fa;
}
.CI-GRID-HEADER-TABLE-THEAD th, .CI-GRID-HEADER-TABLE-THEAD td {
	color: #222;
	border-left: 1px solid #e6e6e6;
	border-bottom: 1px solid #e6e6e6;
	border-right-width: 0;
	height: 30px;
	padding: 10px;
	text-align: center;
}
.CI-GRID-BODY-TABLE-TBODY th, .CI-GRID-BODY-TABLE-TBODY td {
	font-size: 16px;
	height: 30px;
	padding: 10px;
	border-left: 1px solid #e6e6e6;
}
.CI-GRID-HEADER-TABLE-THEAD th:first-child,
.CI-GRID-HEADER-TABLE-THEAD td:first-child,
.CI-GRID-BODY-TABLE-TBODY th:first-child,
.CI-GRID-BODY-TABLE-TBODY td:first-child {
	border-left-width: 0;
}
.CI-GRID-RECT-RIGHT-TOP {
	background-color: #f7f9fa;
	border-left: 0;
	border-bottom: 1px solid #e6e6e6;
}
.CI-GRID-ODD {
	background-color: #fbfcfc;
}
.CI-GRID-PAGING {
	margin-top: 30px;
}
.CI-GRID-PAGING-A {
	display: inline-block;
	min-width: 36px;
	height: 35px;
	color: #222;
	border: 1px solid #e5e5e5;
	border-radius: 3px;
	box-sizing: border-box;
	vertical-align: top;
	background-color: #fff;
	text-indent: 0;
	line-height: 32px;
	padding: 0;
	text-align: center;
	font-weight: normal;
	font-size: 16px;
}
.CI-GRID-PAGING input {
	display: inline-block;
	overflow: hidden;
	text-align: left;
	text-indent: -9999px;
	border: 1px solid #e8e8e8;
	border-radius: 3px;
	box-sizing: border-box;
	margin-right: 4px;
}
.CI-GRID-PAGING:after {
	content: '';
	display: block;
	clear: both;
}
.CI-GRID-PAGING-START {
	width: 36px !important;
	height: 35px !important;
	background: url(/resources/main/img/button/btn_arrow01.png) no-repeat 10px -35px;
}
.CI-GRID-PAGING-START-DISABLED {
	cursor: not-allowed;
}
.CI-GRID-PAGING-LEFT {
	width: 36px !important;
	height: 35px !important;
	margin-right: 10px !important;
	background: url(/resources/main/img/button/btn_arrow01.png) no-repeat 12px -105px;
}
.CI-GRID-PAGING-LEFT-DISABLED {
	cursor: not-allowed;
}
.CI-GRID-PAGING-RIGHT {
	width: 36px !important;
	height: 35px !important;
	margin-left: 10px;
	background: url(/resources/main/img/button/btn_arrow01.png) no-repeat 14px -140px;
}
.CI-GRID-PAGING-RIGHT-DISABLED {
	cursor: not-allowed;
}
.CI-GRID-PAGING-END {
	width: 36px !important;
	height: 35px !important;
	background: url(/resources/main/img/button/btn_arrow01.png) no-repeat 10px -70px;
	margin-right: 0;
}
.CI-GRID-PAGING-END {
	cursor: not-allowed;
}
.CI-GRID-PAGING-A-SELECTED {
	display: inline-block;
	min-width: 36px;
	height: 35px;
	line-height: 2em;
	color: #fff;
	border: 0 none;
	border-radius: 3px;
	box-sizing: border-box;
	vertical-align: top;
	background-color: #7d7f82;
}
.WEBPONENT-PAGING-TOTAL-COUNT-TEXT {
	visibility: hidden;
}
.CI-GRID-FOCUS-ESCAPER {
	font-size: 0 !important;
}
.CI-GRID-FOCUS-ESCAPER-SHOWN {
	font-size: 16px !important;
}
.CI-PAGING-WRAPPER .CI-MORE-BUTTON {
	width:100%;
	display: block;
	padding: 12px 0 14px;
	border: 1px solid #eaeaea;
	box-sizing: border-box;
	text-align: center;
}

.CI-PAGING-WRAPPER .CI-MORE-BUTTON span{
	padding-right: 35px;
	font-size: 16px;
	background: url(/resources/main/img/button/btn_arrow01.png) no-repeat right 8px;
}

.CI-PAGING-WRAPPER .page_jump {position:absolute;right:0;top:0;}
.CI-PAGING-WRAPPER .page_jump .page_total {display:inline-block;height:35px;line-height:38px;vertical-align:middle;margin: 0 5px;}
.CI-PAGING-WRAPPER .page_jump button {padding-right:5px;padding-left:5px;text-indent:0;border:0 none;background-color: #8b8d91;vertical-align: middle;}


.CI-GRID table td.CI-EMPTY-ROW {
	border-right: 0;
}

.CI-SORT-BTN-ASC {display:inline-block;overflow:hidden;width:24px;height:24px;margin-left:10px;text-align:left;text-indent:-10000em;vertical-align:middle;background:url('/resources/main/img/button/btn_arrow_down.png') no-repeat 50% 50%;}
.CI-SORT-BTN-DESC {display:inline-block;overflow:hidden;width:24px;height:24px;margin-left:10px;text-align:left;text-indent:-10000em;vertical-align:middle;background:url('/resources/main/img/button/btn_arrow_up.png') no-repeat 50% 50%;}
.CI-SORT-BTN-DEFAULT {display:inline-block;overflow:hidden;width:24px;height:24px;margin-left:10px;text-align:left;text-indent:-10000em;vertical-align:middle;background:url('/resources/main/img/button/btn_arrow_array.png') no-repeat 50% 50%;}


/*20191213 grid_visivle추가 */
.grid_visivle .CI-SCROLL-WRAPPER,.grid_visivle .CI-SCROLL-WRAPPER .CI-TBODY-WRAPPER,.grid_visivle .CI-GRID .CI-SCROLL-WRAPPER table,.grid_visivle .CI-GRID table td { overflow: visible !important;}
.scroll_padd .CI-THEAD-WRAPPER{padding-right: 17px;}

.ui-dialog.title .ui-dialog-content:after {display: none;}