
html {
	height: 100%;
}

body {
	height: 100%;
}

.container {
	position: relative;
}
h1,h2,h4{
	font-weight: 400;
}
/* 顶部导航栏 */

/* 主体内容 */


/* banner1------------------------------------------ */
#banner1.wait {
	opacity: 0;
}

#banner1 {

	opacity: 1;
	transition: all 1.5s 1s;
}

/* ---------第一部分--------------------------------- */
.banner1row {
	color: #fff;
	position: relative;
	background: url(../images/bg12.png) no-repeat center;
	background-size:100% 100%;
}
.banner1row h1 {
	font-size: 6.25em;
	opacity: 1;
	transition: all 1.2s 1s;
}
.wait .banner1row h1 {
	opacity: 0;
	transform: translateX(-100px);
	-webkit-transform: translateX(-100px);
}

.banner1row h2 {
	margin-top: 70px;
	font-size: 60px;
	opacity: 1;
	transition: all 1.2s 2s;
}
.wait .banner1row h2 {
	opacity: 0;
	transform: translateX(-100px);
	-webkit-transform: translateX(-100px);
}

.banner1row button {
	width: 320px;
	height: 90px;
	border: none;
	outline: none;
	border-radius: 45px;
	background: #fff;
	font-size: 50px;
	box-shadow: 0 5px 8px rgba(0, 0, 0, 0.3);
	position: absolute;
	bottom: -75%;
	right: 0%;
	opacity: 1;
	transition: all 1.2s 2s;
	cursor: pointer;
}

.wait .banner1row button {
	opacity: 0;
	transform: translateY(100px);
	-webkit-transform: translateY(100px);
}


.banner1row button a{
	color: #2072ED;
}
.banner1row img {
	width: 90%;
	height: 90%;
	position: relative;
	top: -52px;
	right: -80px;
	opacity: 1;
	transition: all 1.2s 1s;
}
.wait .banner1row img {
	opacity: 0;
	transform: translateY(100px);
	-webkit-transform: translateY(100px);
}
.banner1row p {
	color: #fff;
	font-size: 30px;
	position: absolute;
	bottom: -95%;
	right: 0%;
	cursor: pointer;
	opacity: 1;
	transition: all 1.2s 2.5s;
}
.wait .banner1row p {
	opacity: 0;
	transform: translateY(100px);
	-webkit-transform: translateY(100px);
}
/* ---------第二部分--------------------------------- */
.banner2row {
	background: url(../images/bg1.png) no-repeat center;
	background-size: 100% 100%;
	background-position: 0 -900px;
}

.banner2row h1 {
	font-size: 60px;
	color: #fff;
	text-align: center;
	margin-top: 150px;
	margin-bottom: 160px;
}

.banner2row .card {
	width: 290px;
	height: 200px;
	border: 1px solid #d2d2d2;
	border-radius: 20px;
	background-color: #fff;
	text-align: center;
	margin: 20px auto;
	padding: 10px;
}

.banner2row .card img {
	margin-top: 12px;
}

.banner2row .card h4 {
	font-size: 26px;
	color: #333333;
}

.banner2row .card p {
	font-size: 18px;
	color: #B3B3B3;
}

.banner2row .down {
	margin-top: 84px;
	text-align: center;
	margin-bottom: 240px;
}

.card:nth-child(2):hover {
	background: url(../images/hover1.png) center;
	border: none;
}

/* ---------第三部分--------------------------------- */
.banner3row {
	background: url(../images/bg2.png) no-repeat center;

	height: 823px;

}
.banner3row img{
	width: 100%;
}
.banner3row p {
	font-size: 50px;
	color: #2072ed;
}

.banner3row .dialogue {
	margin-top: 146px;
	position: relative;
	height: 94px;
}

.banner3row .dialogue .dialogue1 {
	position: absolute;
	right: -22%;
	top: -120%;
}

.banner3row .dialogue .dialogue2 {
	position: absolute;
	left: 25%;
	top: -70%;
}

.banner3row .dialogue .dialogue3 {
	position: absolute;
	left: -22%;
	top: -100%;
}

.banner3row .banner3row_p {
	margin-top:246px;
	text-align: center;
}

/* ---------第四部分--------------------------------- */
.banner4row {
	width: 100%;
	height: 950px;
	background: url(../images/bg6.png) center;
	background-size: 100% 100%;
	color: #fff;
	text-align: center;
}

.banner4row h1 {
	font-size: 60px;
	margin-top: 74px;
}

.banner4row h4 {
	font-size: 30px;
	margin: 48px 0;
}

.banner4row .img {
	position: relative;
}

.banner4row .img1 {
	position: relative;
	top: 0px;
	right: 140px;
}

.banner4row .img2 {
	position: absolute;
	top: 148px;
	right: 71px;
}

.banner4row .img3 {
	position: absolute;
	top: 296px;
	right: 196px;
}

.banner4row .img4 {
	position: absolute;
	top: 460px;
	right: 71px;
}

.banner4row .img5 {
	position: relative;
	top: 0px;
	left: 151px;
}

.banner4row .img6 {
	position: absolute;
	top: 141px;
	left: 64px;
}

.banner4row .img7 {
	position: absolute;
	top: 286px;
	left: 136px;
}

.banner4row .img8 {
	position: absolute;
	top: 446px;
	left: 102px;
}

/* ---------第五部分--------------------------------- */
.banner5row {
	background-color: #FAFAFA;
}

.banner5row h1 {
	font-size: 61px;
	color: #2072ED;
	text-align: center;
	margin-top: 127px;
	margin-bottom: 85px;
}

.banner5row .b5body {
	width: 100%;
	height: 557px;
	background: #fff;
	border-radius: 20px;
	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.1);
	margin-bottom: 146px;

}

.banner5row .b5body .options {
	box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
	border: 1px solid #E1E1E1;
	border-radius: 20px 20px 0 0;
	overflow: hidden;
}

.banner5row .b5body .option {
	height: 110px;
	background: #fff;
	border-left: 1px solid #E1E1E1;
	text-align: center;
	line-height: 110px;
	font-size: 22px;
	color: #333;
	cursor: pointer;
}

.banner5row .b5body #option1 {
	border-left: none;
	background: url(../images/virtual.png) no-repeat center;
}

.banner5row .b5body #option2 {
	background: url(../images/wifi.png) no-repeat center;
}

.banner5row .b5body #option3 {
	background: url(../images/sim.png) no-repeat center;
}

.banner5row .b5body #option4 {
	background: url(../images/WLAN.png) no-repeat center;
}

.banner5row .b5body .selected {
	color: #fff;
	background-color: #6147F0!important;
}

.banner5row .product1 {
	margin-top: 50px;
	box-sizing: border-box;
}
.banner5row .product1 img{
	width: 100%;
}
.banner5row button {
	border-radius: 18px;
	border: none;
	outline: none;
	padding: 10px 15px;
	font-size: 13px;
	text-align: center;
	margin: 100px 16px 40px 0;
}

.banner5row .green {
	background-color: #d9ffdc;
	color: #2acb35;
}

.banner5row .pink {
	background-color: #ffd9fd;
	color: #f100e5;
}

.banner5row .blue {
	background-color: #d5e5fd;
	color: #2072ed;
}

.banner5row h4 {
	font-size: 20px;
	color: #1e4778;
	margin-bottom: 25px;
}

.banner5row p {
	font-size: 20px;
	color: #2778be;
	margin-bottom: 16px;
}

.banner5row p strong {
	color: #e53438;
}

/* ---------第六部分--------------------------------- */
.banner6row {
	text-align: center;
}

.banner6row h1 {
	font-size: 60px;
	color: #2072ED;
	margin-top: 127px;
	margin-bottom: 90px;
}

.banner6row img {
	margin-bottom: 210px;
	width: 100%;
}

/* ---------第七部分--------------------------------- */
.banner7row {
	background: url(../images/bg8.png) no-repeat center;
	background-size: 100% 100%;
	text-align: center;
	color: #fff;
}

.banner7row h1 {
	font-size: 60px;
	margin-top: 76px;
	margin-bottom: 25px;
}

.banner7row p {
	font-size: 28px;
	margin-bottom: 40px;
}

/* ---------第八部分--------------------------------- */
.banner8row {
	text-align: center;
	color: #fff;
	position: relative;
	overflow: hidden;
}

.banner8row h1 {
	font-size: 60px;
	margin-top: 249px;
	margin-bottom: 85px;
	color: #2072ED;
}

.banner8row img {
	margin-bottom: 157px;
	width: 22%;
}

.banner8row .bgr {
	position: absolute;
	top: 87px;
	right: -10%;
}

.banner8row .bgl {
	position: absolute;
	top: 575px;
	left: -10%;
}

/* ---------第九部分--------------------------------- */
.banner9row {
	background: url(../images/bg10.png) no-repeat center;
	background-size: 100% 100%;
	text-align: center;
	color: #fff;
}

.banner9row h1 {
	font-size: 60px;
	margin-top: 105px;
	margin-bottom: 80px;
}

.banner9row h2 {
	font-size: 100px;
}

.banner9row p {
	font-size: 40px;
	margin-bottom: 150px;
}

/* ---------第十部分--------------------------------- */
.banner10row {
	text-align: center;
	color: #fff;
}

.banner10row h1 {
	font-size: 60px;
	margin-top: 155px;
	margin-bottom: 183px;
	color: #2072ED;
}

.banner10row img {
	margin-bottom: 320px;
	width: 100%;
}

/* ;媒介查询 */
/* 992px-1399px */
@media screen and (min-width: 992px) and (max-width: 1399px) {
	.topbar {
		width: 80%;
		left: 10%;
	}

	.logo {
		width: 67%;
	}

	.banner2row h1,
	.banner3row h1,
	.banner4row h1,
	.banner5row h1,
	.banner6row h1,
	.banner7row h1,
	.banner8row h1,
	.banner9row h1,
	.banner10row h1 {
		font-size: 45px !important;
		transition: none;
	}

	/* --------第一部分--------------------------- */
	.banner1row h1 {
		font-size: 75px;
		transition: none;
		margin-top: 55px;
	}

	.banner1row h2 {
		font-size: 45px;
		transition: none;
	}

	.banner1row img {
		width: 75%;
		height: 75%;
		transition: none;
		top: 0;
	}

	.banner1row button {
		width:180px;
		height: 60px;
		background: #fff;
		font-size: 24px;
		transition: none;
		top: 95%;
	}

	.banner1row p {
		bottom: -40%;
		font-size: 24px;
	}

	/* -------第二部分----------------------------- */
	.banner2row {
		background-size: 100%;
		background-position: 0 -160px;
	}

	.banner2row .card {
		width: 220px;
	}

	/* ----第五部分------------------------------ */
	.banner5row button {
		margin: 80px 16px 36px 0;
	}


	/* ----第九部分------------------------------ */
	.banner9row h2 {
		font-size: 75px;
		margin-bottom: 25px;
	}

	.banner9row p {
		font-size: 30px;
		margin-bottom: 125px;
	}

}



/* 768px-991px */
@media screen and (min-width: 768px) and (max-width: 991px) {
	.topbar {
		width: 90%;
		left: 5%;
	}

	.logo {
		width: 90%;
	}

	.banner2row h1,
	.banner3row h1,
	.banner4row h1,
	.banner5row h1,
	.banner6row h1,
	.banner7row h1,
	.banner8row h1,
	.banner9row h1,
	.banner10row h1 {
		font-size: 45px !important;
		transition: none;
	}

	/* -----第一部分----------------------- */
	.banner1row {
		background-position: 0 100px;
	}

	.banner1row h1 {
		font-size: 50px;
	}

	.banner1row h2 {
		font-size: 30px;
	}

	.banner1row img {
		width: 90%;
		height: 90%;
	}

	.banner1row button {
		width: 180px;
		height: 60px;
		background: #fff;
		font-size: 20px;
		bottom: -50%;
		right: -10%;
	}
	.banner1row p {
        right: -10%;
		font-size: 20px;
		bottom: -75%;
	}
	/* ----第二部分------------------------------ */
	.banner2row {
		background-size: 100%;
		background-position: 0 -100px;
	}

	.banner2row .card {
		width: 220px;
	}

	/* ----第三部分------------------------------ */
	.banner3row .banner3row_p {
		margin-top: 166px;
	}

	.banner3row p {
		font-size: 45px;
	}

	/* ----第四部分------------------------------ */
	.banner4row h4 {
		font-size: 20px;
	}

	/* ----第五部分------------------------------ */
	.banner5row button {
		margin: 80px 16px 24px 0;
	}

	.banner5row .blue {
		margin-top: -12px;
	}

	/* ----第七部分------------------------------ */
	.banner7row p {
		font-size: 20px;
	}

	/* ----第九部分------------------------------ */
	.banner9row h2 {
		font-size: 50px;
		margin-bottom: 25px;
	}

	.banner9row p {
		font-size: 20px;
		margin-bottom: 125px;
	}
}
