@font-face {
  font-family: "Azonix";
  src: url("/webfonts/Azonix-1VB0.otf");
}

html {
  scroll-behavior: smooth;
}

#upgrade-notice {
  display: block;
  position: fixed;
  margin: 0;
  width: 100%;
  /* height: 60px; */
  /* font-size: 15px; */
  line-height: 2;
  z-index: 1000;
  background-color: #2c6d91;
  /* text-align: center; */
  bottom: 0;
}

#upgrade-notice a {
  text-decoration: underline;
  font-size: 1.2rem;
}

#upgrade-notice, #upgrade-notice a {
  color: #fff;
}

#upgrade-notice a:hover {
  color: #ff3366
}

header .logo {
  width: 10rem;
  height: 4.4rem;
  /* transition: all .5s ease-out; */
  /* position: relative;
  left: 1rem; */
  z-index: 10;
}

#top-nav .row {
  height: 5rem;
}

#top-nav.dark-bg #top-logo {
  width: 9.5rem;
  height: 3rem;
}

body {background-color: #000}

a:link, a:visited, a:active, a {
  text-decoration: none;
}

.carousel-indicators li {
 width: 1rem; height: 1rem; border-radius: 100%;
}

#top-nav {
  position: fixed;
  top: 0px;
  left: 0px;
  right: 0;
	z-index: 20;
	background-color: #00000000;
  /* transition: .5s ease; */
  
}



#top-nav.dark-bg {background-color: #000;}


	
#top-nav a {color: #fff;}

/* #topcaroucon {} */

#topcarousel {overflow: hidden}



#topcarousel h2, #topcarousel h3 {
  font-size: 2.5rem;
  font-weight: bold;
}

#topcarousel p {
  font-size: 1.2rem;
}

.themered {
  color: #ef284f;
  /* display: inline !important; */
}

.azonix {
  font-family: "Azonix"!important;
}

.anchor {
    display: block;
    height: 4rem;
    margin-top: -4rem;
    visibility: hidden;
}

/* #topcarousel .active .carousel-caption { */
	
	/* animation: textup 1s 1 both; */
	/* -webkit-animation: textup 1s 1 both; /* Safari and Chrome */ */
	/* } */
	/* 当前轮播图里的文字效果的css效果设置 */





.carousel-item {transition: 1s ease;} 
/* 切换时的过渡时间、效果设置 */

#topcarousel .carousel-caption {
  opacity: 0;  
  padding: 0;
  left: 50%;
  right: auto;
  bottom: 40%;
  transform: translate(-50%, 50%);
  transition: all 1s ease;
  width: 100%;
}

#topcarousel .carousel-caption.show {
  opacity: 1;
  bottom: 50%;
  /* transform: translate(-50%, 50%); */
}

.srvs {overflow: hidden;}

.srvs .hover { position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0; 
    /* z-index: 1;  */
    color: #fff;
    background-color: #00000000;
    transition: all .5s ease-out;
  }
	
	
/* .srvs .carousel-caption, .srvs .hover > img, .srvs .hover > p { 
  transition: all .5s ease-out;
} */

.srvs .carousel-caption {
  left: 2rem;
  bottom: 2rem;
  padding: 0;
  opacity: 1.0;
}

.srvs:hover .carousel-caption {
  opacity: 0.0;
}



.srvs .hover .hover-content {
  position: absolute;
  left: 1rem;
  top: 50%;
  right: 1rem;
  transform: translateY(-50%);
}

.srvs .hover .hover-content img, .srvs .hover .hover-content p {
  opacity: 0.0;
}

.srvs:hover .hover .hover-content img, .srvs:hover .hover .hover-content p {
  opacity: 1.0;
}

.srvs .hover .hover-content img {
  transform: translateX(-50%);
  width: 35%;
}

.srvs:hover .hover .hover-content img {
  transform: translateX(0%);
}

.srvs .hover .hover-content hr {
  width: 4rem;
  height: 2px;
  opacity: 0.0;
  transform: translateX(20rem);
  background-color: #ef284f;
}

.srvs:hover .hover .hover-content hr {
  opacity: 1.0;
  transform: translateX(0);
}

.srvs .hover .hover-content p {
  transform: translateY(5rem);
  margin: 0;
}

.srvs:hover .hover .hover-content p {
  transform: translateY(0%);

}

.srvs:hover .hover {background-color: #00000078;}

.srvs .hover, 
.srvs .carousel-caption, 
.srvs .hover .hover-content img, 
.srvs .hover .hover-content hr,
.srvs .hover .hover-content p {
  transition: all .5s ease-out;
}


footer .logo {
  width: 10rem;
  height: 3.17rem;
}



@keyframes textup
{
from {top: 30%; opacity:0;}
to {top: 25%; opacity:1;}
}

@-webkit-keyframes textup /* Safari and Chrome */
{
from {top: 30%; opacity:0;}
to {top: 25%; opacity:1;}
}



.youshi {
  background-image: url(../img/num3bg.jpg);
  background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    background-color: #000;
}


.youshi h2, .youshi h3 {font-style: italic;     margin-bottom: 2rem;}


.youshi h3 {font-size: 3rem;}
.youshi h2, .youshi h3 .tail {font-size: 1rem;}

.youshi > div > div {
  /* padding: 3rem 7rem; */
  padding: 5rem;
  color: #fff;
}

.odometer-digit {
  /* padding-right: 0.5rem; */
  padding-right: 5px;
}

.pt {background-color: #000; color: #fff;}

.pt .title {font-size: 3rem; font-weight: 700; }
/* .pt ul {list-style: none} */
/* .pt li { */
	/* width: 150px; */
    /* height: 210px;} */
.pt a {
	background-color: #e83a4b;
    /* background-image: url(y_img/pts.png); */
	/* background-position: -750px -150px; */
	width: 150px;
    height: 150px;
	border-radius: 100%;
	/* background-size: 1355px 900px; */
	display: block;
	margin: auto;
	color: #fff;
	padding-top: 1.5rem;
	}
	
.pt a i {
	font-size: 5rem;
}

.pt p {margin-top: 0.5rem; font-size: 0.75rem;}

.us {
  background: url(../img/intro.jpg) no-repeat center;
  background-color: red; 
  padding: 5rem 0;
}

.us .card {
  background-color: #000;
  height: 100%;
}

.us .card-text {
  font-size: 0.9rem;
}

.us .card-img-top {border-radius: 0;}

.us hr {
  border-top: 1px solid #fff;
  width: 75px;
  margin-left: 0;
}

.us .bigger {font-size: 1.2rem;}

.an_niu {display: inline-block; border: 1px solid #fff; width: 128px; font-size:13.5px; margin: 2.5rem 1rem;}

.butong h2:nth-child(1) {font-size: 1.2rem;}
.butong h2:nth-child(2) {font-weight: bold;}

.butong > div > div {
  padding: 5rem;
	background-size: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

.butong > div > div:nth-child(1) {
  background-image: url(../img/butong1.jpg);
}

.butong > div > div:nth-child(2) {
  background-image: url(../img/butong2.jpg);
}

.butong > div > div > div {position: relative;
left:0;
-webkit-transition: all 1s ease-out;
  -moz-transition: all 1s ease-out;
  -o-transition: all 1s ease-out;
  transition: all 1s ease-out;
  }

.butong > div > div > div:hover {left:1rem; 
}

.butong hr {
    border-top: 1px solid #fff;
    width: 50px;
    margin-left: 0;
    text-align: left;
}

/* footer > div {padding: 5rem 0 2rem 0;} */

/* footer h5 {font-size: 5rem; margin-bottom: 2.5rem;} */

/* footer .logo {width: 45%; height: 45%;} */

footer .azonix {font-style: italic;}

footer .azonix:nth-child(1) {font-size: 2rem;}

#foot-line {font-size: 0.75rem;}

#foot-line a {color:#fff;}

#hotline {
  font-size: 2rem;
}

#services-left, #services-right {
  /* padding: 5rem 3rem;  */
  background-size: cover;
  background-repeat: no-repeat ;
  background-position: center;
}

#services-left { 
  background-image: url(../img/solution.jpg); 
  color: #fff;
}

#services-left > div:nth-child(1) {padding: 5rem 3rem;}

#services-left > div:nth-child(2) {padding: 0 3rem 5rem;}


#services-left hr {
  border-top: 1px solid #fff;
  width: 50px;
  margin-left: 0;
}
#services-left > p {
  font-size: 1.2rem;
}
#services-left .en {font-size: .75rem;}
#services-left img {
  width: 40%;
  height: auto;
}
#services-left i {
  font-size: 5rem;
}

#services-right { background-image: url(../img/services.jpg);}
#services-right h3 {font-size: 1.2rem; color: #ff3366;}
#services-right h4 {
  font-size: 1rem; 
  font-weight: normal; 
  color: #999;
}
#services-right hr {
  width: 60px; 
  margin-left: 0;
  border-top: 2px solid #ff3366;
}
/* #services-right p {color: #666; font-size: .9rem;} */

#services-right .service {
  padding: 5rem 3rem;
}

#services-right .service:nth-child(1),
#services-right .service:nth-child(2) {
  padding-bottom: 0rem;
}

#services-right li {
  list-style: none;
  color: #666; 
  font-size: .9rem;
}

#lianluo + div {
  padding-top: 3rem;
  padding-bottom: 3rem;
}



/* #icp {
  display: block;
  margin-left: 1rem;
} */

#wangan a {display:inline-block;text-decoration:none;}
#wangan a img {float:left;}
#wangan a p {
  float:left; 
  margin: 0px 0px 0px 7.5px; 
  /* color:#939393; */
}

#bottom-right-fixed {
  position: fixed;
  right: 0;
  bottom: 2rem;
  /* background-color: rgba(0,0,0,0.8); */
  z-index: 12;
  
}

#bottom-right-fixed div {
  background-color: rgba(0,0,0,0.8);
  justify-content: center;
  align-items: center;
  display: flex;
  /* z-index: 12; */
  overflow: hidden;
}

#bottom-right-fixed > div {
  width: 4rem;
  height: 4rem;
  /* position: relative; */
}

#bottom-right-fixed i {
  /* width: 1.5rem; */
  /* height: 1.5rem; */
  /* left: 50%; */
  /* top: 50%; */
  /* position: absolute; */
  /* transform: translate(-50%, -50%); */
  color: rgba(255, 255, 255, 0.9);
  /* z-index: 12; */
  font-size: 1.5rem;
}

#bottom-right-fixed .headset {
  height: 4rem;
  overflow: hidden;
  transition: .5s ease;
}

/* #bottom-right-fixed:hover .headset {
  height: 5rem;
} */

#bottom-right-fixed .phone {
  display: flex;
  position: absolute;
  color: #fff;
  top: 0;
  left: 4rem;
  /* background-color: rgba(0,0,0,0.8); */
  width: 16rem;
  /* padding: .5rem 1rem; */
  /* font-size: 1.5rem; */
  height: 4rem;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  /* transition: .5s ease; */
  z-index: -1;
}

#bottom-right-fixed .phone a {
  text-decoration: none;
  font-style: italic;
  /* font-weight: bold; */
  color: #fff;
  font-size: 1.2rem;
}

#bottom-right-fixed .headset:hover .phone {
  left: -16rem;
  transition: .5s ease;
}

#bottom-right-fixed .to-top {
  transition: .5s ease;
}

#bottom-right-fixed .to-top.hide {
  height: 0;
}

#invitaion-modal {
  background-color: #ff3366;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 1rem;
  width: 30rem;
  color:#fff;
  z-index: 100;
  display: none;
}

#invitaion-modal > div {
  border: 1px solid #fff;
  padding: 1rem;
}

#invitaion-modal h2 {
  font-weight: bold;
}

#invitaion-modal h3 {
  font-size: 1.5rem;
}

#invitaion-modal h4 {
  font-size: 2rem;
  font-style: italic;
}

#invitaion-modal p {
  margin: 0;
}

#invitaion-modal i {
  position: absolute;
  top: 0.25rem;
  right: 0.5rem;
  font-size: 2rem;
  /* margin-top: 1rem; */
  cursor: pointer;
}

@media (max-width: 575.98px) { 
	
  /* html {font-size: 15px;} useless */
	/* #topcaroucon {margin-top: 4.4rem;} */

  #topcaroucon img.bg {
    width: calc( 75vw * 16 / 9 )!important;
    height: 75vw;
    transform: translateX(calc((100vw - 75vw * 16 / 9 ) / 2));
  }

  .srvs .hover .hover-content img {
    width: 50%;
  }

  /* #services-left, #services-right {
    padding: 0 2.5rem;
  } */

	#services-left > div:nth-child(1) {padding: 3rem 0rem;}

  #services-left > div:nth-child(2) {padding: 0 1rem 3rem;}

  #services-left img {width: 70%;}

  #services-right .service {
    padding: 3rem 1rem;
    /* padding-left: 0; */
  }

  /* #services-right .service:nth-child(2), #services-right .service:nth-child(4) {
    padding-right: 0;
  } */

	.butong > div > div {
		background-size: auto;
		background-position: center;
		padding: 3rem;
	}

  .youshi > div > div {
    /* padding: 2.5rem; */
    padding: 2rem;
  }

  #lianluo + div {
    padding: 3rem;
  }
	
	footer h5 {font-size: 3rem}

  /* #lianluo + div > div > div {
    padding: 2.5rem;
  } */


	#hotline {
    font-size: 1.5rem;
  }

	#foot-line {
    padding: 1rem 3rem;
  }

  #invitaion-modal {
    width: 90%;
  }

  #invitaion-modal h2 {
    font-size: 1.2rem;
  }

  #invitaion-modal h3 {
    font-size: 1rem;
  }

  #invitaion-modal h4 {
    font-size: 1.6rem;
  }
	
}
 
 @media (max-width: 991.98px) { 
  /* #topcarousel {height: auto!important;} */
	/* #topcarousel .carousel-caption img {width: 100%} */
  #sandian9yi {
    width: 30vw;
    height: 11.74vw;
  }
  #shisannian {
    width: 15vw;
    height: 15vw;
  }

  #sanbaijia {
    width: 30vw;
    height: 11.61vw;
  }

  #yiqianerjia {
    width: 35vw;
    height: 9.34vw;
  }

  #topcarousel h2, #topcarousel h3 {font-size: 1.5rem;}
  #topcarousel p {font-size: 1rem;}
 }
 


 @media (min-width: 576px) {
	 
  .xiahua {background-color: #000!important; }
	.xiahua .logo {width: 80%; height: 80%;}
  #topcarousel img.bg.translate-up {
    transform: translateY(calc((100vw / 16 * 9 - 100vh) / 2 * -1));
  }
   
 }

@media (max-width: 767.98px)  {
  /* #top-nav {background-color: #000;} */

  #top-nav {
    background-color: #000;
  }

  #top-nav.dark-bg .logo {
    width: 8.44rem;
    height: 3.75rem;
  }

  #top-logo{
    transform: translateX(1rem);
  }

  #logo-wrapper, #navicon-wrapper {
    z-index: 2;
    height: 4rem;
  }

  #nav {
    background-color: rgba(0, 0, 0, 0.9); 
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* padding-top: 4.4rem; */
    /* padding-bottom: 100rem; */
    /* transition: .5s ease; */
    height: 0%;
    overflow: hidden;
  }

  #nav.show {
    height: 100%;
    transition: .5s ease;
  }

  #nav .nav {margin-top: 5rem;}

  .nav-link {padding: 1.5em 0rem;}

  #topcaroucon {margin-top: 5rem;}

  .us {padding: 10vw;}
  
}

@media (min-width: 768px) {
  #nav {display: block;
  padding: 0;
  }
  #nav a:after {
    content:'';
    /* display: inline-block; */
    width: 0px;
    height: 2px;
    background-color: #ff3366;
    position: absolute;
    bottom: 0px;
    left: 50%;
    transform: translateX(-50%);
    transition: 0.5s ease;
    
  }
  #nav li:hover a:after{
    width: 40px;
  }
  .nav-item {padding: 0;}
  .nav-link {padding: 1rem 2rem;}
}
 
@media (max-width: 374.98px) {
  .pt a {width: 125px; height: 125px;}
  #topcarousel h2, #topcarousel h3 {
    font-size: 1.25rem;
  }
  #services-left i {
    font-size: 4rem;
  }
}


/*导航按钮*/
  .nav_btn{
    /* float:left; */
    width:30px;
    position: relative;
    height: 35px; 
    cursor:pointer; 
    /* right: 1rem;  */
    /* top: 50%; */
    /* bottom: 50%; */
    transform: translateX(-1rem);
    z-index: 10;
}


    

  .nav_btn span{display: inline-block;width: 30px;height: 2px;background-color: #fff;
    position: absolute;top: 16px;left: 0px;
    -webkit-transition:background-color 0.3s ease-out 0.1s;
    transition:background-color 0.3s ease-out 0.1s;
  }
  .nav_btn span:after{content:'';display: inline-block;width: 30px;height: 2px;
    background-color: #fff;position: absolute;top: 8px;left:0px;
    -webkit-transition:top 0.5s ease 0.4s,-webkit-transform 0.3s ease-out;
    transition:top 0.5s ease 0.4s,-webkit-transform 0.3s ease-out;
    transition:transform 0.3s ease-out,top 0.5s ease 0.4s;
    transition:transform 0.3s ease-out,top 0.5s ease 0.4s,-webkit-transform 0.3s ease-out;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  .nav_btn span:before{content:'';display: inline-block;width: 30px;height: 2px;
    background-color: #fff;position: absolute;top: -8px;left:0px;
    -webkit-transition:top 0.5s ease 0.4s,-webkit-transform 0.3s ease-out;
    transition:top 0.5s ease 0.4s,-webkit-transform 0.3s ease-out;
    transition:transform 0.3s ease-out,top 0.5s ease 0.4s;
    transition:transform 0.3s ease-out,top 0.5s ease 0.4s,-webkit-transform 0.3s ease-out;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  .nav_btn.clicked span{background-color: transparent;}
  .nav_btn.clicked span:after{
    -webkit-transition: top 0.5s ease, -webkit-transform 0.3s ease-out 0.4s;
    transition: top 0.5s ease, -webkit-transform 0.3s ease-out 0.4s;
    transition: top 0.5s ease, transform 0.3s ease-out 0.4s;
    transition: top 0.5s ease, transform 0.3s ease-out 0.4s, -webkit-transform 0.3s ease-out 0.4s;
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);top: 0px;
  }
  .nav_btn.clicked span:before{
    -webkit-transition: top 0.5s ease, -webkit-transform 0.3s ease-out 0.4s;
    transition: top 0.5s ease, -webkit-transform 0.3s ease-out 0.4s;
    transition: top 0.5s ease, transform 0.3s ease-out 0.4s;
    transition: top 0.5s ease, transform 0.3s ease-out 0.4s, -webkit-transform 0.3s ease-out 0.4s;
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);top: 0px;
  }