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

/* sbanner */
.bannerBox {position: relative;display: block;display: none;}
#sbanner {position: relative;z-index: 1;}
#sbanner a {position: relative;z-index: 1;background-repeat: no-repeat;background-position: 30% 50%;background-size: cover;}
#sbanner a img{
    height: 500px;
}
#sbanner:after { position: absolute; width: 100%; height: 100%; background: #d5d5d500; display: block; top: 0; left: 0; z-index: 2; content: "" }
.bannerBox .Txt {width: 640px;height: 152px;position: absolute;bottom: 0;left: calc(50% - 320px);color: #fff;z-index: 10}
.bannerBox .Txt .leftBox { display: flex; flex-direction: column; align-items: center }
.bannerBox .Txt .leftBox .title { position: relative; font-size: 22px; font-weight: 400; font-family: 'Noto Serif TC', serif; letter-spacing: 2.5px; display: inline-block; text-align: center; color: #fff; }
.bannerBox .Txt .leftBox .title::before, .bannerBox .Txt .leftBox .title::after { content: ''; position: absolute; top: 50%; z-index: 2; width: 50px; height: 1px; margin-top: -1px; border-top: 1px solid rgb(255 255 255 / 0%); border-bottom: 1px solid rgb(255 255 255 / 0%); pointer-events: none }
.bannerBox .Txt .leftBox .title::before { left: -90px; height: 3px }
.bannerBox .Txt .leftBox .title::after { right: -90px }
.bannerBox .Txt .leftBox .entitle { font-family: 'Cormorant', serif; font-weight: 300; line-height: 140%; letter-spacing: 2.5px; text-transform: uppercase; font-style: inherit; opacity: 0.7; margin-bottom: 5px; color: #fff; }
.bannerBox .Txt .rightBox {margin-top: 10px;}
.bannerBox .Txt .rightBox .ensubtitle { text-align: center; color: #fff; }
header{background:#2a2728;}
header #cis ,header.headerfixed #cis{
    width: 180px;
}
/* wrap */
.wrap {position: relative;z-index: 2;padding: 60px 0 180px;}
.wrap:before{
	content:"";
	position: absolute;
	right: 0;
	height: 100%;
	width: 2.2%;
	background: #f3f3f3;
	top: 0;
	z-index: 0;
}
.wrap h1 { line-height: 150%; }
.wrap:after {
    content: "";
    position: absolute;
    width: 2px;
    height: calc(100% + 120px);
    background: rgb(221 221 221 / 57%);
    left: 6%;
    top: 0;
    z-index: 0;
}

/* waylink */
.waylink {position: relative;display: block;width: 100%;margin-top: 77px;background: #3f3f3f;}
.waylink:before{
	content:"";
	position: absolute;
	background: url(/images/46/footer_bg.jpg);
	width: 100%;
	height: 100%;
	top: 0;
	opacity: 0.5;
	left: 0;
	z-index: 0;
}
.waylink ol {font-size: 0;text-align: left;padding: 8px 0;width: 1400px;margin: 0 auto;}
.waylink ol li {position: relative;display: inline-block;color: #fff;font-size: 14px;z-index: 1;}
.waylink ol li a {color: #fff;font-size: 14px;}
.waylink ol li:after {margin: 0 5px;display: inline-block;color: #fff;content: "/";}
.waylink ol li:last-child:after { content: ""; }

/* contentMain */
.contentMain {position: relative;z-index: 1;}
.contentMain:before {
	z-index: 9;
	content: "";
	position: absolute;
	top: -60px;
	right: 0;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0px 70px 70px 0px;
	border-color: transparent transparent #e9e9e9 transparent;
	-moz-transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	-o-transform: rotate(180deg);
	-ms-transform: rotate(180deg);
	transform: rotate(180deg);
	opacity: 1;
}
.maJJtitle{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 50px;
}
.maJJtitle h2{
    font-size: max(2.6 * (1vw + 1vh) / 2, 34px);
    font-weight: 600;
    letter-spacing: 0.15em;
}
.poalst{
    margin-bottom: 30px;
}
.maJJtitle h2::first-letter {
    color: #ebb612;
}
.maJJtitle:before {
    content: "";
    position: absolute;
    width: 50px;
    height: 2px;
    background: #ebb612;
    bottom: 0;
}

/* 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: #fff;background: #47453f;}
#sideNav #sideMenu font, #sideNav #sideMenu span {margin-right: 15px;display: inline-block;vertical-align: middle;color: white;}
#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: 12;/* display: none; */}
.fixTop { position: fixed; width: 1420px; top: -15px; }
.fixTop.showheader { top: 50px; }
#sideNav>ul>li {position: relative;display: inline-block;margin-bottom: 10px;}
#sideNav>ul>li:hover{
	    overflow: visible;
}
#sideNav>ul>li.action { background: #bdad84; }
#sideNav>ul>li.action>h3 a {color: #fff;background: #353535;}
#sideNav>ul>li>h3 { display: block; }
#sideNav>ul>li>h3 a {display: inline-block;color: #353535;border: 1px solid #353535;padding: 5px 15px;}
#sideNav>ul>li>h3 a:hover {background: #353535;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: #bdad84; opacity: 0; }
#sideNav>ul>li:hover>ul.subUL, #sideNav>ul>li>ul.subUL:hover {height: auto;opacity: 1;z-index: 6;}
#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: #d7ceb7 }
#sideNav>ul>li>ul.subUL li ul.sub2UL { background: #b6ac91; }

/* artlsit */
#artlsit ul {font-size: 0;display: flex;flex-wrap: wrap;}
#artlsit ul li {width: calc((100% / 4) - 0px);overflow: hidden;padding: 0 20px;display: flex;flex-direction: column;}
#artlsit ul li .img {position: relative;border-radius: 0;overflow: hidden;box-shadow: 12px 10px #2a2728;transition: all linear 0.3s;border: #bfbfbf 1px solid;}
#artlsit ul li .img a{
    background-size: contain;
}
#artlsit ul li:hover .img{box-shadow: 0 0 #2a2728;}
#artlsit ul li .img img{width:100%;}
#artlsit ul li .img a.photo #artlsit ul li .img p.cate { position: absolute; top: 0px; left: 0; padding: 10px 30px; text-align: center; background: #bdad84; color: #fff; display: none; }
#artlsit ul li .info {padding: 19px 0 10px;}
#artlsit ul li .info h3 a{height: auto;font-size: max(1.1 * (1vw + 1vh) / 2, 16px);color: #373737;-webkit-line-clamp: 1;text-align: center;font-weight: 500;}
#artlsit ul li .info article { height: 43px; font-size: 14px; color: #ada9a0; -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: #8a877f; 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: #bdad84; font-size: 18px; }
#artlsit ul li .info .price .old font { text-decoration: line-through; }

/* content */
#content .articlebar { margin: 8px 0 4px; }
#content .articlebar font {font-size: 14px;color: #323232;}
#content .articlebar font i { margin-right: 6px; }
#content h1 {text-align: left;border-bottom: 1px solid #d6d6d6;-webkit-line-clamp: 1;margin-bottom: 2vw;font-size: 22px;color: #554f3e;padding-bottom: 7px;font-weight: 400;}
#content #describe {width: 100%;margin: 0 auto;font-weight: 400;}
#content #describe table{margin:15px 0;width:100%;border-collapse:collapse}
#content #describe td, #content #describe th{padding:10px;border:1px solid #a2a9b1;}
#content #describe td p{text-align:center;}

/* 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: #8a877f; }
#faqList li .title span { position: absolute; width: 17px; height: 17px; display: block; top: calc((100% - 30px) / 2); right: 25px; background: #bdad84; 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: #8a877f; 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: #5b5b5b;border: 1px solid #5b5b5b;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: #8a877f;font-size: 12px;vertical-align: top;overflow: hidden;margin: 10px 0;height: 22px;text-align: left;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;width: 150px;}
#page-control a:hover {background: #5b5b5b;color: #fff;}
#page-control a:hover font{
    color: white;
}
/* pagenav */
#pagenav { margin: 50px 0 0; text-align: center; }
#pagenav a, #pagenav strong { width: 30px; height: 30px; display: inline-block; text-align: center; line-height: 37px; font-size: 15px; color: #8a877f; vertical-align: middle; margin-left: 10px; font-family: 'Noto Serif TC', serif; }
#pagenav a { opacity: .5; }

/* form1 */
#form1 { font-size: 0; }
#form1 p {margin: 10px 0;width: 100%;display: inline-block;vertical-align: text-bottom;}
#form1 p.send_box{text-align:center;}
#form1 p a{display:inline-block;background: #ca2423;padding: 10px 40px;color: #fff;}
#form1 p.col-2 { width: calc(50% - 40px); }
#form1 p.col.col-2.addressInfo { width: calc(100% - 40px) }
#form1 p.col.col-2.addressInfo font { display: flex }
#form1 p #PayAddress1, #form1 p #PayAddress2, #form1 p #PayAddress3 { width: 15%; margin-right: 10px }
#form1 p #PayAddress3 { width: 70% }
#form1 p #PayAddress3 { margin-right: 0px; }
#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: #333;font-weight: 400;}
#form1 p label b { margin-left: 5px; color: #bdad84; }
#form1 p input, #form1 select, #form1 textarea { padding: 10px 15px; width: calc(100% - 34px); border: 1px #e4e4e4 solid; display: block; }
#form1 p select { background: url(/images/46/arrow2.png) no-repeat scroll 100% center; background-repeat: no-repeat; background-position: 98% 50%; min-height: 50px; border: 1px solid #ececec; }
#form1 p select { padding: 10px 15px; width: 100%; font-weight: 300; font-size: 16px; }
#form1 p input#Checknum {margin-right: 10px;width: 160px;display: inline-block;}
#form1 p.send { text-align: center; width: 12%; border: 1px solid #bdad84; background: #bdad84; padding: 5px 13px; }
#form1 p.send1 { text-align: center; border: 1px solid #bdad84; background: #bdad84; padding: 5px 13px; margin: 0 auto; display: flex; justify-content: center; align-items: center; }
#form1 p.send a font, #form1 p.send1 a font { color: #fff; }

@media screen and (min-width: 1281px) {
	#artlsit ul li .info .cate a:hover, #artlsit ul li .info h3 a:hover { opacity: .6; }
}
@media screen and (max-width: 1470px) {
	.waylink ol{width:90%;}
	.wrap:after{
    left: 3%;
}
}
@media screen and (max-width: 1280px) {
	.waylink{margin-top: 73px;}
	#sbanner a{background-position: 20% 50%;}
	.wrap:after{display:none;}
}
@media screen and (max-width: 980px) {
	.wrap:before{display:none;}
	#sideNav #sideMenu {display: block;margin-bottom: 30px;width: calc(100% - 40px);}
	#sideNav>ul.open>li>h3 a ,#sideNav>ul>li>h3 a {width: 65%;padding: 12px 12px 12px 50px;border: none;color: #3d3c3a;background: unset;}
	#sideNav>ul {position: absolute;overflow: hidden;width: 99%;margin: 0 auto;background: #fff;box-shadow: 0px 7px 10px 1px #bdad842e;opacity: 0;-webkit-transition: all .1s ease-out;-moz-transition: all .1s ease-out;-ms-transition: all .1s ease-out;-o-transition: all .1s ease-out;transition: all .1s ease-out;display: none;}
	#sideNav>ul.open {opacity: 1;z-index: 3;transform: translateY(-29px);display: block;}
	#sideNav>ul>li {display: block;border-bottom: 0.5px solid #f0d8d33b;}
	#sideNav>ul>li.action { background: rgb(240 216 211 / 0.2); }
	#sideNav>ul>li>h3 a:hover { background: none; color: #bdad84; }
	#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: #bdad84; }
	#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: #bdad84; 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% / 3) - 0px);}
	#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; }
	#form1 p #PayAddress1, #form1 p #PayAddress2, #form1 p #PayAddress3 { width: 100%; }
}
@media screen and (max-width: 765px) {
	#content #describe table{display:block;overflow-x:auto;white-space:nowrap}
	#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 {position: relative;height: 25vh;z-index: 1;}
}
@media screen and (max-width: 640px) {
	.contentMain:before{display:none;}
	.wrap{padding:40px 0;}
	#artlsit ul li {width: calc((100% / 2) - 0px);margin: 0 auto;margin-bottom: 6vh;}
	#artlsit ul li .info article a { margin: 12px 0 5px; }
	#form1 p.col-4 { width: calc(100% - 40px); }
	.bannerBox .Txt { width: 300px; left: calc(50% - 150px); top: 70px }
	.bannerBox .Txt .rightBox { margin-top: 10px }
	.bannerBox .Txt .rightBox .ensubtitle { font-size: 14px }
	#form1 p.col.col-2.addressInfo font { display: flex; flex-wrap: wrap }
	#form1 p #PayAddress1, #form1 p #PayAddress2, #form1 p #PayAddress3 { margin: 5px 0 }
	.maJJtitle{
    margin-bottom: 30px;
}
}