/*==============================================
    GENERAL  STYLES    
    =============================================*/
body {
    font-family: 'Open Sans', sans-serif;
    margin: 0px;
}

.bg-color-green {
background-color: #00CE6F;
color: #fff;
}
.bg-color-blue {
background-color: #A95DF0;
color: #fff;
}
.bg-color-red {
background-color: #DB0630;
color: #fff;
}
.bg-color-brown {
background-color: #B94A00;
color: #fff;
}
@keyframes width-fade-out1_0{
    from {width: 1;}
    to {width: 0;}
}

@keyframes height-fade-out1_0{
    from {height: 1;}
    to {height: 0;}
}
/*=========动画CSS==============*/

@keyframes viewer-fade-out10_0 {
    from {opacity: 1;}
    to {opacity: 0;}
}
@keyframes viewer-fade-out9_0 {
    from {opacity: 0.9;}
    to {opacity: 0;}
}
@keyframes viewer-fade-out8_0 {
    from {opacity: 0.8;}
    to {opacity: 0;}
}
@keyframes viewer-fade-out7_0 {
    from {opacity: 0.7;}
    to {opacity: 0;}
}
@keyframes viewer-fade-out6_0 {
    from {opacity: 0.6;}
    to {opacity: 0;}
}
@keyframes viewer-fade-out5_0 {
    from {opacity: 0.5;}
    to {opacity: 0;}
}
@keyframes viewer-fade-out0_10 {
    from {opacity: 0;}
    to {opacity: 1;}
}
@keyframes viewer-fade-out0_9 {
    from {opacity: 0;}
    to {opacity: 0.9;}
}
@keyframes viewer-fade-out0_8 {
    from {opacity: 0;}
    to {opacity: 0.8;}
}
@keyframes viewer-fade-out0_7 {
    from {opacity: 0;}
    to {opacity: 0.7;}
}
@keyframes viewer-fade-out0_6 {
    from {opacity: 0;}
    to {opacity: 0.6;}
}
@keyframes viewer-fade-out0_5 {
    from {opacity: 0;}
    to {opacity: 0.5;}
}
@keyframes viewer-fade-out10_1 {
    from {opacity: 1;}
    to {opacity: 0.1;}
}

@keyframes viewer-fade-out9_1 {
    from {opacity: 0.9;}
    to {opacity: 0.1;}
}

@keyframes viewer-fade-out8_1 {
    from {opacity: 0.8;}
    to {opacity: 0.1;}
}

@keyframes viewer-fade-out7_1 {
    from {opacity: 0.7;}
    to {opacity: 0.1;}
}
@keyframes viewer-fade-out6_1 {
    from {opacity: 0.6;}
    to {opacity: 0.1;}
}

@keyframes viewer-fade-out10_2 {
    from {opacity: 1;}
    to {opacity: 0.2;}
}

@keyframes viewer-fade-out9_2 {
    from {opacity: 0.9;}
    to {opacity: 0.2;}
}

@keyframes viewer-fade-out8_2 {
    from {opacity: 0.8;}
    to {opacity: 0.2;}
}

@keyframes viewer-fade-out7_2 {
    from {opacity: 0.7;}
    to {opacity: 0.2;}
}

@keyframes viewer-fade-out10_3 {
    from {opacity: 1;}
    to {opacity: 0.3;}
}

@keyframes viewer-fade-out9_3 {
    from {opacity: 0.9;}
    to {opacity: 0.3;}
}

@keyframes viewer-fade-out8_3 {
    from {opacity: 0.8;}
    to {opacity: 0.3;}
}

@keyframes viewer-fade-out10_4 {
    from {opacity: 1;}
    to {opacity: 0.4;}
}
@keyframes viewer-fade-out9_4 {
    from {opacity: 0.9;}
    to {opacity: 0.4;}
}

@keyframes viewer-fade-out10_5 {
    from {opacity: 1;}
    to {opacity: 0.5;}
}
@keyframes viewer-fade-out5_10 {
    from {opacity: 0.5;}
    to {opacity: 1;}
}

.widget.parentDiv{
    animation: viewer-fade-out5_10 0.6s; /* 动画名称、持续时间 */
}