.recruit-wrap {
    padding-top: 6rem;
    display: flex;
    flex-direction: column;
    gap: 4rem;
}

@media (max-width:800px) {
    .recruit-wrap {
        gap: 4rem;
    }
}

/* #region CTA */

.cta {
    padding: 18rem 6rem 6rem;
	margin: -10rem -4rem 0rem;
    background-color: var(--midgray);
    text-align: center;
    overflow: hidden;
}

.cta .flex {
    align-items: center;
	padding: 0 2rem;
}

.cta .swiper {
    color: var(--white);
    margin: 0 -6rem;
    transform: rotate(-4deg) translate(0px, -6rem);
}

.cta .swiper-wrapper {
    transition-timing-function: linear !important;
}

.cta .swiper-slide {
    white-space: nowrap;
    width: fit-content;
}

@media (max-width:800px) {
    .cta {

        padding: 14rem 2rem 6rem;
    }

    .cta .swiper {
        transform: rotate(-4deg) translate(0px, -4rem);
    }
}


/* #endregion */


/* #region TITLE */

.title-wrap {
    width: 100%;
}

.title-wrap .sml-title {
    color: var(--gray)
}

.title-wrap>.flex {
    padding-top: 6rem;
}

.title-wrap>.flex>* {
    width: calc(50% - 4rem)
}

.title-wrap .score li {
    display: flex;
    flex-direction: column;
    padding: 0 2rem;
    border-right: 1px solid var(--red);
    width: 14rem;
}

.title-wrap .score li:last-child {
    border: 0;
}



@media (max-width: 800px) {
    .title-wrap>.flex {
        flex-direction: column;
        padding-top: 4rem;
    }

    .title-wrap>.flex>* {
        width: 100%;
    }
}

/* #endregion */





/* #region HIGHLIGHT */

.highlight {
    padding: 4rem;
    background-color: var(--lightgray);
}

.highlight .swiper {
    padding-top: 4rem;

}

.highlight .swiper .swiper-slide {
    background-color: var(--white);
    border-radius: 1rem;
    padding: 2rem;
}


/* #endregion */


.recruit-list {
    display: flex;
    gap: 6rem;
    width: 100%;
}

/* #region SIDEBAR */
.recruit-list .sidebar {
    width: 35rem;
    flex-shrink: 0;
    background-color: var(--lightgray);
    padding: 4rem;
    border-radius: 1rem;
}

.filter-header {
    align-items: center;
    justify-content: space-between;
}

.filter-header button {
    color: var(--white);
    padding: .2rem 1rem;
    border-radius: .3rem;
}

.filter-header .btn-wrap {
    gap: .5rem;
}

.filter-header button.filter-reset {
    background-color: var(--gray)
}

.filter-header button.filter-close {
    background-color: var(--black)
}


.recruit-list .sidebar .section {
    padding-bottom: 2rem;
    margin-bottom: 2rem;
    border-bottom: 1px solid var(--midgray)
}

.recruit-list .sidebar .section:last-of-type {
    border-bottom: 0;
}

.recruit-list .sidebar .section .title {
    padding-bottom: 1rem;
}

.recruit-list .sidebar .btnSubmit {
    width: 100%;
}


.filter-list {
    display: flex;
    gap: .5rem;
    flex-direction: column;
}

.filter-list a {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.filter-list .chk {
    width: 1.5rem;
    height: 1.5rem;
    border: 1px solid var(--midgray);
    background-color: var(--white);
    border-radius: 3px;
    position: relative;
    flex-shrink: 0;
}

.filter-list a.on .chk {
    border-color: #000;
}

.filter-list a.on .chk::after {

    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('../assets/img/check-on.jpg');
    background-size: cover;

}

#recruitFilterForm {
    position: sticky;
    bottom: 4rem;
}

@media (max-width: 800px) {
    .recruit-list .sidebar {
        width: 100%;
        position: fixed;
        inset: 0;
        padding: 4rem 2rem 4rem;
        border-radius: 0;
        z-index: 10;
        overflow: auto;
        margin-left: 100%;
        transition: margin .3s;
    }

    .filter-open .recruit-list .sidebar {
        margin-left: 0;
    }

    #recruitFilterForm {
        bottom: 04rem;
    }


}

/* #endregion */

/* #region LIST */
.recruit-list .right {
    width: 100%;
}

.recruit-list .list-header {
    width: 100%;
    justify-content: space-between;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--black);
    margin-bottom: 0rem;
}

.recruit-list .list-header .filter-open {
    color: var(--white);
    padding: .2rem 1rem;
    border-radius: .3rem;
    background-color: var(--black);
}


.recruit-list .list-wrap {
    padding-bottom: 2rem;
}

.recruit-list .list {
    border-bottom: 1px solid var(--gray);
    padding: 4rem 0;
    position: relative;
}

.recruit-list .list .summary {
    padding-bottom: .5rem;
}

.recruit-list .list .h3 {
    padding-bottom: 3rem;
}

.recruit-list .list .is-period {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.recruit-list .list .is-period .badge {
    color: var(--white);
    padding: .2rem .5rem;
    border-radius: .3rem;
    display: inline-block;
    font-size: 1.4rem;
    background-color: var(--red);
}


.recruit-list .list .is-open .badge {
    color: var(--white);
    padding: .2rem .5rem;
    border-radius: .3rem;
    display: inline-block;
    font-size: 1.4rem;
    background-color: var(--black);
}

.recruit-list .list .status {
    position: absolute;
    top: 4rem;
    border-radius: .5rem;
    border: 1px solid var(--black);
    padding: .4rem 1rem;
    right: 0;
}

.recruit-list .list.closed .status {
    background-color: var(--lightgray);
    color: var(--gray);
    border: 1px solid var(--gray);
}


@media (max-width: 800px) {
    .recruit-list .list {
        padding: 2rem 0;
    }

    .recruit-list .list .status {
        top: 2rem;
    }

    .recruit-list .list .summary {
        margin-right: 8rem;
        font-size: 1.2rem;
    }

    .recruit-list .list .h3 {
        margin-right: 8rem;
    }

}

/* #endregion */




.culture_welfare {background-color: var(--lightgray);
    padding: 6rem; margin: 0 -4rem -4rem;}
.culture_welfare .title {padding-bottom: 4rem;}

.culture-grid {gap: 4rem 2rem; justify-content: center;}
.culture-grid > .culture-item {width: calc((100% - 4rem) / 3); }
.culture-grid > .culture-item .cw-thumb {border-radius: 1rem; width: 100%; overflow:hidden; margin-bottom:1rem;}
.culture-grid > .culture-item .cw-thumb img {width: 100%; height: auto;}
.culture-grid > .culture-item .cw-detail {font-weight: 300;}
@media (max-width: 800px) {
	.culture-grid > .culture-item {width: calc((100% - 2rem) / 2); }
	.culture_welfare {background-color: var(--lightgray);
		padding: 4rem 2rem; margin: 0 -2rem -4rem;}
	.culture_welfare .title {padding-bottom: 3rem;}
}