@charset "UTF-8";
@media screen and (max-width: 1500px){
    header > div{
        width: 90%;
    }
}
@media screen and (max-width: 1200px){
    header > div .right ul li a{
        padding: 0 15px;
    }
}


@media screen and (max-width: 1000px){
    header > div .right ul li a {
        padding: 0 10px;
    }
}
@media screen and (max-width: 768px){



    .phones{
        margin-right: 82px;
    }
    header > div .right ul li{
        line-height: 60px;
    }
    header > div{
        width: 90%;
    }
}

@media screen and (max-width: 768px){

    header > div .phone{

        width: 40px;
        height: 30px;
    }
    header{
        position: relative;
    }
    header > div .right{
        position: absolute;
        width: 100%;
        top: 80px;
        left: 0;
        background-color: white;
        text-align: center;
        z-index: 2;
    }
    header > div .right ul{
        display: none;
    }
    header > div .right ul li{
        float: none;
        border-bottom: 1px solid #eee;
    }
    header > div .right ul li a.on{
        background-image: none;
        color: #333;
    }
    header > div .phone{
        position: absolute;
        top: 28px ;
        right: 30px;
    }
    header > div .phone p{
        width: 100%;
        height: 4px ;
        margin-bottom: 7px;
        background-color: #0a3a89;
        /*background: -webkit-linear-gradient(left,#45a1e0,#1fabc9); !* Safari 5.1 - 6.0 *!*/
        /*background: -o-linear-gradient(left,#45a1e0,#1fabc9); !* Opera 11.1 - 12.0 *!*/
        /*background: -moz-linear-gradient(left,#45a1e0,#1fabc9); !* Firefox 3.6 - 15 *!*/
        /*background: linear-gradient(left,#45a1e0,#1fabc9); !* 标准的语法 *!*/
        transition: .6s;
    }

    header > div .phone p:nth-child(1).on{
        transform-origin:left top;
        transform: rotate(45deg);
    }
    header > div .phone p:nth-child(3).on{
        transform-origin:left top;
        transform: rotate(-45deg) translateX(-6px) translateY(3px);
    }
    header > div .phone p:nth-child(2).on{
        opacity: 0;
    }
}



