@charset "utf-8";

.wrap-visual {position: relative; background:#000;}
.wrap-visual .item {color:#fff; position: absolute; top:36.9%; left:100px;}
.wrap-visual .item::before {content:''; width:1px; height:80px; background:#fff; position: absolute; top:-123px; left:0;}
.wrap-visual .swiper-slide img {max-height:960px; position: relative; left:50%; display: block; max-width:none; height:100%; transform: translate(-50%, 0);}
.wrap-visual .swiper-slide .icon {position: relative;}
.wrap-visual .swiper-slide .icon::after {content:''; width: 100%; height: 100%; background:rgba(0,0,0,0.3); position: absolute; left:0; top:0;}
.wrap-visual .text_0 {font-size: 30px; font-family: 'HG Regular'; line-height: 40px; text-shadow: 0px 0px 10px rgba(0,0,0,0.3);}
.wrap-visual .text_1 {font-size: 60px; line-height: 70px; font-family: 'SUITE Bold'; text-shadow: 0px 0px 10px rgba(0,0,0,0.3); margin-top: 28px; display: block;}
.wrap-visual .text_2 {font-size: 18px; line-height: 30px; font-family: 'HG Regular'; margin-top: 25px;}
.wrap-visual .detail-view { display: inline-flex; font-size: 18px; align-items: center; padding:0 20px; font-family: 'SUITE Light'; position: relative; border:1px solid rgba(255,255,255,.7); color:#fff; height:53px; color:#fff; min-width:173px; background:url('../images/more-arrw.png') no-repeat right 25px center; margin-top: 60px; transition: border .3s;}
.wrap-visual .detail-view:hover {color:#000; background:#fff url('../images/more-arrw-on.png') no-repeat right 25px center;}

/* control */
.wrap-visual .control {position: absolute; bottom:140px; left:100px; z-index: 10; display: flex; align-items: center;}
.wrap-visual .prevnext {position: relative; display: flex; align-items: center; margin-left: 30px;}
.wrap-visual .prevnext button {text-indent: -9999px; width:14px; height:25px;}
.wrap-visual .prevnext .prev {background:url('../images/prev.png') no-repeat center; display: inline-block; transition:.3s;}
.wrap-visual .prevnext .next {background:url('../images/next.png') no-repeat center; display: inline-block; transition:.3s;}
.wrap-visual .prevnext .prev:hover,
.wrap-visual .prevnext .next:hover {opacity:1;} 
.wrap-visual .numbering {display: flex; align-items: center; margin:0 20px; }
.wrap-visual .numbering span {display: inline-block; font-size: 15px; font-family:'SUITE Medium'; color:#fff;}
.wrap-visual .numbering .sl {margin:0 3px;}

.wrap-visual .pannel button {width:95px; height:95px; position: absolute; left:0; top:0; display: inline-block; text-indent: -9999px; z-index: 10;}
.wrap-visual .pannel .stop,
.wrap-visual .pannel .play {display: none;}
.wrap-visual .pannel .stop.on,
.wrap-visual .pannel .play.on {display: block;} 
.wrap-visual .pannel .stop {background:url('../images/stop.png') no-repeat center;}
.wrap-visual .pannel .play {background:url('../images/play.png') no-repeat center;}

.wrap-visual .paging {position: relative; margin-left:20px;}
.wrap-visual .swiper-pagination-bullet {position: relative; margin-right: 10px; opacity:1; background:rgba(255,255,255,0.5)}
.wrap-visual .swiper-pagination-bullet-active {background:#fff;}

.progress-round__wrap{width:95px; height:95px;z-index: 10; transition:ease all 1s; opacity: 1; position: relative; overflow:hidden;}
.progress-round__wrap .progress_bg{fill:rgba(0,0,0,0);stroke:rgba(255,255,255,0.5);stroke-width:2px;}
.progress-round__wrap .progress_line{ fill:rgba(0,0,0,0); stroke:#fff;stroke-width:2px; position: absolute; top:0; left:-1px;  stroke-dasharray: 283; stroke-dashoffset: 283;}
.progress-round__wrap.on .progress_line {animation-name: circleAnimation; animation-duration: 3s;}
.progress-round__wrap.pause .progress_line {animation-play-state: paused;}

@keyframes circleAnimation {
    from {stroke-dashoffset: 283;}
    to {stroke-dashoffset: 0;}
}

@media screen and (min-width:2600px) {
    .wrap-visual .control {bottom:30% !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 .control {bottom:25% !important;}
    /* .wrap-visual .item {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-visual .item {left:40px;}
    .wrap-visual .control {left:40px;}
}
@media screen and (max-width:1200px) {
    .wrap-visual .item {top:23.7%;}
    .wrap-visual .text_1 {font-size: 50px; line-height: 50px;}
}
@media screen and (max-width:1200px) {
    .wrap-visual .item {top:35.7%;}
    .wrap-visual .item::before {top:-96px;}
    .wrap-visual .text_0 {font-size: 24px; line-height: 32px;}
    .wrap-visual .text_1 {font-size: 40px; line-height: 1; margin-top: 15px;}
    .wrap-visual .item {top:33.7%;}
    .wrap-visual .swiper-slide img {max-height:790px;}
    .wrap-visual .detail-view {margin-top: 57px;}
    .wrap-visual .control {bottom:115px;}
}
@media screen and (max-width:768px) {
    .wrap-visual .item {left:20px; top:33.7%}
    .wrap-visual .item::before {height: 50px; top:-77px;}
    .wrap-visual .text_0 {font-size: 18px; padding-right: 110px;}
    .wrap-visual .text_1 {font-size: 40px; margin-top: 10px;}
    .wrap-visual .text_2 {font-size: 16px; padding-right:40px;}
    .wrap-visual .text_2 br {display: none;}
    .wrap-visual .detail-view {margin-top: 48px; min-width:150px; height:45px; font-size: 15px;}
    .wrap-visual .control {bottom:70px; left: 20px;}

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