@charset "UTF-8";

/* 크레커서비스 블릿 css */
.cs_list_blt {
    padding-left: 8px;
    /* font-size: 1.125em; */
    color: #141414;
}
.cs_list_blt >li:first-child{margin-top: 0;}
.cs_list_blt >li{
    position: relative;
    padding-left: 13px;
    line-height: 1.5;
    color: #161616;
    margin-top: 10px;
}
.cs_list_blt >li > strong{font-size: 1.125em;}
.cs_list_blt >li:before{
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 10px;
    width: 5px;
    height: 5px;
    border-radius: 5px;
    background: #bcbcbc;
}

.cB_blt {
    padding-left: 8px;
    /* font-size: 1.125em; */
    color: #141414;
}
.cB_blt >li:first-child{margin-top: 0;}
.cB_blt >li{
    position: relative;
    padding-left: 13px;
    line-height: 1.5;
    color: #161616;
    margin-top: 10px;
}
.cB_blt >li > strong{font-size: 1.125em;}
.cB_blt >li:before{
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 10px;
    width: 5px;
    height: 5px;
    border-radius: 5px;
}
/* 크레커서비스 블릿 컬러 */
.cB01 .cB_blt > li:before { background: #2b83ba; }
.cB02 .cB_blt > li:before { background: #ee4161; }
.cB03 .cB_blt > li:before { background: #9acc5b; }

/* 예시 박스 타이틀 컬러 */
.cB01 .cB_tit { background: #2b83ba; }
.cB02 .cB_tit { background: #ee4161; }
.cB03 .cB_tit { background: #9acc5b; }

/* 크레커서비스 박스 css */
[class^="cB0"] {    
    padding: 19px 30px;
    background-color: #fff;
    margin: 40px 0 30px 0;
    border: 1px solid #dcdcdc;
    table-layout: fixed;
    display: table;
    width: 100%;
  }
.cs_pm {
    font-size: 15px;
    background: #000;
    color: #fff;
    padding: 7px 14px;
    border-radius: 20px;
    position: absolute;
    bottom: -15px;
    right: 0;
}
.cs_pm img {
    padding-top: 7px;
    margin-left: 1em;
}
img.cl_arr {
    padding: 8px 10px;
}


/* 크레커서비스 개요 */

.cs_list p {
    white-space:pre-line;
    line-height: 1.4em;
}
.cs_sum {
    display: flex;
    justify-content: space-between;
    margin: 28px 0 38px 0;
    position: relative;
}
.cs_sum .cs_icon {
    width: 132px; height: 132px;
    position: relative;
    border-radius: 100%;
    background: #fff;
    margin-bottom: 23px;
    z-index: 1;
}

.cs_sum>.cs_ico_01>.cs_icon { border: 1px solid #2b83ba; }
.cs_sum>.cs_ico_02>.cs_icon { border: 1px solid #5d3d68; }
.cs_sum>.cs_ico_03>.cs_icon { border: 1px solid #9acc5b; }
.cs_sum>.cs_ico_04>.cs_icon { border: 1px solid #ee4161; }

.cs_sum::after {
    content: "";
    width: 100%;
    border-top: 1px dashed #dddddd;
    position: absolute;
    top: 40%;
}
.cs_sum .cs_ico_01 {
    margin-left: 0;
}
.cs_sum [class^="cs_ico_"] img {
    display: block;
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: auto;
}
.cs_sum [class^="cs_ico_"] span {
    display: block;
    text-align: center;
}

/* 크래커란? */
.cB_tit {
    display: inline-block;
    color: #fff;
    font-size: 16px;
    padding: 6px 25px;
    margin-bottom: 20px;
}
.cB03 .cB_blt {
    display: flex;
    justify-content:space-between;
}
.cB03 .cB_blt .div {
    width: 100%;
}
.cB03 .cB_thumb img {
    width: 100%;
    display: block;
}
.cB03 .cB_thumb p {
    margin-bottom: 1em;
}

/* 크레존 */
.cs_venn { margin-top: 35px; }
/*크레크 서비스 새로운 가치 */
.cs_value { padding: 0.8em 0; }
.cs_value p {
    white-space:pre-line;
    word-break: keep-all;
    line-height: 1.4em;
}
.cs_value strong {
    font-size: 18px;
    display: inline-block;
    margin-bottom: 0.5em;
}
.cs_value span {
    width: 80%;
    min-width: 580px;
    display: inline-block;
    letter-spacing: -0.9px;
}
.cs_obj {
    display: block;
    position: absolute;
    right: 1.2em;
    bottom: 3.1em;
}


/* 20230809 엄윤식 추가 */

/* 버튼 */
.me_area button {outline: none !important; float: right;}
.me_area button:focus {border: none; outline: none !important;}
.me_area button.add-data {position: absolute; bottom: 11px; right: 20px;}
.me_area button img { margin: auto 0; }

/* button */
.cms .btn_type01 .btn-secondary {background: #6c757d; color: #fff;}
.cms .btn_type01 .btn-secondary:hover {background-color: #5c636a; border-color: #565e64;}
.cms .btn_type01 {font-size: 0; text-align: center;}
.cms .btn_type01 button {height: 32px; padding: 0 24px; margin-left: 10px;}
.cms .btn_type01 button:first-of-type {margin-left: 0;}
@media (max-width: 1650px) {
    .cms .btn_type01 button {padding: 0 18px; margin-top: 5px;}
}

/* 공통 left 영역, right 영역 */
.me_area form {display: flex; justify-content: space-between; margin-top: 20px;}
.me_area form > div {padding: 0 20px; background: #fff; border-radius: 5px; box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1);}
.me_area form.one {display: block; padding: 20px; background: #fff; border-radius: 5px; box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1);}
.me_area form.one > div {padding: 0; background: none; border-radius: 0; box-shadow: none;}
.me_area .keyword_area {flex: none; flex-basis: 500px;}

.me_area .basic {padding: 0 20px; background: #fff; border-radius: 5px; box-shadow: 0 3px 2px rgba(0, 0, 0, 0.1);}
.me_area .left_area {max-width: 1000px; width: 100%; padding-top: 32px; padding-bottom: 20px; background: #fff;}
.me_area .right_area {position: relative; max-width: 578px; width: 100%; padding: 20px; margin-left: 20px; background: #fff;}
.me_area .right_area .toggle_btn {position: absolute; top: 10px; left: -15px; width: 14px; height: 80px; background: #CCE5FF; border-radius: 5px 0 0 5px;}
.me_area .right_area .toggle_btn button {position: relative; width: 100%; height: 100%;}
.me_area .right_area .toggle_btn button::after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 0; height: 0; border-top: 5px solid transparent; border-left: 5px solid #004085; border-bottom: 5px solid transparent;}
.me_area .right_area .toggle_btn button::after {border-top: 5px solid transparent; border-left: none; border-right: 5px solid #004085; border-bottom: 5px solid transparent;}
/* //공통 left 영역, right 영역 */

/* My 크레존 에디터 */
.cke_contents {height: 450px !important;}
.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute!important;
    width: 1px!important;
    height: 1px!important;
    padding: 0!important;
    margin: -1px!important;
    overflow: hidden!important;
    clip: rect(0,0,0,0)!important;
    white-space: nowrap!important;
    border: 0!important;
}
/*input 기본*/
.brd_input{border:1px solid #cccccc; height: 46px; width: 100%; background: #ffffff; padding: 0 5px; font-size: 16px;}
.me_wrap input[type="text"] {border-radius: 5px !important;}


.me_wrap{ background: transparent;}
.me_wrap .me_area #inquiryActionFrm {display: flex; background-color: #fff;}
.me_wrap .me_area #inquiryActionFrm > div{
    background-color: #fff;
    padding: 20px;
    box-sizing: border-box;
    box-shadow: 2px 3px 10px 3px #ddd;
}
.me_left{width: 60%; min-width: 560px; position: relative;}
.me_right{margin-left: 2%; width: 38%; min-width: 300px;}

.me_grid {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.me_grid > div:first-child {
    margin-right: 10px;
}


/* My 크레존 에디터 - 셀렉트 공통 */
.me_wrap .sch_slt {
    display: inline-block;
    width: 100%;
    height: 46px;
    padding: 0 26px 0 10px;
    border: 1px solid #cccccc;
    color: #333333;
    vertical-align: middle;
}

.me_wrap select {
    height: 46px;
    background: #fff url(../img/common/select_arrow01.png) no-repeat center right 12px;
    border-radius: 0;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    display: none;
}

/* My 크레존 에디터 - 프로그램명 */
.pr_name_part> *{
    box-sizing: border-box;
}
.pr_name_part input {
    margin-bottom: 20px;
}
.me_left label,
.me_right label {
    display: inline-block;
    font-size: 15px;
    margin-bottom: 0.5em;
}
.pr_name_part {
    width: 100%;
    margin-top: 20px;
}

/* My 크레존 에디터 - 데이터 */
.me_left > div {
    margin-bottom: 30px;
}
.me_right > div {
    margin-bottom: 15px;
    padding-bottom: 15px;
}
.pr_data_part {
    display: flex;
    flex-wrap: wrap;
}
.pr_data_part > div{
    flex: 1 0 0;
    padding-right: calc(1.5rem * .5);
}
.pr_data_part div {
    box-sizing: border-box;
}
.pr_data_part div > * {
    display: block;
}
.pr_data_part input[type=date] {
    border: 1px solid #cccccc;
    height: 32px;
    width: 100%;
    background-color: #ffffff;
    padding: 0 5px;
    cursor: pointer;
}

/* My 크레존 에디터 - 모집인원 및 비용 */
.pr_join_part {
    width: 50%;
    grid-template-columns: 1fr 2fr;
}

.pr_join_part [class^="join_"] {
    position: relative;
}

.pr_join_part span {
    padding-left: 0.5em;
    line-height: 1.8em;
    font-size: 15px;
    position: absolute;
    top: 35px;
    right: 10px;
    color: #333;
}
.pr_join_part input {
    width: 100%;
    padding-right: 29px;
    text-indent: 0.5em;
    box-sizing: border-box;
}

.me_left input[type="number"]::-webkit-outer-spin-button,
.me_left input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.me_left ul#tagListUl li {
    display: inline-flex;
    align-items: center;
    position: relative;
    height: 44px;
    line-height: 44px;
    padding: 0 15px;
    margin-right: 10px;
    margin-bottom: 8px;
    background: #CCE5FF;
    border: 1px solid #B8DAFF;
    border-radius: 4px;
}
.me_left ul#tagListUl li span {
    margin-right: 20px;
    font-size: 16px;
    color: #004085;
    line-height: 44px;
}
.me_left ul#tagListUl li button {
    height: 100%;
    display: flex;
    align-items: center;
}


/* My 크레존 에디터 - 장소 및 자원명 */
.op_place_part {
    width: 100%;
}
.me_area .sch_bar {
    position: relative;
}
.me_area .add_search_map_in {
    height: 200px;
    line-height: 200px;
    margin-top: 10px;
    background: #C4C4C4;
    text-align: center;
}
.me_area .sch_btn {
    position: absolute;
    top: 50%;
    right: 13px;
    transform: translateY(-50%);
    z-index: 10;
    height: 23px;
    line-height: 1;
}
.me_area .sch_input {
    display: inline-block;
    width: 100%;
    height: 46px;
    padding: 0 40px 0 10px;
    border: 1px solid #cccccc;
    position: relative;

}

/* My 크레존 에디터 - 소관부처 및 담당 부서명 */
.cha_part {
    width: 100%;
}

/* My 크레존 에디터 - 대표 이미지 및 첨부파일 업로드 */
.file_part .inp_file label {
    width: 100%;
    height: 46px;
    border: 1px solid #ced4da;
    border-radius: 0.3rem;
    font-size: 16px;
    text-align: center;
}
.me_left .tag_part > .tag_group {
    margin-bottom: 20px;
}
.file_part .inp_file label span:first-of-type {
    margin-left: 0;
}
.file_part .inp_file label span {
    display: inline-block;
    line-height: 46px;
    margin-left: 8px;
    vertical-align: middle;
}
.file_part img {
    vertical-align: middle;
    margin-top: -4px;
}
.file_part .data_view {
    height: 200px;
    line-height: 24px;
    margin-top: 10px;
    border: 1px solid #ced4da;
    border-radius: 0.3rem;
    overflow: auto;
}
.file_part .data_view.image {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.file_part .data_view div {
    position: relative;
}
.file_part .data_view div button {
    position: absolute;
    right: 1%;
}

/* My 크레존 에디터 - 태그 */
.tag_list>p {
    max-block-size: 30px;
}
.tag_md p {
    margin: 30px 0 0.5em 0;
}
.tag_md ul {
    display: flex;
    flex-wrap: wrap;
}
.tag_md ul li a {
    height: 35px;
    line-height: 34px;
    padding: 0 10px;
    background: #E2E3E5;
    border-radius: 4px;
    font-size: 16px;
    color: #383D41;
    display: block;
    width: auto;
    margin:0 0.5em 0.5em 0;
}
.tag_md li label {
    height: 35px;
    line-height: 34px;
    padding: 0 10px;
    background: #E2E3E5;
    border-radius: 4px;
    font-size: 16px;
    color: #383D41;
    display: block;
    width: auto;
    margin:0 0.5em 0.5em 0;
}
.tag_md li input {
    position: absolute;
    top: 0;
    left: -9999em;
    visibility: hidden;
}
.tag_md li input:checked + label {
    background: #CCE5FF;
    color: #004085;
}

/* My 크레존 에디터 - 교통편 */
.traffic_part textarea {
    height: 150px;
    width: 100%;
    line-height: 40px;
    margin-bottom: 5px;
}
.traffic_part textarea:last-of-type {
    margin-bottom: 0;
}
.me_submit_btn {
    width: 100%;
    position: relative;
}
.me_submit_btn > .ms_inner {
    display: flex;
    margin: 0 auto;
    width: 80%;
}
.me_submit_btn a {
    width: 100%;
    line-height: 44px;
    margin: 0.5em;
    text-align: center;
}
.me_submit_btn .me_page_list {
    background: #fff;
    border: 1px solid #cbcbcb;
}
.me_submit_btn .me_page_submit {
    background: #f25574;
    color: #fff;
    border: 1px solid #f25574;
}
.d-none {display: none;}

/* 달력 데이터피커 */
.pr_data_part label {display: block;}
.pr_data_part input[type=date] {width: 100%; height: 46px; /* background: url(../img/common/calendar.png) no-repeat right 12px center;*/ cursor: pointer;}




.visually-hidden, .visually-hidden-focusable:not(:focus):not(:focus-within) {
    position: absolute!important;
    width: 1px!important;
    height: 1px!important;
    padding: 0!important;
    margin: -1px!important;
    overflow: hidden!important;
    clip: rect(0,0,0,0)!important;
    white-space: nowrap!important;
    border: 0!important;
}

.mt-20 {margin-top: 20px;}
/* 공통 모달 */
.common_modal {display: none; position: fixed; top: 0; left: 0; z-index: 30; width: 100%; height: 100%; background: rgba(0, 0, 0, .6);}
.common_modal .info {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}

/* 추천 콘텐츠 모달 */
.suggestion_modal {display: none;}
.suggestion_modal select{appearance: none;}
.suggestion_modal .info {max-width: 800px; width: 100%; max-height: 540px; height: 100%; background: #fff; border: 1px solid #CED4DA; border-radius: 4px;}
.suggestion_modal .info > div {}
.suggestion_modal .info .head {position: relative; padding: 0 20px; border-bottom: 1px solid #DEE2E6;}
.suggestion_modal .info .head h3 {height: 64px; line-height: 64px; font-weight: 400; font-size: 20px; color: #212529; text-align: center;}
.suggestion_modal .info .head button {position: absolute; top: 50%; right: 22px; transform: translateY(-50%);}
.suggestion_modal .info .body {padding: 0 8px 0 20px;}
.suggestion_modal .info .body .select_area {display: flex; padding-right: 12px;}
.suggestion_modal .info .body .select_area span {flex: 1; margin-right: 14px;}
.suggestion_modal .info .body .select_area span:last-of-type {margin-right: 0;}
.suggestion_modal .info .body .select_area span select {width: 100%; padding: 0 16px; font-size: 16px; color: #6C757D;}
.suggestion_modal .info .body .list_area {max-height: 366px; height: 100%; overflow: auto;}
.suggestion_modal .info .body .list_area::-webkit-scrollbar {width: 12px;}
.suggestion_modal .info .body .list_area::-webkit-scrollbar-track {border-radius: 20px; background-color: #eee;}
.suggestion_modal .info .body .list_area::-webkit-scrollbar-thumb {border-radius: 20px; background-color: #aaa;}
.suggestion_modal .info .body .list_area ul {padding-right: 20px;}
.suggestion_modal .info .body .list_area ul li {display: flex; align-items: center; padding-bottom: 8px; margin-bottom: 10px; border-bottom: 1px solid #eee;}
.suggestion_modal .info .body .list_area ul li:last-of-type {margin-bottom: 0;}
.suggestion_modal .info .body .list_area ul li .thumbnail {margin-right: 20px;}
.suggestion_modal .info .body .list_area ul li .link {}
.suggestion_modal .info .body .list_area ul li .link p {display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 24px; font-size: 16px; color: #333; word-break: break-all;}
.suggestion_modal .info .foot {padding: 20px;}
.suggestion_modal .info .foot .pagination_area {margin-top: 0;}
.suggestion_modal .info .body .select_input_area {display: flex; justify-content: space-between; padding-right: 12px;}
.suggestion_modal .info .body .select_input_area span {margin-right: 14px; font-size: 0;}
.suggestion_modal .info .body .select_input_area span:last-of-type {margin-right: 0;}
.suggestion_modal .info .body .select_input_area span select {height: 40px; padding: 0 40px 0 16px; font-size: 16px; color: #6C757D; background: url(../img/common/select_arrow01.png) no-repeat right 12px center;}
.suggestion_modal .info .body .select_input_area span input {height: 36px; padding: 0 12px; margin-right: 8px; font-size: 16px; color: #6C757D;}
.suggestion_modal .info .body .select_input_area span button {height: 36px; padding: 0 12px; border-radius: 4px; font-size: 16px; border: 1px solid #0d6efd; color: #6C757D; vertical-align: middle;}
#relationModal .thumbnail img {
    width: 100px;
    height: 70px;
    object-fit: cover;
}




@media all and (max-width:1200px){

    .cB03 .cB_blt {
        display: flex;
        flex-wrap: wrap;
    }
    .cB03 .cB_thumb {
        width: 50%;
        box-sizing: border-box;
        padding: 0 1em 1em 0;
    }
    .cB03 .cB_thumb:nth-of-type(even) {
        padding: 0 1em 0 0;
    }
    .cB03 .cB_thumb img {
        width: 100%;
    }
    /* 크레커서비스 박스 css */
    .cs_pm {
        font-size: 0.8em;
        background: #000;
        color: #fff;
        padding: 0.5em 1em;
        border-radius: 3em;
        display: inline-block;
        top: 0;
        position: relative;
        margin: 0.8em 0 0.8em 0.9em;
    }
    .cs_pm img {
        padding-top: 0.3em;
        margin-left: 1em;
    }

    /*크레크 서비스 새로운 가치 */
    .cs_value {
        padding: 0.8em 0;
    }
    .cs_value p {
        white-space:pre-line;
        word-break: keep-all;
        line-height: 1.4em;
    }
    .cs_value strong {
        font-size: 18px;
        display: inline-block;
        margin-bottom: 0.5em;
    }
    .cs_value span {
        width: 100%;
        min-width: auto;
        display: inline-block;
        letter-spacing: -0.9px;
    }

    .cs_obj {
        display: block;
        position: static;
        height: 9.1em;
        word-break: keep-all;
    }
    .cs_obj img {
        position: absolute;
        right: 1.2em;
        bottom: 3.1em;
    }

    
}

@media all and (max-width:1024px){

    /* 크레커서비스 */
    .cs_list p {
        white-space:normal;
        word-break: keep-all;
        line-height: 1.4em;
    }

    /*크레크 서비스 새로운 가치 */
    .cs_value p {
        white-space:pre-line;
        word-break: keep-all;
        line-height: 1.4em;
    }

    /* My 크레존 에디터 - 모집인원 및 비용 */
    .pr_join_part {
        width: 100%;
        grid-template-columns: 1fr 1fr;
    }
    
}

@media all and (max-width:860px){

    /* 크레커서비스 박스 css */
    [class^="cB0"] {
        margin: 1em 0 0.5em 0;
    }   
    
    
    .contents_wrap.me_full {
        overflow-x: scroll;
    }

}


@media all and (max-width:767px){

    /* 크레커서비스 개요 */
    .cs_sum .cs_icon {
        width: 20vw; height: 20vw;
    }
    .cs_sum [class^="cs_ico_"] span {
        font-size: 1em;
    }

    /* 크래커란? */
    .cB01 {
        margin-top: 1em;
    }
  
}

@media all and (max-width:640px){


    

}

@media all and (max-width:580px){

    /* 크레커서비스 개요 */
    .cs_sum {
        display: block;
        position: relative;
    }
    .cs_sum .cs_icon {
        width: 9em;
        height: 9em;
        margin: 0 auto;
        margin-bottom: 1.2em;
    }
    .cs_sum [class^="cs_ico_"] {
        margin-bottom: 3em;
    }
    .cs_sum [class^="cs_ico_"] span {
        font-size: 1.25em;
        position: relative;
        z-index: 1;
        background: #fff;
    }
    .cs_sum::after {
        content: "";
        width: 1%;
        height: 100%;
        border-left: 1px dashed #dddddd;
        position: absolute;
        left: 50%;
        top: 0;
    }
    
    /* 크레커서비스 박스 css */
    [class^="cB0"] {
        padding: 15px; 
        margin: 1em 0 0.5em 0;
    }

    /* 크레커서비스 블릿 css */
    .cs_list_blt >li > strong, .cB_blt >li > strong {font-size: 1em;}
    .cs_list_blt, .cB_blt {font-size: 0.938rem;}


    /*크레크 서비스 새로운 가치 */
    .cs_obj {
        height: 28vw;
    }
    .cs_obj img {
        position: absolute;
        right: 3vw;
        bottom: 3.1em;
        max-width: 75%;
    }


}

@media all and (max-width:479px){
    /*크레크 서비스 새로운 가치 */
    .cs_obj {
        height: 50vw;
    }
}

@media all and (min-width: 320px) and (max-width: 339px){

}