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

/* sbanner */
#sbanner {position: relative;top: 0px;z-index: 1;}
#sbanner a {position: relative;height: 68vh;z-index: 1;}
#sbanner:after {position: absolute;width: 100%;height: 100%;background: rgb(7 7 7 / 50%);display: block;top: 0;left: 0;z-index: 2;content: "";}

/* bgTxt */

/* wrap */
.wrap  {position: relative;margin-top: -120px;margin-bottom: 12vh;z-index: 2;}
.wrap h1 { line-height: 150%; }
#article_list{
    position: relative;
    margin-top: 0px;
    margin-bottom: 15vh;
    z-index: 2;
    width: 100%;
}
#article_list .catBox{padding-bottom: 0;}
#article_list .bgTxt.title{
}

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

/* contentMain */
.contentMain {position: relative;}
.contentMain article{color: #e3e3e3;}

/* sideNav */
#sideNav ul.Cate{text-align: center;}
#sideNav #sideMenu {width: 90%;margin: 0 auto;margin-top: 28px;padding: 8px 20px;display: none;font-size: 18px;color: #bfa161;border: 1px solid #ba9546a6;}
#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: #bfa161;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: 18vh;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: #9b844e;}
#sideNav >ul >li.action >h3 a{ color: #fff; }
#sideNav >ul >li >h3 {display: block;}
#sideNav >ul >li >h3 a {display: inline-block;color: #fff;border: 1px solid rgb(225 225 225 / 28%);padding: 5px 0;width: 148px;text-align: center;}
#sideNav >ul >li >h3 a:hover{background: #b99541;color: #fff;}
#sideNav >ul >li b[data-action="sideOpen"] { display: none; }
#sideNav >ul >li >ul.subUL {overflow: hidden;position: absolute;left: 0;width: 150px;height: 0;background: #9b844e;opacity: 0;}
#sideNav >ul >li:hover >ul.subUL { height: auto; opacity: 1; }
#sideNav >ul >li >ul.subUL li a {display: block;text-align: center;padding: 10px 20px;color: #fff;}
#sideNav >ul >li >ul.subUL li a:hover {background: #83724c;color: #d7d7d7;}
#sideNav >ul >li >ul.subUL li ul.sub2UL {background: #83724c;}
#sideNav >ul >li >ul.subUL li ul.sub2UL{
    display: none;
}

/* 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 #d8d8d8;}
#artlsit ul li .img {position: relative;overflow: hidden;}
#artlsit ul li .img p.cate{position: absolute;top: 0px;left: 0;padding: 10px 30px;text-align: center;background: #545454;color: #ffffff;display: none;}
#artlsit ul li .info {padding: 20px 50px 5px;}
#artlsit ul li .info h3 {height: 35px;font-size: 25px;color: #6D6D6D;-webkit-line-clamp: 1;text-align: center;}
#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;}
#artlsit  p.more {text-align: center;}

/* NewsBox */
#NewsBox {
    margin: 0px 0  0;
}

/* content */
#content .articlebar {margin: 13px 0 0px;}
#content .articlebar font{font-size: 15px;color: #e3e3e3;font-family: 'Noto Sans TC', 'Noto Sans TC', serif;}
#content h1{padding-bottom: 10px;font-size: 23px;text-align: left;border-bottom: 1px solid rgb(182 153 91 / 48%);color: #b6995b;-webkit-line-clamp: 1;margin-bottom: 2vw;font-weight: 500;}
#content #describe{width: 100%;margin: 0px auto 10px;}
#describe img{width: 40%;}
#describe .photoBox,.tit .textEditor,.articleInfo13bg,#describe #articleInfo20 div.tit h4,#describe,#describe p {text-align: center;}

@media screen and (max-width:786px) {
	#describe img{
		width: 100%;
	}
}
/* faqList */
#faqList{margin: 20px 0 0;}
#faqList li {margin-bottom: 10px;border-bottom: 1px solid rgb(239 239 240 / 23%);}
#faqList li .title {position: relative;padding: 5px 65px 15px 25px;display: block;}
#faqList li .title font {color: #b99541;font-weight: 500;font-size: 18px;}
#faqList li .title font:before {
    content: "";
    position: absolute;
    top: calc(50% - 13px);
    left: 0px;
    width: 5px;
    height: 18px;
    background-color: #b99541;
}
#faqList li .title span {position: absolute;width: 17px;height: 17px;display: block;top: calc((100% - 30px) / 2);right: 25px;background: rgb(229 229 229 / 17%);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: #1d1d1d;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;}
#page-control a {position: absolute;bottom: 58px;font-size: 14px;color: #d3d3d3;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: #adadad;font-size: 12px;vertical-align: initial;}
#page-control a:hover {background: rgb(141 141 141 / 41%);color: #fff;}
#page-control a:hover font{color: #fff;}
/* pagenav */
#pagenav {margin: 60px 0 0;text-align: center;}
#pagenav a , #pagenav strong {width: 30px;height: 30px;display: inline-block;text-align: center;line-height: 26px;font-size: 18px;color: #898989;vertical-align: middle;border: 1px solid #6e6e6e;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: #a24242; }
#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: 110px;display: inline-block;}
#form1 p.send {text-align: center;width: 12%;border: 1px solid #a24242;background: #a24242;padding: 5px 13px;cursor: pointer;}
#form1 p.send a{ color: #fff; }

/* community */
#community{margin:50px 0;display: none;}
#community li{float:left;line-height:0;margin: 5px;}

@media screen and (max-width: 1440px) {
	.wrap  {width: 85%;}

}

@media screen and (min-width: 1281px) {
	#artlsit ul li:hover .img a.photo {
    -webkit-transform: scale(0.8,1.8);
    -moz-transform: scale(1.3);
    -ms-transform: scale(1.3);
    -o-transform: scale(1.3);
    transform: scale(1.1);
}
	#artlsit ul li .info .cate a:hover , #artlsit ul li .info h3 a:hover { opacity: .6; }
#sideNav .bgTxt {position: relative;z-index: 1;}
#sideNav .bgTxt.title {display: inline-block;width: 100%;text-align: center;font-size: 44px;color: #b99541;letter-spacing: .05em;font-weight: 400;text-transform: uppercase;padding: 0 0 3vw;font-family: Times New Roman;line-height: 120%;position: absolute;top: -200px;}
#sideNav .bgTxt.title h3{font-size: 20px;color: rgb(255 255 255);text-align: center;margin-top: -3px;letter-spacing: 6px;}
}
@media screen and (max-width: 1280px) {
	.waylink {top: 165px;}
	#sbanner{top: 80px;}
	.wrap {margin-top: -200px;}
	#sbanner a{height: 44vh;}
#sideNav .bgTxt {position: relative;z-index: 1;}
#article_list .bgTxt.title{
}
#sideNav .bgTxt.title {display: inline-block;width: 100%;text-align: center;font-size: 36px;letter-spacing: .05em;font-weight: 400;text-transform: uppercase;padding: 0 0 7vw;}
#sideNav .bgTxt.title h3{font-size: 18px;font-weight: 500;color: rgb(255 255 255 / 80%);text-align: center;margin-top: -3px;letter-spacing: 7px;}
#article_list {
    margin-top: -110px;
}
}
@media screen and (max-width: 980px) {
	#sideNav #sideMenu {display: block;width: calc(100% - 40px);}
	#sideNav >ul.open>li >h3 a{width: 100%;padding: 12px 0;border: none;color: #ffffff;}
	#sideNav >ul {position: relative;overflow: hidden;width: 95%;margin: 0 auto;height: 0;background: rgb(38 38 38 / 68%);box-shadow: 0 7px 15px rgb(70 70 70 / 50%);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 rgb(154 154 154 / 23%);}
	#sideNav >ul >li.action{background: rgb(0 0 0 / 20%);}
	#sideNav >ul >li >h3 a:hover{background: none;color: #d7b56e;}
	#sideNav >ul >li >ul.subUL {position: relative;width: 100%;left: 0px;padding: 0vh 0 0vh;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: center;color: #ffffff;}
	#sideNav >ul >li >ul.subUL li .subULHead p {display: block;}
	#sideNav >ul >li b[data-action="sideOpen"] {padding: 9px 30px 9px 0;color: #949494;float: right;position: absolute;right: 0px;cursor: pointer;padding-left: calc(100% - 40px);display: inline-block;/* -webkit-transform: translateY(-46px); */-ms-transform: translateY(-46px);/* transform: translateY(-46px); */}
	#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; }
#pagenav a , #pagenav strong {width: 30px;height: 30px;line-height: 24px;font-size: 17px;}
	.wrap {margin-top: -60px;}
.catBox {padding-bottom: 5vh;}
#NewsBox {
    margin: 50px 0  0;
}

}
@media screen and (max-width: 768px) {
    #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}
    #sbanner a{height: 35vh;}
	#content .articlebar{margin: 4px 0 0px;}
	#content .articlebar font{font-size: 16px;}
	#content h1{font-size: 20px;padding-bottom: 10px;}
	#page-control{padding: 9vh 0 0;width: 100%;}
	#community{margin: 10px 0;}
	#faqList li .title font{font-size: 15px;line-height: 150%;}
	#faqList li .title span {right: 0px;}
	#article_list{
    margin-bottom: 4vh;
    margin-top: -40px;
}
}
@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); }
	#sbanner{top: 70px;}
	.waylink{top: 85px;padding: 0 18px;width: 90%;margin: auto;}
	.wrap {margin-top: -40px;margin-bottom: 4vh;}
#sideNav .bgTxt.title {font-size: 25px;padding: 0 0 20px;}
#sideNav #sideMenu{
    margin-top: 70px;
}
	.catBox {padding-bottom: 3vh;}
	.waylink ol li {font-size: 12px;}
}