@charset "GB2312";
/* CSS Document */
.smtfrom .sharelist { padding: 22px 16px 0 16px;}
.smtfrom .sharelist p {padding: 0 0 12px 0; font-size: 12px; color: #999; }

#shareListContainer { margin:22px 0 18px 0;border-bottom: 1px solid #eee; color: #666;padding: 0 0 18px 0;}
#shareListContainer .listprice {padding: 0 0 8px 0; }
#shareListContainer .listprice strong {font-size: 14px; color: #000;}
#shareListContainer p{font-size: 12.2px;}

.priceall {display: inline-flex;}

#closeNewsBtn{
	position: fixed;
    bottom: 76px;
    right: 0;
	z-index: 10000;
	cursor: pointer;
	border: 0;
	background: #4e6ef2;
	color: #fff;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	opacity: 0;
	visibility: hidden;
	transition: transform 0.5s, opacity 0.4s, visibility 0.5s, right 0.5s;
}

#closeNewsBtn::after{ content: "\2715";	transform: rotate(45deg);font-size: 18px;}
#closeNewsBtn.visbtn {
    opacity: 1;
    visibility: visible;
    right: 18px;
}



#averagePrice {    
	margin: 0 0 18px 0;
    font-weight: bold;
}

/* 重置select默认样式 */
#mall {
    -webkit-appearance: none; /* 移除iOS默认样式 */
    -moz-appearance: none; /* 移除Firefox默认样式 */
    appearance: none;
    background-color: #F6F6F6; /* 背景色 */
    color: #333; /* 文字颜色 */
    border: 1px solid #ddd; /* 边框 */
    border-radius: 18px; /* 圆角 */
    padding: 8px 0 8px 0; /* 内边距 */
    cursor: pointer; /* 鼠标指针样式 */
    outline: none; /* 移除焦点时的轮廓 */
    background-image: url('data:image/svg+xml;utf8,<svg fill="%23333" height="14" viewBox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>'); /* SVG图标作为下拉箭头 */
    background-repeat: no-repeat;
    background-position: right 10px center; /* 箭头位置 */
    background-size: 18px 18px; /* 箭头大小 */
	text-align: center;
	width: 100%;
	text-align-last: center;
}
/* 当select被聚焦时的样式 */
#mall:focus {
    border-color: #aaa; /* 聚焦时边框颜色 */
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.2); /* 聚焦时阴影 */
}

	
.allcatecon {
	position: fixed;
	z-index: 999;
	width: 168px;
	background: #fff;
	transform: translateX(-168px); opacity: 0; 
	visibility: hidden; transition: transform 0.5s, opacity 0.6s, visibility 0.5s;
    top: 0;
	left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
	will-change: left, transform;
	
	}	
	
.allcatevisible {
    left: 0 ; /* 显示时的位置 */
	transform: translateX(0);
	visibility: visible;
	opacity: 1;
	box-shadow: 6px 0 8px rgba(0, 0, 0, 0.1); 
	}


.upload-button {
    display: inline-block;
    padding: 8px 0 8px 0; /* 内边距 */
    color: #333;
    border: 1px solid #ddd; /* 边框 */
    border-radius: 18px; /* 圆角 */
	background-color: #F6F6F6; /* 按钮背景色 */
    cursor: pointer; /* 鼠标指针样式 */
    outline: none; /* 移除焦点轮廓 */
    overflow: hidden; /* 用于隐藏输入框 */
	width: 100%;
	text-align: center;
	margin: 18px 0 18px 0;
	font-size: 14px;
}

.upload-button span {
    pointer-events: none; /* 防止文本被点击 */
}

/* 隐藏原生的file input */
.upload-button input[type="file"] {
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}



.smtfrom .sinputbox { border-radius: 18px; border: 1px solid #eee; background: #f6f6f6; width: 100%;padding: 8px 0 8px 0; margin: 0 0 18px 0;box-sizing: border-box; color: #000;text-align: center;font-weight: bold;}

.sharebtn,.shareclose {width: 50%;
    border: 0;
    padding: 10px;
    font-weight: bold;
    cursor: pointer;
	margin:0 0 12px 0;
	float: left;
}

.shareclose{
	background: #c7e8ff;color: #000;
	border-bottom-right-radius: 18px;
	border-top-right-radius: 18px;
}

.sharebtn{
	background: #5abbff; color: #fff;
	border-bottom-left-radius: 18px;
	border-top-left-radius: 18px;
}
.alertBox {position:fixed; top:50%; left:50%;z-index:10000; padding:18px; border-radius: 18px; background-color: rgba(0, 0, 0, 0.8); color: #fff;
	opacity: 0;
    visibility: hidden;
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, transform 0.5s ease-in-out;
  transform: translate(-50%, -90%);
	text-align: center;
	
}

.alertBox.show {opacity: 1;visibility: visible;transform: translate(-50%, -50%);}

#comparisonAlertBox{padding: 0;width:260px;}
#comparisonAlertMessage {padding:18px;}
#comparisonAlertBox button {
    margin: 0 0 0 0;
    border: none;
    color: white;
    cursor: pointer;
	width: 50%;
	float: left;
	padding: 12px 0;
	font-size: 12px;
}

#comparisonAlertBox button:hover {background-color: #222;}
#comparisonConfirmBtn {border-bottom-left-radius: 18px; background-color: rgba(0, 0, 0, 0.4); }
#comparisonCancelButton {border-bottom-right-radius: 18px;background-color: rgba(0, 0, 0, 0.8);}

.closetab,.smtbtn{width: 50%; float: left;border: 0; cursor: pointer;font-weight: bold; height: 48px; }
.closetab{background-color:#ebffec;color:#333; border-top-right-radius: 18px;border-bottom-right-radius: 18px; }

.inputcont {  height: 108px; }
.smtfrom { padding: 48px;}
.smtfrom p{padding: 0 0 12px 12px;font-size: 2em; }
.smtfrom .tips {margin:0 0 28px 0; padding: 0 12px; font-size: 12px;}
.smtfrom .inputbox,.inputcont { border-radius: 18px; border: 1px solid #eee; background: #f6f6f6; width: 100%;padding: 12px; margin: 0 0 18px 0;box-sizing: border-box; color: #000;}
.smtfrom .smtbtn{background-color:#43B94B; color:#ffffff;border-top-left-radius: 18px;border-bottom-left-radius: 18px;font-size: 16px;}

#compare-icon i { display: block;text-align: center;}
#comparison-list {
		background-color: #fff;
        border-radius: 18px;
        box-shadow: 0 8px 28px rgba(0,0,0,0.2);
		border-top-left-radius: 18px;
		border-top-right-radius: 18px;
		position: absolute;
		width: 100%;
		top: 60px;
	overflow:hidden;

    }
#load-more-btn{cursor: pointer; width: 100%;border: 0;background: #fff; padding: 28px 0 28px 0;}


.addbtn.visi,.backtops.visi {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.addbtn,.backtops {position: fixed; z-index: 900; bottom: 18px; right: 18px; width: 42px;   
  transition: opacity 0.5s ease-in-out, visibility 0.5s ease-in-out, transform 0.5s ease-in-out;
  transform: translateX(150%);
  opacity: 0;
  visibility: hidden;
}
.addbtn a,.backtops a {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 0;
    text-align: center;
    transition: transform 0.5s ease, background-color 0.5s ease;
    display: block;
    background-color: #f2f2f2;
    margin: 0 0 8px 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-size: 20px 20px;
    background-position: center;
	background-repeat: no-repeat;
	
}

.addbtn a::before,.backtops a::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
}
.backtops .backtop {background-image: url("../img/back.svg");transform: rotate(90deg);}
#gotocom {text-align: center;background: linear-gradient(to bottom, #ffba00, #ff9503);color:#FFFFFF;font-size: 18px; font-weight: bolder; display: flex; align-items: center;transition: opacity 0.5s ease-in-out,visibility 0.5s;opacity: 0;position: absolute;visibility: hidden;}
#gotocom::before {display: none;}
#gotocom:hover{transform:none;}
.addbtn .backrun {background-image: url("../img/back.svg"); }
.addbtn .allcatebtn {background-image: url("../img/addpro.svg");background-size: 18px 18px;}
.addbtn .buyprice {background-image: url("../img/money.svg");}
.addbtn .errorback {background-image: url("../img/backmore.svg");}
.addbtn .gohomes {background-image: url("../img/nav/homebg.svg");}
.addbtn .us::before{content: none;}
.addbtn .us:hover{color:#fff;}
.addbtn .us:hover::before{content: none;color: #fff;}
.addbtn .us .allpro{width:20px; height: 20px;}
.addbtn .us {color: #666;}


.backtops .us::before{content: none;}
.backtops .us:hover{color:#fff;}
.backtops .us:hover::before{content: none;color: #fff;}
.backtops .us .allpro{width:20px; height: 20px;}
.backtops .us {color: #666;}

.addbtn .gohomes:hover::before {background-image: url("../img/nav/homebgw.svg");}
.addbtn .backrun:hover::before {background-image: url("../img/backw.svg");}
.addbtn .allcatebtn:hover::before {background-image: url("../img/addprow.svg");background-size: 18px 18px;}
.addbtn .buyprice:hover::before {background-image: url("../img/moneyw.svg");}
.addbtn .errorback:hover::before {background-image: url("../img/backmorew.svg");}

.backtops .us:hover {
    transform: rotate(360deg);
    background-color: #000;
}
.backtops .backtop:hover {
    transform: rotate(450deg);
    background-color: #fff;
}

.addbtn .gohomes:hover {
	fill:#fff;
}

.addbtn a:hover {
    transform: rotate(360deg);
    background-color: #000;
}

.addbtn a:hover::before {
	background-position: center;
	background-repeat: no-repeat;
}



.notpro {text-align:center; padding: 50px;}
.listhref{display:block; float: left; line-height: 56px; font-weight:bold;}
.listhref img {width:68px; float: left;padding: 0 8px 0 0;}

.prolistinfo {
    margin:0 28px;
    font-size: 14px;
    border-bottom: 1px solid #f2f2f2;
    padding: 18px 22px;}

.deleteBtn { float:right;border:0; border-radius: 50%;cursor: pointer;margin: 6px 0 0 0;background: url(../img/addpro.svg) center no-repeat #f6f6f6;width:38px;height: 38px;background-size: 14px;transform: rotate(45deg);}
.add-to-comparison {float: right;
    border: 0;
    border-radius: 12px;
    background: url(../img/addpro.svg) center no-repeat #f6f6f6;
    cursor: pointer;
    margin: 6px 0 0 0;
    width: 38px;
    height: 38px;
    background-size: 14px;
}

.leftcon .closeallbtn {
	background: url("../img/back.svg") center no-repeat #fff; 
	border-radius: 50% 0 0 50%;
	position: absolute;
	right: 0;
	width: 32px;
	height: 68px;
	background-size:18px 18px;
	bottom: -468px;
	cursor: pointer;
	box-shadow: 0 0 28px #999;
}

.leftcon::-webkit-scrollbar {
  display: none;
}

.leftcon .titlename {text-align:center; padding: 18px 0 18px 0;position: sticky;top: 0; width: 100%; font-weight: bolder;background: linear-gradient(to bottom, #ffffff, #f6f6f6);}
.leftcon {position: fixed;padding: 0 0 0 0; z-index: 999;width: 100%;background: #fff;
	transform: translateX(-168px); opacity: 0; visibility: hidden; transition: transform 0.5s, opacity 0.6s, visibility 0.5s;
    top: 0;
	left: 0;
    right: 0;
    bottom: 0;
    will-change: left, transform;
  overflow-y: scroll; /* 允许垂直滚动 */
  -ms-overflow-style: none;  /* IE和Edge的滚动条隐藏 */
  scrollbar-width: none;  /* Firefox的滚动条隐藏 */


}
.visible {
    left: 0 ; /* 显示时的位置 */
	transform: translateX(0);
	visibility: visible;
	opacity: 1;
	box-shadow: 12px 0 18px rgba(0, 0, 0, 0.2); 
        }

#comparison-list p {padding: 28px; text-align: center;}
#close-comparison-list,#start-compare-btn {border:0; width: 50%;margin: 28px 0 28px 0; cursor: pointer;background: #fff;}
#close-comparison-list{font-size: 14px;float: left;}
#start-compare-btn{font-size: 18px;font-weight: bold;float: right;}

#caseshowlist { text-align: center;}
#caseshowlist p {text-align: left; font-weight: bolder;font-size: 16px; padding: 0 0 0 20px;}
#caseshowlist a { float: left;width:46%;margin: 4% 2% 0% 2%;border: 1px solid #eee;box-sizing: border-box;border-radius: 18px;padding: 8px 0;transition: color 0.5s ease;font-weight: bold;position: relative;}
#caseshowlist .imgov img {width:50%; }
#caseshowlist .tis{
	
	text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding: 0 4px 0 4px;
	
}

.likepro:after {
    background-color: rgba(0,0,0,.02);
    border-radius: 18px;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}



#brandlist {margin: 0 0 0 0; padding: 20px;border-radius: 18px;}
#brandlist p {text-align: left;font-weight: bolder;font-size: 16px; padding: 0 0 18px 0;}
#brandlist a{float: left;margin: 0 2% 2% 0;background: #f9f9f9; padding: 2% 4%; width: inherit; box-sizing: border-box;border: 1px solid #eee;border-radius: 18px;transition: color 0.5s ease;}	


#gobuy { background:#fff;}
#gobuy .bimg  { background:#fff; text-align: center;} 
#gobuy .bimg img { width:100%;}
#gobuy .mall {  padding:12px 20px; }
#gobuy .mall .showjia {padding: 0 20px 0 20px; }
#gobuy .mall .showjia h1 { padding:0 0 5px 0; font-weight: bold;font-size: 24px; white-space: nowrap;}
#gobuy .mall .red {padding: 8px 0 8px 12px;}
#gobuy .mall .red span { color:#fc0f3d; font-size:39px; font-weight:bold; float: left;}
#gobuy .mall .buy { font-size:16px; color:#000;transition: top 0.3s; position: sticky; z-index: 888;}



.fixed {position: sticky;top: 0;z-index: 888;}
.add-btn:before,.add-btn:after,.remove-btn:before {position: absolute;background: #fff; content: ""; }
.tmall,.cmall{ display:block; padding:16px 0 16px 0;float: left; width: 50%; margin: 0 0 0 0; text-align:center; font-size:18px; color:#fff; text-decoration:none; font-weight:bold;}
.tmall,.cmall:hover{color:#fff;}

#gobuy .mall .buy .tmall { background: linear-gradient(to bottom, #2a54ff, #4e6ef2); color: #fff;   border-top-left-radius: 18px; border-bottom-left-radius: 18px;}
#gobuy .mall .buy .cmall { border-top-right-radius: 18px; border-bottom-right-radius: 18px; position: relative;}
#gobuy .mall .buy .cmall .countnum{ position: absolute; font-family: Arial,MicrosoftYaHei; font-weight:bolder;font-size: 12px; padding: 4px 8px; top: 8%; right: 22%; background-color: #ffff00; border-radius: 50%; color: #000; }
#gobuy .mall .buy .remove-btn {background: linear-gradient(to bottom, #b2b2b2, #c3c3c3);}
#gobuy .mall .buy .remove-btn:before {height: 2px; width: 10px; margin: 12px 0 0 -18px;}

.compare-icon-empty {
    background-color: #c3c3c3;
    color: #fff;
}

.compare-icon-full {
    background: linear-gradient(to bottom, #1e8cd9, #99d0f9);
    color: #fff;
}


.productlist {position: relative;margin:0 0 28px 0;}

.buylist{width:100%; margin:0; padding: 46px 0 0 0;}

.showpics {text-align: center;background: #fff;}
.showpics img {width: 100%;}

.linfos ul {margin: 0 0 18px 0;padding: 0 0 8px 0; border-bottom: 1px solid #efefef;}
.linfos ul li { padding:0 0 8px 0; font-size:14px; }
.linfos .tips {font-size:11.2px; color: #999; margin: 0 0 28px 0;}
.linfos .tips a{text-decoration: underline;font-weight: bold;}

.linfos ul .ap1 { background:url("../img/inch.svg") no-repeat; height:25px;    background-size: 25px;}
.linfos ul .ap2 { background:url("../img/cam.svg") no-repeat; height:25px;    background-size: 25px;}
.linfos ul .ap3 { background:url("../img/link.svg") no-repeat; height:25px;    background-size: 25px;}
.linfos ul .ap4 { background:url("../img/car.svg") no-repeat; height:25px;    background-size: 25px;}
.linfos {    padding:20px 20px 0 20px;}

.pagesc {display:none;}
.pagesc a { position:fixed; top:200px;	transition: all 0.26s ease-in-out;
    -moz-transition: all 0.26s ease-in-out;
    -webkit-transition: all 0.26s ease-in-out;
    -o-transition: all 0.26s ease-in-out;
padding:6px 12px 6px 12px; background:#fafafa; font-size:22px;border-radius:38px; bottom:inherit; width: inherit;box-shadow: 0px 0px 12px 0px #ccc;

}
.pagesc .lf { left:14px; border: 0;}
.pagesc .rf { right:14px;}
.pagesc a:hover { background: #000; color: #fff;}

#gobuy .mall .red .price { display: inline-flex; margin: 8px 0 0 2px;}
#gobuy .mall .red .price .up {font-size:14px;  font-weight:bold; padding:2px 5px; border:1px solid #fc0f3d; color: #fc0f3d; border-radius: 50%;}
#gobuy .mall .red .price .jg { font-size:14px; color:#fff; font-weight:bold; padding:2px 8px; background:#fc0f3d; border-radius: 18px; margin: 0 4px 0 4px;}
#gobuy .mall .red .price .gomall { width: 26px; height: 26px;  margin: 0 4px 0 0;}
#gobuy .mall .red .price .gomall a {display: block;width: 100%; height: 100%;border-radius: 50%;}
#gobuy .mall .red .price .gomall .tmallicon {background: url("../img/tb.jpg") ; background-size: cover;}
#gobuy .mall .red .price .gomall .dmallicon {background: url("../img/tk.png") ; background-size: cover;}
#gobuy .mall .red .price .gomall .jmallicon {background: url("../img/jd.jpg") ;background-size: cover;}
#gobuy .mall .red .price .gomall .sharelink { background: url("../img/nav/arrow.svg") center no-repeat,linear-gradient(to bottom, rgba(255, 128, 178, 1), rgba(255, 66, 78, 1));
background-size: 12.8px, auto;}


@media (min-width: 420px) {
	#gobuy .mall  .showjia h1 { font-size:6vw;}

}
@media (min-width: 620px) {
	#gobuy .mall  .showjia h1 { font-size:5vw;}
}
@media (min-width: 1025px) {
	#closeNewsBtn{position: fixed;top: 22px;left: 358px;}
	#closeNewsBtn.visbtn {visibility: visible;opacity: 1;}
.addbtn {opacity:1; visibility: visible;transform: translateX(0); }
	
.leftcon {position: fixed;z-index: 9999;width: 428px;background: #fff; }	
	
.likepro:after {
    background-color: rgba(0,0,0,0);
    border-radius: 8px;
    bottom: 0;
    content: "";
    left: 0;
    position: absolute;
    right: 0;
    top: 0
}
	
.fixed {position:static;top: auto;}
#gobuy .mall .showjia h1 { padding:0 0 5px 0; font-weight: bold;font-size: 24px; }
#gobuy .mall .buy {position: static;}
#gobuy .mall .red .price {margin: 14px 0 0 2px;}

.likearea { position: absolute;top: 588px; left: 0;width: 528px; }
#caseshowlist {text-align: center;background: #f9f9f9;padding: 20px;border-radius: 18px;}
#caseshowlist p {text-align: left;font-weight: bolder;font-size: 16px;}
#caseshowlist a{float: left;width: 42%; margin: 4%;background: #fff; padding: 4%;box-sizing: border-box;border: 1px solid #eee;border-radius: 18px;}
	

#brandlist {margin: 28px 0 0 0; background: #f9f9f9;padding: 20px;border-radius: 18px;}
#brandlist p {text-align: left;font-weight: bolder;font-size: 16px; padding:  0 0 18px 20px}
#brandlist a{float: left;background: #fff; padding: 2% 4%; width: inherit; box-sizing: border-box;border: 1px solid #eee;border-radius: 18px;}
#brandlist div {padding: 0 0 0 12px;}

#gobuy .bimg  { width:528px; height:428px; float:left;} 
#gobuy .bimg img { width:528px; height:428px}
#gobuy .mall { float:right; padding:68px 0 0 0; width:448px;}
#gobuy .mall  .red span { color:#fc0f3d; font-size:48px; font-weight:bold; float: left;}


.buylist{width:1048px; margin:0 auto 0; position: relative;}

	.showpics {
    text-align: center;
    background: #fff;
}
.showpics img {width:inherit;}

.linfos ul li { padding:0 0 10px 0; font-size:14px; }

.pagesc{display:block}
.pagesc a { position:absolute; top:200px;	transition: all 0.26s ease-in-out;
    -moz-transition: all 0.26s ease-in-out;
    -webkit-transition: all 0.26s ease-in-out;
    -o-transition: all 0.26s ease-in-out;
padding:5px 20px 5px 20px; background:#fafafa; font-size:28px;border-radius:18px; bottom:inherit; width: inherit;
}
.pagesc a:hover { background: #000; color: #fff;}
	
}

@media (max-width: 390px) {
#gobuy .mall .red span { font-size: 39px;}
#gobuy .mall  .showjia h1 { font-size:5.8vw;}
}
@media (max-width: 375px) {
#gobuy .mall .red .price {margin:5px 0 0 2px;	}
.linfos ul li { font-size:3vw;}
#gobuy .mall .red .jg{top:4px;}
#gobuy .mall .red span { font-size: 32px;}

}


@media (max-width: 374px) {

#gobuy .mall .red span {font-size: 32px;}
#gobuy .mall .red .jg {font-size:14px;color:#fff; font-weight:bold; padding:2px 8px; background:#fc0f3d; border-radius: 18px;}
	.linfos ul li { font-size:3vw;}
	
	
}