/*head*/
.header
{
    margin-top: 15px;

    background: linear-gradient(transparent 15%,#095474 100%);}
.head-tab
{
    line-height: 30px;

    height: 30px;
    margin-top: 30px;}
.head-tab a
{
    font-size: .75em;

    padding-right: 6px;

    border-right: 1px solid #999;
    color: #b9b5b5;}
/*head-nav*/
.head-nav
{
    width: 100%;
    margin-top: 20px;
    background: #1a86b4;
    }
.nav-bar
{
    line-height: 35px;
    width: 9.8%;
    width: 9%\9;
    height: 35px;
    text-align: center;
    border-right: 1px #fff solid;
    }
.nav-bar a
{
    font-size: 1rem;
    line-height: 35px;
    position: relative;
    width: 100%;
    height: 35px;
    padding: 8px 10px 10px;
    color: #ffffff;
    }
.head-nav .nav-bar a::before,
.head-nav .nav-bar a::after
{
    display: inline-block;

    -webkit-transition: -webkit-transform .3s, opacity .2s;
       -moz-transition:    -moz-transform .3s, opacity .2s;
            transition:         transform .3s, opacity .2s;

    opacity: 0;}
.head-nav .nav-bar a::before
{
    margin-right: 10px;

    content: '[';
    -webkit-transform: translateX(20px);
       -moz-transform: translateX(20px);
            transform: translateX(20px);}
.head-nav .nav-bar a::after
{
    margin-left: 10px;

    content: ']';
    -webkit-transform: translateX(-20px);
       -moz-transform: translateX(-20px);
            transform: translateX(-20px);}
.head-nav .nav-bar a:hover::before,
.head-nav .nav-bar a:hover::after,
.head-nav .nav-bar a:focus::before,
.head-nav .nav-bar a:focus::after
{
    -webkit-transform: translateX(0px);
       -moz-transform: translateX(0px);
            transform: translateX(0px);

    opacity: 1;}
/*banner*/
.head-bg
{    
	margin-top: 50px;
    width: 100%;
    height: 300px;

    background-image: url(../images/bg.jpg);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: cover;}



@media screen and (max-width: 960px)
{
	.head-nav .nav-bar a::before,
	.head-nav .nav-bar a::after{
		display: none;}
	.head-tab {
		display: none;}
	.head-nav {
		margin-top: 10px;}
	.head-logo img{
		width: 80%;}
	.head-tab {
		margin-top: 5px;}

	.head-nav .nav-bar a {
		font-size: 0.75em;}

	.head-nav .nav-bar {
		width: 20%;}
    .head-bg
    {
    	margin-top: 80px;
        height: 200px;}
    .container
    {
        overflow: hidden;

        width: 80%;
        margin: 0 auto;}
} 

@media screen and (max-width: 420px)
{
	.header {
		background: linear-gradient(transparent 23%,#095474 100%);}
	.head-nav {
		margin-top: 10px;}
	.head-tab {
		display: none;}
	.head-bg
    {
    	margin-top: 115px;
    	height: 150px;}
	.head-nav .nav-bar{
		width: 25%;}
	.head-nav .nav-bar a {
		height: 30px;}
	
}