/*首页轮播图*/ .c-container { position: relative; width: 100%;padding:0 2.8rem;} .c-banner1 { background: #fff; } .c-banner1 .swiper-slide{ position: relative; overflow: hidden; } .c-banner1 .swiper-slide img { width: 100%; height: auto; object-fit: cover; -webkit-transition: all 7s; transition: all 7s; } .c-banner1 .swiper-slide .c-bg2 { display: none; } .c-banner1 .swiper-slide-active img{ transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); } .c-banner1 .swiper-slide .c-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; color: #fff; /*background: url(../images/mbl.png)repeat;*/ } .c-banner1 .swiper-slide .c-wrap .c-title{ font-size: 80px; line-height: 100px; text-shadow: 0 2px 10px rgba(0,0,0,.3); } .c-banner1 .swiper-slide .c-wrap .c-text { padding: 30px 0 75px; font-size: 40px; line-height: 56px; text-shadow: 0 2px 10px rgba(0,0,0,.3); } .c-banner1 .swiper-pagination-bullet { opacity: 1; background: none; } .c-banner1 .c-dot { position: absolute; bottom: 5%; left: 0; width: 100%; } .c-banner1 .swiper-pagination{ position: relative; text-align: left; } .loading { margin: 0 5px; width: 38px; height: 38px; position: relative; border: 4px solid transparent; background: transparent; } .loading.swiper-pagination-bullet-active { border-color: rgba(255,255,255,.2); } .loading .c-progress { position: absolute; width: 8px; height: 8px; background-color: #fff; border-radius: 50%; left: 11px; top: 11px; line-height: 120px; text-align: center; } .loading.swiper-pagination-bullet-active .c-progress { background-color: #bb1c14; } .loading .left, .loading .right { opacity: 0; width: 19px; height: 38px; overflow: hidden; position: absolute; left: -4px; top: -4px; overflow: hidden; } .loading.swiper-pagination-bullet-active .left,.loading.swiper-pagination-bullet-active .right { opacity: 1; } .loading .right { left: auto; right: -4px; top: -4px; } .loading .left:after, .loading .right:after { content: ""; position: absolute; display: block; top: 0; left: 0; width: 19px; height: 38px; border: 4px solid #fff; border-radius: 19px 0 0 19px; border-right: 0; } .loading .right:after { content: ""; position: absolute; display: block; border-radius: 0 19px 19px 0; border: 4px solid #fff; border-left: 0; } .loading.swiper-pagination-bullet-active .left:after { transform-origin: right center; /* animation-iteration-count: infinite; */ animation-fill-mode: forwards; animation-duration: 3.9s; animation-timing-function: linear; animation-name: spin-left; } .loading.swiper-pagination-bullet-active .right:after { transform-origin: left center; animation-duration: 3.9s; /* animation-iteration-count: infinite; */ animation-timing-function: linear; animation-name: spin-right; } @keyframes spin-right { 0% { transform: rotate(180deg); } 50% { transform: rotate(360deg); } 100% { transform: rotate(360deg); } } @keyframes spin-left { 0% { transform: rotate(180deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes c-zoom { 0% { transform:scale(1,1); -webkit-transform:scale(1,1); } 100% { transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); } } @keyframes c-zoom { 0% { transform:scale(1,1); -webkit-transform:scale(1,1); } 100% { transform:scale(1.2,1.2); -webkit-transform:scale(1.2,1.2); } } .c-zoom { -webkit-animation-name: c-zoom; animation-name: c-zoom; } @media (max-width: 765px) { .c-banner1 .swiper-slide .c-bg2 { display: block;} .c-banner1 .swiper-slide .c-bg2 img{ height: 100vh;} .c-banner1 .swiper-slide .c-bg { display: none; } }