html, body {margin: 0;
  scroll-behavior: auto;
  overflow-x: hidden;
}
body,table,input,textarea,select {
font:12px 굴림;
color:#222222;
border: none 0;
outline: none;
}
g	{border:0}
form	{margin:0}

a	{text-decoration:none;color:#222222}
a:hover {text-decoration:underline;color:#608df9}

/*** 메인배너 자동롤링 2025 추가***/	
  .ad-banner-wrapper {
    position: relative;
    display: inline-block;
  }

  .ad-banner-wrapper img {
    border-radius: 8px;
    border: 1px solid #ebebeb;
    box-sizing: border-box;
  }

  .ad-label {
    position: absolute;
    top: 5px;
    right: 5px;
    background-color: rgba(0, 0, 0, 0.3);
    color: white;
    font-size: 10px;
    padding: 2px 5px;
    border-radius: 4px;
    z-index: 10;
    cursor: pointer;
  }

  .ad-tooltip {
    position: absolute;
    top: -35px;
    right: 0;
    background-color: #333;
    color: #fff;
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 5px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 100;
  }


/*** 바로가기버튼 2025 추가***/	
.news-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 10px 10px;
}
.news-item {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6px 0 6px 0;
  border: 1px solid #ebebeb;
  border-radius: 8px;
  background-color: #fff;
  transition: all 0.3s ease;
}
.news-item:hover {
  border-color: #608df9;
}
.news-item img {
  max-width: 100%;
  max-height: 50px;
  object-fit: contain;
}

/*** 광주광역시 메인배너 옆에 바로가기버튼 ***/
.main_bt{display: flex;
  align-items: center;     /* ? 세로 중앙 정렬 */
  justify-content: center; width:139px; height:88px; background:#ffffff; border-radius: 8px; border:1px solid #dee3eb;}
.main_bt:hover{ float: none; width:139px; height:88px; background:#ffffff; border-radius: 8px; border:1px solid #608df9;}


/*** 광주광역시관련 바로가기 2025 추가***/	
.tab-wrapper {
  max-width: 820px;
  margin: 0 auto;
}

.tab-list {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid #ebebeb;
  border-bottom: none; /* ? 아래쪽 테두리 제거 */
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  overflow: hidden;
}

.tab-list .tab {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  background: #f7f7f7;
  cursor: pointer;
  border-right: 1px solid #ebebeb;
  box-sizing: border-box;
}

.tab-list .tab {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  background: #f7f7f7;
  cursor: pointer;
  border-right: 1px solid #ebebeb;
  box-sizing: border-box;
  font-family: Gulim, '굴림', sans-serif;
  font-size: 13px;
}

.tab-list .tab.active {
  background: #5f8df8;
  color: white;
  font-weight: bold;
  font-family: Gulim, '굴림', sans-serif;
  font-size: 13px;
}

.tab-content {
  border: 1px solid #ebebeb;
  border-top: none; /* ? 위쪽 테두리 제거 */
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  padding: 0px;
  background-color: #fdfdfd;
}

.shortcut-wrapper {
  height: 162px;
  padding: 10px 15px 10px 15px;
  background: #fdfdfd;
  border: 0px solid #ebebeb;
  border-radius: 8px;
  box-sizing: border-box;
  font-family: sans-serif;
}

.shortcut-wrapper h4 {
  margin: 0 0 10px 0;
  font-size: 15px;
  font-weight: bold;
}

.shortcut-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* ? 3열 균등 너비 */
  grid-auto-rows: min-content;
  gap: 4px 15px; /* 세로 6px, 가로 15px */
  height: calc(278px - 45px); /* 제목 높이 고려 */
  overflow: hidden;
}

.shortcut-grid a {
  font-size: 14px;
  color: #333;
  text-decoration: none;
  white-space: nowrap;
}

.shortcut-grid a:hover {
  text-decoration: underline;
  color: #5f8df8;
}

.shortcut-grid a::before {
  content: "\2022";
  color: #5f8df8; /* 파란색 점 */
  display: inline-block;
  margin-right: 6px;
  font-size: 16px;
  line-height: 1;
  vertical-align: middle;
}


/*** 쿠팡파트너 2025 추가***/		
.coupang-wrap {
  width: 248px;
  height: 276px;
  overflow: hidden;            /* ? 내부 라운딩 강제 적용 */
  border-radius: 8px;         /* ? 모서리 둥글게 */
  border: 1px solid #ebebeb;      /* (선택) 테두리 추가 */
}	

/*** 좌측 세번째 쿠팡파트너스 이미지 2025 추가***/	
.coupang-banner-wrapper {
  position: relative;
  width: 200px;
  height: 200px;
  border: 1px solid #ebebeb;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  z-index: 10;
  overflow: visible; /* 중요! */	
}

#coupang-banner-roll {
  width: 100%;
  height: 100%;
}

#coupang-banner-roll img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.coupang-ad-label {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  z-index: 9999; /* 최상단으로 */
  cursor: pointer;
}

.coupang-tooltip {
  position: absolute;
  top: -35px;
  right: 0;
  background-color: #333;
  color: #fff;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 99999;
}

.coupang-tooltip.show {
  opacity: 1;
}

/*** 바로가기텍스트박스 2025 ***/
/* 박스 전체 묶는 래퍼 */
.box-wrapper {
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 4열 */
  gap: 10px 10px;
  padding: 0px;
}

/* 각 카테고리 박스 */
.category-box {
  border: 1px solid #ebebeb;
  border-radius: 8px;
  padding: 0px;
  background-color: #fff;
}

/* 카테고리 제목 */
.category-box h3 {
  font-family: '굴림', Gulim, sans-serif;
  font-size: 13px;
  font-weight: bold;
  margin: 0;
  padding: 8px 0;
  background-color: #f7f7f7; /* 파란 배경 */
  color: #000;
  text-align: center;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  border: 0px solid #ccc;
  border-bottom: none;
}

/* 링크 목록 (3열 자동 줄바꿈) */
.category-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3열 */
  gap: 6px 6px;
  list-style: none;
  margin: 0;
  padding: 12px 0px 12px 0px;
}

/* 링크 스타일 */
.category-links li {
  text-align: center;
}

.category-links li a {
  font-family: '굴림', Gulim, sans-serif;
  font-size: 12.5px;
  color: #000;
  text-decoration: none;
  display: inline-block;
}

/* 마우스 오버 시 텍스트만 파란색 */
.category-links li a:hover {
  color: #0073e6;
  text-decoration: underline;
}


/*** 무료프로그램 다운영역 2025 ***/
/* 전체 박스 */
.free-programs {
  width: 718px;
  background: #fff;
  border: 1px solid #ebebeb;
  border-radius: 8px;
  padding: 0px;
  font-family: '굴림', Gulim, sans-serif;
}

/* 제목 */
.programs-title {
  text-align: center;
  font-weight: bold;
  font-size: 13px;
  background-color: #f7f7f7;
  margin-bottom: 0px;
  padding: 7px;
  border-radius: 8px 8px 0px 0px;	
  padding-bottom: 10px;
  border-bottom: 0px solid #ebebeb;
}

/* 아이콘 목록 */
.programs-list {
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* 00개씩 한 줄에 */
  gap: 0px;
  list-style: none;
  padding: 0;
  margin: 0;
}

/* 아이콘 항목 */
.programs-list li {
  text-align: center;
}

/* 이미지 스타일 */
.programs-list li img {
  width: 60px;
  height: 102px;
  padding: 1px 0px 0px 0px;	
  border-radius: 8px; /* 라운드 처리 */
  border: 1px solid transparent; /* 기본 테두리 투명 */
  transition: border-color 0.3s ease;
}

/* 마우스 오버 효과 */
.programs-list li img:hover {
  border-color: #608df9; /* 파란색 테두리로 변경 */
  cursor: pointer;
}


/*** 오른쪽 하단 이미지배너 2025 ***/
/* 오른쪽 하단 쿠팡 배너용 스타일 */
/*  300x250 롤링 배너 영역 */
.banner300-wrap {
  position: relative;
  width: 300px;
  height: 250px;
  border-radius: 10px;
  overflow: visible;
}

/*  롤링 배너 내용 */
.banner300-content img {
  width: 300px;
  height: 250px;
  border-radius: 10px;
  display: block;
}

/*  AD 버튼 */
.banner300-ad-btn {
  position: absolute;
  top: 6px;
  right: 6px;
  font-size: 11px;
  background-color: rgba(0, 0, 0, 0.3);
  color: white;
  padding: 2px 6px;
  border-radius: 5px;
  cursor: pointer; /* 손 모양 표시 */
  z-index: 10;
}


/*  툴팁 - 기본 숨김 */
.banner300-tooltip {
  position: absolute;
  top: -50px; /* 더 위로 */
  right: 0;
  background-color: #333;
  color: #fff;
  font-size: 11px;
  padding: 6px 10px;
  border-radius: 5px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  z-index: 100;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

/*  AD 버튼 마우스오버 시 툴팁 표시 */
.banner300-ad-btn:hover .banner300-tooltip {
  opacity: 1;
}

/*** 푸터 하단 2025 ***/


.footer	{color:#999999}