HD현대건설기계의 모바일 웹은 세로화면에 최적화되어 있습니다.
HD현대
MISSION
시대를 이끄는 혁신과
끊임없는 도전으로
인류의 미래를 개척한다.
VISION
바다의 무한한
잠재력 실현
전동화, 자율화 기술 등 디지털 플랫폼을 기반으로
해양 모빌리티 및 친환경 에너지 산업을 선도하여
바다에서의 새로운 기회 개척
지속 가능한
미래 에너지 생태계 구현
차세대 청정에너지 기술 개발,
수소를 비롯한 미래 핵심 에너지원의 가치 사슬 역량 확대와
첨단 복합소재 기술혁신으로
글로벌 탈탄소 에너지 전환을 주도
시공간적 한계를 초월하는
산업 솔루션 제공
인공지능, 로보틱스 기술을 융합하여
산업 솔루션의 활용 범위를 획기적으로 확대함으로써
산업의 안전과 효율 향상에 기여
CORE VALUE
-
세상을 이끄는 혁신
창의적인 사고로 일하는 방식을 혁신합니다.
미래 기술로 산업의 혁신을 선도합니다. -
두려움 없는 도전
끊임없이 한계에 도전하여 새로운 가치를 창출합니다.
실패를 포용하여 두려움 없이 도전하는 문화를 만듭니다. -
서로에 대한 존중
서로의 다양성을 존중하며 열린 소통을 추구합니다.
임직원의 성장을 존중하고 지원합니다.
사회적 책임을 실천하여 더 나은 세상을 만듭니다. -
모두를 위한 안전
우리 스스로를 위한 최고의 안전 기준을 지향합니다.
안전한 제품과 서비스로 고객, 사회, 그리고 더 나아가
인류의 안전을 도모합니다.
//2024-03-08 스크립트 수정
//2024-03-12 스크립트 수정
var _thisScroll = 0;
var _isScrollTop;
if ($(window).scrollTop() > $(".intro .con2").offset().top) {
$("#subBody").removeClass("wide");
}
$(window).on("scroll", function () {
_isScrollTop = $(window).scrollTop();
if (_isScrollTop > _thisScroll) { // down
if (_isScrollTop > 0) {
if ($(window).scrollTop() > $(".intro .con2").offset().top) {
$(".intro .con1").addClass("scroll");
}
}
}
if (_isScrollTop < _thisScroll) { // up
if ($(window).scrollTop() < $(".intro .con2").offset().top) {
$(".intro .con1").removeClass("scroll");
$("#subBody").addClass("wide");
$("#subBody h2 p").css("opacity" , "0").css("transform" , "translate(0px, -500px)");
}
}
_thisScroll = _isScrollTop;
}); $(window).scroll();
gsap.fromTo("#subBody h2 p",{ transform: 'translate(0, 100px)', opacity: 0, ease: Power3.easeOut }, { duration: 0.8, 'transform': 'translate(0, 0)', opacity: 1, ease: Power3.easeOut});
gsap.fromTo("#subBody h2 p",
{
duration: 0.8,
transform: 'translate(0, 0)',
opacity: 1,
ease: Power3.easeOut
},
{
scrollTrigger: {
trigger: ".intro .con1",
start: "top top",
end: "+=95%",
scrub: 1,
},
y: -500,
opacity: 0,
}
);
ScrollTrigger.matchMedia({
"(min-width: 1025px)": function() {
gsap.to(".intro .con1 .bg", {
scrollTrigger: {
trigger: ".intro .con1",
start: "top top",
end: "+=150%",
// markers: true,
scrub : 1,
},
y : -500,
// width: "100%",
height: "1200rem"
});
gsap.to(".intro .con2 .deco", {
scrollTrigger: {
trigger: ".intro .con1",
start: "215% bottom",
end: "215% bottom",
// markers: true,
scrub : 1,
},
'transform': 'skew(0, 0deg)'
});
},
"(max-width: 1024px)": function() {
gsap.to(".intro .con1 .bg", {
scrollTrigger: {
trigger: ".intro .con1",
start: "top top",
end: "+=70%",
// markers: true,
scrub : 1,
},
y : -200,
// width: "100%",
height: "100vh"
});
gsap.to(".intro .con2 .deco", {
scrollTrigger: {
trigger: ".intro .con1",
start: "235% bottom",
end: "235% bottom",
// markers: true,
scrub : 1,
},
'transform': 'skew(0, 0deg)'
});
},
});
gsap.to(".intro .con1 .inner", {
scrollTrigger: {
trigger: ".intro .con1",
start: "top top",
end: "+=150%",
// markers: true,
scrub : 1,
},
y : -700,
opacity: 0,
});
ScrollTrigger.matchMedia({
"(min-width: 1024px)": function () {
var compIntro = gsap.timeline();
compIntro.fromTo({}, {}, {duration: 0.0001})
.fromTo(".group .con3 .for-pin .txt.step1 div", {opacity: 0, top: "30%"}, {opacity: 1, top: "50%"}, .001)
.fromTo(".group .con3 .for-pin .img.step1 img ", {scale: 1.2}, {scale: 1}, .001)
.fromTo(".group .con3 .for-pin .step2.left", {top: "100vh"}, {top: "0"}, .9)
.fromTo(".group .con3 .for-pin .step2.right", {top: "-100vh"}, {top: "0"}, .9)
.fromTo(".group .con3 .for-pin .txt.step2 div", {opacity: 0, top: "30%"}, {opacity: 1, top: "50%"}, 1.1)
.fromTo(".group .con3 .for-pin .img.step2 img ", {scale: 1.2}, {scale: 1}, 1.1)
.fromTo(".group .con3 .for-pin .step3.right", {top: "100vh"}, {top: "0"}, 1.9)
.fromTo(".group .con3 .for-pin .step3.left", {top: "-100vh"}, {top: "0"}, 1.9)
.fromTo(".group .con3 .for-pin .txt.step3 div", {opacity: 0, top: "30%"}, {opacity: 1, top: "50%"}, 2.1)
.fromTo(".group .con3 .for-pin .img.step3 img ", {scale: 1.2}, {scale: 1}, 2.1)
.fromTo({}, {}, {duration: 0.5})
var compIntroAni = ScrollTrigger.create({
animation: compIntro,
trigger: ".group .con3 .for-pin",
start: "0 top",
end: "650% bottom",
scrub: 1,
pin: true,
// markers: true,
});
},
"(max-width: 1023px)": function () {
var compIntro = gsap.timeline();
compIntro.fromTo({}, {}, {duration: 0.2})
.fromTo(".group .con3 .for-pin .step1.left", {top: "100vh"}, {top: "0"}, .2)
.fromTo(".group .con3 .for-pin .step2.img", {top: "100vh"}, {top: "0"}, .8)
.fromTo(".group .con3 .for-pin .img.step2 img", {scale: 1.2}, {scale: 1}, 1.1)
.fromTo(".group .con3 .for-pin .step2.txt", {top: "100vh"}, {top: "0"}, 1.4)
.fromTo(".group .con3 .for-pin .step3.img", {top: "100vh"}, {top: "0"}, 2)
.fromTo(".group .con3 .for-pin .img.step3 img ", {scale: 1.2}, {scale: 1}, 2.3)
.fromTo(".group .con3 .for-pin .step3.txt", {top: "100vh"}, {top: "0"}, 2.6)
.fromTo({}, {}, {duration: 0.5})
var compIntroAni = ScrollTrigger.create({
animation: compIntro,
trigger: ".group .con3 .for-pin",
start: "0 top",
end: "500% bottom",
scrub: 1,
pin: true,
// markers: true,
});
},
})