@charset "utf-8";
/* CSS Document */

.head {
    width: 100%;
    height: 80px;
    position: absolute;
    top: 0;
    z-index: 10;
    background-color: #163b87;
}

.head-bx {
    width: 1200px;
    height: 80px;
    margin: 0 auto;
}

.logo {
    float: left;
    display: block;
    width: 320px;
    height: 40px;
    margin-top: 20px;
}

* {
    /* 定义全局属性 */
    margin: 0;
    padding: 0;
}

.nav {
    float: right;
    margin-top: 0px;
}

.nav_li {
    width: 120px;
    height: 80px;

    /* 定义往左浮动 */
    float: left;
    /* 设置相对定位 */
    position: relative;
    font-size: 16px;
    color: #666;
    /* 设置文字居中 */
    text-align: center;
    line-height: 50px;
    /* 鼠标样式改为小手 */
    cursor: pointer;
}

section {
    /* 定义全部 section 属性 */
    position: absolute;
    /* 设置渐变 */
    transition: 0.5s;
    z-index: 9999;
}

.nav_li:hover {
    /* 设置鼠标经过时改变li背景 */
    background: url(../img/di.jpg) no-repeat bottom;
    color: #1c679e;

}

.nav_li_a {
    display: block;
    color: #fff;
    font-size: 16px;
    line-height: 80px;
}

.nav_li_a:hover {
    background-color: #c11e1e;
    color: #fff;
}

.nav_li_a span {
    display: block;
}

.section-right {
    float: right;
    width: 160px;
    /*margin-top: -200px;*/
}

.section-left {
    float: left;
    width: 250px;
    height: 160px;
    overflow: hidden;
    margin: 20px 0 20px 20px;
}

.section-right .two_li{
    height: 38px;
    line-height: 38px;
}
.section-right .two_li:hover{
    background: #1c679e;
}
.section-right .two_li:hover a{
    color: #fff;
}


.one {
    width: 720px;
    color: #fff;

    /* 相对与li进行定位，使section 与 ul 相对其   下同 */
    top: 50px;
    /* 使改标签为 无 */
    display: none;
}

.nav_li:hover .one {
    /* 使标签转换为块标签 */
    display: block;
    background-color: #fff;

}

.two {
    /*width: 500px;*/
    /* 定义高度为0 */
    height: 0;
    /* 相对与li进行定位，使section 与 ul 相对其   下同 */
    left: -20px;
    /* 因为高度为0，所以超出的部分被隐藏掉 */
    overflow: hidden;
}

.nav_li:hover .two {
    /* 高度变为60px，内容会显示出来 */
    height: 200px;
    background-color: #fff;
}

.three {
    /* 定义宽度为0 */
    width: 0;
    height: 200px;
    left: -140px;
    /* 因为宽度为0，所以超出的部分被隐藏掉 */
    overflow: hidden;
}

.nav_li:hover .three {
    width: 500px;
    background-color: #fff;
}

.four {
    width: 0;
    height: 300px;
    /* 相对与li进行定位，使section 与 ul 相对其  */
    /* 此处用 right 而不用 left ，是为了使其改变起始方向 */
    right: -260px;
    /* 因为宽度为0，所以超出的部分被隐藏掉 */
    overflow: hidden;
}

.nav_li:hover .four {
    width: 500px;
    background-color: #fff;
}

.five {
    width: 0;
    height: 0;
    left: -140px;
    /* 因为宽，高度为0，所以超出的部分被隐藏掉 */
    overflow: hidden;
}

.nav_li:hover .five {
    width: 500px;
    height: 200px;
    background-color: #fff;
}

.six {
    width: 0;
    height: 0;
    right: 0px;
    /* 因为宽，高度为0，所以超出的部分被隐藏掉 */
    overflow: hidden;
}

.nav_li:hover .six {
    width: 500px;
    height: 200px;
    background-color: #fff;
}

.seven {
    width: 720px;
    height: 0;
    left: -600px;
    /* 此处定义 bottom 是为了改变起始位置从底部60px位置开始变高 */
    bottom: -60px;
    overflow: hidden;
}

.nav_li:hover .seven {
    height: 60px;
    background-color: lightblue;
}

.href-nav {
    color: #666;
}

.href-nav:hover {
    /*text-decoration: underline;*/
    /*color: #1c679e;*/
    /*color: #fff;*/
}