@charset "utf-8";

/*bg*/
#atc04{position:relative}
#atc04:before{position:absolute;bottom:0;left:0;height:527px;width:100%;background:url(./img/atc04-bg.png) no-repeat center;content:'';z-index:-1}

/*그룹*/
#atc04 .atc04_area{overflow:hidden;max-width:1200px;margin:0 auto;padding-bottom:130px}
#atc04 .atc04_area .left{float:left;margin-right:145px;opacity:0;-webkit-transform:translate(20px,20px);-ms-transform:translate(20px,20px);transform:translate(20px,20px)}
#atc04 .atc04_area .right{float:left;padding-top:70px;opacity:0;-webkit-transform:translate(-20px,-20px);-ms-transform:translate(-20px,-20px);transform:translate(-20px,-20px)}
#atc04 .atc04_area .right .tit_area{font-weight:700;margin-bottom:42px;color:#5d695d}
#atc04 .atc04_area .right .tit_area span{display:block;font-size:14px;margin-bottom:10px}
#atc04 .atc04_area .right .tit_area p{font-size:32px}
#atc04 .atc04_area a{overflow:hidden;display:block}
#atc04 .atc04_area img{-webkit-transition:all .6s;transition:all .6s}
#atc04 .atc04_area .left a{width:563px;height:512px}
#atc04 .atc04_area .right a{width:415px;height:390px}

/*내용*/
#atc04 .atc04_area .txt_area{padding:40px 0 0 47px}
#atc04 .atc04_area .txt_area .tit{margin-bottom:16px;font-size:24px;color:#fff;font-family:'notokr-regular'}
#atc04 .atc04_area .txt_area .en{margin-bottom:12px;font-size:14px;font-weight:500;color:#fff}
#atc04 .atc04_area .txt_area .txt{font-size:15px;color:rgba(255,255,255,0.5);font-family:'notokr-regular';white-space:pre-line;word-break:keep-all}

/* 반응형 [s] */
@media (hover:hover){
#atc04 .atc04_area a:hover img{transform:scale(1.03)}
}
@media (max-width:1380px){
#atc04 .atc04_area{display:flex;gap:140px;max-width:unset;width:95%}
#atc04 .atc04_area .left{float:none;margin-right:0px;width:calc(55% - 70px)}
#atc04 .atc04_area .left a{width:100%}
#atc04 .atc04_area .left a img{width:100%;height:100%;object-fit:cover}
#atc04 .atc04_area .right{float:none;width:calc(45% - 70px)}
#atc04 .atc04_area .right a{width:100%}
#atc04 .atc04_area .right a img{width:100%;height:100%;object-fit:cover}
}
@media (max-width:1024px){
#atc04 .atc04_area{gap:60px;padding-bottom:110px}
#atc04 .atc04_area .txt_area{padding:30px 0 0 25px}
#atc04 .atc04_area .txt_area .tit{margin-bottom:10px;font-size:20px}
#atc04 .atc04_area .txt_area .en{margin-bottom:6px}
#atc04 .atc04_area .txt_area .txt{font-size:14px;white-space:normal}
#atc04 .atc04_area .left{width:calc(55% - 30px)}
#atc04 .atc04_area .left a{height:470px}
#atc04 .atc04_area .right{width:calc(45% - 30px)}
#atc04 .atc04_area .right a{height:360px}
#atc04 .atc04_area .right .tit_area{margin-bottom:30px}
#atc04 .atc04_area .right .tit_area span{margin-bottom:5px}
#atc04 .atc04_area .right .tit_area p{font-size:28px}
}
@media (max-width:768px){
#atc04:before{height:425px}
#atc04 .atc04_area{gap:30px;padding-bottom:100px}
#atc04 .atc04_area .txt_area{padding:25px 0 0 20px}
#atc04 .atc04_area .txt_area .tit{font-size:18px}
#atc04 .atc04_area .txt_area .en{font-size:13px}
#atc04 .atc04_area .txt_area .txt{font-size:13px}
#atc04 .atc04_area .left{width:calc(55% - 15px)}
#atc04 .atc04_area .right{width:calc(45% - 15px)}
#atc04 .atc04_area .right .tit_area p{font-size:25px}
}
@media (max-width:480px){
#atc04{background-color:rgb(118,129,119 , 0.8)}
#atc04:before{display:none}
#atc04 .atc04_area{flex-direction:column-reverse;gap:12px;padding-bottom:70px}
#atc04 .atc04_area .txt_area{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);padding:0px;width:95%;text-align:center}
#atc04 .atc04_area .txt_area .txt{color:rgb(255 ,255, 255, 0.7)}
#atc04 .atc04_area .right{width:100%}
#atc04 .atc04_area .right .tit_area{display:flex;align-items:center;gap:15px;margin-bottom:20px;color:#fff}
#atc04 .atc04_area .right .tit_area span{margin-bottom:0px;font-size:13px}
#atc04 .atc04_area .right .tit_area p{font-size:22px}
#atc04 .atc04_area .right a{height:265px}
#atc04 .atc04_area .right a img{filter:brightness(0.6)}
#atc04 .atc04_area .right .txt_area{top:67%}
#atc04 .atc04_area .left{width:100%}
#atc04 .atc04_area .left a{height:265px}
#atc04 .atc04_area .left a img{filter:brightness(0.6)}
}
@media (max-width:380px){
#atc04 .atc04_area{padding-bottom:60px}
#atc04 .atc04_area .txt_area .tit{margin-bottom:5px;font-size:16px}
#atc04 .atc04_area .right{padding-top:60px}
#atc04 .atc04_area .right .tit_area{margin-bottom:20px}
#atc04 .atc04_area .right .tit_area p{font-size:19px}
#atc04 .atc04_area .right a{height:235px}
}
/* 반응형 [e] */