body { margin: 0; padding: 0; } h2, h4 { font-weight: normal; } #focus_show { position: relative; width: 1440px; margin: 48px auto; } #focus_show .swiper-container { padding-bottom: 20px; overflow:unset } .swiper-slide{ background-color: #f0f0f0;} #focus_show .swiper-slide { width: 818px; height: 520px; position: relative; cursor:pointer; overflow: hidden; background:#fff; -webkit-box-shadow: 0 0 12px rgba(153, 153, 153, .4); -moz-box-shadow: 0 0 12px rgba(153, 153, 153, .4); -ms-box-shadow: 0 0 12px rgba(153, 153, 153, .4); box-shadow: 0 0 12px rgba(153, 153, 153, .4); } #focus_show .swiper-slide .video{ margin:0 ; width: 818px; height: 520px; overflow: hidden; position: relative; } #focus_show .swiper-slide .video img{ width: 818px; height: 520px; object-fit: cover; } #focus_show .swiper-slide .video .ii_mask{ width: 100%; height: 320px; position: absolute; bottom: 0; z-index: 1; background-image: linear-gradient(rgba(36, 36, 36, 0), #242424 ) } #focus_show .swiper-slide .video i{ width: 72px; height: 72px; font-size: 72px; color: rgba(255, 255, 255, .7) ; position: absolute; left: 50%; top: 50%; margin-top:-36px; margin-left: -36px; z-index: 9} #focus_show .swiper-slide .video:hover > i{ color: rgba(255, 255, 255, .9) ; } #focus_show .swiper-slide .video .title{ display: flex; flex-direction: row; justify-content: space-between; margin:32px 40px; align-items: center; position: absolute; left: 0; bottom: 0; z-index: 2;} #focus_show .swiper-slide .video .title .head{ display: block; width: 64px; height: 64px; overflow: hidden; -webkit-border-radius: 32px; -moz-border-radius: 32px; -ms-border-radius: 32px; border-radius: 32px; } #focus_show .swiper-slide .video .title .head img{ display: block; width: 100%; height: auto; object-fit: cover;} #focus_show .swiper-slide .video .title .txt{ flex: 1; display: flex; flex-direction: column; justify-content: space-around; height: auto; overflow:hidden} #focus_show .swiper-slide .video .title .txt h3{ font-size: 28px; font-weight: 600; line-height: 1.6; white-space: nowrap; overflow: hidden; color: #fff;text-overflow: ellipsis;} #focus_show .swiper-slide .video .title .txt p{ display: flex; flex-direction: row; align-items: center; font-size: 16px; line-height: 1.6; color: #fff;} #focus_show .swiper-slide .video .title .txt p em{ margin: 0 4px 0 12px; font-size: 20px; color: #fff;} #focus_show .swiper-pagination { width: 100%; bottom: -26px; } #focus_show .swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 5px; background-color: rgba(25, 110, 230, .25); width: 11px; height: 11px; opacity: 1; } #focus_show .swiper-pagination-bullets .swiper-pagination-bullet-active { background-color: rgba(25, 110, 230, .9); } #focus_show .swiper-button-prev { left: 32px; top: 50%; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #fff; background: rgba(102, 102, 102, 0.5); } #focus_show .swiper-button-prev i{ display: flex; align-items: center; justify-content: center; font-size: 18px; margin: 0 auto; color: #fff; opacity: .7 } #focus_show .swiper-button-prev:hover i{ opacity: 1 } #focus_show .swiper-button-prev::after{ content: ''; } #focus_show .swiper-button-next { right: 32px; top: 50%; width: 32px; height: 32px; border-radius: 50%; border: 1px solid #fff; background: rgba(102, 102, 102, 0.5); } #focus_show .swiper-button-next i{ display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; font-size: 18px; margin: 0 auto; color: #fff; opacity: .7 } #focus_show .swiper-button-next:hover i{ opacity: 1 } #focus_show .swiper-button-next::after{ content: ''; } @media screen and (min-width:1024px) and (max-width:1440px){ #focus_show { width: 880px; overflow: hidden; } #focus_show .swiper-slide { width: 380px; height: 320px; /*height: auto;*/ } #focus_show .swiper-slide .video img{ width: 380px; height: 320px; object-fit: cover; } #focus_show .swiper-slide .video{ width: 380px; height: 320px; } #focus_show .swiper-button-prev {left: 0} #focus_show .swiper-button-next {right: 0;} #focus_show .swiper-slide .video .title .txt h3{ font-size: 20px; } } @media screen and (min-width:768px) and (max-width:1023px){ #focus_show { width: 768px; margin: 48px auto 24px; } #focus_show .swiper-slide { /* width: 531px; height: 352px; */ width: 380px; height: auto; } #focus_show .swiper-container{ padding-bottom:48px; overflow:hidden;} #focus_show .swiper-pagination{ bottom: 0px; } #focus_show .swiper-slide .video{ width: 380px; height: 320px; } #focus_show .swiper-slide .video img{ width: 100%; height: 100%; object-fit: cover; } #focus_show .swiper-slide .video .title .txt h3{ font-size: 20px; } #focus_show .swiper-button-prev {left: 0} #focus_show .swiper-button-next {right: 0;} } @media screen and (max-width:768px){ #focus_show { width: 100%; margin: 24px auto 0; } #focus_show .swiper-slide { width: 80%; height: auto; overflow: hidden; } /*#focus_show .swiper-slide .txt{ padding: 12px 0; font-size: 16px;} #focus_show .swiper-slide img{border-radius:16px; }*/ #focus_show .swiper-container{ padding-bottom:48px; overflow: hidden; } #focus_show .swiper-pagination{ bottom: 12px; } #focus_show .swiper-slide .title{ margin:14px; } #focus_show .swiper-slide .title .txt{ margin: 0 0 0 14px;} #focus_show .swiper-slide .title .txt p{ white-space: nowrap; overflow: hidden; text-overflow: ellipsis;} #focus_show .swiper-slide .title .head{ width: 48px; height: 48px; border-radius: 0; } #focus_show .swiper-slide .video{ width:auto; margin: 0; height:140px; } #focus_show .swiper-slide .video .title{ margin: 12px; ; } #focus_show .swiper-slide .video img{ width: 100%; height: 100%; object-fit: cover; } #focus_show .swiper-slide .video i{ width: 48px; height: 48px; margin-left: -24px; margin-top: -24px; font-size: 48px; } #focus_show .swiper-button-prev {left: 0; top: 82px;} #focus_show .swiper-button-next {right: 0; top: 82px;;} #focus_show .swiper-slide .video .title .txt h3{ font-size: 18px; } }