@import url('/css/community.css');

/* sbanner */
#sbanner {position: relative;top: 100px;z-index: 1;}
#sbanner a {position: relative;height: 35vh;z-index: 1;}
#sbanner:after { position: absolute; width: 100%; height: 100%; background: rgba(232, 244, 253, .5); display: block; top: 0; left: 0; z-index: 2; content: ""; }

/* wrap */
.wrap  {position: relative;margin-top: -15vh;margin-bottom: 12vh;z-index: 2;}
.wrap h1 { line-height: 150%; }

/* waylink */
.waylink {position: relative;display: inline-block;top: 100px;width: 100%;z-index: 3;}
.waylink ol {font-size: 0;text-align: center;background: #ffffff;padding: 8px 0;border-top: 1px solid #999e70;border-bottom: 1px solid #999e70;}
.waylink ol li {display: inline-block;color: #56613b;font-size: 14px;text-align: center;}
.waylink ol li a {color: #56613b;font-size: 14px;}
.waylink ol li:after {margin: 0 5px;display: inline-block;color: #999e70;content: "/";}
.waylink ol li:last-child {color: #56613b;}
.waylink ol li:last-child:after { content: ""; }

/* contentMain */
.contentMain {position: relative;}
.contentMain article{color: #99968D;margin-bottom: 40px;}

/* sideNav */
#sideNav ul.Cate{text-align: center;}
/* Estilo por defecto para ambas versiones */
#sideNav .bgTxt.title {
    padding: 0 0 25vh; /* Esto aplica a la versión de escritorio */
}

/* Media Query para versiones móviles (ancho de pantalla <= 768px, ajusta según necesites) */
@media screen and (max-width: 768px) {
    #sideNav .bgTxt.title {
        padding: 0 0 0vh; /* Ajuste para la versión móvil */
    }
}
#sideNav #sideMenu {width: 90%;margin: 0 auto;margin-top: 28px;padding: 8px 20px;display: none;font-size: 18px;color: #fff;background: #999e70;border-radius: 7px;}
#sideNav #sideMenu font , #sideNav #sideMenu span {margin-right: 15px;display: inline-block;vertical-align: middle;}
#sideNav #sideMenu span i {margin: 2px 0;width: 3px;height: 3px;background: #ffffff;border-radius: 50%;display: block;-webkit-transition: all 0.5s ease;transition: all 0.5s ease;}
#sideNav #sideMenu span.open i:nth-child(2) { margin: 2px 5px; }
.catBox {position: relative;padding-bottom: 5vh;z-index: 2;}
.fixTop { position: fixed; width: 1420px; top: -15px; }
.fixTop.showheader { top: 50px; }
#sideNav >ul >li {position: relative;display: inline-block;}
#sideNav >ul >li.action{background: #999e70;}
#sideNav >ul >li.action >h3 a{ color: #fff; }
#sideNav >ul >li >h3 {display: block;}
#sideNav >ul >li >h3 a {display: inline-block;color: #999e70;border: 1px solid #999e70;padding: 5px 15px;}
#sideNav >ul >li >h3 a:hover{ background: #56613b; color: #fff}
#sideNav >ul >li b[data-action="sideOpen"] { display: none; }
#sideNav >ul >li >ul.subUL {overflow: hidden;position: absolute;left: calc(50% - 100px);width: 200px;height: 0;background: #999e70;opacity: 0;}
#sideNav >ul >li:hover >ul.subUL { height: auto; opacity: 1; }
#sideNav >ul >li >ul.subUL li a { display: block;text-align: left; padding: 10px 20px; color: #fff;}
#sideNav >ul >li >ul.subUL li a:hover { background: rgb(255 255 255 / 0.3)}
#sideNav >ul >li >ul.subUL li ul.sub2UL {background: rgb(255 255 255 / 0.5); }


/* artlsit */
#artlsit ul{font-size: 0;text-align: center;}
#artlsit ul li {width: calc((100% / 3) - 25px);display: inline-block;overflow: hidden;margin: 18px 10px;border: 1px solid #56613b;}
#artlsit ul li .img {position: relative;}
#artlsit ul li .img a.photo { -webkit-transform: translate(0) scale(1); transform: translate(0) scale(1); }
#artlsit ul li .img p.cate{position: absolute;top: 0px;left: 0;padding: 10px 30px;text-align: center;background: #999e70;color: #fff;}
#artlsit ul li .info {padding: 20px 50px 5px;}
#artlsit ul li .info h3 {height: 35px;font-size: 25px;color: #6D6D6D;-webkit-line-clamp: 1;}
#artlsit ul li .info article {height: 43px;font-size: 14px;color: #6D6D6D;-webkit-line-clamp: 2;margin: 12px 0 28px;}
#artlsit ul li .info .price{padding-bottom: 10vh;}
#artlsit ul li .info .price span{display: inline-block;color: #6D6D6D;font-size: 16px;}
#artlsit ul li .info .price span.old {float: left;}
#artlsit ul li .info .price span.new {float: right;}

/* content */
#content .articlebar {margin: 13px 0 0px;}
#content .articlebar font{font-size: 1.2rem;color: #999e70;}
#content h1{font-size: 2.2em;text-align: left;border-bottom: 1px solid #d6d6d6;color: #6D6D6D;-webkit-line-clamp: 1;margin-bottom: 7vw;}
#content #describe{ width: 90%; margin: 0 auto}

/* faqList */
#faqList li {margin-bottom: 10px;border-bottom: 1px solid #efeff0;}
#faqList li .title {
    position: relative;
    padding: 5px 65px 15px 150px; /* Estilo por defecto (escritorio) */
    display: block;
    margin-top: -31px; /* Estilo por defecto (escritorio) */
}

/* Estilos específicos para móviles */
@media (max-width: 768px) { /* Ajusta el valor según el punto de quiebre que desees para móviles */
    #faqList li .title {
        padding: 5px 65px 15px 100px; /* Estilo para móviles */
        margin-top: -45px; /* Estilo para móviles */
    }
}

#faqList li .title font {
  color: #99968d;
}

#faqList li .title span {
  position: absolute;
  width: 17px;
  height: 17px;
  display: block;
  top: calc((100% - 30px) / 2);
  right: 25px;
  background: #999e70;
  border-radius: 15px;
  padding: 2px 0px 3px 6px;
}

/* Estilos generales para el signo '>' */
#faqList li .title span::after {
    content: '>';
    color: white;
    font-size: 20px; /* Ajusta el tamaño del signo */
    margin-left: 2px; /* Ajusta el espacio entre el texto y el signo */
    display: inline-block;
    transform: translateY(1px); /* Ajusta la posición vertical para mover el signo hacia arriba */
}

/* Estilos específicos para móviles */
@media (max-width: 768px) { /* Ajusta el valor según el punto de quiebre que desees para móviles */
    #faqList li .title span::after {
        transform: translateY(0); /* Elimina la transformación vertical para móviles */
    }
}

/* page-control */
#page-control{padding: 14vh 0 0;}
#page-control a {position: absolute;bottom: 58px;font-size: 14px;color: #999e70;border: 1px solid #999e70;padding: 5px 15px;vertical-align: middle;border-radius: 5px;}
#page-control a.page-prev{left: 0;}
#page-control a.page-next{right: 0;}
#page-control a font{color: #6D6D6D;font-size: 12px;vertical-align: top;}
#page-control a:hover { background: rgb(153 158 112 / 0.3); color: #fff; }

/* pagenav */
#pagenav { margin: 30px 0 0; text-align: center; }
#pagenav a , #pagenav strong {width: 40px;height: 40px;display: inline-block;text-align: center;line-height: 37px;font-size: 18px;color: #56613b;vertical-align: middle;border: 1px solid #999e70;margin-left: 10px;}
#pagenav a { opacity: .5; }

/* form1 */
#form1 { font-size: 0; }
#form1 p { margin: 10px 20px; width: calc(100% - 40px); display: inline-block; vertical-align: text-bottom; }
#form1 p.col-2 {width: calc(50% - 40px);}
#form1 p.col-3 { width: calc((100% / 3) - 40px); }
#form1 p.col-4 { width: calc(25% - 40px); }
#form1 p label {margin-bottom: 5px;display: block;color: #6d6d6d;}
#form1 p label b { margin-left: 5px; color: #ff575f; }
#form1 p input , #form1 select , #form1 textarea {padding: 5px 15px;width: calc(100% - 34px);border: 1px #e4e4e4 solid;display: block;}
#form1 p select { padding: 10px 15px; width: 100%; }
#form1 p input#Checknum { margin-right: 10px; width: 60px; display: inline-block; }
#form1 p.send {text-align: center;width: 12%;border: 1px solid #56613b;background: #999e70;padding: 5px 13px;}
#form1 p.send a{ color: #fff; }

@media screen and (min-width: 1281px) {	
	#artlsit ul li:hover .img a.photo { -webkit-transform: translate(0) scale(1.1); transform: translate(0) scale(1.1); }
	#artlsit ul li:hover .img a.photo img { background: rgb(153 158 112 / 0.3); }
	#artlsit ul li .info .cate a:hover , #artlsit ul li .info h3 a:hover { opacity: .6; }
}
@media screen and (max-width: 1280px) {
	.waylink {top: 72px;}
	#sbanner{top: 72px;}
	.wrap { margin-top: 15vh;}
}
@media screen and (max-width: 980px) {
	#sideNav #sideMenu { display: block; }
	#sideNav >ul.open>li >h3 a{width: 65%;padding: 12px 12px 12px 50px;border: none;color: #56613b;}
	#sideNav >ul {position: relative;overflow: hidden;width: 95%;margin: 0 auto;height: 0;background: #ffffff;border: 1px solid #999e70;opacity: 0;left: 0;}
	#sideNav >ul.open {height: auto;opacity: 1;z-index: 1;}
	#sideNav >ul >li {display: block;border-radius: 5px;}
	#sideNav >ul >li.action{background: rgb(153 158 112 / 20%);}
	#sideNav >ul >li >h3 a:hover{ background: none; color: #999e70;}
	#sideNav >ul >li >ul.subUL {position: relative;width: 100%;left: 30px; padding: 2vh 0 3vh; background: none;-webkit-transition: none;transition: none; height: auto; display: none;}
	#sideNav >ul >li.action >ul.subUL {height: auto;opacity: 1;transition: none;}
	#sideNav >ul >li >ul.subUL li a {text-align: left;color: #999e70;}
	#sideNav >ul >li >ul.subUL li .subULHead p {display: inline-block; }
	#sideNav >ul >li b[data-action="sideOpen"] {padding: 9px 16px 9px 0;display: inline-block;color: #56613b;float: right;}
	#sideNav >ul >li >ul.subUL li ul.sub2UL { overflow: hidden; height: 0; border-bottom: 0; opacity: 0; }
	#sideNav >ul >li >ul.subUL li.action ul.sub2UL {height: auto;opacity: 1;background: none;margin-left: 30px;}
	#artlsit ul li{width: calc((100% / 2) - 25px);}
	#form1 p.col-2 , #form1 p.col-3 { width: calc(100% - 40px); }
	#form1 p.col-4 { width: calc(50% - 40px); }
	#form1 p.send { text-align: center; }
}
@media screen and (max-width: 765px) {
    #page-control a {position: relative;width: 90%;display: inline-block;margin-bottom: 20px;max-height: initial;overflow: hidden;-webkit-line-clamp: 1;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;}
    #page-control a.page-prev{ text-align: left}
    #page-control a.page-next{text-align: right}
}
@media screen and (max-width: 640px) {
	#artlsit ul li{width: 95%;margin: 0 auto;margin-bottom: 6vh;}
	#artlsit ul li .info article a {margin: 12px 0 5px;}
	#form1 p.col-4 { width: calc(100% - 40px); }
}