@import url('/css/community.css'); 
/* sbanner */
#sbanner {position: relative;z-index: 1;margin-top: 170px;}
#sbanner a {position: relative;height: 300px;z-index: 1;}
.bgTxt.title {padding:0}

/* wrap */
.wrap {position: relative;margin: 9vh auto;z-index: 2;width: min(90%, 1280px);}
.wrap h1 { line-height: 150%; }

/* waylink */
.waylink { position: absolute; display: inline-block; top: 143px; width: 100%; z-index: 3; }
.waylink ol {font-size: 0;text-align: center;padding: 8px 0;}
.waylink ol li {display: inline-block;color: #4c4a49;font-size: 14px;}
.waylink ol li a {color: #4c4a49;font-size: 14px;}
.waylink ol li:after {margin: 0 5px;display: inline-block;color: #4c4a49;content: "/";}
.waylink ol li:last-child {color: #4c4a49;}
.waylink ol li:last-child:after { content: ""; }

/* contentMain */
.contentMain { position: relative; }
.contentMain >article p{padding:0 20px;}
.contentMain article { color: #6D6D6D; margin-bottom: 45px; }

/* sideNav */
#sideNav ul.Cate {text-align: center;border-bottom: 1px solid #ddd;}
#sideNav #sideMenu {width: 90%;margin: 0 auto;margin-top: 28px;padding: 8px 20px;display: none;font-size: 18px;color: #fff;background: #323232;}
#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: 4vw;z-index: 2;}
.fixTop { position: fixed; width: 1420px; top: -15px; }
.fixTop.showheader { top: 50px; }
#sideNav>ul>li {position: relative;display: inline-block;margin: 0 15px;}
#sideNav>ul>li.action>h3 a, #sideNav>ul>li:hover>h3 a {color: #313030;}
#sideNav>ul>li>h3 { display: block; }
#sideNav>ul>li>h3 a {display: inline-flex;color: #cccbca;padding: 15px 0;font-family: "Lato", sans-serif;position: relative;justify-content: center;}
#sideNav>ul>li>h3 a:after{content:'';position: absolute;bottom: 0;height: 2px;width: 0;background: #282828;}
#sideNav>ul>li:hover>h3 a:after, #sideNav>ul>li.action>h3 a:after{width:100%;}
#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: #d7a297; 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: #f0d8d3; }
#sideNav>ul>li>ul.subUL li ul.sub2UL { background: #deb3aa; }

/* 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 #d7a297; }
#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: #d7a297; 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; }
#artlsit ul li .info .price font { color: #d7a297; font-size: 18px; }
#artlsit ul li .info .price .old font { text-decoration: line-through; }

/* productlsit */
#productlsit ul{display:grid;grid-template-columns: repeat(4, 1fr);}
#productlsit li {position: relative;padding: 0;-webkit-transition: all .5s ease;transition: all .5s ease;margin: 30px 15px 0;}
#productlsit li a{position:absolute;width: 100%;height: 100%;top: 0;left: 0;z-index: 2;}
#productlsit .item {position: relative;width: 100%;}
#productlsit .item .Img { position: relative; }
#productlsit .item .Img img{background-size: contain;background-repeat: no-repeat;background-position: 50% 50%;background-color: #f6f6f6;box-shadow: 8px -20px #323232;}
#productlsit li:hover .item .Img img{box-shadow:0 0 #72120e}
#productlsit .item .info {margin-top:20px;}
#productlsit li:hover .item .info{transform: translateY(24px);}
#productlsit .item .info h3 {text-align: center;color: #393838;font-size: 20px;font-weight: bold;-webkit-line-clamp: 1;height: auto;}
#productlsit li:hover .item .info h3{background:linear-gradient(90deg,#dd3831,#971a15);background-clip:text;-webkit-background-clip:text;color:transparent;font-style:unset;}
#productlsit .item .info article {text-align: center;color: #8b8a8a;font-weight: 500;-webkit-line-clamp: 1;font-family: "Lato", sans-serif;}
#productlsit li:hover .item .info article{transform: translateY(-60px);}

/* content */
#content .articlebar { margin: 13px 0 0px; }
#content .articlebar font {font-size: 14px;color: #9f9d9c;}
#content .articlebar font i{margin-right:10px;}
#content h1 {text-align: left;color: #6D6D6D;-webkit-line-clamp: 1;margin-bottom: 2vw;padding-bottom: 10px;}
#content #describe {overflow: hidden;}
#content #describe .contentbuilder *{box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}

/* describe */
#describe .about{padding-left:4vw}

/* faqList */
#faqList ul{margin-bottom:3vw}
#faqList li { margin-bottom: 10px; border-bottom: 1px solid #efeff0; }
#faqList li .title {position: relative;padding: 15px 65px 15px 25px;display: block;}
#faqList li .title font { color: #686868; }
#faqList li .title font b{font-family: "Lato", sans-serif;vertical-align: baseline;font-weight: 600;margin-right: 10px;}
#faqList li .title span {position: absolute;width: 17px;height: 17px;display: block;top: calc((100% - 30px) / 2);right: 25px;background: #323232;border-radius: 5px;padding: 2px 0px 3px 6px;}
#faqList li .title span:before, #faqList li .title span:after { width: 12px; height: 1px; background: #ffffff; display: block; content: ""; -webkit-transform: translateY(9px); transform: translateY(9px); }
#faqList li .title span:after { -webkit-transform: translateY(8px) rotate(90deg); transform: translateY(8px) rotate(90deg); }
#faqList li .info {padding: 25px 50px;background: #efeff0;color: #686868;font-size: 15px;line-height: 1.8;-webkit-transition: none;-moz-transition: none;-ms-transition: none;-o-transition: none;transition: none;}
#faqList li.current .title span:after { -webkit-transition-duration: .2s; transition-duration: .2s; -webkit-transform: translateY(8px) rotate(180deg); transform: translateY(180deg) rotate(0); }

/* page-control */
#page-control {padding: 14vh 0 0;width: 100%;}
#page-control a {position: absolute;bottom: 58px;font-size: 14px;color: #969696;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: 13px;vertical-align: top;}
#page-control a:hover {background: #e4e4e4;}

/* 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: #5a5a5a;vertical-align: middle;border: 1px solid #5a5a5a;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[class^="col"] { padding: 0; max-width: inherit; }
#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: 150px;display: inline-block;}
#form1 p.send {text-align: end;}
#form1 p.send:hover a{background:#333}
#form1 p.send a {color: #fff;background: #b0251f;padding: 5.5px 13px;display: inline-block;text-align: center;width: 30%;}

@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: #d7a2978c; }
	#artlsit ul li .info .cate a:hover, #artlsit ul li .info h3 a:hover { opacity: .6; }
}
@media screen and (max-width: 1280px) {
	#productlsit ul{grid-template-columns: repeat(3, 1fr);}
	.waylink{top:90px}
	#sbanner a{height:250px;}
	#sbanner{margin-top:85px;}
	.wrap {margin-top: 10vh;}
}
@media screen and (max-width: 980px) {
	#productlsit ul{grid-template-columns: repeat(2, 1fr);}
	.waylink{top: 60px;}
	#sbanner a{height: 180px;}
	#sideNav #sideMenu { display: block; }
	#sideNav>ul.open>li>h3 a {padding: 12px 0;border: none;color: #414141;width: 100%;}
	#sideNav>ul {position: relative;overflow: hidden;width: 95%;margin: 0 auto;height: 0;background: #ffffff;box-shadow: 0 7px 15px rgb(233 228 226 / 40%);opacity: 0;left: 0;}
	#sideNav>ul.open { height: auto; opacity: 1; z-index: 1; }
	#sideNav>ul>li {display: block;border-bottom: 0.5px solid #9696963b;}
	#sideNav>ul>li.action {background: rgb(237 237 237 / 20%);}
	#sideNav>ul>li>h3 a:hover { background: none; color: #d7a297; }
	#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: #d7a297; }
	#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: #d7a297; 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) {
	.bgTxt.title h3{font-size: 26px;}
	#productlsit li{margin: 10px 5px 0;}
	#productlsit .item .Img img{box-shadow:none}
	#productlsit .item .info article{font-size:13px;}
	#productlsit .item .info h3{font-size:18px;}
	.waylink{left: 5%;width: 90%;}
	.waylink ol{text-align:left;}
	#sbanner a{background-position: 80% 50%;}
	#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); }
}