@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');




        /* [상단 CEO 섹션] */
        .hero-section {
            position: relative;
            width: 100%;
            height: 1370px; /* 포토샵 캔버스 높이에 맞춰 조절 */
            margin: 0 auto;
            background: url('../image/ceo-bg.jpg') no-repeat center; /* 배경 텍스처 */
			background-size: cover; 
			color:#fff; 
        }
		.ceo-warp { max-width:1300px; margin:0 auto; }

        /* 메인 카피 영역 (좌측 상단) */
        .main-header {
            position: absolute;
            top: 200px;
            left: 15%;
            z-index: 10;
        }
        .sub-title { font-size: 18px; letter-spacing: 5px; margin-bottom: 40px; color: #eee; }
        .intro-text { font-size: 30px; line-height: 1.6; margin-bottom: 20px; font-weight: 300; }
        .ceo-name { font-size: 60px; line-height: 1.2; font-weight: 300; margin-top: 50px;  }
		.ceo-name span{ font-size: 60px; line-height: 1.2; font-weight: 800; }
        .gold { color: #e3c476; }
		.strong{ font-weight:bold;}

        /* [타임라인 전체 영역] */
        .timeline {
            position: absolute;
			top:550px;
			width:100%; }

		.timeline-container { display: flex;
			 justify-content: center; /* 가로 중앙 */
			 align-items: center;     /* 세로 중앙 (필요 시) */}

		.timeline-container img{ max-width:950px; }
	        
		.ceo-position{  margin-left:50%; clear:both }
		.ceo-position img{ width:100%; left:0; }
        .ceo-photo { clear:both; 
        }

        /* 인물 옆 부연 설명 (중앙/우측 배치) */
        .insight-list {
            position: absolute;
            top: 400px;
            left: 45%;
            z-index: 15;
        }
        .insight-item { margin-bottom: 80px; position: relative; }
        .insight-item::before { /* 세로 선 효과 */
            content: '';
            position: absolute;
            left: -30px; top: 0;
            width: 1px; height: 100%;
            background: rgba(201, 165, 92, 0.3);
        }
        .label { color: #c9a55c; font-size: 12px; letter-spacing: 2px; display: block; }
        .title { font-size: 22px; font-weight: bold; margin: 5px 0; }
        .desc { font-size: 15px; color: #999; line-height: 1.5; }

        /* [중단 카드 섹션] */
        .card-section { 
			
            background: url('../image/ceopart-bg.jpg') center;
            padding: 100px 0;
            text-align: center;
        }
        .section-headline { font-size: 42px; margin-top:50px; margin-bottom: 20px; color:#fff; }
		.section-subheadline {
				position: relative;
				display: inline-block; /* 보드가 텍스트 길이에 맞춰지도록 설정 */
				color: #e3c476;
				font-family: 'Pretendard', sans-serif;
				font-size: 18px;      /* 이미지 비율에 맞춰 조절 가능 */
				font-weight: 500;
				letter-spacing: -0.03em;
				z-index: 1;           /* 텍스트가 보드보다 위로 옴 */
			  }

			  /* 텍스트 뒤에 깔리는 보드(배경 박스) */
			  .section-subheadline::before {
				content: "";
				position: absolute;
				left: -15px;         /* 양옆 여백 */
				right: -15px;
				top: 8px;            /* 이 값이 클수록 보드가 아래로 내려갑니다 */
				height: 20px;        
				
				background-color: rgba(0, 0, 0, 0.9); /* 검정색 90% 불투명도 */
				z-index: -1;         /* 텍스트 뒤로 배치 */
			  }
		
        
        .grid-container {
            display: flex;
            justify-content: center;
            gap: 20px;
            padding: 0 50px;
			margin-top:80px;
        }
        .biz-card {
            width: 300px;
            height: 450px;
            background:rgba(43, 43, 43, 0.8);
            border: 1px solid #bababa;
            padding: 40px 20px;
            position: relative;
            transition: 0.4s;
        }
		.biz-card img { margin:50px 0 30px}
        .biz-card:hover { border-color: #e3c476; transform: translateY(-10px); }
        .card-top-label { 
            position: absolute; top: 20px; left: -5px;
            background: #e3c476; color: #000; padding: 7px 20px; font-size: 12px;
        }
        .biz-card h4 { color: #e3c476; font-size: 20px; margin:0px 0 30px; }
		.biz-card h5 { color:#bababa; font-size:12px; font-weight: 300; letter-spacing:0.1em; }
        .biz-card p { font-size: 16px;  color:#bababa;  line-height: 1.6;  font-weight: 300; }

		.card-footer { margin:50px auto 0 ; }
		.card-foot-head{ font-size:25px; color:#e3c476; }
		.card-foot-sub{ font-size:18px; font-weight:300; }

        /* 반응형 대응 */
        @media (max-width: 1200px) {
            .hero-section { height: auto; display: flex; flex-direction: column; }
            .main-header, .insight-list, .ceo-photo { position: static; padding: 20px; width: 100%; text-align: center; }
            .grid-container { flex-wrap: wrap; }
        }

		/* 섹션 전체 스타일 */
        .cta-section {
            position: relative;
            background: #111; /* 어두운 배경 */
            color: #fff;
            padding: 100px 20px;
            text-align: center;
            overflow: hidden;
            font-family: 'Pretendard', sans-serif;
        }

        /* 배경 이미지 (채승병 CEO의 묵직한 사진 배치 권장) */
        .cta-section::before {
            content: "";
            position: absolute;
            top: 0; left: 0; width: 100%; height: 100%;
            background: url('path_to_your_ceo_image.jpg') no-repeat center center / cover;
            opacity: 0.3; /* 사진을 어둡게 처리하여 글씨 강조 */
            z-index: 1;
        }

        .cta-content {
            position: relative;
            z-index: 2;
            max-width: 900px;
            margin: 0 auto;
        }

        /* Who's Next? 웅장한 폰트 */
        .cta-title {
            font-size: 5rem;
            font-weight: 900;
            letter-spacing: -2px;
            margin-bottom: 10px;
            background: linear-gradient(to bottom, #fff, #999);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-transform: uppercase;
        }

        .cta-subtitle {
            font-size: 2.2rem;
            font-weight: 700;
            color: #e3c476; /* 포인트 컬러 (골드/옐로우) */
            margin-bottom: 40px;
        }

        /* 요청하신 바디 카피 */
        .cta-body {
            font-size: 18px;
            line-height: 1.8;
            color: #ccc;
            margin-bottom: 50px;
            word-break: keep-all;
        }

        .cta-body b {
            color: #fff;
            font-weight: 600;
        }

        /* 클릭 유도 버튼 */
        .cta-button {
            display: inline-block;
            background: #e3c476;
            color: #000;
            padding: 20px 50px;
            font-size: 1.4rem;
            font-weight: 800;
            text-decoration: none;
            border-radius: 50px;
            transition: all 0.3s ease;
            box-shadow: 0 10px 30px rgba(241, 196, 15, 0.3);
        }

        .cta-button:hover {
            transform: translateY(-5px);
            box-shadow: 0 15px 40px rgba(241, 196, 15, 0.5);
            background: #fff;
        }

        /* 희소성 강조 텍스트 */
        .cta-scarcity {
            margin-top: 25px;
            font-size: 0.95rem;
            color: #888;
            font-style: italic;
        }

		.img-m{ display:none;}

        /* 모바일 대응 */
        @media (max-width: 768px) {
			.main-header {text-align:left; padding: 0%; padding-top:100px;}
			.hero-section {height:700px; overflow:hidden;}
			.intro-text{ font-size:20px; position:relative; z-index:1;}
			.ceo-name, .ceo-name span { font-size:35px; }

			.ceo-position { margin-left:0; width:100%;  position:absolute; top:200px; left:150px; overflow:hidden; z-index:0 }
			.ceo-position img{ width:80%}
			.timeline{ position:relative; top:0; padding:0px 0px 0px; min-height:700px;  }
			.timeline-container { position:absolute; top:-100px; }

			.card-section{padding:50px 20px; }
			.section-subheadline{padding:0 20px; line-height:1.4em;  }
			.section-subheadline::before { left:-5px; right:-5px; height:35px;}

			.grid-container{ padding:0 35px;}
			.biz-card {padding: 30px 10px; height:400px; width:340px;}
			.card-foot-head{ font-size:20px; }
			.card-foot-head span, .card-foot-sub spna, .cta-body span{display:block;}
			.card-foot-sub{ font-size:15px; }
			.card-footer{padding: 0px 0px 50px;}


            .cta-title { font-size: 2.5rem; }
            .cta-subtitle { font-size: 25px; }
            .cta-body { font-size: 15px; }
            .cta-button { font-size: 15px; box-sizing: border-box; padding: 15px 40px;}
			.cta-scarcity{font-size:12px; }

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