@font-face {
    font-family: Questrial-Regular;
    src: url('../font/Questrial-Regular.ttf') format("truetype");
    font-weight: 400;
    font-style: normal
}

.app-box {
  margin: 0 9em; 
}

@media (max-width: 767px) {
  .app-box {
    margin: 0; 
  }
}

.link1{
    color:#eee;
}
.link1:hover,a:hover{
    text-shadow:0 0 10px rgba(255,255,255,.8),0 0 20px rgba(255,255,255,.8),0 0 30px rgba(255,255,255,.8);
    cursor:pointer
    
}
 
html body {
  font-family: 'Questrial-Regular';
  width: 100%;
  background-color: #171819;
}
header,.topnav,#middlemsg,.down1,.down2,.down3,.down4{
	width: 80%;
	margin: 0 auto;
}
.display-3{
	font-size: 70px;
}
.bg-fack{
#	background-color: #171819;
}
.navbar-brand img{
	width: 15rem;
	height: auto;
}
.navbar-light .navbar-nav .nav-link {
	color: #fff;
}
.navbar-light .navbar-nav .nav-link:hover {
	color: #fff;
}
.bg-active{
	background-color: #F8DF5A;
	color: #000;
	padding: 0 .3rem;
}
.btn-info{
	color: #212529;
	background-color: #F8DF5A;
	border-color: #F8DF5A;
}
.btn-info:hover{
	color: #212529;
	background-color: #F8DF5A;
	border-color: #F8DF5A;
}
.navbar-toggler {
    padding: 0.25rem 0.75rem;
    font-size: 1.15rem;
    line-height: 1;
    background-color: #F8DF5A !important;
    border: 1px solid transparent;
    border-radius: 0.25rem;
}
.headvideo{
			max-width:100%;object-fit: cover;border-radius:3rem;position: absolute;top: 20%;left: 0;
		}

.header-down{
	width: 100%;
	padding-top: 160px;
	text-align: center;
}

.nav-pills {
  top: 100px;
  position: fixed;
}

.container-fluid{
	width: 100%;
}
.main-top-left a{
 color: rgba(255, 255, 255, 0.70);
}
.nav-pills .nav-link.active, .nav-pills .show > .nav-link{
	color: #FFFFFF;
	background-color: transparent;
}
.newgropdown{
	color: #fff;
}
.newgropdown:hover{
	color: #fff;
}
.section1{
	padding-top: 130px;
	width: 100%;
	text-align: center;
}
.section1 h2{
	width: 100%;
	text-align: left;
	font-size: 56px;
	color: #FFFFFF;
}
.section1 h6{
	width: 100%;
	text-align: left;
	font-size:16px;
	line-height:19px;
	color: rgba(255, 255, 255, 0.70);
}
.section1-list{
	width: 100%;
	display: flex;
	margin-top: 30px;
}
.section1-item{
	width: 33%;
}
.section1-item-img{
	width: 100%;
}
.section1-item-img img{
	width: 100%;
	height: auto;
}
.section1-item-title{
	width: 100%;
	text-align: center;
	height: 24px;
	font-size: 16px;
	color: #FFFFFF;
	line-height: 24px;
}
.section1-item-text{
	width: 100%;
	text-align: center;
	height: 24px;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.70);
	line-height: 24px;
}
.section1-ge{
	width: 5%;
	display: flex;
	align-items: center; /* 垂直居中 */
	justify-content: center; /* 水平居中，如果也需要水平居中的话 */
	height: 200px; /* 设置div的高度 */
	margin-left: 10px;
	margin-right: 10px;
	width:2rem;
	line-height:15rem;
	font-size:2rem;
	color: #eee;
}
.section1-ge img{
	width: 30px;
	height: 30px;
	align-items: center;
}
.section2{
	padding-top: 130px;
}
.section2 h2{
	color: #FFFFFF;
	font-size: 56px;
}
.section2 h6{
	font-size: 16px;
	line-height: 19px;
	color: rgba(255, 255, 255, 0.70);
}
.section2-img{
	width: 100%;
	padding: 40px 0px 0px 0px;
	display: flex;
	align-items: center;
}
.section2-img img{
	width: 100%;
	height: auto;
	align-items: center;
}
.section3{
	padding-top: 130px;
}
.section3 h2{
	color: #FFFFFF;
	font-size: 56px;
}
.section3 h6{
	color: rgba(255, 255, 255, 0.70);
	font-size: 16px;
	line-height: 19px;
}
.section3-img{
	width: 49%;
	padding: 10px;
	height: 280px;
	display: flex;
	align-items: center;
	
}
.section3-img img{
	border-radius: 20px;
	width: 100%;
	height: auto;
	align-items: center;
}
.down1{
	padding-top: 130px;
}
.down1 h2{
	font-size: 56px;
	width: 100%;
	color: #FFFFFF;
	text-align: center;
}
.down1 h6{
	width: 100%;
	color: rgba(255, 255, 255, 0.70);
	text-align: center;
	font-size: 16px;
}
.down1-img{
	width: 33%;
	padding: 10px;
	height: auto;
	display: flex;
	align-items: center;
	
}
.down1-img img{
	border-radius: 20px;
	width: 100%;
	height: auto;
	align-items: center;
}
.down2{
	padding-top: 130px;
}
.down2 h2{
	width: 100%;
	color: #FFFFFF;
	text-align: center;
	font-size: 56px;
}

.down2-left{
	padding-top: 40px;
}

.down2-left p{
	width: 100%;
	margin-left: 10%;
}
.down2-right{
	padding-top: 0px;
}

.down2-button{
	margin: 10px 20px;
	width: 100%;
	height: 60px;
	background-color: #F8DF5A;
	line-height: 60px;
	border-radius: 15px;
}
.down2-button .leftmsg{
	font-size: 1.8rem;
	font-weight: bold;
	text-align: left;
	color: #171819;
}
.down2-button .rightmsg{
	font-size: 0.9rem;
	font-weight: bold;
	text-align: right;
	color: #171819;
}
.down3{
	width: 80%; 
	margin: 0 auto;
	padding-top: 130px;
}
.down3 h2{
	width: 100%;
	color: #FFFFFF;
	text-align: center;
	font-size: 56px;
}
.down3-list{
		width: 100%;
		text-align: center;
		height: 30rem;
	}
.down3-item{
	    min-height: 13rem;
	    margin-top: 10px;
	    padding: 1rem;
	    float: left;
	    width: calc(25% - 10px);
	    border: 1px solid #505051;
	    background: #000;
	    border-radius: 1rem;
		margin-left: 10px;
}
.topimg{
	    height: 4rem;
	    text-align: center;
	    line-height: 4rem;
}
.topimg img{
	width: 2rem;
	height: 2rem;
	overflow-clip-margin: content-box;
	overflow: clip;
}
.middletitle{
	height: 2rem;
	display: block;
	unicode-bidi: isolate;
	font-size: 14px;
	text-align: center;
	color: #FFF;
}
.downtext{
	text-align: center;
	height: 5rem;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.70);
}




.down4{
	width: 80%;
	margin: 0 auto;
	padding-top: 130px;
}
.down4 h2{
	width: 100%;
	color: #FFFFFF;
	text-align: center;
	font-size: 56px;
}
.down4-list{
	width: 100%;
	float: left;
	display: flex;
	flex-flow: column wrap;
	text-align: left;
	box-sizing: border-box;
    max-height: 27rem !important;
}
.down4-item{
	   display: flex;
	   flex-direction: column;
	   padding:0.5rem;
	   border-radius: 1rem;
	   background: #000;
	   border: 1px solid #505051;
	   margin: 5px !important;
	   width: calc(25% - 0rem) !important;
	   box-sizing: border-box;
}
.down4-topimg{
	    height: 4rem;
	    text-align: right;
	    line-height: 4rem;
}
.down4-topimg img{
	width: 4rem;
	height: 4rem;
	overflow-clip-margin: content-box;
	overflow: clip;
	border-radius: 50px;
}
.down4-middletitle{
	display: block;
	unicode-bidi: isolate;
	font-size: 14px;
	text-align: left;
	color: #FFF;
}
.down4-downtext{
	height: 5rem;
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.70);
}
.down4-text1{
	height: 2rem;
	line-height: 2rem;
	font-size: 12px;
	color: #FFFFFF;
}
.down4-text2{
	height: 1rem;
	line-height: 1rem;
	font-size: 12px;
	color: rgba(255, 255, 255, 0.70);
}
.footermsg{
	padding-top: 90px;
	width: 100%;
}

@media (max-width: 1300px){
	.down4-list{
		width: 100%;
		float: left;
		display: flex;
		flex-flow: column wrap;
		text-align: left;
		box-sizing: border-box;
	    max-height: 37rem !important;
	}
	}



@media (max-width: 960px){
	header,.topnav,#middlemsg,.down1,.down2,.down3,.down4{
		width: 100%;
		margin: 0 auto;
	}
	.headbuttonfex{
		z-index: 9999;
		position: fixed;
		bottom: 30px;
		width: 55%;
		left: 22%;
		text-align: center;
	}
	.down2-left {
	    padding-top: 0px;
	}
	.section3-img {
	    width: 49%;
	    padding: 10px;
	    /* height: 280px; */
	    display: flex;
	    align-items: center;
	}
	.header-down{
		width: 100%;
		padding-top: 60px;
		text-align: center;
	}
	.down3-list{
		width: 100%;
		text-align: center;
	}
	.down3-item {
	    min-height: 14rem;
	    margin-top: 10px;
	    padding: 1rem;
	    float: left;
	    margin-left: 10px;
	    width: calc(50% - 10px) !important;
	}
	.middletitle {
	    height: auto;
	    display: block;
	    unicode-bidi: isolate;
	    font-size: 14px;
	    text-align: center;
	    color: #FFF;
		}
		
		
		.down4{
			width: 100%;
			margin: 0 auto;
			padding-top: 130px;
			display: inline-block;
		}
		.down4-list{
			width: 100%;
			float: left;
			display: flex;
			flex-flow: column wrap;
			text-align: left;
			box-sizing: border-box;
		    max-height: 50rem !important;
		}
		.down4-item{
			   display: flex;
			   flex-direction: column;
			   padding: 0.3rem;
			   border-radius: 1rem;
			   background: #000;
			   border: 1px solid #505051;
			   margin: 3px !important;
			   width: calc(50% - 0px) !important;
			   box-sizing: border-box;
		}
		.down4-text1{
			line-height: 1rem;
			font-size: 12px;
			color: #FFFFFF;
		}
		.down4-text2{
			line-height: 1rem;
			font-size: 12px;
			color: rgba(255, 255, 255, 0.70);
		}
		.down4-middletitle{
			display: block;
			unicode-bidi: isolate;
			font-size: 14px;
			text-align: left;
			color: #FFF;
		}
		.display-3{
			font-size: 2.8rem;
		}
		.phonevideo{
			padding-top: 60px;
		}
		.down1 h2{
			font-size: 2.8rem;
		}
		.down2 h2{
			font-size: 2.8rem;
		}
		.down3 h2{
			font-size: 2.8rem;
		}
		.down4 h2{
			font-size: 2.8rem;
		}
		.section1 h2{
			font-size: 2.8rem;
		}
		.section2 h2{
			font-size: 2.8rem;
		}
		.section3 h2{
			font-size: 2.8rem;
		}
		.section4 h2{
			font-size: 2.8rem;
		}
		.down2-button .rightmsg {
		    font-size: 0.5rem;
		    font-weight: bold;
		    text-align: right;
		    color: #171819;
		}
		.footermsg{
			padding-top: 0px;
			padding-bottom: 120px;
		}
		.headvideo{
			max-width:100%;object-fit: cover;border-radius:3rem;position: absolute;top: 33%;left: 0;
		}
		.footright{
			padding-top: 40px;
		}
		
		
		
	
}

@media (max-width: 300px){
	.down4-list{
		width: 100%;
		float: left;
		display: flex;
		flex-flow: column wrap;
		text-align: left;
		box-sizing: border-box;
	    max-height: 60rem !important;
	}
	}