@import url('/css/nav.css');

#wrap{width:100%; min-width:1200px; }
#header{position:relative; width:100%; border-bottom:1px solid rgba(0,0,0,0.21); background: #fff;}
.in_head{width:1140px; margin:0 auto; height:92px; line-height:92px;}

.logo{position:relative; float:left; z-index:999; margin:0 0 0 4px; font-size:0;}
.logo img{vertical-align:middle;}

/*top_section*/
#top_section{width:100%; height:36px; line-height:36px; background:#224892;}
#top_section ul{width:1140px; margin:0 auto; font-size:0; text-align:right;}
#top_section li{display:inline-block; margin-left:17px;}
#top_section li a{font-size:13px; color:#fff; letter-spacing:-0.5px;}
#top_section li a:hover{color:#eee;}

/*sec1*/
#sec1{width:100%; padding:43px 0 50px 0; background:url(/image/bg1.jpg) no-repeat; background-size: cover; margin-top:-1px;}
#sec1 .main_vis{width:1140px; margin:0 auto 30px; border-radius:5px;
	box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.27);
	-webkit-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.27);
	-moz-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.27);
	-o-box-shadow: 1px 1px 3px 0px rgba(0, 0, 0, 0.27);
}
#sec1 .main_vis img{border-radius:5px;}

/*in_sec1*/
.in_sec1{width:1140px; margin:0 auto; font-size:0; letter-spacing:-5px;}
.in_sec1 > div{display:inline-block; width:360px; height:189px; border-radius:5px; overflow: hidden; letter-spacing:0;}

.in_sec1 .box1{position:relative; margin-right:30px; z-index:1;
	box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.6);
	-webkit-box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.6);
	-moz-box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.6);
	-o-box-shadow: 1px 1px 2px 0px rgba(0, 0, 0, 0.6);
}
.in_sec1 .box1 div h2{color:#fff; letter-spacing:-0.1px;}
.in_sec1 .box1 div p{color:#ffda5b; letter-spacing:-0.25px;}
.in_sec1 .box1 div a{display:block; width:99px; height:29px; line-height:27px; border-radius:29px; background:#fff; text-align:center; border:1px solid #b9b9b9; font-family:"Malgun Gothic"; font-size:14px; letter-spacing:-0.75px; color:#5b544f;}
.in_sec1 .box1 > img{position:absolute; top:0; right:0; border-radius:5px; z-index:-1;}

/*금주의말씀*/
.in_sec1 .words{background:#0f4472;}
.in_sec1 .words div{margin:27px 0 0 32px;}
.in_sec1 .words div h2{font-size:19px; }
.in_sec1 .words div p{font-size:26px; font-weight:200; margin: 15px 0 23px 0;}
.in_sec1 .words div p span {display:block; width: 42%; text-overflow: ellipsis;  -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.in_sec1 .words div p span + span{font-size:14px; font-weight:500;}

.in_sec1 .words .videobtn{position:absolute; top:50%; right:60px; margin:-13px 0 0 0;}

/*예배시간*/
.in_sec1 .worship{font-family: 'NotoKrDL';}
.in_sec1 .worship div{ position:relative; margin:32px 0 0 36px;}
.in_sec1 .worship div h2 {/*font-family: 'NotoKrDL';  */ font-family: 'GmarketSansBold'; font-size:25px; margin-bottom:20px; letter-spacing:-1px; color:#d80000;}
.in_sec1 .worship div p{font-size:19px; line-height:145%;}
.in_sec1 .worship div a {background:none; border:0; position:absolute; right:36px; top:60px;}
.in_sec1 .worship > img{min-width:360px;}

/*공지사항*/
.in_sec1 .notice{position:relative; background:#fff; border:1px solid #ddd; box-sizing:border-box;
	box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.38);
	-webkit-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.38);
	-moz-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.38);
	-o-box-shadow: 1px 1px 1px 0px rgba(0, 0, 0, 0.38);
}

.in_sec1 .notice a.more{position:absolute; right:22px; top:18px; color:#666; font-size:14px; line-height:14px; letter-spacing:-1px;}
.in_sec1 .notice a.more img{margin:1px 0 0 3px;}

.in_sec1 .notice .tab{font-size:0; font-family:"Malgun Gothic"; border-bottom:2px solid #cfcfcf; line-height: normal; margin:17px 20px; padding-bottom:8px;}
.in_sec1 .notice .tab li{display:inline-block; cursor:pointer; font-size:16px; color:#555; letter-spacing:-1px; margin-right:15px; line-height: 14px; height: 18px;}
.in_sec1 .notice .tab li:hover{color:#0375d5;}
.in_sec1 .notice .tab li.on span{display:block; border-bottom:2px solid #0375d5; color:#0375d5; padding-bottom:12px;}

.in_sec1 .notice_list{margin:0 20px 0 24px;}
.in_sec1 .notice_list li{font-family:"Malgun Gothic"; font-size:13px; background:url(/image/notice_dot.png) no-repeat 0 50%; padding-left:12px; overflow:hidden; margin-bottom:12px; line-height:normal;}
.in_sec1 .notice_list li a{float:left; color:#606060; letter-spacing:-0.5px; display:inline-block; width: 64%; text-overflow: ellipsis;  -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.in_sec1 .notice_list li span{float:right; color:#767676;}
.in_sec1 .notice_list li a:hover{text-decoration:underline; color:#333;}

/*quick*/
#sec2{width:1141px; margin:50px auto;}
.quick{font-size:0; letter-spacing:-5px;}
.quick li{display:inline-block; letter-spacing:0; position: relative; overflow: hidden;  margin-right:43px; border-radius: 5px;}
.quick li:last-child{margin-right:0;}
.quick li div {position: absolute; width: 100%; height: 100%;  text-align: center; z-index: 99; color:#fff;}
.quick li div p{font-size:23px; letter-spacing:-0.1px; margin: 50px 0 15px 0;}
.quick li div span{font-family:"Malgun Gothic"; font-size:13px; letter-spacing:-0.75px; display:block; padding:0 10%;}

.quick li img{width:100%; opacity:1; display:block;
	-webkit-transform:scale(1);
	transform:scale(1);
	-webkit-transition:0.6s;
	transition:0.6s;
}
.quick li:hover img{
	opacity:0.5;
	-webkit-transition: opacity 0.6s;
	transition: opacity 0.6s;
	-webkit-transform:scale(1.3,1.3);
   transform:scale(1.3,1.3);
   -webkit-transition:0.6s;
   transition:0.6s;
   border-radius:5px;
}
.quick li:hover{
   background:rgba(0,0,0,0.7);
   -webkit-transition: background 0.3s;
   -moz-transition: background 0.3s;
   -o-transition: background 0.3s;
   transition: background 0.3s;
   background:#000;
   border-radius:5px;
}

/*photo 앨범*/
#sec3{width:100%; min-height:307px; background:url(/image/bg2.jpg) no-repeat center; background-size:cover;}
.photo{width:1140px; margin:0 auto; overflow:hidden; padding:30px 0;}
.photo .box{float:left; width: 41%; max-width: 462px;}
.photo .box + .box{float:right;}

.photo .box h2{position:relative; font-size:22px; letter-spacing:-0.1px; color:#fff; font-weight:200; line-height:22px; margin-bottom:20px;}
.photo .box h2 a{position:absolute; right:1px; top:0;}

.photo .box ul{overflow:hidden;}
.photo .box li{float:left; width:46.5%; max-width: 214px; margin-right:7%; background:#fff;}
.photo .box li:last-child{margin-right:0;}
.photo .box li span{display:block; margin:6px; height:140px; background-size:cover;	background-repeat:no-repeat; background-position:center;}
.photo .box li p{font-family:"Malgun Gothic"; font-size:14px; letter-spacing:-1px; color:#313131; text-align:center; margin:12px 0; padding:0 15px; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}


/*footer*/
footer{background:#f3f3f3;}
.in_footer{width:1140px; margin:0 auto; padding:45px 0; overflow:hidden;}
.in_footer h3{float:left; margin:2px 30px 0 10px;}
.in_footer address{float:left; line-height:20px; font-family:"Malgun Gothic"; font-size:13px; color:#191f25; opacity:0.56;}
