@import url('/css/nav.css');

#wrap{width:100%;}
#header{width:100%; min-width:1200px;}
.in_head{width:1200px; margin:0 auto; overflow:hidden;}
.in_head .logo{position: relative; float:left;  width: 182px; margin:18px 0 12px 0; z-index: 99;}
.in_head .info_menu{float:right; line-height:69px; }

.info_menu{font-size:0; letter-spacing:-5px;}
.info_menu li{display:inline-block; margin-left:16px; letter-spacing:0;}
.info_menu li a{font-size:13px; letter-spacing:-0.5px; font-family:"Malgun Gothic"; color:#8f8f8f;}
.info_menu li a:hover{color:#000;}

.info_menu li.search input{border:0; box-sizing:border-box;}
.info_menu li.search button{background:none;}
.info_menu li.search a.btn_search{display:inline-block; padding:7px 17px; line-height:0; border-radius:26px; background:#217666;  color:#fff; margin-top:22px;}
.info_menu li.search a.btn_search span{display:inline-block; margin:6px 0 0 8px;}
.info_menu li.search .box{display:none; line-height:0; margin-top:22px;}
.info_menu li.search .box input{width:180px; padding:0 30px 0 20px; height:28px; border-radius:26px;  background:#217666; color:#fff; font-size:13px;}
.info_menu li.search .box input::placeholder{color:#eee;}
.info_menu li.search .box input::-ms-input-placeholder { color: #eee; }
.info_menu li.search .box input::-webkit-input-placeholder { color: #eee; }
.info_menu li.search .box input::-moz-placeholder { color: #eee; }
.info_menu li.search .box .search_input{ position:relative; display:inline-block; }
.info_menu li.search .box .search_input button{ position:absolute; top:7px; right:14px;}
.info_menu li.search .box .search_close{margin: 8px 0 0 8px;}


#m_main_vis{display:none;}

/*tab 공통*/
.tab_container ul.tab{overflow:hidden;}
.tab_container ul.tab li {float:left; cursor:pointer; text-align:center; background:#fff; color:#22201f; box-sizing: border-box;}
.tab_container ul.tab li:hover,
.tab_container ul.tab li.on {background:#217666; color:#fff;}

/*sec1 설교*/
#sec1{overflow:hidden;}
#sec1 > div{float:left; width:50%; height:237px; overflow:hidden;}
#sec1 .bg1{background:#36a893;}
#sec1 .bg2{background:#e1e1e1;}

#sec1 .bg1 .box{float:right; width: 605px;}
#sec1 .bg2 .box{width: 595px;}

#sec1 .box{position:relative; height:100%; z-index:1;}
#sec1 .box img{position:absolute; bottom:0; z-index:-1;}
#sec1 .box div h2{font-size:28px; letter-spacing:0.5px; line-height: 28px;}
#sec1 .box div.txt1 p{font-size:18px; letter-spacing:0.75px; line-height:24px; margin:10px 0 40px 0;}
#sec1 .box div.txt1 a.more{display:block; width:120px; height:33px; line-height:33px; background:#fff; text-align:center; font-size:14px; color:#2d2d2d; letter-spacing:0.5px;}
#sec1 .box div.txt2 ul{margin-top:14px;}
#sec1 .box div.txt2 li{position:relative; margin-bottom:4px; padding-left:15px;}
#sec1 .box div.txt2 li a{font-size:18px; letter-spacing:0.75px;}
#sec1 .box div.txt2 li:before{content:"-"; position:absolute; left:0;}
#sec1 .box div.txt2 li a:hover{text-decoration:underline;}

#sec1 .bg1 .box img{right:38px;}
#sec1 .bg1 .box div{padding:44px 0 0 0;}
#sec1 .bg1 .box div h2{color:#fff;}

#sec1 .bg1 .box div.txt1 p{color:#fff;}
#sec1 .bg1 .box div.txt2 li{color:#fff; opacity:0.9;}
#sec1 .bg1 .box div.txt2 li a{color:#fff; opacity:0.9;}

#sec1 .bg2 .box img{right:16px;}
#sec1 .bg2 .box div{padding:44px 0 0 55px;}
#sec1 .bg2 .box div h2{color:#000;}

#sec1 .bg2 .box div.txt1 p{color:#515151;}
#sec1 .bg2 .box div.txt2 li{color:#515151;}
#sec1 .bg2 .box div.txt2 li a{color:#515151;}


/*sec2*/
#sec2{width:1200px; margin:0 auto; overflow:hidden;}
#sec2 > div{float:left;}

/*교회소식*/
.notice{position:relative; margin:61px 68px 0 0; width:560px;}
.notice ul.tab{margin-bottom:30px;}
.notice ul.tab li{width:145px; height:43px; line-height:45px; background:#6a7682; color:#fff; letter-spacing:0.5px; font-size:16px; border-right: 1px solid #fff;}
.notice ul.tab li:last-child{border-right:0;}
.notice > a{position:absolute; top:8px; right:0;}
.notice .cont ul{margin:0 4px;}
.notice .cont ul li{background:url(/image/dot.png) no-repeat 0 50%; padding-left:13px;  overflow:hidden; margin-bottom:12px;}
.notice .cont ul li a{float:left; display: inline-block; font-size:15px; color:#6e6e6e; letter-spacing:0.5px; width: 64%; text-overflow: ellipsis;  -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.notice .cont ul li span{float:right; font-size:14px; color:#a9a9a9;}
.notice .cont ul li a:hover{text-decoration:underline; color:#333;}
.notice .more{position:absolute; top:0 ; right:0;}

/*quick*/
.quick{width:571px; height:248px; background:#eaeff5; border:1px solid #d9d9d9; box-sizing:border-box; margin:54px 0 66px 0;}
.quick h2{font-family: 'NanumSquareB'; font-size:24px; color:#383838; letter-spacing:0.75px; line-height:24px; padding:31px 35px 0 30px;}
.quick > p{font-family:"Malgun Gothic"; font-size:16px; color:#616060; letter-spacing:0.5px; margin:14px 0 25px 30px;}
.quick ul{font-size:0; text-align:center; margin:0 16px 0 12px; letter-spacing:-4px;}
.quick ul li{display:inline-block; width:20%; letter-spacing:0;}
.quick ul li:last-child{padding:0;}
.quick ul li img{width: 72px; height: 72px; background: #217666; border-radius: 72px;}
.quick ul li p{font-family: 'NotoKrR'; margin-top:13px; font-size:15px; letter-spacing:0.25px; color:#444;}

/*sec3*/
#sec3{width:100%; height:501px; background:url(/image/photo_bg.jpg) no-repeat; background-size:cover; padding:65px 0 60px 0;}
#sec3 h2{text-align:center; font-size:33px; line-height:30px; color:#fff; letter-spacing:0.75px; text-transform:uppercase;}
#sec3 > p{text-align:center; font-size:18px; letter-spacing:1px; color:#fff; margin:17px 0 37px 0;}

#sec3 ul.tab{width:388px; margin:0 auto 70px;}
#sec3 ul.tab li{width:50%; height:56px; line-height:60px; font-size:18px; letter-spacing:1px;}

#sec3 .photo_list{width:1200px; margin:0 auto;}
#sec3 .photo_list img{border:3px solid #fff; margin-bottom:14px;}
#sec3 .photo_list div.box a{display:block; padding:0 8%;}
#sec3 .photo_list p{font-size:15px; color:#fff; letter-spacing:0.5px; line-height:22px; text-align:center; width: 80%; margin:0 auto; text-overflow: ellipsis;  -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}

/*sec4*/
#sec4{width:1200px; margin:62px auto 69px;}
#sec4 ul{overflow:hidden;}
#sec4 ul li{float:left; width:178px; height:151px; margin-right:26px;}
#sec4 ul li:last-child{margin-right:0;}
#sec4 ul li:nth-child(odd){background:#378e63;}
#sec4 ul li:nth-child(even){background:#32393e;}

#sec4 ul li p{color:#fff; margin: 42px 0 23px 0; font-size:22px; text-align:center; letter-spacing:0.5px; line-height:normal;}
#sec4 ul li a.more{display:block; width:38px; height:38px; line-height:38px; border-radius:38px; text-align:center; margin:0 auto;}
#sec4 ul li a.more img{vertical-align:middle;}
#sec4 ul li a.more2{display:block; text-align: center;}

#sec4 ul li:nth-child(odd) a.more{background:#32393e;}
#sec4 ul li:nth-child(even) a.more{background:#438768;}

/*sec5*/
#sec5{width:100%; background:#f3f6f7; padding:53px 0 60px 0;}
#sec5 ul.main_nav{overflow:hidden; width:1200px; margin:0 auto;}
#sec5 ul.main_nav a{font-family: 'NotoKrR'; display:block;}
#sec5 ul.main_nav > li{float:left; width:14.28%; box-sizing: border-box; padding: 0 0 0 20px;}
#sec5 ul.main_nav > li > a{margin-bottom:25px; font-size:20px; color:#3f3f3f; line-height: 20px;}
#sec5 ul.main_nav li ul li{margin-bottom:15px;}
#sec5 ul.main_nav li ul li a{font-size:16px; color:#5b5b5b; line-height: 15px;}

/*sec6*/
#sec6{width:1200px; margin:55px auto 65px;}
#sec6 ul{overflow:hidden;}
#sec6 li{float:left; width:285px; height:89px; line-height:89px; border:1px solid #e5e8e9; box-sizing:border-box; padding:0 0 0 22px; margin-right:20px; background-size: cover !important;}
#sec6 li a{display:block; width:100%; height:100%; font-size:22px; color:#fff; letter-spacing:0.5px;}
#sec6 li:nth-child(1){background:url(/image/banner_bg1.jpg) no-repeat right;}
#sec6 li:nth-child(2){background:url(/image/banner_bg2.jpg) no-repeat;}
#sec6 li:nth-child(3){background:url(/image/banner_bg3.jpg) no-repeat;}
#sec6 li:nth-child(4){background:url(/image/banner_bg4.jpg) no-repeat 73% 0; margin-right:0;}

/*footer*/
#in_footer{width:100%; background:#e5e8e9; padding:30px 0; text-align:center;}
#in_footer h3{margin:5px 0 20px 0;}
#in_footer address{font-size:13px; color:#6e6e6e; letter-spacing:0.5px; line-height:22px; word-break:keep-all;}

#footer .info_menu{display:none;}
