/*--------------------------------------------------------------
# Product-list Section
--------------------------------------------------------------*/

.policy .title{
  position: -webkit-sticky;
  position: sticky;
  top: 80px;
  z-index: 99;
  background: var(--surface-color);
  margin-bottom: 10px;
  padding: 10px 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
@media (max-width:768px){
.policy .title{
  top: 70px;
}
}
.policy h4{
	padding:10px 0 0 10px;
	font-size:18px;
	line-height:1.5;
}
.policy p{
	padding-left:30px;
	font-size:15px;
	line-height:1.8;
}
.policy span{
	padding:0 20px;
}

.detail .title{
  background: var(--surface-color);
  padding-left:10px;
  font-size: 22px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.detail .title span{
  padding:0 10px;
}
@media (max-width:992px){
.detail .title{
  font-size: 18px;
}
}
.detail .producttop {
	background-color:var(--surface-color);
    display: flex;
	align-items: flex-start;
}
.detail .boxleft{
  padding: 0 15px;
  margin: 0 auto;
  max-width: 500px;
}
.detail .boxright{
  padding:0 15px; 
}
.tb-booth {
  position: relative;
  width: 100%;
  padding-top: 100%;
  box-shadow: -2px 2px 5px rgba(0,0,0,0.3);
  background-color:black;
}
.main-img,
.main-video{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  display: block;
}

.zoom-mask {
    display: none;
    position: absolute;
    width: 40%;
    height: 40%;
    background: rgba(255, 215, 0, 0.3);
    cursor: crosshair;
    pointer-events: none; 
    z-index: 10;
}
.zoom-window {
    display: none;
    position: absolute;
    left: 102%; 
    top: 0;
    width: 100%; 
    height: 100%;
    border: 1px solid #eee;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: 0 0;
    z-index: 99;
    overflow: hidden;
}
@media (max-width:768px){
  .zoom-mask,
  .zoom-window {
    display: none !important;
  }
}

.zoom-window img {
  position: absolute;
  display: block;
  padding: 0;
  margin: 0;
  overflow: hidden;
}

/* ËõÂÔÍ¼ */
.tb-thumb {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin-top: 10px;
  padding-left:0;
  gap:5px;
  list-style: none;
}
.tb-thumb li {
  display: inline-block;
  width: 15%;
  min-width: 60px; 
  border: 2px solid transparent;
  cursor: pointer;
  flex-shrink: 0;
}
.tb-thumb li img{
  width: 100%;
}
.tb-thumb li.tb-selected {
  border-color:var(--accent-color);
}


.detail .boxright h3{
	font-size:26px;
	font-weight: 600;
	margin-bottom: 15px;
}
.detail .boxright p{
	padding-top:5px;
	font-size:18px;
}
.detail .boxright p span{
	padding-right:5px;
	font-weight:bold;
}
@media (max-width:992px){

.detail .boxright h3{
	font-size:18px;
}
.detail .boxright p{
	font-size:16px;
	padding:0;
}
}
.detail .content{
	text-align: center;
}