@charset "utf-8";
/* 경기광주불교문화원 공통 스타일 (원본 reset_1.2.css + src_css/mobile|tablet|pc.css + 헤더/푸터 인라인 스타일 정리)
   브레이크포인트: 모바일 기본 / 태블릿 768px 이상 / PC 1100px 이상
   (서브 비주얼 1024px, 서브 탭 1200px, 퀵메뉴 767px 은 원본 수치 그대로) */

:root {
  --point: #926b32;   /* 브라운: GNB 강조, 모바일 메뉴, 제목 막대 */
  --point2: #c29c6b;  /* 골드: 서브 탭 밑줄, 본문 소제목 */
  /* 원본 글꼴 스택 그대로 (notokr 은 ASCII + 한글 2350자뿐이라 ‘’ “” · ※ 한자는 뒤 글꼴로 넘어간다) */
  --font: 'Noto Sans', NanumGothic, '나눔고딕', 'Open Sans', sans-serif;  /* 본문, 탭, 전체/모바일 메뉴 (원본은 앞에 없는 Montserrat) */
  --font-hd: 'Noto Sans', 'Nanum Gothic', 'Malgun Gothic', sans-serif;  /* PC GNB, 푸터 */
}

/* ---------- reset ---------- */
html { overflow-y: scroll; }
body { margin: 0; padding: 0; font-size: 16px; color: #333; -webkit-text-size-adjust: none; }
/* 원본 reset 과 같이 요소에 직접 지정 (폰트를 따로 준 부모 아래에서도 기본은 맑은 고딕) */
body, h1, h2, h3, h4, h5, h6, p, div, li, dt, dd, input, textarea, button, select { font-family: 'Malgun Gothic', sans-serif; }
h1, h2, h3, h4, ul, li, dl, dd, dt, figure, form, p { margin: 0; }
ul { padding: 0; list-style: none; }
a { color: #333; text-decoration: none; }
img, video, iframe { max-width: 100%; }
img { border: 0; image-rendering: -webkit-optimize-contrast; }
table { border-collapse: collapse; border-spacing: 0; }
th, td { padding: 0; }
button { cursor: pointer; }
input[type=text], input[type=password], input[type=email], input[type=tel], textarea { font-size: 13px; }
input { border-radius: 0; -webkit-appearance: none; appearance: none; }
input[type=checkbox] { -webkit-appearance: checkbox; appearance: checkbox; }
input[type=radio] { -webkit-appearance: radio; appearance: radio; }
.blind { position: absolute !important; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; padding: 0; }

/* 화면별 표시 (원본 클래스, 쓰는 것만): mobile <768, tablet 768~1099, desktop ≥1100 */
.dis_desktop { display: none; }
@media (min-width: 768px) { .dis_mobile { display: none; } }
@media (min-width: 1100px) {
  .dis_mobile_tablet { display: none; }
  .dis_desktop { display: block; }
}

/* ---------- 틀 ---------- */
.viewport { min-width: 320px; }
.width_wrap { position: relative; width: 100%; margin: 0 auto; }
.width_wrap:after { content: ''; display: block; clear: both; }
.container { overflow: hidden; width: 100%; }
@media (min-width: 768px) { .width_wrap { max-width: 768px; } }
@media (min-width: 1100px) { .width_wrap { width: 1200px; max-width: 100%; } }

/* ---------- 헤더 ---------- */
.tnb_02 { height: 30px; line-height: 30px; background: #f5f5f5; }
.tnb_02 .right_tnb { float: right; }
.tnb_02 .right_tnb a { padding-right: 5px; font-family: var(--font); font-size: 11px; font-weight: 500; color: #555; }

.logo_wrap_01 { position: relative; z-index: 9; background: #fff; }
.logo_wrap_01 .logo { width: 190px; padding: 12px 10px; }  /* 메인만 h1, 서브는 div (페이지 제목 h1 이 따로 있다) */
.logo_wrap_01 .logo a { display: block; line-height: 0; }
.logo_wrap_01 .logo img { height: auto; vertical-align: top; }
/* 태블릿: 원본은 padding 20px 0 이라 768px 근처에서 로고가 화면 끝에 붙는다 → 본문(.body_content)과 같은 20px 여백 */
@media (min-width: 768px) { .logo_wrap_01 .logo { width: 150px; padding: 20px; } }
@media (min-width: 1100px) {
  .logo_wrap_01 .logo { width: 260px; padding: 15px 0; }
  /* 스크롤하면 헤더 고정 (원본 동작). .header 높이를 잡아 둬서 본문이 튀지 않게 함 */
  .header { height: 115px; }
  #fixed_header { width: 100%; transition: all .2s; z-index: 999999; }  /* 원본 값. 본문의 z-index:999 요소보다 위 */
  #fixed_header.on { position: fixed; top: 0; left: 0; right: 0; box-shadow: 0 4px 4px -4px #dedede; }
}

/* PC 1depth/2depth 메뉴 */
.pc_nav { position: absolute; top: 50%; right: 50px; transform: translateY(-50%); }
.pm-navigation_horizon_pc_nav_02 { position: relative; z-index: 10; }
.pm-navigation_horizon_pc_nav_02 a { display: block; }
.pm-navigation_horizon_pc_nav_02 .dep1:after { content: ''; display: block; clear: both; }
.pm-navigation_horizon_pc_nav_02 .dep1 > li { float: left; }
.pm-navigation_horizon_pc_nav_02 .dep1 > li > a { padding: 15px 25px; font-family: var(--font-hd); font-size: 17px; font-weight: 600; text-align: center; transition: all .3s; }
.pm-navigation_horizon_pc_nav_02 .dep1 > li.on > a,
.pm-navigation_horizon_pc_nav_02 .dep1 > li:hover > a { color: var(--point); }
.pm-navigation_horizon_pc_nav_02 .dep1 > li > div { position: relative; }
.pm-navigation_horizon_pc_nav_02 .dep2 { display: none; position: absolute; top: 0; left: 0; z-index: 100; min-width: 100%; padding: 4px 0; background: #333; }
.pm-navigation_horizon_pc_nav_02 .dep2 > li { border-bottom: 1px solid #666; }
.pm-navigation_horizon_pc_nav_02 .dep2 > li:last-child { border-bottom: 0; }
.pm-navigation_horizon_pc_nav_02 .dep2 > li > a { padding: 10px 5px; font-family: var(--font-hd); font-size: 13px; font-weight: 400; color: #fff; text-align: center; white-space: nowrap; transition: all .3s; }
.pm-navigation_horizon_pc_nav_02 .dep2 > li.on > a,
.pm-navigation_horizon_pc_nav_02 .dep2 > li:hover > a { color: #ccc; }

/* PC 전체메뉴 (햄버거) */
.top_wrap { display: none; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 40px; height: 40px; }
.toggleGnb2 { display: block; position: relative; width: 40px; height: 40px; padding: 0; border: 0; background: none; }
.toggleGnb2 > span:not(.blind) { position: absolute; left: 50%; width: 22px; height: 3px; margin-left: -11px; background: #888; transition: all .3s ease-in-out; }
.toggleGnb2 .nth1 { top: 10px; }
.toggleGnb2 .nth2 { top: 18px; }
.toggleGnb2 .nth3 { top: 26px; }
.toggleGnb2.on .nth1 { top: 18px; transform: rotate(45deg); }
.toggleGnb2.on .nth2 { width: 0; }
.toggleGnb2.on .nth3 { top: 18px; transform: rotate(-45deg); }
.nav_a { display: none; position: absolute; top: 85px; left: 0; right: 0; }
@media (min-width: 1100px) { .top_wrap { display: block; } }
@media (max-width: 1099px) { .nav_a { display: none !important; } }

#pm2-nav_h_all { position: relative; z-index: 10; background: var(--point); }
#pm2-nav_h_all * { box-sizing: border-box; }
#pm2-nav_h_all a { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#pm2-nav_h_all .dep1 { display: table; width: 100%; table-layout: fixed; }
#pm2-nav_h_all .dep1 > li { display: table-cell; border-right: 1px solid rgba(255,255,255,.2); }
#pm2-nav_h_all .dep1 > li:first-child { border-left: 1px solid rgba(255,255,255,.2); }
#pm2-nav_h_all .dep1 > li > a { padding: 15px 20px; border-bottom: 1px solid rgba(255,255,255,.2); font-family: var(--font); font-size: 16px; color: #eee; text-align: center; }
#pm2-nav_h_all .dep1 > li.on > a,
#pm2-nav_h_all .dep1 > li:hover > a { color: #fff; }
#pm2-nav_h_all .dep2 { padding: 8px 0; }
#pm2-nav_h_all .dep2 > li > a { padding: 6px 20px; font-family: var(--font); font-size: 14px; color: #fff; text-align: center; }
#pm2-nav_h_all .dep2 > li.on > a,
#pm2-nav_h_all .dep2 > li:hover > a { text-decoration: underline; }

/* 모바일/태블릿 메뉴 버튼, 전화 버튼 */
.toggleGnb, .m_tel { position: absolute; top: 0; box-sizing: border-box; width: 50px; height: 50px; padding: 15px 0 0 15px; border: 0; background: none; font-size: 30px; color: #333; text-align: left; }
.toggleGnb { right: 0; }
.toggleGnb .icon-menu { position: absolute; top: 15px; left: 15px; }
.m_tel { right: 50px; }
.toggleGnb.on { color: var(--point); }

/* 모바일/태블릿 메뉴 (아코디언) */
.mo_nav { display: none; }
.mo_nav.on { display: block; }
@media (min-width: 1100px) { .mo_nav.on { display: none; } }
.pm-navigation_vertical_toggle_mo_nav_01 { position: relative; z-index: 10; }
.pm-navigation_vertical_toggle_mo_nav_01 a { display: block; }
.pm-navigation_vertical_toggle_mo_nav_01 .dep1 > li { border-top: 1px solid #ccc; }
.pm-navigation_vertical_toggle_mo_nav_01 .dep1 > li:first-child { border-top: 0; }
.pm-navigation_vertical_toggle_mo_nav_01 .dep1 > li > a { position: relative; padding: 12px 15px; background: var(--point); font-family: var(--font); font-size: 14px; color: #fff; }
.pm-navigation_vertical_toggle_mo_nav_01 .dep1 > li > a:before { content: ''; position: absolute; top: 50%; right: 15px; margin-top: -2px; border: 5px solid transparent; border-top-color: #fff; }
.pm-navigation_vertical_toggle_mo_nav_01 .dep1 > li.active > a:before { margin-top: -8px; border-color: transparent transparent #fff; }
.pm-navigation_vertical_toggle_mo_nav_01 .dep1 > li.on > a,
.pm-navigation_vertical_toggle_mo_nav_01 .dep1 > li.active > a,
.pm-navigation_vertical_toggle_mo_nav_01 .dep1 > li:hover > a { background: #999; }
.pm-navigation_vertical_toggle_mo_nav_01 .dep1 > li > div { display: none; }
.pm-navigation_vertical_toggle_mo_nav_01 .dep2 { padding: 8px 0; background: #fff; }
.pm-navigation_vertical_toggle_mo_nav_01 .dep2 > li > a { padding: 6px 15px; font-family: var(--font); font-size: 13px; color: #333; }
.pm-navigation_vertical_toggle_mo_nav_01 .dep2 > li.on > a,
.pm-navigation_vertical_toggle_mo_nav_01 .dep2 > li:hover > a { color: var(--point); }

/* ---------- 서브 비주얼 ---------- */
.sub_visual_wrap_sub_title { position: relative; }
.sub_visual_wrap_sub_title .sub_top_img_wrap { position: relative; overflow: hidden; height: 150px; }
.sub_visual_wrap_sub_title .sub_top_img { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: url('../img/banner/dae-ssang-ryeong-ri-jo-gam-do1765170881.jpg') no-repeat center / cover; }
.sub_visual_wrap_sub_title .sub_top_cont_wrap { position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
.sub_visual_wrap_sub_title .sub_top_cont { display: table; width: 100%; max-width: 1200px; height: 100%; margin: 0 auto; }
.sub_visual_wrap_sub_title .top_text_inner { display: table-cell; padding: 15px 20px; vertical-align: middle; }
.sub_visual_wrap_sub_title .sub_top_title { font-size: 0; }
/* 글자별 span: common.js 가 순서대로 transition 을 주고 .on 을 붙이면 아래에서 올라온다 */
.sub_visual_wrap_sub_title .sub_top_title > span,
.sub_visual_wrap_sub_title .sub_top_text { position: relative; font-family: var(--font); letter-spacing: -.03em; color: #fff; opacity: 0; text-shadow: 0 2px 6px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.48), 0 0 30px rgba(0,0,0,.65); }
.sub_visual_wrap_sub_title .sub_top_title > span { display: inline-block; top: 40px; font-size: 22px; font-weight: 600; line-height: 30px; vertical-align: top; white-space: pre; }
.sub_visual_wrap_sub_title .sub_top_text { top: 20px; margin-top: 5px; font-size: 13px; font-weight: 500; line-height: 22px; word-break: keep-all; transition: all .8s ease .4s; }
.sub_visual_wrap_sub_title.on .sub_top_title > span,
.sub_visual_wrap_sub_title.on .sub_top_text { top: 0; opacity: 1; }
@media (min-width: 1024px) {
  .sub_visual_wrap_sub_title .sub_top_img_wrap { height: 300px; }
  .sub_visual_wrap_sub_title .sub_top_title > span { font-size: 32px; line-height: 55px; }
  .sub_visual_wrap_sub_title .sub_top_text { margin-top: 15px; font-size: 19px; line-height: 30px; }
}
/* 원본은 1024px 부터 좌우 여백 0 이라 1024~1099px 에서 제목이 화면 끝에 붙는다 → 0 은 PC 폭부터 */
@media (min-width: 1100px) { .sub_visual_wrap_sub_title .top_text_inner { padding: 15px 0; } }

/* ---------- 서브 탭 (2depth) ---------- */
.sub_scroll_wrap { overflow: hidden; height: 39px; border-bottom: 1px solid #ccc; background: #fff; }
.sub_scroll_wrap > div > div { overflow-x: auto; scrollbar-width: none; }
.sub_scroll_wrap > div > div::-webkit-scrollbar { display: none; }
.sub_scroll_wrap .scroll_nav { display: inline-block; min-width: 100%; font-size: 0; text-align: center; white-space: nowrap; vertical-align: top; }
.sub_scroll_wrap .scroll_nav li { display: inline-block; }
.sub_scroll_wrap .scroll_nav li a { display: inline-block; box-sizing: border-box; height: 39px; padding: 0 12px; font-family: var(--font); font-size: 13px; font-weight: 600; line-height: 39px; color: #bbb; }
.sub_scroll_wrap .scroll_nav li.on a { color: var(--point2); }
.sub_scroll_wrap > div i { position: absolute; top: 0; left: 0; width: 30px; height: 39px; pointer-events: none; }
.sub_scroll_wrap > div i:before { content: ''; position: absolute; top: 0; bottom: 0; width: 0; height: 0; margin: auto; border: 6px solid transparent; }
.sub_scroll_wrap > div i.prev:before { left: 3px; border-right-color: #333; }
.sub_scroll_wrap > div i.next { left: auto; right: 0; }
.sub_scroll_wrap > div i.next:before { right: 3px; border-left-color: #333; }
@media (min-width: 768px) { .sub_scroll_wrap > div i { display: none !important; } }
@media (min-width: 1200px) {
  .sub_scroll_wrap { overflow: visible; height: auto; }
  .sub_scroll_wrap > div > div { overflow: hidden; }
  .sub_scroll_wrap .scroll_nav { display: block; width: 100%; white-space: normal; }
  .sub_scroll_wrap .scroll_nav li { position: relative; }
  .sub_scroll_wrap .scroll_nav li:before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--point2); opacity: .85; visibility: hidden; transform: scaleX(0); transition: all .2s ease-in-out; }
  .sub_scroll_wrap .scroll_nav li.on:before,
  .sub_scroll_wrap .scroll_nav li:hover:before { visibility: visible; transform: scaleX(1); }
  .sub_scroll_wrap .scroll_nav li a,
  .sub_scroll_wrap .scroll_nav li.on a { display: block; overflow: hidden; height: 80px; padding: 0 25px; font-size: 16px; line-height: 85px; color: #333; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- 본문 ---------- */
.body_content { box-sizing: border-box; width: 100%; min-height: 500px; margin-top: 20px; padding: 0 10px 30px; }
.body_content .sub_subject { position: relative; margin: 15px 0 50px; padding: 8px 0 20px; border-bottom: 1px solid #ccc; font-family: var(--font); font-size: 20px; font-weight: 500; }
.body_content .sub_subject:before { content: ''; position: absolute; top: 0; left: 0; width: 40px; height: 2px; background: var(--point); }
@media (min-width: 768px) {
  .body_content { padding: 0 20px 50px; }
  .body_content .sub_subject { font-size: 24px; }
}
@media (min-width: 1100px) {
  .body_content { padding: 30px 0 70px; }
  .body_content .sub_subject { padding: 5px 0 30px; font-size: 32px; }
}
/* 서브 본문 조각(div.sub1) 공통 */
.sub1 * { box-sizing: border-box; word-break: keep-all; font-family: var(--font); }

/* ---------- 푸터 ---------- */
#footer { border-top: 1px solid #ddd; background: #fff; }
.footer_01 { padding: 40px 10px 100px; }
.footer_info { text-align: center; }
.footer_info > dl { margin-bottom: 20px; padding-bottom: 20px; border-bottom: 1px solid rgba(0,0,0,.1); }
.footer_info > dl dt { margin-bottom: 10px; font-family: var(--font-hd); font-size: 30px; font-weight: 600; }
.footer_info > dl dt img { height: 40px; vertical-align: middle; }
.navi_foot { margin-bottom: 10px; }
.navi_foot li { display: inline-block; position: relative; padding: 0 10px; }
.navi_foot li:first-child { padding-left: 0; }
.navi_foot li:after { content: ''; position: absolute; top: 3px; left: 0; width: 1px; height: 10px; background: #666; }
.navi_foot li:first-child:after { display: none; }
.navi_foot li a { display: block; font-size: 12px; color: #a0a0a0; }
.navi_foot li a:hover { text-decoration: underline; }
.address ul { text-align: center; }
.address ul:last-child { margin-top: 10px; }
.address ul li { display: inline-block; padding: 0 2px; font-family: var(--font-hd); font-size: 12px; font-weight: 400; line-height: 1.7em; color: #666; }
.address ul li a { padding: 2px 7px; border: 1px solid #ccc; font-size: 11px; color: #666; }
@media (min-width: 768px) {
  .footer_01 { padding: 40px 20px; }  /* 원본은 40px 0 (768px 근처에서 화면 끝에 붙어서 태블릿만 20px) */
  .footer_info > dl { display: flex; justify-content: space-between; align-items: center; }
  .footer_info > dl dt { margin-bottom: 0; }
  .address ul { text-align: left; }
}
@media (min-width: 1100px) {
  .footer_01 { padding: 40px 0; }
  .footer_info { max-width: 1200px; margin: 0 auto; }
}

/* ---------- 퀵메뉴 ---------- */
.quick { position: fixed; z-index: 1000000; }  /* 고정 헤더(999999)보다 위 */
.quick li { width: 50px; height: 50px; margin-bottom: 10px; border-radius: 50%; }
.quick li:last-child { background: #231916; }
.quick li a { display: block; width: 50px; height: 50px; border-radius: 50%; font-family: var(--font); font-size: 11px; font-weight: 600; line-height: 50px; color: #fff; text-align: center; }
.quick li img { vertical-align: top; }
@media (max-width: 767px) {
  .quick { right: 0; bottom: 0; left: 0; background: #fff; box-shadow: 1px 1px 12px 0 rgba(0,0,0,.08); }
  .quick ul { display: flex; justify-content: space-between; }  /* 원본대로 (남는 0.01% 폭까지 같아야 TOP 글자 위치가 같다) */
  .quick li { width: 33.33%; margin-bottom: 0; border-radius: 0; }
  .quick li:first-child { background: #cc181e; }
  .quick li:nth-child(2) { background: #fae300; }
  .quick li a { width: 100%; border-radius: 0; }
}
@media (min-width: 768px) {
  .quick { right: 20px; bottom: 50px; }
  .quick li img { border-radius: 50%; }
}

/* ---------- 인쇄 ---------- */
@media print {
  .header, .sub_visual_wrap_sub_title, .sub_scroll_wrap, #footer, .quick { display: none !important; }
}