body{background: url("../img/bg_210629.png") no-repeat 50% 23%;}
.container{max-width: 1230px;margin: 0 auto;padding: 0 15px;}
img{max-width: 100%;}

#head{padding-top: 48px;}
#head .container{max-width: 1010px;}
.head__title{text-align: center;margin-bottom: 50px;}
.head__title img{width: 100%;}
.head__bar{height: 65px;width: 100%;line-height: 65px;font-size: 26px;font-weight: 600;color: #fff;text-align: center;background: #000;transform: skew(10deg);}
.head__bar > div{transform: skew(-10deg);}
.head__sermon{padding-top: 30px;}
.sermon__item{width: 100%;padding: 0 23px 0 30px;background: #fff;margin-bottom: 30px;overflow: hidden;display: flex;min-height: 172px;align-items: center;justify-content: space-between;}
.sermon__item:nth-of-type(3){margin-bottom: 0;}
.sermon__item__date{font-family: "Roboto", sans-serif;min-width: 207px;}
.sermon__item__date--cal{font-size: 20px;color: #1F1F1F;font-weight: 400;}
.sermon__item__date--cal span{font-weight: 600;}
.sermon__item__date--title{font-size: 46px;font-weight: bold;}
.sermon__item__text{font-size: 15px;color: #666666;line-height: 25px;letter-spacing: -0.4px;}
.sermon__item__date--title1{color: #D600D1;}
.sermon__item__date--title2{color: #FF6E03;}
.sermon__item__date--title3{color: #E61F83;}
.btn_div{display: flex;width: 800px;margin: 0 auto}
.sermon__btn{width: 365px;height: 70px;line-height: 70px;text-align: center;color: #fff;font-family: "NanumSquare", sans-serif;border: 2px solid #FFFFFF;border-radius: 70px;font-size: 26px;font-weight: 600;background: #D600D1;box-shadow: 0px 0px 10px 1px rgba(0,0,0,0.4);margin: 50px auto 0;letter-spacing: -1px;}

.sermon__btn--relay{background: #EC880E;}

.relay{padding-bottom: 110px;}

footer{width: 100%;height: 80px;background: #333;line-height: 80px;}
footer .copyright{color: #fff;float: left;font-size: 16px;}
footer .phone{float: right;display: block;font-size: 16px;font-weight: 300;color: #fff;}
footer .phone strong{font-size: 20px;font-weight: 600;}

#bo_w .container{padding-top: 0;}
#bo_w form{background: #fff;padding: 30px 30px 0;}
#bo_w .btn_confirm{padding: 110px 0 80px 0;}

@media only screen and (max-width: 1200px){
    #head{padding-top: 57px;}
    .head__bar{height: 50px;line-height: 50px;font-size: 22px;}

    .sermon__item{padding: 35px 40px 35px 30px;min-height: 0;align-items: normal;}
    .sermon__item__text{font-size: 14px;letter-spacing: -0.2px;}

    .btn_div{width: 650px}
    .sermon__btn{margin: 30px auto 0;width: 305px;height: 60px;line-height: 60px;font-size: 22px;}

    footer{height: 66px;line-height: 66px;}
    footer .copyright{font-size: 14px;}
    footer .phone{font-size: 14px;}
    footer .phone strong{font-size: 18px;}
}

@media only screen and (max-width: 650px){
    body{background-size: cover;}

    #head{padding-top: 35px;}
    .head__bar{height: 40px;line-height: 40px;font-size: 18px;font-family: "NanumSquare", sans-serif;font-weight: 900;}

    .sermon__item{padding: 31px 23px 27px;display: block;}
    .sermon__item__date{padding-bottom: 25px;}
    .sermon__item__date::after{clear: both;content: '';display: block;}
    .sermon__item__date--cal{float: left;font-size: 14px;padding-right: 18px;}
    .sermon__item__date--cal span{display: block;}
    .sermon__item__date--title{float: left;line-height: 37px;}
    .sermon__item__text{font-size: 13px;line-height: 22px;}

    .btn_div{display: block;width: 100%}
    .sermon__btn{width: 250px;height: 48px;line-height: 48px;font-size: 18px;}

    footer{height: 90px;line-height: 25px;text-align: center;padding-top: 20px;}
    footer .copyright{float: none;font-size: 12px;}
    footer .phone{float: none;}
}

.sermon__item2{
    width: 100%;
    padding: 10px 23px 40px 30px;
    background: #fff;
    margin-bottom: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.sermon__title{
    font-size: 26px;
    font-weight: bold;
    margin: 15px 0 20px 0;
}

.quick{
    position: fixed;
    width: 110px;
    min-width: 110px;
    height: 240px;
    top: 50%;
    transform: translateY(-50%);display: flex;
    justify-content: space-between;
    flex-direction: column;
    right: 20px;
    z-index: 9999;
}

.quick__item{
    position: relative;
    right: 0;
}

.quick__item img{
    float: right;
}

@media (min-width: 1201px) {
    .quick_btn{
        max-width: 110px;
        width: 110px;
        height: 110px;
    }
}

@media (max-width: 1200px) and (min-width: 651px) {
    .quick_btn{
        max-width: 90px;
        width: 90px;
        height: 90px;
    }
}

@media (max-width: 650px) {
    .quick.container{
        display: none;
    }
}