﻿/*메인*/
#dimodePage{display: block!important;}
.main-section1, .main-section2, .main-section3, .main-section4, .main-section5, .main-section6{overflow:hidden;}
/*section1*/
/*section2*/
.section2-1 {
    padding: 60px 0px;
}
.section2-1-title{font-weight:bold;font-size:25px;margin-bottom:15px;text-shadow: 0px 1px 1px #000;}
.section2-1-content{margin-bottom:5px!important;font-size:25px;}

/*section2*/
.section2-2 {background:url(/UserData/pcltvhp/Layouts/pcltvhp_Layout/Images/main/worship_bg01.jpg);padding:100px 0px 150px;background-size:cover; background-position:50% 50%; background-repeat:no-repeat;}
.section2-2-wrap{color:white;}
.section2-2-wrap .section2-2-left{text-align: center;}
 .section2-2-wrap .section2-2-left .col-sm-3 a{display:inline-block; border-radius:120px; text-decoration:none; color:white;}
.section2-2-wrap .section2-2-right{text-align:center;}
.section2-2-wrap .section2-2-right a{display:inline-block; border-radius:120px; text-decoration:none; color:white;}
.section2-2-title{font-size:25px; margin:30px 0px; font-weight:bold;}
.section2-2-circle {width: 140px;height: 140px;position: relative;display: inline-block;border: 6px solid #fff;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.section2-2-circle p{font-size: 20px;position: absolute;left: 50%; top: 50%; transform: translateX(-50%) translateY(-50%);}
.section2-2-circle img{position: absolute;left: 50%; top: 45%; transform: translateX(-50%) translateY(-50%);}

/*section3*/
.section3-1,.section3-2{background:#FBFBFB;}
.section3-1{padding:50px 0px 0px;}
.section3-1-wrap{padding-bottom:30px; border-bottom:2px solid #EFEFEF;}
.section3-1 .week-bible{font-size:35px; font-weight:bold;}
.section3-1 .week-date{font-size:20px; font-weight:bold;}
.section3-1 .week-content .title{font-size:25px; font-weight:bold;}
.section3-1 .week-content .bible{font-size:20px; }
.section3-2{padding:50px 0px 50px; word-break:keep-all;}
.section3-2-right{padding-left: 20px;padding-right: 0px;}
.section3-2-title{color:#D29065; font-size:18px; font-weight:bold;}
.section3-2-content{ font-size:20px;}
.section3-2 .map-veiw-btn{border: 3px solid #000;color:#FC5D33; font-size:18px; text-decoration:none; padding:15px 30px; background:black;display: inline-block; transition:0.3s all;}

/*section4*/
.main-section4-wrap {word-break:keep-all;padding: 100px 0px 100px;display: inline-block; width: 100%; }
.section4-1-wrap{margin-bottom:30px;}
.section4-2-wrap{margin-bottom:30px;}
.section4-2-title{font-size:30px; }
.together-box{border-right: 1px solid #fff; padding:0px;}
.together-box:last-child{border-right:0px;}
.together-box a{font-size:25px; width:100%; height:100%;    padding: 90px 0px;display:inline-block; color:white; text-decoration:none;}
.together-box a p{font-size: 30px;position: absolute;left: 50%;top: 50%;transform: translateX(-50%) translateY(-50%);}
.section4-3-circle { font-wieght:bold;width: 200px;height: 200px;position: relative;display: inline-block;border: 6px solid #fff;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.section4-3-circle p{font-wieght:bold;} 
.section4-3-box1{background:url(/UserData/pcltvhp/Layouts/pcltvhp_Layout/Images/main/together01_bg.jpg); background-repeat:no-repeat; background-size:100% 100%; background-position:center;}
.section4-3-box2{background:url(/UserData/pcltvhp/Layouts/pcltvhp_Layout/Images/main/together02_bg.jpg); background-repeat:no-repeat; background-size:100% 100%; background-position:center;}
.section4-3-box3{background:url(/UserData/pcltvhp/Layouts/pcltvhp_Layout/Images/main/together03_bg.jpg); background-repeat:no-repeat; background-size:100% 100%; background-position:center;}
.section4-3-box4{background:url(/UserData/pcltvhp/Layouts/pcltvhp_Layout/Images/main/together04_bg.jpg); background-repeat:no-repeat; background-size:100% 100%; background-position:center;}

/*section5*/
.uuchunchung {width: 259px;height: 267px;display: inline-block;background-size: 100%;background: url(/UserData/pcltvhp/Layouts/pcltvhp_Layout/Images/main/circle_off.png);
    background-repeat: no-repeat;background-size: 100% 100%!important; background-position: center;}
.section5-2{}
.section5-1-title{font-weight:bold;font-size:25px;margin-bottom:15px;text-shadow: 0px 1px 1px #000;}
.section5-1-content{font-size:25px;}
.uuchunchung-box{padding:90px 0px;}
.uuchunchung{position: relative;font-size:30px; color:black!important; text-decoration:none!important; border-radius: 0px 120px 120px 120px;}
.uu-text{position: absolute;top: 50%;transform: translateX(-50%) translateY(-50%);left: 50%;}

/*section6*/
/*이미지*/
.section6-1-left{ min-height: 450px;background:url(/UserData/pcltvhp/Layouts/pcltvhp_Layout/Images/main/img01.jpg); background-repeat:no-repeat;}
.section6-2-right{ min-height: 450px;background:url(/UserData/pcltvhp/Layouts/pcltvhp_Layout/Images/main/img02.jpg);background-repeat:no-repeat;}
.section6-3-left{ min-height: 450px;background:url(/UserData/pcltvhp/Layouts/pcltvhp_Layout/Images/main/img03.jpg);background-repeat:no-repeat;}
.section6-4-right{ min-height: 450px;background:url(/UserData/pcltvhp/Layouts/pcltvhp_Layout/Images/main/img04.jpg);background-repeat:no-repeat;}
/*텍스트*/
.main-section6-wrap{display:block; width:100%;padding-top:45px;background:#373d4a;}
.main-section6-wrap > .seciont6-line{background:white;}
.ham-wrap, .notice-wrap{padding-left:90px; width: 100%; position: absolute;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}
.office-wrap {padding-left:30px;padding-right:90px;}
.new-box-wrap {position: absolute; display:flex; top: 50%;transform: translateY(-50%);}
.thumb-nail{text-align:right;}
.office-wrap{right:0%;position: absolute;top: 50%;-webkit-transform: translateY(-50%);-ms-transform: translateY(-50%);transform: translateY(-50%);}
.section6-1-right, .section6-2-left, .section6-3-right, .section6-4-left {position:relative;min-height: 450px;}
.notice-text-title, .news-text-title, .ham-text-title, .office-text-title{font-size:25px;font-weight:bold; margin-bottom:20px;}
.news-text-subtitle, .ham-text-subtitle, .office-text-subtitle{font-size:20px;}
.notice-text-content, .news-text-content, .ham-text-content, .office-text-content{font-size:20px;}
.section6-more-btn {display:inline-block; position:relative; text-align: center; transition:0.3s all;border: 3px solid #000;color:#FC5D33; font-size:18px; text-decoration:none;  background:black;border: 3px solid #000;width: 180px;height: 60px;}
.section6-more-btn:hover{ text-decoration:none;color:#FC5D33; }
.section6-more-btn span{position: absolute;top: 50%;left: 50%;width: 100%;transform: translateX(-50%) translateY(-50%);}
.email-text, .tel-text {font-size:18px;}
.notice-text, .news-text, .ham-text, .office-text{margin-bottom:45px; word-break:keep-all;}
/*슬라이드 지우기*/
/*.slider .move-btn.prev-btn{background:rgba(0,0,0,0);}
.slider .move-btn.next-btn{background:rgba(0,0,0,0);}
.slider-dots{display:none;}*/
@media(min-width:1320px) {
    /*.container{width:1300px;}*/
}
@media(max-width:1199px) {
    .section4-3-circle{width:180px;height:180px;}
    .thumb-nail{display:none;}
}
@media(max-width:991px) {
    .uuchunchung{width: 249px; height: 257px;}

}
@media(max-width:767px) {
    /*모바일 플렉스*/
    .main-section6-wrap > .seciont6-line{display:flex;flex-direction:column;width: 100%;}
    .section6-1-left{order: 1;display: inline-block;width: 100%;}
    .section6-1-right{order: 2;display: inline-block;width: 100%;}
    .section6-2-left{order: 2;display: inline-block;width: 100%;}
    .section6-2-right{order: 1;display: inline-block;width: 100%;}
    .section6-3-left{order: 1;display: inline-block;width: 100%;}
    .section6-3-right{order: 2;display: inline-block;width: 100%;}
    .section6-4-left{order: 2;display: inline-block;width: 100%;}
    .section6-4-right{order: 1;display: inline-block;width: 100%;}

    /**/
    .section4-3-box1{margin-bottom:15px!important;}
    .section4-3-box2{margin-bottom:15px!important;}
    .section4-3-box3{margin-bottom:15px!important;}
    .section4-3-box4{margin-bottom:15px!important;}
    .ham-wrap, .notice-wrap{padding:0px!important;text-align:center;}
    .office-wrap{padding:0px!important;}
    .uuchunchung-box{padding:15px 0px;}
    .main-section1{display: flex;flex-direction: column;}
    .section2-1{padding-top:0px; word-break:keep-all;}
    .section2-2-title{margin:50px 0px 30px;}
    .section3-2-left,.section3-2-right{text-align:center;padding:30px 0px;}
    .notice-wrap{width:100%; left:0%; text-align:center;}
    .office-wrap{width:100%; right:0%; text-align:center;}
    .news-wrap{width:100%;right:0%; text-align:center;}
    .ham-wrap{width:100%;left:0%; text-align:center;}
}



/*맨 처음 흰 부분*/

.main1{ background: #fdeecf;     padding: 85px 0;}


.main1 h5{font-size: 22px;}
.main1 h2{font-size: 33px; margin: 50px 0; display: -webkit-box; word-break: keep-all;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; font-weight:bold;}

.main1 .mainContainer {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.main1-sermon-play {
    position: absolute;
    right: 35px;
    bottom: 35px;
}

.main1-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;aspect-ratio: 1230 / 385;
}

.main1-1 {
    background: url(../../../Layouts/kookil_Layout/Images/004_sermon_bg.png) no-repeat;
	background-position: center;
	    background-size: cover;
    height: 500px;
    /* max-width: 664px; */
    aspect-ratio: 664 / 385;
    text-align: center;
	position: relative;
}

.main1-1  a{color:white; text-decoration:none;
}

.main1-2 {
    max-width: 311px;
    aspect-ratio: 311 / 385;
    background: #f7b832;
    height: 385px;color: white;
    padding: 30px;
}

.main1-2 h5  {
        margin-bottom: 70px; 
}

.main1-2 ul li a  {
    color: white; display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;    
}

.main1-2 ul li    { 
    margin-bottom: 15px  ;
}

.main1-3 {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 385px;
}


.main1-3 >div {
    max-width: 198px;
    aspect-ratio: 198 /60;
    background: white;    height: calc(34% - 7px);    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.main1-bottom {
    aspect-ratio: 1230 / 166;
    width: 100%;
    padding: 40px 0 0;
}

  .main1-bottom >div{    display: flex;
    align-items: center;
    justify-content: space-between;}
.main1-photo   {
    width: 20%; position: relative;
}

.main1-photo a  {
    position: relative;
    display: block;
}


.main1-photo img {
        width: 100%;
    max-width: 246px;
    background-position: center;
    aspect-ratio: 246 / 166;
    background-size: cover;
    background-repeat: no-repeat;
}

.main1-photo p {
    position: absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    word-break: keep-all; opacity:0;
text-align:center;
display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.main1-photo a:hover p {
   opacity:1; transition: all .3s linear;
}
.main1-photo a:hover img{
        filter: brightness(0.5);transition: all .3s linear;
}


.main1-sermon {
    padding: 30px;
    text-align: left;
    color: white;
    width: 80%;
    word-break: keep-all;
}

.main1-3  h4 { font-size: 16px; font-weight: bold; padding-top: 5px; margin: 0;}
.main1-3-top h4:nth-of-type(1){letter-spacing: 8px;  /* padding : 0px 0 15px 6px;   */ }

.main1-3 > div a{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
	text-decoration:none;
}

/* =========================================================
   국일교회 메인 모바일 반응형
   ========================================================= */
@media (max-width: 767px) {

    /* =========================
       공통
       ========================= */
    html,
    body {
        width: 100%;
        overflow-x: hidden;
    }

    #dimodePage,
    .page-content,
    #main {
        width: 100%;
        max-width: 100%;
    }

    .container {
        width: 100%;
        padding-left: 20px;
        padding-right: 20px;
    }


    /* =========================
       1. 메인 슬라이더
       ========================= */
    #main .dimode-slider {
        width: 100%;
        overflow: hidden;
    }

    #main .dimode-slider .slide {
        overflow: hidden;
    }

    #main .dimode-slider .each-img {
        margin: 0;
        width: 100%;
        overflow: hidden;
    }

    #main .dimode-slider .each-img img {
        display: block;
        width: 100%;
        height: auto;
    }

    #main .dimode-slider .move-btn {
        width: 25px;
        height: auto;
    }


    /* =========================
       2. WELCOME
       ========================= */
    .welcome {
        padding: 55px 0 45px;
    }

    .welcome .container {
        display: block;
    }

    .welcome-left,
    .welcome-right {
        float: none;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
    }

    .welcome-left {
        margin-bottom: 35px;
        text-align: center;
    }

    .welcome-left h3 {
        margin: 0 0 15px;
        font-size: 34px;
        line-height: 1.2;
    }

    .welcome-left p {
        margin: 0;
        font-size: 15px;
        line-height: 1.8;
    }

    /*
        메뉴 5개
        모바일에서는 3 + 2 형태
    */
    .welcome-right {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .welcome-right > a {
        display: block;
        width: 20%;
        text-decoration: none;
    }

    .welcome-menu {
        width: 100%;
        height: auto;
        min-height: 115px;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .welcome-menu img {
        display: block;
        width: 48px;
        max-width: 48px;
        height: auto;
        margin: 0 auto 10px;
    }

    .welcome-menu p {
        margin: 0;
        font-size: 13px;
        line-height: 1.4;
    }

    .welcome-menu .visible-xs {
        display: none !important;
    }


    /* =========================
       3. 주일예배
       ========================= */
    .sermon-bottom {
        padding-left: 20px;
        padding-right: 20px;
    }

    .main1-1,
    .main1-sermon {
        width: 100%;
    }

    .sermon-card {
        position: relative;
        width: 100%;
        min-height: 130px;
        display: flex;
        align-items: center;
        padding: 20px;
        box-sizing: border-box;
    }

    .sermon-date-box {
        flex: 0 0 65px;
        width: 65px;
        margin-right: 15px;
    }

    .date-day {
        display: block;
        font-size: 34px;
        line-height: 1;
    }

    .date-full {
        display: block;
        margin-top: 7px;
        font-size: 12px;
    }

    .sermon-title-box {
        flex: 1;
        min-width: 0;
        padding-right: 45px;
    }

    .sermon-title-box h2 {
        margin: 0;
        font-size: 18px;
        line-height: 1.5;
        word-break: keep-all;
    }

    .main1-sermon-play {
        position: absolute;
        top: 50%;
        right: 18px;
        transform: translateY(-50%);
    }

    .main1-sermon-play img {
        width: 35px;
        height: auto;
    }


    /* =========================
       4. 자유게시판
       ========================= */
    .today_sermon {
        width: 100%;
        margin-top: 20px;
    }

    .today_sermon > a {
        display: block;
        width: 100%;
    }

    .today_sermon .sb-3 {
        float: none;
        width: 100%;
        padding: 0;
    }

    .today_sermon .sb-3 > div {
        padding: 30px 25px;
        box-sizing: border-box;
    }

    .board-title-kor,
    .board-title-eng {
        font-size: 24px;
    }

    .today_sermon h2 {
        font-size: 17px;
        line-height: 1.5;
        word-break: keep-all;
    }

    .today_sermon p {
        font-size: 13px;
    }


    /* =========================
       5. 교육부교회
       ========================= */
    .mainContainer.school {
        width: 100%;
        padding: 60px 20px;
        box-sizing: border-box;
        text-align: center;
    }

    .school > h2 {
        margin-top: 0;
        font-size: 28px;
    }

    .school > p {
        margin-top: 10px;
        font-size: 14px;
        line-height: 1.6;
    }

    .school-icon {
        display: flex;
        flex-wrap: wrap;
        margin-top: 35px;
    }

    /*
       기존 col-xs-4 때문에 3개씩 나오므로
       모바일에서 2개씩 강제
    */
    .school-icon > a {
        float: none !important;
        width: 50% !important;
        padding: 20px 8px;
        box-sizing: border-box;
    }

    .school-icon > a img {
        width: 75px;
        max-width: 75px;
        height: auto;
    }

    .school-icon > a h3 {
        margin: 15px 0 0;
        font-size: 17px;
    }

    .school-icon > a p {
        display: none;
    }


    /* =========================
       6. GALLERY
       ========================= */
    .gallery {
        width: 100%;
        padding: 55px 0;
        overflow: hidden;
    }

    .gallery-right {
        width: 100%;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .gallery-right > h2 {
        margin: 0;
        font-size: 32px;
        text-align: center;
    }

    .gallery-right > h4 {
        margin: 7px 0 25px;
        font-size: 15px;
        text-align: center;
    }

    .main2Content {
        width: 100%;
        overflow: hidden;
    }

    .galleryList {
        width: 100%;
    }

    .galleryList-slide {
        box-sizing: border-box;
        padding: 0 5px;
    }

    .galleryList-slide a {
        display: block;
        width: 100%;
    }

    .galleryList-slide a img {
        display: block;
        width: 100%;
        height: 190px;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
    }

    .galleryList-slide > p {
        margin-top: 10px;
        font-size: 14px;
    }

    .gallery .slick-prev,
    .gallery .slick-next {
        width: 30px;
        height: auto;
        z-index: 10;
    }

    .swiper-pagination2 {
        justify-content: center;
        padding: 0;
        margin-top: 20px;
    }
}


/* =========================================================
   작은 모바일
   ========================================================= */
@media (max-width: 480px) {

    .container {
        padding-left: 15px;
        padding-right: 15px;
    }

    .welcome {
        padding: 45px 0 35px;
    }

    .welcome-left h3 {
        font-size: 29px;
    }

    .welcome-left p {
        font-size: 14px;
    }

    .welcome-right > a {
        width: 19.3333%;
    }

    .welcome-menu {
        min-height: 100px;
    }

    .welcome-menu img {
        width: 42px;
    }

    .welcome-menu p {
        font-size: 12px;
    }


    /* 주일예배 */
    .sermon-bottom {
        padding-left: 15px;
        padding-right: 15px;
    }

    .sermon-card {
        min-height: 115px;
        padding: 17px 15px;
    }

    .sermon-date-box {
        flex-basis: 55px;
        width: 55px;
        margin-right: 12px;
    }

    .date-day {
        font-size: 30px;
    }

    .sermon-title-box {
        padding-right: 35px;
    }

    .sermon-title-box h2 {
        font-size: 16px;
    }

    .main1-sermon-play {
        right: 12px;
    }

    .main1-sermon-play img {
        width: 30px;
    }


    /* 교육부 */
    .mainContainer.school {
        padding: 50px 15px;
    }

    .school-icon > a {
        width: 50% !important;
        padding: 18px 5px;
    }

    .school-icon > a img {
        width: 65px;
    }


    /* 갤러리 */
    .gallery {
        padding: 45px 0;
    }

    .gallery-right {
        padding: 0 15px;
    }

    .galleryList-slide a img {
        height: 160px;
    }
}

@media (max-width: 767px) {

    /* ==========================================
       설교 + 자유게시판 전체 부모
    ========================================== */
    .container.sermon-bottom {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 40px auto !important;
        padding: 0 15px !important;

        box-sizing: border-box !important;
        overflow: hidden !important;
    }


    /* ==========================================
       설교 / 게시판 각각 한 줄
    ========================================== */
    .sermon-bottom .main1-1,
    .sermon-bottom .today_sermon {
        display: block !important;
        float: none !important;

        position: relative !important;

        width: 100% !important;
        max-width: none !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        flex: none !important;
    }


    /* ==========================================
       주일예배
    ========================================== */
    .sermon-bottom .main1-sermon {
        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }


    .sermon-bottom .sermon-card {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 280px !important;
        min-height: 280px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;

        background-size: cover !important;
        background-position: center center !important;

        overflow: hidden !important;
    }


    /* 날짜 */
    .sermon-bottom .sermon-date-box {
        position: absolute !important;

        top: 25px !important;
        left: 25px !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .sermon-bottom .date-day {
        display: block !important;

        font-size: 36px !important;
        line-height: 1 !important;
    }

    .sermon-bottom .date-full {
        display: block !important;

        margin-top: 10px !important;

        font-size: 15px !important;
    }


    /* 설교 제목 */
    .sermon-bottom .sermon-title-box {
        position: absolute !important;

        left: 25px !important;
        right: 85px !important;
        bottom: 25px !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .sermon-bottom .sermon-title-box h2 {
        margin: 0 !important;
        padding: 0 !important;

        font-size: 28px !important;
        line-height: 1.25 !important;

        word-break: keep-all !important;
    }


    /* 플레이 버튼 */
    .sermon-bottom .main1-sermon-play {
        position: absolute !important;

        top: auto !important;
        right: 20px !important;
        bottom: 20px !important;

        width: 55px !important;
        height: 55px !important;

        margin: 0 !important;

        transform: none !important;
    }

    .sermon-bottom .main1-sermon-play img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;

        object-fit: contain !important;
    }


    /* ==========================================
       자유게시판
    ========================================== */
    .sermon-bottom .today_sermon {
        margin-top: 15px !important;
    }

    .sermon-bottom .today_sermon > a {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .sermon-bottom .today_sermon .sb-3 {
        display: block !important;
        float: none !important;

        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 240px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    .sermon-bottom .today_sermon .sb-3 > div {
        width: 100% !important;
        height: 100% !important;

        padding: 30px 25px !important;

        box-sizing: border-box !important;
    }


    /* 게시판 제목 */
    .sermon-bottom .board-title-kor,
    .sermon-bottom .board-title-eng {
        display: inline-block !important;

        margin: 0 !important;
        padding: 0 !important;

        font-size: 22px !important;
        line-height: 1.3 !important;
    }

    .sermon-bottom .today_sermon h2 {
        margin: 30px 0 0 !important;

        font-size: 19px !important;
        line-height: 1.4 !important;
    }

    .sermon-bottom .today_sermon h4 {
        display: none !important;
    }

    .sermon-bottom .today_sermon p {
        margin: 25px 0 0 !important;

        font-size: 14px !important;
    }
}

/* =========================================================
   태블릿 ~ 작은 PC 대응
   768px ~ 1400px
========================================================= */
@media (min-width: 768px) and (max-width: 1400px) {

    /* 전체 영역 */
    .container.sermon-bottom {
        width: 100% !important;
        max-width: 1200px !important;

        display: flex !important;
        align-items: stretch !important;

        margin-left: auto !important;
        margin-right: auto !important;

        padding-left: 30px !important;
        padding-right: 30px !important;

        box-sizing: border-box !important;
    }


    /* =========================
       왼쪽 설교
    ========================= */
    .sermon-bottom .main1-1 {
        float: none !important;

        width: 65% !important;
        flex: 0 0 65% !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    .sermon-bottom .main1-sermon {
        width: 100% !important;
        height: 420px !important;
    }

    .sermon-bottom .sermon-card {
        position: relative !important;

        display: block !important;

        width: 100% !important;
        height: 420px !important;
        min-height: 420px !important;

        box-sizing: border-box !important;

        background-size: cover !important;
        background-position: center center !important;

        overflow: hidden !important;
    }


    /* 날짜 */
    .sermon-bottom .sermon-date-box {
        position: absolute !important;

        top: 35px !important;
        left: 40px !important;

        width: auto !important;
        margin: 0 !important;
    }

    .sermon-bottom .date-day {
        font-size: 42px !important;
    }

    .sermon-bottom .date-full {
        font-size: 16px !important;
    }


    /* 설교 제목 */
    .sermon-bottom .sermon-title-box {
        position: absolute !important;

        left: 40px !important;
        right: 120px !important;
        bottom: 35px !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .sermon-bottom .sermon-title-box h2 {
        margin: 0 !important;

        font-size: 38px !important;
        line-height: 1.2 !important;

        white-space: normal !important;
    }


    /* 재생 버튼 */
    .sermon-bottom .main1-sermon-play {
        position: absolute !important;

        top: auto !important;
        right: 30px !important;
        bottom: 25px !important;

        width: 80px !important;
        height: 80px !important;

        transform: none !important;
    }

    .sermon-bottom .main1-sermon-play img {
        width: 100% !important;
        height: 100% !important;
    }


    /* =========================
       오른쪽 자유게시판
    ========================= */
    .sermon-bottom .today_sermon {
        float: none !important;

        width: 35% !important;
        flex: 0 0 35% !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    .sermon-bottom .today_sermon > a {
        display: block !important;

        width: 100% !important;
        height: 420px !important;
    }

    .sermon-bottom .today_sermon .sb-3 {
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 500px !important;

        margin: 0 !important;

        box-sizing: border-box !important;
    }

    .sermon-bottom .today_sermon .sb-3 > div {
        width: 100% !important;
        height: 100% !important;

        padding: 35px 30px !important;

        box-sizing: border-box !important;
    }


    /* 게시판 제목 */
    .sermon-bottom .board-title-kor,
    .sermon-bottom .board-title-eng {
        display: inline !important;

        margin: 0 !important;

        font-size: 24px !important;
        line-height: 1.3 !important;

        white-space: normal !important;
    }

    .sermon-bottom .today_sermon h2 {
        margin-top: 40px !important;

        font-size: 20px !important;
        line-height: 1.4 !important;

        white-space: normal !important;
        word-break: keep-all !important;
    }

    .sermon-bottom .today_sermon p {
        margin-top: 30px !important;
        font-size: 14px !important;
    }
}
@media (min-width: 768px) and (max-width: 1000px) {

    .container.sermon-bottom {
        display: flex !important;
        flex-direction: column !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        padding: 0 20px !important;
        margin: 40px auto !important;

        box-sizing: border-box !important;

        /* 중요 */
        overflow: visible !important;
    }


    .sermon-bottom .main1-1 {
        display: block !important;
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        flex: none !important;

        margin: 0 !important;
        padding: 0 !important;

        position: relative !important;
    }


    .sermon-bottom .main1-sermon {
        display: block !important;

        width: 100% !important;
        height: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        position: relative !important;
    }


    /* 설교 카드 */
   @media (min-width: 768px) and (max-width: 1000px) {

    .sermon-bottom .sermon-card {
        position: relative !important;
        display: block !important;

        width: 100% !important;

        /* 원본 이미지 비율에 가깝게 */
        aspect-ratio: 1.92 / 1 !important;

        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;

        /* 핵심 */
        background-size: 100% 100% !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;

        overflow: hidden !important;
    }
}


    /* 날짜 */
    .sermon-bottom .sermon-date-box {
        position: absolute !important;

        top: 8% !important;
        left: 7% !important;

        width: auto !important;
        height: auto !important;

        margin: 0 !important;
    }

    .sermon-bottom .date-day {
        font-size: 40px !important;
        line-height: 1 !important;
    }

    .sermon-bottom .date-full {
        margin-top: 8px !important;
        font-size: 15px !important;
    }


    /* 설교 제목 */
    .sermon-bottom .sermon-title-box {
        position: absolute !important;

        left: 4% !important;
        right: 120px !important;
        bottom: 7% !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;
    }

    .sermon-bottom .sermon-title-box h2 {
        margin: 0 !important;

        font-size: 34px !important;
        line-height: 1.2 !important;

        white-space: normal !important;
        word-break: keep-all !important;
    }


    /* 플레이 버튼 */
    .sermon-bottom .main1-sermon-play {
        position: absolute !important;

        top: auto !important;
        right: 5% !important;
        bottom: 6% !important;

        width: 70px !important;
        height: 70px !important;

        margin: 0 !important;

        transform: none !important;
    }

    .sermon-bottom .main1-sermon-play img {
        display: block !important;

        width: 100% !important;
        height: 100% !important;
    }


    /* =====================================
       자유게시판
    ===================================== */

    .sermon-bottom .today_sermon {
        display: block !important;
        float: none !important;

        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;

        flex: none !important;

        margin: 15px 0 0 !important;
        padding: 0 !important;

        clear: both !important;
    }

    .sermon-bottom .today_sermon > a {
        display: block !important;

        width: 100% !important;
        height: auto !important;
    }

    .sermon-bottom .today_sermon .sb-3 {
        display: block !important;
        float: none !important;

        width: 100% !important;
        max-width: 100% !important;

        height: 260px !important;

        margin: 0 !important;
        padding: 0 !important;

        box-sizing: border-box !important;
    }

    .sermon-bottom .today_sermon .sb-3 > div {
        width: 100% !important;
        height: 100% !important;

        padding: 35px !important;

        box-sizing: border-box !important;
    }


    .sermon-bottom .board-title-kor,
    .sermon-bottom .board-title-eng {
        display: inline-block !important;

        margin: 0 !important;

        font-size: 24px !important;
        line-height: 1.3 !important;
    }

    .sermon-bottom .today_sermon h2 {
        margin: 30px 0 0 !important;

        font-size: 20px !important;
        line-height: 1.4 !important;
    }

    .sermon-bottom .today_sermon h4 {
        display: none !important;
    }

    .sermon-bottom .today_sermon p {
        margin: 25px 0 0 !important;

        font-size: 14px !important;
    }
}

@media (max-width: 767px) {

    /* 설교 전체 위치 초기화 */
    .sermon-bottom,
    .sermon-bottom .main1-1,
    .sermon-bottom .main1-sermon,
    .sermon-bottom .sermon-card {
        left: auto !important;
        right: auto !important;

        margin-left: 0 !important;
        margin-right: 0 !important;

        transform: none !important;

        box-sizing: border-box !important;
    }

    .sermon-bottom .main1-1,
    .sermon-bottom .main1-sermon {
        width: 100% !important;
        max-width: 100% !important;

        padding: 0 !important;

        overflow: visible !important;
    }

    /* 설교 카드 */
    .sermon-bottom .sermon-card {
        position: relative !important;

        width: 100% !important;
        max-width: 100% !important;

        height: auto !important;
        min-height: 0 !important;

        aspect-ratio: 1.35 / 1 !important;

        overflow: hidden !important;

        background-position: center center !important;
        background-size: cover !important;
        background-repeat: no-repeat !important;
    }


    /* 날짜 */
    .sermon-bottom .sermon-date-box {
        position: absolute !important;

        top: 25px !important;
        left: 25px !important;
        right: auto !important;

        margin: 0 !important;
        transform: none !important;
    }


    /* 제목 */
    .sermon-bottom .sermon-title-box {
        position: absolute !important;

        left: 25px !important;
        right: 90px !important;
        bottom: 25px !important;
        top: auto !important;

        width: auto !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

        overflow: visible !important;
    }

    .sermon-bottom .sermon-title-box h2 {
        position: static !important;

        display: block !important;

        width: 100% !important;

        margin: 0 !important;
        padding: 0 !important;
		 display: none !important;
        left: auto !important;
        right: auto !important;

        transform: none !important;
        text-indent: 0 !important;

        font-size: 27px !important;
        line-height: 1.2 !important;

        white-space: nowrap !important;
    }/* 플레이 버튼 */
    .sermon-bottom .main1-sermon-play {
        position: absolute !important;

        top: auto !important;
        left: auto !important;
        right: 18px !important;
        bottom: 18px !important;

        margin: 0 !important;

        transform: none !important;

        width: 55px !important;
        height: 55px !important;
    }
}

@media (max-width: 767px) {

    .sermon-bottom .sermon-card {
        position: relative !important;
    }

    .sermon-bottom .main1-sermon-play {
        position: absolute !important;

        /* 기존 위치값 전부 초기화 */
        left: auto !important;
        bottom: auto !important;

        /* 오른쪽 아래에서 조금 위 */
        right: 20px !important;
        top: calc(100% - 130px) !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;

        width: 55px !important;
        height: 55px !important;

        z-index: 20 !important;
    }

    .sermon-bottom .main1-sermon-play img {
        display: block !important;

        width: 55px !important;
        height: 55px !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important;
    }
}
