* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-size: 1rem;
    color:#000;
}
:root {
    --main-width:1400px;
    --main-color:#584276;
    --sub-color:#8e8a8a;
    --point-color:#ef476f;
    --title-size:1.5rem;
    --subtitle-size:1.2rem;
}
html {
    scroll-behavior: smooth;
    scroll-snap-type: y mandatory;
}

body {
    width: 100%;
    overflow-x: hidden;
    background-color: #efefef;
}

a,li{
    text-decoration: none;
    list-style: none;
}
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    z-index: 1000;
    background-color: rgba(0, 0, 0, 0); 
    transition: background-color 0.4s ease, height 0.4s cubic-bezier(0.25, 1, 0.5, 1); 
    overflow: hidden; 
}

header.scrolled {
    background-color: rgba(0, 0, 0, 0.55); 
    backdrop-filter: blur(5px); 
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

header:hover {
    height: 450px; 
    background-color: rgba(15, 15, 20, 0.95) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.header-container {
    width: 100%;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
}
.headMenu {
    display: flex;
    justify-content: right;
    align-items: center;
    font-size: 0.7rem;
    color: #fff;
}
.headMenu a {
    color: #fff;
    font-size: 0.7rem;
    text-transform: uppercase;
    padding:5px 10px;
}
.headMenu a:hover {
    color: #c0c0c0;
    text-transform: uppercase;
}
/* »ó´Ü °ü¸®ÀÚÆäÀÌÁö °Ô½Ã±Û Á¶È¸¼ö 0 ºÒ·¯¿À±â ±ôºý°Å¸² */
.blinking{
	-webkit-animation:blink 1s ease-in-out infinite alternate;
    -moz-animation:blink 1s ease-in-out infinite alternate;
    animation:blink 1s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
.blinking span {
    color:red;
    font-weight:bold;
}
/* »ó´Ü °ü¸®ÀÚÆäÀÌÁö °Ô½Ã±Û Á¶È¸¼ö 0 ºÒ·¯¿À±â ±ôºý°Å¸² END */
.main-header-area {
    height: 120px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.logo {
    font-size: 1.2rem;
    font-weight: 800;
    color: #fff;
    font-family: 'Arial', sans-serif;
    letter-spacing: -1px;
    cursor: pointer;
    line-height: 50px;
}
.logo a {
    color:#fff;
}
.logo span { color: #afafaf; }
.logo img {
    height:40px;
    vertical-align: middle;
    padding-right: 10px;
}
.nav-menu {
    display: flex;
    list-style: none;
    gap: 70px;
}

.nav-menu > li {
    text-align: center;
}

.nav-menu > li > a {
    color: rgba(255, 255, 255, 1);
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    font-family: 'Noto Sans KR', sans-serif;
    transition: color 0.3s ease;
    display: block;
    line-height: 60px; 
    transition: transform 0.3s ease; 
    padding-left: 20px;
}

.nav-menu > li > a:hover {
    color: #665c82 !important; /* ¿ì¼±¼øÀ§¸¦ °­Á¦·Î ³ô¿© Å×½ºÆ® */
    transform: scale(1.2);
}

.submenu-area {
    width: 100%;
    padding: 30px 0 20px 0; 
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    justify-content: left; 
    padding-left:510px;
}

.submenu-wrap {
    display: flex;
    list-style: none;
}
.submenu-column {
    min-width: 30px; 
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
}
.submenu-column:nth-child(1) {width:165px;}
.submenu-column:nth-child(2) {width:160px;}
.submenu-column:nth-child(3) {width:250px;}
.submenu-column:nth-child(4) {width:360px;}
.submenu-column:nth-child(5) {width:15px;}
.submenu-column:nth-child(6) {width:100px;}

.submenu-column a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    font-size: 0.8rem;
    font-family: 'Noto Sans KR', sans-serif;
    transition: color 0.2s ease, transform 0.2s ease;
    display: block;
    padding: 2px 0;
    letter-spacing: -1;
}

.submenu-column a:hover {
    color: #ef476f;
    transform: translateY(-2px); 
}
.pageMenu  {
    border-bottom: 1px solid #ccc;
    margin:0 auto;
    display:inline-block;
}
.pageMenu a {
    color:#1a1a2e;
    padding:30px 20px;
    transition: 0.2s ease;
    display: inline-block;
    position: relative;
    font-weight: bold;
    
}
.pageMenu a:not(:last-child)::before {
    position: absolute;
    content: '/';
    top:35%;
    right:-5px;
}
/* 1. È£¹öÇßÀ» ¶§¿Í ÆäÀÌÁö°¡ È°¼ºÈ­(.on)µÇ¾úÀ» ¶§ ±ÛÀÚ»ö µ¿ÀÏÇÏ°Ô ¼³Á¤ */
.pageMenu a:hover,
.pageMenu a.on {
    color: #745df1;
    font-weight: bold; /* ±âÁ¸ÀÇ º¼µå ½ºÅ¸ÀÏ À¯Áö */
}

/* 2. È£¹öÇßÀ» ¶§¿Í ÆäÀÌÁö°¡ È°¼ºÈ­(.on)µÇ¾úÀ» ¶§ ÇÏ´Ü »ï°¢Çü(::after) Ç¥½Ã */
.pageMenu a:hover::after,
.pageMenu a.on::after {
    position: absolute;
    content: '';
    top: 60px;
    left: 50%;
    transform: translateX(-50%); /* ? »ï°¢ÇüÀÌ Á¤È®È÷ °¡¿îµ¥ ¿Àµµ·Ï Á¤·Ä º¸Á¤ */
    width: 0;
    height: 0;
    border-top: 10px solid #745df1;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

.contents {
    min-height: 90vh;
    padding-bottom:100px;
}

.section {
    width: 100%;
    height: 100vh;
    scroll-snap-align: start;
    scroll-snap-stop: always;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.text-wrap {
    display: flex;
    flex-direction: column;
    gap: 25px;
    text-align: center;
    z-index: 99;
}
.animate-text.t1 {
    font-size: 3.5rem;
    color: white;
    font-weight: 700;
    font-family: 'Arial', sans-serif;
    opacity: 0;
    transition-property: opacity, transform;
    transition-timing-function:
    cubic-bezier(0.25, 1, 0.5, 1);
}
.animate-text.t2 {
    font-size: 2.0rem;
    color: white;
    font-weight: 700;
    font-family: 'Arial', sans-serif;
    opacity: 0;
    transition-property: opacity, transform;
    transition-timing-function:
    cubic-bezier(0.25, 1, 0.5, 1);
}
.animate-text.t3 {
    font-size: 1.5rem;
    color: white;
    font-weight: 700;
    font-family: 'Arial', sans-serif;
    opacity: 0;
    transition-property: opacity, transform;
    transition-timing-function:
    cubic-bezier(0.25, 1, 0.5, 1);
}

.section.active .animate-text {
    opacity: 1;
    transform: translate(0, 0) scale(1) !important;
}

.section:nth-child(1) 
{ background-color: #1a1a2e; }
.section:nth-child(2) 
{ background-color: #495975; }
.section:nth-child(3) 
{ background-color: #5b6798; }
.section:nth-child(4) 
{ background-color: #2e564b; }
.section:nth-child(5) 
{ background-color: #118ab2; }

/* --------------------------------------------------
   [¼½¼Ç 1 Àü¿ë ¹è°æ ÀÚµ¿ ÆäÀÌµå ½½¶óÀÌ´õ ½ºÅ¸ÀÏ]
-------------------------------------------------- */
.bg-slider {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1; /* ¹è°æ ½½¶óÀÌ´õ ÀüüÀÇ ±âº» ¼øÀ§¸¦ °¡Àå ³·°Ô ¼³Á¤ */
    overflow: hidden;
}

/* ½½¶óÀÌ´õ ³»ºÎ À̹ÌÁö °øÅë ¹èÄ¡ ±Ô°Ý */
.bg-slider img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; 
    object-position: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 1.5s ease-in-out, visibility 1.5s ease-in-out;
}

/* ÀÚ¹Ù½ºÅ©¸³Æ® È°¼ºÈ­ »óÅ */
.bg-slider img.active-img {
    opacity: 1;
    visibility: visible;
}

/* ±Û¾¾ °¡µ¶¼ºÀ» ÁöÅ°±â À§ÇÑ 40% Åõ¸íµµ ¾îµÎ¿î ¾Ï¸· ·¹À̾î */
.bg-slider::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4); 
    z-index: 5; /* À̹ÌÁöµé(z-index: 1)º¸´Ù È®½ÇÇÏ°Ô À§¿¡ ¹èÄ¡ */
}

/* ==========================================================================
   ¡Ú [ÇÙ½É ¼öÁ¤] ù ¹ø° ¼½¼ÇÀÇ Áß¾Ó ÅؽºÆ® ÃÖ»ó´Ü ¹èÄ¡ °­Á¦ º¸Á¤
========================================================================== */
.section:nth-child(1) .text-wrap {
    position: relative !important;
    z-index: 10 !important; /* ¹è°æ¸·(z-index: 5)º¸´Ù ÈξÀ ³ôÀº ¼öÄ¡¸¦ ÁÖ¾î ¹«Á¶°Ç ÅؽºÆ®°¡ ¸Ç À§¿¡ º¸ÀÌ°Ô ÇÕ´Ï´Ù */
}
.contents {
    width:100%;
    text-align: center;
}
.sub_img {
    position: relative;
    overflow: hidden;
    height: 300px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background-color: #111111;
}
.sub_img .menu_title {
    position: absolute;
    left: 50%;
    top: 130px;
    transform: translateX(-50%);
    text-transform: uppercase;
    color: #fff;
    font-weight: 800;
    font-size: 2rem;
    opacity: 0;
    transition: all 1s ease-in-out;
    text-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
}
.sub_img .menu_title::after {
    position: absolute;
    content: '';
    width: 50px;
    height: 3px;
    background-color: #fff;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    text-shadow: 0 0 20px rgba(0, 0, 0, 0.9);
}
.sub_img img {
   width: 100%;
   height: 100%;
}
.loading-image {
    text-align: center;
    transform: scale(1.1);
    transition: all 3s;
}
.pageTitle {
    font-size: 1.8rem;
    font-weight: 600;
    padding:80px 0 100px 0;
}

/* index Page  */
/* section 2  */
/* ¿ÀÁ÷ µÎ ¹ø° ÆäÀÌÁö(.sec02-bg-layer) ³»ºÎ¿¡¼­¸¸ ÀÛµ¿ÇÏ´Â ±¸Á¶ */
.sec02-bg-layer {
    position: relative; /* ¹è°æ°ú ±Û¾¾ÀÇ ±âÁØÁ¡ ¿ªÇÒÀ» À§ÇØ Çʼö */
}
.sec02-bg-layer::after {
    position: absolute; /* ¹è°æ°ú ±Û¾¾ÀÇ ±âÁØÁ¡ ¿ªÇÒÀ» À§ÇØ Çʼö */
    content: '';
    top:0; left:0; right:0;bottom: 0;
    background-image: url('./image/pattren.png');
    opacity: 0.1;
}

/* 1. ÅؽºÆ®¸¦ À̹ÌÁöº¸´Ù ¹«Á¶°Ç ¾ÕÀ¸·Î ¿Ã¸®±â */
.sec02-bg-layer .text-wrap {
    position: relative;
    z-index: 10;          /* ³ôÀº z-index·Î ±Û¾¾ ·¹À̾ ÃÖ»ó´Ü ¹èÄ¡ */
    pointer-events: none; /* ¹è°æ Ŭ¸¯À̳ª ½ºÅ©·Ñ¿¡ ¹æÇصÇÁö ¾Êµµ·Ï ¼³Á¤ */
}

/* 2. À̹ÌÁö ÄÁÅ×À̳ʸ¦ ºÎ¸ð(È­¸é Àüü) Å©±â¸¸Å­ ³ÐÇô¼­ µÚ·Î ±ò±â */
.sec02-bg-layer .sec02_img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;           /* ÅؽºÆ®(10)º¸´Ù ³·°Ô ¼³Á¤ÇÏ¿© µÚ·Î ¹èÄ¡ */
}

/* 3. À̹ÌÁö ¾Ö´Ï¸ÞÀÌ¼Ç ¹× Ãʱâ À§Ä¡ ¼³Á¤ */
.sec02-bg-layer .sec02_img img {
    position: absolute;
    opacity: 0;
    width: auto;          /* À̹ÌÁö °íÀ¯ ºñÀ² À¯Áö */
    max-width: 25%;       /* È­¸é Å©±â¿¡ ¸ÂÃç Àû´çÇÑ Å©±â ÁöÁ¤ (ÇÊ¿ä½Ã Á¶Àý) */
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    border-radius: 10px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
}
.sec02-bg-layer .sec02_img img:first-child {
    max-width: 40%;       /* È­¸é Å©±â¿¡ ¸ÂÃç Àû´çÇÑ Å©±â ÁöÁ¤ (ÇÊ¿ä½Ã Á¶Àý) */
}

/* [À̹ÌÁö 01: À§¿¡¼­ ¾Æ·¡·Î] */
.sec02-bg-layer .sec02_image01 { 
    top: 10%; 
    left: 50%; 
    /* Áß¾Ó Á¤·Ä(XÃà -50%)°ú µ¿½Ã¿¡ YÃàÀ¸·Î -50px ¶ç¿öµÒ */
    transform: translate(-50%, -50px); 
}

/* [À̹ÌÁö 02: ¿ÞÂÊ¿¡¼­ ¿À¸¥ÂÊÀ¸·Î] */
.sec02-bg-layer .sec02_image02 { 
    bottom: 15%; 
    left: 10%; 
    transform: translateX(-50px); 
}

/* [À̹ÌÁö 03: ¿À¸¥ÂÊ¿¡¼­ ¿ÞÂÊÀ¸·Î] */
.sec02-bg-layer .sec02_image03 { 
    bottom: 15%; 
    right: 10%; 
    transform: translateX(50px); 
}
.sec02-bg-layer .t3 a {
    background-color: #118ab2;
    color: #fff;
    padding:10px 30px;
    font-size: 1rem;
    border-radius: 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
    display: inline-block;
    cursor: pointer;
    transition: 0.3s ease;
    pointer-events: auto !important; /* ¸¶¿ì½º À̺¥Æ® °­Á¦ Çã¿ë */
}
.sec02-bg-layer .t3 a:hover {
    background-color: #103b4a;
    color: #fff;
    font-size: 1rem;
    border-radius: 5px;
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.3);
    display: inline-block;
    cursor: pointer;
    pointer-events: auto !important; /* ¸¶¿ì½º À̺¥Æ® °­Á¦ Çã¿ë */
    transform: scale(1.2);
}
.sec02-bg-layer .sec02_img img:nth-child(1)  {
    z-index: 9999;
}
/* 4. ½ºÅ©·Ñ È°¼ºÈ­ ½Ã Á¦ÀÚ¸®·Î µîÀå (active Ŭ·¡½º ¹Ý¿µ) */
.sec02-bg-layer .sec02_img img.active {
    opacity: 1;
}
.sec02-bg-layer .sec02_image01.active { 
    transform: translate(-50%, 0); /* Áß¾Ó À¯ÁöÇϸç Á¦ÀÚ¸®·Î ÇÏ°­ */
}
.sec02-bg-layer .sec02_image02.active,
.sec02-bg-layer .sec02_image03.active { 
    transform: translateX(0); /* Á¦ÀÚ¸®·Î ÁøÀÔ */
}

/* section 2 END  */

/* ¼½¼Ç 3 ±âº» ·¹À̾ƿô ±¸¼º */
.sec03-gallery-layer {
    position: relative;
    padding: 120px 0; 
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sec03-gallery-layer::after {
    position: absolute;
    content: '';
    width:100%;
    height:100%;
    top:0;left:0;
    background-image: url('./image/pattern_02.png');
    z-index: 1;
    opacity: 0.1;
    background-repeat: no-repeat;
    background-size: cover;
}

.sec03-title-area {
    padding-left: 50px;
    margin-bottom: 40px;
}
.sec03-title-area h2 { 
    font-size: 3rem; 
    font-weight: 700; 
    margin-bottom: 8px; 
    color: #fff;
}
.sec03-title-area p { 
    font-size: 1.2rem; color: #888;
    text-align: center;
 }

/* ¹«ÇÑ ·Ñ¸µ ½ºÅ©¸° ¸¶½ºÅ© (±×¸²ÀÚ ÄÆÆà ¹æÁö ¿©¹é À¯Áö) */
.marquee-container {
    width: 100%;
    position: relative;
    overflow: hidden; 
    padding: 60px 0 90px 0; 
    margin-top: -50px;
    margin-bottom: -80px; 
    z-index: 2;
}

/* ? [ÁÙ¹Ù²Þ ¹ö±× ÇØ°á ÇÙ½É] °¡·Î ÇÑ ÁÙ·Î ¹«Á¶°Ç Á¤·Ä½ÃÅ°´Â ·¹ÀÏ Æ®·¢ */
.marquee-track {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: max-content; /* ÀÚ½Ä ¿ä¼ÒµéÀÇ ½ÇÁ¦ ÃÑ °¡·ÎÆøÀ» ºê¶ó¿ìÀú¿¡ ±×´ë·Î ¹Ý¿µ */
    
    /* ? Áß¿ä: È­¸éÀÌ Á¼¾ÆÁ®µµ Àý´ë·Î ¾Æ·¡·Î ÁٹٲÞ(wrap)µÇÁö ¾Êµµ·Ï ÀÏÁ÷¼± ¹èÄ¡ °­Á¦ ÁöÁ¤! */
    flex-wrap: nowrap !important; 
    
    /* 32ÃÊ µ¿¾È ÁÂÃøÀ¸·Î ¹«ÇÑ ·Ñ¸µ */
    animation: marqueeRolling 32s linear infinite; 
    
    /* Çϵå¿þ¾î GPU °¡¼Ó ÁÖÀÔ */
    transform-style: preserve-3d; 
    will-change: transform;
}

/* [¼öÁ¤] °³º° ¸¶¸£Å° Ä«µå¿¡ ¸¶¿ì½º¸¦ ¿Ã·ÈÀ» ¶§¸¸ Àüü Æ®·¢ÀÌ ÀϽÃÁ¤Áö */
.marquee-track:has(.marquee-card:hover) {
    animation-play-state: paused;
}

.marquee-track .text-box h4 {
    color: #fff;
}
/* °³º° À̹ÌÁö Ä«µå »óÀÚ Àüü µðÀÚÀÎ */
.marquee-card {
    /* Ä«µå°¡ ÀÓÀÇ·Î Âî±×·¯Áö°Å³ª ¾ÐÃàµÇ´Â Çö»ó Â÷´Ü */
    flex-shrink: 0 !important; 
    width: 420px !important; 
    margin: 0 20px; 
    background-color: #222;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0,0,0,0.4);
    
    position: relative; 
    transform: scale(1);
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.marquee-card a { 
    display: block; 
    text-decoration: none; 
    position: relative;
}

/* À̹ÌÁö ¹Ú½º ±Ô°Ý */
.marquee-card .img-box {
    width: 100%;
    aspect-ratio: 4 / 3; 
    overflow: hidden;
    display: block;
}
.marquee-card .img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ? ¹ÝÅõ¸í ¿À¹ö·¹ÀÌ ÅؽºÆ® ¹Ú½º */
.marquee-card .text-box {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px 20px;
    color: #ffffff; 
    background-color: rgba(0, 0, 0, 0.55); 
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    z-index: 2;
    transition: background-color 0.3s ease;
}

/* ¸¶¿ì½º ¿Ã¸®¸é Ä«µå Àüü »óÀÚ°¡ 1.1¹è È®´ë ³ëÃâ */
.marquee-card:hover {
    transform: scale(1.1); 
    z-index: 999 !important; 
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.7), 0 0 30px rgba(17, 138, 178, 0.6); 
}

.marquee-card:hover .text-box {
    background-color: rgba(0, 0, 0, 0.75); 
}

.marquee-card .text-box h4 {
    font-size: 1rem;
    font-weight: 500;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}

/* ¹«ÇÑ ·Ñ¸µ Å°ÇÁ·¹ÀÓ °ø½Ä */
@keyframes marqueeRolling {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); } 
}
.sec04 {
    background-image: url('./image/sec04.png');
    background-repeat: no-repeat; 
    
    /* 1. Á¿ì/À§¾Æ·¡ Áß Á¼Àº ÂÊÀ» ±âÁØÀ¸·Î ²Ë ä¿ìµÇ, ºñÀ²À» À¯ÁöÇÔ */
    background-size: cover; 
    
    /* 2. À̹ÌÁö°¡ À߸± ¶§ Ç×»ó Á¤Áß¾ÓÀ» ±âÁØÀ¸·Î À߸®µµ·Ï ¼³Á¤ (À§¾Æ·¡ ±ÕµîÇÏ°Ô À߸²) */
    background-position: center; 
}
/* ==========================================
   4¹ø° ¼½¼Ç(Áöµµ) ÁÂ->¿ì À̵¿ ¾Ö´Ï¸ÞÀÌ¼Ç º¹¿ø
========================================== */

/* 1. ½ºÅ©·Ñ ³»¸®±â Àü(Æò¼Ò »óÅÂ): ¿ÞÂÊÀ¸·Î 60px ¹Ð·Á³ª ÀÖ°í, Åõ¸íÇÏ°Ô ¼û±è */
.sec04 .t1,
.sec04 .t2 { /* .animate-text ´ë½Å ½ÇÁ¦ HTML¿¡ Á¸ÀçÇÏ´Â .t2·Î º¯°æ */
    opacity: 0 !important;
    transform: translateX(-60px) !important; 
    transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.6s ease-out !important;
    will-change: transform, opacity;
    color:#fff;
    font-size: 3rem;
    font-weight: 400;
}

/* 2. ½ºÅ©·ÑÀÌ °¨ÁöµÇ¾î active Ŭ·¡½º°¡ ºÙ¾úÀ» ¶§: Á¦ÀÚ¸®(0)·Î ¿À¸ç ¼±¸íÇØÁü */
.sec04.active .t1,
.sec04.active .t2 { /* .animate-text ´ë½Å ½ÇÁ¦ HTML¿¡ Á¸ÀçÇÏ´Â .t2·Î º¯°æ */
    opacity: 1 !important;
    transform: translateX(0) !important; 
}
.sec04 .t2 {
    display: flex;
    justify-content: center;
    align-items: top;
    gap:30px;
}
.sec04 .t2 .text_part {
     color:#fff;
     text-align: left;
     font-size: 1.3rem;
}
.sec04 .t2 .text_part h1
{
    color:#fff;
    font-size: 2rem;
}
.sec04 .t2 .text_part h2
{
    color:#fff;
    font-size: 1.5rem;
}
.sec04 .t2 .text_part .eng_title
{
    color:#fff;
    font-size: 2rem;
}
.sec04 .idx_item img {
    height:350px;
    border-radius: 10px;
}
/* ¼­ºêÆäÀÌÁö ºÎºÐ */
.title {
    font-size:var(--title-size);
    padding:30px 0 20px;
}
.subtitle {
    font-size: var(--subtitle-size);
    padding-bottom: 30px;
}
.item {
    width:var(--main-width);
    margin:0 auto;
    text-align: justify;
}
[class*="company_"],
[class*="scope_"]
{
    display: flex;
    justify-content: center;
    align-items: top;
    gap:50px;
    width:var(--main-width);
    margin: 0 auto;
}
[class*="company_"] p,
[class*="scope_"] p
 {
    text-align: justify;
}
[class*="company_"] img,
[class*="scope_"] img
{
    width:700px;
    border-radius: 10px;
    margin-top:15px;
}
.company_05 p
{
    width:1200px;
    margin:0 auto;
}
.company_06 p
{
    width:1400px;
    margin:0 auto;
    text-align: left;
    gap:30;
}
.company_06 img {
    width:30%;
    border: 1px solid #c0c0c0;
    margin:20px;
    padding:20px;
}
.scope_04 img {
    width:450px;
}
.casting_01 ul {
    display: flex;
    justify-content: space-between;
    align-items: top;
    text-align: left;
    gap:100px;
    text-decoration: none;
    border: 1px solid #ccc;
    padding:30px 80px;
}
.casting_01 a {
    position: relative;
    font-size: 1rem;
    color: #111111;
    text-align: left;
    display: block;
    transition: 0.15s ease;
}
.casting_01 a::after {
    position: absolute;
    content: "  ";
    width:8px;
    height:5px;
    top:11px;
    left:-20px;
    background-color: #111111;
}
.casting_01 a:hover {
    color: #8d8d8d;
    transform: scale(1.15);
    transform-origin: left;
}
.casting_glossary_item {
    padding-bottom: 50px;
    position: relative;
    border: 1px solid #ccc;
    margin-top:30px;
    padding:30px 50px 30px;
    scroll-margin-top: 150px;
}
.casting_glossary_item .subtitle::after {
    position: absolute;
    content: '';
    width:20px;
    height:20px;
    background-color: #495975;
    top:30px;
    left:35px;
    border-radius: 3px;
    opacity: 0.2;
}

.alloy_01 .steel-list {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    color: #333;
    max-width: 1200px; /* È­¸é¿¡ ¸ÂÃç ³Êºñ Á¶Àý °¡´É */
    margin:0 auto;
    border: 1px solid #c5c5c5;
}

/* °¢ Çà(Row)À» Ç÷º½º¹Ú½º·Î ¼³Á¤ÇÏ¿© °¡·Î Á¤·Ä ¹× ±¸ºÐ¼± Ãß°¡ */
.alloy_01 .steel-list li {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    border-bottom: 1px solid #c5c5c5; /* À̹ÌÁö ƯÀ¯ÀÇ ¿¬ÇÑ °¡·Î¼± */
    min-height: 24px;
    text-align: left;
    gap:10px;
    padding:5px 30px;
}

/* [CSS] ±âº» ·¹À̾ƿô ¹× ½ºÅ¸ÀÏ »À´ë */
.fx-table {
    width: 100%; /* ºÎ¸ð ÄÁÅ×À̳ʿ¡ ¸ÂÃç ²Ë Â÷°Ô ½ÃÀÛ */
    display: flex;
    flex-direction: column;
    border: 1px solid #e0e0e0;
    font-family: sans-serif;
    font-size: 14px;
    color: #666;
    box-sizing: border-box;
}
.fx-table *, .fx-table ::after, .fx-table ::before {
    box-sizing: border-box;
}

/* Çà(Row) ¼³Á¤ */
.fx-row {
    display: flex;
    width: 100%;
    border-bottom: 1px solid #e0e0e0;
}
.fx-row:last-child {
    border-bottom: none;
}

/* Çì´õ Àü¿ë */
.fx-header {
    background-color: #e5e5cc;
    color: #777555;
    font-weight: bold;
    border-bottom: 2px solid #d4d4b3;
}

/* ¼¿(Cell) ±âº» °øÅë ¼³Á¤ */
.fx-cell {
    padding: 15px 10px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    line-height: 1.6;
}

/* ¼¿ °£ÀÇ ¼¼·Î ±¸ºÐ¼± (¿øÇÏÁö ¾ÊÀ¸¸é HTML¿¡¼­ Ŭ·¡½º¸¦ »©°Å³ª style="border:none" ÁÖ¸é µÊ) */
.b-left { border-left: 1px solid #e0e0e0; }
.b-right { border-right: 1px solid #e0e0e0; }

/* ù ¹ø° ¿­ °°Àº ƯÁ¤ ºÎ°¢¿ë ¿¬ÇÑ ¹è°æ»ö */
.bg-side { background-color: #f7f6f0; }
.fx-header .bg-side { background-color: transparent; } /* Çì´õÀÏ ¶§´Â Åõ¸íÇÏ°Ô */

/* ¼¿ ³»ºÎ ¸ÖƼ ¶óÀÎ ±¸ºÐ¿ë */
.fx-sub-item {
    width: 100%;
    padding: 4px 0;
    border-bottom: 1px solid #eee;
}
.fx-sub-item:last-child {
    border-bottom: none;
}
/* ¿ÞÂÊ: ÀçÁú¸í ¿µ¿ª (³Êºñ¸¦ °íÁ¤ÇÏ¿© ¼¼·Î ÁÙÀ» ±ò²ûÇÏ°Ô ¸ÂÃã) */
.alloy_01 .steel-list .type {
    width: 30%;
    font-weight: 500;
    color: #222;
}

/* ¿À¸¥ÂÊ: ½½·¡½Ã ±âÈ£¿Í ÄÚµå ±Ô°Ý ¿µ¿ª */
.alloy_01 .steel-list .code-group {
    width: 65%;
    display: flex;
    color: #666;
}

/* ½½·¡½Ã(/) ±âÈ£ ½ºÅ¸ÀÏ */
.alloy_01 .steel-list .separator {
    margin-right: 8px;
    color: #999;
    padding-right: 30px;
}

/* ÄÚµå ÅؽºÆ® ½ºÅ¸ÀÏ */
.alloy_01 .steel-list .code {
    flex: 1;
}

.alloy_02 .imgBox img {
    margin:40px;
    border-radius: 10px;
    width:500px;
}
.alloy_03 .imgBox {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap:30px;
}
.alloy_03 .imgBox img {
    border-radius: 10px;
    width:800px;
}
.alloy_04 .imgBox img,
.alloy_06 .imgBox img,
.alloy_07 .imgBox img
{
    border-radius: 20px;
    box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.2);
}
.alloy_05 .Box_wrapper {
   width: var(--main-width);
   margin:0 auto;
}
.alloy_05 .imgBox {
   display: flex;
   justify-content: flex-start;
   align-items: top;
   gap:30px;
   flex-wrap: wrap;
}
.alloy_05 .imgBox .imgBox_item {
    width:30%;
    border: 1px solid #ccc;
    padding:50px;
}
.alloy_05 .imgBox .imgBox_item span {
    padding-top:30px;
    display: block;
}

.copyright {
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffffff;
    font-size: 1rem;
    z-index: 999;
    padding:50px 0;
    background-color: #3b3535;
}
/* --------------------------------------------------
   [°øÅë ž À̵¿ ¹öÆ° (Top Button) ½ºÅ¸ÀÏ]
-------------------------------------------------- */
#top-btn {
    position: fixed;
    bottom: 40px;
    right: 40px;
    width: 50px;
    height: 50px;
    background-color: #ef476f; /* Æ÷ÀÎÆ® Ä÷¯(ÇÎÅ©) Àû¿ë */
    border-radius: 50%;
    cursor: pointer;
    z-index: 999; /* Ä«ÇǶóÀÌÆ®¿Í °áÀÌ °ãÄ¡Áö ¾Ê°Ô ÃÖ»óÀ§±Ç ¹èÄ¡ */
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
    
    /* È­¸é Ç¥½Ã ÀüȯÀ» À§ÇÑ ÆäÀ̵å(Fade) È¿°ú ¼¼Æà */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, background-color 0.2s ease, transform 0.2s ease;
}

/* ¹öÆ° È°¼ºÈ­ »óÅ Ŭ·¡½º (JS¿¡¼­ Á¦¾î) */
#top-btn.show {
    opacity: 1;
    visibility: visible;
}

/* ¹öÆ° ³»ºÎ È­»ìÇ¥ ¾ÆÀÌÄÜ ¸ð¾ç (CSS·Î ±¸Çö) */
#top-btn span {
    display: block;
    width: 12px;
    height: 12px;
    border-top: 3px solid #fff;
    border-left: 3px solid #fff;
    transform: rotate(45deg); /* 45µµ ȸÀü½ÃÄÑ À­¹æÇâ È­»ìÇ¥ ¸¸µê */
    margin-top: 4px;
    transition: transform 0.2s ease;
}

/* ¸¶¿ì½º È£¹ö ½Ã »ì¦ À§·Î Æ¢´Â °¡¼Ó ¸ð¼Ç ¹× »ö»ó ¹ÝÀü */
#top-btn:hover {
    background-color: #111111;
    transform: translateY(-4px);
}
#top-btn:hover span {
    border-top-color: #ef476f;
    border-left-color: #ef476f;
}
/*tab css*/
.tab{ width:100%;}
.tabnav{font-size:0; width:100%;}
.tabnav li{
    display: inline-block;  
    text-align:center;
    background-color:#efefef; 
    border:1px solid #ccc;
}
.tabnav li a:before {
    content:"";
    position:absolute; 
    left:0; top:0px; 
    width:100%; height:3px; 
}
.tabnav li a.active:before{
    content: '';
    position: absolute;
    top: 43px;
    left: 50%;
    transform: translateX(-50%); /* ? »ï°¢ÇüÀÌ Á¤È®È÷ °¡¿îµ¥ ¿Àµµ·Ï Á¤·Ä º¸Á¤ */
    width: 0;
    height: 0;
    border-top: 10px solid #7ea21e;
    border-bottom: 10px solid transparent;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;

}
.tabnav li a.active{border-bottom:1px solid #fff;}
.tabnav li a{ 
    position:relative;
     display:block; 
     background: #efefef; 
     color: #000; 
     text-decoration:none; 
     font-size:0.9rem;
    padding:10px 30px;
    }
.tabnav li a:hover,
.tabnav li a.active{background:#fff; color:#7ea21e; }
.tabcontent{
    padding-top: 20px;
     height:100%; 
     border-top:none;
}