banner 文字渐入

<!--{* banner *}-->
<div class="x-banner" {{ app('visual').url('section', 16079) }}>
    <div class="owl-carousel hidden-sm hidden-xs">
        {% for value in app('section').id(16079) %}
        <div class="banner-item">
            <a href="{{ value.url }}">
             {% if value.video !='' %}
         <video src="{{ value.video }}" width="100%" height="100%" controls autoplay loop></video>
             {% else %}
             <img src="{{ value.img }}" alt="{{ value.name }}" />
             {% endif %}
            </a>

            <div class="v_cover">
                <div class="v_con">
                    <div class="v_tit_aa">{{ value.name }}</div>
                    <div class="v_tit_bb">{{ value.summary }}</div>
                    <a href="{{ value.url }}" class="v_tit_cc">了解详情</a>
                </div>
            </div>

        </div>
        {% endfor %}
    </div>
    <div class="owl-carousel visible-xs visible-sm">
        {% for value in app('section').id(16079) %}
        <div><a href="{{ value.url }}"><img src="{{ value.img }}" alt="{{ value.name }}" /></a></div>
        {% endfor %}
    </div>

    <div class="banner-icon">
      <a class="icon" href="javascript:;">
        <img src="//cdn.myxypt.com/6189274f/23/07/e3786870d5ce6e90bc5c6e7d4cce35a680e577e2.png" alt="">
      </a>
    </div>
</div>

/* banner */
.x-banner .banner-item .v_cover {
	position: absolute;
	display: flex;
	align-items: center;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	color: #fff;
	text-align: center
}

.x-banner .banner-item .v_cover .v_con {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	z-index: 5;
	WIDTH: 80%;
	TEXT-ALIGN: LEFT
}

.x-banner .banner-item .v_con * {
	transition-delay: transform 1s,opacity 0s;
	transition-duration: 1s;
	transform: translate3d(0,80px,0);
	opacity: 0
}

.x-banner .owl-item.active .banner-item .v_con * {
	transform: translate3d(0,0,0);
	opacity: 1
}

.x-banner .owl-item.active .banner-item .v_con :nth-child(1) {
	transition-delay: .3s
}

.x-banner .owl-item.active .banner-item .v_con :nth-child(2) {
	transition-delay: .5s
}

.x-banner .owl-item.active .banner-item .v_con :nth-child(3) {
	transition-delay: .7s
}

.v_tit_aa {
	font-size: 3.5416vw;
	color: #fff;
	font-weight: 600;
	letter-spacing: 5px;
	margin-bottom: 10px;
	text-shadow: 2px 2px 2px #000
}

.v_tit_bb {
	font-size: 1.97916vw;
	color: #fff;
	font-weight: 400;
	letter-spacing: 0;
	margin-bottom: 30px;
}

.v_tit_cc {
	font-size: 1.14583vw!important;
	color: #fff;
	font-weight: 400;
	letter-spacing: 0;
	line-height: 15px;
	border: 1px solid #fff;
	text-align: center;
	padding: 1.0416vw 2.083vw;
	display: inline-block!important;
}

.v_tit_cc::before {
	position: absolute;
	left: 0px;
	top: 0px;
	width: 0px;
	height: 100%;
	content: "";
	background: #0E4ED0;
	-webkit-transition: all .8s ease;
	-moz-transition: all .8s ease;
	transition: all .8s ease;
	z-index: -1;
}

.v_tit_cc:hover {
	color: #fff;
}

.v_tit_cc:hover::before {
	width: 100%;
}