*{
	margin:0;
	padding:0;
	max-width: 100%;
}

.banner {
	width: calc(100vw*300/1920);
	aspect-ratio: 300/250;
	bottom:0;
	right:0;
	position:fixed;
	z-index:1;
}

.close {
    width: max(calc(100vw*24/1920),16px);
    height: max(calc(100vw*24/1920),16px);
    position: absolute;
    top: 2%;
    right: 8%;
    cursor: pointer;
    z-index: 11111;
}

#vmc-apps-ad {
    overflow: hidden;

}

#vmc-apps-perspective-layer {
    cursor: pointer;
    perspective: 700px;
    user-select: none;
    -webkit-user-select: none;
    width: calc(100vw*300/1920);
	aspect-ratio: 300/210;
}

.vmc-apps-rotation-layer {
    position: absolute;
    transform-style: preserve-3d;
    transition: transform .5s ease-in-out;
    width: 100%;
	height: 100%;
}

.vmc-apps-rotation-layer.bounce-to-left {
    animation: bounce-from-edge-to-left .3s;
}

@keyframes bounce-from-edge-to-left {
    0% {right: 0}
    10% {right: 10%}
    30% {right: 13%}
    100% {right: 0}
}

.vmc-apps-rotation-layer.bounce-to-right {
    animation: bounce-from-edge-to-right .3s;

}
@keyframes bounce-from-edge-to-right {
    0% {left: 0}
    10% {left: 10%}
    30% {left: 13%}
    100% {left: 0}
}
  
.vmc-apps-layer-3d {
    position: absolute;
    top: 0;
    width: 300px;
}
  
.vmc-apps-layer-background, .vmc-apps-layer-center, .vmc-apps-layer-foreground {
    pointer-events: none;
    position: absolute;
    transform-origin: bottom;
    top: 0;
    user-select: none;
    -webkit-user-select: none;
    width: 300px;
}

.vmc-apps-layer-center {
    transform: translateZ(66px);
}

.vmc-apps-layer-foreground {
    transform: translateZ(120px);
}
  
.vmc-apps-navigation {
    cursor: pointer;
    display: block;
    position: absolute;   
    transform: translateZ(120px);
    max-width: calc(100vw*42/1920);
	bottom: calc(100vw*5/1920);
}

.vmc-apps-navigation.type-next {
    left: calc(100vw*160/1920);
}

.vmc-apps-navigation.type-prev {
    left: calc(100vw*110/1920);
    transform: translateZ(120px) scale(-1, 1);
}
  
.vmc-apps-navigation.hide-navigation {
    display: none;
}

.background {
    border-radius: calc(100vw*15/1920);
    calc(100vw*-3/1920) calc(100vw*9/1920) calc(100vw*9/1920) rgba(0, 0, 0, 0.3)
    top: 5%;
    transition: left .2s cubic-bezier(0.6, 0.73, 0.46, 1.38);
    width: 84%;
}
  
.content {
    top: 0%;
    transition: left .3s cubic-bezier(0.6, 0.73, 0.46, 1.38);
    width: 84%;
}
  
.foreground {
    top: 5%;
    transition: left .3s cubic-bezier(0.6, 0.73, 0.46, 1.38) .1s;
    width: 84%;
}
  
  /* ========== Position for left, show & right ========== */
  
.right .vmc-apps-layer-background, .right .vmc-apps-layer-center, .right .vmc-apps-layer-foreground {
    left: 110%;
}

.left .vmc-apps-layer-background, .left .vmc-apps-layer-center, .left .vmc-apps-layer-foreground {
    left: -110%;
}
  
.show .background {
    left: calc(100vw*30/1920);
}

.show .content {
    left: calc(100vw*30/1920);
}

.show .foreground {
    left: calc(100vw*30/1920);
}