나의 해외주소 바로가기

나의 해외주소 바로가기

<!-- 지사 주소 버튼 섹션 -->
<div style="max-width:1200px; margin:0 auto; padding:20px; border:1px solid #ddd; border-radius:8px;">
  <h2 style="text-align:center; font-size:24px; font-weight:bold; color:#333; margin-bottom:20px;">
    <a href="/index.php?page_no=8" style="color:inherit; text-decoration:none;">
      나의 해외주소 바로가기
    </a>
  </h2>
  <div style="display:flex; flex-wrap:wrap; gap:10px;">

    <!-- 미국 지사 -->
    <button
      style="flex:1; padding:15px; background:#f6efff; color:#333; border:none; border-radius:8px;
             cursor:pointer; font-size:16px; font-weight:bold; text-align:center;
             transition: transform 0.3s ease;"
      onmouseover="this.style.transform='scale(1.05)'"
      onmouseout="this.style.transform='scale(1)'"
      onclick="document.getElementById('overlay').style.display='block'; document.getElementById('modal-us_or').style.display='block';"
    >
      미국 지사<br>
      <img src="<https://imgur.com/CDcd68D.png>" alt="US Flag" style="margin-top:8px; border-radius:4px;">
    </button>

    <!-- 독일 지사 -->
    <button
      style="flex:1; padding:15px; background:#fff6e0; color:#333; border:none; border-radius:8px;
             cursor:pointer; font-size:16px; font-weight:bold; text-align:center;
             transition: transform 0.3s ease;"
      onmouseover="this.style.transform='scale(1.05)'"
      onmouseout="this.style.transform='scale(1)'"
      onclick="document.getElementById('overlay').style.display='block'; document.getElementById('modal-germany').style.display='block';"
    >
      독일 지사<br>
      <img src="<https://imgur.com/OumOMPA.png>" alt="Germany Flag" style="margin-top:8px; border-radius:4px;">
    </button>

    <!-- 영국 지사 -->
    <button
      style="flex:1; padding:15px; background:#eaffea; color:#333; border:none; border-radius:8px;
             cursor:pointer; font-size:16px; font-weight:bold; text-align:center;
             transition: transform 0.3s ease;"
      onmouseover="this.style.transform='scale(1.05)'"
      onmouseout="this.style.transform='scale(1)'"
      onclick="document.getElementById('overlay').style.display='block'; document.getElementById('modal-uk').style.display='block';"
    >
      영국 지사<br>
      <img src="<https://i.imgur.com/XJ2B1iP.png>" alt="UK Flag" style="margin-top:8px; border-radius:4px;">
    </button>

    <!-- 프랑스 지사 -->
    <button
      style="flex:1; padding:15px; background:#ffeef2; color:#333; border:none; border-radius:8px;
             cursor:pointer; font-size:16px; font-weight:bold; text-align:center;
             transition: transform 0.3s ease;"
      onmouseover="this.style.transform='scale(1.05)'"
      onmouseout="this.style.transform='scale(1)'"
      onclick="document.getElementById('overlay').style.display='block'; document.getElementById('modal-france').style.display='block';"
    >
      프랑스 지사<br>
      <img src="<https://imgur.com/aSJjYzA.png>" alt="France Flag" style="margin-top:8px; border-radius:4px;">
    </button>

  </div>
</div>

<!-- 공통 오버레이 -->
<div id="overlay"
     onclick="this.style.display='none'; document.querySelectorAll('.modal').forEach(m => m.style.display='none');"
     style="display:none; position:fixed; top:0; left:0; width:100%; height:100%;
            background:rgba(0,0,0,0.5); z-index:1000;">
</div>

<!-- 미국 모달 -->
<div id="modal-us_or" class="modal"
     style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
            width:420px; background:#fff; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,0.3);
            z-index:1001;">
  <div style="display:flex; align-items:center; justify-content:space-between;
              padding:12px 16px; border-bottom:1px solid #ddd;">
    <div style="display:flex; align-items:center;">
      <img src="<https://imgur.com/CDcd68D.png>" alt="US Flag" style="width:24px; height:24px; margin-right:8px;">
      <h3 style="margin:0; font-size:18px; color:#333;">미국 OR 배송센터</h3>
    </div>
    <button onclick="document.getElementById('overlay').style.display='none';
                     document.getElementById('modal-us_or').style.display='none';"
            style="background:none; border:none; font-size:20px; cursor:pointer; color:#666;">×</button>
  </div>
  <div style="padding:12px 16px; font-size:14px; color:#333; line-height:1.4;">
    <div style="display:flex; align-items:center; border-bottom:1px solid #eee; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">Address1</div>
      <div style="flex:1;">4576 SW 103RD AVE</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none; border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
    <div style="display:flex; align-items:center; border-bottom:1px solid #eee; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">Address2</div>
      <div style="flex:1;">GBC</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none; border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
    <div style="display:flex; align-items:center; border-bottom:1px solid #eee; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">City</div>
      <div style="flex:1;">Beaverton</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none; border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
    <div style="display:flex; align-items:center; border-bottom:1px solid #eee; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">States</div>
      <div style="flex:1;">OR</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none; border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
    <div style="display:flex; align-items:center; border-bottom:1px solid #eee; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">Zip Code</div>
      <div style="flex:1;">97005</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none; border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
    <div style="display:flex; align-items:center; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">Phone</div>
      <div style="flex:1;">+1 503-290-6615</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none; border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
  </div>
</div>

<!-- 독일 모달 -->
<div id="modal-germany" class="modal"
     style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
            width:420px; background:#fff; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,0.3);
            z-index:1001;">
  <div style="display:flex; align-items:center; justify-content:space-between;
              padding:12px 16px; border-bottom:1px solid #ddd;">
    <div style="display:flex; align-items:center;">
      <img src="<https://imgur.com/OumOMPA.png>" alt="Germany Flag" style="width:24px; height:24px; margin-right:8px;">
      <h3 style="margin:0; font-size:18px; color:#333;">독일 배송센터</h3>
    </div>
    <button onclick="document.getElementById('overlay').style.display='none';
                     document.getElementById('modal-germany').style.display='none';"
            style="background:none; border:none; font-size:20px; cursor:pointer; color:#666;">×</button>
  </div>
  <div style="padding:12px 16px; font-size:14px; color:#333; line-height:1.4;">
    <div style="display:flex; align-items:center; border-bottom:1px solid #eee; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">Address1</div>
      <div style="flex:1;">Gablonzer Str. 17</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none; border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
    <div style="display:flex; align-items:center; border-bottom:1px solid #eee; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">Address2</div>
      <div style="flex:1;">Gosky GmbH</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none; border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
    <div style="display:flex; align-items:center; border-bottom:1px solid #eee; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">City</div>
      <div style="flex:1;">Oberursel</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none; border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
    <div style="display:flex; align-items:center; border-bottom:1px solid #eee; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">States</div>
      <div style="flex:1;">Hessen (생략가능)</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none; border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
    <div style="display:flex; align-items:center; border-bottom:1px solid #eee; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">Zip Code</div>
      <div style="flex:1;">61440</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none; border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
    <div style="display:flex; align-items:center; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">Tel</div>
      <div style="flex:1;">+49 170 606 0597</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none; border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
    <div style="font-size:12px; font-style:italic; color:#999; margin-top:8px;">
      VAT ID: DE325540245
    </div>
  </div>
</div>
<!-- 영국 모달 -->
<div id="modal-uk" class="modal"
     style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
            width:420px; background:#fff; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,0.3);
            z-index:1001;">
  <div style="display:flex; align-items:center; justify-content:space-between;
              padding:12px 16px; border-bottom:1px solid #ddd;">
    <div style="display:flex; align-items:center;">
      <img src="<https://i.imgur.com/XJ2B1iP.png>" alt="UK Flag" style="width:24px; height:24px; margin-right:8px;">
      <h3 style="margin:0; font-size:18px; color:#333;">영국 배송센터</h3>
    </div>
    <button onclick="document.getElementById('overlay').style.display='none';
                     document.getElementById('modal-uk').style.display='none';"
            style="background:none; border:none; font-size:20px; cursor:pointer; color:#666;">×</button>
  </div>
  <div style="padding:12px 16px; font-size:14px; color:#333; line-height:1.4;">
    <div style="display:flex; align-items:center; border-bottom:1px solid #eee; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">Address1</div>
      <div style="flex:1;">Unit 7, Air Links Ind Est</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none; border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
    <div style="display:flex; align-items:center; border-bottom:1px solid #eee; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">Address2</div>
      <div style="flex:1;">SPITFIRE WAY GBC</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none; border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
    <div style="display:flex; align-items:center; border-bottom:1px solid #eee; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">City</div>
      <div style="flex:1;">Heston</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none; border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
    <div style="display:flex; align-items:center; border-bottom:1px solid #eee; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">States</div>
      <div style="flex:1;">Middlesex (생략가능)</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none; border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
    <div style="display:flex; align-items:center; border-bottom:1px solid #eee; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">Zip Code</div>
      <div style="flex:1;">TW5 9NR</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none; border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
    <div style="display:flex; align-items:center; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">Phone</div>
      <div style="flex:1;">+44 20 8759 0200</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none; border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
  </div>
</div>

<!-- 프랑스 모달 -->
<div id="modal-france" class="modal"
     style="display:none; position:fixed; top:50%; left:50%; transform:translate(-50%,-50%);
            width:420px; background:#fff; border-radius:8px; box-shadow:0 2px 10px rgba(0,0,0,0.3);
            z-index:1001;">
  <div style="display:flex; align-items:center; justify-content:space-between;
              padding:12px 16px; border-bottom:1px solid #ddd;">
    <div style="display:flex; align-items:center;">
      <img src="<https://imgur.com/aSJjYzA.png>" alt="France Flag" style="width:24px; height:24px; margin-right:8px;">
      <h3 style="margin:0; font-size:18px; color:#333;">프랑스 배송센터</h3>
    </div>
    <button onclick="document.getElementById('overlay').style.display='none';
                     document.getElementById('modal-france').style.display='none';"
            style="background:none; border:none; font-size:20px; cursor:pointer; color:#666;">×</button>
  </div>
  <div style="padding:12px 16px; font-size:14px; color:#333; line-height:1.4;">
    <div style="display:flex; align-items:center; border-bottom:1px solid #eee; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">Address1</div>
      <div style="flex:1;">50 Rue des Chardonnerets</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none; border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
    <div style="display:flex; align-items:center; border-bottom:1px solid #eee; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">Address2</div>
      <div style="flex:1;">LOT 14, ACI me2u, GBC</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none; border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
    <div style="display:flex; align-items:center; border-bottom:1px solid #eee; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">City</div>
      <div style="flex:1;">Tremblay en France</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none; border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
    <div style="display:flex; align-items:center; border-bottom:1px solid #eee; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">States</div>
      <div style="flex:1;">Paris (생략가능)</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none; border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
    <div style="display:flex; align-items:center; border-bottom:1px solid #eee; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">Zip Code</div>
      <div style="flex:1;">93290</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none; border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
    <div style="display:flex; align-items:center; padding:8px 0;">
      <div style="width:80px; font-weight:bold;">Phone</div>
      <div style="flex:1;">+33 06 15 95 77 37</div>
      <button onclick="navigator.clipboard.writeText(this.previousElementSibling.innerText)"
              style="width:60px; padding:4px 0; border:none;	border-radius:4px;
                     background:#ccc; color:#333; cursor:pointer; font-size:12px;">Copy</button>
    </div>
  </div>
</div>