@charset "utf-8";

#atc04{position:relative;width:92%;margin:0 auto;padding-bottom:100px;background-color:#f7f7f7}
#atc04:before{position:absolute;right:135px;top:411px;content:url(/sh_img/make24/include_04/img/atc04_pt.png);}
#atc04:after{position:absolute;left:135px;bottom:-200px;content:url(/sh_img/make24/include_04/img/atc04_pt.png);}
#atc04 .bg{position:absolute;top:0;left:0;right:0;z-index:0;height:395px;background:url(/sh_img/make24/include_04/img/bg.jpg) fixed bottom center no-repeat}
#atc04_wrap{position:relative;z-index:1;width:1100px;margin:0 auto}

@media (max-width:480px){
#atc04 .bg{background-position:center;background-attachment:inherit}
}

/* 타이틀 */
#atc04_wrap .tit_area{padding-top:120px;margin-bottom:45px;text-align:center}
#atc04_wrap .tit_area p{margin-bottom:7px;font-size:20px;letter-spacing:0;color:#fe924d;font-family:'notokr-regular'}
#atc04_wrap .tit_area h3{font-size:38px;font-weight:600;color:#fff;font-family: 'Montserrat', sans-serif;}
#atc04_wrap .tit_area h3 span{font-weight:400}
#atc04_wrap .tit_area h3:after{display:block;content:"";width:32px;height:1px;margin:15px auto 0;background-color:#fe924d}
#atc04_wrap .tit_area.c_black{padding-top:100px}
#atc04_wrap .tit_area.c_black h3{color:#222}

/* 인사말 */
.about_us{overflow:hidden;width:100%;height:375px;background-color:#fff;-webkit-box-shadow:18px 18px 36px 0px rgba(0,0,0,0.15);-moz-box-shadow:18px 18px 36px 0px rgba(0,0,0,0.15);box-shadow:18px 18px 36px 0px rgba(0,0,0,0.15)}
.about_us > div{width:50%;height:100%;float:left;} 

.about_us .l_cont{text-align:center;background:url(/sh_img/make24/include_04/img/l_cont_bg.png) center 50px no-repeat}
.about_us .r_cont{padding:70px 0 0 85px;box-sizing:border-box;background:url(/sh_img/make24/include_04/img/r_cont_bg.png) no-repeat}
.about_us .l_cont>img{margin-top:110px;}
.about_us .l_cont .l_cont_txt{margin-top:24px;font-size:15px;line-height:26px;color:#666;font-family:'notokr-regular'}
.about_us .l_cont .l_cont_txt>span{color:#c8ab94}
.about_us .l_cont .l_cont_txt .b_color{font-family:'notokr-medium'}

.about_us .r_cont h5{margin-bottom:13px;font-weight:600;font-size:33px;letter-spacing:-1px;color:#4e4e4e;font-family: 'Montserrat', sans-serif;}
.about_us .r_cont .r_cont_txt{font-size:15px;line-height:26px;color:#777}
.about_us .r_cont .more{display:block;margin-top:15px;font-size:14px;color:#c8ab94;}

/* fadeInDown  */
.animated{-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
.fadeInDown{-webkit-animation-name:fadeInDown;animation-name:fadeInDown;animation-delay:.3s}
@-webkit-keyframes fadeInDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeInDown{from{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}


/* viewmore 버튼 */
.about_us .cont .more_btn{display:inline-block;position:relative;padding-right:24px;margin-top:25px;font-size:13px;font-weight:700;color:#222;text-transform:uppercase;font-family:'Raleway', sans-serif}
.about_us .cont .more_btn .arr_wrap{position:absolute;top:0;right:0;bottom:0;width:15px}
.about_us .cont .more_btn .arr{display:inline-block;position:absolute;top:50%;left:0;width:0;height:1px;margin-top:-1px;background:#fe924d;transition:width ease .3s}
.about_us .cont .more_btn .arr:after, .about_us .cont .more_btn .arr:before{content:'';position:absolute;top:0;width:1px;height:0;background:#fe924d;transition:height ease .3s}	
.about_us .cont .more_btn .arr:before{right:-1px;transform:rotate(135deg);transform-origin:top left;top:0}
.about_us .cont .more_btn .arr:after{right:0;transform:rotate(45deg);transform-origin:top right;top:1px}
.about_us .cont:hover .arr{width:20px;transition-delay:0}
.about_us .cont:hover .arr:after,.about_us .cont a:hover .arr:before{height:6px;transition-delay:.3s}

/* 프로젝트 */
.our_project{overflow:hidden;width:1100px;}
.project_area01{overflow:hidden;float:left;}
.our_project .m0101{overflow:hidden;width:553px;margin-bottom:9px}
.our_project .m0101>div{width:272px;height:252px}
.our_project .m0101 .m01{float:left;}
.our_project .m0101 .m02{float:right;}
.our_project .m03{width:553px;height:252px;margin-top:9px;} 

.project_area02{overflow:hidden;float:left;margin-left:9px}
.our_project .m0201{overflow:hidden;width:323px;margin-bottom:9px}
.our_project .m0201>div{width:157px;height:252px;}
.our_project .m0201 .m04{float:left;}
.our_project .m0201 .m05{float:right;}
.our_project .m06{width:323px;height:252px;margin-top:9px;}

.project_area03{float:left;margin-left:9px}
.project_area03 .m07{width:200px;height:315px;margin-bottom:9px;}
.project_area03 .m08{width:200px;height:189px;}
			
.our_project .effect-box{overflow:hidden;position:relative;background:#000}
.our_project .effect-box a{display:block;z-index:10}
.our_project .effect-box img{opacity:1;transition:opacity 0.35s}
.our_project .effect-box .cont{position:absolute;top:0;left:0;width:100%;height:100%;color:#fff}
.our_project .effect-box .cont:before, .our_project .effect-box .cont:after{position:absolute;top:15px;right:15px;bottom:15px;left:15px;content:'';opacity:0;transition:all 0.35s}
.our_project .effect-box .cont:before{border-top:1px solid #fe924d;border-bottom:1px solid #fe924d;transform:scale(0,1)}
.our_project .effect-box .cont:after{border-right:1px solid #fe924d;border-left:1px solid #fe924d;transform:scale(1,0)}
.our_project .effect-box .cont .subj{position:absolute;bottom:40px;left:28px}
.our_project .effect-box .cont .subj h4{font-size:18px;transform:translateY(-20px);opacity:0;transition:all ease .3s;font-family:notokr-bold}
.our_project .effect-box .more_btn{display:inline-block;position:relative;padding-right:24px;margin-top:10px;font-size:13px;font-weight:700;opacity:0;transition:all ease .3s;
text-transform:uppercase;font-family:'Raleway', sans-serif}
.our_project .effect-box .more_btn .arr_wrap{position:absolute;top:0;right:0;bottom:0;width:15px}
.our_project .effect-box .more_btn .arr{display:inline-block;position:absolute;top:50%;left:0;width:0;height:1px;margin-top:-1px;background:#fe924d;transition:width ease .3s}
.our_project .effect-box .more_btn .arr:after, .our_project .effect-box .more_btn .arr:before{content:'';position:absolute;top:0;width:1px;height:0;background:#fe924d;
transition:height ease .3s}	
.our_project .effect-box .more_btn .arr:before{right:-1px;transform:rotate(135deg);transform-origin:top left;top:0}
.our_project .effect-box .more_btn .arr:after{right:0;transform:rotate(45deg);transform-origin:top right;top:1px}
.our_project .effect-box:hover .subj h4{transform:translateY(0);opacity:1}
.our_project .effect-box:hover .more_btn{opacity:1}
.our_project .effect-box:hover .arr{width:20px;transition-delay:0}
.our_project .effect-box:hover .arr:after, .our_project .effect-box:hover .arr:before{height:6px;transition-delay:.3s}
.our_project .effect-box:hover img{opacity:0.35}
.our_project .effect-box:hover .cont:before, .our_project .effect-box:hover .cont:after{opacity:1;transform:scale(1)}