@charset "utf-8";

/* 비주얼 */
.wrap-visual {position: relative;}
.wrap-visual .visual-slide .area {max-width: 1740px; padding: 0 30px;}
.wrap-visual .visual-slide li {position: relative;}
.wrap-visual .visual-slide a {display: block;}
.wrap-visual .visual-slide img {position: relative; left: 50%; display: block; max-width: none; max-height: 940px; height: 100%; transform: translate(-50%,0);}
.wrap-visual .slogan {position: absolute; right: 0; bottom: 127px; width: 100%; text-align: right;}
.wrap-visual .slogan strong {position: relative; right: -100px; font-family: pp; font-size: 41px; color: #fff; opacity: 0;}
.wrap-visual .slogan p {position: relative; right: -100px; padding-top: 13px; font-family: nr; font-size: 20px; color: #fff; opacity: 0;}

.wrap-visual .visual-util {position: absolute; right: -100px; bottom: 44px; z-index: 1; width: 100%; opacity: 0;}
.wrap-visual .visual-util .area {max-width: 1740px; padding: 0 30px;}
.wrap-visual .visual-util .row {display: flex; justify-content: flex-end; align-items: center; font-size: 0;}
.wrap-visual .state .now,
.wrap-visual .state .slash,
.wrap-visual .state .total {font-family: pb; font-size: 16px; color: #ffffff;}
.wrap-visual .state .now.under10::before,
.wrap-visual .state .total.under10::before {content: '0';}
.wrap-visual .state .slash {margin: 0 20px;}
.wrap-visual .control {display: flex; margin-left: 50px;}
.wrap-visual .control button {display: block; text-indent: -99999px;}
.wrap-visual .control .prev,
.wrap-visual .control .next {width: 9px; height: 16px;}
.wrap-visual .control .prev {background: url('../images/btn-visual-prev.png') no-repeat center;}
.wrap-visual .control .next {background: url('../images/btn-visual-next.png') no-repeat center;}
.wrap-visual .control .stop,
.wrap-visual .control .play {display: none; width: 10px; height: 14px; margin: 0 25px;}
.wrap-visual .control .stop.on,
.wrap-visual .control .play.on {display: block;}
.wrap-visual .control .stop {background: url('../images/btn-visual-stop.png') no-repeat center;}
.wrap-visual .control .play {background: url('../images/btn-visual-play.png') no-repeat center;}

/* 비디오 */
.wrap-visual .wrap-video {overflow: hidden; height: 100%; max-height: 940px; }
.wrap-visual .wrap-video::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../images/video-pattern.png'); opacity: .5; mix-blend-mode: overlay;}
.wrap-visual .wrap-video video {position: relative; left: 50%; display: block; max-width: none; height: 100%; transform: translate(-50%,0);}

@media screen and (min-width: 1940px) {
  .wrap-visual .wrap-video {display: flex; align-items: center;}
  .wrap-visual .visual-slide img,
  .wrap-visual .wrap-video {max-height: 1350px;}
  .wrap-visual .visual-slide img,
  .wrap-visual .wrap-video video {width: 100%; height: 100vh; object-fit: cover;}
}

@media screen and (max-width: 1450px) {
  .wrap-visual .visual-slide img {max-height: 800px;}
  .wrap-visual .wrap-video {max-height: 800px;}
  .wrap-visual .wrap-video video {height: 800px;}
  .wrap-visual .slogan strong {font-size: 35px;}
  .wrap-visual .slogan p {font-size: 17px;}
}

@media screen and (max-width: 1100px) {
  .wrap-visual .visual-slide img {max-height: 530px;}
  .wrap-visual .wrap-video {max-height: 530px;}
  .wrap-visual .wrap-video video {height: 630px;}
  .wrap-visual .slogan {bottom: 72px;}
  .wrap-visual .slogan strong {font-size: 26px;}
  .wrap-visual .slogan p {padding-top: 2px; font-size: 16px;}

  .wrap-visual .visual-util {bottom: 26px;}
  .wrap-visual .control {margin-left: 24px;}
}

@media screen and (max-width: 800px) {
  .wrap-visual .slogan strong {font-size: 23px;}
  .wrap-visual .slogan p {font-size: 15px;}
}

@media screen and (max-width: 650px) {
  .wrap-visual .visual-slide img {max-height: 100vh;}
  .wrap-visual .wrap-video {max-height: 100vh;}
  .wrap-visual .wrap-video video {height: 100vh;}
  .wrap-visual .slogan {bottom: 150px;}
  .wrap-visual .slogan strong {font-size: 25px;}
  .wrap-visual .slogan p {font-size: 18px;}
  .wrap-visual .state .slash {margin: 0 10px;}
  .wrap-visual .visual-util {bottom: 100px;}
}