air.html 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590
  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">인사말 & 본사정보</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" class="active">항공 운송 서비스</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 class="op--65" src="assets/img/sub--2.png" alt="">
  234. </div>
  235. <div class="visual--txt--wrap">
  236. <h2><strong>BUSINESS</strong><br>air <br class="mo">trans<br class="mo">portation</h2>
  237. </div>
  238. </section>
  239. <div class="sub--menu--wrap web">
  240. <i class="ico"></i>
  241. <span class="dot"></span>
  242. <p>business</p>
  243. <span class="dot"></span>
  244. <p>air transportation</p>
  245. </div>
  246. <div class="sub--menu--wrap mo">
  247. <select name="" id="">
  248. <option value="AIR TRANSPORTATION">AIR TRANSPORTATIONS</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 type--2 web">safe and speedy air transportation services</h3>
  255. <h3 class="sub--title type--2 mo">safe and speedy air</h3>
  256. <h3 class="sub--title type--2 mo">transportation services</h3>
  257. </div>
  258. <div class="sub--cont--wrap">
  259. <p class="sub--desc">The needs of international logistics such as shortening of lead times and reducing distribution costs as well
  260. as providing quality during transportation and ensuring safety are gradually becoming more sophisticated and diversified than ever before.<br>
  261. As a business partner, we are constantly striving to provide logistics services from the point of view of our customers ranging from deciding<br>
  262. on transportation routes quickly, safely and reliably to minimizing transportation costs while dealing with individual characteristics of each one of our customers.<br>
  263. We are strengthening our sales aimed at multinational corporations which have global presence and along with offering a wide range of high<br>
  264. value added transportation services which make use of our expertise in special transportation
  265. (semiconductor manufacturing equipment transportation, temperature-controlled transportation, etc.) as one of our operating resources, we provide excellent services to our
  266. customers based on our abundant experience in customs clearance procedure as well.</p>
  267. <div class="sub--point">
  268. <div class="point--box">
  269. <i class="ico"></i>
  270. <h5>point 01</h5>
  271. <p>Offering low prices due to practices of cost reduction</p>
  272. </div>
  273. <div class="point--box">
  274. <i class="ico"></i>
  275. <h5>point 02</h5>
  276. <p>Offering services with our extensive experience and know-hows</p>
  277. </div>
  278. <div class="point--box">
  279. <i class="ico"></i>
  280. <h5>point 03</h5>
  281. <p>Network connecting the entire world</p>
  282. </div>
  283. <div class="point--box">
  284. <i class="ico"></i>
  285. <h5>point 04</h5>
  286. <p>Transportation of high-value-added products Service/chemicals, dangerous goods, precision electronic equipment</p>
  287. </div>
  288. </div>
  289. </div>
  290. </div>
  291. </section>
  292. <div class="quick--menu--wrap">
  293. <div class="quick--contact">
  294. <div class="contact--bubble">
  295. CONTACT US
  296. </div>
  297. </div>
  298. <div class="quick--global">
  299. <div class="global--bubble">
  300. <div class="global--list">
  301. <a href="#">MJ holdings limited</a>
  302. <a href="#">MJ logistics (HK) limited</a>
  303. <a href="#">darong warehouse & transportation limited</a>
  304. <a href="#">shenzhen MJ logistics Co., limited</a>
  305. <a href="#">MJ logistics (foshan) office</a>
  306. <a href="#">MJ logistics (shanghai) limited xiamen branch</a>
  307. <a href="#">
  308. MJ logistics (shanghai) limited chongqing branch
  309. </a>
  310. <a href="#">
  311. MJ logistics (shanghai) limited guangzhou branch
  312. </a>
  313. <a href="#">MJ logistics (shanghai) limited</a>
  314. <a href="#">MJ logistics tianjin limited</a>
  315. <a href="#">
  316. MJ logistics qingdao limited
  317. </a>
  318. <a href="#">
  319. MJ logistics (japan) limited
  320. </a>
  321. <a href="#">
  322. MJ logistics (thailand) co.,LTD.
  323. </a>
  324. <a href="#">
  325. MJ logistics (vietnam) co.,LTD.
  326. </a>
  327. <a href="#">
  328. MJ logistics (hanoi) co.,LTD.
  329. </a>
  330. <a href="#">
  331. MJ logistics (manila) inc
  332. </a>
  333. <a href="#">
  334. MJ logistics (HK) limited taiwan branch
  335. </a>
  336. <a href="#">
  337. MJ logistics (SG) PTE. ltd
  338. </a>
  339. <a href="#">
  340. PT. MJL logistic jakarta
  341. </a>
  342. <a href="#">
  343. MJ logistics (ningbo) limited
  344. </a>
  345. <a href="#">
  346. MJ logistics (tianjin) limited dalian branch
  347. </a>
  348. <a href="#">
  349. MJ logistics malaysia SDN. BHD.
  350. </a>
  351. <a href="#">
  352. MJ logistics india PVT ltd
  353. </a>
  354. </div>
  355. </div>
  356. </div>
  357. <button class="quick--top"></button>
  358. </div>
  359. </main>
  360. <footer>
  361. <!-- 서브 페이지에서는 sub--type 클래스 추가 -->
  362. <div class="footer--wrap sub--type">
  363. copyrightⓒ 2025 MJ logistics limited all right reserved.
  364. </div>
  365. </footer>
  366. </body>
  367. <script>
  368. document.addEventListener("DOMContentLoaded", function () {
  369. const grtYearElements = document.querySelectorAll('.grt--year');
  370. const descLineElements = document.querySelectorAll('.desc--line');
  371. const headerWrap = document.querySelector('.header--wrap');
  372. const quickMenuWrap = document.querySelector('.quick--menu--wrap');
  373. const quickTopBtn = document.querySelector('.quick--top');
  374. let lastScrollTop = 0;
  375. function checkScrollPosition() {
  376. const viewportHeight = window.innerHeight;
  377. const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
  378. const triggerPoint = scrollTop + (viewportHeight * 0.7);
  379. const isScrollingDown = scrollTop > lastScrollTop;
  380. // Header scroll effect
  381. if (scrollTop > 0) {
  382. headerWrap.classList.add('scrolled');
  383. quickMenuWrap.classList.add('active');
  384. } else {
  385. headerWrap.classList.remove('scrolled');
  386. quickMenuWrap.classList.remove('active');
  387. }
  388. grtYearElements.forEach(element => {
  389. const elementTop = element.offsetTop;
  390. const elementBottom = elementTop + element.offsetHeight;
  391. if (triggerPoint >= elementTop && triggerPoint <= elementBottom) {
  392. element.classList.add('active');
  393. } else if (!isScrollingDown && triggerPoint < elementTop) {
  394. element.classList.remove('active');
  395. }
  396. });
  397. descLineElements.forEach(element => {
  398. const elementTop = element.offsetTop;
  399. const elementBottom = elementTop + element.offsetHeight;
  400. if (triggerPoint >= elementTop && triggerPoint <= elementBottom) {
  401. element.classList.add('active');
  402. } else if (!isScrollingDown && triggerPoint < elementTop) {
  403. element.classList.remove('active');
  404. }
  405. });
  406. lastScrollTop = scrollTop;
  407. }
  408. // Quick top button click event
  409. quickTopBtn.addEventListener('click', function() {
  410. window.scrollTo({
  411. top: 0,
  412. behavior: 'smooth'
  413. });
  414. });
  415. window.addEventListener('scroll', checkScrollPosition);
  416. checkScrollPosition();
  417. // 햄버거 메뉴 기능, 언어 선택 기능
  418. const headerMobBtn = document.querySelector('.header--mob--btn');
  419. const headerMobWrap = document.querySelector('.header--mob--wrap');
  420. const mobLLinks = document.querySelectorAll('.mob--l a');
  421. const subNavs = document.querySelectorAll('.mob--r .sub--nav');
  422. const headerLangBtn = document.querySelector('.header--mob--lang--btn');
  423. const headerLangWrap = document.querySelector('.header--mob--lang--wrap');
  424. // 햄버거 메뉴 토글
  425. if (headerMobBtn && headerMobWrap) {
  426. headerMobBtn.addEventListener('click', function() {
  427. headerMobBtn.classList.toggle('active');
  428. headerMobWrap.classList.toggle('active');
  429. headerLangBtn.classList.toggle('hide');
  430. });
  431. }
  432. if (headerLangBtn && headerLangWrap){
  433. headerLangBtn.addEventListener('click', function() {
  434. headerLangBtn.classList.toggle('active');
  435. headerLangWrap.classList.toggle('active');
  436. headerMobBtn.classList.toggle('hide');
  437. })
  438. }
  439. // 대메뉴 클릭 시 소메뉴 표시
  440. mobLLinks.forEach((link, index) => {
  441. link.addEventListener('click', function(e) {
  442. e.preventDefault();
  443. // 모든 대메뉴에서 active 클래스 제거
  444. mobLLinks.forEach(l => l.classList.remove('active'));
  445. // 클릭된 대메뉴에 active 클래스 추가
  446. this.classList.add('active');
  447. // 모든 소메뉴 숨기기
  448. subNavs.forEach(nav => nav.classList.remove('active'));
  449. // 해당 소메뉴 표시
  450. if (subNavs[index]) {
  451. subNavs[index].classList.add('active');
  452. }
  453. });
  454. });
  455. // 첫 번째 메뉴를 기본으로 활성화
  456. if (mobLLinks.length > 0 && subNavs.length > 0) {
  457. mobLLinks[1].classList.add('active');
  458. subNavs[1].classList.add('active');
  459. }
  460. // 언어 선택 기능
  461. const langBtn = document.querySelector('.header--lang--btn');
  462. const langSelectWrap = document.querySelector('.lang--select--wrap');
  463. const langSpan = document.querySelector('.header--lang--btn span');
  464. const langOptions = document.querySelectorAll('.lang--select--wrap li');
  465. const mobLangOptions = document.querySelectorAll('.header--mob--lang--wrap li');
  466. // URL 파라미터에서 현재 언어 가져오기
  467. function getCurrentLanguage() {
  468. const urlParams = new URLSearchParams(window.location.search);
  469. const lang = urlParams.get('lang') || urlParams.get('lange');
  470. return lang || 'ko'; // 기본값은 한국어
  471. }
  472. // 페이지 로드 시 URL 파라미터에 따라 active 언어 설정
  473. function setActiveLanguageFromURL() {
  474. const currentLang = getCurrentLanguage();
  475. const langMap = {
  476. 'ko': 'KO',
  477. 'en': 'EN',
  478. 'jp': 'JP',
  479. 'cn': 'CN'
  480. };
  481. const displayLang = langMap[currentLang] || 'KO';
  482. // 데스크톱과 모바일 언어 옵션에서 기존 active 클래스 제거
  483. langOptions.forEach(option => option.classList.remove('active'));
  484. mobLangOptions.forEach(option => option.classList.remove('active'));
  485. // 현재 언어와 일치하는 옵션에 active 클래스 추가
  486. langOptions.forEach(option => {
  487. if (option.querySelector('a').textContent === displayLang) {
  488. option.classList.add('active');
  489. }
  490. });
  491. mobLangOptions.forEach(option => {
  492. if (option.querySelector('a').textContent === displayLang) {
  493. option.classList.add('active');
  494. }
  495. });
  496. // 언어 버튼의 텍스트도 업데이트
  497. if (langSpan) {
  498. langSpan.textContent = displayLang;
  499. }
  500. }
  501. // 언어 업데이트 함수
  502. function updateLanguage(selectedLang) {
  503. // 스팬 텍스트 업데이트
  504. langSpan.textContent = selectedLang;
  505. // 데스크톱 언어 옵션에서 active 클래스 관리
  506. langOptions.forEach(option => {
  507. if (option.textContent === selectedLang) {
  508. option.classList.add('active');
  509. } else {
  510. option.classList.remove('active');
  511. }
  512. });
  513. // 모바일 언어 옵션에서 active 클래스 관리
  514. mobLangOptions.forEach(option => {
  515. if (option.textContent === selectedLang) {
  516. option.classList.add('active');
  517. } else {
  518. option.classList.remove('active');
  519. }
  520. });
  521. // 드롭다운 닫기
  522. langSelectWrap.classList.remove('active');
  523. }
  524. if (langBtn && langSelectWrap) {
  525. // 언어 버튼 클릭 시 드롭다운 토글
  526. langBtn.addEventListener('click', function(e) {
  527. e.stopPropagation();
  528. langSelectWrap.classList.toggle('active');
  529. });
  530. // 데스크톱 언어 옵션 클릭 시
  531. langOptions.forEach(option => {
  532. option.addEventListener('click', function(e) {
  533. e.stopPropagation();
  534. const selectedLang = this.textContent;
  535. updateLanguage(selectedLang);
  536. });
  537. });
  538. // 모바일 언어 옵션 클릭 시
  539. mobLangOptions.forEach(option => {
  540. option.addEventListener('click', function(e) {
  541. e.stopPropagation();
  542. const selectedLang = this.textContent;
  543. updateLanguage(selectedLang);
  544. });
  545. });
  546. // 다른 곳 클릭 시 드롭다운 닫기
  547. document.addEventListener('click', function() {
  548. langSelectWrap.classList.remove('active');
  549. });
  550. }
  551. // 페이지 로드 시 URL 파라미터에 따라 언어 활성화 설정
  552. setActiveLanguageFromURL();
  553. });
  554. </script>
  555. </html>