/*ZIP ==================== data : 2016 / 12 / 28 version : 1.0 - 1 - 161228 - 1643 pre: cut from mmMsgBox; this : .mmLikeRate li.shop > div {font-size: 13px;} ==================== */ .likeArea{font-size:0;text-align:center;} .likeArea a{border:solid 2px #175299; background-color:#175299; color:#fff;font-size:12px; display:inline-block; position:relative; } /*color*/ .likeArea.like a:last-child, .likeArea.unLike a:first-child{border-color:#fff; background-color:#c6c6c6; } .likeArea a:hover, .likeArea.like a:first-child, .likeArea.unLike a:last-child{border-color:#ffc200!important; background-color:#07355b!important; text-decoration:none; } .likeArea.like a:last-child, .likeArea.unLike a:first-child{color:#7c7c7c;} .likeArea a:hover{color:#fff!important;} /*position*/ .likeArea a:before{content:""; background-image:url(../../img/fourm.png); background-size:1500px 750px; display:block;width: 26px;height: 26px; position:absolute; } .likeArea.like a:last-child:before{background-position:-1453px -572px;} .likeArea.unLike a:first-child:before{background-position:-1423px -572px;} .likeArea a:first-child:before, .likeArea a:hover:first-child:before{background-position:-1363px -572px;} .likeArea a:last-child:before, .likeArea a:hover:last-child:before{background-position:-1393px -572px;} /*cursor*/ .likeArea.like a:first-child, .likeArea.unLike a:last-child{cursor:default;} /*============================================*/ /*============================================*/ .mmShopUI{overflow: hidden;} .mmShopUI a{background-color:#fff; height:294px;width: /* for page customized*/; float:left; } /**/ .mmShopAbove{text-align:center;font-size:0; line-height:150px;height:150px;vertical-align:middle; margin:12px 5px 0; position:relative; } .mmShopAbove img{display:inline;height: 150px;} .mmShopAbove img.landscap{width:100%!important;height:auto!important; margin:auto; position:absolute;top: 0;right: 0;bottom: 0;left: 0; } .mmShopAbove span{font-size:15px; line-height:25px;height:25px; margin:auto; transform:rotate(-9deg); position:absolute;right: 0;bottom: 25px;left: 0; } .mmShopAbove span{box-shadow: -2px -2px 0 #000; background-color:#666; color:#fff; } .mmShopAbove span.typeA{width: 95px;} .mmShopAbove span.typeB{width: 104px;} .mmShopUI a.un .mmShopAbove:after{content:""; background-image:url(../../img/shop_b_un.png); background-size:64px 64px; display:block;width: 64px;height: 64px; margin:auto; position:absolute;left: -8%;right: 0;top: 35px; } /**/ .mmShopUnder{height:132px;padding:10px 15px 0;} .mmShopUI h6{display:table;} .mmShopUI h6 div{vertical-align:middle;display:table-cell;height:32px;} .mmShopUI h6 span{font-size:14px;color:#000;font-weight:bold; line-height:1.2;max-height: 32px; overflow:hidden;text-overflow:ellipsis; display:block; display:-webkit-box;display:-moz-box;display:-ms-box;display:-o-box;display:box; -webkit-line-clamp:2;-moz-line-clamp:2;-ms-line-clamp:2;-o-line-clamp:2;line-clamp:2; -webkit-box-orient:vertical;-moz-box-orient:vertical;-ms-box-orient:vertical;-o-box-orient:vertical; } /**/ .mmShopUI h5,.mmShopUI h4,.mmShopUI p{line-height:1;margin-top:3px;} .mmShopUI h5{font-size:12px;color:#999;font-weight:normal;} .mmShopUI h4{font-size:12px;color:#ff4e00;text-align:right;font-weight:normal; text-decoration:line-through; height:14px; } /**/ .mmShopUI p{font-size:16px;color:#ff4e00;font-weight:bold; text-align:right; } .mmShopUI p i{font-size:18px;padding-left:2px;} .mmShopUI p span{font-size:12px;font-weight:normal;} .mmShopUI b{font-size:12px;color:#ff4e00;text-align:right;font-weight: normal; display:block; padding-top:2px; } /*~~~~*/ .mmShopUI a:hover{text-decoration:none;} /*.mmShopUI a:visited h6 span{color:#00f;}*/ .mmShopUI a:hover h6 span{color:#ff4e00;} /*.mmShopUI a:hover h5,.mmShopUI a:hover h4, .mmShopUI a:hover p,.mmShopUI a:hover p i,.mmShopUI a:hover p span{color:#999;}*/ /*~~~~*/ .mmShopUI a.un{cursor:default;} .mmShopUI a.un img,.mmShopUI a.un .shopUnder{opacity:.5;} .mmShopUI a.un:hover h6 span{color:#000;} /**/ .mmShopUI a.event{border:solid 3px #ff9000;position:relative;} .mmShopUI a.event .shopUnder{background-color:#fff6db;height: 126px; padding:10px 12px 0; } /**/ .mmShopUI a.event:hover h6 div span, .mmShopUI a.event h4, .mmShopUI a.event p, .mmShopUI a.event b{color:#f00;} /**/ .mmShopUI a.event{overflow:hidden;} .mmShopUI a.event > h6{background-color:#ff9000; padding:0 12px 0 10px; position: absolute;left: -8px;top:0px; transform: skewX(-15deg); } .mmShopUI a.event > h6 i{overflow:hidden;text-overflow:ellipsis;white-space: nowrap; font-size:14px;color:#fff;font-weight: normal;font-style: normal; float:left;line-height:25px;max-width: 128px; transform-origin: 0 0; transform: skewX(15deg); } /*----*/ .mmShopUI a.event.un{border-color:#b7b7b7;} .mmShopUI a.event.un .shopUnder{background-color:#fff;} .mmShopUI a.event.un h6 div span, .mmShopUI a.event.un:hover h6 div span, .mmShopUI a.event.un h4, .mmShopUI a.event.un p, .mmShopUI a.event.un b{color:#808080;} .mmShopUI a.event.un > h6{background-color: #b7b7b7;} /*============================================*/ /*============================================*/ .mmLikeRate{font-size:0;} .mmLikeRate > li{background-color:#f9f9f9; vertical-align: middle; display:inline-block;width:138px; position:relative; } .mmLikeRate > li > a{display:block; position:relative; } .mmLikeRate > li a:hover, .mmLikeRate > li a:hover span, .mmLikeRate > li a:hover p, .mmLikeRate > li a:hover h6{text-decoration:none;} .mmLikeRate > li a img{display:block;width:100%;} .mmLikeRate .rateTotal{position:absolute;left:6px;z-index:1; } .mmLikeRate > li p{text-shadow:0 0 1px rgba(0,0,0,1),0 0 1px rgba(0,0,0,1); font-size:12px;color:#fff; position:absolute;right:6px;z-index:1; } .mmLikeRate > li p.rateTotal{color:#ffcc00; right:auto;left: 44px; } .mmLikeRate > li .rate0 + p.rateTotal{color: #cecece;} .mmLikeRate > li p, .mmLikeRate .rateTotal,.mmLikeRate > li > a:before{bottom:47px;} .mmLikeRate > li a h6{display:table;width: 100%;height:40px; padding:3px 7px 0; } .mmLikeRate > li a:hover h6 span{color:#1d84c3;} .mmLikeRate h6 b{vertical-align:middle; display:table-cell;height:30px; } .mmLikeRate h6 span{font-weight:normal;font-size:14px;color:#333;text-align:center; display:block;line-height:1.2;max-height:32px; overflow:hidden; display:-webkit-box;display:-moz-box;display:-ms-box;display:-o-box; -webkit-line-clamp:2;-moz-line-clamp:2;-ms-line-clamp:2;-o-line-clamp:2;line-clamp:2; -webkit-box-orient:vertical;-moz-box-orient:vertical;-ms-box-orient:vertical;-o-box-orient:vertical;box-orient:vertical; } #actorMM .mmLikeRate h6 i, .mmLikeRate h6 i{font-style:normal;} .mmLikeRate > li a div{border:solid 1px #e2e2e2; position:absolute;top: 0;right: 0;left: 0; } .mmLikeRate > li a div, .mmLikeRate > li > a:after{bottom: 40px;} .mmLikeRate > li > a:before,.mmLikeRate > li > a:after{content:"";display:block;position:absolute; } .mmLikeRate > li > a:before{border-radius: 50%; box-shadow: 0 0 15px #000,0 0 15px #000,0 0 15px #000; background-color: #000; display: block;width: 30px;height: 30px; left: 13px; opacity: .7; } .mmLikeRate > li > a:after{background: linear-gradient(to top, rgba(0,0,0,1) , rgba(0,0,0,.7) , rgba(0,0,0,0)); background: -o-linear-gradient(to top, rgba(0,0,0,1) , rgba(0,0,0,.7) , rgba(0,0,0,0)); background: -ms-linear-gradient(to top, rgba(0,0,0,1) , rgba(0,0,0,.7) , rgba(0,0,0,0)); background: -moz-linear-gradient(to top, rgba(0,0,0,1) , rgba(0,0,0,.7) , rgba(0,0,0,0)); background: -webkit-linear-gradient(to top, rgba(0,0,0,1) , rgba(0,0,0,.7) , rgba(0,0,0,0)); width: 100%;height:52px; } /**/ .mmLikeRate .rateArea, .mmLikeRate .mmRateSysOut{font-size:0;text-align:center; width:100%; padding-top:4px; overflow:hidden; } .mmLikeRate .rateArea span, .mmLikeRate .mmRateSysOut > span{color:#333;font-size: 12px; display:inline-block;width:auto;line-height: 17px; margin-right:1px; float:none;position:relative;top:-3px; } .mmLikeRate .rateBox, .mmLikeRate .mmRateSys{display:inline-block;float:none;} .mmLikeRate .rateArea > img{margin-left:-37px;left: 50%;top:0;} .mmLikeRate .rateBox li:last-child img, .mmLikeRate .rateBox li:nth-last-child(2) img{width:100px;} /**/ .mmLikeRate select,.mmLikeRate .masker{outline:none;border:none; background-color:transparent; color:transparent; display:block;width:100%;height:30px; position:absolute;bottom:0;z-index:1; } .mmLikeRate select option{color:#000;} /*============================================*/ /*============================================*/ .mmMMList{height: 270px; padding: 0 6px; overflow-x: scroll;overflow-y: hidden;position: relative; } .mmMMList .mmLikeRate{height: 260px;} .mmMMList .mmLikeRate > li{width: 128px;height: 260px;margin-right: 6px;} .mmMMList .mmLikeRate > li:last-child{margin-right: 0;} /**/ .mmMMList .likeArea{height:38px;padding-top: 2px;} .mmMMList .likeArea a{border-radius:4px; letter-spacing: -1px; padding-left:8px;margin-left:10px; line-height:20px;width: 49px; } /**/ .mmMMList .likeArea :before{left:-13px;top: -3px;} .mmMMList .likeArea a:first-child{margin-right:4px;} /*====== v shop UI in mmRateLike tag v =====*/ .mmLikeRate li.shop > a{height: 230px;} .mmLikeRate li.shop a:after, .mmLikeRate li.shop a:before{display: none;} .mmLikeRate li.shop h5{background-color: #fff; text-align: center;font-size: 0;line-height: 190px; width: 100%;height: 190px; vertical-align: middle; position: relative; } .mmLikeRate li.shop h5 img{display: inline; height: calc( 190px - 16px );width:auto; margin-top: 8px; } .mmLikeRate li.shop h5 img.landscap{width: calc( 100% - 16px );height: auto; margin: auto; position: absolute;top: 0;right: 0;bottom: 0;left: 0; } .mmLikeRate li.shop h6, .mmLikeRate li.shop > div{background-color: #fff6db;} .mmLikeRate li.shop div{border-color: #fff6db;border-width: 2px 2px 0;} .mmLikeRate li.shop > div{font-size: 13px;text-align: right;color: #ff4e00;font-weight: bold; line-height:30px; padding-right: 10px; } /*============*/ .mmMMListOut{height: 280px; padding-top: 5px; position: relative; clear: both; } .mmMMListOut > a,.mmMMListOut > b{background-image: url(../../img/fourm.png); height: 100%; position: absolute;top: 0;z-index: 1; } .mmMMListOut > b,.mmMMListOut.pc > a{display: block;} .mmMMListOut > a,.mmMMListOut.pc > b{display: none;} .mmMMListOut > a.un{opacity:.3;} .mmMMListOut > .pre{left: -1px;} .mmMMListOut > .nex{right: -1px;} /**/ .mmMMListOut > a{width: 30px;} .mmMMListOut > a.pre{background-position: -2932px 0px;} .mmMMListOut > a.nex{background-position: -2970px 0px;} .mmMMListOut > b{width: 25px;background-size: 1500px 750px;} .mmMMListOut > b.pre{background-position: -1450px -140px;} .mmMMListOut > b.nex{background-position: -1475px -140px;} /*---------*/ #mmMMListOut336 .mmMMList{background-color: #fff; height: auto; padding: 15px; overflow-x: hidden; } #mmMMListOut336 .mmLikeRate{height: auto;} #mmMMListOut336 .mmLikeRate > li{width: calc( 100% / 2 - 5px );height: 293px; margin-bottom: 12px; float: left; } #mmMMListOut336 .mmLikeRate > li:nth-child(odd){margin-right: 10px;} #mmMMListOut336 .mmLikeRate > li:nth-child(even){margin-right: 0;} #mmMMListOut336 .mmLikeRate > li:nth-last-child(-n+2){margin-bottom: 0;} /*============================================*/ /*============================================*/ .likeTotal{position:absolute;z-index:1;} b.likeTotal{border-radius:50%; background-color:#175299; color:#fff;font-size:18px;text-align:center;font-weight:normal; width: 37px;height: 37px;line-height:40px; left: 7px;bottom: 47px; } i.likeTotal{font-size:15px;color:#fff;font-style:normal; left: 45px;bottom: 45px; } /*============================================*/ /*============================================*/ span.rateTotal{text-indent:0;font-size:15px;text-align:center;color:#000;font-weight:bold; background-image:url(../../img/fourm.png);background-size:1000px 500px; display:inline-block;width:42px;height:40px; padding-top:14px; } span.rate0{background-position:-922px -400px;} span.rate1{background-position:-508px -400px;} span.rate2{background-position:-549px -400px;} span.rate3{background-position:-590px -400px;} span.rate4{background-position:-632px -400px;} span.rate5{background-position:-673px -400px;} span.rate6{background-position:-715px -400px;} span.rate7{background-position:-756px -400px;} span.rate8{background-position:-798px -400px;} span.rate9{background-position:-839px -400px;} span.rate10{background-position:-881px -400px;} /**/ span.rateTotal.PC{background-size:3000px 1500px;} span.PC.rate1{background-position:-1524px -1320px;} span.PC.rate2{background-position:-1565px -1320px;} span.PC.rate3{background-position:-1607px -1320px;} span.PC.rate4{background-position:-1649px -1320px;} span.PC.rate5{background-position:-1690px -1320px;} span.PC.rate6{background-position:-1732px -1320px;} span.PC.rate7{background-position:-1774px -1320px;} span.PC.rate8{background-position:-1815px -1320px;} span.PC.rate9{background-position:-1857px -1320px;} span.PC.rate10{background-position:-1899px -1320px;} /*****************************************************/ span.rateTotal26{border:none; background:url(../../img/fourm.png) -247px -400px no-repeat;background-size:1000px 500px; font-size:12px;text-align:center;font-weight:normal;color:#000; display:inline-block;width: 26px;height: 26px;line-height:30px; margin:0;padding: 0; } span.rateTotal26.rate0{background-position: -247px -400px;} span.rateTotal26.rate1{background-position: -247px -400px;} span.rateTotal26.rate2{background-position: -273px -400px;} span.rateTotal26.rate3{background-position: -299px -400px;} span.rateTotal26.rate4{background-position: -325px -400px;} span.rateTotal26.rate5{background-position: -351px -400px;} span.rateTotal26.rate6{background-position: -377px -400px;} span.rateTotal26.rate7{background-position: -403px -400px;} span.rateTotal26.rate8{background-position: -429px -400px;} span.rateTotal26.rate9{background-position: -455px -400px;} span.rateTotal26.rate10{background-position: -481px -400px;} /**/ span.rateTotal26+span{color:#ff9000;font-size:14px;margin-left:-3px;} /*============================================*/ /*============================================*/