/*reset.less*/ /* CSS Document */ html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 312.5%; } ul, li, div, p, body, h1, h2, h3, h4, h5, h6, dl, dt, dd { margin: 0; padding: 0; } input { -webkit-appearance: button; } li { list-style: none; } a { text-decoration: none; outline: none; } input { -webkit-appearance: none; outline: none; } * { outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0); box-sizing: border-box; padding: 0; } .hide { display: none; } body, html { width: 100%; font-family: "Microsoft YaHei", "Helvetica Neue", Arial, HelveticaNeue, Helvetica, "BBAlpha Sans", sans-serif; font-weight: normal; } * { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } body { opacity: 1; -webkit-transition: opacity 500ms ease-in; transition: opacity 500ms ease-in; } button { border: none; background: none; display: block; outline: none; } table { border-collapse: collapse; } /* mobile media-query */ html { font-size: 312.5%; -webkit-overflow-scrolling: touch; } @media screen and (min-width: 360px) and (max-width: 374px) and (orientation: portrait) { html { font-size: 351.5%; } } @media screen and (min-width: 384px) and (max-width: 399px) and (orientation: portrait) { html { font-size: 375%; } } @media screen and (min-width: 400px) and (max-width: 413px) and (orientation: portrait) { html { font-size: 390.625%; } } @media screen and (min-width: 414px) and (max-width: 431px) and (orientation: portrait) { html { font-size: 404.3%; } } @media screen and (min-width: 432px) and (max-width: 479px) and (orientation: portrait) { html { font-size: 421.875%; } } @media screen and (min-width: 480px) and (max-width: 639px) and (orientation: portrait) { html { font-size: 468.75%; } } @media screen and (min-width: 640px) and (orientation: portrait) { html { font-size: 625%; } } html, body { width: 100%; height: 100%; } .fl { float: left; } .fr { float: right; } .clear { clear: both; } #forhorview { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 9999; color: #FFF; font-size: .26rem; text-align: center; line-height: 2.8rem; display: none; } @-webkit-keyframes fadeInOut { 0%, 25%, 100% { opacity: 0; } 50%, 75% { opacity: 1; } } @-moz-keyframes fadeInOut { 0%, 25%, 100% { opacity: 0; } 50%, 75% { opacity: 1; } } @-o-keyframes fadeInOut { 0%, 25%, 100% { opacity: 0; } 50%, 75% { opacity: 1; } } @keyframes fadeInOut { 0%, 25%, 100% { opacity: 0; } 50%, 75% { opacity: 1; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-50px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-50px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translateX(-50px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-50px); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-50px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-50px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -ms-transform: translateY(-50px); } 100% { opacity: 1; -ms-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-50px); } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(50px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(50px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translateY(50px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(50px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(50px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(50px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(50px); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes zoomInAndOut { 0% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 100% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(2, 2, 2); transform: scale3d(2, 2, 2); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(2, 2, 2); transform: scale3d(2, 2, 2); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.9); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(0.9); opacity: 1; } } @-moz-keyframes pulse { 0% { -moz-transform: scale(0.9); } 50% { -moz-transform: scale(1.1); } 100% { -moz-transform: scale(0.9); opacity: 1; } } @-o-keyframes pulse { 0% { -o-transform: scale(0.9); } 50% { -o-transform: scale(1.1); } 100% { -o-transform: scale(0.9); opacity: 1; } } @keyframes pulse { 0% { transform: scale(0.9); } 50% { transform: scale(1.1); } 100% { transform: scale(0.9); opacity: 1; } } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); opacity: 0; } } @-moz-keyframes hinge { 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 100% { -moz-transform: translateY(700px); opacity: 0; } } @-o-keyframes hinge { 0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 100% { -o-transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 100% { transform: translateY(700px); opacity: 0; } } @-webkit-keyframes rotate { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(0deg); } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(360deg); } } @-moz-keyframes rotate { 0% { -moz-transform-origin: center center; -moz-transform: rotate(0deg); } 100% { -moz-transform-origin: center center; -moz-transform: rotate(360deg); } } @-o-keyframes rotate { 0% { -o-transform-origin: center center; -o-transform: rotate(0deg); } 100% { -o-transform-origin: center center; -o-transform: rotate(360deg); } } @keyframes rotate { 0% { transform-origin: center center; transform: rotate(0deg); } 100% { transform-origin: center center; transform: rotate(360deg); } } @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); opacity: 1; } } @-moz-keyframes wobble { 0% { -moz-transform: translateX(0%); } 15% { -moz-transform: translateX(-25%) rotate(-5deg); } 30% { -moz-transform: translateX(20%) rotate(3deg); } 45% { -moz-transform: translateX(-15%) rotate(-3deg); } 60% { -moz-transform: translateX(10%) rotate(2deg); } 75% { -moz-transform: translateX(-5%) rotate(-1deg); } 100% { -moz-transform: translateX(0%); opacity: 1; } } @-o-keyframes wobble { 0% { -o-transform: translateX(0%); } 15% { -o-transform: translateX(-25%) rotate(-5deg); } 30% { -o-transform: translateX(20%) rotate(3deg); } 45% { -o-transform: translateX(-15%) rotate(-3deg); } 60% { -o-transform: translateX(10%) rotate(2deg); } 75% { -o-transform: translateX(-5%) rotate(-1deg); } 100% { -o-transform: translateX(0%); opacity: 1; } } @keyframes wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } 100% { transform: translateX(0%); opacity: 1; } } @keyframes shake { 50% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); } 0%, 100% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); } } @-webkit-keyframes flip1 { 0% { -webkit-transform: perspective(400px) rotateY(90deg); } 25% { -webkit-transform: perspective(400px) rotateY(-10deg); } 50% { -webkit-transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); } } @keyframes flip1 { 0% { transform: perspective(400px) rotateY(90deg); } 40% { transform: perspective(400px) rotateY(-10deg); } 70% { transform: perspective(400px) rotateY(10deg); } 100% { transform: perspective(400px) rotateY(0deg); } } @-webkit-keyframes flip2 { 0% { -webkit-transform: perspective(400px) rotateY(-90deg); } 25% { -webkit-transform: perspective(400px) rotateY(-10deg); } 50% { -webkit-transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); } } @keyframes flip2 { 0% { transform: perspective(400px) rotateY(-90deg); } 40% { transform: perspective(400px) rotateY(-10deg); } 70% { transform: perspective(400px) rotateY(10deg); } 100% { transform: perspective(400px) rotateY(0deg); } } @-webkit-keyframes shine { 0%, 100% { opacity: 1; } 50% { opacity: .1; } } @-webkit-keyframes gif { 0% { background-position: 0%; opacity: 1; } 100% { background-position: 200%; opacity: 1; } } @keyframes gif { 0% { background-position: 0%; opacity: 1; } 100% { background-position: 200%; opacity: 1; } } @-webkit-keyframes zoom2 { 0% { -webkit-transform: scale3d(0.98, 1, 1); transform: scale3d(0.98, 1, 1); } 50% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 100% { -webkit-transform: scale3d(0.98, 1, 1); transform: scale3d(0.98, 1, 1); } } @keyframes zoom2 { 0% { -webkit-transform: scale3d(0.98, 1, 1); transform: scale3d(0.98, 1, 1); } 50% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 100% { -webkit-transform: scale3d(0.98, 1, 1); transform: scale3d(0.98, 1, 1); } } @-webkit-keyframes matrix { 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, -0.0015, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, -0.0015, 0, 0, 1, 0, 0, 0, 0, 1); transform-origin: center center 0px; -webkit-transform-origin: center center 0px; } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform-origin: center center 0px; -webkit-transform-origin: center center 0px; } } @keyframes matrix { 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, -0.0015, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, -0.0015, 0, 0, 1, 0, 0, 0, 0, 1); transform-origin: center center 0px; -webkit-transform-origin: center center 0px; } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform-origin: center center 0px; -webkit-transform-origin: center center 0px; } } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes zoomIn2 { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.05); } 100% { -webkit-transform: scale(1); } } @keyframes zoomIn2 { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes translateDown { 0%, 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } 50% { -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); } } @keyframes translateLeft { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); } 50% { -webkit-transform: translateX(-5px); -moz-transform: translateX(-5px); -ms-transform: translateX(-5px); -o-transform: translateX(-5px); } } @keyframes arrow { 0%, 100% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); } 50% { -webkit-transform: translate(0, 0.15rem); -moz-transform: translate(0, 0.15rem); -ms-transform: translate(0, 0.15rem); -o-transform: translate(0, 0.15rem); } } @-webkit-keyframes arrow { 0%, 100% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); } 50% { -webkit-transform: translate(0, 0.15rem); -moz-transform: translate(0, 0.15rem); -ms-transform: translate(0, 0.15rem); -o-transform: translate(0, 0.15rem); } } @keyframes show { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes fylLeft { 0% { opacity: 1; transform: translateX(-6rem); } 100% { opacity: 1; transform: translateX(0); } } @-moz-keyframes fylLeft { 0% { opacity: 1; transform: translateX(-6rem); } 100% { opacity: 1; transform: translateX(0); } } @-ms-keyframes fylLeft { 0% { opacity: 1; transform: translateX(-6rem); } 100% { opacity: 1; transform: translateX(0); } } @-o-keyframes fylLeft { 0% { opacity: 1; transform: translateX(-6rem); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fylLeft { 0% { opacity: 1; transform: translateX(-6rem); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes scaleSkill { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.2); } 100% { transform: translate(-50%, -50%) scale(1); } } @-moz-keyframes scaleSkill { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.2); } 100% { transform: translate(-50%, -50%) scale(1); } } @-ms-keyframes scaleSkill { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.2); } 100% { transform: translate(-50%, -50%) scale(1); } } @-o-keyframes scaleSkill { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.2); } 100% { transform: translate(-50%, -50%) scale(1); } } @keyframes scaleSkill { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.2); } 100% { transform: translate(-50%, -50%) scale(1); } } @-webkit-keyframes btnShake { 0% { transform: translateX(0); } 25% { transform: translateX(-2px); } 50% { transform: translateX(0); } 75% { transform: translateX(2px); } 100% { transform: translateX(0); } } @-moz-keyframes btnShake { 0% { transform: translateX(0); } 25% { transform: translateX(-2px); } 50% { transform: translateX(0); } 75% { transform: translateX(2px); } 100% { transform: translateX(0); } } @-ms-keyframes btnShake { 0% { transform: translateX(0); } 25% { transform: translateX(-2px); } 50% { transform: translateX(0); } 75% { transform: translateX(2px); } 100% { transform: translateX(0); } } @-o-keyframes btnShake { 0% { transform: translateX(0); } 25% { transform: translateX(-2px); } 50% { transform: translateX(0); } 75% { transform: translateX(2px); } 100% { transform: translateX(0); } } @keyframes btnShake { 0% { transform: translateX(0); } 25% { transform: translateX(-2px); } 50% { transform: translateX(0); } 75% { transform: translateX(2px); } 100% { transform: translateX(0); } } @-webkit-keyframes innerIn { 0% { transform: translateX(1000px); } 100% { transform: translateX(0); } } @-moz-keyframes innerIn { 0% { transform: translateX(1000px); } 100% { transform: translateX(0); } } @-ms-keyframes innerIn { 0% { transform: translateX(1000px); } 100% { transform: translateX(0); } } @-o-keyframes innerIn { 0% { transform: translateX(1000px); } 100% { transform: translateX(0); } } @keyframes innerIn { 0% { transform: translateX(1000px); } 100% { transform: translateX(0); } } @-webkit-keyframes barAni { from { background-position: 0 0; } to { background-position: 0 -8000px; } } @-moz-keyframes barAni { from { background-position: 0 0; } to { background-position: 0 -8000px; } } @-ms-keyframes barAni { from { background-position: 0 0; } to { background-position: 0 -8000px; } } @-o-keyframes barAni { from { background-position: 0 0; } to { background-position: 0 -8000px; } } @keyframes barAni { from { background-position: 0 0; } to { background-position: 0 -8000px; } } @-webkit-keyframes kvAni { from { background-position: 0 0; } to { background-position: 0 -17720px; } } @-moz-keyframes kvAni { from { background-position: 0 0; } to { background-position: 0 -17720px; } } @-ms-keyframes kvAni { from { background-position: 0 0; } to { background-position: 0 -17720px; } } @-o-keyframes kvAni { from { background-position: 0 0; } to { background-position: 0 -17720px; } } @keyframes kvAni { from { background-position: 0 0; } to { background-position: 0 -17720px; } } @-webkit-keyframes kvAniMh { from { background-position: 0 0; } to { background-position: 0 -6000px; } } @-moz-keyframes kvAniMh { from { background-position: 0 0; } to { background-position: 0 -6000px; } } @-ms-keyframes kvAniMh { from { background-position: 0 0; } to { background-position: 0 -6000px; } } @-o-keyframes kvAniMh { from { background-position: 0 0; } to { background-position: 0 -6000px; } } @keyframes kvAniMh { from { background-position: 0 0; } to { background-position: 0 -6000px; } } @-webkit-keyframes aniBtn { from { background-position: 0 0; } to { background-position: 0 -3200px; } } @-moz-keyframes aniBtn { from { background-position: 0 0; } to { background-position: 0 -3200px; } } @-ms-keyframes aniBtn { from { background-position: 0 0; } to { background-position: 0 -3200px; } } @-o-keyframes aniBtn { from { background-position: 0 0; } to { background-position: 0 -3200px; } } @keyframes aniBtn { from { background-position: 0 0; } to { background-position: 0 -3200px; } } @-webkit-keyframes player { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } to { transform: scale3d(1, 1, 1); } } @-moz-keyframes player { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } to { transform: scale3d(1, 1, 1); } } @-ms-keyframes player { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } to { transform: scale3d(1, 1, 1); } } @-o-keyframes player { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } to { transform: scale3d(1, 1, 1); } } @keyframes player { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } to { transform: scale3d(1, 1, 1); } } @keyframes pulse { from { transform: translateY(0); } to { transform: translateY(0.1rem); } } @-webkit-keyframes pulse { from { -webkit-transform: translateY(0); } to { -webkit-transform: translateY(0.1rem); } } @-webkit-keyframes flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } } @-moz-keyframes flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } } @-ms-keyframes flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } } @-o-keyframes flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } } @keyframes flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } } @-webkit-keyframes pulse1 { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); opacity: 1; } 50% { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); opacity: 1; } 100% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); opacity: 1; } } @-moz-keyframes pulse1 { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); opacity: 1; } 50% { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); opacity: 1; } 100% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); opacity: 1; } } @-ms-keyframes pulse1 { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); opacity: 1; } 50% { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); opacity: 1; } 100% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); opacity: 1; } } @-o-keyframes pulse1 { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); opacity: 1; } 50% { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); opacity: 1; } 100% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); opacity: 1; } } @keyframes pulse1 { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); opacity: 1; } 50% { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); opacity: 1; } 100% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); opacity: 1; } } @-webkit-keyframes pulse2 { 0% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); opacity: 1; } 50% { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); opacity: 1; } 100% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); opacity: 1; } } @-moz-keyframes pulse2 { 0% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); opacity: 1; } 50% { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); opacity: 1; } 100% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); opacity: 1; } } @-ms-keyframes pulse2 { 0% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); opacity: 1; } 50% { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); opacity: 1; } 100% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); opacity: 1; } } @-o-keyframes pulse2 { 0% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); opacity: 1; } 50% { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); opacity: 1; } 100% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); opacity: 1; } } @keyframes pulse2 { 0% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); opacity: 1; } 50% { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); opacity: 1; } 100% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); opacity: 1; } } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); } } @-moz-keyframes rotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); } } @-ms-keyframes rotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); } } @-o-keyframes rotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); } } @keyframes rotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); } } .noSize { font-size: 0; text-indent: -9999em; } .flex { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } .fade-enter-active, .fade-leave-active { transition: opacity .3s; } .fade-enter, .fade-leave-active { opacity: 0; } .vux-fade-enter-active, .vux-fade-leave-active { opacity: 1; transition: opacity linear 0.2s; } .vux-fade-enter, .vux-fade-leave-to { opacity: 0; } .vux-dialog-enter-active, .vux-dialog-leave-active { opacity: 1; transition-duration: 400ms; transform: translate(-50%, -50%) scale(1) !important; transition-property: transform, opacity!important; } .vux-dialog-leave-active { transition-duration: 300ms; } .vux-dialog-enter { opacity: 0; transform: translate(-50%, -50%) scale(1.185) !important; } .vux-dialog-leave-active { opacity: 0; transform: translate(-50%, -50%) scale(0.85) !important; } .vux-mask-enter, .vux-mask-leave-active { opacity: 0; } .vux-mask-leave-active, .vux-mask-enter-active { transition: opacity 300ms; } @keyframes slideInRight { from { transform: translate3d(100%, 0, 0); visibility: visible; } to { transform: translate3d(0, 0, 0); } } @keyframes slideOutRight { from { transform: translate3d(0, 0, 0); } to { visibility: hidden; transform: translate3d(100%, 0, 0); } } .slideRight-enter-active, .slideInRight, .slideRight-leave-active, .slideOutRight { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .slideRight-enter-active, .slideInRight { -webkit-animation-name: slideInRight; animation-name: slideInRight; } .slideRight-leave-active, .slideOutRight { -webkit-animation-name: slideOutRight; animation-name: slideOutRight; } .search-bar { position: relative; background: rgba(49, 49, 49, 0.3); padding: 0 .9rem 0 .3rem; border-radius: 50px; z-index: 9; width: 4rem; margin-left: auto; margin-right: .3rem; } .search-bar input { background: none; width: 100%; padding: .12rem 0; color: #fff; border: none; font-size: .24rem; } .search-bar .btn { position: absolute; right: .1rem; top: 0px; width: .7rem; height: 100%; cursor: pointer; } .search-bar .btn:after { display: block; content: ""; position: absolute; top: 50%; left: 50%; width: .26rem; height: .26rem; margin-top: -0.13rem; margin-left: -0.13rem; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/search_b8d03d97.png) no-repeat; background-size: 100%; } body { position: relative; } body::-webkit-scrollbar { width: 0; background: #263f67; /* optional: just make scrollbar invisible */ } body::-ms-scrollbar { width: 0; background: #263f67; /* optional: just make scrollbar invisible */ } body .reserv-btn1 { display: none; } body.index .header .dl-btn1 { display: block; width: 3.67rem; height: 1.1rem; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/dl-btn1_f2903311.png) no-repeat; background-size: 100%; margin: 7.7rem auto 0; } .wrap { position: relative; width: 100%; height: 31.75rem; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/bg-index_d2b4905f.jpg) no-repeat; background-size: 100%; font-size: .24rem; } .wrap .main { position: relative; width: 100%; overflow: hidden; } .wrap .footer { position: absolute; bottom: 0; width: 100%; } .wrap .footer .share-box { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ /* 09版 */ -webkit-box-pack: center; /* 12版 */ -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/share-bg_4af5fa9b.png) no-repeat; height: 1.6rem; width: 7.5rem; background-size: 100% 100%; padding-top: .3rem; } .wrap .footer .share-box .item { display: block; min-width: 1.4rem; height: .9rem; padding-top: .6rem; text-align: center; color: #fffec1; font-size: .18rem; } .wrap .footer .share-box .share-btn { background: url(https://uno.res.netease.com/m/gw/20200106094813/img/icon-share_821df229.png) no-repeat top center; background-size: .46rem .46rem; } .wrap .footer .share-box .wechat { background: url(https://uno.res.netease.com/m/gw/20200106094813/img/wechat_e4c7e801.png) no-repeat top center; background-size: .54rem .43rem; } .wrap .footer .share-box .weibo { background: url(https://uno.res.netease.com/m/gw/20200106094813/img/weibo_fec70b83.png) no-repeat top center; background-size: .52rem .43rem; } .wrap .footer .share-box .tel { background: url(https://uno.res.netease.com/m/gw/20200106094813/img/icon-tel_a752de59.png) no-repeat top center; background-size: .41rem .41rem; } .wrap .footer .NIE-copyRight_m { padding: .5rem 0 0.2rem; text-align: center; color: #fffec1; background: #323232; } .wrap .footer .NIE-copyRight_m a { color: #fffec1; } .list .wrap, .article .wrap { width: 100%; min-height: 100%; height: auto; overflow: auto; background: #056ac2; } .list .wrap .header, .article .wrap .header { position: relative; } .list .wrap .bg1, .article .wrap .bg1 { width: 100%; height: 100%; background: #056ac2; } .list .wrap .bg2, .article .wrap .bg2 { width: 100%; height: 100%; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/bg-inn_top_af5d8214.jpg) center top no-repeat; background-size: 100% auto; } .list .wrap .bg3, .article .wrap .bg3 { width: 100%; height: 100%; } #top { display: none; position: fixed; right: .2rem; bottom: 1rem; width: 0.76rem; height: 0.76rem; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/top_813747ff.png) no-repeat; background-size: 100%; } .main { height: 100%; } /*reset.less*/ /* CSS Document */ html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; font-size: 312.5%; } ul, li, div, p, body, h1, h2, h3, h4, h5, h6, dl, dt, dd { margin: 0; padding: 0; } input { -webkit-appearance: button; } li { list-style: none; } a { text-decoration: none; outline: none; } input { -webkit-appearance: none; outline: none; } * { outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); -webkit-focus-ring-color: rgba(0, 0, 0, 0); box-sizing: border-box; padding: 0; } .hide { display: none; } body, html { width: 100%; font-family: "Microsoft YaHei", "Helvetica Neue", Arial, HelveticaNeue, Helvetica, "BBAlpha Sans", sans-serif; font-weight: normal; } * { -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; } body { opacity: 1; -webkit-transition: opacity 500ms ease-in; transition: opacity 500ms ease-in; } button { border: none; background: none; display: block; outline: none; } table { border-collapse: collapse; } /* mobile media-query */ html { font-size: 312.5%; -webkit-overflow-scrolling: touch; } @media screen and (min-width: 360px) and (max-width: 374px) and (orientation: portrait) { html { font-size: 351.5%; } } @media screen and (min-width: 384px) and (max-width: 399px) and (orientation: portrait) { html { font-size: 375%; } } @media screen and (min-width: 400px) and (max-width: 413px) and (orientation: portrait) { html { font-size: 390.625%; } } @media screen and (min-width: 414px) and (max-width: 431px) and (orientation: portrait) { html { font-size: 404.3%; } } @media screen and (min-width: 432px) and (max-width: 479px) and (orientation: portrait) { html { font-size: 421.875%; } } @media screen and (min-width: 480px) and (max-width: 639px) and (orientation: portrait) { html { font-size: 468.75%; } } @media screen and (min-width: 640px) and (orientation: portrait) { html { font-size: 625%; } } html, body { width: 100%; height: 100%; } .fl { float: left; } .fr { float: right; } .clear { clear: both; } #forhorview { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 9999; color: #FFF; font-size: .26rem; text-align: center; line-height: 2.8rem; display: none; } @-webkit-keyframes fadeInOut { 0%, 25%, 100% { opacity: 0; } 50%, 75% { opacity: 1; } } @-moz-keyframes fadeInOut { 0%, 25%, 100% { opacity: 0; } 50%, 75% { opacity: 1; } } @-o-keyframes fadeInOut { 0%, 25%, 100% { opacity: 0; } 50%, 75% { opacity: 1; } } @keyframes fadeInOut { 0%, 25%, 100% { opacity: 0; } 50%, 75% { opacity: 1; } } @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-o-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-50px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-50px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInLeft { 0% { opacity: 0; -o-transform: translateX(-50px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-50px); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-50px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-50px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInDown { 0% { opacity: 0; -ms-transform: translateY(-50px); } 100% { opacity: 1; -ms-transform: translateY(0); } } @keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-50px); } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(50px); } 100% { opacity: 1; -webkit-transform: translateY(0); } } @-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(50px); } 100% { opacity: 1; -moz-transform: translateY(0); } } @-o-keyframes fadeInUp { 0% { opacity: 0; -o-transform: translateY(50px); } 100% { opacity: 1; -o-transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(50px); } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(50px); } 100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(50px); } 100% { opacity: 1; -moz-transform: translateX(0); } } @-o-keyframes fadeInRight { 0% { opacity: 0; -o-transform: translateX(50px); } 100% { opacity: 1; -o-transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; transform: translateX(50px); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes zoomInAndOut { 0% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 100% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(2, 2, 2); transform: scale3d(2, 2, 2); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(2, 2, 2); transform: scale3d(2, 2, 2); } 100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(0.9); } 50% { -webkit-transform: scale(1.1); } 100% { -webkit-transform: scale(0.9); opacity: 1; } } @-moz-keyframes pulse { 0% { -moz-transform: scale(0.9); } 50% { -moz-transform: scale(1.1); } 100% { -moz-transform: scale(0.9); opacity: 1; } } @-o-keyframes pulse { 0% { -o-transform: scale(0.9); } 50% { -o-transform: scale(1.1); } 100% { -o-transform: scale(0.9); opacity: 1; } } @keyframes pulse { 0% { transform: scale(0.9); } 50% { transform: scale(1.1); } 100% { transform: scale(0.9); opacity: 1; } } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); opacity: 0; } } @-moz-keyframes hinge { 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 100% { -moz-transform: translateY(700px); opacity: 0; } } @-o-keyframes hinge { 0% { -o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 20%, 60% { -o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 40% { -o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 80% { -o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out; } 100% { -o-transform: translateY(700px); opacity: 0; } } @keyframes hinge { 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 100% { transform: translateY(700px); opacity: 0; } } @-webkit-keyframes rotate { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(0deg); } 100% { -webkit-transform-origin: center center; -webkit-transform: rotate(360deg); } } @-moz-keyframes rotate { 0% { -moz-transform-origin: center center; -moz-transform: rotate(0deg); } 100% { -moz-transform-origin: center center; -moz-transform: rotate(360deg); } } @-o-keyframes rotate { 0% { -o-transform-origin: center center; -o-transform: rotate(0deg); } 100% { -o-transform-origin: center center; -o-transform: rotate(360deg); } } @keyframes rotate { 0% { transform-origin: center center; transform: rotate(0deg); } 100% { transform-origin: center center; transform: rotate(360deg); } } @-webkit-keyframes wobble { 0% { -webkit-transform: translateX(0%); } 15% { -webkit-transform: translateX(-25%) rotate(-5deg); } 30% { -webkit-transform: translateX(20%) rotate(3deg); } 45% { -webkit-transform: translateX(-15%) rotate(-3deg); } 60% { -webkit-transform: translateX(10%) rotate(2deg); } 75% { -webkit-transform: translateX(-5%) rotate(-1deg); } 100% { -webkit-transform: translateX(0%); opacity: 1; } } @-moz-keyframes wobble { 0% { -moz-transform: translateX(0%); } 15% { -moz-transform: translateX(-25%) rotate(-5deg); } 30% { -moz-transform: translateX(20%) rotate(3deg); } 45% { -moz-transform: translateX(-15%) rotate(-3deg); } 60% { -moz-transform: translateX(10%) rotate(2deg); } 75% { -moz-transform: translateX(-5%) rotate(-1deg); } 100% { -moz-transform: translateX(0%); opacity: 1; } } @-o-keyframes wobble { 0% { -o-transform: translateX(0%); } 15% { -o-transform: translateX(-25%) rotate(-5deg); } 30% { -o-transform: translateX(20%) rotate(3deg); } 45% { -o-transform: translateX(-15%) rotate(-3deg); } 60% { -o-transform: translateX(10%) rotate(2deg); } 75% { -o-transform: translateX(-5%) rotate(-1deg); } 100% { -o-transform: translateX(0%); opacity: 1; } } @keyframes wobble { 0% { transform: translateX(0%); } 15% { transform: translateX(-25%) rotate(-5deg); } 30% { transform: translateX(20%) rotate(3deg); } 45% { transform: translateX(-15%) rotate(-3deg); } 60% { transform: translateX(10%) rotate(2deg); } 75% { transform: translateX(-5%) rotate(-1deg); } 100% { transform: translateX(0%); opacity: 1; } } @keyframes shake { 50% { -webkit-transform: rotate(10deg); -moz-transform: rotate(10deg); -ms-transform: rotate(10deg); -o-transform: rotate(10deg); } 0%, 100% { -webkit-transform: rotate(-10deg); -moz-transform: rotate(-10deg); -ms-transform: rotate(-10deg); -o-transform: rotate(-10deg); } } @-webkit-keyframes flip1 { 0% { -webkit-transform: perspective(400px) rotateY(90deg); } 25% { -webkit-transform: perspective(400px) rotateY(-10deg); } 50% { -webkit-transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); } } @keyframes flip1 { 0% { transform: perspective(400px) rotateY(90deg); } 40% { transform: perspective(400px) rotateY(-10deg); } 70% { transform: perspective(400px) rotateY(10deg); } 100% { transform: perspective(400px) rotateY(0deg); } } @-webkit-keyframes flip2 { 0% { -webkit-transform: perspective(400px) rotateY(-90deg); } 25% { -webkit-transform: perspective(400px) rotateY(-10deg); } 50% { -webkit-transform: perspective(400px) rotateY(10deg); } 100% { -webkit-transform: perspective(400px) rotateY(0deg); } } @keyframes flip2 { 0% { transform: perspective(400px) rotateY(-90deg); } 40% { transform: perspective(400px) rotateY(-10deg); } 70% { transform: perspective(400px) rotateY(10deg); } 100% { transform: perspective(400px) rotateY(0deg); } } @-webkit-keyframes shine { 0%, 100% { opacity: 1; } 50% { opacity: .1; } } @-webkit-keyframes gif { 0% { background-position: 0%; opacity: 1; } 100% { background-position: 200%; opacity: 1; } } @keyframes gif { 0% { background-position: 0%; opacity: 1; } 100% { background-position: 200%; opacity: 1; } } @-webkit-keyframes zoom2 { 0% { -webkit-transform: scale3d(0.98, 1, 1); transform: scale3d(0.98, 1, 1); } 50% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 100% { -webkit-transform: scale3d(0.98, 1, 1); transform: scale3d(0.98, 1, 1); } } @keyframes zoom2 { 0% { -webkit-transform: scale3d(0.98, 1, 1); transform: scale3d(0.98, 1, 1); } 50% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } 100% { -webkit-transform: scale3d(0.98, 1, 1); transform: scale3d(0.98, 1, 1); } } @-webkit-keyframes matrix { 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, -0.0015, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, -0.0015, 0, 0, 1, 0, 0, 0, 0, 1); transform-origin: center center 0px; -webkit-transform-origin: center center 0px; } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform-origin: center center 0px; -webkit-transform-origin: center center 0px; } } @keyframes matrix { 0% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, -0.0015, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, -0.0015, 0, 0, 1, 0, 0, 0, 0, 1); transform-origin: center center 0px; -webkit-transform-origin: center center 0px; } 100% { transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1); transform-origin: center center 0px; -webkit-transform-origin: center center 0px; } } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); } } @keyframes rotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(180deg); } 100% { transform: rotate(360deg); } } @-webkit-keyframes zoomIn2 { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(1.05); } 100% { -webkit-transform: scale(1); } } @keyframes zoomIn2 { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } @keyframes translateDown { 0%, 100% { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); } 50% { -webkit-transform: translateY(10px); -moz-transform: translateY(10px); -ms-transform: translateY(10px); -o-transform: translateY(10px); } } @keyframes translateLeft { 0%, 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); } 50% { -webkit-transform: translateX(-5px); -moz-transform: translateX(-5px); -ms-transform: translateX(-5px); -o-transform: translateX(-5px); } } @keyframes arrow { 0%, 100% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); } 50% { -webkit-transform: translate(0, 0.15rem); -moz-transform: translate(0, 0.15rem); -ms-transform: translate(0, 0.15rem); -o-transform: translate(0, 0.15rem); } } @-webkit-keyframes arrow { 0%, 100% { -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -ms-transform: translate(0, 0); -o-transform: translate(0, 0); } 50% { -webkit-transform: translate(0, 0.15rem); -moz-transform: translate(0, 0.15rem); -ms-transform: translate(0, 0.15rem); -o-transform: translate(0, 0.15rem); } } @keyframes show { 0% { opacity: 0; transform: translateY(-20px); } 100% { opacity: 1; transform: translateY(0); } } @-webkit-keyframes fylLeft { 0% { opacity: 1; transform: translateX(-6rem); } 100% { opacity: 1; transform: translateX(0); } } @-moz-keyframes fylLeft { 0% { opacity: 1; transform: translateX(-6rem); } 100% { opacity: 1; transform: translateX(0); } } @-ms-keyframes fylLeft { 0% { opacity: 1; transform: translateX(-6rem); } 100% { opacity: 1; transform: translateX(0); } } @-o-keyframes fylLeft { 0% { opacity: 1; transform: translateX(-6rem); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fylLeft { 0% { opacity: 1; transform: translateX(-6rem); } 100% { opacity: 1; transform: translateX(0); } } @-webkit-keyframes scaleSkill { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.2); } 100% { transform: translate(-50%, -50%) scale(1); } } @-moz-keyframes scaleSkill { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.2); } 100% { transform: translate(-50%, -50%) scale(1); } } @-ms-keyframes scaleSkill { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.2); } 100% { transform: translate(-50%, -50%) scale(1); } } @-o-keyframes scaleSkill { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.2); } 100% { transform: translate(-50%, -50%) scale(1); } } @keyframes scaleSkill { 0% { transform: translate(-50%, -50%) scale(1); } 50% { transform: translate(-50%, -50%) scale(1.2); } 100% { transform: translate(-50%, -50%) scale(1); } } @-webkit-keyframes btnShake { 0% { transform: translateX(0); } 25% { transform: translateX(-2px); } 50% { transform: translateX(0); } 75% { transform: translateX(2px); } 100% { transform: translateX(0); } } @-moz-keyframes btnShake { 0% { transform: translateX(0); } 25% { transform: translateX(-2px); } 50% { transform: translateX(0); } 75% { transform: translateX(2px); } 100% { transform: translateX(0); } } @-ms-keyframes btnShake { 0% { transform: translateX(0); } 25% { transform: translateX(-2px); } 50% { transform: translateX(0); } 75% { transform: translateX(2px); } 100% { transform: translateX(0); } } @-o-keyframes btnShake { 0% { transform: translateX(0); } 25% { transform: translateX(-2px); } 50% { transform: translateX(0); } 75% { transform: translateX(2px); } 100% { transform: translateX(0); } } @keyframes btnShake { 0% { transform: translateX(0); } 25% { transform: translateX(-2px); } 50% { transform: translateX(0); } 75% { transform: translateX(2px); } 100% { transform: translateX(0); } } @-webkit-keyframes innerIn { 0% { transform: translateX(1000px); } 100% { transform: translateX(0); } } @-moz-keyframes innerIn { 0% { transform: translateX(1000px); } 100% { transform: translateX(0); } } @-ms-keyframes innerIn { 0% { transform: translateX(1000px); } 100% { transform: translateX(0); } } @-o-keyframes innerIn { 0% { transform: translateX(1000px); } 100% { transform: translateX(0); } } @keyframes innerIn { 0% { transform: translateX(1000px); } 100% { transform: translateX(0); } } @-webkit-keyframes barAni { from { background-position: 0 0; } to { background-position: 0 -8000px; } } @-moz-keyframes barAni { from { background-position: 0 0; } to { background-position: 0 -8000px; } } @-ms-keyframes barAni { from { background-position: 0 0; } to { background-position: 0 -8000px; } } @-o-keyframes barAni { from { background-position: 0 0; } to { background-position: 0 -8000px; } } @keyframes barAni { from { background-position: 0 0; } to { background-position: 0 -8000px; } } @-webkit-keyframes kvAni { from { background-position: 0 0; } to { background-position: 0 -17720px; } } @-moz-keyframes kvAni { from { background-position: 0 0; } to { background-position: 0 -17720px; } } @-ms-keyframes kvAni { from { background-position: 0 0; } to { background-position: 0 -17720px; } } @-o-keyframes kvAni { from { background-position: 0 0; } to { background-position: 0 -17720px; } } @keyframes kvAni { from { background-position: 0 0; } to { background-position: 0 -17720px; } } @-webkit-keyframes kvAniMh { from { background-position: 0 0; } to { background-position: 0 -6000px; } } @-moz-keyframes kvAniMh { from { background-position: 0 0; } to { background-position: 0 -6000px; } } @-ms-keyframes kvAniMh { from { background-position: 0 0; } to { background-position: 0 -6000px; } } @-o-keyframes kvAniMh { from { background-position: 0 0; } to { background-position: 0 -6000px; } } @keyframes kvAniMh { from { background-position: 0 0; } to { background-position: 0 -6000px; } } @-webkit-keyframes aniBtn { from { background-position: 0 0; } to { background-position: 0 -3200px; } } @-moz-keyframes aniBtn { from { background-position: 0 0; } to { background-position: 0 -3200px; } } @-ms-keyframes aniBtn { from { background-position: 0 0; } to { background-position: 0 -3200px; } } @-o-keyframes aniBtn { from { background-position: 0 0; } to { background-position: 0 -3200px; } } @keyframes aniBtn { from { background-position: 0 0; } to { background-position: 0 -3200px; } } @-webkit-keyframes player { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } to { transform: scale3d(1, 1, 1); } } @-moz-keyframes player { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } to { transform: scale3d(1, 1, 1); } } @-ms-keyframes player { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } to { transform: scale3d(1, 1, 1); } } @-o-keyframes player { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } to { transform: scale3d(1, 1, 1); } } @keyframes player { from { transform: scale3d(1, 1, 1); } 30% { transform: scale3d(1.25, 0.75, 1); } 40% { transform: scale3d(0.75, 1.25, 1); } 50% { transform: scale3d(1.15, 0.85, 1); } 65% { transform: scale3d(0.95, 1.05, 1); } 75% { transform: scale3d(1.05, 0.95, 1); } to { transform: scale3d(1, 1, 1); } } @keyframes pulse { from { transform: translateY(0); } to { transform: translateY(0.1rem); } } @-webkit-keyframes pulse { from { -webkit-transform: translateY(0); } to { -webkit-transform: translateY(0.1rem); } } @-webkit-keyframes flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } } @-moz-keyframes flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } } @-ms-keyframes flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } } @-o-keyframes flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } } @keyframes flipInX { from { transform: perspective(400px) rotate3d(1, 0, 0, 90deg); animation-timing-function: ease-in; opacity: 0; } 40% { transform: perspective(400px) rotate3d(1, 0, 0, -20deg); animation-timing-function: ease-in; } 60% { transform: perspective(400px) rotate3d(1, 0, 0, 10deg); opacity: 1; } 80% { transform: perspective(400px) rotate3d(1, 0, 0, -5deg); } to { transform: perspective(400px); } } @-webkit-keyframes pulse1 { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); opacity: 1; } 50% { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); opacity: 1; } 100% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); opacity: 1; } } @-moz-keyframes pulse1 { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); opacity: 1; } 50% { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); opacity: 1; } 100% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); opacity: 1; } } @-ms-keyframes pulse1 { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); opacity: 1; } 50% { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); opacity: 1; } 100% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); opacity: 1; } } @-o-keyframes pulse1 { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); opacity: 1; } 50% { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); opacity: 1; } 100% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); opacity: 1; } } @keyframes pulse1 { 0% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); opacity: 1; } 50% { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); opacity: 1; } 100% { -webkit-transform: scale(0.8); -moz-transform: scale(0.8); -ms-transform: scale(0.8); -o-transform: scale(0.8); opacity: 1; } } @-webkit-keyframes pulse2 { 0% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); opacity: 1; } 50% { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); opacity: 1; } 100% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); opacity: 1; } } @-moz-keyframes pulse2 { 0% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); opacity: 1; } 50% { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); opacity: 1; } 100% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); opacity: 1; } } @-ms-keyframes pulse2 { 0% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); opacity: 1; } 50% { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); opacity: 1; } 100% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); opacity: 1; } } @-o-keyframes pulse2 { 0% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); opacity: 1; } 50% { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); opacity: 1; } 100% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); opacity: 1; } } @keyframes pulse2 { 0% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); opacity: 1; } 50% { -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); opacity: 1; } 100% { -webkit-transform: scale(0.9); -moz-transform: scale(0.9); -ms-transform: scale(0.9); -o-transform: scale(0.9); opacity: 1; } } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); } } @-moz-keyframes rotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); } } @-ms-keyframes rotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); } } @-o-keyframes rotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); } } @keyframes rotate { 0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); } } .noSize { font-size: 0; text-indent: -9999em; } .flex { display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ } html, body { width: 100%; height: auto; min-height: 100%; background: #056ac2; } .list .wrap .main { padding: 1.3rem 0 1.3rem 0; overflow: auto; } .news-list { /*position: absolute; top: 1.2rem; left: 0; right: 0; bottom: 4rem;*/ } .news-list li { display: block; position: relative; color: #fff; padding: .22rem 0; font-size: 0; box-sizing: border-box; width: 7.26rem; height: 1.66rem; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/item_befa9b48.png) no-repeat; background-size: 100%; margin: 0 auto .2rem; } .news-list li:last-child:after { content: ''; background: none; } .news-list a { position: relative; display: block; width: 100%; height: 100%; color: #fff; display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ display: -moz-box; /* OLD - Firefox 19- (buggy but mostly works) */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* NEW - Chrome */ display: flex; /* NEW, Spec - Opera 12.1, Firefox 20+ */ /* 09版 */ -webkit-box-pack: center; /* 12版 */ -webkit-justify-content: center; -moz-justify-content: center; -ms-justify-content: center; -o-justify-content: center; justify-content: center; /* 12版 */ -webkit-flex-direction: column; -moz-flex-direction: column; -ms-flex-direction: column; -o-flex-direction: column; flex-direction: column; } .news-list .type { display: none; } .news-list .title { display: block; margin: 0 auto; width: 5.72rem; min-height: 0.72rem; font-size: .28rem; line-height: .4rem; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .news-list .desc { display: none; } .news-list .date { margin-top: 0.1rem; padding-left: .72rem; display: block; font-size: .24rem; color: #acc0df; } .more { position: relative; display: block; line-height: .66rem; margin: 0 auto; color: #fff; font-weight: bold; text-align: center; font-size: .26rem; border-radius: 20px; width: 6.28rem; height: 0.66rem; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/loading-btn_560ee12f.png) no-repeat; background-size: 100%; background-color: #4faad4; } .list .content-sub-title { margin: 0 .2rem; } .list .content-sub-title .sub-title-wrap { position: relative; padding-left: .8rem; } .list .content-sub-title .card-title { position: absolute; left: 0; top: 50%; display: block; margin-top: -0.4rem; } .list .content-sub-title .sub-title { position: relative; padding: .1rem 0; color: #fff; font-size: .32rem; } .list .content-sub-title .sub-title:after { display: block; content: ""; position: absolute; left: 0; bottom: 0; width: 100%; border-bottom: 1px solid #fff; } .list .content-sub-title .box-btn-wrap { position: relative; margin-top: .2rem; height: .7rem; } .list .content-sub-title .go-back { display: block; width: 1.66rem; height: 0.54rem; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/go-back_37ab4508.png); background-size: 100%; } .list.strategy, .list.star { position: absolute; top: 0; right: 0; } .list-wrap .list-content { margin-left: auto; margin-right: auto; color: #fff; padding: 0 .3rem; } .list-wrap .list-content a { color: #fff; } .list-wrap .list-content li.item { position: relative; width: 100%; padding-bottom: .2rem; overflow: hidden; min-height: 2.7rem; } .list-wrap .list-content li.item:after { content: ""; display: block; position: absolute; left: 0; bottom: 0; right: 0; height: .05rem; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/line2_385e609c.png); background-size: 100%; } .list-wrap .list-content .card { position: absolute; top: .2rem; left: 0; } .list-wrap .list-content.card-rules { background: url(https://uno.res.netease.com/m/gw/20200106094813/img/card-rules_771e8d99.png) no-repeat; background-size: 100%; } .list-wrap .list-content.card-modes { background: url(https://uno.res.netease.com/m/gw/20200106094813/img/card-modes_4b493409.png) no-repeat; background-size: 100%; } .list-wrap .list-content.card-topup { height: 1.86rem; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/card-topup_13f746dc.png) no-repeat; background-size: 100%; } .list-wrap .list-content.card-acc { width: 1.58rem; height: 1.85rem; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/card-account_771d2f18.png) no-repeat; background-size: 100%; } .list-wrap .list-content .card-xinshou { width: 1.85rem; height: 2.25rem; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/card-xinshou_bbbb4ddf.png) no-repeat; background-size: 100%; } .list-wrap .list-content .card-gaoshou { width: 1.82rem; height: 2.24rem; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/card-gaoshou_f16b0ed2.png) no-repeat; background-size: 100%; } .list-wrap .list-content .card-shushou { width: 1.84rem; height: 2.25rem; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/card-shushou_35c74863.png) no-repeat; background-size: 100%; } .list-wrap .list-content .card-saishou { width: 1.86rem; height: 2.26rem; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/card-saishou_a8c0213f.png) no-repeat; background-size: 100%; } .list-wrap .list-content .card-mrt { width: 1.83rem; height: 2.24rem; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/card-mrt_b18f6f35.png) no-repeat; background-size: 100%; } .list-wrap .list-content .card-phb { width: 1.85rem; height: 2.26rem; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/card-phb_c6923686.png) no-repeat; background-size: 100%; } .list-wrap .list-content .card-zb { width: 1.83rem; height: 2.26rem; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/card-zb_bb6da099.png) no-repeat; background-size: 100%; } .list-wrap .list-content .card-dj { width: 1.83rem; height: 2.25rem; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/card-dj_c8bd9341.png) no-repeat; background-size: 100%; } .list-wrap .list-content .card-right { position: relative; margin-left: 2rem; } .list-wrap .list-content .card-right h2 { position: relative; margin: .2rem 0 .14rem 0; font-size: .32rem; color: #fff; padding-bottom: .04rem; border-bottom: 1px solid #fff; } .list-wrap .list-content .card-right h2 .more { display: inline-block; position: absolute; top: 0; right: 0; font-size: .26rem; border-radius: 20px; padding: 0 .23rem; line-height: .38rem; height: .38rem; color: #fff; width: 1.2rem; text-align: center; font-weight: bold; background: rgba(255, 255, 255, 0.2); } .list-wrap .list-content .card-right h2 .more:before { content: ''; } .list-wrap .list-content .card-right p { position: relative; display: block; margin: .45rem 0; } .list-wrap .list-content .card-right p a { display: inline-block; font-size: .26rem; color: #d1f8fc; line-height: .42rem; padding-left: .3rem; width: 5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; word-wrap: normal; } .list-wrap .list-content .card-right p:before { position: absolute; top: 50%; margin-top: -5px; left: 0; content: ''; width: 10px; height: 10px; background: #098395; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; -moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box; } .list-wrap .list-content .subtitle { font-size: .24rem; font-weight: normal; } .list-wrap .list-content .link-wrap { overflow: hidden; } .list-wrap .list-content .link-wrap > li { position: relative; float: left; width: 50%; font-size: .26rem; font-weight: normal; margin-top: .1rem; padding-left: .22rem; } .list-wrap .list-content .link-wrap > li:before { position: absolute; left: 0; top: .12rem; content: ""; width: .12rem; height: .12rem; background: rgba(255, 255, 255, 0.5); border-radius: 50%; } .list-wrap .list-content .link-wrap > li a { display: block; position: relative; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .26rem; line-height: .44rem; } .strategy-list .search-bar, .star-list .search-bar, .match-list .search-bar { position: absolute; right: 0; top: 0; margin-right: 0; } .star-list .card-title { width: .68rem; height: .84rem; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/card-title_377335fb.png); background-size: 100%; } .strategy-list .card-title { width: .67rem; height: .83rem; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/card-title_36b62e97.png); background-size: 100%; } .match-list .card-title { width: .68rem; height: .84rem; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/card-title_cba88ab2.png); background-size: 100%; } .match .card-title, .match-list .card-title { width: .67rem; height: .83rem; background: url(https://uno.res.netease.com/m/gw/20200106094813/img/card-title_cba88ab2.png); background-size: 100%; } .star { background: #056ac2; } .star .list-wrap .list-content .link-wrap > li { float: none; width: auto; }