@charset "utf-8";

.wrap-visual {position: relative; background:#000;}
.wrap-visual .item {color:#fff; position: absolute; top:33.7%; left:100px;}
.wrap-visual .swiper-slide {max-height:960px;}
.wrap-visual .swiper-slide img {height:960px; position: relative; left:50%; display: block; max-width:none; transform: translate(-50%, 0); opacity:0.7; width:100%; object-fit: cover;}
/* control */
.wrap-visual .control {position: absolute; bottom:238px; left:100px; z-index: 10; display: flex; align-items: center;}
.wrap-visual .prevnext {position: relative; display: flex; align-items: center; }
.wrap-visual .prevnext button {text-indent: -9999px; width:34px; height:14px;}
.wrap-visual .prevnext .prev {background:url('../images/visual-prev.png') no-repeat center; display: inline-block; transition:.3s;}
.wrap-visual .prevnext .next {background:url('../images/visual-next.png') no-repeat center; display: inline-block; transition:.3s; margin-left: 30px;}
.wrap-visual .prevnext .prev:hover,
.wrap-visual .prevnext .next:hover {opacity:1; } 
.wrap-visual .prevnext .play {}
.wrap-visual .prevnext .stop {}
.wrap-visual .numbering {display: flex; align-items: center;}
.wrap-visual .numbering span {display: inline-block; font-size: 19px; font-family:'SUITE Bold'; color:#fff;}
.wrap-visual .numbering .sl {width:3px; height:3px; background:#fff; display: inline-block; border-radius:50%; margin:0 3px;}
.wrap-visual .numbering .total {font-family: 'SUITE Regular';}
.wrap-visual .paging {display: flex; align-items: center; margin:0 40px;}
.wrap-visual .swiper-pagination-bullet {width:8px; height:8px; background:rgba(255,255,255,0.5); border-radius:50%; margin-right: 30px; opacity:1; transition: all .3s;}
.wrap-visual .swiper-pagination-bullet:hover {background:rgba(255,255,255,1);}
.wrap-visual .swiper-pagination-bullet:last-child {margin-right: 0;}
.wrap-visual .swiper-pagination-bullet-active {background: rgba(255,255,255,1); width:10px; height:10px; transition: all .3s;}
.wrap-visual .pannel {margin-left: 15px;}
.wrap-visual .pannel .stop,
.wrap-visual .pannel .play{ width:20px; height:20px; display: inline-block; display: none; text-indent: -9999px;}
.wrap-visual .pannel .stop {background:url('../images/visual-stop.png') no-repeat center;}
.wrap-visual .pannel .play {background:url('../images/visual-play.png') no-repeat center;}
.wrap-visual .pannel .stop.on,
.wrap-visual .pannel .play.on {display: block;}


@media screen and (max-width:1800px) {
    .wrap-visual .item {left:20px;}
    .wrap-visual .control {left:20px;}
}
@media screen and (max-width:1400px) {
    .wrap-visual .item {top:23.7%;}
    .wrap-visual .text_1 {font-size: 50px; line-height: 50px;}
}
@media screen and (max-width:1200px) {
    .wrap-visual .text_0 {font-size: 26px; line-height: 2;}
    .wrap-visual .item {top:33.7%;}
    .wrap-visual .swiper-slide img {height:790px;}
    .wrap-visual .detail-view {margin-top: 47px;}
    .wrap-visual .control {bottom:180px; left:40px;}
}
@media screen and (max-width:768px) {
    .wrap-visual .item {left:20px; top:23.7%}
    .wrap-visual .text_0 {font-size: 22px;}
    .wrap-visual .text_1 {font-size: 40px;}
    .wrap-visual .text_2 {font-size: 16px; padding-right:40px;}
    /* .wrap-visual .text_2 br {display: none;} */
    .wrap-visual .detail-view {margin-top: 23px; min-width:150px;}
    .wrap-visual .control {bottom:150px; left: 20px;}

    .wrap-visual .swiper-slide img {height: 650px;}
}


/* visual */
.wrap-slogan {position: absolute; top:36.6%; left:100px; z-index: 1;}
.slogan {color:#fff; }
.slogan .text_1 {font-family: 'SUITE Bold'; font-size: 65px; line-height: 80px; color:#fff}
.slogan .text_2 {font-family: 'SUITE Regular'; color:rgba(255,255,255,0.6); line-height: 35px;font-size: 22px; font-family: 'SUITE Regular'; margin-top: 10px;}
.slogan .detail-view {position: relative; color:#fff; font-family: 'SUITE Regular'; width:170px; height:50px; display: flex; align-items: center; border:1px solid #fff; background:rgba(0,0,0,0.1); padding:0 20px 0 15px; margin-top: 50px;}
.slogan .detail-view::after {content:''; width:6px; height:9px; background:url('../images/visual-more.png') no-repeat center; position: absolute; right:20px; top: 50%; margin-top: -4px;}
.slogan .detail-view:hover::after {animation: detailMove .7s infinite;}
@keyframes detailMove {
    0% {right:20px;}
    50% {right:15px;}
    100% {right:20px;}
}
@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 {height:100%; max-height:unset;}
    .wrap-visual .swiper-slide img {max-height:unset; width:100%; height:100%;}
    .wrap-visual .control {bottom:30% !important}
    /* .wrap-slogan {max-width:1720px; width:100%; margin:0 auto; left:50%; transform: translateX(-50%);} */
    /* .wrap-visual .control {max-width:1720px; width:100%; margin:0 auto; left:50%; transform: translateX(-50%);} */

}

@media screen and (max-width:1800px) {
    .wrap-slogan {left:20px;}
}
@media screen and (max-width:1200px) {
    .wrap-slogan {left:40px; top:30.7%;}
    .slogan .text_1 {font-size: 50px;}
    .slogan .text_2 {font-size: 20px; line-height: 30px; margin-top: 7px;}
    .slogan .detail-view {margin-top: 43px;}
}
@media screen and (max-width:768px) {
    .wrap-slogan {left:20px; top:32.7%;}
    .slogan .text_1 {font-size: 40px; line-height: unset;}
    .slogan .text_2 {font-size: 18px; margin-top: 2px; line-height: 28px;}
    .slogan .detail-view {font-size: 15px; margin-top: 33px;}
}