mo0647
/
mjlogistics


			
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153
							<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="assets/css/style.css">
  <link rel="stylesheet" href="assets/css/media.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
  <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  <title>MJ Logistics</title>
</head>
<body>
  <header>
    <div class="header--wrap">
      <div class="header--inner">
        <div class="header--logo">
        </div>
        <div class="header--nav">
          <ul>
            <li><a href="about.html">ABOUT US</a>
              <div class="sub--nav--wrap">
                <div class="sub--nav">
                  <a href="about.html">인사말 & 본사정보</a>
                  <a href="about.html">연혁</a>
                  <a href="about.html">조직도</a>
                </div>
              </div>
            </li>
            <li><a href="air.html">business</a>
              <div class="sub--nav--wrap">
                <div class="sub--nav">
                  <a href="air.html">항공 운송 서비스</a>
                  <a href="#">해상 운송 서비스</a>
                  <a href="#">철도 운송 서비스</a>
                  <a href="#">물류 창고 서비스</a>
                  <a href="#">통관 서비스</a>
                  <a href="#">육상 운송 서비스</a>
                </div>
              </div>
            </li>
            <li><a href="#">network</a>
              <div class="sub--nav--wrap">
                <div class="sub--nav">
                  <a href="#">MJ holdings limited</a>
                  <a href="#">MJ logistics (HK) limited</a>
                  <a href="#">darong warehouse & <br>transportation limited</a>
                  <a href="#">shenzhen MJ logistics Co., <br>limited</a>
                  <a href="#">MJ logistics (foshan) office</a>
                  <a href="#">MJ logistics (shanghai) <br>limited xiamen branch</a>
                  <a href="#">
                    MJ logistics (shanghai) <br>limited chongqing branch
                  </a>
                  <a href="#">
                    MJ logistics (shanghai) <br>limited guangzhou branch
                  </a>
                  <a href="#">MJ logistics (shanghai) limited</a>
                  <a href="#">MJ logistics tianjin limited</a>
                </div>
                <div class="sub--nav">
                  <a href="#">
                    MJ logistics qingdao limited
                  </a>
                  <a href="#">
                    MJ logistics (japan) limited
                  </a>
                  <a href="#">
                    MJ logistics (thailand) co.,LTD.
                  </a>
                  <a href="#">
                    MJ logistics (vientnam) co.,LTD.
                  </a>
                  <a href="#">
                    MJ logistics (hanoi) co.,LTD.
                  </a>
                  <a href="#">
                    MJ logistics (manila) inc
                  </a>
                  <a href="#">
                    MJ logistics (HK) limited <br>taiwan branch
                  </a>
                  <a href="#">
                    MJ logistics (SG) PTE. ltd
                  </a>
                  <a href="#">
                    PT. MJL logistic jakarta
                  </a>
                  <a href="#">
                    MJ logistics (ningbo) limited
                  </a>
                </div>
                <div class="sub--nav">
                  <a href="#">
                    MJ logistics (tianjin) limited <br>dalian branch
                  </a>
                  <a href="#">
                    MJ logistics malaysia SDN. <br>BHD.
                  </a>
                  <a href="#">
                    MJ logistics india PVT ltd
                  </a>
                </div>
              </div>
            </li>
            <li><a href="#">contact us</a>
              <div class="sub--nav--wrap">
                <div class="sub--nav">
                  <a href="#">문의</a>
                  <a href="#">연락처<br>(지점별 담당자 연락처)</a>
                </div>
              </div></li>
          </ul>
        </div>
        <div class="header--lang--btn">
          <i class="ico--global"></i>
          <span>KO</span>
          <i class="ico--arrow"></i>
          <ul class="lang--select--wrap">
            <li><a href="?lang=ko">KO</a></li>
            <li><a href="?lang=en">EN</a></li>
            <li><a href="?lang=jp">JP</a></li>
            <li><a href="?lang=cn">CN</a></li>
          </ul>
        </div>
        <div class="header--mob--lang--btn"></div>
        <div class="header--mob--lang--wrap">
          <ul>
            <li><a href="?lang=ko">KO</a></li>
            <li><a href="?lang=en">EN</a></li>
            <li><a href="?lang=jp">JP</a></li>
            <li><a href="?lang=cn">CN</a></li>
          </ul>
        </div>
        <div class="header--mob--btn"></div>
        <div class="header--mob--wrap">
          <div class="mob--l">
            <ul>
              <li><a href="about.html">ABOUT US</a></li>
              <li><a href="#">business</a></li>
              <li>
                <a href="#">network</a>
              </li>
              <li><a href="#">contact us</a></li>
            </ul>
          </div>
          <div class="mob--r">
            <div class="sub--nav--wrap">
              <div class="sub--nav">
                <a href="about.html">인사말 & 본사정보</a>
                <a href="about.html">연혁</a>
                <a href="about.html">조직도</a>
              </div>
              <div class="sub--nav">
                <a href="air.html">항공 운송 서비스</a>
                <a href="#">해상 운송 서비스</a>
                <a href="#">철도 운송 서비스</a>
                <a href="#">물류 창고 서비스</a>
                <a href="#">통관 서비스</a>
                <a href="#">육상 운송 서비스</a>
              </div>
              <div class="sub--nav">
                <a href="#">MJ holdings limited</a>
                <a href="#">MJ logistics (HK) limited</a>
                <a href="#">darong warehouse & <br>transportation limited</a>
                <a href="#">shenzhen MJ logistics Co., <br>limited</a>
                <a href="#">MJ logistics (foshan) office</a>
                <a href="#">MJ logistics (shanghai) <br>limited xiamen branch</a>
                <a href="#">
                  MJ logistics (shanghai) <br>limited chongqing branch
                </a>
                <a href="#">
                  MJ logistics (shanghai) <br>limited guangzhou branch
                </a>
                <a href="#">MJ logistics (shanghai) limited</a>
                <a href="#">MJ logistics tianjin limited</a>
                <a href="#">
                  MJ logistics qingdao limited
                </a>
                <a href="#">
                  MJ logistics (japan) limited
                </a>
                <a href="#">
                  MJ logistics (thailand) co.,LTD.
                </a>
                <a href="#">
                  MJ logistics (vientnam) co.,LTD.
                </a>
                <a href="#">
                  MJ logistics (hanoi) co.,LTD.
                </a>
                <a href="#">
                  MJ logistics (manila) inc
                </a>
                <a href="#">
                  MJ logistics (HK) limited <br>taiwan branch
                </a>
                <a href="#">
                  MJ logistics (SG) PTE. ltd
                </a>
                <a href="#">
                  PT. MJL logistic jakarta
                </a>
                <a href="#">
                  MJ logistics (ningbo) limited
                </a>
                <a href="#">
                  MJ logistics (tianjin) limited <br>dalian branch
                </a>
                <a href="#">
                  MJ logistics malaysia SDN. <br>BHD.
                </a>
                <a href="#">
                  MJ logistics india PVT ltd
                </a>
              </div>
              <div class="sub--nav">
                <a href="#">문의</a>
                <a href="#">연락처<br>(지점별 담당자 연락처)</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </header>
  <div class="container">
    <div class="image--section">
      <div class="main--swiper">
        <!-- Additional required wrapper -->
        <div class="swiper-wrapper">
          <!-- Slides -->
          <div class="swiper-slide">
            <div class="txt--wrap">
              <span class="txt--fade">
                Worldwide AIR TRANSRATION services
              </span>
              <h2 class="txt--fade"><strong>mj</strong> logistics</h2>
              <div class="btn--wrap txt--fade">
                <a href="#">Detail View <i class="ico"></i></a>
              </div>
            </div>
            <img src="assets/img/main--1.png" alt="">
          </div>
          <div class="swiper-slide">
            <div class="txt--wrap">
              <span class="txt--fade">
                High-quality OCEAN TRANSPORTATION services
              </span>
              <h2 class="txt--fade"><strong>mj</strong> logistics</h2>
              <div class="btn--wrap txt--fade">
                <a href="#">Detail View <i class="ico"></i></a>
              </div>
            </div>
            <img src="assets/img/main--2.png" alt="">
          </div>
          <div class="swiper-slide">
            <div class="txt--wrap">
              <span class="txt--fade">
                Speedy and safe LAND TRANSRATION services
              </span>
              <h2 class="txt--fade"><strong>mj</strong> logistics</h2>
              <div class="btn--wrap txt--fade">
                <a href="#">Detail View <i class="ico"></i></a>
              </div>
            </div>
            <img src="assets/img/main--3.png" alt="">
          </div>
          <div class="swiper-slide">
            <div class="txt--wrap">
              <span class="txt--fade">
                TRAIN TRANSRATION services supporting large transit volumes
              </span>
              <h2 class="txt--fade"><strong>mj</strong> logistics</h2>
              <div class="btn--wrap txt--fade">
                <a href="#">Detail View <i class="ico"></i></a>
              </div>
            </div>
            <img src="assets/img/main--4.png" alt="">
          </div>
          <div class="swiper-slide">
            <div class="txt--wrap">
              <span class="txt--fade">
                We provide various additional services in cooperation with distribution hubs <br>centered around locations of major bases
              </span>
              <h2 class="txt--fade"><strong>mj</strong> logistics</h2>
              <div class="btn--wrap txt--fade">
                <a href="#">Detail View <i class="ico"></i></a>
              </div>
            </div>
            <img src="assets/img/main--5.png" alt="">
          </div>
          <div class="swiper-slide">
            <div class="txt--wrap">
              <span class="txt--fade">
                Import / Export customs clearance declaration
              </span>
              <h2 class="txt--fade"><strong>mj</strong> logistics</h2>
              <div class="btn--wrap txt--fade">
                <a href="#">Detail View <i class="ico"></i></a>
              </div>
            </div>
            <img src="assets/img/main--6.png" alt="">
          </div>
        </div>
        <div class="swiper--btn--wrap">
          <div class="swiper-button-next"></div>
          <div class="swiper-button-prev"></div>
        </div>
        <div class="swiper--pag--wrap">
          <div class="swiper--pag">
            <p>air transportation</p>
            <div class="pag--numb">
              <span class="num--1 active">01</span>
              <div class="swiper-pagination"></div>
              <span class="num--6">06</span>
            </div>
          </div>
        </div>
        <div class="main--swiper--tab">
          <div class="tab--wrap">
            <dl class="tab--inner">
              <dt>
                air transportation
              </dt>
              <dd>Safe and speedy air transportation services</dd>
            </dl>
          </div>
          <div class="tab--wrap">
            <dl class="tab--inner">
              <dt>
                ocean transportation
              </dt>
              <dd>
                FCL SERVICE, LCL SERVICE, BULK & PROJECT CARGO TRANSPORT
              </dd>
            </dl>
          </div>
          <div class="tab--wrap">
            <dl class="tab--inner">
              <dt>
                land transportation
              </dt>
              <dd>
                Container, General cargo, Heavy goods transport
              </dd>
            </dl>
          </div>
          <div class="tab--wrap">
            <dl class="tab--inner">
              <dt>
                train transportation
              </dt>
              <dd>
                Realization of scheduled transportation and achieving customer satisfaction
              </dd>
            </dl>
          </div>
          <div class="tab--wrap">
            <dl class="tab--inner">
              <dt>
                ware <br>housing
              </dt>
              <dd>
                Distribution centers, Import and export bonded warehouse
              </dd>
            </dl>
          </div>
          <div class="tab--wrap">
            <dl class="tab--inner">
              <dt>
                customs clearance
              </dt>
              <dd>
                Import customs clearance declaration. Export customs clearance declaration
              </dd>
            </dl>
          </div>
        </div>
      </div>
    </div>
    <div class="image--section global--section">
      <div class="section--container">
        <div class="map--wrap">
          <div class="map--img">
            <img src="assets/img/main--map.svg" alt="">
            <div class="map--dot--box">
              <div class="map--dots">
                <div class="dot dot1">
                  <span class="circle">Sea</span>
                  <p><span>51,883</span></p>
                  <span class="txt">TEU</span>
                </div>
                <div class="dot dot2">
                  <span class="circle">Sale Revenue</span>
                  <p><span>47</span><span>M</span></p>
                  <span class="txt">USD</span>
                </div>
                <div class="dot dot3">
                  <span class="circle">Air</span>
                  <p><span>5,095</span></p>
                  <span class="txt">TON</span>
                </div>
                <div class="dot dot4">
                  <span class="circle">Employees</span>
                  <p><span>162</span><span>&nbsp;+</span></p>
                </div>
                <div class="dot dot5">
                  <span class="circle">Warehouse</span>
                  <p><span>5</span></p>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="text--wrap">
          <h4 data-aos="fade-left"><span>2024 Year</span> : 20 Networks in 10 Countries</h4>
          <h3 data-aos="fade-left" data-aos-delay="200">GLOBAL NETWORK</h3>
          <p data-aos="fade-left" data-aos-delay="400">고객 가치를 최우선으로 생각하는 글로벌 물류 기업으로 성장하겠습니다.</p>
          <div class="btn--wrap" data-aos="fade-left" data-aos-delay="600">
            <a href="#">Contact Us <i class="ico"></i></a>
          </div>
        </div>
      </div>
    </div>
    <div class="image--section contact--section">
      <div class="section--container">
        <div class="contact--wrap">
          <div class="location--group">
            <div class="location--item">
              <input checked type="radio" name="location" id="location1" value="location1">
              <label for="location1">
                <div class="image--area"></div>
                <div class="text--area">hongkong</div>
              </label>
            </div>
            <div class="location--item">
              <input type="radio" name="location" id="location2" value="location2">
              <label for="location2">
                <div class="image--area"></div>
                <div class="text--area">taiwan</div>
              </label>
            </div>
            <div class="location--item">
              <input type="radio" name="location" id="location3" value="location3">
              <label for="location3">
                <div class="image--area"></div>
                <div class="text--area">shenzhen</div>
              </label>
            </div>
            <div class="location--item">
              <input type="radio" name="location" id="location4" value="location4">
              <label for="location4">
                <div class="image--area"></div>
                <div class="text--area">shanghai</div>
              </label>
            </div>
            <div class="location--item">
              <input type="radio" name="location" id="location20" value="location20">
              <label for="location20">
                <div class="image--area"></div>
                <div class="text--area">india</div>
              </label>
            </div>
            <div class="location--item">
              <input type="radio" name="location" id="location5" value="location5">
              <label for="location5">
                <div class="image--area"></div>
                <div class="text--area">guangzhou</div>
              </label>
            </div>
            <div class="location--item">
              <input type="radio" name="location" id="location6" value="location6">
              <label for="location6">
                <div class="image--area"></div>
                <div class="text--area">tianjin</div>
              </label>
            </div>
            <div class="location--item">
              <input type="radio" name="location" id="location7" value="location7">
              <label for="location7">
                <div class="image--area"></div>
                <div class="text--area">foshan</div>
              </label>
            </div>
            <div class="location--item">
              <input type="radio" name="location" id="location8" value="location8">
              <label for="location8">
                <div class="image--area"></div>
                <div class="text--area">qingdao</div>
              </label>
            </div>
            <div class="location--item">
              <input type="radio" name="location" id="location21" value="location21">
              <label for="location21">
                <div class="image--area"></div>
                <div class="text--area">MALAYSIA</div>
              </label>
            </div>
            <div class="location--item">
              <input type="radio" name="location" id="location9" value="location9">
              <label for="location9">
                <div class="image--area"></div>
                <div class="text--area">xiamen</div>
              </label>
            </div>
            <div class="location--item">
              <input type="radio" name="location" id="location10" value="location10">
              <label for="location10">
                <div class="image--area"></div>
                <div class="text--area">chongqing</div>
              </label>
            </div>
            <div class="location--item">
              <input type="radio" name="location" id="location11" value="location11">
              <label for="location11">
                <div class="image--area"></div>
                <div class="text--area">hanoi</div>
              </label>
            </div>
            <div class="location--item">
              <input type="radio" name="location" id="location12" value="location12">
              <label for="location12">
                <div class="image--area"></div>
                <div class="text--area">vietnam</div>
              </label>
            </div>
            <div class="location--item">
              <input type="radio" name="location" id="location22" value="location22">
              <label for="location22">
                <div class="image--area"></div>
                <div class="text--area">WAREHOUSE</div>
              </label>
            </div>
            <div class="location--item">
              <input type="radio" name="location" id="location13" value="location13">
              <label for="location13">
                <div class="image--area"></div>
                <div class="text--area">japan</div>
              </label>
            </div>
            <div class="location--item">
              <input type="radio" name="location" id="location14" value="location14">
              <label for="location14">
                <div class="image--area"></div>
                <div class="text--area">thailand</div>
              </label>
            </div>
            <div class="location--item">
              <input type="radio" name="location" id="location15" value="location15">
              <label for="location15">
                <div class="image--area"></div>
                <div class="text--area">manila</div>
              </label>
            </div>
            <div class="location--item">
              <input type="radio" name="location" id="location16" value="location16">
              <label for="location16">
                <div class="image--area"></div>
                <div class="text--area">jakarta</div>
              </label>
            </div>
            <div class="location--item">
              <input type="radio" name="location" id="location23" value="location23">
              <label for="location23">
                <div class="image--area"></div>
                <div class="text--area">mj holdings</div>
              </label>
            </div>
            <div class="location--item">
              <input type="radio" name="location" id="location17" value="location17">
              <label for="location17">
                <div class="image--area"></div>
                <div class="text--area">singapore</div>
              </label>
            </div>
            <div class="location--item">
              <input type="radio" name="location" id="location18" value="location18">
              <label for="location18">
                <div class="image--area"></div>
                <div class="text--area">ningbo</div>
              </label>
            </div>
            <div class="location--item">
              <input type="radio" name="location" id="location19" value="location19">
              <label for="location19">
                <div class="image--area"></div>
                <div class="text--area">dalian</div>
              </label>
            </div>
          </div>
          <div class="contact--tit--mo">
            <h3>Inquiry Board</h3>
              <p>문의 게시판에 지점별 선택 문의 내용을 작성해주세요.</p>
          </div>
          <div class="contact--form">
            <div class="contact--tit">
              <div>
                <h3>Inquiry Board</h3>
                <p>문의 게시판에 지점별 선택 문의 내용을 작성해주세요.</p>
              </div>
              <button type="" class="contact--btn"></button>
            </div>
            <div class="contact--cont">
              <div class="input--wrap">
                <p>Contact Branch</p>
                <select name="contact-branch" id="contact-branch">
                  <option value="">지점을 선택하세요</option>
                  <option value="location1">HONGKONG</option>
                  <option value="location2">TAIWAN</option>
                  <option value="location3">SHENZHEN</option>
                  <option value="location4">SHANGHAI</option>
                  <option value="location20">INDIA</option>
                  <option value="location5">GUANGZHOU</option>
                  <option value="location6">TIANJIN</option>
                  <option value="location7">FOSHAN</option>
                  <option value="location8">QINGDAO</option>
                  <option value="location21">MALAYSIA</option>
                  <option value="location9">XIAMEN</option>
                  <option value="location10">CHONGQING</option>
                  <option value="location11">HANOI</option>
                  <option value="location12">VIETNAM</option>
                  <option value="location22">WAREHOUSE</option>
                  <option value="location13">JAPAN</option>
                  <option value="location14">THAILAND</option>
                  <option value="location15">MANILA</option>
                  <option value="location16">JAKARTA</option>
                  <option value="location23">MJ HOLDINGS</option>
                  <option value="location17">SINGAPORE</option>
                  <option value="location18">NINGBO</option>
                  <option value="location19">DALIAN</option>
                </select>
              </div>
              <div class="input--type2--wrap">
                <div class="input--wrap">
                  <p>Company Name</p>
                  <input type="text">
                </div>
                <div class="input--wrap">
                  <p>Your Name</p>
                  <input type="text">
                </div>
              </div>
              <div class="input--wrap">
                <p>Subject</p>
                <input type="text">
              </div>
              <div class="input--wrap">
                <p>Message</p>
                <textarea name="" id="" rows="5"></textarea>
              </div>
            </div>
          </div>
          <div class="contact--btn--mo">
            <button type="button"><i class="ico"></i>Submit An Inquiry</button>
          </div>
        </div>
      </div>
      <footer>
        <div class="footer--wrap">
          copyrightⓒ 2025 MJ logistics limited all right reserved.
        </div>
      </footer>
    </div>
  </div>
</body>
<script>
  AOS.init({
    once: false,
    duration: 800,
  });
  gsap.registerPlugin(ScrollTrigger);
  
  gsap.set('.txt--fade', {
    opacity: 0,
    y: 30
  });

  // Map dots counter animation
  function animateCounter(element, endValue) {
    const obj = { value: 0 };
    gsap.to(obj, {
      value: endValue,
      duration: 2,
      ease: "power2.out",
      onUpdate: function() {
        // 숫자에 콤마 추가
        const formattedValue = Math.round(obj.value).toLocaleString();
        element.textContent = formattedValue;
      }
    });
  }

  // Global section에 진입했을 때 카운터 애니메이션 실행
  ScrollTrigger.create({
    trigger: ".global--section",
    start: "top 80%",
    onEnter: function() {
      // 각 dot의 첫 번째 span 요소들과 목표값
      const counters = [
        { element: document.querySelector('.dot1 p span'), target: 51883 },
        { element: document.querySelector('.dot2 p span:first-child'), target: 47 },
        { element: document.querySelector('.dot3 p span'), target: 5095 },
        { element: document.querySelector('.dot4 p span:first-child'), target: 162 },
        { element: document.querySelector('.dot5 p span'), target: 5 }
      ];

      // 각 카운터 애니메이션 실행 (순차적으로)
      counters.forEach((counter, index) => {
        if (counter.element) {
          setTimeout(() => {
            animateCounter(counter.element, counter.target);
          }, index * 200);
        }
      });
    }
  });

  // Get all tab elements
  const tabWraps = document.querySelectorAll('.main--swiper--tab .tab--wrap');
  const num1 = document.querySelector('.num--1');
  const num6 = document.querySelector('.num--6');
  const swiperPagText = document.querySelector('.swiper--pag p');
  
  // 슬라이드별 텍스트 배열
  const slideTexts = [
    'air transportation',
    'ocean transportation', 
    'land transportation',
    'train transportation',
    'warehousing',
    'customs clearance'
  ];
  
  // Function to update active tab
  function updateActiveTab(activeIndex) {
    tabWraps.forEach((tab, index) => {
      if (index === activeIndex) {
        tab.classList.add('active');
      } else {
        tab.classList.remove('active');
      }
    });
  }

  // Function to update pagination numbers
  function updatePaginationNumbers(activeIndex) {
    if (num1 && num6) {
      // 현재 슬라이드 번호를 num--1에 표시 (01, 02, 03, ...)
      const currentSlideNumber = (activeIndex + 1).toString().padStart(2, '0');
      num1.textContent = currentSlideNumber;
      
      // 첫 번째 슬라이드일 때 num--1에 active 클래스 추가
      // if (activeIndex === 0) {
      //   num1.classList.add('active');
      // } else {
      //   num1.classList.remove('active');
      // }
      
      // 마지막 슬라이드일 때 num--6에 active 클래스 추가
      if (activeIndex === 5) { // 6개 슬라이드이므로 인덱스는 5
        num6.classList.add('active');
      } else {
        num6.classList.remove('active');
      }
    }
  }

  // Function to update pagination text
  function updatePaginationText(activeIndex) {
    if (swiperPagText && slideTexts[activeIndex]) {
      swiperPagText.textContent = slideTexts[activeIndex];
    }
  }

  // 애니메이션 실행 중복 방지 변수
  let isAnimating = false;
  
  // GSAP 애니메이션 함수
  function animateSlide(slideIndex) {
    // 이미 애니메이션이 실행 중이면 리턴
    if (isAnimating) return;
    
    isAnimating = true;
    
    // 실제 DOM에서 활성화된 슬라이드 찾기
    const activeSlide = document.querySelector('.swiper-slide-active');
    
    if (activeSlide) {
      const elements = activeSlide.querySelectorAll('.txt--fade');
      
      // 모든 슬라이드의 요소들 초기화
      gsap.set('.txt--fade', {
        opacity: 0,
        y: 50
      });
      
      // 현재 활성 슬라이드 요소들만 애니메이션
      gsap.to(elements, {
        opacity: 1,
        y: 0,
        duration: 0.8,
        stagger: 0.2,
        ease: "power2.out",
        delay: 0.1,
        onComplete: function() {
          // 애니메이션 완료 후 플래그 리셋
          isAnimating = false;
        }
      });
    } else {
      isAnimating = false;
    }
  }

  const swiper = new Swiper('.main--swiper', {
    // Optional parameters
    loop: true,
    effect: "fade",
    autoplay: {
      delay: 2000,
    },
    pagination: {
      el: ".main--swiper .swiper-pagination",
      type: "progressbar",
    },
    navigation: {
      nextEl: ".main--swiper .swiper-button-next",
      prevEl: ".main--swiper .swiper-button-prev",
    },
    speed: 1200,
    // If we need pagination
    on: {
      slideChange: function () {
        updateActiveTab(this.realIndex);
        updatePaginationNumbers(this.realIndex);
        updatePaginationText(this.realIndex);
      },
      slideChangeTransitionEnd: function() {
        // 애니메이션 중복 실행 방지를 위해 delay 사용
        setTimeout(() => {
          animateSlide(this.realIndex);
        }, 100);
      },
      slideChangeTransitionStart: function() {
        // 전환 시작 시 모든 요소 초기화
        gsap.set('.txt--fade', {
          opacity: 0,
          y: 50
        });
      }
    }
  });

  // 초기 슬라이드 애니메이션
  animateSlide(0);
  
  tabWraps.forEach((tab, index) => {
    tab.addEventListener('click', () => {
      swiper.slideToLoop(index);
      updateActiveTab(index);
    });
  });

  updateActiveTab(0);
  updatePaginationNumbers(0);
  updatePaginationText(0);

  // Detail View 버튼에 hover 시 autoplay 제어
  const detailButtons = document.querySelectorAll('.main--swiper .btn--wrap a');
  
  detailButtons.forEach(button => {
    button.addEventListener('mouseenter', function() {
      // hover 시 autoplay 정지
      swiper.autoplay.stop();
    });
    
    button.addEventListener('mouseleave', function() {
      // hover 해제 시 autoplay 재시작
      swiper.autoplay.start();
    });
  });

  window.addEventListener('scroll', function() {
    const scrollPosition = window.pageYOffset;
    const windowHeight = window.innerHeight;
    
    // 현재 보이는 이미지 섹션 계산
    const currentSection = Math.floor(scrollPosition / windowHeight) + 1;
  });

  // 부드러운 스크롤 스냅 효과
  let isScrolling = false;
  let scrollTimeout;
  
  window.addEventListener('wheel', function(e) {
      if (window.innerWidth < 1200) return;


      e.preventDefault();
      
      if (isScrolling) return;
      
      const currentScroll = window.pageYOffset;
      const windowHeight = window.innerHeight;
      const currentSection = Math.round(currentScroll / windowHeight);
      
      let targetSection;
      
      if (e.deltaY > 0) {
          // 아래로 스크롤
          targetSection = Math.min(currentSection + 1, 2); // 최대 2 (3번째 섹션)
      } else {
          // 위로 스크롤
          targetSection = Math.max(currentSection - 1, 0); // 최소 0 (1번째 섹션)
      }
      
      const targetScroll = targetSection * windowHeight;
      
      // 이미 목표 위치에 있으면 스크롤하지 않음
      if (Math.abs(currentScroll - targetScroll) < 10) return;
      
      isScrolling = true;
      
      // 부드러운 스크롤 애니메이션
      smoothScrollTo(targetScroll, () => {
          isScrolling = false;
      });
      
  }, { passive: false });
  
  function smoothScrollTo(targetY, callback) {
            const startY = window.pageYOffset;
            const distance = targetY - startY;
            const duration = 1000; // 600ms로 단축
            let startTime = null;
            
            function animation(currentTime) {
                if (startTime === null) startTime = currentTime;
                const timeElapsed = currentTime - startTime;
                const progress = Math.min(timeElapsed / duration, 1);
                
                // easeOutQuart 함수 (더 빠른 시작, 부드러운 끝)
                const easedProgress = 1 - Math.pow(1 - progress, 4);
                
                window.scrollTo(0, startY + distance * easedProgress);
                
                if (timeElapsed < duration) {
                    requestAnimationFrame(animation);
                } else {
                    // 애니메이션 완료 후 콜백 실행
                    if (callback) callback();
                }
            }
            
            requestAnimationFrame(animation);
        }

  // contact
  const locationRadios = document.querySelectorAll('input[name="location"]');
  const contactSelect = document.getElementById('contact-branch');

  // 라디오 버튼 변경 시 select 업데이트
  locationRadios.forEach(radio => {
    radio.addEventListener('change', function() {
      if (this.checked) {
        contactSelect.value = this.value;
      }
    });
  });

  // select 변경 시 라디오 버튼 업데이트
  contactSelect.addEventListener('change', function() {
    const selectedValue = this.value;
    if (selectedValue) {
      const targetRadio = document.getElementById(selectedValue);
      if (targetRadio) {
        targetRadio.checked = true;
      }
    }
  });

  // 페이지 로드 시 초기 설정
  const checkedRadio = document.querySelector('input[name="location"]:checked');
  if (checkedRadio) {
    contactSelect.value = checkedRadio.value;
  }

  // 햄버거 메뉴 기능, 언어 선택 기능
  const headerMobBtn = document.querySelector('.header--mob--btn');
  const headerMobWrap = document.querySelector('.header--mob--wrap');
  const mobLLinks = document.querySelectorAll('.mob--l a');
  const subNavs = document.querySelectorAll('.mob--r .sub--nav');

  const headerLangBtn = document.querySelector('.header--mob--lang--btn');
  const headerLangWrap = document.querySelector('.header--mob--lang--wrap');

  // 햄버거 메뉴 토글
  if (headerMobBtn && headerMobWrap) {
    headerMobBtn.addEventListener('click', function() {
      headerMobBtn.classList.toggle('active');
      headerMobWrap.classList.toggle('active');
      headerLangBtn.classList.toggle('hide');
    });
  }

  if (headerLangBtn && headerLangWrap){
    headerLangBtn.addEventListener('click', function() {
      headerLangBtn.classList.toggle('active');
      headerLangWrap.classList.toggle('active');
      headerMobBtn.classList.toggle('hide');
    })
  }

  // 대메뉴 클릭 시 소메뉴 표시
  mobLLinks.forEach((link, index) => {
    link.addEventListener('click', function(e) {
      e.preventDefault();
      
      // 모든 대메뉴에서 active 클래스 제거
      mobLLinks.forEach(l => l.classList.remove('active'));
      // 클릭된 대메뉴에 active 클래스 추가
      this.classList.add('active');
      
      // 모든 소메뉴 숨기기
      subNavs.forEach(nav => nav.classList.remove('active'));
      
      // 해당 소메뉴 표시
      if (subNavs[index]) {
        subNavs[index].classList.add('active');
      }
    });
  });

  // 첫 번째 메뉴를 기본으로 활성화
  if (mobLLinks.length > 0 && subNavs.length > 0) {
    mobLLinks[0].classList.add('active');
    subNavs[0].classList.add('active');
  }

  // 언어 선택 기능
  const langBtn = document.querySelector('.header--lang--btn');
  const langSelectWrap = document.querySelector('.lang--select--wrap');
  const langSpan = document.querySelector('.header--lang--btn span');
  const langOptions = document.querySelectorAll('.lang--select--wrap li');
  const mobLangOptions = document.querySelectorAll('.header--mob--lang--wrap li');

  // URL 파라미터에서 현재 언어 가져오기
  function getCurrentLanguage() {
    const urlParams = new URLSearchParams(window.location.search);
    const lang = urlParams.get('lang') || urlParams.get('lange');
    return lang || 'ko'; // 기본값은 한국어
  }

  // 페이지 로드 시 URL 파라미터에 따라 active 언어 설정
  function setActiveLanguageFromURL() {
    const currentLang = getCurrentLanguage();
    const langMap = {
      'ko': 'KO',
      'en': 'EN', 
      'jp': 'JP',
      'cn': 'CN'
    };
    
    const displayLang = langMap[currentLang] || 'KO';
    
    // 데스크톱과 모바일 언어 옵션에서 기존 active 클래스 제거
    langOptions.forEach(option => option.classList.remove('active'));
    mobLangOptions.forEach(option => option.classList.remove('active'));
    
    // 현재 언어와 일치하는 옵션에 active 클래스 추가
    langOptions.forEach(option => {
      if (option.querySelector('a').textContent === displayLang) {
        option.classList.add('active');
      }
    });
    
    mobLangOptions.forEach(option => {
      if (option.querySelector('a').textContent === displayLang) {
        option.classList.add('active');
      }
    });
    
    // 언어 버튼의 텍스트도 업데이트
    if (langSpan) {
      langSpan.textContent = displayLang;
    }
  }

  // 언어 업데이트 함수
  function updateLanguage(selectedLang) {
    // 스팬 텍스트 업데이트
    langSpan.textContent = selectedLang;
    
    // 데스크톱 언어 옵션에서 active 클래스 관리
    langOptions.forEach(option => {
      if (option.textContent === selectedLang) {
        option.classList.add('active');
      } else {
        option.classList.remove('active');
      }
    });
    
    // 모바일 언어 옵션에서 active 클래스 관리
    mobLangOptions.forEach(option => {
      if (option.textContent === selectedLang) {
        option.classList.add('active');
      } else {
        option.classList.remove('active');
      }
    });
    
    // 드롭다운 닫기
    langSelectWrap.classList.remove('active');
  }

  if (langBtn && langSelectWrap) {
    // 언어 버튼 클릭 시 드롭다운 토글
    langBtn.addEventListener('click', function(e) {
      e.stopPropagation();
      langSelectWrap.classList.toggle('active');
    });

    // 데스크톱 언어 옵션 클릭 시
    langOptions.forEach(option => {
      option.addEventListener('click', function(e) {
        e.stopPropagation();
        const selectedLang = this.textContent;
        updateLanguage(selectedLang);
      });
    });

    // 모바일 언어 옵션 클릭 시
    mobLangOptions.forEach(option => {
      option.addEventListener('click', function(e) {
        e.stopPropagation();
        const selectedLang = this.textContent;
        updateLanguage(selectedLang);
      });
    });

    // 다른 곳 클릭 시 드롭다운 닫기
    document.addEventListener('click', function() {
      langSelectWrap.classList.remove('active');
    });
  }

  // 페이지 로드 시 URL 파라미터에 따라 언어 활성화 설정
  setActiveLanguageFromURL();
</script>
</html>