.wrap {width: 100%; font-family: 'NanumGothic', sans-serif;}

body .wrap .pc_area {display: block;}
body .wrap .mobi_area {display: none;}

/********* header *********/
.header {width: 100%;}
.header_sec01 {width: 100%; margin-bottom: 1em;}
.header_sec02 {width: 100%; background-color: #3a9b4d; box-shadow: 1px 1px 1px rgba(0,0,0,1.0);}
.header_sec_cont {width: 1200px; margin: 0 auto;}

.logo {display: inline-block;}
.logo_gapck_img {height:80px; padding-left:5px; padding-bottom:5px;}
.logo > .link {display: block; margin-top: 1em;}

/* tnb */
.tnb {float: right;}
.menu_user1 {font-size: 0; padding: 20px 0; text-align: right;}
.menu_user1 > li {display: inline-block; padding: 0 8px; font-size: 14px; border-right: 1px solid #aaa;}
.menu_user1 > li:hover {font-weight: bold;}
.menu_user1 > li:last-of-type {border-right:0;}

.menu_user2 {font-size: 0; text-align:right;}
.menu_user2 > li {display: inline; font-size: 11px; margin: 0 2px;}
.login_ipt {width: 95px; height: 19px; padding: 1px 3px; font-size: 12px; box-sizing: border-box;}
.btn_user {display: inline-block; height: 19px; padding: 0 10px; color: #fff; background-color: #ccc; vertical-align: middle; box-sizing: border-box; line-height: 19px; text-align: center;}
a.btn_user:link {color:#fff;}
.btn_admin {background-color: #3a9b4d;}
.btn_login {background-color: #c30d23;}
.btn_join {background-color: #818181;}

/* gnb */
.gnb {width: 1200px; margin: 0 auto;}
.menu_top {font-size: 0;}
.menu_top > li {float: left; position: relative; width: calc(100% / 8); box-sizing: border-box; text-align: center;}
.menu_top > li > .link {display: block; padding: 15px 0; font-size:16px; font-weight: bold; color: #fff;}
.menu_top > li > .link:hover {color: #ffe081;}
.menu_top_scd {display: none; position: absolute; top: 42px; left: 50%; width: 170px; margin-left: -85px; padding: 15px; font-size: 15px; background-color: #fff; text-align: center; border-radius: 10px; box-sizing: border-box; box-shadow: 1px 1px 2px rgba(0,0,0,0.5); z-index:9999;}
.menu_top_scd > li {border-bottom: 1px solid #eee;}
.menu_top_scd > li > .link {display: block; padding: 5px 0; font-size: 14px; color: #333;}
.menu_top_scd > li:hover {border-bottom: 1px dashed #aaa;}
.menu_top_scd > li > .link:hover {font-weight: bold;}
.menu_top_trd {}
.menu_top_trd > li {border-top:1px solid #eee;}
.menu_top_trd > li:hover .link {font-weight:bold;}
.menu_top_trd > li > .link {display:block; font-size:13px; padding:5px 0;}

/********* main *********/
.main {}
.main_cont {clear: both; width: 1200px; margin: 0 auto; padding:60px 0;}

/* banner */
.banner_main_area {position:relative; width:100%; height:0; padding-bottom:26.05%;}
.banner_main_cont {position:absolute; top:0; left:0; width:100%; height:100%;}
.banner_main_cont > img {width: 100%; height:100%;}

/* board */
.news_area {margin-bottom: 60px;}
.board_list_area {float: left; overflow: hidden; position: relative; width: 48%; height: 225px;}
.board_btn_tab {border-bottom: 1px solid #eee;}
.board_btn_tab .btn_tab_txt {position: relative; display: inline-block; padding: 10px 0; width: 100px; text-align: center; border-radius: 3px; border-left: 1px solid #e8e8e8; border-top: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; font-weight: bold; color: #666; font-size: 14px; background-color: #e8e8e8; cursor: pointer; top: 1px;}
.board_btn_tab .btn_tab_txt:hover {background-color: #fff;}
.board_btn_tab .btn_tab_txt.active {background-color: #fff; border-left: 1px solid #ccc; border-top: 1px solid #ccc; border-right: 1px solid #ccc;}

.board_btn_more {display: none; position: absolute; top: 10px; right: 10px; font-size: 13px;}
.board_btn_more:hover {font-weight: bold;}
.board_btn_more.noti {display: block;}

.board_list {position: absolute; bottom: 0; width: 100%; display: block; margin-top: 10px; background-color: #fff;}
.board_list > li {border-bottom: 1px solid #e8e8e8;}
.board_list > li:hover {border-bottom: 1px dashed #e8e8e8;}
.board_list > li > .link {overflow: hidden; display: block; padding: 8px; font-size: 14px; box-sizing: border-box;}
.board_list > li > .link:hover {font-weight: bold;}
.board_list_txt {float: left; width: 75%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.board_list_date {float: right; width: 15%; text-align: right;}
.board_list.free {right: 100%;}

/* gallery*/
.board_btn_tab2 {border-bottom: 1px solid #eee;}
.board_btn_tab2 .btn_tab_txt2 {position: relative; display: inline-block; padding: 10px 0; width: 140px; text-align: center; border-radius: 3px; border-left: 1px solid #e8e8e8; border-top: 1px solid #e8e8e8; border-right: 1px solid #e8e8e8; font-weight: bold; color: #666; font-size: 14px; background-color: #e8e8e8; cursor: pointer; top: 1px;}
.board_btn_tab2 .btn_tab_txt2:hover {background-color: #fff;}
.board_btn_tab2 .btn_tab_txt2.active {background-color: #fff; border-left: 1px solid #ccc; border-top: 1px solid #ccc; border-right: 1px solid #ccc;}
.gallery_area {float: right; overflow: hidden; position: relative; width: 48%; height: 225px;}
.gall_tit {padding: 10px 0; margin-bottom: 20px; font-size: 14px; color: #666; border-bottom: 1px solid #eee;}
.pic_btn_more {position: absolute; top: 10px; right: 10px; font-size: 13px;}
.pic_btn_more:hover {font-weight: bold;}
.pic_btn_more.event {display:none;}
.gall_list {position: absolute; bottom: 0; width: 100%; display: block; margin-top: 10px; background-color: #fff; font-size:0;}
.gall_list > li {position:relative; display: inline-block; width: calc((100% - 20px) / 3); height: 0; padding-bottom:28.7%; font-size: 14px; box-sizing: border-box;}
.gall_list > li:nth-of-type(2) {margin: 0 10px;}
.gall_list > li > .link {display: block; position: absolute; overflow: hidden; width:100%; height: 100%;}
.gall_list .thumbnail {overflow:hidden; position:absolute; top:0; left:0; width:100%; height:100%;}
.gall_list .centered {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    transform: translate(50%, 50%);}
.gall_list_img {    
	position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%;}
.gall_list_img.portrait {width: 100%; height: auto;}
.gall_list_info {position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 18px 12px; box-sizing: border-box; color: #fff; font-weight: bold; text-align: left; background-color: rgba(0,0,0,0.5); transition: opacity 0.3s; opacity: 0;}
.gall_list > li:hover .gall_list_info {opacity: 1;}
.gall_list_tit {margin-bottom: 10px;}

.event_list {position: absolute; bottom: 0; right:100%; width: 100%; display: block; margin-top: 10px; background-color: #fff; font-size:0;}
.event_list > li {position:relative; display: inline-block; width: calc((100% - 20px) / 3); height: 0; padding-bottom:28.7%; font-size: 14px; box-sizing: border-box;}
.event_list > li:nth-of-type(2) {margin: 0 10px;}
.event_list > li > .link {display: block; position: absolute; overflow: hidden; width:100%; height: 100%;}
.event_list .thumbnail {overflow:hidden; position:absolute; top:0; left:0; width:100%; height:100%;}
.event_list .centered {
	position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    -webkit-transform: translate(50%, 50%);
    -ms-transform: translate(50%, 50%);
    transform: translate(50%, 50%);}
.event_list_img {    
	position: absolute;
    top: 0;
    left: 0;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: auto;
    height: 100%;}
.event_list_img.portrait {width: 100%; height: auto;}
.event_list_info {position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 18px 12px; box-sizing: border-box; color: #fff; font-weight: bold; text-align: left; background-color: rgba(0,0,0,0.5); transition: opacity 0.3s; opacity: 0;}
.event_list > li:hover .event_list_info {opacity: 1;}
.event_list_tit {margin-bottom: 10px;}


/* quick */
.btn_quick_menu {display: inline-block; padding: 27px; margin-bottom: 30px; box-sizing: border-box; color: #fff;}
.btn_quick_menu:first-of-type {float: left; width: 48%; height: 100px; background: url("../img/body/quick_bg_data.jpg") no-repeat; vertical-align: top; transition: all 0.2s; background-size: 100% 100%;}
.btn_quick_menu:last-of-type {float: right; width: 48%; height: 100px; background: url("../img/body/quick_bg_loca.jpg") no-repeat; vertical-align: top; transition: all 0.2s; background-size: 100% 100%;}
.quick_menu_tit {padding-top:10px; color: #fff; font-size: 24px; font-weight: bold; }
.quick_menu_txt {color: #fff;}
.btn_quick_menu:hover {background-size: 102% 102%;}

/* ÆäÀÌÁö ¾÷ ´Ù¿î ¹öÆ° */
.page_scroll_wrap {position:absolute; right:-20px;}
.page_scroll {position:fixed; bottom:300px;}
.page_scroll > a {display:block; margin:3px 0; padding:12px; font-size:20px; border:1px solid #ccc; background-color:rgba(255,255,255,0.5);}
.page_scroll .btn_page_up {padding-bottom:5px; border-top-right-radius: 6px; border-top-left-radius: 6px;}
.page_scroll .btn_page_down {padding-top:5px; border-bottom-right-radius: 6px; border-bottom-left-radius: 6px;}

/********* footer *********/
.footer {clear: both; background-color: #ddd;}
.foot_cont {position:relative; width: 1200px; margin: 0 auto; padding: 35px 0 45px; text-align: right;}
.exp_banner_area {position:absolute; top:50px; left:330px;}
.logo_foot {float: left;}
.foot_info {float: right; font-size:13px;}
.foot_txt {font-size: 13px; line-height: 1.5;}
.bott_info_link {font-size: 13px; color: #333;}
.bott_info_link:hover {font-weight: bold;}

/**** mobile css ****/
.mobi_login {position: absolute; top: 0; right: 0; padding: 3px; color: #3a9b4d; font-weight: bold; opacity: 0.5;}
.mobi_join {position: absolute; top: 0; right: 50px; padding: 3px; color: #3a9b4d; font-weight: bold; opacity: 0.5;}

/* gnb mobile */
.gnb_mobi {position: relative; width: 90%; height: 30px; margin: 0 auto; font-size: 0; border: 1px solid #dadada; background:linear-gradient(#fefefe, #f2f2f2); background: -ms-linear-gradient(#fefefe, #f2f2f2); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#fefefe', endColorstr='#f2f2f2');/*For IE7-8-9*/ z-index: 9999999;}
.slct_menu_txt {width: 100%; height: 100%; padding: 7px 13px; box-sizing: border-box; color: #666; font-size: 13px; cursor: pointer;}
.slct_menu_btn {position: absolute; top: 0; right: 0; width: 46px; height: 100%; padding: 7px; box-sizing: border-box; border-left: 1px solid #ccc; cursor: pointer;}
.slct_menu_btn > .line {display: block; width: 21px; height: 3px; margin: 0 auto 3px; background-color: #c7c5c5;}

.slct_menu_list {display: none; position: absolute; top: 30px; left: 0; width: 100%; background-color: #f9f9f9; z-index: 9999999; font-size: 14px; border-bottom:1px solid #ccc;}
.slct_menu_list > li {background-color: #fff; box-sizing: border-box; border-top:1px solid #ccc; border-right:1px solid #ccc; border-left:1px solid #ccc; cursor: pointer;}
.slct_menu_fst {padding: 11px 33px;}
.slct_menu_list_scd {display: none; background-color: #f9f9f9;}
.slct_menu_list_scd > li {position:relative; border-top: 1px solid #ccc;}
.slct_menu_list_scd > li:before {content:''; position:absolute; top:18px; left:35px; width:4px; height:1px; background-color:#333;}
.slct_menu_list_scd > li > .link {display: block; padding: 11px 33px 11px 46px;}
.slct_menu_list_trd {}
.slct_menu_list_trd > li {}
.slct_menu_list_trd > li > .link {display:block; padding:8px 50px; box-sizing:border-box;}

.board_list_area .board_btn_tab_mobi {position: relative; top:1px; display: inline-block; padding: 10px 20px; border-radius: 3px; border-left: 1px solid #ddd; border-top: 1px solid #ddd; border-right: 1px solid #ddd; font-size: 14px; font-weight: bold; color: #666; background-color: #fff;}
.gallery_area .gall_btn_tab_mobi {position: relative; top:1px; display: inline-block; padding: 10px 20px; border-radius: 3px; border-left: 1px solid #ddd; border-top: 1px solid #ddd; border-right: 1px solid #ddd; font-size: 14px; font-weight: bold; color: #666; background-color: #fff;}

/**** mobile size ****/
@media screen and (max-width:1200px){
	.main_cont {padding: 10px; padding-top: 20px; box-sizing: border-box;}
	body .wrap .pc_area {display: none;}
	body .wrap .mobi_area {display: block;}
	
	.header {margin-bottom: 15px;}
	.header_sec02 {background-color: transparent; box-shadow: none;}
	.header_sec_cont {width: 100%; text-align: center;}
	.logo {margin: 0 auto; text-align: center;}
	.logo_img {width: auto; max-height: 70px;}
	.logo_gapck_img {height:50px;}
	
	.board_list {}
	
	.gnb {width: 100%;}
	.main_cont {width: 100%;}
	.foot_cont {width: 100%;}
	
	.board_list_area {float: none; width: 100%; height: auto;}
	.board_list_area .board_btn_more {display: block;}
	.wrap .board_list_area .board_btn_tab_mobi {display: inline-block;}
	.wrap .gallery_area .gall_btn_tab_mobi {display: inline-block;}
	.board_btn_more.free {top: 213px;}
	.board_list_txt {width: 78%;}
	.board_list_date {width: 20%;}

	.gallery_area {float: none; width: 100%; margin-top: 20px;}
	
	.board_list {position: static; border-top: 1px solid #ddd; margin: 0 0 10px 0;}
	.gall_list {position:static; border-top: 1px solid #ddd; margin: 0 0 10px 0; padding:10px 0;}
	.event_list {position:static; border-top: 1px solid #ddd; margin: 0 0 10px 0; padding:10px 0;}
	.gall_list > li {width: calc(100%/3 - 10px); height: auto;}
	.event_list > li {width: calc(100%/3 - 10px); height: auto;}
	
	.gallery_area {float: none; width: 100%; height: auto;}
	.gallery_area .pic_btn_more {display: block;}
	.wrap .gallery_area .pic_btn_tab_mobi {display: inline-block;}
	.pic_btn_more.gall {top: 235px;}
	.gall_list_txt {width: 78%;}
	.gall_list_date {width: 20%;}

	.main_cont .btn_quick_menu {float: none; width: 100%; height: auto; margin-bottom: 20px;}
	.btn_quick_menu .quick_menu_tit {padding: 10px 0; font-size:20px;}
	
	.foot_cont {text-align: center; padding: 30px 0;}
	.exp_banner_area {position:static;}
	.logo_foot {display: none;}
	.foot_info {float: none;}
	.foot_info > address {display: none;}
	.bott_info_link {display: none;}
	
}
@media screen and (max-width:768px) {
	/* .banner_main_area {padding-bottom:66.66%;}
	.banner_main_cont {transform:translateX(-50%); left:50%; width:250%;} */
	.main {overflow: hidden; position: relative;}
	.news_area {margin-bottom:20px;}
}
@media screen and (max-width:450px) {
	.board_list_txt {width: 70%;}
	.board_list_date {width: 28%;}
}

/***************** sub page *****************/
.main_sub {width: 1200px; margin: 0 auto; padding: 50px 0;}
.top_tit_area {height: 200px; background: url('../img/top/top_tit_bg.jpg') no-repeat; background-size: cover;}
.top_tit {font-size: 35px; font-weight: normal; color: #037f1c; text-align: center; line-height: 180px;}

/* left menu */
.left_area {float: left; width: 230px; box-sizing: border-box;}
.left_tit {width: 100%; padding: 30px; font-size: 24px; color: #fff; background-color: #51b765; box-sizing: border-box; text-align: center;}
.menu_left {width: 100%; text-align: center;}
.menu_left > li {border-left: 1px solid #ccc; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc;}
.menu_left > li > .link {display: block; padding: 16px 0; color: #444; font-size: 14px;}
.menu_left > li:hover .link {background-color: #f2f2f2; font-weight: bold;}
.menu_left_trd {}
.menu_left_trd > li {border-top:1px dashed #eee;}
.menu_left_trd > li > .link {display:block; padding:5px 0; font-size:13px;}

/* sub main content*/
.main_cont_sub {position:relative; float: right; width: 900px; min-height: 500px;}
#solution_title_comm {position: relative !important; height: 120px !important; font-size: 35px !important; color: #333 !important; font-weight: normal !important; line-height: 90px !important;}
#solution_title_comm:before {content: ""; display: block; position: absolute; top: 0; left: 0; width: 40px; height: 3px; background-color: #333;}

/* sub main select menu */
.slct_menu_area {position: relative; text-align: center;}
.slct_tit {padding: 10px 0; font-size: 20px; font-weight: bold; color: #fff; background-color: #51b765;}
.slct_txt_slctd {height:34px; padding: 8px 0; box-sizing: border-box; border: 1px solid #ccc; font-size: 13px; background-color: #f2f2f2; cursor: pointer;}
.slct_menu {display: none; position: absolute; top: 80px; width: 100%; box-shadow: 1px 0px 1px rgba(0,0,0,0.5); z-index: 99999; background-color: #fff;}
.slct_menu > li {border-bottom: 1px solid #ccc;}
.slct_menu > li > .link {display: block; padding: 8px 0; font-size: 13px;}
.slct_menu > li > .link:hover {background-color: #f2f2f2;}
.slct_icon {position: absolute; top: 53px; right: 20px; font-size: 20px; z-index: 99999; color: #999;}

@media screen and (max-width:1200px) {
	.left_area {float: none; width: 100%;}
	.left_tit {width: 100%; padding: 10px 0; font-size: 20px;}
	
	.main_sub {width: 100%; padding: 0;}
	.main_cont_sub {float: none; width: 100%; padding: 30px 10px; box-sizing:border-box;}
	#solution_title_comm {font-size: 25px !important; height: 70px !important; line-height: 70px !important; text-align:left !important; font-weight:normal !important;}
	#solution_title_comm * {height: 70px !important; line-height: 70px !important; font-weight:normal !important;}
}


/* r class */
.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;}