@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@700&display=swap");
html, body, header, main, aside, footer, menu, nav, article, section, hgroup, h1, h2, h3, h4, h5, h6, p, canvas, embed, video, form, blockquote, details, figure, figcaption, img, div, span, applet, object, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, fieldset, label, legend, input, textarea, output, ruby, summary, time, mark, audio, hr { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; }

html, body, header, main, aside, footer, menu, nav, article, section, hgroup, form, blockquote, details, figure, figcaption, div, p { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; }

h1, h2, h3, h4, h5, h6 { display: inline-block; position: relative; width: auto; height: auto; }

canvas, iframe, embed, video, img { display: block; position: relative; width: auto; height: auto; margin: 0 auto; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

body { background: white; user-select: none; -webkit-user-select: none; /* for Chrome */ -moz-user-select: none; /* for Firefox */ -o-user-select: none; }

a { text-decoration: none; border: none; outline: medium none !important; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; }
a:focus, a:link, a:visited, a:hover, a:active { border: none; outline: medium none !important; }
a, a:link, a:visited { color: #333333; }
a:hover, a:active { color: #c42607; }

.btn { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; padding-top: 8px; padding-bottom: 10px; font-size: 1.25rem; line-height: 1.2; text-align: center; }
.btn, .btn:link, .btn:visited, .btn:hover, .btn:active { color: white; }
.btn, .btn:link, .btn:visited { background: #c42607; }
.btn:hover, .btn:active { background: #e42a04; }

@media (max-width: 500px) { .btn { padding-top: 10px; font-size: 16px; } }
body { font-family: 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; font-size: 16px; line-height: 1.375; color: #333333; text-decoration: none; }

h1 { font-size: 3.4375rem; }

h2 { font-size: 2.25rem; }

h3 { font-size: 2rem; }

h4 { font-size: 1.5625rem; }

h5 { font-size: 1.25rem; }

h6 { font-size: 16px; }

@media (max-width: 768px) { h1 { font-size: 2.25rem; }
  h2 { font-size: 2rem; }
  h3 { font-size: 1.5625rem; } }
@media (max-width: 640px) { h2 { font-size: 1.5625rem; } }
@media (max-width: 500px) { h1 { font-size: 2rem; }
  body { font-size: 16px; } }
@media (max-width: 420px) { h2 { font-size: 1.25rem; }
  h3 { font-size: 1.25rem; }
  h4 { font-size: 1.25rem; } }
#wrap { min-width: 320px; }

.page .ctr { max-width: 990px; }

@media (max-width: 1100px) { .page .ctr { width: calc(100% - 50px); width: -webkit-calc(100% - 50px); width: -moz-calc(100% - 50px); width: -o-calc(100% - 50px); } }
@media (max-width: 640px) { .page .ctr { width: calc(100% - 40px); width: -webkit-calc(100% - 40px); width: -moz-calc(100% - 40px); width: -o-calc(100% - 40px); } }
@media (max-width: 500px) { .page .ctr { width: calc(100% - 30px); width: -webkit-calc(100% - 30px); width: -moz-calc(100% - 30px); width: -o-calc(100% - 30px); } }
#overlay { position: fixed; display: block; width: 100vw; height: 100vh; left: 0; top: 0; background: white; }

#gotop { background-image: url(../base/gotop.svg); background-repeat: no-repeat; background-size: cover; background-position: center; display: block; position: fixed; width: 36px; height: 36px; left: calc(50% - 18px); left: -webkit-calc(50% - 18px); left: -moz-calc(50% - 18px); left: -o-calc(50% - 18px); bottom: 15px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; display: none; z-index: 9; }
#gotop, #gotop:link, #gotop:visited { background-color: #a81c00; }
#gotop:hover, #gotop:active { background-color: #c42607; }

#header { background: white; position: fixed; left: 0; top: 0; -webkit-box-shadow: rgba(0, 0, 0, 0.2) 0 0 15px; -moz-box-shadow: rgba(0, 0, 0, 0.2) 0 0 15px; box-shadow: rgba(0, 0, 0, 0.2) 0 0 15px; z-index: 10; }
#header .ctr:after { clear: both; content: ""; display: table; table-layout: fixed; }
#header .ctr .logo { display: block; position: relative; width: 275px; float: left; }

@media (max-width: 640px) { #header .ctr .logo { margin: 0 auto; float: none; clear: both; } }
@media (max-width: 500px) { #header .ctr .logo { width: 225px; } }
@media (max-width: 420px) { #header .ctr .logo { float: left; } }
#navbtn, #nav .clz { display: block; position: fixed; width: 45px; height: 45px; right: 5px; top: 5px; display: none; }

#nav .clz { background: white; }

#nav { display: block; position: relative; width: calc(100% - 275px); width: -webkit-calc(100% - 275px); width: -moz-calc(100% - 275px); width: -o-calc(100% - 275px); height: 43px; margin-top: 6px; text-align: right; float: right; }
#nav ul { display: inline-block; position: relative; width: auto; height: auto; margin: 0; vertical-align: top; }
#nav ul li { position: relative; display: inline-block; width: auto; height: 100%; margin: 0 auto; vertical-align: top; }
#nav ul li a { position: relative; display: inline-block; width: auto; height: auto; }
#nav ul li a.active { color: #c42607; cursor: default; }

#menu { padding: 0; }
#menu li a { font-size: 18px; line-height: 43px; font-weight: bold; padding: 0 20px; }
#menu li a, #menu li a:link, #menu li a:visited { color: #333333; }
#menu li a:hover, #menu li a:active { color: #c42607; }

.ics { padding: 0 10px; height: 43px; }
.ics li a { padding: 7px 5px; }
.ics li a img { -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; width: 30px; }
.ics li a img, .ics li a img:link, .ics li a img:visited { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -o-filter: grayscale(100%); }
.ics li a img:hover, .ics li a img:active { filter: grayscale(0); -webkit-filter: grayscale(0); -moz-filter: grayscale(0); -o-filter: grayscale(0); }

@media (max-width: 1000px) { #navbtn, #nav .clz { display: block; }
  #nav { width: 100%; height: auto; margin-top: 0; text-align: center; float: none; clear: both; padding-top: 5px; display: none; }
  #nav:before { background-image: -webkit-gradient(linear, to right, to left, color-stop(0%, rgba(68, 68, 68, 0)), color-stop(50%, rgba(68, 68, 68, 0.5)), color-stop(100%, rgba(68, 68, 68, 0))); background-image: -webkit-linear-gradient(to right, rgba(68, 68, 68, 0), rgba(68, 68, 68, 0.5), rgba(68, 68, 68, 0)); background-image: -moz-linear-gradient(to right, rgba(68, 68, 68, 0), rgba(68, 68, 68, 0.5), rgba(68, 68, 68, 0)); background-image: -o-linear-gradient(to right, rgba(68, 68, 68, 0), rgba(68, 68, 68, 0.5), rgba(68, 68, 68, 0)); background-image: linear-gradient(to right, rgba(68, 68, 68, 0), rgba(68, 68, 68, 0.5), rgba(68, 68, 68, 0)); content: ""; display: block; position: absolute; width: 100%; height: 1px; left: 0; top: 3px; }
  #menu { display: block !important; }
  #menu li { padding: 5px 15px; display: block !important; }
  #menu li:nth-of-type(even) { background: #f6f6f6; }
  .ics { margin-bottom: 20px; } }
@media (min-width: 1000px) { #nav { display: block !important; } }
@media (max-width: 500px) { #navbtn, #nav .clz { right: 0; top: 0; } }
#footer { background: white; min-height: 100px; }
#footer:before { background-image: -webkit-gradient(linear, to right, to left, color-stop(0%, #e7373c), color-stop(35%, #d15b9c), color-stop(67%, #e95504), color-stop(100%, #f9960d)); background-image: -webkit-linear-gradient(to right, #e7373c 0%, #d15b9c 35%, #e95504 67%, #f9960d 100%); background-image: -moz-linear-gradient(to right, #e7373c 0%, #d15b9c 35%, #e95504 67%, #f9960d 100%); background-image: -o-linear-gradient(to right, #e7373c 0%, #d15b9c 35%, #e95504 67%, #f9960d 100%); background-image: linear-gradient(to right, #e7373c 0%, #d15b9c 35%, #e95504 67%, #f9960d 100%); content: ""; display: block; position: relative; width: 100%; height: 4px; margin: 0 auto; }
#footer .ctr { max-width: 1260px; padding: 24px 0; font-size: 14px; }
#footer .links { text-align: left; padding: 0 15px; }
#footer .links a { display: inline-block; position: relative; width: auto; height: auto; padding: 0 10px; }
#footer .links a:before { background: #ddd; content: ""; position: absolute; width: 1px; height: 14px; left: -1px; top: 3px; }
#footer .links a:first-child { padding-left: 0px; }
#footer .links a:first-child:before { display: none; }
#footer .links a, #footer .links a:link, #footer .links a:visited { text-decoration: none; }
#footer .links a:hover, #footer .links a:active { text-decoration: underline; }
#footer .items { position: absolute; width: 340px; right: 0px; top: 22px; text-align: right; padding: 0 15px; }
#footer .items .bk { display: inline-block; width: 48%; }
#footer .items .bk .tag { text-align: right; }
#footer .items .bk .phone { display: inline-block; text-align: right; font-size: 1.125rem; padding-top: 5px; }
#footer .items .bk .phone, #footer .items .bk .phone:link, #footer .items .bk .phone:visited { color: #c42607; text-decoration: none; }
#footer .items .bk .phone:hover, #footer .items .bk .phone:active { text-decoration: underline; }
#footer .copyright { text-align: left; padding: 8px 15px 0 15px; }

@media (max-width: 1000px) { #footer .ctr { padding: 25px 15px 60px 15px; }
  #footer .links { text-align: center; padding: 0 0 10px 0; }
  #footer .links a { font-size: 12px; width: 32%; padding: 0 0 10px 0; }
  #footer .links a:before { display: none; }
  #footer .links a:first-child { padding-left: 10px; }
  #footer .items { position: relative; width: 100%; right: auto; top: auto; text-align: center; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 0; }
  #footer .items .bk { width: 48%; max-width: 160px; padding: 15px 0; }
  #footer .items .bk .tag { text-align: center; }
  #footer .items .bk .phone { text-align: center; }
  #footer .copyright { padding: 25px 0 0 0; text-align: center; } }
#vision { height: 600px; margin-top: 55px; overflow: hidden; }
#vision .ctr { background-repeat: no-repeat; background-size: cover; background-position: center; height: 100%; }

.index #vision .ctr { background-image: url(../images/vision-index.jpg); }

.promo #vision .ctr { background-image: url(../images/vision-promo.jpg); }

.project #vision .ctr { background-image: url(../images/vision-project.jpg); }

.article #vision .ctr { background-image: url(../images/vision-article.jpg); }

@media (max-width: 1440px) { #vision { height: 41vw; } }
@media (max-width: 1260px) { #vision { height: 45vw; } }
@media (max-width: 1000px) { #vision { height: 50vw; } }
@media (max-width: 768px) { #vision { height: 60vw; } }
@media (max-width: 640px) { #vision { margin-top: 45px; height: 100vw; }
  .index #vision .ctr { background-image: url(../images/vision-index-m.jpg); }
  .promo #vision .ctr { background-image: url(../images/vision-promo-m.jpg); }
  .project #vision .ctr { background-image: url(../images/vision-project-m.jpg); }
  .article #vision .ctr { background-image: url(../images/vision-article-m.jpg); } }
#intro { margin-top: -280px; }
#intro .title { background-image: -webkit-gradient(linear, to right, to left, color-stop(0%, #ffffff), color-stop(100%, rgba(255, 255, 255, 0))); background-image: -webkit-linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0)); background-image: -moz-linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0)); background-image: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0)); padding: 20px 30px; }
#intro .title h1 { font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; font-style: italic; letter-spacing: 0.9rem; vertical-align: middle; }
#intro .title h1 img { display: inline-block; width: 60px; margin-bottom: -8px; }
#intro .title span { display: inline-block; border: 2px solid black; font-weight: bold; font-size: 1.5625rem; vertical-align: middle; padding: 5px 10px; margin-bottom: -6px; margin-left: 8px; -webkit-transform: skew(-15deg); -moz-transform: skew(-15deg); -ms-transform: skew(-15deg); -o-transform: skew(-15deg); transform: skew(-15deg); }

@media (max-width: 1440px) { #intro { margin-top: -20vw; } }
@media (max-width: 1260px) { #intro { margin-top: -22vw; } }
@media (max-width: 1050px) { .index #intro .ctr, .promo #intro .ctr, .project #intro .ctr { max-width: 830px; } }
@media (max-width: 1000px) { #intro { margin-top: -24vw; }
  #intro .title span { font-size: 1.25rem; margin-bottom: -12px; } }
@media (max-width: 768px) { #intro { margin-top: -37vw; }
  #intro .title { padding-left: 40px; }
  #intro .title h1 { display: block; padding-bottom: 5px; letter-spacing: 0.5rem; }
  #intro .title h1 img { width: 40px; margin-bottom: -5px; }
  #intro .title span { padding: 2px 8px; margin-bottom: 0; margin-left: 0; } }
@media (max-width: 640px) { #intro { margin-top: -50vw; }
  #intro .title h1 img { width: 35px; margin-bottom: -4px; } }
@media (max-width: 500px) { #intro .title { padding-left: 20px; padding-top: 15px; }
  #intro .title span { font-size: 16px; } }
#spot .sptit, #spot .spcnt { -webkit-box-shadow: rgba(0, 0, 0, 0.07) 30px 30px 15px; -moz-box-shadow: rgba(0, 0, 0, 0.07) 30px 30px 15px; box-shadow: rgba(0, 0, 0, 0.07) 30px 30px 15px; padding: 25px 35px 35px 35px; }
#spot .sptit { background-repeat: no-repeat; background-size: cover; background-position: center; min-height: 10px; color: white; }
#spot .sptit h3 span { display: inline-block; }
#spot .spcnt { -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; z-index: 0; }
#spot .spcnt h2 { font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; color: #c42607; font-style: italic; padding-bottom: 10px; letter-spacing: 0.1rem; vertical-align: middle; }
#spot .spcnt h2 img { display: inline-block; height: 50px; margin-bottom: -8px; }
#spot .spcnt h5 { vertical-align: middle; }
#spot .spcnt p { vertical-align: middle; }
#spot .spcnt hr { border-bottom: 1px solid #d7d7d7; padding-top: 20px; margin-bottom: 20px; }
#spot .spcnt .mark { font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; color: #c42607; line-height: 1.2; }
#spot .spcnt .num { font-size: 1.5rem; }
#spot .spcnt:hover, #spot .spcnt:active { z-index: 1; -webkit-box-shadow: rgba(0, 0, 0, 0.25) 20px 20px 15px; -moz-box-shadow: rgba(0, 0, 0, 0.25) 20px 20px 15px; box-shadow: rgba(0, 0, 0, 0.25) 20px 20px 15px; -webkit-transform: scale(1.03); -moz-transform: scale(1.03); -ms-transform: scale(1.03); -o-transform: scale(1.03); transform: scale(1.03); }
#spot .spcnt1 { background: #f2f2f2; }
#spot .spcnt2 { background: #f6f6f6; }
#spot .spcnt3 { background: white; }
#spot .note { text-align: center; padding-top: 35px; color: #777777; }
#spot .note span { display: inline-block; }

.index #spot { padding-bottom: 80px; }
.index #spot .sptit, .index #spot .spcnt { height: 220px; }
.index #spot .sptit p, .index #spot .spcnt p { font-size: 1.1875rem; }
.index #spot .sptit p span, .index #spot .spcnt p span { display: inline-block; }
.index #spot .sptit { background-image: url(../images/spot-sptitbg1.jpg); width: 42%; margin-left: 0; }
.index #spot .sptit p { font-weight: bold; padding-bottom: 10px; }
.index #spot .sptit h3 { font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; }
.index #spot .spcnt { position: absolute; top: 0; }
.index #spot .spcnt1 { width: 29%; left: 42%; }
.index #spot .spcnt2 { background: white; width: 29%; left: 71%; }

.promo #spot { padding-bottom: 80px; }
.promo #spot .sptit { background-image: url(../images/spot-sptitbg2.jpg); height: 100px; }
.promo #spot .sptit h3 { width: 100%; text-align: center; }
.promo #spot .sptit h3 span { font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; }
.promo #spot .spcnt > div { min-height: 270px; padding-bottom: 15px; }
.promo #spot .spcnt > div > br { display: none; }
.promo #spot .spcnt p { font-size: 1.25rem; }
.promo #spot .spcnt .list { font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; line-height: 35px; }
.promo #spot .spcnt .list img { display: inline-block; height: 32px; margin-bottom: -5px; }
.promo #spot .spcnt .list .num { font-size: 2rem; }
.promo #spot .spcnt .add { color: #777777; }
.promo #spot .spcnt1 { width: 33.34%; margin-left: 0; }
.promo #spot .spcnt2, .promo #spot .spcnt3 { position: absolute; width: 33.33%; top: 100px; }
.promo #spot .spcnt2 .list2 .mark, .promo #spot .spcnt3 .list2 .mark { font-size: 1.5625rem; }
.promo #spot .spcnt2 .list2, .promo #spot .spcnt3 .list2 { margin-bottom: -4px; }
.promo #spot .spcnt2 { left: 33.33%; }
.promo #spot .spcnt3 { left: 66.66%; }

.project #spot { padding-bottom: 100px; }
.project #spot .sptit { background-image: url(../images/spot-sptitbg2.jpg); height: 130px; }
.project #spot .sptit p { font-size: 1.5625rem; text-align: center; }
.project #spot .sptit p > span { display: inline-block; }
.project #spot .sptit p > span span { font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; }
.project #spot .sptit h3 { width: 100%; text-align: center; font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; }
.project #spot .spcnt > div { min-height: 310px; padding-bottom: 15px; }
.project #spot .spcnt p { text-align: justify; }
.project #spot .spcnt1 { width: 33.34%; margin-left: 0; }
.project #spot .spcnt2, .project #spot .spcnt3 { position: absolute; width: 33.33%; top: 130px; }
.project #spot .spcnt2 { left: 33.33%; }
.project #spot .spcnt3 { left: 66.66%; }

.article #spot .sptit { background-image: url(../images/spot-sptitbg2.jpg); min-height: 10px; padding: 0; text-align: right; }
.article #spot .sptit a { display: inline-block; width: auto; height: auto; padding: 5px 15px; }
.article #spot .sptit a, .article #spot .sptit a:link, .article #spot .sptit a:visited, .article #spot .sptit a:hover, .article #spot .sptit a:active { color: white; }

@media (max-width: 1050px) { #spot .sptit, #spot .spcnt { padding: 20px 35px 25px 35px; }
  #spot .spcnt:hover, #spot .spcnt:active { -webkit-box-shadow: rgba(0, 0, 0, 0.15) 20px 20px 12px; -moz-box-shadow: rgba(0, 0, 0, 0.15) 20px 20px 12px; box-shadow: rgba(0, 0, 0, 0.15) 20px 20px 12px; -webkit-transform: scale(1.02); -moz-transform: scale(1.02); -ms-transform: scale(1.02); -o-transform: scale(1.02); transform: scale(1.02); }
  .index #spot .ctr, .promo #spot .ctr, .project #spot .ctr { max-width: 830px; }
  .index #spot .sptit { background-image: url(../images/spot-sptitbg2.jpg); width: 100%; height: 125px; margin-left: auto; }
  .index #spot .sptit h3 { display: block; text-align: center; }
  .index #spot .sptit h3 br { display: none; }
  .index #spot .sptit p { font-size: 1.4375rem; font-weight: normal; text-align: center; padding-bottom: 0; }
  .index #spot .spcnt { width: 50%; height: auto; min-height: 185px; }
  .index #spot .spcnt p br { display: none; }
  .index #spot .spcnt1 { position: relative; left: auto; top: auto; margin-left: 0; }
  .index #spot .spcnt2 { left: 50%; top: 125px; }
  .promo #spot .sptit { height: auto; }
  .promo #spot .spcnt { width: 100%; }
  .promo #spot .spcnt > div { min-height: auto; padding-bottom: 0; }
  .promo #spot .spcnt h2 { padding-bottom: 0; }
  .promo #spot .spcnt p { display: inline-block; width: auto; }
  .promo #spot .spcnt hr { padding-top: 15px; margin-bottom: 15px; margin-left: 0; width: calc(100% - 280px); width: -webkit-calc(100% - 280px); width: -moz-calc(100% - 280px); width: -o-calc(100% - 280px); }
  .promo #spot .spcnt .dis { font-style: italic; margin-bottom: -5px; }
  .promo #spot .spcnt .list { padding-left: 15px; }
  .promo #spot .spcnt .btn { position: absolute; width: 260px; right: 30px; bottom: 25px; }
  .promo #spot .spcnt1 { background: white; margin-left: auto; }
  .promo #spot .spcnt2, .promo #spot .spcnt3 { position: relative; left: 0; top: 0; }
  .project #spot .sptit { height: auto; }
  .project #spot .spcnt { width: 100%; }
  .project #spot .spcnt > div { min-height: auto; padding-bottom: 0; }
  .project #spot .spcnt h2 { padding-bottom: 0; }
  .project #spot .spcnt hr { padding-top: 10px; margin-bottom: 15px; }
  .project #spot .spcnt h5 { font-size: 1.5625rem; font-style: italic; padding-left: 10px; margin-bottom: -10px; }
  .project #spot .spcnt h5 br { display: none; }
  .project #spot .spcnt p { margin-left: 0; width: calc(100% - 280px); width: -webkit-calc(100% - 280px); width: -moz-calc(100% - 280px); width: -o-calc(100% - 280px); }
  .project #spot .spcnt .dis { margin-bottom: -5px; }
  .project #spot .spcnt .list { padding-left: 20px; }
  .project #spot .spcnt .btn { position: absolute; width: 260px; right: 30px; bottom: 25px; }
  .project #spot .spcnt1 { background: white; margin-left: auto; }
  .project #spot .spcnt2, .project #spot .spcnt3 { position: relative; left: 0; top: 0; } }
@media (max-width: 900px) { #spot .sptit, #spot .spcnt { padding: 20px 30px 25px 30px; }
  .promo #spot .spcnt > div { text-align: center; padding-bottom: 10px; }
  .promo #spot .spcnt > div > br { display: block; }
  .promo #spot .spcnt hr { padding-top: 10px; width: 100%; }
  .promo #spot .spcnt .list1 { padding-left: 0; }
  .promo #spot .spcnt .btn { position: relative; right: 0; bottom: 0; }
  .project #spot .spcnt > div { text-align: center; padding-bottom: 10px; }
  .project #spot .spcnt h5 { font-size: 1.4375rem; }
  .project #spot .spcnt p { width: 100%; }
  .project #spot .spcnt .btn { position: relative; right: 0; bottom: 0; } }
@media (max-width: 768px) { #spot .spcnt h2 img { height: 40px; margin-bottom: -5px; }
  .index #spot .sptit { height: auto; }
  .index #spot .spcnt { width: 100%; min-height: auto; text-align: center; }
  .index #spot .spcnt h2 { font-size: 2.25rem; vertical-align: top; padding-left: 10px; padding-bottom: 5px; }
  .index #spot .spcnt p { display: inline-block; width: 350px; padding-left: 20px; text-align: left; vertical-align: top; }
  .index #spot .spcnt p br { display: block; }
  .index #spot .spcnt1 { background: white; margin-left: auto; }
  .index #spot .spcnt2 { background: #f6f6f6; position: relative; left: 0; top: 0; }
  .project #spot .spcnt h5 { font-size: 1.25rem; } }
@media (max-width: 640px) { #spot .sptit, #spot .spcnt { padding: 20px 15px; }
  .index #spot .sptit h3 br { display: block; }
  .index #spot .sptit p { font-size: 1.25rem; }
  .index #spot .spcnt h2 { font-size: 2rem; padding-left: 0; }
  .index #spot .spcnt p { width: 300px; padding-left: 10px; font-size: 16px; }
  .index #spot .spcnt p > span { display: inline-block; }
  .promo #spot .spcnt h2 { font-size: 2rem; }
  .promo #spot .spcnt hr { padding-top: 5px; margin-bottom: 10px; }
  .promo #spot .spcnt .list { font-size: 16px; }
  .promo #spot .spcnt .list .mark { font-size: 1.25rem; }
  .promo #spot .spcnt .list .num { font-size: 1.5625rem; }
  .promo #spot .spcnt .add { font-size: 14px; }
  .promo #spot .spcnt .add span { display: inline-block; }
  .project #spot .sptit p { font-size: 1.25rem; }
  .project #spot .spcnt { padding-left: 25px; padding-right: 25px; }
  .project #spot .spcnt h2 { font-size: 2rem; }
  .project #spot .spcnt h5 { width: 220px; margin-bottom: 0; text-align: left; font-size: 16px; }
  .project #spot .spcnt h5 br { display: block; }
  .project #spot .spcnt hr { margin-bottom: 10px; }
  .project #spot .spcnt p { line-height: 1.5; }
  .project #spot .spcnt3 h5 { padding-top: 10px; } }
@media (max-width: 500px) { .index #spot { padding-bottom: 50px; }
  .index #spot .sptit p { font-size: 16px; padding-bottom: 5px; }
  .index #spot .spcnt p { width: 200px; }
  .promo #spot { padding-bottom: 50px; }
  .project #spot { padding-bottom: 70px; }
  .project #spot .sptit p { font-size: 16px; padding-bottom: 5px; } }
@media (max-width: 460px) { .promo #spot .spcnt .list { display: block; }
  .promo #spot .spcnt .list2 { padding-left: 0; margin-top: -5px; } }
@media (max-width: 420px) { #spot .sptit { padding: 15px; }
  #spot .spcnt h2 img { height: 30px; margin-bottom: -3px; }
  #spot .note { font-size: 14px; }
  .index #spot .spcnt h2 { font-size: 1.5625rem; }
  .index #spot .spcnt p { display: block; width: 100%; padding-left: 0; text-align: center; }
  .promo #spot .spcnt h2 { font-size: 1.5625rem; }
  .project #spot .spcnt { padding-left: 15px; padding-right: 15px; }
  .project #spot .spcnt h2 { display: block; font-size: 1.5625rem; }
  .project #spot .spcnt h5 { display: block; width: 100%; padding-left: 0; padding-top: 5px; text-align: center; }
  .project #spot .spcnt1 h5 br { display: none; } }
#tags { padding-bottom: 30px; }
#tags .ctr { text-align: center; overflow: hidden; }
#tags .ctr:before { background: #c42607; content: ""; display: block; position: absolute; width: 100%; height: 2px; left: 0; bottom: 0; }
#tags .tag { background: white; display: inline-block; position: relative; width: 190px; height: 50px; font-size: 1.5625rem; text-align: center; padding: 8px 5px 0 5px; margin: 0 10px; border-left: 2px solid; border-right: 2px solid; border-top: 2px solid; border-bottom: 2px solid; -moz-border-radius-topleft: 15px; -webkit-border-top-left-radius: 15px; border-top-left-radius: 15px; -moz-border-radius-topright: 15px; -webkit-border-top-right-radius: 15px; border-top-right-radius: 15px; }
#tags .tag br { display: none; }
#tags .tag, #tags .tag:link, #tags .tag:visited { color: #bbbbbb; border-color: #bbbbbb; border-bottom-color: #c42607; }
#tags .tag:hover, #tags .tag:active { color: #c42607; border-color: #c42607; }
#tags .tag.active { color: #c42607; border-color: #c42607; border-bottom-color: white; font-weight: bold; }

@media (min-width: 1600px) { #tags.wide .ctr { max-width: 1505px; } }
@media (max-width: 1050px) { #tags .ctr { max-width: 830px; } }
@media (max-width: 1000px) { #tags .tag { width: 150px; height: 47px; font-size: 1.25rem; margin: 0 5px; } }
@media (max-width: 640px) { #tags .tag { width: 130px; } }
@media (max-width: 500px) { #tags .tag { width: 27%; height: 57px; font-size: 16px; line-height: 1.2; }
  #tags .tag br { display: block; } }
.award { padding-bottom: 50px; }
.award .ctr { text-align: center; }
.award .ctr:after { clear: both; content: ""; display: table; table-layout: fixed; }
.award .alignleft { text-align: left !important; text-align: justify !important; }
.award .break-mb { display: none; }
.award .pro { background: white; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 12px 12px 40px; -moz-box-shadow: rgba(0, 0, 0, 0.1) 12px 12px 40px; box-shadow: rgba(0, 0, 0, 0.1) 12px 12px 40px; width: 475px; height: auto; min-height: 270px; padding: 20px 25px 25px 25px; float: left; margin: 0 40px 30px 0; }
.award .pro:hover, .award .pro:active { -webkit-box-shadow: rgba(0, 0, 0, 0.2) 17px 17px 40px; -moz-box-shadow: rgba(0, 0, 0, 0.2) 17px 17px 40px; box-shadow: rgba(0, 0, 0, 0.2) 17px 17px 40px; }
.award .pro:hover > h4, .award .pro:active > h4 { color: #8d7a12; }
.award .pro:nth-child(2n) { margin-right: 0; }
.award .pro h4 { -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; display: block; font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; text-align: justify; padding-bottom: 10px; text-align: center; }
.award .pro > h4 { min-height: 65px; }
.award .pro h3 { display: block; font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; text-align: center; padding-bottom: 15px; margin-top: -10px; color: #8d7a12; }
.award .pro .record { min-height: 105px; }
.award .pro .record > div { display: inline-block; position: relative; width: 95px; height: 95px; margin: 0 2px 10px 2px; }
.award .pro .record > div > a { background: radial-gradient(circle at 100% 100%, #ffffff 0%, #ffffff 48px, transparent 48px) 0% 0%/50px 50px no-repeat, radial-gradient(circle at 0 100%, #ffffff 0%, #ffffff 48px, transparent 48px) 100% 0%/50px 50px no-repeat, radial-gradient(circle at 100% 0, #ffffff 0%, #ffffff 48px, transparent 48px) 0% 100%/50px 50px no-repeat, radial-gradient(circle at 0 0, #ffffff 0%, #ffffff 48px, transparent 48px) 100% 100%/50px 50px no-repeat, linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 4px) calc(100% - 100px) no-repeat, linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 100px) calc(100% - 4px) no-repeat, linear-gradient(165deg, #fde176 0%, #fffdba 33%, #a87e2e 65%, #f9d768 100%); border-radius: 50px; display: block; position: relative; width: 100%; height: 100%; margin: 0 auto; }
.award .pro .record > div > a span { display: block; width: 100%; text-align: center; color: #846820; font-weight: bold; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; }
.award .pro .record > div > a span:first-child { font-size: 1.25rem; padding-right: 13px; padding-top: 22px; margin-bottom: -2px; }
.award .pro .record > div > a:before { background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url(../images/pro-ic.svg); content: ""; display: block; position: absolute; width: 50px; height: 50px; right: -3px; top: -10px; }
.award .pro .record > div > a:after { background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url(../images/pro-arr.svg); content: ""; display: block; position: absolute; width: 20px; height: 10px; left: calc(50% - 10px); left: -webkit-calc(50% - 10px); left: -moz-calc(50% - 10px); left: -o-calc(50% - 10px); bottom: 12px; animation: arrDownAni 1.5s infinite linear; -webkit-animation: arrDownAni 1.5s infinite linear; }
.award .pro .record > div > a span, .award .pro .record > div > a:link span, .award .pro .record > div > a:visited span { color: #d3aa35; }
.award .pro .record > div > a:hover span, .award .pro .record > div > a:active span { color: #846820; }
.award .pro .record > div > a:hover:before, .award .pro .record > div > a:active:before { animation: shineAni 1s infinite ease-out; -webkit-animation: shineAni 1s infinite ease-out; }
.award .pro .target span { padding: 0 3px; }
.award .pro .target a { display: inline-block; position: relative; width: auto; height: auto; padding: 5px 8px; margin: 5px 0 0 2px; -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; }
.award .pro .target a, .award .pro .target a:link, .award .pro .target a:visited, .award .pro .target a:hover, .award .pro .target a:active { color: white; }
.award .pro .target a, .award .pro .target a:link, .award .pro .target a:visited { background: #c0c0c0; }
.award .pro .target a:hover, .award .pro .target a:active { background: #d0d0d0; }
.award .pro .target a.main, .award .pro .target a.main:link, .award .pro .target a.main:visited { background: #c42607; }
.award .pro .target a.main:hover, .award .pro .target a.main:active { background: #e42a04; }
.award .record-pop { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(214, 167, 62, 0.85)), color-stop(100%, rgba(241, 228, 139, 0.85))); background-image: -webkit-linear-gradient(rgba(214, 167, 62, 0.85), rgba(241, 228, 139, 0.85)); background-image: -moz-linear-gradient(rgba(214, 167, 62, 0.85), rgba(241, 228, 139, 0.85)); background-image: -o-linear-gradient(rgba(214, 167, 62, 0.85), rgba(241, 228, 139, 0.85)); background-image: linear-gradient(rgba(214, 167, 62, 0.85), rgba(241, 228, 139, 0.85)); display: block; position: fixed; width: 100vw; height: 100vh; left: 0; top: 0; display: none; z-index: 9999; }
.award .record-pop:after { content: ''; position: relative; width: 0; height: 100%; display: inline-block; vertical-align: middle; }
.award .record-pop .popctr { -webkit-box-shadow: rgba(69, 55, 15, 0.1) 30px 30px 15px; -moz-box-shadow: rgba(69, 55, 15, 0.1) 30px 30px 15px; box-shadow: rgba(69, 55, 15, 0.1) 30px 30px 15px; display: inline-block; background: white; width: 640px; height: auto; padding: 40px 30px 30px 30px; vertical-align: middle; }
.award .record-pop .popctr .list { margin-bottom: 0.5rem; font-size: 1.25rem; padding-left: 15px; }
.award .record-pop .popctr .list > span { position: relative; }
.award .record-pop .popctr .list > span:before { display: block; position: absolute; background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url(../images/record-ic.svg); content: ""; width: 28px; height: 28px; left: -30px; top: 0; }
.award .record-pop .close { display: block; position: absolute; background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url(../base/close.svg); content: ""; width: 40px; height: 40px; right: -8px; top: -8px; }

@keyframes arrDownAni { from { bottom: 12px; }
  60% { bottom: 7px; }
  to { bottom: 12px; } }

@keyframes shineAni { from { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); }
  60% { -webkit-transform: scale(1.1); -moz-transform: scale(1.1); -ms-transform: scale(1.1); -o-transform: scale(1.1); transform: scale(1.1); }
  to { -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); } }

@media (min-width: 1600px) { #award1 .ctr { max-width: 1505px; }
  #award1 .pro:nth-child(2n) { margin-right: 40px !important; }
  #award1 .pro:nth-child(3n) { margin-right: 0 !important; } }
@media (max-width: 1050px) { .award .ctr { max-width: 830px; }
  .award .pro { width: calc(50% - 10px); width: -webkit-calc(50% - 10px); width: -moz-calc(50% - 10px); width: -o-calc(50% - 10px); margin-right: 20px; margin-bottom: 20px; padding-left: 15px; padding-right: 15px; }
  .award .pro > h4 { font-size: 1.375rem; } }
@media (max-width: 900px) { .award .pro > h4 { font-size: 1.25rem; } }
@media (max-width: 820px) { .award .ctr { max-width: 500px; }
  .award .pro { width: 100%; padding-left: 25px; padding-right: 25px; min-height: auto; margin: 0 auto 20px auto; }
  .award .pro:nth-child(2n) { margin-right: auto; }
  .award .pro > h4 { font-size: 1.5625rem; min-height: auto; } }
@media (max-width: 768px) { .award .record-pop .popctr { max-width: 560px; min-width: 290px; width: calc(100% - 30px); width: -webkit-calc(100% - 30px); width: -moz-calc(100% - 30px); width: -o-calc(100% - 30px); padding: 30px 10px 20px 10px; }
  .award .record-pop .popctr .list { font-size: 1.125rem; }
  .award .record-pop .popctr .list > span:before { width: 25px; height: 25px; left: -27px; } }
@media (max-width: 640px) { .award .pro > h4 { font-size: 1.375rem; }
  .award .record-pop .popctr > h4 { font-size: 1.375rem; } }
@media (max-width: 500px) { .award .pro { padding-left: 20px; padding-right: 20px; }
  .award .pro > h4 { font-size: 1.25rem; }
  .award .record-pop .popctr { padding: 30px 20px 20px 20px; }
  .award .record-pop .popctr .list { text-align: left; padding-left: 20px; text-align: justify; }
  .award .record-pop .popctr .list > span br { display: none; }
  .award .record-pop .popctr > h4 { font-size: 1.25rem; } }
@media (max-width: 420px) { .award .alignleft-mb { text-align: left !important; }
  .award .break-mb { display: block !important; }
  .award .pro { padding-left: 15px; padding-right: 15px; }
  .award .pro > h4 br { display: none; }
  .award .pro .record { min-height: 90px; }
  .award .pro .record > div { width: 85px; height: 85px; }
  .award .pro .record > div > a { background: radial-gradient(circle at 100% 100%, #ffffff 0%, #ffffff 43px, transparent 43px) 0% 0%/45px 45px no-repeat, radial-gradient(circle at 0 100%, #ffffff 0%, #ffffff 43px, transparent 43px) 100% 0%/45px 45px no-repeat, radial-gradient(circle at 100% 0, #ffffff 0%, #ffffff 43px, transparent 43px) 0% 100%/45px 45px no-repeat, radial-gradient(circle at 0 0, #ffffff 0%, #ffffff 43px, transparent 43px) 100% 100%/45px 45px no-repeat, linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 4px) calc(100% - 100px) no-repeat, linear-gradient(#ffffff, #ffffff) 50% 50%/calc(100% - 100px) calc(100% - 4px) no-repeat, linear-gradient(165deg, #fde176 0%, #fffdba 33%, #a87e2e 65%, #f9d768 100%); }
  .award .pro .record > div > a span:first-child { font-size: 1.125rem; padding-right: 18px; padding-top: 18px; }
  .award .pro .record > div > a:before { width: 45px; height: 45px; right: -2px; top: -8px; }
  .award .record-pop .popctr > h4 br { display: none; }
  .award .record-pop .popctr h3 { margin-top: -5px; } }
#notice { background: #f6f6f6; padding-top: 50px; padding-bottom: 80px; }
#notice .ctr { max-width: 1000px; }
#notice h4 { display: block; width: 100%; text-align: center; padding: 0 20px; margin-bottom: 1rem; font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; }
#notice ol { text-align: justify; padding: 0 0 0 25px; margin: 0 auto; }
#notice ol > li { line-height: 1.5; margin-bottom: 0.5rem; }
#notice ol a { text-decoration: underline; word-break: break-all; }
#notice ul { list-style-type: none; padding: 0; }
#notice .mark { font-weight: bold; color: #c42607; }
#notice .bold { font-weight: bold; }

@media (min-width: 1600px) { #notice .ctr { max-width: 1230px; } }
@media (max-width: 1050px) { #notice .ctr { max-width: 830px; } }
@media (max-width: 640px) { #notice { padding-top: 30px; padding-bottom: 50px; } }
@media (max-width: 500px) { #notice ol { list-style-position: inside; padding-left: 0; } }
#info { padding-bottom: 20px; }
#info h2 { display: block; font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; font-style: italic; letter-spacing: 0.1rem; padding-left: 40px; font-size: 2.5rem; }
#info h5 { display: block; font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; font-style: italic; color: #c42607; padding-left: 40px; padding-bottom: 5px; }
#info p { position: absolute; width: 620px; left: 370px; top: 15px; font-size: 1.25rem; line-height: 1.5; text-align: justify; }
#info p span { font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; }

#infocase { background: #f6f6f6; padding-top: 30px; padding-bottom: 80px; }
#infocase h3 { display: block; text-align: center; margin-bottom: 20px; }
#infocase h3 span { font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; display: inline-block; }
#infocase .cases > div { background: white; -webkit-box-shadow: rgba(0, 0, 0, 0.05) 12px 12px 40px; -moz-box-shadow: rgba(0, 0, 0, 0.05) 12px 12px 40px; box-shadow: rgba(0, 0, 0, 0.05) 12px 12px 40px; width: calc(33.33% - 30px); width: -webkit-calc(33.33% - 30px); width: -moz-calc(33.33% - 30px); width: -o-calc(33.33% - 30px); height: auto; min-height: 100px; padding: 25px 15px; float: left; margin: 0 15px 30px 15px; text-align: center; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; }
#infocase .cases > div:hover, #infocase .cases > div:active { -webkit-box-shadow: rgba(0, 0, 0, 0.1) 20px 20px 15px; -moz-box-shadow: rgba(0, 0, 0, 0.1) 20px 20px 15px; box-shadow: rgba(0, 0, 0, 0.1) 20px 20px 15px; -webkit-transform: scale(1.03); -moz-transform: scale(1.03); -ms-transform: scale(1.03); -o-transform: scale(1.03); transform: scale(1.03); }
#infocase .cases > div:before { background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url(../images/infocase-ic.svg); content: ""; display: block; position: absolute; width: 40px; height: 40px; left: 0; top: 0; }
#infocase .cases > div p { font-size: 1.25rem; text-align: center; }
#infocase .cases > div h5 { display: block; font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; text-align: center; margin-top: -5px; }
#infocase .cases > div h5 > span { color: #c42607; }
#infocase .cases > div h5 .num { font-size: 2rem; }
#infocase .cases > div:last-child { width: calc(99.99% - 30px); width: -webkit-calc(99.99% - 30px); width: -moz-calc(99.99% - 30px); width: -o-calc(99.99% - 30px); margin-bottom: 0; }
#infocase .cases > div:last-child p { display: inline-block; width: auto; }
#infocase .cases > div:last-child h5 { display: inline-block; width: auto; }
#infocase .cases:after { clear: both; content: ""; display: table; table-layout: fixed; }

@media (max-width: 1050px) { #info .ctr { max-width: 830px; }
  #info h2 { padding-left: 10px; }
  #info h5 { padding-left: 10px; }
  #info p { width: calc(100% - 330px); width: -webkit-calc(100% - 330px); width: -moz-calc(100% - 330px); width: -o-calc(100% - 330px); left: 330px; top: 8px; font-size: 1.125rem; }
  #info p br { display: none; }
  #infocase .ctr { max-width: 830px; }
  #infocase .cases > div { width: calc(50% - 20px); width: -webkit-calc(50% - 20px); width: -moz-calc(50% - 20px); width: -o-calc(50% - 20px); margin: 0 10px 20px 10px; }
  #infocase .cases > div:last-child { width: calc(100% - 20px); width: -webkit-calc(100% - 20px); width: -moz-calc(100% - 20px); width: -o-calc(100% - 20px); } }
@media (max-width: 768px) { #info h2 { padding-left: 0; text-align: center; font-size: 2.25rem; }
  #info h5 { padding-left: 0; text-align: center; padding-bottom: 15px; }
  #info p { position: relative; width: 100%; left: auto; top: auto; text-align: center; }
  #info p br { display: block; }
  #infocase .cases > div:before { width: 35px; height: 35px; } }
@media (max-width: 640px) { #info h2 { font-size: 2rem; }
  #info p { font-size: 16px; }
  #infocase .cases > div { min-height: 75px; padding: 20px 15px; }
  #infocase .cases > div:before { width: 30px; height: 30px; }
  #infocase .cases > div p { font-size: 16px; }
  #infocase .cases > div h5 { font-size: 1.125rem; }
  #infocase .cases > div h5 .num { font-size: 1.5625rem; } }
@media (max-width: 540px) { #info p { text-align: left; }
  #info p br { display: none; } }
@media (max-width: 500px) { #infocase { padding-top: 20px; padding-bottom: 50px; }
  #infocase .cases > div { padding: 15px; min-height: auto; float: none; clear: both; width: calc(100% - 30px); width: -webkit-calc(100% - 30px); width: -moz-calc(100% - 30px); width: -o-calc(100% - 30px); margin: 0 auto 20px auto; }
  #infocase .cases > div p { display: inline-block; width: auto; }
  #infocase .cases > div h5 { display: inline-block; width: auto; }
  #infocase .cases > div:last-child { width: calc(100% - 30px); width: -webkit-calc(100% - 30px); width: -moz-calc(100% - 30px); width: -o-calc(100% - 30px); } }
@media (max-width: 420px) { #info h2 { font-size: 1.5625rem; }
  #infocase .cases > div { margin-bottom: 15px; }
  #infocase .cases > div p { display: block; }
  #infocase .cases > div h5 { display: block; }
  #infocase .cases > div:last-child p { display: block; }
  #infocase .cases > div:last-child h5 { display: block; } }
#qa { padding-top: 80px; padding-bottom: 80px; }
#qa .quz { background: white; -webkit-box-shadow: rgba(0, 0, 0, 0.1) 12px 12px 40px; -moz-box-shadow: rgba(0, 0, 0, 0.1) 12px 12px 40px; box-shadow: rgba(0, 0, 0, 0.1) 12px 12px 40px; width: 100%; height: auto; padding: 25px 40px 20px 100px; margin-bottom: 30px; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; }
#qa .quz:hover, #qa .quz:active { -webkit-box-shadow: rgba(0, 0, 0, 0.15) 20px 20px 15px; -moz-box-shadow: rgba(0, 0, 0, 0.15) 20px 20px 15px; box-shadow: rgba(0, 0, 0, 0.15) 20px 20px 15px; -webkit-transform: scale(1.02); -moz-transform: scale(1.02); -ms-transform: scale(1.02); -o-transform: scale(1.02); transform: scale(1.02); }
#qa .quz:before { background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url(../images/qa-ic.svg); content: ""; display: block; position: absolute; width: 60px; height: 60px; left: 20px; top: 20px; }
#qa .quz h5 { display: block; color: #c42607; font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; text-align: justify; padding-bottom: 5px; }
#qa .quz p { font-size: 1.25rem; text-align: justify; }
#qa .note { color: #777777; text-align: justify; padding: 0 25px; }

@media (max-width: 1050px) { #qa .ctr { max-width: 830px; }
  #qa .quz { padding: 25px 25px 20px 95px; margin-bottom: 20px; }
  #qa .quz p { line-height: 1.5; } }
@media (max-width: 768px) { #qa .quz p { font-size: 1.125rem; }
  #qa .note br { display: none; } }
@media (max-width: 640px) { #qa .quz { padding: 20px 20px 20px 75px; }
  #qa .quz:before { width: 50px; height: 50px; left: 15px; top: 20px; }
  #qa .quz h5 { font-size: 1.125rem; }
  #qa .note { padding: 0 20px; } }
@media (max-width: 500px) { #qa { padding-top: 50px; padding-bottom: 60px; }
  #qa .quz { padding: 20px; }
  #qa .quz:before { width: 40px; height: 40px; left: 20px; top: 12px; }
  #qa .quz h5 { padding-left: 50px; min-height: 35px; padding-bottom: 10px; }
  #qa .quz p { font-size: 16px; } }
@media (max-width: 420px) { #qa .quz { padding: 20px 15px; }
  #qa .quz:before { width: 35px; height: 35px; left: 18px; top: 15px; }
  #qa .quz h5 { padding-left: 45px; }
  #qa .note { font-size: 14px; padding: 0 15px; } }
#gallery { padding-bottom: 100px; }
#gallery .item { background: white; -webkit-box-shadow: rgba(0, 0, 0, 0.07) 30px 30px 15px; -moz-box-shadow: rgba(0, 0, 0, 0.07) 30px 30px 15px; box-shadow: rgba(0, 0, 0, 0.07) 30px 30px 15px; width: 100%; min-height: 280px; padding: 30px 30px 30px 275px; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; z-index: 0; }
#gallery .item:nth-child(2n) { background: #f6f6f6; }
#gallery .item .cover { position: absolute; width: 220px; height: auto; left: 30px; top: 30px; overflow: hidden; }
#gallery .item .cover > img { width: 100%; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; }
#gallery .item:hover, #gallery .item:active { z-index: 1; -webkit-box-shadow: rgba(0, 0, 0, 0.15) 20px 20px 12px; -moz-box-shadow: rgba(0, 0, 0, 0.15) 20px 20px 12px; box-shadow: rgba(0, 0, 0, 0.15) 20px 20px 12px; -webkit-transform: scale(1.01); -moz-transform: scale(1.01); -ms-transform: scale(1.01); -o-transform: scale(1.01); transform: scale(1.01); }
#gallery .item .cover > img, #gallery .item:link .cover > img, #gallery .item:visited .cover > img { -webkit-transition-duration: 0.5s; -moz-transition-duration: 0.5s; -o-transition-duration: 0.5s; transition-duration: 0.5s; -webkit-transform: scale(1); -moz-transform: scale(1); -ms-transform: scale(1); -o-transform: scale(1); transform: scale(1); filter: brightness(1); -webkit-filter: brightness(1); -moz-filter: brightness(1); -o-filter: brightness(1); }
#gallery .item:hover .cover > img, #gallery .item:active .cover > img { -webkit-transition-duration: 3s; -moz-transition-duration: 3s; -o-transition-duration: 3s; transition-duration: 3s; -webkit-transform: scale(1.05); -moz-transform: scale(1.05); -ms-transform: scale(1.05); -o-transform: scale(1.05); transform: scale(1.05); filter: brightness(1.1); -webkit-filter: brightness(1.1); -moz-filter: brightness(1.1); -o-filter: brightness(1.1); }
#gallery .item .excerpt { min-height: 170px; margin-bottom: 10px; }
#gallery .item .excerpt span { display: inline-block; border: 1px solid #c42607; padding: 5px 10px; color: #c42607; margin-bottom: 5px; }
#gallery .item .excerpt h4 { display: block; font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; text-align: justify; padding-bottom: 5px; line-height: 1.2; }
#gallery .item .excerpt p { font-size: 1.25rem; text-align: justify; }
#gallery .item .btn { position: relative; width: 260px; margin-right: 0; }

@media (max-width: 920px) { #gallery .item { min-height: 250px; padding-left: 240px; }
  #gallery .item .cover { width: 190px; }
  #gallery .item .excerpt { min-height: 140px; }
  #gallery .item .excerpt span { font-size: 14px; padding: 3px 8px; }
  #gallery .item .excerpt h4 { font-size: 1.4375; padding-bottom: 10px; }
  #gallery .item .excerpt p { font-size: 16px; } }
@media (max-width: 768px) { #gallery .item { padding: 25px; min-height: auto; }
  #gallery .item .cover { position: relative; width: 70%; max-width: 250px; left: 0; top: 0; margin-bottom: 10px; }
  #gallery .item .excerpt { min-height: auto; text-align: center; }
  #gallery .item .excerpt h4 { text-align: center; }
  #gallery .item .excerpt p { max-width: 480px; }
  #gallery .item .btn { margin-right: auto; } }
@media (max-width: 500px) { #gallery { padding-bottom: 70px; } }
@media (max-width: 420px) { #gallery .item { padding: 20px 15px; }
  #gallery .item .btn { width: 100%; } }
#detail { padding-bottom: 100px; }
#detail .maincontent { background: white; -webkit-box-shadow: rgba(0, 0, 0, 0.07) 30px 30px 15px; -moz-box-shadow: rgba(0, 0, 0, 0.07) 30px 30px 15px; box-shadow: rgba(0, 0, 0, 0.07) 30px 30px 15px; width: 100%; padding: 40px 60px 30px 60px; }
#detail .maincontent:nth-child(2n) { background: #f6f6f6; }
#detail .maincontent h1, #detail .maincontent h2, #detail .maincontent h3, #detail .maincontent h4, #detail .maincontent h5, #detail .maincontent h6 { display: block; font-family: "Noto Sans TC", 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; margin-bottom: 1rem; }
#detail .maincontent img { width: 100%; max-width: 800px; margin-bottom: 1.5rem; }
#detail .maincontent p { font-size: 1.25rem; text-align: justify; margin-bottom: 1rem; }
#detail .maincontent .center { text-align: center; }
#detail .maincontent .bold { font-weight: bold; }
#detail .maincontent .mark { color: #c42607; }
#detail .maincontent .marginbottomhalf { margin-bottom: 0.5rem; }
#detail .maincontent .marginbottomzero { margin-bottom: 0; }
#detail .maincontent .break-mb { display: none; }
#detail .maincontent .sptitle span { display: inline-block; border: 1px solid #c42607; padding: 5px 10px; color: #c42607; font-family: 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; font-size: 16px; margin-right: 10px; margin-bottom: 4px; vertical-align: middle; }
#detail .maincontent .teaser { color: #e06900; font-style: italic; font-size: 1.125rem; }
#detail .maincontent .kol { text-align: center; margin-bottom: 1rem; }
#detail .maincontent .kol:after { clear: both; content: ""; display: table; table-layout: fixed; }
#detail .maincontent .kol > div { display: inline-block; vertical-align: middle; }
#detail .maincontent .kol > div img { margin-bottom: 0; }
#detail .maincontent .kol > div h4 { text-align: left; }
#detail .maincontent .kol .img { width: 38%; max-width: 300px; padding-bottom: 10px; }
#detail .maincontent .kol .txt { width: 52%; }
#detail .maincontent .kol p.list { padding-left: 48px; margin-bottom: 0.5rem; font-size: 16px; }
#detail .maincontent .kol p.list span { display: inline-block; }
#detail .maincontent .kol p.list span:first-child { margin-left: -48px; }
#detail .links { text-align: center; padding-top: 50px; }
#detail .links > a { display: inline-block; position: relative; width: auto; height: auto; padding: 10px 20px; margin-left: 10px; }
#detail .links > a:first-child { margin-left: 0; }
#detail .links > a, #detail .links > a:link, #detail .links > a:visited, #detail .links > a:hover, #detail .links > a:active { color: white; }
#detail .links > a, #detail .links > a:link, #detail .links > a:visited { background: #c0c0c0; }
#detail .links > a:hover, #detail .links > a:active { background: #d0d0d0; }
#detail .links > a.freeze, #detail .links > a.freeze:link, #detail .links > a.freeze:visited, #detail .links > a.freeze:hover, #detail .links > a.freeze:active { background: #c0c0c0; color: #777777; }

@media (max-width: 1050px) { #detail .maincontent { padding-left: 40px; padding-right: 40px; } }
@media (max-width: 920px) { #detail .maincontent { padding: 30px; }
  #detail .maincontent p { font-size: 16px; }
  #detail .maincontent .teaser { font-size: 16px; }
  #detail .maincontent .kol > div { vertical-align: middle; }
  #detail .maincontent .kol .img { width: 34%; }
  #detail .maincontent .kol .txt { width: 60%; } }
@media (max-width: 800px) { #detail .maincontent .kol > div { display: block; }
  #detail .maincontent .kol .img { width: 100%; max-width: 250px; }
  #detail .maincontent .kol .txt { width: 100%; max-width: 450px; padding-left: 20px; padding-right: 20px; } }
@media (max-width: 768px) { #detail .maincontent { padding-left: 25px; padding-right: 25px; }
  #detail .maincontent h4 { font-size: 1.25rem; } }
@media (max-width: 640px) { #detail .maincontent .sptitle span { margin: 0 auto 5px auto; }
  #detail .maincontent .break-mb { display: block; } }
@media (max-width: 560px) { #detail .maincontent .kol .img { max-width: 200px; }
  #detail .maincontent .kol .txt { padding-left: 0; padding-right: 0; }
  #detail .maincontent .kol .txt h4 { margin-bottom: 0.5rem; }
  #detail .maincontent .kol p.list { padding-left: 0; margin-bottom: 0.3rem; }
  #detail .maincontent .kol p.list span { display: inline; }
  #detail .maincontent .kol p.list span:first-child { margin-left: 0; } }
@media (max-width: 500px) { #detail { padding-bottom: 70px; }
  #detail .maincontent { padding-left: 20px; padding-right: 20px; }
  #detail .maincontent .center { text-align: left; }
  #detail .links > a { display: block; width: 80%; min-width: 150px; margin: 10px auto 0 auto; }
  #detail .links > a:first-child { margin-left: auto; margin-top: 0; } }
@media (max-width: 420px) { #detail .maincontent { padding-left: 15px; padding-right: 15px; } }