/* reset css */
*{
    padding: 0;
    margin: 0;
}
a{
    text-decoration: none;
    cursor: pointer;
}
ul,li,ol{
    list-style: none;
}
body{
    background-color: #f1f2f6;
    font-size: 15px;
}
/* header */
header{
    height: 120px;
    background: url(../images/header_bg.jpg) no-repeat center;
    display: flex;
    padding: 0 3%;
    align-items: center;
    justify-content: space-between;
}
.logo{
    height: 100px;
}
nav{
    display: flex;
}
nav div{
    padding: 0 30px;
    position: relative;
    line-height: 40px;
}
nav div:hover{
    background: url(../images/nav_now_bg.png) no-repeat center bottom;
}
nav a{
    color: #fff;
}
.submenu{
    position: absolute;
    display: none;
    left: 0;
    width: 160px;
    z-index: 10;
    background-color: #36264a;
}
.submenu li{
    padding-left: 30px;
    transition: padding-left .5s;
}
.submenu li:hover{
    padding-left: 40px;
    background: #3498db url(../images/nav_li_bg.png) no-repeat right 5px center;
}

@keyframes su-pudding {
    0% {
        transform: scale(1.2, 0.8);
    }
    1% {
        transform: scale(1.18, 0.82);
    }
    2% {
        transform: scale(1.16, 0.84);
    }
    3% {
        transform: scale(1.13, 0.87);
    }
    4% {
        transform: scale(1.1, 0.9);
    }
    5% {
        transform: scale(1.07, 0.93);
    }
    6% {
        transform: scale(1.04, 0.96);
    }
    7% {
        transform: scale(1.01, 0.99);
    }
    8% {
        transform: scale(0.99, 1.01);
    }
    9% {
        transform: scale(0.97, 1.03);
    }
    10% {
        transform: scale(0.95, 1.05);
    }
    11% {
        transform: scale(0.94, 1.06);
    }
    12% {
        transform: scale(0.93, 1.07);
    }
    13% {
        transform: scale(0.93, 1.07);
    }
    14% {
        transform: scale(0.93, 1.07);
    }
    15% {
        transform: scale(0.93, 1.07);
    }
    16% {
        transform: scale(0.94, 1.06);
    }
    17% {
        transform: scale(0.94, 1.06);
    }
    18% {
        transform: scale(0.95, 1.05);
    }
    19% {
        transform: scale(0.96, 1.04);
    }
    20% {
        transform: scale(0.98, 1.02);
    }
    21% {
        transform: scale(0.99, 1.01);
    }
    22% {
        transform: scale(1, 1);
    }
    23% {
        transform: scale(1, 1);
    }
    24% {
        transform: scale(1.01, 0.99);
    }
    25% {
        transform: scale(1.02, 0.98);
    }
    26% {
        transform: scale(1.02, 0.98);
    }
    27% {
        transform: scale(1.02, 0.98);
    }
    28% {
        transform: scale(1.03, 0.97);
    }
    29% {
        transform: scale(1.03, 0.97);
    }
    30% {
        transform: scale(1.02, 0.98);
    }
    31% {
        transform: scale(1.02, 0.98);
    }
    32% {
        transform: scale(1.02, 0.98);
    }
    33% {
        transform: scale(1.02, 0.98);
    }
    34% {
        transform: scale(1.01, 0.99);
    }
    35% {
        transform: scale(1.01, 0.99);
    }
    36% {
        transform: scale(1.01, 0.99);
    }
    37% {
        transform: scale(1, 1);
    }
    38% {
        transform: scale(1, 1);
    }
    39% {
        transform: scale(1, 1);
    }
    40% {
        transform: scale(0.99, 1.01);
    }
    41% {
        transform: scale(0.99, 1.01);
    }
    42% {
        transform: scale(0.99, 1.01);
    }
    43% {
        transform: scale(0.99, 1.01);
    }
    44% {
        transform: scale(0.99, 1.01);
    }
    45% {
        transform: scale(0.99, 1.01);
    }
    46% {
        transform: scale(0.99, 1.01);
    }
    47% {
        transform: scale(0.99, 1.01);
    }
    48% {
        transform: scale(0.99, 1.01);
    }
    49% {
        transform: scale(1, 1);
    }
    }