@charset "utf-8";

#main_container { min-width:1040px; /*margin-top:-20px;*/ overflow-x:hidden; overflow-y:auto;}
.main_inwrap { margin:0 auto; width:100%; height:743px;}
.main_content { position:relative; width:100%; min-width:1080px; box-sizing:border-box; -webkit-box-sizing:border-box; -moz--webkit-box-sizing:border-box; /*background:#f1f1f1;*/}
/* .main_content:before { content:''; position:absolute; top:0; left:0; width:100%; height:164px; background:#fff;} */
.main_content .main_inwrap { position:relative;}

.main_banner { position:relative; width:100%; }
.main_banner ul { position:relative; width:1140px; margin:0 auto; padding:78px 0 0 10px; }
.main_banner ul:after { content:''; clear:both; display:block;}
.main_banner ul li { float:left; width:162px; margin:0 0 17.5px 0; text-align:center; background:url('/html/img/wfo/bg/bg_mainbanner_ico_shadow.png') center 0 no-repeat;}
.main_banner ul li.space_none { margin-left:0;}
.main_banner ul li a { font-size:16px; color:#ffffff; }
.main_banner ul li a .ico { display:inline-block; padding-bottom:7px; width:100%; height:78px;}
.main_banner ul li a .ico.callhelp { background:url('/html/img/wfo/ico/ico_banner_callhelp.png') center 0 no-repeat;}
.main_banner ul li a .ico.admin { background:url('/html/img/wfo/ico/ico_banner_admin.png') center 0 no-repeat;}
.main_banner ul li a .ico.record { background:url('/html/img/wfo/ico/ico_banner_record.png') center 0 no-repeat;}
.main_banner ul li a .ico.quality { background:url('/html/img/wfo/ico/ico_banner_quality.png') center 0 no-repeat;}
.main_banner ul li a .ico.exchange { background:url('/html/img/wfo/ico/ico_banner_callhelp.png') center 0 no-repeat;}
.main_banner ul li a .ico.ivr { background:url('/html/img/wfo/ico/ico_banner_ivr.png') center 0 no-repeat;}
.main_banner ul li a .ico.ckms { background:url('/html/img/wfo/ico/ico_banner_ckms.png') center 0 no-repeat;}
.main_banner ul li a .ico.work { background:url('/html/img/wfo/ico/ico_banner_work.png') center 0 no-repeat;}
.main_banner ul li a .ico.messenger { background:url('/html/img/wfo/ico/ico_banner_messenger.png') center 0 no-repeat;}
.main_banner ul li a .ico.swat { background:url('/html/img/wfo/ico/ico_banner_swat.png') center 0 no-repeat;}
.main_banner ul li a .ico.cti { background:url('/html/img/wfo/ico/ico_banner_cti.png') center 0 no-repeat;}
.main_banner ul li a .ico.pds { background:url('/html/img/wfo/ico/ico_banner_pds.png') center 0 no-repeat;}
.main_banner ul li a .ico.add { background:url('/html/img/wfo/ico/ico_banner_add.png') center 0 no-repeat;}

.tbl_wrap { position:relative; }
.tbl_wrap table { width:100%; border-top:1px solid #e2e2e2;}
.tbl_wrap table tr th, .tbl_wrap table tr td { padding:6px 5px; font-size:12px; font-weight:normal; text-align:center; border-left:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0;}
.tbl_wrap table tr th:first-child, .tbl_wrap table tr td:first-child { border-left:0;}
.tbl_wrap table tr th { background:#f6f5f5;}
.tbl_wrap table tr td { color:#000; letter-spacing:0;}
.tbl_wrap table tr td.ellipsis { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; text-align:left;}

/* 포틀릿 - 상태값 공통 */
.portlet_content_wrap .portlet_con .status_cont {display:inline-block; text-align:center;}
.portlet_content_wrap .portlet_con .status_cont:after {content:''; clear:both; display:block;}
.portlet_content_wrap .portlet_con .status_cont .process_area {float:left; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; text-align:center;}
.portlet_content_wrap .portlet_con .status_cont .process_area .tit {padding:8px 0 15px 0; font-size:12px;}
.portlet_content_wrap .portlet_con .status_cont .process_area .tit > span { font-size:15px; font-weight: normal;}
.portlet_content_wrap .portlet_con .status_cont .process_area .index {color:#fff; font-weight:bolder; letter-spacing:0; }
.portlet_content_wrap .portlet_con .status_cont .process_area .mono {color:#0082cd; font-weight:bolder; letter-spacing:0; font-size:18px;}

.portlet_content_wrap .portlet_con .status_cont .process_area.response .tit { color:#000;}
.portlet_content_wrap .portlet_con .status_cont .process_area.response .index {color:#fff;}
.portlet_content_wrap .portlet_con .status_cont .process_area.unable .tit { color:#000;}
.portlet_content_wrap .portlet_con .status_cont .process_area.unable .index { color:#fff;}
.portlet_content_wrap .portlet_con .status_cont .process_area.blue .tit { color:#000;}
.portlet_content_wrap .portlet_con .status_cont .process_area.blue .index { color:#fff;}

/* 포틀릿 공통 */
.portlet_content_wrap {padding:0 0 10px 0; min-height:350px; width:1114px; margin:0 auto; margin-top:20px;}
.portlet_content_wrap:after {content:''; clear:both; display:block;}
.portlet_content_wrap .portlet_con {float:left; margin:7px 0 20px 20px; padding:15px 30px 25px 30px; height:190px; background:#ffffff; box-shadow:2px 2px 10px 0px rgba(0, 0, 0, 0.15); text-align:center; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.portlet_content_wrap .portlet_con_img {position: relative; top: -15px; left: -30px;}
.portlet_content_wrap .portlet_con .tit_area {padding-bottom:15px; padding-top:10px; text-align:left;}
.portlet_content_wrap .portlet_con .portlet_con_img.banner_area_sero {position: relative; top: -20px; left: -20px;}
.portlet_content_wrap .portlet_con .tit_area:after {content:''; clear:both; display:block; }
.portlet_content_wrap .portlet_con .tit_area strong { font-size:14px; color:#333; font-weight:bold;}
.portlet_content_wrap .portlet_con .tit_area .btn_detail_more {float:right; display:none;}
.portlet_content_wrap .portlet_con .cont {max-height:130px; overflow:hidden;}

/* 포틀릿 원형 컬러공통 */
.col_teal{background-color:#00cdc6!important; border:1px solid #00cdc6!important;}
.col_spgreen{background-color:#45cc77!important; border:1px solid #45cc77!important;}
.col_royalblue{background-color:#0082cd!important; border:1px solid #0082cd!important}
.col_lavendar{background-color:#aab8ff!important; border:1px solid #aab8ff!important;}
.col_skyblue{color:#0082cd!important;}
.col_bk{background-color:#000!important;}
.col_deepgr{background-color:#666!important;}

.col_teal_text{color:#0a7f7b!important;}
.col_spgreen_txt{color:#2d7f4b!important;}
.col_royalblue_txt{color:#016fae!important}
.col_lavendar_txt{color:#514787!important;}
.col_skyblue_txt{color:#0082cd!important;}
.col_orange_txt{color:#f4553a!important;}
.col_bk_txt{color:#000!important;}

/* 포틀릿 컬럼2단 */
.portlet_content_wrap.column02 .portlet_con .statusbox_02 {padding-top:15px;}
.portlet_content_wrap.column02 .portlet_con .statusbox_02 .process_area {width:140px; margin-left:12px;}
.portlet_content_wrap.column02 .portlet_con .statusbox_02 .process_area:first-child {margin-left:0;}
.portlet_content_wrap.column02 .portlet_con .statusbox_03 {padding-top:15px;}
.portlet_content_wrap.column02 .portlet_con .statusbox_03 .process_area {width:100px; margin-left:10px;}
.portlet_content_wrap.column02 .portlet_con .statusbox_03 .process_area:after{content: " "; display: inline-block; width:1px; height:84px; border-right:1px solid #e1e1e1; position:relative; top: -75px; left: 53px;}/*상담원집계현황*/
.portlet_content_wrap.column02 .portlet_con .statusbox_03 .process_area:last-child:after{border-right:0!important;}
.portlet_content_wrap.column02 .portlet_con .statusbox_03 .process_area:first-child {margin-left:0}
.portlet_content_wrap.column02 .portlet_con .statusbox_03 .process_area .index {font-size:20px; line-height:42px;}
.portlet_content_wrap.column02 .portlet_con .statusbox_04 {padding-top:15px;}
.portlet_content_wrap.column02 .portlet_con .statusbox_04.privacy {padding-top:5px;}
.portlet_content_wrap.column02 .portlet_con .statusbox_04 .process_area {width:100px; margin-left:11px;}
.portlet_content_wrap.column02 .portlet_con .statusbox_04 .process_area:after{content: " "; display: inline-block; width:1px; height:84px; border-right:1px solid #e1e1e1; position:relative; top: -75px; left: 53px;}/*콜처리현황*/
.portlet_content_wrap.column02 .portlet_con .statusbox_04 .process_area:last-child:after{border-right:0!important;}
.portlet_content_wrap.column02 .portlet_con .statusbox_04 .process_area:first-child {margin-left:0}
.portlet_content_wrap.column02 .portlet_con .statusbox_04 .process_area .index {padding:6px 0 8px 0; font-size:20px;}
.portlet_content_wrap.column02 .portlet_con .statusbox_04 .process_area .index.callindex {width:100px; text-align:center; font-size: 20px; color:#000;}

/* 포틀릿 컬럼3단 */
.portlet_content_wrap.column03 .portlet_con .statusbox_02 {padding-top:15px;}
.portlet_content_wrap.column03 .portlet_con .statusbox_02 .process_area {width:139px; margin-left:12px;}
.portlet_content_wrap.column03 .portlet_con .statusbox_02 .process_area:after{content: " "; display: inline-block; width:1px; height:84px; border-right:1px solid #e1e1e1; position:relative; top: -77px; left: 74px;}
.portlet_content_wrap.column03 .portlet_con .statusbox_02 .process_area:first-child {margin-left:0;}
.portlet_content_wrap.column03 .portlet_con .statusbox_02 .process_area .index {font-size:23px; line-height:42px; margin: 0 0 0 47px;}
.portlet_content_wrap.column03 .portlet_con .statusbox_03 {margin-left:-10px; padding-top:10px;}
.portlet_content_wrap.column03 .portlet_con .statusbox_03 .process_area {width:65px; margin:0 5px 0 5px;}
.portlet_content_wrap.column03 .portlet_con .statusbox_03 .process_area:after{content: " "; display: inline-block; width:1px; height:43px; border-right:1px solid #e1e1e1; position:relative; top: -40px; left: 36px;}
.portlet_content_wrap.column03 .portlet_con .statusbox_03 .process_area:last-child:after{border-right:0!important;}
.portlet_content_wrap.column03 .portlet_con .statusbox_03 .process_area .index {font-size:16px; line-height:42px;}
.portlet_content_wrap.column03 .portlet_con .statusbox_03 .process_area .index.callindex {font-size:16px; line-height:42px; margin:0 0 0 7px;}

.portlet_content_wrap.column03 .portlet_con .statusbox_04 .process_area { width: 145px; height:52px; margin-top:10px;}
.portlet_content_wrap.column03 .portlet_con .statusbox_04 .process_area .tit {float:left; width:55px; padding:0 7px; height:100%; line-height:42px; box-sizing:border-box; -webkit-box-sizing:border-box;}
.portlet_content_wrap.column03 .portlet_con .statusbox_04 .process_area .index {float:left; font-size:20px; line-height:42px; font-weight:bold;}
.portlet_content_wrap.column03 .portlet_con .statusbox_04 .process_area .index.callindex {text-align:center; line-height: 42px; color:#000;}

/* 포틀릿 컬럼4단 */
.portlet_content_wrap.column04 .portlet_con .statusbox_02 {padding-top:70px;}
.portlet_content_wrap.column04 .portlet_con .statusbox_02 .process_area {width:97px; margin-left:12px;}
.portlet_content_wrap.column04 .portlet_con .statusbox_02 .process_area:first-child {margin-left:0}
.portlet_content_wrap.column04 .portlet_con .statusbox_02 .process_area .index { padding:12px 0; font-size:30px;}

.portlet_content_wrap.column04 .portlet_con .statusbox_03 {display:block; margin:23px auto 0;width:200px;}
.portlet_content_wrap.column04 .portlet_con .statusbox_03 .process_area {width:100px; text-align:center;}
.portlet_content_wrap.column04 .portlet_con .statusbox_03 .process_area:last-child:after{border-right:0!important;}
.portlet_content_wrap.column04 .portlet_con .statusbox_03 .process_area:first-child {margin-top:0;}
.portlet_content_wrap.column04 .portlet_con .statusbox_03 .process_area:after {content:''; clear:both; display:block;}
.portlet_content_wrap.column04 .portlet_con .statusbox_03 .process_area .tit {float:left; padding:0; width:100px; height:100%; line-height:42px; box-sizing:border-box; -webkit-box-sizing:border-box;}
.portlet_content_wrap.column04 .portlet_con .statusbox_03 .process_area .index  {float:left; text-align:center; font-size:18px; line-height:42px; font-weight:bold;letter-spacing:0; margin:0 20px;}

.portlet_content_wrap.column04 .portlet_con .statusbox_04 {padding-top:10px;}
.portlet_content_wrap.column04 .portlet_con .statusbox_04 .process_area {width:97px; margin:10px 0 0 10px;}
.portlet_content_wrap.column04 .portlet_con .statusbox_04 .process_area .index {padding:10px 0 5px 0; width:97px; text-align:center;}
.portlet_content_wrap.column04 .portlet_con .statusbox_04 .process_area .index.callindex {font-size:18px;}

/* 포틀릿 - 콜백 현황 */
.portlet_content_wrap .portlet_con .callback_cont { display:inline-block; }
.portlet_content_wrap .portlet_con .callback_cont .list_wrap { position:relative; margin-left:12px; padding:12px 13px; width:139px; border-radius:7px; text-align:left; box-sizing:border-box; -webkit-box-sizing:border-box; -mox-box-sizing:border-box; background:#f1f1f1;}
.portlet_content_wrap .portlet_con .callback_cont .list_wrap:first-child { margin-left:0;}
.portlet_content_wrap .portlet_con .callback_cont .list_wrap .info_txt { color:#666666;}
.portlet_content_wrap .portlet_con .callback_cont .list_wrap .state { position:absolute; padding:3px; font-size:12px; border-radius:2px ;color:#fefefe; background:#60b519;}
.portlet_content_wrap .portlet_con .callback_cont .list_wrap .reserve { display:inline-block; color:#909090; letter-spacing:-0.5px;}

.portlet_content_wrap.column02 .portlet_con .callback_cont { padding-top:22px;}
.portlet_content_wrap.column02 .portlet_con .callback_cont:after { content:''; clear:both; display:block;}
.portlet_content_wrap.column02 .portlet_con .callback_cont .list_wrap { float:left;}
.portlet_content_wrap.column02 .portlet_con .callback_cont .list_wrap .info_txt strong,
.portlet_content_wrap.column02 .portlet_con .callback_cont .list_wrap .info_txt .phone { display:block; line-height:22px;}
.portlet_content_wrap.column02 .portlet_con .callback_cont .list_wrap .state { top:12px; left:65px; }
.portlet_content_wrap.column02 .portlet_con .callback_cont .list_wrap .reserve { padding-top:18px;}
.portlet_content_wrap.column02 .portlet_con .callback_cont .list_wrap .reserve.darkgrey { color:#7f7f7f;}

.portlet_content_wrap.column03 .portlet_con .callback_cont { padding:0;}
.portlet_content_wrap.column03 .portlet_con .callback_cont:after { content:''; clear:both; display:block;}
.portlet_content_wrap.column03 .portlet_con .callback_cont .list_wrap { float:left; margin-top:25px;}
.portlet_content_wrap.column03 .portlet_con .callback_cont .list_wrap .info_txt strong,
.portlet_content_wrap.column03 .portlet_con .callback_cont .list_wrap .info_txt .phone { display:block; line-height:22px;}
.portlet_content_wrap.column03 .portlet_con .callback_cont .list_wrap .state { top:12px; left:65px; }
.portlet_content_wrap.column03 .portlet_con .callback_cont .list_wrap .reserve { padding-top:18px;}

.portlet_content_wrap.column04 .portlet_con .callback_cont { display:block; padding:0;}
.portlet_content_wrap.column04 .portlet_con .callback_cont .list_wrap { width:100%; margin:7px 0 0 0;}
.portlet_content_wrap.column04 .portlet_con .callback_cont .list_wrap:first-child { margin-top:15px;}
.portlet_content_wrap.column04 .portlet_con .callback_cont .list_wrap .info_txt .phone { padding-left:8px;}
.portlet_content_wrap.column04 .portlet_con .callback_cont .list_wrap .state { top:12px; right:13px; }
.portlet_content_wrap.column04 .portlet_con .callback_cont .list_wrap .reserve { padding-top:8px;}

/* 포틀릿 2단 */
.portlet_content_wrap.column02 .portlet_con { width:530px; }

/* 포틀릿 3단 */
.portlet_content_wrap.column03 .portlet_con { width:351px;}

/* 포틀릿 4단 */
.portlet_content_wrap.column04 .portlet_con .cont { max-height:222px;}
 .portlet_content_wrap.column04 .portlet_con { width:258px; height:290px; padding:20px 20px 25px 20px;}

/* 권한에 따른 배경 및 색상 변경 */
.authority_staff .main_banner {height:250px; background-size:auto; }
.admin_staff .main_banner {height:250px; background-size:auto; }
.counsel_staff .main_banner {height:250px; background-size:auto; }

/* 메인 포틀릿 설정 팝업 */
.portlet_layer_wrap { position:relative; padding:20px 40px 15px 40px; margin-left:-410px; width:820px; top:50%; left:50%; border:1px solid #dddddd; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; background:#fff;}
.portlet_layer_wrap .layer_header { padding-bottom:13px; border-bottom:3px solid #444444;}
.portlet_layer_wrap .layer_header h2 { font-size:18px; color:#ef3f3e; font-weight:bold;}
.portlet_layer_wrap .layer_header .btn_pop_close { position:absolute; top:20px; right:40px;}
.portlet_layer_wrap .pop_content .portlet_column { padding:30px; text-align:center; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; border-bottom:1px solid #cccccc;}
.portlet_layer_wrap .pop_content .portlet_column:after { content:''; clear:both; display:block;}
.portlet_layer_wrap .pop_content .portlet_column .col_list { float:left; width:214px; margin-left:18px; padding:13px 0 15px 0; border:1px solid #ccc; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box;}
.portlet_layer_wrap .pop_content .portlet_column .col_list:first-child { margin-left:0;}
.portlet_layer_wrap .pop_content .portlet_column .col_list .radio_list { padding-bottom:15px;}
.portlet_layer_wrap .pop_content .portlet_column .col_list > p { padding-top:20px; font-size:14px; font-weight:bold;}
.portlet_layer_wrap .pop_content .setting_wrap { width:100%; margin-top:27px;}
.portlet_layer_wrap .pop_content .setting_wrap p.strong_txt { text-align:right; font-size:13px; color:#e15555; font-weight:bold;}
.portlet_layer_wrap .pop_content .setting_wrap .set_con { display:none; padding-top:13px; margin-left:-10px;}
.portlet_layer_wrap .pop_content .setting_wrap .set_con:after { content:''; clear:both; display:block;}
.portlet_layer_wrap .pop_content .setting_wrap .set_con .set { float:left; margin-bottom:10px; padding:0 10px; background:#dee4e8; box-sizing:border-box;}
.portlet_layer_wrap .pop_content .setting_wrap .set_con.column_02 .set { margin-left:10px; width:364px; height:144px;}
.portlet_layer_wrap .pop_content .setting_wrap .set_con.column_03 .set { margin-left:9px; width:240px; height:144px;}
.portlet_layer_wrap .pop_content .setting_wrap .set_con.column_04 .set { margin-left:10px; width:177px; height:298px;}
.portlet_layer_wrap .pop_content .setting_wrap .set_con .set .select_wrap { top:50%; margin-top:-18px;}

/* [Start] 팝업 (대,중,소) 스타일 적용 (JEH-180308) */
.popup-wrap {position:relative; margin:0 auto; }
.popup-wrap.large {width:1000px; height:850px;}
.popup-wrap.medium {width:500px; height:500px;}
.popup-wrap.small {width:350px; height:450px;}
.popup-title {position:absolute; top:0; left:0; width:100%; height:74px; box-sizing: border-box; border-bottom:1px solid #dddddd;}
.popup-title h1 {display:inline-block; font-size:20px; line-height: 33px; margin:20px 0 0 30px; padding:0 0 0 85px; background: url('/html/images/logo_hwfm.png') left center no-repeat;}
.popup-content {width:100%; height:85%; box-sizing: border-box; padding:100px 20px 100px 20px;}
.popup-content-file {position: absolute;bottom: 66px;left: 0;width: 100%;height: 32px;box-sizing: border-box;border-top:1px solid #dddddd;padding: 8px 15px 5px 5px;font-size: 15px;text-align: right;}
.popup-footer {position: absolute; bottom:0; left:0; width:100%; height:66px; box-sizing: border-box; border-top:1px solid #dddddd;}
.popup-footer .popup-footer-unit {margin:20px 30px 0 0;}
input[id="today"] + label {display:inline-block; font-size:16px; color:#222222; line-height: 22px; padding:2px 0 0 28px; box-sizing: border-box; background: url('/html/img/wfo/bg/bg_popup_checkbox.png') left center no-repeat;}
input[id="today"]:checked + label {background: url('/html/img/wfo/bg/bg_popup_checkbox_checked.png') left center no-repeat;}
input[id="today"] {display:none;}
.popup-close-btn {display:inline-block; width:55px; height:25px; font-size:13px; color:#fff; line-height: 25px; border-radius: 4px; padding-left: 21px; box-sizing: border-box; background: url('/html/img/wfo/bg/bg_popup_close.png') 7px center no-repeat; background-color: #448ccb; margin-left:14px;}
.popup-close-btn:hover {color:#ffffff;}