@charset "utf-8";

/* ==========================================================================
   공주성결교회 - layout.css
   --------------------------------------------------------------------------
   00. 폰트 (@import / @font-face / 폰트 클래스)
   01. 기본 / 공통
   02. GNB (헤더)
   03. GNB - LIVE 버튼
   04. GNB - 후원 하트 + 툴팁
   05. GNB - 전체메뉴 (all-menu)
   06. GNB2 (드롭다운 대형 메뉴)
   07. 로고 / 사이트맵
   08. 푸터
   09. 모바일 메뉴 (mmenu)
   10. 서브 - 상단 / 브레드크럼 / 탭
   11. 서브 - 좌측 LNB
   12. 서브 - 기타
   13. containerGnb
   90. 반응형 (미디어쿼리 통합)
   ========================================================================== */


/* ==========================================================================
   00. 폰트
   ========================================================================== */



@font-face {
    font-family: 'DMSerifText';
    src: url('webfont/DM_Serif/DMSerifText-Regular.ttf') format('truetype');
}

@font-face {
    font-family: 'pretendard-Bold';
    src: url('webfont/Pretendard/Pretendard-Bold.woff') format('woff'),
         url('webfont/Pretendard/Pretendard-Bold.woff2') format('woff2');
}
@font-face {
    font-family: 'pretendard-Regular';
    src: url('webfont/Pretendard/Pretendard-Regular.woff') format('woff'),
         url('webfont/Pretendard/Pretendard-Regular.woff2') format('woff2');
}

@supports (font-variation-settings: normal) {
  @font-face {
	  font-family: 'Pretendard'; 
	  font-weight: 45 920; font-style: normal; 
	  font-display: swap; 
	  src: url('webfont/Pretendard/PretendardVariable.woff2') format('woff2');
	  }
}
.pretendardB {font-family: 'Pretendard', sans-serif; font-weight: 700;}
.pretendardR {font-family: 'Pretendard', sans-serif; font-weight: 400;}
.pretendardM {font-family: 'Pretendard', sans-serif; font-weight: 500;}
.pretendardSB {font-family: 'Pretendard', sans-serif; font-weight: 600;}
.pretendardL {font-family: 'Pretendard', sans-serif; font-weight: 300;}


/* ==========================================================================
   01. 기본 / 공통
   ========================================================================== */
:root {--footerM:20%;}

html {font-size: 16px;}
body {font-size: 16px; line-height: 1.6; color: #333;}
body * {font-family:"pretendard"; letter-spacing:-0.1px;}

a:focus {outline:0;}

#mm-0 {min-height:100vh; display:flex; flex-direction:column;}
.main {flex:1;}
#content {flex:1;}

#bandMessage {bottom:50% !important;}
.white {background-color:rgba(0,0,0,.4) !important; transition:all 0.6s;}


/* ==========================================================================
   02. GNB (헤더)
   ========================================================================== */
#gnb-wrap {position:fixed; width:100%; height:115px; background-color:transparent; z-index:999; transition:all 0.6s;}
#gnb-wrap > .containerGnb > .row {position:relative; height:100%; border-bottom:0 solid #fff;}
#gnb-wrap hr {margin:0 auto; width:90%;}

/* PC 메뉴 - 오른쪽 기준 배치 (로고 겹침 방지) */
#gnb {position:absolute; top:0; right:13rem; display:flex; gap:50px; text-align:center; border:none;}
#gnb > li.depth1 {position:relative; float:left; width:max-content; height:115px; padding:0; line-height:115px; text-align:center; outline:none; transition:all .2s ease-in-out;}
#gnb > li > a {padding:10px 0 0; border-top:0 solid #267584; color:#fff; font-size:20px; text-decoration:none; transition:all ease 0.2s; white-space:nowrap;}
#gnb > li.active > a {border-top:0 solid #267584; color:#fff; font-weight:bold; transition:all ease 0.2s;}
#gnb > li.login > a:hover, #gnb > li.login > a.active {border:none; text-decoration:none;}

/* 2depth 드롭다운 */
.subal {position:absolute; left:50%; top:30px; width:auto; min-width:200px; max-width:280px; padding:18px 0; background-color:#fff; color:#fff; text-align:center; border-radius:5px; box-shadow:rgba(113,113,113,0.28) 0 4px 7px; word-break:keep-all; visibility:hidden; opacity:0; transform:translateX(-50%); transition:opacity .2s ease-in-out, top .2s ease-in-out; z-index:9999 !important;}

.subal:before {content:''; position:absolute; left:50%; top:-8px; border-left:8px solid transparent; border-right:8px solid transparent; border-bottom:8px solid #fff; transform:translateX(-50%); transition:opacity .2s ease-in-out;}
.subal li {height:auto; padding:7px 24px; line-height:1.4; text-align:left; font-size:17px; white-space:nowrap;}
.subal a {color:#555; text-decoration:none;}
.subal li:hover {font-weight:bold; transition:.3s all;}
.subal li:hover a {color:black; transition:.3s all;}

#gnb > li > .subal > li {position:relative;}
#gnb > li > .subal > li > .dropdown-menu {min-width:180px;}
#gnb > li > .subal > li > .subal2 {margin:0; margin-left:-40px; padding:10px; width:160px; left:210px; top:0; border-radius:0;}
#gnb > li > .subal > li > .subal2 a {padding:0; margin:0; background-color:transparent; color:#555; text-decoration:none;}
#gnb > li > .subal > li:hover {transition:.3s all;}
#gnb > li > .subal > li:hover > .subal2 > li:hover a {color:#fff; transition:.3s all;}
#gnb > li:hover > ul > li:hover > ul {display:block;}

/* 우측 유틸 영역 */
#gnb-wrap .gnbTR {position:absolute; top:50%; right:4%; display:inline-flex; align-items:center; grid-gap:20px; transform:translateY(-50%);}
#gnb-wrap .gnbTR .gnbTRB {color:#fff; font-size:16px;}
#gnb-wrap .gnbTR .gnbTRB:hover, #gnb-wrap .gnbTR .gnbTRB:focus {text-decoration:none;}
#gnb-wrap .gnbTR .bar {width:1px; height:19px; background:#fff;}

.gnbTL {display:inline-flex; gap:20px; padding:5px 0;}
.gnbTL .gnbTLB {display:inline-flex; align-items:center; gap:5px; color:#737373; font-size:17px; text-decoration:none;}

.top-href-btn {position:absolute; top:50%; right:0; transform:translateY(-50%);}
.gnbBTN {position:absolute; top:50%; right:4%; transform:translate(50%,-50%); text-decoration:none;}
.header-mobile-gnb {display:none;}

/* 서브 하단 메뉴 */
.sub-bottom .container {display:flex; justify-content:space-around; padding:0 0 2%;}
.sub-bottom .container .row {width:50%;}
.sub-bottom ul {display:flex; justify-content:space-evenly;}
.sub-bottom li {display:inline-block; text-align:center;}
.sub-bottom li a {position:relative; float:left; display:inline-block; width:100%; padding:40px 20px 20px; color:black; font-size:19px; text-decoration:none; white-space:nowrap; overflow:hidden;}
.sub-bottom li a .btn-plus {position:absolute; left:50%; top:25%; display:inline-block; width:10px; height:10px; border-radius:50%; background-color:#6e7abe; opacity:0; transform:translate(-50%,-50%);}
.sub-bottom li:hover a .btn-plus, .sub-bottom li.active a .btn-plus {opacity:1; transition:.3s all;}


/* ==========================================================================
   03. GNB - LIVE 버튼
   ========================================================================== */
#gnb > li.youtube-live-li {position:relative; width:auto !important;}
#gnb > li.youtube-live-li > a.youtube-live-btn {display:inline-flex; align-items:center; gap:8px; padding:8px 16px; border:1px solid rgba(255,255,255,0.4); border-top:0; border-radius:999px; background:rgba(255,255,255,0.12); color:#fff; font-size:14px; font-weight:800; line-height:1; letter-spacing:0.5px; text-decoration:none; vertical-align:middle; transition:all 0.25s ease; backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);}
#gnb > li.youtube-live-li > a.youtube-live-btn.live-on:hover {background:#ff0000; border-color:#ff0000; box-shadow:0 6px 14px rgba(255,0,0,0.35); transform:translateY(-1px);}
#gnb > li.youtube-live-li > a.youtube-live-btn.live-off {opacity:0.6; cursor:pointer;}
#gnb > li.youtube-live-li > a.youtube-live-btn.live-off:hover {background:rgba(255,255,255,0.18); border-color:rgba(255,255,255,0.5); opacity:0.85;}

.yt-live-icon {display:inline-flex; align-items:center; justify-content:center; line-height:0;}
.yt-live-icon svg {display:block; width:22px; height:16px;}
.yt-live-text {font-weight:800;}
.yt-live-dot {display:inline-block; width:8px; height:8px; border-radius:50%; background:#ff3b3b; box-shadow:0 0 0 0 rgba(255,59,59,0.7); animation:ytLivePulse 1.6s ease-in-out infinite;}

@keyframes ytLivePulse {
  0% {box-shadow:0 0 0 0 rgba(255,59,59,0.7); transform:scale(1);}
  70% {box-shadow:0 0 0 10px rgba(255,59,59,0); transform:scale(1.05);}
  100% {box-shadow:0 0 0 0 rgba(255,59,59,0); transform:scale(1);}
}


/* ==========================================================================
   04. GNB - 후원 하트 + 툴팁
   ========================================================================== */
#gnb > li.donate-li {position:relative; width:50px !important;}
#gnb > li.donate-li > a.donate-heart {display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; padding:0; border-top:0; color:#fff; line-height:1; vertical-align:middle; transition:transform 0.25s ease, color 0.25s ease;}
#gnb > li.donate-li > a.donate-heart svg {display:block; width:22px; height:22px;}
#gnb > li.donate-li:hover > a.donate-heart {color:#ff8a8a; transform:scale(1.1);}
#gnb-wrap.white #gnb > li.donate-li > a.donate-heart {color:#fff;}

.donate-tooltip {position:absolute; top:95px; left:50%; width:260px; padding:18px 22px; background:#fff; border-radius:8px; box-shadow:0 8px 24px rgba(0,0,0,0.18); text-align:left; line-height:1.5; opacity:0; visibility:hidden; transform:translateX(-50%) translateY(-8px); transition:opacity 0.25s ease, transform 0.25s ease, visibility 0.25s ease; pointer-events:none; z-index:10000;}
.donate-tooltip:before {content:''; position:absolute; top:-7px; left:50%; width:14px; height:14px; background:#fff; transform:translateX(-50%) rotate(45deg);}
#gnb > li.donate-li:hover .donate-tooltip {opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); pointer-events:auto;}

.donate-tooltip-title {margin-bottom:6px; color:#999; font-size:12px; font-weight:500; letter-spacing:0.5px;}
.donate-tooltip-account {margin-bottom:4px; color:#222; font-size:16px; font-weight:700; letter-spacing:0.3px;}
.donate-tooltip-holder {color:#666; font-size:13px;}


/* ==========================================================================
   05. GNB - 전체메뉴 (all-menu)
   ========================================================================== */
.gnb-all {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.6); text-align:center; z-index:9999;}
.gnb-all a {color:#fff; text-decoration:none;}
.gnb-all img {margin:157px 0 50px; max-width:185px;}
.gnb-all .all-wrapper .all-close {float:right; margin-top:150px; color:#fff; font-size:30px; font-weight:600; cursor:pointer;}
.gnb-all .all-wrapper .container a {display:block; color:#fff;}
.gnb-all .all-wrapper .container > ul > li {display:inline-block; padding:0 17px; vertical-align:top;}
.gnb-all .all-wrapper .container > ul > li > a {margin:0 0 18px; font-size:20px; font-weight:600; text-decoration:none;}
.gnb-all .all-wrapper .container > ul > li:first-child {display:none;}
.gnb-all .all-wrapper .container > ul > li > ul > li > a {padding:6px 0; color:#fff; font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.gnb-all .all-wrapper .container > ul > li > ul > li > a:hover {font-weight:bold; transition:0.2s all ease;}
.gnb-all .all-wrapper .container > ul > li > ul > li > ul > li > a {display:block; margin-bottom:9px; color:#fff; font-size:16px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}


/* ==========================================================================
   06. GNB2 (드롭다운 대형 메뉴)
   ========================================================================== */
.gnb2 {position:absolute; left:0; top:115px; width:100%; height:0; background:#fff; overflow:hidden; z-index:9999;}
.gnb2 .gnb2con {width:100% !important;}
.gnb2 .subtext-wrap {float:left; width:40%; padding:60px 0 0; display:inline-flex; flex-direction:column; flex-wrap:wrap; align-content:center; justify-content:center; align-items:center;}
.gnb2 .subtext-wrap .subtext {position:relative; top:-20px;}
.gnb2 .subtext-wrap .subtext .subtext_title {margin:0 0 30px; color:#000; font-size:34px; font-weight:bold; letter-spacing:1px; text-align:center;}
.gnb2 .subul {float:left; width:60%; padding:60px 0 0; text-align:left;}
.gnb2 .GnbOneUl {display:inline-flex; flex-direction:row; flex-wrap:wrap; justify-content:flex-start; width:30%; padding-bottom:40px;}
.gnb2 .subul > li {display:inline-flex; flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; width:15%; margin:0 10px;}
.gnb2 .subul > li > a {display:inline-block; padding:0 10px 20px; border-bottom:1px solid #E7E7E7; color:#0466E5; font-size:17px; text-align:left; text-decoration:none;}
.gnb2 .subul > li.GnbOne {display:block; width:calc(100% / 2); margin:0; text-align:left;}
.gnb2 .subul > li.GnbOne > a {padding:10px 20px 10px 0; color:#848484;}
.gnb2 .subul > li.GnbOne a:hover {color:#0466E5; transition:0.3s all;}
.gnb2 .subul > li.GnbOne .caretLY2 {margin:0 10px; color:#0466E5;}
.gnb2 .subul > li .dept3 {display:inline-block; width:100%; padding:0 0 30px; text-align:left;}
.gnb2 .subul > li .dept3 > li {padding:5px 10px; border-bottom:1px solid #E7E7E7;}
.gnb2 .subul > li .dept3 > li > a {color:#888888; font-size:15px; text-decoration:none;}
.gnb2 .subul > li .dept3 > li > a:hover {color:#0466E5; transition:0.3s all;}
.gnb2 .subul > li .dept3 > li > a .caretLY {margin:0 5px; color:#448AEC;}

.subul {text-align:center;}


/* ==========================================================================
   07. 로고 / 사이트맵
   ========================================================================== */
.logo-wrap {position:absolute; top:0; left:0; transform:translateY(50%);}

#footer-map {background-color:#DADADA;}
#footer-map #sitemap-wrap {display:none; padding:80px 0; background-color:#FFF;}
#footer-map #sitemap {margin:70px 0; margin-top:40px; text-align:center;}
#footer-map #sitemap a {text-decoration:none;}
#footer-map #sitemap a:hover {font-weight:bold; transition:0.2s all;}
#footer-map #sitemap > li {display:inline-block; width:15%; padding:0 30px; text-align:left; vertical-align:top;}
#footer-map #sitemap > li > a {color:#708da2; font-size:19px; font-weight:600;}
#footer-map #sitemap > li > ul {margin-top:15px;}
#footer-map #sitemap > li > ul > li {padding:3px 0;}
#footer-map #sitemap > li > ul > li > a {color:#555555; font-size:15px;}
#footer-map #sitemap > li > ul > li > a:hover {color:#30318B; transition:all ease 0.3s;}
#footer-map #sitemap > li > ul > li > ul > li {padding-left:10px;}
#footer-map #sitemap > li > ul > li > ul > li > a {color:#777; font-size:14px;}
#footer-map #sitemap .depth3 {margin:3px 0 0;}
#footer-map #sitemap .depth3 li {padding:3px 0; font-size:17px;}


/* ==========================================================================
   08. 푸터
   ========================================================================== */
.footerSDM {position:relative; padding:30px 0; overflow:hidden;}
.footerSDM .footerN {position:absolute; right:5%; top:50%; transform:translate(0,-50%);}
.footerSDM .footerP {position:absolute; left:5%; top:50%; transform:translate(0,-50%);}
.footerSDM .footerS {overflow:hidden;}
.footerSDM .footerS .contentSlideWrapper .contentSlide {display:inline-flex; align-items:center; justify-content:center;}

#footerT {background-color:#182A40;}
#footerT .footerTM {display:inline-flex; justify-content:space-between; align-items:center; gap:55px;}
#footerT .footerTM a {text-decoration:none;}
#footerT .footerTM a h1 {margin:0; padding:35px 0; color:#fff; font-size:24px; font-weight:bold;}
#footerT .footerTM a h5 {margin:0; padding:35px 0; color:#fff; font-size:20px; transition:0.3s all ease;}
#footerT .footerTM a:hover h5 {color:#f9b37a; transition:0.3s all ease;}

#footerB {padding:90px 0; background-color:#182137;}
#footerB .footerC {display:flex; flex-direction:column; grid-gap:30px;}
#footerB .slice {width:100%; height:1px; background:#436B73;}

#footerB .footerBT {display:flex; justify-content:center; grid-gap:30px;}
#footerB .footerBT .footerBTR {display:inline-flex; flex-direction:column; width:100%; grid-gap:10px;}
#footerB .footerBT .footerBTR li {color:#fff; font-size:16px;}
#footerB .footerBT .footerBTR h1 a {color:#fff; font-size:15px; text-decoration:none;}
#footerB .footerBT .footerBTL ul {display:inline-flex; gap:30px; padding:30px 0;}

#footerB .footerBB .footerBBR {display:inline-flex; flex-direction:column; align-items:center; width:100%; gap:15px;}
#footerB .footerBB .footerBBR li {display:flex; align-items:center; gap:10px; color:#fff; font-size:15px; word-break:keep-all;}
#footerB .footerBB .footerBBR li a {color:#fff;}
#footerB .footerBB .footerBBR li a:hover, #footerB .footerBB .footerBBR li a:focus {text-decoration:none;}
#footerB .footerBB .footerBBR li .bar {font-size:10px;}
#footerB .footerBB .footerBBR li.footer-account {color:#d8dce8; font-size:14px; opacity:0.9;}
#footerB .footerBB .footerBBR li.footer-account .bar {color:#6b7a9c;}
#footerB .footerBB .footerBBL ul {text-align:right;}
#footerB .footerBB .footerBBL ul li {color:#fff; font-size:15px;}


/* ==========================================================================
   09. 모바일 메뉴 (mmenu)
   ========================================================================== */
.header-offer {position:absolute; right:20%; top:0; width:5%; height:100%; display:inline-flex; justify-content:center; align-items:center; background-color:#FCB040;}
.header-offer a {display:inline-flex; flex-direction:column; justify-content:center; align-items:center; gap:10px; color:inherit; font-size:20px; text-decoration:none;}
.header-gnb {position:absolute; right:0; top:0; width:20%; height:100%; display:inline-flex; justify-content:center; align-items:center; gap:10px; background-color:#EDEDED;}
.header-gnb .toggle {padding:15px;}

#my-menu {display:none; max-width:240px; background-color:rgba(0,0,0,.3); z-index:99999;}
body > .mm-opened {display:block !important;}
#mm-0:before {height:0 !important;}
#mm-1 > ul > li:hover > a.mma1 {color:#34b4c7 !important;}
.mm-navbar.mm-hasbtns .mm-close .mm-sronly {display:none;}
.mm-navbars-top {background-color:rgba(0,0,0,.75);}
.mm-btn {top:unset !important;}
.mm-menu .mm-listview > li .mm-next:after {border-color:#fff !important;}
.mm-panels > .mm-panel > .mm-listview {margin:0 !important;}
.mm-panels > .mm-panel.mm-hasnavbar {padding-top:0 !important;}
.mm-panels > .mm-panel {padding:0;}
.mm-panels, .mm-panels > .mm-panel {z-index:9999;}
.mm-listview {margin:0;}
.mm-listview > li > a, .mm-listview > li > span {padding:10px 20px !important; margin:0; font-size:17px;}
.mm-listview .mm-vertical .mm-panel, .mm-vertical .mm-listview .mm-panel {padding:0 0 0 10px;}
a.mm-next {width:100% !important;}

.closeMenu {position:absolute; right:0; top:5%; color:#fff !important; font-size:40px; text-decoration:none !important; cursor:pointer;}
.mob-login {padding:15px 0; margin-bottom:10px; border-bottom:1px solid #808080; overflow:hidden;}
.mob-login li {float:right; overflow:hidden;}
.mob-login a {display:inline-block !important; padding:0 10px !important; border:0 !important; box-shadow:none !important; color:#aaa !important; font-size:17px !important;}
.mob-login a .fa {font-size:20px !important;}
.mmenu-depth1 > a {color:#fff !important;}
.mmenu-depth2 > a {color:#E4E3B9 !important;}
.mmenu-depth3 > a {color:#B4EBF1 !important;}


/* ==========================================================================
   10. 서브 - 상단 / 브레드크럼 / 탭
   ========================================================================== */
#subtop {position:relative;}
#subtop img {width:100%;}
#subtop .subT {position:absolute; top:60%; width:100%; text-align:center; transform:translate(0,-50%);}
#subtop .subT h1 {margin:0; color:#000; font-size:42px; font-weight:bold; line-height:2; letter-spacing:.5px;}
#subtop .subT h2 {margin:0; color:#000; font-size:24px; letter-spacing:.5px;}

.subgnb {padding:0; margin:0; border-color:rgb(229,229,229); border-style:solid; border-width:1px 0 0; background-repeat:no-repeat; background-attachment:scroll; background-blend-mode:normal; background-size:auto;}
.subgnb .del {width:100%;}
.sub-unit {padding:150px 0 50px 0; margin:0; border-color:rgb(51,51,51); border-style:none; border-width:0; background-position:right; background-repeat:no-repeat; background-attachment:scroll; background-blend-mode:normal; background-size:auto;}

.subgnb-home {padding:0 0 35px 5px;}
.subgnb-home a {color:#666666; font-size:17px; font-family:Noto Sans KR;}
.subgnb-home .title {color:#666666; font-size:17px; font-family:Noto Sans KR;}

#subgnb {padding:0; border-bottom:1px solid #ddd; background-color:#E78B42;}
#subgnb .container > div {margin:15px 0; display:inline-flex;}
#subgnb span, #subgnb a {position:relative; top:3px; color:#777; font-size:16px; text-decoration:none;}
#subgnb a.active {color:#6599CB; font-weight:bold;}
#subgnb .dropdown {float:left; display:inline-block; border-right:1px solid #fff;}
#subgnb .dropdown:last-child {border:none;}
#subgnb .dropdown .btn {padding:5px 20px 5px; color:#fff; font-size:17px; font-weight:bold;}
#subgnb .dropdown .btn-default {border:none;}
#subgnb .dropdown .btn:hover {background-color:transparent !important; transition:0.3s all ease;}
#subgnb .dropdown .btn, #subgnb .dropdown .btn .active {background-color:transparent !important;}
#subgnb .dropdown-menu > li > a {padding:10px 20px; font-size:17px; transition:0.3s all ease;}
#subgnb .caret {position:relative; width:8px; height:8px; margin:0; margin-top:-15px; margin-left:20px; border-top:6px solid #fff; border-bottom:6px solid transparent; border-right:6px solid transparent; border-left:6px solid #fff; transform:rotate(225deg); transition:all 0.6s;}

.depth3 {display:inline-flex; justify-content:flex-end; width:100%; gap:20px;}
.depth3 li {position:relative;}
.depth3 li a {color:rgba(0,0,0,0.5); font-size:23px; font-weight:bold; transition:all ease .3s;}
.depth3 li a:hover, .depth3 li a:focus {text-decoration:none;}
.depth3 li:hover a, .depth3 li.active a {color:rgba(0,0,0,1); transition:all ease .3s;}
.depth3 li:after {content:''; position:absolute; left:0; bottom:-5px; width:0; height:2px; background-color:#000; transition:all ease .3s;}
.depth3 li.active:after {width:100%; transition:all ease .3s;}

.depth4 {display:inline-flex; justify-content:flex-end; width:100%; gap:20px; margin-top:30px;}
.depth4 li {position:relative;}
.depth4 li a {color:rgba(0,0,0,0.5); font-size:20px; transition:all ease .3s;}
.depth4 li a:hover {font-weight:bold; text-decoration:none;}
.depth4 li.active a {width:74px; height:29px; padding:2px 20px 2px 18px; border-radius:14px; background-color:#000; color:#fff; transition:all ease .3s;}

#sub_title {float:left; display:inline-block; width:100%; margin:0; padding:0 0 60px; font-size:48px; font-weight:bold;}

#content .third-menus {margin:10px 0 42px 0; text-align:center;}
#content .third-menus ul {display:inline-block;}
#content .third-menus ul li {float:left; margin-left:-1px; border:1px solid #dedede;}
#content .third-menus ul li a {display:inline-block; min-width:160px; padding:8px 17px; color:#333; font-size:12px; text-align:center; text-decoration:none;}
#content .third-menus ul li.active a {color:#fff;}


/* ==========================================================================
   11. 서브 - 좌측 LNB
   ========================================================================== */
.lnb {padding:0 30px;}
.lnb_title {position:relative; padding:40px 0; border-bottom:1px solid #000; font-size:30px; font-weight:600; text-align:center;}
.sub-left-triangle {position:absolute; right:0; top:0; width:0; height:0; border-left:30px solid transparent; border-top-width:30px; border-top-style:solid; border-top-color:#6599CB;}

.sub_depth2 {margin-top:0; padding-top:0;}
.sub_depth2 li {padding:20px 25px; border-bottom:1px solid #ddd; transition:all ease 0.3s;}
.sub_depth2 li.active, .sub_depth2 > li:hover {background:#d9d3f2;}
.sub_depth2 > li > a {color:#777; font-size:17px; font-weight:600; text-decoration:none;}
.sub_depth2 li a {color:#777; font-size:16px; font-weight:600; text-decoration:none;}
.sub_depth2 li i {position:relative; float:right; margin:3px 15px 0 0; font-size:16px; cursor:pointer;}
.sub_depth2 li i.fa-minus {display:none;}
.sub_depth2 li:last-child {border-color:#000;}

.sub_depth3 {display:none; margin-top:15px; padding:0 15px;}
.sub_depth3.active {display:block;}
.sub_depth3 li {padding:10px 20px; border-bottom:1px solid #999; background-color:#f4c9ff;}
.sub_depth3 li a {color:#999; font-size:15px; text-decoration:none; transition:all ease 0.3s;}
.sub_depth3 li a:hover {color:#739AB9;}
.sub_depth3.a_96 li a:hover {color:#4E5397;}
.sub_depth3.a_98 li a:hover {color:#E4C640;}


/* ==========================================================================
   12. 서브 - 기타
   ========================================================================== */
#gdream-service {margin:160px 0 0; word-break:keep-all;}

.view-heading {padding:15px; background-color:#000; color:#fff; font-size:17px; letter-spacing:0;}

.latest-special {margin-bottom:30px; margin-left:18px;}
.latest-special .p4 {position:relative; top:15px; padding-left:15px; color:#000000; font-size:30px;}
.latest-special .p4 span {color:#948e8f;}
.latest-special .white-bar {display:inline-block; width:1px; height:22px; margin:-20px 13px; background:#7c8789;}
.jubowrapper {position:relative; top:13px; display:inline-block; font-size:13px; opacity:0.8;}


/* ==========================================================================
   13. containerGnb
   ========================================================================== */
.containerGnb {width:100%; padding-right:15px; padding-left:15px; margin-right:auto; margin-left:auto;}
.containerGnb:before {display:table;}


/* ==========================================================================
   90. 반응형 (미디어쿼리 통합)
   --------------------------------------------------------------------------
   [PC]     1200px 이상 - GNB 노출
   [모바일] 1199px 이하 - 햄버거 메뉴 노출
   ========================================================================== */

/* --------------------------------------------------------------------------
   min-width 계열 : container / containerGnb 폭
   -------------------------------------------------------------------------- */
@media (min-width:768px) {
  .containerGnb {width:100%;}
}

@media (min-width:992px) {
  .containerGnb {width:100%;}
}

@media (min-width:1200px) {
  .containerGnb {width:1170px;}
}

@media (min-width:1340px) {
  .containerGnb {width:1330px;}
}

@media (min-width:1440px) {
  .container {width:1440px;}
}

@media (min-width:1480px) {
  .containerGnb {width:1470px;}
}

@media (min-width:1540px) {
  .containerGnb {width:1530px;}
}

@media (min-width:1680px) {
  .containerGnb {width:1673px;}
}

/* --------------------------------------------------------------------------
   max-width: 1880px
   -------------------------------------------------------------------------- */
@media (max-width:1880px) {
  #gnb {right:12rem; gap:40px;}
  #gnb > li > a {font-size:18px;}
  #gnb-wrap .gnbTR .gnbTRB {font-size:18px;}
}

/* --------------------------------------------------------------------------
   max-width: 1499px
   -------------------------------------------------------------------------- */
@media (max-width:1499px) {
  #gnb {right:10rem; gap:28px;}
  #gnb > li > a {font-size:17px;}
  #gnb-wrap .gnbTR {right:6%; grid-gap:10px;}
  #gnb-wrap .gnbTR .gnbTRB {font-size:15px;}
  #gnb-wrap .gnbTR .bar {height:14px;}
  .top-href-btn {right:2%;}
  .logo-wrap {left:1%; top:6%;}
  .logo-wrap img {width:190px;}

  #gnb > li.donate-li {width:42px !important;}
  #gnb > li.donate-li > a.donate-heart svg {width:20px; height:20px;}

  #gnb > li.youtube-live-li > a.youtube-live-btn {padding:6px 12px; gap:6px; font-size:13px;}
  .yt-live-icon svg {width:20px; height:14px;}
  .yt-live-dot {width:7px; height:7px;}

  #footerT .footerTM {gap:25px;}
  #footerT .footerTM a h1 {padding:20px 0;}
  #footerT .footerTM a h5 {padding:20px 0;}
}


@media (max-width: 1339px) {
  #gnb {right: 5rem; gap: 16px;}
  #gnb > li > a {font-size: 17px;}
  #gnb > li.youtube-live-li > a.youtube-live-btn {padding: 5px 9px; gap: 4px; font-size: 11px;}
  .yt-live-icon svg {width: 17px; height: 12px;}
  .yt-live-dot {width: 6px; height: 6px;}
  .logo-wrap img {width: 140px;}
}


/* --------------------------------------------------------------------------
   max-width: 1199px  ★ PC 메뉴 → 모바일 햄버거 전환 지점
   -------------------------------------------------------------------------- */
@media (max-width:1199px) {
  /* GNB 전환 */
  #gnb, .top-href-btn, #gnb-wrap .gnbTR {display:none !important;}
  .header-mobile-gnb {display:block !important;}

  #gnb-wrap {height:75px;}
  .logo-wrap {left:1%; top:0;}
  .logo-wrap img {width:160px;}

  #footerB {padding:25px 0;}
  #footerB .footerC {grid-gap:15px;}
  #footerT .footerTM a h5 {font-size:17px;}
}

/* --------------------------------------------------------------------------
   max-width: 992px
   -------------------------------------------------------------------------- */
@media (max-width:992px) {
  header {height:75px;}
  #gnb-wrap {height:75px;}

  #footerT .footerTM {flex-wrap:wrap; gap:10px;}
  #footerT .footerTM a:nth-child(1) {width:100%;}
  #footerT .footerTM a h5 {font-size:15px;}
  #footerB .footerBT .footerBTL ul {padding:20px 0;}
}

/* --------------------------------------------------------------------------
   max-width: 767px
   -------------------------------------------------------------------------- */
@media (max-width:767px) {
  header {height:65px;}
  #gnb-wrap {height:65px;}
  .logo-wrap {width:130px; top:0;}
  .logo-wrap img {width:130px;}
  .gnbBTN img {width:20px;}
  .row {margin:0;}

  #sub_title {padding:0 0 20px; font-size:25px;}
  .sub-unit {padding:50px 0 30px 0 !important; background-size:contain;}
  .depth3 {display:grid; grid-template-columns:1fr 1fr;}
  .depth3 li a {font-size:17px;}
  .depth4 li a {font-size:17px;}
  .view-heading {font-size:15px;}

  #subgnb .container > div {flex-wrap:wrap;}
  #subgnb .dropdown .btn {padding:5px 10px 5px; font-size:17px;}
  #gnb-top .gnbTM .gnbTL .gnbTLB {font-size:13px;}

  #footerT .footerTM {padding:0 15px;}
  #footerT .footerTM a h1 {padding:10px 0; font-size:20px;}
  #footerT .footerTM a h5 {padding:10px 0;}
  #footerB .footerBT {flex-direction:column; grid-gap:15px;}
  #footerB .footerBT .footerBTR {grid-gap:5px;}
  #footerB .footerBT .footerBTR li {font-size:14px;}
  #footerB .footerBB {flex-direction:column; gap:15px;}
  #footerB .footerBB .footerBBR li {font-size:14px;display: inline-block;text-align: center;}
  #footerB .footerC{align-items: center;}
  #footerB .footerBB .footerBBR li.footer-account {flex-direction:column; gap:2px; font-size:13px; text-align:center;}
  #footerB .footerBB .footerBBR li.footer-account .bar {display:none;}
}

/* ==========================================================================
   91. 공통 틀 반응형 보정
   1199px 이하에만 적용. 본문 및 디자이너의 .sub_title 스타일은 제외한다.
   ========================================================================== */
@media (max-width:1199px) {
  /* 로고와 메뉴 버튼을 고정 헤더 안에서 수직 중앙 정렬한다. */
  #gnb-wrap > .containerGnb {padding-right:1rem; padding-left:1rem;}
  #gnb-wrap > .containerGnb > .row {margin:0;}
  #gnb-wrap .logo-wrap {
    top:50%; left:0; width:min(10rem, calc(100% - 4rem));
    transform:translateY(-50%);
  }
  #gnb-wrap .logo-wrap img {display:block; width:100%; max-width:100%; height:auto;}
  #gnb-wrap .header-mobile-gnb .gnbBTN {
    right:0; display:flex; align-items:center; justify-content:center;
    width:3rem; height:3rem; max-height:100%; transform:translateY(-50%);
  }
  #gnb-wrap .header-mobile-gnb .gnbBTN img {display:block; width:1.5rem; height:auto;}

  /* 주소와 저작권 문구를 일반 텍스트 흐름으로 줄바꿈한다. */
  #footerB {padding:2.5rem 0;}
  #footerB > .container {max-width:100%;}
  #footerB > .container > .row {margin:0;}
  #footerB .footerC {width:100%; min-width:0; align-items:center; gap:1.5rem;}
  #footerB .footerBT, #footerB .footerBT > a {max-width:100%;}
  #footerB .footerBT img {display:block; width:15rem; max-width:100%; height:auto; margin:0 auto;}
  #footerB .footerBB {width:100%; min-width:0;}
  #footerB .footerBB .footerBBR {margin:0; padding:0; gap:0.75rem;}
  #footerB .footerBB .footerBBR li {
    display:block; max-width:100%; font-size:1rem; line-height:1.7;
    text-align:center; overflow-wrap:anywhere;
  }
  #footerB .footerBB .footerBBR li .bar {white-space:nowrap;}

  /* Layout.cshtml이 출력하는 공통 상단에만 적용한다. */
  #content > .subgnb > .container > div > .sub-unit {
    padding:calc(75px + 2rem) 0 2rem;
  }
  #content .sub-unit > .subgnb-home {
    display:flex; flex-wrap:wrap; align-items:center; gap:0.25rem 0;
    padding:0 0 1.5rem; line-height:1.6;
  }
  #content .sub-unit > .subgnb-home a,
  #content .sub-unit > .subgnb-home .title {font-size:1rem; overflow-wrap:anywhere;}
  #content .sub-unit > .subgnb-home > span:not(.title) {
    display:inline-flex; align-items:center; padding:0 0.5rem; font-size:0;
  }
  #content .sub-unit > .depth3,
  #content .sub-unit > .depth4 {
    display:flex; flex-wrap:wrap; justify-content:flex-start;
    gap:0.5rem 1rem; padding:0; margin:0 0 1.25rem;
  }
  #content .sub-unit > .depth3 > li,
  #content .sub-unit > .depth4 > li {min-width:0; max-width:100%;}
  #content .sub-unit > .depth3 > li > a,
  #content .sub-unit > .depth4 > li > a {
    display:flex; align-items:center; min-height:2.75rem;
    width:auto; height:auto; font-size:1.125rem; line-height:1.5;
    word-break:keep-all; overflow-wrap:anywhere;
  }
  #content .sub-unit > .depth3 > li:after {bottom:0;}
  #content .sub-unit > .depth4 > li > a {padding:0.5rem 0.75rem; border-radius:1.5rem;}
  #content .sub-unit > .subTitle > #sub_title {
    float:none; margin:1.75rem 0 0; padding:0;
    font-size:2rem; line-height:1.4; word-break:keep-all; overflow-wrap:anywhere;
  }
}

@media (max-width:767px) {


	/* .subgnb > .container, .subgnb .container > .col-xs-12 { */
    /* padding:0!important; */
/* } */


  #gnb-wrap .logo-wrap {width:min(9rem, calc(100% - 4rem));}
  #footerB {padding:2rem 0;}
  #footerB .footerBT img {width:13rem;}

  #content > .subgnb > .container > div > .sub-unit {
    /* layout.sub.css의 기존 padding:115px ... !important를 공통 틀에서 보정 */
    padding:calc(65px + 1.5rem) 0 2rem !important;
  }
  #content .sub-unit > .subgnb-home {padding-bottom:1.25rem;}
  #content .sub-unit > .depth3 {gap:0.5rem 1rem;}
  #content .sub-unit > .depth4 {
    display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:0.5rem;
  }
  #content .sub-unit > .depth4 > li > a {
    justify-content:center; height:100%; font-size:1rem; text-align:center;
  }
  #content .sub-unit > .subTitle > #sub_title {font-size:1.75rem;}
}