.banner{width:100%;height:auto;background:-webkit-radial-gradient(50% 40%,80% 100%,#6132b8 0,#131673 100%);background:-o-radial-gradient(50% 40%,80% 100%,#6132b8 0,#131673 100%);background:radial-gradient(80% 100% at 50% 40%,#6132b8 0,#131673 100%)} .banner-header{width:100%;height:auto;overflow:hidden;text-align:center;position:relative} .banner-title{text-transform: uppercase;width:100%;margin-top:60px;font-family:"Julius Sans One";font-size:50px;font-weight:700;line-height:1;color:#fff;text-shadow:0 6px 6px rgba(46,20,107,.45)} .banner-intro{padding:0 20px;margin-top:20px;font-size:18px;font-weight:300;line-height:30px;color:#d9f7ff} .banner-footer{ width:100%;height:auto;position:relative;margin-top:-30px;user-select:none;pointer-events:none;} .banner-footer img{width:100%;z-index:1;user-select:none;pointer-events:none;} @media (min-width :992px){ .banner-title{margin-top:80px;} .banner-intro{padding:0 80px} } .reader-list{display:grid;grid-template-columns:repeat(1,1fr);gap:var(--ace-gutter)} @media(min-width:992px){.reader-list{grid-template-columns:repeat(2,1fr)}} @media(min-width:1200px){.reader-list{grid-template-columns:repeat(3,1fr)}} .reader-item{width:100%;height:auto;overflow:hidden;border-radius:5px;border:1px solid rgba(150,50,255,.75);background:rgba(90,50,180,.1);padding:20px;position:relative;cursor:pointer} .item-info{display:block;width:100%;height:auto;overflow:hidden;text-decoration:none;color:inherit} .item-description{display:block;width:100%;height:auto;margin:20px 0;text-decoration:none;color:inherit} .reader-item h4{color:var(--ace-color-main)} .info-left{float:left;width:100px;height:100px;overflow:hidden;position:relative;border-radius:50%} .reader-avatar{width:100%;height:auto;overflow:hidden} .reader-badge{position:absolute;bottom:0;left:0;width:100%;height:25px;line-height:25px;color:#fff;background:rgba(15,15,15,.75);font-size:16px;text-align:center} .info-right{float:right;width:calc(100% - 115px);height:100px;overflow:hidden;position:relative} .reader-name{width:100%;height:30px;line-height:30px;text-align:center;font-size:30px;color:#5a1cb9} .reader-review{margin:15px 0 0;display:flex;align-items:center;justify-content:center} .review-star{width:120px;height:24px;background:url(../image/star-default.svg) repeat-x 0 0;background-size:24px;text-align:left} .review-star .star-item{display:inline-block;height:24px;text-align:center;background:url(../image/star-yellow.svg) repeat-x 0 0;background-size:24px} .review-rating{text-align:center;margin-top:5px} .review-intro{text-align:center} .reader-clusters{display:flex;flex-wrap:wrap;margin:0;padding:0} .reader-clusters a{margin-right:20px;color:#333} .reader-clusters a:hover{color:var(--ace-color-main)} .reader-clusters a:last-child{margin-right:0} .heading-title{width:100%;border-bottom:1px solid #eee;text-align:center;font-size:36px;color:var(--ace-color-main);padding:0 0 30px 0;margin-bottom:var(--ace-gutter);} .tag-list{display:block;text-align:justify;text-align-last:justify;padding: 0;} .tag-item{ display:inline-block;background:#f1f2f3;border:1px solid #e5e7eb;color:#333;border-radius:3px;padding:6px 10px;margin:0 10px 10px 0;line-height:1;white-space:nowrap;} .tag-item:hover{background:#e9ecef;border-color:#d7dbe0;color:#111} .tag-item:focus{outline:2px solid rgba(0,0,0,.12);outline-offset:2px}