@charset "utf-8";

/*-----------------main-----------------*/
/*main-swiper*/
#main_wrap{width: 100%; height: auto; overflow: hidden;}
#main_wrap .main_img{width: 100%; height: 100vh; height:  calc(var(--vh, 1vh) * 100);}
#main_wrap .main_text_wrap{position: absolute; top: 50%; left: 20%; margin-top: -130px; color: #fdfdfd;}
#main_wrap .main_top_text{position: relative; margin-top: -10px; padding-left: 100px; font-size: 17px !important; font-weight: 500 !important; }
#main_wrap .main_top_text::before{position: absolute; top: 14px; left: 0px; width: 80px; height: 1px; background-color: #fdfdfd; content: ""; display: block;}
#main_wrap .main_mid_text{margin: 15px 0 30px 0; font-size: 60px; font-weight: 700;}
#main_wrap .main_top_text, #main_wrap .main_bottom_text{font-size: 24px; font-weight: 100; line-height: 1.5;}

.main_swiper_next{right: 50px; width: auto; font-size: 18px; color: #fdfdfd; font-weight: 100; border-bottom: 1px solid #fdfdfd;}
.main_swiper_prev{left: 50px; width: auto; font-size: 18px; color: #fdfdfd; font-weight: 100; border-bottom: 1px solid #fdfdfd;}

#scroll_wrap{position: absolute; bottom: 30px; left: 50%; z-index: 9; margin-left: -46px; }
#scroll_wrap .scroll_text{margin-bottom: 10px; font-size: 18px; font-weight: 100; color: #fdfdfd;}
#scroll_wrap .ico_scroll_wrap{position: relative; left: 37.5px; width: 17px; height: 28px; border-radius: 8.5px; border: 1px solid #fdfdfd;}
#scroll_wrap .ico_scroll{position: absolute; top: 5px; left: 50%; margin-left: -2.5px; width: 4px; height: 4px; border-radius: 2px; background-color: #fdfdfd;
    animation-name: scroll;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-delay: 0.5s;
    animation-direction: normal;
}
@keyframes scroll{ 
    from{top: 5px;}
    to{top: 16px;}
}


/*-----------------------responsive-----------------------*/


/*pc*/

/*tab*/
@media all and (max-width:1199px) and (min-width:768px){
   
    /*-----------------main-----------------*/
    /*main-swiper*/
    #main_wrap .main_img{width: 100%; height: 85vh; height:  calc(var(--vh, 1vh) * 85);}
    #main_wrap .main_text_wrap{position: absolute; top: 50%; left: 0%; width: 100%; margin-top: -111.5px; color: #fdfdfd; text-align: center;}
    #main_wrap .main_top_text{padding-left: 0; font-size: 18px;}
    #main_wrap .main_top_text::before{display: none;}
    #main_wrap .main_mid_text{font-size: 48px;}
    #main_wrap .main_top_text, #main_wrap .main_bottom_text{font-size: 20px; line-height: 36px;}

    .main_swiper_next{right: 20px; font-size: 18px; }
    .main_swiper_prev{left: 20px; font-size: 18px; }

    #scroll_wrap{position: absolute; bottom: 30px; left: 50%; z-index: 9; margin-left: -46px; }
    #scroll_wrap .scroll_text{margin-bottom: 10px; font-size: 18px; font-weight: 100; color: #fdfdfd;}
    #scroll_wrap .ico_scroll_wrap{position: relative; left: 37.5px; width: 17px; height: 28px; border-radius: 8.5px; border: 1px solid #fdfdfd;}
    #scroll_wrap .ico_scroll{position: absolute; top: 5px; left: 50%; margin-left: -2.5px; width: 4px; height: 4px; border-radius: 2px; background-color: #fdfdfd;}

}

/*mobile*/
@media all and (max-width:767px){
   
    /*-----------------main-----------------*/
    /*main-swiper*/
    #main_wrap .main_img{height: 100vh; height:  calc(var(--vh, 1vh) * 100); }
    #main_wrap .main_text_wrap{top: 50%; left: 0%; width: 100%; text-align: center; margin-top: -99.5px; color: #fdfdfd;}
    #main_wrap .main_top_text{padding-left: 0px; font-size: 14px !important; font-weight: 300; margin-bottom: 10px}
    #main_wrap .main_top_text::before{display: none;}
    #main_wrap .main_mid_text{margin: -5px 0 30px 0; font-size: 30px; line-height: 1.2;}
    #main_wrap .main_bottom_text{font-size: 14px; line-height: 22px;}

    .main_swiper_next{top: inherit; bottom: 30px; right: 5%; width: auto; font-size: 12px; height: 25px;}
    .main_swiper_prev{top: inherit; bottom: 30px; left: inherit; right: 18%; width: auto; font-size: 12px; height: 25px;}

    #scroll_wrap{position: absolute; bottom: 30px; left: 50%; z-index: 9; margin-left: -30.5px; }
    #scroll_wrap .scroll_text{margin-bottom: 5px; font-size: 12px;}
    #scroll_wrap .ico_scroll_wrap{left: 23px; width: 15px; height: 26px; border-radius: 7.5px;}
    #scroll_wrap .ico_scroll{margin-left: -1.5px; width: 3px; height: 3px; border-radius: 1.5px;}

}