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

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

/* bgTxt */

/* wrap */
.wrap  {position: relative;margin-top: 20px;margin-bottom: 5vh;z-index: 2;}
.wrap h1 { line-height: 150%; }

/* waylink */
.waylink {width: 100%;z-index: 3;margin: 0 0 20px;}
.waylink ol {font-size: 0;text-align: center;padding: 8px 0;text-align: right;font-size: 14px;color: #ad9b6d;font-family: "Noto Serif TC", serif;}
.waylink ol li {display: inline-block;color: rgb(27 42 134);font-size: 14px;vertical-align: top;}
.waylink ol li a {color: rgb(27 42 134);font-size: 14px;vertical-align: baseline;}
.waylink ol li:after {margin: 0 5px;display: inline-block;color: rgb(226 226 226);content: "/";}
.waylink ol li:last-child {color: rgb(27 42 134);}
.waylink ol li:last-child:after { content: ""; }

/* contentMain */
.contentMain {position: relative;overflow: hidden;}
.contentMain article{margin-bottom: 25px;padding-bottom: 10px;font-size: 14px;color: #2f2f2f;line-height: 1.8;}


/* bgTxt */
.bgTxt {position: relative;z-index: 1;}
.bgTxt.title {display: inline-block;width: 100%;text-align: center;letter-spacing: .05em;font-weight: bold;text-transform: uppercase;padding: 2vw 0 2vw;font-family: 'Frank Ruhl Libre', serif;font-size: 50px;color: #ffffff;position: absolute;z-index: 15;left: 50%;transform: translate(-50%, -120%);}
.bgTxt.title h3{text-align: center;margin-top: -10px;font-weight: 500;position: relative;display: block;letter-spacing: 3px;font-size: 18px;color: rgb(255 255 255 / 72%);font-family: "Noto Serif TC", serif;}
.bgTxt.title em{font-style: initial;font-size: 35px;color: rgb(255 255 255 / 72%);}

/* sideNav */
#sideNav ul.Cate{text-align: center;border-bottom: 1px solid #e1e1e1;font-size: 15px;font-family: "Noto Serif TC", serif;color: #9e9e9e;display: flex;justify-content: center;}
#sideNav #sideMenu {width: 90%;margin: 0 auto;margin-top: 28px;padding: 8px 20px;display: none;font-size: 18px;color: #626262;background: #f0f0f0;border-radius: 7px;}
#sideNav #sideMenu font , #sideNav #sideMenu span {margin-right: 15px;display: inline-block;vertical-align: middle;}
#sideNav #sideMenu span i {margin: 4px 0;width: 2px;height: 2px;background: #626262;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;}
.fixTop { position: fixed; width: 1420px; top: -15px; }
.fixTop.showheader { top: 50px; }
#sideNav >ul >li {position: relative;display: inline-block;padding: 30px 0;position: relative;}
#sideNav >ul >li >h3 a:before {content: '';background-color: #245fdf;margin-left: -50px;width: 0%;height: 3px;display: block;position: absolute;bottom: 0;left: 55px;transition: 0.6s;}
#sideNav >ul >li >h3 a:hover::before {width: calc( 100% - 15px );}
#sideNav >ul >li.action{}
#sideNav >ul >li.action >h3 a{color: #000;}
#sideNav >ul >li.action >h3 a:before{content: '';background-color: #245fdf;margin-left: -50px;width: 90%;height: 3px;display: block;position: absolute;bottom: 0;left: 55px;transition: 0.6s;}
#sideNav >ul >li >h3 {display: block;}
#sideNav >ul >li >h3 a {display: block;letter-spacing: 2px;font-size: 17px;font-weight: 500;color: #676767;display: block;border-right: 1px solid #e1e1e1;padding: 0 20px;transition: 0.9s;line-height: 0.8;font-family: "Noto Serif TC", serif;}
#sideNav >ul >li:last-child >h3 a {border-right: none;}
#sideNav >ul >li:hover:before {width: 100px;}
#sideNav >ul >li >h3 a:hover{color: #282828;}
#sideNav >ul >li b[data-action="sideOpen"] { display: none; }
#sideNav >ul >li >ul.subUL {overflow: hidden;position: absolute;left: calc(50% - 80px);bottom: -36px;width: 160px;height: 0;background: rgb(235 235 235 / 48%);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: #707070;}
#sideNav >ul >li >ul.subUL li a:hover {background: #1b2a86;color: #ffffff;}
#sideNav >ul >li >ul.subUL li ul.sub2UL {background: #deb3aa; }


/* 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 #d5d5d5;}
#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 p.cate{position: absolute;top: 0px;left: 0;padding: 10px 30px;text-align: center;background: rgb(27 42 134 / 87%);color: #fff;}
#artlsit ul li .info {padding: 20px 50px 5px;}
#artlsit ul li .info h3 {height: 35px;font-size: 25px;color: #6D6D6D;-webkit-line-clamp: 1;}
#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;}

/* more */
p.more { padding: 20px 0; text-align: center; }
p.more a {position: relative;overflow: hidden;padding: 8px 50px;display: inline-block;align-items: center;border: 1px #d1d1d1 solid;letter-spacing: .06em;line-height: 30px;transition: 1.2s ease 1.8s;transform: translateY(0%);}
p.more a:before {position: absolute;width: 100%;height: 100%;background: #1b2a86;top: 0;left: 0;transform: translateY(110%);transition: .4s cubic-bezier(.23,1,.32,1);content: "";}
p.more a font {position: relative;display: inline-block;font-size: 13px;color: #1b2a86;padding-bottom: 5px;z-index: 2;}
p.more a:hover { border-color: #c4c4c4; }
p.more a:hover:before { transform: translateY(0); }
p.more a:hover font { color: #fff; }	


/* content */
#content .articlebar {margin: 13px 15px 0px;}
#content .articlebar font{font-size: 18px;color: #d3d3d3;}
#content .articlebar font i{vertical-align: initial;margin-right: 8px;}
#content h1{font-size: 1.20em;text-align: left;border-bottom: 1px solid #d6d6d6;color: #2e2e2e;-webkit-line-clamp: 1;margin-bottom: 1.6vw;padding: 4px 14px 10px;}
#content #describe{width: 98%;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: #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: 13vh 0 0;}
#page-control a {position: absolute;bottom: 58px;font-size: 13px;color: #6c6c6c;border: 1px solid #e0e0e0;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: 13px;vertical-align: initial;}
#page-control a:hover {background: #e9e9e9;color: #8e8b8b;}

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

/*contac*/
.leftBox {width: 64.66666664%;float: left;box-sizing: border-box;padding: 0 40px 40px 0px;}
.rightBox {width: 33.33%;float: left;box-sizing: border-box;}
.side_contactInfo {padding-top: 30px;}
.side_contactInfo li {margin-bottom: 20px;}
.side_contactInfo a {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;font-size: 16px;color: #121212;}
.side_contactInfo a:hover i {border-color: #245fdf;color: #245fdf;}
.side_contactInfo i {display: inline-block;vertical-align: middle;-ms-flex-negative: 0;flex-shrink: 0;width: 35px;height: 35px;line-height: 35px;margin-right: 8px;border: 2px solid #121212;border-radius: 50%;font-size: 20px;color: #121212;text-align: center;-webkit-transition: all .4s ease;-o-transition: all .4s ease;transition: all .4s ease;}
.side_contactInfo b {display: inline-block;vertical-align: middle;font-weight: 400;}

/* form1 */
#form1 { font-size: 0; }
#form1 p {margin: 0px 20px 10px 0;width: calc(100% - 34px);display: inline-block;vertical-align: text-bottom;}
#form1 p.col-2 {width: 47%;float: left;box-sizing: border-box;}
#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: #245fdf;}
#form1 p input , #form1 select , #form1 textarea {border: 1px #e4e4e4 solid;display: block;width: 100%;line-height: 35px;padding: 5px;border: 1px solid #ccc;border-radius: 3px;}
#form1 p select { padding: 10px 15px; width: 100%; }
#form1 p input#Checknum { margin-right: 10px; width: 60px; display: inline-block; }
#form1 p.send { margin-top: 20px; text-align: center; }
#form1 p.send a { display: inline-block; }
#form1 p.send a font , #choose_img .box #chkimg font { width: 150px; height: 50px; background-color: #1b2a86; -webkit-box-shadow: 2px 2px 2px #ccc; box-shadow: 2px 2px 2px #ccc; display: inline-block; text-align: center; line-height: 50px; letter-spacing: 2px; color: #fff; }

/* upload_box */
.upload_box { position: relative; display: inline-block; }
.upload_box >* { margin-right: 10px; display: inline-block; }
.upload_box [class*="img_"] { position: relative; border: 1px #b7b7b7 dashed; }
.upload_box [class*="img_"]:before { position: absolute; width: 100%; height: 100%; text-align: center; line-height: 50px; font-weight: 500; font-size: 30px; color: #d82332; content: "+"; }
.upload_box [class*="img_"] img { position: relative; width: 55px; height: 55px; background: #fff; opacity: 0; z-index: 2; }
.upload_box a.up_img { padding: 10px 30px; background: #d82332; display: inline-block; color: #fff; }
#form1 p .upload_box input[type="file"] { position: absolute; padding: 0; width: 100%; height: 100%; border: 0; top: 0; left: 0; opacity: 0; cursor: pointer; z-index: 2; }

/* choose_img */
#choose_img { position: fixed; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.56); top: 0; left: 0; z-index: 9999; }
#choose_img #close_box { position: absolute; right: -10px; top: -10px; background: #235fdf; font-size: 18px; color: #fff; width: 30px; height: 30px; line-height: 25px; text-align: center; border-radius: 50%; }
#choose_img .box { position: relative; margin: 10% auto 0; padding: 30px 0 20px; width: 630px; background: #fff; }
#choose_img .box >div { text-align: center; }
#choose_img .box #chkimg { margin: 25px 10px 10px; display: inline-block; }

@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(64 64 64 / 0%);}
	#artlsit ul li .info .cate a:hover , #artlsit ul li .info h3 a:hover { opacity: .6; }
}
@media screen and (max-width: 1280px) {
	.waylink {top: 165px;}
	#sbanner a{height: 44vh;}
	.bgTxt {position: relative;z-index: 1;}
	.bgTxt.title {display: inline-block;width: 100%;text-align: center;font-size: 50px;color: #ffffff;letter-spacing: .05em;text-transform: uppercase;padding: 0 0 7vw;-webkit-text-stroke: 1px rgb(242 242 242 / 15%);color: transparent;left: 50%;transform: translate(-50%, -90%);}
	.bgTxt.title h3{font-size: 20px;font-weight: 500;color: rgb(255 255 255 / 54%);text-align: center;margin-top: -20px;letter-spacing: 7px;}
	footer { padding-top: 0; }
}

@media screen and (max-width: 1140px) {
	#form1 p.col-2 {width: 46%;float: left;box-sizing: border-box;}

}

@media screen and (max-width: 980px) {
	.bgTxt.stitle { position: relative; font-size: 10vw; -webkit-writing-mode: inherit; writing-mode: inherit; }
	#sideNav #sideMenu { display: block; }
	#sideNav >ul.open>li >h3 a{width: 100%;padding: 12px 12px 12px 50px;border: none;color: #252525;}
	#sideNav >ul {position: relative;overflow: hidden;width: 95%;margin: 0 auto;height: 0;background: #ffffff;box-shadow: 0 7px 15px #e8e8e870;opacity: 0;left: 0;}
	#sideNav >ul.open {height: auto;opacity: 1;z-index: 1;display: block;}
	#sideNav >ul >li {display: block;border: 0.5px solid #c7c7c73b;border-radius: 5px;padding: 10px 0;}
	#sideNav >ul >li.action{background: rgb(240 216 211 / 0.2);}
	#sideNav >ul >li >h3 a:hover{ background: none; color: #d7a297;}
	#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: #d7a297;}
	#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: #d7a297;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% - 20px);}
	#form1 p{
    width: calc(100% - 20px);
}
	#form1 p.col-4 { width: calc(50% - 40px); }
	#form1 p.send {width: calc(100% - 0px);}
#form1 p.send a font{width: 100%;height: 50px;}
.leftBox {width: 100%;float: none;padding: 0px;}
.rightBox {width: 100%;float: none;}

}
@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{
    margin: 70px 0 0;
}
   #sbanner a{height: 23vh;background: no-repeat 60% 50%;background-size: cover;}
.catBox {padding-bottom: 2vh;}
}
@media screen and (max-width: 640px) {
	.bgTxt.title {font-size: 2rem;}
	.bgTxt.title h3 {margin-top: -9px;}
	#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); }
	.waylink{top: 85px;padding: 0 18px;width: 90%;margin: auto;}
}