/*ZIP ==================== date : 2017 / 1 / 13 vision : 1.0 this : new creat ==================== */ #mmIView h1, .slick-prev,.slick-next, #mmIVMV{background-image: url(../img/mmIdx.png); background-size: 400px 200px; } #mmIVt b,#mmIVt:after, #mmMain > h2:after, .mmLikeRate:before, .slider:before,.slider:after{content:"";display: block;} #mmBody{padding: 0;position: relative;z-index: 1;} .mmPageBread{height: 30px;line-height: 30px; width: 100%; padding: 0;margin-top: 43px; } #mmIView{background-color: #000; position: relative; overflow: hidden; } #mmIVBox{position: absolute;} #mmIVBox h1,#mmIVt,#mmIVp{position: relative;z-index:4;} #mmIView a:hover{text-decoration: none;} /**/ #mmIView h1{text-align: center;color: #fff;top: 0;} /**/ #mmIVt{display:block; padding: 0 30px 0 60px; overflow: hidden;left:-60px; } #mmIVt > div{background-color: rgba( 0,0,0,.5 );} @keyframes turnAni{50%{filter: blur(3px);opacity: .5;}} @-webkit-keyframes turnAni{50%{filter: blur(3px);opacity: .5;}} .turnAni #mmIVt > div > div, .turnAni #mmIVp img{animation:turnAni 1s linear 1; -webkit-animation:turnAni 1s linear 1; } #mmIVt b,#mmIVt:after{position: absolute;} #mmIVt b{width: 0;height: 0; border-style: solid; border-width: 80px 30px 0 0; border-color: rgba( 0,0,0,.5 ) transparent transparent transparent; right: 0;top: 0; } #mmIVt:after{width: 60px;height: 60px; background-color: rgba(0,0,0,.5); top: 0;left: 0; } #mmIVt span{word-break:break-all; font-size: 12px;color: #fff; margin-bottom: 1px; display:block;line-height: 1.2; } #mmIVt .subName{color:#ccc;} /****/ #mmMain{border-bottom: 2px solid #ccc; background-color: #fff; } /****/ #mmMain > h2{border-radius: 4px 4px 0 0; background-color: #01c3e0; font-size: 14px;font-weight: normal; padding: 0 10px;margin-bottom: 2px; position: relative;overflow: hidden; } #mmMain > h2:after{background-color: #00d2f1; width: 165px;height: 105px; position: absolute;left: 5px;top: -40px; transform: rotate(25deg); -webkit-transform: rotate(25deg); } #mmMain > h2 a{color: #fff; line-height:25px; float: left; position:relative;z-index: 1; } #mmMain > h2 a:first-child{text-decoration: none;} #mmMain > h2 .more{font-size: 12px;float: right;} .mmMMListOut + h2{margin-top: 13px;} /**/ #mmMain > h2.shop{background-color: #ffdc83;} #mmMain > h2.shop:after{background-color: #ffe8ae;} #mmMain > h2.shop a{color: #824d16;} /****/ .mmMMList .mmLikeRate > li{width: 134px; margin: 0; border-right: 6px solid #fff; } /*v bg color v*/ .mmLikeRate:before{height: 260px;width: 100%; background-color: #f9f9f9; position: absolute;top: 0;right: 0; } .mmLikeRate{background-color: #f9f9f9;} /* ^ bg color ^ */ .mmLikeRate li.more a{background-color: #999; font-size: 24px;color: #fff;text-align: center; line-height: 260px; } .mmLikeRate li.more a:before, .mmLikeRate li.more a:after{display: none;} @media screen and (max-width: 767px){#mmIView,#mmIVBox{height: 190px;} #mmIView h1{font-size: 24px; width: 120px;line-height: 47px; padding-right: 29px; } #mmIVt{max-width: 220px;} #mmIVt > div{padding: 8px 0 8px 11px;} #mmIVt .mainName{font-size: 14px;} #mmIVt .subName{display: none;} #mmIVBox img{display: none;} #mmSub{padding: 15px 4%;} } @media screen and (min-width: 768px) and (max-width: 1023px){#mmSub{padding: 15px 2%;} } @media screen and (min-width: 768px){#mmIView,#mmIVBox{height: 330px;} #mmIView h1{font-size: 32px; width: 190px;line-height: 60px; background-position: -120px 0; padding-right: 37px; } #mmIVt > div{height: 60px;padding: 6px 0 0 21px;} #mmIVt .mainName{font-size: 17px;} #mmIVp{left: 20px;} #mmIVp img{border:solid 2px #444;height: 163px;} } @media screen and (max-width: 1023px){.mmPageBread{padding-left: 8px;} #mmIVMV{display: none;} #mmBody .wrapper{padding: 0;} #mmMain{padding: 12px 15px;} } @media screen and (min-width: 1024px){#mmBody{min-height: 1150px;} #mmBody .wrapper{position: relative;top: -28px;} #mmIVMV{background-position: 0 -50px; display: block;width: 100px;height: 60px; margin: auto; position: absolute;top: 0;right: 0;bottom: 0;left: 0; z-index: 5;opacity: .9; } #mmIVMV:hover{opacity: 1;} #mmMain{width: calc( 100% - 17px - 336px );padding: 20px;} .mmLikeRate li.more a:hover{background-color: #555;} #mmSub{width: 336px; position: absolute;top: 0;right: 0; } #mmSub.fixed{position: fixed;bottom: 42px;top: auto;} } @media screen and (min-width: 1024px) and (max-width: 1344px){.mmPageBread{padding-left: calc( ( 100% - 970px ) / 2 + 12px );} #mmIVBox{left: calc( ( 100% - 970px ) / 2 );} #mmSub.fixed{right: calc( ( 100% - 970px ) / 2 );} } @media screen and (min-width: 1345px){.mmPageBread{padding-left: calc( ( 100% - 1321px ) / 2 + 12px );} #mmIVBox{left: calc( ( 100% - 1321px ) / 2 );} #mmSub.fixed{right: calc( ( 100% - 1321px ) / 2 );} } /* v slick plugin customize v */ .slider{width: 100%;margin: 0 auto;} .slider:before,.slider:after{position: absolute;z-index:1; } .slick-slide{outline: none;overflow: hidden;} .slick-slide a{display: block;outline: none;} .slick-slide img{height: 100%;} /****/ .slick-dots{text-align: center;font-size: 0; position: absolute; z-index: 2; } .slick-dots li{display: inline-block;width: 14px;height: 14px; margin-left: 10px; cursor: pointer; } .slick-dots li:first-child{margin: 0;} .slick-dots li button{border: solid 2px #fff;border-radius: 50%; background: #000; font-size: 0; display: block;width: 100%;height: 100%; cursor: pointer; outline: none; } .slick-dots li button:hover, .slick-dots li button:focus{outline: none;} .slick-dots li button:hover:before, .slick-dots li button:focus:before{opacity: 1;} .slick-dots li.slick-active button{background-color: #fff; box-shadow: 0 0 7px rgba(0,0,0,.5),0 0 7px rgba(0,0,0,.5),0 0 7px rgba(0,0,0,.5); } @media screen and (max-width: 767px){.slider,.slick-slide, .slick-slide a{height: 190px;} .slick-slide img{margin-left: calc( ( 820px - 100% ) / 2 * -1 );} } @media screen and (min-width: 768px){.slider,.slick-slide, .slick-slide a{height: 330px;} .slick-slide img{margin-left: calc( ( 1425px - 100% ) / 2 * -1 );} } @media screen and (max-width: 1023px){.slider:before{display: none;} .slider:after{background: linear-gradient( to top,#000,transparent ); width: 100%;height: 23px; bottom: 0; } /**/ .slick-prev,.slick-next{display: none!important;} /****/ .slick-dots{bottom: 10px;right: 10px;} } @media screen and (min-width: 1024px){.slider:before,.slider:after{width: 160px;height: 100%;top: 0;} .slider:before{left: 0;background: linear-gradient( to right,#000,transparent );} .slider:after{right: 0;background: linear-gradient( to left,#000,transparent );} /**/ .slick-prev,.slick-next{border: none; background-color: transparent; font-size: 0; width: 21px;height: 46px; position: absolute;top: 145px; z-index: 5; cursor: pointer;outline: none; opacity: .8; } .slick-prev{background-position: -105px -65px;left: 10px;} .slick-next{background-position: -135px -65px;right: 10px;} .slick-prev:hover,.slick-next:hover{opacity: 1;} /****/ .slick-dots{width: 100%;bottom: 48px;} } @media screen and (min-width: 1024px) and (max-width: 1344px){.slider{max-width: 1100px;} } @media screen and (min-width: 1345px){.slider{max-width: 1425px;} } /* ^ slick plugin customize ^ */ /* ====== modify of future=====*/ /* v mdbSortBox v */ .mdbSortBox{border-bottom: solid 2px #ccc; background-color: #fff; padding: 18px 18px 6px;margin-bottom: 15px; } .mdbSortBox:last-child{margin-bottom: 0;} .mdbSortBox h6{border-bottom:solid 1px #f9f9f9; font-size: 16px;color: #888; margin-bottom: 3px;padding-bottom: 8px;margin-bottom: 0; } .mdbSortBox b{color: #000;} /****/ .mdbSortBox ul{padding: 12px 0 0;overflow: hidden;} .mdbSortBox li{width: calc( ( 100% - 30px ) / 4 ); margin: 0 10px 12px 0; float: left; } .mdbSortBox li:nth-child(4n){margin-right: 0;} .mdbSortBox a{box-shadow: 0 1px #f7f7f7; border: solid 1px #f3f3f3;border-radius: 5px; text-align: center;font-size: 13px; display: block;line-height: 30px; margin: 0; } .mdbSortBox a:hover{border-color: #3092ca; background-color: #3092ca; text-decoration: none;color: #fff; } /* light box player */ #mdbBigViewMV{display:block;max-width:94%;max-height:94%;overflow:hidden; margin:auto; position:fixed;z-index: 1000;top: 50%;left: 0;bottom:0;right:0; }