﻿@import url('http://fonts.googleapis.com/earlyaccess/nanummyeongjo.css');

@font-face {
 font-family: 'NanumBarunpen';
 src: url(webfont/NanumBarunpen/NanumBarunpenR.eot);
 src: url(webfont/NanumBarunpen/NanumBarunpenR.eot?#iefix) format('embedded-opentype'),
      url(webfont/NanumBarunpen/NanumBarunpenR.woff) format('woff'),
      url(webfont/NanumBarunpen/NanumBarunpenR.ttf) format('truetype');
}
@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: 'NanumBareunGothicUltraLight';
 src: url(webfont/NanumBarunGothicL/NanumBarunGothicWebUltraLight.eot);
 src: url(webfont/NanumBarunGothicL/NanumBarunGothicWebUltraLight.eot?#iefix) format('embedded-opentype'),
      url(webfont/NanumBarunGothicL/NanumBarunGothicWebUltraLight.woff) format('woff'),
      url(webfont/NanumBarunGothicL/NanumBarunGothicWebUltraLight.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumGothicEco';
 src: url(webfont/NanumEco/NanumGothicEco/NanumGothicEco.eot);
 src: url(webfont/NanumEco/NanumGothicEco/NanumGothicEco.eot?#iefix) format('embedded-opentype'),
      url(webfont/NanumEco/NanumGothicEco/NanumGothicEco.woff) format('woff'),
      url(webfont/NanumEco/NanumGothicEco/NanumGothicEco.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumBrush';
 src: url(webfont/NanumBrush/NanumBrush.eot);
 src: url(webfont/NanumBrush/NanumBrush.eot?#iefix) format('embedded-opentype'),
      url(webfont/NanumBrush/NanumBrush.woff) format('woff'),
      url(webfont/NanumBrush/NanumBrush.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumPen';
 src: url(webfont/NanumBrush/NanumPen.eot);
 src: url(webfont/NanumBrush/NanumPen.eot?#iefix) format('embedded-opentype'),
      url(webfont/NanumBrush/NanumPen.woff) format('woff'),
      url(webfont/NanumBrush/NanumPen.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');
}


body * {
    font-family:'NanumBarunGothic';
}

#header { background:#303030; color:#fff; }
#header .header-box { padding:10px 20px; float:left; font-size:14px; }
#header .header-box.active { background:#686463; }
#loginbox { float:right;  }
#loginbox .widget-login { padding-top:10px; }
#loginbox .widget-login a { color:#fff; font-size:14px; }

#gnb-wrap { position:relative; }
#gnb-wrap img { float:left; margin-top:20px; }
#gnb { float: right; padding:30px 0px; margin-left:40px; }
#gnb > li  { float:left; padding:0px 48px; position:relative; }
#gnb > li > a { font-size:20px; color:#333; text-decoration:none; transition:all ease 0.2s; font-family:NanumBarunGothic;}
#gnb > li > a:hover {  color:#4e82e0; border-bottom:2px solid #4e82e0; padding-bottom:3px; transition:all ease 0.2s; }
#gnb > li > a.active { color:#003458; border-bottom:2px solid #003458; padding-bottom:3px; transition:all ease 0.2s; }
#gnb > li > ul { display:none; }
.point { position:absolute; bottom:-33px; left:50%; margin-left:-9px; display:none; }


#subtop img { width:100%; }
#subgnb { border-bottom:1px solid #ddd; padding:17px 0px; }
#subgnb span,
#subgnb a { font-size:14px; color:#777; position:relative; top:3px; }
#subgnb span.active { color:#000; }
#content { padding-top:30px; min-height:600px; padding-bottom:50px;}
#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:600; margin-bottom:30px; }
#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; position:relative; left: 28%; }
#sitemap a { text-decoration:none; }
#sitemap > li { float:left; padding:0px 30px; }
#sitemap > li > a { color:#b7946e; 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 { background:#565656; padding:30px 0px; position:relative; margin-top:-10px; }
#footer .container > div:first-child { display:inline-block; }
#footer .container > p { color:#aaa; position:relative; float: right; right: 20%; font-size: 13px; }

.gnb2 { height:0px; background:#003458; width:100%; position:absolute; top:88px; left:0px; z-index:9999; }

.subtext-wrap { float:left;  padding-top:45px;   display:none; width:220px; }
.subtext { display:inline-block; }
.subtext p { color:#fff; text-align:left;}
.subtext p:first-child { font-size:14px; margin-bottom:0px; display:none; }
.subtext p:nth-child(2) { font-size:36px; font-family:NanumBarunGothic; }
.subtext img { display:block; position:relative; float:none !important; margin:0 auto; }

.subul { float: left; margin-top:30px; width:74%; margin-left:75px; }
.subul > li { float:left; width:170px; margin-right:40px; margin-bottom:40px; }
.subul > li:last-child { margin-right:0px; }
.subul > li > a { font-size:18px; }
.subul > li > a > i { float:right; position:relative; top:3px; }
.subul > li > ul { margin-top:5px; }
.subul > li > ul > li { font-size:13px; transition:all ease 0.3s;height: 29px;margin-top:1px; }
.subul > li > ul > li:hover { background:#188397; }
.subul > li > ul > li > a { padding: 5px 7px;border-bottom: 1px solid #9ED9E7;display: inline-block;overflow: hidden; width: 100%;text-overflow: ellipsis; white-space: nowrap; }
.subul > li > ul > li > a > i { margin-right:5px; position:relative; }

.subul li a {
    color: #fff;
    text-decoration:none;
}

.widget-inner { position:absolute; }

#widget-sermon { top:50px; right:60px; }
#widget-sermon p { color:#fff; }
#widget-sermon p.bdate { font-size:16px;}
#widget-sermon p.btitle { font-size:32px;}
#widget-sermon p.bbible { font-size: 22px; }
#widget-sermon button {  transition:all ease 0.3s; color:#fff; border:1px solid #B7BDBD; color:#FFFFFF; background:#878A8F;  padding:5px 40px; font-size:16px; }

.w0 { top:20px; left:40px; }
.w1 { top:20px; left:40px; }
.w2 { top:15px; left:35px; height:80%; width:77%; }
.w2 hr { border-top:1px solid #fff; margin:0px; width:35px; }

.w0 .wtitle { color:#fff; font-size:26px; margin-bottom:0px;}
.w1 .wtitle { color:#fff; font-size:26px; margin-bottom:0px;}
.weng { color:#fff; font-size:18px; margin-top:0px; margin-bottom:20px; }

.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 .wtitle { color:#fff; font-size:18px; margin-bottom:5px; }
.w2 .wcontent { color:#fff;  font-size:22px; margin-top:20px; margin-bottom:15px; }
.w2 button { border:1px solid #fff; background:none; padding:2px 22px; font-size:16px; color:#fff; transition:all ease 0.3s; }
.w2 button:hover,.w1 button:hover { background:#efefef; color:#333; border-color:#fff; }
.wpager { top:10px; right:25px; position:absolute; }
.wpager i { color: #fff; font-weight: 300; border: 1px solid #fff; padding: 1px 5px; cursor:pointer; }

.w2 table { border:0px; margin:10px 0px 8px; }
.w2 table th { color:#41B8D0; padding-right:5px; padding-bottom:5px; font-size:14px;}
.w2 table td { color:#fff; padding-left:5px;  padding-bottom:5px; font-size:14px;}


.ms2-box-cotnent { text-align:center; padding:15px 0px; }
.ms2bc-title { font-size:38px; font-weight:600; margin-top: 5px; margin-bottom: 5px;}
.ms2bc-subtitle { font-size: 17px; font-weight: bold; }
.ms2bc-desc { color:#7A7A7A; font-size:14px; font-weight:600; }

.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; font-size:28px; padding-top:10px; }
.mm-panel { background:#008DAB !important; }
.mm-title, .mm-listview>li>a, .mm-listview>li>span { color:#fff !important; }
.mm-menu .mm-listview>li .mm-next:after { border-color:#fff !important; }

.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: #4c4c4c; font-weight: bold; font-size:18px; font-family:NanumBarunGothic;  }

.swiper-container { max-height:900px; }

.lnb { padding-right:40px;}
.lnb_title { font-size:30px; border-bottom:1px solid #000; padding-bottom:10px; font-weight:600; font-family:NanumBarunGothic; margin-bottom:0px; }
.sub_depth2 { margin-top:0px; padding-top:0px; }
.sub_depth2 > li { padding: 15px; 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; }
#component2030 img { height:117px; }
.ui-sortable-handle {     
	-ms-touch-action: inherit !important;
  touch-action: inherit !important; 
}


@media(max-width:1030px) {
	#gnb > li{
	  padding: 0px 30px;
	}
	.subul{
		float: right;
    margin-top: 30px;
    width: 74%;
    margin-left: 0px;
	}
	.ms2bc-title{
		font-size:32px;
	}
	.ms2-box-cotnent{
		padding:0 ;
	}
	#widget-sermon{
		top:10px;
	}
	#main-sermon-play{
		margin-top: 15px !important;
	}
	#sitemap{
		left:5%;
	}	
	#footer .container > p{
		right: 8%;
	}
}


@media(max-width:767px) {
    #subtop img { display:none; }
    
    .board-theme .theme-list table td:first-child { display:table-cell !important; }
    .board-theme .theme-list.calendar .datepicker .datepicker--content .datepicker--cell.datepicker--cell-day .schedule { white-space:nowrap; }

    #footer {
        text-align:center;
    }

    #footer .container > p {
        right: 0;
        margin-top: 20px;
    }

    .background_news {
        height: 580px !important;
        padding-top: 165px !important;
        background-size:100%;
    }

    .background_news div {
        margin-left:0px !important;
    }

    .sub06 {
        margin:0px !important;
    }

    #sub01, #sub02 {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }
    
    .width100 {
    	width:92% !important;
    }
    
    #main7 {
    	background-size: 100% 100%;
    	padding-top: 35px !important;	
    }
    
    #main7 #sub01 {
    	margin-bottom: 13px !important;
    }
    
    #main7 #sub02 {
    	margin: 0px 25px 10px 25px !important;
    	font-size:12px !important;
    }
    
    #main7 #sub03 {
    	margin: 0px 40px 15px 40px !important;
    	font-size:12px !important;
    }
    
    #main7 #sub01, #sub02 {
    	margin: 0px 25px 15px 25px !important;
    }
    
    #sub04{
    	margin: 0px 75px 15px 75px !important;
    }
    
    #sub05{
    	font-size:22px !important;
    	text-align: center !important;
    }
    
    #greeting {
    	padding-top: 165px !important;
    	background-size: 100%;
    	height: 300px !important;	
    }
    
    #greeting > div:first-child {
    	font-size:23px !important;
    }
    
    #greeting2 {
    	margin:0px 30px 0px 30px !important
    }
    
    .history-top {
    	height:190px !important;
    }
    
    .history-top #sub02 {
    	letter-spacing:0px !important;
    }
    
    .historytable{
    	font-size:12px !important;
    }
    
    .historytable th{
    	padding: 0px 6px !important;
    }
    
    .historytable th:first-child {
    	width:15% !important;
    }
    
    .historytable th:nth-child(2), .historytable th:nth-child(3) {
    	width:8% !important;	
    }
    
    .worship-top {
    	height: 190px !important;
    }
    
    .worship-top div {
    	letter-spacing:0px !important;
    }
    
    .worshiptable {
    	font-size:13px !important;
    }
    
    .worshiptable td {
    	padding:10px 0px !important;
    }
    
    .academytable {
    	font-size:11px !important;
    }
    
    .academytable td {
    	padding:10px 2px !important;
    }
    
    .academytable tr > td:first-child{
    	width: 16%;
    }
    
    .requirement{
    	width:40%;
    }
    
    .bjcpeople {
    	padding:15px !important;
    	text-align:center;
    }
    
    .bjcpeople div div {
    	width:100% !important;
    }
    
     .nextg-img {
     	padding-right: 15px !important;
    	padding-left: 15px !important;
     }

		 .mission-pic {
		 	padding-right: 15px !important;
    	padding-left: 15px !important;
		 }
    
     .mission-desc {
     	width: 100% !important;
     	padding: 20px 25px 0px 25px !important;
     	height: 245px !important;
     }
     
     .mission-desc br {
     	display:none;
     }
     
     .mission-end {
      padding: 20px 0px 0px 0px !important;
      text-align:center;
     }
     
      .missions {
      	padding:30px !important;
      }
      
      .mission-domestic tr td:first-child {
      	width:12%;
      }
      
      .praise-desc br {
      	display:none;
      }
      
      .praise-img{
      	padding-right: 15px !important;
    		padding-left: 15px !important;
    		margin: 15px 0px 25px 0px !important;
      }
      
      .praise-line {
      	margin:0px !important;
      }
      
      .missionteam {
      	text-align:center;
      }
      
      .yabes{
      	padding:0 !important;
      }
      .chview{
      	padding:0px 8px !important;
      }

}