.h5-max { width: 1200px; margin: 0 auto; } .h5-banner-img { width: 100%; height: 426px; margin: 57px 0 47px; } .tab-list { width: 100%; display: flex; text-align: center; } .tab-list li { flex: 1; } .tab-list img { width: 114px; height: 114px; } .tab-list p { font-size: 16px; margin-top: 10px; } .part-title { font-size: 26px; font-weight: bold; color: #000; display: inline-block; } .h5-live-wrap { background: #f3f6fc; padding: 82px 0 116px; margin-top: 52px; } .h5-live { margin: 0 auto; width: 1280px; } .part-tips { float: right; border-bottom: 1px solid #eee; width: 1080px; text-align: right; padding-bottom: 12px; transform: translatey(10px); } .vip-list ul{ display: flex; } .vip-list ul li{ flex:1; } .part-tips span { font-size: 16px; color: #333; margin-left: 22px; } .part-tips span:last-child { padding-right: 15px; background: no-repeat right center; background-size: 20%; } .item-part { overflow: hidden; margin-bottom: 24px; } .live-status { position: absolute; top: 18px; left: 18px; z-index: 2; } .live-list { position: relative; display: flex; } .live-tutor-bg { position: relative; background: no-repeat center; background-size: cover; width: 415px; height: 194px; } .live-count-down { position: absolute; bottom: 9px; right: 9px; padding: 0px 10px 2px; background: rgba(0, 0, 0, 0.35); border-radius: 20px; font-size: 12px; color: #fff; } .live-name { font-size: 16px; font-weight: bold; color: #000; height: 30px; } .live-tutor-name { font-size: 14px; color: #666; float: left; } .live-watch-number { font-size: 14px; color: #666; float: right; } .live-stas { overflow: hidden; } .live-item { -box-shadow: 0 0 10px #00ff00b2; display: inline-block; } .live-item:nth-child(2) { margin: 0 14px; } .live-detail { background: #fff; padding: 10px 15px 10px 10px; } .live-detail p{ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .vip-img { width: 100%; vertical-align: top; } .vip-name { font-size: 16px; color: #000; padding: 0 16px 0 10px; line-height: 1.35; white-space: normal; padding-top: 5px; height: 50px; } .vip-detail { font-size: 14px; color: #666; margin: 8px 10px 0; padding-bottom: 10px; } .vip-detail span { vertical-align: middle; display: inline-block; } .vip-tag { display: inline-block; vertical-align: middle; margin-right: 6px; } .verti:after { content: ''; display: inline-block; vertical-align: middle; height: 100%; } .vip-watch { color: #f8485e; display: inline-block; vertical-align: middle; float: right; margin-top: 3px; } .vip-item { display: inline-block; width: 305px; vertical-align: top; margin-right: 15px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 5px; overflow: hidden; position: relative; transition:top .5s; } .vip-item:last-child { margin-right: 0; } .vip-item:hover { top: -15px; /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);*/ } .emotion-list ul{ display: flex; } .emotion-list ul li{ flex: 1; } .emotion-list ul li img{ width: 100%; } .emotion-item { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 5px; overflow: hidden; position: relative; position: relative; transition:top .5s; } .emotion-item:hover { top: -15px; /*box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);*/ } .emotion-detail { padding: 0 10px 5px; } .live-item { box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); border-radius: 5px; overflow: hidden; } .vip-part { margin: 65px auto 80px; } .course-part { padding: 65px 0 68px; background: #f3f6fc; } .course-part .vip-part { margin: 0 auto; } .master-part { padding: 65px 0 80px; background: #f3f6fc; } .master-part .vip-part { margin: 0 auto; } .emotion-part { -padding: 103px 0 100px; } .emotion-name { font-size: 16px; color: #000; height:50px; } .emotion-watch { font-size: 14px; color: #666; margin-top: 2px; } .emotion-item { display: inline-block; vertical-align: top; width: 305px; margin-right: 15px; } .emotion-item:last-child { margin-right: 0; } .vip-content { background: #fff; } .by { margin-top: 0 !important; }