@charset "utf-8";

/* ---------- #main ---------- */
#main .container-xxl { margin: 0 auto; padding: 0; }
#carouse-main .img-wrap { height: 600px; }
#carouse-main .img-wrap img:nth-child(2) { display: none; }
#carouse-main .txt-wrap { position: absolute; top: 50%; left: 200px; transform: translate(0,-50%); margin-top: -30px; color: #fff; }
#carouse-main .txt-wrap .top-text { width: 90px; line-height: 30px; font-size: 14px; font-weight: 700; border-radius: 7px; background: #222; text-align: center; }
#carouse-main .txt-wrap .b-text { margin: 15px 0 40px; font-size: 40px; line-height: 135%; }
#carouse-main .txt-wrap .b-text > span { font-weight: 700; }
#carouse-main .txt-wrap .s-text { font-size: 17px; font-weight: 400; }
#carouse-main .carousel-btn { all: unset; position: absolute; top: 50%; transform: translate(0,-50%); width: 60px; height: 100px; background: var(--dimmed-05); text-align: center; cursor: pointer; }
#carouse-main .carousel-btn > img { width: 34px; height: 100%; display: inline-block; }
#carouse-main .main-prev { left: 0; }
#carouse-main .main-next { right: 0; }

/*** responsive ***/
/* 1200px or less */
@media all and (max-width : 1200px){
    #carouse-main .img-wrap { height: 500px; }
    #carouse-main .txt-wrap { left: 100px; }
    #carouse-main .txt-wrap .top-text { width: 80px; line-height: 26px; font-size: 13px; }
    #carouse-main .txt-wrap .b-text { margin: 10px 0 30px; font-size: 32px; }
    #carouse-main .txt-wrap .s-text { font-size: 15px; }
    #carouse-main .carousel-btn { width: 40px; height: 60px; }
    #carouse-main .carousel-btn > img { width: 28px; }
}

/* 767px or less */
@media all and (max-width : 767px){
    #carouse-main .txt-wrap { left: 50px; }
    #carouse-main .txt-wrap .top-text { width: 75px; line-height: 24px; font-size: 12px; }
    #carouse-main .txt-wrap .b-text { margin: 15px 0 10px; font-size: 20px; }
    #carouse-main .txt-wrap .s-text { font-size: 14px; }
    #carouse-main .carousel-btn { width: 28px; height: 45px; }
    #carouse-main .carousel-btn > img { width: 28px; }
}

/* 575px or less */
@media all and (max-width : 575px){
    #carouse-main .img-wrap { height: auto; max-height: 650px; }
    #carouse-main .img-wrap img { min-height: 450px; }
    #carouse-main .img-wrap img:nth-child(1) { display: none; }
    #carouse-main .img-wrap img:nth-child(2) { display: block; }
}




/* ---------- #welcome ---------- */
#welcome .row { align-items: center; }
.wel-menu { display: flex; justify-content: flex-end; align-items: center; }
.wel-menu li { position: relative; width: 160px; text-align: center; }
.wel-menu li:before { position: absolute; top: 50%; left: 0; transform: translate(0,-50%); width: 1px; height: 50px; background: var(--border-01); display: block; content: ""; }
.wel-menu li:last-child::after { position: absolute; top: 50%; right: 0; transform: translate(0,-50%); width: 1px; height: 50px; background: var(--border-01); display: block; content: ""; }
.wel-menu li a { display: block; }
.wel-menu li img { margin-bottom: 14px; width: 60px; height: 60px; }
.wel-menu li h3 { font-size: 17px; font-weight: var(--gray-61); }

/*** responsive ***/
/* 1200px or less */
@media all and (max-width : 1200px){
    #welcome .row { align-items: flex-start; }
    #welcome .col-md-8::after { content: ""; display: block; clear: both; }
    .wel-menu { float: right; flex-wrap: wrap; width: 100%; max-width: 700px;  clear: both; }
    .wel-menu li { margin-bottom: 30px; width: 33.333%; }
    .wel-menu li:nth-child(1):before { display: none; }
    .wel-menu li:nth-child(4):before { display: none; }
    .wel-menu li:last-child::after { display: none; }
    .wel-menu li img { margin-bottom: 14px; width: 50px; height: 50px; }
    .wel-menu li h3 { font-size: 15px; }
}

/* 767px or less */
@media all and (max-width : 767px){
    #welcome .row { display: block; }
}

/* 575px or less */
@media all and (max-width : 575px){
    .wel-menu li h3 { font-size: 13px; } 
}



/* ---------- #worship ---------- */
#worship ul { display: flex; justify-content: space-between; align-items: center; margin: 0 -10px; }
#worship ul li { margin: 0 10px; width: 20%; }
#worship li a { width: 100%; display: block; transition: transform 0.3s ease; }
#worship li a:hover { transform: translateY(-15px); }
#worship li a .img-wrap { height: 220px; overflow: hidden; }
#worship li img { border-radius: 10px 10px 0 0; object-position: top; }
#worship li .txt-wrap { width: 100%; line-height:30px; border-radius:0 0 10px 10px; text-align: center; color: #fff; }
#worship li .txt-wrap h3 { line-height: 50px; font-size: 20px; font-weight: 700; }
#worship li .txt-wrap p { height: 0; overflow: hidden; width: 160px; line-height: 50px; font-size: 16px; font-weight: 700; border-radius: 25px; display: inline-block; transition-duration: 0.5s; }
#worship li:last-child img:nth-child(2) { display: none; }
#worship li:first-child .txt-wrap { background: #e38630 }
#worship li:nth-child(2) .txt-wrap { background: #4CB7A4 }
#worship li:nth-child(3) .txt-wrap { background: var(--mc) }
#worship li:nth-child(4) .txt-wrap { background: #89B26C }
#worship li:last-child .txt-wrap { background: #C64856 }

/*** hover ***/
/* 1200px or more */
@media all and (min-width : 1200px){
    #worship li:hover .txt-wrap p { margin-top: 10px; height: 54px; border: 2px solid #fff; }
}

/*** responsive ***/
/* 1200px or less */
@media all and (max-width : 1200px){
    #worship ul { margin: 0 -5px; flex-wrap: wrap; }
    #worship ul li { margin: 0 5px; width: calc(50% - 10px); }
	#worship li a { padding-top: 3%; }
    #worship li .txt-wrap h3 { position: relative; font-size: 16px; font-weight: 500; display: inline; }
    #worship li .txt-wrap p { display: none; }
}

/* 767px or less */
@media all and (max-width : 767px){
    #worship ul { margin: 0 -5px; flex-wrap: wrap; }
    #worship ul li { margin: 5px; width: calc(50% - 10px); }
    #worship li a { padding-top: 3%; }
    #worship li .txt-wrap { top: inherit; bottom: 15px; right: 15px; transform: translate(0,0); height: 50px; width: auto; }
    #worship li:last-child { width: 100%; }
    #worship li:last-child img:nth-child(1) { object-position: center; }
    #worship li .txt-wrap h3 { font-size: 15px; }
    #worship li .txt-wrap h3::after { top: 3px; width: 18px; height: 18px; }
	#worship li a .img-wrap { height: 160px; }
}

/* 575px or less */
@media all and (max-width : 575px){
    
}



/* ---------- #news ---------- */
#news { background: #f8f8fa; }
#news .tab-menu { display: flex; justify-content: space-between; align-items: center; }
#news .tab-menu li { position: relative; padding: 0 30px; width: 50%; box-sizing: border-box; background: var(--gray-f5); cursor: pointer; }
#news .tab-menu h2 { font-size: 20px; font-weight: 500; line-height: 60px; color: var(--gray-9e); }
#news .tab-menu .more { position: absolute; top: 15px; right: 30px; width: 30px; height: 30px; display: none; }
#news .tab-menu li.on { background: #fff; }
#news .tab-menu li.on h2 { font-weight: 700; color: var(--gray-11); }
#news .tab-menu li.on .more { display: block; }
#news .tab-con { height: calc(100% - 60px); padding: 30px 20px; background: #fff; box-sizing: border-box; }
#news .tab-con > li {display: none; }
#news .tab-con > li.on { display: block; }

/*** responsive ***/
/* 1200px or less */
@media all and (max-width : 1200px){
    #news .tab-menu li { padding: 0 20px; }
    #news .tab-menu h2 { font-size: 17px; line-height: 50px; }
    #news .tab-menu .more { top: 14px; right: 20px; width: 24px; height: 24px; }
    #news .tab-con { height: calc(100% - 50px); padding: 20px 13px; }
}

/* 767px or less */
@media all and (max-width : 767px){
    #news .tab-menu li { padding: 0 15px; }
    #news .tab-menu h2 { font-size: 14px; line-height: 46px; }
    #news .tab-menu .more { top: 12px; right: 15px; width: 20px; height: 20px; }
    #news .tab-con { height: auto; padding: 10px; }
}

/* 575px or less */
@media all and (max-width : 575px){
    
}



/* ---------- #column ---------- */
#column #gallery ul { margin: 0 -10px; }
#column #gallery .img-wrap { height: 200px; border: 1px solid #6c6c6c }


/*** responsive ***/
/* 1200px or less */
@media all and (max-width : 1200px){
    #column #gallery ul { margin: 0 -7px; }
    #column #gallery .img-wrap { padding: 15px 0; height: 150px; }
}

/* 767px or less */
@media all and (max-width : 767px){
    #column #gallery ul { margin: 0 -5px; }
    #column .board-column { margin-top: -10px; }
    #column #gallery li:last-child { display: none; }
    #column #gallery .img-wrap { padding: 70% 0 0 0; height: 0; border-top: 1px solid #000; }
    #column #gallery .img-wrap img { top: 10px; height: calc(100% - 10px); }
}

/* 575px or less */
@media all and (max-width : 575px){
    
}



/* ---------- #quick ---------- */
#quick { margin-bottom: 20px; }
#quick ul { margin: 0 -10px; display: flex; justify-content: flex-start; align-items: stretch; }
#quick li { position: relative; margin: 0 10px; padding-top: 15%; height: 0; }
#quick li > * { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; }
#quick li > button { display: flex; justify-content: center; align-items: center; flex-direction: column; box-sizing: border-box; }
#quick li > a > div { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; }
#quick li .ico-wrap { width: 60px; height: 60px; }
#quick li p { margin-top: 10px; font-size: 20px; font-weight: 500; color: #fff; }
#quick .quick-01 { width: calc(32% - 20px); background: url(/theme/gospelch_new/images/img/video.jpg) no-repeat center/cover; }
#quick .quick-02 { width: calc(17% - 20px); background: #EA984C; }
#quick .quick-03 { width: calc(17% - 20px); background: #4CB7A4; }
#quick .quick-04 { width: calc(17% - 20px); background: #89B26C; }
#quick .quick-05 { width: calc(17% - 20px); background: #C64856; }
#quick .quick-01 > button { padding-right: 30px; align-items: flex-end; justify-content: center; }

#videoModal .modal-dialog { max-width: 640px; }
#videoModal .modal-content { max-width: 100%; border-radius: 0; }
#videoModal .modal-body { padding: 0; }
#videoModal .video-wrap { height: 360px; background: #111; text-align: center; overflow: hidden; }
#videoModal .video-wrap video { margin: -2px 0 0; height: 100%; object-fit: contain; object-position: bottom; display: inline-block; }

/*** responsive ***/
/* 1200px or less */
@media all and (max-width : 1200px){
    #quick ul { margin: 0 -7px; }
    #quick li { margin: 0 7px; }
    #quick li .ico-wrap { width: 40px; height: 40px; }
    #quick li p { margin-top: 7px; font-size: 15px; }
    #quick .quick-01 { width: calc(32% - 14px); }
    #quick .quick-02 { width: calc(17% - 14px); }
    #quick .quick-03 { width: calc(17% - 14px); }
    #quick .quick-04 { width: calc(17% - 14px); }
    #quick .quick-05 { width: calc(17% - 14px); }
    #quick .quick-01 > button { padding-right: 20px; }
}

/* 767px or less */
@media all and (max-width : 767px){
    #quick { margin-bottom: 55px; }
    #quick ul { flex-wrap: wrap; }
    #quick li { margin: 5px 5px; padding-top: 30%; }
    #quick li .ico-wrap { width: 56px; height: 56px; }
    #quick li p { margin-top: 7px; font-size: 15px; }
    #quick .quick-01 { width: calc(66.666% - 10px); }
    #quick .quick-02 { width: calc(33.333% - 10px); }
    #quick .quick-03 { width: calc(33.333% - 10px); }
    #quick .quick-04 { width: calc(33.333% - 10px); }
    #quick .quick-05 { width: calc(33.333% - 10px); }
    #quick .quick-01 > button { padding-right: 20px; }

    
    #videoModal .modal-content { width: 500px; }
    #videoModal .video-wrap { height: 280px; }
}

/* 575px or less */
@media all and (max-width : 575px){
    #quick li { padding-top: 31%; }
    #quick li .ico-wrap { width: 36px; height: 36px; }
    #quick li p { margin-top: 5px; font-size: 14px; }

    #videoModal .modal-content { width: 300px; }
    #videoModal .video-wrap { height: 166px; }
}



/* ---------- #bible ---------- */
select { -webkit-appearance: none; }
button { all: unset; }
#bible .container-xxl { display: flex; justify-content: space-between; align-items: stretch; }
#bible .bible-form { 
    padding: 60px; width: calc(66% - 5px); border: 1px solid var(--border-01); 
    display: flex; justify-content: space-between; align-items: flex-end; box-sizing: border-box;
}
#bible .bible-form h2 { color: var(--mc); font-weight: 700; }
#bible .form-wrap { display: flex; justify-content: flex-end; align-items: stretch; }
#bible .form-wrap form { display: flex; flex-wrap: wrap; }
#bible .form-wrap select { 
    width: 300px; height: 60px; padding: 0 30px; box-sizing: border-box; border-radius: 10px; font-size: 17px; font-weight: 500; color: var(--gray-9e);
    border: 1px solid var(--border-01); background: #fff url(/theme/gospelch_new/images/ico/btn_select.svg) no-repeat calc(100% - 20px) 50%/28px; 
}
#bible .form-wrap input {
    margin: 0 7px; width: 80px; height: 60px; text-align: center; border-radius: 10px; border: 1px solid var(--border-01);
    font-size: 17px; color: var(--gray-11); font-weight: 500;
}
#bible .form-wrap button { 
    position: relative; top: 2px; width: 80px; line-height: 60px; border-radius: 10px; background: var(--mc); 
    color: #fff; font-size: 17px; font-weight: 500; text-align: center; 
}
#bible .form-wrap option { color: var(--gray-11); }
#bible .bible-banner { width: calc(34% - 15px); }
#bible .bible-banner li { margin-bottom: 20px; height: 102px; border: 1px solid var(--border-01); }
#bible .bible-banner li:last-child { margin-bottom: 0; }


/*** responsive ***/
/* 1400px or less */
@media all and (max-width : 1400px){
    #bible .bible-form { padding: 60px 40px;  }
    #bible .form-wrap select { width: 250px; }
    #bible .form-wrap input { width: 70px; }
    #bible .form-wrap button { width: 70px; }
}

/* 1200px or less */
@media all and (max-width : 1200px){
    #bible .bible-form { padding: 30px; flex-wrap: wrap; align-items: center; }
    #bible .sec-title { padding-top: 20px; width: 180px; }
    #bible .sec-title h2 { font-size: 15px; margin-top: 3px; }
    #bible .form-wrap select { padding: 0 20px; height: 50px; font-size: 15px; background: #fff url(/theme/gospelch_new/images/ico/btn_select.svg) no-repeat calc(100% - 16px) 50%/22px; }
    #bible .form-wrap input { height: 50px; font-size: 15px; }
    #bible .form-wrap button { line-height: 50px; font-size: 15px; }
    #bible .bible-banner li { height: 90px; }
}

/* 767px or less */
@media all and (max-width : 767px){
    #bible .container-xxl { display: block; }
    #bible .bible-form { width: 100%; display: block; }
    #bible .form-wrap { margin-top: 30px; display: block; }
    #bible .form-wrap select { margin-bottom: 10px; width: 100%; }
    #bible .form-wrap input { margin: 0px 5px 0 0; width: calc(50% - 7px); }
    #bible .form-wrap button { margin: 0px 0 0 5px; width: calc(50% - 6px); }
    #bible .bible-banner { margin: 10px -5px 0 -5px; width: calc(100% + 10px); display: flex; }
    #bible .bible-banner li { margin: 0 5px; width: calc(50% - 10px); height: 90px; }
}

/* 575px or less */
@media all and (max-width : 575px){
    #bible .bible-banner li { height: 50px; }
}



/* ---------- #banner ---------- */
#banner { padding-bottom: 20px; }
#banner .swiper { padding: 25px 0; border: 1px solid var(--border-01); background: var(--gray-fa); }
#banner .swiper a { height: 43px; }


/*** responsive ***/
/* 1200px or less */
@media all and (max-width : 1200px){
    #banner .swiper { padding: 15px 0; }
    #banner .swiper a { height: 32px; }
}

/* 767px or less */
@media all and (max-width : 767px){
    #banner { padding-bottom: 0; }
    #banner .container-xxl { padding: 0 !important; border: 0; }
    #banner .swiper { border-left: 0; border-right: 0; }
    #banner .swiper a { height: 20px; }
}

/* 575px or less */
@media all and (max-width : 575px){

}