@charset "UTF-8";
html { font-family: '黑体'; }

body { margin: 0; padding: 0; overflow: hidden; position: fixed; top: 0; bottom: 0; width:100%;}

.section { position: relative; overflow: hidden; }

@-webkit-keyframes nebula { 0% { background-position: -800px 0; }
  50% { background-position: -400px 0; }
  100% { background-position: 0 0; } }

@keyframes nebula { 0% { background-position: -800px 0; }
  50% { background-position: -400px 0; }
  100% { background-position: 0 0; } }

@-webkit-keyframes meteor { 0% { -webkit-transform: translateX(0) translateY(0);
    opacity: 0; }
  100% { -webkit-transform: translateX(-500px) translateY(500px);
    opacity: 0.6; } }

@keyframes meteor { 0% { transform: translateX(0) translateY(0);
    opacity: 0; }
  100% { transform: translateX(-500px) translateY(500px);
    opacity: 0.6; } }

@-webkit-keyframes showsubtitle { 0% { -webkit-transform: translateY(-50px);
    opacity: 0; }
  100% { -webkit-transform: translateY(0);
    opacity: 1; } }

@keyframes showsubtitle { 0% { transform: translateY(-50px);
    opacity: 0; }
  100% { transform: translateY(0);
    opacity: 1; } }

@-webkit-keyframes flash { 0% { -webkit-box-shadow: 0 0 20px #678;
    box-shadow: 0 0 20px #678; }
  100% { -webkit-box-shadow: 0 0 40px #abc;
    box-shadow: 0 0 40px red; } }

@keyframes flash { 0% { box-shadow: 0 0 20px #678; }
  100% { box-shadow: 0 0 40px red; } }

@-webkit-keyframes loading { 0% { transform: translateY(0);
    opacity: 0.7; }
  70% { transform: translateY(-42px);
    opacity: 0.7; }
  70.1% { transform: translateY(0);
    opacity: 0; }
  100% { transform: translateY(0);
    opacity: 0.7; } }

@keyframes loading { 0% { transform: translateY(0);
    opacity: 0.7; }
  70% { transform: translateY(-42px);
    opacity: 0.7; }
  70.1% { transform: translateY(0);
    opacity: 0; }
  100% { transform: translateY(0);
    opacity: 0.7; } }

.section-loading { background-size: cover; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 500; background-color: #333; }

.section-loading .progress { background-image: url("loading.png"); background-repeat: no-repeat; background-size: auto 42px; height: 42px; width: 260px; margin-top: 100px; position: relative; margin-right: auto; margin-left: auto; }

.section-loading .progress:after { position: absolute; opacity: 0.7; left: 0; right: 0; height: 42px; background-color: #333; z-index: 10; }

.section-loading .progress .text { position: absolute; right: 0; color: #AF0; z-index: 20; font-size: 42px; line-height: 1em; font-family: 'Century Gothic'; text-align: left; width: 85px; }

.section-loading .progress .text:after { content: "%"; font-size: 12px; line-height: 1.6em; position: absolute; right: 0; bottom: 0; }

.section-loading .progress-loading:after { -webkit-animation: loading 3s ease-out infinite; animation: loading 3s ease-out infinite; }

.section-loading .progress-complete:after { opacity: 0 !important; -webkit-transform: 0.3s; transform: 0.3s; -webkit-animation: none; animation: none; }

.section-loading .progress-foot { position: absolute; text-align: center; left: 0; right: 0; font-family: 'Century Gothic'; color: #FFF; opacity: 0.3; bottom: 60px; }

.section-loading .lead { opacity: .6; margin-top: 40%; }

.section-loading .lead img { width: 100%; display: block; }

.section-loading .gear { position: absolute; right: 0; width: 32px; }

.section-loading .gear img { width: 100%; display: block; animation: rote 1s linear infinite; }

.section-loading .progress-loading:after { -webkit-animation: loading 3s ease-out infinite; animation: loading 3s ease-out infinite; }

.section-loading .progress:after { content: ""; position: absolute; opacity: 0.7; left: 0; right: 0; height: 42px; background-color: #333; z-index: 10; }

@keyframes rote { 0% { transform: rotate(0deg); }
  50% { transform: rotate(180deg); }
  100% { transform: rotate(360deg); } }

.section-cover .site-name { z-index: 20; position: relative; margin: auto; width: 46%; margin-top: 120px; }

.section-loading .progress { background-image: url("loading.png"); background-repeat: no-repeat; background-size: auto 42px; height: 42px; width: 260px; margin-top: 100px; position: relative; margin-right: auto; margin-left: auto; }

.section-cover .site-name .site-title-yq { opacity: 0; }

.section-cover .site-name .site-subtitle, .section-cover .site-name .site-title { color: #FFF; font-size: 31px; font-weight: bolder; margin-top: -30px; }

.section-cover .site-name .site-subtitle { left: auto; right: 0; top: 130px; opacity: 0; }

.section-cover .site-name .show-subtitle { opacity: 1; -webkit-animation: showsubtitle 0.3s ease-out; animation: showsubtitle 0.3s ease-out; }

.section-cover .btn-enter-box { opacity: 0; }

.section-cover .btn-enter { width: 90px; margin: auto; position: absolute; bottom: 150px; background-color: #fff; border-radius: 3px; font-size: 18px; text-align: center; padding: 8px 20px; color: #fff; opacity: 1; background-image: -webkit-linear-gradient(-75deg, #F44336, #f44333); -webkit-animation: flash 0.5s linear infinite alternate; animation: flash 0.5s linear infinite alternate; left: 50%; transform: translateX(-50%); }

.section-cover .show-btn { opacity: 1; -webkit-animation: showsubtitle 0.3s ease-out; animation: showsubtitle 0.3s ease-out; }

@-webkit-keyframes scaleout { 0% { -webkit-transform: scale(0); }
  100% { -webkit-transform: scale(1);
    opacity: 0; } }

@keyframes scaleout { 0% { transform: scale(0);
    -webkit-transform: scale(0); }
  100% { transform: scale(1);
    -webkit-transform: scale(1);
    opacity: 0; } }

.grid-style { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; }

.grid-style:before, .grid-style:after, .grid-style > *:before, .grid-style > *:after { position: absolute; content: ' '; left: 0; right: 0; top: 0; bottom: 0; border-style: solid; border-color: #087; z-index: 1; background: rgba(0, 0, 0, 0.2); }

.grid-style:before, .grid-style > *:before { left: -50px; right: -80px; border-width: 1px 0; }

.grid-style > *:before { left: -80px; right: -40px; top: -30px; bottom: -30px; }

.grid-style:after, .grid-style > *:after { top: -80px; bottom: -50px; border-width: 0 1px; }

.grid-style > *:after { left: -30px; right: -30px; top: -50px; bottom: -80px; }

@-webkit-keyframes drowBox { 0% { -webkit-transform: scale(1) rotateY(0) rotateX(50deg) rotateZ(35deg);
    transform: scale(1) rotateY(0) rotateX(50deg) rotateZ(35deg); }
  100% { -webkit-transform: scale(1) rotateY(0) rotateX(50deg) rotateZ(-35deg);
    transform: scale(1) rotateY(0) rotateX(50deg) rotateZ(-35deg); } }

@keyframes drowBox { 0% { -webkit-transform: scale(1) rotateY(0) rotateX(50deg) rotateZ(35deg);
    transform: scale(1) rotateY(0) rotateX(50deg) rotateZ(35deg); }
  100% { -webkit-transform: scale(1) rotateY(0) rotateX(50deg) rotateZ(-35deg);
    transform: scale(1) rotateY(0) rotateX(50deg) rotateZ(-35deg); } }

.section-preload { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(159deg, #009688, #133259 80%); overflow: hidden; display: none; }

.preload-svg-box { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; margin: 80px auto; width: 160px; height: 160px; }

.preload-svg-box .viewport { position: absolute; height: 100%; width: 100%; -webkit-transform: scale(0); -ms-transform: scale(0); transform: scale(0); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; transition-duration: 0.5s; }

.preload-svg-box .viewport:before, .preload-svg-box .viewport:after { background-color: rgba(0, 0, 0, 0.1); transition: all 0.3s; border-width: 1px; }

.preload-svg-box .viewport:before { top: 50%; bottom: 50%; left: -300px; right: -300px; }

.preload-svg-box .viewport:after { left: 50%; right: 50%; top: 0; bottom: 0; }

.preload-svg-box .viewport.scale { -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); }

.preload-svg-box .viewport.scale-border:before { top: 0; bottom: 0; }

.preload-svg-box .viewport.scale-border:after { left: 0; right: 0; }

.preload-svg-box .viewport.background .svg-logo-structure { background: #FFFFFF; transition: all 0.3s; }

.preload-svg-box .viewport.structure .svg-logo-structure:before { height: 36px; -webkit-transform: rotatex(90deg) translateY(-36px); -ms-transform: rotatex(90deg) translateY(-36px); transform: rotatex(90deg) translateY(-36px); }

.preload-svg-box .viewport.structure .svg-logo-structure:after { -webkit-transform: translateZ(-36px); transform: translateZ(-36px); opacity: 1; border-width: 1px; }

.preload-svg-box .viewport.rotate { -webkit-transform: scale(1) rotateY(0) rotateX(50deg) rotateZ(35deg); transform: scale(1) rotateY(0) rotateX(50deg) rotateZ(35deg); }

.preload-svg-box .viewport.animation { -webkit-animation-name: drowBox; animation-name: drowBox; -webkit-animation-direction: alternate; animation-direction: alternate; -webkit-animation-fill-mode: forwards; animation-fill-mode: forwards; -webkit-animation-duration: 10s; animation-duration: 10s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-timing-function: linear; animation-timing-function: linear; }

.preload-svg-box .viewport.loading-move:after { bottom: -50px; }

.preload-svg-box .viewport.loading-move .svg-logo-structure:after { bottom: -50px; }

.preload-svg-box .viewport svg { position: absolute; }

.preload-svg-box .viewport .svg-logo-structure { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 10; }

.preload-svg-box .viewport .svg-logo-structure:before { transition: all 0.3s; border-width: 0 1px; top: 0; height: 0; left: 0; right: 0; -webkit-transform: rotatex(90deg); -ms-transform: rotatex(90deg); transform: rotatex(90deg); -webkit-transform-origin: top; -ms-transform-origin: top; transform-origin: top; }

.preload-svg-box .viewport .svg-logo-structure:after { left: -0; right: 0; top: -0; bottom: 0; transition: all 0.3s; opacity: 0; }

.preload-svg-box .viewport .svg-logo-face { -webkit-transform-style: preserve-3d; transform-style: preserve-3d; visibility: hidden; height: 100%; width: 100%; }

.preload-svg-box .viewport .svg-logo-face:before { top: 0; bottom: 0; left: 0; right: 0; left: -300px; right: -300px; border-width: 1px; }

.preload-svg-box .viewport .svg-logo-face:after { top: auto; bottom: 0; left: 0; right: 0; height: 36px; transition: all 0.3s; -webkit-transform: rotatex(90deg) translateY(36px); -ms-transform: rotatex(90deg) translateY(36px); transform: rotatex(90deg) translateY(36px); -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; }

.preload-svg-box .viewport .svg-logo-face svg { transition-property: all; transition-timing-function: ease; transition-duration: 0; background-color: transparent; }

.preload-svg-box .viewport .svg-logo-face .s1, .preload-svg-box .viewport .svg-logo-face .s2, .preload-svg-box .viewport .svg-logo-face .s3, .preload-svg-box .viewport .svg-logo-face .s4, .preload-svg-box .viewport .svg-logo-face .s5 { -webkit-transform: translateZ(500px); transform: translateZ(500px); }

.preload-svg-box .viewport .svg-logo-face.active { visibility: visible; transition-duration: .3s; -webkit-transform: translateZ(-36px); transform: translateZ(-36px); background: #0a9; }

.preload-svg-box .viewport .svg-logo-face.active-down .s1, .preload-svg-box .viewport .svg-logo-face.active-down .s2, .preload-svg-box .viewport .svg-logo-face.active-down .s3, .preload-svg-box .viewport .svg-logo-face.active-down .s4, .preload-svg-box .viewport .svg-logo-face.active-down .s5 { transition-duration: .3s; visibility: visible; -webkit-transform: translateZ(37px); transform: translateZ(37px); }

.preload-svg-box .viewport .svg-logo-face.active-down .s2 { transition-delay: .3s; }

.preload-svg-box .viewport .svg-logo-face.active-down .s3 { transition-delay: .6s; }

.preload-svg-box .viewport .svg-logo-face.active-down .s4 { transition-delay: .9s; }

.preload-svg-box .viewport .svg-logo-face.active-down .s5 { transition-delay: 1.2s; }

.preload-svg-box .viewport .svg-logo-face .loading { text-align: center; font-family: 'microsoft yahei'; background: rgba(255, 255, 255, 0.2); position: absolute; left: 0; right: 0; height: 36px; bottom: 0; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; line-height: 36px; transition: all 0.3s; }

.preload-svg-box .viewport .svg-logo-face .loading .text { position: relative; z-index: 10; color: #FFF; }

.preload-svg-box .viewport .svg-logo-face .loading .progress { background-color: #FFF; left: 0; top: 0; bottom: 0; transition: all 0.3s; position: absolute; opacity: 0.3; z-index: 5; }

.preload-svg-box .viewport .svg-logo-face.loading-active .loading { -webkit-transform: rotateX(-90deg); transform: rotateX(-90deg); }

.preload-svg-box .viewport .svg-logo-face.loading-move .loading { bottom: -50px; }

.btn-group { position: absolute; bottom: 80px; left: 0; right: 0; }

.btn-start { padding: 0.8em 2em; border: none; border-radius: 3px; background: #009688; box-shadow: 0 2px 0 #165; color: #FFF; margin: 0 auto; display: block; outline: none; position: relative; -webkit-transform: translateY(1000%); -ms-transform: translateY(1000%); transform: translateY(1000%); }

.btn-start.active { transition: all 0.3s; transition-timing-function: ease; -webkit-transform: translateY(0%); -ms-transform: translateY(0%); transform: translateY(0%); }

.btn-start:active { background-color: #009688; -webkit-transform: translateY(2px); -ms-transform: translateY(2px); transform: translateY(2px); box-shadow: none; }

.scene-author { font-family: 'microsoft yahei'; position: absolute; text-align: center; opacity: 0.5; color: #FFF; bottom: 30px; left: 0; right: 0; }

.scene-author h3 { margin: 0; font-size: 16px; font-weight: 100; }

.scene-author small { font-size: 0.6em; }

#audio_btn{position:absolute;right:20px;top:20px;z-index:200;width:30px;height:30px}

.rotateee{-webkit-animation:rotating 1.2s linear infinite;-moz-animation:rotating 1.2s linear infinite;-o-animation:rotating 1.2s linear infinite;animation:rotating 1.2s linear infinite}

.off{background-image:url(music.png);background-size:contain}

@keyframes rotating{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}

@-webkit-keyframes rotating{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}

@-moz-keyframes rotating{0%,100%{transform:rotate(-10deg)}50%{transform:rotate(10deg)}}

@keyframes zoomOutLeft { 40% { opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(42px, 0, 0); }
  to { opacity: 0;
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform-origin: left center; } }

.zoomOutLeft { animation: linear zoomOutLeft .6s; }

@keyframes zoomOutRight { 40% { opacity: 1;
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0); }
  to { opacity: 0;
    transform: scale(0.1) translate3d(2000px, 0, 0);
    transform-origin: right center; } }

.zoomOutRight { animation-name: zoomOutRight; }

@keyframes rotate { form { transform: rotate(0deg) scale(1);
    opacity: 1; }
  to { transform: rotate(720deg) scale(0.3);
    opacity: 0; } }
	.page { position: fixed; left: 0; right: 0; bottom: 0; top: 0; display: none;width: 100%;height: 100%;overflow: hidden;user-select: none;-webkit-user-drag: none;}

.page.stage1 { background: url(background.jpg) no-repeat; background-size: 100% 100%; }

.page.stage2 { background: url(background-2.jpg) no-repeat; background-size: 100% 100%; }

.show { display: block !important; }

#share { background: #333; }

#share .jt { position: absolute; right: 0; top: 0; animation: toTop linear 1s infinite; -webkit-animation: toTop linear 1s infinite; }

@keyframes toTop { 0%, 100% { top: 0; }
  50% { top: 10px; } }

.furniture { position: absolute; left: 0; bottom: 10%; font-size: 0; }

.furniture .item { border: 1px solid #ddd; width: 50%; display: inline-block; }

@keyframes heightIncrease { 0% { height: 0; }
  100% { height: 100%; } }

.img-list { position: absolute; left: 0; right: 0; bottom: 0; top: 0; }

.img-list .img { height: 100%; }

.img-list .img img { width: 100%; height: 100%; }

.img-list .img.move { animation: linear move 1.5s; -webkit-animation: linear move 1.5s; }

.img-list .img.move img { -webkit-animation: linear rotate 1.5s; animation: linear rotate 1.5s; animation-fill-mode: forwards; }

.rotateFadeOut { -webkit-animation: linear rotateFadeOut 3s; animation-fill-mode: forwards; }

@keyframes move { form { transform: translateX(0) translateY(0); }
  to { transform: translateX(-50%) translateY(-50%); } }

.rotateOut { animation-name: rotateOut; }

@keyframes rotateOut { from { -webkit-transform-origin: center;
    transform-origin: center;
    opacity: 1; }
  to { -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0; } }


.stage1:after { content: ""; background: transparent; }

@keyframes blinkshdow {
	0% { opacity: 0.9; }
  50% { opacity: 0.7; }
  100% { opacity: 0.9; }
}

@-webkit-keyframes blinkshdow {
	0% { opacity: 0.9; }
  50% { opacity: 0.7; }
  100% { opacity: 0.9; }
}
 
 
.stage1.unfire:after { opacity:0; background:#000; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transition: linear .8s all; content: ""; 
animation: linear blinkshdow 2s infinite;
 -webkit-animation: linear blinkshdow 2s infinite;
}
 

.stage1 .fire { position: absolute; top: 24%; left: 12%; right: 70%; height: 14vh; z-index: 2; }

.stage1 .fire img { width: 100%; }

.stage1 .circle {
    position: absolute;
    bottom: 0;
    left: 20px;
    right: 20px;
    top: 50%;
}

.stage1 .hand { position: absolute; right: 37%; left: 37%; bottom: 6%; top: 58%; z-index: 1; display: none; background: url(hand.png) no-repeat; background-size: 100%; animation: fade-in-out linear 2s infinite; -webkit-animation: fade-in-out linear 2s infinite; }

@keyframes fade-in-out {
	0% {opacity: 1; }
  50% { opacity: .5; }
  100% { opacity: 1; }
  }



.stage2 .slider { position: absolute; top: 27%; bottom: 53%; left: 17%; right: 29%; overflow: hidden; }

.stage2 .slider img { width: 100%; float: left; }

.stage2 .slider ul { padding: 0; margin: 0; list-style: none; width: 500%; height: 100%; transition: linear all .3s; }

.stage2 .slider ul li { height: 100%; width: 20%; float: left; position:relative;    transform: rotate(-11deg);}
.stage2 .slider ul li:after{content:"";position:absolute;left:0;bottom:0;top:0;right:0;z-index:2;}

.stage2 .slider ul li img { display: block; }

.stage2 .copy-writer { position: absolute; top: 59%; bottom: 0; left: 25%; right: 15%; overflow: hidden; }

.stage2 .copy-writer ul { width: 500%; height: 100%; padding: 0; margin: 0; list-style: none; transition: linear all .3s; }

.stage2 .copy-writer ul li { height: 100%; width: 20%; float: left; }

.stage2 .copy-writer ul li P { margin: 0; border-radius: 5px; text-indent: 2em; line-height: 1.5em; padding: .5em; background: rgba(255, 255, 255, 0.4); }

.stage3 { background: url(handel.png) no-repeat; background-size: 100% 100%; }

.stage3.gif { background-image: url(handel.gif); }

.stage3 .vertical-text { width: 1.4em; letter-spacing: .2em; height: 50%; right: 15%; top: 35%; color: #fff; word-wrap: break-word; position: absolute; z-index: 4; }

.stage3 .vertical-text .text1 { overflow: hidden; animation: linear heightIncrease 4s; -webkit-animation: linear heightIncrease 4s; }

.stage3 .vertical-text .text2 { overflow: hidden; -webkit-animation: linear heightIncrease 4s infinite; animation: linear heightIncrease 4s infinite; animation-delay: 4s; height: 0; }

.stage3 .handle { position: absolute; left: 15%; right: 57%; bottom: 44%; top: 37%; z-index: 2; }

.stage3 .handle img{position: absolute;right: 0;bottom: 0;width: 14vw;height: 14vw;}

.stage4 { background-image: url(background-4.jpg);backage-repeat:no-repeat; background-size: 100% 100%; }

.stage4 .p span { position: absolute; background: url(lead.gif); background-size: 100% 100%; width: 10vw; height: 10vw; left: 40%; top: 40%; }

.stage4 .p1 { position: absolute; right: 2%; bottom: 0; left: 25%; top: 54%; z-index: 3; }

.stage4 .p1 img { width: 100%; }

.stage4 .p2 { position: absolute; left: 0; top: 38%; right: 39%; }

.stage4 .p2 img { width: 100%; }

.stage4 .p3 { position: absolute; width: 15vw; height: 6vh; top: 41%; right: 21%; z-index: 3; }

.stage4 .p3 span { top: 0; }

.stage4 .p4 { position: absolute; width: 7vw; height: 3vh; top: 48%; right: 19%; z-index: 3; }

.stage4 .p4 span { left: 0; top: -30%; }

.stage4 .p5 { position: absolute; top: 24%; left: 11%; right: 4%; height: 10vh; }

.stage4 .height-animate { padding: .5em; }

.stage4 .height-animate p { animation: heightAnimate linear 4s; -webkit-animation: heightAnimate linear 4s; }

.stage4 .section { background: url(background-4-0.jpg) no-repeat; background-size: 100%; display: none; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index: 99; }

.stage4 .section.play { display: block; }

.stage4 .section img { margin: 30% auto 0 auto; display: block; }

.stage4 .section .full { width: 100%; height: 100%; margin: 0; }

.stage4 .section .item { position: absolute; left: 0; right: 0; bottom: 0; top: 0; display: none; }

.stage4 .section .item .phone { position: absolute; top: 0%; left: 15%; right: 15%; bottom: 25%; background-size: 100% 100%; }

.stage4 .section .item .phone img { margin: 0; width: 100%; }

.stage4 .section .item .phone .content { position: relative; }

.stage4 .section .item .phone .content:after { content: ""; width: 15vw; height: 15vw; position: absolute; background: url(hand.png); background-size: 100% 100%; animation: fade-in-out linear 2s infinite; -webkit-animation: fade-in-out linear 2s infinite; }




.stage4 .section .item .phone .content:nth-child(1):after { top: 40%; left: 37%; }

.stage4 .section .item .phone .content:nth-child(2):after { top: 50%; left: 50%; }

.stage4 .section .item .phone .content:nth-child(3):after { top: 80%; left: 22%; }

.stage4 .section .item .phone .content:nth-child(4):after { top: 23%; left: 58%; }

.stage4 .section .item .phone .content:nth-child(5):after { display: none; }

.stage4 .section .item .phone .content:not(:first-child) { display: none; position: relative; }

.stage4 .section .item .phone .content:not(:first-child) span { width: 50px; height: 50px; position: absolute; left: 40%; top: 30%; background: url(point.gif) no-repeat; background-size: 100% 100%; }

.stage4 .section .item .phone .content:not(:first-child) .video { display: none; position: absolute; left: 17.5%; top: 30%; right: 16.5%; }

.stage4 .section .item .phone .content:not(:first-child) .video video { width: 100%; }

.stage4 .section .item .text { position: absolute; bottom: 10%; margin: 0; left: 10%; right: 10%; text-indent: 2em; padding: 0; line-height: 1.5em; margin-top: 2em; font-size: 4vw; color: #000; }

.stage4 .section .item .text p { margin: 0; }

.stage4 .section3 { background: url(pc-2.png) no-repeat; background-size: 100% 100%; }

.stage4 .section3 .item .text { top: 14%; left: 10%; right: 10%; bottom: auto; }
.stage4 .section3 .paper{
    position: absolute;
    left: 18%;
    bottom: 39%;
    right: 52%;
    top: 35%;
}
.stage4 .section3 .paper img{padding:15px; margin:20px 0; box-sizing:border-box; background:#FFF; display:block; width:100%; height:auto; display:none;}
.stage4 .img { margin: 0 5%; }

.stage4 .img img { width: 100%; }

.stage4 .close { background: #d43; z-index: 222; padding: .5em; position: absolute; bottom: 0; right: 0; margin: 3vh; border-radius: 5px; color: #f2f4f6; display: none; }

span.point { width: 50px; height: 50px; background: url(point.gif) no-repeat; background-size: 100% 100%; }

div.hand { background: url(hand.png) no-repeat; background-size: 100%; height: 50px; width: 50px; position: absolute; top: 41%; left: 50%; animation: fade-in-out linear 2s infinite; -webkit-animation: fade-in-out linear 2s infinite; }

@keyframes heightAnimate { 0% { height: 0%; }
  100% { height: 100%; } }

#line { display: none; width: 5vw; position: absolute; top: 29%; left: 7%; overflow: hidden; background: url(switch.png) no-repeat; background-size: 100%; animation: bottomAnimate linear 3s; -webkit-animation: bottomAnimate linear 3s; animation-fill-mode: forwards; background-position: center bottom; z-index: 2; }

.notice { position: absolute; left: 3%; bottom: 0; color: #fff; text-shadow: 0 0 20px #ddd, 0 0 17px #000; padding: .5em; writing-mode: vertical-lr; top: 59%; line-height: 1.5em; }

.notice p { margin: 0; font-size: 4vw; padding: 0; }

#switch { display: none; width: 6vw; height: 6vw; position: absolute; left: 5%; top: 35%; background: url(switch.png) no-repeat; background-size: 100% 100%; animation: fade-in-out linear 2s infinite; -webkit-animation: fade-in-out linear 2s infinite; }

@keyframes bottomAnimate { from { bottom: 70%; }
  to { bottom: 30%; } }

.stage5 { background: url(5-0.jpg) no-repeat; background-size: 100% 100%; }

.stage5 .team { position: absolute; top: 5%; left: 10%; right: 10%; bottom: 38%; overflow: hidden; }

.stage5 .team .name { display: none; }

.stage5 .team img { width: 100%; margin: 0 auto; margin-bottom: 10%; }

.stage5 .team ul { position: absolute; top: 100%; margin: 0; padding: 0; list-style: none; animation: linear topA 4s; -webkit-animation: linear topA 4s; animation-fill-mode: forwards;-webkit-animation-fill-mode: forwards; width:100%;left:50%;transform: translateX(-50%);-webkit-transform: translateX(-50%);}

.stage5 .team ul li { font-size: 4vw; line-height: 1.8em; color: #fff; text-align: center; }

.stage5 .team.active .final { display: none; }

.stage5 .team.active .name { display: block; }

.stage5 .btn { position: absolute; right: 0; width: 1em; background: rgba(255, 255, 255, 0.4); top: 21%; color: #fff; border-radius: 25% 0 0 25%; padding: .5em; }

@-webkit-keyframes topA { form { top: 100%; }
  to { top: 25%; } }

@-moz-keyframes topA { form { top: 100%; }
  to { top: 25%; } }

@keyframes topA { form { top: 100%; }
  to { top: 25%; } }
  #jt{position: absolute;right: 0;top: 0;width: 5vw;animation: jt linear 1s infinite;-webkit-animation: jt linear 1s infinite;}
@keyframes jt{
    0%,100%{opacity: 1;right: 0;}
    50%{opacity: .3;right: 10px;}
}
.section5.section.play{background:url(computer.gif);background-size:100% 100%;}
.stage4 .p2 span{left:20%;}

.section1 .item:first-child:after,.section2 .item:first-child:after{
	 content: ""; width: 15vw; height: 15vw; position: absolute; background: url(hand.png);
	 background-size: 100% 100%; animation: fade-in-out linear 2s infinite;
	 -webkit-animation: fade-in-out linear 2s infinite; left:50%;top:50%;
}