<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INNOSTAGE</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
font-family:Arial,sans-serif;
color:#111;
background:#fff;
}
a{
text-decoration:none;
color:inherit;
}
ul{
list-style:none;
}
/* header */
header{
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
z-index:1000;
background:rgba(255,255,255,.92);
backdrop-filter:blur(10px);
border-bottom:1px solid #eee;
}
.header_inner{
max-width:1200px;
height:80px;
margin:0 auto;
padding:0 30px;
display:flex;
align-items:center;
justify-content:space-between;
}
.logo{
font-size:28px;
font-weight:bold;
color:#00b889;
}
.nav{
display:flex;
gap:40px;
}
.nav > li{
position:relative;
line-height:80px;
font-weight:bold;
}
.sub_menu{
position:absolute;
top:80px;
left:50%;
transform:translateX(-50%);
width:190px;
background:#fff;
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,.12);
padding:12px 0;
opacity:0;
visibility:hidden;
transition:.3s;
}
.nav > li:hover .sub_menu{
opacity:1;
visibility:visible;
}
.sub_menu li a{
display:block;
padding:12px 20px;
font-size:14px;
font-weight:normal;
}
.sub_menu li a:hover{
color:#00b889;
}
/* hamburger */
.hamburger{
width:40px;
height:40px;
border:none;
background:none;
cursor:pointer;
display:none;
flex-direction:column;
justify-content:center;
gap:6px;
}
.hamburger span{
width:28px;
height:3px;
background:#111;
border-radius:10px;
transition:.3s;
}
.hamburger.active span:nth-child(1){
transform:translateY(9px) rotate(45deg);
}
.hamburger.active span:nth-child(2){
opacity:0;
}
.hamburger.active span:nth-child(3){
transform:translateY(-9px) rotate(-45deg);
}
/* hero */
.hero{
position:relative;
height:100vh;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:#fff;
}
.hero video{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-2;
}
.hero::after{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,.45);
z-index:-1;
}
.hero h1{
font-size:72px;
margin-bottom:20px;
}
.hero p{
font-size:24px;
line-height:1.6;
}
/* common */
section{
padding:120px 30px;
}
.inner{
max-width:1200px;
margin:0 auto;
}
.section_title{
margin-bottom:70px;
}
.section_title h2{
font-size:28px;
font-weight:800;
display:flex;
align-items:center;
gap:8px;
}
.section_title h2::after{
content:"";
width:8px;
height:8px;
background:#5acb9b;
border-radius:50%;
display:block;
margin-top:10px;
}
.section_title p{
margin-top:18px;
font-size:18px;
color:#555;
}
/* first section */
.platform_grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:34px;
}
.platform_card{
position:relative;
height:360px;
background:#f7f7f7;
border-radius:20px;
padding:42px 40px;
overflow:hidden;
transition:.35s;
}
.platform_card:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,.08);
}
.platform_card h3{
font-size:42px;
font-weight:500;
margin-bottom:18px;
}
.platform_card p{
font-size:17px;
color:#555;
}
.platform_card:first-child h3,
.platform_card:first-child p{
color:#5acb9b;
}
.arrow_btn{
position:absolute;
left:40px;
top:145px;
width:38px;
height:38px;
border-radius:50%;
background:#111;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
}
.platform_card:first-child .arrow_btn{
background:#5acb9b;
}
.card_img{
position:absolute;
right:35px;
bottom:35px;
width:210px;
height:130px;
display:flex;
align-items:center;
justify-content:center;
font-size:90px;
}
/* performance */
.performance_section{
background:#00b889;
color:#fff;
padding:130px 30px;
}
.performance_wrap{
display:grid;
grid-template-columns:340px 1fr;
gap:120px;
}
.performance_title h2{
font-size:28px;
display:flex;
gap:8px;
}
.performance_title h2::after{
content:"";
width:7px;
height:7px;
background:#fff;
border-radius:50%;
margin-top:20px;
}
.performance_title p{
margin-top:22px;
font-size:18px;
line-height:1.7;
}
.performance_grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:80px 60px;
}
.performance_item{
border-top:1px solid rgba(255,255,255,.45);
padding-top:22px;
}
.performance_item .label{
font-size:17px;
margin-bottom:30px;
}
.performance_item .label::before{
content:"▣";
margin-right:10px;
font-size:13px;
}
.performance_item strong{
font-size:88px;
font-weight:500;
line-height:1;
}
.performance_item span{
font-size:18px;
margin-left:8px;
}
/* collaboration */
.collaboration_wrap{
display:grid;
grid-template-columns:1.05fr 1fr;
gap:36px;
align-items:stretch;
}
.collaboration_visual{
min-height:390px;
border-radius:20px;
overflow:hidden;
}
.collaboration_visual img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}
.collaboration_list{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:0 36px;
}
.collaboration_item{
min-height:190px;
padding:35px 28px;
border-bottom:1px solid #ddd;
}
.collaboration_item.active{
background:#5acb9b;
color:#fff;
border-radius:20px;
border-bottom:none;
}
.collaboration_item h3{
font-size:20px;
margin-bottom:28px;
}
.collaboration_item p{
font-size:18px;
line-height:1.6;
color:#555;
}
.collaboration_item.active p{
color:#fff;
}
.collaboration_item .type{
display:block;
margin-top:55px;
font-size:15px;
color:#555;
}
.collaboration_item.active .type{
color:#fff;
}
/* portfolio */
.title{
margin-bottom:55px;
}
.title span{
color:#00b889;
font-weight:bold;
}
.title h2{
font-size:42px;
margin-top:15px;
line-height:1.3;
}
.portfolio_grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}
.portfolio_card{
background:#f7f9f8;
padding:30px;
border-radius:22px;
}
.tag{
display:inline-block;
padding:6px 12px;
background:#e7f7ef;
color:#00b889;
border-radius:20px;
font-size:13px;
margin-bottom:18px;
}
/* apply */
.grid3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}
.card{
padding:40px;
background:#f5f7f8;
border-radius:24px;
transition:.3s;
}
.card:hover{
background:#00b889;
color:#fff;
transform:translateY(-8px);
}
.card strong{
display:block;
font-size:26px;
margin-bottom:15px;
}
.dark{
background:#111;
color:#fff;
}
/* cta */
.cta{
background:#00b889;
color:#fff;
text-align:center;
}
.cta h2{
font-size:46px;
margin-bottom:30px;
}
.cta a{
display:inline-block;
padding:18px 40px;
background:#fff;
color:#00b889;
border-radius:50px;
font-weight:bold;
}
/* footer */
footer{
padding:50px 30px;
background:#111;
color:#aaa;
}
footer h2{
color:#fff;
margin-bottom:20px;
}
/* mobile */
@media(max-width:900px){
.hamburger{
display:flex;
z-index:1001;
}
.nav{
position:fixed;
top:80px;
right:-100%;
width:280px;
height:calc(100vh - 80px);
background:#fff;
flex-direction:column;
gap:0;
padding:30px 20px;
transition:.4s;
box-shadow:-10px 0 30px rgba(0,0,0,.08);
overflow-y:auto;
}
.nav.active{
right:0;
}
.nav > li{
width:100%;
line-height:1.4;
margin-bottom:20px;
}
.nav > li > a{
display:block;
font-size:20px;
padding:15px 0;
}
.sub_menu{
position:static;
transform:none;
opacity:1;
visibility:visible;
width:100%;
box-shadow:none;
background:#f5f7f8;
margin-top:5px;
border-radius:12px;
padding:10px 0;
}
.hero h1{
font-size:44px;
}
.hero p{
font-size:18px;
}
section{
padding:80px 20px;
}
.platform_grid,
.performance_wrap,
.performance_grid,
.collaboration_wrap,
.collaboration_list,
.portfolio_grid,
.grid3{
grid-template-columns:1fr;
}
.platform_card{
height:320px;
}
.platform_card h3{
font-size:36px;
}
.card_img{
width:160px;
font-size:75px;
}
.performance_wrap{
gap:60px;
}
.performance_item strong{
font-size:64px;
}
.title h2,
.cta h2{
font-size:32px;
}
}
</style>
</head>
<body>
<header>
<div class="header_inner">
<a href="#" class="logo">INNOSTAGE</a>
<button class="hamburger" id="hamburger">
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav" id="nav">
<li>
<a href="#innostage">INNOSTAGE</a>
<ul class="sub_menu">
<li><a href="#">이노스테이지 소개</a></li>
<li><a href="#">지원 활동</a></li>
</ul>
</li>
<li>
<a href="#portfolio">Portfolio</a>
<ul class="sub_menu">
<li><a href="#">이노스테이지 기업</a></li>
<li><a href="#">기업 탐색하기</a></li>
</ul>
</li>
<li>
<a href="#apply">Apply</a>
<ul class="sub_menu">
<li><a href="#">지원 프로그램</a></li>
<li><a href="#">협업 제안</a></li>
</ul>
</li>
<li>
<a href="#news">News</a>
</li>
</ul>
</div>
</header>
<section class="hero">
<video autoplay muted loop playsinline>
<source src="https://www.kyobolifeinnostage.co.kr/wp-content/themes/innostage/assets/video/video_main.mp4" type="video/mp4">
</video>
<div>
<h1>INNOSTAGE</h1>
<p>
The stage for your growth<br>
교보생명과 스타트업이 함께 미래를 만들어갑니다
</p>
</div>
</section>
<section id="innostage">
<div class="inner">
<div class="section_title">
<h2>INNOSTAGE</h2>
<p>육성과 투자로 빠른 성장을 지원합니다.</p>
</div>
<div class="platform_grid">
<a href="#" class="platform_card">
<h3>Acceleration</h3>
<p>교보생명 액셀러레이션 프로그램</p>
<span class="arrow_btn"></span>
<div class="card_img"></div>
</a>
<a href="#" class="platform_card">
<h3>Investment</h3>
<p>전략적 목적에 따른 직·간접 투자</p>
<span class="arrow_btn"></span>
<div class="card_img"></div>
</a>
<a href="#" class="platform_card">
<h3>Portfolio</h3>
<p>육성 및 투자 기업 소개</p>
<span class="arrow_btn"></span>
<div class="card_img"></div>
</a>
</div>
</div>
</section>
<section class="performance_section">
<div class="inner">
<div class="performance_wrap">
<div class="performance_title">
<h2>Performance</h2>
<p>
뛰어난 기술력과 성장 잠재력을<br>
갖춘 스타트업과 함께 합니다.
</p>
</div>
<div class="performance_grid">
<div class="performance_item">
<p class="label">발굴 기업 수</p>
<strong>2,192</strong><span>개 사</span>
</div>
<div class="performance_item">
<p class="label">누적 육성 기업 수</p>
<strong>108</strong><span>개 사</span>
</div>
<div class="performance_item">
<p class="label">누적 협업 건 수</p>
<strong>215</strong><span>건 수</span>
</div>
<div class="performance_item">
<p class="label">누적 투자 금액</p>
<strong>1,052</strong><span>억 원</span>
</div>
</div>
</div>
</div>
</section>
<section class="collaboration_section">
<div class="inner">
<div class="section_title">
<h2>Collaboration</h2>
<p>교보생명과 스타트업 간의 우수 협업 사례를 소개합니다.</p>
</div>
<div class="collaboration_wrap">
<div class="collaboration_visual">
<img src="https://www.kyobolifeinnostage.co.kr/wp-content/themes/innostage/assets/images/main/img_view04.png" alt="">
</div>
<div class="collaboration_list">
<div class="collaboration_item active">
<h3>째깍악어</h3>
<p>
아이 돌봄 및 선생님 매칭 플랫폼
</p>
<span class="type">육성 · 투자</span>
</div>
<div class="collaboration_item">
<h3>그린리본</h3>
<p>
AI 기반 보험금 청구 자동화 서비스
</p>
<span class="type">육성 · 투자</span>
</div>
<div class="collaboration_item">
<h3>프렌트립</h3>
<p>
취미 여가 플랫폼
</p>
<span class="type">육성 · 투자</span>
</div>
<div class="collaboration_item">
<h3>로민</h3>
<p>
문서 업무 자동화를 돕는 인공지능
</p>
<span class="type">육성</span>
</div>
</div>
</div>
</div>
</section>
<section id="portfolio">
<div class="inner">
<div class="title">
<span>Portfolio</span>
<h2>
이노스테이지와 함께 성장한<br>
기업을 소개합니다.
</h2>
</div>
<div class="portfolio_grid">
<div class="portfolio_card">
<span class="tag">육성 / 투자</span>
<h3>이노스테이지 기업</h3>
<p>육성 및 투자 기업을 소개합니다.</p>
</div>
<div class="portfolio_card">
<span class="tag">탐색</span>
<h3>기업 탐색하기</h3>
<p>다양한 분야의 스타트업을 확인할 수 있습니다.</p>
</div>
<div class="portfolio_card">
<span class="tag">AI</span>
<h3>로민</h3>
<p>문서 업무 자동화를 돕는 인공지능 기업</p>
</div>
<div class="portfolio_card">
<span class="tag">Healthcare</span>
<h3>닥터다이어리</h3>
<p>일상 건강관리 플랫폼</p>
</div>
</div>
</div>
</section>
<section id="apply" class="dark">
<div class="inner">
<div class="title">
<span>Apply</span>
<h2>
스타트업의 도전을 위한<br>
지원 프로그램과 협업 제안
</h2>
</div>
<div class="grid3">
<div class="card">
<strong>지원 프로그램</strong>
<p>성장 가능성 있는 스타트업을 위한 프로그램을 운영합니다.</p>
</div>
<div class="card">
<strong>협업 제안</strong>
<p>교보생명과 함께 새로운 비즈니스 협업을 제안할 수 있습니다.</p>
</div>
<div class="card">
<strong>Open Innovation</strong>
<p>다양한 분야의 스타트업과 협업을 기다립니다.</p>
</div>
</div>
</div>
</section>
<section id="news">
<div class="inner">
<div class="title">
<span>News</span>
<h2>
INNOSTAGE의<br>
새로운 소식을 전합니다.
</h2>
</div>
<div class="grid3">
<div class="card">
<strong>공지사항</strong>
<p>프로그램 모집 및 주요 공지를 확인할 수 있습니다.</p>
</div>
<div class="card">
<strong>이벤트</strong>
<p>스타트업과 함께하는 다양한 행사를 소개합니다.</p>
</div>
<div class="card">
<strong>소식</strong>
<p>협업 사례와 성장 스토리를 전달합니다.</p>
</div>
</div>
</div>
</section>
<section class="cta">
<div class="inner">
<h2>
교보생명 이노스테이지는<br>
다양한 협업을 기다립니다.
</h2>
<a href="#">협업 제안하기</a>
</div>
</section>
<footer>
<div class="inner">
<h2>INNOSTAGE</h2>
<p>서울시 종로구 종로 1 교보생명보험주식회사</p>
<p>
Copyright KYOBO LIFE INSURANCE CO.
LTD. All Rights Reserved.
</p>
</div>
</footer>
<script>
const hamburger = document.getElementById("hamburger");
const nav = document.getElementById("nav");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
nav.classList.toggle("active");
});
</script>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>INNOSTAGE</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
html{
scroll-behavior:smooth;
}
body{
font-family:Arial,sans-serif;
color:#111;
background:#fff;
}
a{
text-decoration:none;
color:inherit;
}
ul{
list-style:none;
}
/* header */
header{
position:fixed;
top:0;
left:0;
width:100%;
height:80px;
z-index:1000;
background:rgba(255,255,255,.92);
backdrop-filter:blur(10px);
border-bottom:1px solid #eee;
}
.header_inner{
max-width:1200px;
height:80px;
margin:0 auto;
padding:0 30px;
display:flex;
align-items:center;
justify-content:space-between;
}
.logo{
font-size:28px;
font-weight:bold;
color:#00b889;
}
.nav{
display:flex;
gap:40px;
}
.nav > li{
position:relative;
line-height:80px;
font-weight:bold;
}
.sub_menu{
position:absolute;
top:80px;
left:50%;
transform:translateX(-50%);
width:190px;
background:#fff;
border-radius:14px;
box-shadow:0 10px 30px rgba(0,0,0,.12);
padding:12px 0;
opacity:0;
visibility:hidden;
transition:.3s;
}
.nav > li:hover .sub_menu{
opacity:1;
visibility:visible;
}
.sub_menu li a{
display:block;
padding:12px 20px;
font-size:14px;
font-weight:normal;
}
.sub_menu li a:hover{
color:#00b889;
}
/* hamburger */
.hamburger{
width:40px;
height:40px;
border:none;
background:none;
cursor:pointer;
display:none;
flex-direction:column;
justify-content:center;
gap:6px;
}
.hamburger span{
width:28px;
height:3px;
background:#111;
border-radius:10px;
transition:.3s;
}
.hamburger.active span:nth-child(1){
transform:translateY(9px) rotate(45deg);
}
.hamburger.active span:nth-child(2){
opacity:0;
}
.hamburger.active span:nth-child(3){
transform:translateY(-9px) rotate(-45deg);
}
/* hero */
.hero{
position:relative;
height:100vh;
overflow:hidden;
display:flex;
align-items:center;
justify-content:center;
text-align:center;
color:#fff;
}
.hero video{
position:absolute;
inset:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-2;
}
.hero::after{
content:"";
position:absolute;
inset:0;
background:rgba(0,0,0,.45);
z-index:-1;
}
.hero h1{
font-size:72px;
margin-bottom:20px;
}
.hero p{
font-size:24px;
line-height:1.6;
}
/* common */
section{
padding:120px 30px;
}
.inner{
max-width:1200px;
margin:0 auto;
}
.section_title{
margin-bottom:70px;
}
.section_title h2{
font-size:28px;
font-weight:800;
display:flex;
align-items:center;
gap:8px;
}
.section_title h2::after{
content:"";
width:8px;
height:8px;
background:#5acb9b;
border-radius:50%;
display:block;
margin-top:10px;
}
.section_title p{
margin-top:18px;
font-size:18px;
color:#555;
}
/* first section */
.platform_grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:34px;
}
.platform_card{
position:relative;
height:360px;
background:#f7f7f7;
border-radius:20px;
padding:42px 40px;
overflow:hidden;
transition:.35s;
}
.platform_card:hover{
transform:translateY(-10px);
box-shadow:0 20px 40px rgba(0,0,0,.08);
}
.platform_card h3{
font-size:42px;
font-weight:500;
margin-bottom:18px;
}
.platform_card p{
font-size:17px;
color:#555;
}
.platform_card:first-child h3,
.platform_card:first-child p{
color:#5acb9b;
}
.arrow_btn{
position:absolute;
left:40px;
top:145px;
width:38px;
height:38px;
border-radius:50%;
background:#111;
color:#fff;
display:flex;
align-items:center;
justify-content:center;
font-size:20px;
}
.platform_card:first-child .arrow_btn{
background:#5acb9b;
}
.card_img{
position:absolute;
right:35px;
bottom:35px;
width:210px;
height:130px;
display:flex;
align-items:center;
justify-content:center;
font-size:90px;
}
/* performance */
.performance_section{
background:#00b889;
color:#fff;
padding:130px 30px;
}
.performance_wrap{
display:grid;
grid-template-columns:340px 1fr;
gap:120px;
}
.performance_title h2{
font-size:28px;
display:flex;
gap:8px;
}
.performance_title h2::after{
content:"";
width:7px;
height:7px;
background:#fff;
border-radius:50%;
margin-top:20px;
}
.performance_title p{
margin-top:22px;
font-size:18px;
line-height:1.7;
}
.performance_grid{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:80px 60px;
}
.performance_item{
border-top:1px solid rgba(255,255,255,.45);
padding-top:22px;
}
.performance_item .label{
font-size:17px;
margin-bottom:30px;
}
.performance_item .label::before{
content:"▣";
margin-right:10px;
font-size:13px;
}
.performance_item strong{
font-size:88px;
font-weight:500;
line-height:1;
}
.performance_item span{
font-size:18px;
margin-left:8px;
}
/* collaboration */
.collaboration_wrap{
display:grid;
grid-template-columns:1.05fr 1fr;
gap:36px;
align-items:stretch;
}
.collaboration_visual{
min-height:390px;
border-radius:20px;
overflow:hidden;
}
.collaboration_visual img{
width:100%;
height:100%;
display:block;
object-fit:cover;
}
.collaboration_list{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:0 36px;
}
.collaboration_item{
min-height:190px;
padding:35px 28px;
border-bottom:1px solid #ddd;
}
.collaboration_item.active{
background:#5acb9b;
color:#fff;
border-radius:20px;
border-bottom:none;
}
.collaboration_item h3{
font-size:20px;
margin-bottom:28px;
}
.collaboration_item p{
font-size:18px;
line-height:1.6;
color:#555;
}
.collaboration_item.active p{
color:#fff;
}
.collaboration_item .type{
display:block;
margin-top:55px;
font-size:15px;
color:#555;
}
.collaboration_item.active .type{
color:#fff;
}
/* portfolio */
.title{
margin-bottom:55px;
}
.title span{
color:#00b889;
font-weight:bold;
}
.title h2{
font-size:42px;
margin-top:15px;
line-height:1.3;
}
.portfolio_grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:20px;
}
.portfolio_card{
background:#f7f9f8;
padding:30px;
border-radius:22px;
}
.tag{
display:inline-block;
padding:6px 12px;
background:#e7f7ef;
color:#00b889;
border-radius:20px;
font-size:13px;
margin-bottom:18px;
}
/* apply */
.grid3{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:25px;
}
.card{
padding:40px;
background:#f5f7f8;
border-radius:24px;
transition:.3s;
}
.card:hover{
background:#00b889;
color:#fff;
transform:translateY(-8px);
}
.card strong{
display:block;
font-size:26px;
margin-bottom:15px;
}
.dark{
background:#111;
color:#fff;
}
/* cta */
.cta{
background:#00b889;
color:#fff;
text-align:center;
}
.cta h2{
font-size:46px;
margin-bottom:30px;
}
.cta a{
display:inline-block;
padding:18px 40px;
background:#fff;
color:#00b889;
border-radius:50px;
font-weight:bold;
}
/* footer */
footer{
padding:50px 30px;
background:#111;
color:#aaa;
}
footer h2{
color:#fff;
margin-bottom:20px;
}
/* mobile */
@media(max-width:900px){
.hamburger{
display:flex;
z-index:1001;
}
.nav{
position:fixed;
top:80px;
right:-100%;
width:280px;
height:calc(100vh - 80px);
background:#fff;
flex-direction:column;
gap:0;
padding:30px 20px;
transition:.4s;
box-shadow:-10px 0 30px rgba(0,0,0,.08);
overflow-y:auto;
}
.nav.active{
right:0;
}
.nav > li{
width:100%;
line-height:1.4;
margin-bottom:20px;
}
.nav > li > a{
display:block;
font-size:20px;
padding:15px 0;
}
.sub_menu{
position:static;
transform:none;
opacity:1;
visibility:visible;
width:100%;
box-shadow:none;
background:#f5f7f8;
margin-top:5px;
border-radius:12px;
padding:10px 0;
}
.hero h1{
font-size:44px;
}
.hero p{
font-size:18px;
}
section{
padding:80px 20px;
}
.platform_grid,
.performance_wrap,
.performance_grid,
.collaboration_wrap,
.collaboration_list,
.portfolio_grid,
.grid3{
grid-template-columns:1fr;
}
.platform_card{
height:320px;
}
.platform_card h3{
font-size:36px;
}
.card_img{
width:160px;
font-size:75px;
}
.performance_wrap{
gap:60px;
}
.performance_item strong{
font-size:64px;
}
.title h2,
.cta h2{
font-size:32px;
}
}
</style>
</head>
<body>
<header>
<div class="header_inner">
<a href="#" class="logo">INNOSTAGE</a>
<button class="hamburger" id="hamburger">
<span></span>
<span></span>
<span></span>
</button>
<ul class="nav" id="nav">
<li>
<a href="#innostage">INNOSTAGE</a>
<ul class="sub_menu">
<li><a href="#">이노스테이지 소개</a></li>
<li><a href="#">지원 활동</a></li>
</ul>
</li>
<li>
<a href="#portfolio">Portfolio</a>
<ul class="sub_menu">
<li><a href="#">이노스테이지 기업</a></li>
<li><a href="#">기업 탐색하기</a></li>
</ul>
</li>
<li>
<a href="#apply">Apply</a>
<ul class="sub_menu">
<li><a href="#">지원 프로그램</a></li>
<li><a href="#">협업 제안</a></li>
</ul>
</li>
<li>
<a href="#news">News</a>
</li>
</ul>
</div>
</header>
<section class="hero">
<video autoplay muted loop playsinline>
<source src="https://www.kyobolifeinnostage.co.kr/wp-content/themes/innostage/assets/video/video_main.mp4" type="video/mp4">
</video>
<div>
<h1>INNOSTAGE</h1>
<p>
The stage for your growth<br>
교보생명과 스타트업이 함께 미래를 만들어갑니다
</p>
</div>
</section>
<section id="innostage">
<div class="inner">
<div class="section_title">
<h2>INNOSTAGE</h2>
<p>육성과 투자로 빠른 성장을 지원합니다.</p>
</div>
<div class="platform_grid">
<a href="#" class="platform_card">
<h3>Acceleration</h3>
<p>교보생명 액셀러레이션 프로그램</p>
<span class="arrow_btn"></span>
<div class="card_img"></div>
</a>
<a href="#" class="platform_card">
<h3>Investment</h3>
<p>전략적 목적에 따른 직·간접 투자</p>
<span class="arrow_btn"></span>
<div class="card_img"></div>
</a>
<a href="#" class="platform_card">
<h3>Portfolio</h3>
<p>육성 및 투자 기업 소개</p>
<span class="arrow_btn"></span>
<div class="card_img"></div>
</a>
</div>
</div>
</section>
<section class="performance_section">
<div class="inner">
<div class="performance_wrap">
<div class="performance_title">
<h2>Performance</h2>
<p>
뛰어난 기술력과 성장 잠재력을<br>
갖춘 스타트업과 함께 합니다.
</p>
</div>
<div class="performance_grid">
<div class="performance_item">
<p class="label">발굴 기업 수</p>
<strong>2,192</strong><span>개 사</span>
</div>
<div class="performance_item">
<p class="label">누적 육성 기업 수</p>
<strong>108</strong><span>개 사</span>
</div>
<div class="performance_item">
<p class="label">누적 협업 건 수</p>
<strong>215</strong><span>건 수</span>
</div>
<div class="performance_item">
<p class="label">누적 투자 금액</p>
<strong>1,052</strong><span>억 원</span>
</div>
</div>
</div>
</div>
</section>
<section class="collaboration_section">
<div class="inner">
<div class="section_title">
<h2>Collaboration</h2>
<p>교보생명과 스타트업 간의 우수 협업 사례를 소개합니다.</p>
</div>
<div class="collaboration_wrap">
<div class="collaboration_visual">
<img src="https://www.kyobolifeinnostage.co.kr/wp-content/themes/innostage/assets/images/main/img_view04.png" alt="">
</div>
<div class="collaboration_list">
<div class="collaboration_item active">
<h3>째깍악어</h3>
<p>
아이 돌봄 및 선생님 매칭 플랫폼
</p>
<span class="type">육성 · 투자</span>
</div>
<div class="collaboration_item">
<h3>그린리본</h3>
<p>
AI 기반 보험금 청구 자동화 서비스
</p>
<span class="type">육성 · 투자</span>
</div>
<div class="collaboration_item">
<h3>프렌트립</h3>
<p>
취미 여가 플랫폼
</p>
<span class="type">육성 · 투자</span>
</div>
<div class="collaboration_item">
<h3>로민</h3>
<p>
문서 업무 자동화를 돕는 인공지능
</p>
<span class="type">육성</span>
</div>
</div>
</div>
</div>
</section>
<section id="portfolio">
<div class="inner">
<div class="title">
<span>Portfolio</span>
<h2>
이노스테이지와 함께 성장한<br>
기업을 소개합니다.
</h2>
</div>
<div class="portfolio_grid">
<div class="portfolio_card">
<span class="tag">육성 / 투자</span>
<h3>이노스테이지 기업</h3>
<p>육성 및 투자 기업을 소개합니다.</p>
</div>
<div class="portfolio_card">
<span class="tag">탐색</span>
<h3>기업 탐색하기</h3>
<p>다양한 분야의 스타트업을 확인할 수 있습니다.</p>
</div>
<div class="portfolio_card">
<span class="tag">AI</span>
<h3>로민</h3>
<p>문서 업무 자동화를 돕는 인공지능 기업</p>
</div>
<div class="portfolio_card">
<span class="tag">Healthcare</span>
<h3>닥터다이어리</h3>
<p>일상 건강관리 플랫폼</p>
</div>
</div>
</div>
</section>
<section id="apply" class="dark">
<div class="inner">
<div class="title">
<span>Apply</span>
<h2>
스타트업의 도전을 위한<br>
지원 프로그램과 협업 제안
</h2>
</div>
<div class="grid3">
<div class="card">
<strong>지원 프로그램</strong>
<p>성장 가능성 있는 스타트업을 위한 프로그램을 운영합니다.</p>
</div>
<div class="card">
<strong>협업 제안</strong>
<p>교보생명과 함께 새로운 비즈니스 협업을 제안할 수 있습니다.</p>
</div>
<div class="card">
<strong>Open Innovation</strong>
<p>다양한 분야의 스타트업과 협업을 기다립니다.</p>
</div>
</div>
</div>
</section>
<section id="news">
<div class="inner">
<div class="title">
<span>News</span>
<h2>
INNOSTAGE의<br>
새로운 소식을 전합니다.
</h2>
</div>
<div class="grid3">
<div class="card">
<strong>공지사항</strong>
<p>프로그램 모집 및 주요 공지를 확인할 수 있습니다.</p>
</div>
<div class="card">
<strong>이벤트</strong>
<p>스타트업과 함께하는 다양한 행사를 소개합니다.</p>
</div>
<div class="card">
<strong>소식</strong>
<p>협업 사례와 성장 스토리를 전달합니다.</p>
</div>
</div>
</div>
</section>
<section class="cta">
<div class="inner">
<h2>
교보생명 이노스테이지는<br>
다양한 협업을 기다립니다.
</h2>
<a href="#">협업 제안하기</a>
</div>
</section>
<footer>
<div class="inner">
<h2>INNOSTAGE</h2>
<p>서울시 종로구 종로 1 교보생명보험주식회사</p>
<p>
Copyright KYOBO LIFE INSURANCE CO.
LTD. All Rights Reserved.
</p>
</div>
</footer>
<script>
const hamburger = document.getElementById("hamburger");
const nav = document.getElementById("nav");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
nav.classList.toggle("active");
});
</script>
</body>
</html>
#반응형 스타일시트 연습4(이노베이션)