@charset "utf-8";
*{ padding:0; margin:0;outline:none !important;
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
          height:auto;
          /*  touch-action: none; */
 }
html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-overflow-scrolling : touch;
height:auto;

}
input[type="submit"], input[type="reset"], input[type="button"], input {
resize: none;
border: none;
}

body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display: block;
}
body, div, ul, li, ol, h1, h2, h3, h4, h5, h6, input, textarea, select, p, dl, dt, dd, a, img, button, form, table, th, tr, td, tbody, article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
margin: 0;
padding: 0;
}
body {
font-size: 24px;	
font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";font-weight: 400;
line-height: 1.5;
color: #212529;
background-color: #fff;
width: 750px;margin: 0 auto;
height:auto;
}
li{ list-style:none; list-style-position:outside;}
img{ border:none; max-width: 100%;}
img, input{ vertical-align:middle;}
a{ color:#000; text-decoration:none;}
a:link, a:active, a:visited, a:hover {
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}
div,input{ transition:all 0.5s;}
.db {
    display: block !important;
}

.fl{float: left;}
.fr{float: right}
.fz40{font-size: 40px;}
.fz70{font-size: 70px;}
.fz30{font-size: 30px; font-weight: 700;}
.mt50{margin-top: 50px;}
.red{color: #ff3636;}
.h30{background: #f2f2f2;width: 100%;overflow:hidden;height: 30px;}
.w95{
	position: relative;
	width: 95%;
	overflow: hidden;
	margin: 0px auto;
}
.w90{
	position: relative;
	width: 90%;
	overflow: hidden;
	margin: 30px auto;
}
.w100{
	position: relative;
	width: 100%;
	overflow: hidden;
	margin: 0 auto;
}
.h95{
	position: relative;
	height: 88px;
}

.h110{
	position: relative;
	height: 100px;
}
.h260{
	position: relative;
	height: 130px;
}
.radius{
	border-radius: 10px;
}
.szyellow{
	font-weight: 700;
	display: inline;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(56%,transparent),color-stop(0,#f5d631));
    background-image: linear-gradient(180deg,transparent 56%,#f5d631 0);
    background-repeat: no-repeat;
}
.szwhite{
	font-weight: 700;
	display: inline;
    background-image: -webkit-gradient(linear,left top,left bottom,color-stop(56%,transparent),color-stop(0,#fffff));
    background-image: linear-gradient(180deg,transparent 56%,#ffffff 0);
    background-repeat: no-repeat;
}
[v-cloak]{
	display: none;
}
#app{
	position: relative;
	width: 750px;
	min-height: 100%;
	margin: 0 auto;
	display: block;
}
.header{
	position: fixed;
	left: 0;
	right: 0;top: 0;
	margin: 0 auto;
	width: 100%;
	width: inherit;
	height: 88px;
	background: #30AAFF;
	line-height: 88px;
	z-index: 99;
}
.header .menu{
	position:absolute;
	height: 88px;
	width: 88px;
	left: 0;
	top: 0;
}
.header .menu i{
	font-size: 65px;
	color: #fff;
}
.header .head_tit{
	position: relative;
	text-align: center;
	line-height: 88px;
	font-size: 30px;
	color: #fff;
}
.muen_list{
	position: fixed;
	left: 0;
	width: 100%;
	height: 100%;
	top: 88px;
	background: rgba(0,0,0,.4);
	z-index: 98;
}
.muen_list ul{
	position: absolute;
	width: 390px;
	height: 100%;
	background: #fafafa;
}
.muen_list li{
	text-align: center;
	font-size: 34px;
	font-weight:500;
	border-bottom: 1px solid #ccc;
	padding: 25px 0;
}
.footer{
	position: fixed;
	left: 0;
	right: 0;bottom: 0;
	margin: 0 auto;
	width: 100%;
	width: inherit;
	height: 110px;
	background: #fff;
	z-index: 99;
-moz-box-shadow:0px -5px 6px #F4F4F4; -webkit-box-shadow:0px -5px 6px #F4F4F4; box-shadow:0px -5px 6px #F4F4F4;
}
.footer a{
	float: left;
	width: 33.333%;
	text-align: center;
	color: #30AAFF;
}
.footer a p{
	font-size: 26px;
	font-weight: 500;
}
.footer a i{
	font-size: 45px;
}
.banner_bg{
	position: relative;
	width: 100%;
	height: 280px;
	overflow: hidden;
	background: url('../img/bg.png') no-repeat;
}
.banner{
	position: relative;
	width: 706px;
	margin: 30px auto 0 auto;
	height: 250px;
	overflow: hidden;
	border-radius: 20px;
}
.bullet{
	display: inline-block;
    width: 10px;
    height: 10px;
    background: #ccc;
    position: relative;
    margin: 0 10px;
    border-radius: 50%;
}
.bullet-active{
    background: #333;
}
.article_bullet{
	display: inline-block;
    width: 16px;
    height: 16px;
    background: #808080;
    position: relative;
    margin: 0 8px;
    border-radius: 50%;
}
.article_bullet-active{
    background: #fff;
}
.index_nav{
	overflow:hidden;
}
.index_nav li{
	float: left;
	width: 25%;
	text-align: center;
	margin-top: 30px;
}
.index_nav li p{
	padding: 10px 0;
	font-size: 30px;
	font-weight: 600;
}
.index_nav li .pic{
	width: 84px;
	height: 84px;
	background: url("../img/icon.png") no-repeat;
	margin: 0 auto;
	text-align: center;
	line-height: 84px;
}
.index_nav li .pic i{
	color: #FFF;
	font-size: 42px;
}
.product .tit{
	font-size: 34px;
	font-weight: 600;
	text-align: center;
	padding: 30px 0;
}
.product li{
	width: 49%;
	float: left;
	background: #F1F1F1;
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 20px;
}
.product li .pic{
	width: 100%;
	height: 349px;
}
.product li .pic{
	width: 100%;
	height: 100%;
}
.product .name{
	font-size: 28px;
	font-weight: 600;
	text-align: center;
	padding: 20px 0;
}
.product li:nth-child(2n){
	float: right;
}
.tiao_bullet{
	display: inline-block;
    width: 50px;
    height: 8px;
    background: #ccc;
    position: relative;
    margin: 0 10px;
}
.tiao_bullet-active{
background: #333;
}
.class_list{
	position: relative;
	height: 360px;
	margin-top: 60px;
}
.class_list li{
	float: left;
	width: 25%;
	text-align: center;
	margin-bottom: 20px;
}
.class_list li p{
	font-size: 30px;
	padding: 10px 0;
}
.class_list li .s_icon{
	width: 84px;
	height: 84px;
	background: #cccccc;
	margin: 0 auto;
	text-align: center;
	line-height: 84px;
	border-radius: 50%;
	color: #ffffff;
}
.class_list li .s_icon i{
	font-size: 50px;
}
.hot_p{
	position: relative;
	overflow: hidden;
}
.hot_p .titname{
	text-align: center;
	font-size: 34px;
	font-weight: 500;
}
.hot_p ul{
	overflow: hidden;
	margin-top: 30px;
}
.hot_p li{
	float: left;
	width: 50%;
	overflow: hidden;
	padding: 15px;
}
.hot_p li .box{
	border-radius: 15px;
	overflow: hidden;
}
.hot_p li .goods_name{
	font-size: 30px;
	font-weight:500;
	text-align: center;
	padding: 20px 0;
	background: #f1f1f1;
}

.cp_nav{
	width: 100%;
	padding-left: 30px;
	overflow: hidden;
}
.cp_nav .swiper-slide{
	padding: 15px 0;
	text-align: center;
}
.cp_nav .swiper-slide a{
	font-size: 30px;
}
.cp_nav .xsnav{
	font-size: 30px;
	height: 80px;
	line-height: 80px;
	text-align: center;
	color: #b2b2b2;
}
.cp_nav .selected{
 color: #333333 !important;
}
.cp_nav .selected:before{
	position:absolute;
	content: "";
	width: 34px;
	height: 6px;
	bottom: 0px;
	left: 50%;
	margin-left: -17px;
	background-color: #0075c5;
}
.goods_pic{
	position: relative;
	overflow: hidden;
	width: 100%;
	height: 750px;
}
.goods_tit{
	background: #fff;
	font-size: 30px;
	padding: 30px;
	font-weight: 500;
}
.goods_tit span{
	color: #ff3636;
}
.pics_box{
	position:fixed;
	left: 0;
	top: 0;
	background: rgba(0,0,0,.4);
	width: 100%;
	height: 100%;
	z-index: 96
}
.pics_box .make{
	position: relative;
	border-radius: 20px;
	left: 50%;
	top: 50%;
	margin-left: -305px;
	margin-top: -553px;
	width: 610px;
	background: #ffffff;
	padding: 20px 20px 50px 20px;
}
.pics_box .make .pic{
	width: 570px;
	margin: 0 auto;
}
.pics_box .make p{
	margin: 20px 0;
	font-size: 26px;
}
.pics_box .make .colse{
	position: absolute;
	left: 50%;
	bottom: -50px;
	margin-left: -50px;
	width: 100px;
	height: 100px;
	background: #fff;
	border-radius: 50%;
	border: 1px solid #999;
	text-align: center;
	line-height: 100px;

}
.pics_box .make  .colse i{
	font-size: 40px;
	color: #ccc;
}
.nav_list{
	overflow: hidden;
}
.nav_list li{
	float: left;
	width: 16.666%;
	text-align: center;
	font-size: 30px;
	padding: 10px;
}
.nav_list li .box{
	padding: 5px 10px;
	border: 1px solid #ccc;
	border-radius: 20px;
}
.nav_list li .selected{
	background: #ccc;
	color: #fff;
}
.nav_list li .selected a{color: #000}
.ab_box{
	margin-top: 40px;
	overflow: hidden;
	font-size: 30px;
	color: #808080;
}
.ab_box .ab_tit{
	width: 100%;
	padding: 30px 0;
	text-align: center;
	font-size: 34px;
	color: #333;
}
.nolist{
	position: relative;
	width: 100%;
	height: 500px;
	margin-top: 90px;
	text-align: center;
	font-size: 30px;
	overflow: hidden;
	z-index: 9
}
.nolist .pic{
	width: 340px;
	height: 400px;
	margin: 0 auto;
	background: url(../img/404.png) center no-repeat;
}
.nolist p{
	padding: 30px 0;
}
.kefu_box{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 98;
	background: rgba(0,0,0,.4)
}
.kefu_box .info{
	position: absolute;
	left: 50%;
	top: 50%;
	margin-left: -200px;
	margin-top: -240px;
	border-radius: 10px;
	width: 400px;
	height: 480px;
	background: #fff;
	text-align: center;
	font-size: 30px;
}
.kefu_box .info .pic{
	width: 100%;
	padding: 30px;
	margin: 0 auto;
	text-align: center;
}
.jszz{

	width: 100%;
	text-align: center;
	padding: 30px 0;
	line-height: 35px;
	font-size: 28px;color: #d8d8d8;
}
.jszz a{
	color: #d8d8d8;
}
.jszz .box{margin: 0 auto;width: 340px;}
.jszz i{
	font-size: 60px;
	float: left;
}
.page{
	overflow: hidden;
	padding-top: 30px;
}