.iphone{width:16.06em;height:30.6em;border-radius:1.875em;margin:2em;position:relative;display:inline-block;background:#fff}.iphone__item{width:16.06em;height:1em;position:absolute;bottom:-2em;color:#158f76;text-align:center}.nav--active{height:10%}.iphone__power-btn{width:2.188em;height:.188em;background:#e0e0e0;position:absolute;right:2.5em;top:-0.188em}.iphone__left-btn{width:.188em;height:1.250em;top:3.250em;left:-0.188em;position:absolute;background:#e0e0e0}.iphone__left-btn:before{content:'';width:.188em;height:.875em;position:absolute;top:3em;background:#e0e0e0}.iphone__left-btn:after{content:'';width:.188em;height:.875em;position:absolute;top:5.5em;background:#e0e0e0}.iphone__details{width:.438em;height:.438em;border-radius:100%;position:relative;top:1.313em;left:8em;background:#7c7c7c}.iphone__details:before{content:'';width:2.5em;height:.25em;border-radius:.25em;position:absolute;top:1em;left:-1em;background:#7c7c7c}.iphone__home-btn{width:2.25em;height:2.25em;border-radius:100%;position:absolute;bottom:1em;right:6.75em;background:#f7f7f7}.iphone__home-btn:before{content:'';width:.813em;height:.813em;border:.15em solid #a8a8a8;border-radius:.2em;position:absolute;top:.6em;left:.57em}.iphone__screen{width:14.5em;height:60px;position:absolute;top:3.75em;left:.750em;overflow:hidden}.iphone__content{position:relative;background-color:#d2527f;width:100%;height:100%}.nav{position:absolute;z-index:100;opacity:0;-webkit-transition-property:all;transition-property:all;-webkit-transition-duration:300ms;transition-duration:300ms}.nav--active .nav{opacity:1;background-color:#333}.nav__list{margin:0;padding:10px 0}.nav__item{list-style-type:none;text-align:left}.nav__link{text-transform:uppercase;text-decoration:none;color:#fff;opacity:1;-webkit-transition:opacity 300ms ease-in-out;transition:opacity 300ms ease-in-out}.nav__trigger{display:block;position:absolute;width:30px;height:25px;right:10px;top:10px;z-index:200}.nav--active .nav__trigger{opacity:.5}.nav__icon{display:inline-block;position:relative;width:30px;height:5px;background-color:#fff;-webkit-transition-property:background-color,-webkit-transform;transition-property:background-color,-webkit-transform;transition-property:background-color,transform;transition-property:background-color,transform,-webkit-transform;-webkit-transition-duration:300ms;transition-duration:300ms}.nav__icon:before,.nav__icon:after{content:'';display:block;width:30px;height:5px;position:absolute;background:#fff;-webkit-transition-property:margin,-webkit-transform;transition-property:margin,-webkit-transform;transition-property:margin,transform;transition-property:margin,transform,-webkit-transform;-webkit-transition-duration:300ms;transition-duration:300ms}.nav__icon:before{margin-top:-10px}.nav__icon:after{margin-top:10px}.style-1 .nav{-webkit-transform:translateX(-100%);transform:translateX(-100%);width:100%;height:100%}.style-1 .nav__link{opacity:0;-webkit-transition-delay:500ms;transition-delay:500ms}.style-1 .nav--active .nav__link{opacity:1}.style-1 .nav--active .nav{-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out;-webkit-transform:translateX(0);transform:translateX(0)}.style-1 .nav--active .nav__icon{background:rgba(0,0,0,0)}.style-1 .nav--active .nav__icon:before{margin-top:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.style-1 .nav--active .nav__icon:after{margin-top:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.style-2{-webkit-perspective:1000px;perspective:1000px}.style-2 .nav{width:100%;height:100%;-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.style-2 .nav--active .nav{-webkit-transform:rotateY(360deg);transform:rotateY(360deg)}.style-2 .iphone__content{-webkit-transform:rotateY(0);transform:rotateY(0);-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.style-2 .nav--active .iphone__content{-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-transform:rotateY(180deg);transform:rotateY(180deg)}.style-2 .navi__icon{background:rgba(0,0,0,0)}.style-2 .navi__icon:before{margin-top:0;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.style-2 .navi__icon:after{margin-top:0;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.style-2 .nav--active .nav__icon{background:rgba(0,0,0,0);-webkit-transform:rotate(135deg);transform:rotate(135deg)}.style-2 .nav--active .nav__icon:before{margin-top:0;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.style-2 .nav--active .nav__icon:after{margin-top:0;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.style-3 .nav{width:100%;height:100%;-webkit-transform:translateX(100%);transform:translateX(100%)}.style-3 .nav--active .nav{-webkit-transform:translateX(20%);transform:translateX(20%)}
.style-3 .iphone__content{-webkit-transform:scale(1) translateX(0);transform:scale(1) translateX(0);-webkit-transition:all 300ms ease-in-out;transition:all 300ms ease-in-out}.style-3 .iphone__screen{background-color:#333}.style-3 .nav--active .iphone__content{-webkit-transform:scale(0.9) translateX(-90%);transform:scale(0.9) translateX(-90%)}.style-3 .nav__icon{background:rgba(0,0,0,0)}.style-3 .nav__icon:before{margin-top:0;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.style-3 .nav__icon:after{margin-top:0;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.style-3 .nav--active .nav__icon{-webkit-transform:rotate(135deg);transform:rotate(135deg)}.style-4 .nav{width:100%;height:100%;-webkit-transform:translateY(-100%);transform:translateY(-100%)}.style-4 .nav--active .nav{-webkit-transform:translateY(0);transform:translateY(0)}.style-4 .nav--active .nav__icon{-webkit-transform:rotate(90deg);transform:rotate(90deg)}.style-4 .nav__link{opacity:0;-webkit-transition-delay:500ms;transition-delay:500ms}.style-4 .nav--active .nav__link{opacity:1}.style-5 .nav{-webkit-transform:translate(100%,-100%) scale(0.5);transform:translate(100%,-100%) scale(0.5);border-radius:100%}.style-5 .nav--active .nav{-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1);border-radius:0;width:100%;height:100%}.style-5 .nav__link{opacity:0;-webkit-transition-delay:500ms;transition-delay:500ms}.style-5 .nav--active .nav__link{opacity:1}.style-5 .nav--active .nav__icon{background:rgba(0,0,0,0)}.style-5 .nav--active .nav__icon:before{margin-top:0;-webkit-transform:rotate(45deg);transform:rotate(45deg)}.style-5 .nav--active .nav__icon:after{margin-top:0;-webkit-transform:rotate(-45deg);transform:rotate(-45deg)}.style-6 .nav{-webkit-transform:rotateZ(-90deg);transform:rotateZ(-90deg);width:100%;height:100%}.style-6 .nav--active .nav{-webkit-transform:rotateZ(0);transform:rotateZ(0)}.style-6 .nav__link{opacity:0;-webkit-transition-delay:500ms;transition-delay:500ms}.style-6 .nav--active .nav__link{opacity:1}.style-6 .nav__icon{background:rgba(0,0,0,0)}.style-6 .nav__icon:before{margin-top:0;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.style-6 .nav__icon:after{margin-top:0;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.style-6 .nav--active .nav__icon{-webkit-transform:rotate(135deg);transform:rotate(135deg)}<!--ºÄʱ1755895160.1127Ãë-->