@extends('client.layouts.app')

@section("content")
    <div class="wrapper">
      <div class="content-header">
        <div class="container">
          <div class="pt-4">
            <h2 class="title before:bg-[url('../images/icon01.png')]">打卡紀錄</h2>
          </div>
        </div>
      </div>
      <div class="bg-gary">
        <div class="grid grid-cols-2 lg:grid-cols-3 lg:w-fit lg:mx-auto [&amp;&gt;div]:py-4 [&amp;&gt;div]:border-[#cccccc] lg:[&amp;&gt;div]:py-8 [&amp;&gt;div&gt;div]:w-fit [&amp;&gt;div&gt;div]:mx-auto lg:[&amp;&gt;div&gt;div]:w-auto lg:[&amp;&gt;div&gt;div]:px-12 [&amp;_h4]:font-medium 2xl:[&amp;_h4]:text-2xl [&amp;_p]:text-3xl [&amp;_p]:font-black  [&amp;_p]:text-[#999999] md:[&amp;_p]:text-5xl 2xl:[&amp;_p]:text-6xl [&amp;_small]:text-[70%] [&amp;_small]:font-bold">
          <div class="border-r lg:border-none">
            <div>
              <h4>起始里程</h4>
              <p>100000 <small>KM</small></p>
            </div>
          </div>
          <div class="lg:border-l lg:border-r">
            <div>
              <h4>最新里程</h4>
              <p>150000 <small>KM</small></p>
            </div>
          </div>
          <div class="col-span-2 border-t lg:col-span-1 lg:border-none">
            <div>
              <h4>累積里程</h4>
              <p><span class="text-[#cc0033]">5000</span> <small>KM</small></p>
            </div>
          </div>
        </div>
      </div>
      <div class="content-inner">
        <div class="container">
              <div class="py-8">
                <h2 class="border-l-[6px] border-[#cc0033] pl-2 text-2xl font-medium leading-[1.2] mb-4 2xl:text-4xl 2xl:border-l-[12px] 2xl:pl-4">北部景點</h2>
                <ul class="lg:grid lg:grid-cols-2 lg:gap-x-7">
                      <li class="bg-white my-4 shadow-md lg:my-3">
                        <div class="grid grid-cols-2 lg:grid-cols-[204px_1fr] 2xl:grid-cols-[294px_1fr]">
                          <div class="text-center flex items-center">
                            <div class="w-full px-4 md:[&amp;_.btn]:max-w-[180px] md:[&amp;_.btn]:mx-auto lg:px-[24px] lg:[&amp;_.btn]:max-w-full">
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">馬槽橋</h3><a class="btn btn-red !block !px-4" href="#">前往打卡</a>
                            </div>
                          </div>
                          <div class="p-2 pl-0">
                            <iframe class="w-full min-h-[200px] 2xl:min-h-[224px]" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3610.749573313941!2d121.56118537702524!3d25.17793237772327!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442b2410cc55ae7%3A0x861268859d01c954!2z5Y-w5YyX5biC6aas5qe95qmL!5e0!3m2!1szh-TW!2stw!4v1696671365324!5m2!1szh-TW!2stw" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                          </div>
                        </div>
                      </li>
                      <li class="bg-white my-4 shadow-md lg:my-3">
                        <div class="grid grid-cols-2 lg:grid-cols-[204px_1fr] 2xl:grid-cols-[294px_1fr]">
                          <div class="text-center flex items-center">
                            <div class="w-full px-4 md:[&amp;_.btn]:max-w-[180px] md:[&amp;_.btn]:mx-auto lg:px-[24px] lg:[&amp;_.btn]:max-w-full">
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">內灣火車站</h3><a class="btn btn-red !block !px-4" href="#">前往打卡</a>
                            </div>
                          </div>
                          <div class="p-2 pl-0">
                            <iframe class="w-full min-h-[200px] 2xl:min-h-[224px]" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3624.628047297993!2d121.17998807691397!3d24.705309851445417!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346840c5f7ec6697%3A0xec42128bbbe920e!2z5YWn54Gj6LuK56uZ!5e0!3m2!1szh-TW!2stw!4v1696843292423!5m2!1szh-TW!2stw" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                          </div>
                        </div>
                      </li>
                      <li class="bg-white my-4 shadow-md lg:my-3">
                        <div class="grid grid-cols-2 lg:grid-cols-[204px_1fr] 2xl:grid-cols-[294px_1fr]">
                          <div class="text-center flex items-center">
                            <div class="w-full px-4 md:[&amp;_.btn]:max-w-[180px] md:[&amp;_.btn]:mx-auto lg:px-[24px] lg:[&amp;_.btn]:max-w-full">
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">樹梅坪</h3><a class="btn btn-gary !block !px-4" href="#">已完成打卡</a>
                            </div>
                          </div>
                          <div class="p-2 pl-0">
                            <iframe class="w-full min-h-[200px] 2xl:min-h-[224px]" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7214.602746378594!2d121.53282334899824!3d25.29407671084051!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442b72e48d608e5%3A0xfb02070600b2338!2z5a-M6LK06KeS54eI5aGU!5e0!3m2!1szh-TW!2stw!4v1696843226309!5m2!1szh-TW!2stw" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                          </div>
                        </div>
                      </li>
                      <li class="bg-white my-4 shadow-md lg:my-3">
                        <div class="grid grid-cols-2 lg:grid-cols-[204px_1fr] 2xl:grid-cols-[294px_1fr]">
                          <div class="text-center flex items-center">
                            <div class="w-full px-4 md:[&amp;_.btn]:max-w-[180px] md:[&amp;_.btn]:mx-auto lg:px-[24px] lg:[&amp;_.btn]:max-w-full">
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">富貴角燈塔</h3><a class="btn btn-gary !block !px-4" href="#">已完成打卡</a>
                            </div>
                          </div>
                          <div class="p-2 pl-0">
                            <iframe class="w-full min-h-[200px] 2xl:min-h-[224px]" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7214.602746378594!2d121.53282334899824!3d25.29407671084051!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3442b72e48d608e5%3A0xfb02070600b2338!2z5a-M6LK06KeS54eI5aGU!5e0!3m2!1szh-TW!2stw!4v1696843226309!5m2!1szh-TW!2stw" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                          </div>
                        </div>
                      </li>
                </ul>
              </div>
              <div class="py-8">
                <h2 class="border-l-[6px] border-[#cc0033] pl-2 text-2xl font-medium leading-[1.2] mb-4 2xl:text-4xl 2xl:border-l-[12px] 2xl:pl-4">中部景點</h2>
                <ul class="lg:grid lg:grid-cols-2 lg:gap-x-7">
                      <li class="bg-white my-4 shadow-md lg:my-3">
                        <div class="grid grid-cols-2 lg:grid-cols-[204px_1fr] 2xl:grid-cols-[294px_1fr]">
                          <div class="text-center flex items-center">
                            <div class="w-full px-4 md:[&amp;_.btn]:max-w-[180px] md:[&amp;_.btn]:mx-auto lg:px-[24px] lg:[&amp;_.btn]:max-w-full">
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">日月潭文武廟</h3><a class="btn btn-red !block !px-4" href="#">前往打卡</a>
                            </div>
                          </div>
                          <div class="p-2 pl-0">
                            <iframe class="w-full min-h-[200px] 2xl:min-h-[224px]" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3648.5538164092495!2d120.9249761769017!3d23.869972684172495!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3468d668e2f4582b%3A0xfd1f9cd4796180f0!2z5pel5pyI5r2t5paH5q2m5buf!5e0!3m2!1szh-TW!2stw!4v1696843178941!5m2!1szh-TW!2stw" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                          </div>
                        </div>
                      </li>
                      <li class="bg-white my-4 shadow-md lg:my-3">
                        <div class="grid grid-cols-2 lg:grid-cols-[204px_1fr] 2xl:grid-cols-[294px_1fr]">
                          <div class="text-center flex items-center">
                            <div class="w-full px-4 md:[&amp;_.btn]:max-w-[180px] md:[&amp;_.btn]:mx-auto lg:px-[24px] lg:[&amp;_.btn]:max-w-full">
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">赤崁頂觀景平台</h3><a class="btn btn-red !block !px-4" href="#">前往打卡</a>
                            </div>
                          </div>
                          <div class="p-2 pl-0">
                            <iframe class="w-full min-h-[200px] 2xl:min-h-[224px]" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d467443.6123218595!2d120.21889674977808!3d23.750830315086024!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346921fa9cd9434d%3A0x43a36e3129225a77!2z6LWk5bSB6aCC556t5pyb5Y-w5bmz5Y-w!5e0!3m2!1szh-TW!2stw!4v1696843147093!5m2!1szh-TW!2stw" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                          </div>
                        </div>
                      </li>
                      <li class="bg-white my-4 shadow-md lg:my-3">
                        <div class="grid grid-cols-2 lg:grid-cols-[204px_1fr] 2xl:grid-cols-[294px_1fr]">
                          <div class="text-center flex items-center">
                            <div class="w-full px-4 md:[&amp;_.btn]:max-w-[180px] md:[&amp;_.btn]:mx-auto lg:px-[24px] lg:[&amp;_.btn]:max-w-full">
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">星巴克北港門市</h3><a class="btn btn-gary !block !px-4" href="#">已完成打卡</a>
                            </div>
                          </div>
                          <div class="p-2 pl-0">
                            <iframe class="w-full min-h-[200px] 2xl:min-h-[224px]" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.920221123369!2d120.29748417689748!3d23.57130859562526!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346ec908c0955ce5%3A0xfdd4cdd30a5905c!2zU1RBUkJVQ0tTIOaYn-W3tOWFiyAo5YyX5riv6ZaA5biCKQ!5e0!3m2!1szh-TW!2stw!4v1696843112401!5m2!1szh-TW!2stw" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                          </div>
                        </div>
                      </li>
                      <li class="bg-white my-4 shadow-md lg:my-3">
                        <div class="grid grid-cols-2 lg:grid-cols-[204px_1fr] 2xl:grid-cols-[294px_1fr]">
                          <div class="text-center flex items-center">
                            <div class="w-full px-4 md:[&amp;_.btn]:max-w-[180px] md:[&amp;_.btn]:mx-auto lg:px-[24px] lg:[&amp;_.btn]:max-w-full">
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">郡大林道</h3><a class="btn btn-gary !block !px-4" href="#">已完成打卡</a>
                            </div>
                          </div>
                          <div class="p-2 pl-0">
                            <iframe class="w-full min-h-[200px] 2xl:min-h-[224px]" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3656.5635855930136!2d120.96878827689751!3d23.584112495137052!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346f2622950481e1%3A0xc0ef0196c4763a5b!2zNTU25Y2X5oqV57ij5L-h576p6YSJ6YOh5aSn5p6X6YGT!5e0!3m2!1szh-TW!2stw!4v1696843079895!5m2!1szh-TW!2stw" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                          </div>
                        </div>
                      </li>
                </ul>
              </div>
              <div class="py-8">
                <h2 class="border-l-[6px] border-[#cc0033] pl-2 text-2xl font-medium leading-[1.2] mb-4 2xl:text-4xl 2xl:border-l-[12px] 2xl:pl-4">南部景點</h2>
                <ul class="lg:grid lg:grid-cols-2 lg:gap-x-7">
                      <li class="bg-white my-4 shadow-md lg:my-3">
                        <div class="grid grid-cols-2 lg:grid-cols-[204px_1fr] 2xl:grid-cols-[294px_1fr]">
                          <div class="text-center flex items-center">
                            <div class="w-full px-4 md:[&amp;_.btn]:max-w-[180px] md:[&amp;_.btn]:mx-auto lg:px-[24px] lg:[&amp;_.btn]:max-w-full">
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">拾粹院文創<br>藝術園區</h3><a class="btn btn-red !block !px-4" href="#">前往打卡</a>
                            </div>
                          </div>
                          <div class="p-2 pl-0">
                            <iframe class="w-full min-h-[200px] 2xl:min-h-[224px]" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3655.7888008196774!2d120.45759567689821!3d23.611906194076212!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346eb93fd5f970ed%3A0xf1b4bfacc69c387f!2z5ou-57K56Zmi6a-W6a2a5Li76aGM6aSo!5e0!3m2!1szh-TW!2stw!4v1696843042672!5m2!1szh-TW!2stw" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                          </div>
                        </div>
                      </li>
                      <li class="bg-white my-4 shadow-md lg:my-3">
                        <div class="grid grid-cols-2 lg:grid-cols-[204px_1fr] 2xl:grid-cols-[294px_1fr]">
                          <div class="text-center flex items-center">
                            <div class="w-full px-4 md:[&amp;_.btn]:max-w-[180px] md:[&amp;_.btn]:mx-auto lg:px-[24px] lg:[&amp;_.btn]:max-w-full">
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">國勝港燈塔</h3><a class="btn btn-red !block !px-4" href="#">前往打卡</a>
                            </div>
                          </div>
                          <div class="p-2 pl-0">
                            <iframe class="w-full min-h-[200px] 2xl:min-h-[224px]" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d943636.1513878397!2d119.78478854706533!3d22.501229622442736!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346ddbabff1b3b17%3A0xa918c50c6e12d069!2z5ZyL6IGW5riv54eI5aGU!5e0!3m2!1szh-TW!2stw!4v1696842978948!5m2!1szh-TW!2stw" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                          </div>
                        </div>
                      </li>
                      <li class="bg-white my-4 shadow-md lg:my-3">
                        <div class="grid grid-cols-2 lg:grid-cols-[204px_1fr] 2xl:grid-cols-[294px_1fr]">
                          <div class="text-center flex items-center">
                            <div class="w-full px-4 md:[&amp;_.btn]:max-w-[180px] md:[&amp;_.btn]:mx-auto lg:px-[24px] lg:[&amp;_.btn]:max-w-full">
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">鵝鑾鼻燈塔</h3><a class="btn btn-gary !block !px-4" href="#">已完成打卡</a>
                            </div>
                          </div>
                          <div class="p-2 pl-0">
                            <iframe class="w-full min-h-[200px] 2xl:min-h-[224px]" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3701.843229926366!2d120.85005422687482!3d21.90211185720733!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3471b1150ebf5f65%3A0x5757d23a8bc2a410!2z6bWd6ZG-6by754eI5aGU!5e0!3m2!1szh-TW!2stw!4v1696842937840!5m2!1szh-TW!2stw" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                          </div>
                        </div>
                      </li>
                      <li class="bg-white my-4 shadow-md lg:my-3">
                        <div class="grid grid-cols-2 lg:grid-cols-[204px_1fr] 2xl:grid-cols-[294px_1fr]">
                          <div class="text-center flex items-center">
                            <div class="w-full px-4 md:[&amp;_.btn]:max-w-[180px] md:[&amp;_.btn]:mx-auto lg:px-[24px] lg:[&amp;_.btn]:max-w-full">
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">來義林道</h3><a class="btn btn-gary !block !px-4" href="#">已完成打卡</a>
                            </div>
                          </div>
                          <div class="p-2 pl-0">
                            <iframe class="w-full min-h-[200px] 2xl:min-h-[224px]" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3685.591150187488!2d120.70183337688307!3d22.519517934910823!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346e261b52970c8d%3A0xbd8daf5bf8950d71!2zOTIy5bGP5p2x57ij5L6G576p6YSJ5L6G576p5p6X6YGT!5e0!3m2!1szh-TW!2stw!4v1696842905401!5m2!1szh-TW!2stw" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                          </div>
                        </div>
                      </li>
                </ul>
              </div>
              <div class="py-8">
                <h2 class="border-l-[6px] border-[#cc0033] pl-2 text-2xl font-medium leading-[1.2] mb-4 2xl:text-4xl 2xl:border-l-[12px] 2xl:pl-4">東部景點</h2>
                <ul class="lg:grid lg:grid-cols-2 lg:gap-x-7">
                      <li class="bg-white my-4 shadow-md lg:my-3">
                        <div class="grid grid-cols-2 lg:grid-cols-[204px_1fr] 2xl:grid-cols-[294px_1fr]">
                          <div class="text-center flex items-center">
                            <div class="w-full px-4 md:[&amp;_.btn]:max-w-[180px] md:[&amp;_.btn]:mx-auto lg:px-[24px] lg:[&amp;_.btn]:max-w-full">
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">花蓮巨型消防栓<br>觀景台</h3><a class="btn btn-red !block !px-4" href="#">前往打卡</a>
                            </div>
                          </div>
                          <div class="p-2 pl-0">
                            <iframe class="w-full min-h-[200px] 2xl:min-h-[224px]" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d29243.4598424779!2d121.51038797792202!3d23.624678059309925!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346f5371c6f269bf%3A0xd1f0408ccb7f68c7!2z6Iqx6JOu57ij5raI6Ziy5bGA56ys5LqM5aSn6ZqK6LGQ5r-x5raI6Ziy5YiG6ZqK!5e0!3m2!1szh-TW!2stw!4v1696842868430!5m2!1szh-TW!2stw" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                          </div>
                        </div>
                      </li>
                      <li class="bg-white my-4 shadow-md lg:my-3">
                        <div class="grid grid-cols-2 lg:grid-cols-[204px_1fr] 2xl:grid-cols-[294px_1fr]">
                          <div class="text-center flex items-center">
                            <div class="w-full px-4 md:[&amp;_.btn]:max-w-[180px] md:[&amp;_.btn]:mx-auto lg:px-[24px] lg:[&amp;_.btn]:max-w-full">
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">六十石山</h3><a class="btn btn-red !block !px-4" href="#">前往打卡</a>
                            </div>
                          </div>
                          <div class="p-2 pl-0">
                            <iframe class="w-full min-h-[200px] 2xl:min-h-[224px]" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d7333.334324585637!2d121.31257514887685!3d23.218797376030853!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346f6c51b1d9fa03%3A0xe9832ff5c4f75c3!2z5YWt5Y2B55-z5bGx!5e0!3m2!1szh-TW!2stw!4v1696842813714!5m2!1szh-TW!2stw" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                          </div>
                        </div>
                      </li>
                      <li class="bg-white my-4 shadow-md lg:my-3">
                        <div class="grid grid-cols-2 lg:grid-cols-[204px_1fr] 2xl:grid-cols-[294px_1fr]">
                          <div class="text-center flex items-center">
                            <div class="w-full px-4 md:[&amp;_.btn]:max-w-[180px] md:[&amp;_.btn]:mx-auto lg:px-[24px] lg:[&amp;_.btn]:max-w-full">
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">瑞穗林道</h3><a class="btn btn-gary !block !px-4" href="#">已完成打卡</a>
                            </div>
                          </div>
                          <div class="p-2 pl-0">
                            <iframe class="w-full min-h-[200px] 2xl:min-h-[224px]" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3658.601771041643!2d121.27945029231985!3d23.510849143366098!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x346f48762509fd27%3A0x13cebe188a701e03!2z6Iqx6JOu57ij55Ge56mX5p6X6YGT!5e0!3m2!1szh-TW!2stw!4v1696842781653!5m2!1szh-TW!2stw" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                          </div>
                        </div>
                      </li>
                      <li class="bg-white my-4 shadow-md lg:my-3">
                        <div class="grid grid-cols-2 lg:grid-cols-[204px_1fr] 2xl:grid-cols-[294px_1fr]">
                          <div class="text-center flex items-center">
                            <div class="w-full px-4 md:[&amp;_.btn]:max-w-[180px] md:[&amp;_.btn]:mx-auto lg:px-[24px] lg:[&amp;_.btn]:max-w-full">
                              <h3 class="text-xl font-bold text-[#cc0033] mb-3 lg:text-left lg:h-[4em] 2xl:text-3xl">三貂角燈塔</h3><a class="btn btn-gary !block !px-4" href="#">已完成打卡</a>
                            </div>
                          </div>
                          <div class="p-2 pl-0">
                            <iframe class="w-full min-h-[200px] 2xl:min-h-[224px]" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3615.7814735000215!2d121.99934957691865!3d25.007540389353693!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x345d6782806a6b99%3A0xef53259adbc66719!2z5LiJ6LKC6KeS54eI5aGU!5e0!3m2!1szh-TW!2stw!4v1696842396668!5m2!1szh-TW!2stw" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
                          </div>
                        </div>
                      </li>
                </ul>
              </div>
          <div class="text-center pb-4">
            <h2 class="text-lg font-medium 2xl:text-2xl">目前累積</h2><strong class="text-[#cc0033] text-5xl font-black lg:text-5xl 2xl:text-6xl">0</strong>
          </div>
        </div>
      </div>
    </div>
@endsection


    <div class="pop-box fixed z-50 w-screen h-screen bg-black/75 top-0 flex items-center justify-center" onclick="goto();">
      <div class="w-11/12 bg-white text-center text-2xl py-24 relative 2xl:w-fit 2xl:font-medium 2xl:text-3xl 2xl:px-20">回到銷售據點開始您的乘風遊活動!<a href="#" close-pop><img class="absolute right-4 top-4 w-9" src="/honda_static/images/close.png"></a></div>
    </div>
@section("script")
<script type="text/javascript">
    @include("partials.message")

    function goto() {
      location.href="/";
    }
</script>
@stop