@charset "utf-8";

.wrap-visual {position: relative;}

.wrap-visual .item { color:#fff; position: absolute; top:33.7%; left:10rem}
.wrap-visual .swiper-slide .icon {height:96rem;}
.wrap-visual .swiper-slide img {max-height:96rem; position: relative; left:50%; display: block; max-width:none; height:100%; transform: translate(-50%, 0); width: 100%; object-fit: cover;}
.wrap-visual .icon {position: relative;}
.wrap-visual .icon::after {content:''; width:100%; height: 100%; background:rgba(0,0,0,0.4); position: absolute; top:0; left:0;}
.wrap-visual .text_1 {font-size: 6.5rem; line-height: 6.5rem; font-family: 'paper'; font-weight: 600; text-shadow: 0.2rem 0.2rem 0.5rem rgba(0,0,0,0.3);}
.wrap-visual .text_2 {font-size: 2rem; line-height: 3rem; font-family: 'paper'; font-weight: 400; margin-top: 2.5rem;}
.wrap-visual .detail-view { display: inline-flex; font-size: 1.4rem; align-items: center; padding:0 2rem; position: relative; border:1px solid rgba(255,255,255,0.4); color:#fff; border-radius:5rem; height:5rem; color:#fff; min-width:17rem; background:url('../images/visual-more-arrw.png') no-repeat right 2rem center; margin-top:5rem; transition: border .3s;}
.wrap-visual .detail-view:hover {border:1px solid rgba(255,255,255,1)}
/* control */
.wrap-visual .control {position: absolute; bottom:11.5rem; left:10rem; z-index: 10;}
.wrap-visual .prevnext {position: relative; display: flex; align-items: center;}
.wrap-visual .prevnext button {text-indent: -9999rem;}
.wrap-visual .prevnext .prev {width:2.4rem; height:3rem; background:url('../images/visual-prev.png') no-repeat center; display: inline-block; margin-right: 2rem; opacity:0.5; transition:.3s;}
.wrap-visual .prevnext .next {width:2.4rem; height:3rem; background:url('../images/visual-next.png') no-repeat center; display: inline-block; margin-left: 2rem; opacity:0.5; transition:.3s;}
.wrap-visual .prevnext .prev:hover,
.wrap-visual .prevnext .next:hover {opacity:1; } 
.wrap-visual .prevnext .play {}
.wrap-visual .prevnext .stop {}
.wrap-visual .numbering span {display: inline-block; font-size: 1.5rem; font-family:'paper'; font-weight: 500; color:#fff;}
.wrap-visual .paging {width:32.5rem; height:2px; display: flex; margin-top: 3rem;}
.wrap-visual .swiper-pagination-bullet {background:rgba(255,255,255,0.3); width:100%; height:2px; opacity:1; border-radius:0;}
.wrap-visual .swiper-pagination-bullet-active {background:rgba(255,255,255,1);}


.wrap-scrollBox {position: absolute; bottom:3rem; left:10rem; z-index: 1;}
.scroll-indicator {width:3.5rem;height:5rem;border:1px solid white;border-radius:2rem;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:start;padding-top:0px;box-sizing:border-box;}
.dot {width:0.4rem;height:0.4rem;border-radius:50%;background:white;opacity:0;animation:scrollDot 1.5s infinite;margin:3px 0;}
.dot2 {animation-delay:0.2s;}
.dot3 {animation-delay:0.4s;}
@keyframes scrollDot {
    0%{opacity:0;transform:translateY(0);}
    30%{opacity:1;transform:translateY(0.5rem);}
    60%{opacity:0;transform:translateY(1rem);}
    100%{opacity:0;}
}

@media screen and (min-width:2600px) {
    .wrap-visual .control {bottom:25% !important}
}
@media screen and (min-width:1921px) {
    .wrap-visual {height:47.86vw;}
    .wrap-visual .slider {height:100%;}
    .wrap-visual .icon {height:100%;}
    .wrap-visual .swiper-slide img {max-height:unset; width:100%;}
    /* .wrap-visual .item {max-width:1720px; margin:0 auto; width:100%; left:50%; transform: translateX(-50%);} */
    .wrap-visual .control {bottom:20%}
}

@media screen and (max-width:1800px) {
    .wrap-visual .item {left:4rem;}
    .wrap-visual .control {left:2rem;}
    .wrap-scrollBox {left:2rem;}
}
@media screen and (max-width:1400px) {
    .wrap-visual .item {top:23.7%;}
    .wrap-visual .text_1 {font-size: 4rem; line-height: 5rem;}
}
@media screen and (max-width:1200px) {
    .wrap-visual .swiper-slide .icon {height:78rem;}
    .wrap-visual .swiper-slide img {max-height:79rem;}
    .wrap-visual .detail-view {margin-top: 5.5rem;}
    .wrap-visual .control {bottom:12.2rem;}
}
@media screen and (max-width:768px) {
    .wrap-visual .swiper-slide .icon {height:59rem;}
    .wrap-visual .item {left:2rem;}
    .wrap-visual .text_2 {font-size: 1.6rem; padding-right:4rem;}
    .wrap-visual .text_2 br {display: none;}
    .wrap-visual .detail-view {margin-top: 3.8rem;}
    .wrap-visual .control {bottom:5rem;}
    .wrap-visual .paging {width:20rem; margin-top: 1rem;}

    .wrap-visual .swiper-slide img {max-height: 65rem;}


    .scroll-indicator {display: none;}
}