@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
    @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Roboto:wght@100;300;400;500;700;900&display=swap');
    /* @import url(https://db.onlinewebfonts.com/c/e0fa406cbe458b32a7ea4e9a379b85fc?family=DIN2014-Regular); */
    @import url('/css/fonts.css');
    /* common.css */
    html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,img {
    margin: 0;
    padding: 0;
    color: var(--dark-gray, #222);
    font-family: 'Noto Sans KR', 'Roboto', sans-serif;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    box-sizing: border-box;
    }


    html, body{
        width: 100%;
        height: 100%;
    }

    body {
    text-align: left;
    margin: 0;
    }

    main {
    flex: 1;
    }

    body#popup {
        min-width: 0;
    }

    li {
        list-style: none;
    }

    img {
        max-width: 100%;
    }

    img,fieldset {
        border: none;
        vertical-align: middle;
    }

    table {
        width: 100%;
        border: 0;
        border-spacing: 0;
        border-collapse: collapse;
    }

    caption {
        display: none;
    }

    input {
        border-radius: 0;
        background: none;
        border: 0;
        height: 24px;
        line-height: 24px;
    }

    select {
        background: none;
        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;
        border: 0;
    }

    input,select,textarea {
        font-size: 100%;
        vertical-align: middle;
        border-radius: 0;
        font-family: arial ,helvetica,sans-serif;
    }

    input[type="text"]{
        padding: 0px 15px;
    }

    input[type="checkbox"],input[type="radio"] {
        width: 20px;
        height: 20px;
        margin-right: 5px;
        border: 1px solid #000;
        border-radius: 5px;
        background: none;
        -moz-appearance: none;
        -webkit-appearance: none;
        appearance: none;
    }

    input[type="checkbox"]:checked,input[type="radio"]:checked {
        background: url(/site/icon/checked.svg) no-repeat center center;
        background-size: 16px auto;
    }

    input:focus {
        outline: none;
    }

    input::placeholder {
        color: #b2b2b2;
    }

    p:focus {
    outline: none;
    }

    .inputTypeText {
        height: 30px;
        border: 0;
    }

    th,td {
        border: 0;
        vertical-align: middle;
    }

    button {
        overflow: visible;
        padding: 0;
        margin: 0;
        border: 0;
        cursor: pointer;
    }

    hr.layout {
        display: none;
    }

    a {
        text-decoration: none;
        color: #000;
    }


    /* 헤더 시작 */
    .notification {
        position : relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 38px;
        background: #fff;
        border: 1px solid #EEEEEE;
        border-radius: 50%;
        cursor: pointer;
    }

    .notification:hover {
        background: #EEE;
    }

    .notification.active::after {
        content : '';
        position: absolute;
        top: 0;
        right : 0;
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #F17742;
    }

    .login_user {
        position : relative;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 38px;
        height: 38px;
        background: #fff;
        border: 1px solid #EEEEEE;
        border-radius: 50%;
        cursor: pointer;
    }

    .userMenu_layer {
        position: absolute;
        top: 50px;
        right: 0;
        width: 300px;
        border-radius: 16px;
        padding: 24px;
        box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 16px;
        background: #fff;
        z-index: 50;
    }

    .userMenu_layer .user_info .userProfile {
        position: relative;
        width: 48px;
        height: 48px;
    }

    .userMenu_layer .user_info .userProfile > img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    .userMenu_layer .user_info .userProfile .user_edit_btn{
        position: absolute;
        bottom: -5px;
        right: -2px;
    }

    .user_menu_list {
        border-top : 1px solid #eee;
        border-bottom : 1px solid #eee;
        padding : 24px 0;
    }

    .user_menu_list > a > svg {
        width : 20px;
        height : 20px;
    }

    .user_menu_list > a {
        cursor: pointer;
    }

    .user_menu_list a:nth-child(2){
        margin-top : 16px;
    }

    .user_menu_list a:nth-child(3){
        margin-top : 16px;
    }

    .user_menu_list > a:hover {
        color : #222 !important;
    }

    .user_menu_list a:nth-child(1):hover svg path {
        fill : #222;
    }

    .user_menu_list a:nth-child(2):hover svg rect {
        fill : #222;
    }

    .user_menu_list a:nth-child(3):hover svg path {
        fill : #222 !important;
        stroke: #222 !important;
    }


    .notification_layer {
        position: absolute;
        top : 50px;
        right : 0;
        z-index : 50;
        width: 320px;
        background : #fff;
        border-radius : 16px;
        box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 16px;
        overflow: hidden;
    }

    .setting_btn {
        position : absolute;
        top : 16px;
        right : 16px;
        cursor: pointer;
    }

    .setting_btn:hover > svg > path {
        fill : #777;
    }

    .tab_menu{position:relative;}
    .tab_menu .tab_list{display : flex;}
    .tab_menu .tab_list .tabs {width : 100%; padding : 10px 0; text-align: center; font-size : 13px; font-weight : 500; color : #AAA; border-bottom : 2px solid #eee;}
    .tab_menu .tab_list .tabs.active {color : #222; border-bottom : 2px solid #222;}
    .tab_menu .tab_content_list .tab_box{width : 100%; max-height : 380px; min-height : 200px; overflow: auto;}

    .tab_menu .tab_content_list .tab_box::-webkit-scrollbar {
        width: 5px; /* 스크롤바 너비 */
        height: 5px; /* 가로 스크롤바 높이 */
    }

    .tab_menu .tab_content_list .tab_box::-webkit-scrollbar-track {
        background: #f1f1f1; /* 트랙 배경색 */
        border-radius: 10px; /* 트랙 모서리 둥글게 */
    }

    .tab_menu .tab_content_list .tab_box::-webkit-scrollbar-thumb {
        background: #888; /* 스크롤바 색상 */
        border-radius: 10px; /* 스크롤바 모서리 둥글게 */
    }

    .tab_menu .tab_content_list .tab_box::-webkit-scrollbar-thumb:hover {
        background: #555; /* 스크롤바에 마우스를 올렸을 때 색상 */
    }

    .notification_list {
        padding-top : 16px;
    }
    .notification_list > p {
        padding-left : 16px;
    }
    .notification_item {
        padding : 16px 24px;
        cursor: pointer;
        border-bottom : 1px solid #EEEEEE;
    }

    .notification_item:hover {
        background: #F6F6F6;
    }

    .notification_item .noti_icon {
        width: 48px;
        height : 48px;
        border-radius : 50%;
        background: #F6F6F6;
        justify-content: center;
        flex-shrink: 0; /* 요소의 너비를 유지 */
    }

    .notification_item:hover .noti_icon {
        background: #fff;
    }

    .notification_item:hover .noti_icon > svg > path, .notification_item:hover .noti_icon > svg > rect {
        fill : #777;
    }

    .notification_item.read .noti_icon svg path, .notification_item.read .noti_icon svg rect {
        fill: #AAA;
    }

    .notification_item .noti_content .noti_title {
        font-size : 12px;
        font-weight: 500;
    }

    .notification_item .noti_content .noti_time {
        font-size : 10px;
        font-weight : 500;
        color : #aaa;
    }

    .notification_item.read .noti_content .noti_title {
        color : #777;
    }

    /* 헤더 끝 */

/* 마이페이지(?) 관련 */
   .myinfo_menu_layer {
     position: sticky;
     top : 0;
     left : 0;
     width: 260px;
     border-radius: 16px;
     box-shadow: rgba(0, 0, 0, 0.08) 0px 4px 16px;
     background : #FFF;
     padding : 0 16px;
   }
  .myinfo_menu_layer .user_info {
      padding-top : 40px;
    }
   .myinfo_menu_layer .user_info .userProfile {
     width: 56px;
     height: 56px;
   }

   .myinfo_menu_layer .user_info .userProfile > img{
    width: 100%;
    height: 100%;
    border-radius: 50%;
  }

  .alram_section {
    width : 900px;
    margin-left : 40px
  }

  .alram_section > div:first-child {
    border-bottom : 8px solid #F6F6F6;
    padding-bottom : 13px;
  }

  .non_defult_info a svg rect, .non_defult_info a svg path {
    fill : #DDDDDD;
  }

  .myinfo_menu {
    border-top : 1px solid #EEE;
    border-bottom: 1px solid #EEE;
    padding : 24px 8px;
  }


  .dup-btn-style[disabled] {
    color: #AAAAAA;
    background-color: #EEEEEE;
  }

  .dup-btn-style {
    position: absolute;
    top: 18px;
    right : 0;
    font-size : 14px;
    font-weight: 500;
    color: #FFFFFF;
    background-color: #222222;
    padding: 4px 12px;
    border-radius: 100px;
    cursor: pointer;
  }

  .border-gauge {
    position: relative;
    padding : 5px 0;
    border-bottom: 2px solid #EEEEEE;
  }

   /* 기본정보 없을 때 시작 */

  .myinfo_menu .non_defult_info:nth-child(3) > a > svg > g > path {
    stroke: #DDDDDD;
  }

  .myinfo_menu > div:hover > a > p{
     color : #882BFF !important;
  }

  .myinfo_menu > div:hover > a svg path , .myinfo_menu > div:hover > a svg rect{
    fill : #882BFF;
  }

  .myinfo_menu div:nth-child(4):hover > a svg path{
    fill : none;
    stroke : #882BFF;
  }

  .myinfo_menu > div.non_defult_info:hover > a > p{
    color : #DDD !important;
  }

  .myinfo_menu > div.non_defult_info:hover a svg path, .myinfo_menu > div.non_defult_info:hover a svg rect {
    fill : #DDDDDD;
  }
  .myinfo_menu > div.non_defult_info:nth-child(3):hover a svg path {
    stroke: #DDDDDD;
  }

  /* 기본정보 없을 때 끝 */

  .myinfo_menu svg {
    width: 20px;
    height: 20px;
  }

  /* 기본정보 있을 때 시작 */

    .myinfo_menu .myinfo_menu_list .down_arrow{
        width: 16px;
        height: 16px;
    }

    .myinfo_menu .myinfo_menu_list.active .myinfo_sub_menu_list {
        display: block;
    }

    .myinfo_menu .myinfo_menu_list:hover > div:first-child > a > p{
        color : #882BFF !important;
    }

    .myinfo_menu .myinfo_menu_list:hover .profile path,  .myinfo_menu .myinfo_menu_list:hover .group path{
        fill : #882BFF;
    }

    .myinfo_menu .myinfo_menu_list:hover .down_arrow path, .myinfo_menu .myinfo_menu_list:hover .bell path{
        stroke : #882BFF;
    }

    .myinfo_menu .myinfo_menu_list:hover .group rect{
        fill : #882BFF;
    }

    .myinfo_menu .myinfo_menu_list:hover .client path{
        fill : #882BFF;
        stroke : #882BFF;
    }

    .myinfo_menu .myinfo_menu_list.active > div:first-child > a > p{
        color : #882BFF !important;
    }

    .myinfo_menu .myinfo_menu_list.active .profile path,  .myinfo_menu .myinfo_menu_list.active .group rect{
        fill : #882BFF;
    }

    .myinfo_menu .myinfo_menu_list.active .down_arrow {
        transform: rotate(180deg);
    }

    .myinfo_menu .myinfo_menu_list.active .down_arrow path, .myinfo_menu .myinfo_menu_list.active .bell path{
        stroke : #882BFF;
    }

    .myinfo_menu .myinfo_menu_list.active .group rect{
        fill : #882BFF;
    }

    .myinfo_menu .myinfo_menu_list.active .client path{
        fill : #882BFF;
        stroke : #882BFF;
    }

    .myinfo_menu .myinfo_menu_list .myinfo_sub_menu_list {
        display: none;
        padding-left : 36px;
    }

    .myinfo_menu .myinfo_menu_list .myinfo_sub_menu_list .myinfo_progress {
        padding : 8px 16px;
        border-left : 2px solid #EEE;
    }

    .myinfo_menu .myinfo_menu_list .myinfo_sub_menu_list .myinfo_progress > p {
        color : #aaa;
    }

    .myinfo_menu .myinfo_menu_list .myinfo_sub_menu_list .myinfo_progress.active{
        padding : 8px 16px;
        border-left : 2px solid #222;
    }

    .myinfo_sub_menu_list .myinfo_progress.active > p{
        color : #222 !important;
    }
    .myinfo_sub_menu_list > a:hover > svg > path {
        fill : #882BFF;
    }
    .myinfo_sub_menu_list > a:hover > p {
        color : #882BFF !important;
    }
    .myinfo_sub_menu_list > a > p.active {
        color : #882BFF !important;
    }
    /* 기본정보 있을 때 끝 */


    /* 기본정보 단순 */

    .basic_info {
        width: 900px;
        margin-left : 40px;
    }

    .basic_info > div:first-child {
        border-bottom : 8px solid #F6F6F6;
        padding-bottom : 13px;
      }

    .basic_info .basic_inner_box {
        width: 400px;
        min-height: 520px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        margin: 0 auto;
    }

    .basic_category_list .memberType {
        width: 192px;
        padding : 15px 0;
        border : 1px solid #eee;
        border-radius: 8px;
        justify-content: center;
        cursor: pointer;
    }

    .basic_item_box {
      padding : 0px 16px;
    }

    input[name="memberType"]:checked + label {
        /* 체크된 라벨의 스타일 정의 */
        background-color: #222; /* 예시: 배경색 변경 */
        border: 1px solid #222; /* 예시: 테두리 추가 */
    }

    /* 선택된 상태일 때의 특정 스타일을 지정할 수 있습니다. */
    input[name="memberType"]:checked + label > p {
        color: #fff !important; /* 예시: 글자색 변경 */
    }

    input[name="memberType"]:checked + label > svg path {
        fill : #fff;
    }

    .position_category_list .positionType {
        width: 192px;
        padding : 15px 0;
        border : 1px solid #eee;
        border-radius: 8px;
        justify-content: center;
        cursor: pointer;
    }

    input[name="positionType[]"]:checked + label {
        /* 체크된 라벨의 스타일 정의 */
        background-color: #222; /* 예시: 배경색 변경 */
        border: 1px solid #222; /* 예시: 테두리 추가 */
    }

    /* 선택된 상태일 때의 특정 스타일을 지정할 수 있습니다. */
    input[name="positionType[]"]:checked + label > p {
        color: #fff !important; /* 예시: 글자색 변경 */
    }

    input[name="positionType[]"]:checked + label > svg path {
        fill : #fff;
    }

    input[name="etc_name"] {
        padding : 9px 16px;
        border: 1px solid #EFEFEF;
        border-radius: 8px;
        width: 100%;
        height: 40px;
        font-size : 14px;
        font-weight: 400;
    }

    input[name="etc_name"]::placeholder {
        font-size : 14px;
        font-weight: 400;
        color : #999;
    }

    /* 기본정보 단순 끝 */


    /* 기본정보 상세 시작 */
    .subject_box {
        background: #FBF9FF;
        padding : 16px;
    }

    .subject_box .question {
        width: 16px;
        height: 16px;
    }

    .subject_box .question > path {
        fill : #AAA;
    }

    .subject_box .state {
        width: 16px;
        height: 16px;
    }

    .subject_box .state > path {
        fill : #F17742;
    }

    .basic_cotent_text {
        width: 100%;
        height: 400px;
        border-radius: 16px;
        border : 1px solid #EEEEEE;
        resize: none;
        background: #fff;;
        padding : 16px;
    }
    .basic_cotent_text::placeholder {
        font-size : 16px;
        font-weight: 400;
        color : #AAAAAA;
    }

    .basic_cotent_text[disabled] {
      background: #F6F6F6;
    }
    .basic_cotent_text.disabled {
      background: #F6F6F6;
      pointer-events: none;
    }

    .basic_cotent_text2 {
        width: 100%;
        height: 96px;
        border-radius: 16px;
        border : 1px solid #EEEEEE;
        resize: none;
        background: #fff;;
        padding : 16px;
    }
    .basic_cotent_text2::placeholder {
        font-size : 16px;
        font-weight: 400;
        color : #AAAAAA;
    }

    .basic_cotent_text2[disabled] {
      background: #F6F6F6;
    }

    .tagify__tag-text {
        font-size: 14px !important;
        font-weight: 500 !important;
    }

    .basic_rep_tech {
        --tag-text-color: #AAA !important;
        --tag-border-radius: 100px !important;
        --tag-pad: 2px 12px !important;
    }

    .teamCountInput {
        width: 100px;
        height: 40px;
        border: 1px solid #EEE;
        border-radius: 8px;
        padding : 9px 16px;
        font-size : 14px;
        font-weight: 400;
    }

    .teamCountInput[disabled] {
      background: #f6f6f6;
    }

    .addSection {
        display: flex;
        justify-content: center;
        margin-top : 43px;
    }
    .listAddBtn {
        width: 160px;
        justify-content: center;
        border: 1px solid #EEE;
        border-radius: 8px;
        padding : 12px 0;
        cursor: pointer;
    }

    .listAddBtn svg path {
        stroke: #882BFF;
    }
    .listAddBtn > p {
        color : #882BFF;
    }

    .position_add_layer {
        position: absolute;
        bottom : 0;
        left : 50%;
        transform: translateX(-50%);
        width: 390px;
        padding : 24px;
        border-radius: 16px;
        background: #fff;
        box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.20);
        z-index : 20;
    }

    .position_list label {
        display: flex;
        align-items: center;
        background : #EEEEEE;
        border-radius: 100px;
        padding : 4px 12px;
        cursor: pointer;
    }
    .position_list label img {
        display: none;
    }
    .position_list label span {
        color : #AAA;
    }

    .positionType:checked + label {
        background : #222;
    }

    .positionType:checked + label span {
        color : #fff !important;
    }

    .positionType:checked + label img {
        display: block;
    }

    .position_title_box {
        width: 120px;
    }

    .position_item {
        display: flex;
        align-items: center;
    }

    .position_item:not(:first-child) {
        margin-top: 15px;
    }

    .position_item .position_title {
        background: #222;
        border-radius: 100px;
        padding: 4px 12px;
        gap: 4px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        align-self: flex-start;
    }

    .position_item .position_title > p {
        font-size : 14px;
        font-weight: 500;
        color : #fff;
    }

    .skill_item, .education_item {
        display: flex;
        gap: 53px;
        border: 1px solid #EEE;
        padding: 0 24px;
        border-radius: 16px;
        justify-content: space-between;
        align-items: center;
    }

    .skill_item:not(:first-child), .education_item:not(:first-child), .workExper_item:not(:first-child), .awards_item:not(:first-child), .certificate_item:not(:first-child), .company_history_item:not(:first-child) {
        margin-top: 15px;
    }

    .basic_input {
        width: 200px;
        border : 1px solid #EEE;
        border-radius: 8px;
        height: 40px;
        padding : 9px 16px;
        margin-top : 8px;
    }

    .basic_input[disabled] {
      background: #f6f6f6;
    }

    .basic_select {
        width: 200px !important;
        margin-top : 8px;
    }

    .skill_item .skill_select .list, .education_item .education_select .list{
        width: 100% !important;
    }

    .basic_input_form > div {
        padding : 16px 0;
    }

    .basic_input_form > div:nth-child(1) {
        padding-right : 24px;
    }

    .basic_input_form > div:nth-child(2) {
        padding-left : 24px;
        padding-right : 24px;
        border-left : 1px solid #eee;
        border-right : 1px solid #eee;
    }

    .basic_input_form > div:nth-child(3) {
        padding-left : 24px;
    }

    .workExper_item {
        display: flex;
        align-items: center;
        gap: 83px;
        border: 1px solid #EEE;
        border-radius: 16px;
        padding : 16px 24px;
    }

    .working_check {
        position: absolute;
        right: -70px;
        bottom: 10px;
    }
    .basic_checkbox {
        background: url(/site/icon/ion_non_checked.svg) no-repeat center center !important;
        /* background-size: 16px auto; */
        border: none !important;
    }
    .basic_checkbox:checked {
        background: url(/site/icon/ion_checked2.svg) no-repeat center center !important;
        /* background-size: 16px auto; */
    }

    .basic_work_end[disabled] {
        background: #F6F6F6 !important;
    }

    #totalDate.active {
        color : #882BFF !important;
    }

    .awards_item {
        display: flex;
        align-items: center;
        gap: 83px;
        border: 1px solid #EEE;
        border-radius: 16px;
        padding : 16px 24px;
    }


    .certificate_item {
        display: flex;
        align-items: center;
        gap: 83px;
        border: 1px solid #EEE;
        border-radius: 16px;
        padding : 16px 24px;
    }



    .company_history_item {
        display : flex;
        gap  : 16px;
    }

    .company_history_item .company_history_box {
        border : 1px solid #EEE;
        border-radius : 16px;
        padding : 16px 24px;
    }


    /* 기본정보 상세 끝 */

    /* 기본정보 뷰 */
    .basic_content_box {
        width: 100%;
        padding : 16px;
        font-size : 16px;
        font-weight: 400;
        background: #F6F6F6;
        border-radius: 16px;
        word-break: break-all;
        white-space: pre-line;
    }
    .position_members {
        width: 140px;
    }
    .positionMark {
        background-color: #EEEEEE;
        padding : 4px 12px;
        border-radius: 100px;
    }

    .position_members:not(:first-child) {
        margin-top: 15px;
    }

    .skill_box {
        display: flex;
        align-items: center;
        gap : 8px;
        border : 1px solid #EEE;
        border-radius: 16px;
        padding : 25px 24px;
        width: 49%;
    }

    .history_box {
        display: flex;
        align-items: flex-start;
        gap : 40px;
    }

    .history_year{
        display: inline-flex;
        padding : 4px 12px;
        color : #fff;
        font-size : 16px;
        font-weight: 700;
        background : #882BFF;
        border-radius: 100px;
    }
    .month_content_box {
        position: relative;
    }
    .history_box .month_content_box:not(:last-child):after{
        content: '';
        position: absolute;
        top: 0;
        left: 30px;
        width: 1px;
        height: 100%;
        background-color: #EEE;
        z-index: -1;
    }

    .history_box:not(:first-child){
        margin-top : 40px;
    }

    .history_month{
        display: inline-block;
        padding : 4px 12px;
        color : #777777;
        font-size : 16px;
        font-weight: 500;
        background : #EEEEEE;
        border-radius: 100px;
    }

    .education_box {
        padding : 24px;
        border : 1px solid #EEE;
        border-radius: 16px;
    }

    .education_box:not(:first-child) {
        margin-top :15px;
    }

    .education_box .education_icon{
        display: flex;
        width: 56px;
        height: 56px;
        border-radius: 100px;
        background: #EEEEEE;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .workExper_box {
        padding : 24px;
        border : 1px solid #EEE;
        border-radius: 16px;
        align-items: flex-start;
    }

    .workExper_box .workExper_icon {
        display: flex;
        width: 56px;
        height: 56px;
        border-radius: 100px;
        background: #EEEEEE;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .workExper_box:not(:first-child) {
        margin-top :15px;
    }

    .work_skill {
        font-size : 12px;
        font-weight: 500;
        color : #AAAAAA;
        background: #EEEEEE;
        padding : 2px 12px;
        border-radius: 100px;
    }

    .working {
        color : #882BFF;
    }

    .award_box {
        padding : 24px;
        border : 1px solid #EEE;
        border-radius: 16px;
    }

    .award_box:not(:first-child) {
        margin-top :15px;
    }

    .award_box .award_icon {
        display: flex;
        width: 56px;
        height: 56px;
        border-radius: 100px;
        background: #EEEEEE;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .certificate_box {
        padding : 24px;
        border : 1px solid #EEE;
        border-radius: 16px;
    }

    .certificate_box:not(:first-child) {
        margin-top :15px;
    }

    .certificate_box .certificate_icon {
        display: flex;
        width: 56px;
        height: 56px;
        border-radius: 100px;
        background: #EEEEEE;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    /* 기본정보 뷰 끝 */

  /* 팀원정보 입력 */
    .team_info_box {
        padding : 40px 0;
    }

    .team_info_form {
        width: 400px;
        margin : 0 auto;
        padding-top : 24px;
    }

    .team_info_form_item:not(:first-child) {
        margin-top : 15px;
    }

    .teamInfoInput {
        width: 100%;
        height: 40px;
        padding : 9px 18px;
        border-radius: 8px;
        border : 1px solid #EFEFEF;
    }

    .teamInfoInput::placeholder {
        font-size : 14px;
        font-weight: 400;
        color : #999999;
    }

    .teamInfoInput:focus {
        border : 1px solid #222;
    }
    .teamInfoInput:focus + .text_remove {
        display: block;
    }
    .text_remove {
        display: none;
        position: absolute;
        top : 50%;
        right : 18px;
        transform: translateY(-50%);
        z-index: 10;
    }

    .categorySelect {
        border : 1px solid #EEE;
        border-radius: 8px;
        width: 49%;
        padding : 15px 0;
        background: #FFF;
        justify-content: center;
    }

    input[name="team_type"]:checked + label {
        background: #222;
        border: 1px solid #222;
    }

    input[name="team_type"]:checked + label span {
        color : #fff !important;
    }

    input[name="team_type"]:checked + label svg path {
        fill: #fff;
    }

    .addressbtn {
        padding: 12px 14px;
        background: #222;
        font-size: 12px;
        font-weight: 500;
        color: #fff;
        border-radius: 8px;
        flex-shrink: 0;
        cursor: pointer;
    }

    input[name="email"]:read-only {
        background: #F6F6F6;
        color : #DDD;
    }

  /* 팀원정보 입력 끝 */

  /* 팀원정보 뷰  */
    .team_info_content {
        border : 1px solid #EEE;
        border-radius: 16px;
        padding : 24px;
        align-items: flex-start;
    }

    .team_info_content_icon {
        display: flex;
        width: 56px;
        height: 56px;
        border-radius: 100px;
        background: #EEEEEE;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }

    .team_info_content_item > p:first-child {
        width: 112px;
        flex-shrink: 0;
    }

    .team_info_content_item > p {
        margin-top : 5px;
    }
  /* 팀원정보 뷰 끝 */

  /* 인증정보 공통 */
    .cert_list {
        font-size : 14px;
        font-weight: 500;
        color : #777;
        padding : 4px 12px;
        border-radius: 100px;
        border : 1px solid #EEE;
        cursor: pointer;
    }

    .cert_list.active {
        color : #fff;
        border : 1px solid #222;
        background: #222;
    }
  /* 인증정보 공통 끝 */

  /* 팀원인증 */
    .cert_info_box {
        width: 100%;
        min-height: 505px;
    }

    .non_cert_info {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .non_cert_info > a {
        padding : 6px 29px;
        border-radius: 8px;
        background: #222;
        cursor: pointer;
    }

    .cert_info_title {
        padding : 16px 0;
        background: rgba(105, 158, 255, 0.1);
        border-radius: 16px;
    }

    .cert_edit_btn {
        border : 1px solid #EEEEEE;
        border-radius: 8px;
        padding : 6px 18px;
        cursor: pointer;
    }

    .cert_edit_btn > svg > path {
      fill : #777777;
    }

    input[name="businesstype"]:checked + label {
        background: #222;
        border: 1px solid #222;
    }

    input[name="businesstype"]:checked + label span {
        color : #fff !important;
    }

    input[name="taxationtype"]:checked + label {
        background: #222;
        border: 1px solid #222;
    }

    input[name="taxationtype"]:checked + label span {
        color : #fff !important;
    }

    .cert_file_wrap {
        width: 400px;
        margin : 0 auto;
        padding : 40px 0;
    }

    .cert_file_box {
        width: 100%;
        background: #222;
        padding : 10px 0;
        border-radius: 8px;
        justify-content: center;
    }

    .cert_notice_box {
        padding : 24px;
        background : #F6F6F6;
        border-radius: 16px;
    }
  /* 팀원인증 끝 */

  /* 날인방법 시작 */

  .cert_info_sign_list {
    min-height: 510px;
    align-items: flex-start;
  }

  .sign_add_box {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 207px;
    height: 207px;
    background: #F6F6F6;
    border-radius: 16px;
    cursor: pointer;
  }

  .sign_add_box > svg {
      width: 24px;
      height: 24px;
      margin-bottom : 8px;
  }

  .sign_add_box > svg > path {
    stroke: #AAAAAA;
  }

  .sign_item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 207px;
    height: 207px;
    border: 1px solid #EEEEEE;
    border-radius: 16px;
    overflow: hidden;
  }

  .sign_item:hover .sign_cover {
    display: block;
  }

  .sign_cover {
    display: none;
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background: rgba(34,34,34, 0.6);
  }

  .sign_delete {
    position: absolute;
    top : 16px;
    right : 16px;
    z-index : 3;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #EEE;
    padding : 6px 12px;
    cursor: pointer;
  }

  .sign_select_box {
    width: 192px;
    height: 192px;
    border : 1px solid #EEEEEE;
    border-radius: 8px;
    cursor: pointer;
  }

  .sign_select_box .active_stamp {
    display: none;
  }
  .sign_select_box:hover .active_stamp {
    display: block;
  }
  .sign_select_box:hover .non_active_stamp {
    display: none;
  }
  .sign_select_box:hover > p {
    color : #222 !important
  }

  .sign_select_box:hover svg path {
    fill : #222;
  }

  .sign_select_box:hover {
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2)
  }

  .cert_info_stamp_box {
    width: 400px;
    margin : 0 auto;
  }

  .example_title > svg {
    width: 16px;
    height: 16px;
  }

  .example_title .notice path {
    fill : #D73E3E;
  }

  .sign_img_box {
    width: 100%;
    padding : 24px;
    border : 1px solid #EEE;
    border-radius: 16px;
  }

  .cert_info_sign_box {
    width: 400px;
    min-height: 380px;
    margin: 0 auto;
  }
  #signatureCanvas {
    border-radius: 16px;
    background: #F6F6F6;
  }

  #clearSign {
    position: absolute;
    bottom : 16px;
    left : 50%;
    transform: translateX(-50%);
    z-index: 10;
    background: #fff;
    border-radius: 100px;
    border : 1px solid #EEE;
    padding : 6px 10px;
    cursor: pointer;
  }

  /* 날인방법 끝 */


  /* 포트폴리오 */
  .portfolio_list_wrap {
    min-height: 450px;
  }
  #portfolio_type_add {
    background: #f6f6f6;
    padding : 4px 12px;
    border-radius: 100px;
    cursor: pointer;
  }
  #portfolio_type_add > svg path {
    stroke: #AAA;
  }
  #portfolio_type_clear {
    display: inline-flex;
    background: #fff;
    padding : 4px 12px;
    border-radius: 100px;
    border : 1px solid #EEE;
    cursor: pointer;
  }
  #portfolio_type_add > svg path {
    stroke: #AAA;
  }

  #portfolio_check_clear {
    display: inline-flex;
    background: #fff;
    padding : 4px 12px;
    border-radius: 100px;
    border : 1px solid #EEE;
    cursor: pointer;
    flex-shrink: 0;
  }
  #portfolio_check_clear > svg path {
    stroke: #AAA;
  }

  .portfolio_type_layer {
    position: absolute;
    top : 40px;
    right : 0;
    width: 390px;
    padding : 24px;
    border-radius: 16px;
    background: #fff;
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.20);
    z-index : 20;
}

.portfolio_type_list label {
    display: flex;
    align-items: center;
    background : #EEEEEE;
    border-radius: 100px;
    padding : 4px 12px;
    cursor: pointer;
}
.portfolio_type_list label img {
    display: none;
}
.portfolio_type_list label span {
    color : #AAA;
}

.portfolioType:checked + label {
    background : #222;
}

.portfolioType:checked + label span {
    color : #fff !important;
}

.portfolioType:checked + label img {
    display: block;
}

.portfolio_tag {
    font-size: 14px;
    font-weight: 500;
    color: #AAA;
    padding: 4px 12px;
    background: #EEE;
    border-radius: 100px;
}

.portfolio_item {
    border: 1px solid #EEE;
    padding : 16px;
    border-radius: 8px;
}

.portfolio_item:not(:first-child) {
  margin-top : 15px;
}

.portfolio_check_tag {
    background: #222;
    border-radius: 100px;
    padding : 2px 12px;
    font-size: 12px;
    font-weight: 500;
    color : #fff;
}

.portfolio_thumnail {
    width: 160px;
    height: 160px;
    border-radius: 8px;
    overflow: hidden;
}
.portfolio_info_item {
    display: flex;
    gap: 16px;
}
.portfolio_info_item > p:first-child {
    width: 45px;
    flex-shrink: 0;
}

.related_skill {
    display: flex;
    gap: 4px;
}

.related_skill .related_skill_item {
    font-size : 12px;
    font-weight: 500;
    color : #AAA;
    border-radius : 100px;
    background: #EEEEEE;
    padding : 2px 12px;
}
.related_skill .remain_count {
    font-size : 12px;
    font-weight: 500;
    color : #FFF;
    border-radius : 100px;
    background: #CCCCCC;
    padding : 2px 12px;
}

.portfolio_edit:hover {
    background: #EEEEEE;
}
.portfolio_delete:hover {
    background: #EEEEEE;
}

#portfolio_wrap {
    width: 588px;
    margin : 0 auto;
}

.teamInfoInput2 {
    width: 486px;
    height: 40px;
    padding : 9px 6px !important;
    border-bottom : 2px solid #EFEFEF;
}

.teamInfoInput2

.teamInfoInput2::placeholder {
    font-size : 14px;
    font-weight: 400;
    color : #999999;
}

.teamInfoInput2:focus {
    border-bottom : 2px solid #222;
}
.teamInfoInput2:focus + .text_remove {
    display: block;
}

input[name="worktype[]"]:checked + label {
    background: #222;
    border: 1px solid #222;
}

input[name="worktype[]"]:checked + label span {
    color : #fff !important;
}
input[name="worktype[]"]:checked + label svg path {
    fill : #fff;
}

.project_info_item {
    border : 1px solid #EEE;
    border-radius: 16px;
    padding : 16px;
    align-items: flex-start;
}

.portfolio_info_box {
    background: #FBF9FF;
    padding : 16px;
    border-radius: 16px;
}

.portfolio_info_box_inner {
    padding-left : 28px;
}


.fileStyle {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 78px;
    height: 78px;
    border-radius: 16px;
    background: #F6F6F6;
    overflow: hidden;
}

  .thumnailPreview {
    position: relative;
  }

  .thumnailPreview .thumnail_box {
    overflow: hidden;
  }

  .thumnail_cancel {
    position: absolute;
    top : 0;
    right : 0;
    margin-top:-5px;
    margin-right:-5px;
  }

  .contentSlide {
    padding : 10px 13px !important;
    overflow: hidden !important;
  }
  .contentSlide .swiper-slide {
      position : relative;
    }
    .contentSlide .swiper-slide:hover .closeBtn {
    display: block;
    }
  .contentSlide .swiper-button-next,
  .contentSlide .swiper-button-prev {
    width: 38px;
    height: 38px;
    background-size: 50% auto;
    background-position: center;
    background-color: rgba(0,0,0,0.15);
    border-radius: 50%;
    top: 50%;
    right: 0px;
    z-index: 100000000;
  }

  .contentSlide .swiper-button-next:hover,
  .contentSlide .swiper-button-prev:hover {
    background: rgba(34, 34, 34, 0.80);
  }

  .contentSlide .swiper-button-prev.swiper-button-disabled,
  .contentSlide .swiper-button-next.swiper-button-disabled {
    display: none;
  }

  .contentSlide .swiper-button-prev {
    left: 0px;
  }

  .contentSlide .swiper-button-next::after {
    content:'';
    width: 24px;
    height: 24px;
    background: url(/site/icon/ion_arrow_right.png) no-repeat;
    position: absolute;
    top: 10px;
    left: 15px;
  }

  .contentSlide .swiper-button-prev::after {
    content:'';
    width: 24px;
    height: 24px;
    background: url(/site/icon/ion_arrow_left.png) no-repeat;
    position: absolute;
    top: 10px;
    left: 14px;
  }


  .closeBtn {
    display: none;
    position: absolute;
    top : 0;
    right : 0;
    margin-top: -5px;
    margin-right: -10px;
  }

  #portfolio_view_wrap {
    width: 100%;
    border-radius: 8px;
    background: #FFF;
    box-shadow: 0 2px 8px 0 rgba(0, 0, 0, .16);
    padding : 24px;
  }

  .portfolio_content {
    padding-top : 24px;
  }

  .portfolio_detail_info {
    border : 1px solid #EEE;
    border-radius: 16px;
    padding : 16px;
    margin-top : 15px;
  }

  .portfolio_img_wrap img {
    min-width: 900px;
  }

  .portfolio_img_wrap img:not(:first-child) {
    margin-top : 24px;
  }

  .share_box {
    position: absolute;
    top: 40px;
    right: 0;
    width: 104px;
    height: 121px;
    border-radius: 16px;
    box-shadow: 0 4px 14px 0 rgba(0, 0, 0, 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #FFF;
    z-index: 20;
  }

  .share_box a:not(:first-child) {
    margin-top : 12px;
  }

  .portfolio_layer, .calculator_layer {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, .5);
    z-index: 130;
    overflow-y: scroll;
  }

  .portfolio_layer .portfolio_inner {
    padding: 24px 0;
    width: 1200px;
    position: relative;
    margin: 0 auto;
  }

  .portfolio_arrow_btn {
    color: #fff;
    position: fixed;
    top: 50%;
    width: 40px;
    cursor: pointer;
  }

  .portfolio_prev {
    margin-left: 80px;
    left: 0;
  }

  .portfolio_next {
    margin-right: 80px;
    right: 0;
  }

  .portfolio_layer_close {
    position: fixed;
    margin-right: 40px;
    margin-top: 20px;
    cursor: pointer;
    top: 0;
    right: 0;
  }

  /* 포트폴리오 끝 */

  /* 프로젝트 관리 */
  .project_manage_type {
        width : 100px;
        border : 1px solid #EEE;
        border-radius: 8px;
        padding : 11px 0;
        font-size: 13px;
        font-weight: 500;
        text-align: center;
        cursor: pointer;
   }
   .project_manage_type.active {
      background: #222;
      color:#fff;
      border : 1px solid #222;
   }
   .non_project_management {
        min-height: 505px;
   }

   .project_management_list {
     border : 1px solid #EEE;
     border-radius: 16px;
     padding : 20px 16px;
     align-items: flex-start;
   }

   .project_management_list.cancel p {
     color : #AAAAAA !important;
   }
   .project_management_list.cancel div {
     color : #AAAAAA !important;
   }

   .project_management_list.cancel .portfolio_check_tag {
     background: #AAAAAA;
     color : #fff !important;
   }
   .project_management_list.cancel .project_mark {
     border : 1px solid #AAAAAA;
   }

   .project_management_list > div {
    align-items: stretch;
   }

   .project_management_list .project_left_box {
    flex : 1;
   }

   .project_management_list .project_right_box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    flex: 1;
   }

   .project_right_box .bookmark_box .bookmark{
    display: none;
   }

   .project_right_box .bookmark_box.active .bookmark{
    display: block;
   }

   .project_right_box .bookmark_box.active .non_bookmark{
    display: none;
   }



   .project_management_list:not(:first-child) {
     margin-top : 15px;
   }

   .project_progress_type {
     padding : 4px 12px;
     border-radius: 8px;
     font-size: 12px;
     font-weight: 500;
   }

   .project_progress_type.contract {
     color : #FFF;
     background: #F17742;
   }

   .project_progress_type.progress {
     color : #FFF;
     background: #6D8EE4;
   }
   .project_progress_type.complete {
     color : #AAA;
     background: #EEEEEE;
   }

   .project_rating {
    padding : 4px 12px;
     border-radius: 8px;
     font-size: 12px;
     font-weight: 500;
   }

   .project_rating.before {
    color : #AAA;
    background: #EEEEEE;
   }

   .project_rating.after {
    background: #fff;
    border : 1px solid #EEE;
   }

   .contract_btn {
     width: 126px;
     padding : 6px 0;
     border-radius: 8px;
     background: #882BFF;
     font-size: 13px;
     font-weight: 500;
     color : #FFF;
     justify-content: center;
     cursor: pointer;
   }

   .contract_btn > svg {
        width: 14px;
        height: 14px;
   }

.project-progress {
  display: flex;
  align-items: center;
  width: 500px;
}

.project-step-box {
  width: 233px;
}

.project-circle {
  width: 11px;
  height: 11px;
  border: 3px solid #F6F6F6;
  border-radius: 100px;
}
.project-progress-bar {
    width: 100%;
    Height: 3px;
    border-radius: 16px;
    background: #f6f6f6;
}


.project-step-box.now .project-circle, .project-step-box.prev .project-circle  {
  border: 3px solid #222;
}

.project-step-box.now .project-progress-bar, .project-step-box.prev .project-progress-bar {
  background: #222;
}

.project-progress-step {
  width: 490px;
  justify-content: space-between;
}

.project-progress-step > div {
  font-size: 12px;
  color: #aaa;
  font-weight: 500;
  background: #fff;
  border-radius: 100px;
  padding : 4px 12px;
}

.project-progress-step > div.now {
  background: #222;
  color: #fff;
}

.project_review_btn {
    border : 1px solid #EEE;
    border-radius: 8px;
    padding : 6px 15px;
}

.project_review_btn.active {
  border : 1px solid #222;
}

.project_review_btn.active > svg > path {
  fill : #222;
}

.project_review_btn.active > p {
  color : #222 !important;
}


.project_review_write_btn {
    background: #F17742;
    border-radius: 8px;
    padding : 6px 15px;
}
.project_review_write_btn svg path{
   fill : #FFF;
}



.project_review_content {
    display: none;
    margin-top : 20px;
    padding-top : 16px;
    border-top : 1px solid #EEEEEE;

}
.project_review_info {
  background: #F6F6F6;
  padding : 16px;
  border-radius: 16px;
}

.project_review_info:not(:first-child) {
  margin-top : 15px;
}

.project_review_user > svg  {
  width: 20px;
  height: 20px;
}
.project_review_user > svg > path {
  fill: #882BFF;
}

.project_review_good {
  background: #F17742;
  padding : 4px 12px;
  border-radius: 100px;
  font-size : 14px;
  font-weight: 500;
  color : #FFF;
}

.project_review_bad {
  background: #fff;
  border: 1px solid #EEE;
  padding : 4px 12px;
  border-radius: 100px;
  font-size : 14px;
  font-weight: 500;
  color : #777777;
}

.meeting_progress_box.active {
  background: #882BFF;
  color : #fff !important;
}
.meeting_progress_box.active p,
.meeting_progress_box.active svg path {
  color : #fff !important;
  fill : #fff !important;
}

.meeting_progress_box {
  background: #F6F6F6;
  border-radius: 16px;
  padding : 24px;
  width: 100%;
  color : #777777 !important;
}

.meeting_progress_box2.active {
  background: #882BFF;
  color : #fff !important;
}
.meeting_progress_box2.active p,
.meeting_progress_box2.active svg path {
  color : #fff !important;
  fill : #fff !important;
}
.meeting_progress_box2 {
  background: #F6F6F6;
  border-radius: 16px;
  padding : 24px;
  width: 100%;
  color : #777777 !important;
}
.meeting_progress_box svg {
  width: 24px;
  height: 24px;
}
.meeting_progress_box svg path {
  fill : #777777;
}

.meeting_progress_box2 svg {
  width: 24px;
  height: 24px;
}
.meeting_progress_box2 svg path {
  fill : #777777;
}

.meeting_type_tag1 {
  padding : 4px 12px;
  background: #F17742;
  font-size : 12px;
  font-weight: 500;
  color : #fff;
  border-radius: 8px;
}

.meeting_type_tag2 {
  padding : 4px 12px;
  background: #EEEEEE;
  font-size : 12px;
  font-weight: 500;
  color : #777777;
  border-radius: 8px;
}

.contract_type_tag1 {
  padding : 4px 12px;
  background: #6D8EE4;
  font-size : 12px;
  font-weight: 500;
  color : #fff;
  border-radius: 8px;
}

.contract_type_tag2 {
  padding : 4px 12px;
  background: #777777;
  font-size : 12px;
  font-weight: 500;
  color : #fff;
  border-radius: 8px;
}

.wish_project_list {
  display: flex;
  flex-wrap: wrap;
  gap : 21px;
}

.wish_project_list .project_list {
  width: 31%;
}
  /* 프로젝트 관리 끝 */

  /* 프로젝트 찾기 */
  .project_search_filter {
    position: sticky;
    top : 158px;
    width: 260px;
    padding : 22px 30px;
    background: #FFF;
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.20);
    border-radius: 16px;
  }


  .searchBtn {
    position: absolute;
    top: 8px;
    right: 7px;
    cursor: pointer;
  }

  .view_count_list svg {
    width: 16px;
    height: 16px;
  }

  .view_count_list svg path {
    fill : #AAAAAA;
  }
  /* 프로젝트 찾기 끝 */


  /* 프로젝트 방식 */

  .project_method_menu {
    position: sticky;
    top: 0;
    left: 0;
    width: 260px;
    background: #FFF;
    border-radius: 16px;
    padding : 24px;
    box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.20);
  }

  .project_method_menu svg {
    width: 24px;
    height : 24px;
  }

  .project_method_menu svg path {
    fill : #777;
  }

  .project_method_menu_list.active > div:first-child > p {
    color : #882BFF !important;
  }

  .project_method_menu_list.active svg path {
    fill : #882BFF;
  }

  .project_sub_menu_list {
    display: none;
    padding-left : 36px;
  }
  .project_method_menu_list.active .project_sub_menu_list {
    display: block;
  }

  .project_sub_menu_list .project_method_progress {
      padding : 8px 16px;
      border-left : 2px solid #EEE;
  }

  .project_sub_menu_list .project_method_progress > p {
      color : #aaa;
  }

  .project_sub_menu_list .project_method_progress.active{
      padding : 8px 16px;
      border-left : 2px solid #222;
  }

  .project_sub_menu_list .project_method_progress.active > p{
      color : #222 !important;
  }
  .project_sub_menu_list > a:hover > svg > path {
      fill : #882BFF;
  }
  .project_sub_menu_list > a:hover > p {
      color : #882BFF !important;
  }

  .project_method_select_box {
    width: 192px;
    height: 192px;
    border : 1px solid #EEEEEE;
    border-radius: 8px;
    cursor: pointer;
  }

  .project_method_select_box svg {
    width: 48px;
    height: 48px;
  }

  .project_method_select_box svg path {
    fill : #AAA;
  }

  .project_method_select_box .active_stamp {
    display: none;
  }
  .project_method_select_box:hover .active_stamp {
    display: block;
  }
  .project_method_select_box:hover .non_active_stamp {
    display: none;
  }
  .project_method_select_box:hover > p {
    color : #222 !important
  }

  .project_method_select_box:hover svg path {
    fill : #222;
  }

  .project_method_select_box:hover {
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2)
  }

  .project_qa_item {
    display: flex;
    align-items: center;
    gap: 24px;
    border: 1px solid #EEE;
    border-radius: 16px;
    padding : 16px 24px;
  }

  .project_qa_item:not(:first-child) {
    margin-top : 15px;
  }

  .dateTypeBtn {
    display: block;
    width: 60px;
    background: #FFF;
    border : 1px solid #EEE;
    border-radius: 8px;
    font-size : 15px;
    font-weight: 500;
    text-align: center;
    padding : 8px 0px;
    cursor: pointer;
    margin-top : 8px;
  }

  input[name="duration_type"]:checked + label {
    background: #222;
    color : #FFF;
  }


  .position_category_list .workType {
    width: 192px;
    padding : 15px 0;
    border : 1px solid #eee;
    border-radius: 8px;
    justify-content: center;
    cursor: pointer;
  }

  input[name="work_field"]:checked + label {
      /* 체크된 라벨의 스타일 정의 */
      background-color: #222; /* 예시: 배경색 변경 */
      border: 1px solid #222; /* 예시: 테두리 추가 */
  }

  /* 선택된 상태일 때의 특정 스타일을 지정할 수 있습니다. */
  input[name="work_field"]:checked + label > p {
      color: #fff !important; /* 예시: 글자색 변경 */
  }

  input[name="work_field"]:checked + label > svg path {
      fill : #fff;
  }

  .workPositions:checked + label {
    background : #222;
  }

  .workPositions:checked + label span {
      color : #fff !important;
  }

  .workPositions:checked + label img {
      display: block;
  }

  .categotyType:checked + label {
    background : #222;
  }

  .categotyType:checked + label span {
      color : #fff !important;
  }

  .categotyType:checked + label img {
      display: block;
  }

  .condition_item {
    display: flex;
    gap: 53px;
    border: 1px solid #EEE;
    padding: 0 24px;
    border-radius: 16px;
    justify-content: space-between;
    align-items: center;
  }

  .condition_item:not(:first-child) {
    margin-top : 15px;
  }

  /* 프로젝트 방식 끝 */

  /* 클라이언트 프로젝트 관리 */
  .helplayer {
    position: absolute;
    top: 50px;
    right: 0;
    z-index: 10;
    width: 480px;
    padding : 24px;
    background-color: #F6F6F6;
    border-radius: 16px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15)
  }

  .confirm_item {
    padding : 20px 16px;
    border-radius: 16px;
    border : 1px solid #EEE;
    align-items: stretch;

  }

  .project_mark {
    padding : 4px 12px;
    border: 1px solid #222;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
  }

  .confirm_item .project_info > p:first-child {
    width: 45px;
    flex-shrink: 0;
  }

  .confirm_stat_box {
    width: 126px;
    background: #222;
    padding : 6px 0;
    border-radius: 8px;
    font-size : 13px;
    font-weight: 500;
    color : #fff;
    text-align: center;
    cursor: pointer;
  }

  .confirm_stat_box[disabled] {
    background: #EEEEEE;
    color: #AAAAAA;
  }

  .disabled {
    background: #EEEEEE;
    color: #AAAAAA;
  }

  .confirm_item:not(:first-child) {
    margin-top: 15px;
  }

   .confirm_item .project_left_box {
    flex : 1;
   }

   .confirm_item .project_right_box {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: space-between;
    flex: 1;
   }

   .right_box_item {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
   }
  /* 클라이언트 프로젝트 관리 끝 */

  /* 프로젝트 상세 미리보기  */
   .project_deadline {
      padding : 4px 12px;
      background: #F17742;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 500;
      color:#fff;
   }

   .project_deadline[disabled] {
      padding : 4px 12px;
      background: #AAAAAA;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 500;
      color:#fff;
    }

    .project_date_result {
      padding : 4px 12px;
      background: #EEEEEE;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 500;
      color:#777777;
    }

   .project_summary_info {
    border : 1px solid #EEE;
    border-radius: 16px;
    padding : 16px;
   }

   .project_inner_tab {
    position : sticky;
    top : 116px;
    border-top : 8px solid #F6F6F6;
    display: flex;
    justify-content: space-around;
    background: #FFF;
   }

   .project_tab {
    padding: 20px 0;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid #EEEEEE;
    color: #AAAAAA;
    width: 100%;
    text-align: center;
    cursor: pointer;
   }

   .project_tab.active {
    border-bottom: 1px solid #222;
    color: #222;
   }

   .project_sub_tab {
    padding: 20px 0;
    font-size: 14px;
    font-weight: 500;
    border-bottom: 1px solid #EEEEEE;
    color: #AAAAAA;
    width: 100%;
    text-align: center;
    cursor: pointer;
   }

   .project_sub_tab.active {
    border-bottom: 1px solid #222;
    color: #222;
   }

   .project_section {
    padding-top : 40px;
   }
   .project_sub_section {
      padding : 40px 24px;
   }
   .project_detail_box1 {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      width: 384px;
      height: 142px;
      padding : 0 24px;
      border : 1px solid #EEE;
      border-radius: 16px;
   }

   .project_detail_box1 svg {
     width: 16px;
     height: 16px;
    }

    .project_detail_box2 {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       justify-content: center;
       width: 282px;
       height: 142px;
       padding : 0 24px;
       border : 1px solid #EEE;
       border-radius: 16px;
       background: #882BFF;
    }

    .project_detail_box2  p {
      color : #FFF !important;
    }

    .project_detail_box2[disabled] {
      background: #F6F6F6;
    }

    .project_detail_box2[disabled]  p {
      color : #AAAAAA !important;
    }

    .project_detail_box3{
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      width: 282px;
      height: 142px;
      padding : 29px 24px;
      border : 1px solid #EEE;
      border-radius: 16px;
    }

    .project_content_text {
      padding : 16px 36px;
      background: #FBF9FF;
      border-radius: 16px;
      word-break: break-all;
      white-space: pre-line;
      font-size:16px;
      font-weight: 400;
    }

    .project_recruit {
      border : 1px solid #EEE;
      border-radius: 16px;
      padding : 24px;
    }

    .project_recruit_item > p:first-child{
      width: 133px;
    }

    .recruit_tag {
      display: inline-flex;
      background: #222;
      border-radius: 100px;
      padding : 4px 12px;
    }

    .recruit_tag:not(:first-child) {
      margin-top : 8px;
    }

    .recruit_tag2 {
      display: inline-flex;
      background: #EEEEEE;
      border-radius: 100px;
      padding : 4px 12px;
    }

    .recruit_tag2 svg path {
      stroke: #777777;
    }

    .recruit_tag2:not(:first-child) {
      margin-top : 8px;
    }

    .project_detail_skill_box {
      display: flex;
      gap : 8px;
      border : 1px solid #EEE;
      border-radius: 16px;
      padding : 24px;
    }
    .project_detail_skill_item {
      font-size : 16px;
      font-weight: 500;
      color : #777;
      border-radius: 100px;
      padding : 4px 12px;
      background: #EEEEEE;
    }

    .project_question_list {
      background: #FBF9FF;
      padding : 24px;
      border-radius: 16px;
    }

    .project_question_list:not(:first-child) {
      margin-top : 15px;
    }


    .project_comment_box {
      border : 1px solid #EEE;
      border-radius: 16px;
      padding : 16px;
      align-items: flex-start;
    }

    .project_comment_text {
      resize: none;
      border: unset;
      background: #FFF;
      width: 100%;
      height: 60px;
      outline: unset;
      font-size: 16px;
    }

    .project_comment_text::placeholder {
      font-size : 16px;
      font-weight: 400;
      color : #AAAAAA;
    }

    .project_comment_btn {
      padding : 23px 19px;
      background: #EEEEEE;
      font-size :  14px;
      font-weight: 500;
      color : #AAAAAA;
      border-radius: 8px;
      flex-shrink: 0;
    }
    .project_comment_btn.active {
      background: #222;
      color : #FFF;
    }

    .project_answer_save {
      padding : 23px 19px;
      background: #EEEEEE;
      font-size :  14px;
      font-weight: 500;
      color : #AAAAAA;
      border-radius: 8px;
      flex-shrink: 0;
    }
    .project_answer_save.active {
      background: #222;
      color : #FFF;
    }

    .project_job_search_table {
      border-top : 8px solid #F6F6F6;
    }

    .project_job_search_table thead {
      border-bottom : 1px solid #EEE;
    }

    .project_job_search_table thead th {
      padding : 24px 0;
      text-align: center;
      font-size : 16px;
      font-weight: 500;
      color : #AAA;
    }
    .project_job_search_table tbody tr {
      border-bottom : 1px solid #EEE;
    }
    .project_job_search_table tbody td {
      padding : 24px 0;
      text-align: center;
      font-size : 16px;
      font-weight: 500;
    }

    .project_job_search_table tbody td:last-child > div {
      padding : 24px 0;
      text-align: center;
      font-size : 16px;
      font-weight: 500;
    }

    .tuning_badge {
      position: absolute;
      top: 50%;
      right: 25px;
      transform: translateY(-50%);
    }

    .tuning_badge svg {
      width: 16px;
      height: 16px;
    }

    .icon_box {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 38px;
      height: 38px;
      border-radius: 100px;
      border : 1px solid #EEE;
    }

    .position_tag {
      padding : 4px 12px;
      border-radius: 100px;
      background: rgba(255,255,255,0.15);
    }

    .position_tag svg path {
      fill : #fff;
    }

    .common_comment{
      padding : 16px 24px;
      border-bottom : 1px solid #EEEEEE;
    }

    .answer{
      display: flex;
      align-items: center;
      gap: 24px;
      padding: 16px 24px;
      background: #F6F6F6;
    }

    .client_box {
      padding : 4px 10px;
      background: #fff;
      border-radius: 100px;
      font-size : 10px;
      font-weight: 500;
      color: #AAAAAA;
    }

    .project_inquiry_text {
      word-break: break-all;
      white-space: pre-line;
      font-size:16px;
      font-weight: 400;
    }

    .project_answer_status {
      padding-right: 36px;
    }

    .inquiry_comment_layer {
      position: absolute;
      top: 30px;
      right: 0;
      z-index: 10;
      background: #FFF;
      width: 110px;
      padding: 20px 24px;
      box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.20);
      border-radius: 16px;
      text-align: center;
    }

    .edit_save {
      padding : 5px 19px;
      background: #222;
      border-radius: 8px;
      font-size : 14px;
      font-weight: 500;
      color : #fff;
    }
    .edit_cancel {
      padding : 5px 19px;
      border: 1px solid #EEEEEE;
      border-radius: 8px;
      font-size : 14px;
      font-weight: 500;
      color : #777777;
    }
  /* 프로젝트 상세 미리보기 끝 */

  /* 프로젝트 지원 */
    .project_appli_wrap {
      width: 588px;
      margin : 0 auto;
    }

    .calculator_layer_btn {
      padding : 9px 12px;
      background: #222;
      border-radius: 8px;
      cursor: pointer;
    }

    .calculator_inner {
      position: absolute;
      top : 50%;
      left : 50%;
      transform: translate(-50%, -50%);
      width: 792px;
      padding : 24px;
      border-radius: 16px;
      background: #FFF;
    }

    .calculator_result_box {
      width: 368px;
      flex-shrink: 0;
      background: #F6F6F6;
      border-radius: 16px;
      padding : 24px;
    }

    .related_portfolio_box {
      padding : 16px 24px;
      border : 1px solid #EEEEEE;
      border-radius: 8px;
      cursor: pointer;
    }

    .related_portfolio_box svg {
      width: 24px;
      height: 24px;
    }

    .related_portfolio_box svg path {
      fill: #AAAAAA;
    }

    .related_portfolio_select:checked + label {
      background: #FBF9FF;
    }

    .related_portfolio_select:checked + label svg path {
      fill : #882BFF;
    }

    .related_portfolio_inner {
      position: absolute;
      top : 50%;
      left : 50%;
      transform: translate(-50%, -50%);
      width: 744px;
      padding : 20px 40px 24px 40px;
      background: #fff;
      border-radius: 16px;
    }

    .related_portfolio_list {
      max-height: 350px;
      overflow: auto;
    }

    .related_portfolio_item {
      position : relative;
      width: 120px;
      height: 120px;
      overflow: hidden;
      border-radius: 8px;
    }
    .related_portfolio {
      border: unset !important;
    }
    .related_portfolio:checked {
      background: url(/site/icon/ion_checked2.jpg) no-repeat center center !important;
      background-size: 18px auto !important;
      border : 2px solid #F17742 !important;
    }

    .item_checkbox {
      position: absolute;
      top : 16px;
      left : 16px;
      z-index : 10;
    }

    .item_check_cover {
      position: absolute;
      top: 0;
      left : 0;
      width: 100%;
      height: 100%;
      border-radius: 8px;
      background : #222;
      opacity: 0.6;
    }

    .info_link {
      font-weight: 500;
      color: #6D8EE4;
      text-decoration: underline;
      text-underline-offset: 2px;
    }

    .related_portfolio_delete {
      position: absolute;
      top : 0;
      right : 0;
      margin-top: -5px;
      margin-right: -10px;
    }
  /* 프로젝트 지원 끝 */

  /* 지원자 목록 */
    .deadline_elongation {
      width : 126px;
      padding : 6px 0;
      background: #882BFF;
      font-size : 13px;
      font-weight: 500;
      color : #FFF;
      border-radius: 8px;
      text-align: center;
    }

    .volunteer_box1 {
      border: 1px solid #eee;
      border-radius: 16px;
      padding : 16px;
    }

    .volunteer_box1 > div > p:first-child {
      width: 67px;
    }


    .cate_more {
      display: inline-block;
      padding: 4px 12px;
      text-align: center;
      font-size: 14px;
      font-style: normal;
      font-weight: 500;
      line-height: normal;
      color: #fff;
      background: #222;
      border-radius: 30px;
      cursor: pointer;
      margin-top: 8px;
    }

    .volunteer_item {
      border : 1px solid #EEE;
      border-radius: 16px;
      padding : 24px;
    }

    .portfolio_use {
      padding : 4px 12px;
      border : 1px solid #EEEEEE;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 500;
      color : #777;
    }

    .volunteer_content_item > p:first-child {
      width: 45px;
      color : #AAAAAA;
    }

    .volunteer_detail_btn {
      width: 126px;
      border: 1px solid #EEE;
      border-radius: 8px;
      text-align: center;
      padding : 6px 0;
      justify-content: center;
      cursor: pointer;
    }

    .volunteer_meeting_btn, .volunteer_meeting_cancel {
      width: 126px;
      border: 1px solid #EEE;
      border-radius: 8px;
      text-align: center;
      background: #222;
      padding : 6px 0;
      justify-content: center;
      cursor: pointer;
    }

    .volunteer_meeting_btn > svg > path, .volunteer_meeting_cancel > svg > path {
      fill : #fff;
    }

    .volunteer_item:not(:first-child) {
      margin-top : 15px;
    }

    .meeting_discussion {
      background: #F17742;
      padding : 4px 12px;
      border-radius: 8px;
      font-size: 12px;
      font-weight: 500;
      color : #fff;
    }


    .deadline_continuation_layer  {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 50;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
    }
    .deadline_continuation_inner{
      position: absolute;
      top : 50%;
      left : 50%;
      transform: translate(-50%, -50%);
      width: 400px;
      background: #FFF;
      border-radius: 16px;
      padding : 20px 24px;
    }

    .deadline_dates {
      height: 36px;
      border : 1px solid #EFEFEF;
      border-radius: 8px;
      padding: 9px 16px;
    }

    .close_layer {
      border : 1px solid #eee;
      border-radius: 30px;
      padding : 9px 40px;
      font-size: 15px;
      font-weight: 500;
      cursor: pointer;
    }

    .save_layer {
      background: #222;
      border-radius: 30px;
      padding : 9px 58px;
      font-size: 15px;
      font-weight: 500;
      color: #fff;
      cursor: pointer;
    }

    .save_layer2 {
      background: #222;
      border-radius: 30px;
      padding : 9px 27px;
      font-size: 15px;
      font-weight: 500;
      color: #fff;
      cursor: pointer;
    }

    .save_layer[disabled] {
      background: #EEEEEE;
      color: #AAAAAA;
    }

    .save_layer2[disabled] {
      background: #EEEEEE;
      color: #AAAAAA;
    }

    .volunteer_detail_box1 {
      display: flex;
      flex-direction: column;
      justify-content: center;
      width: 268px;
      height: 142px;
      border : 1px solid #EEEEEE;
      border-radius: 16px;
      padding : 0 24px;
    }


    .meeting_indent_layer, .meeting_cancel_layer, .project_review_layer, .related_portfolio_layer {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 140;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
    }

    .meeting_indent_inner, .project_review_inner{
      position: absolute;
      top : 50%;
      left : 50%;
      transform: translate(-50%, -50%);
      width: 567px;
      background: #FFF;
      border-radius: 16px;
      padding : 20px 0;
    }

    .project_review_inner {
      padding : 20px 24px;
    }

    .project_review_inner .review_box {
      padding : 0 16px;
    }

    .meeting_index_tab {
      padding : 10px 0;
      border-bottom : 1px solid #EEEEEE;
      font-size : 13px;
      font-weight: 500;
      color : #AAAAAA;
      text-align: center;
    }

    .meeting_index_tab.active {

      border-bottom : 1px solid #222;
      color : #222;
    }
    .meeting_type_wrap_inner {
      padding : 24px;
    }
    .meeting_option1 {
      padding : 2px 12px;
      background: #222;
      color : #fff;
      font-size : 12px;
      font-weight: 500;
      border-radius: 100px;
    }
    .meeting_option2 {
      padding : 2px 12px;
      background: #EEEEEE;
      color : #AAAAAA;
      font-size : 12px;
      font-weight: 500;
      border-radius: 100px;
    }

    .meeting_type_box {
      display: flex;
      gap : 4px;
      align-items: flex-start;
      border: 1px solid #EEE;
      border-radius: 16px;
      padding : 16px;
      cursor: pointer;
    }

    input[name="meeting_type"]:checked + label {
      border: 1px solid #882BFF;
      background: #FBF9FF;
    }

    input[name="meeting_date_rank"]:checked + label {
      border: 1px solid #882BFF;
      background: #FBF9FF;
    }

    .meeting_type_box > div > div svg path {
      fill : #882BFF;
    }

    .meeting_type_wrap_inner > div:not(:first-child) {
      margin-top : 15px;
    }
    .meeting_time_list {
      display : flex;
      flex-wrap: wrap;
      gap : 12px;
    }
    .meeting_time_item {
      width: 165px;
      padding : 15px 0;
      border: 1px solid #EEE;
      border-radius: 8px;
      font-size : 15px;
      font-weight: 500;
      color : #777;
      text-align: center;
      cursor: pointer;
    }

    .meeting_time_item.active {
      background: #222;
      color : #fff;
    }

    .meeting_time_item[disabled] {
      background: #EEEEEE;
    }

    .meeting_date {
      width: 170px;
      height: 36px;
      padding: 16px;
      border: 1px solid #EEE;
      border-radius: 8px;
    }
  /* 지원자 목록 끝 */

  /* 클라이언트 프로젝트 */
    .review_like_box {
      padding : 6px 12px;
      font-size : 14px;
      font-weight: 500;
      color : #AAA;
      background: #EEEEEE;
      border-radius: 30px;
    }

    input[name="review_like[]"]:checked + .review_like_box {
      background: #F17742;
      color : #fff;
    }

    .review_bad_box {
      padding : 6px 12px;
      font-size : 14px;
      font-weight: 500;
      color : #AAA;
      background: #EEEEEE;
      border-radius: 30px;
    }

    input[name="review_bad[]"]:checked + .review_bad_box {
      background: #222;
      color : #fff;
    }

  /* 클라이언트 프로젝트 끝 */

  /* 공통? */
  .file-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 5px;
    border : 1px solid #eee;
    border-radius: 8px;
    padding : 10px 16px;
  }

  .file-item .imgs_info {
    flex-grow: 1;
  }

  .file-item .imgs_info > div{
    display: flex;
    justify-content: flex-start;
    gap: 8px;
  }

  .file-item .imgs_info > div .file-name{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 180px;
    font-size : 12px;
    font-weight : 400;
  }

  .file-item .imgs_info > div .file-size{
    font-size : 12px;
    font-weight : 400;
    color : #aaa;
  }

  .file-item img {
    max-width: 100px;
    max-height: 100px;
  }
  /* 공통 끝? */

  .alram_list {
    padding : 24px 16px;
    border-bottom : 1px solid #EEEEEE;
  }
  .toggle-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .toggle-label {
    margin-left: 10px;
    font-size: 14px;
    font-weight: 500;
  }

  .toggle-input {
    display: none;
  }

  .toggle-switch {
    position: relative;
    width: 50px;
    height: 24px;
    background-color: #ccc;
    border-radius: 24px;
    cursor: pointer;
    transition: background-color 0.3s;
  }

  .toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background-color: #fff;
    border-radius: 50%;
    transition: transform 0.3s;
  }

  .toggle-input:checked + .toggle-switch {
    background-color: #8a2be2;
  }

  .toggle-input:checked + .toggle-switch::after {
    transform: translateX(26px);
  }

  .radio-container {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }

  .radio-label {
    margin-left: 10px;
    font-size: 14px;
    font-weight: 500;
  }

  .radio-input {
    display: none;
  }

  .custom-radio {
    position: relative;
    width: 10px;
    height: 10px;
    border: 4px solid #ddd;
    border-radius: 50%;
    cursor: pointer;
  }

  .custom-radio::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;
    height: 12px;
    background-color: transparent;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: background-color 0.3s;
  }

  .radio-input:checked + .custom-radio {
    border-color: #8a2be2;
  }

  .radio-input:checked + .custom-radio::after {
    /*background-color: #8a2be2;*/
  }
  /* 마이페이지(?) 관련 끝 */

/* 업데이트 버튼 스타일 */
    .update_btn {
      padding : 10px 24px;
      font-size : 13px;
      font-weight: 500;
      color : #fff;
      border-radius : 100px;
      background: #F17742;
      cursor: pointer;
    }
    .update_btn[disabled]{
        padding : 10px 24px;
        font-size : 13px;
        font-weight: 500;
        color : #AAA;
        border-radius : 100px;
        background: #EEEEEE;
        cursor: pointer;
      }

/* 메인 시작 */

    /* 메인배너 */
    #kalleryteam_main {
        position: relative;
    }
    #kalleryteam_main .swiper-wrapper {
    height: unset;
    }
    .swiper_controll_box {
        position: absolute;
        display: inline-block;
        bottom: 24px;
        right: 24px;
        z-index: 50;
    }

    #kalleryteam_main  .swiper-pagination-custom {
        width: unset;;
        display: flex;
        align-items: center;
        justify-content: center;
        position: unset;
        left : unset;
        background: rgba(255, 255, 255, 0.9);
        border-radius: 25px;
        padding: 5px 24px;
        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    }
    #kalleryteam_main .swiper-pagination-custom span {
        margin: 0 5px;
        font-size: 16px;
        color: #333;
    }
    #kalleryteam_main .swiper-button-next-custom {
        position: absolute;
        top : 50%;
        right : 0;
        transform: translateY(-50%);
        z-index: 30;
        width: 18px;
        height: 18px;
    }

    #kalleryteam_main .swiper-button-prev-custom {
        position: absolute;
        top : 50%;
        left : 0;
        transform: translateY(-50%);
        z-index: 30;
        width: 18px;
        height: 18px;
    }
    #kalleryteam_main .swiper-button-next-custom > svg, #kalleryteam_main .swiper-button-prev-custom > svg {
        width: 100%;
        height: 100%;
    }
    #kalleryteam_main .swiper-button-next-custom > svg > path, #kalleryteam_main .swiper-button-prev-custom > svg > path {
        stroke: #CCCCCC;
    }

    #kalleryteam_main .swiper-button-next-custom:hover > svg > path , #kalleryteam_main .swiper-button-prev-custom:hover > svg > path {
        color: #777777;
    }

    #kalleryteam_main .swiper_controll_box .swiper-button-next:after, #kalleryteam_main .swiper_controll_box .swiper-button-prev:after {
        font-size: 14px;
        text-transform: none !important;
        letter-spacing: 0;
        font-variant: initial;
        line-height: 1;
    }

    /* 핫 프로젝트 */

    #hot_project {
        position: relative;
        padding: 0 0 20px 10px;
    }
    #hot_project .swiper-wrapper {
        height: unset;
    }

    /* 최신 프로젝트 */

    #new_project {
        position: relative;
        padding: 0 0 20px 10px;
    }
    #new_project .swiper-wrapper {
        height: unset;
    }

    .project_nav .swiper-button-next-custom , .project_nav .swiper-button-prev-custom {
        display: flex;
        justify-content: center;
        align-content: center;
        width: 38px;
        height: 38px;
        background: #DDDDDD;
        border-radius: 50%;
        align-items: center;
    }

    .project_nav .swiper-button-next-custom > svg, .project_nav .swiper-button-prev-custom > svg {
        width: 24px;
        height: 24px;
    }
    .project_nav .swiper-button-next-custom > svg > path, .project_nav .swiper-button-prev-custom > svg > path {
        stroke: #fff;
    }

    .project_list {
        border: 1px solid #EEEEEE;
        border-radius: 16px;
        padding : 16px 16px 20px 16px;
        overflow: hidden;
    }

    .project_list:hover {
        box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.20);
    }

    .bookmark_box .non_bookmark {
        display: block;
    }

    .bookmark_box .bookmark {
        display: none;
    }

    .bookmark_box.active .non_bookmark {
        display: none;
    }

    .bookmark_box.active .bookmark {
        display: block;
    }

    .project_list .project_type {
        font-size : 12px;
        font-weight: 500;
        border : 1px solid #222;
        border-radius: 8px;
        padding : 4px 12px;
    }

    .project_list .project_progress {
        font-size : 12px;
        font-weight: 500;
        color : #fff;
        background: #F17742;
        border-radius: 8px;
        padding : 4px 12px;
    }

    .project_list .project_progress_end {
        font-size : 12px;
        font-weight: 500;
        color : #fff;
        background: #AAAAAA;
        border-radius: 8px;
        padding : 4px 12px;
    }

    .project_list .project_title {
        display: -webkit-box;  /* Flexbox 방식을 사용하여 텍스트 영역을 처리합니다. */
        -webkit-line-clamp: 2; /* 텍스트를 최대 2줄까지만 표시합니다. */
        -webkit-box-orient: vertical;  /* 텍스트를 세로로 쌓도록 설정합니다. */
        overflow: hidden;  /* 초과하는 텍스트는 숨깁니다. */
        font-size: 16px;
        font-weight: 500;
    }

    .project_required {
        padding : 2px 12px;
        background: #222;
        border-radius: 100px;
        font-size : 12px;
        font-weight: 500;
        color : #fff;
    }

    .project_tech {
        padding : 2px 12px;
        background: #EEEEEE;
        border-radius: 100px;
        font-size : 12px;
        font-weight: 500;
        color : #AAAAAA;
    }

    .project_tech.count {
        color : #fff;
        background: #CCCCCC;
    }

    .project_list .project_request {
        border-top : 1px solid #EEEEEE;
        padding-top : 16px;
    }

    .project_request .profile{
        width: 40px;
        height : 40px;
    }

    .project_request .cert_user_badge > svg {
        width: 10px;
        height: 10px;
    }
    .customer_box {
        position : relative;
        overflow: hidden;
        box-shadow: 0px 4px 14px 0px rgba(255, 255, 255, 0.20);
    }

    .fade-effect {
        position: absolute;
        top: 0;
        bottom: 0;
        width: 100px;
        pointer-events: none;
        z-index: 10;
    }

    .fade-left {
        left: 0;
        background: linear-gradient(to right, white, rgba(255, 255, 255, 0));
    }

    .fade-right {
        right: 0;
        background: linear-gradient(to left, white, rgba(255, 255, 255, 0));
    }

    .leftGoing {
        animation: flowLeft 15s linear infinite;
    }
    @keyframes flowLeft {
        0% {
            transform: translateX(0);
        }
        100% {
            transform: translateX(-50%);
        }
      }





  /* 커뮤니티 */
    .community_menu {
      width: 260px;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0px 4px 14px 0px rgba(0, 0, 0, 0.15);
      padding : 24px;
    }

    .community_menu_item {
      cursor: pointer;
    }

    .community_menu_item:not(:first-child) {
      margin-top : 15px;
    }

    .community_menu_item:hover {
      color : #222 !important;
    }

    .community_menu_item.active {
      color : #222 !important;
    }

    #community_write {
      padding : 10px 19px;
      background: #F17742;
      font-size : 13px;
      font-weight: 500;
      color : #fff;
      border-radius: 100px;
      cursor: pointer;
    }

    #community_write svg path {
      fill : #FFF;
    }

    .search_title {
      position: absolute;
      top : 50%;
      transform: translateY(-50%);
      right: 18px;
      z-index: 10;
      margin-top: 2px;
    }

    .community_item {
      padding : 16px;
      background: #FFF;
      border-bottom : 1px solid #EEEEEE;
    }

    .community_item.notice {
      background: #FBF9FF;
    }

    .community_type_tag {
      background: #EEEEEE;
      font-size: 12px;
      font-weight: 500;
      color : #AAAAAA;
      padding : 2px 8px;
      border-radius: 100px;
    }

    .community_type_tag.notice {
      background: #222;
      color: #fff;
    }

    .community_media_type {
      padding-top: 3px;
    }

    .community_title {
      max-width: 400px;
      overflow: hidden; /* 넘치는 텍스트를 숨김 */
      white-space: nowrap; /* 텍스트를 한 줄로 표시 */
      text-overflow: ellipsis; /* 넘치는 부분에 '...' 표시 */
      font-size : 15px;
      font-weight: 500;
    }

    .community_comment_count {
      font-size : 15px;
      font-weight: 500;
      color : #882BFF;
    }

    .community_user {
      max-width: 80px;
      overflow: hidden; /* 넘치는 텍스트를 숨김 */
      white-space: nowrap; /* 텍스트를 한 줄로 표시 */
      text-overflow: ellipsis; /* 넘치는 부분에 '...' 표시 */
      font-size: 14px;
      font-weight: 500;
      color: #777;
    }
    .community_date {
      font-size: 14px;
      font-weight: 400;
      color: #AAA;
    }

    .community_detail_wrap {
      width: 900px;

    }

    .community_like_btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap : 6px;
      width: 100px;
      border: 1px solid #EEEEEE;
      border-radius: 8px;
      padding: 10px 0;
      cursor: pointer;
    }

    .community_like_btn:hover {
      background: #EEEEEE;
    }

    .community_like_btn.like {
      border: 1px solid #882BFF;
      background: #882BFF;
    }

    .community_like_btn:hover.like {
      border: 1px solid #882BFF;
      background: #882BFF;
    }


    .community_like_btn.like svg path{
      fill: #fff;
    }

    .community_like_btn.like p{
      color: #fff;
    }

    .community_like_btn svg {
      width: 20px;
      height: 20px;
    }
    .community_like_btn p {
      font-size : 13px;
      font-weight: 500;
      color : #777;
    }

    .community_comment_wrap {
      margin-top : 40px;
      border-top : 8px solid #F6F6F6;
      padding-top : 16px;
    }

    .non_comunity_comment {
      padding : 16px;
      background: #F6F6F6;
      border-radius: 16px;
    }
    .comment_like_btn {
      cursor: pointer;
    }
    .comment_like_btn p {
      font-size : 14px;
      font-weight: 400;
      color : #AAA;
    }

    .comment_like_btn:hover svg path {
      fill : #777777;
    }

    .comment_like_btn:hover p {
      color : #777777;
    }

    .comment_like_btn.like svg path {
      fill : #882BFF;
    }

    .comment_like_btn.like p {
      color : #882BFF;
    }

    .community_comment_content {
      margin-top : 16px;
      border-top: 1px solid #EEEEEE;
    }

    .community_comment_content .project_inquiry_list {
      border-bottom : 1px solid #EEEEEE;
      padding : 16px 0;
    }

    .community_comment_content .common_comment {
      padding : unset;
      border: unset;
    }


    .community_comment_content .edit_save[disabled] {
      background: #EEEEEE;
      color : #AAAAAA;
    }

    .community_navigation {
      justify-content: center;
    }

    .community_navigation_prev {
      padding : 12px 23px;
      border : 1px solid #EEEEEE;
      border-radius: 8px;
      cursor: pointer;
    }

    .community_navigation_prev:hover, .community_navigation_next:hover {
      background: #EEEEEE;
    }

    .community_navigation_prev p {
      font-size : 13px;
      font-weight: 500;
      color : #777777;
    }

    .community_navigation_list {
      width: 140px;
      text-align: center;
      padding : 12px 0;
      background: #222;
      border-radius: 8px;
      font-size: 14px;
      font-weight: 500;
      color : #fff;
      cursor: pointer;
    }

    .community_navigation_next {
      padding : 12px 23px;
      border : 1px solid #EEEEEE;
      border-radius: 8px;
      cursor: pointer;
    }

    .community_navigation_next p {
      font-size : 13px;
      font-weight: 500;
      color : #777777;
    }

    .cummunity_lines > p {

    }

  /* 커뮤니티 끝 */


  /* 메인 끝 */



  /* 헤더 */

  header {
    position: relative;
    width: 100%;
    height: 118px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
  }

  #header {
    border-bottom : 1px solid #EEEEEE;
    padding : 38px 0;
  }

  .header_inner {
    width: 1920px;
    margin : 0 auto;
  }

  .header_inner .header_box {
    width: 1200px;
    margin : 0 auto;
  }

  .header_inner .header_box .header_box_content {
    display: flex;
    justify-content: space-between;
  }
  /* 푸터 */
  footer {
    width: 100%;
    background: #F6F6F6;
  }
  .footer_wrap {
    width: 1920px;
    margin : 0 auto;
  }
 .footer_container {
    width: 1200px !important;
    padding: 100px 0;
    margin : 0 auto;
  }


  .footer_container .footer_commpany_info > svg {
    margin-right : 40px;
    fill : none;
    stroke : #777777;
    stroke-width:2;
    stroke-miterlimit : 10;
    stroke-linecap : square;
    transform-origin: center center;
    /* 0도에서 45도까지 회전합니다. */
    transform: rotate(180deg);
    transition: transform 0.5s ease;
  }

  .footer_container .footer_commpany_info.active > svg {
    stroke : #AAA;
    transform: rotate(0);
  }

  footer > div p {
    color: #AAA;
    font-family: Roboto;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    margin-bottom: 12px;
  }

  footer > div .footer-logo {
    width: 100%;
  }

  footer > div .footer-info > div:first-child {
    gap: 8px;
  }

  footer > div .footer-info a,
  footer > div .footer-info span {
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal;
    color: #AAAAAA;
  }

  footer > div .footer-info a:hover {
    color: #777;
  }

  .footer_company_content .footer_company_list {
    display: flex !important;
    gap: 8px;
  }


/* 챗봇 */
#custom_chatbot {
    position: fixed;
    bottom: 70px;
    right: 110px;
    z-index: 100;
    cursor: pointer;
  }


  /* sweetalert2 custom */

.custom_swal_popup {
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    width: auto !important;
    height: 200px !important;
    padding-bottom : 28px !important;
    padding-left : 31px !important;
    padding-right : 31px !important;
  }

  .custom_swal_popup1_1 {
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    width: auto !important;
    /* height: 150px !important; */
    padding-bottom : 28px !important;
    padding-left : 31px !important;
    padding-right : 31px !important;
    border-radius: 16px !important;
  }
  .custom_swal_title {
    font-size : 17px !important;
    font-weight : 400 !important;
    color : #222 !important;
    overflow: unset !important;
  }

  .custom_swal_confirm {
    color : #fff !important;
    padding : 8px 41px 10px 41px;
    background: #222 !important;
    border-radius : 100px !important;
  }

  .custom_swal_cancel {
    color : #222 !important;
    padding : 8px 41px 10px 41px;
    background: #fff !important;
    border-radius : 100px !important;
    border : 1px solid #EEEEEE !important;
  }

  .custom_swal_popup2 {
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    width: 300px !important;
    height: 180px !important;
    padding-bottom : 28px !important;
    padding-left : 31px !important;
    padding-right : 31px !important;
  }

  .custom_swal_popup3 {
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    width: 400px !important;
    height: 220px !important;
    padding-bottom : 28px !important;
    padding-left : 11px !important;
    padding-right : 11px !important;
    border-radius: 16px !important;
  }
  .custom_swal_email_popup {
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    width: auto !important;
    height: 164px !important;
    padding-top : 25px !important;
    padding-bottom : 28px !important;
    padding-left : 31px !important;
    padding-right : 31px !important;
  }
  .custom_swal_mo_find_id_popup {
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    width: auto !important;
    height: 210 !important;
    padding-bottom : 28px !important;
    padding-left : 31px !important;
    padding-right : 31px !important;
  }

  .custom_swal_popup4 {
    display: flex !important;
    align-items: center !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    width: 400px !important;
    height: auto !important;
    padding-top : 20px !important;
    padding-bottom : 28px !important;
    padding-left : 11px !important;
    padding-right : 11px !important;
    border-radius: 16px !important;
  }

  .custom_swal_title4 {
    margin : unset !important;
  }

/* 페이징 */

.paging_box {
    margin-left: 300px;
    padding : 20px 0 75px 0;
  }
  .paging_box .tb_footer {
    width: auto;
    margin: 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 24px;
  }
  .paging_box .tb_footer > ul {
      display: flex;
      align-items: center;
      margin-top: 8px;
      justify-content: center;
      gap: 24px;
      flex-wrap: wrap;
  }

  .paging_box .tb_footer > ul > li > .pages {
    position: relative;
    font-size : 16px;
    font-weight : 500;
    color : #AAAAAA;
  }
  .paging_box .tb_footer > ul > li > .pages.current {
    color: #fff;
  }
  .paging_box .tb_footer > ul > li > .pages.current::after{
    content : '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width : 28px;
    height: 28px;
    background-color: #222;
    border-radius: 100px;
    color : #ffffff;
    z-index: -1;
  }
  .paging_box .tb_footer > ul > li > .pages:hover {
    color : #fff;
  }
  .paging_box .tb_footer > ul > li > .pages:hover::after {
    content : '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width : 28px;
    height: 28px;
    background-color: #222;
    border-radius: 100px;
    z-index: -1;
  }

  .paging_box .tb_footer > ul > li > .page_prev[disabled] > #prev {
    fill : none;
    stroke : #DDDDDD;
    stroke-width:2;
    stroke-miterlimit : 10;
    stroke-linecap : square;
  }
  .paging_box .tb_footer > ul > li > .page_prev > #prev {
    stroke : #777777;
    fill : none;
    stroke-width:2;
    stroke-miterlimit : 10;
    stroke-linecap : square;
  }
  .paging_box .tb_footer > ul > li > .page_next[disabled] > #next {
    fill : none;
    stroke : #DDDDDD;
    stroke-width:2;
    stroke-miterlimit : 10;
    stroke-linecap : square;
  }
  .paging_box .tb_footer > ul > li > .page_next > #next{
    stroke : #777777;
    fill : none;
    stroke-width:2;
    stroke-miterlimit : 10;
    stroke-linecap : square;
  }

/* MyPage */

.mypage_common_wrap {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 100;
}
.mypage_common_wrap .mypage_common_inner{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  gap: 40px;
  width: 400px;
  margin: 0 auto;
  padding-top: 20px;
  padding-bottom: 40px;
  background: #fff;
  border-radius: 16px;
}

.mypage_common_wrap .mypage_common_inner .mypage_user_info{
  flex-grow: 1;
}

.mypage_common_wrap .mypage_common_inner .mypage_user_info .mypage_user_form .user_info_box {
  display: flex;
  align-items: center;
  flex-direction: column;
}
.mypage_common_wrap .mypage_common_inner .mypage_user_info .mypage_user_form .user_info_box .user_profiles {
  margin-bottom : 50px;
}
.mypage_common_inner .mypage_user_info .mypage_user_form .user_info_box .user_profiles label {
  display: flex;
  align-items: center;
  position : relative;
  width : 150px;
  height: 150px;
  border-radius : 50%;
  overflow: hidden;
}
.mypage_common_inner .mypage_user_info .mypage_user_form .user_info_box .user_profiles .profile_icon {
  position: absolute;
  bottom: 5px;
  right: 5px;
  display: flex;
  width: 36px;
  height: 36px;
  background: #fff;
  border: 2px solid #EEEEEE;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
}

.user_infos {
  width: 80%;
}

.user_infos .user_password {
  display: flex;
  border: 1px solid #eeeeee;
  width: 117px;
  padding: 7px 0;
  border-radius: 30px;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
}
.leftMenu {
  position: sticky;
  top : 0;
  left : 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 260px;
  padding : 24px 0 24px 30px;
  background: #fff;
  border : 1px solid #EEEEEE;
  border-radius : 16px;
}

.userInfo {
  display: flex;
  align-items: center;
  gap : 12px;
}

.userInfo .userprofile {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 48px;
  height: 48px;
  background : #fff;
  border-radius : 50%;
  overflow: hidden;
}


.userInfo .userprofile > img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.mypageMenu {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap : 16px;
}

.mypageMenu > a {
  font-size : 15px;
  font-weight : 500;
  color : #aaa;
}

.mypageMenu > a.active {
  color : #222;
}


.nickEdit {
  position: absolute;
  top: 33px;
  right: 3px;
  z-index: 10;
  cursor: pointer;
}

.user-edit-btns {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap : 16px;
}

#userinfoEdit {
  position: absolute;
  top : 16px;
  right : 16px;
  cursor: pointer;
}

.closePop {
  position: absolute;
  top: 24px;
  right : 24px;
  z-index: 10;
  cursor: pointer;
}

.profiles {
  border-radius: 100px;
  width : 128px;
  height: 128px;
  overflow: hidden;
  margin : 0 auto;
}

.profiles .profileImg {
  width : 100%;
  height : 100%;
}


.user_info .userProfile .profileImg {
  width: 100%;
  height: 100%;
  border-radius : 50%;
}