@charset "UTF-8";
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 { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

@font-face { font-family: 'bmwTypeWebLightAll'; src: local("?"), url("../font/BMWTypeNextLatinTT-Light.ttf") format("opentype"); font-weight: normal; font-style: normal; }
html, body { position: relative; width: 100%; font-family: 'bmwTypeWebLightAll','文鼎UD晶熙黑体PE1XG30_M', Arial, "microsoft jhenghei", Helvetica, Noto Sans, sans-serif; font-size: 20px; }

header { background: #f8f8f8; margin-bottom: 30px; }

header .header-container { width: 60%; margin: auto; display: flex; justify-content: flex-end; }

@media only screen and (max-width: 768px) { header .header-container { width: 100%; } }
header .header-container .logo { width: 40px; margin: 10px; order: 1; }
@media screen and (max-width: 768px) { header .header-container .logo { width: 35px; } }

.wrap { width: 100%; max-width: 660px; margin: 0 auto; }
@media screen and (max-width: 768px) { .wrap { width: 90%; } }

.name, .email, .phone { display: flex; }
.name span, .email span, .phone span { width: 20%; max-width: 80px; line-height: 40px; }

h1 { position: relative; color: #262626; font-weight: 700; font-size: 1.2rem; line-height: 1.2rem; margin: 0px 0 0; }
h1 .headline { display: inline-block; padding: 0 8px 8px 0; border-bottom: 3px solid #1c69d4; }
h1:before { z-index: -1; position: absolute; content: ''; display: block; bottom: 0; width: 100%; height: 3px; margin-top: 8px; background: #e6e6e6; }

p { margin-top: 15px; font-size: 0.8rem; line-height: 1rem; }
p.submit { margin: 20px 0; }
p.submit > span { min-width: 45px; line-height: 30px; margin-right: 10px; display: inline-block; }
p.terms { font-size: 0.65rem; }
p.terms a:link, p.terms a:visited { color: #1c69d4; }
p.terms a:hover, p.terms a:active { color: #0653b6; }
@media screen and (max-width: 768px) { p.submit > span, p.terms > span { width: 17%; min-width: 0; margin-right: 5px; line-height: 40px; } }

.userEmail, .userName, .userPhone { display: inline-block; vertical-align: top; width: 40%; min-width: 170px; height: 30px; padding-left: 3px; font-size: 0.7rem; outline: none; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
@media screen and (max-width: 768px) { .userEmail, .userName, .userPhone { width: 75%; height: 40px; font-size: 0.8rem; } }

.btn-submit { display: inline-block; width: 35%; padding: 10px 0; background-color: #1c69d4; text-align: center; color: #fff; font-weight: 700; font-size: 0.7rem; text-decoration: none; margin-top: 20px; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
.btn-submit img { display: inline-block; margin-right: 10px; vertical-align: top; }
.btn-submit span { display: inline-block; vertical-align: top; line-height: 24px; }
@media screen and (max-width: 768px) { .btn-submit { width: 70%; padding: 9px 0; margin: 20px auto 0; } }

.finish { display: none; }
