- See Full Page →
-
`21 Digital
Experience
Blank
Project
1
Skill Used
→ Research → UX design → UI Design
→ Responsive→ Development → Prototyping *
→ Responsive→ Development → Prototyping *
코로나19의 확산으로 미술계에도 ‘비대면 전시 관람’이 늘었습니다.
미술관이나
갤러리들은 관람객들이 VR(가상현실) 등을 통해
작품을 감상하도록 하고, 미술
영상 콘텐츠를 제공하는 온라인
서비스를 확대하고 있습니다. 그동안 전시 진행이
어려웠을
작가들에게 온라인을 통해 상설전시의 기회를 제공하고, 다양한
전시에
갈증을 느끼고 있을 대중의 니즈를 반영하여 기획하게
되었습니다. 작가들에게
비용, 공간, 시간적 조건의 제약없이
관람객들과 가깝게 소통할 수 있는 기회가
주어지고,
대중들에게는 다양한 작품을 감상할 수 있도록 돕는 서비스입니다.
Informations
Viewport : Desktop
IE Support : IE9+
| Category | Source | Related Keyword |
|---|---|---|
| HTML | Index.html | HTML5 |
| HTML | Exhibition.html | HTML5 |
| HTML | Gallery.html | HTML5 |
| CSS | style.css | CSS3 |
| CSS | reset.css | CSS3 |
| JS | script.js | jQuery ∙ Slick |
2
Code View
- index.html
- exhibition.html
- gallery.html
- style.css
- reset.css
- script.js
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Blank Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0; maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style.css">
<!-- FONT BELOW-->
<link href="https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<!-- STYLE SHEET CSS -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
<!-- FONT-AWESOME -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
<!-- JQUERY SCRIPT-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<!-- SLICK SLIDE-->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!-- JAVA SCRIPT -->
<script src="js/script.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- SPLITTING SCRIPT LIBRARY LINK-->
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
</head>
<body>
<ul id="skipmenu">
<li><a href="#" title="Skip directly to menu">Skip directly to menu</a></li>
<li><a href="#" title="Skip directly to site content">Skip directly to site content</a></li>
<li><a href="#" title="Skip directly to site footer">Skip directly to site footer</a></li>
</ul>
<!--skipmenu-->
<header id="header_wrap">
<div id="htop_wrap">
<div id="htop_inner">
<ul id="htop_menu">
<li><a href="#" title="go to page">Donation</a></li>
<li><a href="#" title="go to page">Sign in</a> / <a href="#" title="go to page">Log in</a></li>
<li><a href="#" title="go to page">Contact Us</a></li>
</ul>
</div>
<!--htop_inner-->
</div>
<!--htop_wrap-->
<div id="hbottom_wrap">
<div id="hbottom_inner">
<div id="mnav_btn">
<a href="#">
<span class="line01"></span>
<span class="line02"></span>
<span class="line03"></span>
</a>
</div>
<!--mnav_btn-->
<div id="mnav_menu">
<ul id="mnav_list">
<li><a href="#" title="go to page">ABOUT</a></li>
<li><a href="exhibition.html" title="go to page">VR GALLERY</a></li>
<li><a href="#" title="go to page">ARTISTS</a></li>
<li><a href="#" title="go to page">SHOP</a></li>
<li><a href="#" title="go to page">PRESS</a></li>
</ul>
<ul id="mnav_sublist">
<li><a href="#" title="go to page">LOG IN</a></li>
<li><a href="#" title="go to page">SIGN IN</a></li>
<li><a href="#" title="go to page">DONATION</a></li>
</ul>
</div>
<!--mnav_menu-->
<h1 id="logo"><a href="#" title="go to home"></a></h1>
<nav id="gnb">
<ul id="gnb_menu">
<li><a href="#" title="go to page">About</a></li>
<li><a href="exhibition.html" title="go to page">Exhibition</a></li>
<li><a href="#" title="go to page">Artists</a></li>
<li><a href="#" title="go to page">Shop</a></li>
<li><a href="#" title="go to page">Press</a></li>
</ul>
</nav>
<div id="icon_menu">
<ul>
<li id="icon_search"><a href="#" title="search"></a></li>
<li id="icon_mypage"><a href="#" title="my page"></a></li>
<li id="icon_favorites"><a href="#" title="favorites"></a></li>
<li id="icon_cart"><a href="#" title="cart"></a></li>
</ul>
</div>
<!--icon_menu-->
</div>
<!--hbottom_inner-->
</div>
<!--hbottom_wrap-->
</header>
<!---------------------HEADER--------------------->
<div id="con01">
<div class="wrap">
<ul class="slider">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<div id="con01_inner">
<div class="promo_text clearfix" data-splitting>
<p class="promo">Art Platform of<br>Contemporary & Modern Art</p>
</div>
<span class="text_promo">Blank Project is a online platform that allows anyone to explore<br>Virtual Reality exhibitions as well as buy real art pieces through our VR application.</span>
<span class="credit">Artwork by Doba Afolabi</span>
<!--promo_text-->
</div><!-- con01_inner -->
</div><!-- CONTENT 01 -->
<div class="textarea">
<div class="textarea_inner clearfix">
<h2>Virtual Reality<br>Modern Art<br>Gallery</h2>
<p>Blank Project is an online art flatform for contemporary art that allows <br> collectors and art lovers alike to buy works of art in complete security<br>from nationally recognized artists</p>
<div class="btn_01">
<a href="#" title="Discover More">DISCOVER MORE</a>
</div>
<!--btn_01-->
</div>
<!--textarea_inner-->
</div>
<!--textarea-->
<!---------------------CON01--------------------->
<div id="con02_wrap">
<div class="box clearfix">
<div id="con02_inner">
<h2 class="content_title">TRENDING EXHIBITION</h2>
<div class="visual_slide">
<ul class="vslide01 clearfix slider-wrapper">
<li class="gallery-slide">
<div class="img_wrap">
<a href="#" title="go to page">
<img src="images/main_con02_visual_01.jpg">
<span class="singleBtn">GO TO EXHIBITION</span>
</a>
</div>
<span class="visual_title">Painted By Numbers, 2016</span>
<span class="artist_name">Curve and Esteme</span>
<p class="art_description tab"> Street artist Curve and Esteme’s artworks represents<br>the raw energy of a distinct pop-graffiti aesthetic cen-<br>tered on fluid, bold outlines against a dense, rhythmic<br>overspread of imagery of portraits and nature. </p>
</li>
<li class="gallery-slide">
<div class="img_wrap">
<a href="exhibi" title="go to page">
<img src="images/main_con02_visual_02.jpg">
<span class="singleBtn">GO TO EXHIBITION</span>
</a>
</div>
<span class="visual_title">The Indifferent Owl, 2011</span>
<span class="artist_name">Gary Hume</span>
<p class="art_description"> Hume has developed a distinctive visual language of<br>bold, simplified forms to create paintings that engage the<br>viewer with their pleasantly irresolvable quality.</p>
</li>
<li class="gallery-slide">
<div class="img_wrap">
<a href="exhibiton.html" title="go to page">
<img src="images/main_con02_visual_03.jpg">
<span class="singleBtn">GO TO EXHIBITION</span>
</a>
</div>
<span class="visual_title">The Crutch Kid, 2017</span>
<span class="artist_name">Casey Bolding</span>
<p class="art_description"> Definitely digging the unique style of Brooklyn-based<br>painter whose surfaces span both concrete walls in public<br>spaces as well as canvas and works on paper.</p>
</li>
<li class="gallery-slide">
<div class="img_wrap">
<a href="exhibiton.html" title="go to page">
<img src="images/main_con02_visual_04.jpg">
<span class="singleBtn">GO TO EXHIBITION</span>
</a>
</div>
<span class="visual_title">New Mexico, Continued, 2018</span>
<span class="artist_name">Max Vesuvius Budnick</span>
<p class="art_description"> Ranging from deeply personal self-portraits and<br>vignettes from his own life to nuanced explorations of<br>history, politics, and ideas, all of his works convey his lust<br>for expression and his passion for intellection.</p>
</li>
<li class="gallery-slide">
<div class="img_wrap">
<a href="exhibiton.html" title="go to page">
<img src="images/main_con02_visual_01.jpg">
<span class="singleBtn">GO TO EXHIBITION</span>
</a>
</div>
<span class="visual_title">Painted By Numbers, 2016</span>
<span class="artist_name">Curve and Esteme</span>
<p class="art_description tab"> Street artist Curve and Esteme’s artworks represents<br>the raw energy of a distinct pop-graffiti aesthetic cen-<br>tered on fluid, bold outlines against a dense, rhythmic<br>overspread of imagery of portraits and nature. </p>
</li>
<li class="gallery-slide">
<div class="img_wrap">
<a href="exhibiton.html" title="go to page">
<img src="images/main_con02_visual_02.jpg">
<span class="singleBtn">GO TO EXHIBITION</span>
</a>
</div>
<span class="visual_title">The Indifferent Owl, 2011</span>
<span class="artist_name">Gary Hume</span>
<p class="art_description"> Hume has developed a distinctive visual language of<br>bold, simplified forms to create paintings that engage the<br>viewer with their pleasantly irresolvable quality.</p>
</li>
<li class="gallery-slide">
<div class="img_wrap">
<a href="#" title="go to page"><img src="images/main_con02_visual_03.jpg">
<span class="singleBtn">GO TO EXHIBITION</span>
</a>
</div>
<span class="visual_title">The Crutch Kid, 2017</span>
<span class="artist_name">Casey Bolding</span>
<p class="art_description"> Definitely digging the unique style of Brooklyn-based<br>painter whose surfaces span both concrete walls in public<br>spaces as well as canvas and works on paper.</p>
</li>
<li class="gallery-slide">
<div class="img_wrap">
<a href="#" title="go to page"><img src="images/main_con02_visual_04.jpg">
<span class="singleBtn">GO TO EXHIBITION</span>
</a>
</div>
<span class="visual_title">New Mexico, Continued, 2018</span>
<span class="artist_name">Max Vesuvius Budnick</span>
<p class="art_description"> Ranging from deeply personal self-portraits and<br>vignettes from his own life to nuanced explorations of<br>history, politics, and ideas, all of his works convey his lust<br>for expression and his passion for intellection.</p>
</li>
</ul>
</div>
<!--visual_slide-->
</div>
<!--con02_inner-->
</div>
<!--box-->
<div class="box con02">
<div class="textarea">
<div class="textarea_inner clearfix">
<h2>Showcase <br>Artworks in <br>Virtual Spaces</h2>
<p>Explore virtual art gallery exhibitions , no hardware is required<br> to explore the galleries. Art Galleries at Blank Proejct can also<br> create VR exhibitions and showcase art in Virtual Reality. </p>
<div class="btn_01">
<a href="exhibition.html" title="Discover More">DISCOVER MORE</a>
</div>
<!--btn_01-->
</div>
<!--textarea_inner-->
</div>
<!--textarea-->
</div>
<!--box-->
</div>
<!--con02_wrap-->
<!---------------------CON02--------------------->
<div id="con03_wrap">
<div class="box">
<div id="con03_inner">
<h2 class="content_title">ARTWORK SUBMISSION</h2>
<div id="visual_03">
<div id="visual_03_text" class="promo_text">
<div class="promo_text clearfix" data-splitting>
<p class="promo">Looking for Opportunities<br>to Showcase your Artworks?</p>
</div>
<span class="text_promo">If you are an artist looking to submit your artwork to a gallery and wish to<br>stay updated on relevant upcoming opportunities, join our mailing list</span>
</div>
<div class="slideTwo clearfix">
<ul class="slider">
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!--slideTwo-->
</div>
<!--visual_slide-->
</div>
<!--con03_inner-->
<div class="textarea">
<div class="textarea_inner clearfix">
<h2>Find a Space <br>For Your <br>Art Exhibition</h2>
<p>You can find a free space to rent for your own art exbihitions.<br> Blank Project is willing to offer young talented artists who<br>needs a space for their exhibition in both online and off-line platform.</p>
<div class="btn_01">
<a href="#" title="Discover More">READ MORE</a>
</div>
<!--btn_01-->
</div>
<!--textarea_inner-->
</div>
<!--textarea-->
</div>
<!--box-->
</div>
<!--con03_wrap-->
<!---------------------CON03--------------------->
<div id="con04_wrap">
<div class="box clearfix">
<div id="con04_inner" class="clearfix">
<h2 class="content_title">EMERGING ARTISTS</h2>
<div class="visual_slide">
<ul class="vslide01 clearfix slider-wrapper">
<li class="gallery-slide">
<div class="img_wrap">
<img src="images/main_con04_visual_01.jpg">
<span class="exhibit_btn">
<a class="btn_style01" href="#">
GO TO EXHIBITION
</a>
</span>
<span class="artwork_btn">
<a class="btn_style01" href="#">
SHOP ARTWORK
</a>
</span>
<span class="artist_id">@geraldines_galleri</span>
</div>
<span class="artist_name">Marcus Aitken</span>
<p class="art_description"> Norwegian abstract colourist whose work has been exhibited internationally and most recently selected for the Ashurst Emerging Artist Prize shortlist. Geraldine’s paintings investigate themessuch as the inner psyche, nature and memory, expressed as pureabstraction through her unique approach to the Nordic colour tradition. </p>
</li>
<li class="gallery-slide">
<div class="img_wrap">
<img src="images/main_con04_visual_02.jpg">
<span class="artist_id">@marcusaitken_</span>
<span class="exhibit_btn on">
<a class="btn_style01" href="#">
GO TO EXHIBITION
</a>
</span>
<span class="artwork_btn">
<a class="btn_style01" href="#">
SHOP ARTWORK
</a>
</span>
</div>
<span class="artist_name">Cassi Namoda</span>
<p class="art_description"> A contemporary artist and painter from South London. His work has been featured in various publications including Schön! Magazine, Art Plugged, Saatchi Online, Trebuchet, Condé Nast and Culture Trip and was recently named as one of Saatchi Arts top 20 emerging artists to watch in 2020.</p>
</li>
<li class="gallery-slide">
<div class="img_wrap">
<img src="images/main_con04_visual_03.jpg">
<span class="exhibit_btn">
<a class="btn_style01" href="#">
GO TO EXHIBITION
</a>
</span>
<span class="artwork_btn">
<a class="btn_style01" href="#">
SHOP ARTWORK
</a>
</span>
<span class="artist_id">@cas_namodaa</span>
</div>
<span class="artist_name">Cassi Namoda</span>
<p class="art_description"> Performance artist who explores the intricacies of social dynamics and mixed cultural and racial identity. Capturing scenes of everyday life, from mundane moments to life-changing events, she paints a vibrant and nuanced portrait of post-colonial Mozambique within an increasingly globalised world.</p>
</li>
<li class="gallery-slide">
<div class="img_wrap">
<img src="images/main_con04_visual_04.jpg">
<span class="exhibit_btn">
<a class="btn_style01" href="#">
GO TO EXHIBITION
</a>
</span>
<span class="artwork_btn">
<a class="btn_style01" href="#">
SHOP ARTWORK
</a>
</span>
<span class="artist_id">@jacquesblk</span>
</div>
<span class="artist_name">Deshawn Dumas</span>
<p class="art_description"> DeShawn Dumas’ is occupied by U.S. slavery’s unresolved unfolding. In painting, he turns the conventions of modern art and the aesthetics of telecommunication devices towards the socio-cultural experiences of Black lives lived in and above euro-ethnic inhumanity.</p>
</li>
<li class="gallery-slide">
<div class="img_wrap">
<img src="images/main_con04_visual_01.jpg">
<span class="exhibit_btn">
<a class="btn_style01" href="#">
GO TO EXHIBITION
</a>
</span>
<span class="artwork_btn">
<a class="btn_style01" href="#">
SHOP ARTWORK
</a>
</span>
<span class="artist_id">@geraldines_galleri</span>
</div>
<span class="artist_name">Marcus Aitken</span>
<p class="art_description"> Norwegian abstract colourist whose work has been exhibited internationally and most recently selected for the Ashurst Emerging Artist Prize shortlist. Geraldine’s paintings investigate themessuch as the inner psyche, nature and memory, expressed as pureabstraction through her unique approach to the Nordic colour tradition. </p>
</li>
<li class="gallery-slide">
<div class="img_wrap">
<img src="images/main_con04_visual_02.jpg">
<span class="artist_id">@marcusaitken_</span>
<span class="exhibit_btn on">
<a class="btn_style01" href="#">
GO TO EXHIBITION
</a>
</span>
<span class="artwork_btn">
<a class="btn_style01" href="#">
SHOP ARTWORK
</a>
</span>
</div>
<span class="artist_name">Cassi Namoda</span>
<p class="art_description"> A contemporary artist and painter from South London. His work has been featured in various publications including Schön! Magazine, Art Plugged, Saatchi Online, Trebuchet, Condé Nast and Culture Trip and was recently named as one of Saatchi Arts top 20 emerging artists to watch in 2020.</p>
</li>
<li class="gallery-slide">
<div class="img_wrap">
<img src="images/main_con04_visual_03.jpg">
<span class="exhibit_btn">
<a class="btn_style01" href="#">
GO TO EXHIBITION
</a>
</span>
<span class="artwork_btn">
<a class="btn_style01" href="#">
SHOP ARTWORK
</a>
</span>
<span class="artist_id">@cas_namodaa</span>
</div>
<span class="artist_name">Cassi Namoda</span>
<p class="art_description"> Performance artist who explores the intricacies of social dynamics and mixed cultural and racial identity. Capturing scenes of everyday life, from mundane moments to life-changing events, she paints a vibrant and nuanced portrait of post-colonial Mozambique within an increasingly globalised world.</p>
</li>
<li class="gallery-slide">
<div class="img_wrap">
<img src="images/main_con04_visual_04.jpg">
<span class="exhibit_btn">
<a class="btn_style01" href="exhibiton.html">
GO TO EXHIBITION
</a>
</span>
<span class="artwork_btn">
<a class="btn_style01" href="#">
SHOP ARTWORK
</a>
</span>
<span class="artist_id">@jacquesblk</span>
</div>
<span class="artist_name">Deshawn Dumas</span>
<p class="art_description"> DeShawn Dumas’ is occupied by U.S. slavery’s unresolved unfolding. In painting, he turns the conventions of modern art and the aesthetics of telecommunication devices towards the socio-cultural experiences of Black lives lived in and above euro-ethnic inhumanity.</p>
</li>
</ul>
</div>
<!--visual_slide-->
<a href="#" title="Discover More">DISCOVER MORE ARTISTS</a>
</div>
<!--con04_inner-->
</div>
<!--box-->
</div>
<!---------------------CON04--------------------->
<div id="con05_wrap">
<div class="box">
<div id="con05_inner" class="clearfix">
<h2 class="content_title">SHOPS</h2>
<div id="con05_visual" class="clearfix">
<div id="box05_left">
<a href="#" class="this">
<div class="con05_visual"></div>
<span class="shop_btn">GO TO SHOP</span>
<h3>Sell & Purchase<br>Original Artworks</h3>
<p class="shop_text">Celebrate your favorite artworks with<br>framed reproductions and artist products<br>that feature details from various works,<br>manyfeatured in our collection.</p>
</a>
</div>
<!--05_left-->
<div id="box05_right">
<div id="right_top">
<a href="#" class="this">
<div class="con05_visual"></div>
<span class="shop_btn on">GO TO SHOP</span>
<h3>Original Paintings</h3>
<span class="artist_id">@Alyce Gottesman</span>
</a>
</div>
<!--right_top-->
<div id="right_bottom">
<div id="right_bottom01">
<a href="#" class="this">
<div class="con05_visual"></div>
<span class="shop_btn">SHOP</span>
<h3>Sculpture Art</h3>
<span class="artist_id">@Jim Osman</span>
</a>
</div>
<div id="right_bottom02">
<a href="#" class="this">
<div class="con05_visual"></div>
<span class="shop_btn">SHOP</span>
<h3>Prints & <br>Photography</h3>
<span class="artist_id">@KangHee Kim</span>
</a>
</div>
<!--right_bottom02-->
</div>
<!--right_bottom-->
</div>
<!--05_right-->
</div>
<!--con05_visual-->
</div>
<!--con05_inner-->
<div class="textarea_inner clearfix">
<h2>Discover The World <br>Though Original <br>Artworks</h2>
<p>From abstract canvases, figurative paintings, drawings or even street art and graffiti,<br>we offer an international selection of work in a variety of styles and techniques.<br>we are also helping emerging artists from around the globe to sell their works to art lovers.</p>
</div>
</div>
<!--box-->
</div>
<!--con05_wrap-->
<!---------------------CON05--------------------->
<div id="news_wrap">
<div id="news_inner" class="clearfix">
<h3>Subscribe to our Newsletter</h3>
<div id="newsletter" class="clearfix">
<img src="images/icons/logo_news.png">
<div class="container">
<form>
<div class="omrs-input-group">
<label class="omrs-input-underlined">
<input required>
<span class="omrs-input-label">Email Address</span>
<!-- <span class="omrs-input-helper"></span>-->
<path fill="none" d="M0 0h24v24H0V0z" />
<circle cx="15.5" cy="9.5" r="1.5" />
<circle cx="8.5" cy="9.5" r="1.5" />
<path d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8zm-5-6c.78 2.34 2.72 4 5 4s4.22-1.66 5-4H7z" />
</label>
</div>
</form>
</div>
</div>
</div><!-- news_inner -->
</div><!-- news_wrap -->
<!---------------------NEWS--------------------->
<footer id="footer_wrap">
<div id="footer_inner" class="clearfix">
<div id="footer_info" class="clearfix">
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Open Source</a></li>
</ul>
<ul>
<li><a href="#">Promotions</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Consign with Us</a></li>
<li><a href="#">Buying with Us</a></li>
<li><a href="#">FAQs</a></li>
</ul>
<ul>
<li><a href="#">Service Center</a></li>
<li><a href="#">Notice</a></li>
<li><a href="#">070-1234-5678</a></li>
<li><a href="#">Office Hour 10:00 ~ 17:00</a></li>
</ul>
</div>
<div id="sns">
<div id="logo_box">
<!-- <img src="images/icons/logo_news_white.png" alt="logo_white">-->
<div id="sns_logo" class="clearfix">
<a href="#" title="facebook"><i class="fab fa-facebook fa-2x"></i></a>
<a href="#" title="instagram"><i class="fab fa-instagram fa-2x"></i></a>
<a href="#" title="twitter"><i class="fab fa-twitter fa-2x"></i></a>
<a href="#" title="youtube"><i class="fab fa-youtube fa-2x"></i></a>
</div>
</div>
<!--logo_box-->
</div><!-- sns -->
<ul class="footer_submenu clearfix">
<li>© 2020 Blank Project</li>
<li><a href="#">Term of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Conditions of Sale</a></li>
</ul>
</div>
<!--footer_inner-->
</footer>
<!--footer_wrap-->
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Blank Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style_exhibit.css">
<!-- FONT -->
<!-- <link href="https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap" rel="stylesheet">-->
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<!-- STYLE SHEET CSS LINK BELOW -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
<!-- FONT-AWESOME LINK BELOW -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
<!-- JQUERY SCRIPT LINK BELOW -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<!-- SLICK SLIDE LINK BELOW -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!-- JAVA SCRIPT -->
<!-- <script src="js/script.js" type="text/javascript"></script>-->
<script src="js/script02.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- SPLITTING SCRIPT LIBRARY LINK BELOW -->
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
</head>
<body>
<!---------------------SKIP MENU BLOEW --------------------->
<ul id="skipmenu">
<li><a href="#" title="Skip directly to menu">Skip directly to menu</a></li>
<li><a href="#" title="Skip directly to site content">Skip directly to site content</a></li>
<li><a href="#" title="Skip directly to site footer">Skip directly to site footer</a></li>
</ul>
<!--skipmenu-->
<!---------------------HEADER BLOEW --------------------->
<header id="header_wrap">
<div id="htop_wrap">
<div id="htop_inner">
<ul id="htop_menu">
<li><a href="#" title="go to page">Donation</a></li>
<li><a href="#" title="go to page">Sign in</a> / <a href="#" title="go to page">Log in</a></li>
<li><a href="#" title="go to page">Contact Us</a></li>
</ul>
</div>
<!--htop_inner-->
</div>
<!--htop_wrap-->
<div id="hbottom_wrap">
<div id="hbottom_inner">
<div id="mnav_btn">
<a href="#">
<span class="line01"></span>
<span class="line02"></span>
<span class="line03"></span>
</a>
</div>
<!--mnav_btn-->
<div id="mnav_menu">
<ul id="mnav_list">
<li><a href="#" title="go to page">ABOUT</a></li>
<li><a href="#" title="go to page">VR GALLERY</a></li>
<li><a href="#" title="go to page">ARTISTS</a></li>
<li><a href="#" title="go to page">SHOP</a></li>
<li><a href="#" title="go to page">PRESS</a></li>
</ul>
<ul id="mnav_sublist">
<li><a href="#" title="go to page">LOG IN</a></li>
<li><a href="#" title="go to page">SIGN IN</a></li>
<li><a href="#" title="go to page">DONATION</a></li>
</ul>
</div>
<!--mnav_menu-->
<h1 id="logo"><a href="index.html" title="go to home"></a></h1>
<nav id="gnb">
<ul id="gnb_menu">
<li><a href="#" title="go to page">About</a></li>
<li><a href="#" title="go to page">Exhibition</a></li>
<li><a href="#" title="go to page">Artists</a></li>
<li><a href="#" title="go to page">Shop</a></li>
<li><a href="#" title="go to page">Press</a></li>
</ul>
</nav>
<div id="icon_menu">
<ul>
<li id="icon_search"><a href="#" title="search"></a></li>
<li id="icon_mypage"><a href="#" title="my page"></a></li>
<li id="icon_favorites"><a href="#" title="favorites"></a></li>
<li id="icon_cart"><a href="#" title="cart"></a></li>
</ul>
</div>
<!--icon_menu-->
</div>
<!--hbottom_inner-->
</div>
<!--hbottom_wrap-->
</header>
<!---------------------CON 01 BLOEW --------------------->
<div id="con01_wrap">
<div id="con01_inner">
<div id="trending_slide" class="clearfix">
<ul class="slider01 clearfix">
<li>
<div class="main_wrap">
<img class="pc_img" src="images/exhibit_main/con01_visual01.png" alt="main_slide_img">
<img class="m_img" src="images/exhibit_main/con01_visual01_m.png" alt="main_slide_mobile_img">
</div><!-- img_wrap -->
<div class="text_wrap">
<div class="slick-counter">
<span class="current"></span>
/
<span class="total"></span>
</div>
<button class="slick-next01 slick-arrow" aria-label="Next" type="button" style="display: block;"></button>
<button class="slick-prev01 slick-arrow" aria-label="Previous" type="button" style="display: block;"></button>
<h2 class="con_tit">Trending <br>Art Exhibition</h2>
<div class="info">
<p class="artist_name">Melike Kara
<span class="addFavorite"><a href="#" title="add to favorite"></a></span>
</p>
<p class="artwork_name">Weaving Words, 2019 </p>
<p class="art_medium">Oil stick and acrylic on canvas<br> 201 X 150 cm</p>
</div>
<!--info-->
<div class="con01_txt_wrap">
<p class="text">
Melike Kara negotiates the relationship between forms and gestures to explore social relationships and individual subjective states. she focuses on the immediacy of bodily forms rendered through frenetic accumulations of lines or small, misshapen clay figures.
</p>
</div>
<!--con01_txt_wrap-->
<a class="btn01" href="#" title="go to exhibition">GO TO EXHIBITION</a>
</div>
<!--text_wrap-->
</li>
<li>
<div class="main_wrap">
<img class="pc_img" src="images/exhibit_main/con01_visual02.png" alt="main_slide_img">
<img class="m_img" src="images/exhibit_main/con01_visual02_m.png" alt="main slide mobile img">
</div>
<div class="text_wrap">
<div class="slick-counter">
<span class="current"></span>
/
<span class="total"></span>
</div>
<button class="slick-next01 slick-arrow" aria-label="Next" type="button" style="display: block;"></button>
<button class="slick-prev01 slick-arrow" aria-label="Previous" type="button" style="display: block;"></button>
<h2 class="con_tit">Trending <br>Art Exhibition</h2>
<div class="info">
<p class="artist_name">He Xiangyu
<span class="addFavorite"><a href="#" title="add to favorite"></a></span>
</p>
<p class="artwork_name">Palate 18-2-9, 2018</p>
<p class="art_medium">Multi-media on canvas<br> 210 × 152 cm</p>
</div>
<!--info-->
<div class="con01_txt_wrap">
<p class="text">
Conceptual artist He Xiangyu is perhaps best known for his headline-grabbing work The Death of Marat (2011), which featured a life-like resin sculpture of the corpse of Asian dissident artist Ai Weiwei placed in the window of a German gallery.
</p>
</div>
<!--con01_txt_wrap-->
<a class="btn01" href="#" title="go to exhibition">GO TO EXHIBITION</a>
</div>
<!--text_wrap-->
</li>
<li>
<div class="main_wrap">
<img class="pc_img" src="images/exhibit_main/con01_visual03.png" alt="main_slide_img">
<img class="m_img" src="images/exhibit_main/con01_visual03_m.png" alt="main slide mobile img">
</div>
<div class="text_wrap">
<div class="slick-counter">
<span class="current"></span>
/
<span class="total"></span>
</div>
<button class="slick-next01 slick-arrow" aria-label="Next" type="button" style="display: block;"></button>
<button class="slick-prev01 slick-arrow" aria-label="Previous" type="button" style="display: block;"></button>
<h2 class="con_tit">Trending <br>Art Exhibition</h2>
<div class="info">
<p class="artist_name">
Andy Denzler
<span class="addFavorite"><a href="#" title="add to favorite"></a></span>
</p>
<p class="artwork_name">Factured VII, 2020</p>
<p class="art_medium">Oil on canvas<br> 120 × 140 cm</p>
</div>
<!--info-->
<div class="con01_txt_wrap">
<p class="text">
Andy Denzler weaves nostalgic photorealism <br>
with gestural expression in his wholly original style of painting. He achieves the look of his works—at once a paused film still and a sweeping abstraction—by alternating bands of unmoving,impastoed detail with horizontal sweeps of brush.
</p>
</div>
<!--con01_txt_wrap-->
<a class="btn01" href="#" title="go to exhibition">GO TO EXHIBITION</a>
</div>
<!--text_wrap-->
</li>
<li>
<div class="main_wrap">
<img class="pc_img" src="images/exhibit_main/con01_visual04.png" alt="main_slide_img">
<img class="m_img" src="images/exhibit_main/con01_visual04_m.png" alt="main slide mobile img">
</div>
<div class="text_wrap">
<div class="slick-counter">
<span class="current"></span>
/
<span class="total"></span>
</div>
<button class="slick-next01 slick-arrow" aria-label="Next" type="button" style="display: block;"></button>
<button class="slick-prev01 slick-arrow" aria-label="Previous" type="button" style="display: block;"></button>
<h2 class="con_tit">Trending Art Exhibition</h2>
<div class="info">
<p class="artist_name">
Marcus Maddox
<span class="addFavorite"><a href="#" title="add to favorite"></a></span>
</p>
<p class="artwork_name">Sosa No. 1, New York, 2019</p>
<p class="art_medium">Archival pigment print, mounted<br> 22.2 × 17.8 cm</p>
</div>
<!--info-->
<div class="con01_txt_wrap">
<p class="text">
Figures of Color is a study of black skin that explores the relationship between light and dark. This work diverts from my other photographic approaches,underscored by an appreciation for fine art painting.
</p>
</div>
<!--con01_txt_wrap-->
<a class="btn01" href="#" title="go to exhibition">GO TO EXHIBITION</a>
</div>
<!--text_wrap-->
</li>
</ul>
</div>
<!--trending_slide-->
</div>
<!-- con01_inner -->
</div>
<!-- con01_wrap -->
<!---------------------CON 02 BLOEW --------------------->
<div id="con02_wrap">
<div id="con02_inner">
<div class="category clearfix">
<button id="filter_btn">
FILTER <span id="in">+</span> <span id="out">–</span>
</button>
<div id="filter_wrap">
<div id="filter_inner" class="clearfix">
<div class="sel sel--black-panther">
<select name="select-profession" id="select-profession">
<option class="list_name" value="disabled">STYLE</option>
<option value="hacker">Photography</option>
<option value="gamer">Drawings</option>
<option value="developer">Prints</option>
<option value="programmer">Sculptures</option>
<option value="designer">Other</option>
</select>
</div>
<div class="sel sel--black-panther">
<select name="select-profession" id="select-profession">
<option class="list_name" value="disabled">THEME</option>
<option value="hacker">Conceptual</option>
<option value="gamer">Expressionism</option>
<option value="developer">Minimalism</option>
<option value="programmer">Surrealism</option>
<option value="programmer">Digital</option>
<option value="programmer">Pop Art</option>
<option value="designer">Other</option>
</select>
</div>
<div class="sel sel--black-panther lastsel">
<select name="select-profession" id="select-profession">
<option class="list_name" value="disabled">MEDIUM</option>
<option value="hacker">Acrylics</option>
<option value="gamer">Oil Paintings</option>
<option value="developer">Watercolor</option>
<option value="programmer">Paper</option>
<option value="programmer">Digital</option>
<option value="programmer">Metal</option>
<option value="designer">Other</option>
</select>
</div>
</div><!-- filter inner -->
</div><!-- filter_wrap -->
<div id="pc_filter" class="clearfix">
<div class="sel sel--black-panther">
<select name="select-profession" id="select-profession">
<option class="list_name" value="disabled">STYLE</option>
<option value="hacker">Photography</option>
<option value="gamer">Drawings</option>
<option value="developer">Prints</option>
<option value="programmer">Sculptures</option>
<option value="designer">Other</option>
</select>
</div>
<div class="sel sel--black-panther">
<select name="select-profession" id="select-profession">
<option class="list_name" value="disabled">THEME</option>
<option value="hacker">Conceptual</option>
<option value="gamer">Expressionism</option>
<option value="developer">Minimalism</option>
<option value="programmer">Surrealism</option>
<option value="programmer">Digital</option>
<option value="programmer">Pop Art</option>
<option value="designer">Other</option>
</select>
</div>
<div class="sel sel--black-panther">
<select name="select-profession" id="select-profession">
<option class="list_name" value="disabled">MEDIUM</option>
<option value="hacker">Acrylics</option>
<option value="gamer">Oil Paintings</option>
<option value="developer">Watercolor</option>
<option value="programmer">Paper</option>
<option value="programmer">Digital</option>
<option value="programmer">Metal</option>
<option value="designer">Other</option>
</select>
</div>
</div><!-- pc_filter -->
<div id="list_right">
<div id="sort">
<span>SORT —</span>
<div class="sel sel--black-panther">
<select name="select-profession" id="select-profession">
<option value="trending">TRENDING</option>
<option value="trending">TRENDING</option>
<option value="newest">NEWEST</option>
<option value="relevance">RELEVANCE</option>
</select>
</div>
</div>
<!--sort-->
<div class="view">
VIEW
<span class="two">2</span>
<span class="four">4</span>
</div>
<!--view-->
</div>
<!--list_right-->
</div><!-- category -->
<h2 class="con_tit"><span class="cut">BLANK PROJECT</span><br>Virtual Art Gallery</h2>
<p class="con_txt">
Explore virtual art gallery exhibitions , no hardware is required to explore the galleries.<br>
Art Galleries at Blank Proejct can also create VR exhibitions and showcase art in Virtual Reality.<br>
<span class="cut">
Don't miss this unique opportunity to see and participate in the early exhibition of theVR creative tools and talents.<br>
Watch as artists expand into an entirely new type of canvas.
</span>
</p>
</div>
<!--con02_inner-->
</div>
<!--con02_wrap-->
<!---------------------CON 03 BLOEW --------------------->
<div id="con03_wrap">
<div id="con03_inner">
<div class="gallery_list">
<ul class="clearfix">
<li>
<a href="gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_01.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Curve & Esteme</p>
<p class="gallery_tit">Detours and Dreams</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_02.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Casey Bolding</p>
<p class="gallery_tit">The Crutch Kid (2017)</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_03.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Gary Hume</p>
<p class="gallery_tit">The Indifferent Owl (2011)</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_04.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Marcus Aitken</p>
<p class="gallery_tit">Railway - Limited Edition of 50</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_05.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Cassi Namoda</p>
<p class="gallery_tit">Dwelling Is The Light</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_06.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Aissa Christophe Agostini</p>
<p class="gallery_tit">Mister Love, 2020</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_07.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Minjung Kim</p>
<p class="gallery_tit">Street (2015)</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_08.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Marit Geraldine Bostad</p>
<p class="gallery_tit">Lost Paradise</p>
</div>
<!--gallery_txt-->
</li>
</ul>
</div><!-- gallery_list -->
<div class="gallery_list">
<ul class="clearfix">
<li>
<a href="/gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_01.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Curve & Esteme</p>
<p class="gallery_tit">Detours and Dreams</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="/gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_02.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Casey Bolding</p>
<p class="gallery_tit">The Crutch Kid (2017)</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_03.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Gary Hume</p>
<p class="gallery_tit">The Indifferent Owl (2011)</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_04.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Marcus Aitken</p>
<p class="gallery_tit">Railway - Limited Edition of 50</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="/gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_05.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Cassi Namoda</p>
<p class="gallery_tit">Dwelling Is The Light</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_06.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Aissa Christophe Agostini</p>
<p class="gallery_tit">Mister Love, 2020</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_07.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Minjung Kim</p>
<p class="gallery_tit">Street (2015)</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_08.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Marit Geraldine Bostad</p>
<p class="gallery_tit">Lost Paradise</p>
</div>
<!--gallery_txt-->
</li>
</ul>
</div><!-- gallery_list -->
<div class="gallery_list">
<ul class="clearfix">
<li>
<a href="/gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_01.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Curve & Esteme</p>
<p class="gallery_tit">Detours and Dreams</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="/gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_02.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Casey Bolding</p>
<p class="gallery_tit">The Crutch Kid (2017)</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="/gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_03.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Gary Hume</p>
<p class="gallery_tit">The Indifferent Owl (2011)</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="/gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_04.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Marcus Aitken</p>
<p class="gallery_tit">Railway - Limited Edition of 50</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="/gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_05.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Cassi Namoda</p>
<p class="gallery_tit">Dwelling Is The Light</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="/gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_06.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Aissa Christophe Agostini</p>
<p class="gallery_tit">Mister Love, 2020</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="/gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_07.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Minjung Kim</p>
<p class="gallery_tit">Street (2015)</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="/gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_08.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Marit Geraldine Bostad</p>
<p class="gallery_tit">Lost Paradise</p>
</div>
<!--gallery_txt-->
</li>
</ul>
</div><!-- gallery_list -->
<div class="gallery_list">
<ul class="clearfix">
<li>
<a href="/gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_01.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Curve & Esteme</p>
<p class="gallery_tit">Detours and Dreams</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="/gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_02.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Casey Bolding</p>
<p class="gallery_tit">The Crutch Kid (2017)</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="/gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_03.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Gary Hume</p>
<p class="gallery_tit">The Indifferent Owl (2011)</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="/gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_04.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Marcus Aitken</p>
<p class="gallery_tit">Railway - Limited Edition of 50</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="/gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_05.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Cassi Namoda</p>
<p class="gallery_tit">Dwelling Is The Light</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="/gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_06.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Aissa Christophe Agostini</p>
<p class="gallery_tit">Mister Love, 2020</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="/gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_07.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Minjung Kim</p>
<p class="gallery_tit">Street (2015)</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="/gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_08.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Marit Geraldine Bostad</p>
<p class="gallery_tit">Lost Paradise</p>
</div>
<!--gallery_txt-->
</li>
</ul>
</div><!-- gallery_list -->
<div class="gallery_list">
<ul class="clearfix">
<li>
<a href="gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_01.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Curve & Esteme</p>
<p class="gallery_tit">Detours and Dreams</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_02.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Casey Bolding</p>
<p class="gallery_tit">The Crutch Kid (2017)</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_03.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Gary Hume</p>
<p class="gallery_tit">The Indifferent Owl (2011)</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_04.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Marcus Aitken</p>
<p class="gallery_tit">Railway - Limited Edition of 50</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_05.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Cassi Namoda</p>
<p class="gallery_tit">Dwelling Is The Light</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_06.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Aissa Christophe Agostini</p>
<p class="gallery_tit">Mister Love, 2020</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="/gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_07.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Minjung Kim</p>
<p class="gallery_tit">Street (2015)</p>
</div>
<!--gallery_txt-->
</li>
<li>
<a href="/gallery.html" title="go to gallery">
ENTER GALLERY
</a>
<div class="img_wrap">
<img src="images/exhibit_main/con03_visual_08.png" alt="gallery_thumb image">
</div>
<!--img_wrap-->
<div class="gallery_txt">
<span class="add_gallery">
<a href="#" title="add to Favorite"></a>
</span>
<p class="artist_tit">Marit Geraldine Bostad</p>
<p class="gallery_tit">Lost Paradise</p>
</div>
<!--gallery_txt-->
</li>
</ul>
</div><!-- gallery_list -->
<button class="slick-prev02 slick-arrow slick-disabled" aria-label="Previous" type="button" aria-disabled="true" style="display: inline-block;">Prev</button>
<button class="slick-next02 slick-arrow slick-disabled" aria-label="Next" type="button" aria-disabled="false" style="display: inline-block;">Next</button>
</div><!-- con03_inner -->
</div><!-- con03_wrap -->
<p class="copyright">
Copyright © blankproejct. All rights reserved.
</p>
<!---------------------FOOTER BLOEW --------------------->
<footer id="footer_wrap">
<div id="footer_inner" class="clearfix">
<div id="footer_info" class="clearfix">
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Open Source</a></li>
</ul>
<ul>
<li><a href="#">Promotions</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Consign with Us</a></li>
<li><a href="#">Buying with Us</a></li>
<li><a href="#">FAQs</a></li>
</ul>
<ul>
<li><a href="#">Service Center</a></li>
<li><a href="#">Notice</a></li>
<li><a href="#">070-1234-5678</a></li>
<li><a href="#">Office Hour 10:00 ~ 17:00</a></li>
</ul>
</div>
<div id="sns">
<div id="logo_box">
<!-- <img src="images/icons/logo_news_white.png" alt="logo_white">-->
<div id="sns_logo" class="clearfix">
<a href="#" title="facebook"><i class="fab fa-facebook fa-2x"></i></a>
<a href="#" title="instagram"><i class="fab fa-instagram fa-2x"></i></a>
<a href="#" title="twitter"><i class="fab fa-twitter fa-2x"></i></a>
<a href="#" title="youtube"><i class="fab fa-youtube fa-2x"></i></a>
</div>
</div>
<!--logo_box-->
</div><!-- sns -->
<ul class="footer_submenu clearfix">
<li>© 2020 Blank Project</li>
<li><a href="#">Term of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Conditions of Sale</a></li>
</ul>
</div>
<!--footer_inner-->
</footer>
<!--footer_wrap-->
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Blank Project</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0; maximum-scale=1.0, user-scalable=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, shrink-to-fit=no, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.ico">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<link rel="stylesheet" type="text/css" href="css/style_gallery.css">
<!-- WEB FONT -->
<link href="https://fonts.googleapis.com/css2?family=Hind:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">
<!-- STYLE SHEET CSS LINK BELOW -->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css" />
<link type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
<!-- FONT-AWESOME LINKE BELOW -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet">
<!-- JQUERY SCRIPT LINK BELOW -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<!-- SLICK SLIDE LINK BELOW -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<!-- JAVA SCRIPT -->
<script src="js/script03.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<!-- SPLITTING SCRIPT LIBRARY LINK BELOW -->
<script src="https://unpkg.com/splitting/dist/splitting.min.js"></script>
</head>
<body>
<ul id="skipmenu">
<li><a href="#" title="Skip directly to menu">Skip directly to menu</a></li>
<li><a href="#" title="Skip directly to site content">Skip directly to site content</a></li>
<li><a href="#" title="Skip directly to site footer">Skip directly to site footer</a></li>
</ul>
<!--skipmenu-->
<!---------------------HEADER--------------------->
<header id="header_wrap">
<div id="htop_wrap">
<div id="htop_inner">
<ul id="htop_menu">
<li><a href="#" title="go to page">Donation</a></li>
<li><a href="#" title="go to page">Sign in</a> / <a href="#" title="go to page">Log in</a></li>
<li><a href="#" title="go to page">Contact Us</a></li>
</ul>
</div>
<!--htop_inner-->
</div>
<!--htop_wrap-->
<div id="hbottom_wrap">
<div id="hbottom_inner">
<div id="mnav_btn">
<a href="#">
<span class="line01"></span>
<span class="line02"></span>
<span class="line03"></span>
</a>
</div>
<!--mnav_btn-->
<div id="mnav_menu">
<ul id="mnav_list">
<li><a href="#" title="go to page">ABOUT</a></li>
<li><a href="#" title="go to page">VR GALLERY</a></li>
<li><a href="#" title="go to page">ARTISTS</a></li>
<li><a href="#" title="go to page">SHOP</a></li>
<li><a href="#" title="go to page">PRESS</a></li>
</ul>
<ul id="mnav_sublist">
<li><a href="#" title="go to page">LOG IN</a></li>
<li><a href="#" title="go to page">SIGN IN</a></li>
<li><a href="#" title="go to page">DONATION</a></li>
</ul>
</div>
<!--mnav_menu-->
<h1 id="logo"><a href="index.html" title="go to home"></a></h1>
<nav id="gnb">
<ul id="gnb_menu">
<li><a href="#" title="go to page">About</a></li>
<li><a href="#" title="go to page">Exhibition</a></li>
<li><a href="#" title="go to page">Artists</a></li>
<li><a href="#" title="go to page">Shop</a></li>
<li><a href="#" title="go to page">Press</a></li>
</ul>
</nav>
<div id="icon_menu">
<ul>
<li id="icon_search"><a href="#" title="search"></a></li>
<li id="icon_mypage"><a href="#" title="my page"></a></li>
<li id="icon_favorites"><a href="#" title="favorites"></a></li>
<li id="icon_cart"><a href="#" title="cart"></a></li>
</ul>
</div>
<!--icon_menu-->
</div>
<!--hbottom_inner-->
</div>
<!--hbottom_wrap-->
</header>
<!--------------------- CON01 --------------------->
<div id="con01_wrap">
<div class="img_wrap clearfix">
<img src="images/gallery_main/con01_visual01.png" alt="VR gallery">
</div><!-- img_wrap -->
<div id="con01_inner">
<div id="art_text01" class="art_box">
<p class="art_tit">Dog Under The Table (2018)</p>
<span class="artist_name"> Casey Bolding </span>
</div>
<!--art_text-->
<div id="art_text02" class="art_box">
<p class="art_tit">The Crutch Kid (2017)</p>
<span class="artist_name"> Casey Bolding </span>
</div>
<!--art_text-->
<div id="art_text03" class="art_box">
<p class="art_tit">The Walking Man (2019)</p>
<span class="artist_name"> Casey Bolding </span>
</div>
<!--art_text-->
<span class="arrow_lt"><a href="#" title="move to Left"></a></span>
<span class="arrow_rt"><a href="#" title="move to Right"></a></span>
<div id="screen_nav">
<div id="left_nav">
<span class="view">Views 1,325</span>
<span class="vr_icon"></span>
</div><!-- left_nav -->
<div id="mid_nav">
<span class="zoomout"><a href="#"></a></span>
<span class="focus"><a href="#"></a></span>
<span class="zoomin"><a href="#"></a></span>
</div><!-- mid_nav -->
<div id="right_nav">
<span class="fullscreen"><a href="#">Full screen</a></span>
</div><!-- right_nav -->
</div><!-- screen_nav -->
</div><!-- con01_inner -->
</div><!-- con01_wrap -->
<!--------------------- CON02 --------------------->
<div id="con02_wrap">
<div id="con02_inner" class="clearfix">
<button id="prev_page">
<a href="exhibition.html" title="go back to Exhibition">
GO TO EXHIBITION
</a>
</button>
<div class="info_wrap">
<ul class="tabmenu_list">
<li><a href="#">
<span class="pc_menu">OVERVIEW</span>
<span class="m_menu">ABOUT</span></a>
</li>
<li><a href="#">
<span class="pc_menu">BIOGRAPHY</span>
<span class="m_menu">BIO</span></a>
</li>
<li><a href="#">
<span class="pc_menu">ARTICLE</span>
<span class="m_menu">PRESS</span></a>
</li>
<li><a href="#"><span id="remove">WORK FOR</span> SALE</a></li>
</ul>
<ul class="info_list clearfix">
<li class="overview">
<h2 class="con_tit">
"Routine Malfunction"
</h2>
<p class="artist">Casey Bolding</p>
<div id="txt_wrap" class="clearfix">
<p class="description">
"Routine Malfunction" examines the absurdities, extremes, and maleficence of the everyday. Bringing together an eclectic group of eight artists and paintings, sculpture, photography and works on paper, the exhibition is united under the umbrella of contemporary cultural critiques. Dark humor runs rampant, as artists examine the beauties, cruelties, and misgivings of daily life. With humor and compassion, the works seek to reflect upon how we navigate this unforgiving terrain. And though our navigations tend to be clumsy, occasionally, there is grace.
<br>
<br>
Bolding builds an eerie painterly world in which the compositions showcase ambiguous figures and vivid colours. Often, his narratives overlap each other within the same canvas underlying fractures of a lively abstraction. The artist describes his work as both “incidental” and “intentional“, stating the contradictory duality of his compositions. In terms of his themes, his pictorial variation coincides with the array of the stylistic features that do not easily reveal themselves on the canvas’ surface. Some painting attempts seem to make sense while others flirt with creative randomness. Actually, what the viewer’s eye sees can be a deliberately executed composition of reality and imagination, whereas other painting outcomes are more orchestrated.
</p>
</div><!-- txt_wrap -->
<button class="more-info01">
<span class="more">READ MORE </span>
<span class="less">VIEW LESS</span>
</button>
<span class="date">Published 2020/10/25</span>
</li>
<li class="biography clearfix">
<div id="left_b">
<div id="artist_img">
<img src="images/gallery_main/con02_visual01.png" alt="artist thumb img">
</div>
<h2 class="con_tit">Casey Bolding</h2>
<span class="date">American, b. 1987</span>
</div><!-- left_b -->
<div class="text_box">
<p> Casey Bolding is a Postwar & Contemporary artist who was born in 1987. Their work was featured in several exhibitions at key galleries and museums, including the 1969 Gallery and the Catinca Tabacaru Gallery, New York. In MutualArt’s artist press archive, Casey Bolding is featured in Routine Malfunction Group Show at 1969 Gallery, NYC, a piece from the JUXTAPOZ in 2019.
<br>
<br>
Reiterating the symbolic nature of his work, Bolding is keen on utilising subliminal imagery, or subtle shapes and signs, to capture something primal in his audience. Some things that we relate to, we can't explain. His paintings are often such things. Out of the gallery and studio, whilst working in the street, Bolding's paintings appear even more out of context, using forms and techniques largely unseen in street art.
<br>
<br>
On his website, Bolding's works are described as taking 'on a high art facade, executed with low brow materials'. Another paradox. Another level of contradiction and depth.
<br>
<br>
Throughout all of his works, faces remain largely obscured, yet despite that, convey a deep and kinetic expression of pain; ecstasy; grief and torment. Sometimes all of these things indistinguishably at once. Bolding's paintings are always simply and clean in execution, but pack in many styles, genres and themes contributing to the underlining feeling that they're both art and puzzles to chew over - some of which seem to be about the individual, others the collective, but always the universal.
</p>
</div><!-- text_box -->
<button class="more-info">
<span class="more">READ MORE </span>
<span class="less">VIEW LESS</span>
</button>
</li>
<li class="article">
<ul id="article_list" class="clearfix">
<li>
<div class="article_top">
<h3>2019</h3>
<a href="#" class="clearfix">
<div class="article_img">
<img src="images/gallery_main/con02_visual02.png">
</div>
<!--article_img-->
<div class="text_area">
<h4>Routine Malfunction Group Show @ 1969 Gallery, NYC</h4>
<p class="written">by JUXTAPOZ <span class="date">10 / 16 / 2019</span> </p>
<p class="article_txt">
Routine Malfunction examines the absurdities, extremes, and maleficence of the everyday. Bringing together an eclectic group of artists, the show is united under the umbrella of contemporary cultural critiques. Dark humor runs rampant, as artists examine ...
</p>
</div><!-- text_area -->
</a>
</div><!-- article_top -->
<div class="article_bottom">
<h3>2017</h3>
<a href="#" class="clearfix">
<div class="article_img">
<img src="images/gallery_main/con02_visual03.png">
</div>
<!--article_img-->
<div class="text_area">
<h4>Artist Spotlight: Casey Bolding</h4>
<p class="written">by KATE MOTHES<span class="date">10 / 04 / 2017</span></p>
<p class="article_txt">
Definitely digging the unique style of Brooklyn-based painter Casey Bolding, whose surfaces span both concrete walls in public spaces as well as canvas and works on paper. I chat with him here about his mentors, how the moniker 28 Staples came about, and ...
</p>
</div><!-- text_area -->
</a>
</div>
<!--article_bottom-->
</li>
<li>
<div class="article_top">
<h3>2019</h3>
<a href="#" class="clearfix">
<div class="article_img">
<img src="images/gallery_main/con02_visual02.png">
</div>
<!--article_img-->
<div class="text_area">
<h4>Routine Malfunction Group Show @ 1969 Gallery, NYC</h4>
<p class="written">by JUXTAPOZ <span class="date">10 / 16 / 2019</span> </p>
<p class="article_txt">
Routine Malfunction examines the absurdities, extremes, and maleficence of the everyday. Bringing together an eclectic group of artists, the show is united under the umbrella of contemporary cultural critiques. Dark humor runs rampant, as artists examine ...
</p>
</div><!-- text_area -->
</a>
</div><!-- article_top -->
<div class="article_bottom">
<h3>2017</h3>
<a href="#" class="clearfix">
<div class="article_img">
<img src="images/gallery_main/con02_visual03.png">
</div>
<!--article_img-->
<div class="text_area">
<h4>Artist Spotlight: Casey Bolding</h4>
<p class="written">by KATE MOTHES<span class="date">10 / 04 / 2017</span></p>
<p class="article_txt">
Definitely digging the unique style of Brooklyn-based painter Casey Bolding, whose surfaces span both concrete walls in public spaces as well as canvas and works on paper. I chat with him here about his mentors, how the moniker 28 Staples came about, and ...
</p>
</div><!-- text_area -->
</a>
</div>
<!--article_bottom-->
</li>
<li>
<div class="article_top">
<h3>2019</h3>
<a href="#" class="clearfix">
<div class="article_img">
<img src="images/gallery_main/con02_visual02.png">
</div>
<!--article_img-->
<div class="text_area">
<h4>Routine Malfunction Group Show @ 1969 Gallery, NYC</h4>
<p class="written">by JUXTAPOZ <span class="date">10 / 16 / 2019</span> </p>
<p class="article_txt">
Routine Malfunction examines the absurdities, extremes, and maleficence of the everyday. Bringing together an eclectic group of artists, the show is united under the umbrella of contemporary cultural critiques. Dark humor runs rampant, as artists examine ...
</p>
</div><!-- text_area -->
</a>
</div><!-- article_top -->
<div class="article_bottom">
<h3>2017</h3>
<a href="#" class="clearfix">
<div class="article_img">
<img src="images/gallery_main/con02_visual03.png">
</div>
<!--article_img-->
<div class="text_area">
<h4>Artist Spotlight: Casey Bolding</h4>
<p class="written">by KATE MOTHES<span class="date">10 / 04 / 2017</span></p>
<p class="article_txt">
Definitely digging the unique style of Brooklyn-based painter Casey Bolding, whose surfaces span both concrete walls in public spaces as well as canvas and works on paper. I chat with him here about his mentors, how the moniker 28 Staples came about, and ...
</p>
</div><!-- text_area -->
</a>
</div>
<!--article_bottom-->
</li>
</ul>
</li>
<li class="sale">
<h2 class="con_tit">Remarkable Artworks</h2>
<a href="#" title="go to shop">
Go to Shop
</a>
<ul id="sale_list" class="clearfix">
<li>
<a href="#">
<div class="sale_img">
<img src="images/gallery_main/con02_visual04.png" alt="artwork thumb img">
</div>
<h5>Staple Items, 2017</h5>
<p class="sale_txt">
Acrylic and enamel on board
<br>
36 in X 36 in
</p>
<p class="price">
$2,500
</p>
</a>
</li>
<li>
<a href="#">
<div class="sale_img">
<img src="images/gallery_main/con02_visual05.png" alt="artwork thumb img">
</div>
<h5>Getting Rid of Gimmicks, 2017</h5>
<p class="sale_txt">
Acrylic and Enamel on Canvas
<br>
32 in X 32 in
</p>
<p class="price">
$2,100
</p>
</a>
</li>
<li>
<a href="#">
<div class="sale_img">
<img src="images/gallery_main/con02_visual06.png" alt="artwork thumb img">
</div>
<h5>Elegant Emergency, 2017</h5>
<p class="sale_txt">
Acrylic and enamel on board
<br>
26 X 16 in
</p>
<p class="price">
$1,700
</p>
</a>
</li>
<li>
<a href="#">
<div class="sale_img">
<img src="images/gallery_main/con02_visual07.png" alt="artwork thumb img">
</div>
<h5>Only the Cockroaches</h5>
<p class="sale_txt">
Acrylic and enamel on board
<br>
36 in X 36 in
</p>
<p class="price">
$1,300
</p>
</a>
</li>
<li>
<a href="#">
<div class="sale_img">
<img src="images/gallery_main/con02_visual04.png" alt="artwork thumb img">
</div>
<h5>Staple Items, 2017</h5>
<p class="sale_txt">
Acrylic and enamel on board
<br>
36 in X 36 in
</p>
<p class="price">
$2,500
</p>
</a>
</li>
<li>
<a href="#">
<div class="sale_img">
<img src="images/gallery_main/con02_visual05.png" alt="artwork thumb img">
</div>
<h5>Getting Rid of Gimmicks, 2017</h5>
<p class="sale_txt">
Acrylic and Enamel on Canvas
<br>
32 in X 32 in
</p>
<p class="price">
$2,100
</p>
</a>
</li>
<li>
<a href="#">
<div class="sale_img">
<img src="images/gallery_main/con02_visual06.png" alt="artwork thumb img">
</div>
<h5>Elegant Emergency, 2017</h5>
<p class="sale_txt">
Acrylic and enamel on board
<br>
26 X 16 in
</p>
<p class="price">
$1,700
</p>
</a>
</li>
<li>
<a href="#">
<div class="sale_img">
<img src="images/gallery_main/con02_visual07.png" alt="artwork thumb img">
</div>
<h5>Only the Cockroaches</h5>
<p class="sale_txt">
Acrylic and enamel on board
<br>
36 in X 36 in
</p>
<p class="price">
$1,300
</p>
</a>
</li>
</ul>
</li>
</ul><!-- info_list -->
</div><!-- info_wrap -->
</div><!-- con02_inner -->
</div><!-- con02_wrap -->
<!--------------------- CON03 --------------------->
<div id="con03_wrap">
<div id="con03_inner">
<h2 class="con_tit">Similar Artists</h2>
<div id="similar" class="clearfix">
<ul id="similar_list" class="clearfix">
<li>
<a href="#" title="go to page">
<div class="thumb_img">
<img src="images/gallery_main/con03_visual01.png" alt="artist_thumb">
</div>
<!--thumb_img-->
<h4>Heidi Hahn</h4>
<span class="date">American, b. 1982</span>
</a>
</li>
<li>
<a href="#" title="go to page">
<div class="thumb_img">
<img src="images/gallery_main/con03_visual02.png" alt="artist_thumb">
</div>
<!--thumb_img-->
<h4>Danielle Orchard</h4>
<span class="date">American, b. 1991</span>
</a>
</li>
<li>
<a href="#" title="go to page">
<div class="thumb_img">
<img src="images/gallery_main/con03_visual03.png" alt="artist_thumb">
</div>
<!--thumb_img-->
<h4>Edward del Rosario</h4>
<span class="date">European, b. 1970</span>
</a>
</li>
<li>
<a href="#" title="go to page">
<div class="thumb_img">
<img src="images/gallery_main/con03_visual04.png" alt="artist_thumb">
</div>
<!--thumb_img-->
<h4>Nicole Eisenman</h4>
<span class="date">American, b. 1965</span>
</a>
</li>
<li>
<a href="#" title="go to page">
<div class="thumb_img">
<img src="images/gallery_main/con03_visual05.png" alt="artist_thumb">
</div>
<!--thumb_img-->
<h4>Malik Roberts</h4>
<span class="date">American, b. 1990</span>
</a>
</li>
</ul>
</div><!-- recommend -->
</div><!-- con03_inner -->
<p class="copyright">
Copyright © blankproejct. All rights reserved.
</p>
</div><!-- con03_wrap -->
<!---------------------FOOTER BLOEW --------------------->
<footer id="footer_wrap">
<div id="footer_inner" class="clearfix">
<div id="footer_info" class="clearfix">
<ul>
<li><a href="#">Contact Us</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Open Source</a></li>
</ul>
<ul>
<li><a href="#">Promotions</a></li>
<li><a href="#">Partners</a></li>
<li><a href="#">Consign with Us</a></li>
<li><a href="#">Buying with Us</a></li>
<li><a href="#">FAQs</a></li>
</ul>
<ul>
<li><a href="#">Service Center</a></li>
<li><a href="#">Notice</a></li>
<li><a href="#">070-1234-5678</a></li>
<li><a href="#">Office Hour 10:00 ~ 17:00</a></li>
</ul>
</div>
<div id="sns">
<div id="logo_box">
<!-- <img src="images/icons/logo_news_white.png" alt="logo_white">-->
<div id="sns_logo" class="clearfix">
<a href="#" title="facebook"><i class="fab fa-facebook fa-2x"></i></a>
<a href="#" title="instagram"><i class="fab fa-instagram fa-2x"></i></a>
<a href="#" title="twitter"><i class="fab fa-twitter fa-2x"></i></a>
<a href="#" title="youtube"><i class="fab fa-youtube fa-2x"></i></a>
</div>
</div>
<!--logo_box-->
</div><!-- sns -->
<ul class="footer_submenu clearfix">
<li>© 2020 Blank Project</li>
<li><a href="#">Term of Use</a></li>
<li><a href="#">Privacy Policy</a></li>
<li><a href="#">Conditions of Sale</a></li>
</ul>
</div>
<!--footer_inner-->
</footer>
<!--footer_wrap-->
</body>
</html>
body,html{
font-family: 'Noto Sans KR', sans-serif;
/* font-family: 'Overpass', sans-serif;*/
/* font-family: 'Hind', sans-serif;*/
}
a{
text-decoration: none;
}
.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-decoration: none;
text-align: center;
}
/* HEADER */
header#header_wrap{
width: 100%;
height: 130px;
background: linear-gradient( to bottom, rgba(0,0,0,0.8) 1%, transparent 100%);
position: fixed;
top: 0px;
left: 0px;
z-index: 999;
}
div#htop_wrap{
width: 100%;
height: 40px;
}
div#htop_inner{
width: 1200px;
height: 40px;
margin: 0px auto;
position: relative;
top: 0px;
left: 0px;
}
ul#htop_menu{
height: 14px;
position: absolute;
right: 0px;
bottom: 0px;
}
ul#htop_menu li{
float: left;
margin-right: 20px;
color: #ffffff;
font-size: 11px;
font-weight: 300;
}
ul#htop_menu li:last-child{
margin-right: 0px;
}
ul#htop_menu li a{
color: #ffffff;
font-size: 13px;
font-weight: 100;
letter-spacing: 0.5px;
position: relative;
top: 0px;
left: 0px;
transition: all 0.25s;
}
ul#htop_menu li a:after{
content: "";
position: absolute;
top: 18px;
left: -5%;
width: 110%;
height: 1px;
background-color: #ffffff;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
ul#htop_menu li a:hover:after{
transform: scaleX(1);
transform-origin: left;
}
ul#htop_menu li a:hover{
font-weight: 500;
}
div#hbottom_wrap{
width: 100%;
}
div#hbottom_inner{
width: 1200px;
margin: 0px auto;
position: relative;
top: 0px;
left: 0px;
}
h1#logo{
width: 282px;
height: 24px;
background-image: url("../images/logo_white.png");
background-repeat: no-repeat;
background-position: center;
position: absolute;
left: 0px;
top: 14px;
}
h1#logo a{
display: block;
width: 100%;
height: 100%;
}
h1#logo a:after{
content: "";
position: absolute;
top: -58%;
left: -6%;
width: 110%;
height: 200%;
border: solid 3px #ffffff;
/* background-color: #ffffff;*/
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
h1#logo a:hover:after{
transform: scaleX(1);
transform-origin: center;
}
nav#gnb{
height: 20px;
position: absolute;
top: 20px;
right: 370px;
}
ul#gnb_menu{
height: 100%;
}
ul#gnb_menu li{
margin-right: 44px;
float: left;
}
ul#gnb_menu li:last-child{
margin-right: 0px;
}
ul#gnb_menu li a{
color: #ffffff;
font-size: 15px;
font-weight: 100;
letter-spacing: 1px;
display: block;
position: relative;
top: 0px;
left: 0px;
transition: all 0.25s;
}
ul#gnb_menu li a:after{
content: "";
position: absolute;
top: -30%;
left: -10%;
width: 120%;
height: 160%;
border-bottom: solid 1px #ffffff;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
ul#gnb_menu li a:hover:after{
transform: scaleX(1);
transform-origin: left;
}
ul#gnb_menu li a:hover{
font-weight: 500;
}
div#icon_menu{
height: 22px;
position: absolute;
right: 0px;
top: 20px;
}
div#icon_menu ul{
height: 100%;
}
div#icon_menu ul li{
float: left;
width: 22px;
height: 22px;
margin-right: 15px;
background-repeat: no-repeat;
background-position: center;
}
div#icon_menu ul li#icon_search{
background-image: url("../images/icons/icon_search_white.png");
}
div#icon_menu ul li#icon_mypage{
background-image: url("../images/icons/icon_mypage_white.png");
}
div#icon_menu ul li#icon_favorites{
background-image: url("../images/icons/icon_favorite_white.png");
}
div#icon_menu ul li#icon_cart{
background-image: url("../images/icons/icon_cart_white.png");
}
div#icon_menu ul li:last-child{
margin-right: 0px;
}
div#icon_menu ul li a{
display: block;
width: 100%;
height: 100%;
}
/* Mobile Nav Button */
div#mnav_btn{
width: 44px;
height: 36px;
background-color: transparent;
position: absolute;
left: 0px;
top: 0px;
z-index: 99;
display: none;
}
div#mnav_btn a{
display: block;
width: 100%;
height: 100%;
position: relative;
}
div#mnav_btn a span{
display: block;
height: 4px;
width: 100%;
background-color: #ffffff;
position: absolute;
}
div#mnav_btn a span.invert{
background-color: #3d3d3d;
transition: all 0.3s;
-webkit-transition: all 0.3s;
}
div#mnav_btn a span.line01{
top:0px;
}
div#mnav_btn a span.line02{
top: 16px;
}
div#mnav_btn a span.line03{
top: 32px;
}
div#mnav_btn a.on{
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
div#mnav_btn a span.line01.on{
top: 16px;
}
div#mnav_btn a span.line02.on{
transform: scaleX(0);
-webkit-transform: scaleX(0);
}
div#mnav_btn a span.line03.on{
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
top: 16px;
}
/* MOBLIE MENU */
div#mnav_menu{
width: 350px;
height: 550px;
background-color: #ffffff;
position: fixed; /* related 넣으면 안됌 */
top: 0px;
left: 0px;
padding: 20px;
}
ul#mnav_list{
width: 60%;
height: 250px;
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
}
ul#mnav_list li{
width: 100%;
height: 20%;
}
ul#mnav_list li a{
width: 100%;
height: 100%;
display: block;
text-align: center;
line-height: 60px;
color: #9e9e9e;
font-weight: 500;
font-size: 18px;
letter-spacing: 1px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
ul#mnav_list li a:hover{
font-size: 30px;
font-weight: 900;
color: #3d3d3d;
}
/* mnav sublist */
ul#mnav_sublist{
height: 100px;
width: 60%;
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
border: 3px solid #3d3d3d;
padding: 20px 0px;
}
ul#mnav_sublist li{
width: 100%;
height: 33%;
}
ul#mnav_sublist li a{
display: block;
font-size: 14px;
color: #9e9e9e;
font-weight: 600;
letter-spacing: 1px;
text-align: center;
height: 30px;
line-height: 33px;
width: 100%;
height: 100%;
transition: all 0.5s;
}
ul#mnav_sublist li a:hover{
font-size: 20px;
font-weight: 900;
color: #3d3d3d;
}
/* ----------------- HEADER ----------------- */
div.wrap{
width: 100%;
height: 100%;
}
ul.slider{
width: 100%;
height: 100%;
margin: 0px auto;
overflow: hidden;
background-color: dimgray;
z-index: -999;
}
ul.slider li{
width: 100%;
height: 630px;
color: #ffffff;
text-align: center;
line-height: 300px;
overflow: hidden;
}
ul.slider li:first-child{
background-image: url("../images/main_con01_visual_01.png");
}
ul.slider li:nth-child(2){
background-image: url("../images/main_con01_visual_02.png");
}
ul.slider li:nth-child(3){
background-image: url("../images/main_con01_visual_03.png");
}
ul.slider li:last-child{
background-image: url("../images/main_con01_visual_04.png");
}
ul.slider li div.slider_img img{
width: auto;
position: absolute;
left: 50%;
transform: translateX(-50%) scale(1);
}
div#con01{
width: 100%;
height: 630px;
margin-top:-130px;
padding-top: 130px;
}
div#con01_inner{
width: 1200px;
margin: -630px auto;
padding-top: 260px;
}
div.promo_text{
text-shadow: 30px 30px 50px #232222;
color: #ffffff;
}
div#con01_inner > div.promo_text > p.promo{
font-size: 60px;
}
div#con02_wrap .box{
margin-bottom: 0px;
}
div#con02_wrap .box.con02{
margin-top: -60px;
margin-bottom: 30px;
}
p.promo{
font-size: 55px;
font-weight: 600;
}
span.text_promo{
margin-top: 70px;
font-size: 16px;
display: block;
line-height: 130%;
font-weight: 400;
margin-bottom: 40px;
color: #ffffff;
}
span.credit{
font-size: 12px;
letter-spacing: 0.5px;
color: #ffffff;
display: block;
}
div.textarea{
width: 100%;
background: #ffffff;
}
div.con02 div.textarea div.textarea_inner{
padding-top: 0px;
}
div.textarea_inner{
width: 996px;
margin: 0px auto;
padding-top: 45px;
position: relative;
top: 0px;
left: 0px;
box-sizing: border-box;
margin-top:
}
div.textarea_inner h2{
height: 90px;
font-size: 26px;
color: #3d3d3d;
font-weight: 900;
float: left;
line-height: 110%;
margin-right: 70px;
}
div.textarea_inner p{
height: 90px;
float: left;
line-height: 130%;
font-weight: 400;
color: #3d3d3d;
max-width: 500px;
}
div.textarea_inner p br{
display: none;
}
div.btn_01{
width: 20%;
height: 48px;
float: right;
margin-top: 20px;
/*
position: absolute;
top:50%;
transform: translateY(-50%);
right: 0px;
*/
}
div.btn_01 a{
width: 100%;
display: block;
padding: 17px 0px;
color: #9e9e9e;
font-size: 14px;
font-weight: 300;
letter-spacing: 0.5px;
text-align: center;
border: 1px solid #9e9e9e;
transition: all 0.7s;
}
div.btn_01 a:hover{
background-color: #3d3d3d;
color: #ffffff;
}
/* --------------- CON 01 ---------------- */
div#con02_wrap,
div#con03_wrap,
div#con04_wrap,
div#con05_wrap
{
width: 100%;
overflow: hidden;
}
.box{
width: 1200px;
margin: 50px auto;
box-shadow: 5px 1px 40px #ececec;
padding: 40px 0px;
box-sizing: border-box;
}
div#con02_inner,
div#con03_inner,
div#con04_inner,
div#con05_inner
{
width: 996px;
margin: 0px auto;
position: relative;
top: 0px;
left: 0px;
}
h2.content_title{
padding: 20px 0px;
}
div#slide_wrap{
float: right;
margin-top: 6px;
}
/*-----------------CON02 - Visual Slide-------------------*/
div.visual_slide{
width: 300%; /* 3000 px */
display: block;
position: relative;
left: 50%;
transform: translateX(-58.7%);
/* left: -127%;*/
}
.gallery-slide {
display: block;
width: 100%;
max-width: 475px;
margin-left: 46px;
}
.slick-slide {
opacity: .5;
}
.slick-slide .img_wrap img{
transition: all 3s;
-webkit-transition: all 3s;
}
.slick-active img{
transform: scale(1.15);
}
.slick-active {
opacity: 1;
}
.slick-track {
left: -0px /* half of the centered slide and padding */
}
.slick-counter{
z-index: 999;
position: absolute;
right: 28%;
top: -47px;
}
.current{
font-size: 16px;
color: #3d3d3d;
font-weight: 800;
}
.total{
font-size: 16px;
color: #9e9e9e;
}
.slick-arrow{
z-index: 999;
position: absolute;
top: -55px;
right: 26%;
text-indent: 9999px;
width: 30px;
height: 30px;
border: none;
background-color: transparent;
background-image: url("../images/icons/icon_arrow_left_gray.png");
background-repeat: no-repeat;
background-position: center;
background-size: auto;
}
.slick-next{
right: 24.7%;
background-image: url("../images/icons/icon_arrow_right_gray.png");
}
.slick-prev.on{
animation: prev_blink 1s;
/* background-image: url("../images/icons/icon_arrow_left_bk.png");*/
}
.slick-next.on{
animation: next_blink 1s;
/* background-image: url("../images/icons/icon_arrow_right_bk.png");*/
}
button:focus{
outline:none;
/* 포커스일때 생기는 브라우저의 디폴트 아웃라인 of 선택영역 becomes not displayed */
}
div.img_wrap{
width: 100%;
margin-bottom: 30px;
overflow: hidden;
position: relative;
top: 0px;
left: 0px;
}
div.img_wrap:after{ /* SCRIPT */
content: "";
width: 100%;
height: 100%;
background-color: black;
position: absolute;
top: 0px;
left: 0px;
z-index: -99;
display: block;
}
div.img_wrap.on:after{
display: block;
}
div.visual_slide > ul> li> a{
display: block;
width: 100%;
height: 550px;
float: left;
overflow: hidden;
}
div.visual_slide ul li img{
width: 100%;
-webkit-transition: all 0.6s;
position: relative;
top: 0px;
left: 0px;
}
div.visual_slide ul li img:hover{
transform: scale(1.25);
position: relative;
top: 0px;
left: 0px;
}
span.exhibit_btn,
span.artwork_btn{
display: block;
position: absolute;
top: 50%;
margin-top: -25px;
z-index: 3;
width: 200px;
height: 50px;
}
div#con04_inner span.exhibit_btn{
margin-left: 30px;
}
a.btn_style01{
display: block;
position: relative;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
}
/* BUTTON */
span.singleBtn{
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 45%;
margin-top: 0px;
margin-left: 0px;
text-align: center;
color: #ffffff;
font-weight: 600;
display: none;
}
span.singleBtn:after{
display: block;
content: "";
position: absolute;
top: 20px;
left: -5%;
width: 110%;
height: 2px;
background-color: #ffffff;
z-index: 10;
transition: all 0.5s;
-webkit-transition: all 0.5s;
transform: scaleX(0);
-webkit-transform: scaleX(0);
}
div.img_wrap a:hover span.singleBtn:after{
transform: scaleX(1);
-webkit-transform: scaleX(1);
}
span.exhibit_btn:after,
span.artwork_btn:after{
content: "";
width: 150px;
height: 2px;
background-color: #ffffff;
position: absolute;
bottom: 10px;
left: 12%;
z-index: 3;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
display: block;
/* SCRIPT */
}
span.exhibit_btn:hover:after,
span.artwork_btn:hover:after{
transform: scaleX(1);
transform-origin: left;
}
span.artwork_btn{
right: 0px;
margin-right: 30px;
display: block;
/* SCRIPT */
}
/* BUTTON */
.btn_style01{
display: block;
width: 100%;
height: 100%;
color: #ffffff;
font-size: 16px;
font-weight: 800;
text-align: center;
line-height: 50px;
}
span#shop_artwork{
display: block;
}
h2.content_title{
font-size: 30px;
font-weight: 900;
color: #3d3d3d;
}
span.visual_title{
display: block;
font-size: 20px;
color: #3d3d3d;
margin-bottom: 15px;
text-align: center;
}
span.artist_name{
display: block;
font-size: 20px;
font-weight: 800;
color: #3d3d3d;
text-align: center;
}
p.art_description{
font-size: 14px;
color: #9e9e9e;
line-height: 145%;
text-align: left;
padding: 40px 40px 70px;
position: relative;
top: 0px;
left: 0px;
-webkit-transition: all 0.5s;
}
p.art_description:hover{
color: #3d3d3d;
}
p.art_description:after{
content: "";
display: block;
width: 50px;
height: 1px;
background-color: #3d3d3d;
position: absolute;
top: 20px;
left: 50%;
margin-left: -25px;
}
/*-----------------------CON02------------------*/
div#con03_inner div.visual_slide{
width: 998px;
/* overflow: hidden;*/
}
div#visual_03{
width: 100%;
position: relative;
top: 0px;
left: 0px;
}
div#visual_03 div#visual_03_text{
position: absolute;
top: 50%;
margin-top: -8%;
left: 8%;
z-index: 2;
}
div.slideTwo{
width: 996px;
}
div.slideTwo ul{
width: 100%
}
div.slideTwo li{
width: 100%;
float: left;
overflow: hidden;
}
div.slideTwo ul li:first-child{
background-image: url(../images/main_con03_visual_01.jpg);
background-size: cover;
background-repeat: no-repeat;
}
div.slideTwo ul li:nth-child(2){
background-image: url(../images/main_con03_visual_02.jpg);
background-size: cover;
background-repeat: no-repeat;
}
div.slideTwo ul li:nth-child(3){
background-image: url(../images/main_con03_visual_03.jpg);
background-size: cover;
background-repeat: no-repeat;
}
div.slideTwo ul li:last-child{
background-image: url(../images/main_con03_visual_04.jpg);
background-size: cover;
background-repeat: no-repeat;
}
div.visual_slide ul li img:hover{
transform: scale(1.25);
position: relative;
top: 0px;
left: 0px;
}
/*---------------------- CON03 ----------------------*/
.artist_id{
display: block;
position: absolute;
bottom: 5%;
left: 8%;
text-decoration: none;
font-size: 13px;
color: #ffffff;
font-weight: 200;
letter-spacing: 1px;
}
div.btn_03{
width: 100%;
height: 550px;
text-align: center;
background-color:rgba( 0, 0, 0, 0.6);
position: absolute;
top: 0px;
left: 0px;
}
div#abtn_01{
float: left;
position: absolute;
left: 8%;
top: 40%;
}
div#abtn_02{
float: left;
position: absolute;
right: 8%;
top: 40%;
}
div.btn_03 div#abtn_02 a,
div.btn_03 div#abtn_01 a{
width: 190px;
height: 50px;
text-align: center;
line-height: 50px;
display: block;
color: #ffffff;
font-size: 18px;
font-weight: 700;
}
div.btn_03 a:after{
content: "";
position: absolute;
top: 45px;
left: 4%;
width: 95%;
height: 1px;
background-color: #ffffff;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.5s;
}
div.btn_03 a:hover:after{
transform: scaleX(1);
transform-origin: center;
}
div#con04_inner > a{
margin: 0px auto 70px;
width: 220px;
border: 1px solid #9e9e9e;
box-sizing: border-box;
display: block;
padding: 17px 0px;
color: #9e9e9e;
font-size: 14px;
font-weight: 300;
letter-spacing: 0.5px;
text-align: center;
transition: all 0.7s;
}
div#con04_inner > a:hover{
background-color: #3d3d3d;
color: #ffffff;
}
/* CON 04 */
div#con05_visual{
width: 100%; /* 996px */
/* height: 700px; */
}
div#box05_left{
width: 40%; /* 400px */
height: 700px; /* 700px */
margin-right: 4%;
float: left;
position: relative;
top: 0px;
left: 0px;
overflow: hidden;
}
div#box05_right{
width: 56%; /* 566px */
height: 700px;
float: left;
}
div#right_top{
width: 100%;
height: 48.75%;
position: relative;
top: 0px;
left: 0px;
overflow: hidden;
margin-bottom: 4%; /* 30px */
}
div#right_bottom{
width: 100%;
height: 48%; /* 335 px*/
}
div#right_bottom01{
width: 48%;
height: 100%;
float: left;
margin-right: 4%;
position: relative;
top: 0px;
left: 0px;
overflow: hidden;
}
div#right_bottom02{
width: 48%;
height: 100%;
float: left;
position: relative;
top: 0px;
left: 0px;
overflow: hidden;
}
.con05_visual{
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transition: all 0.4s;
-webkit-transition: all 0.4s;
}
.con05_visual.on{
width: 120%;
height: 120%;
background-position: center;
background-size: cover;
}
div#box05_left a .con05_visual{
background-image: url("../images/main_con05_visual_01.jpg");
}
div#right_top a .con05_visual{
background-image: url("../images/main_con05_visual_02.jpg");
}
div#right_bottom01 a .con05_visual{
background-image: url("../images/main_con05_visual_03.jpg");
}
div#right_bottom02 a .con05_visual{
background-image: url("../images/main_con05_visual_04.jpg");
}
div#con05_visual h3{
font-size: 30px;
color: #ffffff;
position: absolute;
bottom: 25%;
left: 10%;
z-index: 3;
}
div#box05_left h3{
font-size: 36px;
}
div#box05_left p{
color: #ffffff;
position: absolute;
bottom: 10%;
left: 10%;
font-size: 16px;
line-height: 125%;
font-weight: 300;
z-index: 3;
}
span.shop_btn{
position: absolute;
top: 40%;
left: 38%;
color: #ffffff;
font-size: 16px;
font-weight: 800;
z-index: 2;
display: block;
/* SCRIPT */
}
div#con05_visual a:after{
content: "";
background-color: black;
width: 100%;
height: 100%;
position: absolute;
opacity: 0;
top: 0px;
left: 0px;
display: block;
z-index: 1;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
div#con05_visual a:hover:after{
opacity: 0.5;
}
span.shop_btn:after{
content: "";
position: absolute;
width: 11px;
height: 18px;
background-image: url(../images/icons/icon_arrow_right_white.png);
background-repeat: no-repeat;
background-position: center;
margin-left: 20px;
}
/* CON05 */
div#news_wrap{
width: 100%;
}
div#news_inner{
width: 1200px;
margin: 0px auto;
}
div#news_inner h3{
font-size: 26px;
text-align: center;
display: block;
font-weight: 900;
}
div#newsletter{
position: relative;
top: 0px;
left: 0px;
margin-top: 30px;
margin-bottom: 100px;
}
div#newsletter img {
display: block;
margin: 0px auto;
}
div.container {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 35%;
width: 393px;
}
:root {
--omrs-color-ink-lowest-contrast: rgba(47, 60, 85, 0.18);
--omrs-color-ink-low-contrast: rgba(60, 60, 67, 0.3);
--omrs-color-ink-medium-contrast: rgba(19, 19, 21, 0.6);
--omrs-color-interaction: #e0e0e0;
--omrs-color-interaction-minus-two: rgba(73, 133, 224, 0.12);
--omrs-color-danger: #b50706;
--omrs-color-bg-low-contrast: #eff1f2;
--omrs-color-ink-high-contrast: #121212;
--omrs-color-bg-high-contrast: #ffffff;
}
/** END: Non Openmrs CSS **/
div.omrs-input-group {
margin-bottom: 1.5rem;
position: relative;
width: 20.4375rem;
}
/* Input*/
.omrs-input-underlined > input,
.omrs-input-filled > input {
border: none;
border: 0.125rem solid #3d3d3d;
width: 114%;
height: 2rem;
font-size: 1.0625rem;
padding-left: 0.875rem;
line-height: 147.6%;
padding-top: 0.825rem;
padding-bottom: 0.5rem;
}
.omrs-input-underlined > input:focus,
.omrs-input-filled > input:focus {
outline: none;
}
.omrs-input-underlined > .omrs-input-label,
.omrs-input-filled > .omrs-input-label {
position: absolute;
top: 0.9375rem;
left: 0.875rem;
line-height: 147.6%;
color: #9e9e9e;
transition: top .2s;
font-weight: 300;
}
.omrs-input-underlined > .omrs-input-helper,
.omrs-input-filled > .omrs-input-helper {
font-size: 0.9375rem;
color: var(--omrs-color-ink-medium-contrast);
letter-spacing: 0.0275rem;
margin: 0.125rem 0.875rem;
}
.omrs-input-underlined > input:hover,
.omrs-input-filled > input:hover {
background: #ffffff;
border-color: var(--omrs-color-ink-high-contrast);
}
.omrs-input-underlined > input:focus + .omrs-input-label,
.omrs-input-underlined > input:valid + .omrs-input-label,
.omrs-input-filled > input:focus + .omrs-input-label,
.omrs-input-filled > input:valid + .omrs-input-label {
top: 0;
font-size: 0.9375rem;
margin-bottom: 32px;;
}
.omrs-input-underlined:not(.omrs-input-danger) > input:focus + .omrs-input-label,
.omrs-input-filled:not(.omrs-input-danger) > input:focus + .omrs-input-label {
color: var(--omrs-color-interaction);
}
.omrs-input-underlined:not(.omrs-input-danger) > input:focus,
.omrs-input-filled:not(.omrs-input-danger) > input:focus {
border-color: var(--omrs-color-interaction);
}
.omrs-input-underlined:not(.omrs-input-danger) > input:focus ~ svg,
.omrs-input-filled:not(.omrs-input-danger) > input:focus ~ svg {
fill: var(--omrs-color-ink-high-contrast);
}
.omrs-input-label:after{
content: "";
position: absolute;
width: 30px;
height: 25px;
background-repeat: no-repeat;
background-position: center;
background-image:url(../images/icons/forward-arrow.png);
margin-left: 180%;
}
/* news */
footer#footer_wrap{
width: 100%;
background-color: #232222;
}
div#footer_inner{
width: 1200px;
margin: 0px auto;
color:#ffffff;
padding: 60px 0px;
position:relative;
top:0px;
left:0px;
}
div#footer_info{
width: 60%;
float: left;
}
div#footer_inner ul{
float: left;
width: 180px;
margin-right: 30px;
}
div#footer_inner ul li{
width: 100%;
height: 30px;
text-align: left;
line-height: 30px;
}
div#footer_inner ul li a{
display: block;
width: 100%;
height: 100%;
color: #ffffff;
font-size: 12px;
letter-spacing: 1px;
font-weight: 200;
}
div#footer_inner ul.footer_submenu{
width: 100%;
margin-top: 20px;
float: left;
margin-top: 50px;
}
div#footer_inner ul.footer_submenu li{
width: 100px;
float: left;
font-size: 10px;
margin-right: 30px;
}
div#footer_inner ul.footer_submenu li:first-child{
margin-right: 60px;
}
div#footer_inner ul.footer_submenu li a{
font-size: 10px;
letter-spacing: 1px;
}
.fab{
color: #ffffff;
}
.fab:last-child{
margin-right: 0px;
}
#sns{
display: block;
width: 330px;
height: 120px;
float: right;
padding-top: 5%;
}
div#logo_box{
width: 330px;
height: 100%;
background-image: url("../images/icons/logo_news_white.png");
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
position: relative;
top: 0px;
left: 0px;
}
#sns_logo{
width: 100%;
box-sizing: border-box;
position: absolute;
top: 50%;
transform: translateY(-35%);
padding: 0% 21%;
box-sizing: border-box;
}
#sns_logo a{
display: block;
float: left;
margin-right: 20px;
}
#sns_logo a:last-child{
margin-right: 0px;
}
/* FOOTER END */
/* Header Scroll */
header#header_wrap.on{
background: white;
}
header#header_wrap.on ul#htop_menu li,
header#header_wrap.on ul#htop_menu li a{
color: #3d3d3d;
}
header#header_wrap.on ul#htop_menu li a:after{
background-color: #3d3d3d;
}
header#header_wrap.on h1#logo{
background-image: url("../images/logo_bk.png");
}
header#header_wrap.on h1#logo a:after{
border: solid 3px #232222;
}
header#header_wrap.on ul#gnb_menu li a{
color: #232222;
}
header#header_wrap.on ul#gnb_menu li a:after{
border-bottom: solid 1px #3d3d3d;
}
header#header_wrap.on div#icon_menu ul li#icon_search{
background-image: url("../images/icons/icon_search_gray.png");
}
header#header_wrap.on div#icon_menu ul li#icon_mypage{
background-image: url("../images/icons/icon_mypage_gray.png");
}
header#header_wrap.on div#icon_menu ul li#icon_favorites{
background-image: url("../images/icons/icon_favorite_gray.png");
}
header#header_wrap.on div#icon_menu ul li#icon_cart{
background-image: url("../images/icons/icon_cart_gray.png");
}
/* RESPONSIVE DISPLAY SETTING */
@media screen and (max-width:1280px){
header#header_wrap
div#htop_inner,
div#hbottom_inner,
div#con01_inner,
div#con02_inner,
div#con03_inner,
div#con04_inner,
div#con05_inner,
div#news_inner,
div#footer_inner,
div.box,
div.textarea_inner,
div.slide_menu
{
width: 90%;
}
div.slideTwo{
width: 100%;
}
div#visual_03 div#visual_03_text p.promo{
font-size: 38px;
}
div#visual_03 div#visual_03_text .text_promo{
font-size : 14px;
}
div.slideTwo ul li img{
width: 100%;
}
div.slideTwo .slick-slide{
max-height: 400px;
}
/* mheader */
header#header_wrap{
height: 70px;
}
#htop_wrap{
display: none;
}
#hbottom_wrap{
height: 100%;
}
ul#gnb_menu,
ul#htop_menu{
display: none;
}
h1#logo{
top: 22px;
left: 50%;
transform: translateX(-50%);
}
div#mnav_btn{
display: block;
top: 16px;
}
div.btn_01{
width: 100%;
margin-top: 35px;
}
div.btn_01 a{
width: 200px;
margin: 0px auto;
}
div.textarea_inner h2{
font-size: 36px;
height: 100%;
width: 100%;
margin-bottom: 3%;
text-align: center;
padding: 0% 10%;
box-sizing: border-box;
}
div.textarea_inner h2 br{
display: none;
}
div.textarea_inner p{
margin-left: 0px;
width: 100%;
text-align: center;
height: 100%;
padding: 0% 10%;
box-sizing: border-box;
max-width: 100%;
}
div.textarea_inner p br{
display: none;
}
/* Text Area */
div#con01{
height: 380px;
}
div#con01_inner{
margin: -510px auto;
}
div#con01_inner p{
font-size: 36px;
}
div#con01_inner > div.promo_text > p.promo{
font-size: 40px;
}
p.promo{
padding: 0px 15px;
box-sizing: border-box;
}
span.credit{
width: 100%;
text-align: center;
color: #ffffff;
}
span.text_promo{
margin-top: 5%;
margin-bottom: 3%;
color: #ffffff;
display: block;
}
div#con05_visual{
width: 100%;
}
div#con05_visual h3{
font-size: 34px;
}
div#con05_visual p{
display: none;
}
div#box05_left h3{
font-size: 38px;
}
div#box05_left{
width: 100%;
height: 300px;
margin-right: 0px;
margin-bottom: 3%;
}
div#box05_left a .con05_visual{
background-image: url("../images/m_con05_visual_01.png");
}
div#right_bottom01 a .con05_visual{
background-image: url("../images/m_con05_visual_03.png");
}
div#right_bottom02 a .con05_visual{
background-image: url("../images/m_con05_visual_04.png");
}
div#box05_right{
width: 100%;
height: 750px;
}
div#box05_right_top{
width: 100%;
height: 100%;
margin-bottom: 3%;
}
div#right_bottom01{
width: 48%;
margin-right: 4%;
}
div#right_bottom02{
width: 48%;
margin-right: 0px;
}
span.shop_btn{
left: 50%;
transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
div.visual_slide{
width: 100%;
margin-left: 0px;
left: 50%;
transform: translateX(-50%);
margin-right: -46px;
}
.slick-track{
overflow: visible;
}
.gallery-slide{
opacity: 1;
width: 300px;
}
.gallery-slide p.art_description{
padding: 40px 10px 0px;
margin-bottom: 50px;
height: 100px;
overflow: hidden;
text-overflow : ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
box-sizing: border-box;
}
.gallery-slide p.art_description br{
display: none;
}
div.img_wrap{
height: 300px;
overflow: hidden;
margin-bottom: 16px;
}
div.visual_slide ul li img{
width: 100%;
height: auto;
}
.slick-arrow{
right: 0px;
}
.slick-prev{
right: 25px;
}
.slick-counter{
right: 85px;
}
div#con04_inner > a{
margin: 0px auto 20px;
}
h2.content_title{
padding-top: 0px;
}
span.artwork_btn > a{
display: none;
}
div.img_wrap span.exhibit_btn:after{
display: none;
}
div.img_wrap span.exhibit_btn{
left: 50%;
transform: translateX(-66%);
margin-left: 0px;
z-index: 999;
}
div.img_wrap span.exhibit_btn > a.btn_style01{
display: block;
z-index: 999;
width: 100%;
height: 100%;
font-size: 14px;
}
div.img_wrap span.exhibit_btn:before{
content: "";
width: 0%;
position: absolute;
bottom: 10px;
left: 50%;
transform: translateX(-50%);
height: 2px;
background-color: #ffffff;
transition: all 0.4s;
-webkit-transition: all 0.4s;
}
div.img_wrap span.exhibit_btn:hover:before{
width: 67%;
}
span.exhibit_btn:after,
span.artwork_btn:after{
width: 0px;
height: 0px;
}
}/* 1280 */
@media screen and (max-width:1080px){
#sns{
width: 100%;
}
div#logo_box{
margin: 0px auto;
}
div#footer_info{
width: 100%;
float: none;
}
div#footer_info ul{
width: 30%;
}
div#footer_info ul li{
width: 100%;
height: 100%;
text-align: center;
margin-bottom: 3%;
}
div#footer_info ul li a{
width: 70%;
margin: 0px auto;
font-size: 16px;
}
div#footer_info ul:last-child{
margin-right: 0px;
}
ul.footer_submenu{
width: 100%;
}
.gallery-slide{
margin-left: 0.065%;
}
}
@media screen and (max-width:996px){
div#htop_inner,
div#hbottom_inner,
div#con01_inner,
div#con02_inner,
div#con03_inner,
div#con04_inner,
div#con05_inner,
div#news_inner,
div#footer_inner,
div.box,
div.textarea_inner,
div.slide_menu
{
width: 90%;
}
div#box05_left{
height: 250px;
}
div#box05_right{
height: 600px;
}
div#icon_menu ul li{
width: 27px;
height: 27px;
background-size: cover;
}
div#icon_menu ul li#icon_cart a{
width: 100%;
height: 100%;
}
div#icon_menu ul li#icon_favorites,
div#icon_menu ul li#icon_mypage,
div#icon_menu ul li#icon_cart{
display: none;
}
div.textarea_inner p{
margin-left: 0px;
}
div#newsletter{
height: 90%;
margin-bottom: 12%;
}
}/* 996 */
@media screen and (max-width:720px){
div#visual_03 div#visual_03_text p.promo{
font-size: 38px;
}
div#visual_03 div#visual_03_text .text_promo{
display: none;
}
div#footer_info ul li{
width: 100%;
margin-bottom: 0px;
}
div#footer_info ul li a{
font-size: 12px;
letter-spacing: 0px;
}
div#footer_info ul{
width: 33%;
margin-right: 0px;
text-align: center;
border-left: solid 1px #3d3d3d;
}
div#logo_box{
width: 300px;
}
div#sns_logo a{
width: 25px;
}
div.slick-counter{
display: none;
}
/* mobile header */
div#logo_box{
width: 300px;
}
div#sns_logo a{
width: 25px;
}
div#mnav_btn{
width: 30px;
height: 30px;
}
div#mnav_btn a span{
height: 3px;
}
div#mnav_btn a span.line02{
top: 12px;
}
div#mnav_btn a span.line03{
top: 24px;
}
h1#logo{
width: 170px;
background-size: 100%;
}
div#icon_menu ul li#icon_search{
width: 20px;
height: 20px;
}
}/* 720 */
/* animation */
/*ul#slider .slick-active*/
.splitting .char{
display: inline-block;
animation: split_ani 8s;
animation-delay: calc(0.035s * var(--char-index));
animation-iteration-count: infinite;
-webkit-animation-iteration-count: infinite;
-o-animation-iteration-count: infinite;
}
ul.slider .slick-active{
animation: shrink 4s;
}
div.slideTwo > ul.slider .slick-active{
animation: shrink 4s;
}
@keyframes split_ani{
0%{
transform: translateY(60px);
-webkit-transform: translateY(60px); opacity: 0;
}
50%{
transform: translateY(0px);
-webkit-transform: translateY(00px); opacity: 1;
}
100%{
transform: translateY(0px);
-webkit-transform: translateY(0px); opacity: 1;
}
}/* split_ani */
@keyframes shrink {
from{
transform: scale(1.2);
-webkit-transform: scale(1.2);
}
}
@keyframes prev_blink {
30%{
background-image: url("../images/icons/icon_arrow_left_bk.png");
}
100%{
background-image: url("../images/icons/icon_arrow_left_gray.png");
}
}
@keyframes next_blink{
0%{
background-image: url("../images/icons/icon_arrow_right_bk.png");
}
100%{
background-image: url("../images/icons/icon_arrow_right_gray.png");
}
}
body,
html {
font-family: 'Noto Sans KR', sans-serif;
/* font-family: 'Overpass', sans-serif;*/
/* font-family: 'Hind', sans-serif;*/
outline: none;
}
a {
text-decoration: none;
outline: none;
}
.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-decoration: none;
text-align: center;
}
/* ------------------------------ HEADER BELOW --------------------------------*/
header#header_wrap {
width: 100%;
height: 130px;
background: #ffffff;
position: fixed;
top: 0px;
left: 0px;
z-index: 999;
}
div#htop_wrap {
width: 100%;
height: 40px;
}
div#htop_inner {
width: 1200px;
height: 40px;
margin: 0px auto;
position: relative;
top: 0px;
left: 0px;
}
ul#htop_menu {
height: 14px;
position: absolute;
right: 0px;
bottom: 0px;
}
ul#htop_menu li {
float: left;
margin-right: 20px;
color: #3d3d3d;
font-size: 11px;
font-weight: 300;
}
ul#htop_menu li:last-child {
margin-right: 0px;
}
ul#htop_menu li a {
color: #3d3d3d;
font-size: 13px;
font-weight: 100;
letter-spacing: 0.5px;
position: relative;
top: 0px;
left: 0px;
transition: all 0.25s;
}
ul#htop_menu li a:after {
content: "";
position: absolute;
top: 18px;
left: -5%;
width: 110%;
height: 1px;
background-color: #3d3d3d;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
ul#htop_menu li a:hover:after {
transform: scaleX(1);
transform-origin: left;
}
ul#htop_menu li a:hover {
font-weight: 500;
}
div#hbottom_wrap {
width: 100%;
}
div#hbottom_inner {
width: 1200px;
margin: 0px auto;
position: relative;
top: 0px;
left: 0px;
}
h1#logo {
width: 282px;
height: 24px;
background-image: url("../images/logo_bk.png");
background-repeat: no-repeat;
background-position: center;
position: absolute;
left: 0px;
top: 14px;
}
h1#logo a {
display: block;
width: 100%;
height: 100%;
}
h1#logo a:after {
content: "";
position: absolute;
top: -58%;
left: -6%;
width: 110%;
height: 200%;
border: solid 3px #232222;
/* background-color: #ffffff;*/
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
h1#logo a:hover:after {
transform: scaleX(1);
transform-origin: center;
}
nav#gnb {
height: 20px;
position: absolute;
top: 20px;
right: 370px;
}
ul#gnb_menu {
height: 100%;
}
ul#gnb_menu li {
margin-right: 44px;
float: left;
}
ul#gnb_menu li:last-child {
margin-right: 0px;
}
ul#gnb_menu li a {
color: #3d3d3d;
font-size: 15px;
font-weight: 100;
letter-spacing: 1px;
display: block;
position: relative;
top: 0px;
left: 0px;
transition: all 0.25s;
}
ul#gnb_menu li a:after {
content: "";
position: absolute;
top: -30%;
left: -10%;
width: 120%;
height: 160%;
border-bottom: solid 1px #3d3d3d;
transform: scaleX(0);
transform-origin: right;
transition: transform 0.5s;
}
ul#gnb_menu li a:hover:after {
transform: scaleX(1);
transform-origin: left;
}
ul#gnb_menu li a:hover {
font-weight: 500;
}
div#icon_menu {
height: 22px;
position: absolute;
right: 0px;
top: 20px;
}
div#icon_menu ul {
height: 100%;
}
div#icon_menu ul li {
float: left;
width: 22px;
height: 22px;
margin-right: 15px;
background-repeat: no-repeat;
background-position: center;
}
div#icon_menu ul li#icon_search {
background-image: url("../images/icons/icon_search_gray.png");
}
div#icon_menu ul li#icon_mypage {
background-image: url("../images/icons/icon_mypage_gray.png");
}
div#icon_menu ul li#icon_favorites {
background-image: url("../images/icons/icon_favorite_gray.png");
}
div#icon_menu ul li#icon_cart {
background-image: url("../images/icons/icon_cart_gray.png");
}
div#icon_menu ul li:last-child {
margin-right: 0px;
}
div#icon_menu ul li a {
display: block;
width: 100%;
height: 100%;
}
/* Mobile Nav Button */
div#mnav_btn {
width: 44px;
height: 36px;
background-color: transparent;
position: absolute;
left: 0px;
top: 0px;
z-index: 99;
display: none;
}
div#mnav_btn a {
display: block;
width: 100%;
height: 100%;
position: relative;
}
div#mnav_btn a span {
display: block;
height: 4px;
width: 100%;
background-color: #ffffff;
position: absolute;
}
div#mnav_btn a span.invert {
background-color: #3d3d3d;
transition: all 0.3s;
-webkit-transition: all 0.3s;
}
div#mnav_btn a span.line01 {
top: 0px;
}
div#mnav_btn a span.line02 {
top: 16px;
}
div#mnav_btn a span.line03 {
top: 32px;
}
div#mnav_btn a.on {
transform: rotate(45deg);
-webkit-transform: rotate(45deg);
}
div#mnav_btn a span.line01.on {
top: 16px;
}
div#mnav_btn a span.line02.on {
transform: scaleX(0);
-webkit-transform: scaleX(0);
}
div#mnav_btn a span.line03.on {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
top: 16px;
}
/* MOBLIE MENU */
div#mnav_menu {
width: 350px;
height: 550px;
background-color: #ffffff;
position: fixed;
/* related 넣으면 안됌 */
top: 0px;
left: 0px;
padding: 20px;
}
ul#mnav_list {
width: 60%;
height: 250px;
position: absolute;
top: 10%;
left: 50%;
transform: translateX(-50%);
}
ul#mnav_list li {
width: 100%;
height: 20%;
}
ul#mnav_list li a {
width: 100%;
height: 100%;
display: block;
text-align: center;
line-height: 60px;
color: #9e9e9e;
font-weight: 500;
font-size: 18px;
letter-spacing: 1px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
ul#mnav_list li a:hover {
font-size: 30px;
font-weight: 900;
color: #3d3d3d;
}
/* mnav sublist */
ul#mnav_sublist {
height: 100px;
width: 60%;
position: absolute;
bottom: 10%;
left: 50%;
transform: translateX(-50%);
border: 3px solid #3d3d3d;
padding: 20px 0px;
}
ul#mnav_sublist li {
width: 100%;
height: 33%;
}
ul#mnav_sublist li a {
display: block;
font-size: 14px;
color: #9e9e9e;
font-weight: 600;
letter-spacing: 1px;
text-align: center;
height: 30px;
line-height: 33px;
width: 100%;
height: 100%;
transition: all 0.5s;
}
ul#mnav_sublist li a:hover {
font-size: 20px;
font-weight: 900;
color: #3d3d3d;
}
/* Header Scroll */
header#header_wrap.on {
background-color: rgba(255, 255, 255, 0.6);
}
header#header_wrap.on ul#htop_menu li,
header#header_wrap.on ul#htop_menu li a {
color: #3d3d3d;
}
header#header_wrap.on ul#htop_menu li a:after {
background-color: #3d3d3d;
}
header#header_wrap.on h1#logo {
background-image: url("../images/logo_bk.png");
}
header#header_wrap.on h1#logo a:after {
border: solid 3px #232222;
}
header#header_wrap.on ul#gnb_menu li a {
color: #232222;
}
header#header_wrap.on ul#gnb_menu li a:after {
border-bottom: solid 1px #3d3d3d;
}
header#header_wrap.on div#icon_menu ul li#icon_search {
background-image: url("../images/icons/icon_search_gray.png");
}
header#header_wrap.on div#icon_menu ul li#icon_mypage {
background-image: url("../images/icons/icon_mypage_gray.png");
}
header#header_wrap.on div#icon_menu ul li#icon_favorites {
background-image: url("../images/icons/icon_favorite_gray.png");
}
header#header_wrap.on div#icon_menu ul li#icon_cart {
background-image: url("../images/icons/icon_cart_gray.png");
}
/* ------------------------------- HEADER END ---------------------------- */
div#con01_wrap {
width: 100%;
padding-top: 130px;
padding-bottom: 50px;
}
div#con01_inner {
width: 100%;
margin: 0px auto;
position: relative;
top: 0px;
left: 0px;
}
div#trending_slide {
width: 1200px;
overflow: hidden;
height: 540px;
}
div#trending_slide ul {
width: 125%;
height: 100%;
position: absolute;
top: 0px;
left: -25%;
}
div#trending_slide ul li {
float: left;
width: 1560px;
height: 100%;
}
div#trending_slide ul li div.main_wrap {
width: 72.5%;
height: 540px;
float: left;
overflow: hidden;
}
div.main_wrap img.pc_img {
width: 100%;
height: auto;
/* max-height: 540px;*/
}
div.main_wrap img.m_img {
display: none;
}
h2.con_tit {
font-size: 36px;
margin-bottom: 30px;
color: #3d3d3d;
font-weight: 900;
}
div.text_wrap {
width: 27.5%;
/* 430 */
height: 540px;
float: left;
padding: 80px 40px 50px;
box-sizing: border-box;
color: #9e9e9e;
position: relative;
top: 0px;
left: 0px;
background-color: #ffffff;
box-shadow: 5px 1px 40px #ececec;
}
div.info {
width: 100%;
}
span.addFavorite {
display: block;
float: right;
width: 30px;
height: 30px;
background-image: url("../images/icons/icon_favorite_gray.png");
background-repeat: no-repeat;
background-position: center;
transition: all 0.4s;
-webkit-transition: all 0.4s;
}
span.addFavorite:hover {
background-image: url("../images/icons/icon_favorite_bk.png");
}
p.artist_name {
color: #3d3d3d;
font-weight: bold;
font-size: 24px;
margin-bottom: 6px;
}
span.addFavorite a {
display: block;
width: 100%;
height: 100%;
}
p.artwork_name {
font-size: 16px;
margin-bottom: 30px;
}
p.art_medium {
font-size: 14px;
line-height: 130%;
margin-bottom: 30px;
}
div.con01_txt_wrap {
width: 100%;
height: 100%;
}
p.text {
margin-bottom: 30px;
line-height: 150%;
font-size: 14px;
transition: all 0.4s;
-webkit-transition: all 0.4s;
}
p.text:hover {
color: #3d3d3d;
}
a.btn01 {
display: block;
width: 145px;
color: #9e9e9e;
font-size: 14px;
font-weight: 500;
position: absolute;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
}
a.btn01:after {
content: "";
width: 10px;
height: 14px;
background-image: url("../images/icons/icon_arrow_right_gray.png");
background-repeat: no-repeat;
background-size: 10px 14px;
display: block;
position: absolute;
right: -4px;
bottom: 0px;
}
a.btn01:before {
content: "";
width: 0%;
height: 220%;
border: solid 1px #9e9e9e;
position: absolute;
top: 50%;
transform: translateY(-52%);
left: -14px;
opacity: 0;
transition: all 0.4s;
-webkit-transition: all 0.4s;
}
a.btn01:hover:before {
width: 120%;
opacity: 1;
}
ul > button.slick-arrow .slick-next {
display: none;
}
.slick-arrow {
width: 30px;
height: 30px;
border: none;
position: absolute;
top: 22px;
right: 30px;
z-index: 8;
text-indent: -9999px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center;
background-size: auto;
}
.slick-next01 {
margin-right: 0px;
background-image: url("../images/icons/icon_arrow_right_gray.png");
}
.slick-prev01 {
margin-right: 40px;
background-image: url("../images/icons/icon_arrow_left_gray.png");
}
button:focus {
outline: none;
/* 포커스일때 생기는 브라우저의 디폴트 아웃라인 of 선택영역 becomes not displayed */
}
.slick-slide {
opacity: .5;
}
.slick-active {
opacity: 1;
}
ul.slider01 .main_wrap img {
transition: all 3s;
-webkit-transition: all 3s;
}
ul.slider01 .slick-active img {
transform: scale(1.15);
-webkit-transform: scale(1.15);
}
.slick-track {
left: 0px
/* half of the centered slide and padding */
}
ul > div.slick-counter {
display: none;
}
.slick-counter {
z-index: 998;
position: absolute;
left: 0px;
padding-left: 40px;
top: 30px;
}
.current {
font-size: 16px;
color: #3d3d3d;
font-weight: 800;
}
.total {
font-size: 16px;
color: #9e9e9e;
}
/* -------------------------- CON02 BELOW -----------------------------*/
div#con02_wrap {
width: 100%;
}
div#con02_inner {
width: 1200px;
height: 100%;
margin: 0px auto;
}
div.category {
width: 100%;
padding: 15px 20px 5px 20px;
background-color: #ffffff;
box-shadow: 5px 1px 40px #ececec;
box-sizing: border-box;
}
button#filter_btn {
display: none;
}
div#filter_wrap {
display: none;
}
div#pc_filter {
display: block;
float: left;
}
div#list_right {
float: right;
padding: 8px 25px;
color: #9e9e9e;
}
div#sort {
float: left;
}
div#sort span {
display: inline-block;
float: left;
}
div.view {
float: left;
}
div.view span.two {
padding: 0px 15px;
font-weight: 900;
color: #3d3d3d;
}
/* con 02 select menu */
.sel {
font-size: 16px;
width: 150px;
display: inline-block;
background-color: #ffffff;
position: relative;
cursor: pointer;
text-align: left;
}
.sel::before {
position: absolute;
content: '\f0dd';
font-size: 20px;
font-family: "Font Awesome 5 Free";
font-weight: 800;
color: #3d3d3d;
right: 16px;
top: 4px;
z-index: 998;
}
div#list_right > div#sort .sel::before {
display: none;
}
.sel.active::before {
transform: rotateX(-180deg);
right: 16px;
top: 16px;
}
.sel__placeholder {
display: block;
font-size: 16px;
color: #3d3d3d;
text-align: left;
padding: 0.5em 1em;
background-color: #ffffff;
font-weight: 500;
}
div#list_right > div#sort .sel__placeholder {
padding-top: 0px;
padding-left: 10px;
}
.sel.active .sel__placeholder {
visibility: hidden;
background-color: #ffffff;
text-align: left;
}
.sel__placeholder::before {
/* content: attr(data-placeholder);*/
/* visibility: hidden;*/
}
.sel.active .sel__placeholder::before {
visibility: visible;
}
.sel__box {
position: absolute;
top: 0px;
left: 0px;
display: none;
list-style-type: none;
text-align: left;
font-size: 16px;
background-color: #ffffff;
width: 100%;
box-sizing: border-box;
color: #9e9e9e;
font-weight: 500;
}
.sel.active .sel__box {
display: block;
animation: fadeInUp 500ms;
text-align: left;
}
.sel__box__options {
display: list-item;
font-size: 16px;
color: #9e9e9e;
padding: 0.75em 1em;
user-select: none;
transition: all 0.4s;
-webkit-transition: all 0.4s;
}
.sel__box__options:hover {
background-color: #e0e0e0;
}
/*
.sel__box__options::after {
content: '\f00c';
font-family: “Font Awesome 5 Free“;
font-size: 0.5em;
margin-left: 5px;
display: none;
}
*/
.sel__box__options.selected::after {
display: inline;
}
.sel__box__options:hover: {
background-color: #ffffff;
}
/* ----- Select Box Black Panther ----- */
/*
.sel {
border-bottom: 4px solid rgba(0, 0, 0, 0.3);
}
*/
.sel--black-panther {
z-index: 3;
}
/* ----- Select Box Superman ----- */
.sel--superman {
/* display: none; */
z-index: 2;
}
div#con02_inner h2 {
margin-top: 50px;
margin-left: 40px;
}
div#con02_inner p.con_txt {
color: #9e9e9e;
line-height: 140%;
margin-left: 40px;
}
/*-------------------------- CON02 END -------------------------*/
div#con03_wrap {
width: 100%;
padding-bottom: 80px;
}
div#con03_inner {
width: 1200px;
margin: 0px auto;
/*
max-height: 2300px;
overflow: hidden;
*/
}
div.gallery_list {
padding: 0px 40px;
box-sizing: border-box;
}
div.gallery_list ul {
width: 100%;
margin-top: 50px;
}
div.gallery_list ul li {
width: 540px;
height: 500px;
float: left;
margin-right: 40px;
margin-bottom: 60px;
position: relative;
top: 0px;
left: 0px;
box-shadow: 5px 1px 40px #dfdfdf;
overflow: hidden;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
div.gallery_list ul li:nth-child(2n) {
margin-right: 0px;
}
div.img_wrap {
width: 100%;
height: 400px;
overflow: hidden;
}
div.img_wrap img {
width: 100%;
height: auto;
transition: 1s ease;
-webkit-transition: 1s ease;
}
div.gallery_list ul li:hover {
box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}
div.gallery_list ul li:hover div.img_wrap img {
transform: scale(1.25)
}
div.gallery_list ul li a button.gallery_btn {
display: none;
}
div.gallery_list ul li > a {
position: absolute;
left: 50%;
transform: translateX(-50%);
top: 0px;
width: 100%;
height: 400px;
padding-top: 35%;
box-sizing: border-box;
background-color: rgba(0, 0, 0, 0.75);
text-align: center;
color: #ffffff;
font-weight: 600;
font-size: 22px;
line-height: 120%;
display: block;
z-index: 998;
}
div.gallery_list ul li > a:after {
content: "";
position: absolute;
top: 32%;
left: 50%;
transform: translateX(-50%);
width: 30px;
height: 30px;
background-image: url(../images/icons/vrgallery.png);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
z-index: 998;
}
div.gallery_list ul li > a:before {
content: "";
position: absolute;
top: 44%;
left: 50%;
transform: translateX(-50%);
width: 0px;
opacity: 0;
height: 45px;
border: solid 3px #ffffff;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
div.gallery_list ul li:hover a:before {
width: 220px;
opacity: 1;
}
div.gallery_txt {
width: 100%;
height: 100px;
background-color: #ffffff;
padding: 30px;
box-sizing: border-box;
transition: all 0.7s;
-webkit-transition: all 0.7s;
}
div.gallery_list ul li:hover div.gallery_txt {
background-color: #232222;
}
div.gallery_list ul li:hover div.gallery_txt p {
color: #ffffff;
}
div.gallery_txt p.artist_tit {
font-size: 22px;
font-weight: 900;
color: #3d3d3d;
}
div.gallery_txt p.gallery_tit {
font-size: 16px;
margin-top: 5px;
color: #9e9e9e;
}
div.gallery_txt span.add_gallery {
display: inline-block;
width: 30px;
height: 30px;
background-image: url("../images/icons/icon_favorite_gray.png");
background-repeat: no-repeat;
background-position: center;
float: right;
}
div.gallery_txt span.add_gallery a {
display: block;
width: 100%;
height: 100%;
}
/*------------------CON3 SLIDE SETTING BELOW--------------------*/
div#con03_inner > button.slick-arrow {
z-index: 998;
text-indent: 0px;
padding: 5px 0px;
width: 68px;
font-size: 16px;
color: #9e9e9e;
box-sizing: border-box;
}
div#con03_inner button.slick-prev02 {
background-image: url("../images/icons/icon_arrow_left_gray.png");
background-position: left;
text-align: right;
position: relative;
bottom: 0px;
left: 40%;
transform: translateX(-50%);
}
div#con03_inner button.slick-next02 {
background-image: url("../images/icons/icon_arrow_right_gray.png");
text-align: left;
background-position: right;
position: relative;
bottom: 0px;
left: 54%;
transform: translateX(-50%);
}
.slick-disabled {
opacity: 0.4;
}
.slick-counter02 {
display: inline-block;
z-index: 998;
position: absolute;
left: 50%;
transform: translateX(-50%);
bottom: -16px;
}
.currentList {
display: inline-block;
font-size: 16px;
color: #3d3d3d;
font-weight: 800;
padding-right: 5px;
}
.totalList {
display: inline-block;
font-size: 16px;
color: #9e9e9e;
padding-left: 5px;
}
p.copyright {
font-size: 14px;
color: #9e9e9e;
text-align: center;
display: block;
margin-bottom: 20px;
}
/* --------- FOOTER CSS ------------*/
footer#footer_wrap {
width: 100%;
background-color: #232222;
}
div#footer_inner {
width: 1200px;
margin: 0px auto;
color: #ffffff;
padding: 60px 0px;
position: relative;
top: 0px;
left: 0px;
}
div#footer_info {
width: 60%;
float: left;
}
div#footer_inner ul {
float: left;
width: 180px;
margin-right: 30px;
}
div#footer_inner ul li {
width: 100%;
height: 30px;
text-align: left;
line-height: 30px;
}
div#footer_inner ul li a {
display: block;
width: 100%;
height: 100%;
color: #ffffff;
font-size: 12px;
letter-spacing: 1px;
font-weight: 200;
}
div#footer_inner ul.footer_submenu {
width: 100%;
margin-top: 20px;
float: left;
margin-top: 50px;
}
div#footer_inner ul.footer_submenu li {
width: 100px;
float: left;
font-size: 10px;
margin-right: 30px;
}
div#footer_inner ul.footer_submenu li:first-child {
margin-right: 60px;
}
div#footer_inner ul.footer_submenu li a {
font-size: 10px;
letter-spacing: 1px;
}
.fab {
color: #ffffff;
}
.fab:last-child {
margin-right: 0px;
}
#sns {
display: block;
width: 330px;
height: 120px;
float: right;
padding-top: 5%;
}
div#logo_box {
width: 330px;
height: 100%;
background-image: url("../images/icons/logo_news_white.png");
background-size: 100%;
background-repeat: no-repeat;
background-position: center;
position: relative;
top: 0px;
left: 0px;
}
#sns_logo {
width: 100%;
box-sizing: border-box;
position: absolute;
top: 50%;
transform: translateY(-35%);
padding: 0% 21%;
box-sizing: border-box;
}
#sns_logo a {
display: block;
float: left;
margin-right: 20px;
}
#sns_logo a:last-child {
margin-right: 0px;
}
/* FOOTER END */
/* Header Scroll */
header#header_wrap.on {
background: white;
}
header#header_wrap.on ul#htop_menu li,
header#header_wrap.on ul#htop_menu li a {
color: #3d3d3d;
}
header#header_wrap.on ul#htop_menu li a:after {
background-color: #3d3d3d;
}
header#header_wrap.on h1#logo {
background-image: url("../images/logo_bk.png");
}
header#header_wrap.on h1#logo a:after {
border: solid 3px #232222;
}
header#header_wrap.on ul#gnb_menu li a {
color: #232222;
}
header#header_wrap.on ul#gnb_menu li a:after {
border-bottom: solid 1px #3d3d3d;
}
header#header_wrap.on div#icon_menu ul li#icon_search {
background-image: url("../images/icons/icon_search_gray.png");
}
header#header_wrap.on div#icon_menu ul li#icon_mypage {
background-image: url("../images/icons/icon_mypage_gray.png");
}
header#header_wrap.on div#icon_menu ul li#icon_favorites {
background-image: url("../images/icons/icon_favorite_gray.png");
}
header#header_wrap.on div#icon_menu ul li#icon_cart {
background-image: url("../images/icons/icon_cart_gray.png");
}
/* RESPONSIVE DISPLAY SETTING */
@media screen and (max-width:1280px) {
header#header_wrap div#htop_inner,
div#hbottom_inner,
div#footer_inner,
div#con02_inner,
div#con03_inner,
div#trending_slide {
width: 90%;
}
/* mheader */
header#header_wrap {
height: 70px;
}
#htop_wrap {
display: none;
}
#hbottom_wrap {
height: 100%;
}
ul#gnb_menu,
ul#htop_menu {
display: none;
}
h1#logo {
top: 22px;
left: 50%;
transform: translateX(-50%);
}
div#mnav_btn {
display: block;
top: 16px;
}
div.btn_01 {
width: 100%;
margin-top: 35px;
}
div.btn_01 a {
width: 200px;
margin: 0px auto;
}
/* 1280 CON01 */
div#con01_wrap {
padding-top: 70px;
}
div#trending_slide ul {
width: 120%;
left: -20%;
}
div#trending_slide ul li {
width: 1080px;
}
div#trending_slide ul li div.main_wrap {
width: 65%;
}
div.main_wrap img.pc_img {
width: auto;
height: 100%;
}
div.text_wrap {
width: 35%;
}
/* con03 1280 */
/*
div.gallery_list{
width: 100%;
}
*/
div.gallery_list ul {
width: 100%;
}
div.gallery_list ul li {
width: 48%;
margin-right: 4%;
height: 450px;
}
div.img_wrap {
height: 100%;
}
div.img_wrap img {
height: 100%;
width: auto;
position: relative;
left: 50%;
transform: translateX(-50%);
}
div.gallery_txt {
position: relative;
top: -100px;
z-index: 998;
}
div.gallery_list ul li:nth-child(2n) {
margin-right: 0px;
}
div.gallery_list ul li > a {
height: 100%;
z-index: 997;
}
div.gallery_list ul li > a:after {
display: none;
}
div.gallery_list ul li > a:before {
display: none;
}
div.gallery_list ul li:hover div.img_wrap img {
height: 100%;
width: auto;
position: relative;
left: 50%;
transform: translateX(-50%) scale(1.25);
}
}
/* media screen 1280 */
@media screen and (max-width:1080px) {
#sns {
width: 100%;
}
div#logo_box {
margin: 0px auto;
}
div#footer_info {
width: 100%;
float: none;
}
div#footer_info ul {
width: 30%;
}
div#footer_info ul li {
width: 100%;
height: 100%;
text-align: center;
margin-bottom: 3%;
}
div#footer_info ul li a {
width: 70%;
margin: 0px auto;
font-size: 16px;
}
div#footer_info ul:last-child {
margin-right: 0px;
}
ul.footer_submenu {
width: 100%;
}
}
/* media screen 1080 */
@media screen and (max-width:996px) {
div#htop_inner,
div#hbottom_inner,
div#footer_inner {
width: 90%;
}
div#icon_menu ul li {
width: 27px;
height: 27px;
background-size: cover;
}
div#icon_menu ul li#icon_cart a {
width: 100%;
height: 100%;
}
div#icon_menu ul li#icon_favorites,
div#icon_menu ul li#icon_mypage,
div#icon_menu ul li#icon_cart {
display: none;
}
/* con01 996*/
div.con01_txt_wrap p br {
display: none;
}
div.con01_txt_wrap p {
height: 100px;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 5;
-webkit-box-orient: vertical;
}
/* con03 996 */
div.category {
font-size: 14px;
}
.sel__placeholder {
font-size: 14px;
}
div.view {
display: none;
}
div#list_right {
padding-right: 0px;
}
div#list_right > div#sort .sel__placeholder {
padding-right: 0px;
}
div#list_right > div#sort > .sel--black-panther {
width: 100px;
}
div#con02_inner p.con_txt br {
display: none
}
div#con02_inner p.con_txt {
max-width: 80%;
}
}
/* 996 */
@media screen and (max-width:750px) {
div#footer_info ul li {
width: 100%;
margin-bottom: 0px;
}
div#footer_info ul li a {
font-size: 12px;
letter-spacing: 0px;
}
div#footer_info ul {
width: 33%;
margin-right: 0px;
text-align: center;
border-left: solid 1px #3d3d3d;
}
/* mobile header */
div#logo_box {
width: 300px;
}
div#sns_logo a {
width: 25px;
}
div#mnav_btn {
width: 30px;
height: 30px;
}
div#mnav_btn a span {
height: 3px;
}
div#mnav_btn a span.line02 {
top: 12px;
}
div#mnav_btn a span.line03 {
top: 24px;
}
h1#logo {
width: 170px;
background-size: 100%;
}
div#icon_menu ul li#icon_search {
width: 20px;
height: 20px;
}
/* con01 750 */
div#con01_wrap {
height: 480px;
padding-bottom: 30px;
}
div#trending_slide ul {
width: 100%;
left: 0px;
height: 480px;
overflow: hidden;
}
div#trending_slide ul li div.main_wrap img.m_img {
display: none;
}
div#trending_slide ul li div.main_wrap img.pc_img {
display: block;
width: auto;
height: 100%;
transition: all 3s;
-webkit-transition: all 3s;
}
div#trending_slide ul li.slick-active div.main_wrap img.pc_img {
transform: scale(1.1);
}
div#trending_slide ul li div.main_wrap {
width: 100%;
height: 450px;
}
div.text_wrap {
width: 100%;
height: 20%;
padding: 20px 40px 36px;
position: relative;
top: -160px;
background-color: rgba(255, 255, 255, 0.65);
}
div.text_wrap > h2.con_tit {
margin-bottom: 15px;
margin-top: 0px;
font-size: 28px;
}
div.text_wrap > h2.con_tit br {
display: none;
}
div.text_wrap > .slick-counter {
top: 13px;
}
div.text_wrap > .slick-arrow {
top: 8px;
}
p.artist_name {
font-size: 18px;
font-weight: 900;
}
p.artwork_name {
margin-bottom: 0px;
font-size: 14px;
color: rgba(0, 0, 0, 0.5);
}
p.art_medium {
display: none;
}
p.art_medium br {
display: none;
}
div.con01_txt_wrap {
overflow: hidden;
display: none;
position: relative;
top: 0px;
left: 0px;
}
div.con01_txt_wrap p {
-webkit-line-clamp: 3;
height: 82px;
overflow: hidden;
padding-right: 20px;
padding-top: 20px;
line-height: 150%;
margin-bottom: 20px;
box-sizing: border-box;
}
a.btn01 {
width: 140%;
height: 60px;
background-color: #3d3d3d;
text-align: center;
bottom: 0px;
z-index: 999;
line-height: 60px;
left: -20%;
bottom: -20px;
transform: translateX(0%);
position: relative;
font-size: 14px;
letter-spacing: 1px;
}
a.btn01:after {
display: none;
}
a.btn01:hover {
display: none;
}
span.addFavorite {
position: absolute;
right: 4%;
top: 10%;
background-color: rgba(0, 0, 0, 0.4);
border-radius: 40px;
background-position: center;
background-size: 52%;
background-image: url(../images/icons/icon_favorite_white.png);
}
.text_wrap > .slick-arrow {
width: 50px;
height: 50px;
position: absolute;
top: 50%;
transform: translateY(-350%);
background-position: center;
background-size: 100%;
}
.text_wrap > .slick-prev01 {
left: 15px;
margin-right: 0px;
background-image: url(../images/icons/icon_arrow_gal_left.png);
}
.text_wrap > .slick-next01 {
right: 15px;
background-image: url(../images/icons/icon_arrow_gal_right.png);
}
.text_wrap > .slick-counter {
display: none;
}
/* con02 750 */
div#pc_filter {
display: none;
}
div.category {
position: relative;
padding: 15px 15px 5px;
}
div#list_right {
width: 170px;
font-size: 13px;
padding: 10px;
box-sizing: border-box;
}
div#list_right > div#sort .sel__placeholder {
font-size: 13px;
}
.sel__box__options {
font-size: 13px;
padding: 10px;
box-sizing: border-box;
width: 100%;
}
.sel::before {
left: 120px;
top: 0px;
display: none;
}
.sel__placeholder {
position: relative;
z-index: 1;
display: none;
}
.sel--black-panther {
z-index: 0;
}
button#filter_btn {
height: 32px;
line-height: 32px;
display: block;
cursor: pointer;
border: none;
padding: 0px 20px;
/* background-color: #3d3d3d;*/
background-color: transparent;
border: solid 1px rgba(0, 0, 0, 0.15);
color: #3d3d3d;
font-weight: 600;
font-size: 13px;
box-sizing: border-box;
float: left;
}
button#filter_btn span#in {
display: block;
float: right;
padding-left: 6px;
font-size: 17px;
line-height: 32px;
}
button#filter_btn.on span#in {
display: none;
}
button#filter_btn.on span#out {
display: block;
}
button#filter_btn span#out {
display: none;
/* block */
float: right;
padding-left: 6px;
font-size: 15px;
line-height: 30px;
}
div#filter_wrap {
opacity: 0;
/* 1 */
top: -100px;
/* 0px */
margin: 60px auto;
display: block;
position: absolute;
width: 100%;
top: 0px;
left: 50%;
transform: translateX(-50%);
background-color: #3d3d3d;
z-index: 998;
pointer-events: none;
transition: all .2s cubic-bezier(.12, .13, .14, .15);
-webkit-transition: all .2s cubic-bezier(.12, .13, .14, .15);
}
div#filter_wrap.on {
opacity: 1;
top: 100%;
display: block;
margin-top: 0px;
pointer-events: auto;
}
div#filter_inner {
width: 100%;
margin: 0px auto;
height: 100%;
padding: 20px;
box-sizing: border-box;
}
div#filter_inner .sel {
width: 30%;
margin-right: 5%;
float: left;
}
div#filter_inner .lastsel {
margin-right: 0px;
}
div#filter_inner .sel sel--black-panther {
display: block;
z-index: 998;
}
div#filter_inner .sel__placeholder {
display: block;
text-align: left;
font-size: 13px;
}
div#filter_inner .sel__box__options {
text-align: center;
font-size: 13px;
}
div#filter_inner .sel::before {
left: 85%;
top: 0px;
display: block;
}
/* con01 750 end */
/* con02 750 BELOW */
div#con02_inner h2 {
margin: 0px 40px 20px;
font-size: 34px;
}
div#con02_inner h2 span.cut {
display: none;
}
div#con02_inner p.con_txt span.cut {
display: none;
}
/* con03 750 BELOW */
div#con03_inner {
position: relative;
}
div#con03_inner > button.slick-arrow {
top: 50%;
position: fixed;
opacity: 0;
pointer-events: none;
text-indent: -9999px;
width: 40px;
height: 40px;
background-color: #3d3d3d;
font-size: 0px;
background-position: center;
border-radius: 40px;
}
div#con03_inner > button.slick-arrow.on {
top: 50%;
position: fixed;
opacity: 1;
pointer-events: auto;
}
div#con03_inner > button.slick-prev02 {
left: 32px;
width: 40px;
background-color: #3d3d3d;
}
div#con03_inner > button.slick-next02 {
left: 95.5%;
}
div.gallery_list ul li {
height: 300px;
}
div.gallery_txt {
padding: 15px 25px;
}
div.gallery_txt p.artist_tit {
font-size: 18px;
}
div.gallery_txt p.gallery_tit {
font-size: 14px;
margin-top: 15px;
}
div.gallery_txt span.add_gallery {
position: relative;
bottom: 200px;
display: block;
background-color: #ffffff;
border-radius: 30px;
background-size: 53%;
box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.2);
z-index: 998;
margin-right: -8px;
}
div.gallery_list ul li > a {
font-size: 18px;
}
}
/* 750 */
@media screen and (max-width:480px) {
/* con01 480 */
div#trending_slide ul li div.main_wrap img.pc_img {
display: none;
}
div#trending_slide ul li div.main_wrap img.m_img {
display: block;
width: auto;
height: 100%;
transition: all 3s;
-webkit-transition: all 3s;
}
div#trending_slide ul li.slick-active div.main_wrap img.m_img {
transform: scale(1.1);
}
}
/* media screen 480 px*/
/* ===== Keyframes ===== */
@keyframes fadeInUp {
from {
opacity: 0;
transform: translate3d(0, 20px, 0);
}
to {
opacity: 1;
transform: none;
}
}
@keyframes fadeOut {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
/*
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(){
mainVisualSlide();
headerScroll();
Hover();
mobileBtn();
hoverZoom();
splitting();
VisualSlideOne();
VisualSlideTwo();
inputAfter();
}) // window
function mainVisualSlide(){
$(".slider").slick({
slide : "li",
slideToShow : 1,
slideToScroll : 1,
autoplay : true,
autoplaySpeed : 4000,
infinite : true,
pauseOnHover : true,
arrows: false,
fade: true,
responsive: [
{
breakpoint : 980,
settings : {
slideToShow : 1,
}//setting
}
]//responsive
}) //slick
} // mainVisualSlide
function headerScroll(){
$(window).on("scroll", onScroll);
function onScroll(){
var headerTop = $(window).scrollTop();
if(headerTop > 300){
$("#header_wrap").addClass("on");
$("#mnav_btn a span").addClass("invert");
}else{
$("#header_wrap").removeClass("on").css({
"transition": "all 0.4s"});
$("#mnav_btn a span").removeClass("invert").css({
"transition": "all 0.4s"});
}
$("#mnav_btn").on("click", invertClick);
function invertClick(){
$("#mnav_btn a span").addClass("invert");
}//invertClick;
}// onScroll
} // headerScroll
function Hover(){
var $visualSlide = $(".visual_slide > ul > li, #con05_visual a");
var $singleBtn = $("span.singleBtn");
var $artistBtn = $("span.exhibit_btn, span.artwork_btn");
var $shopBtn = $("span.shop_btn");
$singleBtn.hide();
$artistBtn.hide();
$shopBtn.css({"opacity":0,"top":"30%"});
$visualSlide.on("mouseenter", onHover);
$visualSlide.on("mouseleave", outHover);
function onHover(){
$(this).find("img").css({"opacity":"0.5"});
$(this).find("span.singleBtn").show();
$(this).find("span.exhibit_btn, span.artwork_btn").show();
$(this).find("span.shop_btn").animate({"opacity":1,"top":"40%"},150,"easeOutCubic");
}// onHover
function outHover(){
$singleBtn.hide();
$artistBtn.hide();
// $shopBtn.hide();
$shopBtn.animate({"opacity":0,"top":"30%"},150,"easeOutCubic");
$(this).find("img").css({"opacity":"1"});
}//outHover
}// Hover
function mobileBtn(){
var openMenu = false;
$("#mnav_menu").css({"opacity":0, "top":"-100%"});
// $("#tnav").css({"top":"-100%"});
$("#mnav_btn").on("click", onMnav);
function onMnav(){
if(openMenu == false){
$("#mnav_btn a span").addClass("invert");
setTimeout(function(){
$("#mnav_btn a span.line02").addClass("on")},0);
setTimeout(function(){
$("#mnav_btn a span.line01").addClass("on")
$("#mnav_btn a span.line03").addClass("on")},300)
setTimeout(function(){
$("#mnav_btn a").addClass("on")},600);
$("#mnav_menu").animate({"opacity":1,"top":0},500,"easeOutCubic");
openMenu = true;
return false;
}else if(openMenu == true){
$("#mnav_btn a").removeClass("on");
$("#mnav_btn a span.line01").removeClass("on");
$("#mnav_btn a span.line02").removeClass("on");
$("#mnav_btn a span.line03").removeClass("on");
$("#mnav_btn a span").removeClass("invert");
$("#mnav_menu").animate({"opacity":0, "top":"-100%"},500,"easeOutCubic");
openMenu = false;
return false;
}
}// onMnav
} // mobileBtn
function hoverZoom(){
$("#con05_visual").find("a").on("mouseenter", zoomIn);
$("#con05_visual").find("a").on("mouseleave", zoomOut);
function zoomIn(){
$(this).find(".con05_visual").addClass("on");
}
function zoomOut(){
$(this).find(".con05_visual").removeClass("on");
}
}//hoverZoom
function splitting(){
Splitting();
} //splitting
function VisualSlideOne(){
$(".vslide01").on("init", function(event, slick){
$('<div class="slick-counter"><span class="current"></span> / <span class="total"></span></div>').appendTo($(this));
$('.current').text(slick.currentSlide + 1);
$('.total').text(slick.slideCount);
$('.slick-arrow').on("click", btnClick);
function btnClick(){
$('.slick-arrow').removeClass("on");
$(this).addClass("on");
}//btnClick
})// init
.slick({
centerMode: true,
centerPadding: '0px',
slidesToShow: 2,
variableWidth: true,
arrows : true,
autoplay : true,
autoplaySpeed : 3000,
})
.on('beforeChange', function(event, slick, currentSlide, nextSlide){
$('.current').text(nextSlide+1);
})
}// VisualSlideOne
function VisualSlideTwo(){
$(".slideTwo").slick({
slide : "li",
slidesToShow:1,
variableWidth: true,
arrows : false,
autoplay : true,
autoplaySpeed : 3500,
responsive: [
{
breakpoint : 980,
settings : {
slideToShow : 1,
}//setting
}
]//responsive
})
}// VisualSlideTwo
function inputAfter(){
$('')
}// inputAfter
$(window).load(function(){
initialSetting();
headerScroll();
mobileBtn();
mainVisualSlide();
selectMenu();
imgHover();
contentSlide();
filterBtn();
slideBtnScroll();
}) // window
function initialSetting(){
$("#mnav_btn a span").addClass("invert");
}//initialSetting
function headerScroll(){
$(window).on("scroll", onScroll);
function onScroll(){
var headerTop = $(window).scrollTop();
if(headerTop > 300){
$("#header_wrap").addClass("on");
}else{
$("#header_wrap").removeClass("on").css({
"transition": "all 0.4s"});
}
}// onScroll
} // headerScroll
function mobileBtn(){
var openMenu = false;
$("#mnav_menu").css({"opacity":0, "top":"-100%"});
$("#mnav_btn").on("click", onMnav);
function onMnav(){
if(openMenu == false){
$("#mnav_btn a span").addClass("invert");
setTimeout(function(){
$("#mnav_btn a span.line02").addClass("on")},0);
setTimeout(function(){
$("#mnav_btn a span.line01").addClass("on")
$("#mnav_btn a span.line03").addClass("on")},300)
setTimeout(function(){
$("#mnav_btn a").addClass("on")},600);
$("#mnav_menu").animate({"opacity":1,"top":0},500,"easeOutCubic");
openMenu = true;
return false;
}else if(openMenu == true){
$("#mnav_btn a").removeClass("on");
$("#mnav_btn a span.line01").removeClass("on");
$("#mnav_btn a span.line02").removeClass("on");
$("#mnav_btn a span.line03").removeClass("on");
$("#mnav_btn a span").removeClass("invert");
$("#mnav_menu").animate({"opacity":0, "top":"-100%"},500,"easeOutCubic");
openMenu = false;
return false;
}
}// onMnav
} // mobileBtn
function mainVisualSlide() {
$(".slider01").on("init", function (event, slick) {
$('<div class="slick-counter"><span class="current"></span>/<span class="total"></span></div>').appendTo($(this));
$('.current').text(slick.currentSlide + 1);
$('.total').text(slick.slideCount);
$('.slick-arrow').removeClass("on");
//$('.text_wrap > .slick-arrow').on("click", btnClick);
// $('ul.slider01 > button.slick-arrow').css({"display":"none"});
// function btnClick() {
//
// $('.slick-arrow').removeClass("on");
// $(this).addClass("on");
//
//
//
// } //btnClick
}) // init
$(".slider01").slick({
centerMode: true,
centerPadding: '0px',
slidesToShow: 1,
autoplay: true,
autoplaySpeed: 4500,
infinite: true,
pauseOnHover: true,
arrows: true,
variableWidth: true,
prevArrow : ".slick-prev01",
nextArrow : ".slick-next01",
responsive: [
{
breakpoint: 996,
settings: {
centerMode : false,
variableWidth: false,
}
},
{
breakpoint: 480,
settings: {
centerMode : false,
variableWidth: false,
}
}
]
})
.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
$('.current').text(nextSlide + 1);
})
} // mainVisualSlide
function selectMenu(){
$('.sel').each(function() {
$(this).children('select').css('display', 'none');
var $current = $(this);
$(this).find('option').each(function(i) {
if (i == 0) {
$current.prepend($('<div>', {
class: $current.attr('class').replace(/sel/g, 'sel__box')
}));
var placeholder = $(this).text();
$current.prepend($('<span>', {
class: $current.attr('class').replace(/sel/g, 'sel__placeholder'),
text: placeholder,
'data-placeholder': placeholder
}));
return;
}
$current.children('div').append($('<span>', {
class: $current.attr('class').replace(/sel/g, 'sel__box__options'),
text: $(this).text()
}));
});
});
// Toggling the `.active` state on the `.sel`.
$('.sel').click(function() {
$(this).toggleClass('active');
});
$('.sel').on("mouseleave", leave);
function leave(){
setTimeout(function(){
$('.sel').removeClass('active');
},450);
}
// Toggling the `.selected` state on the options.
$('.sel__box__options').click(function() {
var txt = $(this).text();
var index = $(this).index();
$(this).siblings('.sel__box__options').removeClass('selected');
$(this).addClass('selected');
var $currentSel = $(this).closest('.sel');
$currentSel.children('.sel__placeholder').text(txt);
$currentSel.children('select').prop('selectedIndex', index + 1);
});
}//help
function imgHover(){
var $gallery = $('.gallery_list > ul > li');
var $galleryBtn = $gallery.find('a');
$galleryBtn.css({"opacity":0,"width":"0%"});
$gallery.on("mouseenter", onHover);
$gallery.on("mouseleave", outHover);
function onHover(){
$(this).find('a').animate({"opacity":1, "width":"100%"},800,"easeOutCubic");
// $(this).find('img').css({"transform":"scale(1.35)"});
}//onHover
function outHover(){
$(this).find('a').animate({"opacity":0,"width":"0%"},500,
"easeOutCubic");
// $(this).find('img').css({"transform":"scale(1)"});
}//outHover
}// imgHover
function contentSlide(){
$("#con03_inner").on("init", function (event, slick) {
var $currentList = $(this).find("#con03_inner > .slick-active");
var $listCount = $("#con03_inner .gallery_list").size();
//alert($listCount);
$('<div class="slick-counter02"><span class="currentList"></span>/<span class="totalList"></span></div>').appendTo($(this));
$('.currentList').text( slick.currentSlide + 1 );
$('.totalList').text( $listCount ) ;
}) // init
$("#con03_inner").slick({
slide : ".gallery_list",
arrows: true,
slidesToShow: 1,
draggable : false,
infinite : false,
prevArrow : ".slick-prev02",
nextArrow : ".slick-next02",
responsive: [
{
breakpoint: 768,
settings: {
}
},
{
breakpoint: 480,
settings: {
}
}
]
})
.on('beforeChange', function (event, slick, currentSlide, nextSlide) {
$('.currentList').text(nextSlide + 1);
})
}// contentSlide
function filterBtn(){
var $filterBtn = $('#filter_btn');
$filterBtn.on("click focus", popUp);
function popUp(){
$('#filter_wrap').toggleClass('on');
$('#filter_btn').toggleClass('on');
//$('#filter_btn span#out').show();
//$('#filter_btn span#in').hide();
} //popUp
}// filterBtn
function slideBtnScroll(){
$(window).on("scroll", onScroll);
function onScroll(){
var headerTop = $(window).scrollTop();
if(headerTop > 900){
$("#con03_inner > button.slick-arrow").addClass("on");
}else{
$("#con03_inner > button.slick-arrow").removeClass("on").css({
"transition": "all 0.4s"});
}
if( $(window).scrollTop() + $(window).height() > ($(document).height() - 300) ){
$("#con03_inner > button.slick-arrow").removeClass("on").css({
"transition": "all 0.2s"});
}
}// onScroll
} // headerScroll