@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
;
*/
@font-face {
     font-family: 'S-CoreDream-4';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}

html{overflow-x: hidden;}
html::-webkit-scrollbar {width: 10px;background-color: #F5F5F5;}html::-webkit-scrollbar-thumb {background-color: #735B8F;}




body{overflow-x: hidden;font-family:'S-CoreDream-4',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: #735B8F;}


/*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}

.btn-gray { background: #5d6169; color: #fff!important;}
.btn-blue { background: #2699E3; color: #fff!important;}
.btn-red { background: #D31F1F; color: #fff!important;}
.btn-gray2 { background: #f7f7f7; color: #777; border: 1px solid #c9c9c9;}
.btn-green { background: #81c341; color: #fff!important;;}
.btn-black {background: #000; color: #fff!important;;}
.btn-white {background: #fff; color: #2b2b2b; border: 1px solid #cccccc; }


/*-----------------------------------------*/

.view-info{list-style: none;margin: 0;padding: 0}
/*ANIMATE*/
#header .logo a:hover img{animation: bounce;animation-duration: 1s;}

/*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: #735B8F;display: none;height:60px;color:white;}.mobile-header h4{margin-top:10px}#mobileNav .mobile-header h4 a{color: #fff;font-size:300;letter-spacing: -1px;}#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: #735B8F}#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: 20px;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: 16px;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;}

.mobile-footer { float:left;width:100%;padding: 5px 0; background: #fff;display: none;}
.mobile-footer a {}
.mobile-footer ul {display: flex;justify-content: space-between;}
.mobile-footer ul > li {width:100%;}
.mobile-footer ul.three > li:nth-child(2){border-right:1px solid #D0D0D0;border-left:1px solid #D0D0D0;}
.mobile-footer ul.two > li:nth-child(1){border-right:1px solid #D0D0D0}
.mobile-footer ul > li i{display: block;}
.mobile-footer ul > li > a {display: block; font-size:1rem; padding: 8px 0; position: relative;text-align: center;color:#757575;}
.mobile-footer ul > li > a i{font-size:1.5rem;padding-bottom:5px;}


/*Block when pc only - fixed width*/
@media screen and (max-width: 992px){
/*  .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}*/
}

.sm-show{display: none}
/*Website*/
#wrapper{/*float:left;width:100%; fixed 형*/}

#headerWrapper{position: fixed;top: 0;width: 100%;background-color: #2C3E50;-webkit-transition: height 0.4s;-moz-transition: height 0.4s;transition: height 0.4s ease-out;z-index:10;}
#headerWrapper .header_top .utility a{font-size:.8em;padding:5px 7px;color: white}
#headerWrapper.header-action .header_top{display: none;}
#headerWrapper.header-action #header .logo {margin-top: 0px}
#headerWrapper.header-action #header .header_menu ul.sf-menu  > li > a{font-size:18px;width:100%;text-align: center;font-weight:500; display: block;height:56px;padding-top:10px;color:#ffffff;}

#header{}



#header .mobile-open { display: none;}
#header .menu-section{display: flex;justify-content: space-between;align-items: center;}
#header .logo {margin-top: -10px}
#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-size:22px;width:100%;text-align: center;font-weight:500; display: block;height:56px;padding-top:5px;color:#ffffff;}
#header .header_menu ul.sf-menu  > li > a > span {position: relative; padding-bottom: 15px;}
/*#header .header_menu li:hover ul{display: block;}*/
#header .header_menu li > ul{position:absolute;padding:0;margin:0;width: 220px; 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:#f9b746;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:400;color:#3F3F3F;font-size: 1.2em}
#header .header_menu li > ul > li:first-child{padding-top:10px;}
#header .header_menu li > ul > li:last-child{padding-bottom:10px;}
#header .header_menu a.shin{background-color: #2aa894}
/*부탁*/
/*ul.mgnb > li {border-right: 1px solid #c3c05a;height: 35px;}
ul.mgnb > li:last-child {border-right: 0px}
*/
#mainContent {margin-top: 80px}
#subContent{position: relative;}
#subContent .quick-link{top:60px;right:-230px;}

/*배너*/

#mainBanner{position: relative;}
#mainBanner .swiper-slide {display: flex;justify-content: center;}
#mainBanner .swiper-slide video, #mainBanner .swiper-slide img{width:100%;}

@media screen and (max-width: 1200px) {
}
@media screen and (max-width: 992px) {
  #mainBanner .swiper-slide video, #mainBanner .swiper-slide img{width:auto;}
}

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

}
@media screen and (max-width: 576px) {
  #mainBanner .swiper-slide video{height:280px;}
  #mainBanner .swiper-slide img{height:280px;}
}


/*서브페이지*/
#subWrapper{display: flex;background-color: white;padding: 0 10px 30px 10px;}
.boardView, .html-body{font-size: 1.2em;letter-spacing: -1px;}
.boardView p{margin: 0}
.table .writer{display: none;}
#subContent{width:100%;min-height: 500px}

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


/*스킨문제들*/
.view_image img, .imgFiles img {height: auto!important}
.imgFiles{text-align: center;}
.view-video{width: 100%!important}

/*디자인*/
.firstPage section{min-height: 50px;padding: 30px 0}
.firstPage .bgGray{background-color: #F1F2F6;}
.firstPage .bgBlue{background-color: #5dc4f3;color: white}
.firstPage .bgBanner{background: url(../images/bg_vision.jpg) no-repeat;background-size: cover;min-height: 650px;}
.title-mn h1, .title-mn h3{text-align: center;}
.title-mn h1 {font-family: NanumSquareRound;font-size: 2.5em;font-weight: 700;}
.title-mn h3{font-size: 1.5em;padding-top: 10px}
.title-mn hr{margin: 0 auto!important;padding: 0!important;width: 200px;border: 1px solid #dddddd;}

.firstPage .bgBlue .title-mn h3, .firstPage .bgBlue .title-mn h1{color: white}
.profile{font-size: 1.2em}
.profile ul{list-style: none;}
.profile .name{font-size: 1.5em}

.table-worship i{color: red}

/* 반응형*/
@media screen and (max-width: 1200px) {

}
@media screen and (max-width: 992px) {
  #gnb_container .nav-bread{display: none;}
  .header_top,
  .header_menu{display: none}
  #header, #header .menu-section {height:60px;padding-top:7px;}
  #header .logo{margin:auto;width:auto;padding-left:30px;margin-top:-5px;}
}

@media screen and (max-width: 768px) {
  .bread .depth1, .hide-sm{display: none!important}
  #mainContent .container {max-width: 100%!important;padding:0!important;}
  #gnb_container{display: none}
  #headerWrapper{height: 80px}
  .firstPage .bgBanner{min-height: 450px;}
  .firstPage section{padding: 10px 0}
  .title-mn h1 {font-size: 2em;}
  .title-mn h3{font-size: 1.2em;padding-top: 10px}

}

@media screen and (max-width: 576px) {
  #subContentTop{height:170px;}
  #subContent {padding:0!important;}
  #subContentTop h1{font-size:2em;}
  #mainContent .container {max-width: 100%!important;padding:0!important}
}