/******** common ********/
.wrap {font-family: 'NotoSansKR', sans-serif; font-size: 1.6rem; color: #333;}
.wrap .pc_area {display: block;}
.wrap .mobi_area {display: none;}
.cont_size {max-width: 1020px; margin: 0 auto;}

@media screen and (max-width:1020px) {
	.wrap .pc_area {display: none;}
	.wrap .mobi_area {display: block;}
}

/*** header ***/
.header {width: 100%;}
.header_cont {}
.header_cont.cont01 {background-color:#1b1b1b;}
.header_cont.cont01 > .menu_user_area {display: flex; justify-content: space-between;}
.header_cont.cont02 {height: 90px; background: linear-gradient(180deg, rgba(159,35,35,1) 0%, rgba(88,20,19,1) 100%);}
.header_cont.cont02 > .cont_size { display: flex; align-items: center;}
.header .logo {}

@media screen and (max-width:1020px) {
	.header_cont.cont02 {padding: 10px 0; height: auto;}
	.header_cont.cont02 > .cont_size {position: relative;}
	.logo_img {padding-left: 10px; max-height: 50px;}
}

/* user menu */
.menu_user {display: flex; padding: 1em 0; font-size: 1.3rem; color: #b1b1b1;}
.menu_user > li {margin: 0 0.7em; transition: all 0.2s;}
.menu_user > li:hover {color: #4094c2;}
.menu_user .icon {padding-right: 3px;}

/* top menu */
.menu_top {flex: 0 0 80%;}
.menu_top_fst {display: flex; text-align: center;}
.menu_top_fst > li {position: relative; flex: 1 1 15%;}
.menu_top_fst > li > .link {display: block; padding: 37px 0; color: #eee; font-size:1.8rem;}
.menu_top_scd {display: none; position: absolute; top: 70px; left: 50%; width: 180px; padding: 1em 10px; transform: translateX(-50%); background-color: rgba(27,27,27,0.8); box-sizing: border-box; font-size: 1.5rem; border-radius:5px; opacity: 0.9; z-index: 99999999;}
.menu_top_scd > li {text-align: center; box-sizing: border-box;}
.menu_top_scd > li > .link {display: block; padding: 0.5em 0.5em; color: #fff; font-size:1.6rem; word-break: keep-all;}
.menu_top_scd > li:hover > .link {background-color: #fff; color:#0c3952;}

/* top menu mobile */
.menu_btn_sand {position: absolute; top: 50%; right: 10px; width: 30px; height: 25px; padding: 0; border: 0; transform: translateY(-50%); background: none; opacity: 0.8;}
.menu_btn_sand:hover {opacity: 0.9;}
.menu_btn_sand > .line {width: 100%; height: 3px; background-color: #fff;}
.menu_btn_sand > .line:nth-child(1) {position: absolute; top: 0; left: 0;}
.menu_btn_sand > .line:nth-child(2) {position: absolute; top: 50%; left: 0; transform: translateY(-50%);}
.menu_btn_sand > .line:nth-child(3) {position: absolute; bottom: 0; left: 0;}

.menu_top_mobi {overflow-y: auto; position: fixed; top: 0; right: -400px; height: 100%; width: 300px; background-color: #1b1b1b; box-shadow: -2px -2px 5px rgba(0,0,0,0.8); transition: right 0.3s; z-index: 99999999;}
.menu_top_mobi.show {right: 0px;}
.menu_top_mobi_fst {padding: 1em;}
.menu_top_mobi_fst > li {}
.menu_top_mobi_fst > li > .txt {position: relative; padding: 0.7em 0; font-size: 2.8rem; color: #FFF; border-bottom: 1px solid #333; cursor: pointer;}
.menu_top_mobi_fst > li > .txt .icon_arw {position: absolute; top: 50%; right: 6%; transform: translateY(-50%); font-size: 1.4rem; opacity: 0.3;}
.menu_top_mobi_fst > li > .txt .icon_arw.active {transform: translateY(-50%) rotate(180deg); opacity: 1;}
.menu_top_mobi_fst > li:hover > .txt {color: #fff;}
.menu_top_mobi_scd {display: none; padding-top: 0.7em;}
.menu_top_mobi_scd > li {}
.menu_top_mobi_scd > li > .link {position: relative; display: block; padding: 0.3em 0px 0.3em 15px; color: rgba(255,255,255,0.5); font-size:2rem;}
.menu_top_mobi_scd > li > .link:hover {color: rgba(255,255,255,1);}

.menu_user_mobi {display: flex; align-items: center; padding: 10px 0 color: #666; border-bottom: 1px solid #333;}
.menu_user_mobi > li {flex: 1 1 30%; text-align: center;}
.menu_user_mobi > li:last-of-type {flex: 0 0 50px;}
.menu_user_mobi > li > .link {display: block; padding: 0.7em 0; color: #b1b1b1; font-size: 1.5rem;}
.menu_user_mobi > li:hover > .link {color: #fff;}
.menu_user_mobi_btn_cls {width: 100%; border: 0; background: none; color: #555; font-size: 1.5rem;}
.menu_user_mobi_btn_cls:hover {color: #fff;}


/*** main ***/
.main {background-color: #1b1b1b;}
.main:not(.sub) {position:relative; /*height:1200px; max-height:1000px;*/}

@media screen and (max-width:1500px) {
  .main:not(.sub) {position:static; height:auto; max-height:none;}
}

/* banner */
.banner_area {position: relative; width: 100%; height: 0; padding-bottom: 40.58%;}
.banner_cont {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.banner_img {display: block; width: 100%; height: 100%;}

.banner_area .bm_swiper_area .bm_swiper_cont .swiper-pagination {bottom:180px;}

@media screen and (max-width:1600px) {
  .banner_area .bm_swiper_area .bm_swiper_cont .swiper-pagination {bottom:80px;}
}
@media screen and (max-width:1500px) {
  .banner_area .bm_swiper_area .bm_swiper_cont .swiper-pagination {bottom:25px;}
}

/* quick menu */
.menu_quick_area {position: relative;}
.menu_quick {width:100%; padding:20px; background-color: #1b1b1b; box-sizing:border-box;}
.menu_quick_list {display: flex; flex-wrap: wrap; justify-content: center;}
.menu_quick_list > li {position: relative; flex: 1 1 24%; height: 0; padding-bottom: 16.31%; margin: 3px; background: url('../img/body/') no-repeat;}/*padding-bottom: 81.57%;*/
.menu_quick_list > li > .link {overflow: hidden; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; text-align: center;}
.menu_quick_thumb {position: relative; width: 100%; height: 100%;}
.menu_quick_img {position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; object-fit: cover; transform: translate(-50%,-50%);}
.menu_quick_tit {position: absolute; bottom: 0; left: 0; width: 100%; padding: 0.5em 0; background-color: rgba(0,0,0,0.7); color: #fff; font-weight: 500; font-size: 1.5rem; transition: all 0.2s;}
.menu_quick_list > li:hover .menu_quick_tit {background-color: #881e1e; opacity: 0.9;}

.menu_quick_list > li.line-break {
flex: none;
width: 100%;
height: 0;
padding: 0;
}

@media screen and (max-width:768px) {
	.menu_quick_area {}
	.menu_quick {padding: 10px 0;}
	.menu_quick_list {padding: 3px; box-sizing: border-box;}
	.menu_quick_list > li {flex: 1 1 45%; padding-bottom: 40.785%;}
}
/*** footer ***/
.footer {width: 100%; background-color: #3d4049; border-top: 3px solid #9f2323;}
.footer_cont {display: flex; justify-content: space-between; padding: 2em 0;}
.footer_cont_info {}
.footer_cont_noti {}
.footer_cont_noti .bott_info_link {display: inline-block; margin-left: 10px; padding: 5px 10px; border: 1px solid #999; border-radius: 3px;}
.footer_cont .copy_txt {color: #999999; line-height: 1.5; font-size: 1.4rem;}
.footer_cont .copy_txt a {color: #999999;}
.footer_cont .copy_txt a:hover {color: #fff;}

@media screen and (max-width:768px) {
	.footer_cont {padding:10px;}
	.footer .footer_cont_info {width:100%;}
	.footer .footer_cont_info .bott_info_link {display: none;}
	.footer .footer_cont_noti.m_none {display: none;}
	.footer .copy_txt {text-align: center; font-size: 1.2rem;}
	
}

.menu_sitemap {position: relative; padding: 5% 0;}
.menu_sitemap:before {content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 15px solid #e8f5fd;}
.menu_sitemap_fst {display: flex;}
.menu_sitemap_fst > li {position: relative; flex: 15%;}
.menu_sitemap_fst > li:before {content: ''; position: absolute; top: 2em; left: 0; width: 0px; height: 1px; background-color: #fff; transition: all 0.3s;}
.menu_sitemap_fst > li:hover:before {width: 80px;}
.menu_sitemap_fst > li > .link {position: relative; display: block; margin-bottom: 1em; font-size: 2.5rem; transition: color 0.2s; color: #fff; opacity:0.9;}
.menu_sitemap_fst > li:hover > .link {color: #fff; opacity:1;}
.menu_sitemap_scd {}
.menu_sitemap_scd > li {position: relative; margin-bottom: 0.5em; font-size: 1.7rem;}
.menu_sitemap_scd > li:before {content: ''; position: absolute; bottom: -3px; left: 0; width: 0px; height: 1px; background-color: #fff; transition: all 0.3s;}
.menu_sitemap_scd > li:hover:before {width: 40px;}
.menu_sitemap_scd > li > .link {color: #fff; transition: color 0.2s; opacity:0.8;}
.menu_sitemap_scd > li > .link:hover {color: #fff; opacity:1;}

@media screen and (max-width:1020px) {
	.menu_sitemap_fst {padding: 0 6px; box-sizing: border-box;}
}
@media screen and (max-width:768px) {
	.menu_sitemap_fst {flex-wrap: wrap; text-align: center;}
	.menu_sitemap_fst > li {flex: 1 1 30%; margin-bottom: 1em;}
	.menu_sitemap_fst > li:before {left: 50%; transform: translateX(-50%);}
	.menu_sitemap_fst > li > .link {font-size: 1.8rem;}
	.menu_sitemap_scd > li > .link {font-size: 1.4rem;}
	.menu_sitemap_scd > li:before {left: 50%; transform: translateX(-50%);}
}
@media screen and (max-width:500px) {
	.menu_sitemap_fst > li {flex: 1 1 45%;}
}

/*** sub page ***/
/* main */
.main.sub {padding:0px 0; background-color: #fff;}
.main.sub .main_cont {display: flex; max-width: 1020px; min-height: 600px; margin: 0 auto;}
.top_include_area{flex: 1;}
.main_contents {flex: 5; max-width: 817px; padding-left: 40px; box-sizing: border-box;}

.sub_top {overflow:hidden; position:relative; width:100%; height:0; margin-bottom:20px; padding-bottom: 11.45%; font-family:'Jalnan',sans-serif;}
.sub_top_img {width: 100%;}
.sub_top_tit {position:absolute; top:50%; left:50%; display:block; transform:translate(-50%,-50%); font-size:4rem; font-weight:600; color:#fff; text-shadow:1px 1px 2px rgba(0,0,0,1), 1px 1px 2px rgba(0,0,0,1);}
.sub_top_tit:before {content:''; position:absolute; bottom:-5px; left:50%; display:block; width:calc(100% + 15px); height:2px; background:#fff; transform:translateX(-50%); box-shadow:1px 1px 2px rgba(0,0,0,0.8);}
.sub_top_tit:after {content:''; position:absolute; bottom:-8px; right:-15px; display:block; width:8px; height:8px; background:#fff; transform:rotate(45deg); box-shadow:1px 1px 2px rgba(0,0,0,0.8);}

@media screen and (max-width:1020px){
  .main.sub .main_cont {display:block; padding:0 10px; box-sizing:border-box;}
  .sub_top {padding-bottom: 21.45%;}
  .sub_top_img {transform: scale(2.8) translateX(-10%);}

}

/* left menu */
.menu_left {flex: 0 0 190px;}
.menu_left_tit {padding: 3em 0; background:url('../img/left/sub_left_bg.jpg'); background-size: cover; text-align: center; color: #fff; font-weight: 600; font-size: 2.3rem;}
.menu_left_tit_eng {display:block; margin-top: 10px; color:#878787; font-weight: 400; font-size:1.4rem;}
.menu_left_scd {border: 1px solid #ddd;}
.menu_left_scd > li {border-bottom: 1px solid #ddd;}
.menu_left_scd > li > .link {position: relative; display: block; padding: 0.9em 1em; font-size: 1.5rem; color: #555; font-weight: 500; word-break: keep-all;}
.menu_left_scd > li:hover > .link {background-color: #992122; color: #fff;}
.menu_left_scd > li.active > .link {background-color: #992122; color: #fff;}
.menu_left_scd > li > .link:before {content: ''; position: absolute; top: 50%; right: 1em; display: block; width: 0; height: 0; color: #fff; text-align: center; border-top: 5px solid transparent; border-left: 10px solid #fff; border-bottom: 5px solid transparent; transform: translateY(-50%);}

@media screen and (max-width:1020px){
  .menu_left {display:none;}
  .main_contents {flex-basis:100%; padding-left:0;}
}

/* 반응형 클래스 */
.uotc_100 {width:100% !important;}
.s_board_100 {width:100% !important;}
.media_board_100 {width:100% !important;}
.history_100 {width:100% !important;}
.steward_100 {width:100% !important;}
.member_100 {width:100% !important;}
.yearend_100 {width:100% !important;}
.worship_100 {width:100% !important;}
.weekly_100 {width:100% !important;}
.shichal_100 {width:100% !important;}
.work_100 {width:100% !important;}
.table_100 {width:100% !important;}

/* sub page */
.sub198_list_txt .txt {word-break: keep-all;}
.sub_organ_txt {word-break: keep-all;}
.sub_direc_list .txt {word-break: keep-all;}