:root {
	--cordova-keyboardheight:300px;
}
html, body {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}
/* popview defauilt setting */
#napp-view {
  position: relative;
  width: 100vw;
  height: 100vh;
	z-index: 1;
	background-color: inherit;
}#napp-view > .napp-view {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	right: 0;
  width: 100vw;
	height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
/*  overflow: hidden;*/
  -webkit-overflow-scrolling: unset;
	background-color: inherit;
}#napp-view > .napp-view.activeback {
  z-index: 2;
}#napp-view > .napp-view.active {
	z-index: 3;
/*  overflow: auto;*/
  -webkit-overflow-scrolling: touch;
}
/* cordova keyboard setting */
#napp-view > [keyboardheight].napp-view.active > main:after {
	content:'';
  display:table !important;
  height:var(--cordova-keyboardheight) !important;
}

/* napp-slide-view */
.napp-slide-view, .napp-slide-view .carousel-inner, .napp-slide-view .carousel-item {
  height: auto;
}.napp-slide-view .carousel-item .napp-view {
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
}.napp-slide-view .carousel-item {
  -webkit-transform: translateX(0);
  transform: translateX(0);
  transition: -webkit-transform 0.3s ease-out;
  transition: transform 0.3s ease-out;
  transition: transform 0.3s ease-out,-webkit-transform 0.3s ease-out;
}.napp-slide-view .carousel-item.carousel-item-left.active, .napp-slide-view .carousel-item.carousel-item-right.active {
  transition-delay: 0.1s;
}.napp-slide-view .carousel-item-next:not(.carousel-item-left),
 .napp-slide-view .active.carousel-item-right {
  z-index: 1;
  -webkit-transform: translateX(100%);
  transform: translateX(100%);
}.napp-slide-view .carousel-item-prev:not(.carousel-item-right),
 .napp-slide-view .active.carousel-item-left {
  z-index: 1;
  -webkit-transform: translateX(-100%);
  transform: translateX(-100%);
}.napp-slide-view .carousel-item-prev,
 .napp-slide-view .carousel-item-next {
  z-index: 2;
}

/* napp-top */
#napp-view > .napp-view.napp-top {
  z-index: 1000;
  animation-duration: 0ms;
  -webkit-transform: translate3d(0, 120%, 0);
  transform: translate3d(0, 120%, 0);
}#napp-view > .napp-view.napp-top.active{
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
}#napp-view > .napp-view.napp-top main{
  bottom: 0px !important;
}

/* util */
/* 클릭방지 */ #napp-view > .napp-view.activeback:after { 
  content:'';
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100vh;
  height: calc(var(--vh, 1vh) * 100);
  background-color:rgba(0,0,0,0.0);
  display: block;
}

/* animation */
#napp-view > .napp-view.napp-animation {
  -webkit-animation-duration: 300ms;
  animation-duration: 300ms;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  box-shadow: 0 0 2rem rgba(0, 0, 0, .15) !important; 
  -webkit-box-shadow: 0 0 2rem rgba(0, 0, 0, .15) !important;
  -moz-box-shadow: 0 0 2rem rgba(0, 0, 0, .15) !important; 
  -ms-box-shadow: 0 0 2rem rgba(0, 0, 0, .15) !important; 
}

/* slideup */
@-webkit-keyframes napp-slideup {
  from {
    -webkit-transform: translate3d(0, 120%, 0);
    transform: translate3d(0, 120%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes napp-slideup {
  from {
    -webkit-transform: translate3d(0, 120%, 0);
    transform: translate3d(0, 120%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
#napp-view .napp-slideup.active {
  -webkit-animation-name: napp-slideup;
  animation-name: napp-slideup;
}
@-webkit-keyframes napp-slideup-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 120%, 0);
    transform: translate3d(0, 120%, 0);
  }
}
@keyframes napp-slideup-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 120%, 0);
    transform: translate3d(0, 120%, 0);
  }
}
#napp-view .napp-slideup {
  -webkit-animation-name: napp-slideup-out;
  animation-name: napp-slideup-out;
}


/* slidedown */
@-webkit-keyframes napp-slidedown {
  from {
    -webkit-transform: translate3d(0, -120%, 0);
    transform: translate3d(0, -120%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes napp-slidedown {
  from {
    -webkit-transform: translate3d(0, -120%, 0);
    transform: translate3d(0, -120%, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
#napp-view .napp-slidedown.active {
  -webkit-animation-name: napp-slidedown;
  animation-name: napp-slidedown;
}
@-webkit-keyframes napp-slidedown-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, -120%, 0);
    transform: translate3d(0, -120%, 0);
  }
}
@keyframes napp-slidedown-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, -120%, 0);
    transform: translate3d(0, -120%, 0);
  }
}
#napp-view .napp-slidedown {
  -webkit-animation-name: napp-slidedown-out;
  animation-name: napp-slidedown-out;
}


/* slideleft */
@-webkit-keyframes napp-slideleft {
  from {
    -webkit-transform: translate3d(120%, 0, 0);
    transform: translate3d(120%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes napp-slideleft {
  from {
    -webkit-transform: translate3d(120%, 0, 0);
    transform: translate3d(120%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
#napp-view .napp-slideleft.active {
  -webkit-animation-name: napp-slideleft;
  animation-name: napp-slideleft;
}
@-webkit-keyframes napp-slideleft-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(120%, 0, 0);
    transform: translate3d(120%, 0, 0);
  }
}
@keyframes napp-slideleft-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(120%, 0, 0);
    transform: translate3d(120%, 0, 0);
  }
}
#napp-view .napp-slideleft {
  -webkit-animation-name: napp-slideleft-out;
  animation-name: napp-slideleft-out;
}

/* slideright */
@-webkit-keyframes napp-slideright {
  from {
    -webkit-transform: translate3d(-120%, 0, 0);
    transform: translate3d(-120%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes napp-slideright {
  from {
    -webkit-transform: translate3d(-120%, 0, 0);
    transform: translate3d(-120%, 0, 0);
  }
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
#napp-view .napp-slideright.active {
  -webkit-animation-name: napp-slideright;
  animation-name: napp-slideright;
}
@-webkit-keyframes napp-slideright-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-120%, 0, 0);
    transform: translate3d(-120%, 0, 0);
  }
}
@keyframes napp-slideright-out {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  to {
    -webkit-transform: translate3d(-120%, 0, 0);
    transform: translate3d(-120%, 0, 0);
  }
}
#napp-view .napp-slideright {
  -webkit-animation-name: napp-slideright-out;
  animation-name: napp-slideright-out;
}


/* napp-splash */
#napp-splash {
	position:fixed;
	display:flex;
	justify-content: center;
	align-items: center;
	top:0;
	left:0;
	right:0;
	bottom:0;
	background-color:#f8f4f1;
	z-index:9;
}#napp-splash > img.napp-splash-brandlogo {
	width:200px;
	margin-bottom:50px;
}#napp-splash > .napp-splash-company {
	position:absolute;
	left:0;
	right:0;
	bottom:50px;
	text-align:center;
}#napp-splash > .napp-splash-company > img {
	width:180px;
}


/* keyboard */
[keyboard]{
	transition: all ease 0.5s; -webkit-transition: all ease 0.5s; -moz-transition: all ease 0.5s; -ms-transition: all ease 0.5s;
}