/*ZIP ==================== data : 2016 / 12 / 15 version : 3.5 - 3 - 161215 - 1205 pre : mmPageOut pre : ( a & b X .pre & .nex )  width() pre : mmLoading model pre : mmDecoSelect overflow-scall : touch( for mdb_b ) pre : mmBackTop this : shop UI ==================== */ .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;} /****************************/ .mmBackTop{border-radius: 5px; background: rgba(0,0,0,0.4) url(../img/fourm.png) -4px -151px no-repeat; background-size: 1000px 500px; width: 40px;height: 40px; position: fixed;z-index: 20;bottom: 60px; } @media screen and (max-width: 359px){.mmBackTop{right: 3px;} } @media screen and (min-width: 360px){.mmBackTop{right: 2%;} } /*****************************/ .mmLoading{background-color:#777; text-align:center;font-size: 0; width: 100%; padding:8px 0; opacity:.7;z-index: 990; } .mmLoading img{width: 40px;height: 40px;} /*****************************/ .mmPageOut{text-align:center;font-size:0; width:300px; } .mmPageOut a:hover{text-decoration:none;} .mmPageOut .pre,.mmPageOut .nex,.mmPageOut .bn,.mmPageOut .now{border:solid 1px #3092ca;border-radius:2px; background-color:#ffffff; color:#3092ca;text-align:center;font-size:12px; line-height:26px;height:28px; } .mmPageOut .xx{color:#3092ca;font-size:12px;margin-top:4px;} .mmPageOut{position:relative;} .mmPageOut .pre,.mmPageOut .nex{position:absolute;top:0;} .mmPageOut .pre{left:0;} .mmPageOut .nex{right:0;} .mmPage{display:inline-block;} .mmPage a,.mmPage div{float:left;} .mmPageOut .bn,.mmPageOut .xx,.mmPageOut .now{margin-right:5px;} .mmPageOut a:last-child{margin-right:0;} .mmPageOut .pre,.mmPageOut .nex{width:45px;} .mmPageOut .bn,.mmPageOut .now{width:27px;} .mmPageOut .now,.mmPageOut .pre:hover, .mmPageOut .nex:hover,.mmPageOut .bn:hover{background-color:#3092ca;color:#ffffff;} .mmPageOut .unLink,.mmPageOut .unLink:hover{border-color:#e5e5e5;color:#e5e5e5; cursor:default; background-color:#ffffff; } /*************************/ .mmDecoSelect{border-radius:6px;border:solid 1px #bcbcbc; background-color: #f4f4f4; width: 150px;height:30px; position:relative; overflow:hidden; transition:.6s;z-index:2; } .mmDecoSelect.on{border-color:#555;transition:.2s;} .mmDecoSelect > div{overflow-x: hidden; overflow-y: scroll; -webkit-overflow-scrolling: touch; max-height: calc( 100% - 30px ); } .mmDecoSelect a{border-bottom:dotted 1px #c6c6c6; background-color:#f4f4f4; font-size:13px;color:#000; display:block;line-height:1; padding:8px; } .mmDecoSelect a:lasg-child{border: none;} .mmDecoSelect a.now{background-color: #e3e3e3;} div.mmDecoSelect a.first{background-color: #fff;color:#515151;} div.mmDecoSelect.on a.first{color:#bababa;background-color: #f4f4f4;cursor:default;} /**/ .mmDecoSelect a > *{display:inline-block;} .mmDecoSelect p{width: 55px;} .mmDecoSelect span{width:calc( 100% - 85px );} /**/ .mmDecoSelect:after{content:"▼";cursor:pointer; background-color:#bcbcbc; color:#fff;font-size:12px;text-align:center; display:block;width: 30px;height: 29px;line-height:29px; position:absolute;right: 0;top: 0; } .mmDecoSelect a:hover{text-decoration: none;} @media screen and (min-width: 769px){.mmDecoSelect a:hover{background-color: #848484;color:#fff;} } /**************/ .mmPageBread{overflow:hidden;text-overflow:ellipsis;white-space:nowrap; background-color: #fff; font-size:13px; } .mmPageBread a{color:#515151;} @media screen and (max-width:767px){.mmPageBread{padding:10px;} } @media screen and (min-width: 768px){.mmPageBread{padding:13px 18px;} } /***********/ .mmPageTitle{background-color:#3092ca; position:relative;clear:both; } .mmPageTitle p{overflow: hidden;text-overflow: ellipsis;white-space: nowrap; color:#fff;text-align:center; width:100%;line-height: 1; position:relative;z-index:1; } .mmPageTitle b{position:absolute;} @media screen and (max-width:767px){.mmPageTitle p{font-size:22px;} .mmPageTitle b{background-color:#176ea0; width: 3px;height: 35px; top:2px; } .mmPageTitle b:nth-last-child(2){left:-3px;} .mmPageTitle b:last-child{right:-3px;} } @media screen and (min-width:768px){#mmCard{margin-bottom:15px;} .mmPageTitle{margin:0 -7px;} .mmPageTitle:before{content:""; background-color:rgba(0,0,0,0.5); display:block;height: 3px;width: calc( 100% - 14px ); margin:0 auto; position:absolute;bottom:-3px;left: 7px; } .mmPageTitle p{font-size:27px;} .mmPageTitle b{content:""; border-style:solid; border-color:#003553 transparent transparent transparent; display:block; position:absolute; } .mmPageTitle b:nth-last-child(2){border-width:7px 0 0 7px; left:0; } .mmPageTitle b:last-child{border-width:7px 7px 0 0; right:0; } } /************/ .mmAD336{font-size:0; display:block;width:336px; padding:0;margin-bottom:15px; } .mmAD336 img{width: 100%;height: auto;} @media screen and (max-width:1023px){.mmAD336{display:none;}} /*************/ .mmMsgBox{overflow:hidden;} .mmMsgBox > h4{background-color:#01c3e0; border-radius:3px 3px 0px 0px; font-size:15px;font-weight:bold;color:#ffffff; line-height:30px; padding:0 4px 0 10px;margin-bottom:2px; } .mmMsgBox > div{border-bottom:2px solid #cccccc; background-color:#ffffff;padding:10px; margin-bottom:15px; } .mmMsgBox a{border-bottom:1px solid #eeeeee; color:#515151;font-size:14px; display:block;overflow:hidden; padding-bottom:6px;margin-bottom:6px; position:relative; } .mmMsgBox a:hover,.mmMsgBox a:hover p, .mmMsgBox a:hover h5,.mmMsgBox a:hover span{text-decoration:none;color:#3092ca;} .mmMsgBox a:last-child{border-bottom:none!important; margin-bottom:0;padding-bottom:3px!important; } .mmMsgBox h6{background-color:rgba(1,195,224,0.8); font-weight: normal;font-size:13px;color:#ffffff;text-align:center; width:20px;line-height:20px; position:absolute;left:0; } .mmMsgBox p{font-size:14px; display:inline; } .mmMsgBox h5{border-left:solid 1px #d1d1d1; font-size:14px;color:#d1d1d1;font-weight:normal; display:inline; padding-left:4px; } .mmType1 span,.mmType2 span, .mmType3 span,.mmType4 span, .mmType6 span:last-child{box-shadow:0 0 0 1px #ededed inset; background-color:#f6f6f6;border-radius:4px; color:#888888;font-size:12px; line-height:18px; padding:0 5px;margin:5px 0 0 2px; float:right; } span.pb{padding-right: 0!important;} .mmMsgBox font{color: #ff2a00;} /****************************************************/ /****************************************************/ .mmType1 a{line-height:1.5; } .mmType2 a{text-indent:-5px; line-height:1.5; } .mmType3 a{padding-left:24px;} .mmType3 p{line-height:1.7;} /**/ .mmType4 a{padding-left:77px;} .mmType4 img{width:50px;height:50px; position:absolute;left:22px; } .mmType4 a{min-height:60px;} .mmType4 h6,.mmType4 img{top:3px;} .mmType4 p{line-height:1.5;} .mmType4 span{margin-top:2px;} /**/ .mmType5 a{border-bottom:solid 1px #f5f5f5; display:block; position:relative; } .mmType5 h4{color:#3092ca;font-size:15px; display:inline; } .mmType5 p{color:#aaa;font-size:12px; display:inline; } .mmType5 a > div{overflow:hidden; font-size:14px;color:#aaa; 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;box-orient:vertical; } .mmType5 i{color:#555;font-style:normal;} .mmType5 a:hover div,.mmType5 a:hover i{color:#3092ca;} /**/ .mmType5.addPic a{padding-left:55px;overflow:hidden;} .mmType5.addPic img{/*display:none;*/ width: 50px;height: 50px; position:absolute;top:3px;left: 0; } /**/ .mmType6{} .mmType6 a{display:table;width:100%; } .mmType6 a div{vertical-align:middle; display:table-cell; } .mmType6 a img{display:inline-block;width: 25px;height: 25px; vertical-align:-7px; } .mmType6 a p{color:#515151;} .mmType6 a p:nth-child(2){text-indent:-5px;display:inline-block;margin-right:-6px;} .mmType6 a h5{border-left:solid 1px #d1d1d1; color:#999; padding-left: 4px; } /**/ .mmType6 a:hover span.rateTotal26{color:#000;} .mmType6 a:hover span.rateTotal26+span{color:#ff9000;} /****************************************************/ /****************************************************/ .mmExpand{text-align:center;background-color: #ff9000;border-radius:5px; display:block;width: 100%;clear:both; } .mmExpand p{color:#fff;text-indent:20px;vertical-align:middle; display:inline-block;line-height:37px; position:relative; -webkit-transition:.3s; -moz-transition:.3s; -ms-transition:.3s; } .mmExpand p:before,.mmExpand p:after{display:block;content:''; width:0;height:0; border-left:solid 7px transparent; border-right:solid 7px transparent; position:absolute;left:0; } .mmExpand p:before{border-bottom:solid 5px #fff;top:13px; } .mmExpand p:after{border-top:solid 5px #fff;top:20px; } /**/ .mmExpand:hover{text-decoration: none;} a.mmExpand:hover p{line-height:40px;color:#fff; } .mmExpand:hover p:before{opacity:0; -webkit-animation:UPUP .5s infinite; -moz-animation:UPUP .5s infinite; -ms-animation:UPUP .5s infinite; } .mmExpand:hover p:after{opacity:0; -webkit-animation:DWDW .5s infinite; -moz-animation:DWDW .5s infinite; -ms-animation:DWDW .5s infinite; } @-webkit-keyframes UPUP{0%{top:13px;}100%{top:10px;opacity:1;}} @-webkit-keyframes DWDW{0%{top:20px;}100%{top:23px;opacity:1;}} @-moz-keyframes UPUP{0%{top:13px;}100%{top:10px;opacity:1;}} @-moz-keyframes DWDW{0%{top:20px;}100%{top:23px;opacity:1;}} @-ms-keyframes UPUP{0%{top:13px;}100%{top:10px;opacity:1;}} @-ms-keyframes DWDW{0%{top:20px;}100%{top:23px;opacity:1;}} /****************************************************/ h5.pvBonus{border-radius: 3px; background-color: #fff5eb; color: #ff2a00;font-size: 12px; display:inline-block;line-height: 18px; padding:0 5px 0 10px;margin-left: 9px; position:relative; } h5.pvBonus:before{content: "";border-radius:50%; border: solid 2px #ffecd7; background:#ff2a00 url(../img/fourm.png?v=161102)  -187px -542px; background-size: 1500px 750px; display:block;width: 14px;height: 14px; position: absolute;left: -9px;top: 0; } *:hover h5.pvBonus{color: #ff2a00!important;} /****************************************************/ 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;} /*****************************************************/ /*~~~~~~*/ .rateArea{width:100px;position:relative;} .rateArea > *{float:left;} .rateArea span{width:100px;font-size:12px;} /**/ .rateBox{font-size:0; background:-webkit-linear-gradient(0deg,#8c8c8c,#d9d9d9);background:-moz-linear-gradient(0deg,#8c8c8c,#d9d9d9); background:-ms-linear-gradient(0deg,#8c8c8c,#d9d9d9);background:-o-linear-gradient(0deg,#8c8c8c,#d9d9d9); background:linear-gradient(0deg,#8c8c8c,#d9d9d9); width: 100px; position:relative;float:left;z-index:1; } .rateBox li{display:inline-block; width:10px; position:relative;z-index:3;float:left; } .rateBox li:nth-last-child(3),.rateBox div:last-child{width:10px;padding-right:0;} .rateBox a{display:block;height:19px;width: 10px;} /**/ .rateBox li:last-child,.rateBox li:nth-last-child(2){font-size:0; width:100%;height:19px; padding-right:0; position:absolute;left:0;top:0;z-index:1; } .rateBox li:nth-last-child(2){width:100%;height:100%; z-index:2; } /**/ .rateBox div{display:inline-block;width:10px;height:19px; float:left; } /**/ .rateBox li:nth-child(-n+10):hover ~ li:last-child div{background-color:transparent;} /**/ .rateBox li:nth-child(1):hover ~ li:last-child div:nth-child(-n+1), .rateBox li:nth-child(2):hover ~ li:last-child div:nth-child(-n+2), .rateBox li:nth-child(3):hover ~ li:last-child div:nth-child(-n+3), .rateBox li:nth-child(4):hover ~ li:last-child div:nth-child(-n+4), .rateBox li:nth-child(5):hover ~ li:last-child div:nth-child(-n+5), .rateBox li:nth-child(6):hover ~ li:last-child div:nth-child(-n+6), .rateBox li:nth-child(7):hover ~ li:last-child div:nth-child(-n+7), .rateBox li:nth-child(8):hover ~ li:last-child div:nth-child(-n+8), .rateBox li:nth-child(9):hover ~ li:last-child div:nth-child(-n+9), .rateBox li:nth-child(10):hover ~ li:last-child div{background-color:#fc0;} /**/ .rate1 li:last-child div:nth-child(-n+1), .rate2 li:last-child div:nth-child(-n+2), .rate3 li:last-child div:nth-child(-n+3), .rate4 li:last-child div:nth-child(-n+4), .rate5 li:last-child div:nth-child(-n+5), .rate6 li:last-child div:nth-child(-n+6), .rate7 li:last-child div:nth-child(-n+7), .rate8 li:last-child div:nth-child(-n+8), .rate9 li:last-child div:nth-child(-n+9), .rate10 li:last-child div{background-color:#fc0;} /**/ .rateArea > img{width:100px;height:19px; position:absolute; left:0;top:16px; } .rateBox.rate0{-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s; transition:all .5s; opacity:0; } .rateBox.rate0:hover{-webkit-transition:all .5s;-moz-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s; transition:all .5s; opacity:1; } /*~~~~~~*/ .rateAreaMobi{font-size:0; width:65px;height:30px;overflow:hidden; padding-top:; position:relative; } .rateAreaMobi select{outline:none;border:none; background-color:transparent; color:transparent; display:block;width:90px;height:100%; position:absolute;left: 0;top: 0; } .rateAreaMobi p{font-size:12px; display:inline-block;line-height:34px; margin-right:3px;margin-left:7px; } /**/ .rateBox.w80 li, .rateBox.w80 li:nth-last-child(3),.rateBox.w80 div:last-child, .rateBox.w80 a,.rateBox.w80 div{width:8px;} .rateBox.w80, .rateBox.w80 li:last-child, .rateBox.w80 li:nth-last-child(2), .rateBox.w80 + img{width:80px} .rateBox.w80 li,.rateBox.w80 a,.rateBox.w80 div,.rateBox.w80 + img{height:16px;} /**/ .rateBox.w90 li, .rateBox.w90 li:nth-last-child(3),.rateBox.w90 div:last-child, .rateBox.w90 a,.rateBox.w90 div{width:9px;} .rateBox.w90, .rateBox.w90 li:last-child, .rateBox.w90 li:nth-last-child(2), .rateBox.w90 + img{width:90px} .rateBox.w90 li,.rateBox.w90 a,.rateBox.w90 div,.rateBox.w90 + img{height:17px;} /**/ .rateAreaMobi span{background:url(../img/fourm.png) -247px -400px no-repeat;background-size:1000px 500px; font-size:12px;text-align:center;color:#000;font-weight:bold; display:inline-block;width: 26px;height: 25px;line-height:30px; } .rateAreaMobi span.rate1{background-position: -247px -400px;} .rateAreaMobi span.rate2{background-position: -273px -400px;} .rateAreaMobi span.rate3{background-position: -299px -400px;} .rateAreaMobi span.rate4{background-position: -325px -400px;} .rateAreaMobi span.rate5{background-position: -351px -400px;} .rateAreaMobi span.rate6{background-position: -377px -400px;} .rateAreaMobi span.rate7{background-position: -403px -400px;} .rateAreaMobi span.rate8{background-position: -429px -400px;} .rateAreaMobi span.rate9{background-position: -455px -400px;} .rateAreaMobi span.rate10{background-position: -481px -400px;} /**/ .rateAreaMobi div{border-radius:5px; color:#fff;font-size:15px;text-align:center; display:block;line-height:30px; padding:; background-color:#ff9000; } /**/ .btnUnRate:hover{text-decoration:none; background-color:#ff4e00; } /*~~~~~~*/ /****************************************************/ /****************************************************/ #shareBox{position:absolute;} #shareBox > div{text-align:right;font-size:0; width:80px; } #shareBox a{background-image:url(../img/event/vote/2016/column.png);background-size:587px 450px; background-color:transparent; display:inline-block;width: 35px;height: 33px; } #shareBox a.LINE{background-position:-103px -381px;margin-right:8px;} #shareBox a.LINE:hover{background-position:-103px -416px;} #shareBox a:last-child{background-position:-140px -381px;} #shareBox a:last-child:hover{background-position:-140px -416px;} /****************************************************/ /****************************************************/ .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;} /*=== vvv POPU BOX vvv ===*//*=== vvv POPU BOX vvv ===*/ .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; } /*=== vvv POPU BOX vvv ===*//*=== vvv POPU BOX vvv ===*/ .mmLikeRate{font-size:0;} .mmLikeRate > li{background-color:#f9f9f9; vertical-align: middle; display:inline-block;width:138px; /*height: 275px;*/ 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:50px; } .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:-4px; } .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;} .mmExpand{font-size:15px; } /**/ .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;} ul.mmScroller li:nth-child(odd){background-color:#f5f5f5;} ul.mmScroller li a{display:block} /*mouseover event str*/ ul.mmScroller li.mmHover{background-color:#fff2bc;} ul.mmScroller li.mmHover p, ul.mmScroller li.mmHover span, ul.mmScroller li.mmHover div, ul.mmScroller li.mmHover a h2 p{color:#ff4e00;} /*mouseover event end*/ ul.mmScroller a:hover{text-decoration:none;} ul.mmScroller a div:first-child{vertical-align:middle; display:inline-block;width:calc( 100% - 60px ); padding:4px 0 5px 5px;margin-top:2px; } /*>>*/ ul.mmScroller a h2{overflow:hidden; display:block;width:100%;line-height:12px; } /*>>*/ ul.mmScroller a h2 p{word-wrap:break-word; overflow:hidden; display:inline; } ul.mmScroller a h2 p:first-child{font-size:15px;font-weight:bold;color:#515151; } ul.mmScroller a h2 p:last-child{font-size:12px;color:#777; margin-left:3px; display:inline-block;vertical-align:-2px; } /*>>*/ ul.mmScroller a span{font-size:13px;color:#777; display:block;width:100%;height:14px;line-height:14px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; } /**/ ul.mmScroller a div:nth-last-child(1){text-align:center;vertical-align:middle;font-size:0; display:inline-block; width:55px;height:58px;line-height:58px; padding:1px 0;border-left:solid 3px #fff; float:none; } ul.mmScroller a div:nth-last-child(1) img{max-width: 54px;max-height: 56px; display:inline-block;vertical-align:middle; } /*================================*/ /*body,html{background-image: none;}*/ .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; 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;} /*============*/ .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: 20px;} .mmMMListOut > a.pre{background-position: -2932px 0px;} .mmMMListOut > a.nex{background-position: -2979px 0px;} .mmMMListOut > b{width: 25px;background-size: 1500px 750px;} .mmMMListOut > b.pre{background-position: -1450px -140px;} .mmMMListOut > b.nex{background-position: -1475px -140px;} /* v actor v */ .mmLikeRate li.actor{overflow: hidden;} .mmLikeRate li.actor a{background-color: #8C8C8C;height: 100%;} .mmLikeRate li.actor a:hover{background-color: #666;} .mmLikeRate li.actor a:before, .mmLikeRate li.actor a:after{display: none;} .mmLikeRate li.actor a img{ width: 139px;height: 190px;margin-left: -5px;} .mmLikeRate li.actor h6{height: 70px;padding: 3px 18px 0;} .mmLikeRate li.actor h6 span, .mmLikeRate li.actor a:hover h6 span{color: #fff;} /*---------*/ #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;} #mmMMListOut336 .actor img{height: 219px;width: 160px;}