@charset "utf-8"; /*****css3******/ body a{ transition:0.2s all; -webkit-transition:0.2s all; -moz-transition:0.2s all; -o-transition:0.2s all; -ms-transition:0.2s all; } .in_link a {opacity:1;filter:alpha(opacity=100); transform: scale(1.0); transition: all .5s ease 0s; -webkit-transform: scale(1.0); -webkit-transform: all .5s ease 0s; display:block; } .in_link a:hover { opacity:1;filter:alpha(opacity=100); transform: scale(1.1); transition: all .5s ease 0s; -webkit-transform: scale(1.1); -webkit-transform: all .5s ease 0s;} .in_linkimg img{opacity:1;filter:alpha(opacity=100); transform: scale(1.05); transition: all .5s ease 0s; -webkit-transform: scale(1.0); -webkit-transform: all .5s ease 0s;} .in_linkimg img:hover{ opacity:1;filter:alpha(opacity=100); transform: scale(1.05); transition: all .5s ease 0s; -webkit-transform: scale(1.05); -webkit-transform: all .5s ease 0s;} .in_linkimgY img{opacity:1;filter:alpha(opacity=100); transform: scale(1.05); transition: all .5s ease 0s; -webkit-transform: scale(1.0); -webkit-transform: all .5s ease 0s; transform: rotateY(0); } .in_linkimgY img:hover{ opacity:1;filter:alpha(opacity=100); transform: scale(2.05); transition: all .5s ease 0s; -webkit-transform: scale(2.05); -webkit-transform: all .5s ease 0s; transform: rotateY(-180deg); } .round {-moz-border-radius: 50%; /* Gecko browsers */ -webkit-border-radius: 50%; /* Webkit browsers */ border-radius:50%; /* W3C syntax */} .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } .animated.infinite { -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; } .animated.hinge { -webkit-animation-duration: 2s; animation-duration: 2s; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); transform: scale(.9); } 100% { opacity: 1; -webkit-transform: scale(1); transform: scale(1); } } @keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); -ms-transform: scale(.3); transform: scale(.3); } 50% { opacity: 1; -webkit-transform: scale(1.05); -ms-transform: scale(1.05); transform: scale(1.05); } 70% { -webkit-transform: scale(.9); -ms-transform: scale(.9); transform: scale(.9); } 100% { opacity: 1; -webkit-transform: scale(1); -ms-transform: scale(1); transform: scale(1); } } .bounceIn { -webkit-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); -ms-transform: translateX(-2000px); transform: translateX(-2000px); } 60% { opacity: 1; -webkit-transform: translateX(30px); -ms-transform: translateX(30px); transform: translateX(30px); } 80% { -webkit-transform: translateX(-10px); -ms-transform: translateX(-10px); transform: translateX(-10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInLeft { -webkit-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); -ms-transform: translateX(2000px); transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); -ms-transform: translateX(-30px); transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); -ms-transform: translateX(10px); transform: translateX(10px); } 100% { -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(-2000px); -ms-transform: translateY(-2000px); transform: translateY(-2000px); } 60% { opacity: 1; -webkit-transform: translateY(30px); -ms-transform: translateY(30px); transform: translateY(30px); } 80% { -webkit-transform: translateY(-10px); -ms-transform: translateY(-10px); transform: translateY(-10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInUp { -webkit-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(2000px); -ms-transform: translateY(2000px); transform: translateY(2000px); } 60% { opacity: 1; -webkit-transform: translateY(-30px); -ms-transform: translateY(-30px); transform: translateY(-30px); } 80% { -webkit-transform: translateY(10px); -ms-transform: translateY(10px); transform: translateY(10px); } 100% { -webkit-transform: translateY(0); -ms-transform: translateY(0); transform: translateY(0); } } .bounceInDown { -webkit-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); -ms-transform: translateX(-20px); transform: translateX(-20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInLeft { -webkit-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes rotateRight { 0% { opacity: 0; -webkit-transform: rotate(350deg); transform: rotate(350deg); } 100% { opacity: 1; -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotateRight { 0% { opacity: 0; -webkit-transform: rotate(350deg); -ms-transform: rotate(350deg); transform: rotate(350deg); } 100% { opacity: 1; -webkit-transform: rotate(360deg); -ms-transform:rotate(360deg); transform:rotate(360deg); } } .rotateRight { -webkit-animation-name: rotateRight; animation-name: rotateRight; } @-webkit-keyframes rotateLeft { 0% { opacity: 0; -webkit-transform: rotate(-345deg); transform: rotate(-345deg); } 100% { opacity: 1; -webkit-transform: rotate(-360deg); transform: rotate(-360deg); } } @keyframes rotateLeft { 0% { opacity: 0; -webkit-transform: rotate(-345deg); -ms-transform: rotate(-345deg); transform: rotate(-345deg); } 100% { opacity: 1; -webkit-transform: rotate(-360deg); -ms-transform:rotate(-360deg); transform:rotate(-360deg); } } .rotateLeft { -webkit-animation-name: rotateLeft; animation-name: rotateLeft; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); -ms-transform: translateX(20px); transform: translateX(20px); } 100% { opacity: 1; -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } .fadeInRight { -webkit-animation-name: fadeInRight; animation-name: fadeInRight; } /*bounceIn*/ /*fadeIn*/ .clip-path a{ -webkit-clip-path: polygon(50% 0, 70% 0, 100% 0, 100% 100%, 70% 100%, 50% 100%, 30% 100%, 0 100%, 0 0, 30% 0); clip-path: polygon(50% 0, 70% 0, 100% 0, 100% 100%, 70% 100%, 50% 100%, 30% 100%, 0 100%, 0 0, 30% 0); transition: all .2s; } .clip-path a:hover { -webkit-clip-path: polygon(50% 20%, 70% 0, 100% 0, 100% 100%, 70% 100%, 50% 80%, 30% 100%, 0 100%, 0 0, 30% 0); clip-path: polygon(50% 20%, 70% 0, 100% 0, 100% 100%, 70% 100%, 50% 80%, 30% 100%, 0 100%, 0 0, 30% 0); transition: all .2s; } .scale_img { -webkit-animation-name: img_t; animation-name: img_t; } @-webkit-keyframes img_t { 0% { transform: scale(0.95); opacity: 0; } 50% { transform: scale(1.05); opacity: 0.5; } 100% { transform: scale(1.0); opacity: 1; } } .wifi1 { animation: wifi_t 3s; animation-iteration-count: infinite; } @-webkit-keyframes wifi_t { 0% { transform: scale(0.5); opacity: 0; } 50% { transform: scale(1.0); opacity: 1.0; } 100% { transform: scale(2.0; opacity: 0; } } .lighthouse { -webkit-transform-origin: 50% 90%; -moz-transform-origin: 50% 90%; transform-origin: 50% 90%; -webkit-animation: lighthouse 4s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); -moz-animation: lighthouse 4s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); animation: lighthouse 4s 0.1s infinite alternate cubic-bezier(0.455, 0.03, 0.515, 0.955); } @-webkit-keyframes lighthouse { 0% { -webkit-transform: translate3d(5%,0,0) rotateZ(2deg); -moz-transform: translate3d(5%,0,0) rotateZ(2deg); transform: translate3d(5%,0,0) rotateZ(2deg); } 100% { -webkit-transform: translate3d(-5%,0,0) rotateZ(-2deg); -moz-transform: translate3d(-5%,0,0) rotateZ(-2deg); transform: translate3d(-5%,0,0) rotateZ(-2deg); } } @-moz-keyframes lighthouse { 0% { -webkit-transform: translate3d(5%,0,0) rotateZ(2deg); -moz-transform: translate3d(5%,0,0) rotateZ(2deg); transform: translate3d(5%,0,0) rotateZ(2deg); } 100% { -webkit-transform: translate3d(-5%,0,0) rotateZ(-2deg); -moz-transform: translate3d(-5%,0,0) rotateZ(-2deg); transform: translate3d(-5%,0,0) rotateZ(-2deg); } } @-ms-keyframes lighthouse { 0% { -webkit-transform: translate3d(5%,0,0) rotateZ(2deg); -moz-transform: translate3d(5%,0,0) rotateZ(2deg); transform: translate3d(5%,0,0) rotateZ(2deg); } 100% { -webkit-transform: translate3d(-5%,0,0) rotateZ(-2deg); -moz-transform: translate3d(-5%,0,0) rotateZ(-2deg); transform: translate3d(-5%,0,0) rotateZ(-2deg); } } @keyframes lighthouse { 0% { -webkit-transform: translate3d(5%,0,0) rotateZ(2deg); -moz-transform: translate3d(5%,0,0) rotateZ(2deg); transform: translate3d(5%,0,0) rotateZ(2deg); } 100% { -webkit-transform: translate3d(-5%,0,0) rotateZ(-2deg); -moz-transform: translate3d(-5%,0,0) rotateZ(-2deg); transform: translate3d(-5%,0,0) rotateZ(-2deg); } }