html {height:100%}
body {height:100%}

#main #container {padding:0; height:100%; overflow:hidden; position:relative}


.section {  width: 100%; }
.container {
  width: 90%;
  max-width: 1300px;
  margin: 0 auto;
}



.vi {width:100%; position:absolute;  height:100%; overflow:hidden; top:0; background:url('/common/img/vi3.jpg') no-repeat center; background-size:cover; }


.vi .text { position:absolute; width:50%; left:3%; text-align:left; color:#fff; top:50%; 
transform: translate(0, -65%);  z-index:99999 ; }
 
.vi h2 {font-weight:300; font-size:2rem; letter-spacing:2px; margin-bottom:15px;}
.vi .svg_box {width:100%; height:7vw; position:relative;  font-weight:900 }
.vi p.tt {line-height:1.45; font-size:1.45rem; font-weight:300; margin-top:10px}

  
 .side_text {position:absolute; z-index:999; left:3%; bottom:0; writing-mode: vertical-rl;
    font-size: 14px;
    color: #fff;
    font-weight: 300;
    letter-spacing: .4em;
    padding-bottom: 120px;}

.side_line {position: absolute;
    width: 1px;
    height: 100px;
    background:rgba(255,255,255,.2);
    transition: all 0.3s;
    display: block;
    left: 7px;
    bottom: 0; overflow:hidden}

.side_line p {
position: absolute;
    width: 1px;
    height: 50px;
    background: #fff;
    transition: all 0.3s;
    display: block;
    left: 0;
    top: 0;
	-webkit-animation: side_line 4s infinite linear;
	  -moz-animation: side_line 4s infinite linear;
	  -ms-animation: side_line 4s infinite linear;
	  -o-animation: side_line 4s infinite linear;
	  animation: side_line 4s infinite linear;
}



@-webkit-keyframes side_line {
  0% {
    -webkit-transform: translateY(-100px);
            transform: translateY(-100px);
  }
 100% {
    -webkit-transform: translateY(150px);
    transform: translateY(150px);
	}
 

}
 


@keyframes opacity {
			0% {opacity:.2}
			50% {opacity:1 }
			100% {opacity:.2} 
    }




.vi_text_ani svg {
	font-family: 'Russo One', sans-serif;
	position: absolute; 
	width: 100%; height: 100%; left:0;
}
.vi_text_ani  svg text {
	text-transform: uppercase;
	animation: stroke 5s infinite alternate;
	stroke-width: 1;
	stroke: #365fa0;
	font-size: 140px;
}
@keyframes stroke {
	0%   {
		fill: rgba(72,138,20,0); stroke: rgba(255,255,255,1);
		stroke-dashoffset: 25%; stroke-dasharray: 0 50%; stroke-width: 1;
	}
	70%  {fill: rgba(72,138,20,0); stroke: rgba(255,255,255,1); }
	80%  {fill: rgba(72,138,20,0); stroke: rgba(255,255,255,1); stroke-width: 1; }
	100% {
		fill: rgba(255,255,255,1); stroke: rgba(54,95,160,0); 
		stroke-dashoffset: -25%; stroke-dasharray: 50% 0; stroke-width: 0;
	}
}

.customer {width:100%; text-align:center; background-color:#054dae; color:#fff; position:relative; overflow:hidden }
.customer .container {position:relative; z-index:999;  padding:80px 0; }
.customer span {letter-spacing:1.5px;  font-weight:300; font-size:1.1rem; }
.customer h3 {font-size:2.7rem;   margin-top:10px; letter-spacing:-2px}
.customer p {font-size:1.1rem; line-height:1.5;/*  margin-bottom:20px;  */margin-top:10px;  }
.customer a {color:#fff; border:1px solid rgba(255,255,255,.5); padding:12px 50px; display:inline-block; font-size:1.2rem; border-radius:55px; margin-right:10px; transition: all 0.3s;}
.customer a:hover {background-color:#fff; border:1px solid #fff; color:#333 !important}
.customer img {position:absolute; width:100%; top:0; left:0; opacity:.2 }
.customer iframe {position:absolute; width:100%; top:0; left:0; }
.customer .btn {display:flex; justify-content:center}



 @media all and (max-width:900px) {
			 
		 .vi {width:100%; position:absolute;  height:100%; overflow:hidden; top:0; background:url('/common/img/vi3_m.jpg') no-repeat right; background-size:cover; }
 
		.vi .text { width:100%; left:0; top:50%; transform: translate(0, -47%); }
		.vi .svg_box { height:12vw; margin-left:-5px }
		.vi  h2 {text-align:center; font-size:1.5rem; margin-bottom:15px}
		.vi  p.tt {text-align:center; font-size:1rem; width:70%;  margin-left:15%}
		.right_ci {  width:120%; padding-bottom:80%;  bottom:-2%; right:-20%  }
		.side_text {display:none}
		.side_line {display:none}

 		.customer .container { padding:50px 0;}
		.customer h3 {font-size:5.5vw; margin-bottom:0; letter-spacing:-.5px}

		.customer p {font-size:.95rem;   }
		.customer a {font-size:1rem; margin:0 0.3%; padding:10px 0; width:48%}
 }		 

 @media all and (max-height:700px) {
		.vi .text { transform: translate(0, -50%);    }
		.side_text  {display:none }
 }

 

 .mySwiper {padding:80px 0 60px 0; /* background:url('/common/img/main_bg.png') repeat-y; background-size:100%; */ background-color:#0e1b24}
 .swiper-slide {box-sizing:border-box; padding:0 30px;  }
.mySwiper .swiper-pagination-bullet  {opacity:.1}
.mySwiper .swiper-pagination-bullet-active {opacity:1; background-color:#333}
.mySwiper .swiper-slide:hover {cursor:pointer}

.mySwiper .swiper-slide div.img_box {width:100%; margin:0 auto; padding-bottom:90%; position:relative; background-color:#fff; border-radius:20px 20px 0  0;  overflow:hidden}
.mySwiper .swiper-slide div.img_box img {width:100%;  position:absolute; left:50%; top:50%; transform: translate(-50%, -50%); }

.mySwiper .swiper-slide h3 {font-size:1.5em; text-align:center; font-weight:600; line-height:1.3;   display:flex; align-items:Center;  justify-content:center; height:65px;  background-color:#fff; margin-bottom:20px; border-radius:0 0 20px 20px  }
.mySwiper .swiper-slide h3 img {max-width:50%; max-height:60%}
 
.mySwiper .swiper-slide p {font-size:1.05em; text-align:center; font-weight:400; line-height:1.4; color:rgba(255,255,255,.8);
width: 100%;

 overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
word-wrap: break-word;

}

.swiper-pagination-bullet {background-color:#fff}
.swiper-pagination-bullet-active {background-color:#fff !important}
 
.swiper-pagination {margin-top:30px}


 @media all and (min-width:900px) {
 
 		.mySwiper .swiper-slide  div.img_box:after {content:'+'; position:absolute; left:0; top:0; width:100%; height:100%; background:rgba(27,43,87,.9);  border-radius:20px 20px 0  0; color:#fff; font-size:6rem; font-weight:200; text-align:center; display:flex; align-items:center; justify-content:center; opacity:0; transition: all 0.3s;}
     	.mySwiper .swiper-slide:hover div.img_box:after {opacity:1}



}

 @media all and (max-width:900px) {
		.mySwiper {margin:55px 0 40px 0}
 		.swiper-slide {box-sizing:border-box; padding:0 15px;  }

		.mySwiper .swiper-slide h3 {font-size:1.15em;  }
		.mySwiper .swiper-slide h3 img {max-width:70%;}
		.mySwiper .swiper-slide p {font-size:1em; }

 		.swiper-pagination {margin-top:15px}



}