@charset "utf-8";

.wrap-visual {position: relative;}
.wrap-visual .item {color:#fff; position: absolute; top:33.7%; left:100px}
.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 .icon {position: relative;}
.wrap-visual .icon::after {content:''; width:100%; height:100%; background:rgba(0,0,0,0.3); position: absolute; top:0; left:0; z-index: 1;}

/* control */
.wrap-visual .control {position: absolute; bottom:270px; 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:20px; height:20px;}
.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: 7px;}
.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: 15px; font-family:'SUITE Light'; color:#fff;}
.wrap-visual .numbering .sl {width:1px; height:15px; background:#fff; transform: rotate(35deg); display: inline-block; margin:0 10px;}
.wrap-visual .numbering .total {opacity:0.7}
.wrap-visual .paging {width:105px; height:1px; display: flex; margin:0 10px;}
.wrap-visual .swiper-pagination-bullet {background:rgba(255,255,255,0.8); width:100%; height:1px; opacity:1;}
.wrap-visual .swiper-pagination-bullet-active {background:#01498E;}
.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 (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 {left:50%; transform: translate(-50%); max-width:1720px; width:100%;} */
    .wrap-visual .control {bottom:30% !important;}
}

@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 {max-height:790px;}
    .wrap-visual .detail-view {margin-top: 47px;}
    .wrap-visual .control {bottom:170px; 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:117px; left: 20px;}

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

/* Common */
/* Slogan */
.wrap-slogan {position: absolute; top:30.8%; z-index: 101; width:100%; left:100px;}
.slogan {color:#fff;}
.slogan .text_0 {font-size: 30px; font-family: 'SUITE Bold'; line-height: 1.5; margin-bottom: 5px;}
.slogan .text_1 {font-size: 60px; line-height: 70px; font-family: 'SUITE Bold';}
.slogan .text_2 {font-size: 20px; line-height: 36px; font-family: 'HG Regular'; margin-top: 20px;}
.slogan .detail-view {font-family: 'HG Regular'; display: inline-flex; font-size: 17px; align-items: center; justify-content: center; padding:0 20px;position: relative; border:1px solid rgba(255,255,255,1); color:#fff; height:55px; color:rgba(255,255,255,0.8); min-width:197px; margin-top: 57px; transition: .5s; transition-property:background, color}
.slogan .detail-view:hover {background:#fff; color:rgba(0,0,0,0.8);}
@media screen and (max-width:1800px) {
    .wrap-slogan {width:auto; left:20px;}
}
@media screen and (max-width:1400px) {
    .slogan .text_1 {font-size: 55px; line-height: 50px;}
}
@media screen and (max-width:1200px) {
    .wrap-slogan {top:29.7%;left:40px;}
    .slogan .text_0 {font-size: 26px; line-height: 2;}
    .slogan .text_2 {margin-top: 30px;}
    .slogan .detail-view {margin-top: 47px;}
}
@media screen and (max-width:768px) {
    .wrap-slogan {left:20px; top:27.7%}
    .slogan .text_0 {font-size: 22px; margin-bottom: 0;}
    .slogan .text_1 {font-size: 40px; line-height: 40px;}
    .slogan .text_2 {font-size: 16px; padding-right:40px; line-height: 28px; margin-top: 20px;}
    .slogan .detail-view {margin-top: 23px; min-width:150px; font-size: 15px; height:45px;}
}