﻿@import url('http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css');

@font-face {
 font-family: 'NanumBarunGothic';
 src: url(webfont/NanumBarunGothic/NanumBarunGothicWeb.eot);
 src: url(webfont/NanumBarunGothic/NanumBarunGothicWeb.eot?#iefix) format('embedded-opentype'),
      url(webfont/NanumBarunGothic/NanumBarunGothicWeb.woff) format('woff'),
      url(webfont/NanumBarunGothic/NanumBarunGothicWeb.ttf) format('truetype');
}

@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: 'NotoSansKR';
    src: url(webfont/NotoSansKR/NotoSansKR-VariableFont_wght.ttf);
}

#bandMessage{bottom: 50%!important;}
#findForm{padding: 145px 0!important;}
#joinForm h4, #memberInfoForm h4 {margin-top: 150px!important;}
#unit3561 #daumRoughmapContainer1605512905563 {width:100% ! important;}
#unit7134 #daumRoughmapContainer1625200590990{ width:100% !important; }
#unit7134 #daumRoughmapContainer1646706222674{ width:100% !important; }
#unit7134 #daumRoughmapContainer1681204377999{ width:100% !important; }
#my-menu {display: none;}

/* font select */
a {text-decoration: none!important; cursor: pointer!important; color: inherit;}
/*body * { font-family:NanumSquare, sans-serif; letter-spacing : -0.5px;}*/
body * { font-family:'NotoSansKR'; letter-spacing : -0.5px;}

/* header */
.header-box-right a {font-size: 0.8rem; font-weight: bold; color: white; padding: 0 5px; display: inline-block; line-height: 95px;}
#gnb-login #header .header-box-right a:hover {transition: all .25s ease; transform: scale(.98);} 

/* gnb */
#gnb-wrap { background: #566062; background: rgba(19, 36, 53, .5);height: 95px; position: fixed; width: 100%; z-index: 999; display: flex; justify-content: space-around;}
#gnb-wrap .container {width: 1480px; position:relative;}
#gnb-login{height:100%;}
#gnb { display: flex; justify-content: space-between; align-content:center; line-height: 95px;}
#gnb li a .caret {border-top: 2px solid #90969F;border-right: 0px solid transparent;border-left: 2px solid #90969F;position: relative;margin: 0;height: 10px;
width: 10px;transform: rotate(225deg);transition: all 0.6s;margin-top: 40px; float: right; top: 0;font-size: 15px; }
#gnb > li  {position:relative; margin-right: 30px;}
#gnb > li:last-child {margin-right: 0;} 
#gnb > li > a {font-size: 1.1rem; font-weight:bold; color: #fff; transition: all ease 0.2s; padding: 0 20px;}
#gnb > li > a:hover > .caret, #gnb > li > a:focus > .caret { transition: all ease 0.2s; border-color:#CB1834;}
#gnb > li > ul { display:none; }
.point { position:absolute; bottom: -91px; left:46%; margin-left:-9px; display:none; opacity:1;}

/* all-menu */
.gnb-all { display: none; position: fixed; z-index: 9999; background-attachment: fixed; background: rgba(0, 0, 0, 0.7); top: 0; left: 0; width: 100%; height: 100%; text-align:center;}
.gnb-all a {color:#fff; text-decoration:none;}
.gnb-all img {margin:80px 0px 50px; max-width:185px; }
.gnb-all .all-wrapper .all-close { color: #fff; cursor: pointer; font-weight: 600; font-size: 5em; float:right; }
.gnb-all .all-wrapper .container a { display: block; color: #fff; }
.gnb-all .all-wrapper .container > ul > li { display: inline-block; vertical-align: top; padding:0px 25px;}
.gnb-all .all-wrapper .container > ul > li > a { margin:0px 0px 18px; font-size: 25px; 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 { color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:20px; padding:6px 0px;}
.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 { color: #fff; display: block; margin-bottom: 9px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size:16px;}

/* gnb2 */
.gnb2{background: rgba(31, 47, 69, .7);width: 100%;position: absolute;left: 0px; z-index: 9999; top: 95px; height: 0;overflow: hidden;}
.gnb2 .wrapper{border-top: 1px solid #8e8e8e;}
.gnb2 .container{padding: 25px 15px; text-align: center;}
.subul > li{margin: 0;display: inline-block;vertical-align: top;text-align: left;padding: 0 20px;}
.subul li a{color: #fff; text-decoration: none;}
.subul > li > a {font-size: 0.9rem; font-weight: 600;position: relative;}
.subul > li > a:hover { font-weight: 600;} 
.subul > li > ul{margin-top: 15px;}
.subul > li > ul > li{ font-size: 1.8rem; transition: all ease 0.3s;line-height: initial; padding: 5px 0px;}
.subul > li > ul > li > a{display: inline-block; overflow: hidden; width: 100%;text-overflow: ellipsis; white-space: nowrap;color: #000;}
.subul > li > ul > li > a:hover , .subul > li > ul > li > a:focus {font-weight: bold;}


/*logo*/
.logo-wrap { line-height: 95px; }
#footer-map{background-color:#DADADA;}
#footer-map #sitemap-wrap { background-color: #FFF; padding:80px 0; display:none; }
#footer-map #sitemap { width: 100%; display: flex; justify-content: space-between; padding: 50px 0; box-sizing: border-box; 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; vertical-align: top; text-align: left; width: 20%;}
#footer-map #sitemap > li > a { color: #356289; font-size:1rem; font-weight:bold;}
#footer-map #sitemap > li > ul { margin-top:15px;}
#footer-map #sitemap > li > ul > li { padding: 3px 0px;}
#footer-map #sitemap > li > ul > li > a { color: #555; font-size: 0.9rem;}
#footer-map #sitemap > li > ul > li > a:hover { color:#102D55; transition:all ease .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 { font-size:17px; padding:3px 0;}

/*sub*/
.subTitle{position: absolute;top: 45%;text-align: center;
width: 100%;border: none;display: block;transform: translate(0, -50%);}
.sub-rel { width: 100%; position: relative; overflow: hidden; }
#subtop{position: relative;height: inherit;width: 100%;top: 0;z-index: 0;background-size: cover !important;
background-position: 50% 50% !important;opacity: 1;aspect-ratio: 1920/303;-webkit-animation: zoomin 9s 1;animation: zoomin 9s 1;}
#subtop img { width:100%; }
.subgnb-home{position: absolute;top: 70%;text-align: center;
width: 100%;border: none;display: block;transform: translate(0, -50%);
text-align: center;font-weight: bold;color: #ffd4d4;}
.subgnb-home a{text-decoration: none;color: #ffd4d4;}
#subgnb .container > div{margin: 10px 0; display: inline-block;}
#subgnb span, #subgnb a { font-size:16px; color:#777; position:relative; top:3px; text-decoration:none;}
#subgnb a.active { color:#6599CB; font-weight:bold; }
#subgnb .dropdown {display: inline-block;border-right: 1px solid #CCCCCC;float: left;}
#subgnb .dropdown:last-child{border:none;}
#subgnb .dropdown .btn { padding:10px 20px; 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; transition:0.3s all ease; font-size:17px;}
#subgnb .caret {border-top: 6px solid #000;border-bottom: 6px solid transparent;border-right: 6px solid transparent;border-left: 6px solid #000;
position: relative;margin: 0;height: 8px;width: 8px;transform: rotate(225deg);transition: all 0.6s;margin-top: -15px;margin-left: 20px;}

#content { padding:80px 0px; }
#content .third-menus { margin:10px 0 42px 0;text-align:center; }
#content .third-menus ul{ display:inline-block; }
#content .third-menus ul li { border: 1px solid #dedede; float:left; margin-left:-1px;}
#content .third-menus ul li a { color: #333;text-decoration: none;padding: 8px 17px;font-size: 12px;min-width: 160px;display: inline-block;text-align: center; }
#content .third-menus ul li.active a { color:#fff; }
#sub_title { font-size: 40px;font-weight: bold;margin: 0;display: inline-block;padding: 0px 0px 20px;width: 100%;float: left;color:#fff;}

.lnb { padding:0px 30px;}
.lnb_title { font-size:30px; border-bottom:1px solid #000; padding:40px 0px; font-weight:600; text-align:center; position:relative;}
.sub-left-triangle { position: absolute; right: 0px; 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:0px; padding-top:0px; }
.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-weight:600;  font-size:17px; text-decoration:none; }
.sub_depth2 li a { color:#777; font-weight:600;  font-size:16px; text-decoration:none; }
.sub_depth2 li i { position:relative; margin:3px 15px 0px 0px; cursor:pointer; float:right; font-size:16px;}
.sub_depth2 li i.fa-minus { display:none; }
.sub_depth2 li:last-child { border-color:#000; }
.sub_depth3 { padding:0px 15px; margin-top:15px; display:none; }
.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-top-ul2 { justify-content: center; align-items: stretch; /*height: 65px;*/ border-bottom: 1px solid #eee;display: flex;}
.sub-top-ul2 li { display:inline-block; word-break: keep-all; margin: 0 .5em;}
.sub-top-ul2 li a {padding: 20px; font-size: 1.8rem; display: block; width: 100%;}
.sub-top-ul2 li:hover { border-bottom:1px solid S; transition:.3s all; }
.sub-top-ul2 li:hover a { color:#2B5DA4; transition:.3s all; }
.sub-top-ul2 li.active { border-bottom: 1px solid #fe7c74; font-weight: bold;}
.sub-top-ul2 li.active a { color:#2B5DA4; }
.sub-top-ul2 li a { color:#333; text-decoration:none; }

/* footer */
.footer-bg{background-color: #000;position:relative;}
.footer-bg iframe{opacity: 0.4;pointer-events: none;}
.footer-bg .footer-img{opacity: 1;width: 100%; height: 100%;}
.footer-bg .footer-date { /*position: absolute;top: 50%;text-align: center;width: 100%;border: none;display: block;transform: translate(0,-50%);*/}
.footer-bg .footer-date {background: no-repeat url(/UserData/bonaembadeun/Layouts/bonaembadeun_Layout/Images/7.footer_bg.png);background-position: center;background-size: cover;padding: 80px 0 45px;}
.footer-bg .footer-date .footer-contacts{margin-top: 20px;text-align:center;}
.footer-bg .footer-date .footer-contacts .footer-title{ font-family: 'FontAwesome';  letter-spacing: 0; font-size: 2.0rem ;font-weight: bold; color: #D91618; margin: 0;line-height:0;display:inline-block;}
.footer-bg .footer-date .footer-contacts .footer-href{margin-bottom: 70px;}
.footer-bg .footer-date .footer-contacts .footer-href .footer-map,
.footer-bg .footer-date .footer-contacts .footer-href .footer-donate {display: inline-block; color: #fff;font-size: 17px;margin: 0 15px;text-decoration:none;}
/* hover img */


.footer-bg .footer-date .footer-contacts .footer-href .footer-map img,
.footer-bg .footer-date .footer-contacts .footer-href .footer-donate img{display: block;margin:0;}
.footer-bg .footer-date .footer-contacts .footer-jusoo{font-size: 1.2rem;color: #fff; letter-spacing: 0px;word-spacing: 5px;margin: 30px 0;line-height: 1.6;}
.footer-contacts .footer-jusoo span:nth-child(5){padding: 5px 90px;border: 1px solid #ddd; margin: 5px;display: inline-block;}
.footer-bg .footer-date .footer-contacts .footer-bottom{font-size: 16px;color: #fff;letter-spacing: 2px;word-spacing: 0;display: inline-block;}
.footer-bg .footer-date .footer-contacts .footer-bottom p{margin:0;}

/* mobile */
#my-menu {display: none;}
.header-mobile-gnb .toggle {color:#fff!important;}
.mm-panels > #mm-1 {background-color:rgba(19, 36, 53, 1)!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-size: 3.3rem; color:#fff!important; line-height: 2; letter-spacing: .125rem;}
.mm-listview>li>a, .mm-listview>li>span { padding:20px 25px 20px 0!important; font-size:17px;}
.mm-panels>.mm-panel>.mm-listview { margin:40% 0px!important;}
.mm-panels>.mm-panel {padding: 0 40px!important;}
.mm-btn {top:unset!important;}

.mm-prev:before {left: 35px!important; top: 35px!important;}
.subul { text-align:center;}
.mm-navbar {border-bottom: none!important;}
.mm-listview li a {font-family: 'NanumSquare'; }
.mm-listview li.mmenu-login {
    display: flex !important;
    justify-content: flex-end;
    /*position: absolute;*/
    /*right: 0;*/
    /*bottom: 0;*/
}

.mm-listview>li:not(.mm-divider):after {left: 0!important;}
.mm-menu .mm-listview>li .mm-next::after {border-color: white!important;}
.mm-menu .mm-btn:after, .mm-menu .mm-btn:before {border-color: white!important;}
.mm-listview>li:not(.mm-divider):after {border-color: rgba(212, 212, 212, .5);}




/*실시간생방송*/
.latest-special {margin-bottom: 30px;margin-left: 18px;}
.latest-special .p4 {font-size:30px;padding-left: 15px;position: relative;color:#000000;top: 15px;}
.latest-special .white-bar {background: #7c8789;width: 1px;height: 22px;display: inline-block;margin: -20px 13px;}
.jubowrapper {display: inline-block;position: relative;top: 13px;font-size: 13px;opacity: 0.8;}
.latest-special .p4 span {
    color: #948e8f;
}

    #component4268 #unit6531 {margin-top:50px;}
    #component1034 #unit7812 {margin-top:50px;}
    #component8476 #unit3569 {margin-top:50px;}
    #component3780 #unit9773 {margin-top:50px;}
    #component1800 #unit5314 {margin-top:50px;}
    #component4809 #unit2915 {margin-top:50px;}
    #component9990 #unit7764 {margin-top:50px;}
    #component6919 #unit5511 {margin-top:50px;}
    /*강동정윤교회 작업진행*/
.footer-table{border: none;display: inline-block;color: #9DA1A4;font-size: 14px;
border: 0px;font-weight: 700;}
.mm-listview{color:#fff!important;}
.footer-table tr td{padding:2px 5px;}

@media (min-width:1280px) {
    .container {width: 1280px;}
}
@media (max-width:1499px) {
	.header-box-right a img{width:45px;}
	#gnb > li > a {font-size: .8rem;padding: 0 10px;}
}

@media (max-width:1199px) {
	.logo-wrap img{width:180px;}
	#gnb > li {margin-right: 15px;}
}

@media (max-width:992px) {
	.logo-wrap{left: 2%;position: relative;}
	#gnb-wrap{justify-content: space-between;align-items: center;}
	.header-mobile-gnb .toggle{padding:10px;font-size:45px;}
	#gnb-wrap #header{position: absolute;transform: translate(0, -50%);top: 50%;right: 10%;}
	#subgnb span, #subgnb a{padding:10px;}
	.sub-top-ul2{flex-wrap: wrap;}
}

@media (max-width:767px) {
	.row{margin:0!important;}
	#gnb-wrap{height:65px;}
	#gnb-wrap #header{right: 20%;}
	.logo-wrap img {width: 145px;}
	#subtop{aspect-ratio: 1920 / 600;}
	#sub_title{font-size:32px;}
	.footer-bg .footer-date{padding:20px 0;}
	.footer-bg .footer-date .footer-contacts .footer-jusoo{margin:20px 0;word-break: keep-all;}
	.footer-bg .footer-date .footer-contacts .footer-href {margin-bottom: 20px;}
	
}

@media (max-width:320px) {
}