@charset "utf-8";

/* 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;}



/* 검색 창 - 서브 공통 23.12.20 [s] 추가 */
.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%;}
/* 23.12.20 [e] */

/* 데이터피커 */
.datepicker[readonly],
.datepicker[disabled]{background-color: #f9f9f9;}

#ui-datepicker-div{font-family: 'Titillium', 'NotoSansKR', sans-serif;}
.ui-datepicker-trigger{display: none;}
.ui-datepicker-trigger:hover,
.ui-datepicker-trigger:focus{-webkit-box-shadow:inset 0 0 0 1px #666; box-shadow:inset 0 0 0 1px #666;}
.ui-datepicker select.ui-datepicker-month, .ui-datepicker select.ui-datepicker-year{padding-right:19px; font-family: 'Titillium', 'NotoSansKR', sans-serif;}
.ui-datepicker select.ui-datepicker-month {width: 45%;}
.ui-datepicker select.ui-datepicker-year {width: 50%;}
input + .ui-datepicker-trigger{border-left:0;}
.ui-datepicker{width:auto !important;}
.ui-widget.ui-widget-content{z-index:100 !important; background:#fff; border:1px solid #ccc;}
.ui-datepicker .ui-datepicker-header{padding:4px 0 6px; background:#fff; border:0px; border-bottom:1px solid #cfcece;}
.ui-datepicker .ui-datepicker-title select{height:30px; margin:0 1px !important; font-size:14px; padding-left: 10px;}
.ui-datepicker .ui-datepicker-prev, .ui-datepicker .ui-datepicker-next{top:50%; transform:translateY(-50%); background-repeat:no-repeat; background-position:50% 50%; background-size:22px 22px;}
.ui-datepicker .ui-datepicker-prev{background-image:url(/images/board/icon_arw_left.svg)}
.ui-datepicker .ui-datepicker-next{background-image:url(/images/board/icon_arw_right.svg)}
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default, .ui-button, html .ui-button.ui-state-disabled:hover, html .ui-button.ui-state-disabled:active{display:inline-block; width:30px; /*height:30px;*/ line-height:27px; background:transparent !important; border:0px !important; text-align:center; font-size:14px;}
.ui-state-active, .ui-widget-content .ui-state-active, .ui-widget-header .ui-state-active, a.ui-button:active, .ui-button:active, .ui-button.ui-state-active:hover{background:#546792 !important; color:#fff !important;}
.ui-state-highlight, .ui-widget-content .ui-state-highlight, .ui-widget-header .ui-state-highlight{background:#ffe79d !important;}
.ui-datepicker th{font-weight:400 !important;font-size:14px; text-align:center;}
.ui-datepicker thead tr > th.ui-datepicker-week-end:first-child{color:#e82c27;}
.ui-datepicker thead tr > th.ui-datepicker-week-end:last-child{color:#4e86c6;}
.ui-datepicker tbody tr > td.ui-datepicker-week-end:first-child a{color:#e82c27;}
.ui-datepicker tbody tr > td.ui-datepicker-week-end:last-child a{color:#4e86c6;}
.ui-state-hover, .ui-widget-content .ui-state-hover, .ui-widget-header .ui-state-hover, .ui-state-focus, .ui-widget-content .ui-state-focus, .ui-widget-header .ui-state-focus, .ui-button:hover, .ui-button:focus{border:0px !important;}
.ui-datepicker .ui-datepicker-prev-hover{left:2px !important;}
.ui-datepicker .ui-datepicker-next-hover{right:2px !important;}
.day-bar{display:inline-block; width:14px; text-align:center; font-weight:600;}

/* 중요도 별점 */
.starRadio {display: inline-block; overflow: hidden; height: 30px; position:relative; z-index: 0;}
.starRadio:after {content: ""; display: block; position: relative; z-index: 10; height: 30px; background: url(/images/board/star_radio.png) repeat-x 0 0;background-size: contain; pointer-events: none;}
.starRadio__box {position: relative; z-index: 1; float: left; width: 30px; height: 30px; cursor: pointer;}
.starRadio__box input {opacity: 0 !important; height: 0 !important; width: 0 !important;position: absolute !important;}
.starRadio__box input[type="radio"]:checked + .starRadio__img {background-color: #1fb9ee;}
.starRadio__img {display: block; position: absolute; right: 0; width: 500px; height: 30px; pointer-events: none;}

/* 필수입력 */
.marking{display:inline-block; position:relative; width:8px; height:14px; margin-bottom:-2px; margin-right:2px; vertical-align:middle; font-size:0; text-indent:-999em;}
.marking:after{content:'\002A'; display:inline-block; position:absolute; top:0; right:0; line-height:17px; font-size:14px; font-weight:600; color:#e82c27; text-indent:0;}

/* 테이블 스크롤 */
.table{position:relative; z-index:0;}
.scrollTable {width: 100%; max-height: 690px; min-height: 280px; overflow-y: auto; overflow-x: auto;}
.scrollTable > table {white-space: nowrap; position:relative; z-index: 0;}
.scrollTable thead th {position: sticky; top: 0; }

/* 비밀글 아이콘 */
.icon_lock {display: inline-block; width: 18px; height: 18px; background: url(/images/page/contents/icon_lock.png) no-repeat 50% 50%; background-size: auto 18px; margin: 0 auto; vertical-align: middle; opacity: .5; margin-right: 8px;}

/* ArticleList 제목 글자수 제한 */
.txt_line {width:85%; padding:0 5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

/*color*/
.txt_red{color: #9a0808 !important;}

/* photo list */
.photoList {font-size: 0; margin: 0 -15px;}
.photoList > li {display: inline-block; font-size: 1rem; width: 20%; vertical-align: top;}
.photoList > li > a {display: block; padding: 0 15px 40px;}
.photoList .img_box {width: 100%; padding-top:145%; overflow: hidden; background: #f8f9fb; border: 1px solid #eee; position:relative;}
.photoList .img_box img {width: 100%; height: 100%; object-fit: cover; object-position: center center; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto;}
.photoList .txt_box {margin-top: 20px;}
.photoList .txt_box .tit {font-size: 20px; font-weight: 800; display: block; margin-bottom: 20px; color: #333;}
.photoList .txt_box > p {color: #666; max-height: 42px; height: 42px;}
.photoList .txt_box .date {display: block; margin-top: 30px; color: #999;}

/* 작성폼 관련 - 23.12.20 [s] 추가 */
.form_comment{white-space: normal;}

.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;}

/* 카드뉴스 상세 */
.card_news_slider_wrap {width: 50%; position: relative; margin: 0 auto;}
.card_news_slider_wrap .card_news_slider {overflow: hidden;}
.card_news_slider_wrap .card_news_slider li {position: absolute; left: 0; top: 0;}
.card_news_slider_wrap .card_news_slider li a {display: block;}
.card_news_slider_wrap .card_news_slider li img {width: 100%; padding: 1px; box-sizing: border-box;}
.card_news_slider_wrap .btn_prev {width: 15px; height: 27px; margin-top: -53px; display: inline-block; overflow: hidden; position: absolute; left: -25px; top: 50%; background: url(/images/common/btn_card_prev.png) 0 0 no-repeat; background-size: 15px 27px;}
.card_news_slider_wrap .btn_next {width: 15px; height: 27px; margin-top: -53px; display: inline-block; overflow: hidden; position: absolute; right: -25px; top: 50%; background: url(/images/common/btn_card_next.png) 0 0 no-repeat; background-size: 15px 27px;}
.card_news_slider_wrap>ul>li {margin-bottom: 20px}

/* 카드뉴스 */
.card_news_slider_wrap .card_news_slider {overflow: hidden; margin: 0 auto;}
.card_news_slider_wrap > div {width: 69%; margin: 0 auto; position: relative;}
.card_news_slider_wrap .btn_prev {width: 25px; height: 45px; left: 60px; background-size: 25px 45px;}
.card_news_slider_wrap .btn_next {width: 25px; height: 45px; right: 60px; background-size: 25px 45px;}
.card_pagenate {width: 100%; padding: 20px 0; text-align: center;}
.card_pagenate a {width: 22px; height: 22px; display: inline-block; line-height: 22px; font-size: 12px; border: solid 1px #d5d5d5;  text-align: center; vertical-align: bottom; color: #585b5c; text-decoration: none; margin-left: -1px;}
.card_pagenate a.on, .card_pagenate a.active { background-color: #103e93; border: solid 1px #103e93; color: #fff; text-decoration: none;}

/* 팝업관리 - 팝업 위치/사이즈 부분 */
.pwm_size_con{width:100%;}
.pwm_size_con div{display:flex; align-items: center;}
.pwm_size_con div + div{margin-top:10px; padding-top:10px; border-top:1px dashed #eee;}
.pwm_size_con b{display:inline-block; width:10%; min-width:120px; font-weight:normal; padding-left:8px;}
.pwm_size_con p{display:flex; align-items: center; margin-bottom:0;}
.pwm_size_con input{width:10%; min-width:120px;}
.pwm_size_con span{display:inline-block; margin-left:5px;}

/* date_time_period - 모집 등록 날짜/시간 ~ 날짜/시간 입력창 */
.date_time_period{display:flex; align-items: center;}
.date_time_period > strong{min-width:120px; padding:10px;}
.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.no_under_line{border-bottom:none; margin-bottom:0;}
.dtp_chck{min-width:100px;}
.dtp_chck input{margin-top:0;}

.tal{text-align: left;}
.tar{text-align: right;}
.tac{text-align: center;}

@media (max-width: 1920px){

}

@media (max-width: 1440px){
    /* 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;}

    /* 공통코드관리 - 3단 분할 영역(내부가 테이블인 상태) */
    .row.tbx3_row{flex-wrap:wrap;}
    .row.tbx3_row > div{width:100% !important;}
}

@media (max-width: 1024px){

    /* 서브 */
    .content-wrapper > div.container-xxl{padding:10px !important;/}

    /* 검색 창 - 서브 공통 */
    .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;}
    .search_wrap .search_con .col-sm-3,
    .search_wrap .search_con .col-sm-4{width:70%; min-width: 300px;}

    /* 갤러리 게시판 - 성과관리 > 후기 */
    .photoList > li{width:33.3333%;}

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

    .table_form > tbody > tr > th{background:#f9f9f9;}
    .table_form > tbody > tr > td{padding:16px 7px; white-space: normal; line-height: 165%;}
    .table_form.table-bordered > :not(caption) > *{border-width:0;}

    .designChk{flex-wrap:wrap;}

    /* 스마트에디터 */
    #smart_editor2 .se2_text_tool{display:flex; flex-wrap:wrap;}
    #smart_editor2 .se2_text_tool ul{margin:3px !important;}
    #smart_editor2 .se2_text_tool ul:first-child{margin-left:0;}
    #smart_editor2 .se2_text_tool ul.se2_multy{margin:0; height:100%;}

    /* 공통코드관리 - 3단 분할 영역(내부가 테이블인 상태) */
    .row.tbx3_row .card .table{display:table;}
}

@media (max-width: 768px){

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

@media (max-width: 640px){

    /* 갤러리 게시판 - 성과관리 > 후기 */
    .photoList > li{width:50%;}

    /* 검색 창 - 서브 공통 */
    .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{width:calc(100% - 120px); min-width:unset;}

    /* search_with_btn , search_width_btn_short */
    .search_with_btn, .search_with_btn_short{flex-direction: column;}
    .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;}
}

@media (max-width: 425px){

    /* 갤러리 게시판 - 성과관리 > 후기 */
    .photoList > li{width:100%;}

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

}

@media (max-width: 360px){

}
/* 23.12.20 [e] 추가 */

/* 서명란 */
.name-box span{font-size: 19px; margin-right:12px;}
.name-box .sign-form {position: relative; display: inline-block; width: 420px; height: 150px; border: 1px solid #eee; margin-left: 10px; vertical-align: bottom;}
.name-box .sign-form:before {content: '(서명)'; position: absolute; bottom: 10px; right: 20px; color: #ddd;}
.name-box .sign-form canvas {position: relative; overflow: hidden;}
.name-box .sign {touch-action: none;}
.clear-box {text-align: right;}
.clear-box .clear-btn {background-color: transparent; color: #005aab; text-decoration: underline; margin-top: 10px; border:none;}