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, input[type=number], input[type=text], input[type=password], input[type=date], input[type=time], input[type=email], textarea, button, select { margin: 0; padding: 0; border: 0; font: inherit; word-break: break-all; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; vertical-align: baseline; -moz-appearance: none; -webkit-appearance: none; border-radius: 0; } body { font-family: 'Arial', '微軟正黑體', sans-serif, Arial, '文泉驛正黑', "WenQuanYi Zen Hei", "儷黑 Pro", "LiHei Pro", "Microsoft JhengHei", sans-serif; font-weight: 300; font-size: 1em; } *[data-toUrl], label, button, *[data-setActive] { cursor: pointer; } button { background-color: transparent; } button, a, img { transition: all .2s ease-out 0s; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } picture, img { display: block; max-width: 100%; } a, a:hover, a:focus, textarea:focus, input:focus, button:focus, select { outline: none; text-decoration: none; } .wrap, .min-wrap { margin: 0 auto; padding: 0 20px; } .resize-wrap { width: 100%; padding: 0 6%; } @media (max-width: 1600px) { .resize-wrap { padding: 0 80px; } } @media (max-width: 1200px) { .resize-wrap { padding: 0 40px; } } @media (max-width: 1024px) { .resize-wrap { padding: 0 20px; } } .wrap { max-width: 1200px; width: 1200px; } .min-wrap { max-width: 980px; } @media (max-width: 1024px) { .min-wrap { width: 100%; } } .row { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; } .row .col-1 { width: calc(100% / 12); } .row .col-2 { width: calc((100% / 12) * 2); } .row .col-3 { width: 25%; } .row .col-4 { width: calc((100% / 12) * 4); } .row .col-5 { width: calc((100% / 12) * 5); } .row .col-6 { width: 50%; } .row .col-7 { width: calc((100% / 12) * 7); } .row .col-8 { width: calc((100% / 12) * 8); } .row .col-9 { width: 75%; } .row .col-10 { width: calc((100% / 12) * 10); } .row .col-11 { width: calc((100% / 12) * 11); } .row .col-12 { width: 100%; }