.visual-wrapper {overflow:hidden; position:relative; height:100vh; background-color:#000}
.port-maya-cont {margin-top:48px;height:80vh;}
.port-maya-cont video{margin:-5vh 0;}
.visual-wrapper .visual-slider {width:100%; height:100%}
.visual-wrapper .visual_txt_area {min-height:345px}
.visual-wrapper .visual_txt_area > a,
.visual-wrapper .visual_txt_area > .main-banner {display:inline-flex; flex-direction:column; flex-grow:1}
.visual-wrapper .swiper-slide .inner {display:flex; flex-direction:column; justify-content:center; position:relative; max-width:1920px; height:100%; margin:0 auto; padding:0 140px; transition:.4s ease}
.visual-wrapper .visual-slider .tit-slide {display:flex; flex-grow:1; color:#fff; font-weight:500; word-break: break-word; font-size:60px;font-weight:800}
.visual-wrapper .visual-slider .description {display:block; flex-grow:1; margin-top:15px; color:#fff; line-height:1.55; font-size:27px;}
.visual-wrapper .visual-slider .btn-area {margin-top:40px}
.visual-wrapper .visual-slider .btn-area a + a {margin-left:13px}
.visual-wrapper .swiper-slide {overflow:hidden; -webkit-backface-visibility: hidden;-webkit-transform: translate3d(0, 0, 0);}
.visual-wrapper .swiper-slide .view {position:absolute; top:0; left:0; width:100%; height:100%; background:no-repeat 50% 50%; background-size:cover}
.visual-wrapper .swiper-slide video {position:absolute; top:0; left:50%; min-width:100%; min-height:100%; transform:translateX(-50%)}
.visual-wrapper .swiper-slide video[poster] {width:100%; height:100%}
.visual-slider a {display:block; width:100%; height:100%;display: flex;
    flex-direction: column;
    justify-content: center;
   }
.visual-wrapper .swiper-info-area {position:absolute; bottom:0; left:0; width:100%; max-width:1920px; padding:0 140px}
.visual-wrapper .swiper-info-area .inner {position:relative}
.visual-wrapper .slider-timer {display:none; position:absolute; bottom:90px; left:0; z-index:10; width:64px; height:64px; transition:left 0.5s}
.visual-wrapper .slider-timer .btn-control {position:absolute; left:0; top:0; z-index:1; width:64px; height:64px; border:0; text-indent:-9999px; transition:.4s ease}
.visual-wrapper .slider-timer .btn-control::after {content:""; position:absolute; top:50%; left:50%; width:0; height:16px; border-color:transparent transparent transparent #fff; border-style:double; border-width:0 0 0 14px; transform:translate(-50%, -50%); transition:.17s linear}
.visual-wrapper .slider-timer .btn-control.is-pause::after {height:0; margin-left:2px; border-style:solid; border-width:9px 0 9px 14px}
.visual-wrapper .swiper-info-area .fraction {position:absolute; bottom:106px; left:260px; z-index:10; transition:.4s ease}
.visual-wrapper .swiper-info-area .fraction span {color:#fff; font-size:18px; font-weight:300; line-height:1.56; letter-spacing:-.2px; opacity:.8}
.visual-wrapper .swiper-info-area .fraction .current-num {font-weight:400; opacity:1}
.visual-wrapper .swiper-info-area .fraction .div {margin:0 7px; font-size:15px; opacity:.5}

.visual-wrapper svg.progress {width:64px; height:64px; overflow:visible; transform:rotate(-90deg); transition:.4s ease}
.visual-wrapper svg.progress circle.top {fill:transparent; stroke:#fff; stroke-width:3; stroke-dasharray:201px; stroke-dashoffset:201px; stroke-linecap:round}
.visual-wrapper svg.progress circle.bottom {fill:transparent; stroke:rgba(255,255,255,0.5); stroke-width:3; stroke-dasharray:201px}

.visual-wrapper .scroll-guide-area {position:relative; bottom:0; left:0; width:100%; text-align:center}
.visual-wrapper .scroll-guide {display:inline-block; position:relative; top:-112px; z-index:5; width:56px; height:56px; background:url(/images/common/icon-56-px-scroll-down@2x.png) no-repeat 0 0; background-size:100% 100%; opacity:.9;
	animation:scrollDown 1.2s ease infinite alternate;
	transition:.4s ease
}

@keyframes timer {
	0% {stroke-dashoffset:201px}
	100% {stroke-dashoffset:0}
}

@keyframes scrollDown {
	from {transform:translateY(0)}
	to {transform:translateY(12px)}
}