.header .logo { background-size: auto 90%; background-position: left center; } /* UÏí·þÎñ - ÂÖ²¥ÇøÓò£¨±£ÁôÈ«Êý¶¯»­£© */ .u-service-carousel-wrap { --primary-color: #084397; --secondary-color: #0a58ca; --accent-color: #4dabf7; --light-color: #f8f9fa; --dark-color: #212529; --transition-speed: 0.5s; } .u-service-carousel-wrap .carousel-section { margin: 40px 0; padding: 0; background-color: white; border-radius: 15px; box-shadow: 0 rgba(0, 0, 0, 0.08); position: relative; } .u-service-carousel-wrap .loading-temp { position: absolute; top: 0; left: 0; width: 100%; min-height: 100%; min-height: 75vh; background-color: white; border-radius: 15px; z-index: 10; display: flex; flex-direction: column; align-items: stretch; padding: 20px; box-sizing: border-box; overflow-y: auto; transition: opacity 0.5s ease-out; } .u-service-carousel-wrap .loading-temp.closing { opacity: 0; pointer-events: none; } .u-service-carousel-wrap .loading-temp.closed { display: none; pointer-events: none; } .u-service-carousel-wrap .loading-temp-carousel-wrap { width: 100%; aspect-ratio: 8 / 1; padding: 0; margin-bottom: 5px; border-radius: 10px; overflow: hidden; flex-shrink: 0; min-width: 0; } .u-service-carousel-wrap .loading-temp-carousel-wrap .loading-temp-row { display: flex; height: 100%; gap: 15px; padding: 10px 5px; box-sizing: border-box; align-items: stretch; min-height: 0; } .u-service-carousel-wrap .loading-temp-carousel-wrap .loading-card { flex: 0 0 calc((100% - 60px) / 5); height: 100%; min-height: 0; } .u-service-carousel-wrap .loading-temp-rest { display: flex; flex-direction: column; gap: 3.75px; width: 100%; flex: 1; min-height: 0; min-width: 0; } .u-service-carousel-wrap .loading-temp-row { display: flex; gap: 15px; width: 100%; aspect-ratio: 8 / 1; min-height: 0; align-items: stretch; padding: 10px 5px; box-sizing: border-box; } .u-service-carousel-wrap .loading-temp-row .loading-card, .u-service-carousel-wrap .loading-temp-carousel-wrap .loading-card { flex: 0 0 calc((100% - 60px) / 5); height: 100%; min-height: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); background-color: white; border: 2px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.35s ease-out; will-change: opacity; } .u-service-carousel-wrap .loading-temp .loading-card.revealed { opacity: 1; } .u-service-carousel-wrap .loading-temp .loading-card .card-content { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 20px; } .u-service-carousel-wrap .loading-temp .loading-card .card-logo { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .u-service-carousel-wrap .loading-temp .loading-card .card-logo i { font-size: 2rem; color: var(--primary-color); transition: all 0.3s ease; } .u-service-carousel-wrap .loading-temp .loading-card .card-text { font-size: 1.1rem; color: var(--primary-color); font-weight: 600; text-align: center; line-height: 1.3; } .u-service-carousel-wrap .carousel-container { position: relative; width: 100%; aspect-ratio: 8 / 1; overflow: hidden; border-radius: 10px; margin-bottom: 3.75px; padding: 0; } .u-service-carousel-wrap .carousel { display: flex; height: 100%; align-items: stretch; gap: 15px; padding: 10px 5px; box-sizing: border-box; } /* ÂÖ²¥ÕûÐУºÏò×󻬳ö / ´ÓÓÒ»¬Èë ¶¯»­£¨ÒÑ×¢½â£¬×Ô¶¯ÂÖ²¥Ê±²»ÔÙʹÓã© */ /* .u-service-carousel-wrap .carousel.carousel-slide-out { transition: transform 0.28s ease-out, opacity 0.28s ease-out; transform: translateX(-18%); opacity: 0.7; } */ /* .u-service-carousel-wrap .carousel.carousel-slide-in { animation: ucarousel-row-in 0.36s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } */ /* @keyframes ucarousel-row-in { from { transform: translateX(18%); opacity: 0.75; } to { transform: translateX(0); opacity: 1; } } */ /* ¼¤»î̬Çл»£º¹ý¶É + Çá΢·Å´óÓëÒõÓ° */ .u-service-carousel-wrap .carousel-item { flex: 0 0 calc((100% - 60px) / 5); position: relative; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); height: 100%; background-color: white; cursor: pointer; border: 2px solid transparent; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.4s ease, border-color 0.35s ease, background 0.4s ease; container-type: inline-size; } .u-service-carousel-wrap .carousel-item:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); } .u-service-carousel-wrap .carousel-item.active { border-color: var(--primary-color); transform: scale(1.03); box-shadow: 0 12px 24px rgba(8, 67, 151, 0.25); } .u-service-carousel-wrap .carousel-item.active:hover { transform: scale(1.03) translateY(-3px); box-shadow: 0 14px 28px rgba(8, 67, 151, 0.3); } .u-service-carousel-wrap .carousel-item-disabled { cursor: default; pointer-events: auto; } .u-service-carousel-wrap .carousel-item-disabled:hover { transform: none; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .u-service-carousel-wrap .carousel-item-disabled.active:hover { transform: scale(1.03); } .u-service-carousel-wrap .matrix-card-disabled { cursor: default; } .u-service-carousel-wrap .matrix-card-disabled:hover { border-color: transparent; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); } .u-service-carousel-wrap .carousel-progress-container { display: none; } .u-service-carousel-wrap .carousel-item-content { display: flex; flex-direction: column; height: 100%; padding: 20px; align-items: center; justify-content: center; position: relative; overflow: hidden; transition: background 0.45s ease, color 0.35s ease; } .u-service-carousel-wrap .carousel-item.active .carousel-item-content { background: linear-gradient(135deg, var(--primary-color), var(--secondary-color)); color: white; } .u-service-carousel-wrap .carousel-logo { width: 70px; height: 70px; display: flex; justify-content: center; align-items: center; margin-bottom: 10px; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* ¿¨Æ¬¿í¶È > 200px ʱ£¬LOGO ÓëÎÄ×Ö¼ä¾àËõ¶Ì 50% */ @container (min-width: 201px) { .u-service-carousel-wrap .carousel-item .carousel-logo { margin-bottom: 5px; } } .u-service-carousel-wrap .carousel-item.active .carousel-logo { transform: scale(1.12); } .u-service-carousel-wrap .carousel-logo i { font-size: 2rem; color: var(--primary-color); transition: all 0.3s ease; } .u-service-carousel-wrap .carousel-item.active .carousel-logo i { color: white; } .u-service-carousel-wrap .logo-cob { display: inline-flex; align-items: center; justify-content: center; gap: 0; height: 32px; width: auto; font-size: 28px; line-height: 1; } .u-service-carousel-wrap .logo-cob i { font-size: inherit; color: inherit; } .u-service-carousel-wrap .carousel-logo .logo-cob i { color: var(--primary-color); } .u-service-carousel-wrap .carousel-item.active .carousel-logo .logo-cob i { color: white; } .u-service-carousel-wrap .logo-uce { display: inline-flex; align-items: center; justify-content: center; gap: 0; height: 32px; width: auto; font-size: 28px; line-height: 1; } .u-service-carousel-wrap .logo-uce i { font-size: inherit; color: inherit; } .u-service-carousel-wrap .carousel-logo .logo-uce i { color: var(--primary-color); } .u-service-carousel-wrap .carousel-item.active .carousel-logo .logo-uce i { color: white; } /* UPEÅàѵ£ºÑØÓà UCE ×Öĸ LOGO µÄչʾ·ç¸ñ */ .u-service-carousel-wrap .logo-upe { display: inline-flex; align-items: center; justify-content: center; gap: 0; height: 32px; width: auto; font-size: 28px; line-height: 1; color: var(--primary-color); } .u-service-carousel-wrap .logo-upe i { font-size: inherit; color: inherit; font-style: normal; } .u-service-carousel-wrap .carousel-logo .logo-upe { color: var(--primary-color); } .u-service-carousel-wrap .carousel-item.active .carousel-logo .logo-upe { color: white; } /* U½á¹¹£ºµ¥×Öĸ U */ .u-service-carousel-wrap .logo-u { display: inline-flex; align-items: center; justify-content: center; gap: 0; height: 32px; width: auto; font-size: 28px; line-height: 1; color: var(--primary-color); } .u-service-carousel-wrap .logo-u i { font-size: inherit; color: inherit; font-style: normal; } .u-service-carousel-wrap .carousel-logo .logo-u { color: var(--primary-color); } .u-service-carousel-wrap .carousel-item.active .carousel-logo .logo-u { color: white; } .u-service-carousel-wrap .logo-ai { display: inline-flex; align-items: center; justify-content: center; gap: 0; height: 32px; width: auto; font-size: 28px; line-height: 1; } .u-service-carousel-wrap .logo-ai i { font-size: inherit; color: inherit; } .u-service-carousel-wrap .carousel-logo .logo-ai i { color: var(--primary-color); } .u-service-carousel-wrap .carousel-item.active .carousel-logo .logo-ai i { color: white; } .u-service-carousel-wrap .carousel-matrix .matrix-card .card-logo .logo-cob i, .u-service-carousel-wrap .carousel-matrix .matrix-card .card-logo .logo-uce i, .u-service-carousel-wrap .carousel-matrix .matrix-card .card-logo .logo-ai i { color: var(--primary-color); } .u-service-carousel-wrap .carousel-text { text-align: center; font-weight: 600; font-size: 1.1rem; color: var(--primary-color); transition: all 0.3s ease; } .u-service-carousel-wrap .carousel-item.active .carousel-text { color: white; } .u-service-carousel-wrap .carousel-expand-wrap { display: flex; justify-content: center; margin-top: 10px; } .u-service-carousel-wrap .carousel-expand-btn { width: 44px; height: 44px; border: 2px solid rgba(8, 67, 151, 0.3); border-radius: 50%; background: white; color: var(--primary-color); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .u-service-carousel-wrap .carousel-expand-btn:hover { background: var(--primary-color); color: white; border-color: var(--primary-color); } .u-service-carousel-wrap .carousel-expand-btn i { font-size: 1.4rem; } .u-service-carousel-wrap .carousel-matrix { display: none; flex-direction: column; width: 100%; margin-top: 0; overflow: hidden; } .u-service-carousel-wrap .carousel-matrix.expanded { display: flex; } .u-service-carousel-wrap .carousel-matrix-rest { display: flex; flex-direction: column; gap: 3.75px; width: 100%; } .u-service-carousel-wrap .carousel-matrix .matrix-row { display: flex; gap: 15px; width: 100%; aspect-ratio: 8 / 1; min-height: 0; align-items: stretch; padding: 10px 5px; box-sizing: border-box; } .u-service-carousel-wrap .carousel-matrix .matrix-card { flex: 0 0 calc((100% - 60px) / 5); height: 100%; min-height: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); background: white; border: 2px solid transparent; display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; } .u-service-carousel-wrap .carousel-matrix .matrix-card:hover { border-color: var(--primary-color); box-shadow: 0 8px 20px rgba(8, 67, 151, 0.2); } .u-service-carousel-wrap .carousel-matrix .matrix-card .card-content { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 20px; } .u-service-carousel-wrap .carousel-matrix .matrix-card .card-logo { width: 70px; height: 70px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; } .u-service-carousel-wrap .carousel-matrix .matrix-card .card-logo i { font-size: 2rem; color: var(--primary-color); } .u-service-carousel-wrap .carousel-matrix .matrix-card .card-text { font-size: 1.1rem; color: var(--primary-color); font-weight: 600; text-align: center; line-height: 1.3; } .u-service-carousel-wrap .carousel-matrix .matrix-card.matrix-reveal { opacity: 0; transition: opacity 0.35s ease-out; will-change: opacity; } .u-service-carousel-wrap .carousel-matrix .matrix-card.matrix-reveal.revealed { opacity: 1; } /* UÏí·þÎñ¸Ä°æ£º¸´Óà services-grid ´úÌæÂÖ²¥/¾ØÕó¿ÉÊÓÇø */ #u-enjoy-service .services-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 28px; margin: 40px 0 20px; } #u-enjoy-service .service-card { background: #fff; border-radius: 24px; padding: 24px 20px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06); border: 1px solid #e8eef7; transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease; } #u-enjoy-service .service-card:hover { transform: translateY(-4px); box-shadow: 0 10px 24px rgba(8, 67, 151, 0.12); border-color: rgba(8, 67, 151, 0.35); } #u-enjoy-service .service-card .card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; border-bottom: 2px solid rgba(8, 67, 151, 0.15); padding-bottom: 12px; } #u-enjoy-service .service-card .card-header i { font-size: 1.9rem; color: #084397; } #u-enjoy-service .service-card .card-header h3 { font-size: 1.4rem; font-weight: 700; color: #084397; margin: 0; } #u-enjoy-service .service-items { display: flex; flex-wrap: wrap; gap: 10px; } #u-enjoy-service .service-tag { background: rgba(8, 67, 151, 0.1); padding: 6px 14px; border-radius: 40px; font-size: 0.85rem; font-weight: 500; color: #084397; border: 1px solid transparent; transition: all 0.2s ease; } #u-enjoy-service .service-tag:hover { background: #fff; border-color: rgba(8, 67, 151, 0.5); } /* µ±Ç°ÏêÇéÒ³¶ÔÓ¦µÄ·þÎñ¸ßÁÁ£¨ÓÉ JS ͬ²½ active class£© */ #u-enjoy-service .service-card.active { border-color: rgba(8, 67, 151, 0.55); box-shadow: 0 14px 28px rgba(8, 67, 151, 0.16); transform: translateY(-4px); } #u-enjoy-service .service-tag.active { background: var(--primary-color); color: #fff; border-color: rgba(255, 255, 255, 0.6); box-shadow: 0 10px 20px rgba(8, 67, 151, 0.18); } #u-enjoy-service .service-tag.active:hover { background: var(--primary-color); border-color: rgba(255, 255, 255, 0.6); } /* Ò³Ãæ¼ÓÔØÈ볡£ºservices-grid ½ÓÁúµ­Èë */ #u-enjoy-service .services-grid .service-card { opacity: 0; transform: translateY(18px); } #u-enjoy-service .services-grid.is-loaded .service-card { animation: services-grid-stagger-fade 0.55s ease forwards; } #u-enjoy-service .services-grid.is-loaded .service-card:nth-child(1) { animation-delay: 0.00s; } #u-enjoy-service .services-grid.is-loaded .service-card:nth-child(2) { animation-delay: 0.10s; } #u-enjoy-service .services-grid.is-loaded .service-card:nth-child(3) { animation-delay: 0.20s; } #u-enjoy-service .services-grid.is-loaded .service-card:nth-child(4) { animation-delay: 0.30s; } #u-enjoy-service .services-grid.is-loaded .service-card:nth-child(5) { animation-delay: 0.40s; } #u-enjoy-service .services-grid.is-loaded .service-card:nth-child(6) { animation-delay: 0.50s; } #u-enjoy-service .services-grid.is-loaded .service-card:nth-child(7) { animation-delay: 0.60s; } #u-enjoy-service .services-grid.is-loaded .service-card:nth-child(8) { animation-delay: 0.70s; } /* Ò³Ãæ¼ÓÔØÈ볡£º·þÎñ°ìÀí´Ó×óµ½ÓÒÖð¸öµ­Èë */ .quick_submission_block .quick_submission_main .quick_sub_item { opacity: 0; transform: translateX(-18px); } .quick_submission_block .quick_submission_main.is-loaded .quick_sub_item { animation: quick-submission-stagger-fade 0.5s ease forwards; } .quick_submission_block .quick_submission_main.is-loaded .quick_sub_item:nth-child(1) { animation-delay: 0.00s; } .quick_submission_block .quick_submission_main.is-loaded .quick_sub_item:nth-child(2) { animation-delay: 0.12s; } .quick_submission_block .quick_submission_main.is-loaded .quick_sub_item:nth-child(3) { animation-delay: 0.24s; } @keyframes services-grid-stagger-fade { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes quick-submission-stagger-fade { from { opacity: 0; transform: translateX(-18px); } to { opacity: 1; transform: translateX(0); } } @media (prefers-reduced-motion: reduce) { #u-enjoy-service .services-grid .service-card, .quick_submission_block .quick_submission_main .quick_sub_item { opacity: 1 !important; transform: none !important; animation: none !important; } } .u-service-carousel-wrap .detail-section { margin-top: 30px; position: relative; overflow: hidden; } /* ÿ¸ö¿¨Æ¬¶ÔÓ¦¶ÀÁ¢ detail-container£¬±ãÓÚÖðÏî×Ô½ç˵£»·Ç¼¤»îÏî¾ø¶Ô¶¨Î»µþ·Å²¢°µ²Ø */ .u-service-carousel-wrap .detail-container { background-color: white; border-radius: 15px; padding: 30px; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08); position: absolute; top: 0; left: 0; right: 0; opacity: 0; transform: translateY(20px); pointer-events: none; transition: none; } .u-service-carousel-wrap .detail-container.active { position: relative; opacity: 1; transform: translateY(0); pointer-events: auto; transition: opacity var(--transition-speed) ease, transform var(--transition-speed) ease; } .detail-overlay-close { display: none; } @media (max-width: 768px) { .u-service-carousel-wrap .detail-section { position: fixed; top: 0; left: 0; width: 100vw; max-width: 100vw; height: 100vh; height: 100dvh; z-index: 10000; background: #fff; overflow: hidden auto; margin-top: 0; padding: 50px 16px 30px; display: none; border-radius: 0; box-sizing: border-box; } .u-service-carousel-wrap .detail-section.overlay-visible { display: block; } .u-service-carousel-wrap .detail-section .detail-container { padding: 20px 16px; } .u-service-carousel-wrap .detail-section .detail-body { grid-template-columns: 1fr; gap: 20px; } .u-service-carousel-wrap .detail-section .detail-body > * { min-width: 0; } .u-service-carousel-wrap .detail-section .detail-content { overflow: visible; overflow-wrap: break-word; word-break: break-word; } /* ¡ª ÊÖ»ú¶ËÈ¡µÞµ×²¿¶ÔÆ룬Ԥ·À detail-content Óë detail-stats ³Áµþ ¡ª */ .u-service-carousel-wrap .detail-section .detail-body:has(.detail-stats-related-cards) { align-items: start; } .u-service-carousel-wrap .detail-section .detail-stats { max-width: 100%; overflow: hidden; } .u-service-carousel-wrap .detail-section .detail-stats-cards { flex: none; min-height: auto; overflow: visible; } .u-service-carousel-wrap .detail-section .detail-related-card { flex: none; min-height: auto; } /* ¡ª ¸ùÒò½¨¸´£ºdetail-content-row ÊÖ»ú¶Ë×ÝÏò¶Ñµþ£¬Ô¤·À 360px ¹Ì¶¨×ó²àÀ¸¼·Õ¼ mindmap ¿Õ¼ä ¡ª */ .u-service-carousel-wrap .detail-section .detail-content-row { flex-direction: column; } .u-service-carousel-wrap .detail-section .detail-content-left { width: 100%; flex: 0 0 auto; } /* ¡ª ¸ùÒò½¨¸´£ºdetail-mindmap-bg ÊÖ»ú¶ËÈ¡µÞ²Ã¼ô£¬Ô¤·ÀÄÚ²¿¾ø¶Ô¶¨Î»ÔªËر»Çеô ¡ª */ .u-service-carousel-wrap .detail-section .detail-mindmap-bg { overflow: visible; } /* ¡ª ¸ùÒò½¨¸´£ºº¬Íø¸ñ/³¡¾°¿¨Æ¬µÄ²¼¾°²ãºÍǶÈë²ã¸ÄΪÕý³£Á÷£¬ÈÃÄÚÈÝ³Å¸ß mindmap ¡ª */ .u-service-carousel-wrap .detail-section .detail-mindmap-bg:has(.grid-container), .u-service-carousel-wrap .detail-section .detail-mindmap-bg:has(.scenarios-container) { position: relative !important; inset: auto !important; height: auto !important; } .u-service-carousel-wrap .detail-section .detail-mindmap-bg .detail-mindmap-grid-embed { position: relative !important; inset: auto !important; height: auto !important; } /* ¡ª detail-mindmap ÊÖ»ú¶ËÊÊÅ䣨¸²¸ÇËùÓбäÌ壩 ¡ª */ .u-service-carousel-wrap .detail-section [class*="detail-mindmap"] { width: 100% !important; min-width: 0 !important; max-width: 100% !important; flex: none !important; min-height: 240px !important; height: auto !important; overflow: visible !important; } /* ¡ª ÄÚÈÝ×ÔÊÊÓ¦ÐÍ£¨gallery / ͼƬ²¢ÅÅ£© ¡ª */ .u-service-carousel-wrap .detail-section .detail-mindmap--design-gallery, .u-service-carousel-wrap .detail-section .detail-mindmap--disassembly-gallery, .u-service-carousel-wrap .detail-section .detail-mindmap-rental-images-wrap, .u-service-carousel-wrap .detail-section .detail-mindmap-upe-images-wrap { min-height: auto !important; height: auto !important; } /* ¡ª µ¥Í¼¾øλÐÍ£¨project-management-image / Åàѵ·þÎñͼµÈ£© ¡ª */ .u-service-carousel-wrap .detail-section .detail-mindmap--project-management-image, .u-service-carousel-wrap .detail-section .detail-mindmap:has(> img:only-child) { min-height: 240px !important; height: auto !important; } /* ¡ª ½ô´ÕÐÍ£¨flow / ²é³­Á÷³Ì / ±ÈÁ¦»¬¿é£© ¡ª */ .u-service-carousel-wrap .detail-section .detail-mindmap:has(.flow-wrap), .u-service-carousel-wrap .detail-section .detail-mindmap:has(.inspection-flow), .u-service-carousel-wrap .detail-section .detail-mindmap:has(.comparison-container) { min-height: 200px !important; height: auto !important; } /* ¡ª ·çÑÅ¿éÐÍ£¨grid / flip-card ¾ØÕó / ÈÈÏßÇþ·£© ¡ª */ .u-service-carousel-wrap .detail-section .detail-mindmap:has(.grid-3x3), .u-service-carousel-wrap .detail-section .detail-mindmap:has(.grid-container), .u-service-carousel-wrap .detail-section .detail-mindmap:has(.scenarios-container), .u-service-carousel-wrap .detail-section .detail-mindmap:has(.precision-img-matrix), .u-service-carousel-wrap .detail-section .detail-mindmap:has(.hotline-channels) { min-height: 340px !important; height: auto !important; } /* ¡ª ·øÉä˼Ï뵼ͼ ¡ª */ .u-service-carousel-wrap .detail-section .detail-mindmap:has(.mindmap-center) { min-height: 300px !important; height: auto !important; } /* ¡ª Êý×Ö GIF Íø¸ñά³Ö aspect-ratio ¡ª */ .u-service-carousel-wrap .detail-section .detail-mindmap--digital-gif-grid { aspect-ratio: 2.5 / 1 !important; height: auto !important; min-height: auto !important; } /* ¡ª ²ðж»­ÀÈ£ºÊÖ»ú¶Ë item ×ÝÏò¶Ñµþ£¨!important Æ¥µÐ ID Ñ¡ÔñÆ÷£© ¡ª */ .u-service-carousel-wrap .detail-section .disassembly-gallery { flex-direction: column !important; flex: 0 0 auto !important; min-height: auto !important; } .u-service-carousel-wrap .detail-section .disassembly-gallery-item { flex: 0 0 auto !important; min-height: auto !important; width: 100% !important; } .u-service-carousel-wrap .detail-section .disassembly-gallery-img-wrap { min-height: 120px; } /* ¡ª ±ÈÁ¦»¬¿é£ºbg ºÍ embed ¸ÄΪÕý³£Á÷£¬ÈÃÄÚÈÝ³Å¸ß mindmap ¡ª */ .u-service-carousel-wrap .detail-section .detail-mindmap-bg.detail-mindmap-bg-comparison { position: relative !important; inset: auto !important; height: auto !important; } .u-service-carousel-wrap .detail-section .comparison-embed-container { position: relative !important; inset: auto !important; height: auto !important; min-height: 240px !important; } /* ¡ª Á½²ã±ÈÁ¦£¨Ð£¶Ô·þÎñ£©£º¶ÀÁ¢¸²¸Ç min-height:0 ¡ª */ .u-service-carousel-wrap .detail-section .detail-mindmap-bg-comparison-two-layer .comparison-embed-container { min-height: 240px !important; } .u-service-carousel-wrap .detail-section .detail-mindmap-bg-comparison-two-layer .comparison-container { min-height: 180px !important; } /* ¡ª UPE ͼƬ£ºÊÖ»ú¶Ë object-fit ¸ÄΪ contain Ô¤·À±äÐÎ ¡ª */ .u-service-carousel-wrap .detail-section .detail-mindmap-upe-images img { object-fit: contain !important; height: auto !important; } .u-service-carousel-wrap .detail-section img { max-width: 100%; height: auto; } .detail-overlay-close { display: none; position: fixed; top: 12px; right: 12px; z-index: 10001; width: 36px; height: 36px; border-radius: 50%; background: rgba(8,67,151,0.9); color: #fff; border: none; font-size: 18px; line-height: 1; cursor: pointer; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .detail-overlay-close.show { display: flex; } .u-service-carousel-wrap .detail-auto-play { display: none !important; } } .u-service-carousel-wrap .detail-loading { display: flex; flex-direction: column; align-items: center; gap: 15px; } .u-service-carousel-wrap .detail-loading-spinner { width: 40px; height: 40px; border: 4px solid rgba(0, 0, 0, 0.1); border-left-color: var(--primary-color); border-radius: 50%; animation: ucarousel-spin 1s linear infinite; } @keyframes ucarousel-spin { to { transform: rotate(360deg); } } .u-service-carousel-wrap .detail-loading-text { color: #666; font-size: 1rem; } .u-service-carousel-wrap .detail-header { margin-bottom: 25px; border-bottom: 2px solid #f0f2f5; padding-bottom: 20px; display: flex; justify-content: space-between; align-items: center; } .u-service-carousel-wrap .detail-title { font-size: 2rem; font-weight: 700; color: var(--primary-color); margin-bottom: 5px; padding-bottom: 10px; opacity: 0; transform: translateY(10px); animation: ucarousel-fadeInUp 0.5s ease forwards; } .u-service-carousel-wrap .detail-subtitle { font-size: 1.2rem; line-height: 1.5rem; color: #666; opacity: 0; transform: translateY(10px); animation: ucarousel-fadeInUp 0.5s ease 0.2s forwards; } .u-service-carousel-wrap .detail-auto-play { display: flex; align-items: center; gap: 10px; margin-left: auto; justify-content: flex-end; } .u-service-carousel-wrap .auto-play-toggle { width: 50px; height: 24px; background-color: #ddd; border-radius: 12px; position: relative; cursor: pointer; transition: background-color 0.3s ease; } .u-service-carousel-wrap .auto-play-toggle.active { background-color: var(--primary-color); } .u-service-carousel-wrap .auto-play-toggle::after { content: ''; position: absolute; width: 20px; height: 20px; background-color: white; border-radius: 50%; top: 2px; left: 2px; transition: transform 0.3s ease; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); } .u-service-carousel-wrap .auto-play-toggle.active::after { transform: translateX(26px); } .u-service-carousel-wrap .detail-body { display: grid; grid-template-columns: 1fr 300px; gap: 30px; } /* UCEÅàѵÏêÇéÒ³£ºÓйطþÎñ¿¨Æ¬ÊýÁ¿Ôö³¤Ê±Ô¤·À±»²Ã¼ô */ .u-service-carousel-wrap #detailContainerUceCertification .detail-stats-cards { overflow: visible; } /* ÆÁÌåά±££ºÓйطþÎñÓë×ó²àÄÚÈݵײ¿¶ÔÆ룬ÏÞ¶Å×Ò²à¸ß¶È²»³¬¹ý×ó²à */ .u-service-carousel-wrap .detail-body:has(.detail-stats-related-cards) { align-items: end; } /* ÆÁÌå²ðж°áǨ£ºÄÚ²ã°ü×°Æ÷²»²Î¼Ó²¼¾Ö£¬Ê¹ detail-content / detail-stats ÈÔ×÷Ϊ detail-body Íø¸ñµÄÖ±½Ó×ÓÏ1fr + 300px£© */ .u-service-carousel-wrap #screenDisassemblyRelocation.screen-disassembly-relocation { display: contents; } /* ÆÁÌå²ðж°áǨ£ºÎÞ²¼¾°Á£×Ó¶¯»­£»ÈýͼÓë×ó²à¡¸²úÆ·ÁÁµã¡¹¶¥¶ÔÆ룬ͼƬ°´ÈÝÆ÷À­ÉìÌî³ä */ .u-service-carousel-wrap #detailContainerScreenDisassemblyRelocation .detail-mindmap--disassembly-gallery { display: flex; flex-direction: column; min-height: 0; align-self: stretch; border-radius: 0; } .u-service-carousel-wrap #detailContainerScreenDisassemblyRelocation .detail-mindmap--disassembly-gallery .disassembly-gallery { flex: 1 1 auto; min-height: 0; display: flex; gap: 16px; align-items: stretch; justify-content: space-between; position: relative; z-index: 1; } .u-service-carousel-wrap #detailContainerScreenDisassemblyRelocation .disassembly-gallery-item { flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; } .u-service-carousel-wrap #detailContainerScreenDisassemblyRelocation .disassembly-gallery-img-wrap { flex: 1 1 auto; min-height: 0; overflow: hidden; border-radius: 0; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(8, 67, 151, 0.08); } .u-service-carousel-wrap #detailContainerScreenDisassemblyRelocation .disassembly-gallery-img-wrap img { width: 100%; height: 100%; object-fit: fill; display: block; } .u-service-carousel-wrap #detailContainerScreenDisassemblyRelocation .disassembly-gallery-label { flex-shrink: 0; margin-top: 0; background: #084397; color: #fff; text-align: center; border-radius: 0; padding: 10px 12px; font-size: 16px; line-height: 1.4; box-shadow: 0 4px 14px rgba(8, 67, 151, 0.28); } /* ¹¤³ÌÉè¼Æ£ºÈýÕÅͼƬ²¢ÅÅչʾ */ .u-service-carousel-wrap #detailContainerEngineeringDesign .detail-mindmap--design-gallery { display: flex; min-height: 0; align-self: stretch; } .u-service-carousel-wrap #detailContainerEngineeringDesign .detail-content { height: 100%; display: flex; flex-direction: column; } .u-service-carousel-wrap #detailContainerEngineeringDesign .detail-content-row { flex: 1 1 auto; align-items: stretch; } .u-service-carousel-wrap #detailContainerEngineeringDesign .design-gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; width: 100%; height: 90%; margin-top: 15px; min-height: 0; position: relative; z-index: 1; align-items: stretch; justify-items: center; align-content: center; pointer-events: auto; } .u-service-carousel-wrap #detailContainerEngineeringDesign .design-gallery-side { display: contents; min-height: 0; } .u-service-carousel-wrap #detailContainerEngineeringDesign .design-gallery-img-wrap { width: 100%; height: 100%; min-height: 0; overflow: hidden; border: 1px solid var(--theme-color, #084397); border-radius: 12px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 2px 8px rgba(8, 67, 151, 0.08); position: relative; top: 0; pointer-events: auto; transition: top 0.25s ease, box-shadow 0.25s ease; } .u-service-carousel-wrap #detailContainerEngineeringDesign .design-gallery-img-wrap:hover { top: -5px; box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16), 0 4px 12px rgba(8, 67, 151, 0.12); } .u-service-carousel-wrap #detailContainerEngineeringDesign .design-gallery-img-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; } .u-service-carousel-wrap #detailContainerEngineeringDesign .design-gallery-side .design-gallery-img-wrap img { object-fit: fill; object-position: center; } .u-service-carousel-wrap #detailContainerEngineeringDesign .design-gallery-side .design-gallery-img-wrap { width: 100%; height: 100%; } @media (max-width: 768px) { .u-service-carousel-wrap #detailContainerEngineeringDesign .design-gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); } .u-service-carousel-wrap #detailContainerEngineeringDesign .design-gallery-side .design-gallery-img-wrap { width: 100%; } } .u-service-carousel-wrap .detail-content { line-height: 3; } .u-service-carousel-wrap .detail-content h3 { font-size: 1.5rem; margin-bottom: 15px; color: var(--secondary-color); border-left: 4px solid var(--accent-color); padding-left: 10px; opacity: 0; transform: translateX(-20px); animation: ucarousel-slideInRight 0.5s ease 0.3s forwards; } .u-service-carousel-wrap .detail-content p { margin-bottom: 20px; color: #555; opacity: 0; transform: translateY(10px); line-height: 1.5; } .u-service-carousel-wrap .detail-content p.detail-content-p-line-height-2 { line-height: 2; text-indent: 2em; margin-bottom: 10px; } .u-service-carousel-wrap .detail-content-list-arrow { list-style: none; padding-left: 0; margin: 0 0 20px; } .u-service-carousel-wrap .detail-content-list-arrow li { line-height: 1.5; position: relative; padding-left: 1.25em; margin-bottom: 10px; color: #555; opacity: 0; transform: translateY(10px); } .u-service-carousel-wrap .detail-content-list-arrow li::before { content: '\f013'; font-family: 'Font Awesome 6 Free'; font-weight: 900; position: absolute; left: 0; top: 0.1em; font-size: 0.95em; color: var(--primary-color); animation: ucarousel-spin 4s linear infinite; } .u-service-carousel-wrap .detail-content-list-arrow li:nth-child(1) { animation: ucarousel-fadeInUp 0.5s ease 0.5s forwards; } .u-service-carousel-wrap .detail-content-list-arrow li:nth-child(2) { animation: ucarousel-fadeInUp 0.5s ease 0.6s forwards; } .u-service-carousel-wrap .detail-content-list-arrow li:nth-child(3) { animation: ucarousel-fadeInUp 0.5s ease 0.7s forwards; } /* ×âÁÞά½¨ÏêÇéÒ³£ºÁбíÏîÐмä¾àΪµ±Ç°µÄ 2 ±¶ */ .u-service-carousel-wrap .detail-container[data-element-id="12"] .detail-content-list-arrow li { line-height: 2; } /* ×âÁÞά½¨ÏêÇéÒ³£ºdetail-mindmap ÄÚÁ½ÕÅͼƬ²¢ÅÅ¡¢µÈ´óÀ­Éì */ .u-service-carousel-wrap .detail-container[data-element-id="12"] .detail-mindmap.detail-mindmap-rental-images-wrap { display: flex; align-items: stretch; } .u-service-carousel-wrap .detail-container[data-element-id="12"] .detail-mindmap-rental-images { display: flex; gap: 12px; width: 100%; height: 100%; min-height: 0; flex: 1; min-width: 0; } .u-service-carousel-wrap .detail-container[data-element-id="12"] .detail-mindmap-rental-images img { flex: 1 1 0; min-width: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px; } /* UPEÅàѵÏêÇéÒ³£ºdetail-mindmap ÄÚÁ½ÕÅͼƬ²¢ÅÅ¡¢µÈ´óÀ­Éì */ .u-service-carousel-wrap .detail-container[data-element-id="30"] .detail-mindmap.detail-mindmap-upe-images-wrap { display: flex; align-items: stretch; } .u-service-carousel-wrap .detail-container[data-element-id="30"] .detail-mindmap-upe-images { display: flex; gap: 12px; width: 100%; height: 100%; min-height: 0; flex: 1; min-width: 0; } .u-service-carousel-wrap .detail-container[data-element-id="30"] .detail-mindmap-upe-images img { flex: 1 1 0; min-width: 0; width: 100%; height: 100%; object-fit: fill; display: block; border-radius: 12px; } .u-service-carousel-wrap .detail-content p:nth-child(1), .u-service-carousel-wrap .detail-content p:nth-child(2) { animation: ucarousel-fadeInUp 0.5s ease 0.4s forwards; } .u-service-carousel-wrap .detail-content p:nth-child(3) { animation: ucarousel-fadeInUp 0.5s ease 0.6s forwards; } .u-service-carousel-wrap .detail-content p:nth-child(4) { animation: ucarousel-fadeInUp 0.5s ease 0.8s forwards; } .u-service-carousel-wrap .detail-content p:nth-child(5) { animation: ucarousel-fadeInUp 0.5s ease 1s forwards; } .u-service-carousel-wrap .detail-content p:nth-child(6) { animation: ucarousel-fadeInUp 0.5s ease 1s forwards; } .u-service-carousel-wrap .detail-content-row { display: flex; gap: 24px; align-items: stretch; margin-top: 8px; } .u-service-carousel-wrap .detail-content-row > * { opacity: 0; } .u-service-carousel-wrap .detail-container.active .detail-content-row > * { animation: ucarousel-fadeIn 0.5s ease 0.2s forwards; } /* AIÉý¼¶ÏêÇéÒ³£º¿¨Æ¬ÐüÍ£ÏìӦʽ½»»¥¶¯»­£¨¶ÀÁ¢¶¨Ãû£¬¸´Óà d6z4r2q0ketc ²¼¾Ö£© */ .u-service-carousel-wrap .detail-container[data-element-id="11"] .ai-upgrade-cards-wrap { position: relative; display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; gap: 24px; padding-top: 0; padding-bottom: 0; width: 100%; } .u-service-carousel-wrap .detail-container[data-element-id="11"] .ai-upgrade-card { position: relative; display: flex; justify-content: center; align-items: flex-start; flex: 1 1 calc(50% - 12px); min-width: 260px; height: 300px; border-radius: 20px; transition: 0.5s; box-shadow: none; padding-top: 50px; padding-bottom: 0; } /* AIÉý¼¶Á½ÕÅ¿¨Æ¬±ðÀëʹÓÃÆ·ÅÆÉ«²¼¾° */ .u-service-carousel-wrap .detail-container[data-element-id="11"] .ai-upgrade-card:nth-child(1) { background: #084397; } .u-service-carousel-wrap .detail-container[data-element-id="11"] .ai-upgrade-card:nth-child(2) { background: #0D9488; } .u-service-carousel-wrap .detail-container[data-element-id="11"] .ai-upgrade-card:hover { height: 420px; } .u-service-carousel-wrap .detail-container[data-element-id="11"] .ai-upgrade-card-img-box { position: absolute; top: 20px; left: 5%; width: 90%; aspect-ratio: 377 / 198; background: #333; border-radius: 12px; overflow: hidden; transition: 0.5s; } .u-service-carousel-wrap .detail-container[data-element-id="11"] .ai-upgrade-card:hover .ai-upgrade-card-img-box { top: 20px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); } .u-service-carousel-wrap .detail-container[data-element-id="11"] .ai-upgrade-card-img-box img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: fill; } .u-service-carousel-wrap .detail-container[data-element-id="11"] .ai-upgrade-card-content { position: absolute; top: 221px; width: 100%; padding: 0 30px; text-align: center; overflow: visible; z-index: 2; transition: 0.4s ease; } .u-service-carousel-wrap .detail-container[data-element-id="11"] .ai-upgrade-card:hover .ai-upgrade-card-content { top: 221px; } .u-service-carousel-wrap .detail-container[data-element-id="11"] .ai-upgrade-card-content h2 { font-size: 1.2rem; font-weight: 700; color: #fff; height: 60px; line-height: 60px; } /* ¾ßÌå×¢Ã÷Óë°´Å¥£ºÍ¨Àý״̬°µ²Ø£¬Ðüͣʱ½¥ÏÔ£¬Îı¾¸ß¶È×ÔÊÊÓ¦ */ .u-service-carousel-wrap .detail-container[data-element-id="11"] .ai-upgrade-card-content p, .u-service-carousel-wrap .detail-container[data-element-id="11"] .ai-upgrade-card-content a { opacity: 0; transform: translateY(8px); max-height: 0; overflow: hidden; transition: opacity 0.35s ease, transform 0.35s ease, max-height 0.35s ease; } .u-service-carousel-wrap .detail-container[data-element-id="11"] .ai-upgrade-card:hover .ai-upgrade-card-content p, .u-service-carousel-wrap .detail-container[data-element-id="11"] .ai-upgrade-card:hover .ai-upgrade-card-content a { opacity: 1; transform: translateY(0); max-height: 200px; } .u-service-carousel-wrap .detail-container[data-element-id="11"] .ai-upgrade-card-content p { color: #fff; margin: 8px 0 0 0; font-size: 0.95rem; line-height: 1.5; } .u-service-carousel-wrap .detail-container[data-element-id="11"] .ai-upgrade-card-content a { position: relative; top: 15px; display: inline-block; padding: 5px 25px; text-decoration: none; background: rgba(255,255,255,0.15); color: #fff; font-weight: 500; border-radius: 6px; border: 1px solid rgba(255,255,255,0.4); } .u-service-carousel-wrap .detail-container[data-element-id="11"] .ai-upgrade-card-content a:hover { opacity: 0.9; } @media (max-width: 600px) { .u-service-carousel-wrap .detail-container[data-element-id="11"] .ai-upgrade-card { flex: 1 1 100%; min-width: 0; border-radius: 15px; } .u-service-carousel-wrap .detail-container[data-element-id="11"] .ai-upgrade-card-img-box { left: 5%; width: 90%; border-radius: 10px; } .u-service-carousel-wrap .detail-container[data-element-id="11"] .ai-upgrade-card-content p { font-size: 0.8rem; } .u-service-carousel-wrap .detail-container[data-element-id="11"] .ai-upgrade-card-content a { font-size: 0.9rem; } } .u-service-carousel-wrap .detail-content-left { width: 360px; flex: 0 0 360px; min-width: 0; } /* ά±£Ë¼Ï뵼ͼ£º°×µ×¡¢ÎÞ±í¿òÒõÓ°¡¢ÓÒ²à¿í¶È×ÔÊÊÓ¦¡¢¸ß¶Å×ë×ó²à°¸ë¹µÈ¸ß */ .u-service-carousel-wrap .detail-mindmap { position: relative; flex: 1; min-width: 200px; width: 0; align-self: stretch; min-height: 0; background: #fff; border-radius: 16px; overflow: hidden; container-type: inline-size; container-name: detail-mindmap; } /* ÏîÄ¿ÖÎÀí£ºÁ½Áеײ¿¶ÔÆ루Óë :has(.detail-stats-related-cards) µÄ align-items:end Ò»Ö£©£¬×ó²àÄÚÈÝÇøÓ롸ÓйطþÎñ¡¹µ×±ßÆëƽ */ .u-service-carousel-wrap #detailContainerProjectManagement .detail-body { align-items: end; } .u-service-carousel-wrap #detailContainerProjectManagement .detail-content { display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; } .u-service-carousel-wrap #detailContainerProjectManagement .detail-content-row { flex: 0 1 auto; min-height: 0; display: flex; align-items: stretch; } /* UCEÈÏÖ¤£ºÓÒ²àÈýͼÈÝÆ÷¸ß¶Å×ë×ó²à¡¸²úÆ·ÁÁµã+×¢Ã÷ÎÄ×Ö¡¹µ×²¿¶ÔÆë */ .u-service-carousel-wrap #detailContainerUceCertification .detail-content { display: flex; flex-direction: column; min-height: 0; } .u-service-carousel-wrap #detailContainerUceCertification .detail-content-row { flex: 1 1 auto; min-height: 0; align-items: stretch; } .u-service-carousel-wrap #detailContainerUceCertification .detail-mindmap { display: flex; flex: 1 1 auto; align-self: stretch; min-height: 0; height: 100%; } .u-service-carousel-wrap #detailContainerUceCertification .detail-mindmap > div { display: flex; gap: 16px; flex: 1 1 auto; min-height: 0; height: 60%; align-self: flex-end; align-items: stretch; width: 100%; } .u-service-carousel-wrap #detailContainerUceCertification .detail-mindmap > div > img { flex: 0 0 auto; width: 100% !important; height: auto !important; max-height: 100% !important; display: block; object-fit: contain !important; object-position: center; background: #fff; } /* UCEÈÏÖ¤£º¸´ÓÃÏîÄ¿ÖÎÀí²¼¾Öʱ£¬Í¼Æ¬°´µ±Ç°³ß´çµÄ50%չʾ²¢¾ÓÖÐ */ .u-service-carousel-wrap #detailContainerUceCertification .detail-mindmap.detail-mindmap--project-management-image { display: flex; align-items: center; justify-content: center; } .u-service-carousel-wrap #detailContainerUceCertification .detail-mindmap.detail-mindmap--project-management-image .project-management-flow-image { position: static; width: 65%; height: auto; max-height: 65%; object-fit: contain; object-position: center; } /* ÏîÄ¿ÖÎÀí£ºÍ¼Æ¬ÆÌÂú mindmap ÈÝÆ÷£»¸¸¼¶ÔÚ detail-content-row ÄÚÓë×ó²à°¸ë¹µÈ¸ß£¬µ×±ßÓëÓйطþÎñÁжÔÆë */ .u-service-carousel-wrap #detailContainerProjectManagement .detail-mindmap.detail-mindmap--project-management-image { position: relative; flex: 1 1 0; min-width: 200px; min-height: 0; width: 0; align-self: stretch; box-sizing: border-box; overflow: hidden; border-radius: 16px; } .u-service-carousel-wrap #detailContainerProjectManagement .detail-mindmap--project-management-image .project-management-flow-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; object-position: center; } /* ¹ú¼Êά±££ºÓë¹úÄÚά±£Í¬¿î×óÓÒ·ÖÀ¸£¬ÓҲ൥ͼÆÌÂú mindmap Çø */ .u-service-carousel-wrap #detailContainerUservice26 .detail-body { align-items: end; } .u-service-carousel-wrap #detailContainerUservice26 .detail-content { display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; } .u-service-carousel-wrap #detailContainerUservice26 .detail-content-row { flex: 0 1 auto; min-height: 0; display: flex; align-items: stretch; } .u-service-carousel-wrap #detailContainerUservice26 .detail-mindmap.detail-mindmap--project-management-image { position: relative; flex: 1 1 0; min-width: 200px; min-height: 0; width: 0; align-self: stretch; box-sizing: border-box; overflow: hidden; border-radius: 16px; } .u-service-carousel-wrap #detailContainerUservice26 .detail-mindmap--project-management-image .project-management-flow-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; object-position: center; } /* U½á¹¹£ºÓë¹úÄÚά±£Í¬¿î×óÓÒ·ÖÀ¸£¬ÓҲ൥ͼÆÌÂú mindmap Çø */ .u-service-carousel-wrap #detailContainerUservice29 .detail-body { align-items: end; } .u-service-carousel-wrap #detailContainerUservice29 .detail-content { display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; } .u-service-carousel-wrap #detailContainerUservice29 .detail-content-row { flex: 0 1 auto; min-height: 0; display: flex; align-items: stretch; } .u-service-carousel-wrap #detailContainerUservice29 .detail-mindmap.detail-mindmap--project-management-image { position: relative; flex: 1 1 0; min-width: 200px; min-height: 0; width: 0; align-self: stretch; box-sizing: border-box; overflow: hidden; border-radius: 16px; } .u-service-carousel-wrap #detailContainerUservice29 .detail-mindmap--project-management-image .project-management-flow-image { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; object-fit: contain; object-position: center; } /* Êý×ÖÄÚÈÝ£ºÈýÕÅ GIF ²¢ÅÅչʾ£¨ÓÒ²à mindmap ÈÝÆ÷£© */ .u-service-carousel-wrap #detailContainerUservice28 .detail-body { align-items: end; } .u-service-carousel-wrap #detailContainerUservice28 .detail-content { display: flex; flex-direction: column; min-height: 0; box-sizing: border-box; } .u-service-carousel-wrap #detailContainerUservice28 .detail-content-row { flex: 0 1 auto; min-height: 0; display: flex; align-items: stretch; } .u-service-carousel-wrap #detailContainerUservice28 .detail-mindmap.detail-mindmap--digital-gif-grid { position: relative; flex: 1 1 0; min-width: 200px; min-height: 0; width: 0; align-self: flex-start; aspect-ratio: 2.5 / 1; box-sizing: border-box; overflow: hidden; border-radius: 16px; } .u-service-carousel-wrap #detailContainerUservice28 .detail-mindmap--digital-gif-grid .digital-gif-grid { width: 100%; height: 100%; display: flex; gap: 12px; padding: 12px; box-sizing: border-box; align-items: stretch; } .u-service-carousel-wrap #detailContainerUservice28 .detail-mindmap--digital-gif-grid .digital-gif-grid img { flex: 1 1 0; min-width: 0; width: 100%; height: 100%; object-fit: fill; display: block; border-radius: 12px; } .u-service-carousel-wrap .detail-mindmap-bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .u-service-carousel-wrap .detail-mindmap-bg.detail-mindmap-bg-comparison { pointer-events: auto; z-index: 1; } .u-service-carousel-wrap .detail-mindmap-bg-comparison .comparison-embed-container { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 12px; } .u-service-carousel-wrap .detail-mindmap-bg-comparison .comparison-container { position: relative; width: 100%; flex: 1; min-height: 180px; border-radius: 12px; overflow: hidden; box-shadow: 0 8px 24px rgba(0,0,0,0.12); border: 1px solid rgba(8,67,151,0.12); cursor: default; } .u-service-carousel-wrap .detail-mindmap-bg-comparison .image-layer { position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover; background-position: center; } .u-service-carousel-wrap .detail-mindmap-bg-comparison .bottom-layer { background-image: url('https://gtsaitest.oss-cn-guangzhou.aliyuncs.com/images/Value-added_Services_Unilumin/Value-added_Services_Unilumin/bottom.jpg'); z-index: 1; } .u-service-carousel-wrap .detail-mindmap-bg-comparison .middle-layer { background-image: url('https://gtsaitest.oss-cn-guangzhou.aliyuncs.com/images/Value-added_Services_Unilumin/Value-added_Services_Unilumin/middle.jpg'); z-index: 2; clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%); } .u-service-carousel-wrap .detail-mindmap-bg-comparison .top-layer { background-image: url('https://gtsaitest.oss-cn-guangzhou.aliyuncs.com/images/Value-added_Services_Unilumin/Value-added_Services_Unilumin/top.jpg'); z-index: 3; clip-path: polygon(0 0, 30% 0, 30% 100%, 0 100%); } .u-service-carousel-wrap .detail-mindmap-bg-comparison .slider-control { position: absolute; top: 0; height: 100%; width: 2px; background: rgba(255,255,255,0.9); z-index: 10; cursor: grab; display: flex; align-items: flex-end; justify-content: center; } .u-service-carousel-wrap .detail-mindmap-bg-comparison .slider-control:active { cursor: grabbing; } .u-service-carousel-wrap .detail-mindmap-bg-comparison .slider-control.middle-slider { left: 50%; transform: translateX(-50%); background: #00f2fe; box-shadow: 0 0 12px #00f2fe; } .u-service-carousel-wrap .detail-mindmap-bg-comparison .slider-control.top-slider { left: 30%; transform: translateX(-50%); background: #43e97b; box-shadow: 0 0 12px #43e97b; } .u-service-carousel-wrap .detail-mindmap-bg-comparison .slider-handle { width: 28px; height: 28px; background: rgba(255,255,255,0.95); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: #333; font-size: 0.9rem; box-shadow: 0 4px 12px rgba(0,0,0,0.2); } .u-service-carousel-wrap .detail-mindmap-bg-comparison .slider-handle i { width: 10px; height: 10px; font-size: 10px; display: inline-flex; align-items: center; justify-content: center; } .u-service-carousel-wrap .detail-mindmap-bg-comparison .slider-control.middle-slider .slider-handle { background: #00f2fe; color: white; } .u-service-carousel-wrap .detail-mindmap-bg-comparison .slider-control.top-slider .slider-handle { background: #43e97b; color: white; } .u-service-carousel-wrap .detail-mindmap-bg-comparison .tooltip { position: absolute; left: 0; top: 0; background: rgba(0,0,0,0.85); color: white; padding: 8px 14px; border-radius: 8px; font-size: 0.875rem; z-index: 100; opacity: 0; transition: opacity 0.2s; pointer-events: none; white-space: nowrap; } .u-service-carousel-wrap .detail-mindmap-bg-comparison .tooltip.show { opacity: 1; } .u-service-carousel-wrap .detail-mindmap-bg-comparison .comparison-zone-label { position: absolute; top: 50%; left: 0; transform: translateY(-50%); z-index: 5; pointer-events: none; opacity: 0.6; color: #fff; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 6px; } .u-service-carousel-wrap .detail-mindmap-bg-comparison .comparison-zone-label .zone-logo { font-size: 1.5rem; line-height: 1; } .u-service-carousel-wrap .detail-mindmap-bg-comparison .comparison-zone-label .zone-text { font-size: 0.75rem; white-space: nowrap; text-shadow: 0 1px 2px rgba(0,0,0,0.5); } /* У¶Ô·þÎñÁ½²ã¶Ô±È£º±êÇ©ÎÞ logo£¬ÎÄ×Ö×ֺŷŴó 50%£¬ÏÔʾÓÚͼƬÉÏ·½ 20% ÇøÓò£¬ÎÄ×ÖͨÃ÷¶È 30% */ /* У¶Ô·þÎñÁ½²ã¶Ô±È£º¶Ô±Èͼ×ÔÊÊÓ¦ÈÝÆ÷£¬Ëæ´°¿ÚÀ­Éì */ .u-service-carousel-wrap .detail-mindmap-bg-comparison-two-layer .comparison-embed-container { display: flex; flex-direction: column; min-height: 0; } .u-service-carousel-wrap .detail-mindmap-bg-comparison-two-layer .comparison-container { flex: 1 1 0; min-height: 0; } .u-service-carousel-wrap .detail-mindmap-bg-comparison-two-layer .image-layer { background-size: 100% 100%; background-position: center; background-repeat: no-repeat; } .u-service-carousel-wrap .detail-mindmap-bg-comparison-two-layer .bottom-layer { background-image: url('https://gtsaitest.oss-cn-guangzhou.aliyuncs.com/images/Value-added_Services_Unilumin/Value-added_Services_Unilumin/%E6%A0%A1%E6%AD%A3%E5%90%8E_resized.jpg'); } .u-service-carousel-wrap .detail-mindmap-bg-comparison-two-layer .middle-layer { background-image: url('https://gtsaitest.oss-cn-guangzhou.aliyuncs.com/images/Value-added_Services_Unilumin/Value-added_Services_Unilumin/%E6%A0%A1%E6%AD%A3%E5%89%8D_resized.jpg'); } .u-service-carousel-wrap .detail-mindmap-bg-comparison-two-layer .comparison-zone-label { top: 10%; transform: translateY(-50%); opacity: 0.7; } .u-service-carousel-wrap .detail-mindmap-bg-comparison-two-layer .comparison-zone-label .zone-text { font-size: 1.125rem; } /* У¶Ô·þÎñÁ½²ã¶Ô±È£º»¬¿éÎÞ·¢¹â£¬»ÒÉ«·ç¸ñ */ .u-service-carousel-wrap .detail-mindmap-bg-comparison-two-layer .slider-control.middle-slider { background: rgba(120,120,120,0.9); box-shadow: none; } .u-service-carousel-wrap .detail-mindmap-bg-comparison-two-layer .slider-control.middle-slider .slider-handle { background: #6b6b6b; color: #fff; box-shadow: 0 2px 8px rgba(0,0,0,0.2); } .u-service-carousel-wrap .mindmap-bg-circle { position: absolute; border-radius: 50%; background: rgba(8, 67, 151, 0.08); animation: mindmapBgFloat 20s infinite linear; opacity: 0; } .u-service-carousel-wrap .mindmap-bg-line { position: absolute; background: rgba(8, 67, 151, 0.04); transform-origin: 0 0; animation: mindmapLineMove 25s infinite linear; } .u-service-carousel-wrap .mindmap-bg-dot { position: absolute; width: 6px; height: 6px; background-color: rgba(8, 67, 151, 0.12); border-radius: 50%; animation: mindmapDotMove 30s infinite linear; } /* ÏÖ³¡Î¬½¨ - ¹ÊÕÏÀàÐÍ grid ǶÈëÔÚ detail-mindmap-bg ÄÚ£¬±£Áô²¼¾°²ã */ .u-service-carousel-wrap .detail-mindmap-bg .detail-mindmap-bg-layer { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .u-service-carousel-wrap .detail-mindmap-bg:has(.grid-container) .detail-mindmap-bg-layer, .u-service-carousel-wrap .detail-mindmap-bg:has(.scenarios-container) .detail-mindmap-bg-layer { display: none; } .u-service-carousel-wrap .detail-mindmap-bg .detail-mindmap-grid-embed { position: absolute; inset: 0; z-index: 1; display: flex; align-items: stretch; justify-content: center; padding: 0; box-sizing: border-box; pointer-events: none; } .u-service-carousel-wrap .detail-mindmap-bg .detail-mindmap-grid-embed .grid-container { pointer-events: auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 1fr; gap: 8px 12px; width: 100%; height: 100%; max-width: 100%; margin: 0; align-content: stretch; min-height: 0; } .u-service-carousel-wrap .detail-mindmap-bg .grid-item { position: relative; display: flex; flex-direction: column; min-height: 0; min-width: 0; background-color: #f9f9f9; border-radius: 12px; overflow: hidden; box-shadow: 0 5px 15px rgba(8, 67, 151, 0.1); transition: opacity 1s ease, transform 1s ease, box-shadow 0.3s ease; opacity: 0; transform: translateY(20px); } .u-service-carousel-wrap .detail-mindmap-bg .grid-item:hover { transform: translateY(-5px); box-shadow: 0 8px 28px rgba(8, 67, 151, 0.28), 0 0 0 2px rgba(8, 67, 151, 0.15); } .u-service-carousel-wrap .detail-mindmap-bg .grid-item .image-container { position: relative; width: 100%; flex: 1; min-height: 0; overflow: hidden; background-color: #eef5ff; display: flex; align-items: center; justify-content: center; } .u-service-carousel-wrap .detail-mindmap-bg .grid-item .image-container img { width: 100%; height: 100%; object-fit: fill; display: block; pointer-events: none; } .u-service-carousel-wrap .detail-container[data-element-id="8"] .detail-mindmap-bg .grid-item .image-container img { object-fit: cover; object-position: center top; } .u-service-carousel-wrap .detail-mindmap-bg .grid-item .mask { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; pointer-events: none; transition: opacity 0.35s ease; } .u-service-carousel-wrap .detail-mindmap-bg .grid-item .image-container.image-container-hover .mask { opacity: 0; } .u-service-carousel-wrap .detail-mindmap-bg .grid-item .checkmark { position: absolute; left: 50%; top: 40%; width: 35px; height: 35px; border-radius: 50%; background-color: rgba(76, 175, 80, 0); display: flex; align-items: center; justify-content: center; transform: translate(-50%, -50%) scale(0); transition: transform 0.35s ease-out; pointer-events: none; } .u-service-carousel-wrap .detail-mindmap-bg .grid-item .checkmark svg { width: 30px; height: 30px; stroke: #fff; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; fill: none; stroke-dasharray: 100; stroke-dashoffset: 100; transition: stroke-dashoffset 0.5s ease-in-out; } .u-service-carousel-wrap .detail-mindmap-bg .grid-item .description { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: 4px 8px; text-align: center; background-color: rgba(255, 255, 255, 0.95); color: #084397; font-weight: 600; font-size: 0.85rem; min-height: 26px; line-height: 1.3; display: flex; align-items: center; justify-content: center; border-top: 1px solid rgba(8, 67, 151, 0.12); pointer-events: none; } @media (max-width: 992px) { .u-service-carousel-wrap .detail-mindmap-bg .detail-mindmap-grid-embed .grid-container { grid-template-columns: repeat(2, 1fr); grid-template-rows: 1fr 1fr 1fr; } } @media (max-width: 576px) { .u-service-carousel-wrap .detail-mindmap-bg .detail-mindmap-grid-embed { align-items: flex-start; } .u-service-carousel-wrap .detail-mindmap-bg .detail-mindmap-grid-embed .grid-container { grid-template-columns: 1fr; grid-template-rows: auto; } .u-service-carousel-wrap .detail-mindmap-bg .grid-item { min-height: auto; } .u-service-carousel-wrap .detail-mindmap-bg .grid-item .image-container { min-height: 150px; } } /* ÏÖ³¡±£ÏÕÏêÇéÒ³£ººÏÓó¡¾°¿¨Æ¬£¨logo + ±êÌ⣬ÎÞ·­×ª/ÐüÍ£¶¯»­£© */ .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenarios-container { pointer-events: auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); column-gap: 12.5px; row-gap: 12.5px; width: 100%; height: 100%; max-width: 100%; margin: 0; align-content: stretch; min-height: 0; } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-card { width: 100%; min-width: 0; min-height: 0; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 8px 25px rgba(8, 67, 151, 0.08); border: 1px solid #eee; display: flex; flex-direction: column; position: relative; } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-image { width: 100%; height: 90px; min-height: 50px; flex-shrink: 0; background-color: rgba(8, 67, 151, 0.1); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-image::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 0%, transparent 35%, rgba(255,255,255,0.4) 50%, transparent 65%, transparent 100%); transform: translateX(-100%); animation: scenarioShine 7.8s ease-in-out infinite; z-index: 1; pointer-events: none; } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-card:nth-child(1) .scenario-image::before, .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-card:nth-child(4) .scenario-image::before { animation-delay: 0s; } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-card:nth-child(2) .scenario-image::before, .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-card:nth-child(5) .scenario-image::before { animation-delay: 2.6s; } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-card:nth-child(3) .scenario-image::before, .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-card:nth-child(6) .scenario-image::before { animation-delay: 5.2s; } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-image .scenario-icon { position: absolute; left: 50%; top: 30%; transform: translate(-50%, -50%); } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-icon { font-size: 35px; color: #084397; opacity: 0.8; } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-card:nth-child(1) .scenario-image { background: linear-gradient(135deg, #084397, #4a8eff); } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-card:nth-child(1) .scenario-icon { color: white; opacity: 1; } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-card:nth-child(2) .scenario-image { background: linear-gradient(135deg, #ff7e5f, #feb47b); } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-card:nth-child(2) .scenario-icon { color: white; opacity: 1; } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-card:nth-child(3) .scenario-image { background: linear-gradient(135deg, #6a11cb, #2575fc); } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-card:nth-child(3) .scenario-icon { color: white; opacity: 1; } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-card:nth-child(4) .scenario-image { background: linear-gradient(135deg, #11998e, #38ef7d); } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-card:nth-child(4) .scenario-icon { color: white; opacity: 1; } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-card:nth-child(5) .scenario-image { background: linear-gradient(135deg, #fc4a1a, #f7b733); } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-card:nth-child(5) .scenario-icon { color: white; opacity: 1; } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-card:nth-child(6) .scenario-image { background: linear-gradient(135deg, #8e2de2, #4a00e0); } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-card:nth-child(6) .scenario-icon { color: white; opacity: 1; } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-content { padding: 0 12px; margin-top: -50px; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; text-align: center; } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-content .scenario-title { color: #fff; font-size: 1rem; font-weight: 700; margin: 0; border-left: none; padding-left: 0; text-align: center; } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-content .scenario-description { display: none; } @media (max-width: 768px) { .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed { align-items: flex-start; } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenarios-container { height: auto; grid-template-columns: 1fr; grid-template-rows: auto; row-gap: 12.5px; } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-card { min-height: auto; } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-image { height: auto; min-height: 90px; flex: 1; } .u-service-carousel-wrap .detail-container[data-element-id="7"] .detail-mindmap-grid-embed .scenario-content { min-height: auto; flex: 0 0 auto; } } @keyframes scenarioShine { 0% { transform: translateX(-100%); } 32.05% { transform: translateX(100%); } 32.06% { transform: translateX(-100%); } 100% { transform: translateX(-100%); } } @keyframes mindmapBgFloat { 0% { transform: translate(0, 0) rotate(0deg) scale(1); opacity: 0; } 10% { opacity: 0.5; } 90% { opacity: 0.5; } 100% { transform: translate(calc(100% - 80px), calc(100% - 80px)) rotate(360deg) scale(1.5); opacity: 0; } } @keyframes mindmapLineMove { 0% { transform: rotate(0deg) scaleX(0); opacity: 0; } 20% { opacity: 0.6; } 80% { opacity: 0.6; } 100% { transform: rotate(180deg) scaleX(1); opacity: 0; } } @keyframes mindmapDotMove { 0% { transform: translate(0, 0); opacity: 0.2; } 25% { transform: translate(20px, 10px); opacity: 0.8; } 50% { transform: translate(0, 20px); opacity: 1; } 75% { transform: translate(-20px, 10px); opacity: 0.8; } 100% { transform: translate(0, 0); opacity: 0.2; } } /* ·µ³§Î¬½¨Á÷³Ìͼ£º´Ó×óµ½ÓÒ£¬Ö÷ÌâÉ« #084397£»ÈÝÆ÷¿í¶È±äխʱ logo ×ÔÊÊÓ¦Ëõ·Å */ .u-service-carousel-wrap .detail-mindmap .flow-wrap { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 20px 24px; container-type: inline-size; container-name: flow-wrap; } .u-service-carousel-wrap .detail-mindmap .flow { display: flex; flex-direction: row; align-items: center; gap: 6px; flex-wrap: nowrap; color: #084397; font-size: 2.5rem; } @container flow-wrap (max-width: 520px) { .u-service-carousel-wrap .detail-mindmap .flow { font-size: 2rem; } .u-service-carousel-wrap .detail-mindmap .flow-seg-3rows { min-height: 40px; } } @container flow-wrap (max-width: 400px) { .u-service-carousel-wrap .detail-mindmap .flow { font-size: 1.6rem; } .u-service-carousel-wrap .detail-mindmap .flow-seg-3rows { min-height: 32px; } } @container flow-wrap (max-width: 300px) { .u-service-carousel-wrap .detail-mindmap .flow { font-size: 1.2rem; } .u-service-carousel-wrap .detail-mindmap .flow-seg-3rows { min-height: 24px; } } .u-service-carousel-wrap .detail-mindmap .flow i { color: #084397; } .u-service-carousel-wrap .detail-mindmap .flow .fa-arrow-right-long { font-size: 0.5em; margin-left: 0.4em; margin-right: 0.4em; } .u-service-carousel-wrap .detail-mindmap .flow-seg { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .u-service-carousel-wrap .detail-mindmap .flow-seg-user-box { display: flex; align-items: center; gap: 8px; } .u-service-carousel-wrap .detail-mindmap .flow-seg-3rows { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 4px; min-height: 48px; } .u-service-carousel-wrap .detail-mindmap .flow-seg-2rows-13 { display: flex; flex-direction: column; align-items: center; justify-content: space-between; min-height: 48px; gap: 0; } .u-service-carousel-wrap .detail-mindmap .flow-seg-2rows-13 .flow-row-1 { order: 0; } .u-service-carousel-wrap .detail-mindmap .flow-seg-2rows-13 .flow-row-3 { order: 1; } .u-service-carousel-wrap .detail-mindmap .flow-seg-2rows-13 .flow-row-spacer { height: 24px; flex-shrink: 0; } .u-service-carousel-wrap .detail-mindmap .flow-box-switch { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 1.25em; min-width: 1.25em; height: 1em; } .u-service-carousel-wrap .detail-mindmap .flow-box-switch i { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transition: opacity 0.5s ease; } .u-service-carousel-wrap .detail-mindmap .flow-box-switch i.fa-box-open { opacity: 1; } .u-service-carousel-wrap .detail-mindmap .flow-box-switch i.fa-box { opacity: 0; } .u-service-carousel-wrap .detail-mindmap .flow-box-switch.switched i.fa-box-open { opacity: 0; } .u-service-carousel-wrap .detail-mindmap .flow-box-switch.switched i.fa-box { opacity: 1; } .u-service-carousel-wrap .detail-mindmap .flow-flip { transform: scaleX(-1); } .u-service-carousel-wrap .detail-mindmap .flow > * { opacity: 0; } .u-service-carousel-wrap .detail-mindmap .flow > *:first-child { animation: flowColFadeIn 0.45s ease-out forwards; animation-delay: 0s; } .u-service-carousel-wrap .detail-mindmap .flow.flow-rest-play > *:not(:first-child) { animation: flowColFadeIn 0.45s ease-out forwards; } @keyframes flowColFadeIn { from { opacity: 0; } to { opacity: 1; } } /* ·µ³§Î¬½¨Á÷³Ìͼѭ»·£º´ÓÓÒµ½×ó·­×ªÓë°âÊÖÐýת */ .u-service-carousel-wrap .detail-mindmap .flow-seg { transition: transform 0.5s ease; } .u-service-carousel-wrap .detail-mindmap .flow-seg.flip-v { transform: scaleY(-1); } .u-service-carousel-wrap .detail-mindmap .flow-seg.flip-h:not(.flow-seg-3rows-box):not(.flow-seg-3rows-factory) { transform: scaleX(-1); } .u-service-carousel-wrap .detail-mindmap .flow-seg-wrench.flow-wrench-rotate > i { animation: flowWrenchRotate 0.5s ease-in-out; } @keyframes flowWrenchRotate { 0% { transform: rotate(0deg); } 50% { transform: rotate(15deg); } 100% { transform: rotate(0deg); } } /* ÈýÐмýÍ·£º°´Ã¿¸ö¼ýÍ·µÄ¼ýÏ߶ÀÁ¢¶Ô³ÆÖᷭת£¨×÷ÓÃÔÚ×ÓÔªËØ i ÉÏ£© */ .u-service-carousel-wrap .detail-mindmap .flow-seg-3rows-box > i { transition: transform 0.5s ease; } .u-service-carousel-wrap .detail-mindmap .flow-seg-3rows-box > i:nth-child(1) { transform: translateY(-10px) rotate(-60deg); } .u-service-carousel-wrap .detail-mindmap .flow-seg-3rows-box > i:nth-child(2) { transform: none; } .u-service-carousel-wrap .detail-mindmap .flow-seg-3rows-box > i:nth-child(3) { transform: translateY(10px) rotate(60deg); } .u-service-carousel-wrap .detail-mindmap .flow-seg-3rows-box.flip-h > i:nth-child(1) { transform: translateY(-10px) rotate(-60deg) scaleX(-1); } .u-service-carousel-wrap .detail-mindmap .flow-seg-3rows-box.flip-h > i:nth-child(2) { transform: scaleX(-1); } .u-service-carousel-wrap .detail-mindmap .flow-seg-3rows-box.flip-h > i:nth-child(3) { transform: translateY(10px) rotate(60deg) scaleX(-1); } .u-service-carousel-wrap .detail-mindmap .flow-seg-3rows-factory > i { transition: transform 0.5s ease; } .u-service-carousel-wrap .detail-mindmap .flow-seg-3rows-factory > i:nth-child(1) { transform: translateY(-10px) rotate(60deg); } .u-service-carousel-wrap .detail-mindmap .flow-seg-3rows-factory > i:nth-child(2) { transform: none; } .u-service-carousel-wrap .detail-mindmap .flow-seg-3rows-factory > i:nth-child(3) { transform: translateY(10px) rotate(-60deg); } .u-service-carousel-wrap .detail-mindmap .flow-seg-3rows-factory.flip-h > i:nth-child(1) { transform: translateY(-10px) rotate(60deg) scaleX(-1); } .u-service-carousel-wrap .detail-mindmap .flow-seg-3rows-factory.flip-h > i:nth-child(2) { transform: scaleX(-1); } .u-service-carousel-wrap .detail-mindmap .flow-seg-3rows-factory.flip-h > i:nth-child(3) { transform: translateY(10px) rotate(-60deg) scaleX(-1); } .u-service-carousel-wrap .detail-mindmap .mindmap-center { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 72px; height: 72px; border-radius: 50%; background: #fff; box-shadow: 0 4px 16px rgba(0,0,0,0.12); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; animation: mindmap-pulse 3s ease-in-out infinite; z-index: 2; } @keyframes mindmap-pulse { 0%, 100% { box-shadow: 0 4px 16px rgba(0,0,0,0.12); transform: translate(-50%, -50%) scale(1); } 50% { box-shadow: 0 6px 20px rgba(0,0,0,0.18); transform: translate(-50%, -50%) scale(1.03); } } /* ×Ô¶¯Ñ²¼ìÁ÷³Ì¶¯»­£¨¸´ÓÃ˼Ï뵼ͼ-×Ô¶¯Ñ²¼ì£© */ .u-service-carousel-wrap .detail-mindmap .inspection-flow { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 20px 16px; opacity: 0; transform: translateY(10px); } .u-service-carousel-wrap .detail-container.active .detail-mindmap .inspection-flow { animation: ucarousel-fadeInUp 0.5s ease 0.2s forwards; } .u-service-carousel-wrap .detail-mindmap .inspection-flow-inner { display: flex; align-items: center; justify-content: center; gap: 0; flex-wrap: nowrap; } .u-service-carousel-wrap .detail-mindmap .inspection-flow-row { display: flex; align-items: center; gap: 0; flex-shrink: 0; } .u-service-carousel-wrap .detail-mindmap .inspection-flow-connector { flex-shrink: 0; width: 20px; margin-left: 8px; margin-right: 8px; display: flex; align-items: center; justify-content: center; color: rgba(8, 67, 151, 0.5); font-size: 0.75rem; opacity: 0; transform: scale(0.8); } .u-service-carousel-wrap .detail-mindmap .inspection-flow-connector.played { animation: arrowAppear 0.4s ease-out forwards; } .u-service-carousel-wrap .detail-mindmap .inspection-flow-connector .inspection-arrow-down { display: none; } .u-service-carousel-wrap .detail-mindmap .inspection-flow-connector .inspection-arrow-right { display: block; } .u-service-carousel-wrap .detail-mindmap .inspection-flow-connector-wrap { display: contents; } .u-service-carousel-wrap .detail-mindmap .inspection-flow-connector-spacer { display: none; } @container detail-mindmap (max-width: 500px) { .u-service-carousel-wrap .detail-mindmap .inspection-flow-inner { flex-direction: column; gap: 6px; flex-wrap: nowrap; } .u-service-carousel-wrap .detail-mindmap .inspection-flow-row2 { flex-direction: row-reverse; } .u-service-carousel-wrap .detail-mindmap .inspection-flow-row2 .inspection-arrow i { transform: scaleX(-1); } .u-service-carousel-wrap .detail-mindmap .inspection-flow-connector-wrap { display: flex; align-items: center; width: 100%; flex: 1 1 0; min-width: 0; } .u-service-carousel-wrap .detail-mindmap .inspection-flow-connector-spacer { display: block; flex: 1 1 0; min-width: 0; } .u-service-carousel-wrap .detail-mindmap .inspection-flow-connector-spacer.inspection-flow-connector-spacer-arrow { flex: 0 0 auto; width: 20px; margin: 0 8px; } .u-service-carousel-wrap .detail-mindmap .inspection-flow-connector-wrap > .inspection-flow-connector { margin-left: 0; margin-right: 0; width: auto; flex: 1 1 0; min-width: 0; display: flex; justify-content: center; } .u-service-carousel-wrap .detail-mindmap .inspection-flow-connector .inspection-arrow-right { display: none; } .u-service-carousel-wrap .detail-mindmap .inspection-flow-connector .inspection-arrow-down { display: block; } } .u-service-carousel-wrap .detail-mindmap .inspection-step { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 0; opacity: 0; transform: translateY(12px); } .u-service-carousel-wrap .detail-mindmap .inspection-step-content { display: inline-flex; flex-direction: column; align-items: center; } .u-service-carousel-wrap .detail-mindmap .inspection-step.played { animation: stepAppear 0.6s ease-out forwards; } @keyframes stepAppear { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .u-service-carousel-wrap .detail-mindmap .inspection-step-icon { width: 44px; height: 44px; border-radius: 12px; background: rgba(8, 67, 151, 0.12); color: #084397; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 8px; flex-shrink: 0; } .u-service-carousel-wrap .detail-mindmap .inspection-step-label { font-size: 11px; color: #084397; text-align: center; line-height: 1.35; max-width: 10em; margin: 0 auto; white-space: normal; word-break: keep-all; } .u-service-carousel-wrap .detail-mindmap .inspection-arrow { flex-shrink: 0; width: 20px; margin-left: 8px; margin-right: 8px; display: flex; align-items: center; justify-content: center; color: rgba(8, 67, 151, 0.5); font-size: 0.75rem; opacity: 0; transform: scale(0.8); } .u-service-carousel-wrap .detail-mindmap .inspection-arrow.played { animation: arrowAppear 0.4s ease-out forwards; } @keyframes arrowAppear { from { opacity: 0; transform: scale(0.8); } to { opacity: 1; transform: scale(1); } } .u-service-carousel-wrap .detail-mindmap .inspection-flow.hover-paused .inspection-step, .u-service-carousel-wrap .detail-mindmap .inspection-flow.hover-paused .inspection-arrow, .u-service-carousel-wrap .detail-mindmap .inspection-flow.hover-paused .inspection-flow-connector { opacity: 1 !important; transform: translateY(0) scale(1) !important; animation: none !important; } .u-service-carousel-wrap .detail-mindmap .inspection-flow-inner { opacity: 1; transition: opacity 0.5s ease-out; } .u-service-carousel-wrap .detail-mindmap .inspection-flow.flow-fade-out .inspection-flow-inner { opacity: 0; } /* Ô¶³Ìµ÷ÊÔ£ºÏêÇéÒ³¶ÀÁ¢ÈÝÆ÷¶¨Ãû£¨±ãÓÚµ¥¶Àд @container / scope ÐÎ×´£© */ .u-service-carousel-wrap .detail-content-remote-debugging { container-type: inline-size; container-name: remote-debugging; } /* Çå½à³ý³¾£º¸´Óà deepseek_html_20260317_d436d0.html µÄ¹¤¾ß¾ØÕó²¼¾Ö£¨½ö×÷ÓÃÓÚ 13£¬Ô¤·ÀÓ°ÏìÆäËûÏêÇéÒ³£© */ .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow { padding: 12px; flex-direction: column; align-items: stretch; justify-content: flex-start; } .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .tool-matrix-title { width: calc(100% - 16px); max-width: calc(1300px - 16px); margin: 0 auto 10px; height: 30px; padding: 0 14px; box-sizing: border-box; background: #084397; color: #fff; border-radius: 12px; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.5px; text-align: center; box-shadow: 0 6px 16px rgba(8, 67, 151, 0.25); display: flex; align-items: center; justify-content: center; } .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .grid-wrapper { width: 100%; max-width: 1300px; margin: 0 auto; padding: 0 8px; flex: 1 1 0; min-height: 0; box-sizing: border-box; } .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .grid-3x3 { display: grid; height: 100%; min-height: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); align-content: stretch; gap: 12px; } .u-service-carousel-wrap #detailContainerUservice13 .detail-content-left p, .u-service-carousel-wrap #detailContainerUservice13 .detail-content-left li { line-height: 2; } .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .flip-card { width: 100%; height: 100%; min-height: 0; perspective: 1800px; cursor: pointer; } .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .flip-inner { position: relative; width: 100%; height: 100%; transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1); transform-style: preserve-3d; border-radius: 16px; box-shadow: 0 12px 22px -10px rgba(0, 0, 0, 0.14); } .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .flip-card:hover .flip-inner, .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .flip-card:focus-within .flip-inner, .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .flip-card.is-hovered .flip-inner { transform: rotateY(180deg); } .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .front, .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .back { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 16px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .front { background: #e6eef9; border: 1.5px solid #084397; box-sizing: border-box; } .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .front img { width: 100%; height: 100%; object-fit: fill; display: block; transition: transform 0.3s ease; } .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .flip-card:hover .front img, .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .flip-card:focus-within .front img, .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .flip-card.is-hovered .front img { transform: scale(1.02); } .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .back { background: #084397; transform: rotateY(180deg); display: flex; align-items: center; justify-content: center; padding: 12px; box-shadow: inset 0 2px 8px rgba(255,255,255,0.3), 0 10px 18px rgba(0, 0, 0, 0.2); } .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .editable-text { width: 100%; text-align: center; font-size: 0.8rem; font-weight: 500; color: #fff; line-height: 1.4; word-break: break-word; white-space: pre-wrap; padding: 10px 8px; background: transparent; border: none; outline: none; font-family: inherit; cursor: text; border-radius: 12px; transition: background 0.15s; max-height: 100%; overflow-y: auto; } .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .editable-text.no-scrollbar { overflow: hidden; } .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .editable-text.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .editable-text.no-scrollbar::-webkit-scrollbar { width: 0; height: 0; display: none; } .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .editable-text:focus { background: rgba(255, 255, 255, 0.18); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); } .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .editable-text:empty:before { content: "ʾÀýÎÄ×Ö"; color: rgba(255,255,255,0.7); font-style: italic; font-weight: 300; } @media (max-width: 800px) { .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .grid-3x3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .editable-text { font-size: 0.8rem; } } @media (max-width: 550px) { .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .grid-3x3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .u-service-carousel-wrap #detailContainerUservice13 .inspection-flow .editable-text { font-size: 0.8rem; padding: 6px; } } /* ¶ÆĤ·þÎñ£º¸´ÓÃÇå½à³ý³¾µÄ¹¤¾ß¾ØÕó²¼¾Ö£¨¶ÀÁ¢ÓÚ 13£¬»¥²»Ó°Ï죩 */ .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow { padding: 12px; flex-direction: column; align-items: stretch; justify-content: flex-start; } .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .tool-matrix-title { width: calc(100% - 16px); max-width: calc(1300px - 16px); margin: 0 auto 10px; height: 30px; padding: 0 14px; box-sizing: border-box; background: #084397; color: #fff; border-radius: 12px; font-size: 1.05rem; font-weight: 600; letter-spacing: 0.5px; text-align: center; box-shadow: 0 6px 16px rgba(8, 67, 151, 0.25); display: flex; align-items: center; justify-content: center; } .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .grid-wrapper { width: 100%; max-width: 1300px; margin: 0 auto; padding: 0 8px; flex: 1 1 0; min-height: 0; box-sizing: border-box; } .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .grid-3x3 { display: grid; height: 100%; min-height: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); align-content: stretch; gap: 12px; } .u-service-carousel-wrap #detailContainerCoatingService .detail-content-left p, .u-service-carousel-wrap #detailContainerCoatingService .detail-content-left li { line-height: 2; } .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .flip-card { width: 100%; height: 100%; min-height: 0; perspective: 1800px; cursor: pointer; } .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .flip-inner { position: relative; width: 100%; height: 100%; transition: transform 0.55s cubic-bezier(0.23, 1, 0.32, 1); transform-style: preserve-3d; border-radius: 16px; box-shadow: 0 12px 22px -10px rgba(0, 0, 0, 0.14); } .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .flip-card:hover .flip-inner { transform: rotateY(180deg); } /* ¶ÆĤ·þÎñÐüÍ£¶µµ×£ºÔ¤·À contenteditable ¾Û½¹»òä¯ÀÀÆ÷ hover ״̬Òì³£µ¼Ö¶¯»­ÃÔʧ */ .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .flip-card:focus-within .flip-inner, .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .flip-card.is-hovered .flip-inner { transform: rotateY(180deg); } .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .front, .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .back { position: absolute; width: 100%; height: 100%; top: 0; left: 0; border-radius: 16px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .front { background: #e6eef9; border: 1.5px solid #084397; box-sizing: border-box; } .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .front img { width: 100%; height: 100%; object-fit: fill; display: block; transition: transform 0.3s ease; } .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .flip-card:hover .front img { transform: scale(1.02); } .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .flip-card:focus-within .front img, .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .flip-card.is-hovered .front img { transform: scale(1.02); } .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .back { background: #084397; transform: rotateY(180deg); display: flex; align-items: center; justify-content: center; padding: 12px; box-shadow: inset 0 2px 8px rgba(255,255,255,0.3), 0 10px 18px rgba(0, 0, 0, 0.2); } .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .editable-text { width: 100%; text-align: center; font-size: 0.8rem; font-weight: 500; color: #fff; line-height: 1.4; word-break: break-word; white-space: pre-wrap; padding: 10px 8px; background: transparent; border: none; outline: none; font-family: inherit; cursor: text; border-radius: 12px; transition: background 0.15s; max-height: 100%; overflow-y: auto; } .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .editable-text.no-scrollbar { overflow: hidden; } .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .editable-text.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .editable-text.no-scrollbar::-webkit-scrollbar { width: 0; height: 0; display: none; } .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .editable-text:focus { background: rgba(255, 255, 255, 0.18); box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5); } .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .editable-text:empty:before { content: "ʾÀýÎÄ×Ö"; color: rgba(255,255,255,0.7); font-style: italic; font-weight: 300; } @media (max-width: 800px) { .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .grid-3x3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .editable-text { font-size: 0.8rem; } } @media (max-width: 550px) { .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .grid-3x3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; } .u-service-carousel-wrap #detailContainerCoatingService .inspection-flow .editable-text { font-size: 0.8rem; padding: 6px; } } /* ÈÈÏß·þÎñ£º×ó²à´óͼ + ÓÒ²à 3x2 Çþ·ͼ±ê£¨½ö×÷ÓÃÓÚ 15£¬Ô¤·ÀÓ°ÏìÆäËüÏêÇéÒ³£© */ .u-service-carousel-wrap #detailContainerHotlineService .detail-mindmap .inspection-flow { position: relative; inset: auto; padding: 12px; display: flex; align-items: stretch; justify-content: stretch; } .u-service-carousel-wrap #detailContainerHotlineService .detail-mindmap .hotline-channels { width: 100%; display: grid; grid-template-columns: 1.2fr 1fr; gap: 12px; align-items: stretch; } .u-service-carousel-wrap #detailContainerHotlineService .detail-mindmap .hotline-channels__hero { border-radius: 16px; padding: 16px; background: radial-gradient(120% 120% at 20% 10%, rgba(77, 171, 247, 0.25) 0%, rgba(8, 67, 151, 0.12) 40%, rgba(255, 255, 255, 0.9) 100%); border: 1.5px solid rgba(8, 67, 151, 0.18); box-shadow: 0 12px 22px -12px rgba(0, 0, 0, 0.18); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; min-height: 190px; } .u-service-carousel-wrap #detailContainerHotlineService .detail-mindmap .hotline-channels__hero-icon { font-size: 54px; line-height: 1; color: rgba(8, 67, 151, 0.80); margin-bottom: 10px; } .u-service-carousel-wrap #detailContainerHotlineService .detail-mindmap .hotline-channels__hero-title { font-size: 16px; font-weight: 800; color: rgba(8, 67, 151, 0.80); letter-spacing: 0.2px; } .u-service-carousel-wrap #detailContainerHotlineService .detail-mindmap .hotline-channels__hero-subtitle { margin-top: 6px; font-size: 12px; color: rgba(8, 67, 151, 0.80); line-height: 1.4; } .u-service-carousel-wrap #detailContainerHotlineService .detail-mindmap .hotline-channels__apps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 10px; align-content: stretch; } .u-service-carousel-wrap #detailContainerHotlineService .detail-mindmap .hotline-app { border-radius: 14px; background: rgba(255, 255, 255, 0.95); border: 1.5px solid rgba(8, 67, 151, 0.15); box-shadow: 0 10px 18px -14px rgba(0, 0, 0, 0.28); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 12px 8px; color: #084397; } .u-service-carousel-wrap #detailContainerHotlineService .detail-mindmap .hotline-app i { font-size: 22px; color: rgba(8, 67, 151, 0.80); } .u-service-carousel-wrap #detailContainerHotlineService .detail-mindmap .hotline-app span { font-size: 12px; font-weight: 700; color: rgba(8, 67, 151, 0.80); } /* פ³¡ÔËά£º×ó²à 1x2 + ÓÒ²à´óͼ£¨½ö×÷ÓÃÓÚ 17£¬Ô¤·ÀÓ°ÏìÆäËüÏêÇéÒ³£© */ .u-service-carousel-wrap #detailContainerUservice17 .detail-content-left li { line-height: 2; } .u-service-carousel-wrap #detailContainerUservice17 .detail-content-row .detail-mindmap { display: block; } .u-service-carousel-wrap #detailContainerUservice17 .detail-mindmap .onsite-maintenance-gallery { position: relative; inset: auto; width: 100%; height: 230px; min-height: 230px; min-width: 0; padding: 12px; box-sizing: border-box; display: grid; grid-template-columns: 1fr 1.4fr; gap: 12px; align-items: stretch; justify-content: stretch; } .u-service-carousel-wrap #detailContainerUservice17 .detail-mindmap .onsite-maintenance-gallery__left { display: grid; height: 100%; grid-template-rows: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; min-height: 0; } .u-service-carousel-wrap #detailContainerUservice17 .detail-mindmap .onsite-maintenance-gallery__right { height: 100%; min-height: 0; } .u-service-carousel-wrap #detailContainerUservice17 .detail-mindmap .onsite-maintenance-gallery img { width: 100%; height: 100%; display: block; object-fit: cover; box-sizing: border-box; border-radius: 16px; border: 1.5px solid rgba(8, 67, 151, 0.14); box-shadow: 0 12px 22px -14px rgba(0, 0, 0, 0.24); background: #f5f7fb; } /* ¹Ì¶¨²¼¾Ö£ºÈκγߴçʼÖÕά³Ö×ó 2 ÓÒ 1£»Í¼Æ¬ÔÚ¸÷×Ô¸ñ×ÓÄÚ×ÔÊÊÓ¦ÆÌÂú */ @media (max-width: 650px) { .u-service-carousel-wrap #detailContainerHotlineService .detail-mindmap .hotline-channels { grid-template-columns: 1fr; } .u-service-carousel-wrap #detailContainerHotlineService .detail-mindmap .hotline-channels__hero { min-height: 160px; } } .u-service-carousel-wrap .mindmap-center-icon { font-size: 2.2rem; color: var(--primary-color); line-height: 1; } .u-service-carousel-wrap .mindmap-center-text { font-size: 0.6rem; line-height: 1.2; font-weight: 700; color: #111; } .u-service-carousel-wrap .mindmap-node { position: absolute; width: 56px; height: 56px; border-radius: 50%; background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,0.12); font-size: 0.6rem; line-height: 1.3; text-align: center; color: #111; font-weight: 700; z-index: 1; display: flex; align-items: center; justify-content: center; padding: 4px; animation: mindmap-node-float 4s ease-in-out infinite; } .u-service-carousel-wrap .mindmap-node-1 { left: 32.5%; top: 19.7%; transform: translate(-50%, -50%); animation-delay: 0s; } .u-service-carousel-wrap .mindmap-node-2 { left: 15%; top: 50%; transform: translate(-50%, -50%); animation-delay: 0.4s; } .u-service-carousel-wrap .mindmap-node-3 { left: 32.5%; top: 80.3%; transform: translate(-50%, -50%); animation-delay: 0.8s; } .u-service-carousel-wrap .mindmap-node-4 { left: 67.5%; top: 19.7%; transform: translate(-50%, -50%); animation-delay: 0.2s; } .u-service-carousel-wrap .mindmap-node-5 { left: 85%; top: 50%; transform: translate(-50%, -50%); animation-delay: 0.6s; } .u-service-carousel-wrap .mindmap-node-6 { left: 67.5%; top: 80.3%; transform: translate(-50%, -50%); animation-delay: 1s; } @keyframes mindmap-node-float { 0%, 100% { opacity: 1; box-shadow: 0 4px 14px rgba(0,0,0,0.12); } 50% { opacity: 0.95; box-shadow: 0 6px 18px rgba(0,0,0,0.18); } } @keyframes ucarousel-fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } @keyframes ucarousel-fadeIn { from { opacity: 0; } to { opacity: 1; } } @keyframes ucarousel-slideInRight { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: translateX(0); } } .u-service-carousel-wrap .detail-stats { background-color: #f8f9fa; border-radius: 10px; padding: 25px; border-left: 4px solid var(--primary-color); opacity: 0; transform: translateY(20px); animation: ucarousel-fadeInUp 0.5s ease 0.5s forwards; } .u-service-carousel-wrap .detail-stats.detail-stats-related-cards { display: flex; flex-direction: column; align-self: stretch; min-height: 0; padding: 20px; } .u-service-carousel-wrap .detail-stats.detail-stats-related-cards h3 { font-size: 1.3rem; margin-bottom: 16px; color: var(--secondary-color); text-align: center; flex-shrink: 0; } .u-service-carousel-wrap .detail-stats-cards { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; overflow: hidden; } /* ËùÓп¨Æ¬ÏêÇéÒ³£ºÓйطþÎñ¿¨Æ¬²¼¾ÖͳһΪ¡°ÆÁÌåά±£¡±ÐÎ×´£¨logo ÓëÎÄ×Ö¼ä¾à¼Ó´ó¡¢logo ÉÔÆ«×ó¡¢ÎÄ×Ö×ó¶ÔÆë²¢ÂÔÏòÓÒ£© */ .u-service-carousel-wrap .detail-related-card { display: flex; align-items: center; gap: 28px; padding: 14px 20px; background: white; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.1); border: 2px solid transparent; cursor: pointer; transition: all 0.3s ease; flex: 1 1 0; min-height: 0; } .u-service-carousel-wrap .detail-related-card:hover { border-color: var(--primary-color); box-shadow: 0 8px 20px rgba(8,67,151,0.2); } .u-service-carousel-wrap .detail-related-card .detail-related-logo { width: 56px; min-width: 56px; height: 48px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; } .u-service-carousel-wrap .detail-related-card .detail-related-logo i { font-size: 1.5rem; color: var(--primary-color); } .u-service-carousel-wrap .detail-related-card .detail-related-text { font-size: 1rem; font-weight: 600; color: var(--primary-color); flex: 1; min-width: 0; text-align: left; } /* ¾ÉÆÁË¢ÐÂÏêÇ飺³£¼ûˢг¡¾°¡¢¶àÑù»¯Ë¢Ð¹滮¡¢Ë¢ÐÂÁ÷³Ì£¨×ÖÌå×ÔÊÊÓ¦£© */ .u-service-carousel-wrap .detail-content-renovation { container-type: inline-size; container-name: renovation; } .u-service-carousel-wrap .detail-content-renovation .renovation-top { display: flex; gap: clamp(12px, 2.5cqi, 24px); align-items: flex-start; margin-top: 16px; flex-wrap: wrap; } .u-service-carousel-wrap .detail-content-renovation .renovation-left { flex: 0 0 36%; min-width: min(220px, 100%); max-width: 36%; display: flex; min-height: 0; align-self: stretch; } .u-service-carousel-wrap .detail-content-renovation .renovation-right { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: clamp(12px, 2.5cqi, 24px); min-height: 0; } .u-service-carousel-wrap .detail-content-renovation .renovation-middle { flex: 0 0 auto; min-width: 0; display: flex; } .u-service-carousel-wrap .detail-content-renovation .renovation-card { background: #fff; border-radius: 12px; padding: 5px 0 0 0; border-top-width: 0px; display: flex; flex-direction: column; flex: 1; min-height: 0; } .u-service-carousel-wrap .detail-content-renovation .renovation-right .renovation-card { width: 100%; max-width: 100%; flex: 1 1 0; } .u-service-carousel-wrap .detail-content-renovation .renovation-card h2 { color: #084397; height: 29.6px; margin: 0 0 clamp(12px, 2cqi, 25px) 0; padding-bottom: 5px; border: none; border-bottom: 2px solid rgba(8, 67, 151, 0.1); font-size: clamp(1rem, 2.2cqi, 1.8rem); display: flex; align-items: center; box-sizing: border-box; } .u-service-carousel-wrap .detail-content-renovation .renovation-card h2 i { margin-right: 8px; font-size: clamp(0.9rem, 1.8cqi, 1.5rem); } .u-service-carousel-wrap .detail-content-renovation .scenarios-grid { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; flex: 1; min-height: 0; } .u-service-carousel-wrap .detail-content-renovation .flip-card { list-style: none; margin: 0; padding: 0; flex: 0 1 auto; min-height: 0; overflow: hidden; border-radius: 8px; display: flex; align-items: flex-start; justify-content: center; width: 100%; border: 1px solid rgba(8, 67, 151, 0.18); } .u-service-carousel-wrap .detail-content-renovation .flip-card-inner { position: relative; display: inline-flex; align-items: flex-start; justify-content: flex-start; align-self: flex-start; width: 100%; min-height: 0; padding: 0; overflow: hidden; font-weight: 500; box-shadow: 0 4px 12px rgba(0,0,0,0.08); background: #fff; border-radius: 8px; transition: box-shadow 0.3s ease; } .u-service-carousel-wrap .detail-content-renovation .flip-card:hover .flip-card-inner { box-shadow: 0 8px 20px rgba(8, 67, 151, 0.2); } /* flip-card-front ÈýÐУº1=logo+´ó±êÌâ 2=±êÌâÃèÊö 3=ˢз½Ïò */ .u-service-carousel-wrap .detail-content-renovation .flip-card-front { position: relative; z-index: 1; width: 100%; min-height: 0; border-radius: 8px; padding-top: 8px; padding-bottom: 8px; padding-left: 15px; padding-right: 15px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; box-sizing: border-box; --card-front-bg: rgba(8, 67, 151, 0.06); border-left: 4px solid #084397; background-color: var(--card-front-bg); color: #333; } .u-service-carousel-wrap .detail-content-renovation .scenario-row1 { display: flex; flex-direction: row; align-items: center; gap: 10px; width: 100%; min-width: 0; } .u-service-carousel-wrap .detail-content-renovation .scenario-icon { color: #084397; font-size: clamp(0.85rem, 1.5cqi, 1.2rem); flex-shrink: 0; } .u-service-carousel-wrap .detail-content-renovation .scenario-row1 h4 { color: #084397; margin: 0; font-size: clamp(0.9rem, 1.6cqi, 1.2rem); line-height: 1.3; flex: 1; min-width: 0; } .u-service-carousel-wrap .detail-content-renovation .scenario-desc { color: #666; font-size: clamp(0.75rem, 1.4cqi, 0.95rem); margin: 0; line-height: 1.4; width: 100%; } .u-service-carousel-wrap .detail-content-renovation .flip-card-front .direction-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; width: 100%; margin: 0; } .u-service-carousel-wrap .detail-content-renovation .flip-card-front .direction-tag { background: #084397; color: #fff; padding: 2.4px 10px; border-radius: 20px; font-size: clamp(0.7rem, 1.2cqi, 0.9rem); font-weight: 500; display: inline-flex; align-items: center; line-height: 1; box-sizing: border-box; } .u-service-carousel-wrap .detail-content-renovation .solution-item { width: 100%; box-sizing: border-box; display: flex; flex-direction: column; align-items: flex-start; margin-bottom: 0; padding: 5px clamp(10px, 2cqi, 20px); background: rgba(8, 67, 151, 0.03); border-radius: 10px; border: 1px solid rgba(8, 67, 151, 0.1); transition: all 0.3s ease; min-width: 0; } .u-service-carousel-wrap .detail-content-renovation .solution-item:hover { background: rgba(8, 67, 151, 0.07); border-color: rgba(8, 67, 151, 0.3); } .u-service-carousel-wrap .detail-content-renovation .solution-header { display: flex; align-items: center; margin-bottom: 0; height: 30px; } .u-service-carousel-wrap .detail-content-renovation .solution-icon-large { color: #084397; font-size: clamp(1.2rem, 2.2cqi, 1.8rem); margin-right: 12px; } .u-service-carousel-wrap .detail-content-renovation .solution-title { font-size: clamp(1rem, 1.8cqi, 1.4rem); color: #084397; font-weight: 600; } .u-service-carousel-wrap .detail-content-renovation .solution-details { padding-left: 0; margin-top: 0; text-align: left; } .u-service-carousel-wrap .detail-content-renovation .solution-details ul { list-style: none; } .u-service-carousel-wrap .detail-content-renovation .solution-details li { height: 21.8px; padding: 0; margin: 0; border-bottom: 1px dashed rgba(8, 67, 151, 0.1); display: flex; align-items: center; font-size: clamp(0.75rem, 1.3cqi, 0.95rem); box-sizing: border-box; } .u-service-carousel-wrap .detail-content-renovation .solution-details li::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #084397; margin-right: 8px; flex-shrink: 0; } .u-service-carousel-wrap .detail-content-renovation .solution-details li:last-child { border-bottom: none; } /* ¶àÑù»¯Ë¢Ð¹滮£º2*2 ÅŲ¼£¬ÁпíÒÔ¡¸½á¹¹¿ò¼Ü¼Ó¹Ì»ò½¨¸´¡¹Îª×¼ */ .u-service-carousel-wrap .detail-content-renovation .renovation-middle .renovation-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(8px, 1.5cqi, 16px); width: max-content; max-width: 100%; } .u-service-carousel-wrap .detail-content-renovation .renovation-middle .renovation-card h2 { grid-column: 1 / -1; margin-bottom: 4px; } .u-service-carousel-wrap .detail-content-renovation .solution-item-width-ref { grid-column: 1; grid-row: 2; width: max-content; max-width: 100%; height: 0; overflow: hidden; visibility: hidden; line-height: 0; padding: 0; margin: 0; font-size: clamp(0.75rem, 1.3cqi, 0.95rem); white-space: nowrap; } .u-service-carousel-wrap .detail-content-renovation .renovation-process { width: 100%; margin-top: 0; flex: 0 0 auto; min-height: 0; display: flex; } .u-service-carousel-wrap .detail-content-renovation .renovation-process .renovation-card { width: 100%; flex: 1 1 0; } /* Ë¢ÐÂÁ÷³Ì£ºprogress-bar ²½Öè½ø¶ÈÌõ£¨¸´Óà deepseek_html_20260205_3d143a.html£© */ .u-service-carousel-wrap .detail-content-renovation .renovation-progress-container { background: rgba(255,255,255,0.6); border-radius: 12px; padding-top: 10px; padding-bottom: 0; padding-left: 0px; padding-right: 0px; position: relative; overflow: hidden; } .u-service-carousel-wrap .detail-content-renovation .progress-bar { position: relative; height: 100px; margin-bottom: 0; } .u-service-carousel-wrap .detail-content-renovation .progress-bar .steps { display: flex; justify-content: space-between; position: relative; margin-bottom: 36px; } .u-service-carousel-wrap .detail-content-renovation .progress-bar .step { display: flex; flex-direction: column; align-items: center; width: 16%; position: relative; z-index: 2; cursor: pointer; } .u-service-carousel-wrap .detail-content-renovation .progress-bar .step-circle { width: 48px; height: 48px; border-radius: 50%; background-color: #e6e9f0; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; border: 4px solid #fff; box-shadow: 0 4px 10px rgba(0,0,0,0.08); transition: all 0.5s ease; margin-bottom: 10px; position: relative; z-index: 2; } .u-service-carousel-wrap .detail-content-renovation .progress-bar .step.active .step-circle { background-color: #084397; color: #fff; transform: scale(1.1); box-shadow: 0 6px 15px rgba(8, 67, 151, 0.3); } .u-service-carousel-wrap .detail-content-renovation .progress-bar .step.completed .step-circle { background-color: #084397; color: #fff; } .u-service-carousel-wrap .detail-content-renovation .progress-bar .step-label { text-align: center; font-weight: 600; color: #7a8ca5; font-size: clamp(0.7rem, 1.2cqi, 0.9rem); line-height: 1.35; transition: all 0.3s ease; padding: 0 2px; } .u-service-carousel-wrap .detail-content-renovation .progress-bar .step.active .step-label { color: #084397; font-weight: 700; } .u-service-carousel-wrap .detail-content-renovation .progress-bar .step.completed .step-label { color: #084397; } .u-service-carousel-wrap .detail-content-renovation .progress-bar .progress-line { position: absolute; top: 24px; left: 10%; width: 80%; height: 6px; background-color: #e6e9f0; border-radius: 3px; overflow: hidden; z-index: 1; } .u-service-carousel-wrap .detail-content-renovation .progress-bar .progress-fill { position: absolute; top: 0; left: 0; height: 100%; width: 0%; background: linear-gradient(90deg, #084397, #4a90e2); border-radius: 3px; transition: width 1s ease; } .u-service-carousel-wrap .detail-content-renovation .progress-bar .step-circle i { transition: all 0.3s ease; } .u-service-carousel-wrap .detail-content-renovation .progress-bar .step.active .step-circle i, .u-service-carousel-wrap .detail-content-renovation .progress-bar .step.completed .step-circle i { color: #fff; } .u-service-carousel-wrap .detail-content-renovation .progress-bar .step:not(.active):not(.completed) .step-circle i { color: #7a8ca5; } @keyframes renovation-pulse { 0% { box-shadow: 0 0 0 0 rgba(8, 67, 151, 0.5); } 70% { box-shadow: 0 0 0 10px rgba(8, 67, 151, 0); } 100% { box-shadow: 0 0 0 0 rgba(8, 67, 151, 0); } } .u-service-carousel-wrap .detail-content-renovation .progress-bar .step-circle.pulse { animation: renovation-pulse 2s infinite; } @container renovation (max-width: 700px) { .u-service-carousel-wrap .detail-content-renovation .renovation-top { flex-direction: column; } .u-service-carousel-wrap .detail-content-renovation .renovation-left { max-width: none; flex: 0 0 auto; min-height: auto; } .u-service-carousel-wrap .detail-content-renovation .renovation-right { flex: 0 0 auto; min-height: auto; } .u-service-carousel-wrap .detail-content-renovation .renovation-middle .renovation-card { grid-template-columns: 1fr; } .u-service-carousel-wrap .detail-content-renovation .progress-bar .step-circle { width: 42px; height: 42px; font-size: 1rem; } .u-service-carousel-wrap .detail-content-renovation .progress-bar .step-label { font-size: 0.8rem; } } @container renovation (max-width: 480px) { .u-service-carousel-wrap .detail-content-renovation .progress-bar .steps { margin-bottom: 44px; } .u-service-carousel-wrap .detail-content-renovation .progress-bar .step { width: 14%; } .u-service-carousel-wrap .detail-content-renovation .progress-bar .step-label { font-size: 0.7rem; } .u-service-carousel-wrap .detail-content-renovation .progress-bar .progress-line { top: 21px; } } /* ¾ÉÆÁˢмÓÔض¯»­£º³£¼ûˢг¡¾°¿¨Æ¬´Ó×óµ½ÓÒ˳´Îµ­Èë 0.5s£¬¾àÀë 0.25s */ .u-service-carousel-wrap .detail-content-renovation .scenarios-grid .flip-card { opacity: 0; } .u-service-carousel-wrap .detail-content-renovation.renovation-animate .scenarios-grid .flip-card { animation: renovation-scenario-fade 2s ease forwards; } .u-service-carousel-wrap .detail-content-renovation.renovation-animate .scenarios-grid .flip-card:nth-child(1) { animation-delay: 0s; } .u-service-carousel-wrap .detail-content-renovation.renovation-animate .scenarios-grid .flip-card:nth-child(2) { animation-delay: 0.25s; } .u-service-carousel-wrap .detail-content-renovation.renovation-animate .scenarios-grid .flip-card:nth-child(3) { animation-delay: 0.5s; } .u-service-carousel-wrap .detail-content-renovation.renovation-animate .scenarios-grid .flip-card:nth-child(4) { animation-delay: 0.75s; } @keyframes renovation-scenario-fade { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } } /* ¶àÑù»¯Ë¢Ð¹滮£ºÏÔʾÄ£¿é/½ÚÔìϵͳ L¡úR£¬½á¹¹¿ò¼Ü T¡úB£¬µçԴϵͳ R¡úL£¬¸÷ 0.5s£¬×Ü 2s */ .u-service-carousel-wrap .detail-content-renovation .renovation-middle .solution-item { opacity: 0; } .u-service-carousel-wrap .detail-content-renovation.renovation-animate #solution-display { animation: renovation-solution-lr 0.5s ease 0s forwards; } .u-service-carousel-wrap .detail-content-renovation.renovation-animate #solution-control { animation: renovation-solution-lr 0.5s ease 0.5s forwards; } .u-service-carousel-wrap .detail-content-renovation.renovation-animate #solution-structure { animation: renovation-solution-tb 0.5s ease 1s forwards; } .u-service-carousel-wrap .detail-content-renovation.renovation-animate #solution-power { animation: renovation-solution-rl 0.5s ease 1.5s forwards; } @keyframes renovation-solution-lr { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: translateX(0); } } @keyframes renovation-solution-tb { from { opacity: 0; transform: translateY(-24px); } to { opacity: 1; transform: translateY(0); } } @keyframes renovation-solution-rl { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: translateX(0); } } .u-service-carousel-wrap .detail-stats h3 { font-size: 1.3rem; margin-bottom: 20px; color: var(--secondary-color); text-align: center; } .u-service-carousel-wrap .stat-item { margin-bottom: 20px; opacity: 0; transform: translateY(10px); } .u-service-carousel-wrap .stat-item:nth-child(1) { animation: ucarousel-fadeInUp 0.5s ease 0.7s forwards; } .u-service-carousel-wrap .stat-item:nth-child(2) { animation: ucarousel-fadeInUp 0.5s ease 0.8s forwards; } .u-service-carousel-wrap .stat-item:nth-child(3) { animation: ucarousel-fadeInUp 0.5s ease 0.9s forwards; } .u-service-carousel-wrap .stat-item:nth-child(4) { animation: ucarousel-fadeInUp 0.5s ease 1s forwards; } .u-service-carousel-wrap .stat-header { display: flex; justify-content: space-between; margin-bottom: 8px; } .u-service-carousel-wrap .stat-name { font-weight: 600; color: #555; } .u-service-carousel-wrap .stat-value { font-weight: 700; color: var(--primary-color); } .u-service-carousel-wrap .stat-bar { height: 8px; background-color: #e9ecef; border-radius: 4px; overflow: hidden; } .u-service-carousel-wrap .stat-fill { height: 100%; background: linear-gradient(to right, var(--primary-color), var(--accent-color)); border-radius: 4px; width: 0%; transition: width 1s ease 0.3s; } .u-service-carousel-wrap .detail-container.active .stat-fill { width: var(--stat-width); } @media (max-width: 900px) { .u-service-carousel-wrap .carousel-item { flex: 0 0 calc((100% - 45px) / 4); } .u-service-carousel-wrap .loading-temp-row .loading-card { flex: 0 0 calc((100% - 45px) / 4); } } @media (max-width: 600px) { .u-service-carousel-wrap .carousel-item { flex: 0 0 calc((100% - 30px) / 3); } .u-service-carousel-wrap .loading-temp-row .loading-card { flex: 0 0 calc((100% - 30px) / 3); } } @media (max-width: 900px) { .u-service-carousel-wrap .carousel-matrix .matrix-row .matrix-card { flex: 0 0 calc((100% - 45px) / 4); } } @media (max-width: 600px) { .u-service-carousel-wrap .carousel-matrix .matrix-row .matrix-card { flex: 0 0 calc((100% - 30px) / 3); } } @media (max-width: 992px) { .u-service-carousel-wrap .detail-body { grid-template-columns: 1fr; } .u-service-carousel-wrap .carousel-logo { width: 60px; height: 60px; } .u-service-carousel-wrap .carousel-logo i { font-size: 1.7rem; } .u-service-carousel-wrap .carousel-text { font-size: 1rem; } } @media (max-width: 768px) { .u-service-carousel-wrap .detail-stats-cards { margin: 8px 0; } } /* Çø¿é±êÌâͳһÐÎ×´£ºUÏí·þÎñ¡¢·þÎñ°ìÀí¡¢·þÎñÄÜÁ¦ */ .section_title_beauty { position: relative; display: inline-block; font-size: 28px; font-weight: 700; color: #084397; letter-spacing: 0.08em; text-align: center; margin: 0 auto; } .section_title_beauty::after { content: ''; position: absolute; left: 50%; bottom: -12px; transform: translateX(-50%); width: 120px; height: 4px; background: linear-gradient(90deg, transparent, #084397, #2568b8, transparent); border-radius: 2px; } .sm_col .sm_container > h2.section_title_beauty { display: block; } .quick_submission_block h2.section_title_beauty, .service_ability_block h2.section_title_beauty, .classic_cases_block h2.section_title_beauty, .brand_partners_block h2.section_title_beauty { display: block; } @media (max-width: 768px) { .section_title_beauty { font-size: 22px; letter-spacing: 0.05em; } .section_title_beauty::after { width: 120px; height: 3px; bottom: -8px; } } /* ·þÎñ°ìÀí - Z6¹ÙÍøƽ̨ɫµ÷ #084397 */ .quick_submission_block h2.sm_titlepage, .service_ability_block h2.sm_titlepage { text-align: center; } .quick_submission_block, .service_ability_block { width: 100%; box-sizing: border-box; } #quickSubmission { margin-bottom: 48px; } .quick_submission_block.pt-80 { padding-top: 40px; } .service_ability_block.pt-80 { padding-top: 0; } .classic_cases_block.pt-80 { padding-top: 60px; } .pt-210 { padding-top: 50px; } .quick_submission_block .quick_submission_main { display: flex; flex-wrap: nowrap; gap: 24px; justify-content: flex-start; margin-top: 40px; padding: 0 5px; box-sizing: border-box; } /* ×ÀÃæ¶Ë£º3 ¸ö¿¨Æ¬²¢ÅÅʱ£¬ÈýÕß(º¬¼ä¾à)×Ü¿í¶Å×ëÉÏ·½ carouselUservice ¿í¶ÈÑϸñ¶ÔÆë */ .quick_submission_block .quick_sub_item { flex: 0 0 calc((100% - 48px) / 3); min-width: 0; max-width: none; display: flex; align-items: center; background: #f0f5fc; border: 1px solid rgba(8,67,151,0.25); border-radius: 16px; padding: 20px; box-shadow: 0 4px 16px rgba(8,67,151,0.08); transition: box-shadow 0.3s; } .quick_submission_block .quick_sub_item:hover { box-shadow: 0 6px 20px rgba(8,67,151,0.15); } /* ·þÎñ°ìÀí-΢ÐÅ¿¨Æ¬£ºÊó±ê×·ËæͼƬԤÀÀ£¨ÓÉ JS ½ÚÔìµØ룩 */ .wx-follow-preview { position: fixed; left: 0; top: 0; width: 160px; height: 160px; background: url("https://dlink.host/wx3.sinaimg.cn/large/008KDxB7ly8ibj99mh3sdj3076076aaa.jpg") center / cover no-repeat; border-radius: 12px; box-shadow: 0 14px 40px rgba(0,0,0,0.18); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.12s ease, visibility 0.12s ease; z-index: 99999; } .wx-follow-preview.is-visible { opacity: 1; visibility: visible; } .quick_submission_block .quick_sub_num { flex-shrink: 0; width: 56px; height: 56px; background: linear-gradient(135deg, #084397 0%, #2568b8 100%); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 700; margin-right: 16px; } .quick_submission_block .quick_sub_num i { font-size: 24px; color: #fff; } .quick_submission_block .quick_sub_content { flex: 1; } .quick_submission_block .quick_sub_content.to_link a { display: inline-block; padding: 12px 24px; background: linear-gradient(135deg, #084397 0%, #2568b8 100%); color: #fff; border-radius: 12px; font-weight: 600; font-size: 16px; transition: opacity 0.3s; } .quick_submission_block .quick_sub_content.to_link a:hover { opacity: 0.9; } .quick_submission_block .quick_sub_content.to_tel a { display: flex; align-items: center; } .quick_submission_block .quick_sub_content.to_mail a { display: flex; align-items: center; } .quick_submission_block .quick_sub_content.to_code .weixin-hover-trigger { width: 78px; height: 78px; margin-right: 12px; border-radius: 8px; object-fit: cover; cursor: pointer; flex-shrink: 0; } .quick_submission_block .quick_sub_icon { width: 48px; height: 48px; flex-shrink: 0; background: rgba(8,67,151,0.12); border-radius: 50%; margin-right: 14px; display: flex; align-items: center; justify-content: center; } .quick_submission_block .quick_sub_icon i { font-size: 20px; color: #084397; } .quick_submission_block .quick_sub_phone { font-size: 20px; font-weight: 700; color: #084397; margin: 0 0 4px; line-height: 1.75; } .quick_submission_block .quick_sub_tip { font-size: 14px; color: #666; margin: 0; line-height: 1.75; } .quick_submission_block .quick_sub_content.to_code { display: flex; align-items: center; } .quick_submission_block .quick_sub_content.to_code p:not(.quick_sub_phone):not(.quick_sub_tip) { font-size: 15px; color: #333; line-height: 1.75; margin: 0; } .quick_submission_block .quick_sub_content.to_mail .quick_sub_phone { word-break: break-all; } .quick_submission_block .quick_sub_content.to_mail .quick_sub_mail_btn { display: inline-flex; align-items: center; justify-content: center; margin-top: 6px; padding: 6px 12px; border-radius: 8px; background: #084397; color: #fff; font-size: 12px; line-height: 1.4; } .quick_submission_block .value_assistant_wrap { margin-top: 24px; background: #f0f5fc; border: 1px solid rgba(8,67,151,0.25); border-radius: 16px; padding: 10px 22px 0; box-shadow: 0 4px 16px rgba(8,67,151,0.08); } .quick_submission_block .value_assistant_window { background: #F0F5FC; border: none; border-radius: 14px; padding: 10px 18px 18px; display: flex; flex-direction: column; gap: 16px; } .quick_submission_block .value_assistant_pet_zone { display: flex; justify-content: center; align-items: center; padding: 6px 0 6px; background: #F0F5FC; } .quick_submission_block .value_assistant_intro { margin: 0; font-size: 20px; font-weight: 700; color: #084397; text-align: center; line-height: 1.6; } .quick_submission_block .value_assistant_note { margin: 0; font-size: 12px; color: #7f8ea3; text-align: center; line-height: 1.4; } .quick_submission_block .value-assistant-pet { position: relative; width: 240px; height: 172.8px; border-radius: 54px; background: linear-gradient(120deg, #83eaf1 0%, #9ec5ff 30%, #b2a4ff 65%, #8fd3ff 100%); background-size: 220% 220%; background-position: 0% 50%; --flow-end-x: 100%; --flow-end-y: 50%; border: none; box-shadow: 0 22px 40px -16px rgba(99, 102, 241, 0.35), 0 8px 24px rgba(56, 189, 248, 0.12); cursor: pointer; transition: box-shadow 0.2s ease, transform 0.1s ease, background-position 8s linear; display: flex; flex-direction: row; justify-content: center; align-items: center; padding-top: 0; animation: valueAssistantSoftGlow 3s infinite alternate ease-in-out; } .quick_submission_block .value-assistant-pet:hover { box-shadow: 0 26px 48px -14px rgba(99, 102, 241, 0.42), 0 10px 28px rgba(56, 189, 248, 0.18); transform: scale(1.02); } .quick_submission_block .value-assistant-eyes { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 41.6px; will-change: transform; transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1); } .quick_submission_block .value-assistant-eye { position: relative; width: 28.75392px; height: 69.12px; background: #ffffff; border-radius: 14.37696px; border: none; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); transition: background 0.12s ease, box-shadow 0.12s ease, height 0.2s ease; overflow: visible; flex-shrink: 0; } .quick_submission_block .value-assistant-eye .blink-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: transparent; opacity: 0; visibility: hidden; transition: none; pointer-events: none; z-index: 5; } .quick_submission_block .value-assistant-eye .blink-shape { display: block; flex-shrink: 0; } .quick_submission_block .value-assistant-eye .blink-shape--blink-rect { width: 28.75392px; height: 13.824px; background: #ffffff; border-radius: 0; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); } .quick_submission_block .value-assistant-eye.blink { background: transparent; box-shadow: none; width: 28.75392px; height: 13.824px; border-radius: 0; } .quick_submission_block .value-assistant-eye.blink .blink-overlay { opacity: 1; visibility: visible; } .quick_submission_block .value-assistant-eye.right.blink .blink-overlay { transform-origin: center; animation: valueAssistantWinkRight 0.3s ease; } .quick_submission_block .value-assistant-eye.left.blink .blink-overlay { animation: valueAssistantWinkLeft 0.3s ease; } .quick_submission_block .value_assistant_chat .chat-window { width: 100%; max-width: 100%; min-height: 0; background: white; border-radius: 20px; box-shadow: 0 8px 20px -12px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; overflow: hidden; transition: all 0.2s ease; } .quick_submission_block .value_assistant_chat .messages-area { height: auto; min-height: 50px; max-height: 200px; overflow-y: auto; padding: 5px 24px; background: #F0F5FC; display: flex; flex-direction: column; gap: 16px; scroll-behavior: smooth; } .quick_submission_block .value_assistant_chat .messages-area::-webkit-scrollbar { width: 6px; } .quick_submission_block .value_assistant_chat .messages-area::-webkit-scrollbar-track { background: #EFF2F9; border-radius: 10px; } .quick_submission_block .value_assistant_chat .messages-area::-webkit-scrollbar-thumb { background: #08439740; border-radius: 10px; } .quick_submission_block .value_assistant_chat .messages-area::-webkit-scrollbar-thumb:hover { background: #08439780; } .quick_submission_block .value_assistant_chat .message { display: flex; gap: 12px; max-width: 85%; animation: valueAssistantFadeSlideUp 0.25s ease; } .quick_submission_block .value_assistant_chat .user-message { align-self: flex-end; flex-direction: row-reverse; } .quick_submission_block .value_assistant_chat .ai-message { align-self: flex-start; } .quick_submission_block .value_assistant_chat .avatar { width: 36px; height: 36px; background: #084397; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; flex-shrink: 0; box-shadow: 0 2px 6px rgba(8, 67, 151, 0.25); } .quick_submission_block .value_assistant_chat .user-message .avatar { background: #084397; color: #fff; } .quick_submission_block .value_assistant_chat .ai-message .avatar { background: #084397; color: #fff; border: none; } .quick_submission_block .value_assistant_chat .bubble { background: white; padding: 12px 16px; border-radius: 22px; line-height: 1.5; font-size: 0.95rem; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); word-break: break-word; white-space: pre-wrap; border: none; } .quick_submission_block .value_assistant_chat .user-message .bubble { background: #084397; color: white; border-bottom-right-radius: 6px; border: none; } .quick_submission_block .value_assistant_chat .ai-message .bubble { background: white; border-bottom-left-radius: 6px; color: #1F2937; white-space: normal; } .quick_submission_block .value_assistant_chat .value-assistant-md { font-size: 0.95rem; line-height: 1.55; word-break: break-word; overflow-x: auto; max-width: 100%; } .quick_submission_block .value_assistant_chat .value-assistant-md > *:first-child { margin-top: 0; } .quick_submission_block .value_assistant_chat .value-assistant-md > *:last-child { margin-bottom: 0; } .quick_submission_block .value_assistant_chat .value-assistant-md p { margin: 0.45em 0; } .quick_submission_block .value_assistant_chat .value-assistant-md h1, .quick_submission_block .value_assistant_chat .value-assistant-md h2, .quick_submission_block .value_assistant_chat .value-assistant-md h3 { margin: 0.55em 0 0.35em; font-weight: 700; line-height: 1.35; color: #111827; } .quick_submission_block .value_assistant_chat .value-assistant-md h1 { font-size: 1.15em; } .quick_submission_block .value_assistant_chat .value-assistant-md h2 { font-size: 1.08em; } .quick_submission_block .value_assistant_chat .value-assistant-md h3 { font-size: 1.02em; } .quick_submission_block .value_assistant_chat .value-assistant-md ul, .quick_submission_block .value_assistant_chat .value-assistant-md ol { margin: 0.45em 0; padding-left: 1.35em; } .quick_submission_block .value_assistant_chat .value-assistant-md li { margin: 0.2em 0; } .quick_submission_block .value_assistant_chat .value-assistant-md code { background: #f0f4fa; padding: 0.12em 0.38em; border-radius: 4px; font-size: 0.88em; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } .quick_submission_block .value_assistant_chat .value-assistant-md pre { background: #1e293b; color: #e2e8f0; padding: 10px 12px; border-radius: 10px; overflow-x: auto; margin: 0.5em 0; max-width: 100%; } .quick_submission_block .value_assistant_chat .value-assistant-md pre code { background: transparent; padding: 0; color: inherit; font-size: 0.82em; white-space: pre; word-break: normal; } .quick_submission_block .value_assistant_chat .value-assistant-md blockquote { margin: 0.5em 0; padding: 0.35em 0 0.35em 0.85em; border-left: 3px solid rgba(8,67,151,0.35); color: #4b5563; } .quick_submission_block .value_assistant_chat .value-assistant-md a { color: #084397; text-decoration: underline; } .quick_submission_block .value_assistant_chat .value-assistant-md table { border-collapse: collapse; margin: 0.5em 0; font-size: 0.9em; width: max-content; max-width: 100%; } .quick_submission_block .value_assistant_chat .value-assistant-md th, .quick_submission_block .value_assistant_chat .value-assistant-md td { border: 1px solid #e5e7eb; padding: 6px 10px; text-align: left; } .quick_submission_block .value_assistant_chat .value-assistant-md th { background: #f0f5fc; font-weight: 600; } .quick_submission_block .value_assistant_chat .value-assistant-md hr { border: none; border-top: 1px solid #e5e7eb; margin: 0.75em 0; } .quick_submission_block .value_assistant_chat .value-assistant-md img { max-width: 100%; height: auto; border-radius: 8px; vertical-align: middle; } .quick_submission_block .value_assistant_chat .streaming-cursor::after { content: "¨ƒ"; display: inline-block; animation: valueAssistantBlink 1s step-end infinite; margin-left: 2px; font-size: 1rem; color: #084397; } .quick_submission_block .value_assistant_chat .ai-typing-loader { display: inline-flex; align-items: center; gap: 6px; padding: 6px 2px; min-height: 1.25em; } .quick_submission_block .value_assistant_chat .ai-typing-loader span { width: 7px; height: 7px; border-radius: 50%; background: #084397; opacity: 0.45; animation: valueAssistantTypingDot 1.2s ease-in-out infinite; } .quick_submission_block .value_assistant_chat .ai-typing-loader span:nth-child(2) { animation-delay: 0.2s; } .quick_submission_block .value_assistant_chat .ai-typing-loader span:nth-child(3) { animation-delay: 0.4s; } .quick_submission_block .value_assistant_chat .input-container { background: #F0F5FC; padding: 5px 24px; border-top: none; } .quick_submission_block .value_assistant_chat .input-wrapper { display: flex; gap: 12px; align-items: flex-end; background: #F7F9FC; border-radius: 32px; padding: 6px 6px 6px 20px; border: none; box-shadow: none !important; transition: all 0.2s; } .quick_submission_block .value_assistant_chat .input-wrapper:focus-within { border-color: #084397; box-shadow: none !important; background: white; } .quick_submission_block .value_assistant_chat .dynamic-input { flex: 1; border: 1px solid rgba(8,67,151,0.25); border-radius: 12px; background: #fff; padding: 10px 12px; font-size: 0.95rem; outline: none; resize: none; font-family: inherit; max-height: 120px; color: #1F2937; overflow: hidden; } .quick_submission_block .value_assistant_chat .dynamic-input::placeholder { color: #9AAEBF; font-weight: 400; } .quick_submission_block .value_assistant_chat .dynamic-input.prompt-hint-text { color: #9AAEBF; font-weight: 400; } .quick_submission_block .value_assistant_chat .send-btn { background: #084397; border: none; color: white; width: 42px; height: 42px; border-radius: 30px; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background 0.2s, transform 0.2s; flex-shrink: 0; font-size: 18px; box-shadow: 0 2px 6px rgba(8, 67, 151, 0.2); animation: valueAssistantSendBtnPulse 2.5s ease-in-out infinite; } .quick_submission_block .value_assistant_chat .send-btn:hover { background: #062e6b; transform: scale(0.96); animation-play-state: paused; } .quick_submission_block .value_assistant_chat .send-btn:active { transform: scale(0.94); animation-play-state: paused; } .quick_submission_block .value_assistant_chat .send-btn.disabled { opacity: 0.5; cursor: not-allowed; transform: none; background: #7C8FA0; box-shadow: none; animation: none; } .quick_submission_block .value_assistant_chat .empty-chat { text-align: center; margin-top: 40px; color: #B9CADB; font-size: 0.85rem; } @keyframes valueAssistantWinkRight { 0% { transform: scale(0.8) rotate(-5deg); opacity: 0; } 40% { transform: scale(1.1) rotate(2deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } @keyframes valueAssistantWinkLeft { 0% { transform: scale(0.8) rotate(3deg); opacity: 0; } 40% { transform: scale(1.1) rotate(-2deg); opacity: 1; } 100% { transform: scale(1) rotate(0deg); opacity: 1; } } @keyframes valueAssistantSoftGlow { 0% { box-shadow: 0 22px 40px -16px rgba(99, 102, 241, 0.3), 0 8px 24px rgba(56, 189, 248, 0.1); } 100% { box-shadow: 0 26px 44px -14px rgba(99, 102, 241, 0.4), 0 10px 28px rgba(56, 189, 248, 0.16); } } @keyframes valueAssistantFadeSlideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes valueAssistantBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes valueAssistantTypingDot { 0%, 80%, 100% { transform: translateY(0); opacity: 0.35; } 40% { transform: translateY(-5px); opacity: 1; } } @keyframes valueAssistantSendBtnPulse { 0%, 100% { box-shadow: 0 2px 6px rgba(8, 67, 151, 0.22), 0 0 0 0 rgba(8, 67, 151, 0.38); } 50% { box-shadow: 0 2px 10px rgba(8, 67, 151, 0.28), 0 0 0 12px rgba(8, 67, 151, 0); } } /* Ô¤·ÀÏ·½¶¯Ì¬ÇøÓò¸ß¶È±ä¶¯´¥·¢ä¯ÀÀÆ÷¹ö¶¯Ãª¶¨µ¼ÖÂÒ³ÃæÖÜÆÚÐÔÌø¶¯ */ #u-enjoy-service { overflow-anchor: none; } @media (max-width: 900px) { .quick_submission_block .quick_submission_main { flex-wrap: wrap; padding: 0; justify-content: center; } .quick_submission_block .quick_sub_item { flex: 1 1 260px; max-width: 100%; } .quick_submission_block .value_assistant_wrap { padding: 10px 12px 0; } .quick_submission_block .value_assistant_window { padding: 10px 10px 14px; } .quick_submission_block .value_assistant_chat .chat-window { min-height: 0; border-radius: 18px; } .quick_submission_block .value-assistant-pet { width: 192px; height: 138.24px; border-radius: 43px; } .quick_submission_block .value-assistant-eyes { gap: 32px; } .quick_submission_block .value-assistant-eye { width: 22.1184px; height: 52.992px; border-radius: 11.0592px; } .quick_submission_block .value-assistant-eye.blink { width: 22.1184px; height: 10.5984px; } .quick_submission_block .value-assistant-eye .blink-shape--blink-rect { width: 22.1184px; height: 10.5984px; } .quick_submission_block .value_assistant_window { gap: 12px; } .quick_submission_block .value_assistant_intro { font-size: 18px; } .quick_submission_block .value_assistant_chat .messages-area { padding: 5px 16px; } .quick_submission_block .value_assistant_chat .input-container { padding: 5px 16px; } } @media (max-width: 640px) { .quick_submission_block .value_assistant_wrap { padding: 8px 6px 0; margin-top: 18px; } .quick_submission_block .value_assistant_window { padding: 8px 6px 12px; gap: 10px; } .quick_submission_block .value_assistant_intro { font-size: 16px; } .quick_submission_block .value-assistant-pet { width: 150px; height: 108px; border-radius: 34px; } .quick_submission_block .value-assistant-eyes { gap: 24px; } .quick_submission_block .value-assistant-eye { width: 17.2px; height: 41.28px; border-radius: 8.6px; } .quick_submission_block .value-assistant-eye.blink { width: 17.2px; height: 8.26px; } .quick_submission_block .value-assistant-eye .blink-shape--blink-rect { width: 17.2px; height: 8.26px; } .quick_submission_block .value_assistant_chat .messages-area { padding: 5px 12px; max-height: 180px; } .quick_submission_block .value_assistant_chat .input-container { padding: 5px 8px; } .quick_submission_block .value_assistant_chat .chat-window { border-radius: 16px; } .quick_submission_block .value_assistant_chat .bubble { padding: 10px 14px; font-size: 0.9rem; } .quick_submission_block .value_assistant_chat .dynamic-input { min-height: 80px; resize: vertical; } } @media (max-width: 400px) { .quick_submission_block .value_assistant_wrap { padding: 6px 4px 0; margin-top: 16px; border-radius: 12px; } .quick_submission_block .value_assistant_window { padding: 6px 2px 10px; gap: 8px; } .quick_submission_block .value_assistant_pet_zone { padding: 4px 0; } .quick_submission_block .value_assistant_intro { font-size: 14px; } .quick_submission_block .value_assistant_note { font-size: 11px; } .quick_submission_block .value-assistant-pet { width: 130px; height: 93.6px; border-radius: 28px; } .quick_submission_block .value-assistant-eyes { gap: 20px; } .quick_submission_block .value-assistant-eye { width: 14.8px; height: 35.52px; border-radius: 7.4px; } .quick_submission_block .value-assistant-eye.blink { width: 14.8px; height: 7.1px; } .quick_submission_block .value-assistant-eye .blink-shape--blink-rect { width: 14.8px; height: 7.1px; } .quick_submission_block .value_assistant_chat .messages-area { padding: 5px 8px; max-height: 150px; } .quick_submission_block .value_assistant_chat .input-container { padding: 5px 4px; } .quick_submission_block .value_assistant_chat .input-wrapper { padding: 4px 4px 4px 8px; gap: 8px; } .quick_submission_block .value_assistant_chat .dynamic-input { font-size: 16px; padding: 8px 10px; min-height: 80px; resize: vertical; } .quick_submission_block .value_assistant_chat .send-btn { width: 36px; height: 36px; font-size: 16px; } .quick_submission_block .value_assistant_chat .bubble { padding: 8px 12px; font-size: 0.85rem; border-radius: 18px; } .quick_submission_block .value_assistant_chat .chat-window { border-radius: 14px; } .quick_submission_block .value_assistant_chat .user-message .bubble { border-bottom-right-radius: 4px; } .quick_submission_block .value_assistant_chat .ai-message .bubble { border-bottom-left-radius: 4px; } } /* ·þÎñÄÜÁ¦ - Z6¹ÙÍøƽ̨ɫµ÷ #084397£»Í³¼ÆÐÐÓëÉÏ·½ quick_submission_main ͬ¿í£¨padding/gap/·ÖÁз½Ê½Ò»Ö£© */ .service_ability_block .ability_num_count { display: flex; flex-wrap: wrap; gap: 24px; justify-content: flex-start; margin-top: 24px; padding: 0 5px; box-sizing: border-box; } /* ×ÀÃæ¶Ë 5 ÕÅ¿¨Æ¬£º(100% - 4*24px) / 5£¬ÓëÈýÁзþÎñ°ìÀíÇø¿é×Ü¿ÉÓÿí¶ÈÒ»Ö */ .service_ability_block .ability_num_item { flex: 0 0 calc((100% - 96px) / 5); min-width: 0; background: #fff; border-radius: 12px; padding: 24px 16px; text-align: center; box-shadow: 0 4px 16px rgba(0,0,0,0.06); border: 1px solid #f0f0f0; transition: box-shadow 0.3s, border-color 0.3s; } .service_ability_block .ability_num_item:hover { box-shadow: 0 6px 20px rgba(8,67,151,0.12); border-color: rgba(8,67,151,0.25); } .service_ability_block .ability_num_icon { position: relative; width: 100%; max-width: 140px; margin: 0 auto 12px; aspect-ratio: 4 / 3; background: #eef3f9; border-radius: 8px; overflow: hidden; } .service_ability_block .ability_num_icon img { position: absolute; left: 50%; top: 50%; width: 120%; height: 120%; transform: translate(-50%, -50%); object-fit: fill; } .service_ability_block .ability_num_val { font-size: 28px; font-weight: 700; color: #084397; margin: 0; line-height: 1.2; } .service_ability_block .ability_num_val .unit { font-size: 20px; margin-left: 2px; } .service_ability_block .ability_num_tit { font-size: 15px; color: #666; margin: 0 0 8px; } .service_ability_block .ability_tags { display: flex; flex-wrap: wrap; gap: 16px; justify-content: center; margin-top: 24px; } .service_ability_block .ability_tag { flex: 0 0 calc(25% - 12px); min-width: 200px; padding: 14px 16px; background: linear-gradient(180deg, #f0f5fc 0%, #fff 100%); border: 1px dashed rgba(8,67,151,0.35); border-radius: 10px; font-size: 14px; color: #333; text-align: center; transition: box-shadow 0.3s, border-color 0.3s; } .service_ability_block .ability_tag:hover { box-shadow: 0 4px 12px rgba(8,67,151,0.1); border-color: rgba(8,67,151,0.5); } @media (max-width: 1200px) { .service_ability_block .ability_num_item { flex: 0 0 calc((100% - 48px) / 3); } } @media (max-width: 900px) { .service_ability_block .ability_num_count { padding: 0; justify-content: center; } .service_ability_block .ability_num_item { flex: 1 1 200px; max-width: 100%; } } @media (max-width: 768px) { .service_ability_block .ability_num_item { flex: 0 0 calc((100% - 24px) / 2); min-width: 120px; padding: 16px; } .service_ability_block .ability_num_val { font-size: 24px; } .service_ability_block .ability_tag { flex: 0 0 100%; min-width: 0; } } /* ¾­µä°¸Àýչʾ - Ö÷ÌâÉ« #084397 */ .classic_cases_block .cases_show_list { display: flex; flex-wrap: wrap; gap: 24px; justify-content: center; margin-top: 24px; } .classic_cases_block .case_card { flex: 0 0 calc(33.333% - 16px); min-width: 280px; background: #fff; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 16px rgba(0,0,0,0.06); border: 1px solid #f0f0f0; transition: box-shadow 0.3s, border-color 0.3s; } .classic_cases_block .case_card:hover { box-shadow: 0 8px 24px rgba(8,67,151,0.12); border-color: rgba(8,67,151,0.2); } .classic_cases_block .case_img { width: 100%; height: 160px; overflow: hidden; background: #f0f5fc; } .classic_cases_block .case_img img { width: 100%; height: 100%; object-fit: cover; } .classic_cases_block .case_info { padding: 20px; } .classic_cases_block .case_tit { font-size: 18px; font-weight: 600; color: #084397; margin: 0 0 8px; } .classic_cases_block .case_desc { font-size: 14px; color: #666; line-height: 1.6; margin: 0; } @media (max-width: 900px) { .classic_cases_block .case_card { flex: 0 0 100%; } } /* Æ·ÅƺÏ×÷Çé¿ö - Ö÷ÌâÉ« #084397 */ .brand_partners_block .partners_intro { font-size: 15px; color: #666; max-width: 640px; margin: 0 auto 32px; line-height: 1.6; } .brand_partners_block .partners_logo_row { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; align-items: center; margin-top: 36px; } .brand_partners_block .partner_item { flex: 0 0 calc(16.666% - 17px); min-width: 140px; height: 80px; background: #f0f5fc; border: 1px dashed rgba(8,67,151,0.3); border-radius: 10px; display: flex; align-items: center; justify-content: center; transition: border-color 0.3s, box-shadow 0.3s; } .brand_partners_block .partner_item:hover { border-color: rgba(8,67,151,0.5); box-shadow: 0 4px 12px rgba(8,67,151,0.08); } .brand_partners_block .partner_placeholder { font-size: 13px; color: #084397; opacity: 0.8; } @media (max-width: 768px) { .brand_partners_block .partner_item { flex: 0 0 calc(50% - 10px); min-width: 120px; height: 64px; } } /* ÆÁÌ徫Ãܼì²âÏêÇéÒ³£º3*2 ͼƬ·­×ª¾ØÕó£¨ÐüÍ£·­ÃæÏÔʾʾÀýÎÄ×Ö£© */ .u-service-carousel-wrap #detailContainerUservice24 .precision-img-matrix { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 16px; pointer-events: auto; } .u-service-carousel-wrap #detailContainerUservice24 .precision-img-grid { width: 100%; height: 100%; min-height: 0; min-width: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 12px; } .u-service-carousel-wrap #detailContainerUservice24 .precision-img-flip-card { width: 100%; height: 100%; min-width: 0; min-height: 0; border-radius: 16px; perspective: 1400px; cursor: pointer; } .u-service-carousel-wrap #detailContainerUservice24 .precision-flip-inner { position: relative; width: 100%; height: 100%; transition: transform 0.65s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.35s ease; transform-style: preserve-3d; border-radius: 16px; box-shadow: 0 14px 28px -20px rgba(8, 67, 151, 0.28), 0 12px 22px -12px rgba(0, 0, 0, 0.22); } .u-service-carousel-wrap #detailContainerUservice24 .precision-img-flip-card:hover .precision-flip-inner, .u-service-carousel-wrap #detailContainerUservice24 .precision-img-flip-card:focus-within .precision-flip-inner, .u-service-carousel-wrap #detailContainerUservice24 .precision-img-flip-card.is-hovered .precision-flip-inner { transform: rotateY(180deg); box-shadow: 0 22px 50px -26px rgba(8, 67, 151, 0.34), 0 20px 38px -18px rgba(0, 0, 0, 0.30); } .u-service-carousel-wrap #detailContainerUservice24 .precision-flip-front, .u-service-carousel-wrap #detailContainerUservice24 .precision-flip-back { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .u-service-carousel-wrap #detailContainerUservice24 .precision-flip-front img { width: 100%; height: 100%; object-fit: fill; display: block; transform: none; } .u-service-carousel-wrap #detailContainerUservice24 .precision-img-flip-card:hover .precision-flip-front img, .u-service-carousel-wrap #detailContainerUservice24 .precision-img-flip-card:focus-within .precision-flip-front img, .u-service-carousel-wrap #detailContainerUservice24 .precision-img-flip-card.is-hovered .precision-flip-front img { transform: none; } .u-service-carousel-wrap #detailContainerUservice24 .precision-flip-back { background: #084397; transform: rotateY(180deg); display: flex; align-items: center; justify-content: center; padding: 12px; } .u-service-carousel-wrap #detailContainerUservice24 .precision-flip-back::before { content: attr(data-theme-word); position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(12px, 2.4cqi, 22px); font-weight: 800; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.16); pointer-events: none; } .u-service-carousel-wrap #detailContainerUservice24 .precision-flip-back-text { position: relative; z-index: 1; color: #fff; font-size: 0.95rem; font-weight: 700; text-align: center; line-height: 1.35; } /* ÒƳý COB ÊÖ·çÇÙÄ£¿é¼°ÆäÈë¿Ú */ .u-service-carousel-wrap #detailContainerUservice10, .u-service-carousel-wrap .detail-related-card[data-element-id="10"] { display: none !important; } /* ===== COB ÊÖ·çÇÙ¿¨Æ¬ÐÎ×´£¨´ÓÊÖ·çÇÙ.html ǨÈ룩 ===== */ /* Ô¤·ÀÂÖ²¥Í¼³ÅÆÆ¿¨Æ¬£º´Ó grid Áе½ÂÖ²¥ÈÝÆ÷ÕûÌõÁ´Ô¼Êø¿í¶Å×ëÒç³ö */ .u-service-carousel-wrap .detail-container[data-element-id="10"] { overflow: hidden; } .u-service-carousel-wrap .detail-container[data-element-id="10"] .detail-body { min-width: 0; overflow: hidden; } .u-service-carousel-wrap .detail-container[data-element-id="10"] .detail-body > .detail-content { min-width: 0; overflow: hidden; } .u-service-carousel-wrap .detail-container[data-element-id="10"] .detail-content-row { align-items: stretch; min-width: 0; overflow: hidden; } .card-accordion { margin-bottom: 0; display: flex; gap: 0.75rem; height: 260px; width: 100%; max-width: 100%; min-width: 0; overflow: hidden; box-sizing: border-box; } .card-accordion-item:nth-child(1) { --card-bg: #084397; } .card-accordion-item:nth-child(2) { --card-bg: #0d9488; } .card-accordion-item:nth-child(3) { --card-bg: #c2410c; } .card-accordion-item { position: relative; flex: 0 0 70px; border-radius: 32px; overflow: hidden; cursor: pointer; transition: flex-basis 0.4s ease, flex-grow 0.4s ease; box-shadow: none; background-color: var(--card-bg); } .card-accordion-item.active { flex: 1 1 auto; min-width: 0; max-width: 100%; box-shadow: none; overflow: hidden; } .card-accordion-bg { position: absolute; inset: 0; background-size: cover; background-position: center center; background-repeat: no-repeat; transform: scale(1.03); transition: opacity 0.4s ease, transform 0.4s ease; } .card-accordion-item:not(.active) .card-accordion-bg { opacity: 0; } .card-accordion-item.active .card-accordion-bg { opacity: 1; } .card-accordion-item:hover .card-accordion-bg { transform: scale(1.06); } .card-accordion-overlay { position: absolute; inset: 0; background-color: var(--card-bg); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .card-accordion-item.active .card-accordion-overlay { opacity: 1; pointer-events: auto; display: flex; flex-direction: column; padding-top: 10px; padding-left: 10px; padding-right: 10px; padding-bottom: 70px; justify-content: flex-start; align-items: stretch; height: 100%; box-sizing: border-box; min-width: 0; overflow: hidden; } .card-accordion-overlay .two-col { flex: 1; margin: 0 0 5px 0; align-items: stretch !important; display: flex !important; gap: 0.75rem !important; flex-wrap: nowrap !important; min-height: 0; min-width: 0; overflow: hidden; } /* Ò»¡¢³ß¶È»¯ÆÁÌå×°Öãº×ó²à 40%¡¢ÓÒ²à 60%£¨ËÄÁù·Ö£© */ .card-accordion-item:nth-child(1).active .card-accordion-overlay .two-col .col:first-child { flex: 4 1 0; min-width: 0; } .card-accordion-item:nth-child(1).active .card-accordion-overlay .two-col .col:first-child .img-container img.img-stretch { width: 100%; height: 100%; object-fit: fill; display: block; } .card-accordion-item:nth-child(1).active .card-accordion-overlay .two-col .col:last-child { flex: 6 1 0; min-width: 0; overflow: hidden; } .card-accordion-item:nth-child(1).active .card-accordion-overlay .two-col .col:last-child .img-container { border-radius: 20px; overflow: hidden; } .card-accordion-item:nth-child(1).active .card-accordion-overlay .two-col .col:last-child .img-container img { width: 100%; height: 100%; object-fit: cover; border-radius: 20px; display: block; } .card-accordion-overlay .flowchart { flex: 1; margin: 0 0 15px 0; width: 100%; min-height: 0; overflow: hidden; } /* Èý¡¢¶¨Ô컯ģ×éά½¨£ºÍ¼Æ¬ÌîÂúÈÝÆ÷¡¢ÖÐÑë¼ÓºÅ¡¢Ë®Ó¡¸ßµÍ padding ¼õ°ë */ .card-accordion-item:nth-child(3).active .card-accordion-overlay .two-col .col .img-container img.img-stretch { object-fit: fill; } .card-accordion-item:nth-child(3).active .card-accordion-overlay .two-col { gap: 0; } .card-accordion-item:nth-child(3).active .card-accordion-overlay .repair-plus-divider { flex: 0 0 0.75rem; min-width: 0.75rem; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 1.25rem; z-index: 5; pointer-events: none; } .card-accordion-item:nth-child(3).active .card-accordion-overlay .two-col .col .img-container .watermark { padding-top: 3px; padding-bottom: 3px; } /* ¶þ¡¢¹¤Òµ»¯ÆÁÌåУ¶Ô£ºflowchart ΪԲ½Ç¾ØÐβ¢Õ¹Ê¾ GIF */ .card-accordion-item:nth-child(2).active .card-accordion-overlay .flowchart { border-radius: 12px; overflow: hidden; display: block; padding: 0; background: transparent; border: none; } .card-accordion-item:nth-child(2).active .card-accordion-overlay .flowchart img.flowchart-gif { width: 100%; height: 100%; object-fit: fill; display: block; vertical-align: middle; } .card-accordion-content { display: flex; flex-direction: row; align-items: center; color: #ffffff; font-size: 0.9rem; opacity: 0; transform: translateY(12px); transition: opacity 0.25s ease, transform 0.25s ease; width: 100%; margin-top: 3px; } .card-accordion-text-container { display: flex; flex-direction: column; flex: 1; } .card-accordion-item.active .card-accordion-text-container { display: flex; flex-direction: column; } .card-accordion-item.active .card-accordion-content { opacity: 1; transform: translateY(0); display: flex; flex-direction: row; align-items: center; } .card-accordion-title { font-size: 1.1rem; /* 17.6px */ font-weight: 600; margin-bottom: 2px; line-height: 1.5; /* Ðмä¾àΪµ±Ç°µÄ 200% */ height: 2.2em; /* 1.1rem * 2 */ overflow: hidden; display: flex; align-items: center; } .card-accordion-desc { font-size: 0.9rem; /* 14.4px */ opacity: 0.88; line-height: 1.1; min-height: 1.1em; overflow: hidden; display: flex; align-items: center; } .card-accordion-tag { position: absolute; left: 50%; bottom: 12px; width: calc(var(--card-tag-size, 26px) * 0.7); height: calc(var(--card-tag-size, 26px) * 0.7); border-radius: 999px; background: rgba(255, 255, 255, 0.9); border: 1px solid rgba(148, 163, 184, 0.6); display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: var(--card-bg); box-shadow: 0 6px 14px rgba(15,23,42,0.25); transform: translateX(-50%); transition: all 0.25s ease; z-index: 10; flex-shrink: 0; } .card-accordion-item.active .card-accordion-tag { position: absolute; left: 18px; bottom: 18px; transform: none; margin-right: 25px; flex-shrink: 0; z-index: 20; } .card-accordion-item.active .card-accordion-content { display: flex; flex-direction: row; align-items: center; position: absolute; bottom: 18px; left: 80px; right: 18px; } .card-accordion-item:not(.active) .card-accordion-content { opacity: 0; } .card-accordion-item:not(.active) .card-accordion-tag { opacity: 1; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); margin-right: 0; z-index: 10; } @media (max-width: 900px) { .card-accordion { height: 220px; } .card-accordion-title { font-size: 1rem; } } /* ÊÖ·çÇÙÄÚ²¿Í¨ÓÃͼƬÓë°´Å¥ÐÎ×´ */ .two-col { display: flex; gap: 2rem; margin-top: 1.2rem; flex-wrap: wrap; } .col { flex: 1 1 300px; background: transparent; border-radius: 24px; box-shadow: none; transition: all 0.2s; padding: 0; margin: 0; height: 100%; display: flex; flex-direction: column; } .img-container { position: relative; width: 100%; border-radius: 20px; overflow: hidden; aspect-ratio: 4 / 3; background: #f8fafc; box-shadow: 0 8px 18px rgba(8, 67, 151, 0.1); transition: box-shadow 0.3s; } .card-accordion-overlay .img-container { height: 100%; aspect-ratio: unset; flex: 1; } .img-container img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .img-stretch { width: 100%; height: 100%; object-fit: fill; } #carouselContainer { width: 100%; min-width: 0; overflow: hidden; } #carouselContainer img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .img-container:hover { box-shadow: 0 14px 28px rgba(8, 67, 151, 0.2); } .img-container:hover img { transform: scale(1.02); } .circle-mask { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 3rem; color: white; box-shadow: 0 8px 16px rgba(0,0,0,0.2); backdrop-filter: blur(1px); pointer-events: none; z-index: 10; transition: opacity 0.25s ease; } /* Ò»¡¢³ß¶È»¯ÆÁÌå×°ÖãºÐüÍ£×ó²à col °µ²Ø´íºÅ¡¢ÐüÍ£ÓÒ²à col °µ²Ø¶ÔºÅ */ .card-accordion-item:nth-child(1).active .card-accordion-overlay .two-col .col:first-child:hover .circle-mask { opacity: 0; } .card-accordion-item:nth-child(1).active .card-accordion-overlay .two-col .col:last-child:hover .circle-mask { opacity: 0; } .mask-red { background: rgba(220, 38, 38, 0.7); } .mask-green { background: rgba(22, 163, 74, 0.7); } .nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(6px); border: none; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #084397; cursor: pointer; transition: all 0.2s; z-index: 20; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); border: 1px solid rgba(255, 255, 255, 0.6); } .nav-btn:hover { background: rgba(255, 255, 255, 0.9); color: #062b5c; transform: translateY(-50%) scale(1.08); } .nav-btn:active { transform: translateY(-50%) scale(0.96); } .btn-left { left: 12px; } .btn-right { right: 12px; } /* ÂÖ²¥ÄÚÉÏÒ»ÕÅ/ÏÂÒ»ÕÅ°´Å¥ËõÓ×Ϊ 80% */ #carouselContainer .nav-btn { width: 35px; height: 35px; font-size: 1.28rem; } #carouselContainer .nav-btn:hover { transform: translateY(-50%) scale(1.08); } #carouselContainer .nav-btn:active { transform: translateY(-50%) scale(0.96); } /* ÂÖ²¥Í¼µ×²¿²½ÖèÎÄ×Öˮӡ£º¾ØÐΡ¢Ö÷ÌâÉ« 70% ͨÃ÷¡¢°××Ö */ .carousel-step-watermark { position: absolute; left: 0; right: 0; bottom: 0; background: rgba(8, 67, 151, 0.7); color: #fff; font-size: 0.75rem; line-height: 1.4; padding: 8px 12px; z-index: 15; pointer-events: none; box-sizing: border-box; } .watermark { position: absolute; bottom: 12px; right: 16px; color: white; font-weight: 600; font-size: 0.9rem; background: rgba(8, 67, 151, 0.25); backdrop-filter: blur(3px); padding: 6px 14px; border-radius: 12px; letter-spacing: 0.5px; box-shadow: 0 4px 10px rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.3); z-index: 15; pointer-events: none; } .fa-camera, .fa-laptop, .fa-tv { font-size: 3rem; color: #2b4f7c; filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.1)); } .fa-arrow-right { font-size: 2.2rem; color: #084397; opacity: 0.6; } .carousel-slide { width: 100%; height: 100%; } .flowchart { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.2rem 0.5rem; background: #ffffff; padding: 2rem 1rem; border-radius: 48px 12px 48px 12px; margin-top: 1.8rem; border: 2px dashed #e0e9f5; } .flow-item { display: flex; flex-direction: column; align-items: center; min-width: 100px; background: #fbfdff; padding: 0.8rem 1rem; border-radius: 36px 8px 36px 8px; box-shadow: 0 6px 12px rgba(8,67,151,0.06); } .arrow-icon { font-size: 2rem; color: #084397; opacity: 0.5; } .camera-stand { display: flex; flex-direction: column; align-items: center; } .stand-leg { width: 4px; height: 24px; background: #a0b8d4; margin-top: 4px; border-radius: 2px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .table-piece { background: #cfddee; width: 100px; height: 18px; border-radius: 30px 30px 8px 8px; margin-bottom: 6px; box-shadow: inset 0 -2px 5px rgba(0,0,0,0.05); } .computer-on-table { display: flex; flex-direction: column; align-items: center; } @media (max-width: 760px) { .two-col { flex-direction: column; } }