@charset "utf-8";

#atc02{position:relative;width:100%}

#atc02 .img_area{overflow:hidden}
#atc02 .img_area li{float:left;position:relative;width:25%;cursor:pointer}
#atc02 .img_area li .mask{position:absolute;width:100%;height:100%;font-size:14px;font-weight:700;letter-spacing:.1px;color:#fff;background:rgba(0,0,0,.3);background:-webkit-gradient(left top, left bottom, color-stop(0%, rgba(255,255,255,0)), color-stop(100%, rgba(0,0,0,.9)));
background:-webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(0,0,0,.9) 100%);background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(0,0,0,.9) 100%);opacity:0;-webkit-transition:all .4s;transition:all .4s;font-family:'Playfair Display', serif}
#atc02 .img_area li .mask p{position:absolute;left:40px;bottom:65px}
#atc02 .img_area li .mask span{display:block;position:absolute;right:40px;bottom:40px;width:78px;height:78px;font-weight:400;text-align:center;line-height:76px}
#atc02 .img_area li .mask span:after{display:block;content:"";position:absolute;left:-7px;top:50%;width:15px;height:1px;background-color:rgba(255,255,255,.7)}
#atc02 .img_area li .mask span:before{display:block;content:"";position:absolute;left:0;bottom:0;width:78px;height:78px;background-image:url(/sh_img/include/include_02/img/view_bg.png);transition:all 2s cubic-bezier(0.215, 0.61, 0.355, 1)}
#atc02 .img_area li:hover .mask{opacity:1}
#atc02 .img_area li:hover .mask span:before{transform:rotate(450deg)}
	
#atc02 .atc02_bar{position:relative;width:100%;height:135px;background-color:#273945}
#atc02 .atc02_bar .inner{overflow:hidden;width:1200px;margin:0 auto;padding:0 50px;opacity:0;-webkit-transform:translateX(-50px);transform:translateX(-50px)}
#atc02 .atc02_bar .sns{float:left;width:18%}
#atc02 .atc02_bar .sns li{display:inline-block;line-height:135px}
#atc02 .atc02_bar .sns li a{padding:5px;color:#fff}

/* 라테스트 */
#atc02 .latest{float:left;width:82%;height:135px}
#atc02 .latest:after{display:block;content:"";visibility:hidden;clear:both}
#atc02 .latest h3{float:left;width:19%;height:100%;padding-top:11px;font-size:18px;font-weight:700;color:#fff;letter-spacing:0;line-height:1.3;font-family:'Playfair Display', serif}
#atc02 .latest h3 span{display:block;font-size:50px}
#atc02 .latest h3 span:after{display:inline-block;content:"";width:7px;height:7px;margin-left:4px;border-radius:50%;background-color:#fff}
#atc02 .latest .more_btn{float:right;display:inline-block;position:relative;font-size:13px;line-height:135px;letter-spacing:0;color:#fff;font-family:'Playfair Display', serif}
#atc02 .latest .more_btn:after{display:block;content:"";position:absolute;right:-10%;top:50%;width:0;height:1px;background-color:#fff;-webkit-transition:all .3s;transition:all .3s}
#atc02 .latest .more_btn:hover:after{width:120%;background-color:#dbb313}

/* 액션 */
#atc02 .atc02_bar .inner.active{opacity:1;-webkit-transform:translateX(0);transform:translateX(0);-webkit-transition: all 1s cubic-bezier(0.165, 0.84, 0.44, 1);transition: all 1s ecubic-bezier(0.165, 0.84, 0.44, 1)}