@import url('http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css');

@font-face {
 font-family: 'NanumSquare';
 src: url(webfont/NanumSquare/NanumSquareR.eot);
 src: url(webfont/NanumSquare/NanumSquareR.eot?#iefix) format('embedded-opentype'),
      url(webfont/NanumSquare/NanumSquareR.woff) format('woff'),
      url(webfont/NanumSquare/NanumSquareR.ttf) format('truetype');
}

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

@font-face {
    font-family: 'yg-jalnan';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_four@1.2/JalnanOTF00.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}


/* common */
body { font-family: 'NanumSquareRound', sans-serif; letter-spacing: .5px; font-size: 16px; }
a, a:hover { text-decoration: none!important; outline: none!important;}
div, p, span {margin: 0; padding: 0; word-break: keep-all;}
.flex { display: flex; align-items: center; }
#loginForm {margin: 3% auto 80px!important;}
#daumRoughmapContainer1644999482573 {width: 100%!important;}
#header { background:#303030; color:#fff; width: 100%; margin: 0 auto; padding: 5px 0;}
#loginbox { float:right;  }
#loginbox .widget-login a {font-family: 'NanumSquareRound'; color:#fff; font-size: 16px; }

#gnb-wrap {
    position: relative;
    width: 100%;
    height: 100px;
    margin: 0 auto;
    border-bottom: 2px solid #172E50; /*padding: 1.5vw 0;*/
}
#gnb-wrap div.container,
#gnb-wrap div.flex {height: inherit; justify-content: space-between;}
#gnb-wrap div a.yotubeBtn {display: inline-block; margin-left: 20px;}
#gnb { }
#gnb > li {padding: 0 0 0 4vw;}
#gnb > li > a { font-size: 1.85rem; font-weight: bold; color:#000; transition: all ease .25s; font-family: 'yg-jalnan';}
#gnb > li > a:hover,
#gnb > li > a.active { font-weight: bold; color: #74C7A9;}
#gnb > li > ul { display:none; }
.point { position:absolute; bottom:-33px; left:50%; margin-left:-9px; display:none; }



#sitemap-wrap { border-top:1px solid #ddd; padding-top:10px; }
#sitemap-wrap  img { float:left; }
#sitemap { float:left; margin-top:50px; padding-bottom:30px; margin-bottom:0px; }
#sitemap a { text-decoration:none; }
#sitemap > li { float:left; padding:0px 30px; }
#sitemap > li > a { color:#739AB9; font-size:18px; font-weight:600; }
#sitemap > li > ul { margin-top:10px;}
#sitemap > li > ul > li { padding:2px 0px;}
#sitemap > li > ul > li > a { color:#777; font-size:15px;  }
#sitemap > li > ul > li > a:hover { color:#739AB9; transition:all ease 0.3s; }
#sitemap > li > ul > li > ul > li { padding-left:10px; }
#sitemap > li > ul > li > ul > li > a { color:#777; font-size:13px; }

footer { overflow: hidden; background: #fff; padding:50px 0px; box-sizing: border-box; position:relative; border-top: 1px solid #eee; }
footer div div.flex {align-items: flex-end; justify-content: space-between;}
footer img {height: 100%;}
footer p { color: #121212; font-weight: bold; font-size: 16px; }
footer .footer-a {justify-content: flex-start; margin-top: 20px; background:;}
footer .footer-a li {margin-right: 10px;}
footer .footer-a li a {transition:all ease-in-out .2s; display: inline-block;}
footer .footer-a li a:hover {transform: translateY(-5px);}

.gnb2 { height:0px; background:#172E50; width:100%; position:absolute; top:100px; left:0px; z-index:9999; }
.gnb2 .flex {
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative;
    top: 30px;
    justify-content: flex-end;
}


/*.subul {margin-top:50px;}*/
.subul > li { margin-left: 25px;}
.subul > li > a {
    font-family: 'yg-jalnan';
    color: white;
    font-size: 1.8rem;
    letter-spacing: 1px;
    margin-right: 20px;
    transition: all .2s ease-in-out;
}
.subul > li > a:hover {color: #97D3C5;} 
.subul > li > a > i { float:right; position:relative; right: 0; top:3px; }
.subul > li > ul { margin-top:5px; }
.subul > li > ul > li { font-size:15px;}
.subul > li > ul > li a:hover { background:#96D3C4; }
.subul > li > ul > li > a {
    color: white; 
    transition: all ease-in-out .2s;
    padding: 5px 7px;
    border-bottom: 1px solid #96D3C4;
    display: inline-block;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: bold;
}
.subul > li > ul > li > a > i { margin-right:5px; position:relative; }


.widget-inner { position:absolute; }

.w1 { top:20px; left:40px; }
.w2 { top:30px; left:50px; color: #fff; }

.w1 .wtitle { color:#000; font-size: 2rem; margin: 0; font-family: 'yg-jalnan'; }
.weng { color:#000; font-size: 1.7rem; margin: 0 0 20px; font-weight: bold; }
.w2 .wtitle { color:#fff; font-size: 3rem; margin: 0; font-family: 'yg-jalnan';}
.w2 .weng  { color: #fff; font-size: 2rem; margin: 0; font-weight: bold; }

.w1 button { border:1px solid #fff; background:none; padding:2px 22px; font-size:16px; color:#fff; transition:all ease 0.3s; }
#widget-sermon button:hover { background:#efefef; color:#333; border-color:#fff; }

.w2 .sermonBox { margin-top:40px;}
.w2 .sermonBox li a { /*display: block; width: 100%;*/ color:#fff; font-family: 'NanumSquareRound';}
.w2 .sermonBox li a p {font-size: 1.8rem;}
.w2 .sermonBox li a .sermon {font-size: 2.4rem; word-break: break-all; font-weight: bold;}
.w2 .sermonBox li a .bible {margin: 0 0 5px; }
.w2 .sermonBox li a img {transition: all .3s ease-in-out;}
.w2 .sermonBox li a img:hover {transform: translateX(20px);}


.i0 { text-align:center; cursor:pointer; }
.i0 img { float:none !important; margin-top:0px !important; }
.i0 p:nth-child(2) { color:#fff; font-size:22px; font-weight:600; margin-top:10px; margin-bottom:10px; }
.i0 p:nth-child(3) { color:#fff; font-size:14px; color:#fff; margin-bottom:15px; }

.header-mobile-gnb { float:right;}
.header-mobile-gnb a { font-size: 2.6rem; color: black; }


.ms2-box { transition:all ease 0.3s; }
.ms2-box.active { border:10px solid #09A4C3 !important; transition:all ease 0.3s; }
.ms2-box.active  .circle span { background:#09A4C3 !important; }
.ms2-shadow { background:rgba(0,0,0,0.45); width:100%; height:100%; display:none; }
.ms2-table { border:0px;  width:100%; display:none; table-layout:fixed; position: absolute; top: 50%; }
.ms2-table td { text-align:center; padding:6px 0px; width:50%; } 
.ms2-table td a { padding:5px; transition:all ease 0.3s; }
.ms2-table td:hover a { background:rgba(54,191,218,0.4);  transition:all ease 0.3s; }
.ms2-table td a { text-decoration:none; color:#fff; font-size:18px; font-family:NanumBarunGothic;  }

.swiper-container { max-height:900px; }

.lnb { padding-right:40px;}
.lnb_title { font-size:2.5rem; border-bottom:1px solid #000; padding-bottom:10px; font-weight:600; margin-bottom:0px; }
.sub_depth2 { margin-top:0px; padding-top:0px; }
.sub_depth2 > li { padding: 15px 10px; border-bottom:1px solid #ddd; transition:all ease 0.3s; }
.sub_depth2 > li.active,
.sub_depth2 > li:hover { background:#f0f0f0; }
.sub_depth2 > li > a { color:#777; font-weight:600;  font-size:16px; text-decoration:none; }
.sub_depth2 > li > i { position:relative; margin-right:10px; cursor:pointer; }
.sub_depth2 > li > i.fa-minus { display:none; }
.sub_depth2 > li:last-child { border-color:#000; }
.sub_depth3 { padding-left:20px; margin-top:10px; display:none; }
.sub_depth3.active { display:block; }
.sub_depth3 li { padding:3px 0px; }
.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; }

.board-theme .theme-list table td { white-space: nowrap; }
.board-theme .theme-list table td:first-child, .board-theme .theme-list table td:last-child { white-space: nowrap; }
.vr_nav_xs {
     position:absolute; left:0px; top:0px; width:100%;  z-index:1;
     border:2px solid #000; border-top:1px solid #aaa; border-bottom-left-radius:15px; border-bottom-right-radius:15px; 
     background:rgba(255,255,255,0.6);

}
.vr_nav_xs table { width:100%; border:0px; table-layout:fixed; }
.vr_nav_xs table td { text-align:center; font-size:14px; padding:8px 0px; line-height:100% }
.vr_nav_xs table td a { color:#000; font-weight:600; text-decoration:none; }

#onlineadmin { float:right; margin-top:10px; margin-right:10px;  }
#onlineadmin a { color:#fff; font-weight:600; font-size:14px; text-decoration:none; }


.dimode-widget.popup .popup-content .each-content { background:#fff !important; border:1px solid #999 !important; }
.content-core { text-align:left !important; padding:15px; }
.content-core p { margin-bottom:15px !important; }

.content-core p span { font-size:16px !important; }
.content-core p:first-child span { font-size:20px !important; }


 /* */
#my-menu {display: none;}
.mm-navbar {border-bottom: none!important;}
.mm-panels > #mm-1 {background:#74C7A9!important; }
.mm-panels > #mm-2,
.mm-panels > #mm-3,
.mm-panels > #mm-4,
.mm-panels > #mm-5,
.mm-panels > #mm-6,
.mm-panels > #mm-7,
.mm-panels > #mm-8,
.mm-panels > #mm-9,
.mm-panels > #mm-10,
.mm-panels > #mm-11,
.mm-panels > #mm-12,
.mm-panels > #mm-13,
.mm-panels > #mm-14,
.mm-panels > #mm-15,
.mm-panels > #mm-16,
.mm-panels > #mm-17,
.mm-panels > #mm-18,
.mm-panels > #mm-19,
.mm-panels > #mm-20,
.mm-panels > #mm-21,
.mm-panels > #mm-22,
.mm-panels > #mm-23,
.mm-panels > #mm-24,
.mm-panels > #mm-25,
.mm-panels > #mm-26,
.mm-panels > #mm-27,
.mm-panels > #mm-28,
.mm-panels > #mm-29,
.mm-panels > #mm-30,
.mm-panels > #mm-31 {background-color:rgba(19, 36, 53, 1)!important; }
.mm-navbar { padding:20px 0px!important; height:inherit!important;}
.mm-navbar a {font-family: 'NanumSquareRound'; font-size:24px; font-weight: bold; color:#fff!important;}
.mm-listview>li>a, .mm-listview>li>span {color:#fff!important; padding:20px 25px!important; font-size: 1.8rem;}
.mm-panels>.mm-panel>.mm-listview { margin:20px 0px!important;}
.mm-btn {top:unset!important;}
.mm-front .mm-menu.mm-offcanvas { background:#00649c!important; }

.footer-btm {margin: 0 auto;}




/* responsive */
@media(max-width:1499px){
  
}

@media(max-width:1199px){
    #gnb > li {padding: 0 0 0 3vw;}
}

@media(max-width: 992px) {
    footer {padding: 20px 0 0;}
    footer div div.flex {flex-direction: column; justify-content: center;}
    footer div div.flex > img , footer .footer-a {text-align: center; margin: 15px auto; justify-content: center;word-break: keep-all;} 
}

@media(max-width:768px){
    #header {padding: 0;}
    #loginbox .widget-login a {font-size: 14px;}
    .widget-login span {margin: 0!important;}

    #gnb-wrap {height: 80px;}
    #gnb-wrap div a.yotubeBtn {margin-left: 5px;}
    .header-a-logo a img {max-width: 195px;}
    
    footer p, footer p a {font-size: 13px; word-break: keep-all;}
    footer .footer-a li {margin-right: 0;}
}