.categrayBox { position: absolute; bottom: 0; max-width: 1300px; left: 50%; transform: translateX(-50%); padding: 0 20px; width: 100%; bottom: 25%; } .moveBtn{ display:none; color:#fff; width:100%; height:40px; line-height:40px; text-align:left; background-color:#004c9d; white-space:nowrap; font-size:16px; padding-left:20px; border:none; } .categrayBox{ width:100%; height:auto; overflow:visible; } .categrayBox .content{ text-align:center; white-space:nowrap; overflow-x:auto; font-size: 0; padding: 10px 0; } .categrayBox li{ display:inline-block; min-width: 156px; font-size:0; text-align:center; background: #fff; margin: 0 10px; border-radius: 20px; overflow: hidden; box-shadow: 0px 2px 8px 0px rgba(255,255,255,0.5); } .link{ position:relative; } .yjTitle{ padding-left:0; width: 100%; padding: 0 20px; transition:all 0.5s ease; } .yjLink{ position:relative; color: #666666; font-size:16px; line-height: 40px; transition:all .5s ease; } .yjTitle.click{ background-color:#004c9d; } .yjTitle.click a{ color:#fff; } .backBtn{ display:none; } .yjTitle:hover{ background-color:#004c9d; } .yjTitle:hover a{ color:#fff; } .line_right{ display:none; } @media only screen and (max-width: 768px){ .categrayBox{ bottom: 15%; } }