<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>포트폴리오용 오설록</title>
<link rel="stylesheet" href="./css/common.css" type="text/css">
<link rel="stylesheet" href="./css/slick.css" type="text/css">
<link rel="stylesheet" href="./css/main.css" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="./js/slick.min.js" type="text/javascript"></script>
<script src="./js/common.js" type="text/javascript"></script>
</head>
<body>
<div id="wrap">
<div class="popup">
<a href="#">지금 가입하면 5천원 할인 쿠폰 증정!</a>
<div class="popupClose">
닫기
</div> <!-- popupClose end -->
</div> <!-- popup end -->
<header id="header">
<div class="inner">
<h1><a href="index.html"><img src="./images/common/logo.png" alt="오설록"></a></h1>
<nav>
<ul class="gnb">
<!-- ul.gnb>li*4>a[href="#"] -->
<li><a href="#">brand story</a>
<ul class="depth2">
<li><a href="#">about Osulloc</a></li>
<li><a href="#">since 1979</a></li>
<li><a href="#">tea house</a></li>
</ul>
</li>
<li><a href="#">shopping</a>
<ul class="depth2">
<li><a href="#">tea shop</a></li>
<li><a href="#">tea ware shop</a></li>
<li><a href="#">gift shop</a></li>
<li><a href="#">store</a></li>
</ul>
</li>
<li><a href="#">event</a>
<ul class="depth2">
<li><a href="#">event</a></li>
<li><a href="#">membership</a></li>
<li><a href="#">magazine</a></li>
</ul>
</li>
<li><a href="#">cs center</a>
<ul class="depth2">
<li><a href="#">notice</a></li>
<li><a href="#">review</a></li>
<li><a href="#">contact us</a></li>
</ul>
</li>
</ul>
</nav>
<ul class="member">
<li><a href="#">login</a></li>
<li><a href="#">join</a></li>
<li><a href="#">cart</a></li>
</ul>
<p class="allMenu">전체메뉴</p>
<p class="search">검색</p>
</div> <!-- inner end -->
<div class="depth2Bg"></div>
</header> <!-- header end -->
<article id="mainBanner">
<ul class="mb">
<li class="mb1">
<a href="#">
<p class="comment">따뜻해지는 봄날, 제주 귤꽃향의 싱그러움으로 몸을 깨우세요!</p>
<h3><span>Welcome Spring</span> 3월 출석체크</h3>
<p class="term">2021년 3월 10일 ~ 2021년 3월 31일</p>
</a>
</li>
<li class="mb2">
<a href="#">
<p class="comment">티웨어 킨토 런칭 기념 이벤트</p>
<h3><span>킨토</span> 전 제품 30% 할인</h3>
<p class="term">2021년 3월 10일 ~ 2021년 3월 31일</p>
</a>
</li>
<li class="mb3">
<a href="#">
<p class="comment">3월 다다일상 리뷰 작성하고, TEA 아이스크림 받으세요!</p>
<h3><span>다다일상</span> 리뷰 이벤트</h3>
<p class="term">2021년 3월 10일 ~ 2021년 3월 31일</p>
</a>
</li>
</ul>
</article> <!-- mainBanner end -->
<div id="contentsMain">
<section id="product" class="inner">
<h2>Weekly Best</h2>
<ul class="clearfix">
<li>
<div class="thumb">
<a href="#">
<span class="rank">1</span>
<img src="./images/main/product_01.png" alt="파라다이스 세트">
<div class="hoverImg">
<img src="./images/main/product_01_on.png" alt="파라다이스 세트">
</div>
</a>
</div>
<h3 class="productName"><a href="#">파라다이스 세트</a></h3>
<p class="price">19,200원</p>
<p class="sale"><span>24,000원</span> (20%↓)</p>
</li>
<li>
<div class="thumb">
<a href="#">
<span class="rank">2</span>
<img src="./images/main/product_02.png" alt="산호섬 20입">
<div class="hoverImg">
<img src="./images/main/product_02_on.png" alt="산호섬 20입">
</div>
</a>
</div>
<h3 class="productName"><a href="#">산호섬 20입</a></h3>
<p class="price">10,800원</p>
<p class="sale"><span>12,000원</span> (10%↓)</p>
</li>
<li>
<div class="thumb">
<a href="#">
<span class="rank">3</span>
<img src="./images/main/product_03.png" alt="달빛섬 20입">
<div class="hoverImg">
<img src="./images/main/product_03_on.png" alt="달빛섬 20입">
</div>
</a>
</div>
<h3 class="productName"><a href="#">달빛섬 20입</a></h3>
<p class="price">10,800원</p>
<p class="sale"><span>12,000원</span> (10%↓)</p>
</li>
<li>
<div class="thumb">
<a href="#">
<span class="rank">4</span>
<img src="./images/main/product_04.png" alt="영귤섬 20입">
<div class="hoverImg">
<img src="./images/main/product_04_on.png" alt="영귤섬 20입">
</div>
</a>
</div>
<h3 class="productName"><a href="#">영귤섬 20입</a></h3>
<p class="price">10,800원</p>
<p class="sale"><span>12,000원</span> (10%↓)</p>
</li>
</ul>
<p class="btnMore">
<a href="#">인기상품 더보기</a>
</p>
</section> <!-- product end -->
<section id="teaware" class="inner clearfix">
<div class="teawareTxt">
<h2>Tea ware</h2>
<p class="comment">
다채로운 오설록의 차를 즐길 수 있는<br>
다양한 Tea ware 브랜드를 만나보세요.
</p>
<p class="btnMore"><a href="#">브랜드 전체보기</a></p>
</div>
<ul class="teawareBrand">
<li><a href="#"><img src="./images/main/torim.jpg" alt="토림"></a></li>
<li><a href="#"><img src="./images/main/kinto.jpg" alt="킨토"></a></li>
<li><a href="#"><img src="./images/main/kwangjuyo.jpg" alt="광주요"></a></li>
</ul>
</section> <!-- teaware end -->
<section id="story">
<video src="./images/main/brandstory.mp4" autoplay muted loop></video>
<div class="storyTxt inner">
<h2>Osulloc Story</h2>
<p class="comment">
차 문화 부흥을 향한 아름다운 집념, 오설록<br>
Beautiful Devotion to Revive Tea Culture, Osulloc
</p>
<p class="btnMore"><a href="#">자세히보기</a></p>
</div>
</section> <!-- story end -->
<section id="guide" class="inner clearfix">
<a href="#">
<dl class="franchise">
<dt>가맹점 개설안내</dt>
<dd>성공 창업을 위한 선택</dd>
</dl>
</a>
<dl class="store">
<dt>매장찾기</dt>
<dd>
가까운 오설록 매장을<br>
확인해 보세요!
</dd>
<dd>
<form>
<fieldset>
<legend>매장검색</legend>
<input type="text" placeholder="매장명을 입력하세요."><input type="submit" value="검색">
</fieldset>
</form>
</dd>
</dl>
<div class="info">
<div class="news">
<h3>오설록 소식</h3>
<ul>
<li><a href="#">오설록몰 개인정보처리방침 일부가 변경됩니다. <span class="date">2020.02.27</span></a></li>
<li><a href="#">시스템 변경 오픈에 따른 사용가능결제수단 및... <span class="date">2020.01.21</span></a></li>
<li><a href="#">뷰티포인트 통합 회원가입, 뷰티포인트 확인 정상화... <span class="date">2019.11.11</span></a></li>
<li class="more"><a href="#">more+</a></li>
</ul>
</div>
<ul class="quickLink">
<li><a href="#">티뮤지엄<span>Tea Museum</span></a></li>
<li><a href="#">매거진<span>Magazine</span></a></li>
</ul>
</div> <!-- info end -->
</section> <!-- guide end -->
<section id="insta" class="inner">
<h2><span>Follow Us</span> #OSULLOC</h2>
<ul class="instaList">
<li><a href="#"><img src="./images/main/sns_01.png" alt="sns사진"></a></li>
<li><a href="#"><img src="./images/main/sns_02.png" alt="sns사진"></a></li>
<li><a href="#"><img src="./images/main/sns_03.png" alt="sns사진"></a></li>
<li><a href="#"><img src="./images/main/sns_04.png" alt="sns사진"></a></li>
<li><a href="#"><img src="./images/main/sns_05.png" alt="sns사진"></a></li>
<li><a href="#"><img src="./images/main/sns_01.png" alt="sns사진"></a></li>
<li><a href="#"><img src="./images/main/sns_02.png" alt="sns사진"></a></li>
<li><a href="#"><img src="./images/main/sns_03.png" alt="sns사진"></a></li>
<li><a href="#"><img src="./images/main/sns_04.png" alt="sns사진"></a></li>
<li><a href="#"><img src="./images/main/sns_05.png" alt="sns사진"></a></li>
</ul>
</section> <!-- insta end -->
</div> <!-- contentsMain end -->
<footer id="footer">
<div class="inner">
<h1><img src="./images/common/footer_logo.png" alt="오설록"></h1>
<ul class="footerLink">
<li><a href="#">회사소개</a></li>
<li><a href="#">개인정보처리방침</a></li>
<li><a href="#">서비스이용약관</a></li>
<li><a href="#">뷰티포인트</a></li>
</ul>
<address>
서울특별시 용산구 한강대로 100, 14층(한강로2가) 대표이사 : 서혁제<br>
사업자등록번호 : 390-87-01499 통신판매업신고번호 : 2019-서울용산-1173호
</address>
<p class="copy">
Copyright © 2021 OSULLOC. All Rights Reserved.
</p>
<ul class="sns">
<li><a href="#"><img src="./images/common/icon_facebook.png" alt="페이스북"></a></li>
<li><a href="#"><img src="./images/common/icon_instar.png" alt="인스타그램"></a></li>
<li><a href="#"><img src="./images/common/icon_youtube.png" alt="유튜브"></a></li>
</ul>
<p class="cs">
고객상담센터 · 주문/배송문의
</p>
<p class="number">
080-805-5555
</p>
</div>
</footer> <!-- footer end -->
<a class="gotop" href="#">위로가기</a>
</div> <!-- wrap end -->
</body>
</html>
Engineering is the closest thing to magic that exists in the world.