@charset "utf-8";

/*
 * content CSS Document
 * KOWEB
 */

/*
 * color theme
 * #a67a00
 * #A7253D
 */

/* layout reset */
html, #content p, #content li, #content dt{font-size:17px;}
#header .bg_sub.active{background:rgba(233,233,233,1);}
.area_util{position: absolute;}
.fadein,
.animate-in{transition:all 0.6s ease-out 0s;}
.fadein{opacity:0;top:100px;position: relative;}
.animate-in{opacity:1;top:0;}

/* content style */
#content{min-height:520px; line-height:1.55; margin:0 auto; padding-bottom: 120px; text-align:center; background: #fff;}
#content .cnt_top{position: relative; max-width:1000px; width:95%; box-sizing:border-box; padding:72px 0 55px; margin: 0 auto;}
#content .title{font-size:35px; font-weight:400; color:#242424;}
#content .inr{max-width:1000px; width:90%; margin: 0 auto; text-align: left; word-break: keep-all;}
#content h3{position: relative; margin-top: 80px; margin-bottom: 25px; padding-bottom: 25px; font-size:30px; font-weight:300; color:#a67a00;}
#content h3:after{content:''; display: block; position: absolute; bottom: 0; left: 0; width: 28px; height: 1px; background: #8c7448;}
#content h3:first-child{margin-top: 0px;}
#content h4{position: relative;margin:50px 0 20px; font-size: 19px; font-weight: 500; color:#b22a45;}
#content h4:first-child{margin-top: 0px;}
#content .remark {display: block; font-size:0.6em; font-weight: 300;}
#content .emph{display: inline-block; font-weight: 500;}

/* list */
.list_normal > li{position: relative; padding-left: 20px;}
.list_normal > li:before{content:""; display: block; position: absolute; top: 10px; left: 0; width: 10px; height: 4px; background:url(/images/common/icon_bullet02.png) no-repeat 50%; background-size:contain;}
.list_normal > li + li{margin-top: 5px;}

.list_bible{position: relative; margin: 50px 0 30px;}
.list_bible > li{position: relative; padding:29px 0; border-bottom:1px solid #777;}
.list_bible > li:first-child{border-top:3px solid #333;}
.list_bible > li.list_more{display: none;}
.list_bible > li > h5{font-size:24px; margin-bottom:10px; font-weight:500;}
.speaker{display: block; position: relative; margin:15px 0 0; padding-left: 30px; font-size: 0.94em; font-family: "malgun gothic", sans-serif; font-weight: 600; color:#a67a00;}
.speaker:before{content:''; display: block; position: absolute; top: 2px; left: 0; width:22px; height: 28px; background:url(/images/contents/icon_mark.png) no-repeat 50%; background-size:contain;}
.bible{display: inline-block; margin:2px; font-size: 11.5px; font-family: "malgun gothic", sans-serif; font-weight: bold;}
.btn_more{display: block; position: relative; width:185px; box-sizing:border-box; padding:15px; margin: 0 auto; background: transparent; border:2px solid #A7253D; color: #A7253D; outline:0;}
.btn_more:after{content:''; display: block; position: absolute; top: -7px; right: -7px; width: 16px; height: 22px; background: #fff url(/images/contents/icon_church.png) no-repeat 100% 0;}
.btn_more:hover{background: #a7253d; color: #fff;}
.btn_more:hover:after{background: transparent url(/images/contents/icon_church_on.png) no-repeat 100% 0;}

/* box */
.box_bible{overflow: hidden; width: 100%; margin:80px 0 0;}
.box_bible .inner{overflow: hidden; width: 103%;}
.box_bible .item{float: left; width: 47%; box-sizing:border-box; margin: 0 3% 30px 0; vertical-align: top;}
.box_bible .item dt{display: block; padding: 15px 20px; background:#a67a00; border-width:1px 1px 0 1px; font-size: 18px; font-weight: 500; color: #fff;}
.box_bible .item dd{padding:20px;border-bottom:1px solid #ddd;;}
.box_bible .item.w100{width: 97%; min-height: auto;}

.training{overflow: visible; position: relative; margin: 0 auto; text-align: center; z-index:2;}
.training .inner{overflow: visible;}
.training .item{position: relative; padding:15px; background: rgba(255,255,255,.9); border:1px solid #A7253D;}
.training .item:before{content:""; display: block; position: absolute; top: 0px; right: 9px; width: 20px; height: 34px; background: #fff url(/images/contents/icon_mark.png) no-repeat 100% 0; background-size:contain;}
.training .item dt{display: block; position: relative; background: transparent; color:#444;}
.training .item dt:after{content:''; position: absolute; top: 100%; left: 50%; width: 1px; height: 10px; margin-top: -5px; background: #444;}
.training .item dd{border:none;}
.training .item .bible{font-size: 15px; color: #A7253D;}
.box_text p + p{margin-top: 29px;}

/* 교회소개 */
.box_greeting{position: relative;}
.box_greeting img{display: block;}
.box_greeting .text{display: inline-block; position: absolute; bottom: 0; right: 0; box-sizing:border-box; margin:0 -2.5% -2.5% 0; padding:40px 50px; background: #a67a00 url(/images/contents/img_bg_deco.jpg) no-repeat 100% 100%; font-size: 20px; font-weight: 100; color:#fff;}
.box_greeting .text em{font-weight: 500;}

.list_circle{padding-top:10px; margin-bottom:50px; font-size: 0; text-align: center;}
.list_circle > li{display: inline-block; margin:0 30px;}
.list_circle > li:first-child{margin-left: 0;}
.list_circle > li:last-child{margin-right: 0;}
.list_circle > li span{display: block; font-size: 27px; font-weight: 500;}
.list_circle > li span:before{content:""; display: block; width: 150px; height: 150px; margin: 0 auto 15px; border-radius:50%;}
.list_circle > li .remark{color:#999;}
.list_circle > li.circle01 span:before{background: #a67a00 url(/images/contents/icon_greeting01.png) no-repeat 50%; background-size:50%;}
.list_circle > li.circle02 span:before{background: #d29a00 url(/images/contents/icon_greeting02.png) no-repeat 50%; background-size:50%;}
.list_circle > li.circle03 span:before{background: #d29a02 url(/images/contents/icon_greeting03.png) no-repeat 50%; background-size:50%;}

.tabCol{margin:0 0 50px 0;}
.tabCol ul{width: 100%;}
.tabCol ul > li{opacity: .6; position: relative; box-sizing:border-box; padding:20px; border:1px solid #ddd; border-left-width:0; background: #fff; cursor:pointer; text-align: center; word-break:keep-all;}
.tabCol ul > li:first-child{border-left-width:1px;}
.tabCol ul > li:hover{opacity: 1;}
.tabCol ul > li.on{opacity: 1; padding-right: 25px; border-top-width:2px; border-color:#A7253D; border-bottom-width:0; color:#A7253D;}
.tabCol ul > li.on:before{content:""; display: block; position: absolute; top: 0px; right: 9px; width: 20px; height: 34px; background: #fff url(/images/contents/icon_mark.png) no-repeat 100% 0; background-size:contain;}
.tabCol ul > li.on:after{content:""; display: block; position: absolute; top: 0; left: 0; width: 1px; height: 100%; background: #A7253D;}
.tabCnt .cnt_item{display: none;}
.tabCnt .cnt_item.on{display: block;}
.tabCnt .bible{color:#A7253D;}

.box_intro{position: relative; padding: 35px; border:1px solid #d6d6d6; margin:29px 0;}
.box_intro p{font-size: 15px;}
.box_intro h4{position: absolute; top: -16px; left: 0; width: 100%; text-align: center;}
.box_intro h4 > span{display: inline-block; position: relative; padding:0 40px; background: #fff; font-size: 20px; font-weight: 400;}
.box_intro h4 > span:before,
.box_intro h4 > span:after{content:""; display: block; position: absolute; top: 50%; width: 4px; height: 4px; margin-top: -2px; background: #B22A45;}
.box_intro h4 > span:before{left: 20px;}
.box_intro h4 > span:after{right: 20px;}
ul .box_intro {margin:80px 0 50px;}

.list_timeline > li{overflow: hidden; position: relative; padding:20px 0 20px 40px; margin-top: 30px; line-height:1.73; font-size: 16px; word-break:break-all;}
.list_timeline > li:before{content:""; display: block; position: absolute; top: 0; left: 15px; width: 1px; height: 100%; background: #a67a00;}
.list_timeline > li:after{content:""; display: block; position: absolute; top: 0; left: 10px; width: 11px; height: 11px; box-sizing:border-box; border:3px solid #a67a00; background: #fff; border-radius:50%; }
.list_timeline > li img{display: inline-block; box-sizing:border-box; padding:5px; border:1px solid #ddd; border-radius:3px;}
.list_timeline > li .img_timeline01{float: right; margin:10px 0 15px 15px;}
.list_timeline > li .img_timeline02{float: left; margin:10px 15px 15px 0;}
.list_timeline .emph{display: inline;}

.box_square {overflow: hidden; width: 100%;}
.box_square > ul{overflow: hidden; width: 102%; font-size: 0;}
.box_square > ul > li{display: inline-block; width: 23%; margin:0 2% 10px 0; box-sizing:border-box; border:1px solid #ddd; vertical-align: top; text-align: center;}
.box_square > ul > li a{display: block; padding:10px 15px; font-size: 13px; font-family:"malgun gothic", sans-serif; font-weight: 600;}
.box_square > ul > li a:hover{background:#fff4f6; border-color:#B22A45; color:#B22A45;}
.box_square button{display: none; position: relative; width: 100%; padding:18px 18px; margin: 0; background:#f3f3f3; border:1px solid #d6d6d6; font-weight: 400; text-align: left; outline:0;}
.box_square button:after{content:""; display: block;position: absolute;top: 50%;right: 18px;width: 22px;height: 35px;margin-top: -17.5px;background: url(/images/common/icon_dot_m.png) no-repeat 50%;background-size: contain;}

#content .tb_wrap{width: 100%;}
#content .tb_normal{position: relative; width: 100%; min-width:540px; table-layout:fixed; border-top:2px solid #a67a00;}
#content .tb_normal:after{content:''; display: block; position: absolute; top: 0; right: -1px; width: 2px; height: 100%; background: #fff;}
#content .tb_normal th, #content .tb_normal td{padding:10px 15px;border: 1px solid #e1e1e1;border-width:0 1px 1px 0;font-size: 15px;}
#content .tb_normal th{font-size: 17px;text-align: center;}
#content .tb_normal thead th{padding:15px 20px; background:#a67a00; border-color:#a67a00; font-weight: 600; color:#fff;}

.map_area{width: 100%; height:500px;}
.map_area .root_daum_roughmap .wrap_map {width: 100%; height: calc(100% - 33px);}
.map_text{padding: 14px 10px; margin-top: 10px; background: #a67a00; border-top-width:0; text-align: center;}
.map_text span{display: inline-block; position: relative; padding-left: 12px; margin:3px 12.5px; font-size: 15px; color:#fff;}
.map_text span:before{content:''; display: block; position: absolute; top: 10px; left: 0; width: 5px; height: 5px; background:#7c5c02; border-radius:50%;}
.map_text span em{font-weight: 500;}

/*  */
/* 집회안내 */
.content .table01 {box-sizing: border-box; width: 100%;}
.table01 th {padding: 20px; background: #a67a00; color: #fff; text-align: center;}
.table01 td {padding: 20px 35px; border: 1px solid #e1e1e1; color: #333; background: #fff; text-align: center;}

/*  */
/* 설교안내 */
/* #content > .cate_sub > div > ul > li {display: inline-block; margin: 0 5px 12px 5px; text-align: center;} */
#content > .cate_sub > div > ul.cnt_tab_menu {position: relative; width: 100%; overflow: hidden;}
#content > .cate_sub > div > ul.cnt_tab_menu > li.w20 {position: relative; float: left; width: 49%; margin-right: 1%;}

#content > .cate_sub > div > ul > li {display: inline-block; text-align: center; margin-top: 3px;}
/* #content > .cate_sub > div > ul > li > a {display: block; padding: 15px 40px; font-size: 16px; font-weight: 300; border: 1px solid #ddd; color: #888; transition: all 0.2s ease-out 0s;} */
#content > .cate_sub > div > ul > li > a {display: block; font-size: 16px; font-weight: 300; border: 1px solid #ddd; color: #888; transition: all 0.2s ease-out 0s;}
#content > .cate_sub > div > ul > li > .on, .cate_sub > div > ul > li > a:hover {border: 1px solid #a67a00; color: #a67a00;}



@media all and (max-width:1024px){
	html, #content p, #content li, #content dt{font-size:15px;}
	.box_greeting .text{padding:30px 40px; font-size: 17px;}
	.list_circle > li span:before{width: 130px; height: 130px;}
	.box_square > ul > li{width: 31.333%;}
}
@media all and (max-width:780px){
	#content{padding-bottom: 40px;}
	#content .inr{word-break: break-all;}
	#content .cnt_top{padding:50px 0 32px;}
	#content .title{font-size:30px;}
	#content h3{margin-top: 50px; margin-bottom: 20px; padding-bottom: 20px; font-size: 23px; font-weight: 400;}
	#content h4{margin: 30px 0 10px; font-size: 17px;}

	.list_bible{margin: 30px 0 20px;}
	.list_bible > li{padding: 20px 0;}

	.box_bible{margin-top: 50px;}
	.box_bible .inner{width: 100%;}
	.box_bible .item{float: none; width: 100% !important; min-height:auto; margin:0 0 20px 0;}
	.box_bible .item dt{padding: 10px 15px;}
	.box_bible .item dd{padding:15px;}
	.box_text p + p{margin-top: 20px;}

	.training:before{top: -37px; left: 50%; margin-left: -181px;}

	.list_circle{margin-bottom: 30px;}
	.list_circle > li{margin:0 15px;}
	.list_circle > li span{font-size: 20px;}
	.list_circle > li span:before{width: 100px; height: 100px;}

	.box_intro{padding: 25px;}
	.box_intro h4{top: -14px; max-width:90%; left:5%;}
	.box_intro h4 > span{padding:0 35px; font-size: 18px;}
	.box_intro h4 > span:before, .box_intro h4 > span:after{top: 12px; margin: 0;}
	ul .box_intro {margin:50px 0 30px;}

	.list_timeline > li{padding-left: 25px;}
	.list_timeline > li:before{left: 9px;}
	.list_timeline > li:after{left: 4px;}

	.tabCol{margin:0 0 30px 0;}

	.box_square button{display: block;}
	.box_square > ul{display: none; overflow-y: auto; width: 100%; height:246px; box-sizing:border-box; border:1px solid #ddd; border-width:0 0 1px 1px;}
	.box_square > ul > li{width: 50%; margin: 0; text-align: left; border-width:1px 1px 0px 0;}
	.box_square > ul > li:first-child, .box_square > ul > li:first-child + li{border-top-width:0;}
	.box_square > ul > li a{display: inline-block; bottom: 0;}
	.box_square > ul > li a:hover{border-color:#ddd;}

	#content .tb_normal td{font-size: 15px;}

	#content .tb_normal th, #content .tb_normal td{padding:8px 10px; font-size: 14px;}

	.map_area{height: 300px;}
}
@media all and (max-width:640px){
	html, #content p, #content li, #content dt{font-size:14px;}
	#content .cnt_top{padding:30px 0 22px;}
	#content .title{font-size:25px;}
	#content h3{font-size: 19px;}
	#content h4{font-size: 16px;}

	.btn_more{width: 100%; padding:7px 10px; font-size: 14px;}

	.box_greeting .text{position: static; margin: 0; padding:20px 30px; width: 100%; text-align:center;}
	.box_greeting .text br{display: none;}

	.box_intro h4 > span{font-size: 17px;}

	.list_timeline > li .img_timeline01,
	.list_timeline > li .img_timeline02{float: none; display: block; margin: 0 0 20px 0;}
}
@media all and (max-width:540px){
	#content .tb_wrap{width: 100%; overflow-x: scroll;}
	.box_intro.ty1{padding-top: 50px;}
}
@media all and (max-width:480px){
	#content .inr{width:96%;}

	.list_circle > li{margin:0 5px;}
	.list_circle > li span{font-size: 17px;}
	.list_circle > li span:before{width: 85px; height: 85px;}

	.box_square > ul > li{width: 100%;}
	.box_square > ul > li:first-child + li{border-top-width:1px;}
}