/* k456独立头部样式 - 避免冲突 */
.k456-header { width: 100%; border-bottom: 1px solid #eee; }
.k456-inner { width: 1200px; margin: 0 auto; position: relative; }
.k456-logo { float: left; padding: 20px 0; overflow: hidden; }
.k456-logo a { text-indent: -99999em; overflow: hidden; display: block; width: 200px; height: 60px; background: url(../images/logo.png) no-repeat left center; background-size: contain; }
.k456-logo h1 { display: none; }
.k456-nav { float: right; height: 40px; padding: 30px 0; }
.k456-nav li { float: left; display: inline-block; margin: 0 10px; font-size: 20px; line-height: 40px; position: relative; transition: all 0.4s ease 0s; }
.k456-nav li em { display: none; }
.k456-nav li a { display: block; color: #333; padding: 0 10px; border-radius: 3px; }
.k456-nav li a:hover,
.k456-nav li.on > a,
.k456-nav li.cur > a { background-color: #178EEE; color: #fff; }
.k456-nav li ul { position: absolute; left: -1px; top: 40px; background: #fff; border: 1px solid #eee; border-radius: 0 0 3px 3px; width: 100%; padding: 5px 0; display: none; z-index: 5; }
.k456-nav li li { font-size: 14px; float: none; margin: 0; display: block; text-align: center; line-height: 2em; }
.k456-nav li li a { padding: 5px 10px; }
.k456-nav li li a:hover { border-radius: 0; }
.k456-navbtn { position: absolute; right: 0; top: 50%; transform: translateY(-50%); cursor: pointer; display: none; width: 25px; height: 20px; }
.k456-navbtn i { display: block; position: absolute; top: 50%; left: 0; margin-top: -1px; height: 2px; background-color: #999; width: 100%; }
.k456-navbtn i:before,
.k456-navbtn i:after { content: ''; display: block; height: 2px; background-color: #999; position: absolute; left: 0; width: 100%; }
.k456-navbtn i:before { top: -9px; }
.k456-navbtn i:after { bottom: -9px; }
.k456-clear { clear: both; }

/* 响应式 */
@media only screen and (max-width: 1024px) {
    .k456-nav { padding: 25px 0; }
    .k456-nav li { font-size: 16px; }
    .k456-logo a { width: 167px; height: 50px; }
}
@media only screen and (max-width: 960px) {
    .k456-nav { position: fixed; float: none; width: 100%; clear: both; width: 200px; z-index: 9; left: -200px; top: 0; height: 100%; background-color: rgba(0, 0, 0, .8); color: #fff; padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; transition: left .3s; }
    .k456-nav.open { left: 0; }
    .k456-nav ul { padding: 50px 0; }
    .k456-nav li { float: none; margin: 0; display: block; line-height: 45px; }
    .k456-nav li em { display: block; position: absolute; right: 0; top: 0; width: 45px; height: 45px; }
    .k456-nav li em:before { content: ''; display: block; width: 8px; height: 8px; border-right: 1px solid #fff; border-bottom: 1px solid #fff; transform: rotate(45deg); position: absolute; left: 50%; top: 50%; margin: -6px 0 0 -6px; transition: all .3s; }
    .k456-nav li em.open:before { transform: rotate(-135deg); margin-top: 0; }
    .k456-nav li a { color: #fff; padding: 0 45px 0 2em; }
    .k456-nav li a:hover,
    .k456-nav li.on > a,
    .k456-nav li.cur > a { background-color: transparent; }
    .k456-nav li ul { position: static; left: auto; top: auto; width: auto; padding: 0; border: none; background: none; }
    .k456-nav li li { text-align: left; line-height: 45px; }
    .k456-nav li li a { padding: 0 0 0 4em; }
    .k456-navbtn { display: block; }
}
@media only screen and (max-width: 768px) {
    .k456-logo { padding: 12.5px 0; }
    .k456-logo a { width: 133px; height: 40px; }
}
