@charset "utf-8";
/* *******************************************************
 * filename : content_responsive.css
 * description : 서브페이지 컨텐츠 반응형 CSS
 * date : 2022-03-14
******************************************************** */


/* ******************  서브공통 ********************** */
/* -------- 공통 스크롤바  -------- */
@media all and (max-width: 1220px) {
    .custom-scrollbar-wrapper .scroll-object {
        max-width: 100%;
    }
}

@media all and (max-width: 800px) {
    .custom-scrollbar-wrapper {
        position: relative;
        margin-right: calc(-1 * var(--area-padding));
        cursor: move
    }

    .custom-scrollbar-wrapper .scroll-object {
        max-width: none;
        width: 800px;
    }

    .cm-scroll-drag-guide {
        display: flex;
        justify-content: flex-end;
        margin-right: var(--area-padding);
    }

    .cm-scroll-drag-guide .cm-scroll-drag-inner {
        position: relative;
        width: 50px;
        height: 50px;
    }

    .cm-scroll-drag-guide .cm-scroll-drag-inner:before {
        position: absolute;
        top: 4px;
        right: 0;
        width: 100%;
        height: 3px;
        background-color: #ccc;
        content: "";
        border-radius: 5px;
    }

    .cm-scroll-drag-guide .drag-tail {
        position: absolute;
        z-index: 1;
        left: 0px;
        top: 3px;
        animation: moveScrollAni 3s both infinite;
    }

    .cm-scroll-drag-guide .drag-tail .tail {
        display: block;
        width: 25px;
        height: 5px;
        background-color: rgba(0, 0, 0, 0.7);
        border-radius: 5px;
        opacity: 1;
    }

    .cm-scroll-drag-guide .drag-tail .hand-icon {
        font-size: 30px;
        color: #aaa
    }

    @keyframes moveScrollAni {
        0%, 10% {
            left: 0;
            margin-left: 0px;
        }
        50% {
            left: 100%;
            margin-left: -25px;
        }
        100% {
            left: 0;
            margin-left: 0px;
        }
    }
}

/* -------- 공통 :: 레이아웃 -------- */
@media all and (max-width: 800px) {
    .sub-page {
        display: block;
    }

    #rightContent {
        width: 100%;
    }
}

/* -------- 공통 :: 탭 -------- */
@media all and (max-width: 1220px) {
    .sub-tab-list-style .area {
        padding: 0
    }
}

@media all and (max-width: 1024px) {
    /* Tab Fixed Move*/
    .sub-tab-list-style.top-fixed {
        top: 80px;
    }
}

@media all and ( max-width: 800px ) {
    /* Tab 공통 스타일 */
    .sub-tab-wrapper-style,
    .sub-tab-list-style.top-fixed,
    .sub-tab-list-style ul li a {
        height: 40px;
    }

    .sub-tab-list-style ul li a em {
        font-size: 13px
    }

    /* Tab Fixed Move*/
    /* Mobile Tab Drop Menu */
    .sub-drop-menu-style {
        position: relative;
    }

    .sub-drop-open-btn-style {
        display: block;
        position: relative;
        padding: 0 15px;
        height: 40px;
        line-height: 40px;
        font-size: 15px;
        background-color: var(--main-color);
        box-sizing: border-box;
    }

    .sub-drop-open-btn-style span {
        color: #fff;
    }

    .sub-drop-open-btn-style .arrow {
        color: #fff;
        position: absolute;
        top: 50%;
        right: 15px;
        margin-top: -7px
    }

    .sub-drop-open-btn-style.open .arrow {
        transform: rotate(180deg)
    }

    .sub-drop-menu-style ul {
        display: none;
        margin: 0;
        height: auto;
        position: absolute;
        top: 100%;
        left: 0px;
        right: 0px;
        background-color: #fff;
        border: 1px solid #ddd;
        border-top: 0;
        z-index: 11;
        box-sizing: border-box;
    }

    .sub-drop-menu-style ul li {
        position: static;
        display: block;
        float: none;
        border: 0;
        border-top: 1px solid #eee;
        width: auto;
        background-color: transparent
    }

    .sub-drop-menu-style ul li:first-child {
        border-top: 0;
        border-left: 0
    }

    .sub-drop-menu-style ul li a {
        display: block;
        width: auto;
        height: auto;
        padding: 10px 15px;
        border: 0;
    }

    .sub-drop-menu-style ul li a em {
        font-size: 13px;
    }

    .sub-drop-menu-style ul li.selected,
    .sub-drop-menu-style ul li.selected a {
        background-color: transparent;
        border: 0;
    }

    .sub-drop-menu-style ul li.selected a em {
        color: var(--main-color);
        font-weight: 600;
    }
}

@media all and (max-width: 480px) {
    /* Tab Fixed Move*/
    .sub-tab-list-style.top-fixed {
        top: 60px;
    }
}


/* ******************  열린마당 ********************** */
@media all and (max-width: 800px) {
    .intro-con01 .txt {
        font-size: 3rem;
        padding: 3rem;
    }

    .intro-con02-list li {
        width: 100%;
    }

    .intro-con02-list li .img-box {
        padding-top: 56%;
    }

    .intro-con03 {
        display: block;
    }

    .intro-con03 .txt-box {
        width: 100%;
        padding: 4rem 3rem;
    }

    .intro-con03 .txt-box dt {
        font-size: 3rem;
    }

    .intro-con03 .img-box {
        width: 100%;
        height: 40rem;
    }
}

/* ******************  불법자재신고 ********************** */
/* ****** 신고접수 ****** */
@media all and (max-width: 800px) {
    .inquiry-agreement-con {
        padding: 2rem 2.5rem;
    }

    /* 작성 */
    .inquiry-write-top-box {
        flex-direction: column;
        align-items: flex-start;
    }

    .inquiry-essential-txt {
        width: 100%;
        text-align: right;
        margin-top: 1rem;
    }

    .inquiry-write-form01 .cm-write-item {
        display: block;
    }

    .inquiry-write-form01 .cm-write-item .write-tit-box {
        width: 100%;
        margin-bottom: 1.5rem;
        padding-top: 0;
    }

    .inquiry-write-form01 .cm-write-item .cm-fieldset-box {
        width: 100%;
    }

    /* 공통 :: 입력폼 */
    .cm-fieldset-box .write-input {
        height: 5.4rem;
        padding: 0 1.5rem;
        font-size: 1.6rem;
    }

    .cm-fieldset-box .write-textarea {
        font-size: 1.6rem;
    }

    /* 공통 :: 체크박스 */
    .custom-checkbox-item-box .custom-checkbox-item {
        width: 25%;
    }

    .custom-checkbox-item label {
        font-size: 1.6rem;
    }

    .custom-checkbox-item label:after {
        top: 0.1rem;
    }

    /*	커스텀 셀렉트 */
    .gs-custom-selectbox .select-style {
        line-height: 5.2rem;
        font-size: 1.6rem;
        padding-left: 1.5rem;
    }

    .gs-custom-selectbox .select-style:after {
        font-size: 2rem;
    }

    .gs-custom-selectbox .select-options li {
        padding: 1rem 1.5rem;
    }

    /* 첨부파일 */
    .file-list-con {
        gap: 1rem
    }

    .file-list-con .file-box {
        width: calc(20% - 0.8rem);
    }

    .file-img-label-bx .member-img .upload-trigger p {
        font-size: 1.6rem;
    }

    /* 공통 버튼 */
    .cm-btn-controls a {
        height: 5.4rem;
        font-size: 1.8rem;
    }

    .cm-btn-controls a.long {
        height: 6rem;
    }

    /* 상세 팝업 */
    .report-modal-content {
        width: auto;
        margin: 50px 15px
    }

    .report-view-top {
        padding: 0 3rem;
    }

    .report-view-top .modal-close-btn {
        right: 2rem;
        font-size: 3rem;
    }

    .report-view-tit {
        flex-wrap: wrap;
    }

    .report-view-tit span {
        font-size: 1.6rem;
        width: 9rem;
        height: 3rem;
        line-height: 3rem;
    }

    .report-view-tit strong {
        font-size: 2.4rem;
    }

    .report-view-tit p {
        font-size: 2rem;
        width: 100%;
        margin-left: 0;
        padding-top: 1rem;
    }

    .report-view-con {
        padding: 2rem;
    }

    .report-progress-list li {
        width: 25%;
    }

    .report-progress-list li:before {
        top: 6.6rem;
    }

    .report-progress-list li .icon {
        width: 5rem;
        height: 5rem;
        font-size: 2.4rem;
    }

    .report-progress-list li strong {
        font-size: 1.6rem;
    }

    .report-progress-con {
        padding: 4rem 2rem 2rem;
    }

    .report-progress-txt-box strong {
        font-size: 1.8rem;
    }

    .report-view-con .inquiry-write-form01 {
        gap: 0 2rem
    }

    .report-view-con .inquiry-write-form01 .cm-write-item {
        width: 100%;
    }

    .cm-file-download {
        flex-wrap: wrap;
        gap: 1.2rem
    }

    .cm-file-download li {
        width: calc(33.333% - 0.8rem);
    }
}

@media all and (max-width: 480px) {
    /* 공통 :: 체크박스 */
    .custom-checkbox-item-box .custom-checkbox-item {
        width: 50%;
    }

    /* 첨부파일 */
    .file-list-con {
        flex-wrap: wrap;
        gap: 1.2rem
    }

    .file-list-con .file-box {
        width: calc(33.333% - 0.8rem);
    }
}

/* ****** 신고조회 ****** */
@media all and (max-width: 800px) {
    /* 공통 검색 박스 */
    .cm-search-row {
        display: block;
    }

    .cm-search-row .cm-search-item {
        width: 100%;
    }

    .cm-search-row .cm-search-item dt {
        width: 9rem;
        padding: 1rem;
    }

    .cm-search-row .cm-search-item dd {
        width: calc(100% - 9rem);
    }

    .cm-search-item .cm-fieldset-box.seach-fieldset {
        display: block;
    }

    .cm-search-item .cm-fieldset-box.seach-fieldset .custom-checkbox-item-box {
        padding-bottom: 1rem;
    }

    .cm-search-item .cm-fieldset-box.seach-fieldset .write-input {
        width: calc(100% - 11rem);
    }

    /* 신고조회 리스트 */
    .cm-top-list-box:not(.no-initial) {
        flex-direction: initial;
    }

    .cm-top-list-box:not(.no-initial) .total-list-con {
        width: 100%;
        margin-top: 2rem;
    }

    .bbs-list-tbl {
        border-top: 1px solid #d7d7d7;
    }

    .bbs-list-tbl, .bbs-list-row, .bbs-list-row .column, .bbs-list-tbody {
        display: block;
    }

    .bbs-list-col-group,
    .bbs-list-head {
        display: none;
        position: absolute;
        top: -1000em;
        left: -1000em;
    }

    .bbs-list-row {
        position: relative;
        width: auto;
        padding: 1rem 0;
        border-bottom: 1px solid #d9d9d9;
    }

    .bbs-list-row .column {
        border-bottom: 0;
        text-align: left;
        height: auto;
        padding: 1rem 1.5rem;
    }

    .bbs-list-row .column.bbs-m-display-none {
        display: none;
    }

    .bbs-list-row .column:before {
        padding-right: 1rem;
        color: #878E9A;
        content: attr(data-label);
        top: 0;
    }

    .bbs-list-row .column[data-label=""]:before {
        padding-right: 0;
        display: none;
    }

    .bbs-list-row .bbs-title strong {
        display: block;
        padding-top: 1rem;
    }

    .bbs-list-row .bbs-title .bbs-subject-con {
        display: block;
    }

    .bbs-list-row .state span {
        display: inline-block;
        width: 10rem;
    }

    .bbs-list-row .bbs-title .notice-tit {
        display: block;
        text-align: center;
        margin-top: 1rem;
    }

    .bbs-list-row .date-column i {
        display: none;
    }
}

@media all and (max-width: 480px) {
    .cm-search-item .cm-fieldset-box.seach-fieldset .write-input {
        width: 100%;
    }

    .cm-search-item .cm-search-btn {
        width: 100%;
        margin-left: 0;
        margin-top: 1rem;
    }
}

/* ******************  고객지원 ********************** */
@media all and (max-width: 1280px) {
    /* ****** FAQ ****** */
    .faq-con .cm-top-list-box {
        display: block;
    }

    .faq-con .faq-tab-list-style {
        margin-top: 1rem;
    }

}

@media all and (max-width: 800px) {
    /* ****** 공지사항 ****** */
    .board-search-box {
        width: 100%;
    }

    .board-search-box .board-search-inner {
        width: 100%;
        display: flex;
        justify-content: start;
    }

    .board-search-box .search-word {
        width: calc(100% - 7.2rem);
    }

    .notice-con .bbs-list-row .bbs-title strong {
        padding-left: 0;
    }

    /* ****** FAQ ****** */
    .faq-tab-list-style ul li {
        height: auto;
    }

    .faq-con .bbs-list-row .column:before {
        display: none;
    }

    .faq-con .bbs-list-row .bbs-title strong {
        padding-top: 0;
    }

    .faq-con .bbs-list-row .column.arrow {
        text-align: right;
    }

    /* 페이징 */
    .paging a {
        width: 3rem;
        height: 3rem;
        line-height: 3rem;
    }

}