@charset "utf-8";

#atc02{position:relative;width:100%;padding-bottom:100px;background-color:#f7f7f7}
#atc02:before{display:block;content:url(/sh_img/make24/include_02/img/light.png);position:absolute;right:95px;top:395px}
#atc02 .bg{position:absolute;top:0;left:0;right:0;z-index:0;height:395px;background:url(/sh_img/make24/include_02/img/bg.jpg) fixed bottom center no-repeat}
#atc02_wrap{position:relative;z-index:1;width:1100px;margin:0 auto}

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

/* 타이틀 */
#atc02_wrap .tit_area{padding-top:120px;margin-bottom:45px;text-align:center}
#atc02_wrap .tit_area p{margin-bottom:7px;font-size:22px;font-style:italic;letter-spacing:0;color:#fe924d;font-family:'Katibeh', cursive}
#atc02_wrap .tit_area h3{font-size:38px;font-weight:200;color:#fff;font-family:'Raleway', sans-serif}
#atc02_wrap .tit_area h3 span{font-weight:800}
#atc02_wrap .tit_area h3:after{display:block;content:"";width:32px;height:1px;margin:15px auto 0;background-color:#fe924d}
#atc02_wrap .tit_area.c_black{padding-top:100px}
#atc02_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 img, .about_us .cont{float:left;width:50%}
.about_us .cont{height:100%;font-size:15.2px;font-family:nanumgothic}
.about_us .cont a{display:block;height:100%;padding:45px 0 40px 50px;line-height:1.7;color:#777}
.about_us .cont .b_txt{margin-bottom:15px;font-size:30px;color:#222;font-family:notokr-demilight}
.about_us .cont .b_txt span{padding-right:2px;font-size:45px;color:#fe924d}

/* 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}
.our_project .box_l{overflow:hidden;float:left;width:550px}
.our_project .box_l .box04{width:550px;height:495px}
.our_project .box_r{overflow:hidden;float:right;width:550px}
.our_project .box_r > div{float:right;position:relative}
.our_project .box_r .box01{width:265px;height:495px;margin-left:10px}
.our_project .box_r .box02{width:265px;height:243px;margin-bottom:10px}
.our_project .box_r .box03{width:265px;height:242px}
.our_project .effect-box{overflow:hidden;position:relative;margin:0;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:34px}
.our_project .effect-box .cont .subj h4{font-size:24px;font-weight:200;transform:translateY(-20px);opacity:0;transition:all ease .3s;font-family:'Raleway', sans-serif}
.our_project .effect-box .cont .subj h4 p{font-size:16px;font-family:notokr-medium}
.our_project .effect-box .cont .subj h4 span{font-weight:800}
.our_project .effect-box .more_btn{display:inline-block;position:relative;padding-right:24px;margin-top:25px;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)}