@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; }

/* ================= 이하 공통 섹션들 ================= */
.sec-beige-quote {
    background-color: #f5f2eb; padding: 150px 0; text-align: center;
}
.quote-text { font-size: 36px; font-weight: 700; color: #a78864; margin-bottom: 30px; }

.sec-beige-quote .inner-wrap{ position:relative;top:50%;transform:translateY(-50%);}
.sec-beige-quote { background-image:url(/theme/basic/img/brand/craftsmanship_bg_02.jpg);background-size:cover;height:80vh;}
.sec-beige-quote h4{font-size:20px;font-weight:700; color:#000 ;line-height:1.6; }
.sec-beige-quote p{font-size:20px;font-weight:400; color:#000 ;line-height:1.6; }

/* 어두운/블랙 분할 섹션 */
.inner-wrap{ position:relative; z-index:2;}
.sec-dark-split .inner-wrap{ height:100vh; }
.sec-dark-split { background-color: #222;   color: #fff;  background-image:url(/theme/basic/img/brand/craftsmanship_bg_03.jpg);background-position:left top; background-size:auto 100% ; background-repeat:no-repeat;    }
.sec-black-split { background-color: #111; padding: 150px 0; color: #fff; }

.sec-black-split .inner-wrap{ height:70vh; }
.sec-black-split { background-color: #222;   color: #fff;  background-image:url(/theme/basic/img/brand/craftsmanship_bg_04.jpg);background-position:left top; background-size:auto 100% ; background-repeat:no-repeat;    }



.split-row { display: flex; align-items: center; gap: 80px; }
.split-row.reverse { flex-direction: row-reverse; }
.split-img { width: 50%; }
.split-img img { width: 100%; border-radius: 15px; }
.split-txt { width: 50%;   position:relative;}
.split-txt h3 { font-size: 62px; font-weight: 700; margin-bottom: 50px; }
.split-txt p { font-size: 20px; line-height: 1.8; color: #aaa; }
.split-txt p span{ color:#fff;font-weight:700; }
/* 3단 스태거 이미지 갤러리 */
.sec-stagger-imgs { padding: 150px 0; }
.stagger-row { display: flex; align-items: center; justify-content: space-between; gap: 50px; }
.stagger-txt { width: 30%; }
.stagger-txt h3 { font-size: 62px; font-weight: 700; margin-bottom: 50px;  }
.stagger-txt p{ font-size: 20px; line-height: 1.8; color: #111; }
.stagger-txt p span{ color:#000;font-weight:700; }
.stagger-gallery { width: 65%; display: flex; gap: 20px; }
.img-item { flex: 1; border-radius: 15px; overflow: hidden; }
.img-item img { width: 100%; height: auto; object-fit: cover; }
/* 높낮이 지그재그 처리 */
.item-1 { margin-top: 0; }
.item-2 { margin-top:  0px; }
.item-3 { margin-top:  0px; }


/* ================= [2] 비대칭 갤러리 슬라이드 ================= */
.sec-journey {
    background-color: #f5f2eb;
 
    position: relative;
    overflow: hidden;  
	height:100vh; 
 
}
.sec-journey > div { position:relative;top:50%; transform:translateY(-50%);}
.bg-watermark-journey {
    position: absolute; top:  15%; left: 30%;
    font-size:4.5vw; line-height: 0.9;
    color: rgba(255,255,255, 0.7); 
    pointer-events: none; z-index: 1;
}
.sec-journey .sec-title{ 
font-size:30px; font-weight:bold;color:#000 ; 
    position: absolute; top:  10%; right: 5%; display:none;
	
}


.journey-swiper {
    position: relative; 
    z-index: 2;
    padding: 80px 0 30px; 
    overflow: visible !important; 
    /* [추가 1] 가로로 넘길 때 화면이 세로로 흔들리는(Bounce) 현상 완벽 차단 */
    touch-action: pan-y; 
width:85%; margin:auto;
}


/* [핵심 1] 하단 정렬: 크기가 달라도 이미지의 바닥 라인을 똑같이 맞춥니다 */
.journey-swiper .swiper-wrapper {
    align-items: flex-end; 
    /* 가장 큰 이미지 높이(520px)보다 넉넉하게 550px로 고정하여 레이아웃 덜컹거림 방지 */
    height: 550px; 
    box-sizing: border-box;   
}

/* [핵심 2] 비활성 슬라이드 (기본 상태) */
.journey-swiper .swiper-slide {
    width: 260px !important; 
    opacity: 0.3; 
    transition: width 0.3s ease, opacity 0.3s ease; 
    
    /* [핵심 추가] 슬라이드 내부의 이미지를 바닥으로 착 붙입니다 */
    display: flex;
    align-items: flex-end;
    height: 550px; /* 컨테이너와 동일한 높이 부여 */ 
padding :50px 0;
}


.journey-swiper .swiper-slide img {
    width: 100%; 
    height: 380px; 
    object-fit: cover; 
    border-radius: 15px;
    box-shadow: 0 10px 20px rgba(0,0,0,0.1);
    transition: height 0.3s ease; 
    display: block;
}
.journey-swiper .swiper-slide-active {
    width: 420px !important; 
    opacity: 1; 
}
.journey-swiper .swiper-slide-active img {
    height: 520px; 
}

.journey-scrollbar {
    position: relative;
    width: 420px; /* 활성화된 큰 슬라이드 너비에 맞춤 */
    height: 2px; /* 스크롤바 트랙(배경 선) 두께 */
    background-color: #ddd; /* 트랙 색상 (연한 회색) */
    margin-top: 50px; /* 슬라이드와 스크롤바 사이 간격 */
    border-radius: 0;
}

/* 움직이는 실제 스크롤바 손잡이 (Drag) */
.journey-scrollbar .swiper-scrollbar-drag {
    background-color: #111; /* 손잡이 색상 (검은색) */
    height: 100%; 
    border-radius: 0;
    cursor: grab;
}
.journey-scrollbar .swiper-scrollbar-drag:active {
    cursor: grabbing;
}
/* ================= [3] 연혁 섹션 ================= */
.sec-short-history { display: flex; gap: 100px; padding: 150px 0; }
.sh-left { width: 30%; }
.sh-left span { color: #8d6a4d; font-weight: 700; margin-bottom: 15px; display: block;  font-size:20px;}
.sh-left h3 { font-size: 45px; font-weight: 700; margin-bottom: 20px; }
.sh-left p { font-size: 20px; color: #666; line-height: 1.6; }

.sh-right { width: 70%; display:flex; justify-content: space-between; }
.history-list {padding-top:20px;  position:relative;  width:48%; /*  column-count: 2; column-gap: 50px;   */ } /* 2단 분할 리스트 */
.history-list:after{position:absolute; top:0px;left:0px;width:100%; height:1px;background:#000;content:"";display:block;} 
.history-list li { font-size: 20px; margin-bottom: 25px; line-height: 1.5; color: #444;  display:flex;   }
.history-list li strong { display: inline-block; width: 80px; font-size: 20px; color: #a78864; }
.history-list li span{display:block;  color:000 ;font-size:20px; }
.history-list li b { color: #111; font-weight: 700; } /* 강조 텍스트 */

/* ================= [4] 수상이력 섹션 ================= */
.sec-awards { position: relative; height:100vh; color: #fff; }
.sec-awards .inner-wrap{  position:relative; top:50%;transform:translateY(-50%); }
.awards-bg {
    position: absolute; top:0; left:0; width:100%; height:100%;
    background-size: cover; background-position: center; background-attachment: fixed; z-index: 1;
}
.awards-overlay { position: absolute; top:0; left:0; width:100%; height:100%; background: rgba(0,0,0,0.7); z-index: 2; }
.sec-awards .top-txt { display: block; color: #c8b19a; margin-bottom: 10px; font-weight: 700;text-align:center;  font-size:20px; }
.sec-awards .main-tit { font-size: 45px; font-weight: 700; margin-bottom: 15px; text-align:center; }
.sec-awards .desc { font-size: 20px; color: #ccc; margin-bottom: 80px; text-align:center; }

.badge-wrap { display: flex; justify-content: center; gap: 80px; }
.badge-item { text-align: center; }
.badge-item .circle { 
    width: 230px; height: 230px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.3);
    margin: 0 auto 20px;
    background: url('https://images.unsplash.com/photo-1555396273-367ea4eb4db5?auto=format&fit=crop&q=80&w=150') no-repeat center/cover;
}
.badge-item .circle.c1{background-image:url(/theme/basic/img/brand/career_badge_01.png);}
.badge-item .circle.c2{background-image:url(/theme/basic/img/brand/career_badge_02.png);}
.badge-item .circle.c3{background-image:url(/theme/basic/img/brand/career_badge_03.png);}
.badge-item .circle.c4{background-image:url(/theme/basic/img/brand/career_badge_04.png);}


.badge-item p { font-size:20px; line-height: 1.5; color: #eee; }

/* ================= [5] 저서 섹션 ================= */
.sec-books { padding: 150px 0; }
.books-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 60px; }
.books-header .tit-area span { color: #8d6a4d; font-weight: 700; font-size:20px; display: block; margin-bottom: 10px; }
.books-header .tit-area h3 { font-size: 45px; font-weight: 700; margin-bottom: 15px; }
.books-header .tit-area p { font-size: 20px; color: #000; }

/* 버튼 커스텀 */
.books-nav { display: flex; gap: 10px; }
.swiper-btn-prev, .swiper-btn-next { 
    width: 40px; height: 40px; border: 1px solid #ccc; background-color: #fff; cursor: pointer; transition: 0.3s; 
    border-radius: 50%; opacity:0.4;border: 1px solid #111; 
}
.swiper-btn-prev:hover, .swiper-btn-next:hover { opacity:1; }

.book-card .img-box img { width: 100%; border-radius: 10px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); margin-bottom: 20px;  }
.book-card .txt-box h4 { font-size: 28px; font-weight: 700; margin-bottom: 10px; color: #111; ;           width: 100%;      white-space: nowrap;    overflow: hidden;              text-overflow: ellipsis;   }
.book-card .txt-box p { font-size: 18px; color: #888;margin-bottom:10px; }
.book-card .txt-box  span{ display:block;font-size: 18px; color: #b08968;  }