Startseite Erkunden Hilfe
Registrieren Anmelden
mo0647
/
mjlogistics
0
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

작업 완료 ~ 퀵메뉴

DESKTOP-T61HUSC\user vor 4 Monaten
Commit
409e4cf919
78 geänderte Dateien mit 7892 neuen und 0 gelöschten Zeilen
Geteilte Ansicht Diff-Statistik anzeigen
  1. 3 0
      .vscode/settings.json
  2. 849 0
      about.html
  3. 590 0
      air.html
  4. 629 0
      assets/css/media.css
  5. 0 0
      assets/css/media.css.map
  6. 1024 0
      assets/css/style.css
  7. 0 0
      assets/css/style.css.map
  8. 765 0
      assets/css/sub.css
  9. 0 0
      assets/css/sub.css.map
  10. BIN
      assets/img/contact1.png
  11. BIN
      assets/img/contact10.png
  12. BIN
      assets/img/contact11.png
  13. BIN
      assets/img/contact12.png
  14. BIN
      assets/img/contact13.png
  15. BIN
      assets/img/contact14.png
  16. BIN
      assets/img/contact15.png
  17. BIN
      assets/img/contact16.png
  18. BIN
      assets/img/contact17.png
  19. BIN
      assets/img/contact18.png
  20. BIN
      assets/img/contact19.png
  21. BIN
      assets/img/contact2.png
  22. BIN
      assets/img/contact20.png
  23. BIN
      assets/img/contact21.png
  24. BIN
      assets/img/contact22.png
  25. BIN
      assets/img/contact23.png
  26. BIN
      assets/img/contact3.png
  27. BIN
      assets/img/contact4.png
  28. BIN
      assets/img/contact5.png
  29. BIN
      assets/img/contact6.png
  30. BIN
      assets/img/contact7.png
  31. BIN
      assets/img/contact8.png
  32. BIN
      assets/img/contact9.png
  33. 6 0
      assets/img/ico--air1.svg
  34. 13 0
      assets/img/ico--air2.svg
  35. 1 0
      assets/img/ico--air3.svg
  36. 15 0
      assets/img/ico--air4.svg
  37. 3 0
      assets/img/ico--arrow--swiper.svg
  38. 4 0
      assets/img/ico--arrow--white.svg
  39. 4 0
      assets/img/ico--arrow.svg
  40. 3 0
      assets/img/ico--bubble.svg
  41. 4 0
      assets/img/ico--close.svg
  42. 10 0
      assets/img/ico--contact.svg
  43. 3 0
      assets/img/ico--global--arrow.svg
  44. 7 0
      assets/img/ico--global--black.svg
  45. 7 0
      assets/img/ico--global.svg
  46. 6 0
      assets/img/ico--header--black.svg
  47. 6 0
      assets/img/ico--header.svg
  48. 4 0
      assets/img/ico--home.svg
  49. 11 0
      assets/img/ico--map1.svg
  50. 10 0
      assets/img/ico--map2.svg
  51. 12 0
      assets/img/ico--map3.svg
  52. 4 0
      assets/img/ico--map4.svg
  53. 19 0
      assets/img/ico--map5.svg
  54. 4 0
      assets/img/ico--quick1--white.svg
  55. 4 0
      assets/img/ico--quick1.svg
  56. 7 0
      assets/img/ico--quick2--white.svg
  57. 7 0
      assets/img/ico--quick2.svg
  58. 6 0
      assets/img/ico--quick3.svg
  59. 3 0
      assets/img/ico--select--black.svg
  60. 3 0
      assets/img/ico--select.svg
  61. BIN
      assets/img/img--org.png
  62. 10 0
      assets/img/logo--default.svg
  63. 17 0
      assets/img/logo--white.svg
  64. BIN
      assets/img/main--1.png
  65. BIN
      assets/img/main--2.png
  66. BIN
      assets/img/main--3.png
  67. BIN
      assets/img/main--4.png
  68. BIN
      assets/img/main--5.png
  69. BIN
      assets/img/main--6.png
  70. BIN
      assets/img/main--contact--mo.png
  71. BIN
      assets/img/main--contact.png
  72. 3 0
      assets/img/main--map.svg
  73. BIN
      assets/img/sub--1.png
  74. BIN
      assets/img/sub--2.png
  75. 849 0
      assets/scss/media.scss
  76. 1011 0
      assets/scss/style.scss
  77. 803 0
      assets/scss/sub.scss
  78. 1153 0
      index.html

+ 3 - 0
.vscode/settings.json
Datei anzeigen 

@@ -0,0 +1,3 @@
 
+{
 
+  "liveServer.settings.port": 5501
 
+}

+ 849 - 0
about.html
Datei anzeigen 

@@ -0,0 +1,849 @@
 
+<!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/sub.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">
 
+        <a href="index.html" class="header--logo">
 
+        </a>
 
+        <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" class="active">인사말 & 본사정보</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>
 
+  <main>
 
+    <section class="sub--visual--wrap">
 
+      <div class="visual--wrap">
 
+        <img src="assets/img/sub--1.png" alt="">
 
+      </div>
 
+      <div class="visual--txt--wrap">
 
+        <h2><strong>ABOUT US</strong><br>COMPANY PROFILE</h2>
 
+      </div>
 
+    </section>
 
+    <div class="sub--menu--wrap web">
 
+      <i class="ico"></i>
 
+      <span class="dot"></span>
 
+      <p>ABOUT US</p>
 
+      <span class="dot"></span>
 
+      <p>COMPANY PROFILE</p>
 
+    </div>
 
+    <div class="sub--menu--wrap mo">
 
+      <select name="" id="">
 
+        <option value="AIR TRANSPORTATION">COMPANY PROFILE</option>
 
+      </select>
 
+    </div>
 
+    <section class="grt--sec--wrap">
 
+      <div class="sub--container">
 
+        <div class="sub--title--wrap">
 
+          <h3 class="sub--title">Greetings</h3>
 
+        </div>
 
+        <div class="sub--cont--wrap">
 
+          <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
 
+            top priority on customer satisfaction. Based on the organizational strength of our team of logistics experts with extensive experience we have established
 
+            12 branches in Asia, including China and Japan, and are providing specialized services as an agent for airline bookings and maritime cargo handling during
 
+            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
 
+            challenge all employees of MJ LOGISTICS will strive to bring the company to the center of the logistics market which is rapidly changing.<br>
 
+            In order to provide the best services, we will thoroughly communicate, share knowledge and information,
 
+            value our customers and employees and grow as a trusted global company.</p>
 
+        </div>
 
+        <div class="grt--wrap">
 
+          <div class="grt--part">
 
+            <div class="grt--title">
 
+              <div class="grt--year">
 
+                <h4>2013 ~ 2014</h4>
 
+                <div class="grt--txt">MJ LOGISTICS</div>
 
+                <div class="title--line">
 
+                  <span class="line"></span>
 
+                  <span class="dot"></span>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="grt--desc">
 
+              <div class="desc">
 
+                <div class="desc--line">
 
+                  <span class="line"></span>
 
+                  <span class="dot"></span>
 
+                </div>
 
+                <div class="desc--txt">
 
+                  <span class="desc--year">2013</span>
 
+                  <ul>
 
+                    <li>
 
+                      <span><i class="circle"></i>06</span>
 
+                      <p>Representative corporation established in Hong Kong<br>
 
+                      Establishment of the Shenzhen branch in China (as a first class cargo agency)<br>
 
+                      Establishment of the Guangzhou and Foshan branches in China (as first class cargo agencies)<br>
 
+                      S/C signed with Asiana Airlines<br>
 
+                      S/C signed with Hanjin Shipping</p>
 
+                    </li>
 
+                    <li><span><i class="circle"></i>11</span>
 
+                    <p>Acquisition of NVOCC #: MOC-NC 05999 Certificate</p></li>
 
+                  </ul>
 
+                </div>
 
+              </div>
 
+              <div class="desc">
 
+                <div class="desc--line">
 
+                  <span class="line"></span>
 
+                </div>
 
+                <div class="desc--txt">
 
+                  <span class="desc--year">2014</span>
 
+                  <ul>
 
+                    <li>
 
+                      <span><i class="circle"></i>04</span>
 
+                      <p>Establishment of the Vietnam branch office</p>
 
+                    </li>
 
+                    <li><span><i class="circle"></i>08</span>
 
+                      <p>Establishment of the Hanoi branch office in Vietnam</p>
 
+                    </li>
 
+                    <li>
 
+                      <span><i class="circle"></i>09</span>
 
+                      <p>Establishment of the Tokyo branch office in Japan</p>
 
+                    </li>
 
+                  </ul>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="grt--part">
 
+            <div class="grt--title">
 
+              <div class="grt--year">
 
+                <h4>2015 ~ 2017</h4>
 
+                <div class="grt--txt">Moving into the world</div>
 
+                <div class="title--line">
 
+                  <span class="line"></span>
 
+                  <span class="dot"></span>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="grt--desc">
 
+              <div class="desc">
 
+                <div class="desc--line">
 
+                  <span class="line"></span>
 
+                  <span class="dot"></span>
 
+                </div>
 
+                <div class="desc--txt">
 
+                  <span class="desc--year">2015</span>
 
+                  <ul>
 
+                    <li>
 
+                      <span><i class="circle"></i>01</span>
 
+                      <p>Establishment of the Shanghai branch office in China</p>
 
+                    </li>
 
+                  </ul>
 
+                </div>
 
+              </div>
 
+              <div class="desc">
 
+                <div class="desc--line">
 
+                  <span class="line"></span>
 
+                </div>
 
+                <div class="desc--txt">
 
+                  <span class="desc--year">2017</span>
 
+                  <ul>
 
+                    <li>
 
+                      <span><i class="circle"></i>07</span>
 
+                      <p>Extension and transfer of the Tokyo branch office in Japan</p>
 
+                    </li>
 
+                    <li><span><i class="circle"></i>09</span>
 
+                      <p>stablishment of the Xiamen branch office in China</p>
 
+                    </li>
 
+                    <li>
 
+                      <span><i class="circle"></i>12</span>
 
+                      <p>Establishment of the Chongqing branch office in China</p>
 
+                    </li>
 
+                  </ul>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+          <div class="grt--part">
 
+            <div class="grt--title">
 
+              <div class="grt--year">
 
+                <h4>2017 ~ NOW</h4>
 
+                <div class="grt--txt">Preparation for a New Future</div>
 
+                <div class="title--line">
 
+                  <span class="line"></span>
 
+                  <span class="dot"></span>
 
+                </div>
 
+              </div>
 
+            </div>
 
+            <div class="grt--desc">
 
+              <div class="desc">
 
+                <div class="desc--line">
 
+                  <span class="line"></span>
 
+                  <span class="dot"></span>
 
+                </div>
 
+                <div class="desc--txt">
 
+                  <span class="desc--year">2018</span>
 
+                  <ul>
 
+                    <li>
 
+                      <span><i class="circle"></i>12</span>
 
+                      <p>Establishment of the Bangkok branch office in Thailand</p>
 
+                    </li>
 
+                  </ul>
 
+                </div>
 
+              </div>
 
+              <div class="desc">
 
+                <div class="desc--line">
 
+                  <span class="line"></span>
 
+                </div>
 
+                <div class="desc--txt">
 
+                  <span class="desc--year">2021</span>
 
+                  <ul>
 
+                    <li>
 
+                      <span><i class="circle"></i>03</span>
 
+                      <p>Establishment of the Taiwan branch office in Taiwan</p>
 
+                    </li>
 
+                  </ul>
 
+                </div>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </section>
 
+    <section class="map--sec--wrap">
 
+      <div class="sub--container">
 
+        <div class="sub--title--wrap">
 
+          <h3 class="sub--title type--2">head office information</h3>
 
+        </div>
 
+        <div class="sub--cont--wrap">
 
+          <div class="map--wrap">
 
+            <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>
 
+          </div>
 
+          <div class="map--desc">
 
+            <h4>MJ LOGISTICS (HK) LIMITED</h4>
 
+            <ul>
 
+              <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>
 
+              <li><i class=ico></i><span>tel : </span><strong>(852) 3590-3728</strong></li>
 
+              <li><i class=ico></i><span>fax : </span><strong>(852) 3590-4113
 
+              </strong></li>
 
+              <li><i class=ico></i><span>CEO : </span><strong>jung myungjin</strong></li>
 
+              <li><i class=ico></i><span>Date of establishment : </span><strong>June 1, 2013</strong></li>
 
+            </ul>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </section>
 
+    <section class="org--sec--wrap">
 
+      <div class="sub--container">
 
+        <div class="org--wrap">
 
+          <h3 class="">Organization</h3>
 
+          <div class="org--cont">
 
+            <div class="org--top">
 
+              <div class="ceo--circle">C.E.O</div>
 
+              <span class="ceo--line right--type"></span>
 
+              <div class="ceo--circle type--2">COO</div>
 
+              <div class="ceo--circle type--3">CFO</div>
 
+              <span class="ceo--line bottom--type"></span>
 
+            </div>
 
+            <div class="org--mid">
 
+              <div class="org--group--box">
 
+                <div class="org--box">
 
+                  Hong Kong regional headquarters
 
+                </div>
 
+              </div>
 
+              <span class="org--line type--1"></span>
 
+              <div class="org--group">
 
+                <p>Operations Department</p>
 
+                <span class="org--line"></span>
 
+                <ul class="org--list">
 
+                  <li>Customer operations Team</li>
 
+                  <li>Agency operations team</li>
 
+                  <li>Airport department team</li>
 
+                </ul>
 
+              </div>
 
+              <div class="org--group">
 
+                <p>sales department</p>
 
+                <span class="org--line"></span>
 
+                <ul class="org--list w--240">
 
+                  <li>maritime transport sales team</li>
 
+                  <li>air transport sales team</li>
 
+                </ul>
 
+              </div>
 
+              <div class="org--group w--100">
 
+                <p class="mb--60">management suppont department</p>
 
+                <span class="org--line none--circle"></span>
 
+                <p>data processing department</p>
 
+                <span class="org--line none--circle mt--120"></span>
 
+              </div>
 
+              <span class="org--line bottom--type"></span>
 
+            </div>
 
+            <div class="org--mid">
 
+              <div class="org--group--box">
 
+                <div class="org--box">
 
+                  Headquarters for China and region of Asia
 
+                </div>
 
+              </div>
 
+              <span class="org--line type--1"></span>
 
+              <div class="org--group">
 
+                <p>C/S & OP department</p>
 
+                <span class="org--line"></span>
 
+                <ul class="org--list">
 
+                  <li>Air import management</li>
 
+                  <li>air export management</li>
 
+                  <li>C/S</li>
 
+                </ul>
 
+              </div>
 
+              <div class="org--group">
 
+                <p>MIS department</p>
 
+                <span class="org--line"></span>
 
+                <ul class="org--list w--240">
 
+                  <li>system development</li>
 
+                  <li>system management</li>
 
+                </ul>
 
+              </div>
 
+              <div class="org--group">
 
+                <p>china branches</p>
 
+                <span class="org--line"></span>
 
+                <ul class="org--list nation">
 
+                  <li>shenzhen</li>
 
+                  <li>guangzhou</li>
 
+                  <li>foshan</li>
 
+                  <li>shanghai</li>
 
+                  <li>tianjin</li>
 
+                  <li>qingdao</li>
 
+                  <li>xiamen</li>
 
+                  <li>chongqing</li>
 
+                </ul>
 
+              </div>
 
+              <div class="org--group">
 
+                <p>overseas branches</p>
 
+                <span class="org--line none--circle"></span>
 
+                <ul class="org--list nation">
 
+                  <li>hochminh</li>
 
+                  <li>hanoi</li>
 
+                  <li>tokyo</li>
 
+                  <li>bangkok</li>
 
+                  <li>taipei</li>
 
+                </ul>
 
+              </div>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </section>
 
+    <div  class="quick--menu--wrap">
 
+      <div class="quick--contact">
 
+        <div class="contact--bubble">
 
+          CONTACT US
 
+        </div>
 
+      </div>
 
+      <div class="quick--global">
 
+        <div class="global--bubble">
 
+          <div class="global--list">
 
+            <a href="#">MJ holdings limited</a>
 
+            <a href="#">MJ logistics (HK) limited</a>
 
+            <a href="#">darong warehouse & transportation limited</a>
 
+            <a href="#">shenzhen MJ logistics Co., limited</a>
 
+            <a href="#">MJ logistics (foshan) office</a>
 
+            <a href="#">MJ logistics (shanghai) limited xiamen branch</a>
 
+            <a href="#">
 
+              MJ logistics (shanghai) limited chongqing branch
 
+            </a>
 
+            <a href="#">
 
+              MJ logistics (shanghai) 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 (vietnam) co.,LTD.
 
+            </a>
 
+            <a href="#">
 
+              MJ logistics (hanoi) co.,LTD.
 
+            </a>
 
+            <a href="#">
 
+              MJ logistics (manila) inc
 
+            </a>
 
+            <a href="#">
 
+              MJ logistics (HK) limited 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 dalian branch
 
+            </a>
 
+            <a href="#">
 
+              MJ logistics malaysia SDN. BHD.
 
+            </a>
 
+            <a href="#">
 
+              MJ logistics india PVT ltd
 
+            </a>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <button class="quick--top"></button>
 
+    </div>
 
+  </main>
 
+  <footer>
 
+    <!-- 서브 페이지에서는 sub--type 클래스 추가 -->
 
+    <div class="footer--wrap sub--type">
 
+      copyrightⓒ 2025 MJ logistics limited all right reserved.
 
+    </div>
 
+  </footer>
 
+</body>
 
+<script>
 
+  document.addEventListener("DOMContentLoaded", function () {
 
+    const grtYearElements = document.querySelectorAll('.grt--year');
 
+    const descLineElements = document.querySelectorAll('.desc--line');
 
+    const descTxtLiElements = document.querySelectorAll('.desc--txt ul li');
 
+    const headerWrap = document.querySelector('.header--wrap');
 
+    const quickMenuWrap = document.querySelector('.quick--menu--wrap');
 
+    const quickTopBtn = document.querySelector('.quick--top');
 
+    let lastScrollTop = 0;
 
+    
+    function checkScrollPosition() {
 
+      const viewportHeight = window.innerHeight;
 
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
 
+      const triggerPoint = scrollTop + (viewportHeight * 0.7);
 
+      const isScrollingDown = scrollTop > lastScrollTop;
 
+      
+      // Header scroll effect
 
+      if (scrollTop > 0) {
 
+        headerWrap.classList.add('scrolled');
 
+        quickMenuWrap.classList.add('active');
 
+      } else {
 
+        headerWrap.classList.remove('scrolled');
 
+        quickMenuWrap.classList.remove('active');
 
+      }
 
+      
+      grtYearElements.forEach(element => {
 
+        const elementTop = element.offsetTop;
 
+        const elementBottom = elementTop + element.offsetHeight;
 
+        
+        if (triggerPoint >= elementTop && triggerPoint <= elementBottom) {
 
+          element.classList.add('active');
 
+        } else if (!isScrollingDown && triggerPoint < elementTop) {
 
+          element.classList.remove('active');
 
+        }
 
+      });
 
+      
+      descLineElements.forEach(element => {
 
+        const elementTop = element.offsetTop;
 
+        const elementBottom = elementTop + element.offsetHeight;
 
+        
+        if (triggerPoint >= elementTop && triggerPoint <= elementBottom) {
 
+          element.classList.add('active');
 
+        } else if (!isScrollingDown && triggerPoint < elementTop) {
 
+          element.classList.remove('active');
 
+        }
 
+      });
 
+      
+      descTxtLiElements.forEach(element => {
 
+        const elementTop = element.offsetTop;
 
+        const elementBottom = elementTop + element.offsetHeight;
 
+        
+        if (triggerPoint >= elementTop && triggerPoint <= elementBottom) {
 
+          element.classList.add('active');
 
+        } else if (!isScrollingDown && triggerPoint < elementTop) {
 
+          element.classList.remove('active');
 
+        }
 
+      });
 
+      
+      lastScrollTop = scrollTop;
 
+    }
 
+    
+    // Quick top button click event
 
+    quickTopBtn.addEventListener('click', function() {
 
+      window.scrollTo({
 
+        top: 0,
 
+        behavior: 'smooth'
 
+      });
 
+    });
 
+    
+    window.addEventListener('scroll', checkScrollPosition);
 
+    checkScrollPosition();
 
+
 
+    // 햄버거 메뉴 기능, 언어 선택 기능
 
+    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>

+ 590 - 0
air.html
Datei anzeigen 

@@ -0,0 +1,590 @@
 
+<!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/sub.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">
 
+        <a href="index.html" class="header--logo">
 
+        </a>
 
+        <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" class="active">항공 운송 서비스</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>
 
+  <main>
 
+    <section class="sub--visual--wrap">
 
+      <div class="visual--wrap">
 
+        <img class="op--65" src="assets/img/sub--2.png" alt="">
 
+      </div>
 
+      <div class="visual--txt--wrap">
 
+        <h2><strong>BUSINESS</strong><br>air <br class="mo">trans<br class="mo">portation</h2>
 
+      </div>
 
+    </section>
 
+    <div class="sub--menu--wrap web">
 
+      <i class="ico"></i>
 
+      <span class="dot"></span>
 
+      <p>business</p>
 
+      <span class="dot"></span>
 
+      <p>air transportation</p>
 
+    </div>
 
+    <div class="sub--menu--wrap mo">
 
+      <select name="" id="">
 
+        <option value="AIR TRANSPORTATION">AIR TRANSPORTATIONS</option>
 
+      </select>
 
+    </div>
 
+    <section class="grt--sec--wrap">
 
+      <div class="sub--container">
 
+        <div class="sub--title--wrap">
 
+          <h3 class="sub--title type--2 web">safe and speedy air transportation services</h3>
 
+          <h3 class="sub--title type--2 mo">safe and speedy air</h3>
 
+          <h3 class="sub--title type--2 mo">transportation services</h3>
 
+        </div>
 
+        <div class="sub--cont--wrap">
 
+          <p class="sub--desc">The needs of international logistics such as shortening of lead times and reducing distribution costs as well 
+            as providing quality during transportation and ensuring safety are gradually becoming more sophisticated and diversified than ever before.<br>
 
+            As a business partner, we are constantly striving to provide logistics services from the point of view of our customers ranging from deciding<br>
 
+            on transportation routes quickly, safely and reliably to minimizing transportation costs while dealing with individual characteristics of each one of our customers.<br>
 
+            We are strengthening our sales aimed at multinational corporations which have global presence and along with offering a wide range of high<br>
 
+            value added transportation services which make use of our expertise in special transportation 
+            (semiconductor manufacturing equipment transportation, temperature-controlled transportation, etc.) as one of our operating resources, we provide excellent services to our
 
+            customers based on our abundant experience in customs clearance procedure as well.</p>
 
+          <div class="sub--point">
 
+            <div class="point--box">
 
+              <i class="ico"></i>
 
+              <h5>point 01</h5>
 
+              <p>Offering low prices due to practices of cost reduction</p>
 
+            </div>
 
+            <div class="point--box">
 
+              <i class="ico"></i>
 
+              <h5>point 02</h5>
 
+              <p>Offering services with our extensive experience and know-hows</p>
 
+            </div>
 
+            <div class="point--box">
 
+              <i class="ico"></i>
 
+              <h5>point 03</h5>
 
+              <p>Network connecting the entire world</p>
 
+            </div>
 
+            <div class="point--box">
 
+              <i class="ico"></i>
 
+              <h5>point 04</h5>
 
+              <p>Transportation of high-value-added products Service/chemicals, dangerous goods, precision electronic equipment</p>
 
+            </div>
 
+          </div>
 
+        </div>
 
+      </div>
 
+    </section>
 
+        <div class="quick--menu--wrap">
 
+      <div class="quick--contact">
 
+        <div class="contact--bubble">
 
+          CONTACT US
 
+        </div>
 
+      </div>
 
+      <div class="quick--global">
 
+        <div class="global--bubble">
 
+          <div class="global--list">
 
+            <a href="#">MJ holdings limited</a>
 
+            <a href="#">MJ logistics (HK) limited</a>
 
+            <a href="#">darong warehouse & transportation limited</a>
 
+            <a href="#">shenzhen MJ logistics Co., limited</a>
 
+            <a href="#">MJ logistics (foshan) office</a>
 
+            <a href="#">MJ logistics (shanghai) limited xiamen branch</a>
 
+            <a href="#">
 
+              MJ logistics (shanghai) limited chongqing branch
 
+            </a>
 
+            <a href="#">
 
+              MJ logistics (shanghai) 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 (vietnam) co.,LTD.
 
+            </a>
 
+            <a href="#">
 
+              MJ logistics (hanoi) co.,LTD.
 
+            </a>
 
+            <a href="#">
 
+              MJ logistics (manila) inc
 
+            </a>
 
+            <a href="#">
 
+              MJ logistics (HK) limited 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 dalian branch
 
+            </a>
 
+            <a href="#">
 
+              MJ logistics malaysia SDN. BHD.
 
+            </a>
 
+            <a href="#">
 
+              MJ logistics india PVT ltd
 
+            </a>
 
+          </div>
 
+        </div>
 
+      </div>
 
+      <button class="quick--top"></button>
 
+    </div>
 
+  </main>
 
+  <footer>
 
+    <!-- 서브 페이지에서는 sub--type 클래스 추가 -->
 
+    <div class="footer--wrap sub--type">
 
+      copyrightⓒ 2025 MJ logistics limited all right reserved.
 
+    </div>
 
+  </footer>
 
+</body>
 
+<script>
 
+  document.addEventListener("DOMContentLoaded", function () {
 
+    const grtYearElements = document.querySelectorAll('.grt--year');
 
+    const descLineElements = document.querySelectorAll('.desc--line');
 
+    const headerWrap = document.querySelector('.header--wrap');
 
+    const quickMenuWrap = document.querySelector('.quick--menu--wrap');
 
+    const quickTopBtn = document.querySelector('.quick--top');
 
+    let lastScrollTop = 0;
 
+    
+    function checkScrollPosition() {
 
+      const viewportHeight = window.innerHeight;
 
+      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
 
+      const triggerPoint = scrollTop + (viewportHeight * 0.7);
 
+      const isScrollingDown = scrollTop > lastScrollTop;
 
+      
+      // Header scroll effect
 
+      if (scrollTop > 0) {
 
+        headerWrap.classList.add('scrolled');
 
+        quickMenuWrap.classList.add('active');
 
+      } else {
 
+        headerWrap.classList.remove('scrolled');
 
+        quickMenuWrap.classList.remove('active');
 
+      }
 
+      
+      grtYearElements.forEach(element => {
 
+        const elementTop = element.offsetTop;
 
+        const elementBottom = elementTop + element.offsetHeight;
 
+        
+        if (triggerPoint >= elementTop && triggerPoint <= elementBottom) {
 
+          element.classList.add('active');
 
+        } else if (!isScrollingDown && triggerPoint < elementTop) {
 
+          element.classList.remove('active');
 
+        }
 
+      });
 
+      
+      descLineElements.forEach(element => {
 
+        const elementTop = element.offsetTop;
 
+        const elementBottom = elementTop + element.offsetHeight;
 
+        
+        if (triggerPoint >= elementTop && triggerPoint <= elementBottom) {
 
+          element.classList.add('active');
 
+        } else if (!isScrollingDown && triggerPoint < elementTop) {
 
+          element.classList.remove('active');
 
+        }
 
+      });
 
+      
+      lastScrollTop = scrollTop;
 
+    }
 
+    
+    // Quick top button click event
 
+    quickTopBtn.addEventListener('click', function() {
 
+      window.scrollTo({
 
+        top: 0,
 
+        behavior: 'smooth'
 
+      });
 
+    });
 
+    
+    window.addEventListener('scroll', checkScrollPosition);
 
+    checkScrollPosition();
 
+
 
+    // 햄버거 메뉴 기능, 언어 선택 기능
 
+    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[1].classList.add('active');
 
+      subNavs[1].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>

+ 629 - 0
assets/css/media.css
Datei anzeigen 

@@ -0,0 +1,629 @@
 
+@media (max-width: 1800px) {
 
+  .container .image--section .section--container .contact--wrap .contact--form {
 
+    padding: 40px 50px;
 
+  }
 
+  .container .image--section .section--container .contact--wrap .contact--form .contact--tit h3 {
 
+    font-size: 28px;
 
+    margin-bottom: 10px;
 
+  }
 
+  .container .image--section .section--container .contact--wrap .contact--form .contact--cont {
 
+    gap: 20px;
 
+    height: calc(100% - 100px);
 
+  }
 
+  .container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--wrap {
 
+    gap: 10px;
 
+  }
 
+  .container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--wrap select {
 
+    padding: 15px;
 
+  }
 
+  .container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--wrap input {
 
+    padding: 15px;
 
+  }
 
+  .container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--wrap textarea {
 
+    padding: 15px;
 
+  }
 
+}
 
+@media (max-width: 1600px) {
 
+  .header--wrap .header--inner {
 
+    padding: 0 20px;
 
+  }
 
+  .header--wrap .header--inner .header--nav > ul > li > a {
 
+    padding: 30px 50px;
 
+  }
 
+  .container .image--section .main--swiper .swiper-slide .txt--wrap {
 
+    padding: 0 20px;
 
+  }
 
+  .container .image--section .main--swiper .main--swiper--tab .tab--wrap {
 
+    padding: 50px 20px 30px;
 
+  }
 
+  .container .image--section .main--swiper .main--swiper--tab .tab--wrap .tab--inner dt {
 
+    font-size: 16px;
 
+  }
 
+  .container .image--section .section--container .text--wrap {
 
+    padding: 0 20px;
 
+  }
 
+  .container .image--section .section--container .contact--wrap {
 
+    padding: 0 20px;
 
+  }
 
+  .container .image--section .section--container .contact--wrap .contact--form {
 
+    padding: 40px;
 
+  }
 
+  .container .image--section .section--container .contact--wrap .location--group {
 
+    width: 55%;
 
+  }
 
+  .container .image--section .section--container .contact--wrap .contact--form {
 
+    width: calc(45% - 30px);
 
+  }
 
+  main .sub--visual--wrap .visual--txt--wrap {
 
+    bottom: -7px;
 
+    padding: 0 20px;
 
+  }
 
+  main .sub--visual--wrap .visual--txt--wrap h2 {
 
+    font-size: 72px;
 
+  }
 
+  main .sub--menu--wrap {
 
+    padding: 80px 20px;
 
+  }
 
+  main .sub--menu--wrap p {
 
+    font-size: 14px;
 
+  }
 
+  main .sub--container {
 
+    padding: 0 20px;
 
+  }
 
+  main .sub--container .sub--title--wrap .sub--title.type--2 {
 
+    font-size: 36px;
 
+  }
 
+  main .sub--container .sub--cont--wrap {
 
+    margin-bottom: 80px;
 
+  }
 
+  main .sub--container .sub--cont--wrap .sub--point {
 
+    margin-top: 80px;
 
+  }
 
+  main .sub--container .sub--cont--wrap .sub--desc br {
 
+    display: none;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--mid .org--group--box {
 
+    width: 100%;
 
+    margin-bottom: 20px;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--mid .org--group:nth-of-type(2) {
 
+    margin-left: 20px;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--mid .org--group .org--line.none--circle::before {
 
+    display: block;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--mid .org--group .org--line.none--circle::after {
 
+    display: block;
 
+    left: -12px;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--mid .org--line::before {
 
+    left: 0;
 
+    right: auto;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--mid .org--line::after {
 
+    left: -12px;
 
+    right: auto;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--mid .org--line.type--1 {
 
+    display: none;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--mid .org--line.bottom--type {
 
+    display: none;
 
+  }
 
+  main .quick--menu--wrap {
 
+    right: 20px;
 
+  }
 
+}
 
+@media (max-width: 1264px) {
 
+  .container .image--section .section--container .map--wrap {
 
+    justify-content: center;
 
+  }
 
+  .container .image--section .section--container .map--wrap .map--img img {
 
+    width: auto;
 
+  }
 
+}
 
+@media (max-width: 1240px) {
 
+  .header--wrap .header--inner {
 
+    height: 80px;
 
+  }
 
+  .header--wrap .header--inner .header--nav {
 
+    display: none;
 
+  }
 
+  .header--wrap .header--inner .header--mob--btn {
 
+    display: block;
 
+  }
 
+  .header--wrap .header--inner .header--lang--btn {
 
+    display: none;
 
+  }
 
+  .header--wrap .header--inner .header--mob--lang--btn {
 
+    display: block;
 
+  }
 
+  .footer--wrap {
 
+    position: static;
 
+    padding: 40px 20px;
 
+    font-size: 13px;
 
+  }
 
+  .container .image--section {
 
+    height: auto;
 
+    position: static;
 
+  }
 
+  .container .image--section.global--section .section--container {
 
+    display: flex;
 
+    flex-direction: column-reverse;
 
+  }
 
+  .container .image--section.contact--section {
 
+    background-image: url(../img/main--contact--mo.png);
 
+    background-position: bottom;
 
+    background-size: 100%;
 
+    background-repeat: no-repeat;
 
+    background-color: #15161a;
 
+  }
 
+  .container .image--section .main--swiper .swiper-slide .txt--wrap > h2 {
 
+    font-size: 72px;
 
+  }
 
+  .container .image--section .main--swiper .main--swiper--tab {
 
+    display: none;
 
+  }
 
+  .container .image--section .main--swiper .swiper--btn--wrap {
 
+    display: block;
 
+  }
 
+  .container .image--section .main--swiper .swiper--btn--wrap .swiper-button-next,
 
+  .container .image--section .main--swiper .swiper--btn--wrap .swiper-button-prev {
 
+    display: block;
 
+  }
 
+  .container .image--section .main--swiper .swiper--pag--wrap {
 
+    display: block;
 
+  }
 
+  .container .image--section .section--container .map--wrap {
 
+    position: static;
 
+    padding-bottom: 80px;
 
+  }
 
+  .container .image--section .section--container .map--wrap .map--img {
 
+    width: 100%;
 
+    display: flex;
 
+    justify-content: center;
 
+  }
 
+  .container .image--section .section--container .map--wrap .map--dot--box {
 
+    display: flex;
 
+    align-items: center;
 
+  }
 
+  .container .image--section .section--container .map--wrap .map--dot--box .map--dots {
 
+    padding: 20px;
 
+    height: auto;
 
+    display: flex;
 
+    justify-content: center;
 
+    align-items: center;
 
+    flex-wrap: wrap;
 
+    gap: 25px;
 
+  }
 
+  .container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot {
 
+    position: static;
 
+  }
 
+  .container .image--section .section--container .text--wrap {
 
+    padding-top: 100px;
 
+    padding-bottom: 70px;
 
+    position: static;
 
+  }
 
+  .container .image--section .section--container .text--wrap > h3 {
 
+    color: #fff;
 
+    font-size: 40px;
 
+    margin-bottom: 25px;
 
+  }
 
+  .container .image--section .section--container .text--wrap > h4 {
 
+    margin-bottom: 30px;
 
+  }
 
+  .container .image--section .section--container .text--wrap > p {
 
+    margin-bottom: 50px;
 
+  }
 
+  .container .image--section .section--container .contact--wrap {
 
+    padding: 100px 20px 80px;
 
+    flex-direction: column;
 
+    align-items: start;
 
+    color: #fff;
 
+  }
 
+  .container .image--section .section--container .contact--wrap .location--group {
 
+    display: none;
 
+  }
 
+  .container .image--section .section--container .contact--wrap .contact--tit--mo {
 
+    word-break: keep-all;
 
+    margin-bottom: 50px;
 
+    display: block;
 
+  }
 
+  .container .image--section .section--container .contact--wrap .contact--tit--mo > h3 {
 
+    font-size: 40px;
 
+    margin-bottom: 25px;
 
+    font-weight: 800;
 
+    text-transform: uppercase;
 
+    letter-spacing: -0.8px;
 
+  }
 
+  .container .image--section .section--container .contact--wrap .contact--tit--mo p {
 
+    font-weight: 400;
 
+    font-size: 17px;
 
+    letter-spacing: -0.34px;
 
+  }
 
+  .container .image--section .section--container .contact--wrap .contact--form {
 
+    width: 100%;
 
+    padding: 35px 25px;
 
+    margin-bottom: 30px;
 
+    height: auto;
 
+  }
 
+  .container .image--section .section--container .contact--wrap .contact--form .contact--tit {
 
+    display: none;
 
+  }
 
+  .container .image--section .section--container .contact--wrap .contact--form .contact--cont {
 
+    height: auto;
 
+    gap: 35px;
 
+  }
 
+  .container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--wrap {
 
+    gap: 18px;
 
+  }
 
+  .container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--wrap select {
 
+    padding: 20px;
 
+  }
 
+  .container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--wrap input {
 
+    padding: 20px;
 
+  }
 
+  .container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--wrap textarea {
 
+    padding: 20px;
 
+  }
 
+  .container .image--section .section--container .contact--wrap .contact--btn--mo {
 
+    display: block;
 
+    width: 100%;
 
+  }
 
+  .container .image--section .section--container .contact--wrap .contact--btn--mo button {
 
+    cursor: pointer;
 
+    font-size: 18px;
 
+    color: #fff;
 
+    font-weight: 500;
 
+    justify-content: center;
 
+    align-items: center;
 
+    display: flex;
 
+    gap: 15px;
 
+    border: none;
 
+    border-radius: 15px;
 
+    background-color: #EC3237;
 
+    width: 100%;
 
+    padding: 30px;
 
+  }
 
+  .container .image--section .section--container .contact--wrap .contact--btn--mo button .ico {
 
+    width: 16px;
 
+    height: 16px;
 
+    background-repeat: no-repeat;
 
+    display: block;
 
+    background-image: url(../img/ico--contact.svg);
 
+    background-position: center;
 
+  }
 
+  main .sub--visual--wrap .visual--wrap {
 
+    height: 500px;
 
+  }
 
+  main .sub--visual--wrap .visual--wrap img {
 
+    height: 100%;
 
+    -o-object-fit: cover;
 
+       object-fit: cover;
 
+  }
 
+  main .sub--visual--wrap .visual--txt--wrap {
 
+    bottom: -9px;
 
+  }
 
+  main .sub--visual--wrap .visual--txt--wrap h2 {
 
+    font-size: 60px;
 
+  }
 
+  main .sub--container .sub--cont--wrap .sub--desc {
 
+    font-size: 15px;
 
+  }
 
+  main .sub--container .sub--cont--wrap .sub--point .point--box {
 
+    width: calc((100% - 60px) / 4);
 
+    padding: 30px;
 
+  }
 
+  main .sub--container .sub--cont--wrap .sub--point .point--box .ico {
 
+    margin-bottom: 20px;
 
+  }
 
+  main .sub--container .sub--cont--wrap .sub--point .point--box h5 {
 
+    font-size: 18px;
 
+    margin-bottom: 15px;
 
+  }
 
+  main .sub--container .sub--cont--wrap .sub--point .point--box p {
 
+    font-size: 14px;
 
+  }
 
+  main .sub--container .sub--cont--wrap .map--wrap {
 
+    height: 400px;
 
+  }
 
+  main .sub--container .sub--cont--wrap .map--desc {
 
+    margin-top: 40px;
 
+  }
 
+  main .sub--container .sub--cont--wrap .map--desc h4 {
 
+    font-size: 24px;
 
+    margin-bottom: 30px;
 
+  }
 
+  main .sub--container .sub--cont--wrap .map--desc ul {
 
+    gap: 20px;
 
+  }
 
+  main .sub--container .sub--cont--wrap .map--desc ul li {
 
+    font-size: 15px;
 
+  }
 
+  main .sub--container .grt--wrap {
 
+    margin-bottom: 80px;
 
+  }
 
+  main .sub--container .grt--wrap .grt--part {
 
+    align-items: flex-start;
 
+  }
 
+  main .sub--container .grt--wrap .grt--part .grt--title .grt--year {
 
+    width: 200px;
 
+  }
 
+  main .sub--container .grt--wrap .grt--part .grt--title .grt--year .grt--txt {
 
+    left: calc(100% + 20px);
 
+    right: auto;
 
+  }
 
+  main .sub--container .grt--wrap .grt--part .grt--title h4 {
 
+    font-size: 20px;
 
+    text-align: center;
 
+  }
 
+  main .sub--container .grt--wrap .grt--part .grt--desc {
 
+    padding-left: 97px;
 
+    width: 100%;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--mid .org--group {
 
+    padding-bottom: 50px;
 
+    width: calc(50% - 10px);
 
+    padding-right: 0;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--mid .org--group:nth-of-type(4) {
 
+    margin-left: 20px;
 
+  }
 
+  main .quick--menu--wrap {
 
+    width: 60px;
 
+    gap: 10px;
 
+  }
 
+  main .quick--menu--wrap > div {
 
+    width: 60px;
 
+    height: 60px;
 
+    background-size: 26px 26px;
 
+    background-color: rgba(255, 255, 255, 0.7);
 
+  }
 
+  main .quick--menu--wrap > button {
 
+    margin-top: 10px;
 
+    background-size: 20px 20px;
 
+    width: 60px;
 
+    height: 60px;
 
+  }
 
+}
 
+@media (max-width: 1000px) {
 
+  main .sub--container .sub--title--wrap .sub--title {
 
+    font-size: 40px;
 
+  }
 
+  main .sub--container .sub--title--wrap .sub--title.type--2 {
 
+    font-size: 30px;
 
+  }
 
+  main .sub--container .sub--cont--wrap .sub--point {
 
+    margin-top: 50px;
 
+    row-gap: 20px;
 
+  }
 
+  main .sub--container .sub--cont--wrap .sub--point .point--box {
 
+    padding: 20px;
 
+    width: calc(50% - 10px);
 
+  }
 
+}
 
+@media (max-width: 767px) {
 
+  .container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--type2--wrap {
 
+    flex-direction: column;
 
+  }
 
+  .container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--type2--wrap .input--wrap {
 
+    width: 100%;
 
+  }
 
+  .container .image--section .main--swiper .swiper-slide .txt--wrap {
 
+    top: 50%;
 
+    transform: translate(-50%, -50%);
 
+  }
 
+  .container .image--section .main--swiper .swiper-slide .txt--wrap > span {
 
+    font-size: 16px;
 
+    margin-bottom: 20px;
 
+  }
 
+  .container .image--section .main--swiper .swiper-slide .txt--wrap > h2 {
 
+    font-size: 55px;
 
+    margin-bottom: 35px;
 
+  }
 
+  main .sub--visual--wrap .visual--wrap .op--65 {
 
+    -o-object-position: 65%;
 
+       object-position: 65%;
 
+  }
 
+  main .sub--visual--wrap .visual--txt--wrap h2 .mo {
 
+    display: block;
 
+  }
 
+  main .sub--menu--wrap {
 
+    padding: 40px 20px;
 
+  }
 
+  main .sub--container .sub--title--wrap {
 
+    flex-direction: column;
 
+    align-items: center;
 
+    margin-bottom: 30px;
 
+  }
 
+  main .sub--container .sub--title--wrap .sub--title.type--2 {
 
+    font-size: 28px;
 
+    letter-spacing: -0.32px;
 
+  }
 
+  main .sub--container .sub--title--wrap .sub--title.web {
 
+    display: none;
 
+  }
 
+  main .sub--container .sub--title--wrap .sub--title.mo {
 
+    display: inline-block;
 
+    width: -moz-fit-content;
 
+    width: fit-content;
 
+  }
 
+  main .sub--container .sub--cont--wrap .map--desc h4 {
 
+    font-size: 20px;
 
+  }
 
+  main .sub--container .sub--cont--wrap .map--desc ul li {
 
+    width: 100% !important;
 
+  }
 
+  main .sub--container .sub--cont--wrap .map--desc ul li .ico {
 
+    background-size: 14px 14px;
 
+    width: 30px;
 
+    height: 30px;
 
+    min-width: 30px;
 
+  }
 
+  main .sub--container .grt--wrap .grt--part {
 
+    margin-bottom: 70px;
 
+  }
 
+  main .sub--container .grt--wrap .grt--part:last-child {
 
+    margin-bottom: 0;
 
+  }
 
+  main .sub--container .grt--wrap .grt--part .grt--title {
 
+    margin: 0 auto;
 
+    padding-bottom: 60px;
 
+  }
 
+  main .sub--container .grt--wrap .grt--part .grt--title .grt--year {
 
+    padding: 25px 30px;
 
+    width: auto;
 
+  }
 
+  main .sub--container .grt--wrap .grt--part .grt--title .grt--year .grt--txt {
 
+    transform: translateX(-50%);
 
+    left: 50%;
 
+    top: auto;
 
+    bottom: -36px;
 
+    font-weight: 700;
 
+    font-size: 16px;
 
+  }
 
+  main .sub--container .grt--wrap .grt--part .grt--title .grt--year .title--line {
 
+    display: none;
 
+  }
 
+  main .sub--container .grt--wrap .grt--part .grt--desc {
 
+    padding-left: 0;
 
+  }
 
+  main .sub--container .grt--wrap .grt--part .grt--desc .desc .desc--txt {
 
+    padding-left: 0px;
 
+    padding-bottom: 50px;
 
+    gap: 35px;
 
+  }
 
+  main .sub--container .grt--wrap .grt--part .grt--desc .desc .desc--txt .desc--year {
 
+    font-size: 22px;
 
+  }
 
+  main .sub--container .grt--wrap .grt--part .grt--desc .desc .desc--txt ul li {
 
+    flex-direction: column;
 
+    gap: 20px;
 
+  }
 
+  main .sub--container .grt--wrap .grt--part .grt--desc .desc .desc--txt ul li.active .circle {
 
+    background-color: #EC3237;
 
+  }
 
+  main .sub--container .grt--wrap .grt--part .grt--desc .desc .desc--txt ul li .circle {
 
+    display: inline-block;
 
+    background-color: #ccc;
 
+    transition: all 0.3s;
 
+    width: 8px;
 
+    margin-right: 15px;
 
+    height: 8px;
 
+    border-radius: 50%;
 
+    vertical-align: 2px;
 
+  }
 
+  main .sub--container .grt--wrap .grt--part .grt--desc .desc .desc--txt ul li > p {
 
+    padding-left: 24px;
 
+  }
 
+  main .sub--container .grt--wrap .grt--part .grt--desc .desc .desc--line {
 
+    display: none;
 
+  }
 
+  main .sub--container .org--wrap {
 
+    padding-top: 50px;
 
+  }
 
+  main .sub--container .org--wrap > h3 {
 
+    font-size: 30px;
 
+    font-weight: 700;
 
+    margin-bottom: 40px;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--top .ceo--circle {
 
+    min-width: 120px;
 
+    width: 120px;
 
+    height: 120px;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--top .ceo--line.bottom--type {
 
+    left: 60px;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--mid .org--group {
 
+    padding-bottom: 30px;
 
+    width: 100%;
 
+    margin-left: 20px !important;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--mid .org--group .org--list.w--240 li {
 
+    width: 100%;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--mid .org--group .org--list li {
 
+    width: 100%;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--group--box .org--box {
 
+    width: 100%;
 
+  }
 
+}
 
+@media (max-width: 500px) {
 
+  .container .image--section .section--container .map--wrap .map--dot--box .map--dots {
 
+    gap: 15px;
 
+  }
 
+  .container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot {
 
+    width: 150px;
 
+    height: 150px;
 
+  }
 
+  main .sub--menu--wrap.web {
 
+    display: none;
 
+  }
 
+  main .sub--menu--wrap.mo {
 
+    display: block;
 
+  }
 
+  main .sub--visual--wrap .visual--txt--wrap {
 
+    bottom: -7px;
 
+  }
 
+  main .sub--visual--wrap .visual--txt--wrap h2 {
 
+    font-size: 48px;
 
+  }
 
+  main .sub--container .sub--cont--wrap .sub--point .point--box {
 
+    width: 100%;
 
+    padding: 30px;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--top {
 
+    margin-bottom: 170px;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--top .ceo--line.right--type {
 
+    top: 180px;
 
+    position: absolute;
 
+    width: 90px;
 
+    left: 60px;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--top .ceo--line.bottom--type {
 
+    height: 170px;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--top .ceo--circle.type--2 {
 
+    left: 150px;
 
+    top: 120px;
 
+    position: absolute;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--top .ceo--circle.type--3 {
 
+    top: 120px;
 
+    position: absolute;
 
+    left: 270px;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--mid .org--group--box .org--box {
 
+    height: auto;
 
+    padding: 25px 25px;
 
+  }
 
+}
 
+@media (max-width: 420px) {
 
+  main .sub--container .org--wrap .org--cont .org--top {
 
+    margin-bottom: 150px;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--top .ceo--circle {
 
+    height: 100px;
 
+    min-width: 100px;
 
+    width: 100px;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--top .ceo--circle.type--2 {
 
+    top: 100px;
 
+    left: 140px;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--top .ceo--circle.type--3 {
 
+    top: 100px;
 
+    left: 240px;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--top .ceo--line.bottom--type {
 
+    height: 150px;
 
+    left: 50px;
 
+  }
 
+  main .sub--container .org--wrap .org--cont .org--top .ceo--line.right--type {
 
+    left: 50px;
 
+    top: 150px;
 
+  }
 
+}/*# sourceMappingURL=media.css.map */

Datei-Diff unterdrückt, da er zu groß ist
+ 0 - 0
assets/css/media.css.map


+ 1024 - 0
assets/css/style.css
Datei anzeigen 

@@ -0,0 +1,1024 @@
 
+@charset "UTF-8";
 
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
 
+::-webkit-scrollbar {
 
+  width: 12px;
 
+}
 
+
 
+::-webkit-scrollbar-track {
 
+  background: #000;
 
+  border-radius: 6px;
 
+}
 
+
 
+::-webkit-scrollbar-thumb {
 
+  background: #333;
 
+  border-radius: 6px;
 
+}
 
+
 
+::-webkit-scrollbar-thumb:hover {
 
+  background: #555;
 
+}
 
+
 
+html:has(.header--mob--wrap.active) {
 
+  overflow: hidden;
 
+}
 
+html:has(.header--mob--lang--wrap.active) {
 
+  overflow: hidden;
 
+}
 
+
 
+* {
 
+  font-family: "pretendard";
 
+  margin: 0;
 
+  padding: 0;
 
+  box-sizing: border-box;
 
+}
 
+
 
+.header--wrap {
 
+  position: fixed;
 
+  top: 0;
 
+  left: 0;
 
+  width: 100%;
 
+  z-index: 100;
 
+  transition: background-color 0.3s ease;
 
+}
 
+.header--wrap:hover {
 
+  background-color: #fff;
 
+}
 
+.header--wrap:hover .header--inner .header--logo {
 
+  background-image: url(../img/logo--white.svg);
 
+}
 
+.header--wrap:hover .header--inner:has(.header--mob--lang--btn.active) .header--logo {
 
+  background-image: url(../img/logo--default.svg);
 
+}
 
+.header--wrap:hover .header--inner:has(.header--mob--btn.active) .header--logo {
 
+  background-image: url(../img/logo--default.svg);
 
+}
 
+.header--wrap:hover .header--inner .header--mob--lang--btn {
 
+  background-image: url(../img/ico--global--black.svg);
 
+}
 
+.header--wrap:hover .header--inner .header--mob--btn {
 
+  background-image: url(../img/ico--header--black.svg);
 
+}
 
+.header--wrap:hover .header--inner .header--nav > ul > li > a {
 
+  color: #000;
 
+}
 
+.header--wrap:hover .header--inner .header--lang--btn {
 
+  background-color: #EC3237;
 
+}
 
+.header--wrap .header--inner {
 
+  max-width: 1600px;
 
+  width: 100%;
 
+  margin: 0 auto;
 
+  display: flex;
 
+  justify-content: space-between;
 
+  position: relative;
 
+  align-items: center;
 
+}
 
+.header--wrap .header--inner .header--logo {
 
+  display: flex;
 
+  align-items: center;
 
+  max-width: 290px;
 
+  min-width: 191px;
 
+  width: 30%;
 
+  z-index: 100;
 
+  height: 55px;
 
+  background-size: 100%;
 
+  background-position: center;
 
+  background-repeat: no-repeat;
 
+  background-image: url(../img/logo--default.svg);
 
+}
 
+.header--wrap .header--inner .header--nav > ul {
 
+  list-style: none;
 
+  display: flex;
 
+}
 
+.header--wrap .header--inner .header--nav > ul > li {
 
+  position: relative;
 
+}
 
+.header--wrap .header--inner .header--nav > ul > li > a {
 
+  transition: all 0.3s;
 
+  display: inline-block;
 
+  text-transform: uppercase;
 
+  padding: 40px 75px;
 
+  text-decoration: none;
 
+  font-size: 17px;
 
+  font-weight: 700;
 
+  color: #fff;
 
+}
 
+.header--wrap .header--inner .header--nav > ul > li:hover .sub--nav--wrap {
 
+  max-height: 400px;
 
+}
 
+.header--wrap .header--inner .header--nav > ul > li:hover:nth-child(3) .sub--nav--wrap {
 
+  max-height: 800px;
 
+  transition: max-height 0.9s cubic-bezier(0.4, 0, 0.2, 1);
 
+}
 
+.header--wrap .header--inner .header--nav > ul > li .sub--nav--wrap {
 
+  max-height: 0;
 
+  transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);
 
+  position: absolute;
 
+  display: flex;
 
+  left: 50%;
 
+  transform: translateX(-50%);
 
+  white-space: nowrap;
 
+  background-color: #fff;
 
+  overflow: hidden;
 
+}
 
+.header--wrap .header--inner .header--nav > ul > li .sub--nav--wrap .sub--nav {
 
+  padding: 35px 30px;
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 25px;
 
+}
 
+.header--wrap .header--inner .header--nav > ul > li .sub--nav--wrap .sub--nav > a {
 
+  display: inline-block;
 
+  font-weight: 400;
 
+  color: #111;
 
+  text-transform: capitalize;
 
+  font-size: 16px;
 
+  line-height: 1.4;
 
+  text-decoration: none;
 
+  transition: all 0.3s;
 
+}
 
+.header--wrap .header--inner .header--nav > ul > li .sub--nav--wrap .sub--nav > a:hover {
 
+  color: #EC3237;
 
+  font-weight: 500;
 
+}
 
+.header--wrap .header--inner .header--lang--btn {
 
+  display: flex;
 
+  align-items: center;
 
+  width: 130px;
 
+  color: #fff;
 
+  transition: all 0.3s;
 
+  cursor: pointer;
 
+  font-size: 17px;
 
+  font-weight: 700;
 
+  text-transform: uppercase;
 
+  padding: 38px 20px;
 
+  position: relative;
 
+}
 
+.header--wrap .header--inner .header--lang--btn:hover .lang--select--wrap {
 
+  height: 190px;
 
+  border-top: 1px solid #FB484D;
 
+}
 
+.header--wrap .header--inner .header--lang--btn i {
 
+  display: inline-block;
 
+  background-repeat: no-repeat;
 
+  background-size: 100%;
 
+  background-position: center;
 
+}
 
+.header--wrap .header--inner .header--lang--btn .ico--global {
 
+  width: 24px;
 
+  margin-right: 10px;
 
+  height: 24px;
 
+  background-image: url(../img/ico--global.svg);
 
+}
 
+.header--wrap .header--inner .header--lang--btn .ico--arrow {
 
+  margin-left: auto;
 
+  width: 14px;
 
+  height: 14px;
 
+  background-image: url(../img/ico--global--arrow.svg);
 
+}
 
+.header--wrap .header--inner .header--lang--btn .lang--select--wrap {
 
+  height: 0;
 
+  overflow: hidden;
 
+  position: absolute;
 
+  background: #EC3237;
 
+  top: 100%;
 
+  left: 0;
 
+  transition: height 0.3s;
 
+  width: 100%;
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  list-style: none;
 
+}
 
+.header--wrap .header--inner .header--lang--btn .lang--select--wrap li {
 
+  width: 100%;
 
+  transition: all 0.3s;
 
+  text-align: center;
 
+}
 
+.header--wrap .header--inner .header--lang--btn .lang--select--wrap li a {
 
+  padding: 10px 0;
 
+  width: 100%;
 
+  color: #fff;
 
+  display: inline-block;
 
+  text-decoration: none;
 
+  font-size: 17px;
 
+  font-weight: 700;
 
+}
 
+.header--wrap .header--inner .header--lang--btn .lang--select--wrap li:first-child a {
 
+  padding-top: 25px;
 
+}
 
+.header--wrap .header--inner .header--lang--btn .lang--select--wrap li:last-child a {
 
+  padding-bottom: 25px;
 
+}
 
+.header--wrap .header--inner .header--lang--btn .lang--select--wrap li:hover a {
 
+  color: #ef0;
 
+}
 
+.header--wrap .header--inner .header--lang--btn .lang--select--wrap li.active a {
 
+  color: #ef0;
 
+}
 
+.header--wrap .header--inner .header--mob--lang--btn {
 
+  display: none;
 
+  width: 26px;
 
+  margin-left: auto;
 
+  margin-right: 20px;
 
+  z-index: 100;
 
+  height: 26px;
 
+  background-repeat: no-repeat;
 
+  background-size: 100%;
 
+  background-image: url(../img/ico--global.svg);
 
+  cursor: pointer;
 
+}
 
+.header--wrap .header--inner .header--mob--lang--btn.active {
 
+  margin-right: 0;
 
+  background-image: url(../img/ico--close.svg) !important;
 
+}
 
+.header--wrap .header--inner .header--mob--lang--btn.hide {
 
+  display: none;
 
+}
 
+.header--wrap .header--inner .header--mob--lang--wrap {
 
+  position: fixed;
 
+  background-color: #1a1b20;
 
+  width: 100%;
 
+  height: 100vh;
 
+  right: -100%;
 
+  z-index: 99;
 
+  top: 0;
 
+  display: flex;
 
+  align-items: center;
 
+  transition: all 0.3s;
 
+}
 
+.header--wrap .header--inner .header--mob--lang--wrap.active {
 
+  right: 0;
 
+}
 
+.header--wrap .header--inner .header--mob--lang--wrap > ul {
 
+  display: flex;
 
+  width: 100%;
 
+  flex-direction: column;
 
+  list-style: none;
 
+}
 
+.header--wrap .header--inner .header--mob--lang--wrap > ul > li {
 
+  width: 100%;
 
+  text-align: center;
 
+}
 
+.header--wrap .header--inner .header--mob--lang--wrap > ul > li > a {
 
+  text-decoration: none;
 
+  width: 100%;
 
+  padding: 45px 0;
 
+  display: inline-block;
 
+  color: #fff;
 
+  font-weight: 700;
 
+  font-size: 25px;
 
+}
 
+.header--wrap .header--inner .header--mob--lang--wrap > ul > li.active > a {
 
+  color: #ef0;
 
+}
 
+.header--wrap .header--inner .header--mob--btn {
 
+  display: none;
 
+  width: 26px;
 
+  cursor: pointer;
 
+  z-index: 100;
 
+  height: 26px;
 
+  background-image: url(../img/ico--header.svg);
 
+  background-repeat: no-repeat;
 
+}
 
+.header--wrap .header--inner .header--mob--btn.active {
 
+  background-image: url(../img/ico--close.svg) !important;
 
+}
 
+.header--wrap .header--inner .header--mob--btn.hide {
 
+  display: none;
 
+}
 
+.header--wrap .header--inner .header--mob--wrap {
 
+  position: fixed;
 
+  background-color: #101014;
 
+  width: 100%;
 
+  height: 100vh;
 
+  padding-top: 80px;
 
+  right: -100%;
 
+  z-index: 99;
 
+  top: 0;
 
+  display: flex;
 
+  transition: all 0.3s;
 
+}
 
+.header--wrap .header--inner .header--mob--wrap.active {
 
+  right: 0;
 
+}
 
+.header--wrap .header--inner .header--mob--wrap .mob--l {
 
+  width: 40%;
 
+  border-top: 1px solid #31313A;
 
+  padding: 40px 0;
 
+}
 
+.header--wrap .header--inner .header--mob--wrap .mob--l ul {
 
+  list-style: none;
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 50px;
 
+}
 
+.header--wrap .header--inner .header--mob--wrap .mob--l ul li a {
 
+  line-height: 25px;
 
+  height: 25px;
 
+  width: 100%;
 
+  color: #fff;
 
+  font-size: 16px;
 
+  font-weight: 700;
 
+  text-transform: uppercase;
 
+  text-decoration: none;
 
+  display: inline-block;
 
+  padding: 0 30px;
 
+  transition: all 0.3s;
 
+  position: relative;
 
+}
 
+.header--wrap .header--inner .header--mob--wrap .mob--l ul li a::after {
 
+  content: "";
 
+  position: absolute;
 
+  width: 2px;
 
+  right: 0;
 
+  top: 0;
 
+  display: inline-block;
 
+  transition: all 0.3s;
 
+  height: 100%;
 
+  background-color: #EC3237;
 
+  opacity: 0;
 
+}
 
+.header--wrap .header--inner .header--mob--wrap .mob--l ul li a:hover {
 
+  color: #EC3237;
 
+}
 
+.header--wrap .header--inner .header--mob--wrap .mob--l ul li a:hover::after {
 
+  opacity: 1;
 
+}
 
+.header--wrap .header--inner .header--mob--wrap .mob--l ul li a.active {
 
+  color: #EC3237;
 
+}
 
+.header--wrap .header--inner .header--mob--wrap .mob--l ul li a.active::after {
 
+  opacity: 1;
 
+}
 
+.header--wrap .header--inner .header--mob--wrap .mob--r {
 
+  width: 60%;
 
+  border-top: 1px solid #31313A;
 
+  background-color: #1a1b20;
 
+  padding: 40px 10px 40px 30px;
 
+}
 
+.header--wrap .header--inner .header--mob--wrap .mob--r .sub--nav--wrap {
 
+  height: 100%;
 
+  overflow-y: auto;
 
+}
 
+.header--wrap .header--inner .header--mob--wrap .mob--r .sub--nav--wrap .sub--nav {
 
+  display: none;
 
+  flex-direction: column;
 
+  gap: 40px;
 
+}
 
+.header--wrap .header--inner .header--mob--wrap .mob--r .sub--nav--wrap .sub--nav.active {
 
+  display: flex;
 
+}
 
+.header--wrap .header--inner .header--mob--wrap .mob--r .sub--nav--wrap .sub--nav a {
 
+  text-decoration: none;
 
+  color: #fff;
 
+  display: inline-block;
 
+  width: 100%;
 
+}
 
+.header--wrap .header--inner .header--mob--wrap .mob--r .sub--nav--wrap .sub--nav a.active {
 
+  color: #ec3237;
 
+}
 
+.header--wrap .header--inner .header--mob--wrap .mob--r .sub--nav--wrap .sub--nav a br {
 
+  display: none;
 
+}
 
+
 
+.footer--wrap {
 
+  z-index: 10;
 
+  position: absolute;
 
+  width: 100%;
 
+  color: #fff;
 
+  bottom: 0;
 
+  left: 0;
 
+  text-align: center;
 
+  font-weight: 500;
 
+  font-size: 15px;
 
+  text-transform: uppercase;
 
+  padding: 40px 0;
 
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
 
+  background: #020203;
 
+}
 
+
 
+.container {
 
+  position: relative;
 
+  height: 300vh; /* 3개 이미지 * 100vh */
 
+}
 
+.container .image--section {
 
+  position: sticky;
 
+  top: 0;
 
+  width: 100%;
 
+  height: 100vh;
 
+  overflow: hidden;
 
+  z-index: 1;
 
+}
 
+.container .image--section.global--section {
 
+  background-color: #1A1B20;
 
+}
 
+.container .image--section.contact--section {
 
+  background-image: url(../img/main--contact.png);
 
+  background-size: cover;
 
+}
 
+.container .image--section.black3 {
 
+  background-color: #15161A;
 
+}
 
+.container .image--section .section--container {
 
+  max-width: 1600px;
 
+  margin: 0 auto;
 
+  position: relative;
 
+  height: 100%;
 
+}
 
+.container .image--section .section--container .map--wrap {
 
+  position: absolute;
 
+  width: 100%;
 
+  align-items: center;
 
+  display: flex;
 
+  justify-content: flex-end;
 
+  height: 100%;
 
+}
 
+.container .image--section .section--container .map--wrap .map--img {
 
+  position: relative;
 
+}
 
+.container .image--section .section--container .map--wrap .map--img img {
 
+  -o-object-fit: none;
 
+     object-fit: none;
 
+  height: auto;
 
+}
 
+.container .image--section .section--container .map--wrap .map--dot--box {
 
+  width: 100%;
 
+  height: 100%;
 
+  top: 0;
 
+  left: 0;
 
+  position: absolute;
 
+}
 
+.container .image--section .section--container .map--wrap .map--dot--box .map--dots {
 
+  position: relative;
 
+  width: 100%;
 
+  height: 100%;
 
+}
 
+.container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot {
 
+  width: 168px;
 
+  height: 168px;
 
+  border-radius: 100px;
 
+  background: rgba(205, 25, 29, 0.6);
 
+  -webkit-backdrop-filter: blur(5px);
 
+          backdrop-filter: blur(5px);
 
+  justify-content: center;
 
+  display: flex;
 
+  flex-direction: column;
 
+  position: absolute;
 
+  align-items: center;
 
+}
 
+.container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot .circle {
 
+  border-radius: 100px;
 
+  border: 1px solid rgba(255, 255, 255, 0.5);
 
+  font-size: 14px;
 
+  color: #fff;
 
+  font-weight: 600;
 
+  line-height: 1;
 
+  padding: 8px 10px;
 
+}
 
+.container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot > p {
 
+  margin-top: 10px;
 
+}
 
+.container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot > p span {
 
+  color: #fff;
 
+  font-size: 23px;
 
+  font-weight: 800;
 
+}
 
+.container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot .txt {
 
+  margin-top: 20px;
 
+  color: #fff;
 
+  font-size: 13px;
 
+  font-weight: 600;
 
+  line-height: 1;
 
+}
 
+.container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot.dot1 {
 
+  left: 7%;
 
+  top: 24%;
 
+}
 
+.container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot.dot2 {
 
+  background: rgba(169, 9, 13, 0.6);
 
+  left: 27%;
 
+  bottom: 18%;
 
+}
 
+.container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot.dot3 {
 
+  background: rgba(235, 63, 68, 0.6);
 
+  top: 19%;
 
+  left: 44%;
 
+}
 
+.container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot.dot4 {
 
+  background: rgba(188, 106, 108, 0.6);
 
+  right: 25%;
 
+  bottom: 18%;
 
+}
 
+.container .image--section .section--container .map--wrap .map--dot--box .map--dots .dot.dot5 {
 
+  background: rgba(166, 0, 4, 0.6);
 
+  right: 9%;
 
+  top: 21%;
 
+}
 
+.container .image--section .section--container .text--wrap {
 
+  position: absolute;
 
+  display: flex;
 
+  flex-direction: column;
 
+  bottom: 10%;
 
+}
 
+.container .image--section .section--container .text--wrap > h4 {
 
+  color: #fff;
 
+  font-size: 18px;
 
+  font-weight: 800;
 
+  letter-spacing: -0.36px;
 
+  margin-bottom: 70px;
 
+}
 
+.container .image--section .section--container .text--wrap > h4 span {
 
+  color: #EC3237;
 
+}
 
+.container .image--section .section--container .text--wrap > h3 {
 
+  font-size: 50px;
 
+  color: rgba(255, 255, 255, 0.1);
 
+  margin-bottom: 35px;
 
+}
 
+.container .image--section .section--container .text--wrap > p {
 
+  color: #fff;
 
+  font-size: 19px;
 
+  font-weight: 400;
 
+  word-break: keep-all;
 
+  letter-spacing: -0.38px;
 
+  margin-bottom: 110px;
 
+}
 
+.container .image--section .section--container .text--wrap .btn--wrap a {
 
+  display: flex;
 
+  gap: 20px;
 
+  align-items: center;
 
+  color: #fff;
 
+  font-size: 15px;
 
+  font-weight: 600;
 
+  padding: 20px 30px;
 
+  border: 1px solid rgba(255, 255, 255, 0.3);
 
+  border-radius: 100px;
 
+  width: -moz-fit-content;
 
+  width: fit-content;
 
+  text-decoration: none;
 
+}
 
+.container .image--section .section--container .text--wrap .btn--wrap a .ico {
 
+  display: inline-block;
 
+  width: 14px;
 
+  height: 14px;
 
+  background-repeat: no-repeat;
 
+  background-image: url(../img/ico--arrow--white.svg);
 
+}
 
+.container .image--section .section--container .contact--wrap {
 
+  width: 100%;
 
+  gap: 30px;
 
+  display: flex;
 
+  height: 100%;
 
+  align-items: center;
 
+  justify-content: space-between;
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group {
 
+  display: flex;
 
+  flex-wrap: wrap;
 
+  width: 52%;
 
+  height: 80vh;
 
+  max-height: 850px;
 
+  gap: 2%;
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group input[type=radio] {
 
+  display: none;
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group .location--item {
 
+  display: flex;
 
+  width: 18.4%;
 
+  color: #fff;
 
+  cursor: pointer;
 
+  text-transform: uppercase;
 
+  border-radius: 30px;
 
+  transition: all 0.3s ease;
 
+  position: relative;
 
+  overflow: hidden;
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group .location--item:hover {
 
+  transform: scale(1.1);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group .location--item label {
 
+  width: 100%;
 
+  height: 100%;
 
+  border-radius: inherit;
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group .location--item .image--area {
 
+  cursor: pointer;
 
+  border-radius: inherit;
 
+  width: 100%;
 
+  height: 100%;
 
+  background-size: cover;
 
+  background-position: center;
 
+  background-repeat: no-repeat;
 
+  position: relative;
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group .location--item .image--area:before {
 
+  content: "";
 
+  display: inline-block;
 
+  position: absolute;
 
+  width: 100%;
 
+  height: 100%;
 
+  background: rgba(26, 27, 32, 0.5);
 
+  top: 0;
 
+  left: 0;
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group .location--item .text--area {
 
+  cursor: pointer;
 
+  position: absolute;
 
+  padding: 25px;
 
+  font-weight: 600;
 
+  font-size: 14px;
 
+  z-index: 2;
 
+  color: #fff;
 
+  top: 0;
 
+  left: 0;
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group input[type=radio]:checked + label {
 
+  border: 2px solid rgba(236, 50, 55, 0.5);
 
+  box-shadow: 0 0 20px 0 rgba(25, 36, 77, 0.25);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group input[type=radio]:checked + label .image--area::before {
 
+  display: none;
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group label[for=location1] .image--area {
 
+  background-image: url(../img/contact1.png);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group label[for=location2] .image--area {
 
+  background-image: url(../img/contact2.png);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group label[for=location3] .image--area {
 
+  background-image: url(../img/contact3.png);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group label[for=location4] .image--area {
 
+  background-image: url(../img/contact4.png);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group label[for=location5] .image--area {
 
+  background-image: url(../img/contact5.png);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group label[for=location6] .image--area {
 
+  background-image: url(../img/contact6.png);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group label[for=location7] .image--area {
 
+  background-image: url(../img/contact7.png);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group label[for=location8] .image--area {
 
+  background-image: url(../img/contact8.png);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group label[for=location9] .image--area {
 
+  background-image: url(../img/contact9.png);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group label[for=location10] .image--area {
 
+  background-image: url(../img/contact10.png);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group label[for=location11] .image--area {
 
+  background-image: url(../img/contact11.png);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group label[for=location12] .image--area {
 
+  background-image: url(../img/contact12.png);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group label[for=location13] .image--area {
 
+  background-image: url(../img/contact13.png);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group label[for=location14] .image--area {
 
+  background-image: url(../img/contact14.png);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group label[for=location15] .image--area {
 
+  background-image: url(../img/contact15.png);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group label[for=location16] .image--area {
 
+  background-image: url(../img/contact16.png);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group label[for=location17] .image--area {
 
+  background-image: url(../img/contact17.png);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group label[for=location18] .image--area {
 
+  background-image: url(../img/contact18.png);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group label[for=location19] .image--area {
 
+  background-image: url(../img/contact19.png);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group label[for=location20] .image--area {
 
+  background-image: url(../img/contact20.png);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group label[for=location21] .image--area {
 
+  background-image: url(../img/contact21.png);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group label[for=location22] .image--area {
 
+  background-image: url(../img/contact22.png);
 
+}
 
+.container .image--section .section--container .contact--wrap .location--group label[for=location23] .image--area {
 
+  background-image: url(../img/contact23.png);
 
+}
 
+.container .image--section .section--container .contact--wrap .contact--tit--mo {
 
+  display: none;
 
+}
 
+.container .image--section .section--container .contact--wrap .contact--btn--mo {
 
+  display: none;
 
+}
 
+.container .image--section .section--container .contact--wrap .contact--form {
 
+  background-color: #fff;
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  height: 80vh;
 
+  max-height: 850px;
 
+  justify-content: space-between;
 
+  width: calc(48% - 30px);
 
+  background-color: #1a1b20;
 
+  border-radius: 40px;
 
+  padding: 70px;
 
+}
 
+.container .image--section .section--container .contact--wrap .contact--form .contact--tit {
 
+  width: 100%;
 
+  display: flex;
 
+  color: #fff;
 
+  justify-content: space-between;
 
+}
 
+.container .image--section .section--container .contact--wrap .contact--form .contact--tit h3 {
 
+  font-size: 35px;
 
+  font-weight: 700;
 
+  margin-bottom: 25px;
 
+}
 
+.container .image--section .section--container .contact--wrap .contact--form .contact--tit p {
 
+  font-size: 16px;
 
+  font-weight: 400;
 
+}
 
+.container .image--section .section--container .contact--wrap .contact--form .contact--tit .contact--btn {
 
+  background-repeat: no-repeat;
 
+  background-position: center;
 
+  min-width: 70px;
 
+  border: none;
 
+  cursor: pointer;
 
+  width: 70px;
 
+  height: 70px;
 
+  border-radius: 50%;
 
+  background-color: #ec3237;
 
+  background-image: url(../img/ico--contact.svg);
 
+}
 
+.container .image--section .section--container .contact--wrap .contact--form .contact--cont {
 
+  width: 100%;
 
+  color: #fff;
 
+  display: flex;
 
+  overflow-y: auto;
 
+  height: calc(100% - 140px);
 
+  flex-direction: column;
 
+  gap: 35px;
 
+}
 
+.container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--type2--wrap {
 
+  display: flex;
 
+  width: 100%;
 
+  gap: 30px;
 
+}
 
+.container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--type2--wrap .input--wrap {
 
+  width: calc(50% - 15px);
 
+}
 
+.container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--wrap {
 
+  width: 100%;
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 15px;
 
+}
 
+.container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--wrap select {
 
+  border-radius: 12px;
 
+  border: 1px solid #323340;
 
+  background-color: #262730;
 
+  padding: 20px;
 
+  font-size: 16px;
 
+  cursor: pointer;
 
+  color: #fff;
 
+  -webkit-appearance: none;
 
+     -moz-appearance: none;
 
+          appearance: none;
 
+  background-image: url(../img/ico--select.svg);
 
+  background-repeat: no-repeat;
 
+  background-position: right 20px center;
 
+  background-size: 16px 16px;
 
+  padding-right: 50px;
 
+}
 
+.container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--wrap input {
 
+  border-radius: 12px;
 
+  border: 1px solid #323340;
 
+  background-color: #262730;
 
+  padding: 20px;
 
+  font-size: 16px;
 
+  color: #fff;
 
+}
 
+.container .image--section .section--container .contact--wrap .contact--form .contact--cont .input--wrap textarea {
 
+  resize: none;
 
+  border-radius: 12px;
 
+  border: 1px solid #323340;
 
+  background-color: #262730;
 
+  padding: 20px;
 
+  font-size: 16px;
 
+  color: #fff;
 
+}
 
+.container .image--section img {
 
+  width: 100%;
 
+  height: 100vh;
 
+  -o-object-fit: cover;
 
+     object-fit: cover;
 
+  display: block;
 
+}
 
+.container .image--section:nth-child(2) {
 
+  z-index: 2;
 
+}
 
+.container .image--section:nth-child(3) {
 
+  z-index: 3;
 
+}
 
+.container .image--section .main--swiper {
 
+  position: relative;
 
+}
 
+.container .image--section .main--swiper .swiper-slide .img--wrap {
 
+  position: relative;
 
+}
 
+.container .image--section .main--swiper .swiper-slide .img--wrap::after {
 
+  content: "";
 
+  position: absolute;
 
+  width: 100%;
 
+  z-index: 2;
 
+  display: inline-block;
 
+  height: 100%;
 
+  background: linear-gradient(180deg, #1A1B20 0%, rgba(0, 0, 0, 0) 100%);
 
+  opacity: 0.4;
 
+  top: 0;
 
+  left: 0;
 
+}
 
+.container .image--section .main--swiper .swiper-slide .txt--wrap {
 
+  position: absolute;
 
+  display: flex;
 
+  max-width: 1600px;
 
+  width: 100%;
 
+  left: 50%;
 
+  top: 20%;
 
+  transform: translateX(-50%);
 
+  flex-direction: column;
 
+}
 
+.container .image--section .main--swiper .swiper-slide .txt--wrap > span {
 
+  color: #fff;
 
+  font-size: 23px;
 
+  font-weight: 500;
 
+  margin-bottom: 35px;
 
+  letter-spacing: -0.46px;
 
+  text-transform: capitalize;
 
+}
 
+.container .image--section .main--swiper .swiper-slide .txt--wrap > h2 {
 
+  font-size: 120px;
 
+  color: #fff;
 
+  margin-bottom: 65px;
 
+  font-weight: 900;
 
+  letter-spacing: -2.4px;
 
+  text-transform: uppercase;
 
+}
 
+.container .image--section .main--swiper .swiper-slide .txt--wrap > h2 strong {
 
+  color: #ec3237;
 
+}
 
+.container .image--section .main--swiper .swiper-slide .txt--wrap .btn--wrap a {
 
+  display: flex;
 
+  align-items: center;
 
+  text-decoration: none;
 
+  gap: 10px;
 
+  color: #ec3237;
 
+  font-size: 14px;
 
+  background-color: #fff;
 
+  width: -moz-fit-content;
 
+  width: fit-content;
 
+  font-weight: 700;
 
+  padding: 20px 30px;
 
+  border-radius: 100px;
 
+}
 
+.container .image--section .main--swiper .swiper-slide .txt--wrap .btn--wrap a .ico {
 
+  display: inline-block;
 
+  background-image: url(../img/ico--arrow.svg);
 
+  background-repeat: no-repeat;
 
+  background-size: 100%;
 
+  background-position: center;
 
+  width: 16px;
 
+  height: 16px;
 
+}
 
+.container .image--section .main--swiper .swiper--btn--wrap {
 
+  display: none;
 
+  position: absolute;
 
+  right: 20px;
 
+  display: flex;
 
+  gap: 15px;
 
+  width: 143px;
 
+  height: 64px;
 
+  bottom: 30px;
 
+}
 
+.container .image--section .main--swiper .swiper--btn--wrap .swiper-button-next,
 
+.container .image--section .main--swiper .swiper--btn--wrap .swiper-button-prev {
 
+  display: none;
 
+  margin-top: 0;
 
+  top: 0;
 
+  background-image: url(../img/ico--arrow--swiper.svg);
 
+  background-size: 25px 25px;
 
+  width: 64px;
 
+  height: 64px;
 
+  background-repeat: no-repeat;
 
+  border-radius: 50%;
 
+  border: 1px solid rgba(255, 255, 255, 0.5);
 
+  background-position: center;
 
+}
 
+.container .image--section .main--swiper .swiper--btn--wrap .swiper-button-next::after,
 
+.container .image--section .main--swiper .swiper--btn--wrap .swiper-button-prev::after {
 
+  display: none;
 
+}
 
+.container .image--section .main--swiper .swiper--btn--wrap .swiper-button-prev {
 
+  left: 0;
 
+  transform: rotate(180deg);
 
+}
 
+.container .image--section .main--swiper .swiper--btn--wrap .swiper-button-next {
 
+  right: 0;
 
+  left: auto;
 
+}
 
+.container .image--section .main--swiper .swiper--pag--wrap {
 
+  display: none;
 
+  position: absolute;
 
+  width: calc(100% - 240px);
 
+  height: 64px;
 
+  bottom: 30px;
 
+  left: 30px;
 
+}
 
+.container .image--section .main--swiper .swiper--pag--wrap .swiper--pag {
 
+  position: relative;
 
+  height: 100%;
 
+  width: 100%;
 
+}
 
+.container .image--section .main--swiper .swiper--pag--wrap .swiper--pag p {
 
+  font-weight: 700;
 
+  font-size: 17px;
 
+  color: #fff;
 
+  text-transform: uppercase;
 
+  position: absolute;
 
+  z-index: 1;
 
+  top: 0;
 
+  left: 0;
 
+}
 
+.container .image--section .main--swiper .swiper--pag--wrap .swiper--pag .pag--numb span {
 
+  display: inline-block;
 
+  position: absolute;
 
+  z-index: 1;
 
+  color: rgba(255, 255, 255, 0.5);
 
+  font-size: 15px;
 
+  font-weight: 700;
 
+  bottom: 0;
 
+}
 
+.container .image--section .main--swiper .swiper--pag--wrap .swiper--pag .pag--numb span.active {
 
+  color: #fff;
 
+}
 
+.container .image--section .main--swiper .swiper--pag--wrap .swiper--pag .pag--numb span.num--6 {
 
+  right: 0;
 
+}
 
+.container .image--section .main--swiper .swiper--pag--wrap .swiper--pag .pag--numb .swiper-pagination {
 
+  position: absolute;
 
+  top: auto;
 
+  border-radius: 100px;
 
+  height: 5px;
 
+  width: calc(100% - 60px);
 
+  margin: 5px 0;
 
+  left: 30px;
 
+  overflow: hidden;
 
+  bottom: 0;
 
+  background-color: #4A494D;
 
+}
 
+.container .image--section .main--swiper .swiper--pag--wrap .swiper--pag .pag--numb .swiper-pagination .swiper-pagination-progressbar-fill {
 
+  background-color: #fff;
 
+}
 
+.container .image--section .main--swiper .main--swiper--tab {
 
+  position: absolute;
 
+  max-width: 1600px;
 
+  left: 50%;
 
+  transform: translateX(-50%);
 
+  width: 100%;
 
+  bottom: 0;
 
+  display: flex;
 
+  z-index: 5;
 
+}
 
+.container .image--section .main--swiper .main--swiper--tab .tab--wrap {
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+  word-break: keep-all;
 
+  width: 16.6666666667%;
 
+  padding: 70px 35px 50px;
 
+}
 
+.container .image--section .main--swiper .main--swiper--tab .tab--wrap .tab--inner {
 
+  padding-top: 20px;
 
+  border-top: 1px solid #fff;
 
+}
 
+.container .image--section .main--swiper .main--swiper--tab .tab--wrap .tab--inner dt {
 
+  color: #fff;
 
+  font-size: 20px;
 
+  font-weight: 800;
 
+  text-transform: uppercase;
 
+  margin-bottom: 30px;
 
+}
 
+.container .image--section .main--swiper .main--swiper--tab .tab--wrap .tab--inner dd {
 
+  font-size: 14px;
 
+  color: #fff;
 
+  font-weight: 400;
 
+  line-height: 1.7;
 
+}
 
+.container .image--section .main--swiper .main--swiper--tab .tab--wrap.active {
 
+  background-color: #ec3237;
 
+}/*# sourceMappingURL=style.css.map */

Datei-Diff unterdrückt, da er zu groß ist
+ 0 - 0
assets/css/style.css.map


+ 765 - 0
assets/css/sub.css
Datei anzeigen 

@@ -0,0 +1,765 @@
 
+.header--wrap.scrolled, .header--wrap:hover {
 
+  background-color: #fff;
 
+}
 
+.header--wrap.scrolled .header--inner .header--mob--lang--btn, .header--wrap:hover .header--inner .header--mob--lang--btn {
 
+  background-image: url(../img/ico--global--black.svg);
 
+}
 
+.header--wrap.scrolled .header--inner .header--mob--btn, .header--wrap:hover .header--inner .header--mob--btn {
 
+  background-image: url(../img/ico--header--black.svg);
 
+}
 
+.header--wrap.scrolled .header--inner .header--logo, .header--wrap:hover .header--inner .header--logo {
 
+  background-image: url(../img/logo--white.svg);
 
+}
 
+.header--wrap.scrolled .header--inner:has(.header--mob--btn.active) .header--logo, .header--wrap:hover .header--inner:has(.header--mob--btn.active) .header--logo {
 
+  background-image: url(../img/logo--default.svg);
 
+}
 
+.header--wrap.scrolled .header--inner .header--nav > ul > li > a, .header--wrap:hover .header--inner .header--nav > ul > li > a {
 
+  color: #000;
 
+}
 
+.header--wrap.scrolled .header--inner .header--lang--btn, .header--wrap:hover .header--inner .header--lang--btn {
 
+  background-color: #EC3237;
 
+}
 
+
 
+.footer--wrap.sub--type {
 
+  position: static;
 
+}
 
+
 
+main .ico {
 
+  display: inline-block;
 
+  background-repeat: no-repeat;
 
+  background-size: 100%;
 
+  background-position: center;
 
+}
 
+main .sub--visual--wrap {
 
+  position: relative;
 
+}
 
+main .sub--visual--wrap .visual--wrap {
 
+  width: 100%;
 
+}
 
+main .sub--visual--wrap .visual--wrap img {
 
+  width: 100%;
 
+}
 
+main .sub--visual--wrap .visual--txt--wrap {
 
+  position: absolute;
 
+  max-width: 1600px;
 
+  width: 100%;
 
+  bottom: -14px;
 
+  line-height: 1;
 
+  text-transform: uppercase;
 
+  left: 50%;
 
+  transform: translateX(-50%);
 
+}
 
+main .sub--visual--wrap .visual--txt--wrap h2 {
 
+  font-weight: 800;
 
+  font-size: 120px;
 
+  color: #fff;
 
+}
 
+main .sub--visual--wrap .visual--txt--wrap h2 .mo {
 
+  display: none;
 
+}
 
+main .sub--visual--wrap .visual--txt--wrap h2 strong {
 
+  color: #ec3237;
 
+}
 
+main .org--sec--wrap {
 
+  background-size: cover;
 
+  background-attachment: fixed;
 
+  background-color: #1A1B20;
 
+  background-position: bottom;
 
+  background-repeat: no-repeat;
 
+  background-image: url(../img/img--org.png);
 
+}
 
+main .sub--menu--wrap {
 
+  max-width: 1600px;
 
+  justify-content: center;
 
+  align-items: center;
 
+  display: flex;
 
+  margin: 0 auto;
 
+  gap: 18px;
 
+  padding: 150px 0;
 
+  width: 100%;
 
+}
 
+main .sub--menu--wrap select {
 
+  background-color: #fff;
 
+  width: 100%;
 
+  border: 1px solid #dedede;
 
+  border-radius: 15px;
 
+  cursor: pointer;
 
+  color: #191919;
 
+  font-size: 16px;
 
+  font-weight: 500;
 
+  padding: 25px 20px;
 
+  -webkit-appearance: none;
 
+  background-image: url(../img/ico--select--black.svg);
 
+  background-repeat: no-repeat;
 
+  background-position: center right 20px;
 
+  -moz-appearance: none;
 
+  appearance: none;
 
+}
 
+main .sub--menu--wrap.mo {
 
+  display: none;
 
+}
 
+main .sub--menu--wrap .ico {
 
+  width: 20px;
 
+  height: 20px;
 
+  background-image: url(../img/ico--home.svg);
 
+}
 
+main .sub--menu--wrap .dot {
 
+  display: inline-block;
 
+  width: 6px;
 
+  height: 6px;
 
+  border-radius: 50%;
 
+  background-color: #d9d9d9;
 
+}
 
+main .sub--menu--wrap p {
 
+  text-transform: uppercase;
 
+  font-size: 18px;
 
+  font-weight: 400;
 
+  color: #000;
 
+}
 
+main .sub--menu--wrap p:last-child {
 
+  font-weight: 600;
 
+  color: #ec3237;
 
+}
 
+main .sub--container {
 
+  max-width: 1600px;
 
+  margin: 0 auto;
 
+}
 
+main .sub--container .sub--title--wrap {
 
+  display: flex;
 
+  justify-content: center;
 
+  margin-bottom: 60px;
 
+}
 
+main .sub--container .sub--title--wrap .sub--title {
 
+  color: #191919;
 
+  font-size: 50px;
 
+  font-weight: 800;
 
+  display: inline;
 
+  text-align: center;
 
+  text-transform: capitalize;
 
+  position: relative;
 
+}
 
+main .sub--container .sub--title--wrap .sub--title.mo {
 
+  display: none;
 
+}
 
+main .sub--container .sub--title--wrap .sub--title::after {
 
+  position: absolute;
 
+  content: "";
 
+  display: inline-block;
 
+  background: rgba(236, 50, 55, 0.4);
 
+  width: calc(100% + 10px);
 
+  bottom: 5px;
 
+  left: -5px;
 
+  z-index: -1;
 
+  height: 40%;
 
+}
 
+main .sub--container .sub--cont--wrap {
 
+  margin-bottom: 120px;
 
+}
 
+main .sub--container .sub--cont--wrap .sub--desc {
 
+  max-width: 1200px;
 
+  margin: 0 auto;
 
+  line-height: 1.7;
 
+  color: #000;
 
+  font-size: 18px;
 
+  font-weight: 300;
 
+  text-align: center;
 
+}
 
+main .sub--container .sub--cont--wrap .sub--point {
 
+  display: flex;
 
+  justify-content: space-between;
 
+  flex-wrap: wrap;
 
+  margin-top: 120px;
 
+}
 
+main .sub--container .sub--cont--wrap .sub--point .point--box {
 
+  width: calc((100% - 120px) / 4);
 
+  padding: 45px;
 
+  border: 1px solid rgba(228, 228, 228, 0.93);
 
+  background-color: #fff;
 
+  border-radius: 30px;
 
+}
 
+main .sub--container .sub--cont--wrap .sub--point .point--box .ico {
 
+  width: 60px;
 
+  height: 60px;
 
+  margin-bottom: 35px;
 
+  background-image: url(../img/ico--air1.svg);
 
+}
 
+main .sub--container .sub--cont--wrap .sub--point .point--box:nth-child(2) .ico {
 
+  background-image: url(../img/ico--air2.svg);
 
+}
 
+main .sub--container .sub--cont--wrap .sub--point .point--box:nth-child(3) .ico {
 
+  background-image: url(../img/ico--air3.svg);
 
+}
 
+main .sub--container .sub--cont--wrap .sub--point .point--box:nth-child(4) .ico {
 
+  background-image: url(../img/ico--air4.svg);
 
+}
 
+main .sub--container .sub--cont--wrap .sub--point .point--box > h5 {
 
+  margin-bottom: 20px;
 
+  text-transform: uppercase;
 
+  color: #191919;
 
+  font-size: 20px;
 
+  font-weight: 800;
 
+}
 
+main .sub--container .sub--cont--wrap .sub--point .point--box > p {
 
+  color: #191919;
 
+  line-height: 1.7;
 
+  font-size: 16px;
 
+  font-weight: 300;
 
+}
 
+main .sub--container .sub--cont--wrap .map--wrap {
 
+  height: 700px;
 
+}
 
+main .sub--container .sub--cont--wrap .map--desc {
 
+  margin-top: 110px;
 
+}
 
+main .sub--container .sub--cont--wrap .map--desc h4 {
 
+  color: #191919;
 
+  font-size: 30px;
 
+  font-weight: 700;
 
+  margin-bottom: 50px;
 
+  text-transform: uppercase;
 
+}
 
+main .sub--container .sub--cont--wrap .map--desc ul {
 
+  list-style: none;
 
+  display: flex;
 
+  flex-wrap: wrap;
 
+  gap: 25px;
 
+}
 
+main .sub--container .sub--cont--wrap .map--desc ul li {
 
+  display: flex;
 
+  align-items: center;
 
+  font-size: 18px;
 
+  font-weight: 300;
 
+  text-transform: uppercase;
 
+}
 
+main .sub--container .sub--cont--wrap .map--desc ul li span {
 
+  margin-right: 5px;
 
+}
 
+main .sub--container .sub--cont--wrap .map--desc ul li strong {
 
+  font-weight: 600;
 
+}
 
+main .sub--container .sub--cont--wrap .map--desc ul li .ico {
 
+  min-width: 40px;
 
+  margin-right: 20px;
 
+  width: 40px;
 
+  height: 40px;
 
+  background-size: 18px 18px;
 
+  border-radius: 50%;
 
+  background-color: #1a1b20;
 
+}
 
+main .sub--container .sub--cont--wrap .map--desc ul li:nth-child(1) {
 
+  width: 100%;
 
+}
 
+main .sub--container .sub--cont--wrap .map--desc ul li:nth-child(1) .ico {
 
+  background-image: url(../img/ico--map1.svg);
 
+}
 
+main .sub--container .sub--cont--wrap .map--desc ul li:nth-child(2) {
 
+  width: 300px;
 
+}
 
+main .sub--container .sub--cont--wrap .map--desc ul li:nth-child(2) .ico {
 
+  background-image: url(../img/ico--map2.svg);
 
+}
 
+main .sub--container .sub--cont--wrap .map--desc ul li:nth-child(3) {
 
+  width: calc(100% - 325px);
 
+}
 
+main .sub--container .sub--cont--wrap .map--desc ul li:nth-child(3) .ico {
 
+  background-image: url(../img/ico--map3.svg);
 
+}
 
+main .sub--container .sub--cont--wrap .map--desc ul li:nth-child(4) {
 
+  width: 300px;
 
+}
 
+main .sub--container .sub--cont--wrap .map--desc ul li:nth-child(4) .ico {
 
+  background-image: url(../img/ico--map4.svg);
 
+}
 
+main .sub--container .sub--cont--wrap .map--desc ul li:nth-child(5) {
 
+  width: calc(100% - 325px);
 
+}
 
+main .sub--container .sub--cont--wrap .map--desc ul li:nth-child(5) .ico {
 
+  background-image: url(../img/ico--map5.svg);
 
+}
 
+main .sub--container .grt--wrap {
 
+  margin-bottom: 150px;
 
+  display: flex;
 
+  flex-direction: column;
 
+}
 
+main .sub--container .grt--wrap .grt--part {
 
+  display: flex;
 
+  flex-direction: column;
 
+  align-items: center;
 
+  justify-content: center;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--title {
 
+  padding-bottom: 70px;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--title .grt--year {
 
+  width: -moz-fit-content;
 
+  width: fit-content;
 
+  color: #fff;
 
+  font-size: 30px;
 
+  line-height: 1;
 
+  font-weight: 800;
 
+  background-color: #ccc;
 
+  padding: 23px 30px;
 
+  position: relative;
 
+  transition: all 0.3s;
 
+  border-radius: 0 50px 50px 50px;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--title .grt--year.active {
 
+  background-color: #ec3237;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--title .grt--year.active .title--line .line, main .sub--container .grt--wrap .grt--part .grt--title .grt--year.active .title--line .dot {
 
+  background-color: #ec3237;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--title .grt--year.active .grt--txt {
 
+  color: #EC3237;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--title .grt--year .grt--txt {
 
+  color: #666;
 
+  font-size: 20px;
 
+  display: inline-block;
 
+  font-weight: 800;
 
+  text-align: right;
 
+  position: absolute;
 
+  top: 50%;
 
+  transform: translateY(-50%);
 
+  right: calc(100% + 50px);
 
+  white-space: nowrap;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--title .grt--year .title--line {
 
+  position: absolute;
 
+  z-index: 10;
 
+  left: calc(50% - 3px);
 
+  top: 100%;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--title .grt--year .title--line .line {
 
+  display: inline-block;
 
+  margin-left: 4.5px;
 
+  width: 3px;
 
+  height: 85px;
 
+  background-color: #e4e4e4;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--title .grt--year .title--line .dot {
 
+  position: absolute;
 
+  bottom: 0;
 
+  left: 0;
 
+  width: 12px;
 
+  height: 12px;
 
+  border-radius: 50%;
 
+  background-color: #ccc;
 
+  display: inline-block;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--desc {
 
+  width: calc(50% + 3px);
 
+  display: flex;
 
+  flex-direction: column;
 
+  margin-left: auto;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--desc .desc {
 
+  display: flex;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--desc .desc .desc--line {
 
+  position: relative;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--desc .desc .desc--line.active .line::after {
 
+  background-color: #ec3237;
 
+  height: 100%;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--desc .desc .desc--line.active .dot {
 
+  background-color: #ec3237;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--desc .desc .desc--line .line {
 
+  position: relative;
 
+  transition: all 0.3s;
 
+  display: inline-block;
 
+  width: 3px;
 
+  margin-left: 4.5px;
 
+  margin-top: 18px;
 
+  height: 100%;
 
+  background-color: #e4e4e4;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--desc .desc .desc--line .line::after {
 
+  transition: all 0.3s;
 
+  content: "";
 
+  position: absolute;
 
+  width: 100%;
 
+  height: 0;
 
+  display: inline-block;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--desc .desc .desc--line .dot {
 
+  transition: all 0.3s;
 
+  position: absolute;
 
+  bottom: -20px;
 
+  left: 0;
 
+  width: 12px;
 
+  height: 12px;
 
+  border-radius: 50%;
 
+  z-index: 10;
 
+  background-color: #ccc;
 
+  display: inline-block;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--desc .desc .desc--line .dot.active {
 
+  background-color: #ec3237;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--desc .desc .desc--txt {
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 40px;
 
+  padding-left: 55px;
 
+  padding-bottom: 70px;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--desc .desc .desc--txt .desc--year {
 
+  color: #191919;
 
+  font-size: 25px;
 
+  font-weight: 800;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--desc .desc .desc--txt ul {
 
+  display: flex;
 
+  gap: 40px;
 
+  flex-direction: column;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--desc .desc .desc--txt ul li {
 
+  display: flex;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--desc .desc .desc--txt ul li > span {
 
+  width: 70px;
 
+  font-size: 18px;
 
+  color: #333;
 
+  font-weight: 700;
 
+  min-width: 70px;
 
+}
 
+main .sub--container .grt--wrap .grt--part .grt--desc .desc .desc--txt ul li > p {
 
+  color: #000;
 
+  font-size: 16px;
 
+  font-weight: 300;
 
+  line-height: 1.7;
 
+}
 
+main .sub--container .org--wrap {
 
+  padding-top: 100px;
 
+}
 
+main .sub--container .org--wrap > h3 {
 
+  color: #fff;
 
+  font-size: 50px;
 
+  font-weight: 800;
 
+  margin-bottom: 90px;
 
+}
 
+main .sub--container .org--wrap .org--cont .org--top {
 
+  display: flex;
 
+  align-items: center;
 
+  margin-bottom: 100px;
 
+  position: relative;
 
+}
 
+main .sub--container .org--wrap .org--cont .org--top .ceo--circle {
 
+  width: 170px;
 
+  min-width: 170px;
 
+  height: 170px;
 
+  border-radius: 50%;
 
+  display: flex;
 
+  justify-content: center;
 
+  align-items: center;
 
+  color: #131417;
 
+  font-size: 19px;
 
+  font-weight: 800;
 
+  background: rgba(255, 255, 255, 0.8);
 
+  -webkit-backdrop-filter: blur(1.5px);
 
+          backdrop-filter: blur(1.5px);
 
+}
 
+main .sub--container .org--wrap .org--cont .org--top .ceo--circle.type--2 {
 
+  background: rgba(255, 255, 255, 0.3);
 
+  color: #fff;
 
+}
 
+main .sub--container .org--wrap .org--cont .org--top .ceo--circle.type--3 {
 
+  color: #fff;
 
+  background: rgba(19, 20, 23, 0.3);
 
+  margin-left: -20px;
 
+}
 
+main .sub--container .org--wrap .org--cont .org--top .ceo--line {
 
+  display: inline-block;
 
+  width: 308px;
 
+  height: 1px;
 
+  background: rgba(255, 255, 255, 0.5);
 
+}
 
+main .sub--container .org--wrap .org--cont .org--top .ceo--line.bottom--type {
 
+  width: 1px;
 
+  height: 100px;
 
+  position: absolute;
 
+  top: 100%;
 
+  left: 85px;
 
+}
 
+main .sub--container .org--wrap .org--cont .org--group--box .org--box {
 
+  width: 390px;
 
+  height: 80px;
 
+  color: #fff;
 
+  font-weight: 600;
 
+  font-size: 17px;
 
+  border-radius: 18px;
 
+  padding: 30px 25px;
 
+  border: 1px solid rgba(255, 255, 255, 0.2);
 
+  background: rgba(255, 255, 255, 0.1);
 
+  -webkit-backdrop-filter: blur(1.5px);
 
+          backdrop-filter: blur(1.5px);
 
+}
 
+main .sub--container .org--wrap .org--cont .org--mid {
 
+  position: relative;
 
+  flex-wrap: wrap;
 
+  display: flex;
 
+}
 
+main .sub--container .org--wrap .org--cont .org--mid .org--line {
 
+  width: 100px;
 
+  height: 1px;
 
+  margin-top: 40px;
 
+  background-color: #fff;
 
+  position: relative;
 
+}
 
+main .sub--container .org--wrap .org--cont .org--mid .org--line::after {
 
+  content: "";
 
+  width: 12px;
 
+  height: 12px;
 
+  right: 0;
 
+  top: -6px;
 
+  position: absolute;
 
+  border-radius: 50%;
 
+  background-color: #fff;
 
+  display: inline-block;
 
+}
 
+main .sub--container .org--wrap .org--cont .org--mid .org--line.bottom--type {
 
+  position: absolute;
 
+  height: calc(100% - 80px);
 
+  width: 1px;
 
+  left: 25px;
 
+  top: 80px;
 
+  margin-top: 0;
 
+  background: rgba(255, 255, 255, 0.5);
 
+  display: inline-block;
 
+}
 
+main .sub--container .org--wrap .org--cont .org--mid .org--line.bottom--type::after {
 
+  display: none;
 
+}
 
+main .sub--container .org--wrap .org--cont .org--mid .org--group {
 
+  padding-right: 50px;
 
+  padding-bottom: 80px;
 
+  position: relative;
 
+}
 
+main .sub--container .org--wrap .org--cont .org--mid .org--group .org--line {
 
+  position: absolute;
 
+  width: 100%;
 
+  top: 0;
 
+  background-color: rgba(255, 255, 255, 0.5);
 
+}
 
+main .sub--container .org--wrap .org--cont .org--mid .org--group .org--line.none--circle::after {
 
+  display: none;
 
+}
 
+main .sub--container .org--wrap .org--cont .org--mid .org--group .org--line.none--circle::before {
 
+  display: none;
 
+}
 
+main .sub--container .org--wrap .org--cont .org--mid .org--group .org--line.none--circle.mt--120 {
 
+  margin-top: 120px;
 
+}
 
+main .sub--container .org--wrap .org--cont .org--mid .org--group .org--line.none--circle.mt--120::after {
 
+  display: inline-block;
 
+  left: -12px;
 
+}
 
+main .sub--container .org--wrap .org--cont .org--mid .org--group .org--line:before {
 
+  content: "";
 
+  position: absolute;
 
+  top: 0;
 
+  display: inline-block;
 
+  background-color: #fff;
 
+  width: 50px;
 
+  right: 0;
 
+  height: 1px;
 
+}
 
+main .sub--container .org--wrap .org--cont .org--mid .org--group p {
 
+  color: #fff;
 
+  font-size: 18px;
 
+  font-weight: 700;
 
+  text-transform: capitalize;
 
+  margin-bottom: 45px;
 
+}
 
+main .sub--container .org--wrap .org--cont .org--mid .org--group p.mb--60 {
 
+  margin-bottom: 60px;
 
+}
 
+main .sub--container .org--wrap .org--cont .org--mid .org--group .org--list {
 
+  list-style: none;
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 10px;
 
+}
 
+main .sub--container .org--wrap .org--cont .org--mid .org--group .org--list.w--240 li {
 
+  width: 240px;
 
+}
 
+main .sub--container .org--wrap .org--cont .org--mid .org--group .org--list li {
 
+  background-color: #131417;
 
+  border-radius: 12px;
 
+  padding: 20px;
 
+  color: #fff;
 
+  font-size: 14px;
 
+  width: 220px;
 
+  text-transform: capitalize;
 
+  font-weight: 400;
 
+}
 
+main .sub--container .org--wrap .org--cont .org--mid .org--group .org--list.nation li {
 
+  text-transform: uppercase;
 
+}
 
+main .quick--menu--wrap {
 
+  position: fixed;
 
+  width: 70px;
 
+  display: flex;
 
+  flex-direction: column;
 
+  gap: 15px;
 
+  right: 125px;
 
+  top: calc(50% - 120px);
 
+  opacity: 0;
 
+  visibility: hidden;
 
+  transition: all 0.3s;
 
+}
 
+main .quick--menu--wrap.active {
 
+  opacity: 1;
 
+  visibility: visible;
 
+}
 
+main .quick--menu--wrap > div {
 
+  background-size: 30px 30px;
 
+  background-repeat: no-repeat;
 
+  border-radius: 50%;
 
+  background-color: #fff;
 
+  background-position: center;
 
+  width: 70px;
 
+  height: 70px;
 
+  position: relative;
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+  border: 1px solid rgba(54, 55, 63, 0.5);
 
+  background-image: url(../img/ico--quick1.svg);
 
+}
 
+main .quick--menu--wrap > div.quick--contact:hover .contact--bubble {
 
+  opacity: 1;
 
+}
 
+main .quick--menu--wrap > div.quick--contact .contact--bubble {
 
+  opacity: 0;
 
+  pointer-events: none;
 
+  transition: opacity 0.3s;
 
+  position: absolute;
 
+  top: 0;
 
+  right: calc(100% + 20px);
 
+  padding: 24px 30px;
 
+  background-color: #EC3237;
 
+  border-radius: 50px;
 
+  font-size: 22px;
 
+  color: #fff;
 
+  font-weight: 600;
 
+  line-height: 1;
 
+  text-transform: uppercase;
 
+  white-space: nowrap;
 
+}
 
+main .quick--menu--wrap > div.quick--contact .contact--bubble::after {
 
+  content: "";
 
+  background-image: url(../img/ico--bubble.svg);
 
+  position: absolute;
 
+  right: -12px;
 
+  top: 18px;
 
+  background-size: 100%;
 
+  background-repeat: no-repeat;
 
+  width: 28px;
 
+  height: 28px;
 
+  display: inline-block;
 
+}
 
+main .quick--menu--wrap > div.quick--global {
 
+  background-image: url(../img/ico--quick2.svg);
 
+}
 
+main .quick--menu--wrap > div.quick--global:hover .global--bubble {
 
+  opacity: 1;
 
+  pointer-events: all;
 
+}
 
+main .quick--menu--wrap > div.quick--global .global--bubble {
 
+  opacity: 0;
 
+  transition: opacity 0.3s;
 
+  pointer-events: none;
 
+  position: absolute;
 
+  top: 0;
 
+  right: calc(100% + 20px);
 
+  width: 435px;
 
+  padding: 25px 20px;
 
+  border-radius: 20px;
 
+  background-color: #EC3237;
 
+}
 
+main .quick--menu--wrap > div.quick--global .global--bubble .global--list {
 
+  height: 350px;
 
+  padding: 0 20px;
 
+  overflow-y: scroll;
 
+}
 
+main .quick--menu--wrap > div.quick--global .global--bubble .global--list::-webkit-scrollbar {
 
+  width: 8px;
 
+}
 
+main .quick--menu--wrap > div.quick--global .global--bubble .global--list::-webkit-scrollbar-track {
 
+  background: rgba(255, 255, 255, 0.1);
 
+  border-radius: 4px;
 
+}
 
+main .quick--menu--wrap > div.quick--global .global--bubble .global--list::-webkit-scrollbar-thumb {
 
+  background: rgba(255, 255, 255, 0.5);
 
+  border-radius: 4px;
 
+}
 
+main .quick--menu--wrap > div.quick--global .global--bubble .global--list::-webkit-scrollbar-thumb:hover {
 
+  background: rgba(255, 255, 255, 0.7);
 
+}
 
+main .quick--menu--wrap > div.quick--global .global--bubble .global--list a {
 
+  list-style: circle;
 
+  position: relative;
 
+  text-transform: capitalize;
 
+  pointer-events: none;
 
+  text-decoration: none;
 
+  display: inline-block;
 
+  margin-bottom: 15px;
 
+  font-size: 20px;
 
+  font-weight: 600;
 
+  color: #fff;
 
+}
 
+main .quick--menu--wrap > div.quick--global .global--bubble .global--list a::before {
 
+  content: "";
 
+  display: inline-block;
 
+  width: 8px;
 
+  height: 8px;
 
+  border-radius: 50%;
 
+  background-color: #fff;
 
+  top: 8px;
 
+  left: -15px;
 
+  position: absolute;
 
+}
 
+main .quick--menu--wrap > div.quick--global .global--bubble .global--list a:last-child {
 
+  margin-bottom: 0;
 
+}
 
+main .quick--menu--wrap > div.quick--global .global--bubble::after {
 
+  content: "";
 
+  background-image: url(../img/ico--bubble.svg);
 
+  position: absolute;
 
+  right: -35px;
 
+  top: 0px;
 
+  background-repeat: no-repeat;
 
+  background-position: center;
 
+  background-size: 28px 28px;
 
+  width: 70px;
 
+  height: 70px;
 
+  display: inline-block;
 
+}
 
+main .quick--menu--wrap > div:hover {
 
+  border: none;
 
+  background-color: #EC3237;
 
+  box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25);
 
+  background-image: url(../img/ico--quick1--white.svg);
 
+}
 
+main .quick--menu--wrap > div:hover.quick--global {
 
+  background-image: url(../img/ico--quick2--white.svg);
 
+}
 
+main .quick--menu--wrap > button {
 
+  background-size: 24px 24px;
 
+  background-repeat: no-repeat;
 
+  background-color: #36373f;
 
+  background-position: center;
 
+  margin-top: 15px;
 
+  border-radius: 0 50% 50% 50%;
 
+  width: 70px;
 
+  height: 70px;
 
+  transform: rotate(45deg);
 
+  cursor: pointer;
 
+  transition: all 0.3s;
 
+  border: 1px solid rgba(54, 55, 63, 0.5);
 
+  position: relative;
 
+  background-image: url(../img/ico--quick3.svg);
 
+}/*# sourceMappingURL=sub.css.map */

Datei-Diff unterdrückt, da er zu groß ist
+ 0 - 0
assets/css/sub.css.map


BIN
assets/img/contact1.png
Datei anzeigen


BIN
assets/img/contact10.png
Datei anzeigen


BIN
assets/img/contact11.png
Datei anzeigen


BIN
assets/img/contact12.png
Datei anzeigen


BIN
assets/img/contact13.png
Datei anzeigen


BIN
assets/img/contact14.png
Datei anzeigen


BIN
assets/img/contact15.png
Datei anzeigen


BIN
assets/img/contact16.png
Datei anzeigen


BIN
assets/img/contact17.png
Datei anzeigen


BIN
assets/img/contact18.png
Datei anzeigen


BIN
assets/img/contact19.png
Datei anzeigen


BIN
assets/img/contact2.png
Datei anzeigen


BIN
assets/img/contact20.png
Datei anzeigen


BIN
assets/img/contact21.png
Datei anzeigen


BIN
assets/img/contact22.png
Datei anzeigen


BIN
assets/img/contact23.png
Datei anzeigen


BIN
assets/img/contact3.png
Datei anzeigen


BIN
assets/img/contact4.png
Datei anzeigen


BIN
assets/img/contact5.png
Datei anzeigen


BIN
assets/img/contact6.png
Datei anzeigen


BIN
assets/img/contact7.png
Datei anzeigen


BIN
assets/img/contact8.png
Datei anzeigen


BIN
assets/img/contact9.png
Datei anzeigen


+ 6 - 0
assets/img/ico--air1.svg
Datei anzeigen 

@@ -0,0 +1,6 @@
 
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M16.1733 19.381C17.1547 18.0222 18.328 16.8601 19.672 15.9177L16.344 12.4992L14.6373 10.7458L12.9093 12.4992L9.38933 16.1157L3.43467 10L0 13.5284L7.68133 21.3974L9.388 23.1724L11.116 21.3974L14.636 17.7809L16.172 19.381H16.1733Z" fill="#191919"/>
 
+<path d="M59.9998 50L55.4331 33.0795L53.2571 39.6765L46.0878 32.2903L40.8384 37.6601L40.3051 37.0906C39.3664 38.471 38.2358 39.6982 36.9131 40.6854L40.8384 44.7182L46.0878 39.3267L50.2064 43.5792L44.4664 46.1L59.9998 50.0013V50Z" fill="#191919"/>
 
+<path d="M28.0807 18.1307C22.5327 18.1307 18.0527 22.7548 18.0527 28.4541C18.0527 34.1535 22.5341 38.7559 28.0807 38.7559C33.6274 38.7559 38.1301 34.1535 38.1301 28.4541C38.1301 22.7548 33.6274 18.1307 28.0807 18.1307ZM29.1047 34.6349V35.9502H27.0781V34.6349C25.4141 34.3067 24.4114 33.0131 24.4114 30.975H26.8647C26.8647 31.9391 27.3341 32.3554 28.1021 32.3554C28.8701 32.3554 29.2754 31.8957 29.2754 31.2815C29.2754 29.2867 24.6661 29.0454 24.6661 25.3638C24.6661 23.8301 25.5407 22.6463 27.0767 22.2734V20.9364H29.1034V22.2734C30.6607 22.6463 31.5781 23.8518 31.5781 25.715H29.1247C29.1247 24.9258 28.7621 24.5312 28.0794 24.5312C27.4607 24.5312 27.0767 24.8824 27.0767 25.4302C27.0767 27.3368 31.7501 27.4466 31.7501 31.3045C31.7501 32.9697 30.7901 34.2417 29.1047 34.6363V34.6349Z" fill="#191919"/>
 
+<path d="M41.6511 28.4541C41.6511 20.7614 35.5698 14.5142 28.0804 14.5142C20.5911 14.5142 14.5098 20.76 14.5098 28.4541C14.5098 36.1482 20.5911 42.394 28.0804 42.394C35.5698 42.394 41.6511 36.1468 41.6511 28.4541ZM28.0804 39.6982C22.0418 39.6982 17.1351 34.6796 17.1351 28.4541C17.1351 22.2286 22.0431 17.1882 28.0804 17.1882C34.1178 17.1882 39.0471 22.2299 39.0471 28.4541C39.0471 34.6782 34.1391 39.6982 28.0804 39.6982Z" fill="#191919"/>
 
+</svg>

Datei-Diff unterdrückt, da er zu groß ist
+ 13 - 0
assets/img/ico--air2.svg


Datei-Diff unterdrückt, da er zu groß ist
+ 1 - 0
assets/img/ico--air3.svg


+ 15 - 0
assets/img/ico--air4.svg
Datei anzeigen 

@@ -0,0 +1,15 @@
 
+<svg width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<g clip-path="url(#clip0_141_285)">
 
+<path d="M57.6666 12.8411L35.759 0.178751C35.5566 0.0616818 35.324 0 35.0914 0C34.8588 0 34.6263 0.0616818 34.4239 0.178751L21.0273 7.92296L43.6 20.9731L57.6666 12.8411Z" fill="#191919"/>
 
+<path d="M36.303 25.1901L13.7303 12.1412L2.33398 18.7299L24.9067 31.78L36.303 25.1901Z" fill="#191919"/>
 
+<path d="M23.5727 37.048V34.0961L1 21.046V40.6659C1 41.1417 1.25646 41.5861 1.66756 41.824L14.5436 49.2661C14.1828 46.5861 14.2469 44.4146 14.2733 43.8318C14.3475 42.3527 15.2137 41.0422 16.5375 40.4065L23.1716 37.2104C23.3024 37.1487 23.4356 37.0933 23.5727 37.0468V37.048Z" fill="#191919"/>
 
+<path d="M44.9359 23.2893V33.8494C44.9359 34.3253 44.6819 34.7671 44.2683 35.0075L39.6432 37.6813C39.4345 37.7983 39.2057 37.86 38.9756 37.86C38.7455 37.86 38.513 37.7983 38.308 37.6813C37.8944 37.4408 37.6405 36.999 37.6405 36.5232V27.5063L26.2441 34.0949V37.0468C26.3799 37.0921 26.5169 37.1488 26.6477 37.213L33.2768 40.4028C34.6119 41.0524 35.4744 42.3653 35.5385 43.8394C35.5523 44.0773 35.6529 46.3671 35.2468 49.2812L58.3324 35.934C58.7435 35.6961 59 35.2518 59 34.7759V15.1573L44.9359 23.2893Z" fill="#191919"/>
 
+<path d="M40.3082 34.2083L42.2631 33.0766V23.2893L18.3553 9.46631L16.4004 10.598L40.3082 24.4172V34.2083Z" fill="#191919"/>
 
+<path d="M32.1161 42.8134L25.4845 39.6211C25.1187 39.4449 24.6937 39.4474 24.3279 39.6211L17.6963 42.8134C17.2525 43.0274 16.9646 43.4655 16.9407 43.9552C16.9143 44.5305 16.375 58.0564 24.6057 59.966C24.7051 59.9874 24.8031 60.0013 24.905 60.0013C25.0068 60.0013 25.1074 59.9874 25.2067 59.966C33.4349 58.0564 32.8981 44.5305 32.8692 43.9552C32.8478 43.4655 32.5562 43.0274 32.1161 42.8134ZM27.7437 50.3764L25.4493 52.6762C25.1878 52.9356 24.8459 53.0665 24.5039 53.0665C24.162 53.0665 23.82 52.9356 23.561 52.6762L22.0675 51.1808C21.547 50.6596 21.547 49.8112 22.0675 49.29C22.588 48.7689 23.4353 48.7689 23.9558 49.29L24.5027 49.8376L25.8541 48.4844C26.3746 47.9632 27.2219 47.9632 27.7424 48.4844C28.2629 49.0081 28.2629 49.854 27.7424 50.3751L27.7437 50.3764Z" fill="#191919"/>
 
+</g>
 
+<defs>
 
+<clipPath id="clip0_141_285">
 
+<rect width="60" height="60" fill="white"/>
 
+</clipPath>
 
+</defs>
 
+</svg>

+ 3 - 0
assets/img/ico--arrow--swiper.svg
Datei anzeigen 

@@ -0,0 +1,3 @@
 
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M11.2 19.4006L17.2 13.0006L11.2 6.60059" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+</svg>

+ 4 - 0
assets/img/ico--arrow--white.svg
Datei anzeigen 

@@ -0,0 +1,4 @@
 
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M2.91666 7.5H11.0833" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M7 3.41663L11.0833 7.49996L7 11.5833" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 
+</svg>

+ 4 - 0
assets/img/ico--arrow.svg
Datei anzeigen 

@@ -0,0 +1,4 @@
 
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M3.33334 8H12.6667" stroke="#EC3237" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M8 3.33331L12.6667 7.99998L8 12.6666" stroke="#EC3237" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 
+</svg>

+ 3 - 0
assets/img/ico--bubble.svg
Datei anzeigen 

@@ -0,0 +1,3 @@
 
+<svg width="21" height="26" viewBox="0 0 21 26" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M21 13L-1.14193e-06 25.1244L-8.1987e-08 0.875644L21 13Z" fill="#EC3237"/>
 
+</svg>

+ 4 - 0
assets/img/ico--close.svg
Datei anzeigen 

@@ -0,0 +1,4 @@
 
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M19.5 6.5L6.5 19.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M6.5 6.5L19.5 19.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+</svg>

+ 10 - 0
assets/img/ico--contact.svg
Datei anzeigen 

@@ -0,0 +1,10 @@
 
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<g clip-path="url(#clip0_20_90)">
 
+<path d="M15.6299 0.22168C15.8232 0.362305 15.9023 0.549805 15.8672 0.78418L13.6172 14.2842C13.5879 14.4541 13.4941 14.5859 13.3359 14.6797C13.2539 14.7266 13.1631 14.75 13.0635 14.75C12.999 14.75 12.9287 14.7354 12.8525 14.7061L8.87109 13.0801L6.74414 15.6729C6.63867 15.8076 6.49512 15.875 6.31348 15.875C6.2373 15.875 6.17285 15.8633 6.12012 15.8398C6.00879 15.7988 5.91943 15.73 5.85205 15.6333C5.78467 15.5366 5.75098 15.4297 5.75098 15.3125V12.2451L13.3447 2.9375L3.94922 11.0674L0.477539 9.64355C0.260742 9.56152 0.143555 9.40039 0.125977 9.16016C0.114258 8.92578 0.208008 8.75293 0.407227 8.6416L15.0322 0.204102C15.1201 0.151367 15.2139 0.125 15.3135 0.125C15.4307 0.125 15.5361 0.157227 15.6299 0.22168Z" fill="white"/>
 
+</g>
 
+<defs>
 
+<clipPath id="clip0_20_90">
 
+<rect width="15.75" height="15.75" fill="white" transform="translate(0.125 0.125)"/>
 
+</clipPath>
 
+</defs>
 
+</svg>

+ 3 - 0
assets/img/ico--global--arrow.svg
Datei anzeigen 

@@ -0,0 +1,3 @@
 
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M3.5 5L7 8.5L10.5 5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+</svg>

+ 7 - 0
assets/img/ico--global--black.svg
Datei anzeigen 

@@ -0,0 +1,7 @@
 
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M2 11.8462C2 17.369 6.47715 21.8462 12 21.8462C17.5228 21.8462 22 17.369 22 11.8462C22 6.3233 17.5228 1.84615 12 1.84615C6.47715 1.84615 2 6.3233 2 11.8462Z" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M13 1.89547C13 1.89547 16 5.84609 16 11.846C16 17.846 13 21.7967 13 21.7967" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M11 21.7967C11 21.7967 8 17.846 8 11.846C8 5.84609 11 1.89547 11 1.89547" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M2.62988 15.3462H21.3706" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M2.62988 8.34615H21.3706" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 
+</svg>

+ 7 - 0
assets/img/ico--global.svg
Datei anzeigen 

@@ -0,0 +1,7 @@
 
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M2 11.8462C2 17.369 6.47715 21.8462 12 21.8462C17.5228 21.8462 22 17.369 22 11.8462C22 6.3233 17.5228 1.84615 12 1.84615C6.47715 1.84615 2 6.3233 2 11.8462Z" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M13 1.89547C13 1.89547 16 5.84609 16 11.846C16 17.846 13 21.7967 13 21.7967" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M11 21.7967C11 21.7967 8 17.846 8 11.846C8 5.84609 11 1.89547 11 1.89547" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M2.62988 15.3462H21.3706" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M2.62988 8.34615H21.3706" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 
+</svg>

+ 6 - 0
assets/img/ico--header--black.svg
Datei anzeigen 

@@ -0,0 +1,6 @@
 
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M19.5 10.833H6.5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M22.75 6.5H3.25" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M22.75 15.167H3.25" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M19.5 19.5H6.5" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+</svg>

+ 6 - 0
assets/img/ico--header.svg
Datei anzeigen 

@@ -0,0 +1,6 @@
 
+<svg width="26" height="26" viewBox="0 0 26 26" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M19.5 10.833H6.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M22.75 6.5H3.25" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M22.75 15.167H3.25" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M19.5 19.5H6.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+</svg>

+ 4 - 0
assets/img/ico--home.svg
Datei anzeigen 

@@ -0,0 +1,4 @@
 
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M2.5 7.50002L10 1.66669L17.5 7.50002V16.6667C17.5 17.1087 17.3244 17.5326 17.0118 17.8452C16.6993 18.1578 16.2754 18.3334 15.8333 18.3334H4.16667C3.72464 18.3334 3.30072 18.1578 2.98816 17.8452C2.67559 17.5326 2.5 17.1087 2.5 16.6667V7.50002Z" stroke="#EC3237" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M7.5 18.3333V10H12.5V18.3333" stroke="#EC3237" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+</svg>

+ 11 - 0
assets/img/ico--map1.svg
Datei anzeigen 

@@ -0,0 +1,11 @@
 
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<g clip-path="url(#clip0_136_3)">
 
+<path d="M15.75 7.5C15.75 12.75 9 17.25 9 17.25C9 17.25 2.25 12.75 2.25 7.5C2.25 5.70979 2.96116 3.9929 4.22703 2.72703C5.4929 1.46116 7.20979 0.75 9 0.75C10.7902 0.75 12.5071 1.46116 13.773 2.72703C15.0388 3.9929 15.75 5.70979 15.75 7.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M9 9.75C10.2426 9.75 11.25 8.74264 11.25 7.5C11.25 6.25736 10.2426 5.25 9 5.25C7.75736 5.25 6.75 6.25736 6.75 7.5C6.75 8.74264 7.75736 9.75 9 9.75Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+</g>
 
+<defs>
 
+<clipPath id="clip0_136_3">
 
+<rect width="18" height="18" fill="white"/>
 
+</clipPath>
 
+</defs>
 
+</svg>

+ 10 - 0
assets/img/ico--map2.svg
Datei anzeigen 

@@ -0,0 +1,10 @@
 
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<g clip-path="url(#clip0_136_13)">
 
+<path d="M11.2771 4.76486C11.9926 4.90444 12.6501 5.25434 13.1655 5.76976C13.6809 6.28519 14.0308 6.94269 14.1704 7.65813M11.2771 1.83496C12.7635 2.00009 14.1496 2.66571 15.2078 3.72255C16.2659 4.77939 16.9333 6.16462 17.1003 7.6508M16.3678 13.4959V15.6934C16.3686 15.8974 16.3269 16.0993 16.2451 16.2862C16.1634 16.4731 16.0436 16.6409 15.8932 16.7788C15.7429 16.9167 15.5654 17.0217 15.3722 17.087C15.179 17.1524 14.9742 17.1767 14.771 17.1583C12.5171 16.9134 10.352 16.1432 8.44978 14.9096C6.67999 13.785 5.17953 12.2846 4.05493 10.5148C2.81704 8.6039 2.04667 6.4283 1.80624 4.16423C1.78793 3.96167 1.81201 3.75753 1.87692 3.56479C1.94184 3.37205 2.04618 3.19494 2.18329 3.04473C2.32041 2.89452 2.4873 2.77451 2.67333 2.69234C2.85937 2.61016 3.06048 2.56763 3.26386 2.56743H5.46128C5.81676 2.56394 6.16138 2.68982 6.4309 2.92161C6.70043 3.1534 6.87648 3.4753 6.92623 3.82729C7.01898 4.53051 7.19098 5.22099 7.43896 5.88554C7.53751 6.14771 7.55884 6.43264 7.50042 6.70656C7.442 6.98048 7.30628 7.23191 7.10935 7.43106L6.17911 8.3613C7.22182 10.1951 8.74017 11.7134 10.574 12.7561L11.5042 11.8259C11.7033 11.629 11.9548 11.4932 12.2287 11.4348C12.5026 11.3764 12.7875 11.3977 13.0497 11.4963C13.7143 11.7443 14.4047 11.9163 15.108 12.009C15.4638 12.0592 15.7887 12.2384 16.021 12.5126C16.2533 12.7868 16.3767 13.1367 16.3678 13.4959Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+</g>
 
+<defs>
 
+<clipPath id="clip0_136_13">
 
+<rect width="18" height="18" fill="white"/>
 
+</clipPath>
 
+</defs>
 
+</svg>

+ 12 - 0
assets/img/ico--map3.svg
Datei anzeigen 

@@ -0,0 +1,12 @@
 
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<g clip-path="url(#clip0_136_27)">
 
+<path d="M4.5 6.75V1.5H13.5V6.75" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M4.5 13.5H3C2.60218 13.5 2.22064 13.342 1.93934 13.0607C1.65804 12.7794 1.5 12.3978 1.5 12V8.25C1.5 7.85218 1.65804 7.47064 1.93934 7.18934C2.22064 6.90804 2.60218 6.75 3 6.75H15C15.3978 6.75 15.7794 6.90804 16.0607 7.18934C16.342 7.47064 16.5 7.85218 16.5 8.25V12C16.5 12.3978 16.342 12.7794 16.0607 13.0607C15.7794 13.342 15.3978 13.5 15 13.5H13.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M13.5 10.5H4.5V16.5H13.5V10.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+</g>
 
+<defs>
 
+<clipPath id="clip0_136_27">
 
+<rect width="18" height="18" fill="white"/>
 
+</clipPath>
 
+</defs>
 
+</svg>

+ 4 - 0
assets/img/ico--map4.svg
Datei anzeigen 

@@ -0,0 +1,4 @@
 
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M15 15.75V14.25C15 13.4544 14.6839 12.6913 14.1213 12.1287C13.5587 11.5661 12.7956 11.25 12 11.25H6C5.20435 11.25 4.44129 11.5661 3.87868 12.1287C3.31607 12.6913 3 13.4544 3 14.25V15.75" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M9 8.25C10.6569 8.25 12 6.90685 12 5.25C12 3.59315 10.6569 2.25 9 2.25C7.34315 2.25 6 3.59315 6 5.25C6 6.90685 7.34315 8.25 9 8.25Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+</svg>

+ 19 - 0
assets/img/ico--map5.svg
Datei anzeigen 

@@ -0,0 +1,19 @@
 
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<g clip-path="url(#clip0_136_49)">
 
+<path d="M9.40931 9.81836H8.59113C8.37414 9.81836 8.16603 9.90456 8.01259 10.058C7.85915 10.2114 7.77295 10.4195 7.77295 10.6365C7.77295 10.8535 7.85915 11.0616 8.01259 11.2151C8.16603 11.3685 8.37414 11.4547 8.59113 11.4547H9.40931C9.62631 11.4547 9.83442 11.3685 9.98785 11.2151C10.1413 11.0616 10.2275 10.8535 10.2275 10.6365C10.2275 10.4195 10.1413 10.2114 9.98785 10.058C9.83442 9.90456 9.62631 9.81836 9.40931 9.81836Z" fill="white"/>
 
+<path d="M9.40931 6.54541H8.59113C8.37414 6.54541 8.16603 6.63161 8.01259 6.78505C7.85915 6.93849 7.77295 7.1466 7.77295 7.36359C7.77295 7.58059 7.85915 7.78869 8.01259 7.94213C8.16603 8.09557 8.37414 8.18177 8.59113 8.18177H9.40931C9.62631 8.18177 9.83442 8.09557 9.98785 7.94213C10.1413 7.78869 10.2275 7.58059 10.2275 7.36359C10.2275 7.1466 10.1413 6.93849 9.98785 6.78505C9.83442 6.63161 9.62631 6.54541 9.40931 6.54541Z" fill="white"/>
 
+<path d="M9.40931 3.27295H8.59113C8.37414 3.27295 8.16603 3.35915 8.01259 3.51259C7.85915 3.66603 7.77295 3.87414 7.77295 4.09113C7.77295 4.30813 7.85915 4.51623 8.01259 4.66967C8.16603 4.82311 8.37414 4.90931 8.59113 4.90931H9.40931C9.62631 4.90931 9.83442 4.82311 9.98785 4.66967C10.1413 4.51623 10.2275 4.30813 10.2275 4.09113C10.2275 3.87414 10.1413 3.66603 9.98785 3.51259C9.83442 3.35915 9.62631 3.27295 9.40931 3.27295Z" fill="white"/>
 
+<path d="M6.13636 9.81836H5.31818C5.10119 9.81836 4.89308 9.90456 4.73964 10.058C4.5862 10.2114 4.5 10.4195 4.5 10.6365C4.5 10.8535 4.5862 11.0616 4.73964 11.2151C4.89308 11.3685 5.10119 11.4547 5.31818 11.4547H6.13636C6.35336 11.4547 6.56147 11.3685 6.71491 11.2151C6.86834 11.0616 6.95455 10.8535 6.95455 10.6365C6.95455 10.4195 6.86834 10.2114 6.71491 10.058C6.56147 9.90456 6.35336 9.81836 6.13636 9.81836Z" fill="white"/>
 
+<path d="M6.13636 6.54541H5.31818C5.10119 6.54541 4.89308 6.63161 4.73964 6.78505C4.5862 6.93849 4.5 7.1466 4.5 7.36359C4.5 7.58059 4.5862 7.78869 4.73964 7.94213C4.89308 8.09557 5.10119 8.18177 5.31818 8.18177H6.13636C6.35336 8.18177 6.56147 8.09557 6.71491 7.94213C6.86834 7.78869 6.95455 7.58059 6.95455 7.36359C6.95455 7.1466 6.86834 6.93849 6.71491 6.78505C6.56147 6.63161 6.35336 6.54541 6.13636 6.54541Z" fill="white"/>
 
+<path d="M6.13636 3.27295H5.31818C5.10119 3.27295 4.89308 3.35915 4.73964 3.51259C4.5862 3.66603 4.5 3.87414 4.5 4.09113C4.5 4.30813 4.5862 4.51623 4.73964 4.66967C4.89308 4.82311 5.10119 4.90931 5.31818 4.90931H6.13636C6.35336 4.90931 6.56147 4.82311 6.71491 4.66967C6.86834 4.51623 6.95455 4.30813 6.95455 4.09113C6.95455 3.87414 6.86834 3.66603 6.71491 3.51259C6.56147 3.35915 6.35336 3.27295 6.13636 3.27295Z" fill="white"/>
 
+<path d="M12.6818 9.81836H11.8636C11.6466 9.81836 11.4385 9.90456 11.2851 10.058C11.1316 10.2114 11.0454 10.4195 11.0454 10.6365C11.0454 10.8535 11.1316 11.0616 11.2851 11.2151C11.4385 11.3685 11.6466 11.4547 11.8636 11.4547H12.6818C12.8988 11.4547 13.1069 11.3685 13.2603 11.2151C13.4138 11.0616 13.5 10.8535 13.5 10.6365C13.5 10.4195 13.4138 10.2114 13.2603 10.058C13.1069 9.90456 12.8988 9.81836 12.6818 9.81836Z" fill="white"/>
 
+<path d="M12.6818 6.54541H11.8636C11.6466 6.54541 11.4385 6.63161 11.2851 6.78505C11.1316 6.93849 11.0454 7.1466 11.0454 7.36359C11.0454 7.58059 11.1316 7.78869 11.2851 7.94213C11.4385 8.09557 11.6466 8.18177 11.8636 8.18177H12.6818C12.8988 8.18177 13.1069 8.09557 13.2603 7.94213C13.4138 7.78869 13.5 7.58059 13.5 7.36359C13.5 7.1466 13.4138 6.93849 13.2603 6.78505C13.1069 6.63161 12.8988 6.54541 12.6818 6.54541Z" fill="white"/>
 
+<path d="M12.6818 3.27295H11.8636C11.6466 3.27295 11.4385 3.35915 11.2851 3.51259C11.1316 3.66603 11.0454 3.87414 11.0454 4.09113C11.0454 4.30813 11.1316 4.51623 11.2851 4.66967C11.4385 4.82311 11.6466 4.90931 11.8636 4.90931H12.6818C12.8988 4.90931 13.1069 4.82311 13.2603 4.66967C13.4138 4.51623 13.5 4.30813 13.5 4.09113C13.5 3.87414 13.4138 3.66603 13.2603 3.51259C13.1069 3.35915 12.8988 3.27295 12.6818 3.27295Z" fill="white"/>
 
+<path d="M17.1818 16.3636H16.3636V0.818182C16.3636 0.601187 16.2774 0.393079 16.124 0.23964C15.9706 0.086201 15.7625 0 15.5455 0H2.45455C2.23755 0 2.02944 0.086201 1.876 0.23964C1.72256 0.393079 1.63636 0.601187 1.63636 0.818182V16.3636H0.818182C0.601187 16.3636 0.393079 16.4498 0.23964 16.6033C0.086201 16.7567 0 16.9648 0 17.1818C0 17.3988 0.086201 17.6069 0.23964 17.7604C0.393079 17.9138 0.601187 18 0.818182 18H17.1818C17.3988 18 17.6069 17.9138 17.7604 17.7604C17.9138 17.6069 18 17.3988 18 17.1818C18 16.9648 17.9138 16.7567 17.7604 16.6033C17.6069 16.4498 17.3988 16.3636 17.1818 16.3636ZM7.36364 16.3636V14.7273H10.6364V16.3636H7.36364ZM12.2727 16.3636V13.9091C12.2727 13.6921 12.1865 13.484 12.0331 13.3305C11.8796 13.1771 11.6715 13.0909 11.4545 13.0909H6.54545C6.32846 13.0909 6.12035 13.1771 5.96691 13.3305C5.81347 13.484 5.72727 13.6921 5.72727 13.9091V16.3636H3.27273V1.63636H14.7273V16.3636H12.2727Z" fill="white"/>
 
+</g>
 
+<defs>
 
+<clipPath id="clip0_136_49">
 
+<rect width="18" height="18" fill="white"/>
 
+</clipPath>
 
+</defs>
 
+</svg>

+ 4 - 0
assets/img/ico--quick1--white.svg
Datei anzeigen 

@@ -0,0 +1,4 @@
 
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<rect x="4" y="4" width="22" height="22" rx="4" stroke="white" stroke-width="2"/>
 
+<path d="M4.28516 12L13.3385 15.2592C14.4133 15.6461 15.5882 15.6534 16.6676 15.2797L26.1423 12" stroke="white" stroke-width="2"/>
 
+</svg>

+ 4 - 0
assets/img/ico--quick1.svg
Datei anzeigen 

@@ -0,0 +1,4 @@
 
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<rect x="4" y="4" width="22" height="22" rx="4" stroke="#2A2B32" stroke-width="2"/>
 
+<path d="M4.28516 12L13.3385 15.2592C14.4133 15.6461 15.5882 15.6534 16.6676 15.2797L26.1423 12" stroke="#2A2B32" stroke-width="2"/>
 
+</svg>

+ 7 - 0
assets/img/ico--quick2--white.svg
Datei anzeigen 

@@ -0,0 +1,7 @@
 
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M3 15.5C3 22.4035 8.59644 28 15.5 28C22.4035 28 28 22.4035 28 15.5C28 8.59644 22.4035 3 15.5 3C8.59644 3 3 8.59644 3 15.5Z" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M16.75 3.06165C16.75 3.06165 20.5 7.99992 20.5 15.4999C20.5 22.9999 16.75 27.9382 16.75 27.9382" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M14.25 27.9382C14.25 27.9382 10.5 22.9999 10.5 15.4999C10.5 7.99992 14.25 3.06165 14.25 3.06165" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M3.78711 19.875H27.2131" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M3.78711 11.125H27.2131" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+</svg>

+ 7 - 0
assets/img/ico--quick2.svg
Datei anzeigen 

@@ -0,0 +1,7 @@
 
+<svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M3 15.5C3 22.4035 8.59644 28 15.5 28C22.4035 28 28 22.4035 28 15.5C28 8.59644 22.4035 3 15.5 3C8.59644 3 3 8.59644 3 15.5Z" stroke="#36373F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M16.75 3.06165C16.75 3.06165 20.5 7.99992 20.5 15.4999C20.5 22.9999 16.75 27.9382 16.75 27.9382" stroke="#36373F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M14.25 27.9382C14.25 27.9382 10.5 22.9999 10.5 15.4999C10.5 7.99992 14.25 3.06165 14.25 3.06165" stroke="#36373F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M3.78711 19.875H27.2131" stroke="#36373F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+<path d="M3.78711 11.125H27.2131" stroke="#36373F" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+</svg>

+ 6 - 0
assets/img/ico--quick3.svg
Datei anzeigen 

@@ -0,0 +1,6 @@
 
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+  <g transform="rotate(-45 12 12)">
 
+    <path d="M12 19V5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+    <path d="M5 12L12 5L19 12" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+  </g>
 
+</svg>

+ 3 - 0
assets/img/ico--select--black.svg
Datei anzeigen 

@@ -0,0 +1,3 @@
 
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M4 6L8 10L12 6" stroke="#333333" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
 
+</svg>

+ 3 - 0
assets/img/ico--select.svg
Datei anzeigen 

@@ -0,0 +1,3 @@
 
+<svg width="14" height="15" viewBox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
 
+<path d="M3.5 5.75L7 9.25L10.5 5.75" stroke="#ACACAC" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
 
+</svg>

BIN
assets/img/img--org.png
Datei anzeigen


Datei-Diff unterdrückt, da er zu groß ist
+ 10 - 0
assets/img/logo--default.svg


Datei-Diff unterdrückt, da er zu groß ist
+ 17 - 0
assets/img/logo--white.svg


BIN
assets/img/main--1.png
Datei anzeigen


BIN
assets/img/main--2.png
Datei anzeigen


BIN
assets/img/main--3.png
Datei anzeigen


BIN
assets/img/main--4.png
Datei anzeigen


BIN
assets/img/main--5.png
Datei anzeigen


BIN
assets/img/main--6.png
Datei anzeigen


BIN
assets/img/main--contact--mo.png
Datei anzeigen


BIN
assets/img/main--contact.png
Datei anzeigen


Datei-Diff unterdrückt, da er zu groß ist
+ 3 - 0
assets/img/main--map.svg


BIN
assets/img/sub--1.png
Datei anzeigen


BIN
assets/img/sub--2.png
Datei anzeigen


+ 849 - 0
assets/scss/media.scss
Datei anzeigen 

@@ -0,0 +1,849 @@
 
+@media(max-width: 1800px){
 
+  .container{
 
+    .image--section{
 
+      .section--container{
 
+        .contact--wrap{
 
+          .contact--form{
 
+            padding: 40px 50px;
 
+            .contact--tit{
 
+              h3{
 
+                font-size: 28px;
 
+                margin-bottom: 10px;
 
+              }
 
+            }
 
+            .contact--cont{
 
+              gap: 20px;
 
+              height: calc(100% - 100px);
 
+              .input--wrap{
 
+                gap: 10px;
 
+                select{
 
+                  padding: 15px;
 
+                }
 
+                input{
 
+                  padding: 15px;
 
+                }
 
+                textarea{
 
+                  padding: 15px;
 
+                }
 
+              }
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+@media(max-width: 1600px){
 
+  .header--wrap{
 
+    .header--inner{
 
+      padding: 0 20px;
 
+      .header--nav{
 
+        >ul{
 
+          >li{
 
+            >a{
 
+              padding: 30px 50px;
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+  .container{
 
+    .image--section {
 
+      .main--swiper {
 
+        .swiper-slide {
 
+          .txt--wrap{
 
+            padding: 0 20px;
 
+          }
 
+        }
 
+        .main--swiper--tab{
 
+          .tab--wrap{
 
+            padding: 50px 20px 30px;
 
+            .tab--inner{
 
+              dt{
 
+                font-size: 16px;
 
+              }
 
+            }
 
+          }
 
+        }
 
+      }
 
+      .section--container{
 
+        .text--wrap{
 
+          padding: 0 20px;
 
+        }
 
+        .contact--wrap{
 
+          padding: 0 20px;
 
+          .contact--form{
 
+            padding: 40px;
 
+          }
 
+          .location--group{
 
+            width: 55%;
 
+          }
 
+          .contact--form{
 
+            width: calc(45% - 30px);
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+  main{
 
+    .sub--visual--wrap{
 
+      .visual--txt--wrap{
 
+        bottom: -7px;
 
+        padding: 0 20px;
 
+        h2{
 
+          font-size: 72px;
 
+        }
 
+      }
 
+    }
 
+    .sub--menu--wrap{
 
+      padding: 80px 20px;
 
+      p{
 
+        font-size: 14px;
 
+      }
 
+    }
 
+    .sub--container{
 
+      padding: 0 20px;
 
+      .sub--title--wrap{
 
+        .sub--title{
 
+          &.type--2{
 
+            font-size: 36px;
 
+          }
 
+        }
 
+      }
 
+      .sub--cont--wrap{
 
+        margin-bottom: 80px;
 
+        .sub--point{
 
+          margin-top: 80px;
 
+        }
 
+        .sub--desc{
 
+          br{
 
+            display: none;
 
+          }
 
+        }
 
+      }
 
+      .org--wrap{
 
+        .org--cont{
 
+          .org--mid{
 
+            .org--group--box{
 
+              width: 100%;
 
+              margin-bottom: 20px;
 
+            }
 
+            .org--group{
 
+              &:nth-of-type(2){
 
+                margin-left: 20px;
 
+              }
 
+            }
 
+            .org--group{
 
+              .org--line{
 
+                &.none--circle{
 
+                  &::before{
 
+                    display: block;
 
+                  }
 
+                  &::after{
 
+                    display: block;
 
+                    left: -12px;
 
+                  }
 
+                }
 
+              }
 
+            }
 
+            .org--line{
 
+              &::before{
 
+                left: 0;
 
+                right: auto;
 
+              }
 
+              &::after{
 
+                left: -12px;
 
+                right: auto;
 
+              }
 
+              &.type--1{
 
+                display: none;
 
+              }
 
+              &.bottom--type{
 
+                display: none;
 
+              }
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+    .quick--menu--wrap{
 
+      right: 20px;
 
+    }
 
+  }
 
+}
 
+
 
+@media(max-width: 1264px){
 
+  .container{
 
+    .image--section{
 
+      .section--container{
 
+        .map--wrap{
 
+          justify-content: center;
 
+          .map--img{
 
+            img{
 
+              width: auto;
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+@media(max-width: 1240px){
 
+  .header--wrap{
 
+    // &:hover{
 
+    //   background-color: #101014;
 
+    //   .header--inner{
 
+    //     .header--logo{
 
+    //       background-image: url(../img/logo--default.svg)!important;
 
+    //     }
 
+    //   }
 
+    // }
 
+    .header--inner{
 
+      height: 80px;
 
+      .header--nav{
 
+        display: none;
 
+      }
 
+      .header--mob--btn{
 
+        display: block;
 
+      }
 
+      .header--lang--btn{
 
+        display: none;
 
+      }
 
+      .header--mob--lang--btn{
 
+        display: block;
 
+      }
 
+    }
 
+  }
 
+  .footer--wrap{
 
+    position: static;
 
+    padding: 40px 20px;
 
+    font-size: 13px;
 
+  }
 
+  .container{
 
+    .image--section{
 
+      height: auto;
 
+      position: static;
 
+      &.global--section{
 
+        .section--container{
 
+          display: flex;
 
+          flex-direction: column-reverse;
 
+        }
 
+      }
 
+      &.contact--section{
 
+        background-image: url(../img/main--contact--mo.png);
 
+        background-position: bottom;
 
+        background-size: 100%;
 
+        background-repeat: no-repeat;
 
+        background-color: #15161a;
 
+      }
 
+      .main--swiper{
 
+        .swiper-slide{
 
+          .txt--wrap{
 
+            >h2{
 
+              font-size: 72px;
 
+            }
 
+          }
 
+        }
 
+        .main--swiper--tab{
 
+          display: none;
 
+        }
 
+        .swiper--btn--wrap{
 
+          display: block;
 
+          .swiper-button-next,
 
+          .swiper-button-prev{
 
+            display: block;
 
+          } 
+        }
 
+        .swiper--pag--wrap{
 
+          display: block;
 
+        }
 
+      }
 
+      .section--container{
 
+        .map--wrap{
 
+          position: static;
 
+          padding-bottom: 80px;
 
+          .map--img{
 
+            width: 100%;
 
+            display: flex;
 
+            justify-content: center;
 
+          }
 
+          .map--dot--box{
 
+            display: flex;
 
+            align-items: center;
 
+            .map--dots{
 
+              padding: 20px;
 
+              height: auto;
 
+              display: flex;
 
+              justify-content: center;
 
+              align-items: center;
 
+              flex-wrap: wrap;
 
+              gap: 25px;
 
+              .dot{
 
+                position: static;
 
+              }
 
+            }
 
+          }
 
+        }
 
+        .text--wrap{
 
+          padding-top: 100px;
 
+          padding-bottom: 70px;
 
+          position: static;
 
+          >h3{
 
+            color: #fff;
 
+            font-size: 40px;
 
+            margin-bottom: 25px;
 
+          }
 
+          >h4{
 
+            margin-bottom: 30px;
 
+          }
 
+          >p{
 
+            margin-bottom: 50px;
 
+          }
 
+        }
 
+        .contact--wrap{
 
+          padding: 100px 20px 80px;
 
+          flex-direction: column;
 
+          align-items: start;
 
+          color: #fff;
 
+          .location--group{
 
+            display: none;
 
+          }
 
+          .contact--tit--mo{
 
+            word-break: keep-all;
 
+            margin-bottom: 50px;
 
+            display: block;
 
+            >h3{
 
+              font-size: 40px;
 
+              margin-bottom: 25px;
 
+              font-weight: 800;
 
+              text-transform: uppercase;
 
+              letter-spacing: -0.8px;
 
+            }
 
+            p{
 
+              font-weight: 400;
 
+              font-size: 17px;
 
+              letter-spacing: -0.34px;
 
+            }
 
+          }
 
+          .contact--form{
 
+            width: 100%;
 
+            padding: 35px 25px;
 
+            margin-bottom: 30px;
 
+            height: auto;
 
+            .contact--tit{
 
+              display: none;
 
+            }
 
+            .contact--cont{
 
+              height: auto;
 
+              gap: 35px;
 
+              .input--wrap{
 
+                gap: 18px;
 
+                select{
 
+                  padding: 20px;
 
+                }
 
+                input{
 
+                  padding: 20px;
 
+                }
 
+                textarea{
 
+                  padding: 20px;
 
+                }
 
+              }
 
+            }
 
+          }
 
+          .contact--btn--mo{
 
+            display: block;
 
+            width: 100%;
 
+            button{
 
+              cursor: pointer;
 
+              font-size: 18px;
 
+              color: #fff;
 
+              font-weight: 500;
 
+              justify-content: center;
 
+              align-items: center;
 
+              display: flex;
 
+              gap: 15px;
 
+              border: none;
 
+              border-radius: 15px;
 
+              background-color: #EC3237;
 
+              width: 100%;
 
+              padding: 30px;
 
+              .ico{
 
+                width: 16px;
 
+                height: 16px;
 
+                background-repeat: no-repeat;
 
+                display: block;
 
+                background-image: url(../img/ico--contact.svg);
 
+                background-position: center;
 
+              }
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+  main{
 
+    .sub--visual--wrap{
 
+      .visual--wrap{
 
+        height: 500px;
 
+        img{
 
+          height: 100%;
 
+          object-fit: cover;
 
+        }
 
+      }
 
+      .visual--txt--wrap{
 
+        bottom: -9px;
 
+        h2{
 
+          font-size: 60px;
 
+        }
 
+      }
 
+    }
 
+    .sub--container{
 
+      .sub--cont--wrap{
 
+        .sub--desc{
 
+          font-size: 15px;
 
+        }
 
+        .sub--point{
 
+          .point--box{
 
+            width: calc((100% - 60px) / 4);
 
+            padding: 30px;
 
+            .ico{
 
+              margin-bottom: 20px;
 
+            }
 
+            h5{
 
+              font-size: 18px;
 
+              margin-bottom: 15px;
 
+            }
 
+            p{
 
+              font-size: 14px;
 
+            }
 
+          }
 
+        }
 
+        .map--wrap{
 
+          height: 400px;
 
+        }
 
+        .map--desc{
 
+          margin-top: 40px;
 
+          h4{
 
+            font-size: 24px;
 
+            margin-bottom: 30px;
 
+          }
 
+          ul{
 
+            gap: 20px;
 
+            li{
 
+              font-size: 15px;
 
+            }
 
+          }
 
+        }
 
+      }
 
+      .grt--wrap{
 
+        margin-bottom: 80px;
 
+        .grt--part{
 
+          align-items: flex-start;
 
+          .grt--title{
 
+            .grt--year{
 
+              width: 200px;
 
+              .grt--txt{
 
+                left: calc(100% + 20px);
 
+                right: auto;;
 
+              }
 
+            }
 
+            h4{
 
+              font-size: 20px;
 
+              text-align: center;
 
+            }
 
+          }
 
+          .grt--desc{
 
+            padding-left: 97px;
 
+            width: 100%;
 
+          }
 
+        }
 
+      }
 
+      .org--wrap{
 
+        .org--cont{
 
+          .org--mid{
 
+            .org--group{
 
+              padding-bottom: 50px;
 
+              width: calc(50% - 10px);
 
+              padding-right: 0;
 
+              &:nth-of-type(4){
 
+                margin-left: 20px;
 
+              }
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+    .quick--menu--wrap{
 
+      width: 60px;
 
+      gap: 10px;
 
+      >div{
 
+        width: 60px;
 
+        height: 60px;
 
+        background-size: 26px 26px;
 
+        background-color: rgba(255, 255, 255, 0.70);
 
+      }
 
+      >button{
 
+        margin-top: 10px;
 
+        background-size: 20px 20px;
 
+        width: 60px;
 
+        height: 60px;
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+@media(max-width: 1000px){
 
+  main{
 
+    .sub--container{
 
+      .sub--title--wrap{
 
+        .sub--title{
 
+          font-size: 40px;
 
+          &.type--2{
 
+            font-size: 30px;
 
+          }
 
+        }
 
+      }
 
+      .sub--cont--wrap{
 
+        .sub--point{
 
+          margin-top: 50px;
 
+          row-gap: 20px;
 
+          .point--box{
 
+            padding: 20px;
 
+            width: calc(50% - 10px);
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+@media(max-width: 767px){
 
+  .container{
 
+    .image--section{
 
+      .section--container{
 
+        .contact--wrap{
 
+          .contact--form{
 
+            .contact--cont{
 
+              .input--type2--wrap{
 
+                flex-direction: column;
 
+                .input--wrap{
 
+                  width: 100%;
 
+                }
 
+              }
 
+            }
 
+          }
 
+        }
 
+      }
 
+      .main--swiper{
 
+        .swiper-slide{
 
+          .txt--wrap{
 
+            top: 50%;
 
+            transform: translate(-50%, -50%);
 
+            >span{
 
+              font-size: 16px;
 
+              margin-bottom: 20px;
 
+            }
 
+            >h2{
 
+              font-size: 55px;
 
+              margin-bottom: 35px;
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+  main{
 
+    .sub--visual--wrap{
 
+      .visual--wrap{
 
+        .op--65{
 
+          object-position: 65%;
 
+        }
 
+      }
 
+      .visual--txt--wrap{
 
+        h2{
 
+          .mo{
 
+            display: block;
 
+          }
 
+        }
 
+      }
 
+    }
 
+    .sub--menu--wrap{
 
+      padding: 40px 20px;
 
+    }
 
+    .sub--container{
 
+      .sub--title--wrap{
 
+        flex-direction: column;
 
+        align-items: center;
 
+        margin-bottom: 30px;
 
+        .sub--title{
 
+          &.type--2{
 
+            font-size: 28px;
 
+            letter-spacing: -0.32px;
 
+          }
 
+          &.web{
 
+            display: none;
 
+          }
 
+          &.mo{
 
+            display: inline-block;
 
+            width: fit-content;
 
+          }
 
+        }
 
+      }
 
+      .sub--cont--wrap{
 
+        .map--desc{
 
+          h4{
 
+            font-size: 20px;
 
+          }
 
+          ul{
 
+            li{
 
+              width: 100%!important;
 
+              .ico{
 
+                background-size: 14px 14px;
 
+                width: 30px;
 
+                height: 30px;
 
+                min-width: 30px;
 
+              }
 
+            }
 
+          }
 
+        }
 
+      }
 
+      .grt--wrap{
 
+        .grt--part{
 
+          margin-bottom: 70px;
 
+          &:last-child{
 
+            margin-bottom: 0;
 
+          }
 
+          .grt--title{
 
+            margin: 0 auto;
 
+            padding-bottom: 60px;
 
+            .grt--year{
 
+              padding: 25px 30px;
 
+              width: auto;
 
+              .grt--txt{
 
+                transform: translateX(-50%);
 
+                left: 50%;
 
+                top: auto;
 
+                bottom: -36px;
 
+                font-weight: 700;
 
+                font-size: 16px;
 
+              }
 
+              .title--line{
 
+                display: none;
 
+              }
 
+            }
 
+          }
 
+          .grt--desc{
 
+            padding-left: 0;
 
+            .desc{
 
+              .desc--txt{
 
+                padding-left: 0px;
 
+                padding-bottom: 50px;
 
+                gap: 35px;
 
+                .desc--year{
 
+                  font-size: 22px;
 
+                }
 
+                ul{
 
+                  li{
 
+                    flex-direction: column;
 
+                    gap: 20px;
 
+                    &.active{
 
+                      .circle{
 
+                        background-color: #EC3237;
 
+                      }
 
+                    }
 
+                    .circle{
 
+                      display: inline-block;
 
+                      background-color: #ccc;
 
+                      transition: all 0.3s;
 
+                      width: 8px;
 
+                      margin-right: 15px;
 
+                      height: 8px;
 
+                      border-radius: 50%;
 
+                      vertical-align: 2px;
 
+                    }
 
+                    >p{
 
+                      padding-left: 24px;
 
+                    }
 
+                  }
 
+                }
 
+              }
 
+              .desc--line{
 
+                display: none;
 
+              }
 
+            }
 
+          }
 
+        }
 
+      }
 
+      .org--wrap{
 
+        padding-top: 50px;
 
+        >h3{
 
+          font-size: 30px;
 
+          font-weight: 700;
 
+          margin-bottom: 40px;
 
+        }
 
+        .org--cont{
 
+          .org--top{
 
+            .ceo--circle{
 
+              min-width: 120px;
 
+              width: 120px;
 
+              height: 120px;
 
+            }
 
+            .ceo--line{
 
+              &.bottom--type{
 
+                left: 60px;
 
+              }
 
+            }
 
+          }
 
+          .org--mid{
 
+            .org--group{
 
+              padding-bottom: 30px;
 
+              width: 100%;
 
+              margin-left: 20px!important;
 
+              .org--list{
 
+                &.w--240{
 
+                  li{
 
+                    width: 100%;
 
+                  }
 
+                }
 
+                li{
 
+                  width: 100%;
 
+                }
 
+              }
 
+            }
 
+          }
 
+          .org--group--box{
 
+            .org--box{
 
+              width: 100%;
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+@media(max-width: 500px){
 
+  .container{
 
+    .image--section{
 
+      .section--container{
 
+        .map--wrap{
 
+          .map--dot--box{
 
+            .map--dots{
 
+              gap: 15px;
 
+              .dot{
 
+                width: 150px;
 
+                height: 150px;
 
+              }
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+  main{
 
+    .sub--menu--wrap{
 
+      &.web{
 
+        display: none;
 
+      }
 
+      &.mo{
 
+        display: block;
 
+      }
 
+    }
 
+    .sub--visual--wrap{
 
+      .visual--txt--wrap{
 
+        bottom: -7px;
 
+        h2{
 
+          font-size: 48px;
 
+        }
 
+      }
 
+    }
 
+    .sub--container{
 
+      .sub--cont--wrap{
 
+        .sub--point{
 
+          .point--box{
 
+            width: 100%;
 
+            padding: 30px;
 
+          }
 
+        }
 
+      }
 
+      .org--wrap{
 
+        .org--cont{
 
+          .org--top{
 
+            margin-bottom: 170px;
 
+            .ceo--line{
 
+              &.right--type{
 
+                top: 180px;
 
+                position: absolute;
 
+                width: 90px;
 
+                left: 60px;
 
+              }
 
+              &.bottom--type{
 
+                height: 170px;
 
+              }
 
+            }
 
+            .ceo--circle{
 
+              &.type--2{
 
+                left: 150px;
 
+                top: 120px;
 
+                position: absolute;
 
+              }
 
+              &.type--3{
 
+                top: 120px;
 
+                position: absolute;
 
+                left: 270px;
 
+              }
 
+            }
 
+          }
 
+          .org--mid{
 
+            .org--group--box{
 
+              .org--box{
 
+                height: auto;
 
+                padding: 25px 25px;
 
+              }
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+@media(max-width: 420px){
 
+  main{
 
+    .sub--container{
 
+      .org--wrap{
 
+        .org--cont{
 
+          .org--top{
 
+            margin-bottom: 150px;
 
+            .ceo--circle{
 
+              height: 100px;
 
+              min-width: 100px;
 
+              width: 100px;
 
+              &.type--2{
 
+                top: 100px;
 
+                left: 140px;
 
+              }
 
+              &.type--3{
 
+                top: 100px;
 
+                left: 240px;
 
+              }
 
+            }
 
+            .ceo--line{
 
+              &.bottom--type{
 
+                height: 150px;
 
+                left: 50px;
 
+              }
 
+              &.right--type{
 
+                left: 50px;
 
+                top: 150px;
 
+              }
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+}

+ 1011 - 0
assets/scss/style.scss
Datei anzeigen 

@@ -0,0 +1,1011 @@
 
+@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
 
+
 
+// 스크롤바 스타일 - 검정색
 
+::-webkit-scrollbar {
 
+  width: 12px;
 
+}
 
+
 
+::-webkit-scrollbar-track {
 
+  background: #000;
 
+  border-radius: 6px;
 
+}
 
+
 
+::-webkit-scrollbar-thumb {
 
+  background: #333;
 
+  border-radius: 6px;
 
+}
 
+
 
+::-webkit-scrollbar-thumb:hover {
 
+  background: #555;
 
+}
 
+
 
+html{
 
+  &:has(.header--mob--wrap.active){
 
+    overflow: hidden;
 
+  }
 
+  &:has(.header--mob--lang--wrap.active){
 
+    overflow: hidden;
 
+  }
 
+}
 
+
 
+* {
 
+  font-family: 'pretendard';
 
+  margin: 0;
 
+  padding: 0;
 
+  box-sizing: border-box;
 
+}
 
+
 
+.header--wrap{
 
+  position: fixed;
 
+  top: 0;
 
+  left: 0;
 
+  width: 100%;
 
+  z-index: 100;
 
+  transition: background-color 0.3s ease;
 
+  &:hover{
 
+    background-color: #fff;
 
+    .header--inner{
 
+      .header--logo{
 
+        background-image: url(../img/logo--white.svg);
 
+      }
 
+      &:has(.header--mob--lang--btn.active){
 
+        .header--logo{
 
+          background-image: url(../img/logo--default.svg);
 
+        }
 
+      }
 
+      &:has(.header--mob--btn.active){
 
+        .header--logo{
 
+          background-image: url(../img/logo--default.svg);
 
+        }
 
+      }
 
+      .header--mob--lang--btn{
 
+        background-image: url(../img/ico--global--black.svg);
 
+      }
 
+      .header--mob--btn{
 
+        background-image: url(../img/ico--header--black.svg);
 
+      }
 
+      .header--nav{
 
+        >ul{
 
+          >li{
 
+            >a{
 
+              color: #000;
 
+            }
 
+          }
 
+        }
 
+      }
 
+      .header--lang--btn{
 
+        background-color: #EC3237;
 
+      }
 
+    }
 
+  }
 
+  .header--inner{
 
+    max-width: 1600px;
 
+    width: 100%;
 
+    margin: 0 auto;
 
+    display: flex;
 
+    justify-content: space-between;
 
+    position: relative;
 
+    align-items: center;
 
+    .header--logo{
 
+      display: flex;
 
+      align-items: center;
 
+      max-width: 290px;
 
+      min-width: 191px;
 
+      width: 30%;
 
+      z-index: 100;
 
+      height: 55px;
 
+      // transition: all 0.3s;
 
+      background-size: 100%;
 
+      background-position: center;
 
+      background-repeat: no-repeat;
 
+      background-image: url(../img/logo--default.svg);
 
+    }
 
+    .header--nav{
 
+      >ul{
 
+        list-style: none;
 
+        display: flex;
 
+        >li{
 
+          position: relative;
 
+          >a{
 
+            transition: all 0.3s;
 
+            display: inline-block;
 
+            text-transform: uppercase;
 
+            padding: 40px 75px;
 
+            text-decoration: none;
 
+            font-size: 17px;
 
+            font-weight: 700;
 
+            color: #fff;
 
+          }
 
+          &:hover{
 
+            .sub--nav--wrap{
 
+              max-height: 400px;
 
+            }
 
+            &:nth-child(3){
 
+              .sub--nav--wrap{
 
+                max-height: 800px;
 
+                transition: max-height 0.9s cubic-bezier(0.4, 0, 0.2, 1);
 
+              }
 
+            }
 
+          }
 
+          .sub--nav--wrap{
 
+            max-height: 0;
 
+            transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2,        
+  1);
 
+            position: absolute;
 
+            display: flex;
 
+            left: 50%;
 
+            transform: translateX(-50%);
 
+            white-space: nowrap;
 
+            background-color: #fff;
 
+            overflow: hidden;
 
+            .sub--nav{
 
+              padding: 35px 30px;
 
+              display: flex;
 
+              flex-direction: column;
 
+              gap: 25px;
 
+              >a{
 
+                display: inline-block; 
+                font-weight: 400;
 
+                color: #111;
 
+                text-transform: capitalize;
 
+                font-size: 16px;
 
+                line-height: 1.4;
 
+                text-decoration: none;
 
+                transition: all 0.3s;
 
+                &:hover{
 
+                  color: #EC3237;
 
+                  font-weight: 500;
 
+                }
 
+              }
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+    .header--lang--btn{
 
+      display: flex;
 
+      align-items: center;
 
+      width: 130px;
 
+      color: #fff;
 
+      transition: all 0.3s;
 
+      cursor: pointer;
 
+      font-size: 17px;
 
+      font-weight: 700;
 
+      text-transform: uppercase;
 
+      padding: 38px 20px;
 
+      position: relative;
 
+      &:hover{
 
+        .lang--select--wrap{
 
+          height: 190px;
 
+          border-top: 1px solid #FB484D;
 
+        }
 
+      }
 
+      i{
 
+        display: inline-block;
 
+        background-repeat: no-repeat;
 
+        background-size: 100%;
 
+        background-position: center;
 
+      }
 
+      .ico--global{
 
+        width: 24px;
 
+        margin-right: 10px;
 
+        height: 24px;
 
+        background-image: url(../img/ico--global.svg);
 
+      }
 
+      .ico--arrow{
 
+        margin-left: auto;
 
+        width: 14px;
 
+        height: 14px;
 
+        background-image: url(../img/ico--global--arrow.svg);
 
+      }
 
+      .lang--select--wrap{
 
+        height: 0;
 
+        overflow: hidden;
 
+        position: absolute;
 
+        background: #EC3237;
 
+        top: 100%;
 
+        left: 0;
 
+        transition: height 0.3s;
 
+        width: 100%;
 
+        display: flex;
 
+        flex-direction: column;
 
+        align-items: center;
 
+        list-style: none;
 
+        li{
 
+          width: 100%;
 
+          transition: all 0.3s;
 
+          text-align: center;
 
+          a{
 
+            padding:  10px 0;
 
+            width: 100%;
 
+            color: #fff;
 
+            display: inline-block;
 
+            text-decoration: none;
 
+            font-size: 17px;
 
+            font-weight: 700;
 
+          }
 
+          &:first-child{
 
+            a{
 
+              padding-top: 25px;
 
+            }
 
+          }
 
+          &:last-child{
 
+            a{
 
+              padding-bottom: 25px;
 
+            }
 
+          }
 
+          &:hover{
 
+            a{
 
+              color: #ef0;
 
+            }
 
+          }
 
+          &.active{
 
+            a{
 
+              color: #ef0;
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+    .header--mob--lang--btn{
 
+      display: none;
 
+      width: 26px;
 
+      margin-left: auto;
 
+      margin-right: 20px;
 
+      z-index: 100;
 
+      height: 26px;
 
+      background-repeat: no-repeat;
 
+      background-size: 100%;
 
+      background-image: url(../img/ico--global.svg);
 
+      cursor: pointer;
 
+      &.active{
 
+        margin-right: 0;
 
+        background-image: url(../img/ico--close.svg)!important;
 
+      }
 
+      &.hide{
 
+        display: none;
 
+      }
 
+    }
 
+    .header--mob--lang--wrap{
 
+      position: fixed;
 
+      background-color: #1a1b20;
 
+      width: 100%;
 
+      height: 100vh;
 
+      right: -100%;
 
+      z-index: 99;
 
+      top: 0;
 
+      display: flex;
 
+      align-items: center;
 
+      transition: all 0.3s;
 
+      &.active{
 
+        right: 0;
 
+      }
 
+      >ul{
 
+        display: flex;
 
+        width: 100%;
 
+        flex-direction: column;
 
+        list-style: none;
 
+        >li{
 
+          width: 100%;
 
+          text-align: center;
 
+          >a{
 
+            text-decoration: none;
 
+            width: 100%;
 
+            padding: 45px 0;
 
+            display:  inline-block;
 
+            color: #fff;
 
+            font-weight: 700;
 
+            font-size: 25px;
 
+          }
 
+          &.active{
 
+            >a{
 
+              color: #ef0;
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+    .header--mob--btn{
 
+      display: none;
 
+      width: 26px;
 
+      cursor: pointer;
 
+      z-index: 100;
 
+      height: 26px;
 
+      background-image: url(../img/ico--header.svg);
 
+      background-repeat: no-repeat;
 
+      &.active{
 
+        background-image: url(../img/ico--close.svg)!important;
 
+      }
 
+      &.hide{
 
+        display: none;
 
+      }
 
+    }
 
+    .header--mob--wrap{
 
+      position: fixed;
 
+      background-color: #101014;
 
+      width: 100%;
 
+      height: 100vh;
 
+      padding-top: 80px;
 
+      right: -100%;
 
+      z-index: 99;
 
+      top: 0;
 
+      display: flex;
 
+      transition: all 0.3s;
 
+      &.active{
 
+        right: 0;
 
+      }
 
+      .mob--l{
 
+        width: 40%;
 
+        border-top: 1px solid #31313A;
 
+        padding: 40px 0;
 
+        ul{
 
+          list-style: none;
 
+          display: flex;
 
+          flex-direction: column;
 
+          gap: 50px;
 
+          li{
 
+            a{
 
+              line-height: 25px;
 
+              height: 25px;
 
+              width: 100%;
 
+              color: #fff;
 
+              font-size: 16px;
 
+              font-weight: 700;
 
+              text-transform: uppercase;
 
+              text-decoration: none;
 
+              display: inline-block;
 
+              padding: 0 30px;
 
+              transition: all 0.3s;
 
+              position: relative;
 
+              &::after{
 
+                content: '';
 
+                position: absolute;
 
+                width: 2px;
 
+                right: 0;
 
+                top: 0;
 
+                display: inline-block;
 
+                transition: all 0.3s;
 
+                height: 100%;
 
+                background-color: #EC3237;
 
+                opacity: 0;
 
+              }
 
+              &:hover{
 
+                color: #EC3237;
 
+                &::after{
 
+                  opacity: 1;
 
+                }
 
+              }
 
+              &.active{
 
+                color: #EC3237;
 
+                &::after{
 
+                  opacity: 1;
 
+                }
 
+              }
 
+            }
 
+          }
 
+        }
 
+      }
 
+      .mob--r{
 
+        width: 60%;
 
+        border-top: 1px solid #31313A;
 
+        background-color: #1a1b20;
 
+        padding: 40px 10px 40px 30px;
 
+        .sub--nav--wrap{
 
+          height: 100%;
 
+          overflow-y: auto;
 
+          .sub--nav{
 
+            display: none;
 
+            flex-direction: column;
 
+            gap: 40px;
 
+            &.active{
 
+              display: flex;
 
+            }
 
+            a{
 
+              text-decoration: none;
 
+              color: #fff;
 
+              display: inline-block;
 
+              width: 100%;
 
+              &.active{
 
+                color: #ec3237;
 
+              }
 
+              br{
 
+                display: none;
 
+              }
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+.footer--wrap{
 
+  z-index: 10;
 
+  position: absolute;
 
+  width: 100%;
 
+  color: #fff;
 
+  bottom: 0;
 
+  left: 0;
 
+  text-align: center;
 
+  font-weight: 500;
 
+  font-size: 15px;
 
+  text-transform: uppercase;
 
+  padding: 40px 0;
 
+  border-top: 1px solid rgba(255, 255, 255, 0.20);
 
+  background: #020203;
 
+}
 
+
 
+.container {
 
+  position: relative;
 
+  height: 300vh; /* 3개 이미지 * 100vh */
 
+  .image--section {
 
+    position: sticky;
 
+    top: 0;
 
+    width: 100%;
 
+    height: 100vh;
 
+    overflow: hidden;
 
+    z-index: 1;
 
+    &.global--section{
 
+      background-color: #1A1B20;
 
+    }
 
+    &.contact--section{
 
+      background-image: url(../img/main--contact.png);
 
+      background-size: cover;
 
+    }
 
+    &.black3{
 
+      background-color: #15161A;
 
+    }
 
+    .section--container{
 
+      max-width: 1600px;
 
+      margin: 0 auto;
 
+      position: relative;
 
+      height: 100%;
 
+      .map--wrap{
 
+        position: absolute;
 
+        width: 100%;
 
+        align-items: center;
 
+        display: flex;
 
+        justify-content: flex-end;
 
+        height: 100%;
 
+        .map--img{
 
+          position: relative;
 
+          img{
 
+            object-fit: none;
 
+            height: auto;
 
+          }
 
+        }
 
+        .map--dot--box{
 
+          width: 100%;
 
+          height: 100%;
 
+          top: 0;
 
+          left: 0;
 
+          position: absolute;
 
+          .map--dots{
 
+            position: relative;
 
+            width: 100%;
 
+            height: 100%;
 
+            .dot{
 
+              width: 168px;
 
+              height: 168px;
 
+              border-radius: 100px;
 
+              background: rgba(205, 25, 29, 0.60);
 
+              backdrop-filter: blur(5px);
 
+              justify-content: center;
 
+              display: flex;
 
+              flex-direction: column;
 
+              position: absolute;
 
+              align-items: center;
 
+              .circle{
 
+                border-radius: 100px;
 
+                border: 1px solid rgba(255, 255, 255, 0.50);
 
+                font-size: 14px;
 
+                color: #fff;
 
+                font-weight: 600;
 
+                line-height: 1;
 
+                padding: 8px 10px;
 
+              }
 
+              >p{
 
+                margin-top: 10px;
 
+                span{
 
+                  color: #fff;
 
+                  font-size: 23px;
 
+                  font-weight: 800;
 
+                }
 
+              }
 
+              .txt{
 
+                margin-top: 20px;
 
+                color: #fff;
 
+                font-size: 13px;
 
+                font-weight: 600;
 
+                line-height: 1;
 
+              }
 
+              &.dot1{
 
+                left: 7%;
 
+                top: 24%;
 
+              }
 
+              &.dot2{
 
+                background: rgba(169, 9, 13, 0.60);
 
+                left: 27%;
 
+                bottom: 18%;
 
+              }
 
+              &.dot3{
 
+                background: rgba(235, 63, 68, 0.60);
 
+                top: 19%;
 
+                left: 44%;
 
+              }
 
+              &.dot4{
 
+                background: rgba(188, 106, 108, 0.60);
 
+                right: 25%;
 
+                bottom: 18%;
 
+              }
 
+              &.dot5{
 
+                background: rgba(166, 0, 4, 0.60);
 
+                right: 9%;
 
+                top: 21%;
 
+              }
 
+            }
 
+          }
 
+        }
 
+      }
 
+      .text--wrap{
 
+        position: absolute;
 
+        display: flex;
 
+        flex-direction: column;
 
+        bottom: 10%;
 
+        >h4{
 
+          color: #fff;
 
+          font-size: 18px;
 
+          font-weight: 800;
 
+          letter-spacing: -0.36px;
 
+          margin-bottom: 70px;
 
+          span{
 
+            color: #EC3237;
 
+          }
 
+        }
 
+        >h3{
 
+          font-size: 50px;
 
+          color: rgba(255,255,255,0.1);
 
+          margin-bottom: 35px;
 
+        }
 
+        >p{
 
+          color: #fff;
 
+          font-size: 19px;
 
+          font-weight: 400;
 
+          word-break: keep-all;
 
+          letter-spacing: -0.38px;
 
+          margin-bottom: 110px;
 
+        }
 
+        .btn--wrap{
 
+          a{
 
+            display: flex;
 
+            gap: 20px;
 
+            align-items: center;
 
+            color: #fff;
 
+            font-size: 15px;
 
+            font-weight: 600;
 
+            padding: 20px 30px;
 
+            border: 1px solid rgba(255, 255, 255, 0.30);
 
+            border-radius: 100px;
 
+            width: fit-content;
 
+            text-decoration: none;
 
+            .ico{
 
+              display: inline-block;
 
+              width: 14px;
 
+              height: 14px;
 
+              background-repeat: no-repeat;
 
+              background-image: url(../img/ico--arrow--white.svg);
 
+            }
 
+          }
 
+        }
 
+      }
 
+      .contact--wrap{
 
+        width: 100%;
 
+        gap: 30px;
 
+        display: flex;
 
+        height: 100%;
 
+        align-items: center;
 
+        justify-content: space-between;
 
+        .location--group {
 
+          display: flex;
 
+          flex-wrap: wrap;
 
+          width: 52%;
 
+          height: 80vh;
 
+          max-height: 850px;
 
+          gap: 2%;
 
+          input[type="radio"] {
 
+            display: none;
 
+          }
 
+
 
+          .location--item {
 
+            display: flex;
 
+            width: calc(92% / 5);
 
+            color: #fff;
 
+            cursor: pointer;
 
+            text-transform: uppercase;
 
+            border-radius: 30px;
 
+            transition: all 0.3s ease;
 
+            position: relative;
 
+            overflow: hidden;
 
+            &:hover {
 
+              transform: scale(1.1);
 
+            }
 
+
 
+            label{
 
+              width: 100%;
 
+              height: 100%;
 
+              border-radius: inherit;
 
+            }
 
+            
+            .image--area {
 
+              cursor: pointer;
 
+              border-radius: inherit;
 
+              width: 100%;
 
+              height: 100%;
 
+              background-size: cover;
 
+              background-position: center;
 
+              background-repeat: no-repeat;
 
+              position: relative;
 
+              &:before{
 
+                content: '';
 
+                display: inline-block;
 
+                position: absolute;
 
+                width: 100%;
 
+                height: 100%;
 
+                background: rgba(26, 27, 32, 0.50);
 
+                top: 0;
 
+                left: 0;
 
+              }
 
+            }
 
+            
+            .text--area {
 
+              cursor: pointer;
 
+              position: absolute;
 
+              padding: 25px;
 
+              font-weight: 600;
 
+              font-size: 14px;
 
+              z-index: 2;
 
+              color: #fff;
 
+              top: 0;
 
+              left: 0;
 
+            }
 
+          
+          }
 
+
 
+          input[type="radio"]:checked + label {
 
+            border: 2px solid rgba(236, 50, 55, 0.50);
 
+            box-shadow: 0 0 20px 0 rgba(25, 36, 77, 0.25);
 
+            .image--area{
 
+              &::before{
 
+                display: none;
 
+              }
 
+            }
 
+          }
 
+
 
+          // Individual location backgrounds
 
+          @for $i from 1 through 23 {
 
+            label[for="location#{$i}"] .image--area {
 
+              background-image: url(../img/contact#{$i}.png);
 
+            }
 
+          }
 
+        }
 
+        .contact--tit--mo{
 
+          display: none;
 
+        }
 
+        .contact--btn--mo{
 
+          display: none;
 
+        }
 
+        .contact--form{
 
+          background-color: #fff;
 
+          display: flex;
 
+          flex-direction: column;
 
+          align-items: center;
 
+          height: 80vh;
 
+          max-height: 850px;
 
+          justify-content: space-between;
 
+          width: calc(48% - 30px);
 
+          background-color: #1a1b20;
 
+          border-radius: 40px;
 
+          padding: 70px;
 
+          .contact--tit{
 
+            width: 100%;
 
+            display: flex;
 
+            color: #fff;
 
+            justify-content: space-between;
 
+            h3{
 
+              font-size: 35px;
 
+              font-weight: 700;
 
+              margin-bottom: 25px;
 
+            }
 
+            p{
 
+              font-size: 16px;
 
+              font-weight: 400;
 
+            }
 
+            .contact--btn{
 
+              background-repeat: no-repeat;
 
+              background-position: center;
 
+              min-width: 70px;
 
+              border: none;
 
+              cursor: pointer;
 
+              width: 70px;
 
+              height: 70px;
 
+              border-radius: 50%;
 
+              background-color: #ec3237;
 
+              background-image: url(../img/ico--contact.svg);
 
+            }
 
+          }
 
+          .contact--cont{
 
+            width: 100%;
 
+            color: #fff;
 
+            display: flex;
 
+            overflow-y: auto;
 
+            height: calc(100% - 140px);
 
+            flex-direction: column;
 
+            gap: 35px;
 
+            .input--type2--wrap{
 
+              display: flex;
 
+              width: 100%;
 
+              gap: 30px;
 
+              .input--wrap{
 
+                width: calc(50% - 15px);
 
+              }
 
+            }
 
+            .input--wrap{
 
+              width: 100%;
 
+              display: flex;
 
+              flex-direction: column;
 
+              gap: 15px;
 
+              select{
 
+                border-radius: 12px;
 
+                border: 1px solid #323340;
 
+                background-color: #262730;
 
+                padding: 20px;
 
+                font-size: 16px;
 
+                cursor: pointer;
 
+                color: #fff;
 
+                appearance: none;
 
+                background-image: url(../img/ico--select.svg);
 
+                background-repeat: no-repeat;
 
+                background-position: right 20px center;
 
+                background-size: 16px 16px;
 
+                padding-right: 50px;
 
+              }
 
+              input{
 
+                border-radius: 12px;
 
+                border: 1px solid #323340;
 
+                background-color: #262730;
 
+                padding: 20px;
 
+                font-size: 16px;
 
+                color: #fff;
 
+              }
 
+              textarea{
 
+                resize: none;
 
+                border-radius: 12px;
 
+                border: 1px solid #323340;
 
+                background-color: #262730;
 
+                padding: 20px;
 
+                font-size: 16px;
 
+                color: #fff;
 
+              }
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+    img {
 
+      width: 100%;
 
+      height: 100vh;
 
+      object-fit: cover;
 
+      display: block;
 
+    }
 
+    
+    &:nth-child(2){
 
+      z-index: 2;
 
+    }
 
+    
+    &:nth-child(3){
 
+      z-index: 3;
 
+    }
 
+    .main--swiper{
 
+      position: relative;
 
+      .swiper-slide{
 
+        .img--wrap{
 
+          position: relative;
 
+          &::after{
 
+            content: '';
 
+            position: absolute;
 
+            width: 100%;
 
+            z-index: 2;
 
+            display: inline-block;
 
+            height: 100%;
 
+            background: linear-gradient(180deg, #1A1B20 0%, rgba(0, 0, 0, 0.0) 100%);
 
+            opacity: 0.4;
 
+            top: 0;
 
+            left: 0;
 
+          }
 
+        }
 
+        .txt--wrap{
 
+          position: absolute;
 
+          display: flex;
 
+          max-width: 1600px;
 
+          width: 100%;
 
+          left: 50%;
 
+          top: 20%;
 
+          transform: translateX(-50%);
 
+          flex-direction: column;
 
+          >span{
 
+            color: #fff;
 
+            font-size: 23px;
 
+            font-weight: 500;
 
+            margin-bottom: 35px;
 
+            letter-spacing: -0.46px;
 
+            text-transform: capitalize;
 
+          }
 
+          >h2{
 
+            font-size: 120px;
 
+            color: #fff;
 
+            margin-bottom: 65px;
 
+            font-weight: 900;
 
+            letter-spacing: -2.4px;
 
+            text-transform: uppercase;
 
+            strong{
 
+              color: #ec3237;
 
+            }
 
+          }
 
+          .btn--wrap{
 
+            a{
 
+              display: flex;
 
+              align-items: center;
 
+              text-decoration: none;
 
+              gap: 10px;
 
+              color: #ec3237;
 
+              font-size: 14px;
 
+              background-color: #fff;
 
+              width: fit-content;
 
+              font-weight: 700;
 
+              padding: 20px 30px;
 
+              border-radius: 100px;
 
+              .ico{
 
+                display: inline-block;
 
+                background-image: url(../img/ico--arrow.svg);
 
+                background-repeat: no-repeat;
 
+                background-size: 100%;
 
+                background-position: center;
 
+                width: 16px;
 
+                height: 16px;
 
+              }
 
+            }
 
+          }
 
+        }
 
+      }
 
+
 
+      .swiper--btn--wrap{
 
+        display: none;
 
+        position: absolute;
 
+        right: 20px;
 
+        display: flex;
 
+        gap: 15px;
 
+        width: 143px;
 
+        height: 64px;
 
+        bottom: 30px;
 
+        .swiper-button-next,
 
+        .swiper-button-prev{
 
+          display: none;
 
+          margin-top: 0;
 
+          top: 0;
 
+          background-image: url(../img/ico--arrow--swiper.svg);
 
+          background-size: 25px 25px;
 
+          width: 64px;
 
+          height: 64px;
 
+          background-repeat: no-repeat;
 
+          border-radius: 50%;
 
+          border: 1px solid rgba(255,255,255,0.5);
 
+          background-position: center;
 
+          &::after{
 
+            display: none;
 
+          }
 
+        }
 
+        .swiper-button-prev{
 
+          left: 0;
 
+          transform: rotate(180deg);
 
+        }
 
+        .swiper-button-next{
 
+          right: 0;
 
+          left: auto;
 
+        }
 
+      }
 
+      .swiper--pag--wrap{
 
+        display: none;
 
+        position: absolute;
 
+        width: calc(100% - 240px);
 
+        height: 64px;
 
+        bottom: 30px;
 
+        left: 30px;
 
+        .swiper--pag{
 
+          position: relative;
 
+          height: 100%;
 
+          width: 100%;
 
+          p{
 
+            font-weight: 700;
 
+            font-size: 17px;
 
+            color: #fff;
 
+            text-transform: uppercase;
 
+            position: absolute;
 
+            z-index: 1;
 
+            top: 0;
 
+            left: 0;
 
+          }
 
+          .pag--numb{
 
+            span{
 
+              display: inline-block;
 
+              position: absolute;
 
+              z-index: 1;
 
+              color: rgba(255, 255, 255, 0.50);
 
+              font-size: 15px;
 
+              font-weight: 700;
 
+              bottom: 0;
 
+              &.active{
 
+                color: #fff;
 
+              }
 
+              &.num--6{
 
+                right: 0;
 
+              }
 
+            }
 
+            .swiper-pagination{
 
+              position: absolute;
 
+              top: auto;
 
+              border-radius: 100px;
 
+              height: 5px;
 
+              width: calc(100% - 60px);
 
+              margin: 5px  0;
 
+              left: 30px;
 
+              overflow: hidden;
 
+              bottom: 0;
 
+              background-color: #4A494D;
 
+              .swiper-pagination-progressbar-fill{
 
+                background-color: #fff;
 
+              }
 
+            }
 
+          }
 
+        }
 
+      }
 
+  
+      .main--swiper--tab{
 
+        position: absolute;
 
+        max-width: 1600px;
 
+        left: 50%;
 
+        transform: translateX(-50%);
 
+        width: 100%;
 
+        bottom: 0;
 
+        display: flex;
 
+        z-index: 5;
 
+        .tab--wrap{
 
+          cursor: pointer;
 
+          transition: all 0.3s;
 
+          word-break: keep-all;
 
+          width: calc(100% / 6);
 
+          padding: 70px 35px 50px;
 
+          .tab--inner{
 
+            padding-top: 20px;
 
+            border-top: 1px solid #fff;
 
+            dt{
 
+              color: #fff;
 
+              font-size: 20px;
 
+              font-weight: 800;
 
+              text-transform: uppercase;
 
+              margin-bottom: 30px;
 
+            }
 
+            dd{
 
+              font-size: 14px;
 
+              color: #fff;
 
+              font-weight: 400;
 
+              line-height: 1.7;
 
+            }
 
+          }
 
+          &.active{
 
+            background-color: #ec3237;
 
+          }
 
+        }
 
+      }
 
+    }
 
+  }
 
+}

+ 803 - 0
assets/scss/sub.scss
Datei anzeigen 

@@ -0,0 +1,803 @@
 
+.header--wrap{
 
+  &.scrolled, &:hover{
 
+    background-color: #fff;
 
+    .header--inner{
 
+      .header--mob--lang--btn{
 
+        background-image: url(../img/ico--global--black.svg);
 
+      }
 
+      .header--mob--btn{
 
+        background-image: url(../img/ico--header--black.svg);
 
+      }
 
+      .header--logo{
 
+        background-image: url(../img/logo--white.svg);
 
+      }
 
+      &:has(.header--mob--btn.active){
 
+        .header--logo{
 
+          background-image: url(../img/logo--default.svg);
 
+        }
 
+      }
 
+      .header--nav > ul > li > a{
 
+        color: #000;
 
+      }
 
+      .header--lang--btn{
 
+        background-color: #EC3237;
 
+      }
 
+    }
 
+  }
 
+}
 
+
 
+.footer--wrap{
 
+  &.sub--type{
 
+    position: static;
 
+  }
 
+}
 
+
 
+main{
 
+  .ico{
 
+    display: inline-block;
 
+    background-repeat: no-repeat;
 
+    background-size: 100%;
 
+    background-position: center;
 
+  }
 
+  .sub--visual--wrap{
 
+    position: relative;
 
+    .visual--wrap{
 
+      width: 100%;
 
+      img{
 
+        width: 100%;
 
+      }
 
+    }
 
+    .visual--txt--wrap{
 
+      position: absolute;
 
+      max-width: 1600px;
 
+      width: 100%;
 
+      bottom: -14px;
 
+      line-height: 1;
 
+      text-transform: uppercase;
 
+      left: 50%;
 
+      transform: translateX(-50%);
 
+      h2{
 
+        font-weight: 800;
 
+        font-size: 120px;
 
+        color: #fff;
 
+        .mo{
 
+          display: none;
 
+        }
 
+        strong{
 
+          color: #ec3237;
 
+        }
 
+      }
 
+    }
 
+  }
 
+  .org--sec--wrap{
 
+    background-size: cover;
 
+    background-attachment: fixed;
 
+    background-color: #1A1B20;
 
+    background-position: bottom;
 
+    background-repeat: no-repeat;
 
+    background-image: url(../img/img--org.png);
 
+  }
 
+  .sub--menu--wrap{
 
+    max-width: 1600px;
 
+    justify-content: center;
 
+    align-items: center;
 
+    display: flex;
 
+    margin: 0 auto;
 
+    gap: 18px;
 
+    padding: 150px 0;
 
+    width: 100%;
 
+    select{
 
+      background-color: #fff;
 
+      width: 100%;
 
+      border: 1px solid #dedede;
 
+      border-radius: 15px;
 
+      cursor: pointer;
 
+      color: #191919;
 
+      font-size: 16px;
 
+      font-weight: 500;
 
+      padding: 25px 20px;
 
+      -webkit-appearance: none;
 
+      background-image: url(../img/ico--select--black.svg);
 
+      background-repeat: no-repeat;
 
+      background-position: center right 20px;
 
+      -moz-appearance: none;
 
+      appearance: none;
 
+    }
 
+    &.mo{
 
+      display: none;
 
+    }
 
+    .ico{
 
+      width: 20px;
 
+      height: 20px;
 
+      background-image: url(../img/ico--home.svg);
 
+    }
 
+    .dot{
 
+      display: inline-block;
 
+      width: 6px;
 
+      height: 6px;
 
+      border-radius: 50%;
 
+      background-color: #d9d9d9;
 
+    }
 
+    p{
 
+      text-transform: uppercase;
 
+      font-size: 18px;
 
+      font-weight: 400;
 
+      color: #000;
 
+      &:last-child{
 
+        font-weight: 600;
 
+        color: #ec3237;
 
+      }
 
+    }
 
+  }
 
+  .sub--container{
 
+    max-width: 1600px;
 
+    margin: 0 auto;
 
+    .sub--title--wrap{
 
+      display: flex;
 
+      justify-content: center;
 
+      margin-bottom: 60px;
 
+      .sub--title{
 
+        color: #191919;
 
+        font-size: 50px;
 
+        font-weight: 800;
 
+        display: inline;
 
+        text-align: center;
 
+        text-transform: capitalize;
 
+        position: relative;
 
+        &.mo{
 
+          display: none;
 
+        }
 
+        &::after{
 
+          position: absolute;
 
+          content: '';
 
+          display: inline-block;
 
+          background: rgba(236, 50, 55, 0.40);
 
+          width: calc(100% + 10px);
 
+          bottom: 5px;
 
+          left: -5px;
 
+          z-index: -1;
 
+          height: 40%;
 
+        }
 
+      }
 
+    }
 
+    .sub--cont--wrap{
 
+      margin-bottom: 120px;
 
+      .sub--desc{
 
+        max-width: 1200px;
 
+        margin: 0 auto;
 
+        line-height: 1.7;
 
+        color: #000;
 
+        font-size: 18px;
 
+        font-weight: 300;
 
+        text-align: center;
 
+      }
 
+      .sub--point{
 
+        display: flex;
 
+        justify-content: space-between;
 
+        flex-wrap: wrap;
 
+        margin-top: 120px;
 
+        .point--box{
 
+          width: calc((100% - 120px) / 4);
 
+          padding: 45px;
 
+          border: 1px solid rgba(228, 228, 228, 0.93);
 
+          background-color: #fff;
 
+          border-radius: 30px;
 
+          .ico{
 
+            width: 60px;
 
+            height: 60px;
 
+            margin-bottom: 35px;
 
+            background-image: url(../img/ico--air1.svg);
 
+          }
 
+          &:nth-child(2){
 
+            .ico{
 
+              background-image: url(../img/ico--air2.svg);
 
+            }
 
+          }
 
+          &:nth-child(3){
 
+            .ico{
 
+              background-image: url(../img/ico--air3.svg);
 
+            }
 
+          }
 
+          &:nth-child(4){
 
+            .ico{
 
+              background-image: url(../img/ico--air4.svg);
 
+            }
 
+          }
 
+          >h5{
 
+            margin-bottom: 20px;
 
+            text-transform: uppercase;
 
+            color: #191919;
 
+            font-size: 20px;
 
+            font-weight: 800;
 
+          }
 
+          >p{
 
+            color: #191919;
 
+            line-height: 1.7;
 
+            font-size: 16px;
 
+            font-weight: 300;
 
+          }
 
+        }
 
+      }
 
+      .map--wrap{
 
+        height: 700px;
 
+      }
 
+      .map--desc{
 
+        margin-top: 110px;
 
+        h4{
 
+          color: #191919;
 
+          font-size: 30px;
 
+          font-weight: 700;
 
+          margin-bottom: 50px;
 
+          text-transform: uppercase;
 
+        }
 
+        ul{
 
+          list-style: none;
 
+          display: flex;
 
+          flex-wrap: wrap;
 
+          gap: 25px;
 
+          li{
 
+            display: flex;
 
+            align-items: center;
 
+            font-size: 18px;
 
+            font-weight: 300;
 
+            text-transform: uppercase;
 
+            span{
 
+              margin-right: 5px;
 
+            }
 
+            strong{
 
+              font-weight: 600;
 
+            }
 
+            .ico{
 
+              min-width: 40px;
 
+              margin-right: 20px;
 
+              width: 40px;
 
+              height: 40px;
 
+              background-size: 18px 18px;
 
+              border-radius: 50%;
 
+              background-color: #1a1b20;
 
+            }
 
+            &:nth-child(1){
 
+              width: 100%;
 
+              .ico{
 
+                background-image: url(../img/ico--map1.svg);
 
+              }
 
+            }
 
+            &:nth-child(2){
 
+              width: 300px;
 
+              .ico{
 
+                background-image: url(../img/ico--map2.svg);
 
+              }
 
+            }
 
+            &:nth-child(3){
 
+              width: calc(100% - 325px);
 
+              .ico{
 
+                background-image: url(../img/ico--map3.svg);
 
+              }
 
+            }
 
+            &:nth-child(4){
 
+              width: 300px;
 
+              .ico{
 
+                background-image: url(../img/ico--map4.svg);
 
+              }
 
+            }
 
+            &:nth-child(5){
 
+              width: calc(100% - 325px);
 
+              .ico{
 
+                background-image: url(../img/ico--map5.svg);
 
+              }
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+    .grt--wrap{
 
+      margin-bottom: 150px;
 
+      display: flex;
 
+      flex-direction: column;
 
+      .grt--part{
 
+        display: flex;
 
+        flex-direction: column;
 
+        align-items: center;
 
+        justify-content: center;
 
+        .grt--title{
 
+          padding-bottom: 70px;
 
+          .grt--year{
 
+            width: fit-content;
 
+            color: #fff;
 
+            font-size: 30px;
 
+            line-height: 1;
 
+            font-weight: 800;
 
+            background-color: #ccc;
 
+            padding: 23px 30px;
 
+            position: relative;
 
+            transition: all 0.3s;
 
+            border-radius: 0 50px 50px 50px;
 
+            &.active{ 
+              background-color: #ec3237;
 
+              .title--line{
 
+                .line, .dot{
 
+                  background-color: #ec3237;
 
+                }
 
+              }
 
+              .grt--txt{
 
+                color: #EC3237;
 
+              }
 
+            }
 
+            .grt--txt{
 
+              color: #666;
 
+              font-size: 20px;
 
+              display: inline-block;
 
+              font-weight: 800;
 
+              text-align: right;
 
+              position: absolute;
 
+              top: 50%;
 
+              transform: translateY(-50%);
 
+              right: calc(100% + 50px);
 
+              white-space: nowrap;
 
+            }
 
+            .title--line{
 
+              position: absolute;
 
+              z-index: 10;
 
+              left: calc(50% - 3px);
 
+              top: 100%;
 
+              .line{
 
+                display: inline-block;
 
+                margin-left: 4.5px;
 
+                width: 3px;
 
+                height: 85px;
 
+                background-color: #e4e4e4;
 
+              }
 
+              .dot{
 
+                position: absolute;
 
+                bottom: 0;
 
+                left: 0;
 
+                width: 12px;
 
+                height: 12px;
 
+                border-radius: 50%;
 
+                background-color: #ccc;
 
+                display: inline-block;
 
+              }
 
+            }
 
+          }
 
+        }
 
+        .grt--desc{
 
+          width: calc(50% + 3px);
 
+          display: flex;
 
+          flex-direction: column;
 
+          margin-left: auto;
 
+          .desc{
 
+            display: flex;
 
+            .desc--line{
 
+              position: relative;
 
+              &.active{
 
+                .line{
 
+                  &::after{
 
+                    background-color: #ec3237;
 
+                    height: 100%;
 
+                  }
 
+                }
 
+                .dot{
 
+                  background-color: #ec3237;
 
+                }
 
+              }
 
+              .line{
 
+                position: relative;
 
+                transition: all 0.3s;
 
+                display: inline-block;
 
+                width: 3px;
 
+                margin-left: 4.5px;
 
+                margin-top: 18px;
 
+                height: 100%;
 
+                background-color: #e4e4e4;
 
+                &::after{
 
+                  transition: all 0.3s;
 
+                  content: '';
 
+                  position: absolute;
 
+                  width: 100%;
 
+                  height: 0;
 
+                  display: inline-block;
 
+                }
 
+              }
 
+              .dot{
 
+                transition: all 0.3s;
 
+                position: absolute;
 
+                bottom: -20px;
 
+                left: 0;
 
+                width: 12px;
 
+                height: 12px;
 
+                border-radius: 50%;
 
+                z-index: 10;
 
+                background-color: #ccc;
 
+                display: inline-block;
 
+                &.active{
 
+                  background-color: #ec3237;
 
+                }
 
+              }
 
+            }
 
+            .desc--txt{
 
+              display: flex;
 
+              flex-direction: column;
 
+              gap: 40px;
 
+              padding-left: 55px;
 
+              padding-bottom: 70px;
 
+              .desc--year{
 
+                color: #191919;
 
+                font-size: 25px;
 
+                font-weight: 800;
 
+              }
 
+              ul{
 
+                display: flex;
 
+                gap: 40px;
 
+                flex-direction: column;
 
+                li{
 
+                  display: flex;
 
+                  > span{
 
+                    width: 70px;
 
+                    font-size: 18px;
 
+                    color: #333;
 
+                    font-weight: 700;
 
+                    min-width: 70px;
 
+                  }
 
+                  > p{
 
+                    color: #000;
 
+                    font-size: 16px;
 
+                    font-weight: 300;
 
+                    line-height: 1.7;
 
+                  }
 
+                }
 
+              }
 
+            }
 
+          }
 
+        }
 
+      }
 
+    }
 
+    .org--wrap{
 
+      padding-top: 100px;
 
+      >h3{
 
+        color: #fff;
 
+        font-size: 50px;
 
+        font-weight: 800;
 
+        margin-bottom: 90px;
 
+      }
 
+      .org--cont{
 
+        .org--top{
 
+          display: flex;
 
+          align-items: center;
 
+          margin-bottom: 100px;
 
+          position: relative;
 
+          .ceo--circle{
 
+            width: 170px;
 
+            min-width: 170px;
 
+            height: 170px;
 
+            border-radius: 50%;
 
+            display: flex;
 
+            justify-content: center;
 
+            align-items: center;
 
+            color: #131417;
 
+            font-size: 19px;
 
+            font-weight: 800;
 
+            background: rgba(255, 255, 255, 0.80);
 
+            backdrop-filter: blur(1.5px); 
+            &.type--2{
 
+              background: rgba(255, 255, 255, 0.30);
 
+              color: #fff;
 
+            }
 
+            &.type--3{
 
+              color: #fff;
 
+              background: rgba(19, 20, 23, 0.30);
 
+              margin-left: -20px;
 
+            }
 
+          }
 
+          .ceo--line{
 
+            display: inline-block;
 
+            width: 308px;
 
+            height: 1px;
 
+            background: rgba(255, 255, 255, 0.50);
 
+            &.bottom--type{
 
+              width: 1px;
 
+              height: 100px;
 
+              position: absolute;
 
+              top: 100%;
 
+              left: 85px;
 
+            }
 
+          }
 
+        }
 
+        .org--group--box{
 
+          .org--box{
 
+            width: 390px;
 
+            height: 80px;
 
+            color: #fff;
 
+            font-weight: 600;
 
+            font-size: 17px;
 
+            border-radius: 18px;
 
+            padding: 30px 25px;
 
+            border: 1px solid rgba(255, 255, 255, 0.20);
 
+            background: rgba(255, 255, 255, 0.10);
 
+            backdrop-filter: blur(1.5px);
 
+          }
 
+        }
 
+        .org--mid{
 
+          position: relative;
 
+          flex-wrap: wrap;
 
+          display: flex;
 
+          .org--line{
 
+            width: 100px;
 
+            height: 1px;
 
+            margin-top: 40px;
 
+            background-color: #fff;
 
+            position: relative;
 
+            &::after{
 
+              content: '';
 
+              width: 12px;
 
+              height: 12px;
 
+              right: 0;
 
+              top: -6px;
 
+              position: absolute;
 
+              border-radius: 50%;
 
+              background-color: #fff;
 
+              display: inline-block;
 
+            }
 
+            &.bottom--type{
 
+              &::after{
 
+                display: none;
 
+              }
 
+              position: absolute;
 
+              height: calc(100% - 80px);
 
+              width: 1px;
 
+              left: 25px;
 
+              top: 80px;
 
+              margin-top: 0;
 
+              background: rgba(255, 255, 255, 0.50);
 
+              display: inline-block;
 
+            }
 
+          }
 
+          .org--group{
 
+            padding-right: 50px;
 
+            padding-bottom: 80px;
 
+            position: relative;
 
+            .org--line{
 
+              position: absolute;
 
+              width: 100%;
 
+              top: 0;
 
+              background-color: rgba(255, 255, 255, 0.50);
 
+              &.none--circle{
 
+                &::after{
 
+                  display: none;
 
+                }
 
+                &::before{
 
+                  display: none;
 
+                }
 
+                &.mt--120{
 
+                  margin-top: 120px;
 
+                  &::after{
 
+                    display: inline-block;
 
+                    left: -12px;
 
+                  }
 
+                }
 
+              }
 
+              &:before{
 
+                content: '';
 
+                position: absolute;
 
+                top: 0;
 
+                display: inline-block;
 
+                background-color: #fff;
 
+                width: 50px;
 
+                right: 0;
 
+                height: 1px;
 
+              }
 
+            }
 
+            p{
 
+              color: #fff;
 
+              font-size: 18px;
 
+              font-weight: 700;
 
+              text-transform: capitalize;
 
+              margin-bottom: 45px;
 
+              &.mb--60{
 
+                margin-bottom: 60px;
 
+              }
 
+            }
 
+            .org--list{
 
+              list-style: none;
 
+              display: flex;
 
+              flex-direction: column;
 
+              gap: 10px;
 
+              &.w--240{
 
+                li{
 
+                  width: 240px;
 
+                }
 
+              }
 
+              li{
 
+                background-color: #131417;
 
+                border-radius: 12px;
 
+                padding: 20px;
 
+                color: #fff;
 
+                font-size: 14px;
 
+                width: 220px;
 
+                text-transform: capitalize;
 
+                font-weight: 400;
 
+              }
 
+              &.nation{
 
+                li{
 
+                  text-transform: uppercase;
 
+                }
 
+              }
 
+            }
 
+          }
 
+        }
 
+        .org--bot{
 
+
 
+        }
 
+      }
 
+    }
 
+  }
 
+  .quick--menu--wrap{
 
+    position: fixed;
 
+    width: 70px;
 
+    display: flex;
 
+    flex-direction: column;
 
+    gap: 15px;
 
+    right: 125px;
 
+    top: calc(50% - 120px);
 
+    opacity: 0;
 
+    visibility: hidden;
 
+    transition: all 0.3s;
 
+    &.active{
 
+      opacity: 1;
 
+      visibility: visible;
 
+    }
 
+    >div{
 
+      background-size: 30px 30px;
 
+      background-repeat: no-repeat;
 
+      border-radius: 50%;
 
+      background-color: #fff;
 
+      background-position: center;
 
+      width: 70px;
 
+      height: 70px;
 
+      position: relative;
 
+      cursor: pointer;
 
+      transition: all 0.3s;
 
+      border: 1px solid rgba(54, 55, 63, 0.50);
 
+      background-image: url(../img/ico--quick1.svg);
 
+      &.quick--contact{
 
+        &:hover{
 
+          .contact--bubble{
 
+            opacity: 1;
 
+          }
 
+        }
 
+        .contact--bubble{
 
+          opacity: 0;
 
+          pointer-events: none;
 
+          transition: opacity 0.3s;
 
+          position: absolute;
 
+          top: 0;
 
+          right: calc(100% + 20px);
 
+          padding: 24px 30px;
 
+          background-color: #EC3237;
 
+          border-radius: 50px;
 
+          font-size: 22px;
 
+          color: #fff;
 
+          font-weight: 600;
 
+          line-height: 1;
 
+          text-transform: uppercase;
 
+          white-space: nowrap;
 
+          &::after{
 
+            content: '';
 
+            background-image: url(../img/ico--bubble.svg);
 
+            position: absolute;
 
+            right: -12px;
 
+            top: 18px;
 
+            background-size: 100%;
 
+            background-repeat: no-repeat;
 
+            width: 28px;
 
+            height: 28px;
 
+            display: inline-block;
 
+          }
 
+        }
 
+      }
 
+      &.quick--global{
 
+        background-image: url(../img/ico--quick2.svg);
 
+        &:hover{
 
+          .global--bubble{
 
+            opacity: 1;
 
+            pointer-events: all;
 
+          }
 
+        }
 
+        .global--bubble{
 
+          opacity: 0;
 
+          transition: opacity 0.3s;
 
+          pointer-events: none;
 
+          position: absolute;
 
+          top: 0;
 
+          right: calc(100% + 20px);
 
+          width: 435px;
 
+          padding: 25px 20px;
 
+          border-radius: 20px;
 
+          background-color: #EC3237;
 
+          .global--list{
 
+            height: 350px;
 
+            padding: 0 20px;
 
+            overflow-y: scroll;
 
+            &::-webkit-scrollbar {
 
+              width: 8px;
 
+            }
 
+            &::-webkit-scrollbar-track {
 
+              background: rgba(255, 255, 255, 0.1);
 
+              border-radius: 4px;
 
+            }
 
+            &::-webkit-scrollbar-thumb {
 
+              background: rgba(255, 255, 255, 0.5);
 
+              border-radius: 4px;
 
+              &:hover {
 
+                background: rgba(255, 255, 255, 0.7);
 
+              }
 
+            }
 
+            a{
 
+              list-style: circle;
 
+              position: relative;
 
+              text-transform: capitalize;
 
+              pointer-events: none;
 
+              text-decoration: none;
 
+              display: inline-block;
 
+              margin-bottom: 15px;
 
+              font-size: 20px;
 
+              font-weight: 600;
 
+              color: #fff;
 
+              &::before{
 
+                content: '';
 
+                display: inline-block;
 
+                width: 8px;
 
+                height: 8px;
 
+                border-radius: 50%;
 
+                background-color: #fff;
 
+                top: 8px;
 
+                left: -15px;
 
+                position: absolute;
 
+              }
 
+              &:last-child{
 
+                margin-bottom: 0;
 
+              }
 
+            }
 
+          }
 
+          &::after{
 
+            content: '';
 
+            background-image: url(../img/ico--bubble.svg);
 
+            position: absolute;
 
+            right: -35px;
 
+            top: 0px;
 
+            background-repeat: no-repeat;
 
+            background-position: center;
 
+            background-size: 28px 28px;
 
+            width: 70px;
 
+            height: 70px;
 
+            display: inline-block;
 
+          }
 
+        }
 
+      }
 
+      &:hover{
 
+        border: none;
 
+        background-color: #EC3237;
 
+        box-shadow: 0 0 15px 0 rgba(0, 0, 0, 0.25);
 
+        background-image: url(../img/ico--quick1--white.svg);
 
+        &.quick--global{
 
+          background-image: url(../img/ico--quick2--white.svg);
 
+        }
 
+      }
 
+    }
 
+    >button{
 
+      background-size: 24px 24px;
 
+      background-repeat: no-repeat;
 
+      background-color: #36373f;
 
+      background-position: center;
 
+      margin-top: 15px;
 
+      border-radius: 0 50% 50% 50%;
 
+      width: 70px;
 
+      height: 70px;
 
+      transform: rotate(45deg);
 
+      cursor: pointer;
 
+      transition: all 0.3s;
 
+      border: 1px solid rgba(54, 55, 63, 0.50);
 
+      position: relative;
 
+      background-image: url(../img/ico--quick3.svg);
 
+    }
 
+  }
 
+}

+ 1153 - 0
index.html
Datei anzeigen 

@@ -0,0 +1,1153 @@
 
+<!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>

Einige Dateien werden nicht angezeigt, da zu viele Dateien in diesem Diff geändert wurden.