/*ZIP ==================== version 1.0 2016 / 7 / 21 ==================== */ #mmTitle{background-color:#3092ca; margin-bottom:3px; position:relative; } #mmTitle:after{content:""; background-color:rgba(0,0,0,.5); display:none; position:absolute; } #mmTitle p{color:#fff;font-size:21px;font-weight:bold; line-height:45px; } #mmTitle b{position:absolute; } /*~~~~*/ #mmBonus{background-color:#ff4e00; line-height:24px; padding:0 8px; position:absolute;right: 10px;top: 10px; } #mmBonus span{color:#fff;font-size:12px;} #mmBonus a{color:#fff;font-size:12px;} #mmBonus i{background-color:#fff; color:#ff4e00;text-align: center;font-style:normal;font-weight:bold;font-family:Arial; display:inline-block;width: 15px;line-height: 15px; margin-left:5px;padding-top:2px; } #mmBonus a:after{content:""; display:block;width: 0;height: 0; border-style:solid; border-color:transparent #fff transparent transparent; border-width:3px 5px 3px 0; position:absolute;right: 22px;top: 10px; } #mmBonus a:hover{text-decoration:none;color:#fff000;} #mmBonus a:hover i{background-color:#fff000;d} #mmBonus a:hover:after{border-color:transparent #fff000 transparent transparent; } /*~~~~*/ #mmShop{font-size:0;} #mmShop a{background-color:#fff; display:inline-block; } /**/ #mmShop .shopAbove{overflow:hidden; text-align:center;font-size:0; line-height:150px;height:150px;vertical-align:middle; margin:10px 10px 0; position:relative; } #mmShop .shopAbove img{display:inline;height: 150px; } #mmShop .shopAbove img.landscap{width:100%!important;height:auto!important; margin:auto; position:absolute;top: 0;right: 0;bottom: 0;left: 0; } #mmShop .shopAbove span{font-size:15px; line-height:25px;height:25px; margin:auto; position:absolute;top: 0;right: 0;bottom: 0;left: 0; } #mmShop .shopAbove span.typeA{box-shadow: -2px -2px 0 #000; background-color:#666; color:#fff; width: 95px; } #mmShop .shopAbove span.typeB{box-shadow:-2px -2px 0 #003d5b; background-color:#92dbff; color:#003d5b; width: 104px; } /**/ #mmShop .shopUnder{padding:0 10px 10px;} #mmShop h6{display:table;} #mmShop h6 div{vertical-align:middle;display:table-cell;height:32px;} #mmShop h6 span{font-size:14px;color:#000;font-weight:bold; line-height:1.2; overflow:hidden;text-overflow:ellipsis; 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; } /**/ #mmShop h5,#mmShop h4,#mmShop p{line-height:1;margin-top:3px;} #mmShop h5{font-size:12px;color:#999;font-weight:normal;} #mmShop h4{font-size:12px;color:#ff4e00;text-align:right;font-weight:normal; text-decoration:line-through; height:14px; } /**/ #mmShop p{font-size:16px;color:#ff4e00;font-weight:bold; text-align:right; } #mmShop p i{font-size:18px;padding-left:2px;} #mmShop p span{font-size:12px;font-weight:normal;} /*~~~~*/ #mmShop a:hover{text-decoration:none;} /*#mmShop a:visited h6 span{color:#00f;}*/ #mmShop a:hover h6 span{color:#ff4e00;} /*#mmShop a:hover h5,#mmShop a:hover h4, #mmShop a:hover p,#mmShop a:hover p i,#mmShop a:hover p span{color:#999;}*/ /*~~~~*/ #mmShop a.un{cursor:default;} #mmShop a.un img,#mmShop a.un .shopUnder{opacity:.5;} #mmShop a.un:hover h6 span{color:#000;} @media screen and (max-width:479px){#mmBody .wrapper{padding:0 5px;} /*~~~~*/ #mmTitle:after{width:100%;height:2px; bottom:-2px; } #mmTitle p{text-indent:10px;} #mmTitle b{background-color:#176ea0; width: 5px;height:49px; top:2px; } #mmTitle b:first-child{left:-5px;} #mmTitle b:last-child{right:-5px;} /*~~~~*/ #mmShop a{width:calc(100% / 2 - 3px); margin-right:6px;margin-bottom:6px; } #mmShop a:nth-child(even){margin-right:0;} } @media screen and (min-width:480px){#mmTitle{width:calc(100% + 14px); margin-left:-7px; } #mmTitle p{text-indent:20px;} #mmTitle:after{width:calc(100% - 14px);height:3px; bottom:-3px;left:7px; } #mmTitle b{width: 0;height: 0; border-style:solid; border-color:#176ea0 transparent transparent transparent; bottom:-7px; } #mmTitle b:first-child{border-width:7px 0 0 7px; left:0; } #mmTitle b:last-child{border-width:7px 7px 0 0; right:0; } } @media screen and (min-width:480px) and (max-width:1023px){#mmBody .wrapper{padding:0 2%;} } @media screen and (min-width:480px) and (max-width:767px){#mmShop a{width:calc(100% / 3 - 4px); margin-right:6px;margin-bottom:6px; } #mmShop a:nth-child(3n){margin-right:0;} } @media screen and (max-width:1023px){#mmSub{display:none;} } @media screen and (min-width:768px) and (max-width:1023px){#mmShop a{width:calc(100% / 5 - 4px); margin-right:5px;margin-bottom:5px; } #mmShop a:nth-child(5n){margin-right:0;} } @media screen and (min-width:1024px){#mmMain{float:left;} #mmSub{width:336px;float:right;} #mmSub a{font-size:0;display:block;margin-bottom:10px;} } @media screen and (min-width:1024px) and (max-width:1424px){#mmBody .wrapper{width:970px;} /*======*/ #mmMain{width:614px;} /*~~~*/ #mmShop a{width:calc(100% / 4 - 6px); margin-right:8px;margin-bottom:8px; } #mmShop a:nth-child(4n){margin-right:0;} } @media screen and (min-width:1425px){#mmBody .wrapper{width:1325px;} /*======*/ #mmMain{width: 970px;} #mmShop a{width:calc(100% / 6 - 5px); margin-right:6px;margin-bottom:6px; } #mmShop a:nth-child(6n){margin-right:0;} }