@charset "utf-8";
/* CSS Document */

.bannerAnimation {
	position: relative;
	overflow: hidden;
	z-index: 1;
	height: calc(100vh - 106px);
	min-height: 100%;
	width: 100%;
	background-color: rgba(0,0,0,0.5);
	margin-top: 106px;
	animation: bannerBg 1s 0.5s both;
}
.bannerAnimation .bgImg {
	background-image: url("../images/home/banner_bg.jpg");
	background-size: cover;
	background-position: center;
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	z-index: -1;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
.bannerAnimation .imgWrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	z-index: -1;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);	
}
.bannerAnimation .banner_sea {
	background-image: url("../images/home/banner_sea.png");
	background-size: cover;
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	min-width: 110%;
	min-height: 115%;
	z-index: -1;
	-webkit-transform: translate(-50%, -53%);
	transform: translate(-50%, -53%);
	opacity: 0.85;
}
.bannerAnimation .imgWrapper img { 
	position: absolute;
	opacity: 0;
}
.bannerAnimation .imgWrapper img.banner_light { 
	width: 100%;
	top: 50%;
	transform: translateY(-50%);
	opacity: 1;
	max-height: 980px;
}
.bannerAnimation .iconWrapper {
	position: absolute;
	width: auto;
	height: auto;
	top: 50%;
	transform: translateY(-50%);
}
.bannerAnimation .iconWrapper img.banner_light.static_bg {
	position: relative;
	top: 0;
	transform: none !important;
	opacity: 0 !important;
}
.bannerAnimation .imgWrapper img.banner_icon_5g { 
	width: 13%;
	top: 25%;
	left: 5%;
	z-index: 2;
}
.bannerAnimation .imgWrapper img.banner_icon_ai { 
	width: 17%;
	top: 52%;
	left: 16.3%;
	z-index: 2;
}
.bannerAnimation .imgWrapper img.banner_icon_iot { 
	width: 13.3%;
	top: 1%;
	left: 13.3%;
	z-index: 2;
}
.bannerAnimation .imgWrapper img.banner_icon_cloud { 
	width: 11.1%;
	top: 29.9%;
	left: 24.9%;
	z-index: 2;
}
.bannerAnimation .imgWrapper img.banner_icon_bigdata { 
	width: 12%;
	top: 7.8%;
	left: 31.2%;
	z-index: 2;
}
.bannerAnimation .imgWrapper img.banner_icon_edge { 
	width: 7%;
	top: 38.7%;
	left: 38.6%;
	z-index: 2;
}
.bannerAnimation .imgWrapper img.banner_icon_uhd { 
	width: 11.7%;
	top: 52%;
	left: 30.8%;
}
.bannerAnimation .imgWrapper img.banner_icon_ar { 
	width: 10%;
	top: 60%;
	left: 37.5%;
}
.bannerAnimation .imgWrapper img.banner_icon_blockchain { 
	width: 11.2%;
	top: 31%;
	left: 42.6%;
}
.bannerAnimation .imgWrapper img.banner_icon_message { 
	width: 6%;
	top: 49.5%;
	left: 48%;
}
.bannerAnimation .imgWrapper img.banner_icon_element { 
	width: 8%;
	top: 44%;
	left: 52.5%;
}
.bannerAnimation .imgWrapper img.banner_icon_car { 
	width: 2.3%;
	top: 53%;
	left: 55%;
}
.bannerAnimation .imgWrapper img.banner_slogan {
	width: 35%;
	max-width: 650px;
	right: 4%;
	bottom: 11%;
	opacity: 1;
}
.bannerAnimation .banner_ani_1 {
	position: absolute;
	width: 100%;
	height: 100%;
	/*animation: bannerSea 4.5s 2s infinite alternate;*/
}
.bannerAnimation .banner_ani_2 {
	position: absolute;
	width: 100%;
	height: 100%;
	/*animation: bannerLight 2s 1s ease-in-out both;*/
}
.bannerAnimation .banner_ani_3  {
	animation: bannerFadeIn 0.8s 2s both, bannerSparkle 1.5s 6s infinite alternate; 
}
.bannerAnimation .banner_ani_4  {
	animation: bannerFadeIn 0.8s 2.6s both, bannerSparkle 1.5s 6.5s infinite alternate; 
}
.bannerAnimation .banner_ani_5  {
	animation: bannerFadeIn 0.8s 3.2s both, bannerSparkle 1.5s 6.8s infinite alternate; 
}
.bannerAnimation .banner_ani_6  {
	animation: bannerFadeIn 0.8s 3.8s both, bannerSparkle 1.5s 6.2s infinite alternate; 
}
.bannerAnimation .banner_ani_7  {
	animation: bannerFadeIn 0.8s 4.4s both, bannerSparkle 1.5s 6.6s infinite alternate; 
}
.bannerAnimation .banner_ani_8  {
	animation: bannerFadeIn 0.8s 5s both, bannerSparkle 1.5s 6.9s infinite alternate; 
}
.bannerAnimation .banner_ani_9  {
	animation: bannerFadeIn 0.8s 5.6s both, bannerSparkle 1.5s 7.2s infinite alternate; 
}
.bannerAnimation .banner_ani_10  {
	animation: bannerFadeIn 0.8s 6s both, bannerSparkle 1.5s 7.5s infinite alternate; 
}
.bannerAnimation .banner_ani_11  {
	animation: bannerFadeIn 0.8s 6.4s both, bannerSparkle 1.5s 7.3s infinite alternate; 
}
.bannerAnimation .banner_ani_12  {
	animation: bannerFadeIn 0.8s 6.8s both, bannerSparkle 1.5s 7.8s infinite alternate; 
}
.bannerAnimation .banner_ani_13  {
	animation: bannerFadeIn 0.8s 7.2s both, bannerSparkle 1.5s 8s infinite alternate; 
}
.bannerAnimation .banner_ani_14  {
	animation: bannerFadeIn 0.8s 7.6s both, bannerSparkle 1.5s 8.5s infinite alternate; 
}
.bannerAnimation .banner_ani_15  {
	animation: bannerFadeIn 0.5s 8s linear both;
}

@keyframes bannerFadeIn {
	0%   { opacity: 0; }
	100%   { opacity: 1; }
}
@keyframes bannerSparkle {
	0%   { opacity: 1; }
    40%   { opacity: 1; }
    100%   { opacity: 0.4; }
}
@keyframes bannerSildeIn {
	0%   { transform: translateX(120%); }
	100%   { transform: translateX(0); }
}
@keyframes bannerBg {
	0%   { opacity: 0.5; }
	100%   { opacity: 1; }
}
@keyframes bannerSea {
	0%   { transform: translateX(0) translateZ(0) scaleY(1); }
	50%   { transform: translateX(1.5%) translateY(5%) scaleY(0.85); }
	100%   { transform: translateX(0%) translateY(0%) scaleY(1); }
}
@keyframes bannerLight {
	0%   { transform: scale(3) translateX(-100%); opacity: 1; }
	100%   {  transform: scale(1) translateX(0); opacity: 1; }
}

@media screen and (max-width: 1023px) {
	.bannerAnimation .bgImg { background-position: 70% center; }
	.bannerAnimation .iconWrapper > img { transform: scale(1.2); }
}

@media screen and (max-width: 767px) {
	.bannerAnimation { height: 340px; margin-top: 65px; }
	.bannerAnimation .bgImg { background-image: url("../images/home/banner_bg_m.jpg"); }
	.bannerAnimation .banner_sea { background-size: auto 100%; background-position: left bottom; background-repeat: no-repeat; opacity: 0.6; }
	.bannerAnimation .imgWrapper img.banner_light { transform: translateY(-52%); height: 50vh }	
	.bannerAnimation .iconWrapper { transform: translateY(-40%); }
	.bannerAnimation .iconWrapper > img { transform: scale(1.5); }
	
	.bannerAnimation .imgWrapper img.banner_slogan { width: 40%; bottom: 22%; }
}

.bannerContact {
	width: 45px;
	height: 45px;
	position: fixed;
	left: 0;
	bottom: 60px;
	z-index: 100;
	background: rgba(0,0,0,0.6);
	border-radius: 0 10px 10px 0;
}
.bannerContact .btn-contact {
	width: 100%;
	height: 100%;
	border-radius: 0 10px 10px 0;
	position: absolute;
	background-image: url("../images/home/icon_ircontact.png");
	background-size: 55%;
	background-position: center;
	background-repeat: no-repeat;
}