@media (max-width: 1280px) {
    section.activity .activity-list.second-type {
        grid-template-columns: 1fr 1fr;
    }
}

@media (max-width: 1024px) {
    section.activity .activity-list.second-type {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 860px) {
    .mo-menu {
        position: fixed;
        display: block;
        top:0; 
        right: 0;
        height: 100vh;
        width: 100%;
        z-index: 200;
        background-color: #fff;
        padding: 24px 32px;
        box-shadow: 0 1px 2.5px 0 rgba(23, 26, 31, 0.07), 0 0 2px 0 rgba(23, 26, 31, 0.08);
    }

    .mo-menu .logo {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .mo-menu ul {
        margin-top: 32px;
        display: flex;
        flex-direction: column;
        gap:16px;
        border-top: solid 1px #F3F5F6;
        padding-block: 16px;
    }
    .mo-menu a {
        font-size: 20px;
        font-weight: 500;
    }

    body.sub header .back {
        display: block;
    }

    section.sub .search-container {
        padding: 16px;
    }
    section.sub .search-container dl {
        grid-template-columns: 1fr;
        gap:8px;
    }
}

@media (max-width: 800px) {
    header {
        justify-content: space-between;
        padding-inline: 16px;
    }

    header .menu {
        display: none;
    }

    header .sub-menu {
        display: none;
    }

    header .mo-open {
        display: block;
    }

    body.sub header .mo-title {
        display: block;
    }

    body.sub header > .logo {
        display: none;
    }

    section .container-wrapper {
        padding-inline: 16px;
    }

    section.main .hero {
        grid-template-columns: 1fr;
        height:390px;
    }

    section.main .hero > li:first-child h2 {
        font-size: 28px;
        line-height: 42px;
    }

    section.main .hero > li:first-child h2 + p {
        font-size: 14px;
        line-height: 23px;
    }

    section.main .hero > li:first-child ul a {
        font-size: 14px;
    }

    section.main .hero > li:last-child {
        display:none;
    }

    section.main .swiper-container h2 {
        font-size:20px;
    }

    section.main .swiper-container li.swiper-slide {
        max-width:100%;
    }

    section.main .univ {
        margin-top: 36px;
    }

    section.main .company {
        padding-block: 36px;
    }

    section.main .splitter {
        margin-top: 64px;
        padding-block:40px;
    }

    section.main .splitter .container-wrapper {
        flex-direction: column-reverse;
        justify-content: center;
        align-items: center;
        gap:16px;
    }

    section.main .splitter .container-wrapper h2 {
        font-size: 24px;
        line-height: 36px;
        text-align: center;
        font-weight: 700;
    }

    section.main .splitter .container-wrapper h2 + p {
        font-size:14px;
        line-height: 20px; 
        text-align: center;
    }

    section.main .splitter .container-wrapper .img > span,
    section.main .splitter .container-wrapper .img div {
        display: none;
    }

    section.main-faq {
        padding-inline: 16px;
        padding-top: 84px;
        padding-bottom: 48px;
    }

    section.main-faq h2 {
        font-size:24px;
    }

    section.main-faq h2 + p {
        font-size: 14px;
    }

    section.main-faq .faq-list > li > a {
        font-size: 16px;
        line-height: 24px;
    }

    section.main-faq li.is-expanded a ~ div {
        margin-left: 0;
        font-size: 14px;
        line-height: 23px;
    }
    section.sub {
        padding-bottom: 32px;
    }

    section.sub:has(.breadcrumb) {
        padding-top: 16px;
    }

    section.sub h1 {
        font-size: 30px;
        margin-top: 12px;
    }

    section.sub h1 + p {
        font-size: 14px;
        line-height: 23px;
        margin-top: 12px;
    }

    section.sub h2 {
        margin-top: 40px;
        font-size: 18px;
    }

    section.sub .desc.green {
        padding: 20px;
        margin-top: 16px;
    }

    section.sub .desc.green h3 {
        font-size: 16px;
        line-height: 22px;
    }

    section.sub .desc.green h3 + p {
        font-size: 12px;
        line-height: 20px;
        margin-top: 12px;
    }

    section.about .compare {
        grid-template-columns: 1fr;
        gap:12px;
        margin-top: 20px;
    }

    section.about .compare > li {
        padding: 16px;
    }

    section.about .compare h4 {
        font-size: 16px;
    }

    section.about ol {
        margin-top: 16px;
        margin-left: 28px;
        gap: 26px;
    }

    section.about ol li {
        flex-direction: column;
        align-items: flex-start;
        padding-left: 32px;
        gap:2px;
    }
    section.about ol li h4 {
        font-size: 16px;
    }

    section.about ol li p {
        font-size: 14px;
    }

    section.sub .title-wrapper {
        margin-top: 64px;
    }

    section.sub .title-wrapper span {
        font-size: 12px;
        border: none;
    }

    section.sub h2 + p, section.sub .title-wrapper + p {
        font-size: 14px;
        line-height: 23px;
    }

    section.about ul.gallery {
        margin-top: 16px;
        grid-template-columns: 1fr 1fr;
        gap:12px;
    }

    section.about .download {
        margin-top: 56px;
        flex-direction: column;
        padding: 24px;
        gap:20px;
    }

    section.about .download h3 {
        font-size: 16px;
    }

    section.about .download a {
        font-size:14px;
        padding:8px 48px;
        border-radius: 6px;
    }

    section.sub .list {
        grid-template-columns: 1fr;
        gap:16px;
    }
    section.sub .list ol li {
        font-size: 10px;
        line-height: 15px;
    }
    section.sub .list h3 {
        font-size: 16px;
        line-height: 20px;
    }

    section.sub .search-container dl dd label {
        font-size: 12px;
    }

    section.sub .list h3 + p {
        font-size: 12px;
        line-height: 16px;
    }

    .activity-hero {
        height: 200px;
        gap:12px;
    }
    .activity-hero h1 {
        font-size: 30px;
        line-height: 36px;
    }

    .activity-hero h1 + p {
        font-size: 16px;
        line-height: 24px;
    }

    section.activity .result {
        margin-top: 16px;
        flex-direction: column;
        align-items: flex-start;
    }

    section.activity .activity-list {
        grid-template-columns: 1fr 1fr;
        gap:16px;
    }

    section.sub.recruit {
        background-color: #fff;
    }

    section.sub table.recruit tr {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    section.sub table.recruit tr:has(th) {
        display: none;
    }

    section.sub table.recruit tr td {
        display: block;
        border: none;
        padding: 8px 16px;
    }

    section.sub table.recruit tr td:first-of-type {
        display: none;
    }

    section.sub table.recruit tr td:nth-of-type(2) {
        display: block;
        width: 100%;
        order: 3;
        color:#000;
        font-size: 16px;
        font-weight: 500;
        line-height: 21px; /* 140% */
    }

    section.sub table.recruit tr td:nth-of-type(2) a {
        display: block;
        width: 100%;
        height: 100%;
        background: url(../images/common/ic_arrow_right_gray.svg) no-repeat transparent right center;
        padding-right: 30px;

    }

    section.sub table.recruit tr td:nth-of-type(3) {
        order: 1;
        padding-top: 16px;
    }

    section.sub table.recruit tr td:nth-of-type(4) {
        order: 4;
        width: 100%;
        text-align: left;
        color: #55616D;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px; /* 133.333% */
        border-bottom: solid 1px #F3F5F6;
    }

    section.sub table.recruit tr td:nth-of-type(5) {
        order: 2;
        background: url(../images/common/ic_cal_gray.svg) no-repeat transparent left center;
        padding-left: 20px;
        font-size: 12px;
        font-weight: 400;
        line-height: 16px;
        display: flex;
        align-items: center;
    }

    section.sub table.recruit {
        width: calc(100% + 32px);
        margin-left: -16px;
        margin-top: 0;
        box-shadow:none;
    }

    section.recruit form {
        border:none;
        width: calc(100% + 32px);
        margin-left: -16px;
        box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.07), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
        padding-bottom: 24px;
        margin-top: 16px;
    }

    section.sub .search-container.single {
        border: none;
        box-shadow: none;
        margin-top: 0;
    }

    section.sub .filter-container {
        padding-inline: 0px;
        margin-top: 8px !important;
        gap:8px;
    }

    section.recruit h1 {
        font-size: 20px;
        line-height: 28px; /* 140% */
        letter-spacing: -0.5px;
    }

    section.recruit .recruit-info-wrapper {
        background: rgba(242, 253, 247, 0.30);
        border-top: solid 1px #F3F5F6;
        border-bottom: solid 1px #F3F5F6;
        padding-block: 24px 32px;
        padding-inline: 16px;
        width: calc(100% + 32px);
        margin-left: -16px;
        margin-top: 16px;
    }

    section.recruit .recruit-info-wrapper .recruit-ing,
    section.recruit .recruit-info-wrapper .recruit-pre,
    section.recruit .recruit-info-wrapper .recruit-done {
        margin-top: 0;
    }

    section.recruit .summary {
        grid-template-columns: 1fr;
        margin-top: 24px;
    }

    section.recruit .summary .left {
        padding: 0;
        border: none;
        box-shadow: none;
    }

    section.recruit .summary .left dl {
        border: none;
        padding-block:16px;
    }

    section.recruit .summary .right {
        padding: 0;
        border: none;
        box-shadow: none;
    }

    section.recruit .summary .left dt {
        font-size: 16px;
        padding-left: 32px;
    }

    section.recruit .summary .left dl dd {
        border-radius: 14px;
        border: 1px solid #F3F4F6;
        background: #F9FAFB;
        padding:16px;
        font-size: 14px;
        line-height: 23px;
        height: auto;
    }

    section.recruit .summary .right h4 {
        font-size: 16px;
        padding-left: 32px;
        background-image: url(../images/common/ic_cal_green.svg);
    }

    section.recruit .summary .right dl dt {
        font-size:14px;
    }

    section.recruit .info-desc {
        padding: 16px;
    }
    section.recruit .info-desc h4 {
        font-size: 16px;
    }

    section.recruit .info-desc h4 + p {
        font-size: 14px;
        line-height: 23px;
    }

    section.recruit .attachment {
        background: #F9FAFB;
        width: calc(100% + 32px);
        margin-left: -16px;
        padding: 24px 20px;
    }

    section.recruit .attachment h4 {
        font-size: 14px;
        background: none;
        padding-left: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    section.recruit .attachment h4 span {
        font-weight: 400;
    }
    section.recruit .attachment h4 span::after {
        content: "건";
    }

    section.recruit .attachment ol {
        border: none;
        border-radius: 0;
        background: transparent;
        gap:8px;
        display: flex;
        flex-direction: column;
    }

    section.recruit .attachment ol li {
        background-color: #fff;
        border-radius: 12px;
        border: 1px solid #F3F5F6;
        padding: 14px 14px 14px 46px;
    }

    section.recruit .attachment ol li a {
        font-size: 14px;
        font-weight: 500;
        line-height: 20px;
        padding-right: 16px;
    }

    section.recruit .buttons.center {
        border: none;
        margin-top: 16px;
        padding-block: 0;
        padding-bottom: 32px;
        flex-direction: column-reverse;
        gap:32px;
    }

    section.recruit .buttons.center a.white {
        padding-block: 16px;
        font-size: 16px;
        font-weight: 700;
        line-height: 26px;
        border-radius: 14px;
        background: #FFF;
        text-align: center;
        box-shadow: 0 20px 25px 0 rgba(184, 184, 184, 0.30), 0 10px 10px 0 rgba(98, 98, 98, 0.30);
        display: flex;
        gap:8px;
        align-items: center;
        justify-content: center;
    }

    section.recruit .buttons.center a.white::after {
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        background: url(../images/common/ic_arrow_right.svg) no-repeat transparent center;
    }

    section.recruit .buttons.center a.green {
        padding-block: 16px;
        font-size: 16px;
        font-weight: 700;
        line-height: 26px;
        border-radius: 14px;
        text-align: center;
        border-radius: 14px;
        background: #22C370;
        box-shadow: 0 20px 25px 0 rgba(34, 195, 112, 0.30), 0 10px 10px 0 rgba(34, 195, 112, 0.30);
        display: flex;
        gap:8px;
        align-items: center;
        justify-content: center;
    }

    section.recruit .buttons.center a.green::after {
        content: "";
        display: block;
        width: 20px;
        height: 20px;
        background: url(../images/common/ic_arrow_right_white.svg) no-repeat transparent center;
    }

    section.recruit .mo-title:has(img) {
        display:flex;
        align-items:center;
        gap:8px;
        margin-top:48px;
    }

    section.recruit .board-navi {
            margin-top:16px;
    }

    section.activity .double-layer:has(.right) {
        grid-template-columns: 1fr;
        gap:32px;
    }

    section.activity .activity-list.second-type {
        grid-template-columns: 1fr 1fr;
    }

    section.activity .double-layer .right > ul  {
        display: grid;
        grid-template-columns:  1fr 1fr;
        gap: 16px;
        align-items: stretch;
    }

    section.activity .double-layer .right > ul > li:nth-child(2) h4 {
        margin-top: 0;
    }

    section.activity .double-layer:has(.right) .left {
        order : 1;
    }
    section.activity .double-layer:has(.right) .pagination {
        order : 2;
        margin:0;
    }

    section.activity .double-layer:has(.right) .right {
        order : 3;
    }

    section.float-activity .mo-title {
        height:48px;
        display:grid;
        grid-template-columns:auto 1fr;
        align-items:center;
        background:#fff;
        padding-inline:16px;
        border-bottom:solid 1px #DEE1E6;
    }

    section.float-activity .mo-title h2 {
        text-align:center;
        font-size: 18px;
        font-style: normal;
        font-weight: 700;
        line-height: 28px; /* 155.556% */
    }

    section.float-activity .content-container .close {
        display:none;
    }

    section.float-activity .head h2 {
        font-size: 24px;
        line-height: 30px; /* 125% */
    }

    section.float-activity .tabs {
        padding-left:0;
        gap:0;
    }
    section.float-activity .tabs li {
        flex-grow: 1;
        text-align:center;
    }

    section.float-activity .tabs li a {
        font-size:14px;
    }

    section.float-activity .content {
        font-size:14px;
    }

    section.sub .search-container {
        margin-top:24px;
        margin-inline:16px;
    }

    /*footer*/

    footer {
        padding-top: 24px;
    }
    footer .container:has(.left) {
        grid-template-columns: 1fr;
        padding-inline:24px;
        gap:32px;
    }

    footer .container .right > ul {
        justify-content: flex-start;
    }

    footer .container .left p {
        font-size: 12px;
    }

    footer .container .left .sns {
        margin-top: 16px;
    }
    footer .container .left .sns a {
        width: 32px;
        height: 32px;
        border-radius: 16px;
        border: 1px solid #DEE1E6;
        background-color: #FFF;
    }

    footer .container .right > ul h4 {
        font-size: 14px;
    }

    footer .container .right > ul li,
    footer .container .right > ul a {
        font-size: 12px;
    }

    footer hr {
        margin-top: 32px;
        margin-inline: 24px;
    }

    footer .container .copyright ul {
        margin-top: 24px;
    }
}

@media (max-width: 640px) {

    section.sub .search-container {
        margin-inline: 0;
    }

    section.recruit .search-container {
        margin-inline: 16px;
    }

    section.recruit .info {
        flex-direction:column;
        align-items:flex-start;
        gap:4px;
    }
    section.activity .double-layer .right > ul {
        grid-template-columns: 1fr;
    }

    section.recruit .board-navi li {
        border-radius: 14px;
        border: 1px solid #F3F5F6;
        background: #FFF;
        grid-template-columns:1fr;
        gap:4px;
        padding:16px;
        margin-bottom:12px;
    }

    section.recruit .board-navi li:has(span.prev) {
        background:url(../images/common/ic_arrow_up.svg) no-repeat transparent right 16px center;
    }

    section.recruit .board-navi li:has(span.next) {
        background:url(../images/common/ic_arrow_down.svg) no-repeat transparent right 16px center;
    }

    section.recruit .board-navi li span.prev,
    section.recruit .board-navi li span.next {
        display:none;
    }

    section.recruit .board-navi li a {
        font-size:14px;
        display:block;
        width:calc(100% - 32px);
        white-space: nowrap;  /* 줄바꿈 방지 */
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 1; /* 보여줄 줄 수 */
        -webkit-box-orient: vertical;
    }

    section.recruit .board-navi li span:last-child {
        font-size:12px;
    }

    section.sub .search-container dl dd {
        gap:8px;
    }

    section.sub .search-container button {
        padding:8px 16px;
    }

    section.sub .search-container .select-wrapper {
        flex-grow:1;
        justify-content:flex-end;
    }

    section.sub .mo-pagination {
        display: flex;
        gap:16px;
        justify-content: center;
    }

    section.sub .pagination {
        display:none;
    }

    .mo-more {
        display:block;
        width:200px;
        margin:auto;
        border-radius: 10px;
        border: 1px solid #F3F5F6;
        background: #FFF;
        text-align:center;
        font-size: 14px;
        font-style: normal;
        font-weight: 500;
        line-height: 22px; /* 157.143% */
        padding-block:8px;
        margin-top:24px;
    }

    section.recruit .desc {
        display:none;
    }
}
@media (max-width: 500px) {
    section.main .swiper-container ul {
        height: 512px;
    }

    section.main .hero > li:first-child ul a:hover {
        background-image: none;
        padding-right: 0;
    }

    section.activity .activity-list {
        grid-template-columns: 1fr;
        gap:24px;
    }

    section.activity .activity-list.second-type {
        grid-template-columns: 1fr;
        gap:24px;
    }

    section.activity .tabs { 
        justify-content: flex-start;
        padding-bottom:16px;
    }

    section.activity .tabs a {
        padding-block:8px;
    }

    section.float-activity {
        top:0px;
        left:0px;
        right: 0px;
        bottom: 0px;
        width: 100%;
        transform:none;
        height: 100vh;
        border-radius: 0;
    }

    section.float-activity .content-container {
        height: calc(100vh - 48px);
        max-height: 100vh;
    }

    section.float-activity .summary {
        grid-template-columns: 1fr;
        gap:12px;
        padding: 20px;
    }

    section.float-activity h3,
    section.float-activity h4,
    section.float-activity .schedule {
        margin-inline: 20px;
    }

    section.float-activity .content {
        padding-inline: 20px;
    }

    section.recruit .summary .right dl {
        flex-direction: column;
        align-items: flex-start;
        gap:2px;
    }

    section.float-info {
        border-radius: 16px;
        border: 1px solid #DEE1E6;
        background: #FFF;
        box-shadow: 0 8.5px 13.75px 0 rgba(23, 26, 31, 0.22), 0 0 2px 0 rgba(23, 26, 31, 0.08);
        overflow: hidden;
    }
    section.float-info .content-container .logo {
        grid-template-columns: 80px 1fr;
        gap:16px;
    }

    section.float-info .content-container .logo .img {
        padding: 4px;
        order :2
    }
    section.float-info .content-container .logo .title-wrapper {
        order:3;
    }

    section.float-info .content-container .logo .close {
        order:1;
        grid-column: 1 / -1;
        margin-left: auto;
    }

    section.float-info .content-container .tags {
        margin-top: 8px;
    }

    section.float-info .content-container h3 {
        font-size: 16px;
    }

    section.float-info .content-container .channels {
        flex-direction: column;
        align-items: flex-start;
        gap:8px;
    }

    section.float-info .content-container .channels > a {
        margin-left: auto;
        font-size: 16px;
    }

    section.sub .search-container select {
        font-size: 12px;
        min-width: 0;
        flex:1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

@media (max-width: 360px) {
    section.sub .search-container .select-wrapper {
        flex-direction: column;
    }
}