@charset "utf-8";

#atc06{overflow:hidden}
#atc06 .b_tit{padding-top:250px;text-align:center}

#atc06 h3{margin-bottom:50px;padding-top:50px;font-size:35px;font-weight:700;color:var(--primary);text-align:center}

#atc06 .check{padding:100px 0;background:#f5f5f5}
#atc06 .check .inner{position:relative;display:grid;grid-template-columns:repeat(2,1fr);gap:100px}
#atc06 .check .inner:after{position:absolute;content:'';top:50%;left:50%;width:180px;height:180px;background:url('./img/change.png') no-repeat;background-size:100%;transform:translate(-50%, -50%)}
#atc06 .check dl{position:relative;z-index:10;padding:40px 50px;border-radius:13px;background:#fff}
#atc06 .check dt{display:flex;gap:10px;margin-bottom:20px;font-size:25px;font-weight:700}
#atc06 .check dt span{display:flex;align-items:center;justify-content:center;width:42px;height:42px;border-radius:50px;}
#atc06 .check dt svg{color:#fff}
#atc06 .check dd{font-size:22px;font-weight:700}
#atc06 .check .point{color:#999}
#atc06 .check .point dt span{background:#999}
#atc06 .check .point dd span{color:#111}
#atc06 .check .solution{color:#111}
#atc06 .check .solution dt span{background:var(--primary)}
#atc06 .check .solution dd span{color:var(--primary)}

#atc06 .flow{height:100vh;background:var(--dark) url('./img/bg.jpg') no-repeat bottom}
#atc06 .flow .scroll{display:flex;align-items:center;width:max-content;height:100vh;padding:100px 20%}
#atc06 .flow>div{min-width:100vw}
#atc06 .flow .show{display:flex;flex-direction:column;width:90vw}
#atc06 .flow .show div{display:inline-block}
#atc06 .flow .show div:nth-child(1){margin-left:3px}
#atc06 .flow .ptf{display:flex;align-items:center;min-width:100vw}
#atc06 .flow .ptf ul{display:flex;gap:150px}
#atc06 .flow .ptf li{overflow:hidden;border-radius:30px}
#atc06 .flow .ptf li a{display:block}
#atc06 .flow a.more{display:block;width:200px;padding:15px 0;border-radius:5px;font-size:20px;font-weight:600;color:#fff;text-align:center;background:rgba(255,255,255,.1);transition:all .3s}
#atc06 .link{background:#f5f5f5}
#atc06 .link ul{display:grid;grid-template-columns:repeat(2,1fr);border-left:1px solid #e1e1e1;border-right:1px solid #e1e1e1}
#atc06 .link ul li+li{border-left:1px solid #e1e1e1}
#atc06 .link a{display:flex;align-items:center;justify-content:space-between;height:200px;padding:0 70px;transition:all .3s}
#atc06 .link dt{margin-bottom:10px;font-size:22px;font-weight:700;color:#111}
#atc06 .link dd{opacity:.5}
#atc06 .link span{display:flex;align-items:center;justify-content:center;width:62px;height:62px;border-radius:50px;color:#fff;background:var(--dark)}
#atc06 .link a:hover{background:#ddd}

#atc06 .dot{display:flex;gap:10px;margin:0 10vw}
#atc06 .dot em{display:block;width:12px;height:12px;margin:0 auto;border-radius:50px;background:var(--primary)}
#atc06 .dot em:nth-child(1){opacity:.2}
#atc06 .dot em:nth-child(2){opacity:.5}

@media(hover:hover){
#atc06 .flow a.more:hover{color:var(--dark);background:var(--primary)}
}
/* 반응형 [s] */
@media (max-width:1440px){
    #atc06 .flow .show .n1 img{width:500px}
    #atc06 .flow .show .n2 img{width:1060px}
    #atc06 .flow .ptf img{width:350px}
}
@media (max-width:1024px){
    #atc06 .b_tit{padding-top:100px}
    #atc06 h3{padding-top:0;margin-bottom:30px;font-size:25px}
    #atc06 .check{padding:50px 0}
    #atc06 .check .inner{gap:70px;padding:0 15px}
    #atc06 .check .inner:after{width:130px;height:130px}
    #atc06 .check dl{padding:30px}
    #atc06 .check dt{align-items:center;margin-bottom:10px;font-size:22px}
    #atc06 .check dt span{width:30px;height:30px}
    #atc06 .check dt svg{width:18px}
    #atc06 .check dd{font-size:18px}
    #atc06 .link dl{width:250px}
    #atc06 .link dt{font-size:18px}
    #atc06 .link a{padding:0 40px}
    #atc06 .link span{width:40px;height:40px;font-size:17px}
    #atc06 .flow .show{width:100vw}
    #atc06 .flow .ptf{padding-left:250px}
    #atc06 .flow a.more{font-size:18px}
}
@media (max-width:768px){
    #atc06 h3{font-size:20px}
    #atc06 .check{padding:35px 0}
    #atc06 .check .inner{grid-template-columns:repeat(1,1fr);gap:50px}
    #atc06 .check .inner:after{transform:translate(-50%, -50%) rotate(90deg);width:100px;height:100px}
    #atc06 .check dl{padding:22px;text-align:center}
    #atc06 .check dt{justify-content:center;font-size:20px}
    #atc06 .check dd{font-size:16px}
    #atc06 .link ul{grid-template-columns:repeat(1,1fr)}
    #atc06 .link dl{width:80%}
    #atc06 .link dt{margin-bottom:0;font-size:16px}
    #atc06 .link ul li+li{border-left:none;border-top:1px solid #e1e1e1}
    #atc06 .link a{height:auto;padding:30px}
    #atc06 .dot em{width:7px;height:7px}
    #atc06 .flow .show{width:50%}
    #atc06 .flow a.more{width:150px;padding:10px 0;font-size:17px}
    #atc06 .flow .ptf{min-width:auto;width:100%;padding-left:200px}
}
@media (max-width:480px){
    #atc06 .b_tit{padding-top:70px}
    #atc06 h3{padding:0 15px;font-size:17px}
    #atc06 .check dt{gap:5px;font-size:16px}
    #atc06 .check dt span{width:25px;height:25px}
    #atc06 .check dt svg{width:13px;stroke-width:3px}
    #atc06 .check dd{font-size:15px}
    #atc06 .flow .show .n1 img{width:450px}
    #atc06 .flow .show .n2 img{width:970px}
    #atc06 .flow .ptf img{width:325px}
    #atc06 .link span{width:35px;height:35px;font-size:15px}
    #atc06 .link a{padding:25px}
    #atc06 .flow a.more{font-size:15px}
    
}
@media (max-width:390px){
    #atc06 .check dt{font-size:15px}
    #atc06 .check dd{font-size:14px}
    #atc06 .link dt{font-size:15px}
    #atc06 .link dd{line-height:1.5}
    #atc06 .flow a.more{width:100px;font-size:13px}
}
/* 반응형 [e] */