@charset "utf-8";

#atc02 .step{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:50px}
#atc02 .step li{padding:30px;border-radius:5px}
#atc02 .step li+li{position:relative}
#atc02 .step li+li:after{position:absolute;content:'';top:50%;left:-33px;width:42px;height:42px;border-radius:50px;box-shadow:0px 0px 10px rgba(0,0,0,.1);transform:translateY(-50%);background:url('./img/arrow.png') no-repeat center #fff}
#atc02 .step li .step-num{display:inline-block;border-radius:3px;padding:3px 10px;font-size:12px;font-weight:600;color:#111;background:#fff;font-family:var(--e-font)}
#atc02 .step li .step-num:before{display:inline-block;content:'';width:4px;height:4px;margin-right:8px;border-radius:5px;vertical-align:3px}
#atc02 .step li dl{font-family:var(--p-font)}
#atc02 .step li dl dt{margin:15px 0;font-size:20px;color:#111;font-family:var(--B-font)}
#atc02 .step li dl dd{font-size:14px;font-family:var(--M-font)}
#atc02 .step li dl dd:before{display:inline-block;content:'';width:3px;height:3px;margin-right:8px;border-radius:5px;vertical-align:3px;background:#777}
#atc02 .step .box01{background:#d6e8f6}
#atc02 .step .box01 .step-num:before{background:#89c0e6}
#atc02 .step .box02{background:#d0d4ec}
#atc02 .step .box02 .step-num:before{background:#6478ed}
#atc02 .step .box03{background:#c0e2dc}
#atc02 .step .box03 .step-num:before{background:#65e1cb}
#atc02 .step .box04{background:#4c5c81}
#atc02 .step .box04 .step-num:before{background:#25407f}
#atc02 .step .box04 dl{color:#fff}
#atc02 .step .box04 dl dt{color:#fff}
#atc02 .step .box04 dl dd:before{background:#fff}

#atc02 .banner-link{display:flex;align-items:center;height:280px;padding:0 60px;border-radius:5px;background-image:url('./img/bg.jpg');background-size:cover}
#atc02 .banner-link p{font-size:23px;font-weight:700;color:#fff;font-family:var(--B-font)}
#atc02 .banner-link span{font-size:15px;font-weight:500;color:#fff;opacity:.5}
#atc02 .banner-link a{border:none;color:rgba(255,255,255,.5);background:rgba(255,255,255,.2);transition:all .3s}
#atc02 .banner-link ul{width:100%}
#atc02 .banner-link li{display:flex;align-items:center;justify-content:space-between;padding:0 50px}
#atc02 .banner-link li+li{margin-top:30px;padding-top:30px;border-top:1px solid rgba(255,255,255,.1)}

#atc02 .banner-link a:hover{color:#fff;background:rgba(255,255,255,.5)}