html {
    font-size: 13.33333vw
}


a:active {
    -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
    -webkit-user-select: none;
    -moz-user-focus: none;
    -moz-user-select: none;
}

@media screen and (max-width: 320px) {
    html {
        font-size: 42.667PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 321px) and (max-width:360px) {
    html {
        font-size: 48PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 361px) and (max-width:375px) {
    html {
        font-size: 50PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 376px) and (max-width:393px) {
    html {
        font-size: 52.4PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 394px) and (max-width:412px) {
    html {
        font-size: 54.93PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 413px) and (max-width:414px) {
    html {
        font-size: 55.2PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 415px) and (max-width:480px) {
    html {
        font-size: 64PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 481px) and (max-width:540px) {
    html {
        font-size: 72PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 541px) and (max-width:640px) {
    html {
        font-size: 85.33PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 641px) and (max-width:720px) {
    html {
        font-size: 96PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 721px) and (max-width:768px) {
    html {
        font-size: 102.4PX;
        font-size: 13.33333vw
    }
}

@media screen and (min-width: 769px) {
    html {
        font-size: 102.4PX;

        #app {
            width: 768PX;
            margin: 0 auto
        }
    }
}

.clearfix:after {
    display: block;
    clear: both;
    content: "";
    visibility: hidden;
    height: 0
}

input,
button,
select,
textarea,
a {
    border: none;
    outline: none
}

/* page change */
$--transition-time: 350ms;

.back-enter-active,
.back-leave-active,
.forward-enter-active,
.forward-leave-active {
    will-change: transform;
    transition: all $--transition-time;
    position: absolute;
    height: 100%;
    backface-visibility: hidden;
    perspective: 1000;
}

.back-enter {
    opacity: 0.75;
    transform: translate3d(-35%, 0, 0) !important;
}

.back-enter-active {
    z-index: -1 !important;
    transition: all $--transition-time linear;
}

.back-leave-active {
    transform: translate3d(100%, 0, 0) !important;
    transition: all $--transition-time linear;
}

.forward-enter {
    transform: translate3d(100%, 0, 0) !important;
}

.forward-enter-active {
    transition: all $--transition-time linear;
}

.forward-leave-active {
    z-index: -1;
    opacity: 0.65;
    transform: translate3d(-35%, 0, 0) !important;
    transition: all $--transition-time linear;
}

.slide-left-leave-active,
.slide-right-leave-active,
.slide-left-enter-active,
.slide-right-enter-active {
    // transition: all 3S;
    transition: all $--transition-time;
}

.slide-right-enter {
    transform: translate(-100%, 0);
}

.slide-right-leave-active {
    transform: translate(100%, 0);
}

.slide-left-enter {
    transform: translate(100%, 0);
}

.slide-left-leave-active {
    transform: translate(-100%, 0);
}


$easeInSine: cubic-bezier(0.47, 0, 0.745, 0.715);
$easeOutSine: cubic-bezier(0.39, 0.575, 0.565, 1);
$easeInOutSine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
$easeInQuad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
$easeOutQuad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
$easeInOutQuad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
$easeInCubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
$easeOutCubic: cubic-bezier(0.215, 0.61, 0.355, 1);
$easeInOutCubic: cubic-bezier(0.645, 0.045, 0.355, 1);
$easeInQuart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
$easeOutQuart: cubic-bezier(0.165, 0.84, 0.44, 1);
$easeInOutQuart: cubic-bezier(0.77, 0, 0.175, 1);
$easeInQuint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
$easeOutQuint: cubic-bezier(0.23, 1, 0.32, 1);
$easeInOutQuint: cubic-bezier(0.86, 0, 0.07, 1);
$easeInExpo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
$easeOutExpo: cubic-bezier(0.19, 1, 0.22, 1);
$easeInOutExpo: cubic-bezier(1, 0, 0, 1);
$easeInCirc: cubic-bezier(0.6, 0.04, 0.98, 0.335);
$easeOutCirc: cubic-bezier(0.075, 0.82, 0.165, 1);
$easeInOutCirc: cubic-bezier(0.785, 0.135, 0.15, 0.86);
$easeInBack: cubic-bezier(0.6, -0.28, 0.735, 0.045);
$easeOutBack: cubic-bezier(0.175, 0.885, 0.32, 1.275);
$easeInOutBack: cubic-bezier(0.68, -0.55, 0.265, 1.55);



.fade-enter-active {
    transition: all 0.5s $easeOutCirc;

    .catalogue {
        transition: all 0.35s $easeOutCubic;
    }
}

.fade-leave-active {
    transition: all 0.35s $easeInOutQuart;

    .catalogue {
        transition: all 0.35s;
    }
}

.fade-enter,
.fade-leave-to {
    opacity: 0;

    .catalogue {
        transform: scale(0.2);

        // .closeBtn {
        //     transform: scale(0.2);
        // }

    }

}

html .bscroll-vertical-scrollbar {
    background-color: rgb(239, 171, 63);
    width: 7px !important;
    bottom: 30px !important;
    top: 40px !important;
    right: 13px !important;
    // overflow-x: visible;

    // .bscroll-indicator {
    //     box-sizing: border-box;
    //     position: absolute;
    //     border: none !important;

    //     border-radius: 50% !important;
    //     background-color: # !important;
    //     width: 16px !important;
    //     height: 16px !important;

    // }
}



.miniScreen {

    // transform: translateY(60px);
    .catalogue {
        transform-origin: 50% 50% !important;
        transform: scale(0.97);

        // .closeBtn {
        //     transform: scale(0.2);
        // }

    }

    .catalogue2 {

        transform: scale(0.95);
    }

    .sharePop .catalogue {

        transform: scale(0.92);
    }

    .winCon {

        transform: scale(0.77) !important;
    }

    .failCon {

        transform: scale(0.9) !important;
    }
}



.btn-ani {
    transition: all 0.15s linear;
}

.btn-ani-right {
    animation: btn-ani-right 0.3s ease-in-out;
}

.btn-ani-left {
    animation: btn-ani-left 0.3s ease-in-out;
}

.btn-ani-up {
    animation: btn-ani-up 0.3s ease-in-out;
}

.btn-ani-down {
    animation: btn-ani-down 0.3s ease-in-out;
}

.btn-ani-big {
    animation: btn-ani-big 0.3s ease-in-out;
}

@keyframes btn-ani-right {
    50% {
        transform: translateX(10px);
    }
}

@keyframes btn-ani-left {
    50% {
        transform: translateX(-10px);
    }
}

@keyframes btn-ani-up {
    50% {
        transform: translateY(10px);
    }
}

@keyframes btn-ani-down {
    50% {
        transform: translateY(-10px);
    }
}

@keyframes btn-ani-big {
    50% {
        transform: scale(0.92);
    }
}