@charset "utf-8";

#atc04{overflow:hidden;position:relative;width:100%;padding:100px 0}
#atc04_wrap{overflow:hidden;width:1000px;margin:0 auto;font-size:16px;color:#777}
#atc04 .tit_area{float:left;padding-top:15px}
#atc04 .tit_area h3{margin-bottom:20px;font-size:30px;font-weight:700;color:#222;font-family:'Montserrat','notokr-bold'}
#atc04 .tit_area .more_btn{overflow:hidden;display:block;position:relative;width:160px;margin-top:40px;border:1px solid #e9c435;font-size:13px;font-weight:700;line-height:54px;text-align:center;color:#222;-webkit-transition:color .4s;transition:color .4s;font-family:'Montserrat'}
#atc04 .tit_area .more_btn span{position:absolute;z-index:-1;display:block;width:0;height:0;border-radius:50%;background-color:#e9c435;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}
#atc04 .tit_area .more_btn:hover{color:#fff}
#atc04 .tit_area .more_btn:hover span{width:350px;height:350px}
#atc04 .img_area{overflow:hidden;float:right;width:76%;text-align:center}
#atc04 .img_area li{overflow:hidden;display:inline-block;width:235px;height:235px;margin:0 8px;border-radius:100%;background-position:center;background-repeat:no-repeat}
#atc04 .img_area li:last-child{margin-right:0}
#atc04 .img_area li a{display:block;position:relative;width:100%;height:100%}
#atc04 .img_area li .info{display:table;position:absolute;top:20px;left:20px;width:195px;height:195px;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out;transform-style:preserve-3d}
#atc04 .img_area li .info .back{display:table-cell;vertical-align:middle;width:100%;height:100%;border-radius:100%;background-color:rgba(0,0,0,0) ;backface-visibility:hidden;transform:rotate3d(0, 1, 0, 180deg);-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out}
#atc04 .img_area li .info h5{margin-bottom:5px;font-size:12px;color:#e9c435;letter-spacing:1px}
#atc04 .img_area li .info h4{color:#fff;letter-spacing:2px;font-size:15px;margin:0 15px}
#atc04 .img_area li:hover .info{transform:rotate3d(0, 1, 0, -180deg)}
#atc04 .img_area li:hover .info .back{background-color:rgba(0,0,0,.6)}