@charset "utf-8";

/* Visual */
.wrap-visual {overflow: hidden;}
.wrap-visual ._fnctAdmin {bottom: 170px !important;}
.wrap-visual .slider img {position: relative; left: 50%; display: block; max-width: none; max-height: 980px; height: 100%; transform: translate(-50%,0); object-fit: cover;}
.wrap-visual .inner {position: relative;}
.wrap-visual .scroll-icon {position: absolute; left: 0; bottom: 8%; z-index: 1; width: 100%;}
.wrap-visual .scroll-icon .inner {padding-left: 6%;}
.wrap-visual .scroll-icon span {position: relative; display: inline-block; width: 26px; height: 65px; background: url('../images/ic-scroll.png') no-repeat center;}
.wrap-visual .scroll-icon span i {position: absolute; left: 0; top: -10px; width: 100%; height: 100%; opacity: 0; transition: 1s;}
.wrap-visual .scroll-icon.on span i {animation-name: arrow; animation-duration: 1s; animation-iteration-count: infinite; transform-origin: top center;}
.wrap-visual .scroll-icon span .arr1 {background: url('../images/ic-scroll-2.png') no-repeat center;}
.wrap-visual .scroll-icon span .arr2 {background: url('../images/ic-scroll-3.png') no-repeat center;}

.visual-util {position: absolute; left: 0; top: 56%; z-index: 1; width: 100%;}
.visual-util .inner {padding-left: 120px;}
.wrap-visual .slogan-box{position: absolute; left: 0; top: 31%; z-index: 1; width: 100%;}
.wrap-visual .slogan-box > .inner{padding-left: 120px;}
.wrap-visual .slogan strong {display: block; font-family: gb; font-size: 60px; line-height: 1.3; color: #fff;}
.wrap-visual .slogan em {display: block; margin-top: 10px; font-family: pr; font-size: 26px; line-height: 1.4; letter-spacing: normal; color: #fff;}

.visual-util .control {position: relative; display: flex; align-items: center; margin-top: 56px; font-size: 0;}
.visual-util .state {display: flex; align-items: center;}
.visual-util .state .now,
.visual-util .state .total {flex-shrink: 0; width: 20px; font-family: pr; font-size: 16px; color: #fff;}
.visual-util .state .total {text-align: right;}
.visual-util .state .progress {position: relative; display: block; width: 100px; height: 2px; background: rgba(255,255,255,0.3);}
.visual-util .state .progress::after {content: ''; position: absolute; left: 0; top: 0; width: 0%; height: 100%; background: #fff;}
.visual-util .state .progress.on::after {width: 100%; transition: width 2s;}
.visual-util .btns .prev,
.visual-util .btns .next {position: relative; top: 1px; width: 15px; height: 11px; text-indent: -999999px;}
.visual-util .btns .prev {margin-left: 10px; background: url('../images/visual-prev.png') no-repeat center;}
.visual-util .btns .next {background: url('../images/visual-next.png') no-repeat center;}
.visual-util .btns .stop,
.visual-util .btns .play {position: relative; top: 1px; display: none; width: 9px; height: 11px; margin: 0 5px; text-indent: -999999px;}
.visual-util .btns .stop {background: url('../images/visual-stop.png') no-repeat center;}
.visual-util .btns .play {background: url('../images/visual-play.png') no-repeat center;}
.visual-util .btns .stop.on,
.visual-util .btns .play.on {display: inline-block;}

@keyframes arrow {
  0% {top: -10px; opacity: 0;}
  100% {top: 0; opacity: 1;}
}

@media screen and (min-width: 2000px) {
  .wrap-visual .slider img {width: 100%}
}

@media screen and (max-width: 1420px) {
  .wrap-visual .slogan strong {font-size: 50px;}
  .wrap-visual .slogan em {font-size: 24px;}
}


@media screen and (max-width: 1200px) {
  .wrap-visual .slider img {max-height: 730px;}
  .wrap-visual .scroll-icon {display: none;}
  .wrap-visual .scroll-icon .inner {padding-left: 80px;}
  .visual-util {top: 49%;}
  .visual-util .inner {padding-left: 80px;}
  .wrap-visual .slogan-box > .inner{padding-left: 80px;}
  .wrap-visual .slogan strong {line-height: 1.15; font-size: 40px;}
  .wrap-visual .slogan em {font-size: 20px;}
  .visual-util .control {margin-top: 74px;}
  .visual-util .control::after {display: none;}
  .visual-util .state .progress {width:185px;}
}

@media screen and (max-width: 920px) {
  .visual-util .inner {padding-left: 40px;}
  .wrap-visual .slogan-box > .inner{padding-left: 40px;}
  .wrap-visual .scroll-icon .inner {padding-left: 40px;}
}

@media screen and (max-width: 700px) {
  .wrap-visual .slider img {max-height: 450px;}
  .wrap-visual .scroll-icon {display: none;}
  .visual-util .inner {padding-left: 40px;}
  .visual-util {top: 57%;}
  .wrap-visual .slogan strong {font-size: 31px;}
  .wrap-visual .slogan em {font-size: 14px; line-height: 1.3;}
  .visual-util .control {margin-top:15px;}
  .visual-util .state .progress {width: 62px;}
}