.html{
background-color: #5c6270;
}
body {
background: var(--bg);
color: var(--fg);
font: 1em/1.5 sans-serif;
height: 100vh;
min-height: 480px;
font-family: 'Microsoft YaHei', Arial, Tahoma, sans-serif;
width: 100%;
}
.clock {
box-shadow: 0 -1em 1em rgba(0, 0, 0, 0.3) inset, 0 0.5em 1em rgba(255, 255, 255, 0.1) inset, 0 -0.5em 1em rgba(255, 255, 255, 0.2), 0 1em 1em rgba(0, 0, 0, 0.3);
position: relative;
width: 16em;
height: 16em;
}
.clock, .clock:before, .clock:after {
border-radius: 50%;
}
.clock:before, .clock:after, .clock__hand {
position: absolute;
}
.clock:before, .clock:after {
content: "";
display: block;
}
.clock:before {
box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, 0.1) inset, 0 -0.5em 1em 0.5em rgba(0, 0, 0, 0.1);
top: 2.5em;
left: 2.5em;
width: 11em;
height: 11em;
}
.clock:after {
box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.3) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.3);
top: calc(50% - 0.5em);
left: calc(50% - 0.5em);
width: 1em;
height: 1em;
}
.clock__hand {
box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 1em 0.5em rgba(0, 0, 0, 0.3);
bottom: 50%;
transform-origin: 50% 100%;
transform: rotate(0) translateY(-1.25em);
}
.clock__hand--hr {
animation: shortHand 86400s linear infinite;
background: var(--primary1);
border-radius: 0.5em;
left: calc(50% - 0.5em);
width: 1em;
height: 3.2em;
}
.clock__hand--min {
animation: longHand 3600s linear infinite;
background: var(--primary2);
border-radius: 0.4em;
left: calc(50% - 0.4em);
width: 0.8em;
height: 3.6em;
}
.clock__hand--sec {
animation: longHand 60s cubic-bezier(0.8, 0, 0.2, 1) infinite;
background: var(--fg);
border-radius: 0.3em;
left: calc(50% - 0.3em);
width: 0.6em;
height: 4em;
}
/* Dark theme */
@media (prefers-color-scheme: dark) {
:root {
--bg: linear-gradient(#5c6270, #2e3138);
--fg: #e3e4e8;
}
.clock {
box-shadow: 0 -1em 1em rgba(0, 0, 0, 0.3) inset, 0 0.5em 1em rgba(255, 255, 255, 0.05) inset, 0 -0.5em 1em rgba(255, 255, 255, 0.05), 0 1em 1em rgba(0, 0, 0, 0.4);
}
.clock:before {
box-shadow: 0 0 1em 0.5em rgba(0, 0, 0, 0.2) inset, 0 -0.5em 1em 0.5em rgba(0, 0, 0, 0.2);
}
.clock:after {
box-shadow: 0 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0 -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0 0.2em 0.2em rgba(0, 0, 0, 0.7);
}
}
/* Animations */
@keyframes shortHand {
0% {
box-shadow: 0em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em 1em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(0deg) translateY(-1.25em);
}
0.83% {
box-shadow: 0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em 0.99em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(6deg) translateY(-1.25em);
}
1.67% {
box-shadow: 0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(12deg) translateY(-1.25em);
}
2.5% {
box-shadow: 0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(18deg) translateY(-1.25em);
}
3.33% {
box-shadow: 0.04em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(24deg) translateY(-1.25em);
}
4.17% {
box-shadow: 0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em 0.87em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(30deg) translateY(-1.25em);
}
5% {
box-shadow: 0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(36deg) translateY(-1.25em);
}
5.83% {
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(42deg) translateY(-1.25em);
}
6.67% {
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em 0.67em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(48deg) translateY(-1.25em);
}
7.5% {
box-shadow: 0.08em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(54deg) translateY(-1.25em);
}
8.33% {
box-shadow: 0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(60deg) translateY(-1.25em);
}
9.17% {
box-shadow: 0.09em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em 0.41em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(66deg) translateY(-1.25em);
}
10% {
box-shadow: 0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em 0.31em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(72deg) translateY(-1.25em);
}
10.83% {
box-shadow: 0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(78deg) translateY(-1.25em);
}
11.67% {
box-shadow: 0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em 0.1em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(84deg) translateY(-1.25em);
}
12.5% {
box-shadow: 0.1em 0em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 1em 0em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(90deg) translateY(-1.25em);
}
13.33% {
box-shadow: 0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em -0.11em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(96deg) translateY(-1.25em);
}
14.17% {
box-shadow: 0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(102deg) translateY(-1.25em);
}
15% {
box-shadow: 0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em -0.31em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(108deg) translateY(-1.25em);
}
15.83% {
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em -0.41em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(114deg) translateY(-1.25em);
}
16.67% {
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em -0.5em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(120deg) translateY(-1.25em);
}
17.5% {
box-shadow: 0.08em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(126deg) translateY(-1.25em);
}
18.33% {
box-shadow: 0.07em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em -0.67em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(132deg) translateY(-1.25em);
}
19.17% {
box-shadow: 0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(138deg) translateY(-1.25em);
}
20% {
box-shadow: 0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(144deg) translateY(-1.25em);
}
20.83% {
box-shadow: 0.05em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em -0.87em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(150deg) translateY(-1.25em);
}
21.67% {
box-shadow: 0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(156deg) translateY(-1.25em);
}
22.5% {
box-shadow: 0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(162deg) translateY(-1.25em);
}
23.33% {
box-shadow: 0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(168deg) translateY(-1.25em);
}
24.17% {
box-shadow: 0.01em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em -1em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(174deg) translateY(-1.25em);
}
25% {
box-shadow: 0em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em -1em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(180deg) translateY(-1.25em);
}
25.83% {
box-shadow: -0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em -1em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(186deg) translateY(-1.25em);
}
26.67% {
box-shadow: -0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(192deg) translateY(-1.25em);
}
27.5% {
box-shadow: -0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(198deg) translateY(-1.25em);
}
28.33% {
box-shadow: -0.05em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(204deg) translateY(-1.25em);
}
29.17% {
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em -0.87em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(210deg) translateY(-1.25em);
}
30% {
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(216deg) translateY(-1.25em);
}
30.83% {
box-shadow: -0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(222deg) translateY(-1.25em);
}
31.67% {
box-shadow: -0.08em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em -0.67em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(228deg) translateY(-1.25em);
}
32.5% {
box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(234deg) translateY(-1.25em);
}
33.33% {
box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em -0.51em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(240deg) translateY(-1.25em);
}
34.17% {
box-shadow: -0.1em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em -0.41em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(246deg) translateY(-1.25em);
}
35% {
box-shadow: -0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em -0.31em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(252deg) translateY(-1.25em);
}
35.83% {
box-shadow: -0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(258deg) translateY(-1.25em);
}
36.67% {
box-shadow: -0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.11em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(264deg) translateY(-1.25em);
}
37.5% {
box-shadow: -0.1em -0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.01em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(270deg) translateY(-1.25em);
}
38.33% {
box-shadow: -0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -1em 0.1em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(276deg) translateY(-1.25em);
}
39.17% {
box-shadow: -0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(282deg) translateY(-1.25em);
}
40% {
box-shadow: -0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em 0.31em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(288deg) translateY(-1.25em);
}
40.83% {
box-shadow: -0.1em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em 0.41em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(294deg) translateY(-1.25em);
}
41.67% {
box-shadow: -0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(300deg) translateY(-1.25em);
}
42.5% {
box-shadow: -0.09em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(306deg) translateY(-1.25em);
}
43.33% {
box-shadow: -0.08em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em 0.67em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(312deg) translateY(-1.25em);
}
44.17% {
box-shadow: -0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(318deg) translateY(-1.25em);
}
45% {
box-shadow: -0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(324deg) translateY(-1.25em);
}
45.83% {
box-shadow: -0.06em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em 0.87em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(330deg) translateY(-1.25em);
}
46.67% {
box-shadow: -0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(336deg) translateY(-1.25em);
}
47.5% {
box-shadow: -0.04em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(342deg) translateY(-1.25em);
}
48.33% {
box-shadow: -0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(348deg) translateY(-1.25em);
}
49.17% {
box-shadow: -0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em 0.99em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(354deg) translateY(-1.25em);
}
50% {
box-shadow: -0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.01em 1em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(360deg) translateY(-1.25em);
}
50.83% {
box-shadow: 0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em 0.99em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(366deg) translateY(-1.25em);
}
51.67% {
box-shadow: 0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(372deg) translateY(-1.25em);
}
52.5% {
box-shadow: 0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(378deg) translateY(-1.25em);
}
53.33% {
box-shadow: 0.04em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(384deg) translateY(-1.25em);
}
54.17% {
box-shadow: 0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em 0.87em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(390deg) translateY(-1.25em);
}
55% {
box-shadow: 0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(396deg) translateY(-1.25em);
}
55.83% {
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(402deg) translateY(-1.25em);
}
56.67% {
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em 0.67em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(408deg) translateY(-1.25em);
}
57.5% {
box-shadow: 0.08em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(414deg) translateY(-1.25em);
}
58.33% {
box-shadow: 0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(420deg) translateY(-1.25em);
}
59.17% {
box-shadow: 0.09em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em 0.41em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(426deg) translateY(-1.25em);
}
60% {
box-shadow: 0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em 0.31em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(432deg) translateY(-1.25em);
}
60.83% {
box-shadow: 0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(438deg) translateY(-1.25em);
}
61.67% {
box-shadow: 0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em 0.1em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(444deg) translateY(-1.25em);
}
62.5% {
box-shadow: 0.1em 0em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 1em 0em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(450deg) translateY(-1.25em);
}
63.33% {
box-shadow: 0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em -0.11em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(456deg) translateY(-1.25em);
}
64.17% {
box-shadow: 0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(462deg) translateY(-1.25em);
}
65% {
box-shadow: 0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em -0.31em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(468deg) translateY(-1.25em);
}
65.83% {
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em -0.41em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(474deg) translateY(-1.25em);
}
66.67% {
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em -0.5em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(480deg) translateY(-1.25em);
}
67.5% {
box-shadow: 0.08em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(486deg) translateY(-1.25em);
}
68.33% {
box-shadow: 0.07em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em -0.67em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(492deg) translateY(-1.25em);
}
69.17% {
box-shadow: 0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(498deg) translateY(-1.25em);
}
70% {
box-shadow: 0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(504deg) translateY(-1.25em);
}
70.83% {
box-shadow: 0.05em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em -0.87em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(510deg) translateY(-1.25em);
}
71.67% {
box-shadow: 0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(516deg) translateY(-1.25em);
}
72.5% {
box-shadow: 0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(522deg) translateY(-1.25em);
}
73.33% {
box-shadow: 0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(528deg) translateY(-1.25em);
}
74.17% {
box-shadow: 0.01em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em -1em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(534deg) translateY(-1.25em);
}
75% {
box-shadow: 0em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em -1em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(540deg) translateY(-1.25em);
}
75.83% {
box-shadow: -0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em -1em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(546deg) translateY(-1.25em);
}
76.67% {
box-shadow: -0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(552deg) translateY(-1.25em);
}
77.5% {
box-shadow: -0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(558deg) translateY(-1.25em);
}
78.33% {
box-shadow: -0.05em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(564deg) translateY(-1.25em);
}
79.17% {
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em -0.87em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(570deg) translateY(-1.25em);
}
80% {
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(576deg) translateY(-1.25em);
}
80.83% {
box-shadow: -0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(582deg) translateY(-1.25em);
}
81.67% {
box-shadow: -0.08em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em -0.67em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(588deg) translateY(-1.25em);
}
82.5% {
box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(594deg) translateY(-1.25em);
}
83.33% {
box-shadow: -0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em -0.5em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(600deg) translateY(-1.25em);
}
84.17% {
box-shadow: -0.1em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em -0.41em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(606deg) translateY(-1.25em);
}
85% {
box-shadow: -0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em -0.31em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(612deg) translateY(-1.25em);
}
85.83% {
box-shadow: -0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(618deg) translateY(-1.25em);
}
86.67% {
box-shadow: -0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.11em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(624deg) translateY(-1.25em);
}
87.5% {
box-shadow: -0.1em -0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.01em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(630deg) translateY(-1.25em);
}
88.33% {
box-shadow: -0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -1em 0.1em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(636deg) translateY(-1.25em);
}
89.17% {
box-shadow: -0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(642deg) translateY(-1.25em);
}
90% {
box-shadow: -0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em 0.31em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(648deg) translateY(-1.25em);
}
90.83% {
box-shadow: -0.1em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em 0.41em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(654deg) translateY(-1.25em);
}
91.67% {
box-shadow: -0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(660deg) translateY(-1.25em);
}
92.5% {
box-shadow: -0.09em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(666deg) translateY(-1.25em);
}
93.33% {
box-shadow: -0.08em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em 0.67em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(672deg) translateY(-1.25em);
}
94.17% {
box-shadow: -0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(678deg) translateY(-1.25em);
}
95% {
box-shadow: -0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(684deg) translateY(-1.25em);
}
95.83% {
box-shadow: -0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.5em 0.87em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(690deg) translateY(-1.25em);
}
96.67% {
box-shadow: -0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(696deg) translateY(-1.25em);
}
97.5% {
box-shadow: -0.04em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(702deg) translateY(-1.25em);
}
98.33% {
box-shadow: -0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(708deg) translateY(-1.25em);
}
99.17% {
box-shadow: -0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em 0.99em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(714deg) translateY(-1.25em);
}
100% {
box-shadow: -0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.01em 1em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(720deg) translateY(-1.25em);
}
}
@keyframes longHand {
0% {
box-shadow: 0em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em 1em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(0deg) translateY(-1.25em);
}
1.67% {
box-shadow: 0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em 0.99em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(6deg) translateY(-1.25em);
}
3.33% {
box-shadow: 0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(12deg) translateY(-1.25em);
}
5% {
box-shadow: 0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(18deg) translateY(-1.25em);
}
6.67% {
box-shadow: 0.04em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(24deg) translateY(-1.25em);
}
8.33% {
box-shadow: 0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em 0.87em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(30deg) translateY(-1.25em);
}
10% {
box-shadow: 0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(36deg) translateY(-1.25em);
}
11.67% {
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(42deg) translateY(-1.25em);
}
13.33% {
box-shadow: 0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em 0.67em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(48deg) translateY(-1.25em);
}
15% {
box-shadow: 0.08em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(54deg) translateY(-1.25em);
}
16.67% {
box-shadow: 0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(60deg) translateY(-1.25em);
}
18.33% {
box-shadow: 0.09em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em 0.41em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(66deg) translateY(-1.25em);
}
20% {
box-shadow: 0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em 0.31em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(72deg) translateY(-1.25em);
}
21.67% {
box-shadow: 0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(78deg) translateY(-1.25em);
}
23.33% {
box-shadow: 0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em 0.1em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(84deg) translateY(-1.25em);
}
25% {
box-shadow: 0.1em 0em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em -0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 1em 0em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(90deg) translateY(-1.25em);
}
26.67% {
box-shadow: 0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, 0.99em -0.11em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(96deg) translateY(-1.25em);
}
28.33% {
box-shadow: 0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, 0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(102deg) translateY(-1.25em);
}
30% {
box-shadow: 0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, 0.95em -0.31em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(108deg) translateY(-1.25em);
}
31.67% {
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.1em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, 0.91em -0.41em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(114deg) translateY(-1.25em);
}
33.33% {
box-shadow: 0.09em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, 0.87em -0.5em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(120deg) translateY(-1.25em);
}
35% {
box-shadow: 0.08em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, -0.09em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, 0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(126deg) translateY(-1.25em);
}
36.67% {
box-shadow: 0.07em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, -0.08em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.74em -0.67em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(132deg) translateY(-1.25em);
}
38.33% {
box-shadow: 0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, -0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, 0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(138deg) translateY(-1.25em);
}
40% {
box-shadow: 0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, 0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(144deg) translateY(-1.25em);
}
41.67% {
box-shadow: 0.05em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.5em -0.87em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(150deg) translateY(-1.25em);
}
43.33% {
box-shadow: 0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, 0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(156deg) translateY(-1.25em);
}
45% {
box-shadow: 0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.04em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(162deg) translateY(-1.25em);
}
46.67% {
box-shadow: 0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(168deg) translateY(-1.25em);
}
48.33% {
box-shadow: 0.01em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0.1em -1em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(174deg) translateY(-1.25em);
}
50% {
box-shadow: 0em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, -0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, 0em -1em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(180deg) translateY(-1.25em);
}
51.67% {
box-shadow: -0.02em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em -1em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(186deg) translateY(-1.25em);
}
53.33% {
box-shadow: -0.03em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em -0.98em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(192deg) translateY(-1.25em);
}
55% {
box-shadow: -0.04em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em 0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em -0.96em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(198deg) translateY(-1.25em);
}
56.67% {
box-shadow: -0.05em -0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em -0.92em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(204deg) translateY(-1.25em);
}
58.33% {
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em 0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em -0.87em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(210deg) translateY(-1.25em);
}
60% {
box-shadow: -0.06em -0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em 0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em -0.81em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(216deg) translateY(-1.25em);
}
61.67% {
box-shadow: -0.07em -0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em -0.75em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(222deg) translateY(-1.25em);
}
63.33% {
box-shadow: -0.08em -0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em 0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em -0.67em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(228deg) translateY(-1.25em);
}
65% {
box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em 0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em -0.59em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(234deg) translateY(-1.25em);
}
66.67% {
box-shadow: -0.09em -0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em -0.51em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(240deg) translateY(-1.25em);
}
68.33% {
box-shadow: -0.1em -0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em 0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em -0.41em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(246deg) translateY(-1.25em);
}
70% {
box-shadow: -0.1em -0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em -0.31em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(252deg) translateY(-1.25em);
}
71.67% {
box-shadow: -0.1em -0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em -0.21em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(258deg) translateY(-1.25em);
}
73.33% {
box-shadow: -0.1em -0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0.01em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.11em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(264deg) translateY(-1.25em);
}
75% {
box-shadow: -0.1em -0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em 0em 0.1em rgba(0, 0, 0, 0.3) inset, -1em -0.01em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(270deg) translateY(-1.25em);
}
76.67% {
box-shadow: -0.1em 0.01em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.02em 0.1em rgba(0, 0, 0, 0.3) inset, -1em 0.1em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(276deg) translateY(-1.25em);
}
78.33% {
box-shadow: -0.1em 0.02em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.03em 0.1em rgba(0, 0, 0, 0.3) inset, -0.98em 0.21em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(282deg) translateY(-1.25em);
}
80% {
box-shadow: -0.1em 0.03em 0.1em rgba(255, 255, 255, 0.1) inset, 0.1em -0.04em 0.1em rgba(0, 0, 0, 0.3) inset, -0.96em 0.31em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(288deg) translateY(-1.25em);
}
81.67% {
box-shadow: -0.1em 0.04em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.05em 0.1em rgba(0, 0, 0, 0.3) inset, -0.92em 0.41em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(294deg) translateY(-1.25em);
}
83.33% {
box-shadow: -0.09em 0.05em 0.1em rgba(255, 255, 255, 0.1) inset, 0.09em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.87em 0.5em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(300deg) translateY(-1.25em);
}
85% {
box-shadow: -0.09em 0.06em 0.1em rgba(255, 255, 255, 0.1) inset, 0.08em -0.06em 0.1em rgba(0, 0, 0, 0.3) inset, -0.81em 0.59em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(306deg) translateY(-1.25em);
}
86.67% {
box-shadow: -0.08em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.07em 0.1em rgba(0, 0, 0, 0.3) inset, -0.75em 0.67em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(312deg) translateY(-1.25em);
}
88.33% {
box-shadow: -0.07em 0.07em 0.1em rgba(255, 255, 255, 0.1) inset, 0.07em -0.08em 0.1em rgba(0, 0, 0, 0.3) inset, -0.67em 0.74em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(318deg) translateY(-1.25em);
}
90% {
box-shadow: -0.06em 0.08em 0.1em rgba(255, 255, 255, 0.1) inset, 0.06em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.59em 0.81em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(324deg) translateY(-1.25em);
}
91.67% {
box-shadow: -0.06em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.05em -0.09em 0.1em rgba(0, 0, 0, 0.3) inset, -0.51em 0.87em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(330deg) translateY(-1.25em);
}
93.33% {
box-shadow: -0.05em 0.09em 0.1em rgba(255, 255, 255, 0.1) inset, 0.04em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.41em 0.91em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(336deg) translateY(-1.25em);
}
95% {
box-shadow: -0.04em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.03em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.31em 0.95em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(342deg) translateY(-1.25em);
}
96.67% {
box-shadow: -0.03em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.02em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.21em 0.98em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(348deg) translateY(-1.25em);
}
98.33% {
box-shadow: -0.02em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0.01em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.11em 0.99em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(354deg) translateY(-1.25em);
}
100% {
box-shadow: -0.01em 0.1em 0.1em rgba(255, 255, 255, 0.1) inset, 0em -0.1em 0.1em rgba(0, 0, 0, 0.3) inset, -0.01em 1em 0.5em rgba(0, 0, 0, 0.3);
transform: rotate(360deg) translateY(-1.25em);
}
}
.my-textarea{
font-family:"PingFang SC",SimSun, "宋体", sans-serif;,"\5FAE\8F6F\96C5\9ED1","Microsoft Yahei","Hiragino Sans GB",tahoma,arial,"\5B8B\4F53";
}
.text-wrapper {
display: flex;
align-items: baseline;
flex-wrap: wrap;
}
@media screen and (orientation: portrait) {
h5{
}
.main {
width: 80%;
/* margin: 15% 52% 0% 18%; */
height: 85vh;
position: fixed;
left: 10%;
}
.logo {
/*position: absolute; */
left: 40px;
top: 40px;
/* z-index: 99; */
/* height: auto; */
/* position: relative; */
display: block;
margin: 40px 0 0 40px;
}
.logo-img {
width: 30%;
}
.container {
position: relative;
width: 100%;
height: 80%;
margin-top: 20px;
/* border: 1px solid black; */
}
.gan-img {
height: 60%;
}
.icon {
position: absolute;
transform: translateX(-50%);
border: 0px;
width: 25%;
}
.icon-l {
left: 15%;
}
.icon-m {
left: 50%;
}
.icon-r {
right: 15%;
transform: translateX(50%);
}
.text-wrapper {
flex-wrap: wrap;
}
.text-part {
white-space: normal;
width: 100%;
}
.footer {
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
font-size: 12px;
color: #ffffff;
}
.footer a {
text-decoration: none; /* 去除下划线 */
color: #ffffff;
}
.footer a:hover {
text-decoration: underline; /* 鼠标悬停时显示下划线 */
}
.clock {
bottom: 80px;
}
.icon-gan {
position: absolute;
transform: translateX(-50%);
height: 80%;
top: 85px;
}
#icon-gl {
left: 15%;
}
#icon-gm {
left: 50%;
}
#icon-gr {
right: 15%;
}
#icon-gr {
transform: translateX(50%);
}
#icon2 {
background-color: red;
}
img {
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));;
}
.page-gan {
width: 15px;
height: 501px;
}
.icon-hover:hover {
/* 在鼠标悬停状态下的样式 */
opacity: 0.8; /* 例如添加透明度 */
cursor: pointer;
}
.canvas {
position: absolute;
}
.icon::after {
/* bottom: 0; */
position: absolute;
left: 0;
width: 100%;
text-align: center;
font-size: 16px;
color: #ffffff;
top: 50%;
transform: translateY(-50%);
/*text-shadow: 2px 2px 0px #5a5a5a;*/
}
#icon-l1::after {
content: "以新谋质";
/* white-space: pre; 设置 white-space 属性为 pre，保留换行符 */
}
#icon-l2 {
}
#icon-l2::after {
content: "公司动态";
}
#icon-l3::after {
content: "合作伙伴";
}
#icon-m1::after {
content: "产品介绍";
}
#icon-m2::after {
content: "解决方案";
}
#icon-m3::after {
content: "服务案例";
}
#icon-r1::after {
content: "联系我们";
}
#icon-r2::after {
content: "资料下载";
}
/*page*/
.page {
width: 90%;
/* margin: 5% 30% 0 30%; */
position: relative;
left: 50px;
top: 10px;
height: 90%;
/* transform: translateX(-40%);*/
}
.text-font {
font-family: inherit;
font-size: 16px;
line-height: 1.2;
color: black;
}
.col-md-4 {
margin-bottom: 40px;
align-self: flex-start;
display: flex;
justify-content: center;
flex: 0 0 50%;
max-width: 50%;
}
.row {
position: relative;
/* margin-top: 180px; */
/* background-color: white; */
padding-top: 50px;
margin-left: 0px;
margin-right: 20%;
background-color: rgb(255, 255, 255, 0.15);
border-radius: 1.5rem;
padding-bottom: 50px;
min-height: 94%;
display: flex;
}
.para {
text-align: left;
text-indent: 2em;
}
.nvgDiv {
background-color: white;
opacity: 0.15;
color: white;
width: 100%;
/* background-color: rgb(255, 255, 255, 0.35); */
top: -100px;
position: relative;
}
.nvg-text {
text-decoration: none; /* 禁用下划线 */
cursor: default; /* 禁用鼠标悬停时的指针样式 */
}
.detail-page {
/* min-width: 600px; */
width: 90%;
/* margin: 150px 30% 0 30%; */
/* display: flex; */
/* flex-direction: column; */
position: absolute;
top: 10%;
left: 5%;
}
.detail-div {
background-color: #fff;
display: flex;
flex-direction: column;
padding: 30px 10px 0 10px;
margin: 40px;
min-height: 80%;
}
.detail-title {
text-align: center;
font-size: 20px;
}
.detail-small {
font-size: 12px;
}
.inner-content {
font-size: 16px;
}
.inner-content * {
max-width: 100%; /* 所有子元素最大宽度为100% */
height: auto; /* 自动调整高度以保持宽高比 */
}
.return-div {
position: relative;
/*top: -100px;*/
color: #0c11ed;
/*margin-right: 20%;*/
text-align: center;
margin-top: 10px;
}
.return-div:hover {
/* 在鼠标悬停状态下的样式 */
cursor: pointer;
}
.detail-icon {
top: 10px;
transform: translateX(45%);
/* left: 30%; */
z-index: 99;
}
.qrcode {
position: absolute;
right: 20%;
max-width: 30%;
padding: 0px;
margin: 0px !important;
}
.article {
width: 100%;
top: 0;
position: absolute;
}
/* 版权信息 */
#copyright_main {
color: #ffffff;
margin-top: 10px;
position: fixed;
bottom: 10px;
}
#copyright_main a {
text-decoration: none; /* 去除下划线 */
color: #ffffff;
}
#copyright_main a:hover {
text-decoration: underline; /* 鼠标悬停时显示下划线 */
}
.card-img-top {
width: 100%;
}
.card-body {
height: 100px;
align-items: center;
display: flex;
justify-content: center;
padding: 0;
}
#msgDiv {
text-align: center;
padding-left: 5%;
padding-right: 5%;
}
.nameTd {
width: 35%;
padding: 10px;
font-size: 18px;
}
.inputTd {
width: 80%;
height: 80px;
}
.input-text {
width: 100%;
height: 40px;
border-radius: 5px;
}
.submit-btn {
height: 40px;
width: 200px;
font-size: 20px;
background-color: #ff0d3a;
color: white;
line-height: 25px;
border-radius: 50px;
}
.msg-title{
font-size: 30px;
}
.txt{
}
.nvg-gan{
position: absolute;
transform: translateX(-50%) translateY(-50%);
top: 50%;
left: 87%;
}
.icon-nvg {
position: absolute;
transform: translateX(-50%);
/* border: 0px; */
width: 60px;
left: 50%;
}
.nvg-title{
position: absolute;
left: 0;
width: 100%;
text-align: center;
font-size: 16px;
color: #ffffff;
top: 50%;
transform: translateY(-50%);
}
#icon-b1{
top:-32px;
}
#icon-b2{
top:93px;
}
#icon-b3{
top:218px;
}
#icon-b4{
top:343px;
}
#icon-b5{
top:468px;
}
.no-text{
left: 50%;
position: absolute;
transform: translateX(-50%);
}
.kindcss{
min-width: 600px;
width: 40%;
/* margin: 5% 30% 0 30%; */
position: absolute;
left: 30%;
top:10%;
height: 90%;
}
.down-menu{
align-self: flex-start;
width: 100%;
padding: 10px;
margin: 0px;
font-size: 12px;
}
.canvasDiv{
width: 80%;
height:80%;
}
#textOverlay{
display: none;
position: absolute;
width: 300px;
height: auto;
font: 16px / 1.5 normal;
background-color: rgb(255, 255, 255, 0.15);
border-radius: 20px;
text-align: left;
vertical-align: top;
color: white;
padding: 20px;
}
.zhu-img{
/*width: 91px;*/
/*height: 59px;*/
width: 100%;
}
.intro{
font-size: 16px;
line-height: 25px;
text-indent: 2em;
padding: 0px 10px 0px 10px;
}
.iprDiv {
width: 90%;
height: 80%;
position: relative;
left: 50%;
top: 20px;
/* height: 90%; */
transform: translateX(-50%);
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.ipr-col {
flex: 0 0 33%;
align-self: flex-start;
display: flex;
justify-content: center;
max-width: 33%;
}
.icon-ipr {
position: absolute;
transform: translateX(-50%) translateY(-50%);
border: 0px;
width: 25%;
}
.zhu-img-ipr{
width: 183px;
}
.icon-ipr::after {
/* bottom: 0; */
position: absolute;
left: 0;
width: 100%;
text-align: center;
font-size: 16px;
color: #ffffff;
top: 50%;
transform: translateY(-50%);
/*text-shadow: 2px 2px 0px #5a5a5a;*/
}
#icon-ipr::after {
content: "知识产权";
/* white-space: pre; 设置 white-space 属性为 pre，保留换行符 */
}
}
/*横屏*/
@media screen and (orientation: landscape) {
body{
display: inline-grid;
/*place-items: center;*/
}
.main{
min-width: 600px;
width: 30%;
/* margin: 15% 52% 0% 18%; */
height: 85vh;
position: absolute;
left: 18%;
/* top: 15%;*/
}
.logo{
position: absolute;
left: 40px;
top: 40px;
z-index: 99;
}
.logo-img{
width: 180px;
}
.container {
position: relative;
width: 100%;
height: 100%;
/* border: 1px solid black; */
}
.clock{
top:50%;
transform: translateY(-50%);
}
.icon {
position: absolute;
transform: translateX(-50%);
border: 0px;
}
.icon-l{
left: 15%;
}
.icon-m{
left: 50%;
}
.icon-r{
right: 15%;
transform: translateX(50%);
}
.text-wrapper {
flex-wrap: nowrap;
}
.text-part {
white-space: nowrap;
}
.footer{
position: fixed;
left: 50%;
transform: translateX(-50%);
bottom: 10px;
font-size: 16px;
font-size: 16px;
color: #ffffff;
}
.footer a {
text-decoration: none; /* 去除下划线 */
color: #ffffff;
}
.footer a:hover {
text-decoration: underline; /* 鼠标悬停时显示下划线 */
}
.icon-gan{
position: absolute;
transform: translateX(-50%);
top: 170px;
}
#icon-gl{
left: 15%;
}
#icon-gm{
left: 50%;
}
#icon-gr{
right: 15%;
}
#icon-gr{
transform: translateX(50%);
}
#icon2{
background-color: red;
}
img{
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.3));;
}
.icon-hover:hover {
/* 在鼠标悬停状态下的样式 */
opacity: 0.8; /* 例如添加透明度 */
cursor: pointer;
}
.canvas{
position: absolute;
}
.icon::after {
/* bottom: 0; */
position: absolute;
left: 0;
width: 100%;
text-align: center;
font-size: 24px;
color: #ffffff;
top: 50%;
transform: translateY(-50%);
/*text-shadow: 2px 2px 0px #5a5a5a;*/
}
#icon-l1::after {
content: "以新谋质";
/* white-space: pre; 设置 white-space 属性为 pre，保留换行符 */
}
#icon-l2::after {
content: "公司动态";
}
#icon-l3::after {
content: "合作伙伴";
}
#icon-m1::after {
content: "产品介绍";
}
#icon-m2::after {
content: "解决方案";
}
#icon-m3::after {
content: "服务案例";
}
#icon-r1::after {
content: "联系我们";
}
#icon-r2::after {
content: "资料下载";
}
/*page*/
.page{
min-width: 1024px;
width: 50%;
/* margin: 5% 30% 0 30%; */
position: absolute;
left: 50%;
top:10%;
height: 90%;
transform: translateX(-40%);
}
.text-font{
font-family: inherit;
font-weight: 500;
line-height: 1.2;
color: black;
}
.col-md-4{
margin-bottom: 40px;
align-self: flex-start;
display: flex;
justify-content: center;
flex: 0 0 25%;
max-width: 25%;
}
.row{
position: relative;
/* margin-top: 180px; */
/* background-color: white; */
padding-top: 180px;
margin-left: 0px;
margin-right: 20%;
background-color: rgb(255, 255, 255, 0.15);
border-radius: 1.5rem;
padding-bottom: 150px;
min-height: 94%;
display: flex;
}
.para{
text-align: left;
text-indent: 2em;
}
.nvgDiv{
background-color: white;
opacity: 0.15;
color: white;
width: 100%;
/* background-color: rgb(255, 255, 255, 0.35); */
top: -100px;
position: relative;
}
.nvg-text{
text-decoration: none; /* 禁用下划线 */
cursor: default; /* 禁用鼠标悬停时的指针样式 */
}
.detail-page{
min-width: 600px;
width: 40%;
margin: 150px 30% 0 30%;
position: absolute;
/* left: 30%;
top: 10%;
height: 90%; */
display: flex;
flex-direction: column;
}
.detail-div{
background-color: #fff;
display: flex;
flex-direction: column;
padding: 80px;
margin: 40px;
min-height: 980px;
}
.detail-title{
text-align: center;
}
.detail-small{
}
.return-div{
position: relative;
color: #0c11ed;
text-align: center;
margin-top: 10px;
}
.return-div:hover {
/* 在鼠标悬停状态下的样式 */
cursor: pointer;
}
.detail-icon{
/*top: 120px;*/
transform: translateX(20%);
/*left: 30%;*/
z-index: 99;
}
.article{
width: 100%;
top: 0;
position: absolute;
}
.qrcode{
position: absolute;
right: 20%;
}
/* 版权信息 */
#copyright_main {
color:#ffffff;
margin-top:10px;
position: fixed;
bottom:10px;
}
#copyright_main a {
text-decoration: none; /* 去除下划线 */
color: #ffffff;
}
#copyright_main a:hover {
text-decoration: underline; /* 鼠标悬停时显示下划线 */
}
.card-img-top{
width: 302px;
height: 192px;
}
.card-img-ipr{
width: 148px;
height: 200px;
}
.card-body{
height: 152px;
align-items: center;
display: flex;
justify-content: center;
}
#msgDiv{
text-align: center;
padding-left: 10%;
padding-right: 10%;
}
.nameTd{
width: 15%;
padding: 10px;
font-size: 24px;
}
.inputTd{
width: 80%;
height: 100px;
}
.input-text{
width: 100%;
height: 80px;
border-radius: 5px;
}
.submit-btn {
height: 80px;
width: 50%;
font-size: 26px;
background-color: #ff0d3a;
color: white;
line-height: 25px;
border-radius: 50px;
}
.txt{
}
.msg-title{
font-size: 42px;
}
.nvg-gan{
position: absolute;
transform: translateX(-50%) translateY(-50%);
top: 50%;
left: 90%;
}
.icon-nvg {
position: absolute;
transform: translateX(-50%);
/* border: 0px; */
width: 100px;
left: 50%;
}
.nvg-title{
position: absolute;
left: 0;
width: 100%;
text-align: center;
font-size: 24px;
color: #ffffff;
top: 50%;
transform: translateY(-50%);
}
#icon-b1{
top:-32px;
}
#icon-b2{
top:93px;
}
#icon-b3{
top:218px;
}
#icon-b4{
top:343px;
}
#icon-b5{
top:468px;
}
.no-text{
left: 50%;
position: absolute;
transform: translateX(-50%);
}
.kindcss{
min-width: 600px;
width: 40%;
/* margin: 5% 30% 0 30%; */
position: absolute;
left: 30%;
top:10%;
height: 90%;
}
.down-menu{
align-self: flex-start;
width: 100%;
padding: 40px;
}
.canvasDiv{
width: 80%;
height:80%;
}
.iprDiv {
width: 80%;
height: 80%;
min-width: 1024px;
position: absolute;
left: 50%;
top: 10%;
/* height: 90%; */
transform: translateX(-50%);
display: flex;
flex-wrap: wrap;
align-content: flex-start;
}
.ipr-col {
flex: 0 0 8%;
align-self: flex-start;
display: flex;
justify-content: center;
max-width: 8%;
}
#textOverlay{
display: none;
position: absolute;
width: 300px;
height: 300px;
font: 20px / 1.5 normal;
background-color: rgb(255, 255, 255, 0.15);
border-radius: 20px;
text-align: left;
vertical-align: top;
color: white;
}
.zhu-img-ipr{
width: 183px;
height: 118px;
}
.icon-ipr {
position: absolute;
transform: translateX(-50%) translateY(-50%);
border: 0px;
}
.icon-ipr::after {
/* bottom: 0; */
position: absolute;
left: 0;
width: 100%;
text-align: center;
font-size: 24px;
color: #ffffff;
top: 50%;
transform: translateY(-50%);
/*text-shadow: 2px 2px 0px #5a5a5a;*/
}
#icon-ipr::after {
content: "知识产权";
/* white-space: pre; 设置 white-space 属性为 pre，保留换行符 */
}
.zhu-img{
width: 183px;
height: 118px;
}
.intro{
font-size: 26px;
line-height: 50px;
text-indent: 2em;
padding: 0px 50px 0px 50px;
}
}