@charset "utf-8"; /* CSS Document */ #c_static_001-1647760342554 .s_list{ text-align:right; } .banner_mouse{ z-index: 99; position: relative; width: 23px; height: 40px; cursor:pointer; background:url(https://omo-oss-image.thefastimg.com/portal-saas/new2022022819041160813/cms/image/acd78c8f-95cf-44e1-8bbe-83a376d076a7.png) no-repeat -23px 0px; -webkit-animation: nudgeMouse 1.6s linear infinite; animation: nudgeMouse 1.6s linear infinite; margin: 0 auto; } .banner_mouse:after,.banner_mouse:before{ content: ""; position: absolute; } .banner_mouse:before{ width:23px; height:40px; background:url(https://omo-oss-image.thefastimg.com/portal-saas/new2022022819041160813/cms/image/acd78c8f-95cf-44e1-8bbe-83a376d076a7.png) no-repeat 0px 0px; -webkit-animation: colorSlide 1.6s linear infinite; animation: colorSlide 1.6s linear infinite; top:0; left:0; } .banner_mouse:after{ background-color: #fff; width: 4px; height: 4px; border-radius: 100%; -webkit-animation: trackBallSlide 1.6s linear infinite; animation: trackBallSlide 1.6s linear infinite; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } @-webkit-keyframes colorSlide { 0% { height:0; } 90%{ height:40px; } } @keyframes colorSlide { 0% { height:0; } 90%{ height:40px; } } @-webkit-keyframes trackBallSlide { 0% { opacity: 1; -webkit-transform: scale(1) translateY(-8px); transform: scale(1) translateY(-8px); } 34% { opacity: 1; -webkit-transform: scale(0.9) translateY(4px); transform: scale(0.9) translateY(4px); } 68% { opacity: 0; -webkit-transform: scale(0.4) translateY(16px); transform: scale(0.4) translateY(16px); } 100% { opacity: 0; -webkit-transform: scale(0.4) translateY(-8px); transform: scale(0.4) translateY(-8px); } } @keyframes trackBallSlide { 0% { opacity: 1; -webkit-transform: scale(1) translateY(-8px); transform: scale(1) translateY(-8px); } 34% { opacity: 1; -webkit-transform: scale(0.9) translateY(4px); transform: scale(0.9) translateY(4px); } 68% { opacity: 0; -webkit-transform: scale(0.4) translateY(16px); transform: scale(0.4) translateY(16px); } 100% { opacity: 0; -webkit-transform: scale(0.4) translateY(-8px); transform: scale(0.4) translateY(-8px); } } @-webkit-keyframes nudgeMouse { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(8px); transform: translateY(8px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes nudgeMouse { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { -webkit-transform: translateY(8px); transform: translateY(8px); } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } .sideBar { position: fixed; right: 0; top: 73%; transform: translateY(-50%); z-index: 1; } .side1 { width: 50px; height: 150px; background: rgb(0,111,58,0.8); text-align: center; transition: all 0.5s; display: flex; align-items: center; justify-content: center; } .side1 a, .side1 img, .side1 i, .side1 span { display: block; } .side1 img { margin: 0 auto; } .side1 i { margin: 10px auto; width: 1px; height: 20px; background: #fff; transition: all 0.5s ease; } .side1 span { color: #fff; font-size: 14px; writing-mode: vertical-lr; margin: 0 auto; letter-spacing: -2px; } .side1:hover { background: rgb(0,111,58,1); } .side1:hover a img { animation: jitter 0.5s; } .side { height: 50px; position: absolute; transition: all 0.5s; } .side a { display: block; height: 50px; font-size: 0; } .side i, .side span { display: inline-block; vertical-align: middle; height: 100%; line-height: 50px; } .side i { width: 50px; text-align: center; background: rgb(0,111,58,0.8); transition: all 0.3s; } .side i img { vertical-align: middle; } .side span { text-align: center; line-height: 50px; background: rgb(0,111,58,0.8); font-size: 13px; color: #fff; transition: all 1s; } .side2 { top: 151px; right: -140px; width: 190px; } .side2 span { width: 140px; } .side3 { right: -190px; width: 240px; top: 202px; } .side3 span { width: 190px; } .side4 { right: -140px; width: 190px; top: 253px; } .side4 span { width: 140px; } .side5 { right: -90px; width: 140px; top: 253px; cursor: pointer; } .side5 span { width: 90px; font-size: 14px; } .qcodePic { width: 100%; position: absolute; top: 50px; left: 0; display: none; z-index: 99; text-align: center; background: #fff; border: 1px solid #e5e5e5; } .side5:hover .qcodePic { display: block; } .side6 { right: -90px; width: 140px; top: 305px; cursor: pointer; } .side6 span { width: 90px; font-size: 14px; } .side:hover { right: 0; } .side:hover i { background: rgb(0,111,58,1); } .wxPic { position: fixed; width: 100%; height: 100%; left: 0; top: 0; background: rgba(0,0,0,0.8); z-index: 9999; display: none; } .wxPic img { width: auto; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .m-foot{ position: fixed; bottom:0; left:0; z-index:999; width:100%; display: none; } .m-foot ul{ font-size:0; text-align:center; height:54px; } .m-foot ul li{ float: left; width: 25%; height:54px; display: flex; justify-content: center; align-items: center; border-left: solid 1px rgb(255 255 255 / 36%) !important; background: rgb(0,111,58,0.8); border-left: none; } .m-foot ul li:nth-child(3){ } .m-foot ul li:nth-child(3) span{ color:#fff !important; } .m-foot ul li:first-child, .m-foot ul li:nth-child(4){ border-left:none; } .m-foot ul li span,.m-foot ul li img{ display: block; margin: 6px auto; max-height: 16px; } .m-foot ul li span{ line-height:14px; font-size:12px; color: #fff; transition: all 0.4s; } .m-foot ul li:hover span{ color:#fff; } .wyz{ position:fixed; width:50px; height:50px !important; right:6px; bottom:60px; z-index:90; display:none; } @media only screen and (max-width: 768px) { .sideBar { display:none; } .m-foot{ display:block; } .wyz{ display:block; } }