/******** common ********/
* {padding:0; margin:0; list-style: none;}
html, body {font-size:20px;}
.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:98%; margin:0 auto;}
}

/******* top *******/
.main_wrap {position:relative; width:100%; background:url("../img/body/main_bg.jpg") center top no-repeat; background-size: cover;}
.main_wrap header {position:relative; overflow:hidden; max-width:1200px; height:72px; margin:0 auto; z-index:99999999;}
.main_wrap header ul {position:absolute; right:0; top:24px;}
.header_cont {padding:30px 0;}
.main_wrap header ul li, .main_wrap header ul li.pc_area {display:inline-block; color:#fff; font-size:13px; font-weight:600; cursor:pointer;}
.main_wrap header ul li a.btn_sand, .main_wrap header ul li a.link {display:block; border-radius:4px; padding:8px; background:RGBA(255,255,255,0.14); border:1px solid rgba(255,255,255,0.2) }
.main_wrap header ul li a:hover {color:#fff; border-color:#6078EA; background:#6078EA}

/* logo */
.logo {display:inline-block; padding:6px 0;}

/* all-menu button */
.main_wrap header .menu_btn {display:inline-block; position: relative; width:20px; height:2px; background:#fff;margin:5px 0; font-size: 0; vertical-align: bottom;}
.main_wrap header .menu_btn:before {content:""; position: absolute; width:20px; height:2px; top:-5px; background:#fff; transition: transform 0.3s ease-in-out;}
.main_wrap header .menu_btn:after {content:""; position: absolute; width:20px; height:2px; bottom:-5px; background:#fff; transition: transform 0.3s ease-in-out;}
.main_wrap header li:hover .menu_btn, .main_wrap header li:hover .menu_btn:before, .main_wrap header li:hover .menu_btn:after {background:#fff; color:#fff;}
.main_wrap header .open .menu_btn, .main_wrap header li:hover .open .menu_btn {background:none;}
.main_wrap header .open .menu_btn:before {top:0; transform: rotate(45deg);}
.main_wrap header .open .menu_btn:after {bottom:0; transform: rotate(-45deg);}

/* all menu */
.menu_top {position:absolute; width:100%; background:#222; top:0; z-index:999999; padding-top:72px; box-shadow: 0 2px 6px rgba(0,0,0,0.5); display:none;}
.menu_top:before {content:""; position:absolute; top:0; width:100%; height:72px; background-color: #292929;}
.menu_top .menu_f {position:relative; overflow:hidden; max-width:1200px; margin:0 auto;}
.menu_top .menu_f > li {float:left; width:16.666%; min-height:350px; text-align:center;    box-sizing: border-box;} 
.menu_top .menu_f > li:hover {background:#1D1D1D;}
.menu_top .menu_f > li h2 {position:relative;padding:50px 0 25px; font-size:25px; font-weight:400; color:#fff; cursor:pointer;}
.menu_top .menu_f > li h2:after {content:""; position: absolute; background:#333; width:60%;  height:2px; margin:0 auto; bottom:0; left:20%;}
.menu_top .menu_top_scd {position:relative; overflow:hidden; margin-top:10px;}
.menu_top .menu_top_scd > li {line-height:2;}
.menu_top .menu_top_scd > li a {color:#aaa; font-size:18px; letter-spacing:-1px; cursor:pointer}
.menu_top .menu_top_scd > li a:hover, .menu_top .menu_top_scd > li a:hover i {color:#6078EA;}
.menu_top .menu_top_scd i {font-size: 11px; padding: 5px 0 0 6px; vertical-align: text-top; color: #6d6d6d; line-height: 20px; display: inline-block;}
.menu_top .menu_top_trd {display: none; padding-bottom:10px;}
.menu_top .menu_top_trd.show {display: block;}
.menu_top .menu_top_trd > li {line-height:1.2;}
.menu_top .menu_top_trd > li a {color:#777; font-size:15px; letter-spacing:-1px;}


@media screen and (max-width:890px) {
	.menu_top .menu_f > li {float:none; width:100%; text-align:left; min-height: auto;}
	.menu_top .menu_f > li h2 {padding: 22px 0; font-size: 20px; text-align:right;}
	.menu_top .menu_f > li h2:after {width:100%; height:1px; left:0;}
	.menu_top .menu_f > li h2 a {padding-right:5%; pointer-events: none; text-decoration: none;}
	.menu_top .menu_top_scd {display:none; padding: 0 5% 10px; text-align:right;}
	.menu_top .menu_top_scd > li {line-height:1.8;}
	.menu_top .menu_top_scd > li a {color:#9C9C9C; font-size:18px;}
	.menu_top .menu_top_trd > li a {color:#777; font-size:15px; letter-spacing:-1px;}
}

/* section 01 */
.main_sec01 {overflow:hidden; max-width:1200px; margin:0 auto;}
 
/* section 01 - main banner */
/******** main ********/
.banner_area {position: relative; overflow:hidden; width:100%; height: 0; padding-bottom: 50%; border-radius: 4px; box-shadow:0 0 4px rgba(0, 0, 0, 0.60);}
.banner_cont {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.banner_cont img {width: 100%;}
.banner_img_tmp {display: block; width: 100%;}


/* section 01 - 주일설교 */
.sec01_area {margin:20px 0; position:relative; overflow:hidden; }
.srm_area {float:left; width:50%; color:#fff; background:rgba(0,0,0,0.4); padding:20px 30px; border-radius:4px;box-sizing:border-box;}
.srm_area > h2 {float:left; width:64%; font-size:32px;}
.srm_area > h2 small {display:block; font-size:18px; color:#09C9DF; padding: 10px 0; font-weight: 400; margin-bottom: 5px;}
.srm_area > p {float:left; width:36%; font-size:18px; color:#ccc;}
.srm_area > p span {display:block; padding:6px 0;}

.sec_quick {float:left; width:50%;}
.sec_quick > li {float:left; width:50%;padding-top:32px; }
.sec_quick > li a {display:block; text-align:center; color:#fff; font-size:22px; text-shadow: 0 0 4px #3c1c1c;}
.sec_quick > li a span {display: inline-block; width:60px; height:60px; border-radius:50%; margin-right:5px; padding: 15px; line-height: 1.35;}
.sec_quick > li:nth-child(1) span {background:#6078EA;}
.sec_quick > li:nth-child(2) span {background:#00B1F0;}
.sec_quick > li:nth-child(3) span {background:#09C9DF;}
.sec_quick > li:nth-child(3) b {line-height:1.2; display: inline-block; vertical-align: top; margin-top: 4px;}



@media screen and (max-width:1250px) {
	.main_wrap header {width:96%}
	.banner_area {width:96%; margin:0 auto;}
	.sec01_area {width:96%; margin:20px auto;}
	.srm_area {width:60%;}
	.sec_quick {width:40%;}
	.sec_quick > li a span {margin-right: 5px;}
	.sec_quick > li a b {display:block; margin-top:10px; font-size:18px;}
	.sec_quick > li {padding-top:20px;}
	.sec_quick > li:nth-child(3) {padding-top:0;}
}
@media screen and (max-width:1000px) {
	.srm_area {width:69%;}
	.sec_quick {width:31%;}
	.srm_area > h2 {font-size:28px;}
	.srm_area > p {font-size:16px;}
	.sec_quick > li {padding-top: 4%;}
	.sec_quick > li a span {margin-right: 0px;}
	.sec_quick > li a b {display:block; margin-top:10px;}
}

@media screen and (max-width:780px) {
	.srm_area {width:100%;}
	.sec_quick {width:100%;}
	.sec_quick > li, .sec_quick > li:nth-child(3) {padding: 15px 0 5px;}
	.sec_quick > li a span {margin-right:20px;}
	.sec_quick > li a b {display:inline;}
	.sec_quick > li:nth-child(3) b {margin-top:10px;}
}
/*@media screen and (max-width:540px) {
	.sec01_area {margin:10px auto;}
	.srm_area > h2, .srm_area > p {float:none; width:100%;}
	.srm_area > h2 small {font-size: 15px; padding:0; margin-bottom:10px;text-shadow:0 0 3px #555;}
	.srm_area > h2 b {text-shadow:0 0 3px #555;}
	.srm_area > p {margin-top:15px;text-shadow:0 0 3px #555; color: #eee;}
	.srm_area > p span {padding:2px 0;}
	.sec_quick > li a span {width:45px; height:45px; padding:7px; margin-right:8px;}
	.sec_quick > li a b {font-size:20px;}
}*/

@media screen and (max-width:595px){
    .sec01_area {margin:10px auto;}
	.srm_area > h2, .srm_area > p {float:none; width:100%;}
	.srm_area > h2 small {font-size: 15px; padding:0; margin-bottom:10px;text-shadow:0 0 3px #555;}
	.srm_area > h2 b {text-shadow:0 0 3px #555;}
	.srm_area > p {margin-top:15px;text-shadow:0 0 3px #555; color: #eee;}
	.srm_area > p span {padding:2px 0;}
	.sec_quick > li {width:50%;}
	.sec_quick > li:nth-child(3) {width:40%;}
	.sec_quick > li, .sec_quick > li:nth-child(3) {padding: 15px 0 0;}
	.sec_quick > li a span {margin-right:0;}
	.sec_quick > li a b, .sec_quick > li:nth-child(3) b {display:block; font-size:16px;}
    .sec_quick > li a b br {display:none;}
}

/* section 02 */
.main_sec02 {background:#6078EA; color:#fff; position:relative; overflow:hidden;}
.main_sec02:before {content:""; width:100%; height:100%; position:absolute; background:url("../img/body/main_sec02_l.png") top left no-repeat; top:0; left:0;}
.main_sec02:after {content:""; width:100%; height:100%; position:absolute; background:url("../img/body/main_sec02_r.png") top right no-repeat; top:0; right:0;}
.main_sec02 section {position:relative; overflow:hidden; padding:35px 0; z-index:9;}
.main_sec02 h3 {position: relative;max-width:1200px; margin:0 auto; text-align: center; font-size:28px; font-weight:600;}
.main_sec02 .swiper-container {max-width:1200px; margin:35px auto 0; padding: 5px 0; position:relative; overflow:hidden;}
.main_sec02 .boardEf li {padding:20px; box-sizing:border-box; background:#fff;}
.main_sec02 .boardEf li h4 {color:#333; font-size:18px; padding:10px 0; line-height:1.3; min-height:70px;}
.main_sec02 .boardEf li p {color:#888; font-size:14px; padding:10px 0}

.boardEf li > span{display:block;position:absolute; -webkit-transition:all 0.2s linear; -moz-transition:all 0.2s linear;  transition:all 0.2s linear}
.boardEf li > .line01{top:0;left:0;width:0;height:3px;background:#3F56C2}
.boardEf li > .line02{top:0;right:0;width:3px;height:0;background:linear-gradient(to top, #243688, #3F56C2);}
.boardEf li > .line03{bottom:0;right:0;width:0;height:3px;background:#243688}
.boardEf li > .line04{bottom:0;left:0;width:3px;height:0; background:linear-gradient(to top, #243688, #3F56C2);}

.boardEf li.active{-webkit-box-shadow:0 0 5px rgba(0,0,0,0.3);-moz-box-shadow:0 0 5px rgba(0,0,0,0.3);-ms-box-shadow:0 0 5px rgba(0,0,0,0.3);box-shadow:0 0 5px rgba(0,0,0,0.3); }
.boardEf li.active h4, .boardEf li.active p {color:#3F56C2}
.boardEf li.active .line01, .boardEf li.active .line03{width:100%}
.boardEf li.active .line02, .boardEf li.active .line04{height:100%}

.main_sec02 .swiper-button-prev {background-image:url("../img/body/main_board_l.png"); background-size: auto; top: 15px; left: 40%;}
.main_sec02 .swiper-button-next {background-image:url("../img/body/main_board_r.png"); background-size: auto; top: 15px; right: 40%;}
	
/* floting banner */
.main_sec04 {padding:20px 0; background:#eee;}

/* section 03 */
.main_sec03 {position:relative; overflow:hidden; max-width:1200px; margin:30px auto;}
.main_sec03_swiper .swiper_item {border:1px solid #ddd; padding:20px; box-sizing:border-box;}
.main_sec03 h3 {text-align: center; font-size:26px; font-weight:600; padding:10px 0 30px; color:#313131;}
.main_sec03_swiper li figure {height:150px; position:relative; overflow:hidden;}
.main_sec03_swiper li figure img {width:100%;}
.main_sec03_swiper .sec_album_txt {position:relative; overflow:hidden; margin-top:15px;}
.main_sec03_swiper .sec_album_txt b {display:inline-block; width:60%; font-size:18px; color:#333;}
.main_sec03_swiper .sec_album_txt span {display:inline-block; width:40%; font-size:14px; color:#888; text-align:right;}

.main_sec03_swiper > .swiper-wrapper {scroll-snap-type: x mandatory;}

.main_sec03 .swiper-button-prev {background-image:url("../img/body/main_album_l.png"); background-size: auto; top: 22px; left: 40%;}
.main_sec03 .swiper-button-next {background-image:url("../img/body/main_album_r.png"); background-size: auto; top: 22px; right: 40%;}
.main_sec03 .swiper-pagination {display:none;}



@media screen and (max-width:1250px) {
	.main_sec02 .swiper-container, .main_sec03 {width:96%;}
	.main_sec02:before {background-position-x: -300px;}	
}
@media screen and (max-width:1000px) {
	.main_sec02 .swiper-button-prev {left: 30%;}
	.main_sec02 .swiper-button-next {right: 30%;}
	.main_sec02:after {background-position-x: 0px;}
	.main_sec03 .swiper-button-prev {left: 30%;}
	.main_sec03 .swiper-button-next {right: 30%;}
}
@media screen and (max-width:768px) {
	.main_sec02 .swiper-button-prev {left: 25%;}
	.main_sec02 .swiper-button-next {right: 25%;}
	.main_sec02:before {background-position-x: -400px;}
	.main_sec02:after {background-position-x: -300px;}
	.main_sec03 .swiper-pagination {display:block; position:relative; overflow:hidden;}
	.main_sec03 .swiper-pagination span{float:left; width:33.333%; border-radius: 0; height: auto; padding: 10px 0; font-size: 16px; background: #4A3C5A; opacity:1; color:#eee;}
	.main_sec03 .swiper-pagination span.swiper-pagination-bullet-active {background:#6078EA;}	
	.main_sec03 .swiper-button-prev {left: 25%;}
	.main_sec03 .swiper-button-next {right: 25%;}
}
@media screen and (max-width:375px) {
	.main_sec02 section {padding: 35px 0 0;}	
}

/******** footer ********/
.footer {color:rgba(255,255,255,0.6); background:#302d2c;}
.footer_cont {position:relative; padding: 20px 0; font-size:15px; line-height:1.6; text-align: center;}
.footer_cont ul {position:relative; overflow:hidden; margin-top:15px;}
.footer_cont ul li {display:inline-block; margin: 0 2px; width:120px; height:30px;}
.footer_cont ul li a {display:block; background:#eee; border-radius:4px; color:#333; line-height:30px; font-size:13px;}
.footer_cont ul li a:hover {background:#6078EA; color:#fff;}
.footer .m_home {display:inline-block; width: 250px;
    margin-top: 10px;}

@media screen and (max-width:540px) {
	.footer_cont ul li {width:80%; margin-bottom:5px;}
	.footer .m_home {width:80%; margin-top:0;}
	.footer .m_none {display:none;}
}

/******** sub page ********/
.main_wrap.sub {background-position:center -260px;}
.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:relative; padding:30px 0 50px; text-align:center;}
.sub_top_tit_area .tit {color:#fff; font-size:40px; font-weight:600; padding:10px 0 25px; text-align:center;}
.sub_top_tit_area small {display:block; color:#ccc; font-size:16px; font-weight:400;}

@media screen and (max-width:768px) {
	.logo {padding:0;}
	.main_wrap header {height:85px;}
	.main_wrap header ul {position: initial; }
	.main_wrap.sub {background-position:center center;}
	.sub_top_tit_area {padding: 10px 0 25px;}
    .sub_top_tit_area .tit {font-size:28px;padding: 10px 0 12px;}
	.sub_top_tit_area small {font-size:14px;}
}

/* sub select menu */
.menu_slct_area {position:relative; background:#6078EA; z-index:999998;}
.menu_slct_area .btn_home {float: left; width: 50px; height: 50px; font-weight:bold; font-size: 18px; color: #98A5E1; box-sizing: border-box; text-align: center; border-right: 1px solid #98A5E1; padding: 15px 0;}
.menu_slct {float: left; position: relative; height: 50px; padding: 0 120px 0 20px; box-sizing: border-box; border-right: 1px solid #98A5E1; cursor: pointer;}
.menu_slct .txt_slcted {position: relative; line-height: 50px; font-size: 15px; color: #fff; text-align: left; z-index: 9998;}
.menu_slct .icon_arw {position: absolute; top: 50%; right: 15px; color: #98A5E1; 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_area .menu_slct_list i {visibility: hidden;}

.menu_slct_list {display: none; position: absolute; left:-1px; width:calc(100% + 2px); border: 1px solid #98A5E1; background-color: #fff; border-top: 1px solid #fff; padding:15px; box-sizing:border-box; z-index: 999998;}
.menu_slct_list > li {border-bottom: 1px solid #e0e0e0; color:#333;}
.menu_slct_list > li:last-of-type {border-bottom: 0;}
.menu_slct_list > li:hover {font-weight:bold;color:#6078EA;}
.menu_slct_list > li > .link {display: block; height: 35px; padding: 12px; box-sizing: border-box; font-size: 14px;}
.menu_slct_list .icon {display:none;}

#solution_title_comm {position:relative; overflow:hidden; padding: 35px 0 0; width: 100%; height: auto; text-align:center; margin-bottom:5px; color:#333; font-size: 36px; letter-spacing:-1px;}
#solution_title_comm a {text-align:center; margin-bottom:5px; color:#333; font-size: 36px; letter-spacing:-1px;}
#solution_title_comm:before {content:""; position:absolute; top:20px; left:50%; height:30px; width:1px; background:#6078EA;}
.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; padding: 12px 0;}
  .menu_slct {height:40px;}
  .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_cont {min-height: 500px;}
  .main_sub_cont .content {padding: 0 10px 20px; box-sizing: border-box;}
  .sub_top_menu_tit_area {display:none;}
  #solution_title_comm {padding:20px 0 0;}
  #solution_title_comm:before {height:20px;}
  #solution_title_comm a {font-size:26px;}
  .uotc_100 #solution_title_comm {display:block;}
}

@media screen and (max-width:560px) {
	.menu_slct {width: calc((100% - 40px) / 3); padding: 0 10px 0 10px;}
	.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;}