@charset "utf-8";

#main_bnr_area{width:100%;height:856px}
#main_bnr_area .half_box{position:absolute;left:-10%;top:0;width:50%;height:856px;background:#111f30;opacity:0}
#main_bnr_area .img_box{position:absolute;right:-10%;top:100px;width:75%;height:802px;background:#fff;opacity:0}

/*텍스트박스*/
#main_bnr_area .half_box .txt_box{position:absolute;z-index:10;top:150px;left:100px;width:540px;height:456px;padding-left:60px;opacity:0;background:url(/sh_img/index/main_banner/txt_box_bg.jpg) no-repeat}
#main_bnr_area .half_box .txt_box .box_tit{position:relative;display:inline-block;margin-top:59px;font-size: 39px;line-height: 59px;color:#333;font-family:'notokr-bold'}
#main_bnr_area .half_box .txt_box .box_tit .co_01{color:#2665aa}
#main_bnr_area .half_box .txt_box .box_tit .co_02{color:#40b0c1}
#main_bnr_area .half_box .txt_box .box_tit:before{position:absolute;right:-30px;top:-4px;content:'';width:11px;height:11px;border-radius:11px;background:#2665aa}
#main_bnr_area .half_box .txt_box .box_txt{margin-top:20px;font-size: 20px;color: #2665aa;line-height: 30px;font-family: 'notokr-bold';}
#main_bnr_area .half_box .txt_box .more_btn{display:block;margin-top:38px;font-size:14px;color:#8c8c8c;font-family: 'Rozha One', serif}

/*페이지 숫자*/
#main_bnr_area .half_box .bnr_num{position:absolute;z-index:10;left:160px;bottom:122px;font-size:16px;font-style:italic;color:#fff;font-family:'Rozha One', serif}
#main_bnr_area .half_box .bnr_num .now_num{float:left;display:inline-block}
#main_bnr_area .half_box .bnr_num .now_num li{display:none}
#main_bnr_area .half_box .bnr_num .now_num li.on{display:block}
#main_bnr_area .half_box .bnr_num .f_num{position:relative;display:inline-block;padding-left:15px;font-size:14px;color:rgba(255,255,255,.5)}
#main_bnr_area .half_box .bnr_num .f_num:before{position:absolute;content:'';left:8px;top:8px;width:1px;height:5px;transform:rotate(45deg);background:rgba(255,255,255,.3)}

/*컨트롤*/
#main_bnr_area .pager_area{position:absolute;z-index:10;left:662px;bottom:122px;width:95px;font-style:italic}
#main_bnr_area .pager_area li{display:inline-block;font-size:15px;color:rgba(255,255,255,.5);cursor:pointer;font-family:'Rozha One', serif}
#main_bnr_area .pager_area li:hover{color:#fff}
#main_bnr_area .pager_area .prev{margin-right:20px}

/*이미지박스*/
#main_bnr_area .img_box li{position:absolute;overflow:hidden;width:100%;height:100%;opacity:0;transition:all .5s}
#main_bnr_area .img_box .on{opacity:1}
#main_bnr_area .img_box li img{transform:scale(1.3);transition:all 1s}
#main_bnr_area .img_box .on img{transform:scale(1)}

/*라인*/
#main_bnr_area .half_box .line_area{position:absolute;z-index:1;left:0;top:0;width:100%;height:100%}
#main_bnr_area .half_box .line_area .line1{position:absolute;top:100px;width:100%;height:1px;background:rgba(255,255,255,.15)}
#main_bnr_area .half_box .line_area .line2{position:absolute;top:0;left:100px;width:1px;height:100%;background:rgba(255,255,255,.15)}
#main_bnr_area .half_box .line_area .timeline{position:absolute;bottom:100px;width:750px;height:1px;background:rgba(255,255,255,.15)}

/* 타임라인 */
#main_bnr_area .half_box .line_area .timeline .fill{position:absolute;left:100px;top:0;width:0;height:1px;background-color:rgba(255,255,255,.65)}
#main_bnr_area .half_box .line_area .timeline .fill.on{-webkit-animation:linefill 5.4s cubic-bezier(0.165, 0.840, 0.440, 1.000);animation:linefill 5.4s cubic-bezier(0.165, 0.840, 0.440, 1.000)}
@keyframes linefill{from{width:0}to{width:650px}}