*{ margin: 0; padding: 0;}
#box { width: 100%; max-width: 640px; margin: 0 auto; position: relative; padding-bottom: 1.8rem; background:url(../img/bodyBG.jpg);}
.tempWrap { width: 100% !important; max-width:640px; max-height: 3rem}
a { text-decoration: none}

.con-title { width: 100%; padding:0.2rem 0; background:#0070f4;}
.con-title .title-top { overflow:hidden; margin-bottom:0.1rem; display:flex;justify-content:space-between;align-items:baseline}
.con-title p { text-align:center;font-size:0.2rem;color:#FFFFFF}
.con-title .title-top div { width:23%; border-bottom:1px solid #ffffff;}
.con-title .title-top h1 { text-align:center; text-align:center; font-weight:bold;font-size:0.55rem;color:#FFFFFF}

.con-title2{width:100%;padding:0.2rem 2%;box-sizing:border-box;background-color:#00BABC;display:flex;justify-content:space-between;
	align-items: flex-end}
.con-title2 .title-left {overflow: hidden; display:flex;align-items: flex-end}
.con-title2 .title-left h2 { font-size:0.4rem;font-weight: normal}
.con-title2 .title-left p {  font-size: 0.2rem;margin-left: 0.2rem}
.con-title2 a { text-decoration: none; color: #fff; margin-top: 5px}

/*header*/
header { width: 100%;}
header .header-title {display:flex;justify-content:space-between;align-items:center;width:100%;background:#343746}
header .header-title .left { width:66.875%;margin-left:3.15%}
header .header-title .left img{ width: 100%;display: block}
header .header-title .right { width: 13.2%; background-color:#DEB383; padding: 0.4rem 0;margin-bottom: -1px}
header .header-title .right img {display: block; width: 56%; margin: 0 auto;}

header .banner { width: 100%;}
header .banner img{ width: 100%;display: block}

header .header-nav { overflow: hidden; width: 100%; padding:0.2rem 0; background-color: #000; }
header .header-nav a { float: left;text-decoration: none; color: #cccccc; text-align: center; font-size:0.3rem; margin: 0 1%}

header nav { width: 100%; padding: 15px 0;}
header nav ul { list-style: none; display: flex; flex-direction: row;}
header nav ul li { width: 20%;}
header nav ul li a { display: block; width: 100%; text-align: center; text-decoration: none;}
header nav ul li a img { width: 85%;}
header nav ul li a p { margin-top: 10px; color: #000; font-size: 18px;}

/*product*/
.product { width: 100%;}
.product .product-con { width: 100%; display: flex; flex-direction: row; flex-wrap: wrap;padding:0.6rem 0;}
.product .product-con .proArea{ 
/* width:91.5625%;  */
margin:0.3rem auto;
 /* background:url(../img/proBG.png) no-repeat; */
 background-size:100% 100%;padding:0.6rem 0;overflow:hidden}
.product .product-con .proArea:nth-child(2) .left{ float:right;margin-left:0}
.product .product-con .proArea:nth-child(2) .left img{ width:90%}
.product .product-con .proArea:nth-child(2) .right{ float:left}
.product .product-con .proArea .left{ width:57%;float:left;margin-left:3%}
.product .product-con .proArea .left img{ width:100%;display:block;}
.product .product-con .proArea .right{ display:flex;flex-wrap: wrap; align-content: space-around;width:40%; padding:1rem 0;float:right;margin-top:0.3rem;}
.product .product-con .proArea .right h3{ font-size:0.6rem;font-weight:normal;font-family:"Microsoft YaHei";color:rgb(0, 0, 0);line-height:1.2;width: 100%;text-align: center;margin-bottom:0.5rem}
.product .product-con .proArea .right a{ display:block;width:50%;line-height:2;background:#1f1f1f;text-align:center;
  font-size:0.3rem;font-family: "Microsoft YaHei";color: rgb(255, 255, 255);margin:0 auto;}
  
.product .product-con2{ width:96%;display: flex; flex-direction: row; flex-wrap: wrap;padding:0.6rem 0;margin:0 auto;justify-content:space-between;}
.product .product-con2 .proArea{width:48%;margin-bottom:0.1rem;}
.product .product-con2 .proArea a{width:100%;display:block;}
.product .product-con2 .proArea a img{width:100%;display:block;}
.product .product-con2 .proArea a h3{ font-size:0.46rem;font-weight:normal;font-family:"Microsoft YaHei";color:rgb(0, 0, 0);line-height:1.8;width: 100%;text-align: center}

.procon { width: 96%; margin: 20px auto;}
.procon h2 { width: 100%; text-align: center; color:#0481D9; font-size: 0.6rem;letter-spacing:0.1em;}
.procon img { display: block; width: 50%; margin:0.2rem auto}
.procon p { text-indent: 2em; font-size: 0.4rem; color: #666666;width: 90%;margin: 0 auto}

.proMore { display: block; width: 28%; margin:0.3rem auto; text-align: center; font-size:0.3rem; text-decoration: none; color: #000; 
	border: 1px solid #000; border-radius:0.15rem;line-height: 1.8}

/*tel*/
.tel { background-color: #ffb401; padding: 10px 0;}
.tel a { display:block;width: 90%; margin: 0 auto; color: #fff; font-size: 66px;overflow: hidden;}
.tel a img { margin-right: 30px;}

/*about*/
.about { width:91.4%; margin:0.5rem auto;padding:0.5rem 0;background:url(../img/aboutBG.jpg) no-repeat;background-size:100% 100%;}
.about .about-img { width:91.282%;margin:0 auto;}
.about .about-img img { width: 100%;display: block}
.about .title{ width:92%;margin: 0.3rem auto;}
.about .title h1{font-size:0.5rem;font-family: "Microsoft YaHei";color: rgb(0, 0, 0);font-weight: bold;}
.about .title span{ font-size: 0.3rem;font-weight: normal;margin-left: 0.2rem}
.about .about-text { width: 92%; margin: 0 auto; font-size: 14px; margin-top: 10px;}
.about .about-text p { text-indent: 2em; margin-bottom:0.2rem;font-size:0.3rem;font-family:"Microsoft YaHei";color: rgb(0,0,0,0.8);line-height: 1.5;}

.aboutCon { width: 100%}
.aboutCon .aboutCon-img { display: block; width: 96%; margin: 20px auto;}
.aboutCon .aboutCon-text p { width: 98%; margin: 0 auto;text-indent: 2em; margin-bottom: 16px; font-size: 20px}

/*news*/
.news { width: 100%;}
.news .news-list { width: 97%; margin: 30px 1% 30px 2%;}
.news .news-list a { display: block;margin: 10px 5px; text-decoration: none; color:#000; border-bottom: 1px solid #999999; text-indent: 1em; background: url('../img/news.png') no-repeat; background-size: 0.5% 70%; background-position: 0 30%; font-size:0.3rem;}

.newsCon { width: 96%; margin: 20px auto;}
.newsCon h2 { text-align: center; font-size: 0.7rem;}
.newsCon p { text-indent: 2em; line-height:1.8; margin-top:0.3rem;font-size: 0.4rem}

/*contact*/
.contact { width: 100%;}
.contact .contact-con{ overflow:hidden;padding:1rem 0;width:91.4%;background:url(../img/tactBG.jpg) center no-repeat;background-size:100% 100%;
	margin:0.5rem auto;text-align: center;}
.contact .contact-con h1{font-size:0.7rem;font-family: "Microsoft YaHei";color:#999;font-weight: bold;margin-bottom:0.2rem}
.contact .contact-con h2{font-size:0.7rem;font-family: "Microsoft YaHei";color: #000000;font-weight: bold;margin-bottom:0.2rem}

/*advantage*/
.advantage { width: 100%;}
.advantage img{ width: 92.1875%;display: block;margin:0.8rem auto;}

/*copyright*/
.copyright { width: 100%; padding: 10px 0; font-size: 14px; color: #7c7c7c}
.copyright p { text-align: center;overflow: hidden; font-size: 0.3rem}

/*footer*/
.bottomMenu { width: 100%; max-width: 640px;background-color:#1f1f1f; position: fixed; bottom: 0;}
.bottomMenu ul { list-style: none; display:flex; flex-direction:row; flex-wrap:wrap;}
.bottomMenu ul li{ width:25%; text-align: center;padding:0.1rem 0 0.2rem;}
.bottomMenu ul li a { text-decoration: none; color: #fff;}
.bottomMenu ul li a div{ height: 1.2rem;display: flex; justify-content: center;align-items: center;align-content: center}
.bottomMenu ul li a img{ display: block;}
.bottomMenu ul li:nth-child(1) a img{ width:29.375%;}
.bottomMenu ul li:nth-child(2) a img{ width:29.375%;}
.bottomMenu ul li:nth-child(3) a img{ width:31.875%;}
.bottomMenu ul li:nth-child(4) a img{ width:28.75%;}
.bottomMenu ul li a p { font-size: 0.3rem;}

/*menu*/
.menu2 { width: 100%; height: 100%; position: fixed; top:0; z-index: 100;overflow: hidden; display: none;}
.menu2 .menuLeft { width: 50%; max-width: 320px; height: 100%; background-color: rgba(153, 153, 153, 0.7); float: left;}
.menu2 .menuRight { width: 50%; max-width: 320px; height: 100%; background-color: rgba(0, 0, 0,0.8); float: left;}
.menu2 .menuRight a { display: block; width: 100%; padding:0.5rem 0; border-bottom: 1px solid #fff; text-decoration: none; color: #fff;text-align: center; font-size:0.4rem;}

.paixu{width:100%}
.paixu a{display:flex;}
.paixu img{width:40%;height:50%;margin:5%;}