/* ==========================================================================
[1] 기본 초기화 및 공통 변수
========================================================================== */
:root {
--bg-white: #ffffff;
--text-main: #222222;
--text-sub: #888888;
--color-shop: #007bff; /* 파란색 (업체명) */
--color-region: #ff7e00; /* 주황색 (지역) */
--border-color: #eee;
}
body{
font-weight: 400;
font-size:13px;
line-height: 1.2;
letter-spacing: -0.2px;
background-color: #f2f2f2; /* PC 전체 회색 배경 (원본 #f1f2f6 → #f2f2f2) */
font-family: 'Malgun Gothic', '맑은 고딕', dotum, sans-serif;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialised;
color:#000000;
min-width: 1420px; /* 전체 레이아웃 1340px + container left:60px 오프셋 = 1400px + 여유 20px */
margin: 0px;
padding: 0px;
}
ul,li{
list-style: none;
margin: 0px;
padding: 0px;
}
button{
border: none;
}
a{
color: #181818;
text-decoration: none;
}
.inner { max-width: 1400px; margin: 0 auto; box-sizing: border-box; }
/* PC/Mobile 표시 제어 */
.view-pc { display: block; }
.view-mobile { display: none; }
.pc-only { display: block !important; }
/* 공통 라인 및 뱃지 */
.split-line { width: 100%; height: 1px; background: #eee; }
.badge-pay { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; line-height: 18px; text-align: center; color: #fff; font-size: 11px; font-weight: 700; border-radius: 3px; margin-right: 3px; flex-shrink: 0; }
.bg-gray { background: #999; }
.txt_yellow { color: #fbc02d; }
/* 이미지 맞춤 공통 클래스 */
.img-contain { object-fit: contain !important; padding: 10px; box-sizing: border-box; }
.img-cover { object-fit: cover !important; padding: 0; }
.img-user-contain { object-fit: contain !important; padding: 0; } /* 유저 이미지가 꽉 차게 돕는 클래스 */
/* 반짝임 효과 애니메이션 */
@keyframes blink-effect { 50% { opacity: 0.5; color: red; } }
.blink-effect { animation: blink-effect 1s step-end infinite; }
/* 스크랩 버튼 공통 레이아웃 (PC & 모바일) */
.scrap-btn-wrap, .m-scrap-btn { position: absolute; cursor: pointer; width: 13px; height: 13px; display: flex; align-items: center; justify-content: center; }
.scrap-btn-wrap { top: 8px; right: 8px; z-index: 20; }
.m-scrap-btn { top: 18px; right: 15px; z-index: 10; }
.scrap-btn-wrap img, .m-scrap-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* ==========================================================================
[2] 상단 헤더 & GNB & 메인 레이아웃 틀
========================================================================== */
/* 3단 레이아웃 */
.layout_wrap { display: flex; gap: 15px; align-items: flex-start; padding-top: 10px; padding-bottom: 50px; position: relative; }
.main_center { flex: 1; min-width: 0; }
.box_border { border: 1px solid #ddd; background: #fff; box-sizing: border-box; overflow: visible; }
/* 헤더 고정 */
/* 1. 상단 전체 영역 (#hd) 수정 */
#hd {
position: -webkit-sticky !important;
position: sticky !important;
/* 수정된 핵심 부분: 로고와 상단 메뉴의 대략적인 높이만큼 마이너스(-) 값을 주어 위로 숨깁니다. */
/* 현재 -150px로 설정했습니다. 스크롤을 내렸을 때 검색창 위에 공간이 남으면 숫자를 줄이고(-120px), 검색창이 위로 짤리면 숫자를 키워서(-180px) 딱 맞는 위치를 찾아보세요. */
top: -141px !important;
z-index: 1000 !important;
background: #fff !important;
width: 100% !important;
/* 그림자는 아래 검색창으로 옮겼으므로 여기서는 삭제하거나 주석 처리합니다. */
}
/* === etcmenu_wrap (상단 텍스트 메뉴바) === */
.etcmenu_wrap { width: 100%; background: #fdfdfd; border-bottom: 1px solid #eee; }
.etcmenu { display: flex; align-items: center; height: 31px; max-width: 1050px; margin: 0 auto; position: relative; font-size: 11px; }
.etcmenu a { color: #888; text-decoration: none; }
.etcmenu a:hover { color: #333; }
/* Area A: 구글 검색 */
.etcmenu_areaA { display: inline-flex; align-items: center; gap: 5px; }
.etcmenu_areaA .ic-glogo { width: 22px; height: 22px; flex-shrink: 0; }
.etcmenu_areaA .ic-gsearch { width: 18px; height: 18px; flex-shrink: 0; cursor: pointer; }
.etcmenu_areaA .ggkeyword { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; font-size: 12px; background: #fff; border: 1px solid #ccc; border-radius: 3px; color: #333; font-weight: normal; /* [P-27] bold 제거 — 일반 폰트 두께로 변경 */ }
/* Area B: 체불사업자 / 보이스피싱 */
.etcmenu_areaB { display: inline-flex; align-items: center; gap: 4px; margin-left: 15px; }
.etcmenu_areaB a { display: inline-flex; align-items: center; gap: 4px; color: #333; font-size: 13px; font-weight: 500; margin-left: 8px; }
.etcmenu_areaB a:hover { color: #333; }
.etcmenu_areaB .icon-img { width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; }
.etcmenu_areaB .icon-img.bg-k { background: #0F1A5B; }
/*.etcmenu_areaB .icon-img img { width: 14px; height: 14px; }*/
/* Area C: 우측 로그인 메뉴 */
.etcmenu_areaC { position: absolute; right: 0; top: 0; height: 31px; display: flex; align-items: center; gap: 0; }
.etcmenu_areaC a { display: inline-block; padding: 0 10px; font-size: 13px; color: #888; line-height: 31px; position: relative; }
.etcmenu_areaC a:hover { color: #333; }
.etcmenu_areaC a + a::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 10px; background: #ddd; }
/* 검색바 */
.top-search-bar { flex: none; display: flex; justify-content: flex-start; margin-left: 40px; margin-right: auto; }
.region-search-container { display: flex; align-items: center; gap: 6px; }
.search-item-btn, .search-item-select, .search-item-submit, .search-item-reset {
height: 38px !important; min-height: 38px !important; border: 1px solid #333; border-radius: 4px;
box-sizing: border-box; background: #fff; color: #333; margin: 0; padding: 0 10px;
display: inline-flex; align-items: center; justify-content: center; outline: none; font-size: 14px;
}
.search-item-select { min-width: 140px; padding-right: 25px; cursor: pointer; font-weight: bold; background: #fff url('data:image/svg+xml;charset=US-ASCII,') no-repeat right 8px center; background-size: 18px; appearance: none; -webkit-appearance: none; }
.search-item-btn { background: #f8f8f8; cursor: pointer; }
.search-item-submit { background: #333; color: #fff; padding: 0 25px; font-weight: bold; cursor: pointer; }
.search-item-reset { width: 38px; padding: 0; cursor: pointer; border-color: #ddd; }
/* GNB */
#gnb { border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; background: #f9f9f9; height: 50px; }
.gnb_flex_wrapper { display: flex; justify-content: center; align-items: center; height: 100%; position: relative; }
#gnb_1dul { display: flex; gap: 8px; align-items: center; justify-content: center; flex: 1; }
.gnb_1da { display: block; padding: 6px 15px; background: #fff; border: 1px solid #bbb; border-radius: 4px; font-size: 13px; font-weight: bold; color: #333; transition: 0.2s; text-align: center; min-width: 60px; }
.gnb_1dli.is-active .gnb_1da { background-color: #333; color: #fff; border-color: #333; font-weight: 900; }
.gnb_1da:hover { background: #333; color: #fff; }
.gnb_ad_register { position: absolute; right: 120px; top: 0; height: 100%; display: flex; align-items: flex-end; z-index: 100; }
.ad_btn_link { position: relative; display: block; width: 80px; height: 50px; }
.ad_sign { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); width: 70px; z-index: 10; }
.ad_fox { position: absolute; bottom: 35px; left: 50%; transform: translateX(-50%); width: 55px; z-index: 5; }
.ad_bubble { position: absolute; top: -95px; right: -115px; width: 120px; z-index: 20; }
/* ==========================================================================
[3] 좌/우측 사이드 메뉴 및 퀵 배너
========================================================================== */
/* 좌우 사이드바 공통 틀 */
.side_quick, .right_quick { width: 110px; flex-shrink: 0; position: sticky; top: 200px; z-index: 10; display: flex; gap: 10px; }
/* 우측 사이드바 구조 변경 (가로 배열 및 세로 묶음) */
.side_quick.right_quick { display: flex !important; flex-direction: row; align-items: flex-start; right: 0; }
.right_banner_group, .right_menu_group { display: flex; flex-direction: column; width: 110px; }
/* 우측 메뉴 박스 및 배너 공통 */
.right_quick .right_box, .quick_banner {
width: 110px !important; background: #fff; border: 1px solid #ccc;
box-sizing: border-box; margin-bottom: 8px;
}
.quick_banner { border-color: #ddd; height: 180px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.quick_banner img { width: 100%; height: auto; display: block; }
/* 현재 접속자 */
.rb_title { background: #f9f9f9; font-size: 12px; font-weight: bold; color: #333; text-align: center; padding: 6px 0; border-bottom: 1px solid #ccc; letter-spacing: -0.5px; }
.rb_title span { font-size: 11px; font-weight: normal; color: #000; }
.connect_list { height: 100px; overflow-y: auto; padding: 5px; box-sizing: border-box; }
.connect_list ul { list-style: none; margin: 0; padding: 0; }
.connect_list li { font-size: 11px; color: #555; line-height: 1.5; text-align: center; }
.connect_list::-webkit-scrollbar { width: 4px; }
.connect_list::-webkit-scrollbar-thumb { background-color: #bbb; border-radius: 4px; }
.connect_list::-webkit-scrollbar-track { background-color: #f1f1f1; }
/* 퀵 링크 메뉴 */
.qlink_ul { list-style: none; margin: 0; padding: 0; }
.qlink_ul > li { border-bottom: 1px solid #eee; position: relative; }
.qlink_ul > li:last-child { border-bottom: none; }
.qlink_ul > li > a { display: block; padding: 6px 8px; font-size: 12px; color: #333; text-align: center; font-weight: 500; letter-spacing: -0.5px; }
.qlink_ul > li > a:hover { background: #f9f9f9; }
.qlink_ul > li > a i { float: right; color: #d32f2f; margin-top: 2px; }
.qlink_sub { list-style: none; margin: 0; padding: 5px 8px 8px 8px; background: #fff; }
.qlink_sub li { margin-bottom: 3px; }
.qlink_sub li:last-child { margin-bottom: 0; }
.qlink_sub li a { font-size: 11px; color: #888; display: block; letter-spacing: -0.5px; }
.qlink_sub li a:hover { color: #333; }
/* 구직정보 버튼 */
.job_info_box { padding: 8px; text-align: center; }
.job_btn { display: inline-block; width: 100%; padding: 5px 0; background: #f1f8ff; border: 1px solid #cce4f7; color: #333; font-size: 12px; font-weight: bold; border-radius: 3px; margin-bottom: 5px; box-sizing: border-box; }
.job_info_box img { width: 100%; max-width: 70px; height: auto; display: inline-block; }
/* ==========================================================================
[4] 메인 콘텐츠 (좌측 프로필 / 배너 / 공지)
========================================================================== */
.main_top_wrap { display: flex; gap: 10px; height: 170px; margin-bottom: 20px; position: relative; top: auto; z-index: 1; background-color: transparent; }
/* 좌측 프로필 공통 */
.col_profile { width: 200px; height: auto; padding: 15px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: flex-start; }
.pf_v2_top { display: flex; align-items: center; margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid #f1f1f1; }
.pf_v2_img img { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #ddd; object-fit: cover; }
.pf_v2_text { font-size: 12px; line-height: 1.35; color: #333; }
.pf_v2_text .nick { color: #009000; font-weight: bold; }
.pf_v2_text .level_txt { color: #ff0000; font-weight: bold; text-decoration: underline; }
.pf_v2_list { font-size: 12px; color: #555; margin-bottom: auto; }
.pf_v2_list .pf_row { margin-bottom: 3px; display: flex; align-items: center; line-height: 1.4; }
.pf_v2_list .flex_row { display: flex; align-items: center; gap: 8px; }
.pf_v2_list a { color: #555; display: inline-flex; align-items: center; }
.pf_v2_list i { color: #888; margin: 0 3px; font-size: 13px; }
.pf_v2_list img { vertical-align: middle; margin-right: 3px; }
.cnt_red { color: #d32f2f; font-weight: bold; margin-left: 2px; /* font-family: tahoma;*/ }
.sep { color: #eee; font-size: 10px; margin-top: -2px; }
.pf_v2_bot { margin-top: 8px; padding-top: 5px; border-top: 1px solid #f1f1f1; font-size: 11px; color: #888; text-align: left; }
.pf_v2_bot a { color: #666; margin-right: 6px; letter-spacing: -0.5px; }
.pf_v2_bot a:hover { text-decoration: underline; color: #000; }
.btn_admin_go { color: #d32f2f !important; font-weight: bold; }
/* 비회원 영역 */
.profile_guest { text-align: center; font-size: 12px; padding-top: 10px; }
.guest_btns { margin-top: 10px; display: flex; justify-content: center; gap: 5px; }
.btn_login_go, .btn_reg_go { display: inline-block; padding: 6px 12px; border-radius: 3px; font-size: 12px; font-weight: bold; transition: 0.2s; }
.btn_login_go { background: #333; color: #fff; }
.btn_reg_go { background: #fff; border: 1px solid #ddd; color: #555; }
/* 중앙 배너 및 우측 공지 */
.col_banner { flex: 1; position: relative; overflow: hidden; }
.swiper, .swiper-slide { width: 100%; height: 100%; }
.swiper-slide img { width: 100%; height: 100%; object-fit: cover; }
.col_notice { width: 200px; flex-shrink: 0; padding: 10px 15px; font-size: 12px; overflow: hidden; }
.col_notice li { padding: 6px 0; border-bottom: 1px solid #f1f1f1; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.col_notice .lat_title { font-weight: bold; border-bottom: 2px solid #333; padding-bottom: 5px; margin-bottom: 5px; display: block; }
/* ==========================================================================
[5] PC 알바 리스트 공통 스타일 (박스헤더, 그리드)
========================================================================== */
#home-main { max-width: 1200px; margin: 0 auto; box-sizing: border-box; }
/* PC/Mobile 표시 제어 */
.view-pc { display: block; }
.view-mobile { display: none; }
/* 반짝임 효과 애니메이션 */
@keyframes blink-effect { 50% { opacity: 0.5; color: red; } }
.blink-effect { animation: blink-effect 1s step-end infinite; }
/* ==========================================================================
[2] 공통 병합 클래스 (PC/모바일 중복 속성 묶음)
========================================================================== */
/* 텍스트 말줄임표(...) 공통 적용 */
.g-subject, .hot-subject, .list-subject, .list-nick, .m-subject { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
/* 스크랩 버튼 공통 레이아웃 (PC & 모바일) */
.scrap-btn-wrap, .m-scrap-btn {
position: absolute; cursor: pointer;
width: 13px; height: 13px;
display: flex; align-items: center; justify-content: center;
}
.scrap-btn-wrap { top: 8px; right: 8px; z-index: 20; }
.m-scrap-btn { top: 18px; right: 15px; z-index: 10; }
.scrap-btn-wrap img, .m-scrap-btn img { width: 100%; height: 100%; object-fit: contain; display: block; }
/* --- 급여 영역 텍스트 및 아이콘 정렬 코드 (중복 제거 및 통합) 시작 --- */
.pay-area, .hot-pay, .list-pay-txt, .m-pay {
display: flex;
align-items: center; /* 텍스트와 아이콘을 세로 중앙에 맞춥니다 */
font-size: 13px;
font-weight: bold;
color: #000;
}
.pay-area, .hot-pay { justify-content: center; }
.list-pay-txt, .m-pay { margin-left: auto; }
.m-pay { color: #333; display: inline-flex; }
/* 급여 아이콘 공통 */
.pay-area img, .hot-pay img, .list-pay-txt img, .m-pay img {
width: 13px;
height: 13px;
margin-right: 3px;
vertical-align: middle;
margin-top: 2px;
}
/* ==========================================================================
[3] PC 영역 (헤더, 박스알바, 핫알바, 전체알바)
========================================================================== */
/* 박스 헤더 */
.box-header-style {
display: flex; align-items: center; gap: 6px;
font-size: 15px; font-weight: bold; color: #333;
padding: 15px 20px;
border: none; border-top: 1px solid #e5e5e5; border-bottom: 1px solid #e5e5e5;
margin-bottom: 15px; margin-top: 30px;
background-color: #ffffff;
}
.box-header-style:first-child { margin-top: 0; }
.box-header-icons img { vertical-align: middle; }
/* 그리드 레이아웃 공통 (박스알바 & 핫알바) */
.box-alba-section .gallery-grid,
.hot-alba-section .gallery-grid {
display: grid; grid-template-columns: repeat(5, 202px);
justify-content: space-between; gap: 0;
}
/* 1. 갤러리 카드 및 핫 카드 공통 기본 스타일 */
.gallery-card,
.hot-card {
width: 202px;
background: #fff;
border: 1px solid #ddd;
border-radius: 5px;
display: flex;
flex-direction: column;
position: relative;
cursor: pointer;
margin-bottom: 20px;
box-shadow: 0 1px 3px rgba(0,0,0,0.05);
/* 수정됨: 기존의 0.2s 속성과 떠오르는 효과를 부드럽게 만들기 위해 모든 변화(all)를 0.3초 동안 처리하도록 통합했습니다. */
transition: all 0.3s ease;
}
/* 2. 갤러리 카드 전용 스타일 (공통 스타일 외에 갤러리에만 필요한 높이 고정 설정) */
.gallery-card {
height: 220px;
overflow: hidden;
}
/* 3. 마우스를 올렸을 때(Hover) 공통 애니메이션 효과 */
.gallery-card:hover,
.hot-card:hover {
/* 기존 속성: 테두리 색상이 진하게 변함 */
border-color: #333;
/* 추가된 속성: 이전 단계에서 적용했던 위로 떠오르는 효과와 그림자를 통합했습니다. */
transform: translateY(-5px);
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1);
z-index: 10; /* 떠오를 때 다른 요소에 가려지지 않게 맨 앞으로 뺍니다. */
}
/* 카드 내부 텍스트 공통 */
.g-nick, .hot-nick { font-size: 12px; font-weight: bold; color: #000; display: block; margin: 0; }
.g-subject, .hot-subject { font-size: 12px; font-weight: bold; color: #333; display: block; margin: 2px 0; }
/* --- 박스 알바 전용 --- */
.g-img-wrap { height: 90px; display: flex; justify-content: center; align-items: center; background: #fff; border-bottom: 1px solid #f5f5f5; overflow: hidden; flex-shrink: 0; }
.g-img-wrap img { width: 100%; height: 70%; }
.g-info { padding: 5px 8px; text-align: center; flex: 1; display: flex; flex-direction: column; justify-content: space-evenly; }
.region-txt { font-size: 11px; color: #666; letter-spacing: -0.5px; display: block; }
/* --- 핫 알바 전용 --- */
.hot-card { height: 140px; padding: 10px; box-sizing: border-box; justify-content: space-between; text-align: center; }
.hot-meta { font-size: 11px; color: #888; display: block; }
/* --- 전체 알바 (리스트형) --- */
.list-alba-section { position: relative; overflow: hidden; margin-top: 15px; }
.swiper-slide { height: auto; box-sizing: border-box; }
.list-item {
background: #fff; border: 1px solid #eee; border-radius: 8px;
padding: 5px 15px; display: flex; align-items: center;
position: relative; cursor: pointer;
width: 100%; box-sizing: border-box; height: 60px;
}
.list-item:hover { border-color: #333; }
.list-profile-box { display: flex; align-items: center; gap: 8px; width: 100px; flex-shrink: 0; margin-right: 15px; }
.list-member-icon { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; border: 1px solid #f0f0f0; flex-shrink: 0; }
.list-member-icon img { width: 100%; height: 100%; object-fit: cover; }
.list-nick { font-size: 13px; font-weight: bold; color: #555; }
.list-info-box { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
/* [수정 후] */
/* gap으로 간격 주고, min-width:0 으로 flex 자식이 줄어들 수 있게 함 */
.list-info-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-width: 0; }
/* min-width:0 이 있어야 ellipsis가 동작함, display:flex 로 아이콘+제목 한 줄 정렬 */
.list-subject { font-size: 13px; font-weight: 800; color: #000; flex: 1 1 auto; min-width: 0; overflow: hidden; display: flex; align-items: center; }
/* 별이 절대 줄어들거나 잘리지 않도록 flex-shrink:0 추가 */
.list-scrap-icon { width: 13px; height: 13px; cursor: pointer; margin-left: 10px; opacity: 0.6; flex-shrink: 0; }
.list-info-bot { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #666; }
.list-region { font-weight: 600; color: #444; }
.list-badge-industry { font-size: 11px; color: #000; border: 1px solid #ddd; padding: 0px 6px; border-radius: 10px; background: #fff; }
/* 텍스트 wrapper — flex:1 로 남은 공간 차지하고 ellipsis 담당 */
.ls-text-wrap {
flex: 1;
min-width: 0;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 내부 sample/hl-* span 은 inline-block 유지 → 배경이 텍스트 폭만큼만 */
.ls-text-wrap > span {
display: inline-block;
}
/* 제목 prefix(아이콘)는 줄어들지 않도록 처리 */
.list-subject .img-icon-item {
flex-shrink: 0;
vertical-align: middle;
}
/* --- 광고 슬롯 공통 --- */
.ad-slot, .list-ad-slot { background: #fdfdfd; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.ad-slot { border: 1px dashed #ccc; }
.list-ad-slot { border: 1px dashed #ddd; border-radius: 5px; height: 75px; width: 100%; box-sizing: border-box; }
.ad-icon { font-size: 24px; color: #ddd; }
.ad-text, .list-ad-text { font-size: 12px; color: #aaa; font-weight: bold; }
.ad-text { margin-top: 5px; }
.list-ad-text { margin-top: 2px; }
/* ==========================================================================
[4] 모바일 리스트 전용 영역
========================================================================== */
.mobile-list-container { width: 100%; background: #fff; box-sizing: border-box; }
.mobile-total-box {
text-align: right; font-size: 13px; color: #333;
padding: 10px 15px; border-bottom: 2px solid #333;
font-weight: bold; background: #fff;
}
.mobile-total-box span { color: #d23c3c; }
.m-list-item {
padding: 15px; border-bottom: 1px solid var(--border-color);
display: flex; flex-direction: column; justify-content: center;
background: #fff; cursor: pointer; position: relative;
}
.m-list-item:last-child { border-bottom: none; }
.m-subject {
font-size: 16px; font-weight: bold; color: var(--text-main);
line-height: 1.4; margin-bottom: 6px; padding-right: 30px;
}
.m-info-row { display: flex; flex-wrap: wrap; align-items: center; font-size: 13px; line-height: 1.5; color: #666; }
.m-shop { color: var(--color-shop); font-weight: normal; margin-right: 5px; }
.m-divider { color: #ddd; margin: 0 6px; font-size: 11px; position: relative; top: -1px; }
.m-region { color: var(--color-region); margin-right: 5px; }
.m-cate { color: #666; margin-right: 5px; }
/* ==========================================================================
[6] 광고 슬롯 및 빈 배너 공통
========================================================================== */
.ad-slot, .list-ad-slot, .empty_banner {
background-color: #f8f9fa; display: flex; flex-direction: column;
justify-content: center; align-items: center; border: 1px dashed #ccc;
color: #777; box-sizing: border-box; text-align: center;
}
.ad-slot:hover, .list-ad-slot:hover, .empty_banner:hover { background-color: #e9ecef; border-color: #333; color: #333; }
.empty_banner { width: 100%; height: 100%; font-size: 13px; margin-bottom: 10px; }
.list-ad-slot { border-radius: 5px; height: 75px; width: 100%; }
.ad-img-wrap { background: transparent !important; display: flex; align-items: center; justify-content: center; height: 90px; }
.ad-plus-icon { font-size: 40px; font-weight: bold; color: #ccc; line-height: 1; }
.ad-info { justify-content: center !important; }
.ad-text, .list-ad-text { font-size: 14px; font-weight: bold; color: #333; margin-top: 5px; }
.list-ad-text { margin-top: 2px; font-size: 12px; color: #aaa; }
.ad-sub-text { font-size: 12px; color: #888; margin-bottom: 5px; line-height: 1.4; }
/* ==========================================================================
[7] 모바일 리스트 전용 영역
========================================================================== */
.mobile-list-container { width: 100%; background: #fff; box-sizing: border-box; }
.mobile-total-box { text-align: right; font-size: 13px; color: #333; padding: 10px 15px; border-bottom: 2px solid #333; font-weight: bold; background: #fff; }
.mobile-total-box span { color: #d23c3c; }
.m-list-item { padding: 15px; border-bottom: 1px solid var(--border-color); display: flex; flex-direction: column; justify-content: center; background: #fff; cursor: pointer; position: relative; }
.m-list-item:last-child { border-bottom: none; }
.m-subject { font-size: 16px; font-weight: bold; color: var(--text-main); line-height: 1.4; margin-bottom: 6px; padding-right: 30px; }
.m-info-row { display: flex; flex-wrap: wrap; align-items: center; font-size: 13px; line-height: 1.5; color: #666; }
.m-shop { color: var(--color-shop); font-weight: normal; margin-right: 5px; }
.m-divider { color: #ddd; margin: 0 6px; font-size: 11px; position: relative; top: -1px; }
.m-region { color: var(--color-region); margin-right: 5px; }
.m-cate { color: #666; margin-right: 5px; }
/* ==========================================================================
[8] 사이드 메뉴 (왼쪽 슬라이드) & 페이징 & 팝업 UI
========================================================================== */
.side_menu_mask { display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:9998; }
.side_menu_wrap { position:fixed; top:0; left:-100%; width:80%; max-width:320px; height:100%; background:#fff; z-index:9999; transition: left 0.3s ease; display:flex; flex-direction:column; }
.side_menu_wrap.active { left:0; }
.side_header { background:#333; color:#fff; padding:15px; display:flex; justify-content:space-between; align-items:center; }
.side_header h2 { margin:0; font-size:18px; }
.btn_side_close { background:none; border:none; color:#fff; font-size:20px; cursor:pointer; }
.side_content { flex:1; overflow-y:auto; padding:15px; background:#f4f4f4; }
.side_profile { text-align:center; background:#fff; padding:20px; border-radius:10px; margin-bottom:15px; border:1px solid #ddd; }
.sp_img img { width:60px; height:60px; border-radius:50%; margin-bottom:10px; }
.sp_info .nick { display:block; font-size:16px; margin-bottom:5px; }
.level_badge { background:#ffeb3b; padding:2px 8px; font-size:12px; border-radius:4px; }
.side_grid_menu ul { list-style:none; padding:0; margin:0; display:flex; flex-wrap:wrap; background:#fff; border:1px solid #ddd; }
.side_grid_menu li { width:50%; box-sizing:border-box; border-bottom:1px solid #ddd; border-right:1px solid #ddd; text-align:center; }
.side_grid_menu li:nth-child(2n) { border-right:none; }
.side_grid_menu li a { display:block; padding:15px 0; color:#333; text-align:center; font-size:14px; }
.side_etc_menu { margin-top:20px; }
.side_etc_menu h3 { font-size:16px; margin-bottom:10px; font-weight:bold; color:#333; padding-left:5px; border-left:4px solid #ffd700; }
.side_etc_menu .grid_2col { list-style:none; padding:0; display:flex; flex-wrap:wrap; background:#fff; border:1px solid #ddd; }
.side_etc_menu .grid_2col li { width:50%; border-bottom:1px solid #eee; border-right:1px solid #eee; text-align:center; }
.side_etc_menu .grid_2col li a { display:block; padding:12px 0; color:#555; font-size:13px; }
.side_footer { background:#555; padding:0; }
.side_footer button { width:100%; padding:15px; background:#555; color:#fff; border:none; font-size:16px; cursor:pointer; }
/* 페이징 UI */
.pg_wrap { text-align: center; margin: 20px 0; font-size: 0; }
.pg_page, .pg_current { display: inline-block; vertical-align: middle; padding: 6px 10px; margin: 0 2px; border: 1px solid #eee; font-size: 13px; color: #666; background: #fff; border-radius: 3px; }
.pg_current { background: #333; color: #fff; border-color: #333; font-weight: bold; }
.pg_page:hover { border-color: #333; color: #333; }
/* 팝업 레이어 */
#hd_pop { z-index: 10000; position: absolute; top: 0; left: 0; width: 0; height: 0; }
#hd_pop h2 { display: none; font-size: 0; line-height: 0; }
.hd_pops { position: absolute !important; border: 1px solid #000; background: #fff; z-index: 10001; box-shadow: 5px 5px 20px rgba(0,0,0,0.3); /* [P-28] 스크롤 시 따라오지 않고 제자리 유지 (absolute) */ }
.hd_pops_con { overflow: auto; }
.hd_pops_con img { max-width: 100%; height: auto; vertical-align: top; }
.hd_pops_footer { padding: 10px; background: #000; color: #fff; text-align: right; font-size: 12px; }
.hd_pops_footer button { border: 0; background: transparent; color: #fff; font-weight: bold; cursor: pointer; margin-left: 10px; padding: 0; }
.hd_pops_footer button:hover { text-decoration: underline; }
/* Swiper Pagination 조정 */
.myMainSwiper .swiper-pagination { left: auto !important; right: 15px !important; bottom: 15px !important; width: auto !important; text-align: right; z-index: 100; }
.myMainSwiper .swiper-pagination-bullet { width: 10px; height: 10px; background: #000; opacity: 0.3; margin: 0 4px !important; }
.myMainSwiper .swiper-pagination-bullet-active { background: #000 !important; opacity: 1; }
/* ==========================================================================
[10] 반응형 제어 (Media Queries)
========================================================================== */
/*
@media (max-width: 1300px) {
.side_quick, .right_quick { display: none !important; }
}
@media (max-width: 768px) {
.view-pc { display: none !important; }
.view-mobile { display: block !important; }
.box-alba-section, .hot-alba-section, .box-header-style { display: none !important; }
.list-alba-section { margin-top: 0 !important; padding: 0 !important; }
.page-wrap { padding: 0 !important; }
.banner_area, .main_top_wrap { flex-direction: column; height: auto; position: static; top: auto; }
.g-img-wrap { height: 100px; }
.list-item { width: 100%; }
.list-item:nth-child(even) { border-left: none; }
#ft .ft_top_wrap, #ft .ft_link_wrap, #ft .ft_info_wrap { flex-direction: column !important; align-items: flex-start !important; gap: 20px !important; }
#ft .ft_col { padding: 0 !important; width: 100% !important; margin-bottom: 20px !important; justify-content: flex-start !important; }
#ft .ft_col_mid { border: none !important; border-top: 1px solid #eee !important; border-bottom: 1px solid #eee !important; padding: 20px 0 !important; }
}
/* =================================================================
[1] 반응형 제어
=================================================================
.pc-only { display: block !important; }
.mobile-only { display: none !important; }
@media (max-width: 1024px) {
.pc-only { display: none !important; }
.mobile-only { display: block !important; }
}
*/
/* =================================================================
[2] 모바일 전용 스타일
================================================================= */
.m-header-top { display: flex; justify-content: space-between; align-items: center; height: 60px; padding: 0 15px; background: #fff; border-bottom: 1px solid #eee; }
.m-header-left { width: 50px; display: flex; align-items: center; justify-content: flex-start; }
.btn-m-hamburger { background: none; border: none; font-size: 24px; color: #333; cursor: pointer; padding: 5px; }
.m-logo-center { flex: 1; text-align: center; }
.m-logo-center img { height: 45px; width: auto; vertical-align: middle; }
.m-header-right { width: 50px; }
.m-nav-bar ul { display: flex; list-style: none; margin: 0; padding: 0; background: #2b2b2b; }
.m-nav-bar li { flex: 1; text-align: center; border-right: 1px solid #444; }
.m-nav-bar li:last-child { border-right: none; }
.m-nav-bar a { display: block; padding: 12px 0; color: #fff; font-size: 14px; text-decoration: none; font-weight: 500; }
.m-search-wrap { padding: 10px; background: #f8f8f8; border-bottom: 1px solid #ddd; }
.m-search-row { display: flex; gap: 5px; }
.m-search-select { flex: 1; height: 40px; border: 1px solid #ccc; background: #fff; font-size: 13px; border-radius: 4px; padding-left:5px; }
.m-search-btn { width: 60px; height: 40px; background: #333; color: #fff; border: none; border-radius: 4px; font-weight: bold; flex-shrink: 0; }
.m-sidebar-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 9998; }
.m-sidebar-wrap { position: fixed; top: 0; left: -100%; width: 280px; height: 100%; background: #fff; z-index: 9999; transition: left 0.3s ease; overflow-y: auto; box-shadow: 2px 0 5px rgba(0,0,0,0.1); }
.m-sidebar-wrap.open { left: 0; }
.m-sidebar-header { padding: 20px; background: #2b2b2b; color: #fff; display: flex; justify-content: space-between; align-items: center; }
.m-sidebar-content { padding: 20px; }
/* =================================================================
[3] 배너 스타일 수정
================================================================= */
.quick_banner { width: 70px !important; margin-bottom: 10px !important; display: block; }
.quick_banner img { width: 70px !important; height: 270px !important; object-fit: cover; display: block; }
.side_btn_box { width: 110px !important; margin-bottom: 5px !important; box-sizing: border-box; }
/* =================================================================
[4] PC 전용 헤더 & 통합 검색창 스타일
================================================================= */
/* (etcmenu_wrap으로 이전됨 — 기존 #tnb 스타일 제거) */
/* 2. 로고와 검색창을 감싸는 영역 (#hd_wrapper) 수정 */
#hd_wrapper {
display: block !important;
width: 100% !important;
max-width: 100% !important;
padding: 0 !important;
margin: 0 !important;
/* 상단 전체(#hd)에서 고정을 제어하므로 여기서는 고정 속성을 빼줍니다. */
position: relative !important;
background: #fff !important;
}
/* ====================================================================
[3단계] 메인 헤더 (로고, 검색창, 일러스트) 정렬 최적화 (디자인 유지 통합본)
==================================================================== */
/* 3. 검색창 영역 (.pc-filter-wrap) 수정 */
.pc-filter-wrap {
display: block !important;
width: 100% !important;
border-top: 1px solid #eee;
border-bottom: 2px solid var(--brand-primary, #00a65a);
padding: 15px 0;
background: #fff !important;
/* 스크롤 시 검색창 하단에 예쁜 구분선이 생기도록 기존 #hd에 있던 그림자 효과를 이쪽으로 옮겨줍니다. */
box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05) !important;
}
.pc-filter-inner { width: 100%; max-width: 1050px; margin: 0 auto; display: flex; flex-direction: column; gap: 10px; }
/* ★ 완벽한 양끝 정렬 & 여백 조정 해결 ★ */
.filter-row { display: flex; justify-content: space-between; align-items: center; width: 100%; gap: 10px; /* 좌/우 그룹 사이 확실한 여백 확보 */ }
/* 왼쪽 그룹: 안의 Select 박스들이 남는 영역을 균등하게 나눠 가짐 */
.filter-row .left-area { display: flex; gap: 10px; align-items: center; flex: 1; min-width: 0; }
.filter-row select { height: 40px; border: 1px solid #ccc; border-radius: 4px; padding: 0 10px; font-size: 14px; color: #333; outline: none; background: #fff; flex: 1; min-width: 0; }
/* 오른쪽 그룹: 우측에 밀착하여 폭을 고정 (레이아웃 흔들림 방지) */
.filter-row .right-area { display: flex; gap: 10px; align-items: center; justify-content: flex-end; width: 460px; flex-shrink: 0; }
/* 하단 검색창: 오른쪽 그룹 안에서 남은 공간을 자동으로 꽉 채움 */
.filter-row .right-area input[type="text"] {
height: 40px;
border: 1px solid #ccc;
border-radius: 4px;
padding: 0 15px;
font-size: 13px;
color: #333;
outline: none;
background: #fff;
flex: 1;
min-width: 340px;
}
/* ★ 검색 버튼 스타일: 상세검색 버튼과 동일한 느낌으로 변경 ★ */
.btn-filter-search {
width: 80px;
/* 배경을 흰색으로 변경 (상세검색 버튼과 통일) */
background: #ffffff !important;
/* 테두리를 연한 회색으로 변경 */
border: 1px solid #ccc !important;
/* 글자 색상을 검은색이나 짙은 회색으로 변경 */
color: #333333 !important;
/* 글씨 굵기 유지 */
font-weight: bold;
/* 마우스 커서를 손가락 모양으로 변경 */
cursor: pointer;
/* 색상이 부드럽게 변하도록 애니메이션 효과 추가 */
transition: all 0.3s ease;
}
/* ★ 추가: 마우스 올렸을 때(Hover) 효과 ★ */
.btn-filter-search:hover {
/* 마우스를 올리면 배경을 아주 연한 회색으로 변경 */
background: #f8f8f8 !important;
/* 테두리를 조금 더 진하게 강조 */
border-color: #adadad !important;
/* 글자 색상을 살짝 강조 (선택 사항) */
color: #000000 !important;
}
/* 1. 검색 버튼과 상세검색 버튼 공통 디자인 */
.btn-filter-search,
.btn-filter-adv {
display: inline-flex;
align-items: center;
justify-content: center;
height: 40px;
border-radius: 4px;
border: 1px solid #ccc;
background: #fff;
color: #333;
font-size: 14px;
cursor: pointer;
box-sizing: border-box;
flex-shrink: 0;
}
/* 2. 상세검색 버튼 전용 기본 넓이 및 애니메이션 효과 */
.btn-filter-adv {
width: 135px;
transition: width 0.2s ease-in-out;
}
/* 3. 상세검색이 열렸을 때 넓이가 늘어나는 효과 (expanded 클래스 추가 시) */
.btn-filter-adv.expanded {
width: 225px; /* 검색버튼(80px) + 기존여백(10px) + 기존크기(100px)를 합친 크기 */
}
/* 이미지 버튼을 활용한 2개 링크 분리 처리 */
.reg-img-wrapper { position: relative; display: inline-flex; align-items: center; height: 40px; flex-shrink: 0; }
.reg-img-wrapper img { height: 100%; width: auto; display: block; border-radius: 4px; }
.reg-img-wrapper .link-left, .reg-img-wrapper .link-right { position: absolute; top: 0; height: 100%; width: 50%; z-index: 10; }
.reg-img-wrapper .link-left { left: 0; }
.reg-img-wrapper .link-right { right: 0; }
/* 상세검색 토글 영역 (기본 숨김) */
#advanced_search_row { display: none; }
/* ====================================================================
[2단계] 상단 Tnb 메뉴 및 구글 검색바 스타일 분리
==================================================================== */
/* (etcmenu_wrap으로 이전됨 — 기존 tnb-left-menu / btn-google-search 스타일 제거) */
/* ====================================================================
[4단계] 모바일 반응형 완벽 제어 (1024px 이하 해상도)
==================================================================== */
/*
@media (max-width: 1024px) {
.my_left_sidebar,
.my_right_sidebar {
display: none !important;
}
#container_wr {
display: block !important;
padding: 0 10px !important;
}
#container.main_center {
width: 100% !important;
max-width: 100% !important;
margin: 0 !important;
}
}
/*
/* 배너 스와이퍼 영역 (Pagination 위치 박스 안쪽 우측하단으로 이동) */
.col_banner { position: relative; }
.myMainSwiper { width: 100%; height: auto; overflow: hidden; position: relative; }
.myMainSwiper .swiper-slide img { width: 100%; height: auto; object-fit: cover; }
.myMainSwiper .swiper-pagination {
position: absolute;
bottom: 15px;
right: 20px;
left: auto;
width: auto;
z-index: 10;
}
.myMainSwiper .swiper-pagination-bullet { background: rgba(0,0,0,0.5); opacity: 1; }
.myMainSwiper .swiper-pagination-bullet-active { background: #fff; border: 1px solid #333; }
/* =================================================================
[추가] 중앙 메인 배너 (myMainSwiper) 전용 스타일
================================================================= */
.myMainSwiper {
width: 630px !important; /* 1. 가로 사이즈 630px 고정 */
height: 170px !important; /* 1. 세로 사이즈 170px 고정 */
position: relative;
overflow: hidden;
}
/* 이미지 강제 맞춤 설정 */
.myMainSwiper .swiper-slide img {
width: 100%;
height: 100%;
object-fit: cover; /* 이미지가 찌그러지지 않고 630x170 영역을 꽉 채우게 만듭니다 */
}
/* 배너가 없을 때 빈 영역 스타일 */
.myMainSwiper .empty_center_banner {
background: #f5f5f5;
display: flex;
align-items: center;
justify-content: center;
width: 630px;
height: 170px;
}
/* 3. 우측 하단 점(Pagination) 스타일 */
.myMainSwiper .swiper-pagination {
text-align: right !important; /* 오른쪽으로 밀어내기 */
padding-right: 15px; /* 우측 여백 15px */
bottom: 10px !important; /* 하단에서 10px 띄우기 */
}
/* 점 기본 색상 및 투명도 */
.myMainSwiper .swiper-pagination-bullet {
background: #fff; /* 점 색상: 흰색 */
opacity: 0.6;
}
/* 현재 보고 있는 활성화된 배너의 점 색상 */
.myMainSwiper .swiper-pagination-bullet-active {
background: #ffc107; /* 활성화 색상: 노란색 (알바존 느낌에 맞게!) */
opacity: 1;
}
/* 전체 회색 배경 (가장 바깥쪽) */
.quick_search_bg {
width: 100%;
padding: 0px 0 15px 0;
/*border-top: 1px solid #e1e1e1; */
}
/* 각각의 분리된 흰색 박스 공통 속성 */
.main_white_box {
width: 100%;
max-width: 1050px;
margin: 0 auto 15px auto; /* 15px 하단 여백으로 박스간 분리 */
background: #ffffff;
border: 1px solid #e1e1e1;
box-sizing: border-box;
}
/* 1. 빠른 검색 영역 (지역별/업종별/테마별) */
.quick_search_wrap { display: flex; }
.quick_search_wrap .qs_col {
flex: 1;
padding: 12px 15px;
border-right: 1px solid #e1e1e1;
}
.quick_search_wrap .qs_col:last-child { border-right: none; }
.quick_search_wrap .qs_col h3 { font-size: 14px; font-weight: 700; color: #111; margin: 0; padding: 0; }
.quick_search_wrap .qs_list { display: flex; flex-wrap: wrap; gap: 2px 18px; line-height: 1.3; justify-content: center; }
.quick_search_wrap .qs_list a { font-size: 13px; color: #333; text-decoration: none; white-space: nowrap; }
.quick_search_wrap .qs_list a:hover { color: var(--brand-primary, #00a65a); font-weight: 600; }
/* 2. 통계 바 영역 */
.stats_bar_wrap { display: flex; }
.stats_bar_wrap .stat_item {
flex: 1;
text-align: center;
padding: 15px 0;
font-size: 13px;
color: #555;
border-right: 1px solid #e1e1e1;
}
.stats_bar_wrap .stat_item:last-child { border-right: none; }
.stats_bar_wrap .stat_item span { color: #333; }
/* 3. 하단 인재정보 & 게시판 영역 */
.main_bottom_wrap {
width: 100%;
max-width: 1050px;
margin: 0 auto;
display: flex;
gap: 15px; /* 좌측 박스와 우측 박스 사이 간격 */
align-items: stretch; /* 좌우 박스 높이 강제 일치 */
}
/* 좌측 인재정보 리스트 */
.col_resume_list {
flex: 0 0 45%;
min-width: 0; /* [수정] 자식 li 가 폭을 넘어 확장되지 않도록 */
overflow: hidden; /* [수정] 만일을 대비한 가드 */
background: #fff;
border: 1px solid #e1e1e1;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.col_resume_list .box_title { padding: 15px 20px; font-size: 14px; font-weight: bold; color: #333; border-bottom: 1px solid #e1e1e1; }
.resume_ul { list-style: none; margin: 0; padding: 0; flex: 1; }
/* [수정] 카드 폭 고정 + 긴 제목 ellipsis 처리
flex item 은 기본 min-width:auto 라서 자식 내용 크기만큼 무한 확장됨
→ min-width:0 으로 잡아야 부모 폭 안에서 truncate 가능 */
.resume_li { padding: 15px 20px; border-bottom: 1px dashed #eee; display: flex; gap: 12px; min-width: 0; }
.resume_li:last-child { border-bottom: none; }
.rs_icon { width: 35px; height: 35px; border-radius: 50%; background: #f1f1f1; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.rs_info { flex: 1; min-width: 0; overflow: hidden; } /* ← min-width:0 추가 (핵심) */
.rs_info .rs_subj { font-size: 14px; color: #333; font-weight: 500; margin-bottom: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.rs_info .rs_subj a { color: #333; text-decoration: none; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ← 자체도 truncate */
.rs_info .rs_subj a:hover { text-decoration: underline; }
.rs_info .rs_meta { font-size: 12px; color: #888; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.rs_info .point_blue { color: #0000ff; font-weight: bold; }
.rs_info .rs_date { color: #aaa; margin-left: auto; font-size: 11px; }
/* 우측 게시판 탭 */
.col_board_tabs {
flex: 1;
background: #fff;
border: 1px solid #e1e1e1;
box-sizing: border-box;
display: flex;
flex-direction: column;
}
.board_tab_header { display: flex; border-bottom: 1px solid #e1e1e1; }
.board_tab_header .tab_btn { flex: 1; text-align: center; padding: 15px 0; font-size: 13px; color: #666; cursor: pointer; border-right: 1px solid #e1e1e1; }
.board_tab_header .tab_btn:last-child { border-right: none; }
.board_tab_header .tab_btn.active { font-weight: bold; color: #111; border-bottom: 2px solid #333; }
.board_ul_wrap { flex: 1; padding: 10px 0; }
.board_ul { list-style: none; margin: 0; padding: 0; }
.board_li { display: flex; justify-content: space-between; padding: 8px 20px; font-size: 13px; height: 35px; box-sizing: border-box; align-items: center; } /* 빈 칸(높이) 고정을 위해 height 지정 */
.board_li a { color: #555; text-decoration: none; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-right: 15px; }
.board_li a:hover { text-decoration: underline; }
.board_li .bo_meta { color: #aaa; font-size: 12px; flex-shrink: 0; display: flex; gap: 10px; }
.board_li.empty_li { visibility: hidden; } /* 빈 칸은 투명하게 처리하여 높이만 차지하도록 함 */
/* 더보기 버튼 공통 */
.btn_more_wrap { text-align: center; padding: 15px 0; border-top: 1px solid #eee; margin-top: auto; }
.btn_more_wrap a { display: inline-block; padding: 5px 15px; border: 1px solid #ccc; border-radius: 20px; font-size: 12px; color: #666; text-decoration: none; }
.btn_more_wrap a:hover { background: #f9f9f9; color: #333; }
/* ★ 상단 액션 버튼 스타일 ★ */
.top-bar-action {
display: flex;
gap: 10px;
align-items: center;
}
/* 개별 버튼 기본 스타일 */
.top-bar-action .action-btn {
display: flex;
align-items: center;
gap: 6px;
padding: 8px 14px;
border: 1px solid #ccc !important; /* 그누보드 기본 스타일 방지를 위해 !important 사용 */
border-radius: 6px;
background: #fff !important;
font-size: 13px;
cursor: pointer;
transition: 0.2s;
color: #000 !important;
text-decoration: none !important; /* 링크 밑줄 제거 */
line-height: 1; /* 글자 높이 정렬 */
}
/* ★ 상단 액션 버튼 스타일: 검색 버튼과 높이 통일 ★ */
.top-bar-action .action-btn {
display: inline-flex;
align-items: center;
justify-content: center; /* 아이콘과 글자를 가운데 정렬 */
gap: 6px;
/* 검색 버튼과 높이를 맞추기 위한 설정 */
height: 38px; /* 보통 그누보드 기본 버튼 높이가 34px~36px 사이입니다. 안 맞으면 숫자를 살짝 조절하세요 */
padding: 0 12px; /* 위아래 여백은 제거하고 좌우 여백만 줍니다 */
border: 1px solid #ccc !important;
border-radius: 6px;
background: #fff !important;
font-size: 13px;
cursor: pointer;
transition: 0.2s;
color: #000 !important;
text-decoration: none !important;
/* 줄바꿈 방지 */
white-space: nowrap;
min-width: fit-content;
}
/* 마우스 올렸을 때 효과 */
.top-bar-action .action-btn:hover {
background: #a259ff !important;
border-color: #a259ff !important;
color: #fff !important;
}
/* 아이콘 정렬 미세 조정 */
.top-bar-action .action-btn i {
font-size: 14px;
margin-top: 1px; /* 아이콘 위치가 높을 경우를 대비한 조정 */
}
/* ====================================================================
[최종 레이아웃 통합] 상단/본문 1050px 정렬 및 배너 외곽 배치
중복된 레이아웃 코드를 하나로 합쳐서 정리한 부분입니다.
==================================================================== */
/* 1. 상단 헤더 영역 공통 가로폭 고정 (기존 유지) */
.etcmenu,
.pc-header-top,
.pc-filter-inner {
max-width: 1050px !important;
width: 1050px !important;
margin: 0 auto !important;
}
/* 2. 상단 헤더 전체 박스 */
.pc-header-top {
display: flex !important;
justify-content: space-between !important;
align-items: flex-end !important; /* 바닥 기준 정렬 */
/* 수정됨: 전체 위쪽 여백을 20px에서 10px로 줄여서 높이 축소 */
padding: 2px 0 0 0 !important;
}
/* 3. 좌측 로고 영역 */
.pc-header-top .logo-area {
position: static !important;
/* 수정됨: 로고 아래 여백을 15px에서 10px로 축소 */
margin-bottom: 10px !important;
}
.pc-header-top .logo-area img {
/* 수정됨: 좌측 여우꿀알바 로고 높이를 60px에서 50px로 축소 */
height: 50px;
width: auto;
}
/* 4. 중앙 검색창 영역 (중복 코드 정리 및 여백 수정) */
.pc-main-search {
flex: 1;
max-width: 400px;
position: relative;
/* 수정됨: 아래 여백을 20px에서 15px로 축소하여 줄어든 로고/여우 높이에 맞춤 */
margin: 0 20px 15px 20px !important;
}
/* ★ 검색창 기본 디자인 (중복 제거하여 하나만 남김, 절대 삭제 금지) ★ */
.pc-main-search input[type="text"] { width: 100%; height: 50px; border: 4px solid var(--brand-primary, #00a65a); border-radius: 30px; padding: 0 60px 0 20px; font-size: 16px; outline: none; box-sizing: border-box; font-weight: 500; }
.pc-main-search input::placeholder { color: #999; }
.pc-main-search button { position: absolute; right: 6px; top: 6px; width: 38px; height: 38px; background: var(--brand-primary, #00a65a); border: none; border-radius: 50%; color: #fff; font-size: 18px; cursor: pointer; }
/* 5. 우측 여우 일러스트 영역 */
.pc-header-top .illust-area {
display: flex;
align-items: flex-end;
gap: 12px;
justify-content: flex-end;
margin-bottom: 0 !important;
}
/* 우측 텍스트 일러스트 높이 보정 */
.pc-header-top .illust-area .txt-img {
/* 수정됨: 텍스트 이미지 높이를 35px에서 25px로 축소 */
height: 40px;
width: auto;
/* 수정됨: 옆의 여우가 작아졌으므로, 텍스트가 붕 뜨지 않게 아래 여백도 25px에서 15px로 내림 */
margin-bottom: 20px !important;
}
/* 우측 여우 일러스트 크기 축소 */
.pc-header-top .illust-area .fox-img {
/* 수정됨: 여우 캐릭터 높이를 110px에서 85px로 축소 */
height: 105px !important;
width: auto;
margin-bottom:2px;
}
#container_wr.inner,
#container_wr.layout_wrap {
max-width: 1340px !important;
width: 100% !important;
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
align-items: flex-start !important;
padding: 0 !important;
padding-top: 15px !important;
margin: 0 auto !important;
gap: 15px !important;
}
#container_wr {
position: relative !important;
left: 60px !important;
}
/* 3. 중앙 본문 (상단 헤더와 똑같은 1050px 유지) */
#container.main_center {
width: 1050px !important;
min-width: 1050px !important;
flex: 0 0 1050px !important; /* 어떤 상황에서도 1050px 절대 방어 */
margin: 0 !important;
}
.my_left_sidebar {
position: sticky !important; /* fixed → sticky */
top: 80px !important; /* 헤더 줄어든 후 위치 */
width: 70px !important;
flex: 0 0 70px !important; /* flex 자식이므로 다시 추가 */
left: auto !important; /* fixed 때 썼던 left 제거 */
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
z-index: 100 !important;
}
.my_right_sidebar {
position: sticky !important; /* fixed → sticky */
top: 80px !important;
width: 190px !important;
flex: 0 0 190px !important;
right: auto !important;
left: auto !important;
margin: 0 !important;
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 10px !important;
z-index: 100 !important;
}
/* 6. 우측 세부 메뉴 그룹 (접속자 박스 등을 배너 밑으로 내림) */
.right_banner_group {
width: 70px !important;
display: flex !important;
flex-direction: column !important;
gap: 10px !important;
flex-shrink: 0 !important;
}
.right_menu_group {
width: 110px !important;
display: flex !important;
flex-direction: column !important;
gap: 8px !important;
flex-shrink: 0 !important;
margin-top: 190px !important; /* 배너(180px) + 갭(10px) 밑으로 밀어냄 */
}
/* 7. 배너 공통 규격 */
.my_left_sidebar .quick_banner,
.my_right_sidebar .quick_banner,
.quick_banner .empty_banner {
width: 70px !important;
height: 180px !important;
overflow: hidden !important;
box-sizing: border-box !important;
display: block !important;
margin: 0 !important;
}
.quick_banner img {
width: 70px !important;
height: 180px !important;
display: block !important;
object-fit: cover !important;
}
/* --- 우측 리모컨 메뉴 디자인 --- */
.side-remote {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
}
.remote-stack {
display: flex;
flex-direction: column;
gap: 10px;
transition: opacity .24s ease, transform .24s ease, max-height .24s ease;
max-height: 1200px;
width: 100%;
}
.side-remote.collapsed .remote-stack {
opacity: 0;
transform: translateX(18px);
pointer-events: none;
max-height: 0;
overflow: hidden;
}
.panel {
width:140px;
border: 1px solid #dcdcdc;
border-radius: 14px;
background: #ffffff;
box-shadow: 0 2px 8px rgba(0,0,0,.06);
overflow: hidden;
}
.panel-head {
height: 32px;
display: flex;
align-items: center;
justify-content: center;
gap: 4px;
font-size: 12px;
color: #20252b;
border-bottom: 1px solid #e5e5e5;
background: linear-gradient(#ffffff,#f7f7f7);
letter-spacing: -0.2px;
}
.panel-head .cnt { font-size: 11px; color: #2f67ae; font-weight: 700; margin-left: 2px; }
.visitor-body {
background: #fff;
margin: 6px;
border: 1px solid #e1e1e1;
border-radius: 8px;
padding: 6px 5px 6px 6px;
height: 96px;
overflow-y: auto;
font-size: 10px;
line-height: 1.55;
color: #222;
}
.visitor-body::-webkit-scrollbar { width: 10px; }
.visitor-body::-webkit-scrollbar-track { background: #f4f4f4; border-left: 1px solid #e5e5e5; border-radius: 8px; }
.visitor-body::-webkit-scrollbar-thumb { background: linear-gradient(#dfdfdf,#c8c8c8); border: 1px solid #bebebe; border-radius: 999px; }
.menu-panel { padding: 8px 6px 10px; }
.menu-btn {
width: 100%;
height: 31px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 10px 0 12px;
text-decoration: none;
color: #1d2126;
font-size: 12px;
border: 1px solid #dddddd;
border-radius: 9px;
background: linear-gradient(#ffffff,#f3f3f3);
box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
margin-bottom: 6px;
transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.menu-btn:hover { filter: brightness(0.99); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.menu-btn .left { display: flex; align-items: center; gap: 4px; letter-spacing: -0.2px; }
.menu-btn .star { color: #d2a100; font-size: 11px; transform: translateY(-1px); }
.menu-btn .arrow { color: #cf2f2f; font-size: 13px; font-weight: 700; line-height: 1; }
.muted-list { margin-top: 2px; padding: 2px 6px 0 8px; color: #90979f; font-size: 11px; line-height: 1.55; letter-spacing: -0.2px; }
.job-panel { padding: 12px 8px 8px; }
.job-title {
width: 94px;
height: 35px;
margin: 0 auto 12px;
border: 1px solid #dddddd;
border-radius: 8px;
background: linear-gradient(#ffffff,#f3f3f3);
box-shadow: inset 0 1px 0 rgba(255,255,255,.95);
display: flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: #1d2126;
font-size: 13px;
letter-spacing: -0.3px;
transition: filter .15s ease, transform .15s ease, box-shadow .15s ease;
}
.job-title:hover { filter: brightness(.99); transform: translateY(-1px); box-shadow: 0 2px 6px rgba(0,0,0,.06); }
.illust-wrap {
width: 100%;
height: 98px;
margin: 0 auto;
border-radius: 10px;
background: #fafafa;
border: 1px solid #e1e1e1;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.illust-wrap img { width: 100%; height: 100%; object-fit: contain; display: block; background: #f9f9f9; }
.mini-btn {
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
padding: 0;
border: none;
background: transparent;
position: relative;
z-index: 10001;
pointer-events: auto !important;
user-select: none;
touch-action: manipulation;
-webkit-tap-highlight-color: transparent;
}
.remote-btn-group {
position: relative;
width: 130px;
display: flex;
justify-content: center;
align-items: center;
padding-left:35px;
}
/* -------------------------------------------
1. 버튼 공통 구조 (모양 유지 및 3D 설정)
------------------------------------------- */
#toggleBtn, #openBtn {
width: 55px; height: 55px; min-width: 55px; min-height: 55px; max-width: 55px; max-height: 55px;
border-radius: 50%;
perspective: 1000px;
transform-style: preserve-3d;
}
#toggleBtn img, #openBtn img {
display: block; width: 55px; height: 55px; object-fit: cover; border-radius: 50%;
/* 0.6초 동안 부드럽게 회전하도록 설정했습니다. */
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
backface-visibility: visible;
}
/* -------------------------------------------
2. 마우스 올렸을 때 좌우로 한 바퀴 회전
------------------------------------------- */
#toggleBtn:hover img, #openBtn:hover img {
transform: rotateY(360deg);
}
.top-arrow {
font-size: 18px; line-height: 1; color: #3f4348; display: inline-block;
}
/* -------------------------------------------
3. 위로 가기 버튼 — 어두운 회색 원형 + ico_arrow.png 화살표
------------------------------------------- */
#topBtn {
/* 위치 (닫기 버튼과 분리 — 기존 그대로 유지) */
position: absolute;
left: 46%;
margin-top: 50px;
top: 50%;
transform: translateY(-50%);
/* 원형 + 어두운 회색 배경 */
width: 48px; height: 48px;
min-width: 48px; min-height: 48px; max-width: 48px; max-height: 48px;
border: none;
border-radius: 50%;
background: #656565;
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.25);
cursor: pointer;
/* JS 스크롤 토글용 — side_remote.js 가 opacity / pointerEvents 변경 */
opacity: 0;
pointer-events: none;
transition: opacity .2s ease, background .2s ease;
}
/* 화살표 — 이미지 가상요소로 중앙 표시 */
#topBtn::after {
content: '';
display: inline-block;
position: absolute;
left: 50%;
top: 50%;
width: 24px;
height: 24px;
background: url('/img/ico_arrow.png') no-repeat center center / cover;
transform: translate(-50%, -50%);
transition: margin-top 0.15s ease;
}
#topBtn:hover { background: rgba(0, 0, 0, 0.70); }
/* hover 시 화살표 살짝 위로 살아남 */
#topBtn:hover::after { margin-top: -5px; }
/* -------------------------------------------
4. 기타 설정 (동일 유지)
------------------------------------------- */
#toggleBtn::before, #openBtn::before, #topBtn::before { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.collapsed-only { display: none; }
.expanded-only { display: flex; }
.side-remote.collapsed { display: block !important; } /* 리모컨이 접혔을 때의 설정 */
.side-remote.collapsed .collapsed-only { display: flex; }
.side-remote.collapsed .expanded-only { display: none; }
@keyframes arrow_fly_up {
0% { transform: translateY(0); opacity: 1; }
40% { transform: translateY(-150%); opacity: 0; }
41% { transform: translateY(150%); opacity: 0; }
100% { transform: translateY(0); opacity: 1; }
}
/* 구직정보 버튼 - 예시 소스의 파랑/보라 회전 움직임 적용 */
.menu-btn.job-btn{
position:relative !important;
overflow:hidden !important;
isolation:isolate !important;
border:1px solid transparent !important;
background:linear-gradient(#ffffff,#f3f3f3) !important;
box-shadow:inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 1px #dddddd inset !important;
z-index:1 !important;
}
.menu-btn.job-btn::before{
content:"" !important;
position:absolute !important;
inset:-58px !important;
border-radius:999px !important;
background:conic-gradient(
from 225deg,
transparent 0deg,
transparent 120deg,
#00b7ff 128deg,
#3f7cff 145deg,
transparent 162deg,
transparent 285deg,
#7b2cff 296deg,
#a259ff 314deg,
transparent 330deg,
transparent 360deg
) !important;
animation:cafe24ProRotate 4.2s linear infinite !important;
z-index:-2 !important;
pointer-events:none !important;
}
.menu-btn.job-btn::after{
content:"" !important;
position:absolute !important;
inset:1px !important;
border-radius:8px !important;
background:linear-gradient(#ffffff,#f3f3f3) !important;
z-index:-1 !important;
pointer-events:none !important;
}
@keyframes cafe24ProRotate{
0%{transform:rotate(0deg);}
100%{transform:rotate(360deg);}
}
/* ==================================================
[전체 알바정보] 2단 리스트(표 형태) 디자인
================================================== */
/* 전체 감싸는 영역: 간격을 없애고 딱 붙여서 표처럼 만듭니다 */
.myListPC .list-wrapper {
display: flex !important;
flex-wrap: wrap !important;
justify-content: flex-start !important;
gap: 0 !important;
border-top: 1px solid #333 !important; /* 리스트 최상단 진한 선 */
}
/* 각 항목 칸: 정확히 절반(50%) 넓이 차지 */
.myListPC .list-wrapper > div {
width: 50% !important;
margin-bottom: 0 !important;
box-sizing: border-box !important;
}
/* 리스트 개별 행 */
.myListPC .list-item {
display: flex !important;
flex-direction: row !important;
align-items: center !important;
width: 100% !important;
height: 100% !important;
min-height: 44px !important;
background-color: #ffffff !important;
border: none !important;
border-bottom: 1px solid #ececec !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 8px 15px !important; /* 좌우 여백을 주어 텍스트가 숨쉬게 합니다 */
box-sizing: border-box !important;
cursor: pointer !important;
transition: background-color 0.2s !important;
}
/* 왼쪽 열(홀수 번째) 항목의 우측에만 선을 그어 중앙 구분선을 만듭니다 */
.myListPC .list-wrapper > div:nth-child(odd) .list-item {
border-right: 1px solid #ececec !important;
}
/* 마우스 오버 시 연한 녹색 효과 */
.myListPC .list-item:hover {
background-color: #e8f5e9 !important;
}
/* 구조 유지를 위한 해제 */
.myListPC .list-info-box,
.myListPC .list-info-bot {
display: contents !important;
}
/* --- 화면 배치 --- */
/* 1. 지역 (왼쪽 정렬, 고정 사이즈) */
.myListPC .list-region {
order: 1 !important;
flex: 0 0 90px !important; /* 지역명 너비 고정 */
text-align: left !important;
font-size: 13px !important;
color: #333 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* 2. 모집내용 제목 묶음 (가운데 영역 전체 차지) */
.myListPC .list-info-top {
order: 2 !important;
flex: 1 1 auto !important;
display: flex !important;
align-items: center !important;
justify-content: space-between !important; /* 제목은 왼쪽, 스크랩은 오른쪽 끝으로 밉니다 */
padding: 0 10px !important;
min-width: 0 !important;
}
/* 3. 실제 제목 (아이콘과 텍스트 수평 정렬) */
.myListPC .list-subject {
display: flex !important;
align-items: center !important;
gap: 0 !important;
font-size: 13px !important;
font-weight: 500 !important;
color: #111 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
flex: 1 !important; /* 남는 공간을 모두 차지하여 스크랩을 끝으로 밉니다 */
}
/* 4. 스크랩 아이콘 (오른쪽 끝 정렬) */
.myListPC .list-scrap-icon {
flex-shrink: 0 !important;
margin-left: 10px !important;
cursor: pointer !important;
}
/* --- 화면에서 숨길 항목 --- */
.myListPC .list-profile-box,
.myListPC .list-badge-industry,
.myListPC .list-pay-txt {
display: none !important;
}
/* 광고 등록 칸 중앙 정렬 */
.myListPC .list-ad-slot {
justify-content: center !important;
color: #888 !important;
}
/* 깜빡임 효과 및 아이콘 스타일 */
@keyframes blink-effect { 50% { opacity: 0.5; color:red; } }
.blink-effect { animation: blink-effect 1s step-end infinite; }
.img-icon-item { width: auto !important; height: 16px !important; max-width: none !important; vertical-align: middle !important; display: block !important; }
/* 폰트 컬러 및 배경 공통 스타일 유지 */
.text-black{color:#000!important}
.text-white{color:#fff!important;text-shadow:0 1px 1px rgba(0,0,0,.25)}
.text-red{color:#ff2b2b!important}
.text-pink{color:#ff4fa2!important}
.text-orange{color:#ff8a00!important}
.text-yellow{color:#ffd042!important}
.text-green{color:#53b800!important}
.text-blue{color:#1877f2!important}
.text-purple{color:#8a39d8!important}
.hl-clear{background:transparent!important}
.hl-gray{background:rgba(160,160,160,.45)!important}
.hl-red{background:rgba(255,70,70,.35)!important}
.hl-pink{background:rgba(255,105,180,.35)!important}
.hl-orange{background:rgba(255,152,0,.40)!important}
.hl-yellow{background:rgba(255,235,59,.50)!important}
.hl-green{background:rgba(160,255,80,.40)!important}
.hl-blue{background:rgba(90,170,255,.35)!important}
.hl-purple{background:rgba(170,110,255,.35)!important}
.bold{font-weight:800}
@keyframes blinkTitle{0%,49%{opacity:1}50%,100%{opacity:0}}
.blink{animation:blinkTitle 1s steps(1,end) infinite}
/* =======================================
1. 푸터 전체 감싸는 영역
======================================= */
.site_ft_wrap {
clear: both !important;
display: flex !important;
justify-content: center !important;
padding: 20px 0 !important;
width: 100% !important;
flex-basis: 100% !important;
position: relative !important;
left: -60px !important;
background-color: #ffffff !important;
border-top: 1px solid #eeeeee !important;
box-shadow:
-50vw 0 0 0 #ffffff, /* 왼쪽 빈 공간을 흰색으로 채움 */
50vw 0 0 0 #ffffff, /* 오른쪽 빈 공간을 흰색으로 채움 */
-50vw -1px 0 0 #eeeeee, /* 왼쪽 상단 회색 선 연장 */
50vw -1px 0 0 #eeeeee !important; /* 오른쪽 상단 회색 선 연장 */
}
.site_ft_inner {
width: 1050px;
margin: 0 auto;
box-sizing: border-box;
}
/* =======================================
2. 상단 (고객센터, 시간, 계좌)
======================================= */
/* 상단 영역 높이 최적화 */
.ft_top_sect {
display: flex;
justify-content: space-between;
}
/* 각 항목의 높이와 간격 조절 */
.ft_cs_box, .ft_time_box, .ft_bank_box {
flex: 1;
position: relative;
padding-left: 20px;
}
/* 고객센터 박스 */
.ft_cs_box {
width: 33.33%;
position: relative;
box-sizing: border-box;
}
.ft_cs_box .sect_tit {
font-size: 16px;
font-weight: 700;
color: #696969;
}
.ft_cs_box .sect_txt {
font-size: 30px;
font-weight: 700;
color: #111;
}
/* 영업시간 박스 */
.ft_time_box {
border-left: 1px solid #dddddd;
padding: 0px 50px;
width: 33.33%;
position: relative;
box-sizing: border-box;
}
.ft_time_box .time_row {
line-height: 20px;
}
.ft_time_box .time_row .sect_tit {
font-size: 14px;
width: 50px;
display: inline-block;
color: #666;
}
.ft_time_box .time_row .sect_txt {
font-size: 14px;
color: #333;
}
/* 계좌정보 박스 */
.ft_bank_box {
border-left: 1px solid #dddddd;
padding: 0px 50px;
width: 33.33%;
position: relative;
box-sizing: border-box;
}
.ft_bank_box .bank_tit {
font-size: 16px;
font-weight: 700;
color: #696969;
display: inline-block;
margin-bottom: 8px;
}
.ft_bank_box .bank_tit .bank_num {
font-size: 25px;
color: #000000;
}
.ft_bank_box .bank_tit img {
width: 116px;
vertical-align: middle;
margin-right: 10px;
}
/* 상단 우측 배경 아이콘 공통 */
.bg_icon {
position: absolute;
top: 0px;
right: 20px;
}
.bg_icon img {
width: 50px;
vertical-align: middle;
border-radius: 8px;
filter: invert(94%) sepia(0%) saturate(0%) hue-rotate(178deg) brightness(92%) contrast(86%);
}
/* =======================================
3. 중단 (메뉴 링크)
======================================= */
.ft_menu_sect {
border-top: 1px solid #dddddd;
border-bottom: 1px solid #dddddd;
margin: 20px 0px 0px;
padding: 15px 0px;
}
.ft_menu_sect ul {
margin: 0; padding: 0; list-style: none;
}
.ft_menu_sect ul li {
display: inline-block;
font-size: 15px;
font-weight: 600;
margin-right: 50px;
}
.ft_menu_sect ul li a {
text-decoration: none;
color: #333;
}
.ft_sub_menu {
margin-top: 8px !important;
padding: 0 !important;
}
.ft_sub_menu li {
display: block !important;
font-size: 13px !important;
font-weight: 400 !important;
margin-right: 0 !important;
margin-bottom: 4px;
}
.ft_sub_menu li a {
color: #888 !important;
}
.ft_sub_menu li a:hover {
color: var(--brand-primary, #00a65a) !important;
}
/* =======================================
4. 하단 (사업자 정보 및 경고)
======================================= */
.ft_bot_sect {
margin: 20px 0px 0px;
position: relative;
display: flex;
align-items: center;
}
.ft_bot_logo img {
width: 245px;
vertical-align: top;
}
.ft_bot_info {
margin-left: 20px;
padding-left: 25px;
border-left: 1px solid #dddddd;
line-height: 1.6;
font-size: 13px;
color: #666;
flex: 1;
}
.ft_bot_info p { margin: 0; }
/* 19세 미만 경고 스타일 */
.ft_bot_warn {
flex-shrink: 0;
}
.youth_warning {
font-size: 13px; color: #666; line-height: 1.5; text-align: left; margin: 0;
}
.youth_warning .age_19 { color: #e53935; font-size: 16px; font-weight: bold; margin-right: 3px; }
.youth_warning .txt_red { color: #e53935; font-weight: bold; }
.youth_warning .go_back {
display: inline-block; margin-top: 8px; color: #888; text-decoration: none;
font-size: 12px; border: 1px solid #ccc; padding: 3px 10px; background: #fafafa;
}
.youth_warning .go_back:hover { color: #e53935; border-color: #e53935; }
/* 텍스트 크기 및 줄간격 조절 */
.sect_tit { font-size: 13px; color: #888; margin-bottom: 5px; }
.sect_txt { font-size: 20px; font-weight: bold; color: #333; }
/* 3단 구분선 강제 적용 */
.ft_time_box, .ft_bank_box {
border-left: 1px solid #ddd;
}
/* 하단 사업자 정보 영역 높이 최소화 */
.ft_bot_sect {
display: flex;
align-items: center;
padding-top: 20px;
margin-top: 10px;
}
.ft_bot_info {
flex: 1;
font-size: 12px;
line-height: 1.4; /* 줄간격을 줄여 높이 최소화 */
color: #888;
margin: 0 20px;
}
.ft_bot_info p { margin: 0 0 2px 0; } /* 문단 간격 최소화 */
/* 19세 경고창 크기 축소 */
.youth_warning { font-size: 11px; }
.youth_warning .age_19 { font-size: 14px; }