@charset "utf-8";

#main_bnr_area{overflow:hidden;position:relative;width:100%;height:calc(100vh - 100px);background:url(./img/main_bg.jpg) #b3aeb8}
#main_bnr_area .main_img_wrap{position:relative;overflow:hidden;z-index:2;width:100%;height:100%}
#main_bnr_area .main_img_wrap .main_slider{position:relative}

/*메인텍스트*/
#main_bnr_area .main_slider .main_txt_box{position:absolute;z-index:3;left:130px;bottom:300px;width:40%}
#main_bnr_area .main_txt_box .big_tit{margin-bottom:20px;font-weight:700;font-size:107px;letter-spacing:-1px;line-height:1.06;color:#fff;text-shadow:5px 5px 10px rgba(0,0,0,.05);font-family:'Josefin Sans', sans-serif}
#main_bnr_area .main_txt_box .s_tit{font-weight:600;font-size:21px;letter-spacing:-1px;color:#fff;font-family:'Josefin Sans', sans-serif}
#main_bnr_area .main_txt_box .big_tit p{overflow:hidden;position:relative;width:100%}
#main_bnr_area .main_txt_box .big_tit p span{display:inline-block;transform:translateY(-100%);white-space:nowrap;width:100%}
#main_bnr_area .main_txt_box .big_tit .d1{animation-delay:.7s}
#main_bnr_area .main_txt_box .big_tit .d2{animation-delay:1s}
#main_bnr_area .txt_bg{position:absolute;z-index:1;top:50%;left:46%;transform:translate(-50%,-50%);width:100%;font-weight:700;font-size:25vw;letter-spacing:-35px;text-align:center;font-style:italic;color:#fff;opacity:0.05;font-family:'Josefin Sans', sans-serif}
#main_bnr_area .main_slider .half_bg{position:absolute;z-index:2;right:-100%;top:0;width:40%;height:100%;background:#6727a6;opacity:.2}
#main_bnr_area .main_slider .main_img{position:absolute;z-index:4;bottom:0;height:100%;opacity:0;pointer-events:none}
#main_bnr_area .main_slider .main_img img{width:100%;height:100%;object-fit:cover}
#main_bnr_area .slide01 .main_img{right:300px}
#main_bnr_area .slide02 .main_img{right:0}
#main_bnr_area .slide03 .main_img{right:0}
#main_bnr_area .main_img_wrap .swiper-slide{opacity:0  !important}
#main_bnr_area .main_img_wrap .swiper-slide-active{opacity:1  !important}

/*타임라인*/
#main_bnr_area .main_slider .timeline_area{position:absolute;left:130px;bottom:35px;width:535px;height:18px;font-weight:700;font-size:18px;line-height:18px;color:#fff;font-family:'Josefin Sans', sans-serif}
#main_bnr_area .main_slider .timeline_area .p_num{position:absolute;top:0;right:0;color:rgba(255,255,255,.6)}
#main_bnr_area .main_slider .timeline_area .timeline{position:absolute;left:40px;top:7px;max-width:446px;width:100%;height:1px;background:rgba(255,255,255,.2)}
#main_bnr_area .main_slider .timeline_area .timeline .fill{position:absolute;left:0;top:0;width:0;height:1px;background-color:rgba(255,255,255,.65)}

/*메인링크*/
#main_bnr_area .main_link{position:absolute;z-index:10;left:130px;bottom:145px}
#main_bnr_area .main_link > .link_box{float:left;display:inline-block;padding-right:75px}
#main_bnr_area .main_link > .link_box .tit{margin-bottom:10px;font-weight:600;font-size:16px;color:#fff;font-family:'Josefin Sans', sans-serif;word-break:keep-all;transition:all .3s}
#main_bnr_area .main_link > .link_box .txt{font-size:14px;color:rgba(255,255,255,.6);font-family:'notokr-regular';word-break:keep-all;transition:all .3s}
#main_bnr_area .main_link > .link_box:hover .tit{color:#6727a6}
#main_bnr_area .main_link > .link_box:hover .txt{color:#fff}

/*스크롤다운*/
#main_bnr_area .scroll{position:absolute;right:130px;bottom:377px;width:3px;height:138px;z-index:2}
#main_bnr_area .scroll:before{position:absolute;top:-75px;left:-45px;width:90px;content:'Scroll Down';font-weight:600;font-size:14px;letter-spacing:.5px;color:#fff;transform:rotate(-270deg);font-family:'Josefin Sans', sans-serif}
#main_bnr_area .scroll:after{position:absolute;top:0;content:'';width:1px;height:130px;background:rgba(255,255,255,.2)}
#main_bnr_area .scroll .scroll_shape{position:absolute;overflow:hidden;width:1px;height:1px;background:#fff;
-webkit-animation:arr 2.5s infinite linear;-ms-animation:arr 2.5s infinite linear;animation:arr 2.5s infinite linear}

@-webkit-keyframes arr{from{opacity:0;height:10%}10%{opacity:1;height:20%}100%{height:100%;opacity:0}}
@keyframes arr{from{opacity:0;height:10%}10%{opacity:1;height:20%}100%{height:100%;opacity:0}}

/*스크롤버튼*/
.main_btn_area{position:absolute;z-index:10;bottom:27px;right:130px;width:91px;height:42px}
.main_btn_area > div{float:left;width:42px;height:42px;border-radius:42px;border:1px solid rgba(255,255,255,.2);font-size:13px;line-height:42px;color:#fff;text-align:center;cursor:pointer;transition:all .3s}
.main_btn_area > div:hover{border-color:#fff}
.main_btn_area .button-next{float:right}

/*썸네일*/
#main_bnr_area .bnr_thumbs{position:absolute;bottom:100px;right:130px;z-index:10;width:478px;height:145px}
#main_bnr_area .bnr_thumbs .swiper-slide{cursor:pointer}
#main_bnr_area .bnr_thumbs .swiper-slide img{width:100%;height:100%;object-fit:cover}

/*슬라이드시 움직임*/
#main_bnr_area .main_img_wrap .swiper-slide-active .half_bg{animation-name:rightani;animation-duration:7s;animation-fill-mode:forwards}
@keyframes rightani {30% {right:0}70% {right:0}100% {right:-100%}}

#main_bnr_area .main_img_wrap .swiper-slide-active .main_img{animation-name:opimg;animation-duration:7s;animation-fill-mode:forwards}
@keyframes opimg {0% {opacity:0}20%{opacity:1}80%{opacity:1}100% {opacity:0}}

#main_bnr_area .main_img_wrap .swiper-slide-active  .big_tit p span{animation-name:txton;animation-duration:6s;animation-fill-mode:forwards}
@keyframes txton {0% {transform:translateY(-100%);opacity:0}30% {transform:translateY(0);opacity:1}60% {transform:translateY(0);opacity:1}100% {transform:translateY(-100%);opacity:0}}

#main_bnr_area .main_img_wrap .swiper-slide-active .timeline_area .timeline .fill{-webkit-animation:linefill 7s 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:100%}}

/* 반응형 [s] */
@media (max-width:1600px){
#main_bnr_area{height:calc(100vh - 40px)}
#main_bnr_area .main_slider .main_txt_box, #main_bnr_area .main_slider .timeline_area, #main_bnr_area .main_link{left:50px}
#main_bnr_area .bnr_thumbs{width:340px;height:120px}
#main_bnr_area .bnr_thumbs, .main_btn_area, #main_bnr_area .scroll{right:50px}
#main_bnr_area .slide01 .main_img{display:flex;justify-content:center;width:100%;right:50%;transform:translateX(50%)}
#main_bnr_area .slide01 .main_img img{width:auto}
#main_bnr_area .slide02 .main_img{right:-10%}
#main_bnr_area .slide03 .main_img{right:-10%}
#main_bnr_area .main_txt_box .big_tit{font-size:90px}
#main_bnr_area .scroll{right:40px;bottom:50%;transform:translateY(50%)}
}
@media (max-width:1400px){
#main_bnr_area{height:815px}
#main_bnr_area .main_txt_box .big_tit{font-size:72px}
#main_bnr_area .main_link > .link_box{padding-right:48px}
#main_bnr_area .main_slider .timeline_area{font-size:16px}
#main_bnr_area .bnr_thumbs{width:300px;height:100px}
#main_bnr_area .txt_bg{letter-spacing:-20px}
}
@media (max-width:1200px){
#main_bnr_area{height:730px}
#main_bnr_area .main_slider .main_txt_box, #main_bnr_area .main_slider .timeline_area, #main_bnr_area .main_link{left:24px}
#main_bnr_area .bnr_thumbs, .main_btn_area, #main_bnr_area .scroll{right:24px}
#main_bnr_area .scroll{height:110px}
#main_bnr_area .scroll:after{height:110px}
#main_bnr_area .scroll:before{top:-55px;font-size:13px}
#main_bnr_area .main_slider .main_txt_box{bottom:50%;transform:translateY(50%)}
#main_bnr_area .main_txt_box .big_tit{margin-bottom:12px;font-size:62px}
#main_bnr_area .main_txt_box .s_tit{font-size:18px}
#main_bnr_area .bnr_thumbs{width:260px;height:80px}
#main_bnr_area .main_link > .link_box .tit{margin-bottom:6px;font-size:15px}
#main_bnr_area .main_link > .link_box .txt{font-size:13px}
#main_bnr_area .main_slider .timeline_area{max-width:380px;width:100%}
#main_bnr_area .main_slider .timeline_area .timeline{max-width:300px}
}
@media (max-width:1024px){
#main_bnr_area{display:flex;flex-direction:column;align-items:center;height:auto}
#main_bnr_area .main_slider .main_txt_box{position:static;transform:none;display:flex;flex-direction:column;align-items:center;width:100%;padding:40px 20px 26px;text-align:center;background-color:rgba(255,255,255,0.4)}
#main_bnr_area .main_slider .main_img{position:static;order:-1;width:100%;height:450px}
#main_bnr_area .slide01 .main_img{transform:none}
#main_bnr_area .slide02 .main_img, #main_bnr_area .slide03 .main_img{justify-content:flex-end}
#main_bnr_area .main_slider .timeline_area{position:static;display:flex;align-items:center;justify-content:center;gap:20px;max-width:none;padding:0 15px 40px;background-color:rgba(255,255,255,0.4);font-size:15px}
#main_bnr_area .main_slider .timeline_area .timeline{position:relative;left:unset;top:unset;max-width:225px}
#main_bnr_area .main_slider .timeline_area .p_num{position:static}
.main_btn_area{position:static;display:flex;justify-content:center;gap:16px;width:100%;margin:30px 0}
#main_bnr_area .main_link{position:static;display:flex;justify-content:center;gap:60px;width:100%;margin-bottom:30px;padding:0 15px}
#main_bnr_area .main_link > .link_box{display:flex;flex-direction:column;align-items:center;padding-right:0;text-align:center}
#main_bnr_area .main_link > .link_box .tit{margin-bottom:2px}
#main_bnr_area .main_txt_box .big_tit{margin-bottom:12px;font-size:54px}
#main_bnr_area .main_txt_box .s_tit{font-size:17px}
#main_bnr_area .bnr_thumbs{position:static;order:1}
#main_bnr_area .main_img_wrap .swiper-slide{display:flex;flex-direction:column;align-items:center}
#main_bnr_area .main_slider .half_bg{z-index:-1;width:50%;height:64.5%}
#main_bnr_area .main_slider .main_img{display:flex}
#main_bnr_area .main_slider .main_img img{width:auto}
#main_bnr_area .bnr_thumbs{width:100%;margin-bottom:20px}
#main_bnr_area .bnr_thumbs .swiper-slide{width:130px}
#main_bnr_area .txt_bg{top:38%}
#main_bnr_area .scroll{display:none}
}
@media (max-width:768px){
#main_bnr_area .main_slider .main_img{height:350px}
#main_bnr_area .main_slider .main_txt_box{padding:34px 20px 24px}
#main_bnr_area .main_txt_box .big_tit{font-size:38px}
#main_bnr_area .main_txt_box .s_tit{font-size:16px}
#main_bnr_area .main_slider .timeline_area{padding-bottom:34px;font-size:14px}
#main_bnr_area .main_slider .timeline_area .timeline{max-width:180px}
#main_bnr_area .main_slider .half_bg{height:63.5%}
#main_bnr_area .txt_bg{top:28%;letter-spacing:-14px}
}
@media (max-width:480px){
#main_bnr_area .main_slider .main_img{height:315px}
#main_bnr_area .main_txt_box .big_tit{margin-bottom:6px;font-size:28px}
#main_bnr_area .main_txt_box .s_tit{font-size:14px}
#main_bnr_area .main_slider .main_txt_box{padding:26px 15px 20px}
#main_bnr_area .main_slider .timeline_area{padding-bottom:26px;font-size:13px}
#main_bnr_area .main_slider .timeline_area .timeline{max-width:150px}
.main_btn_area{margin:22px 0}
#main_bnr_area .main_link{flex-direction:column;align-items:center;gap:20px;margin-bottom:22px}
#main_bnr_area .main_link > .link_box .tit{font-size:14px}
.main_btn_area > div{width:40px;height:40px;line-height:40px}
#main_bnr_area .main_slider .half_bg{height:67.5%}
}
@media (max-width:390px){
#main_bnr_area .bnr_thumbs{display:none}
}
/* 반응형 [e] */