
/*Content CSS*/
#main_vis{position: relative; z-index: 2; width: 100%; height: 100vh; min-height: 800px; max-height: 1000px; overflow: hidden; display: flex; align-items: flex-end; justify-content: center;}
#main_vis .bg{position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 100%; height: 100%; background: url('../img/main1.jpg') 50% / cover no-repeat; animation: visualScale 3s ease-out forwards; z-index: -1;}

/* font-style */
#main_vis .fs_37{font-size: 37px; line-height: 1.43; letter-spacing: -.74px;}

/* main_inner */
#main_vis .main_inner{width: 100%; max-width: 1700px; padding: 0 50px; margin: 0 auto;}

/* text */
#main_vis .text{padding: 125px 0;}
#main_vis .text h2{color: #fff; }
#main_vis .text h2 span{display: block;}
#main_vis .text h2 b{font-size: 80px; letter-spacing: -1.6px; display: block;}


/* scroll_down */
#main_vis .scroll_down{position: absolute; right: 94px; bottom: 100px;}
#main_vis .scroll_down a{display: flex; align-items: center; justify-content: center; width: 86px; height: 86px; position: relative; }
#main_vis .scroll_down a::before{content: ''; display: block; position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1 / 1; background: url('../img/scroll_wrap.png') 50% / cover no-repeat; animation: circle 7s linear infinite;}

@keyframes circle {
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
@keyframes visualScale {
    0% {transform: scale(1.1) translateX(-50%);}
    100% {transform: scale(1) translateX(-50%);}
}
