/*intro css
.contents-wrapper{
    width:100%;
    / *padding-top : var(--gnb-height);* /
    min-height: calc( 100vh - ( var(--gnb-height) + var(--footer-height)) );
}
*/

/* history */

.history-body{
    margin-top : 12.25rem;
}

.history-header > p{
    font-size : 1.5rem;
    font-family: 'Pretendard-Regular';
    letter-spacing: -.0875rem;
    color : var(--color-subfont);
    margin : 0;
    display:block;
    line-height: 2.4rem;
}

/*.history-header > p:nth-child(1){
    margin-top : 5.625rem;
}

.history-header > p:nth-child(2){
    margin-top : 1.6875rem;
}*/

.history-header > p > strong{
    font-family: 'Pretendard-Semibold';
}

.history-body{
    display : flex;
    flex-direction: row;
    padding-bottom : calc(0rem + 33.6rem);
}

.history-body > ul{
    width :43.0rem;
}

.history-body > .year-indi{
    width : 36.625rem;
    transition: all 0.20s ease-out;
    height : 52rem;
}

.year-indi-header > h3{
    font-family: 'Pretendard-Semibold';
    font-size : 5.40rem;
    letter-spacing: -.0875rem;
    color : var(--color-primary);
}

.year-indi-header > h3:nth-child(2){
    margin-left:2.0rem;
}

.year-indi-body{
    margin-top : 15.71rem;
}

.year-indi-body > .item > a{
    display:block;
    font-family: 'Pretendard-Semibold';
    font-size : 1.25rem;
    letter-spacing: -.0875rem;
    color : #999999;
    margin-bottom : 1.0rem;
}


.year-indi-body > .item.active > a{
    color : var(--color-primary);
}

.history-item{
    padding : 2.0rem 0rem 2.0rem 0rem;
    border-bottom : 1px solid #E5E5EC;
}

.history-item > p{
    display:block;
    margin-top:1.25rem;
    padding-left : 7.75rem;
    font-size:1.125rem;
    font-family: 'Pretendard-Regular';
    color : #767676;
    line-height : 1.9rem;
}

.history-item > p.hide{
    display : none;
}

.history-item-header{
    display: flex;
    flex-direction : row;
    align-items : center;
}

.history-item-header h4{
    font-family: 'Pretendard-Semibold';
    font-size : 1.5rem;
    letter-spacing: -.0875rem;
}

.history-item-header h4.year{
    margin-right:4.31rem;
}

.history-item-header .histmore{
    margin-left:1.0rem;
}

.ext-link{
    font-size : 0.875rem;
    color : #111111;
    letter-spacing: -.0875rem;
    font-family: 'Pretendard-Regular';
    margin-left : 7.75rem;
    padding-left : 0.0rem;
    padding-bottom : 0.0rem;
}

.history-footer{
    display : flex;
    flex-direction : column;
    align-items : center;
    padding-bottom : 37.75rem;
}

.history-footer > img{
    margin-bottom : 3.75rem;
    width : 14.75rem;
}

.history-footer > p {
    font-size : 1.5rem;
    color : #111111;
    letter-spacing: -.0875rem;
    font-family: 'Pretendard-Regular';
    text-align : center;
    line-height : 2.4rem;
}

/* faith */
.faith-contents{
    display: flex;
    flex-direction : row;
    gap : 5.0rem;
    padding-left :1.0rem;
    padding-right : 1.0rem;
    margin-top : 9.375rem;
    padding-bottom: 13.625rem;
}

.faith-col{
    display: flex;
    flex-direction : column;
    gap : 6.25rem;
}

.faith-item{
    display: flex;
    flex-direction : column;
    align-items : center;
    /*padding-bottom : 8.125rem;*/
    height : 15.875rem;
}

.faith-item > span{
    display:block;
    font-family: 'Pretendard-Semibold';
    font-size : 1.5rem;
    letter-spacing: -.0875rem;
    border-bottom : 1px solid var(--color-primary);
    color : var(--color-primary);
    padding-bottom : 0.5rem;
}

.faith-item > h4{
    display:block;
    font-family: 'Pretendard-Semibold';
    font-size : 3.0rem;
    letter-spacing: -.0875rem;
    color : var(--color-primary);
    margin-top:1.125rem;
    margin-bottom:1.25rem;
    text-align : center;
}


.faith-item > p{
    font-size : 1.125rem;
    color : #555555;
    letter-spacing: -.0875rem;
    font-family: 'Pretendard-Regular';
    text-align : center;
    line-height : 2.1rem;
}



/* seervie 예배안내 */

.service-inform-tbl-wrapper{
    display: flex;
    flex-direction: row;
    margin-top: 6.25rem;
    padding-bottom: 13.625rem;
}

.service-inform-tbl-wrapper > ul{
    margin-right : 2.5rem;
}

.service-inform-tbl-wrapper > ul > li{
    width: 34.00rem;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border: 1px #DCDCDC solid;
    background-color: white;
    padding : 1.31rem 2.375rem 1.31rem 2.375rem;
    margin-bottom: 1.25rem;
    transition: opacity 0.5s ease-out, transform 0.5s ease-out;
    transform: translate(0px, 1.0rem) skew(10deg) scale(1.0);
    opacity: 0.0;
}

.service-inform-tbl-wrapper > ul > li:nth-child(1){
    transition-delay: 100ms;
}
.service-inform-tbl-wrapper > ul > li:nth-child(2){
    transition-delay: 200ms;
}
.service-inform-tbl-wrapper > ul > li:nth-child(3){
    transition-delay: 300ms;
}
.service-inform-tbl-wrapper > ul > li:nth-child(4){
    transition-delay: 400ms;
}
.service-inform-tbl-wrapper > ul > li:nth-child(5){
    transition-delay: 500ms;
}

.service-inform-tbl-wrapper.active > ul > li{
    transform: translate(0px,0rem) skew(0deg) scale(1.0);
    opacity: 1.0;
}

.service-inform-tbl-wrapper.active > ul > li:hover{
    transform: translate(0px,0rem) skew(0deg) scale(1.05);
}

.service-inform-tbl-wrapper > ul > li > h4{
    font-family: 'Pretendard-Semibold';
    font-size : 1.25rem;
}

.service-inform-tbl-wrapper > ul > li > .inform-detail{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.service-inform-tbl-wrapper > ul > li > .inform-detail > span{
    display: block;
}

.service-inform-tbl-wrapper > ul > li > .inform-detail > span.divider{
    width: 1px;
    height: 1.12rem;
    background: #D9D9D9;
    margin : 0 1.56rem 0 1.56rem;
}


/* missions 교회사역 */
.missions-wrapper{
    display: flex;
    flex-wrap: wrap;
    gap : 2.5rem;
    margin-top: 6.25rem;
    padding-bottom: 13.625rem;
}

.mission-card-wrapper:hover *{
    cursor : pointer;
}

.mission-card{
    display : flex;
    flex-direction : column;
    width : 24.7rem;
    height : 16.375rem;
    border : 1px solid #E5E5EC;
    align-items : center;
}

.mission-card .logo{
    width: 5.0rem;
    margin-top:1.875rem;
}

.mission-card > h4{
    color : #555555;
    font-size : 1.25rem;
    letter-spacing: -.0875rem;
    font-family: 'Pretendard-Regular';
    display : block;
    margin-top : 1.25rem;
}

.mission-card > h3{
    color : #111111;
    font-size : 1.5rem;
    letter-spacing: -.0875rem;
    font-family: 'Pretendard-Semibold';
    display : block;
    margin-top : 0.5rem;
}

.mission-card > .link-caption{
    font-size : 0.875rem;
    font-family: 'Pretendard-Regular';
    letter-spacing: -.0875rem;
    color : #767676;
    display : flex;
    justify-content : center;
    margin-top : 1.25rem;
}

.mission-card > .link-caption > .link-ico{
    margin-left:0.2rem;
}


/* facility 교회시설 */

.gall-wrapper{
    padding-bottom: 13.625rem;
}

.gall-tab{
    margin-top : 5.5rem;
}

.tab-btn.active{
    color : var(--color-primary);
}

.tab-btn{
    color : #999999;
    font-size : 1.5rem;
    letter-spacing: -.0875rem;
    font-family: 'Pretendard-Semibold';
    margin-right : 2.5rem;
}

.gall-contents{
    margin-top : 2.81rem;
    /*display: flex;*/
    flex-wrap: wrap;
    gap : 1.25rem;
    display : none;
}

.gall-contents.active{
    display: flex;
}

.gall-item{
    position :relative;
    width:19.06rem;
    height:19.685rem;
    margin-bottom : 3.5rem;
}

.gall-item:hover *{
    cursor : pointer;
}

.gall-inner{
    position : absolute;
    left : 0px;
    top : 0px;
}

.gall-item > .gall-inner > .gall-item-img-wrapper{
    width:19.06rem;
    height:17.06rem;
    background-color: #eeeeee;
}

.gall-item > .gall-inner > .gall-item-img-wrapper > img{
    display: block;
    width: 19.06rem;
    height: 17.06rem;
    object-fit: cover;
}

.gall-item > .gall-inner > span{
    display : block;
    margin-top : 1.25rem;
    color : #111111;
    font-size : 1.0rem;
    letter-spacing: -.0875rem;
    font-family: 'Pretendard-Semibold';
}


.gall-over{
    position : absolute;
    left : 0px;
    top : 0px;
    width : 100%;
    height :100%;
    background : white;
    display: flex;
    flex-direction : column;
    justify-content : center;
    align-items :  center;

    transition: all 0.5s ease-out;
    /*background: rgba( 255, 255, 255, 0.0 );*/
    backdrop-filter: blur( 0px );
    -webkit-backdrop-filter: blur( 0px );
    opacity: 0;
}

.gall-over > img{
    width: 2.25rem;
    height : 2.25rem;
}

.gall-item:hover .gall-over{
    backdrop-filter: blur( 50.5px );
    -webkit-backdrop-filter: blur( 50.5px );
    opacity: 0.5;
}

.photo-maxi-header{
    width : 100%;
    margin-bottom : 2.6875rem;
    display:flex;
    flex-direction : row-reverse;
}

.photo-maxi-header > .close-btn {
    display: block;
    width: 2.25rem;
    height: 2.25rem;
    margin-right : 3.0rem;
}

.photo-maxi-header > .close-btn:hover *{
    cursor : pointer;
}

.photo-maxi-header > .close-btn > img{
    width : 100%;
    height : 100%;
}

.photo-maxi-bg{
    background-color : rgba(17, 17, 17, 0.6);
    position : fixed;
    left : 0;
    top : 0;
    width : 100vw;
    height : 100vh;
    z-index : 1001;
    display : none;
    flex-direction : column;
    align-items : center;
    justify-content : center;
}

.photo-maxi{
    width : 62.125rem;
    height : 56.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.photo-maxi-body{
    display : flex;
    flex-direction : row;
    align-items : center;
}

.photo-left,
.photo-right{
    position :static;
}

.photo-box-large{
    width : 55.75rem;
    height : 36.43rem;
    margin : 0 1.0rem; 0 1.0rem;
}

.photo-box-large-wrapper{
    position : relative;
    width: 55.75rem;
    height: 36.43rem;
}

.photo-box-large > .photo-box-large-wrapper > img{
    position : absolute;
    left : 0;
    top : 0;
    width: 55.75rem;
    height: 36.43rem;
    object-fit: cover;
}

.photo-box-large > .photo-box-large-wrapper > h5{
    position : absolute;
    left : 0;
    bottom : 0;
    color : white;

    font-size : 1.75rem;
    letter-spacing: -.0875rem;
    font-family: 'Pretendard-Semibold';
    padding : 0 0 1.7rem 2.1rem;
}


.photo-slide-horz{
    display:flex;
    flex-direction : row;
    gap : 1.0rem;
    margin-top : 1.0rem;
    width : 55.75rem;
    overflow: -moz-scrollbars-horizontal;
    overflow-x: scroll;
    overflow-y: hidden;
}

.photo-box-small{
    width : 17.75rem;
    height : 12.375rem;
    position : relative;
}

.photo-box-small:hover *{
    cursor : pointer;
}

.photo-box-small > .photo-box-small-wrapper{
    position : absolute;
    left : 0;
    top : 0;
    width : 17.75rem;
    height : 12.375rem;
}

.photo-box-small > .photo-box-small-wrapper > img{
    width : 17.75rem;
    height : 12.375rem;
    object-fit: cover;
}

.photo-box-small > .photo-box-small-over{
    position : absolute;
    left : 0;
    top : 0;
    width : 17.75rem;
    height : 12.375rem;
    background-color : #00000088;
    opacity : 0.0;
}

.photo-box-small:hover .photo-box-small-over{
    transition: opacity 0.20s ease-out;
    opacity : 1.0;
}


.kakao-map-box-wrapper{
    margin-top : 6.25rem;
    width : 100%;
    height : 34.375rem;
    background-color : #eeeeee;
}

.kakao-map-box-wrapper > #map{
    width : 100%;
    height : 100%;
}

.map-details{
    display: flex;
    flex-direction : row;
    align-items:center;
    justify-content: space-between;
    margin-top: 2.31rem;
    margin-bottom : 10.0rem;
}

.map-details-item {
    display: flex;
    flex-direction : row;
    align-items:center;
}

.map-details-item.divider{
    display: block;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width : 1px;
    height : 23px;
    background-color : #E5E5EC;
    content : ' ';
}

.map-details-item > img{
    width : 1.75rem;
    height : 1.75rem;
}

.map-details-item > h5{
    font-size : 1.125rem;
    letter-spacing: -.0875rem;
    font-family: 'Pretendard-Regular';
    margin-left : 0.25rem;
    margin-right : 1.0rem;
 }

.map-details-item > span,
.map-details-item > a > span{
    font-size : 1.125rem;
    letter-spacing: -.0875rem;
    font-family: 'Pretendard-Regular';
    color : #767676;
 }


 .contact-details{
    margin-top : 10.75rem;
    margin-bottom : 10.0rem;
 }

 .contact-details-item:not(:last-child){
    border-bottom : 1px solid #E5E5EC;
 }

 .contact-details-item{
    padding-top : 4.81rem;
    padding-bottom : 4.81rem;
    display : flex;
    flex-direction : row;
    align-items : center;
 }

 .contact-details-item > h3{
    display:block;
    width : 22.5rem;
    font-size : 1.75rem;
    letter-spacing: -.0875rem;
    font-family: 'Pretendard-Regular';
    color : #111111;
    line-height: 2.5rem;
 }

.contact-details-item > .contact-details-body{

    display: flex;
    flex-direction: column;
    /* flex-wrap: wrap; */
    /* width: auto; */
    width: calc(100% - 22.5rem);
  }

  .contact-details-item-detail > h4{
    font-size : 1.125rem;
    letter-spacing: -.0875rem;
    font-family: 'Pretendard-Semibold';
    color : #555555;
    margin-bottom : 0.7rem;
  }

  .contact-details-item-detail > p{
    font-size : 1.125rem;
    letter-spacing: -.0875rem;
    font-family: 'Pretendard-Regular';
    margin-bottom : 2.0rem;
    line-height: 2.3rem;
    color : #555555;
  }

  .public-trans-wrapper{
    display: flex;
    flex-direction : row;
  }

  .public-trans-item{
    display: flex;
    flex-direction : row;
    align-items: center;
    margin-right : 2.68rem;
  }


  .public-trans-item > img{
    width : 1.78rem;
    margin-right : 1.5rem;
  }

  .public-trans-item > span{
    display : flex;
    flex-direction : row;
    align-items : center;
    justify-content : center;
    color :white;
    padding : 0.375rem 0.75rem 0.375rem 0.75rem;
    border-radius : 0.75rem;
    margin-right : 0.5rem;
  }

  .public-trans-item > span.purple{
    background-color : #8936E0;
  }

  .public-trans-item > span.green{
    background-color : #94C63D;
  }

  .public-trans-item > span.red{
    background-color : #aa0000;
  }


  .public-trans-item > span.gold{
    background-color : #D1A62C;
  }

  .public-trans-item > span.sky{
    background-color : #72B5E3;
  }