﻿body,html {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    position:relative;
    text-align:center;
    font-family:'Microsoft YaHei';
}

a {
    text-decoration:none;
}
ul {
    margin:0;
    padding:0;
}
li {
    list-style:none;
}

#MainBox {
    width:100%;
    height:auto;
    min-height:300px;
    position:relative;
    overflow:hidden;
    transition:0.3s;
}
#MainFloDiv {
    width:100%;
    height:100%;
    position:absolute;
    background-color:#fff;
    z-index:50;
    animation:MainFloDiv 2s linear 0s infinite alternate;
    transition:0.5s;
}
#MainFloDiv span {
    display:block;
    margin:auto;
    margin-top:117px;
    font-size:40px;
    line-height:40px;
    color:#0a3c81;
    animation:MainFloDivSpan 2s linear 0s infinite;
}
#MainFloDiv p {
    margin:auto;
    font-size:20px;
    color:#0a3c81;
}
#MainHtml {
    width:100%;
    height:auto;
    top:0;
    position:relative;
    z-index:1;
}
@keyframes MainFloDivSpan {
    from {
        transform:rotate(0deg);
    }
    to {
        transform:rotate(360deg);
    }
}
@keyframes MainFloDiv {
    from {
        background-color:#ffffff;
    }
    to {
        background-color:#eaebed;
    }
}

.Box {
    width:100%;
    max-width:1200px;
    margin:50px auto;
}

.NavReplace {
    height:77px;
    position:relative;
    display:none;
}
.Nav {
    width:100%;
    position:relative;
    z-index:100;
}
.LangBox {
    width:100%;
    padding:3px 0;
    background-color:#828282;
    font-size:12px;
}
.LangBox > div {
    margin:auto;
    text-align:right;
}
.LangBox a {
    margin:0 10px;
    color:#fff;
}
.NavBox {
    background-color:#004183;
}
.NavBox > div {
    margin:auto;
    position:relative;
    font-size:0;
}
.NavBox img {
    max-width:25%;
    display:inline-block;
    vertical-align:middle;
}
.NavBox ul {
    width:70%;
    margin-left:5%;
    position:static;
    display:inline-block;
    vertical-align:middle;
}
.NavBox li {
    width:12.5%;
    height:70px;
    position:relative;
    font-size:15px;
    color:#fff;
    display:inline-block;
    cursor:pointer;
    overflow:hidden;
    /*transition:0.3s;*/
}
.NavBox li p {
    width:100%;
    height:100%;
    margin:0;
    display:table;
}
.NavBox li p > span {
    display:table-cell;
    position:relative;
    vertical-align:middle;
}

.NavBox li:hover p >  span::after, #NavBoxLi p >  span::after {
    bottom:3px;
    opacity:1;
}
.NavBox li:hover, #NavBoxLi {
    color:#a4d7f4;
}
.NavBox li:hover {
    overflow:visible;
}
.NavBox li > div {
    padding:20px;
    left:-260px;
    position:absolute;
    font-size:14px;
    background-color:#f1f1f1;
    opacity:0;
    /*transition:0.3s;*/
}
.NavBox li:nth-child(6) > div {
    left:auto;
    right:-200%;
}
.NavBox li > div p {
    display:inline-block;
    white-space: nowrap;
}
.NavBox li div p strong {
    padding:10px;
    color:#000;
    font-weight:normal;
    /*transition:0.3s;*/
}
.NavBox li div p strong:hover {
    color:#79a7c9;
}
.NavBox li:hover > div {
    opacity:1;
}
.Nav > div:nth-last-child(1) {
    width:100%;
    height:10px;
    background-color:#da251c;
}
.NavButton {
    height: 25px;
    top: 0px;
    bottom: 7px;
    left:5px;
    margin:auto;
    position:absolute;
    display:none;
    color:#a4d7f4;
    font-size:24px;
    cursor:pointer;
}

.Bottom {
    width:100%;
    margin:0;
    position:relative;
}
.BottomUlBox {
    padding:50px 0;
    position:relative;
    border-top:2px solid #cbcdcc;
    background-color:#eaebed;
}
.BottomUlBox > div {
    margin:0 auto;
}
.BottomUlBox ul {
    font-size:0;
    white-space:nowrap;
    overflow-x:auto;
}
.BottomUlBox li {
    max-width:calc(100% - 20px);
    padding: 0 5px;
    margin-left: 15px;
    display:inline-block;
    vertical-align:top;
    text-align: left;
    border-right: 2px solid #d3d3d3;
}
.BottomUlBox li:nth-last-child(1) {
    border-right:0px;
}
.BottomUlBox h1 {
    margin:10px 0;
    font-size:18px;
    font-weight:normal;
    color:#103c85;
}
.BottomUlBox li > div {
    margin:5px 0;
    white-space:nowrap;
    font-size:12px;
    color:#626262;
}
.BottomUlBox li:nth-child(4) > div {
    max-width:220px;
    white-space:normal;
}
.BottomUlBox h2 {
    margin:0 5px;
    display:inline;
    color:#1b3b6e;
}
.BottomUlBox span {
    cursor:pointer;
    /*transition:0.3s;*/
}
.BottomUlBox p {
    /*width:90px;*/
    width:120px;
    margin:2px 0;
    display:inline-block;
}
.BottomUlBox li:nth-child(1) p {
    width:190px;
}
.BottomUlBox li:nth-child(1) p:nth-child(2) {
    width:230px;
}
.BottomUlBox li:nth-child(1) p:nth-child(3) {
    /*width:100px;*/
    width:130px;
}
.BottomUlBox span:hover {
    color:#79a7c9;
}
.BottomBox {
    padding:20px 0;
    position:relative;
    background-color:#5a5b5d;
    color:#fff;
}
.BottomBox > div {
    margin:0 auto;
}
.BottomBoxD1 {
    width:70%;
    display:inline-block;
    vertical-align:middle;
    text-align:left;
    font-size:12px;
}
.BottomBoxD1 img {
    width:250px;
    max-width:100%;
    display:block;
    max-width:100%;
}
.BottomBoxD2 {
    width:11%;
    display:inline-block;
    vertical-align:middle;
    font-size:12px;
}
.BottomBoxD2 img {
    max-width:100%;
}
.BottomBoxD2 p {
    margin:0;
}


@media screen and (min-width: 800px) {
    .NavBox li p > span::after {
        content: "<";
        left:-6px;
        right:0;
        bottom:-10px;
        margin:auto;
        position:absolute;
        display:block;
        transform:rotate(-90deg) scaleY(2);
        opacity:0;
        /*transition:0.3s;*/
    }
}
@media screen and (max-width: 800px) {
    .LangBox {
        display:none;
    }
    .NavReplace {
        display:block;
    }
    .Nav {
        position:fixed;
    }
    .NavBox > div {
        padding:0;
        padding:10px 0;
    }
    .NavBox img {
        width:400px;
        max-width:75%;
    }
    .NavBox ul {
        width:100%;
        top:calc(100% + 3px);
        left:-100%;
        margin:0;
        position:absolute;
        background-color:rgba(0, 65, 131, 0.90);
        transition:0.3s;
    }
    .NavBox li {
        width:100%;
        height: auto;
        padding:10px 0;
        font-size:16px;
        overflow:unset;
    }
    .NavBox li p {
        width:calc(100% - 20px);
        text-align:left;
        padding:5px 10px;
    }
    .NavBox li p > span {
        position:relative;
    }
    /*.NavBox li p > span::after {
        display:none;
    }*/
    .NavBox li:hover, #NavBoxLi {
        background-color:rgba(255, 255, 255, 0.1);
    }
    .NavBox li > div {
        padding:0;
        height:0;
        overflow:hidden;
        left:0;
        position:relative;
        background:none;
        opacity:1;
    }
    .NavBox li:hover > div {
        padding:5px 0;
        height:auto;
    }
    .NavBox li div p strong {
        width:calc(100% - 20px);
        padding:5px;
        display:block;
        color:#fff;
        text-align:left;
    }
    .NavBox li div p strong:hover {
        color:#a4d7f4;
    }
    .NavBox li:nth-child(6) > div {
        right:0;
    }
    .NavGt:after {
        content:"<";
        display:inline;
        opacity:1;
        margin: auto 20px;
        top: 3px;
        bottom: 0;
        transform:rotate(-90deg) scaleY(2);
        position: absolute;
        font-size: 10px;
    }
    .Nav > div:nth-last-child(1) {
        height:3px;
    }

    .NavButton {
        display:block;
    }
    #NavOpen {
        text-shadow:0 0 10px rgba(255, 255, 255, 0.75);
    }

    /*.BottomUlBox li {
        width:400px;
    }
    .BottomUlBox li > div {
        width:100%;
        white-space:normal;
    }*/
}

@media screen and (max-width: 600px) {
    .BottomBoxD1, .BottomBoxD2 {
        width:80%;
    }
}