.header { height: 390px; } .header img{ width: 100%; height: 100%; object-fit: cover; } .header_menu { height: 70px; background: rgba(34,34,34,.5); position: fixed; width: 100%; z-index: 99; } .header_menu .logo { width: 81px; height: 31px; margin-top: 19px; } .search { position: absolute; margin: 0 auto; left: 0; top: 13px; right: 0; width: 391px; height: 44px; } .search input { height: 100%; width: 303px; background: hsla(0,0%,100%,.1); border-top-left-radius: 999px; border-bottom-left-radius: 999px; padding: 0 24px; box-sizing: border-box; font-size: 14px; color: hsla(0,0%,100%,.8); } .search .button { width: 88px; height: 100%; background-color: #fe3666; color: #fff; border-top-right-radius: 999px; border-bottom-right-radius: 999px; text-align: center; line-height: 44px; } .search .button i{} .search .button span{} .login { margin-top: 19px; } .login ul { overflow: hidden; float: left; } .login ul li { float: left; color: #fff; text-align: center; margin:0 15px; } .login ul li i{ font-size: 20px; margin-bottom: 4px; display: inline-block; } .login ul li p { font-size: 14px; font-weight: 500; } .login .login_text { width: 84px; height: 43px; border-radius: 21px; background: #eb3661; text-align: center; line-height: 43px; font-size: 18px; color: #fff; margin-left: 15px; } .navbar { margin: 40px 0; } .navbar li { float: left; width: 92px; height: 40px; border-radius: 30px; text-align: center; line-height: 40px; background: #f0f0f0; margin-left: 44px; } .navbar li a { color: #222; font-size: 15px; font-weight: 600; } .video {} .video .video_d { width: 710px; } .video_d_title, .video_hot_title { margin-bottom: 24px; line-height: 42px; height: 42px; padding-right: 18px; } .video_d_name p, .video_hot_title p{ font-size: 27px; color: #111; font-weight: bolder; margin-right: 24px; display: inline-block; vertical-align: middle; } .video_d_title .video_d_name span{ font-size: 13px; color: #999; } .video_d_title .video_d_name i{ font-size: 12px; } .video_d_name .dd { display: inline-block; position: relative; top: 2px; } .video_d_page i{ font-size: 12px; color: #d0d0d0; } .video_d_page span{ font-size: 13px; color: #666; margin: 0 18px; } .video_d ul li { float: left; width: calc(100% / 4 - 18px); margin-right: 18px; margin-bottom: 46px; } .video_d ul li img { width: 100%; border-radius: 4px; } .video_d ul li p { font-size: 15px; color: #111; margin-top: 16px; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .video_d ul li .desc {} .video_d ul li .desc i { font-size: 16px; margin-right: 6px; } .video_d ul li .desc span { color: #999; font-size: 13px; } .video .video_hot { width: 416px; } .video_hot_list { background: #fbfbfb; border-radius: 4px; padding: 0 16.5px; overflow: hidden; } .video_hot_list li { height: 69px; position: relative; border-bottom: 1px solid #f2f2f2; padding-bottom: 15px; margin-bottom: 15px; padding-top: 15px; box-sizing: border-box; } .video_hot_list li .nums{ width: 35px; height: 38px; background: url("https://s2-10623.kwimgs.com/udata/pkg/cloudcdn/img/hot.f3112fb8.svg"); background-repeat: no-repeat; line-height: 38px; text-align: center; background-position: 0 20px; } .video_hot_list li .nums span{ font-size: 25.6px; color: #fe3666; font-weight: 700; } .video_hot_list li .text{ margin-left: 5.6px; } .video_hot_list li .text .title{ font-size: 15px; font-weight: 500; line-height: 15.6px; margin-bottom: 4px; } .video_hot_list li .text i{ font-size: 12px; } .video_hot_list li .text span{ color: #999; font-size: 13px; } .video_hot_list .hot { position: absolute; right: 0; top: 15px; width: 16px; height: 16px; }