/* ie 적용 */
body {scrollbar-base-color: #453A34; scrollbar-arrow-color: #fff; scrollbar-Track-Color: #333;}
/* 크롬, 사파리 적용*/
::-webkit-scrollbar {width: 10px;} /* 스크롤 바 */
::-webkit-scrollbar-track {box-shadow: inset 0 0 5px grey; border-radius: 10px;} /* 스크롤 바 밑의 배경 */
::-webkit-scrollbar-thumb {background: #523E33; border-radius: 10px;} /* 실질적 스크롤 바 */
::-webkit-scrollbar-thumb:hover {background: #453A34;} /* 실질적 스크롤 바 위에 마우스를 올려다 둘 때 */

/******** common ********/
.wrap {overflow: hidden; position: relative; width: 100%; font-family: 'NotoSansKR', sans-serif; color: #333;}
.wrap .pc_area {display: block;}
.wrap .mobi_area {display: none;}
.wrap .cont_size {width:1250px; margin:0 auto;}
.f_str {font-weight:900;}
.c_white {color:#fff !important;}

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

@media screen and (max-width:768px) {
  .main_sub_cont .content {width:90%; margin:0 auto;}
}

/******** header ********/
.header {}
.header_cont {padding:30px 0;}
.header_cont01 {position:relative; padding:0 30px; box-sizing:border-box; z-index: 9999;}

.header_cont02 {display:none;}
.menu_top {margin-top:20px;}
.menu_top_fst {display:table; width:100%; table-layout: fixed;}
.menu_top_fst > li {display:table-cell;}
.menu_top_fst > li > .link {display:block; height:80px; line-height:80px; font-weight:bold; font-size:30px; text-align: center;}
.menu_top_scd {min-height:345px;  padding: 20px 0; background:#eae3e0; text-align: center; z-index: 999;}
.menu_top_scd > li {padding:10px 0;}
.menu_top_scd > li > .link {position:relative; color:#555; font-size:18px;}
.menu_top_scd > li > .link:hover {color:#684C2E; font-weight:bold;}


/* logo */
.logo {display:inline-block;}
.logo > .link {}
.logo_img {max-height:60px;}

.banner_cont > img {width: 100%;}

/* user menu */
.menu_user {position:absolute; top:50%; right:30px; transform:translateY(-50%);}
.menu_user > li {float:left; margin:0 15px;}
.menu_user > li > .link {}
.menu_user > li > .link:hover {color:#684C2E; font-weight:bold;}
.menu_user > li > .link i {color:#a8a8a8; font-size:26px;}
.menu_user > li > i {position:absolute; top:50%; font-size:30px; transform:translateY(-50%); cursor:pointer;}

/* top menu mobile */
.menu_top_mobi {padding:20px 0;}
.menu_top_fst_mobi {}
.menu_top_fst_mobi > li {}
.menu_top_fst_mobi > li > .txt {padding:15px; font-weight:bold; font-size:25px;}
.menu_top_fst_mobi > li > .txt > i {}
.menu_top_scd_mobi {overflow:hidden; background: #f4f1ef;}
.menu_top_scd_mobi > li {float:left; padding:15px;}
.menu_top_scd_mobi > li > .link {font-size:20px;}

@media screen and (max-width: 1250px) {
  .header_cont {position:relative; padding:15px 0;}
  .header_cont01 {padding:0 15px;}
  .header_cont02 {position:absolute; width:100%; background:#fff; z-index: 999;}

  /* logo */
  .logo_img {max-width:170px;}

  /* user menu */
  .menu_user {right:20px;}
}

/******** main ********/
.main {}
.main.sub {min-height:600px; margin-bottom:30px;}

/* main banner */
.banner_area {float:left; width:57%;}
.banner_main.bm_swiper {width:100%; height:0 !important; padding-bottom: 59.4%;} /* 메인광고알림판 설정 사이즈 */

/* section 01 주일설교 & 게시판 */
.main_sec01 {float:left; width:43%; height:0; padding-bottom:33.86%; background:url("../img/body/sermon_bg01.jpg"); background-size:100% 100%; box-sizing:border-box;}
.main_sec_srm_area {padding:5% 7%; color: rgba(255,255,255,0.8); background:rgba(255,255,255,0.1);}
.main_sec_srm_left {float:left; width:10%; transition:all 0.5s;}
.main_sec_srm_left i {color: #b59b78; font-size:55px;}
.main_sec_srm_area:hover .main_sec_srm_left i {transform: scale(1.1);}
.main_sec_srm_right {float:left; width:90%; transition:all 0.5s;}
.main_sec_srm_area:hover .main_sec_srm_right {letter-spacing: 1px;}
.main_sec_srm_tit {overflow:hidden; width:90%; margin-bottom:10px; font-size: 2em; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal;}
.main_sec_srm_txt {overflow:hidden; width:90%; font-size:1.2em; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal;}

.main_sec_cont {padding:7% 9%; color: rgba(255,255,255,0.6);}
.main_sec_cont li {position:relative; margin-bottom:10%; transition:all 0.5s;}
.main_sec_cont li:last-of-type {margin-bottom:0px;}
.main_sec_cont li > .link {}
.main_sec_cont li > .link > .icon {position: absolute; top:50%; left:0; width:10%; transform:translateY(-50%); transition:all 0.5s;}
.main_sec_cont li > .link > .icon > i {font-size:40px;}
.main_sec_cont li > .link > .cont_txt {width:90%; margin-left:10%; transition:all 0.5s;}
.main_sec_cont li > .link > .cont_txt > .tit {overflow:hidden; width:90%; margin-bottom:5px; font-size: 1.5em; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal;}
.main_sec_cont li > .link > .cont_txt > .date {}
.main_sec_cont li:hover > .link > .icon > i {transform:scale(1.1);}
.main_sec_cont li:hover > .link > .cont_txt {letter-spacing: 1px;}


@media screen and (max-width: 1700px) {
	.main_sec_srm_left {width:15%; transition:all 0.5s;}
	.main_sec_srm_right {width:85%;}
	.main_sec_cont li {margin-bottom: 7%;}
	.main_sec_cont li > .link > .icon {width:15%;}
	.main_sec_cont li > .link > .cont_txt {width:85%; margin-left:15%;}
}

@media screen and (max-width: 1400px) {
	.main_sec_cont {padding: 5% 9%;}
}

@media screen and (max-width: 1250px) {
	.banner_area  {float:none; width:100%;}
	.main_sec01  {float:none; width:100%; height:auto; padding-bottom: 0;}
	.main_sec_srm_left {width:10%;}
	.main_sec_srm_right {width:90%;}
	.main_sec_cont li > .link > .icon {width:10%;}
	.main_sec_cont li > .link > .cont_txt {width:90%; margin-left:10%;}
}

@media screen and (max-width: 800px) {
	.main_sec_srm_area {padding:30px 30px;}
	.main_sec_srm_left {width:15%;}
	.main_sec_srm_left i {font-size:45px;}
	.main_sec_srm_right {width:85%;}
	.main_sec_srm_tit {font-size:25px;}
	.main_sec_srm_txt {font-size:16px;}

	.main_sec_cont {padding:40px;}
	.main_sec_cont li {margin-bottom:25px;}
	.main_sec_cont li > .link > .icon {width:15%;}
	.main_sec_cont li > .link > .icon > i {font-size:35px;}
	.main_sec_cont li > .link > .cont_txt {width:85%; margin-left:15%;}
	.main_sec_cont li > .link > .cont_txt > .tit {font-size:22px;}
}

@media screen and (max-width: 500px) {
	.main_sec_srm_area {padding: 30px 15px;}
	.main_sec_srm_left i {font-size: 35px;}
	.main_sec_cont {padding:20px;}
	.main_sec_cont li > .link > .icon > i {font-size: 35px;}
}

/* section 02 관리자배너 */
#banner-box {padding:1em 0;}

/******** footer ********/
.footer {height:150px; color:rgba(255,255,255,0.6); background:#302d2c;}
.footer_menu {float:right; position:relative; width:43%; height:100%; }
.footer_menu_area {position:absolute; top:50%; right:2%; width:100%; transform:translateY(-50%);}
.footer_menu_area > .link {float:left; width:25%;}
.footer_menu_icon {display:block; width:auto; max-width:100%; margin:0 auto 10px; transition:all 0.3s;}
.footer_menu_txt {text-align:center;}
.footer_menu_area > .link:hover .footer_menu_icon {transform: rotate(-20deg);}

.footer_cont {float:left; position:relative; width:57%; height:100%; line-height:1.6;}
.copy_area {position:absolute; top:50%; left:2%; margin-bottom: 10px; transform:translateY(-50%);}
.copy_txt {}
.bott_info_link {}

.footer_user {position:relative;}
.footer_user_area {display:table; position:absolute; width:100%; padding:0 50px; table-layout:fixed; box-sizing:border-box;}
.footer_user_area .footer_user_btn {display:table-cell; position:relative; vertical-align:middle;}
.footer_user_area .footer_user_btn > .link {display:block; width:115px; margin:0 auto; text-align:center; border: 1px solid rgba(255,255,255,0.6); border-radius: 15px;}

@media screen and (max-width:1250px) {
	.footer {height:220px;}
	.footer_menu {float:none; width:100%; height:100px; background:#eae3e0;}
	.footer_menu_area {left:50%; transform:translate(-50%, -50%);}
	.footer_menu_icon {margin:0 auto;}
	.footer_cont {float:none; width:100%; height:120px;}
	.footer_cont_area {position:absolute; top:40%; left:50%; width:100%; transform:translate(-50%, -50%);}
	.copy_area {position: initial; transform: initial; text-align: center;}
}
@media screen and (max-width:500px) {
	.footer_user_area {padding:0;}
	.footer_menu_icon {max-width: 60px;}
}

/******** sub page ********/
.main.sub {}
.main_sub_cont {}

/* sub top */
.menu_slct_area {position: absolute; top: 50%; left: 355px; transform: translateY(-50%);}
.menu_slct_cont {}
.menu_slct {position:relative; float:left; width:200px; cursor: pointer;}
.menu_slct:before {content:"|"; position: absolute; right: 10px; color: #999;}
.menu_slct > .txt_slcted {display: inline-block; padding:0 10px; font-size: 20px;}
.menu_slct:hover > .txt_slcted {color:#684C2E; font-weight:bold;}
.menu_slct > i {position:absolute; right: 25px;}
.menu_slct > .menu_slct_list {display: none; position:absolute; top:30px; width:95%; padding: 10px; background: #fff; box-shadow: 4px 4px 4px #ccc, -4px 4px 4px #ccc; box-sizing: border-box;}
.menu_slct > .menu_slct_list > li {padding: 10px 0; border-bottom:1px solid #EAE3E0;}
.menu_slct > .menu_slct_list > li:last-of-type {padding: 10px 0; border-bottom:none;}
.menu_slct > .menu_slct_list > li > .link {display: block; width:100%; height:100%;}
.menu_slct > .menu_slct_list > li:hover {background: #eae3e0;}
.menu_slct > .menu_slct_list > li:hover > .link {font-weight:bold;}
.menu_slct_fst {}
.menu_slct_scd {}
.menu_slct_trd {display:none;}

.main_sub_cont_tit {margin-bottom: 25px; padding:30px 0; background:#eae3e0;}
.main_sub_cont_tit .tit {}
#solution_title_comm {display:none;}
#solution_title_comm_fix {width:1200px; margin:0 auto; font-size:30px; box-sizing: border-box;}
.main_sub_cont_tit > .menu_slct_list {display: none; padding: 20px 30px; box-sizing: border-box;}
.main_sub_cont_tit > .menu_slct_list > li {padding:5px 0;}
.main_sub_cont_tit > .menu_slct_list > li > .link {font-size: 18px;}

@media screen and (max-width:1250px) {
	.menu_slct_area {display:none;}
	.main_sub_cont_tit {padding:15px 0; background:#fff; border-top:1px solid #ccc; border-bottom:1px solid #ccc; cursor:pointer;}
	#solution_title_comm_fix {position:relative; width:100%; padding-left:20px; color: #555;}
	#solution_title_comm_fix:before {content: ""; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 8px solid #555;}
}


/* 반응형 클래스 */
.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;}