@charset "utf-8";

#atc04 input:focus, #atc04 input:active, #atc04 textarea:focus, #atc04 button:active{ box-shadow:none!important;outline:none!important;border:none!important}

#atc04{position:relative;display:flex;height:100vh}

#atc04 .map_area{position:relative;width:482px;height:100vh}
#atc04 .map_area iframe{width:100%;height:100vh;filter:grayscale(1);transition:all .3s}
#atc04 .map_area iframe:hover{filter:none}
#atc04 .map_area a{position:absolute;bottom:0;left:0;width:100%;padding:40px 50px 30px;line-height:2.2;color:#fff;background:var(--primary);transition:all .3s}
#atc04 .map_area a span{font-size:26px;font-family:'Marcellus'}
#atc04 .map_area a  p{margin:10px 0 15px;line-height:1.8}
#atc04 .map_area a img{opacity:.2;transition:all .3s}

#atc04 .cs_area{width:75%;padding:7% 7% 5%}
#atc04 .bnr{display:flex;align-items:center;justify-content:flex-end;height:385px;padding-right:15%;background:url(./img/bg.jpg);background-size:cover}
#atc04 .bnr .top>span{font-weight:600;opacity:.6}
#atc04 .bnr .top p{display:flex;flex-wrap:wrap;gap:65px;font-size:25px}
#atc04 .bnr .top p span{position:relative;color:var(--second);font-family:'Marcellus'}
#atc04 .bnr .top p span:after{position:absolute;content:'';top:50%;right:-53px;width:40px;height:1px;background:#bfbebb;transform:translateY(-50%)}
#atc04 .bnr .top p b{color:var(--primary)}
#atc04 .bnr .btm{display:flex;align-items:center;margin-top:35px}
#atc04 .cir{display:flex;align-items:center;justify-content:center;width:100px;height:100px;margin-right:50px;border-radius:50%;font-size:17px;color:#fff;background:var(--second);font-family:'Marcellus'}
#atc04 .tel p{margin-bottom:10px;font-size:25px;color:var(--second);font-family:'Marcellus'}
#atc04 .tel ul{font-size:14px;line-height:1.3;color:#777}

#atc04 .cont_area{margin-top:80px}
#atc04 .cont_area p span{margin-right:15px;font-size:25px;font-weight:700;color:#111}

/*form*/
#atc04 .form_area{position:relative;margin-top:30px}
#atc04 .form_area ul{overflow:hidden}
#atc04 .form_area .m_input{position:relative;height:60px;margin-bottom:25px;padding:0 0 0 15px;border-bottom:1px solid #e1e1e1;line-height:58px}
#atc04 .form_area ul li:before{position:absolute;;content:'';top:50%;left:0;width:3px;height:3px;transform:translateY(-50%);background-color:#8c6f4f}
#atc04 .form_area ul .w30{border:0;padding:0}
#atc04 .form_area ul .w30:before{display:none}
#atc04 .form_area ul .msg{overflow:hidden;width:66%}
#atc04 .form_area ul li .input_g{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
#atc04 .form_area ul li label{display:inline-block;float:left;width:72px;cursor:pointer}
#atc04 .form_area ul li textarea{height:calc(100% - 36px);margin-top:18px}
#atc04 .form_area ul li .inc_input{width:100%;height:100%;font-size:14px;background:none;border:0;resize:none}
#atc04 .form_area ul .w100{width:100%}
#atc04 .form_area .btn_all{position:absolute;bottom:-5px;right:0;overflow:hidden}
#atc04 .form_area .prv_area{margin-top:5px;font-size:14px;text-align:right}
#atc04 .form_area .prv_area input{width:13px;height:13px;background-color:#fff;opacity:.5;cursor:pointer}
#atc04 .form_area .prv_area button{position:relative;border:0;font-weight:500;background:none;color:#111;line-height:15px;}
#atc04 .form_area .prv_area button:before{position:absolute;left:0;bottom:0;height:1px;width:100%;background-color:#fff;content:''}
#atc04 .form_area .prv_area label{color:#777}
#atc04 .form_area .btn_area input{width:372px;height:65px;border:none;background:none;transition:all .5s;font-size:16px;line-height:65px;font-weight:600;color:#fff;background:var(--primary)}

@media(hover:hover){
#atc04 .map_area a:hover{padding:50px;background:var(--second)}
#atc04 .map_area a:hover img{opacity:1}
#atc04 .form_area .btn_area input:hover{background:var(--second);color:#fff}
}

/* 반응형 [s] */
@media (max-width:1440px){
#atc04{display:flex;flex-wrap:nowrap;flex-direction:column}
#atc04 .map_area{display:flex;width:100%;height:auto}
#atc04 .map_area iframe{height:40vh}
#atc04 .map_area a{position:unset;display:flex;flex-wrap:wrap;justify-content:space-around;align-items:center;align-content:center;gap:20px;width:25%;padding:0;text-align:center}
#atc04 .map_area a p{margin:0;padding:0 10px;line-height:1.5;word-break:keep-all}
#atc04 .cs_area{display:flex;align-items:flex-end;justify-content:space-between;width:100%;height:60vh;padding:15px;gap:35px}
#atc04 .bnr{justify-content:center;width:35%;height:100%;padding-right:0;background-position:center}
#atc04 .bnr .inner{text-align:center}
#atc04 .bnr .top p{font-size:22px;justify-content:center}
#atc04 .bnr .btm{justify-content:center}
#atc04 .cont_area{width:62%;margin-top:0}
#atc04 .cont_area p{text-align:center}
#atc04 .cont_area p span{display:block;font-size:20px}
#atc04 .form_area{margin-top:10px}
#atc04 .form_area ul .msg{width:100%}
#atc04 .form_area .btn_all{position:unset}
#atc04 .form_area .btn_area input{width:100%}
}
@media (max-width:1024px){
#atc04 .cs_area{height:70vh}
#atc04 .map_area{height:auto}
#atc04 .map_area a{gap:10px}
#atc04 .map_area a span{font-size:20px;line-height:1.3}
#atc04 .bnr{padding:0 15px}
#atc04 .bnr .top p{gap:0;font-size:20px}
#atc04 .bnr .top p span:after{display:none}
#atc04 .bnr .btm{display:block;margin-top:15px}
#atc04 .cir{width:100%;height:40px;margin-right:0;margin-bottom:10px;border-radius:50px;font-size:15px}
#atc04 .cont_area .tit{font-size:14px;text-align:center;word-break:keep-all}
#atc04 .cont_area p span{margin-right:0}
#atc04 .form_area .m_input{height:50px;margin-bottom:10px;line-height:50px}
#atc04 .form_area ul li .input_g{grid-template-columns:repeat(1,1fr);gap:0}
#atc04 .form_area .btn_area input{height:55px;font-size:14px;line-height:55px}
}
@media (max-width:768px){
#atc04 .bnr{display:none}
#atc04 .bnr .top p{font-size:18px}
#atc04 .cont_area{width:100%}
#atc04 .map_area a p{font-size:14px}
#atc04 .cs_area{align-items:center}
}
@media (max-width:480px){
#atc04{height:150vh}
#atc04 .map_area a p{display:none}
#atc04 .map_area a span{font-size:15px}
#atc04 .map_area iframe{height:480px}
#atc04 .map_area{height:480px}
#atc04 .cs_area{height:auto;padding-bottom:50px}
#atc04 .cont_area .tit{display:none}
}
/* 반응형 [e] */