.container { position: relative } .w1920-h1080 { width: 100%; height: 100%; max-width: 1920px; max-height: 1080px } .outCenter { position: absolute; left: 50%; top: 50% } .innerCenter { position: relative; left: -50%; top: -50% } .white-nav .sub-nav .sub-logo, .white-nav .sub-nav .sub-menu a { color: #fff } .photo { margin: 0 auto; text-align: left; max-width: none; max-height: none } .photo ul { overflow: hidden; width: 201%; height: 100% } .photo li { position: relative; float: left; width: 12.5%; height: 100%; transition: all .5s ease; overflow: hidden; cursor: pointer } .photo li.one { background: url(/img/photo-img1.jpg) 0 center no-repeat; background-size: cover } .photo li.two { background: url(/img/photo-img2.jpg) 33% center no-repeat; background-size: cover } .photo li.three { background: url(/img/photo-img3.jpg) 66% center no-repeat; background-size: cover } .photo li.four { background: url(/img/photo-img4.jpg) 75% center no-repeat; background-size: cover } .photo li.five { background: url(/img/photo-img5.jpg) 100% center no-repeat; background-size: cover } .photo ul.big li { background-size: auto } .photo-mask { position: absolute; z-index: 1; width: 100%; height: 100%; background: #000; opacity: .5; filter: alpha(opacity=50) } .photo-text { position: absolute; left: 50%; top: 50%; width: 70px; height: 69px; margin: -35px 0 0 -34px; line-height: 69px; background: url(/img/photo-ico.png) no-repeat; color: #fff; text-align: center } .photo-nav { position: absolute; top: 0; max-width: 408px; width: 408px; height: 100%; left: -408px; z-index: 9 } .photo-nav-mask { height: 100%; background: #fff; opacity: .5; filter: alpha(opacity=50) } .photo-top { position: absolute; top: 90px; width: 100% } .photo-top span { float: left; width: 57px; height: 57px; line-height: 57px; background: url(/img/photo-nav-bg.png) -66px 0 no-repeat; text-align: center; cursor: pointer; margin-left: 2%; margin-bottom: 2% } .photo-top span.b { background-position: -130px 0 } .photo-top span.t { font-size: .9em } .photo-top span.curr { background-position: 0 0; color: #eb0028 } .photo-bottom { position: absolute; bottom: 0; padding: 0 20px 90px } .photo-bottom p { font-size: 12px; margin-top: 40px; color: #333 } .photo-bottom p a { color: #069; margin-left: 10px } .photo-bottom dt { font-size: 30px; line-height: 30px; letter-spacing: 4px; margin-bottom: 15px } .photo-bottom dd.subtitle { line-height: 28px; font-size: 20px; margin-bottom: 40px } .photo-bottom dd.info { font-size: 16px; line-height: 28px; color: #333 } @media screen and (max-width:1100px) { .photo-nav { width: 317px; left: -330px } .photo-top { padding-left: 1px } .photo-top span { font-size: .9em; background: url(/img/photo-nav-bg1.png) -66px 0 no-repeat; width: 45px; height: 45px; line-height: 45px } .photo-top span.t { font-size: .75em } .photo-bottom dl { padding-left: 10px; padding-right: 10px } } .beauty-panel { background: 0 0 } .beauty { text-align: left; width: 100%; height: 100%; position: relative; margin: 0 auto; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none; -ms-user-select: none; user-select: none } .beauty img { width: auto } .beauty-before { height: 100% } .beauty-after { position: absolute; width: 0; height: 100%; left: 0; top: 0 } .beauty-after-img { overflow: hidden } #beautyBtn { display: none; position: absolute; top: 0; left: 67.4%; width: 50px; height: 50px; background: url(/img/beauty-icon.png) center center no-repeat; cursor: move; margin-top: -100px; margin-left: -25px } .beauty-text { position: absolute; width: 100%; bottom: 50px; color: #fff; text-align: center } .beauty-text dt { display: none; font-size: 44px; margin-bottom: 20px } .beauty-text dt span { margin-left: 15px } .beauty-text dd { line-height: 28px; zoom: 1 } .beauty-music { zoom: 1; margin-bottom: 24px } .beauty-music img { width: 365px } .beauty-music .p1 { display: none } .beauty-music .p2 { display: none; width: 230px; margin: 0 auto; padding-top: 15px; border-top: 1px solid #fff } .beauty-music .p2 span { margin: 0 7px } @media screen and (max-width:1366px) { .beauty-music img { width: 330px } } .gesture-panel { background: #f2f2f2 } .gesture-panel img { width: auto } .gesture { max-width: 1190px; min-width: 960px; width: 100%; height: 100%; max-height: 1080px; margin: 0 auto; background: #f2f2f2 } .gesture p { margin: 0 } .gesture .linkbox { overflow: hidden; float: right; width: 54%; min-width: 565px; height: 100%; color: #333 } .gesture .linkbox .per1 { height: 18% } .gesture .linkbox .per2 { height: 3.8% } .gesture .linkbox .per3 { height: 8.8%; text-align: left; position: relative } .gesture .linkbox .per3 p { position: absolute; bottom: 25%; color: #666; font-size: 16px } .gesture .linkbox h3 { height: 95px; background: url(/img/gesture-title.png) left top no-repeat } .gesture .linkbox h3 p { display: none; font-style: normal; font-size: 48px } .gesture .linkbox h3 span { display: none; margin-left: 15px } .gesture .linkbox .content-p { font-size: 16px; line-height: 28px; text-align: left } .gesture .linkbox li { position: relative; float: left; width: 162px; padding-top: 100px; margin-bottom: 55px; margin-right: 15px; background: url(/img/gesture-label.png) no-repeat; text-align: center } .gesture .linkbox li.one { background-position: 0 0 } .gesture .linkbox li.two { background-position: -212px 0 } .gesture .linkbox li.three { background-position: -424px 0 } .gesture .linkbox li.four { background-position: -636px 0; margin-bottom: 0 } .gesture .linkbox li.five { background-position: -848px 0; margin-bottom: 0 } .gesture .linkbox li.six { background-position: -1060px 0; margin-bottom: 0 } .gesture .linkbox .text-p { padding: 15px 0 } .gesture .linkbox .mask-p { display: none; cursor: pointer; position: absolute; width: 100%; height: 100px; left: 0; top: 0 } .gesture .linkbox .mask-p i { position: absolute; width: 100%; height: 100px; left: 0; top: 0; background: #000; opacity: .5; filter: alpha(opacity=50) } .gesture .linkbox .mask-p b { position: absolute; width: 100%; height: 100%; line-height: 100px; left: 0; top: 0; color: #39c; font-weight: 400; background: url(/img/gesture-ico.png) center center no-repeat; text-align: left } @media screen and (max-height:800px) { .gesture .linkbox li { margin-bottom: 40px } } @media screen and (max-height:700px) { .gesture .linkbox .per2 { height: 2.8% } .gesture .linkbox .per3 { height: 5.8% } .gesture .linkbox li { margin-bottom: 0 } } @media screen and (max-width:1065px) { .gesture .linkbox li.four, .gesture .linkbox li.one, .gesture .linkbox li.three, .gesture .linkbox li.two { margin-bottom: 30px } } @media screen and (max-height:800px) and (max-width:1065px) { .gesture .linkbox li.four, .gesture .linkbox li.one, .gesture .linkbox li.three, .gesture .linkbox li.two { margin-bottom: 15px } } @media screen and (max-height:600px) and (max-width:1065px) { .gesture .linkbox li.four, .gesture .linkbox li.one, .gesture .linkbox li.three, .gesture .linkbox li.two { margin-bottom: 0 } } .gesture .showbox { float: left; height: 100%; width: 375px } .gesture .showmain { position: relative; height: 85%; max-height: 725px; text-align: left } .gesture .showbox .showbg { position: absolute; height: 100%; left: 0; top: 0; text-align: left } .gesture .showbox .showbg img { height: 100%; max-width: 100% } .gesture .showbox li { position: relative; display: none; height: 100% } .gesture .showbox li .show { position: relative; height: 100% } .gesture .show .light { position: absolute; top: 10.34%; left: 7.46%; width: 84.53% } .gesture .showbox li.lock { display: block } .gesture .lock .show .light { opacity: 0; filter: alpha(opacity=0); _filter: alpha(opacity=100) } .gesture .lock .outCenter1 { position: absolute; left: 50%; bottom: 0 } .gesture .lock .innerCenter1 { position: relative; left: -50%; height: 100%; text-align: center } .gesture .lock .line { display: none; position: relative; width: 100% } .gesture .lock .hand { position: absolute; left: 4%; top: 100%; opacity: 0; width: 110% } @-webkit-keyframes ripple { 0% { -webkit-transform:scale(0, 0); -moz-transform:scale(0, 0); -ms-transform:scale(0, 0); -o-transform:scale(0, 0); transform:scale(0, 0) } 50% { opacity:1; filter:alpha(opacity=100) } 100% { -webkit-transform:scale(1, 1); -moz-transform:scale(1, 1); -ms-transform:scale(1, 1); -o-transform:scale(1, 1); transform:scale(1, 1); opacity:0; filter:alpha(opacity=0) } } @-moz-keyframes ripple { 0% { -webkit-transform:scale(0, 0); -moz-transform:scale(0, 0); -ms-transform:scale(0, 0); -o-transform:scale(0, 0); transform:scale(0, 0) } 50% { opacity:1; filter:alpha(opacity=100) } 100% { -webkit-transform:scale(1, 1); -moz-transform:scale(1, 1); -ms-transform:scale(1, 1); -o-transform:scale(1, 1); transform:scale(1, 1); opacity:0; filter:alpha(opacity=0) } } @-o-keyframes ripple { 0% { -webkit-transform:scale(0, 0); -moz-transform:scale(0, 0); -ms-transform:scale(0, 0); -o-transform:scale(0, 0); transform:scale(0, 0) } 50% { opacity:1; filter:alpha(opacity=100) } 100% { -webkit-transform:scale(1, 1); -moz-transform:scale(1, 1); -ms-transform:scale(1, 1); -o-transform:scale(1, 1); transform:scale(1, 1); opacity:0; filter:alpha(opacity=0) } } @keyframes ripple { 0% { -webkit-transform:scale(0, 0); -moz-transform:scale(0, 0); -ms-transform:scale(0, 0); -o-transform:scale(0, 0); transform:scale(0, 0) } 50% { opacity:1; filter:alpha(opacity=100) } 100% { -webkit-transform:scale(1, 1); -moz-transform:scale(1, 1); -ms-transform:scale(1, 1); -o-transform:scale(1, 1); transform:scale(1, 1); opacity:0; filter:alpha(opacity=0) } } .gesture .lock .innerCenter { text-align: center; height: 100% } .gesture .lock .ripple { display: none; position: relative; width: 100% } .gesture .lock.active .ripple { display: block; -webkit-transform: scale(0, 0); -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0); -webkit-animation: ripple .4s .8s 2; -moz-animation: ripple .4s .8s 2; -ms-animation: ripple .4s .8s 2; -o-animation: ripple .4s .8s 2; animation: ripple .4s .8s 2 } @-webkit-keyframes lock { 0% { -webkit-transform:scale(0, 0); -moz-transform:scale(0, 0); -ms-transform:scale(0, 0); -o-transform:scale(0, 0); transform:scale(0, 0) } 50% { opacity:1; filter:alpha(opacity=100) } 100% { -webkit-transform:scale(1, 1); -moz-transform:scale(1, 1); -ms-transform:scale(1, 1); -o-transform:scale(1, 1); transform:scale(1, 1); opacity:0; filter:alpha(opacity=0) } } @-moz-keyframes lock { 0% { -webkit-transform:scale(0, 0); -moz-transform:scale(0, 0); -ms-transform:scale(0, 0); -o-transform:scale(0, 0); transform:scale(0, 0) } 50% { opacity:1; filter:alpha(opacity=100) } 100% { -webkit-transform:scale(1, 1); -moz-transform:scale(1, 1); -ms-transform:scale(1, 1); -o-transform:scale(1, 1); transform:scale(1, 1); opacity:0; filter:alpha(opacity=0) } } @-o-keyframes lock { 0% { -webkit-transform:scale(0, 0); -moz-transform:scale(0, 0); -ms-transform:scale(0, 0); -o-transform:scale(0, 0); transform:scale(0, 0) } 50% { opacity:1; filter:alpha(opacity=100) } 100% { -webkit-transform:scale(1, 1); -moz-transform:scale(1, 1); -ms-transform:scale(1, 1); -o-transform:scale(1, 1); transform:scale(1, 1); opacity:0; filter:alpha(opacity=0) } } @keyframes lock { 0% { -webkit-transform:scale(0, 0); -moz-transform:scale(0, 0); -ms-transform:scale(0, 0); -o-transform:scale(0, 0); transform:scale(0, 0) } 50% { opacity:1; filter:alpha(opacity=100) } 100% { -webkit-transform:scale(1, 1); -moz-transform:scale(1, 1); -ms-transform:scale(1, 1); -o-transform:scale(1, 1); transform:scale(1, 1); opacity:0; filter:alpha(opacity=0) } } .gesture .lock.active .line { display: block; -webkit-transform: scale(0, 0); -moz-transform: scale(0, 0); -ms-transform: scale(0, 0); -o-transform: scale(0, 0); transform: scale(0, 0); -webkit-animation: lock .4s 3.1s 2; -moz-animation: lock .4s 3.1s 2; -ms-animation: lock .4s 3.1s 2; -o-animation: lock .4s 3.1s 2; animation: lock .4s 3.1s 2 } @-webkit-keyframes unlockandlock { 16%, 75% { opacity:1; filter:alpha(opacity=100) } 100% { opacity:0; filter:alpha(opacity=0) } } @-moz-keyframes unlockandlock { 16%, 75% { opacity:1; filter:alpha(opacity=100) } 100% { opacity:0; filter:alpha(opacity=0) } } @-o-keyframes unlockandlock { 16%, 75% { opacity:1; filter:alpha(opacity=100) } 100% { opacity:0; filter:alpha(opacity=0) } } @keyframes unlockandlock { 16%, 75% { opacity:1; filter:alpha(opacity=100) } 100% { opacity:0; filter:alpha(opacity=0) } } .gesture .lock.active .light { -webkit-animation: unlockandlock 3s 1.4s forwards; -moz-animation: unlockandlock 3s 1.4s forwards; -ms-animation: unlockandlock 3s 1.4s forwards; -o-animation: unlockandlock 3s 1.4s forwards; animation: unlockandlock 3s 1.4s forwards } @-webkit-keyframes lockhand { 14% { top:47%; opacity:1; filter:alpha(opacity=100) } 50% { top:47% } 64% { top:89% } 86% { top:89%; opacity:1; filter:alpha(opacity=100) } 100% { top:100%; opacity:0; filter:alpha(opacity=0) } } @-moz-keyframes lockhand { 14% { top:47%; opacity:1; filter:alpha(opacity=100) } 50% { top:47% } 64% { top:89% } 86% { top:89%; opacity:1; filter:alpha(opacity=100) } 100% { top:100%; opacity:0; filter:alpha(opacity=0) } } @-o-keyframes lockhand { 14% { top:47%; opacity:1; filter:alpha(opacity=100) } 50% { top:47% } 64% { top:89% } 86% { top:89%; opacity:1; filter:alpha(opacity=100) } 100% { top:100%; opacity:0; filter:alpha(opacity=0) } } @keyframes lockhand { 14% { top:47%; opacity:1; filter:alpha(opacity=100) } 50% { top:47% } 64% { top:89% } 86% { top:89%; opacity:1; filter:alpha(opacity=100) } 100% { top:100%; opacity:0; filter:alpha(opacity=0) } } .gesture .lock.active .hand { -webkit-animation: lockhand 5s; -moz-animation: lockhand 5s; -ms-animation: lockhand 5s; -o-animation: lockhand 5s; animation: lockhand 5s } .gesture .screenshot .light1 { width: 100%; top: 0; left: 0; border: 0 solid #fff; -webkit-transition: all .5s 1.7s; -moz-transition: all .5s 1.7s; -ms-transition: all .5s 1.7s; -o-transition: all .5s 1.7s; transition: all .5s 1.7s } .gesture .screenshot .innerCenter { height: 100% } .gesture .screenshot .line { position: absolute; left: 0; top: 0; width: 100%; height: 0 } .gesture .screenshot .hand { position: absolute; left: -6%; top: 100%; opacity: 0; width: 110% } .gesture .screenshot .lightbox, .gesture .screenshot .mask { position: absolute; top: 10.34%; left: 7.46%; width: 84.53%; background: #fff; opacity: 0; filter: alpha(opacity=0) } .gesture .screenshot .lightbox { background: 0 0; opacity: 1; filter: alpha(opacity=100); overflow: hidden } @-webkit-keyframes photo { 0% { -webkit-transform:scale(1, 1); -moz-transform:scale(1, 1); -ms-transform:scale(1, 1); -o-transform:scale(1, 1); transform:scale(1, 1); top:0; border-width:5px } 50% { -webkit-transform:scale(0.7, .7); -moz-transform:scale(0.7, .7); -ms-transform:scale(0.7, .7); -o-transform:scale(0.7, .7); transform:scale(0.7, .7); top:0; opacity:1; filter:alpha(opacity=100) } 100% { -webkit-transform:scale(0.7, .7); -moz-transform:scale(0.7, .7); -ms-transform:scale(0.7, .7); -o-transform:scale(0.7, .7); transform:scale(0.7, .7); top:420px; opacity:0; filter:alpha(opacity=0); border-width:5px } } @-moz-keyframes photo { 0% { -webkit-transform:scale(1, 1); -moz-transform:scale(1, 1); -ms-transform:scale(1, 1); -o-transform:scale(1, 1); transform:scale(1, 1); top:0; border-width:5px } 50% { -webkit-transform:scale(0.7, .7); -moz-transform:scale(0.7, .7); -ms-transform:scale(0.7, .7); -o-transform:scale(0.7, .7); transform:scale(0.7, .7); top:0; opacity:1; filter:alpha(opacity=100) } 100% { -webkit-transform:scale(0.7, .7); -moz-transform:scale(0.7, .7); -ms-transform:scale(0.7, .7); -o-transform:scale(0.7, .7); transform:scale(0.7, .7); top:420px; opacity:0; filter:alpha(opacity=0); border-width:5px } } @-o-keyframes photo { 0% { -webkit-transform:scale(1, 1); -moz-transform:scale(1, 1); -ms-transform:scale(1, 1); -o-transform:scale(1, 1); transform:scale(1, 1); top:0; border-width:5px } 50% { -webkit-transform:scale(0.7, .7); -moz-transform:scale(0.7, .7); -ms-transform:scale(0.7, .7); -o-transform:scale(0.7, .7); transform:scale(0.7, .7); top:0; opacity:1; filter:alpha(opacity=100) } 100% { -webkit-transform:scale(0.7, .7); -moz-transform:scale(0.7, .7); -ms-transform:scale(0.7, .7); -o-transform:scale(0.7, .7); transform:scale(0.7, .7); top:420px; opacity:0; filter:alpha(opacity=0); border-width:5px } } @keyframes photo { 0% { -webkit-transform:scale(1, 1); -moz-transform:scale(1, 1); -ms-transform:scale(1, 1); -o-transform:scale(1, 1); transform:scale(1, 1); top:0; border-width:5px } 50% { -webkit-transform:scale(0.7, .7); -moz-transform:scale(0.7, .7); -ms-transform:scale(0.7, .7); -o-transform:scale(0.7, .7); transform:scale(0.7, .7); top:0; opacity:1; filter:alpha(opacity=100) } 100% { -webkit-transform:scale(0.7, .7); -moz-transform:scale(0.7, .7); -ms-transform:scale(0.7, .7); -o-transform:scale(0.7, .7); transform:scale(0.7, .7); top:420px; opacity:0; filter:alpha(opacity=0); border-width:5px } } .gesture .screenshot.active .light1 { -webkit-animation: photo .6s 1.7s; -moz-animation: photo .6s 1.7s; -ms-animation: photo .6s 1.7s; -o-animation: photo .6s 1.7s; animation: photo .6s 1.7s } @-webkit-keyframes threeline { 0% { height:0 } 100% { height:100% } } @-moz-keyframes threeline { 0% { height:0 } 100% { height:100% } } @-o-keyframes threeline { 0% { height:0 } 100% { height:100% } } @keyframes threeline { 0% { height:0 } 100% { height:100% } } .gesture .screenshot.active .line { -webkit-animation: threeline .5s .6s; -moz-animation: threeline .5s .6s; -ms-animation: threeline .5s .6s; -o-animation: threeline .5s .6s; animation: threeline .5s .6s } @-webkit-keyframes three { 0% { top:100% } 12.5% { top:40%; opacity:1; filter:alpha(opacity=100) } 25%, 50% { top:60%; opacity:1; filter:alpha(opacity=100) } 60% { opacity:1; filter:alpha(opacity=100); top:60% } 70% { opacity:0; filter:alpha(opacity=0); top:100% } } @-moz-keyframes three { 0% { top:100% } 12.5% { top:40%; opacity:1; filter:alpha(opacity=100) } 25%, 50% { top:60%; opacity:1; filter:alpha(opacity=100) } 60% { opacity:1; filter:alpha(opacity=100); top:60% } 70% { opacity:0; filter:alpha(opacity=0); top:100% } } @-o-keyframes three { 0% { top:100% } 12.5% { top:40%; opacity:1; filter:alpha(opacity=100) } 25%, 50% { top:60%; opacity:1; filter:alpha(opacity=100) } 60% { opacity:1; filter:alpha(opacity=100); top:60% } 70% { opacity:0; filter:alpha(opacity=0); top:100% } } @keyframes three { 0% { top:100% } 12.5% { top:40%; opacity:1; filter:alpha(opacity=100) } 25%, 50% { top:60%; opacity:1; filter:alpha(opacity=100) } 60% { opacity:1; filter:alpha(opacity=100); top:60% } 70% { opacity:0; filter:alpha(opacity=0); top:100% } } .gesture .screenshot.active .hand { -webkit-animation: three 4s forwards; -moz-animation: three 4s forwards; -ms-animation: three 4s forwards; -o-animation: three 4s forwards; animation: three 4s forwards } @-webkit-keyframes mask { 0% { opacity:0; filter:alpha(opacity=0) } 50% { opacity:1; filter:alpha(opacity=100) } 100% { opacity:0; filter:alpha(opacity=0) } } @-moz-keyframes mask { 0% { opacity:0; filter:alpha(opacity=0) } 50% { opacity:1; filter:alpha(opacity=100) } 100% { opacity:0; filter:alpha(opacity=0) } } @-o-keyframes mask { 0% { opacity:0; filter:alpha(opacity=0) } 50% { opacity:1; filter:alpha(opacity=100) } 100% { opacity:0; filter:alpha(opacity=0) } } @keyframes mask { 0% { opacity:0; filter:alpha(opacity=0) } 50% { opacity:1; filter:alpha(opacity=100) } 100% { opacity:0; filter:alpha(opacity=0) } } .gesture .screenshot.active .mask { -webkit-animation: mask .5s 1.2s; -moz-animation: mask .5s 1.2s; -ms-animation: mask .5s 1.2s; -o-animation: mask .5s 1.2s; animation: mask .5s 1.2s } .gesture .volume .line { position: absolute; left: 15%; width: 33px; height: 0 } .gesture .volume .line-up { top: auto; bottom: 55% } .gesture .volume .line-down { top: 50% } .gesture .volume .soundbg { opacity: 0; filter: alpha(opacity=0); position: absolute; left: 50%; top: 155px; margin-left: -33px; width: 66px; height: 66px; background: url(/img/p-u-systemsoundbg.png) no-repeat } .gesture .volume .mask { position: absolute; left: 0; top: 0; width: 33px; height: 66px; z-index: 10; background: url(/img/p-u-systemsoundbg.png) no-repeat; display: none\9 } .gesture .volume .sound { position: absolute; right: 0; top: 0; width: 33px; height: 66px; z-index: 9; background: url(/img/p-u-systemsound.png) no-repeat } .gesture .volume .hand { position: absolute; left: 0; top: 100%; opacity: 0; z-index: 11; width: 110% } @-webkit-keyframes lineup { 0% { height:0 } 66.66% { opacity:1; filter:alpha(opacity=100); height:54px } 100% { opacity:0; filter:alpha(opacity=0); height:54px } } @-moz-keyframes lineup { 0% { height:0 } 66.66% { opacity:1; filter:alpha(opacity=100); height:54px } 100% { opacity:0; filter:alpha(opacity=0); height:54px } } @-o-keyframes lineup { 0% { height:0 } 66.66% { opacity:1; filter:alpha(opacity=100); height:54px } 100% { opacity:0; filter:alpha(opacity=0); height:54px } } @keyframes lineup { 0% { height:0 } 66.66% { opacity:1; filter:alpha(opacity=100); height:54px } 100% { opacity:0; filter:alpha(opacity=0); height:54px } } .gesture .volume.active .line-up { -webkit-animation: lineup 1.5s 0s forwards; -moz-animation: lineup 1.5s 0s forwards; -ms-animation: lineup 1.5s 0s forwards; -o-animation: lineup 1.5s 0s forwards; animation: lineup 1.5s 0s forwards } @-webkit-keyframes linedown { 0% { height:0 } 66.66% { opacity:1; filter:alpha(opacity=100); height:54px } 100% { opacity:0; filter:alpha(opacity=0); height:54px } } @-moz-keyframes linedown { 0% { height:0 } 66.66% { opacity:1; filter:alpha(opacity=100); height:54px } 100% { opacity:0; filter:alpha(opacity=0); height:54px } } @-o-keyframes linedown { 0% { height:0 } 66.66% { opacity:1; filter:alpha(opacity=100); height:54px } 100% { opacity:0; filter:alpha(opacity=0); height:54px } } @keyframes linedown { 0% { height:0 } 66.66% { opacity:1; filter:alpha(opacity=100); height:54px } 100% { opacity:0; filter:alpha(opacity=0); height:54px } } .gesture .volume.active .line-down { -webkit-animation: linedown 1.5s 1s forwards; -moz-animation: linedown 1.5s 1s forwards; -ms-animation: linedown 1.5s 1s forwards; -o-animation: linedown 1.5s 1s forwards; animation: linedown 1.5s 1s forwards } @-webkit-keyframes soundbg { 0% { opacity:1; filter:alpha(opacity=100) } 100% { opacity:0; filter:alpha(opacity=0) } } @-moz-keyframes soundbg { 0% { opacity:1; filter:alpha(opacity=100) } 100% { opacity:0; filter:alpha(opacity=0) } } @-o-keyframes soundbg { 0% { opacity:1; filter:alpha(opacity=100) } 100% { opacity:0; filter:alpha(opacity=0) } } @keyframes soundbg { 0% { opacity:1; filter:alpha(opacity=100) } 100% { opacity:0; filter:alpha(opacity=0) } } .gesture .volume.active .soundbg { opacity: 1; filter: alpha(opacity=100); -webkit-transition: all .5s; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; transition: all .5s; -webkit-animation: soundbg .5s 2s forwards; -moz-animation: soundbg .5s 2s forwards; -ms-animation: soundbg .5s 2s forwards; -o-animation: soundbg .5s 2s forwards; animation: soundbg .5s 2s forwards } @-webkit-keyframes sound { 50% { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg) } 100% { -webkit-transform:rotate(-180deg); -moz-transform:rotate(-180deg); -ms-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg) } } @-moz-keyframes sound { 50% { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg) } 100% { -webkit-transform:rotate(-180deg); -moz-transform:rotate(-180deg); -ms-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg) } } @-o-keyframes sound { 50% { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg) } 100% { -webkit-transform:rotate(-180deg); -moz-transform:rotate(-180deg); -ms-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg) } } @keyframes sound { 50% { -webkit-transform:rotate(0deg); -moz-transform:rotate(0deg); -ms-transform:rotate(0deg); -o-transform:rotate(0deg); transform:rotate(0deg) } 100% { -webkit-transform:rotate(-180deg); -moz-transform:rotate(-180deg); -ms-transform:rotate(-180deg); -o-transform:rotate(-180deg); transform:rotate(-180deg) } } .gesture .volume.active .sound { -webkit-animation: sound 2s; -moz-animation: sound 2s; -ms-animation: sound 2s; -o-animation: sound 2s; animation: sound 2s; -webkit-transform: rotate(-180deg); -moz-transform: rotate(-180deg); -ms-transform: rotate(-180deg); -o-transform: rotate(-180deg); transform: rotate(-180deg); -webkit-transform-origin: left center; -moz-transform-origin: left center; -ms-transform-origin: left center; -o-transform-origin: left center; transform-origin: left center } @-webkit-keyframes volume { 40% { top:40%; opacity:1; filter:alpha(opacity=100) } 80% { top:60%; opacity:1; filter:alpha(opacity=100) } 100% { top:100%; opacity:0; filter:alpha(opacity=0) } } @-moz-keyframes volume { 40% { top:40%; opacity:1; filter:alpha(opacity=100) } 80% { top:60%; opacity:1; filter:alpha(opacity=100) } 100% { top:100%; opacity:0; filter:alpha(opacity=0) } } @-o-keyframes volume { 40% { top:40%; opacity:1; filter:alpha(opacity=100) } 80% { top:60%; opacity:1; filter:alpha(opacity=100) } 100% { top:100%; opacity:0; filter:alpha(opacity=0) } } @keyframes volume { 40% { top:40%; opacity:1; filter:alpha(opacity=100) } 80% { top:60%; opacity:1; filter:alpha(opacity=100) } 100% { top:100%; opacity:0; filter:alpha(opacity=0) } } .gesture .volume.active .hand { -webkit-animation: volume 2.5s; -moz-animation: volume 2.5s; -ms-animation: volume 2.5s; -o-animation: volume 2.5s; animation: volume 2.5s } .gesture .camera .innerCenter { height: 100%; overflow: hidden } .gesture .camera .line-left { position: absolute; left: 0; top: 0; z-index: 10; width: 50% } .gesture .camera .line-right { position: absolute; left: 50%; top: 0; z-index: 10; width: 50% } .gesture .camera .cover { position: absolute; top: 0; z-index: 11; width: 50%; height: 100% } .gesture .camera .cover-left { left: 0; background: #131416 } .gesture .camera .cover-right { left: 50%; background: #131416 } @-webkit-keyframes coverleft { 0% { height:100% } 100% { height:0 } } @-moz-keyframes coverleft { 0% { height:100% } 100% { height:0 } } @-o-keyframes coverleft { 0% { height:100% } 100% { height:0 } } @keyframes coverleft { 0% { height:100% } 100% { height:0 } } .gesture .camera.active .cover-left { height: 0; -webkit-animation: coverleft .25s linear; -moz-animation: coverleft .25s linear; -ms-animation: coverleft .25s linear; -o-animation: coverleft .25s linear; animation: coverleft .25s linear } @-webkit-keyframes coverright { 0% { height:100% } 100% { height:0 } } @-moz-keyframes coverright { 0% { height:100% } 100% { height:0 } } @-o-keyframes coverright { 0% { height:100% } 100% { height:0 } } @keyframes coverright { 0% { height:100% } 100% { height:0 } } .gesture .camera.active .cover-right { height: 0; top: 415px; -webkit-transition: all .25s linear .25s; -moz-transition: all .25s linear .25s; -ms-transition: all .25s linear .25s; -o-transition: all .25s linear .25s; transition: all .25s linear .25s } .gesture .camera.active .line { opacity: 0; filter: alpha(opacity=0); -webkit-transition: all 0s .5s; -moz-transition: all 0s .5s; -ms-transition: all 0s .5s; -o-transition: all 0s .5s; transition: all 0s .5s } .gesture .camera .light { position: absolute; opacity: 0; filter: alpha(opacity=0) } .gesture .camera.active .light { opacity: 1; filter: alpha(opacity=100); -webkit-transition: all .5s .5s; -moz-transition: all .5s .5s; -ms-transition: all .5s .5s; -o-transition: all .5s .5s; transition: all .5s .5s } .gesture .music .innerCenter { height: 0; overflow: hidden; text-align: left } .gesture .music .line { position: absolute; z-index: 10; width: 100% } .gesture .music .light { position: absolute; opacity: 0; filter: alpha(opacity=0) } @-webkit-keyframes music { 0% { height:0 } 100% { height:100% } } @-moz-keyframes music { 0% { height:0 } 100% { height:100% } } @-o-keyframes music { 0% { height:0 } 100% { height:100% } } @keyframes music { 0% { height:0 } 100% { height:100% } } .gesture .music.active .innerCenter { -webkit-animation: music .5s; -moz-animation: music .5s; -ms-animation: music .5s; -o-animation: music .5s; animation: music .5s } .gesture .music.active .light { opacity: 1; filter: alpha(opacity=100); -webkit-transition: all .5s .5s; -moz-transition: all .5s .5s; -ms-transition: all .5s .5s; -o-transition: all .5s .5s; transition: all .5s .5s } .gesture .flashlight .line { position: absolute; z-index: 10; width: 46.93% } .gesture .flashlight .line .innerCenter { width: 0; overflow: hidden } .gesture .flashlight .light { position: absolute; opacity: 0; filter: alpha(opacity=0) } @-webkit-keyframes flashlight { 0% { width:0 } 100% { width:100% } } @-moz-keyframes flashlight { 0% { width:0 } 100% { width:100% } } @-o-keyframes flashlight { 0% { width:0 } 100% { width:100% } } @keyframes flashlight { 0% { width:0 } 100% { width:100% } } .gesture .flashlight.active .line .innerCenter { -webkit-animation: flashlight .5s; -moz-animation: flashlight .5s; -ms-animation: flashlight .5s; -o-animation: flashlight .5s; animation: flashlight .5s } .gesture .flashlight.active .light { opacity: 1; filter: alpha(opacity=100); -webkit-transition: all .5s .5s; -moz-transition: all .5s .5s; -ms-transition: all .5s .5s; -o-transition: all .5s .5s; transition: all .5s .5s } /* FILE ARCHIVED ON 20:24:08 Sep 29, 2017 AND RETRIEVED FROM THE INTERNET ARCHIVE ON 18:10:42 Apr 20, 2024. JAVASCRIPT APPENDED BY WAYBACK MACHINE, COPYRIGHT INTERNET ARCHIVE. ALL OTHER CONTENT MAY ALSO BE PROTECTED BY COPYRIGHT (17 U.S.C. SECTION 108(a)(3)). */ /* playback timings (ms): captures_list: 0.666 exclusion.robots: 0.154 exclusion.robots.policy: 0.142 cdx.remote: 0.064 esindex: 0.01 LoadShardBlock: 246.066 (3) PetaboxLoader3.datanode: 41.985 (4) load_resource: 136.976 PetaboxLoader3.resolve: 88.161 */