@charset "utf-8";

#atc02{height:100vh;margin:0 auto;background:url(./img/bg.jpg) no-repeat fixed;background-size:cover;transition:all .2s}
#atc02 ul{display:flex;height:100%}
#atc02 ul li{position:relative;width:calc(100% / 4)}
#atc02 ul li+li{border-left:1px solid rgba(255,255,255,.1)}
#atc02 ul li a{display:flex;flex-flow:column;height:100%}
#atc02 ul li a:before{content:"";display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(0deg, #f68a39a8, #000000a8);transition:all .5s;opacity:0}
#atc02 ul li:hover a:before{opacity:1}
#atc02 ul li .info{position:relative;z-index:1;display:flex;flex-flow:column;margin:auto 0;padding:0 60px;font-size:15px;color:#fff}
#atc02 ul li .info p{font-size:32px;font-weight:600}
#atc02 ul li .info .s_txt{margin-top:42px;font-size:18px;font-weight:400;white-space:pre-line}
#atc02 ul li .info span{margin-top:8px;font-size:18px;font-weight:600;font-family:'Play'}
#atc02 ul li .info .on{position:relative;opacity:0;margin-top:auto;font-size:18px;word-break:keep-all;transition:all .5s}
#atc02 ul li .info .on::before{position:absolute;width:30px;height:2px;background-color:#fff;content:"";left:0;top:-60px}
#atc02 ul li .info .on p{padding-left:20px;position:relative;font-size:18px;font-weight:400}
#atc02 ul li .info .on p:before{position:absolute;left:0;top:50%;transform:translateY(-50%);width:3px;height:3px;border-radius:100%;background-color:#fff;content:""}
#atc02 ul li:hover .info .on{opacity:1}
#atc02 ul li .info .txt{transition:all .5s}
#atc02 ul li .info .icon{margin-bottom:60px;transition:all .3s}
#atc02 ul li:hover .txt {transform:translateY(-55%)}
#atc02 ul li:hover .icon{transform:translateY(-55%);opacity:0}