|
|
@ -60,44 +60,57 @@ |
|
|
|
width: 100%; |
|
|
|
margin: 0 auto; |
|
|
|
.menu { |
|
|
|
position: relative; |
|
|
|
|
|
|
|
.menu-list { |
|
|
|
position: absolute; |
|
|
|
top: 115px; |
|
|
|
top: 50px; |
|
|
|
width: 100%; |
|
|
|
left: 0; |
|
|
|
|
|
|
|
.menu-item { |
|
|
|
position: relative; |
|
|
|
left: 70px; |
|
|
|
margin-bottom: 30px; |
|
|
|
margin-bottom: 40px; |
|
|
|
width: 150px; |
|
|
|
height: 60px; |
|
|
|
line-height: 60px; |
|
|
|
color: #fff; |
|
|
|
height: 70px; |
|
|
|
line-height: 70px; |
|
|
|
color: rgba(#fff, 0.6); |
|
|
|
font-size: 20px; |
|
|
|
background: linelinear-gradient(left, rgba(#00a, 0.5), rgba(#00a, 0)); |
|
|
|
background: linear-gradient(to left, rgba(rgb(67, 67, 210), 0.3), rgba(#00a, 0)); |
|
|
|
border-radius: 60px; |
|
|
|
text-align: center; |
|
|
|
box-shadow: -3px 3px 5px 1px inset rgba(#fff, 0.3); |
|
|
|
box-shadow: -4px 4px 4px 1px inset rgba(#fff, 0.2); |
|
|
|
transition: all 0.2s ease; |
|
|
|
|
|
|
|
&:nth-child(2), |
|
|
|
&:nth-child(6) { |
|
|
|
margin-left: 15px; |
|
|
|
margin-left: 20px; |
|
|
|
} |
|
|
|
&:nth-child(3), |
|
|
|
&:nth-child(5) { |
|
|
|
margin-left: 15px * 2; |
|
|
|
margin-left: 20px * 2; |
|
|
|
} |
|
|
|
&:nth-child(4) { |
|
|
|
margin-left: 15px * 3; |
|
|
|
margin-left: 20px * 2 + 1px; |
|
|
|
} |
|
|
|
&:hover, |
|
|
|
&.z-on { |
|
|
|
transform: scale(1.2); |
|
|
|
color: rgba(#fff, 0.95); |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
.arrow { |
|
|
|
margin: 0 20px; |
|
|
|
} |
|
|
|
|
|
|
|
.item { |
|
|
|
position: relative; |
|
|
|
width: 420px; |
|
|
|
margin: 0 20px; |
|
|
|
max-width: 612px; |
|
|
|
text-align: center; |
|
|
|
cursor: pointer; |
|
|
|