@charset "utf-8";

/* ============================================================
   new2026.css - 2026 리뉴얼 CSS (튜닝본)
   ※ 기존 CSS를 override 하는 방식으로 적용
   ※ 브레이크포인트: 1024px 단일 (모바일/태블릿 < 1024 ≤ 데스크톱)
   ※ 컨테이너 max-width: 1280px (FullHD 에서도 양옆 자연스러운 여백)
   ※ Type scale: 작고 모던
        --fs-xs: 12,  --fs-sm: 13,  --fs-base: 14,  --fs-md: 16,
        --fs-lg: 18,  --fs-xl: 22,  --fs-2xl: 28
   ============================================================ */

/* ============================================================
   0. 디자인 토큰 (CSS 변수)
   ============================================================ */
:root {
    --site-container: 1280px;
    --site-gutter: 24px;

    /* Type scale (작고 모던) */
    --fs-xs:   12px;
    --fs-sm:   13px;
    --fs-base: 14px;
    --fs-md:   16px;
    --fs-lg:   18px;
    --fs-xl:   22px;
    --fs-2xl:  28px;

    /* Color tokens (사이트 기본색 유지) */
    --c-primary:      #1a6fd4;
    --c-primary-dark: #155bb0;
    --c-text:         #222;
    --c-text-sub:     #555;
    --c-text-mute:    #888;
    --c-line:         #e3e7ee;
    --c-line-soft:    #eef0f4;
    --c-bg-soft:      #f4f5f7;
}

/* ============================================================
   GLOBAL — 가로 스크롤 방지 안전망
   어떤 자식 컴포넌트가 폭을 넘쳐도 가로 스크롤 안 나오게.
   sticky 동작에는 영향 없음.
   ============================================================ */
html, body { overflow-x: hidden; }
#wrap { overflow-x: clip; } /* clip 은 sticky 깨지지 않음 */

/* ============================================================
   1. HEADER (toparea) 고정
   ============================================================ */
.toparea {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: auto !important;
    background-color: #fff;
    z-index: 600;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
}
.toparea .top_inner::after { content: none; clear: none; }

/* top_inner 를 flex 로: gg_logo(좌) | 빈 공간 | membership_bar(우)
   이전 main.css 의 float + width:300/1060 은 1280 안에 안 들어가서 줄바꿈 발생. flex 로 풀어줌 */
.toparea .top_inner {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-top: 10px !important;
}
.toparea .gg_logo {
    width: auto !important;
    float: none !important;
    flex: 0 0 auto;
    padding-left: 0 !important;
    margin: 0 !important;
}
.toparea .gg_logo img { display: block; max-height: 28px; width: auto; }
.toparea .top_inner .membership_bar {
    width: auto !important;
    float: none !important;
    flex: 0 0 auto;
    padding: 0 !important;
    margin: 0 !important;
    display: flex !important;
    gap: 16px;
    flex-wrap: nowrap;
    white-space: nowrap;
}
.toparea .top_inner .membership_bar li { margin: 0 !important; line-height: 1.4; }
.toparea .top_inner .membership_bar li a { font-size: var(--fs-xs); color: #555; }

/* ============================================================
   2. TOPMENU 드롭다운 위치 보정 (PC)
   ============================================================ */
.toparea .topmenu .gnb > li .menu_list,
.toparea .total_search_area,
.toparea .allmenu-category {
    left: 50%;
    transform: translateX(-50%);
}

/* ============================================================
   3. BODY 여백 (fixed 헤더 높이만큼 확보)
   ============================================================ */
#wrap,
body#main #wrap {
    padding-top: 128px;
}

/* ============================================================
   4. GNB 메뉴 항목
   ============================================================ */
.toparea .topmenu .gnb > li > a {
    padding: 0 35px;
    display: block;
    font-size: var(--fs-md);
    font-weight: 500;
    line-height: 88px;
    text-align: center;
}

/* ============================================================
   5. 컨테이너 max-width 1280px 통합
   기존 width:1360px 고정값을 max-width 로 변환 → FullHD에서도 자연스러운 여백,
   1280px 미만에서는 100% 폭으로 자동 축소
   ============================================================ */
.toparea .top_inner,
.toparea .topmenu,
.toparea .total_search_area,
.toparea .allmenu-category,
.maincontents .main_visual .visual_box,
.maincontents .section.section1 .area,
.maincontents .section.section1 .area .job_information,
.maincontents .section.section1 .area .job_information2,
.maincontents .section.section2 .area,
.maincontents .section.section3 .area,
.maincontents .section.section_visitor .area,
.maincontents .main_visual .visual_status_inner,
.section_visitor .area,
.bottomarea .agree_area,
.bottomarea .footer .area,
.midarea .subtoparea .title_area,
.area {
    width: 100% !important;
    max-width: var(--site-container) !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-gutter);
    padding-right: var(--site-gutter);
    box-sizing: border-box;
}

/* LNB 영역 — PC/모바일 공통: 양옆 padding/border 없이 가득 채움 */
.midarea .lnbarea {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.midarea .lnbarea .lnbmenu {
    width: 100% !important;
    max-width: var(--site-container) !important;
    margin-left: auto;
    margin-right: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-sizing: border-box;
}
/* 안의 dropdown-menu li 들도 양옆 끝까지 — 첫/마지막 li 의 좌우 보더만 정리 */
.midarea .lnbarea .lnbmenu .dropdown-menu { width: 100%; }

/* 상세 페이지 본문(.contentsarea) — 사이트 컨테이너와 동일 폭으로 통일.
   다른 영역 max-width 1280 + padding 24 로 일관. 가입약관 같은 페이지에서 양옆 빈 여백 답답함 해소. */
.contentsarea {
    width: 100% !important;
    max-width: var(--site-container) !important;   /* 1280px */
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--site-gutter);              /* 24px */
    padding-right: var(--site-gutter);
    box-sizing: border-box;
}

/* ============================================================
   5-1. 일감정보 카테고리 드롭다운 (모바일 전용)
   PC 에서는 select 숨김 (카드 ul 사용), 모바일에서는 select 보이고 카드 ul 의
   카테고리 카드 부분만 숨김. 카테고리 클릭 → 리스트 표시 흐름은 유지.
   ============================================================ */
.job_category_select { display: none; } /* PC 기본 숨김 */

/* ============================================================
   5-2. 메인 일감정보 가로 넘침 차단
   기존 main.css 의 width:1360px / li width:175px / .slick-list width:1380px 가
   max-width 1280 안에서 안 맞고 모바일에서 가로 스크롤 유발.
   flex wrap 으로 풀고 자식들도 % 단위로.
   ============================================================ */
.maincontents .section.section1 .area .job_information,
.maincontents .section.section1 .area .job_information2 {
    flex-wrap: wrap;
    gap: 12px;
}
.maincontents .section.section1 .area .job_information > li,
.maincontents .section.section1 .area .job_information2 > li {
    width: auto !important;
    flex: 1 1 calc(16.6667% - 12px); /* 6개 한 줄 */
    min-width: 130px;                /* 너무 좁아지면 줄바꿈 */
    box-sizing: border-box;
}
/* 카테고리 텍스트 — 폭 좁아도 안 넘치게 word-break + clamp + line-clamp */
.maincontents .section.section1 .area .job_information > li > a p,
.maincontents .section.section1 .area .job_information2 > li > a p {
    width: 100% !important;
    min-width: 0;
    padding: 0 4px;
    box-sizing: border-box;
    word-break: keep-all;
    overflow-wrap: anywhere;
    text-overflow: ellipsis;
    font-size: clamp(11px, 1.1vw, 14px);
    line-height: 1.35;
    height: auto !important;       /* main.css 의 height:77px 풀어 텍스트가 길어도 깨지지 않게 */
    min-height: 44px;
}
/* 슬라이드 영역 — 1380 고정 풀고 부모 폭 가둠. main.css 의 overflow:inherit (visible) 가
   양옆 카드를 화면 밖으로 튀어나가게 만드므로 hidden 강제 */
.maincontents .section.section1 .area .job_information > li .list,
.maincontents .section.section1 .area .job_information2 > li .list {
    overflow: hidden !important;
}
.maincontents .section.section1 .area .job_information > li .list .slick-list,
.maincontents .section.section1 .area .job_information2 > li .list .slick-list {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

/* ============================================================
   5-3. 방문자 카운트 카드 — 텍스트 ellipsis 없이 다 보이게
   카드가 좁아져도 라벨이 줄바꿈으로 다 보이도록 nowrap/ellipsis 제거.
   카드 자체는 폭 좁으면 두 카드가 wrap 되어 한 줄 1개씩.
   ============================================================ */
.maincontents .visitor_count {
    flex-wrap: wrap;
    min-width: 0;
}
.maincontents .visitor_count li {
    min-width: 0 !important;
    flex: 1 1 auto;
    box-sizing: border-box;
    flex-wrap: wrap;                /* li 안 라벨/숫자/단위가 wrap 가능 */
    column-gap: 6px; row-gap: 2px;
}
.maincontents .visitor_count li .label,
.maincontents .visitor_count li .count,
.maincontents .visitor_count li .unit {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    word-break: keep-all;
    overflow-wrap: anywhere;
    min-width: 0;
}
/* hero_b 안에서도 동일 — 좌측 패널이 좁아지면 카드 두 개를 세로 stack */
.maincontents .main_visual.hero_b .hero_b__left .visitor_count {
    flex-wrap: wrap;
}
.maincontents .main_visual.hero_b .hero_b__left .visitor_count li {
    flex: 1 1 100%;                 /* 한 줄에 1개씩 — 텍스트 다 보이도록 */
    min-width: 0 !important;
}
.maincontents .main_visual.hero_b .hero_b__left .visitor_count .label {
    font-size: 13px;
    margin-right: auto;     /* label 좌측 / count+unit 우측 정렬 */
}
.maincontents .main_visual.hero_b .hero_b__left .visitor_count .count {
    font-size: clamp(18px, 1.6vw, 22px);
    /* clamp 가 좁은 폭에서 자동 축소 */
}
.maincontents .main_visual.hero_b .hero_b__left .visitor_count .unit {
    font-size: 12px;
}

/* ============================================================
   6. Type scale 통합 — 너무 큰 글씨 축소
   ============================================================ */
body { font-size: var(--fs-base); line-height: 1.6; color: var(--c-text); }

/* 사이트 전반 큰 제목 다운사이즈 (페이지별 인라인 스타일은 영향 없음) */
.midarea .subtoparea .title_area h2 { font-size: var(--fs-2xl) !important; line-height: 1.3 !important; }
.contentsarea .subtit h2 { font-size: var(--fs-xl) !important; line-height: 1.35 !important; }

.maincontents h2 { font-size: var(--fs-2xl); line-height: 1.3; letter-spacing: -0.01em; }
.maincontents h3 { font-size: var(--fs-lg); line-height: 1.4; }

/* 카드/리스트 제목 */
.textlist > li a .title h3 { font-size: var(--fs-md) !important; }
.textlist.work > li a .title h3 { font-size: var(--fs-lg) !important; }
.gallaylist h3,
.gallaylist > li h3 { font-size: var(--fs-md); }
.course_area h3 { font-size: var(--fs-md); }

/* board_top / 정렬 라디오 등의 폰트 */
.board_top { font-size: var(--fs-base); }
.board_top .all p { font-size: var(--fs-base); }
.board_top .all span { font-size: var(--fs-md); font-weight: 700; }
.radio_box.order label { font-size: var(--fs-base); }

/* 필터 라벨 / 입력 / 버튼 */
.boardlist_top label { font-size: var(--fs-sm); font-weight: 600; }
.boardlist_top .optionbox select,
.boardlist_top .inpbox input { font-size: var(--fs-base); }
.btn,
.btn2,
.btn3 { font-size: var(--fs-base); }

/* 페이징 */
.paging_area a,
.paging_area button { font-size: var(--fs-sm); }

/* 푸터 */
.bottomarea { font-size: var(--fs-sm); }
.bottomarea .footer .area { font-size: var(--fs-sm); }

/* ============================================================
   7. 메인 비주얼 상태 바 (visual_status)
   ============================================================ */
.maincontents .main_visual .visual_status {
    position: relative;
    z-index: 25;
    margin-top: -18px;
}
.maincontents .main_visual .visual_status_inner {
    display: flex;
    justify-content: center;
}
.maincontents .main_visual .visual_status_indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    padding: 12px 22px;
    background: rgba(255, 255, 255, 0.96);
    border: 1px solid #d6e0ef;
    border-radius: 999px;
    box-shadow: 0 8px 20px rgba(28, 58, 90, 0.08);
}
.maincontents .main_visual .visual_dots { width: auto; }
.maincontents .main_visual .visual_dots .slick-dots {
    position: static;
    display: flex;
    align-items: center;
    gap: 10px;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
}
.maincontents .main_visual .visual_dots .slick-dots::before { display: none; }
.maincontents .main_visual .visual_dots .slick-dots li {
    display: block;
    width: auto;
    height: auto;
    margin: 0;
}
.maincontents .main_visual .visual_dots .slick-dots li button {
    display: block;
    width: 10px;
    min-width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #c8d2df;
    cursor: pointer;
    font-size: 0;
    line-height: 0;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.maincontents .main_visual .visual_dots .slick-dots li.slick-active button {
    background: var(--c-primary);
    transform: scale(1.15);
}

/* 방문자 카운터 (배너 안 또는 별도 섹션 양쪽 호환) */
.section_visitor { padding: 24px 0 0; background: #fff; }
.maincontents .visual_status_visitors { width: 100%; }
.maincontents .visitor_count {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.maincontents .visitor_count li {
    display: flex;
    align-items: center;
    justify-content: flex-start;     /* 좌측 정렬 — 라벨/숫자/단위가 왼쪽에 붙음 */
    gap: 8px;
    flex: 0 1 auto;
    min-width: 220px;
    padding: 14px 18px;
    border: 1px solid #d6e0ef;
    background: #fff;
    border-radius: 8px;
}
.maincontents .visitor_count .label {
    font-size: var(--fs-sm);
    font-weight: 500;
    color: #516173;
}
.maincontents .visitor_count .count {
    font-size: var(--fs-xl);
    font-weight: 800;
    line-height: 1;
    color: var(--c-primary);
}
.maincontents .visitor_count .unit {
    font-size: var(--fs-xs);
    color: #7e8b99;
}

/* ============================================================
   7-2. 메인 배너 — 컨셉 B (carousel: 가운데 활성 슬라이드 + 양옆 흐린 이전/다음)
   - .hero_b 컨테이너에 부드러운 배경
   - 카피(상) → 슬라이드(중) → 인디케이터+방문자(하)
   - .main_slide 는 slick centerMode 로 동작 (이전/다음 미리보기)
   ============================================================ */
.maincontents .main_visual.hero_b {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* 좀 더 진한 그라디언트 — 우측은 살짝 진한 푸른색으로 깊이감 */
    background: linear-gradient(135deg, #dbe7fb 0%, #eef4ff 45%, #d3e1f7 100%);
    margin: 0;
    padding: 0;
}
.maincontents .main_visual.hero_b .hero_b__inner {
    position: relative;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 36px;
    padding-top: 56px;
    padding-bottom: 44px;
}
.maincontents .main_visual.hero_b .hero_b__left {
    position: relative;
    z-index: 3;                 /* 좌측 텍스트 영역을 슬라이드(회전된 양옆) 보다 앞으로 */
    flex: 0 0 44%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 22px;
    padding: 28px 30px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 16px;
    box-shadow: 0 12px 32px rgba(20, 50, 95, 0.12);
}
.maincontents .main_visual.hero_b .hero_b__right {
    position: relative;
    z-index: 1;                 /* 슬라이드 영역은 좌측 패널 뒤로 */
    flex: 1 1 auto;
    min-width: 0;
}
.maincontents .main_visual.hero_b .hero_b__copy { text-align: left; }
.maincontents .main_visual.hero_b .hero_b__copy h2 {
    margin: 0 0 14px;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -0.02em;
    color: #061a36;            /* 거의 검정에 가까운 네이비 — 또렷한 가독성 */
    word-break: keep-all;
}
.maincontents .main_visual.hero_b .hero_b__copy .hero_b__sub {
    margin: 0;
    font-size: 17px;
    font-weight: 600;           /* 굵기 500 → 600 으로 더 또렷 */
    line-height: 1.6;
    color: #1c3155;             /* 더 진한 네이비-슬레이트 */
    word-break: keep-all;
}

/* 우측 영역: Swiper 슬라이드 (Effect: coverflow) + 인디케이터
   coverflow 는 가운데 정면 + 양옆 기울어져 회전. 슬라이드 자체 폭이 필요하고
   양옆 회전 슬라이드가 잘리지 않도록 .swiper 의 overflow 를 visible 로. */
.maincontents .main_visual.hero_b .hero_swiper {
    width: 100%;
    padding: 20px 0;       /* 회전·확대된 슬라이드의 위/아래 그림자 잘리지 않게 */
    overflow: visible;
}
.maincontents .main_visual.hero_b .hero_swiper .swiper-slide {
    width: 460px;          /* 가운데 슬라이드 기준 폭 */
    max-width: 90%;
    height: auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 14px 32px rgba(20, 50, 95, 0.16);
    background: #fff;
    transition: opacity 0.35s ease, filter 0.35s ease;
    opacity: 0.25;                              /* 비활성 슬라이드 매우 흐리게 */
    filter: blur(2px) saturate(0.7);            /* 블러 + 채도 낮춤 */
}
.maincontents .main_visual.hero_b .hero_swiper .swiper-slide-active {
    opacity: 1;
    filter: none;                               /* 활성 슬라이드는 또렷하게 */
}
.maincontents .main_visual.hero_b .hero_swiper .swiper-slide a {
    display: block;
    width: 100%;
    height: 100%;
}
.maincontents .main_visual.hero_b .hero_swiper .swiper-slide a img,
.maincontents .main_visual.hero_b .hero_swiper .swiper-slide img {
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    display: block;
    border: 0;
}
/* prev/next 화살표 — Swiper 기본 스타일 위에 살짝 보강 */
.maincontents .main_visual.hero_b .hero_swiper .swiper-button-prev,
.maincontents .main_visual.hero_b .hero_swiper .swiper-button-next {
    width: 40px; height: 40px;
    background: rgba(255,255,255,0.96);
    border: 1px solid #d6e0ef;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    color: var(--c-primary);
    --swiper-navigation-size: 18px;
}
.maincontents .main_visual.hero_b .hero_swiper .swiper-button-prev::after,
.maincontents .main_visual.hero_b .hero_swiper .swiper-button-next::after {
    font-size: 16px;
    font-weight: 700;
}

/* 슬라이드 바로 아래 인디케이터 (swiper-pagination) */
.maincontents .main_visual.hero_b .hero_swiper__pagination {
    position: static;       /* 기본 absolute 해제 → 슬라이드 아래로 자연스럽게 배치 */
    text-align: center;
    margin-top: 14px;
}
.maincontents .main_visual.hero_b .hero_swiper__pagination .swiper-pagination-bullet {
    width: 10px; height: 10px;
    background: #c8d2df;
    opacity: 1;
    margin: 0 4px;
    transition: background-color 0.2s, transform 0.2s;
}
.maincontents .main_visual.hero_b .hero_swiper__pagination .swiper-pagination-bullet-active {
    background: var(--c-primary);
    transform: scale(1.2);
}

/* 좌측 영역: 카피와 방문자수 사이 간격 + 가독성 강화 */
.maincontents .main_visual.hero_b .hero_b__left .visual_status_visitors {
    width: auto; flex: 0 0 auto;
}
.maincontents .main_visual.hero_b .hero_b__left .visitor_count {
    gap: 10px;
    justify-content: flex-start;
    flex-wrap: wrap;
}
.maincontents .main_visual.hero_b .hero_b__left .visitor_count li {
    min-width: 0;
    padding: 12px 18px;
    background: #fff;                                  /* 완전 불투명 흰색 */
    border: 1px solid #c7d4e7;
    box-shadow: 0 6px 16px rgba(20, 50, 95, 0.10);     /* 그림자 강화 */
    border-radius: 10px;
}
.maincontents .main_visual.hero_b .hero_b__left .visitor_count .label {
    font-size: 13px;
    font-weight: 600;
    color: #455a78;                                    /* 진한 슬레이트 */
}
.maincontents .main_visual.hero_b .hero_b__left .visitor_count .count {
    font-size: 22px;                                   /* 키움 — 또렷한 숫자 */
    font-weight: 800;
    color: #0d51a8;                                    /* 진한 블루 */
}
.maincontents .main_visual.hero_b .hero_b__left .visitor_count .unit {
    font-size: 12px;
    font-weight: 500;
    color: #6b7d96;
}

/* ============================================================
   7-3. 각 메인 섹션 패딩 통일.
   section1 의 일감 .list 는 main.css 에서 position:absolute top:400 으로 떠있어
   section 의 height 가 고정되어야 다음 section 과 겹치지 않음.
   PC 에서는 section1 만 고정 height 유지(720), section2/3 은 auto.
   ============================================================ */
.maincontents .section.section1 {
    height: 720px !important;          /* absolute .list (top 400 + 슬라이드 ~280) 영역 확보 */
    min-height: 720px !important;
    padding-top: 80px !important;
    padding-bottom: 60px !important;
    position: relative !important;     /* 자식 .list absolute 기준 */
    overflow-x: clip;                  /* 슬라이드 트랙이 양옆으로 튀어나가도 가로 스크롤 차단 */
}
.maincontents .section.section2,
.maincontents .section.section3 {
    height: auto !important;
    min-height: 0 !important;
    padding-top: 60px !important;
    padding-bottom: 60px !important;
    overflow-x: clip;            /* 강의 슬라이드/카드가 양옆 튀어나가도 가로 스크롤 차단 */
}

/* ============================================================
   7-4. 메인 온라인 강의 슬라이드
   PC: slidesToShow 4 (한 줄 4개)
   모바일(≤1200): rows:2 + slidesPerRow:2 (2x2 그리드)
   ── slick rows 모드는 슬라이드 폭을 inline width 로 계산하므로
      flex/float:none 같은 룰을 강제하면 폭이 깨짐. slick 기본 동작에 맡김.
   ============================================================ */
.maincontents .section.section2 .area .course_area {
    padding: 0 60px;
    position: relative;
    width: 100%;
    box-sizing: border-box;
}
.maincontents .section.section2 .area .course_area .slick-list {
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
}
/* slick-slide 는 slick 이 inline width 부여 — float/flex 강제 X */
.maincontents .section.section2 .area .course_area .slick-slide {
    box-sizing: border-box;
}
/* rows 모드에서 한 그리드 셀의 wrapper(.slick-slide > div > div) — 카드 간격 */
.maincontents .section.section2 .area .course_area .slick-slide > div > div {
    padding: 6px 0;
    box-sizing: border-box;
}
/* 화살표 — 슬라이드 세로 가운데 + 좌우 가장자리.
   slick.css 가 next 에 rotate(180deg) 로 화살표 방향을 반대로 만듦. translateY 와 함께 보존. */
.maincontents .section.section2 .area .course_area .slick-arrow {
    position: absolute !important;
    top: 50% !important;
    z-index: 5;
    margin: 0 !important;
}
.maincontents .section.section2 .area .course_area .slick-prev {
    left: 0 !important;
    transform: translateY(-50%) !important;
}
.maincontents .section.section2 .area .course_area .slick-next {
    right: 0 !important;
    transform: translateY(-50%) rotate(180deg) !important;
}

/* ============================================================
   8. 모바일/태블릿 (≤1024px) — 단일 미디어쿼리
   기존 1400px 중간 단계는 모두 제거. 1024px 기준으로 두 단계로 통합.
   ============================================================ */
@media screen and (max-width: 1200px) {
    /* 모바일: section1 fixed height 해제 — drop-down + 리스트 normal flow 라 콘텐츠 길이만큼 자동 */
    .maincontents .section.section1 {
        height: auto !important;
        min-height: 0 !important;
        padding-top: 40px !important;
        padding-bottom: 30px !important;
    }
    .maincontents .section.section2,
    .maincontents .section.section3 {
        padding-top: 40px !important;
        padding-bottom: 30px !important;
    }

    /* wrap 여백 = top_inner(~40px) + topmenu(60px) ≈ 100px */
    #wrap,
    body#main #wrap { padding-top: 100px; }

    /* 검색/전체메뉴 패널: PC 의 transform/center 원복 */
    .toparea .total_search_area {
        left: 0;
        transform: none;
        top: 100px;
    }
    .toparea .allmenu-category {
        left: 0 !important;
        transform: none !important;
        top: 100px;
        height: calc(100% - 100px) !important;
    }
    .toparea .allmenu-category .menu_box { position: relative; }

    /* 브랜드 로고 */
    .toparea .topmenu > a {
        display: inline-flex;
        align-items: center;
        padding: 8px 0;
    }
    .toparea .topmenu > a img {
        max-height: 44px;
        width: auto;
    }

    /* 닫기 버튼 + membership_bar */
    .toparea .allmenu-category .btn_close { z-index: 2; }
    .toparea .allmenu-category .membership_bar { padding-right: 50px; }

    /* GNB 항목 패딩 축소 */
    .toparea .topmenu .gnb > li > a { padding: 0 18px; line-height: 60px; }

    /* 컨테이너 — 모바일에서는 좌우 여백 12px 로 통일 (이전 16 → 12)
       전체메뉴(allmenu-category) / 검색패널(total_search_area) / LNB 는 풀폭이므로 제외 */
    .toparea .top_inner,
    .toparea .topmenu,
    .maincontents .main_visual .visual_box,
    .maincontents .main_visual .visual_status_inner,
    .maincontents .section.section1 .area,
    .maincontents .section.section1 .area .job_information,
    .maincontents .section.section1 .area .job_information2,
    .maincontents .section.section2 .area,
    .maincontents .section.section3 .area,
    .maincontents .section.section_visitor .area,
    .section_visitor .area,
    .bottomarea .agree_area,
    .bottomarea .footer .area,
    .contentsarea,
    .midarea .subtoparea .title_area,
    .area {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    /* 전체메뉴 패널 / 검색 패널 / LNB 드롭다운 — 모바일에선 화면 끝까지 풀폭 */
    .midarea .lnbarea .lnbmenu,
    .toparea .allmenu-category,
    .toparea .total_search_area {
        max-width: 100% !important;
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* 모바일 본문 + 페이지 상단 영역 — 좌우 여백 통일 (12px).
       .lnbmenu 는 풀폭이라 제외 */
    .contentsarea,
    .midarea .subtoparea .title_area {
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    /* 본문 자식 컨테이너의 추가 가로 padding 도 풀어 이중 여백 방지 */
    .contentsarea .boardview,
    .contentsarea .board_detail,
    .contentsarea .membership_area,
    .contentsarea .agree_box,
    .contentsarea .write_box {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    /* 약관 본문 ul/ol 의 들여쓰기 — 모바일에선 살짝 줄임 */
    .contentsarea ul, .contentsarea ol { padding-left: 1.2em; }

    /* 비주얼 상태 바 */
    .section_visitor { padding-top: 18px; }
    .maincontents .visitor_count li { min-width: 0; flex: 1 1 0; }

    /* 큰 제목 더 줄임 (모바일에서는 한 단계 더 작게) */
    .midarea .subtoparea .title_area h2 { font-size: 22px !important; }
    .contentsarea .subtit h2 { font-size: 18px !important; }
    .maincontents h2 { font-size: 22px; }
    .maincontents h3 { font-size: 16px; }

    /* 메인 배너 hero_b 모바일: 좌우 분할 → 세로 stack */
    .maincontents .main_visual.hero_b .hero_b__inner {
        flex-direction: column;
        align-items: stretch;
        padding-top: 32px;
        padding-bottom: 24px;
        gap: 20px;
    }
    .maincontents .main_visual.hero_b .hero_b__left {
        flex: 1 1 auto;
        max-width: 100%;
        gap: 16px;
        padding: 20px 22px;          /* 모바일 패널 패딩 약간 줄임 */
    }
    .maincontents .main_visual.hero_b .hero_b__copy h2 { font-size: 22px; }
    .maincontents .main_visual.hero_b .hero_b__copy .hero_b__sub { font-size: 14px; }
    .maincontents .main_visual.hero_b .hero_swiper .swiper-slide {
        width: min(320px, 80vw);     /* 화면 80% 또는 320 중 작은 값 — 모바일 안전 */
    }
    .maincontents .main_visual.hero_b .hero_swiper .swiper-button-prev,
    .maincontents .main_visual.hero_b .hero_swiper .swiper-button-next {
        width: 32px; height: 32px;
    }

    /* 모바일 일감정보: 카테고리는 드롭다운(select) 으로, 카드 형태는 숨김.
       active 카테고리 li 의 .list 만 select 아래에 보임. */

    /* select 보이게 — PC 에서 숨겨둔 룰 오버라이드 */
    .job_category_select {
        display: block !important;
        width: 100%;
        padding: 12px 14px;
        font-size: 15px;
        font-weight: 600;
        color: #222;
        background-color: #fff;
        border: 1px solid var(--c-line);
        border-radius: 10px;
        margin-bottom: 14px;
        box-sizing: border-box;
        appearance: none;
        -webkit-appearance: none;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%231a6fd4' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
        background-repeat: no-repeat;
        background-position: right 14px center;
        background-size: 14px;
        padding-right: 40px;
    }
    .job_category_select:focus {
        outline: none;
        border-color: var(--c-primary);
        box-shadow: 0 0 0 3px rgba(26, 111, 212, 0.12);
    }

    /* 카테고리 ul: 드롭다운으로 대체했으므로 카드 부분은 숨기고
       active 카테고리 의 .list 만 그 자리에 노출 */
    .maincontents .section.section1 .area .job_information,
    .maincontents .section.section1 .area .job_information2 {
        flex-direction: column;
        gap: 0;
    }
    .maincontents .section.section1 .area .job_information > li,
    .maincontents .section.section1 .area .job_information2 > li {
        flex: 0 0 auto;
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        margin: 0 !important;
    }
    /* 카테고리 카드 자체(>a)는 드롭다운으로 대체되었으므로 모두 숨김 */
    .maincontents .section.section1 .area .job_information > li > a,
    .maincontents .section.section1 .area .job_information2 > li > a {
        display: none !important;
    }

    /* 일감 리스트 — absolute top:400 풀고 normal flow */
    .maincontents .section.section1 .area .job_information > li .list,
    .maincontents .section.section1 .area .job_information2 > li .list {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        margin: 0 !important;
    }
    /* 비활성 카테고리의 리스트만 숨김. active 의 list 는 그대로 보임 */
    .maincontents .section.section1 .area .job_information > li:not(.active) .list,
    .maincontents .section.section1 .area .job_information2 > li:not(.active) .list {
        display: none !important;
    }
    .maincontents .section.section1 .area .job_information > li.active .list,
    .maincontents .section.section1 .area .job_information2 > li.active .list {
        display: block !important;
    }

    /* 모바일 강의 슬라이드 — 화살표 작게 + 카드 가장자리에 붙임 */
    .maincontents .section.section2 .area .course_area { padding: 0 40px; }
    .maincontents .section.section2 .area .course_area .slick-arrow {
        width: 36px !important; height: 36px !important;
    }

    /* slick rows 모드 — 한 슬라이드 그룹 안 셀들을 grid 로 가로 N개 배치
       (slick.css 에 rows 모드 셀 layout 룰이 없어서 직접 처리) */
    .maincontents .section.section2 .area .course_area .slick-slide > div {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
        gap: 8px;
        width: 100% !important;
        box-sizing: border-box;
    }
    .maincontents .section.section2 .area .course_area .slick-slide > div > div {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        box-sizing: border-box;
    }
    /* slick 이 li 에 inline style 로 width:50% 를 강제로 부여 (slidesPerRow=2 일 때).
       해당 inline style 을 무력화하기 위해 .slick-slide 하위 모든 li 에 100% !important.
       (셀렉터 깊이 무관 — slick 의 rows 모드 DOM 변형에 견고) */
    .maincontents .section.section2 .area .course_area .slick-slide li {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box;
    }
    .maincontents .section.section2 .area .course_area .slick-slide li > a {
        display: block !important;        /* anchor 기본 inline 풀어 width 100% 적용 */
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .maincontents .section.section2 .area .course_area .slick-slide li > a > .box {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box;
    }

    /* 온라인 강의 course_area: slick 옵션이 미리 responsive 처리하지만,
       그 외 페이지의 .gallaylist 들 모바일 가로 안전 */
    .gallaylist {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)) !important;
        gap: 12px;
    }
    .gallaylist > li { width: 100% !important; margin: 0 !important; }

    /* 테이블 / boardlist 가로 넘침 차단 */
    .boardlist table { width: 100%; max-width: 100%; }
    .board_top {
        flex-wrap: wrap;
        gap: 8px;
    }
    .board_top .boardschbox {
        flex-wrap: wrap;
        width: 100%;
        gap: 6px;
    }
    .board_top .boardschbox .select_box,
    .board_top .boardschbox .search_box { flex: 1 1 100%; }

    /* 푸터 영역 가로 넘침 차단 */
    .bottomarea .agree_area,
    .bottomarea .footer .area {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* 로그인/회원가입 등 모달/팝업 가로 안전 */
    .modal .popup,
    .modal .popup.wgt520,
    .modal .popup.wgt600 {
        width: 92vw !important;
        max-width: 600px;
    }

    /* ── 좁은 폭(폰) 미세조정도 같은 모바일 미디어쿼리 안에서 처리.
         별도 480 미디어쿼리 없이 vw / clamp / max-width 로 자연스럽게 ── */

    /* swiper 화살표는 좁은 폰에서 자동 숨김 (hero_b 폭이 좁으면 답답) */
    .maincontents .main_visual.hero_b .hero_swiper .swiper-slide {
        width: min(320px, 80vw);
    }
}