@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: swap;
	src: local('Pretendard Medium'), url('./woff2/Pretendard-Medium.woff2') format('woff2'), url('./woff/Pretendard-Medium.woff') format('woff');
}

@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: swap;
	src: local('Pretendard ExtraLight'), url('./woff2/Pretendard-ExtraLight.woff2') format('woff2'), url('./woff/Pretendard-ExtraLight.woff') format('woff');
}

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&family=Noto+Sans+SC:wght@100..900&family=Orbitron:wght@400..900&display=swap');

/* 초기화 */
html, body { margin: 0; padding: 0; width: 100%; height: 100%;}
body { background: #ebebeb; }
body * {padding: 0; margin: 0;}
p { font-family: "Noto Sans KR", sans-serif; }
li { font-family: "Noto Sans KR Regular", sans-serif; }

ul {list-style:none;}

body {
-webkit-font-smoothing: subpixel-antialiased;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-ms-user-select: none;
-moz-user-select: none;
user-select: none;
}

/* animation */
.animation { opacity: 1; transform: inherit; transition: 1s; }
.animation.animationBefore { opacity: 0; transform: scale(0); transition: 0s; }
.animation.animationBefore.t2b { transform: translateY(-10px); }
.animation.animationBefore.t2b_s { transform: translateY(-10px); }
.animation.animationBefore.T2B { transform: translateY(-100px); }
.animation.animationBefore.T2B_L { transform: translateY(-300px); }
.animation.animationBefore.b2t { transform: translateY(30px); }
.animation.animationBefore.b2t_s { transform: translateY(10px); }
.animation.animationBefore.B2T { transform: translateY(100px); }
.animation.animationBefore.B2T_L { transform: translateY(300px); }
.animation.animationBefore.l2r { transform: translateX(-30px); }
.animation.animationBefore.l2r_s { transform: translateX(-10px); }
.animation.animationBefore.L2R { transform: translateY(-200px); }
.animation.animationBefore.L2F { transform: translateX(-600px); }
.animation.animationBefore.L2R_L { transform: translateX(-300px); }
.animation.animationBefore.r2l { transform: translateX(30px); }
.animation.animationBefore.r2l_s { transform: translateX(10px); }
.animation.animationBefore.R2L { transform: translateX(100px); }
.animation.animationBefore.R2L_L { transform: translateX(300px); }
.animation.animationBefore.R2L_R { transform: translateX(-300px); }
.animation.animationBefore.RT2LB { width: 400px; transform: scale(1, 1) rotate(-45deg); -ms-transform: scale(1, 1) rotate(-45deg); -webkit-transform: scale(1, 1) rotate(-45deg); }
.animation.animationBefore.b2s_s { transform: scale(1.05, 1.05); }
.animation.animationBefore.s2b { transform: scale(0.9, 0.9); }
.animation.animationBefore.b2s { transform: scale(1.2, 1.2); }
.animation.animationBefore.B2S { transform: scale(1.5, 1.5); }
.animation.animationBefore.h2b { transform: scale(1, 0); }
.animation.animationBefore.w2b { transform: scale(0, 1); }
.animation.animationBefore.def { transform: inherit; }
.animation.animationBefore.rot { -ms-transform: rotate(-120deg) scale(0.9, 0.9); -webkit-transform: rotate(-120deg) scale(0.9, 0.9); transform: rotate(-120deg) scale(0.9, 0.9); }
.animation.animationBefore.rot2 { -ms-transform: rotate(120deg) scale(1.2, 1.2); -webkit-transform: rotate(120deg) scale(1.2, 1.2); transform: rotate(120deg) scale(1.2, 1.2); }
.animation.animationBefore.type2 { transition: 1s; }
.animation.animationBefore.round { transform: translateY(100px) translateX(80px); }
.animation.animationBefore.line { width: 0; }

.wrap { width: 1200px; height: 800px; margin: 0 auto; position: relative; overflow: hidden; background: #fff; }
.wrap::after { position: absolute; left: 100%; display: block; content: ""; width: 100%; height: 100%; background: rgba(0, 0, 0,0.5); }
/* .move { cursor: pointer;  } */
#bgmswitch { position: absolute; top: 8px; right: -41px; cursor: pointer; width:30px; height:30px; transition: 1s; }
.sound_wrap { width:1200px; height: 800px; margin: auto; position: relative; }
.page > * { position: absolute; }

.partsub li{color:#777777;}
.partsub li:hover {color:#121212}

#line { position: absolute; z-index: 500; }
.top { left: 0; top: 0; }
.left { left: 0; top: 0; }
.right { right: 0; top: 0; }
.bottom { left: 0; bottom: -4px; }



.page1 img:nth-of-type(1) { left: 0; top: 0; }
.page1 img:nth-of-type(2) { left: 75px; top: 294px; }
.page1 img:nth-of-type(3) { right:0; top: 0px; }
.page1 img:nth-of-type(4) { left: 566px; top: 459px; }

/*About HMC*/
.page2 img:nth-of-type(1) { left: 0px; top: 0px;}
.page2 img:nth-of-type(2) { left: 50px; top: 100px; }
.page2 img:nth-of-type(3) { left: 50px; top: 220px; }
.page2 img:nth-of-type(4) { left: 50px; top: 527px; }

.page3 img:nth-of-type(1) { left: 0px; top: 0px;}
.page3 img:nth-of-type(2) { left: 50px; top: 100px; }

/*ceo*/
.page4 img:nth-of-type(1) { left: 0px; top: 0px;}
.page4 img:nth-of-type(2) { left: 50px; top: 91px; }
.page4 img:nth-of-type(3) { left: 74px;  top: 288px; }
.page4 img:nth-of-type(4) { right: 74px;  top: 660px; }

/*CI소개*/
.page5 img:nth-of-type(1) { left: 0px; top: 0px;}
.page5 img:nth-of-type(2) { left: 50px; top: 71px; }
.page5 img:nth-of-type(3) { left: 50px; top: 525px; }

.page6 img:nth-of-type(1) { left: 0px; top: 0px;}
.page6 img:nth-of-type(2) { left: 50px; top: 100px; }
.page6 img:nth-of-type(3) { left: 50px; top: 604px; }


/*오시는길*/
.page7 img:nth-of-type(1) { left: 0px; top: 0px;}
.page7 img:nth-of-type(2) { left: 50px; top: 100px; }
.page7 img:nth-of-type(3) { left: 50px; top: 446px; }

/****************product****************/
/*product 공통 배경*/
.product {width: 100%; height:100%; top:0; left:0; background:url('../images/pro_bg.png') no-repeat center center;}
.product .pro_btn {display: block; right: 74px; top: 176px;}

/*AL PLATE*/
.page8 img:nth-of-type(1) { left: 0px; top: 0px;}
.page8 img:nth-of-type(2) { left: 50px; top: 100px; }
.page8 img:nth-of-type(3) { left: 50px; top: 245px;}
.page8 img:nth-of-type(4) { left: 785px; top: 122px; }
.page8 img:nth-of-type(5) { left: 50px; top: 476px; }

.page9 img:nth-of-type(1) { left: 0px; top: 0px;}
.page9 img:nth-of-type(2) { left: 50px; top: 94px; }

.page10 img:nth-of-type(1) { left: 0px; top: 0px;}
.page10 img:nth-of-type(2) { left: 50px; top: 94px; }

/*AL VENN*/
.page11 img:nth-of-type(1) { left: 0px; top: 0px;}
.page11 img:nth-of-type(2) { left: 50px; top: 100px; }
.page11 img:nth-of-type(3) { left: 74px; top: 237px; }
.page11 img:nth-of-type(4) { left: 704px; top: 160px; }
.page11 img:nth-of-type(5) { left: 50px; top: 487px; }

.page12 img:nth-of-type(1) { left: 0px; top: 0px;}
.page12 img:nth-of-type(2) { left: 50px; top: 100px; }
.page12 img:nth-of-type(3) { left: 74px; top: 469px; }

.page13 img:nth-of-type(1) { left: 0px; top: 0px;}
.page13 img:nth-of-type(2) { left: 50px; top: 100px; }
.page13 img:nth-of-type(3) { left: 74px; top: 316px; }

/*AL FOIL STOCK*/
.page14 img:nth-of-type(1) { left: 0px; top: 0px;}
.page14 img:nth-of-type(2) { left: 50px; top: 100px; }
.page14 img:nth-of-type(3) { left: 74px; top: 237px; }
.page14 img:nth-of-type(4) { left: 719px; top: 116px; }
.page14 img:nth-of-type(5) { left: 50px; top: 487px; }

.page15 img:nth-of-type(1) { left: 0px; top: 0px;}
.page15 img:nth-of-type(2) { left: 50px; top: 100px; }

/*AL Coil & Sheet*/
.page16 img:nth-of-type(1) { left: 0px; top: 0px;}
.page16 img:nth-of-type(2) { left: 50px; top: 100px; }
.page16 img:nth-of-type(3) { left: 74px; top: 237px; }
.page16 img:nth-of-type(4) { left: 704px; top: 153px; }
.page16 img:nth-of-type(5) { left: 705px; top: 456px; }
.page16 img:nth-of-type(6) { left: 50px; top: 487px; }

.page17 img:nth-of-type(1) { left: 0px; top: 0px;}
.page17 img:nth-of-type(2) { left: 50px; top: 100px; }

.page18 img:nth-of-type(1) { left: 0px; top: 0px;}
.page18 img:nth-of-type(2) { left: 50px; top: 100px; }

/*AL Tread Plate*/
.page19 img:nth-of-type(1) { left: 0px; top: 0px;}
.page19 img:nth-of-type(2) { left: 50px; top: 100px; z-index: 1; }
.page19 img:nth-of-type(3) { left: 74px; top: 243px; }
.page19 img:nth-of-type(4) { left: 704px; top: 180px; }
.page19 img:nth-of-type(5) { left: 50px; top: 493px; }

.page20 img:nth-of-type(1) { left: 0px; top: 0px;}
.page20 img:nth-of-type(2) { left: 50px; top: 100px; }

/*AL FORGING & EXTRUSION*/
.page21 img:nth-of-type(1) { left: 0px; top: 0px;}
.page21 img:nth-of-type(2) { left: 50px; top: 100px; z-index: 1;}
.page21 img:nth-of-type(3) { left: 74px; top: 333px; }
.page21 img:nth-of-type(4) { left: 704px;  top: 147px; }
.page21 img:nth-of-type(5) { left: 50px;  top: 586px; }

.page22 img:nth-of-type(1) { left: 0px; top: 0px;}
.page22 img:nth-of-type(2) { left: 50px; top: 100px; }

.page23 img:nth-of-type(1) { left: 0px; top: 0px;}
.page23 img:nth-of-type(2) { left: 50px; top: 100px; }

.page24 img:nth-of-type(1) { left: 0px; top: 0px;}
.page24 img:nth-of-type(2) { left: 50px; top: 100px; }
.page24 img:nth-of-type(3) { left: 74px; top: 406px; }

/*비철금속*/
.page25 img:nth-of-type(1) { left: 0px; top: 0px;}
.page25 img:nth-of-type(2) { left: 50px; top: 94px; }
.page25 img:nth-of-type(3) { left: 162px; top: 220px; }
.page25 img:nth-of-type(4) { left: 50px;  top: 442px; }
.page25 .btn {display: block; left: 928px;  top: 518px; }

.page26 img:nth-of-type(1) { left: 0px; top: 0px;}
.page26 img:nth-of-type(2) { left: 50px; top: 100px; }
.page26 img:nth-of-type(3) { left: 74px; top: 451px; }

.page27 img:nth-of-type(1) { left: 0px; top: 0px;}
.page27 img:nth-of-type(2) { left: 50px; top: 100px; }
.page27 img:nth-of-type(3) { left: 74px; top: 451px; }

.page28 img:nth-of-type(1) { left: 0px; top: 0px;}
.page28 img:nth-of-type(2) { left: 50px; top: 100px; }

/*합금철*/
.page29 img:nth-of-type(1) { left: 0px; top: 0px;}
.page29 img:nth-of-type(2) { left: 50px; top: 94px; z-index: 1;}
.page29 img:nth-of-type(3) { left: 92px; top: 192px; }
.page29 img:nth-of-type(4) { left: 50px;  top: 425px; }
.page29 .btn {display: block; left: 928px;  top: 502px; }

.page30 img:nth-of-type(1) { left: 0px; top: 0px;}
.page30 img:nth-of-type(2) { left: 50px; top: 100px; }
.page30 img:nth-of-type(3) { left: 74px; top: 451px; }

.page31 img:nth-of-type(1) { left: 0px; top: 0px;}
.page31 img:nth-of-type(2) { left: 50px; top: 100px; }
.page31 img:nth-of-type(3) { left: 74px; top: 451px; }

.page32 img:nth-of-type(1) { left: 0px; top: 0px;}
.page32 img:nth-of-type(2) { left: 50px; top: 100px; }
.page32 img:nth-of-type(3) { left: 74px; top: 496px; }

/****************business****************/
/*2차전지 산업*/
.page33 img:nth-of-type(1) { left: 0px; top: 0px;}
.page33 img:nth-of-type(2) { left: 50px; top: 81px; }
.page33 img:nth-of-type(3) { left: 50px; top: 275px; }
.page33 img:nth-of-type(4) { left: 74px; top: 400px; }
.page33 img:nth-of-type(5) { left: 429px; top: 400px; }
.page33 img:nth-of-type(6) { left: 784px; top: 400px; }
.page33 img:nth-of-type(7) { left: 0px; top: 636px; }

/*반도체 디스플레이용 산업*/
.page34 img:nth-of-type(1) { left: 0px; top: 0px;}
.page34 img:nth-of-type(2) { left: 50px; top: 81px; }
.page34 img:nth-of-type(3) { left: 50px; top: 275px; }
.page34 img:nth-of-type(4) { left: 74px; top: 348px; }
.page34 img:nth-of-type(5) { left: 74px; top: 506px; }
.page34 img:nth-of-type(6) { left: 0px; top: 669px; }

/*항공우주 산업*/
.page35 img:nth-of-type(1) { left: 0px; top: 0px;}
.page35 img:nth-of-type(2) { left: 50px; top: 81px; }
.page35 img:nth-of-type(3) { left: 50px; top: 275px; }
.page35 img:nth-of-type(4) { left: 74px; top: 400px; }
.page35 img:nth-of-type(5) { left: 340px; top: 400px; }
.page35 img:nth-of-type(6) { left: 606px; top: 400px; }
.page35 img:nth-of-type(7) { left: 872px; top: 400px; }
.page35 img:nth-of-type(8) { left: 0px; top: 589px; }

/*방위산업 산업*/
.page36 img:nth-of-type(1) { left: 0px; top: 0px;}
.page36 img:nth-of-type(2) { left: 50px; top: 81px; }
.page36 img:nth-of-type(3) { left: 50px; top: 275px; }
.page36 img:nth-of-type(4) { left: 74px; top: 374px; }
.page36 img:nth-of-type(5) { left: 429px; top: 374px; }
.page36 img:nth-of-type(6) { left: 784px; top: 374px; }
.page36 img:nth-of-type(7) { left: 0px; top: 610px; }

/*자동차 산업*/
.page37 img:nth-of-type(1) { left: 0px; top: 0px;}
.page37 img:nth-of-type(2) { left: 50px; top: 81px; }
.page37 img:nth-of-type(3) { left: 50px; top: 275px; }
.page37 img:nth-of-type(4) { left: 74px; top: 348px; }
.page37 img:nth-of-type(5) { left: 340px; top: 348px; }
.page37 img:nth-of-type(6) { left: 606px; top: 348px; }
.page37 img:nth-of-type(7) { left: 872px; top: 348px; }
.page37 img:nth-of-type(8) { left: 0px; top: 537px; }

/*건축 산업*/
.page38 img:nth-of-type(1) { left: 0px; top: 0px;}
.page38 img:nth-of-type(2) { left: 50px; top: 81px; }
.page38 img:nth-of-type(3) { left: 50px; top: 275px; }
.page38 img:nth-of-type(4) { left: 74px; top: 348px; }
.page38 img:nth-of-type(5) { left: 340px; top: 348px; }
.page38 img:nth-of-type(6) { left: 606px; top: 348px; }
.page38 img:nth-of-type(7) { left: 872px; top: 348px; }
.page38 img:nth-of-type(8) { left: 0px; top: 537px; }

/*금형 산업*/
.page39 img:nth-of-type(1) { left: 0px; top: 0px;}
.page39 img:nth-of-type(2) { left: 50px; top: 81px; }
.page39 img:nth-of-type(3) { left: 50px; top: 275px; }
.page39 img:nth-of-type(4) { left: 74px; top: 374px; }
.page39 img:nth-of-type(5) { left: 340px; top: 374px; }
.page39 img:nth-of-type(6) { left: 606px; top: 374px; }
.page39 img:nth-of-type(7) { left: 872px; top: 374px; }
.page39 img:nth-of-type(8) { left: 0px; top: 563px; }

/*조선해양 산업*/
.page40 img:nth-of-type(1) { left: 0px; top: 0px;}
.page40 img:nth-of-type(2) { left: 50px; top: 81px; }
.page40 img:nth-of-type(3) { left: 50px; top: 275px; }
.page40 img:nth-of-type(4) { left: 74px; top: 351px; }
.page40 img:nth-of-type(5) { left: 340px; top: 351px; }
.page40 img:nth-of-type(6) { left: 606px; top: 351px; }
.page40 img:nth-of-type(7) { left: 872px; top: 351px; }
.page40 img:nth-of-type(8) { left: 0px; top: 540px; }

/*정보통신기기 산업*/
.page41 img:nth-of-type(1) { left: 0px; top: 0px;}
.page41 img:nth-of-type(2) { left: 50px; top: 81px; }
.page41 img:nth-of-type(3) { left: 50px; top: 275px; }
.page41 img:nth-of-type(4) { left: 74px; top: 353px; }
.page41 img:nth-of-type(5) { left: 340px; top: 353px; }
.page41 img:nth-of-type(6) { left: 606px; top: 353px; }
.page41 img:nth-of-type(7) { left: 872px; top: 353px; }
.page41 img:nth-of-type(8) { left: 0px; top: 556px; }

/*포장재 산업*/
.page42 img:nth-of-type(1) { left: 0px; top: 0px;}
.page42 img:nth-of-type(2) { left: 50px; top: 81px; }
.page42 img:nth-of-type(3) { left: 50px; top: 275px; }
.page42 img:nth-of-type(4) { left: 74px; top: 374px; }
.page42 img:nth-of-type(5) { left: 429px; top: 374px; }
.page42 img:nth-of-type(6) { left: 784px; top: 374px; }
.page42 img:nth-of-type(7) { left: 0px; top: 610px; }

/*ESS 산업*/
.page43 img:nth-of-type(1) { left: 0px; top: 0px;}
.page43 img:nth-of-type(2) { left: 50px; top: 81px; }
.page43 img:nth-of-type(3) { left: 50px; top: 275px; }
.page43 img:nth-of-type(4) { left: 74px; top: 348px; }
.page43 img:nth-of-type(5) { left: 429px; top: 348px; }
.page43 img:nth-of-type(6) { left: 784px; top: 348px; }
.page43 img:nth-of-type(7) { left: 0px; top: 584px; }

/*해상풍력*/
.page44 img:nth-of-type(1) { left: 0px; top: 0px;}
.page44 img:nth-of-type(2) { left: 50px; top: 81px; }
.page44 img:nth-of-type(3) { left: 50px; top: 275px; }
.page44 img:nth-of-type(4) { left: 74px; top: 374px; }
.page44 img:nth-of-type(5) { left: 429px; top: 374px; }
.page44 img:nth-of-type(6) { left: 784px; top: 374px; }
.page44 img:nth-of-type(7) { left: 0px; top: 629px; }

/*고객문의*/
.page45 img:nth-of-type(1) { left: 0px; top: 0px;}
.page45 img:nth-of-type(2) { left: 0px; top: 81px; }
.page45 img:nth-of-type(3) { left: 74px; top: 351px; }
.page45 a { display: block; left: 418px; top: 631px; }

/*인재상*/
.page46 img:nth-of-type(1) { left: 0px; top: 0px;}
.page46 img:nth-of-type(2) { left: 50px; top: 86px; }
.page46 img:nth-of-type(3) { left: 50px; top: 229px; }
.page46 img:nth-of-type(4) { left: 606px; top: 282px; }
.page46 img:nth-of-type(5) { left: 79px; top: 402px; }
.page46 img:nth-of-type(6) { left: 606px; top: 396px; }
.page46 img:nth-of-type(7) { left: 0px; top: 521px; }

/*채용정보*/
.page47 img:nth-of-type(1) { left: 0px; top: 0px;}
.page47 img:nth-of-type(2) { left: 50px; top: 86px; }
.page47 img:nth-of-type(3) { left: 50px; top: 229px; }
.page47 a {display: block; left: 918px; top: 400px; }
.page47 img:nth-of-type(4) { left: 0px; top: 455px; }

/*복리후생*/
.page48 img:nth-of-type(1) { left: 0px; top: 0px;}
.page48 img:nth-of-type(2) { left: 50px; top: 86px; }
.page48 img:nth-of-type(3) { left: 50px; top: 248px; }
.page48 img:nth-of-type(4) { left: 50px; top: 384px; }
.page48 img:nth-of-type(5) { left: 50px; top: 520px; }
.page48 img:nth-of-type(6) { left: 50px; top: 656px; }



#logo {position: absolute; background: url('../images/logo.png'); top: 10px; left: 121px; width: 161px; height: 40px; z-index: 2000 !important; }

#menu_bar {position: absolute; right: 45px; top: 20px; cursor: pointer; }
#menu_wrap { position: absolute; z-index: 1000; width: 100%; height: 100%; right:-100%; padding: 50px 65px; box-sizing: border-box; background:rgba(255,255,255,0.9);}
#menu_wrap .close{position: absolute; top:29px; right:50px; cursor: pointer;}
#menu_wrap .sitemap_logo {position: absolute; background: url('../images/sitemap_logo.png'); bottom: 28px; right: 19px; width:89px; height: 26px;}
#menu_wrap .lang_wrap {display: flex; margin-bottom: 20px;}
#menu_wrap .lang_wrap li a {text-decoration: none; padding-right: 10px; padding-left: 10px; border-right: 1px solid #121212; color:#AAAAAA;}
#menu_wrap .lang_wrap li:nth-child(1) a {padding-left: 0px; }
#menu_wrap .lang_wrap li:nth-child(2) a {color:#121212;}
#menu_wrap .lang_wrap li:last-child a {border-right: 0;}

#btn_nav { display: none; }
#btn_nav img { position: absolute; top: 50%; transform: translateY(-50%); z-index: 11; transition: 0.5s; opacity: .3;}
#btn_nav img:nth-of-type(1) { left: 15px;}
#btn_nav img:nth-of-type(2) { right: 15px;}
#btn_nav img:hover { opacity: 1; }
#btn_nav > a.move:nth-child(1) { background-image: url(images/02_left.prev btn.png); }
#btn_nav > a.move:nth-child(2) { background-image: url(images/02_right.next btn.png); }
.slider { position: relative; width: 1120px; top: 206px; height: 450px; margin-left: 40px; overflow: hidden; }
.slider-inner { position: absolute; height: 100%; display: flex; pointer-events: none; }

.page { display:none; width: 1200px; height: 800px; overflow: hidden; position: absolute; }
.active { display: block; }

.container { cursor: grab; overflow: auto; }

.flex { display: flex; justify-content: space-between; }


.main{
	  width: 100%;
	  display: flex;
	  gap: 24px;
	}

.main > ul {width: 50%;}
.main > ul > li {margin-bottom: 38px;}

.part1{
	  display: flex;
	  flex-direction: column;
	  margin: auto;
	  gap: 8px;
    }
.move {
	  cursor: pointer;
	  color: rgb(8, 8, 8);
	  transition: color 0.3s;
	  font-weight: 500;
	  font-size: 16px;
    }

.sub p {    font-weight: 500;
    font-size: 28px;
    color: #F37320;
    padding-bottom: 5px;
    border-bottom: 1px solid #ddd;
    margin-bottom: 12px;}



 /* CSS for the overlay */
 #overlay {
	  position: fixed;
	  top: 0;
	  left: 0;
	  width: 100%;
	  height: 100%;
	  background-color: rgba(0, 0, 0, 0.7); /* You can adjust the opacity (last value) as needed */
	  display: none; /* Initially hidden */
	  z-index: 999; /* Make sure it's above other content */
    }