@charset "UTF-8";
/* =================================================
title       : 서브 컨텐츠 반응형
Create date : 2026-06
================================================= */
/* Tablet + Fold */
@media (max-width: 1280px) {   
    #snb {
        width: calc(100% + 40px);
        position: absolute;
        top: -60px;
        height: 48px;
        left: -20px;
        z-index: 2;
        margin-top: 0;
    }
    #snb .title {
        display: none;
    }
    #snb .s_depth1 {
        width: 100%;
        background: #fff;
    }
    #snb .s_depth1.on > li {
        display: block;
    }
    #snb .s_depth1 > li > a {
        padding: 15px 40px 15px 22px;
        background: #fff;
        border-bottom: 1px solid #ddd;
        border-radius: 0;
    }
    #snb .s_depth1 > li > a:hover::before, 
    #snb .s_depth1 > li > a:focus::before, 
    #snb .s_depth1 > li.active > a::before {
        display: none;
    }
    #snb .s_depth1 > li.active .s_depth2 {
        display: none;
        padding: 0;
        background: #fff;
    }
    #snb .s_depth1.on > li.active .s_depth2 {
        display: block;
        padding: 20px 0;
    }
    #snb .s_depth2 > li > a {
        margin-bottom: 0;
        color: #666;
    }
    #snb .s_depth2 > li.active > a {
        background: #fff;
    }

    .contents_util {
        gap: 10px 20px;
    }
}
@media (max-width:1024px) {
    body, form, h1, h2, h3, h4, h5, h6, ul, ul li, p,
    div, th, td, ol, ul, li, p, span, label, input, select,
    button, textarea, table td, th {
        font-size: inherit;
    }
    #contents_body {
        margin-bottom: 0;
        max-width: 100%;
    }
    .main_wrap {
        margin: 60px auto 60px;
    }

    .ui-mypage-page .ui-section + .ui-line-dot {
        margin: 30px 0 20px;
    }

    .ui-search { margin: 0 24px;}

    /* 모바일에서 로그인 숨김 */
    .ui-login {
        display:none;
    }

    #contents.ui-full .contents_util:not(:has(> .contents_title)) {
        display: none;
    }

    .ui-service-list {
        grid-template-columns:1fr !important;
    }

    .ui-law-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* login */
    .ui-login-tabs .ui-tabs-panel {
        padding-top: 30px
    }
    .ui-login-page .ui-login-title {
        padding: 10px 16px 24px;
        font-size: 21px;
        margin-bottom: 0;
    }

    .ui-login-page .ui-login-tab {
        height: 50px;
        padding: 0 12px;
        font-size: 15px;
    }

    .ui-login-page .ui-login-panel {
        padding: 24px 16px;
    }

    .ui-login-page .ui-login-method-link {
        min-height: auto;
        padding: 24px 20px;
    }

    .ui-login-page .ui-login-method-title {
        font-size: 16px;
    }

    .ui-login-page .ui-login-method-desc {
        margin-top: 10px;
        font-size: 16px;
    }

    .ui-login-page .ui-login-signup {
        margin-top: 28px;
        padding: 12px 16px;
    }

    .ui-login-tabs .ui-login-panel-title {
        margin: 0 0 30px;
    }

    .ui-login-tabs .ui-tabs-panel .ui-table-wrapper {
        width: 100%;
    }

    /* 회원가입 */
    .ui-join-page .ui-signup-complete {
        margin-bottom: 20px;
    }

    .ui-join-page .ui-signup-complete .ui-signup-complete-title {
        margin-bottom: 30px;
        font-size:26px
    }

    .ui-join-page .ui-signup-complete p {
        font-size: 16px;
    }

    .ui-join-page .ui-accordion-name .ui-accordion-code {
        display: block;
        padding-left: 0;
    }
    .ui-join-page .ui-accordion-icon {
        margin-right: 20px;
    }

    .ui-join-page .ui-accordion-icon [class^="ui-icon--work_"] {
    }

    .ui-accordion-item {
        padding: 0 20px;
    }
    .ui-authority .ui-authority-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ui-join-page .ui-btn-group {
        margin-top: 30px;
    }
    .ui-join-page .ui-btn {
        width: 40%;
        font-size: 16px;
    }

    /* 서명관리 */
    .ui-signature-thumbnail {
        overflow-x: auto;
    }

    .ui-signature-thumbnail::-webkit-scrollbar{
        height: 1px;
    }

    .ui-signature-thumbnail ul {
        flex-wrap: nowrap;
    }

    /* 달력 */
    .ui-fullcalendar {
        display: block;
    }

    /* 국가 선택 전체 영역 */
    .ui-country-area .ui-tabs-tab {
        font-size: 16px;
    }
    .ui-country-area .ui-tabs-panel {
        padding-top: 30px;
    }

    /* 업무절차 */
    .ui-workflow .ui-section {
        margin-bottom: 30px;
    }

    .ui-section-payment {
        margin-top: 40px;
    }

    .ui-payment-grid-step .ui-card-item {
        font-size: 16px;
    }


    /*회원가입 사업자가입*/
    .ui-member-info .ui-stepper {
        margin-top: 0;
        margin-bottom: 80px;
    }

    .ui-member-info .ui-table-invisible {
        margin-top: 0;
    }

    .ui-member-info .ui-table-setting tbody th {
        height: auto;
    }
    .ui-member-info .ui-table-setting thead th, .ui-member-info .ui-table-setting td,
    .ui-mypage-page .ui-table th, .ui-mypage-page .ui-table td {
        font-size: 14px;
        padding: 10px 10px;
        height: auto;
    }
}

/* Fold Landscape */
@media (max-width:1024px) and (orientation:landscape) {

}

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

    .main_wrap {
        margin: 0 auto 0;
    }

    .ui-login-page .ui-login-form {
        width: 100%;
        padding: 0;
    }

    .contents_util .contents_title {
        font-size: 22px;
    }
    .contents_util .util::before,
    .contents_util .util .btn[title="인쇄"],
    .contents_util .path {
        display: none;
    }

    .ui-info-box {
        padding:25px;
        margin-top: 30px;
    }

    .ui-info-box p {
        margin-bottom: 30px;
    }

    /* search 검색 */
    .ui-search-form {
        padding: 16px 20px 30px;
    }

    .ui-search-form-row {
        grid-template-columns: minmax(0, 1fr);
        gap: 8px;
    }

    /* 모든 field를 모바일에서 1열로 변경 */
    .ui-search-form .ui-search-form-field,
    .ui-search-form .ui-search-form-field:has(> .ui-search-form-label),
    .ui-search-form .ui-search-form-field:has(> .ui-search-form-label ~ .ui-search-form-label),
    .ui-search-form .ui-search-form-field:has(> .ui-search-form-label):has(> button:last-child),
    .ui-search-form .ui-search-form-field:has(> .ui-search-form-label):has(> .ui-btn-group:last-child) {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        align-items: stretch;
        gap: 8px;
    }

    .ui-search-form-label {
        white-space: normal;
    }

    .ui-search-form-field > .ui-search-form-label {
        margin-top: 8px;
        text-align: left;
    }

    .ui-search-form-field input,
    .ui-search-form-field select {
        width: 100%;
        min-width: 0;
        max-width: none;
        height: 48px;
    }

    .ui-search-form-field:has(> select:only-of-type) > select {
        max-width: 100%;
    }

    .ui-search-form .ui-search-submit {
        width: 100%;
        min-width: 0;
        height: 48px;
    }

    .ui-search-form-field {
        flex-wrap: wrap;
    }

    /*전문교수*/
    .ui-search-form-field--professor {
        grid-template-columns: 1fr;
    }

    .ui-search-form-field .ui-btn {
        flex: none;
        width: 100%;
    }

    .ui-search-form .ui-btn-group {
        display: block;
    }

    .ui-search-form .ui-btn-group button,
    .ui-search-form .ui-btn-group .ui-btn {
        margin-bottom: 8px;
    }

    /* 첨부파일 */
    .ui-file-simple .ui-file-attach {
        flex-direction: column;
        align-items: flex-start
    }

    .ui-file-simple .ui-file-attach-button {
        width: 100%;
        max-width: 120px;
    }


    .ui-search-infobox {
        flex-wrap: wrap;
        gap: 10px;
    }

    .ui-search-infobox .ui-btn-group.fr {
        float:unset;
    }

    .ui-search-infobox .ui-search-actions {
        margin-left: unset;
    }


    /* 테이블 */
    .ui-table th,
    .ui-table td {
        padding:14px 20px;
        font-size:14px;
    }

    /* 스크롤바 */
    .ui-table-wrapper-scroll .ui-table {
        min-width: 640px;
    }

    .ui-table-wrapper-scroll::-webkit-scrollbar{
        display:none;
    }

    .ui-table-wrapper-scroll .ui-table-info--form
    .ui-table-wrapper-scroll .ui-table-info--form,
    .ui-table-wrapper-scroll .ui-table-info--form tbody,
    .ui-table-wrapper-scroll .ui-table-info--form tbody tr,
    .ui-table-wrapper-scroll .ui-table-info--form tbody th,
    .ui-table-wrapper-scroll .ui-table-info--form tbody td {
        display: revert;
        width: auto;
    }

    /* 반응형 테이블 */
    .ui-table-responsive colgroup {
        display: none;
    }
    .ui-table-responsive thead{
        position:absolute;
        width:1px;
        height:1px;
        overflow:hidden;
        clip:rect(0 0 0 0);
    }
    .ui-table-responsive,
    .ui-table-responsive tbody,
    .ui-table-responsive tr,
    .ui-table-responsive td{
        display:block;
        width:100%;
    }

    .ui-table-responsive tr{
        border-bottom: 0;
    }

    .ui-table-responsive tbody tr {
        display: grid;
        grid-template-columns: 110px minmax(0, 1fr);
        width: 100%;
    }

    .ui-table-responsive tbody th,
    .ui-table-responsive tbody td {
        display: block;
        width: auto !important;
        min-width: 0;
        min-height: 48px;
        padding: 12px 10px;
        font-size: 14px;
        line-height: 1.5;
        box-sizing: border-box;
    }

    /* 제목 셀 */
    .ui-table-responsive tbody th {
        grid-column: 1;
        display: flex;
        align-items: center;
        background: #f4faff;
        border-left: 0;
    }

    /* 내용 셀 */
    .ui-table-responsive tbody td {
        grid-column: 2;
        border-left: 1px solid #d7dee7;
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    .ui-email .ui-email-symbol {
        text-align: center;
    }

    .ui-service-card {
        min-height:auto;
        padding:18px;
        gap:16px;
    }

    .ui-certify-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .ui-certify-list li .ui-thumb-box .ui-thumb-title {
        font-size: 26px
    }

    .ui-law-list {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .ui-law-list > li {
        justify-content: flex-start;
        min-height: 56px;
        padding: 12px 18px;
    }

    .ui-law-list-number {
        font-size: 18px;
    }

    .ui-law-list-text {
        font-size: 15px;
    }

    /* 기관정보 입력 영역 */
    .ui-form-field.wp80 {
        width: 100% !important;
    }

    /* STEP */
    .ui-stepper {
        padding: 20px 8px;
    }

    .ui-stepper-circle {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }

    .ui-stepper-circle i {
        font-size: 20px;
    }

    /* 원 사이 연결선 */
    .ui-stepper-item::after {
        top: 19px;
        left: calc(50% + 20px);
        width: calc(100% - 40px);
    }

    /* '1단계, 2단계'는 화면에서만 숨김 */
    .ui-stepper-label {
        position: absolute;
        overflow: hidden;
        width: 1px;
        height: 1px;
        margin: -1px;
        padding: 0;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .ui-stepper-label2 {
        margin-top: 12px;
        padding: 0 3px;
        font-size: 14px;
        line-height: 1.35;
        word-break: keep-all;
    }

    /* 회원가입 */
    .ui-authority .ui-authority-list {
        grid-template-columns: 1fr;
        gap: 12px;
        font-size: 14px;
    }

    .ui-join-page .ui-accordion-guide .ui-guide-list li {
        font-size: 14px;
    }

    .ui-login-page .ui-login-method-list {
        flex-direction: column;
        gap: 16px;
    }

    .ui-login-page .ui-login-method-list > li {
        flex: none;
        width: 100%;
    }

    .ui-certify-list--row {
        flex-direction: column;
    }

    .ui-certify-list--row .ui-certify-list-first,
    .ui-certify-list--row li {
        width: 100%;
    }

    /* 국가 선택 전체 영역 */
    .ui-country-area .ui-tabs-list {
        display: flex;
        gap: 8px;
        margin-bottom: 24px;
        padding-bottom: 5px;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .ui-country-area .ui-tabs-list::-webkit-scrollbar {
        display: none;
    }

    .ui-country-area .ui-tabs-tab {
        flex: 0 0 auto;
        height: 42px;
        padding: 0 20px;
        font-size: 14px;
    }

    .ui-country-area .ui-tabs-panel {
        padding-top: 0;
    }

    .ui-country-area .ui-country-swiper {
        padding: 0 30px;
        margin-bottom: 0;
    }

    .ui-country-area .ui-country-name {
        margin-top: 7px;
        font-size: 14px;
    }

    .ui-country-area .ui-country-swiper .swiper-button-prev,
    .ui-country-area .ui-country-swiper .swiper-button-next {
        width: 24px;
    }

    .ui-country-area .ui-country-map-title {
        font-size: 20px;
    }

    .ui-country-area .ui-country-map-text {
        font-size: 14px;
    }

    .ui-section-payment .ui-section-title .ui-btn-group {
        float: none;
    }

    .ui-section-payment .ui-search-nodata .ui-search-nodata-text {
        font-size: 16px;
    }

    .ui-payment-grid-step {
        grid-template-columns: 1fr;
    }

    .ui-payment-grid-step .ui-card-item + .ui-card-item::after {
        left: 0;
        right: 0;
        top: 0;
        margin: -27px auto 0;
        transform: rotate(-270deg);
    }

    /*회원가입 사업자가입*/
    .ui-member-info {
        margin-top:30px;
        margin-bottom:30px;
    }

    .ui-member-info .ui-stepper {
        margin-top: 0;
        margin-bottom: 30px;
    }

    .ui-member-info .ui-btn-group {
        margin-top:30px !important;
    }

    .ui-member-info .ui-table-info--form .ui-form-field {
        display: flex;
    }

    .ui-member-info .ui-table-invisible th {
        min-height: auto;
        padding-left: 0;
        font-size: 16px;
    }

    .ui-member-info .ui-table-invisible td {
        padding:0 10px;
    }

    .ui-member-info .ui-table-invisible td input,
    .ui-member-info .ui-table-invisible td select {
        height: 40px;
    }

    .ui-mypage-qa {
        margin-bottom: 40px;
    }

    .ui-mypage-qa .ui-qa-list {
        grid-template-columns: 1fr;
    }
}

/* Small Mobile */
@media (max-width:640px) {
    .ui-section-title--bar {
        font-size: 18px;
    }

    .ui-section-title--bar:before {
        margin-right: 10px;
        height: 22px;
    }

    .ui-section .ui-section-title {
        margin: 20px 0 20px;
        font-size: 16px;
    }

    .ui-section-title-sub {
        font-size: 14px;
    }

    .ui-guide-workflow {
        align-items: flex-start;
    }

    .ui-table-info--form,
    .ui-table-info--form tbody,
    .ui-table-info--form tbody tr,
    .ui-table-info--form tbody th,
    .ui-table-info--form tbody td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    .ui-table-invisible, .ui-table-invisible th, .ui-table-invisible td, .ui-table-invisible tr {
        padding-top:0;
        padding-bottom: 0;
    }

    .ui-form-field.wp50 {
        width: 100% !important;
    }

    .ui-form-field select,
    .ui-form-field input,
    .ui-form-field input[type="date"] {
        font-size: 14px;
    }

    .ui-form-field--responsive {
        display: flex;
        flex-direction: column;
    }

    .ui-table-info--form th {
        min-height: auto;
        padding: 12px 12px 6px;
    }

    .ui-table-info--form td {
        padding: 9px 12px;
        border-left: 0;
        border-bottom: 0;
    }

    .ui-table-info--form td + th {
        border-top: 1px solid #D7DEE7;
        border-left: 0;
    }

    .ui-table-info--form input,
    .ui-table-info--form select,
    .ui-table-info--form textarea {
        width: 100%;
        max-width: none;
    }

    .ui-table-info--form .ui-file-simple .ui-file-attach-button {
        height: 30px;
        font-size: 14px;
    }

    .ui-address-field-item {
        width: 100%;
    }

    .ui-workflow .ui-section {
        margin-bottom: 20px;
    }

    .ui-workflow-box {
        margin-top:20px;
    }
    .ui-workflow-number {
        width: 30px;
        height: 30px;
        font-size:14px;
    }

    /* 업무절차 */
    .ui-workflow-card {
        padding: 15px 40px 15px 56px;
    }

    .ui-workflow-name {
        font-size: 18px;
    }

    .ui-workflow-description {
        flex-wrap: wrap;
        gap: 2px 8px;
        font-size: 14px;
    }

    .ui-workflow-url {
        display: block;
    }

    .ui-workflow-arrow {
        margin: 22px auto 20px;
    }

    .ui-workflow-etc {
        margin-top:10px;
    }

    .ui-payment-btm-text {
        font-size: 14px;
    }
    .ui-payment-report-footer .ui-payment-footer-text{
        font-size: 18px;
    }
    .ui-payment-report-footer .ui-payment-footer-signature {
        font-size: 22px;
        letter-spacing: 2px;
    }

}


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

    /* 테이블 */
    .ui-table-responsive colgroup {
        display:none;
    }
}