.container { margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; } /*提示语*/ .windows_tips { background-color: rgba(255,255,255,.8); width: 100%; position: relative; z-index: 9999; text-align: center; padding: 9px 0; background: red; color: #fff; } /*404*/ .a404-bg{ background: url(../images/lx33.png) no-repeat; } .a404 h2{ color: #333; font-size: 40px; padding: 80px 0; } .a404-con{ display: flex; justify-content: space-between; padding-bottom: 38px; } .a404-con ul li{ padding: 7px 0; } .a404-con ul li a{ color: #333; font-size: 16px; } .a404-con ul li a:hover{ color: #024572; } .a404-con ul li img{ margin-right: 10px; margin-top: 2px; } .a404-con .search-center { width: 40%; } .a404-con .search-center .search-center-input { width: 100%; background: transparent; padding: 0px 0; } .a404-con .search-center .search-center-input .center-input-box { width: 100%; margin: 0 auto; } .a404-con .search-center .search-center-input .center-input-box .center-title { font-size: 40px; color: #333; text-align: left; text-transform: capitalize; padding-bottom: 36px; } .error-grid .index-prod-con{ width: 100%; } .error-box .a404 h2{ padding: 0; } .a404-bg.error-box{ background-size: cover; } .error-box .search-center{ padding: 0; background: transparent; } .error-box .search-center .search-center-input .center-input-box .search-input-box{ background: #f6f6f6; } .error-box .search-hot{ display: flex; } .error-box .search-hot .hot-title{ flex-shrink: 0; padding-right: 10px; } .hot-words-keys button { border: none; background: none; color: #024572; cursor: pointer; } .search-box .overflow-clamp-2{ font-size: 16px; margin: 20px 0; height: 50px; } @media (min-width:768px) { .container { width: 95%; padding-right: 0px; padding-left: 0px; } } @media (min-width:1023px) { .container { width: 95%; max-width: 1000px; } } @media (min-width:1440px) { .container { width: 95%; max-width: 1310px; } } .container-fluid { margin-right: auto; margin-left: auto; padding-right: 15px; padding-left: 15px; } .row { margin-right: -15px; margin-left: -15px; } .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12, .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12, .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12, .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { position: relative; padding-right: 15px; padding-left: 15px; min-height: 1px; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12 { float: left; padding-left: 6px; padding-right: 6px; } .col-xs-12 { width: 100%; } .col-xs-11 { width: 91.66666667%; } .col-xs-10 { width: 83.33333333%; } .col-xs-9 { width: 75%; } .col-xs-8 { width: 66.66666667%; } .col-xs-7 { width: 58.33333333%; } .col-xs-6 { width: 50%; } .col-xs-5 { width: 41.66666667%; } .col-xs-4 { width: 33.33333333%; } .col-xs-3 { width: 25%; } .col-xs-2 { width: 16.66666667%; } .col-xs-1 { width: 8.33333333%; } .col-xs-pull-12 { right: 100%; } .col-xs-pull-11 { right: 91.66666667%; } .col-xs-pull-10 { right: 83.33333333%; } .col-xs-pull-9 { right: 75%; } .col-xs-pull-8 { right: 66.66666667%; } .col-xs-pull-7 { right: 58.33333333%; } .col-xs-pull-6 { right: 50%; } .col-xs-pull-5 { right: 41.66666667%; } .col-xs-pull-4 { right: 33.33333333%; } .col-xs-pull-3 { right: 25%; } .col-xs-pull-2 { right: 16.66666667%; } .col-xs-pull-1 { right: 8.33333333%; } .col-xs-pull-0 { right: auto; } .col-xs-push-12 { left: 100%; } .col-xs-push-11 { left: 91.66666667%; } .col-xs-push-10 { left: 83.33333333%; } .col-xs-push-9 { left: 75%; } .col-xs-push-8 { left: 66.66666667%; } .col-xs-push-7 { left: 58.33333333%; } .col-xs-push-6 { left: 50%; } .col-xs-push-5 { left: 41.66666667%; } .col-xs-push-4 { left: 33.33333333%; } .col-xs-push-3 { left: 25%; } .col-xs-push-2 { left: 16.66666667%; } .col-xs-push-1 { left: 8.33333333%; } .col-xs-push-0 { left: auto; } .col-xs-offset-12 { margin-left: 100%; } .col-xs-offset-11 { margin-left: 91.66666667%; } .col-xs-offset-10 { margin-left: 83.33333333%; } .col-xs-offset-9 { margin-left: 75%; } .col-xs-offset-8 { margin-left: 66.66666667%; } .col-xs-offset-7 { margin-left: 58.33333333%; } .col-xs-offset-6 { margin-left: 50%; } .col-xs-offset-5 { margin-left: 41.66666667%; } .col-xs-offset-4 { margin-left: 33.33333333%; } .col-xs-offset-3 { margin-left: 25%; } .col-xs-offset-2 { margin-left: 16.66666667%; } .col-xs-offset-1 { margin-left: 8.33333333%; } .col-xs-offset-0 { margin-left: 0; } @media (min-width:768px) { .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 { float: left; padding-right: 15px; padding-left: 15px; } .col-sm-12 { width: 100%; } .col-sm-11 { width: 91.66666667%; } .col-sm-10 { width: 83.33333333%; } .col-sm-9 { width: 75%; } .col-sm-8 { width: 66.66666667%; } .col-sm-7 { width: 58.33333333%; } .col-sm-6 { width: 50%; } .col-sm-5 { width: 41.66666667%; } .col-sm-4 { width: 33.33333333%; } .col-sm-3 { width: 25%; } .col-sm-2 { width: 16.66666667%; } .col-sm-1 { width: 8.33333333%; } .col-sm-pull-12 { right: 100%; } .col-sm-pull-11 { right: 91.66666667%; } .col-sm-pull-10 { right: 83.33333333%; } .col-sm-pull-9 { right: 75%; } .col-sm-pull-8 { right: 66.66666667%; } .col-sm-pull-7 { right: 58.33333333%; } .col-sm-pull-6 { right: 50%; } .col-sm-pull-5 { right: 41.66666667%; } .col-sm-pull-4 { right: 33.33333333%; } .col-sm-pull-3 { right: 25%; } .col-sm-pull-2 { right: 16.66666667%; } .col-sm-pull-1 { right: 8.33333333%; } .col-sm-pull-0 { right: auto; } .col-sm-push-12 { left: 100%; } .col-sm-push-11 { left: 91.66666667%; } .col-sm-push-10 { left: 83.33333333%; } .col-sm-push-9 { left: 75%; } .col-sm-push-8 { left: 66.66666667%; } .col-sm-push-7 { left: 58.33333333%; } .col-sm-push-6 { left: 50%; } .col-sm-push-5 { left: 41.66666667%; } .col-sm-push-4 { left: 33.33333333%; } .col-sm-push-3 { left: 25%; } .col-sm-push-2 { left: 16.66666667%; } .col-sm-push-1 { left: 8.33333333%; } .col-sm-push-0 { left: auto; } .col-sm-offset-12 { margin-left: 100%; } .col-sm-offset-11 { margin-left: 91.66666667%; } .col-sm-offset-10 { margin-left: 83.33333333%; } .col-sm-offset-9 { margin-left: 75%; } .col-sm-offset-8 { margin-left: 66.66666667%; } .col-sm-offset-7 { margin-left: 58.33333333%; } .col-sm-offset-6 { margin-left: 50%; } .col-sm-offset-5 { margin-left: 41.66666667%; } .col-sm-offset-4 { margin-left: 33.33333333%; } .col-sm-offset-3 { margin-left: 25%; } .col-sm-offset-2 { margin-left: 16.66666667%; } .col-sm-offset-1 { margin-left: 8.33333333%; } .col-sm-offset-0 { margin-left: 0; } } @media (min-width:992px) { .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12 { float: left; padding-right: 15px; padding-left: 15px; } .col-md-12 { width: 100%; } .col-md-11 { width: 91.66666667%; } .col-md-10 { width: 83.33333333%; } .col-md-9 { width: 75%; } .col-md-8 { width: 66.66666667%; } .col-md-7 { width: 58.33333333%; } .col-md-6 { width: 50%; } .col-md-5 { width: 41.66666667%; } .col-md-4 { width: 33.33333333%; } .col-md-3 { width: 25%; } .col-md-2 { width: 16.66666667%; } .col-md-1 { width: 8.33333333%; } .col-md-pull-12 { right: 100%; } .col-md-pull-11 { right: 91.66666667%; } .col-md-pull-10 { right: 83.33333333%; } .col-md-pull-9 { right: 75%; } .col-md-pull-8 { right: 66.66666667%; } .col-md-pull-7 { right: 58.33333333%; } .col-md-pull-6 { right: 50%; } .col-md-pull-5 { right: 41.66666667%; } .col-md-pull-4 { right: 33.33333333%; } .col-md-pull-3 { right: 25%; } .col-md-pull-2 { right: 16.66666667%; } .col-md-pull-1 { right: 8.33333333%; } .col-md-pull-0 { right: auto; } .col-md-push-12 { left: 100%; } .col-md-push-11 { left: 91.66666667%; } .col-md-push-10 { left: 83.33333333%; } .col-md-push-9 { left: 75%; } .col-md-push-8 { left: 66.66666667%; } .col-md-push-7 { left: 58.33333333%; } .col-md-push-6 { left: 50%; } .col-md-push-5 { left: 41.66666667%; } .col-md-push-4 { left: 33.33333333%; } .col-md-push-3 { left: 25%; } .col-md-push-2 { left: 16.66666667%; } .col-md-push-1 { left: 8.33333333%; } .col-md-push-0 { left: auto; } .col-md-offset-12 { margin-left: 100%; } .col-md-offset-11 { margin-left: 91.66666667%; } .col-md-offset-10 { margin-left: 83.33333333%; } .col-md-offset-9 { margin-left: 75%; } .col-md-offset-8 { margin-left: 66.66666667%; } .col-md-offset-7 { margin-left: 58.33333333%; } .col-md-offset-6 { margin-left: 50%; } .col-md-offset-5 { margin-left: 41.66666667%; } .col-md-offset-4 { margin-left: 33.33333333%; } .col-md-offset-3 { margin-left: 25%; } .col-md-offset-2 { margin-left: 16.66666667%; } .col-md-offset-1 { margin-left: 8.33333333%; } .col-md-offset-0 { margin-left: 0; } } @media (min-width:1023px) { .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 { float: left; padding-right: 15px; padding-left: 15px; } .col-lg-12 { width: 100%; } .col-lg-11 { width: 91.66666667%; } .col-lg-10 { width: 83.33333333%; } .col-lg-9 { width: 75%; } .col-lg-8 { width: 66.66666667%; } .col-lg-7 { width: 58.33333333%; } .col-lg-6 { width: 50%; } .col-lg-5 { width: 41.66666667%; } .col-lg-4 { width: 33.33333333%; } .col-lg-3 { width: 25%; } .col-lg-2 { width: 16.66666667%; } .col-lg-1 { width: 8.33333333%; } .col-lg-pull-12 { right: 100%; } .col-lg-pull-11 { right: 91.66666667%; } .col-lg-pull-10 { right: 83.33333333%; } .col-lg-pull-9 { right: 75%; } .col-lg-pull-8 { right: 66.66666667%; } .col-lg-pull-7 { right: 58.33333333%; } .col-lg-pull-6 { right: 50%; } .col-lg-pull-5 { right: 41.66666667%; } .col-lg-pull-4 { right: 33.33333333%; } .col-lg-pull-3 { right: 25%; } .col-lg-pull-2 { right: 16.66666667%; } .col-lg-pull-1 { right: 8.33333333%; } .col-lg-pull-0 { right: auto; } .col-lg-push-12 { left: 100%; } .col-lg-push-11 { left: 91.66666667%; } .col-lg-push-10 { left: 83.33333333%; } .col-lg-push-9 { left: 75%; } .col-lg-push-8 { left: 66.66666667%; } .col-lg-push-7 { left: 58.33333333%; } .col-lg-push-6 { left: 50%; } .col-lg-push-5 { left: 41.66666667%; } .col-lg-push-4 { left: 33.33333333%; } .col-lg-push-3 { left: 25%; } .col-lg-push-2 { left: 16.66666667%; } .col-lg-push-1 { left: 8.33333333%; } .col-lg-push-0 { left: auto; } .col-lg-offset-12 { margin-left: 100%; } .col-lg-offset-11 { margin-left: 91.66666667%; } .col-lg-offset-10 { margin-left: 83.33333333%; } .col-lg-offset-9 { margin-left: 75%; } .col-lg-offset-8 { margin-left: 66.66666667%; } .col-lg-offset-7 { margin-left: 58.33333333%; } .col-lg-offset-6 { margin-left: 50%; } .col-lg-offset-5 { margin-left: 41.66666667%; } .col-lg-offset-4 { margin-left: 33.33333333%; } .col-lg-offset-3 { margin-left: 25%; } .col-lg-offset-2 { margin-left: 16.66666667%; } .col-lg-offset-1 { margin-left: 8.33333333%; } .col-lg-offset-0 { margin-left: 0; } } .container:before, .container:after, .container-fluid:before, .container-fluid:after, .row:before, .row:after { display: table; content: " "; } .container:after, .container-fluid:after, .row:after { clear: both; } .overflow-clamp-1 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; } .overflow-clamp-2 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; } .overflow-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; } .overflow-clamp-4 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; } .overflow-clamp-5 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; } .overflow-clamp-7 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 7; overflow: hidden; } .box-padding { padding-left: 0px; padding-right: 0px; } .box-margin-30 { margin-left: -30px; margin-right: -30px; } .box-margin-0 { margin-left: 0px; margin-right: 0px; } * { margin: 0px; padding: 0px; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); /* 取消链接高亮 */ -o-tap-highlight-color: rgba(0, 0, 0, 0); /* 取消链接高亮 */ -ms-tap-highlight-color: rgba(0, 0, 0, 0); /* 取消链接高亮 */ -moz-tap-highlight-color: rgba(0, 0, 0, 0); /* 取消链接高亮 */ tap-highlight-color: rgba(0, 0, 0, 0); /* 取消链接高亮 */ font-style: normal; list-style: none; text-decoration: none; font-weight: 400; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; } p{ font-family: 'Poppins', sans-serif; font-weight: 400; } img { border: none; max-width: 100%; height: auto; vertical-align: top } a { color: inherit; text-decoration: none; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; word-break: break-word; font-weight: inherit; } body { position: relative; min-height: 100%; font-size: 14px; color: #738088; background-color: #FFFFFF; font-family: 'Poppins', sans-serif; min-width: 320px; overflow-x: hidden; -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; } .donghua, ::after, ::before { -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; } .alignleft { float: left; margin: 6px 28px 28px 0; } .alignright { float: right; margin: 6px 0 28px 28px; } .aligncenter { clear: both; display: block; margin: 0 auto 28px; } ._clear { clear: both } /*鼠标移上图片放大（图片外面需要一个盒子，盒子类名为imgda即可）*/ .imgda { overflow: hidden; } .imgda img { -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; } .imgda:hover img { transform: scale(1.1); } /*鼠标移上图片上移效果，哪里需要放哪里*/ .imgUP { -moz-transition: all .5s; -ms-transition: all .5s; -o-transition: all .5s; -webkit-transition: all .5s; transition: all .5s; } .imgUP:hover { -webkit-transform: translateY(-2%); -moz-transform: translateY(-2%); -ms-transform: translateY(-2%); -o-transform: translateY(-2%); transform: translateY(-2%); } .h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 { font-weight: 500; color: inherit; font-family: 'Poppins', sans-serif; } .box { width: 95%; margin: 0 auto; max-width: 1280px; } .center_box{ width: 100%; margin: 0 auto; max-width: 1920px; } @media all and (max-width: 1440px) { .box{ max-width: 1000px; } } .box1200 { width: 95%; margin: 0 auto; max-width: 1200px; } .box1810 { width: 95%; margin: 0 auto; max-width: 1810px; } strong{ font-weight: bold; } /*表格样式*/ .table{ overflow: auto; width: 100%; } .table table tr:nth-child(2n-1){ background: #F7F7F7; } .table table,.design_tt table{ width: 100%; border: 1px solid #EEEEEE; border-collapse: collapse; } .design_tt table td{ border: 1px solid #EEEEEE; } .table table tr td ,.design_tt table tr td { text-align: left; padding: 12px 10px; font-size: 14px; color: #738088; /* border-right: 1px solid #7F8182; */ /* border-bottom: 4px solid #313436; */ } .table table tr:first-child td{ /* border-bottom: 1px solid #16191c; */ } .table table tr:first-child, .design_tt table tr:first-child { background: #F7F7F7; } .table table tr:first-child td, .design_tt table tr:first-child td { color: #738088; /* font-weight: bold; */ font-size: 16px; /* border-top: 1px solid #16191c; */ /* border-left: 1px solid #16191c; */ /* border-right: 1px solid #16191c; */ } .table table tr td:last-child, .design_tt table tr td:last-child{ border-right: none; } article{ font-size: 14px; line-height: 22px; color: #738088; } article p{ font-size: 14px; line-height: 22px; color: #738088; } iframe{ display: block; } .padding-20{ padding: 20px 0; } .padding-30{ padding: 30px 0; } .padding-40{ padding: 40px 0; } .padding-50{ padding: 50px 0; } .padding-60{ padding: 60px 0; } .padding-70{ padding: 70px 0; } .padding-80{ padding: 80px 0; } .padding-90{ padding: 90px 0; } .padding-100{ padding: 100px 0; } @media all and (max-width: 1440px) { .padding-100,.padding-90,.padding-80,.padding-70,.padding-60,.padding-50{ padding: 30px 0; } } /*轮播图*/ .banner-picture { width: 100%; } .swiper-container { width: 100%; height: 100%; margin-left: auto; margin-right: auto; } .swiper-slide img { /*width: 100%;*/ display: block; } .swiper-slide { text-align: center; font-size: 14px; width: 100%; height: 100%; background: #FFFFFF; display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center; } #banner .swiper-pagination-bullet { width: 12px!important; height: 12px!important; border-radius: 50%!important; background: #243733 !important; border: 2px solid #8C9A9A; margin: 0 0!important; margin-left: 0px!important; opacity: 1!important; position: relative!important; display: block; margin-top: 32px!important; } #banner .swiper-pagination{ left: auto; right: 3%; width: auto; bottom: auto; top: 50%; transform: translate(0%,-50%); } #banner .swiper-pagination-banner{ position: absolute; width: auto!important; bottom: 10px; left: 50%!important; z-index: 2; transform: translate(-50%)!important; } #banner .swiper-pagination-bullet:first-child { margin-top: 0px!important; } #banner .swiper-pagination-bullet-active { width: 12px!important; height: 12px!important; opacity: 1!important; border-radius: 50%!important; position: relative!important; background: #7CDFB1 !important; border: 2px solid #7CDFB1; } #banner .swiper-pagination-bullet-active::before{ content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); width: 16px; height: 16px; border-radius: 50%; border: 2px solid #16C55E; } .banner-gongsi { width: 100%; background: #165bc4; height: 80px; border-top: 1px solid #fff; position: relative; } .banner-gongsi h2 { color: rgb(232, 230, 230); padding-top: 25px; padding-bottom: 15px; font-size: 16px; } #banner .swiper-slide { position: relative; background: transparent; } #banner{ z-index: 2; } #banner .swiper-button-next, #banner .swiper-button-prev { width: 23px; height: 38px; } #banner .swiper-button-next { right: 5%; transform: rotateY(180deg); } #banner .swiper-button-prev { left: 5%; } #banner .swiper-slide .banner-text { position: absolute; z-index: 9; top: 50%; left: 30%; transform: translate(-2000px, -50%); width: 600px; opacity: 0; transition: all 1s; } #banner .swiper-slide .banner-text h1 { font-size: 80px; color: #fff; margin-bottom: 20px; text-align: left; padding-left: 25px; padding-right: 27px; } #banner .swiper-slide .banner-text h2 { font-size: 88px; color: #fff; text-align: left; line-height: 80px; margin-bottom: 10px; } #banner .swiper-slide .banner-text p { font-size: 22px; line-height: 26px; color: #fff; margin-bottom: 20px; text-align: left; font-weight: 600; } #banner .swiper-slide .banner-text .banner-anniu{ display: flex; align-items: center; justify-content: center; width: 192px; height: 54px; background: rgba(255,255,255,.74); color: #000000; font-size: 20px; } #banner .swiper-slide-active .banner-text{ transform: translate(-50%, -50%); opacity: 1; } /* 标题 */ .title { } .title h2 { font-size: 70px; color: #000; line-height: 80px; text-align: center; position: relative; text-transform: uppercase; padding: 120px 0 60px; } .title h1{ font-size: 40px; color: #000; text-align: center; position: relative; font-weight: bold; } .title span{ display: inline-block; margin-bottom: 15px; margin-top: 4px; } .title p{ color: #999999; font-size: 18px; line-height: 24px; margin: 0 auto; } .title2{ text-align: center; } .title2 h1 { font-size: 36px; color: #45484e; text-align: center; padding-top: 65px; padding-bottom: 10px; } .title2 h2 { font-size: 36px; color: #333; text-align: center; padding: 0px 0 40px; } .title2 span{ display: inline-block; margin-bottom: 15px; margin-top: 4px; width: 70px; height: 2px; background: #f0c71c; } .title2 p{ color: #70747b; font-size: 14px; line-height: 22px; max-width: 1044px; margin: 0 auto 40px; } .prod-banner { position: relative; } .prod-banner>img { display: block; margin: 0 auto; } /* 面包屑 */ .mianbao-bg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); text-align: center; } .mianbao-bg h2 { color: #ffffff; font-size: 40px; font-weight: bold; margin-bottom: 10px; } .mianbao { z-index: 2; /* position: absolute; top: 45px; */ font-size: 12px; color: #AFAFAF; display: flex; align-items: center; flex-wrap: wrap; padding: 40px 0; } .mianbao span{ padding: 0 0px; color: #AFAFAF; display: flex; align-items: center; justify-content: center; } .mianbao span img{ margin: 0 18px; } .mianbao>img { margin-right: 10px; } .mianbao a:hover { color: #13204A; } /* 点击回到顶部 */ .nav-side-right{ position: fixed; right: 36px; bottom: 45%; z-index: 9999; width: 50px; } .nav-side-right .nav_hover_width{ width: 50px; height: 50px; border-radius: 50%; } .nav-side-right .nav_hover_width div{ display: flex; align-items: center; background: #13204A; overflow: hidden; border-radius: 50%; } .nav-side-right .nav_hover_width div p{ white-space: nowrap; font-size: 14px; font-weight: 500; letter-spacing:1px; color: #FFFFFF; } .nav-side-right .nav_hover_width:hover div{ margin-left: -256px; border-radius: 50px; } .nav-side-right .nav_hover_width:nth-child(2):hover div{ border-radius: 50px; } /* .nav-side-right .nav_hover_width:nth-child(3) div{ border-radius: 0; } */ .nav-side-right .nav_hover_width:nth-child(3):hover div{ margin-left: -174px; } .nav-side-right .nav_hover_width:nth-child(3) div{ padding: 4px; box-sizing: border-box; } /* .nav-side-right .nav_hover_width:nth-child(3) div{ background: transparent; } .nav-side-right .nav_hover_width:nth-child(3):hover div{ background: #13204A; } */ .nav-side-right .nav_hover_width:nth-child(3) div p{ margin-left: 20px; } .nav-side-right li{ margin-bottom: 17px; cursor: pointer; } .nav-side-right li:last-child{ margin-bottom: 0px; } #gotop { width: 50px; height: 50px; border-radius: 50%; /* background: #fff; */ /* color: #fff; */ text-align: center; line-height: 50px; cursor: pointer; font-size: 18px; display: flex; align-items: center; justify-content: center; } .gotop{ width: 50px; height: 50px; /* background: #fff; */ border-radius: 50%; display: flex; align-items: center; justify-content: center; } /* 翻页 */ .fanye-con { width: 100%; } .fanye { text-align: left; } .fanye .wp-pagenavi { display: flex; justify-content: center; font-size: 18px; padding: 30px 0 80px; } .fanye a { display: inline-block; text-align: center; position: relative; color: #13204A; /*background: #fff;*/ margin-left: 20px; /*padding: 10px 20px;*/ width: 42px; height: 42px; line-height: 42px; /* font-weight: bold; */ font-size: 14px; border:1px solid rgba(201,205,208,1); border-radius:2px; } .fanye .current { display: inline-block; text-align: center; position: relative; margin-left: 20px; color: #13204A; background: transparent; /*padding: 10px 20px;*/ width: 42px; height: 42px; line-height: 42px; font-size: 14px; /* font-weight: bold; */ border:1px solid rgba(19,32,74,1); } .fanye .previouspostslink { display: inline-block; margin-left: 0px; /*background: #f9f9f9;*/ color: #13204A; width: 42px; height: 42px; padding: 0 10px; } .fanye .nextpostslink { display: inline-block; margin-bottom: 0px; /*background: #f9f9f9;*/ color: #13204A; width: 42px; height: 42px; padding: 0 10px; } /* 图片放大 */ img[data-action="zoom"] { cursor: pointer; cursor: -webkit-zoom-in; cursor: -moz-zoom-in; } .zoom-img, .zoom-img-wrap { position: relative; z-index: 666; -webkit-transition: all 300ms; -o-transition: all 300ms; transition: all 300ms; } img.zoom-img { cursor: pointer; cursor: -webkit-zoom-out; cursor: -moz-zoom-out; } .zoom-overlay { z-index: 420; background: #fff; position: fixed; top: 0; left: 0; right: 0; bottom: 0; pointer-events: none; filter: "alpha(opacity=0)"; opacity: 0; -webkit-transition: opacity 300ms; -o-transition: opacity 300ms; transition: opacity 300ms; } .zoom-overlay-open .zoom-overlay { filter: "alpha(opacity=100)"; opacity: 1; } .zoom-overlay-open, .zoom-overlay-transitioning { cursor: default; } /* 详情页轮播图 */ .pc-slide { display: flex; width: 78%; /*width: 484px;*/ /*margin: 0 auto;*/ } .view{ /*border: 1px solid #d2d2d2;*/ position: relative; width: 91%; /*margin-bottom: 15px;*/ /*margin-left: -206px;*/ z-index: 1; } .view .swiper-container { width: 590px; /*height: 630px;*/ /*margin-left: -160px;*/ position: unset; } .view .swiper-container .swiper-slide{ border: 1px solid #eeeeee; } .view .arrow-left { background: url(../images/single-anniu1.png) no-repeat left top; position: absolute; left: 0%; top: 50%; margin-top: -25px; width: 40px; height: 40px; z-index: 10; transform: rotate(180deg) !important; } .view .arrow-left:hover{ background: url(../images/single-anniu2.png) no-repeat left top; } .view .arrow-right { background: url(../images/single-anniu1.png) no-repeat left bottom; position: absolute; right: 0%; top: 50%; margin-top: -25px; width: 40px; height: 40px; z-index: 10; } .view .arrow-right:hover{ background: url(../images/single-anniu2.png) no-repeat left bottom; } .preview { width: 530px; margin-top: 27%; position: relative; height: 120px; transform: rotate(90deg) !important; margin-left: -178px; z-index: 2; /*overflow: hidden;*/ } .preview .swiper-container { width: 550px; height: 120px; } .preview .swiper-slide { width: 134px; height: 120px; cursor:pointer; /*margin-bottom: 10px;*/ background: transparent; transform: rotate(-90deg) !important; /*margin-right: -37px !important;*/ } .view .swiper-slide{ background: transparent; } /*.preview .slide6 { width: 109px; }*/ .view .arrow-left { background: url(../images/single-anniu1.png) no-repeat left top; position: absolute; left: 4%; top: 50%; margin-top: -25px; width: 40px; height: 40px; z-index: 10; transform: rotate(0deg) !important; transition: none; } .view .arrow-left:hover{ background: url(../images/single-anniu2.png) no-repeat left top; transform: rotate(180deg) !important; } .view .arrow-right { background: url(../images/single-anniu1.png) no-repeat left bottom; position: absolute; right: 4%; top: 50%; margin-top: -25px; width: 40px; height: 40px; z-index: 10; transform: rotate(180deg) !important; transition: none; } .view .arrow-right:hover{ background: url(../images/single-anniu2.png) no-repeat left bottom; transform: rotate(0deg) !important; } .preview .swiper-wrapper{ /*padding-top: 8px;*/ } .preview img { width: 100%; /*padding: 1px;*/ /*transform: rotate(-90deg) !important;*/ border: 1px solid #eeeeee; } .preview .active-nav img { padding: 0; } .anniu:hover .img1{ display: none; } .anniu:hover .img2{ display: block; } .anniu .img2{ display: none; } @media all and (max-width: 1440px){ .title2 h2{ font-size: 48px; padding: 60px 0 25px; } .title h2{ font-size: 48px; padding: 60px 0 25px; } .title{ padding-top: 0px; padding-bottom: 0px; } .index-about-bg .title{ padding-top: 70px; } .mianbao{ padding: 20px 0; } #banner .swiper-slide .banner-text h2{ font-size: 48px; line-height: 50px; } } @media all and (max-width: 1023px){ .title{ padding-top: 30px; padding-bottom: 15px; } .title2 h2{ font-size: 24px; padding-bottom: 20px; } .title2 span{ margin: 0; } .title h2 { padding-top: 50px; font-size: 38px; padding-bottom: 20px; line-height: 50px; } .title h1 { padding-top: 28px; font-size: 22px; padding-bottom: 8px; } .title { padding-bottom: 0px; padding-top: 0px; } .prod-banner>img{ display: none; } .mianbao{ display: none; } .nav-box-left, .header, .header-nav-top, #banner .swiper-pagination { display: none; } .header-nav { margin-top: 30px; } .lx_nav_box { display: none !important; } .title2{ padding-top: 30px; } .prod-single-box{ flex-wrap: wrap; } #banner .swiper-slide .banner-text{ left: 50%; } } @media all and (max-width: 768px){ header{ display: none; } #banner .swiper-button-prev, #banner .swiper-button-next { width: 0px; height: 0px; } .fanye .wp-pagenavi{ padding: 10px 0 30px; } .fanye a{ font-size: 14px; padding: 0px 10px; } .title h2 { padding-top: 40px; padding-bottom: 20px; font-size: 28px; line-height: 30px; } .title h1 { padding-top: 25px; font-size: 18px; } .prod-banner { /*display: none;*/ } #banner .swiper-slide .banner-text h1 { font-size: 18px; margin-bottom: 0px; } #banner .swiper-slide .banner-text h2 { font-size: 16px; margin-bottom: 5px; } .title2 h2{ font-size: 20px; } #gotop{ width: 32px; height: 32px; } .gotop{ width: 32px; height: 32px; } #gotop::before{ width: 31px; height: 31px; left: -3px; top: -3px; } /* .gotop img{ width: 15px; } */ .table table tr td{ font-size: 14px; } .table table tr:first-child td{ font-size: 14px; } #banner .swiper-slide .banner-text{ display: none; } .nav-side-right .nav_hover_width{ width: 32px; height: 32px; } .nav-side-right{ width: 32px; right:10px; } .nav-side-right .nav_hover_width div{ height: 32px; } .nav-side-right .nav_hover_width div img{ width: 32px; } .nav-side-right .nav_hover_width div p{ font-size: 12px; } .nav-side-right .nav_hover_width:nth-child(2):hover div{ margin-left: -150px; } .nav-side-right .nav_hover_width:hover div{ margin-left: -222px; } .nav-side-right li{ margin-bottom: 8px; } } /*404*/ .a404top{ width: 100%; height: 90px; } .a404top-bg{ background: #f2f3f4; } .a404-bg{ background: #F1F1F1; } .a404{ display: flex; padding: 120px 0; } .a404 .left{ width: 50%; } .a404 .right{ width: 50%; padding-left: 2%; } .a404 h2 p{ color: #231713; font-size: 69px; line-height: 70px; margin-top: 30px; font-weight: bold; margin-bottom: 40px; } .a404 .right>p{ color: #828689; font-size: 20px; line-height: 28px; } .a404 a{ width: 200px; height: 50px; display: flex; justify-content: center; align-items: center; color: #16191C; font-size: 16px; border: 1px solid #16191C; margin-left: 15px; font-weight: 600; } .a404 a:hover{ background: #16191C; color: #fff; } .a404 .right div{ display: flex; padding-top: 40px; } .a404 .right div a:first-child{ margin-left: 0px; } @media (max-width:1023px) { .a404{ padding: 30px 0; flex-wrap: wrap; } .a404 h2 p{ font-size: 38px; line-height: 38px; margin-bottom: 20px; } .a404 .right>p{ font-size: 16px; } .a404 .left{ width: 100%; } .a404 .right{ width: 100%; padding-left: 0px; } } @media (max-width:768px) { .a404top{ display: none; } .a404{ padding: 30px 0; } .a404 .right div{ padding-top: 20px; flex-wrap: wrap; } .a404 a{ width: 100%; margin: 0px auto 10px !important; } } /*search*/ .search-center { width: 100%; background-color: #f6f6f6; padding: 120px 0 20px; } .search-center .search-center-input .center-input-box .center-title { font-size: 48px; color: #333; font-weight: bold; text-align: center; text-transform: capitalize; padding-bottom: 36px; margin-top: 50px; } .search-center .search-center-input .center-input-box { width: 100%; max-width: 600px; margin: 0 auto 40px; } .search-center .search-center-input .center-input-box .search-input-box { border: 1px solid #e0e0e0; padding-left: 3%; } .search-input-box form{ display: flex; justify-content: space-between; } .search-center .search-center-input .center-input-box .search-input-box input { display: inline-block; width: 88%; font-size: 16px; color: #333; outline: none; border: none; background: #f6f6f6; } .search-center .search-center-input .center-input-box .search-input-box button { border: none; background: none; cursor: pointer; width: 59px; height: 56px; background: #13204A; position: relative; } .search-mianbao{ width: 95%; margin: 0 auto; max-width: 1230px; color: #666666; font-size: 16px; } .center-con-title { display: flex; display: -webkit-flex; flex-direction: row; align-items: center; padding: 85px 0 40px 0; } .center-con-title span.title-main { font-size: 30px; color: #333; font-weight: 600; } .center-con-title span.title-num { font-size: 30px; color: #E0000F; padding: 5px 10px; margin-left: 20px; font-weight: 600; } .search_con .news-con-center{ width: 35%; } .search_con .news-con-right{ width: 65%; } .search_con .news-con-right h2 span{ color: #6d004f; } .sousuo_bottom .right{ width: 100%; margin-left: 0px; border: none; position: relative; } .sousuo_bottom .right:hover{ padding-bottom: 30px; padding-left: 30px; padding-right: 30px; padding-top: 30px; } .sousuo_bottom .right::before{ content: ""; position: absolute; top: 0px; left: 0px; width: 0px; height: 2px; background: #E0000F; } .sousuo_bottom .right::after{ content: ""; position: absolute; bottom: 0px; right: 0px; width: 0px; height: 2px; background: #E0000F; } .sousuo_bottom .news-center-con .right h2 { color: #333333; font-size: 24px; line-height: 30px; margin-bottom: 10px; } .sousuo_bottom .news-center-con .right p { color: #666666; font-size: 16px; line-height: 26px; margin-bottom: 15px; } .sousuo_bottom .news-center-con{ position: relative !important; margin-bottom: 30px; } .sousuo_bottom .news-center-con::before{ content: ""; position: absolute; bottom: 0px; left: 0px; width: 2px; height: 0px; background: #E0000F; } .sousuo_bottom .news-center-con::after{ content: ""; position: absolute; top: 0px; right: 0px; width: 2px; height: 0px; background: #E0000F; } .sousuo_bottom .right:hover::before{ width: 100%; } .sousuo_bottom .right:hover::after{ width: 100%; } .sousuo_bottom .news-center-con:hover::before{ height: 100%; } .sousuo_bottom .news-center-con:hover::after{ height: 100%; } .sousuo_bottom .news-center-con .anniu{ display: block; width: 100px; text-align: center; padding: 6px 10px; border-radius: 45px; background: #eee; color: #000; } .sousuo_bottom .news-center-con .anniu:hover{ background: #E0000F; color: #FFFFFF; } @media (max-width: 1199px){ .search-center .search-center-input .center-input-box { width: 50%; } } @media (max-width: 1023px){ .search-center .search-center-input { padding: 45px 0; } .search-center .search-center-input .center-input-box { width: 75%; } .search-center{ padding: 30px 0 20px; } .sousuo_bottom .news-center-con .right h2{ font-size: 18px; } .sousuo_bottom .news-center-con .right p{ font-size: 14px; } } @media (max-width: 750px){ .search-center .search-center-input .center-input-box { width: 100%; } .search-title h2{ padding-left: 15px; font-size: 22px; } .search-box{ padding: 30px 0; } .center-con-title{ padding: 30px 0 30px 0px; } .center-con-title span.title-main,.center-con-title span.title-num{ font-size: 18px; } .search-center .search-center-input .center-input-box .center-title{ font-size: 20px; font-weight: bold; margin-top: 0px; padding-bottom: 10px; } .search-center .search-center-input{ padding: 0px 0; } } /* 404 动画css */ svg#robot { display: block; position: relative; margin: 0 auto 0 auto; padding: 10px; -webkit-transform-origin: bottom; -ms-transform-origin: bottom; transform-origin: bottom; -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px); -ms-transform: rotate(0deg) translate3d(0px, 0px, 0px); transform: rotate(0deg) translate3d(0px, 0px, 0px); -webkit-animation: move 2s ease infinite; animation: move 2s ease infinite; } @-webkit-keyframes move { 0%, 100% { -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px); transform: rotate(0deg) translate3d(0px, 0px, 0px); } 25% { -webkit-transform: rotate(5deg) translate3d(5px, 5px, 0px); transform: rotate(5deg) translate3d(5px, 5px, 0px); } 75% { -webkit-transform: rotate(-6deg) translate3d(-5px, 5px, 0px); transform: rotate(-6deg) translate3d(-5px, 5px, 0px); } } @keyframes move { 0%, 100% { -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px); transform: rotate(0deg) translate3d(0px, 0px, 0px); } 25% { -webkit-transform: rotate(5deg) translate3d(5px, 5px, 0px); transform: rotate(5deg) translate3d(5px, 5px, 0px); } 75% { -webkit-transform: rotate(-6deg) translate3d(-5px, 5px, 0px); transform: rotate(-6deg) translate3d(-5px, 5px, 0px); } } g#head { -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px); -ms-transform: rotate(0deg) translate3d(0px, 0px, 0px); transform: rotate(0deg) translate3d(0px, 0px, 0px); -webkit-transform-origin: bottom center; -ms-transform-origin: bottom center; transform-origin: bottom center; -webkit-animation: head 1s 1s ease infinite; animation: head 1s 1s ease infinite; } g#head #leftAntenna > ellipse, g#head #rightAntenna > ellipse { -webkit-animation: color 350ms linear infinite; animation: color 350ms linear infinite; } @-webkit-keyframes head { 0%, 46%, 50%, 55%, 100% { -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px); transform: rotate(0deg) translate3d(0px, 0px, 0px); } 49% { -webkit-transform: rotate(20deg) translate3d(0px, 0px, 0px); transform: rotate(20deg) translate3d(0px, 0px, 0px); } 51% { -webkit-transform: rotate(-10deg) translate3d(0px, 0px, 0px); transform: rotate(-10deg) translate3d(0px, 0px, 0px); } } @keyframes head { 0%, 46%, 50%, 55%, 100% { -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px); transform: rotate(0deg) translate3d(0px, 0px, 0px); } 49% { -webkit-transform: rotate(20deg) translate3d(0px, 0px, 0px); transform: rotate(20deg) translate3d(0px, 0px, 0px); } 51% { -webkit-transform: rotate(-10deg) translate3d(0px, 0px, 0px); transform: rotate(-10deg) translate3d(0px, 0px, 0px); } } @-webkit-keyframes color { 0%, 100% { fill: #ccc; } 50% { fill: red; } } @keyframes color { 0%, 100% { fill: #ccc; } 50% { fill: red; } } #upperTorso { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: center; -ms-transform-origin: center; transform-origin: center; -webkit-animation: torso 600ms 1s ease infinite; animation: torso 600ms 1s ease infinite; } #upperTorso #leftArm { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 80% 5%; -ms-transform-origin: 80% 5%; transform-origin: 80% 5%; -webkit-animation: left 1s ease infinite; animation: left 1s ease infinite; } #upperTorso #leftArm .forearm { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 68% 10%; -ms-transform-origin: 68% 10%; transform-origin: 68% 10%; -webkit-animation: forearm 800ms 1s ease infinite; animation: forearm 800ms 1s ease infinite; } #upperTorso #rightArm { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 18% 0%; -ms-transform-origin: 18% 0%; transform-origin: 18% 0%; -webkit-animation: right 1s ease infinite; animation: right 1s ease infinite; } #upperTorso #rightArm .forearm { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 68% 10%; -ms-transform-origin: 68% 10%; transform-origin: 68% 10%; -webkit-animation: forearm 700ms 1s ease infinite; animation: forearm 700ms 1s ease infinite; } @-webkit-keyframes torso { 40%, 50%, 60% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 45% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 55% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } } @keyframes torso { 40%, 50%, 60% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 45% { -webkit-transform: rotate(5deg); transform: rotate(5deg); } 55% { -webkit-transform: rotate(-5deg); transform: rotate(-5deg); } } @-webkit-keyframes left { 60% { -webkit-transform: rotate(100deg); transform: rotate(100deg); } } @keyframes left { 60% { -webkit-transform: rotate(100deg); transform: rotate(100deg); } } @-webkit-keyframes right { 50% { -webkit-transform: rotate(-70deg); transform: rotate(-70deg); } } @keyframes right { 50% { -webkit-transform: rotate(-70deg); transform: rotate(-70deg); } } @-webkit-keyframes forearm { 0%, 30%, 50%, 70%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 40% { -webkit-transform: rotate(25deg); transform: rotate(25deg); } 60% { -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } } @keyframes forearm { 0%, 30%, 50%, 70%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 40% { -webkit-transform: rotate(25deg); transform: rotate(25deg); } 60% { -webkit-transform: rotate(-25deg); transform: rotate(-25deg); } } #lowerTrunk { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 60% 5%; -ms-transform-origin: 60% 5%; transform-origin: 60% 5%; -webkit-animation: lowerTrunk 1s ease infinite; animation: lowerTrunk 1s ease infinite; } @-webkit-keyframes lowerTrunk { 0%, 100% { -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px); transform: rotate(0deg) translate3d(0px, 0px, 0px); } 25% { -webkit-transform: rotate(2deg) translate3d(2px, 0px, 0px); transform: rotate(2deg) translate3d(2px, 0px, 0px); } 75% { -webkit-transform: rotate(-2deg) translate3d(-2px, 0px, 0px); transform: rotate(-2deg) translate3d(-2px, 0px, 0px); } } @keyframes lowerTrunk { 0%, 100% { -webkit-transform: rotate(0deg) translate3d(0px, 0px, 0px); transform: rotate(0deg) translate3d(0px, 0px, 0px); } 25% { -webkit-transform: rotate(2deg) translate3d(2px, 0px, 0px); transform: rotate(2deg) translate3d(2px, 0px, 0px); } 75% { -webkit-transform: rotate(-2deg) translate3d(-2px, 0px, 0px); transform: rotate(-2deg) translate3d(-2px, 0px, 0px); } } #leftFoot { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 60% 5%; -ms-transform-origin: 60% 5%; transform-origin: 60% 5%; -webkit-animation: leftFoot 2s ease infinite; animation: leftFoot 2s ease infinite; } #leftFoot > .lowerLeg { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 68% 10%; -ms-transform-origin: 68% 10%; transform-origin: 68% 10%; -webkit-animation: lowerLeg 2s ease infinite; animation: lowerLeg 2s ease infinite; } @-webkit-keyframes leftFoot { 0%, 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-transform: rotate(70deg); transform: rotate(70deg); } } @keyframes leftFoot { 0%, 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 25% { -webkit-transform: rotate(70deg); transform: rotate(70deg); } } @-webkit-keyframes lowerLeg { 0%, 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 8%, 14% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 11%, 18% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } } @keyframes lowerLeg { 0%, 50% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 8%, 14% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } 11%, 18% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } } #rightFoot { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 50% 5%; -ms-transform-origin: 50% 5%; transform-origin: 50% 5%; -webkit-animation: rightFoot 2s ease infinite; animation: rightFoot 2s ease infinite; } #rightFoot > .lowerLeg { -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); -webkit-transform-origin: 68% 10%; -ms-transform-origin: 68% 10%; transform-origin: 68% 10%; -webkit-animation: lowerLegIz 2s ease infinite; animation: lowerLegIz 2s ease infinite; } @-webkit-keyframes rightFoot { 75% { -webkit-transform: rotate(-60deg); transform: rotate(-60deg); } 50%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @keyframes rightFoot { 75% { -webkit-transform: rotate(-60deg); transform: rotate(-60deg); } 50%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } @-webkit-keyframes lowerLegIz { 50%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 60%, 70% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 65%, 85% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } } @keyframes lowerLegIz { 50%, 100% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 60%, 70% { -webkit-transform: rotate(15deg); transform: rotate(15deg); } 65%, 85% { -webkit-transform: rotate(-15deg); transform: rotate(-15deg); } } .me404-box{ margin: 0 auto; } .me404-box a{ display: flex; justify-content: center; align-items: center; width: 120px; height: 44px; color: #FFFFFF; font-size: 14px; background: #2020FC; border-radius: 2px; margin: 20px auto 60px; } .me404 { width: 100%; position: relative; margin-left: 100px; } .st0 { fill-rule: evenodd; clip-rule: evenodd; fill: #E8EBED; } .st1 { fill: #FFFFFF; stroke: #89949B; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } .st2 { fill-rule: evenodd; clip-rule: evenodd; fill: #DBDFE1; } .st3 { fill: #FFFFFF; } .st4 { fill-rule: evenodd; clip-rule: evenodd; fill: #E8EBED; stroke: #89949B; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } .st5 { fill-rule: evenodd; clip-rule: evenodd; fill: #FFFFFF; stroke: #89949B; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } .st6 { fill-rule: evenodd; clip-rule: evenodd; fill: none; stroke: #89949B; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } .st7 { fill-rule: evenodd; clip-rule: evenodd; fill: none; stroke: #89949B; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } .st8 { fill-rule: evenodd; clip-rule: evenodd; fill: #FFFFFF; stroke: #89949B; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } .st9 { fill: #89949B; } .st10 { fill-rule: evenodd; clip-rule: evenodd; fill: #89949B; } .st11 { fill-rule: evenodd; clip-rule: evenodd; fill: none; stroke: #89949B; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } .st12 { fill-rule: evenodd; clip-rule: evenodd; fill: #FFFFFF; } .st13 { fill-rule: evenodd; clip-rule: evenodd; fill: #FFFFFF; stroke: #8894A0; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } .st14 { fill-rule: evenodd; clip-rule: evenodd; fill: none; stroke: #89949B; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } .st15 { fill: none; stroke: #89949B; stroke-linecap: round; stroke-linejoin: round; stroke-miterlimit: 10; } #cloud { -webkit-animation: cloud 9s infinite ease-in-out; -moz-animation: cloud 9s infinite ease-in-out; -o-animation: cloud 9s infinite ease-in-out; animation: cloud 9s infinite ease-in-out; } lesshat-selector { -lh-property: 0; } @-webkit-keyframes cloud{ 0% { opacity: 0.3; left: 160px; -webkit-transform:skewX(20deg); } 65% { opacity: 1; left: 114px; -webkit-transform:skewX(0deg); } 100% { opacity: 0.3; left: 160px; -webkit-transform:skewX(20deg); } } @-moz-keyframes cloud{ 0% { opacity: 0.3; left: 160px; -moz-transform:skewX(20deg); } 65% { opacity: 1; left: 114px; -moz-transform:skewX(0deg); } 100% { opacity: 0.3; left: 160px; -moz-transform:skewX(20deg); } } @-o-keyframes cloud{ 0% { opacity: 0.3; left: 160px; -o-transform:skewX(20deg); } 65% { opacity: 1; left: 114px; -o-transform:skewX(0deg); } 100% { opacity: 0.3; left: 160px; -o-transform:skewX(20deg); } } @keyframes cloud{ 0% { opacity: 0.3; left: 160px;-webkit-transform:skewX(20deg);-moz-transform:skewX(20deg);-ms-transform:skewX(20deg);transform:skewX(20deg); } 65% { opacity: 1; left: 114px;-webkit-transform:skewX(0deg);-moz-transform:skewX(0deg);-ms-transform:skewX(0deg);transform:skewX(0deg); } 100% { opacity: 0.3; left: 160px;-webkit-transform:skewX(20deg);-moz-transform:skewX(20deg);-ms-transform:skewX(20deg);transform:skewX(20deg); } } [not-existing] { zoom: 1; } #moon { transform-origin: 640px 81px; -webkit-animation: moon-float 6s infinite ease-in-out; -moz-animation: moon-float 6s infinite ease-in-out; -o-animation: moon-float 6s infinite ease-in-out; animation: moon-float 6s infinite ease-in-out; } lesshat-selector { -lh-property: 0; } @-webkit-keyframes moon-float{ 0% { -webkit-transform: translate(0, 20px) scale(1.1); } 65% { -webkit-transform: translate(0, 0px) scale(1.0); } 100% { -webkit-transform: translate(0, 20px) scale(1.1); } } @-moz-keyframes moon-float{ 0% { -moz-transform: translate(0, 20px) scale(1.1); } 65% { -moz-transform: translate(0, 0px) scale(1.0); } 100% { -moz-transform: translate(0, 20px) scale(1.1); } } @-o-keyframes moon-float{ 0% { -o-transform: translate(0, 20px) scale(1.1); } 65% { -o-transform: translate(0, 0px) scale(1.0); } 100% { -o-transform: translate(0, 20px) scale(1.1); } } @keyframes moon-float{ 0% {-webkit-transform: translate(0, 20px) scale(1.1);-moz-transform: translate(0, 20px) scale(1.1);-ms-transform: translate(0, 20px) scale(1.1);transform: translate(0, 20px) scale(1.1); } 65% {-webkit-transform: translate(0, 0px) scale(1.0);-moz-transform: translate(0, 0px) scale(1.0);-ms-transform: translate(0, 0px) scale(1.0);transform: translate(0, 0px) scale(1.0); } 100% {-webkit-transform: translate(0, 20px) scale(1.1);-moz-transform: translate(0, 20px) scale(1.1);-ms-transform: translate(0, 20px) scale(1.1);transform: translate(0, 20px) scale(1.1); } } [not-existing] { zoom: 1; } #monkey-eye-l { transform-origin: 191px 257px; -webkit-animation: blink-l 12s infinite ease-in-out; -moz-animation: blink-l 12s infinite ease-in-out; -o-animation: blink-l 12s infinite ease-in-out; animation: blink-l 12s infinite ease-in-out; } #monkey-eye-r { transform-origin: 205px 256px; -webkit-animation: blink-r 12s infinite ease-in-out; -moz-animation: blink-r 12s infinite ease-in-out; -o-animation: blink-r 12s infinite ease-in-out; animation: blink-r 12s infinite ease-in-out; } #monkey-arm { transform-origin: 155px 298px; -webkit-animation: monkey-arm 4s infinite ease-in-out; -moz-animation: monkey-arm 4s infinite ease-in-out; -o-animation: monkey-arm 4s infinite ease-in-out; animation: monkey-arm 4s infinite ease-in-out; } lesshat-selector { -lh-property: 0; } @-webkit-keyframes monkey-arm{ 0% { -webkit-transform: rotateZ(-10deg); } 50% { -webkit-transform: rotateZ(20deg); } 100% { -webkit-transform: rotateZ(-10deg); } } @-moz-keyframes monkey-arm{ 0% { -moz-transform: rotateZ(-10deg); } 50% { -moz-transform: rotateZ(20deg); } 100% { -moz-transform: rotateZ(-10deg); } } @-o-keyframes monkey-arm{ 0% { -o-transform: rotateZ(-10deg); } 50% { -o-transform: rotateZ(20deg); } 100% { -o-transform: rotateZ(-10deg); } } @keyframes monkey-arm{ 0% {-webkit-transform: rotateZ(-10deg);-moz-transform: rotateZ(-10deg);-ms-transform: rotateZ(-10deg);transform: rotateZ(-10deg); } 50% {-webkit-transform: rotateZ(20deg);-moz-transform: rotateZ(20deg);-ms-transform: rotateZ(20deg);transform: rotateZ(20deg); } 100% {-webkit-transform: rotateZ(-10deg);-moz-transform: rotateZ(-10deg);-ms-transform: rotateZ(-10deg);transform: rotateZ(-10deg); } } [not-existing] { zoom: 1; } lesshat-selector { -lh-property: 0; } @-webkit-keyframes blink-l{ 0% { -webkit-transform: rotateX(0deg); } 2% { -webkit-transform: rotateX(80deg); } 4%,20% { -webkit-transform: rotateX(0deg); } 22% { -webkit-transform: rotateX(80deg); } 24%,30% { -webkit-transform: rotateX(0deg); } 32% { -webkit-transform: rotateX(80deg); } 34%,70% { -webkit-transform: rotateX(0deg); } 72% { -webkit-transform: rotateX(80deg); } 74%,100% { -webkit-transform: rotateX(0deg); }} @-moz-keyframes blink-l{ 0% { -moz-transform: rotateX(0deg); } 2% { -moz-transform: rotateX(80deg); } 4%,20% { -moz-transform: rotateX(0deg); } 22% { -moz-transform: rotateX(80deg); } 24%,30% { -moz-transform: rotateX(0deg); } 32% { -moz-transform: rotateX(80deg); } 34%,70% { -moz-transform: rotateX(0deg); } 72% { -moz-transform: rotateX(80deg); } 74%,100% { -moz-transform: rotateX(0deg); }} @-o-keyframes blink-l{ 0% { -o-transform: rotateX(0deg); } 2% { -o-transform: rotateX(80deg); } 4%,20% { -o-transform: rotateX(0deg); } 22% { -o-transform: rotateX(80deg); } 24%,30% { -o-transform: rotateX(0deg); } 32% { -o-transform: rotateX(80deg); } 34%,70% { -o-transform: rotateX(0deg); } 72% { -o-transform: rotateX(80deg); } 74%,100% { -o-transform: rotateX(0deg); }} @keyframes blink-l{ 0% {-webkit-transform: rotateX(0deg);-moz-transform: rotateX(0deg);-ms-transform: rotateX(0deg);transform: rotateX(0deg); } 2% {-webkit-transform: rotateX(80deg);-moz-transform: rotateX(80deg);-ms-transform: rotateX(80deg);transform: rotateX(80deg); } 4%,20% {-webkit-transform: rotateX(0deg);-moz-transform: rotateX(0deg);-ms-transform: rotateX(0deg);transform: rotateX(0deg); } 22% {-webkit-transform: rotateX(80deg);-moz-transform: rotateX(80deg);-ms-transform: rotateX(80deg);transform: rotateX(80deg); } 24%,30% {-webkit-transform: rotateX(0deg);-moz-transform: rotateX(0deg);-ms-transform: rotateX(0deg);transform: rotateX(0deg); } 32% {-webkit-transform: rotateX(80deg);-moz-transform: rotateX(80deg);-ms-transform: rotateX(80deg);transform: rotateX(80deg); } 34%,70% {-webkit-transform: rotateX(0deg);-moz-transform: rotateX(0deg);-ms-transform: rotateX(0deg);transform: rotateX(0deg); } 72% {-webkit-transform: rotateX(80deg);-moz-transform: rotateX(80deg);-ms-transform: rotateX(80deg);transform: rotateX(80deg); } 74%,100% {-webkit-transform: rotateX(0deg);-moz-transform: rotateX(0deg);-ms-transform: rotateX(0deg);transform: rotateX(0deg); }} [not-existing] { zoom: 1; } lesshat-selector { -lh-property: 0; } @-webkit-keyframes blink-r{ 0% { -webkit-transform: rotateX(0deg); } 2% { -webkit-transform: rotateX(80deg); } 4%,30% { -webkit-transform: rotateX(0deg); } 32% { -webkit-transform: rotateX(80deg); } 34%,50% { -webkit-transform: rotateX(0deg); } 52% { -webkit-transform: rotateX(80deg); } 54%,100% { -webkit-transform: rotateX(0deg); } } @-moz-keyframes blink-r{ 0% { -moz-transform: rotateX(0deg); } 2% { -moz-transform: rotateX(80deg); } 4%,30% { -moz-transform: rotateX(0deg); } 32% { -moz-transform: rotateX(80deg); } 34%,50% { -moz-transform: rotateX(0deg); } 52% { -moz-transform: rotateX(80deg); } 54%,100% { -moz-transform: rotateX(0deg); } } @-o-keyframes blink-r{ 0% { -o-transform: rotateX(0deg); } 2% { -o-transform: rotateX(80deg); } 4%,30% { -o-transform: rotateX(0deg); } 32% { -o-transform: rotateX(80deg); } 34%,50% { -o-transform: rotateX(0deg); } 52% { -o-transform: rotateX(80deg); } 54%,100% { -o-transform: rotateX(0deg); } } @keyframes blink-r{ 0% {-webkit-transform: rotateX(0deg);-moz-transform: rotateX(0deg);-ms-transform: rotateX(0deg);transform: rotateX(0deg); } 2% {-webkit-transform: rotateX(80deg);-moz-transform: rotateX(80deg);-ms-transform: rotateX(80deg);transform: rotateX(80deg); } 4%,30% {-webkit-transform: rotateX(0deg);-moz-transform: rotateX(0deg);-ms-transform: rotateX(0deg);transform: rotateX(0deg); } 32% {-webkit-transform: rotateX(80deg);-moz-transform: rotateX(80deg);-ms-transform: rotateX(80deg);transform: rotateX(80deg); } 34%,50% {-webkit-transform: rotateX(0deg);-moz-transform: rotateX(0deg);-ms-transform: rotateX(0deg);transform: rotateX(0deg); } 52% {-webkit-transform: rotateX(80deg);-moz-transform: rotateX(80deg);-ms-transform: rotateX(80deg);transform: rotateX(80deg); } 54%,100% {-webkit-transform: rotateX(0deg);-moz-transform: rotateX(0deg);-ms-transform: rotateX(0deg);transform: rotateX(0deg); } } [not-existing] { zoom: 1; } #star1 { transform-origin: 643px 338px; -webkit-animation: star1 12s infinite linear, star1-fade 12s infinite ease-in-out; -moz-animation: star1 12s infinite linear, star1-fade 12s infinite ease-in-out; -o-animation: star1 12s infinite linear, star1-fade 12s infinite ease-in-out; animation: star1 12s infinite linear, star1-fade 12s infinite ease-in-out; } #star2 { transform-origin: 489px 82px; -webkit-animation: star2 12s infinite linear, star2-fade 12s infinite ease-in-out; -moz-animation: star2 12s infinite linear, star2-fade 12s infinite ease-in-out; -o-animation: star2 12s infinite linear, star2-fade 12s infinite ease-in-out; animation: star2 12s infinite linear, star2-fade 12s infinite ease-in-out; } #star3 { transform-origin: 316px 344px; -webkit-animation: star3 12s infinite linear, star3-fade 12s infinite ease-in-out; -moz-animation: star3 12s infinite linear, star3-fade 12s infinite ease-in-out; -o-animation: star3 12s infinite linear, star3-fade 12s infinite ease-in-out; animation: star3 12s infinite linear, star3-fade 12s infinite ease-in-out; } #star4 { transform-origin: 126px 182px; -webkit-animation: star4 12s infinite linear, star4-fade 12s infinite ease-in-out; -moz-animation: star4 12s infinite linear, star4-fade 12s infinite ease-in-out; -o-animation: star4 12s infinite linear, star4-fade 12s infinite ease-in-out; animation: star4 12s infinite linear, star4-fade 12s infinite ease-in-out; } lesshat-selector { -lh-property: 0; } @-webkit-keyframes star1{ 0% { -webkit-transform: scale(.5) skewX(15deg) rotateZ(0deg); } 15% { -webkit-transform: scale(1) skewX(0deg) rotateZ(360deg); } 30%,100% { -webkit-transform: scale(.5) skewX(15deg) rotateZ(720deg); } } @-moz-keyframes star1{ 0% { -moz-transform: scale(.5) skewX(15deg) rotateZ(0deg); } 15% { -moz-transform: scale(1) skewX(0deg) rotateZ(360deg); } 30%,100% { -moz-transform: scale(.5) skewX(15deg) rotateZ(720deg); } } @-o-keyframes star1{ 0% { -o-transform: scale(.5) skewX(15deg) rotateZ(0deg); } 15% { -o-transform: scale(1) skewX(0deg) rotateZ(360deg); } 30%,100% { -o-transform: scale(.5) skewX(15deg) rotateZ(720deg); } } @keyframes star1{ 0% {-webkit-transform: scale(.5) skewX(15deg) rotateZ(0deg);-moz-transform: scale(.5) skewX(15deg) rotateZ(0deg);-ms-transform: scale(.5) skewX(15deg) rotateZ(0deg);transform: scale(.5) skewX(15deg) rotateZ(0deg); } 15% {-webkit-transform: scale(1) skewX(0deg) rotateZ(360deg);-moz-transform: scale(1) skewX(0deg) rotateZ(360deg);-ms-transform: scale(1) skewX(0deg) rotateZ(360deg);transform: scale(1) skewX(0deg) rotateZ(360deg); } 30%,100% {-webkit-transform: scale(.5) skewX(15deg) rotateZ(720deg);-moz-transform: scale(.5) skewX(15deg) rotateZ(720deg);-ms-transform: scale(.5) skewX(15deg) rotateZ(720deg);transform: scale(.5) skewX(15deg) rotateZ(720deg); } } [not-existing] { zoom: 1; } lesshat-selector { -lh-property: 0; } @-webkit-keyframes star2{ 0%,15% { -webkit-transform: scale(.5) skewX(15deg) rotateZ(0deg); } 30% { -webkit-transform: scale(1) skewX(0deg) rotateZ(360deg); } 45%,100% { -webkit-transform: scale(.5) skewX(15deg) rotateZ(720deg); } } @-moz-keyframes star2{ 0%,15% { -moz-transform: scale(.5) skewX(15deg) rotateZ(0deg); } 30% { -moz-transform: scale(1) skewX(0deg) rotateZ(360deg); } 45%,100% { -moz-transform: scale(.5) skewX(15deg) rotateZ(720deg); } } @-o-keyframes star2{ 0%,15% { -o-transform: scale(.5) skewX(15deg) rotateZ(0deg); } 30% { -o-transform: scale(1) skewX(0deg) rotateZ(360deg); } 45%,100% { -o-transform: scale(.5) skewX(15deg) rotateZ(720deg); } } @keyframes star2{ 0%,15% {-webkit-transform: scale(.5) skewX(15deg) rotateZ(0deg);-moz-transform: scale(.5) skewX(15deg) rotateZ(0deg);-ms-transform: scale(.5) skewX(15deg) rotateZ(0deg);transform: scale(.5) skewX(15deg) rotateZ(0deg); } 30% {-webkit-transform: scale(1) skewX(0deg) rotateZ(360deg);-moz-transform: scale(1) skewX(0deg) rotateZ(360deg);-ms-transform: scale(1) skewX(0deg) rotateZ(360deg);transform: scale(1) skewX(0deg) rotateZ(360deg); } 45%,100% {-webkit-transform: scale(.5) skewX(15deg) rotateZ(720deg);-moz-transform: scale(.5) skewX(15deg) rotateZ(720deg);-ms-transform: scale(.5) skewX(15deg) rotateZ(720deg);transform: scale(.5) skewX(15deg) rotateZ(720deg); } } [not-existing] { zoom: 1; } lesshat-selector { -lh-property: 0; } @-webkit-keyframes star3{ 0%,30% { -webkit-transform: scale(.5) skewX(15deg) rotateZ(0deg); } 45% { -webkit-transform: scale(1) skewX(0deg) rotateZ(360deg); } 60%,100% { -webkit-transform: scale(.5) skewX(15deg) rotateZ(720deg); } } @-moz-keyframes star3{ 0%,30% { -moz-transform: scale(.5) skewX(15deg) rotateZ(0deg); } 45% { -moz-transform: scale(1) skewX(0deg) rotateZ(360deg); } 60%,100% { -moz-transform: scale(.5) skewX(15deg) rotateZ(720deg); } } @-o-keyframes star3{ 0%,30% { -o-transform: scale(.5) skewX(15deg) rotateZ(0deg); } 45% { -o-transform: scale(1) skewX(0deg) rotateZ(360deg); } 60%,100% { -o-transform: scale(.5) skewX(15deg) rotateZ(720deg); } } @keyframes star3{ 0%,30% {-webkit-transform: scale(.5) skewX(15deg) rotateZ(0deg);-moz-transform: scale(.5) skewX(15deg) rotateZ(0deg);-ms-transform: scale(.5) skewX(15deg) rotateZ(0deg);transform: scale(.5) skewX(15deg) rotateZ(0deg); } 45% {-webkit-transform: scale(1) skewX(0deg) rotateZ(360deg);-moz-transform: scale(1) skewX(0deg) rotateZ(360deg);-ms-transform: scale(1) skewX(0deg) rotateZ(360deg);transform: scale(1) skewX(0deg) rotateZ(360deg); } 60%,100% {-webkit-transform: scale(.5) skewX(15deg) rotateZ(720deg);-moz-transform: scale(.5) skewX(15deg) rotateZ(720deg);-ms-transform: scale(.5) skewX(15deg) rotateZ(720deg);transform: scale(.5) skewX(15deg) rotateZ(720deg); } } [not-existing] { zoom: 1; } lesshat-selector { -lh-property: 0; } @-webkit-keyframes star4{ 0%,45% { -webkit-transform: scale(.5) skewX(15deg) rotateZ(0deg); } 60% { -webkit-transform: scale(1) skewX(0deg) rotateZ(360deg); } 75%,100% { -webkit-transform: scale(.5) skewX(15deg) rotateZ(720deg); } } @-moz-keyframes star4{ 0%,45% { -moz-transform: scale(.5) skewX(15deg) rotateZ(0deg); } 60% { -moz-transform: scale(1) skewX(0deg) rotateZ(360deg); } 75%,100% { -moz-transform: scale(.5) skewX(15deg) rotateZ(720deg); } } @-o-keyframes star4{ 0%,45% { -o-transform: scale(.5) skewX(15deg) rotateZ(0deg); } 60% { -o-transform: scale(1) skewX(0deg) rotateZ(360deg); } 75%,100% { -o-transform: scale(.5) skewX(15deg) rotateZ(720deg); } } @keyframes star4{ 0%,45% {-webkit-transform: scale(.5) skewX(15deg) rotateZ(0deg);-moz-transform: scale(.5) skewX(15deg) rotateZ(0deg);-ms-transform: scale(.5) skewX(15deg) rotateZ(0deg);transform: scale(.5) skewX(15deg) rotateZ(0deg); } 60% {-webkit-transform: scale(1) skewX(0deg) rotateZ(360deg);-moz-transform: scale(1) skewX(0deg) rotateZ(360deg);-ms-transform: scale(1) skewX(0deg) rotateZ(360deg);transform: scale(1) skewX(0deg) rotateZ(360deg); } 75%,100% {-webkit-transform: scale(.5) skewX(15deg) rotateZ(720deg);-moz-transform: scale(.5) skewX(15deg) rotateZ(720deg);-ms-transform: scale(.5) skewX(15deg) rotateZ(720deg);transform: scale(.5) skewX(15deg) rotateZ(720deg); } } [not-existing] { zoom: 1; } lesshat-selector { -lh-property: 0; } @-webkit-keyframes star1-fade{ 0% { opacity: 0;} 15% { opacity: 1; } 30%,100% { opacity: 0; } } @-moz-keyframes star1-fade{ 0% { opacity: 0;} 15% { opacity: 1; } 30%,100% { opacity: 0; } } @-o-keyframes star1-fade{ 0% { opacity: 0;} 15% { opacity: 1; } 30%,100% { opacity: 0; } } @keyframes star1-fade{ 0% { opacity: 0;} 15% { opacity: 1; } 30%,100% { opacity: 0; } } [not-existing] { zoom: 1; } lesshat-selector { -lh-property: 0; } @-webkit-keyframes star2-fade{ 0%,15% { opacity: 0;} 30% { opacity: 1; } 45%,100% { opacity: 0; } } @-moz-keyframes star2-fade{ 0%,15% { opacity: 0;} 30% { opacity: 1; } 45%,100% { opacity: 0; } } @-o-keyframes star2-fade{ 0%,15% { opacity: 0;} 30% { opacity: 1; } 45%,100% { opacity: 0; } } @keyframes star2-fade{ 0%,15% { opacity: 0;} 30% { opacity: 1; } 45%,100% { opacity: 0; } } [not-existing] { zoom: 1; } lesshat-selector { -lh-property: 0; } @-webkit-keyframes star3-fade{ 0%,30% { opacity: 0;} 45% { opacity: 1; } 60%,100% { opacity: 0; } } @-moz-keyframes star3-fade{ 0%,30% { opacity: 0;} 45% { opacity: 1; } 60%,100% { opacity: 0; } } @-o-keyframes star3-fade{ 0%,30% { opacity: 0;} 45% { opacity: 1; } 60%,100% { opacity: 0; } } @keyframes star3-fade{ 0%,30% { opacity: 0;} 45% { opacity: 1; } 60%,100% { opacity: 0; } } [not-existing] { zoom: 1; } lesshat-selector { -lh-property: 0; } @-webkit-keyframes star4-fade{ 0%,45% { opacity: 0;} 60% { opacity: 1; } 75%,100% { opacity: 0; } } @-moz-keyframes star4-fade{ 0%,45% { opacity: 0;} 60% { opacity: 1; } 75%,100% { opacity: 0; } } @-o-keyframes star4-fade{ 0%,45% { opacity: 0;} 60% { opacity: 1; } 75%,100% { opacity: 0; } } @keyframes star4-fade{ 0%,45% { opacity: 0;} 60% { opacity: 1; } 75%,100% { opacity: 0; } } [not-existing] { zoom: 1; } #sword-path { transform-origin: 458px 206px; -webkit-animation: tetris-float 3s infinite ease-in-out; -moz-animation: tetris-float 3s infinite ease-in-out; -o-animation: tetris-float 3s infinite ease-in-out; animation: tetris-float 3s infinite ease-in-out; } #sword { transform-origin: 458px 206px; -webkit-animation: sword 4s infinite ease-out; -moz-animation: sword 4s infinite ease-out; -o-animation: sword 4s infinite ease-out; animation: sword 4s infinite ease-out; } lesshat-selector { -lh-property: 0; } @-webkit-keyframes sword{ 0%,15% { -webkit-transform:rotate(-40deg); } 87% { -webkit-transform:rotate(50deg); } 100% { -webkit-transform:rotate(-40deg); } } @-moz-keyframes sword{ 0%,15% { -moz-transform:rotate(-40deg); } 87% { -moz-transform:rotate(50deg); } 100% { -moz-transform:rotate(-40deg); } } @-o-keyframes sword{ 0%,15% { -o-transform:rotate(-40deg); } 87% { -o-transform:rotate(50deg); } 100% { -o-transform:rotate(-40deg); } } @keyframes sword{ 0%,15% {-webkit-transform:rotate(-40deg);-moz-transform:rotate(-40deg);-ms-transform:rotate(-40deg);transform:rotate(-40deg); } 87% {-webkit-transform:rotate(50deg);-moz-transform:rotate(50deg);-ms-transform:rotate(50deg);transform:rotate(50deg); } 100% {-webkit-transform:rotate(-40deg);-moz-transform:rotate(-40deg);-ms-transform:rotate(-40deg);transform:rotate(-40deg); } } [not-existing] { zoom: 1; } #tetris-path { transform-origin: 538px 374px; -webkit-animation: tetris-float 5s infinite ease-in-out; -moz-animation: tetris-float 5s infinite ease-in-out; -o-animation: tetris-float 5s infinite ease-in-out; animation: tetris-float 5s infinite ease-in-out; } #tetris { transform-origin: 538px 374px; -webkit-animation: rotate 10s steps(1) infinite alternate; -moz-animation: rotate 10s steps(1) infinite alternate; -o-animation: rotate 10s steps(1) infinite alternate; animation: rotate 10s steps(1) infinite alternate; } lesshat-selector { -lh-property: 0; } @-webkit-keyframes rotate{ 0% { -webkit-transform: rotateZ(0deg); } 25% { -webkit-transform: rotateZ(90deg); } 50% { -webkit-transform: rotateZ(180deg); } 75% { -webkit-transform: rotateZ(270deg); } 100% { -webkit-transform: rotateZ(360deg); }} @-moz-keyframes rotate{ 0% { -moz-transform: rotateZ(0deg); } 25% { -moz-transform: rotateZ(90deg); } 50% { -moz-transform: rotateZ(180deg); } 75% { -moz-transform: rotateZ(270deg); } 100% { -moz-transform: rotateZ(360deg); }} @-o-keyframes rotate{ 0% { -o-transform: rotateZ(0deg); } 25% { -o-transform: rotateZ(90deg); } 50% { -o-transform: rotateZ(180deg); } 75% { -o-transform: rotateZ(270deg); } 100% { -o-transform: rotateZ(360deg); }} @keyframes rotate{ 0% {-webkit-transform: rotateZ(0deg);-moz-transform: rotateZ(0deg);-ms-transform: rotateZ(0deg);transform: rotateZ(0deg); } 25% {-webkit-transform: rotateZ(90deg);-moz-transform: rotateZ(90deg);-ms-transform: rotateZ(90deg);transform: rotateZ(90deg); } 50% {-webkit-transform: rotateZ(180deg);-moz-transform: rotateZ(180deg);-ms-transform: rotateZ(180deg);transform: rotateZ(180deg); } 75% {-webkit-transform: rotateZ(270deg);-moz-transform: rotateZ(270deg);-ms-transform: rotateZ(270deg);transform: rotateZ(270deg); } 100% {-webkit-transform: rotateZ(360deg);-moz-transform: rotateZ(360deg);-ms-transform: rotateZ(360deg);transform: rotateZ(360deg); }} [not-existing] { zoom: 1; } lesshat-selector { -lh-property: 0; } @-webkit-keyframes tetris-float{ 0% { -webkit-transform: translate(0px, 0px) scale(0.90) } 65% { -webkit-transform: translate(0px, 30px) scale(1.0); } 100% { -webkit-transform: translate(0px, 0px) scale(0.90); }} @-moz-keyframes tetris-float{ 0% { -moz-transform: translate(0px, 0px) scale(0.90) } 65% { -moz-transform: translate(0px, 30px) scale(1.0); } 100% { -moz-transform: translate(0px, 0px) scale(0.90); }} @-o-keyframes tetris-float{ 0% { -o-transform: translate(0px, 0px) scale(0.90) } 65% { -o-transform: translate(0px, 30px) scale(1.0); } 100% { -o-transform: translate(0px, 0px) scale(0.90); }} @keyframes tetris-float{ 0% {-webkit-transform: translate(0px, 0px) scale(0.90);-moz-transform: translate(0px, 0px) scale(0.90);-ms-transform: translate(0px, 0px) scale(0.90);transform: translate(0px, 0px) scale(0.90);} 65% {-webkit-transform: translate(0px, 30px) scale(1.0);-moz-transform: translate(0px, 30px) scale(1.0);-ms-transform: translate(0px, 30px) scale(1.0);transform: translate(0px, 30px) scale(1.0); } 100% {-webkit-transform: translate(0px, 0px) scale(0.90);-moz-transform: translate(0px, 0px) scale(0.90);-ms-transform: translate(0px, 0px) scale(0.90);transform: translate(0px, 0px) scale(0.90); }} [not-existing] { zoom: 1; } #triforce { transform-origin: 175px 91px; -webkit-animation: triforce-float 3s infinite ease-in-out; -moz-animation: triforce-float 3s infinite ease-in-out; -o-animation: triforce-float 3s infinite ease-in-out; animation: triforce-float 3s infinite ease-in-out; } lesshat-selector { -lh-property: 0; } @-webkit-keyframes triforce-float{ 0% { -webkit-transform: translate(0px, 0px) scale(0.90) } 65% { -webkit-transform: translate(0px, 30px) scale(1.0); } 100% { -webkit-transform: translate(0px, 0px) scale(0.90); } } @-moz-keyframes triforce-float{ 0% { -moz-transform: translate(0px, 0px) scale(0.90) } 65% { -moz-transform: translate(0px, 30px) scale(1.0); } 100% { -moz-transform: translate(0px, 0px) scale(0.90); } } @-o-keyframes triforce-float{ 0% { -o-transform: translate(0px, 0px) scale(0.90) } 65% { -o-transform: translate(0px, 30px) scale(1.0); } 100% { -o-transform: translate(0px, 0px) scale(0.90); } } @keyframes triforce-float{ 0% {-webkit-transform: translate(0px, 0px) scale(0.90);-moz-transform: translate(0px, 0px) scale(0.90);-ms-transform: translate(0px, 0px) scale(0.90);transform: translate(0px, 0px) scale(0.90);} 65% {-webkit-transform: translate(0px, 30px) scale(1.0);-moz-transform: translate(0px, 30px) scale(1.0);-ms-transform: translate(0px, 30px) scale(1.0);transform: translate(0px, 30px) scale(1.0); } 100% {-webkit-transform: translate(0px, 0px) scale(0.90);-moz-transform: translate(0px, 0px) scale(0.90);-ms-transform: translate(0px, 0px) scale(0.90);transform: translate(0px, 0px) scale(0.90); } } [not-existing] { zoom: 1; } @media all and (max-width: 768px){ .me404{ margin-left: 50px; } }