/* 레이아웃 구조 */
.main .sec .inner {
    width: 100%;
    margin:0 auto;
    position:relative;
}
.main .sec01 {
    width: 100%;
    padding:65px 0 120px 0;
    background-image:url('../../_images/main/main_visual_bg.jpg');
    background-size:cover;    
    background-position:top;
    position:relative;
    z-index:99999;
}
.bg-objects {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; 
    z-index:-1;
}
.obj-bubble-left {
    position: absolute;
    top: 80px;
    left: 0;
    width: 345px; 
    z-index:-1;
}
.obj-bubble-right {
    width:65px;
    position: absolute;
    top: 25px;
    right: 0;
}
.obj-family {
    position: absolute;
    top:-202px; 
    right:5%;
    height:200px;
    z-index: 1;
}
.main .sec01 .inner {
    max-width:1400px;
    display: flex;
    flex-direction: column;
    gap:40px; 
    z-index:3;
}
/* 1. 상단 그룹 (로고 + 텍스트) */
.main .sec01 .top-group {
    display: flex;
    align-items: flex-end;
    gap:40px; /* 로고와 텍스트 사이 간격 (조정 가능) */
}

.main .sec01 .top-group .wlb-logo img {
    height: 108px; /* 요청하신 이미지 높이 */
    width: auto;
    display: block;
}

.main .sec01 .top-group .text-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-bottom:10px;
}

.main .sec01 .top-group .sub-title {
    font-size: 26px;
    color: rgb(0, 0, 0); /* 완전 블랙 */
    line-height: 1.3;
    font-weight:300;
}

.main .sec01 .top-group .main-title {
    font-size: 46px;
    color: var(--color02);
    line-height: 1.457;
    font-weight: 700; /* 제목 강조 */
}
.main .sec01 .bottom-group {
    display: flex;
    flex-direction: column;
    gap: 20px; 
    margin-left:60px;
}
.main .sec01 .search-box {
    position: relative;
    max-width: 644px;
    height: 60px;
    border: 2px solid var(--color03);
    background-color: #fff;
    box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.25);
    border-radius: 60px; 
    display: flex;
    align-items: center;
    overflow: hidden;
}
.main .sec01 .search-box input {
    flex: 1;
    border: none;
    outline: none;
    height: 100%;
    padding: 0 30px; /* 텍스트 내부 여백 */
    font-size: 22px;
    font-family: var(--font-main);
    color:var(--color03);
}
.main .sec01 .search-box:focus-within {
    border: 2px solid #006CFF;
    outline:none !important;
    color:#006CFF;    
}
.main .sec01 .search-box input:focus {
    color:#006CFF;
}
.main .sec01 .search-box input::placeholder {
    color: var(--textColor01);
}

.main .sec01 .search-box .btn-search {
    width: 117px;
    height: calc(100% - 4px);
    background-color: var(--color02);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border-radius:30px;
    overflow:hidden;
    margin-right:2px;
}

.main .sec01 .search-box .btn-search .search-text {
    font-size: 20px;
    font-family: var(--font-main);
    color: var(--textColor02);
    font-weight: 500;
}

.main .sec01 .search-box .btn-search .search-icon {
    width: 27px;
    display: flex;
    align-items: center;
}
.main .sec01 .search-box .btn-search .search-icon img {
    width:100%;
}
.main .sec01 .hashtags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 25px;
    padding-left: 55px;
}
.main .sec01 .hashtags a {
    font-size: 20px;
    color: rgb(0, 0, 0);
    text-decoration: none;
    line-height: 1.2;
}

.main .sec01 .hashtags a:hover {
    text-decoration: underline;
    color: var(--color01); /* 호버 시 포인트 컬러 적용 예시 */
}

/* sec02 */
.main .sec01 .mainTabWrap,
.main .sec01 .noticeWrap {
    max-width:1600px;
    margin:0 auto;    
    margin-top:60px;
    box-shadow: 4px 14px 17px 0px rgba(0, 0, 0, 0.1);    
    position:relative;
}
.mainTabWrap {
    width: 1600px;
    border: 2px solid #fff;
    border-radius: 30px;
    background-color: rgba(255, 255, 255, 0.6);
    padding: 50px 0;  
    z-index:2;
}
.mainTabBox {
    width:100%;
    margin: 0 auto;
    height: 100%;
    padding:0 55px;
}
.tabBtn {
    width: 100%;
    display: flex;
    flex-direction:row;
    gap: 10px;
    margin-bottom:25px;
    margin-left:90px;
}
.tabBtn li button {
    width: 200px;
    height: 60px;
    border: 1px solid rgb(191, 191, 191);
    border-radius: 10px;
    background-color: #fff;
    font-size: 21px;
    color: rgb(29, 29, 29);
    line-height: 1.2;
    text-align: center;
    transition: all 0.2s;
    letter-spacing:-0.8px;
}
.tabBtn li:nth-child(4) button {
    width:260px;
}
.tabBtn li button.active,
.tabBtn li button:focus {
    background-color: var(--color02);
    border-color: var(--color02);
    color: var(--textColor02);
    outline:none !important;
}
.tabBox {
    width: 100%;
    height: calc(100% - 100px);
}
.tab-panel {
    display: none;
    width: 100%;
    height: 100%;
}
.tab-panel.active {
    display: block;
}
.panel-inner {
    display: flex;
    justify-content: space-between;
    height: 100%;
}
.cont-left {
    width: calc(100% - 330px); 
}
.cont-right {
    width:330px;
    margin-top:10px;
}
.cont-right01 {
    display:flex;
    flex-direction:column;
    align-items:flex-end;
}
.cont-right02 {
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
}
.calc-container {
    width:280px;
    display: flex;
    flex-direction: column;
}
.calc-wrap {
    width: 100%;
    background-color: #fff;
    border-bottom-left-radius:20px;
    border-bottom-right-radius:20px;
    overflow: hidden;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.calc-header {
    background-color: rgba(68, 68, 68, 0.9);
    padding:15px 20px 15px 20px;
    color: #fff;
    border-top-left-radius:20px;
    border-top-right-radius:20px;
}
.calc-header .header-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom:8px;
}
.calc-header .header-top .num {
    display:none;
    font-size:1em;
    color:#FFD012;
}
.calc-header h3 {
    font-size: 22px;
    font-weight: bold;
    line-height: 1;
}

.calc-header .btn-reset {
    background-color: #efefef;
    color: #000;
    font-size: 12px;
    font-weight:300;
    width:58px;
    height:25px;
    line-height:25px;
    text-align:center;
    border-radius:12px;
    border: none;
    cursor: pointer;
    font-family: var(--font-main);
}
.calc-header .btn-reset:hover,
.calc-header .btn-reset:focus {
    background-color: var(--color01);
    color: #fff;
    outline:none !important;
}
.calc-header .sub-text {
    font-size: 12px;
    font-weight:300;
    color: #d9d9d9;
    line-height: 1;
}
.calc-body {
    height:260px;
    overflow-y: auto;
    overflow-x:hidden;
}
.calc-body::-webkit-scrollbar {
    width: 8px;
}
.calc-body::-webkit-scrollbar-track {
    background: transparent;
}
.calc-body::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.078);
    border-radius: 4px;
}
.calc-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:12px 20px;
    border-bottom: 1px solid #f0f0f0;
}
.calc-list .item-info {
    width:calc(100% - 90px);
}
.calc-list .label {
    font-size: 16px;
    color: #111;
    line-height: 1.4;
    word-break: keep-all;
    display: inline;     
    line-height: 1.4;     
    word-break: keep-all; 
}
.btn-help {
    display: inline-block; 
    vertical-align: middle;
    position: relative;
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: #ccc url('../../_images/main/icon_question.png') no-repeat center/cover; 
    cursor: pointer;
    flex-shrink: 0; 
    position:relative;
    margin-top:-2px;
}
.btn-help:hover {
    background-image: url('../../_images/main/icon_question_on.png'); 
}
.btn-help .tooltip {
    display: none; 
    position: absolute;
    left: 10px;
    top:10px;
    width:140px;
    padding: 10px;
    background: #333;
    color: #fff;
    font-size: 12px;
    border-radius: 5px;
    z-index: 1000;
    line-height: 1.4;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.2);
}
.btn-help .tooltip.active {
    display:block;
}
.calc-container .btn-help {
    position: relative;
}
.calc-container .btn-help .tooltip {
    display: none;
    position: absolute;
    left: 10px;
    top: 100%;
    z-index: 10;
    text-align:left;
    word-break:keep-all;
}
.calc-container .btn-help:hover .tooltip,
.calc-container .btn-help:focus .tooltip,
.calc-container .btn-help:focus-within .tooltip {
    display: block;
}
.item-input-group {
    display: flex;
    align-items: center;
    gap: 5px;
}
.unit-x {
    font-size: 16px;
    color: #333;
}
.input-num {
    width: 64px;
    height: 34px;
    border: 1px solid #ccc;
    background-color: #fff;
    text-align: center;
    font-size: 16px;
    color: #000;
    font-family: var(--font-main);
    outline: none;
}
.input-num::placeholder {
    color: #999;
}
.input-num:focus,
.input-num.filled {
    border-color: #000;
    color:#000;
}
.unit-person {
    font-size: 14px;
    color: #333;
}
.calc-footer {
    background-color: rgba(0, 60, 107, 0.9);
    padding: 0 20px;
    box-sizing:border-box;
    height:50px;
    display:flex;
    justify-content: space-between;
    align-items: center;
    margin:4px; 
    margin-top: 0;
    border-radius:6px 6px 20px 20px;
    overflow:hidden;
}
.calc-footer .total-label {
    font-size: 18px;
    color: #fff;
}
.calc-footer .total-price {
    font-size: 22px;
    color: #3bffef; 
    font-weight: bold;
}
.calc-desc {
    font-size: 14px;
    font-weight:400;
    letter-spacing:-1px;
    line-height:1.3;
    color: #333;
    line-height: 1.3;
    letter-spacing:-0.8px;
    display:flex;
    flex-direction:row;
    align-items:flex-start;
    gap:3px;
    margin:15px 0 25px 0;
}
.btn-view-all {
    display: flex;
    align-items: center;
    text-decoration: none;
    width: 100%;
    position: relative;
    height: 50px;
}
.btn-view-all .rect-box {
    background-color: #054da6; 
    width:100%;
    height: 100%;
    display: flex;
    align-items: center;
    color: #dbdbdb;
    font-size: 18px;
    padding-left: 25px;
    border-radius: 25px;
}
.btn-view-all .circle-box {
    width: 50px;
    height: 50px;
    background-color: #00367c;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
    top: 0;
}

.btn-view-all .circle-box img {
    width:50%;
}
.support-slide-wrap {
    position: relative;
    max-width: 100%;
    margin:0 auto;

    z-index:2;
}
.support-slide-wrap .swiper {
    width:calc(100% - 160px);
    overflow:hidden;
    margin:0 auto;
}
.support-slide-wrap .swiper-slide {
    height: calc((100% - 20px) / 2) !important; /* 2줄 높이 계산 (간격 고려) */
    padding:10px;
}
.support-slide-wrap .swiper-button-next, 
.support-slide-wrap .swiper-button-prev {
    top:50%;
    transform:translateY(-50%);
    width:60px;
    height:60px;
    z-index:9;
}
.swiper-button-next.swiper-button-disabled, 
.swiper-button-prev.swiper-button-disabled {
    opacity:1 !important;
}
.support-slide-wrap .swiper-button-next.swiper-button-disabled::after, 
.support-slide-wrap .swiper-button-prev.swiper-button-disabled::after {
    opacity:0.2 !important;
}
.support-slide-wrap .swiper-button-prev::after,
.support-slide-wrap .swiper-button-next::after {
    content: '';
    display: block;
    width:7px;
    height:7px;
    border-style: solid;
    border-width:2.5px 2.5px 0 0;
    border-color: #000; 
    transform-origin: center;
}
.support-slide-wrap .swiper-button-next:hover, 
.support-slide-wrap .swiper-button-prev:hover {
    background-color:var(--hover);
}
.support-slide-wrap .swiper-button-prev:hover::after,
.support-slide-wrap .swiper-button-next:hover::after {
    border-color: #fff;     
} 
.support-slide-wrap .swiper-button-prev::after {
    transform: rotate(-135deg); 
}
.support-slide-wrap .swiper-button-next::after {
    transform: rotate(45deg);
}
.support-slide-wrap .card-item {
    height: 100%; 
    min-height:260px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background-color: #fff;
    border-radius: 12px;
    padding: 24px;
    box-sizing: border-box; 
    box-shadow:3px 3px 10px rgba(0, 0, 0, 0.078);
}
.support-slide-wrap .swiper-grid-column>.swiper-wrapper {
    flex-direction:row;
}
/* 텍스트 깨짐 방지 핵심 */
.support-slide-wrap .card-title, .badge-main, .badge-sub, .price, .label-text {
    word-break: keep-all; /* 단어 단위로 줄바꿈 */
    white-space: nowrap;  /* 웬만하면 한 줄 유지 */
}

/* 상단 영역 */
.support-slide-wrap .card-top {
    display: flex;
    flex-direction: column;
}

.support-slide-wrap .card-badges {
    display: flex;
    align-items: center;
    margin-bottom:5px;
}
.support-slide-wrap .badge-main { font-size: 16px; font-weight: bold; }
.support-slide-wrap .badge-main.type-biz { color: var(--color-biz); }
.support-slide-wrap .badge-main.type-worker { color: var(--color-worker); }

.support-slide-wrap .badge-line {
    width: 1px; height: 12px; background-color: #ddd; margin: 0 10px;
}

.support-slide-wrap .badge-sub { font-size: 16px; font-weight: bold; color: #973a00; }
.support-slide-wrap .badge-sub.type-sme { color: var(--color-sme); }
.support-slide-wrap .badge-sub.black {color:#000;}
.support-slide-wrap .card-title {
    font-size: 22px; 
    color: #222; 
    font-weight: bold; 
    margin-bottom:5px;
    white-space: normal; /* 제목은 길면 두 줄 될 수도 있음 */
    line-height: 1.3;
}

.support-slide-wrap .btn-more {
    font-size: 14px; font-weight:400; color: #000000; text-decoration: none; margin-bottom: 15px; display: inline-block; letter-spacing:-1px;
}
.support-slide-wrap .card-desc::before {
    content:'※';
    margin-right:3px;
}
.support-slide-wrap .card-desc {
    min-height:35px;
    font-size: 16px; font-weight:300; color: #666666; line-height: 1.2;
    word-break: keep-all; /* 설명글 단어 단위 줄바꿈 */
    /* 말줄임 처리 (선택사항) */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    display:flex;
    flex-direction:row;
    align-items:flex-start;
}

/* 하단 영역 (가격 + 담기) */
.support-slide-wrap .card-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top:30px;
    margin-top: auto; 
}
.support-slide-wrap .price {
    font-size:20px; font-weight:500; color: #333333;
    width:calc(100% - 50px);
    word-break:keep-all;
}
.support-slide-wrap .swiper-pagination {
    position:relative;
    margin-top:25px;
}
.support-slide-wrap .swiper-pagination-bullet {
    width:20px;
    height:20px;
}
.support-slide-wrap .swiper-pagination-bullet-active {
    background-color:var(--color02);
}
/* 체크박스 스타일 */
.check-box-wrap {
    display: flex; align-items: center; gap: 8px; cursor: pointer;
}
.check-box-wrap .label-text { font-size: 14px; font-weight:500; color:#444444; }
.check-box-wrap input { display: none; }
.checkmark {
    width:30px; height:30px; border: 1px solid #ddd; border-radius: 4px; position: relative;
    background-color: #fff; transition: all 0.2s;
}
.check-box-wrap input:checked ~ .checkmark {
    background-color: #00367c; border-color: #00367c;
}
.checkmark:after {
    content: ""; position: absolute; display: none;
    left:10px; top:4px; width:6px; height:13px;
    border: solid white; border-width:0 2px 2px 0; transform:rotate(45deg);
}
.check-box-wrap input:checked ~ .checkmark:after { display: block; }

/* 네비게이션 버튼 */
.custom-nav-btn {
    width: 50px; height: 50px; background-color: #fff; border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    color: #333;
}
.custom-nav-btn::after { font-size: 20px; font-weight: bold; }
.main_tab_link {
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  border-radius: 50%;
  background-color:#f8f8f8;
  width: 269px;
  height: 269px;  
  box-shadow:0 0 19px rgba(0, 0, 0, 0.2);
  font-size:18px;
  font-weight:400;
  color:#111111;
  line-height:1.2;
}
.main_tab_link:hover {
    color:var(--hover);
}
.main_tab_link .arrow {
    width:181px;
    margin-bottom:20px;
}
.main_tab_link .arrow.on {
    display:none;
}
.main_tab_link:hover .arrow.off {
    display:none;
}
.main_tab_link:hover .arrow.on {
    display:block;
}
/* --- 알림마당 섹션 공통 --- */
.noticeWrap {
    display: flex;
    flex-direction:row;
    align-items:flex-start;
    justify-content:space-between;
    width: 100%;
    background-color: #fff;
    border-radius: 30px;
    box-shadow: 0px 8px 152px 0px rgba(0, 0, 0, 0.1); /* 그림자 농도 조절 (너무 진해서 0.1로 낮춤, 원본은 0.91) */
    padding:50px; /* 내부 여백 적절히 조정 */
    position: relative;
    z-index: 10;
}
.noticeWrap .lfBox {
    display: flex;
    flex-direction:row;
    align-items:flex-start;
    width:calc(100% - 570px);
    margin-top:30px;    
}
/* 1. 왼쪽: 타이틀 영역 (약 20%) */
.notice-left {
    width: 280px;
    display: flex;
    flex-direction: column;
}
.notice-left .tit {
    font-size: 42px;
    font-weight: bold;
    color: #000;
    line-height: 1.2;
    margin-bottom: 20px;
}

.notice-left .desc {
    font-size: 18px;
    font-weight:300;
    color: #000;
    line-height: 1.5;
    margin-bottom: 40px;
}

.btn-custom {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 163px;
    height: 50px;
    background-color: #003c6b; /* 요청 컬러 */
    color: #fff;
    font-size: 16px;
    text-decoration: none;
    gap: 10px; /* 글자와 화살표 사이 간격 */
    border-radius: 25px; /* 버튼 둥글게 */
}
.notice-center {
    width:calc(100% - 340px);
    margin-left:60px;
}
.notice-list li {
    border-bottom: 1px solid #e6e6e6; /* 구분선 색상 */
}
.notice-list li:first-child {
    border-top: 1px solid #e6e6e6; /* 맨 위 선 필요시 */
}
.notice-list li a {
    display: flex;
    align-items: center;
    padding: 25px 0;
    text-decoration: none;
    color: #000;
}
/* 뱃지 스타일 */
.notice-list .badge {
    display: inline-block;
    width: 80px;
    height: 32px;
    line-height: 32px;
    text-align: center;
    border-radius: 4px;
    font-size: 18px;
    color: #fff;
    margin-right: 20px;
}
.badge.type-notice { background-color: #666; }
.badge.type-news   { background-color: #f2ae2a; }
.badge.type-event  { background-color: #e60057; }

/* 날짜와 제목 */
.notice-list .list-body {
    flex: 1; /* 가운데 영역 늘리기 */
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden; /* 말줄임표 처리를 위해 필수 */
    padding-right: 20px;
}

.notice-list .date {
    font-size: 20px;
    font-weight: bold;
    color: #000;
    margin-bottom: 5px;
}
.notice-list .moWrap .date {
    display:none;
}
.notice-list .subject {
    font-size: 18px; /* 요청은 20px이나 리스트 밸런스상 18px 추천, 원하면 20px로 */
    color: #000;
    white-space: nowrap;      /* 한 줄로 표시 */
    overflow: hidden;         /* 넘치는 내용 숨김 */
    text-overflow: ellipsis;  /* 말줄임표(...) */
}

/* 조회수 영역 */
.notice-list .list-info {
    display: flex;
    align-items: center;
    gap:7px;
    min-width: 70px; /* 자리 확보 */
    justify-content: flex-end;
}
.notice-list .list-info img {
    width:20px;
}
.notice-list .count {
    font-size: 14px;
    color: #666;
}

/* 3. 오른쪽: 배너 영역 (약 30%) */
.notice-right {
    width: 470px;
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* 위아래 배너 간격 균등 */
    gap: 20px;
}

.banner-box {
    display: block;
    position: relative;
    width: 100%;
    height: 180px; /* 높이 반반 */
    border-radius: 20px;
    padding: 30px;
    text-decoration: none;
    overflow: hidden;
}

/* 배경색 */
.banner-box.bg-blue   { background-color: #edfaff; }
.banner-box.bg-purple { background-color: #f2f4ff; }

.banner-box .sub-txt {
    font-size: 18px;
    font-weight:300;
    color: #000;
    line-height: 1.4;
    margin-bottom: 10px;
}
.sub-txt .color01 {
    font-weight:500;
    color:#066f97;
}
.sub-txt .color02 {
    font-weight:500;    
    color:#2135a7;
}
.banner-box .tit {
    font-size: 26px;
    font-weight: bold;
    color: #000;
    display: block;
}

/* 배너 내부 작은 버튼 */
.banner-box .btn-mini {
    position: absolute;
    top: 20px;
    right: 20px;
    background-color: #fff;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 16px;
    font-weight:500;
    color: #2c394b;
    display: flex;
    align-items: center;
    gap:15px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
}
.banner-box .btn-mini:hover {
    background-color:var(--hover);
    color:#fff;
}
.banner-box .btn-mini img {
    width:14px;
}
.banner-box .btn-mini img.on {
    display:none;
}
.banner-box .btn-mini:hover img.off {
    display:none;
}
.banner-box .btn-mini:hover img.on {
    display:block;
}
/* 배너 일러스트 위치 */
.banner-box .obj-img {
    width:235px;
    position: absolute;
    right: 20px;
    bottom: 0;
}
.banner-box .obj-img02 {
    width:154px;
    right:62px;
}
.banner-box .obj-img img {
    height: 100%; /* 이미지 높이 자동 조절 */
}

/* sec02 */
.main .sec02 {
    background-color:#f6fcff;
    padding:120px 0 180px 0;
}
.main .sec02 .inner {
    max-width:1600px;
}
/* 전체 래퍼: Flex로 순서 제어 */
.notice-header-wrap {
    display: flex;
    flex-wrap: wrap; /* 줄바꿈 허용 */
    align-items: center;
    position: relative;
}

/* 1. 탭 버튼 (왼쪽) */
.noticeTabBtn {
    display: flex;
    align-items: center;
    gap: 0; /* 간격은 padding이나 margin으로 조절 */
}

.noticeTabBtn li {
    position: relative;
    padding: 0 50px; /* 좌우 간격 넉넉하게 (총 100px 느낌) */
}

/* 첫번째 항목 왼쪽 여백 제거 */
.noticeTabBtn li:first-child {
    padding-left: 0;
}

/* 구분선 (가운데 라인) */
.noticeTabBtn li::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 40px;
    background-color: #d3d3d3; /* rgb(211, 211, 211) */
}

/* 마지막 항목은 구분선 없음 */
.noticeTabBtn li:last-child::after {
    display: none;
}

.noticeTabBtn button {
    font-size: 42px;
    font-family: "Pretendard";
    color: rgb(74, 74, 74); /* 비활성 컬러 */
    line-height: 1.2;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}
.noticeTabBtn button:hover {
    color:#0092cd;
}
/* 활성화 상태 */
.noticeTabBtn button.active {
    color: #000;
    font-weight: bold;
}

/* 2. SNS 영역 (오른쪽) */
.sns-area {
    display: flex;
    align-items: center;
    margin-left: auto; /* 오른쪽 끝으로 밀기 */
    gap: 20px;
}
.sns-txt {
    font-size: 18px;
    color: #555;
    font-weight: bold;
    text-align: right;
}
.sns-links {
    display: flex;
    gap:5px;
}
.sns-icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 50px;
    background-color: rgb(100, 100, 100); /* 기본 회색 */
    border-radius: 50%;
    transition: background-color 0.3s;
}
.sns-icon:hover {
    background-color:var(--hover);
}
.sns-icon.fb img { width: 13px; }
.sns-icon.blog img { width: 23px; }
.sns-icon.insta img { width: 25px; }
.sns-icon.youtube img { width: 24px; }
.sns-icon:hover {
    
}
.btn-custom {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    background-color: #003c6b;
    color: #fff;
    padding: 10px 25px;
    border-radius: 30px;
    font-size: 16px;
    text-decoration: none;
    height: 50px;
}
.btn-custom:hover {
    background-color:var(--hover);
}
.btn-custom img {
    width:14px;
}
/* 3. 탭 박스 (컨텐츠) */
.noticeTabBox {
    width: 100%;
    margin-top: 50px; 
    position: relative;
}
.notice-panel {
    display: none;
    width: 100%;
}
.notice-panel.active {
    display: block;
}
.mobileWrap .btn-custom {
    display:none;
}
/* 카드 스타일 */
.news-card {
    display: block;
    width: 100%;
    border-radius: 10px;
    background-color: #fff;
    border: 1px solid #eee; /* 시안에는 없으나 카드 구분용 */
    box-sizing:border-box;
    overflow: hidden;
    text-decoration: none;
}
.news-card:hover {
    background-color:#F3FBFF;
    border:3px solid #49B0FF;
}
.news-card:hover .txt-box {
    padding:25px 18px;
}
.news-card .img-box {
    width: 100%;
    overflow: hidden;
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
}
.news-card .img-box img {
    width: 100%;
    display: block;
    transition: transform 0.3s;
}
.news-card:hover .img-box img {
    transform: scale(1.05); /* 호버 시 확대 효과 */
}
.news-card .txt-box {
    padding: 25px 20px;
}

.news-card .tit {
    font-size: 18px;
    color: #000;
    line-height: 1.4;
    height: 52px; /* 2줄 말줄임 높이 확보 */
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 15px;
}
.news-card dl {
    padding:10px 0 50px 0;
}
.news-card dd hr {
    width: 30px;
    height: 3px;
    background: #0047A3;
    margin:30px 0;
}
.news-card dt {
    color: #333;
    font-size: 20px;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;       
    -webkit-line-clamp: 2;      
    -webkit-box-orient: vertical; 
    word-break: break-all; 
    min-height:50px;    
}
.news-card dd {
    color: #333;
    font-size: 18px;
    font-style: normal;
    font-weight: 300;
    line-height:1.3;
    word-break:keep-all;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;       
    -webkit-line-clamp: 3;      
    -webkit-box-orient: vertical; 
    word-break: break-all;    
    min-height:130px;         
}
.news-card .date {
    font-size: 14px;
    color: #666; 
}

/* 마지막 레이아웃 */
.campaignWrap {
    margin-top:100px;
    width:100%;
}
.campaignWrap .campaign-header {
    margin-bottom: 40px;
}

.campaignWrap .campaign-header .tit {
    font-size: 42px;
    font-weight: bold;
    color: #000;
    margin-bottom: 20px;
    line-height: 1.2;
}

.campaignWrap .campaign-header .desc {
    font-size: 18px;
    color: #000;
    line-height: 1.6;
    word-break: keep-all; /* 단어 단위 줄바꿈 */
}
.campaignWrap .campaign-btns {
    display: flex;
    gap: 15px; /* 버튼 사이 간격 */
    margin-bottom: 50px;
    flex-wrap: wrap;
}
.campaignWrap .btn-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 246px;
    height: 50px;
    padding: 0 20px;
    background-color: #0092cd; /* bg-cyan */
    border-radius: 30px;
    text-decoration: none;
    color: #fff;
}

.campaignWrap .btn-stat .label {
    font-size: 16px;
}

.btn-stat .count {
    font-size: 30px;
    font-weight: bold; /* Gmarket Sans 등 폰트 적용 시 font-family 추가 */
}
/* 배경색 옵션 */
.bg-navy {
    background-color: #003c6b;
    width: 185px; /* 요청하신 너비 */
    justify-content: space-between; /* 텍스트와 화살표 양끝 정렬 */
}

/* 3. 하단 카드 리스트 */
.campaignWrap .campaign-list {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}
.campaignWrap .campaign-list {
    width:100%;
}
.campaignWrap .campaign-list li {
    width: 32%; /* 3등분 (여백 제외) */
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.05);
    text-align:right;
}
.campaignWrap .campaign-list li .txt-group {
    text-align:right;
}
.campaignWrap .campaign-list li:nth-child(2) .txt-group{
    text-align:left;
}
.campaignWrap .card-inner {
    padding: 40px 40px 30px 40px;
    position: relative;
    height: 340px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.campaignWrap .txt-group {
    margin-bottom: 20px;
    width: 100%;
    position:relative;
    z-index:2;
}
.campaignWrap .step-tit {
    display: block;
    font-size: 24px;
    color: #0090ff;
    font-weight: bold;
    margin-bottom: 10px;
    font-family: "Noto Sans CJK KR", sans-serif;
}

.campaignWrap .main-tit {
    display: block;
    font-size: 34px;
    color: #000;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.2;
}
.campaignWrap .count-box {
    display: flex;
    flex-direction: column;
    align-items: right;
}

.campaignWrap .campaign-list li:nth-child(2) .count-box {
    align-items: left;
}
.campaignWrap .count-box .num {
    font-size: 40px;
    color: #333;
    font-weight: bold;
    line-height: 1;
    margin-bottom: 5px;
    font-family: "Gmarket Sans TTF", sans-serif; /* 폰트 있으면 적용 */
}

.campaignWrap .count-box .unit {
    font-size: 14px;
    color: #333;
}

/* 이미지 그룹 (일러스트) */
.campaignWrap .img-group {
    position: absolute;
    left: 20px;
    bottom:0;
    max-width:220px;
}
.campaignWrap .campaign-list li:nth-child(2) .img-group {
    right:20px; 
    left:auto;
}
.campaignWrap .img-group img {    
    display: block;
}
.campaignWrap .btn-more {
    position: absolute;
    right: 40px;
    bottom: 30px;
    width: 160px;
    height: 50px;
    background-color: #efefef;
    border-radius: 25px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    text-decoration: none;
    color: #000;
    font-size: 16px;
    transition: background-color 0.3s;
}
.campaignWrap .campaign-list li:nth-child(2) .btn-more {
    left:40px;
    right:auto;
}
.campaignWrap .btn-more:hover {
    background-color: var(--hover);
    color:#fff;
}
.campaignWrap .btn-more img {
    width:14px;
}
.campaignWrap .btn-more .on {
    display:none;
}
.campaignWrap .btn-more:hover .off {
    display:none;
}
.campaignWrap .btn-more:hover .on {
    display:block;
}