* {
     margin: 0;
     padding: 0;
     list-style: none;
     text-decoration: none;
     font-family: "Helvetica Neue",
         Helvetica,
         Arial,
         "Microsoft Yahei",
         "Hiragino Sans GB",
         "Heiti SC",
         "WenQuanYi Micro Hei",
         sans-serif;
 }

 nav {
     width: 100%;
     height: 40px;
     background: #333;
 }


 .nav-middle {
     width: 1226px;
     height: 100%;
     margin: 0 auto;
 }

 .nav-middle div {
     /* width: 1226px; */
     float: right;
     /* margin-right: 60px; */
 }

 .nav-middle div:first-child {
     float: left;
     /* margin-left: 52px; */
 }

 nav div>a {
     color: #b0b0b0;
     font-family: Helvetica;
     font-size: 12px;
     line-height: 40px;
     padding: 0 8px;
 }

 nav div>a:hover {
     color: white;
 }

 .nav-middle div:first-child a:nth-last-child(2) {
     position: relative;
     display: inline-block;
 }

 .nav-middle div:first-child a:nth-last-child(2):hover .hint {
     visibility: visible;
 }

 .hint {
     position: absolute;
     text-align: center;
     line-height: 12px;
     left: -35px;
     top: 16px;
     visibility: hidden;
     z-index: 100;
     /* background: white; */
 }

 .hint .triangle {
     display: inline-block;
     width: 0px;
     height: 0px;
     border: 16px solid transparent;
     border-bottom: 8px solid white;
 }

 .download {
     display: block;
     padding: 18px;
     box-shadow: 0 1px 5px #aaa;
     background: white;
 }

 .download img {
     width: 90px;
     height: 90px;
 }

 .download p {
     padding-top: 12px;
     font-size: 14px;
     color: #333;
 }

 .special {
     width: 120px;
     height: 100%;
     /* background: ; */
     display: inline-block;
     text-align: center;
     position: relative;
     transition: all 0.5s;
     background: #424242 url("../image/02.png") no-repeat 10px center;
     background-size: 21px 18px;
 }

 /* .nav-middle>div:last-child a:last-child:hover {
     color: #ff6700;
     background: white url("../image/03.png") no-repeat 10px center;
     background-size: 21px 18px;
 } */

 .special:hover {
     color: #ff6700;
     background: white url("../image/03.png") no-repeat 10px center;
     background-size: 21px 18px;
 }

 /* .nav-middle div:last-child a:last-child:hover .shops {
     visibility: visible;
 } */

 .special:hover .shops {
     visibility: visible;
 }

 .shops {
     width: 321px;
     height: 100px;
     line-height: 100px;
     text-align: center;
     position: absolute;
     right: -1px;
     top: 40px;
     box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
     color: black;
     visibility: hidden;
     z-index: 100;
     background: white;
 }


 .head {
     width: 100%;
     height: 100px;
 }

 .head .head-middle {
     width: 1226px;
     height: 100%;
     margin: 0 auto;
     /* background: yellow; */
     position: relative;
 }

 .head-middle .mi-home {
     display: inline-block;
     width: 55px;
     height: 55px;
     background: #ff6700 url("../image/04.png") no-repeat center center;
     background-size: 50px 50px;
     margin: 22.5px 0;
     transition: all 0.5s;
 }

 .head-middle .mi-home:hover {
     background-image: url("../image/05.png");
 }

 .head-middle .title {
     /* float: left; */
     margin-left: 188px;
     display: inline-block;

 }

 .head-middle .title li {
     float: left;
     line-height: 100px;
     padding-right: 20px;
     cursor: pointer;
 }

 .title a {
     font-size: 16px;
     font-family: Helvetica, Arial;
     cursor: pointer;

 }

 .title a:hover {
     color: #ff6700;
     text-decoration: none;
 }

 .title>li:hover .title-goods {
     /* opacity: 1; */
     display: block;
     background: white;
     /* opacity: 1; */
     /* top: 100px; */
 }

 .title li .title-goods {
     width: 1366px;
     height: 230px;
     /* background: skyblue; */
     position: absolute;
     left: -59px;
     top: 100px;
     border-top: 1px solid #e0e0e0;
     border-bottom: 1px solid #d5d5d5;
     box-shadow: 0 2px 2px #e0e0e0;
     display: none;

     z-index: 10;

     /* z-index: 2;
     opacity: 0;
     display: block;
     top: -130px;
     left: -59px;
     transition: top 2s; */
     /* opacity: 0; */
     /* transition: opacity 0.5s !important; */
     /* transition: display 2s; */
 }

 .title li .title-goods>ul {
     /* border-top: 1px solid #e0e0e0; */
     width: 1250px;
     height: 100%;
     /* background: pink; */
     margin: 0 auto;
 }

 .title>li .title-goods>ul li {
     float: left;
     height: 100%;
     margin-left: 27px;
     /* position: relative; */
 }

 .title>li .title-goods>ul img {
     width: 160px;
     height: 110px;
     padding-top: 35px;
 }

 /*  */
 .title>li .title-goods>ul .titile-goods-price {
     /* position: absolute;
     bottom: 0px;
     left: 50%; */
     font-size: 12px;
     font-family: "Helvetica Neue",
         Helvetica,
         Arial,
         "Microsoft Yahei",
         "Hiragino Sans GB",
         "Heiti SC",
         "WenQuanYi Micro Hei",
         sans-serif;
     margin-top: -30px;
     line-height: 25px;
     text-align: center;

 }

 .title>li .title-goods>ul p {
     color: #ff6700;
 }

 .head-middle .text-placeholder {
     position: absolute;
     right: 60px;
     top: 50%;
     margin-top: -8px;
     color: #757575;
     transition: visibility 0.1s;
 }

 .head-middle .text-placeholder span {
     background: #eee;
 }

 .head-middle .text-placeholder span:hover {
     background: #ff6700;
     color: white;
 }

 .head-middle .search {
     margin-top: 24px;
     float: right;
     width: 50px;
     height: 50px;
     /* border: 1px solid rgb(163, 157, 157); */
     border: 1px solid #ccc;
     border-left: none;
     background: url("../image/07.png") no-repeat center center;
     background-size: 30px 30px;
     transition: background 0.5s;
 }

 .head-middle .search:hover {
     background-color: #ff6700;
     border-color: #ff6700;
     background-image: url("../image/06.png");
     /* border: 1px solid #ccc; */
 }

 .head-middle input {
     width: 245px;
     height: 50px;
     padding: 0 10px;
     outline: none;
     float: right;
     margin-top: 24px;
     border: 1px solid #ccc;
    
 }

 .head-middle input:focus {
     border: 1px solid #ff6700;
 }

 .head-middle .input-items {
     width: 265px;
     border: 1px solid #ff6700;
     border-top: none;
     position: absolute;
     right: 51px;
     top: 76px;
     line-height: 30px;
     visibility: hidden;
     z-index: 1000000;
     background: white;
 }

 .head-middle .input-items p {
     box-sizing: border-box;
     padding-left: 14px;
 }

 .head-middle .input-items p:hover {
     background: #ccc;
 }

 .head-middle .input-items a {
     font-size: 12px;
     color: #424242;
 }

 .slides-item {
     width: 1226px;
     height: 460px;
     background: url("../image/01.webp") no-repeat center;
     background-size: 1226px 460px;
     margin: 0 auto;
     position: relative;
     transition: background 1s;
     cursor: pointer;
 }

 .slides-item>a {
     position: absolute;
     left: 0;
     top: 0;
     width: 100%;
     height: 100%;
     /* background: pink; */
 }


 .slides-item>.left {
     width: 234px;
     height: 100%;
     background: rgba(105, 101, 101, 0.6);
     position: relative;
     z-index: 3;
 }

 .left>ul {
     width: 100%;
     padding-top: 20px;

 }


 .left>ul>li:hover {
     background: #ff6700;
 }

 .left>ul>li>a {
     width: 204px;
     height: 42px;
     padding-left: 30px;
     line-height: 42px;
     font-size: 14px;
     color: white;
     font-weight: 400;
     text-align: center;
 }

 .left>ul>li>span {
     width: 16px;
     height: 16px;
     float: right;
     /* position: absolute; */
     color: white;
     margin: 13px 25px auto auto;
     /* right: 24px; */
     /* top: 50%; */
     /* margin-top: -8px; */
 }

 .left .details {
     position: absolute;
     /* width: 200px; */
     /* height: 200px; */
     left: 234px;
     top: 0;
     background: white;
     box-shadow: 2px 3px 5px #ccc;
     display: none;
     /* height: 460px; */
 }

 .left>ul>li:hover .details {
     display: block;
 }

 .left>ul>li .details a:hover {
     color: #ff6700;
 }


 .left>ul>li:nth-child(even) .details {
     width: 990px;
     /* background: red; */
 }

 .left>ul>li:nth-child(odd) .details {
     width: 506px;
 }

 .left>ul>li:nth-child(1) .details {
     width: 990px
 }

 .left>ul>li:nth-child(6) .details {
     width: 506px;
 }


 .left .details>li {
     height: 460px;
     float: left;
 }

 .left .details>li:nth-child(2n),
 .left .details>li:nth-child(3) {
     margin-left: -22px;
 }

 .left .details div {
     padding: 18px 20px;
     background: white;
     width: 224px;
     height: 40px;
 }




 .left .details li img {
     width: 40px;
     height: 40px;
     margin-right: 12px;
     display: inline-block;
 }

 .left .details li a {
     width: 172px;
     line-height: 40px;
     font-size: 14px;
     float: right;

 }

 .slides-item>span {
     position: absolute;
     width: 41px;
     height: 69px;
     color: #d8d8d8;
     background: transparent;
     display: block;
     line-height: 69px;
     text-align: center;
     font-size: 50px;
     top: 50%;
     margin-top: -35px;
     z-index: 2;

 }

 .slides-item>span:hover {
     opacity: 1;
     background: #79657f;
     opacity: 0.8;
     color: white;
 }

 .slides-item>.arrow-left {
     left: 234px;
 }

 .slides-item>.arrow-right {
     right: 0;
 }

 .slides-item .spots {
     position: absolute;
     right: 24px;
     bottom: 26px;
     z-index: 2;
 }

 .slides-item .spots li {
     float: left;
     width: 10px;
     height: 10px;
     border: 2px solid rgb(97, 88, 88);
     box-sizing: border-box;
     background: black;
     margin-right: 12px;
     border-radius: 50%;

 }


 .slides-item .spots li:hover {
     background: white;
 }

 .slides-item .spots li.whiteSpot {
     background: white;
 }

 /* .blackSpot {
     background: black;
 } */

 .slides-bottom {
     width: 1226px;
     height: 176px;
     margin: 14px auto 0;
     /* background: pink; */
 }

 .slides-bottom a {
     color: white;
 }

 .slides-bottom>div:first-child {
     width: 228px;
     height: 170px;
     padding: 3px;
     display: inline-block;
     background: #5f5750;
 }

 .slides-bottom div:first-child li {
     float: left;
     opacity: 0.7;
     height: 77px;
     width: 76px;
     margin-top: 18px;
     /* box-sizing: border-box; */
     /* padding-top: 0px; */
     text-align: center;
     font-size: 12px;
 }

 .slides-bottom div:first-child li:hover {
     opacity: 1;
 }

 .slides-bottom div:first-child li img {
     width: 22px;
     height: 22px;
 }

 .slides-bottom>a>img {
     width: 312px;
     height: 176px;
     margin-left: 14px;
 }



 














 footer {
     width: 100%;
     height: 505px;
     /* background: skyblue ; */
     background: url("../image/7.png") no-repeat center 90%;
     margin-top: 20px;
 }

 .f-top,
 .f-middle {
     width: 1226px;
     margin: 0 auto;
 }

 .f-top {
     height: 80px;
     border-bottom: 1px solid #e0e0e0;

 }

 .f-top ul {

     width: 100%;
     padding: 27px 0 31px 0;

 }

 .f-top li {
     text-align: center;
     width: 240px;
     border-right: 1px solid #e0e0e0;
     float: left;
 }

 .f-top li:last-child {
     border-right: none;
 }

 .f-top li:after {
     clear: both;
 }

 .f-top a {
     color: #616161;
 }

 .f-top a:hover {
     color: #FF6700;
 }

 .f-top .iconfont {
     font-size: 25px;
 }

 .f-middle {
     padding: 28px 0;

     position: relative;
 }

 .f-middle>ul {
     width: 963px;
     border-right: 1px solid #ccc;
     /* float: left; */
 }

 .f-middle>ul::after {
     display: block;
     clear: both;
     content: "";
 }

 .f-middle>ul li {
     float: left;
     width: 160px;
 }

 .f-middle>ul li h3 {
     font-size: 14px;
     margin-bottom: 26px;
     color: #424242;
 }

 .f-middle>ul li a {
     font-size: 12px;
     line-height: 30px;
     color: #757575;
 }

 .f-middle>ul li a:hover {
     color: #FF6700;
 }


 .f-middle>div {
     /* float:left; */
     position: absolute;
     right: 72px;
     top: 30px;
     text-align: center;
     overflow: hidden;
 }

 .f-middle>div p:first-child {
     color: #FF6700;
     font-size: 22px;
 }

 .f-middle>div p:nth-child(2) {
     /* line-height: 18px;
    padding-top: 4px; */
     margin-top: 10px;
 }

 .f-middle>div p {
     color: #616161;
     font-size: 12px;
 }

 .f-middle>div div {
     width: 120px;
     height: 30px;
     border: 1px solid #FF6700;
     text-align: center;
     margin-top: 18px;
     margin-left: 10px;
     transition: all 0.5s;
 }

 .f-middle>div div:hover {
     background: #FF6700;

 }

 .f-middle>div div:hover a {
     color: white;
 }



 .f-middle>div a {
     color: #FF6700;
     font-size: 14px;
     line-height: 30px;

 }


 .f-bottom {
     width: 100%;
     /* height: 235px; */
     background: #fafafa;


 }

 .f-bottom:after {
     content: "";
     display: block;
     clear: both;
 }

 .f-bottom>div {
     width: 1226px;
     height: 100%;
     /* background: yellow; */
     margin: 0 auto;
     padding-top: 30px;
 }

 .f-bottom>div a {
     color: #757575;
     font-size: 12px;
 }

 .f-bottom>div a:hover {
     color: #ff6700;
 }

 .f-bottom>div>img {
     float: left;
 }

 .f-bottom>div>div {
     float: left;
     margin-left: 10px;
 }

 .f-bottom ul {
     height: 30px;
 }

 .f-bottom ul li {
     float: left;
 }

 .f-bottom p {
     color: #b0b0b0;
     font-size: 12px;
 }

 .bottom-right img {
     width: 80px;
     height: 20px;
 }





 * {
     margin: 0;
     padding: 0;
     list-style: none;
     text-decoration: none;
 }


.display-things-outer {
    background: #f5f5f5;
    margin-top: 30px;
}

 .display-things {
     width: 1226px;
     height: auto;
     margin: 0 auto;
     /* background: yellow; */

 }


 .display-things:after {
     content: "";
     display: block;
     clear: both;
 }


 .display-things>div {
     float: left;
 }

 .display-title {
     line-height: 28px;
     padding: 18px 0;
     width: 100%;
 }

 .display-title span {
     float: right;
     color: #333;
     font-size: 22px;
     font-weight: 200;
 }

 .display-title span:first-child {
     float: left;
 }

 .display-title span:last-child a {
     color: #424242;
     font-size: 16px;
 }

 .display-title span:last-child a:hover {
     border-bottom: 1px solid #FF6700;
 }

.picture-box-max {
    width: 234px;
    height: 618px;
    position: relative;
    background: white;
}


 .picture-box-lg {
     width: 234px;
     height: 302px;
     background: white;
     position: relative;
 }

 .picture-box-mid {
     width: 296px;
     height: 285px;
     background: white;
     position: relative;
 }

 .picture-box-sm {
     width: 234px;
     height: 144px;
     background: white;
     position: relative;
 }

 .picture-box-animation {
     transition: all 0.2s linear;
     padding-top: 2px;
     box-sizing: border-box;
 }

 .picture-box-animation:hover {
     padding-top: 0;
     box-shadow: 0px 0px 20px black;
 }

 .a-big-absolute {
     display: inline-block;
     width: 100%;
     height: 100%;
     position: absolute;
     left: 0;
     top: 0;
 }

 .display-left li {
     margin-bottom: 14px;
 }

 .display-left li img {
     width: 234px;
     height: 300px;
 }



 .picture-box-margin {
     margin: 0 0 14px 14px;
     text-align: center;
 }



 .display-right {
     width: 992px;
 }


 .display-right li {
     float: left;
 }

 .picture-box-lg img {
     width: 160px;
     height: 160px;
 }

 .picture-box-lg p:nth-of-type(1) {
     padding-top: 35px;
     line-height: 21px;
     font-size: 14px;
     color: #333
 }

 .picture-box-lg p:nth-of-type(2) {
     line-height: 18px;
     font-size: 12px;
     color: #b0b0b0;
 }

 .picture-box-lg p:nth-of-type(3) {
     line-height: 21px;
     font-size: 14px;
     color: #FF6700;
     padding-top: 15px;
 }

 .picture-box-sm img {
     width: 80px;
     height: 80px;
 }

 .picture-box-sm span {
     float: right;
     margin-top: 42px;
     margin-left: 22px;
 }

 .picture-box-sm .many-things-text {
     margin-right: 86px;
 }

 .sm-left-text p:first-child {
     /* padding-top: 35px; */
     line-height: 21px;
     font-size: 14px;
     color: #333
 }

 .sm-left-text p:last-child {
     line-height: 21px;
     font-size: 14px;
     color: #FF6700;
     padding-top: 15px;
 }

 .picture-box-sm .circle-right-font {
     color: #ff6700;
     font-size: 48px;

 }

 .display-bottom {
     margin-top: 22px;
     width: 100%;
     position: relative;
 }

 .display-bottom img {
     width: 100%;
     height: 121px;
 }




 .picture-box-mid .triangle-box {
     position: absolute;
     left: 20px;
     top: 140px;
     width: 32px;
     height: 20px;
     border-radius: 12px;
     background: rgba(0, 0, 0, .6);
     transition: all 0.5s linear;
 }

 .picture-box-mid:hover .triangle-box {

     background: #FF6700;
 }

 .triangle-box-item {
     width: 0;
     height: 0;
     border: 6px solid transparent;
     border-left: 6px solid white;
     position: absolute;
     left: 50%;
     margin-left: -3px;
     top: 4px;
 }

 .picture-box-mid {
     float: left;
     margin-left: 14px;
     text-align: center;
     margin-bottom: 40px;
 }

 .picture-box-mid:first-child {
     margin-left: 0px;
 }

 .picture-box-mid p:nth-of-type(1) {
     padding-top: 35px;
     line-height: 21px;
     font-size: 14px;
     color: #333
 }

 .picture-box-mid p:nth-of-type(2) {
     line-height: 30px;
     font-size: 12px;
     color: #b0b0b0;
 }

 .picture-box-max>img {
     width: 234px;
     height: 618px !important;
 }



 .assist-bar {
     position: fixed;
     right: 30px;
     bottom: 50px;
     cursor: pointer;
     z-index: 9999999999999;
 }


 .assist-bar li {
     width: 27px;
     height: 42px;
     margin-bottom: 2px;
     background: white;
     text-align: center;
     line-height: 42px;
     position: relative;
 }

 .assist-bar li:last-child {
     margin-top: 16px;
 }

 .assist-bar li:hover {
     color: #FF6700;
 }



 .assist-bar span {
     font-size: 20px;
 }


 .assistBar-message {
     position: absolute;
     right: 45px;
     top: 8px;
     background: white;
     padding: 0 8px;
     font-size: 14px;
     display: none;
     text-align: center;
     line-height: 28px;
     border: 1px solid #f5f5f5;
     min-width: 60px;
     color: #757575;
 }

 .assist-bar li:hover .assistBar-message {
     display: block;
 }

 .assPicture-box {
     padding: 14px;

 }

 .assPicture-box>img {
     width: 100px;
     height: 100px;
 }

 .assist-triangle {
     width: 0;
     height: 0;
     border: 8px solid transparent;
     border-left: 8px solid white;
     position: absolute;
     right: -16px;
     top: 5px;
 }