@charset 'utf-8';
.carousel-control-prev, .carousel-control-next { display: none;}


.carousel { position: relative;}
.carousel .visual-text-wrap { position: absolute; left: 50%; top: calc(50% + 45px); z-index: 2; transform: translate(-50%, -50%); padding: 0 10px; width: 100%; text-align: center; }
.carousel .visual-text-wrap .inner { }
.carousel .visual-text-wrap .slogun { padding: 25px 0 60px; font-size: 28px; line-height: 1.5; color: #fff;  }
.carousel .visual-text-wrap .link { margin-right: -1px; max-width: 1200px; margin: auto;}
.carousel .visual-text-wrap .link li { flex:1;  margin-right: 1px;  }
.carousel .visual-text-wrap .link li a { display: block; padding: 60px 10px; background: rgba(0,0,0,.5); }
.carousel .visual-text-wrap .link li a span {display: block; padding-top: 66px; font-size: 16px; line-height: 1; color:#fff; background-position: top center; background-repeat: no-repeat;}
.carousel .visual-text-wrap .link li a:hover { background: rgba(0,32,79,.9); transition: .7s;}
.carousel .visual-text-wrap .link li:nth-of-type(1) a span { background-image: url('/img/law/bg_viaual_ico1.png');}
.carousel .visual-text-wrap .link li:nth-of-type(2) a span { background-image: url('/img/law/bg_viaual_ico2.png');}
.carousel .visual-text-wrap .link li:nth-of-type(3) a span { background-image: url('/img/law/bg_viaual_ico3.png');}
.carousel .visual-text-wrap .link li:nth-of-type(4) a span { background-image: url('/img/law/bg_viaual_ico4.png');}
.carousel .visual-text-wrap .link li:nth-of-type(5) a span { background-image: url('/img/law/bg_viaual_ico5.png');}
.carousel .visual-text-wrap .link li:nth-of-type(6) a span { background-image: url('/img/law/bg_viaual_ico6.png');}

.carousel .scroll-down { display: block; position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%); padding-top: 30px;  font-size: 16px; color: #fff; }
.carousel .scroll-down:before,
.carousel .scroll-down:after { content:''; display: block; position: absolute;  left:50%; transform: translateX(-50%) rotate(-45deg); width: 15px; height: 15px; border-left: 2px solid #fff; border-bottom: 2px solid #fff; animation:scroll-down 1.6s linear infinite both}
.carousel .scroll-down:before {  }
.carousel .scroll-down:after { animation-delay:.8s }


@media (max-width:991px){
    .carousel .visual-text-wrap .logo img { width: 500px; }
    .carousel .visual-text-wrap .slogun { font-size: 24px;}
    .carousel .visual-text-wrap .link li a { padding: 45px 10px;}
}

@media (max-width:768px){
    .carousel .visual-text-wrap .logo img { width: 100%; max-width: 480px; }
    .carousel .visual-text-wrap .slogun { font-size: 20px;}
    .carousel .visual-text-wrap .link li a { padding: 35px 5px;}
    .carousel .visual-text-wrap .link li a span { font-size: 14px; }
    .carousel .scroll-down { display: none;}
}
@media (max-width:576px){
    .carousel .visual-text-wrap .logo img {  max-width: 420px; }
    .carousel .visual-text-wrap .slogun { padding: 30px 0 45px; font-size: 17px;}
    .carousel .visual-text-wrap .link { flex-wrap:wrap;  margin: 0 -5px -10px; }
    .carousel .visual-text-wrap .link li { flex:auto; margin: 0 5px 10px; width: calc(33.33% - 10px);}
    .carousel .visual-text-wrap .link li a { padding: 20px 5px;     background: rgba(0,0,0,.6); animation:chg-bg 9s infinite ease-in-out}
    .carousel .visual-text-wrap .link li:nth-of-type(2) a { animation-delay:6s}
    .carousel .visual-text-wrap .link li:nth-of-type(3) a { animation-delay:1.5s}
    .carousel .visual-text-wrap .link li:nth-of-type(4) a { animation-delay:4.5s}
    .carousel .visual-text-wrap .link li:nth-of-type(5) a { animation-delay:3s}
    .carousel .visual-text-wrap .link li:nth-of-type(6) a { animation-delay:7.5s}
    .carousel .visual-text-wrap .link li a span { padding-top: 45px ; background-size: 35px auto;}
}
@media (max-width:400px){
    .carousel .visual-text-wrap .slogun { padding: 25px 0 40px; font-size: 15px; }
}


@keyframes scroll-down {
    from { opacity: 0; top: -5px; }
    50% { opacity:1 }
    to {  opacity: 0; top: 15px; }
}

@keyframes chg-bg {
    form { background: rgba(0,0,0,.6); }
    20% { background: rgba(0,0,0,.6); }
    20.1% { background: rgba(0,32,79,.8); }
    26.9% { background: rgba(0,32,79,.8); }
    27% { background: rgba(0,0,0,.6); }
    to { background: rgba(0,0,0,.6); }

}