@import url("common.css");


/*  Visual */
.visual { position: relative; width: 100%; height: 100vh; overflow: hidden; background: var(--blackBg); }
.visual-bg { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: hidden; }
.visual-bg.jarallax { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; }
.visual-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
.visual-overlay { position: absolute; inset: 0; z-index: 2; background: var(--blackBg); opacity: 0.2; pointer-events: none; }
.visual-content { position: relative; z-index: 3; max-width: var(--container-content); margin: 0 auto; padding: 0 var(--container-padding); height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; box-sizing: border-box; }
.visual-content > div:first-child { margin-bottom: 45px; }
.visual-content h3 { color: var(--white); margin-bottom: 20px; }
.visual-content > div:first-child > div { margin-top: 20px; }
.visual-content .fs24 { color: var(--white); margin-bottom: 10px; }
.visual-content .fs18 { color: var(--white); opacity: 0.7; }
.visual-btn { margin-top: 0; }
.visual-scroll { position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); z-index: 4; }
.visual-scroll > div { width: 21px; height: 35px; border: 1px solid var(--white); border-radius: 0; position: relative; }
.visual-scroll > div > div { width: 1px; height: 5px; background: var(--white); position: absolute; top: 8px; left: 50%; transform: translateX(-50%); }


/* Info  */
.info { padding: var(--container-padding) 0; background: var(--white); position: relative; overflow: hidden; }
.info > div { max-width: var(--container-content); margin: 0 auto; padding: 0 var(--container-padding); position: relative; height: 800px; overflow: hidden; box-sizing: border-box; }
.info-txt { position: absolute; left: 0; top: 130px; z-index: 2; }
.info-txt .fsE15 { color: var(--main); margin-bottom: 20px; text-transform: uppercase; }
.info-txt h2 { color: var(--black); margin-bottom: 20px; word-break: keep-all; overflow-wrap: break-word; }
.info-txt > div { margin-bottom: 35px; }
.info-txt .fs18 { color: var(--black); opacity: 0.7; margin-bottom: 20px; }
.info-img-main { position: absolute; left: 405px; top: 100px; width: 780px; height: 700px; z-index: 1; }
.info-img-main img { width: 100%; height: 100%; object-fit: cover; }
.info-img-sub { position: absolute; right: 0; top: 0; width: 240px; height: 300px; z-index: 1; }
.info-img-sub img { width: 100%; height: 100%; object-fit: cover; }
.info-logo-bg { position: absolute; left: 1105px; top: 411px; width: 389px; height: 319px; z-index: 1; mix-blend-mode: luminosity; }
.info-logo-bg img { width: 100%; height: 100%; object-fit: contain; filter: grayscale(100%) brightness(1.2); opacity: 0.08; will-change: filter, opacity; }


/* Business */
.business { position: relative; width: 100%; height: 700px; overflow: hidden; display: flex; }
.business-area-1, .business-area-2 { flex: 1; position: relative; background: var(--blackBg); overflow: hidden; transition: flex 0.6s cubic-bezier(0.4, 0, 0.2, 1), transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); display: block; text-decoration: none; color: inherit; transform: translateZ(0) scale(1); -webkit-transform: translateZ(0) scale(1); transform-origin: center center; will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.business-area-1:hover, .business-area-2:hover { transform: translateZ(0) scale(1.03); -webkit-transform: translateZ(0) scale(1.03); }
.business-bg-1, .business-bg-2 { position: absolute; inset: 0; z-index: 1; }
.business-bg-1 img, .business-bg-2 img { width: 100%; height: 100%; object-fit: cover; opacity: 0.5; transition: opacity 0.8s ease; }
.business-content-1, .business-content-2 { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; margin: 0 auto; padding: 0 20px; }
.business-content-1 { max-width: 90%; }
.business-content-2 { max-width: 90%; }
.business-txt-1, .business-txt-2 { text-align: center; display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 0; transition: justify-content 0.6s ease, opacity 0.6s ease; opacity: 1; }
.business-txt-1 .fsE15, .business-txt-2 .fsE15 { color: var(--white); margin-bottom: 10px; text-transform: uppercase; }
.business-txt-1 h2, .business-txt-2 h2 { color: var(--white); margin-bottom: 20px; }
.business-detail-1, .business-detail-2 { color: var(--white); opacity: 0; max-height: 0; overflow: hidden; transition: opacity 0.4s ease 0.05s, max-height 0.4s ease 0.05s, margin 0.4s ease 0.05s; margin-bottom: 0; }
.business-btn-1, .business-btn-2 { text-align: center; margin-top: 0; opacity: 0; transform: scale(0.8); height: 0; pointer-events: none; }
.business-btn-1 button, .business-btn-2 button { pointer-events: auto; }
.business-area-1:hover .business-txt-1, .business-area-2:hover .business-txt-2 { justify-content: flex-start; }
.business-area-1:hover .business-btn-1, .business-area-2:hover .business-btn-2 { margin-top: 30px; height: auto; }


/* Tech */
.tech { padding: var(--container-padding) 0; background: var(--white); }
.tech > div { max-width: var(--container-content); margin: 0 auto; padding: 0 5%; box-sizing: border-box; }
.tech-title { text-align: center; margin-bottom: 60px; }
.tech-title .fsE15 { color: var(--main); margin-bottom: 20px; text-transform: uppercase; }
.tech-title h2 { color: var(--black); margin-top: 20px; }
.tech-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; margin-bottom: 30px; }
.tech-card { position: relative; background: var(--blackBg); overflow: hidden; aspect-ratio: 375 / 510; cursor: pointer; display: block; text-decoration: none; color: inherit; }
.tech-card-bg { position: absolute; inset: 0; z-index: 0; }
.tech-card-bg picture, .tech-card-bg img { width: 100%; height: 100%; display: block; }
.tech-card-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.8; aspect-ratio: 375 / 510; transition: opacity 0.85s cubic-bezier(0.45, 0, 0.55, 1), transform 0.85s cubic-bezier(0.45, 0, 0.55, 1); }
.tech-card::before { content: ''; position: absolute; inset: 0; background: #000000; opacity: 0; z-index: 1; transition: opacity 0.85s cubic-bezier(0.45, 0, 0.55, 1); pointer-events: none; }
.tech-card-content { position: relative; z-index: 2; padding: 50px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; box-sizing: border-box; transition: padding 0.85s cubic-bezier(0.45, 0, 0.55, 1); }
.tech-card-content > div:first-child { text-align: left; }
.tech-card-content .fsE15 { color: var(--white); margin-bottom: 10px; text-transform: uppercase; }
.tech-card-content .fs30 { color: var(--white); margin-top: 0; font-weight: 600; }
.tech-card-btn { margin-top: auto; padding-top: 20px; display: flex; justify-content: flex-start; transition: transform 0.85s cubic-bezier(0.45, 0, 0.55, 1), padding-top 0.85s cubic-bezier(0.45, 0, 0.55, 1); pointer-events: none; }
.tech-card-btn button { pointer-events: auto; }
.tech-card:hover .tech-card-bg img { opacity: 0.9; transform: scale(1.05); }
.tech-card:hover::before { opacity: 0.8; }
.tech-card:hover .tech-card-content { padding: 30% 50px; }
.tech-card:hover .tech-card-content > div:first-child { text-align: center; }
.tech-card:hover .tech-card-content .fsE15 { text-align: center; }
.tech-card:hover .tech-card-content .fs30 { text-align: center; }
.tech-card:hover .tech-card-btn { justify-content: center; transform: translateX(0); padding-top: 5px; }


/* News  */
.news { padding: var(--container-padding) 0; background: var(--grayBg); }
.news > div { max-width: var(--container-content); margin: 0 auto; padding: 0 5%; box-sizing: border-box; }
.news-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; }
.news-header .fsE15 { color: var(--main); margin-bottom: 20px; text-transform: uppercase; }
.news-header h2 { color: var(--black); margin-top: 20px; }
.news-controls { display: flex; align-items: center; gap: 20px; }
.news-controls-mobile { display: none; }
.news-controls button:not(.btn-more-s) { width: 36px; height: 36px; border: none; background: none; cursor: pointer; display: flex; align-items: center; justify-content: center; color: var(--basic); transition: color 0.3s ease; }
.news-controls button:not(.btn-more-s):hover { color: var(--main); }
.news-controls button:not(.btn-more-s) .material-icons { font-size: 36px; }
.news-controls button:not(.btn-more-s):disabled { opacity: 0.3; cursor: not-allowed; }
.news-controls button:not(.btn-more-s):disabled:hover { color: var(--black); }
.news-controls .news-more-btn.btn-more-s { flex-shrink: 0; }
.news-slider-wrapper { overflow: hidden; position: relative; }
.news-grid { display: flex; gap: 30px; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); will-change: transform; }
.news-card { flex: 0 0 calc((100% - 90px) / 4); border-top: 1px solid rgba(0, 0, 0, 0.12); overflow: hidden; min-width: 0; display: block; text-decoration: none; color: inherit; cursor: pointer; position: relative; }
.news-card::before { content: ''; position: absolute; top: 0; left: 0; width: 0; height: 1px; background: var(--main); z-index: 1; transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.news-card-content { padding: 30px 0; }
.news-card-content .fsE15 { color: var(--main); margin-bottom: 10px; text-transform: uppercase; }
.news-card-content .fs20 { color: var(--black); margin-bottom: 10px; min-height: 56px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-clamp: 2; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; overflow-wrap: break-word; word-wrap: break-word; }
.news-card-content .fs16 { color: var(--basic); }
.news-card-img { width: 100%; aspect-ratio: 3.75 / 2.6; background: var(--blackBg); position: relative; overflow: hidden; }
.news-card-img img { width: 100%; height: 100%; object-fit: cover; transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
.news-card:hover::before { width: 100%; }
.news-card:hover .news-card-img img { opacity: 0.5; }




/* Fade-in-up 애니메이션 */
.fade-in { opacity: 0; transform: translateY(60px); transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1), transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.fade-in.visible { opacity: 1; transform: translateY(0); }
.info .info-txt.fade-in { transition-delay: 0s; }
.info .info-img-main.fade-in { transition-delay: 0.2s; }
.info .info-img-sub.fade-in { transition-delay: 0.4s; }
.business .business-area-1.fade-in { transition-delay: 0s; }
.business .business-area-2.fade-in { transition-delay: 0.2s; }
.tech .tech-title.fade-in { transition-delay: 0s; }
.tech .tech-card.fade-in:nth-child(1) { transition-delay: 0.1s; }
.tech .tech-card.fade-in:nth-child(2) { transition-delay: 0.2s; }
.tech .tech-card.fade-in:nth-child(3) { transition-delay: 0.3s; }
.tech .tech-card.fade-in:nth-child(4) { transition-delay: 0.4s; }
.news .news-header.fade-in { transition-delay: 0s; }
.news .news-card.fade-in:nth-child(1) { transition-delay: 0.1s; }
.news .news-card.fade-in:nth-child(2) { transition-delay: 0.15s; }
.news .news-card.fade-in:nth-child(3) { transition-delay: 0.2s; }
.news .news-card.fade-in:nth-child(4) { transition-delay: 0.25s; }
.news .news-card.fade-in:nth-child(5) { transition-delay: 0.3s; }
.news .news-card.fade-in:nth-child(6) { transition-delay: 0.35s; }
.news .news-card.fade-in:nth-child(7) { transition-delay: 0.4s; }
.news .news-card.fade-in:nth-child(8) { transition-delay: 0.45s; }




/* 미디어 쿼리 */
/* 1744px 이상 */
@media all and (min-width: 1744px) {
    .visual-content { padding-left: 0; padding-right: 0; max-width: 1590px; margin-left: auto; margin-right: auto; }
    .info { padding-left: 5%; padding-right: 5%; }
    .info > div { padding-left: 0; padding-right: 0; max-width: 1590px; margin-left: auto; margin-right: auto; }
    .tech > div { padding-left: 0; padding-right: 0; }
    .news > div { padding-left: 0; padding-right: 0; }
}

/* 1744px 이하 */
@media all and (max-width: 1744px) {
    .tech-card-content { padding: 35px !important; }
    .tech-card:hover .tech-card-content { padding: 30% 35px !important; }
    .visual-content { max-width: 100%; padding-left: 5%; padding-right: 5%; }
    .info > div { max-width: 100%; height: auto; padding-left: 5%; padding-right: 5%; }
    .info-txt { left: 5%; }
    .info-img-main { position: relative; top: 0; padding-top: 100px; left: 50%; transform: translateX(-40%); width: 60%; height: auto; }
}

/* 1350px 이하 */
@media all and (max-width: 1350px) {
    .info-img-main { padding-top: 0; }
    .info-img-main img { max-width: 100%; height: auto; }
    .info-img-sub { right: 5%; }
    .info-logo-bg { top: auto; bottom: 5%; left: auto; right: 0; max-width: 300px; }
    .tech > div { max-width: 100%; padding-left: 5%; padding-right: 5%; }
    .news > div { max-width: 100%; padding-left: 5%; padding-right: 5%; }
}

/* 980px 이하 */
@media all and (max-width: 980px) {
    .visual { height: 100vh !important; }
    .info { padding: var(--container-padding) 0 !important; min-height: auto !important; }
    .info > div { height: auto !important; padding-bottom: 30px; overflow: visible !important; }
    .info-txt { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; margin-bottom: 0 !important; text-align: center; }
    .info-img-main { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; transform: none; margin-top: -25px; }
    .info-img-main img { height: auto !important; min-height: 400px; }
    .info-img-sub { display: none !important; }
    .info-logo-bg { display: none !important; }
    .business { flex-direction: column !important; height: auto !important; }
    .business-area-1, .business-area-2 { flex: none !important; height: 400px !important; }
    .tech { padding: var(--container-padding) 0 !important; }
    .tech-title { margin-bottom: 40px !important; }
    .news { padding: var(--container-padding) 0 !important; }
    .news-header { flex-direction: column !important; align-items: flex-start !important; gap: 0 !important; margin-bottom: 30px !important; }
    .news-header > div:first-child { width: 100%; }
    .news-header .fsE15 { margin-bottom: 10px !important; }
    .news-header h2 { margin-top: 10px !important; }
    .news-controls-pc { display: none !important; }
    .news-controls-mobile { display: flex !important; width: 100%; justify-content: space-between; align-items: center; gap: 0; margin-top: 20px; position: relative; min-height: 45px; }
    .news-controls-mobile button:not(.btn-more-s) { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
    .news-controls-mobile button:not(.btn-more-s) .material-icons { font-size: 28px; }
    .news-controls-mobile .news-more-btn.btn-more-s { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; justify-content: center; }
    .news-card { flex: 0 0 calc((100% - 60px) / 3) !important; }
    .news-grid { gap: 20px !important; }
    .news-card-content { padding: 15px !important; }
    .news-card-content .fs20 { min-height: 48px !important; }

    .tech-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; }
}


/* 768px 이하 */
@media all and (max-width: 768px) {
    .visual { height: 100vh !important; }
    .visual-content > div:first-child { margin-bottom: 25px !important; }
    .info-txt p.fs18 br { display: none; }
    .info-img-main img { min-height: 300px; }
    .business-area-1, .business-area-2 { height: 350px !important; }
    .tech { padding: var(--container-padding) 0 !important; }
}

/* 680px 이하 */
@media all and (max-width: 680px) {
    .tech-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
    .tech-card { aspect-ratio: 380 / 160 !important; }
    .tech-card-bg img { aspect-ratio: 380 / 160; }
    .tech-card::before { opacity: 0.3 !important; }
    .tech-card-content { flex-direction: row !important; justify-content: space-between !important; align-items: center !important; padding: 30px 20px !important; }
    .tech-card-content > div:first-child { text-align: left !important; }
    .tech-card-btn { margin-top: 0 !important; padding-top: 0 !important; margin-left: auto; justify-content: flex-end !important; }
    .tech-card:hover .tech-card-bg img { opacity: 0.8 !important; transform: none !important; }
    .tech-card:hover::before { opacity: 0.8 !important; }
    .tech-card:hover .tech-card-content { padding: 50px 20px !important; }
    .tech-card:hover .tech-card-content > div:first-child { text-align: left !important; }
    .tech-card:hover .tech-card-content .fsE15 { text-align: left !important; }
    .tech-card:hover .tech-card-content .fs30 { text-align: left !important; }
    .tech-card:hover .tech-card-btn { justify-content: flex-end !important; transform: none !important; }
    .news-card { flex: 0 0 74.3% !important; min-width: 74.3%; }
    .news-grid { gap: 10px !important; }
    .news-card-content .fs20 { min-height: 44px !important; }
}