@charset "utf-8";

#atc04{display:flex;justify-content:space-between;width:92vw !important}
#atc04.on .map_area{opacity:1;transform:translateX(0)}
#atc04.on .ntc_area{opacity:1}
#atc04 .map_area{opacity:0;width:67vw;padding:11% 10% 0 15%;transform:translateX(-100px);transition:all .5s .8s}
#atc04 .map_area .tit_area{display:flex;align-items:center;justify-content:space-between}
#atc04 .map_area .tit h2{font-size:40px;font-weight:normal;color:var(--primary);text-transform:uppercase;font-family:var(--e-font)}
#atc04 .map_area .tit span{font-weight:600;color:#111;word-break:keep-all}
#atc04 .map_area ul{display:flex;gap:12px}
#atc04 .map_area ul a{display:flex;align-items:center;justify-content:center;width:130px;height:45px;font-size:14px;font-weight:600}
#atc04 .map_area ul a svg{opacity:0;width:17px;margin-left:-20px;transition:all .3s}
#atc04 .map_area ul .naver a{color:#fff;background:var(--primary)}
#atc04 .map_area ul .daum a{color:#111;background:#f2da00}

#atc04 .map_view iframe{overflow:hidden;width:845px;height:400px;margin:40px 0 30px}
#atc04 .map_info{display:flex;align-items:center;justify-content:space-between}
#atc04 .map_info .txt span{font-size:15px;color:#aaa}
#atc04 .map_info .txt span.margin{display:block;margin-top:10px}
#atc04 .map_info .txt p{font-size:17px;font-weight:600;color:#111}
#atc04 .map_info .num{display:flex;gap:10px;align-items:center}
#atc04 .map_info .num svg{width:17px}
#atc04 .map_info .num span{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50px;color:#fff;background:var(--primary)}
#atc04 .map_info .num p{font-size:30px;color:#111;font-family:var(--e-font)}

#atc04 .ntc_area{opacity:0;position:relative;display:flex;align-items:center;width:25vw;height:100vh;border-left:1px solid #e1e1e1;padding:0 30px;font-size:13px;transition:all .5s 1.2s}
#atc04 .ntc_area .ntc_info{display:flex;flex-direction:column;align-items:center;justify-content:center}
#atc04 .ntc_area .ntc_info .info01{display:flex;flex-direction:column;gap:5px;margin-top:40px;font-size:16px;color:#aaa;white-space:pre-line;word-break:keep-all}
#atc04 .ntc_area .ntc_info .info01 div{display:flex;align-items:flex-start;gap:10px}
#atc04 .ntc_area .ntc_info .info01 div span{display:inline-block;width:120px;padding-right:10px;font-weight:500;color:#222}
#atc04 .ntc_area .ntc_info .info01 div p{width:calc(100% - 120px)}
#atc04 .ntc_area .ntc_info .info02{margin:20px 0 30px;padding:0 20px;text-align:left}
#atc04 .ntc_area .ntc_info .info02 p{display:flex;align-items:flex-start;gap:5px;font-size:12px}
#atc04 .ntc_area .ntc_info ul{display:flex;justify-content:center;gap:10px}
#atc04 .ntc_area .ntc_info ul a{display:flex;align-items:center;justify-content:center;width:110px;height:40px;font-weight:600}
#atc04 .ntc_area .vdo a{color:#fff;background:var(--primary)}
#atc04 .ntc_area .evt a{color:var(--primary);background:#f2f2f2}
#atc04 .ntc_area .copy{position:absolute;bottom:50px;left:50%;width:100%;font-size:12px;text-align:center;text-transform:uppercase;transform:translateX(-50%);font-family:var(--e-font) var(--k-font)}
#atc04 .ntc_area .copy p{word-break:keep-all}
#atc04 .ntc_area .copy ul{display:flex;justify-content:center;gap:20px;margin-top:5px}
#atc04 .ntc_area .copy a{font-weight:500;color:#aaa;font-family:var(--e-font) var(--k-font);transition:all .3s}

/* 반응형 [s] */
@media(hover:hover){
#atc04 .map_area ul a:hover svg{opacity:1;margin-left:5px}
#atc04 .ntc_area .copy a:hover{color:#111}
}
@media (max-width:1800px){
#atc04 .map_area{padding:9% 5% 0}
#atc04 .map_view iframe{width:100%}
#atc04 .ntc_area img{width:74%}
}
@media (max-width:1640px){
#atc04 .map_view iframe{margin:20px 0}
#atc04 .map_area{padding:12% 5% 0}
#atc04 .ntc_area .ntc_info div{font-size:15px}
}
@media (max-width:1380px){
#atc04 .map_area{width:60vw;padding:13% 2.5% 0}
#atc04{width:96vw!important}
#atc04 .ntc_area{width:33vw}
#atc04 .ntc_area .ntc_info{padding:0 20px;margin-top:0}
#atc04 .ntc_area .ntc_info .info01{margin-top:15px}
#atc04 .ntc_area .ntc_info .info01 div p{font-size:15px}
}
@media (max-width:1150px){
#atc04 .ntc_area .ntc_info .info01 div{flex-direction:column;gap:0}
#atc04 .ntc_area .ntc_info .info01 div+div{margin-top:5px}
#atc04 .ntc_area .ntc_info .info01 div p{width:100%}
#atc04 .ntc_area .ntc_info .info01 div span{width:100%}
#atc04 .ntc_area .ntc_info{padding-top:90px}
}
@media (max-width:1110px){
#atc04 .map_area .tit h2{font-size:34px}
#atc04 .map_area{padding-top:17%}
#atc04 .ntc_area .ntc_info .info02{padding:0}

}
@media (max-width:1024px){
#atc04{flex-direction:column;margin:auto;width:95% !important}
#atc04 .map_area{opacity:1 !important;padding:0px;width:100%;transform:none}
#atc04 .map_area .tit_area{align-items:end}
#atc04 .map_area .tit h2{font-size:34px}
#atc04 .map_view iframe{height:340px}
#atc04 .map_info .txt span{font-size:14px}
#atc04 .map_info .txt p{font-size:16px}
#atc04 .map_info .num p{font-size:26px}
#atc04 .map_info .num span{width:38px;height:38px}
#atc04 .map_info .num svg{width:16px}
#atc04 .ntc_area{opacity:1 !important;flex-direction:column;align-items:center;padding:0px;margin-top:25px;width:100%;height:auto;border-left:none;border-top:1px solid #e1e1e1}
#atc04 .ntc_area .copy{position:static;transform:none;margin:40px 0 20px}
#atc04 .ntc_area .ntc_info{margin-top:50px;width:100%}
#atc04 .ntc_area .ntc_info div{margin:30px auto 0;width:90%;white-space:normal}
#atc04 .ntc_area img{width:initial}
#atc04 .ntc_area .ntc_info div{font-size:16px}
#atc04 .ntc_area .ntc_info .info01 div{flex-direction:row;margin-top:0}
#atc04 .ntc_area .ntc_info .info01 div span{width:120px}
#atc04 .ntc_area .ntc_info .info01 div p{width:calc(100% - 120px)}
}
@media (max-width:768px){
#atc04 .map_area .tit h2{font-size:28px}
#atc04 .map_area ul{gap:12px}
#atc04 .map_area ul a{width:110px;height:42px}
#atc04 .map_view iframe{margin:30px 0 20px;height:310px}
#atc04 .map_info .num p{font-size:23px}
#atc04 .map_info .num span{width:36px;height:36px}
#atc04 .map_info .num svg{width:15px}
#atc04 .ntc_area{margin-top:20px}
#atc04 .ntc_area .ntc_info{margin-top:40px}
#atc04 .ntc_area .ntc_info div{margin:25px auto 0;width:93%}
#atc04 .ntc_area .copy{margin:30px 0 15px}
}
@media (max-width:580px){
#atc04 .map_area .tit_area{flex-direction:column;align-items:center;text-align:center}
#atc04 .map_area .tit span{display:block;margin-top:8px}
#atc04 .map_area ul{margin-top:30px}
#atc04 .map_view iframe{margin:40px 0 20px}
}
@media (max-width:480px){
#atc04 .map_area .tit h2{font-size:23px}
#atc04 .map_area .tit span{margin-top:6px}
#atc04 .map_area ul{margin-top:22px}
#atc04 .map_area ul a{width:151px;height:40px;font-size:13px}
#atc04 .map_area ul a svg{opacity:1;margin-left:5px}
#atc04 .map_view iframe{margin:30px 0 20px;height:275px}
#atc04 .map_info{margin-bottom:10px;justify-content:center;text-align:center}
#atc04 .map_info .txt span{font-size:13px}
#atc04 .map_info .txt p{font-size:15px;word-break:keep-all}
#atc04 .map_info .num{display:none}
#atc04 .ntc_area{margin-top:0px}
#atc04 .ntc_area .ntc_info div{width:95%}
#atc04 .ntc_area .ntc_info img{width:240px}
#atc04 .ntc_area .ntc_info .info01 div{flex-direction:column}
#atc04 .ntc_area .ntc_info .info01 div p{width:100%}
}
@media (max-width:380px){
#atc04 .map_area .tit h2{font-size:19px}
#atc04 .map_info{flex-direction:column;align-items:center;text-align:center;margin-bottom:0px}
#atc04 .map_info .txt p{font-size:14px}
}
/* 반응형 [e] */