@keyframes aaa{
    from{left:-5px}to{left:5px;}
}
@keyframes bbb{
    from{top:-10px}to{top:-2px;}
}



a {
    color: black;
    text-decoration: none;
    transition: transform all .3s linear;
}
a:hover {
    color: black;
}


#main_video{position: relative;height: 58vw;}
#main_video .video-tag{position: relative;}
#main_video .video-tag .mainbackgroundvideo{position: fixed;
left: 0;right: 0;z-index: -9999;margin: auto;min-width: 75%;	
min-height: 38%;width: 100%;}






#main {
    width: 100%;
    height: 100%;
    /*background-color: red;*/
}

#section {
    /*font-family: 'Noto Sans KR', sans-serif;*/
    font-family: NanumSquare, sans-serif;
    width: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.mainContainer {
    width: 100%;
    margin: 0 auto;
    padding: 3% 15%;
    box-sizing: border-box;
    background-color:white;
    
}
/*슬라이더 부분*/

/*#main-slider .dimode-slider .manage-link {
    transform: translate(-98vw, 113px);
}*/
#main-slider .dimode-slider .slider-wrapper .slide > div {
    background-color: #3c3b3e;
    width: 40vw;
    height: 27vw;
    position: absolute;
    top: 19vw;
    transform:translateX(2vw);
    color: white;
    padding: 3%;
}


/*옆의 넘어가는 버튼 가림*/
#main-slider .dimode-slider .move-btn {
    background: rgba(0, 0, 0, 0.0);
    opacity:0;
}

/*콩으로 넘어가는 부분 수정*/
#main-slider .dimode-slider .slider-dots {
    /*position: absolute;*/
    bottom: 60px;
    right: 0;
    width: 180%;
}

#main-slider .dimode-slider .slider-dots .each-dot.active {
    width: 18px;
    border-radius: 7px;
    background: white;
    border: 1px solid #eee;
    
}
/*#main-slider .ms-pause,
#main-slider .ms-play {
    color: white;
    
    bottom: 60px;
    right: 0;
    width: 3%;
}
#main-slider .ms-pause:hover {
    cursor: pointer;
    
}
#main-slider .ms-play:hover{
    cursor:pointer;
}*/

/*이부분을 어떻게 해야할지 모르겠음 본문 입력할때마다 div로 글을 감싸야하게 해 두었습니다. 일단은... 
*/
#main-slider .dimode-slider .slider-wrapper .slide > div > h1 {
    font-size: 4.2vw;
    padding-top: 7%;
    letter-spacing: 3px;
    font-weight: bold;
    text-align: left;
    font-family: ui-sans-serif;
}
#main-slider .dimode-slider .slider-wrapper .slide .each-img {
    margin: 0;
    padding-left: 30%;
    padding-top: 114px;
    background-color:white;
}

#main-slider .dimode-slider .slider-wrapper .slide > div > .slider_2 {
	color:#fff;
	margin:2vw 0px;
}

#dimodePage .page-actions {
    background-color: white;
}


/*인트로*/
.intro{
    padding:7% 0;
    display:flex;
    flex-wrap:nowrap;
}
.intro-left {
    /*margin: 0 2%;*/
    width: 55%;
}
    .intro-right{
    margin: 0 0% ;
    width:35%;
    
}
.intro-text {
    margin: 0 10%;
    width:100%;
}
.intro-text h2 {
    font-size: 50px;
    font-weight: bold;
    margin-top: 0;
    margin-bottom: 60px;
}
.intro-text h2>span{
    font-size:23px;
    font-weight:300;
}
.intro-text p {
    font-size: 23px;
    line-height:1.8;
}

.intro-right .intro-icon {
    display: flex;
    flex-wrap: nowrap;
    justify-content:center;
    align-content:center;
    /*width:100%;*/
    padding :10% 0%;
}

.intro-right .intro-icon >a {
    width:25%;
    text-decoration:none;
    text-align:center;
    border-right:solid 1.5px #000;
}
.intro-right .intro-icon >a:hover >img/*,.intro-right .intro-icon >a:hover >p*/ {
    transform:translateY(-10px);
    transition:linear .4s;
}
.intro-right .intro-icon .intro04{
    border-right:none;
}

.intro-right .intro-icon >a>p {
    font-size: 15px;
    margin:5% 0;
    font-weight:bold;

}
.intro-right .newperson {
    width: 86%;
    margin: 0 7%;
}

.intro-right .newperson > a {
    display: flex;
    flex-wrap: nowrap;
    text-decoration: none;
    padding: 0 10px;
}
.intro-right .newperson >a >h4{
    width: 91%;
    font-weight: 500;
    font-size: 28px;
    margin-bottom: 0;
    
}
.intro-right .newperson>hr{
    height: 3px;
    border: none;
    background-color: black;
    margin: 8px 0;

}
.intro-right .newperson >a:hover >img{
    position:relative;
    animation:aaa 0.4s  infinite alternate;
    
}



/*불*/
.fire{
    padding:3% 0;
    display:flex;
    flex-wrap:nowrap;

}
.fire >div{
    padding:1px;
    width:100vw;
    /*max-width:635px;*/
    overflow:hidden;

}
    .fire > div > div {
        position: relative;
        color: white;
        text-align: center;
    }
    .fire > div > div> img {
        /*position: absolute;
        top: 0;*/
        width:100vw;

        opacity:1;
            object-fit: cover;
    }
    .fire > div > div > h2 {
        position: absolute;
        top: 37%;
        left: 0%;
        font-size: 60px;
        font-weight:bold;
        width:32.5vw;
        z-index:2;
    }

    
    
    .fire >div .ffirst >h4{
    position:absolute;
    top: 48%;
    left: 5%;
    width:30vw;
    font-size:30px;
    z-index:2;
}

/*.fire > div > div > div {
        position: absolute;
        top: 0;
        z-index:1;
        
}*/
/*.fire > div > div > div > img {
        position: absolute;
        top: 0;
        z-index:-1;
}*/


.fire > div > div > div {
        position: absolute;
        top: 0;
        left:0;
        background-color:rgba(0,0,0,0.5);
        width:100%;
        /*max-width:635px;*/
        padding:75% 14% 29%;
        margin:0;

}
    .fire .news > div > div {
        padding: 64% 10% 24%;
    }
    .fire .sermon > div > div {
        background-image: url(../../../Layouts/moohak_Layout/Images/sermon_hover.png);
        background-repeat: no-repeat;
        opacity: 1;
        width: 33.3vw;
        height: 100%;
        padding: 50% 8% 28% 43%;
        background-size: cover;
    }
.fire >div >div >div >a {
    color:white;
    text-decoration:none;
}

.fire .media >div >div >a:hover >h4 {
    font-weight:bold;
    transition: linear.2s ;
}
.fire .media >div >div >a>h4 {
    border: solid 1px white;
    padding: 5%;
    margin: 4% 0;
    font-size: 30px;
}

.fire .sermon >div >div >div {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    padding: 3%7%;
    border: solid 2px white;
}
.fire .sermon >div >div >div>a {
    text-decoration:none;
    color: white;
}
.fire .sermon >div >div >div>a>h4 {
    font-size:25px;
    width:90%;
    font-weight:bold;
    text-align:left;

}
.fire .sermon >div >div >div >a .live2 {
font-size: 20px;
    padding: 0%;
    margin: 4%;
    font-weight: bold;
    background-color: #C40000;
    border-radius: 32px;
    letter-spacing: 3px;
    width: 77px;
    

}
.fire .sermon:hover >div >div >div >a .live2 {
position:relative;
animation: bbb .4s infinite alternate;
    

}
.fire .sermon >div >div >div>a>h3 {
    font-size: 1.5vw;
    width: 100%;
    font-weight: bold;
    text-align: left;
    letter-spacing: 0.7px;
    line-height: 1.6;
}
.fire .sermon >div >div >div>a>p {
    font-size:22px;
    width:100%;
    text-align:right;
    padding-top:5%;
}
    .fire .sermon > div .live {
        position: absolute;
        top: 33%;
        left: 29%;
        font-size: 20px;
        padding: 0%;
        margin: 4%;
        font-weight: bold;
        background-color: #C40000;
        border-radius: 32px;
        letter-spacing: 3px;
        width: 77px;
        z-index: 2;
        background-image: none;
        /* opacity: 1; */
        height: auto;
    }


.fire .news >div >div >a{
    text-align:left;
}
.fire .news >div >div >a:hover >h4,
.fire .news >div >div >a:hover >p{
    transform:translateX(5px);
    transition: linear .3s;
}

.fire .news >div >div >a>h4 {
    padding: 1% 0;
    margin: 0;
    font-size: 27px;
}
.fire .news >div >div >a>p {
    padding: 1% 0%;
    margin:  0;
    font-size: 25px;
}
.fire .news >div >div >a>hr {
    margin-top:2px;
}

.fire >div >div .fsecond{
    /*visibility:hidden;*/
    opacity:0;
}


.fire >div:hover >div>h2,
.fire >div:hover >div>h4{
    transform:translateY(-12vw);
    transition:linear .3s;z-index:2;
}

.fire >div:hover >div .live{
    opacity:0;

}
.fire >div:hover >div .fsecond{
    opacity:1;
    transition:linear .7s;

}









/*갤러리*/
        .gallery{
    padding: 5% 12.5% 9%;
}
.gallery> h2{
    font-size:42px;
    font-weight:bold;
    padding-left:7px
}
.gallery> hr{
    height: 2.5px;
    border: none;
    background-color: black;
    margin: 10px 7px 20px;
    
}
.photo {
    text-align: center;
}
.slides-photo {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
    justify-content: center;
    align-items: center;
}
.slides-photo >div {
    width: 16%;
    margin: 0 3px;
    align-items: center;
    position: relative;
    overflow: hidden;
}
/*.slides-photo >div>a{
    position:relative;
    overflow:hidden;
}*/
.slides-photo >div>a>img{
    width:100%;
    height: 8.5vw;
    /*margin:7% 2%;*/
    /*background-color: rgba(0,0,0,1);*/
}


.slides-photo >div>a>h4 {
    width: 100%;
    /* margin: 7% 0%; */
    position: absolute;
    top: -10%;
    left: 0;
    padding: 48% 0 9% 5%;
    text-align: left;
    z-index: 200;
    color: white;
    background-color: rgba(0,0,0,0.5);
    opacity: 0;
    font-size: 1vw;
    line-height: 1.4;
    font-weight: bold;
    visibility: hidden;
    transition: visibility 0.3s linear,opacity 0.3s linear;
}
    .slides-photo > div > a:hover > h4 {
        visibility: visible;
        opacity: 1;
    }
.slides-photo >div>a>div:hover{
    
    
    opacity:0.3;
    transition: linear .3s;
    
}

.slides-photo >div>a>div>h4{
    font-size:19px;
    padding-left:6%;
    
    font-weight:bold;
    opacity:0;

}





/*돌*/

.stone {
    padding: 0;
    background-image: url(../../../Layouts/moohak_Layout/Images/bottom_bg.png);
    background-size: 100% auto;
    background-repeat: no-repeat;
    display:flex;
    flex-wrap:nowrap;
}

.stone >div{
    width:50%;
}
.stone .stone1{
    /*background-color:red;*/
    margin-left:13%;
    height:100%;
}
.stone .stone1 >div{
    height:50%;
     padding:7%;
     padding-bottom:3.5%;
    /*margin:0;*/
    display:flex;
    flex-wrap:wrap;
    
    
}
.stone .stone1 >div .stitle{
   width:30%;
    
    
}
.stone .stone1 .jubo .stitle{
   width:80%;

}
.stone .stone1 .jubo .sbtn{
   width:20%;
   padding-left:7%;
}
.stone .stone1 >div .sbtn >a:hover{
    position:relative;
   animation: aaa 0.4s infinite alternate;
}
.stone .stone1 >div .sbtn{
    width:70%;
    display:flex;
    flex-wrap:nowrap;
    text-align:right;
    
    
}
.stone .stone1 >div .sbtn>h4{
    font-size:1.1vw;
        width: 75%;
    text-align: left;
    
    
}
.stone .stone1 >div .sbtn>a{
    padding-left:15%;
    
    
}

.stone .stone1 .jubo{
    background-color:#c5c5c5;
    height:17vw;
}
.stone .stone1 .jubo .juboinfo{
       width:100%;

}
.stone .stone1 .jubo .juboinfo >a {
    text-decoration:none;
   display:flex;
   flex-wrap:nowrap;
   text-decoration:none;
   color:black;


    

}
.stone .stone1 .jubo >div >a .day {
    width:18%;
        margin: 3% 0;
   text-align:center;
    

}
.stone .stone1 .jubo >div >a>div>h3 {
    font-size: 47px;
    margin-bottom: 0;
    font-weight: bold;
    

}
.stone .stone1 .jubo >div >a>div >p{
       font-size: 20px;
    margin-top: 0;
    font-weight: bold;  
    

}
.stone .stone1 .jubo >div >a .jtitle {
   width:85%;
   padding: 9% 8%;
    

}
.stone .stone1 .jubo >div >a .jtitle >h4 {
   font-size: 1.2vw;
    margin-bottom: 0;
    padding-left: 2%;
    font-weight: 500;
    font-weight:bold;
}
    
.stone .stone1 .jubo > div > a .jtitle > hr {
    margin: 4% 0 0;
    height: 1.7px;
    border: none;
    background-color: black;
}


.stone .stone1 .onlineh{
    background-color:#323232;
     color:white;
     height:18.2vw;
}
.stone .stone1 >div >div >h2{
    /*height:50%;
    padding:0;
    */margin:0;
    font-size: 1.7vw; /*31px*/
    font-weight:bold;
    
}
.stone .stone1 >div >div >hr{
    height: 2px;
    border: none;
    background-color: black;
    margin: 18px 0;
    width:60px;
    
}
.stone .stone1 .onlineh >div >hr{
    background-color: white;
    
}

.m4 {
    display: flex;
    flex-wrap: nowrap;
    margin: 3% 6%;
	        width: 100%;
}
.m4>a{
    width:calc(50% - 8px);
    color:white;
    text-decoration:none;
    border: solid 1px white;
    margin:8px;
    padding: 0;
    text-align:center;
	display: flex;
    align-items: center;
	    justify-content: center;
    
}
.m4>a>h4{
    font-size:1.3vw;     word-break: keep-all;
}

.m4>a:hover >h4{
    font-weight:bold;
    transition: linear .3s;
}




.stone .stone2{
     /*background-color:blue;*/
    margin-right:13%;
    display:flex;
    flex-wrap:nowrap;
}
.stone .stone2 >div{
    width:50%;
    padding:0;
    margin:0;
    height:35.2vw;
    
}
.stone .stone2 .next{
     background-color:#EBEBEB;
    
}
.stone .stone2 .welcome{
     background-color:white;
    
}

.stone .stone2 >div{
    padding: 30% 7%;
    text-align: center;

}
.stone .stone2 >div>a{
    text-decoration:none;
}
.stone .stone2 >div >a >h4{
        font-size: 20px;
    font-weight: bold;

}
.stone .stone2 >div >a >h2{
        margin: 16px;
    font-weight: bold;

}
.stone .stone2 >div>a >hr{
        height: 2.5px;
    border: none;
    background-color: black;
    margin: 18px 37%;
    width: 60px;

}
.stone .stone2 >div>a >p{
    font-size: 18px;
    font-weight: 600;
    padding: 11% 0%;

}
/*////////////////////////////////////////////////////////////////////////*/

@media (max-width:1500px) {
    .intro-right {
        width: 42%;
    }

    .intro-text {
        margin: 0 6%;
    }

    .intro-right .intro-icon {
        padding: 4% 0%;
    }

    .fire > div > div > h2 {
        top: 34%;
        font-size: 5vw;
    }

    .fire > div .ffirst > h4 {
        /*top: 52%;*/
        font-size: 2.4vw;
    }

    .fire .media > div > div > a > h4 {
        font-size: 2vw;
    }

    .fire .sermon > div > div {
        padding: 54% 5% 28% 43%;
    }

        .fire .sermon > div > div > div {
            padding: 2% 6%;
        }

            .fire .sermon > div > div > div > a > h4 {
                font-size: 1.5vw;
            }

            .fire .sermon > div > div > div > a > h3 {
                font-size: 1.6vw;
            }

            .fire .sermon > div > div > div > a > p {
                font-size: 1.4vw;
                padding-top: 0%;
            }

    .fire .news > div > div {
        padding: 56% 10% 24%;
    }

        .fire .news > div > div > a > h4 {
            font-size: 2vw;
        }

        .fire .news > div > div > a > p {
            font-size: 1.8vw;
        }

    .gallery {
        padding: 5% 7.5% 9%;
    }

    .slides-photo > div > a > h4 {
        padding: 43% 0 9% 5%;
        font-size: 2.3vw;
    }
.stone .stone1 {
    margin-left: 5%;

}
.stone .stone2 {
    margin-right: 5%;

}
.stone .stone1 .jubo {
    height: 14vw;
}
.stone .stone1 .onlineh {
    height: 21.2vw;
}
.stone .stone1 .jubo >div >a .jtitle {
    width: 90%;
    padding: 0% 8%;
}
stone .stone1 >div .sbtn>h4 {
    font-size: 1.2vw;
    width: 75%;
}
.stone .stone1 >div .sbtn>a {
    padding-left: 24%;
}
.m4 {
    margin: 1% 6%;
}
.m4>a { 
    margin: 4px;
}
.stone .stone2 >div {
    padding: 23% 7%;
}
.fire .sermon >div .live{
    top: 29%;
    left: 15%;
}


}
@media (max-width:1200px) {
    .slides-photo > div {
        width: 32%;
        margin: 3px;
        align-items: center;
    }
    .slides-photo >div>a>img{
    width:100%;
    height: 18vw;
    /*margin: 2%;*/
    /*background-color: rgba(0,0,0,1);*/
}

    .stone .stone1 .jubo > div > a .jtitle > h4 {
        font-size: 1.5vw;
    }
        .stone .stone2 >div >a >h4 {
    font-size: 1.9vw;
}
.stone .stone2 >div >a >h2 {
    font-size: 2.7vw;
    margin: 8% 0;
}
.stone .stone2 >div>a >p {
    font-size: 1.8vw;
    padding: 7% 0%;
}
.stone .stone2 >div {
    padding: 20% 7%;
}

}
@media (max-width:1000px) {
    .intro {
        /*padding: 7% 0;
        display: flex;*/
        flex-wrap: wrap;
    }
    .intro-left{
        width:100%;
    }
    .intro-right{
        width:100%;
        padding:8% 3%;
    }
    .intro-text {
        width: 97%;
    }
    .intro-right .intro-icon {
        padding: 8% 5%;
    }

    .fire > div:hover > div > h2, .fire > div:hover > div > h4 {
        transform: translateY(-15vw);
    }
    .fire .sermon > div > div {
        padding: 47% 5% 28% 43%;
    }

.fire .news >div >div >a>hr {
    margin-bottom: 14px;
}

    .stone .stone1 {
        margin-left: 0%;
    }

    .stone .stone2 {
        margin-right: 0%;
    }

.stone .stone1 .jubo {
    height: 19vw;
}
.stone .stone1 .onlineh {
    height: 25vw;
}
.stone .stone2 >div {
    height: 44vw;
}
.stone {
    background-size: 100% 44vw;
}
.stone .stone1 >div >div >h2 {
    font-size: 2.1vw;
}
.stone .stone1 >div .sbtn>a {
    padding-left: 8%;
}
.stone .stone1 >div .sbtn>h4 {
    font-size: 1.6vw;
    width: 90%;
}
}



@media (max-width:767px) {
#main-slider .dimode-slider .slider-wrapper .slide > div {
    background-color: #3c3b3e;
    width: 82vw;
    height: 51vw;
    top: -11vw;
    position: relative;
    transform: translateX(15vw);
    color: white;
    padding: 3%;
    vertical-align: middle;
}
#main-slider .dimode-slider .slider-wrapper .slide .each-img {
    margin: 0;
    padding-left: 0%;
    padding-top: 30px;
}
#main-slider .dimode-slider .slider-dots {
    position: absolute;
    bottom: 12vw;
    right: 0;
}


.intro {
        flex-wrap: wrap;
    }
.intro-text {
        margin: 0 0%;
        width: 100%;
    }
.intro-left {
        /*margin: 0 2%;*/
        width: 100%;
    }
.intro-right {
        margin: 7vw 6vw;
        width: 100%;
    }
.intro-right .newperson >a:hover >img{
    position:relative;
    animation:aaa 0.4s  infinite alternate;
    
}


.fire .sermon > div > div {
        width: 100vw;
        padding: 49% 5% 28% 43%;
}
.fire {
        flex-wrap: wrap;
    }

.fire >div{
    height:50vw;
}

.fire > div > div > h2 {
    top: 7%;
    font-size: 10vw;
    width: 100vw;
}
.fire > div .ffirst > h4 {
        position: absolute;
        top: 18%;
        left: 0%;
        width: 100vw;
        font-size: 5vw;
}
.fire >div > div > a {
    position:absolute;
    width: 100vw;
    height:50vw;
    z-index:3;
    top: 0%;
}

    .fire > div:hover > div > h2,
    .fire > div:hover > div > h4 {
        /*transform: translateY(-40vw);
                transition: linear .3s;
                z-index: 2;*/
        transform: translateY(0vw);
    }

.fire .sermon >div >div >div>a>h4 {
    font-size: 3.5vw;
}
.fire .sermon >div >div >div>a>h3 {
    font-size: 4.6vw;
}
.fire .sermon >div >div >div>a>p {
    font-size: 3.4vw;
}
.fire .media >div >div >a>h4,
.fire .news >div >div >a>h4 {
    font-size:5vw;
}
.fire .news >div >div >a>p{
    font-size:4vw;
}
    .fire .news > div > div {
        padding: 62% 10% 24%;
    }

.fire .news >div >div >a>hr {
    margin-bottom: 20px;
}

.fire .sermon >div .live{
    left: 22%;
}

.fire .media > div> img{
    transform: translateY(0%);
}
.fire .sermon > div> img{
    transform: translateY(-33%);
}
.fire .news > div> img{
    transform: translateY(-67%);
}

.fire >div:hover >div .fsecond{
    opacity:0;

}




.slides-photo >div {
    width: 49%;
    margin:2px;
}
.slides-photo >div>a>img{
    height: 24vw;
}
.stone{
        flex-wrap:wrap;
    }
.stone >div {
    width: 100%;
    
}
    .stone .stone1 {
        margin: 0 10%;
    }

    .stone .stone2 {
        margin: 0 10%;
    }

.stone .stone1 .jubo {
    height: 42vw;
}
.stone .stone1 .onlineh {
    height: 42vw;
}
.stone .stone2 >div {
    height: 62vw;
    padding: 17% 7%;
}
.stone {
    background-size: 100% 146vw;
}
.stone .stone1 >div >div >h2 {
    font-size: 3.5vw;
}
.stone .stone1 >div .sbtn>h4 {
    font-size: 2.6vw;
    width: 90%;
}
.stone .stone1 .jubo > div > a .jtitle > h4 {
    font-size: 2.7vw;
}
.m4{
    width:100%;
}
.m4>a {
    width: calc(50% - 8px);
    margin: 4px;
}
.m4>a>h4 {
    font-size: 2.8vw;
}
.stone .stone2 >div >a >h4 {
    font-size: 2.9vw;
}
.stone .stone2 >div >a >h2 {
    font-size: 3.7vw;
}
.stone .stone2 > div>a> hr {
    margin: 18px 10vw;
}
.stone .stone2 >div>a >p {
    font-size: 2.3vw;
}

}

@media(max-width:540px){
    .intro-text h2 {
        font-size: 11vw;
    }

    .intro-text p {
        font-size: 4.6vw;
    }

    .intro-right .newperson > a > h4 {
        font-size: 6vw;
        margin-top:17px;
    }
    .intro-right .intro-icon > a > p {
        font-size: 3vw;
    }

    .slides-photo > div {
        width: 96%;
        margin: 4px;
    }
    .slides-photo >div>a>img{
    height: 52vw;
}

    .slides-photo >div>a>h4 {
    padding: 46% 0 9% 5%;
    font-size: 5vw;
}

    .stone .stone1,
    .stone .stone2 {
        margin: 0;
    }
    .stone .stone1 .jubo {
    height: 50vw;
}
.stone .stone1 .onlineh {
    height: 60vw;
}
.stone .stone2 >div {
    height: 90vw;
    padding: 19% 7%;
}
.stone {
    background-size: 100% 200vw;
}

.stone .stone1 >div >div >h2 {
    font-size: 4.8vw;
}

.stone .stone1 .jubo > div > a .jtitle > h4 {
    font-size: 3.7vw;
}
.stone .stone1 >div .sbtn>h4 {
    font-size: 4vw;
}
.m4>a>h4 {
    font-size: 3.5vw;
}
.stone .stone2 >div >a >h4 {
    font-size: 3.9vw;
}
.stone .stone2 >div >a >h2 {
    font-size: 5.7vw;
}

.stone .stone2 >div>a >p {
    font-size: 4vw;
}



.photo{
    height: 161vw;
    overflow: hidden;
}
}









@media (max-width:320px) {
.fire > div > div > h2 {
        top: 35%;
        font-size: 14vw;
        width: 100vw;
    }

}








































@media(max-width:1630px) {
}
@media (max-width:1366px) {
}

@media (max-width:1280px) {
}

@media (max-width:1024px) {
}
@media (max-width:769px) {
}
@media (max-width:560px) {
}

@media (max-width:461px) {
}

























        /*

.margin-top { margin-top:80px; }

.slider .move-btn { display:none!important; }

.video-tag { position:relative; top: 90px;}
.area-first { height:110vh; position: relative; top: 90px; }
.area-first video { position: fixed; top: -10px; left: 0; right: 0; z-index: -9999; margin: auto; min-width: 100%; min-height: 100%; }

#slogan { padding:150px 0; background:#fff;}
#slogan h1 { font-size:50px; margin:0; font-weight:bold; color:#123474; }
#slogan h5 { margin:0 0 35px; font-size:23px; }

#sermon { padding-bottom:150px; background:#fff;  }
#sermon > div { padding:0 60px;}
#sermon .sermon-inner { text-align:left; display:inline-block; position:absolute; top:15%; right:0; width:300px; }
#sermon .sermon-inner img { position:relative; top:80px; right: -70%; }
#sermon .sermon-inner p { font-size:19px; margin:0; float:right; line-height:30px; margin-right:30px; text-align:right; }
#sermon .sermon-inner h4 { font-size:17px; color:#0D2D68; }
#sermon .sermon-inner h2 { font-size:30px; color:#000; font-weight:bold; margin:30px 0 40px; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; width:270px; }
#sermon .sermon-inner a { text-decoration:none; }
#sermon .sermon-bg { background:url(../../../Layouts/cjful_Layout/Images/sermon_bg_20211.png) no-repeat; background-size:100% 100%; height:424px; text-align:center; padding:30px 10px 10px; position:relative; }
#sermon .sermon-box ul { position:absolute; bottom:0; width:100%; text-align:center; background:#757FD6; left:0; }
#sermon .sermon-box ul li { float:left; width:20%; padding:20px 0; font-size:20px; color:#fff; }
#sermon .sermon-box ul li a { color:#fff; text-decoration:none; width:100%; border-right:1px solid #fff; display:inline-block; }
#sermon .sermon-box ul li a:hover { font-weight:bold; }
#sermon .sermon-box ul li:last-child a { border-right:none; }

#sermon .info { background:url(../../../Layouts/cjful_Layout/Images/info_bg.png) no-repeat; background-size:100% 100%; height:425px; text-align:center; padding:30px 10px 10px; }
#sermon .info h6 { color:#fff; font-size:20px; font-weight:bold; }
#sermon .info hr { width:50px; margin:0 auto 40px;  border-top:3px solid #fff; }
#sermon .info a > div > div { background:#fff; font-size:17px; color:#333; padding:15px 0; margin-bottom:20px;}
#sermon .info a > div > div:hover { opacity:0.7; transition:0.2s all; }
#sermon .info a { text-decoration:none; }

#next { background:url(../../../Layouts/cjful_Layout/Images/gneration_bg.png) no-repeat; background-size:100% 100%; height:1010px; text-align:center; padding:120px 0; }
#next p { font-size:20px; font-weight:bold; margin:0 0 5px; }
#next hr { border-top:2px solid #000; width:70px; margin:0 auto; }
#next h2 { font-size:40px; font-weight:bold; margin:80px 0 100px; }
#next table { margin:0 auto; border-top:none; border-bottom:none; }
#next table tr:hover { background:#a8ddf7; transition:0.2s all; color:#fff; }
#next table td { padding:15px 25px;}
#next table td span { font-size:15px; }
#next table tbody { font-size:20px; text-align:left; }

#notice { padding:100px 0; text-align:center; background:#fff; }
#notice > div > div > div  { padding:0 10px; margin-top:90px; }
#notice h1 { font-size:45px; font-weight:bold; margin:0 0 17px; color:#000; }
#notice hr { width:110px; border-bottom:1px solid #000; margin:0 auto; }
#notice .notice-box { background:#4C6D98; padding:35px 40px; }
#notice .notice-box h2 { color:#fff; float:left; font-size:24px; margin:0; }
#notice .notice-box .plus { float:right; font-size:40px; font-weight:bold; color:#fff; position:relative; top:-20px; text-decoration:none; }
#notice .notice-box ul { clear:both; border-top:1px solid #fff; padding:0; position:relative; top:-10px; overflow:hidden; }
#notice .notice-box ul a { color:#fff; }
#notice .notice-box ul li { overflow:hidden; padding:25px 10px 0 ; }
#notice .notice-box .plus:hover { color:#FBB462; transition:0.2s all; }
#notice .notice-box ul li:hover { color:#FBB462; transition:0.2s all; }
#notice .notice-box ul li p { font-size:18px; margin:0; float:left; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; width:100%;  }
#notice .notice-box ul li span { font-size:18px; margin:0; float:right; }

#gallery { background:url(../../../Layouts/cjful_Layout/Images/bg_g.png) no-repeat; background-size:100% 100%; height:474px; text-align:center; padding:60px 0; }
#gallery h1 { font-size:45px; font-weight:bold; margin:0 0 17px; color:#fff; }
#gallery hr { width:120px; border-bottom:1px solid #fff; margin:0 auto; }
.gallery-box { position:relative; overflow:hidden; margin-top:75px; }
.gallery-box img { width:100%; height:180px; }
.gallery-box img:hover { transform:scale(1.2); transition:0.2s all; }
.gallery-desc { position:absolute; bottom:0; width:100%; background:rgba(0,0,0,0.7); padding:15px 30px; }
.gallery-desc p { margin:0; font-size:17px; color:#fff; text-align:left; text-overflow: ellipsis; -o-text-overflow: ellipsis; overflow: hidden; white-space: nowrap; word-wrap: normal !important; width:200px;  }

#contact { background:url(../../../Layouts/cjful_Layout/Images/bg_5.png) no-repeat; background-size:100% 100%; height:432px; text-align:center; padding:80px 0; }
#contact h1 { font-size:45px; font-weight:bold; margin:0 0 17px; }
#contact h2 { font-size:30px; font-weight:bold; margin:35px 0 0; }
#contact h2 span { font-size:23px; font-weight:bold; display:inline-block; margin-left:20px; }
#contact hr { width:120px; border-bottom:1px solid #333; margin:0 auto; }
#contact ul { margin-top:65px; }
#contact li { display:inline-block; font-size:19px; padding:0 50px; font-weight:bold; }
#contact li p { margin:20px 0 0; font-weight:normal; }


@media (min-width:1200px) and (max-width:1499px) {
	.sermon-title strong { width:135px; }
	.sermon-title em { margin:0 5px; }
	.sermon-title em { width:100px; }
    .gallery-box { margin-top:70px; }
	#gallery { padding:70px 15px;}
    #next li { margin:0 8px; }
    #next h2 { margin-bottom:55px; }
    #quick li { margin:0 54px; }
    .sermon-right { padding:10px 0; }
    #next table td { padding:15px 20px; }
    #contact li { padding:0 20px; }
    #notice .notice-box ul li p {
    font-size: 18px;
    margin: 0;
    float: left;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    word-wrap: normal !important;
    width: 100%;
    text-align:left;
}
   
}

@media (min-width:993px) and (max-width:1199px) {
	#notice .notice-box ul li p {
    font-size: 18px;
    margin: 0;
    float: left;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    word-wrap: normal !important;
    width: 120px;
}
        .gallery-box { margin-top:70px; }
	#gallery { padding:70px 5px;}
    #next h2 { margin-bottom:55px; }
    #quick li { margin:0 33px; }
    .sermon-right { padding:10px 0; }
    .gallery-desc { padding:15px; }
    #gallery > div > div > a > div { padding:0 8px;}
    #notice > div > div > div { padding:0 15px; }
    #next li { display: inline-block; color: #333; font-size: 18px; border: 1px solid #333; vertical-align: middle; width: 80px; margin: 0 4px;  display: inline-table; height: 80px; }
    .sermon-right li {
    display: inline-block;
    color: #333;
    font-size: 18px;
    border: 1px solid #333;
    height: 90px;
    vertical-align: middle;
    width: 90px;
    margin: 0 14px;
    display: inline-table;
    height: 90px;
}
    #contact li { padding:0 5px; }
    #sermon > div { padding: 0px 15px; }
    #next h2 { font-size:28px; }
    #next table tbody { font-size:18px; }
    #next table td { padding: 15px 13px; }
    #notice .notice-box { padding:35px 25px; }
    #next { padding:160px 0; }
}

@media (min-width:768px) and (max-width:992px) {
	#notice .notice-box ul li p {
    font-size: 18px;
    margin: 0;
    float: left;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    word-wrap: normal !important;
    width: 65px;
}
    #contact li { margin-bottom:20px; }
    #contact { padding:35px 0; }
    #slogan { padding:70px 0; }
    #sermon > div { padding:0 15px; }
	.sermon-title em { margin:0 10px; }
	.sermon-title em { width:90px; }
    #contact li { padding:0 20px; font-size:17px;}
    #gallery { height:auto;  padding:70px 15px;}
    #gallery h1 { font-size:30px;}
    #contact h1 { font-size:30px;}
    #notice h1 { font-size:30px;}
    #next { height:auto; }
    #notice > div > div > div { padding:0 15px; margin-top:55px;}
    #notice .notice-box { padding:40px 15px; }
    #notice .notice-box ul li { padding:20px 0; }
    #notice .notice-box ul li p { font-size:17px;}
    #notice .notice-box h2 { font-size:22px; }
    #quick li { display: inline-table; background: #FAB14A; color: #fff; padding: 30px 5px; font-size: 18px; width: 110px; height: 110px; vertical-align: middle; margin: 0 20px; box-shadow: 5px 5px 6px 2px #ccc; }
    #next h2 { margin:20px 0 50px; }
    #next ul { margin-bottom:50px; }
    #next { padding:60px 0; }
    .next-left { padding:0; }
    #quick { padding:0 0 60px; }
    .sermon-right { padding:50px 0 30px; }
}

@media (max-width: 767px) {
	.dimode-widget.popup .popup-content .each-content { width:100%!important; left:0!important; margin:150px 0 0!important; }
	
	#main-slider { margin-top:90px; }
	.slider .slider-wrapper .slide img {
    height: 250px;
}
	
	.slider .slider-dots { display:none!important; }
	
	
	#gallery .col-xs-12 { width:auto!important; }
	.gallery-box img { height:auto!important; }
	
	
	#contact { background: url(../../../Layouts/cjful_Layout/Images/bg_5.png) no-repeat; background-size: auto 100%; height: 432px; text-align: center;  padding: 80px 0; background-position: right; }
	.sermon-title strong { font-size:18px; width:174px;     top: 2px;}
    #notice { padding:40px 0; }
    #notice .notice-box .plus { font-size:34px; }
    #gallery hr { margin:0 auto 30px;}
    .gallery-box { margin-top:20px; }
    #contact  { padding:75px 0; }
    #contact h2 { font-size:19px; }
    #contact h2 span { font-size:17px; }
    #contact ul { margin-top:30px; }
        #contact li { padding:0 20px; font-size:17px; margin-bottom:15px;}
    #gallery { height:auto;  padding:70px 0px;}
    #gallery h1 { font-size:25px;}
    #contact h1 { font-size:25px;}
    #notice h1 { font-size:25px;}
    #notice .notice-box ul li p { text-align:left; }
    #next { height:auto; }
    #notice > div > div > div { padding:0 15px; margin-top:30px;}
    #notice .notice-box { padding:30px 15px; }
    #notice .notice-box ul li { padding:20px 10px 0; }
    .sermon-title em { display:none; }
    #notice .notice-box ul li p { font-size:17px;}
    #notice .notice-box h2 { font-size:17px; }
    #quick li { display: inline-table; background: #FAB14A; color: #fff; padding: 30px 5px; font-size: 15px; width: 102px; height: 102px; vertical-align: middle; margin: 10px; box-shadow: 5px 5px 6px 2px #ccc; }
    #next h2 { margin:20px 0 25px; font-size:18px; }
    #next ul { margin-bottom:20px; }
    #next { padding:60px 0; }
    .next-left { padding:0; }
    #next > div > div > div > p { font-size:17px; }
    #quick { padding:0 0 60px; }
    .sermon-right { padding:50px 0 30px; }
    #notice .notice-box ul li p { font-size:16px; }
    #notice .notice-box ul li span { font-size:16px; }
    #next li { display: inline-block; color: #333; font-size: 14px; border: 1px solid #333; height: 90px; vertical-align: middle; width: 70px; margin: 0 1px; display: inline-table; height: 70px; }
    .sermon-right h2 { font-size:20px;}
    .sermon-right table { font-size:17px; }
    .sermon-right li { display: inline-block;    color: #333; font-size: 15px; border: 1px solid #333; height: 90px;    vertical-align: middle;  width: 70px;    margin: 0px 10px;    display: inline-table;    height: 70px; }
    #sermon { margin-top:40px; }
    
    #next { background-position:left; background-size: auto 100%; }
   
    #slogan h5 { font-size:17px; }
    #slogan h1 { font-size: 25px; margin: 0; font-weight: bold; color: #123474; }
    #slogan { padding: 30px 0; background: #fff; }
    #sermon > div { padding:0 15px; }
    #sermon .sermon-box ul li { float: left; width: 33.333%; padding: 10px 0; font-size: 14px; color: #fff; border:none;} 
    #next table tbody { font-size:14px; }
    #next table td { padding: 10px 5px; }
    .gallery-desc p { font-size:15px; }
    .gallery-desc { position: absolute; bottom: 0; width: 100%; background: rgba(0,0,0,0.7); padding: 10px 30px; }
    #sermon .sermon-box ul li a { border:none; }
    #sermon .sermon-bg { background-size:auto 100%!important; height:350px; }
    .area-first { display:none; }
    #sermon .sermon-inner h2 { font-size:18px; width:100%; margin:15px 0; }
    #sermon .sermon-inner p { font-size:14px; line-height:20px; }
    #sermon .sermon-inner img { display:none; }
    #sermon .sermon-inner h4 { font-size:14px; line-height:20px; }
    #sermon .sermon-inner {
    text-align: left;
    display: inline-block;
    position: absolute;
    top: 15%;
    right: 15px;
    width:100%; 
    text-align:right;
   
}
#sermon .sermon-inner p { float:right; margin:0; }

#slogan { margin-top:35px; }
}

*/