@charset "utf-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap');
@font-face {
    font-family: 'ONE-Mobile-Title';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Title.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}



#header {position:relative;}
#footer {position:relative;}

#Container {width:100%; overflow:hidden;}
#Container .subslide {width:100%;}


#Container .subslide .slideIn {max-width:100%; margin:0 auto 20px; text-align:center; height:100%;}
    .flximg  {width:100%}

#Container .contents {max-width:1200px; width:100%; margin:auto; padding:0 5px; min-height:auto;}
#Container .contents .lnb {width:18%; margin-bottom:30px; float:left; background:#fff;}
  .lnb h3 {font-size:22px; background:#000363; display:block; color:#fff; text-align:center; padding:20px 0}
  .lnb>ul {border-top:none; border:1px solid #ddd}
  .lnb>ul>li {font-size:14px; color:#444; border-bottom:1px solid #ddd; box-sizing:border-box;}
  .lnb>ul>li:last-child {border-bottom:none;}
  .lnb>ul>li>a {padding:14px 20px; display:block;font-size:15px; box-sizing:border-box;}
  .lnb>ul>li>a span {font-size:12px; float:right; font-family:"Nanum Gothic", "나눔고딕", "Malgun Gothic", "돋움", "Dotum", "굴림", "Gulim", sans-serif; line-height:1.5}
  .lnb>ul>li>a.on, .lnb>ul>li>a:hover {background:#f1f1f1; color:#222; font-weight:bold; box-sizing:border-box;}
  .lnb>ul>li>ul { }
  .lnb>ul>li>ul>li:last-child {margin-bottom:10px;}
  .lnb>ul>li>ul>li a {padding:2px 10px 5px 35px; display:block; font-size:13px;}
  .lnb>ul>li>ul>li a.on, .lnb>ul>li>ul>li a:hover {font-weight:bold}

  .con_vod .vod_left h2 {padding: 10px 0px 0px 0px;}


#Container .contents .contIn {width:80%; float:right; background:#fff; margin-bottom:20px;}
  .contIn .title {width:100%; padding:18px 20px; border-bottom:1px solid #ddd; overflow:hidden; box-sizing:border-box;-webkit-box-sizing:border-box; -moz-box-sizing:border-box; https://www.cams.or.kr/user/saveDir/awd/P/0/image_3608.png?itemTime=1714298182-o-box-sizing:border-box}
  .contIn .title h2 {float:left; font-weight:400; font-size:25px;}
  .contIn .title .location {float:right; font-size:13px; color:#666}
  .contIn .title .location a {font-size:13px; margin:0 5px;}
  .contIn .title .location span {font-size:10px; font-family:"Nanum Gothic", "나눔고딕", "Malgun Gothic", "돋움", "Dotum", "굴림", "Gulim", sans-serif; margin:0 5px; color:#aaa}


  .contIn .subIn {border-top:0; padding:25px 10px; width:100%; box-sizing:border-box; -webkit-box-sizing:border-box; -moz-box-sizing:border-box; -o-box-sizing:border-box;}
  .contIn .subIn .text {}
  .contIn .subIn .text p {margin:23px 0 30px; line-height:27px}


.sub01 {width:100%; padding-bottom:20px; display:inline-block;}
    .s_right {float:right; width:75%; height: auto; box-sizing: border-box; padding:25px 10px 0;}
      .s_right h2 {margin-bottom:20px;}
      .s_right p {line-height:1.7; margin-bottom:15px;}
      .s_right p:last-child {float:right;}
      .s_right p:last-child span {margin:-5px 10px 0}
      .s_right i {box-shadow:inset 0 -10px 0 #ffe8e8; font-weight:500;}
    .s_left {float:left; width:25%; height: auto; padding-top:25px;}
      .s_left img {width:100%; max-width:180px;}
	.defaultBoard table thead tr th.title {background:#f9f9f9;}



/* 게시판 */
.board {width:100%}
	.searchBox {padding:0}
	.category {padding-bottom:0}
	.right {/*float:right;*/ padding:10px 0}
	.searchBtn img {vertical-align:top}
	.searchBox input[type="text"] {width:25%;}
	.defaultBoard table {width:100%}

	table {width:100%}
	.albumList {width:1000px;}
	.albumList > div {margin:0 5px 20px;}
	.vodList > div {padding:5px; margin:0px 5px 20px}
	.vodList > div > p.btns a{height:auto; padding: 5px 8px;}
	.vodList > div a > img {width:100%;}
	.sermon>.btn>a>span {font-size:14px;}


	.sermon dl {width:36%;}
	.sermon dl dd ul li {font-size:14px;}
	.sermon dl dt a {font-size:15px;}

	
.tCalendar table tbody tr td.today div {height:auto;}


/* 예배안내 */
ul.worship_info {display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between;}
ul.worship_info::after {display: none;}
ul.worship_info li {width: calc(50% - 10px); margin-bottom: 0px;}
ul.worship_info li img {width: 100%;}

table.location_table2 { width: 100%; border-collapse: collapse; margin-top: 20px; border-top: 2px solid #000363 !important; border-bottom: 1px solid #000; color: #333; text-align: center; }
table.location_table2 tr { border-bottom: 1px solid #cbcdfd; }
table.location_table2 tr th:not(:last-child) { border-right: 1px solid #cbcdfd; }
table.location_table2 tr th { padding: 10px 15px; background-color: #e2e3ff; color: #222; }
table.location_table2 tr td { padding: 10px 15px; border-right: 1px solid #cbcdfd; word-break: keep-all; }
table.location_table2 tr td:last-child { border-right: 0px solid #cbcdfd; }
table.location_table2 tbody tr td { text-align: center; }
table.location_table2 tbody tr td p {position: relative; margin-bottom: 10px; padding: 0 0 0 20px;}
table.location_table2 tbody tr td p:last-child {margin-bottom: 0px;}
table.location_table2 tbody tr td p::before {position: absolute; content:""; top: 5.5px; left: 0; display: inline-block; width: 5px; height: 5px; margin-right: 10px; border: 3px solid #9da0fd; vertical-align: middle; border-radius: 50%;}

/* 오시는 길 */
.root_daum_roughmap { width: 100% !important;}
.root_daum_roughmap .wrap_map {height: 500px;}

table.location_table { width: 100%; border-collapse: collapse; margin-top: 30px; border-top: 2px solid #000363 !important; border-bottom: 1px solid #000; color: #333; text-align: center; }
table.location_table tr { border-bottom: 1px solid #cbcdfd; }
table.location_table tr th:not(:last-child) { border-right: 1px solid #cbcdfd; }
table.location_table tr th { padding: 10px 15px; background-color: #e2e3ff; color: #222; }
table.location_table tr td { padding: 10px 15px; }
table.location_table tbody tr td { text-align: left; }
table.location_table tbody tr td p {position: relative; margin-bottom: 10px; padding: 0 0 0 20px; line-height: 28px;}
table.location_table tbody tr td p:last-child {margin-bottom: 0px;}
table.location_table tbody tr td p::before {position: absolute; content:""; top: 9px; left: 0; display: inline-block; width: 5px; height: 5px; margin-right: 10px; border: 3px solid #9da0fd; vertical-align: middle; border-radius: 50%;}


/* 교회소개 */
.inner h2 {font-size: 20px; color: #222;}
.inner h3 {font-size: 16px; margin-top: 12px; color: #555;}
.inner ul.intro_contents {margin: 20px 0px 40px 0px; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center;}
.inner ul.intro_contents li {background: url("/images/church_Intro_01.jpg") no-repeat; background-size: cover; background-size: center; width: 28.96995708154506%; height: 166px; display: flex; flex-direction: column; justify-content: center; align-items: center; position: relative; isolation: isolate;}
.inner ul.intro_contents li::after {content: ""; position: absolute; background: #000; z-index: -1; inset: 0; opacity: 0.5;}
.inner ul.intro_contents:after {display: none;}
.inner ul.intro_contents li:nth-child(2) {background: url("/images/church_Intro_02.jpg") no-repeat;}
.inner ul.intro_contents li:nth-child(3) {background: url("/images/church_Intro_03.jpg") no-repeat;}
.inner ul.intro_contents li p {font-size: 18px; font-weight: 400; color: #fff; font-family: "Nanum Gothic", sans-serif;}
.inner ul.intro_contents li div {width: 20px; height: 1px; background: #fff; margin: 14px auto 8px auto;}
.inner ul.intro_contents li em {font-size: 26px; font-weight: 600; color: #fff; font-style: normal; font-family: "Nanum Gothic", sans-serif;}
.inner .sign {position: relative; text-align: right; }
.inner .sign::before {position: absolute; content:""; text-align: right; width: calc(100% - 240px); height: 1px; background: #000; left: 0px; top: 24.5px;}

.inner .sign p {font-size: 20px; font-weight: 600; color: #222; background: #fff; font-family: "Noto Serif KR", serif;}
.inner .sign span {font-size: 16px; font-weight: 400; color: #555; background: #fff; font-family: "Nanum Gothic", sans-serif;}

.inner ul.intro_contents2 li { height: 190px; margin: 0px auto 50px auto; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: flex-start; align-items: flex-start; }
.inner ul.intro_contents2 li:first-child {margin: 40px auto 50px auto;}
.inner ul.intro_contents2 li div:first-child {width: 100%; max-width: 310px; height: 190px; background: #555; box-sizing: border-box; }
.inner ul.intro_contents2 li div:last-child {padding: 0px 0px 0px 30px; box-sizing: border-box;}
.inner ul.intro_contents2 li div:last-child p {font-size: 20px; font-weight: 600; color: #222222; margin: 0px auto 16px auto; font-family: "Nanum Gothic", sans-serif;}
.inner ul.intro_contents2 li div:last-child em {font-size: 16px; font-weight: 400; line-height: 28px; color: #555; font-style: normal; font-family: "Nanum Gothic", sans-serif;}
.inner ul.intro_contents2 li div:last-child em b {font-size: 16px; font-weight: 600; color: #222;}


/* 섬기는분 */
.inner2  {text-align: center;}
.inner2 h2 {position: relative; display: inline-block; margin: 0 auto;  font-size: 30px; color: #222; margin: 36px 0px 26px; text-align: center; /* border-bottom: 1px solid #000; */ padding: 0px 0px 0px 40px; font-family: "Nanum Gothic", sans-serif;}
.inner2 h2::before {position: absolute; content: ""; width: 30px; height: 30px; background: url("/images/sub/logo_blue.png") no-repeat; background-size: 30px; top: 0; left: 0%;}

ul.servant {display: flex; flex-direction: row; flex-wrap: wrap;}
ul.servant li {width: 23.5%; text-align: center; margin-right: 2%; padding: 0px 0px 30px 0px;}
ul.servant li:last-child { margin-right: 0%; }

/* ul.servant li:nth-child(3n) {margin-right: 0} */
ul.servant li img {width: 100%; background: #ddd;}
ul.servant li p {text-align: center; font-size: 16px; margin: 15px 0px 7px 5px;}
ul.servant li p span {color: #5d61ec; font-size: 24px; font-weight: 600; margin: 0px 0px 0px 0px; font-family: "Nanum Gothic", sans-serif;}
ul.servant li em {text-align: center; display: block; font-style: normal; font-size: 15px; margin: 10px 0px 8px 0px;}
ul.servant li div.contact {position: relative; display: inline-block; margin: 0 auto; padding: 0px 0px 0px 30px; cursor: pointer;}
ul.servant li div.contact::before {position: absolute; content:""; width: 18px; height: 18px; background: url("/images/instagram_b.png") no-repeat; background-size: 18px; top: 0px; left: 0px;}
ul.servant li div.contact:hover { background-image: linear-gradient(45deg, rgba(255,198,0,1) 0%, rgba(255,9,0,1) 50%, rgba(220,0,172,1) 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
ul.servant li div.contact:hover::before {width: 18px; height: 18px; background: url("/images/instagram_c.png") no-repeat; background-size: 18px;}

/* 교회기관 */
ul.img { display: flex; width: 100%; height: 300px; margin: 0px 0px 15px 0px;}
ul.img li { flex: 1; position: relative; transition: all 0.3s; background: #fff; }
ul.img li:hover, ul.img li:active { flex: 2; background: #fff; }
ul.img li img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

/* 역사 */
.inner .history img {width:100%;}
.inner .year {width:100%; margin: 30px auto;}
/* .sub01 .year > div:not(:nth-child(1)) {display:none;} */
.inner .year {display:inline-block; width:100%; padding: 0px 0px 0px 0px;}
.inner .year .year_con h4 {width:120px; float:left; font-weight: 400; font-size: 24px; letter-spacing: -1.0px; font-family: 'ONE-Mobile-Title'; color: #222;}
.inner .year .year_con {display:inline-block; width:100%; margin-bottom: 40px;}
.inner .year .year_con ul {width:calc(100% - 160px); float:right; position:relative;}
.inner .year .year_con ul:before {position:absolute; content:''; display:block; height:calc(100% - 20px); border-left:1px solid #ddd; left:-25px; top:10px;}
.inner .year .year_con ul li {position:relative; margin-bottom:10px; display:inline-block; width:100%; padding-top: 3px;}
.inner .year .year_con ul li:last-child {margin-bottom:0;}

/* li 말머리 */
.inner .year .year_con ul li:before {content:''; display:block; position:absolute; width:10px; height:10px; border-radius:50%; background:#fff; border:2px solid #5d61ec; left:-30px; top:8px; box-sizing:border-box;}

/* 첫번째 li 동그라미 말머리 큰 거! */		
.inner .year .year_con ul li:first-child:before {content:''; display:block; width:20px; height:20px; border-radius:50%; background:#fff; border: 1px solid #5d61ec; left:-35px; top:3px;}
.inner .year .year_con ul li:first-child:after {content:''; display:block; width:10px; height:10px; border-radius:50%; background:#5d61ec; position:absolute; left:-30px; top:8px;}
.inner .year .year_con ul li span {color:#222; float:left; display:block; width:60px; font-weight:600;}
.inner .year .year_con ul li em {color:#222; float:left; display:block; width:75px; font-weight:600; font-style: normal;}
.inner .year .year_con ul li p {float:right; display:block; width:calc(100% - 135px); position:relative; padding-left:12px; text-align:left;}
.inner .year .year_con ul li p:before {position: absolute; left: 0; top: 9px; width: 3px; height: 3px; content: ''; background: #5d61ec; border-radius:50%;}



@media(max-width:1175px){
	.albumList {width:690px}
}




@media(max-width:1000px){
  #Container .contents .lnb {display: none;}
  #Container .contents .contIn {width:100%;}
  .fiximg {display:none;}
  .contIn .title {background:#444;}
  .contIn .title h2 {color:#fff}
  .contIn .title .location {/*color:#fff; line-height:2*/ display:none;}
  #Container .subslide .slideIn {margin:0}
  .flximg {display:none;}
}

@media(max-width:950px){
  .s_right, .s_left {width:100%; text-align:center;}
}

@media(max-width:768px){
	ul.img { height: 250px; }
	ul.img li:hover, ul.img li:active { flex: 12; background: #eee;}

	/* 교회소개 */
	.inner h2 {font-size: 20px; color: #222;}
	.inner h3 {font-size: 16px; margin-top: 12px; color: #555;}
	.inner ul.intro_contents {margin: 20px 0px 40px 0px; flex-direction: column; align-items: flex-start;}
	.inner ul.intro_contents li { width: 100%; max-width: 100%; height: 200px; margin-bottom: 20px; }
	.inner ul.intro_contents li:nth-child(2) {background-size: cover;}
	.inner ul.intro_contents li:nth-child(3) {background-size: cover;}
	.inner ul.intro_contents li:last-child {margin-bottom: 0px;}
	.inner .sign::before { width: calc(100% - 240px); }
	.inner ul.intro_contents2 li { height: auto; margin: 0px auto 50px auto; flex-direction: column;}
	.inner ul.intro_contents2 li div:last-child { padding: 0px 0px 0px 0px; }
	.inner ul.intro_contents2 li div:first-child { width: 100%; max-width: 100%; height: 190px; text-align: left; background: transparent; }
	.inner ul.intro_contents2 li div:last-child p { margin: 16px auto 5px auto; }
	.inner ul.intro_contents2 li:first-child { margin: 20px auto 20px auto; }
	.inner ul.intro_contents2 li div:last-child em {font-size: 14px;}
	.inner ul.intro_contents2 li div:last-child em b {display: block;}
	.inner ul.intro_contents2 li div:last-child em br {display: none;}
	

	.inner2 h2 {font-size: 24px;}
	.inner2 h2::before { width: 28px; height: 28px; background-size: 28px; }
	ul.servant li { width: 48.39055793991416%; }

	ul.servant li:nth-child(2n) { margin-right: 0; }
	ul.servant li:nth-child(3n) { margin-right: 3.218884120171674%; }

	ul.servant li p { font-size: 14px; margin: 7px 0px 7px 0px; }
	ul.servant li p span { font-size: 18px; }
	ul.servant li em { font-size: 14px; }
	ul.servant li div.contact { font-size: 14px; padding: 0px 0px 0px 20px; }
	ul.servant li div.contact:hover::before { width: 16px; height: 16px; background-size: 16px; }
	ul.servant li div.contact::before { width: 16px; height: 16px; background-size: 16px; top: 1.5px; left: 0px;}


	.inner .year {padding:0 10px;}
	.inner .year .year_con h4 {width:100%; margin-bottom:25px;}
	.inner .year .year_con ul {width:100%; padding-left:40px;}
	.inner .year .year_con ul:before {left:15px;}
	.inner .year .year_con ul li {padding-top: 0px;}
	.inner .year .year_con ul li span {width:100%; font-size: 18px;}
	.inner .year .year_con ul li em {width:100%; font-size: 16px; margin-top: 2px;}
	.inner .year .year_con ul li p {width:100%; font-size: 14px; margin-top: 2px;}
}

@media(max-width:400px){
	ul.img { height: 200px; }
	ul.img li:hover, ul.img li:active { flex: 12; background: #eee;}
}


/*
@media(max-width:450px){
  .contIn .title .location {display:none;}
}
*/