@charset "utf-8";

/*
  Project _ CSS Init
  FileName _ newMain.css - (신규 메인 영역)
  Author _ 쮸양~★
  Date _ 2025. 07. 14
  Last _ 
*/


body {overflow:hidden;}
#wrap {position:relative; width:100%;}
#wrap::after {position:absolute; width:100%; height:903px; bottom:0px; content:""; z-index:-1;}
/******************************************************************************************************************************************
	mainVisual CSS (메인비주얼) - 쮸양~★
*******************************************************************************************************************************************/
#container_wrap {position: relative; display: inline-block; width: 100%;}

#mainVisualBox {overflow: hidden; position:relative; height:1000px; padding:0px 0 0;text-align:center;}
/* TouchSlider 기본 시작 */
.sliderBox,
.sliderBox ul,
.sliderBox ul li{ width:100%; height:100%; padding:0; margin:0; display:inline-block;}
.sliderBox {overflow:hidden;}
.sliderBox ul{position:relative;}
.sliderBox ul li{ position:absolute; top:0; left:0;}
/* TouchSlider 기본 끝 */

.mvisual_wrap {position:absolute;left: 0;top:0;width: 100%;height: 1000px;}
.mvisual_wrap .sliderBox {height: 1000px !important;}
.mvisual_wrap .sliderBox ul {}
.mvisual_wrap .sliderBox ul li {}
.mvisual_wrap .sliderBox ul li .bg {position:relative;width:100%;height:100%;background-size: cover;background-position: center;}
.mvisual_wrap .sliderBox ul li .infoBox {position:absolute; z-index: 6; left:0px; top:350px; width:100%; /*transform: translateX(-50%);-webkit-transform: translateX(-50%);*/ box-sizing:border-box;}
.mvisual_wrap .sliderBox ul li .infoBox > div {position:relative; width:95%; max-width:1400px; margin:0px auto; text-align:left; line-height:1.3;}
.mvisual_wrap .sliderBox ul li .infoBox .titBox,
.mvisual_wrap .sliderBox ul li .infoBox .txtBox {margin-bottom:50px;}
.mvisual_wrap .sliderBox ul li .infoBox .titBox .tit {font-size:calc(2rem + 3.2vw); font-weight:500; color:#111; display:block; text-shadow:5px 3px 10px #fff;}
.mvisual_wrap .sliderBox ul li .infoBox .titBox .tit >span {color:#00a439;}
.mvisual_wrap .sliderBox ul li .infoBox .txt01 {color:#111; font-size:25px;}
.mvisual_wrap .sliderBox ul li .infoBox .txt02,
.mvisual_wrap .sliderBox ul li .infoBox .txt03 {background:rgba(0,0,0,0.4); color:#fff; padding:2px 5px; margin-top:5px; font-size:20px; display:inline-block;}

.mainVi_Banner {position:absolute; left:0px; width:100%; bottom:100px; z-index: 6;}
.mainVi_Banner ul {position:relative; bottom:100px; margin:0px auto; display:flex; z-index: 6; color:#fff; width: 95%; max-width:1400px; justify-content:flex-start; align-items:center; box-sizing:border-box;}
.mainVi_Banner ul li {margin-right:10px;}
.mainVi_Banner ul li a {position:relative; display:inline-block; padding:15px 40px; border-radius:8px; background:rgba(255,255,255,0.8); color:#111; font-size:20px; text-align:center; transition:all 0.3s; -webkit-transition:all 0.3s; box-shadow:2px 2px 4px rgba(0,0,0,0.5);}
.mainVi_Banner ul li a:hover,
.mainVi_Banner ul li a:focus {background:#00a439; color:#fff;}

/* 컨트롤박스 */
.mvisual_wrap .controlBox1 {position:relative; bottom:220px; margin:0px auto; display:flex; z-index: 6; color:#fff; width:95%; max-width:1400px; justify-content:flex-end; align-items:center; box-sizing:border-box;}
.mvisual_wrap .controlBox .paging {display:inline-block; margin-right:5px;}
.mvisual_wrap .controlBox .paging button {width:12px; height:12px; margin:0 5px; padding:0px 0px; border-radius:50%; border:1px solid #fff; font-size:0;}
.mvisual_wrap .controlBox .paging button.on {background:#fff;}
.mvisual_wrap .controlBox > button {z-index:10;}
.mvisual_wrap .controlBox1 > button {display:inline-block;position:relative;width:40px;height:40px;margin-right: 5px; border:1px solid #fff;border-radius:50%;font-size:0;} /* 시작/멈춤버튼 */

.mvisual_wrap .controlBox .total {display:inline-block; background:rgba(0,0,0,0.2); border-radius:50px; padding:5px 20px;}
.mvisual_wrap .controlBox .total span {display:inline-block; font-size:13px; color:#fff; font-weight:400;}
.mvisual_wrap .controlBox .total span.current {color:#fff; font-size:15px; font-weight:500;}
.mvisual_wrap .controlBox .total span.line {margin:0 4px 0 4px;}

/* 이전/다음버튼 */
.mvisual_wrap .controlBox2 > button {display:inline-block; position:absolute; width:30px; height:100px; background:rgba(0,0,0,0.5); vertical-align:middle; font-size:0; transition:all 0.3s; -webkit-transition:all 0.3s; border:none;}
.mvisual_wrap .controlBox2 > button:hover,
.mvisual_wrap .controlBox2 > button:focus {border:1px solid #20b0b0; background:#20b0b0 }
.mvisual_wrap .controlBox > button.btn_prev {border-radius:0px 10px 10px 0px; top:50%; left:0; margin-top:-47.5px;}
.mvisual_wrap .controlBox > button.btn_next {border-radius:10px 0px 0px 10px; top:50%; right:0; margin-top:-47.5px; }
.mvisual_wrap .controlBox2 > button span {display: none;opacity:0;z-index: -1;position: absolute;top: 0;width:185px;height:100%;padding: 25px 25px 0;background:rgba(50,64,64,.5);text-align:left;transition:all 0.3s;-webkit-transition:all 0.3s;}
.mvisual_wrap .controlBox2 > button.btn_prev span {left:94px}
.mvisual_wrap .controlBox2 > button.btn_next span {right:94px}
.mvisual_wrap .controlBox2 > button span em {display:block; font-size:13px; font-weight:bold; color:#fff; }
.mvisual_wrap .controlBox2 > button span b:after {display:block;display:-webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;content: attr(data-title);line-height: 1.3;color:#fff;font-size: 16px;font-weight: normal;text-overflow: ellipsis;white-space: normal;}
.mvisual_wrap .controlBox2 > button:hover span,
.mvisual_wrap .controlBox2 > button:focus span {display: block;opacity:1;}
.mvisual_wrap .controlBox > button:before,
.mvisual_wrap .controlBox > button:after {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;margin: auto;}
.mvisual_wrap .controlBox > button.btn_prev:before,
.mvisual_wrap .controlBox > button.btn_next:before{width:10px ;height: 10px ;border-width:2px;border-style: solid;border-color: #fff;transform: rotate(45deg);}
.mvisual_wrap .controlBox > button.btn_prev:before{right: -7px;border-width: 0 0 2px 2px;}
.mvisual_wrap .controlBox > button.btn_next:before{left: -7px;border-width: 2px 2px 0 0;}
.mvisual_wrap .controlBox > button.btn_stop:before{width:2px; height:12px; box-shadow: -2px 0 #fff, 2px 0 #fff;}
.mvisual_wrap .controlBox > button.btn_play:before{right: -3px;width: 0;height: 0;border-width: 5px 0 5px 8px;border-style: solid;border-color: transparent transparent transparent #fff;}

/* 컨트롤러 */
.mvisual_wrap .control {}
.mvisual_wrap .control .paging {display:inline-block;}
.mvisual_wrap .control .paging span {display:inline-block; font-size:17px; color:#242424 }
.mvisual_wrap .control .paging span.current {color:#087a9f;}
.mvisual_wrap .control .paging span.line {margin:0 8px 0 4px;}

#mainVisualBox .scroll {position: absolute; bottom:80px; left: 50%; transform: translateX(-50%); display: block; font-size: 14px; width:100px; height:100px; background:rgba(0,0,0,0.3); border-radius:100px; color: rgba(255,255,255,.5); z-index:0;}
#mainVisualBox .scroll::before {position: relative; top: 0; content: ''; display: block; width:26px; height:16px; background:url(../images/common/btn_scroll.png) no-repeat 0px 0px; margin:15px auto; animation: scroll .5s ease-in-out infinite alternate;}

@keyframes scroll {
	100% {top:10px;}
}

@media(max-width:769px){
	.mvisual_wrap .sliderBox ul li .infoBox .txtBox > span {white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
	.mvisual_wrap .sliderBox ul li .infoBox .btnBox a {padding:5px 60px 5px 20px;}
	.mvisual_wrap .controlBox1 {bottom:250px;}	
}

@media(max-width:460px){
	#mainVisualBox {height: 500px;}
	.mvisual_wrap {height: 500px !important;}
	.mvisual_wrap .sliderBox ul li .infoBox {top: 150px;}
	.mvisual_wrap .sliderBox ul li .infoBox .txtBox {display: none;}
	#mainVisualBox .scroll {display: none;}
	.mainVi_Banner {bottom: 0px;}
	.mainVi_Banner ul {justify-content:center;}
}


/******************************************************************************************************************************************
	container CSS (메인컨텐츠) - 쮸양~★
*******************************************************************************************************************************************/
#mainContents {position:relative; width:100%; margin-top:-70px;}

/* 예배시간 */
.timeBg {position: relative; width: 100%; z-index: 10;}
.timeBg::before {content: ""; width:60%; background: #00a439; height: 100%; display:block; position: absolute; left: 0px; top: 0px;}
.timeBox {position: relative; width: 95%; padding: 15px 0px; margin: 0px auto; max-width: 1400px; display: flex; align-items:center; flex-wrap:wrap;}
.timeBox::before {content: ""; width:50%; background: #007877; height: 100%; display:block; position: absolute; left:50%; top: 0px; border-radius: 0px 100px 100px 0px;}
.timeBox .timeLeft {width:50%; display: flex; }
.timeBox .timeLeft >.title {color: #fff; margin-right:50px;}
.timeBox .timeLeft >.title i.time { position: relative; display: block; top: 5px; background: url("../images/main/ic_time.png") no-repeat center 0px; width:100%; height: 68px; background-size:contain;}
.timeBox .timeLeft >.listTime li {color: #fff;}
.timeBox .timeLeft >div {position: relative; display: flex; align-items:flex-start; margin-right:50px;}
.timeBox .timeLeft >div .title {position: absolute; top: 20px; left: -30px; color: #fff; padding:5px 15px; margin-right: 20px; border-radius: 50px; background:#006b41; font-size: 18px;}
.timeBox .timeLeft .listTime { border-radius: 20px; background: rgba(0,0,0,0.3); padding: 10px 10px 10px 40px; margin-right: 10px;}
.timeBox .timeLeft .listTime span {color: #fff;}
.timeBox .timeLeft .listTime .tit {color: #fff; margin-right: 20px; position: relative;}
.timeBox .timeLeft .listTime .tit:after {content: ""; width:5px; height:2px; background: #fff; position: absolute; top: 7px; right:-12px; display: block;}
.timeBox .timeLeft >.listTime div >.title {}
.timeBox .timeRight {position: relative; width:45%; display:flex; padding-left:30px;}
.timeBox .timeRight .listBanner {display: flex; width: 100%; flex-wrap:wrap;}
.timeBox .timeRight .listBanner li {width:calc(100% / 3 - 10px);}
.timeBox .timeRight .listBanner li a {border-radius: 20px; min-height: 50px; display: block; background:rgba(0,0,0,0.3); padding:15px 20px; margin-right: 10px; color:#fff; position: relative;}
.timeBox .timeRight .listBanner li a span {display: block;}
.timeBox .timeRight .listBanner li a .tit {color:#fff; font-size:20px; margin-bottom: 5px;}
.timeBox .timeRight >.title {color: #fff;}
.timeBox .timeRight .listBanner i {display: block; font-size: 18px; position: absolute; bottom: 20px; right: 20px; }

/* 공지사항 */
.contentsBg01 {position: relative; width:100%; background:#f0f4fa; padding: 130px 0px 50px 0px; margin-top:-75px;}
.contentsBg01 .con01 {position: relative; width:95%; margin: 0px auto; max-width: 1400px; display: flex; flex-wrap:wrap; justify-content:space-between;}

.mainBoard {position: relative; width: 48%;}
.mainBoard >.title {color: #111; margin-bottom:5px; font-size:25px; font-weight: 600;}
.mainBoard .stxt {margin-bottom: 20px; color: #959595; padding-bottom:20px; border-bottom: 1px solid #ddd;}
.mainBoard .boardList {display: flex; flex-wrap:wrap; justify-content:space-between;}
.mainBoard .boardList li {width: calc(100% / 2 - 10px);}
.mainBoard .boardList li a {position: relative; border-radius: 20px; border: 1px solid #dce3ed; background:#fff; padding: 20px 20px; display: block;}
.mainBoard .boardList li .title {margin-bottom: 10px;}
.mainBoard .boardList li .txt_view {color: #959595; margin-bottom: 10px;}
.mainBoard .boardList li .txt_day {color: #959595; margin-bottom: 10px;}
.mainBoard .boardList li i { position: absolute; right: 20px; bottom: 20px; font-size: 25px;}

/* 성경통독 */
.HolyBook {position: relative; width: 48%;}
.HolyBook .titleBox {display: flex; flex-wrap:wrap; justify-content:space-between; margin-bottom: 20px;}
.HolyBook .listView {border-radius:10px; background: #007877; padding:10px 20px; display: flex; align-items:center;}
.HolyBook .listView .viewTxt {text-align: center; color: #fff;}
.HolyBook .listView .btnMore {border-radius: 30px; color: #fff; padding: 5px 10px 5px 10px; background: rgba(0,0,0,0.5); margin-left: 10px;}
.HolyBook .listView .viewTxt .btnMore i {margin-left: 5px;}
.HolyBook .title {color: #111; margin-bottom:5px; font-size:25px; font-weight: 600;}
.HolyBook .stxt {margin-bottom: 20px; color: #959595; font-size: 15px; display: block; font-weight: 500;}
.HolyBook .graphList {position: relative; border-radius: 20px; border: 1px solid #dce3ed; background:#fff; padding: 20px 20px; display: block;}

/* 말씀/찬양 */
.con02 {position: relative; width: 95%; max-width: 1400px; margin:50px auto;}
.con02 >.title {color: #111; margin-bottom:5px; font-size:25px; font-weight: 600; text-align: center;}
.con02 >.stxt {margin-bottom: 20px; color: #959595; text-align: center;}
.con02 .talkBoard {position: relative; display: flex; flex-wrap:wrap; justify-content:space-between;}
.con02 .talkBoard li {width: calc(100% / 3 - 20px);}
.con02 .talkBoard li a {display: block;}
.con02 .talkBoard li .picBox {width: 100%; height: 250px; margin-bottom: 10px;}
.con02 .talkBoard li .picBox img {width: 100%; height: 100%; border-radius: 20px 20px;}
.con02 .talkBoard li .txtBox {background: #f9f9f9; border:1px solid #ddd; margin-top: -30px; border-radius: 0px 0px 20px 20px; padding: 40px 20px 20px 20px;}
.con02 .talkBoard li .txtBox .title {color: #111; font-size: 20px; margin-bottom: 5px; text-align: center;}
.con02 .talkBoard li .txtBox .stxt {color: #666; font-size: 18px; margin-bottom: 5px;}
.con02 .talkBoard li .txtBox .sstxt {color: #959595; font-size: 16px; display: flex; flex-wrap:wrap;}
.con02 .talkBoard li .txtBox .sstxt .txt01 { display: flex; align-items:center;}
.con02 .talkBoard li .txtBox .sstxt .txt01::after {width: 3px; height: 3px; content: ""; background: #959595; display: inline-block; margin: 0px 10px; border-radius: 50px;}

.po_title {color: #00a439; font-size: 14px; font-weight:600;}
.po_title.green {color:#00a439;}
.po_title.blue {color:#0064a4;}
.po_title.pupple {color:#8f00a4;}


/* 기도 */
.contentsBg02 {position: relative; width:100%; background:#f7f7f7; padding:50px 0px 50px 0px;}
.prayerBox {position: relative; width: 95%; max-width: 1400px; margin:30px auto;}
.prayerBox >.title {color: #111; margin-bottom:5px; font-size:25px; font-weight: 600; text-align: center;}
.prayerBox >.stxt {margin-bottom: 20px; color: #959595; text-align: center;}
.prayerBox .boardList {position: relative; display: flex; flex-wrap:wrap; justify-content:space-between;}
.prayerBox .boardList li {width: calc(100% / 3 - 20px);}
.prayerBox .boardList li a {display: block;}
.prayerBox .boardList li .picBox { position: relative; width: 100%; height: 250px; margin-bottom: 10px; text-align: center;}
.prayerBox .boardList li .picBox img {width: 100%; height: 100%; border-radius: 20px 20px;}
.prayerBox .boardList li .picBox .btnMore { position: absolute; bottom:-20px; border-radius: 30px; color: #fff; padding: 5px 10px 5px 10px; background:#00a439; display: block; left: 50%; transform: translateX(-50%);}
.prayerBox .boardList li .picBox .btnMore i {margin-left: 5px;}
.prayerBox .boardList li .txtBox {background: #f9f9f9; border:1px solid #ddd; margin-top: -30px; border-radius: 0px 0px 20px 20px; padding: 60px 20px 20px 20px;}
.prayerBox .boardList li .txtBox .title {color: #111; font-size: 20px; margin-bottom: 5px; text-align: center;}
.prayerBox .boardList li .txtBox .title span {color: #00a439;}

@media(max-width:769px){
	
	.timeBg::before { width: 100%; background: none;}
	.timeBox {width: 100%; display:inline-block; padding:0px;}
	.timeBox::before {display: none;}
	.timeBox .timeLeft {width:100%; background: #00a439; padding:10px 2.5%;}
	.timeBox .timeLeft .listTime {width:100%; margin-right: 50px;}
	.timeBox .timeLeft .title {width: 15%;}
	.timeBox .timeLeft .time01 {width:40%; margin-right:0px;}
	.timeBox .timeLeft .time02 {width:45%; margin-right:0px;}
	.timeBox .timeLeft .time02 .listTime {margin-right:0px;}
	.timeBox .timeRight {width:100%; background: #007877; padding:10px 2.5%; margin-left: 0px;}
	.timeBox .timeRight .listBanner {justify-content:space-between;}
	.timeBox .timeRight .listBanner li {width: calc(100% / 3 - 10px);}
	.timeBox .timeRight .listBanner li a {margin-right:0px;}
	
	/* 공지사항 */
	.mainBoard {width:100%;}
	.HolyBook {width: 100%; margin: 30px 0px;}
	
	.con02 .talkBoard li,
	.prayerBox .boardList li {width:calc(100% / 2 - 20px);}
	.con02 .talkBoard li:nth-child(3),
	.prayerBox .boardList li:nth-child(3){display: none;}	
}

@media(max-width:460px){
	#mainContents {margin-top:-10px;}
	.timeBox .timeLeft {flex-wrap:wrap;}
	.timeBox .timeLeft .title {text-align: center; width: 100%; margin-right: 0px; margin-bottom: 10px;}
	.timeBox .timeLeft >div {width: 100%; flex-wrap:wrap;}
	.timeBox .timeLeft .time01,
	.timeBox .timeLeft .time02{width: 100%;}
	.timeBox .timeLeft .time02 {margin-top: 20px;}
	.timeBox .timeLeft >div .title {width:100%; position: relative;top:0px;left: 0px;box-sizing: border-box;color: #fff;margin-right: 0px;font-size: 18px; text-align: center; margin-bottom: 5px;}
	.timeBox .timeLeft >.title i.time {display: none;}
	
	.timeBox .timeLeft .listTime {margin-right: 0px; border-radius:10px;}
	
	.timeBox .timeRight .listBanner li {width:100%;}
	.timeBox .timeRight .listBanner li a {margin-right:0px; margin-bottom:10px; border-radius:10px;}
	.timeBox .timeRight .listBanner li a .tit {font-size: 15px;}
	.timeBox .timeRight .listBanner li a span.btnGo {display: none;}
	.timeBox .timeRight .listBanner i {top: 20px; bottom: auto;}

	/* 공지사항 */
	.mainBoard >.title {text-align:center;}
	.mainBoard .stxt {text-align:center;}
	.mainBoard .boardList li {width: 100%;}
	.mainBoard .boardList li:nth-child(2) {display: none;}
	
	.con02 .talkBoard li,
	.prayerBox .talkBoard li,
	.prayerBox .boardList li {width:100%;}
	.con02 .talkBoard li:nth-child(2),
	.con02 .talkBoard li:nth-child(3),
	.prayerBox .boardList li:nth-child(2),
	.prayerBox .boardList li:nth-child(3){display: none;}
	
	/* 성경총독 */
	.HolyBook .title { width:100%; text-align:center;}
	.HolyBook .listView {width:100%; justify-content:center;}
	.graph_box canvas {margin:0px auto;}
	
	.contentsBg01 {padding:30px 0px 0px 0px; margin-top:0px;}
	.con02 {margin:30px auto;}
	.contentsBg02 {padding:30px 0px;}
	.prayerBox {margin:0px auto;}
}