@charset "utf-8"; /* banner */ .c-banner{ width: 100%; position: relative; } .c-banner img{ width: 100%; } .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: 25px 10px 25px 10px; position: absolute; top: 50%; margin-top: -53px; 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: 10px; height: 10px; border-radius: 50%; display: inline-block; background-color: white; opacity: 0.9; margin-left: 10px; } .c-banner .jumpBtn ul li:first-child{ margin-left: 0px; } @media screen and (max-width:768px) { .c-banner{ width: 100%; height: 200px; overflow: hidden; } .c-banner .banner ul li img{ width: 100%; height: 200px; position: absolute; left: 0; } }