@charset "utf-8";
/* visual */
.visual-wrap {position: relative;}
.visual-wrap .slider::after {content:''; width:100%; height:100%; background: url('../images/visual-bg.png') no-repeat bottom -30px center / cover; position: absolute; top:0; left:0; z-index: 3;}
.visual-wrap .slider img {position: relative; left:50%; display: block; max-width:none; max-height:1040px; height:100%; width:100%; transform: translate(-50%,0); object-fit: cover; object-position: top;}
.visual-wrap .swiper-slide {background: #000;}
.visual-wrap .swiper-slide img {opacity:0.8;}
.visual-util {position: absolute; top:35%; z-index: 5; width:100%;}
.visual-util .container {max-width:1620px; width:100%; margin:0 auto;}
.visual-util .slogan-box {color:#fff;}
.visual-util .slogan-box em {font-size: 30px; font-family: gl; font-style: italic; margin-bottom: 16px; display: block;}
.visual-util .slogan-box strong {display: block; font-size: 70px; letter-spacing: -.05em; font-family: gb; font-style: italic; line-height: 1.2;}
.visual-util .slogan-box span {font-style: italic; font-size: 34px; font-family: gm;}
.visual-util .controller {display: flex; align-items: center; margin-top: 35px;}
.visual-util .control-btn {display: flex;}
.visual-util .control-btn button {width:25px; height:25px; text-indent: -9999px;}
.visual-util .control-btn .prev {background:url('../images/visual-prev.png') no-repeat center;}
.visual-util .control-btn .next {background:url('../images/visual-next.png') no-repeat center;}
.visual-util .control-btn .stop {background:url('../images/visual-stop.png') no-repeat center;}
.visual-util .control-btn .play {background:url('../images/visual-play.png') no-repeat center;}
.visual-util .control-btn .stop,
.visual-util .control-btn .play {display: none;}
.visual-util .control-btn .stop.on,
.visual-util .control-btn .play.on {display: block;}
.visual-util .paging {position: relative; width:290px; height:3px; background: none; margin-right: 55px;}
.visual-util .paging::before {content:''; width:100%; height:1px; background: rgba(255,255,255,0.5); transform: translateY(1px); display: block;}
.visual-util .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#EA5539;}
.visual-util .state {color:#fff; font-family: plb; font-size: 16px; margin-right: 10px;}

@media (max-width:1800px) {
    .visual-wrap .swiper-slide {height:100vh;}
}

@media (max-width:1400px) {
    .visual-util .slogan-box em {font-size: 25px;}
    .visual-util .slogan-box strong {font-size: 60px;}
    .visual-util .slogan-box span {font-size: 30px;}
}

@media (max-width:1200px) {
    .visual-wrap .swiper-slide {max-height:760px;}
    .visual-util .slogan-box strong {font-size: 50px;}
    .visual-util .slogan-box span {font-size: 26px;}
}

@media (max-width:768px) {
    .visual-wrap .slider::after {background:url('../images/visual-bg.png') no-repeat bottom -100px center / cover;}
    .visual-wrap .swiper-slide {max-height:510px;}
    .visual-wrap .slider img {object-position:top right;}
    .visual-util .slogan-box em {font-size: 16px;}
    .visual-util .slogan-box strong {font-size: 30px;}
    .visual-util .slogan-box span {font-size: 18px;}
    .visual-util .paging {width:123px; margin-right: 15px;}
}