.index-nav{width: 100%;border-bottom: 1px solid #eeeeee;height: 50px;box-sizing: border-box;background:white;} .index-nav-frame{width: 1200px;margin: 0 auto;} .index-nav-frame-line{color: #fff;font-size:16px;float: left;position: relative;display: block;outline: none;cursor: pointer;width: 100px;line-height: 30px;text-align: center; } .index-nav-frame-line.active{color:#b63b4d;} .index-nav-frame-line-center{height: 0;color:#999;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 */ margin-bottom:10px; } .index-nav-frame-line-li{width: 100%;font-weight: 500;text-align:center;background: #fff;opacity: 0.55; color: #999; font-size:16px; } .index-nav-frame-line-li:hover{background:#0B6598;opacity: 0.55;color:#000;} .index-nav-frame-line-li:hover a{color:#fff;} .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:#fff;} .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;} }