@import url(./variable.css);
@import url(./global.css);
@import url(./layout.css);
@import url(./layout2.css);

/* =============Job_Choose====================== */

.job-choose-wrapper {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    place-items: center;
    gap: 10px;
    /* display: flex;
  flex-direction: column;
  gap: 3rem; */
}

.job-search-title {
    place-self: center;
}

.job-search-btn-group {
    place-self: center;
}

#JobCategoryModal img {
    width: 65px;
    height: 65px;
}

@media (orientation: portrait) {
    .job-choose-wrapper {
        height: auto;
        gap: 2rem;
        /* display: flex;
    flex-direction: column;
    gap: 3rem; */
    }
}

/* ==============Job_Search===================== */
.job-search-result-btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.job-serach-result-list {
    overflow-y: scroll;
    /* scrollbar-width: none; */
}

.job-search-result-list-item {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.job-search-result-list-item_sort {
    font-weight: bold;
}

.job-search-result-list-item_content {
    flex: 1;
    display: grid;
    grid-template-areas:
        "text-code text-company text-company"
        "text-information text-information text-information"
        "text-exp text-edu text-salary";
}

.text-code {
    grid-area: text-code;
}

.text-company {
    grid-area: text-company;
}

.text-information {
    grid-area: text-information;
}

.text-exp {
    grid-area: text-exp;
}

.text-edu {
    grid-area: text-edu;
}

.text-salary {
    grid-area: text-salary;
}

.job-search-result-pagenation-status {
    color: var(--third-color);
    text-align: right;
}

@media (orientation: portrait) {
    .job-serach-resulte-list {
        max-height: calc(100vh - 850px);
    }

    .job-search-result-list-item_content {
        grid-template-areas:
            "text-code text-code"
            "text-company text-company"
            "text-information text-information"
            "text-exp text-edu"
            "text-salary text-salary";
    }
}
/* ==============Job_Display===================== */
.information-wrapper {
    height: 100%;
    max-height: 100%;
    display: grid;
    grid-template-rows: 30px 1fr 50px;
    grid-gap: 5px 0px;
}

.job-inforamtion-result {
    overflow-y: scroll;
}

    .job-inforamtion-result th {
        background-color: var(--light-blue-color);
        color: #000;
        text-align: center;
    }

    .job-inforamtion-result .table-title {
        background-color: var(--btn-color);
        color: #fff;
        text-align: start;
    }

@media (orientation: portrait) {
    .job-inforamtion-result {
        overflow-y: auto;
    }
}
/* ==============Job_Map===================== */
.job-search-map-container {
    display: grid;
    grid-template-rows: auto 50px 1fr 50px;
    grid-template-columns: 1fr;
    height: 100%;
    max-height: 100%;
    gap: 10px;
}

.job-serach-result-map {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: 1fr;
}

.job-serach-result-mapview,
.job-serach-result-map-list {
    border-radius: 20px;
}

.job-serach-result-map-list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 5px;
    background-color: #fff;
    padding: 10px;
}

.job-serach-result-map-list_total {
    background-color: var(--btn-color);
    color: var(--third-color);
    border-radius: 50px;
    padding: 5px 30px;
    border: none;
    place-self: center center;
}

.job-serach-result-map-list-items-wrapper {
    height: 100%;
    width: 100%;
    max-height: 100%;
    position: relative;
}

.job-serach-result-map-list-items-scroll {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: start;
    align-items: center;
    gap: 3px;
    position: absolute;
    width: 100%;
    max-height: 100%;
    overflow-y: auto;
}

.job-search-result-map-list-item_content {
    width: 100%;
    display: grid;
    grid-template-areas:
        "text-code text-code"
        "text-company text-company"
        "text-information text-information"
        "text-exp text-edu"
        "text-salary text-salary";
    background-color: var(--light-blue-color);
    border-radius: 10px;
    padding: 20px;
    cursor: pointer;
}

@media (orientation: portrait) {
    .job-serach-result-map {
        grid-template-columns: 1fr;
        grid-template-rows: 1.5fr 1fr;
    }
}
/* ==============Course_Choose===================== */

.course-choose-wrapper {
    height: 100%;
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(5, auto);
    place-items: center;
    gap: 10px;
    /* height: 100%;
  padding: 0px 5rem;
  display: grid;
  grid-template-rows: repeat(5, 1fr);
  column-gap: 20px;
  place-items: center center; */
}

.course-choose-form-group {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

@media (orientation: portrait) {
    .course-choose-wrapper {
        /* display: flex;
    flex-direction: column;
    gap: 3rem; */
        height: auto;
        gap: 2rem;
    }
}
/* ==============Course_Search===================== */
.course-search-container,
.job-search-container {
    display: grid;
    grid-template-rows: auto 50px 1fr 30px 50px;
    grid-template-columns: 1fr;
    height: 100%;
    max-height: 100%;
    gap: 10px;
}

.course-search-query-wrapper,
.job-search-query-wrapper {
    display: grid;
    grid-template-columns: repeat(2, auto);
    grid-template-rows: repeat(3, auto);
    place-items: center start;
    gap: 10px;
}

.grid-column-1-3 {
    grid-column: 1/3;
}

.course-search-form-group,
.job-search-form-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.course-search-query-btn-group,
.job-search-query-btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    place-self: center;
    grid-column: 1/3;
}

.course-search-query-options,
.job-search-query-options {
    display: flex;
    flex-direction: column;
    color: white;
    font-weight: bold;
    row-gap: 0.5rem;
}



.search-job-place,
.search-job-category,
.search-course-place {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1rem;
}

.course-search-result-list-item_content {
    width: 100%;
    display: grid;
    grid-template-areas:
        "text-courseName text-courseName"
        "text-address text-address "
        "text-registerDate text-trainingDate"
        "text-trainingHour text-eduLevel"
        "text-registerAmount text-trainingOrg";
}

.text-courseName {
    grid-area: text-courseName;
}

.text-address {
    grid-area: text-address;
}

.text-registerDate {
    grid-area: text-registerDate;
}

.text-trainingDate {
    grid-area: text-trainingDate;
}

.text-trainingHour {
    grid-area: text-trainingHour;
}

.text-eduLevel {
    grid-area: text-eduLevel;
}

.text-registerAmount {
    grid-area: text-registerAmount;
}

.text-trainingOrg {
    grid-area: text-trainingOrg;
}

@media (orientation: portrait) {
    .course-search-result-list-item_content {
        grid-template-areas:
            "text-courseName text-courseName"
            "text-address text-address"
            "text-registerDate text-registerDate"
            "text-trainingDate text-trainingDate"
            "text-trainingHour text-eduLevel"
            "text-registerAmount text-registerAmount"
            "text-trainingOrg text-trainingOrg";
    }

    .job-search-query-wrapper,
    .course-search-query-wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: repeat(4, auto);
    }

    .job-search-query-btn-group,
    .course-search-query-btn-group, .grid-column-1-3 {
        grid-column: 1/2;
    }
}
/* ==============Course_Map===================== */
.course-search-map-container {
    display: grid;
    grid-template-rows: auto 50px 1fr 50px;
    grid-template-columns: 1fr;
    height: 100%;
    max-height: 100%;
    gap: 10px;
}

.course-search-result-map-list-item_content {
    width: 100%;
    display: grid;
    grid-template-areas:
        "text-courseName text-courseName"
        "text-registerDate text-registerDate"
        "text-trainingDate text-trainingDate"
        "text-trainingHour text-trainingHour"
        "text-registerAmount text-registerAmount"
        /* "text-address text-address" */
        "text-trainingOrg text-trainingOrg";
    background-color: var(--light-blue-color);
    border-radius: 10px;
    padding: 20px;
    cursor: pointer;
}
/* ==============Recruit_Choose===================== */

.recruit-search-wrapper {
    height: 100%;
    display: grid;
    grid-template-columns: 0.5fr 1fr;
    grid-template-rows: 1fr;
    place-items: center;
}

.recruit-map-container {
    position: relative;
    height: 100%;
    width: 100%;
    max-height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow-y: scroll;
}

.recruit-btn-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

.recruit-btn-group-item {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    justify-content: center;
    align-items: center;
}

@media (orientation: portrait) {
    .recruit-search-wrapper {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        place-items: center start;
    }

    .recruit-btn-group {
        flex-direction: row;
    }

    .recruit-btn-group-item {
        flex-direction: row;
    }
}
/* ==============Recruit_Search===================== */
.recruit-search-container {
    display: grid;
    grid-template-rows: auto 50px 1fr 30px 50px;
    grid-template-columns: 1fr;
    height: 100%;
    max-height: 100%;
    gap: 5px;
}

.recruit-search-query-wrapper {
    display: grid;
    grid-template-rows: repeat(1, 1fr);
    grid-template-columns: repeat(2, 1fr);
    row-gap: 10px;
    place-items: center start;
}

.recruit-search-query-btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

.recruit-search-result-list-item_content {
    flex: 1;
    grid-template-areas:
        "text-recruitName text-recruitName"
        "text-recruitDate text-recruitDate"
        "text-address text-address"
        "text-company text-infomation";
}

.text-recruitName {
    grid-area: text-recruitName;
}

.text-recruitDate {
    grid-area: text-recruitDate;
}

@media (orientation: portrait) {
    .recruit-search-result-list-item_content {
        grid-template-areas:
            "text-recruitName"
            "text-recruitDate"
            "text-address"
            "text-company"
            "text-infomation";
    }
}
/* ==============Recruit_Map===================== */
.recruit-search-map-container {
    display: grid;
    grid-template-rows: auto 50px 1fr 50px;
    grid-template-columns: 1fr;
    height: 100%;
    max-height: 100%;
    gap: 5px;
}

.recruit-search-result-map-list-item_content {
    width: 100%;
    display: grid;
    grid-template-areas:
        "text-recruitName"
        "text-recruitDate"
        "text-address"
        "text-company"
        "text-infomation";
    background-color: var(--light-blue-color);
    border-radius: 10px;
    padding: 20px;
    cursor: pointer;
    text-decoration: none;
    color: unset;
}


/* ==============aboutus===================== */
.about-wrapper {
    height: 100%;
    max-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr 50px;
    grid-gap: 20px 0px;
}

.about-query-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}

.about-inforamtion-result {
    overflow-y: scroll;
}

.about-information-container {
    display: flex;
    justify-content: center;
    align-items: start;
    flex-direction: row;
    gap: 10px;
}

.about-image-wrapper {
    display: grid;
    place-items: center;
}

.about-btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

@media (orientation: portrait) {
    .about-information-container {
        align-items: center;
        flex-direction: column;
        gap: 20px;
    }
}
/* ==============Question===================== */
.question-wrapper {
    height: 100%;
    max-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr 50px;
    grid-gap: 10px 0px;
}

.question-query-wrapper {
    display: grid;
    place-items: center;
}

.question-inforamtion-result {
    overflow-y: scroll;
    color: var(--third-color);
    font-weight: bold;
    margin: 0 auto;
    padding: 0px 10px;
}

.question-selection-btn-group {
    display: flex;
    justify-content: space-between;
}
/* .question-selection-btn {
} */
.question-btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

@media (orientation: portrait) {
    .question-wrapper {
        grid-gap: 20px 0px;
    }
}

/* ==============Tour_Choose===================== */

.tour-wrapper {
    height: 100%;
    max-height: 100%;
    display: grid;
    grid-template-rows: auto 1fr;
    grid-gap: 20px 0px;
    overflow-y: scroll;
}

.tour-query-wrapper {
    display: grid;
    place-items: center center;
}

.tout-selection-btn-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-gap: 20px;
}

.tour-btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

@media (orientation: portrait) {
    .tour-query-wrapper {
        flex: none;
        display: grid;
        place-items: end center;
    }

    .tour-container {
        flex: 0.4;
    }
}
/* ==============TourSearch===================== */
.tour-search-wrapper {
    display: grid;
    grid-template-rows: auto 1fr 50px;
    grid-template-columns: 1fr;
    height: 100%;
    max-height: 100%;
    gap: 10px;
}

.tour-search-query-wrapper {
    display: grid;
    grid-template-rows: repeat(2, auto);
    gap: 10px;
    place-items: start;
}

.tour-search-form-group {
    display: grid;
    grid-template-columns: 100px 1fr;
    place-items: start center;
    gap: 10px;
}

.tour-search-result-btn-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;
}

/* ==============ADPlayer===================== */
.AD_Container {
    width: 100dvw;
    height: 100dvh;
    background-image: url(../../images/bg_pic_index_l.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: fill;
}
#player {
    width: 100dvw;
    height: 100dvh;
}

.AD_pic {
    background-image: url(../../images/bg_pic_index_l.png);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    object-fit: fill;
    width: 100%;
    height: 100%;
}

.backdropBlur {
    backdrop-filter: blur(15px);
}

@media (orientation: portrait) {
    .AD_pic {
        background-image: url(../../images/bg_pic_index_p.png);
        background-size: contain;
    }
}
/* =================================== */