.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} } .collection{width:100%;display:grid;grid-template-columns:repeat(2, 1fr);gap:var(--ace-gutter);} @media (min-width:768px){ .collection{grid-template-columns:repeat(3, 1fr);} } .collection .article-item{width:100%;height:auto;overflow:hidden;border-radius:5px;border:1px solid #DDD;background:#fff;box-shadow:var(--shadow-main);} .collection .article-item img{width:100%;height:auto;overflow:hidden} .collection .article-item .item-title{width:100%;height:auto;min-height:0;font-size:18px;font-weight:400;line-height:25px;overflow:hidden;padding:15px 15px 10px;} .collection .article-item .item-info{width:100%;height:20px;line-height:20px;padding-left: 15px;margin: 0 0 5px;color:#666;} .collection .article-item .item-info span{color: #999;margin-right: 5px;} .collection .article-item .item-info:last-child{ margin-bottom: 15px;} .detail{width:100%;overflow:hidden;box-shadow:var(--shadow-main);border-radius:10px;background-color:#fff} .detail-title{width:100%;height:auto;overflow:hidden;margin:0 auto;padding:0 var(--ace-gutter);} .detail-title h1{width:100%;border-bottom:1px solid #eee;text-align:center;font-size:36px;color:var(--ace-color-main);line-height:1.2;padding:20px 0;margin-bottom:0;} .detail-author{ width:100%;padding:15px var(--ace-gutter) 0;} .detail-cluster{ margin-right:10px;} .detail-content{width:100%;height:auto;padding:15px var(--ace-gutter) var(--ace-gutter);overflow:hidden;position:relative;} .detail-left{float:left;width:100%;height:auto;overflow:hidden;margin-bottom:var(--ace-gutter);} .detail-left .detail-image img{width:100%;height:auto;border-radius:5px;} .detail-menu{width:100%;height:auto;overflow:hidden;background:#f1f2f3;color:#555;margin-top: 20px;padding:15px 20px;border-radius:10px;position:relative;border:1px solid #ddd;} .detail-menu .menu-title{width:100%;height:auto;cursor:pointer;font-size:25px;font-weight:700;color:var(--ace-color-main)} .detail-menu .menu-title i{position:absolute;top:10px;right:15px;font-size:30px;transition:transform .3s ease} .detail-menu .menu-list{text-transform:capitalize;counter-reset:item;font-size:18px;margin: 0;padding: 0;} .detail-menu .menu-list > li{margin-top:15px;margin-left: 15px;padding-left:15px;position: relative;} .detail-menu .menu-list > li:before{content:counters(item, ".") ". ";counter-increment:item;position: absolute;left: -10px;} .detail-menu .menu-list li ol{margin-top:5px;padding-left:30px;counter-reset:item} .detail-menu .menu-list li ol li{position: relative;padding-left:10px} .detail-menu .menu-list li ol li:before{content:counters(item, ".") ". ";counter-increment:item;position: absolute;left: -28px;} .author-profile { width: 100%;height: auto;overflow: hidden;margin-top: 20px;border-radius: 5px;background:#f1f2f3;padding: 0 20px 20px 20px;position: relative;} .author-title{padding: 10px 0 20px 0;width:100%;height:auto;cursor:pointer;font-size:25px;font-weight:700;color:var(--ace-color-main)} .author-info { width: 100%;height: auto;overflow: hidden;} .author-profile h3, .author-profile h4 { color: var(--ace-color-main);} .author-profile h3 { font-size: 24px;} .author-profile h4 { font-size: 20px;margin-left: 0.5rem;} .info-left { float: left;width: 100px;height: 100px;overflow: hidden;position: relative;border-radius: 50%;} .author-avatar { width: 100%;height: auto;overflow: hidden;} .author-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;} .author-name { width: 100%;height: 30px;line-height: 30px;text-align: center;font-size: 30px;color: #5a1cb9;} .author-review { margin: 10px 0 0;text-align: center;} .review-star { width: 120px;height: 24px;background: url(../image/star-default.svg) repeat-x 0 0;background-size: 24px;text-align: left;margin: 0 auto;display: inline-block;} .review-star .star-item { display: inline-block;height: 24px;background: url(../image/star-yellow.svg) repeat-x 0 0;background-size: 24px;} .review-intro { text-align: center;} .author-description { width: 100%;height: auto;margin: 20px 0;} .reader ul li { margin-bottom: 10px;} .author-expertise, .author-feature { list-style-type: disc;} .other-cluster { display: flex;flex-wrap: wrap;margin: 0;padding: 0 0 0 1rem;} .other-cluster a { margin-right: 20px;color: #333;} .other-cluster a:hover { color: var(--ace-color-main);} .other-cluster a:last-child { margin-right: 0;} .detail-right{float:left;width:100%;height:auto;overflow:hidden;padding-left:0;} .detail-right .detail-image{width:100%;height:auto;border-radius:5px;} .detail-right h2{width:100%;line-height:1.2;font-size:30px;margin:20px 0 20px 0;color:var(--ace-color-main)} .detail-right h2:first-child{margin-top:0;} .detail-right h3{width:100%;line-height:1.2;font-size:22px;margin:15px 0 15px 0;color:var(--ace-color-main)} .detail-right h4{width:100%;line-height:1.2;font-size:18px;margin:10px 0 10px 0;color:var(--ace-color-main);} .detail-right h4::before {content: "•";padding-right: 5px;} .article-tags{width:100%;margin-top:16px;} .tag-label{font-size:25px;font-weight:700;color:var(--ace-color-main);margin-bottom:8px;} .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} @media (min-width :992px){ .detail-left{width:30%;} .detail-right{float:right;width:70%;padding-left:30px;} .detail-menu{border:none;} .detail-menu .menu-title i{right:20px;} } .related-articles{ width: 100%;height: auto;overflow: hidden;background: #fff;box-shadow:var(--ace-shadow-main);border-radius: 10px;padding: var(--ace-gutter);margin-top: var(--ace-gutter);} .related-articles h3 {font-size:25px;font-weight:700;color:var(--ace-color-main);margin-bottom:10px;margin-top: -3px;} @media (min-width :992px){ .related-articles h3 {margin-top: -10px;margin-bottom: 15px;} }