/* ===============================================================
    * facility
=============================================================== */
.facility {width: 100%; height: 100vh;}

.swiper-slide {position: relative; width: 100%; height: 100vh;}
.slide-bg {width: 100%; height: 100%;}
.slide-tit {position: absolute; width: 100%; left: 0; top: 50%; transform: translateY(-50%); color: #fff; text-align: center;}
.slide-tit h2 {font-size: 50px; letter-spacing: 0.1em;}
.slide-tit h3 {font-size: 18px; letter-spacing: 0.2em; margin: 10px 0 30px;}
.slide-tit .view-btn {margin: 0 auto; width: 200px; height: 44px; line-height: 44px; text-align: center; font-size: 14px; letter-spacing: 0.2em; color: #000; background: #fff; cursor: pointer;}
/* .view-btn {position: absolute; z-index: 10; left: 50%; top: 55%; transform: translate(-50%,-50%); width: 200px; height: 44px; line-height: 44px; text-align: center; font-size: 14px; letter-spacing: 0.2em; color: #000; background: #fff; cursor: pointer;} */

.fac-ctrl {z-index: 10; position: absolute; width: 100%; left: 0; top: 50%; transform: translateY(-50%);}
.fac-ctrl .nav-btn {position: absolute; top: 50%; transform: translateY(-50%); font-size: 50px; color: #fff; cursor: pointer;}
.fac-ctrl .prev {left: 50px;}
.fac-ctrl .next {right: 50px;}
.fac-pager {bottom: 40px !important;}
.fac-pager .swiper-pagination-bullet {width: 7px; height: 7px; vertical-align: middle; background: #fff; opacity: 0.3; margin: 0 7px !important;}
.fac-pager .swiper-pagination-bullet-active {width: 14px; height: 14px; opacity: 1;}

.slide-info {position: fixed; display: flex; justify-content: center; align-items: center; z-index: 990; left: 0; right: 0; top: 0; bottom: 0; background: rgba(34,34,34,.7); opacity: 0; visibility: hidden; transition: .3s;}
.slide-info.show {opacity: 1; visibility: visible;}
.slide-info__box {position: relative; width: 50%; background: rgba(34,34,34,.7);}
.info-close {position: absolute; right: 35px; top: 35px; font-size: 30px; color: #fff; cursor: pointer;}
.slide-info__tit {width: 100%; height: 100px; margin-top: 80px;}
.slide-info__tit h4 {font-size: 44px; color: #fff; margin-bottom: 15px;}
.slide-info__tit h5 {font-size: 20px; letter-spacing: 0.1em; color: #fff;}
.info-txt {width: calc(100% - 80px); margin: 40px 40px 60px; min-height:50px; max-height: 300px; overflow-y: auto; font-size: 15px; line-height: 26px; color: rgba(255,255,255,.7);}
.info-txt::-webkit-scrollbar {width: 7px;}
.info-txt::-webkit-scrollbar-thumb {background-color: rgba(255,255,255,.8); background-clip: padding-box; border-radius: 10px; border: 2px solid transparent;}
.info-txt::-webkit-scrollbar-track {background-color: rgba(255,255,255,.2); border-radius: 10px;} 

@media (max-width: 820px){
    .facility {height: auto;}
    .swiper-slide {height: auto;}
    .slide-bg {height: 56.27vw;}
    .slide-tit {position: static; transform: none; margin-top: 9.33vw; padding: 7vw 0 16.00vw; background: #fff;}
    .slide-tit h2 {font-size: 8.00vw; color: #222;}
    .slide-tit h3 {font-size: 3.73vw; color: #194052; margin: 4.00vw 0 8.00vw;}
    .slide-tit .view-btn {width: 36.67vw; height: 9.47vw; line-height: 9.47vw; font-size: 3.67vw; background: #194052; color: #fff;}
    .fac-ctrl {top: 0; height: 56.27vw; transform: none;}
    .fac-ctrl .nav-btn {font-size: 6.67vw;}
    .fac-ctrl .prev {left: 4.00vw;}
    .fac-ctrl .next {right: 4.00vw;}
    .fac-pager {bottom: initial !important; top: 56.27vw; height: 9.33vw; line-height: 9.33vw;}
    .fac-pager .swiper-pagination-bullet {width: 0.93vw; height: 0.93vw; margin: 0 0.93vw !important; background: rgba(153,153,153,.6);}
    .fac-pager .swiper-pagination-bullet-active {width: 1.87vw; height: 1.87vw; background: #194052;} 

    .slide-info {background: rgba(34,34,34,.8);}
    .slide-info__box {width: calc(100% - 8.00vw); max-height: calc(100% - 8.00vw);}
    .info-close {font-size: 6.67vw; right: 4.67vw; top: 4.67vw;}
    .slide-info__tit {width: 100%; height: 13.33vw; margin-top: 10.67vw;}
    .slide-info__tit h4 {font-size: 6.67vw; margin-bottom: 2.00vw;}
    .slide-info__tit h5 {font-size: 3.73vw;}
    .info-txt {width: calc(100% - 10.67vw); margin: 5.33vw 5.33vw 8.00vw; height: 100%; padding-right: 2.67vw; font-size: 2.67vw; line-height: 4.00vw; text-align: center;}

}

/* ===============================================================
    * preview-page
=============================================================== */
.preview-page {display: none;}
.preview-box {position: relative; width: calc(100% / 3); height: 100%;}
.preview-box.bg-img {background-size: auto 100%; transition: .3s;}
.preview-box:after {content: ''; position: absolute; left: 0; right: 0; top: 0; bottom: 0; background: rgba(34,34,34,.5); transition: .3s;}
.preview-box a {position: relative; z-index: 1;}
.preview-tit {position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); color: #fff;}
.preview-tit h2 {font-size: 40px; letter-spacing: 0.1em; margin-bottom: 20px;}
.preview-tit p {font-size: 22px; opacity: 0.6;}
.preview-box:hover:after {background: rgba(34,34,34,.8);}
.preview-box:hover {background-size: auto 110%;}
@media (max-width: 820px){
    .preview-page {width: 100%; height: 100vh; display: block;}
    .preview-box {width: 100%; height: 33.33%;}
    .preview-box.bg-img {background-size: cover;}
    .preview-tit h2 {font-size: 8.00vw; margin-bottom: 2.67vw;}
    .preview-tit p {font-size: 4.27vw;}
}