@charset 'utf-8';
:root {
    --ti-cursor-margin-left:1em;
}
.carousel-control-prev, .carousel-control-next { display: none;}


.carousel { position: relative;}
.carousel img {max-width: 100%;}
.carousel p { word-break: keep-all;}

/* .carousel .img-item { animation:bg-size 10s 1 both} */
.carousel .visual-text { position: absolute; left: 50%; top: calc(50% + 4.5rem); transform: translate(-50%, -50%); z-index: 2; padding: 0 10px; width: 100%; max-width: 1520px; line-height: 1.5; color: #fff; line-height: -0.02em; text-align:center; }
.carousel .img-item { background: no-repeat center / cover; animation :aniScale 6s 1 both }

.visual-text { color: #fff;}
.visual-text .p1 { font-size: 6.5rem; font-weight: 700; animation:fadeInRight 3s 1 both   }
.visual-text .p2 { padding: 1rem 0 7rem ; font-size: 4.5rem; animation:fadeInRight 3s 1.2s 1 both    }

.visual-text a {animation:fadeInUp 1s 3s 1 both }
/* .visual-text a { overflow: hidden; display: inline-block; position: relative; padding: 2.2rem 5.5rem; color: inherit; font-size:1.8rem;  line-height: 1; border: 1px solid #fff; animation:fadeInUp 1s 3s 1 both  }
.visual-text a span { position: relative; z-index: 2;}
.visual-text a:after { content:''; display: block; position: absolute; left: 0; top: 50%; transform: translate(-100%,-50%) ; width: 120%; height: 200%; background: rgba(255,255,255,.1);  border-radius: 0 50% 50% 0; transition: 0.3s;  }
.visual-text a:hover:after { transform: translate(0,-50%);  } */

.scroll-down { position:absolute; z-index: 10; bottom:5rem; left:50%; transform: translateX(-50%); animation:fadeIn 2s 3s 1 both }

@media (max-width:991px){
    .scroll-down { display: none;}
}

@keyframes fadeInRight {
    from { opacity:0; transform: translateX(-30%);}
    to { opacity: 1; transform: translateX(-0);}
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(50%);}
    to { opacity: 1; transform: translateY(0);}
}
@keyframes fadeIn {
    from { opacity:0;}
    to { opacity: 1;}
}
@keyframes aniScale {
    from { transform: scale(1.2);}
    to { transform: scale(1);}
}

.cate{display: flex!important; justify-content: space-between; display: inline-block; color: #fff; max-width: 1280px; margin: auto; gap:20px; }
.cate a{background-color: rgba(0,0,0,0.3); font-size: 22px; padding: 10px 0px; border-radius: 10px;  flex:1;}

@media (max-width:768px){
  .visual-text .p1{ font-size: 3.5rem; }
  .visual-text .p2{ font-size: 2rem; }
  .cate{flex-wrap: wrap; gap:5px;}
  .cate a{flex:none; width: 31%; font-size: 12px;}
  .cate a:nth-of-type(4),.cate a:nth-of-type(5){flex:none; width: 49%;}
  .visual-text .p2{ padding: 1rem 0 4rem;}


}
