.index-head {
     position: relative;
 }

 /* 头部第一栏导航 */
 .index-head>.nav-box {
     background-color: #333333;
     color: #FFFFFF;
 }

 .index-head>.nav-box>ul {
     margin: 0 auto;
     padding: 5px 0;
     width: 70%;
     max-width: 1200px;
     display: flex;
     justify-content: flex-end;
     align-items: center;
     gap: 20px;
     flex-wrap: wrap;
 }

 .index-head>.nav-box>ul a {
     color: #FFFFFF;
     text-decoration: none;
 }

 .index-head>.nav-box>ul a:hover {
     color: #FEBD69;
 }

 /* 头部第二栏搜索框 */
 .index-head>.search-box {
     background-color: #F7F7F7;
     padding: 5vh 0px;
 }

 .index-head>.search-box>div {
     width: 70%;
     margin: 0 auto;
     max-width: 1200px;
     display: flex;
 }

 .index-head>.search-box>div>div:nth-child(1) {
     width: 40%;
 }

 .index-head>.search-box>div>div:nth-child(1) a {
     color: #D63031;
     font-size: 30px;
     text-decoration: none;
 }

 .index-head>.search-box>div>div:nth-child(1) a span {
     color: #000000;
     font-size: 16px;
 }

 .index-head>.search-box>div>div:nth-child(2) {
     width: 60%;
     display: flex;
     align-items: center;
 }

 .index-head>.search-box>div>div:nth-child(2)>button {
     position: relative;
     outline: none;
     border: 1px solid rgba(0, 0, 0, 0.3);
     border-radius: 5px;
     height: 5vh;
     width: 60px;
     background-color: #FFFFFF;
     transition: 0.3s;
 }

 .index-head>.search-box>div>div:nth-child(2)>button:hover {
     background-color: #F7F7F7;
     border-color: rgba(0, 0, 0, 0.5);
     transform: scale(1.05);
 }

 .index-head>.search-box>div>div:nth-child(2)>button>span {
     position: absolute;
     background-color: #D63031;
     display: block;
     width: 22px;
     height: 22px;
     border-radius: 50%;
     top: -8px;
     right: -8px;
     color: #FFFFFF;
     display: none;
     justify-content: center;
     align-items: center;
     font-weight: 750;
 }

 .index-head>.search-box>div>div:nth-child(2)>button>a {
     text-decoration: none;
     color: #000000;
     display: block;
 }

 .index-head>.search-box>div>div:nth-child(2)>button>a>i {
     font-size: 35px;
 }

 .index-head>.search-box>div>div:nth-child(2)>form {
     display: flex;
     justify-content: center;
     align-items: center;
     width: 80%;
 }

 .index-head>.search-box>div>div:nth-child(2)>form>button {
     outline: none;
     border: 1px solid #333333;
     border-top-right-radius: 5px;
     border-bottom-right-radius: 5px;
     border-left: none;
     height: 5vh;
     background-color: #2D3436;
     width: 60px;
     cursor: pointer;
 }

 .index-head>.search-box>div>div:nth-child(2)>form>button:hover {
     background-color: #444444;
     border-color: #444444;
 }

 .index-head>.search-box>div>div:nth-child(2)>form>button:active {
     background-color: #333333;
     border-color: #333333;
 }

 .index-head>.search-box>div>div:nth-child(2)>form>button>i {
     font-size: 35px;
     color: #F7F7F7;
 }

 .index-head>.search-box>div>div:nth-child(2)>form>input {
     border: 1px solid #333333;
     border-right: none;
     border-top-left-radius: 5px;
     border-bottom-left-radius: 5px;
     height: 5vh;
     padding: 0;
     margin: 0;
     background-color: #FFFFFF;
     width: 80%;
     max-width: 400px !important;
     text-indent: 10px;
     outline: none;
 }

 .index-head>.search-box>div>div:nth-child(2)>form>input:focus {
     border: 2px solid #000000;
     border-right: none;
 }

 .index-head>.search-box>div>div:nth-child(2)>form>input:focus+button {
     border: 2px solid #000000;
     border-left: none;
 }

 /* 头部第三栏用户交互框 */
 .index-head>.checkout-box {
     background-color: #D63031;
     height: 6vh;
 }

 .index-head>.checkout-box>ul {
     margin: 0 auto;
     width: 70%;
     height: 100%;
     max-width: 1200px;
     display: flex;
     justify-content: flex-start;
     align-items: center;
     gap: 20px;
     list-style: none;
     flex-wrap: wrap;
     color: #FFFFFF;
     font-size: 16px;
     background-color: #121111;
 }

 .index-head>.checkout-box>ul li {
     padding: 0px 20px;
     cursor: pointer;
     text-align: center;
     height: 100%;
     display: flex;
     justify-content: center;
     align-items: center;
 }

 .index-head>.checkout-box>ul li:hover,
 .index-head>.checkout-box>ul>li>a:hover {
     color: #FEBD69;
 }

 .index-head>.checkout-box>ul li:hover>i {
     border-color: #FEBD69;
 }

 .index-head>.checkout-box>ul>.productType>i {
     display: inline-block;
     width: 8px;
     height: 8px;
     border-left: 2px solid #FFFFFF;
     border-bottom: 2px solid #FFFFFF;
     transform: rotate(-45deg);
     transition: 0.3s;
     margin-left: 5px;
 }

 .index-head>.checkout-box>ul .active {
     color: #FEBD69;
 }

 .index-head>.checkout-box>ul .active>i {
     transform: rotate(135deg);
     border-color: #FEBD69;
 }

 .index-head>.checkout-box>ul>li>a {
     color: #FFFFFF;
     text-decoration: none;
 }

 .index-head>.checkout-box>ul>.phone-productType-but {
     display: none;
 }

 /* 头部第四栏商品列表框 */
 .index-head>.product {
     position: absolute;
     z-index: 1000;
     width: 70%;
     max-width: 1200px;
     margin-left: 50%;
     transform: translateX(-50%);
     display: none;
 }

 .index-head>.product>.product-list {
     width: 25%;
     min-width: 230px;
     background-color: #999999;
 }

 .index-head>.product>.product-list>div {
     display: flex;
     justify-content: space-between;
     padding: 10px 20px;
 }

 .index-head>.product>.product-list>div:hover {
     background-color: #FEBD69;
 }

 .index-head>.product>.product-list>div label {
     cursor: pointer;
     flex-wrap: wrap;
 }

 .index-head>.product>.product-list>div input {
     cursor: pointer;
 }

 .index-head>.product>.brand-list {
     width: 75%;
     background-color: #e2c1c1;
 }

 .index-head>.product>.brand-list>ul {
     display: flex;
     flex-wrap: wrap;
 }

 .index-head>.product>.brand-list>ul li {
     width: 25%;
     min-width: 150px;
     padding: 8px 10px;
     text-align: center;
     cursor: pointer;
 }

 .index-head>.product>.brand-list>ul li:hover {
     color: #ffffff;
 }

 /* 小屏侧边栏 */
 .phone-product {
     width: 25%;
     height: 100vh;
     background-color: #EBEDEE;
     position: fixed;
     top: 0;
     z-index: 1000;
     padding: 20px 3px;
     display: none;
 }

 .phone-product>ul .active {
     background-color: #D63031;
     color: #FFFFFF;
 }

 .phone-product li {
     padding: 10px 0px;
     flex-wrap: wrap;
     font-size: 18px;
     text-align: center;
     font-weight: bold;
     cursor: pointer;
     border-bottom: 1px dashed #cccccc;
 }

 .phone-product li:hover,
 .phone-product li:hover a {
     background-color: #D63031;
     color: #FFFFFF !important;
 }

 .phone-product li a {
     display: block;
     width: 100%;
     height: 100%;
     text-decoration: none;
 }

 @media screen and (max-width: 980px) {

     /* 980px时，头部第一部分设置 */
     .index-head>.nav-box>ul {
         justify-content: center;
     }

     /* 980px时，头部第二部分设置 */
     .index-head>.search-box>div {
         flex-direction: column;
         align-items: center;
         justify-content: center;
         gap: 20px;
     }

     .index-head>.search-box>div>div:nth-child(1) {
         text-align: center;
         width: 100%;
     }

     .index-head>.search-box>div>div:nth-child(2) {
         text-align: center;
         width: 100%;
     }

     /* 980px时，头部第三部分设置 */
     .index-head>.checkout-box>ul {
         justify-content: space-between;
     }

     .index-head>.checkout-box>ul>.productType {
         display: none;
     }

     .index-head>.checkout-box>ul>.li-a {
         display: none;
     }

     .index-head>.checkout-box>ul>.phone-productType-but {
         display: flex;
     }

     /* 商品选中模块，适应小屏 */
     .index-head>.product {
         top: 0px;
         width: 50%;
         height: 100vh;
         position: fixed;
     }

     .index-head>.product>.product-list {
         width: 50%;
         min-width: 0px;
         overflow: auto;
         padding: 20px 0px;
     }

     .index-head>.product>.product-list>div {
         padding: 10px 5px;
     }

     .index-head>.product>.brand-list {
         width: 50%;
         overflow: auto;
     }

     .index-head>.product>.brand-list>ul {
         display: flex;
         flex-wrap: wrap;
         justify-content: center;
     }

     .index-head>.product>.brand-list>ul li {
         width: 100%;
         min-width: 0px;
         padding: 10px 5px;
         text-align: center;
     }
 }

 @media screen and (max-width: 720px) {
     .index-head {
         .nav-box {
             ul {
                 width: 90%;
             }
         }
     }

     .index-head .search-box {
         &>div {
             width: 90%;
         }
     }

     /* 商品选中模块，适应小屏 */

     .index-head>.product>.product-list {
         width: 50%;
         min-width: 0px;
         overflow: auto;
         font-size: 12px;
     }


     .index-head>.product>.brand-list {
         width: 50%;
         overflow: auto;
         font-size: 12px;
     }

     /* 小屏侧边栏 */

     .phone-product li {
         padding: 10px 0px;
         flex-wrap: wrap;
         font-size: 18px;
         text-align: center;
         font-weight: bold;
         cursor: pointer;
         font-size: 12px;
     }
 }

 @media screen and (max-width: 420px) {
     /* 商品选中模块，适应小屏 */

     .index-head>.product>.product-list {
         font-size: 10px;
     }


     .index-head>.product>.brand-list {
         font-size: 10px;
     }

     /* 小屏侧边栏 */
     .phone-product {
         width: 25%;
     }

     .phone-product li {
         font-size: 10px;
     }
 }