html, body, div, span, applet, object, 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, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, hr { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }

html { height: 100%; }

body { height: 100%; line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

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

html, body, div, h1, h2, h3, h4, h5, h6, p, form { position: relative; display: block; }

body { font-size: 16px; font-family: 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; line-height: 22px; color: #444444; text-decoration: none; user-select: none; -moz-user-select: none; /* for Firefox */ -webkit-user-select: none; /* for Chrome */ }

a { text-decoration: none; outline: medium none !important; border: none; }
a:focus, a:link, a:visited, a:hover, a:active { border: none; outline: medium none !important; }
a, a:link, a:visited { color: #c42607; }
a:hover, a:active { color: #e42a04; }

.mark { color: #c42607; }

.bold { font-weight: bold; }

.underline { text-decoration: underline; }

.center { text-align: center !important; }

#wrap { width: 100%; height: auto; margin: 0 auto; overflow: hidden; }

.page { width: 100%; height: auto; margin: 0 auto; }
.page .ctr { padding: 40px 0px; width: 100%; height: auto; margin: 0 auto; }

@media (max-width: 500px) { .page .ctr { padding: 30px 0px; } }
.rsps { display: block; width: 100%; height: auto; padding: 0; margin: 0; }

#ttt { background: url(../images/wttt.png) no-repeat 0px 0px; display: block; position: fixed; width: 40px; height: 40px; bottom: 10px; left: 50%; margin-left: -20px; }

.btn { display: inline-block; position: relative; width: 100%; height: auto; margin: 5px auto 0 auto; padding: 6px; font-size: 16px; line-height: 23px; font-weight: bold; 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; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; border-radius: 25px; }
.btn, .btn:link, .btn:visited { background: #c42607; }
.btn:hover, .btn:active { background: #e42a04; }
.btn, .btn:link, .btn:visited, .btn:hover, .btn:active { color: white; }

.arr { display: inline-block; position: relative; width: 20px; height: 30px; vertical-align: bottom; margin-left: 10px; }
.arr > img { position: absolute; width: 12px; height: 20px; left: 0px; top: 5px; animation: arrAni 0.8s infinite linear; -webkit-animation: arrAni 0.8s infinite linear; }

@keyframes arrAni { from { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; left: 0px; }
  75% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; left: 3px; }
  to { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; left: 5px; } }

#hdr { display: block; background: #c42607; height: auto; position: fixed; width: 100%; left: 0; top: 0; }
#hdr .ctr { position: relative; width: 100%; height: 75px; }
#hdr .ctr .logo { display: block; position: absolute; width: 500px; height: auto; left: 0; top: 0; }
#hdr .ctr .link { display: block; background: url(../images/hdrlink.png) no-repeat top left; position: absolute; width: 235px; height: 40px; right: 0; top: 17px; padding: 10px 0 0 25px; }
#hdr .ctr .link li { display: block; position: relative; width: auto; height: 30px; line-height: 30px; font-size: 14px; font-weight: bold; text-align: center; float: left; }
#hdr .ctr .link li a { vertical-align: top; display: inline-block; width: auto; height: auto; }
#hdr .ctr .link li a:link, #hdr .ctr .link li a:visited { color: white; }
#hdr .ctr .link li a:hover, #hdr .ctr .link li a:active { color: yellow; }
#hdr .ctr .link li a img { margin-top: -13px; }
#hdr .ctr .link li.home { background: url(../images/hdrlinkline.gif) no-repeat center right; }
#hdr .ctr .link li.home a { padding: 0px 15px; }
#hdr .ctr .link li.home .mb { display: none; }
#hdr .ctr .link li.home .pc { margin: 0px 3px -1px 0px; }
#hdr .ctr .link li.service a { padding: 0px 15px; }
#hdr .ctr .link li.service .mb { display: none; }
#hdr .ctr .link li.service .pc { margin: 0px 3px -1px 0px; }

@media (max-width: 640px) { #hdr .ctr .link { width: 115px; }
  #hdr .ctr .link li.home, #hdr .ctr .link li.service { background: none; margin-right: auto; }
  #hdr .ctr .link li.home a, #hdr .ctr .link li.service a { padding: 0; }
  #hdr .ctr .link li.home span, #hdr .ctr .link li.home .pc, #hdr .ctr .link li.service span, #hdr .ctr .link li.service .pc { display: none; }
  #hdr .ctr .link li.home .mb, #hdr .ctr .link li.service .mb { display: inline-block; } }
@media (max-width: 525px) { #hdr .ctr .link { background: none; width: 110px; top: auto; bottom: -45px; } }
@media (max-width: 500px) { #hdr .ctr { height: auto; }
  #hdr .ctr .logo { position: relative; width: 100%; } }
#ntc .ctr { width: 96%; max-width: 1200px; padding: 30px; padding-left: 50px; }
#ntc .tit { font-size: 20px; text-align: center; margin-bottom: 15px; }
#ntc .list { width: 100%; margin: 0 auto; list-style-type: decimal !important; text-align: left; font-size: 16px; line-height: 23px; }
#ntc .list > li { margin-bottom: 10px; }
#ntc .list > li.bold { color: #000; }
#ntc .list > li.mark { font-weight: bold; }
#ntc .list > li ol li { margin-bottom: 5px; }
#ntc .list .ti { padding-left: 24px; text-indent: -24px; }
#ntc .list a { display: inline; text-decoration: underline !important; }

@media (max-width: 640px) { #ntc .ctr { padding: 20px; padding-left: 30px; }
  #ntc .list { font-size: 14px; line-height: 22px; }
  #ntc .list .ti { padding-left: 21px; text-indent: -21px; } }
#ftr { background: #f3f3f3; }
#ftr .ctr { max-width: 640px; height: auto; padding: 25px 0px 65px 0px; color: #444444; font-size: 12px; line-height: 23px; text-align: center; }
#ftr .item { display: inline-block; padding: 0px 8px; }
#ftr .mail { background: url(../images/ftrline.gif) no-repeat center left; }
#ftr .tel { background: url(../images/ftrbk.gif) no-repeat center; padding: 5px 10px; color: white; }
#ftr a { display: inline-block; }
#ftr a, #ftr a:link, #ftr a:visited { color: #444444; text-decoration: underline; }
#ftr a:hover, #ftr a:active { color: #c30000; text-decoration: underline; }

@media (max-width: 900px) { #ftr .ctr { max-width: 60%; } }
@media (max-width: 640px) { #ftr .ctr { max-width: 65%; } }
@media (max-width: 500px) { #ftr .ctr { max-width: 80%; } }
@media (max-width: 420px) { #ftr .ctr { max-width: none; } }
#main { background-attachment: fixed; background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url(../images/bg.jpg); height: auto; }
#main .title { position: relative; font-size: 32px; line-height: 38px; text-align: center; padding-top: 130px; margin: 0 auto; }
#main .ctr { position: relative; *zoom: 1; width: 1090px; padding-bottom: 50px; }
#main .ctr:after, #main .ctr:before { content: ""; display: table; }
#main .ctr:after { clear: both; }
#main .bk { display: block; position: relative; width: 250px; height: auto; float: left; margin-right: 30px; }
#main .bk:last-child { margin-right: 0px; }
#main .bk .opt { background-color: rgba(255, 255, 255, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); -moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); border: 5px solid white; position: relative; width: 100%; height: 300px; padding: 15px; text-align: center; }
#main .bk .opt .sbt { position: relative; width: 100%; font-size: 20px; line-height: 25px; text-align: center; font-weight: bold; color: black; }
#main .bk .opt .action { position: relative; width: 100%; padding-top: 10px; }
#main .bk .opt .action .kind { position: relative; width: 100%; font-size: 16px; line-height: 22px; text-align: left; color: #c42607; margin-top: 10px; font-weight: bold; }
#main .bk .opt .action input { display: block; position: relative; width: calc(100% - 20px); padding: 5px 10px; font-size: 16px; line-height: 25px; text-align: left; background: #dfcbab; border: none; }
#main .bk .opt .action .btn { margin-top: 20px; }
#main .bk .opt .action .rsps { max-width: 200px; margin: 0 auto; }
#main .bk .opt .switch { display: none; }
#main .bk .show { position: relative; width: 980px; min-height: 180px; background-color: rgba(255, 255, 255, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; border: 5px solid #c42607; padding: 40px 120px; margin-top: 30px; text-align: center; overflow: visible !important; }
#main .bk .show:before { content: url(../images/showarr.png); display: block; position: absolute; width: 40px; height: 40px; left: 50%; top: -25px; }
#main .bk .show p { display: inline-block; width: auto; font-size: 18px; line-height: 23px; padding: 10px 25px 5px 25px; text-align: left; color: black; }
#main .bk .show p .number { display: block; position: absolute; width: 25px; height: 25px; background: #c42607; color: white; font-weight: bold; text-align: center; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; padding-top: 1px; left: -5px; top: 7px; }
#main .bk .show p .mark { font-weight: bold; }
#main .bk .show p .link { display: inline-block; background: #c42607; color: white; font-weight: bold; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; padding: 5px 15px; margin: 5px; }
#main .bk .show .center { text-align: center; }
#main .bk .show .padding { position: relative; display: block; width: 100%; height: 30px; }
#main .bk .show .rsps { margin: 0 auto; }
#main .bk .show .small { max-width: 530px; }
#main .bk1 .show { margin-left: 55px; }
#main .bk1 .show:before { margin-left: -440px; }
#main .bk2 .show { margin-left: -225px; }
#main .bk2 .show:before { margin-left: -160px; }
#main .bk3 .show { margin-left: -505px; }
#main .bk3 .show:before { margin-left: 120px; }
#main .bk3 .show p { padding-left: 0px; padding-right: 0px; }
#main .bk4 .show { margin-left: -785px; }
#main .bk4 .show:before { margin-left: 400px; }
#main .bk4 .show p { padding-left: 0px; padding-right: 0px; }
#main .active .opt { border: 5px solid #c42607; }

@media (max-width: 1160px) { #main .ctr { width: 950px; }
  #main .bk { width: 220px; margin-right: 20px; }
  #main .bk .opt .action .rsps { width: 200px; margin-left: -10px; }
  #main .bk .show { width: 940px; padding: 40px 100px; }
  #main .bk1 .show { margin-left: 0px; }
  #main .bk1 .show:before { margin-left: -380px; }
  #main .bk2 .show { margin-left: -240px; }
  #main .bk2 .show:before { margin-left: -140px; }
  #main .bk3 .show { margin-left: -480px; }
  #main .bk3 .show:before { margin-left: 100px; }
  #main .bk4 .show { margin-left: -720px; }
  #main .bk4 .show:before { margin-left: 340px; } }
@media (max-width: 980px) { #main .title { padding-top: 110px; }
  #main .ctr { width: 780px; padding-top: 20px; }
  #main .bk { width: 100%; margin-right: 0px; float: none; margin-bottom: 20px; background-color: rgba(255, 255, 255, 0.8); -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; -webkit-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); -moz-box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.3); border: 5px solid white; }
  #main .bk .opt { height: auto; background: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; -webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); -moz-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); box-shadow: 0px 0px 0px rgba(0, 0, 0, 0); border: none; }
  #main .bk .opt .sbt { display: inline-block; width: 38%; vertical-align: middle; border-right: 1px solid #c42607; padding-bottom: 30px; }
  #main .bk .opt .action { display: inline-block; width: 52%; padding-top: 0px; vertical-align: middle; text-align: center; margin-left: 5%; }
  #main .bk .opt .action .kind { display: inline-block; width: 130px; text-align: right; padding-right: 5px; }
  #main .bk .opt .action input { display: inline-block; width: calc(100% - 160px); }
  #main .bk .opt .action .btn { margin-top: 10px; margin-bottom: 5px; }
  #main .bk .opt .action .rsps { display: inline-block; width: 150px; margin-top: -20px; margin-bottom: -20px; }
  #main .bk .opt .switch { display: block; position: relative; width: 100%; height: 1px; margin: 0 auto; }
  #main .bk .opt .switch a { display: block; position: absolute; width: 120px; height: auto; left: 50%; top: -40px; margin-left: -38%; padding: 3px; font-size: 16px; line-height: 23px; text-align: center; border: 1px solid #c42607; color: #c42607; -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-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 25px; -moz-border-radius: 25px; -ms-border-radius: 25px; -o-border-radius: 25px; border-radius: 25px; }
  #main .bk .opt .switch a:before { content: "+展開說明"; }
  #main .bk .show { width: 100%; padding: 25px 30px 40px 30px; background: none; -webkit-border-radius: 0px; -moz-border-radius: 0px; -ms-border-radius: 0px; -o-border-radius: 0px; border-radius: 0px; border: none; margin-top: 0px; min-height: auto; }
  #main .bk .show:before { display: none; }
  #main .bk .show p span { display: inline-block; }
  #main .bk1 .show { margin-left: 0px; }
  #main .bk1 .show:before { margin-left: -20px; }
  #main .bk2 .show { margin-left: 0px; }
  #main .bk2 .show:before { margin-left: -20px; }
  #main .bk3 .show { margin-left: 0px; }
  #main .bk3 .show:before { margin-left: -20px; }
  #main .bk4 .show { margin-left: 0px; }
  #main .bk4 .show:before { margin-left: -20px; }
  #main .active { border: 5px solid #c42607; }
  #main .active .opt { border: none; }
  #main .active .opt .switch a:before { content: "X關閉說明"; }
  #main .active .opt .switch:before { content: ""; background: #e42a04; display: block; position: absolute; width: 94%; height: 1px; left: 3%; bottom: -15px; } }
@media (max-width: 800px) { #main .ctr { width: 92%; }
  #main .bk .opt .action { width: 56%; margin-left: 4%; }
  #main .bk .opt .switch a { margin-left: -42%; }
  #main .bk .show { padding: 25px 20px 40px 20px; } }
@media (max-width: 640px) { #main .title { font-size: 24px; line-height: 30px; }
  #main .bk { margin-bottom: 30px; }
  #main .bk .opt .sbt { display: block; width: 100%; border-right: none; padding-bottom: 0px; font-size: 18px; line-height: 23px; }
  #main .bk .opt .sbt br { display: none; }
  #main .bk .opt .action { display: block; width: 100%; margin-left: auto; }
  #main .bk .opt .action input { margin-top: 10px; }
  #main .bk .opt .action .rsps { margin-top: -10px; }
  #main .bk .opt .switch { margin-top: 10px; }
  #main .bk .opt .switch a { font-size: 14px; line-height: 18px; margin-left: -60px; top: 4px; background: white; }
  #main .bk .show { padding: 40px 20px 40px 20px; }
  #main .bk .show p { font-size: 16px; line-height: 22px; padding-right: 10px; }
  #main .bk .show p span { display: inline; }
  #main .bk3 .show .center, #main .bk4 .show .center { text-align: left !important; } }
@media (max-width: 420px) { #main .title { padding-top: 100px; }
  #main .bk .opt .sbt br { display: block; }
  #main .bk .opt .action .kind { display: block; width: 100%; text-align: left; padding-right: 0px; margin-right: 0px; font-size: 14px; line-height: 18px; }
  #main .bk .opt .action input { display: block; width: calc(100% - 20px); margin-top: 0px; }
  #main .bk .opt .action .btn { margin-top: 15px; }
  #main .bk .show { padding: 40px 15px 40px 15px; }
  #main .bk .show p { padding-right: 0px; } }