header{z-index:10002;
    width:100%;height:100px;overflow: hidden;
    background:#ececec;
    position: fixed;left:0;top:0;
}
header.hover{
    overflow:visible;
    height:430px;
}
header .header__bg{
    width:100%;height:100px;
    position: absolute;left:0;top:0;
    background:white;
}
header .header__wrap{
    width:1200px;height:100%;
    /* width:100%;max-width:1200px;height:100%; */
    position: absolute;left:0;right:0;
    margin:auto;
}
header .header__logo{
    min-width:150px;width:20%;max-width:calc(290px - 4%);height:100%;max-height:100px;
    float:left;
    background: url(../../../resources/images/logo.png)no-repeat left center;
}
header .header__logo a{
    width:100%;height:100%;
    display:block;
}
header .header__info{
    padding-top:50px;
    text-align:right;
}
header .header__info h2{
    font-family: "scd6";letter-spacing: -2.1px;color:#333;
}
header .header__info p{
    font-family: "scd3";letter-spacing: -1.19px;color:#333;
}
header .header__nav{
    width:80%;max-width:910px;height:100%;max-height:100px;
    float:right;
}
header .header__depth--1{
    width:100%;height:100%;
    display:flex;justify-content: space-around;
}
header .header__depth--1 > li{
    width:100%;height:100%;
}
header .header__depth--1 > li  > a{
    height:100%;display:block;
    line-height:100px;text-align: center;
    font-family: "scd4";color:#333333;letter-spacing: -1.4px;
}
header .header__depth--2{
    padding-top:50px;height:330px;
    display:flex;align-items: center;flex-direction: column;
    background:#f8f8f8;
}
header .header__depth--2 > li{
    line-height: 20px;
}
header .header__depth--2 > li > a{
    padding:10px 0;display:block;
    position: relative;
    font-family: "scd3";color:#333333;letter-spacing: -1.19px;;
}
header .header__depth--2 > li > a:hover{
    font-family: "scd5";
}
header .header__depth--2 > li > a:hover::before{
    width:100%;height:2px;
    position: absolute;left:0;bottom:0;
    content:"";
    background:#333333;
}

header .container {
    display: none;
    cursor: pointer;
}

header .bar1, header .bar2, header .bar3 {
width: 35px;
height: 5px;
background-color: #333;
margin: 6px 0;
transition: 0.4s;
}

header .change .bar1 {
-webkit-transform: rotate(-45deg) translate(-9px, 6px);
transform: rotate(-45deg) translate(-9px, 6px);
}

header .change .bar2 {opacity: 0;}

header .change .bar3 {
-webkit-transform: rotate(45deg) translate(-8px, -8px);
transform: rotate(45deg) translate(-8px, -8px);
}