@charset "utf-8";

#atc04{position:relative;padding:130px 0}
#atc04:after{position:absolute;content:'';width:100%;bottom:0;height:60%;background:#eff0f2;z-index:-2}
#atc04 .inner{max-width:1200px;margin:0 auto;text-align:center}
#atc04 .en_tit{letter-spacing:0;line-height:17px;color:#125ad3;font-size:15px;font-weight:bold;font-family:'Poppins'}
#atc04 .ko_tit{padding:30px 0 50px;line-height:50px;letter-spacing:-2px;font-size:40px;font-family:'Noto Sans KR';font-weight:300}
#atc04 .ko_tit span{font-family:'Noto Sans KR';font-weight:700}  
#atc04 .video_area{display:grid;grid-template-columns:repeat(3, 1fr);grid-auto-rows:minmax(20px, auto);gap:20px}
#atc04 .video_area li{position:relative;overflow:hidden;border-radius:20px}
#atc04 .video_area li button{position:relative;width:100%;height:100%;border:none;background:#aaa}
#atc04 .video_area li button .youtube_img{position:relative;top:50%;transform:translateY(-50%);width:100%}
#atc04 .video_area li.empty{grid-column:span 3;padding:144.4px;font-size:15px;text-align:center}
#atc04 .video_area li .video_txt{display:none}
#atc04 .video_area li:nth-child(3){order:1}
#atc04 .video_area li:nth-child(2){order:4}
#atc04 .video_area li:nth-child(1){order:2;grid-row:span 2;width:520px}
#atc04 .video_area li:nth-child(1) button:before{position:absolute;content:"";left:0;top:0;z-index:1;width:100%;height:100%;transition:all .3s;background:none}
#atc04 .video_area li:nth-child(1) button .video_txt{display:block;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:10;margin-top:30px;font-size:17px;color:#fff;opacity:0;transition:all .3s;font-family:'Noto Sans KR';font-weight:500}
#atc04 .video_area li:nth-child(1) button .video_txt img{margin:23px auto}
#atc04 .video_area li:nth-child(1) .youtube_img{height:100%}
#atc04 .video_area li:nth-child(4){order:3}
#atc04 .video_area li:nth-child(5){order:5}
#atc04 .video_btn{margin:66px auto 0;display:block;width:210px;height:55px;line-height:55px;text-align:center;background:#fff;border-radius:50px;color:#125ad3;font-size:15px;font-family:'Noto Sans KR';font-weight:500;transition:all .2s}
#atc04 .video_btn span{margin-left:30px}

@media(hover:hover){
#atc04 .video_area li:nth-child(1) button:hover:before{background:rgba(000,000,000,.5)}
#atc04 .video_area li:nth-child(1) button:hover .video_txt{opacity:1;margin-top:0}
#atc04 .video_btn:hover{background:#125ad3;color:#fff}
}
@media(max-width:1240px){
#atc04 .inner{padding:0 20px}
}
@media(max-width:1024px){
#atc04{padding:80px 0 60px}
#atc04:after{height:55%}
#atc04 .ko_tit{padding-bottom:30px;font-size:36px;word-break:keep-all;line-height:1.3}
#atc04 .video_area{gap:15px}
#atc04 .video_area li{border-radius:12px}
#atc04 .video_area li:nth-child(3){width:420px}
#atc04 .video_btn{margin-top:30px}
}
@media(max-width:768px){
#atc04 .en_tit{font-size:14px}
#atc04 .ko_tit{padding:20px 0 30px;font-size:32px}
#atc04 .video_area{grid-template-columns:repeat(2, 1fr)}
#atc04 .video_area li:nth-child(3){order:1; width:auto;}
#atc04 .video_area li:nth-child(2){order:2}
#atc04 .video_area li:nth-child(1){order:3;grid-row:span 1;width:auto}
#atc04 .video_area li:nth-child(4){order:4}
#atc04 .video_area li:nth-child(5){order:5;grid-column:span 2;height:auto}
#atc04 .video_btn{width:170px;height:45px;line-height:45px}
#atc04 .video_btn span{margin-left:15px}
}
@media(max-width:480px){
#atc04{padding:60px 0}
#atc04 .ko_tit{font-size:26px}	
}