@charset "utf-8";

#subBnr{overflow:hidden;position:relative;width:100%;height:420px;background:url(/sh_img/hd/sub_main_banner/sub_bg.jpg) center no-repeat;background-size:cover;transition:all .2s}
#subBnr:after{opacity:0;display:block;content:"";position:absolute;left:0;top:0;width:40%;height:100%;background-color:rgba(0,0,0,.5);transition:all 1s}
#subBnr.on:after{opacity:1;left:-50px}
#subBnr h3{display:none;font-size:16px;font-weight:normal;font-family:'notokr-medium'}
#subBnr .txt_area{position:relative;top:35%;z-index:1;max-width:1280px;width:100%;margin:0 auto;padding:0 40px;font-size:15px;letter-spacing:-.2px;color:#fff;font-family:'AppleSDGothicNeo'}
#subBnr .txt_area .btxt{font-size:32px;font-weight:600}
#subBnr .txt_area .stxt{margin:20px 0 90px}
#subBnr .txt_area span{color:rgba(255,255,255,.6)}
#subBnr .txt_area span i{padding:0 10px}

@media (max-width:1024px){
#subBnr{height:300px}	
#subBnr:after{width:calc(50% + 55px)}
#subBnr .txt_area{top:20%}
}
@media (max-width:768px){
#subBnr{height:260px;text-align:center}
#subBnr:after{width:100%}	
#subBnr.on:after{left:0}
#subBnr .txt_area .stxt{margin-bottom:35px}
}
@media (max-width:480px){
#subBnr{height:auto;padding:15px 0;border-top:1px solid #d1d1d1;border-bottom:1px solid #eee;color:#222;background:none}
#subBnr h3{display:block}
#subBnr:after{display:none}
#subBnr .txt_area{display:none}
}