@charset "utf-8";
:root {
  --p_blue:#487DA9;
  --p_blue2:#066884;
  --p_gray:#F5F5F5;
}
body {
  font-family: 'Pretendard', 'SUIT', sans-serif;
}
button {cursor: pointer;}
.inner {max-width: 100%;padding: 0 8%;margin: auto;}
.blind {display: block;width: 0;height: 0;overflow: hidden;}

/* header */
header {
  position: relative;
  height: 84px;background: rgba(255, 255, 255, 0.8);
  z-index: 100;
}
header h1 a {
  position: absolute;top: 50%;left: 3%;
  transform: translateY(-50%);
  width: 203px;height: 50px;
  background-image: url(../img/image_logo.png);background-size: cover;
}

/* header_gnb */
header nav {
  display: flex;align-items: center;flex-direction: column;
}
header nav #gnb {
  display: flex;
}
header nav #gnb>li {
  display: flex;justify-content: center;
  position: relative;
}
header nav #gnb>li>a {
  display: flex;justify-content: center;align-items: center;
  width: 140px;height: 84px;font-size: 20px;font-weight: 600;
}
header nav #gnb .dep2 {
  display: none;flex-direction: column;gap: 20px;
  align-items: center;
  position: absolute;left: 0;right: 0;top: 84px;
  z-index: 1;padding: 35px 0;
}
header nav #gnb .dep2 li {
  font-size: 18px;color: #555555;
}
header nav #gnb .dep2 li:hover {
  color: var(--p_blue2);text-decoration: underline;
  text-underline-offset: 5px;
}

/* on, after */
header.on {border-bottom: 1px solid #fafafa;}
header::after {
  content: "";
  position: absolute;left: 0;right: 0;top: 84px;height: 0;
  background: rgba(255, 255, 255, 0.8);
  transition: all 0.5s;
}
header.on::after {height: 400px;opacity: 1;}

header.on nav #gnb>li>a {position: relative;}
header.on nav #gnb>li>a::after {
  content: "";position: absolute;left: 50%;right: 50%;bottom: 0;
  height: 4px;background: var(--p_blue);
  transition: all 0.5s;
}
header.on nav #gnb>li>a:hover::after {
  left: 0;right: 0;
}
header.on nav #gnb .dep2 {display: flex;}

/* header_uitl */
header .header_uitl {
  position: absolute;top: 0;right: 3%;
  display: flex;gap: 20px;align-items: center;
  height: 100%;font-size: 18px;font-weight: 600;
}

/* header_uitl lagn_wrap */
.header_uitl .lang_wrap {position: relative;}
.header_uitl .lang_wrap ul {
  position: absolute;left: -50%;top: 150%;
  width: 100px;height: 100px;
  background: var(--p_gray);border-radius: 10px;
  display: flex;flex-direction: column;padding: 20px 30px;
  align-items: center;gap: 10px;
  filter: drop-shadow(3px 3px 3px #746C6C);
  opacity: 0;transition: opacity 0.3s;
}
.header_uitl .lang_wrap ul.open {opacity: 1;}

/* header_uitl search_wrap */
.header_uitl .search_wrap {
  position: relative;
}
.header_uitl .search_wrap .search_popup {
  position: absolute;top: 50px;left: -300px;
  display: none;flex-direction: row;justify-content: center;
  align-items: center;gap: 10px;
  padding: 20px;z-index: 1000;
}
.header_uitl .search_wrap .search_popup form {
  display: flex;flex-direction: row;gap: 10px;
  width: 320px;height: 50px;background: #FFF;
  border-radius: 10px;
  justify-content: center;align-items: center;text-align: center;
}
.header_uitl .search_wrap .search_popup form input {width: 200px;}

/* header_uitl allmenu_popup */
.header_uitl .allmenu_popup {display: none;}
.header_uitl .allmenu_wrap .allmenu_gnb {
  font-size: 18px;font-weight: normal;
  position: fixed;left: 0;right: 0;top: 0;bottom: 0;
  background: rgba(0, 0, 0, 0.9);color: #333;
  display: flex;justify-content: center;align-items: center;
}
.header_uitl .allmenu_wrap .allmenu_popup .btn_allmenu_close {
  font-size: 20px;color: #FFF;
  position: fixed;top: 30px;right: 3em;z-index: 10;
}
.header_uitl .allmenu_wrap .allmenu_gnb .dep1 {
  width: 1440px;height: 800px;background: #FFF;
  display: flex;gap: 30px;padding: 50px 50px;
  flex-wrap: wrap;
}
.header_uitl .allmenu_popup .allmenu_gnb .dep1>li {
  width: calc(100% / 4 - 25px);
}
.header_uitl .allmenu_popup .allmenu_gnb .dep1>li>a {
  font-size: 22px;font-weight: 700;
  display: flex;flex-direction: row;gap: 10px;
  border-bottom: 2px solid gray;padding-bottom: 10px;
}
.header_uitl .allmenu_wrap .allmenu_gnb .dep2 {
  display: flex;flex-direction: column;
  padding-top: 10px;gap: 10px;
}
.header_uitl .allmenu_wrap .allmenu_gnb .dep2>li {
  display: flex;gap: 25px;
}
.header_uitl .allmenu_wrap .allmenu_gnb .dep2>li>a {
  font-size: 18px;font-weight: 700;
}
.header_uitl .allmenu_wrap .allmenu_gnb .dep3 {
  font-size: 16px;line-height: 25px;
}
@media screen and (max-width: 1440px) {
  header {height: 80px;}
  header nav {display: none;}
  header h1 a {width: 180px;height: 44px;}
  header .header_uitl {font-size: 18px;}
  .header_uitl .search_wrap .search_popup form {
    width: 280px;height: 45px;
  }
  .header_uitl .allmenu_wrap .allmenu_gnb .dep1 {
    width: 1200px;height: 800px;padding: 20px;gap: 20px;
  }
  .header_uitl .allmenu_popup .allmenu_gnb .dep1>li>a {
    font-size: 20px;gap: 5px;
  }
  .header_uitl .allmenu_wrap .allmenu_gnb .dep2>li {gap: 10px;}
  .header_uitl .allmenu_wrap .allmenu_gnb .dep2>li>a {font-size: 16px;}
}
@media screen and (max-width: 1024px) {
  header {height: 70px;}
  header h1 a {width: 160px;height: 39px;}
  .header_uitl .allmenu_wrap .allmenu_gnb .dep1 {
    width: 900px;height: 700px;padding: 20px;
  }
  .header_uitl .allmenu_popup .allmenu_gnb .dep1>li>a {
    font-size: 18px;gap: 15px;
  }
  .header_uitl .allmenu_wrap .allmenu_gnb .dep2>li>a {font-size: 14px;}
  .header_uitl .allmenu_wrap .allmenu_gnb .dep3 {
    font-size: 14px;line-height: 20px;
  }
}
@media screen and (max-width: 640px) {
  header h1 a {width: 150px;height: 37px;}
  header .header_uitl {font-size: 16px;gap: 10px;}
  .header_uitl .allmenu_wrap .allmenu_gnb .dep1 {
    width: 600px;height: 500px;padding: 10px;gap: 10px;
  }
  .header_uitl .allmenu_popup .allmenu_gnb .dep1>li>a {
    font-size: 16px;gap: 5px;
  }
  .header_uitl .allmenu_wrap .allmenu_gnb .dep2>li>a {font-size: 14px;}
  .header_uitl .allmenu_wrap .allmenu_gnb .dep3 {display: none;}
  .header_uitl .allmenu_popup .allmenu_gnb .dep1>li {
    width: calc(100% / 4 - 10px);
  }
}

/* main */
main {}
#swp1 {
  width: 100%;height: 768px;
}
#swp1 .swiper-slide1 {
  background-image: url(../img/bg_main2_img.jpg);background-size: cover;
  background-position: center;
}
#swp1 .swiper-slide2 {
  background-image: url(../img/bg_main3.jpg);background-size: cover;
  background-position: center;
}
#swp1 .swiper-slide3 {
  background-image: url(../img/bg_main_bible3-1.jpg);background-size: cover;
  background-position: center;
}

#swp1 .swiper-pagination span {
  background: gray;width: 6px;height: 6px;
}
#swp1 .swiper-button-prev {color: #FFF;}
#swp1 .swiper-button-next {color: #FFF;}

#swp1 .swiper-slide {
  padding: 100px 100px;height: 100%;
  display: flex;flex-direction: column;
  justify-content: center;align-items: center;
}

#swp1 .swiper-slide .text1 {
  display: flex;flex-direction: column;
  align-items: start;gap: 30px;
  color: #333;
}
#swp1 .swiper-slide .text1 strong {
  color: #88465F;
  font-size: 58px;font-weight: bold;
}
#swp1 .swiper-slide .text1 span {font-size: 24px;font-weight: bold;}
#swp1 .swiper-slide .text1 p {
  padding: 20px;background: rgba(243, 162, 162, 0.8);border-radius: 5px;
  font-size: 20px;line-height: 30px;color: #333;
}

#swp1 .swiper-slide .text2 {
  display: flex;flex-direction: column;
  align-items: start;gap: 30px;
  color: var(--p_gray);
}
#swp1 .swiper-slide .text2 strong {
  color: #e7e9e7;
  font-size: 58px;font-weight: bold;
}
#swp1 .swiper-slide .text2 span {font-size: 24px;font-weight: bold;}
#swp1 .swiper-slide .text2 p {
  padding: 20px;background: rgba(131, 170, 127, 0.8);border-radius: 5px;
  font-size: 20px;line-height: 30px;color: #333;
}

/* main_h3 */
main .h3_dis {
  display: flex;gap: 10px;flex-direction: column;
  justify-content: center;align-items: center;
}
main .h3_dis span {font-size: 28px;font-weight: 800;}
main .h3_dis p {font-size: 20px;font-weight: 600;color: lightgray;}

@media screen and (max-width: 1440px) {
  #swp1 {height: 750px;}
  #swp1 .swiper-slide {padding: 50px;}
  #swp1 .swiper-slide .text1 strong {font-size: 45px;}
  #swp1 .swiper-slide .text2 strong {font-size: 45px;}
}
@media screen and (max-width: 1024px) {
  #swp1 {height: 533px;}
  #swp1 .swiper-slide {padding: 50px;}
  #swp1 .swiper-slide .text1 strong {font-size: 40px;}
  #swp1 .swiper-slide .text2 strong {font-size: 40px;}
  #swp1 .swiper-slide .text1 span {font-size: 24px;}
  #swp1 .swiper-slide .text2 span {font-size: 24px;}
  #swp1 .swiper-slide .text1 p {font-size: 18px;}
  #swp1 .swiper-slide .text2 p {font-size: 18px;}
}
@media screen and (max-width: 640px) {
  #swp1 {height: 333px;}
  #swp1 .swiper-slide {padding: 50px;}
  #swp1 .swiper-slide .text1 {gap: 10px;}
  #swp1 .swiper-slide .text2 {gap: 10px;}
  #swp1 .swiper-slide .text1 strong {font-size: 30px;}
  #swp1 .swiper-slide .text2 strong {font-size: 30px;}
  #swp1 .swiper-slide .text1 span {font-size: 20px;}
  #swp1 .swiper-slide .text2 span {font-size: 20px;}
  #swp1 .swiper-slide .text1 p {font-size: 16px;line-height: 18px;}
  #swp1 .swiper-slide .text2 p {font-size: 16px;line-height: 18px;}
  #swp1 .swiper-button-prev, .swiper-button-next {display: none;}
}
/* main - worship */
main .worship {padding: 150px 0;}
main .worship .box {
  padding-top: 55px;
  display: flex;gap: 25px;justify-content: center;
}
main .worship .box a {
  display: flex;gap: 10px;flex-direction: column;
}
main .worship .box img {
  width: 585px;height: 100%;
}
main .worship .box img:hover {
  opacity: 0.3;
}
main .worship .box p {font-size: 18px;font-weight: bold;color: var(--p_blue);}
main .worship .box strong {font-size: 24px;font-weight: bold;margin-bottom: 16px;}
main .worship .box span {font-size: 16px;}

@media screen and (max-width: 1440px) {
  .inner {padding: 0 6%;}
  main .worship .box {gap: 20px;}
  main .worship .box p {font-size: 16px;}
  main .worship .box strong {font-size: 20px;margin-bottom: 14px;}
  main .worship .box span {font-size: 16px;}
}
@media screen and (max-width: 1024px) {
  .inner {padding: 0 5%;}
  main .worship .box {gap: 10px;}
}
@media screen and (max-width: 640px) {
  main .worship {padding: 80px 0;}
  .inner {padding: 0 3%;}
  main .worship .box {flex-wrap: wrap;}
}
/* main - quik_wrap */
main .quik_wrap {
  width: 100%;height: 50%;

}
main .quik_wrap .quik_box {
  display: grid;gap: 50px;
  grid-template-columns: repeat(4, 1fr);
  background: var(--p_gray);
  margin: auto;padding: 8.2% 20%;
}
main .quik_wrap .quik_box a {
  padding: 30px;
  display: flex;gap: 15px;flex-direction: column;justify-content: center;
  align-items: center;color: var(--p_blue2);
}
main .quik_wrap .quik_box i {font-size: 40px;}
main .quik_wrap .quik_box span {font-size: 20px;font-weight: 500;}

@media screen and (max-width: 1440px) {
  main .quik_wrap .quik_box {gap: 30px;}
  main .quik_wrap .quik_box a {padding: 20px;}
  main .quik_wrap .quik_box i {font-size: 30px;}
  main .quik_wrap .quik_box span {font-size: 18px;}
}
@media screen and (max-width: 1024px) {
  main .quik_wrap .quik_box {gap: 20px;}
  main .quik_wrap .quik_box a {padding: 10px;}
  main .quik_wrap .quik_box i {font-size: 30px;}
  main .quik_wrap .quik_box span {font-size: 16px;}
}
@media screen and (max-width: 640px) {
  main .quik_wrap .quik_box {gap: 10px;padding: 5% 8%;}
  main .quik_wrap .quik_box a {padding: 0;}
  main .quik_wrap .quik_box span {font-size: 14px;}
}

/* main - edu_wrap */
main .edu_wrap {padding: 80px 0;}
main .edu_wrap .edu_box {
  padding-top: 100px;
  display: flex;gap: 20px;
  justify-content: center;
  font-size: 20px;color: #FFF;
}
main .edu_wrap .edu_box a {padding: 10px;}
main .edu_wrap .edu_box li:nth-child(even) {margin-top: 50px;}
main .edu_wrap li {
  width: 400px;height: 600px;
  display: flex;flex-direction: column;
  background: #000;
  background-size: cover;border-radius: 10px;
}
main .edu_wrap li:hover {
  animation-duration: 0.5s;animation-name: slide-up;
}
@keyframes slide-up {
  from {transform: translateY(0);}
  to {transform: translateY(-8%);}
}
main .edu_wrap li a {display: flex;flex-direction: column;}
main .edu_wrap .img_bg1 {background-image: url(../img/edu_img2.jpg);background-size: cover;}
main .edu_wrap .img_bg2 {background-image: url(../img/edu_img3.jpg);background-size: cover;}
main .edu_wrap .img_bg3 {background-image: url(../img/edu_img4.jpg);background-size: cover;}
main .edu_wrap .img_bg4 {background-image: url(../img/edu_img1.jpg);background-size: cover;}
main .edu_wrap .edu_box strong {
  font-size: 28px;font-weight: bold;margin-bottom: 10px;
}
main .edu_wrap .edu_box span {font-size: 18px;}

@media screen and (max-width: 1440px) {
  main .edu_wrap .edu_box strong {font-size: 24px;}
  main .edu_wrap .edu_box span {font-size: 16px;}
}
@media screen and (max-width: 1024px) {
  main .edu_wrap li {width: 350px;height: 525px;}
  main .edu_wrap .edu_box {flex-wrap: wrap;gap: 50px 20px;}
}
@media screen and (max-width: 640px) {
  main .edu_wrap li {height: 400px;}
  main .edu_wrap .edu_box {gap: 50px;}
  main .edu_wrap .edu_box li:nth-child(even) {margin-top: 0;}
}
/* main - newFam_wrap */
main .newFam_wrap {padding: 150px 0;}
main .newFam_wrap #swp2 {
  padding-top: 55px;
  display: flex;
}
main .newFam_wrap #swp2 li {width: 400px;}
main .newFam_wrap #swp2 .img_box {
  display: flex;align-items: end;overflow: hidden;
  height: 280px;border-radius: 10px;margin-bottom: 20px;
}
main .newFam_wrap #swp2 .swiper-wrapper {
  transition-timing-function: linear;
}
main .newFam_wrap #swp2 .text_box {
  display: flex;gap: 6px;flex-direction: column;
  align-items: center;
}
main .newFam_wrap #swp2 .text_box span {color: gray;}
main .newFam_wrap #swp2 .text_box strong {font-size: 18px;font-weight: 600;}
@media screen and (max-width: 640px) {
  main .newFam_wrap {padding: 80px 0;}
}
/* main - photo_wrap */
main .photo_wrap {padding: 80px 0;}
main .photo_wrap .photo_box {
  padding-top: 55px;
  display: grid;gap: 20px;
  grid-template-columns: 2fr repeat(2, 1fr);
  grid-auto-rows: 250px;
}
main .photo_wrap .photo_box .item_big {grid-row: 1 / 3;}
main .photo_wrap a img {
  height: 100%;width: 100%;border-radius: 10px;object-fit: cover;
}

@media screen and (max-width: 640px) {
  main .inner {padding: 0 8%;}
  main .photo_wrap .photo_box {display: flex;flex-direction: column;}
}
/* footer */
footer .btn_gotop {
  background: darkgray;background-size: cover;
  width: 50px;height: 50px;text-align: center;align-items: center;
  position: fixed;right: 3%;bottom: 10%;border-radius: 25px;
}
footer .btn_gotop i {
  font-size: 40px;color: var(--p_gray);
}
footer {
  padding: 80px 0 150px 0;
  border-top: 1px solid var(--p_gray);
  font-size: 16px;font-weight: 600;
}
footer .footer_box {
  display: flex;gap: 10px;flex-direction: column;
  margin: auto;align-items: center;text-align: center;
  color: gray;
}
footer .footer_box .email_box {
  display: flex;gap: 30px;
}
footer .footer_box div {display: flex;align-items: center;justify-content: center;}
footer .footer_btm_fix {
  margin-top: 80px;
  width: 100%;height: 80px;background: var(--p_blue2);
  position: fixed;left: 0;right: 0;bottom: 0;
  display: flex;gap: 100px;flex-direction: row;justify-content: center;
  text-align: center;align-items: center;z-index: 10;
}
footer .footer_btm_fix a {
  display: flex;gap: 10px;flex-direction: column;
}
footer .footer_btm_fix a i {font-size: 20px;font-weight: normal;color: #FFF;}
footer .footer_btm_fix a span {color: #FFF;}
@media screen and (max-width: 1440px) {
  footer {font-size: 16px;}
  footer .footer_btm_fix {gap: 80px;}
}
@media screen and (max-width: 1024px) {
  footer {font-size: 14px;}
  footer .footer_btm_fix {gap: 60px;}
}
@media screen and (max-width: 640px) {
  footer {font-weight: normal;}
  footer .footer_box .email_box {gap: 20px;}
  footer .footer_btm_fix {gap: 40px;}
}