@charset "UTF-8";

@media screen and (max-width: 1600px){
    header nav {
        margin-left: 130px;
    }
}



@media screen and (max-width: 1440px){

    header nav ul li + li {
        margin-left: 50px;
    }

}

@media screen and (max-width: 1200px){

    header nav {
        margin-left: 49px;
    }

}

@media screen and (max-width: 1100px){
    header h1{
        width: 180px;
        padding-top:15px ;
    }
    header h1 img{
        width: 100%;
    }
    header nav ul li a {
        font-size: 14px;
    }
    header nav ul li + li {
        margin-left: 40px;
    }
    header .email a {
        font-size: 14px;
    }
}

@media screen and (max-width: 768px){

    header nav ul li + li {
        margin-left: 20px;
    }
    header h1 {
        width: 140px;
        padding-top: 10px;
    }

}

@media screen and (max-width: 768px){
    header{
        height: 60px;
        line-height: 60px;
    }
    header > div{
        margin: 0 10px;
    }
    header nav {
        display: none;
        width: 100%;
        margin-left: 0px;
        text-align: center;
        background-color: white;
    }
    header nav ul li{
        float: none;
        border-bottom: 1px solid #eee;
    }
    header nav ul li + li {
        margin-left: 0;
    }
    header nav ul li div{
        display: none;
    }
    header .email{
        float: none;
        position: absolute;
        right: 70px;
        top: 0px;
    }
    header .phone{
        position: absolute;
        right: 20px;
        top: 15px;
    }
    header .phone div{
        width: 30px;
        height: 5px;
        margin-bottom: 5px;
        background-color: skyblue;
        transition: .8s;
    }
    header .phone div:nth-child(1).on{
        transform: rotate(40deg);
        transform-origin: bottom left;
    }
    header .phone div:nth-child(2).on{
        opacity: 0;
    }
    header .phone div:nth-child(3).on{
        transform: rotate(-40deg);
        transform-origin: top left;
    }
}