/***** self-defined animated css *****/ .ani-waver { perspective: 500px ; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: waver 3000ms cubic-bezier(.59,1.11,.87,.98) 600ms both 1; -moz-animation: waver 3000ms cubic-bezier(.59,1.11,.87,.98) 600ms both 1; -ms-animation: waver 3000ms cubic-bezier(.59,1.11,.87,.98) 600ms both 1; animation: waver 3000ms cubic-bezier(.59,1.11,.87,.98) 600ms both 1; } .ani-waver2 { perspective: 500px ; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-animation: waver2 3000ms cubic-bezier(.59,1.11,.87,.98) 600ms both 1; -moz-animation: waver2 3000ms cubic-bezier(.59,1.11,.87,.98) 600ms both 1; -ms-animation: waver2 3000ms cubic-bezier(.59,1.11,.87,.98) 600ms both 1; animation: waver2 3000ms cubic-bezier(.59,1.11,.87,.98) 600ms both 1; } @-webkit-keyframes waver { 0% { -webkit-transform: translate3d(10px, -40px, -10px) rotate3d(1,0.2,0,-10deg) ; transform: translate3d(10px, -40px, -10px) rotate3d(1,0.2,0,-10deg) ; } /*60% {*/ /*-webkit-transform: translate3d(2px, 10px, 2px) rotate3d(1,0.2,0,0deg);*/ /*}*/ /*80% {*/ /*-webkit-transform: translate3d(-2px, 5px, -2px) rotate3d(1,0.2,0,2deg);*/ /*}*/ 100% { -webkit-transform: translate3d(0px, 0px, 0px) rotate3d(1,0.2,0,0deg); -moz-transform: translate3d(0px, 0px, 0px) rotate3d(1,0.2,0,0deg); transform: translate3d(0px, 0px, 0px) rotate3d(1,0.2,0,0deg); } /*100% {*/ /*-webkit-transform: translate3d(0px, 0px, 0px) rotate(0deg) ;*/ /*}*/ } @-moz-keyframes waver { 0% { -moz-transform: translate3d(10px, -40px, -10px) rotate3d(1,0.2,0,-10deg) ; } 100% { -moz-transform: translate3d(0px, 0px, 0px) rotate3d(1,0.2,0,0deg); } } @-ms-keyframes waver { 0% { -ms-transform: translate3d(10px, -40px, -10px) rotate3d(1,0.2,0,-10deg) ; } 100% { -ms-transform: translate3d(0px, 0px, 0px) rotate3d(1,0.2,0,0deg); } } @keyframes waver { 0% { transform: translate3d(10px, -40px, -10px) rotate3d(1,0.2,0,-10deg) ; } 100% { transform: translate3d(0px, 0px, 0px) rotate3d(1,0.2,0,0deg); } } @-webkit-keyframes waver2 { 0% { -webkit-transform: translate3d(10px, 40px, 10px) rotate3d(1,0.2,0,10deg) perspective(600px); transform: translate3d(10px, 40px, 10px) rotate3d(1,0.2,0,10deg) perspective(600px); } /*70% {*/ /*-webkit-transform: translate3d(-2px, -10px, -2px) rotate3d(1,0.2,0.2,-2deg);*/ /*}*/ /*80% {*/ /*-webkit-transform: translate3d(2px, 5px, 2px) rotate3d(1,0.2,0,-1deg);*/ /*}*/ 100% { -webkit-transform: translate3d(0px, 0px, 0px) rotate3d(1,0.2,0.1,0deg) perspective(150px); transform: translate3d(0px, 0px, 0px) rotate3d(1,0.2,0.1,0deg) perspective(150px); } /*100% {*/ /*-webkit-transform: translate3d(0px, 0px, 0px) rotate(0deg) ;*/ /*}*/ } @-moz-keyframes waver2 { 0% { -moz-transform: translate3d(10px, 40px, 10px) rotate3d(1,0.2,0,10deg) perspective(600px); } 100% { -moz-transform: translate3d(0px, 0px, 0px) rotate3d(1,0.2,0.1,0deg) perspective(150px); } } @-ms-keyframes waver2 { 0% { -ms-transform: translate3d(10px, 40px, 10px) rotate3d(1,0.2,0,10deg) perspective(600px); } 100% { -ms-transform: translate3d(0px, 0px, 0px) rotate3d(1,0.2,0.1,0deg) perspective(150px); } } @keyframes waver2 { 0% { transform: translate3d(10px, 40px, 10px) rotate3d(1,0.2,0,10deg) perspective(600px); } 100% {transform: translate3d(0px, 0px, 0px) rotate3d(1,0.2,0.1,0deg) perspective(150px); } } @-webkit-keyframes rotateLeft { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate3d(0,0,1, 30deg); opacity: 0.7; } 100% { -webkit-transform-origin: right bottom; -webkit-transform:rotate3d(0,0,1, 0deg); opacity: 1; } } @-moz-keyframes rotateLeft { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate3d(0,0,1, 30deg); opacity: 0.7; } 100% { -moz-transform-origin: right bottom; -moz-transform:rotate3d(0,0,1, 0deg); opacity: 1; } } @-ms-keyframes rotateLeft { 0% { -ms-transform-origin: right bottom; -ms-transform: rotate3d(0,0,1, 30deg); opacity: 0.7; } 100% { -ms-transform-origin: right bottom; -ms-transform:rotate3d(0,0,1, 0deg); opacity: 1; } } @keyframes rotateLeft { 0% { transform-origin: right bottom; transform: rotate3d(0,0,1, 30deg); opacity: 0.7; } 100% { transform-origin: right bottom; transform:rotate3d(0,0,1, 0deg); opacity: 1; } } @-webkit-keyframes rotateRight { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate3d(0,0,1, -30deg); opacity: 0.7; } 100% { -webkit-transform-origin: left bottom; -webkit-transform:rotate3d(0,0,1, 0deg); opacity: 1; } } @-moz-keyframes rotateRight { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate3d(0,0,1, -30deg); opacity: 0.7; } 100% { -moz-transform-origin: left bottom; -moz-transform:rotate3d(0,0,1, 0deg); opacity: 1; } } @-ms-keyframes rotateRight { 0% { -ms-transform-origin: left bottom; -ms-transform: rotate3d(0,0,1, -30deg); opacity: 0.7; } 100% { -ms-transform-origin: left bottom; -ms-transform:rotate3d(0,0,1, 0deg); opacity: 1; } } @keyframes rotateRight { 0% { transform-origin: left bottom; transform: rotate3d(0,0,1, -30deg); opacity: 0.7; } 100% { transform-origin: left bottom; transform:rotate3d(0,0,1, 0deg); opacity: 1; } } @-webkit-keyframes waveRotateLeft { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate3d(0,0,1, 2deg) translate3d(5px, 40px, 5px) perspective(600px); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -webkit-transform:rotate3d(0,0,1, 0deg) translate3d(0px, 0px, 0px) perspective(300px); opacity: 1; } } @-moz-keyframes waveRotateLeft { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate3d(0,0,1, 2deg) translate3d(5px, 40px, 5px) perspective(600px); opacity: 1; } 100% { -moz-transform-origin: right bottom; -moz-transform:rotate3d(0,0,1, 0deg) translate3d(0px, 0px, 0px) perspective(300px); opacity: 1; } } @-ms-keyframes waveRotateLeft { 0% { -ms-transform-origin: right bottom; -ms-transform: rotate3d(0,0,1, 2deg) translate3d(5px, 40px, 5px) perspective(600px); opacity: 1; } 100% { -ms-transform-origin: right bottom; -ms-transform:rotate3d(0,0,1, 0deg) translate3d(0px, 0px, 0px) perspective(300px); opacity: 1; } } @keyframes waveRotateLeft { 0% { transform-origin: right bottom; transform: rotate3d(0,0,1, 2deg) translate3d(5px, 40px, 5px) perspective(600px); opacity: 1; } 100% { transform-origin: right bottom; transform:rotate3d(0,0,1, 0deg) translate3d(0px, 0px, 0px) perspective(300px); opacity: 1; } } @-webkit-keyframes waveRotateRight { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate3d(0,0,1, -2deg) translate3d(-5px,40px, -5px) perspective(600px); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform:rotate3d(0,0,1, 0deg) translate3d(0px, 0px, 0px) perspective(300px); opacity: 1; } } @-webkit-keyframes waveRotateRight { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate3d(0,0,1, -2deg) translate3d(-5px,40px, -5px) perspective(600px); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform:rotate3d(0,0,1, 0deg) translate3d(0px, 0px, 0px) perspective(300px); opacity: 1; } } @-moz-keyframes waveRotateRight { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate3d(0,0,1, -2deg) translate3d(-5px,40px, -5px) perspective(600px); opacity: 1; } 100% { -moz-transform-origin: left bottom; -moz-transform:rotate3d(0,0,1, 0deg) translate3d(0px, 0px, 0px) perspective(300px); opacity: 1; } } @-ms-keyframes waveRotateRight { 0% { -ms-transform-origin: left bottom; -ms-transform: rotate3d(0,0,1, -2deg) translate3d(-5px,40px, -5px) perspective(600px); opacity: 1; } 100% { -ms-transform-origin: left bottom; -ms-transform:rotate3d(0,0,1, 0deg) translate3d(0px, 0px, 0px) perspective(300px); opacity: 1; } } @keyframes waveRotateRight { 0% { transform-origin: left bottom; transform: rotate3d(0,0,1, -2deg) translate3d(-5px,40px, -5px) perspective(600px); opacity: 1; } 100% { transform-origin: left bottom; transform:rotate3d(0,0,1, 0deg) translate3d(0px, 0px, 0px) perspective(300px); opacity: 1; } } @-webkit-keyframes waveNoFadeInUp { from { opacity: 1; -webkit-transform: translate3d(0, 2%, 0) perspective(600px); } to { opacity: 1; -webkit-transform: none; } } @-moz-keyframes waveNoFadeInUp { from { opacity: 1; -moz-transform: translate3d(0, 2%, 0) perspective(600px); } to { opacity: 1; -moz-transform: none; } } @-ms-keyframes waveNoFadeInUp { from { opacity: 1; -ms-transform: translate3d(0, 2%, 0) perspective(600px); } to { opacity: 1; -ms-transform: none; } } @keyframes waveNoFadeInUp { from { opacity: 1; transform: translate3d(0, 2%, 0) perspective(600px); } to { opacity: 1; transform: none; } } @-webkit-keyframes waveFadeInUp { from { opacity: 0.7; -webkit-transform: translate3d(0, 2%, 0) perspective(600px); } to { opacity: 1; -webkit-transform: none; } } @-moz-keyframes waveFadeInUp { from { opacity: 0.7; -moz-transform: translate3d(0, 2%, 0) perspective(600px); } to { opacity: 1; -moz-transform: none; } } @-ms-keyframes waveFadeInUp { from { opacity: 0.7; -ms-transform: translate3d(0, 2%, 0) perspective(600px); } to { opacity: 1; -ms-transform: none; } } @keyframes waveFadeInUp { from { opacity: 0.7; transform: translate3d(0, 2%, 0) perspective(600px); } to { opacity: 1; transform: none; } } @-webkit-keyframes waveScaleUp { 0% { -webkit-transform: scale3d(0.2,0.2,0.2) translate3d(0, 20%, 0) perspective(600px); opacity: 0.7; } 60% { -webkit-transform:scale3d(1.1,1.1,1.1) translate3d(0px, 0px, 0px) perspective(200px); opacity: 1; } 80% { -webkit-transform:scale3d(0.95,0.95,0.95) translate3d(0px, 0px, 0px) perspective(200px); opacity: 1; } 100% { -webkit-transform:scale3d(1,1,1) translate3d(0px, 0px, 0px) perspective(300px); opacity: 1; } } @-moz-keyframes waveScaleUp { 0% { -moz-transform: scale3d(0.2,0.2,0.2) translate3d(0, 20%, 0) perspective(600px); opacity: 0.7; } 60% { -moz-transform:scale3d(1.1,1.1,1.1) translate3d(0px, 0px, 0px) perspective(200px); opacity: 1; } 80% { -moz-transform:scale3d(0.95,0.95,0.95) translate3d(0px, 0px, 0px) perspective(200px); opacity: 1; } 100% { -moz-transform:scale3d(1,1,1) translate3d(0px, 0px, 0px) perspective(300px); opacity: 1; } } @-ms-keyframes waveScaleUp { 0% { -ms-transform: scale3d(0.2,0.2,0.2) translate3d(0, 20%, 0) perspective(600px); opacity: 0.7; } 60% { -ms-transform:scale3d(1.1,1.1,1.1) translate3d(0px, 0px, 0px) perspective(200px); opacity: 1; } 80% { -ms-transform:scale3d(0.95,0.95,0.95) translate3d(0px, 0px, 0px) perspective(200px); opacity: 1; } 100% { -ms-transform:scale3d(1,1,1) translate3d(0px, 0px, 0px) perspective(300px); opacity: 1; } } @keyframes waveScaleUp { 0% { transform: scale3d(0.2,0.2,0.2) translate3d(0, 20%, 0) perspective(600px); opacity: 0.7; } 60% { transform:scale3d(1.1,1.1,1.1) translate3d(0px, 0px, 0px) perspective(200px); opacity: 1; } 80% { transform:scale3d(0.95,0.95,0.95) translate3d(0px, 0px, 0px) perspective(200px); opacity: 1; } 100% { transform:scale3d(1,1,1) translate3d(0px, 0px, 0px) perspective(300px); opacity: 1; } } @-webkit-keyframes waveMzRightIn { 0% { -webkit-transform: rotate3d(0,0,1,-20deg) translate3d(120%, 152%, 0) ; } 14% { -webkit-transform: rotate3d(0,0,1,-18deg) translate3d(96%, 120%, 0) ; } 28% { -webkit-transform: rotate3d(0,0,1,-11deg) translate3d(72%, 60%, 0) ; } 35% { -webkit-transform: rotate3d(0,0,1,-7deg) translate3d(60%, 40%, 0) ; } 42% { -webkit-transform: rotate3d(0,0,1,-2deg) translate3d(48%, 20%, 0) ; } /*70% {*/ /*-webkit-transform: rotate3d(0,0,1,-4deg) translate3d(36%, 45%, 0) ;*/ /*}*/ 56% { -webkit-transform: rotate3d(0,0,1,0deg) translate3d(24%, 10%, 0) ; } /*90% {*/ /*-webkit-transform: rotate3d(0,0,1,0deg) translate3d(12%, 15%, 0) ;*/ /*}*/ 75% { -webkit-transform: rotate3d(0,0,1,0deg) translate3d(0, -10px, 0); } 88% { -webkit-transform: translate3d(0, 5px, 0); } 100% { -webkit-transform: rotate3d(0,0,1,0deg) translate3d(0, 0, 0) ; } } @-moz-keyframes waveMzRightIn { 0% { -moz-transform: rotate3d(0,0,1,-20deg) translate3d(120%, 152%, 0) ; } 14% { -moz-transform: rotate3d(0,0,1,-18deg) translate3d(96%, 120%, 0) ; } 28% { -moz-transform: rotate3d(0,0,1,-11deg) translate3d(72%, 60%, 0) ; } 35% { -moz-transform: rotate3d(0,0,1,-7deg) translate3d(60%, 40%, 0) ; } 42% { -moz-transform: rotate3d(0,0,1,-2deg) translate3d(48%, 20%, 0) ; } 56% { -moz-transform: rotate3d(0,0,1,0deg) translate3d(24%, 10%, 0) ; } 75% { -moz-transform: rotate3d(0,0,1,0deg) translate3d(0, -10px, 0); } 88% { -moz-transform: translate3d(0, 5px, 0); } 100% { -moz-transform: rotate3d(0,0,1,0deg) translate3d(0, 0, 0) ; } } @-ms-keyframes waveMzRightIn { 0% { -ms-transform: rotate3d(0,0,1,-20deg) translate3d(120%, 152%, 0) ; } 14% { -ms-transform: rotate3d(0,0,1,-18deg) translate3d(96%, 120%, 0) ; } 28% { -ms-transform: rotate3d(0,0,1,-11deg) translate3d(72%, 60%, 0) ; } 35% { -ms-transform: rotate3d(0,0,1,-7deg) translate3d(60%, 40%, 0) ; } 42% { -ms-transform: rotate3d(0,0,1,-2deg) translate3d(48%, 20%, 0) ; } 56% { -ms-transform: rotate3d(0,0,1,0deg) translate3d(24%, 10%, 0) ; } 75% { -ms-transform: rotate3d(0,0,1,0deg) translate3d(0, -10px, 0); } 88% { -ms-transform: translate3d(0, 5px, 0); } 100% { -ms-transform: rotate3d(0,0,1,0deg) translate3d(0, 0, 0) ; } } @keyframes waveMzRightIn { 0% { transform: rotate3d(0,0,1,-20deg) translate3d(120%, 152%, 0) ; } 14% { transform: rotate3d(0,0,1,-18deg) translate3d(96%, 120%, 0) ; } 28% { transform: rotate3d(0,0,1,-11deg) translate3d(72%, 60%, 0) ; } 35% { transform: rotate3d(0,0,1,-7deg) translate3d(60%, 40%, 0) ; } 42% { transform: rotate3d(0,0,1,-2deg) translate3d(48%, 20%, 0) ; } 56% { transform: rotate3d(0,0,1,0deg) translate3d(24%, 10%, 0) ; } 75% { transform: rotate3d(0,0,1,0deg) translate3d(0, -10px, 0); } 88% { transform: translate3d(0, 5px, 0); } 100% { transform: rotate3d(0,0,1,0deg) translate3d(0, 0, 0) ; } } @-webkit-keyframes waveJumpScaleUp { 0% { -webkit-transform: scale(0.3) translate3d(190%, -50%, 0) ; opacity: 0.0; } 30% { -webkit-transform: scale(0.7) translate3d(100%, -100%, 0) ; opacity: 0.6; } /*40% {*/ /*-webkit-transform: scale3d(0.4,0.4,0.4) translate3d(200%, -90%, 0) perspective(400px);*/ /*opacity: 0.4;*/ /*}*/ /*60% {*/ /*-webkit-transform: scale3d(0.6,0.6,0.6) translate3d(150%,-70%, 0) ;*/ /*opacity: 0.6;*/ /*}*/ /*80% {*/ /*-webkit-transform:scale3d(0.7,0.7,0.7) translate3d(100%, -50%, 0) perspective(200px);*/ /*opacity: 0.8;*/ /*}*/ 100% { -webkit-transform:scale(1) translate3d(0,0,0) ; opacity: 1; } } @-moz-keyframes waveJumpScaleUp { 0% { -moz-transform: scale(0.3) translate3d(190%, -50%, 0) ; opacity: 0.0; } 30% { -moz-transform: scale(0.7) translate3d(100%, -100%, 0) ; opacity: 0.6; } 100% { -moz-transform:scale(1) translate3d(0,0,0) ; opacity: 1; } } @-ms-keyframes waveJumpScaleUp { 0% { -ms-transform: scale(0.3) translate3d(190%, -50%, 0) ; opacity: 0.0; } 30% { -ms-transform: scale(0.7) translate3d(100%, -100%, 0) ; opacity: 0.6; } 100% { -ms-transform:scale(1) translate3d(0,0,0) ; opacity: 1; } } @keyframes waveJumpScaleUp { 0% { transform: scale(0.3) translate3d(190%, -50%, 0) ; opacity: 0.0; } 30% { transform: scale(0.7) translate3d(100%, -100%, 0) ; opacity: 0.6; } 100% { transform:scale(1) translate3d(0,0,0) ; opacity: 1; } } @-webkit-keyframes waveSigh { 0% { /*-webkit-transform-origin: left bottom;*/ -webkit-transform: scale3d(0.1,0.1,0.1) translate3d(0, 0, 0) perspective(600px); opacity: 0; } 20% { /*-webkit-transform-origin: left bottom;*/ -webkit-transform: scale3d(0.8,0.8,0.8) translate3d(8px, 5px, 0) perspective(500px); opacity: 0.8; } 99% { /*-webkit-transform-origin: left bottom;*/ /*-webkit-transform:scale3d(1,1,1) translate3d(125px, -45px, 0px) perspective(300px); -- old*/ -webkit-transform:scale3d(1,1,1) translate3d(95px, 15px, 0px) perspective(300px); opacity: 1; } 100% { /*-webkit-transform-origin: left bottom;*/ -webkit-transform:scale(1.03) translate3d(95px,15px, 0px) perspective(300px); opacity: 0; } } @-moz-keyframes waveSigh { 0% { -moz-transform: scale3d(0.1,0.1,0.1) translate3d(0, 0, 0) perspective(600px); opacity: 0; } 20% { -moz-transform: scale3d(0.8,0.8,0.8) translate3d(8px, 5px, 0) perspective(500px); opacity: 0.8; } 99% { -moz-transform:scale3d(1,1,1) translate3d(95px, 15px, 0px) perspective(300px); opacity: 1; } 100% { -moz-transform:scale(1.03) translate3d(95px,15px, 0px) perspective(300px); opacity: 0; } } @-ms-keyframes waveSigh { 0% { -ms-transform: scale3d(0.1,0.1,0.1) translate3d(0, 0, 0) perspective(600px); opacity: 0; } 20% { -ms-transform: scale3d(0.8,0.8,0.8) translate3d(8px, 5px, 0) perspective(500px); opacity: 0.8; } 99% { -ms-transform:scale3d(1,1,1) translate3d(95px, 15px, 0px) perspective(300px); opacity: 1; } 100% { -ms-transform:scale(1.03) translate3d(95px,15px, 0px) perspective(300px); opacity: 0; } } @keyframes waveSigh { 0% { transform: scale3d(0.1,0.1,0.1) translate3d(0, 0, 0) perspective(600px); opacity: 0; } 20% { transform: scale3d(0.8,0.8,0.8) translate3d(8px, 5px, 0) perspective(500px); opacity: 0.8; } 99% { transform:scale3d(1,1,1) translate3d(95px, 15px, 0px) perspective(300px); opacity: 1; } 100% { transform:scale(1.03) translate3d(95px,15px, 0px) perspective(300px); opacity: 0; } } @-webkit-keyframes rotateLeftPro { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate3d(0,0,1, 5deg); opacity: 1; } 100% { -webkit-transform-origin: right bottom; -webkit-transform:rotate3d(0,0,1, 0deg); opacity: 1; } } @-moz-keyframes rotateLeftPro { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate3d(0,0,1, 5deg); opacity: 1; } 100% { -moz-transform-origin: right bottom; -moz-transform:rotate3d(0,0,1, 0deg); opacity: 1; } } @-ms-keyframes rotateLeftPro { 0% { -ms-transform-origin: right bottom; -ms-transform: rotate3d(0,0,1, 5deg); opacity: 1; } 100% { -ms-transform-origin: right bottom; -ms-transform:rotate3d(0,0,1, 0deg); opacity: 1; } } @keyframes rotateLeftPro { 0% { transform-origin: right bottom; transform: rotate3d(0,0,1, 5deg); opacity: 1; } 100% { transform-origin: right bottom; transform:rotate3d(0,0,1, 0deg); opacity: 1; } } @-webkit-keyframes rotateRightPro { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate3d(0,0,1, -5deg); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform:rotate3d(0,0,1, 0deg); opacity: 1; } } @-moz-keyframes rotateRightPro { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate3d(0,0,1, -5deg); opacity: 1; } 100% { -moz-transform-origin: left bottom; -moz-transform:rotate3d(0,0,1, 0deg); opacity: 1; } } @-ms-keyframes rotateRightPro { 0% { -ms-transform-origin: left bottom; -ms-transform: rotate3d(0,0,1, -5deg); opacity: 1; } 100% { -ms-transform-origin: left bottom; -ms-transform:rotate3d(0,0,1, 0deg); opacity: 1; } } @keyframes rotateRightPro { 0% { transform-origin: left bottom; transform: rotate3d(0,0,1, -5deg); opacity: 1; } 100% { transform-origin: left bottom; transform:rotate3d(0,0,1, 0deg); opacity: 1; } } @-webkit-keyframes rotateCenterPro { 0% { -webkit-transform-origin: center bottom; -webkit-transform: rotate3d(0,0,1, 3deg); opacity: 1; } 50% { -webkit-transform-origin: center bottom; -webkit-transform: rotate3d(0,0,1, -2deg); opacity: 1; } 75% { -webkit-transform-origin: center bottom; -webkit-transform: rotate3d(0,0,1, 1deg); opacity: 1; } 100% { -webkit-transform-origin: left bottom; -webkit-transform:rotate3d(0,0,1, 0deg); opacity: 1; } } @-moz-keyframes rotateCenterPro { 0% { -moz-transform-origin: center bottom; -moz-transform: rotate3d(0,0,1, 3deg); opacity: 1; } 50% { -moz-transform-origin: center bottom; -moz-transform: rotate3d(0,0,1, -2deg); opacity: 1; } 75% { -moz-transform-origin: center bottom; -moz-transform: rotate3d(0,0,1, 1deg); opacity: 1; } 100% { -moz-transform-origin: left bottom; -moz-transform:rotate3d(0,0,1, 0deg); opacity: 1; } } @-ms-keyframes rotateCenterPro { 0% { -ms-transform-origin: center bottom; -ms-transform: rotate3d(0,0,1, 3deg); opacity: 1; } 50% { -ms-transform-origin: center bottom; -ms-transform: rotate3d(0,0,1, -2deg); opacity: 1; } 75% { -ms-transform-origin: center bottom; -ms-transform: rotate3d(0,0,1, 1deg); opacity: 1; } 100% { -ms-transform-origin: left bottom; -ms-transform:rotate3d(0,0,1, 0deg); opacity: 1; } } @keyframes rotateCenterPro { 0% { transform-origin: center bottom; transform: rotate3d(0,0,1, 3deg); opacity: 1; } 50% { transform-origin: center bottom; transform: rotate3d(0,0,1, -2deg); opacity: 1; } 75% { transform-origin: center bottom; transform: rotate3d(0,0,1, 1deg); opacity: 1; } 100% { transform-origin: left bottom; transform:rotate3d(0,0,1, 0deg); opacity: 1; } } @-webkit-keyframes halfFadeIn { from { opacity: 0.7; } to { opacity: 1; } } @-moz-keyframes halfFadeIn { from { opacity: 0.7; } to { opacity: 1; } } @-ms-keyframes halfFadeIn { from { opacity: 0.7; } to { opacity: 1; } } @keyframes halfFadeIn { from { opacity: 0.7; } to { opacity: 1; } } @-webkit-keyframes fadeInOut { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 0; } } @-moz-keyframes fadeInOut { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 0; } } @-ms-keyframes fadeInOut { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeInOut { 0% { opacity: 0; } 10% { opacity: 1; } 100% { opacity: 0; } } @-webkit-keyframes waveBounce { 0% { opacity: 1; -webkit-transform: translate3d(0, 0,0) rotate3d(0.5,0.5,0.1,0deg) perspective(200px); } 30% { opacity: 1; -webkit-transform: translate3d(1%, 3%,0) rotate3d(0.5,0.5,0.1,3deg) perspective(600px); } 100% { opacity: 1; -webkit-transform: translate3d(0, 0,0) rotate3d(0.5,0.5,0.1,0deg) perspective(200px); } } @-moz-keyframes waveBounce { 0% { opacity: 1; -moz-transform: translate3d(0, 0,0) rotate3d(0.5,0.5,0.1,0deg) perspective(200px); } 30% { opacity: 1; -moz-transform: translate3d(1%, 3%,0) rotate3d(0.5,0.5,0.1,3deg) perspective(600px); } 100% { opacity: 1; -moz-transform: translate3d(0, 0,0) rotate3d(0.5,0.5,0.1,0deg) perspective(200px); } } @-ms-keyframes waveBounce { 0% { opacity: 1; -ms-transform: translate3d(0, 0,0) rotate3d(0.5,0.5,0.1,0deg) perspective(200px); } 30% { opacity: 1; -ms-transform: translate3d(1%, 3%,0) rotate3d(0.5,0.5,0.1,3deg) perspective(600px); } 100% { opacity: 1; -ms-transform: translate3d(0, 0,0) rotate3d(0.5,0.5,0.1,0deg) perspective(200px); } } @keyframes waveBounce { 0% { opacity: 1; transform: translate3d(0, 0,0) rotate3d(0.5,0.5,0.1,0deg) perspective(200px); } 30% { opacity: 1; transform: translate3d(1%, 3%,0) rotate3d(0.5,0.5,0.1,3deg) perspective(600px); } 100% { opacity: 1; transform: translate3d(0, 0,0) rotate3d(0.5,0.5,0.1,0deg) perspective(200px); } } .sonic-page-one { -webkit-perspective: 300px; -moz-perspective: 300px; perspective: 300px; } @-webkit-keyframes waveBomble { 0% { opacity: 0.7; -webkit-transform-origin: center bottom; -webkit-transform: scale3d(1,0.1,0.1) translate3d(0,0,0) perspective(1000px) ; } 100% { opacity: 1; -webkit-transform-origin: center bottom; -webkit-transform: scale3d(1,1,1) perspective(300px) translate3d(0,0,7px); } } @-moz-keyframes waveBomble { 0% { opacity: 0.7; -moz-transform-origin: center bottom; -moz-transform: scale3d(1,0.1,0.1) translate3d(0,0,0) perspective(1000px) ; } 100% { opacity: 1; -moz-transform-origin: center bottom; -moz-transform: scale3d(1,1,1) perspective(300px) translate3d(0,0,7px); } } @-ms-keyframes waveBomble { 0% { opacity: 0.7; -ms-transform-origin: center bottom; -ms-transform: scale3d(1,0.1,0.1) translate3d(0,0,0) perspective(1000px) ; } 100% { opacity: 1; -ms-transform-origin: center bottom; -ms-transform: scale3d(1,1,1) perspective(300px) translate3d(0,0,7px); } } @keyframes waveBomble { 0% { opacity: 0.7; transform-origin: center bottom; transform: scale3d(1,0.1,0.1) translate3d(0,0,0) perspective(1000px) ; } 100% { opacity: 1; transform-origin: center bottom; transform: scale3d(1,1,1) perspective(300px) translate3d(0,0,7px); } } @-webkit-keyframes waveBomble2 { 0% { opacity: 0.7; -webkit-transform-origin: center 90%; -webkit-transform: scale3d(1,0.1,0.1) translate3d(0,0,0) perspective(1000px) ; } 100% { opacity: 1; -webkit-transform-origin: center 90%; -webkit-transform: scale3d(1,1,1) perspective(300px) translate3d(0,0,7px); } } @-moz-keyframes waveBomble2 { 0% { opacity: 0.7; -moz-transform-origin: center 90%; -moz-transform: scale3d(1,0.1,0.1) translate3d(0,0,0) perspective(1000px) ; } 100% { opacity: 1; -moz-transform-origin: center 90%; -moz-transform: scale3d(1,1,1) perspective(300px) translate3d(0,0,7px); } } @-ms-keyframes waveBomble2 { 0% { opacity: 0.7; -ms-transform-origin: center 90%; -ms-transform: scale3d(1,0.1,0.1) translate3d(0,0,0) perspective(1000px) ; } 100% { opacity: 1; -ms-transform-origin: center 90%; -ms-transform: scale3d(1,1,1) perspective(300px) translate3d(0,0,7px); } } @keyframes waveBomble2 { 0% { opacity: 0.7; transform-origin: center 90%; transform: scale3d(1,0.1,0.1) translate3d(0,0,0) perspective(1000px) ; } 100% { opacity: 1; transform-origin: center 90%; transform: scale3d(1,1,1) perspective(300px) translate3d(0,0,7px); } } .sonic-page-six { -webkit-perspective: 400px; -moz-perspective: 400px; perspective: 400px; } @-webkit-keyframes waveWoo { 0%{ background-image:url('../images/固定牙刷2.png'); -webkit-transform: perspective(100px) scale3d(1,1,1.1) ; } 25%{ background-image:url('../images/左边动的牙刷2.png'); -webkit-transform: perspective(200px) scale3d(1,1,1) ; } 50% { background-image:url('../images/固定牙刷2.png'); -webkit-transform: perspective(300px) scale3d(1,1,1.1) ; } 75%{ background-image:url('../images/右边动的牙刷2.png'); -webkit-transform: perspective(400px) scale3d(1,1,1) ; } 100% { background-image:url('../images/固定牙刷2.png'); -webkit-transform: perspective(400px) scale3d(1,1,1.1) ; } } @-moz-keyframes waveWoo { 0%{ background-image:url('../images/固定牙刷2.png'); -moz-transform: perspective(100px) scale3d(1,1,1.1) ; } 25%{ background-image:url('../images/左边动的牙刷2.png'); -moz-transform: perspective(200px) scale3d(1,1,1) ; } 50% { background-image:url('../images/固定牙刷2.png'); -moz-transform: perspective(300px) scale3d(1,1,1.1) ; } 75%{ background-image:url('../images/右边动的牙刷2.png'); -moz-transform: perspective(400px) scale3d(1,1,1) ; } 100% { background-image:url('../images/固定牙刷2.png'); -moz-transform: perspective(400px) scale3d(1,1,1.1) ; } } @-ms-keyframes waveWoo { 0%{ background-image:url('../images/固定牙刷2.png'); -ms-transform: perspective(100px) scale3d(1,1,1.1) ; } 25%{ background-image:url('../images/左边动的牙刷2.png'); -ms-transform: perspective(200px) scale3d(1,1,1) ; } 50% { background-image:url('../images/固定牙刷2.png'); -ms-transform: perspective(300px) scale3d(1,1,1.1) ; } 75%{ background-image:url('../images/右边动的牙刷2.png'); -ms-transform: perspective(400px) scale3d(1,1,1) ; } 100% { background-image:url('../images/固定牙刷2.png'); -ms-transform: perspective(400px) scale3d(1,1,1.1) ; } } @keyframes waveWoo { 0%{ background-image:url('../images/固定牙刷2.png'); transform: scale3d(1,1,1.1) ; } 25%{ background-image:url('../images/左边动的牙刷2.png'); transform: scale3d(1,1,1) ; } 50% { background-image:url('../images/固定牙刷2.png'); transform: scale3d(1,1,1.1) ; } 75%{ background-image:url('../images/右边动的牙刷2.png'); transform: scale3d(1,1,1) ; } 100% { background-image:url('../images/固定牙刷2.png'); transform: scale3d(1,1,1.1) ; } } @-webkit-keyframes waveWobble { from { -webkit-transform: none; transform: none; opacity: 0; } 15% { -webkit-transform: translate3d(0, 2%, 0) rotate3d(0, 0, 1, -3deg) ; /*transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);*/ } 30% { -webkit-transform: translate3d(0, 0, 30px) rotate3d(0, 0, 1, 2deg); /*transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);*/ } 45% { -webkit-transform: translate3d(0%, -4%, 60px) rotate3d(0, 0, 1, -2deg); /*transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);*/ } 60% { -webkit-transform: translate3d(0, -8%, 90px) rotate3d(0, 0, 1, 1deg); /*transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);*/ } 75% { -webkit-transform: translate3d(0, -12%, 120px) rotate3d(0, 0, 1, -0.5deg); /*transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);*/ opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 0; } } @-moz-keyframes waveWobble { from { -moz-transform: none; transform: none; opacity: 0; } 15% { -moz-transform: translate3d(0, 2%, 0) rotate3d(0, 0, 1, -3deg) ; } 30% { -moz-transform: translate3d(0, 0, 30px) rotate3d(0, 0, 1, 2deg); } 45% { -moz-transform: translate3d(0%, -4%, 60px) rotate3d(0, 0, 1, -2deg); } 60% { -moz-transform: translate3d(0, -8%, 90px) rotate3d(0, 0, 1, 1deg); } 75% { -moz-transform: translate3d(0, -12%, 120px) rotate3d(0, 0, 1, -0.5deg); opacity: 1; } to { -moz-transform: none; opacity: 0; } } @-ms-keyframes waveWobble { from { -ms-transform: none; transform: none; opacity: 0; } 15% { -ms-transform: translate3d(0, 2%, 0) rotate3d(0, 0, 1, -3deg) ; } 30% { -ms-transform: translate3d(0, 0, 30px) rotate3d(0, 0, 1, 2deg); } 45% { -ms-transform: translate3d(0%, -4%, 60px) rotate3d(0, 0, 1, -2deg); } 60% { -ms-transform: translate3d(0, -8%, 90px) rotate3d(0, 0, 1, 1deg); } 75% { -ms-transform: translate3d(0, -12%, 120px) rotate3d(0, 0, 1, -0.5deg); opacity: 1; } to { -ms-transform: none; opacity: 0; } } @keyframes waveWobble { from { transform: none; transform: none; opacity: 0; } 15% { transform: translate3d(0, 2%, 0) rotate3d(0, 0, 1, -3deg) ; } 30% { transform: translate3d(0, 0, 30px) rotate3d(0, 0, 1, 2deg); } 45% { transform: translate3d(0%, -4%, 60px) rotate3d(0, 0, 1, -2deg); } 60% { transform: translate3d(0, -8%, 90px) rotate3d(0, 0, 1, 1deg); } 75% { transform: translate3d(0, -12%, 120px) rotate3d(0, 0, 1, -0.5deg); opacity: 1; } to { transform: none; opacity: 0; } } @-webkit-keyframes pro-cycle { 1% { opacity: 1; background-position: 0 0; -webkit-transform: scale3d(1, 1, 1); } 100% { background-position: 0 50%; -webkit-transform: scale3d(1.2, 1.2, 1.2); opacity: 0; } } @-webkit-keyframes pro-cycle2 { 1% { opacity: 1; background-position: 0 15%; -webkit-transform: scale3d(1.06,1.06,1.06); } 100% { background-position: 0 65%; -webkit-transform: scale3d(1.26,1.26,1.26); opacity: 0; } } @-webkit-keyframes pro-cycle3 { 1% { opacity: 1; background-position: 0 30%; -webkit-transform: scale3d(1.12,1.12,1.12); } 100% { background-position: 0 80%; -webkit-transform: scale3d(1.32,1.32,1.32); opacity: 0; } } @-webkit-keyframes pro-cycle4 { 1% { opacity: 1; background-position: 0 45%; -webkit-transform: scale3d(1.18,1.18,1.18); } 100% { background-position: 0 95%; -webkit-transform: scale3d(1.38,1.38,1.38); opacity: 0; } } @-moz-keyframes pro-cycle { 1% { opacity: 1; background-position: 0 0; -moz-transform: scale3d(1, 1, 1); } 100% { background-position: 0 50%; -moz-transform: scale3d(1.2, 1.2, 1.2); opacity: 0; } } @-moz-keyframes pro-cycle2 { 1% { opacity: 1; background-position: 0 15%; -moz-transform: scale3d(1.06,1.06,1.06); } 100% { background-position: 0 65%; -moz-transform: scale3d(1.26,1.26,1.26); opacity: 0; } } @-moz-keyframes pro-cycle3 { 1% { opacity: 1; background-position: 0 30%; -moz-transform: scale3d(1.12,1.12,1.12); } 100% { background-position: 0 80%; -moz-transform: scale3d(1.32,1.32,1.32); opacity: 0; } } @-moz-keyframes pro-cycle4 { 1% { opacity: 1; background-position: 0 45%; -moz-transform: scale3d(1.18,1.18,1.18); } 100% { background-position: 0 95%; -moz-transform: scale3d(1.38,1.38,1.38); opacity: 0; } } @-ms-keyframes pro-cycle { 1% { opacity: 1; background-position: 0 0; -ms-transform: scale3d(1, 1, 1); } 100% { background-position: 0 50%; -ms-transform: scale3d(1.2, 1.2, 1.2); opacity: 0; } } @-ms-keyframes pro-cycle2 { 1% { opacity: 1; background-position: 0 15%; -ms-transform: scale3d(1.06,1.06,1.06); } 100% { background-position: 0 65%; -ms-transform: scale3d(1.26,1.26,1.26); opacity: 0; } } @-ms-keyframes pro-cycle3 { 1% { opacity: 1; background-position: 0 30%; -ms-transform: scale3d(1.12,1.12,1.12); } 100% { background-position: 0 80%; -ms-transform: scale3d(1.32,1.32,1.32); opacity: 0; } } @-ms-keyframes pro-cycle4 { 1% { opacity: 1; background-position: 0 45%; -ms-transform: scale3d(1.18,1.18,1.18); } 100% { background-position: 0 95%; -ms-transform: scale3d(1.38,1.38,1.38); opacity: 0; } } @keyframes pro-cycle { 1% { opacity: 1; background-position: 0 0; transform: scale3d(1, 1, 1); } 100% { background-position: 0 50%; transform: scale3d(1.2, 1.2, 1.2); opacity: 0; } } @keyframes pro-cycle2 { 1% { opacity: 1; background-position: 0 15%; transform: scale3d(1.06,1.06,1.06); } 100% { background-position: 0 65%; transform: scale3d(1.26,1.26,1.26); opacity: 0; } } @keyframes pro-cycle3 { 1% { opacity: 1; background-position: 0 30%; transform: scale3d(1.12,1.12,1.12); } 100% { background-position: 0 80%; transform: scale3d(1.32,1.32,1.32); opacity: 0; } } @keyframes pro-cycle4 { 1% { opacity: 1; background-position: 0 45%; transform: scale3d(1.18,1.18,1.18); } 100% { background-position: 0 95%; transform: scale3d(1.38,1.38,1.38); opacity: 0; } } /*************** joe head *******************/ /**@color-main #0c9a90; **/ .mall-shop img {width:5.7%;} div.page>p { display: none;} .vc_col-xs-1, .vc_col-sm-1, .vc_col-md-1, .vc_col-lg-1, .vc_col-xs-2, .vc_col-sm-2, .vc_col-md-2, .vc_col-lg-2, .vc_col-xs-3, .vc_col-sm-3, .vc_col-md-3, .vc_col-lg-3, .vc_col-xs-4, .vc_col-sm-4, .vc_col-md-4, .vc_col-lg-4, .vc_col-xs-5, .vc_col-sm-5, .vc_col-md-5, .vc_col-lg-5, .vc_col-xs-6, .vc_col-sm-6, .vc_col-md-6, .vc_col-lg-6, .vc_col-xs-7, .vc_col-sm-7, .vc_col-md-7, .vc_col-lg-7, .vc_col-xs-8, .vc_col-sm-8, .vc_col-md-8, .vc_col-lg-8, .vc_col-xs-9, .vc_col-sm-9, .vc_col-md-9, .vc_col-lg-9, .vc_col-xs-10, .vc_col-sm-10, .vc_col-md-10, .vc_col-lg-10, .vc_col-xs-11, .vc_col-sm-11, .vc_col-md-11, .vc_col-lg-11, .vc_col-xs-12, .vc_col-sm-12, .vc_col-md-12, .vc_col-lg-12 {padding:0 !important; } .container { width:100%; padding:0;} header.joe-head { background-color: #42464f !important; width:100% !important; } .joe-footer {background-color: #42464f; line-height: 60px; font-size:12px; } .joe-footer>div:nth-child(2) { padding-right: 0;} .dv-foot-banner img {width:100%;height:auto; margin-bottom:2px;} .widget-text img#imgMatic { width:100%;} .log > a > img {width:80px !important; } .sub-menu { top:54px !important;left:0 !important; right:auto !important; /* old menu style width:90%; background-image: url('../images/submenu_bg.png'); background-repeat: repeat-x; background-color: unset !important; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px; */ width: 132%; margin-left: -22% !important; background-color: rgba(255,255,255,.7) !important; border:none !important; height:115px; display:table-cell; text-align:center; } .sub-menu li { display:inline-block; isolation:isolate; } .sub-menu>li:hover { -webkit-filter:drop-shadow(5px 5px 5px #ccc) contrast(1.1);-moz-filter:drop-shadow(5px 5px 5px #ccc) contrast(1.1);filter:drop-shadow(5px 5px 5px #ccc) contrast(1.1);} .joe-page a>img:hover {-webkit-filter:drop-shadow(2px 2px 2px rgba(0,0,0,.1));-moz-filter:drop-shadow(2px 2px 2px rgba(0,0,0,.1));filter:drop-shadow(2px 2px 2px rgba(0,0,0,.1));} .sub-menu>li:hover>a { isolation:isolate; } .current-menu-item>.current,#menu-main-navigation .current { color:#0c9a90 !important;} .flexslider { border:none !important;} .flex-direction-nav a:before { font-family: "Menlo" !important; font-size:56px !important;; margin-top:-10px;} .flex-direction-nav a.flex-prev:before { content:"\2039";} .flex-direction-nav a.flex-next:before { content:"\203a" !important;} .flex-direction-nav .flex-prev { left:120px !important; display:inline-block; padding-left:4px; border-radius: 50%; color:#fff; background-color: rgba(0,0,0,.7) /*rgba(0,172,158,.8)*/; } .flex-direction-nav .flex-next { right:120px !important; display: inline-block; padding-right:4px; border-radius: 50%; color:#fff; background-color:rgba(0,0,0,.7) /*rgba(0,172,158,.8)*/;} .flexslider:hover .flex-prev {left: 150px !important;} .flexslider:hover .flex-next {right: 150px !important;} .flexslider .slides img { height:auto;} div#post-809 div.vc_col-sm-12,.col-md-12 { padding:0 !important;} .wpb_gallery .wpb_flexslider .flex-control-nav { margin-top:-25px !important;} .flex-control-paging li a { background-color: rgba(255,255,255,.5) !important;} .flex-control-paging li a.flex-active { background-color: rgba(255,255,255,.8) !important;} .wpb_row { margin-bottom:15px !important;} .wpb_gallery_slides { margin-bottom:0 !important;} .wpb_wrappe_rs > ul,#tab-5fc0e7be-a1fb-5 .product-cats,#tab-5fc0e7be-a1fb-5 .product-title,#tab-5fc0e7be-a1fb-5 .product-ratings, #tab-5fc0e7be-a1fb-5 .product-price-container { display: none !important;} .widget-text a[title="Read more"] { display: none !important;} div.page-header { background-image: none; border: none; background-color: rgba(255,255,255,.5); padding:0 0 0 6%; position: fixed; z-index: 9; width: 100%; } div.page-header .breadcrumb { display: none;} div.page-header h1 { color:#0c9a90;font-weight: normal;} .footer-info img { max-width: unset !important;} .footer-info { float: right;} .footer-info li { float: left; list-style-type: none; margin:0 10px; cursor: pointer; position: relative; } .footer-info li:last-child { margin-right:0;} .footer-info li>div { position: absolute;opacity:0; } .footer-info-1 { bottom: 37px; left:-95px;} .footer-info-2 { bottom: 37px; left:-95px;} .footer-info-3 { bottom: 37px; left:-95px;} .footer-info-4 { bottom: 37px; left:-95px;} #footer.footer-minimal4 .widget p { font-size:13px;} #footer div.widget-text {z-index:2; position: relative;} .wpb_single_image>div.wpb_wrapper { position:relative; height:auto;} .wpb_single_image>div.wpb_wrapper h2.wpb_singleimage_heading { position: absolute; bottom:-33px; opacity: 0; background-color: rgba(0,0,0,.7); color:#ffffff; font-size:18px;} .wpb_single_image>div.wpb_wrapper:hover h2.wpb_singleimage_heading { position: absolute; bottom: 0; margin:0; opacity: 1; padding:15px 10px; background-color: rgba(0,0,0,.7); font-size:18px; font-weight: normal; width:100%; -webkit-transition: all 500ms ease-out; -moz-transition: all 500ms ease-out; -ms-transition: all 500ms ease-out; transition: all 500ms ease-out; } /************* shop links ************/ .dvShop{ /* background: url('../images/shop_bg.png') center top no-repeat; padding-top: 13px; width: 14%; height:5%; */ position: absolute; height:4.348%; /*27px*/ width:12.64%; /*180px*/ z-index:200; cursor: pointer; } .dvShopCont {width: 100%; height: inherit; } .dvShop>.dvShopCont>a> img.come-from-right{ -webkit-animation: rightleft 500ms 1 ease-out 50ms both; -moz-animation: rightleft 500ms 1 ease-out 50ms both; -ms-animation: rightleft 500ms 1 ease-out 50ms both; animation: rightleft 500ms 1 ease-out 50ms both; } .dvShop>.dvShopCont>a> img.come-from-left{ -webkit-animation: leftright 500ms 1 ease-out 50ms both; -moz-animation: leftright 500ms 1 ease-out 50ms both; -ms-animation: leftright 500ms 1 ease-out 50ms both; animation: leftright 500ms 1 ease-out 50ms both; } .dvShop>.dvShopCont>a:first-child>img {width:52%; height: 100%; left:0; top:0; position: absolute; } .dvShop>.dvShopCont>a:last-child>img {width:45%;height:100%; left:60%;top:0; position: absolute; } .dvShop>.dvShopCont>a:first-child> img.come-from-left { -webkit-animation-duration: 700ms; -webkit-animation-delay: 150ms; -moz-animation-duration: 700ms; -moz-animation-delay: 150ms; -ms-animation-duration: 700ms; -ms-animation-delay: 150ms; animation-duration: 700ms; animation-delay: 150ms; } .dvShop>.dvShopCont>a:last-child> img.come-from-right { -webkit-animation-duration: 700ms; -webkit-animation-delay: 150ms; -moz-animation-duration: 700ms; -moz-animation-delay: 150ms; -ms-animation-duration: 700ms; -ms-animation-delay: 150ms; animation-duration: 700ms; animation-delay: 150ms; } .joe-page-mall { width:100%; display:table ; } .joe-page-mall> div { display:table-cell; float:none; vertical-align: middle; height:250px; } .joe-page-mall> div h2 { color:#22dddd;font-size:20px; margin:10px 0; font-weight: normal;} .joe-page-assm {background:url('../images/assembly_bg.png') no-repeat; background-size: 100%; text-align: center; } .joe-page-assm img {width:11.3%; margin-top:10.50%;} .joe-page,.joe-page-big { position: relative; width:100%; /** padding-top:calc(41.5% - 60px ); **/ /** eq height:38%;**/ overflow: hidden;} .we-page-m1 img { position:absolute;} #imgM1Left { left:25%; top:0; width:14.345%;} #imgM1Right { left:30%; top:-30%; width:29.217%;} #imgM1Title { left:55%; top:25%; width:22.49%;} #imgM1More { left:63.5%; top:55%; width:6.15%;} .we-page-m2 { background:url('../images/mz_bg-1.png') no-repeat; background-size: 100%; background-position: 0 15%; text-align: center; position: relative; width:100%; height: inherit;} .we-page-m2 img { position:absolute;} .we-page-m2>div {width:100%;} .we-page-m2 #imgM2Title{ width: 17.08%; top: 7%; left: 41%;} .we-page-m2 #imgM2More { width: 6.15%; left: 46.5%; top: 27%;} #imgM2Blue,#imgM2Pink { width:73.04%; top:38.2%; left:13.5%;} /*#imgM2BlueSmall,#imgM2PinkSmall { width: 4.20%; margin:0 3%;}*/ #imgM2BlueSmall,#imgM2PinkSmall { width: 1.577%; margin:0 1%; top:78%;} #imgM2BlueSmall { left:46%;} /*#dvHoverPic,.m2-blue,.m2-pink {width:100%; height:inherit;}*/ /*#dvHoverPic >div.m2-blue > #imgM2Pink { display: none;}*/ /*#dvHoverPic >div.m2-blue > #imgM2Blue { display: block;}*/ /*#dvHoverPic >div.m2-pink > #imgM2Pink { display: block;}*/ /*#dvHoverPic >div.m2-pink > #imgM2Blue { display: none;}*/ .we-page-white { background:url('../images/in_bg.png') no-repeat; background-size: 100%; text-align: center;} #imgWhiteTitle {width:49.396%; margin-top:20%;} .we-page-white-btn > img { width:3.153%;margin:7% 2%; } #imgWhiteMore { width:12.3% ;} .we-page-white > .hover-turn-img { background:url('../images/in_blue.png') no-repeat; background-size: 107.62%; /*background-position: 220% 86%;*/ background-position: 150% 30%; height:inherit;} .we-page-white > .hover-turn-img > img {width:107.62%; margin:-50% 0 0 -30%;} .hover-turn-img-action { -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; transition: all 1s ease; } .we-page-white > .turn-blue { background-image:url('../images/in_blue.png');} .we-page-white > .turn-red { background-image:url('../images/in_red.png');} .we-page-white > .turn-green { background-image:url('../images/in_green.png');} .we-page-white > .turn-white { background-image:url('../images/in_white.png');} .we-page-white > .turn-black { background-image:url('../images/in_black.png');} .mall-more { width:6.148%;} .we-bob-page { background:url('../images/we_bob_bg.jpg') no-repeat; background-size: 100%; height:100% } .we-bob-page img { position:absolute;} .we-bob-title>img { left:19%; top:25%; width:17.656%;} .we-bob-more img { /*left:25%; top:69%;*/ left: 24%; top: 67.5%; width: 6.15%; } .we-page-bob { background:url('../images/海绵宝宝背景.png') no-repeat; background-size: 100%; height:100% } .we-page-bob img { position:absolute;} #imgBobTitle { left:39%; top:10%; width:22.49%;} #imgBobMore { left:47%; top:34%; width: 6.15%;} #imgBobLeft1 { left:-11%; top:22%; width:50.71%;} #imgBobLeft2 { left:25%; top:-35%; width:19.76%;} #imgBobRight1 { left:54%; top:-70%; width:39.31%;} #imgBobRight2 { left:64%; top:-10%; width:66.11%;} #imgBobSigh { width:5.255%;left:37%; top:61%; opacity: 0;} .we-page-dr {background:url('../images/x3_bg.png') no-repeat; background-size: 100%; text-align: center; } #imgDrTitle { width:24.70%; margin:3% 0;} #imgDrMore { width:6.15%;} .we-page-dr-img {width:100%; height:100%; position: relative;} .we-page-dr-img > div { height:inherit;} .we-page-dr-img img { position: absolute;} #imgDrBrush { left:-45%; top:0%; width:156.38%;} #imgDrTool { left:20%; top:27%; width:81.87%;} .we-page-gift {background:url('../images/mx_背景.png') no-repeat; background-size: 100%; } .we-page-gift img { position: absolute;} #imgGiftTitle { width:24.70%; left:52%; top:29%;} #imgGiftMore { width: 6.15%; left: 61.3%; top: 56%;} #imgGiftLeft,#imgWomanLeft { left:10%; top:-70%; width:29.64%;} #imgGiftRight,#imgWomanRight { left:20%; top:6%; width:29%;} #imgWomanLeft,#imgWomanRight { display:none;} #imgGiftBtn1 { /*left:55%; top:50%; width:7.515%;*/ width: 1.577%;left:60%; top:55%;} #imgGiftBtn2 { /*left:68%; top:50%; width:7.515%;*/ width: 1.577%; left:63%;top:55%;} #imgMxShine { width:5.5%; top:45.7%; left:22.1%; opacity: 0;} .img_mx_shine_woman { top: 45.3% !important; left: 22.2% !important ;} .img-dot-btn img {cursor:pointer; padding:1px; border:2px solid rgba(0,0,0,.1); border-radius: 50%; } .img-dot-btn img.on { border-color:rgba(0,0,0,.4); } /***************** brush page***************/ .brush-page-pearl { background-color: #fafafb;} .brush-page-pearl > div {width:100%;height:inherit;} .brush-page-pearl > div img { position: absolute;} .pearl-title img { width:17.45%; left:25%; top:15%;} .pearl-little-brush > img { width:16.76%; left:25%; top:45%;} .pearl-big-brush > img { width:34.15%; left:37%; top:8%;} .brush-page-unique {background:url('../images/unique刷头_背景.png') no-repeat; background-size: 100%; } .brush-page-unique > div {width:100%;height:inherit; } .brush-page-unique > div img { position: absolute;} .unique-title img { width:17.45%; left:42%; top:34%;} .unique-little-brush > img { width:12.97%; left:65%; top:28%;} .unique-big-brush > img { width:17.92%; left:21.5%; top:4.5%;} .brush-page-handy { background:url('../images/handy刷头_背景.png') no-repeat; background-size: 100%;} .brush-page-handy > div {width:100%;height:inherit;} .brush-page-handy > div img { position: absolute;} .handy-title img { width:17.50%; left:25%; top:20%;} .handy-little-brush > img { width:11.19%; left:28%; top:51%;} .handy-big-brush > img { width:40.36%; left:47%; top:4%;} .brush-page-bob {background:url('../images/海绵刷头_背景.png') no-repeat; background-size: 100%; } .brush-page-bob > div {width:100%;height:inherit; } .brush-page-bob > div img { position: absolute;} .bob-title img { width:17.45%; left:62%; top:24%;} .bob-big-wave > img { width:41.36%; left:19%; bottom:-5%; z-index: 2;} .bob-big-bob > img { width:23.12%; left:10.5%; bottom:-28%;} .bob-little-brush > img { width:8.78%; left:66%; top:52%;} .bob-big-brush > img { width:34.68%; left:31.5%; top:4.5%;} .brush-page-unicorn { background-color: #fdfdfd;} .brush-page-unicorn > div {width:100%;height:inherit;} .brush-page-unicorn > div img { position: absolute;} .unicorn-title img { width:20.91%; left:25%; top:15%;} .unicorn-little-brush > img { width:12.5%; left:29%; top:45%;} .unicorn-big-brush > img { width:24.17%; left:47%; top:8%;} .unicorn-big-arch > img { width:4.47%; left:52%; top:12%;} .brush-page-pro { background:url('../images/特护刷头_背景.png') no-repeat; background-size: 100%;} .brush-page-pro > div {width:100%;height:inherit;} .brush-page-pro > div img { position: absolute;} .pro-title img { width:32.73%; left:33.64%; top:10%;} .pro-big-left > img { width:15.50%; left:28%; top:42%;} .pro-big-center > img { width:6.88%; left:47%; top:42%;} .pro-big-right > img { width:13.08%; left:56%; top:42%;} .pearl-shop img { left:30%; top:35%;} .unique-shop img{ left:47%; top:55%;} .handy-shop img{ left:30%; top:39%;} .bob-shop img{ left:67%; top:43%;} .unicorn-shop img{ left:32%; top:35%;} .pro-shop img{ left:46%; top:30%;} /***************** L-LOVE page***************/ .love-page { background-color: #fdfcfc; /*height:1653px;*/} .love-page > div {width:100%;height:inherit;} .love-page > div img { position: absolute;} .love-page-main> img { width:21.91%; left:41.5%; top:8%; } .me-page > .love-page-title img {width:5.73%; left:43%; top:25%; } .me-page > .love-page-left > img { width:10.40%; left:20%; top:3%; } .me-page > .love-page-right > img {width:22.96%; left:21%; top:-13%; } .mo-page > .love-page-title img {width:5.89%; right:38%; top:50%; } .mo-page > .love-page-left > img { width:14.77%; right:24%; top:10%; } .mo-page > .love-page-right > img {width:9.77%; right:17%; top:30%; } .ma-page > .love-page-title img {width:5.68%; left:42%; top:67%;z-index: 1; } .ma-page > .love-page-left > img { width:59.27%; left:-17%; top:30%; } .ma-page > .love-page-right > img {width:36.99%; left:24%; top:57%; } #ME { position: absolute; top:5%;} #MO { position: absolute; top:20%;} #MA { position: absolute; top:35%;} /***************** WE page***************/ /***************** M1 page***************/ .product-page,.m1-page,.product-reveal-action,.product-page-2006 { width:100%; text-align: center;} .product-page,.product-page-2006 { position: relative;} .product-page>img { width:100%; height: auto;} .product-page-2006>img { height: auto;} .product-reveal-action { overflow: hidden;} .m1-two>div>img { position: absolute;} .m1-two { background:url('../images/豪华配置_背景.jpg') no-repeat; background-size: 100%;} .m1-two > .m1-two-title > img {width:25.43%; left:38%; top:13%; } .m1-two > .m1-two-title2 > img {width:7.67%; left:46%; top:82%; } .m1-two > .m1-two-box > img { width:53.23%; left:22%; top:36%; } .m1-three { background-color: #fbfbfb;} .m1-three-btn > img { width:3.153%;margin:7% 2%; } .m1-three-title> img { width:42.2%; margin-top:20%; } .m1-three-shop img { width:10.80%;} .m1-three-product>img { width:66.74%;} .m1-three > .hover-turn-img { background:url('../images/颜色选择_白色.png') no-repeat; background-size: 66.74%; background-position: 120% 30%; height:inherit;} .m1-three > .turn-blue { background-image:url('../images/颜色选择_蓝色.png')} .m1-three > .turn-red { background-image:url('../images/颜色选择_红色.png');} .m1-three > .turn-white { background-image:url('../images/颜色选择_白色.png');} .m1-three > .turn-black { background-image:url('../images/颜色选择_黑色.png');} /***************** MZ page***************/ .mz-five { background-color: #fbfbfb;} .mz-five > .col-sm-6:first-child { } .mz-five-title>img { width:18.28%;} .mz-five-shop img { width:12%;} .img-dot-btn > img { width:3.153%;margin:3.5% 1%; } .mz-five-title {width:100%; margin:35% 0 0 60%;} .mz-five-btn {width:100%; margin:0 0 0 60%; } .mz-five-shop {width:100%; margin:0 0 0 60%; } .mz-five > .hover-turn-img { background:url('../images/颜色选择_红色.png') no-repeat; background-size: 57.91%; background-position: -10% 28%; height:inherit;} .mz-five > .turn-blue { background-image:url('../images/颜色选择_蓝色.png')} .mz-five > .turn-pink { background-image:url('../images/颜色选择_红色.png')} /***************** MX page***************/ .mx-two>div {position: absolute;} .mx-two>div:first-child { z-index: 1; height: inherit;} .mx-two>div:first-child>.img-dot-btn {position:relative; bottom:-55%; left:29.3%;} .mx-two>div:first-child>.img-dot-btn>img{ width:1.577%; margin:0 0.5%;} .mx-two > .hover-turn-img { background:url('../images/mx女神海报.jpg') no-repeat; background-size: 100%; background-position: 0 0; height:inherit;} .mx-two > .turn-black { background-image:url('../images/mx男神海报.jpg')} .mx-two > .turn-pink { background-image:url('../images/mx女神海报.jpg')} .mx-two-shop img { position: absolute; left:30%; top:65%;} /***************** Fashion page***************/ .fashion-one>div>img { position: absolute;} .fashion-page { background:url('../images/waterfloss_bg.jpg') no-repeat; background-size: 100%; } .fashion-one-cube > div.fashion-action { -webkit-transition: all 2500ms ease-in 200ms; -moz-transition:all 2500ms ease-in 200ms; -ms-transition: all 2500ms ease-in 200ms; transition: all 2500ms ease-in 200ms; } .fashion-one-cube { transform-style: preserve-3d;perspective: 600px; perspective-origin: 50% 50%; width:100%; height: inherit; } .fashion-one-cube > div { position: absolute; } .fashion-one-cube > .fashion-one-cube-left { background:url('../images/waterfloss_left_v3.png') no-repeat; width:100%; background-size: 21.97%; background-position:18% 65%; height: inherit; -webkit-transform: perspective(1300px) translate3d(-50px,0,1px) scale3d(0.9,0.9,0.9); -moz-transform: perspective(1300px) translate3d(-50px,0,1px) scale3d(0.9,0.9,0.9); transform: perspective(1300px) translate3d(-50px,0,1px) scale3d(0.9,0.9,0.9); } .fashion-one-cube > .fashion-one-cube-right { background:url('../images/waterfloss_right_v3.png') no-repeat; width: 100%;background-size: 20.23%; background-position:38.5% 65%; height: inherit; /*-webkit-transform: translateZ(-1px);*/ -webkit-filter: blur(3px); -moz-filter: blur(3px); filter: blur(3px); -webkit-transform: perspective(1300px) translate3d(50px,0,-1px) scale3d(1,1,1); -moz-transform: perspective(1300px) translate3d(50px,0,-1px) scale3d(1,1,1); transform: perspective(1300px) translate3d(50px,0,-1px) scale3d(1,1,1); } .fashion-one-cube > div.fashion-action:first-child { -webkit-filter: blur(3px); -moz-filter: blur(3px); filter: blur(3px); -webkit-transform: perspective(300px) translate3d(0,0,-4px) scale3d(0.9,0.9,0.9); -moz-transform: perspective(300px) translate3d(0,0,-4px) scale3d(0.9,0.9,0.9); transform: perspective(300px) translate3d(0,0,-4px) scale3d(0.9,0.9,0.9); } .fashion-one-cube > div.fashion-action:last-child { -webkit-filter: blur(0); -moz-filter: blur(0); filter: blur(0); -webkit-transform: perspective(300px) translate3d(0,0,1px) scale3d(1,1,1); -moz-transform: perspective(300px) translate3d(0,0,1px) scale3d(1,1,1); transform: perspective(300px) translate3d(0,0,1px) scale3d(1,1,1); } /*.fashion-one-right {-webkit-transform: perspective(400px) rotateY(40deg);}*/ /*.fashion-one-left > img {width:21.23%; left:16%; top:12%; -webkit-transform-style: preserve-3d; -webkit-perspecitve-origin : 25% 75%;}*/ /*.fashion-one-right > img {width:21.23%; left:30%; top:12%;-webkit-transform-style: preserve-3d; -webkit-perspective-origin: 25% 75%; -webkit-transform: rotate3d(0,0,1,20deg);}*/ .fashion-one-assembly > img {width:8.25%; left:62%; top:68%; } .fashion-one-title > img {width:18.92%; left:58%; top:33%; } .fashion-one-link img { position: absolute; width:6.15%; left:63%; top:57%; } /***************** Pro page***************/ .pro-one>div>img { position: absolute;} .pro-page { background:url('../images/i5_背景.png') no-repeat; background-size: 100%; } .pro-one-cube,.pro-one-cube>div {width:100%;height:inherit; } .pro-one-cube>div { position: absolute;} .pro-one-cube > .pro-one-cube-left { background:url('../images/i5_特写.png') no-repeat; width:100%; background-size: 24.28%; background-position:25% 77%; height: 120%; z-index: 1; } .pro-one-cube > .pro-one-cube-right { background:url('../images/i5_牙刷.png') no-repeat; width: 100%;background-size: 6.516%; background-position:48.5% -25%; height: inherit; } .pro-one-title > img {width:13.61%; left:65%; top:48%; } .pro-one-link img {position: absolute; width:6.15%; left:69%; top:67%; z-index:2;} .pro-one-icon>img { left: 69%; top: 20%; width: 5.1%;} .pro-one-cube {transform-style: preserve-3d; } .pro-one>.pro-one-cube > .pro-one-cycle {background: url('../images/i5_cycle_x.png') no-repeat; z-index: 2; width: 23.9% ; background-size: 100%; left: 19.15%; top: 63%; opacity: 0; } /***************** Brand page***************/ .brand-page, .brand-page>div, .brand-page>div>img{ width:100%;} /************* only bob page ****************/ .only-bob-one { background:url('../images/首屏海报.jpg') no-repeat; background-size: 100%; } .only-bob-one img { position: absolute;} .only-bob-one-title>img { width:21.388%; left:35%; top:35%;} .only-bob-one-shop img {width:5.15%; left:43%; top:52%; } /************* only bob page ****************/ .x3-one { background:url('../images/x3_bg.png') no-repeat; background-size: 100%; } .x3-one img { position: absolute;} .x3-one-title>img { width:30.8%; left:35%; top:12%;} .x3-one-shop img {left:47.4%; top:34%; } .x3-one-product >img { width:78.19%; left:-25%; top:30%;} .x3-one-mirror >img { width:58.487%; right:-2%; top:38%;} .x3-one-english >img { width:10.3%; bottom:5%; left:43%;} .info-page { width:100%;height: auto; clear:both; } .info-page>img { width:100%; height: auto;} .info-page h5 { font-weight: normal;} .info-page >.col-md-4 {height: inherit; padding: 4% 15px;} .dot-line { border-bottom: 1px dotted #666666;} .info-page-contact-up { margin-top:5%;} .info-page-contact-down { margin-bottom:5%;} /***************** we-bob page***************/ .we-bob-one {background:url('../images/首屏海报.jpg') no-repeat; background-size: 100%; } .we-bob-one>img { position: absolute; width:17.656%; top:15%; left:30%;} .we-bob-two>div,.we-bob-two img {position: absolute;} .we-bob-two .we-bob-two-btn img {position: relative;} .we-bob-two div.we-bob-two-title>img { width: 17.656%; top:36%; left:55%; } .we-bob-two div.we-bob-two-shop img { width: 5.57%; top:53%; left:54.9%; } .we-bob-two>div:first-child { z-index: 1; height: inherit;} .we-bob-two>div:first-child>.img-dot-btn {position:relative; left:54.7%; top:45%;} .we-bob-two>div:first-child>.img-dot-btn>img{ width:1.577%; margin:0 1%;} .we-bob-two > .hover-turn-img { background-color: #f5f5f5; background-image:url('../images/黄色左边.png'),url('/wp-content/themes/mango/images/mall/we/bob/黄色右边.png'); background-repeat: no-repeat, no-repeat; background-position: 25% -5%, 36% 75%; background-size: 24.49%,24.49%; height:inherit;} .we-bob-two > .turn-yellow { background:url('../images/黄色左边.png') 25% -5% no-repeat,url('/wp-content/themes/mango/images/mall/we/bob/黄色右边.png') 36% 75% no-repeat; background-size: 24.49%; } .we-bob-two > .turn-purple { background:url('../images/粉色左边.png') 25% -5% no-repeat,url('/wp-content/themes/mango/images/mall/we/bob/粉色右边.png') 36% 75% no-repeat; background-size: 24.49%; } /***************** IN page***************/ .in-two>div,.in-two img {position: absolute;} .in-two .in-two-btn img {position: relative;} .in-two div.in-two-title>img { width: 24.856%; top:34%; left:53%; } .in-two div.in-two-shop img { width: 5.57%; top:60%; left:63%; } .in-two>div:first-child { z-index: 1; height: inherit;} .in-two>div:first-child>.img-dot-btn {position:relative; left:60%; top:52%;} .in-two>div:first-child>.img-dot-btn>img{ width:1.577%; margin:0 0.5%;} .in-two > .hover-turn-img { background-color: #eeeeee; background-image:url('../images/绿色左边.png'),url('/wp-content/themes/mango/images/mall/we/in/绿色右边.png'); background-repeat: no-repeat, no-repeat; background-position: 22% -3%, 45% 40%; background-size: 19.70%, 42.30%; height:inherit;} .in-two > .turn-red {background-image:url('../images/玫红左边.png'),url('/wp-content/themes/mango/images/mall/we/in/玫红右边.png'); } .in-two > .turn-black {background-image:url('../images/黑色左边.png'),url('/wp-content/themes/mango/images/mall/we/in/黑色右边.png'); } .in-two > .turn-green {background-image:url('../images/绿色左边.png'),url('/wp-content/themes/mango/images/mall/we/in/绿色右边.png'); } .in-two > .turn-white {background-image:url('../images/白色左边.png'),url('/wp-content/themes/mango/images/mall/we/in/白色右边.png'); } .in-two > .turn-blue {background-image:url('../images/蓝色左边.png'),url('/wp-content/themes/mango/images/mall/we/in/蓝色右边.png'); } /***************** SONIC page***************/ .sonic-page { width:100%;height: auto; background-color: #0c0f12; overflow: hidden; } .sonic-page>div {width:100%; position: relative;} .sonic-page img {} .full-page {width:100%;} .full-page>img { width: 100%;} .sonic-page-one { background:url('../images/首屏背景.png') 60% 120% no-repeat; background-size: 64.372%; } .sonic-page-one>img {position: absolute;width:34.577%; left:31%; top:20%; } .sonic-page-four { background:url('../images/高频振动背景.png') 0 0 no-repeat; background-size: 100%; } .sonic-page-four>img {position: absolute;width:56.805%; left:21.5975%; top:1%; } .sonic-page-six { background:url('../images/牙刷动画背景.jpg') 0 0 no-repeat; background-size: 100%; } .sonic-page-six>div>img {position: absolute; } .sonic-page-six>.sb1>img { width:21.86%; left:-5%; top:0%;} .sonic-page-six>.sb2>img { width:9.564%; left: 25%; top: 30%;} .sonic-page-six>.sb3>img { width:1.419%; left: 39%; top: 39%;} .sonic-page-six>.sb4>img { width:1.314%; left: 45.5%; top: 38.5%;} .sonic-page-six>.sb5>img { width:2.312%; left: 46%; top: 30%;} .sonic-page-six>.sb6>img { width:1.629%; left: 48%; top: 29%;} .sonic-page-six>.sb7>img { width:2.733%; left: 54%; top: 30%;} .sonic-page-six>.sb8>img { width:3.678%; left: 55%; top: 58%;} .sonic-page-six>.sb9>img { width:3.994%; left: 66%; top: 32%;} .sonic-page-six>.sb10>img { width:6.358%; left: 83.5%; top: 23%;} .sonic-page-six>.sonic-bubble>img {z-index:3;} .sonic-page-six>.sb21>img { width: 1.312%; left: 45%; top: 38%;} .sonic-page-six>.sb22>img { width: 1.612%; left: 43%; top: 41%;} .sonic-page-six>.sb23>img { width: 1.812%; left: 52%; top: 38%;} .sonic-page-six>.sb24>img { width: 1.412%; left: 51%; top: 36%;} .sonic-page-six>.sb25>img { width: 1.712%; left: 56%; top: 43%;} .sonic-page-six>.sb26>img { width: 1.512%; left: 46%; top: 38%;} .sonic-page-six>.sb27>img { width: 1.212%; left: 55%; top: 42%;} .sonic-page-six>.sb28>img { width: 1.4%; left: 48%; top: 38%;} .sonic-page-six>.sb29>img { width: 1.112%; left: 54%; top: 39%;} .sonic-page-six-brush {position: absolute;width:100%; height:inherit; z-index:2; background:url('../images/固定牙刷2.png') 50% 63% no-repeat; background-size: 17.183%; } .sonic-page-sixx>img {position: absolute;width:56.805%; left:21.5975%; top:1%; } .sonic-page-seven>.sonic-page-seven-cert>img {position: absolute;width:56.963%; left:21.5175%;} .sonic-page-seven>.sonic-page-seven-fire>img {position: absolute;width:34.577%; left:32.7115%; top:80%;} .sonic-page-six-brush-hover { position: absolute;z-index:10; cursor: pointer; width: 16%; height: 43%; top: 37%; left: 43%;} .sonic-page-six-6mm>img { z-index:5; width:18.76%; left:54%; top:31%; opacity: 0;} .sonic-page-six-seq>img { z-index:5; width:22.386%; left:56%; top:55%; opacity: 0;} .i5-one-shop img { position: absolute; z-index: 10; left:47.2%; top:36.5%;} /***************** blog **************/ .mango_blog { padding:30px 60px 30px 60px !important;} .entry-date > span { background-color:#0c9a90; } .entry-title { font-size:24px; font-weight: normal;} /*.entry-content { padding:5px 16px;}*/ .entry-meta > span { padding-left: 0;} .pagination > .active > a { border-color:#0c9a90; background-color:#0c9a90; } .mg30 { margin: 30px;} .entry { padding: 0; border-bottom: none;} .col-sm-12 {padding-left:0;padding-right:0;} .app-one-bg>img,.app-one-btn-ios img , .app-one-btn-android img {width:100%;} .app-one-btn-ios { width: 9%; position: absolute; left: 51.8%; top: 61%;} .app-one-btn-android { width: 9%; position: absolute; left: 61.5%; top: 60%; } @media (max-width: 767px) { .container-fluid { padding-left:0; padding-right: 0;} .row { margin-right: 0; margin-left: 0; } .product-page-2006>img { width:100%; height:auto;} #header .search-dropdown.dropdown .dropdown-menu { min-width: 300px; position: fixed; } .md-margin { margin:0;} .nav-logo { float: left !important;} .col-sm-12 { width:100%;} .col-sm-6 { width:50%;} .m1-three>.col-sm-6,.mz-five>.col-sm-6 {float: left;} .joe-page-assm {display: none;} .img-dot-btn img { border: 1px solid rgba(0,0,0,.1);} .logo img { max-width: 100%; margin-left:5%;} #scroll-top { display: none;} .main { margin-bottom: -60px;} .flex-direction-nav .flex-prev { left: 30px !important; } .flex-direction-nav .flex-next { right: 30px !important; } .flexslider:hover .flex-prev {left: 50px !important;} .flexslider:hover .flex-next {right: 50px !important;} .col-sm-12,.col-sm-12, .col-xs-1, .col-xs-10, .col-xs-11, .col-xs-12, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9 { padding: 0;} .mb-index-menu img { width:100%;} .foot-menu { background-color: #489c9c; padding: 10px 0; } .foot-menu a { font-size:16px; padding: 0; display: inline-block;} .footer-cont {width:100%; padding-bottom: 12px; background: url('../images/foot_bg.png') no-repeat; background-size: 100%;} .footer-cont-1 { margin:70px 0;} .footer-cont-1 img { width:80%;} .footer-cont-2 h2 { color:#fff; font-size:14px;} .footer-cont-2 img { width:7.2%;} #footer a,#footer p {color:#fff !important; } .footer-cont-3 { margin:30px 0 15px 0;} .foot-menu>div { border-right:1px solid #fff;} .foot-menu>div:last-child {border-right:none; } .mb-index-banner img { width:100%; margin-bottom:5px;} .info-page-contact-up,.info-page-contact-down { padding: 0 30px;} .mb-shop>img { width:14.93%; cursor: pointer;} .mb-mall-shop img { position: static !important; margin:15px 20px 0 20px;} .mb-mall-shop b { font-size:33px; display: inline-block; color:#ad2d34; font-weight: 100; vertical-align:bottom;} .img-dot-btn > img { width: 7%; margin: 7% 2%;} /***** in ****/ .in-two div.in-two-title>img { width: 41.856%; top: 24%; left: 52%; } .in-two>div:first-child>.img-dot-btn>img { width: 3%; margin: 0 1%; } .in-two > .hover-turn-img { background-color: #eeeeee; background-image:url('../images/mb_green_w480.png'); background-repeat:no-repeat; background-position: 12% 38%; background-size: 70%; height:inherit;} .in-two > .turn-red {background-image:url('../images/mb_red_w480.png'); } .in-two > .turn-black {background-image:url('../images/mb_black_w480.png'); } .in-two > .turn-green {background-image:url('../images/mb_green_w480.png'); } .in-two > .turn-white {background-image:url('../images/mb_white_w480.png'); } .in-two > .turn-blue {background-image:url('../images/mb_blue_w480.png'); } .in-two .mb-shop>img { left: 65%; top: 66%;} /************* only bob page ****************/ .only-bob-one { background:url('../images/首屏海报_w480.jpg') no-repeat; background-size: 100%; } .only-bob-one img { position: absolute;} .only-bob-one-title>img { width:21.388%; left:35%; top:35%;} .only-bob-one-shop img {width:5.15%; left:43%; top:52%; } .only-bob-one .mb-shop>img { left: 38%; top: 50%;} .i5-one .mb-shop>img {position: absolute; left: 44%; top: 81%; -webkit-filter: invert(100%); -moz-filter: invert(100%); filter: invert(100%); } /********** X3 ***************/ .x3-one { background:url('../images/x3_bg_w480.png') no-repeat; background-size: 100%; } .x3-one img { position: absolute;} .x3-one-title>img { width: 50.8%; left: 25%; top: 6%;} .x3-one-product >img { width:78.19%; left:-25%; top:40%;} .x3-one-mirror >img { width:58.487%; right:-2%; top:48%;} .x3-one-english >img { width:10.3%; bottom:5%; left:43%;} .x3-one .mb-shop>img { left: 43%; top: 35%;} /*********** m1 ****************/ .m1-two { background:url('../images/豪华配置_便携盒_w480.png') no-repeat; background-size: 100%;} .m1-two > .m1-two-title, .m1-two > .m1-two-title2,.m1-two > .m1-two-box {display: none; } .m1-three .mb-shop>img { width:30%;} .m1-three-title> img {width:65%; margin-top:40%;} .m1-three > .hover-turn-img { background:url('../images/white_w480.png') no-repeat; background-size: 90%; background-position: 120% 30%; height:inherit;} .m1-three > .turn-blue { background-image:url('../images/blue_w480.png')} .m1-three > .turn-red { background-image:url('../images/red_w480.png');} .m1-three > .turn-white { background-image:url('../images/white_w480.png');} .m1-three > .turn-black { background-image:url('../images/black_w480.png');} /*********** mz ****************/ .mz-five .mb-shop>img { width:30%; margin-left: 42%;} .mz-five-title { margin-left:40%;} .mz-five-btn { margin-left:40%;} .mz-five-title>img { width:36.28%;} .img-dot-btn > img { margin:7% 5%;} .mz-five > .hover-turn-img { background:url('../images/red_w480.png') no-repeat; background-size: 82.4%; background-position: -10% 28%; } .mz-five > .turn-blue { background-image:url('../images/blue_w480.png')} .mz-five > .turn-pink { background-image:url('../images/red_w480.png')} /************* x3 bob **********/ .we-bob-one {background:url('../images/首屏海报_w480.jpg') no-repeat; background-size: 100%; } .we-bob-one>img { width:30.8%; left:6%;} .we-bob-two div.we-bob-two-title>img { width:34%;} .we-bob-two>div:first-child>.img-dot-btn { left: 53.7%; top: 49%; } .we-bob-two>div:first-child>.img-dot-btn>img { width:3%;margin: 0 2%; } .we-bob-two .mb-shop>img {left: 55.7%; top: 62%; } .we-bob-two > .hover-turn-img { background-image:url('../images/黄色左边.png'),url('/wp-content/themes/mango/images/mall/we/bob/mb/黄色右边.png'); background-repeat: no-repeat, no-repeat; background-position: 17% -8%, 33% 75%; background-size: 32.93%,32.93%; height:inherit;} .we-bob-two > .turn-yellow { background:url('../images/黄色左边.png') 17% -8% no-repeat,url('/wp-content/themes/mango/images/mall/we/bob/mb/黄色右边.png') 33% 75% no-repeat; background-size: 32.93%; } .we-bob-two > .turn-purple { background:url('../images/粉色左边.png') 17% -8% no-repeat,url('/wp-content/themes/mango/images/mall/we/bob/mb/粉色右边.png') 33% 75% no-repeat; background-size: 32.93%; } /********* mx ***************/ .mx-two > .hover-turn-img { background:url('../images/粉色背景.jpg') no-repeat; background-size: 100%; background-position: 0 0; height:inherit;} .mx-two > .turn-black { background-image:url('../images/黑色背景.jpg')} .mx-two > .turn-pink { background-image:url('../images/粉色背景.jpg')} .mx-two-shop img { position: absolute; left:30%; top:65%;} .mx-two>div:first-child>.img-dot-btn>img { width: 3%; margin: 0 1%;} .mx-two .mb-shop>img {top: 75%; left: 21%; position: absolute; -webkit-filter: invert(60%); } /*.mx-two div.turn-black + div > div.mb-shop>img { color:red; -webkit-filter: invert(100%);}*/ .mx-two>div:first-child>.img-dot-btn { top:65%; left:23.3%;} /************** LOVE ************/ .love-page-main> img { width: 50%; left: 41.5%; top: 4%; } .me-page > .love-page-right > img { width: 53.5%; left: 1%; top: -13%;} .me-page > .love-page-left > img { width: 23%; left: 1%; top: 3%;} .mo-page > .love-page-left > img { width: 32.93%; right: 9%; top: 18%; } .mo-page > .love-page-right > img { width: 20.5%; right: 3%; top: 36%; } .ma-page > .love-page-left > img { width: 90%; left: -27%; top: 51%; } .ma-page > .love-page-right > img { width: 74%; left: 11%; top: 57%; } .me-page .mb-shop>img {top: 16%; left: 45%;} .me-page .mb-shop>img.love-desc {top: 14.5%;} .mo-page .mb-shop>img {top: 42.5%; left: 43%;} .mo-page .mb-shop>img.love-desc {top: 41%;} .ma-page .mb-shop>img { top: 70.5%; left: 61%;} .ma-page .mb-shop>img.love-desc {top: 69%;} /******** ONLY **************/ .we-page-bob { background: url('../images/海绵宝宝背景_w480.png') no-repeat;} #imgBobSigh { display: none;} #imgBobMore { left: 43%; top: 34%; width: 13%;} #imgBobTitle { left: 34%; top: 7%; width: 32%; } #imgBobLeft1 { left: -25%; top: 11%; width: 59.06%; } #imgBobLeft2 { left: -5%; top: -25%; width: 50.8%; } #imgBobRight1 { left: 54%; top: -30%; width: 67.6%; } #imgBobRight2 { left: 64%; top: 10%; width: 86%; } /************** FASHION ******************/ .fashion-page { background: url('../images/waterfloss_bg_w480.jpg') no-repeat; } .fashion-one-assembly > img { width: 16%; left: 70%; top: 55%; } .fashion-one-link img { width: 16%; left: 70%; top: 42%; } .fashion-one-title > img { width: 24.92%; left: 66%; top: 22%; } .fashion-one-cube > .fashion-one-cube-right { background-size: 30.23%; background-position: 42.5% 65%;} .fashion-one-cube > .fashion-one-cube-left { background-size: 31.97%; background-position: 11% 65%;} /***************** BRUSH **********************/ .pearl-big-brush > img { width: 53%; left: 34%; top: 6%; } .pearl-little-brush > img { width: 22.76%; left: 17%; top: 50%; } .pearl-title img { width: 25.45%; left: 15%; top: 15%; } .brush-page-pearl .mb-shop>img { left: 21%; top: 36%;} .brush-page-unique { background: url('../images/unique刷头_背景_w480.png') no-repeat; } .unique-little-brush>img { display: none;} .unique-title img { width: 27%; left: 32%; top: 28%; } .unique-big-brush > img { width: 26%; left: 6.5%; top: 4.5%; } .brush-page-unique .mb-shop>img { left: 38%; top: 52%; -webkit-filter: invert(100%); -moz-filter: invert(100%); -ms-filter: invert(100%); filter: invert(100%); } .brush-page-handy { background-image:none; background-color: #fafafa; } .handy-title img { width: 26.50%; left: 15%; top: 20%; } .handy-little-brush > img { width: 15.19%; left: 20%; top: 57%; } .handy-big-brush > img { width: 60.36%; left: 43%; top: 4%; } .brush-page-handy .mb-shop>img {left: 21%; top: 43%;} .brush-page-bob { background-size:100% 100%;} .bob-big-bob > img { width: 30.12%; left: 6.5%; bottom: -22%; } .bob-little-brush > img { width: 13.78%; left: 69%; top: 61%; } .bob-big-brush > img { width: 43.68%; left: 31.5%; top: 8.5%; } .bob-title img { width: 27.45%; left: 62%; top: 20%; } .brush-page-bob .mb-shop>img { top: 45%; left: 68%;} .unicorn-title img { width: 32.91%; left: 12%; top: 13%; } .unicorn-little-brush > img { width: 17.5%; left: 21%; top: 47%; } .unicorn-big-brush > img { width: 34.17%; left: 47%; top: 8%; } .unicorn-big-arch > img { width: 6.47%; left: 54%; top: 9%; } .brush-page-unicorn .mb-shop>img { left: 22%; top: 34%;} .brush-page-pro { background-image:none; background-color: #fafafa; } .pro-title img { width: 47.73%; left: 26.64%; top: 5%; } .pro-big-left > img { width: 20.50%; left: 22%; top: 39%; } .pro-big-center > img { width: 10.88%; left: 47%; top: 37%; } .pro-big-right > img { width: 19.08%; left: 59%; top: 35%; } .brush-page-pro .mb-shop>img { left: 43%; top: 25%;} .pro-page { background: url('../images/i5_背景_w480.png') no-repeat; background-size:100%;} .pro-one-cube { display: none;} .pro-one-icon>img { left: 69%; top: 60%; width: 8.1%; } .pro-one-title > img { width: 25.61%; left: 58%; top: 18%; } .pro-one-link img { width: 12.15%; left: 66%; top: 47%; } /***************** WE PAGE **********************/ .we-page-white { background:url('../images/in_bg_w480.png') no-repeat; } .we-page-m2 { background: url('../images/mz_bg_w480.png') no-repeat; } #imgM1Title { left: 55%; top: 25%; width: 38.4%; } .we-page-m2 #imgM2Title { width: 38.94%; top: 7%; left: 33%; } .we-page-m2 #imgM2More { width: 17.6%; left: 43.5%; top: 38%; } #imgM2BlueSmall, #imgM2PinkSmall { width: 3%; margin: 0 3%; top: 78%; } #imgM1More { left: 66.5%; top: 58%; width: 17.6%; } #imgM1Left { left: 15%; top: 5%; width: 18.345%; } #imgM1Right { left: 20%; top: -30%; width: 45%; } .we-bob-page { background: url('../images/bob_bg_w480.png') no-repeat; background-size: 100%; } #imgM2Blue, #imgM2Pink { width: 75.86%; top: 52.2%; left: 13.5%; } .we-page-dr { background: url('../images/x3_bg_w480.png') no-repeat;background-size: 100%; } #imgDrBrush { left: -45%; top: 0%; width: 174.6%; } .we-page-gift { background: url('../images/mx_bg_w480.png') no-repeat;background-size: 100%; } #imgGiftLeft, #imgWomanLeft { left: 1%; top: -65%; width: 37.73%; } #imgGiftRight, #imgWomanRight { left: 20%; top: 6%; width: 37%; } .we-page-white { background-color: #fafafa;} .we-page-white>div,.we-page-dr-img>div { float: left;} .we-page-white > .hover-turn-img { background:url('../images/blue_w480.png') no-repeat; background-size: 140.62%; background-position: 10% 30%; height:inherit;} .we-page-white > .turn-blue { background-image:url('../images/blue_w480.png');} .we-page-white > .turn-red { background-image:url('../images/red_w480.png');} .we-page-white > .turn-green { background-image:url('../images/green_w480.png');} .we-page-white > .turn-white { background-image:url('../images/white_w480.png');} .we-page-white > .turn-black { background-image:url('../images/black_w480.png');} #imgWhiteMore { width: 35.2%; } #imgWhiteTitle { margin-top:30%; width: 87.2%;} .we-page-white-btn > img { margin: 7% 2%; } .we-bob-title>img { left: 59%; top: 25%; width: 32.67%; } .we-bob-more img { left: 67.5%; top: 58.5%; width: 17.4%; } #imgDrMore { width: 17.4%; } #imgDrTitle { width: 43.60%; margin: 3% 0; } #imgGiftBtn2 { width: 3%; left: 67%; top: 58%; } #imgGiftBtn1 { width: 3%; left: 62%; top: 58%; } #imgGiftMore { width: 17.4%; left: 63.3%; top: 59%; } #imgGiftTitle { width: 40%; left: 52%; top: 29%; } .sonic-page-one { background: url('../images/首屏背景_w480.png') no-repeat; background-size: 100%; } .sonic-page-four { background: url('../images/高频振动背景.png') 0 0 no-repeat; background-size: 100%; } .sonic-page-six { background: url('../images/牙刷动画背景.jpg') 0 0 no-repeat; background-size: 100%; } .sonic-page-six-brush { background-position: 50% 43%; background-size: 39.6%; } .sonic-page-one>img { position: absolute; width: 70.577%; left: 11%; top: 32%; } .sonic-page-seven>.sonic-page-seven-cert>img { position: absolute; width: 100%; left: 0; } .sonic-page-seven>.sonic-page-seven-fire>img { width: 80%; left: 12.7115%; top: 77%; } .sonic-page-four>img { position: absolute; width: 100%; left: -3.5975%; top: 10%; } .sonic-page-six-6mm>img { width: 35%; left: 64%; top: 31%;} .sonic-page-six-seq>img { width: 38.386%; left: 62%;} .sonic-page-six>.sb1>img { width:21.86%; left:-5%; top:-5%;} .sonic-page-six>.sb2>img { width:9.564%; left: 20%; top: 15%;} .sonic-page-six>.sb3>img { width:1.419%; left: 34%; top: 24%;} .sonic-page-six>.sb4>img { width:1.314%; left: 42.5%; top: 14.5%;} .sonic-page-six>.sb5>img { width:2.312%; left: 34%; top: 32%;} .sonic-page-six>.sb6>img { width:1.629%; left: 43%; top: 14%;} .sonic-page-six>.sb7>img { width:2.733%; left: 64%; top: 31%;} .sonic-page-six>.sb8>img { width:3.678%; left: 60%; top: 43%;} .sonic-page-six>.sb9>img { width:3.994%; left: 71%; top: 17%;} .sonic-page-six>.sb10>img { width:6.358%; left: 88.5%; top: 8%;} .sonic-page-six>.sb21>img { width: 2.312%; left: 40%; top: 22%;} .sonic-page-six>.sb22>img { width: 5.212%; left: 37%; top: 26%;} .sonic-page-six>.sb23>img { width: 2.812%; left: 56%; top: 23%;} .sonic-page-six>.sb24>img { width: 1.412%; left: 54%; top: 21%;} .sonic-page-six>.sb25>img { width: 2.412%; left: 59%; top: 28%;} .sonic-page-six>.sb26>img { width: 3.012%; left: 41%; top: 23%;} .sonic-page-six>.sb27>img { width: 2.212%; left: 58%; top: 27%;} .sonic-page-six>.sb28>img { width: 2.4%; left: 43%; top: 23%;} .sonic-page-six>.sb29>img { width: 2.112%; left: 57%; top: 24%;} .sonic-page-six-brush-hover { width: 32%; height: 50%; top: 23%; left: 35%;} .app-one-btn-ios { width: 9%; width: 29%; position: absolute; left: 18%; top: 33%;} .app-one-btn-android { width: 29%; position: absolute; left: 51%; top: 32.6%; } }