@charset "utf-8";

/***********************************************************************************
title		: NIA 통합플랫폼 템플릿 스타일 가이드 - 공통 컴포넌트에 대한 스타일 정의
작성시작일  : 2016-07_20
************************************************************************************/

/*wrap*/
#temptype_wrap{padding:30px 35px 30px 30px; min-width:900px;}

/* SBUx.css 수정*/
.sb-selectbox {/*padding:0 18px 0 5px;*/padding:0;border:1px solid #c2c6ce; background-color:#fff !important;}
p.sbux-pik-group{margin:0;}
p.sbux-pik-group + .sbux-pik-group{margin-left:10px;}
/*input.form-control{height:30px;}*/
span.sbux-input-normal {margin:0;}
h1, h2, h3, h4, h5, h6{margin:0;}
.btn {font-size:12px;}

/*SBUxCustom 수정*/
textarea.sbux-txa {width:100%;}

/*sbgrid default.css 수정*/
.sbgrid_cell_st{border-color:#cbcbcb;}
.sbgrid_data_row_hover_st{background-color: #ebf0f8 !important;}
.sbgrid_focus_st{background-color: #ebf0f8 !important;}

/* 공통 */
.btn_padding{padding:0 10px !important;}
.fileLink{color:blue;text-decoration:underline !important;}

/*title*/
.title_area{margin-bottom:20px;position:relative;}
.title_area h3{font-size:20px;color:#222;padding-bottom:10px;border-bottom:1px solid #e5e5e5;font-weight:700;letter-spacing:-0.1em;}
.subTitle_area{/*padding-bottom:10px;*/position:relative;margin-top:20px;height:25px;}
.subTitle_area h4{font-size:14px;font-weight:700;color:#222;letter-spacing:-0.07em;}
.subTitle_area h4:before {
    content:"\f3d1";
    font-family:ionicons;
    font-size: 14px;
    font-weight:700;
    color:#357acd;
    padding-left:1px;
    padding-right:7px;
}

/*button*/
.btn_blue, 
.btn_blue:hover, 
.btn_blue:active{background-color:#357acd !important;border:0;} 
.btn_navy, 
.btn_navy:hover, 
.btn_navy:active{background-color:#495462 !important;border:0;}
.btn_black, 
.btn_black:hover, 
.btn_black:active{background-color:#212a31 !important;border:0;}
.btn_gray, 
.btn_gray:hover, 
.btn_gray:active{background-color:#565656 !important;border:0;}

.title_area .btn_area{position:absolute;top:-10px;right:0;text-align:right;}
.subTitle_area .btn_area{position:absolute;top:-10px;right:0;text-align:right;}
.td_btnArea{text-align:right;vertical-align:bottom !important;}
.btnRight_area{text-align:right;}
.btnLeft_area{text-align:left;}
.btnCenter_area{text-align:center;}



/*paginate*/
.paginate_area{text-align:center;margin-bottom:20px;}
.paginate_area ul.paginate{display:inline-block;}
.paginate_area ul.paginate li {display:inline-block;float:left;margin-right:10px;}
.paginate_area ul.paginate li a{display:block;width:25px;height:25px;line-height:23px;background:#fff;border:1px solid #e0e0e0;font-size:12px;font-weight:700;color:#555;}
.paginate_area ul.paginate li a i{font-size:15px;}
.ion-android-arrow-dropleft:before {height:25px;line-height:23px;}
.ion-android-arrow-dropright:before {height:25px;line-height:23px;}
.paginate_area ul.paginate li a.curr{color:#fff;background:#357acd;border:1px solid #357acd;}



/*attached file*/
.MultiFile-holder{position:relative;}
.MultiFile-list{padding: 8px 0 8px 10px;overflow-y:auto;width:100%;height:80px;border:1px solid #c2c6ce;border-radius:3px;box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;}
.MultiFile-wrap input{display: none;}
.btn_inline {display:inline-block;position:relative;overflow:visible;}
.btn-multiFile{margin-top:5px;}

/*divide*/
.divide_area{width:100%;position:relative;margin-bottom:5px}
.divide_area:after {display:block;clear:both;content:"";}
.divide_area .left_area{float:left;}
.divide_area .right_area{float:right;}
.divide_area .divide_control{position:absolute;left:48%;top:150px;width:4%;text-align:center;}
.divide_area .divide_control a{margin:0 auto;display:block;width:25px;height:25px;text-align:center;background:#357acd;border-radius:2px;margin-bottom:5px;}
.divide_area .divide_control a i{color:#fff;font-size:15px;}
.ion-ios-arrow-forward:before {height:30px;line-height:25px;}
.ion-ios-arrow-back:before {height:30px;line-height:25px;}
.divide_area h4 {margin-top:8px;}

/*tabs*/
.tabs_area .nav-tabs{border-bottom:1px solid #495462;}
.tabs_area .nav-tabs>li{}
.tabs_area .nav-tabs>li>a{border:1px solid #cdcdcd;border-bottom:0;background-color:transparent;margin-right:5px;padding:10px 20px;font-size:14px;}
.tabs_area .nav-tabs>li.active>a{border:1px solid #495462;background-color:#357acd;line-height:18px;cursor:default;}
.tabs_area .nav-tabs>li.active>a>span.sbux-tab-txt{color:#fff;} 
.tabs_area .tab-content{border:0;padding:10px 0;overflow:visible;}

/*graph*/
.graph_area{width:100%;height:250px;line-height:250px;background:#fff;border:2px solid #cbcbcb;font-size:30px;text-align:center;}

/*comment*/
.comment_area{width:100%;margin-bottom:40px;border:2px solid #357acd;background:#f8f8f8;}
.comment_area ul{width:100%;margin:10px 0;position:relative;}
.comment_area ul li{padding:3px 0 3px 20px;}

/*datepicker*/
div.datepickerMode table.modeDay{margin:0;}
.sbux-pik-icon-btn, 
.sbux-inb-bk-btn{height:36px !important;}
.datepickerMode table tr th,
.datepickerMode table tr td{padding:0;border:0;background:transparent;}
.datepickerMode table tr th{color:white;text-align:center;}

div.datepickerMode table tr td.sbux-pik-pop-regularday span{color:#adaeb6;}
div.datepickerMode table tr td.sbux-pik-pop-saturday span{color: #146894;}
div.datepickerMode table tr td.sbux-pik-pop-sunday span{color: #af2921;}
div.datepickerMode table tr td span {font-size:12px;line-height:18px}

div.datepickerMode table.modeMonth td span,div.datepickerMode table.modeYear td span{color: #adaeb6}


.datepickerMode table.modeMonth td .btn, 
.datepickerMode table.modeYear td .btn{padding:7px 0;}

/*required*/
.search_area .required:after{
  content:"*";
  position: absolute;
  left: 0;
  width: 10px;
  height: 10px;
  color:#ff0000;
  vertical-align:middle;
}

.tableDetail_area .required:after{
  content:"*";
  position: absolute;
  left: 10px;
  width: 10px;
  height: 10px;
  color:#ff0000;
  vertical-align:middle;
}

/*modal popup*/
.modal_area .modal-header{background:#357acd;}
.modal_area .modal-title{color:#fff !important;}
.modal_area .btn-primary{background-color:#357acd;border:1px solid #357acd;}


/*공통ui, 검색영역, 그리드*/
#ui_wrap{padding:30px 35px 30px 30px; min-width:940px;}
.uiTitle_area{margin-bottom:50px;}
.uiTitle_area>h3{font-size:40px;margin-bottom:30px;}
.uiTitle_area div.ui_back{width:100%;padding:20px;background:#E0FFDB;box-shadow:0 3px 2px 0 #eee;}
.uiSubTitle_area{margin-bottom:50px;}
.uiSubTitle_area>h4{font-size:24px;margin-bottom:20px;padding-left:10px;}
.uiSubTitle_area h4 i{margin-right:5px;}
.uiSubTitle_area h5{font-size:16px;font-weight:700;margin-bottom:15px;padding-left:10px;}
.uiSubTitle_area h4 span, 
.uiSubTitle_area h5 span{margin-left:20px;font-size:13px;}
.uiSubTitle_area div.ui_back{width:100%;padding:20px;background:#FFFFD2;box-shadow:0 3px 2px 0 #eee;}
div.ui_back p{font-size:18px;margin:0;line-height:1.5em;}
.input_ex table tr th,
.input_ex table tr td{padding:5px 0;vertical-align:middle;}
.input_ex table tr th{text-align:left;}
.picker_area{border:0;background:transparent;padding:0;}

/*tree area*/
.tree_area{width:100%;background:#fff;border:2px solid #cbcbcb;font-size:30px;overflow-y:scroll;padding:5px 0;}
.tree_area .tree{margin: auto;padding: 0 0 0 10px;
}
.tree_area .tree .tree-plus.sbux-icon:first-child{background:#357acd;border-color:#357acd;}

/*selectbox 추가수정*/
.sb-selectbox {padding-left:12px !important;}

@media only screen and (max-width:1400px) {
span.sbux-inb-icon{display:none;} 
.has-feedback .form-control{padding-right: 0px !important;}
.tableDetail_area table tr td .input-group {width:35% !important;}
}

.sbgrid_datagrid_Output {padding:5px;}

/*jjoong*/

/*btn*/
.btn-cblue{background:#5e738f;color:#fff;border:1px #4a5b72 solid;}
.btn-gray{background:#eaeaea;color:#525252;border:1px #acacac solid;}
.btn-gray2{background:#eaeaea;color:#525252;border:1px #acacac solid;}
.btn-gray2:hover{background:#fff;color:#888;border:1px #acacac solid;}
.btn-white{background:#fff;color:#555;border:1px #acacac solid;}
.btn-dgray{background:#4a4a4a;color:#fff;border:1px #2b2b2b solid;}
.btn-dgray:hover{background:#111;color:#fff;border:1px #2b2b2b solid;}
.btn-blue{background:#0a7bed;color:#fff;border:1px #044b93 solid;}
.btn-blue:hover{background:#0866c6;color:#fff;border:1px #044b93 solid;}
.btn-blue2{background:#fff;color:#0866c6;border:1px #0866c6 solid;}
.btn-blue2:hover{background:#0866c6;color:#fff;border:1px #0866c6 solid;}
.btn-green{background:#438b14;color:#fff;border:1px #3c7815 solid;}
.btn-green:hover{background:#377210;color:#fff;border:1px #377210 solid;}
.btn-red{background:#b42c29;color:#fff;border:1px #a02624 solid;}
.btn-cyan{background:#0093a8;color:#fff;border:1px #026979 solid;}
.btn-cyan:hover{background:#008195;color:#fff;border:1px #026979 solid;}
.btn-cyan2{background:#fff;color:#008195;border:1px #008195 solid;}
.btn-cyan2:hover{background:#008195;color:#fff;border:1px #026979 solid;}

/*search*/
.search_area{margin-bottom:20px;padding:15px;box-sizing:border-box;border:2px solid #357acd;background:#f8f8f8;text-align:center;}
.search_area > table{width:100%}
.search_area > table th{white-space:nowrap;text-align:right;padding:4px 5px 2px;}
.search_area > table td{padding:3px 5px;text-align:left;}
.search_area > table td.inputGroup_width .input-group{width:30%;}
.search_area > table + button {margin-top:10px;}

/*tableDetail*/
.tableDetail_area{/*margin:10px 0;*/background:#f4f4f4;overflow-x:auto;}
.tableDetail_area>table{width:100%;border-top:2px solid #444;}
.tableDetail_area > table > tbody > tr > th,
.tableDetail_area > table > tbody > tr > td{padding:13px 10px;border:1px solid #cbcbcb;text-align:left;vertical-align:middle;}
.tableDetail_area > table > tbody > tr > th{font-weight:700;padding-left:20px;}
.tableDetail_area > table > tbody > tr > td{padding-left:10px;vertical-align:middle;background:#fff;}

.tableDetail_area> * >table{width:100%;border-top:2px solid #444;}
.tableDetail_area> * > table > tbody > tr > th,
.tableDetail_area> * > table > tbody > tr > td{padding:6px 0;border:1px solid #cbcbcb;text-align:left;vertical-align:middle;box-sizing:border-box;}
.tableDetail_area> * > table > tbody > tr > th{font-weight:700;padding-left:10px;}
.tableDetail_area> * > table > tbody > tr > td{padding-left:10px;vertical-align:middle;background:#fff;}


.tableDetail_area.inner_table{margin:10px 0;background:#f2f4f7;overflow-x:auto;}
.tableDetail_area.inner_table>table{width:100%;border-top:0;}
.tableDetail_area.inner_table > table > tbody > tr > th,
.tableDetail_area.inner_table > table > tbody > tr > td{padding:13px 10px;border:1px solid #cbcbcb;text-align:left;vertical-align:middle;}
.tableDetail_area.inner_table > table > tbody > tr > th{font-weight:700;padding-left:20px;}
.tableDetail_area.inner_table > table > tbody > tr > td{padding-left:10px;vertical-align:middle;background:#fff;}

/*tableDetail + Input
.tableDetail_area > table > tbody > tr > td select{width:30%;}*/
.tableDetail_area > table > tbody > tr > td .input-group{width:30%;float:left;}
.tableDetail_area > table > tbody > tr > td sbux-button{padding:0;}
.input_area > table > tbody > tr > th{padding:4px 10px 3px 20px;}
.input_area > table > tbody > tr > th.center{text-align:center;padding:11px 0 11px 0;}
.input_area > table > tbody > tr > th.th_check{text-align:center;padding:0 10px;vertical-align:top;}
.input_area > table > tbody > tr > td.th{background:#f2f4f7;padding:11px 10px;}
.input_area > table > tbody > tr > td{padding:5px 10px;}
.input_area > table > tbody > tr > td.center{text-align:center;}

/*table*/
table tr th{color:#333;font-weight:700;position:relative;}
table tr td{color:#4c4c4c;}
table tr td select{width:100%;height:30px;line-height:30px;}
table tr th select{width:100%;height:30px;line-height:30px;}
label {margin-bottom:0 !important;font-weight:normal !important;}

.sb-check-wrap .sb-chk-tit {padding:5px 0 0 5px !important;display:inline-block;}

.tableList_area {}
.sbgrid_PA {margin:10px 0}
.tab-content {padding:10px;}

/*sbux-tab*/
.sbux-tab-item.active>a>span.sbux-tab-txt{color:#fff;} 

caption {display:none;}



/* khs 추가 */
.detail_area{}
.detail_area .detail_title{border-top:2px solid #444;border-right:1px solid #cbcbcb;border-left:1px solid #cbcbcb;border-bottom:1px solid #cbcbcb;margin-top:10px;}
.detail_area .detail_title:first-child{margin-top:0;}
.detail_area .detail_title .tit{padding:13px 10px;font-weight:700;background:#f4f4f4}
.detail_area .detail_title .detail_inner{background:#fff;padding:5px;}


/*tableDetail2*/
.tableDetail_area2{margin:10px 0;background:#EAEFF3;overflow-x:auto;}
.tableDetail_area2>table{width:100%;border-top:2px solid #cbcbcb;}
.tableDetail_area2 > table > thead > tr > th {background:#EAEFF3;padding:6px 10px;text-align:center;border:1px solid #cbcbcb;}
.tableDetail_area2 > table > tbody > tr > th,
.tableDetail_area2 > table > tbody > tr > td{padding:6px 10px;border:1px solid #cbcbcb;text-align:left;vertical-align:middle;}
.tableDetail_area2 > table > tbody > tr > th{font-weight:700;padding-left:20px;}
.tableDetail_area2 > table > tbody > tr > td{padding-left:10px;vertical-align:middle;background:#fff;}


/* 설문 상세 */
.surveyView .questionDiv {border-left:1px solid #e3e3e3; border-right:1px solid #e3e3e3;border-bottom: 1px solid #e3e3e3;}
.surveyView table{border-collapse:collapse; word-break:break-all; table-layout:fixed; width:100%; border-top:3px solid #666;}
.surveyView table caption{width:0px; height:0px; overflow:hidden; text-indent:-9999px; font-size:0px;}
.surveyView table th{padding:8px;}
.surveyView th:first-child{border-right:none;}
.surveyView th.tit {color:#555; padding:20px 30px; font-size:16px; background:#f5f5f5; font-weight:bold; text-align:left !important;border-bottom:1px solid #e3e3e3; }
.surveyView td{padding:8px;}
.surveyView td.info{border-top: 1px solid #e3e3e3;}

.surveyView .subTxt{overflow:hidden; padding: 10px 20px; border-bottom:1px solid #e3e3e3;}
.surveyView .subTxt li{float:left; width:49%; margin:0 0 1% 1%;}
.surveyView .subTxt li:nth-child(2n-1){margin:0 0 1% 0;}
.surveyView .subTxt li strong{display:inline-block;margin-right:5px;}
.brown{color:#9c3213; font-weight:bold;}
.surveyView .questionDiv .txt{padding:10px 20px;}
.surveyView .questionDiv .txt2{padding:10px 20px;}
.surveyView .questionDiv .txt .privacy_txt{height:200px;overflow-y:auto;margin-bottom:15px;}
.surveyView .questionDiv .txt .agreeChk{cursor:pointer;}

.tabType1{position:relative;margin-top:20px;}
.tabType1 .tabBt{display:block; position:absolute; top:0px; padding:13px 0 15px; background-color:#f5f5f5; border:1px solid #e4e4e4; border-left:0px; font-size:15px; text-align:center; color:#666; text-decoration:none;border-right:none;}
.tabType1.tab2 .tabBt{width:calc(50% - 2px);}
.tabType1 .tabBt1{border-left:1px solid #e4e4e4; left:0px;}
.tabType1 .tabBt.on{border-bottom:1px solid #fff; background-color:#fff; color:#3b6cca; font-weight:bold;}
.tabType1 .tabCon{padding:65px 30px 30px; border:1px solid #e4e4e4;}
.tabType1 .tabCon.no_tab{padding:0 30px 30px;}
.surveyDiv{border:1px solid #e4e4e4; padding:20px 20px 30px;}
.surveyDiv.type2{border:none; padding:0px;}
.surveyDiv .group_tit{font-size:18px;padding:10px 20px;background:#f5f5f5;font-weight:bold;text-align:center;margin:0 -30px 15px;}
.surveyDiv .unit {padding-top:20px; border-top:1px dashed #d0d0d0; margin:20px 0 20px;}
.surveyDiv .unit:first-child{padding-top:0px; border-top:0px; margin-top:0px;}

.surveyDiv .unit .tit{font-weight:bold; color:#555; padding:0 10px; min-height:40px;margin:0;}
.surveyDiv .unit .tit .detail{font-weight:400;padding-top:10px;color:#9c3213;}
.surveyDiv .unit .list{padding:15px 20px 0 20px}
.surveyDiv .unit .list li{display:inline-block;}
.surveyDiv .unit .list li.type-col{display:block;margin-top:15px;}
.surveyDiv .unit .list li:first-child{margin:0 10px 0 0;}
.surveyDiv .unit .list li input {margin-right:0px;}
.surveyDiv .unit .list li input[type="text"]{width:99%;height:33px;line-height:33px;border:1px solid #d7d7d7; padding-left:5px; }
.surveyDiv .unit .list li.etc input[type="text"]{width:100px;height:25px;line-height:25px;}
.surveyDiv .unit .list li.question_type2{display:block;margin:0;}
.surveyDiv .unit .list li.question_type2 select{height:33px;line-height:33px;border:1px solid #d7d7d7;}
.surveyDiv .unit .list li.question_type2 textarea{width:99%;min-height:80px;padding:1%;border:1px solid #d7d7d7;resize:none;}
.surveyDiv .unit .list li .reason{margin:10px 0 5px 0;}

.tabType1.tab2 .tabBt2{width:calc(50% - 1px); left:50%;}
.surveyDiv .unit .list2{padding:15px 30px 0px 30px}
.surveyDiv .unit .list2 li{margin-top:15px; overflow:hidden;}
.surveyDiv .unit .list2 li:first-child{margin-top:0px;}
.surveyDiv .list2 .txt {padding:0px;line-height:23px;word-break: break-all;}

.surveyDiv .unit .list2 li .txt{float:left;width:54%;}
.surveyDiv .unit .list2 li .result{float:right;width:45%;position: relative;padding-right:125px;}
.surveyDiv .result .bar{border-radius:5px; background-color:#e6e6e6; width:100%; height:12px; margin-top:4px;}
.surveyDiv .result .bar span{width:7px; height:12px; display:inline-block; float:left;}
.surveyDiv .result .bar span:first-child{overflow:hidden; border-radius:5px; background-color:#ef8d71; height:12px; display: inline-block;}
.surveyDiv .result .resultTxt{position:absolute;top:0;right:0;min-width:80px;}
.surveyDiv .result .resultTxt span{color:#9c3213; font-weight:bold;}

.surveyDiv .resultTotal{height:35px; background:#f2f2e5; margin-top:20px; overflow:hidden; font-weight:bold; color:#9c3213; padding:8px 20px;}
.surveyDiv .resultTotal .totalT{float:left;}
.surveyDiv .resultTotal .totalN {float:right;}

.survey_table{display:table;width:100%;}
.survey_table .survey_row{display:table-row;}
.survey_table .survey_row .survey_cell{display:table-cell;padding:10px;width:50%;}
.survey_table .survey_row .survey_cell strong{display:inline-block;margin-right:5px;}
.survey_table .survey_row .survey_cell > div{display:inline-block;}

@media (max-width: 768px){
	.surveyView th.tit{font-size:16px;padding:20px 10px;}
	.surveyView .questionDiv .txt2{padding:10px 10px;}
	
	.survey_table{display: block;}
	.survey_table .survey_row{display: block;}
	.survey_table .survey_row .survey_cell{display:block;width:100%;}
	.survey_table .survey_row .survey_cell strong{display:block;margin-bottom:5px;}
	.survey_table .survey_row .survey_cell > div{display:block;}
	
	.surveyDiv .group_tit{font-size:14px;margin:15px -10px;}
	.tabType1 .tabCon{padding:65px 10px 10px;}
	.surveyDiv .unit .list2{padding:15px 15px 0px 15px;}
	.surveyDiv .unit .list2 li .txt{float:none;width:100%;}
	.surveyDiv .unit .list2 li .result{float:none;width:100%;height:20px;}
}