@charset "utf-8";



/* ================= 명장 타이틀 ================= */
.master-header {
    text-align: center;
    padding:  00px 0 0; /* 하단 여백 제거 (내부 텍스트에서 조절) */
}
.master-header .ht-title {
    font-size: 50px;
    font-weight: 700;
    color: #111;
}

/* ================= 3차 뎁스 탭 ================= */
.master-tabs {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 40px;
    margin-bottom: 50px;	
}
.master-tabs a {
    font-size: 20px;
    color: #999;
    position: relative;
    transition: color 0.3s;
}
.master-tabs a:hover {
    color: #a78864;
}
.master-tabs a.active {
    color: #a78864; /* 브라운 톤 포인트 컬러 */
    font-weight: 700;
}
/* 활성화된 탭 우측 상단 점(•) */
.master-tabs a.active::after {
    content: '•';
    position: absolute;
    top: -5px;
    right: -15px;
    font-size: 14px;
    color: #a78864;
}

.master-sub-layout{ display:none}
/* ================= 서브 레이아웃 (라인 & 텍스트) ================= */
.master-sub-layout {
    margin-top: 70px;
    text-align: left; /* 중앙 정렬 해제 */
}

/* 가로 라인 및 좌우 분할 */
.sub-layout-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    border-top: 1px solid #ccc; /* 얇은 가로 라인 */
    padding-top: 30px; /* 라인과 텍스트 사이 간격 */
}

/* 좌측 타이틀과 세로 라인 */
.sub-layout-top .left-col {
    position: relative;
    padding-left: 20px; /* 왼쪽 여백 살짝 부여 */
    padding-right: 60px; /* 세로 라인과의 간격 */
}
.sub-layout-top .left-col::after {
    content: '';
    position: absolute;
    top: -30px; /* padding-top 만큼 위로 올려서 가로 라인에 딱 붙임 */
    right: 0;
    width: 1px;
    height: 50px; /* 아래로 내려오는 세로 라인 길이 */
    background-color: #ccc; 
}
.sub-layout-top .left-col .title {
    font-size: 45px;
    font-weight: 700;
    color: #111;
}

/* 우측 아웃라인 태그 */
.sub-layout-top .right-col {
    display: flex;
    gap: 10px;
}
.sub-layout-top .right-col .tag {
    display: inline-block;
    padding: 8px 20px;
    border: 1px solid #c8b19a; /* 연한 브라운 테두리 */
    color: #c8b19a;
    font-size: 18px;
    font-weight: 500;
}

/* 중앙 텍스트 */
.sub-layout-center {
    text-align: center;
    margin-top: 80px;
    padding-bottom: 120px; /* 아래 검은 Reveal 섹션과의 간격 */
}
.sub-layout-center p {
    font-size: 45px;
    color: #333;
    line-height: 1.6;
}
.sub-layout-center p.bold-txt {
    font-weight: 700;
    color: #111;
}


/* ================= [핵심] Clip-path Reveal 섹션 ================= */
.sec-clip-reveal {
    position: relative;
    width: 100%;
    height: 100vh; /* 화면 전체를 채움 */
    background-color: #111; /* 기본 검은 배경 */
    overflow: hidden;
}

/* 1. 어두운 기본 텍스트 레이어 */
.clip-layer-dark {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    display: flex; align-items: center; justify-content: center;
    z-index: 1;
}
.clip-layer-dark h2 { font-size: 60px; color: #fff; font-weight: 700; letter-spacing: 2px; }

/* 2. 작은 원에서 커지는 밝은 이미지 레이어 */
.clip-layer-bright {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background-size: cover; background-position: center; background-attachment: fixed;
    display: flex; align-items: center; justify-content: center;
    z-index: 2;
    /* [초기 상태] 정중앙에 크기 0%인 원형으로 숨겨둠 */
    clip-path: circle(0% at 50% 50%); 
    -webkit-clip-path: circle(0% at 50% 50%);
}
.clip-layer-bright .bright-overlay {
    position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.5);
}
.clip-layer-bright .relative-z { position: relative; z-index: 3; text-align: center; color: #fff; }
.bright-text h3 { font-size: 50px; font-weight: 700;  color:#fff; margin-bottom: 50px;line-height:1.4; }
.bright-text p { font-size: 20px; font-weight: 300;color:#eee; }
 
 
 

/* ================= [2] 지그재그 비전 섹션 (명장의 눈) ================= */
.sec-master-vision {
    padding:  0px 0   00px;
}
.sec-master-vision2 {
 overflow:hidden; 
 height:100vh; 
}
/* [핵심 추가] 1번째 구역 컨텐츠 너비만큼만 들어가는 배경 박스 */
.vision-bg-box {
    background-color: #f4f4f4;
    padding: 120px 60px; /* 텍스트/이미지와 배경 테두리 사이의 여백 */
    border-radius:  0px; /* 모서리를 살짝 둥글게 (디자인에 따라 0으로 변경 가능) */ 
	height:100vh; 
}
.sec-master-vision2 .inner-wrap{ position:relative; top:50%;transform:translateY(-50%);}
.vision-bg-box .inner-wrap{ position:relative; top:50%;transform:translateY(-50%);}
.sec-master-vision{ overflow:hidden;}
.vision-row {
    display: flex;
    justify-content: space-between;
    align-items: center; 

}
.vision-row.reverse {
    flex-direction: row-reverse;
}

/* 텍스트 영역 */
.vision-row .v-txt {
    width: 50%; /* 여백을 위해 기존 42%에서 살짝 조정 */
}
.vision-row .v-txt.pl-50 {
    padding-left: 5%; 
	padding-top:15%;
}
.sec-master-vision2 .vision-row .v-txt.pl-50 { 
padding-top:5%;
}

.vision-row .v-txt h3 {
    font-size: 50px;
    font-weight: 700;
    line-height: 1.4;
    color: #111;
    margin-bottom: 40px;
    letter-spacing: -1px;
}
.vision-row .v-txt p {
    font-size: 20px;
    line-height: 1.8;
    color: #444;
	white-space:nowrap;
    margin-bottom: 20px;
}
.vision-row .v-txt p.highlight-txt {
    color: #a78864;
    font-weight: 500;
    margin-top: 40px;
}

/* 이미지 영역 */
.vision-row .v-img {
    width: 50%; /* 여백을 위해 기존 53%에서 살짝 조정 */ 
	position:relative; 
	
}
.vision-row .v-img img{  }
.vision-row.reverse .v-img img{  }

.vision-row .v-img img {

    width: 100%;
    height: auto;
    display: block;
    border-radius: 15px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.05); 
}

/* 세로 데코 라인 */
.v-deco-line {
display:none;
    width: 1px;
    height: 120px;
    background-color: #ccc;
    margin: 60px 0 60px 10%; /* 라인 위치 밸런스 조정 */
}


/* ================= [3] 특허 및 발효법 섹션 (Full Width) ================= */
.sec-master-patent {
    width: 100%; /* 브라우저 가로 100% 사용 */
    padding: 150px 0  00px;
    overflow: hidden; /* 거대 텍스트가 밖으로 나가는 것 방지 */
}

/* 타이틀 좌측 여백 조절 (디자인에 맞춰 0으로 빼셔도 됩니다) */
.patent-header {
    width: 1460px;
    position: relative;
	margin:auto;
    margin-bottom: 50px;
}
.patent-title {
    font-size: 36px;
    font-weight: 700;
    color: #111;
    letter-spacing: -1px;
}

/* 100% 레이아웃 Flex 설정 */
.patent-full-layout {
    display: flex;
    align-items: center;
    width: 1460px;
    position: relative;
	margin:auto;
    z-index: 1;
}

/* 거대 배경 텍스트 */
.bg-insight {
    position: absolute;
    top: 20%;
    left: 40%; /* 3번째 이미지 뒤쪽으로 살짝 걸치게 설정 */
    transform: translateY(-50%);
    font-size: 9vw; /* 뷰포트 너비에 반응하는 거대 폰트 */
    line-height: 0.9;
    color: #f7ede3; 
    font-weight: 300;
    z-index: 1; 
    pointer-events: none;
}

/* --- 좌측 화면 끝에 밀착되는 이미지 영역 --- */
.patent-images-left {
    width: 55%; /* 좌측 절반 조금 넘게 차지 */
    display: flex;
    gap: 20px; /* 이미지 사이의 간격 */
}
.patent-images-left .img-item {
    flex: 1; 
    height:500px; /* 시안처럼 세로로 길게 */
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
/* [핵심] 첫 번째 이미지의 왼쪽 모서리 둥글기를 없애 브라우저 벽에 완전히 붙게 만듦 */
.patent-images-left .first-img {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
.patent-images-left .img-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
	border-radius:20px;
}

/* --- 우측 텍스트 영역 --- */
.patent-texts-right {
    width: 42%; /* 우측 공간 차지 비율 */
    padding-left: 6%; /* 이미지 뭉치와 텍스트 사이의 간격 */
    padding-right: 1%; /* 화면 우측 끝 여백 확보 */ 
	margin-top:2%;
}

/* 리스트 디자인 */
.ferment-list li {
    border-bottom: 1px solid #111; /* 검은색 라인 */
    padding-bottom: 25px;
    margin-bottom: 35px;
}
.ferment-list li h4 {
    font-size: 30px;
    font-weight: 700;
    color: #a78864; 
    margin-bottom: 15px;
}
.ferment-list li p {
    font-size: 20px;
    color: #111;
    font-weight: 500;
    line-height: 1.5;
}

.patent-note {
    font-size: 13px;
    color: #999;
    line-height: 1.5;
    margin-top: 10px;
}