html { -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; } body { font: 14px/1.2 Helvetica Neue, Microsoft YaHei, Tahoma, Helvetica, Arial, \\5b8b\4f53, sans-serif; } blockquote, body, button, code, dd, div, dl, dt, fieldset, form, h1, h2, h3, h4, h5, h6, input, legend, li, ol, p, pre, td, textarea, th, ul { margin: 0; padding: 0; } button { outline: none; } table { border-collapse: collapse; border-spacing: 0; } em, i { font-weight: 400; font-style: normal; } fieldset, img { border: 0; vertical-align: middle; } li, ol, ul { list-style: none; } button, input, select, textarea { font-size: 100%; outline: none; vertical-align: middle; } a:active, a:hover { outline: 0; } article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; } audio, canvas, progress, video { display: inline-block; vertical-align: baseline; } button, input, optgroup, select, textarea { color: inherit; font: inherit; margin: 0; } * { margin: 0; outline: 0; padding: 0; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); } article, aside, dialog, figure, footer, header, menu, nav, section { display: block; } a { text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.35); } a:active, a:hover, a:link, a:visited { color: #08a1ef; text-decoration: none; } html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; } body, html { height: 100%; } body { margin: 0; padding: 0; width: 100%; min-height: 100%; font-family: Microsoft YaHei, Helvetica Neue, Helvetica, Arial, sans-serif; line-height: 1.231; -webkit-touch-callout: none; display: -webkit-box; -webkit-box-orient: vertical; -webkit-box-align: stretch; position: fixed; -webkit-text-size-adjust: 100% !important; -ms-text-size-adjust: 100% !important; } img { vertical-align: middle; } img:not([src*='/']) { display: none; } table { border-collapse: collapse; border-spacing: 0; width: 100%; } caption, td, th { vertical-align: middle; } textarea { resize: none; border: 0; padding: 8px 0; border-radius: 0; } li, ul { list-style: none; margin: 0; padding: 0; -webkit-transform: translateZ(0); transform: translateZ(0); } h1, h2, h3, h4, h5, h6 { margin: 0; padding: 0; font-weight: 400; } .clr:after { content: ''; display: block; height: 0; clear: both; visibility: hidden; } .clr { *zoom: 1; } .telphone { display: block; position: fixed; right: 2%; bottom: 15%; z-index: 100; cursor: pointer; } .telphone img { width: 44px; height: 44px; } .clearfix:after { content: '.'; display: block; height: 0; visibility: hidden; clear: both; } .clearfix { zoom: 1; } #content_load_check { width: 1px !important; } .loading-prev { width: 100%; height: 100%; z-index: 999; position: relative; } .loading-prev .no-bar-logo { top: 50% !important; margin-top: -75px !important; } .loading-prev .logo-box { width: 118px; position: absolute; top: 110px; left: 50%; transform: translate(-50%); } .loading-prev .logo-box .progressBar { height: 4px; width: 180px; margin: 20px 0 0 -31px; } .loading-prev .logo-box .progressBar .progressAnim { height: 100%; animation: progress 3s; } @keyframes progress { 0% { width: 0; } to { width: 100%; } } .loading-prev .logo-box .load-prev-box { display: block; } .loading-prev .logo-box .load-prev-box .load-prev-bg { z-index: 1000; width: 118px; height: 118px; background-size: cover !important; background-repeat: no-repeat !important; } .loading-prev .logo-bg, .loading-prev .logo-bg-color, .loading-prev .logo-bg-img { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .loading-prev .logo-bg-img { z-index: 0; background-position: 50% !important; background-size: cover !important; background-repeat: no-repeat !important; } @-webkit-keyframes hingeRight { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } @keyframes hingeRight { 0% { -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); transform: rotate(80deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate(60deg); transform: rotate(60deg); -webkit-transform-origin: top left; transform-origin: top left; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hingeRight { -webkit-animation-name: hingeRight; animation-name: hingeRight; } @-webkit-keyframes hingeLeft { 0% { -webkit-transform-origin: top right; transform-origin: top right; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(-80deg); transform: rotate(-80deg); -webkit-transform-origin: top right; transform-origin: top right; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate(-60deg); transform: rotate(-60deg); -webkit-transform-origin: top right; transform-origin: top right; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, -700px, 0); transform: translate3d(0, -700px, 0); opacity: 0; } } @keyframes hingeLeft { 0% { -webkit-transform-origin: top right; transform-origin: top right; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(-80deg); transform: rotate(-80deg); -webkit-transform-origin: top right; transform-origin: top right; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; } 40%, 80% { -webkit-transform: rotate(-60deg); transform: rotate(-60deg); -webkit-transform-origin: top right; transform-origin: top right; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; opacity: 1; } to { -webkit-transform: translate3d(0, 700px, 0); transform: translate3d(0, 700px, 0); opacity: 0; } } .hingeLeft { -webkit-animation-name: hingeLeft; animation-name: hingeLeft; } .twisterInUpRight { -webkit-animation-name: twisterInUpRight; animation-name: twisterInUpRight; } @-webkit-keyframes twisterInUpRight { 0% { opacity: 0; -webkit-transform-origin: center center; -webkit-transform: scale(1) translateX(-100%) rotate(-1turn); } to { opacity: 1; -webkit-transform-origin: center center; -webkit-transform: scale(1) translateX(0) rotate(0deg); } } @keyframes twisterInUpRight { 0% { opacity: 0; transform-origin: center center; transform: scale(1) translateX(-100%) rotate(-1turn); } to { opacity: 1; transform-origin: center center; transform: scale(1) translateX(0) rotate(0deg); } } .twisterInUpLeft { -webkit-animation-name: twisterInUpLeft; animation-name: twisterInUpLeft; } @-webkit-keyframes twisterInUpLeft { 0% { opacity: 0; -webkit-transform-origin: center center; -webkit-transform: scale(1) translateX(100%) rotate(1turn); } to { opacity: 1; -webkit-transform-origin: center center; -webkit-transform: scale(1) translateX(0) rotate(0deg); } } @keyframes twisterInUpLeft { 0% { opacity: 0; transform-origin: center center; transform: scale(1) translateX(100%) rotate(1turn); } to { opacity: 1; transform-origin: center center; transform: scale(1) translateX(0) rotate(0deg); } } .twisterInUpDown { -webkit-animation-name: twisterInUpDown; animation-name: twisterInUpDown; } @-webkit-keyframes twisterInUpDown { 0% { opacity: 0; -webkit-transform-origin: center center; -webkit-transform: scale(1) translateY(-100%) rotate(-1turn); } to { opacity: 1; -webkit-transform-origin: center center; -webkit-transform: scale(1) translateY(0) rotate(0deg); } } @keyframes twisterInUpDown { 0% { opacity: 0; transform-origin: center center; transform: scale(1) translateY(-100%) rotate(-1turn); } to { opacity: 1; transform-origin: center center; transform: scale(1) translateY(0) rotate(0deg); } } .twisterInUpUp { -webkit-animation-name: twisterInUpUp; animation-name: twisterInUpUp; } @-webkit-keyframes twisterInUpUp { 0% { opacity: 0; -webkit-transform-origin: center center; -webkit-transform: scale(1) translateY(100%) rotate(1turn); } to { opacity: 1; -webkit-transform-origin: center center; -webkit-transform: scale(1) translateY(0) rotate(0deg); } } @keyframes twisterInUpUp { 0% { opacity: 0; transform-origin: center center; transform: scale(1) translateY(100%) rotate(1turn); } to { opacity: 1; transform-origin: center center; transform: scale(1) translateY(0) rotate(0deg); } } .slideUp { -webkit-animation-name: slideUp; animation-name: slideUp; } @-webkit-keyframes slideUp { 0% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(0); } to { -webkit-transform-origin: 0 0; -webkit-transform: translateY(-100%); } } @keyframes slideUp { 0% { transform-origin: 0 0; transform: translateY(0); } to { transform-origin: 0 0; transform: translateY(-100%); } } .slideDown { -webkit-animation-name: slideDown; animation-name: slideDown; } @-webkit-keyframes slideDown { 0% { -webkit-transform-origin: 0 0; -webkit-transform: translateY(0); } to { -webkit-transform-origin: 0 0; -webkit-transform: translateY(100%); } } @keyframes slideDown { 0% { transform-origin: 0 0; transform: translateY(0); } to { transform-origin: 0 0; transform: translateY(100%); } } @-webkit-keyframes puffOut { 0% { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1); } to { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(2); } } @keyframes puffOut { 0% { opacity: 1; transform-origin: 50% 50%; transform: scale(1); } to { opacity: 0; transform-origin: 50% 50%; transform: scale(2); } } .puffOut { -webkit-animation-name: puffOut; animation-name: puffOut; } @-webkit-keyframes puffIn { 0% { opacity: 0; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(2); } to { opacity: 1; -webkit-transform-origin: 50% 50%; -webkit-transform: scale(1); } } @keyframes puffIn { 0% { opacity: 0; transform-origin: 50% 50%; transform: scale(2); } to { opacity: 1; transform-origin: 50% 50%; transform: scale(1); } } .puffIn { -webkit-animation-name: puffIn; animation-name: puffIn; } @-webkit-keyframes twisterInDownRight { 0% { opacity: 0; -webkit-transform-origin: left top; -webkit-transform: scale(1) translateX(-100%) rotate(1turn); } 30% { -webkit-transform-origin: left top; -webkit-transform: scale(0) translateX(-100%) rotate(1turn); } to { opacity: 1; -webkit-transform-origin: left top; -webkit-transform: scale(1) translateX(0) rotate(0deg); } } @keyframes twisterInDownRight { 0% { opacity: 0; transform-origin: left top; transform: scale(0) translateX(-100%) rotate(1turn); } 30% { transform-origin: left top; transform: scale(0) translateX(-100%) rotate(1turn); } to { opacity: 1; transform-origin: left top; transform: scale(1) translateX(0) rotate(0deg); } } .twisterInDownRight { -webkit-animation-name: twisterInDownRight; animation-name: twisterInDownRight; } @-webkit-keyframes twisterInDownLeft { 0% { opacity: 0; -webkit-transform-origin: right bottom; -webkit-transform: scale(0) translateX(100%) rotate(-1turn); } 30% { -webkit-transform-origin: right bottom; -webkit-transform: scale(0) translateX(100%) rotate(-1turn); } to { opacity: 1; -webkit-transform-origin: right bottom; -webkit-transform: scale(1) translateX(0) rotate(0deg); } } @keyframes twisterInDownLeft { 0% { opacity: 0; transform-origin: right bottom; transform: scale(0) translateX(100%) rotate(-1turn); } 30% { transform-origin: right bottom; transform: scale(0) translateX(100%) rotate(-1turn); } to { opacity: 1; transform-origin: right bottom; transform: scale(1) translateX(0) rotate(0deg); } } .twisterInDownLeft { -webkit-animation-name: twisterInDownLeft; animation-name: twisterInDownLeft; } @-webkit-keyframes twisterInDownDown { 0% { opacity: 0; -webkit-transform-origin: right top; -webkit-transform: scale(0) translateY(-100%) rotate(1turn); } 30% { -webkit-transform-origin: right top; -webkit-transform: scale(0) translateY(-100%) rotate(1turn); } to { opacity: 1; -webkit-transform-origin: right top; -webkit-transform: scale(1) translateY(0) rotate(0deg); } } @keyframes twisterInDownDown { 0% { opacity: 0; transform-origin: right top; transform: scale(0) translateY(-100%) rotate(1turn); } 30% { transform-origin: right top; transform: scale(0) translateY(-100%) rotate(1turn); } to { opacity: 1; transform-origin: right top; transform: scale(1) translateY(0) rotate(0deg); } } .twisterInDownDown { -webkit-animation-name: twisterInDownDown; animation-name: twisterInDownDown; } @-webkit-keyframes twisterInDownUp { 0% { opacity: 0; -webkit-transform-origin: left bottom; -webkit-transform: scale(0) translateY(100%) rotate(-1turn); } 30% { -webkit-transform-origin: left bottom; -webkit-transform: scale(0) translateY(100%) rotate(-1turn); } to { opacity: 1; -webkit-transform-origin: left bottom; -webkit-transform: scale(1) translateY(0) rotate(0deg); } } @keyframes twisterInDownUp { 0% { opacity: 0; transform-origin: left bottom; transform: scale(0) translateY(100%) rotate(-1turn); } 30% { transform-origin: left bottom; transform: scale(0) translateY(100%) rotate(-1turn); } to { opacity: 1; transform-origin: left bottom; transform: scale(1) translateY(0) rotate(0deg); } } .twisterInDownUp { -webkit-animation-name: twisterInDownUp; animation-name: twisterInDownUp; } @-webkit-keyframes rollInRight { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); } to { opacity: 1; -webkit-transform: none; } } @keyframes rollInRight { 0% { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } .rollInRight { -webkit-animation-name: rollInRight; animation-name: rollInRight; } @-webkit-keyframes rollInLeft { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollInLeft { 0% { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } .rollInLeft { -webkit-animation-name: rollInLeft; animation-name: rollInLeft; } @-webkit-keyframes rollInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0) rotateX(120deg); transform: translate3d(0, -100%, 0) rotateX(120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -100%, 0) rotateX(120deg); transform: translate3d(0, -100%, 0) rotateX(120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } .rollInDown { -webkit-animation-name: rollInDown; animation-name: rollInDown; } @-webkit-keyframes rollInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0) rotateX(-120deg); transform: translate3d(0, 100%, 0) rotateX(-120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes rollInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 100%, 0) rotateX(-120deg); transform: translate3d(0, 100%, 0) rotateX(-120deg); } to { opacity: 1; -webkit-transform: none; transform: none; } } .rollInUp { -webkit-animation-name: rollInUp; animation-name: rollInUp; } @-webkit-keyframes lightSpeedInRight { 0% { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedInRight { 0% { -webkit-transform: translate3d(-100%, 0, 0) skewX(-30deg); transform: translate3d(-100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedInRight { -webkit-animation-name: lightSpeedInRight; animation-name: lightSpeedInRight; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes lightSpeedInLeft { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } @keyframes lightSpeedInLeft { 0% { -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg); transform: translate3d(100%, 0, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedInLeft { -webkit-animation-name: lightSpeedInLeft; animation-name: lightSpeedInLeft; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @keyframes lightSpeedInDown { 0% { -webkit-transform: translate3d(0, -100%, 0) skewX(-30deg); transform: translate3d(0, -100%, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } @-webkit-keyframes lightSpeedInDown { 0% { -webkit-transform: translate3d(0, -100%, 0) skewX(-30deg); transform: translate3d(0, -100%, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedInDown { -webkit-animation-name: lightSpeedInDown; animation-name: lightSpeedInDown; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @keyframes lightSpeedInUp { 0% { -webkit-transform: translate3d(0, 100%, 0) skewX(-30deg); transform: translate3d(0, 100%, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } @-webkit-keyframes lightSpeedInUp { 0% { -webkit-transform: translate3d(0, 100%, 0) skewX(-30deg); transform: translate3d(0, 100%, 0) skewX(-30deg); opacity: 0; } 60% { -webkit-transform: skewX(20deg); transform: skewX(20deg); opacity: 1; } 80% { -webkit-transform: skewX(-5deg); transform: skewX(-5deg); opacity: 1; } to { -webkit-transform: none; transform: none; opacity: 1; } } .lightSpeedInUp { -webkit-animation-name: lightSpeedInUp; animation-name: lightSpeedInUp; -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-200px, 0, 0); transform: translate3d(-200px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translate3d(-200px, 0, 0); transform: translate3d(-200px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(200px, 0, 0); transform: translate3d(200px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translate3d(200px, 0, 0); transform: translate3d(200px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 200px, 0); transform: translate3d(0, 200px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translate3d(0, 200px, 0); transform: translate3d(0, 200px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInUp { -webkit-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -200px, 0); transform: translate3d(0, -200px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translate3d(0, -200px, 0); transform: translate3d(0, -200px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .fadeInDown { -webkit-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes opacityFadeInLeft { 0% { opacity: 1; -webkit-transform: translate3d(-200px, 0, 0); transform: translate3d(-200px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes opacityFadeInLeft { 0% { opacity: 1; -webkit-transform: translate3d(-200px, 0, 0); transform: translate3d(-200px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .opacityFadeInLeft { -webkit-animation-name: opacityFadeInLeft; animation-name: opacityFadeInLeft; } @-webkit-keyframes opacityFadeInRight { 0% { opacity: 1; -webkit-transform: translate3d(200px, 0, 0); transform: translate3d(200px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes opacityFadeInRight { 0% { opacity: 1; -webkit-transform: translate3d(200px, 0, 0); transform: translate3d(200px, 0, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .opacityFadeInRight { -webkit-animation-name: opacityFadeInRight; animation-name: opacityFadeInRight; } @-webkit-keyframes opacityFadeInUp { 0% { opacity: 1; -webkit-transform: translate3d(0, 200px, 0); transform: translate3d(0, 200px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes opacityFadeInUp { 0% { opacity: 1; -webkit-transform: translate3d(0, 200px, 0); transform: translate3d(0, 200px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .opacityFadeInUp { -webkit-animation-name: opacityFadeInUp; animation-name: opacityFadeInUp; } @-webkit-keyframes opacityFadeInDown { 0% { opacity: 1; -webkit-transform: translate3d(0, -200px, 0); transform: translate3d(0, -200px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } @keyframes opacityFadeInDown { 0% { opacity: 1; -webkit-transform: translate3d(0, -200px, 0); transform: translate3d(0, -200px, 0); } to { opacity: 1; -webkit-transform: none; transform: none; } } .opacityFadeInDown { -webkit-animation-name: opacityFadeInDown; animation-name: opacityFadeInDown; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } @keyframes fadeOutDown { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0); transform: translate3d(0, 100%, 0); } } .fadeOutDown { -webkit-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } @keyframes fadeOutLeft { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0); transform: translate3d(-100%, 0, 0); } } .fadeOutLeft { -webkit-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } @keyframes fadeOutRight { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0); transform: translate3d(100%, 0, 0); } } .fadeOutRight { -webkit-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } @keyframes fadeOutUp { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0); transform: translate3d(0, -100%, 0); } } .fadeOutUp { -webkit-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes swing { 20% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } to { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } .swing { -webkit-transform-origin: top center; transform-origin: top center; -webkit-animation-name: swing; animation-name: swing; } @-webkit-keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg); } to { -webkit-transform: none; transform: none; } } @keyframes wobble { 0% { -webkit-transform: none; transform: none; } 15% { -webkit-transform: translate3d(-25%, 0, 0) rotate(-5deg); transform: translate3d(-25%, 0, 0) rotate(-5deg); } 30% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg); } 45% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg); } 60% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg); } 75% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg); } to { -webkit-transform: none; transform: none; } } .wobble { -webkit-animation-name: wobble; animation-name: wobble; } @-webkit-keyframes rotateIn { 0% { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(1turn); } } @keyframes rotateIn { 0% { transform: rotate(0deg); } to { transform: rotate(1turn); } } .rotateIn { -webkit-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } @keyframes fadeOut { 0% { opacity: 1; } to { opacity: 0; } } .fadeOut { -webkit-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(-1turn); transform: perspective(400px) rotateY(-1turn); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg); transform: perspective(400px) translateZ(150px) rotateY(-190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg); transform: perspective(400px) translateZ(150px) rotateY(-170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } @keyframes flip { 0% { -webkit-transform: perspective(400px) rotateY(-1turn); transform: perspective(400px) rotateY(-1turn); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 40% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-190deg); transform: perspective(400px) translateZ(150px) rotateY(-190deg); -webkit-animation-timing-function: ease-out; animation-timing-function: ease-out; } 50% { -webkit-transform: perspective(400px) translateZ(150px) rotateY(-170deg); transform: perspective(400px) translateZ(150px) rotateY(-170deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 80% { -webkit-transform: perspective(400px) scale3d(0.95, 0.95, 0.95); transform: perspective(400px) scale3d(0.95, 0.95, 0.95); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } to { -webkit-transform: perspective(400px); transform: perspective(400px); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } } .animated.flip { -webkit-backface-visibility: visible; backface-visibility: visible; -webkit-animation-name: flip; animation-name: flip; } @-webkit-keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } to { opacity: 1; } } .fadeIn { -webkit-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } @keyframes zoomIn { 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 50% { opacity: 1; } } .zoomIn { -webkit-animation-name: zoomIn; animation-name: zoomIn; } @-webkit-keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } @keyframes zoomOut { 0% { opacity: 1; } 50% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } to { opacity: 0; } } .zoomOut { -webkit-animation-name: zoomOut; animation-name: zoomOut; } @-webkit-keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, to { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes bounceIn { 0%, 20%, 40%, 60%, 80%, to { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } 20% { -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } 40% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 60% { opacity: 1; -webkit-transform: scale3d(1.03, 1.03, 1.03); transform: scale3d(1.03, 1.03, 1.03); } 80% { -webkit-transform: scale3d(0.97, 0.97, 0.97); transform: scale3d(0.97, 0.97, 0.97); } to { opacity: 1; -webkit-transform: scaleX(1); transform: scaleX(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInLeft { 0%, 60%, 75%, 90%, to { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInLeft { 0%, 60%, 75%, 90%, to { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(-3000px, 0, 0); transform: translate3d(-3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(25px, 0, 0); transform: translate3d(25px, 0, 0); } 75% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 90% { -webkit-transform: translate3d(5px, 0, 0); transform: translate3d(5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0%, 60%, 75%, 90%, to { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInRight { 0%, 60%, 75%, 90%, to { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(3000px, 0, 0); transform: translate3d(3000px, 0, 0); } 60% { opacity: 1; -webkit-transform: translate3d(-25px, 0, 0); transform: translate3d(-25px, 0, 0); } 75% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } 90% { -webkit-transform: translate3d(-5px, 0, 0); transform: translate3d(-5px, 0, 0); } to { -webkit-transform: none; transform: none; } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0%, 60%, 75%, 90%, to { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -25px, 0); transform: translate3d(0, -25px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInUp { 0%, 60%, 75%, 90%, to { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, 3000px, 0); transform: translate3d(0, 3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, -25px, 0); transform: translate3d(0, -25px, 0); } 75% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 90% { -webkit-transform: translate3d(0, -5px, 0); transform: translate3d(0, -5px, 0); } to { -webkit-transform: none; transform: none; } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceInDown { 0%, 60%, 75%, 90%, to { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } @keyframes bounceInDown { 0%, 60%, 75%, 90%, to { transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1); } 0% { opacity: 0; -webkit-transform: translate3d(0, -3000px, 0); transform: translate3d(0, -3000px, 0); } 60% { opacity: 1; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); } 75% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 90% { -webkit-transform: translate3d(0, 5px, 0); transform: translate3d(0, 5px, 0); } to { -webkit-transform: none; transform: none; } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } @keyframes bounceOut { 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9); transform: scale3d(0.9, 0.9, 0.9); } 50%, 55% { opacity: 1; -webkit-transform: scale3d(1.1, 1.1, 1.1); transform: scale3d(1.1, 1.1, 1.1); } to { opacity: 0; -webkit-transform: scale3d(0.3, 0.3, 0.3); transform: scale3d(0.3, 0.3, 0.3); } } .bounceOut { -webkit-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } @keyframes bounceOutDown { 20% { -webkit-transform: translate3d(0, 10px, 0); transform: translate3d(0, 10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, -20px, 0); transform: translate3d(0, -20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, 2000px, 0); transform: translate3d(0, 2000px, 0); } } .bounceOutDown { -webkit-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } @keyframes bounceOutLeft { 20% { opacity: 1; -webkit-transform: translate3d(20px, 0, 0); transform: translate3d(20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(-2000px, 0, 0); transform: translate3d(-2000px, 0, 0); } } .bounceOutLeft { -webkit-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } @keyframes bounceOutRight { 20% { opacity: 1; -webkit-transform: translate3d(-20px, 0, 0); transform: translate3d(-20px, 0, 0); } to { opacity: 0; -webkit-transform: translate3d(2000px, 0, 0); transform: translate3d(2000px, 0, 0); } } .bounceOutRight { -webkit-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } @keyframes bounceOutUp { 20% { -webkit-transform: translate3d(0, -10px, 0); transform: translate3d(0, -10px, 0); } 40%, 45% { opacity: 1; -webkit-transform: translate3d(0, 20px, 0); transform: translate3d(0, 20px, 0); } to { opacity: 0; -webkit-transform: translate3d(0, -2000px, 0); transform: translate3d(0, -2000px, 0); } } .bounceOutUp { -webkit-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes rollOutRight { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg); } } @keyframes rollOutRight { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(100%, 0, 0) rotate(120deg); transform: translate3d(100%, 0, 0) rotate(120deg); } } .rollOutRight { -webkit-animation-name: rollOutRight; animation-name: rollOutRight; } @-webkit-keyframes rollOutLeft { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg); } } @keyframes rollOutLeft { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(-100%, 0, 0) rotate(-120deg); transform: translate3d(-100%, 0, 0) rotate(-120deg); } } .rollOutLeft { -webkit-animation-name: rollOutLeft; animation-name: rollOutLeft; } @-webkit-keyframes rollOutDown { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0) rotate(120deg); transform: translate3d(0, 100%, 0) rotate(120deg); } } @keyframes rollOutDown { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, 100%, 0) rotate(120deg); transform: translate3d(0, 100%, 0) rotate(120deg); } } .rollOutDown { -webkit-animation-name: rollOutDown; animation-name: rollOutDown; } @-webkit-keyframes rollOutUp { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0) rotate(-120deg); transform: translate3d(0, -100%, 0) rotate(-120deg); } } @keyframes rollOutUp { 0% { opacity: 1; } to { opacity: 0; -webkit-transform: translate3d(0, -100%, 0) rotate(-120deg); transform: translate3d(0, -100%, 0) rotate(-120deg); } } .rollOutUp { -webkit-animation-name: rollOutUp; animation-name: rollOutUp; } @-webkit-keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes rubberBand { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 30% { -webkit-transform: scale3d(1.25, 0.75, 1); transform: scale3d(1.25, 0.75, 1); } 40% { -webkit-transform: scale3d(0.75, 1.25, 1); transform: scale3d(0.75, 1.25, 1); } 50% { -webkit-transform: scale3d(1.15, 0.85, 1); transform: scale3d(1.15, 0.85, 1); } 65% { -webkit-transform: scale3d(0.95, 1.05, 1); transform: scale3d(0.95, 1.05, 1); } 75% { -webkit-transform: scale3d(1.05, 0.95, 1); transform: scale3d(1.05, 0.95, 1); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @-webkit-keyframes lightSpeedOutRight { 0% { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOutRight { 0% { opacity: 1; } to { -webkit-transform: translate3d(100%, 0, 0) skewX(30deg); transform: translate3d(100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOutRight { -webkit-animation-name: lightSpeedOutRight; animation-name: lightSpeedOutRight; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes lightSpeedOutLeft { 0% { opacity: 1; } to { -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; } } @keyframes lightSpeedOutLeft { 0% { opacity: 1; } to { -webkit-transform: translate3d(-100%, 0, 0) skewX(30deg); transform: translate3d(-100%, 0, 0) skewX(30deg); opacity: 0; } } .lightSpeedOutLeft { -webkit-animation-name: lightSpeedOutLeft; animation-name: lightSpeedOutLeft; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes lightSpeedOutDown { 0% { opacity: 1; } to { -webkit-transform: translate3d(0, 100%, 0) skewY(30deg); transform: translate3d(0, 100%, 0) skewY(30deg); opacity: 0; } } @keyframes lightSpeedOutDown { 0% { opacity: 1; } to { -webkit-transform: translate3d(0, 100%, 0) skewY(30deg); transform: translate3d(0, 100%, 0) skewY(30deg); opacity: 0; } } .lightSpeedOutDown { -webkit-animation-name: lightSpeedOutDown; animation-name: lightSpeedOutDown; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } @-webkit-keyframes lightSpeedOutUp { 0% { opacity: 1; } to { -webkit-transform: translate3d(0, -100%, 0) skewY(30deg); transform: translate3d(0, -100%, 0) skewY(30deg); opacity: 0; } } @keyframes lightSpeedOutUp { 0% { opacity: 1; } to { -webkit-transform: translate3d(0, -100%, 0) skewY(30deg); transform: translate3d(0, -100%, 0) skewY(30deg); opacity: 0; } } .lightSpeedOutUp { -webkit-animation-name: lightSpeedOutUp; animation-name: lightSpeedOutUp; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } .rubberBand { -webkit-animation-name: rubberBand; animation-name: rubberBand; } @-webkit-keyframes heartbeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.5); transform: scale(1.5); } to { -webkit-transform: scale(1); transform: scale(1); } } @keyframes heartbeat { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.5); transform: scale(1.5); } to { -webkit-transform: scale(1); transform: scale(1); } } .heartbeat { -webkit-animation-name: heartbeat; animation-name: heartbeat; } @-webkit-keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } @keyframes flipOutY { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateY(-15deg); transform: perspective(400px) rotateY(-15deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); opacity: 0; } } .flipOutY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipOutY; animation-name: flipOutY; -webkit-animation-duration: 0.75s; animation-duration: 0.75s; } @-webkit-keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInY { 0% { -webkit-transform: perspective(400px) rotateY(90deg); transform: perspective(400px) rotateY(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateY(-20deg); transform: perspective(400px) rotateY(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotateY(10deg); transform: perspective(400px) rotateY(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateY(-5deg); transform: perspective(400px) rotateY(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInY { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInY; animation-name: flipInY; } @-webkit-keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } @keyframes flipInX { 0% { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; opacity: 0; } 40% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; } 60% { -webkit-transform: perspective(400px) rotateX(10deg); transform: perspective(400px) rotateX(10deg); opacity: 1; } 80% { -webkit-transform: perspective(400px) rotateX(-5deg); transform: perspective(400px) rotateX(-5deg); } to { -webkit-transform: perspective(400px); transform: perspective(400px); } } .flipInX { -webkit-backface-visibility: visible !important; backface-visibility: visible !important; -webkit-animation-name: flipInX; animation-name: flipInX; } @-webkit-keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } @keyframes flipOutX { 0% { -webkit-transform: perspective(400px); transform: perspective(400px); } 30% { -webkit-transform: perspective(400px) rotateX(-20deg); transform: perspective(400px) rotateX(-20deg); opacity: 1; } to { -webkit-transform: perspective(400px) rotateX(90deg); transform: perspective(400px) rotateX(90deg); opacity: 0; } } .flipOutX { -webkit-animation-name: flipOutX; animation-name: flipOutX; -webkit-backface-visibility: visible !important; backface-visibility: visible !important; } @-webkit-keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes tada { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 10%, 20% { -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); } 30%, 50%, 70%, 90% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); } 40%, 60%, 80% { -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .tada { -webkit-animation-name: tada; animation-name: tada; } @-webkit-keyframes jello { 11.1% { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39062deg) skewY(0.39062deg); transform: skewX(0.39062deg) skewY(0.39062deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } to { -webkit-transform: none; transform: none; } } @keyframes jello { 11.1% { -webkit-transform: none; transform: none; } 22.2% { -webkit-transform: skewX(-12.5deg) skewY(-12.5deg); transform: skewX(-12.5deg) skewY(-12.5deg); } 33.3% { -webkit-transform: skewX(6.25deg) skewY(6.25deg); transform: skewX(6.25deg) skewY(6.25deg); } 44.4% { -webkit-transform: skewX(-3.125deg) skewY(-3.125deg); transform: skewX(-3.125deg) skewY(-3.125deg); } 55.5% { -webkit-transform: skewX(1.5625deg) skewY(1.5625deg); transform: skewX(1.5625deg) skewY(1.5625deg); } 66.6% { -webkit-transform: skewX(-0.78125deg) skewY(-0.78125deg); transform: skewX(-0.78125deg) skewY(-0.78125deg); } 77.7% { -webkit-transform: skewX(0.39062deg) skewY(0.39062deg); transform: skewX(0.39062deg) skewY(0.39062deg); } 88.8% { -webkit-transform: skewX(-0.19531deg) skewY(-0.19531deg); transform: skewX(-0.19531deg) skewY(-0.19531deg); } to { -webkit-transform: none; transform: none; } } .jello { -webkit-animation-name: jello; animation-name: jello; -webkit-transform-origin: center; transform-origin: center; } @-webkit-keyframes flash { 0%, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } @keyframes flash { 0%, 50%, to { opacity: 1; } 25%, 75% { opacity: 0; } } .flash { -webkit-animation-name: flash; animation-name: flash; } @-webkit-keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } @keyframes pulse { 0% { -webkit-transform: scaleX(1); transform: scaleX(1); } 50% { -webkit-transform: scale3d(1.05, 1.05, 1.05); transform: scale3d(1.05, 1.05, 1.05); } to { -webkit-transform: scaleX(1); transform: scaleX(1); } } .pulse { -webkit-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes scaleUp { 0% { -webkit-transform: scale(1); } to { -webkit-transform: scale(1.5); } } @keyframes scaleUp { 0% { transform: scale(1); } to { transform: scale(1.5); } } @-webkit-keyframes scaleDown { 0% { -webkit-transform: scale(1.5); } to { -webkit-transform: scale(1); } } @keyframes scaleDown { 0% { transform: scale(1.5); } to { transform: scale(1); } } @-webkit-keyframes blur { 0% { -webkit-filter: blur(0); } to { -webkit-filter: blur(8px); } } @keyframes blur { 0% { -webkit-filter: blur(0); } to { -webkit-filter: blur(8px); } } @-webkit-keyframes sharp { 0% { -webkit-filter: blur(8px); } to { -webkit-filter: blur(0); } } @keyframes sharp { 0% { -webkit-filter: blur(8px); } to { -webkit-filter: blur(0); } } @-webkit-keyframes particles { 0% { -webkit-filter: blur(2px); } to { -webkit-filter: blur(0); } } @keyframes particles { 0% { -webkit-filter: blur(2px); } to { -webkit-filter: blur(0); } } .wap-scene .u-arrow-bottom { transform: translateY(-10vh); } .wap-scene .temp-app-use, .wap-scene [ctype='298'] { display: none; } a { text-decoration: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0.35); } body { -webkit-touch-callout: none; } body * { text-shadow: none !important; } .clearfix:after { content: '.'; display: block; height: 0; visibility: hidden; clear: both; } .clearfix { zoom: 1; } img { vertical-align: middle; } .nr input, .nr textarea { resize: none; overflow: hidden; padding: 0; margin: 0; border-radius: 0; line-height: 120%; display: inline-block !important; } img { -webkit-user-select: none; -moz-user-select: none; } a:active, a:hover, a:link, a:visited { color: #08a1ef; text-decoration: none; } .main { width: 100%; height: 100%; margin: 0 auto; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; position: relative; overflow: hidden; } .temp-app-use { width: 165px; height: 42px; color: #fff !important; text-align: center; position: absolute; z-index: 200; bottom: 42px; left: 50%; margin-left: -82.5px; line-height: 42px; } .temp-app-use .temp-app-use-btn { height: 26px; line-height: 30px; } .temp-app-use-tip { background: linear-gradient(270deg, #4facfe, #1593ff); border-radius: 25px; } .loading { background: #48424f; width: 100%; height: 100%; position: absolute; z-index: 9999; top: 0; } .loadbox { display: block; position: relative; width: 70px; height: 70px; margin: 0 auto; margin-top: 50%; } .loadbg { width: 70px; height: 42px; background-image: url(./h5_view_2/images/logo-746df5.gif); } .loadbg, .loadbg2 { display: block; position: absolute; z-index: 1000; } .loadbg2 { left: 50%; transform: translate(-50%); } .loadbg2 img { width: 118px; } .loading-logo { display: block; position: relative; width: 118px; height: 118px; margin: 50% auto 0; } .logo-image { width: 100%; } .loading-tip { display: none; position: absolute; bottom: 40px; font-size: 16px; z-index: 9999; width: 200px; left: 50%; margin-left: -100px; text-align: center; color: #7986cb; } .iframe-html { overflow: hidden; } .iframe-html body { background: transparent; } .iframe-html .phone_panel { left: 50%; margin-left: -160px; } .iframe-phone { display: none; margin-right: 40px; } .iframe-phone .nr { width: 320px; height: 486px; } .iframe-phone__landscape--no-list { width: 486px; height: 320px; } .iframe-phone__landscape--no-list .abc-progress-bar, .iframe-phone__landscape--no-list .u-arrow-bottom { display: none !important; } .iframe-phone__landscape--no-list .nr { transform: rotate(-90deg); margin-top: -83px; margin-left: 83px; } .iframe-phone__landscape--no-list .nr .loading { width: 320px; } .iframe-phone.prelistmode_transverse { width: 486px; height: 486px; } .iframe-phone.prelistmode_transverse .abc-progress-bar, .iframe-phone.prelistmode_transverse .u-arrow-bottom { display: none !important; } .iframe-phone.prelistmode_transverse .nr { transform: rotate(-90deg); margin-top: -83px; margin-left: 83px; } .iframe-phone.prelistmode_transverse .nr .loading { width: 320px; } .iframe-phone.prelistmode_transverse .previewlist { width: 486px; height: 148px; position: relative; overflow: hidden; margin-top: -65px; } .iframe-phone.prelistmode_transverse .previewlist_ul { display: flex; } .iframe-phone.prelistmode_transverse .previewlist .preview_list_item { width: 132px; height: 200.5px; flex-shrink: 0; margin-left: 8px; position: relative; display: inline-block; margin-left: 78px; margin-top: -34px; cursor: pointer; } .iframe-phone.prelistmode_transverse .previewlist .preview_list_item:first-child { margin-left: 69px; } .iframe-phone.prelistmode_transverse .previewlist .preview_list_item section { transform: rotate(-90deg); margin-left: -35px; } .iframe-phone.prelistmode_vertical { width: 486px; height: 486px; } .iframe-phone.prelistmode_vertical .abc-progress-bar, .iframe-phone.prelistmode_vertical .u-arrow-bottom { display: none !important; } .iframe-phone.prelistmode_vertical .nr { float: right; } .iframe-phone.prelistmode_vertical .nr .loading { width: 320px; } .iframe-phone.prelistmode_vertical .previewlist { width: 149px; height: 486px; float: left; position: relative; overflow: hidden; } .iframe-phone.prelistmode_vertical .previewlist_ul { padding: 0; list-style: none; } .iframe-phone.prelistmode_vertical .previewlist_ul .preview_list_item { width: 132px; height: 200.5px; margin-top: 15px; cursor: pointer; } .iframe-phone.prelistmode_vertical .previewlist_ul .preview_list_item:first-child { margin-top: 0; } .iframe-phone.prelistmode_vertical .previewlist .iScrollVerticalScrollbar { margin-right: -1px; } .iframe_panel { width: 40px; height: 486px; background: #fff; position: fixed; right: 0; top: 0; border-right: 1px solid #ccd5db; } .iframe_panel .preview { position: relative; height: 70px; margin-top: 173px; } .iframe_panel .next { height: 73px; margin-bottom: 173px; } .iframe_panel .scroll_btn { width: 40px; height: 70px; display: block; text-align: center; line-height: 70px; color: #7b8893; } .iframe_panel .scroll_btn:hover { background-color: #f0f3f4; color: #7b8893; } .iframe_panel__landscape--no-list { height: 320px; } .iframe_panel__landscape--no-list .preview { margin-top: 88px; } .iframe_panel__landscape--no-list .next { margin-bottom: 88px; } .iframe_panel_prelistmode { height: 486px; background: #fff; position: fixed; right: 0; top: 0; } .iframe_panel_prelistmode .preview_prelistmode { position: relative; height: 70px; margin-top: 135px; } .iframe_panel_prelistmode .next_prelistmode { height: 73px; } .iframe_panel_prelistmode .page-tip-prelistmode { height: 68px; text-align: center; position: relative; } .iframe_panel_prelistmode .page-tip-prelistmode .prelistmode_pagenum { position: absolute; color: #333; top: 50%; left: 50%; transform: translate(-50%, -50%); } .iframe_panel_prelistmode .scroll_btn_prelistmode { display: block; text-align: center; color: #7b8893; margin: 0 auto; background-color: #f6f6f6; width: 30px; height: 72px; } .iframe_panel_prelistmode .scroll_btn_prelistmode .text_span { cursor: pointer; margin: 12px auto; display: inline-block; font-size: 14px; color: #666; width: 14px; } .iframe_panel_prelistmode.transverse_mode { height: 485px; } .iframe_panel2 { position: fixed; top: 0; right: 0; width: 40px; height: 100%; background: #fff; } .iframe_panel2 ul { position: relative; top: 50%; height: 200px; margin-top: -100px; } .iframe_panel2 ul li { margin: 10px 0 10px 6px; border: 1px solid #59c7f9; border-radius: 3px; height: 80px; box-sizing: border-box; font-size: 14px; color: #59c7f9; writing-mode: vertical-lr; -webkit-writing-mode: vertical-lr; text-align: center; line-height: 32px; display: block; cursor: pointer; } .iframe_panel2 ul li:hover { color: #fff; background: #59c7f9; } .zoomIn-change { animation: zoomIn 0.5s ease 0s 1 both; -webkit-animation: zoomIn 0.5s ease 0s 1 both; transform-origin: 100% 0; } #code { margin-left: 36px; width: 248px; height: 600px; float: right; display: flex; flex-flow: column; justify-content: center; } #code .code_panel { padding: 24px 20px 20px; width: 208px; height: 292px; background-color: #fff; border-radius: 8px; box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.1); box-sizing: content-box; } #code .code_panel .code_panel_top { font-size: 14px; height: 20px; color: #666; line-height: 20px; } #code .code_panel .code_panel_top .app #downApp { float: right; padding: 0 6px; border: 1px solid #e6ebed; border-radius: 4px; cursor: pointer; height: 18px; transition: all 0.25s ease; } #code .code_panel .code_panel_top .app #downApp:hover { color: #fff; background-color: #00beff; border: 1px solid #00beff; } #code .code_panel .code_panel_top .app #downAppView { background-color: #fff; padding: 10px; width: 228px; text-align: center; position: absolute; color: #666; right: 0; margin-top: 25px; display: none; } #code .code_panel .code_panel_top .app #downAppView h3 { text-align: left; padding-bottom: 20px; font-size: 14px; } #code .code_panel .code_panel_top .app #downAppView h3 a { float: right; } #code .code_panel #codeImg { margin: 12px 0; border: 1px solid #e6ebed; padding: 16px; height: 176px; width: 176px; box-sizing: content-box; } #code .code_panel #codeImg canvas { width: 176px; height: 176px; } #code .code_panel #view_share { text-align: center; font-size: 0; } #code .code_panel #view_share .share-icon { display: inline-block; height: 38px; width: 62px; border-radius: 3px; border: 1px solid #e6ebed; text-align: center; line-height: 38px; color: #959fb0; font-size: 25px; transition: all 0.25s ease; } #code .code_panel #view_share .share-icon.eqf-QQ:hover { color: #fff; background-color: #2c72ff; border: 1px solid #2c72ff; } #code .code_panel #view_share .share-icon.eqf-QQzone { margin: 0 8px; } #code .code_panel #view_share .share-icon.eqf-QQzone:hover { color: #fff; background-color: #ffb243; border: 1px solid #ffb243; } #code .code_panel #view_share .share-icon.eqf-weibo:hover { color: #fff; background-color: #ed2828; border: 1px solid #ed2828; } #code .btn_panel { margin-top: 12px; padding: 20px; background-color: #fff; border-radius: 8px; box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.1); display: block; } #code .btn_panel #view_reg { font-size: 14px; border-radius: 3px; height: 48px; line-height: 48px; text-align: center; background-color: #1261ff; color: #fff; transition: all 0.25s ease; } #code .btn_panel #view_reg:hover { background-color: #2c72ff; } #code .btn_panel #view_reg span { padding-left: 5px; } #code .btn_panel .view_reg { height: 46px !important; border: 1px solid #1261ff !important; color: #1261ff !important; background-color: #fff !important; transition: all 0.25s ease; } #code .btn_panel .view_reg a { color: #1261ff !important; } #code .btn_panel .view_reg:hover { background-color: #2c72ff !important; color: #fff !important; } #code .btn_panel .view_reg:hover a { color: #fff !important; } #code .btn_panel #advertisement_img { margin-top: 16px; } #code .btn_panel #advertisement_img img { width: 100%; height: 88px; } #code .btn_panel #sample_btn { margin-top: 16px; font-size: 14px; color: #fff; background-color: #1261ff; border-radius: 3px; height: 40px; line-height: 40px; text-align: center; cursor: pointer; transition: all 0.25s ease; } #code .btn_panel #sample_btn:hover { background-color: #2c72ff; } #code #down { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 450px; height: 600px; } #support { position: fixed; bottom: 20px; right: 20px; font-size: 30px; background-color: #fff; border-radius: 10px; padding: 8px; opacity: 0.8; box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.1); } #support a { display: block; } #support .new_logo_text { height: 22px; width: 124px; background: url(./h5_view_2/images/new_logo_text-df0ca9.png); background-size: 100% 100%; display: inline-block; } #support a img { border: 0; } body.pc { overflow: hidden; background-size: cover; background-position: 50% 50%; -webkit-user-select: none; user-select: none; } #view_panel { margin: -300px 0 0 -326px; min-width: 652px; } #view_panel, #view_panel__feishu { position: fixed; top: 50%; left: 50%; height: 600px; } #view_panel__feishu { transform: translate(-50%, -50%); } #recomment_container { position: absolute; transform: translateY(-50%); top: 50%; } #recomment_container #recommend_btn { height: 66px; padding: 15px 10px; width: 20px; color: #fff; position: absolute; margin: auto; display: inline-block; top: 0; bottom: 0; font-size: 14px; background-color: #ff296a; border-top-right-radius: 3px; border-bottom-right-radius: 3px; transition: all 0.25s ease; box-sizing: content-box; } #recomment_container #recommend_btn:hover { background-color: #fff; color: #111; cursor: pointer; } #recomment_container #recommend_content { float: left; background-color: #fff; border-bottom-right-radius: 8px; border-top-right-radius: 8px; display: block; box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.1); } #recomment_container #recommend_content ul { margin: 24px 17px 24px 16px; } #recomment_container #recommend_content ul li { margin-top: 12px; } #recomment_container #recommend_content ul li a { cursor: pointer; color: #666; } #recomment_container #recommend_content ul li a:hover { color: #00beff; } #recomment_container #recommend_content ul li a img { width: 80px; height: 80px; float: left; } #recomment_container #recommend_content ul li a span { display: inline-block; width: 132px; height: 80px; margin-left: 12px; border-bottom: 1px solid #e6ebed; font-size: 14px; white-space: normal; word-break: break-all; } #lampHide-btn { position: fixed; top: 16px; right: 16px; background-color: #fff; width: 40px; height: 40px; border-radius: 50%; font-size: 18px; display: flex; justify-content: center; align-items: center; cursor: pointer; transition: all 0.25s ease; } #lampHide-btn:hover { background-color: #2c72ff; color: #fff; } .phone_panel { float: right; } .phoneBox { padding-top: 45px; width: 336px; height: 609px; float: Left; background-image: url(./h5_view_2/images/H5-phone-new-logo-b013b2.png); background-repeat: no-repeat; border-radius: 38px; box-shadow: 2px 2px 20px rgba(0, 0, 0, 0.1); background-size: contain; } .phoneBox .nr { position: relative; cursor: pointer; height: 486px; overflow-x: hidden; overflow-y: hidden; -webkit-user-select: none; border-left: 8px solid #fff; border-right: 8px solid #fff; top: 42px; border-radius: 0 0 20px 20px; } .phone_menubar { height: 20px; } .scene_title_baner { position: absolute; top: 60px; color: #fff; width: 100%; } .scene_title_baner .scene_title { min-width: 20px; text-align: center; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; height: 18px; line-height: 18px; font-size: 13px; width: 188px; margin-left: 74px; } .scene_title_phone { height: 20px; border-left: 4px solid #f6f6f6; border-right: 4px solid #f6f6f6; } .noAd_qrcode { top: 84px; left: 328px; background: #fefcfd; box-shadow: 0 1px 2px 0 rgba(195, 219, 251, 0.16); } .noAd_qrcode, .noAd_qrcode .qrcode_box { width: 40px; height: 40px; position: relative; } .noAd_qrcode .qrcode_box:hover { color: #1261ff; } .noAd_qrcode .qrcode_box .eqf-QRcode { font-size: 20px; color: #666; position: absolute; top: 10px; left: 10px; } .noAd_qrcode .qrcode_box:hover .share_box { display: block; left: 54px; } .noAd_qrcode .qrcode_box:hover .share_box:before { content: ''; border: 6px solid #fff; border-color: transparent #fff transparent transparent; position: absolute; top: 14px; left: -12px; } .noAd_qrcode .qrcode_box:hover .qrcode-svg { fill: #1261ff; } .noAd_qrcode .qrcode_box .qrcode-svg { position: absolute; left: 10px; top: 10px; width: 20px; height: 20px; } .noAd_qrcode .share_box { display: none; position: absolute; width: 204px; height: 280px; background: #fff; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08); border-radius: 6px; } .noAd_qrcode .share_box #codeImgNoAd { margin-left: 24px; } .noAd_qrcode .share_box p { margin: 24px 0 16px 24px; font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #666; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); } .noAd_qrcode .share_box .share_row { margin: 16px 24px; display: flex; justify-content: space-around; } .noAd_qrcode .share_box .share_row_icon { width: 24px; height: 24px; } .ctrl_panel { float: left; display: flex; flex-flow: column; justify-content: center; height: 600px; } .ctrl_panel a { transition: all 0.25s ease; box-sizing: content-box; } .ctrl_panel__landscape { flex-flow: row; height: 60px; width: 100%; margin-top: 5px; } .pre_btn { margin-bottom: 20px; } .next_btn, .pre_btn { display: block; } .btn_scroll { cursor: pointer; width: 24px; height: 76px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; left: 50%; background: #fff; top: 47px; font-size: 14px; color: #3e4858; padding: 20px 8px 0; text-align: center; } .btn_scroll__landscape { width: 76px; height: 24px; padding: 8px; border-radius: 3px; line-height: 24px; } .btn_scroll__landscape.pre_btn { margin-right: 4px; } .ctrl_panel a:hover { color: #f6f9fa; background-color: #08a1ef; } .onlyPhone { margin: -300px 0 0 -326px !important; } .onlyPhone, .view-toast-box { display: flex; justify-content: center; } .view-toast-box { position: fixed; z-index: 2000; top: 80px; left: 50%; transform: translate(-50%, -50%); flex-direction: row; align-items: center; height: 52px; padding: 0 16px; box-shadow: 0 0 8px rgba(0, 0, 0, 0.15); background-color: #fff; font-size: 18px; border-radius: 3px; color: #333; overflow: hidden; } .pop-up-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 88888; text-align: center; } .pop-up-box .pop-up-form { width: 280px; font-size: 16px; position: absolute; top: 50%; left: 50%; margin-left: -140px; margin-top: -87px; background-color: #fff; border-radius: 6px; overflow: hidden; } .pop-up-box .pop-up-form .pop-up-content { width: 240px; padding: 20px; display: table; box-sizing: content-box; } .pop-up-box .pop-up-form .pop-up-content .pop-up-msg { display: table-cell; } .pop-up-box .pop-up-form .pop-up-btn { width: 280px; background-color: #56c6ff; line-height: 40px; height: 40px; } .pop-up-box .pop-up-form .pop-up-btn .pop-up-btn-close { color: #fff; } .pop-up-box .pop-share-form { width: 277px; font-size: 16px; position: absolute; top: 20%; left: 50%; margin-left: -135px; margin-top: -87px; overflow: hidden; } .pop-up-box .pop-share-form .pop-share-content { width: 277px; height: 420px; margin-bottom: 10px; } .pop-up-box .pop-share-form .pop-share-btn { color: #fff; font-size: 30px; } .pop-up-box .pop-yaoyiyao-form { width: 270px; height: 362px; background: #fff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.08); border-radius: 8px; font-size: 16px; position: absolute; top: 28%; left: 54%; margin-left: -150px; margin-top: -87px; overflow: hidden; } .pop-up-box .pop-yaoyiyao-form .pop-yaoyiyao-content { width: 270px; height: 362px; background-color: #fff; margin-bottom: 10px; } .pop-up-box .pop-yaoyiyao-form .pop-yaoyiyao-content img { margin-top: 20px; } .pop-up-box .pop-yaoyiyao-form .pop-yaoyiyao-content .pop-info { margin: 24px 16px; color: #333; font-size: 16px; font-weight: 600; height: 60px; } .pop-up-box .pop-yaoyiyao-form .pop-yaoyiyao-btn { color: #1261ff; font-size: 16px; height: 48px; line-height: 48px; border-top: 1px solid #e6ebed; border-radius: 0 0 8px 8px; } .comp-icon { position: absolute; top: 0; right: 0; background: #1261ff; width: 20px; height: 20px; padding: 1px 0 0 2px; font-size: 18px; color: #fff; } .item-comp-hover.evaluate-hover, .item-comp-hover:hover { outline: 1px dashed #a3afb7; } .animTextCharPlace { display: inline-block; } .animTextCharPlace.animHidden { opacity: 0; } .animTextCharPlace.animTextChar { opacity: 1; animation-duration: 1s; animation-fill-mode: both; } .animTextCharPlace.hasNotation { display: inline-block; } .animTextCharPlace.safari { vertical-align: middle; } .animTextCharPlace.underline { text-decoration: underline; } .animTextCharPlace.line-through { text-decoration: line-through; } .animTextCharPlace.line-through.underline { text-decoration: line-through underline; } .user-info-wrapper { position: absolute; box-sizing: border-box; right: 14px; bottom: 174px; width: 36px; height: 36px; z-index: 200; text-align: center; background-color: #efefef; border-radius: 50%; } .user-info-wrapper .user-info-logo { width: 100%; height: 100%; border: 2px solid #fff; border-radius: 50%; overflow: hidden; box-sizing: border-box; } .user-info-wrapper .user-info-follow { position: relative; font-size: 16px; margin-top: -6px; display: block; color: #1261ff; } .user-info-wrapper .user-info-follow-bg { position: absolute; border-radius: 50%; width: 12px; height: 12px; background-color: #fff; left: 50%; bottom: -8px; transform: translateX(-50%); } .gift-info-wrapper { position: absolute; box-sizing: border-box; right: 0; bottom: 43px; width: 84px; z-index: 200; text-align: center; } .gift-info-wrapper .gift-info-logo { width: 100%; overflow: hidden; box-sizing: border-box; } .gift-info-wrapper .gift-info-follow { position: relative; display: inline-block; width: 84px; height: 27px; line-height: 22px; text-align: center; font-size: 14px; color: #fff; background-image: url(./h5_view_2/images/gift-des-eaaa9e.png); background-size: 100%; font-weight: 600; } .gift-info-anim-wobble { -webkit-animation: wobble 4s ease 0.5s 1 normal both running; animation: wobble 4s ease 0.5s 1 normal both running; } @-webkit-keyframes wobble { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 10% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg); } 20% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg); } 30% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg); } 40% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg); } 50% { -webkit-transform: translateZ(0); transform: translateZ(0); } 75% { -webkit-transform: scale(1.5); transform: scale(1.5); } 85% { -webkit-transform: scale(1); transform: scale(1); } 95% { -webkit-transform: scale(1.2); transform: scale(1.2); } to { transform: scale(1); } } @keyframes wobble { 0% { -webkit-transform: translateZ(0); transform: translateZ(0); } 10% { -webkit-transform: translate3d(20%, 0, 0) rotate(3deg); transform: translate3d(20%, 0, 0) rotate(3deg); } 20% { -webkit-transform: translate3d(-15%, 0, 0) rotate(-3deg); transform: translate3d(-15%, 0, 0) rotate(-3deg); } 30% { -webkit-transform: translate3d(10%, 0, 0) rotate(2deg); transform: translate3d(10%, 0, 0) rotate(2deg); } 40% { -webkit-transform: translate3d(-5%, 0, 0) rotate(-1deg); transform: translate3d(-5%, 0, 0) rotate(-1deg); } 50% { -webkit-transform: translateZ(0); transform: translateZ(0); } 75% { -webkit-transform: scale(1.5); transform: scale(1.5); } 85% { -webkit-transform: scale(1); transform: scale(1); } 95% { -webkit-transform: scale(1.2); transform: scale(1.2); } to { transform: scale(1); } } .verifyCode { display: none; background-color: #48424f; width: 100%; height: 100%; position: absolute; z-index: 9998; top: 0; } .verifyCode .container { position: absolute; top: 50%; width: 265px; left: 50%; margin: -215px auto 0 -133px; text-align: center; } .verifyCode .container .scene-cover { display: inline-block; width: 100%; padding-bottom: 15px; } .verifyCode .container .scene-cover .cover-img { width: 100px; height: 100px; border-radius: 10px; -webkit-animation: flipInY 2s ease 0s 1 both; animation: flipInY 2s ease 0s 1 both; } .verifyCode .container .scene-name { font-size: 18px; height: 20px; margin-bottom: 15px; color: #b2aeba; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .verifyCode .container .confirm-password { position: relative; } .verifyCode .container .verify-label { display: block; font-size: 14px; margin-bottom: 5px; color: #b2aeba; } .verifyCode .container .verify-tips { margin-bottom: 10px; } .verifyCode .container .verify-tips ul > li { display: inline-block; width: 6px; height: 6px; border-radius: 5px; border: 1px solid #ccc; margin-right: 10px; } .verifyCode .container .verify-tips ul > li.active { background-color: #b2aeba; } .verifyCode .container .verify-tips ul > li:last-child { margin-right: 0; } @-webkit-keyframes shake { 0%, to { -webkit-transform: translateZ(0); transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } @keyframes shake { 0%, to { -webkit-transform: translateZ(0); transform: translateZ(0); } 10%, 30%, 50%, 70%, 90% { -webkit-transform: translate3d(-10px, 0, 0); transform: translate3d(-10px, 0, 0); } 20%, 40%, 60%, 80% { -webkit-transform: translate3d(10px, 0, 0); transform: translate3d(10px, 0, 0); } } .shake { -webkit-animation-name: shake; animation-name: shake; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .verifyCode .container .password-numbers { text-align: center; } .verifyCode .container .password-numbers span { display: inline-block; color: #fff; width: 46px; height: 46px; line-height: 46px; border-radius: 25px; border: 1px solid #ccc; text-align: center; vertical-align: middle; font-size: 32px; margin-right: 29px; margin-bottom: 10px; } .verifyCode .container .password-numbers span:nth-child(3n) { margin-right: 0; } .verifyCode .container .password-numbers span:last-child { margin-left: 29px; } .verifyCode .container .password-numbers span.active { background-color: #b2aeba; } .verifyCode .container .password-operation { position: relative; } .verifyCode .container .password-operation .btn-cancel, .verifyCode .container .password-operation .btn-clear { position: absolute; top: -25px; display: inline-block; width: 50px; height: 20px; line-height: 20px; color: #b2aeba; font-size: 14px; } .verifyCode .container .password-operation .btn-clear { left: 29px; } .verifyCode .container .password-operation .btn-cancel { right: 29px; } .bottom-logo { background: -moz-linear-gradient(top, #00a2ec, #87d94f); position: absolute; left: 9px; top: 11px; } .logo-shadow { background: rgba(0, 0, 0, 0.4); width: 155px; height: 155px; top: -2px; left: 7px; position: absolute; } .logo-shadow1 { background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.4), rgba(70, 70, 70, 0)); } .edit_wrapper { height: 100%; width: 100%; background-position: 50% 50%; background-size: cover; } .edit_wrapper section.layer { backface-visibility: hidden; -webkit-backface-visibility: hidden; } .edit_area { position: absolute; top: 0; text-align: left; width: 320px; height: 486px; background-repeat: no-repeat; background-size: 100% 100%; } .edit_area .element { min-width: 1px; min-height: 1px; color: inherit; } .edit_area .item-group, .edit_area .svg-element { position: absolute; } .edit_area .item-group .group-box, .edit_area .item-group .group-box ul { width: 100%; height: 100%; } .edit_area .item-group.evaluate-hover { outline: 1px dashed #a3afb7; } .edit_area .item-group li, .edit_area > li { color: #676767; line-height: 1; background: none; position: absolute; list-style: none !important; margin: 0 !important; padding: 0; transition: padding 0.5s; min-height: 1px; min-width: 1px; width: 100%; -webkit-user-select: none; } .edit_area .item-group li *, .edit_area > li * { box-sizing: border-box; -moz-box-sizing: border-box; } .edit_area .item-group li .element-box, .edit_area > li .element-box { overflow: hidden; } .edit_area .comp-replace-icon:after { content: '\6279'; position: absolute; top: 0; right: 0; color: #fff; width: 18px; height: 18px; font-size: 12px; background-color: #0094fa; line-height: 18px; text-align: center; font-family: Microsoft Yahei; } .m-img { width: 100%; height: 100%; position: relative; } .z-current { opacity: 1; } .main-page { border: 0; position: absolute; width: 100%; height: 100%; background-position: top; background-size: cover; box-sizing: border-box; -moz-box-sizing: border-box; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; z-index: 0; display: none; -webkit-transform-origin: center center; background: #f3f3f3; } .main-page.z-current { z-index: 1; display: inline-block; } .main-page.z-active { z-index: 2; display: block; } .main-page.z-active.special-zIndex { z-index: 0; display: block; } .m-page { overflow: hidden; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: #fff; } .m-page.show { z-index: 10; display: block; } .m-page.hide { z-index: 5; display: none; } .m-page.active { z-index: 15; display: block; } .input-mask-page { border: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-position: top; background-size: cover; box-sizing: border-box; -moz-box-sizing: border-box; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; z-index: 8888; display: inline-block; -webkit-transform-origin: center center; transform-origin: center center; background-color: rgba(0, 0, 0, 0.8); overflow-y: scroll; } .input-mask-page__btn { width: 100px; text-align: center; position: absolute; top: 300px; z-index: 1000; height: 40px; line-height: 40px; border-radius: 20px; margin-bottom: 15px; left: 50%; transform: translate(-50%); background-color: #59c7f9; color: #fff; } .fade-out { opacity: 0; animation-name: fadeOutMockDialog; animation-duration: 1s; animation-timing-function: linear; animation-fill-mode: both; } @keyframes fadeOutMockDialog { 0% { opacity: 0; } to { opacity: 1; } } .mock-dialog-space { width: 320px; min-height: 544px; background: #f5f5ff; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05); position: absolute; left: 50%; top: 0; transform: translate(-50%); } .mock-dialog-space .head { height: 44px; line-height: 44px; display: flex; justify-content: space-between; color: #000; font-size: 14px; font-weight: 500; padding: 0 10px; } .mock-dialog-space .head .back, .mock-dialog-space .head .more { font-size: 24px; } .mock-dialog-space .vip .vip-tag { position: absolute; top: -7px; right: -32px; border-bottom: 50px solid #000; transform: rotate(45deg); border-left: 50px solid transparent; border-right: 50px solid transparent; z-index: 1; } .mock-dialog-space .vip .vip-tag:before { content: '\4F1A\5458\98CE\683C'; color: #e1ae84; position: absolute; width: 54px; text-align: center; font-size: 12px; left: -27px; bottom: -42px; } .mock-dialog-space .vip .vip-tips { position: absolute; top: 0; right: -182px; background: #fff; width: 170px; height: 112px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08); border-radius: 3px; padding: 16px; text-align: center; } .mock-dialog-space .vip .vip-tips .arrow { display: block; width: 6px; height: 12px; border: 6px solid #fff; border-top: 6px solid transparent; border-left: 6px solid transparent; border-bottom: 6px solid transparent; position: absolute; left: -12px; top: 20px; } .mock-dialog-space .vip .vip-tips .text { font-size: 14px; color: #333; padding-top: 8px; } .mock-dialog-space .vip .vip-tips button { width: 130px; height: 32px; background: linear-gradient(136deg, #ffe0b8, #e2aa62); border-radius: 16px; color: #673416; margin-top: 20px; border: none; } .mock-dialog-space .add { display: flex; justify-content: space-between; margin: 2px 24px; } .mock-dialog-space .add > div { width: 48px; font-size: 12px; border-radius: 3px; font-weight: 400; height: 24px; line-height: 28px; color: #666; padding: 6px; border: 1px solid #ccd5db; position: relative; cursor: pointer; } .mock-dialog-space .add > div:last-child { width: 72px; } .mock-dialog-space .add > div:hover { background: #1261ff; color: #fff; border: 1px solid #1261ff; } .mock-dialog-space .add > div.grey { color: #ccd5db; cursor: not-allowed; } .mock-dialog-space .add > div.grey:hover { background: #add9ff; color: #fff; border: 1px solid #add9ff; } .mock-dialog-space .add > div em { position: absolute; top: 50%; transform: translateY(-50%); left: 6px; } .mock-dialog-space .add > div span { position: absolute; top: 50%; transform: translateY(-50%); right: 6px; } .mock-dialog-space .mock-content .message-item { min-height: 36px; position: relative; border-bottom: 1px solid transparent; } .mock-dialog-space .mock-content .message-item .other-sender { padding-bottom: 16px; position: relative; overflow: auto; } .mock-dialog-space .mock-content .message-item .other-sender .time { text-align: center; color: #999; font-size: 12px; line-height: 12px; margin-bottom: 0; } .mock-dialog-space .mock-content .message-item .other-sender .nickname { margin-left: 57px; font-size: 12px; line-height: 12px; color: #999; position: absolute; } .mock-dialog-space .mock-content .message-item .other-sender .nickname.head-hide { margin-left: 25px; } .mock-dialog-space .mock-content .message-item .other-sender .text-message { background: #fff; font-size: 14px; color: #222; border-radius: 3px; max-width: 215px; float: left; margin-bottom: 0; margin-top: 8px; margin-left: 57px; padding: 8px 12px; position: relative; } .mock-dialog-space .mock-content .message-item .other-sender .text-message.head-hide { margin-left: 25px; } .mock-dialog-space .mock-content .message-item .other-sender .text-message.nickname-show { margin-top: 14px; } .mock-dialog-space .mock-content .message-item .other-sender .text-message:before { content: ''; width: 10px; height: 10px; background: #fff; float: left; transform: rotate(45deg); margin-top: 4px; margin-left: -15px; top: 12px; } .mock-dialog-space .mock-content .message-item .other-sender .text-message .read-type { display: block; width: 12px; height: 12px; position: absolute; left: unset; bottom: 4px; right: -20px; font-size: 15px; color: #bfbfbf; } .mock-dialog-space .mock-content .message-item .other-sender .text-message .not-read { border: 1.5px solid #1261ff; border-radius: 50%; } .mock-dialog-space .mock-content .message-item .other-sender .mock-head { width: 36px; height: 36px; display: inline-block; position: absolute; left: 12px; } .mock-dialog-space .mock-content .message-item .other-sender .mock-head img { width: 36px; height: 36px; margin-top: 6px; } .mock-dialog-space .mock-content .message-item .other-sender.mine .nickname { margin-right: 57px; right: 0; } .mock-dialog-space .mock-content .message-item .other-sender.mine .nickname.head-hide { margin-right: 20px; } .mock-dialog-space .mock-content .message-item .other-sender.mine .text-message { margin-right: 57px; float: right; background: #95ec69; } .mock-dialog-space .mock-content .message-item .other-sender.mine .text-message.head-hide { margin-right: 20px; } .mock-dialog-space .mock-content .message-item .other-sender.mine .text-message:before { background: #95ec69; float: right; margin-right: -15px; } .mock-dialog-space .mock-content .message-item .other-sender.mine .text-message .read-type { left: -20px; bottom: 4px; } .mock-dialog-space .mock-content .message-item .other-sender.mine .mock-head { left: unset; right: 12px; } .mock-dialog-space .mock-content .message-item:hover .mask { display: block; } .mock-dialog-space .mock-content .message-item .mask { background: rgba(0, 0, 0, 0.16); cursor: move; width: 100%; height: calc(100% + 16px); position: absolute; top: -16px; left: 0; display: none; } .mock-dialog-space .mock-content .message-item .mask .drag { display: inline-block; width: 120px; height: 24px; line-height: 24px; text-align: center; font-size: 12px; color: #fff; background: rgba(0, 0, 0, 0.6); border-radius: 12px; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); } .mock-dialog-space .mock-content .message-item .mask .mask-tool { position: absolute; top: -25px; right: 0; } .mock-dialog-space .mock-content .message-item .mask .mask-tool span { cursor: pointer; background: rgba(0, 0, 0, 0.9); color: #fff; display: inline-block; width: 40px; height: 24px; line-height: 24px; font-size: 12px; padding: 0 8px; border-radius: 3px; text-align: center; } .mock-dialog-space .mock-content .message-item .mask .mask-tool span:hover { background: rgba(0, 0, 0, 0.7); } .mock-dialog-space .mock-content .message-item .mask .add { position: absolute; bottom: -29px; right: 0; z-index: 10; margin-top: 5px; width: 272px; } .mock-dialog-space .mock-content .message-item .mask .add > div { background: #1261ff; color: #fff; border: 1px solid #1261ff; } .mock-dialog-space .mock-content .message-item .mask .add > div:hover { background: #2c72ff; color: #fff; border: 1px solid #2c72ff; } .mock-dialog-space .mock-content .message-item .mask .add > div.grey, .mock-dialog-space .mock-content .message-item .mask .add > div.grey:hover { background: #add9ff; color: #fff; border: 1px solid #add9ff; } .mock-dialog-space .footer { width: 320px; height: 49px; line-height: 49px; padding: 0 13px; display: flex; justify-content: space-between; border-top: 0.5px solid rgba(0, 0, 0, 0.1); position: absolute; bottom: 0; font-size: 22px; color: #000; box-sizing: border-box; } .mock-dialog-space .footer .input-area { width: 194px; height: 36px; background: #fff; border-radius: 4px; margin-top: 6px; } .mock-dialog-space .footer em { line-height: 48px; } .main-page .mock-dialog-space { left: 0; } .mock-dialog-space.style-4 { background: #dde9ff; } .mock-dialog-space.style-4 .head { color: #000; } .mock-dialog-space.style-4 .mock-content .message-item .other-sender .time span { color: #fff; background: #c4d6f7; border-radius: 4px; padding: 2px 10px; line-height: 22px; } .mock-dialog-space.style-4 .mock-content .message-item .other-sender .mock-head img { border-radius: 4px; border: 1px solid #000; box-shadow: -2px 2px 0 #000; } .mock-dialog-space.style-4 .mock-content .message-item .other-sender .text-message { background: #fff; border: 1px solid #fff; border-radius: 3px; color: #000; box-shadow: -1px 2px 1px #000; border: 1px solid #000 !important; } .mock-dialog-space.style-4 .mock-content .message-item .other-sender .text-message:before { background: #fff; box-shadow: -1px 3px 1px #000; } .mock-dialog-space.style-4 .mock-content .message-item .other-sender .text-message:after { content: ''; position: absolute; right: 4px; bottom: 4px; height: calc(100% - 8px); width: calc(100% - 8px); border: 1px dashed #000; } .mock-dialog-space.style-4 .mock-content .message-item .other-sender.mine .mock-head img { box-shadow: 2px 2px 0 #000; } .mock-dialog-space.style-4 .mock-content .message-item .other-sender.mine .text-message { background: #f7e392; border: 1px solid #fff; border-radius: 3px; color: #000; box-shadow: 3px 3px 1px #000; border: 1px solid #000 !important; } .mock-dialog-space.style-4 .mock-content .message-item .other-sender.mine .text-message:before { background: #f7e392; box-shadow: 4px -2px 1px #000; } .mock-dialog-space.style-4 .mock-content .message-item .other-sender.mine .text-message .read-type { left: -25px; color: #bfbfbf; } .mock-dialog-space.style-4 .mock-content .message-item .other-sender.mine .text-message .not-read { border: 1.5px solid #222; } .mock-dialog-space.style-4 .mock-content .message-item .other-sender.mine .text-message:after { content: ''; position: absolute; right: 4px; bottom: 4px; height: calc(100% - 8px); width: calc(100% - 8px); border: 1px dashed #000; } .mock-dialog-space.style-4 .add > div, .mock-dialog-space.style-4 .footer { color: #000; } .mock-dialog-space.style-7 { background: #af001a; } .mock-dialog-space.style-7 .head { color: #fff; } .mock-dialog-space.style-7 .mock-content .message-item .other-sender .time span { color: #fff; background: none; } .mock-dialog-space.style-7 .mock-content .message-item .other-sender .mock-head img { border-radius: 50%; border: none; box-shadow: none; } .mock-dialog-space.style-7 .mock-content .message-item .other-sender .text-message { background: #fff; border: none; border-radius: 18px; color: #a70008; } .mock-dialog-space.style-7 .mock-content .message-item .other-sender.mine .text-message, .mock-dialog-space.style-7 .mock-content .message-item .other-sender.mine .text-message:before { background: #f69f9f; } .mock-dialog-space.style-7 .mock-content .message-item .other-sender.mine .text-message .read-type { left: -25px; } .mock-dialog-space.style-7 .mock-content .message-item .other-sender.mine .text-message .not-read { border: 1.5px solid #fff; } .mock-dialog-space.style-7 .mock-content .message-item .other-sender.mine .text-message:after { content: ''; background: url(./h5_view_2/images/hunli-1-082e90.png); position: absolute; left: -10px; top: -10px; width: 42px; height: 49px; z-index: 10; background-size: contain; } .mock-dialog-space.style-7 .add > div { color: #fff; } .mock-dialog-space.style-7 .footer { color: #a70008; background: linear-gradient(180deg, #fdbdbd, #f69f9f); } .voice-assistant-space { width: 320px; box-sizing: border-box; min-height: 544px; color: #fff; background-color: #333; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.05); position: absolute; left: 0; top: 0; } .voice-assistant-space .voice-space { width: 100%; } .voice-assistant-space .voice-space .voice-space-question { padding: 24px 16px 0 64px; width: 100%; box-sizing: border-box; text-align: right; font-size: 16px; word-break: break-all; font-weight: 500; color: #fff; line-height: 22px; } .voice-assistant-space .voice-space .voice-space-answer { padding: 24px 64px 0 16px; width: 100%; box-sizing: border-box; font-size: 16px; word-break: break-all; font-weight: 500; color: #fff; line-height: 22px; margin-bottom: 10px; } .voice-assistant-space .margin-Style { margin-top: 36px; } .finger_background { position: absolute; top: 0; left: 0; z-index: 1000; background-size: cover !important; } .finger_background__landscape_bg { position: absolute; transform: rotate(90deg); background-size: cover; background-repeat: no-repeat; background-position: 50% 50%; } .finger_background .finger_div { width: 200px; height: 200px; margin-left: -100px; margin-top: -100px; z-index: 1000; text-align: center; } .finger_background .finger_div, .finger_background .finger_zw { position: absolute; left: 50%; top: 50%; -webkit-touch-callout: none; -webkit-user-select: none; } .finger_background .finger_zw { width: 140px; margin-left: -70px; margin-top: -70px; } .finger_background .finger_line { -webkit-touch-callout: none; -webkit-user-select: none; display: none; width: 180px; position: absolute; left: 50%; top: 50%; margin-left: -90px; margin-top: 70px; } .finger_background .finger_info { color: #fff; position: absolute; top: 130px; left: 0; width: 320px; text-align: center; font-size: 14px; } .finger_background .finger_info__landscape { transform: rotate(90deg) translateZ(0); top: 238px !important; left: 92px !important; } .pageEffect-scratch .scratch-cas { z-index: 668 !important; width: 100%; height: 100%; opacity: 1; -webkit-transition: opacity 0.5s; -ms-transition: opacity 0.5s; -moz-transition: opacity 0.5s; position: absolute; top: 0; left: 0; } .pageEffect-scratch .tip { z-index: 10000; font-size: 24px; position: absolute; width: 180px; top: 320px; text-align: center; background-color: #000; opacity: 0.8; color: #fff; line-height: 50px; border-radius: 10px; filter: alpha(opacity=80); left: 50%; margin-left: -90px; word-wrap: break-word; } .pageEffect-scratch .tip__landscape { transform: rotate(90deg) translateZ(0); -webkit-transform: rotate(90deg) translateZ(0); top: 180px; left: 100px; } @keyframes gradientFadeOutLeft { 0% { opacity: 1; transform: translateX(0) scaleX(2); } to { opacity: 0.1; transform: translateX(190%) scaleX(2); } } @-webkit-keyframes gradientFadeOutLeft { 0% { -webkit-transform: translateX(0) scaleX(2); } to { opacity: 0.1; -webkit-transform: translateX(190%) scaleX(2); } } @keyframes gradientFadeOutRight { 0% { transform: translateX(0) scaleX(2); } to { opacity: 0.1; transform: translateX(-190%) scaleX(2); } } @-webkit-keyframes gradientFadeOutRight { 0% { -webkit-transform: translateX(0) scaleX(2); } to { opacity: 0.1; -webkit-transform: translateX(-190%) scaleX(2); } } @keyframes gradientFadeOutBottom { 0% { transform: translateY(0) scaleY(2); } to { opacity: 0.1; transform: translateY(-190%) scaleY(2); } } @-webkit-keyframes gradientFadeOutBottom { 0% { -webkit-transform: translateY(0) scaleY(2); } to { opacity: 0.1; -webkit-transform: translateY(-190%) scaleY(2); } } @keyframes gradientFadeOutTop { 0% { transform: translateY(0) scaleY(2); } to { opacity: 0.1; transform: translateY(190%) scaleY(2); } } @-webkit-keyframes gradientFadeOutTop { 0% { -webkit-transform: translateY(0) scaleY(2); } to { opacity: 0.1; -webkit-transform: translateY(190%) scaleY(2); } } @keyframes gradientScale { 0% { transform: scale(1); } 50% { transform: scale(0.6); } to { transform: scale(1); } } @-webkit-keyframes gradientScale { 0% { -webkit-transform: scale(1); } 50% { -webkit-transform: scale(0.6); } to { -webkit-transform: scale(1); } } .gradient-tip { pointer-events: none; position: absolute; top: 50%; left: 0; right: 0; bottom: 0; margin-top: -30px; z-index: 5; color: #fff; text-align: center; cursor: pointer; } .gradient-tip p { padding-top: 15px; font-size: 16px; } .gradient-tip img { animation: gradientScale 2s linear infinite; -webkit-animation: gradientScale 2s linear infinite; } .gradient-cover { width: 100%; height: 100%; position: absolute; z-index: 4; } .glassEffect-cover { width: 100%; height: 100%; position: absolute; z-index: 4; } .glassEffect-cover .glassCanvas { position: absolute; width: 100%; height: 100%; left: 0; } .glassEffect-cover .glass-tip { pointer-events: none; position: absolute; top: 50%; left: 0; right: 0; bottom: 0; margin-top: -30px; z-index: 5; color: #fff; text-align: center; cursor: pointer; } .glassEffect-cover .glass-tip__landscape { transform: rotate(90deg) translateZ(0); top: 120px !important; left: -100px !important; width: 300px; height: 300px; } .glassEffect-cover .glass-tip p { padding-top: 15px; font-size: 16px; } .glassEffect-cover .glass-tip img { animation: gradientScale 2s linear infinite; -webkit-animation: gradientScale 2s linear infinite; } .create-chart h5 { margin: 20px 10px; text-align: center; font-weight: 400; font-size: 18px; } .create-chart .position-align ul li { float: left; padding-right: 10px; } .create-chart .position-right { float: right; } .create-chart .position-none { display: none; } .bar-legend, .line-legend, .pie-legend { padding: 10px; list-style: none; font-size: 14px; } .bar-legend li, .line-legend li, .pie-legend li { position: static; line-height: 1.5; } .bar-legend li span, .line-legend li span, .pie-legend li span { width: 1em; height: 1em; display: inline-block; margin-right: 5px; } .comp_image { width: 100%; height: 100%; } .img_mask { -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; } .taphold_image { -webkit-touch-callout: none; pointer-events: none; } .deepShareHref { line-height: 32px; text-align: center; } .comp_anchor, .abc-link { width: 100%; height: 100%; display: block; white-space: nowrap; padding: 0 8px; text-align: center; font-size: 16px; line-height: 30px; } .map-iframe { border: none; } .mapBtn_div { border: 1px solid #ccd5db; border-radius: 3px; cursor: pointer; display: inline-block; width: 100%; line-height: 22px; color: unset; padding: 0 10px; } .mapBtn_div.omits { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .mapBtn_div.omit-height { height: 100%; } .style-btn { text-align: center; } .customer.selected, .default.selected { background: #1261ff; border: none; color: #fff; } .navigation { border-radius: 5px; border: none; } .navigation.navigation_pad { padding: 0 10px 0 5px; } .address { vertical-align: middle; line-height: 40px; font-size: 26px; } .amap-copyright, .amap-logo { display: none !important; } .map-nav-box { position: absolute; bottom: 0; background-color: #fff; width: 100%; height: 54px; text-align: center; transform: translateZ(0); z-index: 1; } .map-nav-box .address-name { box-sizing: border-box; width: 100%; height: 30px; padding: 12px; position: absolute; left: 50%; transform: translateX(-50%); } .map-nav-box .address-name p { margin: 0 auto; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; } .map-nav-box .address-name p:first-of-type { color: #000; font-size: 14px; } .map-nav-box .address-name p:nth-of-type(2) { color: #999; font-size: 12px; margin-top: 4px; } .go-here { width: 44px; height: 44px; color: #fff; border-radius: 22px; display: flex; flex-direction: column; align-items: center; justify-content: center; position: absolute; bottom: 22%; right: 10%; background-color: #1261ff; z-index: 10; } .go-here i { height: 14px; width: 14px; display: block; } .go-here span { height: 17px; display: block; font-size: 12px; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: #fff; line-height: 17px; } .image-slider { position: relative; height: 100%; perspective: 200px; -webkit-perspective: 200px; } .image-slider-style2 { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; transition-property: transform, opacity; transition-duration: 0.4s; box-shadow: 0 2px 4px 0 hsla(0, 0%, 60%, 0.5); } .image-slider-style2 .image-slider-img-title { margin: 10px; font-size: 14px; line-height: 1.2em; color: #333; } .image-slider-style2 .image-slider-img-detail { margin: 10px; font-size: 12px; line-height: 1.2em; color: #999; word-break: break-word; } .image-slider-style2-current { transform: translateX(0); opacity: 1; } .image-slider-style2-left1 { transform: translateX(calc(-100% - 10px)); opacity: 0.6; } .image-slider-style2-left2 { transform: translateX(calc(-200% - 20px)); opacity: 0; } .image-slider-style2-right1 { transform: translateX(calc(100% + 10px)); opacity: 0.6; } .image-slider-style2-right2 { transform: translateX(calc(200% + 20px)); opacity: 0; } .image-slider-style2-alternate { opacity: 0; } .image-slider-style3 { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; transition-property: transform, opacity; transition-duration: 0.4s; box-shadow: 0 2px 4px 0 hsla(0, 0%, 60%, 0.5); } .image-slider-style3 .image-slider-img-title { margin: 10px; font-size: 14px; line-height: 1.2em; color: #333; } .image-slider-style3 .image-slider-img-detail { margin: 10px; font-size: 12px; line-height: 1.2em; color: #999; word-break: break-word; } .image-slider-style3-current { transform: translateX(0) translateZ(10px); opacity: 1; z-index: 2; } .image-slider-style3-left1 { transform: translateX(-30px) translateZ(-20px); opacity: 0.6; z-index: 1; } .image-slider-style3-right1 { transform: translateX(30px) translateZ(-20px); opacity: 0.6; z-index: 1; } .image-slider-style3-alternate { opacity: 0; z-index: 1; } .image-slider-style4 { position: absolute; top: -15px; bottom: 0; left: 0; right: 0; margin: auto; transition-property: transform, opacity; transition-duration: 0.4s; box-shadow: 0 2px 4px 0 hsla(0, 0%, 60%, 0.5); border-radius: 3px; } .image-slider-style4 .image-slider-img-title { margin: 10px; font-size: 14px; line-height: 1.2em; color: #333; } .image-slider-style4 .image-slider-img-detail { margin: 10px; font-size: 12px; line-height: 1.2em; color: #999; word-break: break-word; } .image-slider-style4 img { position: absolute; width: 220px; height: 220px; bottom: 0; margin: 0 10px 10px; } .image-slider-style4-current { transform: translateX(0) translateZ(0); z-index: 3; opacity: 1; } .image-slider-style4-up1 { transform: translateY(-23px) translateZ(-10px); z-index: 2; opacity: 0.6; } .image-slider-style4-up2 { transform: translateY(-46px) translateZ(-20px); z-index: 1; opacity: 0.6; } .image-slider-style4-below1 { transform: translateY(23px) translateZ(-10px); z-index: 2; opacity: 0.6; } .image-slider-style4-below2 { transform: translateY(46px) translateZ(-20px); z-index: 1; opacity: 0.6; } .image-slider-style4-below3 { transform: translateY(69px) translateZ(-30px); z-index: 0; opacity: 0.6; } .wsite-video .element-box { width: 48px; height: 48px; } .video_area .pop-video-btn-icon { line-height: 1; position: relative; } .video_area .play-mask { position: absolute; color: #fff; left: 50%; transform: translateX(-50%); z-index: 1; line-height: 1; } .video_area.default .play-mask { top: 50%; transform: translate(-50%, -50%); font-size: 0.625em; } .video_area.film-style .play-mask { top: 18.7%; font-size: 0.6em; } .video_area.tv-style .play-mask { top: 31.2%; font-size: 0.51em; } .inline-video.no-cover { background-color: #000; } .inline-video .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .inline-video .cover { width: 100%; z-index: 1; } .inline-video .play { width: 18%; z-index: 2; } .video_mask { position: absolute; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.5); z-index: 1000; width: 100%; height: 100%; } .video_mask .video_player { position: absolute; top: 15%; width: 100%; height: 50%; } .close_mask { color: #fff; display: block; position: absolute; right: 15px; top: 15px; width: 20px; height: 20px; z-index: 1001; } .deepShareHref { line-height: 32px; text-align: center; } .comp_anchor, .abc-tel { width: 100%; height: 100%; display: block; white-space: nowrap; padding: 0 8px; text-align: center; font-size: 16px; line-height: 30px; } .deepShareHref { line-height: 32px; text-align: center; } .comp_anchor { width: 100%; height: 100%; display: block; white-space: nowrap; padding: 0 8px; text-align: center; font-size: 16px; line-height: 30px; } .deepShareHref { line-height: 32px; text-align: center; } .comp_anchor, .abc-sound { width: 100%; height: 100%; display: block; white-space: nowrap; padding: 0 8px; text-align: center; font-size: 16px; line-height: 30px; } .comp_counter { height: 100%; width: 100%; padding: 0 16px; } .comp_counter img.counter-elem { vertical-align: middle; } .comp_counter.counter-tb { position: relative; } .comp_counter.counter-tb .counter-elem { display: block; line-height: 1; } .comp_counter.counter-tb .counter-number { margin-top: 10px; } .comp_counter.counter-lr .counter-container, .comp_counter.counter-tb .counter-container { width: 100%; } .comp_counter.counter-lr .counter-number { margin-left: 10px; } .comp_counter.counter-l { font-size: 36px; } .comp_counter.counter-m { font-size: 26px; } .comp_counter.counter-s { font-size: 16px; } .phone-view .not-voted .counter-icon { color: #ccc; } .boards-panel { background-color: #424d60 !important; z-index: 9999; padding: 30px; line-height: 1; position: absolute; top: 0; left: 0; width: 100%; font-size: 11px; transform: translateZ(0); } .boards-panel, .boards-panel * { box-sizing: border-box; } .boards-panel .boards-top { position: absolute; left: 20px; top: 30px; right: 20px; z-index: 10; box-sizing: content-box; } .boards-panel .boards-top .head { font-size: 14px; color: #fff; text-align: center; padding: 14px 0; position: relative; } .boards-panel .boards-top .head .eqf-no { opacity: 0.8; font-size: 12px; position: absolute; top: 14px; right: 30px; display: inline-block; transform: scale(0.8); cursor: pointer; } .boards-panel .boards-form { text-align: center; border: 1px solid transparent; position: relative; padding: 0 15px; } .boards-panel .boards-form textarea { border: none; } .boards-panel .boards-form .record-btn { height: 30px; width: 100%; margin-top: 14px; border-radius: 3px; line-height: 30px; color: #fff; display: inline-block; background-color: #44cb83; cursor: pointer; } .boards-panel .boards-form .record-btn.submit-disabled { background-color: #b4b4b4; } .boards-panel .boards-form .content-tip { color: #000; opacity: 0.3; position: absolute; bottom: 0; right: 14px; } .boards-panel .boards-form .textParent { height: 60px; background-color: #fff; position: relative; } .boards-panel .boards-form .content-text { width: 100%; overflow-y: scroll; height: 45px; border-radius: 4px; padding: 5px; color: #76838f; } .boards-panel .boards-bottom { position: fixed; left: 29px; bottom: 0; height: 30px; right: 29px; z-index: 10; background-color: #424d60; } .boards-panel .boards-con { text-align: center; margin-top: 164px; min-height: 261px; position: absolute; top: 46px; background-color: #f0f3f4; } .boards-panel .boards-con .list { text-align: left; } .boards-panel .boards-con .more-mes { height: 40px; text-align: center; line-height: 40px; } .boards-panel .boards-con .record-bar { margin-top: 15px; } .boards-panel .boards-con.ios-boards-con { overflow: auto; bottom: 30px; left: 20px; right: 20px; -webkit-overflow-scrolling: touch; box-sizing: content-box; } .boards-panel .spline-con { height: 18px; padding: 0 15px; margin-top: 16px; position: relative; } .boards-panel .spline-con span:first-child { position: absolute; top: -5px; left: 50%; padding: 0 8px; transform: translateX(-50%); } .boards-panel .spline-con .spline { height: 1px; display: block; background-color: #ccd5db; } .tool { width: 100%; position: absolute; background-color: transparent !important; bottom: 19px; z-index: 10; display: flex; justify-content: center; } .tool .input200 { width: 200px; height: 36px; padding-left: 5px; border-radius: 4px; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.08); padding-top: 10px; overflow: auto; } .tool .eqf-yes-f { margin-left: 18px; } .tool .eqf-yes-f, .tool .eqf-yes-l { width: 24px; height: 24px; font-size: 24px; margin-top: 6px; } .tool .eqf-yes-l { float: right; } .recordParent { width: 100%; height: 270px; overflow-y: auto; } .recordParent::-webkit-scrollbar { width: 8px; } .recordParent::-webkit-scrollbar-track { background-color: transparent; } .recordParent::-webkit-scrollbar-thumb { border-radius: 5px; background-color: rgba(0, 0, 0, 0.1); } .record { padding: 17px 0; min-height: 90px; width: 240px; margin: 0 auto; } .record .headimg { width: 36px; height: 36px; background-position: 50% 50%; background-size: cover; float: left; } .record .headimg .logo { transform: scale(0.5); margin-left: -7px; margin-top: -2px; font-size: 12px; line-height: 30px; } .record .headimg-bg { background: linear-gradient(top, #2fcdfc, #08a1ef); color: #fff; text-align: center; font-size: 24px; background: -moz-linear-gradient(top, #2fcdfc, #08a1ef); background: -webkit-linear-gradient(top, #2fcdfc, #08a1ef); } .record .headimg-bg.headimg { line-height: 32px; } .record .time { opacity: 0.5; margin-top: 4px; } .record .name, .record .time { margin-left: 45px; font-size: 12px; } .record .name { max-width: 120px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .record .mes { margin-left: 45px; word-break: break-all; margin-top: 6px; line-height: 15px; font-size: 14px; } .abc-comp-comment .title { font-family: PingFangSC-Semibold; font-size: 16px; height: 55px; line-height: 55px; text-align: center; width: 240px; margin: 0 auto; } .boards-barrage { position: relative; } .boards-barrage .barrage-comments { width: 100%; height: 100%; overflow: hidden; } .boards-barrage .barrage-comments .barrage-comment { background: rgba(0, 0, 0, 0.3); border-radius: 3px; padding: 0 10px; overflow: hidden; position: absolute; top: 0; left: 0; } .boards-barrage .barrage-comments .barrage-comment > .barrage-img { display: block; width: 20px; height: 20px; border-radius: 100%; background-position: 50%; background-repeat: no-repeat; background-size: contain; background-color: #fff; position: absolute; left: 10px; top: 5px; } .boards-barrage .barrage-comments .barrage-comment > .barrage-content.h { height: 30px; white-space: nowrap; } .boards-barrage .barrage-comments .barrage-comment > .barrage-content.h, .boards-barrage .barrage-comments .barrage-comment > .barrage-content.v { display: block; font-size: 12px; color: #fff; line-height: 30px; padding-left: 25px; } .boards-barrage .barrage-tools { position: absolute; bottom: 40px; right: 0; } .boards-barrage .barrage-tools > a { display: block; position: relative; width: 30px; height: 24px; line-height: 24px; margin-bottom: 10px; text-align: center; background: rgba(0, 0, 0, 0.6); color: #fff; border-radius: 12px 0 0 12px; font-size: 12px; } .boards-barrage .barrage-tools .barrage-play .eqf-slash-l { position: absolute; right: 2px; top: 9px; transform: scale(0.8); } .boards-barrage .barrage-tools .barrage-play.on .eqf-slash-l { display: none; } .boards-barrage .barrage-tools .barrage-play.off .eqf-slash-l { display: block; } .abc-comp-comment .empty-boards { height: 100%; width: 100%; text-align: center; padding-top: 44%; } .abc-comp-comment .empty-boards .default-empty { color: #333; } .abc-comp-comment .empty-boards .black-empty { color: #fff; } .abc-comp-comment .empty-boards .pink-empty { color: #ee6e97; } .abc-comp-comment .empty-boards .blue-empty { color: #aed168; } .abc-comp-comment .empty-boards .yellow-empty { color: #c5873f; } .abc-comp-comment [class*='boards-'], .abc-comp-comment [class^='boards-'] { height: 100%; } .abc-comp-comment [class*='boards-'] .tool, .abc-comp-comment [class^='boards-'] .tool { font-size: 12px; } .abc-comp-comment [class*='boards-'] .content-warn, .abc-comp-comment [class^='boards-'] .content-warn { width: 128px; height: 36px; position: absolute; display: none; top: 290px; left: 83px; text-align: center; background-color: rgba(0, 0, 0, 0.9); color: #fff; font-size: 14px; line-height: 36px; border-radius: 4px; transition: all 0.3s; } .abc-comp-comment [class*='boards-'] .content-warn-show, .abc-comp-comment [class^='boards-'] .content-warn-show { display: block; } .abc-comp-comment .no-more-comment { text-align: center; margin-top: 10px; } .boards-default, .boards-default .boards-con, .boards-default .boards-top, .boards-default .spline-con span:first-child { background-color: #f6f6f6; } .boards-default .record { border-bottom: 1px solid rgba(51, 51, 51, 0.1); color: #333; } .boards-default .record .mes { font-size: 14px; line-height: 20px; } .boards-default .no-more-comment { color: #333; } .boards-default .title { color: #333; border-bottom: 1px solid rgba(51, 51, 51, 0.1); } .boards-default .tool .record-btn { color: #333; } .boards-black, .boards-black .boards-con, .boards-black .boards-top, .boards-black .spline-con span:first-child { background-color: #333; } .boards-black .recordParent::-webkit-scrollbar { width: 8px; } .boards-black .recordParent::-webkit-scrollbar-track { background-color: transparent; } .boards-black .recordParent::-webkit-scrollbar-thumb { border-radius: 5px; background-color: hsla(0, 0%, 100%, 0.1) !important; } .boards-black .record { border-bottom: 1px solid hsla(0, 0%, 100%, 0.1); color: hsla(0, 0%, 100%, 0.1); } .boards-black .record .mes { font-size: 14px; line-height: 20px; } .boards-black .no-more-comment { color: #fff; } .boards-black .title { color: #fff; border-bottom: 1px solid hsla(0, 0%, 100%, 0.1); } .boards-black .tool .record-btn { color: #fff; } .boards-pink, .boards-pink .boards-con, .boards-pink .boards-top, .boards-pink .spline-con span:first-child { background-color: #ffedfc; } .boards-pink .record { color: #ee6e97; border-bottom: 1px solid rgba(238, 110, 151, 0.1); } .boards-pink .record .mes { font-size: 14px; line-height: 20px; } .boards-pink .no-more-comment { color: #ee6e97; } .boards-pink .title { color: #ee6e97; border-bottom: 1px solid rgba(238, 110, 151, 0.1); } .boards-pink .tool .record-btn { color: #ee6e97; } .boards-yellow { background-color: #efd7b4; } .boards-yellow .boards-con, .boards-yellow .boards-top, .boards-yellow .spline-con span:first-child { background-color: #f5f3f0; } .boards-yellow .recordParent { height: 290px; } .boards-yellow .record { color: #c5873f; background-color: #fffcf9; min-height: 84px; width: 262px; } .boards-yellow .record .mes { font-size: 14px; line-height: 20px; } .boards-yellow .record .name { max-width: 75px; } .boards-yellow .no-more-comment, .boards-yellow .title, .boards-yellow .tool .record-btn { color: #c5873f; } .boards-blue, .boards-blue .boards-con, .boards-blue .boards-top, .boards-blue .spline-con span:first-child { background-color: #e6f5dd; } .boards-blue .recordParent { height: 290px; } .boards-blue .record { background-color: #aed168; min-height: 69px; width: 246px; } .boards-blue .record .mes { font-size: 14px; line-height: 20px; } .boards-blue .record .name { max-width: 85px; } .boards-blue .no-more-comment, .boards-blue .title, .boards-blue .tool .record-btn.eqf-yes-f { color: #aed168; } .boards-button { display: flex; justify-content: center; align-items: center; background-color: #f6f6f6; } .boards-button .buttonDiv { width: 200px; height: 50px; line-height: 50px; background: #f9f9f9; font-size: 24px; border-radius: 4px; text-align: center; color: #1261ff; } .boards-button .buttonDiv span { font-size: 28px; margin-left: 14px; } .boards-button .buttonDiv .f { color: #1261ff !important; } .boards-button .buttonDiv .hot { color: #ff5448 !important; } .boards-button .buttonDiv .line { color: #f89300 !important; } .boards-button .buttonDiv .pen { color: #1bc7b1 !important; } .boards-button .buttonDiv-ver { height: 70px; } .boards-button .buttonDiv-ver span { margin-left: 0; display: block; text-align: center; line-height: 30px; } .boards-button .buttonDiv-ver i { display: block; text-align: center; margin-top: 11px; } .boards-button .buttonDiv-hor { height: 50px; line-height: 50px; } .boards-userDefine .recordParent .record { border-bottom: 1px solid rgba(51, 51, 51, 0.1); } .boards-userDefine .recordParent .record .mes { line-height: 20px; } .boards-userDefine .title { border-bottom: 1px solid rgba(51, 51, 51, 0.1); } .boards-default .boards-form .record-btn, .boards-default .tool .replay { background-color: #44cb83; } .boards-default .tool .content-text { font-size: 14px; line-height: 20px; padding-left: 10px; padding-top: 8px; } .boards-default .tool .more { background-color: #08a1ef; } .boards-default .spline-con .spline { background-color: rgba(51, 51, 51, 0.1); } .boards-default .boards-con .content-text { border: 1px solid rgba(51, 51, 51, 0.1); } .boards-default .boards-con .more-mes { color: rgba(0, 0, 0, 0.6); } .boards-default .boards-top .head { color: #37474f; } .boards-default .record .time { margin-left: 45px; opacity: 0.5; margin-top: 4px; font-size: 12px; } .boards-black { color: #fff; } .boards-black .boards-form .record-btn, .boards-black .replay { background-color: #30bcad; } .boards-black .record { color: #fff; } .boards-black .tool { background-color: hsla(0, 0%, 100%, 0.1); } .boards-black .tool .more { background-color: hsla(0, 0%, 100%, 0.15); border: 1px solid hsla(0, 0%, 100%, 0.3); } .boards-black .record .time { margin-left: 45px; opacity: 0.5; margin-top: 4px; font-size: 12px; } .boards-black .boards-con .content-text { border: 1px solid rgba(0, 0, 0, 0.5); } .boards-black .boards-con .more-mes { color: #fff; } .boards-pink { background-color: #f6dcf0; } .boards-pink .tool { background-color: #e6688e; } .boards-pink .record { color: #bd5673; } .boards-pink .record .time { margin-left: 45px; opacity: 0.5; margin-top: 4px; font-size: 12px; } .boards-pink .more, .boards-pink .replay { background-color: #eb86a5; border: 1px solid #f3b4c7; } .boards-pink .head { background-color: #e6688e; } .boards-pink .boards-con { background-color: #f6dcf0; } .boards-pink .boards-con .content-text { border: 1px solid #e9b3db; } .boards-pink .boards-con .more-mes { color: rgba(189, 86, 115, 0.8); } .boards-pink .boards-form { background-color: #f6dcf0; } .boards-pink .boards-form .record-btn { background-color: #e6688e; } .boards-pink .spline-con { background-color: #f6dcf0; color: rgba(189, 86, 115, 0.8); } .boards-pink .spline-con .spline { background-color: #e9b3db; } .boards-blue .boards-form .content-text { border: 1px solid #ccd5db; } .boards-blue .boards-form .record-btn { background-color: #e6f5dd; } .boards-blue .record { color: #fff; border-style: solid; border-image-source: url(./h5_view_2/images/stampbg-741e1e.png); border-image-slice: 40; border-image-outset: 7px; border-image-repeat: round; border-image-width: 20px; margin: 7px auto; position: relative; padding: 14px 10px 14px 20px; margin: 11px auto; padding: 7px 13px; } .boards-blue .record .headimg { border-radius: 50%; height: 36px; width: 36px; line-height: 36px; } .boards-blue .record .headimg .logo { line-height: 36px; margin-left: -5px; margin-top: 0; } .boards-blue .record .mes, .boards-blue .record .name { opacity: 1; } .boards-blue .record .name { margin-left: 45px; } .boards-blue .record .time { margin-left: 45px; opacity: 0.5; margin-top: 4px; font-size: 12px; } .boards-blue .record .headimg-bg { background-color: transparent; } .boards-yellow .record { margin: 7px auto; padding: 14px 10px 14px 20px; position: relative; } .boards-yellow .record .headimg { border-radius: 50%; height: 36px; width: 36px; line-height: 36px; } .boards-yellow .record .headimg .logo { line-height: 36px; margin-left: -5px; margin-top: 0; } .boards-yellow .record .mes, .boards-yellow .record .name { opacity: 1; } .boards-yellow .record .name { margin-left: 45px; } .boards-yellow .record .time { margin-left: 45px; opacity: 0.5; margin-top: 4px; font-size: 12px; } .boards-yellow .record .headimg-bg { background-color: transparent; } .boards-yellow .record .time { right: 32px; } .boards-yellow .record:before { content: ''; width: 12px; height: 100%; position: absolute; top: 0; left: 0; background-color: #d09746; border-radius: 4px 0 0 0; } .boards-yellow .record:after { content: ''; width: 262px; height: 4px; position: absolute; bottom: -4px; left: 0; background-image: linear-gradient(90deg, #c5873f 4.58%, #ede3d9 0); background-size: 262px 4px; border-radius: 0 0 0 5px; } .boards-yellow .boards-form .record-btn { background-color: #fec274; } .boards-blue .tool .replay, .boards-yellow .tool .replay { background-color: #e6f5dd; } .boards-blue .tool .more, .boards-yellow .tool .more { background-color: #729fe4; } .boards-blue .boards-top .head, .boards-yellow .boards-top .head { color: #37474f; } .comp_button { width: 240px; height: 36px; min-width: 50px; white-space: nowrap; border: 0; background: transparent; font-size: 16px; color: #999; padding: 0 8px; } .imghead { height: 82px; width: 108px; position: absolute; top: -50px; left: 50%; transform: translateX(-50%); } .feedback-box { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 888888; transform: translateZ(0); } .feedback-box .ad-form-submit__wrapper { position: absolute; box-sizing: border-box; right: 0; top: 50%; transform: translate3d(0, -50%, 0); left: 0; } .feedback-box .ad-form-submit__wrapper .feedback-content { border-radius: 12px 12px 0 0; background: #fff; text-align: center; margin: 0 auto; width: 260px; color: #333; padding: 0; } .feedback-box .ad-form-submit__wrapper .feedback-content__title--img { padding: 44px 20px 16px; box-sizing: border-box; } .feedback-box .ad-form-submit__wrapper .feedback-content__title--img span { display: block; } .feedback-box .ad-form-submit__wrapper .feedback-content__title--text { padding: 44px 20px 16px; box-sizing: border-box; } .feedback-box .ad-form-submit__wrapper .feedback-content__title--text span { margin-bottom: 16px; height: 24px; line-height: 24px; display: inline-block; vertical-align: middle; font-size: 14px; color: #333; font-weight: 500; } .feedback-box .ad-form-submit__wrapper .feedback-content .eqf-yes-l { color: #56c6ff; font-size: 20px; vertical-align: middle; } .feedback-box .ad-form-submit__wrapper .feedback-content img { width: 220px; height: 220px; } .feedback-box .ad-form-submit__wrapper .feedback-content img.up { margin-bottom: 20px; } .feedback-box .ad-form-submit__wrapper .feedback-content img.down { margin-top: 20px; } .feedback-box .ad-form-submit__wrapper .feedback-content img.submit_banner_ad { width: 220px; height: 220px; } .feedback-box .ad-form-submit__wrapper .feedback-btn { padding: 4px 0 20px; width: 260px; margin: 0 auto; font-size: 16px; border-radius: 0 0 12px 12px; background: #fff; } .feedback-box .ad-form-submit__wrapper .feedback-btn.line { border-top: 1px solid #fff; } .feedback-box .ad-form-submit__wrapper .feedback-btn a { display: inline-block; text-align: center; width: 100%; line-height: 40px; color: #fff; border-radius: 0 0 12px 12px; } .feedback-box .ad-form-submit__wrapper .feedback-btn a.feedback-close, .feedback-box .ad-form-submit__wrapper .feedback-btn a.left { font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #333; margin-left: 20px; width: 106px; height: 36px; line-height: 36px; border-radius: 18px; border: 1px solid #ccd5db; } .feedback-box .ad-form-submit__wrapper .feedback-btn a.right, .feedback-box .ad-form-submit__wrapper .feedback-btn a.text-ad { float: right; margin-right: 20px; font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #fff; width: 106px; height: 36px; line-height: 36px; background: linear-gradient(270deg, #246dff, #1a94ff); border-radius: 18px; } .feedback-box .ad-form-submit__wrapper #ad-form-pop-submit { width: 300px; margin: 0 auto; background: #fff; } .feedback-box .ad-form-submit__wrapper .interactive-gift-list { border-radius: unset; } .feedback-box .feedback-form { position: absolute; top: 50%; left: 50%; width: 260px; margin-left: -130px; background: #fff; font-size: 14px; color: #333; font-weight: 500; border-radius: 12px; } .feedback-box .feedback-form .feedback-content { border-radius: 12px 12px 0 0; background: #fff; text-align: center; margin: 0 auto; width: 260px; color: #333; padding: 0; } .feedback-box .feedback-form .feedback-content__title--img { padding: 44px 20px 16px; box-sizing: border-box; } .feedback-box .feedback-form .feedback-content__title--img span { display: block; } .feedback-box .feedback-form .feedback-content__title--text { padding: 44px 20px 16px; box-sizing: border-box; } .feedback-box .feedback-form .feedback-content__title--text span { margin-bottom: 16px; height: 24px; line-height: 24px; display: inline-block; vertical-align: middle; font-size: 14px; color: #333; font-weight: 500; } .feedback-box .feedback-form .feedback-content .eqf-yes-l { color: #56c6ff; font-size: 20px; vertical-align: middle; } .feedback-box .feedback-form .feedback-content img { width: 220px; height: 220px; } .feedback-box .feedback-form .feedback-content img.up { margin-bottom: 20px; } .feedback-box .feedback-form .feedback-content img.down { margin-top: 20px; } .feedback-box .feedback-form .feedback-content img.submit_banner_ad { width: 220px; height: 220px; } .feedback-box .feedback-form .feedback-btn { padding: 4px 0 20px; width: 260px; margin: 0 auto; font-size: 16px; border-radius: 0 0 12px 12px; background: #fff; } .feedback-box .feedback-form .feedback-btn.line { border-top: 1px solid #fff; } .feedback-box .feedback-form .feedback-btn a { display: inline-block; text-align: center; width: 100%; line-height: 40px; color: #fff; border-radius: 0 0 12px 12px; } .feedback-box .feedback-form .feedback-btn a.feedback-close, .feedback-box .feedback-form .feedback-btn a.left { font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #333; margin-left: 20px; width: 106px; height: 36px; line-height: 36px; border-radius: 18px; border: 1px solid #ccd5db; } .feedback-box .feedback-form .feedback-btn a.right, .feedback-box .feedback-form .feedback-btn a.text-ad { float: right; margin-right: 20px; font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #fff; width: 106px; height: 36px; line-height: 36px; background: linear-gradient(270deg, #246dff, #1a94ff); border-radius: 18px; } .submit-confirm-dialog-ct { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.4); z-index: 999999; transform: translateZ(0); -webkit-transform: translateZ(0); } .submit-confirm-dialog { position: absolute; top: 100%; left: 0; bottom: calc(-100% + 56px); width: 100%; background: #fff; border-radius: 16px 16px 0 0; } .submit-confirm-dialog.landScape-scene { transform: rotate(90deg); -webkit-transform: rotate(90deg); -webkit-transform-origin: left bottom; transform-origin: left bottom; bottom: 100%; top: unset; } .submit-confirm-dialog.landScape-scene .submit-confirm-dialog__content { margin-top: 0; } .submit-confirm-dialog.landScape-scene .submit-confirm-dialog__content .privacy-policy-confirm { bottom: 128px; } .submit-confirm-dialog.landScape-scene .submit-confirm-dialog__handle { bottom: 16px; } .submit-confirm-dialog__header { height: 48px; position: relative; } .submit-confirm-dialog__header .title { text-align: center; line-height: 48px; font-size: 14px; font-weight: 500; color: #333; } .submit-confirm-dialog__header .close-btn { position: absolute; top: 14px; right: 16px; font-size: 20px; color: #333; cursor: pointer; } .submit-confirm-dialog__content { margin-top: 11px; } .submit-confirm-dialog__content .privacy-policy { color: #1261ff; cursor: pointer; } .submit-confirm-dialog__content .confirm-tip { width: 288px; margin: auto; font-size: 15px; color: #333; line-height: 24px; text-align: left !important; } .submit-confirm-dialog__content .privacy-policy-confirm { position: absolute; bottom: 188px; width: 284px; left: 50%; transform: translateX(-50%); display: flex; } .submit-confirm-dialog__content .privacy-policy-confirm .privacy-policy-checkbox { width: 16px; height: 16px; opacity: 0; } .submit-confirm-dialog__content .privacy-policy-confirm .privacy-policy-checkbox-desc { margin-left: 8px; font-size: 12px; color: #333; line-height: 16px; } .submit-confirm-dialog__content .privacy-policy-confirm .privacy-policy-checkbox-layout { position: absolute; top: 0; left: 0; width: 16px; height: 16px; border-radius: 3px; border: 1px solid #ccd5db; pointer-events: none; box-sizing: border-box; } .submit-confirm-dialog__content .privacy-policy-confirm .privacy-policy-checkbox-layout .checked-icon { color: #fff; font-size: 16px; display: none; } .submit-confirm-dialog__content .privacy-policy-confirm .privacy-policy-checkbox-layout.checkbox-checked { background: #1261ff; border: none; } .submit-confirm-dialog__content .privacy-policy-confirm .privacy-policy-checkbox-layout.checkbox-checked .checked-icon { display: block; } .submit-confirm-dialog__handle { position: absolute; bottom: 64px; left: 50%; width: 284px; transform: translateX(-50%); } .submit-confirm-dialog__handle .handle-btn { width: 284px; height: 40px; border-radius: 4px; border: 1px solid #e6ebed; text-align: center; line-height: 38px; font-size: 14px; color: #666; margin-top: 11px; cursor: pointer; } .submit-confirm-dialog__handle .handle-btn.confirm-btn { background: #1261ff; border: 1px solid #1261ff; color: #fff; } .submit-confirm-dialog__handle .handle-btn.confirm-btn.disale-submit { background: #f5f5f5; border: 1px solid #ccd5db; color: #999; pointer-events: none; } .comp-exception { position: relative; display: flex !important; flex-direction: column; } .comp-exception .expection-icon { width: 100%; height: 100%; overflow: hidden; } .comp-exception .expection-style-img { font-size: 2rem; position: absolute; margin-left: 50%; transform: translateX(-50%); top: 5%; display: flex; text-align: center; align-items: center; border-radius: 50%; width: 60%; height: 60%; } .comp-exception .expection-style-img img { width: 100%; height: 100%; } .comp-exception .expection-style-default { font-size: 22px; position: absolute; margin-left: 50%; transform: translateX(-50%); top: 5%; display: flex; text-align: center; align-items: center; background: #ff5448; color: #fff; border-radius: 50%; width: 60%; height: 60%; } .comp-exception .expection-style-default span { text-align: center; width: 100%; } .comp-exception .expection-style-default span.expectioin-default-content { align-items: center; display: flex; line-height: 100%; flex-wrap: wrap; justify-content: space-around; } .comp-exception .expection-detail { color: #666; bottom: 0; width: 100%; display: flex; align-items: center; } .comp-exception .expection-detail .amount-box { display: inline-block; text-align: center; height: 100%; line-height: 30px; width: 100%; } .v-exception-black { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); z-index: 9999988888; } .v-exception-black .wx-record-bottom-note { line-height: 35px; height: 40px; font-size: 14px; text-align: center; color: #999; } .v-exception-black .record-detail-part { padding-top: 8px; padding: 8px 12px 2px; overflow: hidden; touch-action: none; } .v-exception-black .record-detail-part .record-detail-part { touch-action: none; } .v-exception-black .record-detail-part .record-list-item { height: 48px; width: 100%; display: flex; align-items: center; justify-content: space-between; } .v-exception-black .record-detail-part .record-list-item .list-item-left img { border-radius: 50%; width: 32px; height: 32px; margin-right: 8px; } .v-exception-black .record-detail-part .record-list-item .list-item-left span { color: #111; font-size: 14px; } .v-exception-black .record-detail-part .record-list-item .list-item-right { color: #999; } .v-exception-black .record-detail-part .record-list-item .list-item-right span { margin-right: 2px; color: #ff5448; } .v-exception-black .record-detail-part .nodata-img { text-align: center; margin-bottom: 16px; } .v-exception-black .record-detail-part .nodata-img img { width: 168px; height: 140px; } .v-exception-black .record-detail-part .nodata-content { height: 20px; font-size: 14px; text-align: center; color: #999; line-height: 20px; } .v-exception-black .wx-exce-box { padding: 16px 0 23px; position: absolute; top: 50%; left: 50%; border-radius: 8px; width: 270px; text-align: center; overflow: hidden; background-color: #fff; transform: translate(-50%, -50%); background-image: url(./h5_view_2/images/img_icon_bg-88ada3.png); background-repeat: no-repeat; background-size: 66px 70px; background-position: 100% 100%; } .v-exception-black .record-box { box-sizing: border-box; text-align: left; position: absolute; background: #fff; transition: all 0.5s; top: 100%; overflow: hidden; left: 0; display: flex; flex-direction: column; width: 100%; padding: 16px 0 0; height: 100%; z-index: 11; } .v-exception-black .record-box .record-title { padding: 0 12px; margin-bottom: 8px; } .v-exception-black .record-box .record-title span { color: #111; font-weight: 700; font-size: 17px; } .v-exception-black .record-box .record-title em { font-size: 16px; color: #999; height: 20px; line-height: 20px; width: 20px; display: inline-block; } .v-exception-black .wx-exce-title { font-size: 17px; color: #111; font-weight: 600; margin-bottom: 24px; } .v-exception-black .wx-other { margin-bottom: 2px; } .v-exception-black .wx-other span { display: inline-block; padding: 10px 20px; color: #1261ff; font-size: 12px; } .v-exception-black .close { position: absolute; font-size: 14px; top: 16px; right: 16px; } .v-exception-black .wt-exce-record { color: #666; font-size: 12px; line-height: 30px; } .v-exception-black .other-amounts-box { margin-bottom: 24px; display: none; } .v-exception-black .other-amounts-box .input-box { position: relative; height: 48px; line-height: 48px; background: #f5f5f5; border-radius: 4px; margin: 0 16px; overflow: hidden; margin-bottom: 20px; display: flex; } .v-exception-black .other-amounts-box .input-box span { font-size: 14px; color: #666; width: 10px; flex-shrink: 0; position: absolute; top: 50%; left: 16px; transform: translateY(-50%); } .v-exception-black .other-amounts-box .input-box input { height: 100%; width: 100%; font-size: 24px; text-align: center; border: none; background: #f5f5f5; } .v-exception-black .other-amounts-box .other-amount-box span { display: inline-block; color: #fff; width: 118px; height: 36px; line-height: 36px; background: #1261ff; border-radius: 4px; } .v-exception-black .amounts-box-4 { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0 40px; min-height: 112px; } .v-exception-black .amounts-box-4 .amout-item { width: 74px; margin-right: 8px; border: 1px solid; color: #ff5448; background: #fff; border-radius: 4px; height: 48px; line-height: 48px; } .v-exception-black .amounts-box-4 .amout-item:nth-child(2n) { margin-right: 0; } .v-exception-black .amounts-box-1, .v-exception-black .amounts-box-2 { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; padding: 0 16px; min-height: 112px; } .v-exception-black .amounts-box-1 .amout-item, .v-exception-black .amounts-box-2 .amout-item { width: 74px; border: 1px solid; color: #ff5448; background: #fff; margin-right: 8px; border-radius: 4px; height: 48px; line-height: 48px; } .v-exception-black .amounts-box-1 .amout-item:nth-child(2n), .v-exception-black .amounts-box-2 .amout-item:nth-child(2n) { margin-right: 0; } .v-exception-black .amout-item { font-weight: 700; font-size: 16px; margin-bottom: 16px; } .v-exception-black .amounts-box, .v-exception-black .amounts-box-3, .v-exception-black .amounts-box-5, .v-exception-black .amounts-box-6 { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; min-height: 112px; } .v-exception-black .amounts-box-3 .amout-item, .v-exception-black .amounts-box-5 .amout-item, .v-exception-black .amounts-box-6 .amout-item, .v-exception-black .amounts-box .amout-item { width: 74px; margin-right: 8px; border: 1px solid; color: #ff5448; background: #fff; border-radius: 4px; height: 48px; line-height: 48px; } .v-exception-black .amounts-box-3 .amout-item:nth-child(3n), .v-exception-black .amounts-box-5 .amout-item:nth-child(3n), .v-exception-black .amounts-box-6 .amout-item:nth-child(3n), .v-exception-black .amounts-box .amout-item:nth-child(3n) { margin-right: 0; } .v-exception-black .v-exception-box { padding: 50px 0 30px; position: absolute; text-align: center; top: 50%; left: 50%; border-radius: 12px; width: 80%; background-color: #fff; transform: translate(-50%, -50%); } .v-exception-black .v-toast-content { margin-bottom: 36px; color: #111; font-size: 16px; font-weight: 500; } .v-exception-black .v-close-btn { font-size: 17px; color: #333; display: inline-block; width: 54%; height: 44px; line-height: 44px; background: url(./h5_view_2/images/hb-fk-anniu-a9b473.png); background-size: contain; background-repeat: no-repeat; } .v-exception-black .v-icon-box { width: 160px; height: 100px; position: absolute; left: 50%; transform: translate(-50%); top: -50px; } .v-exception-black .v-icon-box img { width: 160px; height: 100px; } .photowall { width: 100%; } .photowall img { width: calc((100% - 42px) / 8); border-radius: 100%; margin-right: 6px; margin-bottom: 6px; } .photowall img:nth-of-type(8n) { margin-rigth: 0; } .elementSave { width: 100%; height: 100%; text-align: center; } .elementSave .touchImg { width: 100%; height: 100%; opacity: 0; position: absolute; left: 0; top: 0; z-index: 10; pointer-events: auto; } .elementSave .long-touch-save-icon { display: inline-block; width: 20px; height: 20px; } .elementSave.long-touch-save-style2 { padding: 2px; } .elementSave.long-touch-save-style2 .long-touch-save-style2-inner { border: 1px solid #ff498d; border-radius: 18px; display: inline-block; width: 100%; height: 100%; } .elementSave.long-touch-save-style4 { padding: 4px; } .elementSave.long-touch-save-style4 .long-touch-save-icon { float: left; font-size: 1.2em; height: 36px; line-height: 36px; width: 36px; border-radius: 50%; background-color: #fff; } .elementSave.long-touch-save-style5 { border-radius: 4px; } .elementSave.long-touch-save-style6 { overflow: hidden; } .elementSave.long-touch-save-style6 .long-touch-save-style6-content { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; height: 46px; } .elementSave.long-touch-save-style6 .long-touch-save-style6-content .long-touch-save-label { font-size: 12px; } .add-img-btn { height: 100%; border: 1px solid #ccd5db; text-align: center; line-height: 34px; cursor: pointer; border-radius: 3px; } .feedback-box { top: 0; background-color: rgba(0, 0, 0, 0.7); z-index: 888888; } .feedback-box, .feedback-box .box { position: absolute; left: 0; width: 100%; height: 100%; } .feedback-box .box img { position: absolute; left: 0; top: 0; right: 0; bottom: 0; margin: auto; transform: scale(0.8); width: 100%; } .feedback-box .feedback-close-btn { width: 15px; height: 15px; position: absolute; right: 20px; top: 20px; color: #fff; } .anim-number-scroll-container { height: 100%; position: relative; } .anim-number-scroll-container .anim-number-scroll-startNum { text-align: center; height: 100%; overflow: hidden; position: absolute; left: 50%; transform: translateX(-50%); display: flex; flex-wrap: nowrap; } .anim-number-scroll-container .anim-number-scroll-startNum .anim-number-items-startNum { padding-left: 3px; padding-right: 3px; display: flex; height: 100%; align-items: center; } .anim-number-scroll-container .anim-number-scroll-startNum .anim-number-dot-startNum { display: flex; height: 100%; align-items: center; } .item-select-box { outline: 1px dashed #1593ff; } .age-change-box .img-box { position: relative; margin-bottom: 20px; } .age-change-box .img-box .tip-box { height: 32px; background: #000; opacity: 0.6; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #fff; position: relative; bottom: 0; left: 0; line-height: 32px; text-align: center; width: 100%; display: block; } .age-change-box .operate-btn { width: 280px; height: 36px; line-height: 36px; border-radius: 3px; text-align: center; margin: 0 auto; cursor: pointer; display: inline-block; } .age-change-box .operate-btn span { font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: inherit; line-height: 20px; } .age-change-box .cover-img { background-size: contain; background-repeat: no-repeat; background-position: 50%; display: inline-block; } .age-change-box .normal .img-box { height: 373px; margin-bottom: 15px; } .age-change-box .normal .cover-img { width: 280px; height: 373px; } .age-change-box .normal .tip-box { top: 341px; } .age-change-box .normal .border-img { display: none; } .age-change-box .normal .change-btn, .age-change-box .normal .save-btn { background: #1593ff; } .age-change-box .normal .save-show .save-btn { display: inline-block; } .age-change-box .normal .save-show .change-btn { margin-right: 16px; margin-left: 0; } .age-change-box .normal .save-img-box { width: 288px; } .age-change-box .normal .save-img-box .img-content { width: 100%; } .age-change-box .normal .save-hidden .change-btn { margin-right: 0; width: 280px; } .age-change-box .normal .save-hidden .save-btn { display: none; } .age-change-box .normal .long-mode .change-btn { width: 177px; } .age-change-box .normal .long-mode .save-btn { width: 87px; } .age-change-box .normal .short-mode .change-btn, .age-change-box .normal .short-mode .save-btn { width: 132px; } .age-change-box .geek .img-box { height: 354px; margin-bottom: 20px; } .age-change-box .geek .cover-img { width: 210px; height: 280px; margin-left: 50px; position: absolute; top: 40px; } .age-change-box .geek .change-btn { background: #00e4ff; border-radius: 3px; margin-left: 16px; } .age-change-box .geek .border-img { display: block; position: relative; height: 354px; width: 100%; } .age-change-box .geek .tip-box { top: 248px; left: 0; } .age-change-box .geek .save-btn { background: #00e4ff; border-radius: 3px; } .age-change-box .geek .save-show .save-btn { display: inline-block; } .age-change-box .geek .save-show .change-btn { margin-right: 16px; } .age-change-box .geek .save-hidden .change-btn { width: 272px; } .age-change-box .geek .save-hidden .save-btn { display: none; } .age-change-box .geek .long-mode .change-btn { width: 169px; } .age-change-box .geek .long-mode .save-btn { width: 87px; } .age-change-box .geek .short-mode .change-btn, .age-change-box .geek .short-mode .save-btn { width: 128px; } .age-change-box .cute .img-box { height: 336px; margin-bottom: 13px; } .age-change-box .cute .cover-img { width: 210px; height: 280px; margin-left: 32px; position: absolute; top: 29px; } .age-change-box .cute .change-btn { background: #f5aacc; border-radius: 18px; margin-left: 12px; } .age-change-box .cute .border-img { display: block; position: relative; height: 336px; width: 274px; z-index: 0; } .age-change-box .cute .tip-box { top: 248px; left: 0; } .age-change-box .cute .save-btn { background: #f5aacc; border-radius: 18px; } .age-change-box .cute .save-show .save-btn { display: inline-block; } .age-change-box .cute .save-show .change-btn { margin-right: 16px; } .age-change-box .cute .save-hidden { margin-right: 0; } .age-change-box .cute .save-hidden .change-btn { width: 252px; } .age-change-box .cute .save-hidden .save-btn { display: none; } .age-change-box .cute .long-mode .change-btn { width: 149px; } .age-change-box .cute .long-mode .save-btn { width: 87px; } .age-change-box .cute .short-mode .change-btn, .age-change-box .cute .short-mode .save-btn { width: 118px; } .age-change-box .easy .img-box { height: 392px; width: 278px; margin: 0 auto 8px; } .age-change-box .easy .cover-img { width: 210px; height: 280px; margin-left: 34px; position: absolute; top: 42px; z-index: 0; } .age-change-box .easy .change-btn { background: #1593ff; border-radius: 3px; margin-left: 13px; } .age-change-box .easy .border-img { display: block; position: relative; height: 392px; width: 278px; } .age-change-box .easy .tip-box { top: 248px; left: 0; } .age-change-box .easy .save-btn { background: #1593ff; border-radius: 3px; } .age-change-box .easy .save-show .save-btn { display: inline-block; } .age-change-box .easy .save-show .change-btn { margin-right: 16px; } .age-change-box .easy .save-hidden .change-btn { margin-right: 0; width: 252px; } .age-change-box .easy .save-hidden .save-btn { display: none; } .age-change-box .easy .long-mode .change-btn { width: 149px; } .age-change-box .easy .long-mode .save-btn { width: 87px; } .age-change-box .easy .short-mode .change-btn, .age-change-box .easy .short-mode .save-btn { width: 118px; } .age-change-box .save-hidden .short-mode .change-btn { width: 280px; background: #1593ff; } .age-change-box .save-show { display: flex; } .save-img-box { width: 576px; position: absolute; top: 0; left: 0; z-index: -100; opacity: 0; display: block; } .save-img-box .img-content, .save-img-box .save-content { position: relative; z-index: 1; } .save-img-box .img-content { text-align: center; background-color: #fff; } .save-img-box .share-preview-info { z-index: 1; } .save-img-box .share-preview-info .save-footer-img-background { width: 576px; position: absolute; height: 176px; } .save-img-box .share-preview-info .preview-footer { height: 176px; width: 576px; position: relative; display: flex; background: transparent !important; } .save-img-box .share-preview-info .preview-footer .qrcode { width: 136px; height: 136px; border-radius: 6px; z-index: 1000; } .save-img-box .share-preview-info .preview-footer .info-box { display: flex; flex-direction: column; justify-content: center; } .save-img-box .share-preview-info .preview-footer .info-box .info-title { font-size: 28px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #333; word-wrap: break-word; overflow: hidden; width: 380px; text-align: left; margin-bottom: 16px; } .save-img-box .share-preview-info .preview-footer .info-box .info-tip { font-size: 24px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #999; text-align: left; } .save-img-box .type0 .info-box { width: 380px; } .save-img-box .type0 .qrcode { margin: 20px; } .save-img-box .type1 .preview-footer { flex-direction: row-reverse; justify-content: flex-end; } .save-img-box .type1 .info-box { width: 364px; margin-left: 32px; margin-right: 28px; } .save-img-box .type1 .qrcode { margin-top: 20px; border: 6px solid #eb731f; box-sizing: border-box; } .save-img-box .type2 .preview-footer, .save-img-box .type2 .save-footer-img-background { height: 232px; } .save-img-box .type2 .info-box { position: absolute; width: 512px; top: 76px; left: 32px; flex-direction: column-reverse !important; align-items: center; } .save-img-box .type2 .info-box .info-title { margin-bottom: 0 !important; margin-top: 8px !important; text-align: center !important; } .save-img-box .type2 .qrcode { position: absolute; top: -64px; left: 224px; } .save-img-box .type3 .info-box { width: 512px; margin-left: 32px; } .save-img-box .type3 .qrcode { position: absolute; top: -152px; left: 16px; } .save-img-box-show { z-index: 1; opacity: 1; z-index: 200; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); } .save-img-box-show .box-title { width: 288px; height: 38px; line-height: 38px; font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; text-align: center; color: #774f0d; background-color: #ffe257; } .save-img-box-shadow { position: absolute; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.6); z-index: 199; top: 0; } .upload-loading { width: 112px; height: 112px; background: rgba(0, 0, 0, 0.6); border-radius: 8px; position: absolute; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); text-align: center; z-index: 99999; display: flex; flex-direction: column; justify-content: center; align-items: center; } .upload-loading img { width: 69px; height: 34px; margin-bottom: 17px; } .upload-loading span { font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #fff; } .select-roll { height: 100%; } .select-roll, .select-roll .select-roll-content-box { width: 100%; position: absolute; bottom: 0; z-index: 10000; } .select-roll .title-box { height: 44px; line-height: 44px; position: relative; background: #fafaf8; box-shadow: 0 1px 0 0 #e1e0e0; } .select-roll .title-box .btn-cancel { font-size: 15px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #666; cursor: pointer; float: left; margin-left: 16px; } .select-roll .title-box .btn-confirm { font-size: 15px; font-family: PingFangSC-Medium, PingFang SC; font-weight: 500; color: #007aff; cursor: pointer; float: right; margin-right: 16px; } .select-roll .title-box .title { position: absolute; left: -34px; font-size: 17px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #222; margin-left: 50%; } .select-roll .roll-box { overflow: hidden; position: relative; width: 100%; height: 217px; background: #fff; box-shadow: 0 1px 0 0 #d0d0d0; } .select-roll .roll-box .vague-zone-top { width: 100%; height: 29px; background: linear-gradient(180deg, #fff, hsla(0, 0%, 100%, 0)); position: absolute; top: 0; z-index: 99; } .select-roll .roll-box .vague-zone-bottom { width: 100%; height: 29px; background: linear-gradient(180deg, hsla(0, 0%, 100%, 0), #fff); position: absolute; bottom: 0; z-index: 99; } .select-roll .select-zone { width: 100%; height: 32px; position: absolute; top: 90px; border-top: 2px solid #aba9a2; border-bottom: 2px solid #aba9a2; } .select-roll .option-box { position: absolute; top: 32px; left: 50%; width: 100%; transform: translateX(-50%); } .select-roll .option-box .option-item-selected { height: 32px !important; font-size: 23px !important; color: #292929 !important; line-height: 32px !important; margin: 5px 0; } .select-roll .option-box .option-item { width: 100%; height: 29px; font-size: 21px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #9d9d9d; line-height: 29px; display: block; text-align: center; } .select-roll-shadow { width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); position: absolute; top: 0; left: 0; z-index: 9999; } @keyframes outer_circle_move { 0% { transform: rotate(0deg); } to { transform: rotate(1turn); } } @-webkit-keyframes outer_circle_move { 0% { transform: rotate(0deg); } to { transform: rotate(1turn); } } @keyframes scanmove { 0% { top: -134px; transform: rotate(180deg); } 49% { top: 280px; transform: rotate(180deg); opacity: 0.4; } 50% { top: 560px; transform: rotate(180deg); opacity: 0; } 52% { top: 280px; transform: rotate(0deg); opacity: 0.4; } to { top: -134px; transform: rotate(0deg); } } .view-loading .loading_container { width: 100%; height: 320px; position: absolute; z-index: 11; top: 50%; transform: translateY(-50%); } .view-loading .grid, .view-loading .light, .view-loading .line { width: 320px; height: 320px; top: 50%; left: 50%; position: absolute; margin-top: -160px; margin-left: -160px; } .view-loading .outer_circle img { width: 100%; height: 100%; } .view-loading .outer_circle { width: 320px; height: 320px; animation: outer_circle_move 5s infinite linear; -webkit-animation: outer_circle_move 5s infinite linear; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%; top: 50%; left: 50%; margin-top: -160px; margin-left: -160px; position: absolute; } .view-loading .inner_circle { width: 156px; height: 156px; margin-top: -78px; margin-left: -78px; position: absolute; top: 50%; left: 50%; } .view-loading .line-move { width: 320px; height: 320px; margin-top: -160px; margin-left: -160px; position: absolute; top: 50%; left: 50%; } .view-loading .scan_wrapper { position: absolute; animation: scanmove 5s infinite linear; -webkit-animation: scanmove 5s infinite linear; } .view-loading .scan { width: 286px; height: 134px; background: linear-gradient(0deg, rgba(0, 228, 255, 0), #00e4ff); opacity: 0.2; } .view-loading .scan_line { position: absolute; top: -1px; width: 100%; } .view-loading .inner_wrapper { width: 244px; height: 244px; margin-top: -122px; margin-left: -122px; position: absolute; top: 50%; left: 50%; border-radius: 50%; overflow: hidden; } .view-loading .persent { position: absolute; top: 50%; height: 48px; width: 70px; font-size: 24px; font-family: PingFangSC-Semibold, PingFang SC; color: #fff; line-height: 48px; left: 50%; margin-top: -24px; margin-left: -35px; text-align: center; } .view-loading .desc { height: 22px; font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; color: #00e4ff; line-height: 22px; width: 100%; text-align: center; } .view-loading .loading__layer { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #000; margin: 0; padding: 0; opacity: 0.85; overflow: hidden; z-index: 10; } .view-toast { width: 100%; height: 30px; line-height: 30px; text-align: center; position: absolute; top: 0; left: 0; z-index: 999; } .view-toast .msg-box { font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; display: inline-block; } .view-toast .msg-box .warn-icon { margin-right: 2px; width: 16px; height: 16px; } .merge-content { position: relative; width: 100%; height: 100%; background-size: contain; background-repeat: round; } .merge-content .shadow-tip { z-index: 1000; display: none; position: absolute; width: 100%; height: 32px; background: #000; opacity: 0.6; text-align: center; line-height: 32px; } .merge-content .shadow-tip span { color: #fff; font-size: 12px; opacity: 1; } .merge-content .portraits-content { position: relative; } .merge-content .portraits-content .portraits-body, .merge-content .portraits-content .portraits-face { position: absolute; display: block; } .merge-content .save-btn { z-index: 1000000; background-size: cover; cursor: pointer; display: none; line-height: 44px; text-align: center; font-size: 17px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; width: 260px; height: 44px; border-radius: 3px; position: absolute; left: 50%; bottom: 4.2%; background-repeat: no-repeat; } .merge-content .type0 { background: #fff; border: 1px solid #1593ff; color: #1593ff; } .merge-content .type1 { background-image: url(./h5_view_2/images/type1_btn-156dce.png); color: #eb731f; } .merge-content .type2 { background: #fad647; color: #774f0d; } .merge-content .type3 { background-image: url(./h5_view_2/images/type3_btn-483352.png); color: #005c80; } .info-bubble { position: absolute; } .info-bubble-content { height: 44px; position: relative; top: -56px; left: -29px; border-radius: 8px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .info-bubble-content p { margin: 0 6px; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #fff; } .info-bubble-content:after { content: ''; position: absolute; width: 0; height: 0; border: 6px solid; border-color: transparent; top: 44px; left: 28px; } .info-bubble-circle { width: 12px; height: 12px; border-radius: 50%; background-color: rgba(0, 0, 0, 0.25); position: absolute; line-height: 6px; text-align: center; top: 0; } .info-bubble-circle-inside { display: inline-block; width: 5px; height: 5px; background: #fff; border-radius: 2px; } .info-bubble-save { position: absolute; } .info-bubble-save .info-bubble-content { height: 88px; top: -112px; left: -58px; border-radius: 16px; } .info-bubble-save .info-bubble-content p { margin: 0 12px; font-size: 24px; } .info-bubble-save .info-bubble-content .info-bubble-content:after { border: 16px solid; top: 88px; left: 56px; } .info-bubble-save .info-bubble-circle { width: 24px; height: 24px; line-height: 12px; } .info-bubble-save .info-bubble-circle .info-bubble-circle-inside { width: 10px; height: 10px; border-radius: 4px; } .pink-bubble .info-bubble-content { background-color: #f3c2cc; } .pink-bubble .info-bubble-content:after { border-top-color: #f3c2cc; } .grey-bubble .info-bubble-content { background-color: #9ea5b6; } .grey-bubble .info-bubble-content:after { border-top-color: #9ea5b6; } .orange-bubble .info-bubble-content { background-color: #fac582; } .orange-bubble .info-bubble-content:after { border-top-color: #fac582; } .blue-bubble .info-bubble-content { background-color: #80c4ff; } .blue-bubble .info-bubble-content:after { border-top-color: #80c4ff; } .yellow-bubble .info-bubble-content { background-color: #edd774; } .yellow-bubble .info-bubble-content:after { border-top-color: #edd774; } .abc-location { color: #404449; line-height: inherit; padding: 5px 15px; margin: 0; width: 100%; height: 100%; word-wrap: break-word; } .abc-location .abc-comp__top-right-tip { position: absolute; right: 0; top: 0; display: inline-block; width: 18px; height: 18px; background: #f69226; line-height: 18px; color: #fff; font-size: 12px; letter-spacing: 0; text-align: center; } .abc-location__container { white-space: nowrap; overflow: hidden; } .catalogue-style .catalogue-change-container .multi-level-list { width: 100%; height: 100%; padding: 16px 0 11px; box-sizing: border-box; } .catalogue-style .catalogue-change-container .multi-level-list .multi-group { width: 100%; min-height: 42px; position: relative; cursor: pointer; text-align: center; vertical-align: middle; border: 1px solid transparent; } .catalogue-style .catalogue-change-container .multi-level-list .multi-group .catalogue-bar { display: none; } .catalogue-style .catalogue-change-container .multi-level-list .multi-group.multi-group-edit:hover { border: 1px solid #1261ff; box-sizing: border-box; } .catalogue-style .catalogue-change-container .multi-level-list .multi-group.multi-group-edit:hover .catalogue-bar { width: 126px; height: 24px; display: flex; justify-content: space-between; position: absolute; bottom: -23px; right: 0; z-index: 1; } .catalogue-style .catalogue-change-container .multi-level-list .multi-group.multi-group-edit:hover .catalogue-bar span { display: inline-block; width: 40px; height: 24px; line-height: 24px; text-align: center; background: #000; border-radius: 3px; opacity: 0.9; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #fff; } .catalogue-style .catalogue-change-container .multi-level-list .multi-group.multi-group-edit:hover .catalogue-pic-bar { position: absolute; bottom: -30px; right: 0; } .catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-one-level { width: 100%; min-height: 42px; line-height: 42px; padding: 0 15px 0 0; box-sizing: border-box; display: flex; flex-flow: nowrap; } .catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-one-level span { display: inline-block; } .catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-one-level .switch { padding-left: 15px; display: inline-block; flex-shrink: 0; min-width: 20px; margin: auto; } .catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-one-level .name { margin-left: 20px; display: inline-block; flex-shrink: 0; max-width: 200px; } .catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-one-level .dashed { display: inline-block; margin: auto 4px; width: 100%; height: 0; flex-shrink: 1; border-bottom: 1px dashed #979797; } .catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-one-level .jump-page { margin: auto; min-height: 42px; display: inline-block; width: 20px; flex-shrink: 0; } .catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-two-level { width: 100%; min-height: 42px; line-height: 42px; padding: 0 15px 0 0; box-sizing: border-box; display: flex; flex-flow: nowrap; } .catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-two-level .switch { padding-left: 30px; display: inline-block; flex-shrink: 0; min-width: 20px; margin: auto; } .catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-two-level .name { margin-left: 20px; display: inline-block; flex-shrink: 0; max-width: 200px; } .catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-two-level .dashed { display: inline-block; margin: auto 4px; width: 100%; height: 0; flex-shrink: 1; border-bottom: 1px dashed #979797; } .catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-two-level .jump-page { margin: auto; display: inline-block; width: 20px; flex-shrink: 0; } .catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-three-level { width: 100%; min-height: 42px; line-height: 42px; padding: 0 15px 0 60px; box-sizing: border-box; display: flex; flex-flow: nowrap; } .catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-three-level .switch { display: none; } .catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-three-level .name { margin-left: 20px; display: inline-block; flex-shrink: 0; max-width: 200px; } .catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-three-level .dashed { display: inline-block; margin: auto 4px; width: 100%; height: 0; flex-shrink: 1; border-bottom: 1px dashed #979797; } .catalogue-style .catalogue-change-container .multi-level-list .multi-group .multi-group-three-level .jump-page { margin: auto; display: inline-block; width: 20px; flex-shrink: 0; } .catalogue-style .catalogue-change-container .multi-level-list .display-dom { display: none; } .catalogue-style .catalogue-change-container .multi-level-list .time-axis-group { position: relative; margin: 24px 0 8px; min-height: 41px; width: 50%; border: 1px solid transparent; } .catalogue-style .catalogue-change-container .multi-level-list .time-axis-group .catalogue-bar { display: none; } .catalogue-style .catalogue-change-container .multi-level-list .time-axis-group.multi-group-edit:hover { border: 1px solid #1261ff; } .catalogue-style .catalogue-change-container .multi-level-list .time-axis-group.multi-group-edit:hover .catalogue-bar { width: 126px; height: 24px; display: flex; justify-content: space-between; position: absolute; bottom: -25px; right: 0; z-index: 1; } .catalogue-style .catalogue-change-container .multi-level-list .time-axis-group.multi-group-edit:hover .catalogue-bar span { display: inline-block; width: 40px; height: 24px; line-height: 24px; text-align: center; background: #000; border-radius: 3px; opacity: 0.9; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #fff; } .catalogue-style .catalogue-change-container .multi-level-list .time-axis-group.multi-group-edit:hover.multi-group-edit:first-child #delete-catalogue { visibility: hidden; } .catalogue-style .catalogue-change-container .multi-level-list .time-axis-group.multi-group-edit:hover.multi-group-edit:first-child .catalogue-time-bar { position: absolute; bottom: -24px; right: -42px; } .catalogue-style .catalogue-change-container .multi-level-list .time-axis-group.multi-group-edit:hover.multi-group-edit:nth-child(2n) .catalogue-time-bar { position: absolute; bottom: -24px; left: 0; } .catalogue-style .catalogue-change-container .multi-level-list .time-axis-group .time-group-every { width: 100%; height: 100%; padding: 6px 9px 0 0; text-align: right; } .catalogue-style .catalogue-change-container .multi-level-list .time-axis-group .time-group-every .name { width: 80%; margin-left: 20%; font-size: 14px; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .catalogue-style .catalogue-change-container .multi-level-list .time-axis-group .time-group-every .time { margin-top: 4px; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #999; line-height: 17px; } .catalogue-style .catalogue-change-container .multi-level-list .time-axis-group .time-node { position: absolute; top: 50%; right: -1px; z-index: 100; transform: translate(50%, -50%); width: 12px; height: 12px; border: 1px solid #fff; background: #333; border-radius: 50%; } .catalogue-style .catalogue-change-container .multi-level-list .time-axis-group.time-axis-group:nth-child(2n) { margin: 24px 0 8px 50%; } .catalogue-style .catalogue-change-container .multi-level-list .time-axis-group.time-axis-group:nth-child(2n) .time-group-every { width: 100%; height: 100%; padding: 6px 0 0 9px; text-align: left; } .catalogue-style .catalogue-change-container .multi-level-list .time-axis-group.time-axis-group:nth-child(2n) .time-group-every .name { width: 80%; margin: 0; font-size: 14px; font-family: PingFangSC-Semibold, PingFang SC; font-weight: 600; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .catalogue-style .catalogue-change-container .multi-level-list .time-axis-group.time-axis-group:nth-child(2n) .time-group-every .time { margin-top: 4px; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #999; line-height: 17px; } .catalogue-style .catalogue-change-container .multi-level-list .time-axis-group.time-axis-group:nth-child(2n) .time-node { position: absolute; top: 50%; left: -1px; z-index: 100; transform: translate(-50%, -50%); width: 12px; height: 12px; border: 1px solid #fff; background: #333; border-radius: 50%; } .catalogue-style .catalogue-change-container .multi-level-list .group-click { border: 1px solid #1261ff; box-sizing: border-box; } .catalogue-style .catalogue-change-container .pic-level-list { display: flex; justify-content: center; flex-wrap: wrap; align-content: flex-start; } .catalogue-style .catalogue-change-container .pic-level-list .picture-group { width: 31.25%; margin-right: 3%; margin-bottom: 8px; position: relative; cursor: pointer; text-align: center; vertical-align: middle; border: 1px solid transparent; } .catalogue-style .catalogue-change-container .pic-level-list .picture-group .catalogue-bar { display: none; } .catalogue-style .catalogue-change-container .pic-level-list .picture-group.multi-group-edit:hover { border: 1px solid #1261ff; } .catalogue-style .catalogue-change-container .pic-level-list .picture-group.multi-group-edit:hover .catalogue-bar { width: 126px; height: 24px; display: flex; justify-content: space-between; position: absolute; bottom: -25px; right: 0; z-index: 1; } .catalogue-style .catalogue-change-container .pic-level-list .picture-group.multi-group-edit:hover .catalogue-bar span { display: inline-block; width: 40px; height: 24px; line-height: 24px; text-align: center; background: #000; border-radius: 3px; opacity: 0.9; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #fff; } .catalogue-style .catalogue-change-container .pic-level-list .picture-group.multi-group-edit:hover.multi-group-edit:first-child #delete-catalogue { visibility: hidden; } .catalogue-style .catalogue-change-container .pic-level-list .picture-group.multi-group-edit:hover.multi-group-edit:nth-child(3n + 1) .catalogue-pic-bar { position: absolute; bottom: -24px; left: 0; } .catalogue-style .catalogue-change-container .pic-level-list .picture-group .picture-group-every { width: 100%; background: #fff; flex: 0 1 auto; } .catalogue-style .catalogue-change-container .pic-level-list .picture-group .picture-group-every .pic-style { display: block; width: 100%; } .catalogue-style .catalogue-change-container .pic-level-list .picture-group .picture-group-every .name { position: relative; width: 80%; display: inline-block; min-height: 30px; padding: 0 6px; box-sizing: border-box; font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #333; } .catalogue-style .catalogue-change-container .pic-level-list .picture-group .picture-group-every .name span { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .catalogue-style .catalogue-change-container .pic-level-list .picture-group.picture-group:last-child, .catalogue-style .catalogue-change-container .pic-level-list .picture-group.picture-group:nth-child(3n) { margin-right: 0; } .catalogue-style .catalogue-change-container .pic-level-list .group-click { border: 1px solid #1261ff; box-sizing: border-box; } .catalogue-style .catalogue-change-container .pic-double-list { width: 67%; display: flex; justify-content: center; flex-wrap: wrap; align-content: flex-start; } .catalogue-style .catalogue-change-container .pic-double-list .picture-group { width: 47%; margin-right: 3%; margin-bottom: 8px; position: relative; cursor: pointer; text-align: center; vertical-align: middle; border: 1px solid transparent; } .catalogue-style .catalogue-change-container .pic-double-list .picture-group .catalogue-bar { display: none; } .catalogue-style .catalogue-change-container .pic-double-list .picture-group.multi-group-edit:hover { border: 1px solid #1261ff; } .catalogue-style .catalogue-change-container .pic-double-list .picture-group.multi-group-edit:hover .catalogue-bar { width: 126px; height: 24px; display: flex; justify-content: space-between; position: absolute; bottom: -25px; right: 0; z-index: 1; } .catalogue-style .catalogue-change-container .pic-double-list .picture-group.multi-group-edit:hover .catalogue-bar span { display: inline-block; width: 40px; height: 24px; line-height: 24px; text-align: center; background: #000; border-radius: 3px; opacity: 0.9; font-size: 12px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #fff; } .catalogue-style .catalogue-change-container .pic-double-list .picture-group.multi-group-edit:hover.multi-group-edit:first-child #delete-catalogue { visibility: hidden; } .catalogue-style .catalogue-change-container .pic-double-list .picture-group.multi-group-edit:hover.multi-group-edit:nth-child(odd) .catalogue-pic-bar { position: absolute; bottom: -24px; left: 0; } .catalogue-style .catalogue-change-container .pic-double-list .picture-group .picture-group-every { width: 100%; background: #fff; flex: 0 1 auto; } .catalogue-style .catalogue-change-container .pic-double-list .picture-group .picture-group-every .pic-style { display: block; width: 100%; } .catalogue-style .catalogue-change-container .pic-double-list .picture-group .picture-group-every .name { position: relative; width: 80%; display: inline-block; min-height: 30px; padding: 0 6px; box-sizing: border-box; font-size: 14px; font-family: PingFangSC-Regular, PingFang SC; font-weight: 400; color: #333; } .catalogue-style .catalogue-change-container .pic-double-list .picture-group .picture-group-every .name span { display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; text-align: center; text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } .catalogue-style .catalogue-change-container .pic-double-list .picture-group.picture-group:nth-child(2n) { margin-right: 0; } .catalogue-style .catalogue-change-container .pic-double-list .group-click { border: 1px solid #1261ff; box-sizing: border-box; } .catalogue-style .catalogue-change-container .time-axis-line { width: 2px; height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #000; } .comp-weather .comp-style-type { width: 100%; height: 100%; } .comp-weather .comp-style-type.style-type-1 { padding-left: 20px; padding-right: 20px; display: flex; justify-content: space-between; align-items: center; font-size: 14px; line-height: 14px; } .comp-weather .comp-style-type.style-type-1 .left { display: flex; flex-direction: column; } .comp-weather .comp-style-type.style-type-1 .left .temprature { display: flex; margin-bottom: 8px; } .comp-weather .comp-style-type.style-type-1 .left .temprature .num { line-height: 36px; font-size: 32px; font-weight: 500; } .comp-weather .comp-style-type.style-type-1 .right { display: flex; flex-direction: column; } .comp-weather .comp-style-type.style-type-1 .right > img { width: 36px; height: 36px; margin-bottom: 8px; } .comp-weather .comp-style-type.style-type-1 .right .weather { text-align: center; } .comp-weather .comp-style-type.style-type-2 { padding-left: 20px; display: flex; align-items: center; font-size: 14px; line-height: 14px; } .comp-weather .comp-style-type.style-type-2 .temprature { display: flex; margin-top: -2px; } .comp-weather .comp-style-type.style-type-2 .temprature .num { font-size: 20px; font-weight: 500; line-height: 20px; } .comp-weather .comp-style-type.style-type-2 .weather { margin-left: 9px; } .comp-weather .comp-style-type.style-type-2 .line { margin-left: 10px; margin-right: 8px; font-size: 12px; } .comp-weather .comp-style-type.style-type-3 { padding-left: 20px; display: flex; flex-direction: column; justify-content: center; font-size: 14px; line-height: 14px; } .comp-weather .comp-style-type.style-type-3 .top { display: flex; align-items: flex-end; } .comp-weather .comp-style-type.style-type-3 .top .temprature { display: flex; } .comp-weather .comp-style-type.style-type-3 .top .temprature .num { font-size: 32px; font-weight: 500; line-height: 48px; } .comp-weather .comp-style-type.style-type-3 .top .temprature .unit { margin-top: 8px; font-size: 24px; } .comp-weather .comp-style-type.style-type-3 .top .weather { margin-left: 8px; margin-bottom: 11px; } .comp-weather .comp-style-type.style-type-3 .location { margin-top: 8px; } .comp-weather .comp-style-type.style-type-4 { display: flex; flex-direction: column; justify-content: center; align-items: center; } .comp-weather .comp-style-type.style-type-4 .temprature { position: relative; } .comp-weather .comp-style-type.style-type-4 .temprature .num { font-size: 24px; font-weight: 500; line-height: 32px; } .comp-weather .comp-style-type.style-type-4 .temprature .unit { position: absolute; top: 0; right: 0; transform: translateX(100%); font-size: 24px; } .comp-weather .comp-style-type.style-type-4 .location { font-size: 12px; line-height: 12px; margin-top: 4px; } .comp-weather .comp-style-type.style-type-4 > img { width: 32px; height: 32px; margin-top: 17px; } .comp-weather .comp-style-type.style-type-5 { display: flex; justify-content: center; align-items: center; font-size: 14px; line-height: 14px; font-family: Zhankukuaileti; } .comp-weather .comp-style-type.style-type-5 .temprature { display: flex; } .comp-weather .comp-style-type.style-type-5 .temprature .num { font-size: 32px; font-weight: 500; line-height: 48px; } .comp-weather .comp-style-type.style-type-5 .temprature .unit { margin-top: 12px; margin-left: 4px; width: 14px; height: 14px; } .comp-weather .comp-style-type.style-type-5 .location-icon { font-size: 14px; margin-right: 4px; } .comp-weather .comp-style-type.style-type-5 > img { width: 36px; height: 36px; margin-left: 31px; } .comp-weather .comp-style-type.style-type-6 { padding-left: 20px; padding-right: 20px; display: flex; align-items: center; font-size: 14px; line-height: 14px; } .comp-weather .comp-style-type.style-type-6 .wrapper { width: 100%; display: flex; justify-content: space-between; align-items: flex-end; } .comp-weather .comp-style-type.style-type-6 .wrapper .left { display: flex; align-items: flex-end; } .comp-weather .comp-style-type.style-type-6 .wrapper .left .temprature { display: flex; } .comp-weather .comp-style-type.style-type-6 .wrapper .left .temprature .num { line-height: 26px; font-size: 32px; font-weight: 500; } .comp-weather .comp-style-type.style-type-6 .wrapper .left .temprature .unit { margin-left: 3px; margin-top: 3px; font-size: 24px; width: 8px; text-align: center; } .comp-weather .comp-style-type.style-type-6 .wrapper .left .weather { margin-left: 4px; } .comp-weather .comp-style-type.style-type-6 .wrapper .right { display: flex; } .comp-weather .comp-style-type.style-type-6 .wrapper .right .location-icon { font-size: 14px; margin-right: 4px; } .comp_paragraph { font-size: 24px; color: #404449; line-height: inherit; padding: 0.3em 15px; margin: 0; width: 100%; height: 100%; word-wrap: break-word; } .comp_paragraph a { color: inherit; text-decoration: inherit; } .wsite-text a { display: inline; } #report0 { width: 260px; position: absolute; left: 50%; margin-left: -130px; z-index: 999; padding-bottom: 20px; touch-action: none; } #report0, #report1 { background-color: #fff; } #report1 { width: 100%; height: 40%; top: 20%; z-index: 1000; position: relative; } #report2 { width: 100%; background-color: #f66; color: #fff; text-align: center; padding: 15px 0; } #report2 h1 { font-size: 16px; margin-top: 10px; } #report3 { margin-top: 20px; width: 100%; text-align: center; } #report3 ul li { font-size: 15px; line-height: 40px; } #report3 li.active span { color: #f66; background: url(./h5_view_2/images/jubao_07-674ee2.png) no-repeat 100%; padding-right: 20px; background-size: 15px; } #report4 { text-align: center; margin-top: 10px; } #report4 a { display: block; width: 140px; height: 30px; margin: auto; line-height: 30px; font-size: 14px; border-radius: 3px; background-color: #f66; color: #fff; text-align: center; } .report_landscape { top: 105px !important; left: 160px !important; height: 260px !important; width: 260px !important; overflow-x: scroll !important; padding: 0 !important; } .report_landscape #report2, .report_landscape #report3, .report_landscape #report4 { transform: rotate(90deg) translateZ(0); position: absolute; width: 260px !important; } .report_landscape #report2 { top: 75px !important; right: -75px !important; height: 109px; box-sizing: border-box; } .report_landscape #report3 { top: -30px !important; right: 118px; } .report_landscape #report4 { top: 105px !important; } .report_landscape #report1 { top: 0 !important; height: 100%; overflow-y: hidden; } .comp_drop_down { position: relative; padding: 0 8px; } .comp_drop_down:after { content: ''; position: absolute; top: 50%; margin-top: -3px; width: 0; height: 0; border-style: solid; border-width: 5px; border-color: #676767 transparent transparent; right: 8px; } .comp_drop_down .comp_drop_down_select { background: inherit; border: none; font-size: 16px; -webkit-appearance: none; padding-left: 0; } .comp_drop_down .comp_drop_down_select .comp_select_option { letter-spacing: 0; text-decoration: none; font-style: normal; font-size: 12px; color: #676767; } .comp_input { width: 240px; height: 36px; background: transparent; border: none; padding: 8px !important; font-weight: 400; font-size: 16px; } .comp_input::-webkit-input-placeholder { color: inherit; font-size: 16px; } .comp_input:focus { border: none; } .wsite-input .element-box { color: #676767; border: 1px solid #ccc; border-radius: 5px; } .date-icon { position: absolute; top: calc(50% - 18px); right: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; pointer-events: none; } .hide-date { display: none; } .nr .comp_rating { width: 240px; background: transparent; border: 0; padding: 8px !important; font-size: 16px; } .nr .comp_rating .rating-icons, .nr .comp_rating .rating-title { display: inline-block; padding: 5px; vertical-align: top; } .nr .comp_rating .rating-icons, .nr .comp_rating .rating-title { display: inline-block; padding: 5px; padding-left: 0; vertical-align: top; } .nr .comp_rating .rating-icons { padding-right: 0; } .nr .comp_rating .rating-icons i { margin-right: 5px; } .nr .comp_rating .rating-icons i:last-child { margin-right: 0; } .nr .comp_rating .rating-icons i.rating-l { font-size: 18px; } .nr .comp_rating .rating-icons i.rating-m { font-size: 15px; } .nr .comp_rating .rating-icons i.rating-s { font-size: 12px; } .comp_radio { width: 240px; background: transparent; border: 0; font-size: 16px; } .comp_radio .radio-title { min-height: 36px; padding: 8px; } .comp_radio .options { background: #fff; height: 100%; color: #76838f; } .comp_radio .options .option-group { padding: 7px 0; margin: 0 8px; line-height: 18px; border-bottom: 1px solid #59c7f9; } .comp_radio .options .option-group:last-child { border-bottom: none; } .comp_radio .options .option-group .option-label { font-size: 12px; margin-bottom: 0; display: inline-block; } .comp_radio .options .option-group .option-label input { vertical-align: middle; margin-right: 5px; } .red-packet-receive-fail { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 999999; } .red-packet-receive-fail__content { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 244px; background: #fff; border-radius: 12px; padding: 51px 0 32px; } .red-packet-receive-fail__content .receive-fail-desc { font-size: 16px; font-weight: 500; color: #111; line-height: 28px; width: 192px; text-align: center; word-break: break-all; margin-bottom: 36px; margin-left: auto; margin-right: auto; } .red-packet-receive-fail__content .receive-fail-know-btn { width: 130px; height: 44px; line-height: 44px; text-align: center; font-size: 17px; color: #333; background: url(./h5_view_2/images/knowBg-ff1b51.png) 50% no-repeat; background-size: 100% 100%; margin: auto; cursor: pointer; } .red-packet-receive-fail__content img.receive-fail-logo { position: absolute; top: -50px; width: 160px; height: 100px; left: 50%; transform: translateX(-50%); z-index: 1; } .red-packet-receive-success { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 999999; } .red-packet-receive-success__ct { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .red-packet-receive-success__ct .open-red-packet-content { width: 256px; height: 350px; background: url(./h5_view_2/images/openRedpacketbg-5e6ec0.png) 50% no-repeat; background-size: 100% 100%; margin-bottom: 20px; padding-top: 86px; } .red-packet-receive-success__ct .open-red-packet-content .red-packet-congratulation { font-size: 20px; font-weight: 500; line-height: 28px; color: #ebcd99; margin: auto; text-align: center; } .red-packet-receive-success__ct .open-red-packet-content .open-red-packet { width: 88px; height: 88px; background: url(./h5_view_2/images/openRedpacket-1bcc6f.png) 50% no-repeat; background-size: 100% 100%; margin-top: 89px; cursor: pointer; margin-left: auto; margin-right: auto; } .red-packet-receive-success__ct .open-red-packet-close-btn { margin: auto; width: 32px; height: 32px; font-size: 32px; color: #ebcd99; line-height: 32px; cursor: pointer; } .red-packet-receive-success .receive-money-head-bg { width: 100%; } .red-packet-receive-success .receive-money-congratulation { margin-top: 24px; text-align: center; font-size: 20px; font-weight: 500; color: #111; line-height: 28px; } .red-packet-receive-success .receive-money-num { margin-top: 8px; display: flex; justify-content: center; align-items: flex-end; color: #f25b4a; } .red-packet-receive-success .receive-money-num .money-num { font-size: 48px; font-weight: 500; line-height: 67px; margin-right: 4px; } .red-packet-receive-success .receive-money-num .unit { font-size: 12px; line-height: 17px; margin-bottom: 12px; } .red-packet-receive-success .receive-tip { margin-top: 12px; font-size: 13px; color: #cfac74; line-height: 18px; text-align: center; } .red-packet-receive-success .receive-money-know-btn { margin-top: 40px; margin-left: auto; margin-right: auto; width: 124px; height: 44px; background: #f2eeee; border-radius: 2px; text-align: center; line-height: 44px; font-size: 14px; color: #cfac74; cursor: pointer; } .special-red-packet { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.8); z-index: 999999; transform: translateZ(0); } .special-red-packet.red-packet-rain { background: url(./h5_view_2/images/redpacketRainBg-16c27a.png) top no-repeat; background-size: cover; } .special-red-packet__close-btn { position: absolute; top: 16px; right: 16px; border-radius: 100%; width: 24px; height: 24px; background: rgba(0, 0, 0, 0.6); z-index: 2; font-size: 16px; line-height: 24px; color: #fff; text-align: center; cursor: pointer; } .special-red-packet__ct { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; z-index: 1; } .special-red-packet__ct.red-packet-rain { top: 0; left: 0; right: 0; bottom: 0; transform: none; overflow: hidden; } .special-red-packet__ct__content { width: 244px; height: 332px; position: relative; } .special-red-packet__ct__content img.red-packet { cursor: pointer; max-width: 100%; max-height: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .special-red-packet .red-packet-rain-item { cursor: pointer; } @keyframes red-packet-rain-drop-right-rotate { 0% { top: -100px; transform: rotate(30deg); } to { top: 110%; transform: rotate(120deg); } } @keyframes red-packet-rain-drop-left-rotate { 0% { top: -100px; transform: rotate(-30deg); } to { top: 110%; transform: rotate(-120deg); } } .privacy-policy-info { display: none; position: absolute; left: 0; bottom: 0; width: 100%; background: #fff; border-radius: 16px 16px 0 0; z-index: 9999999; } .privacy-policy-info.landScape-scene { transform: translateZ(0) rotate(90deg); -webkit-transform: translateZ(0) rotate(90deg); -webkit-transform-origin: left bottom; transform-origin: left bottom; bottom: 100%; } .privacy-policy-info.landScape-scene .privacy-policy-info__content { padding: 16px 32px 2px; } .privacy-policy-info__header { height: 48px; position: relative; } .privacy-policy-info__header .title { text-align: center; line-height: 48px; font-size: 14px; font-weight: 500; color: #333; } .privacy-policy-info__header .return-btn { position: absolute; top: 12px; left: 16px; font-size: 24px; color: #333; cursor: pointer; } .privacy-policy-info__content_ct { height: calc(100% - 48px); overflow: scroll; } .privacy-policy-info__content { padding: 16px 16px 2px; } .privacy-policy-info__content .headline { font-size: 18px; font-weight: 600; color: #333; line-height: 26px; } .privacy-policy-info__content .privacy-policy-main { margin-top: 16px; } .privacy-policy-info__content .privacy-policy-main p { font-size: 15px; line-height: 1.7; text-align: left !important; color: #333; } .privacy-policy-info__content .privacy-policy-main .bold-text { font-weight: 600; } .privacy-policy-info__content .privacy-policy-main .underline { text-decoration: underline; } .privacy-policy-info__content .privacy-policy-main .line-wrap { margin-bottom: 25px; } .comp_sms .telephone { width: 100%; height: 44%; padding: 8px; font-size: 16px; } .comp_sms .telephone::-webkit-input-placeholder { color: inherit; font-size: 16px; } .comp_sms .smsInput { width: 50%; height: 44%; padding: 8px; font-size: 16px; } .comp_sms .smsInput::-webkit-input-placeholder { color: inherit; font-size: 16px; } .comp_sms .smsButton { -webkit-appearance: none; float: right; color: #666; width: 42%; height: 44%; font-size: 12px; background: #ebebeb; border: none; border-radius: 0; } .comp_formRandom { position: relative; -webkit-overflow-scrolling: touch; overflow-y: auto; } .comp_formRandom .default-content { position: absolute; top: 50%; left: 50%; margin-left: -70px; margin-top: -73px; } .comp_formRandom .default-content img { width: 100px; height: 110px; } .comp_formRandom .default-content p { margin-top: 15px; } .comp_formRandom .default-content.hide { display: none; } .comp_formRandom iframe { width: 100%; height: 100%; } .comp_formRandom iframe.hide { display: none; } .comp_wechat_hear, .comp_wechat_play { width: 100px; height: 40px; text-align: center; line-height: 40px; } .recording { background-color: #ccc; } .voice-panel { position: absolute; width: 120px; height: 110px; background-color: rgba(0, 0, 0, 0.6); color: #fff; z-index: 1000; top: 50%; left: 50%; margin-left: -60px; margin-top: -120px; padding-top: 10px; text-align: center; border-radius: 5px; font-size: 70px; } .voice-panel .icon { font-size: 60px; } .voice-panel .voice-tip { font-size: 12px; } .vote-view { font-size: 12px; padding-bottom: 30px; } .vote-view .vote-view-title { font-size: 14px; color: #37474f; background-color: #f0f3f4; line-height: 20px; padding: 5px 10px; border: 1px solid #ccd5db; word-break: break-all; white-space: pre-wrap; } .vote-view .vote-view-options { position: relative; border-left: 1px solid #ccd5db; border-right: 1px solid #ccd5db; } .vote-view .vote-view-options .vote-view-option { position: relative; padding: 6px 10px; cursor: pointer; line-height: 20px; word-break: break-all; white-space: pre-wrap; } .vote-view .vote-view-options .vote-view-option span { color: #8cdfb3; display: inline-block; padding-right: 5px; width: 17px; height: 20px; float: left; } .vote-view .vote-view-options .vote-view-option:hover { background-color: #f7f7f7; } .vote-view .vote-view-options .vote-view-option:last-child { border-bottom: none; } .vote-view .vote-view-option, .vote-view .vote-view-title { border-bottom: 1px solid #e7e7e7; } .vote-view .vote-view-text { width: calc(100% - 17px); } .vote-view .vote-view-button { text-align: center; border: 1px solid #ccd5db; color: #fff; cursor: pointer; height: 30px; line-height: 30px; position: absolute; bottom: 0; left: 0; width: 100%; } .vote-view .vote-view-button:hover { background-color: #56c6ff; } .vote-alert { opacity: 0; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.3); z-index: -2; text-align: center; transition: all 0.3s ease-in-out 0s; } .vote-alert span { background-color: #fff; padding: 10px 15px; top: 50%; margin-top: -16px; left: 50%; margin-left: -75px; position: absolute; display: block; } .vote-img { height: 100%; width: 100%; position: relative; border: 1px solid #ccd5db; } .vote-img .vote-img-prev-title { width: 100%; background-color: #f0f3f4; border-bottom: 1px solid #ccd5db; height: 40px; } .vote-img .vote-img-prev-title h1 { font-size: 14px; color: #37474f; line-height: 20px; padding: 10px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; max-width: 250px; float: left; border: none; margin: 0; } .vote-img .vote-img-prev-title .vote-img-sing-double { float: left; line-height: 40px; } .vote-img a.btn-main { background-color: #08a1ef; width: 100%; text-align: center; cursor: pointer; height: 30px; line-height: 30px; position: absolute; left: 0; right: 0; bottom: 0; border-top: 1px solid #ccd5db; } .vote-img a.btn-main:hover { background-color: #56c6ff; } .vote-img .slides { position: relative; padding-bottom: 5px; height: 365px; } .vote-img .slides .vote-img-desc { display: -webkit-box; display: -ms-flexbox; display: flex; height: 24px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; text-align: center; padding-bottom: 5px; } .vote-img .slides .vote-img-desc li { position: relative; font-size: 12px; display: none; } .vote-img .slides .slidesjs-container { position: relative; margin-bottom: 5px; } .vote-img .slides .slidesjs-container span { position: absolute; top: 10px; right: 10px; z-index: 1000; font-size: 18px; width: 20px; height: 20px; text-align: center; line-height: 21px; } .vote-img .slides .slidesjs-container span.active { color: #08a1ef; } .vote-img .slides .slidesjs-pagination { position: absolute; bottom: 0; left: 0; right: 0; text-align: center; line-height: 10px; height: 10px; } .vote-img .slides .slidesjs-pagination li { position: relative; display: inline-block; font-size: 0; } .vote-img .slides .slidesjs-pagination li a { width: 5px; height: 5px; display: inline-block; background-color: #f0f3f4; border-radius: 50%; margin-right: 5px !important; text-indent: 9999px; } .vote-img .slides .slidesjs-pagination li a.active { background-color: #08a1ef; } .vote-img .slides__landscape { height: 208px; } .vote-img .slides__landscape .vote-img-desc { justify-content: start; padding: 0 10px; } .vote-img .vote-img-ul { position: relative; border-left: 1px solid #ccd5db; border-right: 1px solid #ccd5db; } .vote-img .vote-img-ul .vote-img-li { position: relative; padding: 6px 10px; cursor: pointer; line-height: 20px; } .vote-img .vote-img-ul .vote-img-li:hover { background-color: #f7f7f7; } .vote-img .vote-img-ul .vote-img-li:last-child { border-bottom: none; } .vote-img .vote-img-li, .vote-img h1 { border-bottom: 1px solid #e7e7e7; } .board-pen { position: absolute; top: 10px; left: 10px; height: 24px; width: 24px; border-radius: 50%; cursor: pointer; background: #59c7f9; color: #fff; text-align: center; line-height: 24px; transform: translateZ(0); z-index: 2; } .board-pen:hover { background-color: #08a1ef; } .board-close { transform: translateZ(0); z-index: 2; position: absolute; top: 10px; right: 10px; height: 24px; width: 24px; font-size: 14px; background: #ccd5db; text-align: center; line-height: 24px; border-radius: 50%; color: #fff; cursor: pointer; } .board-close:hover { background-color: #ff7e7e; } .boarding { cursor: url(./h5_view_2/images/pen2-2cac50.svg), auto; } .board-bg { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.9); z-index: 10; } .board-bg span { color: #fff; position: absolute; top: 50%; left: 50%; margin-top: -7px; margin-left: -34px; font-size: 14px; } .board-btn { position: absolute; bottom: 0; width: 50%; line-height: 25px; height: 25px; font-size: 12px; text-align: center; border: 1px solid #e6ebed; transform: translateZ(0); z-index: 2; } .board-reset { left: 0; background-color: #e6ebed; } .board-end { right: 0; color: #fff; background-color: #59c7f9; border-color: #59c7f9; } .board-end:hover { color: #fff; background-color: #08a1ef; border-color: #08a1ef; } .element-pip-button { width: 100%; height: 100%; } .element-pip-button > div { width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: 50%; -webkit-touch-callout: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .element-pip-button > div.back { display: none; } .game-turntable-box { width: inherit; height: inherit; padding-top: 40px; position: relative; } .game-turntable-box .silk-bag { position: absolute; top: 75px; left: 35px; cursor: pointer; } .game-turntable-box .silk-bag img { width: 50px; } .turntable-box { position: relative; width: 300px; height: 300px; margin: 70px auto 0; border-radius: 50%; } .turntable-box img { width: 300px; } .turntable-container { position: absolute; left: 36px; top: 36px; z-index: 1; width: 230px; height: 230px; border-radius: inherit; background-clip: padding-box; background-color: #ffcb3f; transition: all 6s ease; } .turntable-container canvas { width: inherit; height: inherit; border-radius: 50%; } .turntable-list { position: absolute; left: 0; top: 0; width: inherit; height: inherit; z-index: 2; } .turntable-item { position: absolute; left: 0; top: 0; width: 100%; height: 100%; color: #e4370e; font-weight: 700; text-shadow: 0 1px 1px hsla(0, 0%, 100%, 0.6); } .turntable-item span { position: relative; display: block; padding-top: 20px; margin: 0 auto; text-align: center; -webkit-transform-origin: 50% 115px; transform-origin: 50% 115px; } .turntable-item span em { display: block; line-height: 14px; width: 50px; margin: 0 auto; } .turntable-item span em.prize-len-2, .turntable-item span em.prize-len-4 { width: 100px; line-height: 18px; } .turntable-item span em.prize-len-6, .turntable-item span em.prize-len-8 { width: 80px; } .turntable-btn { position: absolute; left: 110px; top: 110px; z-index: 3; width: 80px; height: 80px; border-radius: 50%; color: #f4e9cc; background-color: #e44025; line-height: 80px; text-align: center; font-size: 20px; text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.6); box-shadow: 0 3px 5px rgba(0, 0, 0, 0.6); text-decoration: none; } .turntable-btn img { width: 80px; position: absolute; top: -18px; left: 0; cursor: pointer; } .turntable-btn.disabled { pointer-events: none; background: #b07a7b; color: #ccc; } .turntable-btn.disabled:after { border-bottom-color: #b07a7b; } .gb-run { transition: all 6s ease; } .mask-container { position: absolute; top: 0; left: 0; bottom: 0; right: 0; z-index: 20; background-color: rgba(0, 0, 0, 0.8); color: #fff; text-align: center; transition: all 6s ease; } .mask-container .mask-close { width: 45px; height: 45px; position: absolute; top: 5px; right: 10px; font-size: 32px; background: url(./h5_view_2/images/close-a2536b.png) 50% no-repeat; background-size: 70%; cursor: pointer; } .mask-container .header { display: flex; position: relative; width: 250px; } .mask-container .header li { line-height: 50px; } .mask-container .header li:first-child { width: 140px; } .mask-container .header li:nth-child(2) { width: 110px; } .mask-container .header li a { display: block; font-size: 18px; color: #fff; } .mask-container .mask-btn { margin-top: 20px; width: 200px; height: 46px; line-height: 46px; padding: 0; background-color: #1261ff; color: #fff; border: none; outline: none; } .mask-container .mask-btn:active, .mask-container .mask-btn:hover { background-color: #2c72ff; } .mask-container p { line-height: 36px; font-size: 21px; } .mask-container img { width: 145px; } .mask-container .win-lottery { padding-top: 50px; } .mask-container .win-lottery img { margin: 20px 0; } .mask-container .win-lottery .level { color: #fff500; } .mask-container .win-lottery .detail { font-size: 18px; } .mask-container .lost-lottery img { margin: 80px 0 20px; } .mask-container .activity-lottery { border-top: 1px solid #fff; } .mask-container .activity-lottery .title { width: 75px; line-height: 28px; color: #526069; background-color: #fff; font-size: 14px; margin-bottom: 10px; } .mask-container .activity-lottery .explain-container { padding: 20px 10px; } .mask-container .activity-lottery .explain-container .activity-info .prize-list li { line-height: 24px; text-align: left; } .mask-container .activity-lottery .explain-container .activity-time { margin-top: 20px; } .mask-container .activity-lottery .explain-container .activity-time p { text-align: left; font-size: 14px; } .mask-container .activity-lottery .prize-container { position: absolute; width: 100%; height: 400px; bottom: 30px; top: 70px; overflow-y: auto; -webkit-overflow-scrolling: touch; } .mask-container .activity-lottery .prize-container .prize-info { margin: 0 auto 20px; width: 260px; min-height: 80px; border: 2px solid #fff; padding-top: 16px; text-align: left; position: relative; } .mask-container .activity-lottery .prize-container .prize-info .ticket-img { width: 35px; height: 32px; background: url(./h5_view_2/images/ticket-4f973c.png) no-repeat; background-size: 100%; position: absolute; top: -2px; left: -2px; } .mask-container .activity-lottery .prize-container .prize-info .code-period, .mask-container .activity-lottery .prize-container .prize-info .isEmptyAward { margin-left: 12px; line-height: 18px; font-size: 14px; } .mask-container .activity-lottery .prize-container .prize-info .code-period { font-size: 12px; } .mask-container .arrow { margin-top: 20px; width: 70px; height: 3px; background-color: #fff; position: absolute; bottom: 0; left: 35px; } .mask-container .arrow.detail { left: 45px; } .mask-container .arrow.my-prize { left: 145px; } .mask-container .arrow:after { content: ''; position: absolute; left: 0; bottom: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 10px solid #fff; width: 0; right: 0; margin: auto; } .lottery-container { padding-top: 20px; line-height: 36px; text-align: center; font-size: 20px; letter-spacing: 3px; } .lottery-container p { color: #fcfaf8; } .lottery-container p, .lottery-container span { text-shadow: #ed3835 -1px -1px 0, #ed3835 0 -1px 0, #ed3835 1px -1px 0, #ed3835 1px 0 0, #ed3835 1px 1px 0, #ed3835 0 1px 0, #ed3835 -1px 1px 0, #ed3835 -1px 0 0 !important; } .lottery-container span { display: inline-block; color: #fff500; } @keyframes landRotate { 0% { transform: rotate(0deg); } to { transform: rotate(100turn); } } @-webkit-keyframes landRotate { 0% { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(100turn); } } @keyframes eggRotate { 0% { transform: rotate(0deg); } to { transform: rotate(-100turn); } } @-webkit-keyframes eggRotate { 0% { -webkit-transform: rotate(0deg); } to { -webkit-transform: rotate(-100turn); } } @keyframes zIndex { 0% { z-index: 1; } 25% { z-index: -1; } 55% { z-index: -1; } 75% { z-index: 1; } } @-webkit-keyframes zIndex { 0% { z-index: 1; } 25% { z-index: -1; } 55% { z-index: -1; } 75% { z-index: 1; } } @keyframes hammer { 50% { transform: rotate(15deg); } } @-webkit-keyframes hammer { 50% { -webkit-transform: rotate(15deg); } } .game-box { width: inherit; height: inherit; overflow: hidden; background: url(./h5_view_2/images/bg-egg-3ed006.jpg) no-repeat; position: relative; } .game-box .silk-bag { position: absolute; top: 75px; left: 35px; z-index: 10; cursor: pointer; } .game-box .silk-bag img { width: 50px; } .game-box .stage { position: relative; width: 100%; height: 470px; overflow: hidden; } .game-box .stage img.tray { margin-top: 10px; width: 100%; height: 100%; } .game-box .land-box { width: 320px; height: 320px; position: absolute; bottom: 7%; left: 0; right: 0; margin: auto; border-radius: 50%; animation: landRotate 1000s linear; -webkit-animation: landRotate 1000s linear; -moz-animation: landRotate 1000s linear; -o-animation: landRotate 1000s linear; } .game-box .egg.pause, .game-box .land-box.pause { -webkit-animation: none !important; animation: none !important; -o-animation: none !important; } .game-box .egg { width: 150px; height: 174px; transform-origin: center; -webkit-transform-origin: center; background: url(./h5_view_2/images/egg-df3670.png) no-repeat 50%; background-size: cover; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; border-radius: 100%; } .game-box .egg:first-child { margin-top: 45%; animation: eggRotate 1000s linear, zIndex 10s 0ms infinite linear; -webkit-animation: eggRotate 1000s linear, zIndex 10s 0ms infinite linear; -moz-animation: eggRotate 1000s linear, zIndex 10s 0ms infinite linear; -o-animation: eggRotate 1000s linear, zIndex 10s 0ms infinite linear; } .game-box .egg:nth-child(2) { margin-top: 10%; margin-left: 8%; animation: eggRotate 1000s linear, zIndex 10s -2.5s infinite linear; -webkit-animation: eggRotate 1000s linear, zIndex 10s -2.5s infinite linear; -moz-animation: eggRotate 1000s linear, zIndex 10s -2.5s infinite linear; -o-animation: eggRotate 1000s linear, zIndex 10s -2.5s infinite linear; } .game-box .egg:nth-child(3) { margin-top: 10%; margin-right: 8%; animation: eggRotate 1000s linear, zIndex 10s -5.5s infinite linear; -webkit-animation: eggRotate 1000s linear, zIndex 10s -5.5s infinite linear; -moz-animation: eggRotate 1000s linear, zIndex 10s -5.5s infinite linear; -o-animation: eggRotate 1000s linear, zIndex 10s -5.5s infinite linear; } .game-box .egg-smash { position: absolute; left: 0; right: 0; bottom: 18%; width: 150px; max-width: none; display: none; } .game-box .hammer { position: absolute; z-index: 10; left: -30%; top: -30%; width: 104px; display: block; max-width: none; animation: hammer 0.5s alternate; -webkit-animation: hammer 0.5s alternate; -moz-animation: hammer 0.5s alternate; -o-animation: hammer 0.5s alternate; transform-origin: bottom left; -webkit-transform-origin: bottom left; -moz-transform-origin: bottom left; -o-transform-origin: bottom left; -ms-transform-origin: bottom left; } .game-box .lottery-container { padding-top: 0; } .game-scratch-box { width: inherit; height: inherit; overflow: hidden; background: url(./h5_view_2/images/homeBg-4fc2a0.jpg) no-repeat; } .game-scratch-box .main-box { width: 320px; margin: 70px 0 0 30px; text-align: center; position: relative; } .game-scratch-box .main-box .silk-bag { position: absolute; top: 5px; left: 5px; z-index: 10; cursor: pointer; } .game-scratch-box .main-box .silk-bag img { width: 50px; } .game-scratch-box .main-box .title-box { width: inherit; margin-bottom: 30px; } .game-scratch-box .main-box .title-box img { width: inherit; } .game-scratch-box .main-box .title-down { animation: bounceInDown 1s ease 1; -webkit-animation: bounceInDown 1s ease 1; -moz-animation: bounceInDown 1s ease 1; -o-animation: bounceInDown 1s ease 1; } .game-scratch-box .main-box .draw-area-box { width: 280px; height: 135px; margin: 0 auto; position: relative; } .game-scratch-box .main-box .draw-area-box .draw-area-bg { width: inherit; height: inherit; background: url(./h5_view_2/images/scratchBg-34cd12.png) 50% no-repeat; background-size: 100%; } .game-scratch-box .main-box .draw-area-box .draw-area { width: 260px; height: 112px; position: absolute; top: 9px; left: 10px; background: url(./h5_view_2/images/scratch-a66dec.jpg) 50% no-repeat; background-size: 100%; } .game-scratch-box .main-box .draw-area-box .draw-area .award-result { width: inherit; height: inherit; } .game-scratch-box .main-box .draw-area-box .draw-area .award-result .award { width: 100%; height: 100%; background: url(./h5_view_2/images/award-b5952a.jpg) 50% no-repeat; background-size: 100%; } .game-scratch-box .main-box .draw-area-box .draw-area .award-result .award.win-award { display: none; } .game-scratch-box .main-box .draw-area-box .draw-area .award-result .award.win-award p { text-align: center; color: #fb6e55; font-size: 24px; padding-top: 70px; } .game-scratch-box .main-box .draw-area-box .draw-area .award-result .award.lost-award { display: none; background-image: url(./h5_view_2/images/partic-047f88.jpg); } .game-scratch-box .main-box .draw-area-box .draw-area .card-canvas { width: 100%; height: 100%; position: absolute; left: 0; top: 0; z-index: 5; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); } to { -webkit-transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); } to { -webkit-transform: translateY(0); } } .nine-square-box #start, .nine-square-box .prize, .nine-square-box .start-button, .square { width: 70px; height: 70px; border-radius: 5px; text-align: center; } .nine-square-box { width: inherit; height: inherit; overflow: hidden; background: url(./h5_view_2/images/nineSquareBg-5f7d8d.jpg) no-repeat top; background-size: cover; } .nine-square-box .main-box { position: relative; width: 320px; margin: 70px 0 0 30px; padding-top: 60px; } .nine-square-box .main-box .silk-bag { position: absolute; top: 5px; left: 5px; z-index: 10; cursor: pointer; } .nine-square-box .main-box .silk-bag img { width: 50px; } .nine-square-box .lottery-box { position: relative; width: 290px; height: 290px; margin: 0 auto; } .nine-square-box .lottery-box .lottery-bg { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } .nine-square-box .lottery-box .nine-square { position: absolute; z-index: 5; width: 320px; height: 100%; padding: 20px 30px; } .nine-square-box #start { margin: 0 auto; display: block; text-align: center; text-decoration: none; } .nine-square-box #start img { width: 100%; height: 100%; vertical-align: middle; } .nine-square-box .prize { position: relative; background: url(./h5_view_2/images/prizeBg-cee049.png) no-repeat 50% / cover; color: #9e3901; text-shadow: 1px 1px 2px; width: 70px; height: 70px; float: left; margin-right: 10px; margin-bottom: 10px; } .nine-square-box .prize .thanks-prize { width: 60px; height: 60px; } .nine-square-box .prize .prize-icon { margin-top: 5px; width: 60px; height: 40px; } .nine-square-box .prize .prize-text { color: #fb9f50; line-height: 20px; font-size: 8px; } .nine-square-box .prize .prize-mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 6px; background: rgba(0, 0, 0, 0.7); display: none; } .nine-square-box .start-button { position: relative; color: #9e3901; text-shadow: 1px 1px 2px; width: 70px; height: 70px; float: left; margin-right: 10px; margin-bottom: 10px; } .nine-square-box .on .prize-mask { display: block; } .abc-qrcode canvas, .abc-qrcode img { width: 100%; height: 100%; } html .word-art * { text-shadow: inherit !important; } .word-art { padding: 5px; width: 100%; } .word-art.gradient { color: transparent; -webkit-background-clip: text; background-clip: text; } .word-art.common { font-size: 30px; letter-spacing: 0.4em; word-spacing: 0.2em; } .word-art.word-shadow { text-shadow: 0 0 0.5em #000; } .word-art.texture { color: transparent; } .word-art.texture, .word-art .wa-editor { -webkit-background-clip: text; background-clip: text; background-position: 50%; background-repeat: no-repeat; background-size: cover; } .word-art .wa-editor { position: absolute; padding: 5px; top: 0; left: 0; right: 0; -webkit-user-select: auto; caret-color: #000; } .speech-rcg { height: 100%; position: relative; } .speech-rcg .speech-bg-img { background-repeat: no-repeat; background-position: 50%; background-size: cover; } .speech-rcg .speech-bg-img, .speech-rcg .speech-bg-video { position: absolute; height: 100%; width: 100%; } .speech-rcg .speech-bg-video video { position: absolute; width: 100%; top: 0; bottom: 0; margin: auto; } .speech-rcg .speech-play { position: absolute; display: flex; justify-content: center; align-items: center; top: 0; width: 100%; height: 100%; cursor: pointer; } .speech-rcg .speech-play .speech-play-icon { width: 72px; height: 72px; border-radius: 36px; background-position: 50%; background-repeat: no-repeat; background-color: hsla(0, 0%, 100%, 0.8); opacity: 0.5; } .speech-rcg .speech-lrc-content { height: 100%; display: flex; justify-content: center; } .speech-rcg .speech-lrc-content .lrc-position-base { position: absolute; width: 194px; bottom: calc(50% - 8px); left: calc(50% - 97px); } .speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-p { position: absolute; width: 100%; bottom: 0; transition-duration: 0.3s; transition-property: transform, height, margin-left; } .speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-p .speech-lrc-p-visual { transition-duration: 0.3s; transition-property: transform; transform-origin: left bottom; } .speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-p.rotate-left2 { transform: rotate(-90deg) rotate(0deg); transform-origin: left bottom; } .speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-p.rotate-right2 { transform: rotate(90deg) rotate(0deg); transform-origin: right bottom; } .speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line { position: relative; font-size: 16px; width: 100%; left: 0; bottom: 0; height: auto; transition-property: transform, height; transition-duration: 0.3s; transform: rotate(0deg) scale(1) rotate(0deg); color: #fff; white-space: nowrap; padding-top: 4px; } .speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line.entry { position: absolute; width: 100%; } .speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line.zoom-center { transform: scale(0.01) rotate(0deg); } .speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line.zoom-left { transform: scale(0.01) rotate(0deg); height: 0; } .speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line.zoom-left.zoom-entry { transform: scale(1) rotate(0deg); transform-origin: left bottom; } .speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line.zoom-right { transform: scale(0.01) rotate(0deg); height: 0; } .speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line.zoom-right.zoom-entry { transform: scale(1) rotate(0deg); transform-origin: right bottom; } .speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line.zoom-rotate { height: 0; } .speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line .speech-lrc-line-visual { transition-duration: 0.3s; transition-property: transform, height; transform-origin: left top; } .speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line .speech-lrc-line-visual.rotate-left { transform: rotate(90deg) scale(0.01) rotate(0deg); height: 0; transform-origin: left top; } .speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line .speech-lrc-line-visual.rotate-left.zoom-entry { height: 1em; transform: rotate(0deg) scale(1) rotate(0deg); } .speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line .speech-lrc-line-visual.rotate-right { transform: rotate(-90deg) scale(0.01) rotate(0deg); height: 0; transform-origin: right top; } .speech-rcg .speech-lrc-content .lrc-position-base .speech-lrc-line .speech-lrc-line-visual.rotate-right.zoom-entry { transform: rotate(0deg) scale(1) rotate(0deg); } .speech-rcg .speech-lrc-content .lrc-position-base.lrc-position-base-style2 { top: 40%; bottom: 0; margin: auto; font-size: 18px; height: fit-content; width: 100%; text-align: center; left: 0; } .speech-rcg .speech-lrc-content .lrc-position-base.lrc-position-base-style3 { top: 10%; left: 10%; width: 20px; text-align: center; font-size: 18px; word-break: break-word; line-height: 1.2em; } .speech-rcg .speech-lrc-content .lrc-position-base.lrc-position-base-style4 { top: 0; left: 0; font-size: 18px; height: fit-content; width: 100%; text-align: center; } .speech-rcg .speech-add-view .speech-add-editor { position: absolute; top: 0; width: 100%; height: 100%; } .speech-rcg .speech-add-view .speech-add-editor .speech-no-lrc { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } .speech-rcg .speech-add-view .speech-add-editor .speech-no-lrc .speech-add-icon { margin: auto; font-size: 40px; height: 84px; width: 84px; border: 12px solid hsla(0, 0%, 86%, 0.1); border-radius: 42px; background-color: hsla(0, 0%, 86%, 0.25); background-clip: padding-box; -webkit-background-clip: padding-box; color: #fff; text-align: center; line-height: 66px; } .speech-rcg .speech-add-view .speech-add-editor .speech-no-lrc .speech-add-desc { margin-top: 20px; font-size: 16px; color: #fff; } .speech-rcg .speech-add-view .speech-add-editor .speech-line-text-set-style1 { position: absolute; top: 0; bottom: 0; margin: auto; font-size: 16px; height: fit-content; width: 100%; text-align: center; } .speech-rcg .speech-add-view .speech-add-editor .speech-line-text-set-style2 { position: absolute; top: 40%; bottom: 0; margin: auto; font-size: 20px; height: fit-content; width: 100%; text-align: center; } .speech-rcg .speech-add-view .speech-add-editor .speech-line-text-set-style3 { position: absolute; top: 10%; left: 10%; width: 20px; text-align: center; font-size: 20px; word-break: break-word; line-height: 1.2em; } .speech-rcg .speech-add-view .speech-add-editor .speech-line-text-set-style4 { position: absolute; top: 0; font-size: 20px; height: fit-content; width: 100%; text-align: center; } @keyframes magicCubeRotate { 0% { transform: rotateX(0deg) rotateY(0deg); } 50% { transform: rotateX(2turn) rotateY(480deg); } to { transform: rotateX(0deg) rotateY(0deg); } } @keyframes carouselRotate { 0% { transform: translateZ(-400px) rotateY(1turn); } to { transform: translateZ(-400px) rotateY(0deg); } } @-webkit-keyframes panoramaRotate { 0% { -webkit-transform: translateZ(30px) rotateY(0deg) rotate(10deg); transform: translateZ(30px) rotateY(0deg) rotate(10deg); } 50% { -webkit-transform: translateZ(70px) rotateY(-1turn) rotate(-10deg); transform: translateZ(70px) rotateY(-1turn) rotate(-10deg); } to { -webkit-transform: translateZ(50px) rotateY(-2turn) rotate(10deg); transform: translateZ(50px) rotateY(-2turn) rotate(10deg); } } @keyframes panoramaRotate { 0% { -webkit-transform: translateZ(30px) rotateY(0deg) rotate(0deg); transform: translateZ(30px) rotateY(0deg) rotate(0deg); } 50% { -webkit-transform: translateZ(70px) rotateY(-1turn) rotate(0deg); transform: translateZ(70px) rotateY(-1turn) rotate(0deg); } to { -webkit-transform: translateZ(50px) rotateY(-2turn) rotate(0deg); transform: translateZ(50px) rotateY(-2turn) rotate(0deg); } } .c-cube-stage { background: transparent; width: 100%; height: 100%; } .c-cube-stage .magic-cube__container { width: 100%; height: 100%; perspective: 800px; transform-style: preserve-3d; transform: rotateX(0deg) rotateY(0deg); } .c-cube-stage .magic-cube__container__cube { width: 200px; height: 200px; position: relative; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(20deg); position: absolute; top: 50%; left: 50%; margin-top: -100px; margin-left: -100px; } .c-cube-stage .magic-cube__container__cube-animate { animation: magicCubeRotate 20s linear infinite; } .c-cube-stage .magic-cube__container__cube-animate--pause { animation-play-state: paused; -webkit-animation-play-state: paused; } .c-cube-stage .magic-cube__container__cube-animate--running { animation-play-state: running; -webkit-animation-play-state: running; } .c-cube-stage .magic-cube__container__cube__face { text-align: center; position: absolute; backface-visibility: hidden; width: 100%; height: 100%; } .c-cube-stage .magic-cube__container__cube__face > img { width: 100%; height: 100%; } .c-cube-stage .magic-cube__container__cube__face-front { transform: translateZ(100px); } .c-cube-stage .magic-cube__container__cube__face-back { transform: rotateY(180deg) translateZ(100px); } .c-cube-stage .magic-cube__container__cube__face-right { transform: rotateY(90deg) translateZ(100px); } .c-cube-stage .magic-cube__container__cube__face-left { transform: rotateY(-90deg) translateZ(100px); } .c-cube-stage .magic-cube__container__cube__face-top { transform: rotateX(90deg) translateZ(100px); } .c-cube-stage .magic-cube__container__cube__face-bottom { transform: rotateX(-90deg) translateZ(100px); } .c-cube-stage .carousel__container { width: 100%; height: 100%; position: absolute; margin: 0 auto; perspective: 2000px; -webkit-perspective: 2000px; perspective-origin-y: -150px; -webkit-perspective-origin-y: -150px; } .c-cube-stage .carousel__container__content { width: 150px; height: 150px; position: absolute; left: 50%; top: 50%; margin-left: -75px; margin-top: -75px; transform-style: preserve-3d; transform: translateZ(-400px); } .c-cube-stage .carousel__container__content__face { width: 150px; height: 150px; display: block; transform-origin: center; position: absolute; top: 50%; } .c-cube-stage .carousel__container__content__face > img { width: 100%; height: 100%; } .c-cube-stage .panorama, .c-cube-stage .panorama__stage { position: relative; height: 100%; width: 100%; } .c-cube-stage .panorama__stage { margin: 0 auto; overflow: hidden; -webkit-perspective: 50px; perspective: 50px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .c-cube-stage .panorama__stage__control { position: relative; width: 100%; height: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform: translateZ(50px) rotateY(0deg) rotate(0deg); transform: translateZ(50px) rotateY(0deg) rotate(0deg); } .c-cube-stage .panorama__stage__control__facewrap { position: absolute; width: 150px; height: 150px; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); -webkit-transform-style: preserve-3d; transform-style: preserve-3d; } .c-cube-stage .panorama__stage__control__facewrap__face { position: absolute; text-align: center; top: 0; left: 0; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transform-origin: 50% 50% 0; transform-origin: 50% 50% 0; } .c-cube-stage .panorama__stage__control__facewrap__face > img { width: 100%; height: 100%; } .c-cube-stage .onetake__container { width: 260px; height: 420px; perspective: 2000px; overflow: hidden; } .c-cube-stage .onetake__container__sceen { top: 100px; width: 260px; height: 420px; position: absolute; transform-style: preserve-3d; transform: translateZ(-400px) rotateY(0deg); perspective: 400px; perspective-origin: 50% -50%; } .c-cube-stage .onetake__container__sceen__face { width: 260px; height: 260px; position: absolute; } .c-cube-stage .onetake__container__sceen__face__img { width: 100%; height: 100%; } @-webkit-keyframes start { 0%, 30% { opacity: 0; -webkit-transform: translateY(10px); } 60% { opacity: 1; -webkit-transform: translate(0); } to { opacity: 0; -webkit-transform: translateY(-8px); } } @keyframes start { 0%, 30% { opacity: 0; transform: translateY(10px); } 60% { opacity: 1; transform: translate(0); } to { opacity: 0; transform: translateY(-8px); } } .u-arrow-bottom { position: absolute; bottom: 10px; left: 50%; z-index: 150; width: 24px; height: 14px; margin-left: -7px; } .pre-wrap-bottom { width: 24px; height: 14px; position: relative; -webkit-animation: start 1.5s infinite ease-in-out; animation: start 1.5s infinite ease-in-out; } .pre-box1, .pre-box2 { height: 15px; width: 11px; position: absolute; top: -5px; overflow: hidden; } .pre-box2 { left: 10px; } .pre1 { transform: rotate(130deg); -webkit-transform: rotate(130deg); left: 1px; } .pre1, .pre2 { background-color: #fff; width: 14px; height: 5px; border-radius: 2px; position: absolute; box-shadow: 1px -1px 1px #646464; top: 5px; } .pre2 { left: -4.5px; -webkit-transform: rotate(50deg); transform: rotate(50deg); } @-webkit-keyframes rightflip { 0%, 30% { opacity: 0; -webkit-transform: translate(10); } 60% { opacity: 1; -webkit-transform: translate(0); } to { opacity: 0; -webkit-transform: translate(-8px); } } @keyframes rightflip { 0%, 30% { opacity: 0; transform: translate(10); } 60% { opacity: 1; transform: translate(0); } to { opacity: 0; transform: translate(-8px); } } @-webkit-keyframes leftflip { 0%, 30% { opacity: 0; -webkit-transform: translate(-8); } 60% { opacity: 1; -webkit-transform: translate(0); } to { opacity: 0; -webkit-transform: translate(10px); } } @keyframes leftflip { 0%, 30% { opacity: 0; transform: translate(-8); } 60% { opacity: 1; transform: translate(0); } to { opacity: 0; transform: translate(10px); } } .u-arrow-right { position: absolute; width: 14px; height: 24px; z-index: 150; top: 50%; margin-top: -10px; right: 20px; transform: scaleX(-1); -webkit-transform: scaleX(-1); } .u-arrow-right__landscape { bottom: 30px; right: unset; left: 10px; transform: scaleX(-1) rotate(180deg); } .u-arrow-right__landscape .pre-wrap-right { -webkit-animation: leftflip 1.5s infinite ease-in-out; animation: leftflip 1.5s infinite ease-in-out; } .pre-wrap-right { width: 14px; height: 24px; position: relative; -webkit-animation: rightflip 1.5s infinite ease-in-out; animation: rightflip 1.5s infinite ease-in-out; } .pre-box3 { top: 10px; } .pre-box3, .pre-box4 { height: 11px; width: 15px; position: absolute; overflow: hidden; } .pre3 { top: 5px; transform: rotate(130deg); -webkit-transform: rotate(130deg); top: 1px; box-shadow: 1px -1px 2px #646464; } .pre3, .pre4 { background-color: #fff; width: 14px; height: 5px; border-radius: 2px; position: absolute; } .pre4 { top: 5px; top: 6px; box-shadow: 1px 1px 1.5px #646464; transform: rotate(40deg); -webkit-transform: rotate(40deg); } .abc-progress-bar { height: 4px; z-index: 100; background-color: rgba(0, 0, 0, 0.2); } .abc-progress-bar, .abc-progress-bar:before { position: absolute; width: 100%; bottom: 0; left: 0; } .abc-progress-bar:before { pointer-events: none; content: ''; height: 60px; z-index: -1; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.2)); } .abc-progress-bar__landscape { transform: rotate(90deg); -webkit-transform: rotate(90deg); -webkit-transform-origin: left; transform-origin: left; background: #ccc; display: block; top: 0; left: 2px; } .abc-progress-bar span { display: block; height: 100%; width: 0; background-color: #08a1ef; transition: width 0.8s cubic-bezier(0.26, 0.86, 0.44, 0.985); border-radius: 2px; } .abc-progress-bar em.page-tip { display: inline-block; position: absolute; right: 8px; top: -14px; font-size: 12px; font-style: normal; color: #fff; padding-left: 5px; line-height: 12px; } .abc-progress-bar em.page-tip__pc { right: 10px; } .abc-progress-bar.hand-draw em.page-tip { padding-left: 8px; padding-right: 8px; line-height: 18px; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.08); font-family: HYShuYuanHeiJ; background: rgba(0, 0, 0, 0.2); box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08); border-radius: 4px; top: -20px; } .abc-progress-bar.gradient span { position: relative; background: linear-gradient(90deg, #c63645, #ffb765 31%, #ffc820 57%, #3ea636); } .abc-progress-bar.gradient span:before { content: ''; position: absolute; right: 0; bottom: 100%; width: 12px; height: 16px; background: url(./h5_view_2/images/location-1d9565.svg) 50% no-repeat; background-size: contain; } .fly-in { -webkit-animation: page-fly-in 1s linear; animation: page-fly-in 1s linear; transform-origin: 0 0 !important; } @-webkit-keyframes page-fly-in { 0% { transform: matrix3d( -0.0004, -0.00077, 0, 0, -0.00054, 0.00028, -0.00062, 0, 0.00055, -0.00029, -0.00061, 0, 68.0588, 184.19, 0.11436, 1 ); } 6.6667% { transform: matrix3d( -0.00118, -0.00317, 0, 0, -0.00219, 0.00082, -0.00245, 0, 0.0023, -0.00086, -0.00234, 0, 103.847, 217.2, 0.53019, 1 ); } 13.3333% { transform: matrix3d( -0.00207, -0.00967, 0, 0, -0.00648, 0.00139, -0.00734, 0, 0.00718, -0.00154, -0.00663, 0, 143.325, 255.247, 1.8478, 1 ); } 20% { transform: matrix3d( -0.0011, -0.02364, 0, 0, -0.01503, 0.0007, -0.01827, 0, 0.01825, -0.00085, -0.01505, 0, 184.314, 297.532, 5.237, 1 ); } 26.6667% { transform: matrix3d( 0.00639, -0.04842, 0, 0, -0.02813, -0.00371, -0.03976, 0, 0.03942, 0.0052, -0.02837, 0, 223.765, 343.887, 12.5971, 1 ); } 33.3333% { transform: matrix3d( 0.02804, -0.08526, 0, 0, -0.04238, -0.01394, -0.07788, 0, 0.07398, 0.02433, -0.04462, 0, 256.319, 393.304, 26.2861, 1 ); } 40% { transform: matrix3d( 0.07293, -0.13114, 0, 0, -0.04928, -0.02741, -0.13906, 0, 0.12152, 0.06759, -0.05639, 0, 273.765, 440.42, 47.9159, 1 ); } 46.6667% { transform: matrix3d( 0.14843, -0.17788, 0, 0, -0.03727, -0.0311, -0.22653, 0, 0.17393, 0.14513, -0.04854, 0, 267.743, 472.21, 75.9115, 1 ); } 53.3333% { transform: matrix3d( 0.25649, -0.21379, 0, 0, 0.00066, 0.00079, -0.3339, 0, 0.21379, 0.25649, 0.00103, 0, 235.874, 470.092, 102.899, 1 ); } 60% { transform: matrix3d( 0.39149, -0.22759, 0, 0, 0.05716, 0.09832, -0.43832, 0, 0.22029, 0.37894, 0.11373, 0, 186.381, 420.807, 116.296, 1 ); } 66.6667% { transform: matrix3d( 0.5408, -0.2131, 0, 0, 0.10813, 0.27442, -0.50088, 0, 0.18363, 0.46601, 0.29495, 0, 134.332, 329.786, 105.51, 1 ); } 73.3333% { transform: matrix3d( 0.68812, -0.17233, 0, 0, 0.12628, 0.50424, -0.48269, 0, 0.11726, 0.46824, 0.51981, 0, 90.6604, 222.173, 72.5875, 1 ); } 80% { transform: matrix3d( 0.81758, -0.11549, 0, 0, 0.10302, 0.72931, -0.37319, 0, 0.0522, 0.36952, 0.73655, 0, 56.219, 126.209, 34.3603, 1 ); } 86.6667% { transform: matrix3d( 0.91704, -0.05794, 0, 0, 0.05643, 0.89304, -0.20883, 0, 0.01317, 0.20841, 0.89482, 0, 28.0534, 56.3219, 9.07775, 1 ); } 93.3333% { transform: matrix3d( 0.97902, -0.01555, 0, 0, 0.01553, 0.97713, -0.06078, 0, 0.00097, 0.06077, 0.97725, 0, 7.65253, 14.2679, 0.68495, 1 ); } to { transform: matrix(1, 0, 0, 1, 0, 0); } } @keyframes page-fly-in { 0% { transform: matrix3d( -0.0004, -0.00077, 0, 0, -0.00054, 0.00028, -0.00062, 0, 0.00055, -0.00029, -0.00061, 0, 68.0588, 184.19, 0.11436, 1 ); } 6.6667% { transform: matrix3d( -0.00118, -0.00317, 0, 0, -0.00219, 0.00082, -0.00245, 0, 0.0023, -0.00086, -0.00234, 0, 103.847, 217.2, 0.53019, 1 ); } 13.3333% { transform: matrix3d( -0.00207, -0.00967, 0, 0, -0.00648, 0.00139, -0.00734, 0, 0.00718, -0.00154, -0.00663, 0, 143.325, 255.247, 1.8478, 1 ); } 20% { transform: matrix3d( -0.0011, -0.02364, 0, 0, -0.01503, 0.0007, -0.01827, 0, 0.01825, -0.00085, -0.01505, 0, 184.314, 297.532, 5.237, 1 ); } 26.6667% { transform: matrix3d( 0.00639, -0.04842, 0, 0, -0.02813, -0.00371, -0.03976, 0, 0.03942, 0.0052, -0.02837, 0, 223.765, 343.887, 12.5971, 1 ); } 33.3333% { transform: matrix3d( 0.02804, -0.08526, 0, 0, -0.04238, -0.01394, -0.07788, 0, 0.07398, 0.02433, -0.04462, 0, 256.319, 393.304, 26.2861, 1 ); } 40% { transform: matrix3d( 0.07293, -0.13114, 0, 0, -0.04928, -0.02741, -0.13906, 0, 0.12152, 0.06759, -0.05639, 0, 273.765, 440.42, 47.9159, 1 ); } 46.6667% { transform: matrix3d( 0.14843, -0.17788, 0, 0, -0.03727, -0.0311, -0.22653, 0, 0.17393, 0.14513, -0.04854, 0, 267.743, 472.21, 75.9115, 1 ); } 53.3333% { transform: matrix3d( 0.25649, -0.21379, 0, 0, 0.00066, 0.00079, -0.3339, 0, 0.21379, 0.25649, 0.00103, 0, 235.874, 470.092, 102.899, 1 ); } 60% { transform: matrix3d( 0.39149, -0.22759, 0, 0, 0.05716, 0.09832, -0.43832, 0, 0.22029, 0.37894, 0.11373, 0, 186.381, 420.807, 116.296, 1 ); } 66.6667% { transform: matrix3d( 0.5408, -0.2131, 0, 0, 0.10813, 0.27442, -0.50088, 0, 0.18363, 0.46601, 0.29495, 0, 134.332, 329.786, 105.51, 1 ); } 73.3333% { transform: matrix3d( 0.68812, -0.17233, 0, 0, 0.12628, 0.50424, -0.48269, 0, 0.11726, 0.46824, 0.51981, 0, 90.6604, 222.173, 72.5875, 1 ); } 80% { transform: matrix3d( 0.81758, -0.11549, 0, 0, 0.10302, 0.72931, -0.37319, 0, 0.0522, 0.36952, 0.73655, 0, 56.219, 126.209, 34.3603, 1 ); } 86.6667% { transform: matrix3d( 0.91704, -0.05794, 0, 0, 0.05643, 0.89304, -0.20883, 0, 0.01317, 0.20841, 0.89482, 0, 28.0534, 56.3219, 9.07775, 1 ); } 93.3333% { transform: matrix3d( 0.97902, -0.01555, 0, 0, 0.01553, 0.97713, -0.06078, 0, 0.00097, 0.06077, 0.97725, 0, 7.65253, 14.2679, 0.68495, 1 ); } to { transform: matrix(1, 0, 0, 1, 0, 0); } } .spiral-rotate-enter { -webkit-animation: spiral-in 1s cubic-bezier(0.5005, 0, 0.49855, 1); animation: spiral-in 1s cubic-bezier(0.5005, 0, 0.49855, 1); transform-origin: center !important; } .spiral-rotate-leave { -webkit-animation: spiral-out 1s cubic-bezier(0.5005, 0, 0.49855, 1); animation: spiral-out 1s cubic-bezier(0.5005, 0, 0.49855, 1); transform-origin: center !important; } @-webkit-keyframes spiral-in { 0% { opacity: 0; transform: scale(0) rotate(-12.5664rad); } 66.6666% { opacity: 1; } to { opacity: 1; transform: scale(1) rotate(0); } } @keyframes spiral-in { 0% { opacity: 0; transform: scale(0) rotate(-12.5664rad); } 66.6666% { opacity: 1; } to { opacity: 1; transform: scale(1) rotate(0); } } @-webkit-keyframes spiral-out { 0% { opacity: 1; } 66.6666% { opacity: 0; transform: scale(0) rotate(12.5664rad); } to { opacity: 0; transform: scale(0) rotate(12.5664rad); } } @keyframes spiral-out { 0% { opacity: 1; } 66.6666% { opacity: 0; transform: scale(0) rotate(12.5664rad); } to { opacity: 0; transform: scale(0) rotate(12.5664rad); } } @-webkit-keyframes rotating { 0% { transform: rotate(0deg); } to { transform: rotate(1turn); } } @keyframes rotating { 0% { transform: rotate(0deg); } to { transform: rotate(1turn); } } .bgm-btn-wraper { right: 16px; top: 16px; display: none; } .bgm-btn-wraper,.bgm-btn-wraper .bgm-btn { position: absolute; z-index: 200; width: 30px; height: 30px } .bgm-btn-wraper .bgm-btn { right: 0; top: 0; border-radius: 15px; background-image: url(./asset/bgmBtn-fbd2dc.svg); background-size: contain; background-repeat: no-repeat } .bgm-btn-wraper .bgm-btn.rotate { -webkit-animation: rotating 1.2s linear infinite; animation: rotating 1.2s linear infinite } .lrc-controller { position: absolute; font-size: 14px; bottom: 30px; height: 32px; width: 100%; padding: 0 6px; text-align: center; overflow: hidden; z-index: 200; } .lrc-controller.hide { z-index: -1; visibility: hidden; } .lrc-controller .lrc-text p { margin: 0; height: 32px; line-height: 32px; color: #fff; text-shadow: 1px 1px 16px #000 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .lrc-controller .lrc-text p.destroy-quick { transition: margin-top 0.1s; margin-top: -32px; } .lrc-controller .lrc-text p.destroy { transition: margin-top 0.5s; margin-top: -32px; }