/********** common *********/
.wrap {width: 100%; font-family: 'JejuGothic', sans-serif;}
.wrap .pc_area {display: block;}
.wrap .mobi_area {display: none;}
.cont_size {width: 1100px; margin: 0 auto;}

/********** main page *********/

/****** header ******/
.header {position: relative; z-index: 99999;}
.header_cont {position: relative; padding: 25px 0 0; background-color:#fff;}
.header_cont .cont_size {position:relative;}
.logo {position: absolute; bottom: 0; left: 0;}
.logo_img {padding-bottom:20px;}

/* gnb */
.gnb {text-align: right;}
.menu_btn_admin {float: right; padding: 3px 10px; margin-right: 5px; border-radius: 20px; background: #bdc93d; border: 1px solid #bdc93d; font-size: 12px; color: #fff; font-weight: bold;}
.menu_btn_admin:hover {background-color: #fff; color: #bdc93d}
.menu_btn_admin_eng {float: right; padding: 3px 10px; margin-right: 5px; background-color: #fff; border-radius: 20px; border: 1px solid #ccc; font-size: 12px; color: #999; font-weight: bold; box-sizing: border-box;}
.menu_btn_admin_eng:hover {background-color: #bdc93d; color: #fff;}

/* user menu */
.menu_user {float: right;}
.menu_user > li {display: inline-block; width: 45px; font-size: 11px; text-align: center;}
.menu_user > li .link:hover .menu_user_txt {opacity: 1;}
.menu_user > li .link i {display:inline-block; width:22px; height:19px; font-size:16px; color:#c3bbb5; line-height:19px;}
.menu_user_txt {opacity: 0; color: #aaa;}

/* top menu */
.menu_top {clear: both; padding-top: 15px; text-align: right; font-size: 0; text-align:right;}
.menu_top > li {position: relative; display: inline-block; font-size: 16px; padding: 0 25px 20px; text-align: left; cursor: pointer;}
.menu_top > li:hover:before {content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 80%; height: 2px; background-color: #bdc93d;}
.menu_top > li:hover .menu_top_txt {color: #bdc93d;}
.menu_top > li:hover .menu_top_txt_eng {color: #bdc93d;}
.menu_top > li .link {color: #333;  font-size: 14px;}
.menu_top_txt {font-size: 18px; padding-bottom: 7px; transition: color 0.2s;}
.menu_top_txt_eng {font-size: 12px; transition: color 0.2s;}

/* top menu second */
.menu_scd_area {display:none; position: absolute; width: 100%; height:270px; background-color: #242424;}
.menu_scd_area .menu_scd {padding: 25px; box-sizing: border-box;}
.menu_scd_desc {float: left; width: 260px; padding: 10px; text-align: left; box-sizing: border-box;}
.menu_scd_tit {font-size: 33px; color: #888;}
.menu_scd_tit_sub {margin-top: 10px; font-size: 13px; color: #555; line-height: 1.5; font-weight:400;}

.menu_scd_list {display:none; position:absolute; top:56px; left:0; width:80%; height:270px; padding-top:25px; text-align:left; z-index:9999999;}
.menu_scd_list > li {line-height:1.5; text-align: center;}
.menu_scd_list > li > .link {color:#959595;}
.menu_scd_list > li:hover > .link{color:#bdc93d;}

/****** main ******/
/* banner */
.banner_area{position:relative; width:100%; height:0; padding-bottom:42%; margin:0 auto; z-index:1; }
.banner_area .banner{position:absolute; top:0; left:0; width:100%; height:100%;}
.banner_area .banner > img {width: 100%; height:100%;}

/* quick menu */
.quick_area {overflow: hidden;}
.quick_cont {position: relative; height: 275px; padding: 35px 0; box-sizing: border-box;}
.quick_link {overflow: hidden; position: absolute; top: 11%; left: 0; opacity: 0; transition: transform 0.3s; border-radius: 10px}
.quick_link:nth-of-type(1) {left: -100px;}
.quick_link:nth-of-type(2) {top: -50px; left: 50%; transform:translateX(-50%);}
.quick_link:nth-of-type(3) {right: -100px; left: auto;}
.quick_link:hover {transform: scale(1.03); box-shadow: 0 0 5px rgba(0,0,0,0.35);}
.quick_img {display: block; width: 100%; height: 100%;}

/* sermon */
.sermon_area {overflow: hidden; position: relative; background-color: #663513;}
.srm_cont {position: relative; height: 445px; padding-top: 65px;  box-sizing: border-box;}
.srm_img_link {position: absolute; bottom: 0; right: -120px; display: block; transition: right 0.3s; z-index: 99; opacity: 0;}
.srm_img_link:hover {right: -110px;}
.srm_img {display: block;}
.srm_info {position: relative; width: 45%; z-index: 999;}
.sermon_tit {display: inline-block; font-size: 35px; margin-bottom: 10px; font-weight:normal;}
.sermon_tit .link {color: #fff;}
.sermon_tit .btn--inner {font-family: "Nanum Gothic", sans-serif;}
.srm_tit_sub {color: #fff;}
.srm_hr {width: 110px; height: 3px; margin-top: 20px; margin-bottom: 35px; background-color: #9c5f2c;}
.srm_sbj {font-size: 25px; margin-bottom: 10px;}
.srm_sbj .link {color: #fff;}
.srm_txt {display: block; color: #eebd96; font-size: 16px; line-height: 1.5;}
.srm_txt:hover {text-decoration: underline;}
.srm_name {margin-bottom: 40px;}
.srm_btn_listen {position: relative; padding: 13px 30px; background-color: #38230a; color: #cead89;}
.srm_btn_listen:before {content: ""; position: absolute; top: 0; left: 0; width: 0; height: 2px; background-color: #eebd96; transition: width 0.3s;}
.srm_btn_listen:hover:before {width: 100%;}

.srm_door {position: absolute; top: 0; width: 50%; height: 100%; background-color: #38230a; z-index: 9999; opacity: 1;}
.srm_door_left {left: 0;}
.srm_door_right {right: 0;}
.srm_spnr {position: absolute; top: 50%; left: 50%; margin-left: -25px; margin-top: -25px; z-index: 9999999;}

/* gallery */
.gall_area {}
.gall_cont {padding: 50px 0;}
.gall_tit {width: 100px; margin: 0 auto 30px; padding-bottom: 25px; font-size: 30px; font-weight: 400; border-bottom: 3px solid #bdc93d; text-align: center;}
.gall_tit .link {color: #666;}
.gall_list {font-size: 0;}
.gall_list > li {overflow: hidden; display: inline-block; width: calc(25% - 20px); margin-top: 0; margin-bottom: 0; margin-left: 10px; margin-right: 10px; font-size: 14px; box-sizing: border-box;}
.gall_list > li > .link {overflow: hidden; position: relative; display: block; width: 100%; height: 0; padding-top: 65.95%;}
.gall_list > li .thumbnail {    
	overflow: hidden;
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    height: 100%;
    transition: transform 0.2s;
}
.gall_list > li .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_img {
		display: block;
    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_img.portrait {
	width: 100%; height: auto;
}
.gall_info {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.7); z-index: 999999; text-align: center; opacity: 0;}
.gall_info_efct {position: absolute; top: 0px; left: 0; width: 100%; opacity: 0;}
.gall_info_tit {overflow: hidden; width: 90%; margin: 0 auto 15px; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; color: #fff;}

/****** footer ******/
.footer {background-color: #111;}
.foot_cont {position: relative; padding: 25px 0 35px; box-sizing: border-box;}
.foot_copy {font-size: 14px; color: #777; line-height: 1.8;}
.foot_info {position: absolute; top: 25px; right: 0; border: 1px solid #444; text-align: center;}
.foot_info .bott_info_link {display: block; padding: 7px 10px; font-size: 13px; font-weight: bold; color: #777;}
.foot_info .bott_info_link:first-of-type {border-bottom: 1px solid #444;}
.bott_info_link:hover {text-decoration: underline;}
.foot_info .bott_info_link:hover {text-decoration: none; background-color: #333; color: #fff;}

/****** mobi ******/
/* gnb mobi */
.btn_mobi_menu {position: absolute; top: 5px; right: 10px; padding: 10px;}
.menu_top_mobi {display: none; position: absolute; top: 60px; left: 0; width: 100%; background-color: #bdc93d; z-index: 9999999;}
.menu_top_mobi > li {border-bottom: 1px solid #cad464; cursor: pointer;}
.menu_top_mobi > li:last-of-type {border-bottom: none;}
.menu_top_mobi_txt {padding: 13px 10px 13px 30px; color: #fff; font-size: 18px;}
.menu_top_mobi_scd {display: none; background-color: #f2f4d8;}
.menu_top_mobi_scd > li {border-bottom: 1px solid #c0c0c0; font-size: 16px;}
.menu_top_mobi_scd > li > .link {display: block; padding: 13px 10px 13px 45px; color: #333; font-weight: bold;}
.menu_top_mobi_scd > li:last-of-type {border-bottom: none;}

.menu_top_mobi_scd .menu_top_mobi_scd_sub li{padding:5px 0 5px 50px;}
.menu_top_mobi_scd .menu_top_mobi_scd_sub li:last-child{padding-bottom:15px;}
.menu_top_mobi_scd .menu_top_mobi_scd_sub li > .link{color:#676767; font-weight: bold; font-size:13px; }

.btn_login {float:left; width:50%; padding:10px 0; color:#fff; font-size:18px; text-align:center;}

@media screen and (max-width:1100px) {
	.cont_size {width: 100%;}
	.wrap .pc_area {display: none;}
	.wrap .mobi_area {display: block;}
	.logo {position: static; width: 120px;}
	.logo_img {display: block; width: 100%; padding:10px;}
	
	.header_cont {padding: 7px 0;}
	
	/* gnb mobi */
	
	/* quick menu */
	.quick_link {width:calc(100% / 3 - 10px); top:11%; border-radius:3px;}

	/* sermon */
	.srm_img_link {width: auto; height: 100%; bottom: 0; right: -100px;}
	.srm_img_link:hover {right: -180px;}
	.srm_img {width: auto; height: 100%;}
	.srm_cont {padding: 30px 15px; box-sizing: border-box;}
	
	/* footer */
	.foot_cont {padding: 30px; text-align: center;}
}

@media screen and (max-width:768px) {
	/* sermon */
	.srm_cont {height: auto;}
	.srm_info {width: 80%;}
	.srm_img {opacity: 0.5;}
	.sermon_tit {font-size: 30px;}
	.sermon_tit .btn_border {padding: 3px;}
	.srm_tit_sub {font-size: 13px;}
	.srm_sbj {font-size: 18px;}
	.srm_txt {font-size: 13px;}
	.srm_btn_listen {display: none;}
  .srm_name {margin-bottom:0;}

  /* quick */
  .quick_cont {position:relative; height:0; padding:0 0 28.125% 0; margin:10px 0;}
  .quick_content {position:absolute; top:0; left:0; width:100%; height:100%;}
  
	
	/* gallery */
	.gall_cont {padding: 1%;}
	.gall_list > li {width: calc(50% - 20px); margin: 10px;}
	
	/* footer */
	.foot_copy {font-size: 13px;}
  .foot_copy:first-child {display:none;}
}
@media screen and (max-width:400px) {
	
	/* gallery */
	.gall_info_tit {font-size: 14px;}

	/* footer */
	.foot_copy {font-size: 11px;}
}

/********** sub page *********/
.main_sub {}
.main_sub_cont {min-height: 550px; padding:15px 0;}

/* header */
.sub_top_area {padding: 60px 0; text-align: center; border-top: 1px solid #ccc; box-sizing: border-box; background: url('../img/top/sub_topbg.png');}
.sub_top_tit {margin-bottom:15px; color:#F8B81F; font-size:32px; text-shadow:0px 0px 3px #555;}
.sub_top_tit_eng {color:#fff; font-weight:bold; font-size:45px; text-shadow:0px 0px 3px #555;}

/* sub main */
.main_sub #solution_title_comm {position: relative; padding: 5px 0 15px; margin-bottom:15px; text-align: center; font-family:"Nanum Gothic", sans-serif !important; font-size: 33px !important; font-weight: bold !important; color: #4b4b4b !important;}
.main_sub #solution_title_comm:before {content: ""; display: block; position: absolute; bottom: 0px !important; left: 50%; margin-left: -50px;  width: 100px; height: 3px; background-color: #bdc93d;}

.main_sub .gen_board {display:block; width:20%; padding:20px 0; margin-top:10px; font-size:17px; font-weight:bold; color:#fff; text-shadow:1px 1px 1px rgba(0,0,0,0.2); text-align:center; border-radius:10px; transition: width 0.3s;}
.gen_board:hover {width:25%;}
.gen_board.gen_board01 {background-color:#fcbe1b;}
.gen_board.gen_board02 {background-color:#3abd1f;}
.gen_board.gen_board03 {background-color:#3b85c2;}
.gen_board.gen_board04 {background-color:#546ea7;}
.gen_board.gen_board05 {background-color:#1a7ab7;}
@media screen and (max-width:1100px) {
	.header._sub {height:auto;}
	.main_sub_cont {min-height: 300px; border-top: 1px solid #bdc93d;}
	.main_sub #solution_title_comm {font-size: 25px !important; text-align: left; padding: 20px 20px 0 30px;}
	.main_sub #solution_title_comm:before {bottom:0px !important; left: 10px; margin: 0; border: 0; width: 4px; height: 25px;}
  .main_sub #solution_title_comm {
    line-height: 1 !important;
    height: auto !important;
    padding: 0px 20px !important;
    font-size: 20px !important;
   }
   .main_sub #solution_title_comm * {
    line-height: 1 !important;
    height: auto !important;
    padding: 0px 20px !important;
    font-size: 20px !important;
   }
}

/* ¹ÝÀÀÇü Ŭ·¡½º */
.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;}

/* ¿µ»ó Æ˾÷ Àç»ý ¿µ¿ª */
.vod_popup_area {display:none; position:fixed; bottom:0; right:0; width:100%; height:100%; z-index:9999999;}
.btn_vod_popup_cls {position:absolute; top:-40px; right:0; width:50px; height:35px; padding:7px; background-color:rgba(0,0,0,0.6); border-radius:5px; box-sizing:border-box; font-size:18px; font-weight:bold; color:#fff;  text-align:center; cursor:pointer; line-height:1;box-shadow:1px 1px 1px rgba(255,255,255,0.2);}
.btn_vod_popup_mini {position:absolute; top:-40px; right:110px; width:50px; height:35px; padding:7px; background-color:rgba(0,0,0,0.6); border-radius:5px; box-sizing:border-box; text-align:center;cursor:pointer; box-shadow:1px 1px 1px rgba(255,255,255,0.2);}
.btn_vod_popup_mini .icon {display:inline-block; height:100%;}
.btn_vod_popup_max {position:absolute; top:-40px; right:55px; width:50px; height:35px; padding:7px; background-color:rgba(0,0,0,0.6); border-radius:5px; box-sizing:border-box; text-align:center;cursor:pointer; box-shadow:1px 1px 1px rgba(255,255,255,0.2);}
.btn_vod_popup_max .icon {display:inline-block; height:100%;}
.vod_popup_wrap {position:absolute; bottom:50%; right:50%; width:1025px; height:554px; transform:translate(50%,50%);}
.vod_popup_area.mini {width:384px; height:207px; bottom:30px; right:30px;}
.vod_popup_area.mini .vod_popup_bg {display:none;}
.vod_popup_area.mini .vod_popup_wrap {width:100%; height:100%;}
.vod_popup_area.max {}
.vod_popup_area.max .vod_popup_bg {}
.vod_popup_area.max .vod_popup_wrap {margin:0; width:100%; height:93%;}
.vod_popup_ifr {width:100%; height:100%;}
.vod_popup_video {width:100%; height:100%;}
.vod_popup_audio {width:100%; position:relative;}
.vod_popup_bg {width:100%; height:100%; background-color:rgba(0,0,0,0.85);}
@media screen and (max-width:1200px){
	.vod_popup_area.mini {width:200px; height:108px; bottom:10px; right:10px;}
	.vod_popup_wrap {width:100%; margin:0; height:0; padding-bottom:54.05%;}
	.vod_popup_ifr {position:absolute; top:0; left:0;}
	.vod_popup_video {position:absolute; top:0; left:0;}
	.vod_popup_audio {position:absolute; top:0; left:0;}
}