@import url("../fonts/HanwhaGothicFont/hanwhagothic-webfont.css");

/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0; padding: 0; border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;	
	font-family: "HanwhaGothic", sans-serif;
	/* overflow-x: clip; */
	min-width: 1440px;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
html {
	box-sizing: border-box;
}

*, *:before, *:after {
	box-sizing: border-box;
	margin:0;padding:0;
}
a {
	color: inherit;
	text-decoration: none;
}
a:hover, a:active, a:focus {
	outline: none;
	text-decoration: none;
}

img {
	max-width: 100%;
	height: auto;
}
input, button, textarea, select {
	font: inherit;
}
p, h1, h2, h3, h4, h5, h6 {
	overflow-wrap: break-word;
}

video {object-fit: cover;width: 100%; height: 100%;}


[trim-bottom] {
	clip-path: polygon(0% 0%, 100% 0%, 100% calc(100% - 2.8vw), calc(100% - 2.8vw) 100%, 2.8vw 100%, 0% calc(100% - 2.8vw))
}
[trim-all] {
	clip-path: polygon(0% 43.36px, 43.36px 0%, calc(100% - 43.36px) 0%, 100% 43.36px, 100% calc(100% - 43.36px), calc(100% - 43.36px) 100%, 43.36px 100%, 0px calc(100% - 43.36px))
}

/* Section Styles */
#hanwha-engine { max-width: 1920px; margin:0 auto; min-width: 1440px; overflow: clip;}
@media screen and (min-width: 1920px) {
	body {overflow: clip;}
	#hanwha-engine { overflow: initial; }
}

.header {position: fixed; top:0; left:0; width: 100%; z-index: 100; color:#fff;}
.header.load {transition: transform .75s ease .3s, opacity .75s ease .3s;}

.header-inner { display: flex; max-width:1920px; margin:0 auto; color:#fff; height: 108px; align-items: center; padding:0 60px;}
.header.hide {transform: translateY(-108px) !important; opacity: 0 !important;}
.header.dark * {color:#151515}
.header.dark .logo {background-image: url(../images/logo_black.png);}

.gnb ul { display: flex; flex-wrap: wrap;}
.gnb a {display: block; font-size:18px; font-weight: 700; padding:12px 24px; white-space: nowrap;}
.gnb .active a {color:#FF6600}
.logo { width: 261px; height: 44px; text-indent: -999px; overflow: hidden; background: url(../images/logo.png) no-repeat center center; background-size: contain; margin-right: auto;}
.menu {margin-left: auto; display: flex; align-items: center; gap: 23.5px;}
.menu-btn {width: 28px;height: 28px; display: flex; flex-wrap:wrap;background: transparent; padding:3.5px; gap:3.5px; justify-content: center; align-items: center; border:0; cursor:pointer; color:currentColor}
.menu-btn-line {width:6.5px;height:6.5px; background:currentColor; }

/* Module */
.content-header {display: flex;justify-content: space-between;align-items:flex-start;}
.content-header.vertical {flex-direction: column; gap:60px}
.content-header .h2-title {font-size: 20px; font-weight: 700; display: flex; gap: 18px; align-items: center;}
.content-header .h2-title:after {content:''; display: inline-block; width:40px;height:6px; background:#FF6600;}
.content-header .text-desc {font-size: 40px; line-height: 1.6; font-weight:700; color:#151515;}

/* section hero */
.section-hero {position: relative;min-height: 120vh;}
.section-hero figure {position: absolute; inset:0; width: 100%; height: 100%;}
.section-hero figure img {width: 100%; height: 100%; object-fit: cover;}
.section-hero figure video {position: absolute; inset:0;width:100%;height:100%;}
.section-hero-body {
	position: absolute; top:0; left:0; width: 100%; height: 100vh; padding:0 120px 80px;
	display: flex;flex-direction: column;justify-content: flex-end;color: #fff;
}
.section-hero-body .cate {font-size: 700px;font-size: 32px;color:#FF6600; margin-bottom: 24px;}
.section-hero-body .title {margin-bottom: 40px;font-size:88px; line-height: 1.2; font-weight: 700; color:#fff; box-shadow: 0px 4px 8px 0px #2124291A;}
.section-hero-body .desc {font-sizE:24px; font-weight: 400; color:#fff; line-height: 1.6;}
.scroll-arrow {position: absolute; inset: 80px 120px; height: calc(100vh - 160px);z-index: 1;display: flex;align-items: flex-end; justify-content: flex-end; color:#fff;}
.scroll-arrow .inner {display: flex; gap: 80px; align-items: end;}
.scroll-arrow svg {width: 30px !important;}

.bar {position: absolute; top: 100vh; left: 120px; right: 120px; height: 2px; background: rgba(201,201,201, 0.5)}
.bar-inner {position: absolute;bottom:0;left:0;width:200px;height:4px;background-color: #fff;}

/* section-why-hanwha-engine */
.section-why-hanwha-engine {padding-top: 160px;}
.section-why-hanwha-engine .content-header {padding:0 120px;}
.section-why-hanwha-engine .content-visual {margin-top: 120px;margin-bottom: 160px; padding:0 120px;display: flex; justify-content: space-between; align-items: center;}
.why-hanwha-area { position: relative;}
.why-hanwha-area .why-hanwha-list {position: sticky; top:0;}
.why-hanwha-area .why-hanwha-texts {z-index: 1;background-color: #0000;width: 100%;height: 100vh;position: sticky;bottom: 0;padding-bottom: 120px;}

.why-hanwha-item {position: sticky; top: 0; height:200vh; overflow: clip;}
.why-hanwha-holder {position: sticky; top: 0;z-index: 1;}
.why-hanwha-item figure {position: absolute;inset:0;width:100%;height:120vh;}
.why-hanwha-item figure img {width: 100%; height: 100%; object-fit: cover;}
.why-hanwha-item .img-overlay {position: absolute;inset:0;width:100%;height:100%;background-color: #000;}

.why-hanwha-header {position: absolute;inset:0;width:100%;height:100vh;display:flex;z-index: 2;color:#fff; align-items: flex-end;padding:0 120px 130px;opacity: 0;}
.why-hanwha-header .cate {font-size: 20px;font-weight: 700;line-height: 1.68;}
.why-hanwha-header .title {margin-top: 24px;font-size: 60px;font-weight: 700;}
.why-hanwha-header .desc {margin-top: 70px;font-size: 28px;line-height: 1.68;font-weight: 300;}


/* section-product */
.section-product {padding:160px 120px 0;}
.product-list {margin-top: 200px;}
.product-item {display: flex; gap:50px; align-items: center;}
.product-item figure {overflow: hidden; /* width: 20%; */
	clip-path: polygon(0% 20px, 20px 0%, calc(100% - 20px) 0%, 100% 20px, 100% calc(100% - 20px), calc(100% - 20px) 100%, 20px 100%, 0px calc(100% - 20px))
}
.product-item figure img {width: 1016px;height: 340px;max-width: none;transform: translateX(-50%);position: relative;left: 50%;}
.product-item:not(:first-child) {margin-top: 32px;}
.product-item .tit {font-size: 60px;font-weight: 700;color:#bebebe;margin-bottom: 40px; white-space: nowrap;}
.product-item .more {position: relative;display:inline-flex; border:1px solid #151515; border-radius: 100vh; width: 205px;height:64px; align-items: center; justify-content: space-between; padding:0 30px;}
.product-item .more:after {position: absolute;right:30px;content:'';width:42px;height:18px;background:currentColor; mask:url(../images/icon_arrow.svg) no-repeat 0 0/100% auto;}
.product-item a:hover .tit {color:#151515;transition: .25s;}
.product-item a:hover .more {background-color: #FF6600; border-color:#FF6600;color:#fff;transition: .15s;}

/* section-core-technologies */
.section-core-technologies {margin-top: 200px; padding:0 120px;height: 8226px;}
.section-core-technologies-inner {height: 100vh;display: flex;align-items: center;position: sticky;top: 0;}
.section-core-technologies article {display: flex;}
.section-core-technologies .content-header {flex:0 0 480px; width: 480px;}
.section-core-technologies .core-technologies-area {flex:1 0; padding-left: 360px;}
.section-core-technologies .core-technologies-list {width: 7066px}


.section-global-presence {margin-top: 200px;padding:0 120px}
.section-global-presence .section-content-body {display: flex; gap: 24px; padding-top: 160px;}
.section-global-presence .global-side { width:478px; }

.global-main {position: sticky;top: 0;display: flex;align-items: flex-end;max-height: 100vh;}

.section-news {padding-top: 160px;padding-left: 120px;padding-right: 120px;}
.section-news img {display: block; margin:0 auto}
.section-explore {padding-top: 160px;padding-left: 120px;padding-right: 120px;}
.section-explore img {display: block; margin:0 auto}


body.is-loading {height: 100vh; overflow: hidden;}
.loading {position: fixed;z-index: 999;inset:0;display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 20px; background-color: #f0f8ff;}
.loading-text {font-size: 14px;}

.page-up { display: flex; justify-content: flex-end; margin-top: 180px; padding:0 120px;}
.page-up-btn {width: 60px;height: 60px; border-radius: 8px; background-color: #151515; color:#fff; cursor: pointer;}

.footer {margin-top: 36px;}

#subpage {margin-top: 265px;}