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

/* sbanner */
.bannerBox { position: relative; display: block; margin-top: 70px; }
#sbanner { position: relative; z-index: 1; margin-top: 78px; }
#sbanner a {position: relative;height: 100%;z-index: 1;}
#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; }
#sbanner a img{width: 100%;aspect-ratio: 192/40;}

/* wrap */
.wrap {position: relative;z-index: 2;padding: 0px 0 80px;margin-top: 0;}
.wrap h1 { line-height: 150%; }

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

/* contentMain */
.contentMain { position: relative; }
.contentMain article { color: #8a877f; margin-bottom: 15px; margin-top: 30px; text-align: center; }
.contentMain hr {border-width: 1px;border-color: #c4c4c4;margin-top: 1rem;margin-bottom: 1.5rem;}
/* sideNav */
#sideNav ul.Cate {text-align: center;display: none;}
#sideNav #sideMenu { width: 90%; margin: 0 auto; margin-top: 28px; padding: 8px 20px; display: none; font-size: 18px; color: #fff; background: #bdad84; border-radius: 7px; }
#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: 1vh;z-index: 12;}
.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: #bdad84; }
#sideNav>ul>li>h3 { display: block; }
#sideNav>ul>li>h3 a { display: inline-block; color: #bdad84; border: 1px solid #bdad84; padding: 5px 15px; background: #fff8f0; }
#sideNav>ul>li>h3 a:hover { background: #bdad84; 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: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;}
#artlsit ul li {width: 100%;display: inline-block;overflow: hidden;border: 1px rgb(189 173 132 / 15%) solid;}
#artlsit ul li .img {position: relative;overflow: hidden;}
#artlsit ul li .img img{
    aspect-ratio: 7/6;
}
#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: #bdad84; color: #fff; display: none; }
#artlsit ul li .info {padding: 20px 30px 10px;}
#artlsit ul li .info .h3 {height: 35px;font-size: 24px;color: #333333;-webkit-line-clamp: 1;}
#artlsit ul li .info article {height: 43px;font-size: 14px;color: #717171;-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: #bdad84; }
#content .articlebar font i { margin-right: 6px; }
#content h1 {text-align: left;border-bottom: 1px solid #d6d6d6;-webkit-line-clamp: 1;margin-bottom: 1vw;font-size: 22px;font-family: 'Noto Serif TC', serif;color: #8a877f;padding-bottom: 7px;font-weight: 400;}
#content #describe { width: 100%; margin: 0 auto; }

/* 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: #bdad84; border: 1px solid #bdad84; 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: #cbc2ab; 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: 5px 0;width: calc(100% - 0px);display: inline-block;vertical-align: text-bottom;}
#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: #333333;}
#form1 p label b { margin-left: 5px; color: #bdad84; }
#form1 p input, #form1 select, #form1 textarea {padding: 10px 15px;width: calc(100% - 0px);border: 1.8px solid #a8a8a8;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: 85px;display: inline-block;margin: 0;padding: 0;}
#form1 p.send_box {text-align: center;width: 100%;padding: 5px 13px;}
#form1 p.send_box a {text-align: center;padding: 5px 13px;margin: 0 auto;display: flex;justify-content: center;align-items: center;width: 250px;border: 1px solid #4173ba;background: #4173ba;}
#form1 p.send_box a font, #form1 p.send_box a font { color: #fff; }
#form1 p.send_box a:hover{background: #94b0d8;}

.page_form .custom-select{position:relative;user-select:none;margin: 20px 0;background: unset;width: 100%;height: 100%;padding: 0 0;border: unset;display: flex;}
.page_form .select-selected{background-color:#fff;border: 1.8px solid #a8a8a8;border-radius: 7px;font-size:16px;color:#333;cursor:pointer;display:flex;justify-content:space-between;align-items:center;width: 100%;padding: 25px 20px;}
.page_form .select-selected:after{content:"";border:6px solid transparent;border-color: #151515 transparent transparent transparent;position:absolute;right:15px;pointer-events:none;transition:transform 0.3s ease}
.page_form .custom-select.open .select-selected:after{transform:translateY(-50%) rotate(180deg)}
.page_form .select-items{position:absolute;background-color:#fff;border: 1.8px solid #919191;border-top:none;z-index:99;top:100%;left:0;right:0;border-radius:0 0 8px 8px;max-height:220px;overflow-y:auto;box-shadow:0 6px 12px rgba(0,0,0,0.15);display:none}
.page_form .custom-select.open .select-items{display:block}
.page_form .select-items div{padding:12px 15px;font-size:16px;cursor:pointer;transition:background-color 0.2s ease}
.page_form .select-items div:hover{background-color: #4173ba;color:#fff;border-radius:6px;border-radius: 0;}
.page_form input[type="text"], input[type="email"], input[type="tel"] , #form1 textarea{width:100%;padding:12px 15px;margin-bottom:18px;border: 1.8px solid #a8a8a8;border-radius:8px;font-size:16px;box-sizing:border-box;outline-color: #a8a8a8;transition:box-shadow 0.3s ease}
.page_form input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus{box-shadow:0 0 8px rgb(116 116 116 / 50%)}

.page_form button:hover:not(:disabled){background-color:#474747}
.page_form .custom-select:focus{box-shadow: 0 0 8px 0.1rem rgb(71 71 71 / 14%);}


@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 .info .cate a:hover, #artlsit ul li .info .h3 a:hover { opacity: .6; }
}
@media screen and (max-width: 1280px) {
	.waylink { top: 95px; }
	.wrap {margin-top: 0;margin-bottom: 6vh;padding: 20px 0;}
}
@media screen and (max-width: 980px) {
	#sideNav #sideMenu {margin-bottom: 30px;}
	#sideNav>ul.open>li>h3 a, #sideNav>ul>li>h3 a { width: 65%; padding: 12px 12px 12px 50px; border: none; color: #bdad84; 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; }
	#sideNav>ul.open { opacity: 1; z-index: 3; transform: translateY(-29px); }
	#sideNav>ul>li { display: block; border: 0.5px solid #f0d8d33b; border-radius: 5px; }
	#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% / 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_box { text-align: center; }
	#form1 p #PayAddress1, #form1 p #PayAddress2, #form1 p #PayAddress3 { width: 100%; }
}
@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; }
	#sbanner a { position: relative; height: 35vh; z-index: 1; }
}
@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); }
	.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; }
	#artlsit ul{display:flex;flex-direction: column;}
}