@charset "utf-8";

#atc04 .m_tit{margin-bottom:0 !important;padding-top:200px;height:500px;text-align:center;background:url('./img/inc04_bg.jpg') no-repeat center;background-size:cover}
#atc04 .m_tit h2{color:#fff}
#atc04 .puzz{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin:-100px auto 0 !important}
#atc04 .puzz li{position:relative;padding:50px;border-radius:13px}
#atc04 .puzz li .s_tit{display:flex;align-items:center;gap:15px;margin-bottom:20px}
#atc04 .puzz li .s_tit span{display:flex;align-items:center;justify-content:center;width:45px;height:45px;border-radius:50px;font-size:14px;font-weight:700}
#atc04 .puzz li .s_tit p{font-size:20px;font-weight:700}
#atc04 .puzz li:nth-child(odd){background:#E8E8E8}
#atc04 .puzz li:nth-child(odd) .s_tit p{color:#111}
#atc04 .puzz li:nth-child(odd) .s_tit span{color:#fff;background:var(--dark)}
#atc04 .puzz li:nth-child(even){background:var(--dark)}
#atc04 .puzz li:nth-child(even) .s_tit p{color:#fff}
#atc04 .puzz li:nth-child(even) .s_tit span{color:var(--dark);background:#fff}
#atc04 .puzz li:nth-child(even) .txt{color:#999}

#atc04 .puzz li:after{position:absolute;content:'';z-index:10;width:60px;height:60px;background-position:center;background-repeat:no-repeat}
#atc04 .puzz li.n1:after{top:50%;right:-58px;transform:translateY(-50%);background-image:url('./img/puzzle_w.png')}
#atc04 .puzz li.n2:after{top:50%;right:-58px;transform:translateY(-50%);background-image:url('./img/puzzle_d.png')}
#atc04 .puzz li.n3:after{bottom:-58px;left:50%;transform:translateX(-50%) rotate(90deg);background-image:url('./img/puzzle_w.png')}
#atc04 .puzz li.n4:after{top:-58px;left:50%;transform:translateX(-50%) rotate(-90deg);background-image:url('./img/puzzle_d.png')}
#atc04 .puzz li.n5:after{top:50%;left:-58px;transform:translateY(-50%) rotate(180deg);background-image:url('./img/puzzle_w.png')}
#atc04 .puzz li.n6:after{top:50%;left:-58px;transform:translateY(-50%) rotate(180deg);background-image:url('./img/puzzle_d.png')}

#atc04 .dot{margin:80px 0}
#atc04 .dot em{display:block;width:7px;height:7px;margin:0 auto;border-radius:50px;background:var(--primary)}
#atc04 .dot em+em{margin-top:10px}
#atc04 .dot em:nth-child(1){opacity:.2}
#atc04 .dot em:nth-child(2){opacity:.5}

#atc04 .mv{display:flex;justify-content:center;gap:20px}
#atc04 .mv li{overflow:hidden;width:470px;border-radius:13px;box-shadow:0px 0px 13px 0 rgba(0,0,0,.2)}
#atc04 .mv p{padding:20px 0;font-size:22px;font-weight:700;text-align:center;color:#fff;background:var(--primary)}
#atc04 .mv li div{padding-top:50px;text-align:center;background:#fff}

#atc04 .mark{margin-top:-200px;padding-top:350px;text-align:center;background:var(--dark) url('./img/graph.png') no-repeat center bottom}
#atc04 .mark .b_tit{margin-bottom:30px}
#atc04 .mark h2{color:var(--primary)}
#atc04 .mark a{display:inline-block;padding:13px 30px;border:1px solid var(--primary);border-radius:50px;font-weight:700;color:var(--primary);transition:all .3s}
#atc04 .mark .view{margin-top:70px}

@media(hover:hover){
#atc04 .mark a:hover{color:var(--dark);background:var(--primary)}
}
/* 반응형 [s] */
@media (max-width:1440px){
    #atc04 .m_tit{height:420px;padding-top:140px}
    #atc04 .puzz{padding:0 15px}
}
@media (max-width:1024px){
    #atc04 .puzz li{padding:40px}
    #atc04 .puzz li .s_tit{gap:10px;margin-bottom:5px}
    #atc04 .puzz li .s_tit span{width:35px;height:35px;font-size:12px}
    #atc04 .puzz li .s_tit p{font-size:18px}
    #atc04 .dot{margin:50px 0}
    #atc04 .mv p{padding:15px 0;font-size:18px}
    #atc04 .mv li{width:45%}
    #atc04 .mv li div img{width:350px}
    #atc04 .mark{padding-top:280px;background-size:90%}
    #atc04 .mark a{padding:8px 23px}
    #atc04 .mark .view{margin-top:50px}
    #atc04 .mark .view img{width:400px}
}
@media (max-width:768px){
    #atc04 .m_tit{height:340px;padding-top:100px}
    #atc04 .puzz{grid-template-columns:repeat(2,1fr);gap:15px}
    #atc04 .puzz li .s_tit p{font-size:16px}
    #atc04 .puzz li:nth-child(odd){background:var(--dark)}
    #atc04 .puzz li:nth-child(odd) .s_tit span{color:var(--dark);background:#fff}
    #atc04 .puzz li:nth-child(odd) .s_tit p{color:#fff}
    #atc04 .puzz li.clchg{background:#E8E8E8}
    #atc04 .puzz li.clchg .s_tit span{color:#fff;background:var(--dark)}
    #atc04 .puzz li.clchg .s_tit p{color:#111}
    #atc04 .puzz li:after{background-size:75% !important}
    #atc04 .puzz li.n1:after{right:-52px}
    #atc04 .puzz li.n2:after{top:unset;bottom:-50px;right:unset;left:50%;transform:translateX(-50%) rotate(90deg)}
    #atc04 .puzz li.n3:after{top:-50px;bottom:unset;transform:translateX(-50%) rotate(-90deg);background-image:url('./img/puzzle_d.png')}
    #atc04 .puzz li.n4:after{top:-50px;left:50%;transform:translateX(-50%)rotate(180deg);background-image:url('./img/puzzle_w.png')}
    #atc04 .puzz li.n4:after{top:50%;left:-50px;transform:translateX(0) translateY(-50%) rotate(180deg);background-image:url('./img/puzzle_w.png')}
    #atc04 .puzz li.n5:after{top:-50px;left:50%;transform:translateX(-50%) rotate(-90deg);background-image:url('./img/puzzle_w.png')}
    #atc04 .puzz li.n6:before{position:absolute;content:'';width:60px;height:60px;top:-50px;left:50%;transform:translateX(-50%)rotate(-90deg);background-image:url('./img/puzzle_d.png');background-size:75%;background-position:center;background-repeat:no-repeat}
    #atc04 .puzz li.n6:after{left:-50px}
    #atc04 .mv p{padding:10px 0;font-size:16px}
    #atc04 .mv li{width:40%}
    #atc04 .mv li div{padding-top:30px}
    #atc04 .mv li div img{width:97%}
    #atc04 .mark{padding-top:250px}
}
@media (max-width:480px){
    #atc04 .m_tit{height:290px}
    #atc04 .puzz{grid-template-columns:repeat(1,1fr);gap:8px;margin:-60px auto 0 !important}
    #atc04 .puzz li{padding:20px}
    #atc04 .puzz li .s_tit span{width:25px;height:25px}
    #atc04 .puzz li:after{display:none}
    #atc04 .puzz li.n6:before{display:none}
    #atc04 .puzz li.clchg{background:var(--dark)}
    #atc04 .puzz li.clchg .s_tit span{color:var(--dark);background:#fff}
    #atc04 .puzz li.clchg .s_tit p{color:#fff}
    #atc04 .puzz li:nth-child(odd){background:#E8E8E8}
    #atc04 .puzz li:nth-child(odd) .s_tit span{color:#fff;background:var(--dark)}
    #atc04 .puzz li:nth-child(odd) .s_tit p{color:var(--dark)}
    #atc04 .mv li{width:45%}
    #atc04 .mv p{font-size:14px}
    #atc04 .mark .b_tit{margin-bottom:10px}
    #atc04 .mark .view{margin-top:25px}
    #atc04 .mark .view img{width:300px}
    #atc04 .mark a{padding:4px 14px;font-size:12px}
    #atc04 .dot em{width:5px;height:5px}
}
@media (max-width:390px){
    #atc04 .dot{margin:35px 0}
    #atc04 .puzz li{padding:15px}
    #atc04 .puzz li .s_tit p{font-size:15px}
    #atc04 .mv{gap:10px}
}
/* 반응형 [e] */