/* COMMON */
h2.title { font-size: 1.7rem; font-weight: 700 }

/* STEP_SEARCH */
.step-search-swiper .intro {display: flex; flex-wrap: wrap; width: 100%; padding: 8% 10% 8% 10%; border-radius: 50px; border: 1px solid #8e8e8e;}
.step-search-swiper .intro .top { width: 100%; text-align: center }
.step-search-swiper .intro .top h1 { font-size: 2.8rem; font-weight: 700; }
.step-search-swiper .intro .middle { width: 100%; text-align: center; margin-top: 2rem}
.step-search-swiper .intro .middle h2 { font-size: 1.5rem; font-weight: 400;}
.step-search-swiper .intro .bottom { width: 100%; display: flex; justify-content: center; margin-top: 3rem; }
.step-search-swiper .intro .bottom .next-step-btn { width: 300px; height: 50px; }
.step-search-swiper .question { display: flex; flex-wrap: wrap; width: 100%; padding: 5% 10% 3% 10%; border-radius: 50px; border: 1px solid #8e8e8e;}
.step-search-swiper .question .top { width: 100% }
.step-search-swiper .question .top > h2 { font-size: 1.6rem }
.step-search-swiper .question .answer { display: flex; width: 100%; margin-top: 5rem;}
.step-search-swiper .question .answer .form-check { display: flex; align-items: center;}
.step-search-swiper .question .answer .form-check label { margin-left: 5px; word-break: keep-all }
.step-search-swiper .question.multiple-choice { font-size: 1rem }
.step-search-swiper .question.multiple-choice .answer { flex-direction: column; gap: 1rem}
.step-search-swiper .question.short-answer .answer { flex-direction: row; gap: 1rem; align-items: center; font-size: 1.3rem}
.step-search-swiper .question.short-answer .answer label { width: 50px; margin-bottom: 0 }
.step-search-swiper .question.short-answer .answer input { width: calc(100% - 50px)}
.step-search-swiper .question.short-answer .answer input:focus { border: 1px solid var(--color-new-orange); }
.step-search-swiper .question .bottom { display: flex; width: 100%; justify-content: end; margin-top: 2rem }

/* STEP_SEARCH RESULT */
.code-result-table thead tr th:nth-child(1) { width: 5% }
.code-result-table thead tr th:nth-child(2) { width: 20% }
.code-result-table thead tr th:nth-child(3) { width: 75% }
.code-result-table tbody tr td:nth-child(1) { width: 5% }
.code-result-table tbody tr td:nth-child(2) { width: 20% }
.code-result-table tbody tr td:nth-child(3) { width: 75% }
.code-result-table tbody td:last-child { text-align: left; padding-right: 5rem; position: relative }
.code-result-table tbody td:last-child::after { background-image: url("../../img/icon/popup_icon.svg"); position: absolute; top: calc(50% - 10px); right: 1.5rem; display: inline-block; content: ""; width: 20px; height: 20px}
.code-result-table tbody tr.selected { background: rgba(255, 182, 146, 0.2); }
.code-result-table tbody tr:hover { background: rgba(153, 221, 255, 0.2); cursor: pointer}

#userAnswer { width: 100% }
#userAnswerTable thead tr th {font-size: 15px; font-weight: 700}

#searchResult { display: none }
#searchTable { min-height: 70px; }
#searchTable .div-title { margin: 1rem 0}
#searchTable .div-title p { color: #1D192B; font-size: 24px !important; line-height: 30px; letter-spacing: 1px; padding: 0 0.75rem}
#searchOpt { width: 40%; margin-right: 1%}

.mob-wrapper {
    position: relative;
    top: 0;
    display: block;
    background-color: white;
    height: 100%;
    overflow: auto;
}

@media (min-width: 768px) {
    #searchTable { display: block !important;}
}

@media (max-width: 767px) {
    /* COMMON */
    h2.title { font-size: 1.5rem; padding: 0 5px }
    .btn-type-1 { width: 110px; height: 33px; font-size: 1rem }
    .btn-type-1.last-step-btn { width: 125px }
    #selectAndBtn { margin-right: 0 !important; }

    /* STEP_SEARCH */
    .step-search-swiper .intro .top h1 { font-size: 1.8rem }
    .step-search-swiper .intro .middle { margin-top: 1.5rem }
    .step-search-swiper .intro .middle h2 { font-size: 14px; margin-bottom: 2px; }
    .step-search-swiper .intro .bottom { margin-top: 2rem }
    .step-search-swiper .intro .bottom .next-step-btn { height: 40px }

    .step-search-swiper .question .top > h2 { font-size: 1.1rem; font-weight: 600; word-break: keep-all }
    .step-search-swiper .question .answer { margin-top: 2rem }
    .step-search-swiper .question.short-answer .answer { font-size: 1rem; }
    .step-search-swiper .question.short-answer .answer input { height: 30px }
    .step-search-swiper .question.multiple-choice { font-size: 13px }
    .step-search-swiper .question.multiple-choice .answer { gap: .5rem }

    /* STEP_SEARCH RESULT */
    .code-result-table th { white-space: nowrap; }
    .code-result-table tbody td:nth-child(3) { padding-left: 1rem; padding-right: 0.5rem}
    .code-result-table tbody td:nth-child(3)::after { display: none }

    #userAnswerTable colgroup { display: none }
    #userAnswerTable thead tr th {font-size: 13px}
    #userAnswerTable thead tr th:nth-child(1) {width: 11%}
    #userAnswerTable thead tr th:nth-child(2) {width: 14%}
    #userAnswerTable thead tr th:nth-child(3) {width: 55%}
    #userAnswerTable thead tr th:nth-child(4) {width: 20%}

    #codeResult { margin-top: 2rem !important;}

    #searchOpt { width: 100%; margin-right: 0; margin-top: 5px}
    #searchOpt .card-body { padding: 0.7rem 0.5rem 1rem 0.5rem !important;}

    #searchTable .data { padding: 0 0.5rem }
    #searchTable .div-title { margin: 1.5rem 0 1rem 0 }
    #searchTable .div-title p { display: none }
    #searchTable #noData { margin-top: 0 !important; padding: 0 1.5rem; }
    #searchTable #noData h4 { font-size: .9rem}
    #searchTable .code-limit-div-select { width: 90px }
    #searchTable .select-limit { width: 90px }
    #searchTable .select-limit::before { right: 13px }
    #searchTable .select-limit.open::before { right: 13px }

    #searchResult {margin-top: 0}
    #searchResult > div:not(#industryTree, #goConsulting) {margin-top:0}

}