.wrap {margin: 0 auto; width: 95%;}
.wrap[max='1920'] {max-width: 1920px;}
.wrap[max='1784'] {max-width: 1784px;}
.wrap[max='1708'] {max-width: 1708px;}
.wrap[max='1571'] {max-width: 1571px;}
.wrap[max='1440'] {max-width: 1440px;}
.wrap[max='800'] {max-width: 800px;}
.wrap.full {width: 100%;}


.viewBtn {display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 18px; font-weight: 500; letter-spacing: 0.025em; font-family: 'Ubuntu'; position: relative; padding: calc(25/18*1em) calc(50/18*1em);}
.viewBtn::before,
.viewBtn::after {content: ''; position: absolute; width: 100%; height: 50%; background: #000; z-index: -1; transition: .15s;}
.viewBtn::before {transform: translateX(calc(-25/24*1em)); left: 0; top: 0;}
.viewBtn::after {transform: translateX(calc(25/24*1em)); right: 0; bottom: 0;}
.viewBtn:hover::before {transform: translateX(0%);}
.viewBtn:hover::after {transform: translateX(0%);}
@media screen and (max-width: 1440px) {
    .viewBtn {font-size: clamp(16px, 16/1280*100vw, 18px);}
}
@media screen and (max-width: 1280px) {
    .viewBtn {font-size: clamp(14px, 14/1024*100vw, 16px);}
}
@media screen and (max-width: 1024px) {
    .viewBtn {font-size: clamp(12px, 12/820*100vw, 14px);}
}