<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>B2B 기업형 실무 샘플</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Arial,sans-serif;color:#111;}
a{text-decoration:none;color:inherit;}
.wrap{max-width:1200px;width:100%;margin:0 auto;padding:0 20px;}
.header{height:80px;background:#fff;border-bottom:1px solid #eee;position:relative;z-index:20;}
.header .wrap{height:80px;display:flex;justify-content:space-between;align-items:center;}
.logo{font-size:26px;font-weight:900;color:#1746d8;}
.menu{display:flex;gap:40px;}
.menu a{font-weight:700;}
.ham{display:none;background:none;border:0;font-size:28px;cursor:pointer;}
.visual{height:560px;}
.swiper-slide{height:560px;background:#f4f7ff;}
.visual .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:50px;}
.visual_text{width:50%;}
.visual_text span{color:#1746d8;font-weight:900;}
.visual_text h1{font-size:56px;line-height:1.2;margin:20px 0;}
.visual_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:900;cursor:pointer;}
.visual_box{width:45%;height:360px;background:linear-gradient(135deg,#1746d8,#8db0ff);border-radius:30px;color:white;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:900;}
.section{padding:90px 0;}
.title{text-align:center;margin-bottom:50px;}
.title h2{font-size:38px;margin-bottom:15px;}
.title p{color:#666;}
.card_wrap{display:flex;gap:30px;}
.card{width:calc(100%/3);padding:40px 30px;border:1px solid #eee;border-radius:22px;transition:.3s;background:#fff;}
.card:hover{transform:translateY(-10px);box-shadow:0 15px 35px rgba(0,0,0,.1);}
.icon{width:70px;height:70px;border-radius:18px;background:#eef3ff;color:#1746d8;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;margin-bottom:25px;}
.card h3{font-size:24px;margin-bottom:15px;}
.card p{color:#666;line-height:1.7;}
.stats{background:#111;color:white;padding:90px 0;}
.stats .wrap{display:flex;justify-content:space-between;gap:30px;text-align:center;}
.stat{width:calc(100%/3);background:#222;border-radius:22px;padding:40px;}
.stat h3{font-size:44px;color:#8db0ff;margin-bottom:10px;}
.stat p{color:#ccc;}
.footer{height:100px;background:#f5f5f5;color:#777;display:flex;align-items:center;justify-content:center;}
.modal_wrap{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:50;}
.modal_wrap.active{display:flex;}
.modal{width:360px;background:white;border-radius:20px;padding:35px;text-align:center;}
.modal h3{font-size:26px;margin-bottom:15px;}
.modal p{color:#666;line-height:1.6;margin-bottom:25px;}
.close_btn{padding:13px 28px;background:#111;color:white;border:0;border-radius:8px;cursor:pointer;}
@media(max-width:768px){
.header .wrap{height:70px;}
.header{height:70px;}
.ham{display:block;}
.menu{display:none;position:absolute;top:70px;left:0;width:100%;background:#fff;flex-direction:column;gap:0;border-bottom:1px solid #eee;}
.menu.active{display:flex;}
.menu a{padding:18px 20px;border-top:1px solid #eee;}
.visual,.swiper-slide{height:auto;}
.visual .wrap{flex-direction:column;padding:70px 20px;}
.visual_text,.visual_box{width:100%;}
.visual_text h1{font-size:36px;}
.visual_box{height:260px;font-size:30px;}
.card_wrap,.stats .wrap{flex-direction:column;}
.card,.stat{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>
<button class="ham">☰</button>
</div>
</header>
<div class="visual swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="wrap">
<div class="visual_text">
<span>AI BUSINESS SOLUTION</span>
<h1>기업의 성장을 돕는<br>스마트 AI 솔루션</h1>
<p>업무 자동화, 데이터 분석, 고객 관리를 하나의 플랫폼에서 제공합니다.</p>
<a class="btn open_btn">상담 신청하기</a>
</div>
<div class="visual_box">AI PLATFORM</div>
</div>
</div>
<div class="swiper-slide">
<div class="wrap">
<div class="visual_text">
<span>DIGITAL TRANSFORMATION</span>
<h1>반복 업무를 줄이고<br>핵심 업무에 집중하세요</h1>
<p>기업 운영에 필요한 디지털 전환 서비스를 안정적으로 제공합니다.</p>
<a class="btn open_btn">서비스 문의</a>
</div>
<div class="visual_box">DATA SYSTEM</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<section class="section">
<div class="wrap">
<div class="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="stats">
<div class="wrap">
<div class="stat">
<h3>120+</h3>
<p>Project</p>
</div>
<div class="stat">
<h3>98%</h3>
<p>Satisfaction</p>
</div>
<div class="stat">
<h3>15yr</h3>
<p>Experience</p>
</div>
</div>
</section>
<footer class="footer">
COPYRIGHT 2026. BIZ.AI. ALL RIGHTS RESERVED.
</footer>
<div class="modal_wrap">
<div class="modal">
<h3>상담 신청</h3>
<p>기업 맞춤형 AI 솔루션 도입 상담을 도와드립니다.</p>
<button class="close_btn">닫기</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.visual', {
loop:true,
autoplay:{
delay:3000,
disableOnInteraction:false,
},
pagination:{
el:'.swiper-pagination',
clickable:true,
}
});
const hamEl = document.querySelector('.ham');
const menuEl = document.querySelector('.menu');
hamEl.addEventListener('click', () => {
menuEl.classList.toggle('active');
});
const openBtns = document.querySelectorAll('.open_btn');
const modalWrap = document.querySelector('.modal_wrap');
const closeBtn = document.querySelector('.close_btn');
for(let i = 0; i < openBtns.length; i++){
openBtns[i].addEventListener('click', () => {
modalWrap.classList.add('active');
});
}
closeBtn.addEventListener('click', () => {
modalWrap.classList.remove('active');
});
</script>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>B2B 기업형 실무 샘플</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.css">
<style>
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:Arial,sans-serif;color:#111;}
a{text-decoration:none;color:inherit;}
.wrap{max-width:1200px;width:100%;margin:0 auto;padding:0 20px;}
.header{height:80px;background:#fff;border-bottom:1px solid #eee;position:relative;z-index:20;}
.header .wrap{height:80px;display:flex;justify-content:space-between;align-items:center;}
.logo{font-size:26px;font-weight:900;color:#1746d8;}
.menu{display:flex;gap:40px;}
.menu a{font-weight:700;}
.ham{display:none;background:none;border:0;font-size:28px;cursor:pointer;}
.visual{height:560px;}
.swiper-slide{height:560px;background:#f4f7ff;}
.visual .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:50px;}
.visual_text{width:50%;}
.visual_text span{color:#1746d8;font-weight:900;}
.visual_text h1{font-size:56px;line-height:1.2;margin:20px 0;}
.visual_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:900;cursor:pointer;}
.visual_box{width:45%;height:360px;background:linear-gradient(135deg,#1746d8,#8db0ff);border-radius:30px;color:white;display:flex;align-items:center;justify-content:center;font-size:40px;font-weight:900;}
.section{padding:90px 0;}
.title{text-align:center;margin-bottom:50px;}
.title h2{font-size:38px;margin-bottom:15px;}
.title p{color:#666;}
.card_wrap{display:flex;gap:30px;}
.card{width:calc(100%/3);padding:40px 30px;border:1px solid #eee;border-radius:22px;transition:.3s;background:#fff;}
.card:hover{transform:translateY(-10px);box-shadow:0 15px 35px rgba(0,0,0,.1);}
.icon{width:70px;height:70px;border-radius:18px;background:#eef3ff;color:#1746d8;display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:900;margin-bottom:25px;}
.card h3{font-size:24px;margin-bottom:15px;}
.card p{color:#666;line-height:1.7;}
.stats{background:#111;color:white;padding:90px 0;}
.stats .wrap{display:flex;justify-content:space-between;gap:30px;text-align:center;}
.stat{width:calc(100%/3);background:#222;border-radius:22px;padding:40px;}
.stat h3{font-size:44px;color:#8db0ff;margin-bottom:10px;}
.stat p{color:#ccc;}
.footer{height:100px;background:#f5f5f5;color:#777;display:flex;align-items:center;justify-content:center;}
.modal_wrap{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:50;}
.modal_wrap.active{display:flex;}
.modal{width:360px;background:white;border-radius:20px;padding:35px;text-align:center;}
.modal h3{font-size:26px;margin-bottom:15px;}
.modal p{color:#666;line-height:1.6;margin-bottom:25px;}
.close_btn{padding:13px 28px;background:#111;color:white;border:0;border-radius:8px;cursor:pointer;}
@media(max-width:768px){
.header .wrap{height:70px;}
.header{height:70px;}
.ham{display:block;}
.menu{display:none;position:absolute;top:70px;left:0;width:100%;background:#fff;flex-direction:column;gap:0;border-bottom:1px solid #eee;}
.menu.active{display:flex;}
.menu a{padding:18px 20px;border-top:1px solid #eee;}
.visual,.swiper-slide{height:auto;}
.visual .wrap{flex-direction:column;padding:70px 20px;}
.visual_text,.visual_box{width:100%;}
.visual_text h1{font-size:36px;}
.visual_box{height:260px;font-size:30px;}
.card_wrap,.stats .wrap{flex-direction:column;}
.card,.stat{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>
<button class="ham">☰</button>
</div>
</header>
<div class="visual swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<div class="wrap">
<div class="visual_text">
<span>AI BUSINESS SOLUTION</span>
<h1>기업의 성장을 돕는<br>스마트 AI 솔루션</h1>
<p>업무 자동화, 데이터 분석, 고객 관리를 하나의 플랫폼에서 제공합니다.</p>
<a class="btn open_btn">상담 신청하기</a>
</div>
<div class="visual_box">AI PLATFORM</div>
</div>
</div>
<div class="swiper-slide">
<div class="wrap">
<div class="visual_text">
<span>DIGITAL TRANSFORMATION</span>
<h1>반복 업무를 줄이고<br>핵심 업무에 집중하세요</h1>
<p>기업 운영에 필요한 디지털 전환 서비스를 안정적으로 제공합니다.</p>
<a class="btn open_btn">서비스 문의</a>
</div>
<div class="visual_box">DATA SYSTEM</div>
</div>
</div>
</div>
<div class="swiper-pagination"></div>
</div>
<section class="section">
<div class="wrap">
<div class="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="stats">
<div class="wrap">
<div class="stat">
<h3>120+</h3>
<p>Project</p>
</div>
<div class="stat">
<h3>98%</h3>
<p>Satisfaction</p>
</div>
<div class="stat">
<h3>15yr</h3>
<p>Experience</p>
</div>
</div>
</section>
<footer class="footer">
COPYRIGHT 2026. BIZ.AI. ALL RIGHTS RESERVED.
</footer>
<div class="modal_wrap">
<div class="modal">
<h3>상담 신청</h3>
<p>기업 맞춤형 AI 솔루션 도입 상담을 도와드립니다.</p>
<button class="close_btn">닫기</button>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/swiper@12/swiper-bundle.min.js"></script>
<script>
const swiper = new Swiper('.visual', {
loop:true,
autoplay:{
delay:3000,
disableOnInteraction:false,
},
pagination:{
el:'.swiper-pagination',
clickable:true,
}
});
const hamEl = document.querySelector('.ham');
const menuEl = document.querySelector('.menu');
hamEl.addEventListener('click', () => {
menuEl.classList.toggle('active');
});
const openBtns = document.querySelectorAll('.open_btn');
const modalWrap = document.querySelector('.modal_wrap');
const closeBtn = document.querySelector('.close_btn');
for(let i = 0; i < openBtns.length; i++){
openBtns[i].addEventListener('click', () => {
modalWrap.classList.add('active');
});
}
closeBtn.addEventListener('click', () => {
modalWrap.classList.remove('active');
});
</script>
</body>
</html>
#실무형 1번 = 기업형 B2B 사이트 완성형