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

.homeBanner ul.slick-dots {
	width: 100%;
	position: absolute;
	bottom: 0;
}
.bannerAnimation {
	position: relative;
	overflow: hidden;
	z-index: 1;
	height: calc(100vh - 106px);
	min-height: 100%;
	width: 100%;
	margin-top: 106px;
}

/*** banner 25th ***/
.banner_25th .bgImg {
	position: absolute;
	width: 100%;
	height: 100%;
	z-index: -1;
	background-image: url(../images/home/banner_25th_bg.jpg);
	background-size: cover;
	background-position: center;
	opacity: 0.5;
}
.banner_25th.act .bgImg {
	animation: bannerBg 1s 0.5s both;
}
.banner_25th .bgWrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.banner_25th .bgWrapper > div {
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	opacity: 0;
}
.banner_25th .bgWrapper .bg_lines {
	background-image: url(../images/home/banner_25th_lines.png);
}
.banner_25th.act .bgWrapper .bg_lines {
	animation: bannerFadeIn 0.8s 1s both;
}
.banner_25th .bgWrapper .bg_star1 {
	background-image: url(../images/home/banner_25th_star1.png);
}
.banner_25th.act .bgWrapper .bg_star1 {
	animation: bannerFadeIn 1s ease-in 1.8s both, bannerSparkle 1.3s ease-in-out 3s infinite alternate;
}
.banner_25th .bgWrapper .bg_star2 {
	background-image: url(../images/home/banner_25th_star2.png);
}
.banner_25th.act .bgWrapper .bg_star2 {
	animation: bannerFadeIn 1s ease-in 2.5s both, bannerSparkle 1.5s ease-in-out 3.8s infinite alternate;
}
.banner_25th .bgWrapper .bg_star3 {
	background-image: url(../images/home/banner_25th_star3.png);
}
.banner_25th.act .bgWrapper .bg_star3 {
	animation: bannerFadeIn 1s ease-in 3.2s both, bannerSparkle 1.5s ease-in-out 4.5s infinite alternate;
}
.banner_25th .textWrapper {
	position: absolute;
	width: 60%;
	max-width: 741px;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -53%);
}
.banner_25th .textWrapper .static_bg {
	position: relative;
	width: 100%;
	opacity: 0;
}
.banner_25th .textWrapper .banner_title {
	width: 100%;
	margin-bottom: 10px;
	opacity: 0;
}
.banner_25th.act .textWrapper .banner_title {
	animation: bannerFadeIn 0.8s ease-in 5s both;
}
.banner_25th .textWrapper .banner_img_25th {
	width: 93.4%;
	margin: 0 auto;
	position: relative;
}
.banner_25th .textWrapper .banner_img_25th img {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	opacity: 0;
}
.banner_25th .textWrapper .banner_img_25th img.static_bg {
	position: relative;
	z-index: -1;
}
.banner_25th.act .textWrapper .banner_img_25th .banner_img_ani_1 {
	animation: bannerFadeIn 0.8s ease-in 3.5s both;
}
.banner_25th.act .textWrapper .banner_img_25th .banner_img_ani_2 {
	animation: bannerFadeIn 0.8s ease-in 4.2s both;
}

/*** banner_cm (water drop) ***/ 
.banner_cm {
	background-color: #a9c9e6;
}
.banner_cm.act {
	animation: bannerBg 1s 0.5s both;
}
.banner_cm .bgImg {
	background-image: url("../images/home/banner_bg_icon.png");
	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%);
}
.banner_cm.act .bgImg {
	animation: bannerFadeIn 1s 0.5s both;
}
.banner_cm .imgWrapper {
	position: absolute;
	top: 50%;
	left: 50%;
	width: auto;
	height: auto;
	min-width: 100%;
	min-height: 100%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);	
}
.banner_cm .imgWrapper img { 
	position: absolute;
	opacity: 0;
}
.banner_cm .banner_waterdrop_wrapper {
	position: absolute;
	top: 50%;
	right: 12.5%;
	transform: translateY(-50%);
}
.banner_cm .banner_waterdrop_wrapper img.static_bg {
	position: relative;
	opacity: 0;
	max-height: calc((100vh - 106px) * 0.95);
	max-width: 30vw;
	display: block;
}
.banner_cm .banner_waterdrop_wrapper .banner_waterdrop {
	position: absolute;
	width: 100%;
	height: 0%;
	top: 0;
	background-image: url("../images/home/banner_waterdrop.png");
	background-repeat: no-repeat;
	background-size: 100% auto;
}
.banner_cm.act .banner_waterdrop_wrapper .banner_waterdrop {
	animation: bannerWaterdrop 0.8s ease-in 4.5s both;
}
.banner_cm .textWrapper {
	position: absolute;
	width: 40%;
	max-width: 730px;
	left: 15%;
	top: 35%;
}
.banner_cm .textWrapper img.banner_text {
	width: 100%;
}
.banner_cm.act .textWrapper img.banner_text1 {
	animation: bannerFadeIn 0.5s linear 5.5s both;
}
.banner_cm.act .textWrapper img.banner_text2 {
	margin-top: 23%;
	animation: bannerFadeIn 0.5s linear 6.5s both;
}
.banner_cm.act .textWrapper img.banner_text3 {
	margin-top: 47%;
	animation: bannerFadeIn 0.5s linear 7.5s both;
}
.banner_cm .textWrapper img.banner_plus {
	width: 6%;
	left: 49%
}
.banner_cm.act .textWrapper img.banner_plus1 {
	margin-top: 13%;
	animation: bannerFadeIn 0.5s linear 6s both;
}
.banner_cm.act .textWrapper img.banner_plus2 {
	margin-top: 36%;
	animation: bannerFadeIn 0.5s linear 7s both;
}
.banner_cm .bgWrapper {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 50%;
	transform: translateY(-50%);
}
.banner_cm .bgWrapper img.static_bg {
	position: relative;
	top: 0;
	width: 100%;
	height: 100%;	
}
.banner_cm.act .bgWrapper img.static_bg {
	animation: bannerFadeIn 1s linear 4.5s both;
}
.banner_cm .bgWrapper .bg_icon {
	position: absolute;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	z-index: 1;
	opacity: 0;
}
.banner_cm .bgWrapper .bg_icon.bg_icon_ai {
	background-image: url("../images/home/banner_icon_ai.png");
}
.banner_cm .bgWrapper .bg_icon.bg_icon_5g {
	background-image: url("../images/home/banner_icon_5g.png");
}
.banner_cm .bgWrapper .bg_icon.bg_icon_car {
	background-image: url("../images/home/banner_icon_car.png");
}
.banner_cm .bgWrapper .bg_icon.bg_icon_wifi {
	background-image: url("../images/home/banner_icon_wifi.png");
}
.banner_cm .bgWrapper .bg_icon.bg_icon_location {
	background-image: url("../images/home/banner_icon_location.png");
}
.banner_cm .bgWrapper .bg_icon.bg_icon_unlimited {
	background-image: url("../images/home/banner_icon_unlimited.png");
}
.banner_cm.act .banner_icon_ani_1 {
	animation: bannerFadeIn 0.8s 1.5s both, bannerSparkle 1s 4.3s infinite alternate; 
}
.banner_cm.act .banner_icon_ani_2 {
	animation: bannerFadeIn 0.8s 2s both, bannerSparkle 1s 3.7s infinite alternate; 
}
.banner_cm.act .banner_icon_ani_3 {
	animation: bannerFadeIn 0.8s 2.5s both, bannerSparkle 1s 3.5s infinite alternate; 
}
.banner_cm.act .banner_icon_ani_4 {
	animation: bannerFadeIn 0.8s 3s both, bannerSparkle 1s 4.1s infinite alternate; 
}
.banner_cm.act .banner_icon_ani_5 {
	animation: bannerFadeIn 0.8s 3.5s both, bannerSparkle 1s 4.7s infinite alternate; 
}
.banner_cm.act .banner_icon_ani_6 {
	animation: bannerFadeIn 0.8s 4s both, bannerSparkle 1s 5s infinite alternate; 
}

@keyframes bannerFadeIn {
	0%   { opacity: 0; }
	100%   { opacity: 1; }
}
@keyframes bannerSparkle {
	0%   { opacity: 1; }
    40%   { opacity: 1; }
    100%   { opacity: 0.3; }
}
@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; }
}
@keyframes bannerWaterdrop {
	0% { height: 0; }
	100% { height: 100%; }
}
@keyframes bannerSildeRight {
	0%   { transform: translateX(-120%); }
	100%   { transform: translateX(0); }
}

/* Wechat Banner */


.banner_wechat .bgImg {
	background: url(../images/home/wechatBg.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%);
}
.banner_wechat.act .bgImg {
	animation: bannerFadeIn 1s 0.5s both;
}
.banner_wechat.act .wechatText{
	background: url(../images/home/wechat_text.png) no-repeat; background-size: cover; background-position: center;
	width: 100%;
	height: 100%;
	animation: bannerSildeRight 1s 2s both;
}

/* inno Banner */


.banner_inno .bgImg {
	background: url(../images/home/banner_inno_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%);
}
.banner_inno.act .bgImg {
	animation: bannerFadeIn 1s 0.5s both;
}
.banner_inno.act .innoText{
	background: url(../images/home/banner_inno_text.png) no-repeat; background-size: cover; background-position: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	animation: bannerSildeIn 1s 3s both;
}
.banner_inno.act .innoPeople{
	background: url(../images/home/banner_inno_people.png) no-repeat; background-size: cover; background-position: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	animation: bannerSildeRight 1s 2s both;
}


/* Banner 2024 */
.banner_2024 .bgImg, .banner_2024 .slogan {
	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%);
}
.banner_2024.act .bgImg.bgImg1 {
	background-image: url(../images/home/banner_2024_bg1.png);
	animation: bannerFadeIn 1s 0.5s both;
}
.banner_2024.act .slogan.slogan1 {
	background-image: url(../images/home/banner_2024_text1.png);
	animation: bannerFadeIn 1s 0.5s both, bannerFadeIn 0.5s 3s reverse forwards;
}
.banner_2024.act .bgImg.bgImg2 {
	background-image: url(../images/home/banner_2024_bg2.png);
	animation: bannerFadeIn 1s 3.5s both;
}
.banner_2024.act .slogan.slogan2 {
	background-image: url(../images/home/banner_2024_text2.png);
	animation: bannerFadeIn 1s 3.5s both, bannerFadeIn 0.5s 6s reverse forwards;
}
.banner_2024.act .bgImg.bgImg3 {
	background-image: url(../images/home/banner_2024_bg3.png);
	animation: bannerFadeIn 1s 6.5s both;
}
.banner_2024.act .bgImg.bgImg3_icon {
	background-image: url(../images/home/banner_2024_bg3_icon.png);
	animation: bannerFadeIn 1s 6.5s both, bannerFadeIn 0.5s 9s reverse forwards;
}
.banner_2024.act .slogan.slogan3 {
	background-image: url(../images/home/banner_2024_text3.png);
	animation: bannerFadeIn 1s 6.5s both, bannerFadeIn 0.5s 9s reverse forwards;
}
.banner_2024.act .bgImg.bgImg4-1 {
	background-image: url(../images/home/banner_2024_bg4_1.png);
	animation: bannerSlideDown 0.7s 9.2s both;
}
.banner_2024.act .bgImg.bgImg4-2 {
	background-image: url(../images/home/banner_2024_bg4_2.png);
	animation: bannerSlideUp 0.7s 9.2s both;
}
.banner_2024.act .slogan.slogan4 {
	background-image: url(../images/home/banner_2024_text4.png);
	animation: bannerFadeIn 1s 9.7s both;
}
@media screen and (min-width: 768px) and (orientation: portrait) {
	.banner_2024 .bgImg, .banner_2024 .slogan {
		background-position: 35% center;
	}
}

@keyframes bannerSlideDown {
	0% { opacity: 1; transform: translate(-50%, -150%); }
	100% { opacity: 1; transform: translate(-50%, -50%); }
}
@keyframes bannerSlideUp {
	0% { opacity: 1; transform: translate(-50%, 50%); }
	100% { opacity: 1; transform: translate(-50%, -50%); }
}


@media screen and (max-width: 1500px) {
	.banner_cm .bgImg, .banner_cm .bgWrapper .bg_icon { background-position: 40% center; }
}

@media screen and (max-width: 1023px) {
	.banner_cm .bgImg, .banner_cm .bgWrapper .bg_icon { background-position: 20% center; }
}

@media screen and (max-width: 767px) {
	.bannerAnimation { height: 340px; margin-top: 20px; }
}


.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;
}