@charset "utf-8";
/*
 * index의 반응형디자인
 * 헤더와 푸터의 반응형디자인은 common-rw.css 에서 정의함
 */ 


/* ===================================
	모바일 가로 (376px ~ 767px) 
=====================================*/
@media all and (min-width:376px) {
	#hero .hero-list li{
		margin:6px 0px;
	}
	#hero .hero-list li a{
		width:250px;
		font-size:21px;
	}	

	/* setion#video ----------------------------*/
	#video div.swiper.video{
		width:100%;
	}
	#video .iframe-container .cover .video-date{
		font-size:18px;	
	}
	#video .iframe-container .cover .video-title{
		font-size:28px;	
	}
	#video .iframe-container .cover .video-text{
		font-size:20px;	
	}
#board .news-txt{
	font-size:16px;

}
	#board .news-txt span{
		display:inline;
	}
}

/* ===================================
	타블렛(768 ~ 1024) 
====================================*/
@media all and (min-width: 768px) {
	#hero .hero-list li{
		margin:8px 0px;
	}
	#hero .hero-list li a{
		width:260px;
		font-weight:500;
	}
	#hero{
		height:260px;
		background:url(../img/mainvis-medium.jpg) no-repeat center 0px;
		background-size:cover;
		box-shadow:0px 10px 12px 0px rgba(0,0,0,0.1) inset;
	}
	#hero .inner{
		width:100%;
		height:100%;
		position:relative;
		margin:auto;
	}
	#hero .hero-list li{
		display:inline-block;
		margin:0px 18px;
		text-align:center;
	}
	
	/* section#intro ------------------*/
	#intro{
		padding:0px 10%;
	}
	#intro .inner{
		width:100%;
		margin:auto;
	}
	#intro .introbox{
		width:100%;
		height:240px;
		margin:10px 0px;
	}
	#intro .introbox.beliefs .intro-txt h3{
		font-size:26px;
	}
	#intro .introbox.beliefs .intro-txt h3 span{	
		font-size:23px;		
	}
	#intro .introbox.time .intro-txt h3{
		font-size:24px;
	}
	#intro .introbox.time .intro-txt h3 span{
		font-size:19px;
	}
	#intro .introbox.time .intro-txt .service-time{
		margin-top:30px;
		font-size:16px;
	}
	#intro .introbox.time .intro-txt .service-time li{
		padding:6px 40px 7px 50px;
	}
	#intro .introbox.time .intro-txt .service-time li::after{	
		left:40px;
		}
	
	/* section#video -----------------------*/
	
	#video .video-desc-container{
		padding:17px 0px 10px;
	}
	#video .video-desc-container p{
		font-size:14px;
	}
	#video .iframe-container .cover{
		padding:4% 3%;
	}
	#video .iframe-container .cover .video-date{
		font-size:30px;	
	}
	#video .iframe-container .cover .video-title{
		font-size:46px;	

	}
	#video .iframe-container .cover .video-text{
		font-size:32px;	
	}
	#video .video-pastor{
		font-size:18px;
	}
	
	/* section#board-------------------*/
	#board .inner{ 
		padding:10px 20px;
	}
}

/* =======================================================
 * 노트북 (1025 ~ 1199) 
 * hero와 메인박스 가로 나열로 변경
 * =======================================================*/
@media all and (min-width: 1025px) {
	.sect-tlt{
		font-size:28px;
	}

	/* 	section#hero*/
	#hero{
		width:100%;
		}
	#hero .hero-list li{
		margin:0px 5px;
	}
	#hero .hero-list li a{
		width:270px;
	}
	#hero .inner{
		height:100%;
		width:100%;
		position:relative;
	}
	
	/* section#intro ------------------*/
	#intro{
		padding:0px 15%;
	}
	#intro .inner{
	}
	
	/* 	section#video---------------------- */	
	#video{
		width:100%;
	}
	#video .inner{
		padding:80px 0px 100px;
		position:relative;
		}
	#video div.swiper.video{
		width:780px;
	}
	#video .swiper-slide.video-list{	
	}
	.video-desc-pastor span::after{
		height:11px;
		margin:3px 4px 1px;
	}
	#video .iframe-container{	
		width:780px;
		padding-top:56.25%; 
		position:relative;
	}
	#video .iframe-container .cover{

	}
	#video .iframe-container .cover .video-date{
		font-size:26px;	
	}
	#video .iframe-container .cover .video-title{
		font-size:40px;	
	}
	#video .iframe-container .cover .video-text{
		font-size:32px;	
	}
	#video .video-pastor{
		padding:20px 0px 50px;
		font-size:15px;	
	}
	#video .video-pastor span{
		color:#999;
		font-size:15px;
	}
	#video .swiper.video .swiper-pagination-bullet{
		width:14px !important;
		height:14px !important;
		margin:0px 7px !important;
	}
	
	
	/* section#gallery --------------------------------*/
	#gallery .swiper-button-prev::after{
		content:"";	
	}
	#gallery .swiper-button-prev{
		background:url(../img/gallery-prev.svg) no-repeat 0px 0px/cover;	
		width:30px !important;
		height:40px !important;
	}
	#gallery .swiper-button-next::after{
		content:"";	
	}
	#gallery .swiper-button-next{
		background:url(../img/gallery-next.svg) no-repeat 0px 0px/cover;	
		width:30px !important;
		height:40px !important;
	}

	#video .swiper-button-next{
		top:45% !important;
		left:90% !important;
		color:#159eb5 !important;
		display:block;
	}
	#video .swiper-button-prev{
		top:45% !important;
		left:8% !important;
		color:#159eb5 !important;
		display:block;
	}
	#video .swiper-button-next.swiper-button-disabled{
		opacity:0.1;
		color:#159eb5 !important;
	}
	#video .swiper-button-prev.swiper-button-disabled{
		opacity:0.1;
		color:#159eb5 !important;
	}
	

	/* 	section#board	---------------------------*/
	#board .inner{ 
		padding:40px;
	}
	#board .sect-tlt{ 
		padding:40px 30px;
	}
	#board .sect-tlt .board-tlt-en{
		display:inline;
		font-size:26px;
	}
	#board .sect-tlt .board-tlt-en::before{
		content:"";
		display:inline-block;
		width:2px;
		height:21px;
		background-color:#222;
		margin:0px 10px;
	}
	#board .news-lists li{
		padding:20px 10px;	
		gap:20px;
	}	
	#board .news-lists li .news-thum span{
		width:120px;
		height:120px;
	}

	#board .news-cont{
		display:flex;
		width:100%;
		-border:1px solid yellowgreen;
		flex-direction:column;
		align-items:flex-start;
		justify-content:center;
	}
	#board .news-head{
		display:flex;
		-border:1px solid gold;
		width:100%;
		align-items:center;
		padding-bottom:17px;
		gap:30px;
	}
	#board .news-head h3{
		font-size:20px;	
	}
	
	#board .news-head .date{
		font-size:15px;
	}
	#board .news-head .date::before{
		content:"";
		display:inline-block;
		width:1px;
		height:11px;
		background:#999;
		margin-right:12px;
	}
	#board .news-txt a{
		font-size:15px;
	
	}


	
}
/* =======================================================
	노트북 (1200 ~ 1279) 
	hero와 메인박스 가로 나열,
	.inner는 1200px 고정 너비 + 중앙 정렬
=======================================================*/
@media all and (min-width: 1200px){

	#hero{
		height:300px;
		min-width:769px;
		background:url(../img/mainvis-large.jpg) no-repeat center 0px;
		background-size:cover;
		box-shadow:0px 10px 12px 0px rgba(0,0,0,0.1) inset;
	}
	#hero .hero-list li{
		margin:0px 8px;
	}
	#hero .hero-list li a{
		width:280px;
	}
	/* section#intro ( .intro-box > .intro-txt > h3, p )  ---------------------*/
	#intro{
		width:100%;
		padding:0px;
		
	}
	#intro .inner{ 
		width:1200px;
		padding:36px 0px;
		display:flex; /* .introbox 3개 가로 정렬 */
		justify-content:space-between;
	}
	#intro .sect-tlt{
		display:none;	
	}
	#intro .introbox{
		width:394px;
		height:320px;
		border:1px solid #D2D2D2;
		position:relative;	
	}
	/* 우리의 믿음 */
	#intro .introbox.beliefs .intro-txt{
		position:absolute;
		top:50%;
		left:50%;
		transform:translate(-50%, -50%);
		-border:1px solid pink;
	}

	#intro .introbox.beliefs .intro-txt h3{
		font-size:28px;
		font-weight:500;
		text-align:center;
		letter-spacing:1px;
		line-height:1.4;
	}
	#intro .introbox.beliefs .intro-txt h3 span{
		display:block;
		color:#666;
		font-size:24px;
	}
	/* 예배시간 안내 */
	#intro .introbox.time{
		background:url(../img/icon-time.png) no-repeat center 30px;	
		background-size:42px;
	}
	#intro .introbox.time .intro-txt{
		position:absolute;
		left:50%;
		transform:translateX(-50%);
		top:80px;	
		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:#777;
		font-size:17px;
	}
	#intro .introbox.time .intro-txt .service-time{
		-border:1px solid orange;
		margin-top:46px;	
		color:#333;
	}
	#intro .introbox.time .intro-txt .service-time li{
		display:flex;
		justify-content:space-between;	
		position:relative;
		padding:6px 35px 5px 38px;
		-border:1px solid gold;
	}
	#intro .introbox.time .intro-txt .service-time li::after{
		content:"";
		display:block;
		width:3px;
		height:3px;
		background:#00333a;
		position:absolute;
		left:30px;
		top:12px;
	}
	/* 교회위치 */
	#intro .introbox.location{
		background:url(../img/icon-map.png) no-repeat center 30px;	
		background-size:42px;
	}
	#intro .introbox.location .intro-txt{
		position:absolute;
		left:50%;
		transform:translateX(-50%);
		top:80px;
		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:#777;
		font-size:17px;
	}
	#intro .introbox.location .intro-txt p{
		margin-top:50px;
		text-align:center;
		color:#333;
	}
	/* 	section#board	---------------------------*/
	#board .inner{ 
		width:1200px;
		margin:auto;
		padding:40px;
	}

	/* section#video ------------------------------*/
	#video .iframe-container .cover{

	}
	#video .iframe-container .cover .video-date{
		font-size:26px;	
	}
	#video .iframe-container .cover .video-title{
		font-size:50px;	
	}
	#video .iframe-container .cover .video-text{
		font-size:36px;	
	}
	
	/* 	section#gallery -------------------------*/
	#gallery{
		width:100%;
	}
	#gallery .inner{
		width:1200px;	
		margin:auto;
		padding:40px 0px 80px;
		position:relative;
	}
	#gallery .sect-tlt{ 
		padding:40px 30px;
		color:#d2d2d2;
	}
	#gallery .sect-tlt .gallery-tlt-en{
		display:inline;
		font-size:26px;
	}
	#gallery .sect-tlt .gallery-tlt-en::before{
		content:"";
		display:inline-block;
		width:2px;
		height:21px;
		background-color:#999;
		margin:0px 10px;
	}
	/* swiper */
	.swiper.gallery {
	  width: 1200px;
	}

	#gallery .swiper-button-next{
		display:block;
		top:54% !important;
		left:102% !important;
		width:40px !important;
		height:60px !important;
		position:absolute !important;	
	}	
	#gallery .swiper-button-prev{
		display:block;
		top:54% !important;
		left:-5% !important;
		width:40px !important;
		height:60px !important;
		position:absolute !important;
	}
	#gallery .swiper-button-next.swiper-button-disabled{
		opacity:0;
	}
	#gallery .swiper-button-prev.swiper-button-disabled{
		opacity:0;
	}
	#gallery .swiper.gallery .swiper-pagination{
		display:none;	
	}
}

/* ==========================================
	작은 데스크탑 (1280 ~ 1535)
============================================*/
@media all and (min-width: 1280px) {

}


/* ==========================================
	큰 데스크탑 (1536 이상 ~ )
============================================*/
@media all and (min-width: 1536px) {
	
}