@charset "utf-8";

/* ==========================================================================
   0. COMMON & HEADER OVERRIDE
   ========================================================================== */
.sub-section {
    padding: 120px 0;
    position: relative;
}

.sub-section.inner {
    padding-left: 50px;
    padding-right: 50px;
}

/* [서브 메뉴 오버 효과] */
.sub-menu li a {
    transition: color 0.2s, font-weight 0.2s;
}
.sub-menu li a:hover,
.sub-menu li a:focus {
    color: #CB1723 !important;
    font-weight: 700;
}
.sub-menu li.on a {
    color: #CB1723;
    font-weight: 700;
}
    .mo-only { display: none; }

/* ==========================================================================
   1. SUB VISUAL (Zoom Effect & Text Animation)
   ========================================================================== */
.sub-visual {
    position: relative;
    width: 100%;
    height: 900px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    z-index: 1;
}

.visual-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('/assets/images/sub_visual01-1.png') no-repeat center center;
    background-size: cover;
    z-index: 1;
    transform: scale(1);
    animation: zoomIn 15s ease-out forwards;
}

.visual-bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
}

@keyframes zoomIn {
    0% { transform: scale(1); }
    100% { transform: scale(1.15); }
}

.visual-text {
    position: relative;
    z-index: 2;
    text-align: center;
    color: #fff;
}

.sub-cate {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 20px;
    margin-bottom: 16px;
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}
.sub-cate.active { opacity: 0.6; transform: translateY(0); }

.sub-title {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 80px;
    font-weight: 700;
    margin: 0 0 0px; /* [수정] 타이틀 아래 여백 제거 (라인으로 간격 조절) */
    line-height: 1;
    letter-spacing: -2px;
}

.sub-title span {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px) skewY(10deg);
    filter: blur(10px);
    animation: revealLetter 1s cubic-bezier(0.215, 0.61, 0.355, 1) forwards;
    animation-play-state: paused;
}
@keyframes revealLetter {
    to { opacity: 1; transform: translateY(0) skewY(0); filter: blur(0); }
}

.sub-desc {
    font-family: "Montserrat", sans-serif; 
    font-size: 20px;
    font-weight: 200;
    
    /* [수정] 타이틀과의 간격 조정 (라인이 들어갈 공간 확보) */
    margin-top: 40px; 
    
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
}

/* 세로 라인 생성 (가상 요소) */
.sub-desc::before {
    content: '';
    display: block;
    width: 1px;                  /* 라인 두께 */
    height: 50px;                /* 라인 높이 (요청사항) */
    background-color: rgba(255, 255, 255, 0.3); /* 흰색 투명도 0.5 (요청사항) */
    margin: 0 auto 30px;         /* 가로 중앙 정렬 및 아래 텍스트와 30px 간격 */
}

.sub-desc.active { opacity: 0.9; transform: translateY(0); }

/* ==========================================================================
   2. INTRO SECTION
   ========================================================================== */
.sub-intro { padding-bottom: 80px; }
.intro-head { margin-bottom: 80px; }
.intro-head.js-fadein { transition-delay: 0.3s; }

.intro-logo { display: block; margin: 0 auto 30px; height: 58px; }
.intro-desc {font-family: "Montserrat", sans-serif;  font-size: 20px; color: #444; line-height: 1.6; text-align: center; /*letter-spacing: -1px;*/  font-weight:400;}

.intro-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }

.intro-item .img-box { width: 100%; height: 450px; overflow: hidden; margin-bottom: 30px; }
.intro-item .img-box img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s; }
.intro-item:hover .img-box img { transform: scale(1.05); }

.intro-item .txt-box .num { display: block; font-family: "Montserrat", sans-serif; color: #CB1723; font-size: 18px; font-weight: 300; margin-bottom: 10px; }
.intro-item .txt-box h3 { font-family: "Montserrat", sans-serif; font-size: 22px; font-weight: 700; margin: 0 0 15px; word-break: keep-all; /*letter-spacing: -1px; */}
.intro-item .txt-box p { font-size: 18px; color: #666; line-height: 1.6; word-break: keep-all; /*letter-spacing: -1px; */}

.intro-grid .intro-item:nth-child(1) { transition-delay: 0.5s; }
.intro-grid .intro-item:nth-child(2) { transition-delay: 0.7s; }
.intro-grid .intro-item:nth-child(3) { transition-delay: 0.9s; }


/* ==========================================================================
   3. PROMISE SECTION
   ========================================================================== */
.sub-promise {
    background: url('/assets/images/sub01_1_bg.png') no-repeat center center;
    background-size: cover;
    background-attachment: fixed;
    color: #fff;
    padding: 100px 0;
    position: relative;
    overflow: hidden;
}
.sub-promise::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: 50%; width: 50%;
    background: rgba(0, 0, 0, 0.15); z-index: 1;
}

.promise-inner { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; }
.promise-left { width: 50%; position: relative; z-index: 5; }
.eng-cali { display: block; width: 100%; transition-delay: 0.3s; }
.eng-cali img { display: block; width: 100%; max-width: none; height: auto; position: relative; left: 20%; transform: translateY(-20px); }

.promise-right { width: 50%; padding-left: 60px; padding-right: 20px; text-align: center; }
.promise-right h3 { font-family: "Montserrat", sans-serif;  font-size: 30px; font-weight: 700; margin-bottom: 24px; line-height: 1.3; /*letter-spacing: -1px;*/ transition-delay: 0.5s; }
.promise-right .lead {  font-family: "Montserrat", sans-serif;  font-size: 25px; font-weight: 300; margin-bottom: 30px; color: rgba(255, 255, 255, 0.7); line-height: 1.3; letter-spacing: -1px; transition-delay: 0.7s; }
.promise-right .desc { font-size: 18px; line-height: 1.5; color: rgba(255, 255, 255, 0.8); margin-bottom: 30px; word-break: keep-all; /*letter-spacing: -1px;*/ transition-delay: 1.1s; }
.promise-right .slogan { font-size: 17px; font-weight: 700; color: #fff; padding-top: 0; transition-delay: 1.5s; }


/* ==========================================================================
   4. ORGANIZATION CHART
   ========================================================================== */
.sub-org { padding: 150px 0; position: relative; overflow: hidden; }

.org-head { position: relative; z-index: 2; margin-bottom: 20px; padding-left: 20px; }
.org-head h3 {font-family: "Montserrat", sans-serif;  font-size: 50px; color: #111; font-weight: 400; letter-spacing: -1.5px; margin: 0; line-height: 1.2; }
.org-head h3 strong { font-weight: 700; }

.org-wrap { position: relative; display: flex; justify-content: space-between; align-items: flex-start; width: 100%; max-width: 1300px; margin: 0 auto; }

.sub-org .bg-text {
    position: absolute; top: 0%; left: 20%; transform: translate(-50%, -50%);
    font-family: "Montserrat", sans-serif; font-weight: 900; font-size: 120px;
    line-height: 0.85; color: #F8F8F8; text-align: left; z-index: 0;
    opacity: 0.8; pointer-events: none; user-select: none;
}

.sub-org img { z-index:1000;}

.org-left-group, .org-connector, .org-right-group { position: relative; z-index: 2; }

/* Left Group */
.org-left-group { display: flex; flex-direction: column; align-items: center; width: auto; flex-shrink: 0; margin-top: 20px; }
.org-row-top { display: flex; align-items: center; }

.node-circle.president {
    width: 210px; height: 210px;
    background: url('/assets/images/ceo_bg.png') no-repeat center center, linear-gradient(135deg, #e60012 0%, #aa0000 100%);
    background-size: cover; background-blend-mode: soft-light;
    border-radius: 50%; color: #fff;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    box-shadow: 10px 15px 30px rgba(180, 0, 0, 0.4); position: relative; z-index: 5; overflow: hidden;
}
.node-circle.president .role { font-family: "Montserrat", sans-serif; font-size: 26px; font-weight: 700; line-height: 1.2; text-align: center; padding-top: 5px; }
.node-circle.president .name { font-family: "Montserrat", sans-serif; font-size: 26px; font-weight: 400; opacity: 0.8; }

.connect-t-shape { display: flex; flex-direction: column; align-items: center; width: 80px; position: relative; }
.connect-t-shape .line-horz { width: 100%; height: 2px; border-top: 1px dotted #ddd; margin-top: -2px; }
.connect-t-shape .line-vert { width: 2px; height: 80px; border-left: 1px dotted #ddd; position: absolute; top: 0; left: 360%; transform: translateX(-50%); z-index: 1; }

.node-pill.coo {
    width: 160px; height: 75px; background: #8B0000; color: #fff;
    border-radius: 60px; display: flex; justify-content: center; align-items: center;
    font-family: "Montserrat", sans-serif; font-size: 22px; font-weight: 400;
    box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.1); position: relative; z-index: 5;
}

.org-row-bottom { margin-top: 0; display: flex; justify-content: center; width: 100%; padding-left: 0; }
.org-row-bottom .node-pill.strategy { margin-top: -22px; /*margin-right: 50px;*/ transform: translateX(355px); }
.node-pill.strategy {font-family: "Montserrat", sans-serif; 
    width: 250px; height: 80px; background: #fff; border: 2px solid #CB1723;
    border-radius: 60px; display: flex; flex-direction: column; justify-content: center; align-items: center;
    color: #111; box-shadow: 5px 10px 20px rgba(0, 0, 0, 0.05); z-index: 5;
}
.node-pill.strategy strong { font-family: "Montserrat", sans-serif; font-size: 19px; font-weight: 500; line-height: 1.2;  }
.node-pill.strategy span { font-family: "Montserrat", sans-serif; font-size: 13px; color: #666; font-weight: 500; }

/* Right Group */
.org-connector { flex-grow: 1; height: 2px; border-top: 1px dotted #ddd; margin-top: 122px; align-self: flex-start; min-width: 50px; }
.org-right-group { width: 35%; min-width: 400px; position: relative; padding-left: 30px; }
.org-right-group::before { content: ''; position: absolute; top: 35px; bottom: 38px; left: -2px; width: 2px; border-left: 1px dotted #DDDDDD; }

.dept-list { display: flex; flex-direction: column; gap: 16px; }
.dept-list li { position: relative; }
.dept-list li::before { content: ''; position: absolute; top: 50%; left: -32px; width: 32px; height: 2px; border-top: 1px dotted #ddd; }

.d-box {
    background: #fff; border: 1px solid #e0e0e0; border-radius: 50px; padding: 20px 35px;
    display: flex; align-items: center; justify-content: space-between; transition: all 0.3s ease; width: 100%;
}
.d-box strong { font-family: "Montserrat", sans-serif; font-size: 18px; color: #111; font-weight: 500; white-space: nowrap; margin-right: 20px; }
.d-box span { font-family: "Montserrat", sans-serif; font-size: 14px; color: #999; font-weight: 400; text-align: right; word-break: keep-all; }
.d-box:hover { border-color: #CB1723; box-shadow: 0 5px 15px rgba(203, 23, 35, 0.15); transform: translateX(5px); }
.d-box:hover strong { color: #CB1723; }


/* ==========================================================================
   5. HISTORY SECTION
   ========================================================================== */
.sub-history {
    background: url('../images/sub01_history_bg.png') no-repeat center center;
    background-size: cover; background-attachment: fixed;
    padding: 150px 0; color: #fff; position: relative;
}
.sub-history::before {
    content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.0); z-index: 1;
}

.history-inner {
    position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: flex-start;
    margin-left: 210px; max-width: 740px; box-sizing: border-box;
}

.history-head { position: relative; width: 100%; margin-bottom: 40px; padding-left: 0; }
.bg-svg { position: absolute; top: -150px; left: -50px; width: 800px; pointer-events: none; z-index: -1; }
.history-head h3 { font-family: "Montserrat", sans-serif; font-size: 50px; line-height: 1.2; font-weight: 400; margin: 0; padding: 0; text-shadow: 0 2px 10px rgba(0,0,0,0.3); }
.history-head h3 strong { font-weight: 700; }

.history-list { width: 100%; display: flex; flex-direction: column; gap: 0; }
.h-row {
    display: flex; justify-content: space-between; align-items: center; padding: 13px 30px;
    background: rgba(0, 0, 0, 0.1); border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease; backdrop-filter: blur(5px);
}
.h-row:hover { background: rgba(0, 0, 0, 0.25); padding-left: 40px; }
.h-year { width: 160px; font-family: "Montserrat", sans-serif; font-weight: 700; font-size: 18px; color: #fff; flex-shrink: 0; }
.h-desc { flex: 1; font-size: 17px; color: rgba(255, 255, 255, 0.95); text-align: right; word-break: keep-all; font-weight: 200; }


/* ==========================================================================
   6. GALLERY SECTION
   ========================================================================== */
.sub-gallery { padding-bottom: 0; overflow: hidden; position: relative; }

.gallery-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    margin-bottom: 80px; padding: 0 50px; position: relative; z-index: 2;
}
.gallery-bg-text { position: absolute; top: 0px; left: -50px; z-index: -1; pointer-events: none; line-height: 0.5; }
.gallery-bg-text span { display: block; font-family: "Montserrat", sans-serif; font-weight: 900; font-size: 100px; line-height: 0.9; color: #F8F8F8; white-space: nowrap; }

.gallery-head h3 { font-family: "Montserrat", sans-serif; font-size: 50px; line-height: 1.15; margin: 0px; position: relative; font-weight: 400; }
.gallery-desc { text-align: right; font-size: 17px; color: #666; line-height: 1.6; font-weight: 300; }

.gallery-rolling-wrap { width: 100%; overflow: hidden; padding-bottom: 25px; display: flex; flex-direction: column; gap: 24px; }
.gallery-row { width: 100%; overflow: hidden; }
.gallery-track { display: flex; gap: 24px; width: max-content; }
.gallery-track:hover { animation-play-state: paused; }

.track-slow { animation: rolling 60s linear infinite; }
.track-fast { animation: rolling 60s linear infinite reverse; }
@keyframes rolling {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.g-item { width: 380px; flex-shrink: 0; position: relative; overflow: hidden; }
.g-item img { width: 100%; height: 380px; object-fit: cover; display: block; transition: transform 0.4s ease; }
.g-caption {
    position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: #fff; padding: 30px 20px 20px; font-size: 16px; font-weight: 500;
    /*white-space: nowrap; overflow: hidden; text-overflow: ellipsis;*/ opacity: 0;
    transform: translateY(10px); transition: all 0.4s ease;
}
.g-item:hover img { transform: scale(1.1); }
.g-item:hover .g-caption { opacity: 1; transform: translateY(0); }


/* ==========================================================================
   7. BI/CI PAGE STYLES
   ========================================================================== */
.sub-bici { background-color: #fff; padding-bottom: 150px; }

.bici-card, .color-card {
    background: #fff; border-radius: 20px; padding: 40px; box-shadow: none;
    border: 1px solid #EAEAEA; position: relative; overflow: hidden; transition: all 0.3s ease;
}
.bici-card:hover, .color-card:hover { border-color: #111; transform: translateY(-2px); }

.card-label {
    font-family: "Montserrat", sans-serif; font-size: 18px; color: #888;
    font-weight: 400; display: block; margin-bottom: 20px; letter-spacing: 0.5px;
    position: absolute; top: 30px; left: 30px;
}
.card-content { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; width: 100%; margin-top: 15px; }

.bici-grid-top { display: flex; gap: 24px; margin-bottom: 24px; height: 550px; }
.bici-card.logo-main { flex: 1.1; display: flex; flex-direction: column; background: #fff url('/assets/images/bg_check.png') repeat top left; background-size: auto; }
.logo-main .card-content { gap: 50px; padding-top: 20px; }
.bi-img-main { width: 450px; max-width: 90%; }
.bi-desc { text-align: center; }
.bi-desc strong {  font-family: "Montserrat", sans-serif; display: block; font-size: 20px; color: #111; font-weight: 700; letter-spacing: 0px; }
.bi-desc p {  font-family: "Montserrat", sans-serif; font-size: 20px; color: #666; font-weight: 400; margin-top: 0; letter-spacing: 0px; }

.bici-right-group { flex: 1; display: flex; flex-direction: column; gap: 24px; }
.bici-split { flex: 1; display: flex; gap: 24px; }
.bici-split .bici-card { flex: 1; }
.bi-img-symbol { width: 70px; }
.text-slogan { font-family: "Montserrat", sans-serif; color: #CB1723; font-weight: 600; font-size: 18px; letter-spacing: 2px; }
.bici-card.combo { flex: 1; }
.bi-img-combo { width: 380px; max-width: 90%; }

.bici-grid-color { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.color-card { height: 320px; display: flex; flex-direction: column; justify-content: space-between; padding: 30px; }
.color-card .card-label { position: static; color: inherit; opacity: 0.8; margin-bottom: 10px; font-size: 13px; }
.color-name { font-family: "Montserrat", sans-serif; font-size: 18px; font-weight: 400; margin-bottom: auto; padding-top: 5px; }
.color-info { margin-top: 30px; }
.color-info dl { display: flex; justify-content: space-between; margin-bottom: 8px; font-family: "Montserrat", sans-serif; font-size: 13px; padding-bottom: 6px; border-bottom: 1px solid rgba(255,255,255,0.2); }
.color-info dl:last-child { border-bottom: none; margin-bottom: 0; }
.color-info dt { font-weight: 600; }
.color-info dd { font-weight: 400; opacity: 0.9; }

.bg-red { background-color: #C7212B; color: #fff; border: none; }
.bg-white { background-color: #fff; color: #111; border: 1px solid #EAEAEA; }
.bg-white .color-info dl { border-bottom-color: #eee; }
.bg-black { background-color: #000; color: #fff; border: none; }
.bg-pantone { background-color: #A80039; color: #fff; border: none; }
.spot-desc { font-family: "Montserrat", sans-serif; font-size: 13px; line-height: 1.5; opacity: 0.9; font-weight: 500; }


/* ==========================================================================
   8. RESEARCH & INNOVATION PAGE STYLES (수정됨)
   ========================================================================== */


.research-visual .sub-title span:nth-child(11) {
    display: block;
    width: 100%;
    height: 0;       
    content: '';     
    margin-bottom: 0px; /* 줄 간격 필요시 조정 */
}

/* 두 줄이 되었을 때 줄간격 및 여백 조정 */
.research-visual .sub-title {
    line-height: 1.1; 
    margin-bottom: 0; /* 라인과의 간격 유지를 위해 초기화 */
}


/* --- 1. 인증사항 (Certificates) --- */

.sub-certi {
    position: relative;
    padding-top: 100px;
    padding-bottom: 100px;
    width: 100%;
    
    /* 1. 배경 이미지 전체 적용 (고정) */
    background-image: url('/assets/images/certi_bg.png');
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed; /* 배경 고정 */
    
    /* 로딩 중 깜빡임 방지용 기본 컬러 */
    background-color: #111; 
    overflow: hidden;
}

/* 2. [핵심] 상단 흰색 영역을 가상요소로 물리적으로 덮음 */
.sub-certi::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 55%; /* 섹션 높이의 55%만큼 흰색으로 덮음 */
    background-color: #ffffff;
    z-index: 1; /* 배경(0)보다 위, 컨텐츠(2)보다 아래 */
}

/* 컨텐츠는 흰색 박스 위로 올라와야 함 */
.sub-certi .inner {
    position: relative;
    z-index: 3;
}

/* 3. 타이틀 스타일 */
.certi-head {
	font-family: "Montserrat", sans-serif; 
	text-align: center;
    margin-bottom: 50px;
    position: relative;
}
.certi-head h3 {
    font-size: 50px;
    font-weight: 500;
    color: #111; /* 흰색 배경 위니까 검정 */
    margin: 0 0 0px;
    line-height: 1.2;
}
.certi-head .eng {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 16px;
    color: #CB1723;
    font-weight: 300;
    letter-spacing: 1px;
    text-transform: uppercase;
}

/* 4. 회전하는 텍스트 (흰색 배경 위에 위치) */
.spinning-text-obj {
    position: absolute;
    top: 100px; 
    right: 8%;
    width: 240px;
    height: 240px;
    z-index: 2; /* 흰색 배경(1)보다 위 */
    pointer-events: none;
    opacity: 0.1; 
    filter: invert(1); /* 검정색으로 보이게 반전 */
}

.spin-img {
    width: 100%;
    height: 100%;
    display: block;
    animation: spinText 20s linear infinite; /* 무조건 돌기 */
}

@keyframes spinText {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* 5. 리스트 및 이미지 박스 */
.certi-list {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 50px;
    align-items: flex-start;
}

.c-img {
    background: transparent;
    padding: 0; /* 테두리 제거 */
    border: none;
    box-shadow: 10px 15px 30px rgba(0,0,0,0.2);
    margin-bottom: 25px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border-radius: 10px;	
}

.c-img img {
    width: 100%;
    display: block;
    border-radius: 10px;
}

.certi-list li:hover .c-img {
    transform: translateY(-10px);
    box-shadow: 10px 25px 40px rgba(0,0,0,0.35);
}

/* 6. 하단 텍스트 (이미지 영역으로 내려오면 흰색 글씨여야 함) */
.c-name {
    font-size: 16px;
    color: #fff; /* 어두운 배경 위 흰색 */
    font-weight: 400;
    text-align: left;
    margin-top: 0;
    opacity: 0.9;
    text-shadow: 0 1px 2px rgba(0,0,0,0.5);
}

/* --- 2. R&D 탭 섹션 (Innovation) --- */

/* [수정] 중요! 상위 공통 클래스(.sub-section)의 120px 여백 제거 */
.sub-inno {
    padding-bottom: 0 !important;
}

/* 1. 이 섹션만 inner의 기본 패딩과 너비 제한을 해제 */
.sub-inno .inner {
    width: 100%;
    max-width: none;
    padding: 0;
    margin: 0;
}

/* 2. 상단 탭 메뉴와 타이틀은 중앙 정렬 유지 */
.inno-tab-nav,
.inno-head-text {
    width: 100%;
    max-width: 1300px;
    /* 상하 마진은 유지하되 좌우는 auto로 중앙 정렬 */
    margin: 0 auto 100px auto; 
    padding: 0 20px; /* 모바일 대응 최소 여백 */
    box-sizing: border-box;
    text-align: center; /* 내부 텍스트 중앙 정렬 */
}

/* 탭 네비게이션 스타일 */
.inno-tab-nav {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: 80px;
    /*margin-top: 120px;*/
	font-family: "Montserrat", sans-serif; 	
}
.inno-btn {
    font-size: 18px;
    color: #999;
    font-weight: 500;
    padding: 0px 0;
    position: relative;
    transition: all 0.3s;
    background: none;
    border: none;
    cursor: pointer;
}
.inno-btn.active, .inno-btn:hover {
    color: #111;
    font-weight: 700;
}
.inno-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #111;
}

/* 타이틀 텍스트 스타일 */
.inno-head-text {
    text-align: center;
    margin-bottom: 100px;
}
.inno-head-text h3 {
	font-family: "Montserrat", sans-serif; 
    font-size: 50px;
    font-weight: 500;
    margin-bottom: 0px;
    margin-top: -30px;
    color: #111;
    text-align: center; /* 강제 중앙 정렬 */
	letter-spacing:-1px;
}
.inno-head-text .eng {
    display: block;
    font-family: "Montserrat", sans-serif;
    color: #CB1723;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: 300;
    word-break: keep-all; /* 단어 단위 줄바꿈 */
    text-align: center;   /* 강제 중앙 정렬 */
    margin: 0 auto;       /* 블록 자체도 중앙 정렬 */
    max-width: 800px;     /* 설명글이 너무 퍼지지 않게 너비 제한 (선택사항) */
}
.inno-head-text .desc {
	font-family: "Montserrat", sans-serif; 
    font-size: 20px;
    color: #666;
    line-height: 1.6;
    word-break: keep-all;
	font-weight:400;
	letter-spacing:-0.5px;
}

/* 3. 메인 바디: 풀 너비(100%) 반반 레이아웃 */
.inno-content {
    display: none;
    animation: fadeIn 0.6s ease-out;
    width: 100%;
}
.inno-content.active {
    display: block;
}

.inno-body {
    display: flex;
    width: 100%;
    align-items: stretch; /* 높이 동일하게 맞춤 */
}

/* 왼쪽: 이미지 영역 (50%) */
.inno-img {
    width: 50%;
    position: relative;
    overflow: hidden;
}
.inno-img img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 영역 꽉 채우기 */
    display: block;
}

/* 오른쪽: 텍스트 영역 (50%, 배경색 #F8F8F8) */
.inno-txt {
    width: 50%;
    background-color: #f8f8f8; /* 요청하신 배경색 */
    padding: 120px 80px; /* 넉넉한 내부 여백 */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center; /* 수직 중앙 정렬 */
}

.inno-txt .small-tit {
	font-family: "Montserrat", sans-serif; 
    display: block;
    font-size: 20px;
    color: #CB1723;
    font-weight: 600;
    margin-bottom: 20px;
}
.inno-txt h4 {
	font-family: "Montserrat", sans-serif; 
    font-size: 27px;
    line-height: 1.35;
    font-weight: 500;
    margin-bottom: 80px;
    color: #111;
    word-break: keep-all;
    letter-spacing: -0.3px;	

}
.detail-text p {
    font-size: 17px;
    color: #555;
    line-height: 1.6; /* 줄간격도 살짝 늘려 가독성 확보 */
    margin-bottom: 20px;
    word-break: keep-all;
    font-weight: 300;
    letter-spacing: 0px;
}

/* 애니메이션 */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}





/* ==========================================================================
   9. BRAND PAGE (Product List) - PC/Mobile 스타일 분리
   ========================================================================== */


.intro-item .txt-box p {font-size:16px;}

.brand-intro {
    padding: 100px 0 60px;
    text-align: center;
}
.intro-brand-logo {
    height: 40px;
    margin: 0 auto 30px;
}
.intro-msg {
	font-family: "Montserrat", sans-serif; 
    font-size: 22px;
    line-height: 1.6;
    color: #333;
    font-weight: 400;
	letter-spacing:-0.5px;
}

/* Product Grid (PC Default: 3 Columns) */
.product-list-sec {
    padding-bottom: 150px;
    background-color: #fff;
}
.product-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

/* 개별 제품 카드 공통 */
.p-item {
    position: relative;
    cursor: pointer;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* 이미지 영역 공통 */
.p-img {
    position: relative;
    overflow: hidden;
    width: 100%;
}

.p-img img {
    width: 100%;
    display: block;
    transition: transform 0.5s ease;
}

/* [중요 수정] 우선순위를 높여서 PC에서 모바일 이미지를 확실히 숨김 */
.p-img .img-mo { display: none !important; }
.p-img .img-pc { display: block !important; }

.p-item:hover .p-img img { transform: scale(1.05); }

/* 장바구니 아이콘 */
.bag-icon {
    position: absolute;
    bottom: 0px;
    right: 0px;
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.8) url('/assets/images/icon_bag.svg') no-repeat center center;
    background-size: 20px;
    opacity: 0;
    transform: translateY(10px);
    transition: all 0.3s ease;
}
.p-item:hover .bag-icon {
    opacity: 1;
    transform: translateY(0);
    background-color: #CB1723;
    background-image: url('/assets/images/icon_bag_wh.svg');
}

/* 텍스트 정보 (일반형) */
.p-info {
    padding-top: 25px;
    text-align: left;
}
.p-cate {
    display: block;
    font-family: "Montserrat", sans-serif;
    color: #CB1723;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    margin-bottom: 5px;
}
.p-name {
	 font-family: "Montserrat", sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: #111;
    margin: 0 0 -10px;
    letter-spacing: 0px;
	line-height:1.3;
}
.p-desc {
    font-size: 16px;
    color: #666;
    line-height: 1.5;
    font-weight: 300;
    word-break: keep-all;
}

/* --------------------------------------------------------
   PC 전용: 배너 스타일 (p-banner)
   -------------------------------------------------------- */
.p-item.p-banner {
    grid-column: span 3;
    margin-top: 50px;
    margin-bottom: 20px;
}
.p-item.p-banner:first-child { margin-top: 0; }

.p-item.p-banner .p-info.banner-text {
    position: absolute;
    bottom: 0;
    left: 0;
    padding: 40px 60px;
    z-index: 2;
}
/* 기본 배너 텍스트 (흰색) */
.p-item.p-banner .p-cate { color: #fff; opacity: 0.8; }
.p-item.p-banner .p-name { font-family: "Montserrat", sans-serif;  color: #fff; font-size: 32px; margin-bottom: 15px; }
.p-item.p-banner .p-desc { color: rgba(255,255,255,0.8); font-size: 17px; }

/* [수정 1] 배경이 밝은 배너용 텍스트 색상 (홈케어 세트) */
.p-item.p-banner.text-dark .p-cate { color: #CB1723; opacity: 1; }
.p-item.p-banner.text-dark .p-name {  font-family: "Montserrat", sans-serif; color: #111; }
.p-item.p-banner.text-dark .p-desc { color: #444; }


/* ==========================================================================
   10. PRODUCT MODAL (Popup) - 수정본
   ========================================================================== */

/* (상단 공통 모달 스타일은 기존 유지...) */
.modal-overlay {
    display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0,0,0,0.7); z-index: 9999;
    align-items: center; justify-content: center;
}
.modal-overlay.active { display: flex; }

.modal-wrap {
    width: 100%; max-width: 1400px; height: 90vh;
    background-color: #fff; position: relative;
    overflow: hidden; box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.btn-modal-close {
    position: absolute; top: 0; right: 0; width: 60px; height: 60px;
    background: #CB1723; border: none; color: #fff; font-size: 30px;
    cursor: pointer; z-index: 100;
}

.modal-scroll-area {
    width: 100%; height: 100%; overflow-y: auto;
    scrollbar-width: thin; scrollbar-color: #ccc #eee;
}

/* 1. 상단 정보 섹션 (기존 유지) */
.modal-top-sec { display: flex; min-height: 600px; align-items: stretch; }
.m-left-img { width: 50%; background: #f8f8f8; position: relative; overflow: hidden; }
.m-left-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.m-right-info {
    width: 50%; padding: 80px 60px; display: flex; flex-direction: column;
    justify-content: center; background-color: #fff; box-sizing: border-box;
}
.m-cate { font-family: "Montserrat", sans-serif; color: #CB1723; font-size: 16px; margin-bottom: 15px; display: block; text-transform: uppercase; font-weight: 500; }
.m-title { font-size: 45px; font-weight: 700; margin: 0 0 10px; line-height: 1.1; color: #111; letter-spacing: -1px; }
.m-spec { font-size: 15px; color: #888; margin-bottom: 30px; font-weight: 300; }
.m-line { width: 40px; height: 2px; background: #CB1723; border: none; margin: 0 0 0px; }
.m-slogan { font-size: 22px; font-weight: 500; margin-bottom: 0px; line-height: 1.4; color: #111; word-break: keep-all; letter-spacing:-1px;}
.m-desc { font-size: 16px; color: #666; line-height: 1.7; margin-bottom: 60px; word-break: keep-all; font-weight: 300; }
.btn-shop-link {
    display: inline-flex; align-items: center; justify-content: center;
    width: 100%; height: 60px; background: #CB1723; color: #fff;
    font-family: "Montserrat", sans-serif; font-size: 18px; font-weight: 500;
    transition: all 0.3s; border: none; cursor: pointer;
}
.btn-shop-link:hover { background: #a00d17; }
.btn-shop-link i {
    width: 20px; height: 20px;
    background: url('/assets/images/icon_bag_wh.svg') no-repeat center center;
    background-size: contain; margin-right: 12px;
}


/* 2. 슬라이드 섹션 (Drag 가능하도록 cursor 변경) */
.modal-slide-sec {
    position: relative; 
    width: 100%; 
    background: #f4f4f4;
    cursor: grab;
}
.modal-slide-sec:active { cursor: grabbing; }

.slide-container { 
    width: 100%; 
    overflow: hidden; 
    /* [추가] 슬라이드 이동 시 잔상/흐림 방지 */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.slide-list { 
    display: flex; 
    transition: transform 0.5s ease-in-out; 
    width: 100%; 
    /* [추가] 렌더링 가속 */
    will-change: transform;
}

.slide-list li { 
    flex: 0 0 100%; 
    width: 100%; 
    /* 높이를 지정하지 않고 auto로 두어 이미지 비율을 따르게 함 (PC 기준) */
    height: auto; 
}

.slide-list li img { 
    width: 100%; 
    /* [핵심] 높이를 auto로 해서 비율 유지 (찌그러짐 방지) */
    height: auto; 
    display: block; 
    user-select: none;
    -webkit-user-drag: none;
    
    /* [핵심] 이미지 렌더링 품질 최적화 (선명하게) */
    image-rendering: -webkit-optimize-contrast; 
    transform: translateZ(0); /* 픽셀 깨짐 방지 핵 */
}

/* 도트, 화살표 스타일은 기존 유지 */
.slide-dots {
    position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
    display: flex; gap: 10px; z-index: 5; /* z-index 추가 */
}
.slide-dots span {
    width: 12px; height: 12px; background: rgba(255,255,255,0.5);
    border-radius: 50%; cursor: pointer; transition: all 0.3s;
}
.slide-dots span.active { background: #CB1723; transform: scale(1.2); }

.slide-dots span.active { background: #CB1723; transform: scale(1.2); }


/* [수정] 3. 상세 이미지 섹션 (Grid Layout) */
.modal-detail-sec {
    background: #fff;
    /* 양옆 여백 150px, 위아래 여백 100px */
    padding: 100px 150px; 
    box-sizing: border-box;
}

.detail-grid {
    display: grid;
    /* 2개의 컬럼 생성 (1:1 비율) */
    grid-template-columns: 1fr 1fr;
    /* 간격 설정 */
    gap: 20px;
    width: 100%;
    /* [추가] 높이를 내용물에 맞춤 */
    align-items: start; 
}

.detail-grid img {
    width: 100%;
    /* [핵심 수정] height: 100% -> auto */
    /* 강제로 늘리지 않고 원본 비율대로 선명하게 보여줌 */
    height: auto; 
    display: block;
    /* 이미지 렌더링 품질 보정 (브라우저 지원 시) */
    image-rendering: -webkit-optimize-contrast;
}

/* [중요] 첫 번째 이미지는 세로로 길게 (2행 차지) */
.detail-grid img:first-child {
    grid-row: span 2; 
}

/* 나머지 2, 3번째 이미지는 자동으로 오른쪽 1, 2행에 배치됨 */


.btn-area-center {
    /*padding-top: 80px;  버튼과 이미지 사이 간격 */
    text-align: center;
}
.btn-shop-more {
    display: inline-flex; align-items: center; justify-content: center;
    background: #CB1723; color: #fff; padding: 15px 50px;
    font-size: 16px; font-weight: 500;
}


/* [추가] 모달 슬라이드 화살표 버튼 */
.m-slide-prev,
.m-slide-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 60px;
    height: 60px;
    
    /* 메인 비주얼과 동일한 반투명 + 블러 효과 */
    background: rgba(0, 0, 0, 0.18); 
    backdrop-filter: blur(4px); 
    
    border-radius: 50%;
    border: none;
    cursor: pointer;
    z-index: 10;
    transition: background 0.3s ease;
    
    /* 화살표 중앙 정렬 */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* 기본 숨김 (JS가 제어) */
    display: none; 
}

/* 화살표 아이콘 (흰색) */
.m-slide-prev::before,
.m-slide-next::before {
    content: '';
    display: block;
    width: 12px;
    height: 12px;
    border-top: 2px solid #fff; /* 흰색 화살표 */
    border-right: 2px solid #fff;
}

/* 이전 버튼 위치 및 회전 */
.m-slide-prev { left: 20px; }
.m-slide-prev::before { 
    transform: rotate(-135deg); 
    margin-left: 5px; /* 시각적 중앙 보정 */
}

/* 다음 버튼 위치 및 회전 */
.m-slide-next { right: 20px; }
.m-slide-next::before { 
    transform: rotate(45deg); 
    margin-right: 5px; /* 시각적 중앙 보정 */
}

/* 호버 효과 (진해짐) */
.m-slide-prev:hover,
.m-slide-next:hover {
    background: rgba(0, 0, 0, 0.4); /* 오버 시 배경 더 어둡게 */
}




/* ==========================================================================
   12. HEADQUARTERS
   ========================================================================== */


/* 1. HQ Intro */
.hq-intro {
    padding: 100px 0;
    text-align: center;
}
.hq-logo-wrap {
    display: flex;
    justify-content: center; /* [수정 1] 로고 중앙 정렬 */
    margin-bottom: 40px;
}
.hq-brand-logo {
    height: 25px;
}
.hq-msg .lead {
	font-family: "Montserrat", sans-serif; 
	font-size: 22px; /* [수정 2] 타이틀 30px */
    color: #111;
    font-weight: 400;
    line-height: 1.4;
    margin-bottom: 40px;
    /*letter-spacing: -1px;*/
}
.hq-msg .lead strong { font-weight: 700; }
.hq-msg .desc {
	/*font-family: "Montserrat", sans-serif; */
    font-size: 17px; /* [수정 2] 본문 22px */
    color: #444;
    line-height: 1.6;
    margin-bottom: 20px;
    word-break: keep-all;
    font-weight: 300;
	/*letter-spacing:-1px;*/
}

/* 2. Fixed Background Section */
.hq-fixed-wrap {
    padding: 0 50px; /* [수정 3] 양쪽 여백 50px */
    margin-bottom: 120px;
}
.hq-fixed-bg {
    width: 100%;
    height: 600px;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed; 
}

/* 3. Vision Section (Script + Text + Image) */
.hq-content-sec {
    padding-bottom: 0; /* 하단 여백 제거 (갤러리와 붙이기 위해) */
    overflow: hidden; /* SVG가 밖으로 나가는 것 방지 (선택사항) */
}
.hq-vision-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 150px; /* 갤러리와의 간격 */
    position: relative; /* SVG 배치를 위한 기준점 */
}

/* 왼쪽 텍스트 영역 */
.vision-txt {
    width: 45%;
    padding-top: 150px; /* 텍스트 시작 위치 조정 */
    position: relative;
    z-index: 10; /* 텍스트가 이미지보다 위로 */
}

/* [수정 4] SVG 스크립트: 오른쪽 이미지 위로 겹치게 배치 */
.script-svg {
    position: absolute;
    top: 0px; /* 위치 조정: 위로 올림 */
    left: 17%;   /* 텍스트 영역 기준으로 오른쪽으로 밀어냄 */
    width: 1300px; /* 크기 키움 */
    max-width: none; /* 부모 영역 무시하고 커지게 함 */
    z-index: 3;   /* 이미지 위에 얹기 */
    pointer-events: none; /* 드래그/선택 방지 */
}

.vision-txt h3 {
	font-family: "Montserrat", sans-serif; 
    font-size: 22px; /* [수정 2] 타이틀 30px */
    line-height: 1.4;
    color: #111;
    font-weight: 400;
    margin-bottom: 40px;
    word-break: keep-all;
    position: relative; 
    z-index: 2;
	margin-top:250px;
	letter-spacing:-1px;
}
.vision-txt h3 strong { font-weight: 700; }
.vision-txt p {
    font-size: 17px; /* [수정 2] 본문 22px */
    color: #555;
    line-height: 1.6;
    margin-bottom: 30px;
    word-break: keep-all;
    font-weight: 300;
	/*letter-spacing:-1px;	*/
}

/* 오른쪽 이미지 영역 (기본: Static - Flagship용) */
.vision-img {
    width: 50%;
    position: relative;
    z-index: 1; /* 텍스트보다 아래 */
}

/* 기본 이미지 스타일 (Flagship 등 고정 이미지용) */
.vision-img img {
    width: 100%;
    display: block;
    margin-top: 50px;
    
    /* 기본적으로는 보이게 설정 */
    position: static;
    opacity: 1; 
}


/* ▼▼▼ [롤링 효과 전용 스타일] (Headquarters용) ▼▼▼ */
/* hq-rolling-frame 클래스가 붙었을 때만 겹치고 숨김 처리 */
.vision-img.hq-rolling-frame {
    overflow: hidden;
}

.vision-img.hq-rolling-frame img {
    position: absolute; /* 겹치기 */
    top: 0;
    left: 0;
    opacity: 0; /* 숨김 */
    transition: opacity 1s ease-in-out;
    z-index: 1;
}

/* 롤링 첫 번째 이미지는 높이값 확보를 위해 relative */
.vision-img.hq-rolling-frame img:first-child {
    position: relative;
}

/* 롤링 활성화된 이미지 보이기 */
.vision-img.hq-rolling-frame img.active {
    opacity: 1;
    z-index: 2;
}

.hq-gallery-grid {
    display: grid;
    /* 
       기존: 1fr 1fr (5:5)
       수정: 1.6fr 1fr (약 62% : 38%) 
       -> 시안의 1173px : 727px 비율 반영
    */
    grid-template-columns: 1.6fr 1fr; 
    gap: 20px;
    width: 100%;
}

.hg-item {
    width: 100%;
    height: 800px; /* 높이는 시원하게 유지 */
    overflow: hidden;
}

.hg-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}

.hg-item:hover img {
    transform: scale(1.05);
}

/* 5. Full Size Image */
.hq-full-img {
    width: 100%;
    display: block;
    margin-top: 20px;
}

.hq-full-img img {
    width: 100%;
    display: block;
}



/* 기본 fadein보다 훨씬 천천히 (1.5초 동안) 등장 */
.js-fadein.slow {
    transition-duration: 1.5s !important; 
    transition-timing-function: ease-out !important;
}

/* 0.3초 정도 늦게 시작 (이미지랑 텍스트랑 시차를 두기 위함) */
.js-fadein.delay {
    transition-delay: 0.3s !important;
}





/* 2. Tab Contents Control */
.loc-content {
    display: none; /* 기본 숨김 */
    
    /* [수정] 기존 fadeIn 대신 움직임이 없는 simpleFade 사용 */
    animation: simpleFade 0.8s ease-out; 
}

.loc-content.active {
    display: block; /* 활성 탭만 보임 */
}

/* [추가] 움직임 없이 투명도만 조절하는 애니메이션 정의 */
@keyframes simpleFade {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ==========================================================================
   13. LOCATION - FLAGSHIP STORE (Tab & Styles)
   ========================================================================== */

/* 1. Tab Navigation */
.flagship-tab-sec {
    padding-top: 100px;
}
.loc-tab-nav {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-bottom: -20px;
}
.loc-tab-btn {
    font-size: 20px;
    font-weight: 500;
    color: #999;
    background: none;
    border: none;
    padding: 10px 0;
    cursor: pointer;
    position: relative;
    transition: all 0.3s;
}
.loc-tab-btn.active, .loc-tab-btn:hover {
    color: #111;
    font-weight: 700;
}
/* 활성 탭 밑줄 */
.loc-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: #111;
}

/* 2. Tab Contents Control */
.loc-content {
    display: none; /* 기본 숨김 */
    animation: fadeIn 0.8s ease-out; /* 전환 시 페이드 효과 */
}
.loc-content.active {
    display: block; /* 활성 탭만 보임 */
}

/* 3. Intro Title (부산 라운지 / 플래그십 스토어) */
.flagship-tit {
	font-family: "Montserrat", sans-serif; 
    font-size: 40px;
    font-weight: 700;
    color: #111;
    margin-bottom: 10px;
}
.flagship-tit .eng {
    display: block;
    font-family: "Montserrat", sans-serif;
    font-size: 14px;
    color: #CB1723;
    font-weight: 600;
    margin-top: 0px;
    letter-spacing: 1px;
}

/* 15번째 글자(STORE 다음 공백)를 강제 줄바꿈 처리 
.flagship-visual .sub-title span:nth-child(15) {
    display: block;
    width: 100%;
    height: 0;      
    content: '';    
    margin-bottom: 10px; 
}*/

/* 두 줄이 되었을 때 줄간격 조정 */
.flagship-visual .sub-title {
    line-height: 1.1; 
}








/* ==========================================================================
   00. RESPONSIVE (Unified Mobile Styles)
   ========================================================================== */
   

@media (max-width: 1800px) {
    /* 
       공통 pc-only 클래스를 건드리지 않고, 
       Research 페이지(.sub-inno) 내부의 텍스트에만 적용합니다.
    */
    
    /* 상단 타이틀 설명글 줄바꿈 해제 */
    .sub-inno .inno-head-text .desc br.pc-only {
        display: none; /* 강제 줄바꿈 태그 숨김 -> 자연스럽게 이어짐 */
    }

    /* 탭 내부 상세 설명글 줄바꿈 해제 */
    .sub-inno .detail-text p br.pc-only {
        display: none;
    }
    
    /* (선택사항) 텍스트가 너무 꽉 차지 않게 좌우 여백을 조금 더 주고 싶다면 */
    .sub-inno .inno-head-text .desc {
        max-width: 90%; /* 너비 제한 */
        margin-left: auto;
        margin-right: auto;
    }
}   
   
   
   
@media (max-width: 1024px) {
    /* Common */
    .sub-section { padding: 30px 0; }
    .js-fadein.is-inview { padding-top: 0px; }

    /* Visual */
    .sub-visual { height: 100vh; max-height: 400px; }
    .sub-title { font-size: 40px; }
    .sub-desc { font-size: 16px; }
	 .research-visual .sub-title span:nth-child(11) {
        display: block !important;
        width: 100%;
        height: 0;         /* 공백이 차지하는 높이 제거 */
        overflow: hidden;  /* 내용 숨김 */
    }
	 .research-visual .sub-title {line-height: 1.1;}
	

    /* Intro */
    .intro-logo { height: 30px; }
    .intro-desc { font-size: 16px; }
    .intro-grid { grid-template-columns: 1fr; gap: 40px; }
    .intro-item .img-box { height: 240px; }

    /* Promise */
    .sub-promise { padding: 80px 0; background-attachment: scroll; }
    .sub-promise::before { left: 0; width: 100%; background: rgba(0, 0, 0, 0.4); }
    .promise-inner { flex-direction: column; text-align: center; gap: 40px; }
    .promise-left { width: 100%; display: flex; justify-content: center; z-index: 1; }
    .eng-cali img { width: 80%; left: auto; transform: none; margin: 0 auto; }
    .promise-right { width: 100%; padding: 0 20px; }
    .promise-right h3 { font-size: 20px; }
    .promise-right .lead { font-size: 18px; margin-bottom: 30px; }
    .promise-right .desc{ font-size: 16px; margin-bottom: 30px; }	

    /* Org Chart */
    .sub-org { padding: 100px 0; }
    .org-head { text-align: center; padding-left: 0; margin-bottom: 40px; }
    .org-head h3 { font-size: 32px; }
    .org-wrap { flex-direction: column; align-items: center; justify-content: center; gap: 50px; }
    .sub-org .bg-text { font-size: 60px; transform:translate(-10%, -50%); text-align: center; }
    .org-left-group { width: 100%; margin-top: 0; }
    .org-row-top { flex-direction: column; gap: 0; }
    .connect-t-shape { width: 2px; height: 40px; margin: 0; }
    .connect-t-shape .line-horz { display: none; }
    .connect-t-shape .line-vert { height: 100%; position: static; transform: none; border-left: 1px dotted #ddd; }
    .org-row-bottom .node-pill.strategy { margin-top: 0px; margin-right: 0; transform: none; }
    .org-row-bottom { position: relative; }
    .org-row-bottom::before { content: ''; position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 2px; height: 40px; border-left: 1px dotted #ddd; }
    .org-connector { display: none; }
    .org-right-group::before { display: none; }
    .dept-list li::before { display: none; }
    .org-right-group { width: 100%; padding-left: 0; }
	.dept-list {width:90%; margin:auto;}
    .d-box { flex-direction: column; text-align: center; gap: 0px; padding: 15px; }
    .d-box strong { margin-right: 0; }
	.node-circle.president {width:160px; height:160px; }
	.node-circle.president .role {font-size:20px;}
	
    /* History */
    .sub-history { background-attachment: scroll; }
    .history-inner { margin-left: 0; max-width: 100%; }
    .history-head { text-align: center; margin-bottom: 40px; }
	.history-head h3 {font-size:32px;}
    .bg-svg { left: 50%; transform: translateX(-50%); width: 250px; top: -50px; }
    .history-list { width: 95%; margin: auto; }
    .h-row { flex-direction: column; align-items: center; text-align: center; gap: 0px; padding: 10px; }
    .h-row:hover { padding-left: 20px; }
    .h-year { width: auto; font-size: 18px; color: #fff; }
    .h-desc { text-align: center; font-size: 16px; }

    /* Gallery */
    .gallery-head { flex-direction: column; align-items: flex-start; gap: 30px; padding: 0 24px; margin-bottom: 40px; margin-top: 80px; }
    .gallery-bg-text { top: -40px; left: 20px; }
    .gallery-bg-text span { font-size: 50px; }
    .gallery-head h3 { font-size: 28px; }
    .gallery-desc { text-align: left; font-size: 16px; }
    .g-item { width: 260px; }
    .g-item img { height: 300px; }
    .g-caption { opacity: 1; transform: translateY(0); padding: 10px 15px; font-size: 13px; }

    /* BI/CI */
    .bici-grid-top { flex-direction: column; height: auto; }
    .bici-card.logo-main { min-height: 340px; }
    .bici-split { height: 220px; }
    .bici-card.combo { height: 220px; }
    .bici-grid-color { grid-template-columns: repeat(2, 1fr); }
    .color-card { height: 240px; }
	.bi-desc strong {font-size:18px;}
	.bi-desc p {font-size:16px;}
	.bici-card.logo-main {min-height:250px;}

    /* Research & Innovation */
    .certi-head h3{font-size:32px;}
	.inno-btn {font-size:15px; line-height:1.3; padding:5px;}
    .sub-certi {background-attachment: scroll; /* 모바일 성능 이슈로 고정 해제 */ }
    .certi-list { grid-template-columns: repeat(2, 1fr);  gap: 20px;}
    .sub-certi::before { height: 40%; /* 모바일에서는 카드영역이 길어지므로 비율 조정 */ }
	.inno-tab-nav { margin-top: 80px;  gap: 30px; }
    .inno-head-text { margin-bottom: 60px; padding: 0 20px;}
	.inno-head-text .desc	{font-size:15px;}
	.detail-text p {font-size:16px;}
	
    /* 모바일에서는 상하 배치 */
    .inno-body {flex-direction: column;}
    .inno-img { width: 100%; height: 450px; /* 모바일 이미지 높이 고정 */}
    .inno-txt { width: 100%; padding: 60px 24px; /* 모바일 패딩 축소 */}
    .inno-head-text h3 { font-size: 25px; }
	.inno-txt .small-tit {font-size: 15px;}
    .inno-txt h4 { font-size: 20px; margin-bottom: 30px; }
	
	
	/*제품목록*/
	
    .product-grid { grid-template-columns: 1fr; gap: 40px; }
    .p-item.p-banner { grid-column: auto; }
    
   .modal-top-sec { flex-direction: column; }
    .m-left-img { width: 100%; height: 400px; }
    .m-right-info { width: 100%; padding: 40px 24px; }
    

    /* 모바일에서는 여백 줄이고 1단으로 변경 */
    .modal-detail-sec { padding: 20px 20px; }
    .detail-grid { grid-template-columns: 1fr; gap: 15px; }
    .detail-grid img:first-child { grid-row: auto; /* 모바일에선 해제 */ }
	
    /* [수정] 모달 슬라이드 높이 강제 조절 */
    .modal-slide-sec .slide-list li {
        height: 500px; /* 원하는 높이만큼 늘리세요 (예: 500px ~ 600px) */
    }
	
	
    /* id="product-modal"에 type-long 클래스가 붙으면 적용됨 */
    .modal-wrap .type-long .modal-slide-sec .slide-list li, /* 구조에 따라 상위 클래스 확인 필요 */
    #product-modal.type-long .modal-slide-sec .slide-list li {
        height: 650px !important; /* 필요에 따라 800px 등으로 조절하세요 */
    }
    
    /* (선택사항) 이미지가 잘리지 않고 다 보여야 한다면 object-fit 변경 */
    #product-modal.type-long .modal-slide-sec .slide-list li img {
        /* contain: 이미지가 잘리지 않고 다 들어옴 (여백 생길 수 있음) */
        /* cover: 꽉 채움 (잘릴 수 있음) - 현재는 cover가 기본 */
        /* object-fit: contain; */ 
    }	
	
    
    .modal-slide-sec .slide-list li img {
        height: 100%;
        /* cover: 꽉 채우기 (양옆 잘림) / contain: 비율 유지 (여백 생김) */
        object-fit: cover; 
    }    
    /* [수정] 모달 슬라이드 섹션: 도트 공간 확보 */
    .modal-slide-sec {
        display: flex;
        flex-direction: column; /* 요소들을 세로로 정렬 */
        padding-bottom: 25px;   /* 도트가 들어갈 하단 여백 확보 */
        background: #fff;       /* 배경색 (필요시 #f4f4f4 등으로 변경 가능) */
    }

    /* [수정] 도트 네비게이션: 이미지 밖으로 꺼내기 */
    .slide-dots {
        position: static;       /* absolute(겹침) 해제 -> static(흐름대로 배치) */
        transform: none;        /* 중앙 정렬 transform 해제 */
        margin-top: 20px;       /* 이미지와 도트 사이 간격 띄우기 */
        justify-content: center; /* 가로 중앙 정렬 */
        width: 100%;
    }

    /* 도트 색상 조정 (흰 배경 위에서도 잘 보이도록) */
    .slide-dots span {
        background: #DDDDDD; /* 비활성 도트: 연회색 */
        opacity: 1;
    }
    
    .slide-dots span.active {
        background: #CB1723; /* 활성 도트: 빨간색 */
        transform: none;     /* 크기 확대 효과 제거 (깔끔하게) */
    }	
	
    .modal-top-sec { flex-direction: column; }
    .m-left-img { width: 100%; height: 400px; }
    .m-right-info { width: 100%; padding: 40px 24px; }

	
	
	
	/*본사*/
    .hq-intro { padding: 80px 0; }
    .hq-fixed-wrap { padding: 0 20px; margin-bottom: 80px; } /* 모바일 여백 줄임 */
    .hq-fixed-bg { 
        height: 400px; 
        background-attachment: scroll; 
    }
    
    .hq-vision-wrap { flex-direction: column; margin-bottom: 80px; }
    .vision-img { width: 100%; margin-top: 0; }
    .vision-img img { margin-top: 0; }
    
    /* 모바일에서도 롤링 마진 초기화 */
    .vision-img.hq-rolling-frame img { margin-top: 0; }	
    
    .vision-txt { width: 100%; padding-top: 50px; margin-bottom: 50px; }
    
    /* 모바일에서 SVG 위치 조정 */
    .script-svg { 
        width: 400px; 
        top: -60px; 
        left: 0; 
        position: relative; /* 모바일에서는 흐름대로 배치하거나 미세 조정 */
        margin-bottom: -40px; /* 텍스트와 겹치게 */
    }
    
    .vision-img { width: 100%; margin-top: 0; }
    .vision-img img { margin-top: 0; }    
    .hg-item { height: 500px; }

    .flagship-tab-sec { padding-top: 80px; }
    .flagship-tit { font-size: 32px; }
    .loc-tab-btn { font-size: 18px; }
    .flagship-visual .sub-title {
        font-size: 40px; /* 기존 모바일 폰트 사이즈 유지 */
        line-height: 1.2;
    }	
	
	
	
}

@media (max-width: 768px) {
    /* BI/CI Small Mobile */
    .bici-split { flex-direction: column; height: auto; gap: 24px; }
    .bici-split .bici-card { height: 180px; }
    .bici-grid-color { grid-template-columns: 1fr; }

    /* Research Small Mobile */
    .certi-list {
        grid-template-columns: repeat(1, 1fr);
        max-width: 250px;
        margin: 0 auto;
    }
    .sub-certi::before {
        height: 20%; /* 1열이라 더 길어지므로 비율 더 줄임 */}
		
		
		
    .product-list-sec { padding-bottom: 80px; }

    /* [수정 2] Intro 텍스트 사이즈 & 여백 축소 (통일성 확보) */
    .brand-intro { 
        padding: 0px; /* 상하 여백 축소 */
		margin-bottom:-30px;
    }
    .intro-brand-logo { 
        height: 30px; /* 로고 크기 축소 */
        margin-bottom: 20px; 
    }
    .intro-msg { 
        font-size: 15px; /* Company 페이지 등과 유사한 본문 사이즈로 통일 */
        line-height: 1.6; 
        padding: 0 20px; /* 좌우 여백 추가 */
        word-break: keep-all; /* 단어 단위 줄바꿈 */
    }

    /* Product List Layout */
    .product-list-sec { padding-bottom: 80px; }
    .product-grid {
        grid-template-columns: repeat(2, 1fr); 
        gap: 15px; 
    }

    /* 배너 아이템 일반형으로 전환 */
    .p-item.p-banner {
        grid-column: auto; 
        margin-top: 0;
        margin-bottom: 0;
    }

    /* 이미지 교체 (PC 숨김 / MO 표시) */
    .p-img .img-pc { display: none !important; }
    .p-img .img-mo { display: block !important; width: 100%; }

    /* 배너 텍스트 스타일 리셋 (일반형과 동일하게) */
    .p-item.p-banner .p-info.banner-text {
        position: static; 
        padding: 15px 0 0 0; 
        background: none;
    }

    /* 텍스트 컬러 리셋 (일반형과 동일하게) */
    .p-item.p-banner .p-cate { color: #CB1723; opacity: 1; font-size: 13px;}
    .p-item.p-banner .p-name { color: #111; font-size: 18px; margin-bottom: 5px; }
    .p-item.p-banner .p-desc { color: #666; font-size: 14px; }

	.p-item.p-banner.text-dark .p-cate { color: #CB1723; opacity: 1; }
	.p-item.p-banner.text-dark .p-name { color: #111; }
	.p-item.p-banner.text-dark .p-desc { color: #444; }



    /* 일반 아이템 폰트 사이즈 조정 */
    .p-info { padding-top: 15px; }
    .p-cate { font-size: 13px; }
    .p-name { font-size: 18px; margin-bottom: 5px; }
    .p-desc { 
        font-size: 14px; line-height: 1.4; 
        display: -webkit-box; 
        overflow: hidden; 
        text-overflow: ellipsis; 
        -webkit-line-clamp: 4; 
        -webkit-box-orient: vertical; 
    }

    .bag-icon {
        opacity: 1; 
        transform: translateY(0); 
        width: 40px; height: 40px; 
        background-size: 16px;
		display:none;
    }
	
    .m-slide-prev, 
    .m-slide-next { 

		top:95%;
        width: 30px; 
        height: 30px; 
        left: 10px; /* 간격 좁힘 */
    }
    
    .m-slide-next {
        right: 10px;
        left: auto;
    }

    .m-slide-prev::before, 
    .m-slide-next::before { 
        width: 10px; 
        height: 10px; 
    }	
    
    .mo-only { display: block; }


    /* [수정 3] 모바일 팝업(모달) 여백 및 폰트 사이즈 대폭 수정 (밀도 높임) */
    
    /* 이미지 높이 축소 (너무 크지 않게) */
    .m-left-img { height: 350px; }

    /* 텍스트 영역 패딩 축소 */
    .m-right-info { 
        padding: 30px 20px; /* 상하좌우 여백 줄임 */
    }

    /* 카테고리 */
    .m-cate { 
        font-size: 13px; 
        margin-bottom: 8px; 
    }

    /* 타이틀 (사이즈 대폭 축소) */
    .m-title { 
        font-size: 28px; /* 기존 50px -> 28px로 축소 */
        margin-bottom: 5px; 
        line-height: 1.2; 
    }

    /* 스펙 정보 */
    .m-spec { 
        font-size: 14px; 
        margin-bottom: 20px; /* 간격 줄임 */
    }

    /* 구분선 */
    .m-line { 
        margin: 0 0 20px; /* 간격 줄임 */
    }

    /* 슬로건 */
    .m-slogan { 
        font-size: 18px; 
        margin-bottom: 15px; 
        line-height: 1.4; 
    }

    /* 설명글 */
    .m-desc { 
        font-size: 14px; 
        margin-bottom: 30px; /* 버튼과의 간격 줄임 */
        line-height: 1.6;
    }

    /* SHOP 버튼 */
    .btn-shop-link {
        height: 50px; /* 버튼 높이 살짝 축소 */
        font-size: 16px;
    }
		
		
		
	/*본사*/
    /* 1. Intro 텍스트 사이즈 & 여백 축소 */
    .hq-intro { 
        padding: 30px 0 0px; 
    }
    .hq-msg .lead { 
        font-size: 18px; 
        margin-bottom: 30px; 
        padding: 0px 10px; /* 텍스트는 여백 유지 */
		/*text-align:left;*/

		letter-spacing:-0.5px;
    }
    .hq-msg .desc { 
        font-size: 16px; 
        padding: 0 10px; /* 텍스트는 여백 유지 */
		/*text-align:left;		*/
    } 
    
    .vision-txt h3 { 
        font-size: 20px; 
        margin-top: 50px; /* SVG와 겹치지 않게 간격 조정 */
        padding: 0 20px;
    }
    .vision-txt p { 
        font-size: 16px; 
        padding: 0 20px;
    }

    /* 2. [요청 1] 고정 배경 (hq_fixed) 100% 채우기 & 높이 증가 */
    .hq-fixed-wrap { 
        padding: 0; /* [중요] 양쪽 여백 제거 -> 100% Full */
        margin-bottom: 60px; 
    }
    .hq-fixed-bg { 
        height: 200px; /* [중요] 높이 더 시원하게 (250px -> 500px) */
        background-attachment: scroll; 
        background-position: center;
        background-size: cover;
    }
    
    /* 비전 섹션 레이아웃 */
    .hq-vision-wrap { flex-direction: column; margin-bottom: 60px; }
    .vision-txt { width: 100%; padding-top: 0; margin-bottom: 0px; }
    
    /* 모바일 SVG 위치 및 크기 조정 */
    .script-svg { 
        width: 320px; 
        top: -40px; 
        left: 50%;
        transform: translateX(-50%); /* 중앙 정렬 */
        margin-left: 0;
    }
    
    .vision-img { width: 100%; margin-top: 40px; }
    .vision-img img { margin-top: 0; }    

    /* 3. [요청 2, 4] 갤러리 이미지 (인테리어) 여백/위치 해결 & 높이 증가 */
    .hq-gallery-grid { 
        grid-template-columns: 1fr; 
        gap: 0; /* [중요] 이미지 사이 간격 제거 (딱 붙게) */
        margin-top: 0;
    }    
    .hg-item { 
        height: 500px; /* [중요] 높이 증가 (300px -> 500px) */
    }    

    /* 4. [요청 3] 하단 풀사이즈 이미지 여백 제거 */
    .hq-full-img { 
        margin-top: 0; /* [중요] 위쪽 이미지와 딱 붙게 */
        width: 100%;
    }
    .hq-full-img img {
        width: 100%;
        display: block;
    }		
	
	
    .flagship-tab-sec { padding-top: 30px; }
    .loc-tab-nav { gap: 20px; }
    .loc-tab-btn { font-size: 16px; }
    .flagship-tit { font-size: 28px; }
	
		
		
}