@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);
<link href='//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css' rel='stylesheet' type='text/css'>
.spoka * { font-family: 'Spoqa Han Sans', 'Spoqa Han Sans JP', 'Sans-serif'; }
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@100;200;300;400;500;600;700;800;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800;900&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;500;600;700;800&display=swap');

@font-face {
     font-family: 'S-CoreDream-3Light';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-3Light.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
#post_area {
    width: 100%;
    padding: 5px;
    word-spacing: 0pt;
    word-break: break-all;
    font-family: "나눔 고딕","Nanum Gothic","돋움",Dotum, helvetica, sans-serif!important;
}
a.mb {pointer-events: none!important;}
a:hover {text-decoration: none!important;}
/* layout : 전체 영역 */
#wrap { }
#row {}
#header {height: 130px; background-color: #fff; position: absolute; left:0; top:0; width: 100%; position: fixed; z-index: 20;
    border-bottom: 1px solid #eee;}
#banner {margin-top:128px; }
#banner img {width: 100%; display: block; }
#banner2 {margin-top:128px;}
#banner2 img {width: 100%; display: block; }
#contents { }
#contents.main > section {padding: 100px 0;}
#footer {background: rgba(0,0,0,0.8); padding: 30px 0;}
/* container : 가운데 영역 */
.container { max-width: 1176px; margin: 0 auto; }
/* skip */
#skip {position: relative; z-index: 9999; }
#skip a {position: absolute; left: 0; top: -50px; border:1px solid #0093bd; background-color: #fff; display: block; padding: 5px 7px;}
#skip a:focus, #skip a:active {top: 0; }
/* contents layout */
#cont-motivation {
background:
/*url(../img/designbaba/imgs/flt_img1.png) no-repeat 400px -70px,
url(../img/designbaba/imgs/flt_img2.png) no-repeat -170px 0,
url(../img/designbaba/imgs/flt_img4.png) no-repeat 1030px 50px;*/
background-color: #fff;
}
/* 배경색 바꾸기*/
#cont-infor {background:#fff;}
#cont-story { }
#cont-worship {background:#fff; text-align: center;}
#cont-news {background:#EBEBED;}
#cont-gallery { }
#cont-shop { }
#cont-product { }
/* 로고 */
.header-top { }
/* 상단메뉴바 */
.header-wrap {position: relative; width: 100%;}
.header-wrap:hover .header-nav ul li .oned {border-bottom: 1px solid rgba(0,0,0,0.1); }
.header-wrap .header-top {text-align: center; border-bottom: 1px solid rgba(0,0,0,0.1); }
.header-wrap .header-top {height: 84px; }
.header-wrap .header-top h1 {padding: 10px 0 24px 0; z-index:100;}
.header-wrap .header-nav ul {overflow: hidden; z-index: 10;}
.header-wrap .header-nav li {float: left; width: 25%; text-align: center; }
.header-wrap .header-nav li a {line-height: 25px; color: #222; font-size: 22px; padding: 10px; display: block; font-weight: 500;}
/* 상단메뉴바 메인카데고리 oned */
.header-wrap .header-nav ul li:hover .oned {color: #074190  !important; border-bottom: 3px solid #074190  !important;}
/* 상단메뉴바 서브카데고리 변경 twod */
.header-wrap:hover .header-nav .twod {opacity: 0; height: 0; border-bottom-right-radius: 10px; border-bottom-left-radius: 10px; transition:all 0.3s ease-in-out;}
.header-wrap:hover .header-nav:hover .twod {opacity: 1; height: 100%; background-color: #fff;}
.header-wrap:hover .header-nav .twod a {padding: 10px 5px; display: none; font-size: 1.1em; color: #555;}
.header-wrap:hover .header-nav:hover .twod a {animation: load 0.3s forwards; display: block;}
@keyframes load {
0% {transform: translateY(-5px);}
100% {transform: translateY(0px);}
} 
.header-wrap .header-nav li .twod {padding-top: 20px; display: none; padding-bottom: 20px; border: 1px solid #eee;}
.header-wrap .header-nav li:hover .twod {display: block; }
.header-wrap .header-nav li:hover .twod ul li {float:none; width: 100%;}
.header-wrap .header-nav li .twod a {font-size: 15px; color: #333; line-height: 15px; }
.header-wrap .header-nav li .twod a:hover {color: #074190;}
/*.header-wrap .header-nav li .twod a:first-child{border-bottom:0}*/
/* quick: */
.quick {position: absolute; right: 0; top: 25px; text-align: right; padding-top: 5px;}
.quick a {display: inline-block; color: #222; padding: 0 10px 10px; transition: all 0.5s ease; }
.quick a:hover {color:#003e93;}
.quick li {display: inline-block; position: relative;}
.quick li:first-child:before {content:""; width: 1px; height: 10px; background-color: #ccc; position:absolute; right: 0; top: 4px;}
.quick li:last-child:before {width: 0; height: 0;}
.quick .global_nav {padding-top:0px;}
/* twod : old nav
.header-nav {border: 1px solid red;}
.header-nav li .oneD{width:196px; height:50px; display:inline-block; color:#fff; height:50px; line-height:50px; font-size:17px;}
.header-nav li .on .oneD{color:#000; background:url('/common/ko_kr/images/icon/gnb_on_bg.gif') bottom no-repeat;}
.header-nav li .oneD.hover{color:#0068b7; background:url('/common/ko_kr/images/icon/gnb_hover_bg.gif') bottom no-repeat;}
.header-nav li .oneD .twod{z-index:1; padding-top:39px; width:196px; height:264px; box-sizing:border-box}
.header-nav li .oneD .twod a{display:block; font-size:15px; color:#555; margin-bottom:14px;}
.header-nav li .oneD .twod a.on{color:#0068b7}*/
/* banner */
/*
.banner {padding: 115px 50px;height:600px; }
.banner h2 {color: #fff; font-size: 0px; line-height: 55px; font-weight:500; }
.banner p {color: #fff; font-size: 0px; padding: 20px 0; font-weight: 300;}
.banner em {color: #fff; font-size: 0px; display: block;}
.banner .view {color: #fff; font-size: 0px; display: inline-block; margin-top: 50px; border: 0px solid #fff; padding: 12px 42px; transition: all 0.3s ease;}
.banner .view:hover {color: #003e93; font-weight: 500;}
.banner-img1, .banner-img2, .banner-img3 {background-size:contain; background-repeat:no-repeat;background-position:center top;}
.banner-img1 {background-image: url(../img/designbaba/imgs/banner-bg1.jpg);}
.banner-img2 {background-image: url(../img/designbaba/imgs/banner-bg2.jpg);}
.banner-img3 {background-image: url(../img/designbaba/imgs/banner-bg3.jpg);}
*/
/* main-title */

.main-title {width:100%;}
.main-title h2 {position: relative; padding-top: 60px; font-size: 35px; text-align: center; text-transform: uppercase; font-weight: bold; margin-bottom: 60px;}
.main-title h2:before {content:''; width: 40px; height:2px; background-color: #003e93; position: absolute; left:48%; bottom:-10%;}
.main-title .desc {font-size: 18px; color: #767676; text-align: center; margin-bottom: 60px;}

/* main_company */
.main_company {width: 197px; height: 196px;display: inline-block;margin: 0;padding: 0;line-height: 0.1;background-repeat:no-repeat;background-position:top left;border:1px solid #ddd;}
.main_company.greeting {background-image: url(../img/menu04.png);}
.main_company.greeting:hover {background-image: url(../img/menu04.png); background-position:bottom left; transition: 0.5s;}
.main_company.purchase {background-image: url(../img/menu03.png);}
.main_company.purchase:hover {background-image: url(../img/menu03.png); background-position:bottom left; transition: 0.5s;}
.main_company.qna {background-image: url(../img/menu02.png);}
.main_company.qna:hover {background-image: url(../img/menu02.png); background-position:bottom left; transition: 0.5s;}
.main_company.map {background-image: url(../img/menu01.png);}
.main_company.map:hover {background-image: url(../img/menu01.png); background-position:bottom left; transition: 0.5s;}


/* 더보기버튼 */

.business-btn {display:-inline-block; background:#003e93; color:#fff !important; margin:0 auto; margin-top:0px; border:0px solid #003e93; border-radius: 50px;  padding:15px 120px; text-align:center; font-size:18px; line-height: 1;}
.business-btn:hover {background:#666; color:#FFF !important;}

/* cont-motivation */
.motivation {position:relative; text-align: center; margin-bottom: 50px;}
.motivation ul {overflow: hidden; width: 100%; margin: 0 auto; }
.motivation li {float: left; width: 24%; margin-right: 1%; margin-bottom: 15px; text-align: center;}
.motivation li a {display:inline-block; text-align: center; width: 220px; height: 220px; background-color: #fff; border-radius: 50%; border: 1px solid #767676;}
.motivation li:hover a {color: red; transition: all 0.5s ease;}
.motivation li img {width: 70%;padding-top: 30px;}
.motivation li span {display:block; font-size: 18px; }
/*.motivation li.last {margin-right: 0px; }*/
/*.motivation .pimg {position: absolute; left:-360px; bottom: -410px;}*/
/* gallery: */
.gallery {overflow: hidden; padding-bottom: 50px; }
.gallery a {float: left; width: 19%; margin: 0.5%; }
.gallery a img {display: block; width: 100%;}
/* 인포 */
.infor-box {overflow: hidden; margin-bottom: 5%;}
.infor-box .left-video {float: left; width: 62.6%; height: auto;}
.infor-box .right-infor {float: left; width: 37.4%; height: auto; font-size:0;}
/* video 기본설정*/
/*.video {background: url(../img/designbaba/imgs/inquiry_banner.jpg) no-repeat center top;}*/
/*
.video {position:relative; width: 100%;border:0; vertical-align:top; text-align: center;}
.video img {max-width: 100%;}
.video .iframe {position: absolute; width: 100%; height: 100%; border: 0;}
*/
/* 예배 영상 게시판 설정*/
#video-wrap {width:100%; }
#video-wrap embed {width: 854px; height:480px; }
#video-wrap img {display:none;}
#video-wrap h2 {font-size;17px; font-family: "Noto Sans KR", sans-serif; font-weight:normal; color:#333;}
#video-wrap p {font-size;15px; font-family: "Noto Sans KR", sans-serif; font-weight:normal; color:#333;}
/* welcome-box */
.welcome-box {position:relative; overflow: hidden; background-color: #e1e1e1; width: 100%; height: 100%; padding:0.2%;}
.welcome-box .welcome {float: left; background-color: #fff; margin:0.2%; width:49.6%; height:48%; display-block; }
.welcome-box .welcome a:before {content:''; width:100%; height:100%; background-color:rgba(0,0,0,0); position:absolute; left:0; top:0;
transition:all .3s ease-in-out; }
.welcome-box .welcome a:hover:before {background-color:rgba(0,0,0,0.2); }
.welcome a {position:relative; font-size: 20px; font-weight: 400; display: inline-block; width: 100%; padding-top: 56%; padding-bottom: 18%; color: #333; text-align: center;}
.welcome p:hover a {color:#003e93; }
.welcome a i {position: absolute; left:46%; top:65% ; color: #003e93; font-size: 25px;}
.welcome a img { position: absolute; left:34%; top:20% ; margin: 0 auto; text-align: center;}

/* 스토리 */
#cont-story img {width: 100%;}
.story {width: 100%; overflow: hidden; text-align: center;}
.story-blog {float: left; width: 23%; margin: 0 auto; display: inline-block; margin-right: 2.5%; box-shadow: 3px 3px 15px rgba(0,0,0,0.05); vertical-align:top;} /*반응형홈페이지 마진률 % 적용*/
.story-blog.last {margin-right: 0px; }
.story-blog h5 {font-size: 16px; font-weight: bold; color: #222;}
.story-blog .blog-img {position: relative; display: block; color: #fff; overflow:hidden;}
.story-blog .blog-img:after {content: ''; width: 100%; height: 100%; display: block;
position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.0); z-index: 90; transition: all 0.3s ease-in-out;}
.story-blog .blog-img:hover::after {background-color: rgba(0,0,0,0.4);}
.story-blog .blog-img img {display: block; transform: scale(1,1); transition:all 0.3s ease-in-out;}
.story-blog .blog-img:hover img {transform: scale(1.3,1.3);}
.story-blog .blog-img em {opacity: 0; position: absolute; left: 50%; top: 50%; 
transition: all 0.3s ease-in-out; transform: translate(-50%,-50%); z-index: 2; font-size: 0;}
.story-blog .blog-img:hover em {opacity: 1; font-size: 16px;}
.story-blog figcaption {font-size: 14px; line-height: 22px; padding: 20px 0;}
.story-blog .blog-text {padding:25px;}
.story-blog .story-btn {position: relative;}
.story-blog .story-btn {width:100%; border: 1px solid #CCC; font-size: 11px; font-weight: 500; padding:10px 20px; margin: 0 auto;}
.story-blog .story-btn .s-btn:after {content: ''; width: 100%; height: 100%; display: block;
position: absolute; left: 0; top: 0; background-color: rgba(0,0,0,0.0); z-index: 90; transition: all 0.3s ease-in-out;}
.story-blog .story-btn .s-btn:hover::after {background-color: rgba(0,0,0,0.1);}
.story-blog .story-btn span:hover { }
/* 포트폴리오 */
.worship { }
.worship img {
    max-width: 100%;
    border: 1px solid #ddd;
    object-fit: cover;
    width: 280px;
    height: 200px;
    object-position: center;
}

#cont-worship .board_output a:link {font-size: 18px; font-weight: 700;}
.board_output .board_output >tbody>tr > td {margin-bottom: 30px;display: inline-block;width: 25%;}
/*.board_output .board_output >tbody>tr:nth-child(2) > td {margin-bottom: 0;}*/
.worship .thumbnails .box {margin-left: 0; margin-right: 1%; margin-bottom: 1em; width: 24.2%}
.worship .thumbnails .box:nth-child(4n) {margin-right: 0%}

.board_output .board_output >tbody>tr > td:hover a img {opacity: 0.6;}
.board_output .board_output >tbody>tr > td:hover a {color: #003e93;}





/* main-center */
#main-center { }
#main-center table {width: 100%;}
.main-center {overflow: hidden;}
/* news-layout- 공지사항 */
.news {overflow: hidden; padding-bottom: 50px;}
.left-notice {float: left; width: 45%;margin-right: 5%;}
.left-notice h2 {font-size: 25px; font-weight: bold; text-align: center; padding-bottom: 10px;}
.left-notice .board_output {width: 500px; }
.left-notice .board_output tr td tr td{font-size: 14px; color: #888; padding: 10px 10px; border-bottom: 1px solid #e5e5e5; }
.left-notice .board_output .board_output_12_tr { }
.left-notice .board_output a {color: #888 !important; font-size:14px !important; font-family: 'Noto Sans KR',sans-serif !important;}
.left-notice .board_output a:hover {color: #003e93; }
.left-notice .more {text-align: right; }
/* news-layout- 고객센터 */
.right-new {float: left; width: 45%; }
.right-new h2 {font-size: 25px; font-weight: bold; text-align: center; padding-bottom: 10px;}
.right-new .board_output {width: 500px; }
.right-new .board_output tr td tr td{font-size: 14px; color: #888; padding: 10px 10px; border-bottom: 1px solid #e5e5e5; font-family: 'Noto Sans KR',sans-serif !important;}
.right-new .board_output .board_output_12_tr { }
.right-new .board_output a {color: #888 !important; font-size:14px !important; font-family: 'Noto Sans KR',sans-serif !important;}
.right-new .board_output a:hover {color: #003e93; }
.right-new .more {text-align: right; }
/* section Background image */
section {background-size: cover; background-attachment: fixed;}
.main-column-box {padding-bottom: 30px; /*background:url(../img/designbaba/imgs/parallax-bg22.jpg) no-repeat;*/ }
.main-column-box img {width: 100%; }
.main-column-box .main-column {overflow: hidden; }
.main-column-box .main-column .single-div {width: 32%; float: left; margin-right: 2%; padding-bottom: 20px;}
.main-column-box .main-column .single-div:nth-child(3n) {margin-right: 0;}
.main-column-box .main-column .single-div h2 {color: #222; font-size: 20px; font-weight: bold; padding-top: 10px;}
.main-column-box .main-column .single-div p {color: #222; font-size: 14px;}
/* main-portfolio */
#main-portfolio {background:#EBEBED; }
#main-portfolio img{width: 100%; }
/* footer-top */
.footer-top {overflow: hidden;border-bottom: 1px solid #ddd;}
.footer-top .ft-left {float: left; width: 70%; height:60px; line-height: 60px; }
.footer-top .ft-left li {display: inline; padding-right: 15px;}
.footer-top .ft-left li em {color: #a9ccff; }
.footer-top .ft-left li a {font-size: 15px; color: #fff;}
/*sns*/
.footer-top .ft-right {overflow: hidden; float: right; width: 30%; height:60px; line-height: 60px; }
.footer-top .ft-right .sns {float:right; text-align: right;}
.footer-top .ft-right .sns > li {display:inline-block; margin:0 15px;}
.footer-top .ft-right .sns li > a {color:#d0d0d0; font-size:30px;}
.footer-top .ft-right .sns li:hover > a {color:#003e93;}
/* footer-bom */
.footer-bom {overflow: hidden; margin-top: 30px; color: #fff; font-size: 15px; }
.footer-bom .fb-left {overflow: hidden; float: left; width: 70%; text-align: left;}}
.footer-bom .fb-left li {display: inline; padding : 0 9px 0 7px; background: url(../img/bar.gif) no-repeat right 2px}
.footer-bom .fb-left li a {color: #fff;}
.footer-bom .fb-left li:first-child {padding-left: 0;}
.footer-bom .fb-left li:last-child {padding-left: 0;}
.footer-bom .fb-left li.last {padding-left: 0; color: #888;}
.footer-bom .fb-left li.nobar {background: none;}
/* footer-bom -logo */
.footer-bom .fb-left .fb-left-logo { }
.footer-bom .fb-left .fb-left-logo {float: left; width: 20%; padding-top:15px; padding-right:20px; height:100%; }
.footer-bom .fb-left .fb-left-logo img {width:100%; hight:auto;}
.footer-bom .fb-left .fb-left-logo h1 {text-align:center;}
.footer-bom .fb-left .fb-left-address {float: right; width: 80%; height: 100%; padding-left: 50px;}
.footer-bom .fb-left .fb-left-address li.last {padding-top: 10px;}
.footer-bom .fb-left .fb-left-address address {display:inline-bolck;}
.footer-bom .fb-right {float: right; width: 30%; height: 100px; }
.footer-bom .fb-right .family a {
/*    margin-top: 5px;*/
    display: inline-block;
    float: right;
    padding: 15px 20px;
    border: 3px solid #003e93;
    font-size: 16px;
    color: #003e93;
    width: 250px;
    /*background: url(../img/family-icon.png) no-repeat right center*/
    cursor: pointer;
    font-weight: 700 !important;
    outline: none;
    border-radius: 50px;
    text-align: center;
    background: #fff
}
.footer-bom .fb-right .family:hover a {color: #fff; background: #003e93;}

.footer-bom .fb-right select { outline-color:#ededed;}
.footer-bom .fb-right .family option {
    font-size: 15px;
    padding: 15px 20px!important;
    background-color: #003e93;
    color: #fff!important;
}
/*
.footer-bom .fb-right .family option:first-child {
    display: none;
}
*/
button:focus {outline: 5px auto #003e93;}
.top-btn {position: fixed; right: 2%; bottom: 2%; width: 42px; height: 42px; outline: none; cursor: pointer; border: none; background: #484848; display: none; z-index: 20; background-color: rgb(0,0,0,0.5);}
/* NOTE: family */
.fBtnA:after {clear:both; display:block; content:"";}
.fBtnA .familyD {float:left; width:200px; height:60px; position:relative;}
.fBtnA .familyD .famBt {position:relative; width:200px; height:60px; line-height:60px; background:#fff; z-index:100; font-size:15px; color:#555}
.fBtnA .familyD .famBt a {display:block; padding:0 20px; height:60px;border-bottom:1px solid #000; }
.fBtnA .familyD .famBt a.on {padding:0 19px; border-left:1px solid #e1e1e1; border-bottom:1px solid #e1e1e1; border-right:1px solid #e1e1e1; }
.fBtnA .famListA {position:absolute; bottom:59px; height:0; overflow:hidden; width:200px; border:1px solid #d7d7d6; display:none; background:#fff; box-sizing:border-box; padding:20px 10px 10px 10px}
.fBtnA .famListA ul{height:142px; border-bottom:1px solid #e1e1e1; padding-bottom:20px;}
.fBtnA .famListA li{text-align:left; display:inline-block; width:100%; margin-top:7px; padding-left:10px;}
.fBtnA .famListA li:first-child{margin-top:0;}
.fBtnA .famListA li a{display:inline-block; background:#fff; font-size:15px; color:#767676; position:relative;}
.fBtnA .famListA li a:hover{color:#555}
/* slidebar menu : 모바일 좌측메뉴 */
.sidebar { z-index: 1000; position: fixed;top: 0; left: -250px; background: #262626;
width: 250px; height: 100%; transition: .3s;}
.active {left:0;}
.sidebar ul {margin:0; padding: 20px 0; }
.sidebar ul li {list-style: none;}
.sidebar ul li a {padding: 10px 20px; color: #fff; display: block; text-decoration: none; border-bottom: 1px solid rgba(0,0,0,0.2);}
.sidebarbtn {position:absolute;top:1.3em; right:-4.2em; width: 50px; height: 50px;
box-sizing: border-box; cursor: pointer; /*background: #f5f5f5;*/background: #fff; border: none; outline: 5px auto #003e93;display:none;}
.sidebarbtn span {display: block; width: 35px; height: 3px; background: #003e93; position: absolute; top: 24px; right: 9px; transition: .3s;}
.sidebarbtn span:before {content: ''; position: absolute; top: -10px; left: 0;
width: 100%; height: 3px; background: #003e93; transition: .3s;}
.sidebarbtn span:after {content: ''; position: absolute; top: 10px; left: 0;
width: 100%; height: 3px; background: #003e93; transition: .3s;}
.sidebarbtn.toggle span {background: transparent;}
.sidebarbtn.toggle span:before {top:0; transform: rotate(45deg)}
.sidebarbtn.toggle span::after {top:0; transform: rotate(-45deg)}
#wrap:after {top:0; transform: rotate(-45deg)}
#menu {padding: 20px;}
#menu h2 {margin-top: 22px; padding-bottom: 10px; font-size: 16px; color: #fff; border-bottom: 2px solid #003e93;}
#menu h2 .fa.fa-home {color:#d0d0d0; font-size:30px;}
#menu ul {
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
color: #3d4449;
letter-spacing: 0.075em;
list-style: none;
margin-bottom: 0;
padding: 0;
text-transform: uppercase;
}
#menu ul a, #menu ul span {border-bottom: 0;color: #fff; cursor: pointer; display: block; font-size: 13px;padding: 0.625em 0; }
#menu ul a:hover, #menu ul span:hover {color: #003e93; }
#menu ul a.opener, #menu ul span.opener {
-moz-transition: color 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out;
transition: color 0.2s ease-in-out;
text-decoration: none;
-webkit-tap-highlight-color: rgba(255, 255, 255, 0);
position: relative;
}
#menu ul a.opener:before, #menu ul span.opener:before {
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
font-family: FontAwesome;
font-style: normal;
font-weight: normal;
text-transform: none !important;
}
#menu ul a.opener:before, #menu ul span.opener:before {
-moz-transition: color 0.2s ease-in-out, -moz-transform 0.2s ease-in-out;
-webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
-ms-transition: color 0.2s ease-in-out, -ms-transform 0.2s ease-in-out;
transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
color: #9fa3a6;
content: '\f078';
position: absolute;
right: 0;
}
#menu ul a.opener:hover:before, #menu ul span.opener:hover:before {color: #003e93;}
#menu ul a.opener.active + ul, #menu ul span.opener.active + ul {display: block;}
#menu ul a.opener.active:before, #menu ul span.opener.active:before {
-moz-transform: rotate(-180deg);
-webkit-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
transform: rotate(-180deg);
}
#menu > ul > li {border-top: solid 1px rgba(210, 215, 217, 0.75);margin: 0.5em 0 0 0;padding: 0.5em 0 0 0;}
#menu > ul > li > ul {color: #9fa3a6;display: none;margin: 0.5em 0 1.5em 0;padding-left: 1em;}
#menu > ul > li > ul a, #menu > ul > li > ul span {font-size: 0.9em; }
#menu > ul > li > ul > li {margin: 0.125em 0 0 0; padding: 0.125em 0 0 0; }
#menu > ul > li:first-child {border-top: 0; margin-top: 0; padding-top: 0; }





/* sub-banner */
#sub-banner {margin-top:128px; line-height: 1.5; color: #fff; padding-top: 190px; height: 144px; overflow: hidden; }
#sub-banner1 {margin-top:128px; line-height: 1.5; color: #fff; padding-top: 190px; height: 144px; overflow: hidden; background: url(../img/designbaba/imgs/sub_bg1.jpg) no-repeat;}
#sub-banner2 {margin-top:128px; line-height: 1.5; color: #fff; padding-top: 190px; height: 144px; overflow: hidden; background: url(../img/designbaba/imgs/sub_bg2.jpg) no-repeat;}
#sub-banner3 {margin-top:128px; line-height: 1.5; color: #fff; padding-top: 190px; height: 144px; overflow: hidden; background: url(../img/designbaba/imgs/sub_bg3.jpg) no-repeat;}
#sub-banner4 {margin-top:128px; line-height: 1.5; color: #fff; padding-top: 190px; height: 144px; overflow: hidden; background: url(../img/designbaba/imgs/sub_bg3.jpg) no-repeat;}
#sub-banner5 {margin-top:128px; line-height: 1.5; color: #fff; padding-top: 190px; height: 144px; overflow: hidden; background: url(../img/designbaba/imgs/sub_bg6.jpg) no-repeat;}
#sub-banner6 {margin-top:128px; line-height: 1.5; color: #fff; padding-top: 190px; height: 144px; overflow: hidden; background: url(../img/designbaba/imgs/sub_bg7.jpg) no-repeat;}


#sub-banner h2 {font-size: 30px; text-align: center; margin-top:-130px;}
#sub-banner p {font-size: 15px; padding-top:10px; opacity: 0.9; text-align: center; text-shadow:1px -1px 1px #111;}
#sub-banner img {width: 100%; display: block;}

#sub-banner1 h2 {font-size: 30px; text-align: center; margin-top:-130px;}
#sub-banner1 p {font-size: 15px; padding-top:10px; opacity: 0.9; text-align: center;}
#sub-banner1 img {width: 100%; display: block;}

#sub-banner2 h2 {font-size: 30px; text-align: center; margin-top:-130px;}
#sub-banner2 p {font-size: 15px; padding-top:10px; opacity: 0.9; text-align: center;}
#sub-banner2 img {width: 100%; display: block;}

#sub-banner3 h2 {font-size: 30px; text-align: center; margin-top:-130px;}
#sub-banner3 p {font-size: 15px; padding-top:10px;  text-align: center;}
#sub-banner3 img {width: 100%; display: block;}

#sub-banner4 h2 {font-size: 30px; text-align: center; margin-top:-130px;}
#sub-banner4 p {font-size: 15px; padding-top:10px; opacity: 0.9; text-align: center;}
#sub-banner4 img {width: 100%; display: block;}

#sub-banner5 h2 {font-size: 30px; text-align: center; margin-top:-130px;}
#sub-banner5 p {font-size: 15px; padding-top:10px; opacity: 0.9; text-align: center;}
#sub-banner5 img {width: 100%; display: block;}

#sub-banner6 h2 {font-size: 30px; text-align: center; margin-top:-130px;}
#sub-banner6 p {font-size: 15px; padding-top:10px; opacity: 0.9; text-align: center;}
#sub-banner6 img {width: 100%; display: block;}



#sub-banner.ba-bg1 {background: url(../img/designbaba/imgs/sub_bg1.jpg) no-repeat; }
#sub-banner.ba-bg2 {background: url(../img/designbaba/imgs/sub_bg2.jpg) no-repeat; }
#sub-banner.ba-bg3 {background: url(../img/designbaba/imgs/sub_bg3.jpg) no-repeat; }
#sub-banner.ba-bg4 {background: url(../img/designbaba/imgs/sub_bg4.jpg) no-repeat; }
#sub-banner.ba-bg5 {background: url(../img/designbaba/imgs/sub_bg5.jpg) no-repeat; }
#sub-banner.ba-bg6 {background: url(../img/designbaba/imgs/sub_bg6.jpg) no-repeat; }



/* sub-menu */
#sub-menu { border-bottom: 1px solid #e1e1e1; }
.sub-menu {width: 100%; margin: 0 auto;}
.sub-menu .center {margin: 0 auto; text-align:center;
    display: flex;
    justify-content: center;}
/*.sub-menu .center > li {position: relative; display: inline-block;}*/
.sub-menu .center > li a {display:block; width: 165px; font-size: 20px; color: #333; text-align: center; padding: 15px 0;
    font-weight: 500;
    font-family: 'Noto Sans KR';}

.sub-menu.sub-menu03 .center > li a {width: auto; padding: 15px 30px;}

.sub-menu .center > li.active a,.sub-menu .center > li:hover a {
    color: #fff; 
    background-color: #003e93;
}
.header-wrap .header-nav .active > a {
    color: #003e93!important;
    font-weight: 700;
}
/*.sub-menu .center > li:hover a {color: #003e93; border-bottom: 3px solid #003e93; }*/
/*
.sub-menu .center > li:before {content:''; width: 1px; height: 18px; background-color: #e1e1e1; position: absolute; left: 0; top: 15px; }
.sub-menu .center > li:first-child:before {background: none;}
.sub-menu .center.m4 {padding-left: 249px;}
.sub-menu.sub-menu03 .center > li a {
    width: auto;
    padding: 0 25px;
}
*/
.contents .webzine_type2 .obj_value, .contents .webzine_type2 .obj_value .news_title, .contents .webzine_type2 .obj_value a {font-size: 16px!important;}

/* cont-title */
.sub-title {padding: 10px 0 10px 0; text-align: center;}
.sub-title .container {border-bottom: 1px solid #edecec; padding-bottom: 50px;}
.sub-title .ct-box {position: relative; height: 70px; width: 300px; margin: 0 auto; }
.sub-title .ct-box em {display: block; letter-spacing: 1px; font-size: 12px; color: #767676; text-transform: uppercase; line-height: 18px;}
.sub-title .ct-box h3 {font-size: 30px; line-height: 43px; font-weight: bold;}
.sub-title .ct-box h4 {font-size: 16px; line-height: 43px; padding-bottom: 10px; text-align: center; color: #767676;}


/* cont-title */
.sub-title2 {padding: 20px 0 40px 0; text-align: center;}
.sub-title2 .container {border-bottom: 0px solid #edecec;}
.sub-title2 .ct-box2 {position: relative; height: 70px; margin: 0 auto; }
.sub-title2 .ct-box2 em {display: block; letter-spacing: 1px; font-size: 12px; color: #767676; text-transform: uppercase; line-height: 18px;}
.sub-title2 .ct-box2 h3 {font-size: 30px; line-height: 43px; font-weight: bold;}
.sub-title2 .ct-box2 h4 {font-size: 16px; line-height: 43px; padding-bottom: 10px; text-align: center; color: #767676;}


/* path */
.path {text-align: right; padding: 20px 0 30px; color: #767676; font-size: 15px; }
.path span {padding-left: 15px; background: url(../img/designbaba/imgs/path_arrow.png) no-repeat 5px 5px; font-size: 0.8rem; text-transform: uppercase;}
.path span:first-child {background: none;}
.path span i {font-size: 1rem;}


/* table */
.table-style1 {width: 100%; border-top: 2px solid #464e6b;}
.table-style1 tr { }
.table-style1 th {border-bottom: 1px solid #c6c6c6; background-color: #f8f8f8; color: #484848; padding: 8px 20px;text-align: center; font-size: 16px;}
.table-style1 td {border-bottom: 1px solid #c6c6c6; padding: 8px 20px; font-size: 16px;}

.map_img iframe {
    width: 100%;
}

.inqire_bg {
    background: url(inqire_bg.jpg) no-repeat right bottom;
    background-size: cover;
    height: 400px;
    padding: 120px 10px 10px 80px;
}
.inqire dt {
    display: inline-block;
/*    padding-right: 10px;*/
}
.inqire dd {display: inline-block;}
.inqire dt p {font-size: 22px;margin-bottom: 0; letter-spacing: -0.05em;}
.inqire h4 a{font-weight: 700;font-size: 36px;
    color: #074190!important;}
.inqire h4 a i {font-size: 0.825em;padding:0 5px;}


dl p {
    margin-bottom: 0;
}

.inqire dl:last-child {margin-bottom: 0;padding-bottom: 0;} 


.contents {
    min-height: 400px;
}

textarea.textareainfo {
    width: 100%;
    height: 420px;
    margin-bottom: 80px;
    padding: 50px 30px;
    border-color: #ddd;    font-size: 13px;
}





.contents  .board_gallery img{border: 1px solid #ddd;}
#sub-menu .container {
    max-width: 100%;
}

.contents     .gallery_box > .board_gallery > tbody > tr > td {
        display: inline-block;
        width: 25%;
        margin-bottom: 30px;
    }
.contents  .gallery_box > .board_gallery > tbody > tr > td img {max-width: 100%;}
.contents  .gallery_box > .board_gallery > tbody > tr > td:hover img {opacity: 0.6;}
.contents  .gallery_box .gallery_title {font-size: 18px; color: #333!important; padding: 10px 0 0; display: inline-block;}
.contents  .bbsnewf5:hover .gallery_title {color: #003e93!important;}






    .img-box.pc {display: block;}
.img-box.mobile {display: none;}




/*
@media (max-width: 1400px) {

    
}
*/
/* mediaquery: */
@media (max-width: 1280px) {
    
    .header-wrap .header-top h1 {padding: 0;}
.logo_img {margin:10px auto 0px auto;}
.logo_img img {max-width:50%;}
.main_company {width:50%;background-position:top center;}
.main_company.greeting:hover, .main_company.purchase:hover, .main_company.qna:hover, .main_company.map:hover {background-position:bottom center;}
.main-title h2 {font-size:25px;}
.worship img {}
.sidebarbtn {display:block;}
#row {padding: 0;}
#header {margin:0; height: 80px; }
#header:hover {height: 80px;}
#banner {margin-top:80px; }
#banner img {height: 300px;}
#banner .slideshow .banner_icon {display: none; }
#banner2 {margin-top:80px; height:300px;overflow:hidden;}
#banner2 img {height: 300px;}
.header-wrap .header-top {text-align: center; border-bottom: none;}
.header-nav {display: none;}
.quick {display: none;}
.motivation { }
.motivation li {width: 32%; margin-right: 1%; }
.motivation li a {width: 230px; height: 50px; border-radius: 0; padding-top: 10px;}
.motivation ul li a img {display: none;}
    
    .call-area a {color: #fff;}
    
    
.worship .thumbnails .box {width: 49.5%}
.worship .thumbnails .box:nth-child(2n) {margin-right: 0%}
.infor-box .left-video {width: 100%;
    text-align: center;}
.infor-box .right-infor {
    float: none;
    width: 741px;
    text-align: center;
    max-width: 100%;
    margin: auto;
}
.left-notice h2, .right-new h2 {font-size: 20px;}
/*#cont-infor {margin-top:-70px;}*/
#cont-story img {width:200%;position:relative;left:-50%;}
#cont-story {overflow:hidden;}
.banner-img1 {background-image: url(../img/designbaba/imgs/banner-bg1m.jpg);}
.banner-img2 {background-image: url(../img/designbaba/imgs/banner-bg2m.jpg);}
.banner-img3 {background-image: url(../img/designbaba/imgs/banner-bg3m.jpg);}
    
    
    
    .img-box img {width: 100%;}
    .contents #post_area > img,
    .contents #post_area p > img
    {
        width: auto !important; max-width: 100%!important;
        height: auto !important;
    }
    .sub-menu .center > li a {font-size: 16px;}
    .sub-menu.sub-menu03 .center > li a {padding: 15px 15px;}
    
    
    .gallery_box > .board_gallery > tbody > tr > td {
        display: inline-block;
        width: 50%;
        margin-bottom: 30px;
    }
    
    
    #sub-banner1,#sub-banner2,#sub-banner3,#sub-banner4,#sub-banner5,#sub-banner6 {margin-top: 80px;}
    
    
    
    
    
    
    
    
    
    
    
    
    
}





@media (max-width: 1024px) {
.column-box2 .column {float: none; width: 100%;}
    .inqire_bg {
        height: 350px;
        padding: 100px 10px 10px 50px;
    }

}
@media (max-width: 960px) {
.motivation li {width: 48%; margin-right: 1%; }
.gallery a {width: 32.33333%;}
.gallery a:nth-child(5n) {display: none;}
.motivation {padding: 0px;}
.footer-top { }
.footer-top .ft-left {width: 100%; text-align: center;}
.footer-top .ft-right {width: 100%;text-align: center;}
.footer-top .ft-right .sns {float:none; text-align: center;}
.footer-bom {margin-top: 10px; }
.footer-bom .fb-left {width: 100%;float: inherit; text-align: center; }
    .footer-bom .fb-right {
        float: inherit;
        width: 100%;
        display: block;
        height: auto;
        text-align: center;
    }
.footer-bom .fb-right .family {float: inherit; width: 100%; max-width: 400px;}
.right-new .output .more {display:none;}
.right-video {width: 100%; float: none; margin-top:30px;}
.right-new {width: 100%; float: none; margin-top: 30px; padding:0 15px;}
.left-product {float: none; width:100%;}
.left-notice {float: none; width:100%; padding:0 15px;}
.left-notice table {width:90%; margin: 0 auto;}
.right-new {float: none; width:100%;}
.right-new table {width:90%; margin: 0 auto;}
.story-blog {width: 49%; margin-right: 2%}
.story-blog:nth-child(2n) {margin-right:0;}
#shop-product-list {width: 49%; margin-right:2%;}
#shop-product-list:nth-child(2n) {margin-right:0;}
.business-story-box {width: 49%; margin-right:2%}
.business-story-box:nth-child(2n) {margin-right:0;}
.welcome-box .welcome {float: none; width: 98%; }
.welcome a i {position: absolute; left:70%; top:30% ; }
.infor-box .right-infor a {padding: 6.5% 0; font-size: 0;}
.footer-bom .fb-left .fb-left-logo {display:none;}
.footer-bom .fb-left .fb-left-address {width:100%;}
.welcome a{text-align: left;}
}
@media (max-width: 768px) {
    #cont-worship .board_output .board_output > tbody > tr > td {
        width: 50%;
        display: inline-block;
        margin-bottom: 20px;
    }
    .footer-bom .fb-left .fb-left-address {padding-left: 0;}
.banner {padding: 40px 20px 50px 20px; text-align: center; position: relative; z-index: 10;}
.banner:before {content: ''; width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: -1;}
.banner h2 {font-size: 30px; line-height: 45px; }
.banner p {font-size: 14px; padding: 20px 0;}
.banner .view {margin-top: 20px; background: none; padding: 7px 32px;}
.column-box .column {float: none; width: 100%;}
.column-box .column .table-style2 {border-top: 0;}
.pl00 {padding-left: 0 !important;}
.pl05 {padding-left: 0 !important;}
.pl10 {padding-left: 0 !important;}
.pl15 {padding-left: 0 !important;}
.pl20 {padding-left: 0 !important;}
.pl25 {padding-left: 0 !important;}
.pl30 {padding-left: 0 !important;}
.pl35 {padding-left: 0 !important;}
.pl40 {padding-left: 0 !important;}
.pl45 {padding-left: 0 !important;}
.pl50 {padding-left: 0 !important;}
.pl55 {padding-left: 0 !important;}
.pl60 {padding-left: 0 !important;}
.pr00 {padding-right: 0 !important;}
.pr05 {padding-right: 0 !important;}
.pr10 {padding-right: 0 !important;}
.pr15 {padding-right: 0 !important;}
.pr20 {padding-right: 0 !important;}
.pr25 {padding-right: 0 !important;}
.pr30 {padding-right: 0 !important;}
.pr35 {padding-right: 0 !important;}
.pr40 {padding-right: 0 !important;}
.pr45 {padding-right: 0 !important;}
.pr50 {padding-right: 0 !important;}
.pr55 {padding-right: 0 !important;}
.pr60 {padding-right: 0 !important;}
    
    
    .inqire dt {display: block;}
    #sub-menu {border: none;}
    .sub-menu .center {flex-wrap: wrap;}
    .sub-menu .center > li {margin: 5px;}
    .sub-menu .center > li a,.sub-menu.sub-menu03 .center > li a {border: 1px solid #ddd; padding: 10px 30px;;}
    .contents .gallery_box > .board_gallery > tbody > tr > td {width: 50%;}
    
    
    
    .footer-bom .fb-right .family a {float: inherit;}
    
    
    
    
    
    
    
    
}




@media (max-width: 600px) {
    a.mb {pointer-events: all!important;}

.worship img {height:150px;}
#banner img {height: 200px;}
#banner2 img {height: 200px;}
#main-center .right-notice2 .board_output tr td tr td:last-child {display:none; }
.main-title h2 {font-size:25px;}
.motivation li a {width: 160px; height: 50px;}
.motivation li span {font-size: 14px; padding-top: 4px;}
.gallery a {width: 49%;}
.gallery a:nth-child(5n) {display: none;}
.story-blog {width: 100%; float: none;}
.main-column-box .main-column .single-div {float: none;}
.main-column-box .main-column .single-div {width: 100%; float: none;}
.news {margin-top: -20px;}
.top-btn {display:none !important;}
.business-story-box {width: 100%; margin-right:0; box-shadow: none;}
.worship .thumbnails .box {width: 100%}
.worship .thumbnails .box {margin-right: 0%;%}
.infor-box .left-video {float: none; width: 100%; padding-bottom: 30px; }
.infor-box .right-infor {float: none; width: 100%;text-align: center;}
.infor-box .right-infor a { padding: 37% 0; font-size: 0; }
.welcome-box .welcome {float: left; width: 48%; }
.welcome a i {position: absolute; left:46%; top:65% ;}
#video-wrap embed {width: 480px; height:240px; }
.main-title h2:before {position: absolute; left:43%;}
.welcome a{text-align: center;}
    .footer-bom .fb-left li {
        font-size: 13px!important;
        word-break: keep-all;
    }
    
    #sub-menu {height: auto;}
    
    .gallery_box > .board_gallery > tbody > tr > td {width: 100%;}
    .inqire_bg {
        height: auto;
        padding: 50px 30px 40px;
        background-position: center center;
    }
    .inqire dt p {font-size: 16px;}
    .inqire h4 a {font-size: 25px;}
    
    
    .footer-top .ft-left li {padding: 2px;}
        .footer-top .ft-left li a {font-size: 14px;}
    
    #sub-banner6 h2 {font-size: 1.3em;}
    #sub-banner6 p {font-size: 12px; word-break: keep-all;}

        .sub-menu .center > li {margin: 2px;}
        .sub-menu .center > li a {width: auto; font-size: 14px; }
        .sub-menu.sub-menu03 .center > li a {padding: 10px 10px;;}
    .contents .gallery_box > .board_gallery > tbody > tr > td {width: 100%;}
        #cont-worship .board_output a:link {
        font-size: 13px;
        font-weight: 700;
        letter-spacing: -0.02em;
    }
    .path {display: none;}
    .img-box.mobile {display: block;}
    .img-box.pc {display: none;}
    .webzine_type2 .obj_name {height: auto; background-position: right 15px;}
    .sub-title .container {padding: 20px 0;}
    
        .login_box {padding: 40px 10px!important;}

    
}
@media (max-width: 480px) {
    .table-style1 th,.table-style1 td {font-size: 14px;}
}
@media (max-width: 320px) {
}

/*loading*/
#loading { width: 100%; height: 100%; top: 0px; left: 0px; position: fixed; display: block; opacity: .9; background-color: #fff; z-index: 9999999999999999; text-align: center; } 
#loading-image { position: absolute; top: 50%; left: 50%; z-index: 100;margin-left:-45px; } 
#loading-image span {display: inline-block; padding:10px; background: #fff; margin:0 auto;}
#loading-image span p{font-size: 11px !important;}