/* 전체공용 */
@import url('https://fonts.googleapis.com/css?family=Nanum+Gothic:400,700,800|Nanum+Myeongjo:400,700,800&display=swap&subset=korean');
* {box-sizing: border-box}
html, body {font-family: 'Nanum Gothic', sans-serif;}
img {margin:0 auto;}
.red {color:##d33341;}
.blue {color:#303c8f;}

/* font */
h1 {font-size:36px; color:#444; font-weight:800;}
h2 {font-size:24px;}
h3 {font-size:20px;}
h4 {font-size:16px; color:#666; font-weight:400;}
h5 {font-size:14px;}
h6 {font-size:12px;}
@media all and (max-width : 1024px){
	.section {width:98%;}
}

@media all and (max-width:480px){
	h1 {font-size:30px;}
	h4 {font-size:15px;}
	h5 {font-size:14px;}
}

/* 메인 */
.main_visual div.bx-wrapper, .main_visual_m div.bx-wrapper {margin:0 auto;}
.main_visual_m {display:none;}

@media all and (min-width:1921px){
	.main_visual-2560 {display:block;}
	.main_visual {display:none;}
}
@media all and (max-width:1920px){
	.main_visual-2560 {display:none;}
	.main_visual {display:block;}
}


@media all and (max-width:834px){
	.main_visual {display:none;}
	.main_visual_m {display:block;}
}
.bg {padding:80px 0;}
.sermon_bg {padding:80px 0px 0px 0px;}
.photo_bg {padding:0px 0px  80px 0px;;}
.gray {background:#eee;}
.image {position:relative; overflow:hidden; background:#4552b0;}
.image::before {position:absolute; content:attr(data-split); top:0; left:0; height:100%; width:100%; background:url('/files/images/info-bg.jpg') no-repeat center 70%; background-size:cover; opacity:0.4}
.clear:after {content:''; display:block; clear:both;}

/* fast button */
.line_button {height:60px; background:#d33341;}
.line_button:before {content:attr(data-split); background:#303c8f; width:50%; height:60px; position:absolute; right:0;}
.fast_button ul li {float:left; line-height:60px; width:50%; position:relative;}
.fast_button ul li a {color:#fff; font-size:16px; display:block;}
.fast_button span:nth-child(2) {position:absolute; right:0; font-size:14px;}
.fast_button .right-move {margin-right:40px;}
.fast_button .left-move {margin-left:40px;}
@media all and (max-width:834px){
	.fast_button ul li {padding:0 20px;}
	.fast_button .right-move {margin-right:0;}
	.fast_button .left-move {margin-left:0;}
	.fast_button span:nth-child(2) {right:20px;}
	.fb-left .right-move {margin-right:5px;}
	
}
@media all and (max-width:480px){
	.fast_button ul li {text-align:center; padding:0;}
	.fast_button span:nth-child(1) {font-weight:400; margin:0;}
	.fast_button span:nth-child(2) {display:none;}
	.bg {padding:50px 0;}
}

/* sermon */
.sermon-title {margin-bottom:40px;}
.sermon-title > li {float:left;}
.sermon-title li h4 {position:relative; top:20px; left:20px;}
.sc-title li {width:33.3333%; padding:15px 0; float:left; border:1px solid #ddd; text-align:center;}
.sc-title li:hover {background:#ff4430; border:1px solid #ddd; cursor:pointer;}
.sc-title li:hover h4 {color:#fff;}
.sc-title li:nth-child(2) {border-left:0; border-right:0;}
.sc-title li.active {background:#d33341;}
.sc-title li.active h4 {color:#fff;}
.tabcontent {display:none; padding:0; -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s;}
.sermon .bboard:after {display:block; content:''; clear:both;}
.sermon .bboard {margin-top:20px;}
.sermon .btext:after {display:block; content:''; clear:both;}
.sermon .bbody ul li:last-child {padding:15px; border-top:1px solid #ddd;}
.sermon .btext {float:left; width:32%; margin-left:2%; border:1px solid #ddd; font-size:16px;}
.sermon .btext:first-child {margin-left:0;}
.sermon span.date {position:relative; display:block; font-size:14px;}
.tabcontent a {display:block;}
.sermon-font {margin:15px 20px;}
.sermon-font h5 {margin-top:10px; color:#aaa; font-weight:400;}
.sermon-font:hover h4 {color:#ff4430;}
.sc-c-plus {width:31%; height:60px; border:1px solid #ddd; text-align:center; line-height:60px; margin:0 auto; margin-top:40px;}
.sc-c-plus:hover {background:#444;}
.sc-c-plus:hover h4 {color:#fff;}
.sermon .btext a {text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:310px; overflow:hidden;}

.photo-list .date {padding-top:5px; font-size:14px;}
.photo-list:hover > li:first-child a:after {content:attr(data-space); position:absolute; width:100%; height:100%; top:0; left:0;background:url('/files/images/add.png')no-repeat center #000; display:block; opacity:0.7;}

@media all and (max-width:1024px){
	.sermon .btext a {width:280px;}
}


@media all and (max-width:834px){
	.sermon .tabcontent > ul > li {width:33.333%; height:360px;}
	.sermon .tabcontent > ul > li:nth-child(2) {margin:0; border-left:0; border-right:0;}
	.sermon-font h5 {position:absolute; bottom:18px;}
	.sc-c-plus {width:50%;}
	.sermon .btext a {width:210px;}
}
@media all and (max-width:480px){
	.sermon .btext {width:100%; margin-left:0; margin-bottom:5%;}
	.sermon-title > li {float:none;}
	.sermon > ul > li > h1, .sermon > ul > li > h4 {text-align:center;}
	.sermon-title li h4 {top:0; left:0;}
	.sc-c-plus {width:100%; margin-top:10px;}
	.sermon .btext:last-child {margin-bottom:0;}
	.sermon .btext a {width:320px;}
}

@media all and (max-width:320px) {
	.sermon .btext a {width:280px;}
}

/* info */
.image-contents li {float:left; width:20%; height:190px; text-align:center; background:rgba(255, 255, 255, 0.1); border:1px solid #fff; border-right:0;}
.image-contents li:first-child {float:right; text-align:right; border:none;}
.image-contents > li:first-child {background:none;}
.image-contents li:nth-child(5) {border:1px solid #fff;}
.image a {display:block; width:100%; height:100%;}
.image a h4 {color:#fff; font-weight:bold; position:relative; top:65%;}
.image a:hover h4 {color:#3da7e4;}
.image .middle-box {background:#fff;}
.ic-icon1{width:100%; height:100%; background:url('/files/images/church.png') center 35% no-repeat;}
.ic-icon1:hover {background:#fff url('/files/images/church_over.png') center 35% no-repeat;}
.ic-icon2{width:100%; height:100%; background:url('/files/images/days.png') center 35% no-repeat;}
.ic-icon2:hover {background:#fff url('/files/images/days_over.png') center 35% no-repeat;}
.ic-icon3{width:100%; height:100%; background:url('/files/images/guide.png') center 35% no-repeat;}
.ic-icon3:hover {background:#fff url('/files/images/guide_over.png') center 35% no-repeat;}
.ic-icon4{width:100%; height:100%; background:url('/files/images/location.png') center 35% no-repeat;}
.ic-icon4:hover {background:#fff url('/files/images/location_over.png') center 35% no-repeat;}
.info-title {text-align:right; background:none; border:none; float:right;}
.info-title h1 {color:#fff; margin-bottom:20px;}
.info-title h4 {line-height:2; color:#fff;}
.info-title ul li {width:14%; height:6px; background:#fff; margin-bottom:30px; float:right;}

@media all and (max-width:834px){
	.image-contents li:first-child {width:100%; height:auto;}
	.image-contents li {width:25%;}
	.info-title h1 {margin-bottom:40px;}
	.info-title br {display:none;}
	.info-title ul li {display:none;}
	.info-title h4 {position:absolute; top:18px; right:100px;}
}
@media all and (max-width:480px){
	.image-contents li:first-child {float:left; width:100%; text-align:center; height:auto; margin-bottom:40px;}
	.info-title h4 {position:relative; top:0; right:0; text-align:center;}
	.info-title h1 {margin-bottom:0;}
	.image-contents li {width:50%;}
}

/* news */
.news > ul > li {float:left; width:40%; height:250px; background:#fff; border:1px solid #ddd;}
.news > ul > li:first-child {width:16%; background:none; border:none;}
.news > ul > li:nth-child(2) {margin:0 2%;}

.en_title {position:relative;}
.en_title li {float:left;}
.en_title li:first-child {margin-top:5px;}
.news h1 {margin-bottom:20px;}
.news h4 {line-height:2;}
.etc_notice {margin:32px;}
.middle-box {width:14%; height:6px; background:#4552b0; margin-bottom:30px;}
.en_title .button {position:absolute; right:0; width:40px; height:40px; border:1px solid #ddd; text-align:center;}
.button h4 {height:100%; line-height:40px;}
.button:hover h4 {background:#303976; color:#fff;}
.etc_notice > li {position:relative;}
.news span.date {right:0; font-size:13px;}
.news .bbody {padding-top:20px;}
.news .btext {padding:12px 0; font-size:14px; border-bottom:1px solid #ddd;}
.news .btext li {text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:290px; overflow:hidden;}
.etc_news .btext:last-child {}

.mbmagazie .btext {padding:12px 0; font-size:14px; border-bottom:1px solid #ddd;}
.mbmagazie span.date {right:30px; font-size:13px;}

@media all and (max-width:1024px){
	.news .btext li {width:250px;}
}

@media all and (max-width:834px){
	.news > ul > li {width:50%; height:auto;}
	.news > ul > li:first-child {width:100%;}
	.news > ul > li:nth-child(2) {margin:0; border-right:0;}
	.news h1 {margin-bottom:40px;}
	.news li.news-title > h4 {position:absolute; top:20px; left:120px;}
	.news li.news-title br {display:none;}
	.news div.middle-box {display:none;}
	.news .btext li {width:230px;}
}
@media all and (max-width:480px){
	.news > ul > li {float:none; width:100%; height:auto; margin-top:30px;}
	.news > ul > li:first-child {width:100%; margin-top:0;}
	.news > ul > li:nth-child(2) {margin:0; margin-top:40px;}
	.news h1 {margin-bottom:5px;}
	.news ul.en_title li {float:left; width:50%;}
	.news li.news-title {text-align:center;}
	.news li.news-title br {display:none;}
	.news div.middle-box {display:none;}
	.news div.button h4 {font-size:16px;}
	.news li.news-title > h4 {position:relative; top:0; left:0; text-align:center;}
	.news .btext li {width:230px;}
}

@media all and (max-width:320px) {
	.news .btext li {width:180px;}
}

/* photo */
.photo-title {margin-bottom:40px;}
.photo-title > li {float:left;}
.photo-title li h4 {position:relative; top:20px; left:20px;}
.pc-title li {float:left; width:33.333333%; text-align:center; padding:15px 0; border: 1px solid #ddd;}
.pc-title li:hover {background:#4552b0; cursor:pointer;}
.pc-title li:hover h4 {color:#fff;}
.pc-title li:nth-child(2) {border-left:0; border-right:0;}
.pc-title li.active {background:#303c8f;}
.pc-title li.active h4 {color:#fff;}
.photo .tabtent {display:none; -webkit-animation: fadeEffect 1s; animation: fadeEffect 1s;}
.pc-contents > ul > li {width:31%; border:1px solid #ddd; position:relative;}
.pc-contents > ul > li:nth-child(2) {margin:0 3.5%;}
.pc-contents > ul > li:hover li.photo-img1::before {opacity:0.3;}
.pc-contents > ul > li:hover li.photo-img2::before {opacity:0.3;}
.pc-contents > ul > li:hover li.photo-img3::before {opacity:0.3;}
.pc-contents > ul > li:hover .photo-hover {opacity:1;}
.pc-contents a {display:block;}
.photo-font {margin:15px 20px;}
.photo-font h5 {margin-top:10px; color:#aaa; font-weight:400;}
.photo-font:hover h4 {color:#4552b0;}
.pc-c-plus {width:31%; height:60px; border:1px solid #ddd; text-align:center; line-height:60px; margin:0 auto; margin-top:40px;}
.pc-c-plus:hover {background:#444;}
.pc-c-plus:hover h4 {color:#fff;}

.photo .bboard:after {display:block; content:''; clear:both;}
.photo .bboard {margin-top:20px;}
.photo .btext:after {display:block; content:''; clear:both;}
.photo .bbody ul li:last-child {padding:15px; border-top:1px solid #ddd;}
.photo .btext {float:left; width:32%; margin-left:2%; border:1px solid #ddd; font-size:16px;}
.photo .btext:first-child {margin-left:0;}
.photo span.date {position:relative; display:block; font-size:14px;}

.photo-list > li:first-child {position:relative; overflow:hidden; height:0; padding-bottom:70%;}
.photo-list > li:first-child > a {position:absolute; width:100%; height:100%;}
.photo-list > li:first-child > a > img {width:100%; height:100%;}
.photo .btext a {text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; width:310px; overflow:hidden;}

@media all and (max-width:1024px){
	.photo .btext a {width:280px;}
}

@media all and (max-width:834px){
	.pc-contents > ul > li {width:33.333%; height:360px;}
	.pc-contents > ul > li:nth-child(2) {margin:0; border-left:0; border-right:0;}
	.photo-font h5 {position:absolute; bottom:18px;}
	.pc-c-plus {width:50%;}
	.photo .btext a {width:210px;}
}
@media all and (max-width:480px){
	.photo > ul > li {float:none;}
	.photo > ul > li > h1, .photo > ul > li > h4 {text-align:center;}
	.photo-title li h4 {top:0; left:0; margin-top:10px;}
	.pc-c-plus {width:100%; margin-top:10px;}
	.photo .btext {width:100%; margin-left:0; margin-bottom:5%;}
	.photo .btext:last-child {margin-bottom:0;}
	.photo .btext a {width:320px;}
}

@media all and (max-width:320px) {
	.photo .btext a {width:280px;}
}

@-webkit-keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}
@keyframes fadeEffect {
  from {opacity: 0;}
  to {opacity: 1;}
}


.padding-wrap {padding-bottom: 56%;}
.padding-wrap .img-wrap img {height: auto;}
.photo-txt .title .subject span {width: 100%;}