@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);min-height: 925px;}
.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: ppr; 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 .visual-util .btn-sound {display: none; position: absolute; left: 0px; bottom: -7px; z-index: 2; width: 40px; height: 40px; border-radius: 5px; text-indent: -9999px;}
.wrap-visual .visual-util .btn-sound.show.on {display: none;} /* 영상 음향 사용시 display: block 으로 변경 */
.wj .wrap-visual .visual-util .btn-sound.show.on {display: none;}
.wrap-visual .visual-util .btn-sound.play {background: rgba(41, 117, 223, 0.8) url('../images/btn_sound_on.png') no-repeat center;}
.wrap-visual .visual-util .btn-sound.stop {background: rgba(0,0,0,.8) url('../images/btn_sound_off.png') no-repeat center;}
.wrap-visual .state .now,
.wrap-visual .state .slash,
.wrap-visual .state .total {font-family: 'pps'; 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;min-height: 925px;}
.wrap-visual .wrap-video::after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: url('../images/video-pattern.png'); opacity: 1; mix-blend-mode: overlay;}
.wrap-visual .wrap-video video {position: relative; left: 50%; display: block; max-width: none; width: 101%; 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: 1780px) {
  .wrap-visual .visual-util .btn-sound {left: 30px;}
}

@media screen and (max-width: 1450px) {
  .wrap-visual .wrap-video {min-height: auto;}
  .wrap-visual .visual-slide img {max-height: 800px;min-height: auto;}
  .wrap-visual .wrap-video {max-height: 800px;}
  .wrap-visual .wrap-video video {width: auto; 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: 110px;}
  .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 {right: auto;bottom: 40px;left: 50%;transform: translateX(-50%);}
  .wrap-visual .visual-util .area {display: flex;justify-content: center;align-items: center;}
}