/* ===============================================================
    * preview-page
=============================================================== */
.preview-page {width: 100%; height: 100vh; display: flex; justify-content: space-between; align-items: center;}
.preview-box {position: relative; width: calc(100% / 4); 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: 16px; 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 {height: calc(100vh - 13.33vw); display: block;}
    .preview-box {width: 100%; height: 25%;}
    .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;}
}