body{background-color:#f7f7f7;padding-top:104px}.page-shop{width:1224px;margin:0 auto 48px;display:flex;align-items:flex-start}.page-shop .left-nav{width:180px;background:#fff;border:1px solid #e6e6e6;border-radius:6px;padding:12px 0;margin-right:24px}.page-shop .left-nav .item{position:relative;display:block;padding:12px 0 12px 48px;font-size:14px;color:rgba(0,0,0,.45)}.page-shop .left-nav .item.active,.page-shop .left-nav .item:hover{color:rgba(0,0,0,.7)}.page-shop .left-nav .item.active::before,.page-shop .left-nav .item:hover::before{content:'';display:block;height:12px;width:4px;position:absolute;left:32px;top:50%;transform:translateY(-50%);background:#ffd200}.page-shop .right-content{width:1020px;margin-bottom:20px}.page-shop .right-content .row{display:flex;flex-wrap:wrap}.page-shop .right-content .suit{cursor:pointer;width:498px;margin-bottom:20px;flex:none;border:1px solid #e6e6e6;border-radius:4px;background-color:#fff}.page-shop .right-content .suit:nth-child(2n) {margin-left:24px}.page-shop .right-content .suit .banner{height:238px;background-size:cover;background-position:center center}.page-shop .right-content .suit .text-group{height:80px;display:flex;justify-content:center;align-items:center;flex-direction:column}.page-shop .right-content .suit .text{font-size:20px;color:rgba(0,0,0,.7);line-height:26px;font-weight:bold;text-align:center}.page-shop .right-content .suit .text-sm{margin-top:6px;font-size:12px;color:#4795e9;text-align:center;line-height:16px}.page-shop .right-content .suit.active{border-bottom:4px solid #ffd200}.page-shop .right-content .card-list{position:relative;margin-bottom:24px;background:#fff;width:100%;border:1px solid #e6e6e6;border-radius:4px;padding:23px;display:flex;flex-wrap:wrap}.page-shop .right-content .card-list .card{height:372px;width:300px;padding:0 24px;margin:12px;border:1px solid #e6e6e6;position:relative;background-color:#fff;border-radius:4px;display:flex;flex-direction:column;align-items:center;transition:box-shadow .25s , transform .25s;text-align:center}.page-shop .right-content .card-list .card .img{margin-top:20px;height:172px}.page-shop .right-content .card-list .card .price{margin-top:8px;font-size:16px;color:#f7b300;line-height:20px}.page-shop .right-content .card-list .card .name{margin-top:12px;font-weight:bold;font-size:16px;color:rgba(0,0,0,.7);text-align:center;line-height:20px;min-height:40px}.page-shop .right-content .card-list .card .tip{margin-top:8px;font-size:16px;color:rgba(0,0,0,.45);line-height:20px}.page-shop .right-content .card-list .card .buy{position:absolute;left:50%;bottom:36px;transform:translateX(-50%);margin-top:12px;padding:0 36px;height:44px;line-height:44px;text-align:center;background-image:linear-gradient(-135deg,#ffeb00 0%,#ffd200 100%);border-radius:100px;font-size:12px;color:rgba(0,0,0,.7);font-weight:bold}.page-shop .right-content .tri-left{left:240px}.page-shop .right-content .tri-right{right:240px}.page-shop .right-content .tri-left,.page-shop .right-content .tri-right{position:absolute;top:-15px;width:0;height:0;border-left:16px solid transparent;border-right:16px solid transparent;border-bottom:16px solid #e6e6e6}.page-shop .right-content .tri-in{position:absolute;top:1px;left:-15px;width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-bottom:15px solid #fff}