geun1416 2 years ago
parent
commit
6be1e85dac
  1. 54
      html/css/common.css
  2. 83
      html/include/header.html
  3. 186
      html/index.html
  4. 45
      html/js/common.js

54
html/css/common.css

@ -11,7 +11,7 @@ body,html{overflow-x: hidden;}
.pal-icon{vertical-align: middle;} .pal-icon{vertical-align: middle;}
/*header*/ /*header*/
#hd {background:rgba(0, 0, 0, 0);z-index:1000;position:fixed;width:100%; top:0;overflow:hidden; transition:0.6s ease; -webkit-transition:0.6s ease;} #hd {background:rgba(0, 0, 0, 0);z-index:1000;position:fixed;width:100%; top:0;overflow:hidden; transition:0.6s ease; -webkit-transition:0.6s ease;}
#hd:hover{background:#fff; border-bottom:1px solid rgba(0, 0, 0, 0.5);} /* #hd:hover{background:#fff; border-bottom:1px solid rgba(0, 0, 0, 0.5);} */
.color_logo{display:none;} .color_logo{display:none;}
.wh_logo{display:block;} .wh_logo{display:block;}
#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden} #hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
@ -116,7 +116,7 @@ position:fixed;right:50px;bottom:20px;z-index:999;display:flex;justify-content:c
.topBtn i{font-size:20px;color:#fff;} .topBtn i{font-size:20px;color:#fff;}
/*footer*/ /*footer*/
#footer{min-width:1280px;background:#21272e;position:absolute;bottom:0;width:100%;height:200px;} #footer{background:#21272e;position:absolute;bottom:0;width:100%;height:200px;}
.footer-box{display:flex;} .footer-box{display:flex;}
.ft-logo{padding-right:80px;} .ft-logo{padding-right:80px;}
.ft-logo img{width:200px;} .ft-logo img{width:200px;}
@ -325,3 +325,53 @@ position: absolute;top:-25px;left:50%;transform: translateX(-50%);box-shadow:2px
.example-box-txt li span{display:block;width:250px;min-height:58px;background:#fff;border-radius:30px;border:1px solid #2290c9; .example-box-txt li span{display:block;width:250px;min-height:58px;background:#fff;border-radius:30px;border:1px solid #2290c9;
padding:18px 20px 15px 20px;font-weight:500;margin: 0px auto;font-size:1rem;box-shadow:3px 6px 5px #ddd;} padding:18px 20px 15px 20px;font-weight:500;margin: 0px auto;font-size:1rem;box-shadow:3px 6px 5px #ddd;}
.example-info + .example-info .example-box-ti{border-top:0;} .example-info + .example-info .example-box-ti{border-top:0;}
.mg_box{display:none;}
.mg_box{width:100%; overflow:hidden;top:0; right:0; z-index:9;}
.mg_box.on{z-index:9999;}
.m_gnb{position:absolute; top:0; right:-100%; width:100%; z-index:9; transition:0.3s ease; -webkit-transition:0.3s ease;}
.m_gnb.on{z-index:9999; right:0;}
div.mg_btn{position:absolute; top:15px; right:10px; z-index:99999;
transition:0.5s ease; -webkit-transition:0.5s ease; -o-transition:0.5s ease;
transition-delay:0.3s; -webkit-transition-delay:0.3s; -o-transition-delay:0.3s;
}
div.mg_btn span{display:block; width:42px; height:2px; margin:10px; background:#fff; transition:0.5s ease; -webkit-transition:0.5s ease;}
div.mg_btn.on{transform:rotate(45deg);}
div.mg_btn.on span{width:0px; height:2px; background:#000;}
div.mg_btn.on span:first-child{width:42px; transform:translateY(12px)}
div.mg_btn.on span:last-child{width:42px; transform:translateY(-12px) rotate(90deg);}
.m_gnb div.mg_wrap{width:500px; background:#fff;}
.m_gnb div.mg_wrap.on{position:Absolute; right:0; z-index:999;}
.m_gnb div.mg_wrap>ul{padding:100px;}
.m_gnb div.mg_wrap>ul>li{padding:5px 0;}
.m_gnb div.mg_wrap>ul>li>a{font-size:26px; font-weight:900; color:#444!important;}
.m_gnb div.mg_wrap>ul>li>ul{display:none;padding:10px 0;}
.m_gnb div.mg_wrap>ul>li>ul>li{padding:5px 0;}
.m_gnb div.mg_wrap>ul>li>ul>li>a{font-size:20px;color:#444;}
.m_gnb div.mg_bk{display:none; width:100%; height:100%; background:#222; opacity:0; transition:0.5s ease; -webkit-transition:0.5s ease;}
.m_gnb div.mg_bk.on{display:block; opacity:0.9;}
/*1024이하 메인*/
#mo-main .swiper-button-next:after, #mo-main .swiper-rtl .swiper-button-prev:after{color:#fff;font-size:25px;}
#mo-main .swiper-button-prev:after, #mo-main .swiper-rtl .swiper-button-next:after{color:#fff;font-size:25px;}
@media screen and (max-width:1024px){
#fullpage{display:none}
.pc-hd{display:none}
html,body{height:100%!important;}
#hd:hover{background:inherit!important;}
#mo-main .main-bn{height:520px;background-size:cover;}
#container{height:100%;}
.inner{width:100%;padding:0 20px;}
.bg-square{width:200px;height:200px;top:-50px}
.main-txt-box{padding:0 40px;}
.main-bn .inner{padding-top:60px;}
.bg01 .inner{padding:0 60px;}
.bg02 .main-txt-box, .bg03 .main-txt-box{padding-left:40px;}
.mg_btn{display:block;}
.main-bn h2{font-size:2rem}
.main-bn .big{font-size:4rem}
.main-txt-box b{font-size:2.5rem;}
.main-txt-box{font-size:1.25rem;word-break: keep-all;}
}

83
html/include/header.html

@ -19,6 +19,35 @@
// $('.hd-sub .wh_logo').css('display', 'none'); // $('.hd-sub .wh_logo').css('display', 'none');
}); });
$('html.on #hd_wrapper').css('height', '100vh');
//햄버거메뉴 X버튼 활성화 및 메뉴바 슬라이딩
$('.mg_btn').click(function(){
$('.mg_box').toggleClass('on');
$('.m_gnb').toggleClass('on');
$('.mg_btn').toggleClass('on');
$('.mg_wrap').toggleClass('on');
$('.mg_bk').toggleClass('on');
$('html').toggleClass('on');
$('#logo').toggleClass('on');
$('.mg_wrap>ul>li>ul').slideUp(100);
});
//메뉴바 FULL HEIGHT
$('.mg_box').css('height', $(window).height());
$('.m_gnb').css('height', $(window).height());
$('.mg_wrap').css('height', $(window).height());
$(window).resize(function(){
$('.mg_box').css('height', $(window).height());
$('.m_gnb').css('height', $(window).height());
$('.mg_wrap').css('height', $(window).height());
});
//리스트제목 클릭시 리스트 노출
$('.mg_wrap>ul>li').click(function(){
$(this).children('ul:not(:animated)').slideToggle(500);
});
}); });
</script> </script>
@ -36,7 +65,7 @@
</a> </a>
</div> </div>
<nav id="gnb"> <nav id="gnb" class="pc-hd">
<h2>메인메뉴</h2> <h2>메인메뉴</h2>
<div class="gnb_wrap"> <div class="gnb_wrap">
<ul id="gnb_1dul"> <ul id="gnb_1dul">
@ -82,4 +111,56 @@
</nav> </nav>
</div> </div>
<div class="mg_btn">
<span></span>
<span></span>
<span></span>
</div>
<div class="mg_box">
<nav class="m_gnb">
<div class="mg_wrap">
<ul>
<li class="gnb_1dli">
<a href="#" target="_self" class="gnb_1da">COMPANY</a>
<span class="bg">하위분류</span>
<ul class="gnb_2dul">
<li class="gnb_2dli"><a href="company.html" target="_self" class="gnb_2da">기업정보</a></li>
<li class="gnb_2dli"><a href="history.html" target="_self" class="gnb_2da">연혁</a></li>
<li class="gnb_2dli"><a href="partner.html" target="_self" class="gnb_2da">고객 및 협력사</a></li>
<li class="gnb_2dli"><a href="map.html" target="_self" class="gnb_2da">찾아오시는 길</a></li>
</ul>
</li>
<li class="gnb_1dli">
<a href="#l" target="_self" class="gnb_1da">BUSINESS</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>
<li class="gnb_2dli"><a href="business02.html" target="_self" class="gnb_2da">R&D</a></li>
<!-- <li class="gnb_2dli"><a href="business03.html" target="_self" class="gnb_2da">구축사례</a></li> -->
</ul>
</li>
<li class="gnb_1dli">
<a href="#" target="_self" class="gnb_1da">SOLUTION</a>
<span class="bg">하위분류</span>
<ul class="gnb_2dul">
<li class="gnb_2dli"><a href="solution01.html" target="_self" class="gnb_2da">비행상황관리 시스템</a></li>
<li class="gnb_2dli"><a href="solution02.html" target="_self" class="gnb_2da">IBE(Internet Booking Engine)</a></li>
<li class="gnb_2dli"><a href="solution03.html" target="_self" class="gnb_2da">스마트 관광 예약 플랫폼</a></li>
<li class="gnb_2dli"><a href="solution04.html" target="_self" class="gnb_2da">KT G-cloud 인천총판</a></li>
</ul>
</li>
<li class="gnb_1dli">
<a href="#" target="_self" class="gnb_1da">CONTACT US</a>
<span class="bg">하위분류</span>
<ul class="gnb_2dul">
<li class="gnb_2dli"><a href="message.html" target="_self" class="gnb_2da">문의하기</a></li>
<li class="gnb_2dli"><a href="employ.html" target="_self" class="gnb_2da">채용정보</a></li>
</ul>
</li>
</ul>
</div>
<div class="mg_bk"></div>
</nav>
</div>
</div> </div>

186
html/index.html

@ -51,6 +51,9 @@ body,html{
overflow-y: hidden !important; overflow-y: hidden !important;
position: relative; position: relative;
} }
@media screen and(max-width:1024px) {
body,html{overflow-y:auto!important;}
}
</style> </style>
<body> <body>
<!--header--> <!--header-->
@ -465,6 +468,189 @@ body,html{
</div> </div>
</div> </div>
</div> </div>
<div id="mo-main">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide slide-box">
<div class="section main-bn bg01">
<div class="inner">
<h2 class="wow fadeInUp" data-wow-duration="2s">가치를 존중하며 신뢰를 바탕으로 실천하는 기업</h2>
<span class="wow fadeInUp big" data-wow-duration="3s">PAL Networks</span>
<span class="wow fadeInUp sm" data-wow-duration="4s">항공·전문 IT산업분야의 소프트웨어 개발 전문 기업</span>
</div>
</div>
</div>
<div class="swiper-slide slide-box">
<div class="section main-bn bg02">
<div class="inner">
<span class="wow fadeInLeft bg-square"></span>
<p class="wow fadeInUp main-txt-box" data-wow-duration="2s">
<b>팔네트웍스</b><br/>
<b>‘인천 항공 산업 선도기업’</b> 유망기업으로 선정된 항공 소프트웨어 전문 기업입니다.
</p>
</div>
</div>
</div>
<div class="swiper-slide slide-box">
<div class="section main-bn bg03">
<div class="inner">
<span class="wow fadeInLeft bg-square"></span>
<p class="wow fadeInUp main-txt-box" data-wow-duration="2s">
<b>미래 항공산업과 지상의 이동수단</b> 을 연결하는<br/>
<b>미래 모빌리티</b>를 준비합니다.
</p>
</div>
</div>
</div>
</div>
<!-- <div class="swiper-pagination"></div> -->
<!-- If we need navigation buttons -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div><!--//슬라이드 끝-->
<div class="section main-bn bg04">
<div class="inner">
<h4 class="wow fadeInDown">
팔네트웍스는 현재의 항공 플랫폼을 제공하고<br/>
미래의 항공플랫폼인 UAM/PAV를 준비합니다.
</h4>
<ul class="wow fadeInUp">
<li class="box">
<a href="#none">
<div class="list-box">
<span class="icon"><img src="images/mainicon02.png"></span>
<span class="ti">항공예약 플랫폼</span>
</div>
<div class="line-box">
<div class="line">
<span>
<span class="txt">
인터넷 부킹 엔진 기반<br/>
항공예약 서비스
</span>
<span class="more">
자세히보기
</span>
</span>
</div>
</div>
</a>
</li>
<li class="box">
<a href="#none">
<div class="list-box">
<span class="icon"><img src="images/mainicon01.png"></span>
<span class="ti">스마트 관광 예약 플랫폼</span>
</div>
<div class="line-box">
<div class="line">
<span>
<span class="txt">
항공권, 먹거리, 공연 등<br/>
통합 발권 서비스
</span>
<span class="more">
자세히보기
</span>
</span>
</div>
</div>
</a>
</li>
<li class="box">
<a href="#none">
<div class="list-box">
<span class="icon"><img src="images/mainicon04.png"></span>
<span class="ti">VR/AR 시뮬레이터</span>
</div>
<div class="line-box">
<div class="line">
<span>
<span class="txt">
예비 조종사를 위한<br/>
항공 시뮬레이터
</span>
<span class="more">
자세히보기
</span>
</span>
</div>
</div>
</a>
</li>
<li class="box">
<a href="#none">
<div class="list-box">
<span class="icon"><img src="images/mainicon05.png"></span>
<span class="ti">상황관제 시스템</span>
</div>
<div class="line-box">
<div class="line">
<span>
<span class="txt">
환경/상황관제/안티드론 등<br/>
PAV/UAM/DRONE<br/>
제어 솔루션
</span>
<span class="more">
자세히보기
</span>
</span>
</div>
</div>
</a>
</li>
<li class="box">
<a href="#none">
<div class="list-box">
<span class="icon"><img src="images/mainicon03.png"></span>
<span class="ti">클라우드</span>
</div>
<div class="line-box">
<div class="line">
<span>
<span class="txt">
고객사에 맞는 다양한<br/>
클라우드 서비스 제공
</span>
<span class="more">
자세히보기
</span>
</span>
</div>
</div>
</a>
</li>
<li class="box">
<a href="#none">
<div class="list-box">
<span class="icon"><img src="images/mainicon06.png"></span>
<span class="ti">드론 3D 촬영</span>
</div>
<div class="line-box">
<div class="line">
<span>
<span class="txt">
드론을 활용한<br/>
3D 촬영
</span>
<span class="more">
자세히보기
</span>
</span>
</div>
</div>
</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div> </div>
<!--//main--> <!--//main-->

45
html/js/common.js

@ -8,6 +8,7 @@ $(function(){
licenseKey: '13F1F552-6ACE43B7-95262729-9E0B4778', licenseKey: '13F1F552-6ACE43B7-95262729-9E0B4778',
//options here //options here
anchors:['home', 'works', 'mobility','skills', 'news'], anchors:['home', 'works', 'mobility','skills', 'news'],
// responsiveWidth: 1024,
autoScrolling:true, autoScrolling:true,
scrollHorizontally: true, scrollHorizontally: true,
navigation:true, navigation:true,
@ -19,39 +20,39 @@ $(function(){
} }
if(destination.anchor === 'skills' || destination.anchor === 'news') { if(destination.anchor === 'skills' || destination.anchor === 'news') {
$('.gnb_1da').css('color', '#000'); $('.pc-hd .gnb_1da').css('color', '#000');
$('.wh_logo').css('display', 'none'); $('.pc-hd .wh_logo').css('display', 'none');
$('.color_logo').css('display', 'block'); $('.pc-hd .color_logo').css('display', 'block');
$('#hd').on('mouseenter', function () { $('#hd').on('mouseenter', function () {
$('.wh_logo').css('display', 'block'); $('.pc-hd .wh_logo').css('display', 'block');
$('.color_logo').css('display', 'none'); $('.pc-hd .color_logo').css('display', 'none');
}); });
$('#hd').on('mouseleave', function () { $('#hd').on('mouseleave', function () {
$('.wh_logo').css('display', 'none'); $('.pc-hd .wh_logo').css('display', 'none');
$('.color_logo').css('display', 'block'); $('.pc-hd .color_logo').css('display', 'block');
$('.gnb_1da').css('color', '#000'); $('.pc-hd .gnb_1da').css('color', '#000');
}); });
} else { } else {
$('.gnb_1da').css('color', '#fff'); $('.pc-hd .gnb_1da').css('color', '#fff');
} }
}, },
onLeave: function(origin, destination){ onLeave: function(origin, destination){
new WOW().init(); new WOW().init();
console.log(destination) console.log(destination)
if(destination.anchor === 'skills' || destination.anchor === 'news') { if(destination.anchor === 'skills' || destination.anchor === 'news') {
$('.gnb_1da').css('color', '#fff'); $('.pc-hd .gnb_1da').css('color', '#fff');
} else { } else {
$('.gnb_1da').css('color', '#fff'); $('.pc-hd .gnb_1da').css('color', '#fff');
$('.wh_logo').css('display', 'block'); $('.pc-hd .wh_logo').css('display', 'block');
$('.color_logo').css('display', 'none'); $('.pc-hd .color_logo').css('display', 'none');
$('#hd').on('mouseenter', function () { $('#hd').on('mouseenter', function () {
$('.wh_logo').css('display', 'block'); $('.pc-hd .wh_logo').css('display', 'block');
$('.color_logo').css('display', 'none'); $('.pc-hd .color_logo').css('display', 'none');
}); });
$('#hd').on('mouseleave', function () { $('#hd').on('mouseleave', function () {
$('.wh_logo').css('display', 'block'); $('.pc-hd .wh_logo').css('display', 'block');
$('.color_logo').css('display', 'none'); $('.pc-hd .color_logo').css('display', 'none');
$('.gnb_1da').css('color', '#fff'); $('.pc-hd .gnb_1da').css('color', '#fff');
}); });
} }
}, },
@ -63,15 +64,15 @@ $(function(){
$(function(){ $(function(){
new Swiper('.swiper-container'); new Swiper('#mo-main .swiper-container');
const swiper = new Swiper('.swiper-container', { const swiper = new Swiper('#mo-main .swiper-container', {
//기본 셋팅 //기본 셋팅
//방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평 //방향 셋팅 vertical 수직, horizontal 수평 설정이 없으면 수평
direction: 'horizontal', direction: 'horizontal',
//한번에 보여지는 페이지 숫자 //한번에 보여지는 페이지 숫자
slidesPerView: 4, slidesPerView: 1,
//페이지와 페이지 사이의 간격 //페이지와 페이지 사이의 간격
spaceBetween: 100, spaceBetween: 0,
//드레그 기능 true 사용가능 false 사용불가 //드레그 기능 true 사용가능 false 사용불가
debugger: true, debugger: true,
//마우스 휠기능 true 사용가능 false 사용불가 //마우스 휠기능 true 사용가능 false 사용불가

Loading…
Cancel
Save