<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>随视传媒 - 专注大数据社交网络营销</title>
    <!-- Bootstrap CSS -->
    <link href="/assets/lib/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="./assets/style/style.css">
    <style>
        /* Hero Section */
        .hero {
            background: url('./assets/images/header_bg.jpg?height=800&width=1200');
            background-size: cover;
            background-position: center;
            height: calc(100vh - 50px);
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            color: white;
            padding: 1rem;
            margin-top: 60px;
        }

        .hero-content {
            max-width: 1200px;
        }

        .hero-content h1 {
            font-size: 2.5rem;
            margin-bottom: 1rem;
        }

        .hero-content .icon {
            width: 24px;
            height: 32px;
            margin: 23px auto 0;
            background: url('./assets/images/dw.png') no-repeat center;
        }

        /* Services Section */
        .services {
            background: #FF8C00;
            padding: 4rem 1rem;
            color: white;
        }

        .section-title {
            text-align: center;
            margin-bottom: 3rem;
        }

        .services-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .service-card {
            text-align: center;
            padding: 2rem;
        }

        .service-card i {
            font-size: 3rem;
            margin-bottom: 1rem;
        }

        /* Custom CSS */
        .services {
            background: #F08300;
            padding: 4rem 1rem;
        }

        /* Ensure carousel has a max width of 1400px and centers itself on large screens */
        @media (min-width: 768px) {
            .services #servicesCarousel {
                max-width: 1200px;
                margin-left: auto;
                margin-right: auto;
            }
        }

        /* About Section */
        .about {
            padding: 4rem 1rem;
            text-align: center;
        }

        .about-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 2rem auto;
        }

        .about-card {
            position: relative;
            overflow: hidden;
            height: 300px;
        }

        .about-card img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .about-card-content {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.7);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            opacity: 1;
            transition: opacity 0.3s;
        }

        .about-card:hover .about-card-content {
            opacity: 1;
        }

        .historicalre {
            padding: 4rem 1rem;
            background: #f5f5f5;
        }

        .historicalre-card {
            position: relative;
            width: 344px;
            height: 180px;
            color: #1a1a1a;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .historicalre-card::before {
            position: absolute;
            right: 60px;
            top: 50%;
            width: 24px;
            height: 24px;
            margin-top: -12px;
            content: "";
            background: url(./assets/images/aboutus_arrow.png) no-repeat center;
            background-size: 100% 100%;
        }

        .pinpai {
            background: url(./assets/images/fazhan.png) no-repeat center;
            background-size: contain;
        }

        .rongyu {
            background: url(./assets/images/premium.avif) no-repeat center;
            background-size: cover;
        }

        .yingxiao {
            background: url(./assets/images/photo-1526628953301.avif) no-repeat center;
            background-size: cover;
        }

        /* Contact Section */
        .contact {
            padding: 4rem 1rem;
        }

        .contact-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 2rem;
            max-width: 1200px;
            margin: 0 auto;
        }

        .contact-card {
            background: white;
            padding: 2rem;
            width: 293px;
            height: 484px;
            color: #fff;
            margin: 0 auto;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .beijing {
            background: url(./assets/images/beijing.png) no-repeat center;
            background-size: contain;
        }

        .xianggang {
            background: url(./assets/images/xianggang.png) no-repeat center;
            background-size: contain;
        }

        .meiguo {
            background: url(./assets/images/meiguo.png) no-repeat center;
            background-size: contain;
        }

        /* Social Sidebar */
        .social-sidebar {
            position: fixed;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            background: #FF8C00;
            padding: 1rem;
            border-radius: 8px 0 0 8px;
        }

        .social-sidebar a {
            display: block;
            color: white;
            text-decoration: none;
            margin: 1rem 0;
        }

        /* Footer */
        .footer {
            background: #333;
            color: white;
            text-align: center;
            padding: 2rem;
        }

        /* Mobile Responsive */
        @media (max-width: 768px) {
            .nav-menu {
                display: none;
            }

            .hero-content h1 {
                font-size: 1.8rem;
            }

            .services-grid,
            .about-grid,
            .contact-grid {
                grid-template-columns: 1fr;
            }

            .social-sidebar {
                display: none;
            }
        }
    </style>
</head>

<body>
    <!-- Header will be inserted here via JavaScript -->
    <div id="header-container"></div>

<section class="hero">
  <div class="hero-content">
    <h2>十八年专注大数据基于人的社交网络营销</h2>
    <h2>2024年开启面向北美、东南亚的自有品牌跨境电商</h2>
    <div class="icon"></div>
    <p style="font-size: 18px; margin: 10px 0 15px 0;">北京 · 香港 · 美国</p>
    <p style="font-size: 16px; margin-top: 50px;">
      <span style="display: inline-block; width: 20px; vertical-align: middle;margin-left:20px;margin-top:10px;margin-bottom:10px;">
        <img style="width: 20px;vertical-align:sub;" src="./assets/images/gou.png" alt="✓">
      </span>
      对话式推荐系统 - AI 跨境电商导购业务
     
      <br/>
      <span style="display: inline-block; width: 20px; vertical-align: middle;margin-left:20px;margin-top:10px;margin-bottom:10px;">
        <img style="width: 20px;vertical-align:sub;" src="./assets/images/gou.png" alt="✓">
      </span>
      电动轮椅与外骨骼机器人跨境电商业务
     
      <br/>
      <span style="display: inline-block; width: 20px; vertical-align: middle;margin-left:20px;margin-top:10px;margin-bottom:10px;">
        <img style="width: 20px;vertical-align:sub;" src="./assets/images/gou.png" alt="✓">
      </span>
      投资服务
    </p>
  </div>
</section>


    <!-- Services Section -->
    <section class="services" id="services">
        <div class="section-title text-center mb-5">
            <h2>- 产品和服务 -</h2>
            <p>P R O D U C T &nbsp;&nbsp;A N D &nbsp;&nbsp;S E R V I C E</p>
        </div>

        <!-- Carousel Wrapper -->
        <div id="servicesCarousel" class="carousel slide" data-bs-ride="carousel">
            <!-- Indicators -->
            <div class="carousel-indicators">
                <button type="button" data-bs-target="#servicesCarousel" data-bs-slide-to="0" class="active"
                    aria-current="true" aria-label="Slide 1"></button>
                <button type="button" data-bs-target="#servicesCarousel" data-bs-slide-to="1"
                    aria-label="Slide 2"></button>
                <button type="button" data-bs-target="#servicesCarousel" data-bs-slide-to="2"
                    aria-label="Slide 3"></button>
                <button type="button" data-bs-target="#servicesCarousel" data-bs-slide-to="3"
                    aria-label="Slide 4"></button>
            </div>

            <!-- Carousel Inner -->
            <div class="carousel-inner">
                <!-- Single Item -->
                <div class="carousel-item active">
                    <a href="/products/aiChatBot.html">
                        <img src="./assets/images/pm1.png" class="d-block w-100" alt="Image description">
                    </a>
                </div>
                <!-- Repeat the above div for each carousel item changing the src and alt attributes -->

                <!-- Second Item -->
                <div class="carousel-item">
                    <a href="/products/medicalDevices.html">
                        <img src="./assets/images/pm2.png" class="d-block w-100" alt="Image description">
                    </a>
                </div>

                <!-- Third Item -->
                <div class="carousel-item">
                    <a href="/products/investment.html">
                        <img src="./assets/images/pm3.png" class="d-block w-100" alt="Image description">
                    </a>
                </div>
            </div>

            <!-- Controls -->
            <button class="carousel-control-prev" type="button" data-bs-target="#servicesCarousel" data-bs-slide="prev">
                <span class="carousel-control-prev-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Previous</span>
            </button>
            <button class="carousel-control-next" type="button" data-bs-target="#servicesCarousel" data-bs-slide="next">
                <span class="carousel-control-next-icon" aria-hidden="true"></span>
                <span class="visually-hidden">Next</span>
            </button>
        </div>
    </section>

    <section class="about" id="about">
        <div class="section-title">
            <h2>- 关 于 我 们 -</h2>
            <p>A B O U T U S</p>
            <p>十八年专注大数据基于人的社交网络营销 <br>
                2024年开启面向北美、东南亚的自有品牌跨境电商</p>
        </div>
        <div class="about-grid">
            <div class="about-card">
                <img src="./assets/images/fazhan.png?height=300&width=400" alt="发展历程">
                <a href="./about/companyHistory.html">
                    <div class="about-card-content">
                        <h3>发展历程</h3>
                        <img style="width:24px;height:24px;margin-left:10px;margin-bottom: .5rem;"
                            src="./assets/images/aboutus_arrow.png">
                    </div>
                </a>
            </div>
            <div class="about-card">
                <img src="./assets/images/stairs.jpg" alt="公司高管">
                <a href="./about/executives.html">
                    <div class="about-card-content">
                        <h3>公司高管</h3>
                        <img style="width:24px;height:24px;margin-left:10px;margin-bottom: .5rem;"
                            src="./assets/images/aboutus_arrow.png">
                    </div>
                </a>
            </div>
        </div>
    </section>

    <section class="historicalre" id="historicalre">
        <div class="section-title">
            <h2>- 历 史 回 顾 -</h2>
            <p>H I S T O R I C A L R E V I E W</p>
        </div>

        <div class="contact-grid">
            <a class="dropdown-item" href="/history/honors.html#lishiband">
                <div class="historicalre-card pinpai">
                    <h3
                        style="width: 100%; height: 100%; color: #fff; background: #0009;border-radius: 8px;text-align: center;line-height:180px ;">
                        历史合作品牌
                    </h3>
                </div>
            </a>
            <a class="dropdown-item" href="/history/honors.html#lishirongyu">
                <div class="historicalre-card rongyu">
                    <h3
                        style="width: 100%; height: 100%; color: #fff;background: #0009;border-radius: 8px;text-align: center;line-height:180px ;">
                        我们的荣誉</h3>
                </div>
            </a>
            <a class="dropdown-item" href="/history/honors.html#lishimarketing">
                <div class="historicalre-card yingxiao">
                    <h3
                        style="width: 100%; height: 100%; color: #fff;background: #0009;border-radius: 8px;text-align: center;line-height:180px ;">
                        历史营销案例</h3>
                </div>
            </a>
        </div>
    </section>


    <section class="contact" id="contact">
        <div class="section-title">
            <h2>- 联 系 我 们 -</h2>
            <p>C O N T A C T U S</p>
            <p>邮箱:service@adsit.cn</p>
        </div>
        <div class="contact-grid">
            <div class="contact-card beijing">
                <h3>随视传媒-北京</h3>
                <p>电话：010-85959967</p>
                <p>地址： 北京市通州区惠济东路5号院1号楼15层1501-01
	</p>
            </div>
            <div class="contact-card xianggang">
                <h3>香港公司</h3>
                <p>ProphecyGenesis TECHNOLOGY CO., LIMITED</p>
                <p>address：RM 401, 4/F WANCHAI CENTRAL, BLDG 89 LOCKHART RD WAN CHAI, HONG KONG</p>
            </div>
            <div class="contact-card meiguo">
                <h3>美国公司</h3>
                <p>FUTURECUEX INC</p>
                <p>address：16192 Coastal Highway, Lewes, Delaware 19958, County of Sussex</p>
            </div>
        </div>
    </section>

    <div class="social-sidebar">
        <a href="#" title="微信二维码">📱</a>
        <a href="#" title="微博关注">📱</a>
        <a href="tel:010-85959967" title="电话咨询">📞</a>
    </div>

    <footer class="footer">
        <p>Copyright 2006-2021 随视传媒 www.adsit.cn All Rights Reserved</p>
        <p><a href="http://beian.miit.gov.cn/">京ICP备07014109号</a> 隐私保护Privacy Policy</p>
        <p>京公网安备 11010502036735号</p>
    </footer>

    <!-- Bootstrap Bundle with Popper -->
    <script src="./assets/lib/header.js"></script>
    <script src="/assets/lib/bootstrap.bundle.min.js"></script>
</body>

</html>
