ag-index/assets/css/navigation2.css

.fl {
    float: left;
}

.fr {
    float: right;
}

.of {
    overflow: hidden;
}

.cl {
    clear: both;
}

.fixDiv{
    position:fixed !important;
    top:0;
    left:0;
    z-index: 9999 !important;
}

.header-b {
    background: url("../images/bg.jpg");
    height: 60px;
    background-size: 100% 100%;
    /* overflow: hidden; */
    line-height: 60px;
    z-index: 51;
    width: 100%;
    position: relative;
    left: 0;
    top: 0;
}

.header-b .logo img {
    max-width: 300px;
    width: 80%;
    margin-right: 20px;
}

.header-b ul {
    margin-right: 30px;
    float: left;
}

.header-b ul li {
    float: left;
    font-size: 16px;
    padding: 0 10px;
    line-height: 57px;
    width: 100px;
}

.header-b ul li a img {
    height: 36px;
    line-height: 20px;
    display: inline-block;
    margin-top: -20px;
}

.header-b ul li a p {
    line-height: 16px;
    color: #fff;
    margin-top: -24px;
    font-size: 13px;
}

.header-w {
    background-color: #0095ff;
    height: 60px;
    /* overflow: hidden; */
    line-height: 60px;
    z-index: 51;
    width: 100%;
    position: relative;
    left: 0;
    top: 0;
}

.header-w .logo {
    height: 60px;
}

.header-w .logo img {
    max-width: 300px;
    width: 80%;
    margin-top: 6px;
    margin-right: 20px;
}

.header-w ul {
    margin-right: 30px;
    float: left;
}

.header-w ul li {
    float: left;
    font-size: 16px;
    padding: 0 30px;
    line-height: 57px;
}

.header {
    background-color: #fff;
    height: 60px;
    /* overflow: hidden; */
    line-height: 60px;
    z-index: 51;
    width: 100%;
    position: relative;
    left: 0;
    top: 0;
    box-shadow: 0 0 5px 2px rgba(0, 0, 0, .1);
    /*-webkit-transition: all 0.2s ease;*/
    /*transition: all 0.2s ease;*/
}

.header .logo {
    height: 60px;
}

.header .logo img {
    margin-top: -3px;
    max-width: 300px;
    width: 80%;
    margin-right: 20px;
}

.header ul {
    margin-right: 30px;
    float: left;
}

.header ul li {
    float: left;
    font-size: 16px;
    padding: 0 30px;

    line-height: 57px;
}

.header_right {
    height: 60px;
    /*margin-right: 100px;*/
}

.head-cur {
    /*background: #0077e6;*/
    /*color: #FFFFFF ;*/
    height: 58px;
    color: #0077e6 !important;
    border-bottom: 2px solid #0077e6;
    /*margin-top: -2px;*/
}

.head-cur a {
    color: #0077e6;
}

.header ul li a {
    padding: 0;
    display: block;
    line-height: 57px;
    cursor: pointer;
}

.login_btn {
    float: left;
    color: #0077e6;
    font-size: 16px;
    font-weight: normal;
    padding: 0 8px;
    height: 16px;
    margin-top: 22px;
    line-height: 16px;
}

.login_btn2 {
    float: left;
    color: #0077e6;
    font-size: 16px;
    font-weight: normal;
    padding: 0 8px;
    height: 16px;
    margin-top: 22px;
    border-left: 1.5px solid #0077e6;
    line-height: 16px;
}

/*.header ul li a:hover {*/
/*border-bottom: 3px solid #001c77;*/
/*}*/

.header .right a {
    color: #1034aa;
    padding: 6px 25px;
    font-size: 16px;
    border: 1px solid #1034aa;
    line-height: 36px;
    height: 36px;
    border-radius: 26px;
}

.head-nav {
    /*position: relative;*/
    width: 1280px;
    /*z-index: 9999;*/
    margin: 0 auto;
}

.head-nav-con {
    width: 1280px;
    margin: auto;
    /*position: absolute;*/
}

.head-nav-con ul li {
    /*width: 100px;*/
    float: left;
    font-size: 16px;
    text-align: center;
    line-height: 57px;
}

.nav > ul {
    *zoom: 1;
    *clear: both;
}

.nav > ul:before, .nav > ul:after {
    display: table;
    clear: both;
    content: '';
}

.nav > ul > li {
    /*width: 13%;*/
    /*float: left;*/
    /*margin-left: 1%;*/
    position: relative;
}

.nav > ul > li > a {
    display: block;
    white-space: nowrap;
    font-size: 16px;
    text-align: center;
    line-height: 60px;
    height: 60px;
    position: relative;
    /* font-weight: bold; */
    /*color: #313131;*/
}

.nav > ul > li > a:after {
    content: '';
    /*display: block;*/
    width: 0;
    height: 2px;
    background-color: #117be5;
    overflow: hidden;
    position: absolute;
    left: 50%;
    bottom: 0;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
    display: none;
}

.nav > ul > li.cur > a:after, .nav > ul > li:hover > a:after {
    width: 100%;
    left: 0;
}

.nav > ul > li.cur > a, .nav > ul > li:hover > a {
    /*color: #001c77;*/
    color: #0077e6;
}

.nav > ul ul {
    width: 170px;
    /*border: #ccc 1px solid;*/
    /*border-top: #001c77 2px solid;*/
    background-color:#134a95;
    position: absolute;
    color: #fff;
    padding: 10px 0;
    /*left: 0;*/
    top: 60px;
    opacity: 0;
    visibility: hidden;
    left: 50%;
    margin-left: -75px; /*  box-shadow:0 0 5px #333; */
    /*transition: all 0.25s ease 0s;*/
    /*-webkit-transform: translate(0, 20px);*/
    /*-moz-transform: translate(0, 20px);*/
    /*-ms-transform: translate(0, 20px);*/
    /*-o-transform: translate(0, 20px);*/
    /*-webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
    /*-moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
    /*-o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
    /*transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
}


.list {
    width: 1100px;
    background-color: #134a95;
    padding: 0 30px;
    color: #fff;
    position: absolute;
    left: 0;
    top: 60px;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    left: 50%;
    margin-left: -600px; /*  box-shadow:0 0 5px #333; */
    /*transition: all 0.25s ease 0s;*/
    /*-webkit-transform: translate(0, 20px);*/
    /*-moz-transform: translate(0, 20px);*/
    /*-ms-transform: translate(0, 20px);*/
    /*-o-transform: translate(0, 20px);*/
    /*-webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
    /*-moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
    /*-o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
    /*transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
}
.list .pd {
    float: left;
    width: 190px;
    overflow: hidden;
    margin: 10px 10px;
}

.list h2{
font-size: 14px;
color: rgba(187, 208, 239, 0.96);
line-height: 35px;
float: left;
padding-left: 30px;
font-weight: 500;
}

.list .pd li {
    width: 250px;
    padding-left: 0;
    position: relative;
}


.list .pd ul{
position: static;
opacity: 1;
margin-left: 0;
border: none;
border-top: none;
width: 250px;}

.nav > ul ul li {
    width: 240px;
    padding-left: 0;
    position: relative;
}

.nav > ul ul a {
    display: block;
    line-height: 22px;
    padding: 4px 30px;
    font-size: 13px;
    color: #fff;
    float: left;
    position: relative;
}

.nav > ul ul a:after {
    content: '';
    display: block;
    width: 10px;
    height: 5px;
    overflow: hidden;
    background: url("../images/nav_arr.png") -10px 0 no-repeat;
    position: absolute;
    right: -15px;
    top: 12px;
    -webkit-transition: all 0.3s ease;
    transition: all 0.3s ease;
}

.nav > ul ul a:hover {
    /*background-color: #f9f9f9;*/
    color:#010e22;
}

.nav > ul ul a:hover:after {
    background-position: 0 0;
}

.nav > ul > li:hover ul {
    opacity: 1;
    visibility: visible;
    /*-webkit-transform: translate(0, 0);*/
    /*-moz-transform: translate(0, 0);*/
    /*-ms-transform: translate(0, 0);*/
    /*-o-transform: translate(0, 0);*/
}
.nav > ul > li:hover .list {
    opacity: 1;
    visibility: visible;
    /*-webkit-transform: translate(0, 0);*/
    /*-moz-transform: translate(0, 0);*/
    /*-ms-transform: translate(0, 0);*/
    /*-o-transform: translate(0, 0);*/
}
.nav .nav_svc .prd_svc {
    float: left;
    width: 225px;
    /* border-left: 1px solid #eee; */
    margin: 10px 10px;
}

.nav .nav_svc .prd_svc h2 {
    font-size: 14px;
    color: rgba(187, 208, 239, 0.96);
    line-height: 35px;
    float: left;
    padding-left: 35px;
    font-weight: 500;
    /*padding-left: 32px;*/
    /*margin-top: -10px*/
}

.nav .nav_svc {
    width: 1000px;
    /* border: #ccc 1px solid; */
    /* border-top: #001c77 2px solid; */
    background-color: #0156c4;
    padding: 0 30px;
    color: #fff;
    position: absolute;
    /* left: 0; */
    top: 80px;
    opacity: 0;
    visibility: hidden;
    /* left: 50%; */
    margin-left: -600px;
    /*  box-shadow:0 0 5px #333; */
    /*-webkit-transform: translate(0, 20px);*/
    /*-moz-transform: translate(0, 20px);*/
    /*-ms-transform: translate(0, 20px);*/
    /*-o-transform: translate(0, 20px);*/
    /*-webkit-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
    /*-moz-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
    /*-o-transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
    /*transition: all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);*/
}

.nav .nav_svc .prd_svc ul {
    position: static;
    opacity: 1;
    margin-left: 0;
    border: none;
    border-top: none;
    width: 225px;
}

.nav .nav_svc .prd_svc ul li {
    width: 225px;
}

.nav > ul > li:hover .nav_svc {
    opacity: 1;
    visibility: visible;
    -webkit-transform: translate(0, 0);
    -moz-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    -o-transform: translate(0, 0);
}

.fix {
    *zoom: 1;
    *clear: both;
}

.fix:before, .fix:after {
    display: table;
    clear: both;
    content: '';
}