@charset "utf-8";
html{font-size: 100px;}
@media (max-width: 1600px){html{font-size: 95px;}}
@media (max-width: 1440px){html{font-size: 90px;}}
@media (max-width: 1220px){html{font-size: 85px;}}
@media (max-width: 1024px){html{font-size: 80px;}}
@media (max-width: 991px){html{font-size: 70px;}}
@media (max-width: 639px){html{font-size: 60px;}}
body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,code,form,fieldset,legend,button,input,textarea{padding:0px; margin:0px; border:none; font-weight: normal; font-family: "Helvetica","Tahoma","Microsoft YaHei","PingFang HK","Arial", \5b8b\4f53;}
body, button, input, select, textarea, a, span { font-family: "Microsoft YaHei","PingFang HK","Arial", \5b8b\4f53;}
ul, ol ,li{ list-style: none; }
img {margin:0; border:0; padding:0;}
b {font-family:Tahoma; font-weight:300; }
a { text-decoration:none; }
a:hover { text-decoration:none;  }
a:active { color: #fff;  }
.clear { clear: both;}
div:focus,
input:focus,
select:focus,
button:focus,
textarea:focus { outline:none;}
a,a:hover,a:active,a:visited,a:link,a:focus{
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	-webkit-tap-highlight-color: transparent;
	outline:none;
	text-decoration: none
}
.container2{width: auto; margin: 0 15px; padding: 0;}
@media (min-width: 640px){.container2{margin: 0 7.8125%;}}
@media (min-width: 1200px){.container2{margin: 0 10%;}}
@media (min-width: 1600px){
	.container2{margin: 0 12.5%;}
	.details_box{margin: 0 7%;}
}

body {
    margin: 0 auto;
    overflow-x: hidden;
	width: 100%;
	background: #fff;
}

.bg_img{
	background: url(../images/bg_img.jpg) repeat-y center 0px;	
}
.fl{float: left !important;}
.fr{float: right !important;}

.mb6{margin-bottom: .6rem !important;}
.pd0{padding: 0 !important;}

/*css效果*/
.css_style{
	transition: all 0.3s ease-out 0s;
	-webkit-transition: all 0.3s ease-out 0s;
	-moz-transition: all 0.3s ease-out 0s;
	-o-transition: all 0.3s ease-out 0s;}


@font-face
{
	font-family: Din;
	src: url("../images/DIN Regular_0.otf");
}




/*导航*/
.header {
    width: 100%;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 3;
	transition: all 0.3s;
}
.header .logo {
    padding: .14rem 0;
	display: block;
    overflow: hidden;    
	-webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
}
.header .logo img {
    max-height: .4rem;
}
.header .logo .logo_1 {
	display: block;
}
.header .logo .logo_2 {
	display: none;
}

.nav > li{
	float: left;
	line-height: .68rem;
	position: relative;
	transition: all 0.3s;
}
.nav > li > a {
	padding: 0 .15rem;
    font-size: .16rem;
    color: rgba(255,255,255,0.8);
	transition: all 0.3s;
	position: relative;
}
.nav > li:hover > a {
	color: #fff;
}



.header_fixed{
	background: rgba(255,255,255,0.6);
	box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);    
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}
.header_fixed .logo .logo_1 {
	display: none;
}
.header_fixed .logo .logo_2 {
	display: block;
}
.header_fixed .nav > li > a {
    color: #292b32;
}
.header_fixed .nav > li:hover > a {
	color: #8126cf;
}
/*导航 结束*/




/*侧边栏*/
.side_box{
	position: fixed;
	bottom: 20%;
	right: 10px;
	z-index: 2;
}
.side_box li{
	cursor: pointer;
	width: 40px;
	height: 40px;
	border-radius: 4px;
	background: #fff;
	box-shadow: 0 0 9px rgba(0,0,0,0.1);
	transition: all 0.3s;
}
.side_box li:hover{
	background:linear-gradient(#6634ff, #8126cf);
}
.side_box li .ico{
	display: block;
	width: 100%;
	height: 100%;
	background: url(../images/top.png) no-repeat center center;
	background-size: .18rem .1rem;
}
.side_box li:hover .ico{
	background: url(../images/top_2.png) no-repeat center center;
	background-size: .18rem .1rem;
}
/*侧边栏 结束*/




/*------------index.html  start----------------*/
.h1_title{
	margin: 0 auto .4rem;
	position: relative;
	text-align: center;
	font-size: .48rem;
	color: #292b32;
}
.p_title{
	padding: 0 1.4rem;
	text-align: center;
	font-size: .2rem;
	line-height: .36rem;
	color: #606266;
}



.banner_pc{	
	display: block;
	position: relative;
}
.banner_pc .ban_text{
	width: 41%;
	position: absolute;
	left: 14%;
	top: 30%;
}
.banner_pc .ban_text img {
	display: block;
	width: 6.4rem;
}
.banner_pc .ban_text a {
	display: block;
	margin-top: .6rem;
	width: 2.4rem;
	text-align: center;
    height: .6rem;
    line-height: .6rem;
    border-radius: .3rem;
    font-size: .24rem;
	color: #8126cf;
	background: #fff;
	box-shadow: 0 10px 20px -6px rgba(0,0,0,0.2);
}
.banner_pc img {
	max-width: 100%;
}




/*套餐简介*/
.introduct{
	overflow: hidden;
	margin: 0 auto 0;
	padding-top: 1rem;
}

.version_box{
	overflow: hidden;
	margin: .6rem auto 0;
}
.version_box li{
	float: left;
	width: 14.66%;
	margin: 0 1% 2%;
	background: #fff; 
	position: relative;
	transition: all 0.3s;    
}
.version_box li a{
	display: block;
	width: 100%;
	height: 100%;
	padding: .3rem .1rem;
	border: 1px solid #ebedf2;
	border-radius: 16px;
	text-align: center;
}
.version_box li:hover a{
	border: 2px solid #742ce6;
	box-shadow: 0 5px 20px rgba(218,225,235,0.8);
}
.version_box li img{
	width: .6rem;
}
.version_box li p{
	font-size: .16rem;
	line-height: .24rem;
	color: #606266;
	margin-top: .16rem;
	margin-bottom: 0;
}
.version_box li span{
	display: block;
	width: .56rem;
	height: .56rem;
	position: absolute;
	top: 0;
	left: 0;
}
.version_box li .corner1{
	background: url("../images/corner1.png") no-repeat 0px 0px;
	background-size: cover;
}
.version_box li .corner2{
	background: url("../images/corner2.png") no-repeat 0px 0px;
	background-size: cover;
}
.version_box li .corner3{
	background: url("../images/corner3.png") no-repeat 0px 0px;
	background-size: cover;
}
.version_box li .corner4{
	background: url("../images/corner4.png") no-repeat 0px 0px;
	background-size: cover;
}
.version_box li .corner5{
	background: url("../images/corner5.png") no-repeat 0px 0px;
	background-size: cover;
}
.version_box li .corner6{
	background: url("../images/corner6.png") no-repeat 0px 0px;
	background-size: cover;
}

.version_box li .ewm_img{
	width: 0;
	height: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	border-radius: 16px;    
	border: 1px solid #ebedf2;
	background: #fff;
	overflow: hidden;    
	transition: all 0.3s;
}
.version_box li .ewm_img img{
	width: auto;
	height: 80%;
	display: block;
	margin: .06rem auto 0;
}
.version_box li .ewm_img p{
	text-align: center;
	margin-top: 0;
}
.version_box .li_iOS:hover .ewm_img{
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
/*套餐简介 结束*/



/*套餐亮点*/
.fun {
	padding: .8rem 0;
}
.fun .container {
	display: table;
}
.fun_2,
.fun_4{
	background: #fbfaff;
}
.fun_img {    
	width: 6.5rem;
	overflow: hidden;
}
.fun_img img{
	max-width: 100%;
}
.fun_text {
	display: table-cell;
    vertical-align: middle;
	width: 3.8rem;
}
.fun_text h2 {
	font-size: .42rem;
	line-height: .6rem;
	color: #292b32;
	position: relative;
}
.fun_text h2:before {
	content: '';
	display: block;
	position: absolute;
	top: -.4rem;
	left: 0;
	width: .68rem;
	height: .1rem;
	background: #9a4bff;
}
/*套餐亮点 结束*/



/*典型客户*/
.customer{
	overflow: hidden;
	margin: 0 auto 0;
	padding-top: 1rem;
}
.customer .container2{
	position: relative;
	overflow: hidden;    
	font-size: 0;
}
.customer .mask{
	position: absolute;
	top: 0;
	z-index: 2;
}
.customer .mask_left{
	left: 0;
}
.customer .mask_right{
	right: 0;
}
.customer .line_odd {
    width: 2904px;
    -webkit-animation: scrollToRight 40s linear infinite;
    animation: scrollToRight 40s linear infinite;
}
.customer .line_even {
    width: 2904px;
    -webkit-animation: scrollToRight 30s linear infinite;
    animation: scrollToRight 30s linear infinite;
}
.customer .line_odd img {
      width: 50%;
      display: inline-block;
}
.customer .line_even img {
      width: 50%;
      display: inline-block;
}
@keyframes scrollToRight {
  from {
      -webkit-transform: translate3d(-50%, 0, 0);
  }
  to {
      -webkit-transform: translate3d(0%, 0, 0);
  }
}
/*典型客户 结束*/



/*联系销售*/
.code{
	width: 100%;
	padding: 1.4rem 0 1.2rem;
	margin: .8rem auto 0;
	background: url("../images/code_bg.jpg") no-repeat 0px 0px;
	background-size: 100% 100%; 
}
.code .h1_title{
	color: #fff;    
	margin: 0 auto .15rem;
}
.code .p_title{
	color: rgba(255,255,255,0.6);  
	margin: 0 auto .6rem;
}

.form_box {
	margin: 0 3%;
}
.form_box dl{
	float: left;
	width: 47%;
	margin: 0 1.5% .3rem 1.5%;
}
.form_box dt{
	font-size: .18rem;
	color: #fff;
	font-weight: normal;
	margin-bottom: .12rem;
}
.form_box dt i{    
	color: #fb6255;
}
.form_box label{
	margin: 0;
	font-weight: normal;
}
.form_box .form-control{
	background: rgba(0,0,0,0.1);
	border: 1px solid rgba(235,237,242,0.4);
}
.form_box .btn{
	width: 2.4rem;
    height: .6rem;
    line-height: .6rem;
    border-radius: .3rem;
    font-size: .24rem;
    z-index: 2;
    display: block;
    color: #8126cf;
    transition: all 0.5s ease;
    background: #fff;
    box-shadow: 0 10px 20px -6px rgba(0,0,0,0.2);
	margin: 0 auto;
}
/*联系销售 结束*/




/*底部*/
.footer{
	padding: .6rem 0;
	position: relative;
}
.footer .foot_QQ {
	width: 27%;
}
.footer .foot_nav {
	width: 15%;
}
.footer .foot_area  {
	width: 13%;
}
.footer dt {
	overflow: hidden;
	font-size: .18rem;
	font-weight: normal;
	color: #292b32;
	margin-bottom: .12rem;
}
.footer dt span {
	font-size: .12rem;
	color: #606266;
	margin-left: 6px;
}
.footer dd {
	overflow: hidden;
}
.footer dd h1{
	color: #292b32;
	font-size: .32rem;
	font-family: "Din";
	font-weight: 800;
	margin: 0;
}
.footer dd .foot_a{
	display: block;
	width: 1.3rem;
	text-align: center;
	height: .42rem;
	line-height: .42rem;
	border-radius: .21rem;
	font-size: .18rem;
	color: #fff;
	margin-top: .24rem;
	transition: all 0.3s ease-out 0s;    
	background: linear-gradient(90deg,#6634ff, #8126cf);
}
.footer dd .foot_a:hover{
	color: rgba(255,255,255,0.6);
}
.footer dd p{
	line-height: .3rem;
	font-size: .15rem;
	color: rgba(255,255,255,0.4);
	margin-bottom: 0;
}
.footer dd a{
	display: block;
	line-height: .34rem;
	font-size: .12rem;
	color: #606266;
}
.footer dd a:hover{
	color: #292b32;
}
/*底部结束*/
/*------------index.html  end----------------*/




.common_gototop { background: rgba(0,0,0,0.2); border-radius: 4px; width: 3rem; height: 3rem; position: fixed; bottom: 55px; right: 0.5rem; cursor: pointer;z-index: 999;  }
.common_gototop img { width: 1.6rem; height: 1.6rem; margin: 0.7rem auto; display: block;}




@media screen and (max-width: 997px) {
	.banner_pc .ban_text{
        width: 33%;
        left: 10%;
        top: 28%;
    }
    .banner_pc .ban_text img {
        width: 100%;
    }
	
}