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

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

/******** header ********/
.header {width:100%; position: absolute; z-index:999;}
.header_cont {position: relative;}

/* user menu */
.header_cont01 {}
.menu_user {position: absolute; top:15px; right:0;}
.menu_user > li {float: left;}
.menu_user > li:after {content: ""; display:block; padding-bottom:5px; border-bottom: 2px dashed #ccc; transform: scaleX(0); transition: transform 0.4s ease-in-out;}
.menu_user > li:hover:after {transform: scaleX(1);}
.menu_user > li > .link {position: relative; padding:0 10px; font-weight:600; font-size:14px; box-sizing: border-box; cursor: pointer; color:#666;}
.menu_user > li > .link:hover {color:#000;}
.menu_user > li > .link:after {content:""; display: block; clear: both; position: absolute; top:2px; right:0; height:12px; border-right:2px solid #666;}
.menu_user > li:last-child > .link:after {display:none;}

.menu_user > li > .link.admin {padding: 0; color:#2e4a7c; font-weight: 900;}
.menu_user > li > .link.admin:after {display:none;}

/* logo */
.header_cont .logo {position: initial; width: calc(100% - 51px);}
.header_cont .logo .link {position: absolute; top: 50%; left: 0; display: inline-block; width: 200px; transform: translateY(-50%);}
.logo .logo_img {display:block; width:auto; max-width:100%; margin:0 auto;}

/* top menu */
.header_cont02 {position: absolute; top:44px; width:100%; background: rgba(255,255,255,0.9); text-align:left; z-index: 99;}
.menu_top {float: right; position:relative; width:calc(100% - 250px); height: 80px; box-sizing: border-box; z-index: 9999999;}
.menu_top_fst {height: 100%;}
.menu_top_fst > li {float: left; position: relative; width: calc(100% / 8); height: 100%;}
.menu_top_fst > li > .link {position: relative; display: block; height: 100%; line-height: 80px; font-weight: bold; font-size: 20px; box-sizing: border-box;}
.menu_top_fst > li:hover > .link {color:#2e4a7c; font-weight: 900;}

.menu_top_scd {display:none; position: absolute; top: 80px; left:0; width: 100%; height: 300px; padding: 15px 0; box-sizing: border-box; z-index:9999999;}
.menu_top_scd > li {margin-bottom: 15px;}
.menu_top_scd > li > .link {font-size: 18px;}
.menu_top_scd > li >.link i {float:right; padding-right:15px; font-size: 12px;}
.menu_top_scd > li:hover > .link {color:#2e4a7c; font-weight: bold;}

.menu_top_trd {display:none;}
.menu_top_trd.show {display:block;}
.menu_top_trd > li {margin:10px 0;}
.menu_top_trd > li > .link {font-size:14px;}
.menu_top_trd > li:hover > .link {font-weight: bold;}

/* top menu scd bg */
.header_cont02 .menu_scd_area {display:none; position: absolute; top: 80px; width: 100%; height:300px; background: rgba(255,255,255,0.9); border:2px solid #ccc; box-sizing: border-box;}

/* top menu mobile */
.btn_sand_mobi {display:none; position: absolute; top: 10px; right: 10px; width: 51px; height: 51px; padding: 0; box-sizing: border-box; background: #00aedf; border: 0; cursor: pointer;}
.btn_sand_mobi .line {position: absolute; left: 50%; display: block; width: 70%; height: 3px; background-color: #fff; transform: translateX(-50%);}
.btn_sand_mobi .line:nth-of-type(1) {top: 10px;}
.btn_sand_mobi .line:nth-of-type(2) {top: 50%; transform: translate(-50%, -50%);}
.btn_sand_mobi .line:nth-of-type(3) {bottom: 5px;}

.wrap .menu_top_mobi {position: absolute; top: 71px; width: 100%; background: #fff; box-sizing: border-box; box-shadow: 0px 3px 5px rgba(0,0,0,0.5); z-index: 99999999;}
.menu_top_mobi_logo {position: absolute; top: 10px; left: 0; display: inline-block; width: 250px;}
.menu_top_mobi_logo > .link {display: block;}
.menu_top_mobi_logo .logo_img {display: block; width: 100%;}

.btn_sand_mobi span {display:block; width:34px; height:3px; background:#4f81bd; margin-bottom:4px; transition:all 0.4s;}
.open .bar1 {
-webkit-transform: rotate(-225deg) translate(22px, 3px);
transform:rotate(-225deg) translate(23px, 3px); transition:all 0.6s;}
.open .bar3 {
-webkit-transform: rotate(225deg) translate(22px, -3px);
transform:rotate(225deg) translate(22px, -3px); transition:all 0.6s;}
.open .bar2  {opacity:0;} 

.menu_top_fst_mobi {display:none; border-top: 1px solid #727272; color: #727272;}
.menu_top_fst_mobi > li {width:90%; margin:0 auto; border-bottom: 1px solid #727272; cursor: pointer;}
.menu_top_fst_mobi > li > .txt {position: relative; display: block; padding: 20px 1%; font-weight:900; font-size: 20px;}
.menu_top_fst_mobi > li > .txt:hover {color:#00aedf !important;}
.menu_top_fst_mobi > li > .txt .icon_arw {position: absolute; top: 50%; right: 2%; transform: translateY(-50%); font-size: 16px; color:#00aedf;}
.menu_top_fst_mobi > li > .txt .icon_arw.active {color:#ccc;}

.menu_top_scd_mobi {display: none; color:#000;}
.menu_top_scd_mobi > li {}
.menu_top_scd_mobi > li > .link {display: block; padding: 10px 3%; border-top: 1px solid #ccc; opacity: 0.6;}
.menu_top_scd_mobi > li > .link:hover {font-weight:900;}

.menu_top_trd_mobi {}
.menu_top_trd_mobi > li {}
.menu_top_trd_mobi > li > .link {position: relative; display: block; padding: 10px calc(3% + 20px); font-size: 14px; border-top: 1px dashed #ccc; opacity: 0.6;}
.menu_top_trd_mobi > li > .link:hover {font-weight:900;}
.menu_top_trd_mobi > li > .link:before {content: ''; position: absolute; top: 50%; left: 3%; display: block; width: 8px; height: 1px; background-color: #999; transform: translateY(-50%);}

.menu_user_mobi {width:90%; margin:0 auto; padding: 15px 0; font-size: 14px; color: #00aedf; box-sizing: border-box;}
.menu_user_mobi > .link {float: left; display: block; width: calc((100% - 15px) / 2); padding: 10px 0; margin-right: 15px; border: 1px solid #00aedf; text-align: center; box-sizing: border-box;}
.menu_user_mobi > .link:last-of-type {margin: 0;}
.menu_user_mobi > .link:hover {color:#fff; background:#00aedf; font-weight:900;}

@media screen and (max-width: 1200px) {
  .header_cont .logo {transform: translateY(10px);}
  .header_cont .logo .link {display:inline; position:initial; width:auto;}
  .header_cont02 {top: 0; height: 66px; background: #fff;}
  .banner_area {top:71px; margin-bottom:71px;}

  .wrap .menu_top_mobi {top:66px;}
}



/******** main ********/
.banner_area {position: relative; width: 100%; height: 0; padding-bottom: 44.27%;}
.banner_cont {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.banner_cont > img {width: 100%; height:100%;}
.banner_main.bm_swiper {width:100% !important;}
.banner_img_tmp {display: block; width: 100%;}

/* section 01 주일설교 */
.main_sec01 {}
.main_sec01 .main_sec_cont {padding:50px 0;}
.main_sec_cont .cont_left {position:relative; float: left; width: 64%; height: 423px; box-sizing: border-box;}
.main_sec_cont .cont_right {position:relative; float: right; width: 35%; height: 423px; box-sizing: border-box;}

.srm_video_play_area {position: absolute; top: 0; left: 0; width: 100%; height: 100%; box-sizing: border-box; cursor: pointer;}
.srm_video_play_area .icon_play {display:none; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); transition: transform 0.2s; z-index: 99;}
.srm_video_play_area .icon_play.show {display:block;}
.srm_video_play_area .bg_play {width:100%; height:100%;}
.srm_video_play_area .bg_play.show {z-index:999;}
.srm_video_play_area:hover .icon_play {transform: translate(-50%,-50%) scale(1.07);}
.srm_video_play_area:hover .bg_play {opacity: 0.9;}

.srm_news_video {position: absolute; top: 0%; left: 50%; display: block; width:100%; height:100%; background: #000; transform: translate(-50%,0%); max-height: 423px; transition: opacity 0.2s; opacity: 1; z-index: 99;}

.srm_video_info_area {position: absolute; bottom:0; left:0; width:100%; height:30%; padding:25px 50px; color:#fff; background: rgba(0,0,0,0.5); z-index:99;}
.srm_video_info_area p {letter-spacing: 0px; transition: all 0.5s ease-out;}
.srm_video_info_area:hover p {letter-spacing: 1px; transition: all 0.5s;}
.srm_video_sbj {overflow:hidden; width:calc(100% - 65px); margin-bottom:20px; font-size:26px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal;}
.srm_video_step {margin-bottom:5px; padding-left:3px; font-size:17px;}
.srm_video_info {padding-left:3px; font-size:17px;}
.srm_video_info > .date {margin-right:10px;}

.srm_list_area {position:relative; padding: 35px 30px; color:#fff; background-color: #00aedf;}
.srm_list_cont {}
.srm_list_tit {display: block; margin-bottom:30px; font-size:30px;}
.srm_list {}
.srm_list > li {position: relative; padding: 12px 0; border-bottom:2px dashed transparent; box-sizing:border-box;}
.srm_list > li:hover {border-bottom:2px dashed #fff;}
.srm_list > li:after {content:""; display:block; clear:both;}
.srm_list > li span {display:inline-block; vertical-align: middle;}
.srm_list > li .srm_list_menu {width:90px; margin-right: 5px; font-weight: 600; font-size: 17px;}
.srm_list > li .srm_list_sbj {overflow:hidden; width:calc(100% - 230px); margin-left: 5px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal;}
.srm_list > li .srm_list_date {position: absolute; right:0; width:auto;}
.srm_list_quick {overflow:hidden; position:absolute; bottom:35px; width: calc(100% - 60px);}
.srm_list_quick_menu {display:block; float:left; width:calc(33.33% - 4px); margin-right:6px;  color:#2e4a7c; background:#fff; font-weight:bold; font-size:17px; text-align:center;}
.srm_list_quick_menu:last-child {margin-right:0;}
.srm_list_quick .link {display: inline-block; width:100%; padding: 20px 0; background: transparent; border-radius: 0; transition: all 0.5s ease-out; background: linear-gradient(270deg, rgba(212,223,230,0.8), rgba(142,192,228,0.8), rgba(34,34,34,0), rgba(34,34,34,0)); background-position: 1% 50%; background-size: 300% 300%; box-sizing:border-box;}
.srm_list_quick .link:hover {color: #fff; text-shadow:1px 1px 5px #555; background-position: 99% 50%;}

@media screen and (max-width: 1200px) {
	.srm_video_info_area {height: 20%; padding:15px 10px 0;}
	.srm_video_play_area .bg_play {height:auto;}
	.srm_list_quick {width:100%;}
}

@media screen and (max-width: 1000px) {
	.main_sec01 .main_sec_cont {padding: 0;}
	.main_sec_cont .cont_left {float: none; width: 100%; height: 0; padding-bottom: 56.25%;}
	.main_sec_cont .cont_right {float: none; width: 100%; height:100%;}
	.srm_list_quick {position: static; margin-top: 15px;}
	.srm_video_play_area {height: 0; padding-bottom: 56.25%;}
	.srm_video_play_area .icon_play {width:20%;}
	.srm_video_sbj {margin-bottom:7px; font-size:16px;}
	.srm_video_step {font-size: 13px;}
}

@media screen and (max-width: 500px) {
	.main_sec_cont .cont_right {height: 490px;}
	.srm_video_info_area {height: 35%;}
	.srm_list_area {padding: 30px 10px;}
	.srm_list_quick {bottom: 30px;}
	.srm_list_tit {margin-bottom: 15px; padding:10px; background: rgba(255,255,255,0.4);}
	.srm_list > li {padding:7px 0;}
	.srm_list > li .srm_list_menu {width:100%; margin-bottom:10px;}
	.srm_list > li .srm_list_sbj {width: calc(100% - 110px);}
	.srm_list > li .srm_list_date {color: rgba(255,255,255,0.7);}
}



/* section 02 교회소식 */
.main_sec02 {position:relative; padding:50px 0; background:url(../img/body/main_sec02_bg.jpg); background-size: cover;}
.main_sec_cont {}
.main_sec02_swiper {}
.main_sec02_swiper .swiper-wrapper {}
.main_sec02_swiper .swiper_item {padding:30px; background:rgba(255,255,255,0.8); box-shadow:0px 0px 3px #ccc; text-align:center;}
.main_sec02_swiper .swiper_item > .tit {display: inline-block; margin-bottom:30px; color:#2e4a7c; font-size:30px; text-transform:uppercase; box-sizing:border-box;}
.main_sec02_swiper .swiper_item > .tit:after {content: ""; display:block; padding-bottom:10px; border-bottom: 3px dashed #ccc; transform: scaleX(0); transition: transform 0.5s ease-in-out;}
.main_sec02_swiper .swiper_item:hover > .tit:after {transform: scaleX(1);}

.main_sec02_swiper .swiper_item .swiper_item_list {text-align:left;}
.main_sec02_swiper .swiper_item .swiper_item_list li {position:relative; padding-left:15px; color:#666; cursor:pointer; line-height:1.7;}
.main_sec02_swiper .swiper_item .swiper_item_list li:before {content:""; display: block; clear: both; position: absolute; top:10px; left:0; width:3px; height:3px; background: #46abf9;}
.main_sec02_swiper .swiper_item .swiper_item_list li:hover {color:#2e4a7c; text-shadow: 1px 1px 1px #ccc;}
.main_sec02_swiper .swiper_item .swiper_item_list li .swiper_item_list_sbj {display: inline-block; overflow:hidden; width:calc(100% - 100px); text-overflow:ellipsis; white-space:nowrap; word-wrap:normal; font-weight:600;}
.main_sec02_swiper .swiper_item .swiper_item_list li .swiper_item_list_date {position:absolute; right:0; width:auto;}
.main_sec02 .swiper-pagination {display:none; position: absolute; left:50%; bottom:10px !important; transform: translateX(-50%);}
.main_sec02 .swiper-pagination-clickable .swiper-pagination-bullet {margin: 0 5px;}

@media screen and (max-width: 1200px) {
	.main_sec02 {position:relative; padding:50px}
	.main_sec02 .swiper-pagination {display:block;}
}

@media screen and (max-width: 500px) {
	.main_sec02 {padding: 30px 10px;}
	.main_sec02_swiper .swiper_item {padding: 30px 10px;}
	.main_sec02_swiper .swiper_item ul+ul+ul+ul+ul+ul {display:none;}
}
/* section 03 교회앨범 */
.main_sec03 {padding:50px 0; background: url('../img/body/main_sec03_bg.jpg') no-repeat; background-size: cover; background-attachment: fixed;}
.main_sec_cont {color:#fff;}
.main_sec_tit {margin-bottom:40px; font-size:30px; text-align:center; letter-spacing: 0px; transition: letter-spacing 0.5s ease-out;}
.main_sec_tit:hover {letter-spacing:3px;}
.main_sec03_swiper {}
.main_sec03_swiper .swiper-wrapper {margin-bottom: 40px;}
.main_sec03_swiper .swiper_item {position:relative;}
.main_sec03_swiper .swiper_item .link {overflow: hidden; position: relative; display: block; width: 100%; height: 0; padding-bottom: 103.5%; box-sizing: border-box; transition: all 1s ease;}
.main_sec03_swiper .swiper_item .link:after {position: absolute; content: ""; top: 0; left: -100%; bottom: 0; width: 200px; background-color: white;box-shadow: 0 0 100px white; transform: skew(-20deg); transition: all 1s ease; opacity: 0.6;}
.main_sec03_swiper .swiper_item .link:hover .album_list_img {opacity: 0.4; filter: grayscale(100%);}
.main_sec03_swiper .swiper_item .link:hover:after {left: 200%;}
.main_sec03_swiper .swiper_item .album_list_info {position:absolute; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); opacity:0; transition: all 0.5s ease-out; z-index: 99;}
.main_sec03_swiper .swiper_item .album_list_info:hover {opacity:1;}
.main_sec03_swiper .album_list_txt_area {padding:30px; text-shadow: 1px 1px 3px #333;}
.main_sec03_swiper .album_list_txt_area .album_list_fst {overflow:hidden; width:90%; margin-bottom:15px; font-size:18px; text-overflow:ellipsis; white-space:nowrap; word-wrap:normal;}
.main_sec03_swiper .album_list_info .album_list_scd .album_list_cmt i {margin:0 5px 0 10px;}
.swiper-pagination {bottom:0 !important;}

.main_sec03_swiper .swiper_item .thumbnail {overflow: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 9;}
.main_sec03_swiper .swiper_item .thumbnail .album_list_img {display: block; position: absolute; top: 50%; left: 50%; width: auto; height: 100%; transform: translate(-50%, -50%);}
.main_sec03_swiper .swiper_item .thumbnail .album_list_img.portrait {width: 100%; height: auto;}

@media screen and (max-width: 1200px) {
	.main_sec03 { padding:50px 10px;}
}

@media screen and (max-width: 500px) {
	.main_sec03 {padding: 30px 10px;}
}
/* section 04 관리자배너 */
.main_sec04 {padding:30px 0;}

/******** footer ********/
.footer {padding:50px 0; color:#999; background:#333; text-align:center; font-weight: 600; font-size:14px; line-height:1.6;}
.footer .c_fff {color:#fff;}



/******** sub page ********/
.main.sub {margin-top:285px;}
.main_sub_cont {min-height: 600px;}

/* sub top */
.header_cover {height: 285px; background: url('../img/top/sub_top_bg.jpg') no-repeat; background-size: cover; background-attachment: fixed; text-align: center;}
.sub_top_tit_area {position:absolute; left:50%; bottom:20%; transform: translateX(-50%);}
.sub_top_tit_area .tit {font-size: 35px; color:#fff;}

@media screen and (max-width:1200px) {
.header_cover {height:215px;}
}

@media screen and (max-width:768px) {
  .sub_top_tit_area {bottom: 30%;}
  .sub_top_tit_area .tit {font-size:25px;}
}

@media screen and (max-width:500px) {
	.header_cover {height:165px;}
	.sub_top_tit_area {bottom: 20%;}
}

/* sub select menu */
.menu_slct_area {border-bottom: 1px solid #ccc;}
.menu_slct_area .btn_home {float: left; width: 50px; height: 50px; font-size: 18px; color: #fff; background:#00aedf; box-sizing: border-box; text-align: center; border-left: 1px solid #ccc; border-right: 1px solid #ccc; line-height:50px;}
.menu_slct {float: left; position: relative; height: 50px; padding: 0 80px 0 20px; box-sizing: border-box; border-right: 1px solid #ccc; cursor: pointer;}
.menu_slct .txt_slcted {position: relative; line-height: 50px; font-size: 15px; color: #555; text-align: left; z-index: 99;}
.menu_slct .icon_arw {position: absolute; top: 50%; right: 15px; color: #4c4c4c; transform: translateY(-50%); z-index: 9;}
.menu_slct:hover {}
.menu_slct:hover .txt_slcted {font-weight:bold;}
.menu_slct:hover .icon_arw {}
.menu_slct.menu_slct_trd {display:none;}
.menu_slct.menu_slct_trd.active {display:block;}

.menu_slct_list {display: none; position: absolute; left: -1px; width: 100%; border-left: 1px solid #ccc; border-bottom: 1px solid #bbb; border-right: 1px solid #bbb; background-color: #fff; border-top: 1px solid #ccc; z-index: 99;}
.menu_slct_list > li {border-bottom: 1px solid #ccc;}
.menu_slct_list > li:last-of-type {border-bottom: 0;}
.menu_slct_list > li:hover {font-weight:bold;}
.menu_slct_list > li > .link {display: block; height: 50px; padding-left: 20px; box-sizing: border-box; line-height: 50px; font-size: 14px;}
.menu_slct_list .icon {display:none;}

.sub_top_menu_tit_area {padding:50px 0 0;}
.sub_top_menu_route {margin-bottom: 15px; color:#666; font-size: 15px;}
.sub_top_menu_tit_area #solution_title_comm {color: #333 !important; font-weight: 600 !important; font-size: 30px!important;}
.uotc_100 #solution_title_comm {}
.main_sub_cont .content {padding: 0 0 75px;}

@media screen and (max-width:1200px) {
  .menu_slct_area .btn_home {width: 40px; height: 40px; font-size: 15px; line-height:40px;}
  .menu_slct {height:40px; width: calc((100% - 40px) / 3); padding: 0 10px 0 10px;}
  .menu_slct .txt_slcted {overflow: hidden; line-height: 40px; font-size: 14px; text-overflow: ellipsis; white-space: nowrap;}
  .menu_slct .icon_arw {right: 8px;}

  .main.sub {margin-top:215px;}
  .main_sub_cont {min-height: 500px;}
  .main_sub_cont .content {padding: 20px 10px; box-sizing: border-box;}
  .sub_top_menu_tit_area {display:none;}
  .sub_top_menu_tit_area #solution_title_comm {text-align: center !important; font-size: 25px !important;}
  .uotc_100 #solution_title_comm {display:block;}
}

@media screen and (max-width:500px) {
	.main.sub {margin-top:165px;}
	.menu_slct_list > li > .link {padding-left: 10px; font-size: 12px;}
}
/* 반응형 클래스 */
.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;}

/* s보드 */
.abm_a_info_hover {z-index:9 !important;}