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, #ftr, 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, h1, h2, h3, h4, h5, h6, p, form { position: relative; display: block; }

body { background: white; font-family: 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; font-size: 16px; line-height: 24px; color: #333333; 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; -webkit-transition-property: color; -moz-transition-property: color; -o-transition-property: color; transition-property: color; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; -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; }

#bond-wrap { display: block; position: relative; width: 100%; min-width: 320px; height: auto; margin: 0 auto; overflow: hidden; }

.bond-page { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; }
.bond-page .ctr { display: block; position: relative; width: 100%; max-width: 1200px; height: auto; margin: 0 auto; }

#bond-gotop { background-image: url(../images/gotop.png); background-repeat: no-repeat; background-size: cover; background-position: center; display: block; position: fixed; width: 36px; height: 36px; bottom: 25px; right: 25px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; -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: none; }
#bond-gotop, #bond-gotop:link, #bond-gotop:visited { background-color: #f9960d; }
#bond-gotop:hover, #bond-gotop:active { background-color: #c42607; }

@media (max-width: 992px) { #bond-gotop { bottom: 15px; right: 15px; } }
#overlay { position: fixed; display: block; width: 100vw; height: 100vh; left: 0; top: 0; background: white; }

header, #bond-gotop, #quick { z-index: 1000; }

nav { z-index: 1001; }

#overlay { z-index: 1002; }

header { position: fixed; width: 100%; height: auto; min-width: 320px; left: 0; top: 0; }
header .bg { background: white; display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; }
header .bg:after { content: ""; background: #c42607; display: block; position: absolute; width: 100%; height: 2px; left: 0; bottom: -2px; }
header .ctr { width: 100%; height: auto; margin: 0 auto; padding: 10px; }
header .ctr .logo { display: block; position: relative; width: 300px; height: auto; margin-left: 0; }
header .ctr .logo img { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; }

#navbtn { display: block; position: fixed; width: 60px; height: 60px; right: 10px; top: 10px; }
#navbtn img { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; }

@media (max-width: 768px) { header .ctr { padding: 5px; }
  header .ctr .logo { width: 250px; }
  #navbtn { width: 50px; height: 50px; right: 5px; top: 5px; } }
#bond-pro .btn { display: inline-block; position: relative; width: 110px; height: auto; margin: 0 auto; padding: 5px; font-size: 18px; line-height: 28px; font-weight: bold; text-align: center; -webkit-transition-property: background-color; -moz-transition-property: background-color; -o-transition-property: background-color; transition-property: background-color; -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: 30px; -moz-border-radius: 30px; -ms-border-radius: 30px; -o-border-radius: 30px; border-radius: 30px; margin-left: 5px; margin-top: 5px; }
#bond-pro .btn, .btn:link, .btn:visited, .btn:hover, .btn:active { color: white; }
#bond-pro .btn, .btn:link, .btn:visited { background: #f9960d; }
#bond-pro .btn:hover, .btn:active { background: #ffb31a; }
#bond-pro .btn:first-child { margin-left: 0; margin-top: 0; }

@media (max-width: 1200px) { .btn { width: 100px; } }
@media (max-width: 1000px) { .btn { width: 120px; } }
@media (max-width: 480px) { .btn { font-size: 18px; line-height: 28px; } }
#bond-pro { background: #ffde7b; }
#bond-pro .ctr { max-width: 1260px; padding-left: 30px; padding-right: 30px; padding-top: 60px; padding-bottom: 160px; }
#bond-pro .slg { display: block; position: relative; width: 100%; max-width: 680px; height: auto; margin: 0 auto; left: 220px; }
#bond-pro .vs { display: block; position: absolute; width: 450px; height: auto; left: calc(50% - 450px); left: -webkit-calc(50% - 450px); top: 80px; }
#bond-pro .show { background: white; display: block; position: relative; width: 100%; max-width: 1200px; height: auto; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; margin: 0 auto; overflow: hidden; }
#bond-pro .show .kind { display: block; position: relative; width: 100%; height: auto; padding: 15px; text-align: center; }
#bond-pro .show .kind:nth-child(even) { background: #fff7e8; }
#bond-pro .show .kind > div { display: inline-block; position: relative; vertical-align: middle; }
#bond-pro .show .kind > div .tag { font-weight: bold; font-size: 16px; color: #f9960d; display: none; }
#bond-pro .show .kind > div .txt { display: block; text-align: center; font-size: 20px; }
#bond-pro .show .kind .code { width: 9%; }
#bond-pro .show .kind .name { width: 30%; }
#bond-pro .show .kind .name .txt { text-align: left; }
#bond-pro .show .kind .risk { width: 8%; }
#bond-pro .show .kind .rate { width: 8%; }
#bond-pro .show .kind .cost { width: 11%; }
#bond-pro .show .kind .cost .txt { font-weight: bold; color: #d61d1d; }
#bond-pro .show .kind .date { width: 9%; }
#bond-pro .show .kind .more { width: 21%; }
#bond-pro .show .sbt { font-weight: bold; font-size: 18px; color: #f9960d; }
#bond-pro .show .sbt .name { text-align: center; }
#bond-pro .show .sbt .cost { color: #f9960d; }
#bond-pro .note { display: block; position: relative; width: 100%; height: auto; text-align: center; font-weight: bold; color: #d61d1d; padding: 10px; margin: 0 auto; }
#bond-pro .add { background-repeat: no-repeat; background-size: cover; background-position: center; background-image: url(../images/proadd.png); display: block; position: absolute; width: 100%; height: 105px; left: 0; bottom: 0; }

@media (max-width: 1200px) { #bond-pro .slg { max-width: 620px; margin-bottom: 20px; }
  #bond-pro .vs { width: 420px; left: calc(50% - 400px); left: -webkit-calc(50% - 400px); top: 90px; }
  #bond-pro .show .kind > div .txt { font-size: 18px; }
  #bond-pro .show .kind .code { width: 9%; }
  #bond-pro .show .kind .name { width: 21%; }
  #bond-pro .show .kind .risk { width: 9%; }
  #bond-pro .show .kind .rate { width: 9%; }
  #bond-pro .show .kind .cost { width: 13%; }
  #bond-pro .show .kind .date { width: 11%; }
  #bond-pro .show .kind .more { width: 24%; } }
@media (max-width: 1000px) { #bond-pro .ctr { padding-top: 40px; padding-bottom: 140px; }
  #bond-pro .slg { left: 0; margin-bottom: 0; }
  #bond-pro .vs { position: relative; margin: 0 auto; left: 20px; top: 0; margin-top: -40px; }
  #bond-pro .show { margin-top: -10px; max-width: 720px; }
  #bond-pro .show .kind:nth-child(even) { background: none; }
  #bond-pro .show .kind:nth-child(odd) { background: #fff7e8; }
  #bond-pro .show .kind > div { padding-bottom: 10px; text-align: left; vertical-align: top; }
  #bond-pro .show .kind > div .tag { display: inline-block; width: 70px; text-align: left; vertical-align: top; }
  #bond-pro .show .kind > div .txt { display: inline-block; width: calc(96% - 70px); -webkit-width: calc(96% - 70px); text-align: left; vertical-align: top; }
  #bond-pro .show .kind .cost .tag { width: 100px; }
  #bond-pro .show .kind .cost .txt { width: calc(96% - 100px); -webkit-width: calc(96% - 100px); }
  #bond-pro .show .kind .code { width: 40%; }
  #bond-pro .show .kind .name { width: 56%; }
  #bond-pro .show .kind .risk { width: 40%; }
  #bond-pro .show .kind .rate { width: 56%; }
  #bond-pro .show .kind .cost { width: 40%; }
  #bond-pro .show .kind .date { width: 56%; }
  #bond-pro .show .kind .more { width: 96%; text-align: center; }
  #bond-pro .show .sbt { display: none; }
  #bond-pro .note { max-width: 680px; text-align: left; } }
@media (max-width: 768px) { #bond-pro .ctr { padding-bottom: 90px; }
  #bond-pro .add { height: 55px; } }
@media (max-width: 640px) { #bond-pro .ctr { padding-left: 20px; padding-right: 20px; }
  #bond-pro .slg { width: 124%; max-width: none; margin-left: -12%; }
  #bond-pro .vs { width: 78%; margin-top: -30px; }
  #bond-pro .show { max-width: 400px; }
  #bond-pro .show .kind > div { padding-bottom: 5px; display: block; }
  #bond-pro .show .kind > div .txt { font-size: 16px; }
  #bond-pro .show .kind .code { width: 100%; }
  #bond-pro .show .kind .name { width: 100%; }
  #bond-pro .show .kind .risk { width: 100%; }
  #bond-pro .show .kind .rate { width: 100%; }
  #bond-pro .show .kind .cost { width: 100%; }
  #bond-pro .show .kind .date { width: 100%; }
  #bond-pro .show .kind .more { width: 100%; }
  #bond-pro .note { max-width: 400px; } }
@media (max-width: 480px) { #bond-pro .slg { width: 136%; margin-left: -18%; }
  #bond-pro .vs { width: 90%; margin-top: -20px; } }
@media (max-width: 420px) { #bond-pro .slg { width: 140%; margin-left: -20%; } }
#bond-notice .ctr { width: 96%; max-width: 1260px; padding: 30px 50px; margin-top: -60px; }
#bond-notice .tit { font-size: 30px; text-align: center; margin-bottom: 30px; font-weight: bold; }
#bond-notice .list { width: 100%; margin: 0 auto; list-style-type: decimal !important; text-align: left; font-size: 18px; line-height: 28px; }
#bond-notice .list > li { margin-bottom: 10px; }
#bond-notice .list > li.bold { color: #000; }
#bond-notice .list > li.mark { font-weight: bold; }
#bond-notice .list > li ol li { margin-bottom: 5px; }
#bond-notice .list .ti { padding-left: 24px; text-indent: -24px; }
#bond-notice .list a { display: inline; text-decoration: underline !important; }

@media (max-width: 1000px) { #bond-notice .ctr { margin-top: -40px; } }
@media (max-width: 768px) { #bond-notice .ctr { margin-top: -20px; } }
@media (max-width: 640px) { #bond-notice .ctr { padding: 20px 40px; }
  #bond-notice .list { font-size: 16px; line-height: 24px; }
  #bond-notice .list .ti { padding-left: 21px; text-indent: -21px; } }
@media (max-width: 480px) { #bond-notice .ctr { padding: 20px 20px 20px 40px; }
  #bond-notice .tit { font-size: 22px; } }
#ftr { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; }
#ftr: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; }
#ftr .ctr { display: block; position: relative; width: 100%; max-width: 1260px; height: auto; margin: 0 auto; padding: 25px 0; font-size: 14px; line-height: 20px; }
#ftr .links { display: block; position: relative; width: 100%; height: auto; text-align: left; padding: 0 15px; }
#ftr .links a { display: inline-block; position: relative; width: auto; height: auto; padding: 0 10px; }
#ftr .links a:before { background: #ddd; content: ""; display: block; position: absolute; width: 1px; height: 14px; left: -1px; top: 3px; }
#ftr .links a:first-child { padding-left: 0px; }
#ftr .links a:first-child:before { display: none; }
#ftr .links a, #ftr .links a:link, #ftr .links a:visited { text-decoration: none; }
#ftr .links a:hover, #ftr .links a:active { text-decoration: underline; }
#ftr .items { display: block; position: absolute; width: 340px; height: auto; right: 0px; top: 25px; text-align: right; padding: 0 15px; }
#ftr .items .bk { display: inline-block; position: relative; width: 48%; height: auto; margin: 0 auto; }
#ftr .items .bk .tag { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; text-align: right; }
#ftr .items .bk .phone { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; text-align: right; display: inline-block; font-size: 18px; line-height: 28px; padding-top: 2px; }
#ftr .items .bk .phone, #ftr .items .bk .phone:link, #ftr .items .bk .phone:visited { color: #c42607; text-decoration: none; }
#ftr .items .bk .phone:hover, #ftr .items .bk .phone:active { text-decoration: underline; }
#ftr .copyright { display: block; position: relative; width: 100%; height: auto; text-align: left; padding: 0 15px; padding-top: 8px; }

@media (max-width: 992px) { #ftr .ctr { width: calc(100% - 30px); }
  #ftr .links { text-align: center; padding: 0 0 10px 0; }
  #ftr .links a { font-size: 12px; width: 32%; padding: 0 0 10px 0; }
  #ftr .links a:before { display: none; }
  #ftr .links a:first-child { padding-left: 10px; }
  #ftr .items { position: relative; width: 100%; right: auto; top: auto; text-align: center; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; padding: 0; }
  #ftr .items .bk { width: 48%; max-width: 160px; padding: 15px 0; }
  #ftr .items .bk .tag { text-align: center; }
  #ftr .items .bk .phone { text-align: center; }
  #ftr .copyright { padding: 25px 0 0 0; text-align: center; } }
@media (max-width: 480px) { #ftr .ctr { padding-bottom: 70px; } }