@charset "utf-8";
  

body, html { 
    background:#f0f0f0;
    cursor:url('http://eumcreative.com/assets/images/cur_normal.cur'),default; }

a, button { 
    cursor:url('http://eumcreative.com/assets/images/cur_link.cur'),auto!important; }
  
.gallery-wrap {width:60vw; margin:0 auto; overflow:hidden;} 
.gallery-wrap > h4.tit { color:#333;  line-height:5rem; font-size:1.6rem; font-weight:normal; font-family:'Noto Sans Korean'; text-align:center; }

.gallery-menu {text-align:center; margin:6vh auto 0 auto; }
.gallery-menu ul {padding:0; border-bottom:1px solid rgba(0,0,0,0.3); height:2.5rem; cursor:url('../images/cur_link.cur'),auto!important; margin-bottom:3vh;}
.gallery-menu ul li { width:calc(100% / 7); list-style:none; float:left; transition:all .5 ease; color:#333; font-size:1rem; letter-spacing:-1px; height:2.5rem;
  font-family:'Noto Sans Korean'; font-weight:400; cursor:url('http://eumcreative.com/assets/images/cur_link.cur'),auto!important; } 
.gallery-menu ul li.active { color:#0d5a3d; border-bottom:2px solid #0d5a3d;}  

.gallery-item { width:100%; margin:0 auto } 
.gallery-item .caption { position:relative; color:#fff; overflow:hidden; margin:0.25vw;}
.gallery-item .caption img { width:calc(15vw - 0.5vw); height:calc(15vw - 0.5vw);  }
/*.gallery-item .landing img { width:calc(15vw - 0.5vw); height:calc(27vw - 0.5vw) }  랜팅페이지도 정사각형으로 20210512 */
.gallery-item .landing img { width:calc(15vw - 0.5vw); height:calc(15vw - 0.5vw) }

.gallery-item .caption .figcaption { position:absolute; bottom:0; left:0; padding:1.5em; width:100%; height:100%;}
.gallery-item .caption .figcaption::before { position:absolute; width:100%; height:100%; top:0; right:0; content:''; opacity:0; background:rgba(0, 0, 0, 0.95); -webkit-transition:all 0.4s; transition:all 0.4s;-webkit-transition-delay:0.1s; transition-delay:0.1s;}
.gallery-item .caption .figcaption p.category, .gallery-item .caption .figcaption h4.tit, .gallery-item .caption .figcaption a.more { font-family:'Noto Sans Korean'; border-radius:20px; letter-spacing:-0.5px; margin:0 0 3%; opacity:0; -webkit-transition:opacity 0.35s, -webkit-transform 0.35s; transition:opacity 0.35s,-webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;}
.gallery-item .caption .figcaption p.category {word-spacing:-0.15em; font-size:1rem; font-weight:300; text-transform:uppercase;-webkit-transform:translate3d(0%, 50%, 0); transform:translate3d(0%, 50%, 0);-webkit-transition-delay:0.1s; transition-delay:0.1s;}
.gallery-item .caption .figcaption h4.tit {font-weight:600; font-size:1.4rem; -webkit-transition-delay:0s; transition-delay:0s; line-height:1.9rem;} 
.gallery-item .caption .figcaption a.more { position:absolute; bottom:5%; font-size:0.95rem; display:inline-block; width:auto; padding:2% 4%; border:1px solid #fff; margin:12% 0; }

.gallery-item .caption a {color:#fff;}
.gallery-item .caption a:hover {color:#fff;}
.gallery-item .caption:hover img {opacity:1;}
.gallery-item .caption:hover .figcaption p.category { opacity:1; -webkit-transform:translate3d(0%, 0%, 0); transform:translate3d(0%, 0%, 0); -webkit-transition-delay:0.3s; transition-delay:0.3s;}
.gallery-item .caption:hover .figcaption h4.tit {opacity:0.9; -webkit-transition-delay:0.6s; transition-delay:0.6s;}
.gallery-item .caption:hover .figcaption a.more {opacity:0.9; -webkit-transition-delay:0.6s; transition-delay:0.9s; transition:all 0.6s ease;} 
.gallery-item .caption:hover .figcaption a.more:hover { background:#0d5a3d; border:1px solid #0d5a3d }
.gallery-item .caption:hover .figcaption::before {background:rgba(0, 0, 0, 0.8); top:0px; bottom:0px; right:0px; left:0px; opacity:1; -webkit-transition-delay:0s; transition-delay:0s;}

.gallery-wrap .gallery-view { width:100%; margin:6vh auto 0 auto; }
.gallery-wrap .gallery-view > div { font-family:'Noto Sans Korean'; text-align:center; } 
.gallery-wrap .gallery-view div.top, .gallery-wrap .gallery-view div.img-area { border-bottom:1px solid rgba(0,0,0,0.2); }
.gallery-wrap .gallery-view div.top p.category { color:#333; line-height:3rem; font-size:1.1rem;} 
.gallery-wrap .gallery-view div.title { position:relative;}
.gallery-wrap .gallery-view div.title h3 { position:absolute; top:0; left:0; opacity:0.9; line-height:5rem; color:rgba(255,255,255,0.6); font-weight:normal; font-size:1.1rem; transition:all 0.6s ease; cursor:cursor:url('../images/cur_link.cur'),auto!important;}
.gallery-wrap .gallery-view div.title h3 img { margin-right:6px; }
.gallery-wrap .gallery-view div.title h3:hover { opacity:1; }
.gallery-wrap .gallery-view div.title h3 span { color:#333  }
.gallery-wrap .gallery-view div.title h4.tit { color:#333; line-height:5rem; font-size:1.6rem;  font-family:'Noto Sans Korean'; text-align:center; }

.gallery-wrap .gallery-view div.grid { width:100%; padding-bottom:10vh; border-bottom:1px solid rgba(255,255,255,0.1); }

.gallery-wrap .gallery-view div.grid div img { width:100%; }

.gallery-wrap .gallery-view div.grid div.blog { width:49.5%; padding:1%; }
.gallery-wrap .gallery-view div.grid div.landing { margin:0 auto; width:80%; padding:1%; } 
.gallery-wrap .gallery-view div.grid div.sns { margin:0 auto; width:80%; padding:1%; } 
.gallery-wrap .gallery-view div.grid div.etc { margin:0 auto; width:80%; padding:1%; } 


@media screen and (max-width:1500px) {  
  .gallery-wrap {width:70vw; margin:0 auto; overflow:hidden;} 
  .gallery-item .caption img { width:calc(16.8vw); height:calc(16.8vw); }
  /*.gallery-item .landing img { width:calc(16.8vw); height:31vw; }*/
  .gallery-item .landing img { width:calc(16.8vw); height:calc(16.8vw); }
}

@media screen and (max-width:1100px) {  
  .gallery-item .caption img { width:22.5vw; height:22.5vw; }
  /*.gallery-item .landing img { width:22.5vw; height:40.5vw; }*/
  .gallery-item .landing img { width:22.5vw; height:22.5vw; }
}

@media screen and (max-width:900px) { 

  .gallery-menu ul { padding:0; border-bottom:none; text-align:center; height:auto;}
  .gallery-menu ul li { width:auto; display:inline-block; float:none; transition:all .5 ease; color:#333; font-size:1rem; letter-spacing:-1px; height:1.5rem; 
    font-family:'Noto Sans Korean';} 
  .gallery-menu ul li.active { color:#0d5a3d; border-bottom:0} 
  .gallery-menu ul li:after {content:'/'; display:inline-block; width:20px; opacity:0.6}
  .gallery-menu ul li.last:after { content:''; }
}

@media screen and (max-width:767px) { 
  .gallery-wrap {width:80vw; margin:0 auto; overflow:hidden; } 
  .gallery-item .caption { position:relative; color:#fff; overflow:hidden; margin:0.5vw;}
  .gallery-item .caption img { width:calc(39vw - 0.5vw); height:calc(39vw - 0.5vw); }
  .gallery-item .landing img { width:calc(39vw - 0.5vw); height:calc(39vw - 0.5vw) }

  .gallery-wrap > h4.tit { font-size:1.3rem; line-height:4.5rem;}
  .gallery-wrap .gallery-view div.top, .gallery-wrap .gallery-view div.img-area { border-bottom:1px solid rgba(0,0,0,0.1); }
  .gallery-wrap .gallery-view div.top p.category { color:#333; line-height:3rem; font-size:1.1rem; letter-spacing:-1px;} 
  .gallery-wrap .gallery-view div.title { position:relative; }
  .gallery-wrap .gallery-view div.title h3 { position:absolute; top:0; left:0; opacity:0.6; line-height:4rem; color:rgba(0,0,0,0.6); font-weight:normal; font-size:1rem; transition:all 0.6s ease;}
  .gallery-wrap .gallery-view div.title h3 span { display:none; }
  .gallery-wrap .gallery-view div.title h3 img { margin-right:6px; }
  .gallery-wrap .gallery-view div.title h3:hover { opacity:1; }
  .gallery-wrap .gallery-view div.title h4.tit { color:#333; line-height:4rem; font-size:1.4rem; font-weight:normal; font-family:'Noto Sans Korean'; text-align:center; }

  .gallery-wrap .gallery-view div.grid { width:100%; padding-bottom:3vh; height:auto; }
  .gallery-wrap .gallery-view div.grid div.blog { display:block; width:100%; padding:2% 0 }
  .gallery-wrap .gallery-view div.grid div.blog img { width:100%;}
  .gallery-wrap .gallery-view div.grid div.landing { margin:0 auto; width:100%; padding:2% 0;} 
  .gallery-wrap .gallery-view div.grid div.sns { margin:0 auto; width:100%; padding:2% 0;} 
  .gallery-wrap .gallery-view div.grid div.etc { margin:0 auto; width:100%; padding:2% 0;} 
}

@media screen and (max-width:500px) { 
  .gallery-wrap {width:85vw; margin:0 auto; overflow:hidden;} 
  .gallery-item .caption { position:relative; color:#fff; overflow:hidden; margin:1.5vw;} 
  .gallery-item .caption img { width:85vw; height:85vw; opacity:1 }
  .gallery-item .landing img { width:85vw; height:85vw; opacity:1 }

  .gallery-item .caption .figcaption { position:absolute; width:100%; height:100%; top:0; right:0; content:''; opacity:1;
   -webkit-transition:all 0.4s; transition:all 0.4s;-webkit-transition-delay:0.1s; transition-delay:0.1s; background:linear-gradient(to bottom,rgba(0,0,0,.5), transparent 30%);}

  .gallery-item .caption .figcaption p.category { opacity:1; -webkit-transform:translate3d(0%, 0%, 0); transform:translate3d(0%, 0%, 0); -webkit-transition-delay:0.3s; transition-delay:0.3s; text-shadow:0px 0px 12px rgba(0,0,0,0.5)}
  .gallery-item .caption .figcaption h4.tit { opacity:0.9; -webkit-transition-delay:0.6s; transition-delay:0.6s; text-shadow:0px 0px 12px rgba(255,255,255,0.5); }
  .gallery-item .caption .figcaption a.more { position:absolute; opacity:1; background:#fff; bottom:0; color:#333;
    width:90%; height:auto; left:50%; transform:translate(-50%,-50%); font-size:0.95rem; display:inline-block; padding:3% 4%; border:1px solid #fff; margin:0; }

    
/*
  .gallery-item .caption .figcaption p, .gallery-item .caption .figcaption h4,
  .gallery-item .caption .figcaption a.more { font-family:'Noto Sans Korean'; letter-spacing:-0.5px; margin:0 0 3%; opacity:0; -webkit-transition:opacity 0.35s, -webkit-transform 0.35s; transition:opacity 0.35s,-webkit-transform 0.35s,-moz-transform 0.35s,-o-transform 0.35s,transform 0.35s;}
  .gallery-item .caption .figcaption p {word-spacing:-0.15em; font-size:1.2rem; font-weight:300; text-transform:uppercase;-webkit-transform:translate3d(0%, 50%, 0); transform:translate3d(0%, 50%, 0);-webkit-transition-delay:0.1s; transition-delay:0.1s;}
  .gallery-item .caption .figcaption h4 {font-weight:600; font-size:1.8rem; -webkit-transition-delay:0s; transition-delay:0s; line-height:2.5rem;} 
  .gallery-item .caption .figcaption a.more { position:absolute; bottom:5%; font-size:1rem; display:inline-block; width:auto; padding:2% 4%; border:1px solid #fff;}
  .gallery-item .landing .figcaption a.more { position:static; margin:12% 0; }
*/

  .gallery-wrap .gallery-view div.top p.category { line-height:2.5rem; font-size:0.9rem;} 
  .gallery-wrap .gallery-view div.title { position:relative; }
  .gallery-wrap .gallery-view div.title h3 { position:absolute; top:0; left:0; opacity:0.6; line-height:3rem; color:rgba(255,255,255,0.6); font-weight:normal; font-size:1rem; transition:all 0.6s ease;}
  .gallery-wrap .gallery-view div.title h3 span { display:none; }
  .gallery-wrap .gallery-view div.title h3 img { margin-right:3px; height:1.5rem; }
  .gallery-wrap .gallery-view div.title h3:hover { opacity:1; }
  .gallery-wrap .gallery-view div.title h4.tit { line-height:3rem; font-size:1rem; font-weight:normal; font-family:'Noto Sans Korean'; text-align:center; letter-spacing:-0.5px;}

}