* { margin: 0; padding: 0; } .member-privelege-wrap { position: relative; } .image-comp { background: url(https://p1.lefile.cn/fes/cms/2024/06/06/rv7lwqrn6pvglwnrgdtpze8khcdtvz877449.png) no-repeat center center; height: 470px; } .member-privelege-wrap .top-banner-wrap .image-comp .banner-image { display: block; height: 470px; margin: 0 auto; } .member-privelege-wrap .fake-div { } .member-privelege-wrap .fake-div .brand-wrap { width: 1200px; margin: auto; } .member-privelege-wrap .fake-div .brand-wrap .content-comp { display: flex; flex-wrap: wrap; } .member-privelege-wrap .fake-div .brand-wrap .content-comp .content-card { width: 380px; height: 360px; background: #fff; box-shadow: 0 0 10px 0 rgba(153, 153, 153, .1); border-radius: 2px; padding: 0 14px; box-sizing: border-box; margin-bottom: 30px; margin-right: 29px; } .member-privelege-wrap .fake-div .brand-wrap .content-comp .content-card:nth-child(3n) { margin-right: 0px; } .member-privelege-wrap .fake-div .brand-wrap .content-comp .content-card:hover { box-shadow: 4px 4px 10px 4px rgba(153, 153, 153, .1); transition: .2s; } .member-privelege-wrap .fake-div .brand-wrap .content-comp .content-card.last:hover { box-shadow: 0 0 10px 0 rgba(153, 153, 153, .1); } .member-privelege-wrap .fake-div .brand-wrap .content-comp .content-card .card-img-comp { display: flex; align-items: center; justify-content: center; height: 189px; border-bottom: 1px solid #c4c4c4; margin: 0 16px 20px; } .member-privelege-wrap .fake-div .brand-wrap .content-comp .content-card .card-img-comp .brand-logo-img { display: block; margin: 0 auto; } .member-privelege-wrap .fake-div .brand-wrap .content-comp .content-card .card-info .card-title { margin: 0; text-align: center; font-size: 18px; height: 18px; line-height: 18px; color: #252525; font-weight: 700; margin-bottom: 15px; } .member-privelege-wrap .fake-div .brand-wrap .content-comp .content-card .card-info .label-comp { display: flex; margin-bottom: 26px; flex-direction: row; flex-wrap: nowrap; justify-content: center; } .member-privelege-wrap .fake-div .brand-wrap .content-comp .content-card .card-info .label-comp .label-span { display: inline-block; background: rgba(32, 119, 255, .1); border-radius: 2px; font-size: 14px; color: #2077ff; height: 30px; line-height: 30px; padding: 0 10px; box-sizing: border-box; font-weight: 400; margin-right: 10px; } .member-privelege-wrap .fake-div .brand-wrap .content-comp .content-card .card-info .label-comp .label-span:last-child { margin-right: 0px; } .member-privelege-wrap .fake-div .brand-wrap .content-comp .content-card .card-info .card-btn { width: 320px; height: 40px; line-height: 40px; background-image: linear-gradient(104deg, #5698ff 0%, #2077ff 100%); border-radius: 2px; font-size: 16px; color: #fff; text-align: center; cursor: pointer; margin: 0 auto; } .member-privelege-wrap .fake-div .brand-wrap .content-comp .content-card .last-card-title { margin-top: 92px; margin-bottom: 59px; text-align: center; font-size: 24px; color: #252525; font-weight: bold; } .member-privelege-wrap .fake-div .brand-wrap .content-comp .content-card .last-card-desc { width: 264px; font-size: 16px; color: #5f5f5f; text-align: center; margin: 0 auto; } .member-privelege-wrap .fake-div .brand-wrap .rule-content { padding: 20px 30px; background: #fff; box-shadow: 0 0 10px 0 rgba(153, 153, 153, .1); border-radius: 2px; margin-bottom: 40px; } .member-privelege-wrap .fake-div .brand-wrap .rule-content .rule-title { font-size: 18px; color: #252525; font-weight: 600; margin-bottom: 15px; } .member-privelege-wrap .fake-div .brand-wrap .rule-content .rule-item { display: block; font-size: 16px; color: #5f5f5f; font-weight: 400; }