/* 메인비주얼 슬라이드 및 배너박스 */
.sec-mainvisual {position: relative; float: left; width: 100%; height: 100%; background-image: url("../img/wowweb/images/main_bg.jpg"); background-size: cover; background-position: center top;}
.visual-contents {margin: 0 auto; width: 100%; max-width: 1200px;}

.visual-box {position: relative; float: left; width: 100%; padding-bottom: 10px;}
.visual-box:before {position: absolute; top: 0; left: 0; content: ""; display: block; width: 100%; height: 535px; margin-top: 10px; background: rgba(255,255,255,0.4);}
.visual-slide {position: relative; width: 100%; height: 535px; overflow: hidden; z-index: 1;}
.visual-slide .swiper-container-1 {width: 100%; height: 100%; margin-left: auto; margin-right: auto;}
.visual-slide .swiper-container-1 .swiper-slide {/* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center;
-ms-flex-align: center; -webkit-align-items: center; align-items: center;}
.visual-slide .swiper-container-1 .swiper-slide a {display: block; width: 100%; height: 100%;}

.visual-slide .swiper-container-1 .swiper-pagination-bullet {width: 15px !important; height: 15px !important; display: inline-block; border-radius: 100%; background: rgba(255,255,255,0.4) !important; border: 1px solid #fff; outline: none;}
.visual-slide .swiper-container-1 .swiper-pagination-white .swiper-pagination-bullet-active {background: #fff !important; border: none;}
.visual-slide .swiper-container-1 .swiper-button-prev, .swiper-container-rtl .swiper-button-next {background-image: url("../img/wowweb/images/slide_prev.png") !important; left: 1%; right: auto;}
.visual-slide .swiper-container-1 .swiper-button-next, .swiper-container-rtl .swiper-button-prev {background-image: url("../img/wowweb/images/slide_next.png") !important; right: 1%; left: auto;}
.visual-slide .swiper-container-1 .mainprev, .mainnext {width: 50px !important; height: 50px !important; background-size: 50px 50px !important; outline: none;}
.visual-slide .swiper-container-1 .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .visual-bullet {bottom: 4% !important;}

/* 비주얼 바로가기 배너 */
.visual-banner {position: relative; float: left; width: 100%; margin: 40px 0 60px;}
.visual-banner ul {float: left; width: 100%;}
.visual-banner ul li {float: left; width: 23.5%; padding: 0.83334%; margin-right: 2%; background: rgba(255,255,255,0.2);}
.visual-banner ul li:last-child {margin-right: 0;}
.visual-banner ul li a {display: block; width: 100%; height: 100%; text-align: left;}
.visual-banner ul li a figure {position: relative; float: left; width: 100%; height: 100%; max-height: 160px; overflow: hidden;}
.visual-banner ul li a figure .bannthumb-img {float: left; width: 100%;}
.visual-banner ul li a figure .bannthumb-img img {width: 100%; height: 100%; -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}

.visual-banner ul li a .item-info {display: inline-block; width: 100%; min-height: 140px; padding: 10.63829787234043%;}
.visual-banner ul li a .item-bg1 {background: rgba(0,71,188,0.4); -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}
.visual-banner ul li a .item-bg2 {background: rgba(0,174,240,0.4); -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}
.visual-banner ul li a .item-bg3 {background: rgba(31,154,145,0.4); -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}
.visual-banner ul li a .item-bg4 {background: rgba(105,172,15,0.4); -webkit-transition: all 300ms ease-in-out; transition: all 300ms ease-in-out;}
.visual-banner ul li a .item-info .tittxt {font-family: "Gmarket Sans", sans-serif; transform: rotate(-0.04deg); font-size: 26px; color: #fff; font-weight: 700; line-height: 27px; letter-spacing: -0.8px; margin-top: 5px;}
.visual-banner ul li a .item-info p {display: inline-block; width: 100%; font-family: "Noto Sans KR", sans-serif; transform: rotate(-0.04deg); font-size: 14.5px; color: rgba(255,255,255,0.5); font-weight: 400; line-height: 20px; letter-spacing: -0.5px; margin-top: 15px;}

/* 비주얼 바로가기 배너 마우스롤오버시 효과적용 */
.visual-banner ul li a:hover figure img, .visual-banner ul li a:focus figure img {-webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1);}
.visual-banner ul li a:hover .item-info .tittxt {color: #fff;}
.visual-banner ul li a:hover .item-info p {color: rgba(255,255,255,0.8); text-decoration: underline;}
.visual-banner ul li a:hover .item-bg1 {background: rgba(0,71,188,0.8);}
.visual-banner ul li a:hover .item-bg2 {background: rgba(0,174,240,0.8);}
.visual-banner ul li a:hover .item-bg3 {background: rgba(31,154,145,0.8);}
.visual-banner ul li a:hover .item-bg4 {background: rgba(105,172,15,0.8);}

/* 중간컨텐츠 영역 */
.sec-middle {float: left; width: 100%; padding: 60px 0; background: #f0f0f0;}
.sec-middle .inner {margin: 0 auto; width: 100%; max-width: 1200px;}

/* 중간컨텐츠 배너별 영역 */
.itemlist-box {float: left; width: 100%;}
.itemlist-box .item {float: left; width: 31.6667%; height: 100%; margin-right: 2.5%; box-shadow: 10px 10px 12px rgba(0,0,0,0.05);}
.itemlist-box .item:last-child {margin-right: 0;}
.itemlist-box .item h2.tit {display: block; width: 100%; height: 80px; font-family: "Gmarket Sans", sans-serif; transform: rotate(-0.04deg); font-size: 26px; color: #0593e1; font-weight: 500; line-height: 27px; text-align: center; padding-top: 27px; background: #fff; border-top: 8px solid #1c8ac6;}
.itemlist-box .item h2.tit2 {color: #07a6e2; border-top: 8px solid #20bbf5;}
.itemlist-box .item h2.tit3 {color: #33b0a6; border-top: 8px solid #6ac6bf;}

.itemlist-box .item .item-info {float: left; width: 100%; height: 100%; padding: 0 7.894736842105263% 7.894736842105263%; background: #fff;}
.itemlist-box .item .item-info a {display: block; width: 100%; height: 100%; background: #fff;}
.itemlist-box .item .item-info a .box {position: relative; float: left; width: 100%;}
.itemlist-box .item .item-info a .box .item-img {position: relative; width: 100%; z-index: 1;}
.itemlist-box .item .item-info a .box .item-img img {width: 100%;}
.itemlist-box .item .item-info a .box .item-img .coverbg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0; z-index: 2;}
.itemlist-box .item .item-info a .box .item-name {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: table; table-layout: fixed; text-align: center; z-index: 2;}
.itemlist-box .item .item-info a .box .item-name span {display: table-cell; vertical-align: middle; opacity: 0.6; font-family: "Gmarket Sans", sans-serif; transform: rotate(-0.04deg); font-size: 30px; color: #fff; font-weight: 700; line-height: 30px;}
.itemlist-box .item .item-info a .box .infotxt-box {position: absolute; bottom: 0; left: 0; width: 100%; height: 35px; text-align: center; background: rgba(0,0,0,0.6); z-index: 3;}
.itemlist-box .item .item-info a .box .infotxt-box span {display: inline-block; width: 100%; font-family: "Noto Sans KR", sans-serif; transform: rotate(-0.04deg); font-size: 16px; color: rgba(255,255,255,0.7); font-weight: 400; line-height: 35px; padding: 0 10px; text-overflow: ellipsis; white-space: nowrap; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden;}
.itemlist-box .item .ico-cross {float: left; width: 100%; height: 19px; margin: 16px 0 17px;}
.itemlist-box .item .ico-cross img {width: 100%;}

/* 중간컨텐츠 배너별 영역 마우스롤오버시 효과적용 */
.itemlist-box .item .item-info a:hover .box .item-img .coverbg {opacity: 0.6; transition: all 0.5s ease;}
.itemlist-box .item .item-info a:hover .box .item-name span {opacity: 0.9;}
.itemlist-box .item .item-info a:hover .box .infotxt-box span {color: rgba(255,255,255,1);}

/* 프로모션 배너 및 포토갤로리 영역 */
.community-box {float: left; width: 100%; margin-top: 60px;}
.promote-area {float: left; width: 48.75%; height: auto; min-height: 270px; padding: 2.5%; margin-right: 2.5%; background: #fff; box-shadow: 10px 10px 12px rgba(0,0,0,0.05);}
.promote-area .promote-img {position: relative; float: left; width: 100%; padding-bottom: 40%}
.promote-area .promote-img a {display: block; width: 100%; height: 100%;}
.promote-area .promote-img a img {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;}

.photo-gallery {float: left; width: 48.75%; height: auto; min-height: 270px; padding: 2.5%; background: #fff; box-shadow: 10px 10px 12px rgba(0,0,0,0.05);}
.photo-gallery h3.tit {display: block; width: 100%; font-family: "Gmarket Sans", sans-serif; transform: rotate(-0.04deg); font-size: 26px; color: #555; font-weight: 500; line-height: 27px;}
.photo-gallery ul {float: left; width: 100%; margin-top: 3.5%;}
.photo-gallery ul li {float: left; width: 100%;}

/* 교회갤러리 추출 카페24 적용 스타일 */
.board_output_gallerybox {background: none;}
.board_output_galleryarea {float: left; width: 100%;}
.board_output_galleryarea td {float: left; width: 32.57142857142857%; margin-right: 1.142857142857143%;}
.board_output_galleryarea td:last-child {margin-right: 0;}

/* 갤러리이미지 비율 유지하기 */
.board_output_galleryarea .board_output_gallery_img {position: relative; width: 100%; height: 0; padding-bottom: 76.0233% !important; overflow: hidden;}
.board_output_galleryarea .board_output_gallery_img a {display: block; width: 100%; height: 100%;}
.board_output_galleryarea .board_output_gallery_img a img {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%;}
.board_output_galleryarea td table {width: 100% !important;}
.board_output_galleryarea td table tr:nth-of-type(2) td {display: block; width: 100%; padding: 0;}
.board_output_galleryarea td table tr:nth-of-type(2) td br {display: none;}
.board_output_gallery_subject {float: left; width: 100%; overflow: hidden !important; transform: rotate(-0.04deg); padding-top: 5.7%;}
.board_output_gallery_subject a {display: block; width: 100%; font-family: "Noto Sans KR", sans-serif; font-size: 16px; color: #252525; font-weight: 300; line-height: 17px; letter-spacing: -0.5px; text-align: center; white-space: nowrap; white-space: normal; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis;}
.board_output_gallery_subject a:hover {color: #0091e5; text-decoration: underline;}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** wowweb mobile 359 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (max-width:359px) {

/* 메인비주얼 슬라이드 및 배너박스 */
.visual-box {padding-bottom: 0;}
.visual-box:before {height: 100%; padding-bottom: 70%;}
.visual-slide {height: 100%;}
.visual-slide .swiper-container-1 .swiper-slide {padding-bottom: 70%;}
.visual-slide .swiper-container-1 .swiper-pagination-bullet {width: 13px !important; height: 13px !important;}
.visual-slide .swiper-container-1 .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .visual-bullet {bottom: 5% !important;}
.visual-slide .swiper-container-1 .mainprev, .mainnext {display: none;}

/* 비주얼 바로가기 배너 */
.visual-banner {margin: 40px 0 40px;}
.visual-banner ul {padding: 2%;}
.visual-banner ul li {width: 49%; margin-right: 0; margin-bottom: 2%;}
.visual-banner ul li:nth-child(2n+2) {float: right;}
.visual-banner ul li a .item-info {padding: 5% 3%; min-height: 110px;}
.visual-banner ul li a .item-info .tittxt {font-size: 20px; line-height: 22px;}
.visual-banner ul li a .item-info p {font-size: 14px; line-height: 18px; letter-spacing: -0.8px; margin-top: 10px;}
.visual-banner ul li a .item-info p br {display: none;}

/* 중간컨텐츠 영역 */
.sec-middle {padding: 40px 2%;}

/* 중간컨텐츠 배너별 영역 */
.itemlist-box .item {width: 100%; margin-right: 0; margin-bottom: 5%;}
.itemlist-box .item:last-child {margin-bottom: 0;}

/* 프로모션 배너 및 포토갤로리 영역 */
.community-box {margin-top: 40px;}
.promote-area {width: 100%; min-height: auto;}
.photo-gallery {width: 100%; min-height: auto; padding: 7% 2.5% 5%; margin-top: 5%;}
.photo-gallery ul li a p {font-size: 13px;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** wowweb mobile 360,719 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:360px) and (max-width:719px) {

/* 메인비주얼 슬라이드 및 배너박스 */
.visual-box {padding-bottom: 0;}
.visual-box:before {height: 100%; padding-bottom: 70%;}
.visual-slide {height: 100%;}
.visual-slide .swiper-container-1 .swiper-slide {padding-bottom: 70%;}
.visual-slide .swiper-container-1 .swiper-pagination-bullet {width: 13px !important; height: 13px !important;}
.visual-slide .swiper-container-1 .swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .visual-bullet {bottom: 5% !important;}
.visual-slide .swiper-container-1 .mainprev, .mainnext {display: none;}

/* 비주얼 바로가기 배너 */
.visual-banner {margin: 40px 0 40px;}
.visual-banner ul {padding: 2%;}
.visual-banner ul li {width: 48.5%; margin-right: 0; margin-bottom: 3%;}
.visual-banner ul li:nth-child(2n+2) {float: right;}
.visual-banner ul li a .item-info {padding: 5% 3%; min-height: 110px;}
.visual-banner ul li a .item-info .tittxt {font-size: 22px; line-height: 23px;}
.visual-banner ul li a .item-info p {font-size: 14px; line-height: 18px; letter-spacing: -0.8px; margin-top: 10px;}
.visual-banner ul li a .item-info p br {display: none;}

/* 중간컨텐츠 영역 */
.sec-middle {padding: 40px 2%;}

/* 중간컨텐츠 배너별 영역 */
.itemlist-box .item {width: 100%; margin-right: 0; margin-bottom: 5%;}
.itemlist-box .item:last-child {margin-bottom: 0;}

/* 프로모션 배너 및 포토갤로리 영역 */
.community-box {margin-top: 40px;}
.promote-area {width: 100%; min-height: auto;}
.photo-gallery {width: 100%; min-height: auto; padding: 7% 2.5% 5%; margin-top: 5%;}
.photo-gallery ul li a p {font-size: 13px;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** wowweb tablet 720,767 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:720px) and (max-width:767px) {

/* 메인비주얼 슬라이드 및 배너박스 */
.visual-box {padding-bottom: 0;}
.visual-box:before {height: 100%; padding-bottom: 60%;}
.visual-slide {height: 100%;}
.visual-slide .swiper-container-1 .swiper-slide {padding-bottom: 60%;}

/* 비주얼 바로가기 배너 */
.visual-banner {margin: 40px 0 40px;}
.visual-banner ul {padding: 2%;}
.visual-banner ul li {width: 48.5%; margin-right: 0; margin-bottom: 3%;}
.visual-banner ul li:nth-child(2n+2) {float: right;}

/* 중간컨텐츠 영역 */
.sec-middle {padding: 40px 2%;}

/* 중간컨텐츠 배너별 영역 */
.itemlist-box .item h2.tit {font-size: 22px; line-height: 23px;}
.itemlist-box .item .item-info {padding: 0 5% 5%;}
.itemlist-box .item .item-info a .box .item-name span {font-size: 25px; line-height: 26px;}
.itemlist-box .item .item-info a .box .infotxt-box span {font-size: 14px;}

/* 프로모션 배너 및 포토갤로리 영역 */
.community-box {margin-top: 40px;}
.promote-area {width: 100%;}
.photo-gallery {width: 100%;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** wowweb tablet 768,1023 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:768px) and (max-width:1023px) {

/* 메인비주얼 슬라이드 및 배너박스 */
.visual-box {padding-bottom: 0;}
.visual-box:before {height: 100%; padding-bottom: 70%;}
.visual-slide {height: 100%;}
.visual-slide .swiper-container-1 .swiper-slide {padding-bottom: 70%;}

/* 비주얼 바로가기 배너 */
.visual-banner {margin: 40px 0 40px;}
.visual-banner ul {padding: 2%;}
.visual-banner ul li {width: 48.5%; margin-right: 0; margin-bottom: 3%;}
.visual-banner ul li:nth-child(2n+2) {float: right;}

/* 중간컨텐츠 영역 */
.sec-middle {padding: 40px 2%;}

/* 중간컨텐츠 배너별 영역 */
.itemlist-box .item h2.tit {font-size: 22px; line-height: 23px;}
.itemlist-box .item .item-info {padding: 0 5% 5%;}
.itemlist-box .item .item-info a .box .item-name span {font-size: 25px; line-height: 26px;}
.itemlist-box .item .item-info a .box .infotxt-box span {font-size: 14px;}

/* 프로모션 배너 및 포토갤로리 영역 */
.community-box {margin-top: 40px;}
.promote-area {width: 100%;}
.photo-gallery {width: 100%;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** wowweb pc 1024,1279 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:1024px) and (max-width:1279px) {

.visual-banner ul li a .item-info p br {display: none;}
.photo-gallery ul li a p {padding-top: 10px;}

/* 교회갤러리 영역 */
.photogallery-contents {padding: 0 2%;}
.gallery-item ul li a figure {height: auto;}

.promote-area {min-height: auto;}
.photo-gallery {min-height: auto;}
.photo-gallery ul {margin-top: 3.5%;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** wowweb pc 1100,1220 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:1100px) and (max-width:1220px) {

/* 프로모션 배너 및 포토갤로리 영역 */
.promote-area {min-height: auto;}
.photo-gallery {min-height: auto;}
.photo-gallery ul {margin-top: 4%;}

}


/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
/* *** wowweb pc 1280 *** */
/* ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */

@media screen and (min-width:1280px) {

}