@font-face {
    font-family: Oxygen;
}

:root {
    --primary-font-family: "SF Pro TC","SF Pro Text","SF Pro Icons","PingFang TC",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Helvetica,Arial,sans-serif;
    --price-font-family:'Oxygen', sans-serif;
    --primary-pink: #d62872;
}

/* 天的商品圖 */
.headWrapper.fixedActive {position: sticky; top: -1px; z-index: 1; height: 130px;}
/*.headWrapper .headerTitle {position: fixed;}*/
.headWrapper .headerTitle .reviewItemImg {margin-right: 12px; border-radius: 4px; width: 24px; height: 24px; box-sizing: border-box;}
.headWrapper.fixedActive .productRatingSelector { padding: 12px; background-color: #eee; box-shadow: rgb(0 0 0 / 5%) 0px 3px 5px -1px;}
.headWrapper .productRatingBoard.fixedActive { transform: translateY(-130px); transition: all 0.35s linear;}
.headWrapper .productRatingSelector.fixedActive { transform: translateY(-127px); transition: all 0.35s linear;}
.headWrapper #reviewCount {font: bold 15px/44px var(--main-font);margin-left: 12px;}

/* 指標外容器 */ 
.productRatingBoard { background-color: #D62872; padding: 12px 15px; white-space: nowrap; transition: all 0.35s linear;}
.RatingBoardInner {display: flex; align-items: center; background-color: #fff; border-radius: 8px; padding:12px;
    margin: 0px 0px 0px 0px;
}

/* 指標平均 */
.indicatorAvg {text-align: center; margin-right: 10px; width: 80px;}
.indicatorAvg .indicatorAvgVal { font: bolder 27px/34px var(--price-font-family); color: #D62872; margin-bottom: 6px;}
.indicatorAvg .indicatorSample { font: 11px/16px var(--primary-font-family); color: #454545;}
/* 指標 */
.indicatorWrapper {flex-grow: 1; padding-left: 10px; border-left: solid 2px #F2F2F2;}
.indicator {display: flex; justify-content: flex-start; font: 13px/16px var(--primary-font-family); color: #454545;}
.indicator:not(:last-child) {margin-bottom: 15px;}
.indicator .indicatorTitle {min-width: 65px;} 
.indicator .indicatorNumber {font-weight: bolder; min-width: 20px; text-align: center;}


/* 指標數值條 */
.indicator .indicatorValue {flex-grow: 1; margin: 2px 11px 2px 5px; background: #F2F2F2; border-radius: 50px;} 
/*.indicator .indicatorValue::after { content: ''; display: block; border-radius: 50px; height: 100%; background-image: linear-gradient(to right,#D62872, #FF9100); }*/
.indicator .indicatorValue[data-star="5"]::after {width: 100%; }
.indicator .indicatorValue[data-star="4"]::after {width: 80%; }
.indicator .indicatorValue[data-star="3"]::after {width: 60%; }
.indicator .indicatorValue[data-star="2"]::after {width: 40%; }
.indicator .indicatorValue[data-star="1"]::after {width: 20%; }
.indicator .indicatorValue[data-star="0"]::after {width: 0%; }
.indicator .indicatorValue .indicatorValueBar { display: block; border-radius: 50px; height: 100%; background-image: linear-gradient(to right,#D62872, #FF9100); }


/* 篩選器外容器 */
.productRatingSelector { padding: 15px 15px 0 15px; transition: all 0.35s linear;}
.productRatingSelector .SelectorInner {padding: 10px 12px; display: flex; white-space: nowrap; overflow-x: auto; background-color: #fff; border-radius: 8px;}
.productRatingSelector .SelectorOption { display: inline-flex; flex-direction: column;   text-align: center; font: 13px/18px var(--main-font);color: #454545;border: 1px solid #BDBDBD; border-radius: 50px; padding: 0px 14px; justify-content: center;}
.productRatingSelector .SelectorOption:not(:last-child) {margin-right: 12px;}
.productRatingSelector .SelectorOption .filterValue  { min-width: 52px; }
.productRatingSelector .SelectorOption.active {color: #D62872;border: 1px solid #D62872; background: #FFF3F4;}
.productRatingSelector .SelectorOption .SelectorStarWrapper {display: flex; justify-content: center; min-width: 52px; max-width: 65px;}
.productRatingSelector .SelectorOption .SelectorStar {display: inline-flex; min-width: 13px;height: 18px;vertical-align: middle;background-repeat: no-repeat;background-size: 13px 13px;background-position: center center; background-image: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/icon_star_full_24x24.svg);}


/* 評論卡片 */
.reviewCard {margin: 15px; background-color: #fff; border-radius: 8px; padding: 12px 0px; display: grid; grid-gap: 10px; position: relative;}
/* 有外容器時 */
.productRating ~ .reviewCard {margin: 0px; background-color: #fff; border-radius: 0px; padding: 10px 0px 12px 0px;}
.productRating ~ .reviewCard:nth-child(3) {margin: 10px 0 0 0 ; }
.productRating ~ .reviewCard::before {content: ''; display: inline-block; top: 0; background: #F2F2F2; width: 100vw; height: 1px; position: absolute; left: 50%; transform: translateX(-50%);}



/* 評論人資訊 */
.InfoContainer {display: flex; padding: 0px 12px;}

.InfoContainer .InfoPic {min-height: 35px;min-width: 35px;margin-right: 10px;margin-bottom: 5px;background: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/icon_InfoPic_36x36.svg) no-repeat center; border-radius: 50%;}

.InfoContainer .InfoInner {flex-grow: 1; display: flex; flex-direction: column; justify-content: center; gap: 2px;}
.InfoContainer .InfoInner .Info {display: flex; justify-content: space-between; align-items: center; }
.InfoContainer .InfoInner .Info .Name { font: bolder 15px/20px var(--primary-font-family); color: #454545; overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;display: -webkit-box;-webkit-box-orient: vertical; max-width: 70px; flex: 0 0 70px; margin-right: 10px; }
.InfoContainer .InfoInner .Info .Date { font: 13px/18px var(--price-font-family); color: #888; flex: 1;}
.InfoContainer .InfoInner .Info .like-btn { display: flex; flex: 0 0 60px; }
.InfoContainer .InfoInner .Info .like-btn .like-icon { display: inline-block; width: 18px; height: 18px; background-image: url(/ecm/img/cmm/mobile/goods/review/thumbs-up.svg); background-size: 85%; background-repeat: no-repeat; background-position: center; margin-right: 6px; }
.InfoContainer .InfoInner .Info .like-btn .like-icon.pink-like { background-image: url(/ecm/img/cmm/mobile/goods/review/solid-thumbs-up.svg); }
.InfoContainer .InfoInner .Info .like-btn .like-quantity { font-family: var(--primary-font-family); font-size: 13px; line-height: 18px; color: #888888;}

.InfoContainer .InfoInner .RatingSpec {display: flex; justify-content: flex-start; align-items: center; margin-top: 1px; }
.InfoContainer .InfoInner .RatingSpec .RatingStarGroup { display: flex; flex-wrap: nowrap; padding-right: 5px;}
.InfoContainer .InfoInner .RatingSpec .RatingStarGroup .RatingStar {display: inline-block;width: 15px;height: 15px;background-repeat: no-repeat;background-size: 15px 15px;background-position: center center;}
.InfoContainer .InfoInner .RatingSpec .RatingStarGroup .RatingStar.starFull {background-image: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/icon_star_full_24x24.svg);}
.InfoContainer .InfoInner .RatingSpec .RatingStarGroup .RatingStar.starHalf {background-image: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/icon_star_half_24x24.svg);}
.InfoContainer .InfoInner .RatingSpec .RatingStarGroup .RatingStar.starOutline {background-image: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/icon_star_outline_24x24.svg);}

.Spec { font: 13px/18px var(--primary-font-family); color: #454545; position: relative; display: flex; align-items: center;}
.Spec::before { content: ""; display: inline-block;  width: 2px; height: 14px; background: #888; margin-right: 5px; }
.Spec .SpecValue { overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 1;display: -webkit-box;-webkit-box-orient: vertical; }

/* 上傳圖片/影片 */
.PhotoContainer { display: flex; flex-wrap: nowrap; overflow-x: auto; max-height: 82px; padding: 0 12px 0px 12px;}
.PhotoContainer .PhotoItem { background-color: #000; border-radius: 4px 4px 0px 4px; min-width: 68px; max-width: 68px; min-height: 68px; max-height: 68px; position: relative; overflow: hidden; display: inline-flex; justify-content: center; align-items: center;}
.PhotoContainer .PhotoItem:not(:last-child) { margin-right: 10px;}
.PhotoContainer .PhotoItem img { max-width: 100%; max-height: 100%; }
.PhotoContainer .PhotoItem::after  { background: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/icon_mag_24x24.svg) no-repeat center; display: inline-block; height: 20px; width: 20px; border-radius: 50% 0 0 0; content: ''; position: absolute; right: 0; bottom: 0; }
.PhotoContainer .PhotoItem.VideoType::after  { background: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/video_icon2.png) no-repeat center center; background-size: 20px 20px;; display: inline-block; height: 100%; width: 100%; border-radius: 0px; content: ''; position: absolute; right: 0; bottom: 0; }

/* 評論/回覆 */
.CommentContainer { position: relative; font: 13px/20px var(--main-font); color: #454545; padding: 0px 12px;}
.CommentContainer .Comment { margin: 0; padding: 0; overflow: hidden;text-overflow: ellipsis;-webkit-line-clamp: 2;display: -webkit-box;-webkit-box-orient: vertical;word-wrap: break-word;}
.CommentContainer .VireAllBtn { position: absolute; right: 12px; bottom: 0; padding-left: 10px; background-image: linear-gradient(to right, rgba(255,255,255,0.35) 0%, rgba(255,255,255,1) 10%, rgba(255,255,255,1) 100%); }
.CommentContainer .VireAllBtn span { color: #027BFF; }
.ReplyContainer .CommentContainer .VireAllBtn { position: absolute; right: 0; bottom: 0; padding-left: 10px; background-image: linear-gradient(to right, rgba(242,242,242,0.35) 0%, rgba(242,242,242,1) 10%, rgba(242,242,242,1) 100%); }


/* 廠商回覆 */
.ReplyContainer { position: relative; padding: 12px; margin: 4px 12px 0 12px; display: grid; grid-gap: 4px; background: #F2F2F2; border-radius: 8px;}
.ReplyContainer::before {  position: absolute; content: ""; width: 0; height: 0; border-style: solid; border-width: 0 8px 10px 8px; border-color: transparent transparent #f2f2f2 transparent; top: -10px; left: 30px;}
.ReplyContainer .InfoContainer,.ReplyContainer .CommentContainer { padding: 0px;}
.ReplyContainer .InfoInner .Info .Name { font: bolder 15px/19px var(--primary-font-family); color: #454545; }
.ReplyContainer .InfoPic {min-height: 35px;min-width: 35px;margin-right: 10px;margin-bottom: 0px;background: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/icon_InfoPic_36x36.svg) no-repeat center;border-radius: 50%;}


/* 尚無評價 */
.noData { display: flex; flex-direction: column; justify-content: center; align-items: center; font: 13px/20px var(--main-font); color: #454545; min-height: 360px;}
.noData .momoco {display: inline-block; min-width: 110px; min-height: 110px; background: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/momoco_nonedata.png) no-repeat center center; background-size: cover; margin-bottom: 10px; }

/* 查看全部評論 */
.ViewAllRating {display: flex; justify-content: center; align-items: center; background: #fff; position: relative; margin: 0 0 11px 0;}
.ViewAllRating::after {content: ''; display: inline-block; top: 0; background: #F2F2F2; width: 100vw; height: 1px; position: absolute; left: 50%; transform: translateX(-50%);}
.ViewAllRating a {display: flex; justify-content: center; text-decoration: none; color: #000; font: 15px/48px var(--main-font); width: 80%;}
.ViewAllRating a .go {display: inline-block; width: 24px; height: 48px; margin-left: 4px; position: relative; background: url(//image.momoshop.com.tw/ecm/img/cmm/mobile/goods/review/newarrow_black.png) no-repeat; background-size: contain; background-position: center;}
 
/* 20221214 EC小網_商品評論_大圖浮層 */ 
.ratingImgFloat{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000000;text-align: center;display: none;z-index: 10001;-webkit-transform: translateZ(0);}
.ratingImgFloat .innerArea .closeBtn{position: fixed; top: 12px; right: 15px; z-index: 999; display: inline-flex; justify-content: center; align-items: center; padding: 8px; background-color: rgba(0,0,0,0.7); border-radius: 50%; box-sizing: border-box;}
.ratingImgFloat .innerArea{max-width: 640px;margin: 0 auto;height: 100%;}
.ratingImgFloat .innerArea .title{font: 15px/40px Helvetica,sans-serif;display:block;float: right;padding: 0 10px 0 0;}
.ratingImgFloat .innerArea .bigImgblock{line-height: 0;}
.ratingImgFloat .innerArea .bigImgblock .swiper-wrapper{align-items: center;}
.ratingImgFloat .innerArea .bigImgblock .swiper-slide img {max-height: 100vh; max-width: 100vw;}
.ratingImgFloat .innerArea .imgList {margin: 0 auto;overflow-x: auto;top: 12px; left:50%; transform: translateX(-50%); text-align: center;width: fit-content; height: fit-content; background-color: rgba(0,0,0,0.7); font: 15px/30px Helvetica,sans-serif; color: #fff; white-space: nowrap;display: inline-block; padding: 1px 8px 0px; border-radius: 15px; box-sizing: border-box;}
.ratingImgFloat .innerArea .imgList li{margin: 0 10px 0 0;cursor: pointer;width: 40px;display: inline-block;outline: none;background: transparent;height: 40px;position: relative;opacity: 1;}
.ratingImgFloat .innerArea .imgList li::before{content: "";display: block;width: 40px;height: 40px;position: absolute;box-sizing: border-box;background: rgba(255,255,255,0.6);}
.ratingImgFloat .innerArea .imgList li img{border-radius: 2px;}
.ratingImgFloat .innerArea .imgList li:last-child{margin: 0;}
.ratingImgFloat .innerArea .imgList .swiper-pagination-bullet-active{position: relative;}
.ratingImgFloat .innerArea .imgList .swiper-pagination-bullet-active::before{border: 2px solid #d62872;border-radius: 2px;background: transparent;}

/* 20221214 EC小網_商品評論_大圖浮層 */
.ratingImgFloat{width: 100%;height: 100%;position: fixed;top: 0;left: 0;background: #000000;text-align: center;display: none;z-index: 10001;-webkit-transform: translateZ(0);}
.ratingImgFloat .innerArea .closeBtn{position: fixed; top: 12px; right: 15px; z-index: 999; display: inline-flex; justify-content: center; align-items: center; padding: 8px; background-color: rgba(0,0,0,0.7); border-radius: 50%; box-sizing: border-box;}
.ratingImgFloat .innerArea{max-width: 640px;margin: 0 auto;height: 100%;display: flex;align-items: center;}
.ratingImgFloat .innerArea .title{font: 15px/40px Helvetica,sans-serif;display:block;float: right;padding: 0 10px 0 0;}
.ratingImgFloat .innerArea .bigImgblock{line-height: 0;}
.ratingImgFloat .innerArea .bigImgblock .swiper-wrapper{align-items: center;}
.ratingImgFloat .innerArea .bigImgblock .swiper-slide img {max-height: 100vh; max-width: 100vw;}
.ratingImgFloat .innerArea .imgList {margin: 0 auto;overflow-x: auto;top: 12px; left:50%; transform: translateX(-50%); text-align: center;width: fit-content; height: fit-content; background-color: rgba(0,0,0,0.7); font: 15px/30px Helvetica,sans-serif; color: #fff; white-space: nowrap;display: inline-block; padding: 1px 8px 0px; border-radius: 15px; box-sizing: border-box;}
.ratingImgFloat .innerArea .imgList li{margin: 0 10px 0 0;cursor: pointer;width: 40px;display: inline-block;outline: none;background: transparent;height: 40px;position: relative;opacity: 1;}
.ratingImgFloat .innerArea .imgList li::before{content: "";display: block;width: 40px;height: 40px;position: absolute;box-sizing: border-box;background: rgba(255,255,255,0.6);}
.ratingImgFloat .innerArea .imgList li img{border-radius: 2px;}
.ratingImgFloat .innerArea .imgList li:last-child{margin: 0;}
.ratingImgFloat .innerArea .imgList .swiper-pagination-bullet-active{position: relative;}
.ratingImgFloat .innerArea .imgList .swiper-pagination-bullet-active::before{border: 2px solid #d62872;border-radius: 2px;background: transparent;}