@import url('/css/community.css'); 
/* sbanner */
#sbanner { position: relative; top: 185px; z-index: 1; }
#sbanner a {position: relative;height: 320px;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: 30vh;margin-bottom: 0vh;z-index: 2;}
.wrap .right_Jbox h1 {line-height: 150%;position: relative;font-size: 1.5rem;padding-bottom: 15px;margin-bottom: 20px;border-bottom: #d8d8d8 1px solid;}
.workframe{width:min(1400px , 90%)}

.wrap * {box-sizing: border-box;-moz-box-sizing: border-box;-webkit-box-sizing: border-box;}


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

/* contentMain */
.contentMain {position: relative;display: grid;grid-template-columns: 27% 70%;gap: 3%;}
.contentMain article { color: #6D6D6D; margin-bottom: 45px; }
.contentMain.contenta_box{display:flex;flex-direction: column;align-items: center;}
.contentMain.contenta_box .catBox{width:100%;}
.contentMain.contenta_box .catBox .bgTxt.title{text-align:center;}
/* sideNav */
#sideNav ul.Cate {text-align: center;display: flex;flex-direction: column;}
#sideNav #sideMenu {width: 90%;margin: 0 auto;margin-top: 28px;padding: 8px 20px;display: none;font-size: 18px;color: #fff;background: #ce9c56;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; }
.catBox .bgTxt.title{font-size: 2rem;text-align: left;padding: 20px 50px;background: #ededed;margin-bottom: 15px;}
.catBox .bgTxt.title .h3{text-align: left;}

.catBox .bgTxt.title:before{content: '';width: 0;height: 0;border-style: solid;border-width: 0 0px 2vw 2vw;border-color: transparent transparent #ffffff;position: absolute;transform: rotate(180deg);z-index: 9;top: 0;left: 0;}
.catBox .bgTxt.title:after{content: '';width: 0;height: 0;border-style: solid;border-width: 0 0px 2vw 2vw;border-color: transparent transparent #ffffff;position: absolute;z-index: 9;bottom: 0;right: 0;}



.fixTop { position: fixed; width: 1420px; top: -15px; }
.fixTop.showheader { top: 50px; }
#sideNav>ul>li {position: relative;display: flex;flex-direction: column;}

#sideNav>ul>li>.h3 {display: flex;width: 100%;flex-direction: column;}
#sideNav>ul>li>.h3 a {display: inline-block;color: #212121;padding: 10px 15px;font-size: 20px;}
#sideNav>ul>li>.h3 a:hover {}
#sideNav>ul>li b[data-action="sideOpen"] { display: none; }
#sideNav>ul>li>ul.subUL {overflow: hidden;position: relative;width: 100%;background: #ffffff;opacity: 1;}
#sideNav>ul>li:hover>ul.subUL { height: auto; opacity: 1; }
#sideNav>ul>li>ul.subUL li a {display: flex;text-align: left;padding: 5px 20px 5px 30px;color: #595959;align-items: center;gap: 8px;}
#sideNav>ul>li>ul.subUL li a:before{content:"";position: relative;display: flex;width: 20px;height: 1px;background: #767676;}
#sideNav>ul>li>ul.subUL li a:hover , #sideNav>ul>li>ul.subUL li.action a{color: #ddad69;}
#sideNav>ul>li>ul.subUL li ul.sub2UL { background: #deb3aa; }
#sideNav>ul>li>ul.subUL li a:hover:before , #sideNav>ul>li>ul.subUL li.action a:before{background: #ddad69;}

/* artlsit */
#artlsit ul {font-size: 0;text-align: center;display: grid;grid-template-columns: repeat(3,1fr);gap: 10px;}
#artlsit ul li {width: 100%;display: inline-block;overflow: hidden;margin: 0;border: 1px solid #ddad69;}
#artlsit ul li .img {position: relative;overflow: hidden;}
#artlsit ul li .img a.photo {-webkit-transform: translate(0) scale(1);transform: translate(0) scale(1);display: flex;flex-direction: column;align-items: center;}
#artlsit ul li .img p.cate {position: absolute;top: 0px;left: 0;padding: 10px 30px;text-align: center;background: #ddad69;color: #fff;}
#artlsit ul li .info {padding: 20px 13px 5px;}
#artlsit ul li .info .h3 {height: 35px;font-size: 23px;color: #6D6D6D;-webkit-line-clamp: 1;font-weight: 600;}
#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; }

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

/* faqList */
#faqList li { margin-bottom: 10px; border-bottom: 1px solid #efeff0; }
#faqList li .title { position: relative; padding: 5px 65px 15px 25px; display: block; }
#faqList li .title font { color: #686868; }
#faqList li .title span { position: absolute; width: 17px; height: 17px; display: block; top: calc((100% - 30px) / 2); right: 25px; background: #d7a297; 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 20px; background: #efeff0; color: #686868; font-size: 14px; 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; }
#page-control a { position: absolute; bottom: 58px; font-size: 14px; color: #d7a297; border: 1px solid #d7a297; 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: #f0d8d3; color: #fff; }

/* pagenav */
#pagenav {margin: 30px 0 0;text-align: center;display: flex;flex-wrap: wrap;gap: 10px;}
#pagenav a, #pagenav strong {width: 40px;height: 40px;display: inline-block;text-align: center;line-height: 37px;font-size: 18px;color: #ddad69;vertical-align: middle;border: 1px solid #ddad69;margin-left: 0;}
#pagenav a { opacity: .5; }
#pagenav a:hover{background: #ce9c56;color: white;}

/* form1 */
#form1 {font-size: 0;display: grid;grid-template-columns: repeat(2,1fr);width: min(1280px , 100%);}
#form1 div {margin: 10px 20px;width: calc(100% - 40px);display: flex;vertical-align: text-bottom;flex-direction: column;}
#form1 div[class^="col"] {padding: 0;max-width: inherit;}
#form1 div.col-2 {width: 100%;height: 100%;}
#form1 div.checkimg{
    display: flex;
    flex-direction: row;
    align-items: center;
}
#form1 div.col-3 { width: calc((100% / 3) - 40px); }
#form1 div.col-4 { width: calc(25% - 40px); }
#form1 div label {margin-bottom: 5px;display: block;color: #6d6d6d;font-size: 15px;}
#form1 div label.mootitlre{
    font-size: 20px;
    font-weight: 500;
}
#form1 div label b { margin-left: 5px; color: #ff575f; }
#form1 div input, #form1 select, #form1 textarea {padding: 5px 15px;width: calc(100% - 34px);border: 1px #e4e4e4 solid;display: flex;}
#form1 div select { padding: 10px 15px; width: 100%; }
#form1 div input#Checknum {margin-right: 10px;width: 150px;display: inline-block;}
#form1 div.send {text-align: center;width: min(200px , 100%);padding: 5px 13px;display: flex;flex-direction: column;justify-content: center;}
#form1 div.send a {color: #fff;border: 1px solid #d7a297;background: #d7a297;padding: 20px;display: flex;flex-direction: column;align-items: center;}
#form1 .input-box{display: grid;gap: 10px;grid-template-columns: repeat(2,1fr);width: 100%;}
#form1 .input-box label{display:flex;gap: 10px;align-items: center;}
#form1 .input-box label input{width: 10px;aspect-ratio: 1/1;}
#form1 .input-box label input#other{aspect-ratio: auto;border: unset;border-bottom: 1px #e4e4e4 solid;width: 50%;font-size: 13px;}

/*footer*/
footer{background: #f8f8f8;padding: 60px 0 5px;margin-top: 60px;}
@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(221 173 105 / 31%);}
	#artlsit ul li .info .cate a:hover, #artlsit ul li .info .h3 a:hover { opacity: .6; }
}
@media screen and (max-width: 1280px) {
	.waylink { top: 95px; }
	#sbanner { top: 16vh; }
	.wrap { margin-top: 20vh; }
	.contentMain{display: grid;grid-template-columns: 32% 65%;}
	#artlsit ul{
    grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 980px) {
	.contentMain{display:flex;flex-direction: column;}
	.catBox .bgTxt.title{font-size: 1.5rem;}
	.catBox .bgTxt.title , .catBox .bgTxt.title .h3{text-align:center;}
	#sideNav #sideMenu {display: block;width: 100%;padding: 10px 5%;}
	#sideNav>ul.open>li>.h3 a {width: 65%;padding: 12px 12px 12px 50px;border: none;color: #565656;}
	#sideNav>ul {position: relative;overflow: hidden;width: 95%;margin: 0 auto;height: 0;background: #ffffff;box-shadow: 0 7px 15px #e3e3e370;opacity: 0;left: 0;}
	#sideNav>ul.open {height: auto;opacity: 1;z-index: 1;width: 100%;}
	#sideNav>ul>li {display: block;border: 0.5px solid #f0d8d33b;border-radius: 5px;}
	#sideNav>ul>li.action {background: rgb(231 231 231 / 20%);}
	#sideNav>ul>li>.h3 a:hover {background: none;color: #565656;}
	#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;display: block;}
	#sideNav>ul>li>ul.subUL li a {text-align: left;color: #565656;}
	#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: #ce9c56;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; }
	#sideNav>ul>li>.h3{display: flex;flex-direction: row;justify-content: space-between;}
	
	#artlsit ul li {width: 100%;}
	#form1 div.col-2, #form1 div.col-3 {width: calc(100% - 0px);flex: 1;padding: 0;margin: 7px 0;}
	#form1 .input-box label{font-size: 13px;}
	#form1 div input, #form1 select, #form1 textarea{width:100%;}
	#form1 .col{width: calc(100% - 40px);min-height: unset;}
	#form1 textarea{display:flex;padding: 56px 0;position: relative;}
	#form1 div.col-4 { width: calc(50% - 40px); }
	#form1 div.send { text-align: center; }
	#form1{display:flex;flex-direction: column;}
}
@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 div.col-4 { width: calc(100% - 40px); }
	#form1 div{margin: 10px 0;}
	#sbanner a{height: 200px;}
	#artlsit ul li .info .h3{font-size: 16px;height: 30px;}
}