.top_nav { height: 4rem; background-color: #ffffff; padding-top: .8rem; padding-left: .68rem; padding-right: .75rem; flex-direction: column; padding-bottom: .45rem; position: relative; } .top_nav.active{ position: fixed; top: 2rem; left: 0; width: 100%; } .top_nav .top, .top_nav .nav { width: 100%; } .top_nav .img { height: 1.02rem; } .top_nav .change { width: 6.95rem; } .top_nav .change a:nth-child(1) { width: 0.8rem; } .top_nav .change a:nth-child(2) { width: 0.98rem; } .top_nav .change a:nth-child(3) { width: 1.2rem; } .top_nav .change a:nth-child(4) { width: 0.98rem; } .top_nav .change a:nth-child(5) { width: 0.93rem; } .top_nav .change a img { width: 100%; } .top_nav .nav { position: relative; } .top_nav li { font-size: 0.6rem; color: #333333; margin-right: 1rem; flex-shrink: 0; } .top_nav li:last-child { margin: 0; } .top_nav li.active { font-weight: 700; color: #ff234d; } .top_nav .nav .menu { width: 2rem; height: 1rem; flex-shrink: 0; background: linear-gradient(to right, #ffffffcf, #ffffff); position: absolute; right: -.75rem; justify-content: flex-end; } .top_nav .nav .menu img { width: 0.57rem; margin-right: .5rem; } .top_nav .nav .menu.active img { transform: rotatez(180deg); } .top_nav .nav_hide { position: absolute; top: 4rem; width: 100%; height: auto; background-color: #ffffff; font-size: 0.6rem; padding: 0 .75rem 0 0.75rem; height: 0; overflow: hidden; z-index: 10; } .top_nav .nav_hide.active { height: auto; } .top_nav .nav_hide .item { height:auto; padding:.4rem 0; border-bottom: solid 0.03rem #ededed; } .top_nav .nav_hide .item .tabs{ flex-wrap: wrap; } .top_nav .nav_hide .item:last-child { border: none; } .top_nav .nav_hide b { font-weight: normal; margin-right: .78rem; color: #000000; } .top_nav .nav_hide span { line-height: 1.15rem; height: 1.15rem; border-radius: 0.1rem; border: solid 0.05rem #ededed; font-size: .55rem; padding: 0 .35rem; margin-right: .25rem; color: #666666; } .top_nav .nav_hide span.active { background: url(/uploads/image/shimg/tab_active.png) no-repeat; background-size: 100% 100%; border-color: transparent; color: #ffffff; } /* list_box */ .list_box .tabs { height: 1.05rem; margin: .38rem 0 .38rem .7rem; overflow-x: auto; } .list_box .tabs::-webkit-scrollbar{ display:none;l } .list_box .tabs span { font-size: 0.55rem; width: auto; height: 1.05rem; border-radius: 0.51rem; margin-right: .3rem; padding: 0 .5rem; flex-shrink: 0; } .list_box .tabs span.active { background-color: #c2c2c2; color: #ffffff; } .list_box>ul { padding: 0 .5rem; } .list_box>ul li { width: 100%; height: 3.75rem; background: #ffffff no-repeat bottom; background-size: 100%; box-shadow: 0rem 0rem 0.63rem 0rem rgba(12, 4, 7, 0.1); border-radius: .3rem; padding-left: .7rem; padding-right: 1rem; margin-bottom: .5rem; } .list_box>ul li .img { width: auto; height: 2.9rem; flex-shrink: 0; } .list_box>ul li .img img { height: 100%; } .list_box>ul li .mid { margin-left: .6rem; border-right: 1px solid #eeeeee; padding-right: .8rem; } .list_box>ul li .mid h3 { width: 7rem; color: #ec491c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: .7rem; } .list_box>ul li .mid .label { width: auto; flex-wrap: wrap; height: 2rem; margin-top: .2rem; } .list_box>ul li .mid .label span { width: 3rem; background: #ececec; font-size: .4rem; padding: .1rem 0; border-radius: .15rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .list_box>ul li .downlaod { width: 1.5rem; }