.header-center { display: flex; align-items: center; height: 114px; margin-bottom: 50px; } .header-center a img { width: 126px; height: 46px; } .header-center .search { height: 45px; display: flex; margin-left: 200px; } .header-center .search input { width: 590px; } .header-center .search .search-btn { width: 90px; height: 45px; line-height: 45px; text-align: center; background: #ffc300; } .header-center .search .search-btn i { font-weight: 700; color: #000000; } .main { width: 100%; height: 2000px; border-top: 1px solid rgba(0, 0, 0, 0.3); box-shadow: 5px 0 0 rgba(0, 0, 0, 0.3); background: #ffffff; } .main .banner .w { display: flex; height: 474px; } .main .banner .w .banner-left { width: 228px; height: 474px; border: 1px solid #e5e5e5; margin-top: -50px; } .main .banner .w .banner-left dt { height: 50px; line-height: 50px; color: #222; font-size: 18px; margin-left: 14px; } .main .banner .w .banner-left dd { display: flex; justify-content: space-between; height: 26px; padding: 10px; } .main .banner .w .banner-center { display: flex; flex-direction: column; justify-content: space-between; width: 710px; margin: -50px 8px 42px; } .main .banner .w .banner-center .banner-center-top { height: 50px; display: flex; justify-content: center; align-items: center; font-size: 16px; font-weight: 700; color: #000; } .main .banner .w .banner-center .banner-center-top a { margin: 0 20px; } .main .banner .w .banner-center .banner-center-top :hover { color: #ff4542; } .main .banner .w .banner-center .banner-center-center { display: flex; flex-wrap: wrap; justify-content: space-between; width: 710px; height: 420px; margin-top: 7px; } .main .banner .w .banner-center .banner-center-center .banner-focus { width: 550px; height: 240px; margin-left: 10px; } .main .banner .w .banner-center .banner-center-center .banner-focus .swiper { width: 100%; height: 100%; } .main .banner .w .banner-center .banner-center-center .banner-focus .swiper-slide { text-align: center; font-size: 18px; background: #fff; /* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } .main .banner .w .banner-center .banner-center-center .banner-focus .swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover; } .main .banner .w .banner-center .banner-center-center .img-life { width: 140px; height: 240px; } .main .banner .w .banner-center .banner-center-center .img-hotel { width: 270px; height: 165px; margin: 12px 0 0 10px; } .main .banner .w .banner-center .banner-center-center .img-merchant { width: 140px; height: 165px; margin: 12px 0 0 10px; } .main .banner .w .banner-right { width: 240px; height: 424px; margin: 10px 0; } .main .banner .w .banner-right-register { display: flex; flex-direction: column; align-items: center; justify-content: space-around; width: 240px; height: 240px; border: 1px solid #e5e5e5; } .main .banner .w .banner-right-register img { width: 65px; height: 65px; margin-top: 24px; } .main .banner .w .banner-right-register p { color: #222; font-size: 16px; padding: 10px 0; } .main .banner .w .banner-right-register button { width: 118px; height: 38px; border: 1px solid #e5e5e5; border-radius: 40px; text-align: center; line-height: 38px; background: #ffffff; } .main .banner .w .banner-right-login { display: flex; flex-direction: column; align-items: center; justify-content: space-around; width: 240px; height: 165px; margin-top: 14px; border: 1px solid #e5e5e5; font-size: 16px; } .main .banner .w .banner-right-login img { width: 95px; height: 95px; } .main .banner .w .banner-right-login h3 { color: #222; font-weight: 500; } .main .banner .w .banner-right-login span { color: #ff4542; } .main .banner .w .banner-right-login b { color: #222; font-weight: bold; } .main .movie { position: relative; width: 1188px; } .main .movie .movie-hd { display: flex; justify-content: space-between; align-items: center; height: 44px; background: #fb3f60; } .main .movie .movie-hd .movie-hd-l { display: flex; align-items: center; position: relative; } .main .movie .movie-hd .movie-hd-l .triangle-l { position: absolute; top: 36px; left: 144px; width: 12px; height: 8px; background: #fff; clip-path: polygon(0 100%, 50% 0, 100% 100%); } .main .movie .movie-hd .movie-hd-l .triangle-r { position: absolute; top: 36px; left: 248px; width: 12px; height: 8px; background: #fff; clip-path: polygon(0 100%, 50% 0, 100% 100%); } .main .movie .movie-hd .movie-hd-l ul { display: flex; align-items: center; } .main .movie .movie-hd .movie-hd-l ul li { width: 80px; height: 43px; line-height: 43px; color: #fff; font-size: 16px; margin-left: 20px; cursor: pointer; } .main .movie .movie-hd .movie-hd-l h2 { width: 80px; color: #fff; margin-left: 20px; } .main .movie .movie-hd .movie-hd-l span { color: #fff; } .main .movie .movie-hd .movie-hd-r span { font-size: 16px; color: #ffffff; margin-right: 12px; } .main .movie .movie-bd button { display: none; position: absolute; top: 505; width: 40px; height: 40px; border-radius: 50%; border: none; background: #333; opacity: 0.8; } .main .movie .movie-bd button:first-of-type { position: absolute; top: 50%; left: 0; } .main .movie .movie-bd button:last-of-type { position: absolute; top: 50%; right: 0; } .main .movie .movie-bd button .iconfont.icon-left { color: #ffffff; font-size: 24px; } .main .movie .movie-bd button .iconfont.icon-rt { color: #ffffff; font-size: 24px; } .main .movie .movie-bd .movie-hot ul { display: flex; align-items: center; } .main .movie .movie-bd .movie-hot ul img { width: 214px; height: 298px; margin: 4px 16px 0 0; }