{"id":21,"date":"2026-01-22T08:23:29","date_gmt":"2026-01-22T08:23:29","guid":{"rendered":"https:\/\/topten-safety.com\/?page_id=21"},"modified":"2026-04-30T01:48:12","modified_gmt":"2026-04-30T01:48:12","slug":"applications","status":"publish","type":"page","link":"https:\/\/topten-safety.com\/index.php\/applications\/","title":{"rendered":"Applications"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"21\" class=\"elementor elementor-21\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-e5bf5a5 e-flex e-con-boxed e-con e-parent\" data-id=\"e5bf5a5\" data-element_type=\"container\" data-e-type=\"container\" data-settings=\"{&quot;background_background&quot;:&quot;classic&quot;}\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t<div class=\"elementor-element elementor-element-7368319 e-con-full e-flex e-con e-child\" data-id=\"7368319\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-634e7c1 e-con-full e-flex e-con e-child\" data-id=\"634e7c1\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-b19ff28 elementor-widget-mobile__width-initial elementor-widget elementor-widget-heading\" data-id=\"b19ff28\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"heading.default\">\n\t\t\t\t\t<h2 class=\"elementor-heading-title elementor-size-default\">Applications<\/h2>\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-34fd054 elementor-widget-mobile__width-initial elementor-widget elementor-widget-text-editor\" data-id=\"34fd054\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t\t\t\t\t\t<p>Trusted Quality Protecting Workers Across Every Industry<\/p>\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-8d3098d e-flex e-con-boxed e-con e-parent\" data-id=\"8d3098d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-db7c0e9 elementor-widget elementor-widget-spacer\" data-id=\"db7c0e9\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-d62267d e-flex e-con-boxed e-con e-parent\" data-id=\"d62267d\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-df528b3 elementor-widget elementor-widget-html\" data-id=\"df528b3\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* \u5361\u7247\u5bb9\u5668\uff1a\u6a2a\u6392\u5e03\u5c40\uff0c\u54cd\u5e94\u5f0f *\/\r\n.hover-video-cards {\r\n    display: flex;\r\n    gap: 24px;\r\n    width: 100%;\r\n}\r\n\r\n\/* \u5355\u4e2a\u5361\u7247\uff1a\u57fa\u7840\u6837\u5f0f+\u5706\u89d2+\u8fc7\u6e21+\u7c97\u6d45\u7070\u8fb9\u6846 *\/\r\n.video-card {\r\n    flex: 1;\r\n    position: relative;\r\n    overflow: hidden;\r\n    border-radius: 16px;\r\n    border: 4px solid #e0e0e0;\r\n    cursor: pointer;\r\n    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n    aspect-ratio: 16\/9;\r\n}\r\n\r\n\/* \u5361\u7247\u60ac\u505c\uff1a\u8f7b\u5fae\u653e\u5927+\u9634\u5f71 *\/\r\n.video-card:hover {\r\n    transform: scale(1.03);\r\n    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n\/* \u89c6\u9891\uff1a\u94fa\u6ee1\u5361\u7247\uff0c\u9ed8\u8ba4\u5728\u5e95\u5c42 *\/\r\n.video-card video {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    pointer-events: none;\r\n}\r\n\r\n\/* \u8986\u76d6\u56fe\uff1a\u9ed8\u8ba4\u663e\u793a\uff0c\u6e10\u53d8\u8fc7\u6e21 *\/\r\n.video-card .cover-image {\r\n    position: absolute;\r\n    top: 0;\r\n    left: 0;\r\n    width: 100%;\r\n    height: 100%;\r\n    object-fit: cover;\r\n    z-index: 5;\r\n    transition: opacity 0.4s ease-in-out;\r\n    opacity: 1;\r\n}\r\n\r\n\/* \u60ac\u505c\u65f6\uff1a\u8986\u76d6\u56fe\u6e10\u53d8\u6d88\u5931 *\/\r\n.video-card:hover .cover-image {\r\n    opacity: 0;\r\n    pointer-events: none;\r\n}\r\n\r\n\/* \u6807\u9898\u6587\u5b57\uff1a\u9ed8\u8ba4\u663e\u793a\u5728\u5de6\u4e0b\u89d2 - \u4f7f\u7528 !important \u786e\u4fdd\u751f\u6548 *\/\r\n.video-card .card-title {\r\n    position: absolute !important;\r\n    bottom: 0 !important;\r\n    left: 0 !important;\r\n    width: 100% !important;\r\n    padding: 20px 24px !important;\r\n    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%) !important;\r\n    color: white !important;\r\n    font-size: 24px !important;\r\n    font-weight: 700 !important;\r\n    z-index: 20 !important;\r\n    opacity: 1 !important;\r\n    transform: translateY(0) !important;\r\n    transition: all 0.4s ease-in-out !important;\r\n    box-sizing: border-box !important;\r\n    pointer-events: none !important;\r\n    display: block !important;\r\n    visibility: visible !important;\r\n}\r\n\r\n\/* \u60ac\u505c\u65f6\uff1a\u6807\u9898\u6587\u5b57\u5411\u4e0b\u9000\u51fa\u5e76\u6d88\u5931 *\/\r\n.video-card:hover .card-title {\r\n    opacity: 0 !important;\r\n    transform: translateY(20px) !important;\r\n}\r\n\r\n\/* \u624b\u673a\u7aef\u54cd\u5e94\u5f0f\uff1a\u53d8\u6210\u4e0a\u4e0b\u6392\u5217 *\/\r\n@media (max-width: 768px) {\r\n    .hover-video-cards {\r\n        flex-direction: column;\r\n    }\r\n}\r\n<\/style>\r\n\r\n<!-- \u5361\u7247\u5bb9\u5668 -->\r\n<div class=\"hover-video-cards\">\r\n    <!-- \u7b2c\u4e00\u4e2a\u5361\u7247\uff08\u6d88\u9632\u5165\u6237\uff09 -->\r\n    <div class=\"video-card\">\r\n        <video preload=\"auto\" muted playsinline>\r\n            <source src=\"https:\/\/topten-safety.com\/tupian\/yingyongchangjing\/shiping\/____2_1_956e0389.mp4\" type=\"video\/mp4\">\r\n        <\/video>\r\n        <img decoding=\"async\" class=\"cover-image\" src=\"https:\/\/topten-safety.com\/tupian\/yingyongchangjing\/____ed2_ed5e30dc.webp\" alt=\"\u6d88\u9632\u5165\u6237\">\r\n        <!-- \ud83d\udd27 \u7b2c\u4e00\u4e2a\u5361\u7247\u6807\u9898\u6587\u5b57\u4fee\u6539\u4f4d\u7f6e\uff1a\u76f4\u63a5\u4fee\u6539\u4e0b\u9762\u5f15\u53f7\u91cc\u7684\u5185\u5bb9 -->\r\n        <div class=\"card-title\">Aviation & Airside Safety<\/div>\r\n    <\/div>\r\n\r\n    <!-- \u7b2c\u4e8c\u4e2a\u5361\u7247\uff08\u8b66\u793a\u706f\uff09 -->\r\n    <div class=\"video-card\">\r\n        <video preload=\"auto\" muted playsinline>\r\n            <source src=\"https:\/\/topten-safety.com\/tupian\/yingyongchangjing\/shiping\/_____1_4dd19136.mp4\" type=\"video\/mp4\">\r\n        <\/video>\r\n        <img decoding=\"async\" class=\"cover-image\" src=\"https:\/\/topten-safety.com\/tupian\/yingyongchangjing\/jingshideng-1_30d10b45.webp\" alt=\"\u8b66\u793a\u706f\">\r\n        <!-- \ud83d\udd27 \u7b2c\u4e8c\u4e2a\u5361\u7247\u6807\u9898\u6587\u5b57\u4fee\u6539\u4f4d\u7f6e\uff1a\u76f4\u63a5\u4fee\u6539\u4e0b\u9762\u5f15\u53f7\u91cc\u7684\u5185\u5bb9 -->\r\n        <div class=\"card-title\">Industrial & Utility<\/div>\r\n    <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ \u81ea\u52a8\u521d\u59cb\u5316\u6240\u6709\u89c6\u9891\u5361\u7247\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n    const cards = document.querySelectorAll('.video-card');\r\n    \r\n    cards.forEach(card => {\r\n        const video = card.querySelector('video');\r\n        \r\n        \/\/ \u9875\u9762\u52a0\u8f7d\u5b8c\u6210\uff1a\u5f3a\u5236\u6682\u505c+\u91cd\u7f6e\u5230\u5f00\u5934\r\n        video.pause();\r\n        video.currentTime = 0;\r\n        \r\n        \/\/ \u9f20\u6807\u8fdb\u5165\uff1a\u4ece\u5934\u64ad\u653e\r\n        card.addEventListener('mouseenter', function() {\r\n            video.pause();\r\n            video.currentTime = 0;\r\n            video.play().catch(err => console.error('\u89c6\u9891\u64ad\u653e\u5931\u8d25\uff0c\u8bf7\u68c0\u67e5\u6587\u4ef6\u94fe\u63a5\u662f\u5426\u6b63\u786e\uff1a', err));\r\n        });\r\n        \r\n        \/\/ \u9f20\u6807\u79bb\u5f00\uff1a\u7acb\u5373\u6682\u505c\r\n        card.addEventListener('mouseleave', function() {\r\n            video.pause();\r\n        });\r\n    });\r\n});\r\n<\/script>\r\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-dba48fb e-flex e-con-boxed e-con e-parent\" data-id=\"dba48fb\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-3480f4b elementor-widget elementor-widget-html\" data-id=\"3480f4b\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* \u5361\u7247\u5bb9\u5668\uff1a\u6a2a\u6392\u5e03\u5c40\uff0c\u54cd\u5e94\u5f0f *\/\r\n.hover-video-cards {\r\n  display: flex;\r\n  gap: 24px;\r\n  width: 100%;\r\n}\r\n\r\n\/* \u5355\u4e2a\u5361\u7247\uff1a\u57fa\u7840\u6837\u5f0f+\u5706\u89d2+\u8fc7\u6e21+\u7c97\u6d45\u7070\u8fb9\u6846 *\/\r\n.video-card {\r\n  flex: 1;\r\n  position: relative;\r\n  overflow: hidden;\r\n  border-radius: 16px; \/* \u5706\u89d2\u5927\u5c0f\uff0c\u53ef\u81ea\u5df1\u8c03 *\/\r\n  border: 4px solid #e0e0e0; \/* \ud83d\udd27 \u8fb9\u6846\u7c97\u7ec6\u548c\u989c\u8272\uff1a4px\u662f\u7c97\u7ec6\uff0c#e0e0e0\u662f\u6d45\u7070\u8272 *\/\r\n  cursor: pointer;\r\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n  aspect-ratio: 16\/9; \/* \u5361\u7247\u5bbd\u9ad8\u6bd4\uff0c\u548c\u89c6\u9891\u4e00\u81f4 *\/\r\n}\r\n\r\n\/* \u5361\u7247\u60ac\u505c\uff1a\u8f7b\u5fae\u653e\u5927+\u9634\u5f71 *\/\r\n.video-card:hover {\r\n  transform: scale(1.03);\r\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n\/* \u89c6\u9891\uff1a\u94fa\u6ee1\u5361\u7247\uff0c\u9ed8\u8ba4\u5728\u5e95\u5c42 *\/\r\n.video-card video {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  pointer-events: none;\r\n}\r\n\r\n\/* \u8986\u76d6\u56fe\uff1a\u9ed8\u8ba4\u663e\u793a\uff0c\u6e10\u53d8\u8fc7\u6e21 *\/\r\n.video-card .cover-image {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  z-index: 10;\r\n  transition: opacity 0.4s ease-in-out;\r\n  opacity: 1;\r\n}\r\n\r\n\/* \u60ac\u505c\u65f6\uff1a\u8986\u76d6\u56fe\u6e10\u53d8\u6d88\u5931 *\/\r\n.video-card:hover .cover-image {\r\n  opacity: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n\/* \u6807\u9898\u6587\u5b57\uff1a\u9ed8\u8ba4\u9690\u85cf\uff0c\u60ac\u505c\u65f6\u663e\u793a *\/\r\n.video-card .card-title {\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  padding: 20px 24px;\r\n  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);\r\n  color: white;\r\n  font-size: 24px;\r\n  font-weight: 700; \/* \u5b57\u4f53\u52a0\u7c97 *\/\r\n  z-index: 5;\r\n  opacity: 0;\r\n  transform: translateY(20px);\r\n  transition: all 0.4s ease-in-out;\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* \u60ac\u505c\u65f6\uff1a\u6807\u9898\u6587\u5b57\u6e10\u53d8\u51fa\u73b0 *\/\r\n.video-card:hover .card-title {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n\r\n\/* \u624b\u673a\u7aef\u54cd\u5e94\u5f0f\uff1a\u53d8\u6210\u4e0a\u4e0b\u6392\u5217 *\/\r\n@media (max-width: 768px) {\r\n  .hover-video-cards {\r\n    flex-direction: column;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<!-- \u5361\u7247\u5bb9\u5668 -->\r\n<div class=\"hover-video-cards\">\r\n  <!-- \u7b2c\u4e00\u4e2a\u5361\u7247\uff08\u6d88\u9632\u5165\u6237\uff09 -->\r\n  <div class=\"video-card\">\r\n    <video muted playsinline>\r\n      <source src=\"https:\/\/topten-safety.com\/tupian\/yingyongchangjing\/shiping\/_____1_66617474.mp4\" type=\"video\/mp4\">\r\n    <\/video>\r\n    <img decoding=\"async\" class=\"cover-image\" src=\"https:\/\/topten-safety.com\/tupian\/yingyongchangjing\/l9200_banner_v2_1_b016e308.webp\" alt=\"\u6d88\u9632\u5165\u6237\">\r\n    <!-- \ud83d\udd27 \u7b2c\u4e00\u4e2a\u5361\u7247\u6807\u9898\u6587\u5b57\u4fee\u6539\u4f4d\u7f6e\uff1a\u76f4\u63a5\u4fee\u6539\u4e0b\u9762\u5f15\u53f7\u91cc\u7684\u5185\u5bb9 -->\r\n    <div class=\"card-title\">Rail &amp; Transit<\/div>\r\n  <\/div>\r\n\r\n  <!-- \u7b2c\u4e8c\u4e2a\u5361\u7247\uff08\u8b66\u793a\u706f\uff09 -->\r\n  <div class=\"video-card\">\r\n    <video muted playsinline>\r\n      <source src=\"https:\/\/topten-safety.com\/tupian\/yingyongchangjing\/shiping\/____2_1_cf9c09cd.mp4\" type=\"video\/mp4\">\r\n    <\/video>\r\n    <img decoding=\"async\" class=\"cover-image\" src=\"https:\/\/topten-safety.com\/tupian\/yingyongchangjing\/yinyyyyyy_a23ff099.webp\" alt=\"\u8b66\u793a\u706f\">\r\n    <!-- \ud83d\udd27 \u7b2c\u4e8c\u4e2a\u5361\u7247\u6807\u9898\u6587\u5b57\u4fee\u6539\u4f4d\u7f6e\uff1a\u76f4\u63a5\u4fee\u6539\u4e0b\u9762\u5f15\u53f7\u91cc\u7684\u5185\u5bb9 -->\r\n    <div class=\"card-title\">Construction & Site safety<\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ \u81ea\u52a8\u521d\u59cb\u5316\u6240\u6709\u89c6\u9891\u5361\u7247\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n  const cards = document.querySelectorAll('.video-card');\r\n\r\n  cards.forEach(card => {\r\n    const video = card.querySelector('video');\r\n\r\n    \/\/ \u9875\u9762\u52a0\u8f7d\u5b8c\u6210\uff1a\u5f3a\u5236\u6682\u505c+\u91cd\u7f6e\u5230\u5f00\u5934\r\n    video.pause();\r\n    video.currentTime = 0;\r\n\r\n    \/\/ \u9f20\u6807\u8fdb\u5165\uff1a\u4ece\u5934\u64ad\u653e\r\n    card.addEventListener('mouseenter', function() {\r\n      video.pause();\r\n      video.currentTime = 0;\r\n      video.play().catch(err => console.error('\u89c6\u9891\u64ad\u653e\u5931\u8d25\uff0c\u8bf7\u68c0\u67e5\u6587\u4ef6\u94fe\u63a5\u662f\u5426\u6b63\u786e\uff1a', err));\r\n    });\r\n\r\n    \/\/ \u9f20\u6807\u79bb\u5f00\uff1a\u7acb\u5373\u6682\u505c\r\n    card.addEventListener('mouseleave', function() {\r\n      video.pause();\r\n    });\r\n  });\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-284a174 e-flex e-con-boxed e-con e-parent\" data-id=\"284a174\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-6c2019f elementor-widget elementor-widget-html\" data-id=\"6c2019f\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t<style>\r\n\/* \u5361\u7247\u5bb9\u5668\uff1a\u6a2a\u6392\u5e03\u5c40\uff0c\u54cd\u5e94\u5f0f *\/\r\n.hover-video-cards {\r\n  display: flex;\r\n  gap: 24px;\r\n  width: 100%;\r\n}\r\n\r\n\/* \u5355\u4e2a\u5361\u7247\uff1a\u57fa\u7840\u6837\u5f0f+\u5706\u89d2+\u8fc7\u6e21+\u7c97\u6d45\u7070\u8fb9\u6846 *\/\r\n.video-card {\r\n  flex: 1;\r\n  position: relative;\r\n  overflow: hidden;\r\n  border-radius: 16px; \/* \u5706\u89d2\u5927\u5c0f\uff0c\u53ef\u81ea\u5df1\u8c03 *\/\r\n  border: 4px solid #e0e0e0; \/* \ud83d\udd27 \u8fb9\u6846\u7c97\u7ec6\u548c\u989c\u8272\uff1a4px\u662f\u7c97\u7ec6\uff0c#e0e0e0\u662f\u6d45\u7070\u8272 *\/\r\n  cursor: pointer;\r\n  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);\r\n  aspect-ratio: 16\/9; \/* \u5361\u7247\u5bbd\u9ad8\u6bd4\uff0c\u548c\u89c6\u9891\u4e00\u81f4 *\/\r\n}\r\n\r\n\/* \u5361\u7247\u60ac\u505c\uff1a\u8f7b\u5fae\u653e\u5927+\u9634\u5f71 *\/\r\n.video-card:hover {\r\n  transform: scale(1.03);\r\n  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);\r\n}\r\n\r\n\/* \u89c6\u9891\uff1a\u94fa\u6ee1\u5361\u7247\uff0c\u9ed8\u8ba4\u5728\u5e95\u5c42 *\/\r\n.video-card video {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  pointer-events: none;\r\n}\r\n\r\n\/* \u8986\u76d6\u56fe\uff1a\u9ed8\u8ba4\u663e\u793a\uff0c\u6e10\u53d8\u8fc7\u6e21 *\/\r\n.video-card .cover-image {\r\n  position: absolute;\r\n  top: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  height: 100%;\r\n  object-fit: cover;\r\n  z-index: 10;\r\n  transition: opacity 0.4s ease-in-out;\r\n  opacity: 1;\r\n}\r\n\r\n\/* \u60ac\u505c\u65f6\uff1a\u8986\u76d6\u56fe\u6e10\u53d8\u6d88\u5931 *\/\r\n.video-card:hover .cover-image {\r\n  opacity: 0;\r\n  pointer-events: none;\r\n}\r\n\r\n\/* \u6807\u9898\u6587\u5b57\uff1a\u9ed8\u8ba4\u9690\u85cf\uff0c\u60ac\u505c\u65f6\u663e\u793a *\/\r\n.video-card .card-title {\r\n  position: absolute;\r\n  bottom: 0;\r\n  left: 0;\r\n  width: 100%;\r\n  padding: 20px 24px;\r\n  background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);\r\n  color: white;\r\n  font-size: 24px;\r\n  font-weight: 700; \/* \u5b57\u4f53\u52a0\u7c97 *\/\r\n  z-index: 5;\r\n  opacity: 0;\r\n  transform: translateY(20px);\r\n  transition: all 0.4s ease-in-out;\r\n  box-sizing: border-box;\r\n}\r\n\r\n\/* \u60ac\u505c\u65f6\uff1a\u6807\u9898\u6587\u5b57\u6e10\u53d8\u51fa\u73b0 *\/\r\n.video-card:hover .card-title {\r\n  opacity: 1;\r\n  transform: translateY(0);\r\n}\r\n\r\n\/* \u624b\u673a\u7aef\u54cd\u5e94\u5f0f\uff1a\u53d8\u6210\u4e0a\u4e0b\u6392\u5217 *\/\r\n@media (max-width: 768px) {\r\n  .hover-video-cards {\r\n    flex-direction: column;\r\n  }\r\n}\r\n<\/style>\r\n\r\n<!-- \u5361\u7247\u5bb9\u5668 -->\r\n<div class=\"hover-video-cards\">\r\n  <!-- \u7b2c\u4e00\u4e2a\u5361\u7247\uff08\u6d88\u9632\u5165\u6237\uff09 -->\r\n  <div class=\"video-card\">\r\n    <video muted playsinline>\r\n      <source src=\"https:\/\/topten-safety.com\/tupian\/yingyongchangjing\/shiping\/xiaofangruhu_1_5d15c5d5.mp4\" type=\"video\/mp4\">\r\n    <\/video>\r\n    <img decoding=\"async\" class=\"cover-image\" src=\"https:\/\/topten-safety.com\/tupian\/yingyongchangjing\/jinshi-111_3e182c52.webp\" alt=\"\u6d88\u9632\u5165\u6237\">\r\n    <!-- \ud83d\udd27 \u7b2c\u4e00\u4e2a\u5361\u7247\u6807\u9898\u6587\u5b57\u4fee\u6539\u4f4d\u7f6e\uff1a\u76f4\u63a5\u4fee\u6539\u4e0b\u9762\u5f15\u53f7\u91cc\u7684\u5185\u5bb9 -->\r\n    <div class=\"card-title\">Emergency Services<\/div>\r\n  <\/div>\r\n\r\n  <!-- \u7b2c\u4e8c\u4e2a\u5361\u7247\uff08\u8b66\u793a\u706f\uff09 -->\r\n  <div class=\"video-card\">\r\n    <video muted playsinline>\r\n      <source src=\"https:\/\/topten-safety.com\/tupian\/yingyongchangjing\/shiping\/____2_1_643ba177.mp4\" type=\"video\/mp4\">\r\n    <\/video>\r\n    <img decoding=\"async\" class=\"cover-image\" src=\"https:\/\/topten-safety.com\/tupian\/yingyongchangjing\/l9200_banner_v4_6_a46e3607.webp\" alt=\"\u8b66\u793a\u706f\">\r\n    <!-- \ud83d\udd27 \u7b2c\u4e8c\u4e2a\u5361\u7247\u6807\u9898\u6587\u5b57\u4fee\u6539\u4f4d\u7f6e\uff1a\u76f4\u63a5\u4fee\u6539\u4e0b\u9762\u5f15\u53f7\u91cc\u7684\u5185\u5bb9 -->\r\n    <div class=\"card-title\">Roadway Emergency Maintenance<\/div>\r\n  <\/div>\r\n<\/div>\r\n\r\n<script>\r\n\/\/ \u81ea\u52a8\u521d\u59cb\u5316\u6240\u6709\u89c6\u9891\u5361\u7247\r\ndocument.addEventListener('DOMContentLoaded', function() {\r\n  const cards = document.querySelectorAll('.video-card');\r\n\r\n  cards.forEach(card => {\r\n    const video = card.querySelector('video');\r\n\r\n    \/\/ \u9875\u9762\u52a0\u8f7d\u5b8c\u6210\uff1a\u5f3a\u5236\u6682\u505c+\u91cd\u7f6e\u5230\u5f00\u5934\r\n    video.pause();\r\n    video.currentTime = 0;\r\n\r\n    \/\/ \u9f20\u6807\u8fdb\u5165\uff1a\u4ece\u5934\u64ad\u653e\r\n    card.addEventListener('mouseenter', function() {\r\n      video.pause();\r\n      video.currentTime = 0;\r\n      video.play().catch(err => console.error('\u89c6\u9891\u64ad\u653e\u5931\u8d25\uff0c\u8bf7\u68c0\u67e5\u6587\u4ef6\u94fe\u63a5\u662f\u5426\u6b63\u786e\uff1a', err));\r\n    });\r\n\r\n    \/\/ \u9f20\u6807\u79bb\u5f00\uff1a\u7acb\u5373\u6682\u505c\r\n    card.addEventListener('mouseleave', function() {\r\n      video.pause();\r\n    });\r\n  });\r\n});\r\n<\/script>\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t<div class=\"elementor-element elementor-element-5f07015 e-flex e-con-boxed e-con e-parent\" data-id=\"5f07015\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-912b2fc elementor-widget elementor-widget-spacer\" data-id=\"912b2fc\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"spacer.default\">\n\t\t\t\t\t\t\t<div class=\"elementor-spacer\">\n\t\t\t<div class=\"elementor-spacer-inner\"><\/div>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Applications Trusted Quality Protecting Workers Across  [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_header_footer","meta":{"_acf_changed":false,"footnotes":""},"class_list":["post-21","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/topten-safety.com\/index.php\/wp-json\/wp\/v2\/pages\/21","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/topten-safety.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/topten-safety.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/topten-safety.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/topten-safety.com\/index.php\/wp-json\/wp\/v2\/comments?post=21"}],"version-history":[{"count":166,"href":"https:\/\/topten-safety.com\/index.php\/wp-json\/wp\/v2\/pages\/21\/revisions"}],"predecessor-version":[{"id":1641,"href":"https:\/\/topten-safety.com\/index.php\/wp-json\/wp\/v2\/pages\/21\/revisions\/1641"}],"wp:attachment":[{"href":"https:\/\/topten-safety.com\/index.php\/wp-json\/wp\/v2\/media?parent=21"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}