fix: 전체 UI 개선

2026-11-02 13:26:14 +09:00
1 parent c62630e22d
commit 308c06516c
@@ -0,0 +1,113 @@
+<!--영문화-->
+<style>
+footer .footer_inner .footer_info .home{background-image: url(/assets/img/eng/logo_w.svg);}
+footer .footer_inner .footer_info span{font-size: 15px;}
+/* footer .footer_inner nav ol li.depth1:last-child{display:none;} */
+</style>
+<div class="footer_inner">
+  <div class="footer_info">
+    <!-- h1 로고영역은 style.css에서 제어 -->
+    <div class="logo">
+      <a class="home" href="/en/index.html">Baron Consultants</a>
+    </div>
+
+    <span><em>Address.</em>554, Ogeum-ro, Songpa-gu, Seoul, Republic of Korea</span>
+    <span><em>Tel.</em>02-2141-7434</span>
+    <span><em>Mail.</em>baroncs@baroncs.co.kr</span>
+    <span><em>CEO.</em>Jang Jong Chan</span>
+    <span class="copyright"><em>© Baron Consultants Co,.Ltd All Rights Reserved.</em></span>
+
+    <div class="family_wrap">
+      <div class="family_btn"><span>Family Site</span><i></i></div>
+      <ul class="family_list">
+        <li><a href="http://www.hanmaceng.co.kr" target="_blank">hanmac</a></li>
+        <li><a href="https://www.samaneng.co.kr/" target="_blank">saman</a></li>
+        <li><a href="http://www.jangheon.co.kr/" target="_blank">jangheon</a></li>
+        <li><a href="http://jangheon.com/" target="_blank">jangheon Inc.</a></li>
+        <li><a href="http://www.pre-cast.co.kr/" target="_blank">PTC</a></li>
+        <li>
+          <a href="http://www.hallasanup.com/" target="_blank">hallasanup</a>
+        </li>
+      </ul>
+    </div>
+  </div>
+
+  <nav class="nav"></nav>
+</div>
+
+<!-- TOP버튼 -->
+<button class="btn_top js__top" onclick="window.scrollTo(0,0);">
+  <div class="arrow"></div>
+</button>
+<!-- //TOP버튼 -->
+
+<script>
+  // console.log('?');
+  // ^ TOP button
+  const urlParams = location.href;
+  $(function () {
+    if (urlParams.indexOf("recruit") != -1) {
+      $(".footer_info .home").attr("target", "_blank");
+    }
+  });
+  const topButton = document.querySelector(".js__top");
+  function adjustButtonPosition() {
+    const scrollY = window.scrollY; // 현재 스크롤 위치
+    const windowHeight = window.innerHeight; // 윈도우 높이
+    const documentHeight = document.documentElement.scrollHeight; // 문서 전체 높이
+    const bottomSpace = urlParams.indexOf("recruit") != -1 ? 120 : 400; // 탑 버튼이 아래에서 떨어져 있어야 하는 거리
+
+    // 문서의 맨 아래로부터 떨어지기 위한 계산
+    if (scrollY + windowHeight >= documentHeight - bottomSpace) {
+      topButton.style.bottom = `${
+        bottomSpace + (scrollY + windowHeight - documentHeight)
+      }px`;
+    } else {
+      topButton.style.bottom = "80px"; // 원래의 위치
+    }
+  }
+  window.addEventListener("scroll", adjustButtonPosition);
+  window.addEventListener("load", adjustButtonPosition);
+  // 새로운 코드 추가 - topButton의 표시/숨기기 로직
+  function toggleTopButtonClass() {
+    // console.log('*');
+    if (window.scrollY === 0) {
+      topButton.style.display = "none";
+    } else {
+      topButton.style.display = "initial";
+    }
+  }
+  window.addEventListener("scroll", toggleTopButtonClass);
+  window.addEventListener("load", toggleTopButtonClass);
+
+  // FOOTER - 패밀리사이트 열고닫기
+  $(function () {
+    $(".menu_my").mouseover(function () {
+      $(".menu_my_list").show();
+    });
+
+    $(".menu_my").mouseout(function () {
+      $(".menu_my_list").hide();
+    });
+
+    //footer family site toggle
+    $(".family_btn").click(function (event) {
+      event.stopPropagation(); // family_btn 클릭 시 이벤트 전파를 막음
+      $(".family_list").toggleClass("family_on");
+      $(".family_btn").toggleClass("family_on");
+    });
+
+    // 화면 아무 곳이나 클릭했을 때 family_list를 제외한 영역 클릭 시 리스트 닫기
+    $(document).click(function (event) {
+      if (
+        !$(event.target).closest(".family_list").length &&
+        !$(event.target).closest(".family_btn").length
+      ) {
+        // family_list와 family_btn 외의 영역을 클릭한 경우
+        $(".family_list").removeClass("family_on");
+        $(".family_btn").removeClass("family_on");
+      }
+    });
+
+  });
+</script>
@@ -0,0 +1,91 @@
+<!--영문화-->
+<style>
+  header .logo_box a.logo{-webkit-mask-image:url(/assets/img/eng/logo_w.svg);mask-image:url(/assets/img/eng/logo_w.svg);}
+  header .header_inner .header_R{display:flex;align-items:center;margin-left:auto;}
+  header .header_inner .header_R .language{display:inline-flex;align-items:baseline;flex-wrap:nowrap;flex-shrink:0;min-width:84px;padding-right:24px;white-space:nowrap;}
+  header .header_inner .header_R .language a{display:inline-flex;align-items:center;flex:0 0 auto;white-space:nowrap;}
+
+  header .header_inner .header_login{position:relative;display:none;align-items:center;justify-content:center;margin-right:12px;}
+  html[data-baron-page-mode="landing"] header .header_inner .header_login,
+  html[data-baron-page-mode="public-info"] header .header_inner .header_login,
+  html[data-baron-auth-state="authenticated"] header .header_inner .header_login{display:inline-flex;}
+
+  header .header_inner .header_login_trigger{display:flex;align-items:center;justify-content:center;width:36px;height:36px;cursor:pointer;transition:filter 0.2s ease;}
+  header .header_inner .header_login:hover .header_login_trigger,
+  header .header_inner .header_login:focus-within .header_login_trigger{filter:brightness(1.12);}
+  header .header_inner .header_login_trigger img{width:28px;height:28px;filter:brightness(0);}
+  html[data-baron-page-mode="landing"] header .header_inner .header_login_trigger img{filter:none;}
+  html[data-baron-page-mode="landing"] header:hover .header_inner .header_login_trigger img{filter:brightness(0);}
+
+  header .header_inner .header_login_menu{position:absolute;top:100%;left:50%;padding-top:12px;transform:translateX(-50%) translateY(4px);opacity:0;visibility:hidden;pointer-events:none;transition:opacity 0.2s ease, transform 0.2s ease;z-index:20;}
+  header .header_inner .header_login:hover .header_login_menu,
+  header .header_inner .header_login:focus-within .header_login_menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
+  header .header_inner .header_login.is-open .header_login_menu{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0);}
+  header .header_inner .header_login.is-dismissed .header_login_menu{opacity:0;visibility:hidden;pointer-events:none;transform:translateX(-50%) translateY(4px);}
+  header .header_inner .header_login_menu::before{content:"";position:absolute;top:6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:7px solid #ffffff;}
+  header .header_inner .header_login_link{display:block;white-space:nowrap;background:#ffffff;color:#111111;font-size:13px;font-weight:700;padding:10px 22px;border:2px solid transparent;border-radius:10px;box-shadow:0 8px 20px rgba(0,0,0,0.18);text-align:center;box-sizing:border-box;transition:background-color 0.15s ease, border-color 0.15s ease;}
+  header .header_inner .header_login_link:hover{background:#ffcc00;border-color:#ffffff;}
+
+  @media (max-width: 768px){
+    header .header_inner .header_login{margin-right:6px;}
+    header .header_inner .header_login_trigger{width:32px;height:32px;}
+  }
+
+  header .header_inner nav ol li.depth1 span,
+  header .header_inner nav ol li.depth1 span em,
+  header .header_inner nav ol li.depth1 ul.depth2 li a,
+  header .header_inner nav ol li.depth1 ul.depth2 li ul.depth3 li a{word-break:keep-all;overflow-wrap:normal;white-space:normal;}
+  header .sitemap nav ol li.depth1 ul.depth2 li.has_depth3 ul.depth3{display:none;}
+</style>
+
+<!-- CORP -->
+<div class="header_inner corp">
+  <div class="logo_box">
+    <!-- a = 홈페이지 로고 -->
+    <!-- a의 이미지는은 style.css에서 제어하세요 -->
+    <a class="logo" href="/en/index.html">Baron Consultants</a>
+  </div>
+
+  <!-- 오픈메뉴 경우 -->
+  <nav class="nav"></nav>
+
+  <!-- 버튼형 경우 -->
+    <div class="header_R">
+        <a class="header_qa header_qa_button" href="/en/inquiry.html" aria-label="Software inquiries">
+          <svg viewBox="0 0 24 24" aria-hidden="true"><circle cx="12" cy="12" r="10" /><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3M12 17h.01" /></svg>
+          <span>S/W Inquiry</span>
+        </a>
+        <div class="language">
+            <a href="/ko/index.html">KR</a>
+          <a href="#" class="on">EN</a>
+        </div>
+
+        <div class="header_login">
+          <button type="button" class="header_login_trigger" aria-label="LOGIN" aria-expanded="false" aria-controls="header-login-menu">
+            <img src="/assets/img/ico_user.svg" alt="" />
+          </button>
+          <div class="header_login_menu" id="header-login-menu">
+            <a class="header_login_link" href="../en/br_future.html">LOGIN</a>
+          </div>
+        </div>
+
+        <button class="btn_menu" data-value="sitemap">
+            <div></div>
+            <div></div>
+            <div></div>
+        </button>
+    </div>
+</div>
+
+<div class="popup_wrap sitemap">
+  <div class="popup_contents_wrap" data-lenis-prevent-wheel>
+    <div class="popup_header">
+      <div class="logo_box">
+        <a class="logo" href="/en/index.html">Baron Consultants</a>
+      </div>
+      <button class="btn_close"><i class="close"></i></button>
+    </div>
+
+    <nav class="nav"></nav>
+  </div>
+</div>
@@ -0,0 +1,58 @@
+<!-- Anonymous menu. Services Provided and D/X Experience stay disabled until sign-in. -->
+<ol>
+  <li class="depth1">
+    <span><em>Designing the Future</em>Baron Consultants</span>
+    <ul class="depth2">
+      <li><a href="/en/br_future.html">Future Presented by Baron</a></li>
+      <li><a href="/en/br_tech.html">Technology Realized by Baron</a></li>
+      <li><a href="/en/br_value.html">The Values Pursued by Baron</a></li>
+    </ul>
+  </li>
+  <li class="depth1">
+    <span><em>Leading the Change</em>Digital Transformation</span>
+    <ul class="depth2">
+      <li><a href="/en/dt_explain.html">D/X <br>Infrastructure Construction</a></li>
+      <li><a href="/en/dt_sw.html">D/X & Software</a></li>
+      <li><a href="/en/dt_use.html">Leveraging D/X<br>Infrastructure Construction</a></li>
+    </ul>
+  </li>
+  <li class="depth1 nav-login-required" data-login-tooltip="Sign in to access these services.">
+    <span><em>Realizing Value</em>Services Provided</span>
+    <ul class="depth2">
+      <li><a href="/en/sv_solution.html" data-auth-disabled="true" aria-disabled="true" tabindex="-1">Solution Program</a></li>
+      <li><a href="/en/sv_sw.html" data-auth-disabled="true" aria-disabled="true" tabindex="-1">Package Software</a></li>
+      <li><a href="/en/sv_bigroom.html" data-auth-disabled="true" aria-disabled="true" tabindex="-1">Big Room</a></li>
+    </ul>
+  </li>
+  <li class="depth1 nav-login-required" data-login-tooltip="Sign in to access this experience.">
+    <span><em>Experiencing the Vision</em>D/X Experience</span>
+    <ul class="depth2">
+      <li><a href="/en/dx.html" data-auth-disabled="true" aria-disabled="true" tabindex="-1">D/X experience<br>to experience the vision</a></li>
+    </ul>
+  </li>
+  <li class="depth1">
+    <span><em>Telling a story</em>PR Center</span>
+    <ul class="depth2">
+      <li><a href="/en/pr_news.html">Baron News</a></li>
+      <li><a href="/en/pr_brochure.html">Brochure</a></li>
+      <li><a href="/en/pr_ci.html">CI</a></li>
+    </ul>
+  </li>
+  <li class="depth1 nav-recruit">
+    <span
+      ><a href="/recruit/br_recruit.html" target="_blank" rel="noopener noreferrer"
+        ><em>Completed by Relationship</em>Recruit<i></i></a
+    ></span>
+    <ul class="depth2">
+      <li>
+        <a href="/recruit/br_recruit.html" target="_blank" rel="noopener noreferrer" aria-label="Recruit (opens in a new tab)">Recruit<i aria-hidden="true"></i></a>
+      </li>
+    </ul>
+  </li>
+  <!-- <li class="depth1">
+    <span onclick="location.href='../en/faq.html'"><em>Supporting customers</em>FAQ</span>
+    <ul class="depth2">
+      <li><a href="/en/faq.html">Frequently Asked Questions</a></li>
+    </ul>
+  </li> -->
+</ol>
@@ -0,0 +1,57 @@
+<ol>
+  <li class="depth1">
+    <span><em>Designing the Future</em>Baron Consultants</span>
+    <ul class="depth2">
+      <li><a href="/en/br_future.html">Future Presented by Baron</a></li>
+      <li><a href="/en/br_tech.html">Technology Realized by Baron</a></li>
+      <li><a href="/en/br_value.html">The Values Pursued by Baron</a></li>
+    </ul>
+  </li>
+  <li class="depth1">
+    <span><em>Leading the Change</em>Digital Transformation</span>
+    <ul class="depth2">
+      <li><a href="/en/dt_explain.html">D/X <br>Infrastructure Construction</a></li>
+      <li><a href="/en/dt_sw.html">D/X & Software</a></li>
+      <li><a href="/en/dt_use.html">Leveraging D/X<br>Infrastructure Construction</a></li>
+    </ul>
+  </li>
+  <li class="depth1">
+    <span><em>Realizing Value</em>Services Provided</span>
+    <ul class="depth2">
+      <li><a href="/en/sv_solution.html">Solution Program</a></li>
+      <li><a href="/en/sv_sw.html">Package Software</a></li>
+      <li><a href="/en/sv_bigroom.html">Big Room</a></li>
+    </ul>
+  </li>
+  <li class="depth1">
+    <span><em>Experiencing the Vision</em>D/X Experience</span>
+    <ul class="depth2">
+      <li><a href="/en/dx.html">D/X experience<br>to experience the vision</a></li>
+    </ul>
+  </li>
+  <li class="depth1">
+    <span><em>Telling a story</em>PR Center</span>
+    <ul class="depth2">
+      <li><a href="/en/pr_news.html">Baron News</a></li>
+      <li><a href="/en/pr_brochure.html">Brochure</a></li>
+      <li><a href="/en/pr_ci.html">CI</a></li>
+    </ul>
+  </li>
+  <li class="depth1 nav-recruit">
+    <span
+      ><a href="/recruit/br_recruit.html" target="_blank" rel="noopener noreferrer"
+        ><em>Completed by Relationship</em>Recruit<i></i></a
+    ></span>
+    <ul class="depth2">
+      <li>
+        <a href="/recruit/br_recruit.html" target="_blank" rel="noopener noreferrer" aria-label="Recruit (opens in a new tab)">Recruit<i aria-hidden="true"></i></a>
+      </li>
+    </ul>
+  </li>
+  <!-- <li class="depth1">
+    <span onclick="location.href='../en/faq.html'"><em>Supporting customers</em>FAQ</span>
+    <ul class="depth2">
+      <li><a href="/en/faq.html">Frequently Asked Questions</a></li>
+    </ul>
+  </li> -->
+</ol>