//=======================================
//  reset styles
//=======================================
html {
    box-sizing: border-box;
    font-size: 12px;
    font-family: Helvetica, 'Microsoft YaHei', STXihei, sans-serif;
    font-weight: 400;
    height: 100%;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
    font-family: Helvetica, 'Microsoft YaHei', STXihei, sans-serif;
    display: block;
}

ol,
ul {
    list-style: none;
}

fieldset,
a {
    text-decoration: none;
    color: #000;
}

img {
    border: 0;
    height: auto;
    width: 100%;
}

button,
input {
    line-height: normal;
}

.clear-float:after {
    content: '';
    display: block;
    clear: both;
}

//=======================================
// Global
//=======================================
#app {
    height: 100%;
}

.hover-1 {
    transition: color .6s !important;
}

.hover-1:hover {
    color: #f9934e !important;
}

//=======================================
// Vue animations
//=======================================

// fade
//---------------------------------------
.fade-enter-active {
    animation: fadeIn 400ms
}

.fade-leave-active {
    animation: fadeOut 400ms
}

//=======================================
// Drop Menu animations
//=======================================
.drop-menu > li {
    display: none;
}

.drop-title:hover .drop-menu > li {
    display: block;
}

// style1
//---------------------------------------
.animation-style-1 > li {
    opacity: 0;
    animation-name: animationStyle1;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    @for $i from 1 through 10 {
        &:nth-child(#{$i}) {
            animation-duration: 300ms * $i;
        }
    }
}

// style2
//---------------------------------------
.animation-style-2 > li {
    opacity: 0;
    animation-name: animationStyle2;
    transform-origin:top center;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    @for $i from 1 through 10 {
        &:nth-child(#{$i}) {
            animation-duration: 300ms * $i;
            animation-delay: (150ms * $i) - 300;
        }
    }
}

// style3
//---------------------------------------
.animation-style-3 {
    animation: fadeIn 400ms
}

// style4
//---------------------------------------
.animation-style-4  >li {
    opacity: 0;
    animation-name: animationStyle4;
    animation-duration: 300ms;
    transform-origin: top right;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
    @for $i from 1 through 10 {
        &:nth-child(#{$i}){
            animation-delay: (150ms * $i) - 300;
        }
    }
}


//=======================================
//  keyframes
//=======================================
@keyframes animationStyle1 {
    0% {
        opacity: 0;
        transform: rotateY(-90deg) translate3d(0, 30px, 0);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg) translate3d(0, 0, 0);
    }
}

@keyframes animationStyle2 {
    0% {
        opacity: 0;
        transform: rotateX(-90deg);
    }
    100% {
        opacity: 1;
        transform: rotate(0deg);
    }
}

@keyframes animationStyle4 {
    0%{
        opacity:0;
        transform: rotate(-30deg);
    }
    100%{
        opacity:1;
        transform: rotate(0deg);
    }
}
@keyframes fadeIn {
    0% {
        opacity: 0;
        transform: rotateX(-90deg) rotateY(-90deg) translate3d(-50%, 50px, 0);
    }
    100% {
        opacity: 1;
        transform: rotateX(0deg) rotateY(0deg) translate3d(-50%, -50%, 0);
    }
}

@keyframes fadeOut {
    0% {
        opacity: 1;
        transform: rotateX(0deg) rotateY(0deg) translate3d(-50%, -50%, 0);
    }
    100% {
        opacity: 0;
        transform: rotateX(-90deg) rotateY(90deg) translate3d(-50%, 50px, 0);
    }
}

//=======================================
//  scrollbar styles
//=======================================
::-webkit-scrollbar {
    width: 15px;
}

::-webkit-scrollbar-track {
    display: none;
}

::-webkit-scrollbar-track-piece {
    background-color: #4a473c;
}

::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-button {
    background-color: red;
}