@charset "utf-8";
/*  
 * 모바일 세로( ~ 375px 이하) 기본디자인
 * 헤더와 푸터는 common-rw.css 에서 정의함
 * hero와 메인박스 세로 나열하고 .inner는 브라우저 100% 로 화면에 따라 가변
 */
 
 
/* 섹션 공통 타이틀 */
.sect-tlt{
	text-align:center;
	font-size:24px;
	word-spacing:1px;
	font-weight:normal;
}

/* ========================================
	section#hero
==========================================*/
#hero{
	height:280px;
	width:100%;
	background:url(../img/mainvis-small.jpg) no-repeat center 0px;
	background-size:cover;
}
#hero .inner{
	width:100%;	
	height:100%;
	position:relative;
}
#hero .sect-tlt{
	display:none;	
}
#hero .hero-list{	
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	text-align:center;
	width:100%;
}
#hero .hero-list li{
	display:block;
	margin:4px 0px;
	text-align:center;
}
#hero .hero-list li a{
	display:block;
	width:240px;
	margin:auto;
	background-color:rgba(255,255,255,0.7);	
	font-size:20px;
	font-weight:400;
	padding:14px 0px;
}
#hero .hero-list .ko-sev{
	position:relative;
	color:#1193af;
	letter-spacing:1px;
}

#hero .hero-list .en-sev{
	display:block;
	text-align:center;
	color:#222;
	font-size:17px;	
}


/* ==============================================================
	section#intro ( .intro-box > .intro-txt > h3, p )
=================================================================*/
#intro{
}
#intro .inner{
	width:100%;
	display:block;
	padding:10px 20px;
}
#intro .sect-tlt{
	display:none;	
}
#intro .introbox{
	width:100%;
	height:190px;
	margin:10px 0px;
	border:1px solid #D2D2D2;
	position:relative;	
}
/* 우리의 믿음 */
#intro .introbox.beliefs a{
	display:block;
	height:100%;
}

#intro .introbox.beliefs a:hover h3{ /* 우리의 믿음 */
	text-decoration:underline;
}

#intro .introbox.beliefs .intro-txt{
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
}
#intro .introbox.beliefs .intro-txt h3{
	font-size:24px;
	font-weight:500;
	text-align:center;
	letter-spacing:1px;
	line-height:1.4;
}
#intro .introbox.beliefs .intro-txt h3 span{
	display:block;
	color:#555;
	font-weight:normal;
	font-size:21px;
	padding-top:4px;
}

/* 예배시간 안내 */
#intro .introbox.time{

}
#intro .introbox.time .intro-txt{
	position:absolute;
	left:0px;
	top:10px;	
	width:100%;
}
#intro .introbox.time .intro-txt h3{
	font-size:21px;
	font-weight:500;
	text-align:center;
	letter-spacing:1px;
	line-height:1.4;
}
#intro .introbox.time .intro-txt h3 span{
	display:block;
	color:#555;
	font-weight:normal;
	font-size:17px;
}
#intro .introbox.time .intro-txt .service-time{
	margin-top:16px;
	font-size:15px;
}
#intro .introbox.time .intro-txt .service-time li{
	display:flex;
	justify-content:space-between;	
	position:relative;
	padding:6px 12px 5px 20px;
}
#intro .introbox.time .intro-txt .service-time li::after{
	content:"";
	display:block;
	width:3px;
	height:3px;
	background:#00333a;
	position:absolute;
	left:13px;
	top:12px;
}
/* 교회위치 */
#intro .introbox.location{
}
#intro .introbox.location .intro-txt{
	position:absolute;
	left:0px;
	top:20px;
	width:100%;
}
#intro .introbox.location .intro-txt h3{
	font-size:21px;
	font-weight:500;
	text-align:center;
	letter-spacing:1px;
	line-height:1.4;
}
#intro .introbox.location .intro-txt h3 span{
	display:block;
	color:#555;
	font-weight:normal;
	font-size:17px;
}
#intro .introbox.location .intro-txt p{
	margin-top:30px;
	text-align:center;
	color:#333;
}
#intro .introbox.location .view-location{
	font-size:13px;
	padding:9px 19px;
	border-radius:150px;
	background:#49566D;
	color:#fff;
	letter-spacing:1px;
}
#intro .introbox.location .view-location:hover{
	background:#354051;
}
#intro .introbox.location a:hover{
	color:#80FFFF;
}
/* =====================================================
	section#video
======================================================*/
#video{
	background:#00333a; 
	position:relative;
}	
#video .inner{
	padding:40px 20px;
	width:100%;
	}
#video h2{
	display:none;	
	}
/* 스와이퍼 플러그인 */
.swiper.video{
	width:100%;
	}
.swiper.video .swiper-wrapper{
	}
.swiper.video .swiper-slide.video-list{
	}
.swiper.video .swiper-pagination{
	bottom:0px !important;
}
.swiper.video .swiper-pagination-bullet.swiper-pagination-bullet {
    background-color: #555;
    opacity: 1;
}
.swiper.video .swiper-pagination-bullet{
	width:14px !important;
	height:14px !important;
	margin:0px 6px !important;
}
.swiper.video .swiper-pagination-bullet.swiper-pagination-bullet-active{
	background:#159eb5;
}
#video .swiper-button-next,
#video .swiper-button-prev
{
	display:none;
}
/* 아이프레임 */
#video .iframe-container{	
	width:100%;
	padding-top:56.25%; 
	position:relative;
}
#video iframe{
	width:100%;	
	height:100%;
	position:absolute;
	left:0px;
	top:0px;
	border:0px;
}
#video .iframe-container .cover{
	width:100%;
	height:100%;
	position:absolute;
	top:0px;
	left:0px;
	background:linear-gradient(rgba(0,0,0,0.6) 40%, rgba(0,0,0,0.3));
	box-shadow:0px 0px 10px 5px rgba(0,0,0,0.4) inset;	
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:24px;
	flex-direction:column;
	padding:4% 3%;
}
#video .iframe-container .cover .video-date{
	color:#d2d2d2;
	font-size:14px;	
}
#video .iframe-container .cover .video-title{
	color:#E9D78D;
	font-size:22px;	
}

#video .iframe-container .cover .video-text{
	font-size:16px;	
	color:#d2d2d2;
}
#video .video-pastor{
	padding:14px 0px 50px;
	font-size:14px;
	font-weight:200;
	cursor:default;
	color:#d2d2d2;	
}
#video .video-pastor span{
	color:#999;
}
#video .video-pastor span::after{
	content:"";
	display:inline-block;
	width:1px;
	height:10px;
	background-color:#999;
	margin:2px 5px 0px;
}



/* =============================================
	section#board
==============================================*/
#board .inner{ 
	width:100%;
	padding:10px 20px;
}

#board .sect-tlt{ 
	padding:40px 20px;
}
#board .sect-tlt .board-tlt-en{
	display:block;
	color:#555;
	padding-top:5px;
	font-size:20px;
}

#board .news-container{ 
}
#board .news-lists{	
}
#board .news-lists li{
	padding:20px 0px;
	display:flex;
	align-items:center;
	gap:14px;
}
#board .news-lists li:not(:last-child){
	border-bottom:1px solid #ccc;	
}
#board .news-lists li .news-thum{
}
#board .news-lists li .news-thum span{
	display:block;
	width:45px;
	height:45px;
	border-radius:50%;
	background-color:#ccc;	
}
#board .news-thum.idx01 span{
	background:url(../img/news-thums/1.png) center center;
	background-size:cover;	
}
#board .news-thum.idx02 span{
	background:url(../img/news-thums/2.jpg) center center;
	background-size:cover;	
}
#board .news-thum.idx03 span{
	background:url(../img/news-thums/3.jpg) center center;
	background-size:cover;	
}
#board .news-cont{
	display:flex;
	width:100%;
	flex-direction:column;
	align-items:flex-start;
	justify-content:center;
}
#board .news-head{
	display:block;
	width:100%;
	padding-bottom:17px;

}
#board .news-head h3{
	font-weight:500;
	color:#CB477C;
	font-size:17px;	
	padding-bottom:6px;
}

#board .news-head .date{
	font-size:13px;
	color:#888;
}
#board .news-head .date::before{
	content:"";
	display:inline-block;
	width:1px;
	height:9px;
	background:#888;
	margin-right:4px;
}
#board .news-txt{
	font-size:14px;
	color:#333;
	line-height:1.8;
}
#board .news-txt span{
	display:block;
}

/* ++++++++++++++++++++++++++++++
	section#gallery
+++++++++++++++++++++++++++++++*/
#gallery{
	background:#4e5653;
}
#gallery .inner{
	width:100%;	
	padding:40px 10px 40px;
}
#gallery .sect-tlt{
	padding:20px 0px 40px;	
	color:#ccc;
}
#gallery .sect-tlt .gallery-tlt-en{
	display:block;
	color:#d2d2d2;
	padding-top:5px;
	font-size:20px;
}

/* swiper slide */
.swiper.gallery {
	width:100%;
	padding-bottom:30px;
}
.swiper.gallery li{
	overflow:hidden;
}

.swiper.gallery li img{
	max-width:100%;
	height:auto;	
}

.swiper.gallery li::after{
	content:"";
	display:block;
	padding-top:74%;
}
#gallery .swiper-button-next,
#gallery .swiper-button-prev
{
	display:none;
}
#gallery .swiper.gallery .swiper-pagination{
	bottom:-20px !important;
	overflow:visible !important;
	position:relative !important; /* 부모의 포지션이 static이고 자식의 포지션이 absolute이면 부모에 overflow:hidden해도 자식요소가 계속 보임 */
}
.swiper.gallery .swiper-pagination-bullet.swiper-pagination-bullet {
    background-color: #222;
    opacity: 0.4;
}
.swiper.gallery .swiper-pagination-bullet{
	width:10px !important;
	height:10px !important;
	margin:0px 4px !important;
}
.swiper.gallery .swiper-pagination-bullet.swiper-pagination-bullet-active{
	background:#F0F0F0;
	opacity:1;
}

#gallery .swiper.gallery .swiper-pagination-bullet{
	
}


.swiper-slide.p1{
	background:url(../img/gallery/photo-01.jpg) no-repeat 0px 0px/cover;
}
.swiper-slide.p2{
	background:url(../img/gallery/photo-02.jpg) no-repeat 0px 0px/cover;
}
.swiper-slide.p3{
	background:url(../img/gallery/photo-03.jpg) no-repeat 0px 0px/cover;
}
.swiper-slide.p4{
	background:url(../img/gallery/photo-04.jpg) no-repeat 0px 0px/cover;
}
.swiper-slide.p5{
	background:url(../img/gallery/photo-05.png) no-repeat 0px 0px/cover;
}
.swiper-slide.p6{
	background:url(../img/gallery/photo-06.jpg) no-repeat 0px 0px/cover;
}
.swiper-slide.p7{
	background:url(../img/gallery/photo-07.jpg) no-repeat 0px 0px/cover;
}
.swiper-slide.p8{
	background:url(../img/gallery/photo-08.jpg) no-repeat 0px 0px/cover;
}
.swiper-slide.p9{
	background:url(../img/gallery/photo-09.jpg) no-repeat 0px 0px/cover;
}
.swiper-slide.p10{
	background:url(../img/gallery/photo-10.jpg) no-repeat 0px 0px/cover;
}
.swiper-slide.p11{
	background:url(../img/gallery/photo-11.jpg) no-repeat 0px 0px/cover;
}

/* ==== 갤러리 팝업 =====*/
#photo-modal{ 
	position:fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background:rgba(0,0,0,0.8);
	display: none;
	z-index:100;
	}
.photo-view-container{ 
	width:100%;
	height:100%;
	display:flex;
	justify-content: center;
	align-items: center;
	position:relative;	
}
.photo-view{

}
.photo-view img{
	max-width:100vw;
	padding:20px;
}