about.html 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852
  1. <!DOCTYPE html>
  2. <html lang="ko">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6. <link rel="stylesheet" href="assets/css/style.css">
  7. <link rel="stylesheet" href="assets/css/sub.css">
  8. <link rel="stylesheet" href="assets/css/media.css">
  9. <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css"/>
  10. <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
  11. <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
  12. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script>
  13. <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script>
  14. <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
  15. <title>MJ Logistics</title>
  16. </head>
  17. <body>
  18. <header>
  19. <div class="header--wrap">
  20. <div class="header--inner">
  21. <a href="index.html" class="header--logo">
  22. </a>
  23. <div class="header--nav">
  24. <ul>
  25. <li><a href="about.html">ABOUT US</a>
  26. <div class="sub--nav--wrap">
  27. <div class="sub--nav">
  28. <a href="about.html">인사말 & 본사정보</a>
  29. <a href="about.html">연혁</a>
  30. <a href="about.html">조직도</a>
  31. </div>
  32. </div>
  33. </li>
  34. <li><a href="air.html">business</a>
  35. <div class="sub--nav--wrap">
  36. <div class="sub--nav">
  37. <a href="air.html">항공 운송 서비스</a>
  38. <a href="#">해상 운송 서비스</a>
  39. <a href="#">철도 운송 서비스</a>
  40. <a href="#">물류 창고 서비스</a>
  41. <a href="#">통관 서비스</a>
  42. <a href="#">육상 운송 서비스</a>
  43. </div>
  44. </div>
  45. </li>
  46. <li><a href="#">network</a>
  47. <div class="sub--nav--wrap">
  48. <div class="sub--nav">
  49. <a href="#">MJ holdings limited</a>
  50. <a href="#">MJ logistics (HK) limited</a>
  51. <a href="#">darong warehouse & <br>transportation limited</a>
  52. <a href="#">shenzhen MJ logistics Co., <br>limited</a>
  53. <a href="#">MJ logistics (foshan) office</a>
  54. <a href="#">MJ logistics (shanghai) <br>limited xiamen branch</a>
  55. <a href="#">
  56. MJ logistics (shanghai) <br>limited chongqing branch
  57. </a>
  58. <a href="#">
  59. MJ logistics (shanghai) <br>limited guangzhou branch
  60. </a>
  61. <a href="#">MJ logistics (shanghai) limited</a>
  62. <a href="#">MJ logistics tianjin limited</a>
  63. </div>
  64. <div class="sub--nav">
  65. <a href="#">
  66. MJ logistics qingdao limited
  67. </a>
  68. <a href="#">
  69. MJ logistics (japan) limited
  70. </a>
  71. <a href="#">
  72. MJ logistics (thailand) co.,LTD.
  73. </a>
  74. <a href="#">
  75. MJ logistics (vientnam) co.,LTD.
  76. </a>
  77. <a href="#">
  78. MJ logistics (hanoi) co.,LTD.
  79. </a>
  80. <a href="#">
  81. MJ logistics (manila) inc
  82. </a>
  83. <a href="#">
  84. MJ logistics (HK) limited <br>taiwan branch
  85. </a>
  86. <a href="#">
  87. MJ logistics (SG) PTE. ltd
  88. </a>
  89. <a href="#">
  90. PT. MJL logistic jakarta
  91. </a>
  92. <a href="#">
  93. MJ logistics (ningbo) limited
  94. </a>
  95. </div>
  96. <div class="sub--nav">
  97. <a href="#">
  98. MJ logistics (tianjin) limited <br>dalian branch
  99. </a>
  100. <a href="#">
  101. MJ logistics malaysia SDN. <br>BHD.
  102. </a>
  103. <a href="#">
  104. MJ logistics india PVT ltd
  105. </a>
  106. </div>
  107. </div>
  108. </li>
  109. <li><a href="#">contact us</a>
  110. <div class="sub--nav--wrap">
  111. <div class="sub--nav">
  112. <a href="#">문의</a>
  113. <a href="#">연락처<br>(지점별 담당자 연락처)</a>
  114. </div>
  115. </div></li>
  116. </ul>
  117. </div>
  118. <div class="header--lang--btn">
  119. <i class="ico--global"></i>
  120. <span>KO</span>
  121. <i class="ico--arrow"></i>
  122. <ul class="lang--select--wrap">
  123. <li><a href="?lang=ko">KO</a></li>
  124. <li><a href="?lang=en">EN</a></li>
  125. <li><a href="?lang=jp">JP</a></li>
  126. <li><a href="?lang=cn">CN</a></li>
  127. </ul>
  128. </div>
  129. <div class="header--mob--lang--btn"></div>
  130. <div class="header--mob--lang--wrap">
  131. <ul>
  132. <li><a href="?lang=ko">KO</a></li>
  133. <li><a href="?lang=en">EN</a></li>
  134. <li><a href="?lang=jp">JP</a></li>
  135. <li><a href="?lang=cn">CN</a></li>
  136. </ul>
  137. </div>
  138. <div class="header--mob--btn"></div>
  139. <div class="header--mob--wrap">
  140. <div class="mob--l">
  141. <ul>
  142. <li><a href="about.html">ABOUT US</a></li>
  143. <li><a href="#">business</a></li>
  144. <li>
  145. <a href="#">network</a>
  146. </li>
  147. <li><a href="#">contact us</a></li>
  148. </ul>
  149. </div>
  150. <div class="mob--r">
  151. <div class="sub--nav--wrap">
  152. <div class="sub--nav">
  153. <a href="about.html" class="active">인사말 & 본사정보</a>
  154. <a href="about.html">연혁</a>
  155. <a href="about.html">조직도</a>
  156. </div>
  157. <div class="sub--nav">
  158. <a href="air.html">항공 운송 서비스</a>
  159. <a href="#">해상 운송 서비스</a>
  160. <a href="#">철도 운송 서비스</a>
  161. <a href="#">물류 창고 서비스</a>
  162. <a href="#">통관 서비스</a>
  163. <a href="#">육상 운송 서비스</a>
  164. </div>
  165. <div class="sub--nav">
  166. <a href="#">MJ holdings limited</a>
  167. <a href="#">MJ logistics (HK) limited</a>
  168. <a href="#">darong warehouse & <br>transportation limited</a>
  169. <a href="#">shenzhen MJ logistics Co., <br>limited</a>
  170. <a href="#">MJ logistics (foshan) office</a>
  171. <a href="#">MJ logistics (shanghai) <br>limited xiamen branch</a>
  172. <a href="#">
  173. MJ logistics (shanghai) <br>limited chongqing branch
  174. </a>
  175. <a href="#">
  176. MJ logistics (shanghai) <br>limited guangzhou branch
  177. </a>
  178. <a href="#">MJ logistics (shanghai) limited</a>
  179. <a href="#">MJ logistics tianjin limited</a>
  180. <a href="#">
  181. MJ logistics qingdao limited
  182. </a>
  183. <a href="#">
  184. MJ logistics (japan) limited
  185. </a>
  186. <a href="#">
  187. MJ logistics (thailand) co.,LTD.
  188. </a>
  189. <a href="#">
  190. MJ logistics (vientnam) co.,LTD.
  191. </a>
  192. <a href="#">
  193. MJ logistics (hanoi) co.,LTD.
  194. </a>
  195. <a href="#">
  196. MJ logistics (manila) inc
  197. </a>
  198. <a href="#">
  199. MJ logistics (HK) limited <br>taiwan branch
  200. </a>
  201. <a href="#">
  202. MJ logistics (SG) PTE. ltd
  203. </a>
  204. <a href="#">
  205. PT. MJL logistic jakarta
  206. </a>
  207. <a href="#">
  208. MJ logistics (ningbo) limited
  209. </a>
  210. <a href="#">
  211. MJ logistics (tianjin) limited <br>dalian branch
  212. </a>
  213. <a href="#">
  214. MJ logistics malaysia SDN. <br>BHD.
  215. </a>
  216. <a href="#">
  217. MJ logistics india PVT ltd
  218. </a>
  219. </div>
  220. <div class="sub--nav">
  221. <a href="#">문의</a>
  222. <a href="#">연락처<br>(지점별 담당자 연락처)</a>
  223. </div>
  224. </div>
  225. </div>
  226. </div>
  227. </div>
  228. </div>
  229. </header>
  230. <main>
  231. <section class="sub--visual--wrap">
  232. <div class="visual--wrap">
  233. <img src="assets/img/sub--1.png" alt="">
  234. </div>
  235. <div class="visual--txt--wrap">
  236. <h2><strong>ABOUT US</strong><br>COMPANY PROFILE</h2>
  237. </div>
  238. </section>
  239. <div class="sub--menu--wrap web">
  240. <i class="ico"></i>
  241. <span class="dot"></span>
  242. <p>ABOUT US</p>
  243. <span class="dot"></span>
  244. <p>COMPANY PROFILE</p>
  245. </div>
  246. <div class="sub--menu--wrap mo">
  247. <select name="" id="">
  248. <option value="AIR TRANSPORTATION">COMPANY PROFILE</option>
  249. </select>
  250. </div>
  251. <section class="grt--sec--wrap">
  252. <div class="sub--container">
  253. <div class="sub--title--wrap">
  254. <h3 class="sub--title">Greetings</h3>
  255. </div>
  256. <div class="sub--cont--wrap">
  257. <p class="sub--desc">We were established in 2013 with the goal of providing the highest level of logistics services and growing to be a global logistics company which places its
  258. top priority on customer satisfaction. Based on the organizational strength of our team of logistics experts with extensive experience we have established
  259. 12 branches in Asia, including China and Japan, and are providing specialized services as an agent for airline bookings and maritime cargo handling during
  260. import and export procedures. <br>These days, the Asian region is going through rapid changes as the center of global economy and logistics. With the spirit of
  261. challenge all employees of MJ LOGISTICS will strive to bring the company to the center of the logistics market which is rapidly changing.<br>
  262. In order to provide the best services, we will thoroughly communicate, share knowledge and information,
  263. value our customers and employees and grow as a trusted global company.</p>
  264. </div>
  265. <div class="grt--wrap">
  266. <div class="grt--part">
  267. <div class="grt--title">
  268. <div class="grt--year">
  269. <h4>2013 ~ 2014</h4>
  270. <div class="grt--txt">MJ LOGISTICS</div>
  271. <div class="title--line">
  272. <span class="line"></span>
  273. <span class="dot"></span>
  274. </div>
  275. </div>
  276. </div>
  277. <div class="grt--desc">
  278. <div class="desc">
  279. <div class="desc--line">
  280. <span class="line"></span>
  281. <span class="dot"></span>
  282. </div>
  283. <div class="desc--txt">
  284. <span class="desc--year">2013</span>
  285. <ul>
  286. <li>
  287. <span><i class="circle"></i>06</span>
  288. <p>Representative corporation established in Hong Kong<br>
  289. Establishment of the Shenzhen branch in China (as a first class cargo agency)<br>
  290. Establishment of the Guangzhou and Foshan branches in China (as first class cargo agencies)<br>
  291. S/C signed with Asiana Airlines<br>
  292. S/C signed with Hanjin Shipping</p>
  293. </li>
  294. <li><span><i class="circle"></i>11</span>
  295. <p>Acquisition of NVOCC #: MOC-NC 05999 Certificate</p></li>
  296. </ul>
  297. </div>
  298. </div>
  299. <div class="desc">
  300. <div class="desc--line">
  301. <span class="line"></span>
  302. </div>
  303. <div class="desc--txt">
  304. <span class="desc--year">2014</span>
  305. <ul>
  306. <li>
  307. <span><i class="circle"></i>04</span>
  308. <p>Establishment of the Vietnam branch office</p>
  309. </li>
  310. <li><span><i class="circle"></i>08</span>
  311. <p>Establishment of the Hanoi branch office in Vietnam</p>
  312. </li>
  313. <li>
  314. <span><i class="circle"></i>09</span>
  315. <p>Establishment of the Tokyo branch office in Japan</p>
  316. </li>
  317. </ul>
  318. </div>
  319. </div>
  320. </div>
  321. </div>
  322. <div class="grt--part">
  323. <div class="grt--title">
  324. <div class="grt--year">
  325. <h4>2015 ~ 2017</h4>
  326. <div class="grt--txt">Moving into the world</div>
  327. <div class="title--line">
  328. <span class="line"></span>
  329. <span class="dot"></span>
  330. </div>
  331. </div>
  332. </div>
  333. <div class="grt--desc">
  334. <div class="desc">
  335. <div class="desc--line">
  336. <span class="line"></span>
  337. <span class="dot"></span>
  338. </div>
  339. <div class="desc--txt">
  340. <span class="desc--year">2015</span>
  341. <ul>
  342. <li>
  343. <span><i class="circle"></i>01</span>
  344. <p>Establishment of the Shanghai branch office in China</p>
  345. </li>
  346. </ul>
  347. </div>
  348. </div>
  349. <div class="desc">
  350. <div class="desc--line">
  351. <span class="line"></span>
  352. </div>
  353. <div class="desc--txt">
  354. <span class="desc--year">2017</span>
  355. <ul>
  356. <li>
  357. <span><i class="circle"></i>07</span>
  358. <p>Extension and transfer of the Tokyo branch office in Japan</p>
  359. </li>
  360. <li><span><i class="circle"></i>09</span>
  361. <p>stablishment of the Xiamen branch office in China</p>
  362. </li>
  363. <li>
  364. <span><i class="circle"></i>12</span>
  365. <p>Establishment of the Chongqing branch office in China</p>
  366. </li>
  367. </ul>
  368. </div>
  369. </div>
  370. </div>
  371. </div>
  372. <div class="grt--part">
  373. <div class="grt--title">
  374. <div class="grt--year">
  375. <h4>2017 ~ NOW</h4>
  376. <div class="grt--txt">Preparation for a New Future</div>
  377. <div class="title--line">
  378. <span class="line"></span>
  379. <span class="dot"></span>
  380. </div>
  381. </div>
  382. </div>
  383. <div class="grt--desc">
  384. <div class="desc">
  385. <div class="desc--line">
  386. <span class="line"></span>
  387. <span class="dot"></span>
  388. </div>
  389. <div class="desc--txt">
  390. <span class="desc--year">2018</span>
  391. <ul>
  392. <li>
  393. <span><i class="circle"></i>12</span>
  394. <p>Establishment of the Bangkok branch office in Thailand</p>
  395. </li>
  396. </ul>
  397. </div>
  398. </div>
  399. <div class="desc">
  400. <div class="desc--line">
  401. <span class="line"></span>
  402. </div>
  403. <div class="desc--txt">
  404. <span class="desc--year">2021</span>
  405. <ul>
  406. <li>
  407. <span><i class="circle"></i>03</span>
  408. <p>Establishment of the Taiwan branch office in Taiwan</p>
  409. </li>
  410. </ul>
  411. </div>
  412. </div>
  413. </div>
  414. </div>
  415. </div>
  416. </div>
  417. </section>
  418. <section class="map--sec--wrap">
  419. <div class="sub--container">
  420. <div class="sub--title--wrap">
  421. <h3 class="sub--title type--2">head office information</h3>
  422. </div>
  423. <div class="sub--cont--wrap">
  424. <div class="map--wrap">
  425. <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3689.7038268937267!2d114.13195007692235!3d22.36480934055098!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x3403f89a2afe9e15%3A0x99087ae26d7013d!2sVanta%20Industrial%20Centre!5e0!3m2!1sko!2skr!4v1753936068070!5m2!1sko!2skr" width="100%" height="100%" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
  426. </div>
  427. <div class="map--desc">
  428. <h4>MJ LOGISTICS (HK) LIMITED</h4>
  429. <ul>
  430. <li><i class="ico"></i><span>UNIT 05, 13/F, VANTA INDUSTRIAL CENTRE, NO.21-33, TAI LIN PAI ROAD, KWAI CHUNG, N.T., HONGKONG</span></li>
  431. <li><i class=ico></i><span>tel : </span><strong>(852) 3590-3728</strong></li>
  432. <li><i class=ico></i><span>fax : </span><strong>(852) 3590-4113
  433. </strong></li>
  434. <li><i class=ico></i><span>CEO : </span><strong>jung myungjin</strong></li>
  435. <li><i class=ico></i><span>Date of establishment : </span><strong>June 1, 2013</strong></li>
  436. </ul>
  437. </div>
  438. </div>
  439. </div>
  440. </section>
  441. <section class="org--sec--wrap">
  442. <div class="sub--container">
  443. <div class="org--wrap">
  444. <h3 class="">Organization</h3>
  445. <div class="org--cont">
  446. <div class="org--top">
  447. <div class="ceo--circle">C.E.O</div>
  448. <span class="ceo--line right--type"></span>
  449. <div class="ceo--circle type--2">COO</div>
  450. <div class="ceo--circle type--3">CFO</div>
  451. <span class="ceo--line bottom--type"></span>
  452. </div>
  453. <div class="org--mid">
  454. <div class="org--group--box">
  455. <div class="org--box">
  456. Hong Kong regional headquarters
  457. </div>
  458. </div>
  459. <span class="org--line type--1"></span>
  460. <div class="org--group">
  461. <p>Operations Department</p>
  462. <span class="org--line"></span>
  463. <ul class="org--list">
  464. <li>Customer operations Team</li>
  465. <li>Agency operations team</li>
  466. <li>Airport department team</li>
  467. </ul>
  468. </div>
  469. <div class="org--group">
  470. <p>sales department</p>
  471. <span class="org--line"></span>
  472. <ul class="org--list w--240">
  473. <li>maritime transport sales team</li>
  474. <li>air transport sales team</li>
  475. </ul>
  476. </div>
  477. <div class="org--group w--100">
  478. <p class="mb--60">management suppont department</p>
  479. <span class="org--line none--circle"></span>
  480. <p>data processing department</p>
  481. <span class="org--line none--circle mt--120"></span>
  482. </div>
  483. <span class="org--line bottom--type"></span>
  484. </div>
  485. <div class="org--mid">
  486. <div class="org--group--box">
  487. <div class="org--box">
  488. Headquarters for China and region of Asia
  489. </div>
  490. </div>
  491. <span class="org--line type--1"></span>
  492. <div class="org--group">
  493. <p>C/S & OP department</p>
  494. <span class="org--line"></span>
  495. <ul class="org--list">
  496. <li>Air import management</li>
  497. <li>air export management</li>
  498. <li>C/S</li>
  499. </ul>
  500. </div>
  501. <div class="org--group">
  502. <p>MIS department</p>
  503. <span class="org--line"></span>
  504. <ul class="org--list w--240">
  505. <li>system development</li>
  506. <li>system management</li>
  507. </ul>
  508. </div>
  509. <div class="org--group">
  510. <p>china branches</p>
  511. <span class="org--line"></span>
  512. <ul class="org--list nation">
  513. <li>shenzhen</li>
  514. <li>guangzhou</li>
  515. <li>foshan</li>
  516. <li>shanghai</li>
  517. <li>tianjin</li>
  518. <li>qingdao</li>
  519. <li>xiamen</li>
  520. <li>chongqing</li>
  521. </ul>
  522. </div>
  523. <div class="org--group">
  524. <p>overseas branches</p>
  525. <span class="org--line none--circle"></span>
  526. <ul class="org--list nation">
  527. <li>hochminh</li>
  528. <li>hanoi</li>
  529. <li>tokyo</li>
  530. <li>bangkok</li>
  531. <li>taipei</li>
  532. </ul>
  533. </div>
  534. </div>
  535. </div>
  536. </div>
  537. </div>
  538. </section>
  539. <div class="quick--menu--wrap">
  540. <div class="quick--contact">
  541. <div class="contact--bubble">
  542. CONTACT US
  543. </div>
  544. </div>
  545. <div class="quick--global">
  546. <div class="global--bubble">
  547. <div class="global--title">
  548. <i class="ico"></i><h4>NETWORK</h4>
  549. </div>
  550. <div class="global--list">
  551. <a href="#">MJ holdings limited</a>
  552. <a href="#">MJ logistics (HK) limited</a>
  553. <a href="#">darong warehouse & transportation limited</a>
  554. <a href="#">shenzhen MJ logistics Co., limited</a>
  555. <a href="#">MJ logistics (foshan) office</a>
  556. <a href="#">MJ logistics (shanghai) limited xiamen branch</a>
  557. <a href="#">
  558. MJ logistics (shanghai) limited chongqing branch
  559. </a>
  560. <a href="#">
  561. MJ logistics (shanghai) limited guangzhou branch
  562. </a>
  563. <a href="#">MJ logistics (shanghai) limited</a>
  564. <a href="#">MJ logistics tianjin limited</a>
  565. <a href="#">
  566. MJ logistics qingdao limited
  567. </a>
  568. <a href="#">
  569. MJ logistics (japan) limited
  570. </a>
  571. <a href="#">
  572. MJ logistics (thailand) co.,LTD.
  573. </a>
  574. <a href="#">
  575. MJ logistics (vietnam) co.,LTD.
  576. </a>
  577. <a href="#">
  578. MJ logistics (hanoi) co.,LTD.
  579. </a>
  580. <a href="#">
  581. MJ logistics (manila) inc
  582. </a>
  583. <a href="#">
  584. MJ logistics (HK) limited taiwan branch
  585. </a>
  586. <a href="#">
  587. MJ logistics (SG) PTE. ltd
  588. </a>
  589. <a href="#">
  590. PT. MJL logistic jakarta
  591. </a>
  592. <a href="#">
  593. MJ logistics (ningbo) limited
  594. </a>
  595. <a href="#">
  596. MJ logistics (tianjin) limited dalian branch
  597. </a>
  598. <a href="#">
  599. MJ logistics malaysia SDN. BHD.
  600. </a>
  601. <a href="#">
  602. MJ logistics india PVT ltd
  603. </a>
  604. </div>
  605. </div>
  606. </div>
  607. <button class="quick--top"></button>
  608. </div>
  609. </main>
  610. <footer>
  611. <!-- 서브 페이지에서는 sub--type 클래스 추가 -->
  612. <div class="footer--wrap sub--type">
  613. copyrightⓒ 2025 MJ logistics limited all right reserved.
  614. </div>
  615. </footer>
  616. </body>
  617. <script>
  618. document.addEventListener("DOMContentLoaded", function () {
  619. const grtYearElements = document.querySelectorAll('.grt--year');
  620. const descLineElements = document.querySelectorAll('.desc--line');
  621. const descTxtLiElements = document.querySelectorAll('.desc--txt ul li');
  622. const headerWrap = document.querySelector('.header--wrap');
  623. const quickMenuWrap = document.querySelector('.quick--menu--wrap');
  624. const quickTopBtn = document.querySelector('.quick--top');
  625. let lastScrollTop = 0;
  626. function checkScrollPosition() {
  627. const viewportHeight = window.innerHeight;
  628. const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  629. const triggerPoint = scrollTop + (viewportHeight * 0.7);
  630. const isScrollingDown = scrollTop > lastScrollTop;
  631. // Header scroll effect
  632. if (scrollTop > 0) {
  633. headerWrap.classList.add('scrolled');
  634. quickMenuWrap.classList.add('active');
  635. } else {
  636. headerWrap.classList.remove('scrolled');
  637. quickMenuWrap.classList.remove('active');
  638. }
  639. grtYearElements.forEach(element => {
  640. const elementTop = element.offsetTop;
  641. const elementBottom = elementTop + element.offsetHeight;
  642. if (triggerPoint >= elementTop && triggerPoint <= elementBottom) {
  643. element.classList.add('active');
  644. } else if (!isScrollingDown && triggerPoint < elementTop) {
  645. element.classList.remove('active');
  646. }
  647. });
  648. descLineElements.forEach(element => {
  649. const elementTop = element.offsetTop;
  650. const elementBottom = elementTop + element.offsetHeight;
  651. if (triggerPoint >= elementTop && triggerPoint <= elementBottom) {
  652. element.classList.add('active');
  653. } else if (!isScrollingDown && triggerPoint < elementTop) {
  654. element.classList.remove('active');
  655. }
  656. });
  657. descTxtLiElements.forEach(element => {
  658. const elementTop = element.offsetTop;
  659. const elementBottom = elementTop + element.offsetHeight;
  660. if (triggerPoint >= elementTop && triggerPoint <= elementBottom) {
  661. element.classList.add('active');
  662. } else if (!isScrollingDown && triggerPoint < elementTop) {
  663. element.classList.remove('active');
  664. }
  665. });
  666. lastScrollTop = scrollTop;
  667. }
  668. // Quick top button click event
  669. quickTopBtn.addEventListener('click', function() {
  670. window.scrollTo({
  671. top: 0,
  672. behavior: 'smooth'
  673. });
  674. });
  675. window.addEventListener('scroll', checkScrollPosition);
  676. checkScrollPosition();
  677. // 햄버거 메뉴 기능, 언어 선택 기능
  678. const headerMobBtn = document.querySelector('.header--mob--btn');
  679. const headerMobWrap = document.querySelector('.header--mob--wrap');
  680. const mobLLinks = document.querySelectorAll('.mob--l a');
  681. const subNavs = document.querySelectorAll('.mob--r .sub--nav');
  682. const headerLangBtn = document.querySelector('.header--mob--lang--btn');
  683. const headerLangWrap = document.querySelector('.header--mob--lang--wrap');
  684. // 햄버거 메뉴 토글
  685. if (headerMobBtn && headerMobWrap) {
  686. headerMobBtn.addEventListener('click', function() {
  687. headerMobBtn.classList.toggle('active');
  688. headerMobWrap.classList.toggle('active');
  689. headerLangBtn.classList.toggle('hide');
  690. });
  691. }
  692. if (headerLangBtn && headerLangWrap){
  693. headerLangBtn.addEventListener('click', function() {
  694. headerLangBtn.classList.toggle('active');
  695. headerLangWrap.classList.toggle('active');
  696. headerMobBtn.classList.toggle('hide');
  697. })
  698. }
  699. // 대메뉴 클릭 시 소메뉴 표시
  700. mobLLinks.forEach((link, index) => {
  701. link.addEventListener('click', function(e) {
  702. e.preventDefault();
  703. // 모든 대메뉴에서 active 클래스 제거
  704. mobLLinks.forEach(l => l.classList.remove('active'));
  705. // 클릭된 대메뉴에 active 클래스 추가
  706. this.classList.add('active');
  707. // 모든 소메뉴 숨기기
  708. subNavs.forEach(nav => nav.classList.remove('active'));
  709. // 해당 소메뉴 표시
  710. if (subNavs[index]) {
  711. subNavs[index].classList.add('active');
  712. }
  713. });
  714. });
  715. // 첫 번째 메뉴를 기본으로 활성화
  716. if (mobLLinks.length > 0 && subNavs.length > 0) {
  717. mobLLinks[0].classList.add('active');
  718. subNavs[0].classList.add('active');
  719. }
  720. // 언어 선택 기능
  721. const langBtn = document.querySelector('.header--lang--btn');
  722. const langSelectWrap = document.querySelector('.lang--select--wrap');
  723. const langSpan = document.querySelector('.header--lang--btn span');
  724. const langOptions = document.querySelectorAll('.lang--select--wrap li');
  725. const mobLangOptions = document.querySelectorAll('.header--mob--lang--wrap li');
  726. // URL 파라미터에서 현재 언어 가져오기
  727. function getCurrentLanguage() {
  728. const urlParams = new URLSearchParams(window.location.search);
  729. const lang = urlParams.get('lang') || urlParams.get('lange');
  730. return lang || 'ko'; // 기본값은 한국어
  731. }
  732. // 페이지 로드 시 URL 파라미터에 따라 active 언어 설정
  733. function setActiveLanguageFromURL() {
  734. const currentLang = getCurrentLanguage();
  735. const langMap = {
  736. 'ko': 'KO',
  737. 'en': 'EN',
  738. 'jp': 'JP',
  739. 'cn': 'CN'
  740. };
  741. const displayLang = langMap[currentLang] || 'KO';
  742. // 데스크톱과 모바일 언어 옵션에서 기존 active 클래스 제거
  743. langOptions.forEach(option => option.classList.remove('active'));
  744. mobLangOptions.forEach(option => option.classList.remove('active'));
  745. // 현재 언어와 일치하는 옵션에 active 클래스 추가
  746. langOptions.forEach(option => {
  747. if (option.querySelector('a').textContent === displayLang) {
  748. option.classList.add('active');
  749. }
  750. });
  751. mobLangOptions.forEach(option => {
  752. if (option.querySelector('a').textContent === displayLang) {
  753. option.classList.add('active');
  754. }
  755. });
  756. // 언어 버튼의 텍스트도 업데이트
  757. if (langSpan) {
  758. langSpan.textContent = displayLang;
  759. }
  760. }
  761. // 언어 업데이트 함수
  762. function updateLanguage(selectedLang) {
  763. // 스팬 텍스트 업데이트
  764. langSpan.textContent = selectedLang;
  765. // 데스크톱 언어 옵션에서 active 클래스 관리
  766. langOptions.forEach(option => {
  767. if (option.textContent === selectedLang) {
  768. option.classList.add('active');
  769. } else {
  770. option.classList.remove('active');
  771. }
  772. });
  773. // 모바일 언어 옵션에서 active 클래스 관리
  774. mobLangOptions.forEach(option => {
  775. if (option.textContent === selectedLang) {
  776. option.classList.add('active');
  777. } else {
  778. option.classList.remove('active');
  779. }
  780. });
  781. // 드롭다운 닫기
  782. langSelectWrap.classList.remove('active');
  783. }
  784. if (langBtn && langSelectWrap) {
  785. // 언어 버튼 클릭 시 드롭다운 토글
  786. langBtn.addEventListener('click', function(e) {
  787. e.stopPropagation();
  788. langSelectWrap.classList.toggle('active');
  789. });
  790. // 데스크톱 언어 옵션 클릭 시
  791. langOptions.forEach(option => {
  792. option.addEventListener('click', function(e) {
  793. e.stopPropagation();
  794. const selectedLang = this.textContent;
  795. updateLanguage(selectedLang);
  796. });
  797. });
  798. // 모바일 언어 옵션 클릭 시
  799. mobLangOptions.forEach(option => {
  800. option.addEventListener('click', function(e) {
  801. e.stopPropagation();
  802. const selectedLang = this.textContent;
  803. updateLanguage(selectedLang);
  804. });
  805. });
  806. // 다른 곳 클릭 시 드롭다운 닫기
  807. document.addEventListener('click', function() {
  808. langSelectWrap.classList.remove('active');
  809. });
  810. }
  811. // 페이지 로드 시 URL 파라미터에 따라 언어 활성화 설정
  812. setActiveLanguageFromURL();
  813. });
  814. </script>
  815. </html>