<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>B2B 기업형 샘플</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:Arial, sans-serif;
color:#111;
}
a{
text-decoration:none;
color:inherit;
}
ul,li{
list-style:none;
}
.wrap{
max-width:1200px;
width:100%;
margin:0 auto;
padding:0 20px;
}
/* Header */
.header{
height:80px;
border-bottom:1px solid #eee;
background:#fff;
}
.header .wrap{
height:80px;
display:flex;
justify-content:space-between;
align-items:center;
}
.logo{
font-size:26px;
font-weight:800;
color:#1746d8;
}
.menu{
display:flex;
gap:40px;
}
.menu a{
font-size:16px;
font-weight:700;
}
/* Hero */
.hero{
background:#f4f7ff;
padding:100px 0;
}
.hero .wrap{
display:flex;
justify-content:space-between;
align-items:center;
gap:50px;
}
.hero_text{
width:50%;
}
.hero_text span{
display:inline-block;
margin-bottom:20px;
color:#1746d8;
font-weight:800;
}
.hero_text h1{
font-size:54px;
line-height:1.2;
margin-bottom:25px;
}
.hero_text p{
font-size:18px;
line-height:1.7;
color:#555;
margin-bottom:35px;
}
.btn{
display:inline-block;
padding:16px 34px;
background:#1746d8;
color:#fff;
border-radius:8px;
font-weight:800;
}
.hero_img{
width:50%;
height:380px;
background:linear-gradient(135deg,#1746d8,#7aa5ff);
border-radius:30px;
display:flex;
justify-content:center;
align-items:center;
color:white;
font-size:40px;
font-weight:800;
}
/* Section */
.section{
padding:90px 0;
}
.section_title{
text-align:center;
margin-bottom:50px;
}
.section_title h2{
font-size:38px;
margin-bottom:15px;
}
.section_title p{
font-size:17px;
color:#666;
}
/* Card */
.card_wrap{
display:flex;
gap:30px;
}
.card{
width:calc(100% / 3);
padding:40px 30px;
border:1px solid #e5e5e5;
border-radius:20px;
background:white;
transition:0.3s;
}
.card:hover{
transform:translateY(-10px);
box-shadow:0 15px 30px rgba(0,0,0,0.1);
}
.icon{
width:70px;
height:70px;
background:#eef3ff;
border-radius:18px;
display:flex;
justify-content:center;
align-items:center;
color:#1746d8;
font-size:30px;
margin-bottom:25px;
}
.card h3{
font-size:24px;
margin-bottom:15px;
}
.card p{
font-size:15px;
line-height:1.7;
color:#666;
}
/* Info */
.info{
background:#111;
color:white;
padding:90px 0;
}
.info .wrap{
display:flex;
justify-content:space-between;
align-items:center;
gap:50px;
}
.info_text{
width:50%;
}
.info_text h2{
font-size:38px;
line-height:1.3;
margin-bottom:25px;
}
.info_text p{
color:#ccc;
line-height:1.8;
}
.info_numbers{
width:50%;
display:flex;
gap:20px;
}
.num_box{
width:calc(100% / 3);
padding:35px 20px;
background:#222;
border-radius:18px;
text-align:center;
}
.num_box h3{
font-size:36px;
color:#7aa5ff;
margin-bottom:10px;
}
.num_box p{
color:#ccc;
}
/* Footer */
.footer{
height:100px;
background:#f5f5f5;
display:flex;
justify-content:center;
align-items:center;
color:#777;
}
/* Mobile */
@media(max-width:768px){
.header{
height:auto;
padding:20px 0;
}
.header .wrap{
height:auto;
flex-direction:column;
gap:20px;
}
.menu{
gap:20px;
flex-wrap:wrap;
justify-content:center;
}
.hero{
padding:70px 0;
}
.hero .wrap{
flex-direction:column;
}
.hero_text,
.hero_img{
width:100%;
}
.hero_text h1{
font-size:36px;
}
.hero_img{
height:260px;
font-size:30px;
}
.card_wrap{
flex-direction:column;
}
.card{
width:100%;
}
.info .wrap{
flex-direction:column;
}
.info_text,
.info_numbers{
width:100%;
}
.info_numbers{
flex-direction:column;
}
.num_box{
width:100%;
}
}
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="logo">BIZ.AI</div>
<nav class="menu">
<a href="#">Service</a>
<a href="#">Solution</a>
<a href="#">Case</a>
<a href="#">Contact</a>
</nav>
</div>
</header>
<section class="hero">
<div class="wrap">
<div class="hero_text">
<span>AI BUSINESS SOLUTION</span>
<h1>
기업의 성장을 돕는<br>
스마트 AI 솔루션
</h1>
<p>
데이터 분석, 업무 자동화, 고객 관리까지
기업 운영에 필요한 디지털 전환 서비스를 제공합니다.
</p>
<a href="#" class="btn">상담 신청하기</a>
</div>
<div class="hero_img">
AI PLATFORM
</div>
</div>
</section>
<section class="section">
<div class="wrap">
<div class="section_title">
<h2>Our Services</h2>
<p>기업 운영에 필요한 핵심 서비스를 제공합니다.</p>
</div>
<div class="card_wrap">
<div class="card">
<div class="icon">01</div>
<h3>업무 자동화</h3>
<p>
반복적인 업무를 자동화하여
시간과 비용을 줄이고 생산성을 높입니다.
</p>
</div>
<div class="card">
<div class="icon">02</div>
<h3>데이터 분석</h3>
<p>
고객 데이터와 운영 데이터를 분석하여
더 나은 의사결정을 돕습니다.
</p>
</div>
<div class="card">
<div class="icon">03</div>
<h3>고객 관리</h3>
<p>
고객 상담, 문의, 이력 관리를 통합하여
비즈니스 효율을 높입니다.
</p>
</div>
</div>
</div>
</section>
<section class="info">
<div class="wrap">
<div class="info_text">
<h2>
신뢰할 수 있는<br>
디지털 파트너
</h2>
<p>
다양한 산업군의 기업들과 함께하며
안정적인 기술력과 운영 경험을 바탕으로
지속 가능한 성장을 지원합니다.
</p>
</div>
<div class="info_numbers">
<div class="num_box">
<h3>120+</h3>
<p>Project</p>
</div>
<div class="num_box">
<h3>98%</h3>
<p>Satisfaction</p>
</div>
<div class="num_box">
<h3>15yr</h3>
<p>Experience</p>
</div>
</div>
</div>
</section>
<footer class="footer">
COPYRIGHT 2026. BIZ.AI. ALL RIGHTS RESERVED.
</footer>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>B2B 기업형 샘플</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:Arial, sans-serif;
color:#111;
}
a{
text-decoration:none;
color:inherit;
}
ul,li{
list-style:none;
}
.wrap{
max-width:1200px;
width:100%;
margin:0 auto;
padding:0 20px;
}
/* Header */
.header{
height:80px;
border-bottom:1px solid #eee;
background:#fff;
}
.header .wrap{
height:80px;
display:flex;
justify-content:space-between;
align-items:center;
}
.logo{
font-size:26px;
font-weight:800;
color:#1746d8;
}
.menu{
display:flex;
gap:40px;
}
.menu a{
font-size:16px;
font-weight:700;
}
/* Hero */
.hero{
background:#f4f7ff;
padding:100px 0;
}
.hero .wrap{
display:flex;
justify-content:space-between;
align-items:center;
gap:50px;
}
.hero_text{
width:50%;
}
.hero_text span{
display:inline-block;
margin-bottom:20px;
color:#1746d8;
font-weight:800;
}
.hero_text h1{
font-size:54px;
line-height:1.2;
margin-bottom:25px;
}
.hero_text p{
font-size:18px;
line-height:1.7;
color:#555;
margin-bottom:35px;
}
.btn{
display:inline-block;
padding:16px 34px;
background:#1746d8;
color:#fff;
border-radius:8px;
font-weight:800;
}
.hero_img{
width:50%;
height:380px;
background:linear-gradient(135deg,#1746d8,#7aa5ff);
border-radius:30px;
display:flex;
justify-content:center;
align-items:center;
color:white;
font-size:40px;
font-weight:800;
}
/* Section */
.section{
padding:90px 0;
}
.section_title{
text-align:center;
margin-bottom:50px;
}
.section_title h2{
font-size:38px;
margin-bottom:15px;
}
.section_title p{
font-size:17px;
color:#666;
}
/* Card */
.card_wrap{
display:flex;
gap:30px;
}
.card{
width:calc(100% / 3);
padding:40px 30px;
border:1px solid #e5e5e5;
border-radius:20px;
background:white;
transition:0.3s;
}
.card:hover{
transform:translateY(-10px);
box-shadow:0 15px 30px rgba(0,0,0,0.1);
}
.icon{
width:70px;
height:70px;
background:#eef3ff;
border-radius:18px;
display:flex;
justify-content:center;
align-items:center;
color:#1746d8;
font-size:30px;
margin-bottom:25px;
}
.card h3{
font-size:24px;
margin-bottom:15px;
}
.card p{
font-size:15px;
line-height:1.7;
color:#666;
}
/* Info */
.info{
background:#111;
color:white;
padding:90px 0;
}
.info .wrap{
display:flex;
justify-content:space-between;
align-items:center;
gap:50px;
}
.info_text{
width:50%;
}
.info_text h2{
font-size:38px;
line-height:1.3;
margin-bottom:25px;
}
.info_text p{
color:#ccc;
line-height:1.8;
}
.info_numbers{
width:50%;
display:flex;
gap:20px;
}
.num_box{
width:calc(100% / 3);
padding:35px 20px;
background:#222;
border-radius:18px;
text-align:center;
}
.num_box h3{
font-size:36px;
color:#7aa5ff;
margin-bottom:10px;
}
.num_box p{
color:#ccc;
}
/* Footer */
.footer{
height:100px;
background:#f5f5f5;
display:flex;
justify-content:center;
align-items:center;
color:#777;
}
/* Mobile */
@media(max-width:768px){
.header{
height:auto;
padding:20px 0;
}
.header .wrap{
height:auto;
flex-direction:column;
gap:20px;
}
.menu{
gap:20px;
flex-wrap:wrap;
justify-content:center;
}
.hero{
padding:70px 0;
}
.hero .wrap{
flex-direction:column;
}
.hero_text,
.hero_img{
width:100%;
}
.hero_text h1{
font-size:36px;
}
.hero_img{
height:260px;
font-size:30px;
}
.card_wrap{
flex-direction:column;
}
.card{
width:100%;
}
.info .wrap{
flex-direction:column;
}
.info_text,
.info_numbers{
width:100%;
}
.info_numbers{
flex-direction:column;
}
.num_box{
width:100%;
}
}
</style>
</head>
<body>
<header class="header">
<div class="wrap">
<div class="logo">BIZ.AI</div>
<nav class="menu">
<a href="#">Service</a>
<a href="#">Solution</a>
<a href="#">Case</a>
<a href="#">Contact</a>
</nav>
</div>
</header>
<section class="hero">
<div class="wrap">
<div class="hero_text">
<span>AI BUSINESS SOLUTION</span>
<h1>
기업의 성장을 돕는<br>
스마트 AI 솔루션
</h1>
<p>
데이터 분석, 업무 자동화, 고객 관리까지
기업 운영에 필요한 디지털 전환 서비스를 제공합니다.
</p>
<a href="#" class="btn">상담 신청하기</a>
</div>
<div class="hero_img">
AI PLATFORM
</div>
</div>
</section>
<section class="section">
<div class="wrap">
<div class="section_title">
<h2>Our Services</h2>
<p>기업 운영에 필요한 핵심 서비스를 제공합니다.</p>
</div>
<div class="card_wrap">
<div class="card">
<div class="icon">01</div>
<h3>업무 자동화</h3>
<p>
반복적인 업무를 자동화하여
시간과 비용을 줄이고 생산성을 높입니다.
</p>
</div>
<div class="card">
<div class="icon">02</div>
<h3>데이터 분석</h3>
<p>
고객 데이터와 운영 데이터를 분석하여
더 나은 의사결정을 돕습니다.
</p>
</div>
<div class="card">
<div class="icon">03</div>
<h3>고객 관리</h3>
<p>
고객 상담, 문의, 이력 관리를 통합하여
비즈니스 효율을 높입니다.
</p>
</div>
</div>
</div>
</section>
<section class="info">
<div class="wrap">
<div class="info_text">
<h2>
신뢰할 수 있는<br>
디지털 파트너
</h2>
<p>
다양한 산업군의 기업들과 함께하며
안정적인 기술력과 운영 경험을 바탕으로
지속 가능한 성장을 지원합니다.
</p>
</div>
<div class="info_numbers">
<div class="num_box">
<h3>120+</h3>
<p>Project</p>
</div>
<div class="num_box">
<h3>98%</h3>
<p>Satisfaction</p>
</div>
<div class="num_box">
<h3>15yr</h3>
<p>Experience</p>
</div>
</div>
</div>
</section>
<footer class="footer">
COPYRIGHT 2026. BIZ.AI. ALL RIGHTS RESERVED.
</footer>
</body>
</html>
#샘플1 = 기업형 B2B 사이트