@font-face {
  font-family: 'MyCustomFont';
  src: url('../fonts/AdobeHeitiStd-Regular.otf') format('otf');
 font-weight: normal;
  font-style: normal;
  font-display: swap;
}
 
*,body {
    margin:0;
    padding:0;
  font-family: 'MyCustomFont', sans-serif;
}



@-webkit-keyframes slide-next-page {
    0% {
        -webkit-transform: translateY(-.26rem);
        transform: translateY(-.26rem);
        opacity: 1
    }

    to {
        -webkit-transform: translateY(-.56rem);
        transform: translateY(-.56rem);
        opacity: 0
    }
}

@keyframes slide-next-page {
    0% {
        -webkit-transform: translateY(-.26rem);
        transform: translateY(-.26rem);
        opacity: 1
    }

    to {
        -webkit-transform: translateY(-.56rem);
        transform: translateY(-.56rem);
        opacity: 0
    }
}

@-webkit-keyframes slide-next-page-h {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }

    to {
        -webkit-transform: translateX(.3rem);
        transform: translateX(.3rem);
        opacity: 0
    }
}

@keyframes slide-next-page-h {
    0% {
        -webkit-transform: translateX(0);
        transform: translateX(0);
        opacity: 1
    }

    to {
        -webkit-transform: translateX(.3rem);
        transform: translateX(.3rem);
        opacity: 0
    }
}
.paging-circle1{
   background: #fff;
  
    border-radius: 50%;
  margin-left:-5px;
    height: 0.8em;
    width: 0.8em;
   bottom: 80px; 
   z-index:3;
   position: fixed;
    left: 50%;
}
.paging-circle2{
   background: #fff;
   margin-left:-5px;
    border-radius: 50%;
      opacity: 0.6;
   height: 0.8em;
    width: 0.8em;
   bottom: 100px; 
   z-index:3;
   position: fixed;
    left: 50%;
}

.paging-icon {
    position: fixed;
    left: 50%;
    bottom: 32px;
    margin-left: -25px;
    z-index: 4;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    width: 50px;
    height: 50px;
    -webkit-animation: slide-next-page 1.5s linear infinite;
    animation: slide-next-page 1.5s linear infinite;
    cursor: pointer
}

.paging-icon:after,.paging-icon:before {
    content: "";
    width: 14px;
    height: 14px;
    -webkit-box-shadow: 2px -2px 1px 2px rgba(0,0,0,.08);
    box-shadow: 2px -2px 1px 2px rgba(0,0,0,.08);
    border-color: #fff;
    border-style: solid;
    border-width: 4px 4px 0 0;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg)
}

.paging-icon:before {
    margin-top: -3px;
    border-color: hsla(0,0%,100%,.3)
}
.paging-icon--h {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-animation-name: slide-next-page-h;
    animation-name: slide-next-page-h
}

.paging-icon--h:after,.paging-icon--h:before {
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg)
}

.paging-icon--h:before {
    margin-top: 0;
    margin-right: -2px
}

.paging-icon--absolute {
    position: absolute
}