:root{
--default-primary-color: #333333;
--default-secondary-color: #777777;
--primary-text-color: #333333;
--secondary-text-color: #666666;
--third-text-color: #999999;
--decoration-text-color: #dddddd;
--primary-bg-color: #333333;
--secondary-bg-color: #666666;
--decoration-bg-color: #eeeeee;
--primary-color: #296db6;
--secondary-color: #ff5024;
/* --primary-color: #00233f;
--secondary-color: #de0000; */
--decoration-color: #f7ba11;
--primary-hover-color: #3d81c9;
--primary-light-hover-color: #296db60f;
--secondary-hover-color: #ff6640;
/* --primary-hover-color: #012a4a;
--secondary-hover-color: #e42b2b; */
}
::selection{
color: #ffffff;
background-color: var(--secondary-color);
}
*{ 
margin: 0; 
padding: 0;
font-family: "Helvetica Neue",Helvetica,"PingFang SC",PingHei,STHeitiSC-Light,"Myriad Set Pro","Lucida Grande","microsoft yahei",SimHei,tahoma,Arial,Verdana,sans-serif;
list-style: none;
}
a{
text-decoration: none;
}
a:visited{
/* color: #333333; */
}
.clearfix::after{
clear: both;
display: block;
content: "";
}
.t-a-c{
text-align: center;
}
.t-a-l{
text-align: left;
}
.t-a-r{
text-align: right;
}
.f-c-c{
display: flex;
justify-content: center;
align-items: center;
}
.f-s-c{
display: flex;
justify-content: flex-start;
align-items: center;
}
.f-e-c{
display: flex;
justify-content: flex-end;
align-items: center;
}
.f-s-s{
display: flex;
justify-content: flex-start;
align-items: flex-start;
}
.f-c-s{
display: flex;
justify-content: center;
align-items: flex-start;
}
.f-e-s{
display: flex;
justify-content: flex-end;
align-items: flex-start;
}
.f-c-e{
display: flex;
justify-content: center;
align-items: flex-end;
}
.f-b-c{
display: flex;
justify-content: space-between;
align-items: center;
}
.f-b-s{
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.f-b-e{
display: flex;
justify-content: space-between;
align-items: flex-end;
}
.f-row{
flex-direction: row;
}
.f-col{
flex-direction: column;
}
.f-wrap{
flex-wrap: wrap;
}
.v-top{
vertical-align: top;
}
.v-middle{
vertical-align: middle;
}
.v-bottom{
vertical-align: bottom;
}
.animated{
-webkit-animation-duration: .8s;
animation-duration: .8s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.fadeInUp{
-webkit-animation-name: fadeInUp;
animation-name: fadeInUp;
}
@keyframes fadeInUp{
0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 15px, 0);
    -ms-transform: translate3d(0, 15px, 0);
    transform: translate3d(0, 15px, 0);
}
100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}
}
.fadeInRight{
-webkit-animation-name: fadeInRight;
animation-name: fadeInRight;
}
@keyframes fadeInRight{
0% {
    opacity: 0;
    -webkit-transform: translate3d(-15px, 0, 0);
    -ms-transform: translate3d(-15px, 0, 0);
    transform: translate3d(-15px, 0, 0);
}
100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}
}
.fadeInLeft{
-webkit-animation-name: fadeInLeft;
animation-name: fadeInLeft;
}
@keyframes fadeInLeft{
0% {
    opacity: 0;
    -webkit-transform: translate3d(15px, 0, 0);
    -ms-transform: translate3d(15px, 0, 0);
    transform: translate3d(15px, 0, 0);
}
100% {
    opacity: 1;
    -webkit-transform: none;
    -ms-transform: none;
    transform: none;
}
}
@keyframes bounceAni{
    0% {
        transform: scale(1, 1);
    }
    25% {
        transform: scale(1.1, 0.9);
    }
    50% {
        transform: scale(0.9, 1.1);
    }
    75% {
        transform: scale(1.1, 0.9);
    }
    100% {
        transform: scale(1, 1);
    }
}
@keyframes bannerScroll{
    0% {
        transform: translateY(-8px);
        height: 8px;
    }
    50% {
        transform: translateY(8px);
        height: 10px;
    }
    100% {
        transform: translateY(-8px);
        height: 8px;
    }
    /* 0% {
        transform: translateY(0);
    }
    25% {
        transform: translateY(-8px);
    }
    50% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(8px);
    }
    100% {
        transform: translateY(0);
    } */
}