@charset "utf-8";
/*https://www.cssportal.com/css-formatter/*/
/*
font-family: 'Noto Sans KR', sans-serif;  기본
font-family: 'Noto Serif KR', serif;

font-family: 'Song Myung', serif; 본문 강조
font-family: 'Nanum Brush Script', cursive; 본문 강조
Nato 고딕, 명조.. 300, 400, 500, 700

font-family: 'NanumSquare', sans-serif; } 300 400 700 800   서브 타이틀
font-family: 'NanumSquareRound',sans-serif; Regular(400), Bold(700), Extra Bold(800), Light(300) 지원됩니다.


CSS 코드를 최대한 보고.... Bootstrap으로 대체... 불필요코드 줄이고,
common chbk css 세트
예: 배경화면, 배경패턴, Bootstrap override
;
*/
html{overflow-x: hidden;}html::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}html::-webkit-scrollbar-thumb {background-color: #6159c9;}
body{font-family:'NanumSquareRound',sans-serif;font-weight: 400;}a,a:link,a:hover,a:visited,a:active{text-decoration: none;}
body, a,a:link,a:hover,a:visited,a:active {color: #555555;}
.back-to-top {position: fixed; bottom: 0; right:0; z-index: 2; width:50px; height: 50px; color: #fff!important; line-height: 50px; font-weight:500;text-align: center; display: none; font-family: 'Roboto'; background: #8c5638;}
body.m1_4 .html-body h3{font-weight:700!important;color:#2766D7;padding-top:20px;}
body.m1_4 .html-body table td:first-child{width:200px;}

/*Bootstrap Overwirte*/
.btn{color:white!important;border-radius: 0}
.btn-light{color:#7A7A7A!important;border:1px solid #dddddd;}
.form-control{border-radius: 0}
.input-group-text{border-radius: 0}
.custom-file-label{border-radius: 0}
body.m3_1 .board-list table.table tbody tr th:nth-child(4){display: none;}
body.m3_1 .board-list table.table tbody tr td:nth-child(4){display: none;}
body.m3_1 .boardView ul.view-info li:nth-child(2){display: none;}
body.m2_2 .board-list table.table tbody tr th:nth-child(4){display: none;}
body.m2_2 .board-list table.table tbody tr td:nth-child(4){display: none;}
body.m2_2 .boardView ul.view-info li:nth-child(2){display: none;}
/*-----------------------------------------*/

/*ch Lib overwirte*/
.banner.c-box-7 div{padding-top:5px!important;}
.banner.c-box-7:before{z-index: 2!important}
.banner.c-box-7:after{z-index: 2!important;bottom:-30px!important;}

/*Mobile Menu*/
#mobileNav {position:fixed;width: 300px;top: 0;left:-300px;z-index: 101;overflow: auto;-webkit-overflow-scrolling: touch;}#mobileNav ul{list-style: none;margin:0;padding:0;}#mobileNav .mobile-header {position: relative;padding: 10px;background: #81c341;display: none;height:60px;color:white;}#mobileNav .mobile-header h4 a{color: #fff;font-size:300;}#mobileNav .mobile-header button {color: #fff;}#mobileNav .mobile-header .mobile-close {position: absolute;right: 15px;top: 10px;border: 0;font-size: 28px;color: #fff;background-color: #81C341}#mobileNav .mobile-header .mobile-close i {font-size: 28px;}#mobileNav .mgnb {border-bottom: 1px solid #ccc;border-right: 1px solid #ccc;}#mobileNav .mgnb a {font-weight: 400;display: block;}#mobileNav .mgnb > li {}#mobileNav .mgnb > li > a {background: #fff;border-top: 1px solid #ccc;font-size: 18px;padding: 15px 20px;color: #333333;font-weight: 400;}#mobileNav .mgnb > li:first-child > a {border-top:0;}#mobileNav .mgnb > li.active > a {}#mobileNav .mgnb li > a i{margin-right:5px;color:#767a81;transition:all .2s ease-out 0;-webkit-transition:all .2s ease-out 0;}#mobileNav .mgnb li > ul > li >a i{color:white;}#mobileNav .mgnb li a i.rightico {float:right;margin: 0;}#mobileNav .mgnb li.active > a i.rightico {color:#91cb5a;-webkit-transform: rotate(180deg);-moz-transform: rotate(180deg);-ms-transform: rotate(180deg);-o-transform: rotate(180deg);transform: rotate(180deg);transition: all 0.2s ease-in-out 0s;-webkit-transition: all 0.2s ease-in-out 0s;}#mobileNav .mgnb > li > ul {border-top: 1px solid #596170;}#mobileNav .mgnb > li > ul > li > a {background: #757c89;border-bottom: 1px solid #596170;font-size: 14px;padding: 12px 20px;color: #fff;}#mobileNav .mgnb > li > ul > li > ul > li > a {background: #f5f5f5;border-top: 1px solid #cccccc;padding: 12px 35px;color: #777;font-size: 13px;}#mobileNav .mgnb > li > ul > li > ul > li:first-child > a {border-top: 0;}#mobileNav .mobile-footer {float:left;width:100%;padding: 5px 20px;background: #fff;display: none;}#mobileNav .mobile-footer a {}#mobileNav .mobile-footer ul > {float:left;}#mobileNav .mobile-footer ul > li {float:left;width:25%;text-align: center;border-right:1px solid #B1B1B1;}#mobileNav .mobile-footer ul > li{}#mobileNav .mobile-footer ul > li i{display: block;padding-bottom:10px;font-size:2em;margin:auto;}#mobileNav .mobile-footer ul > li > a {display: block;font-size:.8em;padding: 8px 0;position: relative;text-align: center;color:#757575;text-align: center}.site-overlay{display: none;}body.mobile-active .site-overlay{display: block;position: fixed;top: 0;right: 0;bottom: 0;left: 0;z-index: 100;background-color: rgba(0,0,0,0.7);-webkit-animation: fade 500ms;-moz-animation: fade 500ms;-o-animation: fade 500ms;animation: fade 500ms;}@keyframes fade{0% {opacity: 0;}100% {opacity: 1;}}@-moz-keyframes fade{0% {opacity: 0;}100% {opacity: 1;}}@-webkit-keyframes fade{0% {opacity: 0;}100% {opacity: 1;}}@-o-keyframes fade{0% {opacity: 0;}100% {opacity: 1;}}#navigation .mobile-header, #navigation .mobile-footer{display:none;}

/*Block when pc only - fixed width*/
@media screen and (max-width: 960px){
  .mobile-open{display:block!important;position:fixed;left:0;top:0;color:#fff;background:#4d525a;font-size:28px;border:0;border-right:1px solid #444;line-height:0;height:60px;width:60px;z-index:2}}


/*Website*/
#wrapper{/*float:left;width:100%; fixed 형*/}

.header_top{height:30px;background-color: #443da6}
.header_top .utility a{color:#ffffff;font-size:.8em;padding:0 7px;}

/*헤더 고정*/
#header{-webkit-transition: height 0.4s;-moz-transition: height 0.4s;transition: height 0.4s ease-out;z-index:10;height:120px;position: fixed;background-color: #ffffff;width:100%;}
body.header-fixed #header{ -webkit-box-shadow: 0px -1px 14px 1px rgba(0,0,0,0.44); box-shadow: 0px -1px 14px 1px rgba(0,0,0,0.44);}

#header .mobile-open { display: none;}
#header .menu-section{display: flex;height:100px;justify-content: space-between;align-items: center}
#header .logo {}
#header .logo a img{margin-top:-0px;}
#header .header_menu{width:100%;}
#header .header_menu ul {float:left;width:100%;height:41px;z-index:11;display: flex;justify-content: space-between;list-style: none;}
#header .header_menu ul  > li{position:relative;text-align: center;width:100%;}
#header .header_menu ul.sf-menu  > li > a{font-family: 'NanumSquare', sans-serif;   font-size:20px;width:100%;text-align: center;font-weight:700; display: block;height:68px;padding-top:10px;color:black;}
#header .header_menu ul.sf-menu  > li > a > span {position: relative; padding-bottom: 15px;}
#header .header_menu ul.sf-menu  > li > a > span:before {
    content: '';
    width:100%;
    height: 10px;
    position: absolute;
    left: 0;
    bottom: 0;
    padding:1px;
    line-height: 10px;
    font-size:8px;
    font-weight:500;
    -webkit-transition: -webkit-transform 0.2s;
    transition: transform 0.2s;
    -webkit-transform: scale3d(0, 1, 1);
    transform: scale3d(0, 1, 1);
}
#header .header_menu ul.sf-menu  > li:hover > a > span:before {
    background: #ED751C;
    -webkit-transform: scale3d(1, 1, 1);
    : scale3d(1, 1, 1);
}

/*#header .header_menu li:hover ul{display: block;}*/
#header .header_menu li > ul{position:absolute;padding:0;margin:0;width: 250px; flex-direction:column;overflow: hidden;height:0;}
#header .header_menu li > ul.on{height:auto;}
#header .header_menu li > ul > li {float:left;background-color:#f1f1f1;}
#header .header_menu li > ul > li:hover a{background-color:#cacaca}
#header .header_menu li > ul > li:hover a{color:white;}
#header .header_menu li > ul > li:last-child{padding-bottom:5px;}
#header .header_menu li > ul > li > a{float:left;width:100%;padding:7px 0;font-weight:500;font-family:'Noto Sans KR',sans-serif;color:#5E5E5E;}
#header .header_menu li > ul > li:first-child{padding-top:10px;}
#header .header_menu li > ul > li:last-child{padding-bottom:10px;}

#mainContent {}

.banner, #subContentTop{margin-top:100px;}
.swiper-container {width:100%;height:600px; transition: all .5s ease}
.swiper-container img{height:100%;}
.swiper-pagination-bullet {background: #ffffff;width:13px;height:13px;margin:0 5px;}
.swiper-pagination-bullet-active{background: transparent;border:2px solid white; }
.swiper-button-next, .swiper-button-prev{background-image:url();}
.swiper-button-next:before{content:'\f105'; font-family: "Font Awesome 5 Pro";font-size:3em;margin-left:0px;color:#ffffff;}
.swiper-button-prev:before{content:'\f104'; font-family: "Font Awesome 5 Pro";font-size:3em;margin-left:10px;color:#ffffff;}
.swiper-pagination-bullet{background:#ffffff;opacity:.8;}
.swiper-slide {display: -webkit-box;display: -ms-flexbox;display: -webkit-flex;display: flex;}/* if not here there is resize issue*/
.swiper-slide img{width:100%;height:100%;}

/*제목*/
.mntitle{clear:both;text-align: center;padding-top:40px;padding-bottom:20px}
.mntitle div{display: flex;justify-content: center; border-top:1px #A6A6A6 dotted;width:300px;margin:auto;margin-top:15px;}
.mntitle h1, .mntitle h1 a{margin-bottom:7px;color:black;font-weight:100;}
.mntitle h1{background: url(../images/bg_title_line.png) 50% 90% no-repeat;}
.mntitle h5{padding-top:0px;font-weight:300;}

.block-4 a{position: relative;}
.block-4 a:hover img{opacity:.9;}
.block-4 img{position: relative;}
.block-4 h5{position: absolute;top:-125%;text-align: center;width:100%;color:white;text-align: center}
.block-4 h5 i{display: block;font-size:40px;padding-bottom:15px;}

@media screen and (max-width: 540px) {
  .block-4 h5 i{font-size:30px;padding-bottom:5px;}
}

.block-5 a{}
.block-5 a:hover {opacity:.9;}
.block-5 h5{margin-bottom: 0;font-size:1.2em;font-weight: 700;color:#404040FF;}
.block-5 i{display: block;font-size:40px;padding-bottom:5px;color:#652933;}
.block-5 small{display:block;}

@media screen and (max-width: 540px) {
  .block-5 i{font-size:30px;padding-bottom:5px;}
}

/*아이콘 링크*/
.links.row{margin:0;}
.links.row .col-6{margin:0;padding:0;}

.all-center{
  height:250px;width:100%;height:100%; align-items:center;justify-content:center;background-color:#767a8c; transition: all .2s;padding:5px 10px;border-right:1px solid #838695;border-bottom:1px solid #838695;padding-left:20px;}
.all-center:hover, .all-center:focus{background-color:#6E7283;}
.all-center:hover h5, .all-center:focus h5{color:#6ED8CA;}
.all-center a{display: flex;color:white;font-weight:300;}
.all-center a h5{font-weight:300;font-size:1.1em;}
.all-center i{font-size:25px;margin-top:7px;}

.sermon-box {position: relative; height:160px}
.sermon-box .sermonbg{position: absolute;bottom:-40px;width:100%;height:145px;background-color:#11658a;}
.sermon-box .events{position: absolute;bottom:0;width:100%;height:160px;border:1px solid #dddddd;}
.sermon-box h3{position: absolute;top:0px;left: 0;font-weight:500;;color:#808081;}
.sermon-box .pastor{position: absolute;bottom:-40px;right: 0}
.sermon-box ul li, .sermon-box ul li a{color:white;}
.sermon-box #sermonList{margin-left:20px;margin-top:20px;}
.sermon-box #sermonList .titleTitle{display: none;}
.sermon-box #sermonList .title a{font-size:1.2em;padding-bottom:10px;font-weight: 700}
.sermon-box #sermonList .img{display: none;}
.sermon-box li {color:#CCD6E8!important}


/* Minimal timeline styles (Bootstrap 4 + FA5, no JS) */
.timeline{position:relative;}
.timeline:before{
  content:""; position:absolute; top:0; bottom:0; left:12px; width:2px; background:#e9ecef;
}
.timeline-item{position:relative; padding-left:44px; margin-bottom:1.25rem;}
.timeline-item .dot{
  position:absolute; left:6px; top:.35rem; width:14px; height:14px; background:#fff;
  border:3px solid #007bff; border-radius:50%;
}
.timeline-item .time{font-weight:600;}
.timeline-item .desc{color:#212529;}
@media (min-width:768px){
  .timeline:before{left:20%;}
  .timeline-item{display:flex; align-items:flex-start; padding-left:0;}
  .timeline-item .dot{left:calc(50% - 7px);}
  .timeline-item .time{flex:0 0 20%; text-align:right; padding-right:1.5rem;}
  .timeline-item .desc{flex:0 0 50%; padding-left:1.5rem;}
}

  #staff .staff-img{
    height: 260px; object-fit: cover; width: 100%;
  }
  #staff .staff-card{ transition: transform .2s ease, box-shadow .2s ease; border-radius: .75rem; overflow: hidden; }
  #staff .staff-card:hover{ transform: translateY(-4px); box-shadow: 0 .8rem 1.6rem rgba(0,0,0,.08); }
  #staff .staff-overlay{
    position:absolute; inset:0; background: rgba(0,0,0,.35);
    opacity:0; transition: opacity .2s ease;
  }
  #staff .staff-card:hover .staff-overlay{ opacity:1; }
  #staff .btn-group .btn{ border-radius: 2rem; }

@media screen and (max-width: 540px) {
  ul#sermonList{padding:0;margin:0;list-style: none}
  ul#sermonList {margin-left:5px!important;margin-top:10px!important;}
  ul#sermonList .title a{display:flex; width:210px!important;font-size:.8em!important;padding-bottom:0px!important;}
  h3.ministries{margin-top:70px!important;padding-bottom:0!important;}
}
.churchNews div {color:white}
.churchNews #lastList {display:flex;width:100%;height:30px;margin-top:15px;}
.churchNews #lastList .subject{padding:0px 0px 0px 10px; font-size:16px;margin-top:0px;order:2;}
.churchNews #lastList .subject a{color:white}
.churchNews #lastList .subject a:hover{color:black}
.churchNews #lastList .regdate{order:1;padding:5px;color:black;font-family: 'verdana';font-size:12px;margin-top:0px;border-radius: 20px;background-color: #D7E6F4}
.churchNews h4{font-size:20px;color:white;width:100%;padding:10px;}
.churchNews h4 a{color:white}


.pastorInfo {background:url(../images/pastor.jpg) no-repeat 100% 0;}

@media screen and (max-width: 576px) {
      .pastorInfo .col-sm-8{padding-top:350px;}
}

/*서브페이지*/
#subWrapper{display: flex;background-color: white;}

#subContentTop{position: relative;background-color:#EEF2F7;height:200px;background:url(../images/sub-bg.jpg) no-repeat 50% 0%;background-size: cover;}

#subContentTop h1{border-bottom:3px solid #ffffff;padding-bottom:10px;margin-bottom:10px;font-weight:700;}
#subContentTop h1, #subContentTop h4{color:#ffffff;}

#gnb_container {background-color: #767A8C;display:none;}
#gnb_container.fixed {position: fixed; top:0;z-index: 12; width: 100%;  margin:auto;}
#gnb_container .nav-bread.fixed{position: fixed; top:0;z-index: 13; width: 100%;  margin:auto;}
#gnb_container .breadout{position: relative; height:50px;background-color:#767A8C;}
#gnb_container .bread{position: absolute; padding:5px 0;width:100%;list-style: none;}
#gnb_container .bread>li{float:left;position: relative; padding-top:10px;width:200px;height:50px;}
#gnb_container .bread>li:hover ul{display: block}
#gnb_container .bread li:first-child {width:120px;}
#gnb_container .bread li:nth-child(2) i,.bread li:nth-child(3) i{float:right;margin-top:3px;}
#gnb_container .bread>li>a,.bread>li>span{float:left;color:white;border-right:1px solid #9298AB;padding:0px 25px;width:100%;}
#gnb_container .bread ul.dmenu{position: absolute; width:200px;display: none; overflow: hidden;margin-top:35px;background-color: #F0F0F7;border-left:1px solid #D0D0D0;border-right:1px solid #D0D0D0;z-index: 10;list-style: none;padding-left:0;}
#gnb_container .bread ul.dmenu li{float:left;width:100%;border-bottom:1px solid #D0D0D0;padding:5px 10px;}
#gnb_container .bread ul.dmenu li:hover{background-color:#BFBFBF;}

/*사이드메뉴*/
#sideMenu{float:left;width:350px;min-height:400px}  /*display:none*/
#sideMenu h3{background-color: #7EC9B9;padding:18px;text-align: center;color:white;}
#sideMenu ul{padding:0;margin:0;list-style: none;width:100%;}
#sideMenu ul li{display:flex;border-bottom:1px dotted #dddddd;flex-direction: column}

#sideMenu ul li a{width:100%;height:100%;padding:7px 10px;font-weight:700;}
#sideMenu ul li a:hover{background-color: #dddddd}
#sideMenu ul li ul {padding-left:15px;}
#sideMenu ul li ul li:last-child{border:0px;}

#subContent{width:100%;min-height: 500px}

/*Footer*/
#footer{/*position:absolute;bottom:0;*/width:100%;opacity: 1;background-color:#282828;min-height:150px;margin-top:20px;padding-top:20px;}
#footer .copyright{color:#DEDEDE;padding:5px;}
#footer .copyright .facebook{color:white;}


/*서브페이지*/
/*오시는 길*/
.mapinfo{list-style: none;font-size:1.4em;padding:0;margin:0;}
.mapinfo li{display: flex;padding:10px;}
.mapinfo i{width:30px;}
.mapinfo span{padding:0 20px;}
.mapinfoTitle{width:150px; border-right:1px solid #dddddd;font-weight:700;}
@media screen and (max-width: 576px) {
.mapinfo{font-size:1em}
.mapinfo li{padding:5px 0;}
.mapinfo i{display: none}
.mapinfoTitle{width:70px;border-right:0px solid }
.mapinfo span{padding:0 5px;}
}

/*기존스킨*/
ul.view-info, ul.html-category{list-style: none;margin:0;padding:0;}
.board-header h3{font-size:2em;border-bottom:2px solid #dddddd;padding-bottom:15px;}
.view-content img{width:100%;}
/*Fix형*/
/*.container{max-width:1200px!important;}*/

.board-list .writer{width:200px!important}

/* 반응형*/
@media screen and (max-width: 1200px) {
  .swiper-container {height:400px;}
}
@media screen and (max-width: 992px) {
  .swiper-container {height:300px;}
  .header_top,
  .header_menu{display: none}
  #header, #header .menu-section {height:60px;padding-top:7px;}
  #header .logo{margin:auto;width:auto;padding-left:30px;}
  .all-center h5{font-size:.9em;}
  .all-center svg{display:none;}
  .mntitle h1{font-size:1.9em;}
  .mntitle h5{font-size:1em;}
}

@media screen and (max-width: 768px) {
/*ch Lib overwirte*/
.banner.c-box-7 div{padding-top:0px!important;}
.banner.c-box-7:before{width:0!important;height:0!important;}
.banner.c-box-7:after{width:0!important;height:0!important;}

  .bread .depth1{display: none}
  ul#history li{font-size:1.1em;width:100%;padding:20px 10px;}
}

@media screen and (max-width: 576px) {

  .banner{margin-top:60px;} /*해더고정여부*/
  .swiper-container {height:200px;}
  .swiper-button-next, .swiper-button-prev{display: none;}

  #header .logo a img{margin-top:-20px;margin-left:10px;width:180px; height:50px}
  .container{padding-left:10px!important;padding-right:5px!important;}
  .mntitle{margin-top: 15px;}
  .copyright {padding:0 10px!important;font-size:.9em;}
  #subContentTop{height:170px;}
  #subContent {padding:0!important;}
  #subContentTop h1{font-size:2em;}

  ul#history li{font-size:1em;width:100%;padding:15px 5px;}
  ul#history {margin:0px;margin-top:5px;}


  .deco img{width:100%;padding:20px;}
  .deco h1{font-size:1.7em}


  .sermon .pastor, .disc{display: none;}



  .sermon-out{padding-left:10px;}
  #sermonList .title{font-size:1.5em;}
  #sermonList .title i{margin-left:10px;}
.banner, #subContentTop {
    margin-top: 60px;
}


}