@font-face {
    font-family: 'MyCustomFont'; /* 自定义的字体名称，后续在CSS中会通过这个名称来引用字体 */
    src: url('xst.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}
*{
margin: 0;
padding: 0;
border: 0;
list-style: none;
text-decoration: none;
box-sizing: border-box;
outline: none;
font-family: 'MyCustomFont';
font-weight: 100;
}
.hand{
 cursor: pointer;
}
/*头部*/
.header{
display: flex;
/*justify-content: space-around;*/
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
flex-wrap: nowrap
color: #fff;
font-size: 14px;
background-color: #000;
height: 130px;
padding:0px 20px 0px 20px;
z-index: 1;
}
.header .header-logo{
width: 150px;
}
.header .header-logo img{
width: 100%;
}
.header-nav ul{
display: flex;
justify-content: center;
}
.header-nav ul li{
font-size: 18px;
margin-left: 5px;
margin-right: 5px;
position: relative;
display: inline-block;
}
.header-nav > ul > li > a{
color: #fff;
padding: 5px 10px 5px 10px;
}
.header-nav ul li a:hover{
background-color: #fff;
color: #000;
}
.header .header-item a{
color: #fff;
}
.header .header-item a svg{
fill: currentColor;
width: 23px;
height: 23px;
display: inline-block;
margin-left: 5px;
margin-right: 5px;
}
.header-nav li.hovered > a {
background-color: #fff;
color: #000;
}
/* 下拉菜单容器样式 */
.dropdown-content {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
position: absolute;
background-color: #fff;
width: 250px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
z-index: 111;
display: none;
padding: 20px 0px;

}

/* 下拉菜单列表项样式 */
.dropdown-content li {
line-height: 40px;
text-align: left;
}

/* 下拉菜单链接样式 */
.dropdown-content li a {
color: #000;
padding: 0 10px;
display: block;
font-weight: 100;
transition: all 0.5s ease;
}


.dropdown-content li a:hover{
padding-left: 20px;
}
/* 当鼠标悬停在菜单项上时，显示下拉菜单 */
.header-nav ul li:hover .dropdown-content {
display: flex;
}

/*轮播*/
.swiper-container {
width: 100%;
height:750px;
overflow: hidden;
z-index: -1;
/*margin-top: -130px;*/
}
.swiper-container .swiper-slide img{
width:100%;
height:auto;
min-height:100%;
/*transition:1s linear 2s;*/
/*transform:scale(1.1,1.1);*/
z-index: -1;
}
.swiper-container .swiper-slide-active img,.swiper-container .swiper-slide-duplicate-active img{
 width: 100%;
 height: 100%;
/*transition:1.5s linear;*/
/*transform:scale(1,1);*/
}	
@media screen and (max-width: 1850px){
.swiper-container {
height: 550px;
}
}
@media screen and (max-width: 550px){
.swiper-container {
height: 200px;
}
}
.navlist{
display: none;
}
/*手机头部*/
.bg-black{
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-color: rgba(0, 0, 0, 0.5);
display: none;
z-index: 998;
}
.side-nav{
position: fixed;
top: 0px;
width: 350px;
height: 100vh;
background-color: #fff;
right: -350px;
transition: all 0.5s ease;
padding-top: 50px;
z-index: 999999;
}
.side-nav svg{
width: 25px;
float: right;
margin: 5%;
margin-top: -30px;
}
.side-nav a{
height: 30px;
line-height: 50px;
display: block;
margin: 20px;
color: #000;
border-top:1px solid #ebebeb;
}


@media screen and (max-width: 650px){
.header{
height: 90px;
/*justify-content: space-between;*/
}
.navlist{
display: inline-block;
}
.header-nav{
display: none;
}
}
/* 其他平台的主页 */
.footer__social{
background-color: #000;
display: block;
width: 100%;
padding: 20px;
}
.footer__social img{
width: 160px;
display: block;
margin-bottom: 20px;
}
.footer__social li{
float: left;
}

.footer__social li a{
border: 1px solid #fff;
margin: 3px;
border-radius: 5px;
display: flex;
justify-content: center;
align-content: center;
align-items: center;
flex-direction: column; /* 让内部元素垂直排列 */
padding: 5px;
color: #fff;
}
.footer__social li a svg{
width: 23px;
height: 23px;
fill: currentColor;
}
.footer__social li a .icon__fallback-text{
font-size: 10px;
margin-top: 5px;
}
/*底部导航*/
.footer_item{
width: 100%;
display: flex;
justify-content: center;

color: #fff;
font-size: 14px;
background-color: #000;
}
.footer_item div{
width: 30%;
padding: 20px;
}
.footer_item div a,.footer_item div p{
display: block;
color: #fff;
margin-top: 10px;
font-weight: 100;
}

/* 支持的付款列表 */
.payment-icons{
display: flex;
justify-content: center;
flex-wrap: wrap;
background-color: #000;
}
.payment-icons li{
margin: 3px;
}
/* 底部版权 */
.footer__copyright{
display: block;
padding: 10px;
padding-bottom: 80px;
text-align: center;
background-color: #000;
font-size: 10px;
color: #fff;

}
/*首页文字介绍*/
.intro{
max-width: 920px;
padding: 20px;
margin: 50px auto;
text-align: center;
}
.intro h3{
font-size: 28px;
}
.intro p{
margin-top: 20px;
font-size: 18px;
font-weight: 100;
}
/*首页商品索引*/
.index-section{
max-width: 920px;
padding: 20px;
display: flex;
justify-content: center;
margin: 0 auto;
}
.index-section .left ,.index-section .right{
width: 100%;
padding: 20px;
margin: 50px;
}
.index-section .left a img{
width: 100%;
}
.index-section .right h3{
font-size: 28px;
}
.index-section .right p{
font-weight: 100;
}
/*按钮*/
.btn{
display: inline-block;
padding: 11px 20px;
width: 220px;
color: #fff;
background: #000;
background: #111111 url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB0AAAAuCAYAAADUfRIMAAAAAXNSR0IArs4c6QAAANNJREFUWEft08EJAjEQheH/NWIHlmM5agP2IYJ6URAP4smTXrQgRwMqQXchhHEFmT0uybzsty/iB49+kEmEflU9eIPXRSCK5MLYNiR4g9dF4D+KZGZTYAnMJVkTjfuXmtkF6ANnYAis38NfoWY2cPlhMAF62axjCpe0fb7LQxspnA6Sxhwe4fuuQ8eSdl3wnoCRpM0HrxdjVqRUqFSkVWuRHENn6brcG7yQdO3kypQc3v2eRmguELwlfaheE7zVdCUbg7dEqXpN8FbTlWwM3hKl6jU3xZ4yL3TWdGgAAAAASUVORK5CYII=') no-repeat 150% 35%;
background-size: 29px;
transition: all 0.5s ease;
margin-top: 10px;
margin-bottom: 10px;
}
.btn:hover{
width: 250px;
background-position: 90%;
}
/*视频*/
.index-video{
height: 450px;
user-select: none;
pointer-events: none;
overflow: hidden; /* 隐藏溢出的内容 */
}
/*捐款*/
.index-donate{
padding: 100px 20px;
text-align: center;
border-bottom: 1px solid #ebebeb;
}
.index-donate h2{
font-size: 28px;
}
.index-donate a{
margin-top: 50px;
}
/*头像列表*/
.index-people{
padding: 20px;
text-align: center;
}
.index-people h2{
font-size: 28px;
margin-top: 30px;
}
.index-people p{
font-size: 18px;
margin-top: 30px;
margin-bottom: 30px;
}
.index-people ul {
display: flex;
justify-content: center;
flex-wrap: wrap;
width: 90vw;
margin: 0 auto;
}
.index-people ul li{
width: 160px;
margin: 10px;
height: 270px;
}
.index-people ul li img{
width: 100%;
height: 100%;
}
/*产品*/
.goods{
max-width: 1350px;
margin: 0 auto;
display: flex;
justify-content: center;
flex-wrap: wrap;
align-content: flex-start;
}
.goods .goods-list{
width: 23%;
margin: 10px;
}
.goods .goods-list .goods-img{
width: 100%;
display: block;
}
.goods .goods-list .goods-title{
display: block;
font-size: 18px;
font-weight: 100;
margin-top: 10px;
}
.goods .goods-list .goods-money{
display: block;
font-weight: 100;
font-size: 14px;
font-weight: 100;
}

.categray-name{
text-align: center;
margin: 20px;
font-size: 28px;
}

#SortBy{
width: 150px;
height: 40px;
border: 1px solid #333;
margin-right: 20px;
}


.goods-detail{
display: flex;
justify-content: space-around;
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.goods-detail .goods-left,.goods-detail .goods-right{
width: 45%;margin: 0 auto;
}
.goods-detail .goods-right{
padding-top: 50px;
}
.goods-detail .goods-left .mySwiper2 {
height: 80%;
width: 100%;
}
.goods-detail .goods-left .mySwiper {
height: 20%;
box-sizing: border-box;
padding: 10px 0;
}
.goods-detail .goods-left .swiper-slide img {
display: block;
width: 100%;
height: 100%;
/*object-fit: cover;*/
user-select: none;
}

.goods-detail .goods-left .mySwiper .swiper-slide {
width: 25%;
height: 100%;
opacity: 0.4;
}
.goods-detail .goods-left .mySwiper .swiper-slide-thumb-active {
opacity: 1;
}
.goods-detail-title{
font-size: 28px;
}
.goods-detail-data{
width: 95%;
margin: 0 auto;
text-align: center;
padding-bottom: 100px;
}
/*购物车数量*/
.quantity-box {
display: inline-flex;
align-items: center;
border: 1px solid #e8e8e1;
height: 40px;
}

.minus-btn,.plus-btn,.minus-btns,.plus-btns {
width: 30px;
height: 30px;
line-height: 30px;
border: 0px;
background-color: #fff;
cursor: pointer;
color: #000;
font-size: 18px;
font-weight: 100;
}

input[class="quantity"],input[class="quantitys"] {
width: 50px;
height: 30px;
border: 0px;
text-align: center;
}

.goods-detail-money{
font-size: 21px;  
font-weight: 100;
padding-bottom: 50px;
border-bottom: 1px solid #e8e8e1;
}
/*尺码*/
.advice{
height: 28px;
padding: 5px 10px;
display: inline-block;
border: 1px solid #e8e8e1;
font-size: 12px;
}
.Color-advice{
padding: 15px;
display: inline-block;
margin-right: 5px;
border: 3px solid #e8e8e1;
border-radius: 5px;
color: #fff;
font-size: 12px;
}
input[type="radio"][name="type"]:checked + .advice{
    background-color: #000;
    color: #fff;
    border: 1px solid #000;
}
input[type="radio"][name="colors"]:checked + .Color-advice {
border: 3px solid #000;
}

/*注册登录*/
.reg{
width: 45%;
margin: 0 auto;
text-align: center;
}
.reg h2{
margin: 50px 0px;
}
.reg label{
text-align: left;
display: block;
cursor: pointer;
font-size: 14px;
margin-top: 20px;
margin-bottom: 5px;
font-weight: 800;
}
.reg input[type="text"],.reg input[type="email"],.reg input[type="password"]{
display: block;
height: 50px;
border: 1px solid #ebebeb;
width: 100%;
padding: 5px 10px;
}
.reg button{
width: 100%;
margin: 20px 0px;
height: 50px;
background-color: #000;
color: #fff;
}
/*用户中心*/
.usercenter{
margin: 0 auto;
/*text-align: center;*/
padding: 20px;
}
.usercenter .user-console{
text-align: center;
margin-bottom: 30px;
}
.usercenter .user-console .logout{
color: #000;
border-bottom: 2px solid #ebebeb;
position: relative;
display: inline-block;
font-size: 16px;
font-weight: 100;
margin: 20px 0px;
}
/*过渡动画*/
.usercenter .user-console .logout::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background-color: #000; /* 下划线颜色，这里设为黑色 */
transition: width 0.3s ease-in-out; /* 设置下划线宽度变化的过渡效果 */
}
.usercenter .user-console .logout:hover::after {
width: 100%;
}
.usercenter .user-data{
display: flex;
justify-content: space-around;

}
.usercenter .user-data .user-orders{
width: 65%;
/*border: 3px solid #000;*/
}
.usercenter .user-data .user-address{
width: 30%;

/*border: 3px solid #000;*/
}
.usercenter .user-data .user-address h2,
.usercenter .user-data .user-address h3,
.usercenter .user-data .user-address h5{
margin-bottom: 20px;
}

/*订单列表*/
.user-orders ul li{
display: flex;
justify-content: space-between;
border-bottom: 1px dashed #ebebeb;
padding-bottom: 10px;
margin-bottom: 20px;

}
.user-orders ul li .order-data{
display: inline-flex;
justify-content: space-around;
}
.user-orders ul li .order-data .order-left,.user-orders ul li .order-data .order-right{
width: 45%;
}
.user-orders ul li .order-data .order-right{
display: inline-flex;
justify-content: space-between;
padding: 10px;
}
.order-img{
width: 150px;
}
.order-img img{
width: 100%;
}
.order-data{
flex-grow:1;
}

.order-data .order-left *{
font-weight: 100;
margin: 10px;
}
.order-data .order-right .quantity-box{
margin: auto 0px;
}
.order-data .order-right .order-money{
margin: auto 10px;
font-size: 18px;
font-weight: 200;
}
/*购物车结账按钮*/

.cart{
width: 400px;
padding: 20px;
margin-left: auto;
}
.cart .cart-subtotal{
display: flex;
justify-content: space-between;
}
.cart h6{
font-weight: 100;
text-align: right;
margin: 10px 0px;
}
.cart button{
width: 100%;
height: 40px;
background-color: #000;
color: #fff;
margin: 20px 0px;
}
/*付款*/
.payments{
margin: 30px auto;
width: 500px;
}
.payment{
margin: 30px 0px;
}
.payment h3 img{
width: 90%;
margin-left: 5%;
}
/*问题中心*/
/* 打开和关闭手风琴面板的样式 */
.accordion {
background-color: #000;
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
text-align: left;
border: none;
outline: none;
transition: 0.4s;
}

/* 设置点击和鼠标移到选项上面时（悬停）的样式 */
.active, .accordion:hover {
background-color: #111;
color: #fff;
}
/* 为手风琴面板设计样式。 默认隐藏 */
.panel {
padding: 0 18px;
background-color: #222;
color: #fff;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.panel p{
padding: 20px 0px;

}
/* 设置 +、- 标志 */
.accordion:after {
content: '\002B';  /* Unicode 字符 + 号 */
color: #fff;
font-weight: bold;
float: right;
margin-left: 5px;
}

.active:after { 
content: "\2212";  /* Unicode 字符 - 号 */
}
/*留言*/
.message{
width: 60vw;
margin: 100px auto;
}

.message input,.message textarea{
display: block;
width: 100%;
height: 50px;
border: 1px solid #ebebeb;
margin-top: 20px;
padding: 5px 10px;
border-radius: 3px;
}
.message textarea{
min-height: 200px;
min-width: 100%;
max-width: 100%;
}
.message input[type="submit"]{
background-color: #000;
color: #fff;
}
/*订单记录*/
.orders-lists{
    border-bottom: 1px solid #ebebeb;
}
.orders-lists .orders-userdetail,.orders-lists .orders-price,.orders-lists .orders-goods-list{
    display: flex;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 100;
    padding: 10px 20px;
    align-items: center;
}
.orders-lists .orders-goods-list{
 border-bottom: 1px solid #ebebeb;
}
.orders-lists .orders-goods-list div p{
    height: 25px;
    line-height: 25px;
    font-size: 14px;
}
.orders-lists .orders-goods-list div img{
 width: 150px;
 height: 150px;
    margin-right: 20px;
}
.orders-lists .orders-price p,.orders-lists .orders-userdetail p{
    margin-top: 5px;
    margin-right: 15px;
}
.orders-lists .orders-price .btns{
    display: block;
    padding: 3px 10px;
    border: 1px solid #000;
    cursor: pointer;
    user-select:none;
}
/*分页*/
.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 20px;
}
.pagination a{
    min-width: 43px;
    height: 43px;
    color: #000;
    padding: 8px 12px;
    display: inline-block;
    text-decoration: none;
    cursor: pointer;
    font-size: 15px;
    margin: 0 15px;
    text-align: center;
    font-weight: 100;
    line-height: 27px;
    
}
.pagination .pageavr{
    border-radius: 5px;
    background-color: #888;
    color: #fff;
    width: 43px;
    height: 43px;
}
.pagination a svg{
    border-radius: 50px;
    background-color: #000;
    fill: #fff;
    width: 43px;
    height: 43px;
    padding: 15px;
    margin-top: -8px;
}
/*搜索*/
.search-container{
    position: fixed;
    top: -150px;
    left: 0px;
    width: 100%;
    height: 150px;
    border-bottom: 1px solid #ebebeb;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
    z-index: 1;
    transition: all 0.5s ease;
}
.search-container .search-input{
    width: 80vw;
    height: 60px;
    border: 1px solid #000;
    font-weight: 100;
    padding: 5px 10px;
}
.search-container .search{
    width: 18vw;
    height: 60px;
    border: 1px solid #000;
    background-color: #000;
    color: #fff;
    font-weight: 100;
}

@media screen and (max-width: 1000px){
.user-orders ul li .order-data{
flex-direction: column;
}
.user-orders ul li .order-data .order-left,.user-orders ul li .order-data .order-right{
width: 100%;
}
.order-data .order-right .quantity-box,.order-data .order-right .order-money{
/*width: 50%;*/
}
.cart{
width: 100%;
}
}
@media screen and (max-width: 650px){
.goods-detail{
justify-content: center;
flex-direction: column;
}
.goods-detail .goods-left,.goods-detail .goods-right{
width: 95%;
}
}
@media screen and (max-width: 650px){
.footer_item{
flex-wrap: wrap;
}
.footer_item div{
width: 100%;
padding: 20px;
}
.intro h3{
font-size: 18px;
}
.intro p{
margin-top: 20px;
font-size: 14px;
}
.index-section .right h3{
font-size: 18px;
}
.index-section{
flex-direction: column;
}
.index-section .right p{
font-size: 14px;
}
.index-video{
height: 280px;
}
.index-donate h2{
font-size: 18px;
}
.index-section .left ,.index-section .right{
margin: 0;
}
.index-people ul {
width: 95vw;
}
.index-people h2{
font-size: 18px;
}
.index-people p{
font-size: 14px;
}
.index-people ul li{
width: 110px;
height: 170px;
margin: 5px;
}
.goods .goods-list{
width: 40%;
margin: 10px;
}
.categray-name{
font-size: 18px;
}
.reg{
width: 90%;
}
.usercenter .user-data{
flex-direction: column;
}
.usercenter .user-data .user-orders,.usercenter .user-data .user-address{
width: 100%;
margin-bottom: 30px;
}
.message{
width: 90vw;
}

}

    .user-order-address{
        position: fixed;
        top: 200px;
        left: calc(50% - 300px);
        width: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        background-color: #000;
        padding: 20px;
        border-radius: 5px;
        margin: 0 auto;
        display: none;
    }
    .user-order-address textarea,.user-order-address input{
        font-size:14px;
        text-align:center;
        display: block;
        width: 500px;
        padding: 5px 10px;
        margin-top: 10px;
        margin-bottom: 10px;
        height: 40px;
        border-radius: 5px;
        border: 0;
        text-align: left;
        outline: none;
    }
    .user-order-address textarea{
        min-width: 500px;
        max-width: 500px;
        height: 100px;
    }
    @media screen and (max-width: 550px){
        .user-order-address{
            width: 95%;
            top: 100px;
        left: 2.5%;
        }
        .user-order-address textarea{
            min-width: 95%;
            max-width: 95%;
        }
        .user-order-address textarea,.user-order-address input{
            width: 95%;
            margin-left: 2.5%;
        }
        
    }