/* Reset */ 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-size: 100%; vertical-align: baseline; font-family:"Microsoft YaHei","Lato","Helvetica Neue",Helvetica,Arial,sans-serif; font-weight: 400; } article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body,html{ height: 100%; } body { line-height: 1; } ol, ul,li{ 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; } body { -webkit-text-size-adjust: none; } /* Box Model */ *, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } /* Containers */ .container { margin-left: auto; margin-right: auto; } .container.\31 25\25 { width: 100%; max-width: 1200px; min-width: 960px; } .container.\37 5\25 { width: 720px; } .container.\35 0\25 { width: 480px; } .container.\32 5\25 { width: 240px; } .container { width: 1200px; } @media screen and (max-width: 1800px) { .container.\31 25\25 { width: 100%; max-width: 1200px; min-width: 960px; } .container.\37 5\25 { width: 720px; } .container.\35 0\25 { width: 480px; } .container.\32 5\25 { width: 240px; } .container { width: 1200px; } } @media screen and (max-width: 1280px) { .container.\31 25\25 { width: 100%; max-width: 1200px; min-width: 960px; } .container.\37 5\25 { width: 720px; } .container.\35 0\25 { width: 480px; } .container.\32 5\25 { width: 240px; } .container { width: 960px; } } @media screen and (max-width: 980px) { .container.\31 25\25 { width: 100%; max-width: 1200px; min-width: 960px; } .container.\37 5\25 { width: 720px; } .container.\35 0\25 { width: 480px; } .container.\32 5\25 { width: 240px; } .container { width: 800px; } } @media screen and (max-width: 840px) { .container.\31 25\25 { width: 100%; max-width: 112.5%; min-width: 90%; } .container.\37 5\25 { width: 67.5%; } .container.\35 0\25 { width: 45%; } .container.\32 5\25 { width: 22.5%; } .container { width: 90% !important; } } @media screen and (max-width: 736px) { .container.\31 25\25 { width: 100%; max-width: 1200px; min-width: 960px; } .container.\37 5\25 { width: 720px; } .container.\35 0\25 { width: 480px; } .container.\32 5\25 { width: 240px; } .container { width: 90%; } } @media screen and (max-width: 480px) { .container.\31 25\25 { width: 100%; max-width: 1200px; min-width: 960px; } .container.\37 5\25 { width: 720px; } .container.\35 0\25 { width: 480px; } .container.\32 5\25 { width: 240px; } .container { width: 90%; } } /* Grid */ .row { border-bottom: solid 1px transparent; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .row > * { float: left; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .row:after, .row:before { content: ''; display: block; clear: both; height: 0; } .row.uniform > * > :first-child { margin-top: 0; } .row.uniform > * > :last-child { margin-bottom: 0; } .row.\30 \25 > * { padding: 0 0 0 0px; } .row.\30 \25 { margin: 0 0 -1px 0px; } .row.uniform.\30 \25 > * { padding: 0px 0 0 0px; } .row.uniform.\30 \25 { margin: 0px 0 -1px 0px; } .row > * { padding: 0 0 0 40px; } .row { margin: 0 0 -1px -40px; } .row.uniform > * { padding: 40px 0 0 40px; } .row.uniform { margin: -40px 0 -1px -40px; } .row.\32 00\25 > * { padding: 0 0 0 80px; } .row.\32 00\25 { margin: 0 0 -1px -80px; } .row.uniform.\32 00\25 > * { padding: 80px 0 0 80px; } .row.uniform.\32 00\25 { margin: -80px 0 -1px -80px; } .row.\31 50\25 > * { padding: 0 0 0 60px; } .row.\31 50\25 { margin: 0 0 -1px -60px; } .row.uniform.\31 50\25 > * { padding: 60px 0 0 60px; } .row.uniform.\31 50\25 { margin: -60px 0 -1px -60px; } .row.\35 0\25 > * { padding: 0 0 0 20px; } .row.\35 0\25 { margin: 0 0 -1px -20px; } .row.uniform.\35 0\25 > * { padding: 20px 0 0 20px; } .row.uniform.\35 0\25 { margin: -20px 0 -1px -20px; } .row.\32 5\25 > * { padding: 0 0 0 10px; } .row.\32 5\25 { margin: 0 0 -1px -10px; } .row.uniform.\32 5\25 > * { padding: 10px 0 0 10px; } .row.uniform.\32 5\25 { margin: -10px 0 -1px -10px; } .\31 2u, .\31 2u\24 { width: 100%; clear: none; margin-left: 0; } .\31 1u, .\31 1u\24 { width: 91.6666666667%; clear: none; margin-left: 0; } .\31 0u, .\31 0u\24 { width: 83.3333333333%; clear: none; margin-left: 0; } .\39 u, .\39 u\24 { width: 75%; clear: none; margin-left: 0; } .\38 u, .\38 u\24 { width: 66.6666666667%; clear: none; margin-left: 0; } .\37 u, .\37 u\24 { width: 58.3333333333%; clear: none; margin-left: 0; } .\36 u, .\36 u\24 { width: 50%; clear: none; margin-left: 0; } .\35 u, .\35 u\24 { width: 41.6666666667%; clear: none; margin-left: 0; } .\34 u, .\34 u\24 { width: 33.3333333333%; clear: none; margin-left: 0; } .\33 u, .\33 u\24 { width: 25%; clear: none; margin-left: 0; } .\32 u, .\32 u\24 { width: 16.6666666667%; clear: none; margin-left: 0; } .\31 u, .\31 u\24 { width: 8.3333333333%; clear: none; margin-left: 0; } .\31 2u\24 + *, .\31 1u\24 + *, .\31 0u\24 + *, .\39 u\24 + *, .\38 u\24 + *, .\37 u\24 + *, .\36 u\24 + *, .\35 u\24 + *, .\34 u\24 + *, .\33 u\24 + *, .\32 u\24 + *, .\31 u\24 + * { clear: left; } .\-11u { margin-left: 91.66667%; } .\-10u { margin-left: 83.33333%; } .\-9u { margin-left: 75%; } .\-8u { margin-left: 66.66667%; } .\-7u { margin-left: 58.33333%; } .\-6u { margin-left: 50%; } .\-5u { margin-left: 41.66667%; } .\-4u { margin-left: 33.33333%; } .\-3u { margin-left: 25%; } .\-2u { margin-left: 16.66667%; } .\-1u { margin-left: 8.33333%; } @media screen and (min-width: 737px) { .row > * { padding: 50px 0 0 50px; } .row { margin: -50px 0 -1px -50px; } .row.uniform > * { padding: 50px 0 0 50px; } .row.uniform { margin: -50px 0 -1px -50px; } .row.\32 00\25 > * { padding: 100px 0 0 100px; } .row.\32 00\25 { margin: -100px 0 -1px -100px; } .row.uniform.\32 00\25 > * { padding: 100px 0 0 100px; } .row.uniform.\32 00\25 { margin: -100px 0 -1px -100px; } .row.\31 50\25 > * { padding: 75px 0 0 75px; } .row.\31 50\25 { margin: -75px 0 -1px -75px; } .row.uniform.\31 50\25 > * { padding: 75px 0 0 75px; } .row.uniform.\31 50\25 { margin: -75px 0 -1px -75px; } .row.\35 0\25 > * { padding: 25px 0 0 25px; } .row.\35 0\25 { margin: -25px 0 -1px -25px; } .row.uniform.\35 0\25 > * { padding: 25px 0 0 25px; } .row.uniform.\35 0\25 { margin: -25px 0 -1px -25px; } .row.\32 5\25 > * { padding: 12.5px 0 0 12.5px; } .row.\32 5\25 { margin: -12.5px 0 -1px -12.5px; } .row.uniform.\32 5\25 > * { padding: 12.5px 0 0 12.5px; } .row.uniform.\32 5\25 { margin: -12.5px 0 -1px -12.5px; } .\31 2u\28desktop\29, .\31 2u\24\28desktop\29 { width: 100%; clear: none; margin-left: 0; } .\31 1u\28desktop\29, .\31 1u\24\28desktop\29 { width: 91.6666666667%; clear: none; margin-left: 0; } .\31 0u\28desktop\29, .\31 0u\24\28desktop\29 { width: 83.3333333333%; clear: none; margin-left: 0; } .\39 u\28desktop\29, .\39 u\24\28desktop\29 { width: 75%; clear: none; margin-left: 0; } .\38 u\28desktop\29, .\38 u\24\28desktop\29 { width: 66.6666666667%; clear: none; margin-left: 0; } .\37 u\28desktop\29, .\37 u\24\28desktop\29 { width: 58.3333333333%; clear: none; margin-left: 0; } .\36 u\28desktop\29, .\36 u\24\28desktop\29 { width: 50%; clear: none; margin-left: 0; } .\35 u\28desktop\29, .\35 u\24\28desktop\29 { width: 41.6666666667%; clear: none; margin-left: 0; } .\34 u\28desktop\29, .\34 u\24\28desktop\29 { width: 33.3333333333%; clear: none; margin-left: 0; } .\33 u\28desktop\29, .\33 u\24\28desktop\29 { width: 25%; clear: none; margin-left: 0; } .\32 u\28desktop\29, .\32 u\24\28desktop\29 { width: 16.6666666667%; clear: none; margin-left: 0; } .\31 u\28desktop\29, .\31 u\24\28desktop\29 { width: 8.3333333333%; clear: none; margin-left: 0; } .\31 2u\24\28desktop\29 + *, .\31 1u\24\28desktop\29 + *, .\31 0u\24\28desktop\29 + *, .\39 u\24\28desktop\29 + *, .\38 u\24\28desktop\29 + *, .\37 u\24\28desktop\29 + *, .\36 u\24\28desktop\29 + *, .\35 u\24\28desktop\29 + *, .\34 u\24\28desktop\29 + *, .\33 u\24\28desktop\29 + *, .\32 u\24\28desktop\29 + *, .\31 u\24\28desktop\29 + * { clear: left; } .\-11u\28desktop\29 { margin-left: 91.66667%; } .\-10u\28desktop\29 { margin-left: 83.33333%; } .\-9u\28desktop\29 { margin-left: 75%; } .\-8u\28desktop\29 { margin-left: 66.66667%; } .\-7u\28desktop\29 { margin-left: 58.33333%; } .\-6u\28desktop\29 { margin-left: 50%; } .\-5u\28desktop\29 { margin-left: 41.66667%; } .\-4u\28desktop\29 { margin-left: 33.33333%; } .\-3u\28desktop\29 { margin-left: 25%; } .\-2u\28desktop\29 { margin-left: 16.66667%; } .\-1u\28desktop\29 { margin-left: 8.33333%; } } @media screen and (min-width: 737px) and (max-width: 1200px) { .row > * { padding: 25px 0 0 25px; } .row { margin: -25px 0 -1px -25px; } .row.uniform > * { padding: 25px 0 0 25px; } .row.uniform { margin: -25px 0 -1px -25px; } .row.\32 00\25 > * { padding: 50px 0 0 50px; } .row.\32 00\25 { margin: -50px 0 -1px -50px; } .row.uniform.\32 00\25 > * { padding: 50px 0 0 50px; } .row.uniform.\32 00\25 { margin: -50px 0 -1px -50px; } .row.\31 50\25 > * { padding: 37.5px 0 0 37.5px; } .row.\31 50\25 { margin: -37.5px 0 -1px -37.5px; } .row.uniform.\31 50\25 > * { padding: 37.5px 0 0 37.5px; } .row.uniform.\31 50\25 { margin: -37.5px 0 -1px -37.5px; } .row.\35 0\25 > * { padding: 12.5px 0 0 12.5px; } .row.\35 0\25 { margin: -12.5px 0 -1px -12.5px; } .row.uniform.\35 0\25 > * { padding: 12.5px 0 0 12.5px; } .row.uniform.\35 0\25 { margin: -12.5px 0 -1px -12.5px; } .row.\32 5\25 > * { padding: 6.25px 0 0 6.25px; } .row.\32 5\25 { margin: -6.25px 0 -1px -6.25px; } .row.uniform.\32 5\25 > * { padding: 6.25px 0 0 6.25px; } .row.uniform.\32 5\25 { margin: -6.25px 0 -1px -6.25px; } .\31 2u\28tablet\29, .\31 2u\24\28tablet\29 { width: 100%; clear: none; margin-left: 0; } .\31 1u\28tablet\29, .\31 1u\24\28tablet\29 { width: 91.6666666667%; clear: none; margin-left: 0; } .\31 0u\28tablet\29, .\31 0u\24\28tablet\29 { width: 83.3333333333%; clear: none; margin-left: 0; } .\39 u\28tablet\29, .\39 u\24\28tablet\29 { width: 75%; clear: none; margin-left: 0; } .\38 u\28tablet\29, .\38 u\24\28tablet\29 { width: 66.6666666667%; clear: none; margin-left: 0; } .\37 u\28tablet\29, .\37 u\24\28tablet\29 { width: 58.3333333333%; clear: none; margin-left: 0; } .\36 u\28tablet\29, .\36 u\24\28tablet\29 { width: 50%; clear: none; margin-left: 0; } .\35 u\28tablet\29, .\35 u\24\28tablet\29 { width: 41.6666666667%; clear: none; margin-left: 0; } .\34 u\28tablet\29, .\34 u\24\28tablet\29 { width: 33.3333333333%; clear: none; margin-left: 0; } .\33 u\28tablet\29, .\33 u\24\28tablet\29 { width: 25%; clear: none; margin-left: 0; } .\32 u\28tablet\29, .\32 u\24\28tablet\29 { width: 16.6666666667%; clear: none; margin-left: 0; } .\31 u\28tablet\29, .\31 u\24\28tablet\29 { width: 8.3333333333%; clear: none; margin-left: 0; } .\31 2u\24\28tablet\29 + *, .\31 1u\24\28tablet\29 + *, .\31 0u\24\28tablet\29 + *, .\39 u\24\28tablet\29 + *, .\38 u\24\28tablet\29 + *, .\37 u\24\28tablet\29 + *, .\36 u\24\28tablet\29 + *, .\35 u\24\28tablet\29 + *, .\34 u\24\28tablet\29 + *, .\33 u\24\28tablet\29 + *, .\32 u\24\28tablet\29 + *, .\31 u\24\28tablet\29 + * { clear: left; } .\-11u\28tablet\29 { margin-left: 91.66667%; } .\-10u\28tablet\29 { margin-left: 83.33333%; } .\-9u\28tablet\29 { margin-left: 75%; } .\-8u\28tablet\29 { margin-left: 66.66667%; } .\-7u\28tablet\29 { margin-left: 58.33333%; } .\-6u\28tablet\29 { margin-left: 50%; } .\-5u\28tablet\29 { margin-left: 41.66667%; } .\-4u\28tablet\29 { margin-left: 33.33333%; } .\-3u\28tablet\29 { margin-left: 25%; } .\-2u\28tablet\29 { margin-left: 16.66667%; } .\-1u\28tablet\29 { margin-left: 8.33333%; } } @media screen and (max-width: 736px) { .row > * { padding: 20px 0 0 20px; } .row { margin: -20px 0 -1px -20px; } .row.uniform > * { padding: 20px 0 0 20px; } .row.uniform { margin: -20px 0 -1px -20px; } .row.\32 00\25 > * { padding: 40px 0 0 40px; } .row.\32 00\25 { margin: -40px 0 -1px -40px; } .row.uniform.\32 00\25 > * { padding: 40px 0 0 40px; } .row.uniform.\32 00\25 { margin: -40px 0 -1px -40px; } .row.\31 50\25 > * { padding: 30px 0 0 30px; } .row.\31 50\25 { margin: -30px 0 -1px -30px; } .row.uniform.\31 50\25 > * { padding: 30px 0 0 30px; } .row.uniform.\31 50\25 { margin: -30px 0 -1px -30px; } .row.\35 0\25 > * { padding: 10px 0 0 10px; } .row.\35 0\25 { margin: -10px 0 -1px -10px; } .row.uniform.\35 0\25 > * { padding: 10px 0 0 10px; } .row.uniform.\35 0\25 { margin: -10px 0 -1px -10px; } .row.\32 5\25 > * { padding: 5px 0 0 5px; } .row.\32 5\25 { margin: -5px 0 -1px -5px; } .row.uniform.\32 5\25 > * { padding: 5px 0 0 5px; } .row.uniform.\32 5\25 { margin: -5px 0 -1px -5px; } .\31 2u\28mobile\29, .\31 2u\24\28mobile\29 { width: 100%; clear: none; margin-left: 0; } .\31 1u\28mobile\29, .\31 1u\24\28mobile\29 { width: 91.6666666667%; clear: none; margin-left: 0; } .\31 0u\28mobile\29, .\31 0u\24\28mobile\29 { width: 83.3333333333%; clear: none; margin-left: 0; } .\39 u\28mobile\29, .\39 u\24\28mobile\29 { width: 75%; clear: none; margin-left: 0; } .\38 u\28mobile\29, .\38 u\24\28mobile\29 { width: 66.6666666667%; clear: none; margin-left: 0; } .\37 u\28mobile\29, .\37 u\24\28mobile\29 { width: 58.3333333333%; clear: none; margin-left: 0; } .\36 u\28mobile\29, .\36 u\24\28mobile\29 { width: 50%; clear: none; margin-left: 0; } .\35 u\28mobile\29, .\35 u\24\28mobile\29 { width: 41.6666666667%; clear: none; margin-left: 0; } .\34 u\28mobile\29, .\34 u\24\28mobile\29 { width: 33.3333333333%; clear: none; margin-left: 0; } .\33 u\28mobile\29, .\33 u\24\28mobile\29 { width: 25%; clear: none; margin-left: 0; } .\32 u\28mobile\29, .\32 u\24\28mobile\29 { width: 16.6666666667%; clear: none; margin-left: 0; } .\31 u\28mobile\29, .\31 u\24\28mobile\29 { width: 8.3333333333%; clear: none; margin-left: 0; } .\31 2u\24\28mobile\29 + *, .\31 1u\24\28mobile\29 + *, .\31 0u\24\28mobile\29 + *, .\39 u\24\28mobile\29 + *, .\38 u\24\28mobile\29 + *, .\37 u\24\28mobile\29 + *, .\36 u\24\28mobile\29 + *, .\35 u\24\28mobile\29 + *, .\34 u\24\28mobile\29 + *, .\33 u\24\28mobile\29 + *, .\32 u\24\28mobile\29 + *, .\31 u\24\28mobile\29 + * { clear: left; } .\-11u\28mobile\29 { margin-left: 91.66667%; } .\-10u\28mobile\29 { margin-left: 83.33333%; } .\-9u\28mobile\29 { margin-left: 75%; } .\-8u\28mobile\29 { margin-left: 66.66667%; } .\-7u\28mobile\29 { margin-left: 58.33333%; } .\-6u\28mobile\29 { margin-left: 50%; } .\-5u\28mobile\29 { margin-left: 41.66667%; } .\-4u\28mobile\29 { margin-left: 33.33333%; } .\-3u\28mobile\29 { margin-left: 25%; } .\-2u\28mobile\29 { margin-left: 16.66667%; } .\-1u\28mobile\29 { margin-left: 8.33333%; } } /* Basic */ body { background: #fff; } body.is-loading *, body.is-loading *:before, body.is-loading *:after { -moz-animation: none !important; -webkit-animation: none !important; -ms-animation: none !important; animation: none !important; -moz-transition: none !important; -webkit-transition: none !important; -ms-transition: none !important; transition: none !important; } body, input, select, textarea { color: #777; font-size: 14pt; font-weight: 400; line-height: 1.75em; } a { -moz-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; -webkit-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; -ms-transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; transition: color 0.2s ease-in-out, border-color 0.2s ease-in-out; color: #2695ef; text-decoration: none; } a:hover { border-bottom-color: transparent; color: #2695ef !important; text-decoration: none; } strong, b { color: #787878; font-weight: 400; } em, i { font-style: italic; } p { margin: 0 0 1em 0; font-size: 0.8em; } h1, h2, h3, h4, h5, h6 { color: #333; font-weight: 400; line-height: 1em; margin: 0 0 1em 0; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { color: inherit; text-decoration: none; } h1 { font-size: 2em; line-height: 1.5em; } h2 { font-size: 1.5em; line-height: 1.5em; } h3 { font-size: 1.25em; line-height: 1.5em; } h4 { font-size: 1.1em; line-height: 1.5em; } h5 { font-size: 0.9em; line-height: 1.5em; } h6 { font-size: 0.7em; line-height: 1.5em; } sub { font-size: 0.8em; position: relative; top: 0.5em; } sup { font-size: 0.8em; position: relative; top: -0.5em; } hr { border: 0; border-bottom: solid 2px #e0e0e0; margin: 2em 0; } hr.major { margin: 3em 0; } blockquote { border-left: solid 6px #e0e0e0; font-style: italic; margin: 0 0 2em 0; padding: 0.5em 0 0.5em 1.5em; } code { background: #f7f7f7; border-radius: 0.35em; border: solid 2px #e0e0e0; font-family: "Courier New", monospace; font-size: 0.9em; margin: 0 0.25em; padding: 0.25em 0.65em; } pre { -webkit-overflow-scrolling: touch; font-family: "Courier New", monospace; font-size: 0.9em; margin: 0 0 2em 0; } pre code { display: block; line-height: 1.75em; padding: 1em 1.5em; overflow-x: auto; } .align-left { text-align: left; } .align-center { text-align: center; } .align-right { text-align: right; } .float_left{ float: left; } .float_right{ float: right; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden } .clearfix { *+height: 1%; } .orange{ color: #e95513; } .yellow{ color: #eba823; } .blue{ color: #0767aa; } .green{ color: #8cbc21; } /* Section/Article */ section, article { margin-bottom: 2.5em; } section > :last-child, section:last-child, article > :last-child, article:last-child { margin-bottom: 0; } header.major { position: relative; text-align: center; border-top: solid 1px #ccc; top: 1em; margin: 0 0 3em 0; } header.major h2 { background: #fff; position: relative; top: -0.75em; display: inline; margin: 0; padding: 0 1em 0 1em; } header.white h2 { color: #FFFFFF; margin-bottom: 1.5em; text-align: center; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } header.black{ margin-bottom: 2em; text-align: center; } /* Box */ .box { background: rgba(255,255,255,.8); padding: 2em 0 2em 0; } .box_item { text-align: center; padding: 0 2em 0 2em; } .box_item .content p{ line-height: 1.6em; height: 4.8em; overflow: hidden; } @media screen and (min-width: 736px) and (max-width: 980px) { .box_item { padding: 0 1em 0 1em; } } /* Form */ form { margin: 0 0 1.5em 0; } form > .field { margin: 0 0 1.5em 0; position: relative; } form > .field > :last-child { margin-bottom: 0; } label { color: #313f47; display: block; font-size: 0.9em; margin: 0 0 0.75em 0; } input[type="text"], input[type="password"], input[type="email"], input[type="tel"], select, textarea { -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; border-radius: 4px; border: solid 1px #c8cccf; color: inherit; display: block; outline: 0; padding: 0 1em; text-decoration: none; width: 100%; font-size: 0.9em; } input[type="text"]:invalid, input[type="password"]:invalid, input[type="email"]:invalid, input[type="tel"]:invalid, select:invalid, textarea:invalid { box-shadow: none; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="tel"]:focus, select:focus, textarea:focus { border-color: #B2B2B2; outline: 0; } input[type="text"].orange_line, input[type="password"].orange_line, input[type="email"].orange_line, input[type="tel"].orange_line, textarea.orange_line{ border-color: #e95513; } .select-wrapper { text-decoration: none; display: block; position: relative; } .select-wrapper:before { content: ""; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none !important; } .select-wrapper:before { color: #c8cccf; display: block; height: 2.75em; line-height: 2.75em; pointer-events: none; position: absolute; right: 0; text-align: center; top: 0; width: 2.75em; } .select-wrapper select::-ms-expand { display: none; } input[type="text"], input[type="password"], input[type="email"], select { height: 2.75em; } textarea { padding: 0.75em 1em; } input[type="checkbox"], input[type="radio"] { -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; display: block; float: left; margin-right: -2em; opacity: 0; width: 1em; z-index: -1; } input[type="checkbox"] + label, input[type="radio"] + label { text-decoration: none; color: #414f57; cursor: pointer; display: inline-block; font-size: 1em; font-weight: 300; padding-left: 2.4em; padding-right: 0.75em; position: relative; } input[type="checkbox"] + label:before, input[type="radio"] + label:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none !important; } input[type="checkbox"] + label:before, input[type="radio"] + label:before { border-radius: 4px; border: solid 1px #c8cccf; content: ''; display: inline-block; height: 1.65em; left: 0; line-height: 1.58125em; position: absolute; text-align: center; top: 0.15em; width: 1.65em; } input[type="checkbox"]:checked + label:before, input[type="radio"]:checked + label:before { color: #2695ef; content: '\f00c'; } input[type="checkbox"]:focus + label:before, input[type="radio"]:focus + label:before { border-color: #2695ef; } input[type="checkbox"] + label:before { border-radius: 4px; } input[type="radio"] + label:before { border-radius: 100%; } ::-webkit-input-placeholder { color: #616f77 !important; opacity: 1.0; } :-moz-placeholder { color: #616f77 !important; opacity: 1.0; } ::-moz-placeholder { color: #616f77 !important; opacity: 1.0; } :-ms-input-placeholder { color: #616f77 !important; opacity: 1.0; } .formerize-placeholder { color: #616f77 !important; opacity: 1.0; } input.short_input{ width: 60%; } form > .field .button.message{ padding: 0; width: 38%; line-height: 2.75em; height: 2.75em; font-size: 0.9em; position: absolute; right: 0; top: 0; } .api_form{ padding-top: 2em; } form > .field.small_field .row{ padding-top: -20px; } form > .field.small_field .row > *{ padding-top: 20px; } form > .field.small_field label{ font-size: 0.8em; } form > .field.small_field input[type="text"], form > .field.small_field input[type="password"], form > .field.small_field input[type="email"], form > .field.small_field input[type="tel"], form > .field.small_field select, form > .field.small_field textarea{ font-size: 0.8em; } form > .field.small_field .select-wrapper:before{ height: 2.25em; line-height: 2.25em; } @media screen and (max-width: 736px) { form > .field.small_field .row > *{ padding-top: 5px; } } /* Icon */ .icon { position: relative; text-decoration: none; } .icon:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none !important; } .icon > .label { display: none; } .icon.featured { position: relative; display: inline-block; background-color: #f778a5; width: 7em; padding: 1.75em 0 0.75em 0; border-top-left-radius: 5px; border-top-right-radius: 5px; margin: 0 0 3.5em 0; cursor: default; } .icon.featured:before { font-size: 3.5em; line-height: 1em; color: #fff; } .icon.featured:after { content: ''; position: absolute; bottom: -1.99em; left: 0; border-top: solid 2em #f778a5; border-left: solid 3.5em transparent; border-right: solid 3.5em transparent; } .icon.featured.alt { background-color: #7ac0fb; } .icon.featured.alt:after { border-top-color: #7ac0fb; } .icon.featured.alt2 { background-color: #fccb65; } .icon.featured.alt2:after { border-top-color: #fccb65; } .icon.round_icon{ position: relative; display: inline-block; background-color: #0767aa; width: 6em; height: 6em; line-height: 6em; border-radius: 100%; margin: 0 0 1em 0; cursor: default; } .icon.round_icon:before { font-size: 2.5em; color: #FFFFFF; } .icon.round_icon.bg_red{ background-color: #f778a5; } .icon.round_icon.bg_yellow{ background-color: #fccb65; } .icon.round_icon.bg_blue{ background-color: #7ac0fb; } .icon.round_icon.round_border{ background-color: #FFFFFF; border: 1px solid #0767aa; } .icon.round_icon.round_border:before { color: #0767aa; } /* Image */ .image { border: 0; display: inline-block; position: relative; overflow: hidden; } .image img { display: block; width: 100%; } .image.left, .image.right { max-width: 40%; } .image.left img, .image.right img { width: 100%; } .image.left { float: left; margin: 0 1.5em 1em 0; top: 0.25em; } .image.right { float: right; margin: 0 0 1em 1.5em; top: 0.25em; } .image.fit { display: block; margin: 0 0 2em 0; width: 100%; } .image.fit img { width: 100%; } .image.featured { display: block; width: 100%; margin: 0 0 1em 0; text-align: center; } .image.featured img{ display: inline-block; width: 211px; height: 211px; } @media screen and (min-width: 736px) and (max-width: 980px) { .image.featured img{ width: 140px; height: 140px; } } /* List */ ol { list-style: decimal; margin: 0 0 2em 0; padding-left: 1.25em; } ol li { padding-left: 0.25em; } ul { list-style: disc; margin: 0; padding: 0; } ul li { margin: 0; padding: 0; } ul.alt { list-style: none; padding-left: 0; } ul.alt li { border-top-style: solid; border-top-width: 1px; padding: 0.5em 0; } ul.alt li:first-child { border-top: 0; padding-top: 0; } ul.icons { cursor: default; list-style: none; padding-left: 0; } ul.icons li { display: inline-block; padding: 0 1.5em 0 0; } ul.icons li:last-child { padding-right: 0 !important; } ul.icons li .icon:before { font-size: 1.75rem; } ul.icons.major li { padding: 0 2.5em 0 0; } ul.icons.major li .icon:before { font-size: 2.75rem; } @media screen and (max-width: 736px) { ul.icons.major li { padding: 0 1.25em 0 0; } ul.icons.major li .icon:before { font-size: 1.75rem; } } ul.icons.labeled li { margin: 1em 0; padding: 0 2em 0 0; } ul.icons.labeled li .icon:before { vertical-align: middle; font-size: 2.25rem; margin-right: 0.5em; } ul.icons.labeled li .icon .label { display: inline-block; vertical-align: middle; color: #999999; } @media screen and (max-width: 736px) and (orientation: portrait) { ul.icons.labeled { text-align: left; margin-right: auto; margin-left: auto; display: inline-block; white-space: nowrap; } ul.icons.labeled li { display: block; padding: 0; margin: 1.5em 0 0 0; } ul.icons.labeled li .icon:before { width: 1.5em; display: block; float: left; margin-right: 0; } ul.icons.labeled li .icon:after { content: ''; display: block; clear: both; } ul.icons.labeled li:first-child { margin-top: 0; } } ul.actions { cursor: default; list-style: none; padding-left: 0; } ul.actions li { display: inline-block; padding: 0 1em 0 0; vertical-align: middle; } ul.actions li:last-child { padding-right: 0; } ul.actions.small li { padding: 0 0.5em 0 0; } ul.actions.vertical li { display: block; padding: 1em 0 0 0; } ul.actions.vertical li:first-child { padding-top: 0; } ul.actions.vertical li > * { margin-bottom: 0; } ul.actions.vertical.small li { padding: 0.5em 0 0 0; } ul.actions.vertical.small li:first-child { padding-top: 0; } ul.actions.fit { display: table; margin-left: -1em; padding: 0; table-layout: fixed; width: calc(100% + 1em); } ul.actions.fit li { display: table-cell; padding: 0 0 0 1em; } ul.actions.fit li > * { margin-bottom: 0; } ul.actions.fit.small { margin-left: -0.5em; width: calc(100% + 0.5em); } ul.actions.fit.small li { padding: 0 0 0 0.5em; } @media screen and (max-width: 480px) and (orientation: portrait) { ul.actions { margin: 0 0 2em 0; } ul.actions li { padding: 1em 0 0 0; display: block; text-align: center; width: 100%; } ul.actions li:first-child { padding-top: 0; } ul.actions li > * { width: 100%; margin: 0 !important; } ul.actions li > *.icon:before { margin-left: -2em; } ul.actions.small li { padding: 0.5em 0 0 0; } ul.actions.small li:first-child { padding-top: 0; } } ul.alt > li { border-top-color: #e6e6e6; } /* Spotlight */ .spotlight { margin: 0 0 2em 0; } .spotlight .image { width: 45%; float: left; } .spotlight .image img { display: block; width: 100%; } .spotlight .content { width: 55%; float: right; text-align: center; padding-top: 8em; } .spotlight:nth-child(2n) .image { float: right; } .spotlight:nth-child(2n) .content { float: left; } @media screen and (max-width: 1280px){ .spotlight .content { padding-top: 7em; } } @media screen and (max-width: 980px){ .spotlight .content { padding-top: 5em; } } @media screen and (max-width: 840px){ .spotlight .content { padding-top: 3.5em; } } @media screen and (max-width: 736px) and (orientation: landscape) { .spotlight .image,.spotlight .content { float: none; width: 100%; } .spotlight:nth-child(2n) .image,.spotlight:nth-child(2n) .content { float: none; } .spotlight .content{ padding-top: 1em; } .spotlight .image img { width: 60%; margin: 0 auto; } } @media screen and (max-width: 736px) and (orientation: portrait) { .spotlight .image,.spotlight .content { float: none; width: 100%; } .spotlight:nth-child(2n) .image,.spotlight:nth-child(2n) .content { float: none; } .spotlight .content{ padding-top: 1em; } .spotlight .image img { width: 60%; margin: 0 auto; } } @media screen and (max-width: 480px){ .spotlight .image img { width: 80%; } } /* Table */ .table-wrapper { -webkit-overflow-scrolling: touch; overflow-x: auto; } table { margin: 0 0 2em 0; width: 100%; } table tbody tr { border: solid 1px #e0e0e0; border-left: 0; border-right: 0; } table tbody tr:nth-child(2n + 1) { background-color: #f7f7f7; } table td { padding: 0.75em 0.75em; font-size: 0.7em; line-height: 1.8em; } table th { color: #787878; font-size: 0.8em; font-weight: 400; padding: 0 0.75em 0.75em 0.75em; text-align: left; } table thead { border-bottom: solid 2px #e0e0e0; } table tfoot { border-top: solid 2px #e0e0e0; } table.alt { border-collapse: separate; } table.alt tbody tr td { border: solid 2px #e0e0e0; border-left-width: 0; border-top-width: 0; } table.alt tbody tr td:first-child { border-left-width: 2px; } table.alt tbody tr:first-child td { border-top-width: 2px; } table.alt thead { border-bottom: 0; } table.alt tfoot { border-top: 0; } /* Button */ input[type="submit"], input[type="reset"], input[type="button"], .button { -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; appearance: none; -moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; -webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; -ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out; background-color: #666; border-radius: 6px; border: 0; color: #ffffff; cursor: pointer; display: inline-block; font-weight: 400; height: 2.7em; line-height: 2.7em; padding: 0 2em; text-align: center; text-decoration: none; white-space: nowrap; } input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover, .button:hover { background-color: #737373; } input[type="submit"]:active, input[type="reset"]:active, input[type="button"]:active, .button:active { background-color: #595959; } input[type="submit"].icon, input[type="reset"].icon, input[type="button"].icon, .button.icon { padding-left: 1.35em; } input[type="submit"].icon:before, input[type="reset"].icon:before, input[type="button"].icon:before, .button.icon:before { margin-right: 0.5em; } input[type="submit"].fit, input[type="reset"].fit, input[type="button"].fit, .button.fit { display: block; margin: 0 0 1em 0; width: 100%; } input[type="submit"].small, input[type="reset"].small, input[type="button"].small, .button.small { font-size: 0.8em; height: 2.5em; line-height: 2.5em; } input[type="submit"].big, input[type="reset"].big, input[type="button"].big, .button.big { font-size: 1.25em; height: 3em; line-height: 3em; } input[type="submit"].alt, input[type="reset"].alt, input[type="button"].alt, .button.alt { background-color: transparent; border: 1px solid #FFFFFF; color: #FFFFFF; } input[type="submit"].alt:hover, input[type="reset"].alt:hover, input[type="button"].alt:hover, .button.alt:hover { background-color: rgba(255,255,255,0.1); color: #FFFFFF !important; } input[type="submit"].alt:active, input[type="reset"].alt:active, input[type="button"].alt:active, .button.alt:active { background-color: rgba(255,255,255,0.1); } input[type="submit"].alt.icon:before, input[type="reset"].alt.icon:before, input[type="button"].alt.icon:before, .button.alt.icon:before { color: #999; } input[type="submit"].special, input[type="reset"].special, input[type="button"].special, button.special, .button.special { box-shadow: none; background-color: #0767aa; color: #ffffff !important; } input[type="submit"].special:hover, input[type="reset"].special:hover, input[type="button"].special:hover, button.special:hover, .button.special:hover { filter:alpha(opacity=80); -moz-opacity:0.8; opacity:0.8; } input[type="submit"].special:active, input[type="reset"].special:active, input[type="button"].special:active, button.special:active, .button.special:active { background-color: #3089e2; } input[type="submit"].green, input[type="reset"].green, input[type="button"].green, button.green, .button.green { box-shadow: none; background-color: #8cbc21; color: #ffffff !important; } input[type="submit"].green:hover, input[type="reset"].green:hover, input[type="button"].green:hover, button.green:hover, .button.green:hover { filter:alpha(opacity=80); -moz-opacity:0.8; opacity:0.8; } input[type="submit"].disabled, input[type="submit"]:disabled, input[type="reset"].disabled, input[type="reset"]:disabled, input[type="button"].disabled, input[type="button"]:disabled, .button.disabled, .button:disabled { background-color: #777 !important; box-shadow: inset 0 -0.15em 0 0 rgba(0, 0, 0, 0.15); color: #f5f5f5 !important; cursor: default; opacity: 0.25; } /* 图片预览Poptrox */ @-moz-keyframes spin { 0% { -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes spin { 0% { -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @-ms-keyframes spin { 0% { -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes spin { 0% { -moz-transform: rotate(0deg); -webkit-transform: rotate(0deg); -ms-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } } .poptrox-popup { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); background: #fff; border-radius: 0.35em; box-shadow: 0 0.1em 0.15em 0 rgba(0, 0, 0, 0.15); overflow: hidden; padding-bottom: 3em; } .poptrox-popup .loader { text-decoration: none; -moz-animation: spin 1s linear infinite; -webkit-animation: spin 1s linear infinite; -ms-animation: spin 1s linear infinite; animation: spin 1s linear infinite; font-size: 1.5em; height: 1em; left: 50%; line-height: 1em; margin: -0.5em 0 0 -0.5em; position: absolute; top: 50%; width: 1em; } .poptrox-popup .loader:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none !important; } .poptrox-popup .loader:before { content: '\f1ce'; } .poptrox-popup .caption { background: #fff; bottom: 0; cursor: default; font-size: 0.9em; height: 3em; left: 0; line-height: 2.8em; position: absolute; text-align: center; width: 100%; z-index: 1; } .poptrox-popup .nav-next, .poptrox-popup .nav-previous { text-decoration: none; -moz-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out; -ms-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); background: rgba(0, 0, 0, 0.01); cursor: pointer; height: 100%; opacity: 0; position: absolute; top: 0; width: 50%; } .poptrox-popup .nav-next:before, .poptrox-popup .nav-previous:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none !important; } .poptrox-popup .nav-next:before, .poptrox-popup .nav-previous:before { color: #fff; font-size: 2.5em; height: 1em; line-height: 1em; margin-top: -0.75em; position: absolute; text-align: center; top: 50%; width: 1.5em; } .poptrox-popup .nav-next { right: 0; } .poptrox-popup .nav-next:before { content: '\f105'; right: 0; } .poptrox-popup .nav-previous { left: 0; } .poptrox-popup .nav-previous:before { content: '\f104'; left: 0; } .poptrox-popup .closer { text-decoration: none; -moz-transition: opacity 0.2s ease-in-out; -webkit-transition: opacity 0.2s ease-in-out; -ms-transition: opacity 0.2s ease-in-out; transition: opacity 0.2s ease-in-out; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); color: #fff; height: 4em; line-height: 4em; opacity: 0; position: absolute; right: 0; text-align: center; top: 0; width: 4em; z-index: 2; } .poptrox-popup .closer:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none !important; } .poptrox-popup .closer:before { -moz-box-sizing: content-box; -webkit-box-sizing: content-box; -ms-box-sizing: content-box; box-sizing: content-box; border-radius: 100%; border: solid 3px rgba(255, 255, 255, 0.5); content: '\f00d'; display: block; font-size: 1em; height: 1.75em; left: 50%; line-height: 1.75em; margin: -0.875em 0 0 -0.875em; position: absolute; top: 50%; width: 1.75em; } .poptrox-popup:hover .nav-next, .poptrox-popup:hover .nav-previous { opacity: 0.5; } .poptrox-popup:hover .nav-next:hover, .poptrox-popup:hover .nav-previous:hover { opacity: 1.0; } .poptrox-popup:hover .closer { opacity: 0.5; } .poptrox-popup:hover .closer:hover { opacity: 1.0; } /* Work Item */ .work-item { margin: 0 0 2em 0; } .work-item .image { margin: 0 0 1.5em 0; } .work-item h3 { font-size: 1em; margin: 0 0 0.5em 0; } .work-item p { font-size: 0.8em; line-height: 1.5em; margin: 0; } /* Touch */ body.is-touch .image.thumb:before { opacity: 0.5 !important; } body.is-touch .image.thumb:after { display: none !important; } body.is-touch #header { background-attachment: scroll; background-size: auto, cover; } body.is-touch .poptrox-popup .nav-next, body.is-touch .poptrox-popup .nav-previous, body.is-touch .poptrox-popup .closer { opacity: 1.0 !important; } /* ===================Header ===================*/ #page-wrapper { padding-top: 3.25em; height: 100%; } body.landing #page-wrapper { padding-top: 0; } @-moz-keyframes reveal-header { 0% { top: -5em; } 100% { top: 0; } } @-webkit-keyframes reveal-header { 0% { top: -5em; } 100% { top: 0; } } @-ms-keyframes reveal-header { 0% { top: -5em; } 100% { top: 0; } } @keyframes reveal-header { 0% { top: -5em; } 100% { top: 0; } } #header { background-color:#FFFFFF; color: #333; cursor: default; height: 3.25em; left: 0; line-height: 3.25em; position: fixed; top: 0; width: 100%; z-index: 10000; box-shadow: 0 0 2px rgba(0, 0, 0, 0.5); } #header h1 { color: inherit; height: inherit; left: 1.25em; line-height: inherit; margin: 0; padding: 0; position: absolute; top: 0; } #header h1 img{ display: block; } #header nav { height: inherit; line-height: inherit; position: absolute; top: 0; vertical-align: middle; } #header nav#nav { left: 13em; } #header nav#navRight { right: 1.5em; } #header nav#navRight li a:not(.button) { margin-right: 1em; } #header nav > ul { list-style: none; margin: 0; padding-left: 0; } #header nav > ul > li { display: inline-block; } #header nav > ul > li > ul { display: none; } #header nav > ul > li a { display: inline-block; height: 2.3em; line-height: 2.3em; font-size: 0.9em; border-radius: 6px; } #header nav > ul > li a:not(.button) { color: #333; display: inline-block; text-decoration: none; border: 0; padding: 0 1.2em; } #header nav > ul > li a:not(.button).icon:before { color: #333; position: absolute; right: 0; top: 0; } #header nav > ul > li:first-child { margin-left: 0; } #header nav > ul > li .button { margin: 0 0 0 0.5em; position: relative; } #header input[type="submit"], #header input[type="reset"], #header input[type="button"], #header .button.register_btn,#header .button.login_btn { background-color: #0767aa; box-shadow: 0; color: #fff; padding: 0 1.5em; } #header .button.register_btn{ background-color: #8cbc21; } #header input[type="submit"]:hover, #header input[type="reset"]:hover, #header input[type="button"]:hover, #header .button:hover { filter:alpha(opacity=80); -moz-opacity:0.8; opacity:0.8; color: #FFFFFF !important; } #header input[type="submit"]:active, #header input[type="reset"]:active, #header input[type="button"]:active, #header .button:active { filter:alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; } #header.reveal { -moz-animation: reveal-header 0.5s; -webkit-animation: reveal-header 0.5s; -ms-animation: reveal-header 0.5s; animation: reveal-header 0.5s; } #header.alt { -moz-animation: none; -webkit-animation: none; -ms-animation: none; animation: none; position: absolute; background-color: rgba(255,255,255,.7); color: #333; box-shadow: none; } .dropotron { background: #fff; border-radius: 6px; box-shadow: 0 2px 0 0 rgba(0, 0, 0, 0.065), inset 0 -1px 0 0 #fff, inset 0 0 0 1px rgba(229, 229, 229, 0.5); list-style: none; margin: calc(-0.5em + 1px) 0 0 1px; padding: 0.5em 0; width: 11em; } .dropotron li { padding: 0; } .dropotron li a, .dropotron li span { -moz-transition: none; -webkit-transition: none; -ms-transition: none; transition: none; border: 0; color: inherit; display: block; padding: 0.15em 1em; text-align: center; } .dropotron li.active > a, .dropotron li.active > span, .dropotron li:hover > a, .dropotron li:hover > span { color: #0767aa; } .dropotron.level-0 { font-size: 0.8em; margin: 0.8em 0 0 0; } .dropotron.level-0:before { -moz-transform: rotate(45deg); -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); background: #fff; border: solid 1px rgba(229, 229, 229, 0.5); border-bottom: 0; border-right: 0; box-shadow: -0.25em -0.125em 0.125em 0 rgba(0, 0, 0, 0.015); content: ''; display: block; height: 0.75em; position: absolute; right: 1.25em; top: -0.375em; width: 0.75em; z-index: 0; } /*===================banner===================*/ @-moz-keyframes banner{ 0% { -moz-transform: translate3d(2em,0,0); -webkit-transform: translate3d(2em,0,0); -ms-transform: translate3d(2em,0,0); transform: translate3d(2em,0,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @-webkit-keyframes banner { 0% { -moz-transform: translate3d(2em,0,0); -webkit-transform: translate3d(2em,0,0); -ms-transform: translate3d(2em,0,0); transform: translate3d(2em,0,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @-ms-keyframes banner{ 0% { -moz-transform: translate3d(2em,0,0); -webkit-transform: translate3d(2em,0,0); -ms-transform: translate3d(2em,0,0); transform: translate3d(2em,0,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @keyframes banner { 0% { -moz-transform: translate3d(2em,0,0); -webkit-transform: translate3d(2em,0,0); -ms-transform: translate3d(2em,0,0); transform: translate3d(2em,0,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @-moz-keyframes image{ 0% { -moz-transform: translate3d(0,2em,0); -webkit-transform: translate3d(2em,0,0); -ms-transform: translate3d(0,2em,0); transform: translate3d(0,2em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @-webkit-keyframes image { 0% { -moz-transform: translate3d(0,2em,0); -webkit-transform: translate3d(2em,0,0); -ms-transform: translate3d(0,2em,0); transform: translate3d(0,2em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @-ms-keyframes image{ 0% { -moz-transform: translate3d(0,2em,0); -webkit-transform: translate3d(2em,0,0); -ms-transform: translate3d(0,2em,0); transform: translate3d(0,2em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } @keyframes image{ 0% { -moz-transform: translate3d(0,2em,0); -webkit-transform: translate3d(2em,0,0); -ms-transform: translate3d(0,2em,0); transform: translate3d(0,2em,0); opacity: 0; } 100% { -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 1; } } .banner{ color: #FFFFFF; padding: 8.5em 0 2.5em 0; } .banner .banner_text { -moz-animation: banner 1s 0s forwards; -webkit-animation: banner 1s 0s forwards; -ms-animation: banner 1s 0s forwards; animation: banner 1s 0s forwards; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 0; text-align: left; float: left; width: 60%; margin: 4em 0 0 0; } .banner .banner_text > :last-child { margin-bottom: 0; } .banner .banner_text h2{ color: #FFFFFF; font-size: 2.2em; margin-bottom: 1em; } .banner .banner_text h2 span{ display: inline-block; vertical-align: middle; } .banner .banner_text h2 img{ vertical-align: middle; padding-right: 1em; border-right: 1px solid #FFFFFF; margin-right: 1em; } .banner .banner_text p{ font-size: 1.3em; margin-bottom: 1em; } .banner .banner_text p span{ color: #8cbc21; padding: 0 5px; } .banner .banner_img{ float: right; width: 40%; text-align: center; } .banner .banner_img img.ie_img{ display: none; } .banner .image { -moz-animation: image 1s 0.2s forwards; -webkit-animation: image 1s 0.2s forwards; -ms-animation: image 1s 0.2s forwards; animation: image 1s 0.2s forwards; -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -moz-transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); -ms-transform: translate3d(0,0,0); transform: translate3d(0,0,0); opacity: 0; } .banner .image img { -moz-transition: opacity 0.75s ease; -webkit-transition: opacity 0.75s ease; -ms-transition: opacity 0.75s ease; transition: opacity 0.75s ease; -moz-transition-delay: 0.75s; -webkit-transition-delay: 0.75s; -ms-transition-delay: 0.75s; transition-delay: 0.75s; opacity: 1; max-width: 100%; width: auto; } .image.phone { box-shadow: none; border-radius: 0; margin: 0 0 3em 0; width: 13em; } .image.phone .inner, .image.phone:before, .image.phone:after { display: block; border: solid 2px rgba(255, 255, 255, 0.5); } .image.phone .inner { position: relative; } .image.phone .inner:before, .image.phone .inner:after { content: ''; position: absolute; left: 50%; } .image.phone .inner:before { top: -1.375em; margin-left: -1em; width: 2em; height: 0.25em; border-radius: 0.5em; background: rgba(255, 255, 255, 0.5); } .image.phone .inner:after { bottom: -2.75em; margin-left: -1em; width: 2em; height: 2em; border-radius: 100%; border: solid 2px rgba(255, 255, 255, 0.5); } .image.phone:before, .image.phone:after { content: ''; } .image.phone:before { height: 2.5em; border-radius: 1em 1em 0 0; border-bottom: 0; } .image.phone:after { height: 3.5em; border-radius: 0 0 1em 1em; border-top: 0; } .slide_box{ width: 100%; height: 18.4em; overflow: hidden; background-image: url(../images/screen.jpg); background-repeat: no-repeat; position: relative; } .slider_pic{ padding: 0; margin: 0; } .slider_pic li{ height: 100%; width: 100%; padding: 0; margin: 0; text-align: center; position: absolute; top: 0; left: 100%; } .slider_pic li.beijia_img img{ padding: 2.8em 0.5em; } .slider_pic li.weixin_img{ padding: 2.6em 1.2em; font-size: 1.2em; } .slider_pic li.weixin_img img{ display: inline-block; } .slider_btn{ position: absolute; bottom: 0.5em; left: 0; text-align: center; width: 100%; } .slider_btn li{ display: inline-block; width: 8px; height: 8px; border-radius: 100%; border: 1px solid #FFFFFF; } .slider_btn li.on{ background-color: #FFFFFF; } /* ===================main ===================*/ .main{ min-height: 60%; } section.main{ margin-bottom: 0!important; } /* 首页 */ .cd-fixed-bg { position: relative; background-size: cover; background-repeat: no-repeat; background-position: center center; background-attachment: fixed; z-index: 1; padding: 6em 0; } .cd-fixed-bg.banner{ padding: 8.5em 0 2.5em 0 ; } .cd-fixed-bg.cd-bg-1 { background-image: url(../images/pic01.jpg); } .cd-scrolling-bg { position: relative; padding: 4em 0; z-index: 2; } .cd-scrolling-bg.bg_white { background-color: #FFFFFF; } .cd-scrolling-bg.bg_gary { background-color: #eaecf8; } .cd-scrolling-bg.bottom_bg{ padding: 0; } @media only screen and (max-width: 1170px) { .cd-fixed-bg { background-attachment: scroll; } .cd-fixed-bg,.cd-scrolling-bg { padding: 3em 0; } } @media only screen and (max-width: 840px) { .cd-fixed-bg,.cd-scrolling-bg { padding: 2em 0; } } .use_advantage{ margin: 0 4em; } .advantage_img img{ width: 7em; height: 7em; } @media screen and (max-width: 840px) { .use_advantage{ margin: 0 2em; } } .konw_morebox{ padding: 3em 0 3em 0; background:#0767aa; } a.know_more{ display: block; text-align: center; position: relative; width: 13em; height: 13em; padding: 1em; border-radius: 100%; background-color: rgba(255,255,255,0.3); color: #FFFFFF; margin: 0 auto; transition: all 0.6s ease 0s; } .know_more:before { font-size: 3em; line-height: 1.5em; color: rgba(255,255,255,0.5); } a.know_more:hover{ transform: scale(1.1); color: #FFFFFF !important; background-color: rgba(255,255,255,0.4); } .know_more h4{ margin-bottom: 0.5em; color: #FFFFFF; } .know_more p{ line-height: 1.5em; } @media screen and (max-width: 980px) { a.know_more{ width: 12em; height: 12em; padding: 0.5em; } } @media screen and (max-width: 736px) { .konw_morebox{ padding: 4em 0 2em 0; } a.know_more{ width: 13em; height: 13em; padding: 1em; margin-bottom: 1em; } } /* 登录 */ body.login_bg{ height: 100%; background-color: #ffffff; background-image: url(../images/pic03.jpg); background-repeat: no-repeat; background-size: cover; background-position: top center; } body.is-loading:after { opacity: 1; } .login_main{ position: absolute; top: 50%; left: 50%; margin-top: -11em; margin-left: -12em; max-width: 100%; width: 24em; padding: 3em 3em 2em 3em; background: #ffffff; border-radius: 4px; cursor: default; opacity: 0.95; text-align: center; -moz-transform-origin: 50% 50%; -webkit-transform-origin: 50% 50%; -ms-transform-origin: 50% 50%; transform-origin: 50% 50%; -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -ms-transform: rotateX(0deg); transform: rotateX(0deg); -moz-transition: opacity 1s ease, -moz-transform 1s ease; -webkit-transition: opacity 1s ease, -webkit-transform 1s ease; -ms-transition: opacity 1s ease, -ms-transform 1s ease; transition: opacity 1s ease, transform 1s ease; } .login_main .button{ width: 100%; } @media screen and (max-width: 480px) { .login_main { min-width: 0; width: 100%; padding: 2.5em 2.5em 1.5em 2.5em ; } } body.is-loading .login_main { opacity: 0; -moz-transform: rotateX(15deg); -webkit-transform: rotateX(15deg); -ms-transform: rotateX(15deg); transform: rotateX(15deg); } .login_warpper { -moz-perspective: 1000px; -webkit-perspective: 1000px; -ms-perspective: 1000px; perspective: 1000px; position: relative; padding: 1.5em; z-index: 2; height: 100%; } .login_warpper > * { z-index: 1; } .login_warpper:before { content: ''; display: block; } @media screen and (max-width: 360px) { .login_warpper { padding: 1em; } } /*技术文档*/ .doc_slide .doc_title{ font-size: 0.8em; } .doc_title a{ padding: 0 0.8em; border-radius: 3px; line-height: 2.6em; color: #333333; } .doc_title.active a{ background-color: #4696e5; color: #FFFFFF; } .doc_title.active a:hover{ color: #FFFFFF !important; } .doc_slide{ margin-bottom: 0.5em; } .doc_slide a{ display: block; } .doc_slide ul{ margin-bottom: 0; padding-left: 1.5em; } .doc_slide ul li{ font-size: 0.8em; } .doc_slide ul li a{ color: #8D8D8D; } .doc_slide ul li.active a{ color: #4696e5; } h2.doc_text_title{ border-bottom: 1px solid #e0e0e0; padding-bottom: 0.8em; } /*api文档*/ .api_doc{ padding-top: 3em; padding-bottom: 3em; } .api_doc_bar{ height: 500px; left: 0; position: fixed; top: 0; padding-top: 6.25em; width: 230px; } .api_doc_bar dl{ padding: 0 0 1.5em 0; margin: 0; } .api_doc_bar dl dt { font-size: 0.9em; font-weight: normal; line-height: 1.5em; padding-bottom: 0.5em; width: 100%; } .api_doc_bar dd { font-size: 0.8em; line-height: 1.2em; padding: 5px 0 5px 1em; } .api_doc_bar dl a{ cursor: pointer; color: #333333; display: block; padding: 0 1.5em 0 1.5em; } .api_doc_bar dl dd a{ color: #999; } .api_doc_bar dl a.active{ color: #4696e5; } .api_doc_bar dl dt a{ border-left: 3px solid transparent; } .api_doc_bar dl dt a.active{ border-left: 3px solid #4696e5; } .api_doc_content{ padding-left: 250px; } ..api_doc_content img,.doc_text img{ max-width: 100%; } .result_box img{ width: 300px; border: 1px solid #e0e0e0; } .api_block{ margin-bottom: 4em; } .produce_block{ margin-top: 2em; } .fund_text h4{ margin-bottom: 0.5em; font-size: 1em; } .fund_text img{ max-width: 100%; } .fund_text .content p{ line-height: 1.5em; margin-bottom: 0.5em; } @media screen and (min-width: 1200px){ .api_doc_bar{ width: 230px; } } @media screen and (max-width: 1200px) and (min-width: 840px){ .api_doc_bar{ width: 170px; } } @media screen and (max-width: 840px) and (min-width: 736px){ .api_doc_bar{ width: 140px; } .api_doc_bar dl a{ padding: 0 1em 0 1em; } } @media screen and (max-width: 736px){ .api_doc_bar{ width: 100%; position: static; height: auto; padding-top: 1em; margin-bottom: 2em; background-color: #f2f2f2; } .api_doc_bar dl dt { border-bottom: 1px solid #E0E0E0; } .api_doc{ padding-top: 1em; padding-bottom: 1em; } } /*费用说明*/ .cost_box{ border: 1px solid #E0E0E0; padding: 3em 2em 3em 2em; position: relative; min-height: 15.5em; } .cost_box .price{ font-size: 0.8em; color: #333333; line-height: 1.5em; height: 3em; } .cost_box .price span{ font-size: 1.2em; color: #ff9600; } .cost_box p{ margin-bottom: 0; line-height: 2em; } .cost_tag{ position: absolute; top: -5px; right:-5px; display: block; width: 140px; height: 140px; background-image: url(../images/tag.png); background-repeat: no-repeat; background-size: cover; } .cost_tag.tag02{ background-image: url(../images/tag02.png); } @media screen and (max-width: 980px) and (min-width: 736px){ .cost_tag{ width: 110px; height: 110px; } } @media screen and (max-width: 480px){ .cost_tag{ width: 100px; height: 100px; } } /*关于我们*/ .about_banner{ width: 100%; overflow: hidden; position: relative; height: 399px; } .about_img{ position: absolute; top: 0; left: 50%; margin-left: -960px; width: 1920px; height: 399px; } .about_img img{ display: block; max-width: 100%; } .block_text{ padding-top: 6em; padding-bottom: 6em; border-bottom: 1px solid #E0E0E0; } .block_text:last-child{ border-bottom: 0; } .about_info{ text-align: center; width: 800px; margin: 0 auto; } .about_info img{ margin-bottom: 20px; } .about_info p{ font-size: 18px; line-height: 40px; } @media screen and (max-width: 1600px){ .about_banner{ height: 333px; } .about_img{ width: 1600px; height: 333px; margin-left: -800px; } } @media screen and (max-width: 1280px){ .about_banner{ height: 266px; } .about_img{ width: 1280px; height: 266px; margin-left: -640px; } } @media screen and (max-width: 980px){ .about_banner{ height: 204px; } .about_img{ width: 980px; height: 204px; margin-left: -490px; } .block_text{ padding-top: 4em; padding-bottom: 4em; } .about_info{ width: 100%; } .about_info p{ font-size: 16px; } .about_info p{ font-size: 14px; line-height: 30px; } } @media screen and (max-width: 980px){ .block_text{ padding-top: 3em; padding-bottom: 3em; } } .history{ position: relative; width: 960px; margin: 0 auto; } .history_main{ background: url(../images/line_bg.png) repeat-y 200px top; } .history_main p{ text-indent: 0; margin-bottom:0; } .history_title{ font-size: 32px; text-align: center; margin-bottom: 1.5em; } .year_div { position: relative; z-index: 100; } .year_div h2 { height: 80px; width: 80px; font-size: 18px; border-radius: 100%; background-color: #FFFFFF; border: 4px solid #8cbc21; text-align: center; padding: 16px 0; line-height: 40px; display: block; margin-left: 162px; } .year_div h2 a { color: #8cbc21; } .year_div h2 i{ display:block; position:relative; height: 0; width: 0; left: 50%; bottom: 0; margin-left: -6px; border-width:6px; border-style:solid; border-color:#8cbc21 transparent transparent transparent; -webkit-transition:.5s; -moz-transition:.5s; -ms-transition:.5s; -o-transition:.5s; transition:.5s; -webkit-transform-origin:6px 3px; -moz-transform-origin:6px 3px; -ms-transform-origin:6px 3px; -o-transform-origin:6px 3px; transform-origin:6px 3px } .year_div .list{ margin:10px 0; position:relative; overflow:hidden; -webkit-transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s; -moz-transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s; -ms-transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s; -o-transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s; transition:height 1s cubic-bezier(0.025,0.025,0.000,1.115),opacity 1s } .year_div .list ul { top: 0; padding: 0; margin: 0; width: 100%; } .year_div .list ul li { color: #a1a4b8; width: 760px; position: relative; float: right; clear: both; padding: 30px 0 30px 40px; } .circle{ background: url(../images/circle.png) no-repeat; width: 30px; height: 30px; display: block; position: absolute; left: -13px; top: 30px; } .year_div .list ul li.highlight .circle{ background-position: 0 -30px; } .year_div .list ul li .date{ font-size:18px; margin-bottom: 0; position: absolute; top: 30px; text-align: right; left: -140px; width: 100px; height: 30px; line-height: 30px; } .year_div .list ul li .intro, .year_div .list ul li .company_info{ line-height: 24px; margin-bottom: 0; } .year_div .list ul li .intro { font-size: 18px; line-height: 30px; color: #8cbc21; } .year_div .list ul li .company_info p{ font-size: 14px; color: #777; } .year_div .list ul li.highlight .intro{ color: #ff9600; } .year_div .list ul li .round_div{ position: relative; } .year_div.close h2 i{ transform:rotate(-90deg); -webkit-transform:rotate(-90deg); -moz-transform:rotate(-90deg); -ms-transform:rotate(-90deg); -o-transform:rotate(-90deg) } .year_div.close .list{ opacity:0; height:0!important; } @media screen and (max-width: 960px){ .history{ width: 800px; } .year_div .list ul li { width: 600px; } .history_title{ font-size: 28px; margin-bottom: 1em; } } @media screen and (max-width: 800px){ .history{ width: 100%; padding-left: 15px; padding-right: 15px; } .history_main{ background-position: 30px 0; } .year_div h2{ margin: 0 0 0 -5px; width: 70px; height: 70px; font-size: 16px; line-height: 35px; padding: 12px 0; } .year_div .list ul li{ width: 100%; } .year_div .list ul li .date{ position: static; text-align: left; margin-bottom: 5px; padding-left: 30px; } .year_div .list ul li .round_div{ padding-left: 30px; } .circle{ left: 17px; } } .contact_block{ text-align: center; padding: 1.5em 0 1.5em; height: 320px; border: 1px solid #E0E0E0; } .contact_text p{ margin: 0; font-size: 14px; line-height: 28px; } .contact_text h3{ margin-bottom: 15px; font-size: 18px; } .button_box{ padding-top: 20px; color: #0767aa; } .weixin_box img{ width: 110px; } .cooperation{ text-align: center; } .cooperation li{ display: inline-block; padding: 10px; } .cooperation li a{ border: 1px solid #E0E0E0; display: block; padding: 2px 7px; } .cooperation li img{ display: block; width: 150px; height: 60px; } /*帮助中心*/ .help_top{ padding: 0; background: #509ec0; background: -moz-linear-gradient(left, #6cc9b7 0%, #509ec0 50%, #0767aa 100%); background: -webkit-gradient(linear, left, right, color-stop(0%, #6cc9b7), color-stop(50%, #509ec0), color-stop(100%, #0767aa)); background: -webkit-linear-gradient(left, #6cc9b7 0%, #509ec0 50%, #0767aa 100%); background: -o-linear-gradient(left, #6cc9b7 0%, #509ec0 50%, #0767aa 100%); background: -ms-linear-gradient(left,#6cc9b7 0%, #509ec0 50%, #0767aa 100%); background: linear-gradient(to right, #6cc9b7 0%, #509ec0 50%, #0767aa 100%); filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#6cc9b7', endColorstr='#0767aa', GradientType=0); } :root .gradient{filter:none;} .help_top img{ display: block; margin: 0 auto; max-width: 100%; } .nav_title{ font-size: 14px; padding: 20px 0; } .help_conternt{ padding-bottom: 50px; } .help_title{ font-size: 20px; color: #333333; border-bottom: 1px solid #E0E0E0; line-height: 40px; margin-bottom: 30px; } .help_slide{ border: 1px solid #E0E0E0; padding: 10px 15px 15px; } .help_slide_title{ padding-bottom: 10px; font-size: 16px; border-bottom: 1px solid #E0E0E0; color: #333; } .help_slide_list li{ line-height: 30px; height: 30px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .help_slide_list li a{ font-size: 14px; } .question_list li{ padding: 15px 0; border-bottom: 1px solid #E0E0E0; line-height: 25px; padding-left: 30px; background: url(../images/list_style.png) no-repeat left 20px; } .question_list li a{ display: block; font-size: 16px; } .question_list li span{ display: block; font-size: 14px; } .question_content p{ font-size: 14px; margin-bottom: 0; } .question_content img{ max-width: 100%; } .page_box{ padding: 20px 0; text-align: center; } .page_box a{ display: inline-block; padding: 5px 12px; background-color: #eaecf8; margin: 0 5px; color: #333; font-size: 14px; line-height: 22px; } .page_box a.disabled{ color: #888; cursor: default; } .page_box a.on{ background-color: #0767aa; color: #FFFFFF; } /* ===================footer ===================*/ .footer{ background: #222; color: #FFFFFF; padding: 2em 0 2em 0; } .footer_link h5,.footer_link a{ color: #FFFFFF; } .footer_link p{ font-size: 0.75em; line-height: 1.8em; margin-bottom: 0; } .footer_link img{ width: 70%; } /*===================不同尺寸=====================*/ /* XLarge */ @media screen and (max-width: 1800px) { /* Basic */ body, input, select, textarea { font-size: 14pt; } } /* Large */ @media screen and (max-width: 1280px) { /* Basic */ body, input, select, textarea { font-size: 12pt; } /* Section/Article */ header.major { margin: 0.75em 0 2.5em 0; } header.major h2 { padding: 0 1em 0 1em; } header.white h2 { margin-bottom: 2em; } /* Header */ #header h1 img{ height: 52px; } #header nav > ul > li a{ font-size: 1em; } } /* Medium */ @media screen and (max-width: 980px) { /* Basic */ body, input, select, textarea { font-size: 12pt; } html, body { overflow-x: hidden; } h1 br, h2 br, h3 br, h4 br, h5 br, h6 br { display: none; } /* List */ ul.icons li .icon { font-size: 1.25em; } /* Header */ #header nav > ul > li a{ font-size: 0.9em; } #header nav#nav{ left: 10em; } /* banner */ .banner .banner_text { margin: 3em 0 0 0; } .banner .banner_text h2{ font-size: 2em; } .banner .banner_text h2 img{ height: 50px; } .banner .banner_text p{ font-size: 1.2em; } } @media screen and (max-width: 980px) and (orientation: portrait) { /* banner */ .banner { padding: 6.5em 2em 2em 2em ; -moz-flex-direction: column-reverse; -webkit-flex-direction: column-reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; } .banner .container{ width: 100% !important; } .cd-fixed-bg.banner{ padding: 6.5em 2em 2em 2em ; } .banner .banner_text { display: block; width: 100%; text-align: center; margin: 0 0 2em 0; float: none; } .banner .banner_img{ width: 100%; float: none; } .banner .image { overflow: hidden; } } /* mediumer */ #navPanel, #navButton { display: none; } @media screen and (max-width: 840px) { /* Basic */ body, input, select, textarea { font-size: 12pt; } /* Header */ #header nav{ display: none; } /* Off-Canvas Navigation */ #page-wrapper { -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -moz-transition: -moz-transform 0.5s ease; -webkit-transition: -webkit-transform 0.5s ease; -ms-transition: -ms-transform 0.5s ease; transition: transform 0.5s ease; padding-bottom: 1px; } #navButton { -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -moz-transition: -moz-transform 0.5s ease; -webkit-transition: -webkit-transform 0.5s ease; -ms-transition: -ms-transform 0.5s ease; transition: transform 0.5s ease; display: block; height: 3.25em; right: 0; position: fixed; top: 0; width: 4em; z-index: 10001; } #navButton .toggle { text-decoration: none; height: 100%; left: 0; position: absolute; top: 0; width: 100%; border: 0; outline: 0; } #navButton .toggle:before { -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; font-family: FontAwesome; font-style: normal; font-weight: normal; text-transform: none !important; } #navButton .toggle:before { border-radius: 6px; color: #333; content: '\f0c9'; display: block; font-size: 1.5em; height: 1.5em; right: 0.5em; line-height: 1.5em; position: absolute; text-align: center; top: 0.35em; width: 2em; } #navPanel { -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -ms-backface-visibility: hidden; backface-visibility: hidden; -moz-transform: translateX(-275px); -webkit-transform: translateX(-275px); -ms-transform: translateX(-275px); transform: translateX(-275px); -moz-transition: -moz-transform 0.5s ease; -webkit-transition: -webkit-transform 0.5s ease; -ms-transition: -ms-transform 0.5s ease; transition: transform 0.5s ease; display: block; height: 100%; left: 0; overflow-y: auto; position: fixed; top: 0; width: 275px; z-index: 10002; background: #2b2b2b; color: #bbb; } #navPanel .link { border-bottom: 0; border-top: solid 1px rgba(255, 255, 255, 0.05); color: #bbb; display: block; height: 44px; line-height: 44px; padding: 0 1em 0 1em; text-decoration: none; } #navPanel .link:first-child { border-top: 0; } #navPanel .link.depth-0 { color: #fff; } #navPanel .link .indent-1 { display: inline-block; width: 1em; } #navPanel .link .indent-2 { display: inline-block; width: 2em; } #navPanel .link .indent-3 { display: inline-block; width: 3em; } #navPanel .link .indent-4 { display: inline-block; width: 4em; } #navPanel .link .indent-5 { display: inline-block; width: 5em; } body.navPanel-visible #page-wrapper { -moz-transform: translateX(275px); -webkit-transform: translateX(275px); -ms-transform: translateX(275px); transform: translateX(275px); } body.navPanel-visible #navButton { -moz-transform: translateX(275px); -webkit-transform: translateX(275px); -ms-transform: translateX(275px); transform: translateX(275px); } body.navPanel-visible #navPanel { -moz-transform: translateX(0); -webkit-transform: translateX(0); -ms-transform: translateX(0); transform: translateX(0); } } /* Small */ @media screen and (max-width: 736px) { /* Basic */ body, input, select, textarea { font-size: 12pt; } h1 { font-size: 1.8em; } h2 { font-size: 1.4em; } h3 { font-size: 1.15em; } h4 { font-size: 1em; } h5 { font-size: 0.8em; } h6 { font-size: 0.7em; } /* Section/Article */ section, article { margin: 0 0 1.5em 0 !important; } /* Box */ .box_item .button{ width: 100%; height: 3.5em; line-height: 3.5em; } /* List */ ul.labeled-icons li { padding-left: 2em; } ul.labeled-icons li h3 { line-height: 1.75em; } /* Poptrox */ .poptrox-popup { border-radius: 0; } .poptrox-popup .nav-next:before, .poptrox-popup .nav-previous:before { margin-top: -1em; } /* banner */ .banner .banner_text h2{ font-size: 1.5em; } .banner .banner_text h2 img{ height: 40px; } .banner .banner_text p{ font-size: 1em; } } /* XSmall */ @media screen and (max-width: 480px) { /* Basic */ html, body { min-width: 320px; } body, input, select, textarea { font-size: 11pt; } /* List */ ul.actions { margin: 0 0 2em 0; } ul.actions li { display: block; padding: 1em 0 0 0; text-align: center; width: 100%; } ul.actions li:first-child { padding-top: 0; } ul.actions li > * { margin: 0 !important; width: 100%; } ul.actions li > *.icon:before { margin-left: -2em; } ul.actions.small li { padding: 0.5em 0 0 0; } ul.actions.small li:first-child { padding-top: 0; } /* Header */ #header h1{ left: 0.6em; } #header h1 img{ height: 47px; } /* banner */ .banner .banner_text p{ margin-bottom: 0; } }