@charset "UTF-8";
@import url("https://fonts.googleapis.com/earlyaccess/notosanstc.css");
@import url("https://fonts.googleapis.com/css?family=Nunito:300,400,600,700,900");
/*
* Noto Sans TC (Chinese_traditional) http://www.google.com/fonts/earlyaccess */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, marquee { font-family: 'Nunito','Noto Sans TC', 'Microsoft JhengHei','Helvetica Neue', Arial, sans-serif; font-weight: 300; }

body, html { height: 100%; }

body { overflow-x: hidden !important; }

#preLoading { display: block; background-image: url("./../images/preload.png"); height: 100%; /* Center and scale the image nicely */ background-position: center; background-repeat: no-repeat; background-size: cover; }

#wrap { display: block; overflow: hidden; clear: both; position: relative; *zoom: 1; }
#wrap:before, #wrap:after { content: " "; display: table; }
#wrap:after { clear: both; }

* { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }

.grid { display: block; }

.gird-over { width: 100%; }

.grid-1300 { max-width: 1300px; margin-left: auto; margin-right: auto; }
.grid-1300:after { content: " "; display: block; clear: both; }

.cell-1300 { max-width: 1300px; margin-left: auto; margin-right: auto; }
.cell-1300:after { content: " "; display: block; clear: both; }

.cell-over { display: block; width: 100%; }

.underlineTitle h2 { font-size: 24px; color: #990000; font-weight: 500; margin: 0; padding: 0; }
.underlineTitle p { display: inline-block; width: 50px; height: 2px; background: #990000; text-indent: 200%; margin: 10px auto; }
.underlineTitle.overline { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; padding: 20px 15px; }
.underlineTitle.overline h2 span { color: #342c29; font-size: 14px; float: right; line-height: 24px; }
@media only screen and (max-width: 680px) { .underlineTitle.overline h2 span { float: none; display: block; width: 100%; } }
.underlineTitle.overline p { width: 100%; }

.btnstyleTitle { display: block; }
.btnstyleTitle h2 { display: inline-block; font-size: 22px; font-weight: 500; color: #ececec; background: #990000; padding: 2px 15px; -webkit-border-radius: 5px; -moz-border-radius: 5px; -o-border-radius: 5px; border-radius: 5px; }

/* 
* *** HEADER *************************
*/
header { position: fixed; display: block; width: 100%; z-index: 9999; height: 70px; border-bottom: 1px solid #ececec; background: white; }
header > section { display: block; height: 100%; margin: auto auto; }
header > section > #logo { display: block; float: left; width: 15.25424%; height: 100%; overflow: hidden; margin: 0; padding: 0; }
@media only screen and (max-width: 980px) { header > section > #logo { width: 49.15254%; } }
header > section > #logo > a { display: block; padding: 10px; height: 100%; outline: none; }
header > section > #logo > a img { height: 100%; }
header > section > .menuBtn { display: none; width: 49.15254%; float: right; text-align: right; }
@media only screen and (max-width: 980px) { header > section > .menuBtn { display: block; } }
header > section > .menuBtn > a { line-height: 70px; padding: 10px; color: #342c29; text-decoration: none; font-size: 38px; font-weight: 500; }
header > section > .menuBtn > a:hover { color: #990000; }
header > section > nav#menu { display: block; float: right; width: 83.05085%; }
@media only screen and (max-width: 980px) { header > section > nav#menu { width: 100%; background: white; display: none; } }
@media only screen and (min-width: 981px) { header > section > nav#menu { display: block !important; } }
header > section > nav#menu > a { width: 12.5%; float: left; display: block; float: left; line-height: 70px; text-align: center; color: #342c29; outline: none; text-decoration: none; font-size: 16px; }
header > section > nav#menu > a:nth-child(8n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
header > section > nav#menu > a:nth-child(8n + 2) { margin-left: 12.5%; margin-right: -100%; clear: none; }
header > section > nav#menu > a:nth-child(8n + 3) { margin-left: 25%; margin-right: -100%; clear: none; }
header > section > nav#menu > a:nth-child(8n + 4) { margin-left: 37.5%; margin-right: -100%; clear: none; }
header > section > nav#menu > a:nth-child(8n + 5) { margin-left: 50%; margin-right: -100%; clear: none; }
header > section > nav#menu > a:nth-child(8n + 6) { margin-left: 62.5%; margin-right: -100%; clear: none; }
header > section > nav#menu > a:nth-child(8n + 7) { margin-left: 75%; margin-right: -100%; clear: none; }
header > section > nav#menu > a:nth-child(8n + 8) { margin-left: 87.5%; margin-right: -100%; clear: none; }
header > section > nav#menu > a span { font-weight: 500; }
header > section > nav#menu > a:hover > span { border-bottom: 2px solid #e32226; }
header > section > nav#menu > a.lock > span { border-bottom: 2px solid #e32226; }
@media only screen and (max-width: 980px) { header > section > nav#menu > a { width: 100%; float: left; float: none; text-align: right; line-height: normal; padding: 5px 10px; border-bottom: 1px solid #ececec; }
  header > section > nav#menu > a:nth-child(1n + 1) { margin-left: 0; margin-right: -100%; clear: none; }
  header > section > nav#menu > a:nth-child(even) { background-color: rgba(239, 239, 239, 0.8); }
  header > section > nav#menu > a::nth-child(odd) { background-color: rgba(236, 236, 236, 0.8); } }

/* 
* *** footer *************************
*/
footer { display: block; width: 100%; background: #990000; padding: 20px 10px; position: relative; }
footer > div.triangle { display: block; position: absolute; left: 50%; -webkit-transform: translateX(-50%); -moz-transform: translateX(-50%); -ms-transform: translateX(-50%); -o-transform: translateX(-50%); transform: translateX(-50%); top: -45px; z-index: -100; }
footer > div.triangle > span { width: 0; height: 0; border-style: solid; border-width: 0 50px 50px 50px; border-color: transparent transparent #990000 transparent; line-height: 0px; _border-color: #000000 #000000 #990000 #000000; _filter: progid:DXImageTransform.Microsoft.Chroma(color='#000000'); }
footer section { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
footer section .info { width: 32.20339%; float: left; color: #ececec; }
@media only screen and (max-width: 980px) { footer section .info { width: 57.62712%; float: left; } }
@media only screen and (max-width: 540px) { footer section .info { width: 100%; } }
footer section .info > h1 { font-size: 26px; font-weight: 800; padding: 0; margin: 0; }
footer section .info .s-line { display: block; width: 50px; border-bottom: 2px solid #ececec; }
footer section .social { width: 35.59322%; float: left; display: block; text-align: center; }
@media only screen and (max-width: 980px) { footer section .social { width: 40.67797%; float: left; } }
@media only screen and (max-width: 540px) { footer section .social { width: 100%; } }
footer section .social > a { display: inline-block; width: 55px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; margin: 0 5px; line-height: 200px; text-decoration: none; color: #ececec; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }
footer section .social > a:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
footer section .social > a:nth-child(1):hover span { color: #3b559f; }
footer section .social > a:nth-child(2):hover span { color: #00b900; }
footer section .social > a:nth-child(3):hover span { color: #e84133; }
footer section .social > a > span { font-size: 55px; }
footer section .social > a img { width: 100%; }
footer section .gmap { width: 28.81356%; float: right; }
@media only screen and (max-width: 980px) { footer section .gmap { width: 100%; float: left; } }
footer section .gmap iframe { width: 100%; height: 200px; }

/* 
* *** main *************************
*/
main { display: block; margin-top: 70px; overflow: hidden; clear: both; *zoom: 1; }
main:before, main:after { content: " "; display: table; }
main:after { clear: both; }

.dskphoto > img { width: 100vm; }
.dskphoto.inPage { overflow: hidden; clear: both; *zoom: 1; }
.dskphoto.inPage:before, .dskphoto.inPage:after { content: " "; display: table; }
.dskphoto.inPage:after { clear: both; }
.dskphoto.inPage > img { display: block; min-width: 100%; object-fit: cover; object-position: 50% 50%; }

/* 
* *** index *************************
*/
.itemtitle .middle-line-title { display: block; width: 57.62712%; background: transparent; height: auto; line-height: 120%; position: relative; text-align: center; margin-left: auto; margin-right: auto; }
@media only screen and (max-width: 640px) { .itemtitle .middle-line-title { width: 83.05085%; } }
.itemtitle .middle-line-title:before { content: ""; display: block; height: 2px; width: 100%; border-top: 2px solid #342c29; position: absolute; top: 50%; z-index: -1; }
.itemtitle .middle-line-title > span { display: inline-block; zoom: 1; z-index: 1; background: #fff; padding: 10px 20px; font-size: 22px; font-weight: 800; }
.itemtitle .middle-line-title.clorWh:before { border-top: 2px solid white; }
.itemtitle .middle-line-title.clorWh > span { background: #cc6666; color: white; }

.abouttip-list { list-style: none; display: flex; justify-content: space-around; }
@media only screen and (max-width: 780px) { .abouttip-list { display: block; } }
@media only screen and (max-width: 480px) { .abouttip-list { width: 90% !important; } }
@media only screen and (max-width: 780px) { .abouttip-list li { display: inline-block; float: left; width: 49.15254%; float: left; margin: 25px 0; }
  .abouttip-list li:nth-child(2n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
  .abouttip-list li:nth-child(2n + 2) { margin-left: 50.84746%; margin-right: -100%; clear: none; } }
.abouttip-list li > span { font-weight: 800; padding: 0 10px; }
@media only screen and (max-width: 860px) { .abouttip-list li > span { font-size: 13px; } }
@media only screen and (max-width: 480px) { .abouttip-list li > span { font-size: 12px; padding: 0 5px; } }
@media only screen and (max-width: 360px) { .abouttip-list li > span { font-weight: 500; padding: 0 2px; } }

/*/////hexagon
*/
.hexagon { position: relative; width: 50px; height: 28.68px; background: #e32226; float: left; }
@media only screen and (max-width: 480px) { .hexagon { width: 45px; height: 25.98px; } }
.hexagon::before, .hexagon::after { content: ""; position: absolute; border-left: 25px solid transparent; border-right: 25px solid transparent; }
@media only screen and (max-width: 480px) { .hexagon::before, .hexagon::after { border-left: 22.5px solid transparent; border-right: 22.5px solid transparent; } }
.hexagon::before { bottom: 100%; border-bottom: 14.34px solid #e32226; }
@media only screen and (max-width: 480px) { .hexagon::before { border-bottom: 12.99px solid #e32226; } }
.hexagon::after { top: 100%; border-top: 14.34px solid #e32226; }
@media only screen and (max-width: 480px) { .hexagon::after { border-top: 12.99px solid #e32226; } }
.hexagon span { position: absolute; color: #ececec; display: block; width: 100%; text-align: center; font-size: 18px; }
@media only screen and (max-width: 480px) { .hexagon span { font-size: 14px; } }

.hexagon-2 { position: relative; width: 80px; height: 46.19px; background: #e32226; float: left; }
.hexagon-2::before, .hexagon-2::after { content: ""; position: absolute; border-left: 40px solid transparent; border-right: 40px solid transparent; }
.hexagon-2::before { bottom: 98%; left: 0; border-bottom: 23.09px solid #e32226; }
.hexagon-2::after { top: 98.5%; left: 0; border-top: 23.09px solid #e32226; }
.hexagon-2.cor-1 { background: #111; }
.hexagon-2.cor-1::before { border-bottom-color: #111; }
.hexagon-2.cor-1::after { border-top-color: #111; }
.hexagon-2.cor-2 { background: #333; }
.hexagon-2.cor-2::before { border-bottom-color: #333; }
.hexagon-2.cor-2::after { border-top-color: #333; }
.hexagon-2.cor-3 { background: #555; }
.hexagon-2.cor-3::before { border-bottom-color: #555; }
.hexagon-2.cor-3::after { border-top-color: #555; }
.hexagon-2.cor-4 { background: #777; }
.hexagon-2.cor-4::before { border-bottom-color: #777; }
.hexagon-2.cor-4::after { border-top-color: #777; }
.hexagon-2 > span { position: absolute; color: #ececec; display: block; width: 100%; text-align: center; font-size: 28px; font-weight: 600; }

/*/////image marquee
*/
.imagemarquee { margin: 0; overflow: hidden; overflow: hidden; clear: both; padding-top: 20px; padding-bottom: 20px; border-top: 20px solid #990000; border-bottom: 20px solid #990000; }

.imagemarquee-list { display: block; width: 100%; list-style: none; }
.imagemarquee-list > li { display: block; }
.imagemarquee-list > li img { display: block; width: 100%; object-fit: cover; }

.dooritem { display: block; position: relative; clear: both; }

.dooritem-list { list-style: none; display: block; padding: 0; margin: 0 30px; }
.dooritem-list.in1row { margin: 0; }
.dooritem-list.in1row > li { width: 100%; margin: 0; }
.dooritem-list.in3row > li { width: 29.41176%; float: left; margin-bottom: 30px; }
.dooritem-list.in3row > li:nth-child(3n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
.dooritem-list.in3row > li:nth-child(3n + 2) { margin-left: 35.29412%; margin-right: -100%; clear: none; }
.dooritem-list.in3row > li:nth-child(3n + 3) { margin-left: 70.58824%; margin-right: -100%; clear: none; }
@media only screen and (max-width: 680px) { .dooritem-list.in3row > li { width: 47.82609%; float: left; }
  .dooritem-list.in3row > li:nth-child(2n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
  .dooritem-list.in3row > li:nth-child(2n + 2) { margin-left: 52.17391%; margin-right: -100%; clear: none; } }
@media only screen and (max-width: 480px) { .dooritem-list.in3row > li { width: 99.16667%; float: left; }
  .dooritem-list.in3row > li:nth-child(1n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; } }
.dooritem-list > li { display: block; width: 22.11538%; float: left; margin-bottom: 25px; }
.dooritem-list > li:nth-child(4n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
.dooritem-list > li:nth-child(4n + 2) { margin-left: 25.96154%; margin-right: -100%; clear: none; }
.dooritem-list > li:nth-child(4n + 3) { margin-left: 51.92308%; margin-right: -100%; clear: none; }
.dooritem-list > li:nth-child(4n + 4) { margin-left: 77.88462%; margin-right: -100%; clear: none; }
@media only screen and (max-width: 680px) { .dooritem-list > li { width: 49.15254%; float: left; }
  .dooritem-list > li:nth-child(2n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
  .dooritem-list > li:nth-child(2n + 2) { margin-left: 50.84746%; margin-right: -100%; clear: none; } }
.dooritem-list > li > a { display: block; width: 100%; height: 100%; overflow: hidden; position: relative; }
.dooritem-list > li > a:hover span { bottom: -50px; }
.dooritem-list > li > a span { position: absolute; width: 100%; height: 50px; bottom: 0; left: 0; z-index: 100; text-align: center; line-height: 50px; background: #ececec; color: #342c29; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }
.dooritem-list > li > a img { width: 100%; display: block; object-fit: cover; object-position: center center; -webkit-transition: all 0.35s ease-in; -moz-transition: all 0.35s ease-in; -ms-transition: all 0.35s ease-in; -o-transition: all 0.35s ease-in; transition: all 0.35s ease-in; }
.dooritem-list > li > a:hover img { -moz-transform: scale(1.4); -webkit-transform: scale(1.4); -o-transform: scale(1.4); -ms-transform: scale(1.4); transform: scale(1.4); }

.dooritemcus { display: block; clear: both; padding: 5px 0; }

.color2bg { position: absolute; left: 0; top: 0; width: 0; height: 0; border-top: 550px solid #cc6666; border-right-style: solid; border-right-color: transparent; z-index: -10; }

.outlineBtn { border: 1.5px solid #990000; text-decoration: none; color: #342c29; padding: 5px 15px; -webkit-transition: all 0.35s ease-in; -moz-transition: all 0.35s ease-in; -ms-transition: all 0.35s ease-in; -o-transition: all 0.35s ease-in; transition: all 0.35s ease-in; }
.outlineBtn > span { color: #990000; }
.outlineBtn:hover { background: #990000; color: #ececec; }
.outlineBtn:hover > span { color: #ececec; }

/*//// caseview
*/
.caseview-list { display: block; overflow: hidden; clear: both; }
.caseview-list > figure { position: relative; float: left; overflow: hidden; width: 25%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; border: 1px solid #ececec; background: #ececec; text-align: center; cursor: pointer; object-fit: scale-down; }
.caseview-list > figure:nth-child(4n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
.caseview-list > figure:nth-child(4n + 2) { margin-left: 25%; margin-right: -100%; clear: none; }
.caseview-list > figure:nth-child(4n + 3) { margin-left: 50%; margin-right: -100%; clear: none; }
.caseview-list > figure:nth-child(4n + 4) { margin-left: 75%; margin-right: -100%; clear: none; }
@media only screen and (max-width: 780px) { .caseview-list > figure { width: 50%; float: left; }
  .caseview-list > figure:nth-child(2n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
  .caseview-list > figure:nth-child(2n + 2) { margin-left: 50%; margin-right: -100%; clear: none; } }
@media only screen and (max-width: 560px) { .caseview-list > figure { width: 99.10448%; float: left; }
  .caseview-list > figure:nth-child(1n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; } }
.caseview-list > figure > img { position: relative; display: block; min-width: 100%; object-fit: cover; object-position: 50% 50%; }
.caseview-list > figure > figcaption { padding: 0; color: #fff; text-transform: uppercase; -webkit-backface-visibility: hidden; backface-visibility: hidden; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.caseview-list > figure > figcaption > a { z-index: 1000; text-indent: 200%; white-space: nowrap; font-size: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.caseview-list > figure > figcaption::before, .caseview-list > figure > figcaption::after { pointer-events: none; }
.caseview-list > figure > figcaption .content { display: block; width: 100%; text-align: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }
.caseview-list > figure > figcaption .content h2 { font-size: 20px; padding: 8px 0; margin: 0; }
.caseview-list > figure > figcaption .content span { content: ""; text-indent: 200%; display: inline-block; width: 57.62712%; height: 2px; background: #ececec; font-size: 0; white-space: nowrap; }

figure.caseview-cell > img { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); }
figure.caseview-cell:hover .content { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); }
figure.caseview-cell:hover .content h2 { -webkit-transform: scale(1); transform: scale(1); margin: 0; padding: 0; }
figure.caseview-cell:hover .content span { -moz-transform: translate(0px, 0px); -webkit-transform: translate(0px, 0px); -o-transform: translate(0px, 0px); -ms-transform: translate(0px, 0px); transform: translate(0px, 0px); }
figure.caseview-cell:hover figcaption::before { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
figure.caseview-cell:hover figcaption { background-color: rgba(227, 34, 38, 0.7); }
figure.caseview-cell:hover img { opacity: 0.4; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); }
figure.caseview-cell figcaption .content { opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); }
figure.caseview-cell figcaption .content h2 { -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale(2); transform: scale(2); margin: 0; padding: 0; }
figure.caseview-cell figcaption .content span { -webkit-transition: opacity 0.35s, -webkit-transform 0.5s; transition: opacity 0.35s, transform 0.5s; -moz-transform: translate(-100px, 0px); -webkit-transform: translate(-100px, 0px); -o-transform: translate(-100px, 0px); -ms-transform: translate(-100px, 0px); transform: translate(-100px, 0px); }
figure.caseview-cell figcaption::before { position: absolute; top: 20px; right: 20px; bottom: 20px; left: 20px; border: 2px solid #fff; box-shadow: 0 0 0 20px rgba(255, 255, 255, 0.2); content: ''; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: opacity 0.35s, -webkit-transform 0.35s; transition: opacity 0.35s, transform 0.35s; -webkit-transform: scale3d(1.4, 1.4, 1); transform: scale3d(1.4, 1.4, 1); }

.process { display: block; overflow: hidden; clear: both; }

.process-cell { display: block; }

.process-list { list-style: none; text-align: center; }
@media only screen and (max-width: 560px) { .process-list { width: 100%; } }
@media only screen and (max-width: 360px) { .process-list { width: 80%; } }
.process-list li { display: inline-block; margin: 0 35px; width: 80px; text-align: center; }
@media only screen and (max-width: 768px) { .process-list li { margin: 0 20px; } }
@media only screen and (max-width: 640px) { .process-list li { margin: 0 10px; } }
@media only screen and (max-width: 480px) { .process-list li { margin: 0 2px; -moz-transform: scale(0.73); -webkit-transform: scale(0.73); -o-transform: scale(0.73); -ms-transform: scale(0.73); transform: scale(0.73); } }
.process-list li > .border { display: block; width: 50px; height: 2px; background: #342c29; margin-top: 100px; margin-left: auto; margin-right: auto; }
.process-list li > article { display: block; width: 100%; text-align: center; color: #342c29; padding: 0 2px; font-weight: 800; }
.process-list li > article p { color: #990000; padding: 0; margin: 0; }

.qa-view, .news-view { display: block; overflow: hidden; clear: both; }
@media only screen and (max-width: 1300px) { .qa-view, .news-view { padding: 0 20px; } }
.qa-view > .box, .news-view > .box { display: block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; width: 46.66667%; float: left; }
.qa-view > .box:nth-child(2n + 1), .news-view > .box:nth-child(2n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
.qa-view > .box:nth-child(2n + 2), .news-view > .box:nth-child(2n + 2) { margin-left: 53.33333%; margin-right: -100%; clear: none; }
@media only screen and (max-width: 720px) { .qa-view > .box, .news-view > .box { width: 99.16667%; float: left; }
  .qa-view > .box:nth-child(1n + 1), .news-view > .box:nth-child(1n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; } }

@media only screen and (max-width: 720px) { .qa-banner, .news-banner { display: none !important; } }
.qa-banner > a, .news-banner > a { display: block; width: 100%; height: 100%; position: relative; }
.qa-banner > a > h2, .news-banner > a > h2 { position: absolute; display: block; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: 30px; margin: 0; padding: 4px 20px; border: 1.5px solid #990000; background: rgba(255, 255, 255, 0.7); color: #990000; }

.qa-list { display: block; clear: both; }
.qa-list > a.moreBtn { display: block; margin: 25px auto 10px; color: #990000; font-weight: 500; font-size: 20px; text-align: center; }

.qa-list ul { list-style: none; }
.qa-list ul li { padding: 10px 0; border-bottom: 1px solid #342c29; clear: both; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qa-list ul li > a { text-decoration: none; padding-left: 35px; font-size: 20px; line-height: 25px; position: relative; color: #342c29; }
.qa-list ul li > a:hover { color: #990000; }
.qa-list ul li > a img { position: absolute; left: 0; bottom: 0; height: 25px; width: auto; }

.news-list ul { list-style: none; }
.news-list ul li { padding: 10px 0; clear: both; overflow: hidden; }
.news-list ul li > .cont { display: block; font-size: 18px; text-decoration: none; color: #342c29; border-left: 3px solid #990000; padding-left: 5px; }
.news-list ul li > .cont span { color: #990000; font-size: 16px; }
.news-list ul li > .cont p { font-size: 18px; margin: 0; padding: 0; }
.news-list ul li > .moreBtn { text-decoration: none; float: right; color: #990000; }
.news-list ul li > .moreBtn:hover { text-decoration: underline; }
.news-list ul li > .moreBtn::before { content: "<"; }
.news-list ul li > .moreBtn::after { content: ">"; }

/* 
* *** news page ***********************
*/
.newsComp { display: block; overflow: hidden; clear: both; *zoom: 1; }
.newsComp:before, .newsComp:after { content: " "; display: table; }
.newsComp:after { clear: both; }
@media only screen and (max-width: 1300px) { .newsComp { margin: auto 20px; } }

.newsCell { display: block; width: 31.70732%; float: left; overflow: hidden; clear: both; margin-top: 10px; margin-bottom: 10px; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
.newsCell:nth-child(3n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
.newsCell:nth-child(3n + 2) { margin-left: 34.14634%; margin-right: -100%; clear: none; }
.newsCell:nth-child(3n + 3) { margin-left: 68.29268%; margin-right: -100%; clear: none; }
@media only screen and (max-width: 980px) { .newsCell { width: 48.78049%; float: left; }
  .newsCell:nth-child(2n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
  .newsCell:nth-child(2n + 2) { margin-left: 51.21951%; margin-right: -100%; clear: none; } }
@media only screen and (max-width: 640px) { .newsCell { width: 99.15254%; float: left; }
  .newsCell:nth-child(1n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; } }
.newsCell:hover { border: 2px solid #bbbbbb; }
.newsCell a { display: block; width: 100%; height: 100%; overflow: hidden; clear: both; }
.newsCell a img { object-fit: cover; display: block; }
.newsCell a div.caption { position: absolute; display: block; bottom: 0; left: 0; z-index: 100; background: rgba(239, 239, 239, 0.9); border-top: 1px solid #ececec; width: 100%; height: 34%; padding: 5px 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; overflow: hidden; clear: both; *zoom: 1; }
.newsCell a div.caption:before, .newsCell a div.caption:after { content: " "; display: table; }
.newsCell a div.caption:after { clear: both; }
.newsCell a div.caption h3 { font-size: 18px; font-weight: 500; color: #990000; margin: 0; white-space: nowrap; overflow: hidden; }
.newsCell a div.caption p { font-size: 14px; color: #342c29; margin: 0; height: 27px; line-height: 13px; overflow: hidden; }
.newsCell a div.caption span { position: absolute; left: 0; bottom: 0; display: block; width: 100%; }
.newsCell a div.caption span button { float: right; border: 1px solid #bbb; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; text-decoration: none; color: #990000; padding: 0px 17px; font-size: 12px; margin: 0 7px 7px 0; cursor: pointer; }
.newsCell a div.caption span button:hover { background: #990000; color: #ececec; }

.newsDetComp { display: block; border: 1px solid #bbbbbb; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }

.DetFree { display: block; overflow: hidden; clear: both; *zoom: 1; padding: 0 20px; }
.DetFree:before, .DetFree:after { content: " "; display: table; }
.DetFree:after { clear: both; }
.DetFree img { max-width: 100%; }

/* 
* *** about page ***********************
*/
.aboutComp { padding: 0 20px; width: 83.05085%; margin-left: auto; margin-right: auto; display: bloack; }
.aboutComp p { font-size: 16px; }

.abouttip-txt { display: block; }
.abouttip-txt .abouttip-txt-list { list-style: none; text-align: center; display: block; width: 100%; overflow: hidden; clear: both; }
.abouttip-txt .abouttip-txt-list li { display: inline; color: #990000; font-size: 20px; padding: 0 10px; white-space: pre-wrap; }
@media only screen and (max-width: 780px) { .abouttip-txt .abouttip-txt-list li { font-size: 18px; } }
@media only screen and (max-width: 680px) { .abouttip-txt .abouttip-txt-list li { display: inline-block; width: 49.15254%; float: left; margin-top: 5px; }
  .abouttip-txt .abouttip-txt-list li:nth-child(2n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
  .abouttip-txt .abouttip-txt-list li:nth-child(2n + 2) { margin-left: 50.84746%; margin-right: -100%; clear: none; } }
.abouttip-txt .abouttip-txt-list li span { padding: 0 5px; font-weight: 700; }
@media only screen and (max-width: 420px) { .abouttip-txt .abouttip-txt-list li span { padding: 0 2px; }
  .abouttip-txt .abouttip-txt-list li span:nth-child(2) { font-size: 10px; } }

/* 
* *** features page ***********************
*/
.featuresComp { display: block; overflow: hidden; clear: both; padding: 0 25px; }
.featuresComp .featuresCell { display: block; width: 29.41176%; float: left; margin-top: 40px; margin-bottom: 40px; }
.featuresComp .featuresCell:nth-child(3n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
.featuresComp .featuresCell:nth-child(3n + 2) { margin-left: 35.29412%; margin-right: -100%; clear: none; }
.featuresComp .featuresCell:nth-child(3n + 3) { margin-left: 70.58824%; margin-right: -100%; clear: none; }
@media only screen and (max-width: 768px) { .featuresComp .featuresCell { width: 47.82609%; float: left; }
  .featuresComp .featuresCell:nth-child(2n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
  .featuresComp .featuresCell:nth-child(2n + 2) { margin-left: 52.17391%; margin-right: -100%; clear: none; } }
@media only screen and (max-width: 420px) { .featuresComp .featuresCell { width: 99.16667%; float: left; }
  .featuresComp .featuresCell:nth-child(1n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; } }
.featuresComp .featuresCell > h3 { font-size: 22px; color: #990000; margin-bottom: 20px; padding: 0; }
.featuresComp .featuresCell > h3 span { display: inline-block; border-bottom: 2px solid #990000; font-weight: 700; }
.featuresComp .featuresCell > p { font-size: 14px; color: #342c29; margin: 0; padding: 0; }

/* 
* *** contact page ***********************
*/
.formComp { display: block; width: 700px; margin: auto auto; }
@media only screen and (max-width: 700px) { .formComp { padding: 0 20px; width: 100%; } }

.formCell { width: 100%; display: block; }
.formCell fieldset { border: none; margin: 20px auto; padding: 10px 5px; }
@media only screen and (max-width: 540px) { .formCell fieldset { margin: 10px auto; } }
.formCell fieldset.nobd { border: none; }
.formCell fieldset .input-label { font-size: 20px; width: 19.49153%; display: block; color: #990000; border-right: 6px solid #990000; float: left; font-weight: 700; }
@media only screen and (max-width: 540px) { .formCell fieldset .input-label { width: 100%; border: none; border-bottom: 3px solid #990000; } }
.formCell fieldset label.error { display: block; width: 100%; color: rgba(153, 0, 0, 0.5); font-size: 14px; text-align: right; float: right; padding: 0 10px 0 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
.formCell fieldset textarea { font-size: 18px; display: inline-block; width: 78.81356%; padding: 1px 0; border: 1px solid; border-color: #bbbbbb; padding: 3px 5px; font-family: 'Nunito','Noto Sans TC', 'Microsoft JhengHei','Helvetica Neue', Arial, sans-serif; }
@media only screen and (max-width: 540px) { .formCell fieldset textarea { width: 100%; float: left; } }
.formCell fieldset .input-text { font-size: 18px; display: inline-block; width: 78.81356%; padding: 3px 5px; border: 1px solid #bbbbbb; letter-spacing: 1px; color: #342c29; }
.formCell fieldset .input-text:focus { background: #ececec; }
@media only screen and (max-width: 540px) { .formCell fieldset .input-text { width: 100%; float: left; } }

.submitComp { display: block; width: 78.81356%; float: right; }
@media only screen and (max-width: 540px) { .submitComp { width: 100%; float: left; } }
.submitComp .input-submit { display: inline-block; color: #ececec; background: #990000; border: none; font-size: 18px; text-align: center; padding: 2px 15px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; cursor: pointer; font-family: 'Noto Sans TC'; }

b.up-tip { display: inline-block; width: 80%; float: right; }
@media only screen and (max-width: 540px) { b.up-tip { width: 100%; float: left; } }

.no-js .inputfile + label { display: none; }

.inputfile { width: 0.1px; height: 0.1px; opacity: 0; overflow: hidden; position: absolute; z-index: -1; }

.inputfile + label { max-width: 78.81356%; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; display: inline-block; overflow: hidden; padding: 3.5px 20px; margin: 0 5px; }
@media only screen and (max-width: 540px) { .inputfile + label { max-width: 100%; margin: 10px 0; } }

.inputfile:focus + label, .inputfile.has-focus + label { outline: 1px dotted #ececec; outline: -webkit-focus-ring-color auto 5px; }

.inputfile + label { color: #ececec; background-color: #990000; font-family: 'Nunito','Noto Sans TC', 'Microsoft JhengHei','Helvetica Neue', Arial, sans-serif; }

.inputfile:focus + label, .inputfile.has-focus + label, .inputfile + label:hover { background-color: #e32226; }

/* 
* *** control page ***********************
*/
.deviceComp { display: block; padding: 0 30px; clear: both; }

.deviceCell { display: flex; width: 83.05085%; height: 100%; margin: 45px auto; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; align-content: flex-start; }
@media only screen and (max-width: 980px) { .deviceCell { width: 100%; } }
.deviceCell:nth-child(odd) div.info div.cont { order: 2; }
.deviceCell:nth-child(odd) div.info div.forward { order: 1; }
.deviceCell:nth-child(odd) div.info div.forward span:nth-child(1) { display: none; }
.deviceCell:nth-child(even) figure { order: 2; }
.deviceCell:nth-child(even) div.info { order: 1; }
.deviceCell:nth-child(even) div.info div.forward span:nth-child(2) { display: none; }
.deviceCell figure { width: 32.20339%; }
.deviceCell figure img { display: block; object-fit: cover; }
.deviceCell div.info { width: 66.10169%; display: flex; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; align-items: center; align-content: center; }
.deviceCell div.info div.cont { width: 49.15254%; }
@media only screen and (max-width: 580px) { .deviceCell div.info div.cont { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }
  .deviceCell div.info div.cont h3 span { font-size: 18px; }
  .deviceCell div.info div.cont p { font-size: 12px; line-height: 14px; } }
.deviceCell div.info div.cont h3 { font-size: 24px; color: #990000; margin: 0; margin-bottom: 10px; padding: 0; }
.deviceCell div.info div.cont h3 span { display: inline-block; font-weight: 500; border-bottom: 2px solid #990000; }
.deviceCell div.info div.cont p { font-size: 18px; color: #342c29; margin: 0; padding: 0; line-height: 16px; }
.deviceCell div.info div.forward { width: 49.15254%; color: #990000; font-size: 28px; text-align: center; }
@media only screen and (max-width: 580px) { .deviceCell div.info div.forward { display: none; } }

.peripheralComp { display: block; width: 100%; overflow: hidden; clear: both; }

.dooritemComp { display: block; }
.dooritemComp .dooritemCell { list-style: none; display: block; margin: 0 30px; padding: 0; }
.dooritemComp .dooritemCell > li { display: flex; width: 29.41176%; float: left; position: relative; border: 1px solid #bbbbbb; padding: 0; margin-bottom: 90px; }
.dooritemComp .dooritemCell > li:nth-child(3n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
.dooritemComp .dooritemCell > li:nth-child(3n + 2) { margin-left: 35.29412%; margin-right: -100%; clear: none; }
.dooritemComp .dooritemCell > li:nth-child(3n + 3) { margin-left: 70.58824%; margin-right: -100%; clear: none; }
@media only screen and (max-width: 680px) { .dooritemComp .dooritemCell > li { width: 49.15254%; float: left; }
  .dooritemComp .dooritemCell > li:nth-child(2n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
  .dooritemComp .dooritemCell > li:nth-child(2n + 2) { margin-left: 50.84746%; margin-right: -100%; clear: none; } }
.dooritemComp .dooritemCell > li article { display: flex; height: 45px; width: 100%; position: absolute; bottom: -45px; left: 0; padding: 3px 5px; border: 1px solid #bbbbbb; overflow: hidden; text-align: center; flex-direction: row; flex-wrap: nowrap; justify-content: center; align-items: center; align-content: center; text-overflow: ellipsis; }
@media only screen and (max-width: 640px) { .dooritemComp .dooritemCell > li article { align-items: center; line-height: 15px; } }
.dooritemComp .dooritemCell > li article span { font-size: 14px; text-align: center; max-height: 45px; text-overflow: ellipsis; }
@media only screen and (max-width: 640px) { .dooritemComp .dooritemCell > li article span { font-size: 12px; } }
.dooritemComp .dooritemCell > li > a { display: block; width: 100%; height: 100%; overflow: hidden; }
.dooritemComp .dooritemCell > li > a img { width: 100%; display: block; object-fit: cover; object-position: center center; }

.dooritemCase { list-style: none; display: block; padding: 0 30px; }
.dooritemCase > section { display: block; width: 29.41176%; float: left; margin-bottom: 25px; position: relative; }
.dooritemCase > section:nth-child(3n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
.dooritemCase > section:nth-child(3n + 2) { margin-left: 35.29412%; margin-right: -100%; clear: none; }
.dooritemCase > section:nth-child(3n + 3) { margin-left: 70.58824%; margin-right: -100%; clear: none; }
@media only screen and (max-width: 680px) { .dooritemCase > section { width: 47.82609%; float: left; }
  .dooritemCase > section:nth-child(2n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
  .dooritemCase > section:nth-child(2n + 2) { margin-left: 52.17391%; margin-right: -100%; clear: none; } }
@media only screen and (max-width: 480px) { .dooritemCase > section { width: 99.16667%; float: left; }
  .dooritemCase > section:nth-child(1n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; } }

/* 
* *** qaComp ***********************
*/
.qaComp { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; max-width: 1000px; margin-left: auto; margin-right: auto; }
@media only screen and (max-width: 1000px) { .qaComp { padding: 0 30px; } }
.qaComp .qaCell { margin: 0; padding: 0; list-style: none; }
.qaComp .qaCell > li.list { display: block; width: 100%; margin: 0; }
.qaComp .qaCell > li.list:nth-child(even) { background: #ececec; }
.qaComp .qaCell > li.list:nth-child(odd) { border-top: none; }
.qaComp .qaCell > li.list .title { border: 1px solid #bbbbbb; color: #990000; font-size: 16px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; padding: 10px 30px 10px 10px; margin: 0; cursor: pointer; width: 100%; position: relative; overflow: hidden; text-overflow: ellipsis; text-align: center; }
@media only screen and (max-width: 780px) { .qaComp .qaCell > li.list .title { font-size: 14px; } }
.qaComp .qaCell > li.list .title > label { cursor: pointer; margin-left: 35px; margin-right: 35px; }
.qaComp .qaCell > li.list .title > .icon-idea { font-size: 24px; text-align: left; position: absolute; left: 10px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); }
.qaComp .qaCell > li.list .title > .icon-plus { font-size: 12px; background: #990000; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; color: #ececec; padding: 6px 7px; position: absolute; right: 10px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); text-shadow: 0 1px 0 #342c29, 0 2px 0 #342c29; }
.qaComp .qaCell > li.list .title > .icon-minus { font-size: 12px; background: #ececec; -webkit-border-radius: 50px; -moz-border-radius: 50px; -o-border-radius: 50px; border-radius: 50px; color: #990000; padding: 6px 7px; position: absolute; right: 10px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%); text-shadow: 0 1px 0 #342c29, 0 2px 0 #342c29; }
.qaComp .qaCell > li.list .title.open { background: #990000; color: #ececec; }
.qaComp .qaCell > li.list .content { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; padding: 10px; margin: 0 auto; display: none; font-size: 14px; color: #342c29; line-height: 16px; text-decoration: none; text-align: center; }

.listMenuComp { display: block; border-top: 1px solid #bbbbbb; border-bottom: 1px solid #bbbbbb; }
.listMenuComp > nav.door-product-nav { text-align: center; }
.listMenuComp > nav.door-product-nav a { font-size: 16px; text-decoration: none; color: #555555; padding: 2px 5px; }
.listMenuComp > nav.door-product-nav a:hover { color: #e32226; }
.listMenuComp > nav.door-product-nav a.lock:before { color: #e32226; }
.listMenuComp > nav.door-product-nav a:before { content: " • "; color: white; }

.dooritemDetComp { padding: 0 50px; max-width: 1100px; overflow: hidden; clear: both; }
.dooritemDetComp .Det-imgs { display: block; width: 49.15254%; float: left; overflow: hidden; clear: both; *zoom: 1; }
.dooritemDetComp .Det-imgs:before, .dooritemDetComp .Det-imgs:after { content: " "; display: table; }
.dooritemDetComp .Det-imgs:after { clear: both; }
@media only screen and (max-width: 640px) { .dooritemDetComp .Det-imgs { width: 100%; } }
.dooritemDetComp .Det-imgs .imgsView { display: block; width: 83.05085%; float: left; clear: both; }
.dooritemDetComp .Det-imgs .imgsViewSide { display: block; width: 15.25424%; float: right; max-width: 15.25424%; overflow: hidden; }
.dooritemDetComp .Det-imgs .imgsViewSide img { display: block; object-fit: cover; }
.dooritemDetComp .Det-infos { display: block; width: 49.15254%; float: right; padding: 0 0 0 30px; }
@media only screen and (max-width: 640px) { .dooritemDetComp .Det-infos { width: 100%; padding: 0; } }

.imgsBoard { padding: 0; margin: 0; display: block; width: 100%; }
.imgsBoard a { display: none; left: 0; right: 0; }
.imgsBoard a.lock { display: block; }
.imgsBoard a img { display: block; width: 100%; object-fit: cover; }

.imgsTumbs { display: flex; width: 100%; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; justify-items: center; align-content: center; align-items: center; }
.imgsTumbs > a { display: block; }
.imgsTumbs > a img { display: block; object-fit: cover; }
.imgsTumbs.imgsless { justify-content: flex-start; }
.imgsTumbs.imgsless > a { width: 32.20339%; padding-right: 10px; }
.imgsTumbs.bxticker { display: block; clear: both; width: 100%; }
.imgsTumbs.bxticker img { width: 100%; object-fit: cover; }

.permanentComp { display: block; overflow: hidden; clear: both; padding: 0 50px; max-width: 1100px; }
@media only screen and (max-width: 640px) { .permanentComp { width: 100%; } }
.permanentComp .permanentCell { display: block; width: 40.67797%; float: left; }
@media only screen and (max-width: 640px) { .permanentComp .permanentCell { width: 100%; } }

.permanent-list { display: block; list-style: none; }
.permanent-list li { display: block; width: 48.57143%; float: left; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; overflow: hidden; clear: both; }
.permanent-list li:nth-child(2n + 1) { margin-left: 0; margin-right: -100%; clear: both; margin-left: 0; }
.permanent-list li:nth-child(2n + 2) { margin-left: 51.42857%; margin-right: -100%; clear: none; }
.permanent-list li img { object-fit: cover; }
.permanent-list li p { padding: 5px; margin: 0; font-size: 14px; text-align: center; }

.floating-links { display: none; position: fixed; z-index: 9900; right: 5px; bottom: 100px; flex-wrap: nowrap; flex-direction: column; justify-content: flex-end; align-items: center; /* 物件對齊 -> 
stretch|center|flex-start|flex-end|space-between|space-around|initial|inherit;
*/ align-content: stretch; }
@media only screen and (max-width: 640px) { .floating-links { bottom: 20px; }
  .floating-links a { font-size: 35px; width: 35px; height: 35px; }
  .floating-links a span:before { width: 30px; height: 30px; } }
.floating-links a { text-decoration: none; font-size: 45px; display: block; width: 45px; height: 45px; text-align: center; margin: 5px; -webkit-transition: all 0.2s ease-in; -moz-transition: all 0.2s ease-in; -ms-transition: all 0.2s ease-in; -o-transition: all 0.2s ease-in; transition: all 0.2s ease-in; }
.floating-links a:hover { -moz-transform: scale(1.1); -webkit-transform: scale(1.1); -o-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
.floating-links a img { display: block; width: 100%; }

.bx-controls-direction { margin: 5px auto; display: flex; justify-content: space-between; }
.bx-controls-direction > a { text-decoration: none; font-size: 14px; padding: 2px 10px; color: #990000; border: 1px solid #990000; }
.bx-controls-direction > a:hover { background: #990000; color: #ececec; }

/*# sourceMappingURL=main.css.map */