.c-banner{ width: 1200px; position: relative; margin: 0 auto;} .c-banner img{ width: auto;} .c-banner .banner ul{ list-style: none; padding-left: 0px; margin-bottom: 0px;} .c-banner .banner ul li{ position: absolute display: none; opacity: 0;} .c-banner .banner ul li:nth-child(1){ opacity: 1; display: block;} .c-banner .banner ul li img{ width: 100%; position: absolute; top: 0px;} .c-banner .banner ul li:first-child img{ position: relative;} .c-banner .nexImg,.c-banner .preImg{ padding: 10px; position: absolute; top: 50%; margin-top: -53px; background: #959595; opacity: 0.5; border-radius: 5px; z-index: 10;} .c-banner .nexImg:hover,.c-banner .preImg:hover{ opacity: 0.8;} .c-banner .nexImg{ right: 0px;} .c-banner .nexImg img,.c-banner .preImg img{} .c-banner .jumpBtn{ width: 100%; position: absolute; bottom: 20px; text-align: center;} .c-banner .jumpBtn ul{ margin-bottom: 0px; padding: 0px;} .c-banner .jumpBtn ul li{ width: 12px; height: 12px; border-radius: 50%; display: inline-block; background-color: none opacity: 0.9; border:1px solid #fff; margin-left: 10px;} .c-banner .jumpBtn ul li:first-child{ margin-left: 0px;} @media screen and (max-width:768px) { .c-banner{ width: 100%; height: 345px; overflow: hidden;} .c-banner .banner ul li img{ width: 768px; height: 345px; position: absolute; left: 50%; margin-left: -384px;} }