/* Google fonts */
@import url('https://fonts.googleapis.com');
@import url('https://fonts.gstatic.com');
@import url('https://fonts.googleapis.com/css2?family=Cute+Font&family=Nanum+Gothic&family=Noto+Sans+KR:wght@100..900&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital@0;1&display=swap&family=Lexend+Mega:wght@100..900');

/* Pretendard fonts */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* 폰트    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Nanum+Gothic&family=Noto+Sans+KR:wght@100..900&family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital@0;1&display=swap&family=Lexend+Mega:wght@100..900" rel="stylesheet">
    
    <link rel="stylesheet" as="style" crossorigin href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css" />

    font: "Pretendard Variable", Pretendard
*/

/* 루트 색상 : seo/seo.css */
:root {
    /*기본색상은 녹색임*/
    /*주황
    --cnvs-themecolor: #FE9603;
    --cnvs-themecolor-rgb: 254, 150, 3;*/
    /*파랑*/
    --cnvs-themecolor: #3e8de3;
    --cnvs-themecolor-rgb: 62, 141, 227;
    /*--cnvs-body-font: 'Poppins', sans-serif;*/
    --cnvs-body-font: "Noto Sans KR", sans-serif;
    /*--cnvs-body-font: "Pretendard Variable", Pretendard*/

    --bs-body-font-size: 1.1rem; /*폰트크기. 기본값: 1 rem*/
    --bs-body-font-weight: 300;
    --bs-body-color: #000000; /*폰트색상. 기본값:212529*/
}

.lead {
    font-size: 1.1rem; /*폰트크기. 기본값: 1.25rem*/
    font-weight: 300;
}

div {
    font-size: 1.1rem;
}

label {
    font-size: 1.1rem;
    font-weight: 300;
}

.form-control {
    font-size: 1.1rem;
    font-weight: 300;
}

.form-select {
    font-size: 1.1rem;
    font-weight: 300;
}

@media (prefers-reduced-motion: reduce) {
    .form-control {
        transition: none;
    }
}

.my-theme-text-color {
    color: #FE9603; /* orange */
}

.my-text-color-green {
    color: #17a2b8;
}

.my-text-color-blue {
    color: #3e8de3; /*1E90FF*/
}

.my-bg-color-green {
    background-color: #1abc9c !important;
}

/* 컨테이너
.container {
}*/

/* Tob Bar. 왼쪽 부분 수직라인 제거 */
.top-links-container > li {
    border: none !important;
}

/* Tob Bar. 오른쪽 부분 수직라인 제거 */
#top-social > li {
    border: none !important;
}

/* Tob Bar. 서브메뉴 가로폭 */
.top-links-sub-menu {
    width: 300px;
    padding-left:0px !important;
}

    /* Tob Bar. 서브메뉴 높이 */
    .top-links-sub-menu > li {
        width: 300px;
        padding-top: 7px;
        padding-bottom: 7px;
    }

        /* Tob Bar. 폰트 */
        #top-bar, .top-links-sub-menu > li > a {
            font-size: 17px !important;
            font-family: "Noto Sans KR", sans-serif;
            font-weight: 400;
            font-style: normal;
        }

/*
.menu-link {
    font-size : 22px !important;
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 600;
    font-style: normal;
}
*/

.my-menu-level-1, .my-menu-level-1-top {
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 500;
    font-style: normal;
    font-size: 22px;
    color: black;
    text-align: left;
    display: block;
    width: 100%;
    padding: 0px 15px;
    white-space: nowrap;
}

.my-menu-level-2-title {
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 18px;
    color: #3e8de3;
    text-align: left;
    display: block;
    width: 100%;
    padding: 0px 15px;
    margin-left: 0px;
    white-space: nowrap;
}

.my-menu-level-2 {
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 18px;
    color: black;
    text-align: left;
    display: block;
    width: 100%;
    padding: 0px 10px; /*메뉴 버튼 사이 간격. 위쪽 0px, 왼쪽 10px*/
    white-space: nowrap;
}


.my-fonts {
    font-family: 'Noto Sans KR', sans-serif;
    font-size: 1.1rem;
    line-height: 160%
}

/* Cute Fonts */
.my-fonts-cute {
    font-family: "Cute Font", sans-serif !important;
    font-weight: 400 !important;
    font-style: normal !important;
    font-size: 35px !important;
}

/* 슬라이더 내용 */
.my-slide-contents {
    font-family: 'Noto Sans KR', sans-serif !important;
    font-weight: 500 !important;
    line-height: 180% !important;
    font-size: 20px !important;
}


#event-2 {
    margin-left: 40px;
    margin-top: -20px;
}

#event-3 {
    margin-left: 40px;
}

/* ------------------------- */
/* 사용중인교회              */
/* ------------------------- */
.grid-border {
    overflow: inherit;
    --cnvs-grid-border-width: 1px;
    --cnvs-grid-border-color: var(--cnvs-contrast-200);
    --cnvs-grid-border-opacity: 1;
}


    .grid-border [class^=col-] {
        margin: calc(-1 * var(--cnvs-grid-border-width)) 0 0 calc(-1 * var(--cnvs-grid-border-width));
        padding: 30px;
        border: var(--cnvs-grid-border-width) solid var(--cnvs-grid-border-color);
    }

        .grid-border [class^=col-]::before,
        .grid-border [class^=col-]::after {
            display: none;
        }

        .grid-border [class^=col-]:hover {
            --cnvs-grid-border-color: var(--cnvs-themecolor);
            background-color: rgba(var(--cnvs-themecolor-rgb),0.1);
            z-index: 1;
        }

.col-padding {
    padding: 20px 10px 10px 10px !important;
}

/* 햄버거 메뉴 */
.cnvs-hamburger {
    --cnvs-hamburger-size: 1.5rem; /* 디폴트 사이즈 1 rem */
}

.my-using-church-logo {
    display: flex;
    justify-content: center; /* 가로 중앙 */
}

.my-using-church-logo-size {
    height: 60px;
    margin-bottom: 10px;
}

.my-using-church-name {
    font-size: 19px;
    font-weight: 400;
    text-align: center;
}

.my-using-church-address {
    font-size: 15px;
    text-align: center;
}

/*서브페이지 경로가 오른쪽 하단이 아니라 오른쪽 상단에 온다 ?? 
.page-title-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    position: relative;
    min-height: 200px;
    padding-top: 2rem;
}
*/


.menu_function_fonts {
    font-size: 19px;
    font-weight: 400;
}

/* ------------------------- */
/* 탭 버튼             */
/* ------------------------- */
.my-tab-button-on {
    color: white;
    background-color: #17a2b8;
    border-color: #17a2b8;
    text-align: center;
    width: 155px;
    display: inline-block;
    margin: 0px -3px -1px -3px;
    font-size: 18px;
    font-weight: 400;
    padding-left: 0px;
    padding-right: 0px;
}

.my-tab-button-off {
    color: #1893ad;
    background-color: white;
    border-color: #17a2b8;
    text-align: center;
    width: 155px;
    display: inline-block;
    margin: 0px -2px -1px -2px;
    margin: 0px -3px -1px -3px;
    font-size: 18px;
    font-weight: 400;
    padding-left: 0px;
    padding-right: 0px;
}

    .my-tab-button-on:hover,
    .my-tab-button-off:hover {
        color: white;
        background-color: #17a2b8;
        border-color: #17a2b8;
    }

/* ------------------------- */
/* 버튼                      */
/* ------------------------- */


/* 버튼 (라운드) */
.my-btn-radius-30 {
    border-radius: 30px;
}

/* 버튼 (파랑-검정) */
.my-btn-blue-black {
    color: white !important;
    background-color: #3e8de3;
    border-color: #3e8de3;
    height: 42px;
    text-align: center;
    display: inline-block;
    /*margin: 5px 2px 5px 2px;*/
}

    .my-btn-blue-black:hover, .my-btn-blue-black:focus {
        color: white !important;
        background-color: black;
        border-color: black;
    }

/* 버튼 (검정-파랑) */
.my-btn-black-blue {
    color: white !important;
    background-color: black;
    border-color: black;
    height: 42px;
    text-align: center;
    display: inline-block;
    /*margin: 5px 2px 5px 2px;*/
}

    .my-btn-black-blue:hover, .my-btn-black-blue:focus {
        color: white !important;
        background-color: #3e8de3;
        border-color: #3e8de3;
    }

/* 버튼 (회색-검정) */
.my-btn-gray-black {
    color: white !important;
    background-color: gray;
    border-color: gray;
    height: 42px;
    text-align: center;
    display: inline-block;
    /*margin: 5px 2px 5px 2px;*/
}

    .my-btn-gray-black:hover, .my-btn-gray-black:focus {
        color: white !important;
        background-color: black;
        border-color: black;
    }

/* 버튼 (연한회색-검정) */
.my-btn-lightgray-black {
    font-size: 18px;
    color: black !important;
    background-color: #f1f1f1;
    border-color: #f1f1f1;
    height: 42px;
    text-align: center;
    display: inline-block;
    /*margin: 5px 2px 5px 2px;*/
    /*border-radius: 30px;*/
}

    .my-btn-lightgray-black-on,
    .my-btn-lightgray-black:hover, .my-btn-lightgray-black:focus {
        color: white !important;
        background-color: black;
        border-color: black;
    }

/* 버튼 (파랑outline.흰색바탕-파랑) */
.my-btn-white-blue {
    color: #3e8de3 !important;
    background-color: white;
    border-color: #3e8de3;
    height: 42px;
    text-align: center;
    display: inline-block;
    /*margin: 5px 2px 5px 2px;*/
}

    .my-btn-white-blue:hover, .my-btn-white-blue:focus {
        color: white !important;
        background-color: #3e8de3;
        border-color: #3e8de3;
    }

/* 버튼 (청녹색-검정) */
.my-btn-turquoise-black {
    color: white !important;
    background-color: #17a2b8;
    border-color: #17a2b8;
    height: 42px;
    text-align: center;
    display: inline-block;
    /*margin: 5px 2px 5px 2px;*/
}

    .my-btn-turquoise-black:hover, .my-btn-turquoise-black:focus {
        color: white !important;
        background-color: black;
        border-color: black;
    }

/* 버튼 (청녹색-회색) */
.my-btn-turquoise-gray {
    color: white !important;
    background-color: #17a2b8;
    border-color: #17a2b8;
    height: 42px;
    text-align: center;
    display: inline-block;
    /*margin: 5px 2px 5px 2px;*/
}

    .my-btn-turquoise-gray:hover, .my-btn-turquoise-gray:focus {
        color: white !important;
        background-color: darkgray;
        border-color: darkgray;
    }

/* 버튼 (청녹색outline-청녹색) */
.my-btn-turquoiseoutline-turquoise {
    color: #17a2b8 !important;
    background-color: white;
    border-color: #17a2b8;
    height: 42px;
    text-align: center;
    display: inline-block;
    /*margin: 5px 2px 5px 2px;*/
}

    .my-btn-turquoiseoutline-turquoise:hover, .my-btn-turquoiseoutline-turquoise:focus {
        color: white !important;
        background-color: #17a2b8;
        border-color: #17a2b8;
    }

/* 버튼 (검정outline-청녹색) */
.my-btn-blackoutline-turquoise {
    color: black !important;
    background-color: white;
    border-color: black;
    height: 42px;
    text-align: center;
    display: inline-block;
    /*margin: 5px 2px 5px 2px;*/
}

    .my-btn-blackoutline-turquoise:hover, .my-btn-blackoutline-turquoise:focus {
        color: white !important;
        background-color: #17a2b8;
        border-color: #17a2b8;
    }

/* 버튼 (red outline - red) */
.my-btn-redoutline-red {
    color: #dc3545 !important;
    background-color: white;
    border-color: #dc3545;
    height: 42px;
    text-align: center;
    display: inline-block;
    /*margin: 5px 2px 5px 2px;*/
}

    .my-btn-redoutline-red:hover, .my-btn-redoutline-red:focus {
        color: white !important;
        background-color: #dc3545;
        border-color: #dc3545;
    }


/* Slider 하단 설명바 (시작) -------------------------- */
div.card_graybar {
    background-color: darkgrey;
    height: 50px;
    margin-top: 20px;
}

table.full {
    width: 100%;
    height: 100%
}

td.card_lefttd {
    width: 50%;
    color: white;
    text-align: left;
    font-size: 12pt;
    padding-top: 0px;
    padding-left: 15px;
}

td.card_righttd {
    width: 50%;
    color: white;
    text-align: right;
    font-size: 12pt;
    padding-top: 0px;
    padding-right: 15px;
}
/* 샘플화면 하단 설명바 (끝) -------------------------- */


/* 목록 (시작) -------------------------- */
th.a {
    text-align: center;
    vertical-align: middle;
    padding-left: 15px;
    padding-right: 15px;
    font-weight: 300 !important;
}

td.a {
    text-align: center;
    vertical-align: middle;
    padding-left: 15px;
    padding-right: 15px;
    font-weight: 300 !important;
}

td.b {
    text-align: left;
    vertical-align: middle;
    padding-left: 15px;
    padding-right: 15px;
    font-weight: 300 !important;
}

ul.a {
    margin: 20px;
    list-style-type: disc;
    font-weight: 300 !important;
}

li.a {
    padding: 0px;
    line-height: 180%;
    font-weight: 300 !important;
}
/* 목록 (끝) -------------------------- */

a {
    color: black;
    text-decoration: none; /* 밑줄 제거 원하면 추가 */
}

    a:hover {
        color: #3e8de3;
    }

/*----------------------*/
/* 서브 페이지 타이틀 문구   */
/*----------------------*/

.page-title {
    padding-top: 25px;
    padding-bottom: 25px;
}

.page-subject {
    font-family: 'Noto Sans KR', sans-serif;
    /*font-family: "Cute Font", sans-serif !important;*/
    font-weight: 500 !important;
    font-style: normal !important;
    font-size: 28px !important;
}

.page-content {
    margin-top: 25px !important;
}

/* 타이틀 경로 : / 에서 >로 변경 */
.breadcrumb-item + .breadcrumb-item::before {
    float: left;
    padding-right: var(--bs-breadcrumb-item-padding-x);
    color: var(--bs-breadcrumb-divider-color);
    content: var(--bs-breadcrumb-divider, ">") /* rtl: var(--bs-breadcrumb-divider, "/") */;
    color: black;
}

.page-title,
.page-content,
.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb-item.active {
    font-family: 'Noto Sans KR', sans-serif;
    font-weight: 400;
    font-size: 18px !important;
    color: black;
}

/* 지저스온 로고 -----------------------------------------*/
.jesuson-logo-area {
    display: flex;
    align-items: center;
}

.jesuson-logo-box {
    display: flex;
    align-items: center; /* 수직 가운데 정렬 */
    justify-content: center; /* 수평 가운데 정렬 */
    width: 39px;
    height: 39px;
    border: 0px solid #396f9d;
    background-color: #396f9d;
    font-family: "Lexend Mega"; /* t 글자를 적으면 십자가 모양으로 보임 */
    font-weight: 300; /*100 to 900*/
    margin: 0px;
    padding: 0px;
    box-sizing: border-box;
    border-radius: 5px;
    color: white;
    font-size: 45px;
    padding-left: 2px;
}

.jesuson-logo-jesus {
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 900;
    color: #396f9d;
    font-size: 27px;
    margin-left: 15px;
    margin-top: -11px;
}

.jesuson-logo-on {
    font-family: "Noto Sans KR", sans-serif;
    font-weight: 900;
    color: #396f9d;
    font-size: 27px;
    margin-left: 0px;
    margin-top: -1px;
    font-weight: 700;
    transform: scaleY(1.5);
    display: inline-block;
}
/* -------------------------------------------------------*/

.subpage-heading-title {
    display: block;
    font-size: 28px;
    margin-bottom: -0.2em;
    font-weight: 600;
}

.title-block div {
    margin-top: 15px;
    line-height: 160%;
}
/*----------------------------------------------------------------------------------------------*/
/* Tob Bar. 모바일 환경 */
/*----------------------------------------------------------------------------------------------*/
@media (max-width: 767.98px) {
    /* 첫째줄 아래 라인 제거 */
    .top-links {
        border-bottom: none !important;
    }

    /* 둘째줄 아래 라인제거
    #top-bar {
        border-bottom: none !important;
    }
    */

    /*responsive.css에서 모바일 메뉴 버튼 위치 조정
    #primary-menu-trigger {
        opacity: 1;
        pointer-events: auto;
        top: 25px;
        margin-top: 0;
        right: 0 !important;
        left: auto !important;
        z-index: 1;
        font-size: 30px !important;
        margin-right: 20px !important;
    }
    */

    .my-text-align-center {
        text-align: center !important;
    }

    .top-links-item {
        font-size:0.85em;
    }
}


/*          


.triangle-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 30px;
    gap: 5px;
}

.triangle-up, .triangle-down {
    width: 0;
    height: 0;
    border-left: 7px solid transparent;
    border-right: 7px solid transparent;
    cursor: pointer;
}

.triangle-up {
    border-bottom: 7px solid black;
}

.triangle-down {
    border-top: 7px solid black;
}
    */


/* PC버전에서 로고가 상하 스크롤시 작아지는 값을 기본 60px에서 70px로 늘림 */
:root {
    --cnvs-header-height-shrink: 70px;
}

/* -------------------------------------------------------*/
/* 글자 pulse 효과 (커졌다 작아졌다 반복) */
/* -------------------------------------------------------*/
.form-check-input {
    border: var(--bs-border-width) solid dimgray;
    margin-right: 4px;
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.2);
    }

    100% {
        transform: scale(1);
    }
}

.pulse {
    animation: pulse 3s infinite;
    display: inline-block; /* transform 적용을 위해 필요 */
}

/* -------------------------------------------------------*/
/* 글자 색상 pulse 효과 (색상이 바뀜 반복) */
/* -------------------------------------------------------*/
@keyframes colorChange {
    0% {
        color: #2a64a0; /* #2a64a0; 진한파랑 */ /* #6fb2f0; 연한파랑 */
    }

    50% {
        color: #3e8de3;
    }

    100% {
        color: #2a64a0; /* #2a64a0; 진한파랑 */ /* #6fb2f0; 연한파랑 */
    }
}

.color-flash {
    animation: colorChange 2s infinite;
}

/* ----------------------------------------------------------------
	Go To Top. 
    채널톡 아이콘 위치와 안겹치게 이동 및 사이즈 크게 변경
-----------------------------------------------------------------*/
#gotoTop {
    --cnvs-gotoTop-size: 56px; /* 기본값 2.5rem. 채널톡 아이콘 때문에 위치 변경함 */
    --cnvs-gotoTop-bg: rgba(0, 0, 0, 0.3);
    --cnvs-gotoTop-icon-size: 2rem; /* 기본값 1.5rem. 채널톡 아이콘 때문에 위치 변경함 */
    --cnvs-gotoTop-icon-color: #fff;
    --cnvs-gotoTop-position-boxed-right: 24px; /* 기본값 30px. 채널톡 아이콘 때문에 위치 변경함 */
    --cnvs-gotoTop-position-boxed-bottom: 110px; /* 기본값 50px. 채널톡 아이콘 때문에 위치 변경함 */
    --cnvs-gotoTop-position-botom: 30px;
    --cnvs-gotoTop-border-radius: 24px; /* 기본값 2px. 채널톡 아이콘 때문에 위치 변경함 */
}