@charset "utf-8";

#atc01{position:relative;width:1200px;margin:0 auto;padding: 115px 0;}
#atc01:before{position:absolute;left:50%;top:0;width:1px;height:100%;content:'';z-index:-1;background-color:#e1e1e1}
#atc01 .tit_area{font-size:15px;color:#777;text-align:center;opacity:0;animation-delay:.3s}
#atc01 .tit_area p{margin-bottom:35px;font-size:42px;font-weight:700;color:#222;font-family:'play', sans-serif}
#atc01 .bus_list{margin-top: 65px;overflow:hidden;}
#atc01 .bus_list li{position:relative;float:left;width:32%;height:360px;margin-right:2%;overflow:hidden;opacity:0;background-color:#091013}
#atc01 .bus_list li .img{position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%}
#atc01 .bus_list li img{width:100%;height:100%;opacity:.9;transition:all .3s}
#atc01 .bus_list li .tit{position:absolute;left: 35px;bottom: 37px;font-size:17px;color:#fff;font-family:notokr-medium;transition:all .3s}
#atc01 .bus_list li .tit span{display:block;font-size: 23px;line-height: 36px;font-weight:700;color:#fff;font-family:'play', sans-serif}
#atc01 .bus_list li .cont{position:absolute;left:35px;bottom:15px;color:rgba(255, 255, 255, 0.7);opacity:0;transition:all .3s}
#atc01 .bus_list li:hover .cont{bottom:27px;opacity:1}
#atc01 .bus_list li:hover .tit{bottom:85px}
#atc01 .bus_list li:hover .img img{opacity:.6;-webkit-transform:scale(1.05,1.05);-ms-transform:scale(1.05,1.05);transform:scale(1.05,1.05)}
#atc01 .bus_list li:nth-child(1){animation-delay:.5s}
#atc01 .bus_list li:nth-child(2){animation-delay:.7s}
#atc01 .bus_list li:nth-child(3){margin-right:0;animation-delay:.9s}

/* fade  */
.animated{-webkit-animation-duration:.8s;animation-duration:.8s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.fadeInUp{-webkit-animation-name:fadeInUp;animation-name:fadeInUp}
@-webkit-keyframes fadeInUp{from{opacity:0;-webkit-transform:translateY(50px)}to{opacity:1;-webkit-transform:none}}
@keyframes fadeInUp{from{opacity:0;transform:translateY(50px)}to{opacity:1;transform:none}}

.fadeInLeft{-webkit-animation-name:fadeInLeft;animation-name:fadeInLeft}
@-webkit-keyframes fadeInLeft{from{opacity:0;-webkit-transform:translateX(50px)}to{opacity:1;-webkit-transform:none}}
@keyframes fadeInLeft{from{opacity:0;transform:translateX(50px)}to{opacity:1;transform:none}}