.mainContainer {
    width:1420px;
    margin:0 auto;
}
.flex-wrap { display:flex;}
.slider .move-btn {top: 50% !important;transform: translateY(-50%);padding: 0 5% !important; margin-top:0 !important;background-color:unset!important;}
#main {/*margin-top: 20px;*/}

#main2 {padding:30px 0 30px; align-items: center;background-color: #0B174B;}
#main2 .cont2 { width:100%;}
#main2 .cont2 ul { display:flex; justify-content: center;}
#main2 .cont2 ul li { position: relative; text-align: center; width: 14%;  }
#main2 .cont2 ul li a:hover {display:inline-block; transform:translateY(-10px); transition:all .5s;}
#main2 .cont2 ul li:after{ position:absolute; content:""; border-right:1px solid #E5E5E5; width:1px; height:60px; top:50%; transform:translateY(-50%); left:0;}
#main2 .cont2 ul li:first-child:after{border-right:unset;}
#main2 .cont2 ul li:last-child:before{/*position:absolute; content:""; border-right:1px solid #E5E5E5; width:1px; height:30px; top:50%; transform:translateY(-50%); right:0;*/}
#main2 .cont2 ul li img { display:block; margin:0 auto 15px;}
#main2 .cont2 ul li a { color: #fff; font-size: 18px; text-decoration: none; display: block; width: fit-content; margin: auto; cursor: pointer; }

#main3 {justify-content:space-between; align-items: stretch;margin: 60px auto;}
#main3 > a {display: block;color: #fff;}
#main3 > div {position:relative;}
#main3 > div:nth-of-type(2), #main3 > div:nth-of-type(3) {width: calc(-16px + 25%); }
#main3 > div img {/*width: 100%; height: 300px;*/}
#main3 .cont1 { position:relative; color:#fff;width: calc(-32px + 50%);}
#main3 .cont1 a {color: #fff;}
#main3 .cont1 > a > img {height: 100%;object-fit: cover;}
#main3 .cont1 img {/*width: 533px; aspect-ratio:1280/720; max-width:unset ;*/ }
#main3 .cont1 .more {position: absolute;right: 53px;bottom: 57px;}
#main3 .cont1:hover{ opacity:0.7; transition:all ease-in-out .15s;}
#main3 .cont1 .sermon-cont {position:absolute; top:0; left:0; height:100%; padding: 20px; box-sizing: border-box; /*width:65%;*/}
#main3 .cont1 .liveoff {width: 100%; padding: 30px;} 
#main3 .cont1 .sermon-cont h2 { margin-top:10px; margin-bottom:40px; width: 55%;float: right;font-size: 1.8rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
#main3 .cont1 .sermon-cont h3 {margin-top: 30px;width: 55%;float: right;font-size: 1.0rem;margin-bottom: 30px;}
#main3 .cont1 .sermon-cont h4 {word-break: keep-all;width: 55%;float: right;margin: 5px 0;}
#main3 .cont2 ul {display: flex; flex-direction: column;}
#main3 .cont2 ul li {}
#main3 .cont2 ul li a {word-break: keep-all; }
#main3 .cont2 ul li:nth-child(1) a { background-color:#070D59;}
#main3 .cont2 ul li:nth-child(2) a { background-color:#1F3C88;}
#main3 .cont2 ul li:nth-child(3) a { background-color:#5893D5;}
#main3 .cont2 ul li:nth-child(4) a { background-color:#91B4DE;}
#main3 .cont2 ul li:nth-child(5) a { background-color:#5472D4;}
#main3 .cont2 ul li:nth-child(1) a:before{box-shadow:unset; background: linear-gradient(225deg, white 45%, #070d59 50%, #3e448b 56%, #8b8fc7 80%);}
#main3 .cont2 ul li:nth-child(2) a:before{box-shadow:unset; background: linear-gradient(225deg, white 45%, #1f3c88 50%, #4f5f89 56%, #9cabd3 80%);}
#main3 .cont2 ul li:nth-child(3) a:before{box-shadow:unset; background: linear-gradient(225deg, white 45%, #5893d5 50%, #99bce3 56%, #a9c9ee 80%);}
#main3 .cont2 ul li:nth-child(4) a:before{box-shadow:unset; background: linear-gradient(225deg, white 45%, #91b4de 50%, #a4bfdf 56%, #c7ddf6 80%);}
#main3 .cont2 ul li:nth-child(5) a:before{box-shadow:unset; background: linear-gradient(225deg, white 45%, #566186 50%, #4e6bd6 56%, #8a9fe4 80%);}
#main3 .cont2 ul li a {width:100%; height:65px; /*margin-bottom:1px;*/ padding:20px; text-decoration:none; color:#fff; font-size:1.8rem;}
    #main3 .cont3 > img {
        width: 100%;
        height: auto;
        height: 100%;
        object-fit: cover;
    }
#main3 .cont3 .more { /*position: absolute;right: 0;bottom: 3px;transform: translateX(150%);*/ margin-top: 10px; }
#main3 .hover-wrap { position:relative; cursor:pointer;    height: 100%;}
#main3 .hover {position:absolute;top:0;left:0; width:100%; height:100%; background-color: rgba( 0, 0, 0, 0 );  color:#fff;}
#main3 .hover-wrap:hover .hover{ background-color: rgba( 0, 0, 0, 0.4 ); transition:all .25s;}
#main3 .hover .text-box{ position:absolute; top:50%; transform:translateY(-50%); width:100%; text-align:center; padding:0 10px;}
    #main3 .hover .text-box h3 {
        font-weight: bold;
        font-size: 30px;
        margin-bottom: 20px;
        max-width: 90%;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: auto;
        margin-bottom: 40px;
    }
    #main3 .hover .text-box h5 {
        font-size: 20px;
        font-weight: 400;
        font-family: Noto Sans KR;
        line-height: 1.4;
        width: fit-content;
        margin: auto;
        position: relative;
        max-width: 80%;
        /*white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;*/
        margin: auto;
    }
    #main3 .hover .text-box .enterBtn {
        display: block;
        text-decoration: none;
        color: #fff;
        font-size: 20px;
        padding: 5px 30px;
        border: 1px solid #fff;
        border-radius: 25px;
        margin-top: 30px;
        width: 150px;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
#main3 .hover .text-box .enterBtn:hover{ background-color:#fff; color:#000; transition:all .35s;}

#main3-5 {
    display: flex;
    justify-content: space-between;
}
    #main3-5 .news-wrap h3 {
        font-size: 28px;
        font-weight: bold;
    }
#main3-5 .news-wrap > div {position: relative;}
    #main3-5 .news-wrap > hr {
        border-top: 1px solid #1268A3;
        margin: 15px 0;
    }
    #main3-5 .news-wrap > div .more {
        position: absolute;
        right: 0;
        top: 0;
    }
#main3-5 > div {width:31%;}
#main3-5 > div:first-of-type > a {display:block;width:fit-content;height:100%;}
#main3-5 .hover-wrap { position:relative; cursor:pointer;width: fit-content;height:100%;}
    #main3-5 .hover-wrap > img:first-of-type {
        height: 100%;
        object-fit: cover;
    }
#main3-5 .hover-wrap .youtube-logo {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);}
#main3-5 .hover {position:absolute;top:0;left:0; width:100%; height:100%; background-color:#000000bd; opacity:0; color:#fff;}
#main3-5 .hover-wrap:hover .hover{ opacity:1; transition:all .25s;}
#main3-5 .hover .text-box{ position:absolute; top:50%; transform:translateY(-50%); width:100%; text-align:center; padding:0 10px;}
#main3-5 .hover .text-box h3 { font-weight:bold; font-size:26px; margin-bottom:20px;}
#main3-5 .hover .text-box h5 { font-size: 16px; font-weight: 400; font-family: Noto Sans KR; line-height: 1.4; }
#main3-5 .hover .text-box .enterBtn {display: block;text-decoration: none;color: #fff;font-size: 20px;padding: 5px 30px;
    border: 1px solid #fff;border-radius: 25px;margin-top: 30px;width: 150px;position: relative;left: 50%;transform: translateX(-50%);}
#main3-5 .hover .text-box .enterBtn:hover{ background-color:#fff; color:#000; transition:all .35s;}
    #main3-5 .news-wrap .content-wrap {
        display: flex;
        justify-content: space-between;
        padding: 5px 0;
        border-bottom: #EBE9EA 1px solid;
        color: #5D5D5D;
    }
        #main3-5 .news-wrap .content-wrap > div:first-of-type {
            width: 60%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
        #main3-5 .news-wrap .content-wrap > div:last-of-type {
            width: 40%;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            text-align:right;
        }

#main4 { margin:50px auto;position:relative;}
#main4 .title {font-weight:bold; font-size:26px; margin:20px 0; display:flex; width:100%; justify-content:space-between;}
#main4 .title span a { text-decoration:none; color:#000; margin-right: 20px; font-size:24px; font-weight:normal;}
#main4 .img-wrap { width: 100%;overflow: hidden; display: inline-flex; justify-content: center; align-items: center; height: 0; padding-top: calc(200 / 331* 100%); position: relative; }
#main4 .img-wrap img { object-fit: cover; position: absolute; height: 100%; width: 100%; top: 50%; left: 50%; transform: translate(-50%, -50%); }
#main4 a { color: #888888; text-decoration: none;}
#main4 h4 { margin:20px 0 10px; font-size:16px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;color:#000;    max-width: 85%;}  
#main4 h5 { margin:0; font-size:16px; width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;color: #5d5d5d;font-size: 15.5px;}  
#main4 .swiper-bottom{margin-top:30px; position: absolute; display: flex; justify-content: center; top:0;right:0;}
    #main4 .swiper-button-prev {
        width: 33px;
        height: 33px;
        position: static;
        /*opacity: 1;*/
        color: #1A3163;
        border: unset;
        border-radius: unset;
        cursor: pointer;
        margin-right: 14px;
        background-image: url('../Images/8.left_bt.png');
        background-repeat: no-repeat;
        background-size: cover;
    }
    #main4 .swiper-button-next {
        width: 33px;
        height: 33px;
        position: static;
        /*opacity: 1;*/
        color: #1A3163;
        border: unset;
        border-radius: unset;
        cursor: pointer;
        background-image: url('../Images/8.right_bt.png');
        background-repeat: no-repeat;
        background-size: cover;
    }
    #main4 .swiper-button-prev:hover {
        background-image: url('../Images/8.left_bt_hover.png');
        background-repeat: no-repeat;
    }
    #main4 .swiper-button-next:hover {
        background-image: url('../Images/8.right_bt_hover.png');
        background-repeat: no-repeat;
    }
    /*#main4 .swiper-button-prev {
        width: 40px;
        height: 40px;
        position: static;
        opacity: 1;
        color: #1A3062;
        border: #1A3062 2px solid;
        border-radius: 50%;
        cursor: pointer;
        margin-right: 14px;
    }*/
    #main4 .swiper-button-prev:after {
        font-size: 16px;
        font-weight: bold;
        display: none;
    }
    /*#main4 .swiper-button-next {
        width: 40px;
        height: 40px;
        position: static;
        opacity: 1;
        color: #1A3062;
        border: #1A3062 2px solid;
        border-radius: 50%;
        cursor: pointer;
    }*/
#main4 .swiper-button-next:after{ font-size:16px;font-weight:bold;display:none;}
/*#main4 .swiper-pagination{ position:static; transform:translateY(-50%); margin:0 20px;}*/
/*#main4 .swiper-pagination .swiper-pagination-bullet{margin:0 3px;}*/
/*.swiper-bottom > div:hover {background-color:#1A3062;color:#fff;}*/
/*.swiper-bottom > div:hover:after {background-color:#1A3062;color:#fff;}*/
    #main4 .more1 {
        position: absolute;
        right: 0;
        bottom: 15px;
    }
    #main4 .more2 {
        position: absolute;
        right: 0;
        bottom: 10px;
    }

#main5 { margin :80px auto; justify-content: space-between; }
#main5 .commonBox{cursor:pointer; position:relative; overflow:hidden; text-align:center;  width:230px; height:190px; display: inline-flex; align-items: center; justify-content: center;}
#main5 .commonBox img { display:block; margin:0 auto 15px;}
#main5 .commonBox:hover { transform: scale(1); }
#main5 .commonBox:after {
        content: '';
        position: absolute;
        top: calc(50% - 115px);
        left: -50px;
        width: 20px;
        height: 230px;
        background: white;
        -webkit-transform: rotate( 30deg );
        transform: rotate( 30deg );
        opacity: 0;
        -webkit-transition: all 1000ms cubic-bezier(0.23, 1, 0.32, 1);
        transition: all 1000ms cubic-bezier(0.23, 1, 0.32, 1);
}
#main5 .commonBox:hover:after { left: calc(80% + 120px);  opacity: .5; }
#main5 .commonBox a { color: #fff; text-decoration: none; font-size: 20px; width: 100%; padding: 35px 0;}
#main5 .commonBox:nth-of-type(2){ background-color:#C64856; }
#main5 .commonBox:nth-of-type(3){ background-color:#E6B856; }
#main5 .commonBox:nth-of-type(4){ background-color:#89B26C; }
#main5 .commonBox:nth-of-type(5){ background-color:#194E48; }



/*responsive*/
@media (max-width: 1499px) {
    #main {margin-top: 0;}
    .mainContainer {width: 90%;}

    #main2 {/*padding: 30px 30px 50px;*/}

    #main3 > div {margin-right: 5px;}
    #main3 > div:last-child {margin-right: 0;}
    #main3 .cont2 ul li a {white-space: nowrap;  /*line-height: 3.1;*/ font-size: 1.6rem; margin-bottom: 0;}
    #main3 .hover .text-box h5 {font-size: 16px; word-break: keep-all;}
    #main3 .cont1 .sermon-cont h3 {
        margin-top: 10px;
        margin-bottom: 20px;
    }
    #main3 .cont3 .more{bottom:0;}
    #main3 .cont1 .sermon-cont h2 {
        margin-top: 10px;
        margin-bottom: 20px;
    }

    #main4, #main5 {padding: 0 30px;overflow:hidden;}
    #main4 .img-wrap {width: 100%; height: 100%;}
    #main5 div:first-child img {height: 100%;}
    #main5 div {margin-right: 5px;}
    #main5 div:last-child {margin-right: 0;}

}



@media (max-width: 1199px) {
    #main2 {padding: 25px 0 25px;}
    #main3 .cont1 {width: 50%;} 
    #main3 .cont2 ul li a {width: 100%; /*line-height: 2.6;*/}
    /* #main3 .cont1 .sermon-cont h4:nth-of-type(1) {margin-top: 30px;} */
    #main3 .cont1 .sermon-cont h3,
    #main3 .cont1 .sermon-cont h2, 
    #main3 .hover .text-box .enterBtn {/*font-size: 1.8rem;*/}

	#main5 {padding: 0;}
    #main5 .commonBox {height: 155px;}
}

@media (max-width: 992px) {
    #main3 .cont1 .liveoff {padding:10px;}
    #main3 .cont1 .sermon-cont h2 {font-size:1.3rem;}
    #main3 .cont1 .sermon-cont h3 {
        font-size: 0.8rem;
    }
    #main3 .cont1 .sermon-cont h4 {
        font-size:0.9rem;
    }
    #main3 .cont1 .more {
        position: absolute;
        right: 15px;
        bottom: 20px;
    }
    #main3 .hover .text-box h3{font-size:20px;}
    #main3 .cont3 .more {display:none;}
    #main3 .hover .text-box h5 {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #main4 .title {font-size:20px;}
    /*#main2  {flex-wrap: wrap;}
    #main2 .cont1 {width: 100%;}
    #main2 .cont2 {width: 100%; padding-top: 30px;}*/

    /*#main3 > div {width: 100%;}
    #main3 > div img {height: auto;}
    #main3 .cont1 .sermon-cont h4:nth-of-type(1) {font-size: 2em;}
    #main3 .cont1 .sermon-cont h3:nth-of-type(2) {font-size: 4em;}
    #main3 .cont1 .sermon-cont h3:nth-of-type(1),
    #main3 .cont1 .sermon-cont h5,
    #main3 .cont1 .sermon-cont h4:nth-of-type(2) { font-size: 1.8em;}
	#main3 .cont1 {width: 100%;}
	#main3 .cont1 img {width: 100%; height:100%; }
    #main3 {flex-direction: column; justify-content: unset; display: unset;}
	#main3 .cont1 .sermon-cont h4:nth-of-type(1) {font-size: 22px;}
    #main3 > div {margin-right: 0;}
    #main3 img {width: 100%;}
    #main3 .cont2 {text-align: center; overflow: hidden;}
    #main3 .cont2 ul li a {width: 100%; margin-bottom: unset;  height: auto; padding: 1em; font-size: 1.4em;}
    #main3 .hover-wrap {width: 33.3%; float: left; margin-bottom: 30px;}*/

	/*#main4 h4 {font-size: 14px; margin: 10px 0 0;}
	#main4 .swiper-bottom {margin-top: 50px;}*/

    /*#main5 { flex-wrap: wrap; justify-content: center;}
    #main5 > div:first-child {width: 100%; margin: 0 auto 20px; text-align: center;}
    #main5 .commonBox { width: 175px; margin: 2px;}*/

} 
  
@media (max-width: 767px) {
    .slider .move-btn {    padding: 0 1% !important;}

    #main2 {
        padding: 15px 0;
    }
    #main2 .cont1 {text-align: center;}
    #main2 .cont1 hr {margin: 0 auto;}
    #main2 .cont2 ul {flex-wrap: wrap; }
        #main2 .cont2 ul li {
            width: 31.3%;
            margin: 8px 0;
        }
        #main2 .cont2 ul li img {
            margin: 0 auto 10px;
            width: 35px;
        }
    #main2 .cont2 ul li a {word-break: keep-all;    font-size: 14px;}
	#main2 .cont2 ul li:after, #main2 .cont2 ul li:last-child:before { content:unset;}

    #main3 {
        margin: 4% auto;
        flex-wrap: wrap;
    }
    #main3 > div {margin-right:4%;}
    #main3 .cont1 { width: 100%; margin: 0 0 4%; }
    #main3 > div:nth-of-type(2), #main3 > div:nth-of-type(3) {width:48%;}
    #main3 .cont1 .sermon-cont h4:nth-of-type(1) {font-size: 1.1em;}
    #main3 .cont1 .sermon-cont h3:nth-of-type(2) {font-size: 2.6em;}
    #main3 .cont1 .sermon-cont h3:nth-of-type(1),
    #main3 .cont1 .sermon-cont h5,
    #main3 .cont1 .sermon-cont h4:nth-of-type(2) { font-size: 1.0em;}
	#main3 img {height: auto;}
	#main3 .cont2 ul li { flex: auto;}
	#main3 .hover {/*display:none;*/}
    #main3 .hover .text-box .enterBtn {display: block; width: 200px; text-align: center; position: relative; left: 50%; transform: translateX(-50%);}
    #main3 .hover .text-box h5 {font-size: 14px!important;}


    #main3-5 {flex-wrap:wrap;}
    #main3-5 > div {width:100%;}
    #main3-5 > div.news-wrap {width:47%;}
    #main3-5 .news-wrap h3 {font-size:21px;}
    #main3-5 .hover .text-box h3 { font-size: 20px; }
    #main3-5 .hover .text-box .enterBtn {display:none;}
    #main3-5 .news-wrap .content-wrap > div:first-of-type {width:100%;}
    #main3-5 .news-wrap .content-wrap > div:last-of-type {display:none;}
    #main3-5 > div:first-of-type > a, #main3-5 .hover-wrap, #main3-5 .hover-wrap > img:first-of-type { width: 100%; }
    

    #main4 { padding: 0 10px; margin: 0px auto 20px; }
    #main4 h4 {font-size:13px;}
	#main4 .img-wrap { max-height: 190px; min-height:100px;}
	#main4 .img-wrap img { max-height:100px;}
    #main4 .title {font-size:18px;}
	#main4 .swiper-bottom {margin-top: 50px;}
    #main4 h5 {font-size:12px;}

    #main5 { text-align: center; margin: 50px auto;}
    #main5 .commonBox {width: 50%; margin:0;}
    #main5 div:first-child img {width: 100%;}
    #main4 .swiper-button-prev, #main4 .swiper-button-next {
        width: 22px;
        height: 22px;
    }

}
 
@media (max-width: 414px) {
    #main4 h4 {width:100%;max-width:100%;}
    #main4 .more1 { display: none; }
}