|
0
|
1 body {
|
|
|
2 min-height: 100vh;
|
|
|
3 margin: 0;
|
|
|
4 font-size: 1rem;
|
|
|
5 font-family: var(--sans-serif);
|
|
|
6 font-weight: 400;
|
|
|
7 color: #111111;
|
|
|
8 text-align: left;
|
|
|
9 background-color: #f7f7f7;
|
|
|
10 }
|
|
|
11
|
|
|
12 :root {
|
|
|
13 --sans-serif: system-ui, sans-serif;
|
|
|
14 --monospace: "consolas", monospace;
|
|
|
15 }
|
|
|
16 :root {
|
|
|
17 scroll-behavior: smooth
|
|
|
18 }
|
|
|
19
|
|
|
20 *,
|
|
|
21 *::before,
|
|
|
22 *::after {
|
|
|
23 box-sizing: border-box;
|
|
|
24 }
|
|
|
25
|
|
|
26 img, video {
|
|
|
27 max-width: 100%;
|
|
|
28 display: block;
|
|
|
29 height: auto;
|
|
|
30 }
|
|
|
31
|
|
|
32 /* Template Mini */
|
|
|
33 body {
|
|
|
34 display: grid;
|
|
|
35 grid-template-areas:
|
|
|
36 "header"
|
|
|
37 "nav"
|
|
|
38 "main"
|
|
|
39 "footer";
|
|
|
40 grid-template-rows: 3.7rem auto 1fr auto;
|
|
|
41 }
|
|
|
42
|
|
|
43 header {
|
|
|
44 grid-area: header;
|
|
|
45 display: grid;
|
|
|
46 grid-template-columns: 1fr minmax(auto,80rem) 1fr;
|
|
|
47 min-width: 100%;
|
|
|
48 background-color: #ffffff;
|
|
|
49 position: fixed;
|
|
|
50 left: 0;
|
|
|
51 right: 0;
|
|
|
52 z-index: 999;
|
|
|
53 box-shadow: 0 2px 6px 0 #0000001f, inset 0 -1px 0 0 #dadce0;
|
|
|
54 }
|
|
|
55 @media (max-width: 767px) {
|
|
|
56 header {
|
|
|
57 column-gap: 0;
|
|
|
58 }
|
|
|
59 }
|
|
|
60 @media (min-width: 768px) {
|
|
|
61 header {
|
|
|
62 column-gap: 0.5rem;
|
|
|
63 }
|
|
|
64 }
|
|
|
65
|
|
|
66 .header-content {
|
|
|
67 grid-column: 2/3;
|
|
|
68 display: grid;
|
|
|
69 grid-auto-flow: column;
|
|
|
70 justify-content: space-between;
|
|
|
71 position: relative;
|
|
|
72 }
|
|
|
73 .lrtop {
|
|
|
74 display: grid;
|
|
|
75 align-items: center;
|
|
|
76 }
|
|
|
77 .logo {
|
|
|
78 position: absolute;
|
|
|
79 left: 50%;
|
|
|
80 top: 50%;
|
|
|
81 transform: translate(-50%, -50%);
|
|
|
82 }
|
|
|
83 .logo a {
|
|
|
84 text-decoration: none;
|
|
|
85 color: #222222;
|
|
|
86 font-size: 1.2rem;
|
|
|
87 line-height: 1;
|
|
|
88 font-family: var(--monospace);
|
|
|
89 }
|
|
|
90
|
|
|
91
|
|
|
92
|
|
|
93 /* Icon */
|
|
|
94 .icons-container {
|
|
|
95 display: grid;
|
|
|
96 grid-auto-flow: column;
|
|
|
97 justify-content: left;
|
|
|
98 align-items: center;
|
|
|
99 position: relative;
|
|
|
100 color: #111111;
|
|
|
101 }
|
|
|
102 @media (max-width: 767px) {
|
|
|
103 .icons-container {
|
|
|
104 margin-right: 0.3rem;
|
|
|
105 }
|
|
|
106 }
|
|
|
107
|
|
|
108 .icon-box {
|
|
|
109 position: relative;
|
|
|
110 }
|
|
|
111 @media (max-width: 374px) {
|
|
|
112 .icon-box {
|
|
|
113 width: 37px;
|
|
|
114 height: 37px;
|
|
|
115 }
|
|
|
116 }
|
|
|
117 @media (min-width: 375px) {
|
|
|
118 .icon-box {
|
|
|
119 width: 44px;
|
|
|
120 height: 44px;
|
|
|
121 }
|
|
|
122 }
|
|
|
123
|
|
|
124 .icon-box a {
|
|
|
125 position: absolute;
|
|
|
126 left: 0;
|
|
|
127 right: 0;
|
|
|
128 top: 0;
|
|
|
129 bottom: 0;
|
|
|
130 padding: 0.3125rem;
|
|
|
131 z-index: 7;
|
|
|
132 }
|
|
|
133 .icon-box a:hover {
|
|
|
134 background-color: #eaeaea;
|
|
|
135 border-radius: 50%;
|
|
|
136 color: green;
|
|
|
137 }
|
|
|
138
|
|
|
139
|
|
|
140 /*Icon Phone*/
|
|
|
141 .phone-number-container {
|
|
|
142 position: relative;
|
|
|
143 color: #111111;
|
|
|
144 height: 2.75rem;
|
|
|
145 }
|
|
|
146
|
|
|
147 .phone-number-container a {
|
|
|
148 padding: 0 3.5625rem 0 1rem;
|
|
|
149 height: 2.75rem;
|
|
|
150 margin-right: -2.75rem;
|
|
|
151 position: relative;
|
|
|
152 z-index: 10;
|
|
|
153 font-size: 1rem;
|
|
|
154 text-decoration: none;
|
|
|
155 color: #111111;
|
|
|
156 display: flex;
|
|
|
157 align-items: center;
|
|
|
158 }
|
|
|
159 .phone-number-container a:hover {
|
|
|
160 color: #1a73e8;
|
|
|
161 }
|
|
|
162 .phone-number-container:hover ~ .icon-box {
|
|
|
163 background-color: #f1f1f1;
|
|
|
164 border-radius: 50%;
|
|
|
165 }
|
|
|
166
|
|
|
167 @media (max-width: 768px) {
|
|
|
168 .phone-number-container {
|
|
|
169 display: none;
|
|
|
170 }
|
|
|
171 }
|
|
|
172
|
|
|
173
|
|
|
174 .icon-tg-box {
|
|
|
175 position: relative;
|
|
|
176 }
|
|
|
177 @media (max-width: 374px) {
|
|
|
178 .icon-tg-box {
|
|
|
179 width: 37px;
|
|
|
180 height: 37px;
|
|
|
181 }
|
|
|
182 }
|
|
|
183 @media (min-width: 375px) {
|
|
|
184 .icon-tg-box {
|
|
|
185 width: 44px;
|
|
|
186 height: 44px;
|
|
|
187 }
|
|
|
188 }
|
|
|
189
|
|
|
190 .icon-tg-box a {
|
|
|
191 position: absolute;
|
|
|
192 left: 0;
|
|
|
193 right: 0;
|
|
|
194 top: 0;
|
|
|
195 bottom: 0;
|
|
|
196 padding: 0.3125rem;
|
|
|
197 z-index: 7;
|
|
|
198 }
|
|
|
199 .icon-tg-box a:hover {
|
|
|
200 background-color: #dff1ff;
|
|
|
201 border-radius: 50%;
|
|
|
202 }
|
|
|
203
|
|
|
204
|
|
|
205
|
|
|
206
|
|
|
207 .icon-whatsapp-box {
|
|
|
208 position: relative;
|
|
|
209 }
|
|
|
210 @media (max-width: 374px) {
|
|
|
211 .icon-whatsapp-box {
|
|
|
212 width: 37px;
|
|
|
213 height: 37px;
|
|
|
214 }
|
|
|
215 }
|
|
|
216 @media (min-width: 375px) {
|
|
|
217 .icon-whatsapp-box {
|
|
|
218 width: 44px;
|
|
|
219 height: 44px;
|
|
|
220 }
|
|
|
221 }
|
|
|
222
|
|
|
223 .icon-whatsapp-box a {
|
|
|
224 position: absolute;
|
|
|
225 left: 0;
|
|
|
226 right: 0;
|
|
|
227 top: 0;
|
|
|
228 bottom: 0;
|
|
|
229 padding: 0.3125rem;
|
|
|
230 z-index: 7;
|
|
|
231 }
|
|
|
232 .icon-whatsapp-box a:hover {
|
|
|
233 background-color: #e0feff;
|
|
|
234 border-radius: 50%;
|
|
|
235 }
|
|
|
236
|
|
|
237
|
|
|
238 nav {
|
|
|
239 grid-area: nav;
|
|
|
240 display: grid;
|
|
|
241 background-color: #f7f7f7;
|
|
|
242 grid-template-areas: ". gnc .";
|
|
|
243 grid-template-columns: 1fr minmax(auto,80rem) 1fr;
|
|
|
244 }
|
|
|
245 /*Header Container*/
|
|
|
246 nav ul {
|
|
|
247 grid-column: gnc;
|
|
|
248 margin: 0;
|
|
|
249 padding: 0;
|
|
|
250 display: grid;
|
|
|
251 grid-auto-flow: column;
|
|
|
252 justify-content: space-evenly;
|
|
|
253 }
|
|
|
254 nav li {
|
|
|
255 list-style-type: none;
|
|
|
256 }
|
|
|
257 nav li a {
|
|
|
258 display: inline-block;
|
|
|
259 line-height: 0;
|
|
|
260 padding: 24px 10px 24px 10px;
|
|
|
261 font-size: 17px;
|
|
|
262 color: #000000;
|
|
|
263 text-decoration: none;
|
|
|
264 }
|
|
|
265 nav li a:hover {
|
|
|
266 color: #333333;
|
|
|
267 }
|
|
|
268 nav li.active a {
|
|
|
269 color: #1a73e8;
|
|
|
270 }
|
|
|
271 /* Active Mobile Display */
|
|
|
272 @media (max-width: 768px) {
|
|
|
273 nav ul {
|
|
|
274 display: none;
|
|
|
275 }
|
|
|
276 }
|
|
|
277
|
|
|
278
|
|
|
279
|
|
|
280 main {
|
|
|
281 grid-area: main;
|
|
|
282 display: grid;
|
|
|
283 grid-template-columns: 1fr minmax(auto,40rem) 1fr;
|
|
|
284 row-gap: 1.4rem;
|
|
|
285 column-gap: 0.5rem;
|
|
|
286 padding-bottom: 3rem;
|
|
|
287 align-content: start;
|
|
|
288 }
|
|
|
289 main > * {
|
|
|
290 grid-column: 2/3;
|
|
|
291 }
|
|
|
292 main .ignorgap {
|
|
|
293 grid-column: 1/-1;
|
|
|
294 justify-self: center;
|
|
|
295 max-width: 40rem;
|
|
|
296 margin: 0 auto;
|
|
|
297 }
|
|
|
298
|
|
|
299 main .gap {
|
|
|
300 grid-column: 1/-1;
|
|
|
301 justify-self: center;
|
|
|
302 max-width: 40rem;
|
|
|
303 }
|
|
|
304
|
|
|
305 main .banner {
|
|
|
306 max-height: 380px;
|
|
|
307 object-fit: cover;
|
|
|
308 grid-column: 1/-1;
|
|
|
309 justify-self: center;
|
|
|
310 }
|
|
|
311 main h1 {
|
|
|
312 margin: 0;
|
|
|
313 padding: 0;
|
|
|
314 font-weight: 500;
|
|
|
315 line-height: 1;
|
|
|
316 font-size: calc(1.7rem + 0.7vw);
|
|
|
317 position: relative;
|
|
|
318 display: block;
|
|
|
319 }
|
|
|
320 main > h1:first-child {
|
|
|
321 margin-top: 2rem;
|
|
|
322 }
|
|
|
323
|
|
|
324 main h2, main h3, main h4, main h5, main h6 {
|
|
|
325 margin: 0;
|
|
|
326 padding: 0;
|
|
|
327 font-weight: 400;
|
|
|
328 line-height: 1;
|
|
|
329 position: relative;
|
|
|
330 }
|
|
|
331 main p {
|
|
|
332 margin: 0;
|
|
|
333 padding: 0;
|
|
|
334 display: block;
|
|
|
335 line-height: 1.4;
|
|
|
336 }
|
|
|
337 main a {
|
|
|
338 margin: 0;
|
|
|
339 padding: 0;
|
|
|
340 display: inline;
|
|
|
341 line-height: 1.4;
|
|
|
342 color: #007ce7;
|
|
|
343 }
|
|
|
344 main pre {
|
|
|
345 margin: 0;
|
|
|
346 width: 100%;
|
|
|
347 word-break: break-all;
|
|
|
348 line-height: 1.4em;
|
|
|
349 display: block;
|
|
|
350 padding: 0.7rem;
|
|
|
351 background-color: #eaeaea;
|
|
|
352 }
|
|
|
353 main code {
|
|
|
354 background-color: #eaeaea;
|
|
|
355 font-family: var(--monospace);
|
|
|
356 white-space: pre-wrap;
|
|
|
357 }
|
|
|
358 main p code {
|
|
|
359 word-break: break-all;
|
|
|
360 }
|
|
|
361 main code p {
|
|
|
362 padding: 0.3rem 0.7rem 0.3rem 0.7rem;
|
|
|
363 margin: -0.7rem -0.7rem 0.3rem -0.7rem;
|
|
|
364 background-color: lightgrey;
|
|
|
365 }
|
|
|
366
|
|
|
367 main img, main svg, main video, main audio, main source, main blockquote, main figure, main div, main iframe {
|
|
|
368 margin: 0;
|
|
|
369 padding: 0;
|
|
|
370 position: relative;
|
|
|
371 }
|
|
|
372 figcaption {
|
|
|
373 text-align: center;
|
|
|
374 background-color: #0000003d;
|
|
|
375 padding: 0.1rem 0.7rem;
|
|
|
376 }
|
|
|
377 main .wide {
|
|
|
378 grid-column: 1/-1;
|
|
|
379 justify-self: center;
|
|
|
380 }
|
|
|
381
|
|
|
382 main ul {
|
|
|
383 margin: 0;
|
|
|
384 padding: 0 0 0 1.2rem;
|
|
|
385 display: block;
|
|
|
386 line-height: 1.4;
|
|
|
387 }
|
|
|
388 main ol {
|
|
|
389 margin: 0;
|
|
|
390 padding: 0 0 0 1.2rem;
|
|
|
391 display: block;
|
|
|
392 line-height: 1.4;
|
|
|
393 }
|
|
|
394
|
|
|
395 main blockquote {
|
|
|
396 margin: 0;
|
|
|
397 padding: 0.5rem 0.7rem 0.5rem 0.7rem;
|
|
|
398 background-color: #eaeaea;
|
|
|
399 border-left: 2px solid #acacac;
|
|
|
400 }
|
|
|
401 main blockquote p {
|
|
|
402 margin-bottom: 0.7rem;
|
|
|
403 }
|
|
|
404 main blockquote p.author {
|
|
|
405 text-align: right;
|
|
|
406 padding-right: 1rem;
|
|
|
407 }
|
|
|
408 main blockquote p:last-child {
|
|
|
409 margin-bottom: 0;
|
|
|
410 }
|
|
|
411
|
|
|
412 main > video {
|
|
|
413 grid-column: 1/-1;
|
|
|
414 margin: 0 auto;
|
|
|
415 max-width: 100%;
|
|
|
416 height: auto;
|
|
|
417 }
|
|
|
418
|
|
|
419 footer {
|
|
|
420 grid-area: footer;
|
|
|
421 background-color: #111111;
|
|
|
422 display: grid;
|
|
|
423 grid-template-columns: 1fr minmax(auto,80rem) 1fr;
|
|
|
424 column-gap: 0.5rem;
|
|
|
425 }
|
|
|
426
|
|
|
427
|
|
|
428 .footer-content {
|
|
|
429 grid-column: 2/3;
|
|
|
430 padding: 1rem 0rem;
|
|
|
431 min-height: 3rem;
|
|
|
432 display: grid;
|
|
|
433 gap: 1rem;
|
|
|
434 }
|
|
|
435 @media (max-width: 374px) {
|
|
|
436 .footer-content {
|
|
|
437 grid-template-columns: 1fr;
|
|
|
438 grid-template-areas:
|
|
|
439 "left-footer"
|
|
|
440 "right-footer";
|
|
|
441 }
|
|
|
442 }
|
|
|
443 @media (min-width: 375px) {
|
|
|
444 .footer-content {
|
|
|
445 grid-template-columns: 1fr 0.4fr;
|
|
|
446 grid-template-areas:"left-footer right-footer";
|
|
|
447 }
|
|
|
448 }
|
|
|
449 .left-footer {
|
|
|
450 grid-area: left-footer;
|
|
|
451 display: grid;
|
|
|
452 row-gap: 0.7rem;
|
|
|
453 }
|
|
|
454 .right-footer {
|
|
|
455 grid-area: right-footer;
|
|
|
456 display: flex;
|
|
|
457 width: 100%;
|
|
|
458 padding: 0.3rem 0;
|
|
|
459 justify-content: center;
|
|
|
460 color: #eeeeee;
|
|
|
461 }
|
|
|
462 .right-footer div {
|
|
|
463 color: #eeeeee;
|
|
|
464 }
|
|
|
465 @media (min-width: 375px) {
|
|
|
466 .right-footer {
|
|
|
467 justify-content: flex-end;
|
|
|
468 padding: 0;
|
|
|
469 }
|
|
|
470 }
|
|
|
471
|
|
|
472
|
|
|
473
|
|
|
474 /*Footer Container*/
|
|
|
475 footer ul {
|
|
|
476 display: grid;
|
|
|
477 margin: 0;
|
|
|
478 padding: 0;
|
|
|
479 row-gap: 0.4375rem;
|
|
|
480 }
|
|
|
481 footer li {
|
|
|
482 list-style-type: none;
|
|
|
483 margin: 0;
|
|
|
484 display: block;
|
|
|
485 }
|
|
|
486 footer li a {
|
|
|
487 line-height: 1.3;
|
|
|
488 color: #ffffff;
|
|
|
489 text-decoration: none;
|
|
|
490 }
|
|
|
491 footer li a:hover {
|
|
|
492 color: #ddeeff;
|
|
|
493 }
|
|
|
494 footer li.active a {
|
|
|
495 color: #ddeeff;
|
|
|
496 }
|
|
|
497
|
|
|
498 @media (min-width: 768px) {
|
|
|
499 footer ul {
|
|
|
500 display: flex;
|
|
|
501 flex-wrap: wrap;
|
|
|
502 justify-content: left;
|
|
|
503 column-gap: 0.9375rem;
|
|
|
504 }
|
|
|
505 }
|
|
|
506
|
|
|
507 .copyright {
|
|
|
508 margin: 0;
|
|
|
509 font-size: 0.93rem;
|
|
|
510 color: #cccccc;
|
|
|
511 }
|
|
|
512 .copyright a {
|
|
|
513 color: #00b8ff;
|
|
|
514 text-decoration: none;
|
|
|
515 }
|
|
|
516 .copyright a:hover {
|
|
|
517 color: #39c7ff;
|
|
|
518 text-decoration: none;
|
|
|
519 }
|
|
|
520
|
|
|
521
|
|
|
522 /* Mobile Menu */
|
|
|
523 /* Icon Line */
|
|
|
524 .button-mobimenu-container {
|
|
|
525 display: grid;
|
|
|
526 justify-content: center;
|
|
|
527 align-content: center;
|
|
|
528 position: relative;
|
|
|
529 width: 3.7rem;
|
|
|
530 height: 3.7rem;
|
|
|
531 cursor: pointer;
|
|
|
532 }
|
|
|
533 /* Active Mobile Display */
|
|
|
534
|
|
|
535 .menu-icon {
|
|
|
536 width: 30px;
|
|
|
537 height: 14px;
|
|
|
538 position: relative;
|
|
|
539 z-index:7;
|
|
|
540 }
|
|
|
541
|
|
|
542 .menu-icon span {
|
|
|
543 display: block;
|
|
|
544 position: absolute;
|
|
|
545 left: 0;
|
|
|
546 width: 100%;
|
|
|
547 height: 3px;
|
|
|
548 transform: rotate(0);
|
|
|
549 transition: transform 0.1s ease;
|
|
|
550 }
|
|
|
551 .menu-icon span {
|
|
|
552 background-color: #0d93ff;
|
|
|
553 }
|
|
|
554 .menu-icon span.line-1 {
|
|
|
555 top: 0;
|
|
|
556 }
|
|
|
557 .menu-icon span.line-2 {
|
|
|
558 bottom: 0;
|
|
|
559 }
|
|
|
560
|
|
|
561 .mobile-menu-open .menu-icon span.line-1 {
|
|
|
562 top: 5px;
|
|
|
563 transform: rotate(45deg);
|
|
|
564
|
|
|
565 }
|
|
|
566 .mobile-menu-open .menu-icon span.line-2 {
|
|
|
567 top: 5px;
|
|
|
568 transform: rotate(-45deg);
|
|
|
569 }
|
|
|
570
|
|
|
571 /*Mobile Menu Container*/
|
|
|
572
|
|
|
573 aside {
|
|
|
574 position: fixed;
|
|
|
575 top: 0;
|
|
|
576 bottom: 0;
|
|
|
577 left: 0;
|
|
|
578 width: calc(100% - 4rem);
|
|
|
579 min-width: 16.875rem;
|
|
|
580 background-color: #ffffff;
|
|
|
581 z-index: 777;
|
|
|
582 transform: translate3d(-100%, 0, 0);
|
|
|
583 transition: opacity 0.25s ease, transform 0.25s ease;
|
|
|
584 padding: 3.7rem 0 0 0;
|
|
|
585 overflow-y: auto;
|
|
|
586 scrollbar-width: none; /*FireFox*/
|
|
|
587 }
|
|
|
588 .mobile-menu-open aside {
|
|
|
589 transform: translate3d(0, 0, 0);
|
|
|
590 transition: opacity 0.25s ease, transform 0.25s ease;
|
|
|
591 }
|
|
|
592
|
|
|
593 @media (min-width: 1024px) {
|
|
|
594 aside {
|
|
|
595 width: fit-content;
|
|
|
596 max-width: calc(100% - 4rem);
|
|
|
597 }
|
|
|
598 }
|
|
|
599
|
|
|
600 aside ul {
|
|
|
601 margin: 0;
|
|
|
602 padding: 0;
|
|
|
603 }
|
|
|
604 aside > ul {
|
|
|
605 padding-bottom: 1rem;
|
|
|
606 }
|
|
|
607 aside > ul:not(:first-child) {
|
|
|
608 padding-top: 1rem;
|
|
|
609 }
|
|
|
610 aside > ul:not(:last-child) {
|
|
|
611 border-bottom: 1px solid #ccc;
|
|
|
612 }
|
|
|
613 aside li {
|
|
|
614 list-style-type: none;
|
|
|
615 position: relative;
|
|
|
616 }
|
|
|
617 aside li a {
|
|
|
618 width: 100%;
|
|
|
619 display: block;
|
|
|
620 padding: 13px 17px;
|
|
|
621 color: #111111;
|
|
|
622 text-decoration: none;
|
|
|
623 }
|
|
|
624 aside li a:hover {
|
|
|
625 color: #1a73e8;
|
|
|
626 background-color: #f7f7f7;
|
|
|
627 }
|
|
|
628 aside li.active > a {
|
|
|
629 color: #1a73e8;
|
|
|
630 background-color: #f7f7f7;
|
|
|
631 }
|
|
|
632
|
|
|
633 ul.sub-menu {
|
|
|
634 margin: 0;
|
|
|
635 padding: 0;
|
|
|
636 }
|
|
|
637
|
|
|
638 aside ul > li > ul > li > a {
|
|
|
639 padding-left: 34px;
|
|
|
640 }
|
|
|
641 aside ul > li > ul > li > ul > li > a {
|
|
|
642 padding-left: 51px;
|
|
|
643 }
|
|
|
644
|
|
|
645
|
|
|
646 /*Mobile Menu Reset*/
|
|
|
647 .bg-reset {
|
|
|
648 display: none;
|
|
|
649 width: 100%;
|
|
|
650 height: 100%;
|
|
|
651 visibility: visible;
|
|
|
652 position: fixed;
|
|
|
653 left: 0;
|
|
|
654 right: 0;
|
|
|
655 top: 0;
|
|
|
656 bottom: 0;
|
|
|
657 z-index: 700;
|
|
|
658 opacity: 0.7;
|
|
|
659 background-color: #eeeeee;
|
|
|
660 }
|
|
|
661 .mobile-menu-open .bg-reset {
|
|
|
662 display: block;
|
|
|
663 }
|
|
|
664
|
|
|
665
|
|
|
666 /*Hot Info*/
|
|
|
667 main .hot-scroll {
|
|
|
668 overflow: hidden;
|
|
|
669 grid-column: 1/-1;
|
|
|
670 background-color: #f1f1f1;
|
|
|
671 padding: 2rem 0;
|
|
|
672 }
|
|
|
673
|
|
|
674 main .hot-scroll ul {
|
|
|
675 display: flex;
|
|
|
676 gap: 1rem;
|
|
|
677 overflow-x: auto;
|
|
|
678 margin: 0;
|
|
|
679 padding: 1rem 0;
|
|
|
680 scroll-behavior: smooth;
|
|
|
681 }
|
|
|
682 main .hot-scroll ul li {
|
|
|
683 display: block;
|
|
|
684 flex: 0 0 240px;
|
|
|
685 background-color: #ffffff;
|
|
|
686 min-height: 12rem;
|
|
|
687 transition: all .5s ease;
|
|
|
688 border-radius: 0.3rem;
|
|
|
689 overflow: hidden;
|
|
|
690 border: 1px solid #dadada;
|
|
|
691 user-select: none;
|
|
|
692 }
|
|
|
693
|
|
|
694 main .hot-scroll ul li:hover {
|
|
|
695 box-shadow: 0 2px 6px 0 rgb(0 0 0 / 12%);
|
|
|
696 }
|
|
|
697
|
|
|
698 main .hot-scroll ul li:first-child {
|
|
|
699 margin-left: calc(50% - 140px);
|
|
|
700 }
|
|
|
701 @media (min-width: 375px) {
|
|
|
702 main .hot-scroll ul li {
|
|
|
703 flex: 0 0 280px;
|
|
|
704 }
|
|
|
705 }
|
|
|
706 @media (min-width: 600px) {
|
|
|
707 main .hot-scroll ul li:first-child {
|
|
|
708 margin-left: calc(50% - 290px);
|
|
|
709 }
|
|
|
710 }
|
|
|
711 @media (min-width: 1024px) {
|
|
|
712 main .hot-scroll ul li {
|
|
|
713 flex: 0 0 440px;
|
|
|
714 }
|
|
|
715 main .hot-scroll ul li:first-child {
|
|
|
716 margin-left: calc(50% - 470px);
|
|
|
717 }
|
|
|
718 }
|
|
|
719
|
|
|
720
|
|
|
721 main .hot-scroll img {
|
|
|
722 overflow: hidden;
|
|
|
723 max-height: 10rem;
|
|
|
724 object-fit: cover;
|
|
|
725 margin: 0;
|
|
|
726 }
|
|
|
727 main .hot-scroll .hot-news {
|
|
|
728 padding: 0.6rem 1rem 1.6rem 1rem;
|
|
|
729 }
|
|
|
730 main .hot-scroll .hot-news h2 {
|
|
|
731 padding: 0;
|
|
|
732 margin: 0 0 0.7rem 0;
|
|
|
733 font-weight: 400;
|
|
|
734 font-size: 1.4rem;
|
|
|
735 color: #111111;
|
|
|
736 display: block;
|
|
|
737 text-decoration: none;
|
|
|
738 }
|
|
|
739 main .hot-scroll .hot-news p {
|
|
|
740 font-weight: 400;
|
|
|
741 color: #111111;
|
|
|
742 display: block;
|
|
|
743 text-decoration: none;
|
|
|
744 }
|
|
|
745 main .hot-scroll ul li a {
|
|
|
746 text-decoration: none;
|
|
|
747 }
|
|
|
748
|
|
|
749 @media (min-width: 1024px) {
|
|
|
750 main .hot-scroll img {
|
|
|
751 max-height: 14rem;
|
|
|
752 }
|
|
|
753 main .hot-scroll .hot-news {
|
|
|
754 padding: 1rem 1.4rem 2rem 1.4rem;
|
|
|
755 }
|
|
|
756 main .hot-scroll .hot-news h2 {
|
|
|
757 font-size: 1.6rem;
|
|
|
758 }
|
|
|
759 }
|
|
|
760
|
|
|
761 /*ЮMoney*/
|
|
|
762 .yoomoney-pay {
|
|
|
763 padding: 0.7rem 1.7rem;
|
|
|
764 border-radius: 0.3rem;
|
|
|
765 border: 0;
|
|
|
766 cursor: pointer;
|
|
|
767 background-color: #8b3ffd;
|
|
|
768 font-size: 0.9rem;
|
|
|
769 transition: 0.3s;
|
|
|
770 color: #ffffff;
|
|
|
771 }
|
|
|
772 .yoomoney-pay:hover {
|
|
|
773 background: #8b3ffd;
|
|
|
774 box-shadow: 0 0 0 0.2em #c3a4ff;
|
|
|
775 }
|
|
|
776 .yoomoney-form {
|
|
|
777 display: grid;
|
|
|
778 padding: 0.7rem 0.7rem;
|
|
|
779 border-radius: 0.3rem;
|
|
|
780 background-color: white;
|
|
|
781 box-shadow: 0px 3px 7px 0px #00000033;
|
|
|
782 column-gap: 0.7rem;
|
|
|
783 }
|
|
|
784 .yoomoney-form input[type='email'] {
|
|
|
785 width: 100%;
|
|
|
786 border: 1px solid #777777;
|
|
|
787 border-radius: 0.3rem;
|
|
|
788 padding: 0 0 0 0.5rem;
|
|
|
789 font-size: 1rem;
|
|
|
790 font-weight: 600;
|
|
|
791 }
|
|
|
792 @media (max-width: 375px) {
|
|
|
793 .yoomoney-form {
|
|
|
794 width: 100%;
|
|
|
795 grid-template-columns: auto;
|
|
|
796 row-gap: 1rem;
|
|
|
797 }
|
|
|
798 .yoomoney-form input[type='email'] {
|
|
|
799 height: 2.4rem;
|
|
|
800 }
|
|
|
801 }
|
|
|
802 @media (min-width: 376px) {
|
|
|
803 .yoomoney-form {
|
|
|
804 width: fit-content;
|
|
|
805 grid-template-columns: auto auto;
|
|
|
806 }
|
|
|
807 }
|
|
|
808 /*
|
|
|
809 ul a:not([href]) {
|
|
|
810 display: none;
|
|
|
811 }
|
|
|
812 ul a:not([href]) + ul {
|
|
|
813 display: none;
|
|
|
814 }
|
|
|
815 */
|
|
|
816
|
|
|
817 #lbox-window {
|
|
|
818 position: fixed;
|
|
|
819 z-index: 999;
|
|
|
820 cursor: pointer;
|
|
|
821 background-color: #000000dd;
|
|
|
822 display: grid;
|
|
|
823 height: 100vh;
|
|
|
824 width: 100vw;
|
|
|
825 grid-template-areas: "lightbox";
|
|
|
826 }
|
|
|
827
|
|
|
828 #lbox-window img, #lbox-window video, #lbox-window audio {
|
|
|
829 max-width: 100%;
|
|
|
830 max-height: 100%;
|
|
|
831 box-shadow: 0 3px 7px 0 #0000004d;
|
|
|
832 grid-area: lightbox;
|
|
|
833 align-self: center;
|
|
|
834 justify-self: center;
|
|
|
835 overflow: hidden;
|
|
|
836 }
|
