@charset "utf-8";

#main_bnr_wrap{width:100%;height:100vh;max-height:130rem;min-height:80rem;background:#000;overflow:hidden;position:relative}
#main_bnr_wrap .main_inner{max-width:144rem;width:100%;height:100%;margin:0 auto;position:relative;z-index:10}
#main_bnr_wrap:before{content:'';width:100%;height:100%;background:rgba(0,0,0,.5);position:absolute;top:0;left:0;opacity:0;transition:all .3s;z-index:2}
/*메인 텍스트 영역*/
#main_bnr_wrap .main_txt_box{width:calc(100% - 4rem);position:absolute;bottom:10rem;left:2rem}
#main_bnr_wrap .txt_box{left:-5rem;position:relative;opacity:0;transition:all 1s;display:flex;flex-wrap:wrap;align-items:center;gap:0 4rem}
#main_bnr_wrap .txt_box .tit{font-size:13rem;font-weight:normal;color:#fff;position:relative;font-family:'SangSangRock'}
#main_bnr_wrap .txt_box .tit:before{content:'';width:7.4rem;height:4rem;background:url(/hd/main_banner/pt.png) no-repeat center/cover;position:absolute;top:-3rem;right:-4rem}

#main_bnr_wrap .txt_box .txt{font-size:3.2rem;line-height:150%;color:#fff;font-family:'SangSangRock'}


/*메인 텍스트 하단 영역*/
#main_bnr_wrap .txt_bt{margin-top:4rem;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between}
#main_bnr_wrap .pager_area{overflow:hidden;display:flex;flex-wrap:wrap;align-items:center}
#main_bnr_wrap .pager_area .num_box{line-height:2rem;overflow:hidden;display:flex;flex-wrap:wrap;align-items:center}
#main_bnr_wrap .pager_area .num_box > span{display:block;width:2rem;font-size:1.6rem;font-weight:700;color:rgba(255,255,255,.9);opacity:.5;font-family:'Poppins'}
#main_bnr_wrap .pager_area .num_box .s_num{opacity:1}
#main_bnr_wrap .pager_area .num_box .timeline{width:22rem;height:2px;margin:0 1rem;background:rgba(255,255,255,.5);position:relative}
#main_bnr_wrap .pager_area .num_box .timeline .bar{width:0;height:2px;background:#fff;position:absolute;left:0;top:0;animation-name:timeline;animation-duration:4s;}
#main_bnr_wrap .pager_area .num_box .timeline .bar:before{content:'';width:4px;height:4px;background:#fff;position:absolute;right:0;top:-1px}
#main_bnr_wrap .pager_area .num_box .timeline.on .bar{animation-name:timeline;animation-duration:4s;}/*정지/재생시 애니메이션 재실행*/
@keyframes timeline {from{width:0}to{width:100%}}

#main_bnr_wrap .pager_area .btns{width:3rem;height:3rem;border-radius:3rem;margin-left:1rem;background:var(--pt-color2)}
#main_bnr_wrap .pager_area .btns button{width:100%;height:100%;border:0;box-shadow:none;background:none;cursor:pointer;position:relative}
#main_bnr_wrap .pager_area .btns button img{vertical-align:unset;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}
#main_bnr_wrap .pager_area .btns .play{display:none}

#main_bnr_wrap .main_txt_box .txt_bt{opacity:0;transition:all 1s}
#main_bnr_wrap .txt_bt .scroll_down{font-size:1.4rem;font-weight:600;color:#fff;display:flex;flex-wrap:wrap;align-items:center;font-family:'Poppins'}

#main_bnr_wrap .txt_bt .scroll_down .scroll-txt{display:inline-block; color:#fff;font-weight:700;letter-spacing:-.5px}
#main_bnr_wrap .txt_bt .scroll_down .scroll-txt em{font-style:normal;display:inline-block; animation: scroll-down-ani 2s ease-in-out 0s infinite; font-weight:500;}
#main_bnr_wrap .txt_bt .scroll_down .scroll-txt em:nth-child(1){animation-delay:1s;}
#main_bnr_wrap .txt_bt .scroll_down .scroll-txt em:nth-child(2){animation-delay:1.04s;}
#main_bnr_wrap .txt_bt .scroll_down .scroll-txt em:nth-child(3){animation-delay:1.08s;}
#main_bnr_wrap .txt_bt .scroll_down .scroll-txt em:nth-child(4){animation-delay:1.12s;}
#main_bnr_wrap .txt_bt .scroll_down .scroll-txt em:nth-child(5){animation-delay:1.16s;}
#main_bnr_wrap .txt_bt .scroll_down .scroll-txt em:nth-child(6){animation-delay:1.2s;}
#main_bnr_wrap .txt_bt .scroll_down .scroll-txt em:nth-child(7){animation-delay:1.24s;}
#main_bnr_wrap .txt_bt .scroll_down .scroll-txt em:nth-child(8){animation-delay:1.28s;}
#main_bnr_wrap .txt_bt .scroll_down .scroll-txt em:nth-child(9){animation-delay:1.32s;}
#main_bnr_wrap .txt_bt .scroll_down .scroll-txt em:nth-child(10){animation-delay:1.36s;}
#main_bnr_wrap .txt_bt .scroll_down .scroll-txt em:nth-child(11){animation-delay:1.4s;}

@keyframes scroll-icon-ani {0% {top:-1rem;opacity:0;}10% {top:-1rem;opacity:1;}32% {top:-1rem;opacity:1;}80% {top:4.3rem;opacity:1;}100% {top:4.3rem;opacity:0;}}
@keyframes scroll-down-ani {0% {opacity: 0;transform: translateY(-50%) rotateX(90deg)}20%,80% {opacity: 1;transform: translateY(0) rotateX(0)}100% {opacity: 0;transform: translateY(50%) rotateX(-90deg)}}


#main_bnr_wrap .txt_bt .scroll_down .mouse{width:2rem;height:3rem;margin-left:1rem;border-radius:3rem;border:1px solid rgba(255,255,255,.5);position:relative}
#main_bnr_wrap .txt_bt .scroll_down .mouse span{width:3px;height:5px;border-radius:3px;background:#fff;position:absolute;top:.5rem;left:50%;transform:translateX(-50%);animation: mouse 2s infinite;opacity:0}
@keyframes mouse{0%{top:.5rem;opacity:0}50%{top:1.1rem;opacity:1}100%{top:1.4rem;opacity:0}}

/*움직임효과*/
#main_bnr_wrap .main_txt_box.active .txt_box{left:0;opacity:1}
#main_bnr_wrap .main_txt_box.active .txt_bt{opacity:1;transition-delay:.3s}


/*메인 이미지 영역*/
#main_bnr_wrap .main_img{width:100%;height:100%;position:absolute;top:0;left:0}
#main_bnr_wrap .main_img .main_bg{width:100%;height:100%;position:relative;animation:main_bnr 25s linear infinite}
#main_bnr_wrap .main_img .main_bg01{background:url(/hd/main_banner/bg01.jpg) no-repeat center/cover}
#main_bnr_wrap .main_img .main_bg02{background:url(/hd/main_banner/bg02.jpg) no-repeat center/cover}
#main_bnr_wrap .main_img .main_bg03{background:url(/hd/main_banner/bg03.jpg) no-repeat center/cover}


@keyframes main_bnr{0%{transform:scale(1)} 50%{transform:scale(1.1)} 100%{transform:scale(1)}}




@media(max-width:1280px){
	#main_bnr_wrap{max-height:117rem;min-height:72rem}
	#main_bnr_wrap .txt_box .tit{font-size:11rem}
	#main_bnr_wrap .txt_box .txt{font-size:2.9rem}
}

@media(max-width:1024px){
	#main_bnr_wrap .txt_box .tit{font-size:9rem}
	#main_bnr_wrap .txt_box .txt{font-size:2.7rem}
}

@media(max-width:767px){
	#main_bnr_wrap{max-height:94rem;min-height:60rem}	
	#main_bnr_wrap:before{opacity:.7}
	
	#main_bnr_wrap .main_txt_box{text-align:center;bottom:auto;top:50%;transform:translateY(-50%)}
	#main_bnr_wrap .txt_box{justify-content:center;}
	#main_bnr_wrap .txt_box .tit{font-size:8.5rem}
	#main_bnr_wrap .txt_box .txt{width:100%;font-size:2.5rem}
	
	#main_bnr_wrap .txt_bt{justify-content:center;}	
	#main_bnr_wrap .txt_bt .scroll_down{width:100%;margin-top:1rem;justify-content:center}
}

@media(max-width:480px){
	#main_bnr_wrap{max-height:82rem;min-height:55rem}

	#main_bnr_wrap .txt_box .tit{font-size:8.2rem}
	#main_bnr_wrap .txt_box .txt{font-size:2.3rem}
	#main_bnr_wrap .txt_box .txt br{display:none}
	
	#main_bnr_wrap .pager_area .num_box .timeline{width:16rem}
}

@media(max-width:320px){
	#main_bnr_wrap .txt_box .tit{font-size:7.9rem}
}