#box {
    width: 100%;
    /* height: 100%; */
    height: 80px;
    position: fixed;
    left: 0;
    top: 0;
    background-color: rgba(255, 255, 255, 0);
    z-index: 100;
    font-size: 16px;
}

* {
    box-sizing: content-box;
}

a:hover,
a:focus {
    text-decoration: none;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
form,
fieldset,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}

/* table {
    border-collapse: collapse;
    border-spacing: 0;
}

body {
    -webkit-text-size-adjust: none;
} */

fieldset,
img {
    border: 0;
}
.logo{ 
width: 188px;
margin-top: 19px;
margin-right: 75px;
margin-left: 40px;
}

/* img{ vertical-align: top; max-width: 100%; } */


address,
caption,
cite,
code,
dfn,
em,
th,
var {
    font-style: normal;
    font-weight: normal;
}

ol,
ul {
    list-style: none;
}

/* caption, */
/* th {
    text-align: left;
} */

/* h1,
h2,
h3,
h4,
h5,
h6 {
    font-size: 100%;
    font-weight: normal;
} */

q:before,
q:after {
    content: '';
}

abbr,
acronym {
    border: 0;
}

.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
}

* html .clearfix {
    zoom: 1;
}


/* IE6 */

*:first-child+html .clearfix {
    zoom: 1;
}


/* IE7 */

.cli {
    clear: both;
    font-size: 0;
    height: 0;
    overflow: hidden;
    display: block;
}

.lclear {
    clear: left;
    font-size: 0;
    height: 0;
    overflow: hidden;
}

.fl {
    float: left;
}

.fr {
    float: right;
}

/* body {
    font-size: 12px;
    font-family: 'Microsoft YaHei', "SimSun", "Arial Narrow", Helvetica, sans-serif;
    color:black;
    line-height: 1.2;
    text-align: left;
} */

a {
    color: #333;
    text-decoration: none;
}

.index-nav {
    width: 100%;
    height: 80px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0);
}

.index-nav-frame {
    width: 1277px;
    margin: 0 auto;
}

.index-nav-frame-line {
    color: rgb(255, 255, 255);
    float: left;
    position: relative;
    display: block;
    outline: none;
    cursor: pointer;
    width: 120px;
    line-height: 80px;
    height: 80px;
    text-align: center;
    font-weight: 700;
    font-size: 16px;
}
.index-nav-frame-line  a {
    color: rgb(250, 250, 250);
    text-decoration: none;
}


.index-nav-frame-line:hover {
    border-bottom: 1px rgba(255, 255, 255, 0.8) solid;
}

.index-nav-frame-line-center {
    opacity: 0;
    height: 0;
    position: absolute;
    overflow: hidden;
    width: 100%;
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    /* Firefox 4 */
    -o-transition: all 0.5s;
    /* Opera */
}

.index-nav-frame-line-li {
    width: 100%;
    height: 45px;
    line-height: 45px;
    font-weight: 500;
    text-align: center;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
}

.index-nav-frame-line-li:hover {
    color: #3e98e2;
}

.index-nav-frame-line-focus:focus {
    display: none;
}

.index-nav-frame-line:hover .index-nav-frame-line-center {
    height: auto;
    opacity: 1;
}

.nav-line {
    height: 50px;
    width: 100%;
    position: relative;
    display: none;
    outline: none;
}

.nav-small {
    width: 30px;
    height: 30px;
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
    display: none;
    outline: none;
}

.nav-small img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.nav-small-focus {
    position: absolute;
    width: 100%;
    height: 100%;
    display: none;
}

.nav-small-focus:focus {
    display: none;
}

@media only screen and (max-width:800px) {
    .index-nav-frame-line-li a {
        display: block;
        color: white;
    }
    .nav-line {
        display: block;
        border-bottom: 1px solid #eeeeee;
    }
    .nav-small {
        display: block;
    }
    .nav-small:focus~.index-nav-frame-line {
        height: auto;
        border-bottom: 1px solid #ccc;
    }
    .nav-small:focus .nav-small-focus {
        display: block;
    }
    .index-nav-frame {
        width: 100%;
    }
    .index-nav-frame-line {
        width: 100%;
        height: 0;
        overflow: hidden;
    }
    .index-nav-frame-line-center {
        position: relative;
        background: #444359;
    }
    .index-nav-frame-line:hover .index-nav-frame-line-center {
        height: 0;
        opacity: 0;
    }
    .index-nav-frame-line-li {
        border-bottom: 1px solid #4b4a5e;
        color: #d9d9d9;
        background: #444359;
    }
    .index-nav-frame-line-li:hover {
        background: #b63b4d;
    }
    .index-nav-frame-line:focus {
        height: auto;
        border-bottom: 1px solid #ccc;
    }
    .index-nav-frame-line:focus>.index-nav-frame-line-center {
        height: auto;
        opacity: 1;
    }
    .index-nav-frame-line:focus .index-nav-frame-line-header {
        color: #B63B4D;
    }
    .index-nav-frame-line-focus {
        display: none;
        width: 100%;
        height: 50px;
        position: absolute;
        left: 0;
        top: 0;
    }
    .index-nav-frame-line:focus .index-nav-frame-line-focus {
        display: block;
    }
}