/* Set padding to keep content from hitting the edges */

.btn-color-create {
    background-color: #c83001 !important;
    color: #fff
}

.btn-color-update {
    background-color: #ffb700 !important;
    color: #fff
}

.btn-color-cancel {
    background-color: #efefef !important
}

.btn-color-baptism {
    background-color: #019ea0 !important;
    color: #fff
}

.point-box {
    border: 1px dotted red;
    background-color: #fff4e7;
    padding: 2px 2px;
}

.navbar {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 2;
    height: 63px
}

    .navbar a {
        color: #fff
    }

        .navbar a:hover {
            color: #fff;
            font-weight: 600
        }

        .navbar a:active {
            color: #fff;
        }

    .navbar .on {
        font-weight: 600
    }

.body-content {
    position: relative;
    padding-top: 63px;
    padding-left: 0;
    padding-right: 0;
    z-index: 1;
}


/* Override the default bootstrap behavior where horizontal description lists 
   will truncate terms that are too long to fit in the left column 
*/
.dl-horizontal dt {
    white-space: normal;
}

/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
    max-width: 280px;
}

.input-text {
    border: 1px solid #dfdfdf;
    font-size: .9rem;
    padding: 5px 2px 3px 2px;
    width: 100%
}

.office-search-zone {
    padding: 10px 10px 0 10px
}

    .office-search-zone .search-container {
        border: 1px solid #0F3446;
        border-radius: 5px
    }

    .office-search-zone .search-container-focus {
        border: 2px solid #0F3446;
    }

    .office-search-zone .search-container-row {
        display: flex;
        flex-direction: row
    }

    .office-search-zone .search-container-row-cell1 {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        align-self: center;
        padding: 0 4px;
    }

        .office-search-zone .search-container-row-cell1 input {
            border: none;
            font-size: 1rem;
            max-width: 100%;
            width: 100%;
        }

    .office-search-zone .search-container-row-cell2 {
        display: flex;
        flex-direction: column;
        align-self: center;
        flex-direction: row
    }

        .office-search-zone .search-container-row-cell2 button {
            padding: 8px 12px
        }

        .office-search-zone .search-container-row-cell2 img {
            width: 18px;
            vertical-align: bottom
        }

.dropdownbox {
    font-size: .9rem;
    height: 30px;
}

.ul-base {
    list-style-type: none;
}

    .ul-base li {
        padding: 2px 0;
    }

        .ul-base li span {
            font-weight: 600;
        }

        .ul-base li div {
            margin-top: 3px
        }

.ul-line-b {
    list-style-type: none;
}

    .ul-line-b li {
        padding: 8px;
        border-bottom: 1px solid #dfdfdf;
    }

        .ul-line-b li span {
            font-weight: 600;
        }

        .ul-line-b li div {
            margin-top: 3px
        }

.ul-form {
    list-style-type: none;
}

    .ul-form li {
        padding: 7px 10px 12px 10px;
        border-bottom: 1px solid #dfdfdf;
    }

        .ul-form li:last-child {
            border-bottom: 0;
        }

        .ul-form li span {
            font-weight: 600;
            font-size: .95rem
        }

        .ul-form li div {
            margin-top: 3px
        }

        .ul-form li input[type=text], input[type=password] {
            border: 1px solid #dfdfdf;
            font-size: .9rem;
            padding: 6px 2px 5px 2px
        }

        .ul-form li select {
            font-size: .9rem;
            height: 30px;
        }

        .ul-form li input[type=radio] {
            transform: scale(1.2);
            margin: 0 3px
        }

        .ul-form li input[type=checkbox] {
            transform: scale(1.2);
            margin: 0 3px
        }

.ol-line-b {
    padding-inline-start: 30px;
    padding-inline-end: 10px;
}

    .ol-line-b li {
        padding: 8px;
        border-bottom: 1px solid #dfdfdf;
    }

        .ol-line-b li span {
            font-weight: 600;
        }

        .ol-line-b li div {
            margin-top: 3px
        }

.h3-title {
    margin-left: 2%;
    padding: 10px 0;
}

.logo-zone {
    background-color: #fff;
    margin-bottom: 10px
}

.banner-zone {
    background-color: #fff;
    /*    margin-top: 10px;*/
}

    .banner-zone img {
        width: 100%;
        vertical-align: bottom
    }

.body-banner-zone {
    background-color: #fff;
    /*    margin-top: 10px;*/
}

    .body-banner-zone img {
        width: 100%;
        vertical-align: bottom
    }

.pick-zone {
    background-color: #fff;
    margin-top: 10px;
    padding-top: 20px;
}

    .pick-zone .pick-tabs {
        margin-top: 10px;
        text-align: center
    }

        .pick-zone .pick-tabs .btntab {
            background-color: #fff;
            font-size: 1rem;
        }

        .pick-zone .pick-tabs .on {
            background-color: #0076BA;
            color: #fff;
            border-radius: 30px;
            padding: 4px 8px;
        }

        /*.pick-zone .pick-tabs .btntab:focus {
            background-color: #fff;
            color: #000;
        }*/

        .pick-zone .pick-tabs .btntab:active {
            background-color: #0076BA;
            color: #fff;
        }

        .pick-zone .pick-tabs span {
            padding: 0 10px;
        }

    .pick-zone .pick-items {
        margin-top: 10px;
        padding-bottom: 10px
    }

    .pick-zone .pick-items-pastor {
        padding: 40px 5%
    }

    .pick-zone .pick-items-pastor-row {
        display: flex;
        flex-direction: row
    }

    .pick-zone .pick-items-pastor-row-left {
        display: flex;
        flex-direction: column;
        width: 80%;
        line-height: 2rem;
        align-self: center;
    }

        .pick-zone .pick-items-pastor-row-left .series-title {
            color: #307AC5;
            font-size: 1rem
        }

        .pick-zone .pick-items-pastor-row-left .sermon-title {
            font-size: 1.2rem;
            font-weight: 600
        }

        .pick-zone .pick-items-pastor-row-left .info-bible {
        }

        .pick-zone .pick-items-pastor-row-left .info-pastor {
        }

        .pick-zone .pick-items-pastor-row-left .info-date {
            color: #808080
        }

    .pick-zone .pick-items-pastor-row-right {
        display: flex;
        flex-direction: column;
        width: 20%
    }

        .pick-zone .pick-items-pastor-row-right img {
            width: 100%;
            vertical-align: bottom
        }

    .pick-zone .pick-items-pastor2 {
    }

    .pick-zone .pick-items-pastor2-cover img {
        width: 100%
    }

    .pick-zone .pick-items-pastor2-content {
        padding: 10px;
        line-height: 1.5rem
    }

        .pick-zone .pick-items-pastor2-content .series-title {
            color: #307AC5;
            font-size: 1rem
        }

        .pick-zone .pick-items-pastor2-content .sermon-title {
            font-size: 1.2rem;
            font-weight: 600
        }

        .pick-zone .pick-items-pastor2-content .info-bible {
        }

        .pick-zone .pick-items-pastor2-content .info-pastor {
        }

        .pick-zone .pick-items-pastor2-content .info-date {
            color: #808080
        }

    .pick-zone .pick-items-sermon {
        border-top: 1px solid #dfdfdf;
        border-bottom: 1px solid #dfdfdf;
    }

    .pick-zone .pick-items-sermon-list {
        margin-top: 10px;
        background-color: #fff
    }

    .pick-zone .pick-items-sermon-list-contents {
        padding: 10px;
    }

    .pick-zone .pick-items-sermon-list-contents-item {
        display: flex;
        align-items: start;
        padding: 10px 0 15px 0;
        border-bottom: 1px solid #dfdfdf;
    }

        .pick-zone .pick-items-sermon-list-contents-item:last-child {
            border-bottom: none
        }

    .pick-zone .pick-items-sermon-list-contents-item-cover {
        width: 30%;
        display: flex;
        align-self: center
    }

        .pick-zone .pick-items-sermon-list-contents-item-cover img {
            width: 100%;
            vertical-align: bottom
        }

    .pick-zone .pick-items-sermon-list-contents-item-info {
        line-height: 1.4rem;
        padding: 0 10px;
        width: 66%
    }

    .pick-zone .pick-items-sermon-list-contents-item-play {
        width: 4%;
        display: flex;
        margin-left: auto;
        align-self: center;
        justify-content: end;
    }

        .pick-zone .pick-items-sermon-list-contents-item-play img {
            width: 24px;
        }



    .pick-zone .pick-items-meditation {
        border-top: 1px solid #dfdfdf;
        border-bottom: 1px solid #dfdfdf;
    }

        .pick-zone .pick-items-meditation:first-child {
            border-top: none;
        }

    .pick-zone .pick-items-meditation-item {
        padding: 10px;
        border-top: 1px solid #dfdfdf
    }

        .pick-zone .pick-items-meditation-item:first-child {
            border-top: none;
        }

        .pick-zone .pick-items-meditation-item .data {
            font-size: 1rem;
            padding: 5px;
            font-weight: 600
        }

        .pick-zone .pick-items-meditation-item .data-title {
            color: #307AC5
        }

        .pick-zone .pick-items-meditation-item .data-date {
            color: #808080
        }

        .pick-zone .pick-items-meditation-item .info-data {
            font-size: .9rem;
            padding: 5px;
            color: #808080
        }

    .pick-zone .pick-items-news {
        border-top: 1px solid #dfdfdf;
        border-bottom: 1px solid #dfdfdf;
    }

        .pick-zone .pick-items-news:first-child {
            border-top: none;
        }

    .pick-zone .pick-items-news-item {
        padding: 10px;
        border-top: 1px solid #dfdfdf;
    }

        .pick-zone .pick-items-news-item:first-child {
            border-top: none;
        }

        .pick-zone .pick-items-news-item .data {
            font-size: 1rem;
            padding: 5px;
            font-weight: 600
        }

        .pick-zone .pick-items-news-item .data-info {
        }

        .pick-zone .pick-items-news-item .data-title {
            color: #307AC5
        }

.series-zone {
    background-color: #fff;
    margin-top: 10px;
    padding-top: 20px;
    position: relative;
}

.everyday-bible-zone {
    background-color: #fff;
    margin-top: 10px;
    padding-top: 20px;
    position: relative;
}

    .everyday-bible-zone .everyday-bible-contents {
        line-height: 1.6rem;
        word-break: break-all;
        padding: 20px;
        font-size: 1rem;
    }

    .everyday-bible-zone .everyday-bible-contents-item {
        margin-top: 10px
    }

        .everyday-bible-zone .everyday-bible-contents-item:first-child {
            margin-top: 0
        }

.new-family-zone {
    margin-top: 10px;
}

    .new-family-zone img {
        width: 100%
    }

.infomation-zone {
    background-color: #fff;
    margin-top: 10px;
    padding-top: 20px;
}

    .infomation-zone .infomation-container {
        padding: 10px 0
    }

    .infomation-zone .infomation-container-box {
        background-color: #EEEDED;
        padding: 10px;
    }

    .infomation-zone .infomation-container-box-item {
        display: flex;
        align-items: center;
    }

        .infomation-zone .infomation-container-box-item .info-img {
        }

            .infomation-zone .infomation-container-box-item .info-img img {
                width: 40px;
                vertical-align: middle
            }

        .infomation-zone .infomation-container-box-item .info-title {
            font-size: 1rem;
            padding-left: 10px
        }

.sns-zone {
    background-color: #fff;
    margin-top: 10px;
    /*padding: 20px 0 0 0;*/
}

    .sns-zone .sns-icons {
        padding: 10px 0;
        text-align: center;
    }

    .sns-zone .sns-icons-icon {
        display: inline-block;
        padding: 14px;
        margin: 0 5px;
        border-radius: 50%;
        background-color: #EEEDED
    }

        .sns-zone .sns-icons-icon img {
            vertical-align: middle;
            width: 32px
        }

.sermon-tab-zone {
    background-color: #fff
}

    .sermon-tab-zone .top-tab {
        overflow: hidden
    }

    .sermon-tab-zone .top-tab-panel {
        position: relative;
        left: 0;
        right: 0;
        overflow-y: auto;
        padding: 5px 0;
    }

    .sermon-tab-zone .top-tab-panel-contents {
        display: flex;
        align-items: start;
        padding: 2px 10px;
        width: 641px
    }

    .sermon-tab-zone .top-tab-panel-contents-button {
        padding: 5px 10px;
        font-size: 1rem;
        font-weight: 600;
    }

    .sermon-tab-zone .top-tab-panel-contents .on {
        background-color: #065fd4;
        color: #fff;
        border-radius: 20px;
    }

    .sermon-tab-zone .bottom-tab-contents {
        padding-top: 10px;
        padding-top: 5px;
        text-align: center
    }

    .sermon-tab-zone .bottom-tab-contents-button {
        padding: 5px 10px;
        font-size: .9rem;
    }

    .sermon-tab-zone .bottom-tab-contents .on {
        border-top: 1px solid #065fd4;
        background: linear-gradient(rgba(6, 95, 212, .4), #fff 60%);
        color: #065fd4;
    }

.sermon-onetop {
    margin-top: 10px;
    background-color: #fff
}

.sermon-list {
    background-color: #fff
}

    .sermon-list .list-contents {
        padding: 10px;
    }

    .sermon-list .list-contents-item {
        display: flex;
        align-items: start;
        padding: 10px 0 15px 0;
        border-bottom: 1px solid #dfdfdf;
    }

    .sermon-list .list-contents-item-cover {
        width: 39%;
        display: flex;
        align-self: center
    }

        .sermon-list .list-contents-item-cover img {
            width: 100%;
            vertical-align: bottom
        }

    .sermon-list .list-contents-item-info {
        width: 57%;
        line-height: 1.4rem;
        padding: 0 10px
    }

    .sermon-list .list-contents-item-play {
        width: 4%;
        display: flex;
        margin-left: auto;
        align-self: center;
        justify-content: end;
    }

        .sermon-list .list-contents-item-play img {
            width: 24px;
        }

    .sermon-list .list-more {
        margin-top: 5px;
        text-align: center;
        padding: 14px 0;
    }

        .sermon-list .list-more button {
            background-color: #0F3446;
            color: #fff;
            padding: 10px 24px;
            font-size: 1rem;
            border-radius: 30px;
            width: 90%
        }

    .sermon-list .list-page {
        margin-top: 5px;
        text-align: center;
        padding: 14px 0;
    }

.zone-title {
    font-size: 1.2rem;
    font-weight: 600;
    padding: 10px 0;
    text-align: center
}

    .zone-title .more {
        position: absolute;
        right: 10px;
        bottom: 0;
    }

        .zone-title .more img {
            width: 28px;
        }

.zone-title-main {
    font-size: 1.3rem;
    font-weight: 600;
    padding-left: 10px;
    padding-bottom: 5px;
}

    .zone-title-main .more {
        position: absolute;
        top: -5px;
        right: 10px;
        bottom: 0;
    }

        .zone-title-main .more img {
            width: 28px;
            vertical-align: bottom;
        }

.zone {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 10px;
}

.zone-10 {
    margin-top: 10px;
    background-color: #fff;
    padding: 10px;
}

.zone-b-10 {
    margin-top: 10px;
    background-color: #fff;
    padding: 10px 10px 30px 10px;
}


.zone-20 {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 10px;
    margin-top: 10px;
}

.zone-b-20 {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 30px;
    margin-top: 10px;
}

.education-zone {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 10px;
    /*    margin-top:10px*/
}

    .education-zone .edu-desc {
        padding: 10px;
        margin-top: 10px
    }

    .education-zone .edu-contents {
        padding: 10px
    }

    .education-zone .edu-contents-item {
        border: 1px solid #e7e7e7;
        border-radius: 10px;
        padding: 10px;
    }

        .education-zone .edu-contents-item:nth-child(n+1) {
            margin-top: 10px
        }

        .education-zone .edu-contents-item ul {
        }

            .education-zone .edu-contents-item ul .title {
                color: #c83001;
                font-weight: 600;
                font-size: 1.05rem;
                text-align: center;
                padding: 5px 0
            }

            .education-zone .edu-contents-item ul li {
                padding: 2px 0;
            }

                .education-zone .edu-contents-item ul li span {
                    font-weight: 600
                }

    .education-zone .edu-contents-item-buttons {
        margin-top: 5px;
        text-align: center;
        padding: 10px 0 4px 0;
    }

        .education-zone .edu-contents-item-buttons button {
            padding: 6px 0;
            border-radius: 30px;
            font-size: .9rem;
            width: 100%
        }

        .education-zone .edu-contents-item-buttons div {
            padding: 6px 0;
            border-radius: 30px;
            font-size: .9rem;
            width: 100%
        }

.form-zone {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 10px;
    /*    margin-top:10px*/
}

    .form-zone .form-desc {
        border-top: 1px solid #dfdfdf;
        padding: 10px;
        font-size: .9rem;
        line-height: 1.3rem;
        color: #000;
        background-color: #fff8f0;
    }

    .form-zone .form-content {
        margin-top: 5px;
        padding: 10px
    }

    .form-zone .form-personal-desc {
        margin-top: 5px;
        background-color: #f5f5f5;
        padding: 10px;
        line-height: 1.3rem;
    }

    .form-zone .form-personal-desc-sub {
        padding: 5px 20px;
    }

    .form-zone .form-personal-desc-point {
        font-weight: 600;
        color: #116cb1;
        width: 100%;
    }

    .form-zone .form-personal-desc-agree {
        text-align: center;
        margin-top: 20px
    }

    .form-zone .form-buttons {
        margin-top: 10px;
        padding: 10px;
        text-align: center
    }

    .form-zone .form-buttons-create {
        padding: 6px 12px;
        border-radius: 5px;
        font-size: 1rem;
        width: 90%
    }

    .form-zone .form-buttons-cancel {
        padding: 6px 12px;
        border-radius: 5px;
        font-size: 1rem;
        width: 90%
    }

.education-request-zone {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 10px
}

    .education-request-zone .request-desc {
        border-top: 1px solid #dfdfdf;
        padding: 10px;
        font-size: .9rem;
        line-height: 1.3rem;
        color: #000;
        background-color: #fff8f0;
    }

    .education-request-zone .request-form {
        margin-top: 5px;
        padding: 10px
    }

    .education-request-zone .request-personal-desc {
        margin-top: 5px;
        background-color: #f5f5f5;
        padding: 10px;
        line-height: 1.3rem;
    }

    .education-request-zone .request-personal-desc-sub {
        padding: 5px 20px;
    }

    .education-request-zone .request-personal-desc-point {
        font-weight: 600;
        color: #116cb1;
        width: 100%;
    }

    .education-request-zone .request-personal-desc-agree {
        text-align: center;
        margin-top: 20px
    }

    .education-request-zone .request-buttons {
        margin-top: 10px;
        padding: 10px;
        text-align: center
    }

    .education-request-zone .request-buttons-create {
        padding: 6px 12px;
        border-radius: 5px;
        font-size: 1rem;
    }

    .education-request-zone .request-buttons-cancel {
        padding: 6px 12px;
        border-radius: 5px;
        font-size: 1rem;
    }

.education-cancel-zone {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 10px
}

    .education-cancel-zone .cancel-desc {
        border-top: 1px solid #dfdfdf;
        padding: 10px;
        font-size: .9rem;
        line-height: 1.3rem;
        color: #000;
        background-color: #fff8f0;
    }

    .education-cancel-zone .cancel-form {
        margin-top: 5px;
        padding: 10px
    }

    .education-cancel-zone .cancel-buttons {
        margin-top: 10px;
        padding: 10px;
        text-align: center
    }

    .education-cancel-zone .cancel-buttons-create {
        padding: 6px 12px;
        border-radius: 5px;
        font-size: 1rem;
    }

    .education-cancel-zone .cancel-buttons-cancel {
        padding: 6px 12px;
        border-radius: 5px;
        font-size: 1rem;
    }

.qt-detail-zone {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 10px;
    /*    margin-top: 10px*/
}

    .qt-detail-zone .qt-zoom {
        position: absolute;
        right: 10px;
        /*        bottom: 0;*/
        top: 55px
    }

        .qt-detail-zone .qt-zoom button {
            background-color: #193CB0;
            border-radius: 30px;
            padding: 3px;
        }

        .qt-detail-zone .qt-zoom img {
            vertical-align: bottom;
            width: 24px
        }

    .qt-detail-zone .qt-container {
        margin-top: 10px;
        border-top: 1px solid #dfdfdf;
        padding: 10px
    }

    .qt-detail-zone .qt-container-title {
        margin-top: 10px;
        font-size: 1rem;
        color: #000;
        font-weight: 600;
        line-height: 1.4rem;
    }

    .qt-detail-zone .qt-container-content-30 {
        margin-top: 30px
    }

    .qt-detail-zone .qt-container-content-50 {
        margin-top: 50px
    }

    .qt-detail-zone .qt-container-footer {
        margin-top: 20px;
        text-align: center
    }

        .qt-detail-zone .qt-container-footer .btnonehundred {
            display: inline-block;
            padding: 5px 10px;
            background-color: #8e2632;
            color: #fff;
            text-decoration: none;
            margin-right: 5px;
            font-size: 1rem;
        }


            .qt-detail-zone .qt-container-footer .btnonehundred:last-child {
                margin-right: 0
            }

.qt-etc-detail-zone {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 10px;
    /*    margin-top:10px*/
}

    .qt-etc-detail-zone .qt-etc-guide-open {
        position: absolute;
        right: 10px;
        /*        bottom: 0;*/
        top: 55px
    }

        .qt-etc-detail-zone .qt-etc-guide-open button {
            background-color: #999999;
            color: #fff;
            padding: 2px 6px;
            border-radius: 30px;
        }

    .qt-etc-detail-zone .qt-etc-guide {
        margin-top: 10px;
        border-top: 1px solid #dfdfdf;
        padding: 20px 50px 10px 50px
    }

    .qt-etc-detail-zone .qt-etc-guide-close {
        margin-top: 20px;
        text-align: center
    }

        .qt-etc-detail-zone .qt-etc-guide-close button {
            background-color: #999999;
            color: #fff;
            padding: 5px 10px;
            border-radius: 30px;
            width: 100%
        }

    .qt-etc-detail-zone .qt-etc-container {
        margin-top: 10px;
        border-top: 1px solid #dfdfdf;
        padding: 10px
    }

    .qt-etc-detail-zone .qt-etc-container-title {
        margin-top: 10px;
        font-size: 1rem;
        color: #000;
        font-weight: 600;
        line-height: 1.4rem;
    }

    .qt-etc-detail-zone .qt-etc-container-content {
        margin-top: 10px;
        border-top: 1px solid #dfdfdf;
        padding: 10px
    }

        .qt-etc-detail-zone .qt-etc-container-content img {
            width: 100%;
        }

.notice-zone {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 10px;
    /*    margin-top: 10px*/
}

    .notice-zone .notice-contens {
        border-top: 1px solid #dfdfdf;
        border-bottom: 1px solid #dfdfdf;
        margin-top: 10px
    }

    .notice-zone .notice-contens-item {
        padding: 10px;
        border-top: 1px solid #dfdfdf;
    }

        .notice-zone .notice-contens-item:first-child {
            border-top: none;
        }

    .notice-zone .notice-contens-item-data {
        font-size: 1rem;
        padding: 5px;
        font-weight: 600;
    }

    .notice-zone .notice-more {
        margin-top: 5px;
        text-align: center;
        padding: 14px 0;
    }

        .notice-zone .notice-more button {
            background-color: #0F3446;
            color: #fff;
            padding: 10px 24px;
            font-size: 1rem;
            border-radius: 30px;
            width: 90%;
        }

.notice-detail-zone {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 10px;
    /*    margin-top: 10px*/
}

    .notice-detail-zone .detail-contens {
        border-top: 1px solid #dfdfdf;
        margin-top: 10px
    }

    .notice-detail-zone .detail-contens-head {
        padding: 20px 0;
        position: relative
    }

    .notice-detail-zone .detail-contens-head-title {
        text-align: center;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .notice-detail-zone .detail-contens-head-date {
        position: absolute;
        /*        bottom: 16px;*/
        bottom: -10px;
        right: 10px
    }

    .notice-detail-zone .detail-contens-data {
        padding: 30px 20px 20px;
        font-size: .9rem
    }

.news-zone {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 10px;
    /*    margin-top: 10px*/
}

    .news-zone .news-contens {
        border-top: 1px solid #dfdfdf;
        border-bottom: 1px solid #dfdfdf;
        margin-top: 10px
    }

    .news-zone .news-contens-item {
        padding: 10px;
        border-top: 1px solid #dfdfdf;
    }

        .news-zone .news-contens-item:first-child {
            border-top: none;
        }

    .news-zone .news-contens-item-data {
        font-size: 1rem;
        padding: 5px;
        font-weight: 600;
    }

    .news-zone .news-more {
        margin-top: 5px;
        text-align: center;
        padding: 14px 0;
    }

        .news-zone .news-more button {
            background-color: #0F3446;
            color: #fff;
            padding: 10px 24px;
            font-size: 1rem;
            border-radius: 30px;
            width: 90%;
        }

.news-detail-zone {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 10px;
    /*    margin-top: 10px*/
}


    .news-detail-zone .detail-contens {
        border-top: 1px solid #dfdfdf;
        margin-top: 10px
    }

    .news-detail-zone .detail-contens-head {
        padding: 20px 0;
        position: relative
    }

    .news-detail-zone .detail-contens-head-title {
        text-align: center;
        font-size: 1.1rem;
        font-weight: 600;
    }

    .news-detail-zone .detail-contens-head-date {
        position: absolute;
        /*        bottom: 16px;*/
        bottom: 0;
        right: 10px
    }

    .news-detail-zone .detail-contens-data {
        padding: 30px 20px 20px;
        font-size: .9rem
    }

.paper-zone {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 10px;
    /*    margin-top:10px*/
}

    .paper-zone .paper-content {
        margin-top: 10px
    }

    .paper-zone .paper-content-box {
        display: flex;
        padding: 10px
    }

    .paper-zone .paper-content-box-item {
        margin-right: 5px;
        border-radius: 5px;
        overflow: hidden;
        width: 33%
    }

        .paper-zone .paper-content-box-item:last-child {
            margin-right: 0
        }

        .paper-zone .paper-content-box-item img {
            width: 100%;
            vertical-align: bottom
        }

    .paper-zone .paper-more {
        margin-top: 5px;
        text-align: center;
        padding: 14px 0;
    }

        .paper-zone .paper-more button {
            background-color: #0F3446;
            color: #fff;
            padding: 10px 24px;
            font-size: 1rem;
            border-radius: 30px;
            width: 90%;
        }


.swipe {
    overflow: hidden;
}

    .swipe .swipe-container {
        position: relative;
        display: flex;
        align-items: start;
        top: 0;
        left: 0;
    }

    .swipe .swipe-animation {
        transition-property: left;
        transition-duration: 1s;
        transition-delay: 1s;
        transition-timing-function: ease-out;
    }

    .swipe .swipe-noanimation {
        transition-property: none !important;
    }

    .swipe .swipe-container img {
        width: 100%;
        vertical-align: bottom
    }

.pastor-series-10 {
    margin-top: 10px
}

    .pastor-series-10 .series-10-container {
        overflow-x: auto
    }

    .pastor-series-10 .series-10-container-contents {
        display: flex;
        width: 5000px
    }

    .pastor-series-10 .series-10-container-contents-item {
        margin: 0 5px;
        border-radius: 5px;
        overflow: hidden;
        display: inline-block
    }

        .pastor-series-10 .series-10-container-contents-item:first-child {
            margin-left: 0;
        }

        .pastor-series-10 .series-10-container-contents-item:last-child {
            margin-right: 0;
        }

        .pastor-series-10 .series-10-container-contents-item img {
            width: 100%;
            vertical-align: bottom
        }

.kakao-big {
    text-align: center;
    background: #FFEB00;
    width: 100%;
    border: 1px solid #E1E1E1;
    border-radius: 6px;
    padding: 3px 0;
}

    .kakao-big img {
        width: 38px;
        vertical-align: bottom;
    }

    .kakao-big span {
        font-weight: 600;
        color: #1E1E1E;
        font-size: 1.3rem;
        vertical-align: 25%;
        margin-left: 20px;
    }

.kakako-small {
    text-align: center;
    background: #FFEB00;
    width: 100%;
    border: 1px solid #E1E1E1;
    border-radius: 6px;
    padding: 3px 3px;
}

    .kakako-small img {
        width: 24px;
        vertical-align: bottom;
    }

    .kakako-small span {
        font-weight: 600;
        color: #1E1E1E;
        font-size: .95rem;
        vertical-align: 15%;
    }

.tab {
    background-color: #fff;
    text-align: center
}

    .tab .tab-container {
        /*display: flex;*/
        padding: 2px 0;
        display: inline-block;
        /*justify-self:center*/
    }

        .tab .tab-container button {
            padding: 5px 10px;
            font-size: .9rem;
        }

        .tab .tab-container .on {
            background-color: #065fd4;
            color: #fff;
            border-radius: 20px;
        }

.search-zone {
    padding: 10px 10px 0 10px
}

    .search-zone .search-container {
        border: 1px solid #0F3446;
        border-radius: 5px
    }

    .search-zone .search-container-focus {
        border: 2px solid #0F3446;
    }

    .search-zone .search-container-row {
        display: flex;
        flex-direction: row
    }

    .search-zone .search-container-row-cell1 {
        display: flex;
        flex-direction: column;
        flex-grow: 1;
        align-self: center;
        padding: 0 4px;
    }

        .search-zone .search-container-row-cell1 input {
            border: none;
            font-size: 1rem;
            max-width: 100%;
            width: 100%;
        }

    .search-zone .search-container-row-cell2 {
        display: flex;
        flex-direction: column;
        align-self: center;
        flex-direction: row
    }

        .search-zone .search-container-row-cell2 button {
            padding: 8px 12px
        }

        .search-zone .search-container-row-cell2 img {
            width: 18px;
            vertical-align: bottom
        }

.list-zone {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 10px;
    /*    margin-top: 10px;*/
}

.sermon-detail-zone {
    background-color: #fff;
    /*    margin-top:10px*/
}

    .sermon-detail-zone .detail-info {
        padding: 10px;
        line-height: 2rem;
        text-align: center
    }

    .sermon-detail-zone .detail-info-series {
        font-size: 1.2rem;
        color: #307AC5
    }

    .sermon-detail-zone .detail-info-sermon {
        font-size: 1.2rem;
        font-weight: 600
    }

    .sermon-detail-zone .detail-func {
        padding: 10px 10px 20px 10px;
        margin-top: 10px;
        text-align: center
    }

        .sermon-detail-zone .detail-func button {
            background-color: #888888;
            padding: 3px 6px;
            border-radius: 10px;
            color: #fff;
        }

            .sermon-detail-zone .detail-func button div {
                display: flex;
                align-items: center
            }

                .sermon-detail-zone .detail-func button div img {
                    width: 24px;
                    vertical-align: bottom
                }

                .sermon-detail-zone .detail-func button div span {
                    margin-left: 4px
                }


.sermon-detail-bible-zone {
    /*    margin-top: 10px;*/
    background-color: #fff;
    padding-bottom: 20px
}

    .sermon-detail-bible-zone .detail-bible-title {
        text-align: center;
        position: relative;
        padding: 10px 0;
        background-color: #dfdfdf;
        color: #000;
        font-size: 1rem;
        font-weight: 500
    }

    .sermon-detail-bible-zone .detail-bible-content {
        padding: 10px;
        word-break: break-all;
        font-size: .9rem;
        line-height: 1.3rem;
    }


    .sermon-detail-bible-zone .detail-bible-content-title {
        font-size: .95rem;
        font-weight: 600
    }

.offering-qna {
}

    .offering-qna li {
        border-bottom: 1px solid #eee;
        margin-top: 20px
    }

        .offering-qna li:first-child {
            margin-top: 0
        }

        .offering-qna li .title {
            background-color: transparent;
            border: none;
            padding: 10px;
            font-size: 1rem;
            font-weight: 600;
            cursor: pointer;
            text-align: left;
        }

        .offering-qna li .content {
            padding: 10px 20px;
            margin: 10px;
            background-color: #fff
        }

.infomation-tbl {
    width: 100%;
    margin: 0;
    padding: 0;
    border-spacing: 0;
}

    .infomation-tbl th,
    .infomation-tbl td {
        padding: 5px 10px
    }

        .infomation-tbl td:nth-child(2n+2) {
            padding-left: 0;
        }

.menu {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
}

    .menu .menu-back {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #000;
        opacity: .7
    }

    .menu .menu-container {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(255,255,255,1)
    }

    .menu .menu-container-head {
        background-color: #898989;
        /*background: linear-gradient(90deg, rgba(62,46,217,1) 0%, rgba(79,51,211,1) 100%);*/
        color: #fff;
        padding: 10px;
    }

        .menu .menu-container-head a {
            color: #fff;
        }

        .menu .menu-container-head img {
            vertical-align: bottom;
            width: 44px;
        }

    .menu .menu-container .live {
        background-color: #cc3a3b !important;
    }

    .menu .menu-container-content {
        position: absolute;
        top: 90px;
        right: 0;
        left: 0;
        bottom: 0;
        overflow-y: auto;
    }

    .menu .menu-container-content-menus {
        font-size: 1rem;
        padding: 20px 30px
    }

        .menu .menu-container-content-menus button {
            width: 100%;
            text-align: left;
            font-size: 1rem;
        }

            .menu .menu-container-content-menus button:hover {
                color: #c83001;
            }

        .menu .menu-container-content-menus .title-eng {
            color: #676767
        }

    .menu .menu-container-content-sns {
        margin: 10px 0 20px 0;
    }

        .menu .menu-container-content-sns .sns-items {
            display: inline-block;
            padding: 14px;
            margin: 0 5px;
            border-radius: 50%;
            background-color: #EEEDED;
        }

            .menu .menu-container-content-sns .sns-items img {
                width: 18px;
                vertical-align: bottom
            }

.onair-main {
    padding: 8px 26px;
    border-radius: 25px;
    color: #fff;
    font-size: 1.2rem
}

.onair-on {
    background-color: #cc3a3b;
}

.onair-off {
    background-color: #898989;
}

.modal {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 999;
}

    .modal .modal-back {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: #000;
        opacity: .7
    }

    .modal .modal-head {
        position: relative;
        background-color: #fff;
        color: #000;
        font-size: 1.4rem;
        font-weight: 600;
        padding: 10px;
        height: 48px;
        /*        border-top: 1px solid #c83001*/
        border-top: 1px solid #EF8E3F
    }

    .modal .modal-body {
        position: absolute;
        top: 68px;
        right: 0;
        left: 0;
        bottom: 0;
        overflow-y: auto;
    }

.embed-container {
    position: relative;
    padding-bottom: 55%;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}

    .embed-container iframe,
    .embed-container object,
    .embed-container embed,
    .embed-container video {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

.meditation-banner {
    background-color: #E3E3E3;
    position: relative
}

    .meditation-banner:not([aria-same='1']) {
        background-color: #D7E2F4;
        position: relative
    }

    /*        .meditation-banner:nth-child(2n+1) {
            background-color: #D7E2F4;
            position: relative
        }*/
    .meditation-banner .m-title {
        text-align: left;
        font-size: 1.2rem;
        padding: 20px 0 20px 20px;
        font-weight: 600;
        color: #1B42A9;
    }

    .meditation-banner .m-content {
        display: flex;
        background-color: #fff;
        padding-top: 20px;
        height: 75px;
        margin-right: 1.5rem;
        margin-left: .1rem;
        border-top-right-radius: 30px;
    }

    .meditation-banner .m-content-subtitle {
        display: flex;
        margin-left: 20px;
        width: 80%
    }

    .meditation-banner .m-content-arrow {
        display: flex;
        position: relative;
        width: 20%
    }

    .meditation-banner .m-content-arrow-1 {
        position: absolute;
        bottom: 25px;
        left: -5px;
        width: 15px;
        height: 15px;
        border-top: 1px solid #1C41AB;
        border-right: 1px solid #1C41AB;
        transform: rotate(45deg)
    }

    .meditation-banner .m-content-arrow-2 {
        position: absolute;
        bottom: 25px;
        width: 15px;
        height: 15px;
        border-top: 1px solid #1C41AB;
        border-right: 1px solid #1C41AB;
        transform: rotate(45deg)
    }

.infomation-6-4 {
    margin-top: 10px;
    padding: 20px 10px 20px 10px;
    background-color: #fff
}

    .infomation-6-4 .infomation-6-4-tbl {
        width: 100%;
        margin: 0;
        padding: 0;
        border-spacing: 0;
    }

        .infomation-6-4 .infomation-6-4-tbl th {
        }

        .infomation-6-4 .infomation-6-4-tbl td {
        }

    .infomation-6-4 .infomation-6-4-container {
        display: flex;
        align-items: center;
        border: 1px solid #1c41ab;
        padding: 15px;
        border-radius: 15px;
        height: 40px;
    }

    .infomation-6-4 .infomation-6-4-container-img {
        width: 40%;
        text-align: center
    }

    .infomation-6-4 .infomation-6-4-container-text {
        width: 60%;
        color: #1c41ab;
        font-size: 1.2rem;
        font-weight: 500;
        text-align: center
    }

.place-container {
    background-color: #fff;
    margin-top: 10px;
}

    .place-container .place-title {
        padding: 10px;
        text-align: center;
        font-size: 1rem;
        font-weight: 600;
        box-shadow: 0 3px 6px -6px #777;
    }

    .place-container .place-content {
        padding: 10px
    }

        .place-container .place-content img {
            width: 100%
        }

.album-zone {
    background-color: #fff;
    padding-top: 20px;
    padding-bottom: 10px;
}

    .album-zone .album-content-box {
        padding: 10px
    }

        /*            .album-zone .album-content-box:hover {
                box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px
            }*/

        .album-zone .album-content-box .album-img {
            border-radius: 10px;
            overflow: hidden
        }

            .album-zone .album-content-box .album-img img {
                width: 100%;
                vertical-align: middle
            }

        .album-zone .album-content-box .album-text-box {
            margin-top: 10px;
            line-height: 1.3rem
        }

            .album-zone .album-content-box .album-text-box .album-category {
            }

            .album-zone .album-content-box .album-text-box .album-title {
                color: #d62b2b;
                font-size: 1rem;
                font-weight: 600
            }

            .album-zone .album-content-box .album-text-box .album-date {
            }

    .album-zone .album-more {
        margin-top: 5px;
        text-align: center;
        padding: 14px 0;
    }

        .album-zone .album-more button {
            background-color: #0F3446;
            color: #fff;
            padding: 10px 24px;
            font-size: 1rem;
            border-radius: 30px;
            width: 90%;
        }

.main-sermon-tab {
/*    position: absolute;
    top: -5px;
    left: 17%;*/
    font-size: 1rem;
    font-weight: 100;
}

    .main-sermon-tab ul li {
        display: inline-block
    }

        .main-sermon-tab ul li:nth-child(2n+2) {
            padding: 0 7px
        }

    .main-sermon-tab .sermon-tab-button {
        font-size: 1.2rem;
    }

        .main-sermon-tab .sermon-tab-button:hover {
            color: #193CB0;
        }

        .main-sermon-tab .sermon-tab-button[aria-selected="true"] {
            color: #193CB0;
            font-weight: 600;
/*            border-bottom: 1px solid #898989*/
        }