@charset "utf-8";

html,body{max-width:1200px; margin:0 auto;}
.icon{font-family:iconfont;}
html{font-size:68.75%}
@media only screen and (min-width:250px) {html {font-size:45%!important}}
@media only screen and (min-width:316px) {html {font-size:54%!important}}
@media only screen and (min-width:359px) {html {font-size:60%!important}}
@media only screen and (min-width:374px) {html {font-size:62%!important}}
@media only screen and (min-width:386px) {html {font-size:64%!important}}
@media only screen and (min-width:481px) {html {font-size:70%!important}}
@media only screen and (min-width:536px) {html {font-size:80%!important}}
@media only screen and (min-width:641px) {html {font-size:100%!important}}

/* =======以上是对不同尺寸屏幕的文字大小约定=================== */





/* =========以下是移动端和PC端共用的处理========== */

/* 图片比例处理 */
.aspect-ratio {
  --aspect-ratio-w: 1;
  --aspect-ratio-h: 1;

  position: relative;
}
.aspect-ratio img{ border-radius:10px; }

.aspect-ratio > *:first-child {
  width: 100%;
}

@supports (--custom-props: "true") {
  .aspect-ratio::before {
    display: block;
    padding-top: calc(var(--aspect-ratio-h, 1) /
        var(--aspect-ratio-w, 1) * 100%);
    content: "";
  }

  .aspect-ratio > *:first-child {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    height: 100%;
    width: 100%;
  }
}

.back-top {display: flex;  position:fixed; right: 10px;bottom:30px;  z-index:100}
.addtoany{margin:0px auto;}

.prolist{width:100%;margin:0 auto; margin-top:10px;column-gap:10px;}
.product{padding:0.3rem;background:#E9EAEE; margin-bottom:10px;  font-size:1.3rem; border-radius: 20px;break-inside: avoid;height:100%;overflow:auto;}
.product li{ width:100%; text-align:center; }
.product li span{ width:100%; margin:1;  vertical-align: middle;}
.product li span.pic{width:99%; max-width: 98%;  margin-bottom:2rem; vertical-align: middle;}
.product li span.text{display:block; height: 1rem; margin-bottom:2rem; font-size:1.1rem; margin-left:0.001rem;} 
.product li span.price{margin-bottom:2rem; font-weight:bold;  margin-right:0.5rem; }
.product li span.buy{background:url(../images/buy.png) repeat-x;  background-size:5rem; border-radius:10px;  padding-left:1rem; filter: drop-shadow(0 0 3px #0a2);} 
.product li span.buy a{ background:url(../images/cart.png) no-repeat 0 center; padding-left:1rem; margin-right:1.4rem; background-size:0.8rem; }
.product li span.sold{color:#9E1111; background:url(../images/star.png) no-repeat 0 center; padding-left:1.2rem; padding-right:0.8rem;}
.product img{ border-radius:16px; }


/* 以下是对页面非产品区域的约束 */
.mywords{padding:0.3rem;  width:100%;  float:left; background:#E9EAEE; margin-top:10px;  font-size:1.3rem; border-radius: 20px;}
.mywords li{ width:100%; text-align:center; }
.mywords li span{ width:100%; margin:1;  vertical-align: middle;}
.mywords li span.pic{width:98%; max-width: 98%;  margin-bottom:.2rem; vertical-align: middle;}
.mywords li span.text{display:block; margin-bottom:.4rem; font-size:1.3rem; margin-left:0.01rem;} 
.mywords img{ border-radius:16px; }

/* 页面推广词 */
.mywords{padding:0.5rem;  width:100%;  float:left; background:#E9EAEE; margin-top:10px;  font-size:1.3rem; border-radius: 20px;}
.mywords img.a{ float:right; padding-left:10px; }
.mywords img.b{ float:left; padding-right:10px; }

/*returnTop*/
p#back-to-top{ position:fixed; display:none; bottom:50px; right:16px; }


/* 订单提交 */
.order{padding-bottom:1rem;  width:100%;  margin:0 auto;  padding:4px; background:#F5F5F5;  font-size:1.3rem;}
.order img{ border-radius:10px; }
.order input{outline-style: none ; border: 1px solid #ccc;  border-radius: 5px; padding: 1px 1px; font-size:1.2rem; color:#C71585; }
	
.wp-none li span.sss a{ background:url(../images/SINCE2005.png) no-repeat 0 center;  background-size:7rem;filter: drop-shadow(0 0 5px #000);} /* =====奖章只PC端显示======= */



/* ======================以下是PC端大于800的处理============================= */
@media only screen and (min-width:800px) {

.header{background:#B72554; height:3.5rem; line-height:3.5rem; overflow:hidden}
.header span{display:block; float:left; height:3.5rem;}
.header span.home{width:60%; background:url(../images/home.png) no-repeat center center; background-size:3.5rem; filter: drop-shadow(0 0 5px #000);}
.header a{display:block;}


	
html, body {
	max-width: 1200px !important;  /*无论多大的屏幕，约定显示宽度不大于1200*/
}

.wap{ display:none !important}	
.header span.home {
	width:10% !important;
	background-size: 3.5rem;
}	

.nav-pop .drop-down li {
	text-align: center;
	width:auto;
	height: 3.5rem;
	float:left;
 	width: 9%;
	line-height: 3.5rem;
	border-bottom: 0px solid #efefef;
	font-size:0.8rem;
}
.nav-pop li a{padding:0 10px; color:#fff; display:block;}
.nav-pop li a:hover{background:#751131;}


.column{background:#CBCBCB; overflow:hidden;border-radius:0 0 20px 20px; border-top: 1px solid #fff; }
.column li{float:left;  text-align:center; height:3.5rem; line-height:3.5rem; }
.column li a{color:#404040; font-size:1rem;display:block;}
.column li a:hover{color:#9E1111;background:#cab4b4;}
.column li {
	float: left;
	width: 20%;
	overflow:hidden;
	text-align: center;
	border-bottom: 1px solid #fff;	
}
.column li:nth-child(n+6) {border-bottom: 1px solid #fff;} /*目录菜单从第六个开始显示下边框避免最后一个下缘不齐*/



.prolist{
column-count:4;  /*=====产品也列数的约定=============*/
column-gap:10px; }	

.product{
page-break-inside:avoid;clear:both;
font-size:0.7rem;
} 
  .product li span.text {
	font-size: 0.72rem;
}
.mywords {

	font-size: 0.9rem;

}

}


/* ======================以下是移动端小于799宽度的如下处理============================= */

@media only screen and (max-width:799px) { 
.wp-none{display:none; }  /* ===手机端不显示的内容====== */

.headerbox{background:#B72554; height:3.5rem; line-height:3.5rem;} /* 头部导航条固定后为避免遮挡下方菜单故做一个BOX撑起高度 */
.header{background:#B72554; height:3.5rem; line-height:3.5rem;  position: fixed; top:0px; width: 100%;z-index:999;}
.header span{display:block; float:left; height:3.5rem;}
.header span.back{width:20%; background:url(../images/back.png) no-repeat center center; background-size:1.8rem;filter: drop-shadow(0 0 5px #000);}
.header span.home{width:60%; background:url(../images/home.png) no-repeat center center; background-size:3.5rem;filter: drop-shadow(0 0 5px #000);}
.header span.nav{width:20%; background:url(../images/category.png) no-repeat center center; background-size:2rem;filter: drop-shadow(0 0 5px #000);}
.header a{display:block;}



.nav-pop {display: flex;  position:absolute; right: 0px;top:0px; width:30%; z-index:100}
.nav-pop li{text-align:center; height:3rem; line-height:3rem; font-size:1.4rem;}
.nav-pop li a{display:block;}
.nav-pop li a:hover{background:#FFBFD4;}


.drop-down {
width: 300px;
height: 100px;
margin-right: 0px;
}
.drop-down-content {
opacity: 0;
height: 0;
margin-top: 3.5rem;
filter: drop-shadow(0 0 5px #000);
background-color:#FFFFFF; 
border-radius:0 0 20px 20px;
overflow: hidden;
transition: all 1s ease;
}
.drop-down-content li:hover a {
background-color: #FFBFD4;
}
.nav-pop .drop-down:hover .drop-down-content {
opacity: 1;
height: 30rem;
}


.column{background:#CBCBCB; overflow:hidden;border-radius:0 0 20px 20px;}
.column li{float:left; width:33.333%; text-align:center; height:3.5rem; line-height:3.5rem; border-top:1px solid #fff;}
.column li a{color:#404040; font-size:1.4rem;}
.column li:hover a{color:#9E1111;}


.prolist{
  column-count:2;
  column-gap:10px;}

}