@charset "utf-8";

/* @import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"); */

@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url('../fonts/Pretendard/woff2/PretendardVariable.woff2') format('woff2-variations');
}


@font-face {
    font-family: 'yg-jalnan';
    src: url('../fonts/Jalnan/Jalnan2.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
  font-family: 'Godo';
  font-style: normal;
  font-weight: 400;
  src: url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoM.woff2') format('woff2'), url('//cdn.jsdelivr.net/korean-webfonts/1/corps/godo/Godo/GodoM.woff') format('woff');
}

@font-face {
    font-family: 'SeoulHangangM';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/SeoulHangangM.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* 손글씨체 */
@font-face {
    font-family: 'BBTreeCB';
    src: url('https://cdn.jsdelivr.net/gh/fontbee/font@main/Utoimage/BBTreeCB.woff') format('woff');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Ownglyph_Dailyokja-Rg';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2403@1.0/Ownglyph_Dailyokja-Rg.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'KOTRA_BOLD-Bold';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10-21@1.1/KOTRA_BOLD-Bold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* Color Variables */
:root {
  --main-color: #3cb197;
  --sub-color: #4d9a89;
  --sub-color1: #b7cb47;
  --sub-color2: #00a2b1;
  --sub-color3: #157dc1;
  --dark-color: #003c1e;
  --dark-bg: #002b15;
  --light-bg: #f7f5f2;
  --dark-opacity10: rgba(0,60,30,10%);
  --dark-opacity20: rgba(0,60,30,20%);
  --dark-opacity30: rgba(0,60,30,30%);
  --dark-opacity40: rgba(0,60,30,40%);
  --dark-opacity50: rgba(0,60,30,50%);
  --dark-opacity60: rgba(0,60,30,60%);
  --dark-opacity70: rgba(0,60,30,70%);
  --dark-opacity80: rgba(0,60,30,80%);
  --dark-opacity90: rgba(0,60,30,90%);
  --main-opacity10: rgba(222,242,238,10%);
  --main-opacity20: rgba(222,242,238,20%);
  --main-opacity30: rgba(222,242,238,30%);
  --main-opacity40: rgba(222,242,238,40%);
  --main-opacity50: rgba(222,242,238,50%);
  --main-opacity60: rgba(222,242,238,60%);
  --main-opacity70: rgba(222,242,238,70%);
  --main-opacity80: rgba(222,242,238,80%);
  --main-opacity90: rgba(222,242,238,90%);
  --main-opacity: #def2ee;
  --gradient-color: linear-gradient(90deg, #0a6f58 0%, #002d16 100%);

  --swiper-navigation-size: 2.5rem;
}



/***** Common *****/
.inner-1400 { max-width:1400px; margin:0 auto; }
.innerBox {
  position: relative;
  max-width: 1400px;
  margin: 0 auto;
}

.moNone {
  display: initial !important;
}
.pcNone {
  display: none !important;
}


select {
    width: auto;
    padding: 0 60px 0 10px;
    height: 50px;
    line-height: 48px;
    box-sizing: border-box;
    border: 1px solid #d1d1d1;
    font-family: inherit;
    background: url('/theme/church01/img/icons/selArrow.png') no-repeat center right 0.5rem #fff;
    border-radius: 3px;
    appearance: none;
}

select::-ms-expand{
	display: none;
}



/***** Button Types *****/
.btn { border-radius:0.3rem; border:1px solid transparent; padding:0.8rem 1.3rem; transition:all 0.15s; }
.btn-light-white { border-radius:0.3rem; border:1px solid #fff; padding:0.8rem 1.3rem; }
.btn-light-white:hover { background-color:rgba(255,255,255,0.1); }
.btn-light { padding:1rem 1.5rem; border-color:var(--dark-color); color:var(--dark-color); font-weight:700; }
.btn-light::after { content:'\f105'; font-family:'fontAwesome'; padding-left:2rem; }
.btn-light:hover { background-color:var(--dark-opacity10); }


/***** Header *****/
#header { width:100%; height:11.5vh; background-color:rgba(255,255,255,1.0);  }
.header-wrap { width:100%; position:fixed; top:0; z-index:99999; background-color:rgba(255,255,255,1.0); box-shadow: 0 0 0.8rem rgba(0,0,0,0.15); }
#header .header-wrap > .inner-1400 { padding:1rem 0; display:grid; grid-template-columns:auto 1fr; gap:3rem; }
#header .topLogo { display:block; max-width:10vw; max-height: 100px; height: 8vh; }
#header .topLogo img { height:100%; }

#header .btnMenu { position:relative; display:block; width:20px; height:27px; }
#header .btnMenu i { position: absolute; top:50%; right:0; display:block; width:15px; height:2px; font-size:0; background:#000; transition:all .3s ease;}
#header .btnMenu i:before { content:''; display:block; position:absolute; top:-9px; right:0; width:22px; height:2px; background:#000; transition:all .3s ease;}
#header .btnMenu i:after { content:''; display:block; position:absolute; top:9px; right:0; width:22px; height:2px; background:#000; transition:all .3s ease;}

#header .btnMenu.on span { visibility: hidden; opacity:0;}
#header .btnMenu.on i { background:none;}
#header .btnMenu.on i:before { top:50%; transform: rotate(45deg);}
#header .btnMenu.on i:after { top:50%; transform: rotate(-45deg);}

.nav-wrap { display:grid; justify-content: end; grid-auto-rows: 16px 1fr; gap: 1rem; }
.util-bar { display:flex; justify-content: flex-end; }
.util-bar li { position:relative; padding:0 1rem; }
.util-bar li:last-child { padding-right:0; }
.util-bar li::after { position: absolute; top: 1px; right: 0; content: '|'; color: #ccc; font-size: 0.9rem; font-weight:100; }
.util-bar li:last-child::after { content:''; }
.util-bar a { font-size:0.85rem; font-weight:600; color:#555; }

.gnb { display:flex; gap:3rem; align-items:center; }
.gnb .level-01 > a  { font-size:1.1rem; font-weight:600; }
.gnb .level-02 { width: 40%; position:relative; border-right:1px solid #ddd; }
.gnb .level-02 > li { padding:0 1.5rem; padding-bottom:1rem; }
.gnb .level-02 > li > a { display:block; font-weight:600; font-size:1.05rem; }
.gnb .level-02 > li > a:hover { color:var(--sub-color); }
.gnb .level-02 > li.arrow:hover > a, .gnb .level-02 > li.arrow:hover > a::after { color: var(--sub-color); }
.gnb .level-02 > li.arrow > a::after { content:'\f105'; font-family:'fontAwesome'; float:right; color:#ccc; }
.gnb .level-03 { display:none; width:228px; height:100%; position:absolute; top:0; right:-230px; opacity:0; transition: opacity 0.3s ease; }
.gnb .level-03.show { display:block; opacity: 1; }
.gnb .level-03 > li { padding:0 1.5rem; padding-bottom:1rem; }
.gnb .level-03 > li > a { display:inline-block; position:relative; font-size: 1.05rem; }
.gnb .level-03 > li > a:hover::after { content:''; border-bottom:1px solid var(--sub-color); display:block; position:absolute; bottom:-3px; width:100%; }
.gnb .level-03 > li > a:hover { color:var(--sub-color); }
.nav-dropdown { display:none; width:100%; background-color:white; box-shadow: 0 1rem 0.8rem rgba(0,0,0,0.3); position:absolute; left:0; top:11vh; }
.dropdown-wrap { padding:3rem 0; height:fit-content; min-height:280px; display: grid; grid-template-columns: 30% auto 230px; }
.drop-left {height:280px; line-height:1.5; position:relative; border-right:1px solid #ddd; box-sizing:border-box; padding-right:3rem; }
.drop-left .title { font-family: 'Godo'; font-weight:bold; font-size:2rem; }
.drop-left .remark { color:#777; padding-top:0.5rem; }
.drop-left figure { position:absolute; right:3rem; bottom:0; }

.banner-right { height:fit-content; display:grid; gap:0.8rem; }


/* Sitemap 전체메뉴 */
#sitemap .btnMenu { position:relative; z-index:99999; }
#sitemap .overlay { position:fixed; top:0; left:0; background-color:white; width:100vw; height:0; z-index:9999; opacity:0; visibility:hidden;
	transition:opacity 0.35s, visibility 0.35s, height 0.35s; overflow:hidden; }
#sitemap .overlay.open { height: 100vh; opacity:1.0; visibility: visible; }
#sitemap .inner-1400 { padding:4rem 0; }
#sitemap .menu { display:grid; grid-template-columns:20% 1fr; margin-bottom:1.5rem; padding-bottom:1.5rem; border-bottom:1px solid #eee;  }
#sitemap .menu .depth1 a { font-weight:800; font-size:1.3rem; }
#sitemap .menu .depth2 { display:flex; gap:3rem; }
#sitemap .menu .depth2 > li > a { font-weight:700; font-size:1.1rem; }
#sitemap .menu .depth2 > li > a:hover { text-decoration:underline; }
#sitemap .menu .depth3 { padding-top:1rem; }
#sitemap .menu .depth3 > li > a { line-height:1.8; color:#999; font-weight:500; }
#sitemap .menu .depth3 > li > a:hover { color:var(--main-color); }


/* Mobile Menu */
.mobile-nav { display:none; }

/* toggle icon */
.toggle2 { position:absolute; right:0; margin-right:20px; }
.toggle:before { content:"\f107"; font:normal normal normal 16px/1 FontAwesome; color:white; }
.toggle2:before { content:"\f105"; font:normal normal normal 16px/1 FontAwesome; color:black; }

/* Hamburger Menu */ 
.hamburger-menu { display:none; text-transform:uppercase; width:50px; height:50px; position:absolute; top:50%; right:2rem; transform:translateY(-50%); 
	z-index:1100; }
@media (max-width:1500px) { 
  .navbar { display:none !important; }
  .hamburger-menu { display:block; text-align:center; width:25px; }  
  .burger-1, 
  .burger-2, 
  .burger-3 {
    display:block; position:absolute; width:22px; height:2px; border-radius:30px; right:0; background:#000; transition:.2s ease;
  }
  .burger-1 { top:14px; }
  .burger-2 { width:15px; top:23px; }
  .burger-3 { top:32px; }
  .burger-1.open, .burger-2.open, .burger-3.open { transition:.2s ease; transform-origin:50% 50%; background-color:white !important; }
  .burger-1.open { top:25px; width:23px; transform:rotate(45deg); }
  .burger-2.open { opacity:0; }
  .burger-3.open { top:25px; width:23px; transform:rotate(-45deg); }
}

.hamburger-navbar { position: absolute; right:-450px; top: 0; width: 400px; max-width: 80vw; height:100vh; background-color: var(--dark-bg); transition: 0.3s; 
	box-shadow: -5px 0 5px rgba(0,0,0,0.3); z-index: 1000; padding:7rem 1rem; overflow-y:auto; }
.hamburger-navbar ul li a { display: block; padding: 15px; color: white; font-size:1rem; }
.hamburger-navbar > ul > li:hover > a { color: var(--main-color) !important; }
.hamburger-navbar .submenu { display: none; list-style: none; margin-left: 15px; }
.hamburger-navbar .submenu ul { margin-top: 10px; margin-bottom: 10px; }
.hamburger-navbar .depth3 { margin-top:0; margin-bottom:0; }
.hamburger-navbar .submenu a { opacity:0.7; }
.hamburger-navbar .depth3 a { opacity:0.4; }
.hamburger-navbar .submenu > li:hover > a { opacity:1; }
.hamburger-navbar .toggle { display:inline-block; transform: translateY(2px) rotate(0deg); transition: transform 0.3s ease; }
.hamburger-navbar .toggle.active { transform: translateY(0px) rotate(-90deg); }
.mobile_logo { max-width:40%; position: absolute; top:2%; left: 2rem; width:100%; }
.mobile_logo img { max-width:100%; }

.mobile-nav .overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.8); z-index:999; }




/* Top Button */
#scrollToTop { display: none; position: fixed; background-color:rgba(0,0,0,0.2); color: #fff; width: 50px; height: 50px; font-size:1.5rem;
	border-radius: 50%;	cursor: pointer; aspect-ratio:1/1; border:none;	z-index: 999; }
#scrollToTop:hover { background-color:rgba(0,0,0,0.5); }


/* Footer */
#footer { padding:3rem 0; text-align:center; border-top:1px solid #eee; }
#footer .logo { display:inline-block; width:13rem; }
#footer .logo img { max-width:100%; height:100%; }
.copyright { max-width:90%; margin:0 auto; display:grid; gap:1rem; padding-top:2.5rem; color:#777; font-size:0.9rem; }
.copyright ul { display:flex; gap:2rem; justify-content:center; align-items:center; }
.ft-nav { max-width:90%; margin:0 auto; display:flex; justify-content:center; align-items:center; padding:2rem 0; flex-wrap:wrap; }
.ft-nav a { font-weight:600; }
.ft-nav li::after { content:'|'; color:#ccc; padding:0 1rem; font-size:0.8rem; }
.ft-nav li:last-child::after { display:none; }





/****************************************************************************************************/
/* Media Query */

@media (max-width: 1500px) {
	.inner-1400 { max-width:95%; }
	#header .header-wrap > .inner-1400 { display:flex; align-items:center; justify-content:space-between; max-width: 90%; }
}

@media (max-width: 1200px) {
	.nav-wrap.pc-version { display:none; }
	.mobile-nav { display:block; }

	#header { background-color:transparent; position:fixed; z-index:99999; }
	.header-wrap { background-color:rgba(255,255,255,0.9); }
	#header .topLogo { max-width:initial; }
	#header .hamburger-menu .btnMenu { width:30px; height:30px; }
	#header .hamburger-menu .btnMenu i { width:20px; }
	#header .hamburger-menu .btnMenu i::before, #header .hamburger-menu .btnMenu i::after { width:30px; }
	#header .hamburger-menu .btnMenu i::before { top:-10px; }
	#header .hamburger-menu .btnMenu i::after { top:10px; }
	#header .btnMenu.on { right:0; }
	#header .btnMenu.on i:before { top:50%; transform: rotate(45deg);}
	#header .btnMenu.on i:after { top:50%; transform: rotate(-45deg);}

	/* Buttons */
	.button-wrap { font-size:0.9rem; }

}

@media (max-width: 1024px) {
	.copyright ul { display:block; line-height:1.5; }
}

@media (max-width: 768px) {
	select { height:40px; line-height:40px; }

	.copyright { font-size:0.75rem; padding-top:1rem; }
	.ft-nav { font-size:0.9rem; }
	#footer { padding:1.5rem 0; }
	#footer .logo{width: 40%;}
}

@media (max-width: 480px) {
	.ft-nav { font-size:0.8rem; gap:1rem; }
	.ft-nav li::after { display:none; }
}