@extends('layouts.work')

@section('title', '活動招生詳細頁 - 經濟部產業發展署工業安全網站')

@section('styles')
<link href="{{ asset('css/activities_detail.css') }}" rel="stylesheet">
<link href="{{ asset('css/sm_activities_detail.css') }}" rel="stylesheet">
@endsection

@section('content')
<main role='main position-relative'>
    
    {{-- 網頁版連結配置 --}}
    <div  class="link-event">
        <!-- <hr size="8px" align="center" width="100%" color="black"> -->

        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mt-2">
                <li class="breadcrumb-item"><a class="dynamic-link" href="/">首頁</a></li>
                <li class="breadcrumb-item"><a class="dynamic-link" href="/activities">活動招生</a></li>
                <li class="breadcrumb-item active" aria-current="page">活動招生詳細頁</li>
            </ol>
        </nav>

        <a href="#C" class='sr-only-main' accesskey="C" name="C" title="主要內容區塊">:::</a>
    </div>

    

    <div>
        <!-- user timeline image -->
        <h2>
            <picture>
                <source srcset="{{ asset('img/sm/手機版banner_活動招生點陣化.svg') }}" media="(max-width: 992px)">
                <img src="{{ asset('img/活動招生/經濟部產業發展署元件_banner_活動招生.png') }}" alt="活動招生" title="活動招生" style="width:100%;">
            </picture>
        </h2>
    </div>
    {{-- 手機版連結配置 --}}
    <div class="titlelink">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a class="dynamic-link" href="/">首頁</a></li>
                <li class="breadcrumb-item"><a class="dynamic-link" href="/activities">活動招生</a></li>
                <li class="breadcrumb-item active" aria-current="page">活動招生詳細頁</li>
            </ol>
        </nav>
    </div>

    <filter-detail></filter-detail>

    <noscript>
        <div class='text-center'>
            <p>此網頁需要支援 JavaScript 才能正確運行，請先至你的瀏覽器設定中開啟 JavaScript。</p>
        </div>
    </noscript>
</main>
@endsection

@section('script')
    <script src="{{ asset('js/togglebtn.js')}}"></script>
    <script src="{{ asset('js/modal.js')}}"></script>
@endsection