/* --- 3. Sub Fixed Header (2 Tiers) --- */
        .sub-header-wrapper {
            position: fixed; top: 80px; left: 0; width: 100%;
            z-index: 900; background: #fff;
            box-shadow: 0 5px 10px rgba(0,0,0,0.05);transition: top 0.05s;
        }
		.sub-header-wrapper.up{ top:0; }
        .innerV { max-width: 1400px; margin: 0 auto; position: relative; padding: 0 20px;}
        /* Tier 1: Product Name & Buy Buttons */
        .sub-tier-1 {
            border-bottom: 1px solid #eee;
            height: 60px;
			
        }
        .sub-tier-1 .innerV {
            height: 100%; display: flex; justify-content: space-between; align-items: center;
        }
        .prod-name { font-size: 24px; font-weight: 700; color: #000; }
        .prod-btns { display: flex; gap: 10px; }
        .btn-basic {
            padding: 8px 25px; font-size: 14px; font-weight: 500;
            border: 1px solid #333; transition: 0.3s;
			border-radius:30px;
        }
        .btn-black { background: #00508f; color: #fff; border-color:#00508f;}
        .btn-white { background: #fff; color: #000; }
        .btn-basic:hover { opacity: 0.8; }

        /* Tier 2: Tab Menu */
        .sub-tier-2 { height: 50px; background: #f9f9f9; }
        .sub-tabs {
            display: flex; justify-content: center; height: 100%;
        }
        .sub-tabs li a {
            display: block; padding: 0 30px; line-height: 48px;
            font-size: 15px; font-weight: 500; color: #888; border-bottom: 3px solid transparent;
        }
        .sub-tabs li.active a { color: #000; border-bottom-color: #f73545; font-weight: 700; }

        /* Space for fixed sub-header */
        .sub-content-spacer { padding-top: 192px; }  


        .pc-only{ display:block;}
        .m-only{ display:none;}


        /* --- 4. Sub Hero Visual --- */
        .sub-hero {
            position: relative;
            width: 100%; height:900px;
            background: url('/new/m60/img/sub_Visual.png') no-repeat center center; /* 대체 이미지 필요 */
            background-color: #111; /* 이미지 없을 시 배경색 */
            background-size: cover;
            color: #fff;
        }
        .hero-txt-wrap {
            position: absolute; top: 50%; right: 10%;
            transform: translateY(-50%);
            text-align: left;
        }
        .m60-icon { font-size: 106px; border: 0px solid #fff; display: block; padding: 10px 0px; margin-bottom: 10px;  font-weight:700 ;font-family: 'GMarketSans'; line-height:70px;}
        .m60-icon img{ display:inline;}		
        .hero-title { font-size: 56px; font-weight: 700; line-height: 1.1; margin-bottom: 20px; }
        .hero-desc { font-size: 18px; font-weight: 300; opacity: 0.8;  word-break:keep-all; max-width:500px;}
        
        .scroll-icon {
            position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%);
            font-size: 30px; animation: bounce 3s infinite; opacity: 1.7;
        }
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {transform: translateX(-50%) translateY(0);}
            40% {transform: translateX(-50%) translateY(-5px);}
            60% {transform: translateX(-50%) translateY(-1px);}
        }


        /* --- 5. Content Sections --- */
        .section-wrap { padding: 80px 0; }
        .sec-title { text-align: center; margin-bottom: 40px; }
        .sec-title h3 { font-size: 32px; font-weight: 700; margin-bottom: 10px;  }
        .sec-title p { color: #666; }

        /* -- DESCRIPTION -- */
        .desc-video {
            max-width: 1000px; margin: 0 auto 80px;
            position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; background: #000;
        }
        .desc-video iframe { position: absolute; top:0; left:0; width:100%; height:100%; }

        /* Gallery */
        .gallery-container { max-width: 800px; margin: 0 auto 80px; text-align: center; }
        .main-img-box { position: relative; margin-bottom: 20px; border: 0px solid #eee;text-align:center; }
        .main-img-box img{margin:auto;}		
        .gallery-arrow {
            position: absolute; top: 50%; transform: translateY(-50%);
            width: 40px; height: 40px; background: rgba(0,0,0,0.0); color: #000; font-size:30px;
            display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 10;
        }
        .g-prev { left: 10px; } .g-next { right: 10px; }
        
        .thumb-box { display: flex; justify-content: center; gap: 10px; }
        .thumb { width: 80px; height: 80px; border: 2px solid transparent; cursor: pointer; opacity: 0.6; }
        .thumb.active { border-color: #005eb8; opacity: 1; }
        .thumb img { width: 100%; height: 100%; object-fit: cover; }

        /* Mid Text */
        .mid-text { text-align: center; max-width: 800px; margin: 0 auto 80px; font-size: 18px; color: #555; line-height: 1.8; }
        .mid-text strong { color: #000; font-weight: 700; }
		.mid-text strong span{color: #005eb8;  }
		
		.mid-text p{ color:rgba(0,0,0,0.6); font-weight:500; margin-top:0px; }
        /* Parallax Banner */
        .parallax-banner {
            width: 100%; height: 400px;flex-wrap: wrap;
            background: url('/new/m60/img/sub_banner.png') no-repeat center center;
            background-size: cover; background-attachment: fixed;
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 40px; font-weight: 700;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5);
            margin-bottom: 80px;
        }
		.parallax-banner p.p1 {font-size:80px;color:#fff; font-weight:700;;display:block; text-align:center;} 
		.parallax-banner p span {font-size:40px;color:#fff; font-weight:300;;display:block; } 		
        /* Zig-Zag Layout */
        .zig-zag-container { width: 100%; }
        .zig-zag-row { display: flex; height: 500px; }
        .zz-img, .zz-txt { width: 50%; height: 100%; }
        .zz-img img { width: 100%; height: 100%; object-fit: cover; }
        .zz-txt {
            background: #f8f8f8; display: flex; flex-direction: column;
            justify-content: center; padding: 0 80px;
        }
        .zz-txt h4 { font-size: 45px; margin-bottom: 20px; font-weight: 700; line-height:1.2;}
        .zz-txt h4 span{ font-size:37px; color:#00508f; line-height:45px;display:inline-block;vertical-align:middle;}		
        .zz-txt h4 span.s2{font-size:45px;}		
        .zz-txt p { font-size: 16px; color: #666; line-height: 1.6; }
        .zz-txt p span{ display:inline-block; font-weight:700 ;}
        /* 짝수 번째 행: 텍스트 왼쪽, 이미지 오른쪽 (Row Reverse) */
        .zig-zag-row:nth-child(even) { flex-direction: row-reverse; }
        .zig-zag-row:nth-child(even) .zz-txt { background: #fff; }


        /* -- FEATURES -- */
        .feat-img { margin-bottom: 60px;text-align:center; }
        .feat-img img { width: 100%; max-width: 1000px; margin: 0 auto; }


        /* -- SPECIFICATION (Table) -- */
        .spec-table {
            width: 100%; max-width: 1000px; margin: 0 auto;
            border-collapse: collapse; border-top: 2px solid #333;
        }
        .spec-table th, .spec-table td {
            padding: 15px 20px; text-align: left; border-bottom: 1px solid #ddd;
        }
        .spec-table th {
            width: 30%; background: #f9f9f9; font-weight: 700; color: #333;
        }
        .spec-table td { color: #666; font-size: 15px; }
        .spec-table2 {
            width: 100%; max-width: 1000px; margin: 0 auto;
            border-collapse: collapse; border-top: 1px solid #333;
        }

        .m60-blue-text { 
            font-weight: 900; /* 가장 두꺼운 굵기 */
            font-size: 124px; /* 크기 조절 */
            text-transform: uppercase;
            display: inline-block; /* background-clip 필수 */
            margin-top: 30px;
            line-height: 1; /* 텍스트 상하 여백 최소화 */
            
            /* --- 핵심 수정 부분: 그라데이션 적용 --- */
            /* 180deg: 위에서 아래로 내려오는 방향 */
            background-image: linear-gradient(
                180deg, 
                #0b88ea 0%,   
                #0772c6 50%,   
                #015393 100%  
            );
            
            /* 배경을 텍스트 형태로 잘라냄 */
            background-clip: text;
            -webkit-background-clip: text; /* 크롬/사파리 호환 */
            
            /* 기본 텍스트 색상 투명화 */
            color: transparent;

            /* 입체감을 위한 그림자 (파란색에 맞춰 약간 은은하게 조정) */
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.0);
        }
		

        .m60-metal-text { 
		
            font-family: 'Noto Sans KR', sans-serif; /* 두꺼운 산세리프 폰트 */
            font-weight: 900; /* 가장 두꺼운 굵기 */
            font-size: 120px; /* 원하는 크기로 조절하세요 */
            text-transform: uppercase; /* 대문자 고정 */
            display: inline-block; /* background-clip 적용을 위해 필요 */
            
            /* 1. 메탈 느낌의 선형 그라데이션 정의 (좌 -> 우) */
            /* 어두운 회색 -> 밝은 흰색 -> 중간 회색 -> 다시 밝은 흰색으로 이어지는 반사광 표현 */
            background-image: linear-gradient(
                90deg, 
                #777777 0%,   /* 시작: 중간 회색 */
                #ffffff 30%,   /* 30% 지점: 밝은 흰색 하이라이트 */
                #888888 55%,   /* 55% 지점: 약간 어두운 회색 (반사 그림자) */
                #ffffff 85%,   /* 85% 지점: 다시 밝은 흰색 */
                #aaaaaa 100%   /* 끝: 밝은 회색 마무라 */
            );
            
            /* 2. 배경을 텍스트 영역으로 잘라냄 */
            background-clip: text;
            -webkit-background-clip: text; /* 사파리/크롬 브라우저 호환 */
            
            /* 3. 기본 텍스트 색상을 투명하게 만들어 배경 그라데이션이 보이게 함 */
            color: transparent;

            /* 4. 입체감을 위한 은은한 그림자 추가 */
            /* x축, y축, 흐림정도, 색상 */
            text-shadow: 2px 3px 5px rgba(0,0,0,0.5);
        }
		

        /* --- Mobile Responsive --- */
        @media (max-width: 768px) {
            /* Header */
            header { height: 60px; padding: 0; }
            .logo img { height: 28px; }
            .pc-nav { display: none; }
            .lang-box { display: none; } 
            .mobile-btn { display: block; }
            body { padding-top: 60px; }
			
            .pc-only{ display:block;}
            .m-only{ display:none;}

            /* Sub Header */
            .sub-header-wrapper { top: 60px; }
            .sub-tier-1 { height: 50px; }
            .prod-name { font-size: 18px; }
            .btn-basic { padding: 5px 15px; font-size: 12px; }
            .sub-tabs li a { padding: 0 15px; font-size: 13px; }
            .sub-content-spacer { padding-top: 100px; }

            /* Hero */
            .sub-hero { height: 400px; background-position: center; }
            .hero-title { font-size: 25px; }
            .hero-desc { font-size: 14px; }
            .hero-txt-wrap { right: 5%; width: 90%; }

            /* Zig-Zag Mobile (Stacking Image then Text) */
            .zig-zag-row { height: auto; flex-direction: column !important; /* 무조건 세로 정렬 */ }
            .zz-img, .zz-txt { width: 100%; height: 300px; }
            .zz-txt { height: auto; padding: 40px 20px; }
            /* 중요: 이미지를 먼저 보이게 하기 위해 HTML 순서를 이미지->텍스트로 배치하고, PC에서 row-reverse사용 */
            
            /* Table */
            .spec-table th, .spec-table td { display: block; width: 100%; }
            .spec-table th { background: #eee; border-bottom: none; }

            /* Footer */
            footer { padding: 40px 0; }
            .footer-top { flex-direction: column; gap: 30px; }
            .addr-box:last-child { margin-left: 0; padding-left: 0; border-left: none; }
            .addr-box { text-align: center; }
            .footer-btm { flex-direction: column-reverse; gap: 20px; text-align: center; }
            .btm-right { flex-direction: column; gap: 15px; }
			
			
			
        .m60-icon { font-size: 60px; border: 0px solid #fff; display: block; margin-bottom: 10px;  font-weight:700 ;font-family: 'GMarketSans'; line-height:60px;}
        .m60-icon img{ display:inline; width:20px;}		
		.scroll-icon{bottom:5px;}
		.scroll-icon img{width:40px;}
		
        /* Parallax Banner */
        .parallax-banner {
            width: 100%; height: 300px;flex-wrap: wrap;
            background: url('/new/m60/img/sub_banner.png') no-repeat center center;
            background-size: cover; background-attachment: fixed;
            display: flex; align-items: center; justify-content: center;
            color: #fff; font-size: 40px; font-weight: 700;
            text-shadow: 0 2px 10px rgba(0,0,0,0.5);
            margin-bottom: 80px;
        }
		.parallax-banner p.p1 {font-size:80px;color:#fff; font-weight:700;;display:block; text-align:center;} 
		.parallax-banner p span {font-size:40px;color:#fff; font-weight:300;;display:block; } 			
		.parallax-banner p.p1{ font-size:30px;}
		.parallax-banner p.p1 span{ font-size:16px;}
		.section-wrap{ padding:30px 0 ;}

		
        .m60-blue-text { 
            font-weight: 900; /* 가장 두꺼운 굵기 */
            font-size: 100px; /* 크기 조절 */
            text-transform: uppercase;
            display: inline-block; /* background-clip 필수 */
            margin-top: 30px;
            line-height: 1; /* 텍스트 상하 여백 최소화 */
            
            /* --- 핵심 수정 부분: 그라데이션 적용 --- */
            /* 180deg: 위에서 아래로 내려오는 방향 */
            background-image: linear-gradient(
                180deg, 
                #0b88ea 0%,   
                #0772c6 50%,   
                #015393 100%  
            );
            
            /* 배경을 텍스트 형태로 잘라냄 */
            background-clip: text;
            -webkit-background-clip: text; /* 크롬/사파리 호환 */
            
            /* 기본 텍스트 색상 투명화 */
            color: transparent;

            /* 입체감을 위한 그림자 (파란색에 맞춰 약간 은은하게 조정) */
            text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.0);
        }
		

        .m60-metal-text { 
		
            font-family: 'Noto Sans KR', sans-serif; /* 두꺼운 산세리프 폰트 */
            font-weight: 900; /* 가장 두꺼운 굵기 */
            font-size: 120px; /* 원하는 크기로 조절하세요 */
            text-transform: uppercase; /* 대문자 고정 */
            display: inline-block; /* background-clip 적용을 위해 필요 */
            
            /* 1. 메탈 느낌의 선형 그라데이션 정의 (좌 -> 우) */
            /* 어두운 회색 -> 밝은 흰색 -> 중간 회색 -> 다시 밝은 흰색으로 이어지는 반사광 표현 */
            background-image: linear-gradient(
                90deg, 
                #777777 0%,   /* 시작: 중간 회색 */
                #ffffff 30%,   /* 30% 지점: 밝은 흰색 하이라이트 */
                #888888 55%,   /* 55% 지점: 약간 어두운 회색 (반사 그림자) */
                #ffffff 85%,   /* 85% 지점: 다시 밝은 흰색 */
                #aaaaaa 100%   /* 끝: 밝은 회색 마무라 */
            );
            
            /* 2. 배경을 텍스트 영역으로 잘라냄 */
            background-clip: text;
            -webkit-background-clip: text; /* 사파리/크롬 브라우저 호환 */
            
            /* 3. 기본 텍스트 색상을 투명하게 만들어 배경 그라데이션이 보이게 함 */
            color: transparent;

            /* 4. 입체감을 위한 은은한 그림자 추가 */
            /* x축, y축, 흐림정도, 색상 */
            text-shadow: 2px 3px 5px rgba(0,0,0,0.5);
        }
		
		
        }