@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');
:root{
  --max_width:1420px;
  --back_color:#000;
  --head_back:#111212;
  --foot_title_size:15px;
}
@media (max-width:1200px)
{
  :root{
    --max_width:1100px;
  }
}
@media (max-width:767px){
  :root{
    --max_width:96%;
  }
}
html{
  display: block;
  width: 100%;
  height: 100%;
  overflow: auto;
  font-size: 14px;
  margin: auto;
}
body{
  margin: auto;
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
  font-size: 1rem;
  font-family: "Inter", sans-serif;
  font-optical-sizing: auto;
  line-height: 1.8;
}
input,textarea{font-family:  "Inter", sans-serif; }
a:link,a:visited{
  color: #000;
  text-decoration: none;
  font-family: "Inter", sans-serif; 
}
a:hover,a:active{
  color: #d00;
  text-decoration: none;
  font-family: "Inter", sans-serif; 
}
.logo{
  height: 28px;
  width: auto;
  display: block;
  width: auto;
  overflow: hidden;
}
.slick-track{column-gap: 0px;}
.tb_img{
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  left: 0px;
  right: 0px;
  top:0px;
  bottom: 0px;
  box-sizing: border-box;
  margin: auto;
}
.loc{
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
  margin: auto;
  padding: 40px;
}
.loc_tb{
  display: flex;
  display: -webkit-flex;
  column-gap: 10px;
  width: auto;
  height: auto;
  overflow: hidden;
  margin: auto;
  max-width: var(--max_width);
  color:#dadada;
  font-size: 12px;
}
.loc_tb>a{color:#000;font-size: 12px;}
#quan_body{
  display: block;
  width: auto;
  height: auto;
  max-width: var(--max_width);
  margin: auto;
  margin-bottom: 50px;
  padding-left: 40px;
  padding-right: 40px;
}
@media (max-width:767px){
  #quan_body{
    padding-left: 10px;
    padding-right: 10px;
  }
}
#quan_center{
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
}
#quan_head{
  background-color: var(--head_back);
  display: block;
  width: auto;
  height: auto;
  color: #fff;
  left: 0px;
  right: 0px;
  top:0px;
  z-index: 200;
  border-top:1px solid #262626;
}
#quan_head_tbody{
  display: grid;
  grid-template-columns: auto auto auto;
  align-items: center;
  justify-content: space-between;
  width: auto;
  height: auto;
  overflow: hidden;
  max-width: var(--max_width);
  position: relative;
  margin: auto;
  padding: 15px;
}
@media (max-width:767px){
  #quan_head_tbody{
    position: relative;
  }
}
.head_right{
  display: flex;
  display: -webkit-flex;
  width: auto;
  height: auto;
  overflow: hidden;
}
@media (max-width:767px){
  .head_right{
    display: none;
  }
}
.head_ico{
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items:center;
  width: 40px;
  height: 40px;
  color: #fff;
  cursor: pointer;
}
.relative{
  position: relative;
}
.page{
  margin-top: 20px;
  margin-bottom: 20px;
}
.search_sub{
  display: none;
  width: auto;
  height: auto;
  background-color: #fff;
  position: absolute;
  left: 0px;
  right: 0px;
  top:0px;
  margin: auto;
  z-index: 200;
  padding-top:40px;
  padding-bottom: 40px;
}
.search_thead{
  display: flex;
  display: -webkit-flex;
  width: auto;
  height: auto;
  overflow: hidden;
  max-width: var(--max_width);
  margin: auto;
  color: #000;
}
.search_tbody{
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
  padding-top: 20px;
}
.search_list{
  display: flex;
  display: -webkit-flex;
  column-gap: 10px;
  width: auto;
  height: auto;
  overflow: auto;
  max-width: var(--max_width);
  margin: auto;
  margin-top: 20px;
}
.s_tb{
  display: block;
  width: calc(16.6% - 50px/6);
  height: auto;
  background-color: #f8f8f8;
  padding: 20px;
  flex-shrink:0;
  box-sizing: border-box;
}
@media (max-width:767px){
  .s_tb{
    width: calc(25% - 30px/4);
  }
}
@media (max-width:767px){
  .s_tb{
    width: calc(50% - 10px/2);
  }
}
.s_pic{
  display: block;
  width: auto;
  height: auto;
  position: relative;
  padding-bottom: 100%;
}
.s_name{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  width: auto;
  height: auto;
  overflow: hidden;
  line-height: 1.2;
  font-size: 12px;
}
.s_price{
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
  font-weight: bold;
}

.search{
  display: flex;
  display: -webkit-flex;
  width: auto;
  height: auto;
  overflow: hidden;
}

#search_ico{
  display: none;
  border-radius: 17px;
  width: 34px;
  height: 34px;
  justify-content: center;
  align-items: center;
}
@media (max-width:767px){
  #search_ico{
    display: flex;
    display: -webkit-flex;
    font-size: 1.3rem;
  }
}
#search_close{
  display: none;
  width: 34px;
  line-height: 34px;
  height: auto;
  overflow: hidden;
  text-align: center;
}
@media (max-width:767px){
  .search{
    display: none;
  }
  .search_on{
    display: flex;
    display: -webkit-flex;
    position: absolute;
    left: 0px;
    right: 0px;
    top:0px;
    bottom: 0px;
    margin: auto; 
    background-color: var(--head_back);
    padding: 15px;
    box-sizing: border-box;
  };
  .search_on>#search_close{
    display: block;
  }
}
.search_tb{
  display: grid;
  grid-template-columns:40px auto;
  height: auto;
  width: auto;
  border-radius: 17px;
  background-color: #5c5c5c;
  padding-left: 10px;
}
@media (max-width:767px){
  .search_tb{
    width: 100%;
  }
}
#keywords{
  display: block;
  background-color: transparent;
  color: #fff;
  width: 100%;
  height: 34px;
  overflow: hidden;
  border: none;
  outline: none;
}
#keywords::placeholder{color:#fff;}
#bt_search{
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  width: 34px;
  height: 34px;
  overflow: hidden;
  cursor: pointer;
}
.welcome{
  display: block;
  width: auto;
  height: 40px;
  overflow: hidden;
  padding: 10px;
  text-align: center;
  font-size: 14px;
  background-color: var(--back_color);
  color: #fff;
  box-sizing: border-box;
}
#mm{
  display: none;
}
@media (max-width:767px){
  #mm{
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
    width: auto;
    height: auto;
    overflow: hidden;
    font-size: 1.3rem;
  }
}
#quan_foot{
  background-color: var(--back_color);
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
  color: #fff;
  padding-top: 30px;
}
#quan_foot a{color:#fff;}
#quan_foot a:hover,#quan_foot a:active{color:#fff;}
#quan_foot_thead{
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  width: auto;
  height: auto;
  overflow: hidden;
  max-width: var(--max_width);
}
#quan_foot_tbody{
  margin: auto;
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 8%;
  width: auto;
  max-width: var(--max_width);
  margin-top: 50px;
}
@media (max-width:767px){
  #quan_foot_tbody{
    grid-template-columns:auto;
    row-gap: 20px;
    padding: 20px;
  }
}
#quan_foot_left{
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 8%;
  width: auto;
}
@media (max-width:767px){
  #quan_foot_left{
    flex-direction: column;
    row-gap: 20px;
  }
}
#quan_foot_right{
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  flex-wrap: wrap;
  column-gap: 8%;
  width: auto;
}
@media (max-width:767px){
  #quan_foot_right{
    flex-direction: column;
    justify-content: unset;
    row-gap: 20px;
  }
}
.foot_logo{
  display: block;
  width: 150px;
  height: 150px;
  overflow: hidden;
  margin: auto;
}
.foot_tb{
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
}
.foot_thead{
  display: flex;
  display: -webkit-flex;
  width: auto;
  height: auto;
  overflow: hidden;
  margin-bottom: 15px;
  font-weight: 700;
  font-size: var(--foot_title_size);
}
@media (max-width:767px){
  .foot_thead{
    justify-content: space-between;
    align-items: center;
    font-size: 20px;
    margin-bottom: unset;
    line-height: 1.2;
    font-weight: 400;
  }
}
.foot_tbody{
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
}
@media (max-width:767px){
  .foot_tbody{
    display: none;
    margin-top: 10px;
  }
}
.foot_list{
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  row-gap: 5px;
  width: auto;
  height: auto;
  overflow: hidden;
}
.foot_item{
  display: flex;
  display: -webkit-flex;
  align-items: center;
  column-gap:8px;
  width: auto;
  height: auto;
  overflow: hidden;
}
a.foot_name{
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
  font-size: 14px;
  color: #fff;
}
@media (max-width:767px){
  a.foot_name{
    font-size: 18px;
    font-weight: 300;
  }
}
.ico_list{
  display: flex;
  display: -webkit-flex;
  column-gap: 10px;
  width: auto;
  height: auto;
  overflow: hidden;
}
a.ico_ico{
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
  color: #fff;
  font-size: 1.2rem;
}
.pay_list{
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  column-gap: 8px;
  width: auto;
  height: auto;
  overflow: hidden;
  border-top: 1px solid #222222;
  padding-top: 50px;
  padding-bottom: 20px;
}
.pay_tb{
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
}
.pay_pic{
  display: block;
  width: 60px;
  height: 38px;
  overflow: hidden;
}
.copyright{
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
  padding: 20px;
  padding-top: 30px;
  padding-bottom: 30px;
  text-align: center;
}
.copyright a{color: #fff;}
.support{
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
  text-align:center;
  padding: 10px;
}
.support a{color: #fff;}
.letter{
  display: grid;
  grid-template-columns: auto 330px;
  justify-content: center;
  align-items: center;
  column-gap: 10%;
  width: auto;
  height: auto;
  overflow: hidden;
  margin: auto;
  max-width:var(--max_width);
  padding: 20px;
  margin-top: 20px;
  margin-bottom: 20px;
}
@media (max-width:767px){
  .letter{
    grid-template-columns: auto;
    row-gap: 20px;
    justify-content: center;
  }
}
.letter_left{
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
}
.letter_right{
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
}
.letter_title{
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
  font-size: 18px;
  font-weight: 600;
}
.letter_miaoshu{
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
  font-size: 14px;
  margin-top: 10px;
}
.letter_tb{
  display: grid;
  grid-template-columns: auto 100px;
  width: auto;
  height: auto;
  overflow: hidden;
  border: 1px solid #fff;
}
#qd_mail{
  border: none;
  background-color: transparent;
  color: #fff;
  padding: 10px;
  outline: none;
}
#bt_mail{
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  overflow: hidden;
  color: #fff;
  cursor: pointer;
}
.foot_fold{
  display: none;
  width: auto;
  height: auto;
  font-size: 2rem;
  overflow: hidden;
}
@media (max-width:767px){
  .foot_fold{
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
  }
}
.nav_mob{
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  width: auto;
  height: auto;
  overflow: hidden;
  padding: 20px;
}
.mob_item{
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
  padding: 5px;
}
a.mob_name{
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
  font-size: 1.1rem;
}
.mob_thead{
  display: flex;
  display: -webkit-flex;
  justify-content: space-between;
  width: auto;
  height: auto;
  overflow: hidden;
  margin: auto;
  overflow: hidden;
  border-bottom: 1px solid #ddd;
  padding: 5px;
}
.mob_fold{
  display: flex;
  display: -webkit-flex;
  width: auto;
  height: auto;
  justify-content: center;
  align-items: center;
  font-family: "fontawesome";
  color: #000;
}
.mob_tbody{
  display: none;
  width: auto;
  height: auto;
  overflow: hidden;
  padding: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}
.nav{
  display: flex;
  display: -webkit-flex;
  justify-content: center;
  width: auto;
  height: auto;
  overflow: hidden;
  max-width: var(--max_width);
  margin: auto;
}
.nav_item{
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
}
a.nav_name{
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
  color: #fff;
  font-size:16px;
  padding:20px;
  text-transform: uppercase;
}
#mm_tb{
  display: none;
  width: 80%;
  height: calc(100vh - 60px);
  background-color: #fff;
  overflow: auto;
  position:fixed;
  right: 0px;
  top:60px;
  margin:auto;
  z-index: 200;
}
.nav_sub{
  background-color: #000;
  display: none;
  padding: 20px;
  position: absolute;
  left: 0px;
  right: 0px;
  top:0px;
  width: auto;
  height:auto;
  overflow: hidden;
  margin: auto;
  z-index: 200;
}
.nav_tb{
  display: grid;
  grid-template-columns: auto auto;
  width: auto;
  height: auto;
  overflow: hidden;
  max-width: var(--max_width);
  margin: auto;
  color: #fff;
  column-gap: 20px;
}
.nav_tb a{color:#fff;}
.nav_left{
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
}
.n_name{
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
  font-size: 1.1rem;
  border-bottom: 1px solid rgba(255,255,255,0.2);
  padding-bottom: 10px;
  margin-bottom: 10px;
}
.n_list{
  display: flex;
  display: -webkit-flex;
  flex-direction: column;
  row-gap: 10px;
}
.n_item>a{
  font-size: 12px;
}
.nav_right{
  display: flex;
  display: -webkit-flex;
  width: auto;
  height: auto;
  overflow: auto;
  column-gap: 20px;
}
a.p_tb{
  display: block;
  width: 250px;
  height: auto;
  overflow: hidden;
}
.p_pic{
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
  padding-bottom:75%;
  position: relative;
  background-size: cover;
}
.p_name{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  width: auto;
  height: auto;
  overflow: hidden;
  margin-top: 10px;
}
.p_price{
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.2);
  display: block;
  width: auto;
  height: auto;
  overflow: hidden;
}