From ba7a3ef06749cb7a4644f39a70402c1c33513c57 Mon Sep 17 00:00:00 2001
From: geun1416 <1416geun@palnet.co.kr>
Date: Thu, 2 Jun 2022 17:47:52 +0900
Subject: [PATCH] .

---
 html/mobile/css/common.css      |  12 +-
 html/mobile/include/header.html |  41 ++++-
 html/mobile/js/common.js        | 307 --------------------------------
 3 files changed, 42 insertions(+), 318 deletions(-)

diff --git a/html/mobile/css/common.css b/html/mobile/css/common.css
index 1f0a057..367c787 100644
--- a/html/mobile/css/common.css
+++ b/html/mobile/css/common.css
@@ -1,3 +1,11 @@
 @charset "utf-8";
-html,body{max-width:1024px;width:100%;margin:0px auto;}
-#container{width:100%;}
\ No newline at end of file
+html,body{max-width:1024px;width:100%;margin:0px auto;position:relative;}
+#container{width:100%;}
+
+#gnb{background:#fff;width:80%;height:100vh;position:absolute;right:0;top:0;border-left:3px solid #2290c9;}
+#gnb h2, #gnb span.bg{display:none;}
+.gnb_1dli{font-weight:500;font-size:1rem;}
+.gnb_2dli + .gnb_2dli{margin-top:10px;}
+.gnb_1dli > a{height:60px;padding:0 30px;display:flex;justify-content:space-between;align-items: center;border-bottom:1px solid #ddd;}
+.gnb_1dli > a + a{padding-top:0px;}
+.gnb_2dul{display:none;padding:20px 30px;background:#f4f4f4;font-weight:400;font-size:0.875rem}
\ No newline at end of file
diff --git a/html/mobile/include/header.html b/html/mobile/include/header.html
index 5eef746..d891ca2 100644
--- a/html/mobile/include/header.html
+++ b/html/mobile/include/header.html
@@ -1,8 +1,32 @@
  <script>
-  //헤더 풀다운메뉴
-  $(document).ready(function () {
-
+  //헤더 아코디언 메뉴
+  $(document).ready(function() {
+  $(".gnb_1dli > a").on("click", function() {
+    if ($(this).hasClass("active")) {
+      $(this).removeClass("active");
+      $(this)
+        .siblings(".gnb_2dul")
+        .slideUp(200);
+      $(".gnb_1dli > a i")
+        .removeClass("xi-angle-up-min")
+        .addClass("xi-angle-down-min");
+    } else {
+      $(".gnb_1dli > a i")
+        .removeClass("xi-angle-up-min")
+        .addClass("xi-angle-down-min");
+      $(this)
+        .find("i")
+        .removeClass("xi-angle-down-min")
+        .addClass("xi-angle-up-min");
+      $(".gnb_1dli > a").removeClass("active");
+      $(this).addClass("active");
+      $(".gnb_2dul").slideUp(200);
+      $(this)
+        .siblings(".gnb_2dul")
+        .slideDown(200);
+    }
   });
+});
 </script> 
 
 <div id="hd">
@@ -15,16 +39,15 @@
     <div id="logo">
       <a href="index.html">
         <img src="../images/pal_logo_wh.png" class="wh_logo">
-        <img src="../images/pal_logo.png" class="color_logo">
+        <!-- <img src="../images/pal_logo.png" class="color_logo"> -->
       </a>
     </div>
-
     <nav id="gnb">
       <h2>메인메뉴</h2>
       <div class="gnb_wrap">
         <ul id="gnb_1dul">
           <li class="gnb_1dli">
-            <a href="company.html" target="_self" class="gnb_1da">COMPANY</a>
+            <a href="#none" target="_self" class="gnb_1da ">COMPANY<i class="xi-angle-down-min"></i></a>
             <span class="bg">하위분류</span>
             <ul class="gnb_2dul">
               <li class="gnb_2dli"><a href="company.html" target="_self" class="gnb_2da">기업정보</a></li>
@@ -34,7 +57,7 @@
             </ul>
           </li>
           <li class="gnb_1dli">
-            <a href="business01.html" target="_self" class="gnb_1da">BUSINESS</a>
+            <a href="#none" target="_self" class="gnb_1da">BUSINESS<i class="xi-angle-down-min"></i></a>
             <span class="bg">하위분류</span>
             <ul class="gnb_2dul">
               <li class="gnb_2dli"><a href="business01.html" target="_self" class="gnb_2da">System Integration</a></li>
@@ -43,7 +66,7 @@
             </ul>
           </li>
           <li class="gnb_1dli">
-            <a href="solution01.html" target="_self" class="gnb_1da">SOLUTION</a>
+            <a href="#none" target="_self" class="gnb_1da">SOLUTION<i class="xi-angle-down-min"></i></a>
             <span class="bg">하위분류</span>
             <ul class="gnb_2dul">
               <li class="gnb_2dli"><a href="solution01.html" target="_self" class="gnb_2da">비행상황관리 시스템</a></li>
@@ -53,7 +76,7 @@
             </ul>
           </li>
           <li class="gnb_1dli">
-            <a href="message.html" target="_self" class="gnb_1da">CONTACT US</a>
+            <a href="#none" target="_self" class="gnb_1da">CONTACT US<i class="xi-angle-down-min"></i></a>
             <span class="bg">하위분류</span>
             <ul class="gnb_2dul">
               <li class="gnb_2dli"><a href="message.html" target="_self" class="gnb_2da">문의하기</a></li>
diff --git a/html/mobile/js/common.js b/html/mobile/js/common.js
index d1d9869..e69de29 100644
--- a/html/mobile/js/common.js
+++ b/html/mobile/js/common.js
@@ -1,307 +0,0 @@
-
-$(function(){
-  new WOW().init();
-  AOS.init();
-
-  //$('[data-aos]').each(function(){ $(this).addClass("aos-init"); });
-    new fullpage('#fullpage', {
-      licenseKey: '13F1F552-6ACE43B7-95262729-9E0B4778',
-      //options here
-      anchors:['home', 'works', 'mobility','skills', 'news'],
-      autoScrolling:true,
-      scrollHorizontally: true,
-      navigation:true,
-      navigationPosition:'right',
-      scrollBar: true,
-        afterLoad: function(origin, destination) {   
-          if(destination.index === 0) {
-            $('.topBtn').css('display','none');
-          }
-          
-          if(destination.anchor === 'skills' || destination.anchor === 'news') {
-            $('.gnb_1da').css('color', '#000');
-            $('.wh_logo').css('display', 'none');
-            $('.color_logo').css('display', 'block');
-            $('#hd').on('mouseenter', function () {
-              $('.wh_logo').css('display', 'block');
-              $('.color_logo').css('display', 'none');      
-            });
-            $('#hd').on('mouseleave', function () {
-              $('.wh_logo').css('display', 'none');
-              $('.color_logo').css('display', 'block');     
-              $('.gnb_1da').css('color', '#000');      
-            });
-          } else {
-            $('.gnb_1da').css('color', '#fff');
-          }
-        },
-        onLeave: function(origin, destination){
-          new WOW().init(); 
-          console.log(destination)
-          if(destination.anchor === 'skills' || destination.anchor === 'news') {
-            $('.gnb_1da').css('color', '#fff');
-          } else {
-            $('.gnb_1da').css('color', '#fff');
-            $('.wh_logo').css('display', 'block');
-            $('.color_logo').css('display', 'none');
-            $('#hd').on('mouseenter', function () {
-              $('.wh_logo').css('display', 'block');
-              $('.color_logo').css('display', 'none');      
-            });
-            $('#hd').on('mouseleave', function () {
-              $('.wh_logo').css('display', 'block');
-              $('.color_logo').css('display', 'none');     
-              $('.gnb_1da').css('color', '#fff');      
-            });
-          } 
-        },        
-    });
-  
-    //methods
-   $.fn.fullpage.setAllowScrolling(false);
-});
-
-
-$(function(){
-  new Swiper('.swiper-container');
-  const swiper = new Swiper('.swiper-container', {
-     //기본 셋팅 
-     //방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평
-     direction: 'horizontal', 
-     //한번에 보여지는 페이지 숫자
-     slidesPerView: 4,
-     //페이지와 페이지 사이의 간격 
-     spaceBetween: 100, 
-     //드레그 기능 true 사용가능 false 사용불가 
-     debugger: true, 
-     //마우스 휠기능 true 사용가능 false 사용불가 
-     mousewheel: false, 
-     //반복 기능 true 사용가능 false 사용불가 
-     loop: true, 
-     //선택된 슬라이드를 중심으로 true 사용가능 false 사용불가 
-     centeredSlides: true, 
-     // 페이지 전환효과 slidesPerView효과와 같이 사용 불가 
-     // effect: 'fade', 
-     //자동 스크를링 
-     autoplay: { 
-       //시간 1000 이 1초 
-       delay: 2500, 
-       disableOnInteraction: false, 
-      }, 
-      //페이징 
-      pagination: { 
-        //페이지 기능 
-        el: '.swiper-pagination', 
-        //클릭 가능여부 
-        clickable: true, 
-      }, 
-        //방향표 
-        navigation: { 
-        //다음페이지 설정 
-        nextEl: '.swiper-button-next', 
-        //이전페이지 설정 
-        prevEl: '.swiper-button-prev', 
-      }, 
-    });
-
-});
-
-
-$(function(){
-
-  "use strict";
-
-  var canvas = document.getElementById('canvas'),
-    ctx = canvas.getContext('2d'),
-    w = canvas.width = window.innerWidth,
-    h = canvas.height = window.innerHeight,
-      
-    hue = 217,
-    stars = [],
-    count = 0,
-    maxStars = 1000;
-  
-  // Thanks @jackrugile for the performance tip! https://codepen.io/jackrugile/pen/BjBGoM
-  // Cache gradient
-  var canvas2 = document.createElement('canvas'),
-      ctx2 = canvas2.getContext('2d');
-      canvas2.width = 100;
-      canvas2.height = 100;
-  var half = canvas2.width/2,
-      gradient2 = ctx2.createRadialGradient(half, half, 0, half, half, half);
-      gradient2.addColorStop(0.025, '#fff');
-      gradient2.addColorStop(0.1, 'hsl(' + hue + ', 61%, 33%)');
-      gradient2.addColorStop(0.25, 'hsl(' + hue + ', 64%, 6%)');
-      gradient2.addColorStop(1, 'transparent');
-  
-      ctx2.fillStyle = gradient2;
-      ctx2.beginPath();
-      ctx2.arc(half, half, half, 0, Math.PI * 2);
-      ctx2.fill();
-  
-  // End cache
-  
-  function random(min, max) {
-    if (arguments.length < 2) {
-      max = min;
-      min = 0;
-    }
-    
-    if (min > max) {
-      var hold = max;
-      max = min;
-      min = hold;
-    }
-  
-    return Math.floor(Math.random() * (max - min + 1)) + min;
-  }
-  
-  function maxOrbit(x,y) {
-    var max = Math.max(x,y),
-        diameter = Math.round(Math.sqrt(max*max + max*max));
-    return diameter/2;
-  }
-  
-  var Star = function() {
-  
-    this.orbitRadius = random(maxOrbit(w,h));
-    this.radius = random(60, this.orbitRadius) / 12;
-    this.orbitX = w / 2;
-    this.orbitY = h / 2;
-    this.timePassed = random(0, maxStars);
-    this.speed = random(this.orbitRadius) / 1000000;
-    this.alpha = random(2, 10) / 10;
-  
-    count++;
-    stars[count] = this;
-  }
-  
-  Star.prototype.draw = function() {
-    var x = Math.sin(this.timePassed) * this.orbitRadius + this.orbitX,
-        y = Math.cos(this.timePassed) * this.orbitRadius + this.orbitY,
-        twinkle = random(10);
-  
-    if (twinkle === 1 && this.alpha > 0) {
-      this.alpha -= 0.05;
-    } else if (twinkle === 2 && this.alpha < 1) {
-      this.alpha += 0.05;
-    }
-  
-    ctx.globalAlpha = this.alpha;
-      ctx.drawImage(canvas2, x - this.radius / 2, y - this.radius / 2, this.radius, this.radius);
-    this.timePassed += this.speed;
-  }
-  
-  for (var i = 0; i < maxStars; i++) {
-    new Star();
-  }
-  
-  function animation() {
-      ctx.globalCompositeOperation = 'source-over';
-      ctx.globalAlpha = 0.8;
-      ctx.fillStyle = 'hsla(' + hue + ', 64%, 6%, 1)';
-      ctx.fillRect(0, 0, w, h)
-    
-    ctx.globalCompositeOperation = 'lighter';
-    for (var i = 1, l = stars.length; i < l; i++) {
-      stars[i].draw();
-    };  
-    
-    window.requestAnimationFrame(animation);
-  }
-  
-  animation();
-
-
-});
-
-$(function() { 
-  $('.topBtn').css('display','none');
-  $(window).scroll(function() { if ($(this).scrollTop() > 300) { 
-    $('.topBtn').fadeIn();
-      } else { 
-        $('.topBtn').fadeOut(); 
-      } 
-  });
-	$('.topBtn').click(function(){
-		$('html, body').animate({scrollTop:0},300);
-	});
-});
-
-
-$(function(){
-  new Swiper('.swiper-container-history');
-  const swiper = new Swiper('.swiper-container-history', {
-     //기본 셋팅 
-     direction: 'horizontal', 
-     slidesPerView: 1, // 슬라이드를 한번에 3개를 보여준다
-     slidesPerGroup :1, // 그룹으로 묶을 수, slidesPerView 와 같은 값을 지정하는게 좋음
-     spaceBetween: 100, // 슬라이드간 padding 값 30px 씩 떨어뜨려줌
-     
-     // 그룹수가 맞지 않을 경우 빈칸으로 메우기
-     // 3개가 나와야 되는데 1개만 있다면 2개는 빈칸으로 채워서 3개를 만듬
-     loopFillGroupWithBlank : true,
-
-     loop: true,
-     autoplay: false,
-      //방향표 
-        navigation: { 
-        //다음페이지 설정 
-        nextEl: '.swiper-button-next', 
-        //이전페이지 설정 
-        prevEl: '.swiper-button-prev', 
-      }, 
-    });
-
-});
-
-$(function(){
-	$('ul.tabs li').click(function(){
-		var tab_id = $(this).attr('data-tab');
-
-		$('ul.tabs li').removeClass('current');
-		$('.tab-content').removeClass('current');
-
-		$(this).addClass('current');
-		$("#"+tab_id).addClass('current');
-    AOS.refresh();
-	})
-});
-
-$(function(){
-  new Swiper('.swiper-container-work');
-  const swiper = new Swiper('.swiper-container-work', {
-     //기본 셋팅 
-     //방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평
-     direction: 'horizontal', 
-     //한번에 보여지는 페이지 숫자
-     slidesPerView: 3,
-     //페이지와 페이지 사이의 간격 
-     spaceBetween: 10, 
-     //드레그 기능 true 사용가능 false 사용불가 
-     debugger: true, 
-     //마우스 휠기능 true 사용가능 false 사용불가 
-     mousewheel: false, 
-     //반복 기능 true 사용가능 false 사용불가 
-     loop: true, 
-     //선택된 슬라이드를 중심으로 true 사용가능 false 사용불가 
-     centeredSlides: true, 
-     // 페이지 전환효과 slidesPerView효과와 같이 사용 불가 
-     // effect: 'fade', 
-     //자동 스크를링 
-     speed : 1000, // 슬라이드 속도 2초
-     autoplay: { 
-       //시간 1000 이 1초 
-       delay: 3000, 
-       disableOnInteraction: false, 
-      },
-        //방향표 
-        navigation: { 
-        //다음페이지 설정 
-        nextEl: '.swiper-button-next', 
-        //이전페이지 설정 
-        prevEl: '.swiper-button-prev', 
-      }, 
-    });
-
-});
\ No newline at end of file