*{
    margin: 0; 
    padding: 0; 
    color: #282828; 
    font-size: 16px; 
    font-family: 微软雅黑;
}
a {
    text-decoration: none;
    color: #000000;
}

li {
    list-style: none;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.column-center{
    display: flex;
    align-items: center;
}

.row-center{
    display: flex;
    justify-content: center;
}

.flex-row {
    display: flex;
    flex-direction: row;
}
.flex-column{
    display: flex;
    flex-direction: column;
}

.flex-between {
    display: flex;
    justify-content: space-between;
}
.flex-wraps{
    display: flex;
    flex-wrap: wrap;
}
.flex-around{
    display: flex;
    justify-content: space-around;
}

.row-end{
    display: flex;
    justify-content: flex-end;
}
.column-end{
    display: flex;
    align-items: flex-end;
}


@keyframes myfirst_animate
    {
        0%{
            opacity: 0;
             
        }
        10%{
            opacity: 0;
            transform: scale(1.09); 
        }
        10%{
            opacity: 0.1;
            transform: scale(1.08); 
        }
        20%{
            opacity: 0.2;
            transform: scale(1.07); 
        }
        30%{
            opacity: 0.4;
            transform: scale(1.06); 
        }
        50%{
            opacity: 0.5;
            transform: scale(1.05); 
        }
        60%{
            opacity: 0.6;
            transform: scale(1.04); 
        }
        70%{
            opacity: 0.7;
            transform: scale(1.03); 
        }
        80%{
            opacity: 0.8;
            transform: scale(1.02); 
        }
        90%{
            opacity: 0.9;
            transform: scale(1.01); 
        }
      
        100%{
            transform: scale(1);
            opacity: 1;
        }
    }

    .active_animate{
        animation:myfirst_animate 2s linear;
       
    }



    /* 本例子css */
	.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
	.navBar{  position:relative; z-index:1;   height:60px; line-height:60px;  color:#282828;   }
	.nav{ position:relative; margin:0 auto;  font-family:"Microsoft YaHei",SimSun,SimHei; font-size:14px; }
    .nav a{ color:#282828;  }
    .nav>li>h3>a:hover{color: #418dd1;}
    .nav>li:first-of-type a{color: #418dd1;}
	.nav h3{ font-size:100%; font-weight:normal;   }
	.nav .m{ float:left;  position:relative; z-index:1; }
	.nav .s{ float:left; width:3px; text-align:center; color:#D4D4D4; font-size:12px; }
	.nav h3 a{ display:block; width:110px; text-align:center;  font-size: 18px;}
	.nav .sub{ display:none; /*默认隐藏*/  position:absolute; left:-13px; top:60px; z-index:1; width:128px; border:1px solid #E6E4E3; border-radius: 8px;  background:#fff; }
	.nav .sub li{ text-align:center; padding:0 8px; margin-bottom:-1px;   }
	.nav .sub li a{ display:block;  border-bottom:1px solid #E6E4E3; padding:8px 0; height:28px; line-height:28px; color:#666;   }
	.nav .sub li a:hover{ color:#418dd1;   }
    .nav .block{ height:3px; width:30px; background:#418dd1; position:absolute; left:0; top:50px; overflow:hidden;  }
    





    /*
        测试右侧导航
    */
    .full-nav{
        display: block;
        position: absolute;
        left: 30px;
        top: 50%;
    }
    .full-nav>li{
        width: 150px;
        height: 25px;
        padding: 1px 0;
        border-radius: 18px;
    }
    .full-nav-yuan{
        width:10px;
        height: 10px;
        border-radius: 50%;
        background-color: rgba(225, 225, 225, 0.6);
        /* background-color: #418dd1; */
        margin: 0 15px 0 10px;
    }
    .full-nav-name{
        color: #418dd1;
        font-size: 16px;
        font-weight: bold;
        display: none;
    }
    .active-full-li{
        /* width: 15px;
        height: 15px;
        background: rgba(225, 225, 225, 0.6);
        cursor: pointer;
        border-radius: 50%;
        margin-bottom: 15px; */
        background-color: #ffffff;
        width: 150px;
        padding: 1px 0;
        border-radius: 18px;
    }
    .active-full-li .full-nav-yuan{
        width:10px;
        height: 10px;
        border-radius: 50%;
        /* background: rgba(225, 225, 225, 0.6); */
        background-color: #418dd1;
        margin: 0 15px 0 10px;
    }
    .active-full-li .full-nav-name{
        color: #418dd1;
        font-size: 16px;
        font-weight: bold;
        display: inline-block;
    }


    @keyframes zhuan
	{
		0% {transform: rotate(0deg)}
		100% {transform: rotate(360deg)}
	}