* { margin: 0; padding: 0; }

body { position: relative; margin: 0; }
img { max-width: 100%; }

.pos_rel { position: relative; }
.pos_abs { position: absolute; }

.img_contain { object-fit: contain; }
.img_cover { object-fit: cover; }

.computer .img_box { overflow-y: auto; width: 90%; position: relative; margin: 0 auto; }

.img_box a { position: relative; width: 100%; display: block; height: 100%; }

.fullbigbig:hover { cursor: -moz-zoom-in; cursor: -webkit-zoom-in; cursor: zoom-in; }

div, h1, h2, h3, h4, h5, h6, hr, p, form, label, input, textarea, img, span, ul, li { text-align: left; vertical-align: middle; margin: 0; padding: 0; word-wrap: normal; word-break: normal; line-height: 170%; border-width: 0; font-family: "微軟正黑體", "蘋果儷中黑", "Lucida Grande", "Arial", "Arial Narrow"; font-size: 18px; }

ul, ol { list-style: none; }

a:link, a:visited { color: #0E0E0E; font-weight: normal; text-decoration: none; }

a:hover { color: #900; text-decoration: none; }

section { margin: 0 auto; width: 90%; }

.mainnav { position: relative; display: flex; width: 100%; }
.mainnav .demonav { display: flex; width: calc(100% - 120px); align-items: center; }
.mainnav .chosebu { display: flex; width: 120px; justify-content: space-around; align-items: center; }
.mainnav .chosebu svg { width: 42px; }
.sildebar { position: fixed; right: 4px; width: 60px; height: 190px; top: 45%; display: flex; flex-direction: column; align-items: center; justify-content: center; background: black; z-index: 10; border-radius: 12px 0px 0px 12px; cursor: pointer; }
.sildebar p { width: auto; webkit-writing-mode: vertical-rl; writing-mode: vertical-rl; font-size: 24px; color: white; font-weight: 600; width: 100%; height: 100%; display: flex; flex-direction: row; align-items: center; justify-content: center; }

/* header */
header { position: fixed; padding: 6px 0; background: #fff; width: 100%; top: 0; left: 0; border-bottom: 1px solid #e7eaec; box-shadow: 0 2px 2px rgba(0, 0, 0, 0.05), 0 1px 0 rgba(0, 0, 0, 0.05); z-index: 9; }
header h3, header ul, header ul li { width: 20%; display: inline-block; }
header h3 { font-size: 29px; }
header ul { width: 79%; }
header ul li { margin: 5px 10px 5px 0; width: auto; }

a.fullbigimg { width: 100%; position: fixed; top: 0; z-index: 999; overflow-y: scroll; left: 0; }
.phone a.fullbigimg { left: calc(50% - 240px); }
.phone a.fullbigimg img { width: 480px; }
a.fullbigimg:hover { cursor: zoom-out; }

.article p b { color: #0064ff; font-size: 18px; }

.info { display: flex; margin-top: 80px; flex-direction: column; }
.info .article { margin-top: 0; padding: 15px 60px; background: #f6f6f6; display: flex; order: 2; width: 400px; height: calc(100vh - 110px); align-items: center; position: fixed; right: 0; padding-right: 120px; z-index: 9; box-shadow: -4px 6px 10px rgb(194 194 194 / 54%); }
.info .democen { width: 100%; display: flex; }
.info .democen.black-back:before { content: ""; position: absolute; width: 100%; height: 112%; background: #ececec; z-index: 2; top: -81px; }
.democen img { pointer-events: none; }
.computer .img_cover { width: 1350px; margin: 0 auto; width: 100%; display: none; }
.info .democen::-webkit-scrollbar { width: 5px; }
.info .democen::-webkit-scrollbar-track { background: #d0d0d0; }
.info .democen::-webkit-scrollbar-thumb { background: #3c3c3c; }
.info .democen::-webkit-scrollbar-thumb:hover { background: #222222; }

body::-webkit-scrollbar { width: 5px; }
body::-webkit-scrollbar-track { background: #d0d0d0; }
body::-webkit-scrollbar-thumb { background: #3c3c3c; }
body::-webkit-scrollbar-thumb:hover { background: #222222; }

/* phone */
.info .phone { width: 400px; position: relative; margin: 5px auto; }
.info .phone .img_box { overflow-y: auto; width: calc(90% - 3px); height: 95%; border-radius: 7%; top: calc(3% - 5px); left: 5%; }

/* demoWrap */
#demoWrap { position: relative; margin: 10px auto 0; text-align: center; }
#demoWrap.computer { width: 100%; }
#demoWrap.computer .fullbig { margin: 0 auto; display: flex; flex-direction: column; align-items: center; }

/* review */
.review { position: relative; width: 90%; margin: 0 auto 50px; text-align: center; }

/* signatureWrap */
#signatureWrap { position: relative; margin: 20px auto 30px; padding: 19px 30px; width: 60%; background: #fff; border-radius: 2px; box-shadow: 0 1px 11px rgba(0, 0, 0, 0.27); }
#signatureWrap h4 { margin-bottom: 50px; text-align: center; font-size: 30px; color: #7E7E7E; }
#signatureWrap h4:before, #signatureWrap h4:after { position: absolute; width: 40%; height: 1px; top: 45px; content: ""; }
#signatureWrap h4:before { background: rgb(126, 126, 126); background: -moz-linear-gradient(right, rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%); background: -webkit-linear-gradient(right, rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%); background: -moz-linear-gradient(right, rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%); background: -ms-linear-gradient(right, rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(right, rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%); left: 0px; }
#signatureWrap h4:after { background: rgb(126, 126, 126); background: -moz-linear-gradient(left, rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%); background: -webkit-linear-gradient(left, rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%); background: -moz-linear-gradient(left, rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%); background: -ms-linear-gradient(left, rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%); background: linear-gradient(left, rgba(126, 126, 126, 1) 0%, rgba(255, 255, 255, 1) 100%); right: 0px; }

#signature { margin: 0 auto 50px; width: 100%; background: #e4e4e4; box-shadow: 0 0 5px #868686; }
#signature>div { position: relative !important; }
#signature>div input { padding: 5px 10px; background: #e26b02; color: #fff; top: -1.5em !important; }

#tools { text-align: center; }
#tools input, #send input { margin: 0 10px; padding: 5px 10px; background: #dc1818; color: #fff; display: inline-block; }
#tools input:nth-child(2) { background: #444; }

#send input { background: #1853dc; }

#gotop a { width: 60px; height: 60px; display: block; line-height: 60px; font-size: 33px; text-align: center; color: #fff; opacity: 1; border-radius: 0px 0px 0px 12px; background: #4CAF50; display: flex; flex-direction: column; justify-content: center; align-items: center; }
#gotop a .fa { display: flex; flex-direction: column; align-items: center; justify-content: center; }
#gotop a:hover { opacity: 1; }

@media screen and (max-width: 1500px) {
	.computer .img_cover { width: 1024px; }
}
@media screen and (max-width: 768px) {
	body, header h3, header ul { width: 100%; }
	img { max-width: 100%; }
	section { width: 95%; }
	header h3 { font-size: 25px; }
	#signatureWrap { padding: 20px; width: calc(100% - 50px); }
	#tools input, #send input, #signature>div input { margin-top: 10px; border-radius: 0; -webkit-border-radius: 0; -moz-border-radius: 0; appearance: none; -moz-appearance: none; -webkit-appearance: none; }
	#signature .jSignature { padding: 10px 0; }
	.sildebar { bottom: 0; top: auto; width: 100%; display: flex; flex-direction: row; height: 40px; }
	.sildebar p { webkit-writing-mode: horizontal-tb; writing-mode: horizontal-tb; width: auto; }
	.sildebar .clickshow { display: none; }
	#gotop a { background: unset; width: 30px; height: 30px; }
	.info .article { padding: 0 0; width: 100%; height: calc(100vh - 62px); top: 0; position: relative; display: flex !important; z-index: 0; }
}
@media screen and (max-width: 480px) {
	header h3 { font-size: 20px; }
	header ul li { margin: 0 10px 0 0; font-size: 16px; }
	.phone a.fullbigimg { left: 0; }
	.computer .img_box , .review { width: 100%; }
}