163 lines
10 KiB
CSS
163 lines
10 KiB
CSS
header {
|
|
--primary: #3366FF;
|
|
--dot-size: 6px;
|
|
--max-length: 0;
|
|
--second-dept-height: 66px;
|
|
--header-log-img: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAGgAAABFCAYAAACmLqNJAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAABHkSURBVHgB7TxdbxtXducOKVH2tgiFfeqTxgUKJG0S0SnQ2FkUpoE+pE22puwmsOUEohbtY2HpF4j6BbLQlwVaQFQdR0azNiUUxaZoAdEobC0KbE3HRmugDxr1pdh9Mb3YXUsiec+ec79mhhx+yNYaye4cmOJ83Hvuuef7nBkaIIUUUkghhRRSSCGFFFJIIYUUUkghhRRSSCGFFFJIIYXfZBD8p1DG/MTEfl5f2o8N+NH3JwMYEQrl3TxNzyfda9w6FcCIUCg9yMMY+JCBgpRySl+VhmJseqLzEPYnGo3N081Rcb5e+qGffGcfRoUnmzPBsDGF4lqeOJnvWYP+TexPNBv1+ZFpZlACeud7PyuDEGuAqP6B+ifpEgqJWGlUv708CrLC3P+tgcSyns+4EBkHn4sOFh9s/MHdgfMvPygiZJZAyGmaPMkohJCC0Ch8Cq/6IxVOul6n29Wvbp9dH4iXhNPxsrt6bx3Bm7a0KdxK+HxIdDJuvaDQ6+kP3/QAzz/6548H7uHND/+xRkpVUvSKCN28Nspn4wdjp44iJM8eGB4YhkohPEbPBMO1QvlpfhiiQvn/fdpn2aLjiRqX0FeyA+Ze/h9/+sqjbRSZbVq1SHSY9YxwgHFptPoj0Fwrgierb1+6t1so7fj9V5jQOBRZQiuhEJqH+o4SiKfoVafmO4pDwFAelNZ8KfGCEoYSiaETDO0C8ge51hwcAbzwUOHU2q43oU8BJwHa14ZiwtaSQaInMnFaV83VZAmxcMhOt2lkMYbOCcZtD4xgCDdrubtI66Avx9rbhdK2n7iIdWOCERD3NV0RIWg60WikOmdOGAbrbxQtGAyHh1AUQq0i1HeEQMVUjboERwAnIJ5tmQFxbeXThUFW5KzHEqU3BDGXCe0+FOC2YAarcUJNEI5t1ts4V6E5KYSjkdXU8NeXGY+FNMDaGbdSQrtTVF4DjKUza6W5qV2f0TANYzAYhMgs6f0KY0SGpY5+Nk0svvEX/zAFI0Lo4ux2UftiMD5K3xL5QVbkgVxSlBitd9qiDo2mJsinMPu4TNbga98fGQvGpYVnxqFrzUcEtxDoMGIMDPx21kukE0OjhMh0XuYZHQS0dkArBOTm9ug2nYuAr9OkPXWN7g+yoDc/vFGkL99ZJmmetkLLFb5sYqfslGFEyMYYohSJ/b6zABcodSzaXW1UT8UCHFuPlO0yWKEay2ETV3iU0vRb3lviAM3Cxa5BmgZZB8ysE5MCJWGPFQVKtErZcNsFcx2GmeNygaxotbF5Pkan8bmaHsnfUgcjAbXHtQ++By8JRO+c9Tg66TBunuO5SxY0JR7KBTpYHgVvLDDYTVpJd5FAsejktR7EKJfULBd9Y2D4Aj34yHoKNNoP3ZrJqFTwljxz+atbf5y0ia23Ptq5SwjXwLg3Z7gqxkC+nYUCnda7SEGTjYGOD8ZbIg6P/kOAkoN8uy1LUhqFcVuVrPcNWqXAB1LvkwnNv/7+3xWffPm39WG4QxcnrS82m0GbOUW2qGLRrvPxbD20wbLy3RgRgbD+BJ1u966cPWe8tQAIsz2t1KL+1a3TfTXs0Rdnq7TVuh5v3Z9xfci1gXchPmMCVFat19HDTD4g4eXh8DBTIvR5i99+mEYyn83IvkI+IHuP4RB1cUYcMprj2LvGlYjXvKgVkfVEHJsbF42sOjbJXi1F9tcux3OrK7+IelMDQbZWwcsUVcZkTAiFdckadwj7HMDtuuDits6n86+Xav6w5QYVqVSTzIWBG0wuoBxDNZvztloH7YrOPXRAYpZQFVP0iyv5oL44sCaKuzil6WxUmqEuqjqms7pKtqJV0so8MaYYetdQpBizF329J0eQWLB5hRGisgYqBskARAOGQGZsrCE70mXFIamKgEJ8NNdBLTB5YVic6BhbyuLYBV20SsMDaS0bNOPlHo0+lUTH66UNH1rtohA6wdIBTi2w++TL+XU+euP9v69zGaFTfO3KefmTE+O9IaMLIlmcUHFEIYgNwchf3pOnrIgyNw7UvhGes76uqQ5VNtu7skRTyaLZnFobISuyAQyBxq2zQTKJrGNdWzB1EEZLHcMkcIZk665IcQ0urvWFTIu9iK2nUdjaiVDcdWOMEKIhROsRFmEIhHWQsD7cEG2oA5VuWkDT/pHXOGsJawlbmvBYdNMjxRm020mLo3CjjVsQ4igxmxkjwuTeXIM+gV+4EoeX9cK0issfV69hyAvo9gaJUIyWB3YfrRas2kuPv/wbikXwVHe/hOnWKA6c42RhEPKwk4BGe7R6iUigu04Xmm4vOhOZ5BhiizG9EQxoVjWifTYWq6OePoLhSGS0yeD4YLQGpk1ETHphim1ITOsRQ9Wx+wwlZCp/W3xhNCbzYC9x/bc+vFHiLgaAS6isrjT+99/mG/H1xarzUGj3rVqNF2AARPgWuhktHKmLE+oeE8LrdLFiE1MImybGfBSCCrjgbNMMjGYQ3dDUtZJNEtgaJLcAOV5xDNmDAVD46F5BOuUw+SAaW3QKFYKwmaUrHN3fMLgbH2joArN/0S/Xo+7dXJeJWX3Lv/Hna9seGSk1Tg1vcUrYJMrhV+dzlCws90sWsvFNmAAmbHkgVe7TgSyZ62FF1ylaQ131r1alQtKTW9DmKj7m4voJB6RHVTtGCk0VOgTXCuRDlYC2YDAULDMh2lfTQSZhs6bHKEymaN0ZYvXx1nePXKgWKDlotblrbbCbvRjV9AnvFKDNMLWiohJWNMFV1pT/1vgYW9F60jpdtmvaWs4oBAmHAnJ1sklXqrZ14RYRJg+QWOUOg9YzWwdYlMYNdvk4qqYf2lRXnQsTafVeyjAEaNg1s0GwRaj5sALVe8ajlV20HGFRHSnoOTg8lMUu7RM2+JsVXeFtXXe4lI2FmnjJtWQfiPfidE2vg6PxGuHQzjI4HQwXUIlBW66HyEzhGds29ubZMlPXiaPW/i5D89++8uMV6ANvf7xToQxwOkI62OJaH2G9e44Ig4pTCr6cHF1GACGWbLfJWLLN0sJUyy7nHI9Jplys1bfp1jmuiZKWUXrNmu/pnZkAZnpjGDK6Uf294J3yT6oU2+d0yNCtVPKy1djTUuvWXGfSFLldFtS49UZQuPq4Tkuc01pvtM2m6hIWpi//uESlySY9QQ3oid8zKb1p7gZTrCroPq6znEi8E8Gj2vm7PTt1kceanK5Z4AXgzQ83mAbfbdnEUgHW3UbkYyOc8UqIYTULkRxpYjybWBMptsW1yCUYGK6gQYJcJmLKOrQaRfHavb4zKfYkPW0QyARtQ5hxQDQZIuFM0d9rUu3ZE1ZZ1T0M3ZpbTtdVlYSVYslANCce1MrtBzRnDqx3VXolXRykiwvktMJOiF2RojktVRCd9qYOVhH3rPad3EDt85wz1MpM5CpbEQAM1jpnuaY/ZickrNT47K16YfbRJsXOC1H3o9Ne5pw0fW7LXs1ONJZjkxoTEDkLfPjoTnE9iSwRqmzkcUWXto8KSE9NTYtJUxTm9nRp68kP/3qvz8y9P3r/++Q1ZDHs9NuYSA3UP1spPvn3xXp0QiQGOYNB01VQ0IEjguW0qTVsJd7u87wOxtvzpIEP3blJdV2hGCHNKaPL/AS6xEbKh22JMzCYtJ6uAEo8kpv7w+/eLNOEyVARXeuVad6k9k4waL7EjrEujFkyo/C8TM+zrMgTVeFqABH6t5gFjQTdrtH4pGwfW21UTzcfbkyfptEVk6cKW9Dp+fFa1tFrxggtqus/l3j+yeb5APqRFSEoZjlHTBM8zMxJDJv3wpa3OqRVh83PnThcp/FPYy0kFZhUL7DYnSxEXxpxLgmxJxMZkXqFyW3F9qfUaXvw1K9uTS8fAv4+dUvJh9MzFEeDTfK6yRG7xKiK12pPPvrBucWg6wFdEqCphYSLRIxz9AcOXPsQjqIQ5vGX66mpR1i7//2vc8NqN2hsLjZp5fX4blxrKZ8bw7nonRfKYl4F+KUH+d89gdPsG6md77OzJXfU7IjO3i9bJ4PgCO/EpZBCCimkkEIKKaSQwquFr1WafeOLnSIVtOfaHXz46V+9txm9RnVCMHsx/BXDzdq9gteWeZn1mldnvjP0JZNvKqjS8uad+5sbd3Z2b9V+NPwl+QGwVnuQX1t7MPSXEP3ACKKSzYSPge016HpG5IG3gpnsNn2/FM1fd1ACoieZr1EZy1XyCzP389r9Wg73n+Zeez4NrwCowbpO5XyFrG1o9f5NhiwcF6AowCuEq5fOVuG3APoKaKO2s8TfV2bOLtNxkfpO9EgA8/TdJGE0Zi++u27G+fTFb1bm9YsboqzGJ8QMkF7J8/gZj4KAPuuEP4Ajws3bO2WLJxqvDD2OVj5neunYtYVkS25d/VjHLHbJJ+BgjjxHwY1tt7aufPSn9Qg+n/cn6d7VmTOr5ClK1Ie7YMcjdNaTYmAiHb24Y2MIb4No2YrypK+AjN8Hw+xi2PXXD8k+u31/8pNL7/ErWb4ea54TCv7lgTqsg3kR4vPb9xdIqCvmnYYoVG784P5MlMGjADUrV/hdaLWBjOogq/kkuArhJ8WSxDgv4DeSaEGf3bebm6Xr1LNkxiPub8vIPbXHTHbh5hf3lq9+9J2KuWj2J5uf39mhfXAoCMcL8Baie2ChT8B+Lc4zh7sE5g3VkNZwjDlauPlP92asEg3ttZuOdJGsQfCHGH1dMwmUhe3DRIO4VARtEfxS5wKfHxzAPJ8rDRRiRd8P8XggiFhskiWsHTWxkLmJgqXDAjPG0nRwIE7PXjxzenbm7Hla6xRxsa520ZanrVWTgGtgmH/wbGKSaSKaT/E7bSLjLd344j+KUfyk3XkaW6ekpODGClRCyXjCJSoknBUtHL1fh5u+OxIXLU8MrTGeSFT3fVKimsU3VEC5XK48e/G9u45QD1ctwbf/5b+m5mdON2f/8k/cfYnQ4PP5K9pMrTsghm5G8Vy+eGaL3/xnPNnf+fmR4tcnH7yzR3TEutnj0PLNYWDXdjTbn6KMZc7x183af9J6yq0FFMuW5+d1Z1zNk3KZjzPeWM8LhTR2/vLFdx+6sR33qpTPf1hJSDhlfQkV3xxu+rZWRnZ3TbNEXI/yRHkkrUw+85avHV+S0Aesf2eGbnRpJZiNZTLZKXhJ8KDT1M43MRP1FQ2ohSo6bZ/f82IL7qaJrGdK/Y7HG57RioxoRl02WU/BnkYZ3zOPeMLj+GFoAk+Uozs42Pfpa+/XLiC3KPvxTLaXkmMCDqyf13bq9CytSDGvRkxQ6bcEz9dajU1yfYpp9Hgsrx+UiwLXUnE6j5GoIUCKcH0YT16BBVHWp190qOBErpo0pvVT8QyOARDkIjF+m2JeCVWMc62SOrZxcf7KewGfSM8LMjq2NiielY6RpsAecFy17q2XTsMTIRZwfHxz0PrHLiCvy8XQc9AtMuUFzu4OfypW+xF9HCAwswZqfQ68/V1MmxKbDDxvKgv65S9OfRpJfV8GlBXfuc9487n8c04CFpPGUeCvS/6tLWLp6gfvrA7CeWwCIgHU2ZWQS7lOWQr5WJGfnTmz+OnM2Tq7HlKYYu61/QcbfBxqmg96YyrjE6quQDb9Eo0L6Gn3XSnlHv+vGhzLuDZrdzyqe97tk5abeCd0LeZo03hdfcGJDZUJyxSGVij+bVNtw8mKSmuZbo4R4+O58iVKRuCoICl79aBG5rFA7bOCyyAZL2LhysWz559Dbj0HB2VWJErdd0ElSy7p8VGK5uylM0q4L/zmazfs76uX7gKwdQNSum3gACZmbFrMQlTuTn/KMvLOxvN9FTcCk9JWMhmYOvRObkavZTOyfyspeY0K+3r63o2mzpwxIcp5RTOSSzRjmW769n/2gm53ljI1ixf5V3UxvFoIrCAHBzhD16vK4vWahl4sRTPUY+9mq44BwWHzZJDkzj6j9NGjLEpmsgH72aQxjAPHTzz9JKLBSdeSYG1jx899KxPPCluSf8fDbrZqrTU2h+JF7tut6UE0vQiMijfKk+79fW3f6nkRYBeI1PoR2GlSGzzgaxJknjveKpMjC7Ou45sCryzNfhWghOAJasVkw/cSOW3Rh8HBIa7CNwx+owRE7ZfzJ3JiGoT0EYRpQGJTdTcGZHUppJBCCimkkEIv/AoXlH2llriEBwAAAABJRU5ErkJggg==');
|
|
display: block;
|
|
width: 100%;
|
|
position: fixed;
|
|
z-index: 10;
|
|
background-color: #ffffffff;
|
|
|
|
|
|
|
|
&[open="false"] {
|
|
height: 88px;
|
|
box-shadow: 0px 4px 15px 0px #0000001A;
|
|
transition: height ease 0.4s;
|
|
|
|
>div {
|
|
box-shadow: 0 1px 0 0 #dfdfdf00;
|
|
transition: box-shadow ease 0.3s;
|
|
transition-delay: 0.3s;
|
|
}
|
|
}
|
|
|
|
&[open="true"] {
|
|
height: calc(88px + var(--second-dept-height) * var(--max-length));
|
|
box-shadow: 0px 4px 15px 0px #0000001A;
|
|
transition: height ease 0.3s;
|
|
|
|
>div {
|
|
box-shadow: 0 1px 0 0 #DFDFDF;
|
|
}
|
|
}
|
|
|
|
>div {
|
|
height: 88px;
|
|
|
|
container {
|
|
width: 1400px;
|
|
|
|
logo {
|
|
width: 104px;
|
|
height: 69px;
|
|
background-image: var(--header-log-img);
|
|
background-position: center center;
|
|
}
|
|
|
|
.menu-first-depth {
|
|
|
|
>div {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
|
|
&:hover {
|
|
|
|
&:before {
|
|
content: "";
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 50px;
|
|
bottom: -45px;
|
|
left: 0;
|
|
|
|
}
|
|
}
|
|
|
|
|
|
a {
|
|
font-size: 1.25em;
|
|
font-weight: 500;
|
|
line-height: 1.193em;
|
|
text-decoration: none;
|
|
position: relative;
|
|
|
|
&[data-current] {
|
|
font-size: 1.5em;
|
|
font-weight: 700;
|
|
line-height: 1.193em;
|
|
|
|
&:before {
|
|
content: '';
|
|
display: block;
|
|
border-radius: var(--dot-size);
|
|
background-color: var(--primary);
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
z-index: 1;
|
|
transform: translate(5px, -5px);
|
|
}
|
|
|
|
&[data-current="true"] {
|
|
color: var(--primary);
|
|
|
|
&:before {
|
|
width: var(--dot-size);
|
|
height: var(--dot-size);
|
|
transition: ease all 0.3s;
|
|
}
|
|
|
|
}
|
|
|
|
&[data-current="false"] {
|
|
&:before {
|
|
width: 0;
|
|
height: 0;
|
|
transition: ease all 0.3s;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.menu-second-depth {
|
|
position: absolute;
|
|
top: calc(88px + 24px);
|
|
display: flex;
|
|
align-items: center;
|
|
height: 0;
|
|
overflow: hidden;
|
|
transition: ease all 0.3s;
|
|
|
|
&[open="true"] {
|
|
height: calc(60px * var(--max-length));
|
|
}
|
|
|
|
&[open="false"] {
|
|
height: 0;
|
|
}
|
|
|
|
|
|
a {
|
|
width: max-content;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
|
|
.menu-second-depth {
|
|
height: 120px;
|
|
transition: ease all 0.3s;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
.search-header {
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
|
|
} |