.all {justify-content: center;
    display: flex;
    flex-direction: column;
    background: url(/static/assets/global/img/bgindex.jpg) center no-repeat;
    height: 600px;}
.allli { width:1340px; height:auto; margin:0 auto;}
.alile { float:left; width:600px; color:#fff;}
.alile h1 { font-size:48px; line-height:60px; font-weight: 500;}
.aliri { float:right; width:530px;}
.alile d a { padding:5px 10px; background-color: #fff; margin-top:30px; border-radius: 15px}
.alile d a:hover { background-color: #f0f0f5;}

.indextop { width:1368px; height:400px;margin:0px auto; }
.indextop li { width:23.56%; height:400px; float:left;background-color: #fff;  margin-left:1.18%; border:0px solid #c0c1c2;box-shadow: 0 0.1875rem 0.4375rem 0 rgb(0 0 0 / 13%), 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 11%); transition: all .2s linear;border-radius: 5px;}
.indextopimg { width:100%; height:200px; background:#f0f0f5;border-radius: 5px 5px 0 0;}
.indextopimg img { width:100%; height:200px; border-radius: 5px 5px 0 0;}
.indextopimga { width:100%; height:240px; background:#f0f0f5;border-radius: 5px 5px 0 0;}
.indextopimga img { width:100%; height:240px; border-radius: 5px 5px 0 0;}
.indexback { width:100%; height:530px; background:#f0f0f5;margin:0px auto; padding-top:30px;}
.indexbacktitle {width:1340px; height:80px; margin:0px auto ;text-align: center;}
.stars { height:40px;}
.stars i { color:#00b67a;}

.pagemaintop { width:100%; height:350px; background:#f0f0f5; margin:0 auto;}

.indexbackone { width:100%; height:auto; background:#f0f0f5;margin:0px auto; padding-top:30px;}
.indextopone { width:1371px; height:auto;margin:0px auto; }
.indextopone li { width:23.54%; height:380px;margin-bottom:20px; float:left;background-color: #fff;  margin-left:1.18%; border:0px solid #c0c1c2;box-shadow: 0 0.1875rem 0.4375rem 0 rgb(0 0 0 / 13%), 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 11%); transition: all .2s linear;border-radius: 5px;}
.indextoponeimg { width:100%; height:240px; background:#f0f0f2;border-radius: 5px 5px 0 0;}
.indextoponeimg img { width:100%; height:240px; border-radius: 5px 5px 0 0;}
.indextoponecontents { width:90%; height:120px; margin:0 auto;text-align: center;}
.indextoponecontents h2 { font-size:18px; margin-top:0px; margin-bottom:5px;font-weight: 500;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;}

.indextoponecontents dd {height:95px;margin-bottom: 10px;
        overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.indextoponecontents d a {border:1px solid #333;
    padding: 8px 10px;font-size:16px;  margin-left:0px; margin-top:0px; color:#333;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;}
.indextoponecontents d a:hover {border:1px solid #333; background-color: #333; color: #fff;
    padding: 8px 10px;font-size:16px;  margin-left:0px;margin-top: 0px;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;}
.indextoponecontents id a {border:1px solid #eb002f;background-color: #eb002f; color:#fff;
    padding: 8px 10px;font-size:16px;  margin-left:20px;
    height: 30px;
    line-height: 30px;
    margin-top: 20px;
    border-radius: 5px;}
.indextoponecontents id:hover {color:#333;margin-top: 0px;font-size:16px; background-color: #fff;}
.indextoponecontents id a:hover {border:1px solid #eb002f;background-color: #fff; color:#333;
    padding: 8px 10px;font-size:16px;  margin-left:20px;
    height: 30px;
    line-height: 30px;
    margin-top: 20px;
    border-radius: 5px;}
    
.indextoponecontents ii a {border:1px solid #333;
    padding: 8px 10px;font-size:16px;  margin-left:0px;color:#333;margin-top: 0px;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;}
.indextoponecontents ii a:hover {border:1px solid #333; background-color: #333; color: #fff;
    padding: 8px 10px;font-size:16px;  margin-left:0px;margin-top: 0px;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;}
    
    
    

.indextopcontents { width:90%; height:200px; margin:0 auto;text-align: center;}
.indextopcontents h2 { font-size:18px; margin-top:15px; margin-bottom:5px;font-weight: 550;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;}

.indextopcontents dd {height:95px;margin-bottom: 10px;
        overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}
.indextopcontents d a {border:1px solid #333;
    padding: 8px 10px;font-size:16px;  margin-left:0px; margin-top:20px;color:#333;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;}
.indextopcontents d a:hover {border:1px solid #333; background-color: #333; color: #fff;
    padding: 8px 10px;font-size:16px;  margin-left:0px;margin-top: 0px;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;}
.indextopcontents id a {border:1px solid #eb002f;background-color: #eb002f; color:#fff;
    padding: 8px 10px;font-size:16px;  margin-left:20px;
    height: 30px;
    line-height: 30px;
    margin-top: 20px;
    border-radius: 5px;}
.indextopcontents id:hover {color:#333;margin-top: 0px;font-size:16px; background-color: #fff;}
.indextopcontents id a:hover {border:1px solid #eb002f;background-color: #fff; color:#333;
    padding: 8px 10px;font-size:16px;  margin-left:20px;
    height: 30px;
    line-height: 30px;
    margin-top: 20px;
    border-radius: 5px;}
    
.indextopcontents ii a {border:1px solid #333;
    padding: 8px 10px;font-size:16px;  margin-left:0px;color:#333;margin-top: 0px;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;}
.indextopcontents ii a:hover {border:1px solid #333; background-color: #333; color: #fff;
    padding: 8px 10px;font-size:16px;  margin-left:0px;margin-top: 0px;
    height: 30px;
    line-height: 30px;
    border-radius: 5px;}

.indexba { width:1340px; height:500px; margin:0px auto;}
.indexbal { width:43.4%; height:400px; padding:3%; text-align:justify; text-justify:inter-ideograph; float:left; border:0px solid #c0c1c2;box-shadow: 0 0.1875rem 0.4375rem 0 rgb(0 0 0 / 13%), 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 11%); transition: all .2s linear;border-radius: 5px;}
.indexbar { width:49.3%; height:500px; float:right;border:0px solid #c0c1c2;box-shadow: 0 0.1875rem 0.4375rem 0 rgb(0 0 0 / 13%), 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 11%); transition: all .2s linear;border-radius: 5px;}
.indexpr { width:1340px; height:860px; margin:30px auto;}
.indexprl { width:33%; height:860px; float:left;border:0px solid #c0c1c2;box-shadow: 0 0.1875rem 0.4375rem 0 rgb(0 0 0 / 13%), 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 11%); transition: all .2s linear;border-radius: 5px;}
.indexprl img { width:100%; height:100%; border-radius: 5px;}
.indexprr { width:66.5%; height:840px; float:right;border:0px solid #c0c1c2;}
.indexprr li { width:47.6%; height:420px; float:left; margin-left:2.3%; border:0px solid #c0c1c2;     background-color: #fff; margin-bottom:20px;box-shadow: 0 0.1875rem 0.4375rem 0 rgb(0 0 0 / 13%), 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 11%); transition: all .2s linear;border-radius: 5px;
}
.jpad { width:1340px; height:526px; margin:0 auto; box-shadow: 0 0.1875rem 0.4375rem 0 rgb(0 0 0 / 13%), 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 11%); transition: all .2s linear; border-radius: 5px;}
.jpad img { width:1340px; height:auto; border-radius: 5px;}



.indexwbu { width:100%; height:760px; margin:30px auto; padding-top:30px; background: url(//s.alicdn.com/@img/imgextra/i4/O1CN01ustqhi1Tz44lu4arh_!!6000000002452-0-tps-3840-1248.jpg_q60.jpg) center no-repeat; }
.indexwbutitle {width:1200px; height:100px; margin:0px auto ;text-align: center;}
.whybuyus {width: 1380px;margin: 0 auto;height:530px;text-align: center;}
.whybuyus li { width:31.6%; height:280px; float:left;background:#fff; margin-left:1.3%;padding:1.5%;margin-bottom:20px; border:0px solid #c0c1c2;box-shadow: 0 0.1875rem 0.4375rem 0 rgb(0 0 0 / 13%), 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 11%); border-radius: 5px;}
.whybuyus li:hover {box-shadow: 0 10px 15px rgba(0,0,0,.19),0 3px 3px rgba(0,0,0,.22);}
.whybuyus h2 { font-size:17px;font-weight:600;}
.whybuyus d {margin-top:10px;}
.whybuyus d i {font-size:40px; line-height:70px;}

.indexyidong { width:100%; height:530px; margin:30px auto; background: #fff;}

.container{width: 1372px;margin: 0 auto;height:530px; background: #ff0f0f5;}
/*浜у搧灞曠ず*/
.pro-center{width: 100%;height: auto;overflow: hidden;}
.pro-center .title{font-size: 28px;text-align: center;padding-bottom: 5px;color: #333333;letter-spacing: 1px;}
.pro-center .sub-title{font-size: 20px;text-align: center;color: #333333;}
.pro-center .sub-title span{display: inline-block;height: 30px;line-height: 30px;width: auto;}
.pro-center .sub-title span.text{padding: 0 10px;}
/*浜у搧灞曠ず宸︿晶*/
.pro-left{width: 97.9%;box-sizing: border-box;flex-wrap:wrap;margin: 0 auto;background: #f6f6f6;}
.pro-content{width: 100%;padding-top: 20px;}
.pro-right{width: 100%;}
.pro-left .left-title{background: #317fff;height: 110px;line-height: 110px;text-align: center;}
.pro-left .left-title span{display: inline-block;color: #FFFFFF;font-size: 24px;font-weight: bold;}
.pro-left .left-title span.text{padding: 0 10px;}
.pro-left .left-category ul li{float: left;width:19.95%;height: 50px;line-height: 50px;font-size: 16px;text-align: center;cursor: pointer;color: #333;font-weight: bold;}
.pro-left .left-category ul li.on{background: #FF8929;color: #FFFFFF;}
.pro-left .left-category ul li:hover{background: #FF8929;color: #FFFFFF;}
.pro-left .left-contact {margin-top: 37px;margin-bottom: 37px;text-indent: 70px;background: url(../image/tel.png) left 20px center no-repeat;}
.pro-left .left-contact p{color: #317fff;font-size: 14px;}
.pro-left .left-contact p .tel{font-size: 20px;padding-top: 10px;}
.list {
  display: flex;
  justify-content: space-around;
  list-style-type: none; /* 移除列表的标记，如果需要的话 */
  padding: 0; /* 移除默认的内边距，如果需要的话 */
  margin-bottom:15px;
}
/*浜у搧灞曠ず鍙充晶*/
.pro-right{display: none;}
.pro-right ul li { width:23.563%; height:420px; float:left;background:#fff; margin-left:1.18%; border:0px solid #c0c1c2;box-shadow: 0 0.1875rem 0.4375rem 0 rgb(0 0 0 / 13%), 0 0.0625rem 0.125rem 0 rgb(0 0 0 / 11%); transition: all .2s linear;border-radius: 5px;}
.pro-right ul li .img{width:100%;height:230px;overflow: hidden;}
.pro-right ul li img{width:100%;}
.pro-right ul li p{height: 50px;line-height: 50px;text-align: center;font-size: 18px;color: #333333;}
.pro-right.active{display: block;}
.pro-right ul li:hover{box-shadow: 0 0.2rem 0.5rem 0 rgb(0 0 0 / 13%), 0 0.1rem 0.3rem 0 #777;transition: all .2s linear;}




.sttn { width:100%; height:145px; border:1px solid #c0c1c2; display: flex; align-items: center; /* 垂直居中 */}
.sttnmain {width:1340px; height:auto; margin:0 auto;}
.sttnmain li { float:left; width:33%; display: flex; align-items: center; /* 垂直居中 */}
.sttnmain h5 {line-height:60px;color:#f03; font-size:24px;}

.ituse{ width:1480px; height:145px; margin:0px auto; border:0px solid #c0c1c2;background:#fff;text-align: center;}
.ituse li { width:25%; height:145px; float:left;font-size:24px;line-height:145px;}
.ituse i { font-size:25px; width:auto; margin-right:10px;}
.ituse ii { font-size:18px; width:100%;}



.joinus { width:100%; height:200px; background-color: #393a3b;text-align:center;color:#ffffff; padding-top:30px;}
.joinus h3 { text-align:center;color:#ffffff; line-height:40px;font-size:22px; font-weight:500;}
.form-email { height:100px; margin-top:10px;}
.form-control-email { width:100px; height:30px;}
.form-cont { width:100px; height:30px;}
.btn-green { width:100px; height:30px;background-color: #f03;}

.allfooter { width:100%; height:400px; background: #f4f4f4;}
.allfooterso { width:1340px; height:auto; margin:0 auto; padding-top:30px;}
.footertopleft a { color: #333; }
.footertop { width: 1340px; margin: 0 auto; height: 400px;}
.footertopleft { width: 70.5%; height: auto; float: left;}
.footertopleft li { width: 25%;float: left;}
.footertopleft li h3 { color:#333; font-size:16px; font-weight:700;padding: 10px 0;}
.footertopleft li ul li { width: 100%; padding: 6px 0;}
.footertopleft li ul li a { font-size:15px;}
.footertopleft li ul li a:hover{ text-decoration: underline; }
.footertopright { width: 25%; height: auto; float: right;border:0px solid #c0c1c2;color:#333;}
.footertopright h3 { color:#333; font-size:16px; font-weight:600;padding: 10px 0;}
.footerbottom {  width: 100%; height: 50px; background-color: #393a3b; text-align:center; line-height:50px;color:#ffffff;}
.footerbottom a { margin: 0px 30px; line-height:50px;}
.footerbottom a:hover{ text-decoration: underline; }
.footertopright i { width: 15px; height: 15px; font-size:15px; line-height:50px; }
.footertopright a {text-decoration:underline;}


/************products**********/
.breado { width:100%;height:50px;}
.breadon { width:1340px;height:50px; margin:0 auto; line-height:50px; font-size:13px;}
.breadon a { font-size:13px;}



.pagesitem { width:1350px; line-height:50px; text-align:center; margin: 0px auto; height:50px; padding:20px auto;}
.pagination>.active>a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {
    z-index: 3;
    color: #fff;
    background-color: #00a0ea;
    cursor: default;
    background: #222;
    border: solid 1px #ddd;
    border-radius: 5px;
}
.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 20px;
    line-height: 30px;
    text-decoration: none;
    color: #333;
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 5px;font-size:17px; font-weight:500;
    
}
.pagination>li>a {
    margin: 0 5px;
}
.pagination>li>a:hover {
    background: #1f91f7;
    border-radius: 5px;
    font-weight:500;border: 1px solid #00a0ea;
}

.catetop { width:1340px; height:200px; margin:0 auto;}
.catetop a { color:#0275e8;}
.catetop a:hover { color:#333;
    text-decoration: underline;
}
.catetopone { width:65%; height:auto; float:left}
.catetopone h1 { font-size:36px; line-height:50px;font-weight:500;}
.catetoptwo { width:33%; height:auto; float:right}
.catetoptwo img { width:auto; height:100%; border-radius: 5px;float:right;}


        #conmain {
            width: 700px;
            height: 220px;
            margin: 0 auto;
        }
        #container {
            width: 500px;
            height: 820px;
            margin: 0 auto;
        }
        div .search { 
            padding: 5px 0;}

        form {
            position: relative;
            width: 400px;
            margin: 0 auto;
        }

        input, button {
            border: none;
            outline: none;
        }

        input {
            width: 100%;
            height: 42px;
            padding-left: 13px;
        }

        button {
            height: 42px;
            width: 42px;
            cursor: pointer;
            position: absolute;
        }

        /*搜索框1*/
        .bar1 {background: #393a3b;}
        .bar1 input {
            border: 1px solid #F03;
            border-radius: 5px;
            background: #F9F0DA;
            color: #9E9C9C;
        }
        .bar1 button {
            top: 0;
            right: 0;
            background: #F03;
            border-radius: 0 5px 5px 0;
        }
        .bar1 button:before {
            content: "\f105";
            font-family: FontAwesome;
            font-size: 20px;
            color: #fff;
        }

        /*搜索框2*/
        .bar2 {background: #DABB52;}
        .bar2 input, .bar2 button {
            border-radius: 3px;
        }
        .bar2 input {
            background: #F9F0DA;
        }
        .bar2 button {
            height: 26px;
            width: 26px;
            top: 8px;
            right: 8px;
            background: #F15B42;
        }
        .bar2 button:before {
            content: "\f105";
            font-family: FontAwesome;
            color: #F9F0DA;
            font-size: 20px;
            font-weight: bold;
        }

        /*搜索框3*/
        .bar3 {background: #F9F0DA;}
        .bar3 form {background: #A3D0C3;}
        .bar3 input, .bar3 button {
            background: transparent;
        }
        .bar3 button {
            top: 0;
            right: 0;
        }
        .bar3 button:before {
            content: "\f002";
            font-family: FontAwesome;
            font-size: 16px;
            color: #F9F0DA;
        }

        /*搜索框4*/
        .bar4 {background: #F15B42;}
        .bar4 form {
            background: #F9F0DA;
            border-bottom: 2px solid #BE290E;
        }
        .bar4 input, .bar4 button {
            background: transparent;
        }
        .bar4 button {
            top: 0;
            right: 0;
        }
        .bar4 button:before {
            content: "\f178";
            font-family: FontAwesome;
            font-size: 20px;
            color: #be290e;
        }

        /*搜索框5*/
        .bar5 {background: #683B4D;}
        .bar5 input, .bar5 button {
            background: transparent;
        }
        .bar5 input {
            border: 2px solid #F9F0DA;
        }
        .bar5 button {
            top: 0;
            right: 0;
        }
        .bar5 button:before {
            content: "\f002";
            font-family: FontAwesome;
            font-size: 16px;
            color: #F9F0DA;
        }
        .bar5 input:focus {
            border-color: #311c24
        }

        /*搜索框6*/
        .bar6 {background: #F9F0DA;}
        .bar6 input {
            border: 2px solid #c5464a;
            border-radius: 5px;
            background: transparent;
            top: 0;
            right: 0;
        }
        .bar6 button {
            background: #c5464a;
            border-radius: 0 5px 5px 0;
            width: 60px;
            top: 0;
            right: 0;
        }
        .bar6 button:before {
            content: "搜索";
            font-size: 13px;
            color: #F9F0DA;
        }

        /*搜索框7*/
        .bar7 {background: #7BA7AB;}
        .bar7 form {
            height: 42px;
        }
        .bar7 input {
            width: 250px;
            border-radius: 42px;
            border: 2px solid #324B4E;
            background: #F9F0DA;
            transition: .3s linear;
            float: right;
        }
        .bar7 input:focus {
            width: 300px;
        }
        .bar7 button {
            background: none;
            top: -2px;
            right: 0;
        }
        .bar7 button:before{
          content: "\f002";
          font-family: FontAwesome;
          color: #324b4e;
        }

        /*搜索框8*/
        .bar8 {background: #B46381;}
        .bar8 form {
            height: 42px;
        }
        .bar8 input {
            width: 0;
            padding: 0 42px 0 15px;
            border-bottom: 2px solid transparent;
            background: transparent;
            transition: .3s linear;
            position: absolute;
            top: 0;
            right: 0;
            z-index: 2;
        }
        .bar8 input:focus {
            width: 300px;
            z-index: 1;
            border-bottom: 2px solid #F9F0DA;
        }
        .bar8 button {
            background: #683B4D;
            top: 0;
            right: 0;
        }
        .bar8 button:before {
            content: "\f002";
            font-family: FontAwesome;
            font-size: 16px;
            color: #F9F0DA;
        }

.cateallmain { width:1340px; height:auto; margin:0 auto;}




/*********SHOW***********/
.showa { width:1340px; height:580px; margin-bottom:30px; margin-left:auto; margin-right:auto;}
.showaimg { width:650px; height:550px; float:left;border-radius: 00px; border: 0px solid #f0f0f5;}
.showatip { width:650px; height:580px; float:right;}
.showatip h1 {
    font-size: 32px;
    line-height: 50px;
    font-weight: 600;
}
.showatipx { width:100%; height:auto; background: #f0f0f5;}
.product-overview {
    border-right: solid 1px #222;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 32px;
    width: 49.5%;float:left;
}
.product-overviewa {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 32px;
    width: 49.5%;float:left;
}

.yzm-image{
	width: 550px;
	height: 450px;
	text-align: center;
}
.yzm-image img{
	width: 550px;
	height:410px;
	overflow: hidden;
}
.yzm-switch{
	width: 550px;
	height: 100px;
}
.yzm-switch-center {
	width:550px;
	height: 100px;}
	
.yzm-switch-center li {
	display: inline;
	width:100px;
	height: 90px;
	margin-bottom: 10px;
	margin-right: 10px;
	float:left;}
.yzm-switch-center li a{display: block; width: 100px; height: 90px; }
.yzm-switch-center li a img{width: 100px; height: 90px;border: 1px solid #f0f0f5;}
.yzm-switch-center li a.on{border: 0px solid #fff;}
.yzm-switch-center li a:hover{border: 1px solid #fff;}
.yzm-content {
	height: auto;
	width: 100%;
	float: left;
}
.proall { width: 100%; height:auto; background-image: linear-gradient(to right, #f0f0f5 49%, transparent 47%); padding:40px auto;}
.proshow {width:1340px; height:auto; margin:0 auto;}
.proalla { width: 600px; background: #f0f0f5; height:auto; float:left; margin-top:40px;}
.proalla h2 {
    height:60px;
    border: 0;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    margin-top: 20px;
}
.proallb { width: 650px; height:100%; float:right;}
.showatip h3 { font-size: 26px; line-height:80px; text-align:center; height:80px;}
.itmai { width:100%; height:60px;
    margin-top: 20px;}
.itmai a { width:100%; 
    border: 1px solid #eb002f;
    background-color: #eb002f;
    color: #fff;
    font-size: 18px;
    margin-left: 20px;
    height: 60px;
    line-height: 60px;
    border-radius: 5px;
            font-weight: bold;}
.itmai a:hover {color:#333;margin-top: 0px;font-size:16px; background-color: #fff;border: 1px solid #f0f0f5;}