/* Visual */
.visual{
    overflow: hidden; height: 720px; background: #000; margin-top:100px;
}
.visual .swiper-container{
    height: 100%;
    -webkit-transition: all ease-in-out .6s; transition: all ease-in-out .6s;
    opacity: 0;
}
.visual .swiper-wrapper { height: 100%; }
.visual .swiper-slide { overflow: hidden; height: 100%; }
.visual .prev,
.visual .next{
    z-index: 2; position: absolute; top: 0; bottom: 0; margin: auto; cursor: pointer !important;
    -webkit-transition: all .35s ease-out .6s; transition: all .35s ease-out .6s;
    opacity: 0;
}
.visual .prev{
    left: 100px; width: 40px; height: 70px; background: url('/child/img/visual/prev.png') no-repeat center;
    -webkit-transform: translateX(-50px); transform: translateX(-50px);
}
.visual .next{
    right: 100px; width: 40px; height: 70px; background: url('/child/img/visual/next.png') no-repeat center;
    -webkit-transform: translateX(50px); transform: translateX(50px);
}
.visual .slide-pagination{
    height: 15px;
    -webkit-transition: all .35s ease-out .6s; transition: all .35s ease-out .6s;
    -webkit-transform: translateY(50px); transform: translateY(50px);
    opacity: 0;
}
.visual .slide-pagination.swiper-pagination-bullets { z-index: 2; position: absolute; bottom: 30px; width: 100%; text-align: center; font-size: 0; }
.visual .slide-pagination.swiper-pagination-bullets .swiper-pagination-bullet{
    margin: 0 5px; width: 14px; height: 100%; background: #ffffff; border-radius: 14px;
    -webkit-transition: all ease .2s; transition: all ease .2s;
}
/* .visual .slide-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active { width: 25px; height:10px;} */
.visual .background{
    height: 720px; display: flex; justify-content: center; align-items: center;
    -webkit-transition: all ease-in-out 1s; transition: all ease-in-out 1s;
    -webkit-transform: scale(1.1); transform: scale(1.1);
}

.visual .background .context{display: flex; flex-direction: column; align-items: center;}

.visual .background .title {font-size:8rem; color:#fff; font-weight:700; position: relative; transition:all 1s ease; opacity:0; top:80px; opacity:0;}

.visual .background .context p {font-size:3rem; color:#fff; text-align: center; position: relative; top: 50px; opacity: 0; transition:all 1s 0.5s;}

.visual .background .context .button-visual-wrap{margin-top: 10px;opacity: 0; transition:all 1s 1s; position: relative; top: 20px;}
/* .visual  .swiper-slide-active .visual .background {-webkit-transform: scale(1); transform: scale(1);} */

.visual .swiper-slide-active .context .button-visual-wrap, .visual  .swiper-slide-active .background .title, .visual  .swiper-slide-active .background .context p { top:0px; opacity:1;}



/* @keyframes fadeup {

    from {
        opacity: 0; top:80px;
    }
    to {
        opacity: 1; top:0;
    }

} */

.visual .background--1 { background: url('/child/img/visual/v1.jpg') no-repeat center / cover; }
.visual .background--2 { background: url('/child/img/visual/v2.jpg') no-repeat center / cover; }
.visual .background--3 { background: url('/child/img/visual/v3.jpg') no-repeat center / cover; }
.visual .background--4 { background: url('/child/img/visual/v4.jpg') no-repeat center / cover; }
.visual .background--5 { background: url('/child/img/visual/v5.jpg') no-repeat center / cover; }
.visual .swiper-container-initialized { opacity: 1; }
.visual .swiper-container-initialized .background { -webkit-transform: none; transform: none; }
.visual .swiper-container-initialized .prev,
.visual .swiper-container-initialized .next,
.visual .swiper-container-initialized .slide-pagination{
    -webkit-transform: none; transform: none;
    opacity: 1;
}
@media(max-width:1200px){

    .visual {margin-top:0px;}

}
@media(max-width:1024px){
    .visual { height: 460px; margin-top:0px;}
    .visual .prev,
    .visual .next { display: none; }

    .visual .background {height:460px; text-align: center;}

    .visual .background .title {font-size:5rem;}
    .visual .background .context p {font-size:2.4rem;}
}
@media(max-width:768px){
    .visual .slide-pagination { height: 8px; }
    .visual .slide-pagination.swiper-pagination-bullets { bottom: 20px; }
    .visual .slide-pagination.swiper-pagination-bullets .swiper-pagination-bullet { margin: 0 3px; width: 10px; }
    .visual .slide-pagination.swiper-pagination-bullets .swiper-pagination-bullet-active { width: 24px; }
    .visual { height: 340px; }
    .visual .background {height:340px;}
    .visual .background .title {font-size:3.6rem;}
    .visual .background .context p {font-size:1.8rem;}

}
@media(max-width:500px){
    .visual { height: 240px; }
    .visual .background {height:240px;}
    .visual .background .title {font-size:2.4rem;}
    .visual .background .context p {font-size:1.6rem;}

}