<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>동서식품</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:'Pretendard','Noto Sans KR',sans-serif;
color:#fff;
overflow:hidden;
background:#000;
}
a{
text-decoration:none;
color:#fff;
}
.bg-video{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-2;
}
.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(
to top,
rgba(0,0,0,0.82),
rgba(0,0,0,0.28)
);
z-index:-1;
}
.wrap{
width:100%;
max-width:1400px;
margin:0 auto;
padding:0 30px;
}
/* 헤더 */
.header{
height:90px;
position:relative;
z-index:20;
border-bottom:1px solid rgba(255,255,255,0.12);
background:rgba(0,0,0,0.18);
backdrop-filter:blur(8px);
}
.header .wrap{
height:90px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
}
/* 로고 */
.logo{
position:absolute;
left:30px;
}
.logo a{
font-size:30px;
font-weight:800;
letter-spacing:-1px;
}
/* 메뉴 */
.menu{
display:flex;
align-items:center;
gap:38px;
}
.menu-item{
position:relative;
}
.menu-btn{
background:none;
border:none;
color:#fff;
font-size:16px;
font-weight:600;
cursor:pointer;
padding:34px 0;
}
.menu-btn:hover{
color:#d6b36a;
}
/* 드롭다운 */
.sub-menu{
position:absolute;
top:90px;
left:50%;
transform:translateX(-50%) translateY(15px);
width:230px;
background:rgba(0,0,0,0.78);
border:1px solid rgba(255,255,255,0.15);
border-radius:16px;
padding:16px 0;
opacity:0;
visibility:hidden;
transition:0.3s;
backdrop-filter:blur(12px);
}
.sub-menu.active{
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(0);
}
.sub-menu a{
display:block;
padding:12px 22px;
font-size:15px;
color:rgba(255,255,255,0.85);
transition:0.3s;
}
.sub-menu a:hover{
color:#d6b36a;
background:rgba(255,255,255,0.08);
}
/* 검색 */
.search-area{
position:absolute;
right:30px;
display:flex;
align-items:center;
gap:12px;
}
.search-btn{
width:42px;
height:42px;
border-radius:50%;
border:1px solid rgba(255,255,255,0.2);
background:rgba(255,255,255,0.08);
display:flex;
justify-content:center;
align-items:center;
cursor:pointer;
}
.search-btn img{
width:18px;
filter:brightness(0) invert(1);
}
.search-box{
width:0;
overflow:hidden;
display:flex;
align-items:center;
gap:10px;
opacity:0;
transition:0.4s;
}
.search-box.active{
width:300px;
opacity:1;
}
.search-box input{
width:100%;
height:42px;
border:none;
outline:none;
border-radius:30px;
padding:0 18px;
background:rgba(255,255,255,0.12);
color:#fff;
}
.search-submit{
min-width:72px;
height:42px;
border:none;
border-radius:30px;
background:#d6b36a;
color:#111;
font-weight:700;
cursor:pointer;
}
/* 메인 */
.hero{
height:calc(100vh - 90px);
display:flex;
align-items:center;
position:relative;
z-index:2;
}
.hero-text{
margin-left:120px;
max-width:700px;
}
.brand{
font-size:46px;
font-weight:700;
color:#d6b36a;
margin-bottom:24px;
}
.title{
font-size:72px;
font-weight:700;
line-height:1.1;
letter-spacing:-3px;
margin-bottom:28px;
}
.desc{
font-size:22px;
color:rgba(255,255,255,0.82);
}
.fade-up{
animation:fadeUp 1s ease;
}
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/* 모바일 */
@media(max-width:768px){
body{
overflow:auto;
}
.header{
height:auto;
}
.header .wrap{
height:auto;
padding:20px;
flex-direction:column;
gap:20px;
}
.logo,
.search-area{
position:static;
}
.menu{
flex-direction:column;
gap:0;
width:100%;
}
.menu-item{
width:100%;
text-align:center;
}
.menu-btn{
padding:14px 0;
}
.sub-menu{
position:static;
transform:none;
width:100%;
display:none;
margin-top:5px;
}
.sub-menu.active{
display:block;
transform:none;
}
.search-box.active{
width:240px;
}
.hero{
justify-content:center;
text-align:center;
padding:0 20px;
}
.hero-text{
margin-left:0;
}
.brand{
font-size:30px;
}
.title{
font-size:42px;
}
.desc{
font-size:16px;
}
}
</style>
</head>
<body>
<video class="bg-video" autoplay muted playsinline></video>
<div class="overlay"></div>
<header class="header">
<div class="wrap">
<div class="logo">
<a href="#">동서식품</a>
</div>
<nav class="menu">
<div class="menu-item">
<button class="menu-btn">회사소개</button>
<div class="sub-menu">
<a href="#">동서식품</a>
<a href="#">식품안전</a>
<a href="#">산업안전보건방침</a>
</div>
</div>
<div class="menu-item">
<button class="menu-btn">제품안내</button>
<div class="sub-menu">
<a href="#">브랜드</a>
<a href="#">제품소개</a>
</div>
</div>
<div class="menu-item">
<button class="menu-btn">홍보센터</button>
<div class="sub-menu">
<a href="#">뉴스</a>
<a href="#">이벤트</a>
<a href="#">동서식품 홍보영상</a>
<a href="#">동영상 레시피</a>
<a href="#">TV CF</a>
<a href="#">커피 클래스</a>
</div>
</div>
<div class="menu-item">
<button class="menu-btn">사회공헌</button>
<div class="sub-menu">
<a href="#">삶의 향기 동서문학상</a>
<a href="#">동서커피클래식</a>
<a href="#">동서식품 장학회</a>
</div>
</div>
<div class="menu-item">
<button class="menu-btn">고객센터</button>
<div class="sub-menu">
<a href="#">FAQ</a>
<a href="#">고객문의</a>
<a href="#">소비자중심경영</a>
<a href="#">고객불만 접수안내</a>
</div>
</div>
</nav>
<div class="search-area">
<button class="search-btn" id="searchOpen">
<img src="https://cdn-icons-png.flaticon.com/512/622/622669.png" alt="검색">
</button>
<div class="search-box" id="searchBox">
<input type="text" id="searchInput" placeholder="검색어를 입력하세요">
<button class="search-submit" id="searchSubmit">검색</button>
</div>
</div>
</div>
</header>
<section class="hero">
<div class="hero-text fade-up">
<div class="brand" id="brand">맥심 (Maxim)</div>
<div class="title" id="title">
지금 행복 하자,<br>
지금 행복 한잔
</div>
<div class="desc" id="desc">
일상 속 가장 따뜻한 커피의 순간
</div>
</div>
</section>
<script>
const video = document.querySelector('.bg-video');
const brand = document.getElementById('brand');
const title = document.getElementById('title');
const desc = document.getElementById('desc');
const contents = [
{
video:'https://www.dongsuh.co.kr/lib/videos/hero_main_maxim.mp4',
brand:'맥심 (Maxim)',
title:'지금 행복 하자,<br>지금 행복 한잔',
desc:'일상 속 가장 따뜻한 커피의 순간'
},
{
video:'https://www.dongsuh.co.kr/lib/videos/hero_main_kanu_barista.mp4',
brand:'카누 (Kanu)',
title:'아이스 아메리카노가<br>맛있는 캡슐',
desc:'깊고 부드러운 커피의 새로운 기준'
},
{
video:'https://www.dongsuh.co.kr/lib/videos/hero_main_post.mp4',
brand:'포스트 (Post)',
title:'새로운 세 겹<br>바삭한 레시피',
desc:'더 맛있고 바삭한 시리얼의 즐거움'
}
];
let current = 0;
function changeContent(index){
video.src = contents[index].video;
brand.innerHTML = contents[index].brand;
title.innerHTML = contents[index].title;
desc.innerHTML = contents[index].desc;
document.querySelector('.hero-text').classList.remove('fade-up');
void document.querySelector('.hero-text').offsetWidth;
document.querySelector('.hero-text').classList.add('fade-up');
video.play();
}
changeContent(current);
video.addEventListener('ended', function(){
current++;
if(current >= contents.length){
current = 0;
}
changeContent(current);
});
/* 메뉴 클릭 드롭다운 */
const menuBtns = document.querySelectorAll('.menu-btn');
menuBtns.forEach(function(btn){
btn.addEventListener('click', function(){
const subMenu = this.nextElementSibling;
document.querySelectorAll('.sub-menu').forEach(function(menu){
if(menu !== subMenu){
menu.classList.remove('active');
}
});
subMenu.classList.toggle('active');
});
});
/* 바깥 클릭 시 메뉴 닫기 */
document.addEventListener('click', function(e){
if(!e.target.closest('.menu')){
document.querySelectorAll('.sub-menu').forEach(function(menu){
menu.classList.remove('active');
});
}
});
/* 검색 */
const searchOpen = document.getElementById('searchOpen');
const searchBox = document.getElementById('searchBox');
const searchSubmit = document.getElementById('searchSubmit');
const searchInput = document.getElementById('searchInput');
searchOpen.addEventListener('click', function(){
searchBox.classList.toggle('active');
if(searchBox.classList.contains('active')){
searchInput.focus();
}
});
searchSubmit.addEventListener('click', function(){
const keyword = searchInput.value.trim();
if(keyword === ''){
alert('검색어를 입력하세요.');
return;
}
alert(keyword + ' 검색');
});
searchInput.addEventListener('keydown', function(e){
if(e.key === 'Enter'){
searchSubmit.click();
}
});
</script>
</body>
</html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>동서식품</title>
<style>
*{
margin:0;
padding:0;
box-sizing:border-box;
}
body{
font-family:'Pretendard','Noto Sans KR',sans-serif;
color:#fff;
overflow:hidden;
background:#000;
}
a{
text-decoration:none;
color:#fff;
}
.bg-video{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
object-fit:cover;
z-index:-2;
}
.overlay{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
background:linear-gradient(
to top,
rgba(0,0,0,0.82),
rgba(0,0,0,0.28)
);
z-index:-1;
}
.wrap{
width:100%;
max-width:1400px;
margin:0 auto;
padding:0 30px;
}
/* 헤더 */
.header{
height:90px;
position:relative;
z-index:20;
border-bottom:1px solid rgba(255,255,255,0.12);
background:rgba(0,0,0,0.18);
backdrop-filter:blur(8px);
}
.header .wrap{
height:90px;
display:flex;
align-items:center;
justify-content:center;
position:relative;
}
/* 로고 */
.logo{
position:absolute;
left:30px;
}
.logo a{
font-size:30px;
font-weight:800;
letter-spacing:-1px;
}
/* 메뉴 */
.menu{
display:flex;
align-items:center;
gap:38px;
}
.menu-item{
position:relative;
}
.menu-btn{
background:none;
border:none;
color:#fff;
font-size:16px;
font-weight:600;
cursor:pointer;
padding:34px 0;
}
.menu-btn:hover{
color:#d6b36a;
}
/* 드롭다운 */
.sub-menu{
position:absolute;
top:90px;
left:50%;
transform:translateX(-50%) translateY(15px);
width:230px;
background:rgba(0,0,0,0.78);
border:1px solid rgba(255,255,255,0.15);
border-radius:16px;
padding:16px 0;
opacity:0;
visibility:hidden;
transition:0.3s;
backdrop-filter:blur(12px);
}
.sub-menu.active{
opacity:1;
visibility:visible;
transform:translateX(-50%) translateY(0);
}
.sub-menu a{
display:block;
padding:12px 22px;
font-size:15px;
color:rgba(255,255,255,0.85);
transition:0.3s;
}
.sub-menu a:hover{
color:#d6b36a;
background:rgba(255,255,255,0.08);
}
/* 검색 */
.search-area{
position:absolute;
right:30px;
display:flex;
align-items:center;
gap:12px;
}
.search-btn{
width:42px;
height:42px;
border-radius:50%;
border:1px solid rgba(255,255,255,0.2);
background:rgba(255,255,255,0.08);
display:flex;
justify-content:center;
align-items:center;
cursor:pointer;
}
.search-btn img{
width:18px;
filter:brightness(0) invert(1);
}
.search-box{
width:0;
overflow:hidden;
display:flex;
align-items:center;
gap:10px;
opacity:0;
transition:0.4s;
}
.search-box.active{
width:300px;
opacity:1;
}
.search-box input{
width:100%;
height:42px;
border:none;
outline:none;
border-radius:30px;
padding:0 18px;
background:rgba(255,255,255,0.12);
color:#fff;
}
.search-submit{
min-width:72px;
height:42px;
border:none;
border-radius:30px;
background:#d6b36a;
color:#111;
font-weight:700;
cursor:pointer;
}
/* 메인 */
.hero{
height:calc(100vh - 90px);
display:flex;
align-items:center;
position:relative;
z-index:2;
}
.hero-text{
margin-left:120px;
max-width:700px;
}
.brand{
font-size:46px;
font-weight:700;
color:#d6b36a;
margin-bottom:24px;
}
.title{
font-size:72px;
font-weight:700;
line-height:1.1;
letter-spacing:-3px;
margin-bottom:28px;
}
.desc{
font-size:22px;
color:rgba(255,255,255,0.82);
}
.fade-up{
animation:fadeUp 1s ease;
}
@keyframes fadeUp{
from{
opacity:0;
transform:translateY(40px);
}
to{
opacity:1;
transform:translateY(0);
}
}
/* 모바일 */
@media(max-width:768px){
body{
overflow:auto;
}
.header{
height:auto;
}
.header .wrap{
height:auto;
padding:20px;
flex-direction:column;
gap:20px;
}
.logo,
.search-area{
position:static;
}
.menu{
flex-direction:column;
gap:0;
width:100%;
}
.menu-item{
width:100%;
text-align:center;
}
.menu-btn{
padding:14px 0;
}
.sub-menu{
position:static;
transform:none;
width:100%;
display:none;
margin-top:5px;
}
.sub-menu.active{
display:block;
transform:none;
}
.search-box.active{
width:240px;
}
.hero{
justify-content:center;
text-align:center;
padding:0 20px;
}
.hero-text{
margin-left:0;
}
.brand{
font-size:30px;
}
.title{
font-size:42px;
}
.desc{
font-size:16px;
}
}
</style>
</head>
<body>
<video class="bg-video" autoplay muted playsinline></video>
<div class="overlay"></div>
<header class="header">
<div class="wrap">
<div class="logo">
<a href="#">동서식품</a>
</div>
<nav class="menu">
<div class="menu-item">
<button class="menu-btn">회사소개</button>
<div class="sub-menu">
<a href="#">동서식품</a>
<a href="#">식품안전</a>
<a href="#">산업안전보건방침</a>
</div>
</div>
<div class="menu-item">
<button class="menu-btn">제품안내</button>
<div class="sub-menu">
<a href="#">브랜드</a>
<a href="#">제품소개</a>
</div>
</div>
<div class="menu-item">
<button class="menu-btn">홍보센터</button>
<div class="sub-menu">
<a href="#">뉴스</a>
<a href="#">이벤트</a>
<a href="#">동서식품 홍보영상</a>
<a href="#">동영상 레시피</a>
<a href="#">TV CF</a>
<a href="#">커피 클래스</a>
</div>
</div>
<div class="menu-item">
<button class="menu-btn">사회공헌</button>
<div class="sub-menu">
<a href="#">삶의 향기 동서문학상</a>
<a href="#">동서커피클래식</a>
<a href="#">동서식품 장학회</a>
</div>
</div>
<div class="menu-item">
<button class="menu-btn">고객센터</button>
<div class="sub-menu">
<a href="#">FAQ</a>
<a href="#">고객문의</a>
<a href="#">소비자중심경영</a>
<a href="#">고객불만 접수안내</a>
</div>
</div>
</nav>
<div class="search-area">
<button class="search-btn" id="searchOpen">
<img src="https://cdn-icons-png.flaticon.com/512/622/622669.png" alt="검색">
</button>
<div class="search-box" id="searchBox">
<input type="text" id="searchInput" placeholder="검색어를 입력하세요">
<button class="search-submit" id="searchSubmit">검색</button>
</div>
</div>
</div>
</header>
<section class="hero">
<div class="hero-text fade-up">
<div class="brand" id="brand">맥심 (Maxim)</div>
<div class="title" id="title">
지금 행복 하자,<br>
지금 행복 한잔
</div>
<div class="desc" id="desc">
일상 속 가장 따뜻한 커피의 순간
</div>
</div>
</section>
<script>
const video = document.querySelector('.bg-video');
const brand = document.getElementById('brand');
const title = document.getElementById('title');
const desc = document.getElementById('desc');
const contents = [
{
video:'https://www.dongsuh.co.kr/lib/videos/hero_main_maxim.mp4',
brand:'맥심 (Maxim)',
title:'지금 행복 하자,<br>지금 행복 한잔',
desc:'일상 속 가장 따뜻한 커피의 순간'
},
{
video:'https://www.dongsuh.co.kr/lib/videos/hero_main_kanu_barista.mp4',
brand:'카누 (Kanu)',
title:'아이스 아메리카노가<br>맛있는 캡슐',
desc:'깊고 부드러운 커피의 새로운 기준'
},
{
video:'https://www.dongsuh.co.kr/lib/videos/hero_main_post.mp4',
brand:'포스트 (Post)',
title:'새로운 세 겹<br>바삭한 레시피',
desc:'더 맛있고 바삭한 시리얼의 즐거움'
}
];
let current = 0;
function changeContent(index){
video.src = contents[index].video;
brand.innerHTML = contents[index].brand;
title.innerHTML = contents[index].title;
desc.innerHTML = contents[index].desc;
document.querySelector('.hero-text').classList.remove('fade-up');
void document.querySelector('.hero-text').offsetWidth;
document.querySelector('.hero-text').classList.add('fade-up');
video.play();
}
changeContent(current);
video.addEventListener('ended', function(){
current++;
if(current >= contents.length){
current = 0;
}
changeContent(current);
});
/* 메뉴 클릭 드롭다운 */
const menuBtns = document.querySelectorAll('.menu-btn');
menuBtns.forEach(function(btn){
btn.addEventListener('click', function(){
const subMenu = this.nextElementSibling;
document.querySelectorAll('.sub-menu').forEach(function(menu){
if(menu !== subMenu){
menu.classList.remove('active');
}
});
subMenu.classList.toggle('active');
});
});
/* 바깥 클릭 시 메뉴 닫기 */
document.addEventListener('click', function(e){
if(!e.target.closest('.menu')){
document.querySelectorAll('.sub-menu').forEach(function(menu){
menu.classList.remove('active');
});
}
});
/* 검색 */
const searchOpen = document.getElementById('searchOpen');
const searchBox = document.getElementById('searchBox');
const searchSubmit = document.getElementById('searchSubmit');
const searchInput = document.getElementById('searchInput');
searchOpen.addEventListener('click', function(){
searchBox.classList.toggle('active');
if(searchBox.classList.contains('active')){
searchInput.focus();
}
});
searchSubmit.addEventListener('click', function(){
const keyword = searchInput.value.trim();
if(keyword === ''){
alert('검색어를 입력하세요.');
return;
}
alert(keyword + ' 검색');
});
searchInput.addEventListener('keydown', function(e){
if(e.key === 'Enter'){
searchSubmit.click();
}
});
</script>
</body>
</html>
#동서식품 클로링 작업