/*==BEGIN: ABOUT==*/
.boxTitle .title {
	font-size: 40px;
	line-height: 50px;
}
.vnt-about .boxTitle {
	text-align: left;
}
.vnt-about .boxTitle .title {
	font-size: 40px;
	line-height: 50px;
}
.boxTitle .title .t1 {
	color: #333333
}
.vnt-about .des {
	font-size: 18px;
	line-height: 28px;
	color: #555555;
}
/*==================BEGIN HISTORY===============*/
.vnt-history {
	background: url(../images/aboutBg.jpg) right 0/cover no-repeat;
	padding: 120px 0 160px;
	position: relative;
}
.vnt-history:before {
	position: absolute;
	top: 0;
	left: 0;
	content: '';
	width: 200px;
	height: 569px;
	background: url(../images/rau.png) 0 0 no-repeat
}
.vnt-history .year {
	font-size: 100px;
	line-height: 80px;
	color: #0397d6;
	font-weight: 900;
	margin-bottom: 20px
}
.vnt-history .content {
	background-color: #0397d6;
	padding: 30px 50px 30px 30px;
	position: relative;
	height: 350px
}
.vnt-history .des {
	font-size: 18px;
	line-height: 25px;
	color: #ffffff;
	font-weight: 400;
	max-height:280px;
	overflow: hidden;
	position: absolute;
	top: 50%;
	left: 30px;
	right:50px;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
}
.vnt-history .img {
	position: relative;
	overflow: hidden;
	padding-top: 65%;
	background-color: #FFFFFF;
	border: 5px solid #FFFFFF;
	-webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
	-moz-box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
	box-shadow: 0 1px 6px rgba(0, 0, 0, 0.4);
}
.vnt-history .img img {
	position: absolute;
	top: 50%;
	left: 0;
	width: 100%;
	-moz-transform: translateY(-50%);
	-webkit-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	-webkit-transition: transform 0.8s cubic-bezier(0.44, 0.185, 0.575, 0.86);
	-moz-transition: transform 0.8s cubic-bezier(0.44, 0.185, 0.575, 0.86);
	-o-transition: transform 0.8s cubic-bezier(0.44, 0.185, 0.575, 0.86);
	transition: transform 0.8s cubic-bezier(0.44, 0.185, 0.575, 0.86);
	-webkit-backface-visibility: hidden;
	-moz-backface-visibility: hidden;
	-ms-backface-visibility: hidden;
	backface-visibility: hidden;
}
.vnt-history .img:hover img {
	-webkit-transform: translateY(-50%) scale(1.1);
	-moz-transform: translateY(-50%) scale(1.1);
	-o-transform: translateY(-50%) scale(1.1);
	-ms-transform: translateY(-50%) scale(1.1);
	transform: translateY(-50%) scale(1.1);
}
.vnt-history .slick-dots {
	position: absolute;
	left: auto;
	width: 42%;
	padding:0;
	margin: 0;
	margin-right: 8%;
	right: calc((100% - 1170px)/2);
	bottom: 60px;
	text-align: center;
	z-index: 2;
}
.vnt-history .slick-dots li {
	display: inline-block;
	margin: 0 5px;
}
.vnt-history .slick-dots li button {
	width: 12px;
	height: 12px;
	-webkit-border-radius: 100%;
	-moz-border-radius: 100%;
	border-radius: 100%;
	font-size: 0;
	padding: 0;
	background-color: #ffffff;
	border: none;
}
.vnt-history .slick-dots li.slick-active button {
	background-color: #0397d6;
}
/*==================BEGIN WHY===============*/
.vnt-why {
	padding-top: 50px
}
.vnt-why .boxTitle {
	margin-bottom: 50px
}
.vnt-why .row-why {
	margin-bottom: 30px
}
.vnt-why .img {
	padding-top: 66%
}
.vnt-why .img {
	padding-top: 52.631578%;
	position: relative;
	overflow: hidden;
}
.vnt-why .img img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	transition: -webkit-transform 4s cubic-bezier(0, .6, .45, 1);
	transition: transform 4s cubic-bezier(0, .6, .45, 1);
	transition: transform 4s cubic-bezier(0, .6, .45, 1), -webkit-transform 7s cubic-bezier(0, .6, .45, 1);
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
}
.vnt-why .img:hover img {
	-webkit-transform: scale(1.15);
	-ms-transform: scale(1.15);
	-o-transform: scale(1.15);
	transform: scale(1.15);
}
.vnt-why .tend {
	font-family: "HLT Aparo";
	font-size: 72px;
	line-height: 90px;
	color: #beeafd;
	font-weight: 500;
	margin-bottom: 10px
}
.vnt-why .des {
	font-size: 18px;
	line-height: 28px;
	color: #606060
}
.vnt-why .des .w1 {
	font-size: 24px;
	font-weight: 700;
	color: #0397d6;
	text-transform: uppercase;
}
/*==================BEGIN VIEW===============*/
.vnt-view {
	padding-top: 90px
}
.vnt-view .row>div:first-child {
	padding: 0 35px;
}
.vnt-view .boxTitle {
	background-color: #0397d6;
	padding: 40px 0;	
	color: #FFFFFF;
	max-width: 270px;
	height: 400px;
	position: relative;
	margin: auto;
	text-align: center
}
.vnt-view .boxTitle:before {
	position: absolute;
	right: 0;
	bottom: 0;
	content: '';
	width: 258px;
	height: 120px;
	background: url(../images/fishBg.svg) right bottom/cover no-repeat;
	opacity: 0.4;
}
.vnt-view .boxTitle .title {
font-size: 36px;
	font-weight: 400;
line-height: 42px
}
.vnt-view .boxTitle .title>span {
	display: block;
}
.vnt-view .dot-line {
	position: relative;
	margin-top: 15px
}
.vnt-view .dot-line:before {
	position: absolute;
	top: 0;
	left: 49.5%;
	width: 1px;
	height: 60px;
	content: '';
	background-color: #54a286
}
.vnt-view .dot-line .dot {
	position:relative;
	top:60px;
	display:inline-block;
	background-color:#ffd204;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	height:27px;
	width:27px;
	border: 7px solid rgba(255, 255, 255, .7);
	-webkit-animation:slideInDown 3s ease-out;
}
.vnt-view .dot-line .dot:before {
	position: absolute;
	top:-25px;
	left: -25px;
	right: -25px;
	bottom: -25px;
	content: '';
	border: 7px solid #ee2224;
	background: transparent;
	-webkit-border-radius:50%;
	-moz-border-radius:50%;
	border-radius:50%;
	-webkit-animation: pulse 3s ease-out;
	-moz-animation: pulse 3s ease-out;
	animation: pulse 3s ease-out;
	-webkit-animation-iteration-count: infinite;
	-moz-animation-iteration-count: infinite;
	animation-iteration-count: infinite;
	-webkit-animation-delay:3s;
	animation-delay:3s;
	z-index: 1;
}
@-moz-keyframes pulse {
 0% {
 -moz-transform: scale(0);
 opacity: 0.0;
}
 25% {
 -moz-transform: scale(0);
 opacity: 0.1;
}
 50% {
 -moz-transform: scale(0.1);
 opacity: 0.3;
}
 75% {
 -moz-transform: scale(0.5);
 opacity: 0.5;
}
 100% {
 -moz-transform: scale(1);
 opacity: 0.0;
}
}
@-webkit-keyframes pulse {
 0% {
 -webkit-transform: scale(0);
 opacity: 0.0;
}
 25% {
 -webkit-transform: scale(0);
 opacity: 0.1;
}
 50% {
 -webkit-transform: scale(0.1);
 opacity: 0.3;
}
 75% {
 -webkit-transform: scale(0.5);
 opacity: 0.5;
}
 100% {
 -webkit-transform: scale(1);
 opacity: 0.0;
}
}
.vnt-view .sub-title {
	font-size: 36px;
	letter-spacing: -1px;
	line-height: 50px;
	color: #383838;
	font-weight: 700;
	position: relative;
	padding-bottom: 15px;
	margin-bottom: 35px
}
.vnt-view .sub-title:before, .vnt-view .sub-title:after {
	position: absolute;
	left: 50%;
	bottom: 0;
	content: '';
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
}
.vnt-view .sub-title:before {
	width: 100px;
	height: 1px;
	background-color: #e5e5e5
}
.vnt-view .sub-title:after {
	width: 20px;
	height: 5px;
	line-height: 5px;
	text-align: center;
	font-family: FontAwesome;
	content: '\f111';
	font-size: 8px;
	color: #0397d6;
	bottom: -2px;
	z-index: 1;
	background-color: #FFFFFF;
}
.vnt-view .des {
	font-size: 18px;
	line-height: 28px;
	font-weight: 400;
}
/*==========================================================================*/
/*============================RESPONSIVE====================================*/
/*==========================================================================*/
@media all and (min-width: 992px) {
 .vnt-about .grid {
 margin: 0 -15px;
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: flex;
 align-items: center;
 justify-content: center;
}
 .vnt-about .grid .col {
 padding: 0 15px;
 width: 50%;
 position: relative;
}
 .vnt-about .grid .col:first-child {
 left: 50%
}
 .vnt-about .grid .col:last-child {
 right: 50%
}
 .vnt-history .caption {
 width: 52%
}
 .vnt-history .col-img {
 position: absolute;
 top: 0;
 right: 100px;
 z-index: 1;
 width: 42%;
}
 .vnt-why .row-why:nth-child(2n) .grid {
 flex-direction: row-reverse;
 text-align: right;
}
 .vnt-why .grid {
 display: -webkit-box;
 display: -moz-box;
 display: -ms-flexbox;
 display: flex;
 align-items: center;
}
 .vnt-why .grid .col {
 width: 50%;
}
.vnt-why .col:last-child {
padding:0 6em
}
 .vnt-why .row-why:nth-child(2n) .col:last-child {
padding-left: 10%
}
}
 @media all and (max-width: 991px) {
 .vnt-about .grid {
 display: block;
}
 .vnt-history {
padding:80px 0 40px;
background-position: left top
}
.vnt-history:before {
display: none
}
 .vnt-history .year {
 font-size: 48px;
 line-height: 40px;
 margin-bottom: 15px
}
.vnt-history .content {
 padding: 20px;
height: 290px
}
.vnt-history .des {
font-size: 16px;
max-height:240px;
}
 .vnt-about .des, .vnt-about .the-content {
 font-size: 13px;
}
 .vnt-about .des {
 margin-bottom: 30px;
}
.vnt-history .col-img {
margin-bottom:50px
}
.vnt-history .slick-dots {
width:100%;
left:0;
right:0;
margin-right:0;
bottom:350px
}
 .vnt-about .the-content {
 padding-top: 30px;
}
.vnt-why .tend {
 font-size: 30px;
 line-height: 40px;
padding-top: 10px
}
.vnt-why .des {
 font-size: 16px;
line-height:18px
}
.vnt-why .des .w1 {
 font-size: 18px;
}
.vnt-view {padding: 0}
.vnt-view .row *[class^="col-"] {margin-bottom: 30px}
.vnt-view .sub-title {
    font-size: 30px;
	margin-bottom: 20px
}
.vnt-view .des {
    font-size: 16px;
}
}
@media all and (min-width: 992px) and (max-width: 1199px) {
 .vnt-history .slick-dots {
right:15px;
bottom:100px
}
}