@charset "utf-8";


/*공통 스타일*/
.point{color:#3cc9de !important;}
.point_lect{color:#fd576b !important;}
.desc_box{padding: 14px 20px; margin: 10px 0; border:1px solid #c1beb0; background-color: #fffdf4;}
.desc_box.lightblue{border-color:transparent; background-color: #f9fafb;}
.depth_list > li{margin-top: 10px;}
.depth_list > li:first-child{margin-top: 0;}
.depth_list > li:after{content:""; display: block; clear: both;}
.depth_list > li b{display: inline-block; padding: 3px 10px; margin-right: 8px; border:1px solid #ccc; font-weight: 600;}
.depth_list > li b a{display: inline-block;}
.depth_list > li .desc{display: inline-block;}
.depth_list > li .desc_box{margin-bottom: 30px;}
.depth_list > li:last-child .desc_box{margin-bottom: 0;}

.dot_list > li{position: relative; line-height:1.6; padding-left: 10px; margin-top: 4px; font-weight: 300; color: #888;}
.dot_list > li:first-child{margin-top: 0;}
.dot_list > li:before{content:""; display: block; position: absolute; top: 9px; left: 0; width: 3px; height: 3px; border-radius:50%; background:#333;}
.dot_list > li span{color: #333;}

/* 검색 창 - 서브 공통 */
.search_wrap .row{margin:0;}
.search_wrap .btn{min-width:80px;}
.search_wrap .search_tit{width:8%; min-width:95px;}
.search_wrap .search_con{width:92%; max-width:calc(100% - 95px); display:flex; flex-wrap:wrap; align-items: center;}
.search_wrap .search_con > div + div{margin-left:10px;}
div.search_date{width:40%; min-width:360px; max-width:520px;}
.search_period{width:40%; min-width:310px; max-width:480px;}
.search_period .btn-group{width:100%;}
.search_period button{min-width:unset; width:16.6666%;}

/*경력사항*/
.career_summary .career_sort{display: inline-block; font-weight: 600;}
.career_summary .career_sort:after{content:""; display: inline-block; width: 1px; height: 10px; margin:0 4px 0 8px; background-color: #ccc;}
.career_summary .career_desc{display: inline-block;}

/*자기소개서*/
.letter_view{padding: 20px; border:1px solid #ccc; border-top:2px solid #333;}

/*쪽지보내기*/
.msg_object .obj{display: inline-block; position: relative; padding:3px 26px 4px 10px; margin:2px; border:1px solid #dfdfdf; border-radius:30px;}
.msg_object .obj .name{display: inline-block; font-size:13px;}
.msg_object .obj .del{opacity: .5; display: inline-block; position: absolute; top: 50%; right: 10px; width: 12px; height: 12px; margin-top: -6px; background:#fff url(/common/images/board/icon_close.svg) no-repeat 50% 50%; background-size:12px auto; cursor:pointer;}
.msg_object .obj:hover{box-shadow: 1px 1px 1px rgba(0,0,0,0.05);}
.msg_object .obj:hover .name{font-weight: 600;}
.msg_object .obj .del:hover{opacity: 1;}
.bbsList .mail_closed{opacity: .3;}

/*percentage*/
.graph_container {display: block; margin: 0 auto;}
.graph_donut {display: inline-block; position: relative; width: 100px; height: 100px; text-align: center;}
.graph_donut canvas{width:100% !important; height:100% !important;}
.percent{display: inline-block; position: absolute; top: 50%; left: 50%; font-weight: 600; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.percent:after{content: "\0025";}

/*설문평가*/
.list_item .item_header{padding: 20px; background-color: #F4F6F9;}
.list_item .item_header span{display: block; font-size: 16px; font-weight: 600; color: #333;}
.item_component{font-size: 0;}
.item_component .component{display: inline-block; position: relative; width: 20%; padding: 20px 0; font-size: 1rem; text-align: center;}
.item_component .component:before{content:""; display: block; position: absolute; top: 50%; left: 0; width: 1px; height: 40px; margin-top: -20px; background: #F4F6F9;}
.item_component .component:first-child:before{content:none;}
.component .cp_inner{padding: 10px 10px; border:1px solid #ddd;}
.component .cp_inp{display: inline-block; position: relative; width: 20px; height: 20px; margin: 0; padding: 0; border: none; cursor: pointer; vertical-align: middle; background:url(/udev/images/icon_component_radio.svg) no-repeat 0 0; background-size:auto 20px; border-radius:50%;}
.component .cp_inp input{position: absolute; left: 0; opacity: 0; visibility: hidden;}
.component .cp_inp .inp_helper{opacity: 0; display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; margin: 0px; padding: 0px; background: rgb(255, 255, 255); border: 0px;}
.component .cp_txt{display: inline-block; line-height: 1.4; padding-left: 7px; font-size: 14px; font-weight: 400; letter-spacing: -0.01em; color: #222; vertical-align: middle; cursor: pointer; }
.component:hover .cp_inp:not(.not_checked){background-position:-20px 0;}
.component .cp_inp.checked{background-position:-40px 0 !important;}

.component .cp_inp.cp_inp_value{background-image:url(/udev/images/icon_component_radio_value.svg);}

/*출석현황*/
.atd_state{font-size: 0;}
.atd_state > span{display: inline-block; margin-right: 12px; font-size: 13px; font-weight: 600;}
.atd_state .state{display: inline-block; width: 14px; height:14px; margin-right:5px; margin-top: -2px; background-color: #eee; border:1px solid #eee; vertical-align: middle;}
.atd_state1{background-color:#2aacbf !important; border-color:#1c8c9c !important; color: #fff;}
.atd_state2{background-color:#ffdeb5 !important; border-color:#f1cb9d !important; color: #333;}
.atd_state3{background-color:#ff9d9d !important; border-color:#f37777 !important; color: #fff;}
.atd_state4{background-color:#e3e3e3 !important; border-color:#e3e3e3 !important; color: #333;}

.item_atd_component{padding: 10px 0;}
.item_atd_component .atd_component{max-width:200px; padding:10px;}
.item_atd_component .atd_component:before{content:none;}
.atd_component span{display: block; font-size: 13px;}

.atd_days{font-size: 0;}
.atd_days .days{display: inline-block; width: 34px; height: 34px; margin:3px; font-size: 14px; text-align: center;}
.atd_days .days a{display: inline-block; width: 100%; height: 100%; line-height:32px; border:1px solid transparent;}

/*common*/
input[type=text],
input[type=tel],
input[type=email],
input[type=password],
input[type=url],
input[type=submit],
input[type=button],
textarea,
select{height:38px; border-color:#dfdfdf;}
.bbsTblView .button{height:38px;}
.bbsTblView .button span{line-height:34px;}
.ui-datepicker-trigger{height: 38px;}

/*board*/
.bbsTitle{font-size: 18px;}
.bbsList.left td{text-align: left;}
.bbsList tr:hover td,
.bbsList tr:focus td,
.bbsList tr:active td{background-color:inherit;}
.bbsList th{word-break:keep-all;}
.bbsList th,
.bbsList td{vertical-align: middle;}
.bbsTblView thead th{background-color: #f4f6f9; color: #333;}
.bbsTblView .mail,
.bbsTblView .job,
.bbsTblView .designTel{display: inline-block;}
.bbsTblView .bg1{background-color: #eef1f5;}
.bbsList td{color: #666;}
.bbsList .bg1{background-color: #eef1f5;}
@media (min-width:767px){
.bbsList .bdL{border-left:1px dashed #e6e6e6 !important;}
.bbsTblView td{border-left:1px dashed #e6e6e6;}
.bbsTblView td label{margin-right : 20px;}
.bbsTblView tr th:first-child{border-left:0;}
}
.pagination{margin-top: 20px;}
.pagination .page_number.current{color:#2aacbf;}
.pagination .page_number.current:after{border:1px solid #2aacbf;}
.designFile + .designFile{margin-top: 10px;}
.bbsTblView .term > div{display: inline-block;}

.commentArea .write{box-shadow:2px 2px 4px rgba(0,0,0,.12);}
.commentArea .list .name{color:#333;}

/*board add*/
.searchBbsFloat:after{content:""; display: block; clear: both;}
.searchBbsFloat .left{float: left;}
.searchBbsFloat .right{float: right;}
.searchBbsFloat .search_term input{width: 120px;}
.search_term > div{display: inline-block; margin:0 5px;}
.search_term label{display: inline-block; margin-right: -4px; border:1px solid #dfdfdf; height: 38px; line-height:36px; padding: 0 8px; font-size: 13px; background-color: #fff;}

/****** 폼 관련 ******/

/* flex 컨트롤 */
.flex_wrap{display:flex;}
.flex_wrap > * + *{margin-left:10px;}

/* btn_group */
.btn_group{display:flex; flex-wrap:wrap; width:calc(100% + 6px); transform:translateX(-3px);}
.btn_group button{margin:3px;}

/* search_with_btn_short */
.search_with_btn_short{display:flex; align-items:center; width:100%; max-width:500px !important;}
.search_with_btn_short .swb_search{width:calc(100% - 120px);}
.search_with_btn_short .swb_btn{width:120px; margin-left:10px;}

/* file_box */
.file_box{display:flex;}
.file_box input.file_name{margin:2px; width:100%;}
.file_box .button{height:38px !important; margin: 2px;}
.file_box .button:not(.upload){width:38px; min-width:38px; padding:0; text-align:center; line-height:38px;}
.file_box .button:not(.upload) > span{display:block; height:fit-content;}

/* date_time_period */
.date_time_period{display:flex; align-items: center;}
.date_time_period > strong{min-width:120px; padding:10px; font-weight:normal;}
.date_time_period + .date_time_period{border-top:1px dashed #eee; padding-top:10px; margin-top:10px; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #eee;}
.date_time_period .dtp_input_group{display:flex;}
.date_time_period .dtp_input_group .input-group{flex-wrap:nowrap;}
.date_time_period .dtp_input_group .dtp_date{display:flex; margin-bottom:0;}
.date_time_period .dtp_input_group .dtp_date button:last-child{border-radius:0;}
.date_time_period .dtp_input_group .dtp_util{border-radius:0; border-width:1px 0;}
.date_time_period .dtp_input_group .dtp_time{display:flex; margin-bottom:0;}
.date_time_period .dtp_input_group .dtp_time input:first-child{border-radius:0;}

.date_time_period .dtp_util + .input-group .dtp_date span:first-child{border-radius:0;}
.date_time_period .dtp_input_group .dtp_date:not(:only-child) button{border-right:none;}

.date_time_period.no_under_line{border-bottom:none; margin-bottom:0;}
.dtp_chck{min-width:100px;}
.dtp_chck input{margin-top:0;}

/* 작성폼 관련 */
.form_comment{white-space: normal;}

.address{display:flex; flex-wrap:wrap; align-items: center;}
.address > input[type="text"]{margin:3px;}
.address > input[name="f_post"]{max-width:calc(100% - 70px)}
.address > a.button{width:60px; min-width:unset;}

.designChk{display:flex; align-items: center;}
.designChk > p{min-width:120px; width:fit-content; vertical-align: middle; margin:5px;}
.designChk > p > input{margin-top:0;}

/* slt_tree_wrap */
.slt_tree_wrap{display:flex; align-items: center; width:calc(100% + 10px); transform: translateX(-5px);}
.slt_tree_wrap > *{margin:5px;}

/* file_box */
.file_box{display:flex;}
.file_box input.file_name{margin:2px; width:100%;}
.file_box .button{height:38px !important; margin: 2px;}
.file_box .button:not(.upload){width:38px; min-width:38px; padding:0; text-align:center; line-height:38px;}
.file_box .button:not(.upload) > span{display:block; height:fit-content;}




/* **************************************** *
 * 1600px
 * **************************************** */
@media (max-width:1600px){

}

/* **************************************** *
 * 1400px
 * **************************************** */
@media (max-width:1200px){
	
	.searchBbsFloat{text-align: center;}
	.searchBbsFloat > div{margin-top: 10px;}
	.searchBbsFloat > div:first-child{margin-top: 0;}
	.searchBbsFloat .left{float: none; padding: 10px; background-color: #fafafa;}
	.searchBbsFloat .right{float: none;}
	.searchBbsFloat .search_term input{width:calc(100% - 92px); width:-webkit-calc(100% - 92px)}
	.search_term label{height:34px; line-height:32px; font-size: 12px;}
	
	.list_item .item_header{padding: 16px;}
	.item_component .component{padding: 16px 0;}
	.item_atd_component .atd_component{padding: 6px;}
	.component .cp_txt{font-size: 13px;}
	.atd_days .days{font-size: 13px;}
	
	/*common*/
	input[type=text],
	input[type=tel],
	input[type=email],
	input[type=password],
	input[type=url],
	input[type=submit],
	input[type=button],
	textarea,
	select{height:34px;}
	.bbsTblView .button{height:34px;}
	.bbsTblView .button span{line-height:32px;}
	.ui-datepicker-trigger{height: 34px;}
	.bbsList td{padding: 16px 6px;}

	/* date_time_period */
	.date_time_period{flex-direction: column; align-items: flex-start;}
	.date_time_period > strong{padding:10px 0; width:100%}

	.dtp_chck{margin-top:10px;}
}


/* **************************************** *
 * 1024px : mobile
 * **************************************** */
@media (max-width:1024px){

	/* 검색 창 - 서브 공통 */
	.search_wrap .search_con .search_period{margin-left:0; margin-top:10px; width:85%;}
	.search_wrap .search_con .search_date{width:85%}
	.search_wrap .search_con .col-sm-1{width:95px; flex:auto;}
	.search_wrap .search_con .col-sm-3,
	.search_wrap .search_con .col-sm-4{width:70%; min-width: 300px; max-width:100%; flex:auto;}

	/* 작성폼 관련 */
	.bbsList.table_form colgroup,
	.bbsTblView.table_form colgroup{display:none;}
	.bbsList.table_form,
	.bbsList.table_form tbody,
	.bbsList.table_form tr,
	.bbsList.table_form th,
	.bbsList.table_form td,
	.bbsTblView.table_form,
	.bbsTblView.table_form tbody,
	.bbsTblView.table_form tr,
	.bbsTblView.table_form th,
	.bbsTblView.table_form td{display:block;}

	.bbsList.table_form th,
	.bbsTblView.table_form th{background:#f9f9f9;}
	.bbsList.table_form td,
	.bbsTblView.table_form td{padding:16px 7px; border-left:none;}
	.bbsList.table_form.table-bordered > :not(caption) > *,
	.bbsTblView.table_form.table-bordered > :not(caption) > *{border-width:0;}

	.bbsList.table_form td > p,
	.bbsTblView.table_form td > p{white-space:normal;}

	.designChk{flex-wrap:wrap;}
}

/* **************************************** *
 * 767px
 * **************************************** */
@media (max-width:767px){
	.desc_box{padding: 14px; margin: 10px 0;}
	.depth_list > li .desc_box{margin-bottom: 20px;}
	.dot_list > li{margin-top: 6px;}
	
	.letter_view{padding: 14px;}
	
	.list_item .item_header{padding: 12px;}
	.list_item .item_header span{font-size: 14px;}
	.item_component .component{padding: 12px 0;}
	.component .cp_inner{padding: 8px;}
	.component .cp_txt{display: block; padding-left: 0; margin-top: 7px; font-size: 12px;}
	.item_atd_component .atd_component{max-width:none; width: 25%; padding: 4px;}
	.atd_component span{font-size: 12px;}
	/*.atd_days .days{width: 32px; height: 32px; font-size: 12px;}
	.atd_days .days a{line-height:30px;}*/
	
	/*board*/
	.bbsList td[data-tbl="write"],
	.bbsList td[data-tbl="date"],
	.bbsList td:last-child{border-bottom:0;}
	.bbsTblView th, .bbsTblView td{padding: 10px;}
	.button_area .button{height: 40px; line-height:40px;}
	.designFile a.button{width: 72px; height: 26px; line-height:24px; padding-left: 0; padding-right: 0; border:1px solid #333; border-radius:1px;}
	.bbsTitle{font-size: 15px;}
	.bbsList td{padding: 13px;}

	/* date_time_period - 날짜/시간 ~ 날짜/시간 입력창 */	
    .date_time_period .dtp_input_group{width:100%;}
}

/* **************************************** *
 * 640px
 * **************************************** */
 @media (max-width:640px){

	/* 검색 창 - 서브 공통 */
	.search_wrap .row,
	.search_wrap .row > *{padding:0; margin:0;}
	.search_wrap .col-form-label{margin-bottom:5px;}
	.search_wrap .search_tit,
	.search_wrap .search_con{width:100%; max-width:unset;}
	.search_wrap .search_con .search_date,
	.search_wrap .search_con .search_period{width:100%; min-width:unset; max-width:unset;}
	.search_period .btn-group{flex-wrap:wrap; border:1px solid #eee;}
	.search_period button{width:33.3333%; border-radius:0; border-width:0 0 0 1px;}
	.search_period button:nth-child(n+4){border-width:1px 0 0 1px;}
	.search_period button:nth-child(3n+1){border-left:none;}
	
	.search_wrap .search_con .col-sm-1{width:110px;}
	.search_wrap .search_con .col-sm-4:not(:only-child){max-width:calc(100% - 130px); min-width:unset;}
	
	/* btn_group */
	.btn_group button{width:calc(50% - 6px);}
	
	/* search_with_btn , search_width_btn_short */
	.search_with_btn, .search_with_btn_short{flex-direction: column; max-width:unset !important;}
	.search_with_btn .swb_search,
	.search_with_btn_short .swb_search{width:100% !important;}
	.search_with_btn .swb_btn,
	.search_with_btn_short .swb_btn{margin-left:0; margin-top:10px; width:100% !important; }
	
	/* date_time_period - 날짜/시간 ~ 날짜/시간 입력창 */
	.date_time_period .dtp_input_group .input-group{flex-wrap:wrap;}
	.date_time_period .dtp_input_group .dtp_date button:last-child{border-radius:0 0.375rem 0.375rem 0;}
	.date_time_period .dtp_input_group .dtp_time{margin-top:10px;}
	.date_time_period .dtp_input_group .dtp_time input:first-child{border-radius:0.375rem 0 0 0.375rem;}
	.date_time_period .dtp_input_group .dtp_date:not(:only-child) button{border-right:1px solid #ced4da;}
	
	/* slt_tree_wrap */
	.slt_tree_wrap{flex-wrap: wrap;}
	.slt_tree_wrap select{width:100% !important;}
	.slt_tree_wrap span{display:block; width:100%; text-align:center; }
	.slt_tree_wrap span i{transform:rotate(90deg);}
	
	/* bbsList */
	.bbsList.table_form td > input:only-child,
	.bbsList.table_form td > textarea:only-child,
	.bbsTblView.table_form td > input:only-child,
	.bbsTblView.table_form td > textarea:only-child{width:100% !important;}
	
}

/* **************************************** *
 * 576px
 * **************************************** */
 @media (max-width:576px){
	.search_term > div{display: block;}
	.item_atd_component .atd_component{width: 33.33%;}
	
	/*board*/
	.bbsTblView .term > div{display: block;}
	.bbsTblView .term > div select{width: 100% !important;}
	.bbsList td{padding: 9px;}

	.bbsTblView.table_form th{width:100%;}
	
}

/* **************************************** *
 * 425px
 * **************************************** */
 @media (max-width:425px){
	/* 검색 창 - 서브 공통 */
    .search_wrap .search_con .col-sm-1,
    .search_wrap .search_con .col-sm-3, 
    .search_wrap .search_con .col-sm-4:not(:only-child){width:100%; min-width:unset; max-width:100%;}
    .search_wrap .search_con > div + div{margin-left:0; margin-top:10px;}


    /* btn_group */
    .btn_group button{width:calc(100% - 6px);}
 }