@charset "utf-8";
/* 상단 메뉴 시작 */
  #full-menu-list {background-color: transparent;width: 100%;z-index: 10;}
  #full_1dul {list-style: none;padding: 0;margin: 0;display: flex;justify-content: space-between;width: auto;z-index: 10;gap: 0px;}
  /* 1차 전체메뉴 항목 */
  #full_1dul li { position: relative; z-index: 10; flex: 0 0 auto; /* li가 자기 컨텐츠 크기만큼만 차지 */ }
  /* 1차 메뉴 링크*/
  #full_1dul li a {text-decoration: none;;padding: 5px 5px;display: block;
    font-family: 'Noto Sans KR', 'Roboto', 'Arial', sans-serif; font-size: 1.2em;width: 100%;text-align: center;}

  #full_1dul li.active a {color: #dc3545;font-family: 'Noto Sans KR', 'Roboto', 'Arial', sans-serif; background-color: rgba(68, 255, 68, 0.1);}
  #full_1dul li a:hover {background-color: transparent;color: #dc3545;}

  /* 2차 서브메뉴 */
  .full_2dli {display: none;position: absolute;top: 100%;left: 50%;transform: translateX(-50%);
      background-color: #f0f0f0;
      z-index: 1000;width: auto; 
  }
  /* 1차 메뉴에서 서브메뉴 표시 */
  #full_1dul li:hover .full_2dli {display: block; /* 부모 메뉴 호버 시 서브메뉴 표시 */}
  .full_2dli li {margin: 0;white-space: nowrap; /* 줄바꿈을 방지*/}
  .full_2dli li a {padding: 5px 15px !important;display: block; /* 전체 링크 영역 클릭 가능하도록 */
    font-family: 'Noto Sans KR', 'Roboto', 'Arial', sans-serif;font-size: 1.2em !important;
  }
  /* 2차 메뉴 호버 */
  .full_2dli li a:hover {background-color: rgba(184, 24, 26, 0.2);color: #dc3545 !important;}
  .full_2dli li.active a {
      background-color: rgba(184, 24, 26, 0.2);
      color: #dc3545 !important;
  }
  /* 19금 */
  .custom-19-icon {display: inline-block;background-color: #dc3545;color: white;border-radius: 48%;
    width: 17px !important;
    height: 17px !important;
    line-height: 17px !important;
    font-size: 12px;text-align: center;position: relative;margin: 0;}
  .custom-19-icon::before {content: "";position: absolute;top: 0;left: 0;width: 100%;height: 100%;
      background: linear-gradient(45deg, transparent 49%, white 49%, white 50%, transparent 50%);
      border-radius: 50%;z-index: 1;pointer-events: none;}
  .custom-19-icon span {position: relative;z-index: 2;}
/* 상단 메뉴 종료 */

/* pc사이드메뉴 햄버거 시작 */      
#hd_wrapper .menu-list {position: relative;display: flex;justify-content: flex-start;align-items: center;padding-right: 50px !important;}
/* 모든 Font Awesome 기본 크기 */
.full_1da i {font-size: 14px; }
/* 특정 메뉴의 아이콘 크기 */
.full_1dli:nth-child(7) i {font-size: 16px;}
.hbg_btn i {font-size: 22px;}

/* 다크-메뉴버튼  */
#darkToggle {
    background: #fff;
    border: 1px solid #e5e5e5;
    font-size: 16px;
    cursor: pointer;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 24px;
    height: 24px;
    border-radius: 8px;

    color: #333;
    transition: all 0.2s ease;
}
/* #hd_wrapper .hbg_btn,
#darkToggle {
    background: #fff;
    border: 1px solid #e5e5e5;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 10;
    color: #333;
    margin: 0;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    transition: all 0.2s ease;
}
#hd_wrapper .hbg_btn {right: 0px;}
#darkToggle {right: 42px;} */
.searchbox_wrap {
    position: absolute;
    top: 50%;
    right: 84px;  
    transform: translateY(-50%);
}
/* hover 효과 */
#hd_wrapper .hbg_btn:hover,
#darkToggle:hover {background: #f8f9fa;box-shadow: 0 2px 6px rgba(0,0,0,0.1);color: #000;}
/* 클릭시 눌림 효과 */
#hd_wrapper .hbg_btn:active,
#darkToggle:active {transform: translateY(-50%) scale(0.95);}

/* 다크모드 버튼 상태 */
.dark-mode #darkToggle {background: #2a2a2a;border: 1px solid #444;color: #eaeaea;}
.dark-mode #darkToggle:hover {background: #333;box-shadow: 0 2px 8px rgba(0,0,0,0.5);color: #fff;}
.dark-mode #hd_wrapper .hbg_btn {background: #2a2a2a;border: 1px solid #444;color: #eaeaea;}
.dark-mode #hd_wrapper .hbg_btn:hover {background: #333;box-shadow: 0 2px 8px rgba(0,0,0,0.5);color: #fff;}

/* .dark-mode #hbg_menu_content {
    background-color: #1c1c1c;
    border: 1px solid #333;
} */
/* 햄버거 우측사이드 메뉴 */
#hbg_menu_content {position: fixed;top: 0;right: -300px;width: 300px;height: 100%;
  box-sizing: border-box;border: 1px solid #ececec;padding: 1px;
    background-color: #fff;z-index: 999999 !important; transition: transform 0.3s ease-in-out;}
#hbg_menu_content.open {transform: translateX(-300px);}
.hbg_menu_wrapper { z-index: 999999 !important;position: relative;max-height: 100vh;overflow-y: auto;}
/* 기본 상태 */
#hd_wrapper_m {display: none;}
@media screen and (max-width: 768px) {
  #hbg_menu_content { left: -100%; /* 화면 전체 너비만큼 숨김 */ right: auto;width: 100%;} #hbg_menu_content.open { transform: translateX(100%); /* 왼쪽에서 전체 화면으로 나타남 */ }
}

.hbg_header {
  position: sticky; /* 스크롤 시 고정 */
  overflow: hidden !important;
  top: 0; /* 상단에서 고정될 위치 */
  display: -webkit-flex; /* Safari, old Chrome */
  display: -ms-flexbox; /* Internet Explorer */
  display: flex;
  background: #dc3545;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  height: 0px;
  padding: 0px 10px;
  z-index: 10; 
}
.close_btn {position: absolute;top: 10px;right: 10px;background: #dc3545;color: #fff;border: none;
  font-size: 16px;cursor: pointer;padding: 5px 10px;z-index: 1001;border-radius: 3px;}
.close_btn:hover {background: #e26471;}

/* 사이드메뉴 카테 리스트 */
.hbg_menu_list {position: sticky;/* 고정 상태를 유지 */top: 0px;z-index: 10;align-items: center;
  list-style: none;padding: 0;margin: 0;height: auto;overflow-y: hidden;}
.hbg_menu_list li {border-bottom: 0px solid #ddd;padding: 0px;color: #fff;align-items: center;}
.hbg_menu_list li a {color: #fff;text-decoration: none;align-items: center;}

/* 헤더 사각 메뉴 항목 */
.hbg_menu {display: flex;flex-wrap: wrap; /* 필요 시 줄 바꿈 */padding: 0;margin: 0;gap: 0;}
.hbg_menu_item {flex: 1;text-align: center;padding: 0;margin: 0;
    box-sizing: border-box;border: 1px solid #ececec;background-color: #fff; height: 50px;}
.hbg_menu_item a {text-decoration: none;color: #333;display: block;
    height: 100%;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.hbg_menu_item i {font-size: 24px;margin: 0;color:#000;}
.hbg_menu_item span {font-size: 14px;margin: 0;color:#000;}

.more_menu {
  display: none; /* 기본적으로 숨김 */
  overflow: hidden;
  transition: all 0.3s ease; /* 부드러운 펼침 효과 */
}

.more_menu .hbg_menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
}

.more_menu .hbg_menu_item {
  flex: 1;
  text-align: center;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  border: 1px solid #ececec;
  background-color: #fff;
  height: 50px;
}

.more_menu .hbg_menu_item a {
  text-decoration: none;
  color: #333;
  display: block;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* 로그인 버튼 */
.hbg_login .hd_login {list-style: none;margin: 0;padding: 0;display: flex;gap: 0;width: 100%;height: 40px;}
.hbg_login .hd_login li {
  flex: 1;
  background-color: #dc3545;
  text-align: center;
  display: flex; /* 플렉스 컨테이너로 설정 */
  justify-content: center; 
  align-items: center; 
  border-radius: 0;
  height: 40px;
}
.hbg_login .hd_login li a {
  display: block;
  text-decoration: none;
  color: #fff;
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  font-size: 14px; /* 원하는 폰트 크기로 설정 */
  transition: background-color 0.3s ease;
}
.hbg_login .hd_login li:hover {background-color: #f53f51;}

/* 우측사이드 메뉴 */
.side_menu {list-style: none;height: auto;overflow-y: hidden;}
/* 1차메뉴 항목 */
.side_menu .side_menu_item {position: relative;padding: 5px 5px;background: rgb(255, 255, 255);border-radius: 0px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);transition: background 0.3s;border-bottom: 1px solid #ececec; /* 밑줄 */z-index: 9999;}
.side_menu .side_menu_item:hover {
    background: rgba(224, 224, 224, 0.1);  
}
.side_menu .side_menu_link {
    display: flex;align-items: center;justify-content: space-between;text-decoration: none;font-size: 14px;
    color: #000000;font-weight: bold;background-color:rgb(255, 255, 255);padding: 5px 6px;margin-bottom:5px;}
.side_menu .side_menu_link i {margin-right: 10px;font-size: 14px;}
.side_menu .side_submenu {display: flex;padding: 0;margin: 0px 0 0 0;gap: 5px;}
.side_menu .submenu_column {display: grid;grid-template-columns: repeat(1, 1fr);gap: 5px;max-width: 100%;width: 100%;}
.side_menu .submenu_column a {
    text-decoration: none;font-size: 14px;background-color:#f0f0f0;color: #333;
    font-weight: normal;padding: 10px;border-radius: 5px;text-align: center;transition: background 0.2s;}
.side_menu .submenu_column a:hover {color: #ff0000;background: #f0f0f0;}
/* 상단햄버거 및 우측 종료 */

/* 다크 모드: 사이드 메뉴 컨테이너 */
.dark-mode #hbg_menu_content {background-color: #1e293b;border-color: #334155;}
/* 다크 모드: 헤더 */
.dark-mode .hbg_header {background: #0f172a;color: #f1f5f9;}
/* 닫기 버튼 */
.dark-mode .close_btn {background: #334155;color: #f1f5f9;}
.dark-mode .close_btn:hover {background: #475569;}
/* 메뉴 리스트 */
.dark-mode .hbg_menu_list li {border-bottom: 1px solid #334155;}
.dark-mode .hbg_menu_list li a {color: #e2e8f0; /* 밝은 텍스트 */}
/* 메뉴 아이템 */
.dark-mode .hbg_menu_item {background-color: #1e293b;border-color: #334155;}
.dark-mode .hbg_menu_item a {color: #f1f5f9;}
.dark-mode .hbg_menu_item i,
.dark-mode .hbg_menu_item span {color: #f1f5f9;}
/* more_menu */
.dark-mode .more_menu .hbg_menu_item {background-color: #1e293b;border-color: #334155;}
.dark-mode .more_menu .hbg_menu_item a {color: #f1f5f9;}
/* 로그인 버튼 */
.dark-mode .hbg_login .hd_login li {background-color: #334155;}
.dark-mode .hbg_login .hd_login li:hover {background-color: #475569;}
.dark-mode .hbg_login .hd_login li a {color: #f1f5f9;}
/* 다크 모드: 전체 사이드 메뉴 */
.dark-mode .side_menu {
  background-color: #1e293b; /* 어두운 배경 */
}
/* 1차 메뉴 항목 */
.dark-mode .side_menu .side_menu_item {background: #1e293b;border-bottom: 1px solid #334155;box-shadow: 0 2px 5px rgba(0,0,0,0.4);}
.dark-mode .side_menu .side_menu_item:hover {background: rgba(255,255,255,0.05); /* 살짝 밝아지는 효과 */}
/* 링크 */
.dark-mode .side_menu .side_menu_link {color: #f1f5f9;background-color: #1e293b;}
.dark-mode .side_menu .side_menu_link i {color: #f1f5f9;}
/* 서브메뉴 */
.dark-mode .side_menu .submenu_column a {background-color: #334155;color: #e2e8f0;}
.dark-mode .side_menu .submenu_column a:hover {color: #60a5fa; /* 포인트 컬러 */background: #475569;}

.sns_main {background-color: #fff;display: flex; /* Flexbox 사용 */padding: 0px;}
.sns-list {
  display: flex;
  justify-content: center;
  flex-wrap: wrap; /* 여러 줄로 감싸기 */
  width: 100%;
}
.sns-item {
  margin: 3px;
  display: flex;
  align-items: center; /* 수직 중앙 정렬 */
  transition: transform 0.3s ease, color 0.3s ease; /* 부드러운 애니메이션 효과 */

}

.sns-item img {
  margin-right: 3px;
  width: 16px;
  transition: transform 0.3s ease, filter 0.3s ease; /* 이미지 확대 및 필터 효과 */

}

/* 마우스 오버 효과 */
.sns-item:hover {
  transform: scale(1.1); /* 전체 아이템 확대 */
}

.sns-item:hover img {
  transform: scale(1.2); /* 이미지 확대 */
  filter: brightness(1.2); /* 밝기 조절 */
}

.sns-item:hover .sns-title {
  color: #007BFF; /* 텍스트 색상 변경 */
  font-weight: 600; /* 텍스트 강조 */
}
.sns-title {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 400;
  text-align: center;
}
@media (max-width: 768px) {
  .sns-title {
      display: none; /* 모바일에서는 제목을 숨김 */
  }

  .sns-item {
      justify-content: center;
  }

  .sns-item img {
      width: 30px; /* 모바일에서 아이콘 크기 조절 */
      height: 30px; /* 아이콘 높이 */
      justify-content: center;
  }
  .sns_main {
      justify-content: flex-start;
      flex-direction: column;
  }
  .sns-list {
      justify-content: center;
      width: 100%;
  }
}

/* 고정 상태를 위한 스타일 */
.fixed {
  position: fixed !important;
  top: 0;
  left: 50%;
  transform: translateX(-50%); /* 중앙 정렬 */
  width: 100%;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  z-index: 3;
}

.box {
    width: 100%;
    height: auto;
    padding: 0px;
    background-color: transparent;
    /* box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1); */
    border-radius: 0px;
    /* border-top: 1px solid rgba(0, 0, 0, 0.2); */
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(100px);
    transition: transform 1.0s, opacity 1.0s;
}

  /* 텍스트와 웹진형 및 버튼 */
  #bo_cate_ul {
    display: flex;
    justify-content: flex-start; /* 왼쪽 정렬 */
    align-items: left;
    padding: 0px;
    border: 1px solid #dddddd;
    border-radius: 5px;
  }
  /* 텍스트 웹진형 버튼 */
  .view_buttons {
    margin-left: auto;
  }
  .active_webzin {
    background-color: #dc3545;
    border-radius: 5px;
  }
  .list_view_button,
  .magazine_view_button {
    padding: 5px 5px;
    margin-right: 0px;
    cursor: pointer;
    border: 1px solid #dddddd;
    border-radius: 5px; /* 모서리 둥글게 조절 */
  }
  .list_view_button.active_webzin,
  .magazine_view_button.active_webzin {
    background-color: #8d41ff;
    border: 1px solid #a164fc;
  }
  
  /* 홈 인기 핫갤 버튼 */
  .menu_button {
    display: flex;
    /* background-color: #451094;
    border: 1px solid rgb(111, 33, 228); */
    /* transition: background-color 0.3s, color 0.3s, border-color 0.3s;
    border-radius: 5px;
    margin-right: 10px;
    font-weight: bold; */
    width: auto;
    height: 30px;
  z-index: 2;
  }
  /* .menu_button > a:hover {
    background-color: #555 !important
  } */
  .menu_button > a:last-child:hover {
    /* border-bottom: 3px solid #8d41ff; 밑줄 스타일 적용 */
      color:#dc3545;
      font-weight: bold;
      width: auto;
      height: 30px;
      font-size: 14px; /* 폰트 크기 고정 */
      text-decoration: underline solid;
      text-decoration-thickness: 3px;
      letter-spacing: 0.1em;
      text-decoration-color: #8d41ff; /* 밑줄 색상 설정 */
      text-underline-offset: 3px; /* 밑줄과 텍스트 간의 간격 설정 */
  }
  #bo_cate {
    text-align: left; /* 왼쪽 정렬 */
  }
  #bo_cate h2 {position:absolute;font-size:0;line-height:0;overflow:hidden;}
  #bo_cate ul {zoom:1;text-align: left;}
  #bo_cate ul:after {display:block;visibility:hidden;clear:both;content:""}
  #bo_cate li {display:inline-block;padding:0px;text-align: left; }
  #bo_cate a {display:block;line-height:30px;padding:0px 10px;border-radius:0px;border:0px solid none;color:none}
  #bo_cate a:focus, #bo_cate a:hover, #bo_cate a:active {
    /* background:#ff3300; */
    color:#292929;
    font-weight: bold;
    font-size: 14px; /* 폰트 크기 고정 */
    text-decoration: underline solid;
    text-decoration-thickness: 3px;
    letter-spacing: 0.1em;
    text-decoration-color: #dc3545; /* 밑줄 색상 설정 */
    /* text-shadow: 0 -4px #dc3545; */
    text-underline-offset: 3px; /* 밑줄과 텍스트 간의 간격 설정 */
    text-align: left;
  }

  #bo_cate #bo_cate_on {
    z-index: 2;
    background: none;
    color: none; /* 폰트 색상 */
    font-weight: bold;
    width: auto;
    height: 30px;
    text-decoration: underline solid;
    text-decoration-thickness: 3px;
    letter-spacing: 0.1em;
    text-decoration-color: #dc3545;
    /* text-shadow: 0 -4px #dc3545; */
    text-underline-offset: 5px;
    text-align: left;
  }

  /* 카테고리 직접적용시만해당 인기/핫갤/히트 */
  .category-option-item {
    display: inline-block;
    margin-right: 10px;
    text-align: left;
  }

  .category-option-item a {
    text-decoration: none;
    color: #ff0000;
    padding: 5px 10px;
    border: 1px solid #ff0000;
    border-radius: 5px;
    text-align: left;
  }
  .category-option-item a:hover { background-color: #e0e0e0;}
/* 카테고리 전체 */ 
.dark-mode #bo_cate { background: var(--bg-color); color: var(--text-color); } 
.dark-mode #bo_cate a { color: var(--text-color); } 
.dark-mode #bo_cate a:hover, 
.dark-mode #bo_cate a:focus, 
.dark-mode #bo_cate a:active { color: #23db79; /* 포인트 컬러 */ text-decoration-color: #23db79; } 
/* 선택된 카테고리 */ 
.dark-mode #bo_cate #bo_cate_on { color: #23db79; text-decoration-color: #23db79; } 
/* 카테고리 옵션 아이템 */ 
.dark-mode .category-option-item a { color: #23db79; border: 1px solid #23db79; background: var(--bg-color); } 
.dark-mode .category-option-item a:hover { background-color: #2a2a2a; color: #1e9e57; }

#slide-ct {width: 100%;margin-bottom:10px ;display: flex;justify-content: flex-start;align-items:center;}
.slide-container {margin: 0 auto;width: 100%;display: flex;justify-content: flex-start;border-radius: 35px;}
@media screen and (max-width: 1024px) {.slide-container {margin-top: 0px !important;}}
  
/* ===== 상단 배너 ===== */ 
.mainbanner_top { display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0; padding: 0; box-sizing: border-box; gap: 5px; } 
.mainbanner_top .banner-item { flex: 0 0 calc((100% - 10px) / 2); box-sizing: border-box; } 
.mainbanner_top img { width: 100%; height: auto; object-fit: contain; display: block;transition: box-shadow 0.3s ease; } 
/* .mainbanner_top img { width: 100%; height: 80px !important; object-fit:cover; display: block;transition: box-shadow 0.3s ease; }  */

/* ===== 하단 배너 ===== */ 
.mainbanner_bottom { display: flex; flex-wrap: wrap; justify-content: flex-start; margin: 0; padding: 0; box-sizing: border-box; gap: 5px; } 
.mainbanner_bottom ul { flex: 0 0 calc((100% - 10px) / 3); list-style: none; margin: 0; padding: 0; box-sizing: border-box; } 
.mainbanner_bottom img { width: 100%; height: auto; object-fit: contain; display: block;transition: box-shadow 0.3s ease; } 
/* .mainbanner_bottom img { width: 100%; height: 80px !important; object-fit:cover; display: block;transition: box-shadow 0.3s ease; }  */

.mainbanner_top img:hover, .mainbanner_bottom img:hover { box-shadow: 0 4px 12px rgba(255, 0, 0, 0.3); }
/* .mainbanner_top img:hover, .mainbanner_bottom img:hover { border: 2px solid #dc3545; } */
@media (max-width: 768px) { .mainbanner_top .banner-item, .mainbanner_bottom ul { flex: 0 0 calc((100% - 5px) / 2); } } 
/* @media (max-width: 480px) { .mainbanner_top .banner-item, .mainbanner_bottom ul { flex: 0 0 100%; } } */

/* 메인 중간 시작 */
#main_h_l_r {display: flex;justify-content: space-between;align-items: flex-start;margin-bottom:20px;}
#container_main_left {width: 50%;padding: 0px;}
#aside_right {width: 50%;padding: 0px;/* background-color: rgba(255, 212, 1, 0.1); */margin-left: 2%;}
@media screen and (max-width: 1024px) {#container_main_home {flex-direction: column;align-items: center;}
  #container_main_left,#aside_right {width: 100% !important;padding: 20px;}
}

/* 메인 중간 탭처리 시작*/
.latest_two_main {
  display: inline-block;
  flex-wrap: wrap;
  width: 100%;
  margin-bottom:0px;
  /* border: 2px solid #dc3545;border-radius: 0px;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px; */
}
.latest_two_main .tab-titles {display: flex;justify-content: space-between; /* 각 요소가 동일한 간격을 유지하도록 설정 */
  width: 100%;margin: 0;padding: 0;list-style: none;margin-bottom:0px;}
.latest_two_main .tab-titles li {flex: 1; /* 각 탭이 동일한 비율로 넓이 */text-align: center;padding: 10px 0;
  cursor: pointer;border: 1px solid #ddd; /* 경계선 */background: #f9f9f9;}
.latest_two_main .tab-titles li.active {
  background: #dc3545;color: #fff; /* 탭 글자색 */font-weight: bold;}
.latest_two_main .two_content {display: none;}
.latest_two_main .two_content.active {display: block;}
/* @media screen and (max-width: 768px) {
  .tab-titles {display: none;}
  .two_content-s {display: none;}
  .latest_two_main {margin-bottom:0px;}
  .two_content.active {display: none;}
} */
/* 메인탭처리 끝*/