@import url('//fonts.googleapis.com/earlyaccess/notosanskr.css');
/* 바디 */
body { height: 100%; }
.layout { max-width:1440px; width:100%; height: 100%; margin:0 auto; }
#nt_header:has(#nt_title) #header_pc { display: none !important; } 
#nt_title { padding:50px 0 20px 0; border-top:1px solid #dee2e6; }
#nt_title .nt-container { height: auto; }
#nt_title .nt-container>div { padding-bottom:0 !important; }
.nt-container { width:100%;margin:0 auto; }
.sub-banner { display: none; margin:40px 0; }
.sub-banner a { display: block; height: 100%; overflow: hidden; text-align: center; }
/* .sub-banner img { width:100%;height: 100%;object-fit: cover; } */
#nt_header:has(#nt_title) .sub-banner { display: block; }
@media (max-width:1440px){
.nt-container { padding:0 20px !important; }
}
@media (max-width:767px){
    .sub-banner { height: auto; }
}

/* 헤더 */
a, span, p, li, strong, b, em, h1, h2, h3, h5, h6, label, input, button, select, div, .en { font-family: 'Noto Sans KR', sans-serif !important; font-weight: 400 !important; }
img { max-width:100%; } 
#nt_header #header_pc { display: block !important; }
#nt_header #nt_sticky { width:100%; margin:0 auto; display: flex; flex-direction: column-reverse;}
#nt_header #nt_sticky #nt_lnb { display: none !important; }
#nt_header #nt_sticky #nt_sticky_wrap #nt_menu { background: #003662 !important; }
#nt_header #nt_sticky #nt_sticky_wrap #nt_menu .nt-container .d-flex { justify-content: center; }
#nt_header #nt_sticky #nt_sticky_wrap #nt_menu .nt-container .d-flex>div>a { background: #212121 !important; display: flex; justify-content: center; }
#nt_header #nt_sticky #nt_sticky_wrap #nt_menu .nt-container .d-flex>div { flex-grow: initial !important; }
#nt_header #nt_sticky #nt_sticky_wrap #nt_menu .nt-container .d-flex>div>ul { height: 100%; }
#nt_header #nt_sticky #nt_sticky_wrap #nt_menu .nt-container .d-flex>div>ul>li { height: 100%; position: initial;}
#nt_header #nt_sticky #nt_sticky_wrap #nt_menu .nt-container .d-flex>div>ul>li>a { height: 100%; background: #003662 !important; }
#nt_header #nt_sticky #nt_sticky_wrap #nt_menu .nt-container .d-flex>div>ul>li>a.on {  background-color: #003662 !important; opacity: 1;}
#nt_header #nt_sticky #nt_sticky_wrap #nt_menu .nt-container .d-flex>div>ul>li>a.on>span { background: rgba(0, 0, 0, 0.2) !important; }
#nt_header #nt_sticky #nt_sticky_wrap #nt_menu .nt-container .d-flex>div>ul>li>a>span { height: 100%; display: flex; align-items: center; justify-content: center; }
.head-logo { position: absolute;top:50%;left:0; width: 110px;transform: translateY(-50%); }
@media (max-width:1440px){
    .head-logo { left:20px; }
}

/* 네비 대/소 메뉴 */
#nt_header #nt_sticky #nt_sticky_wrap #nt_menu .me-a.en { font-family: 'Noto Sans KR', sans-serif !important; font-weight: 400 !important; font-size:14px !important; }
#nt_header #nt_sticky #nt_sticky_wrap .nt-menu .sub-1dli .sub-1da, .nt-menu .sub-1dli .sub-1da { font-family: 'Noto Sans KR', sans-serif !important;font-size:13px !important; line-height: 140%;word-break: keep-all; }
#nt_header #nt_sticky #nt_sticky_wrap .nt-menu .sub-1dli .sub-1da, .nt-menu .sub-1dli .sub-2da { font-size:13px !important; display: flex; gap:5px; }
#nt_header #nt_sticky #nt_sticky_wrap .nt-menu .sub-1dli .sub-2da { padding:5px 10px; } 

/* 전체메뉴 버튼 */
#nt_header #nt_sticky #nt_sticky_wrap #nt_menu .nt-container .d-flex>div.order-3 { position: absolute;right:0; }
#nt_header #nt_sticky #nt_sticky_wrap #nt_menu .nt-container .header-util { display: flex; position: absolute; top:0; right:70px; height: 100%; }
#nt_header #nt_sticky #nt_sticky_wrap #nt_menu .nt-container .header-util li a { display: flex;padding:0 8px;height: 100%; align-items: center; justify-content: center; font-family: 'Noto Sans KR', sans-serif !important; font-weight: 400 !important; font-size:13px !important; color:#fff; }

/* 헤더 비주얼 */
#nt_header #nt_sticky #header_pc .nt-container>div { flex-direction: column;padding:80px 0; gap:20px; width:100%; max-width:640px; margin:0 auto; align-items: center; }
#nt_header #nt_sticky #header_pc .nt-container>div .header-logo a { display: block; width:100%; height: 200px; }
#nt_header #nt_sticky #header_pc .nt-container>div .header-logo a img { width:100%; }
#nt_header #nt_sticky #header_pc .nt-container>div>div { align-self: auto !important; width:100%; padding:0 !important; }
#nt_header #nt_sticky #header_pc .header-search { max-width:100%; } 
#nt_header #nt_sticky #header_pc .header-search form { border-color:#003662 !important; }
#nt_header #nt_sticky #header_pc .header-search .btn { background: #003662 !important; border-radius: 0 !important; }
#nt_header #nt_sticky #header_pc .header-search .btn i { vertical-align: 0 !important;color:#fff !important; line-height: 1; font-size:18px; }
@media (max-width:1024px){
   #nt_header #nt_sticky #nt_sticky_wrap #nt_menu .nt-container .header-util { display: none; }
}

/* 푸터 */
#nt_footer { background: #003662 !important; padding-top:1.5rem; }
#nt_footer .nt-links { border-top:0 !important; }
#nt_footer .nt-links ul > li > a { color:#fff !important; }
#nt_footer ul.d-flex li { color:#fff !important; }
#nt_footer ul.d-flex li a { color:#fff !important; }
#nt_footer strong, #nt_footer span { color:#fff !important; }

/* 배너 */
.main-banner { padding: 20px 40px; border-top:1px solid #000; border-bottom:1px solid #000; margin-bottom:calc(80px + 1.5rem); }
.main-banner a { display: block; overflow: hidden; height: 100%; text-align: center; }
/* .main-banner img { width:100%;height: 100%;object-fit: cover; } */
@media (max-width:640px){
    .main-banner { padding:20px 0; }
}

/* 게시판 */
.board-list-wrap { display: flex; flex-direction: column; margin-bottom:80px; padding:0 200px;position: relative; }
.board-list { display: flex;gap:40px;margin-top:200px; }
.board-list:first-of-type { margin-top:0; }
.board-list .board-list-item strong { display: block;color:#111;font-size:20px; padding-bottom:10px; margin-bottom:10px; border-bottom:1px solid #000; font-weight:600 !important; }
.board-list .board-list-item { width:calc(50% - 20px); }
.board-list .board-list-item ul { display:flex;flex-direction: column; }
.board-list .board-list-item ul li { position: relative; padding-left:8px; color:#111; }
.board-list .board-list-item ul li a { display: flex; gap:10px;align-items: center;justify-content: space-between; }
.board-list .board-list-item ul li a span { color:#111;font-size:14px; }
.board-list .board-list-item ul li a span:first-of-type { overflow: hidden;text-overflow: ellipsis;white-space: nowrap; display: block; }
.board-list .board-list-item ul li a span:last-of-type { font-size:13px; }

.board-list .board-list-item ul li:before { content:"";display: block;position: absolute;top:12px;left:0;width:2px;height: 2px;border-radius: 50%;background: #111; }

.board-list-wrap .board-list-banner a { position: absolute; width:180px; display: block; }
.board-list-wrap .board-list-banner a img { width:100%; }
.board-list-wrap .board-list-banner a.banner1 { top:0;left:0; }
.board-list-wrap .board-list-banner a.banner2 { top:0;right:0; }
.board-list-wrap .board-list-banner a.banner3 { bottom:0;right:0; }
@media (max-width:1440px){
    .layout { padding:0 20px; }
}
@media (max-width:1024px) { 
    .board-list { gap:20px; }
    .board-list .board-list-item { width:calc(50% - 10px); }
}
@media (max-width:840px){
    .board-list { flex-direction: column; margin-top:20px; }
    .board-list .board-list-item { width:100%; }
}
@media (max-width:767px){
    .board-list-wrap { padding:0; }
    .board-list-wrap .board-list-banner { margin-top:40px;display: flex;gap:10px; }
    .board-list-wrap .board-list-banner a { position: relative;top:auto !important;left: auto !important;right:auto !important; bottom:auto !important;width:33.333%; height: auto; }
}
@media (max-width:540px){
     .board-list-wrap .board-list-banner { flex-direction: column; }
     .board-list-wrap .board-list-banner a { width:100%; }
}

/* 콘텐츠 영역 배너 */
.col-md-3:has(.content-banner) { min-height: 800px; }
.content-banner { display: block; text-align: center; position: sticky; top:20px; }
/* .content-banner img { width:100%;height: 100%;object-fit: cover; } */

/* 푸터 */
#nt_footer .top-inner { overflow: hidden; padding:0 !important; }
#nt_footer .bottom-inner { overflow: hidden; padding:1.5rem 0 !important; }

/* 전역일 계산기 */
.frm_group.discharge-select { display: flex; flex-direction: column; }
.frm_group.discharge-select .frm_label { font-size:20px; font-weight: 500 !important; }
.frm_group.discharge-select .btn-group { display: flex;gap:10px; } 
.frm_group.discharge-select .btn-group .btn { margin:0;display: flex; flex: none; background: none; color:#111;padding:0; gap:5px; font-size:16px; } 
.frm_group.discharge-date { display: flex; flex-direction: column; margin-top:40px; }
.frm_group.discharge-date .frm_label { font-size:20px; font-weight: 500 !important; } 
.frm_group.discharge-date input { max-width:400px; }
.frm_group.discharge-btn .btn_submit { background: #003662 !important; border-radius: 20px; font-size:13px; max-width:400px; width:100%; }
#resultBox { padding:24px 20px;border:2px solid #003662; border-radius: 10px; background: #eee; max-width:400px; }
#resultBox ul li { display: flex; gap:10px; color:#111;position: relative;padding-left:10px;justify-content: space-between; }
#resultBox ul li:before { width:2px;height: 2px; content: "";position: absolute; top:12px; left:0; background: #352d2d; border-radius: 50%; }
#resultBox ul li strong { display: block; width:80px; font-weight:500 !important; }
#resultBox ul li #resEnd, 
#resultBox ul li #resRemain { color:#e8584f;font-weight: 600 !important; }
@media (max-width:767px){
    #resultBox { margin-bottom:40px; }
}

/* 메인 슬라이드 */
#nt_header #nt_sticky #header_pc .nt-container>div #new-list { position: relative;padding:0 50px !important; }
#new-list a { display: flex;flex-direction: column; gap:5px; }
#new-list .img { text-align: center; aspect-ratio: 5 / 5; overflow: hidden; }
#new-list .img img { width:100%; height: 100%; object-fit: cover; object-position: top;}
#new-list .desc { text-align: center; color:#212121; font-size:12px; line-height: 1.2; word-break: keep-all;}
#new-list .swiper-control button { position: absolute; top:50%; transform: translateY(-50%); width:30px;height: 30px; border-radius: 50%;display: flex;align-items: center;justify-content: center;background: #fff; }
#new-list .swiper-control button.prev { left:0; }
#new-list .swiper-control button.next { right:0; }
#new-list .swiper-control button i:before { font-size:12px; }
#nt_header #nt_sticky #header_pc .nt-container>div #new-list:has(.swiper-button-lock) { padding:0 !important; }
#nt_header #nt_sticky #header_pc .nt-container>div #new-list:has(.swiper-button-lock) .swiper-control { display: none; }

/* 국방산하기관 */
.img-box-wrap { display: flex;align-items: center; }
.img-box-wrap .img-wrap { width:60px;height: 60px; padding-bottom: 0 !important; }
.img-box-wrap .img-wrap .img-item a { display: block; height: 100%; }
.img-box-wrap .img-wrap .img-item a img { width:100%;height: 100%; object-fit: cover; }

.list-item .card-title a { font-size:14px; }
.list-item .card-text { color: rgba(33, 33, 33, 0.5); font-size:12px; }
.text-value { margin-top:10px; display: flex;gap:1.5rem; }
.text-value div { font-size:12px;color: rgba(33, 33, 33, 0.7); }
.text-value div a { font-size:12px;color: rgba(33, 33, 33, 0.7); }
.nt-menu .sub-1div { width:100vw !important; left:50%; transform: translateX(-50%); }
.nt-menu .sub-1div::before { display: none !important; }

#nt_menu .sub-1dul { display: flex; justify-content: center;width:100vw; }
#nt_menu .sub-2div { top: 100%;left: 50%;width: 100%;transform: translateX(-50%); }
#nt_menu  .sub-1da:after { transform: rotate(90deg); }
#nt_menu .me-sw { width:100% !important; }

/* img-list */
.img-list ul { display: flex; justify-content: center;gap:10px; }
.img-list ul li a { width:70px;display: flex; }

/* 광고영역 */
.view-advertisement { padding:20px 0; border-top:1px solid #212121; border-bottom:1px solid #212121; margin-bottom:40px; }
.view-advertisement a { display: block; text-align: center; }
#nt_body .nt-container>.row { min-height:650px; }


/* 메인 텍스트 영역 */
.header-text {
  text-align: center;
  margin-bottom: 40px;
  padding: 0 20px; /* 모바일 여백 */
}

.header-text .main-title {
  font-size: 42px;          /* 더 크게 */
  font-weight: 800 !important;
  color: #003662;
  margin-bottom: 15px;
  line-height: 1.3;
}

.header-text .sub-title {
  font-size: 24px;          /* 크기 조정 */
  color: #003662;
  font-weight: 800 !important;
  margin-bottom: 25px;
  line-height: 1.4;
}

.header-text .join-btn {
  display: inline-block;
  padding: 3px 20px;        /* 버튼 높이 얇게 */
  background: #003662;
  color: #fff !important;
  font-size: 15px;
  font-weight: 600 !important;
  border-radius: 5px;
  text-decoration: none;
  transition: background 0.2s ease;
}

.header-text .join-btn:hover {
  background: #002244;
}

/* ✅ 반응형 스타일 */
@media (max-width: 1024px) {
  .header-text .main-title {
    font-size: 40px;
  }
  .header-text .sub-title {
    font-size: 17px;
  }
}

@media (max-width: 768px) {
  .header-text .main-title {
    font-size: 28px;
  }
  .header-text .sub-title {
    font-size: 16px;
  }
  .header-text .join-btn {
    font-size: 14px;
    padding: 3px 18px;
  }
}

@media (max-width: 480px) {
  .header-text .main-title {
    font-size: 16px;
  }
  .header-text .sub-title {
    font-size: 11px;
  }
  .header-text .join-btn {
    font-size: 13px;
    padding: 3px 16px;
  }
}



	/* 하단 슬라이드 */
	
	.main-bottom-banner { padding: 20px 40px; border-top:1px solid #000; border-bottom:1px solid #000; margin-bottom:calc(80px + 1.5rem); }
	
	.swiper-slide {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 80px; /* 이미지보다 약간 여유 있게 */
		text-align:center;		
	}

	.swiper-slide img {
		width: 200px;
		height: 100px;
		object-fit: contain;
		max-width: 100%;
	}

	.swiper {
	  position: relative;
	  padding: 0 60px;
	  min-height: 100px; /* 💡 높이 보장: 버튼 위치 안정화 */
	  display: flex;
	  align-items: center; /* 💡 슬라이드와 버튼 수직 정렬 */
	}

	#bottom-list {position:relative}
	#bottom-list a { display: flex;flex-direction: column; gap:5px; }
	#bottom-list .desc { text-align: center; color:#212121; font-size:12px; line-height: 1.2; word-break: keep-all;}
	#bottom-list .swiper-control button { position: absolute; top:50%; transform: translateY(-50%); width:30px;height: 30px; border-radius: 50%;display: flex;align-items: center;justify-content: center;background: #fff; }
	#bottom-list .swiper-control button.prev { left:0; }
	#bottom-list .swiper-control button.next { right:0; }
	#bottom-list .swiper-control button i:before { font-size:12px; }

	/* --- 반응형 --- */
	@media (max-width: 1280px) {
	  {
		padding: 1rem 0 0;
	  }
	  .swiper {
		padding: 0 20px;
	  }
	}

	@media (max-width: 1024px) {
	  {
		padding: 1rem 0 0;
	  }
	  .swiper-button-prev.custom-arrow {
		left: 5px;
	  }
	  .swiper-button-next.custom-arrow {
		right: 5px;
	  }
	}

	@media (max-width: 640px) {
	  .swiper {
		padding: 0 20px;
		min-height: 90px; /* 버튼 간섭 방지 */
	  }
	  .custom-arrow {
		width: 36px;
		height: 36px;
		font-size: 20px;
	  }
	}
	

/* 🔹 페이지네이션 전체 영역 정렬 */
#bottom-list .swiper-pagination {
  position: relative;
  bottom: 0;
  text-align: center;
}

/* 🔸 비활성 상태: 회색 + 반투명 + 긴 직사각형 */
#bottom-list .swiper-pagination-bullet {
  width: 40px;           /* 길이 */
  height: 6px;           /* 높이 */
  background: rgba(0, 0, 0, 0.15); /* 연한 회색 반투명 */
  border-radius: 4px;    /* 모서리 살짝 둥글게 */
  opacity: 1;
  margin: 0 4px !important;
  transition: all 0.3s ease;
}

/* 🔹 활성 상태: 파란색 + 불투명 */
#bottom-list .swiper-pagination-bullet-active {
  background: #003662 ; /* 진한 파란색 */
  width: 40px;          /* 조금 더 길게 */
  height: 6px;
  opacity: 1;
}