@import url('/css/community.css');
.wow {animation-name: fadeInUp;-webkit-animation-name: fadeInUp;}

/* sbanner */
#sbanner {width: 100%;}
#sbanner a {position: relative;z-index: 1;width: 100%;}

/* wrap */
.wrap{position:relative;z-index:2;margin:auto}
.wrap h1 { line-height: 150%; }
.workframe{margin: 60px auto 60px;width: 1280px;}

/* waylink */
.waylink {display: inline-block;width: 100%;z-index: 3;}
.waylink ol {font-size: 0;text-align: center;background: #ffffff;padding: 8px 0;margin-bottom: 20px;}
.waylink ol li {display: inline-block;font-size: 14px;color: #999999;text-align: center;}
.waylink ol li a {color: #999999;font-size: 14px;font-weight: 200;line-height: 34px;letter-spacing: 1px;}
.waylink ol li:after {margin: 0 10px;display: inline-block;color: #999999;content: "/";}
.waylink ol li:last-child:after { content: ""; }

/* bgTxt */
.bgTxt {position: relative;z-index: 1;}
.bgTxt.title {text-align: center;font-family: 'Marcellus', serif;color: #f0b7a4;font-size: 44px;font-weight: 500;letter-spacing: 4px;line-height: 150%;}
.bgTxt.title h1 , .bgTxt.title h3 {color: #54595f;margin-top: -3px;}
.bgTxt.title h3 {text-align: center;line-height: 1.4;letter-spacing: 5px;text-shadow: 0 0px 10px rgba(0, 0, 0, 0.2);color: #4f4f4f;font-size: 23px;font-weight: 300;}
.bannerwrap{width: 100%;display: flex;justify-content: center;align-items: center;position: relative;}
.bannerwrap .bgTxt.title{color: #ffffff;margin-bottom: 0px;position: absolute;z-index: 1;width: 100%;top: 50%;left: 50%;transform: translateX(-50%);display: none;}
.bannerwrap .bgTxt.title h3{color:#ffffff}

/* contentMain */
.contentMain {position: relative;}
.contentMain article{color: #6D6D6D;}

/* sideNav */
#sideNav ul.Cate{text-align: center;padding: 0px 0 20px 0;}
#sideNav #sideMenu {width: auto;margin: 0 auto;margin-top: 28px;padding: 10px 20px 10px 20px;display: none;font-size: 18px;color: #787777;background: #e5e5e5;}
#sideNav #sideMenu font , #sideNav #sideMenu span {margin-right: 4px;display: inline-block;vertical-align: middle;}
#sideNav #sideMenu span i {margin: 2px 0;width: 2px;height: 2px;background: #787777;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;z-index: 2;margin-bottom: 20px;width: 100%;}
.fixTop { position: fixed; width: 1420px; top: -15px; }
.fixTop.showheader { top: 50px; }
#sideNav >ul >li {position: relative;display: inline-block;margin-bottom: 10px;margin-right: 10px;}
#sideNav >ul >li.action{}
#sideNav >ul >li >h3 {display: block;border-radius: 50px;}
#sideNav >ul >li >h3 a {font-weight: 400;display: block;padding: 10px;min-width: 110px;font-size: 16px;text-align: center;letter-spacing: 0.5px;color: #675448;background: #fff;border: solid 1px #ebebeb;border-radius: 50px;}
#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: #fcfcfc;opacity: 0;transform: translateY(30px);}
#sideNav >ul >li >ul.subUL li a {display: block;text-align: left;padding: 10px 20px;color: #909090;border-top: solid 1px #d7d7d770;}
#sideNav >ul >li >ul.subUL li ul.sub2UL {background: #ffffff;position: absolute;left: calc(100% - 0px);top: 0;width: 200px;z-index: 1;opacity: 0;transform: translateY(30px);left: 200px;-webkit-transform: translateY(0);-webkit-transform: translateX(30px);transform: translateY(0);transform: translateX(30px);box-shadow: 3px 3px 8px 4px rgb(219 219 219 / 30%);}
#sideNav >ul >li >ul.subUL li{position:relative;overflow:hidden;border-bottom:0}


/* artlsit */
#artlsit{position:relative;margin-bottom:12vh;margin-top:14vh;z-index:2;margin:0vh auto 3vh}
#artlsit ul{font-size:0}
#artlsit ul li{width:calc((100% / 4) - 25px);display:inline-block;overflow:hidden;margin:18px 10px}
#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 a.photo img{width:100%;height:360px;object-fit:cover;object-position:50% 15%;border-radius:80px 0 0px 0}
#artlsit ul li .img p.cate{position:absolute;top:0px;left:0;padding:10px 30px;text-align:center;background:#f0b7a4;color:#fff;display:none}
#artlsit ul li .info{padding:30px 0px 5px}
#artlsit ul li .info h3{height:35px;font-size:25px;color:#6D6D6D;-webkit-line-clamp:1}
#artlsit ul li .info h3{display:block;padding-bottom:18px;margin-bottom:18px;color:#0d0d0d;border-bottom:1px solid #d1d1d1;position:relative;font-weight:300;font-size:20px;line-height:34px;letter-spacing:3px}
#artlsit ul li .info h3::after{content:"";display:block;position:absolute;bottom:0;left:0;width:33px;height:2px;background:#3d7874}
#artlsit ul li .info article {height: 50px;font-size: 15px;color: #6D6D6D;-webkit-line-clamp: 2;margin: 18px 0 10px;}
#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: #f0b7a4;font-size: 18px;}
#artlsit ul li .info .price .old font { text-decoration: line-through;}
/* content */
#content .articlebar {margin: 13px 0 0px;margin: 0 0 20px;padding: 0 0 10px;border-bottom: 1px solid #e1e1e1;padding-bottom: 15px;}
#content .articlebar font{font-size: 14px;margin-bottom: 10px;color: #333;}
#content .articlebar font i{
    margin-right: 7px;
    color: #989898;
}
#content h1{text-align: left;-webkit-line-clamp: 1;font-weight: 400;font-size: 26px;color: #333;}
#content #describe{margin: 0 auto;width: 100%;}
#content h1.entry-title{color: #2d2d2d;font-size: 26px;line-height: 1.5;margin: initial;font-weight: 400;position: relative;}
#content .bottomitle{font-weight: 500;}
#content .bottomitle a{color: #f0b7a4;font-weight: 500;}

/* 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: #f0b7a4;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: #f0d8d3;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: 7vh 0 0;margin: 20px auto 0px;}
#page-control a {position: absolute;bottom: 58px;font-size: 14px;color: #f0b7a4;border: 1px solid #f0b7a4;padding: 5px 15px;vertical-align: middle;border-radius: 5px;display: flex;align-items: center;}
#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: #f0b7a4;color: #fff;}

/* pagenav */
#pagenav {margin: 20px 0 0;text-align: center;}
#pagenav a , #pagenav strong {width: 40px;height: 40px;display: inline-block;text-align: center;line-height: 37px;font-size: 14px;color: #54595f;vertical-align: middle;border: 0px solid #f0b7a4;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% - 30px);margin: 10px 0px 10px 20px;}
#form1 p.col-3 { width: calc((100% / 3) - 40px); }
#form1 p.col-4 { width: calc(25% - 40px); }
#form1 p.col.col-2.emailInfo{width: calc(100% - 40px);}
#form1 p label {display: block;margin-bottom: 0.6em;color: #4f4f4f;font-size: 17px;font-weight: 400;}
#form1 p label b { margin-left: 5px; color: #d7a297; }
#form1 p input , #form1 select , #form1 textarea {width: calc(100% - 50px);border: 1px #e2e2e2 solid;display: block;padding: 8px 25px;border-color: #e2e2e2;border-radius: 20px;color: #76707f;font-size: 15px;}
#form1 textarea{width: calc(100% - 50px);}
#form1 p select {padding: 10px 25px;width: calc(100% - 0px);}
#form1 p .check_list >span { display: flex; justify-content: center; align-items: baseline; }
#form1 p .check_list >span input { width: 30px; }
#form1 p .check_list >span span { width: 1%; flex: 1 1 auto; }
#form1 p input#Checknum { margin-right: 10px; width: 60px; display: inline-block; }
#form1 p.send {text-align: center;width: auto;display: flex;justify-content: center;}
#form1 p.send a{color: #fff;border: 1px solid #f0b7a4;background: #f0b7a4;padding: 0;display: flex;justify-content: center;align-items: center;padding: 15px 60px;width: 30%;}
.video-container{margin-bottom: 1.3em;font-size: 18px;color: #484848;}
.video-container{position:relative;padding-bottom:56.25%;padding-top:30px;height:0;overflow:hidden;}
.video-container iframe,.video-container object,.video-container embed{position:absolute;top:0;left:0;width:100%;height:100%;}


/* itemA07 */
.bottomBox {display: flex;justify-content: center;}
.bottomBox a {display: inline-block;width: 32%;height: 65px;font-weight: 400;line-height: 65px;letter-spacing: 0.5px;border: solid 1px #f0b7a4;background-color: #f0b7a4;text-align: center;color: #ffffff;border-radius: 45px;-webkit-transition: all 0.4s ease;transition: all 0.4s ease;}
.bottomBox a:hover {background-color: #ffffff;border: solid 1px #f0b7a4;color: #f0b7a4;-webkit-transform: translate(0, 3px);-ms-transform: translate(0, 3px);transform: translate(0, 3px);-webkit-box-shadow: 4px 3px 5px rgba(0, 0, 0, 0.1);box-shadow: 4px 3px 5px rgba(0, 0, 0, 0.1);}




@media screen and (max-width: 1560px) {

}
@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{border-radius:0}
	#artlsit ul li .info .cate a:hover , #artlsit ul li .info h3 a:hover { opacity: .6; }
	#sideNav >ul >li >h3 a:hover{background:#bfbfbf;color:#fff}
	#sideNav >ul >li:hover >ul.subUL{height:auto;opacity:1;transform:translateY(0);box-shadow:3px 3px 8px 4px rgb(219 219 219 / 30%)}
	#sideNav >ul >li >ul.subUL li a:hover{background:#bababa;color:#ffffff}
	#sideNav >ul >li >ul.subUL li:hover,#sideNav >ul >li >ul.subUL{overflow:visible}
	#sideNav >ul >li >ul.subUL li:hover ul.sub2UL{opacity:1;transform:translateX(0)}
}
@media screen and (max-width: 1280px) {
	.waylink{top:95px}
	.wrap{margin-top:3vh;margin-bottom:7vh;padding: 1rem 0 2rem 0;}
	.bgTxt.title{font-size:42px}
	.bgTxt.title h3{font-size:18px}
	.workframe,.wrap,#artlsit{margin:auto;width:90%}
	#artlsit{margin-top:4vh}
	#content #describe{padding:30px 0}
}
@media screen and (min-width: 981px) {	
	#sideNav >ul >li.action >h3 a, #sideNav >ul >li >h3 a:hover{color: #fff;border-color: #f0b7a4;background: #f0b7a4;}
}			
@media screen and (max-width: 980px) {
	#sideNav #sideMenu{display:flex;align-content:center;align-items:center;justify-content:space-between;margin-top: 0;}
	#sideNav >ul.open>li >h3 a{width:calc(100% - 40px);padding: 15px 20px;border:none;text-align:inherit}
	#sideNav >ul >li.action >h3 a{color:#d7a297;}
	#sideNav >ul{position:relative;overflow:hidden;width:100%;margin:0 auto;height:0;background:#ffffff;opacity:0;left:0;background-color:#fff;-webkit-box-shadow:0 5px 15px rgba(0,0,0,0.1);box-shadow:0 5px 15px rgba(0,0,0,0.1)}
	#sideNav >ul.open{height:auto;opacity:1;z-index:1}
	#sideNav >ul >li{display:block;border:0px solid #f0d8d33b;border-radius:5px;margin-bottom:0;margin-right:0}
	#sideNav >ul >li:not(:first-child){border-top:1px solid #e3e3e3;margin: 0;}
	#sideNav >ul >li.action{background:rgb(240 216 211 / 0.2);margin: 0;}
	#sideNav >ul >li >h3 a:hover{background:none;color:#f0b7a4}
	#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:none}
	#sideNav >ul >li >ul.subUL li .subULHead p{display:inline-block}
	#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}
	#content h1{font-size:22px}
	#sideNav ul.Cate{text-align:center;padding:0}
	#sideNav >ul >li >h3 a{display:inline-block;padding:5px 15px;color:#4f4f4f;letter-spacing:1px;background: #fff0;border: solid 0px #ebebeb;}

}
@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}
	.bgTxt.title h3{font-size: 32px;}
	#sbanner a{height: 17vh;}
	.bottomBox{display: flex;flex-direction: column;}
	.bottomBox a{width: 100%;margin-top: 12px;}

}
@media screen and (max-width: 640px) {
	#artlsit ul li{width:calc((100% / 1) - 0px);margin:10px auto 15px}
	#artlsit ul li .info article a{margin:12px 0 5px}
	#form1 p.col-4{width:calc(100% - 40px)}
	.bgTxt.title h3{font-size:23px}
	.wrap{padding: 0rem 0 2rem 0;}
	.waylink ol{margin-bottom:0px}
	.bannerwrap{height:auto;margin-top:0;padding-bottom:0px}
	.bgTxt.title{font-size:32px;letter-spacing:3px}
	.bgTxt.title h3{font-size:20px;font-weight:300;letter-spacing:5px}
}