<![CDATA[
<p>11._______________________________________________________________________________________________ <br><!DOCTYPE html> <br><br><html lang="ko"> <br><head> <br><meta charset="utf-8"/> <br><meta content="width=device-width, initial-scale=1.0" name="viewport"/> <br><title>중세 세계: 연속과 변화</title> <br><link href="<a href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" target="_blank" class="ke-link">https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css</a>" rel="stylesheet"/> <br><link href="<a href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;900&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;900&family=Noto+Sans+KR:wght@300;400;500;700&display=swap</a>" rel="stylesheet"/> <br><link href="<a href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" target="_blank" class="ke-link">https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css</a>" rel="stylesheet"/> <br><style> <br>        body { <br>            font-family: 'Noto Sans KR', sans-serif; <br>            background-color: #111; <br>            color: #fff; <br>            margin: 0; <br>            padding: 0; <br>            overflow: hidden; <br>        } <br>        .slide-container { <br>            width: 1280px; <br>            height: 720px; <br>            position: relative; <br>            background-color: #0c0c0c; <br>            overflow: hidden; <br>            display: flex; <br>            flex-direction: column; <br>            padding: 60px 80px; <br>        } <br>        .natgeo-border { <br>            border: 6px solid #FFC200; <br>            position: absolute; <br>            top: 20px; <br>            left: 20px; <br>            right: 20px; <br>            bottom: 20px; <br>            pointer-events: none; <br>            z-index: 50; <br>        } <br>        .title-font { <br>            font-family: 'Noto Serif KR', serif; <br>        } <br>         <br>        /* Header Styling */ <br>        .header-section { <br>            margin-bottom: 40px; <br>            position: relative; <br>            z-index: 10; <br>        } <br>         <br>        /* Grid Layout */ <br>        .grid-container { <br>            display: grid; <br>            grid-template-columns: repeat(3, 1fr); <br>            gap: 24px; <br>            flex: 1; <br>            height: 100%; <br>        } <br><br>        /* Card Styling */ <br>        .card { <br>            background-color: #1a1a1a; <br>            border-radius: 8px; <br>            overflow: hidden; <br>            display: flex; <br>            flex-direction: column; <br>            border-bottom: 4px solid #333; <br>            transition: transform 0.3s ease, border-color 0.3s ease; <br>            height: 100%; <br>        } <br><br>        .card:hover { <br>            transform: translateY(-5px); <br>            border-bottom-color: #FFC200; <br>        } <br><br>        .card-image-wrapper { <br>            height: 200px; <br>            overflow: hidden; <br>            position: relative; <br>        } <br><br>        .card-image { <br>            width: 100%; <br>            height: 100%; <br>            object-fit: cover; <br>            transition: transform 0.5s ease; <br>        } <br><br>        .card:hover .card-image { <br>            transform: scale(1.05); <br>        } <br><br>        .card-content { <br>            padding: 24px; <br>            display: flex; <br>            flex-direction: column; <br>            flex: 1; <br>        } <br><br>        .card-icon { <br>            width: 48px; <br>            height: 48px; <br>            background-color: rgba(255, 194, 0, 0.1); <br>            border-radius: 50%; <br>            display: flex; <br>            align-items: center; <br>            justify-content: center; <br>            color: #FFC200; <br>            font-size: 1.25rem; <br>            margin-bottom: 16px; <br>        } <br><br>        .card-title { <br>            font-family: 'Noto Serif KR', serif; <br>            font-size: 1.25rem; <br>            font-weight: 700; <br>            color: #fff; <br>            margin-bottom: 12px; <br>        } <br><br>        .card-desc { <br>            color: #9ca3af; <br>            font-size: 0.9rem; <br>            line-height: 1.6; <br>            flex: 1; <br>        } <br><br>        /* Background texture */ <br>        .bg-texture { <br>            position: absolute; <br>            top: 0; <br>            left: 0; <br>            width: 100%; <br>            height: 100%; <br>            background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="<a href="http://www.w3.org/2000/svg" target="_blank" class="ke-link">http://www.w3.org/2000/svg</a>"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23222" fill-opacity="0.4"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'); <br>            z-index: 0; <br>            opacity: 0.5; <br>        } <br>    </style> <br></head> <br><body> <br><div class="slide-container"> <br><div class="natgeo-border"></div> <br><div class="bg-texture"></div> <br><!-- Header --> <br><header class="header-section"> <br><div class="flex items-center mb-3"> <br><span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-3">SECTION 04</span> <br><span class="text-yellow-500 text-sm font-bold tracking-widest uppercase">The Middle Ages</span> <br></div> <br><div class="flex items-end justify-between border-b border-gray-800 pb-4"> <br><div> <br><h1 class="text-4xl font-black title-font text-white mb-1"> <br>                        중세 세계 <br>                    </h1> <br><p class="text-xl text-gray-400 font-serif italic"> <br>                        연속과 변화, 신앙과 문명의 교차 <br>                    </p> <br></div> <br><p class="text-right text-gray-500 text-sm max-w-md hidden md:block"> <br>                    서유럽의 봉건 질서 확립과 이슬람 세계의 번영,<br/>그리고 십자군 전쟁을 통한 동서양의 충돌과 교류를 조명합니다. <br>                </p> <br></div> <br></header> <br><!-- Cards Content --> <br><div class="grid-container relative z-10"> <br><!-- Card 1: Feudalism --> <br><div class="card"> <br><div class="card-image-wrapper"> <br><img alt="Medieval Castle and Feudal System" class="card-image" src="<a href="https://www.genspark.ai/image_placeholder.png" target="_blank" class="ke-link">https://www.genspark.ai/image_placeholder.png</a>"/> <br></div> <br><div class="card-content"> <br><div class="flex items-center justify-between"> <br><div class="card-icon"><i class="fas fa-chess-rook"></i></div> <br><span class="text-xs font-bold text-gray-500 uppercase">Social System</span> <br></div> <br><h3 class="card-title">서유럽의 봉건제</h3> <br><p class="card-desc"> <br>                        왕, 영주, 기사, 농노로 이어지는 피라미드식 계급 구조와 장원 경제가 사회의 근간을 이루었으며, 기독교 신앙이 정신적 지주 역할을 했습니다. <br>                    </p> <br></div> <br></div> <br><!-- Card 2: Islamic Golden Age --> <br><div class="card"> <br><div class="card-image-wrapper"> <br><img alt="Islamic Science and Scholarship" class="card-image" src="<a href="https://www.genspark.ai/image_placeholder.png" target="_blank" class="ke-link">https://www.genspark.ai/image_placeholder.png</a>" style="object-position: center;"/> <br></div> <br><div class="card-content"> <br><div class="flex items-center justify-between"> <br><div class="card-icon"><i class="fas fa-scroll"></i></div> <br><span class="text-xs font-bold text-gray-500 uppercase">Golden Age</span> <br></div> <br><h3 class="card-title">이슬람의 황금기</h3> <br><p class="card-desc"> <br>                        바그다드의 '지혜의 집'을 중심으로 고대 그리스 학문을 보존·번역하고 대수학, 천문학, 의학 등에서 눈부신 과학적 성취를 이루었습니다. <br>                    </p> <br></div> <br></div> <br><!-- Card 3: Crusades --> <br><div class="card"> <br><div class="card-image-wrapper"> <br><img alt="The Crusades" class="card-image" src="<a href="https://www.genspark.ai/image_placeholder.png" target="_blank" class="ke-link">https://www.genspark.ai/image_placeholder.png</a>"/> <br></div> <br><div class="card-content"> <br><div class="flex items-center justify-between"> <br><div class="card-icon"><i class="fas fa-shield-halved"></i></div> <br><span class="text-xs font-bold text-gray-500 uppercase">Conflict & Exchange</span> <br></div> <br><h3 class="card-title">십자군 전쟁과 교류</h3> <br><p class="card-desc"> <br>                        성지 탈환을 위한 200년 간의 전쟁은 비극을 낳았지만, 역설적으로 동방의 선진 문물이 유럽에 유입되어 상업 부활과 르네상스의 밑거름이 되었습니다. <br>                    </p> <br></div> <br></div> <br></div> <br></div> <br></body> <br></html> <br><br>12._______________________________________________________________________________________________ <br><!DOCTYPE html> <br><br><html lang="ko"> <br><head> <br><meta charset="utf-8"/> <br><meta content="width=device-width, initial-scale=1.0" name="viewport"/> <br><title>르네상스: 인간을 다시 발견하다</title> <br><link href="<a href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" target="_blank" class="ke-link">https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css</a>" rel="stylesheet"/> <br><link href="<a href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;900&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;900&family=Noto+Sans+KR:wght@300;400;500;700&display=swap</a>" rel="stylesheet"/> <br><link href="<a href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" target="_blank" class="ke-link">https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css</a>" rel="stylesheet"/> <br><style> <br>        body { <br>            font-family: 'Noto Sans KR', sans-serif; <br>            background-color: #111; <br>            color: #fff; <br>            margin: 0; <br>            padding: 0; <br>            overflow: hidden; <br>        } <br>        .slide-container { <br>            width: 1280px; <br>            height: 720px; <br>            position: relative; <br>            background-color: #0c0c0c; <br>            overflow: hidden; <br>            display: flex; <br>            flex-direction: row; <br>        } <br>        .natgeo-border { <br>            border: 6px solid #FFC200; <br>            position: absolute; <br>            top: 20px; <br>            left: 20px; <br>            right: 20px; <br>            bottom: 20px; <br>            pointer-events: none; <br>            z-index: 50; <br>        } <br>        .title-font { <br>            font-family: 'Noto Serif KR', serif; <br>        } <br>         <br>        /* Left Column Styles */ <br>        .left-col { <br>            width: 50%; <br>            padding: 70px 60px 70px 80px; <br>            display: flex; <br>            flex-direction: column; <br>            justify-content: center; <br>            z-index: 10; <br>        } <br>         <br>        /* Right Column Styles */ <br>        .right-col { <br>            width: 50%; <br>            position: relative; <br>            height: 100%; <br>            overflow: hidden; <br>        } <br>         <br>        .right-image { <br>            width: 100%; <br>            height: 100%; <br>            object-fit: cover; <br>            object-position: center; <br>            /* Filter adjusted for the parchment look of Vitruvian Man */ <br>            filter: sepia(20%) contrast(1.1) brightness(0.9); <br>        } <br><br>        .overlay-gradient { <br>            position: absolute; <br>            top: 0; <br>            left: 0; <br>            width: 100%; <br>            height: 100%; <br>            background: linear-gradient(to right, #0c0c0c 0%, rgba(12,12,12,0.8) 10%, transparent 40%); <br>            z-index: 2; <br>        } <br><br>        .content-item { <br>            display: flex; <br>            align-items: flex-start; <br>            margin-bottom: 24px; <br>            background: rgba(255, 255, 255, 0.03); <br>            padding: 16px; <br>            border-radius: 8px; <br>            border-left: 3px solid transparent; <br>            transition: all 0.3s ease; <br>        } <br>         <br>        .content-item:hover { <br>            background: rgba(255, 255, 255, 0.08); <br>            border-left-color: #FFC200; <br>        } <br><br>        .item-icon { <br>            width: 48px; <br>            height: 48px; <br>            background-color: #222; <br>            border-radius: 8px; <br>            display: flex; <br>            align-items: center; <br>            justify-content: center; <br>            color: #FFC200; <br>            margin-right: 20px; <br>            flex-shrink: 0; <br>            font-size: 1.2rem; <br>            border: 1px solid #444; <br>        } <br><br>        .quote-text { <br>            font-family: 'Noto Serif KR', serif; <br>            font-style: italic; <br>            color: #d1d5db; <br>            line-height: 1.6; <br>            margin-bottom: 30px; <br>            font-size: 1.1rem; <br>            border-left: 4px solid #FFC200; <br>            padding-left: 20px; <br>        } <br>    </style> <br></head> <br><body> <br><div class="slide-container"> <br><div class="natgeo-border"></div> <br><!-- Left Column: Text Content --> <br><div class="left-col"> <br><header class="mb-6"> <br><div class="flex items-center mb-3"> <br><span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-3">SECTION 04</span> <br><span class="text-yellow-500 text-sm font-bold tracking-widest uppercase">Renaissance</span> <br></div> <br><h1 class="text-5xl font-black title-font text-white mb-4 leading-tight"> <br>                    르네상스:<br/>인간의 재발견 <br>                </h1> <br><div class="quote-text"> <br><p>"중세의 신 중심 세계관에서 벗어나,<br/>인간과 이성의 빛으로 세상을 다시보다."</p> <br></div> <br></header> <br><div class="content-body"> <br><!-- Humanism --> <br><div class="content-item"> <br><div class="item-icon"><i class="fas fa-book-open"></i></div> <br><div> <br><h3 class="text-lg font-bold text-white mb-1">인문주의 (Humanism)</h3> <br><p class="text-gray-400 text-sm leading-relaxed"> <br>                        그리스·로마 고전 문헌의 부활을 통해 인간의 존엄성과 잠재력을 탐구하며 근대적 개인의 탄생을 예고했습니다. <br>                    </p> <br></div> <br></div> <br><!-- Art & Science --> <br><div class="content-item"> <br><div class="item-icon"><i class="fas fa-palette"></i></div> <br><div> <br><h3 class="text-lg font-bold text-white mb-1">예술과 과학의 융합</h3> <br><p class="text-gray-400 text-sm leading-relaxed"> <br>                        레오나르도 다 빈치와 미켈란젤로 등 거장들은 원근법과 해부학을 통해 예술을 과학의 경지로 끌어올렸습니다. <br>                    </p> <br></div> <br></div> <br><!-- Printing Revolution --> <br><div class="content-item"> <br><div class="item-icon"><i class="fas fa-print"></i></div> <br><div> <br><h3 class="text-lg font-bold text-white mb-1">지식의 확산</h3> <br><p class="text-gray-400 text-sm leading-relaxed"> <br>                        구텐베르크의 인쇄술 발명은 지식의 대중화를 이끌어 종교개혁과 과학혁명의 토대를 마련했습니다. <br>                    </p> <br></div> <br></div> <br></div> <br></div> <br><!-- Right Column: Image --> <br><div class="right-col"> <br><div class="overlay-gradient"></div> <br><!-- Image of Vitruvian Man --> <br><img alt="Vitruvian Man by Leonardo da Vinci" class="right-image" src="<a href="https://page.gensparksite.com/slides_images/1435b9917a1a363a3369a076ad18fc5f.webp" target="_blank" class="ke-link">https://page.gensparksite.com/slides_images/1435b9917a1a363a3369a076ad18fc5f.webp</a>"/> <br><!-- Image Caption --> <br><div class="absolute bottom-8 right-8 bg-black bg-opacity-80 px-5 py-3 rounded border border-gray-700 max-w-sm text-right z-10 backdrop-filter backdrop-blur-sm"> <br><p class="text-yellow-500 text-xs font-bold uppercase mb-1">Masterpiece</p> <br><p class="text-white text-sm font-medium leading-snug">비트루비우스적 인간 (Vitruvian Man)</p> <br><p class="text-gray-400 text-xs mt-1">레오나르도 다 빈치, c. 1490. 예술과 과학, 인체 비례의 완벽한 조화를 상징합니다.</p> <br></div> <br></div> <br></div> <br></body> <br></html> <br><br><br>13._______________________________________________________________________________________________ <br><!DOCTYPE html> <br><br><html lang="ko"> <br><head> <br><meta charset="utf-8"/> <br><meta content="width=device-width, initial-scale=1.0" name="viewport"/> <br><title>대항해 시대: 세계의 연결</title> <br><link href="<a href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" target="_blank" class="ke-link">https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css</a>" rel="stylesheet"/> <br><link href="<a href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;900&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;900&family=Noto+Sans+KR:wght@300;400;500;700&display=swap</a>" rel="stylesheet"/> <br><link href="<a href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" target="_blank" class="ke-link">https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css</a>" rel="stylesheet"/> <br><style> <br>    body { <br>        font-family: 'Noto Sans KR', sans-serif; <br>        background-color: #111; <br>        color: #fff; <br>        margin: 0; <br>        padding: 0; <br>        overflow: hidden; <br>    } <br>    .slide-container { <br>        width: 1280px; <br>        height: 720px; <br>        position: relative; <br>        background-color: #0c0c0c; <br>        overflow: hidden; <br>        display: flex; <br>        flex-direction: row; <br>    } <br>    .natgeo-border { <br>        border: 6px solid #FFC200; <br>        position: absolute; <br>        top: 20px; <br>        left: 20px; <br>        right: 20px; <br>        bottom: 20px; <br>        pointer-events: none; <br>        z-index: 50; <br>    } <br>    .title-font { <br>        font-family: 'Noto Serif KR', serif; <br>    } <br>     <br>    /* Layout Structure */ <br>    .sidebar { <br>        width: 35%; /* 448px */ <br>        height: 100%; <br>        background-color: #0c0c0c; <br>        padding: 70px 40px 70px 50px; <br>        display: flex; <br>        flex-direction: column; <br>        z-index: 20; <br>        border-right: 1px solid #222; <br>        position: relative; <br>    } <br><br>    .map-area { <br>        width: 65%; /* 832px */ <br>        height: 100%; <br>        position: relative; <br>        overflow: hidden; <br>        background-color: #1a1a1a; <br>    } <br><br>    /* Map Image Styling */ <br>    .map-image { <br>        width: 100%; <br>        height: 100%; <br>        object-fit: cover; <br>        object-position: center; <br>        opacity: 0.9; <br>        transition: transform 0.5s ease; <br>    } <br>     <br>    .map-area:hover .map-image { <br>        transform: scale(1.02); <br>    } <br><br>    /* Pins */ <br>    .map-pin { <br>        position: absolute; <br>        display: flex; <br>        flex-direction: column; <br>        align-items: center; <br>        transform: translate(-50%, -100%); /* Center bottom anchor */ <br>        cursor: pointer; <br>        z-index: 30; <br>        transition: all 0.3s ease; <br>    } <br><br>    .map-pin:hover { <br>        transform: translate(-50%, -110%) scale(1.1); <br>        z-index: 40; <br>    } <br><br>    .pin-icon { <br>        color: #FFC200; <br>        font-size: 2rem; <br>        filter: drop-shadow(0 4px 4px rgba(0,0,0,0.7)); <br>        margin-bottom: 5px; <br>    } <br><br>    .pin-label { <br>        background: rgba(0, 0, 0, 0.85); <br>        color: #fff; <br>        padding: 5px 12px; <br>        border-radius: 4px; <br>        font-size: 0.85rem; <br>        font-weight: 700; <br>        border: 1px solid #FFC200; <br>        white-space: nowrap; <br>        box-shadow: 0 4px 10px rgba(0,0,0,0.5); <br>    } <br><br>    /* Content Styling */ <br>    .info-card { <br>        background: rgba(255, 255, 255, 0.05); <br>        border-left: 3px solid #FFC200; <br>        padding: 15px; <br>        margin-bottom: 15px; <br>        border-radius: 0 6px 6px 0; <br>    } <br><br>    .info-title { <br>        color: #fff; <br>        font-weight: 700; <br>        margin-bottom: 4px; <br>        display: flex; <br>        align-items: center; <br>    } <br>     <br>    .info-title i { <br>        color: #FFC200; <br>        margin-right: 8px; <br>        font-size: 0.9rem; <br>    } <br><br>    .info-desc { <br>        color: #9ca3af; <br>        font-size: 0.85rem; <br>        line-height: 1.5; <br>    } <br><br>    /* Pin Positions for World Map */ <br>    .pin-caribbean { top: 48%; left: 28%; } <br>    .pin-cape { top: 82%; left: 54%; } <br>    .pin-philippines { top: 52%; left: 85%; } <br>    .pin-spain { top: 32%; left: 47%; } <br><br></style> <br></head> <br><body> <br><div class="slide-container"> <br><div class="natgeo-border"></div> <br><!-- Left Sidebar: Content --> <br><div class="sidebar"> <br><header class="mb-8"> <br><div class="flex items-center mb-3"> <br><span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-3">SECTION 05</span> <br><span class="text-yellow-500 text-xs font-bold tracking-widest uppercase">Global Interaction</span> <br></div> <br><h1 class="text-4xl font-black title-font text-white mb-2 leading-tight"> <br>                대항해 시대 <br>            </h1> <br><h2 class="text-xl text-gray-400 font-serif italic mb-4"> <br>                세계의 연결과 변화 <br>            </h2> <br><p class="text-sm text-gray-300 leading-relaxed border-t border-gray-800 pt-4"> <br>                15세기 말, 유럽의 바다로의 진출은 고립되어 있던 대륙들을 연결하고 진정한 의미의 세계사를 열었습니다. <br>            </p> <br></header> <br><div class="content-body flex-1 overflow-y-auto"> <br><!-- Info Card 1 --> <br><div class="info-card"> <br><div class="info-title"><i class="fas fa-ship"></i> 신항로 개척</div> <br><p class="info-desc">콜럼버스의 아메리카 도달(1492), 바스코 다 가마의 인도 항로(1498), 마젤란의 세계 일주(1522)로 지구적 규모의 항로가 열렸습니다.</p> <br></div> <br><!-- Info Card 2 --> <br><div class="info-card"> <br><div class="info-title"><i class="fas fa-exchange-alt"></i> 콜럼버스 교환</div> <br><p class="info-desc">구대륙과 신대륙 간에 농작물(감자, 옥수수↔밀, 설탕), 가축, 그리고 <span class="text-red-400">질병</span>이 교환되어 생태계와 인구에 거대한 변화를 가져왔습니다.</p> <br></div> <br><!-- Info Card 3 --> <br><div class="info-card"> <br><div class="info-title"><i class="fas fa-coins"></i> 세계 무역망 형성</div> <br><p class="info-desc">대서양 삼각 무역과 은(Silver)의 유통을 통해 유럽, 아프리카, 아메리카, 아시아가 하나의 경제권으로 연결되었습니다.</p> <br></div> <br></div> <br></div> <br><!-- Right Area: Map with Pins --> <br><div class="map-area"> <br><!-- Background Map Image --> <br><!-- Using a representative Age of Discovery map URL --> <br><img alt="Map of Age of Discovery Explorations" class="map-image" src="<a href="https://page.gensparksite.com/slides_images/69bdaef758910fd3e3daf336e79e1303.webp" target="_blank" class="ke-link">https://page.gensparksite.com/slides_images/69bdaef758910fd3e3daf336e79e1303.webp</a>"/> <br><!-- Map Legend Box --> <br><div class="absolute bottom-8 right-8 bg-black bg-opacity-80 p-4 rounded border border-gray-700 z-30"> <br><h4 class="text-yellow-500 text-xs font-bold uppercase mb-2">Voyage Routes</h4> <br><div class="flex items-center mb-1"> <br><i class="fas fa-map-marker-alt text-yellow-500 text-xs mr-2"></i> <br><span class="text-gray-300 text-xs">주요 기착지 (Key Locations)</span> <br></div> <br><div class="flex items-center"> <br><i class="fas fa-route text-blue-400 text-xs mr-2"></i> <br><span class="text-gray-300 text-xs">탐험 경로 (Exploration Lines)</span> <br></div> <br></div> <br><!-- Pin: Spain/Portugal --> <br><div class="map-pin pin-spain"> <br><i class="fas fa-crown pin-icon text-yellow-500"></i> <br><div class="pin-label">리스본/세비야 (Start)</div> <br></div> <br><!-- Pin: Caribbean --> <br><div class="map-pin pin-caribbean"> <br><i class="fas fa-map-marker-alt pin-icon"></i> <br><div class="pin-label">서인도 제도 (1492)</div> <br></div> <br><!-- Pin: Cape of Good Hope --> <br><div class="map-pin pin-cape"> <br><i class="fas fa-map-marker-alt pin-icon"></i> <br><div class="pin-label">희망봉 (1488)</div> <br></div> <br><!-- Pin: Philippines --> <br><div class="map-pin pin-philippines"> <br><i class="fas fa-map-marker-alt pin-icon"></i> <br><div class="pin-label">필리핀 (1521)</div> <br></div> <br></div> <br></div> <br></body> <br></html> <br><br>14._______________________________________________________________________________________________ <br><!DOCTYPE html> <br><br><html lang="ko"> <br><head> <br><meta charset="utf-8"/> <br><meta content="width=device-width, initial-scale=1.0" name="viewport"/> <br><title>계몽주의와 혁명</title> <br><link href="<a href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" target="_blank" class="ke-link">https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css</a>" rel="stylesheet"/> <br><link href="<a href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;900&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;900&family=Noto+Sans+KR:wght@300;400;500;700&display=swap</a>" rel="stylesheet"/> <br><link href="<a href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" target="_blank" class="ke-link">https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css</a>" rel="stylesheet"/> <br><style> <br>    body { <br>        font-family: 'Noto Sans KR', sans-serif; <br>        background-color: #111; <br>        color: #fff; <br>        margin: 0; <br>        padding: 0; <br>        overflow: hidden; <br>    } <br>    .slide-container { <br>        width: 1280px; <br>        height: 720px; <br>        position: relative; <br>        background-color: #0c0c0c; <br>        background-image: url("<a href="https://www.genspark.ai/image_placeholder.png" target="_blank" class="ke-link">https://www.genspark.ai/image_placeholder.png</a>"); /* Placeholder for revolutionary painting/texture */ <br>        background-size: cover; <br>        background-position: center; <br>        overflow: hidden; <br>        display: flex; <br>        flex-direction: column; <br>    } <br>    .slide-overlay { <br>        position: absolute; <br>        top: 0; <br>        left: 0; <br>        width: 100%; <br>        height: 100%; <br>        background-color: rgba(12, 12, 12, 0.85); /* Dark overlay to make text readable */ <br>        z-index: 1; <br>    } <br>    .natgeo-border { <br>        border: 6px solid #FFC200; <br>        position: absolute; <br>        top: 20px; <br>        left: 20px; <br>        right: 20px; <br>        bottom: 20px; <br>        pointer-events: none; <br>        z-index: 50; <br>    } <br>    .content-wrapper { <br>        position: relative; <br>        z-index: 10; <br>        height: 100%; <br>        display: flex; <br>        flex-direction: column; <br>        justify-content: space-between; <br>        padding: 60px 80px; <br>    } <br>     <br>    .title-font { <br>        font-family: 'Noto Serif KR', serif; <br>    } <br><br>    /* Quote Styling */ <br>    .quote-container { <br>        flex: 1; <br>        display: flex; <br>        flex-direction: column; <br>        justify-content: center; <br>        align-items: center; <br>        text-align: center; <br>        position: relative; <br>        margin-bottom: 20px; <br>    } <br><br>    .quote-mark { <br>        font-family: 'Noto Serif KR', serif; <br>        font-size: 8rem; <br>        color: #FFC200; <br>        opacity: 0.3; <br>        position: absolute; <br>        line-height: 1; <br>    } <br><br>    .quote-mark.start { <br>        top: -20px; <br>        left: 40px; <br>    } <br><br>    .quote-mark.end { <br>        bottom: -40px; <br>        right: 40px; <br>    } <br><br>    .quote-text { <br>        font-family: 'Noto Serif KR', serif; <br>        font-size: 3.5rem; <br>        font-weight: 900; <br>        line-height: 1.3; <br>        color: #fff; <br>        text-shadow: 0 4px 20px rgba(0,0,0,0.5); <br>        max-width: 90%; <br>        z-index: 10; <br>    } <br><br>    .quote-source { <br>        margin-top: 20px; <br>        font-size: 1.2rem; <br>        color: #FFC200; <br>        font-weight: 500; <br>        letter-spacing: 0.05em; <br>        text-transform: uppercase; <br>        border-top: 1px solid rgba(255, 194, 0, 0.5); <br>        padding-top: 10px; <br>    } <br><br>    /* Thinkers Grid */ <br>    .thinkers-grid { <br>        display: grid; <br>        grid-template-columns: repeat(3, 1fr); <br>        gap: 30px; <br>        margin-top: auto; <br>    } <br><br>    .thinker-card { <br>        background: rgba(255, 255, 255, 0.05); <br>        border: 1px solid rgba(255, 255, 255, 0.1); <br>        border-radius: 8px; <br>        padding: 20px; <br>        display: flex; <br>        align-items: flex-start; <br>        transition: transform 0.3s ease, background 0.3s ease; <br>    } <br><br>    .thinker-card:hover { <br>        background: rgba(255, 255, 255, 0.1); <br>        transform: translateY(-5px); <br>        border-color: #FFC200; <br>    } <br><br>    .thinker-icon { <br>        background-color: #222; <br>        color: #FFC200; <br>        width: 40px; <br>        height: 40px; <br>        border-radius: 50%; <br>        display: flex; <br>        align-items: center; <br>        justify-content: center; <br>        font-size: 1.1rem; <br>        margin-right: 15px; <br>        flex-shrink: 0; <br>        border: 1px solid #444; <br>    } <br><br>    .thinker-content h4 { <br>        color: #fff; <br>        font-family: 'Noto Serif KR', serif; <br>        font-size: 1.1rem; <br>        font-weight: 700; <br>        margin-bottom: 4px; <br>    } <br><br>    .thinker-content h5 { <br>        color: #FFC200; <br>        font-size: 0.8rem; <br>        font-weight: 600; <br>        text-transform: uppercase; <br>        margin-bottom: 6px; <br>        letter-spacing: 0.05em; <br>    } <br><br>    .thinker-content p { <br>        color: #d1d5db; <br>        font-size: 0.85rem; <br>        line-height: 1.5; <br>    } <br></style> <br></head> <br><body> <br><div class="slide-container"> <br><div class="slide-overlay"></div> <br><div class="natgeo-border"></div> <br><div class="content-wrapper"> <br><!-- Header --> <br><header class="flex justify-between items-end border-b border-gray-700 pb-4 mb-4"> <br><div> <br><div class="flex items-center mb-2"> <br><span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-3">SECTION 05</span> <br><span class="text-yellow-500 text-sm font-bold tracking-widest uppercase">Age of Enlightenment</span> <br></div> <br><h1 class="text-3xl font-black title-font text-white"> <br>                    계몽주의와 혁명 <br>                </h1> <br></div> <br><p class="text-gray-400 text-sm italic font-serif hidden md:block"> <br>                "이성의 빛으로 구시대의 어둠을 몰아내다" <br>            </p> <br></header> <br><!-- Main Quote Area --> <br><div class="quote-container"> <br><div class="quote-mark start">“</div> <br><p class="quote-text"> <br>                모든 인간은 태어나면서<br/>자유롭고 평등하다 <br>            </p> <br><div class="quote-mark end">”</div> <br><p class="quote-source"> <br>                프랑스 인권 선언 (1789) 제1조 <br>            </p> <br></div> <br><!-- Thinkers & Ideas --> <br><div class="thinkers-grid"> <br><!-- John Locke --> <br><div class="thinker-card"> <br><div class="thinker-icon"><i class="fas fa-pen-nib"></i></div> <br><div class="thinker-content"> <br><h4>존 로크 (John Locke)</h4> <br><h5>천부인권 사상</h5> <br><p> <br>                        모든 인간은 생명, 자유, 재산에 대한 자연권을 가지며, 정부가 이를 침해하면 저항할 권리가 있다. <br>                    </p> <br></div> <br></div> <br><!-- Rousseau --> <br><div class="thinker-card"> <br><div class="thinker-icon"><i class="fas fa-users"></i></div> <br><div class="thinker-content"> <br><h4>장 자크 루소 (Rousseau)</h4> <br><h5>사회계약론</h5> <br><p> <br>                        "국가의 주권은 국민에게 있다." 개인의 자유 의지에 의한 사회 계약과 일반 의지의 중요성을 강조. <br>                    </p> <br></div> <br></div> <br><!-- Impact --> <br><div class="thinker-card"> <br><div class="thinker-icon"><i class="fas fa-flag"></i></div> <br><div class="thinker-content"> <br><h4>시민 혁명의 불꽃</h4> <br><h5>근대 민주주의의 탄생</h5> <br><p> <br>                        계몽사상은 미국 독립혁명과 프랑스 대혁명의 사상적 기반이 되었으며, 근대 시민 사회를 열었습니다. <br>                    </p> <br></div> <br></div> <br></div> <br></div> <br></div> <br></body> <br></html> <br><br><br>15._______________________________________________________________________________________________ <br><!DOCTYPE html> <br><br><html lang="ko"> <br><head> <br><meta charset="utf-8"/> <br><meta content="width=device-width, initial-scale=1.0" name="viewport"/> <br><title>산업혁명: 기계가 바꾼 세계</title> <br><link href="<a href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" target="_blank" class="ke-link">https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css</a>" rel="stylesheet"/> <br><link href="<a href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;900&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;900&family=Noto+Sans+KR:wght@300;400;500;700&display=swap</a>" rel="stylesheet"/> <br><link href="<a href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" target="_blank" class="ke-link">https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css</a>" rel="stylesheet"/> <br><style> <br>    body { <br>        font-family: 'Noto Sans KR', sans-serif; <br>        background-color: #111; <br>        color: #fff; <br>        margin: 0; <br>        padding: 0; <br>        overflow: hidden; <br>    } <br>    .slide-container { <br>        width: 1280px; <br>        height: 720px; <br>        position: relative; <br>        background-color: #0c0c0c; <br>        overflow: hidden; <br>        display: flex; <br>        flex-direction: column; <br>        padding: 0; <br>    } <br>    .natgeo-border { <br>        border: 6px solid #FFC200; <br>        position: absolute; <br>        top: 20px; <br>        left: 20px; <br>        right: 20px; <br>        bottom: 20px; <br>        pointer-events: none; <br>        z-index: 50; <br>    } <br>    .title-font { <br>        font-family: 'Noto Serif KR', serif; <br>    } <br>    .bg-image { <br>        position: absolute; <br>        top: 0; <br>        left: 0; <br>        width: 100%; <br>        height: 100%; <br>        object-fit: cover; <br>        opacity: 0.15; <br>        filter: grayscale(100%) contrast(1.2); <br>        z-index: 1; <br>    } <br>     <br>    /* Content Layout */ <br>    .content-wrapper { <br>        position: relative; <br>        z-index: 10; <br>        flex: 1; <br>        display: flex; <br>        flex-direction: column; <br>        padding: 60px 80px; <br>    } <br><br>    /* Header */ <br>    .header-section { <br>        margin-bottom: 30px; <br>        border-left: 4px solid #FFC200; <br>        padding-left: 20px; <br>    } <br><br>    /* Timeline Container */ <br>    .timeline-area { <br>        flex: 1; <br>        display: flex; <br>        flex-direction: column; <br>        justify-content: center; <br>        position: relative; <br>        margin-top: 10px; <br>    } <br><br>    .timeline-line { <br>        position: absolute; <br>        top: 35%; <br>        left: 40px; <br>        right: 40px; <br>        height: 2px; <br>        background-color: #333; <br>        z-index: 0; <br>    } <br>     <br>    .timeline-progress { <br>        position: absolute; <br>        top: 35%; <br>        left: 40px; <br>        width: 90%; <br>        height: 2px; <br>        background-color: #FFC200; <br>        z-index: 0; <br>        box-shadow: 0 0 10px rgba(255, 194, 0, 0.5); <br>    } <br><br>    .timeline-items { <br>        display: flex; <br>        justify-content: space-between; <br>        position: relative; <br>        z-index: 10; <br>    } <br><br>    .timeline-node { <br>        display: flex; <br>        flex-direction: column; <br>        align-items: center; <br>        width: 220px; <br>        position: relative; <br>    } <br><br>    .node-dot { <br>        width: 16px; <br>        height: 16px; <br>        background-color: #000; <br>        border: 3px solid #FFC200; <br>        border-radius: 50%; <br>        margin-bottom: 20px; <br>        position: absolute; <br>        top: 35%; <br>        transform: translateY(-50%); <br>        z-index: 20; <br>    } <br><br>    /* Top Content (Image & Date) */ <br>    .node-top { <br>        margin-bottom: 40px; /* Space for line */ <br>        display: flex; <br>        flex-direction: column; <br>        align-items: center; <br>        opacity: 0; <br>        transform: translateY(20px); <br>        animation: fadeInUp 0.6s forwards; <br>    } <br><br>    .node-image-frame { <br>        width: 100px; <br>        height: 100px; <br>        border-radius: 50%; <br>        overflow: hidden; <br>        border: 2px solid #444; <br>        margin-bottom: 10px; <br>        background-color: #222; <br>        transition: transform 0.3s ease, border-color 0.3s ease; <br>    } <br>     <br>    .timeline-node:hover .node-image-frame { <br>        transform: scale(1.1); <br>        border-color: #FFC200; <br>    } <br><br>    .node-image { <br>        width: 100%; <br>        height: 100%; <br>        object-fit: cover; <br>    } <br><br>    .node-date { <br>        font-size: 0.85rem; <br>        color: #FFC200; <br>        font-weight: 700; <br>        margin-bottom: 5px; <br>    } <br><br>    /* Bottom Content (Title & Desc) */ <br>    .node-bottom { <br>        margin-top: 30px; /* Space for line */ <br>        text-align: center; <br>        opacity: 0; <br>        transform: translateY(-20px); <br>        animation: fadeInDown 0.6s forwards; <br>    } <br><br>    .node-title { <br>        font-family: 'Noto Serif KR', serif; <br>        font-size: 1.1rem; <br>        font-weight: 700; <br>        color: #fff; <br>        margin-bottom: 8px; <br>    } <br><br>    .node-desc { <br>        font-size: 0.8rem; <br>        color: #9ca3af; <br>        line-height: 1.5; <br>        background: rgba(255, 255, 255, 0.05); <br>        padding: 10px; <br>        border-radius: 6px; <br>        width: 100%; <br>    } <br><br>    /* Bottom Info Boxes */ <br>    .bottom-info-container { <br>        display: flex; <br>        gap: 20px; <br>        margin-top: 30px; <br>        border-top: 1px solid #333; <br>        padding-top: 20px; <br>    } <br><br>    .info-box { <br>        flex: 1; <br>        background: rgba(20, 20, 20, 0.8); <br>        border: 1px solid #333; <br>        padding: 15px 20px; <br>        border-radius: 8px; <br>        display: flex; <br>        align-items: flex-start; <br>    } <br><br>    .info-icon { <br>        color: #FFC200; <br>        font-size: 1.5rem; <br>        margin-right: 15px; <br>        margin-top: 3px; <br>    } <br><br>    /* Animation Delays */ <br>    .timeline-node:nth-child(1) .node-top, .timeline-node:nth-child(1) .node-bottom { animation-delay: 0.1s; } <br>    .timeline-node:nth-child(2) .node-top, .timeline-node:nth-child(2) .node-bottom { animation-delay: 0.3s; } <br>    .timeline-node:nth-child(3) .node-top, .timeline-node:nth-child(3) .node-bottom { animation-delay: 0.5s; } <br>    .timeline-node:nth-child(4) .node-top, .timeline-node:nth-child(4) .node-bottom { animation-delay: 0.7s; } <br><br>    @keyframes fadeInUp { <br>        to { opacity: 1; transform: translateY(0); } <br>    } <br>    @keyframes fadeInDown { <br>        to { opacity: 1; transform: translateY(0); } <br>    } <br></style> <br></head> <br><body> <br><div class="slide-container"> <br><!-- Background Image: Industrial Revolution Texture --> <br><img alt="Industrial Background" class="bg-image" src="<a href="https://www.genspark.ai/image_placeholder.png" target="_blank" class="ke-link">https://www.genspark.ai/image_placeholder.png</a>"/> <br><div class="natgeo-border"></div> <br><div class="content-wrapper"> <br><!-- Header --> <br><header class="header-section"> <br><div class="flex items-center mb-2"> <br><span class="text-yellow-500 text-xs font-bold tracking-widest uppercase mr-3">Timeline</span> <br><span class="text-gray-400 text-xs tracking-wide">THE INDUSTRIAL REVOLUTION</span> <br></div> <br><h1 class="text-4xl font-black title-font text-white leading-tight"> <br>                산업혁명: 기계가 바꾼 세계 <br>            </h1> <br><p class="text-lg text-gray-300 font-light mt-2"> <br>                방적기에서 전기의 시대까지, 생산 방식의 혁신적 변화 <br>            </p> <br></header> <br><!-- Timeline --> <br><div class="timeline-area"> <br><div class="timeline-line"></div> <br><div class="timeline-progress"></div> <br><div class="timeline-items"> <br><!-- Node 1 --> <br><div class="timeline-node"> <br><div class="node-top"> <br><div class="node-image-frame"> <br><img alt="Spinning Jenny" class="node-image" src="<a href="https://www.genspark.ai/image_placeholder.png" target="_blank" class="ke-link">https://www.genspark.ai/image_placeholder.png</a>"/> <br></div> <br><span class="node-date">1760년대</span> <br></div> <br><div class="node-dot"></div> <br><div class="node-bottom"> <br><h3 class="node-title">방적기의 발명</h3> <br><p class="node-desc">제니 방적기 등의 발명으로<br/>직물 생산량의 획기적 증가.<br/>가내수공업에서 공장제로.</p> <br></div> <br></div> <br><!-- Node 2 --> <br><div class="timeline-node"> <br><div class="node-top"> <br><div class="node-image-frame"> <br><img alt="Steam Engine" class="node-image" src="<a href="https://www.genspark.ai/image_placeholder.png" target="_blank" class="ke-link">https://www.genspark.ai/image_placeholder.png</a>"/> <br></div> <br><span class="node-date">1770년대</span> <br></div> <br><div class="node-dot"></div> <br><div class="node-bottom"> <br><h3 class="node-title">증기기관 개량</h3> <br><p class="node-desc">제임스 와트의 증기기관.<br/>동력의 혁명적 전환으로<br/>대량 생산 체제의 기반 마련.</p> <br></div> <br></div> <br><!-- Node 3 --> <br><div class="timeline-node"> <br><div class="node-top"> <br><div class="node-image-frame"> <br><img alt="Steam Locomotive" class="node-image" src="<a href="https://www.genspark.ai/image_placeholder.png" target="_blank" class="ke-link">https://www.genspark.ai/image_placeholder.png</a>"/> <br></div> <br><span class="node-date">1830년대</span> <br></div> <br><div class="node-dot"></div> <br><div class="node-bottom"> <br><h3 class="node-title">철도와 운송 혁명</h3> <br><p class="node-desc">증기 기관차의 상용화.<br/>물류와 사람의 이동 속도 혁신.<br/>시장과 도시의 연결.</p> <br></div> <br></div> <br><!-- Node 4 --> <br><div class="timeline-node"> <br><div class="node-top"> <br><div class="node-image-frame"> <br><img alt="Electricity" class="node-image" src="<a href="https://www.genspark.ai/image_placeholder.png" target="_blank" class="ke-link">https://www.genspark.ai/image_placeholder.png</a>"/> <br></div> <br><span class="node-date">19세기 후반</span> <br></div> <br><div class="node-dot"></div> <br><div class="node-bottom"> <br><h3 class="node-title">2차 산업혁명</h3> <br><p class="node-desc">전기, 화학, 철강 산업 발전.<br/>전신의 발명으로 통신 혁명.<br/>현대 문명의 토대 완성.</p> <br></div> <br></div> <br></div> <br></div> <br><!-- Bottom Info --> <br><div class="bottom-info-container"> <br><div class="info-box"> <br><i class="fas fa-industry info-icon"></i> <br><div> <br><h4 class="text-white font-bold mb-1">사회적 변화</h4> <br><p class="text-gray-400 text-xs">농업 사회에서 산업 사회로 전환되며 도시화가 가속화되었고, 자본가와 노동계급이라는 새로운 계층 구조가 형성되었습니다.</p> <br></div> <br></div> <br><div class="info-box"> <br><i class="fas fa-globe-americas info-icon"></i> <br><div> <br><h4 class="text-white font-bold mb-1">글로벌 확산</h4> <br><p class="text-gray-400 text-xs">영국에서 시작된 산업화는 유럽, 미국, 일본 등으로 확산되며 제국주의 팽창과 세계 시장 통합을 촉진했습니다.</p> <br></div> <br></div> <br></div> <br></div> <br></div> <br></body> <br></html> <br><br>16._______________________________________________________________________________________________ <br><!DOCTYPE html> <br><br><html lang="ko"> <br><head> <br><meta charset="utf-8"/> <br><meta content="width=device-width, initial-scale=1.0" name="viewport"/> <br><title>현대사: 전쟁과 냉전, 그리고 탈식민</title> <br><link href="<a href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" target="_blank" class="ke-link">https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css</a>" rel="stylesheet"/> <br><link href="<a href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;900&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;900&family=Noto+Sans+KR:wght@300;400;500;700&display=swap</a>" rel="stylesheet"/> <br><link href="<a href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" target="_blank" class="ke-link">https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css</a>" rel="stylesheet"/> <br><style> <br>        body { <br>            font-family: 'Noto Sans KR', sans-serif; <br>            background-color: #111; <br>            color: #fff; <br>            margin: 0; <br>            padding: 0; <br>            overflow: hidden; <br>        } <br>        .slide-container { <br>            width: 1280px; <br>            height: 720px; <br>            position: relative; <br>            background-color: #0c0c0c; <br>            overflow: hidden; <br>            display: flex; <br>            flex-direction: column; <br>            padding: 60px 80px; <br>        } <br>        .natgeo-border { <br>            border: 6px solid #FFC200; <br>            position: absolute; <br>            top: 20px; <br>            left: 20px; <br>            right: 20px; <br>            bottom: 20px; <br>            pointer-events: none; <br>            z-index: 50; <br>        } <br>        .title-font { <br>            font-family: 'Noto Serif KR', serif; <br>        } <br>         <br>        /* Header Styling */ <br>        .header-section { <br>            margin-bottom: 40px; <br>            position: relative; <br>            z-index: 10; <br>        } <br>         <br>        /* Grid Layout */ <br>        .grid-container { <br>            display: grid; <br>            grid-template-columns: repeat(3, 1fr); <br>            gap: 24px; <br>            flex: 1; <br>            height: 100%; <br>        } <br><br>        /* Card Styling */ <br>        .card { <br>            background-color: #1a1a1a; <br>            border-radius: 8px; <br>            overflow: hidden; <br>            display: flex; <br>            flex-direction: column; <br>            border-bottom: 4px solid #333; <br>            transition: transform 0.3s ease, border-color 0.3s ease; <br>            height: 100%; <br>        } <br><br>        .card:hover { <br>            transform: translateY(-5px); <br>            border-bottom-color: #FFC200; <br>        } <br><br>        .card-image-wrapper { <br>            height: 200px; <br>            overflow: hidden; <br>            position: relative; <br>        } <br><br>        .card-image { <br>            width: 100%; <br>            height: 100%; <br>            object-fit: cover; <br>            transition: transform 0.5s ease; <br>        } <br><br>        .card:hover .card-image { <br>            transform: scale(1.05); <br>        } <br><br>        .card-content { <br>            padding: 24px; <br>            display: flex; <br>            flex-direction: column; <br>            flex: 1; <br>        } <br><br>        .card-icon { <br>            width: 48px; <br>            height: 48px; <br>            background-color: rgba(255, 194, 0, 0.1); <br>            border-radius: 50%; <br>            display: flex; <br>            align-items: center; <br>            justify-content: center; <br>            color: #FFC200; <br>            font-size: 1.25rem; <br>            margin-bottom: 16px; <br>        } <br><br>        .card-title { <br>            font-family: 'Noto Serif KR', serif; <br>            font-size: 1.25rem; <br>            font-weight: 700; <br>            color: #fff; <br>            margin-bottom: 12px; <br>        } <br><br>        .card-desc { <br>            color: #9ca3af; <br>            font-size: 0.9rem; <br>            line-height: 1.6; <br>            flex: 1; <br>        } <br><br>        /* Background texture */ <br>        .bg-texture { <br>            position: absolute; <br>            top: 0; <br>            left: 0; <br>            width: 100%; <br>            height: 100%; <br>            background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="<a href="http://www.w3.org/2000/svg" target="_blank" class="ke-link">http://www.w3.org/2000/svg</a>"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23222" fill-opacity="0.4"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'); <br>            z-index: 0; <br>            opacity: 0.5; <br>        } <br>    </style> <br></head> <br><body> <br><div class="slide-container"> <br><div class="natgeo-border"></div> <br><div class="bg-texture"></div> <br><!-- Header --> <br><header class="header-section"> <br><div class="flex items-center mb-3"> <br><span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-3">SECTION 07</span> <br><span class="text-yellow-500 text-sm font-bold tracking-widest uppercase">Modern History</span> <br></div> <br><div class="flex items-end justify-between border-b border-gray-800 pb-4"> <br><div> <br><h1 class="text-4xl font-black title-font text-white mb-1"> <br>                        현대사: 전쟁과 냉전 <br>                    </h1> <br><p class="text-xl text-gray-400 font-serif italic"> <br>                        격동과 재편의 20세기 <br>                    </p> <br></div> <br><p class="text-right text-gray-500 text-sm max-w-md hidden md:block"> <br>                    두 차례의 세계대전과 이념 대립 속에서도<br/>인류는 제국주의를 극복하고 새로운 국제 질서를 수립했습니다. <br>                </p> <br></div> <br></header> <br><!-- Cards Content --> <br><div class="grid-container relative z-10"> <br><!-- Card 1: World Wars --> <br><div class="card"> <br><div class="card-image-wrapper"> <br><img alt="World Wars" class="card-image" src="<a href="https://www.genspark.ai/image_placeholder.png" target="_blank" class="ke-link">https://www.genspark.ai/image_placeholder.png</a>"/> <br></div> <br><div class="card-content"> <br><div class="flex items-center justify-between"> <br><div class="card-icon"><i class="fas fa-person-military-rifle"></i></div> <br><span class="text-xs font-bold text-gray-500 uppercase">Conflict</span> <br></div> <br><h3 class="card-title">세계대전과 신질서</h3> <br><p class="card-desc"> <br>                        1·2차 세계대전은 총력전의 비극을 남겼으나, 이를 통해 유럽 중심의 패권이 무너지고 미국과 소련 중심의 양극 체제로 국제 질서가 재편되었습니다. <br>                    </p> <br></div> <br></div> <br><!-- Card 2: Cold War --> <br><div class="card"> <br><div class="card-image-wrapper"> <br><img alt="Cold War" class="card-image" src="<a href="https://www.genspark.ai/image_placeholder.png" target="_blank" class="ke-link">https://www.genspark.ai/image_placeholder.png</a>"/> <br></div> <br><div class="card-content"> <br><div class="flex items-center justify-between"> <br><div class="card-icon"><i class="fas fa-snowflake"></i></div> <br><span class="text-xs font-bold text-gray-500 uppercase">Geopolitics</span> <br></div> <br><h3 class="card-title">냉전과 이념 대립</h3> <br><p class="card-desc"> <br>                        자본주의와 공산주의 진영 간의 대립은 핵 억지력을 바탕으로 한 '차가운 전쟁'을 지속시켰으며, 이는 우주 경쟁과 제3세계 대리전으로 확장되었습니다. <br>                    </p> <br></div> <br></div> <br><!-- Card 3: Decolonization --> <br><div class="card"> <br><div class="card-image-wrapper"> <br><img alt="Decolonization" class="card-image" src="<a href="https://www.genspark.ai/image_placeholder.png" target="_blank" class="ke-link">https://www.genspark.ai/image_placeholder.png</a>"/> <br></div> <br><div class="card-content"> <br><div class="flex items-center justify-between"> <br><div class="card-icon"><i class="fas fa-flag"></i></div> <br><span class="text-xs font-bold text-gray-500 uppercase">Independence</span> <br></div> <br><h3 class="card-title">탈식민화와 독립</h3> <br><p class="card-desc"> <br>                        제국주의가 쇠퇴하면서 아시아와 아프리카의 수많은 국가들이 주권을 회복했고, 유엔(UN)을 중심으로 한 새로운 국제 협력 체계가 등장했습니다. <br>                    </p> <br></div> <br></div> <br></div> <br></div> <br></body> <br></html> <br><br><br>17._______________________________________________________________________________________________ <br><!DOCTYPE html> <br><br><html lang="ko"> <br><head> <br><meta charset="utf-8"/> <br><meta content="width=device-width, initial-scale=1.0" name="viewport"/> <br><title>동시대 세계: 연결성과 도전</title> <br><link href="<a href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" target="_blank" class="ke-link">https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css</a>" rel="stylesheet"/> <br><link href="<a href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;900&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;900&family=Noto+Sans+KR:wght@300;400;500;700&display=swap</a>" rel="stylesheet"/> <br><link href="<a href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" target="_blank" class="ke-link">https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css</a>" rel="stylesheet"/> <br><style> <br>        body { <br>            font-family: 'Noto Sans KR', sans-serif; <br>            background-color: #111; <br>            color: #fff; <br>            margin: 0; <br>            padding: 0; <br>            overflow: hidden; <br>        } <br>        .slide-container { <br>            width: 1280px; <br>            height: 720px; <br>            position: relative; <br>            background-color: #0c0c0c; <br>            overflow: hidden; <br>            display: flex; <br>            flex-direction: column; <br>            padding: 60px 80px; <br>        } <br>        .natgeo-border { <br>            border: 6px solid #FFC200; <br>            position: absolute; <br>            top: 20px; <br>            left: 20px; <br>            right: 20px; <br>            bottom: 20px; <br>            pointer-events: none; <br>            z-index: 50; <br>        } <br>        .title-font { <br>            font-family: 'Noto Serif KR', serif; <br>        } <br><br>        /* Background Pattern */ <br>        .bg-pattern { <br>            position: absolute; <br>            top: 0; <br>            left: 0; <br>            width: 100%; <br>            height: 100%; <br>            background-image: radial-gradient(circle, #333 1px, transparent 1px); <br>            background-size: 30px 30px; <br>            opacity: 0.2; <br>            z-index: 0; <br>        } <br><br>        /* Header Styling */ <br>        .header-section { <br>            margin-bottom: 50px; <br>            position: relative; <br>            z-index: 10; <br>        } <br><br>        /* Infographic Grid */ <br>        .info-grid { <br>            display: grid; <br>            grid-template-columns: repeat(3, 1fr); <br>            gap: 40px; <br>            flex: 1; <br>            position: relative; <br>            z-index: 10; <br>            align-items: stretch; <br>        } <br><br>        /* Info Card */ <br>        .info-card { <br>            background-color: #1a1a1a; <br>            border-radius: 12px; <br>            padding: 30px; <br>            position: relative; <br>            border: 1px solid #333; <br>            transition: all 0.3s ease; <br>            display: flex; <br>            flex-direction: column; <br>            align-items: center; <br>            text-align: center; <br>        } <br><br>        .info-card:hover { <br>            transform: translateY(-10px); <br>            border-color: #FFC200; <br>            background-color: #222; <br>            box-shadow: 0 10px 30px rgba(0,0,0,0.5); <br>        } <br><br>        .icon-circle { <br>            width: 100px; <br>            height: 100px; <br>            border-radius: 50%; <br>            display: flex; <br>            align-items: center; <br>            justify-content: center; <br>            margin-bottom: 25px; <br>            font-size: 2.5rem; <br>            position: relative; <br>            background-color: #0c0c0c; <br>            border: 2px solid; <br>        } <br><br>        .icon-circle::after { <br>            content: ''; <br>            position: absolute; <br>            top: -6px; <br>            left: -6px; <br>            right: -6px; <br>            bottom: -6px; <br>            border-radius: 50%; <br>            border: 2px dashed rgba(255,255,255,0.1); <br>            animation: spin 10s linear infinite; <br>        } <br><br>        @keyframes spin { <br>            100% { transform: rotate(360deg); } <br>        } <br><br>        /* Specific Colors */ <br>        .card-tech .icon-circle { border-color: #06b6d4; color: #06b6d4; } <br>        .card-issue .icon-circle { border-color: #ef4444; color: #ef4444; } <br>        .card-coop .icon-circle { border-color: #10b981; color: #10b981; } <br><br>        .card-tech:hover .icon-circle { background-color: rgba(6, 182, 212, 0.1); } <br>        .card-issue:hover .icon-circle { background-color: rgba(239, 68, 68, 0.1); } <br>        .card-coop:hover .icon-circle { background-color: rgba(16, 185, 129, 0.1); } <br><br>        .step-number { <br>            font-size: 0.9rem; <br>            font-weight: 900; <br>            letter-spacing: 0.1em; <br>            margin-bottom: 10px; <br>            opacity: 0.6; <br>        } <br><br>        .card-title { <br>            font-family: 'Noto Serif KR', serif; <br>            font-size: 1.4rem; <br>            font-weight: 700; <br>            margin-bottom: 15px; <br>            color: #fff; <br>        } <br><br>        .card-desc { <br>            font-size: 0.95rem; <br>            line-height: 1.6; <br>            color: #9ca3af; <br>        } <br><br>        /* Connecting Lines (Visual decoration only) */ <br>        .connector-line { <br>            position: absolute; <br>            top: 80px; /* Center of icon */ <br>            left: 0; <br>            width: 100%; <br>            height: 2px; <br>            background-color: #333; <br>            z-index: 0; <br>            display: none; /* Hidden for simple grid layout, or enable if needed */ <br>        } <br>    </style> <br></head> <br><body> <br><div class="slide-container"> <br><div class="natgeo-border"></div> <br><!-- Background Pattern --> <br><div class="bg-pattern" style="background-image: radial-gradient(#333 1px, transparent 1px); background-size: 20px 20px;"></div> <br><!-- Header --> <br><header class="header-section flex justify-between items-end border-b border-gray-800 pb-5"> <br><div> <br><div class="flex items-center mb-2"> <br><span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-3">SECTION 08</span> <br><span class="text-yellow-500 text-sm font-bold tracking-widest uppercase">Contemporary World</span> <br></div> <br><h1 class="text-4xl font-black title-font text-white mb-1"> <br>                    동시대 세계: 연결과 도전 <br>                </h1> <br><p class="text-xl text-gray-400 font-serif italic"> <br>                    초연결 사회 속, 인류가 마주한 공동의 과제 <br>                </p> <br></div> <br><div class="text-right hidden md:block"> <br><p class="text-sm text-gray-500 font-medium"> <br>                    21세기는 디지털 기술로 하나 된 세계이자,<br/> <br>                    국경 없는 위기에 함께 대응해야 하는 시대입니다. <br>                </p> <br></div> <br></header> <br><!-- Infographic Grid --> <br><div class="info-grid"> <br><!-- Card 1: Digital Innovation --> <br><div class="info-card card-tech"> <br><div class="step-number text-cyan-400">THEME 01</div> <br><div class="icon-circle"> <br><i class="fas fa-network-wired"></i> <br></div> <br><h3 class="card-title">디지털 혁신과 초연결</h3> <br><p class="card-desc"> <br>                    인터넷, 모바일, 인공지능(AI)의 발달로 정보의 즉각적 공유가 가능해졌으며,  <br>                    시간과 공간의 제약이 사라진 초연결 사회로 진입했습니다. <br>                </p> <br></div> <br><!-- Card 2: Global Issues --> <br><div class="info-card card-issue"> <br><div class="step-number text-red-400">THEME 02</div> <br><div class="icon-circle"> <br><i class="fas fa-temperature-high"></i> <br></div> <br><h3 class="card-title">범지구적 위기</h3> <br><p class="card-desc"> <br>                    기후 변화, 신종 감염병(팬데믹), 경제적 불평등 등 개별 국가의 노력만으로는 해결할 수 없는  <br>                    복합적인 위기가 인류의 생존을 위협하고 있습니다. <br>                </p> <br></div> <br><!-- Card 3: Cooperation --> <br><div class="info-card card-coop"> <br><div class="step-number text-emerald-400">THEME 03</div> <br><div class="icon-circle"> <br><i class="fas fa-hands-holding-circle"></i> <br></div> <br><h3 class="card-title">국제 협력과 거버넌스</h3> <br><p class="card-desc"> <br>                    UN의 지속가능발전목표(SDGs)와 같은 글로벌 거버넌스를 통해  <br>                    환경 보호와 인권, 평화를 위한 공동의 책임을 실천하고 있습니다. <br>                </p> <br></div> <br></div> <br></div> <br></body> <br></html> <br><br><br>18._______________________________________________________________________________________________ <br><!DOCTYPE html> <br><br><html lang="ko"> <br><head> <br><meta charset="utf-8"/> <br><meta content="width=device-width, initial-scale=1.0" name="viewport"/> <br><title>미래 전망: 선택의 갈림길</title> <br><link href="<a href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" target="_blank" class="ke-link">https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css</a>" rel="stylesheet"/> <br><link href="<a href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;900&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;900&family=Noto+Sans+KR:wght@300;400;500;700&display=swap</a>" rel="stylesheet"/> <br><link href="<a href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" target="_blank" class="ke-link">https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css</a>" rel="stylesheet"/> <br><style> <br>        body { <br>            font-family: 'Noto Sans KR', sans-serif; <br>            background-color: #111; <br>            color: #fff; <br>            margin: 0; <br>            padding: 0; <br>            overflow: hidden; <br>        } <br>        .slide-container { <br>            width: 1280px; <br>            height: 720px; <br>            position: relative; <br>            background-color: #0c0c0c; <br>            overflow: hidden; <br>            display: flex; <br>            flex-direction: column; <br>            padding: 60px 80px; <br>        } <br>        .natgeo-border { <br>            border: 6px solid #FFC200; <br>            position: absolute; <br>            top: 20px; <br>            left: 20px; <br>            right: 20px; <br>            bottom: 20px; <br>            pointer-events: none; <br>            z-index: 50; <br>        } <br>        .title-font { <br>            font-family: 'Noto Serif KR', serif; <br>        } <br>         <br>        /* Header Styling */ <br>        .header-section { <br>            margin-bottom: 40px; <br>            position: relative; <br>            z-index: 10; <br>        } <br>         <br>        /* Grid Layout */ <br>        .grid-container { <br>            display: grid; <br>            grid-template-columns: repeat(3, 1fr); <br>            gap: 24px; <br>            flex: 1; <br>            height: 100%; <br>        } <br><br>        /* Card Styling */ <br>        .card { <br>            background-color: #1a1a1a; <br>            border-radius: 8px; <br>            overflow: hidden; <br>            display: flex; <br>            flex-direction: column; <br>            border-bottom: 4px solid #333; <br>            transition: transform 0.3s ease, border-color 0.3s ease; <br>            height: 100%; <br>        } <br><br>        .card:hover { <br>            transform: translateY(-5px); <br>            border-bottom-color: #FFC200; <br>        } <br><br>        .card-image-wrapper { <br>            height: 200px; <br>            overflow: hidden; <br>            position: relative; <br>        } <br><br>        .card-image { <br>            width: 100%; <br>            height: 100%; <br>            object-fit: cover; <br>            transition: transform 0.5s ease; <br>        } <br><br>        .card:hover .card-image { <br>            transform: scale(1.05); <br>        } <br><br>        .card-content { <br>            padding: 24px; <br>            display: flex; <br>            flex-direction: column; <br>            flex: 1; <br>        } <br><br>        .card-icon { <br>            width: 48px; <br>            height: 48px; <br>            background-color: rgba(255, 194, 0, 0.1); <br>            border-radius: 50%; <br>            display: flex; <br>            align-items: center; <br>            justify-content: center; <br>            color: #FFC200; <br>            font-size: 1.25rem; <br>            margin-bottom: 16px; <br>        } <br><br>        .card-title { <br>            font-family: 'Noto Serif KR', serif; <br>            font-size: 1.25rem; <br>            font-weight: 700; <br>            color: #fff; <br>            margin-bottom: 12px; <br>        } <br><br>        .card-desc { <br>            color: #9ca3af; <br>            font-size: 0.9rem; <br>            line-height: 1.6; <br>            flex: 1; <br>        } <br><br>        /* Background texture */ <br>        .bg-texture { <br>            position: absolute; <br>            top: 0; <br>            left: 0; <br>            width: 100%; <br>            height: 100%; <br>            background-image: url('data:image/svg+xml,%3Csvg width="60" height="60" viewBox="0 0 60 60" xmlns="<a href="http://www.w3.org/2000/svg" target="_blank" class="ke-link">http://www.w3.org/2000/svg</a>"%3E%3Cg fill="none" fill-rule="evenodd"%3E%3Cg fill="%23222" fill-opacity="0.4"%3E%3Cpath d="M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z"/%3E%3C/g%3E%3C/g%3E%3C/svg%3E'); <br>            z-index: 0; <br>            opacity: 0.5; <br>        } <br>    </style> <br></head> <br><body> <br><div class="slide-container"> <br><div class="natgeo-border"></div> <br><div class="bg-texture"></div> <br><!-- Header --> <br><header class="header-section"> <br><div class="flex items-center mb-3"> <br><span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-3">SECTION 08</span> <br><span class="text-yellow-500 text-sm font-bold tracking-widest uppercase">Future & Beyond</span> <br></div> <br><div class="flex items-end justify-between border-b border-gray-800 pb-4"> <br><div> <br><h1 class="text-4xl font-black title-font text-white mb-1"> <br>                        미래 전망 <br>                    </h1> <br><p class="text-xl text-gray-400 font-serif italic"> <br>                        선택의 갈림길 <br>                    </p> <br></div> <br><p class="text-right text-gray-500 text-sm max-w-md hidden md:block"> <br>                    기술적 특이점과 기후 위기 속에서, 인류는 지속 가능한<br/>생존과 번영을 위한 중대한 선택의 기로에 서 있습니다. <br>                </p> <br></div> <br></header> <br><!-- Cards Content --> <br><div class="grid-container relative z-10"> <br><!-- Card 1: AI & Technology --> <br><div class="card"> <br><div class="card-image-wrapper"> <br><img alt="AI and Robotics Future" class="card-image" src="<a href="https://page.gensparksite.com/slides_images/ceb4782ff1b300e485830597555f4bcd.webp" target="_blank" class="ke-link">https://page.gensparksite.com/slides_images/ceb4782ff1b300e485830597555f4bcd.webp</a>"/> <br></div> <br><div class="card-content"> <br><div class="flex items-center justify-between"> <br><div class="card-icon"><i class="fas fa-robot"></i></div> <br><span class="text-xs font-bold text-gray-500 uppercase">AI & Tech</span> <br></div> <br><h3 class="card-title">AI와 기술적 특이점</h3> <br><p class="card-desc"> <br>                        인공지능과 자동화 기술의 비약적 발전은 생산성을 극대화하지만, 동시에 노동의 미래와 AI 윤리에 대한 새로운 사회적 합의를 요구하고 있습니다. <br>                    </p> <br></div> <br></div> <br><!-- Card 2: Biotechnology --> <br><div class="card"> <br><div class="card-image-wrapper"> <br><img alt="Advanced Biotechnology" class="card-image" src="<a href="https://page.gensparksite.com/slides_images/cfdeb88172b326a58aba0d7ebeec20b0.webp" target="_blank" class="ke-link">https://page.gensparksite.com/slides_images/cfdeb88172b326a58aba0d7ebeec20b0.webp</a>"/> <br></div> <br><div class="card-content"> <br><div class="flex items-center justify-between"> <br><div class="card-icon"><i class="fas fa-dna"></i></div> <br><span class="text-xs font-bold text-gray-500 uppercase">Bio Tech</span> <br></div> <br><h3 class="card-title">생명공학의 진보</h3> <br><p class="card-desc"> <br>                        유전자 편집(CRISPR)과 수명 연장 기술은 질병 정복의 희망을 제시하지만, '인간이란 무엇인가'에 대한 근본적인 철학적 질문을 던집니다. <br>                    </p> <br></div> <br></div> <br><!-- Card 3: Sustainability --> <br><div class="card"> <br><div class="card-image-wrapper"> <br><img alt="Sustainable Green City" class="card-image" src="<a href="https://page.gensparksite.com/slides_images/98c84290ab877b6582db97c8de4df0b3.webp" target="_blank" class="ke-link">https://page.gensparksite.com/slides_images/98c84290ab877b6582db97c8de4df0b3.webp</a>"/> <br></div> <br><div class="card-content"> <br><div class="flex items-center justify-between"> <br><div class="card-icon"><i class="fas fa-leaf"></i></div> <br><span class="text-xs font-bold text-gray-500 uppercase">Sustainability</span> <br></div> <br><h3 class="card-title">지속가능한 지구</h3> <br><p class="card-desc"> <br>                        기후 변화와 자원 고갈 위기에 맞서, 신재생 에너지로의 전환과 탄소 중립 실현은 인류 생존을 위한 선택이 아닌 필수 조건이 되었습니다. <br>                    </p> <br></div> <br></div> <br></div> <br></div> <br></body> <br></html> <br><br>19._______________________________________________________________________________________________ <br><!DOCTYPE html> <br><br><html lang="ko"> <br><head> <br><meta charset="utf-8"/> <br><meta content="width=device-width, initial-scale=1.0" name="viewport"/> <br><title>결론 및 토의</title> <br><link href="<a href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" target="_blank" class="ke-link">https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css</a>" rel="stylesheet"/> <br><link href="<a href="https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;900&family=Noto+Sans+KR:wght@300;400;500;700&display=swap" target="_blank" class="ke-link">https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;700;900&family=Noto+Sans+KR:wght@300;400;500;700&display=swap</a>" rel="stylesheet"/> <br><link href="<a href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css" target="_blank" class="ke-link">https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.4.0/css/all.min.css</a>" rel="stylesheet"/> <br><style> <br>        body { <br>            font-family: 'Noto Sans KR', sans-serif; <br>            background-color: #111; <br>            color: #fff; <br>            margin: 0; <br>            padding: 0; <br>            overflow: hidden; <br>        } <br>        .slide-container { <br>            width: 1280px; <br>            height: 720px; <br>            position: relative; <br>            background-color: #0c0c0c; <br>            overflow: hidden; <br>            display: flex; <br>            flex-direction: row; <br>        } <br>        .natgeo-border { <br>            border: 6px solid #FFC200; <br>            position: absolute; <br>            top: 20px; <br>            left: 20px; <br>            right: 20px; <br>            bottom: 20px; <br>            pointer-events: none; <br>            z-index: 50; <br>        } <br>        .title-font { <br>            font-family: 'Noto Serif KR', serif; <br>        } <br><br>        /* Left Panel: Recap Timeline */ <br>        .left-panel { <br>            width: 40%; <br>            background-color: #161616; <br>            padding: 60px 40px 60px 60px; <br>            display: flex; <br>            flex-direction: column; <br>            border-right: 1px solid #333; <br>            z-index: 10; <br>        } <br><br>        .summary-header { <br>            margin-bottom: 40px; <br>            border-bottom: 2px solid #FFC200; <br>            padding-bottom: 20px; <br>        } <br><br>        .timeline-list { <br>            flex: 1; <br>            display: flex; <br>            flex-direction: column; <br>            justify-content: space-between; <br>            position: relative; <br>        } <br><br>        .timeline-line { <br>            position: absolute; <br>            left: 24px; <br>            top: 10px; <br>            bottom: 10px; <br>            width: 2px; <br>            background-color: #333; <br>            z-index: 0; <br>        } <br><br>        .timeline-item { <br>            display: flex; <br>            align-items: center; <br>            position: relative; <br>            z-index: 10; <br>        } <br><br>        .timeline-icon { <br>            width: 50px; <br>            height: 50px; <br>            background-color: #222; <br>            border: 2px solid #FFC200; <br>            border-radius: 50%; <br>            display: flex; <br>            align-items: center; <br>            justify-content: center; <br>            color: #FFC200; <br>            font-size: 1.2rem; <br>            margin-right: 20px; <br>            flex-shrink: 0; <br>        } <br><br>        .timeline-content h4 { <br>            font-size: 1.1rem; <br>            font-weight: 700; <br>            color: #fff; <br>            margin-bottom: 2px; <br>        } <br><br>        .timeline-content p { <br>            font-size: 0.85rem; <br>            color: #9ca3af; <br>        } <br><br>        /* Right Panel: Discussion & CTA */ <br>        .right-panel { <br>            width: 60%; <br>            padding: 70px 80px 70px 60px; <br>            display: flex; <br>            flex-direction: column; <br>            background-image: url("<a href="https://www.genspark.ai/image_placeholder.png" target="_blank" class="ke-link">https://www.genspark.ai/image_placeholder.png</a>"); /* Placeholder for subtle texture/starfield */ <br>            background-size: cover; <br>            position: relative; <br>        } <br>         <br>        .right-overlay { <br>            position: absolute; <br>            top: 0; <br>            left: 0; <br>            width: 100%; <br>            height: 100%; <br>            background: rgba(12, 12, 12, 0.9); <br>            z-index: 0; <br>        } <br><br>        .right-content { <br>            position: relative; <br>            z-index: 10; <br>            height: 100%; <br>            display: flex; <br>            flex-direction: column; <br>            justify-content: center; <br>        } <br><br>        .message-box { <br>            margin-bottom: 50px; <br>        } <br><br>        .message-title { <br>            color: #FFC200; <br>            font-size: 0.9rem; <br>            font-weight: 700; <br>            text-transform: uppercase; <br>            letter-spacing: 0.1em; <br>            margin-bottom: 15px; <br>            display: flex; <br>            align-items: center; <br>        } <br>         <br>        .message-title::before { <br>            content: ''; <br>            display: block; <br>            width: 30px; <br>            height: 2px; <br>            background-color: #FFC200; <br>            margin-right: 10px; <br>        } <br><br>        .main-message { <br>            font-family: 'Noto Serif KR', serif; <br>            font-size: 2.5rem; <br>            font-weight: 700; <br>            line-height: 1.3; <br>            color: #fff; <br>        } <br><br>        .discussion-card { <br>            background: rgba(255, 255, 255, 0.05); <br>            border: 1px solid rgba(255, 255, 255, 0.1); <br>            border-left: 4px solid #FFC200; <br>            padding: 30px; <br>            border-radius: 0 8px 8px 0; <br>            margin-bottom: auto; <br>        } <br><br>        .discussion-q { <br>            font-size: 1.4rem; <br>            font-weight: 500; <br>            color: #e5e7eb; <br>            margin-bottom: 10px; <br>            font-family: 'Noto Serif KR', serif; <br>            font-style: italic; <br>        } <br><br>        .cta-section { <br>            border-top: 1px solid #333; <br>            padding-top: 25px; <br>            display: flex; <br>            justify-content: space-between; <br>            align-items: center; <br>        } <br><br>        .qr-placeholder { <br>            width: 80px; <br>            height: 80px; <br>            background-color: #fff; <br>            padding: 5px; <br>            border-radius: 4px; <br>        } <br>         <br>        .qr-placeholder img { <br>            width: 100%; <br>            height: 100%; <br>            opacity: 0.8; <br>        } <br>    </style> <br></head> <br><body> <br><div class="slide-container"> <br><div class="natgeo-border"></div> <br><!-- Left Panel: Summary Timeline --> <br><div class="left-panel"> <br><header class="summary-header"> <br><div class="flex items-center mb-2"> <br><span class="bg-yellow-500 text-black text-xs font-bold px-2 py-1 rounded mr-3">RECAP</span> <br><span class="text-yellow-500 text-xs font-bold tracking-widest uppercase">The Journey</span> <br></div> <br><h1 class="text-3xl font-black title-font text-white leading-tight"> <br>                    여정의 발자취 <br>                </h1> <br></header> <br><div class="timeline-list"> <br><div class="timeline-line"></div> <br><!-- Item 1 --> <br><div class="timeline-item"> <br><div class="timeline-icon"><i class="fas fa-fire"></i></div> <br><div class="timeline-content"> <br><h4>생존과 진화</h4> <br><p>도구의 사용과 불의 발견으로<br/>자연을 극복하기 시작했습니다.</p> <br></div> <br></div> <br><!-- Item 2 --> <br><div class="timeline-item"> <br><div class="timeline-icon"><i class="fas fa-landmark"></i></div> <br><div class="timeline-content"> <br><h4>문명의 탄생</h4> <br><p>농경과 정착을 통해<br/>도시와 국가, 문자를 창조했습니다.</p> <br></div> <br></div> <br><!-- Item 3 --> <br><div class="timeline-item"> <br><div class="timeline-icon"><i class="fas fa-globe"></i></div> <br><div class="timeline-content"> <br><h4>연결과 확장</h4> <br><p>바다를 건너 세계를 연결하고<br/>이성과 과학으로 도약했습니다.</p> <br></div> <br></div> <br><!-- Item 4 --> <br><div class="timeline-item"> <br><div class="timeline-icon"><i class="fas fa-rocket"></i></div> <br><div class="timeline-content"> <br><h4>혁신과 미래</h4> <br><p>산업화와 디지털 혁명을 넘어<br/>새로운 우주 시대를 준비합니다.</p> <br></div> <br></div> <br></div> <br></div> <br><!-- Right Panel: Discussion & Conclusion --> <br><div class="right-panel"> <br><div class="right-overlay"></div> <br><div class="right-content"> <br><!-- Core Message --> <br><div class="message-box"> <br><div class="message-title">Conclusion</div> <br><p class="main-message"> <br>                        "역사는 과거의 단순한 기록이 아니라,<br/> <br><span class="text-yellow-500">미래를 비추는 거울</span>입니다." <br>                    </p> <br><p class="text-gray-400 mt-4 text-sm leading-relaxed max-w-lg"> <br>                        우리는 끊임없이 변화하고 적응해 온 선조들의 유산 위에 서 있습니다. 이제 역사의 바통은 우리에게 넘어왔습니다. <br>                    </p> <br></div> <br><!-- Discussion Question --> <br><div class="discussion-card"> <br><div class="flex items-center mb-3 text-yellow-500"> <br><i class="fas fa-comments text-xl mr-2"></i> <br><span class="text-xs font-bold uppercase tracking-wider">Discussion</span> <br></div> <br><p class="discussion-q"> <br>                        "우리는 후대에게<br/>어떤 유산을 남길 것인가?" <br>                    </p> <br><p class="text-gray-400 text-sm mt-2"> <br>                        지속 가능성, 기술 윤리, 평화 공존에 대한 여러분의 생각을 나눠봅시다. <br>                    </p> <br></div> <br><!-- CTA / Footer --> <br><div class="cta-section"> <br><div> <br><h4 class="text-white font-bold mb-1">Q&A Session</h4> <br><p class="text-gray-500 text-xs">발표 내용에 대해 자유롭게 질문해 주세요.</p> <br><div class="mt-2 flex space-x-4 text-gray-400 text-xs"> <br><span><i class="fas fa-book mr-1"></i> 참고문헌 목록</span> <br><span><i class="fas fa-link mr-1"></i> 추가 자료</span> <br></div> <br></div> <br><!-- Decorative QR Code Placeholder --> <br><div class="flex items-center"> <br><div class="text-right mr-3"> <br><p class="text-yellow-500 text-xs font-bold">SCAN ME</p> <br><p class="text-gray-500 text-[10px]">자료 다운로드</p> <br></div> <br><div class="qr-placeholder flex items-center justify-center"> <br><i class="fas fa-qrcode text-black text-4xl"></i> <br></div> <br></div> <br></div> <br></div> <br></div> <br></div> <br></body> <br></html> </p>
<!-- -->
]]>
카페 게시글
Android
인류 역사의 위대한 여정2 - html
은원명
추천 0
조회 95
25.12.22 14:50
댓글 0
다음검색
