@media screen and (max-width: 768px) {
.offcanvas::-webkit-scrollbar ,.navContent::-webkit-scrollbar {width:0 !important;height: 0 !important;-ms-overflow-style: none;}/* 스크롤 바 */
.offcanvas {
  position: fixed;
  z-index: 1000;
  display: none;
  transform: translate3d(0, 0, 0);
  transition: transform 800ms cubic-bezier(0.645, 0.045, 0.355, 1)
}

.offcanvas--top {
  top: -360px;
  left: 0;
  width: 100vw;
  height: 360px
}

.offcanvas--top--active { transform: translate3d(0, 360px, 0) }

.offcanvas--right {
  top: 0;
  right: -360px;
  width: 360px;
  height: 100vh
}

.offcanvas--right--active { transform: translate3d(-360px, 0, 0) }

.offcanvas--bottom {
  bottom: -360px;
  left: 0;
  width: 100vw;
  height: 360px
}

.offcanvas--bottom--active { transform: translate3d(0, -360px, 0) }

.offcanvas--left {top: 0; left: -100%;width: 100%;height: 100%;}

.offcanvas--left--active { transform: translate3d(100%, 0, 0) }

.offcanvas--initialized { display: block }
.offcanvas{background:rgba(0,0,0,0.3);}
.background{width: 100%;height: 100%;position: fixed;}
}