﻿@keyframes move {
  from {
    transform: translateX(100px) scale(1.2);
    animation-timing-function: cubic-bezier(.2,0,.8,1);
  }
  to { transform: translateX(0px) scale(1); }
}
@-webkit-keyframes updown {
    0% {
        bottom: 0;
    }

    100% {
        bottom: 30px;
    }
}
@font-face {
    font-family: 'pretendard-bold';
    src: url('fonts/pretendard-bold.otf') format('opentype');
}
@font-face {
    font-family: 'pretendard-regular';
    src: url('fonts/pretendard-regular.otf') format('opentype');
}
@font-face {
    font-family: 'nanumsquareneo-brg';
    src: url('fonts/nanumsquareneo-brg.ttf') format('truetype');
}
@font-face {
    font-family: 'nanumsquareneo-cbd';
    src: url('fonts/nanumsquareneo-cbd.ttf') format('truetype');
}
@font-face {
    font-family: 'nanumsquareneo-deb';
    src: url('fonts/nanumsquareneo-deb.ttf') format('truetype');
}
@-webkit-keyframes arrayR {0%,100% {-webkit-transform:translate(15px,-50%);}50% {-webkit-transform:translate(15px,-50%);}}
@keyframes arrayR {0%,100% {transform:translate(0,-50%);}50% {transform:translate(15px,-50%);}}
.pretendardB{font-family: 'pretendard-bold';}
.pretendardR{font-family: 'pretendard-regular';}
.nanumBrg{font-family: 'nanumsquareneo-brg';}
.nanumCbd{font-family: 'nanumsquareneo-cbd';}
.nanumDeb{font-family: 'nanumsquareneo-deb';}
.no-padding {
    padding-right: 0;
    padding-left: 0;
}
.no-margin{margin-right:0; margin-left:0;}
/* common */


:root {}
.view-more {
display: inline-block;text-decoration: none;overflow: hidden;vertical-align: middle;background: transparent;overflow: hidden;
-webkit-transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);position: relative;z-index: 1;font-weight: 100;}

.view-more:hover:before {
-webkit-transform: translateX(0) skewX(-17.62deg);-ms-transform: translateX(0) skewX(-17.62deg);
transform: translateX(0) skewX(-17.62deg);-webkit-transform-origin: left top;
-ms-transform-origin: left top;transform-origin: left top;}

.view-more:before {
z-index: -1;content: "";display: block;width: 135%;height: 105%;position: absolute;left: 0;top: 0;
-webkit-transform-origin: right top;-ms-transform-origin: right top;transform-origin: right top;-webkit-transform: translateX(-101%) skewX(-17.62deg);
-ms-transform: translateX(-101%) skewX(-17.62deg);transform: translateX(-101%) skewX(-17.62deg);-webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1),  -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-backface-visibility: hidden;backface-visibility: hidden;}

.view-more2 div {
display: inline-block;text-decoration: none;overflow: hidden;vertical-align: middle;background: transparent;overflow: hidden;
-webkit-transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);transition: 1s cubic-bezier(0.165, 0.84, 0.44, 1);position: relative;z-index: 1;font-weight: 100;}

.view-more2:hover div:before {
-webkit-transform: translateX(0) skewX(-17.62deg);-ms-transform: translateX(0) skewX(-17.62deg);
transform: translateX(0) skewX(-17.62deg);-webkit-transform-origin: left top;
-ms-transform-origin: left top;transform-origin: left top;}

.view-more2 div:before {
z-index: -1;content: "";display: block;width: 135%;height: 105%;position: absolute;left: 0;top: 0;
-webkit-transform-origin: right top;-ms-transform-origin: right top;transform-origin: right top;-webkit-transform: translateX(-101%) skewX(-17.62deg);
-ms-transform: translateX(-101%) skewX(-17.62deg);transform: translateX(-101%) skewX(-17.62deg);-webkit-transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
transition: -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1),  -webkit-transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
-webkit-backface-visibility: hidden;backface-visibility: hidden;}

#main1{padding-bottom:70px;background-color:#142855;}
#main1 .welcomeT{padding:90px 0 60px;color:#fff;}
#main1 .welcomeT h1{margin: 0 0 25px;font-size: 46px;font-weight: bold;text-align: center;letter-spacing: 1px;}
#main1 .welcomeT h5{margin: 0;line-height: 1.5;font-size: 22px;text-align: center;}
#main1 .welcomeM{grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;display:grid;}
#main1 .welcomeM a{grid-column: auto / span 1;text-align:center;text-decoration:none;color:#fff;}
#main1 .welcomeM a:hover{position:relative;
animation-name: updown;animation-duration:1s;animation-duration: leaner;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode: forwards;}
#main1 .welcomeM a .welcomeBT{padding: 30px;display: inline-block;position: relative;}
#main1 .welcomeM a .welcomeBT div{background-repeat: no-repeat;background-position: center;background-size: cover;
position: absolute;width: 100%;height: 100%;top: 0;right: 0;}
#main1 .welcomeM a h1{margin: 0;font-size: 17px;text-align: center;
line-height: 2;font-weight: bold;letter-spacing: 1px;}

#main2{padding:125px 0 85px;}
#main2 .main2T{display: inline-flex;justify-content: space-between;width: 100%;align-items: flex-end;padding-bottom:35px;}
#main2 .main2T .main2TR{display: inline-flex;align-items: flex-end;text-decoration:none;color:#000;}
#main2 .main2T .main2TR h1{margin: 0;font-weight: bold;font-size: 46px;letter-spacing: 1px;}
#main2 .main2T .main2TR img{margin-bottom:10px;}
#main2 .main2T .main2TL img{margin-bottom:10px;}
#main2 .main2M{grid-template-columns: 1fr 1fr 1fr;display: grid;gap: 30px;}
#main2 .main2M .sermonM{text-decoration:none;}
#main2 .main2M .sermonM:hover{position:relative;
animation-name: updown;animation-duration:1s;animation-duration: leaner;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode: forwards;}
#main2 .main2M .sermonM .sermonBG{height: 235px;background-repeat: no-repeat;background-position: center;background-size: cover;}
#main2 .main2M .sermonM .sermonT{padding: 20px 0;}
#main2 .main2M .sermonM .sermonT h7{font-size: 16px;line-height: 1.5;color: #324489;font-weight: bold;letter-spacing: 1px;}
#main2 .main2M .sermonM .sermonT h1{margin: 0;font-size: 20px;line-height: 2;color: #000;font-weight: bold;}
#main2 .main2M .sermonM .sermonT h5{margin: 0;font-size: 18px;display: inline-flex;gap: 5px;color: #333333;}
#main3{padding-bottom:110px;}
#main3 .main3T{padding:30px 0 40px;}
#main3 .main3T h1{margin: 0;font-weight: bold;font-size: 46px;letter-spacing: 1px;}
#main3 .main3M{position:relative;}
#main3 .main3M:before{position: absolute;display: block;content: "";height: 100%;width: 70%;background-color: #F9F9F9;}
#main3 .main3M .WorshipS{padding:60px 0;overflow:hidden;}
#main3 .main3M .WorshipS .contentSlide a{display: inline-flex;width: 100%;text-decoration:none;}
#main3 .main3M .WorshipS .contentSlide a .WorshipR{width:50%;background-repeat: no-repeat;background-position: center;background-size: cover;}
#main3 .main3M .WorshipS .contentSlide a .WorshipL{width:50%;padding:0 75px;}
#main3 .main3M .WorshipS .contentSlide a .WorshipL h1{margin:0;font-size:32px;color:#000;}
#main3 .main3M .WorshipS .contentSlide a .WorshipL table{width:100%;border:none;}
#main3 .main3M .WorshipS .contentSlide a .WorshipL table tbody{}
#main3 .main3M .WorshipS .contentSlide a .WorshipL table tbody tr td{padding: 5px 0;font-size: 17px;line-height: 1;color: #666666;}
#main3 .main3M .WorshipS .contentSlide a .WorshipL table tbody tr td hr{margin:10px 0;border-color: #CCCCCC;}
#main3 .main3M .WorshipS .contentSlide a .WorshipL table tbody tr th{padding: 5px 0;font-size: 17px;line-height: 1;font-weight:bold;color: #212121;}
#main3 .main3M .WorshipBT{position: absolute;transform: translate(50%, -50%);
top: 50%;right: 0;z-index: 1;}
#main3 .main3M .WorshipBT .WorshipP,
#main3 .main3M .WorshipBT .WorshipL{float:left;}
#main4{padding: 105px 0 110px;background-repeat:no-repeat;background-position:center;background-size:cover;}
#main4 .main4T{padding-bottom:80px;}
#main4 .main4T h1{margin: 0;line-height: 2;text-align: center;font-size: 46px;font-weight: bold;color:#fff;}
#main4 .main4T h5{margin: 0;font-size: 24px;text-align: center;letter-spacing: 0;color:#a9d9f1;}
#main4 .main4M{grid-template-columns: 1fr 1fr 1fr 1fr;display: grid;gap:35px;}
#main4 .main4M .main4Q{text-decoration:none;color:#fff;}
#main4 .main4M .main4Q h2{margin: 0;font-size: 24px;padding:0 10px 25px;font-weight:bold;}
#main4 .main4M .main4Q h1{font-size: 27px;padding: 0 0 10px;margin: 0 10px 35px;font-weight: bold;letter-spacing: 1px;position: relative;}
#main4 .main4M .main4Q h1:after{content: " ";width: 0%;position: absolute;bottom: 0;border: 1px solid #fff;left: 0;opacity:0;transition: 0.3s all ease;}
#main4 .main4M .main4Q:hover h1:after{width:100%;opacity:1;transition: 0.3s all ease;}
#main4 .main4M .main4Q ul{padding-bottom:10px;}
#main4 .main4M .main4Q ul li{margin: 0;font-size: 17px;line-height: 1.5;padding:0 10px;}
#main4 .main4M .main4Q hr{margin: 30px 0;}
#main4 .main4M .main4Q h6{margin: 0;font-size: 20px;padding:0 10px;}
#main5{padding:100px 0;}
#main5 .main5T{height: 280px;position: relative;margin-bottom: 40px;width: 100%;display: inline-block;text-decoration:none;color:#000;}
#main5 .main5T:hover{position:relative;
animation-name: updown;animation-duration:1s;animation-duration: leaner;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode: forwards;}
#main5 .main5T .main5TC{height:100%;float:right;}
#main5 .main5T .main5TR{height:100%;position:relative;float:right;}
#main5 .main5T .main5TR .main5TRT{position: absolute;top: 50%;right: 50%;
text-align: center;transform: translate(50%, -50%);background-color: #fff;padding: 37.5px 82.5px;}
#main5 .main5T .main5TR .main5TRT h1{margin: 0;font-size: 24px;font-weight: bold;letter-spacing: 1px;
position: absolute;top: 50%;right: 50%;text-align: center;transform: translate(50%, -50%);width: 100%;}
#main5 .main5T .main5TC{height:100%;}
#main5 .main5T .main5TL{position:absolute;width:100%;height:100%;}
#main5 .main5T .main5TL .main5TLT{position: absolute;top: 50%;left: 0;
text-align: left;transform: translate(0%, -50%);}
#main5 .main5T .main5TL .main5TLT h1{margin: 0;font-size: 42px;font-weight: bold;letter-spacing: 1px;line-height: 1.5;}
#main5 .main5T .main5TL .main5TLT h5{margin: 0;line-height: 2;font-size: 24px;font-weight: bold;letter-spacing: 1px;}
#main5 .main5B{height:280px;position:relative;}
#main5 .main5B .main5BR{float:right;text-decoration:none;color:#000;}
#main5 .main5B .main5BR:hover{position:relative;
animation-name: updown;animation-duration:1s;animation-duration: leaner;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode: forwards;}
#main5 .main5B .main5BR .main5BRR{float:left;}
#main5 .main5B .main5BR .main5BRL{float:left;position:relative;}
#main5 .main5B .main5BR .main5BRL .main5BRLT{position: absolute;top: 50%;right: 50%;
text-align: center;transform: translate(50%, -50%);width: 100%;}
#main5 .main5B .main5BR .main5BRL .main5BRLT h2{margin: 0;color: #fff;font-size: 24px;
font-weight: bold;letter-spacing: 1px;line-height:2;}
#main5 .main5B .main5BR .main5BRL .main5BRLT h1{margin: 0;font-size: 24px;font-weight: bold;
color: #fff;line-height: 1.5;}
#main5 .main5B .main5BR .main5BRL .main5BRLT h5{margin: 0;color: #fff;font-size: 17px;
font-weight: bold;letter-spacing: 1px;line-height: 1;}
#main5 .main5B .main5BL{float:left;text-decoration:none;color:#000;}
#main5 .main5B .main5BL:hover{position:relative;
animation-name: updown;animation-duration:1s;animation-duration: leaner;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode: forwards;}
#main5 .main5B .main5BL .main5BLR{float:left;}
#main5 .main5B .main5BL .main5BLL{height:100%;position:relative;float:right;}
#main5 .main5B .main5BL .main5BLL .main5BLLT{position: absolute;top: 50%;right: 50%;
text-align: center;transform: translate(50%, -50%);background-color: #fff;padding: 37.5px 82.5px;}
#main5 .main5B .main5BL .main5BLL .main5BLLT h1{margin: 0;font-size: 24px;font-weight: bold;letter-spacing: 1px;
position: absolute;top: 50%;right: 50%;text-align: center;transform: translate(50%, -50%);width: 100%;}
#main6{padding:100px 0;background-color:#d3dee7;}
#main6 .main6T{display: inline-flex;width: 100%;align-items: flex-end;justify-content: space-between;padding-bottom:35px;}
#main6 .main6T h1{margin: 0;font-size: 58px;font-weight: bold;letter-spacing: 1px;}
#main6 .main6T h2{margin: 0;font-size: 27px;line-height: 1.5;}
#main6 .main6M{display: grid;grid-template-columns: repeat(8, auto);justify-content: space-between;}
#main6 .main6M .main6Q{padding:75px;position:relative;}
#main6 .main6M .main6Q:nth-child(even){background-color:#8ca4b9;}
#main6 .main6M .main6Q:hover{position:relative;
animation-name: updown;animation-duration:1s;animation-duration: leaner;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode: forwards;}
#main6 .main6M .main6Q:nth-child(odd){background-color:#5d6f8d;}
#main6 .main6M .main6Q .main6QT{transform: translate(0%, -50%);position: absolute;width: 100%;right: 0;}
#main6 .main6M .main6Q .main6QT h1{margin: 0;text-align: center;font-size: 22px;
font-weight: bold;letter-spacing: 1px;color: #fff;}
#main6 .main6M .main6Q .main6QT h2{margin: 0;text-align: center;font-size: 22px;
font-weight: bold;letter-spacing: 1px;color: #fff;}
#main6 .main6M .main6Q .main6QT hr{margin: 10px auto;width: 15%;}
@media (max-width:1699px) {
}

@media (max-width:1499px) {
    #main3 .main3M .WorshipBT{transform: translate(0%, -50%);right:0;}
    #main4 .main4M{gap:3px;}
    #main6 .main6M .main6Q{padding:74px;}
}

@media (max-width:1199px) {
    .contentSlide a .WorshipL {width: 50%;padding: 0 30px;}
    #main4 .main4M{grid-template-columns: 1fr 1fr;gap:10px;}
    #main5 .main5T{height:inherit;display:flex;flex-wrap: wrap;}
    #main5 .main5T .main5TL{position:relative;width: 100%;display: inline-block;height:280px;order:1;}
    #main5 .main5T .main5TR{width:50%;overflow:hidden;height:280px;order:2;}
    #main5 .main5T .main5TR img{width:100%;}
    #main5 .main5T .main5TC{width:50%;overflow:hidden;height:280px;order:3;}
    #main5 .main5T .main5TC img{width:100%;height:100%;}
    #main6 .main6M .main6Q{padding:61px;}
}

@media (max-width:992px) {
    #main2 .main2M{grid-template-columns: 1fr 1fr;}
    #main2 .main2M .sermonM:last-child{display:none;}
    #main3 .main3M:before{width:100%;}
    #main3 .main3M .WorshipBT{top:38%;}
    #main3 .main3M .WorshipS .contentSlide a{flex-direction: column-reverse;}
    #main3 .main3M .WorshipS .contentSlide a .WorshipR{width:100%;height:300px;}
    #main3 .main3M .WorshipS .contentSlide a .WorshipL{width:100%;padding: 20px 30px 0;}
    #main6 .main6M{grid-template-columns: repeat(4, auto);}
    #main6 .main6M .main6Q{padding:94px;}
}

@media (max-width:767px) {
    .direct-popup .visible-popups > .each{max-width:75%!important;}
    .direct-popup .visible-popups > .each img{height:inherit!important;}
    #main1 {padding-bottom: 20px;}
    #main1 .welcomeT{padding: 20px 0 15px;}
    #main1 .welcomeT h1{font-size:24px;word-break:keep-all;}
    #main1 .welcomeT h5{font-size:17px;word-break:keep-all;}
    #main1 .welcomeM{grid-template-columns: 1fr 1fr 1fr;}
    #main2 {padding: 20px 0;}
    #main2 .main2T{flex-direction: column;padding-bottom:15px;}
    #main2 .main2T .main2TR{width:100%;}
    #main2 .main2T .main2TR h1{font-size:24px;}
    #main2 .main2T .main2TL img{margin:0;}
    #main2 .main2M{grid-template-columns: 1fr;}
    #main2 .main2M .sermonM:nth-last-child(2),
    #main2 .main2M .sermonM:last-child{display:none;}
    #main3 {padding-bottom: 0;}
    #main3 .main3T{padding:15px 0;}
    #main3 .main3T h1{font-size:24px;}
    #main3 .main3M .WorshipS .contentSlide a .WorshipL h1{font-size:24px;}
    #main3 .main3M .WorshipS .contentSlide a .WorshipL table tbody tr th,
    #main3 .main3M .WorshipS .contentSlide a .WorshipL table tbody tr td{font-size:15px;}
    #main3 .main3M .WorshipS{padding:20px 0;}
    #main3 .main3M .WorshipS .contentSlide a .WorshipL{padding:15px 15px 0;}
    #main4{padding:20px 0;}
    #main4 .main4T {padding-bottom: 20px;}
    #main4 .main4T h1{font-size:24px;}
    #main4 .main4T h5{font-size:17px;}
    #main4 .main4M{gap:15px;}
    #main4 .main4M .main4Q h2{padding: 0 10px 10px;font-size:17px;}
    #main4 .main4M .main4Q h1{margin: 0 10px 10px;font-size:17px;}
    #main4 .main4M .main4Q hr{margin: 15px 0;}
    #main4 .main4M .main4Q ul li{font-size:15px;word-break:keep-all;}
    #main5{padding:20px 0;}
    #main5 .main5T{margin-bottom:20px;}
    #main5 .main5T .main5TL{height:inherit;padding:15px 0;}
    #main5 .main5T .main5TL .main5TLT{position:relative;transform:inherit;top:0;}
    #main5 .main5T .main5TL .main5TLT h1{font-size:24px;}
    #main5 .main5T .main5TL .main5TLT h5{font-size:17px;}
    #main5 .main5T .main5TR{height:160px;}
    #main5 .main5T .main5TR .main5TRT h1{font-size:17px;}
    #main5 .main5T .main5TC{height:160px;}
    #main5 .main5B .main5BR{width:100%;}
    #main5 .main5B .main5BR .main5BRR{display:none;}
    #main5 .main5B .main5BR .main5BRL{width:100%;}
    #main5 .main5B .main5BR .main5BRL img{width:100%;height:160px;}
    #main5 .main5B .main5BR .main5BRL .main5BRLT h2{font-size:17px;}
    #main5 .main5B .main5BR .main5BRL .main5BRLT h1{font-size:17px;}
    #main5 .main5B .main5BR .main5BRL .main5BRLT h5{font-size:15px;}
    #main5 .main5B .main5BL{width:100%;}
    #main5 .main5B .main5BL .main5BLR{display:none;}
    #main5 .main5B .main5BL .main5BLL{width:100%;}
    #main5 .main5B .main5BL .main5BLL img{width:100%;height:160px;}
    #main5 .main5B .main5BL .main5BLL .main5BLLT h1{font-size:24px;}
    #main6{padding:20px 0;}
    #main6 .main6T{padding-bottom:15px;}
    #main6 .main6T h1{font-size:24px;}
    #main6 .main6T h2{font-size:17px;}
    #main6 .main6M{grid-template-columns: repeat(2, auto);}
    #main6 .main6M .main6Q {padding: 55px 90px;}
    #main6 .main6M .main6Q .main6QT h1{font-size:17px;}
    #main6 .main6M .main6Q .main6QT h2{font-size:17px;}
}

@media (max-width:320px) {
}