- See Full Page →
-
`20 E-commerce
& Site Renewal
Dyson
Renewal
1
Skill Used
→ Research → UX design → Design System
→ UI Design→ Development → Prototyping *
→ UI Design→ Development → Prototyping *
현 다이슨 사이트의 문제점을 도출하고 브랜드의 슬로건과
톤앤매너에 맞추어
새롭게 사이트를 제작하였습니다. 정제되지
않고 중복된 컨텐츠들을 정돈하고
사용자들의 집중을 위해
강조하고자 하는 콘텐츠들은 카테고리화하여 한곳에
모아
최소화된 동선을 제공하고자 하였습니다. 직관적인 내비게이션
제작과
레이아웃을 간소함으로서 상품이 돋보일 수 있도록
제작하였습니다.
Planning Process
Informations
Viewport : Desktop
IE Support : IE9+
| Category | Source | Related Keyword |
|---|---|---|
| HTML | Index.html | HTML5 |
| HTML | product.html | HTML5 |
| CSS | style.css | CSS3 |
| CSS | product.css | CSS3 |
| CSS | reset.css | CSS3 |
| JS | script.js | jQuery ∙ Slide |
2
Code View
- Index.html
- product.html
- style.css
- product.css
- reset.css
- script.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>dyson korea</title>
<!--favicon-->
<link rel="shortcut icon" href="images/icon/dyson-fav.ico">
<!--style sheet link below -->
<link rel="stylesheet" href="css/font.css" type="text/css">
<link rel="stylesheet" href="css/reset.css" type="text/css">
<link rel="stylesheet" href="css/style.css" type="text/css">
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<!--script link below -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
<script src="js/script.js"></script>
<script src="js/content-slide.js"></script>
</head>
<body style="min-width: 1440px">
<ul id="skipmenu">
<li><a href="#" title="상단메뉴 바로가기">상단메뉴 바로가기</a></li>
<li><a href="#" title="컨텐츠메뉴 바로가기">컨텐츠메뉴 바로가기</a></li>
<li><a href="#" title="하단메뉴 바로가기">하단메뉴 바로가기</a></li>
</ul>
<header id="header_wrap">
<div id="notice">
<ul>
<li><a href="#">11월 10일(월) 저녁 8시, 에어랩 스타일러 라이브 방송! 다양한 구매 혜택까지!</a></li>
</ul>
</div>
<!--notice-->
<nav id="gnb">
<h1 id="logo">
<a href="index.html" title="메인페이지로 이동"><img src="images/icon/dyson-logo.png" alt="logo"></a>
</h1>
<div id="gnb_inner" class="cleafix">
<!-- LEFT MENU START -->
<div class="menu_left">
<ul class="menu_top" style="overflow: hidden;">
<li class="product"><a href="#" title="제품">Products</a></li>
<li class="info"><a href="#" title="인포메이션">Info</a></li>
<li><a href="#" title="브랜드 소개">About Dyson</a></li>
</ul>
</div>
<!-- RIGHT MENU START -->
<div class="menu_right">
<ul class="menu_top" style="overflow: hidden;">
<li>
<a class="search_drop_btn" href="#" title="검색"><img src="images/searchbtn.png" alt="이미지"></a>
</li>
<li><a href="#" title="로그인">Login</a></li>
<li><a href="#" title="장바구니">Cart</a></li>
<li><a href="#" title="마이페이지">My Page</a></li>
</ul>
</div>
<!--RIGHT MENU END-->
<!------Search Drop Bar------>
<div class="search_drop">
<form id="search_bar" action="#" method="get" target="_self">
<input id="banner_action" name="banner_action" value="" type="hidden">
<div class="search_header">
<fieldset>
<a href="#" class="search_btn"><img class="search_icon" src="images/searchbtn.png"></a>
<input id="keyword" name="keyword" class="input_text" placeholder="Type here to search" value="" type="text">
<a href="#" class="search_close_btn"><img class="close_icon" src="images/closebtn.png"></a>
</fieldset>
</div>
</form>
</div>
<!--------Search Drop Bar-------->
<!------------- SUB MENU START -------------->
<div class="sub_menu">
<div class="submenu_pro subs">
<ul class="category">
<li class="sub_tit">by Category</li>
<li class="sub">
<a href="#" title="">Shop All →</a>
<div class="category_box">
<div class="sub_banner">
<a href="#">
<img src="images/subs_v10_motors.png">
</a>
<p>Dyson V10 Series</p>
</div>
</div>
</li>
<li class="sub">
<a class="on" href="product-cordlessVaccum.html" title="페이지이동">Cord-less Vaccum</a>
<div class="category_box">
<ul class="category_list clearfix">
<li class="kinds vaccum"><a href="#">V11</a></li>
<li class="kinds vaccum"><a href="#">V8 Slim</a></li>
<li class="kinds vaccum"><a href="#">V7</a></li>
<li class="kinds vaccum"><a href="#">Cyclone V10</a></li>
<li class="kinds vaccum"><a href="#">Digital-Slim</a></li>
</ul>
<div class="sub_banner">
<a href="#">
<img src="images/subs_vaccum.png">
</a>
<p>Dyson V11 Series</p>
</div>
</div>
</li>
<li class="sub">
<a class="on" href="product-haircare.html" title="페이지이동">Hair Care</a>
<div class="category_box">
<ul class="category_list clearfix">
<li class="kinds haircare"><a href="#">Air-Wrap Styler</a></li>
<li class="kinds haircare"><a href="#">Corrale Hair Straightener</a></li>
<li class="kinds haircare"><a href="#">Super-Sonic Hair Drier</a></li>
<li class="kinds haircare"><a href="#">Super-Sonic Professional</a></li>
</ul>
<div class="sub_banner">
<a href="#">
<img src="images/subs_haircare.png">
</a>
<p>Dyson SuperSonic Hair Drier</p>
</div>
</div>
</li>
<li class="sub">
<a class="on" href="#" title="페이지이동">Air Purifier</a>
<div class="category_box">
<ul class="category_list clearfix">
<li class="kinds air"><a href="#">Pure Hot+Cool</a></li>
<li class="kinds air"><a href="#">Pure Cool</a></li>
<li class="kinds air"><a href="#">Pure Cool Me</a></li>
<li class="kinds air"><a href="#">Pure Cool Cryptomic</a></li>
<li class="kinds air"><a href="#">Pure Humidify+Cool</a></li>
<li class="kinds air"><a href="#">Pure Humidify+Cool Cryptomic</a></li>
<li class="kinds air"><a href="#">Humidifier</a></li>
</ul>
<div class="sub_banner">
<a href="#">
<img src="images/subs_airpuri.png">
</a>
<p>Dyson Humidifier</p>
</div>
</div>
</li>
<li class="sub">
<a class="on" href="#" title="페이지이동">Lighting</a>
<div class="category_box">
<ul class="category_list clearfix">
<li class="kinds lighting"><a href="#">Light Cycle Morph</a></li>
<li class="kinds lighting"><a href="#">Light Cycle</a></li>
</ul>
<div class="sub_banner">
<a href="#">
<img src="images/subs_lighting.png">
</a>
<p>Dyson Light Cycle Morph</p>
</div>
</div>
</li>
</ul>
<!----Product / 3depth 상품 리스트---->
<!----Category---->
<div class="sub_banner">
<a href="#">
<img src="images/subs_haircare.png">
</a>
<p>Dyson SuperSonic Hair Drier</p>
</div>
</div>
<!----SUB MENU PRODUCT END---->
</div>
<!--submenu (wrapper) END-->
<div class="sub_menu">
<div class="submenu_info subs">
<ul class="category">
<li class="sub"><a href="#">Info</a></li>
<li class="sub"><a href="#">Event</a></li>
<li class="sub"><a href="#">Notice</a></li>
<li class="sub"><a href="#">Review</a></li>
<li class="sub"><a href="#">Q&A</a></li>
<li class="sub"><a href="#">FAQ</a></li>
</ul>
<div class="sub_banner" style="opacity: 1">
<a href="#">
<img src="images/subs_giftedition.png">
</a>
<p>Dyson Corrale Color Gift Edition</p>
</div>
</div>
<!--submenu02(info) END-->
</div>
<!--submenu (wrapper) END-->
</div>
<!--gnb_inner-->
</nav>
<!--gnb-->
</header>
<!---HEADER END-->
<div id="visual_wrap">
<ul id="slider">
<li class="item">
<img src="images/mainvisual_01.png" alt="visual">
<div class="text txt_event">
<div class="top">Dyson V8 Absolute</div>
<div class="bottom">Vacuum cleaner.</div>
<div class="sub_top">Cordless. Hassle-free. Powerful suction.</div>
<div class="sub_bottom">선이 없는 자유로움. 다이슨의 강력한 무선 진공 청소기.</div>
</div>
<a class="shop_btn" href="#" title="페이지 이동">Shop Now</a>
</li>
<li class="item">
<img src="images/mainvisual_02.png" alt="visual">
<div class="text txt_event">
<div class="top">Dyson Digital Slim</div>
<div class="bottom">Vacuum cleaner.</div>
<div class="sub_top">Lightweight. Slim Fluffy Head.</div>
<div class="sub_bottom">다이슨의 가볍고 강력한 무선청소기.</div>
</div>
<a class="shop_btn" href="#" title="페이지 이동">Shop Now</a>
</li>
<li class="item">
<img src="images/mainvisual_03.png" alt="visual">
<div class="text txt_event">
<div class="top">Dyson Air Purifier</div>
<div class="bottom">Purify, humidify and cool you</div>
<div class="sub_top">Cordless. Hassle-free. Powerful suction.</div>
<div class="sub_bottom">선이 없는 자유로움. 다이슨의 강력한 무선 진공 청소기.</div>
</div>
<a class="shop_btn" href="#" title="페이지 이동">Shop Now</a>
</li>
<li class="item">
<img src="images/mainvisual_04.png" alt="visual">
<div class="text txt_event">
<div class="top">Dyson Super Sonic Hair Drier.</div>
<div class="sub_top">Fastest Heat + No Extreme Heat </div>
<div class="sub_bottom">빠른 건조.
과도한 열 손상 예방.</div>
</div>
<a class="shop_btn" href="#" title="페이지 이동">Shop Now</a>
</li>
</ul>
</div>
<!--VISUAL END-->
<div id="content01_wrap">
<div id="content01_inner" class="clearfix">
<div id="promotion">
<div class="promo_img"></div>
<div class="promo_txt">
<div class="toggle_online">Online Exclusive</div>
<p class="con_tit">쓰던 청소기 반납시<br>
V8 모든 종류 <span>40만원 할인</span></p>
<p class="con_subs">다이슨 공식 온라인샵에서만 진행.</p>
<a class="goshop_btn" href="#" title="페이지이동">Go to the Shop<span class="arrow">‣</span></a>
</div>
</div>
<!----Promotion END---->
<div id="bfd_event">
<div class="ani_wrapper">
<div class="ani_holder">
<span class="toggle_bfd">Free Shipping · BC Card 추가 10% 할인</span>
<span class="toggle_bfd">Free Shipping · BC Card 추가 10% 할인</span>
</div>
</div>
<h2 class="sub_tit">Dyson Black Friday</h2>
<p class="bfd_date">2020.11.02 - 12.06</p>
<ul class="slider clearfix">
<li class="slider_inner">
<p class="off_caption">40% off</p>
<a class="img" href="#">
<img src="images/bfd_01_v7.png" alt="페이지 이동">
</a>
<a class="tit_btn" href="#">다이슨 V7 무선청소기</a>
<p class="f_tit">블랙 프라이데이 가격, 최대 35만원 할인</p>
<p class="f_sub">완벽한 바닥 청소를 위한 설계.</p>
</li>
<li class="slider_inner">
<p class="off_caption">40% off</p>
<a class="img" href="#">
<img src="images/bfd_02_v8.png" alt="페이지 이동">
</a>
<a class="tit_btn" href="#">다이슨 V8 Absoulte 무선청소기</a>
<p class="f_tit">블랙 프라이데이 가격, 최대 25만원 할인</p>
<p class="f_sub">어느 바닥 유형에서도 강력하게 청소!</p>
</li>
<li class="slider_inner">
<p class="off_caption">40% off</p>
<a class="img" href="#">
<img src="images/bfd_03_am10.png" alt="페이지 이동">
</a>
<a class="tit_btn" href="#">다이슨 가습기 AM10</a>
<p class="f_tit">블랙 프라이데이 가격, 최대 26만원 할인</p>
<p class="f_sub">자동으로 공기를 정화하고, 가습하여 더 건강한 환경을 만듭니다</p>
</li>
<li class="slider_inner">
<p class="off_caption">40% off</p>
<a class="img" href="#">
<img src="images/bfd_04_purecool.png" alt="페이지 이동">
</a>
<a class="tit_btn" href="#">다이슨 퓨어쿨 크립토믹</a>
<p class="f_tit">블랙 프라이데이 가격, 최대 39만원 할인</p>
<p class="f_sub">간편한 세척 및 관리, 일년내내 정화된 공기</p>
</li>
<li class="slider_inner">
<p class="off_caption">40% off</p>
<a class="img" href="#">
<img src="images/bfd_05_purehot&cool.png" alt="페이지 이동">
</a>
<a class="tit_btn" href="#">다이슨 퓨어 핫앤쿨 크립토믹</a>
<p class="f_tit">블랙 프라이데이 가격, 최대 39만원 할인</p>
<p class="f_sub">오염 물질을 감지 후 포착, 정화된 공기로 온풍과 냉풍 분사합니다.</p>
</li>
</ul>
<a class="shop_btn" href="#" title="페이지 이동">Shop Now</a>
</div>
<!----BFD Event END---->
</div>
<!----Contents01 Inner END---->
<div id="review_event" class="clearfix">
<div class="review_txt">
<p><span>매달 300분</span>의 <span>우수 후기</span>를 선정하여,<br>소정의 선물을 보내드립니다.</p>
<a class="goshop_btn" href="#" title="페이지이동">Go to the Shop<span class="arrow">‣</span></a>
</div>
</div>
<!----Review Event END---->
<div id="contents02_inner" class="clearfix">
<div id="best" class="clearfix">
<h2 class="sub_tit">Best Seller.</h2>
<p class="best_txt">한달동안 다이슨 온라인샵에서 가장 많이 판매된 제품을 소개해드립니다.</p>
<ul class="slider clearfix">
<li class="slider_inner">
<p class="new_caption">2020 New</p>
<a class="img" href="#">
<img src="images/best_01.png" alt="페이지 이동">
</a>
<a class="tit_btn" href="#">다이슨 코랄 헤어 스트레이너</a>
<p class="f_tit">정교한 스타일링, 손상은 반으로. 유선 또는 무선으로 사용 가능</p>
<p class="f_sub">‘퍼플’ 컬러는 오직 홈페이지에서만 구매 가능합니다.</p>
<a class="see_more_btn" href="더 보기">See More<span class="m_arrow">‣</span></a>
</li>
<li class="slider_inner">
<p class="bfd_caption">Free Gift</p>
<a class="img" href="#"><img src="images/best_02.png" alt="페이지 이동"></a>
<a class="tit_btn" href="#">다이슨 슈퍼소닉 헤어 드라이어</a>
<p class="f_tit">과도한 열 없이 빠른 건조, 헤어 타입별 맞춤 설계</p>
<p class="f_sub">‘퍼플’ 컬러는 오직 홈페이지에서만 구매 가능합니다.</p>
<a class="see_more_btn" href="더 보기">See More<span class="m_arrow">‣</span></a>
</li>
<li class="slider_inner">
<p class="bfd_caption">Black Friday</p>
<a class="img" href="#">
<img src="images/best_03.png" alt="페이지 이동">
</a>
<a class="tit_btn" href="#">다이슨 휴미디파이 AM10</a>
<p class="f_tit">방 안 전체의 공기를 정화하는 가습 공기청정기</p>
<p class="f_sub">블랙프라이데이 최대 26만원 할인</p>
<a class="see_more_btn" href="더 보기">See More<span class="m_arrow">‣</span></a>
</li>
</ul>
</div>
</div>
<!--Contents02_inner END-->
</div>
<!---Contents Wrap END--->
<div id="card_promotion">
<div class="card_txt">
<div class="toggle_online">Online Exclusive</div>
<p>11월 한정 프로모션<br><span>KB국민 카드로 결제 시 10%할인</span></p>
<p class="card_subs">블랙프라이데이 할인 제품과 중복 할인!</p>
<a class="goshop_btn" href="#" title="페이지이동">Go to the Shop<span class="arrow">‣</span></a>
</div>
</div>
<!---Card Promotion END--->
<div id="contents03_inner" class="clearfix">
<div id="store">
<h2 class="sub_tit">Dyson Flagship Store</h2>
<p class="store_txt">다이슨 기술은 생활의 실제적인 문제를 해결하기 위해 설계되었습니다.<br>그것을 이해하기 위한 <span>가장 좋은 방법은 제품을 경험하는 것입니다.</span></p>
<ul class="store_box clearfix">
<li class="store_box">
<p class="s_category">Service Center</p>
<div><a class="s_img" href="#">
<img src="images/store_Demostore.png" alt="페이지 이동">
</a></div>
<p class="s_tit">다이슨 프리미엄<br>서비스 센터</p>
<p class="s_sub">다이슨 제품 전문가들을 통한<br>정확한 진단 및 수리를 제공해 드립니다.</p>
<a class="see_more_btn" href="더 보기">Discover<span class="m_arrow">‣</span></a>
</li>
<li class="store_box">
<p class="s_category">Deparment Store</p>
<div><a class="s_img" href="#"><img src="images/store_Popup.png" alt="페이지 이동"></a>
</div>
<p class="s_tit">신세계 백화점<br>팝업 스토어</p>
<p class="s_sub">팝업 스토어를 통해 다양한 제품을 전문가의<br>설명과 함께 체험해 보실 수 있습니다.</p>
<a class="see_more_btn" href="더 보기">Discover<span class="m_arrow">‣</span></a>
</li>
<li class="store_box">
<p class="s_category">Dyson Beauty Lap</p>
<div><a class="s_img" href="#">
<img src="images/store_ServiceCentre.png" alt="페이지 이동">
</a></div>
<p class="s_tit">다이슨 팝업 뷰티 LAP<br>사운즈 한남</p>
<p class="s_sub">사전 예약을 통해 헤어 스타일링 서비스를<br>받으실 수 있습니다.</p>
<a class="see_more_btn" href="더 보기">Discover<span class="m_arrow">‣</span></a>
</li>
</ul>
</div>
<!--store END-->
</div>
<!-----Contents03 Inner END----->
<!--
<div id="online_benefit">
<div class="ob_inner">
<ul class="ob_list" class="clearfix">
<li><a href="#" title="페이지 이동"><img src="images/icon/icon_freedelivery.png" alt="페이지 이동">
</a></li>
<li><a href="#" title="페이지 이동"><img src="images/icon/icon_paypack.png" alt="페이지 이동">
</a></li>
<li><a href="#" title="페이지 이동"><img src="images/icon/icon_cs.png" alt="페이지 이동">
</a></li>
<li><a href="#" title="페이지 이동"><img src="images/icon/icon_warranty.png" alt="페이지 이동">
</a></li>
<li><a href="#" title="페이지 이동"><img src="images/icon/icon_card.png" alt="페이지 이동">
</a></li>
</ul>
</div>
</div>
-->
<!-----online benefit END----->
<div class="footer_wrap">
<div class="footer">
<div class="footer_left">
<p>Dyson has always done things differently.<br> Manual for Freedom, Research and Creativity</p>
<a href="#">About Us</a><br>
<span style="line-height: 20px;">
상호: Dyon Korea<br>
주소: 서울특별시 강남구 테헤란로 142, 아크플레이스 17층 06236<br>
사업자등록번호 811-81-00675<a href="#" style="color:#666666; font-size:11px; line-height:1.4;">사업자정보확인</a><br>
고객센터: 080-300-4253(수신자 부담)<br>1588-4253 (운영시간: 월-금 오전 9시-오후 6시) <a href="#" style="color:#808080" ,"display:inline-block">이메일: help@kr.dyson.com</a><br>
통신판매번호 2017-서울강남-04029 <br>
호스팅제공 : Dyson Official<br>
</span>
</div>
<!--footer-left END-->
<div class="footer_right footright3" style="margin-right:0;">
<h4>Follow us</h4>
<ul class="footer_socials">
<li><a title="Instagram" href="#">Instagram</a></li>
<li><a title="Facebook" href="#">Facebook</a></li>
<li><a title="Naver Blog" href="#">Naver</a></li>
<li><a title="Kakaotalk" href="#">Kakao</a></li>
</ul>
</div>
<div class="footer_right footright2">
<h4>Customer Service</h4>
<ul class="footer_socials">
<li><a href="#">Order status</a></li>
<li><a href="#">Q&A</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Stocklists</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Policies</a></li>
</ul>
</div>
<div class="footer_right footright1">
<h4>Dyson Official</h4>
<ul class="footer_socials">
<li><a href="#">by Category</a></li>
<li><a href="#">Brandstory</a></li>
<li><a href="#">Event</a></li>
<li><a href="#">Review</a></li>
</ul>
</div>
</div>
</div>
<!--footer END-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Cord-less Vaccum</title>
<link rel="shortcut icon" href="images/icon/dyson-fav.ico">
<link rel="stylesheet" href="css/font.css" type="text/css">
<link rel="stylesheet" href="css/reset.css" type="text/css">
<link rel="stylesheet" href="css/style-cordlessVaccum.css" type="text/css">
<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.12/css/all.css" integrity="sha384-G0fIWCsCzJIMAVNQPfjH08cyYaUtMwjJwqiRKxxE/rx96Uroj1BtIQ6MLJuheaO9" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
<script src="js/script.js"></script>
<script src="js/content-slide.js"></script>
</head>
<body>
<ul id="skipmenu">
<li><a href="#" title="상단메뉴 바로가기">상단메뉴 바로가기</a></li>
<li><a href="#" title="컨텐츠메뉴 바로가기">컨텐츠메뉴 바로가기</a></li>
<li><a href="#" title="하단메뉴 바로가기">하단메뉴 바로가기</a></li>
</ul>
<header id="header_wrap">
<div id="notice">
<ul>
<li><a href="#">11월 10일(월) 저녁 8시, 에어랩 스타일러 라이브 방송! 다양한 구매 혜택까지!</a></li>
</ul>
</div>
<!--notice-->
<nav id="gnb">
<h1 id="logo">
<a href="index.html" title="메인페이지로 이동"><img src="images/icon/dyson-logo.png" alt="logo"></a>
</h1>
<div id="gnb_inner" class="cleafix">
<!-- LEFT MENU START -->
<div class="menu_left">
<ul class="menu_top" style="overflow: hidden;">
<li class="product"><a href="#" title="제품">Products</a></li>
<li class="info"><a href="#" title="인포메이션">Info</a></li>
<li><a href="#" title="브랜드 소개">About Dyson</a></li>
</ul>
</div>
<!-- RIGHT MENU START -->
<div class="menu_right">
<ul class="menu_top" style="overflow: hidden;">
<li>
<a class="search_drop_btn" href="#" title="검색"><img src="images/searchbtn.png" alt="이미지"></a>
</li>
<li><a href="#" title="로그인">Login</a></li>
<li><a href="#" title="장바구니">Cart</a></li>
<li><a href="#" title="마이페이지">My Page</a></li>
</ul>
</div>
<!--RIGHT MENU END-->
<!------Search Drop Bar------>
<div class="search_drop">
<form id="search_bar" action="#" method="get" target="_self">
<input id="banner_action" name="banner_action" value="" type="hidden">
<div class="search_header">
<fieldset>
<a href="#" class="search_btn"><img class="search_icon" src="images/searchbtn.png"></a>
<input id="keyword" name="keyword" class="input_text" placeholder="Type here to search" value="" type="text">
<a href="#" class="search_close_btn"><img class="close_icon" src="images/closebtn.png"></a>
</fieldset>
</div>
</form>
</div>
<!--------Search Drop Bar-------->
<!------------- SUB MENU START -------------->
<div class="sub_menu">
<div class="submenu_pro subs">
<ul class="category">
<li class="sub_tit">by Category</li>
<li class="sub">
<a href="#" title="">Shop All →</a>
<div class="category_box">
<div class="sub_banner">
<a href="#">
<img src="images/subs_v10_motors.png">
</a>
<p>Dyson V10 Series</p>
</div>
</div>
</li>
<li class="sub">
<a class="on" href="product-cordlessVaccum.html" title="페이지이동">Cord-less Vaccum</a>
<div class="category_box">
<ul class="category_list clearfix">
<li class="kinds vaccum"><a href="#">V11</a></li>
<li class="kinds vaccum"><a href="#">V8 Slim</a></li>
<li class="kinds vaccum"><a href="#">V7</a></li>
<li class="kinds vaccum"><a href="#">Cyclone V10</a></li>
<li class="kinds vaccum"><a href="#">Digital-Slim</a></li>
</ul>
<div class="sub_banner">
<a href="#">
<img src="images/subs_vaccum.png">
</a>
<p>Dyson V11 Series</p>
</div>
</div>
</li>
<li class="sub">
<a class="on" href="product-haircare.html" title="페이지이동">Hair Care</a>
<div class="category_box">
<ul class="category_list clearfix">
<li class="kinds haircare"><a href="#">Air-Wrap Styler</a></li>
<li class="kinds haircare"><a href="#">Corrale Hair Straightener</a></li>
<li class="kinds haircare"><a href="#">Super-Sonic Hair Drier</a></li>
<li class="kinds haircare"><a href="#">Super-Sonic Professional</a></li>
</ul>
<div class="sub_banner">
<a href="#">
<img src="images/subs_haircare.png">
</a>
<p>Dyson SuperSonic Hair Drier</p>
</div>
</div>
</li>
<li class="sub">
<a class="on" href="#" title="페이지이동">Air Purifier</a>
<div class="category_box">
<ul class="category_list clearfix">
<li class="kinds air"><a href="#">Pure Hot+Cool</a></li>
<li class="kinds air"><a href="#">Pure Cool</a></li>
<li class="kinds air"><a href="#">Pure Cool Me</a></li>
<li class="kinds air"><a href="#">Pure Cool Cryptomic</a></li>
<li class="kinds air"><a href="#">Pure Humidify+Cool</a></li>
<li class="kinds air"><a href="#">Pure Humidify+Cool Cryptomic</a></li>
<li class="kinds air"><a href="#">Humidifier</a></li>
</ul>
<div class="sub_banner">
<a href="#">
<img src="images/subs_airpuri.png">
</a>
<p>Dyson Humidifier</p>
</div>
</div>
</li>
<li class="sub">
<a class="on" href="#" title="페이지이동">Lighting</a>
<div class="category_box">
<ul class="category_list clearfix">
<li class="kinds lighting"><a href="#">Light Cycle Morph</a></li>
<li class="kinds lighting"><a href="#">Light Cycle</a></li>
</ul>
<div class="sub_banner">
<a href="#">
<img src="images/subs_lighting.png">
</a>
<p>Dyson Light Cycle Morph</p>
</div>
</div>
</li>
</ul>
<!----Product / 3depth 상품 리스트---->
<!----Category---->
<div class="sub_banner">
<a href="#">
<img src="images/subs_haircare.png">
</a>
<p>Dyson SuperSonic Hair Drier</p>
</div>
</div>
<!----SUB MENU PRODUCT END---->
</div>
<!--submenu (wrapper) END-->
<div class="sub_menu">
<div class="submenu_info subs">
<ul class="category">
<li class="sub"><a href="#">Info</a></li>
<li class="sub"><a href="#">Event</a></li>
<li class="sub"><a href="#">Notice</a></li>
<li class="sub"><a href="#">Review</a></li>
<li class="sub"><a href="#">Q&A</a></li>
<li class="sub"><a href="#">FAQ</a></li>
</ul>
<div class="sub_banner" style="opacity: 1">
<a href="#">
<img src="images/subs_giftedition.png">
</a>
<p>Dyson Corrale Color Gift Edition</p>
</div>
</div>
<!--submenu02(info) END-->
</div>
<!--submenu (wrapper) END-->
</div>
<!--gnb_inner-->
</nav>
<!--gnb-->
</header>
<!---HEADER END-->
<div id="fixed_category">
<!-- <div class="f_cat"><a href="#">Products</a> / Shop All ‣</div>-->
<div class="f_cat"><a href="#">Products</a> / Cord-less Vaccum ‣</div>
<!--
<div class="f_cat"><a href="#">Products</a> / Hair Care ‣</div>
<div class="f_cat"><a href="#">Products</a> / Air Purifier ‣</div>
<div class="f_cat"><a href="#">Products</a> / Lighting ‣</div>
-->
</div>
<!----Fixed Category END---->
<div id="visual_wrap">
<div class="visual_vaccum"><img src="images/Vaccum_MainVisual.png" alt="메인비주얼"></div>
<div class="text_box">
<h2>다이슨 무선 청소기</h2>
<p>더 깊은 곳까지 청소하는 강력한 퍼포먼스.<br>일상 청소를 편리하게 해주는 다양한 무선 기능까지.</p>
<a class="goshop_btn" href="#" title="페이지이동">Go to the Shop<span class="arrow">‣</span></a>
</div>
</div>
<!--visual_wrap-->
<!--순서변경(*주의)-->
<div id="contents02">
<div id="contents02_inner" class="clearfix">
<div id="vaccum" class="content_box clearfix" style="overflow: hidden">
<h3 class="sub_tit">Products.</h3>
<p class="sub_txt">무선청소기 제품을 선택하세요</p>
<div id="slider_wrap">
<ul class="slider clearfix">
<li class="slider_inner">
<a class="img" href="#">
<img src="images/vaccum_v7.png" alt="페이지 이동">
</a>
<a class="tit_btn" href="#">다이슨 V7</a>
<p class="f_tit">가벼운 무게와 강력한 흡입력.</p>
<p class="f_sub">가동 시간 최대 30분. 위생적인 먼지통 비우기</p>
</li>
<li class="slider_inner">
<a class="img" href="#"><img src="images/vaccum_v8slim.png" alt="페이지 이동"></a>
<a class="tit_btn" href="#">다이슨 V8 Slim</a>
<p class="f_tit">가벼워진 무선 청소. 강력한 청소 성능.</p>
<p class="f_sub">40% 작아지고 40% 가벼워진 슬림 소프트 롤러 클리너 헤드.</p>
</li>
<li class="slider_inner">
<a class="img" href="#">
<img src="images/vaccum_v10.png" alt="페이지 이동">
</a>
<a class="tit_btn" href="#">다이슨 V10</a>
<p class="f_tit">강력한 흡입력으로 집 안 구석구석을 청소할 수 있는 무선 청소기</p>
<p class="f_sub">다이슨의 가장 강력한 클리너 헤드</p>
</li>
<li class="slider_inner">
<a class="img" href="#">
<img src="images/vaccum_v11.png" alt="페이지 이동">
</a>
<a class="tit_btn" href="#">다이슨 V11</a>
<p class="f_tit">다이슨의 가장 강력하고 인텔리전트한 무선 진공 청소기</p>
<p class="f_sub">보상판매 이벤트 : 쓰던 청소기 반납 시, V11 모든 종류 40만원 할인</p>
</li>
<li class="slider_inner">
<a class="img" href="#">
<img src="images/vaccum_digitalslim.png" alt="페이지 이동">
</a>
<a class="tit_btn" href="#">다이슨 Digital Slim</a>
<p class="f_tit">다이슨의 가볍고 강력한 무선청소기</p>
<p class="f_sub">변치 않는 흡입력, 30% 가벼워진 무선청소기</p>
</li>
</ul>
</div>
<!----Slide Wrap END------>
</div>
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<span class="slider__label sr-only"></span>
</div>
</div>
<!--Contents02 Inner END-->
</div>
<!---Contents Wrap02 END--->
<div id="contents01">
<div id="contents01_inner" class="clearfix">
<div id="promotion">
<div class="promo_img"></div>
<div class="promo_txt">
<div class="toggle_online">Online Exclusive</div>
<p class="con_tit">쓰던 청소기 반납시<br>
V8 모든 종류 <span>40만원 할인</span></p>
<p class="con_subs">다이슨 공식 온라인샵에서만 진행.</p>
<a class="goshop_btn" href="#" title="페이지이동">Go to the Shop<span class="arrow">‣</span></a>
</div>
</div>
</div>
<!--Contents01 Inner END-->
</div>
<!---Contents Wrap01 END--->
<div id="contents03">
<div id="content03_inner" class="clearfix">
<h3 class="sub_tit">Recommend.</h3>
<!-- <p class="sub_txt">추천 제품</p>-->
<div id="slider_wrap">
<ul class="slider recommend clearfix">
<li class="slider_inner">
<a class="img" href="#">
<img src="images/vaccum-reccomend-V7%20Total-Clean.png" alt="페이지 이동">
</a>
<a class="tit_btn" href="#">V7 Total Clean</a>
<p class="f_tit">완벽한 바닥 청소를 위한 설계.</p>
<p class="f_sub price">KRW 799.000</p>
</li>
<li class="slider_inner">
<a class="img" href="#"><img src="images/vaccum-reccomend-carbon-fiber.png" alt="페이지 이동"></a>
<a class="tit_btn" href="#">V10 Carbon Fibre</a>
<p class="f_tit">최대 60분까지 작동, 고성능 필터 장착</p>
<p class="f_sub price">KRW 999.000</p>
</li>
<li class="slider_inner">
<a class="img" href="#">
<img src="images/vaccum-reccomend-V10-absolute.png" alt="페이지 이동">
</a>
<a class="tit_btn" href="#">V10 Absolute</a>
<p class="f_tit">간편한 포인트 앤 슛 먼지통 비우기</p>
<p class="f_sub price">KRW <span class="original-price">899.000</span> <span class="discount">549.000</span></p>
</li>
<li class="slider_inner">
<a class="img" href="#">
<img src="images/vaccum-reccomend-v8-absolute.png" alt="페이지 이동">
</a>
<a class="tit_btn" href="#">V8 Absolute</a>
<p class="f_tit">클릭 한 번으로 핸디형으로 전환 가능</p>
<p class="f_sub price">KRW <span class="original-price">699.9000</span> <span class="discount">499.000</span></p>
</li>
<li class="slider_inner">
<a class="img" href="#">
<img src="images/vaccum-reccomend-V11-outsize.png" alt="페이지 이동">
</a>
<a class="tit_btn" href="#">V11 Outsize</a>
<p class="f_tit">다이슨의 가장 강력한 흡입력</p>
<p class="f_sub price">KRW 1.190.000 ~</p>
</li>
</ul>
</div>
<!--Slide Wrap End-->
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<span class="slider__label sr-only"></span>
</div>
</div>
<!--Contents03 Inner END-->
</div>
<!---Contents Wrap03 END--->
<div id="contents04">
<div class="video_sub_wrapper">
<div class="sub_bg"></div>
<div class="video_tit">
<div data-splitting>Only a Dyson works</div>
<div data-splitting>like a Dyson</div>
<a class="tech_btn" href="#" title="페이지 이동">Technology Story</a>
</div>
</div>
<div class="video_wrapper">
<video id="main-video" controls="controls" autoplay="autoplay" loop="loop" muted=“true” poster="" preload=“auto”>
<!--width="100%" height="auto"-->
<source src="images/test/V8_Absolute_HPVideo-0x720-3000k.mp4">
</source>
</video>
</div>
<!---video wrapper-->
</div>
<!---Contents Wrap04 END--->
<div id="contents03">
<div id="content03_inner" class="clearfix">
<h3 class="sub_tit">Discover Technology.</h3>
<p class="sub_txt">끊임없이 개선되는 혁신적인 특허 기술</p>
<div id="slider_wrap">
<ul class="slider clearfix">
<li class="slider_inner">
<a class="img" href="#">
<img src="images/vaccum-tech-01.png" alt="페이지 이동">
</a>
<a class="tit_btn" href="#">지능적인 실시간 디스플레이</a>
<p class="f_sub">청소기 성능을 초당 8,000회 모니터링 하여<br>실시간으로 LCD 스크린에서 다양한 정보를 확인할 수 있습니다.</p>
</li>
<li class="slider_inner">
<a class="img" href="#"><img src="images/vaccum-tech-02.png" alt="페이지 이동"></a>
<a class="tit_btn" href="#">최적화된 청소 모드</a>
<p class="f_sub">다양한 환경에 사용하기에 최적화된 청소 모드.</p>
</li>
<li class="slider_inner">
<a class="img" href="#">
<img src="images/vaccum-tech-03.png" alt="페이지 이동">
</a>
<a class="tit_btn" href="#">위생적이고 편리한 먼지통 비우기</a>
<p class="f_sub">'포인트 앤 슛' 매커니즘을 통해 먼지통 깊숙한 곳에 있는<br>모든 먼지와 부스러기들을 한 번에 위생적으로 내보낼 수 있습니다.<br>더는 손에 먼지를 묻힐 필요가 없습니다.</p>
</li>
<li class="slider_inner">
<a class="img" href="#">
<img src="images/vaccum-tech-04.png" alt="페이지 이동">
</a>
<a class="tit_btn" href="#">음향 설계</a>
<p class="f_sub">진동을 흡수하고 소음을 완화하여,<br>청소 시 발생하는 음향을 낮추도록 설계되었습니다.</p>
</li>
<li class="slider_inner">
<a class="img" href="#">
<img src="images/vaccum-tech-05.png" alt="페이지 이동">
</a>
<a class="tit_btn" href="#">다이슨 하이퍼디미엄 모터로 구동</a>
<p class="f_sub">최대 125,000rpm 속도로 빠르게 회전해<br>220AW의 강력한 흡입력을 만들어 냅니다.</p>
</li>
<li class="slider_inner">
<a class="img" href="#">
<img src="images/vaccum-tech-06.png" alt="페이지 이동">
</a>
<a class="tit_btn" href="#">오래써도 약해지지 않는 배터리 출력</a>
<p class="f_sub">니켈 코발트 알루미늄 7셀 배터리가 청소하는 내내<br>지속적으로 강력한 출력을 제공해<br>집 안 구석구석에 있는 먼지를 깨끗이 잡아낼 수 있습니다.</p>
</li>
</ul>
</div>
<!--Slide Wrap End-->
<div class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100">
<span class="slider__label sr-only"></span>
</div>
</div>
<!--Contents03 Inner END-->
</div>
<!---Contents Wrap03 END--->
<div class="footer_wrap">
<div class="footer">
<div class="footer_left">
<p>Dyson has always done things differently.<br> Manual for Freedom, Research and Creativity</p>
<a href="#">About Us</a><br>
<span style="line-height: 20px;">
상호: Dyon Korea<br>
주소: 서울특별시 강남구 테헤란로 142, 아크플레이스 17층 06236<br>
사업자등록번호 811-81-00675<a href="#" style="color:#666666; font-size:11px; line-height:1.4;">사업자정보확인</a><br>
고객센터: 080-300-4253(수신자 부담)<br>1588-4253 (운영시간: 월-금 오전 9시-오후 6시) <a href="#" style="color:#808080" ,"display:inline-block">이메일: help@kr.dyson.com</a><br>
통신판매번호 2017-서울강남-04029 <br>
호스팅제공 : Dyson Official<br>
</span>
</div>
<!--footer-left END-->
<div class="footer_right footright3" style="margin-right:0;">
<h4>Follow us</h4>
<ul class="footer_socials">
<li><a title="Instagram" href="#">Instagram</a></li>
<li><a title="Facebook" href="#">Facebook</a></li>
<li><a title="Naver Blog" href="#">Naver</a></li>
<li><a title="Kakaotalk" href="#">Kakao</a></li>
</ul>
</div>
<div class="footer_right footright2">
<h4>Customer Service</h4>
<ul class="footer_socials">
<li><a href="#">Order status</a></li>
<li><a href="#">Q&A</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Contact</a></li>
<li><a href="#">Stocklists</a></li>
<li><a href="#">Terms</a></li>
<li><a href="#">Policies</a></li>
</ul>
</div>
<div class="footer_right footright1">
<h4>Dyson Official</h4>
<ul class="footer_socials">
<li><a href="#">by Category</a></li>
<li><a href="#">Brandstory</a></li>
<li><a href="#">Event</a></li>
<li><a href="#">Review</a></li>
</ul>
</div>
</div>
</div>
<!--footer END-->
</body>
</html>
.clearfix:after {
content: "";
display: block;
clear: both;
}
ul#skipmenu li a {
width: 1px;
height: 1px;
font-size: 0px;
line-height: 0px;
position: absolute;
top: 0px;
left: 0px;
z-index: 9999;
}
ul#skipmenu li a:focus {
width: 100%;
height: 30px;
font-size: 16px;
line-height: 30px;
color: #ffffff;
background-color: #000000;
text-align: center;
text-decoration: none;
}
/*------------------SkipMenu END----------------*/
body {
background-color: #ffffff;
min-width: 1440px;
}
header#header_wrap {
width: 100%;
height: 115px;
position: fixed;
top: 0px;
left: 0px;
background-color: rgba(255, 255, 255, 0.3);
z-index: 999;
}
header#header_wrap.onscroll {
height: 75px;
}
header#header_wrap.on {
background-color: #ffffff;
}
div#notice {
width: 100%;
height: 40px;
overflow: hidden;
position: absolute;
top: 0px;
left: 0px;
z-index: 99;
background-color: #4a4a4a;
}
div#notice.on {
display: none;
}
div#notice ul {
height: 80px;
animation: slide 5s infinite;
-webkit-animation: slide 5s infinite;
}
div#notice ul li {
height: 40px;
text-align: center;
}
div#notice ul li a {
text-decoration: none;
line-height: 40px;
color: #ffffff;
font-size: 12px;
}
@keyframes slide {
10% {
opacity: 0
}
100% {
opacity: 1
}
}
nav#gnb {
width: 100%;
height: 75px;
position: relative;
top: 40px;
left: 0px;
z-index: 99;
}
nav#gnb.on {
width: 100%;
height: 75px;
position: relative;
top: 0px;
left: 0px;
z-index: 99;
}
h1#logo {
width: 100px;
height: 37px;
position: absolute;
top: 19px;
left: calc(50% - 50px);
}
h1#logo a,
h1#logo img {
display: block;
}
div#gnb_inner {
width: 100%;
height: 100%;
padding: 0px 120px;
box-sizing: border-box;
border-bottom: solid 1px #eaeaea;
}
div.menu_left {
width: 235px;
height: 100%;
float: left;
}
div.menu_right {
width: 240px;
height: 100%;
float: right;
}
div.menu_right ul.menu_top li:last-child {
margin-right: 0px;
}
ul.menu_top {
height: 100%;
}
ul.menu_top li {
float: left;
font: normal 16px NeutraText;
letter-spacing: 0.2px;
margin-right: 40px;
}
ul.menu_top li:last-child {
margin-right: 0px;
}
ul.menu_top li a {
text-decoration: none;
font-size: 13px;
color: #1D1D1D;
display: block;
line-height: 75px;
}
ul.menu_top li a:hover,
ul.menu_top li a:focus {
color: #999999;
}
/*-------SubMenu START--------*/
div.sub_menu {
width: 100%;
height: 425px;
position: absolute;
top: 75px;
left: 0px;
padding: 35px 120px 35px;
box-sizing: border-box;
overflow: hidden;
z-index: 98;
/* opacity: 1;*/
background-color: #ffffff;
border-bottom: solid 1px #eaeaea;
}
/*
div.sub_menu.on {
width: 100%;
height: 510px;
padding: 110px 120px 35px;
box-sizing: border-box;
top: 0px;
left: 0px;
}
*/
div.subs {
width: 100%;
height: 100%;
position: relative;
top: 0px;
left: 0px;
}
ul.category {
width: 120px;
height: 390px;
position: absolute;
top: 0px;
left: 0px;
z-index: 96;
/* overflow: hidden;*/
}
ul.category li {
font: normal 14px NeutraText;
margin-bottom: 20px;
}
ul.category li.sub_tit {
color: #1d1d1d;
}
ul.category li.sub a {
text-decoration: none;
display: inline-block;
color: #999999;
}
ul.category li.sub a:hover,
ul.category li.sub a:focus {
color: #1d1d1d;
}
/*------(Product) Category END------*/
/*-----(3depth) Category List START-------*/
div.category_box {
width: 1520px;
height: 100%;
padding-top: 38px;
box-sizing: border-box;
position: absolute;
top: 0px;
left: 160px;
z-index: 20;
display: none;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
div.category_box.on {
display: block;
}
ul.category_list {
width: 100%;
}
ul.category_list > li {
width: 800px;
margin-bottom: 20px;
}
ul.category_list > li > a:hover,
ul.category_list > li > a:focus {
color: #1d1d1d;
}
/*------Sub Banner------*/
div.sub_banner {
width: 500px;
height: auto;
position: absolute;
top: 0px;
right: 0px;
z-index: 20;
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
div.sub_banner.on {
opacity: 1;
}
div.sub_banner a {
display: inline-block;
}
div.sub_banner img {
height: 300px;
display: block;
border: solid 1px #b4b4b4;
border-radius: 2px;
margin-bottom: 20px;
}
div.sub_banner p {
font: normal 14px NeutraText;
color: #1d1d1d;
}
/*--------Search Bar---------*/
div.search_drop {
width: 100%;
height: 200px;
position: absolute;
top: 75px;
left: 0px;
padding: 50px 120px;
box-sizing: border-box;
overflow: hidden;
z-index: 98;
background-color: #ffffff;
border-bottom: solid 1px #eaeaea;
}
fieldset {
border-bottom: 1px solid #1d1d1d;
margin: 0px auto;
vertical-align: middle;
padding: 0.75em;
width: 90%;
}
input#banner_action {
width: 100%;
height: 30px !important;
padding: 10px 20px;
margin: 5px 0;
box-sizing: border-box;
border: none;
}
input#keyword {
border: none;
width: 600px;
font-size: 18px;
line-height: 30px;
}
input:focus {
outline: none;
}
img.search_icon {
margin-right: 20px;
height: 17px;
width: auto;
}
img.close_icon {
width: 17px;
height: 17px;
float: right;
}
/*--------Search Bar END---------*/
/*---------------------header END-------------------*/
div#visual_wrap {
width: 100%;
height: 1040px;
}
ul#slider {
width: 100%;
height: 1040px;
}
ul#slider li {
position: relative;
width: 100%;
height: 1040px;
}
ul#slider li img {
height: 100%;
width: 100%;
position: absolute;
left: 50%;
transform: translateX(-50%) scale(1);
}
ul#slider li .text {
position: absolute;
width: 100%;
color: #ffffff;
top: 245px;
text-align: center;
font: normal normal 65px Circular Std;
letter-spacing: -0.65px;
color: #1D1D1D;
}
ul#slider li .sub_top {
font-size: 35px;
margin: 25px 0px 10px;
}
ul#slider li .sub_bottom {
font-family: YDIYGO320;
font-size: 24px;
}
div#visual_wrap > ul#slider li > a.shop_btn {
z-index: 99;
position: absolute;
bottom: 100px;
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
/*slick dots custom*/
ul#slider .slick-dots {
position: absolute;
bottom: 35px;
display: block;
width: 100%;
padding: 0;
margin: 0;
list-style: none;
text-align: center;
}
ul#slider .slick-dots li {
position: relative;
display: inline-block;
width: 20px;
height: 20px;
margin: 0 5px;
padding: 0;
cursor: pointer;
}
ul#slider .slick-dots li button {
font-size: 0;
line-height: 0;
display: block;
width: 20px;
height: 20px;
padding: 5px;
cursor: pointer;
color: transparent;
border: 0;
outline: none;
background: transparent;
}
ul#slider .slick-dots li button:hover,
ul#slider .slick-dots li button:focus {
outline: none;
}
ul#slider .slick-dots li button:hover:before,
ul#slider .slick-dots li button:focus:before {
opacity: 1;
}
ul#slider .slick-dots li button:before {
font-size: 25px;
line-height: 20px;
position: absolute;
top: 0;
left: 0;
width: 20px;
height: 20px;
content: '•';
text-align: center;
opacity: .25;
color: black;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
ul#slider .slick-dots li.slick-active button:before {
opacity: .75;
color: black;
}
/*----ShopNow Bnt Start--------*/
a.shop_btn {
display: block;
width: 263px;
color: #1d1d1d;
padding: 18px 90px;
box-sizing: border-box;
border: solid 1px #1d1d1d;
z-index: 99;
text-decoration: none;
font: normal 16px Flaunters;
letter-spacing: 1.6px;
border-radius: 3px;
}
a.shop_btn:hover,
a.shop_btn:focus {
color: #999999;
border-color: #999999;
}
/*----ShopNow Bnt End------*/
/*----------Visual END--------------*/
div#content01_wrap {
width: 100%;
background-color: #ffffff;
padding: 100px 120px 70px;
box-sizing: border-box;
}
div#content01_inner {
width: 100%;
}
div#promotion {
width: 100%;
height: 670px;
border-bottom: solid 1px #707070;
box-sizing: border-box;
position: relative;
top: 0px;
right: 0px;
}
div.promo_img {
width: 1148px;
height: 560px;
background-image: url("../images/promo_01_v7.png");
background-size: cover;
background-repeat: no-repeat;
position: absolute;
top: 0px;
left: 0px;
}
div.promo_txt {
width: 434px;
height: 560px;
position: absolute;
top: 0px;
right: 0px;
padding: 105px 0px;
box-sizing: border-box;
margin: 0px auto;
}
div.toggle_online {
background-color: #304192;
color: #ffffff;
text-align: center;
font: normal 17px/22px NeutraText;
padding: 10px 22px;
width: 200px;
box-sizing: border-box;
margin: 0px auto 30px;
}
p.con_tit {
text-align: center;
font-size: 36px;
font-family: YDIYGO340;
margin-bottom: 10px;
line-height: 54px;
color: #1d1d1d;
margin-bottom: 38px;
}
p.con_tit span {
color: #939393;
}
p.con_subs {
text-align: center;
font-size: 24px;
font-family: YDIYGO320;
letter-spacing: 1px;
color: #1d1d1d;
margin-bottom: 40px;
}
/*----Go to the Shop Btn Start------*/
a.goshop_btn {
width: 265px;
height: 56px;
padding: 18px 27px;
box-sizing: border-box;
border: 1px solid #383838;
border-radius: 3px;
display: block;
background-color: rgba(255, 255, 255, 0.2);
font: normal 15px Flaunters;
letter-spacing: 1.5px;
text-decoration: none;
color: #383838;
margin: 0px auto;
position: relative;
top: 0px;
left: 0px;
z-index: 10;
}
a.goshop_btn span {
height: 21px;
line-height: 21px;
vertical-align: center;
z-index: 9;
position: absolute;
right: 27px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
a.goshop_btn:hover,
a.goshop_btn:focus {
color: #999999;
border-color: #999999;
}
a.goshop_btn:hover span,
a.goshop_btn:focus span {
color: #999999;
}
a.goshop_btn:before {
content: "";
display: inline-block;
height: 1px;
width: 78px;
background-color: #383838;
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
a.goshop_btn:hover:before,
a.goshop_btn:focus:before {
background-color: #999999;
width: 0%;
}
/*----Go to the Shop Btn End-------*/
/*----BFD Event START----*/
div#bfd_event {
width: 100%;
height: auto;
padding: 60px 0px 60px;
box-sizing: border-box;
border-bottom: solid 1px #707070;
}
div.ani_wrapper {
width: 330px;
height: 44px;
padding: 0px 10px;
box-sizing: border-box;
margin: 0px auto 30px;
background-color: #3a3a3a;
overflow: hidden;
text-align: center;
font: normal normal 18px/44px Circular Std;
color: #ffffff;
}
div.ani_holder {
width: 100%;
/*
animation: marquee 7s linear infinite;
-webkit-animation: marquee 7s linear infinite;
*/
}
span.toggle_bfd {
display: inline-block;
margin-right: 40px;
float: left;
width: 50%;
white-space: nowrap;
}
h2.sub_tit {
text-align: center;
font: normal normal 50px Circular Std;
margin-bottom: 5px;
}
p.bfd_date {
text-align: center;
font: normal normal 30px Circular Std;
}
div#bfd_event > ul.slider {
padding: 20px 0px;
box-sizing: border-box;
}
div#bfd_event > a.shop_btn {
margin: 0px auto;
}
ul.slider {
width: 100%;
height: 500px;
margin: 40px auto;
text-align: center;
display: flex;
justify-content: space-between;
}
li.slider_inner {
width: 31.33%;
/*532px*/
height: 100%;
padding: 0px 1em;
white-space: nowrap;
position: relative;
top: 0px;
left: 0px;
}
li.slider_inner a.img {
display: block;
width: 100%;
height: 300px;
overflow: hidden;
border: solid 1px #DCDDDE;
border-radius: 3px;
box-sizing: border-box;
margin-bottom: 28px;
}
li.slider_inner a img {
transition: all 0.5s;
-webkit-transition: all 0.5s;
height: 100%;
width: 100%;
}
li.slider_inner a:hover img {
transform: scale(1.1);
-webkit-transform: scale(1.1);
}
li.slider_inner p {
text-align: center;
font: normal 18px Apple SD Gothic Neo;
}
p.f_tit {
color: #707070;
margin-bottom: 8px;
}
li.slider_inner > p.f_sub {
color: #898181;
font-size: 16px;
}
a.tit_btn {
display: block;
text-decoration: none;
text-align: center;
letter-spacing: -0.2%;
color: #383838;
font-size: 21px;
font-family: YDIYGO340;
margin-bottom: 20px;
}
li.slider_inner a.tit_btn:hover {
color: #999999;
}
li.slider_inner > p.off_caption {
font: normal 17px/36px NeutraText;
padding: 0px 10px;
box-sizing: border-box;
width: 100px;
height: 36px;
color: #ffffff;
background-color: #343434;
position: relative;
bottom: -18px;
left: 0px;
z-index: 20;
}
/*-----BFD Event END----*/
div#review_event {
width: 100%;
height: 530px;
background-image: url("../images/reveiw_event.png");
background-position: center;
background-repeat: no-repeat;
background-size: 1920px 530px;
position: relative;
top: 0px;
left: 0px;
}
div.review_txt {
width: 700px;
position: absolute;
top: 170px;
left: 50%;
transform: translatex(-50%);
-webkit-transform: translatex(-50%);
}
div.review_txt p {
text-align: center;
color: #1D1D1D;
font: normal 36px/50px YDIYGO320;
margin-bottom: 60px;
}
div.review_txt p span {
font-family: YDIYGO340;
}
/*---Review Event END----*/
/*---Best Seller Start----*/
div#contents02_inner {
width: 100%;
height: auto;
padding-top: 75px;
box-sizing: border-box;
border-top: solid 1px #707070;
}
div#best > ul.slider {
height: 555px;
}
div#best > ul.slider >li.slider_inner{
height: 555px;
}
p.best_txt {
margin-top: 10px;
text-align: center;
font: normal 20px YDIYGO320;
letter-spacing: -0.3px;
color: #1D1D1D;
}
li.slider_inner > p.new_caption {
font: normal 17px/36px NeutraText;
padding: 0px 10px;
box-sizing: border-box;
width: 120px;
height: 36px;
color: #ffffff;
text-align: center;
background-color: #343434;
position: relative;
bottom: -18px;
left: 0px;
z-index: 20;
}
li.slider_inner > p.bfd_caption {
font: normal 17px/36px NeutraText;
padding: 0px 10px;
box-sizing: border-box;
width: 128px;
height: 36px;
color: #ffffff;
text-align: center;
background-color: #343434;
position: relative;
bottom: -18px;
left: 0px;
z-index: 20;
}
/*---SeeMoreBtn Start----*/
a.see_more_btn {
margin: 40px auto 0px;
width: 220px;
height: 56px;
padding: 18px 25px;
box-sizing: border-box;
border: 1px solid #383838;
border-radius: 3px;
display: block;
background-color: rgba(255, 255, 255, 0.2);
font: normal 15px Flaunters;
letter-spacing: 1.5px;
text-decoration: none;
text-align: left;
color: #383838;
position: relative;
top: 0px;
left: 0px;
z-index: 10;
}
a.see_more_btn:before {
content: "";
display: inline-block;
height: 1px;
width: 75px;
background-color: #383838;
position: absolute;
right: 29px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
a.see_more_btn:hover:before {
background-color: #999999;
width: 0px;
}
a.see_more_btn span {
height: 21px;
line-height: 21px;
vertical-align: center;
z-index: 10;
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
a.see_more_btn:hover {
color: #999999;
border-color: #999999;
}
a.see_more_btn:hover span {
color: #999999;
}
/*---SeeMoreBtn END----*/
div#card_promotion {
width: 100%;
height: 650px;
background-image: url("../images/card_event.png");
background-position: center;
background-repeat: no-repeat;
background-size: 1920px 650px;
}
div.card_txt {
width: 100%;
padding: 150px 120px;
box-sizing: border-box;
}
div.card_txt div.toggle_online {
margin-left: 0px;
}
div.card_txt p {
text-align: left;
color: #1D1D1D;
font: normal 36px/50px YDIYGO320;
margin-bottom: 25px;
}
div.card_txt p span {
font-family: YDIYGO340;
}
div.card_txt p.card_subs {
font: normal 24px Noto Sans;
margin-bottom: 40px;
}
div#card_promotion a.goshop_btn {
margin-left: 0px;
}
/*---Card Promotion END----*/
div#contents03_inner {
width: 100%;
padding: 88px 120px 100px;
box-sizing: border-box;
}
div#store {
width: 100%;
margin: 0px auto;
}
p.store_txt {
text-align: center;
font: normal 22px/34px YDIYGO320;
color: #1D1D1D;
margin-top: 20px;
}
p.store_txt span {
font-family: YDIYGO330;
color: #1D1D1D;
}
ul.store_box {
width: 100%;
margin: 65px 0px 80px;
display: flex;
justify-content: space-between;
text-align: center;
}
li.store_box {
width: 33%;
padding: 0% 2.5%;
box-sizing: border-box;
/* display: inline-block;*/
}
li.store_box div {
height: auto;
overflow: hidden;
margin-bottom: 28px;
}
li.store_box a {
display: block;
overflow: hidden;
}
li.store_box a.img {
width: 100%;
height: auto;
border: solid 1px #DCDDDE;
border-radius: 3px;
box-sizing: border-box;
}
li.store_box a img {
width: 100%;
height: auto;
border: solid 1px #DCDDDE;
border-radius: 3px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
li.store_box a:hover img {
transform: scale(1.1);
-webkit-transform: scale(1.1);
filter: blur(1px);
-webkit-filter: blur(1px);
}
li.store_box p.s_category {
text-align: left;
font: normal 15px Flaunters;
padding: 25px 0px;
border-top: solid 1px #1d1d1d;
letter-spacing: 1px;
}
p.s_tit {
text-align: left;
font: normal 30px/40px YDIYGO340;
letter-spacing: 0.6px;
color: #1D1D1D;
margin-bottom: 20px;
}
p.s_sub {
text-align: left;
font: normal 20px/34px YDIYGO320;
color: #1D1D1D;
margin-bottom: 20px;
}
li.store_box a.see_more_btn {
margin-left: 0px;
text-align: left;
}
/*---store END---*/
div.footer_wrap {
overflow: hidden;
background: #000000;
color: #999999;
min-width: 320px;
height: 100%;
padding: 80px 120px 40px;
box-sizing: border-box;
}
div.footer_wrap a {
color: #333333;
display: block;
text-decoration: none;
}
div.footer_wrap a:hover,
div.footer_wrap a:visited {
color: #ffffff;
}
div.footer_wrap h4 {
font: normal 18px/1em NeutraText;
margin-bottom: 30px;
color: #ffffff;
display: block;
}
ul.footer_socials li a {
margin-bottom: 10px;
color: #333333;
display: block;
text-decoration: none;
}
div.footer {
overflow: hidden;
width: 100%;
margin: 0px auto;
text-align: left;
}
div.footer_wrap .footer_left,
div.footer_wrap .footer_center {
float: left;
width: 400px;
}
div.footer_wrap .footer_left p {
margin-bottom: 30px;
color: #ffffff;
font: normal 20px/30px NeutraText;
}
div.footer_wrap .footer_left span {
font-size: 14px;
}
.footer_wrap .footer_right {
float: right;
width: 200px;
margin-right: 80px;
}
div.footer ul.footer_socials li {
display: inline;
}
div.footer div.footer_socials a {
border: 0;
}
.footer_wrap .footer_left:hover,
.footer_container .footer_center:hover,
.footer_container .footer_right:hover {
opacity: 1;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
}
.footer_wrap .footer_left,
.footer_wrap .footer_center,
.footer_wrap .footer_right {
opacity: 0.6;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
padding-bottom: 200px;
}
/*--------footer END--------*/
/*
---------------Media Screen START-----------------------
@media screen and (max-width:1070px) {
div#content01_inner,
div#visual_wrap,
div#review_event,
div#contents02_inner {
width: 90%;
}
}
@media screen and (max-width:1024px) {
header#header_wrap {
height: 80px;
width: 100%;
}
div#visual_wrap {
width: 100%;
}
nav#gnb {
width: 100%;
height: 90px;
}
.footer {
width: 750px;
}
.footer-container .footer-left {
width: 350px;
}
.footer-container .footer-center {
width: 300px;
}
.footer-container .footer-right {
width: 100px;
}
}
*/
.clearfix:after {
content: "";
display: block;
clear: both;
}
ul#skipmenu li a {
width: 1px;
height: 1px;
font-size: 0px;
line-height: 0px;
position: absolute;
top: 0px;
left: 0px;
z-index: 9999;
}
ul#skipmenu li a:focus {
width: 100%;
height: 30px;
font-size: 16px;
line-height: 30px;
color: #ffffff;
background-color: #000000;
text-align: center;
text-decoration: none;
}
/*------------------SkipMenu END----------------*/
body {
background-color: #ffffff;
min-width: 1440px;
}
/*----Go to the Shop Btn Start------*/
a.goshop_btn {
width: 265px;
height: 56px;
padding: 18px 27px;
box-sizing: border-box;
border: 1px solid #383838;
border-radius: 3px;
display: block;
background-color: rgba(255, 255, 255, 0.2);
font: normal 15px Flaunters;
letter-spacing: 1.5px;
text-decoration: none;
color: #383838;
position: relative;
top: 0px;
left: 0px;
z-index: 10;
}
a.goshop_btn span {
height: 21px;
line-height: 21px;
vertical-align: center;
z-index: 9;
position: absolute;
right: 27px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
a.goshop_btn:hover,
a.goshop_btn:focus {
color: #999999;
border-color: #999999;
}
a.goshop_btn:hover span,
a.goshop_btn:focus span {
color: #999999;
}
a.goshop_btn:before {
content: "";
display: inline-block;
height: 1px;
width: 78px;
background-color: #383838;
position: absolute;
right: 30px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
a.goshop_btn:hover:before,
a.goshop_btn:focus:before {
background-color: #999999;
width: 0%;
}
/*----Go to the Shop Btn END------*/
/*---SeeMoreBtn Start----*/
a.see_more_btn {
margin: 40px auto 0px;
width: 220px;
height: 56px;
padding: 18px 25px;
box-sizing: border-box;
border: 1px solid #383838;
border-radius: 3px;
display: block;
background-color: rgba(255, 255, 255, 0.2);
font: normal 15px Flaunters;
letter-spacing: 1.5px;
text-decoration: none;
text-align: left;
color: #383838;
position: relative;
top: 0px;
left: 0px;
z-index: 10;
}
a.see_more_btn:before {
content: "";
display: inline-block;
height: 1px;
width: 75px;
background-color: #383838;
position: absolute;
right: 29px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
a.see_more_btn:hover:before {
background-color: #999999;
width: 0px;
}
a.see_more_btn span {
height: 21px;
line-height: 21px;
vertical-align: center;
z-index: 10;
position: absolute;
right: 25px;
top: 50%;
transform: translateY(-50%);
-webkit-transform: translateY(-50%);
}
a.see_more_btn:hover {
color: #999999;
border-color: #999999;
}
a.see_more_btn:hover span {
color: #999999;
}
/*---SeeMoreBtn END----*/
/*----ShopNow Bnt Start--------*/
a.shop_btn {
display: block;
width: 263px;
color: #1d1d1d;
padding: 18px 90px;
box-sizing: border-box;
border: solid 1px #1d1d1d;
z-index: 99;
text-decoration: none;
font: normal 16px Flaunters;
letter-spacing: 1.6px;
border-radius: 3px;
}
a.shop_btn:hover,
a.shop_btn:focus {
color: #999999;
border-color: #999999;
}
/*----ShopNow Bnt End------*/
header#header_wrap {
width: 100%;
height: 115px;
position: fixed;
top: 0px;
left: 0px;
background-color: rgba(255, 255, 255, 0.3);
z-index: 999;
}
header#header_wrap.onscroll {
height: 75px;
}
header#header_wrap.on {
background-color: #ffffff;
}
div#notice {
width: 100%;
height: 40px;
overflow: hidden;
position: absolute;
top: 0px;
left: 0px;
z-index: 99;
background-color: #4a4a4a;
}
div#notice.on {
display: none;
}
div#notice ul {
height: 80px;
animation: slide 5s infinite;
-webkit-animation: slide 5s infinite;
}
div#notice ul li {
height: 40px;
text-align: center;
}
div#notice ul li a {
text-decoration: none;
line-height: 40px;
color: #ffffff;
font-size: 12px;
}
@keyframes slide {
10% {
opacity: 0
}
100% {
opacity: 1
}
}
nav#gnb {
width: 100%;
height: 75px;
position: relative;
top: 40px;
left: 0px;
z-index: 99;
}
nav#gnb.on {
width: 100%;
height: 75px;
position: relative;
top: 0px;
left: 0px;
z-index: 99;
}
h1#logo {
width: 100px;
height: 37px;
position: absolute;
top: 19px;
left: calc(50% - 50px);
}
h1#logo a,
h1#logo img {
display: block;
}
div#gnb_inner {
width: 100%;
height: 100%;
padding: 0px 120px;
box-sizing: border-box;
border-bottom: solid 1px #eaeaea;
}
div.menu_left {
width: 235px;
height: 100%;
float: left;
}
div.menu_right {
width: 240px;
height: 100%;
float: right;
}
div.menu_right ul.menu_top li:last-child {
margin-right: 0px;
}
ul.menu_top {
height: 100%;
}
ul.menu_top li {
float: left;
font: normal 16px NeutraText;
letter-spacing: 0.2px;
margin-right: 40px;
}
ul.menu_top li:last-child {
margin-right: 0px;
}
ul.menu_top li a {
text-decoration: none;
font-size: 13px;
color: #1D1D1D;
display: block;
line-height: 75px;
}
ul.menu_top li a:hover,
ul.menu_top li a:focus {
color: #999999;
}
/*-------SubMenu START--------*/
div.sub_menu {
width: 100%;
height: 425px;
position: absolute;
top: 75px;
left: 0px;
padding: 35px 120px 35px;
box-sizing: border-box;
overflow: hidden;
z-index: 98;
/* opacity: 1;*/
background-color: #ffffff;
border-bottom: solid 1px #eaeaea;
}
/*
div.sub_menu.on {
width: 100%;
height: 510px;
padding: 110px 120px 35px;
box-sizing: border-box;
top: 0px;
left: 0px;
}
*/
div.subs {
width: 100%;
height: 100%;
position: relative;
top: 0px;
left: 0px;
}
ul.category {
width: 120px;
height: 390px;
position: absolute;
top: 0px;
left: 0px;
z-index: 96;
/* overflow: hidden;*/
}
ul.category li {
font: normal 14px NeutraText;
margin-bottom: 20px;
}
ul.category li.sub_tit {
color: #1d1d1d;
}
ul.category li.sub a {
text-decoration: none;
display: inline-block;
color: #999999;
}
ul.category li.sub a:hover,
ul.category li.sub a:focus {
color: #1d1d1d;
}
/*------(Product) Category END------*/
/*-----(3depth) Category List START-------*/
div.category_box {
width: 1520px;
height: 100%;
padding-top: 38px;
box-sizing: border-box;
position: absolute;
top: 0px;
left: 160px;
z-index: 20;
display: none;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
div.category_box.on {
display: block;
}
ul.category_list {
width: 100%;
}
ul.category_list > li {
width: 800px;
margin-bottom: 20px;
}
ul.category_list > li > a:hover,
ul.category_list > li > a:focus {
color: #1d1d1d;
}
/*------Sub Banner------*/
div.sub_banner {
width: 500px;
height: auto;
position: absolute;
top: 0px;
right: 0px;
z-index: 20;
opacity: 0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
div.sub_banner.on {
opacity: 1;
}
div.sub_banner a {
display: inline-block;
}
div.sub_banner img {
height: 300px;
display: block;
border: solid 1px #b4b4b4;
border-radius: 2px;
margin-bottom: 20px;
}
div.sub_banner p {
font: normal 14px NeutraText;
color: #1d1d1d;
}
/*-----Fixed Catgory-----*/
div.f_cat {
width: 100%;
position: absolute;
top: 115px;
left: 120px;
padding-top: 20px;
box-sizing: border-box;
font: normal 14px NeutraText;
z-index: 40;
}
div.f_cat > a {
display: inline-block;
text-decoration: none;
font: normal 14px NeutraText;
color: #555555;
}
div.f_cat > a:hover {
color: #1d1d1d;
}
/*--------Search Bar---------*/
div.search_drop {
width: 100%;
height: 200px;
position: absolute;
top: 75px;
left: 0px;
padding: 50px 120px;
box-sizing: border-box;
overflow: hidden;
z-index: 98;
background-color: #ffffff;
border-bottom: solid 1px #eaeaea;
}
fieldset {
border-bottom: 1px solid #1d1d1d;
margin: 0px auto;
vertical-align: middle;
padding: 0.75em;
width: 90%;
}
input#banner_action {
width: 100%;
height: 30px !important;
padding: 10px 20px;
margin: 5px 0;
box-sizing: border-box;
border: none;
}
input#keyword {
border: none;
width: 600px;
font-size: 18px;
line-height: 30px;
}
input:focus {
outline: none;
}
img.search_icon {
margin-right: 20px;
height: 17px;
width: auto;
}
img.close_icon {
width: 17px;
height: 17px;
float: right;
}
/*--------Search Bar END---------*/
/*---------------------header END-------------------*/
div#visual_wrap {
width: 100%;
height: 1040px;
position: relative;
top: 0px;
left: 0px;
border-bottom: solid 1px #DCDDDE;
}
div.visual_vaccum {
width: 100%;
height: 1040px;
}
div.visual_vaccum img {
width: 100%;
height: 100%;
}
div.text_box {
width: 800px;
display: block;
position: absolute;
top: 275px;
left: 120px;
}
div#visual_wrap h2 {
font: normal 60px YDIYGO340;
margin-bottom: 40px;
}
div#visual_wrap p {
text-align: left;
font: normal 22px/38px YDIYGO320;
letter-spacing: -0.3px;
color: #1D1D1D;
margin-bottom: 45px;
}
/*-----Visual End----*/
div#contents01 {
width: 100%;
padding: 80px 120px 0px;
box-sizing: border-box;
background-color: #ffffff;
}
div#contents01_inner {
width: 100%;
border-bottom: solid 1px #1d1d1d;
box-sizing: border-box;
}
div#content01_wrap {
width: 100%;
background-color: #ffffff;
padding: 100px 120px 70px;
box-sizing: border-box;
}
div.promo_txt > a.goshop_btn {
margin: 0px auto;
}
/*----promotion-----*/
div#promotion {
width: 100%;
height: 670px;
position: relative;
top: 0px;
right: 0px;
}
div.promo_img {
width: 1148px;
height: 560px;
background-image: url("../images/promo_01_v7.png");
background-size: cover;
background-repeat: no-repeat;
position: absolute;
top: 0px;
left: 0px;
}
div.promo_txt {
width: 434px;
height: 560px;
position: absolute;
top: 0px;
right: 0px;
padding: 105px 0px;
box-sizing: border-box;
margin: 0px auto;
}
div.toggle_online {
background-color: #304192;
color: #ffffff;
text-align: center;
font: normal 17px/22px NeutraText;
padding: 10px 22px;
width: 200px;
box-sizing: border-box;
margin: 0px auto 30px;
}
p.con_tit {
text-align: center;
font-size: 36px;
font-family: YDIYGO340;
margin-bottom: 10px;
line-height: 54px;
color: #1d1d1d;
margin-bottom: 38px;
}
p.con_tit span {
color: #939393;
}
p.con_subs {
text-align: center;
font-size: 24px;
font-family: YDIYGO320;
letter-spacing: 1px;
color: #1d1d1d;
margin-bottom: 40px;
}
div#promotion > a.goshop_btn {
margin: 0px auto;
}
/*-----contents02-----*/
div#contents02 {
width: 100%;
padding: 50px 120px 60px;
box-sizing: border-box;
background-color: #ffffff;
}
div#contents02_inner {
width: 100%;
position: relative;
top: 0px;
left: 0px;
}
div#contents02_inner > a.shop_btn {
margin: 30px auto;
}
div#vaccum {
width: 100%;
height: auto;
}
h3.sub_tit {
text-align: center;
font: normal normal 50px Circular Std;
}
p.sub_txt {
margin: 15px auto;
text-align: center;
font: normal 20px YDIYGO320;
letter-spacing: -0.3px;
color: #1D1D1D;
line-height: 28px;
}
p.sub_txt > span {
font-weight: bold;
font-size: 24px;
}
div#slider_wrap {
width: 1680px;
height: 500px;
/* overflow: hidden;*/
margin: 0px auto 30px;
display: flex;
}
ul.slider {
width: 100%;
height: 500px;
margin: 40px auto;
text-align: center;
display: flex;
justify-content: space-between;
}
li.slider_inner {
width: 31.33%;
/*532px*/
height: 100%;
padding: 0px 1em;
white-space: nowrap;
}
li.slider_inner a.img {
display: block;
width: 100%;
height: 300px;
overflow: hidden;
border: solid 1px #DCDDDE;
border-radius: 3px;
box-sizing: border-box;
margin-bottom: 28px;
}
li.slider_inner a img {
transition: all 0.5s;
-webkit-transition: all 0.5s;
height: 100%;
width: 100%;
}
li.slider_inner a:hover img {
transform: scale(1.1);
-webkit-transform: scale(1.1);
}
li.slider_inner a.tit_btn {
display: block;
text-decoration: none;
text-align: center;
letter-spacing: -0.2%;
color: #383838;
font-size: 21px;
font-family: YDIYGO340;
margin-bottom: 20px;
}
li.slider_inner a.tit_btn:hover {
color: #999999;
}
li.slider_inner p {
text-align: center;
font: normal 18px Apple SD Gothic Neo;
}
p.f_tit {
color: #707070;
margin-bottom: 8px;
}
li.slider_inner > p.f_sub {
color: #898181;
font-size: 16px;
}
a.tit_btn {
display: block;
text-decoration: none;
text-align: center;
letter-spacing: -0.2%;
color: #383838;
font-size: 21px;
font-family: YDIYGO340;
margin-bottom: 20px;
}
a.tit_btn:hover {
color: #999999;
}
/*---progress bar---*/
.progress {
display: block;
width: 50%;
height: 7px;
border-radius: 10px;
overflow: hidden;
margin: 0px auto;
background-color: #eaeaea;
background-image: linear-gradient(to right, black, black);
background-repeat: no-repeat;
background-size: 0 100%;
transition: background-size 0.4s ease-in-out;
-webkit-transition: background-size 0.4s ease-in-out;
}
/*----Contents02 END----*/
/*recommend*/
li.slider_inner > p.price {
font-weight: bold;
}
li.slider_inner > p.price > span.original-price {
text-decoration-line: line-through;
font-weight: demi;
}
li.slider_inner > p.price > span.discount {
color: #0073ff;
}
/*recommend end*/
div#contents03 {
width: 100%;
padding: 50px 120px 60px;
box-sizing: border-box;
background-color: #ffffff;
}
div#contents03_inner {
width: 100%;
height: auto;
border-bottom: solid 1px #1d1d1d;
box-sizing: border-box;
}
/*----Contents03 END----*/
div#contents04 {
width: 1920px;
;
}
div.video_sub_wrapper {
width: 100%;
height: 550px;
overflow: hidden;
position: relative;
top: 0px;
left: 0px;
}
div.sub_bg {
width: 100%;
height: 550px;
background-image: url("../images/video-sub-vaccum.png");
background-size: 1920px auto;
background-repeat: no-repeat;
background-position: center center;
animation: sub_bg 5s ease infinite;
-webkit-animation: sub_bg 5s ease infinite;
}
@keyframes sub_bg {
0% {
transform: scale(1);
-webkit-transform: scale(1);
}
100% {
transform: scale(1.6);
-webkit-transform: scale(1.6);
}
}
div.video_tit {
color: #1d1d1d;
font: normal 50px Circular Std;
line-height: 78px;
letter-spacing: 1px;
text-align: center;
position: absolute;
top: 45%;
left: 50%;
transform: translate(-45%, -50%);
-webkit-transform: translate(-45%, -50%);
}
div.video_tit .splitting .char {
display: inline-block;
animation: split_ani 1.5s;
-webkit-tanimation: split_ani 1.5s;
animation-delay: calc(0.07*var(--char-index))
}
@keyframes split_ani {
0% {
transform: translateY(50px);
-webkit-transform: translateY(50px);
opacity: 0;
}
100% {
transform: translateY(0px);
-webkit-transform: translateY(0px);
opacity: 1;
}
}
a.tech_btn {
display: block;
width: 360px;
color: #1d1d1d;
padding: 18px 90px;
box-sizing: border-box;
border: solid 1px #1d1d1d;
z-index: 99;
text-decoration: none;
font: normal 16px Flaunters;
letter-spacing: 1.6px;
border-radius: 3px;
margin: 30px auto 0px;
}
a.tech_btn:hover,
a.tech_btn:focus {
color: #999999;
border-color: #999999;
}
div.video_wrapper {
width: 100%;
height: 630px;
margin: 0px auto;
overflow: hidden;
display: flex;
align-items: center;
}
video#main-video {
width: 100%;
height: auto;
}
/*-----Video + Contents END------*/
/*----Contents04 END-----*/
div.footer_wrap {
overflow: hidden;
background: #000000;
color: #999999;
min-width: 320px;
height: 100%;
padding: 80px 120px 40px;
box-sizing: border-box;
}
div.footer_wrap a {
color: #333333;
display: block;
text-decoration: none;
}
div.footer_wrap a:hover,
div.footer_wrap a:visited {
color: #ffffff;
}
div.footer_wrap h4 {
font: normal 18px/1em NeutraText;
margin-bottom: 30px;
color: #ffffff;
display: block;
}
ul.footer_socials li a {
margin-bottom: 10px;
color: #333333;
display: block;
text-decoration: none;
}
div.footer {
overflow: hidden;
width: 100%;
margin: 0px auto;
text-align: left;
}
div.footer_wrap .footer_left,
div.footer_wrap .footer_center {
float: left;
width: 400px;
}
div.footer_wrap .footer_left p {
margin-bottom: 30px;
color: #ffffff;
font: normal 20px/30px NeutraText;
}
div.footer_wrap .footer_left span {
font-size: 14px;
}
.footer_wrap .footer_right {
float: right;
width: 200px;
margin-right: 80px;
}
div.footer ul.footer_socials li {
display: inline;
}
div.footer div.footer_socials a {
border: 0;
}
.footer_wrap .footer_left:hover,
.footer_container .footer_center:hover,
.footer_container .footer_right:hover {
opacity: 1;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
}
.footer_wrap .footer_left,
.footer_wrap .footer_center,
.footer_wrap .footer_right {
opacity: 0.6;
transition: all 0.2s ease;
-webkit-transition: all 0.2s ease;
padding-bottom: 200px;
}
/*--------footer END--------*/
/*
html5doctor.com Reset Stylesheet v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
body {
line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
display:block;
}
nav, ul, li {
list-style:none;
}
blockquote, q {
quotes:none;
}
blockquote:before, blockquote:after,
q:before, q:after {
content:'';
content:none;
}
a {
margin:0;
padding:0;
font-size:100%;
vertical-align:baseline;
background:transparent;
}
/* change colours to suit your needs */
ins {
background-color:#ff9;
color:#000;
text-decoration:none;
}
/* change colours to suit your needs */
mark {
background-color:#ff9;
color:#000;
font-style:italic;
font-weight:bold;
}
del {
text-decoration: line-through;
}
abbr[title], dfn[title] {
border-bottom:1px dotted;
cursor:help;
}
table {
border-collapse:collapse;
border-spacing:0;
}
/* change border colour to suit your needs */
hr {
display:block;
height:1px;
border:0;
border-top:1px solid #cccccc;
margin:1em 0;
padding:0;
}
input, select {
vertical-align:middle;
}
$(window).load(function () {
menuEffect();
visualSlider();
headerScroll();
searchBarDown();
Splitting_();
contentSlide();
})
function headerScroll() {
$(window).on("scroll", onScroll);
function onScroll() {
var headerTop = $(window).scrollTop();
var headerWidth = $(window).outerWidth();
if (headerTop > 150 && headerWidth >= 1024) {
$("#gnb").addClass("on");
$("#notice").addClass("on");
$("#header_wrap").addClass("onscroll");
} else {
$("#gnb").removeClass("on");
$("#notice").removeClass("on");
$("#header_wrap").removeClass("onscroll");
}
}
}
function menuEffect() {
var $mainMenu = $(".menu_top > li > a");
var $subMenu = $(".sub_menu");
var $category = $(".category>li>a");
var $categoryList = $(".category_box");
$subMenu.slideUp(0);
$("#header_wrap").removeClass("on");
$(".sub_banner, .category_box").stop();
$mainMenu.on("mouseenter focus", onMenu);
$subMenu.on("mouseleave", outMenu);
$subMenu.on("focousout", outMenu);
$category.on("mouseenter focus", onSubMenu);
$subMenu.on("mouseleave", outSubMenu);
$category.last().on("focusout", outSubMenu);
function onMenu() {
var menuClickNum = $mainMenu.index($(this));
$subMenu.slideUp();
$("#header_wrap").removeClass("on");
$("#header_wrap").addClass("on");
$subMenu.eq(menuClickNum).slideDown(200);
}
function outMenu() {
$("#header_wrap").removeClass("on");
$subMenu.slideUp(200);
}
function onSubMenu() {
var subClickNum = $category.index($(this));
$(".sub_banner, .category_box").stop();
$categoryList.removeClass("on");
$categoryList.eq(subClickNum).addClass("on");
$(".sub_banner").removeClass("on");
$(".sub_banner").eq(subClickNum).addClass("on");
}
function outSubMenu() {
$(".sub_banner, .category_box").stop();
$categoryList.removeClass("on");
$(".sub_banner").removeClass("on");
}
}
function searchBarDown() {
$(".search_drop").slideUp(0);
$(".search_drop_btn").on("click", onSearchBar);
$(".search_close_btn").on("click", outSearchBar);
function onSearchBar() {
$(".search_drop").slideToggle(200);
}
function outSearchBar() {
$(".search_drop").slideUp(200);
}
}
function visualSlider() {
$("#slider").slick({
infinite: true,
slide: "li",
slidesToScroll: 1,
slidesToShow: 1,
autoplay: true,
fade: true,
autoplaySpeed: 3000,
pauseOnHover: false,
dots: true,
arrows: false,
})
}
function Splitting_() {
Splitting();
}
$(window).load(function () {
contentSlide();
})
function contentSlide() {
var $slider = $('.slider');
var $progressBar = $('.progress');
var $progressBarLabel = $('.slider__label');
$slider.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
var calc = ((nextSlide) / (slick.slideCount - 1)) * 100;
$progressBar
.css('background-size', calc + '% 100%')
.attr('aria-valuenow', calc);
$progressBarLabel.text(calc + '% completed');
});
$('.slider').slick({
slide: 'li',
infinite: true,
slidesToShow: 3,
slidesToScroll: 1,
arrows: false,
dots: false,
autoplay: false,
pauseOnHover: true,
vertical: false,
// prevArrow: "<button type='button' class='slick-prev'></button>",
// nextArrow: "<button type='button' class='slick-next'></button>",
draggable: true,
autoplay: true,
autoplaySpeed: 3500,
responsive: [
{
breakpoint: 960,
settings: {
slidesToShow: 2
}
},
{
breakpoint: 768,
settings: {
slidesToShow: 1
}
}
]
});
}
3
Style Guide
