@charset "utf-8";


/* =========================================================
   Portfolio Board
========================================================= */

.portfolio_board {
    position: relative;
    width: 100%;
}


/* =========================================================
   Header
========================================================= */

.portfolio_board_head {
    position: relative;
    width: 100%;
    margin-bottom: 45px;
    text-align: center;
}

.portfolio_board_label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--color-primary, #f36c21);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: .04em;
}

.portfolio_board_label > span {
    display: block;
    width: 26px;
    height: 2px;
    background: var(--color-primary, #f36c21);
}

.portfolio_board_title {
    margin: 24px 0 0;
    color: #111;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -.04em;
}


/* =========================================================
   Category
========================================================= */

.portfolio_category_nav {
    position: relative;
    width: 100%;
    margin-bottom: 70px;
}

.portfolio_category_nav h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================================
   포트폴리오 목록
========================================================= */

#portfolio_board {
    position: relative;
    width: 100%;
}


/* 상단 타이틀 */
.portfolio_board_head {
    margin: 70px 0 45px;
    text-align: center;
}

.portfolio_board_label {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;

    color: var(--color-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.portfolio_board_label > span {
    display: block;
    width: 28px;
    height: 2px;
    background: var(--color-primary);
}

.portfolio_board_title {
    margin: 24px 0 0;

    color: var(--color-title);
    font-size: 42px;
    font-weight: 700;
    line-height: 1.35;
    letter-spacing: -0.04em;
}


/* =========================================================
   카테고리
========================================================= */

.portfolio_category_nav {
    margin-bottom: 60px;
}

.portfolio_category_nav h2 {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

#bo_cate_ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin: 0;
    padding: 0;
    list-style: none;
}

#bo_cate_ul li {
    margin: 0;
    padding: 0;
}

#bo_cate_ul a {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 44px;
    padding: 0 22px;

    border: 1px solid var(--color-line);
    border-radius: 999px;

    background: #fff;
    color: var(--color-subtext);

    font-size: 16px;
    font-weight: 500;
    line-height: 1;

    text-decoration: none;

    transition:
        color .3s ease,
        border-color .3s ease,
        background-color .3s ease;
}

#bo_cate_ul a:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

#bo_cate_ul #bo_cate_on {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}


/* =========================================================
   관리자 / 등록 버튼
========================================================= */

.portfolio_board_util {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 8px;

    margin-bottom: 24px;
}

.portfolio_util_btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 42px;
    padding: 0 18px;

    border: 1px solid var(--color-line);
    border-radius: 8px;

    background: #fff;
    color: #555;

    font-size: 14px;
    font-weight: 600;
    text-decoration: none;

    transition: .3s ease;
}

.portfolio_util_btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.portfolio_write_btn {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

.portfolio_write_btn:hover {
    border-color: var(--color-primary-dark);
    background: var(--color-primary-dark);
    color: #fff;
}


/* =========================================================
   관리자 전체선택
========================================================= */

.portfolio_all_check {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 24px;
    padding: 14px 16px;

    border: 1px solid var(--color-line);
    border-radius: 8px;
    background: var(--color-bg-light);
}

.portfolio_admin_buttons {
    display: flex;
    gap: 6px;
}

.portfolio_admin_buttons button {
    height: 36px;
    padding: 0 12px;

    border: 1px solid #ddd;
    border-radius: 6px;

    background: #fff;
    color: #555;

    font-size: 14px;
    cursor: pointer;
}


/* 체크박스 */
.selec_chk {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.chk_box {
    position: relative;
}

.chk_box input[type="checkbox"] + label {
    position: relative;

    display: inline-flex;
    align-items: center;

    min-height: 20px;
    padding-left: 28px;

    color: #555;
    font-size: 14px;
    cursor: pointer;
}

.chk_box input[type="checkbox"] + label span {
    position: absolute;
    top: 50%;
    left: 0;

    display: block;

    width: 18px;
    height: 18px;

    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;

    transform: translateY(-50%);
}

.chk_box input[type="checkbox"]:checked + label span {
    border-color: var(--color-primary);
    background:
        var(--color-primary)
        url(./img/chk.png)
        no-repeat center;
}


/* =========================================================
   포트폴리오 Grid
========================================================= */

.portfolio_list {
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 60px 24px;
    list-style: none;
}

.portfolio_item {
    min-width: 0;
}

.portfolio_item_inner {
    position: relative;
    width: 100%;
}


/* =========================================================
   썸네일
========================================================= */

.portfolio_thumb {
    position: relative;

    display: block;
    width: 100%;
    /* 대표이미지 기준 규격: 600 x 756 */
    aspect-ratio: 600 / 756;

    overflow: hidden;

    border: 1px solid #ececec;
    border-radius: 16px;
    background: #fff;

    text-decoration: none;
}

.portfolio_thumb img {
    display: block;

    width: 100%;
    height: 100%;

    /* 전체 대표이미지를 자르지 않고 표시 */
    object-fit: contain;
    object-position: center top;

    transition: opacity .25s ease;
}

.portfolio_thumb:hover img {
    transform: none;
    opacity: .97;
}

/*
 * PC 포트폴리오 미리보기
 * - 대표이미지(기준 600x756)의 약 1/3 높이만 기본 노출
 * - 이미지 비율/크기는 변형하지 않고 object-position만 이동
 * - 마우스를 올리면 상단에서 하단까지 천천히 훑어봄
 * - 터치 기기에서는 아래 규칙을 적용하지 않아 전체 이미지 노출 유지
 */
@media (min-width: 769px) and (hover: hover) {
    .portfolio_thumb {
        /* 756px 높이의 약 1/3 = 252px */
        aspect-ratio: 600 / 252;
    }

    .portfolio_thumb img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        transition:
            object-position 3s linear,
            opacity .25s ease;
        will-change: object-position;
    }

    .portfolio_thumb:hover img {
        object-position: center bottom;
        opacity: 1;
    }
}

/*
 * 모바일/터치 포트폴리오 미리보기
 * - PC보다 이미지 창을 조금 더 높게 노출
 * - 고정 3초 타이머를 사용하지 않음
 * - 실제 이미지의 남은 높이만큼 끝까지 이동한 뒤 transitionend에서 자동 복귀
 */
@media (max-width: 768px) {
    .portfolio_thumb {
        /* 기존 600 / 252보다 약 27% 높은 모바일 미리보기 창 */
        aspect-ratio: 600 / 320;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
        touch-action: manipulation;
    }

    .portfolio_thumb img {
        display: block;
        width: 100%;
        height: auto;
        max-width: none;
        object-fit: initial;
        object-position: initial;
        transform: translate3d(0, 0, 0);
        transition:
            transform var(--portfolio-preview-duration, 2.4s) linear,
            opacity .25s ease;
        will-change: transform;
    }

    .portfolio_thumb.is_touch_preview img {
        transform: translate3d(0, calc(-1 * var(--portfolio-preview-distance, 0px)), 0);
        opacity: 1;
    }

    .portfolio_thumb.is_touch_returning img {
        transform: translate3d(0, 0, 0);
        transition:
            transform var(--portfolio-return-duration, .8s) ease-in-out,
            opacity .25s ease;
    }
}

/* PC 포트폴리오 마우스오버 안내 */
.portfolio_hover_hint {
    display: none;
}

@media (min-width: 769px) and (hover: hover) {
    .portfolio_hover_hint {
        position: absolute;
        top: 14px;
        left: 14px;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        gap: 6px;
        min-height: 30px;
        padding: 5px 10px 5px 8px;
        border: 1px solid rgba(255, 255, 255, .48);
        border-radius: 999px;
        background: rgba(255, 255, 255, .70);
        box-shadow: 0 3px 12px rgba(0, 0, 0, .06);
        color: rgba(35, 35, 35, .55);
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: -0.02em;
        pointer-events: none;
        opacity: .80;
        transition: opacity .18s ease, visibility .18s ease;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    .portfolio_hover_hint_icon {
        display: flex;
        width: 18px;
        height: 18px;
        align-items: center;
        justify-content: center;
    }

    .portfolio_hover_hint_icon svg {
        display: block;
        width: 18px;
        height: 18px;
    }

    .portfolio_thumb:hover .portfolio_hover_hint {
        visibility: hidden;
        opacity: 0;
    }
}

/* 모바일 포트폴리오 터치 미리보기 안내 */
.portfolio_touch_hint {
    display: none;
}

@media (max-width: 768px) {
    .portfolio_touch_hint {
        position: absolute;
        top: 14px;
        left: 14px;
        z-index: 3;
        display: inline-flex;
        align-items: center;
        gap: 5px;
        min-height: 30px;
        padding: 5px 9px 5px 7px;
        border: 1px solid rgba(255, 255, 255, .52);
        border-radius: 999px;
        background: rgba(255, 255, 255, .72);
        box-shadow: 0 3px 12px rgba(0, 0, 0, .07);
        color: rgba(35, 35, 35, .58);
        font-size: 11px;
        font-weight: 600;
        line-height: 1;
        letter-spacing: -0.02em;
        pointer-events: none;
        opacity: .82;
        transition: opacity .18s ease, visibility .18s ease;
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    .portfolio_touch_hint_icon {
        display: flex;
        width: 18px;
        height: 18px;
        align-items: center;
        justify-content: center;
    }

    .portfolio_touch_hint_icon svg {
        display: block;
        width: 18px;
        height: 18px;
    }

    .portfolio_touch_hint_text {
        position: relative;
        top: .5px;
    }

    .portfolio_thumb.is_touch_preview .portfolio_touch_hint,
    .portfolio_thumb.is_touch_returning .portfolio_touch_hint {
        visibility: hidden;
        opacity: 0;
    }
}

.portfolio_no_image {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    height: 100%;

    color: #aaa;
    font-size: 16px;
    font-weight: 500;
}


/* =========================================================
   정보
========================================================= */

.portfolio_info {
    padding: 18px 4px 0;
}

.portfolio_category {
    display: inline-block;

    margin-bottom: 7px;

    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;

    text-decoration: none;
}

.portfolio_title_wrap {
    width: 100%;
}

.portfolio_title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    width: 100%;

    color: var(--color-title);
    font-size: 20px;
    font-weight: 600;
    line-height: 1.45;
    letter-spacing: -0.02em;

    text-decoration: none;

    transition: color .3s ease;
}

.portfolio_title > span:first-child {
    min-width: 0;
}

.portfolio_site_btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    min-height: 38px;
    padding: 0 14px;
    border: 1px solid var(--color-primary);
    border-radius: 999px;
    background: #fff;
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    transition:
        background-color .25s ease,
        color .25s ease,
        border-color .25s ease;
}

.portfolio_site_btn_arrow {
    font-size: 15px;
    line-height: 1;
    transition: transform .25s ease;
}

.portfolio_site_btn:hover,
.portfolio_site_btn:focus {
    border-color: var(--color-primary);
    background: var(--color-primary);
    color: #fff;
}

.portfolio_site_btn:hover .portfolio_site_btn_arrow,
.portfolio_site_btn:focus .portfolio_site_btn_arrow {
    transform: translateX(3px);
}


/* =========================================================
   개별 관리자 기능
========================================================= */

.portfolio_item_check {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 5;

    width: 30px;
    height: 30px;

    border-radius: 6px;
    background: rgba(255,255,255,.9);
}

.portfolio_item_check label {
    display: block !important;
    width: 30px;
    height: 30px;
    min-height: 0 !important;
    padding: 0 !important;
}

.portfolio_item_check label span {
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}

.portfolio_admin {
    margin-top: 12px;
}

.portfolio_edit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    height: 32px;
    padding: 0 12px;

    border: 1px solid #ddd;
    border-radius: 6px;

    background: #fff;
    color: #777;

    font-size: 14px;
    font-weight: 500;
    text-decoration: none;

    transition: .3s ease;
}

.portfolio_edit:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}


/* =========================================================
   Empty
========================================================= */

.portfolio_empty {
    padding: 100px 20px;

    color: var(--color-muted);
    font-size: 16px;
    text-align: center;
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 1024px) {

    .portfolio_board_head {
        margin-top: 60px;
    }

    .portfolio_board_title {
        font-size: 36px;
    }

    .portfolio_category_nav {
        margin-bottom: 50px;
    }

    .portfolio_list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 50px 20px;
    }

}


@media (max-width: 768px) {

    .portfolio_board_head {
        margin: 50px 0 35px;
    }

    .portfolio_board_title {
        margin-top: 20px;
        font-size: 30px;
    }

    .portfolio_category_nav {
        margin-bottom: 40px;
    }

    #bo_cate_ul {
        gap: 8px;
    }

    #bo_cate_ul a {
        min-height: 40px;
        padding: 0 16px;
        font-size: 14px;
    }

    .portfolio_list {
        gap: 40px 16px;
    }

    .portfolio_title {
        font-size: 18px;
    }

}


@media (max-width: 600px) {

    .portfolio_list {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .portfolio_thumb {
        border-radius: 12px;
    }

    .portfolio_info {
        padding-top: 14px;
    }

    .portfolio_title {
        font-size: 18px;
    }

    .portfolio_all_check {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

}


/* =========================================================
   Portfolio Search
========================================================= */

.portfolio_search {
    width: 100%;
    max-width: 560px;
    margin: 70px auto 100px;
}

.portfolio_search form {
    display: flex;
    align-items: center;

    width: 100%;
    height: 50px;

    border: 1px solid var(--color-line);
    border-radius: 8px;
    background: #fff;

    overflow: hidden;
}

.portfolio_search select {
    flex: 0 0 120px;

    height: 100%;
    padding: 0 14px;

    border: 0;
    border-right: 1px solid var(--color-line);
    background: #fff;

    color: var(--color-body);
    font-size: 14px;

    outline: none;
}

.portfolio_search_input {
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;

    padding: 0 16px;

    border: 0;
    background: transparent;

    color: var(--color-body);
    font-size: 15px;

    outline: none;
}

.portfolio_search_input::placeholder {
    color: var(--color-muted);
}

.portfolio_search_btn {
    flex: 0 0 72px;

    height: 100%;

    border: 0;
    background: var(--color-primary);

    color: #fff;
    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition: background-color .3s ease;
}

.portfolio_search_btn:hover {
    background: var(--color-primary-dark);
}


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

    .portfolio_search {
        margin: 50px auto 70px;
    }

    .portfolio_search form {
        height: 48px;
    }

    .portfolio_search select {
        flex-basis: 105px;
        padding: 0 10px;
    }

    .portfolio_search_input {
        padding: 0 12px;
        font-size: 14px;
    }

    .portfolio_search_btn {
        flex-basis: 60px;
    }

}



/* =========================================================
   Portfolio Write
========================================================= */

.portfolio_write {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 100px 0;
}


/* Header */
.portfolio_write_head {
    margin-bottom: 50px;
    text-align: center;
}

.portfolio_write_label {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    color: var(--color-primary);
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}

.portfolio_write_label::before {
    display: block;

    width: 24px;
    height: 2px;

    background: var(--color-primary);

    content: "";
}

.portfolio_write_title {
    margin: 20px 0 0;

    color: var(--color-title);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -.03em;
}

.portfolio_write_desc {
    margin: 12px 0 0;

    color: var(--color-subtext);
    font-size: 16px;
    line-height: 1.6;
}


/* Form */
.portfolio_write_form {
    padding: 40px;

    border: 1px solid var(--color-line);
    border-radius: 16px;

    background: #fff;
}

.portfolio_write_field + .portfolio_write_field {
    margin-top: 32px;
}

.portfolio_write_field_label {
    display: block;

    margin-bottom: 10px;

    color: var(--color-title);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
}

.portfolio_write_field_label strong {
    margin-left: 4px;

    color: var(--color-primary);
    font-size: 14px;
    font-weight: 600;
}


/* Input */
.portfolio_write_input,
.portfolio_write_select {
    display: block;

    width: 100%;
    height: 52px;

    padding: 0 16px;

    border: 1px solid var(--color-line);
    border-radius: 8px;

    background: #fff;

    color: var(--color-body);
    font-size: 16px;

    outline: none;

    transition:
        border-color .3s ease,
        box-shadow .3s ease;
}

.portfolio_write_input:focus,
.portfolio_write_select:focus {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(243,108,33,.08);
}

.portfolio_write_input::placeholder {
    color: var(--color-muted);
}


/* Help */
.portfolio_write_help {
    margin: 9px 0 0;

    color: var(--color-subtext);
    font-size: 14px;
    line-height: 1.6;
}


/* =========================================================
   Image Preview
========================================================= */

.portfolio_image_preview {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 100%;
    aspect-ratio: 4 / 3;

    overflow: hidden;

    border: 1px solid var(--color-line);
    border-radius: 12px;

    background: var(--color-bg-light);
}

.portfolio_image_preview img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;
}

.portfolio_preview_empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;

    color: var(--color-muted);
    font-size: 14px;
}

.portfolio_preview_empty i {
    font-size: 28px;
}


/* File */
.portfolio_filebox {
    display: flex;

    width: 100%;
    height: 50px;

    margin-top: 14px;
}

.portfolio_file_name {
    flex: 1 1 auto;
    min-width: 0;

    height: 100%;
    padding: 0 15px;

    border: 1px solid var(--color-line);
    border-right: 0;
    border-radius: 8px 0 0 8px;

    background: #fff;

    color: var(--color-body);
    font-size: 14px;

    outline: none;
}

.portfolio_file_btn {
    flex: 0 0 120px;

    display: flex;
    align-items: center;
    justify-content: center;

    height: 100%;

    border-radius: 0 8px 8px 0;

    background: var(--color-title);
    color: #fff;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;

    transition: background-color .3s ease;
}

.portfolio_file_btn:hover {
    background: var(--color-primary);
}

.portfolio_file_input {
    position: absolute;

    width: 1px;
    height: 1px;

    margin: -1px;
    padding: 0;

    overflow: hidden;

    clip: rect(0,0,0,0);

    border: 0;
}


/* 기존 이미지 삭제 */
.portfolio_file_delete {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    margin-top: 14px;

    color: var(--color-subtext);
    font-size: 14px;

    cursor: pointer;
}

.portfolio_file_delete input {
    width: 16px;
    height: 16px;

    accent-color: var(--color-primary);
}


/* =========================================================
   Buttons
========================================================= */

.portfolio_write_buttons {
    display: flex;
    justify-content: center;
    gap: 8px;

    margin-top: 30px;
}

.portfolio_write_cancel,
.portfolio_write_submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-width: 130px;
    height: 50px;
    padding: 0 24px;

    border-radius: 8px;

    font-size: 15px;
    font-weight: 600;

    text-decoration: none;

    cursor: pointer;

    transition: .3s ease;
}

.portfolio_write_cancel {
    border: 1px solid var(--color-line);

    background: #fff;
    color: var(--color-subtext);
}

.portfolio_write_cancel:hover {
    border-color: #bbb;
    color: var(--color-title);
}

.portfolio_write_submit {
    border: 1px solid var(--color-primary);

    background: var(--color-primary);
    color: #fff;
}

.portfolio_write_submit:hover {
    border-color: var(--color-primary-dark);
    background: var(--color-primary-dark);
}


/* =========================================================
   Responsive
========================================================= */

@media (max-width: 768px) {

    .portfolio_write {
        padding: 70px 0;
    }

    .portfolio_write_head {
        margin-bottom: 35px;
    }

    .portfolio_write_title {
        font-size: 30px;
    }

    .portfolio_write_form {
        padding: 28px 24px;
    }

    .portfolio_write_field + .portfolio_write_field {
        margin-top: 28px;
    }

}


@media (max-width: 480px) {

    .portfolio_write {
        padding: 50px 0;
    }

    .portfolio_write_title {
        font-size: 26px;
    }

    .portfolio_write_form {
        padding: 24px 18px;

        border-radius: 12px;
    }

    .portfolio_file_btn {
        flex-basis: 100px;
    }

    .portfolio_write_buttons {
        width: 100%;
    }

    .portfolio_write_cancel,
    .portfolio_write_submit {
        flex: 1 1 0;
        min-width: 0;
        padding: 0 16px;
    }

}





/* 게시판 쓰기 */
#bo_w #wr_email, #bo_w #wr_homepage, #bo_w #wr_subject {width:100%}

#char_count_desc {display:block;margin:0 0 5px;padding:0}
#char_count_wrap {margin:5px 0 0;text-align:right}
#char_count {font-weight:bold}

#wr_email, #wr_homepage, #wr_subject, .wr_link {width:100%}


/* 게시판 읽기 */
#bo_v {padding:20px 0 0;background:#fff}
#bo_v>header {padding:0 15px;border-bottom:1px solid #eee}
#bo_v_table {padding:10px;color:#999;font-size:0.9em;font-weight:bold}

#bo_v_title {}
.bo_v_cate {display:inline-block;background:#e2eaf6;color:#3a8afd;line-height:20px;border-radius:5px;padding:0 5px;font-weight:bold}
.bo_v_tit {display:block;font-size:1.5em;margin:10px 0 0}

#bo_v_info {padding:15px 0;color:#8e8e8e;line-height:20px}
#bo_v_info h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#bo_v_info strong {display:inline-block;font-weight:normal;margin:0 5px}
#bo_v_info .profile_img img {border-radius:50%;vertical-align:top}
#bo_v_info .icon_view {display:inline-block;background:url('./img/icon_view.png') no-repeat 50% 50%;background-size:80%;height:15px;width:20px;overflow:hidden;text-indent:-999px;vertical-align:middle;margin:0 3px 0 5px}
#bo_v_info .icon_comment {display:inline-block;background:url('./img/icon_comment.png') no-repeat 50% 50%;background-size:70%;height:15px;width:20px;overflow:hidden;text-indent:-999px;vertical-align:middle;margin:0 3px 0 5px}

#bo_v_file {padding:0 15px;margin-bottom:20px}
#bo_v_file h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_v_file ul {margin:0;list-style:none}
#bo_v_file li {padding:15px;position:relative;margin:10px 0;border:1px solid #dfdfdf}
#bo_v_file li i {float:left;color:#b2b2b2;font-size:1.6em;margin-right:20px}
#bo_v_file a {float:left;display:block;margin-right:10px;text-decoration:none;word-wrap:break-word;color:#000}

@media (max-width:450px){
	#bo_v_file a {float:inherit}
}

#bo_v_file a:focus, #bo_v_file li:hover a, #bo_v_file a:active {text-decoration:underline;color:#3a8afd}
#bo_v_file img {float:left;margin:0 10px 0 0}
#bo_v_file .bo_v_file_cnt {color:#b2b2b2;font-size:0.92em}
#bo_v_file li:hover {border-color:#bed4f4;color:#bed4f4}
#bo_v_file li:hover i {color:#3a8afd}
#bo_v_file li:hover .bo_v_file_cnt {color:#99c2fc}

#bo_v_link {padding:0 15px;margin-bottom:20px}
#bo_v_link h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#bo_v_file ul {margin:0;list-style:none}
#bo_v_link li {padding:15px;position:relative;margin:10px 0;border:1px solid #dfdfdf}
#bo_v_link li i {float:left;color:#b2b2b2;font-size:1.6em;margin-right:20px}
#bo_v_link a {float:left;display:block;margin-right:10px;text-decoration:none;word-wrap:break-word;color:#000}
#bo_v_link a:focus, #bo_v_link li:hover a, #bo_v_link a:active {text-decoration:underline;color:#3a8afd}
#bo_v_link .bo_v_link_cnt {color:#b2b2b2;font-size:0.92em}
#bo_v_link li:hover {border-color:#bed4f4;color:#bed4f4}
#bo_v_link li:hover i {color:#3a8afd}
#bo_v_link li:hover .bo_v_link_cnt {color:#99c2fc}

#bo_v_top {margin:10px 15px}
#bo_v_top:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_top h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#bo_v_top ul {margin:0;padding:0;list-style:none}
#bo_v_top ul:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_top ul li {display:inline-block}
.bo_v_left {float:left}
.bo_v_right {float:right}

#bo_v_bot {padding:0 10px}
#bo_v_bot:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_bot h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#bo_v_bot ul {margin:0;padding:0;list-style:none}

.bo_v_nb {position:relative;margin:10px 0 0;border-top:1px solid #e4e4ec;border-bottom:1px solid #e4e4ec;text-align:left}
.bo_v_nb:after {display:block;visibility:hidden;clear:both;content:""}
.bo_v_nb li {}
.bo_v_nb li a {display:block;padding:15px;color:#777}
.bo_v_nb li a i {color:#c5cfdd}
.bo_v_nb li.bo_v_prev {border-bottom:1px solid #f8f8f8}
.bo_v_nb li.bo_v_next {}


#bo_v_atc {min-height:200px;padding:15px}
#bo_v_atc_title {margin:0;padding:0;height:0;overflow:hidden}

#bo_v_img {width:100%;overflow:hidden;zoom:1}
#bo_v_img:after {display:block;visibility:hidden;clear:both;content:""}
#bo_v_img a.view_image {display:block}
#bo_v_img img {margin-bottom:15px;max-width:100%;height:auto}

#bo_v_con {min-height:200px;margin-bottom:20px;width:100%;font-size:1.250em;line-height:1.7em;word-break:break-all;overflow:hidden}
#bo_v_con a {color:#000;text-decoration:underline}
#bo_v_con img {max-width:100%;height:auto}

#bo_v_act {margin-bottom:30px;text-align:center}
#bo_v_act .bo_v_act_gng {position:relative}
#bo_v_act a {margin-right:5px;vertical-align:middle;color:#4a5158}
#bo_v_act a:hover {background-color:#fff;color:#ff484f;border-color:#ff484f}
#bo_v_act i {font-size:1.4em;margin-right:5px}
#bo_v_act_good, #bo_v_act_nogood {display:none;position:absolute;top:30px;left:0;z-index:9999;padding:10px 0;width:165px;background:#ff3061;color:#fff;text-align:center}
#bo_v_act .bo_v_good {display:inline-block;border:1px solid #dedede;width:70px;line-height:46px;border-radius:30px}
#bo_v_act .bo_v_nogood {display:inline-block;border:1px solid #dedede;width:70px;line-height:46px;border-radius:30px}

/* 게시판 댓글 */
#bo_vc {background:#f8f8f8;padding:15px}
#bo_vc h2.bo_vc_tit {}
#bo_vc h2 span {color:#3a8afd}
#bo_vc article {}
#bo_vc article .comment_inner{margin:15px 0 0;padding:15px;background:#fff;border-bottom:1px solid #e4e4ec}
#bo_vc article h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#bo_vc header {position:relative;padding:0;line-height:20px;padding-right:18px}
#bo_vc .profile_img {vertical-align:text-bottom}
#bo_vc .profile_img img {width:23px;height:23px;border-radius:50%}
#bo_vc header .bo_vl_opt {position:absolute;top:-5px;right:-8px}
.comment_inner .bo_vc_w{margin-top:10px;padding-top:15px}

#bo_vc .sv_member, #bo_vc .sv_guest {font-weight:bold}
.bo_vc_hdinfo {display:inline-block;color:#777}
#bo_vc h1 {width:0;height:0;font-size:0;line-height:0;overflow:hidden}
#bo_vc .cmt_contents {margin:10px 0 0;border-radius:5px;line-height:1.8em}
#bo_vc .cmt_contents p {font-size:1.083em}
#bo_vc p a {text-decoration:underline}
#bo_vc p a.s_cmt {text-decoration:underline;color:#ed6479}
#bo_vc_empty {margin:0;padding:15px !important;text-align:center}
#bo_vc #bo_vc_winfo {float:left}
#bo_vc footer {zoom:1}
#bo_vc footer:after {display:block;visibility:hidden;clear:both;content:""}

.bo_vc_act {display:none;position:absolute;right:0;top:40px;width:58px;text-align:center;border:1px solid #b8bfc4;margin:0;list-style:none;background:#fff;zoom:1;z-index:9999}
.bo_vc_act:before {content:"";position:absolute;top:-8px;right:5px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #b8bfc4 transparent}
.bo_vc_act:after {content:"";position:absolute;top:-6px;right:5px;width:0;height:0;border-style:solid;border-width:0 6px 8px 6px;border-color:transparent transparent #fff transparent}
.bo_vc_act li {border-bottom:1px solid #f0f0f0}
.bo_vc_act li:last-child {border-bottom:0}
.bo_vc_act li a {display:inline-block;padding:10px 15px}
.bo_vc_act li a:hover {color:#3a8afd}

#bo_vc_w h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.bo_vc_w {display:block;position:relative;padding:0 15px 15px;background:#f8f8f8}
.bo_vc_w:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_w #char_cnt {display:block;margin:0 0 5px}
.bo_vc_w textarea {width:100%;height:120px;padding:5px;border:1px solid #d0d3db;background:#fff;color:#000;vertical-align:middle}
#wr_secret {}

.bo_vc_w_info {margin:10px 0}
.bo_vc_w_info:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_w_info .frm_input {float:left;width:49.5%;margin:0 0 5px 0}
.bo_vc_w_info #wr_password {float:right}
.bo_vc_w_info #captcha {display:block;clear:both}
.bo_vc_w .btn_confirm {margin-top:5px;clear:both}
.bo_vc_w .icon_lock {display:inline-block;font-size:1em;vertical-align:baseline}
.bo_vc_w .btn_submit {height:50px;width:100%;padding:0 20px;border-radius:3px;font-weight:bold;font-size:1.083em}
.bo_vc_w_wr:after {display:block;visibility:hidden;clear:both;content:""}
.bo_vc_w .bo_vc_secret {display:block}

#bo_vc_send_sns {display:block;margin-bottom:10px}
#bo_vc_sns {display:block;margin:0;padding:0;list-style:none;zoom:1}
#bo_vc_sns:after {display:block;visibility:hidden;clear:both;content:""}
#bo_vc_sns li {float:left;margin:0 5px 0 0}
#bo_vc_sns .sns_li_f {border-radius:3px;background:#3a589b;height:40px;padding: 10px 0 10px 10px}
#bo_vc_sns .sns_li_t {border-radius:3px;background:#00aced;height:40px;padding: 10px 0 10px 10px}
#bo_vc_sns .sns_li_off {background:#bbb}
#bo_vc_sns a {display:inline-block;padding:0 15px 0 5px}
#bo_vc_sns input {margin:0 5px 0 0}

/*글쓰기*/
#bo_w {padding:15px}
#bo_w .bo_v_option li {display:inline-block;float:left;margin:0 5px 0 0}
#bo_w .bo_v_option li label {vertical-align:baseline}
#bo_w .bo_v_option:after {display:block;visibility:hidden;clear:both;content:""}
#bo_w .bo_w_select select {border:1px solid #d0d3db;background:#fff;width:100%}
#bo_w .bo_w_link label {position:absolute;top:1px;left:1px;border-radius:3px 0 0 3px;width:45px;height:43px;line-height:43px;font-size:1.2em;text-align:center;color:#b2b2b2}
#bo_w .bo_w_link .frm_input {padding-left:50px}
#bo_w .bo_w_flie .lb_icon {position:absolute;top:0px;left:0px;border-radius:3px 0 0 3px;width:45px;height:43px;line-height:43px;font-size:1.2em;text-align:center;color:#b2b2b2}
#bo_w .bo_w_flie .frm_file {padding-left:50px}
#bo_w .bo_w_flie .file_wr {position:relative;color:#000;vertical-align:middle;margin:0}
#bo_w .bo_w_flie .frm_input {margin:5px 0 0}

.filebox .btn_file {display:inline-block;position:absolute;right:8px;top:8px;border:1px solid #3a8afd;border-radius:3px;width:60px;height:30px;color:#3a8afd;font-size:1em;line-height:30px;font-weight:bold;background:#fff;text-align:center;vertical-align:middle;cursor:pointer}
.filebox .fileName {display:inline-block;position:relative;width:100%;height:45px;padding-left:45px;line-height:30px;border:1px solid #d0d3db;background-color:#fff;color:red;vertical-align:middle;border-radius:0}
.filebox input[type="file"] {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

#bo_w .btn_confirm {text-align:center;margin:20px 0}
#bo_w .btn_submit {width:49%;height:45px;padding:0 30px;font-weight:bold;font-size:1.083em}
#bo_w .btn_cancel {width:49%;line-height:45px;height:45px;padding:0 30px;font-weight:bold;font-size:1.083em;background:#fff;border-radius:3px;border:1px solid #dcdcdc}
/* 포트폴리오 사이트 이동은 사이트 보기 버튼으로만 제공합니다. */
.portfolio_category {
    cursor: default;
}

@media (max-width: 600px) {
    .portfolio_title {
        gap: 12px;
    }

    .portfolio_title > span:first-child {
        flex: 1 1 auto;
    }

    .portfolio_site_btn {
        min-height: 36px;
        padding: 0 12px;
        font-size: 12px;
    }
}