/*공통*/
/*@import url("reset.css");*/

#wrap {width:100%; min-width:var(--min-w); min-height:var(--nvh); background:var(--begie);}

body.fix {overflow:hidden;}


header {width:100%; position:fixed; box-sizing:border-box; padding-top:112px; left:0; top:0; z-index:100; background:var(--begie); transition:padding-top 0.5s ease-in-out;}
header .header-wrap {width:92%; max-width:var(--conts-w); margin:0 auto; display:flex; gap:var(--gap-16); justify-content:space-between; position:relative; z-index:10;}
header .logo {width:255px; height:60px; display:flex; align-items:center;}
header .logo a {width:255px; height:60px; background:url(/img/com/logo.svg) center no-repeat; background-size:cover; display:block; font-size:0;}
header .gnb-wrap {padding-bottom:var(--gap-64);}
header .gnb-wrap ul.gnb-box {display:flex; align-items:center; gap:60px;}
header .gnb-wrap ul.gnb-box li.gnb {position:relative;}
header .gnb-wrap ul.gnb-box li.gnb > a {display:flex; align-items:center; height:60px; gap:var(--gap-16); color:var(--font-gray);}
header .gnb-wrap ul.gnb-box li.gnb > a em {font-size:var(--font-20); font-weight:600;}
header .gnb-wrap ul.gnb-box li.gnb > a span {font-size:var(--font-16);}
header .gnb-wrap ul.gnb-box li.gnb:hover > a {color:var(--main-color);}
header .gnb-wrap ul.gnb-box li.gnb .snb-wrap {min-width:100%; position:absolute; left:50%; top:60px; border-radius:var(--gap-8); background:rgba(101,142,109,0.9); padding:var(--gap-24); transform:translateX(-50%); display:none;}
header .gnb-wrap ul.gnb-box li.gnb .snb-wrap:before {content:""; width:0; height:0; border:solid transparent; border-width:0 13px; border-bottom:18px solid rgba(101,142,109,0.9); position:absolute; left:50%; top:-18px; transform:translateX(-50%);}
header .gnb-wrap ul.gnb-box li.gnb .snb-wrap .snb-box {width:100%; padding:var(--gap-8) 0; border-top:1px solid var(--begie); display:flex; gap:var(--gap-8);}
header .gnb-wrap ul.gnb-box li.gnb .snb-wrap .snb-box:first-child {border-top:none;}
header .gnb-wrap ul.gnb-box li.gnb .snb-wrap .snb-box .snb {width:80px; padding:var(--gap-8) 0;}
header .gnb-wrap ul.gnb-box li.gnb .snb-wrap .snb-box .snb,
header .gnb-wrap ul.gnb-box li.gnb .snb-wrap .snb-box .snb a {font-size:var(--font-18); font-weight:600; color:var(--begie);}
header .gnb-wrap ul.gnb-box li.gnb .snb-wrap .snb-box ul.depth-box li.depth {padding:var(--gap-8) 0;}
header .gnb-wrap ul.gnb-box li.gnb .snb-wrap .snb-box ul.depth-box li.depth a {font-size:var(--font-18); color:var(--begie);}
header .gnb-wrap ul.gnb-box li.gnb .snb-wrap .snb-box ul.depth-box li.depth a span {background-image:linear-gradient(var(--begie), var(--begie)); background-repeat:no-repeat; background-position:left bottom; background-size:0 2px; transition:background-size 0.3s linear;}
header .gnb-wrap ul.gnb-box li.gnb .snb-wrap .snb-box ul.depth-box li.depth a:hover {font-weight:600;}
header .gnb-wrap ul.gnb-box li.gnb .snb-wrap .snb-box ul.depth-box li.depth a:hover span {background-size:100% 2px;}
header .gnb-wrap ul.gnb-box li.gnb .snb-wrap[data-id="about"] {width:calc(100% + 200px);}
header .gnb-wrap ul.gnb-box li.gnb .snb-wrap[data-id="worship"] {width:calc(100% + 20px);}
header .gnb-wrap ul.gnb-box li.gnb .snb-wrap[data-id="community"] {width:calc(100% + 120px);}
header .gnb-wrap ul.gnb-box li.gnb .snb-wrap[data-id="gospel"] {width:calc(100% + 160px);}
header .gnb-wrap ul.gnb-box li.gnb .snb-wrap.active {display:block;}
header .btn-sitemap {width:var(--n-30); height:var(--n-32); background:url(/img/com/icon_menu.svg) center no-repeat; background-size:cover; font-size:0; display:none;}

header.lock .logo a {background-image:url(/img/com/logo_w.svg);}
header.lock .btn-sitemap {background-image:url(/img/com/icon_close_begie.svg);}

header.scroll {padding-top:var(--gap-64);}


@media screen and (max-width: 1280px) {
	header {padding-top:80px;}
	header .logo {width:213px;}
	header .logo a {width:213px; height:50px;}
	header .gnb-wrap ul.gnb-box {gap:45px;}
	header .gnb-wrap ul.gnb-box li.gnb .snb-wrap[data-id="gospel"] {left:calc(50% - 50px);}
}


@media screen and (max-width: 1200px) {
	header {padding-top:70px;}
	header .logo {width:179px;}
	header .logo a {width:179px; height:42px;}
	header .gnb-wrap ul.gnb-box {gap:40px;}
	header .gnb-wrap ul.gnb-box li.gnb > a em {font-size:var(--font-16);}
	header .gnb-wrap ul.gnb-box li.gnb > a span {font-size:var(--font-14);}
	header .gnb-wrap ul.gnb-box li.gnb .snb-wrap[data-id="gospel"] {left:calc(50% - 42px);}
	header .gnb-wrap ul.gnb-box li.gnb .snb-wrap .snb-box .snb {width:70px;}
	header .gnb-wrap ul.gnb-box li.gnb .snb-wrap .snb-box .snb,
	header .gnb-wrap ul.gnb-box li.gnb .snb-wrap .snb-box .snb a,
	header .gnb-wrap ul.gnb-box li.gnb .snb-wrap .snb-box ul.depth-box li.depth a {font-size:var(--font-16);}
}

@media screen and (max-width: 1024px) {
	header {padding-top:var(--gap-60);}
	header .header-wrap {align-items:center; padding-bottom:var(--gap-32);}
	header .gnb-wrap {display:none;}
	header .btn-sitemap {display:block;}

	header.scroll {padding-top:var(--gap-32);}
}

@media screen and (max-width: 480px) {
	header .logo,
	header .logo a {width:149px; height:35px;}
}



header .sitemap {width:100%; height:var(--nvh); background:var(--main-color); position:fixed; left:0; top:0; z-index:9; padding-top:var(--headerH); display:none;}
header .sitemap .sitemap-wrap {width:92%; margin:0 auto; height:calc(var(--nvh) - var(--headerH)); overflow-y:auto;}
header .sitemap .sitemap-wrap::-webkit-scrollbar {width:5px; border-radius:10px;}
header .sitemap .sitemap-wrap::-webkit-scrollbar-thumb {background:rgba(var(--main-rgb),0.5);}
header .sitemap .sitemap-wrap ul.sitemap-gnb {width:100%;}
header .sitemap .sitemap-wrap ul.sitemap-gnb li.gnb {width:100%; border:solid var(--begie); border-width:2px 0; margin-top:-2px;}
header .sitemap .sitemap-wrap ul.sitemap-gnb li.gnb:first-child {margin-top:0;}
header .sitemap .sitemap-wrap ul.sitemap-gnb li.gnb .btn-gnb {width:100%; height:var(--n-54); display:flex; align-items:center; color:var(--begie); position:relative; gap:var(--gap-8); padding:0 12px;}
header .sitemap .sitemap-wrap ul.sitemap-gnb li.gnb .btn-gnb em {font-size:var(--font-20); font-weight:600;}
header .sitemap .sitemap-wrap ul.sitemap-gnb li.gnb .btn-gnb span {font-size:var(--font-18);}
header .sitemap .sitemap-wrap ul.sitemap-gnb li.gnb .btn-gnb:after {content:""; width:20px; height:20px; background:url(/img/com/arrow_down_begie.svg) center no-repeat; position:absolute; right:12px; top:50%; transform:translateY(-50%); transition:transform 0.3s ease;}
header .sitemap .sitemap-wrap ul.sitemap-gnb li.gnb .snb-wrap {width:100%; border-top:1px solid var(--begie); display:none;}
header .sitemap .sitemap-wrap ul.sitemap-gnb li.gnb .snb-wrap .snb-box {width:100%; border-top:1px solid rgba(var(--begie-rgb),0.6); padding:8px 16px; display:flex;}
header .sitemap .sitemap-wrap ul.sitemap-gnb li.gnb .snb-wrap .snb-box:first-child {border-top:none;}
header .sitemap .sitemap-wrap ul.sitemap-gnb li.gnb .snb-wrap .snb-box .snb {width:80px; height:var(--n-40); display:flex; align-items:center;}
header .sitemap .sitemap-wrap ul.sitemap-gnb li.gnb .snb-wrap .snb-box .snb,
header .sitemap .sitemap-wrap ul.sitemap-gnb li.gnb .snb-wrap .snb-box .snb a {font-size:var(--font-18); font-weight:600; color:var(--begie);}
header .sitemap .sitemap-wrap ul.sitemap-gnb li.gnb .snb-wrap .snb-box ul.depth-box li.depth {margin-top:3px;}
header .sitemap .sitemap-wrap ul.sitemap-gnb li.gnb .snb-wrap .snb-box ul.depth-box li.depth:first-child {margin-top:0;}
header .sitemap .sitemap-wrap ul.sitemap-gnb li.gnb .snb-wrap .snb-box ul.depth-box li.depth a {height:var(--n-40); display:flex; align-items:center; font-size:var(--font-18); color:var(--begie);}
header .sitemap .sitemap-wrap ul.sitemap-gnb li.gnb .snb-wrap .snb-box ul.depth-box li.depth .br {display:inline-block;}
header .sitemap .sitemap-wrap ul.sitemap-gnb li.gnb.off {opacity:0.4;}
header .sitemap .sitemap-wrap ul.sitemap-gnb li.gnb.active .btn-gnb:after {transform:translateY(-50%) scaleY(-1);}
header .sitemap.active {display:block;}

header.scroll .sitemap {padding-top:var(--headerH2);}



footer {width:100%; padding:var(--gap-40) 0; background:var(--main-color); border-top:1px solid var(--begie);}
footer .footer-wrap {width:92%; max-width:var(--conts-w); margin:0 auto; display:flex; gap:0 80px;}
footer .footer-wrap .logo {width:60px; height:68px; font-size:0; background:url(/img/com/logo_footer_.svg) center no-repeat; background-size:100% auto;}
footer .footer-wrap .footer-conts {flex:1;}
footer .footer-wrap .footer-conts ul li {font-size:var(--font-16); color:var(--begie); margin-top:5px;}
footer .footer-wrap .footer-conts ul li:first-child {margin-top:0;}

@media screen and (max-width: 1280px) {
	footer .footer-wrap {gap:0 40px;}
}

@media screen and (max-width: 480px) {
	footer .footer-wrap {flex-wrap:wrap; gap:var(--gap-32) 0;}
	footer .footer-wrap .logo {width:42px; height:48px; margin:0 auto;}
	footer .footer-wrap .footer-conts {width:100%; text-align:left; flex:auto;}
}


.button {width:fit-content; display:flex; align-items:center; justify-content:center;}
.button.basic {height:var(--n-40); font-size:var(--font-14); padding:0 var(--gap-30); border:1px solid; border-radius:4px;}
.button.small {height:var(--n-32); font-size:var(--font-14); padding:0 var(--gap-24); border:1px solid; border-radius:4px;}
.button.medium {height:var(--n-50); font-size:var(--font-16); padding:0 var(--gap-20); border:1px solid; border-radius:4px;}

.button.line {background:transparent; transition:background 0.3s ease;}
.button.line.point {border-color:var(--main-color); color:var(--main-color);}
.button.line.point:hover {background:var(--main-color); color:var(--begie);}
.button.line.begie {border-color:var(--begie); color:var(--begie);}
.button.line.begie:hover {background:var(--begie); color:var(--main-color);}

.button.fill {transition:0.3s ease;}
.button.fill.point {border-color:var(--main-color); background:var(--main-color); color:var(--white);}
.button.fill.white {border-color:var(--white); background:var(--white); color:var(--main-color);}
.button.fill.op {border-color:transparent; background:rgba(255,255,255,0.12); color:var(--white);}
.button.fill.op:hover {background:rgba(255,255,255,0.2); color:var(--white);}

.button.dir span {position:relative; padding-right:calc(10px + var(--n-20));}
.button.dir span:after {content:""; width:var(--n-20); height:var(--n-20); background:url(/img/com/arrow_circle_right.svg) center no-repeat; background-size:cover; position:absolute; right:0; top:50%; transform:translateY(-50%);}

.button-wrap {display:flex; align-items:center; justify-content:center; gap:var(--gap-8);}




.btn-top {width:var(--n-50); height:var(--n-50); position:fixed; right:2%; bottom:var(--gap-40); background:var(--white); border:1px solid #E5E5EC; font-size:0; border-radius:50%; opacity:0; visibility:hidden; transition:0.5s ease;}
.btn-top:after {content:""; width:100%; height:100%; background:url(/img/com/icon_top.svg) center no-repeat; background-size:20% auto; position:absolute; left:0; top:0;}
.btn-top.active {opacity:1; visibility:visible;}



@media screen and (max-width: 1024px) {}
@media screen and (max-width: 768px) {}
@media screen and (max-width: 480px) {}