/************************************************************************************************************ header *******************************************************************************************************************************/

header{
    width: 100%;
    border-bottom: 1px solid #e5e5e5;
    background-color: #ffffff;
}
header nav{
    width: 1400px;
    margin: 0 auto;
    display: block;
}
header .nav-phone{
    display: none;
}
header .logo{
    width: 12.5715%;
    padding-top: .42858%;
}
header nav ul{
    width: 56.5715%;
    margin: 0 0 0 11.4286%;
    padding: 0;
}
header nav ul li{
    display: inline-block;
    width: 13.3334%;
    line-height: 80px;
    text-align: center;
}
header nav ul li a{
    font-size: 18px;
    padding-bottom: 10%;
    letter-spacing: 2px;
    text-decoration: none;
    color: #333333;
}
header nav ul li a:hover{
    color: #ffc000;
    text-decoration: none;
}
header nav ul li a:focus{
    color: #ffc000;
    text-decoration: none;
}
.active>a{
    border-bottom: 3px solid #ffc000;
}
header .login{
    width: 8.42857%;
    margin-top: 1.7858%;
}
/************************************************* width < 1440px */
@media screen and (max-width: 1440px){
    header nav{
        width: 1032px;
    }
    header nav ul li{
        line-height: 60px;
    }
    header nav ul li a{
        font-size: 16px;
        padding-bottom: 8px;
    }
}
/************************************************* width < 1032px */
@media screen and (max-width: 1032px){
    header nav{
        width: 762px;
    }
    header nav ul{
        width: 66.1038%;
    }
    header nav ul li{
        line-height: 44px;
    }
    header nav ul li a{
        font-size: 10px;
        padding-bottom: 6px;
    }
}

/**
*** when the width of screen < 768px ***
**/
@media screen and (max-width: 767px){
    header{
        z-index: 100;
        height: 48px;
        border: none;
        box-shadow: 1px 1px 1px rgba(0,0,0,.1);
    }
    header nav{
        display: none;
    }
    header .nav-phone{
        display: block;
    }
    header .nav-phone .logo{
        width: 88px;
        height: 40px;
        padding: 4px 0;
    }
    header .nav-phone .dropdown{
        width: 40px;
        padding: 4px 0;
    }
    .active>a{
        border-bottom: 1px solid #ffc000;
    }
}