/* head */
.v-page {display: flex; height: 100%; flex-direction:column;}
.v-head{height: .88rem; display: flex; align-items: center; width: 100%; background: #fff; border-bottom: 1px solid #fafafa;}
.v-head *{font-size: .28rem; color:#46464B;}

.v-head-back{height: .36rem;  margin-left: .32rem; display: block;}
.v-head-thumb{width: .68rem; height: .68rem; background:#fff; display: flex; justify-content: center; align-items: center; overflow: hidden; border-radius: 100%; border-radius: 100%; border: 1px solid #d6d6d6;}
.v-head-nickname{padding-left: .16rem;}
.v-head-concern{height: .52rem; display: block;}
.v-head-share{padding-left: .2rem; padding-right:0.4rem;height: .35rem; display: block;}
/* head */

.v-skeleton{display: block; width: 100%; position: fixed;left:0; top: 0; z-index: 99999;}

/* body */
.v-view{flex:1; width: 100%; overflow: auto; -webkit-overflow-scrolling:touch;}
.v-body{min-height: 100%;}

/* body */
.v-info-title{padding: .40rem .30rem .20rem .30rem; font-size: .36rem; color:#2D2D34 ; display: flex;}
.v-info-body{padding: 0 .3rem; font-size: .3rem; color:#46464B ; line-height: .46rem;}
.v-info-body *{font-size: .3rem; color:#46464B ; line-height: .46rem;}

.v-tag-wrap{margin: .24rem 0 0 .3rem; height: .6rem; overflow-x: scroll;overflow-y: hidden;  white-space: nowrap;}
.v-tag-body{height: 0.6rem; display:inline-block; align-items: center; vertical-align: top;}
.v-tag{border: 1px solid #FFA4C2; height: .5rem; border-radius: .3rem; color:#FF4A82; font-size: 0.24rem;  margin-left: .2rem; display: inline-block; vertical-align: top; padding:0 0.2rem; line-height:0.5rem;}
.v-tag:first-of-type{margin-left: 0 !important;}
.v-tag *{color:#FFA4C2; font-size: .24rem;}
.v-num{font-family: 'PingFangSC-Regular'; font-size: 0.28rem;}

.v-pub-time{margin: .26rem 0 0 .3rem; font-size: .2rem; color:#B3B4C4 ;}
.v-pub-time *{font-size: .2rem; color:#B3B4C4 ;}

.v-prod-wrap{margin-top:0.25rem;}
.v-prod-col{display: flex; justify-content: center;}
.v-prod{border: 1px solid  #f0f0f0; box-shadow: 1px 0px 10px #f0f0f0; width: 100%; display: flex;  padding: 0.1rem; position: relative; border-radius: 5px;}
.v-prod-brandname{ font-size: 0.24rem; color: #5A5A5F; font-weight:bold; width:110px; overflow-x: hidden; text-overflow: ellipsis; display: block; white-space: nowrap;}
.v-prod-brand-wrap{width: 0.34rem; height: 0.34rem; border-radius: 100%; overflow:hidden; border: 1px solid #f0f0f0; position: absolute; right: 0.12rem; top: 0.12rem; background: #fafafa;}
.v-prod-try{width: 0.98rem; position: absolute; right: 0.12rem; bottom: 0.12rem;}
.v-prod-info{width: 70%; display: flex; justify-content:space-around; flex-direction: column; margin-left: .2rem;}
.v-prod-to{position: absolute; right: .3rem; top: 50%; transform: translateY(-50%); height: .3rem;}
.v-prod-pages{width: 100%; display: flex; justify-content: center; margin-top: .2rem;}
.v-checked{width: 0.52rem;}

.v-line{margin-top: .3rem; border-bottom: 1px solid #ededed; width: 100%;}
.v-split-line{border-top:1px solid #ededed ; margin-left: auto; margin-right: auto;}
.test{justify-content: center; align-items: center; align-content: center;}

.v-author-wrap{width: 0.6rem; height: 0.6rem; border: 1px solid #fafafa; overflow:hidden; border-radius: 100%;}
.v-author-input{width: 6.18rem; height: 0.7rem; background: #F4F5F7; color:#8E8D99; font-size: 0.28rem; display: flex; align-items: center; padding-left: 0.36rem; border-radius: 0.6rem;}
.v-comment-thumb{width: 100%;}
.v-comment{padding: .3rem; display: flex; position:relative;}
.v-comment-head{width: .6rem; height: .6rem; overflow: hidden; display: flex; justify-content: center; align-items: center;border-radius: 100%;}
.v-comment-nickname{font-size: .24rem; color:#8E8D99; }
.v-comment-text{margin-top: .2rem; color:#46464B; font-size:.28rem; line-height: .4rem; word-break: break-all;}
.v-comment-s-thumb{width: 1.56rem; height:1.56rem; overflow: hidden; border-radius: 0.12rem;}
.v-comment-line{border-bottom: 1px solid #ededed; width: 90%; position: absolute; left:50%; bottom: 0; transform: translateX(-50%);}
.v-comment-m-thumb{width: 1rem; height: 1rem; overflow: hidden; }

.v-remark-thumb{width: 0.82rem; height: 0.82rem; background: #fafafa; overflow: hidden; border-radius: 0.08rem;}
.v-remark{margin-top: .2rem; display: flex;}
.v-remark-head{width: .4rem; height: .4rem; overflow: hidden; display: flex; justify-content: center; align-items: center;border-radius: 100%;}
.v-remark-nickname{font-size: .24rem; color:#8E8D99; }
.v-remark-text{margin-top: .2rem; color:#46464B; font-size:.28rem; line-height: .4rem;}

.v-recom-title{margin: 0 auto; color:#46464B; font-size: .34rem; padding: .3rem 0 0.1rem .3rem; font-weight:bold;}
.v-recom-nickname{font-size: 0.22rem; margin-left:0.8rem; display:inline-block; color:#8E8D99; white-space: nowrap; width:75px; overflow: hidden; text-overflow: ellipsis;}
.v-recom-wrap{width: 92%; margin: .24rem auto 0 auto; column-count: 2; column-gap: .2rem; }
.v-recom-item{width: 100%; background:#fff; border-radius: 5px; display: inline-block; margin: .1rem 0; }
.v-recom-thumb{display: block; width: 100%; border-top-left-radius: 5px; border-top-right-radius: 5px;}
.v-recom-play{position: absolute; right: 0.2rem; top:0.2rem; width:0.5rem; display: block; z-index:99;}
.v-recom-head{width: .56rem; height: .56rem; overflow:hidden; margin-left: .15rem; display: flex; justify-content: center; align-items: center; border-radius: 100%;border: 1px solid #fafafa;}
.v-recom-item-title{font-size: 0.26rem; padding: 0 0.2rem;color:#46464B ; font-weight: bold; line-height:0.36rem; margin: 5px 0;}

.v-foot{height:0.88rem; width: 100%; display: flex; align-items: center; border-top: 1px solid #fafafa; }
.v-share-foot{height:1.24rem; width: 100%; display: flex; align-items: center; border-top: 1px solid #fafafa;justify-content: space-between; box-shadow: 0 1px 0.1rem #dadada;}
.v-share-logo{height:0.84rem; margin-left: 0.3rem;}
.v-share-open{height: 0.7rem; margin-right: 0.3rem;}
.v-foot-input-wrap{background: #F4F5F7; border: 1px solid #ededed;  height: .6rem; border-radius: .3rem; width:3.82rem; margin-left: .3rem; display: flex; align-items: center; font-size:0.24rem; color:#979797 ; padding-left: 0.34rem;}
.v-foot-input{display: block; background:#F4F5F7; width: 90%; height: 90%; border: none; outline: none; color: #46464B; }
.v-foot-icon-wrap{width: 20px; height: 20px; display: flex; justify-content: center; align-items: center; position: relative; }
.v-foot-tips-one{background:#ff5373; border-radius: .3rem; position: absolute; left: 60%; top:-32%; font-size: .16rem; color: #fff; display: flex; justify-content: center;align-items: center; width:.45rem; z-index:99;  height: .26rem; width:0.36rem; padding-top: 1px; pointer-events: none;}
.v-foot-tips-two{background:#ff5373; border-radius: .3rem; position: absolute; left: 60%; top:-32%; font-size: .16rem; color: #fff; display: flex; justify-content: center;align-items: center; width:.45rem; z-index:99;  height: .26rem; width:0.44rem;padding-top: 1px; pointer-events: none;}
.v-foot-tips-three{background:#ff5373; border-radius: .3rem; position: absolute; left: 60%; top:-32%; font-size: .16rem; color: #fff; display: flex; justify-content: center;align-items: center; width:.45rem; z-index:99;  height: .26rem; width:0.50rem;padding-top: 1px; pointer-events: none;}


.v-foot-left{width:50%; height: 100%; display: flex; align-items: center; justify-content: center;}
.v-foot-right{flex:1; height: 100%;display: flex; align-items: center; justify-content: center; }

.v-ppt{width: 100%; position: absolute; left: 0; top:50%; z-index: 99999; transform: translateY(-50%);}

.v-share{width: 100%; background: #fff; border-top-left-radius: .3rem; border-top-right-radius: .3rem; position: absolute; left: 0; bottom: 0; z-index: 99999; }
.v-share-icon-row{width: 90%; display: flex; justify-content: space-between; margin: .4rem auto;}
.v-share-icon{width:1rem; display: flex; flex-direction: column; align-items: center;}
.v-share-row{border-top: 1px solid #ededed; border-bottom: 1px solid #ededed; width: 100%;}
.v-share-report{width: 90%; display: flex; justify-content: space-between; margin: .3rem auto;}
.v-share-cancel{width:100%; display: flex; justify-content: center; align-items: center; padding: .4rem; color: #5A5A5F; font-size: .3rem;}
.v-share-cancel:active{background: #fafafa;}

.v-video-wrap{width: 100%; height: auto;  position: relative;  background:#000;}
.v-video{display: block; max-width:100%; background-repeat: no-repeat; background-size:contain; margin: 0 auto;}
.v-video-cover{height: 100%; display: block;position: absolute; left: 50%; top: 50%;transform: translate(-50%,-50%); z-index: 99;}
.v-video-mask{width: 100%; height: 100%; position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.8); z-index: 111;}
.v-video-icon{width: 1.02rem; height: 1.02rem; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 222;}
.v-video-replay{position: absolute; left: 0.4rem; bottom: 0.3rem; z-index: 333; color:#fff; font-size: 0.26rem; display: flex; align-items: center;}
.v-video-share{position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index:333;}
.v-line-ff{height: 1px ; background: #fff; width:0.6rem;}

.v-sketch-banner{width: 100%; height: 4.4rem;  position: relative;  display: flex; justify-content: center; align-items: center; overflow: hidden;}
.v-prod-title{display: flex; justify-content: center; margin-top: 0.3rem; font-size: 0.3rem; color:#46464B;}
.v-prod-price{display: flex; justify-content: center; margin-top: 0.2rem; font-size: 0.28rem; color:#8E8D99 ;}
.v-prod-spec-title{display: flex; justify-content: center; align-items: center; font-size: 0.22rem; color: #8E8D99; margin-top: 0.2rem;}
.v-spec-row{display: flex;height:0.8rem; }
.v-spec-col{display: flex; height:100%;  align-items: center;}
.v-color-view{margin-top: 0.3rem; width:100%; overflow-x: auto; overflow-y: hidden; height: 0.8rem !important;}
.v-color-wrap{display: inline-block; white-space: nowrap;  min-width: 100%; height: 0.8rem;}
.v-color-number{width:0.8rem; height:0.8rem; border-radius: 100%; margin-left: 0.3rem; display: inline-block; vertical-align: top; text-align: center;}
.v-color-number:last-of-type{margin-right: 0.2rem !important;}

.v-ranking{display: flex; align-items:center; margin-top: 0.35rem;}
.v-ranking:first-of-type{margin-top: 0 !important;}
.v-rate{display: flex; justify-content: center; }
.v-rate-half-star{display: flex; justify-content: center; height: 0.3rem; width:0.3rem;-webkit-mask-image: url('../img/score_star_y.svg');-webkit-mask-size: 100% 100%;mask-image: url('../img/score_star_y.svg');mask-size: 100% 100%;}
.v-rate-star{display: flex; justify-content: center; height: 0.28rem; width:0.28rem;}
.v-rate-star:first-of-type{margin-left: 0 !important;}
.v-rate-chart{display: flex; align-items: center;}
.v-rate-chart:first-of-type{margin-top: 0 !important;}
.v-rate-bar{width:100%; height:6px; background:#ececec; border-radius: 60px; position: relative;}
.v-rate-bar-c{width:0%; height: 100%; left: 0; top:0;background:#ffc658; border-radius: 60px;position: absolute; border:none;}
.v-rate-desc{width:90%; margin: 0.1rem auto 0 auto; background:#f3f3f3; height: 0.65rem; display: flex; justify-content: center; align-items: center;color:#5a5a5f; font-size: 0.26rem; border-radius: 1rem;}
.v-rate-mask{position: absolute; left: 0; top: 0;overflow: hidden; width:0%; height: 0.28rem; }
.v-front{width:90%; background:#FAF2F5; margin: 0.2rem auto 0 auto;}
.v-reverse{width:90%; background:#F2FAFA; margin: 0.2rem auto 0 auto;}
.v-prod-thumb-wrap{width: 25%; height: 1.6rem; background: #fff; overflow: hidden; border-radius: 0.1rem; margin-left:0.1rem; }
.v-head-wrap{border-radius: 100%; justify-content: center; overflow: hidden; display: flex;}
.v-remark-line{ margin: .3rem auto 0 auto;border-bottom: 1px solid #ededed;width: 90%;}

.v-content{ overflow:auto; flex:1; -webkit-overflow-scrolling:touch;}
.v-content-wrap{width:100%; min-height: 100%;}
.v-content-view{width:100%;}
.v-content-body{width: 100%; min-height: 100%;}

.v-rank-thumb {width:1.4rem; height:1.7rem; overflow: hidden; display: flex; justify-content: center; align-items: center;}
.v-btn-try{height: 0.6rem;}
.v-rank-decorate-img{width: 0.28rem; right: 0.3rem; position: relative; top: 2px; left: 2px;}
.v-rank-avatar{width: 0.4rem; height: 0.4rem; overflow: hidden; display: flex; justify-content: center; background: #ebebeb; border-radius: 100%; margin-left: 0.2rem;}
.v-medal{position: absolute; left: 0.3rem; top: 0; display: block; height: 0.5rem;}
.v-rank-row{margin-top: 0.3rem;}
.v-rank-row:first-of-type{margin-top: 0;}
.v-rank-line{height: 1px; background: #e1e1e1; margin:0 auto 0 0.3rem; width: calc(100%-20); }
.v-rank-mod{position: absolute; z-index: 99999999; width: 100%; height: 100%; left: 0; top: 0;}
.v-mod-remark{height: 8rem; background:#fff; border-radius: 0.12rem; width: 100%; position: relative; display: flex; flex-direction: column; transition:transform 0.1s; position: relative; transform-origin: 50% 50%;}
.v-mod-avatar{width: 1.12rem; height: 1.12rem; border: 1px solid #ff90cd; position: absolute; left: 50%; transform: translateX(-50%); top: -0.56rem; overflow: hidden; display: flex; justify-content: center; align-items: center; border-radius: 100%; background: #fff;}
.v-mod-view{width: 86%; max-height: 3.76rem; overflow: auto; margin: 0.25rem auto 0 auto;  background: #fff;-webkit-overflow-scrolling:touch;}
.v-mod-body{min-height: 100%;}
.v-mod-thumb{width: 25%; height: 1.2rem; margin-left: 0.24rem; overflow: hidden; }
.v-mod-thumb:first-of-type{margin-left: 0;}
.v-mod-thumb-row{display: flex; margin: 0.2rem auto 0 auto; width: 94%; }
.v-mod-close{position: absolute; left:50%; transform: translateX(-50%); bottom: 1rem; height: 0.7rem; width: 0.7rem; z-index: 99999999;}
.v-mod-foot{position: absolute; left: 50%; transform: translateX(-50%); bottom: 0.3rem; width: 86%;}
.v-remark-star:first-child{margin-left: 0 !important;}
.v-remove-poster{width: 100%; position: absolute; left: 0; bottom: 0.22rem;}
.v-remove-btn{width: 96%; height: 1.14rem; display: flex; justify-content: center; align-items: center; }
.v-crawler-thumb{width: 0.52rem; height: 0.52rem; overflow: hidden; display: flex; justify-content: center; border: 1px solid #d6d6d6; border-radius: 0.08rem;}