/*!
Pure v1.0.1
Copyright 2013 Yahoo!
Licensed under the BSD License.
https://github.com/pure-css/pure/blob/master/LICENSE.md
*/
/*!
normalize.css v^3.0 | MIT License | git.io/normalize
Copyright (c) Nicolas Gallagher and Jonathan Neal
*/
/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS and IE text size adjust after device orientation change,
 *    without disabling user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

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

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability of focused elements when they are also in an
 * active/hover state.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  box-sizing: content-box; /* 2 */
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}

/*csslint important:false*/

/* ==========================================================================
   Pure Base Extras
   ========================================================================== */

/**
 * Extra rules that Pure adds on top of Normalize.css
 */

/**
 * Always hide an element when it has the `hidden` HTML attribute.
 */

.hidden,
[hidden] {
    display: none !important;
}

/**
 * Add this class to an image to make it fit within it's fluid parent wrapper while maintaining
 * aspect ratio.
 */
.pure-img {
    max-width: 100%;
    height: auto;
    display: block;
}

/*!
Pure v1.0.1
Copyright 2013 Yahoo!
Licensed under the BSD License.
https://github.com/pure-css/pure/blob/master/LICENSE.md
*/
/*csslint regex-selectors:false, known-properties:false, duplicate-properties:false*/

.pure-g {
    letter-spacing: -0.31em; /* Webkit: collapse white-space between units */
    *letter-spacing: normal; /* reset IE < 8 */
    *word-spacing: -0.43em; /* IE < 8: collapse white-space between units */
    text-rendering: optimizespeed; /* Webkit: fixes text-rendering: optimizeLegibility */

    /*
    Sets the font stack to fonts known to work properly with the above letter
    and word spacings. See: https://github.com/pure-css/pure/issues/41/

    The following font stack makes Pure Grids work on all known environments.

    * FreeSans: Ships with many Linux distros, including Ubuntu

    * Arimo: Ships with Chrome OS. Arimo has to be defined before Helvetica and
      Arial to get picked up by the browser, even though neither is available
      in Chrome OS.

    * Droid Sans: Ships with all versions of Android.

    * Helvetica, Arial, sans-serif: Common font stack on OS X and Windows.
    */
    font-family: FreeSans, Arimo, "Droid Sans", Helvetica, Arial, sans-serif;

    /* Use flexbox when possible to avoid `letter-spacing` side-effects. */
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
            flex-flow: row wrap;

    /* Prevents distributing space between rows */
    align-content: flex-start;
}

/* IE10 display: -ms-flexbox (and display: flex in IE 11) does not work inside a table; fall back to block and rely on font hack */
@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
	table .pure-g {
		display: block;
	}
}

/* Opera as of 12 on Windows needs word-spacing.
   The ".opera-only" selector is used to prevent actual prefocus styling
   and is not required in markup.
*/
.opera-only :-o-prefocus,
.pure-g {
    word-spacing: -0.43em;
}

.pure-u {
    display: inline-block;
    *display: inline; /* IE < 8: fake inline-block */
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}

/*
Resets the font family back to the OS/browser's default sans-serif font,
this the same font stack that Normalize.css sets for the `body`.
*/
.pure-g [class *= "pure-u"] {
    font-family: sans-serif;
}

.pure-u-1,
.pure-u-1-1,
.pure-u-1-2,
.pure-u-1-3,
.pure-u-2-3,
.pure-u-1-4,
.pure-u-3-4,
.pure-u-1-5,
.pure-u-2-5,
.pure-u-3-5,
.pure-u-4-5,
.pure-u-5-5,
.pure-u-1-6,
.pure-u-5-6,
.pure-u-1-8,
.pure-u-3-8,
.pure-u-5-8,
.pure-u-7-8,
.pure-u-1-12,
.pure-u-5-12,
.pure-u-7-12,
.pure-u-11-12,
.pure-u-1-24,
.pure-u-2-24,
.pure-u-3-24,
.pure-u-4-24,
.pure-u-5-24,
.pure-u-6-24,
.pure-u-7-24,
.pure-u-8-24,
.pure-u-9-24,
.pure-u-10-24,
.pure-u-11-24,
.pure-u-12-24,
.pure-u-13-24,
.pure-u-14-24,
.pure-u-15-24,
.pure-u-16-24,
.pure-u-17-24,
.pure-u-18-24,
.pure-u-19-24,
.pure-u-20-24,
.pure-u-21-24,
.pure-u-22-24,
.pure-u-23-24,
.pure-u-24-24 {
    display: inline-block;
    *display: inline;
    zoom: 1;
    letter-spacing: normal;
    word-spacing: normal;
    vertical-align: top;
    text-rendering: auto;
}

.pure-u-1-24 {
    width: 4.1667%;
    *width: 4.1357%;
}

.pure-u-1-12,
.pure-u-2-24 {
    width: 8.3333%;
    *width: 8.3023%;
}

.pure-u-1-8,
.pure-u-3-24 {
    width: 12.5000%;
    *width: 12.4690%;
}

.pure-u-1-6,
.pure-u-4-24 {
    width: 16.6667%;
    *width: 16.6357%;
}

.pure-u-1-5 {
    width: 20%;
    *width: 19.9690%;
}

.pure-u-5-24 {
    width: 20.8333%;
    *width: 20.8023%;
}

.pure-u-1-4,
.pure-u-6-24 {
    width: 25%;
    *width: 24.9690%;
}

.pure-u-7-24 {
    width: 29.1667%;
    *width: 29.1357%;
}

.pure-u-1-3,
.pure-u-8-24 {
    width: 33.3333%;
    *width: 33.3023%;
}

.pure-u-3-8,
.pure-u-9-24 {
    width: 37.5000%;
    *width: 37.4690%;
}

.pure-u-2-5 {
    width: 40%;
    *width: 39.9690%;
}

.pure-u-5-12,
.pure-u-10-24 {
    width: 41.6667%;
    *width: 41.6357%;
}

.pure-u-11-24 {
    width: 45.8333%;
    *width: 45.8023%;
}

.pure-u-1-2,
.pure-u-12-24 {
    width: 50%;
    *width: 49.9690%;
}

.pure-u-13-24 {
    width: 54.1667%;
    *width: 54.1357%;
}

.pure-u-7-12,
.pure-u-14-24 {
    width: 58.3333%;
    *width: 58.3023%;
}

.pure-u-3-5 {
    width: 60%;
    *width: 59.9690%;
}

.pure-u-5-8,
.pure-u-15-24 {
    width: 62.5000%;
    *width: 62.4690%;
}

.pure-u-2-3,
.pure-u-16-24 {
    width: 66.6667%;
    *width: 66.6357%;
}

.pure-u-17-24 {
    width: 70.8333%;
    *width: 70.8023%;
}

.pure-u-3-4,
.pure-u-18-24 {
    width: 75%;
    *width: 74.9690%;
}

.pure-u-19-24 {
    width: 79.1667%;
    *width: 79.1357%;
}

.pure-u-4-5 {
    width: 80%;
    *width: 79.9690%;
}

.pure-u-5-6,
.pure-u-20-24 {
    width: 83.3333%;
    *width: 83.3023%;
}

.pure-u-7-8,
.pure-u-21-24 {
    width: 87.5000%;
    *width: 87.4690%;
}

.pure-u-11-12,
.pure-u-22-24 {
    width: 91.6667%;
    *width: 91.6357%;
}

.pure-u-23-24 {
    width: 95.8333%;
    *width: 95.8023%;
}

.pure-u-1,
.pure-u-1-1,
.pure-u-5-5,
.pure-u-24-24 {
    width: 100%;
}
/* custom grids */
@media screen and (min-width: 568px) {
    .pure-u-sm-1,
    .pure-u-sm-1-1,
    .pure-u-sm-1-2,
    .pure-u-sm-1-3,
    .pure-u-sm-2-3,
    .pure-u-sm-1-4,
    .pure-u-sm-3-4,
    .pure-u-sm-1-5,
    .pure-u-sm-2-5,
    .pure-u-sm-3-5,
    .pure-u-sm-4-5,
    .pure-u-sm-5-5,
    .pure-u-sm-1-6,
    .pure-u-sm-5-6,
    .pure-u-sm-1-8,
    .pure-u-sm-3-8,
    .pure-u-sm-5-8,
    .pure-u-sm-7-8,
    .pure-u-sm-1-12,
    .pure-u-sm-5-12,
    .pure-u-sm-7-12,
    .pure-u-sm-11-12,
    .pure-u-sm-1-24,
    .pure-u-sm-2-24,
    .pure-u-sm-3-24,
    .pure-u-sm-4-24,
    .pure-u-sm-5-24,
    .pure-u-sm-6-24,
    .pure-u-sm-7-24,
    .pure-u-sm-8-24,
    .pure-u-sm-9-24,
    .pure-u-sm-10-24,
    .pure-u-sm-11-24,
    .pure-u-sm-12-24,
    .pure-u-sm-13-24,
    .pure-u-sm-14-24,
    .pure-u-sm-15-24,
    .pure-u-sm-16-24,
    .pure-u-sm-17-24,
    .pure-u-sm-18-24,
    .pure-u-sm-19-24,
    .pure-u-sm-20-24,
    .pure-u-sm-21-24,
    .pure-u-sm-22-24,
    .pure-u-sm-23-24,
    .pure-u-sm-24-24 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .pure-u-sm-1-24 {
        width: 4.1667%;
        *width: 4.1357%;
    }

    .pure-u-sm-1-12,
    .pure-u-sm-2-24 {
        width: 8.3333%;
        *width: 8.3023%;
    }

    .pure-u-sm-1-8,
    .pure-u-sm-3-24 {
        width: 12.5000%;
        *width: 12.4690%;
    }

    .pure-u-sm-1-6,
    .pure-u-sm-4-24 {
        width: 16.6667%;
        *width: 16.6357%;
    }

    .pure-u-sm-1-5 {
        width: 20%;
        *width: 19.9690%;
    }

    .pure-u-sm-5-24 {
        width: 20.8333%;
        *width: 20.8023%;
    }

    .pure-u-sm-1-4,
    .pure-u-sm-6-24 {
        width: 25%;
        *width: 24.9690%;
    }

    .pure-u-sm-7-24 {
        width: 29.1667%;
        *width: 29.1357%;
    }

    .pure-u-sm-1-3,
    .pure-u-sm-8-24 {
        width: 33.3333%;
        *width: 33.3023%;
    }

    .pure-u-sm-3-8,
    .pure-u-sm-9-24 {
        width: 37.5000%;
        *width: 37.4690%;
    }

    .pure-u-sm-2-5 {
        width: 40%;
        *width: 39.9690%;
    }

    .pure-u-sm-5-12,
    .pure-u-sm-10-24 {
        width: 41.6667%;
        *width: 41.6357%;
    }

    .pure-u-sm-11-24 {
        width: 45.8333%;
        *width: 45.8023%;
    }

    .pure-u-sm-1-2,
    .pure-u-sm-12-24 {
        width: 50%;
        *width: 49.9690%;
    }

    .pure-u-sm-13-24 {
        width: 54.1667%;
        *width: 54.1357%;
    }

    .pure-u-sm-7-12,
    .pure-u-sm-14-24 {
        width: 58.3333%;
        *width: 58.3023%;
    }

    .pure-u-sm-3-5 {
        width: 60%;
        *width: 59.9690%;
    }

    .pure-u-sm-5-8,
    .pure-u-sm-15-24 {
        width: 62.5000%;
        *width: 62.4690%;
    }

    .pure-u-sm-2-3,
    .pure-u-sm-16-24 {
        width: 66.6667%;
        *width: 66.6357%;
    }

    .pure-u-sm-17-24 {
        width: 70.8333%;
        *width: 70.8023%;
    }

    .pure-u-sm-3-4,
    .pure-u-sm-18-24 {
        width: 75%;
        *width: 74.9690%;
    }

    .pure-u-sm-19-24 {
        width: 79.1667%;
        *width: 79.1357%;
    }

    .pure-u-sm-4-5 {
        width: 80%;
        *width: 79.9690%;
    }

    .pure-u-sm-5-6,
    .pure-u-sm-20-24 {
        width: 83.3333%;
        *width: 83.3023%;
    }

    .pure-u-sm-7-8,
    .pure-u-sm-21-24 {
        width: 87.5000%;
        *width: 87.4690%;
    }

    .pure-u-sm-11-12,
    .pure-u-sm-22-24 {
        width: 91.6667%;
        *width: 91.6357%;
    }

    .pure-u-sm-23-24 {
        width: 95.8333%;
        *width: 95.8023%;
    }

    .pure-u-sm-1,
    .pure-u-sm-1-1,
    .pure-u-sm-5-5,
    .pure-u-sm-24-24 {
        width: 100%;
    }
}

@media screen and (min-width: 1024px) {
    .pure-u-md-1,
    .pure-u-md-1-1,
    .pure-u-md-1-2,
    .pure-u-md-1-3,
    .pure-u-md-2-3,
    .pure-u-md-1-4,
    .pure-u-md-3-4,
    .pure-u-md-1-5,
    .pure-u-md-2-5,
    .pure-u-md-3-5,
    .pure-u-md-4-5,
    .pure-u-md-5-5,
    .pure-u-md-1-6,
    .pure-u-md-5-6,
    .pure-u-md-1-8,
    .pure-u-md-3-8,
    .pure-u-md-5-8,
    .pure-u-md-7-8,
    .pure-u-md-1-12,
    .pure-u-md-5-12,
    .pure-u-md-7-12,
    .pure-u-md-11-12,
    .pure-u-md-1-24,
    .pure-u-md-2-24,
    .pure-u-md-3-24,
    .pure-u-md-4-24,
    .pure-u-md-5-24,
    .pure-u-md-6-24,
    .pure-u-md-7-24,
    .pure-u-md-8-24,
    .pure-u-md-9-24,
    .pure-u-md-10-24,
    .pure-u-md-11-24,
    .pure-u-md-12-24,
    .pure-u-md-13-24,
    .pure-u-md-14-24,
    .pure-u-md-15-24,
    .pure-u-md-16-24,
    .pure-u-md-17-24,
    .pure-u-md-18-24,
    .pure-u-md-19-24,
    .pure-u-md-20-24,
    .pure-u-md-21-24,
    .pure-u-md-22-24,
    .pure-u-md-23-24,
    .pure-u-md-24-24 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .pure-u-md-1-24 {
        width: 4.1667%;
        *width: 4.1357%;
    }

    .pure-u-md-1-12,
    .pure-u-md-2-24 {
        width: 8.3333%;
        *width: 8.3023%;
    }

    .pure-u-md-1-8,
    .pure-u-md-3-24 {
        width: 12.5000%;
        *width: 12.4690%;
    }

    .pure-u-md-1-6,
    .pure-u-md-4-24 {
        width: 16.6667%;
        *width: 16.6357%;
    }

    .pure-u-md-1-5 {
        width: 20%;
        *width: 19.9690%;
    }

    .pure-u-md-5-24 {
        width: 20.8333%;
        *width: 20.8023%;
    }

    .pure-u-md-1-4,
    .pure-u-md-6-24 {
        width: 25%;
        *width: 24.9690%;
    }

    .pure-u-md-7-24 {
        width: 29.1667%;
        *width: 29.1357%;
    }

    .pure-u-md-1-3,
    .pure-u-md-8-24 {
        width: 33.3333%;
        *width: 33.3023%;
    }

    .pure-u-md-3-8,
    .pure-u-md-9-24 {
        width: 37.5000%;
        *width: 37.4690%;
    }

    .pure-u-md-2-5 {
        width: 40%;
        *width: 39.9690%;
    }

    .pure-u-md-5-12,
    .pure-u-md-10-24 {
        width: 41.6667%;
        *width: 41.6357%;
    }

    .pure-u-md-11-24 {
        width: 45.8333%;
        *width: 45.8023%;
    }

    .pure-u-md-1-2,
    .pure-u-md-12-24 {
        width: 50%;
        *width: 49.9690%;
    }

    .pure-u-md-13-24 {
        width: 54.1667%;
        *width: 54.1357%;
    }

    .pure-u-md-7-12,
    .pure-u-md-14-24 {
        width: 58.3333%;
        *width: 58.3023%;
    }

    .pure-u-md-3-5 {
        width: 60%;
        *width: 59.9690%;
    }

    .pure-u-md-5-8,
    .pure-u-md-15-24 {
        width: 62.5000%;
        *width: 62.4690%;
    }

    .pure-u-md-2-3,
    .pure-u-md-16-24 {
        width: 66.6667%;
        *width: 66.6357%;
    }

    .pure-u-md-17-24 {
        width: 70.8333%;
        *width: 70.8023%;
    }

    .pure-u-md-3-4,
    .pure-u-md-18-24 {
        width: 75%;
        *width: 74.9690%;
    }

    .pure-u-md-19-24 {
        width: 79.1667%;
        *width: 79.1357%;
    }

    .pure-u-md-4-5 {
        width: 80%;
        *width: 79.9690%;
    }

    .pure-u-md-5-6,
    .pure-u-md-20-24 {
        width: 83.3333%;
        *width: 83.3023%;
    }

    .pure-u-md-7-8,
    .pure-u-md-21-24 {
        width: 87.5000%;
        *width: 87.4690%;
    }

    .pure-u-md-11-12,
    .pure-u-md-22-24 {
        width: 91.6667%;
        *width: 91.6357%;
    }

    .pure-u-md-23-24 {
        width: 95.8333%;
        *width: 95.8023%;
    }

    .pure-u-md-1,
    .pure-u-md-1-1,
    .pure-u-md-5-5,
    .pure-u-md-24-24 {
        width: 100%;
    }
}

@media screen and (min-width: 1920px) {
    .pure-u-lg-1,
    .pure-u-lg-1-1,
    .pure-u-lg-1-2,
    .pure-u-lg-1-3,
    .pure-u-lg-2-3,
    .pure-u-lg-1-4,
    .pure-u-lg-3-4,
    .pure-u-lg-1-5,
    .pure-u-lg-2-5,
    .pure-u-lg-3-5,
    .pure-u-lg-4-5,
    .pure-u-lg-5-5,
    .pure-u-lg-1-6,
    .pure-u-lg-5-6,
    .pure-u-lg-1-8,
    .pure-u-lg-3-8,
    .pure-u-lg-5-8,
    .pure-u-lg-7-8,
    .pure-u-lg-1-12,
    .pure-u-lg-5-12,
    .pure-u-lg-7-12,
    .pure-u-lg-11-12,
    .pure-u-lg-1-24,
    .pure-u-lg-2-24,
    .pure-u-lg-3-24,
    .pure-u-lg-4-24,
    .pure-u-lg-5-24,
    .pure-u-lg-6-24,
    .pure-u-lg-7-24,
    .pure-u-lg-8-24,
    .pure-u-lg-9-24,
    .pure-u-lg-10-24,
    .pure-u-lg-11-24,
    .pure-u-lg-12-24,
    .pure-u-lg-13-24,
    .pure-u-lg-14-24,
    .pure-u-lg-15-24,
    .pure-u-lg-16-24,
    .pure-u-lg-17-24,
    .pure-u-lg-18-24,
    .pure-u-lg-19-24,
    .pure-u-lg-20-24,
    .pure-u-lg-21-24,
    .pure-u-lg-22-24,
    .pure-u-lg-23-24,
    .pure-u-lg-24-24 {
        display: inline-block;
        *display: inline;
        zoom: 1;
        letter-spacing: normal;
        word-spacing: normal;
        vertical-align: top;
        text-rendering: auto;
    }

    .pure-u-lg-1-24 {
        width: 4.1667%;
        *width: 4.1357%;
    }

    .pure-u-lg-1-12,
    .pure-u-lg-2-24 {
        width: 8.3333%;
        *width: 8.3023%;
    }

    .pure-u-lg-1-8,
    .pure-u-lg-3-24 {
        width: 12.5000%;
        *width: 12.4690%;
    }

    .pure-u-lg-1-6,
    .pure-u-lg-4-24 {
        width: 16.6667%;
        *width: 16.6357%;
    }

    .pure-u-lg-1-5 {
        width: 20%;
        *width: 19.9690%;
    }

    .pure-u-lg-5-24 {
        width: 20.8333%;
        *width: 20.8023%;
    }

    .pure-u-lg-1-4,
    .pure-u-lg-6-24 {
        width: 25%;
        *width: 24.9690%;
    }

    .pure-u-lg-7-24 {
        width: 29.1667%;
        *width: 29.1357%;
    }

    .pure-u-lg-1-3,
    .pure-u-lg-8-24 {
        width: 33.3333%;
        *width: 33.3023%;
    }

    .pure-u-lg-3-8,
    .pure-u-lg-9-24 {
        width: 37.5000%;
        *width: 37.4690%;
    }

    .pure-u-lg-2-5 {
        width: 40%;
        *width: 39.9690%;
    }

    .pure-u-lg-5-12,
    .pure-u-lg-10-24 {
        width: 41.6667%;
        *width: 41.6357%;
    }

    .pure-u-lg-11-24 {
        width: 45.8333%;
        *width: 45.8023%;
    }

    .pure-u-lg-1-2,
    .pure-u-lg-12-24 {
        width: 50%;
        *width: 49.9690%;
    }

    .pure-u-lg-13-24 {
        width: 54.1667%;
        *width: 54.1357%;
    }

    .pure-u-lg-7-12,
    .pure-u-lg-14-24 {
        width: 58.3333%;
        *width: 58.3023%;
    }

    .pure-u-lg-3-5 {
        width: 60%;
        *width: 59.9690%;
    }

    .pure-u-lg-5-8,
    .pure-u-lg-15-24 {
        width: 62.5000%;
        *width: 62.4690%;
    }

    .pure-u-lg-2-3,
    .pure-u-lg-16-24 {
        width: 66.6667%;
        *width: 66.6357%;
    }

    .pure-u-lg-17-24 {
        width: 70.8333%;
        *width: 70.8023%;
    }

    .pure-u-lg-3-4,
    .pure-u-lg-18-24 {
        width: 75%;
        *width: 74.9690%;
    }

    .pure-u-lg-19-24 {
        width: 79.1667%;
        *width: 79.1357%;
    }

    .pure-u-lg-4-5 {
        width: 80%;
        *width: 79.9690%;
    }

    .pure-u-lg-5-6,
    .pure-u-lg-20-24 {
        width: 83.3333%;
        *width: 83.3023%;
    }

    .pure-u-lg-7-8,
    .pure-u-lg-21-24 {
        width: 87.5000%;
        *width: 87.4690%;
    }

    .pure-u-lg-11-12,
    .pure-u-lg-22-24 {
        width: 91.6667%;
        *width: 91.6357%;
    }

    .pure-u-lg-23-24 {
        width: 95.8333%;
        *width: 95.8023%;
    }

    .pure-u-lg-1,
    .pure-u-lg-1-1,
    .pure-u-lg-5-5,
    .pure-u-lg-24-24 {
        width: 100%;
    }
}

.enter-fade {
  opacity: 0;
}
.fade-in {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards;
}
.fade-out {
  opacity: 1;
  -webkit-animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
          animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
}
.fade-up {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
}
@-webkit-keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@-webkit-keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@-webkit-keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@-webkit-keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@-webkit-keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
/* normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
html {
  line-height: 1.15 /* 1 */;
  -webkit-text-size-adjust: 100% /* 2 */;
}
body {
  margin: 0;
}
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}
hr {
  box-sizing: content-box /* 1 */;
  height: 0 /* 1 */;
  overflow: visible /* 2 */;
}
pre {
  font-family: monospace, monospace /* 1 */;
  font-size: 1em /* 2 */;
}
a {
  background-color: transparent;
}
abbr[title] {
  border-bottom: none /* 1 */;
  -webkit-text-decoration: underline /* 2 */;
          text-decoration: underline /* 2 */;
  -webkit-text-decoration: underline dotted /* 2 */;
          text-decoration: underline dotted /* 2 */;
}
b,
strong {
  font-weight: bolder;
}
code,
kbd,
samp {
  font-family: monospace, monospace /* 1 */;
  font-size: 1em /* 2 */;
}
small {
  font-size: 80%;
}
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}
sub {
  bottom: -0.25em;
}
sup {
  top: -0.5em;
}
img {
  border-style: none;
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit /* 1 */;
  font-size: 100% /* 1 */;
  line-height: 1.15 /* 1 */;
  margin: 0 /* 2 */;
}
button,
input {
  overflow: visible;
}
button,
select {
  text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}
button:-moz-focusring,
[type="button"]-moz-focusring,
[type="reset"]-moz-focusring,
[type="submit"]-moz-focusring {
  outline: 1px dotted ButtonText;
}
fieldset {
  padding: 0.35em 0.75em 0.625em;
}
legend {
  box-sizing: border-box /* 1 */;
  color: inherit /* 2 */;
  display: table /* 1 */;
  max-width: 100% /* 1 */;
  padding: 0 /* 3 */;
  white-space: normal /* 1 */;
}
progress {
  vertical-align: baseline;
}
textarea {
  overflow: auto;
}
[type="checkbox"],
[type="radio"] {
  box-sizing: border-box /* 1 */;
  padding: 0 /* 2 */;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}
[type="search"] {
  -webkit-appearance: textfield /* 1 */;
  outline-offset: -2px /* 2 */;
}
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}
::-webkit-file-upload-button {
  -webkit-appearance: button /* 1 */;
  font: inherit /* 2 */;
}
details {
  display: block;
}
summary {
  display: list-item;
}
template {
  display: none;
}
[hidden] {
  display: none;
}
@media screen and (max-width: 567px) {
  .pure-visible-md {
    display: none;
  }
  .pure-visible-lg {
    display: none;
  }
  .pure-visible-sm {
    display: none;
  }
  .pure-hidden-default {
    display: none;
  }
}
@media screen and (max-width: 1023px) {
  .pure-hidden-default-sm {
    display: none;
  }
}
@media screen and (min-width: 568px) {
  .pure-visible-md {
    display: none;
  }
  .pure-visible-lg {
    display: none;
  }
  .pure-visible-default {
    display: none;
  }
  .pure-hidden-sm {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  .pure-visible-sm {
    display: none;
  }
  .pure-visible-lg {
    display: none;
  }
  .pure-visible-default {
    display: none;
  }
  .pure-hidden-md {
    display: none;
  }
}
@media screen and (min-width: 1920px) {
  .pure-visible-sm {
    display: none;
  }
  .pure-visible-md {
    display: none;
  }
  .pure-visible-default {
    display: none;
  }
  .pure-hidden-lg {
    display: none;
  }
}
.g-title,
.g-title-lg,
.g-title-md,
.g-title-sm,
.g-parameter-name,
#home #ref-1 .title,
#home #ref-15 .title,
#home #breeno .sticky-container .sticky-item .card .name,
#home .section .content .title,
#home .section .content .title.lg,
#home .section .panel .title,
.g-play-button,
.g-parameter .item .name,
.g-stack .content .scroll-content .introduce-wrapper .introduce {
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 600;
  font-size: 34px;
  line-height: 50px;
  color: #333;
}
.g-title-md,
.g-parameter-name,
#home .section .content .title,
.g-parameter .item .name,
.g-stack .content .scroll-content .introduce-wrapper .introduce {
  font-size: 24px;
  line-height: 45px;
}
.g-title-sm,
#home #ref-15 .title {
  font-size: 22px;
  line-height: 40px;
  color: #333;
}
.g-text,
.g-parameter-value,
#home #banner-4 .image-wrapper .photo .photo-label-wrapper .photo-label,
#home #ref-1 .description,
#home #ref-3 .sticky-item .phones .phones-name > div,
#home #ref-5 .content .select > div .phone-name,
#home #ref-5 .content .select > div .options .option .name,
#home #ref-7 .extra .parameter .item .name,
#home #ref-7 .extra .parameter .item .value,
#home #ref-9 .content .parameter .item,
#home #ref-28 .link-module,
#home #ref-28 .link-module a,
#home #banner-5 .banner-title-groups .banner-title,
#home #ref-17 .sticky-item .phones .phone-name,
#home .progress-wrapper .name,
#home .section .content .label,
#home .section .content .description,
#home .section .panel .description,
.g-link-button,
.g-parameter .item .value {
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
  color: #666;
}
.g-parameter-name,
.g-parameter .item .name {
  font-size: 24px;
  line-height: 40px;
}
.g-parameter-value,
.g-parameter .item .value {
  font-size: 13px;
  line-height: 18px;
}
@media screen and (min-width: 568px) {
  .g-title-lg,
  #home .section .content .title.lg {
    font-size: 40px;
    line-height: 64px;
  }
  .g-title-md,
  .g-parameter-name,
  #home .section .content .title,
  .g-parameter .item .name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 36px;
    line-height: 60px;
  }
  .g-title-sm,
  #home #ref-15 .title {
    font-size: 24px;
    line-height: 45px;
  }
  .g-text,
  .g-parameter-value,
  #home #banner-4 .image-wrapper .photo .photo-label-wrapper .photo-label,
  #home #ref-1 .description,
  #home #ref-3 .sticky-item .phones .phones-name > div,
  #home #ref-5 .content .select > div .phone-name,
  #home #ref-5 .content .select > div .options .option .name,
  #home #ref-7 .extra .parameter .item .name,
  #home #ref-7 .extra .parameter .item .value,
  #home #ref-9 .content .parameter .item,
  #home #ref-28 .link-module,
  #home #ref-28 .link-module a,
  #home #banner-5 .banner-title-groups .banner-title,
  #home #ref-17 .sticky-item .phones .phone-name,
  #home .progress-wrapper .name,
  #home .section .content .label,
  #home .section .content .description,
  #home .section .panel .description,
  .g-link-button,
  .g-parameter .item .value {
    font-size: 16px;
    line-height: 27px;
  }
  .g-parameter-name,
  .g-parameter .item .name {
    font-size: 32px;
    font-weight: 400;
    line-height: 45px;
  }
  .g-parameter-value,
  .g-parameter .item .value {
    font-size: 16px;
    line-height: 22px;
  }
}
@media screen and (min-width: 1024px) {
  .g-title-lg,
  #home .section .content .title.lg {
    font-size: 40px;
    line-height: 66px;
  }
  .g-title-md,
  .g-parameter-name,
  #home .section .content .title,
  .g-parameter .item .name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 36px;
    line-height: 60px;
  }
  .g-title-sm,
  #home #ref-15 .title {
    font-size: 24px;
    line-height: 45px;
  }
  .g-text,
  .g-parameter-value,
  #home #banner-4 .image-wrapper .photo .photo-label-wrapper .photo-label,
  #home #ref-1 .description,
  #home #ref-3 .sticky-item .phones .phones-name > div,
  #home #ref-5 .content .select > div .phone-name,
  #home #ref-5 .content .select > div .options .option .name,
  #home #ref-7 .extra .parameter .item .name,
  #home #ref-7 .extra .parameter .item .value,
  #home #ref-9 .content .parameter .item,
  #home #ref-28 .link-module,
  #home #ref-28 .link-module a,
  #home #banner-5 .banner-title-groups .banner-title,
  #home #ref-17 .sticky-item .phones .phone-name,
  #home .progress-wrapper .name,
  #home .section .content .label,
  #home .section .content .description,
  #home .section .panel .description,
  .g-link-button,
  .g-parameter .item .value {
    font-size: 18px;
    line-height: 32px;
  }
  .g-parameter-name,
  .g-parameter .item .name {
    font-size: 32px;
    font-weight: 400;
    line-height: 56px;
  }
  .g-parameter-value,
  .g-parameter .item .value {
    font-size: 14px;
    line-height: 25px;
  }
}
@media screen and (min-width: 1920px) {
  .g-title-lg,
  #home .section .content .title.lg {
    font-size: 58px;
    line-height: 78px;
  }
  .g-title-md,
  .g-parameter-name,
  #home .section .content .title,
  .g-parameter .item .name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 54px;
    line-height: 74px;
  }
  .g-title-sm,
  #home #ref-15 .title {
    font-size: 22px;
    line-height: 40px;
  }
  .g-text,
  .g-parameter-value,
  #home #banner-4 .image-wrapper .photo .photo-label-wrapper .photo-label,
  #home #ref-1 .description,
  #home #ref-3 .sticky-item .phones .phones-name > div,
  #home #ref-5 .content .select > div .phone-name,
  #home #ref-5 .content .select > div .options .option .name,
  #home #ref-7 .extra .parameter .item .name,
  #home #ref-7 .extra .parameter .item .value,
  #home #ref-9 .content .parameter .item,
  #home #ref-28 .link-module,
  #home #ref-28 .link-module a,
  #home #banner-5 .banner-title-groups .banner-title,
  #home #ref-17 .sticky-item .phones .phone-name,
  #home .progress-wrapper .name,
  #home .section .content .label,
  #home .section .content .description,
  #home .section .panel .description,
  .g-link-button,
  .g-parameter .item .value {
    font-size: 18px;
    line-height: 32px;
  }
  .g-parameter-name,
  .g-parameter .item .name {
    font-size: 40px;
    line-height: 56px;
  }
  .g-parameter-value,
  .g-parameter .item .value {
    font-size: 18px;
    line-height: 25px;
  }
}
.enter-fade {
  opacity: 0;
}
.fade-in {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards;
}
.fade-out {
  opacity: 1;
  -webkit-animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
          animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
}
.fade-up {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
}
@-webkit-keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@-webkit-keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@-webkit-keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@-webkit-keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@-webkit-keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
#home .first-screen {
  background-position: center;
}
#home .first-screen .home-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  will-change: transform;
}
#home .first-screen .slogan {
  background-position: center;
  background-repeat: no-repeat;
  margin-top: 160px;
  margin-left: calc(50% - 343px);
  width: 687px;
  height: 78px;
  background-size: 687px 78px;
}
@media screen and (max-width: 1919px) {
  #home .first-screen .slogan {
    margin-left: calc(50% - 212px);
    width: 425px;
    height: 49px;
    background-size: 425px 49px;
  }
}
@media screen and (max-width: 567px) {
  #home .first-screen .slogan {
    width: 213px;
    height: 25px;
    background-size: 213px 25px;
    margin-left: calc(50% - 106px);
  }
}
#home .slogan-wrap {
  position: absolute;
  top: 38%;
  left: 14.1%;
  text-align: center;
  color: #fff;
  white-space: nowrap;
  line-height: 1.7;
}
@media screen and (max-width: 1919px) {
  #home .slogan-wrap {
    left: 15%;
  }
}
@media screen and (max-width: 1023px) {
  #home .slogan-wrap {
    top: 12%;
    left: 50%;
    -webkit-transform: translate(-50%);
            transform: translate(-50%);
  }
}
@media screen and (max-width: 567px) {
  #home .slogan-wrap {
    top: 20%;
  }
}
#home .slogan-wrap .slogan-title {
  font-size: 0.78rem;
}
@media screen and (max-width: 1080px) {
  #home .slogan-wrap .slogan-title {
    font-size: 28px;
  }
}
#home .slogan-wrap .slogan-text1 {
  font-size: 0.47rem;
  font-weight: 100;
}
@media screen and (max-width: 1080px) {
  #home .slogan-wrap .slogan-text1 {
    font-size: 15px;
  }
}
#home .slogan-wrap .slogan-desc {
  font-size: 0.28rem;
  font-weight: 100;
}
@media screen and (max-width: 1080px) {
  #home .slogan-wrap .slogan-desc {
    font-size: 9px;
  }
}
#home .slogan-wrap .slogan-text {
  font-size: 75px;
  font-weight: 600;
  margin-left: 0;
  margin-right: 0;
  width: auto;
  line-height: 20px;
}
@media screen and (max-width: 1919px) {
  #home .slogan-wrap .slogan-text {
    font-size: 50px;
  }
}
@media screen and (max-width: 1023px) {
  #home .slogan-wrap .slogan-text {
    font-size: 48px;
  }
}
@media screen and (max-width: 567px) {
  #home .slogan-wrap .slogan-text {
    font-size: 26px;
    letter-spacing: -0.4;
    line-height: 0;
  }
}
#home .slogan-wrap .slogan-text2 {
  font-size: 36px;
  letter-spacing: -1;
  color: #164853;
  margin-top: 34px;
  text-align: center;
}
@media screen and (max-width: 1919px) {
  #home .slogan-wrap .slogan-text2 {
    font-size: 24px;
  }
}
@media screen and (max-width: 567px) {
  #home .slogan-wrap .slogan-text2 {
    font-size: 12px;
    letter-spacing: -0.4;
    margin-top: 10px;
  }
}
#home .slogan-wrap .slogan-text3 {
  font-size: 65px;
  font-weight: 400;
  letter-spacing: -1;
  color: #fff;
  text-align: center;
  margin-top: 10px;
}
@media screen and (max-width: 1919px) {
  #home .slogan-wrap .slogan-text3 {
    font-size: 40px;
  }
}
@media screen and (max-width: 1023px) {
  #home .slogan-wrap .slogan-text3 {
    font-size: 36px;
  }
}
@media screen and (max-width: 567px) {
  #home .slogan-wrap .slogan-text3 {
    font-size: 18px;
    letter-spacing: -0.4;
  }
}
#home .remark {
  position: absolute;
  margin-left: 50px;
  top: 90%;
  font-size: 10px;
  line-height: 16px;
  color: #b4b3b4;
  margin-left: 10px;
}
#home .remark1 {
  position: absolute;
  top: calc(93% + 16px);
  margin-left: 50px;
  font-size: 10px;
  line-height: 16px;
  color: #b4b3b4;
  margin-left: 10px;
}
@media screen and (max-width: 567px) {
  #home .remark1 {
    top: calc(92% + 16px);
  }
}
#home .arrow-animation {
  z-index: 6;
  position: absolute;
  left: 0;
  right: 0;
  height: 48px;
  bottom: 20px;
}
#home .arrow-animation .arrow {
  width: 30px;
  height: 30px;
  margin: auto;
  -webkit-animation: arrow-down 2.5s ease 1.5s infinite normal forwards;
          animation: arrow-down 2.5s ease 1.5s infinite normal forwards;
  background-size: 30px;
}
#home .sector-animation {
  z-index: 1;
}
#home .sector-animation .circle {
  display: block;
  position: absolute;
}
#home .sector-animation .mask {
  position: absolute;
  background-color: #fff;
  -webkit-animation: sector-rotate 1.5s ease 1s 1 normal forwards, fade-reverse 0.1s linear 2.5s 1 normal forwards;
          animation: sector-rotate 1.5s ease 1s 1 normal forwards, fade-reverse 0.1s linear 2.5s 1 normal forwards;
}
#home .sector-animation .mask.reverse {
  -webkit-animation: sector-rotate-reverse 1.5s ease 0s 1 normal forwards;
          animation: sector-rotate-reverse 1.5s ease 0s 1 normal forwards;
}
#home .logo-animation {
  z-index: 2;
  position: absolute;
}
#home .logo-animation img {
  display: block;
  height: auto;
}
#home .title-animation {
  z-index: 2;
  position: absolute;
  color: #34afc9;
}
#home .title-animation .blank {
  width: 20px;
}
#home .title-animation div {
  font-weight: 600;
  font-size: 2.58vw;
  float: left;
  opacity: 0;
}
#home .title-animation div:nth-child(1) {
  -webkit-animation: fade 0.4s cubic-bezier(0.9, 0.01, 0.47, 0.79) 1.85s 1 normal forwards, shift-1 0.35s cubic-bezier(0.175, 0.885, 0.32, 1) 1.85s 1 normal forwards;
          animation: fade 0.4s cubic-bezier(0.9, 0.01, 0.47, 0.79) 1.85s 1 normal forwards, shift-1 0.35s cubic-bezier(0.175, 0.885, 0.32, 1) 1.85s 1 normal forwards;
}
#home .title-animation div:nth-child(2) {
  -webkit-animation: fade 0.4s cubic-bezier(0.9, 0.01, 0.47, 0.79) 1.9s 1 normal forwards, shift-2 0.4s cubic-bezier(0.175, 0.885, 0.32, 1) 1.9s 1 normal forwards;
          animation: fade 0.4s cubic-bezier(0.9, 0.01, 0.47, 0.79) 1.9s 1 normal forwards, shift-2 0.4s cubic-bezier(0.175, 0.885, 0.32, 1) 1.9s 1 normal forwards;
}
#home .title-animation div:nth-child(4) {
  -webkit-animation: fade 0.4s cubic-bezier(0.9, 0.01, 0.47, 0.79) 1.95s 1 normal forwards, shift-4 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 1.95s 1 normal forwards;
          animation: fade 0.4s cubic-bezier(0.9, 0.01, 0.47, 0.79) 1.95s 1 normal forwards, shift-4 0.5s cubic-bezier(0.175, 0.885, 0.32, 1) 1.95s 1 normal forwards;
}
#home .title-animation div:nth-child(5) {
  -webkit-animation: fade 0.4s cubic-bezier(0.9, 0.01, 0.47, 0.79) 2s 1 normal forwards, shift-5 0.55s cubic-bezier(0.175, 0.885, 0.32, 1) 2s 1 normal forwards;
          animation: fade 0.4s cubic-bezier(0.9, 0.01, 0.47, 0.79) 2s 1 normal forwards, shift-5 0.55s cubic-bezier(0.175, 0.885, 0.32, 1) 2s 1 normal forwards;
}
#home .title-animation div:nth-child(6) {
  -webkit-animation: fade 0.4s cubic-bezier(0.9, 0.01, 0.47, 0.79) 2.05s 1 normal forwards, shift-6 0.6s cubic-bezier(0.175, 0.885, 0.32, 1) 2.05s 1 normal forwards;
          animation: fade 0.4s cubic-bezier(0.9, 0.01, 0.47, 0.79) 2.05s 1 normal forwards, shift-6 0.6s cubic-bezier(0.175, 0.885, 0.32, 1) 2.05s 1 normal forwards;
}
#home .title-animation div:nth-child(7) {
  -webkit-animation: fade 0.4s cubic-bezier(0.9, 0.01, 0.47, 0.79) 2.1s 1 normal forwards, shift-7 0.65s cubic-bezier(0.175, 0.885, 0.32, 1) 2.1s 1 normal forwards;
          animation: fade 0.4s cubic-bezier(0.9, 0.01, 0.47, 0.79) 2.1s 1 normal forwards, shift-7 0.65s cubic-bezier(0.175, 0.885, 0.32, 1) 2.1s 1 normal forwards;
}
#home .title-animation:after {
  content: ' ';
  clear: both;
}
#home .mobile-animation {
  z-index: 3;
  position: absolute;
  left: 0px;
  right: 0px;
  opacity: 0;
}
#home .mobile-animation .phone {
  z-index: 3;
  display: block;
  position: relative;
  margin: auto;
  height: auto;
}
#home .mobile-animation .shadow {
  z-index: 1;
  display: block;
  position: absolute;
  height: auto;
}
#home .mobile-animation .camera-animation {
  z-index: 2;
  overflow: hidden;
  position: absolute;
  left: 0px;
  right: 0px;
}
#home .mobile-animation .camera-animation img {
  display: block;
  margin: auto;
  height: auto;
  -webkit-transform-origin: 0px 0px;
          transform-origin: 0px 0px;
  -webkit-animation: camera-rotate 0.6s ease 1.4s 1 normal forwards;
          animation: camera-rotate 0.6s ease 1.4s 1 normal forwards;
}
#home .mobile-animation .camera-animation img.reverse {
  -webkit-animation: camera-rotate-reverse 0.6s ease 0s 1 normal forwards;
          animation: camera-rotate-reverse 0.6s ease 0s 1 normal forwards;
}
@media screen and (min-width: 568px) {
  #home .first-screen {
    will-change: opacity;
  }
  #home .first-screen .remark {
    top: 97%;
  }
  #home .first-screen .remark1 {
    top: calc(97% - 16px);
  }
  #home .first-screen .sector-animation .circle {
    left: -83.8vw;
    top: -54.91vw;
    width: 147.78vw;
    height: 147.78vw;
  }
  #home .first-screen .sector-animation .mask {
    left: -9.909999999999997vw;
    top: -54.91vw;
    width: 74.89vw;
    height: 149.78vw;
    -webkit-transform-origin: 0px 73.89vw;
            transform-origin: 0px 73.89vw;
  }
  #home .first-screen .logo-animation {
    top: 50%;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
    left: 7.27vw;
  }
  #home .first-screen .logo-animation img {
    width: 11.52vw;
  }
  #home .first-screen .title-animation {
    top: 50%;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%);
    right: 7.27vw;
  }
  #home .first-screen .mobile-animation {
    -webkit-animation: up-short 1s ease 0s 1 normal forwards, fade 1s cubic-bezier(0.52, 0.01, 0.61, 0.99) 0s 1 normal forwards;
            animation: up-short 1s ease 0s 1 normal forwards, fade 1s cubic-bezier(0.52, 0.01, 0.61, 0.99) 0s 1 normal forwards;
    top: 31.05vw;
  }
  #home .first-screen .mobile-animation .phone {
    width: 43.59vw;
  }
  #home .first-screen .mobile-animation .shadow {
    top: -1.82vw;
    left: 23.475vw;
    width: 53.05vw;
  }
  #home .first-screen .mobile-animation .camera-animation {
    height: 5.95vw;
    top: -5.7vw;
  }
  #home .first-screen .mobile-animation .camera-animation img {
    margin-top: 5.75vw;
    width: 27.9vw;
  }
  #home .first-screen .mobile-animation.reverse {
    -webkit-animation: up-short 1s ease 0s 1 normal forwards, fade-reverse 1s ease-out 0s 1 normal forwards;
            animation: up-short 1s ease 0s 1 normal forwards, fade-reverse 1s ease-out 0s 1 normal forwards;
  }
}
@media screen and (max-width: 567px) {
  #home .first-screen .sector-animation .circle {
    left: -220.5vw;
    top: -72.5vw;
    width: 297.6vw;
    height: 297.6vw;
  }
  #home .first-screen .sector-animation .mask {
    left: -71.69999999999999vw;
    top: -72.5vw;
    width: 149.8vw;
    height: 299.6vw;
    -webkit-transform-origin: 0px 148.8vw;
            transform-origin: 0px 148.8vw;
  }
  #home .first-screen .logo-animation {
    top: 37.5vw;
    left: 0px;
    right: 0px;
  }
  #home .first-screen .logo-animation img {
    opacity: 0;
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
    margin: auto;
    -webkit-animation: fade 0.8s linear 2.2s 1 normal forwards, zoom-in 1s cubic-bezier(0, 0, 0, 1) 2.2s 1 normal forwards;
            animation: fade 0.8s linear 2.2s 1 normal forwards, zoom-in 1s cubic-bezier(0, 0, 0, 1) 2.2s 1 normal forwards;
    width: 134px;
  }
  #home .first-screen .title-animation {
    display: none;
  }
  #home .first-screen .mobile-animation {
    -webkit-animation: up-long 1s ease 0s 1 normal forwards, fade 1s cubic-bezier(0.52, 0.01, 0.61, 0.99) 0s 1 normal forwards;
            animation: up-long 1s ease 0s 1 normal forwards, fade 1s cubic-bezier(0.52, 0.01, 0.61, 0.99) 0s 1 normal forwards;
    top: 120.2vw;
  }
  #home .first-screen .mobile-animation .phone {
    width: 84.3vw;
  }
  #home .first-screen .mobile-animation .shadow {
    top: -3.52vw;
    left: -1.299999999999997vw;
    width: 102.6vw;
  }
  #home .first-screen .mobile-animation .camera-animation {
    height: 11.3vw;
    top: -10.700000000000001vw;
  }
  #home .first-screen .mobile-animation .camera-animation img {
    margin-top: 10.8vw;
    width: 54vw;
  }
  #home .first-screen .mobile-animation.reverse {
    -webkit-animation: up-long 0.8s ease 0s 1 normal forwards, fade-reverse 0.8s ease-out 0s 1 normal forwards;
            animation: up-long 0.8s ease 0s 1 normal forwards, fade-reverse 0.8s ease-out 0s 1 normal forwards;
  }
}
.g-normal#home .slogan,
.g-blue#home .slogan {
  margin-top: 40vh;
}
@-webkit-keyframes arrow-down {
  0 {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes arrow-down {
  0 {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  50% {
    -webkit-transform: translateY(20px);
            transform: translateY(20px);
  }
  100% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
#home .nav-container {
  z-index: 10;
  margin-top: 100vh;
  height: 44px;
  font-size: 14px;
}
#home .nav-container .nav {
  font-weight: 600;
  display: block;
  vertical-align: middle;
  background-color: #fff;
  color: #000;
  z-index: 10;
  width: 100%;
  top: 0px;
  height: 44px;
  line-height: 44px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#home .nav-container .nav .logo,
#home .nav-container .nav .middle,
#home .nav-container .nav .options,
#home .nav-container .nav .right {
  display: inline-block;
}
#home .nav-container .nav .logo {
  width: 100px;
  height: 44px;
  text-align: left;
  padding-left: 15px;
  background: url(../images/d4f5b36.svg) left no-repeat;
  background-size: 80px 17px;
  background-position-x: 15px;
}
#home .nav-container .nav .middle {
  width: calc(100% - 200px);
  text-align: center;
}
#home .nav-container .nav .middle .arrow {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5QYXRoIDI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgICAgICA8ZyBpZD0ibmF2aSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE4MC4wMDAwMDAsIC0xOC4wMDAwMDApIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyIj4KICAgICAgICAgICAgPGcgaWQ9IlBhdGgtMiI+CiAgICAgICAgICAgICAgICA8cG9seWxpbmUgcG9pbnRzPSIxODEgMTkgMTg4IDI2LjQ1MjcxMjggMTk1IDE5Ij48L3BvbHlsaW5lPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K) center no-repeat;
  cursor: pointer;
}
#home .nav-container .nav .middle .options .option {
  display: inline-block;
  cursor: pointer;
  color: #000;
  font-weight: normal;
}
#home .nav-container .nav .middle .options a:first-child {
  margin-right: 72px;
}
#home .nav-container .nav .right {
  width: 100px;
  text-align: right;
  padding-right: 15px;
  color: #000;
  cursor: pointer;
}
#home .nav-container .nav .more {
  display: none;
  text-align: center;
  padding: 0 68px;
  background: #fff;
  color: #000;
  border-bottom: 1px solid #e5e5e5;
}
#home .nav-container .nav .more p {
  margin: 0;
  cursor: pointer;
  color: #000;
  font-weight: normal;
}
#home .nav-container .nav.black {
  background: #000;
  color: #fff;
}
#home .nav-container .nav.black .logo {
  background-image: url(../images/9f0077e.svg);
}
#home .nav-container .nav.black .middle .arrow {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5QYXRoIDI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgICAgICA8ZyBpZD0ibmF2aSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE4MC4wMDAwMDAsIC0xOC4wMDAwMDApIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIyIj4KICAgICAgICAgICAgPGcgaWQ9IlBhdGgtMiI+CiAgICAgICAgICAgICAgICA8cG9seWxpbmUgcG9pbnRzPSIxODEgMTkgMTg4IDI2LjQ1MjcxMjggMTk1IDE5Ij48L3BvbHlsaW5lPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K);
}
#home .nav-container .nav.black .middle .options .option {
  color: #fff;
}
#home .nav-container .nav.black .right {
  color: #fff;
}
#home .nav-container .nav.black .more {
  background: #000;
  color: #fff;
  border-bottom: 1px solid #000;
}
#home .nav-container .nav.black .more p {
  color: #fff;
}
.g-normal#home .nav-container .nav .logo,
.g-blue#home .nav-container .nav .logo {
  background-image: url(../images/acc7013.svg);
}
.g-normal#home .nav-container .nav.black .logo,
.g-blue#home .nav-container .nav.black .logo {
  background-image: url(../images/975f505.svg);
}
.four-g-10x#home .nav-container .nav .logo {
  background-image: url(../images/835a013.svg);
}
.four-g-10x#home .nav-container .nav.black .logo {
  background-image: url(../images/b5f7b90.svg);
}
@media screen and (min-width: 568px) {
  #home .nav-container .nav {
    height: 50px;
    line-height: 50px;
  }
  #home .nav-container .nav .logo {
    width: 200px;
    height: 50px;
    padding-left: 40px;
    background-size: auto 22px;
    background-position-x: 40px;
  }
  #home .nav-container .nav .middle {
    width: calc(100% - 400px);
  }
  #home .nav-container .nav .right {
    width: 200px;
    padding-right: 40px;
    color: #1bc9be;
  }
}
@media screen and (min-width: 1920px) {
  #home .nav-container .nav {
    text-align: center;
  }
  #home .nav-container .nav .content {
    max-width: 1200px;
    margin: 0 auto;
  }
  #home .nav-container .nav .logo {
    padding-left: 0;
    background-position-x: 0;
  }
  #home .nav-container .nav .right {
    padding-right: 0;
  }
}
.enter-fade {
  opacity: 0;
}
.fade-in {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards;
}
.fade-out {
  opacity: 1;
  -webkit-animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
          animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
}
.fade-up {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
}
@-webkit-keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@-webkit-keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@-webkit-keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@-webkit-keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@-webkit-keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
.g-title,
.g-title-lg,
.g-title-md,
.g-title-sm,
.g-parameter-name,
#home #ref-1 .title,
#home #ref-15 .title,
#home #breeno .sticky-container .sticky-item .card .name,
#home .section .content .title,
#home .section .content .title.lg,
#home .section .panel .title,
.g-play-button,
.g-parameter .item .name,
.g-stack .content .scroll-content .introduce-wrapper .introduce {
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 600;
  font-size: 34px;
  line-height: 50px;
  color: #333;
}
.g-title-md,
.g-parameter-name,
#home .section .content .title,
.g-parameter .item .name,
.g-stack .content .scroll-content .introduce-wrapper .introduce {
  font-size: 24px;
  line-height: 45px;
}
.g-title-sm,
#home #ref-15 .title {
  font-size: 22px;
  line-height: 40px;
  color: #333;
}
.g-text,
.g-parameter-value,
#home #banner-4 .image-wrapper .photo .photo-label-wrapper .photo-label,
#home #ref-1 .description,
#home #ref-3 .sticky-item .phones .phones-name > div,
#home #ref-5 .content .select > div .phone-name,
#home #ref-5 .content .select > div .options .option .name,
#home #ref-7 .extra .parameter .item .name,
#home #ref-7 .extra .parameter .item .value,
#home #ref-9 .content .parameter .item,
#home #ref-28 .link-module,
#home #ref-28 .link-module a,
#home #banner-5 .banner-title-groups .banner-title,
#home #ref-17 .sticky-item .phones .phone-name,
#home .progress-wrapper .name,
#home .section .content .label,
#home .section .content .description,
#home .section .panel .description,
.g-link-button,
.g-parameter .item .value {
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
  color: #666;
}
.g-parameter-name,
.g-parameter .item .name {
  font-size: 24px;
  line-height: 40px;
}
.g-parameter-value,
.g-parameter .item .value {
  font-size: 13px;
  line-height: 18px;
}
@media screen and (min-width: 568px) {
  .g-title-lg,
  #home .section .content .title.lg {
    font-size: 40px;
    line-height: 64px;
  }
  .g-title-md,
  .g-parameter-name,
  #home .section .content .title,
  .g-parameter .item .name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 36px;
    line-height: 60px;
  }
  .g-title-sm,
  #home #ref-15 .title {
    font-size: 24px;
    line-height: 45px;
  }
  .g-text,
  .g-parameter-value,
  #home #banner-4 .image-wrapper .photo .photo-label-wrapper .photo-label,
  #home #ref-1 .description,
  #home #ref-3 .sticky-item .phones .phones-name > div,
  #home #ref-5 .content .select > div .phone-name,
  #home #ref-5 .content .select > div .options .option .name,
  #home #ref-7 .extra .parameter .item .name,
  #home #ref-7 .extra .parameter .item .value,
  #home #ref-9 .content .parameter .item,
  #home #ref-28 .link-module,
  #home #ref-28 .link-module a,
  #home #banner-5 .banner-title-groups .banner-title,
  #home #ref-17 .sticky-item .phones .phone-name,
  #home .progress-wrapper .name,
  #home .section .content .label,
  #home .section .content .description,
  #home .section .panel .description,
  .g-link-button,
  .g-parameter .item .value {
    font-size: 16px;
    line-height: 27px;
  }
  .g-parameter-name,
  .g-parameter .item .name {
    font-size: 32px;
    font-weight: 400;
    line-height: 45px;
  }
  .g-parameter-value,
  .g-parameter .item .value {
    font-size: 16px;
    line-height: 22px;
  }
}
@media screen and (min-width: 1024px) {
  .g-title-lg,
  #home .section .content .title.lg {
    font-size: 40px;
    line-height: 66px;
  }
  .g-title-md,
  .g-parameter-name,
  #home .section .content .title,
  .g-parameter .item .name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 36px;
    line-height: 60px;
  }
  .g-title-sm,
  #home #ref-15 .title {
    font-size: 24px;
    line-height: 45px;
  }
  .g-text,
  .g-parameter-value,
  #home #banner-4 .image-wrapper .photo .photo-label-wrapper .photo-label,
  #home #ref-1 .description,
  #home #ref-3 .sticky-item .phones .phones-name > div,
  #home #ref-5 .content .select > div .phone-name,
  #home #ref-5 .content .select > div .options .option .name,
  #home #ref-7 .extra .parameter .item .name,
  #home #ref-7 .extra .parameter .item .value,
  #home #ref-9 .content .parameter .item,
  #home #ref-28 .link-module,
  #home #ref-28 .link-module a,
  #home #banner-5 .banner-title-groups .banner-title,
  #home #ref-17 .sticky-item .phones .phone-name,
  #home .progress-wrapper .name,
  #home .section .content .label,
  #home .section .content .description,
  #home .section .panel .description,
  .g-link-button,
  .g-parameter .item .value {
    font-size: 18px;
    line-height: 32px;
  }
  .g-parameter-name,
  .g-parameter .item .name {
    font-size: 32px;
    font-weight: 400;
    line-height: 56px;
  }
  .g-parameter-value,
  .g-parameter .item .value {
    font-size: 14px;
    line-height: 25px;
  }
}
@media screen and (min-width: 1920px) {
  .g-title-lg,
  #home .section .content .title.lg {
    font-size: 58px;
    line-height: 78px;
  }
  .g-title-md,
  .g-parameter-name,
  #home .section .content .title,
  .g-parameter .item .name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 54px;
    line-height: 74px;
  }
  .g-title-sm,
  #home #ref-15 .title {
    font-size: 22px;
    line-height: 40px;
  }
  .g-text,
  .g-parameter-value,
  #home #banner-4 .image-wrapper .photo .photo-label-wrapper .photo-label,
  #home #ref-1 .description,
  #home #ref-3 .sticky-item .phones .phones-name > div,
  #home #ref-5 .content .select > div .phone-name,
  #home #ref-5 .content .select > div .options .option .name,
  #home #ref-7 .extra .parameter .item .name,
  #home #ref-7 .extra .parameter .item .value,
  #home #ref-9 .content .parameter .item,
  #home #ref-28 .link-module,
  #home #ref-28 .link-module a,
  #home #banner-5 .banner-title-groups .banner-title,
  #home #ref-17 .sticky-item .phones .phone-name,
  #home .progress-wrapper .name,
  #home .section .content .label,
  #home .section .content .description,
  #home .section .panel .description,
  .g-link-button,
  .g-parameter .item .value {
    font-size: 18px;
    line-height: 32px;
  }
  .g-parameter-name,
  .g-parameter .item .name {
    font-size: 40px;
    line-height: 56px;
  }
  .g-parameter-value,
  .g-parameter .item .value {
    font-size: 18px;
    line-height: 25px;
  }
}
#home #progress-1 .progress-wrapper > div:nth-child(1) .progress.progressing,
#home #progress-3 .progress-wrapper > div:nth-child(1) .progress.progressing {
  -webkit-animation: progress-1-first-progressing 1s linear;
          animation: progress-1-first-progressing 1s linear;
}
#home #progress-1 .progress-wrapper > div:nth-child(1) .progress.dark,
#home #progress-3 .progress-wrapper > div:nth-child(1) .progress.dark {
  width: 90.91%;
}
#home #progress-1 .progress-wrapper > div:nth-child(1) .progress.dark.progressing,
#home #progress-3 .progress-wrapper > div:nth-child(1) .progress.dark.progressing {
  -webkit-animation: progress-1-first-progressing-dark 1s linear;
          animation: progress-1-first-progressing-dark 1s linear;
}
#home #progress-1 .progress-wrapper > div:nth-child(2) .progress.progressing,
#home #progress-3 .progress-wrapper > div:nth-child(2) .progress.progressing {
  -webkit-animation: progress-1-second-progressing 1s linear;
          animation: progress-1-second-progressing 1s linear;
}
#home #progress-1 .progress-wrapper > div:nth-child(2) .progress.dark,
#home #progress-3 .progress-wrapper > div:nth-child(2) .progress.dark {
  width: 77.82%;
}
#home #progress-1 .progress-wrapper > div:nth-child(2) .progress.dark.progressing,
#home #progress-3 .progress-wrapper > div:nth-child(2) .progress.dark.progressing {
  -webkit-animation: progress-1-second-progressing-dark 1s linear;
          animation: progress-1-second-progressing-dark 1s linear;
}
#home #progress-2.progress-wrapper > div:nth-child(1) .progress.progressing {
  -webkit-animation: progress-2-first-progressing 1s linear;
          animation: progress-2-first-progressing 1s linear;
}
#home #progress-2.progress-wrapper > div:nth-child(1) .progress.dark {
  width: 74.35%;
}
#home #progress-2.progress-wrapper > div:nth-child(1) .progress.dark.progressing {
  -webkit-animation: progress-2-first-progressing-dark 1s linear;
          animation: progress-2-first-progressing-dark 1s linear;
}
#home #progress-2.progress-wrapper > div:nth-child(2) .progress {
  width: 56%;
}
#home #progress-2.progress-wrapper > div:nth-child(2) .progress.progressing {
  -webkit-animation: progress-2-second-progressing 1s linear;
          animation: progress-2-second-progressing 1s linear;
}
#home #progress-2.progress-wrapper > div:nth-child(2) .progress.dark.progressing {
  width: 100%;
  -webkit-animation: progress-2-second-progressing-dark 1s linear;
          animation: progress-2-second-progressing-dark 1s linear;
}
@-webkit-keyframes progress-2-first-progressing {
  0% {
    width: 0%;
  }
  74.35% {
    width: 74.35%;
  }
  100% {
    width: 100%;
  }
}
@keyframes progress-2-first-progressing {
  0% {
    width: 0%;
  }
  74.35% {
    width: 74.35%;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes progress-2-first-progressing-dark {
  0% {
    width: 0%;
  }
  74.35% {
    width: 74.35%;
  }
  100% {
    width: 74.35%;
  }
}
@keyframes progress-2-first-progressing-dark {
  0% {
    width: 0%;
  }
  74.35% {
    width: 74.35%;
  }
  100% {
    width: 74.35%;
  }
}
@-webkit-keyframes progress-2-second-progressing {
  0% {
    width: 100%;
  }
  73.7% {
    width: 26.3%;
  }
  100% {
    width: 26.3%;
  }
}
@keyframes progress-2-second-progressing {
  0% {
    width: 100%;
  }
  73.7% {
    width: 26.3%;
  }
  100% {
    width: 26.3%;
  }
}
@-webkit-keyframes progress-2-second-progressing-dark {
  0% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}
@keyframes progress-2-second-progressing-dark {
  0% {
    width: 100%;
  }
  100% {
    width: 100%;
  }
}
#home #banner-1 {
  margin-top: 16px;
}
#home #banner-2 {
  margin-top: 40px;
}
#home #banner-2 .image-wrapper {
  height: 66.67vw;
}
#home #banner-3 {
  margin-top: 30px;
}
#home #banner-4 {
  margin-top: 40px;
}
#home #banner-4 .image-wrapper {
  height: 121.73vw;
}
#home #banner-4 .image-wrapper .photo .photo-label-wrapper {
  position: absolute;
  left: 16px;
  height: 34px;
}
#home #banner-4 .image-wrapper .photo .photo-label-wrapper:nth-child(1) {
  top: 50%;
}
#home #banner-4 .image-wrapper .photo .photo-label-wrapper:nth-child(2) {
  top: 100%;
}
#home #banner-4 .image-wrapper .photo .photo-label-wrapper .photo-label {
  border-radius: 6px;
  background-color: rgba(0,0,0,0.4);
  color: #fff;
  margin-top: -50px;
  font-size: 14px;
  width: 128px;
  height: 100%;
  line-height: 34px;
  text-align: center;
}
#home #video-1 .scroll-content {
  padding-bottom: 20vh;
  height: auto;
}
#home #video-1 .scroll-content .enter-fade {
  margin-top: 20vh;
}
#home #video-2 .scroll-content {
  padding-bottom: 20vh;
  height: auto;
}
#home #video-2 .scroll-content .enter-fade {
  margin-top: 20vh;
}
#home #video-3 .scroll-content {
  height: auto;
}
#home #video-3 .scroll-content .section:nth-child(1) {
  padding-bottom: 20vh;
}
#home #video-3 .scroll-content .section:nth-child(1) .enter-fade {
  margin-top: 20vh;
}
#home #video-3 .scroll-content .section:nth-child(2) {
  padding-bottom: 150px;
}
#home #video-3 .section {
  position: relative;
  z-index: 4;
}
@media screen and (max-width: 567px) {
  #home #ref-1 {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #home #ref-1 {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #home #ref-1 {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #home #ref-1 {
    width: 1200px;
    margin: auto;
  }
}
@media screen and (max-width: 567px) {
  #home #ref-1 {
    padding-top: 90px;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #home #ref-1 {
    padding-top: 140px;
  }
}
@media screen and (min-width: 1024px) {
  #home #ref-1 {
    padding-top: 210px;
  }
}
@media screen and (min-width: 1920px) {
  #home #ref-1 {
    padding-top: 230px;
  }
}
#home #ref-1 .logo {
  display: block;
  width: 134px;
  height: auto;
  margin: auto;
}
#home #ref-1 .title-wrapper {
  margin-top: 8px;
}
#home #ref-1 .title {
  font-size: 21px;
  line-height: 29px;
  text-align: center;
  letter-spacing: 0.81px;
  color: #333;
}
#home #ref-1 .description {
  margin-top: 39px;
  letter-spacing: 0.38px;
  color: #666;
}
#home #ref-3 {
  position: relative;
}
#home #ref-3 .content {
  position: relative;
  z-index: 2;
}
#home #ref-3 .sticky-container {
  z-index: 1;
  margin-top: calc((100vw - 100vh) / 2 + 50px);
}
#home #ref-3 .sticky-item {
  top: calc((100vh - 100vw) / 2);
  left: 0;
  height: auto;
  width: 100%;
}
#home #ref-3 .sticky-item .phones {
  position: relative;
  width: 84vw;
  margin: 0 8vw;
  will-change: transform;
  -webkit-transition: -webkit-transform 0.1s ease;
  transition: -webkit-transform 0.1s ease;
  transition: transform 0.1s ease;
  transition: transform 0.1s ease, -webkit-transform 0.1s ease;
}
#home #ref-3 .sticky-item .phones .phones-wrapper {
  position: relative;
  height: 104.6vw;
}
#home #ref-3 .sticky-item .phones .phone-left .image-wrapper,
#home #ref-3 .sticky-item .phones .phone-right .image-wrapper {
  width: 100%;
  height: auto;
  will-change: transform;
  -webkit-transform: translateX(0px);
          transform: translateX(0px);
}
#home #ref-3 .sticky-item .phones .phone-left .image-wrapper.fold,
#home #ref-3 .sticky-item .phones .phone-right .image-wrapper.fold {
  -webkit-transition: -webkit-transform ease-in 0.3s;
  transition: -webkit-transform ease-in 0.3s;
  transition: transform ease-in 0.3s;
  transition: transform ease-in 0.3s, -webkit-transform ease-in 0.3s;
}
#home #ref-3 .sticky-item .phones .phone-left .image-wrapper.unfold,
#home #ref-3 .sticky-item .phones .phone-right .image-wrapper.unfold {
  -webkit-transition: -webkit-transform ease-out 0.4s;
  transition: -webkit-transform ease-out 0.4s;
  transition: transform ease-out 0.4s;
  transition: transform ease-out 0.4s, -webkit-transform ease-out 0.4s;
}
#home #ref-3 .sticky-item .phones .phone-left .image-wrapper img,
#home #ref-3 .sticky-item .phones .phone-right .image-wrapper img {
  display: block;
  width: 100%;
  height: auto;
}
#home #ref-3 .sticky-item .phones .phone-left .image-wrapper .mask,
#home #ref-3 .sticky-item .phones .phone-right .image-wrapper .mask {
  position: absolute;
  width: 100%;
  left: 0px;
  top: 50%;
  bottom: 50%;
  overflow: hidden;
}
#home #ref-3 .sticky-item .phones .phone-left .image-wrapper .mask img,
#home #ref-3 .sticky-item .phones .phone-right .image-wrapper .mask img {
  position: absolute;
  top: 50%;
  left: 0px;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
#home #ref-3 .sticky-item .phones .phone-left .image-wrapper .mask.show,
#home #ref-3 .sticky-item .phones .phone-right .image-wrapper .mask.show {
  -webkit-animation: phone-mask-show 0.5s ease 0s 1 normal forwards;
          animation: phone-mask-show 0.5s ease 0s 1 normal forwards;
}
#home #ref-3 .sticky-item .phones .phone-left .image-wrapper .mask.reverse,
#home #ref-3 .sticky-item .phones .phone-right .image-wrapper .mask.reverse {
  -webkit-animation: phone-mask-show-reverse 0.5s ease 0s 1 normal forwards;
          animation: phone-mask-show-reverse 0.5s ease 0s 1 normal forwards;
}
#home #ref-3 .sticky-item .phones .phone-left {
  position: absolute;
  z-index: 2;
  width: 50vw;
  top: 0;
  left: 17vw;
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
  will-change: transform;
}
#home #ref-3 .sticky-item .phones .phone-left .image-wrapper.unfold {
  -webkit-transform: translateX(-12vw);
          transform: translateX(-12vw);
}
#home #ref-3 .sticky-item .phones .phone-right {
  position: absolute;
  z-index: 1;
  width: 48vw;
  right: 18vw;
  bottom: 0;
}
#home #ref-3 .sticky-item .phones .phone-right .image-wrapper.unfold {
  -webkit-transform: translateX(13vw);
          transform: translateX(13vw);
}
#home #ref-3 .sticky-item .phones .phones-name {
  opacity: 0;
  width: 80vw;
  margin: auto;
  margin-top: 16px;
}
#home #ref-3 .sticky-item .phones .phones-name > div {
  display: inline-block;
  width: 56%;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}
#home #ref-3 .sticky-item .phones .phones-name > div:nth-child(2) {
  width: 23%;
  margin-left: 7%;
}
#home #ref-3 .scroll-content {
  width: 100%;
  height: 1800px;
}
#home #ref-4 {
  margin-top: 70px;
}
#home #ref-4 .sticky-container {
  margin-top: -80px;
}
#home #ref-4 .scroll-content {
  height: calc(1400px + 176.4vw);
  padding-bottom: 12vw;
}
#home #ref-4 .scroll-content .content {
  padding-top: 0px;
}
#home #ref-4 .phone-animation {
  top: 150px;
  margin: auto;
  left: 8vw;
  width: 84vw;
  height: 176.4vw;
  will-change: transform;
  -webkit-transition: -webkit-transform 0.1s ease;
  transition: -webkit-transform 0.1s ease;
  transition: transform 0.1s ease;
  transition: transform 0.1s ease, -webkit-transform 0.1s ease;
}
#home #ref-4 .phone-animation .parameter-wrapper {
  z-index: 2;
  position: absolute;
  width: 100%;
  top: 120vw;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
#home #ref-4 .phone-animation .parameter-wrapper .link {
  margin-top: 10vw;
}
#home #ref-4 .phone-animation .image-wrapper {
  z-index: 1;
  position: relative;
  width: 100%;
  height: 175.32vw;
  will-change: transform;
  -webkit-transform-origin: 100% 0;
          transform-origin: 100% 0;
}
#home #ref-4 .phone-animation .image-wrapper.zoom-in {
  -webkit-animation: phone-scale 0.5s ease 0s 1 normal forwards;
          animation: phone-scale 0.5s ease 0s 1 normal forwards;
}
#home #ref-4 .phone-animation .image-wrapper.zoom-out {
  -webkit-animation: phone-scale-reverse 0.5s ease 0s 1 normal forwards;
          animation: phone-scale-reverse 0.5s ease 0s 1 normal forwards;
}
#home #ref-4 .phone-animation .image-wrapper .phone-camera {
  position: absolute;
  top: -5.05%;
  left: 17%;
  width: 65.05%;
  height: 6.15%;
  -webkit-transform: rotate(10.8deg);
          transform: rotate(10.8deg);
  -webkit-transition: -webkit-transform ease-out 0.8s;
  transition: -webkit-transform ease-out 0.8s;
  transition: transform ease-out 0.8s;
  transition: transform ease-out 0.8s, -webkit-transform ease-out 0.8s;
  -webkit-transform-origin: 0 100%;
          transform-origin: 0 100%;
}
#home #ref-4 .phone-animation .image-wrapper .phone-camera.unfold {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
#home #ref-4 .phone-animation .image-wrapper .phone-internal-camera {
  position: absolute;
  top: -5.05%;
  left: 17%;
  width: 65.05%;
  height: 6.15%;
  opacity: 0;
}
#home #ref-4 .phone-animation .image-wrapper .phone-body,
#home #ref-4 .phone-animation .image-wrapper .phone-screen,
#home #ref-4 .phone-animation .image-wrapper .phone-internal-1,
#home #ref-4 .phone-animation .image-wrapper .phone-internal-2,
#home #ref-4 .phone-animation .image-wrapper .phone-screen-dark {
  position: absolute;
  top: 0.7%;
  left: 0;
  width: 100%;
  height: 99%;
}
#home #ref-4 .phone-animation .image-wrapper .phone-screen-dark,
#home #ref-4 .phone-animation .image-wrapper .phone-internal-1,
#home #ref-4 .phone-animation .image-wrapper .phone-internal-2 {
  opacity: 0;
}
#home #ref-4 .phone-animation .image-wrapper .phone-screen {
  width: 98%;
  height: 100%;
  border-radius: 30px;
}
#home #ref-4 .phone-animation .image-wrapper .phone-screen-dark {
  background-color: #0c0d0e;
  top: 2%;
  width: 94%;
  left: 3%;
  border-radius: 25px;
  height: 96%;
}
#home #ref-4 .phone-animation .image-wrapper .phone-internal-1,
#home #ref-4 .phone-animation .image-wrapper .phone-internal-2 {
  height: 33%;
  top: 0.7%;
}
#home #ref-4 .phone-animation .image-wrapper .phone-cover {
  position: absolute;
  top: 0.7%;
  left: 0;
  height: 4px;
  width: 100%;
}
#home #ref-4 .phone-animation .image-wrapper .finger {
  width: 100%;
  position: absolute;
  bottom: 30px;
}
#home #ref-4 .phone-animation .image-wrapper .finger div {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  bottom: 0px;
  width: 40px;
  height: 40px;
}
#home #ref-4.fade-in .phone-animation .image-wrapper .phone-camera {
  -webkit-transform: rotate(0deg);
          transform: rotate(0deg);
}
#home #ref-5 {
  margin-top: -50px;
  width: 100%;
  overflow: hidden;
  z-index: 1;
  position: relative;
}
#home #ref-5 .section:nth-child(1) {
  z-index: 2;
  position: relative;
}
#home #ref-5 .d-wrapper {
  position: relative;
  z-index: 1;
  overflow: initial;
}
@media screen and (max-width: 567px) {
  #home #ref-5 .d-wrapper {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #home #ref-5 .d-wrapper {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #home #ref-5 .d-wrapper {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #home #ref-5 .d-wrapper {
    width: 1200px;
    margin: auto;
  }
}
#home #ref-5 .d-wrapper .phone-wrapper {
  width: 100%;
  height: auto;
  position: relative;
  height: 70vw;
  will-change: transform;
}
#home #ref-5 .d-wrapper .phone-wrapper .phone-back {
  position: absolute;
}
#home #ref-5 .d-wrapper .phone-wrapper .phone-back div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}
#home #ref-5 .content {
  width: auto;
}
#home #ref-5 .content .title {
  width: 110%;
}
#home #ref-5 .content .select {
  padding-top: 40px;
}
#home #ref-5 .content .select > div {
  margin-bottom: 21px;
}
#home #ref-5 .content .select > div .phone-name {
  line-height: 22px;
}
#home #ref-5 .content .select > div .options {
  margin-top: 13px;
}
#home #ref-5 .content .select > div .options .option {
  display: inline-block;
  margin-right: 22px;
}
#home #ref-5 .content .select > div .options .option .color-circle {
  margin-left: 4px;
  width: 30px;
  height: 30px;
  border-radius: 15px;
  padding-top: 2px;
}
#home #ref-5 .content .select > div .options .option .color-circle .inner-circle {
  opacity: 1;
  width: 26px;
  height: 26px;
  border: 3px solid #fff;
  border-radius: 13px;
  margin: auto;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
#home #ref-5 .content .select > div .options .option .name {
  opacity: 1;
  margin-top: 6px;
  font-size: 13px;
  line-height: 18px;
  width: 120px;
}
#home #ref-5 .content .select > div .options .option.active .inner-circle {
  opacity: 1;
}
#home #ref-5 .content .select > div .options .option.active .name {
  opacity: 1;
}
#home #ref-5 .content .select > div .options [data-color="green"] .color-circle {
  background-color: #3557b5;
  box-shadow: 0 9px 27px 0 rgba(35,190,219,0.44);
}
#home #ref-5 .content .select > div .options [data-color="green"] .name {
  color: #3557b5;
}
#home #ref-5 .content .select > div .options [data-color="black"] .color-circle {
  background-color: #343e45;
  box-shadow: 0 9px 27px 0 rgba(52,62,69,0.23);
}
#home #ref-5 .content .select > div .options [data-color="black"] .name {
  color: #343e45;
}
#home #ref-5 .content .select > div .options [data-color="pink"] .color-circle {
  background-color: #ffd8d1;
  box-shadow: 0 9px 27px 0 #ffe7e7;
}
#home #ref-5 .content .select > div .options [data-color="pink"] .name {
  color: #ffd8d1;
}
#home #ref-5 .content .select > div .options [data-color="purple"] .color-circle {
  background: -webkit-gradient(linear, right bottom, left top, from(#c86dd7), to(#3023ae));
  background: linear-gradient(to left top, #c86dd7 0%, #3023ae 100%);
  box-shadow: 0 9px 27px 0 rgba(172,34,238,0.33);
}
#home #ref-5 .content .select > div .options [data-color="purple"] .name {
  color: #3023ae;
}
#home #ref-6 {
  padding-top: 0vw;
  overflow: hidden;
}
#home #ref-6 .content>div {
  position: relative;
  z-index: 1;
}
#home #ref-6 .content .map {
  position: relative;
  z-index: 0;
  left: 0;
  width: 100%;
  padding-bottom: 43.203125%;
  margin-top: 40px;
  margin-bottom: 30%;
  -webkit-transform: translateX(-31.25%) scale(3.121951219512195);
          transform: translateX(-31.25%) scale(3.121951219512195);
}
#home #ref-6 .content .map:before {
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.6)), color-stop(10%, rgba(0,0,0,0)), color-stop(90%, rgba(0,0,0,0)), to(#000));
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, #000);
}
#home #ref-6 .content .map:after {
  background: -webkit-gradient(linear, left top, right top, from(rgba(0,0,0,0.6)), color-stop(10%, rgba(0,0,0,0)), color-stop(90%, rgba(0,0,0,0)), to(#000));
  background: linear-gradient(to right, rgba(0,0,0,0.6), rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, #000);
}
@media screen and (max-width: 567px) {
  #home #ref-6 .content .map {
    overflow: visible;
    padding-bottom: 63.7333%;
    -webkit-transform: translateY(-40px) scale(1);
            transform: translateY(-40px) scale(1);
  }
  #home #ref-6 .content .map .bg {
    background-repeat: no-repeat;
    background-size: 341.33333333333337%;
    background-position: 64% 53%;
  }
}
#home #ref-6 .content .map:before,
#home #ref-6 .content .map:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
#home #ref-6 .content .map .bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
#home #ref-6 .content .map canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
}
#home #ref-6 .content .map #map-background {
  z-index: 0;
}
#home #ref-6 .content .map #map-main {
  z-index: 1;
}
#home #ref-6 .content .map #map-destination {
  z-index: 2;
}
#home #ref-7 {
  width: 100%;
  overflow: hidden;
}
#home #ref-7 .extra {
  position: relative;
  width: 100%;
  height: 100vw;
}
#home #ref-7 .extra .parameter {
  position: absolute;
  left: 0px;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
#home #ref-7 .extra .parameter .item {
  margin-bottom: 5.33vw;
}
#home #ref-7 .extra .parameter .item .name {
  opacity: 0;
  color: #666;
  font-size: 13px;
  line-height: 30px;
}
#home #ref-7 .extra .parameter .item .value {
  font-weight: 600;
  opacity: 0;
  color: #738dd8;
  font-size: 22px;
  line-height: 30px;
}
#home #ref-7 .extra .image-wrapper {
  margin-left: -2vw;
  margin-right: -2vw;
}
#home #ref-7 .extra .image-wrapper div {
  display: block;
  width: 100%;
  height: 53.405vw;
}
#home #ref-7 .extra.fade-right .parameter .item:nth-child(1) .name {
  -webkit-animation: fade 0.4s linear 0.6s 1 normal forwards, right-short 0.4s ease 0.6s 1 normal forwards;
          animation: fade 0.4s linear 0.6s 1 normal forwards, right-short 0.4s ease 0.6s 1 normal forwards;
}
#home #ref-7 .extra.fade-right .parameter .item:nth-child(1) .value {
  -webkit-animation: fade 0.4s linear 0.7s 1 normal forwards, right-short 0.4s ease 0.7s 1 normal forwards;
          animation: fade 0.4s linear 0.7s 1 normal forwards, right-short 0.4s ease 0.7s 1 normal forwards;
}
#home #ref-7 .extra.fade-right .parameter .item:nth-child(2) .name {
  -webkit-animation: fade 0.4s linear 0.8s 1 normal forwards, right-short 0.4s ease 0.8s 1 normal forwards;
          animation: fade 0.4s linear 0.8s 1 normal forwards, right-short 0.4s ease 0.8s 1 normal forwards;
}
#home #ref-7 .extra.fade-right .parameter .item:nth-child(2) .value {
  -webkit-animation: fade 0.4s linear 0.9s 1 normal forwards, right-short 0.4s ease 0.9s 1 normal forwards;
          animation: fade 0.4s linear 0.9s 1 normal forwards, right-short 0.4s ease 0.9s 1 normal forwards;
}
#home #ref-7 .extra.fade-right .image-wrapper {
  -webkit-transform-origin: 0 0;
          transform-origin: 0 0;
  -webkit-animation: image-fade-right 0.8s ease 0s 1 normal forwards;
          animation: image-fade-right 0.8s ease 0s 1 normal forwards;
}
#home #ref-8 {
  width: 100%;
  height: auto;
}
#home #ref-8 .extra {
  position: relative;
  margin-left: -6vw;
  margin-right: -6vw;
  height: 69.14vw;
  display: none;
}
#home #ref-8 .extra canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#home #ref-8 .mobile-phone {
  margin-top: 30px;
  position: relative;
  vertical-align: top;
  display: inline-block;
  width: 80vw;
  height: 167vw;
  margin-left: 10vw;
}
#home #ref-8 .mobile-phone .phone-body {
  position: absolute;
  width: 100%;
  height: 100%;
}
#home #ref-8 .mobile-phone .phone-inside {
  z-index: 2;
  width: 100%;
  height: 98%;
  background-size: 94% 98%;
  background-repeat: no-repeat;
  margin-left: 2.8%;
  margin-top: 5%;
  border-radius: 24px;
}
#home #ref-9 {
  width: 100%;
}
#home #ref-9 .content .parameter {
  margin-top: 8vw;
}
#home #ref-9 .content .parameter .item {
  display: inline-block;
  width: 50%;
  font-size: 22px;
  color: #738dd8;
  line-height: 30px;
}
#home #ref-9 .image-wrapper {
  margin-top: -40px;
  width: 100%;
  height: auto;
}
#home #ref-9 .image-wrapper div {
  width: 100%;
  height: 116.3vw;
}
#home #ref-10 {
  overflow: hidden;
  width: 100%;
}
#home #ref-10 .content .image-wrapper {
  margin-top: 30px;
  width: 124px;
}
#home #ref-10 .content .image-wrapper img {
  width: 100%;
  height: auto;
}
#home #ref-10 .content .g-parameter .item {
  width: 65px;
}
#home #ref-10 .content .g-parameter .item .icon {
  width: 35px;
  height: 35px;
}
#home #ref-10 .content .g-parameter .item .icon.dolby {
  width: 27px;
}
#home #ref-10 .content .description .comment {
  color: #666;
  font-size: 13px;
  margin-top: 16px;
}
#home #ref-10 .container {
  margin-top: -50px;
}
#home #ref-10 .phone {
  position: relative;
  top: -187px;
  width: 90vw;
  left: 5vw;
  height: 18vw;
}
#home #ref-11 {
  position: relative;
  z-index: 4;
}
#home #ref-11 .content {
  position: relative;
  z-index: 5;
}
#home #ref-11 #breeno {
  position: relative;
  z-index: 4;
}
#home #ref-12 {
  background-color: #000;
}
#home #ref-13 {
  padding: 0 8.5vw;
}
#home #ref-14 {
  padding: 0 8.5vw;
}
#home #ref-14 .panel .g-parameter {
  padding: 40px 13px 0 13px;
}
#home #ref-15 {
  padding-top: 50px;
}
@media screen and (max-width: 567px) {
  #home #ref-15 {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #home #ref-15 {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #home #ref-15 {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #home #ref-15 {
    width: 1200px;
    margin: auto;
  }
}
#home #ref-15 .title {
  margin-bottom: 13px;
}
#home #ref-18 {
  position: relative;
  padding-top: 58px;
  z-index: 2;
}
@media screen and (max-width: 567px) {
  #home #ref-18 {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #home #ref-18 {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #home #ref-18 {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #home #ref-18 {
    width: 1200px;
    margin: auto;
  }
}
#home #ref-21 {
  background-color: #f5f5f5;
}
#home #ref-21 .content {
  padding-top: 50px;
  padding-bottom: 41px;
}
#home #ref-21 .content .description {
  margin-top: 0px;
  font-size: 14px;
  line-height: 27px;
  letter-spacing: 0.34px;
}
#home #ref-22 {
  margin-top: -100px;
}
#home #breeno {
  height: 400vh;
  margin: auto;
  margin-top: calc(117vw + 130px - 100vh);
  position: relative;
}
#home #breeno .sticky-container:nth-child(1) {
  z-index: 4;
  height: 100vh;
}
#home #breeno .sticky-container:nth-child(2) {
  z-index: 3;
  height: 200vh;
}
#home #breeno .sticky-container:nth-child(3) {
  z-index: 2;
  height: 300vh;
}
#home #breeno .sticky-container:nth-child(4) {
  z-index: 1;
  height: 400vh;
}
#home #breeno .sticky-container:nth-child(1) .card {
  background: -webkit-gradient(linear, left top, left bottom, from(#b4eed8), to(#7bd8ee));
  background: linear-gradient(to bottom, #b4eed8, #7bd8ee);
}
#home #breeno .sticky-container:nth-child(2) .card {
  background: -webkit-gradient(linear, left top, left bottom, from(#93e0fd), to(#78d2ff));
  background: linear-gradient(to bottom, #93e0fd, #78d2ff);
}
#home #breeno .sticky-container:nth-child(3) .card {
  background: -webkit-gradient(linear, left top, left bottom, from(#9ddaff), to(#8aacfc));
  background: linear-gradient(to bottom, #9ddaff, #8aacfc);
}
#home #breeno .sticky-container:nth-child(4) .card {
  background: -webkit-gradient(linear, left top, left bottom, from(#c9b5fa), to(#a8a2fd));
  background: linear-gradient(to bottom, #c9b5fa, #a8a2fd);
}
#home #breeno .sticky-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
#home #breeno .sticky-container .sticky-item {
  top: calc(100vh - 117vw - 100px);
  width: 100%;
  height: 117vw;
}
#home #breeno .sticky-container .sticky-item .card {
  -webkit-transform: 50% 0;
          transform: 50% 0;
  will-change: transform;
  border-radius: 10px;
  width: 84vw;
  height: 117vw;
  margin: auto;
}
#home #breeno .sticky-container .sticky-item .card .image {
  margin: auto;
  width: 74vw;
  height: 90.67vw;
}
#home #breeno .sticky-container .sticky-item .card .name {
  font-size: 20px;
  line-height: 28px;
  color: #fff;
  text-align: center;
  margin-top: 30px;
}
#home #ref-23 {
  margin-top: 90px;
  padding-top: 90px;
  padding-bottom: 90px;
  background-color: #f0f0f0;
}
#home #ref-25 {
  width: 100%;
  padding-top: 146px;
  height: 312px;
}
#home #ref-25 .g-link-button {
  text-align: center;
}
#home #ref-26 {
  height: 100vh;
  background-position: center;
}
#home #ref-27 .image {
  margin-top: 30px;
  height: 60vw;
}
#home #ref-28 {
  background-color: #000;
  padding-bottom: 90px;
}
#home #ref-28 .link-module {
  cursor: pointer;
  text-align: center;
  display: inline-block;
  width: 36vw;
  height: 36vw;
  margin-bottom: 4vw;
  border-radius: 6px;
  font-size: 12px;
  line-height: 60vw;
  color: #fff;
}
#home #ref-28 .link-module a {
  font-size: 12px;
  line-height: 60vw;
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  text-decoration: none;
}
#home #ref-28 .link-module a:focus,
#home #ref-28 .link-module a:active,
#home #ref-28 .link-module a:hover {
  text-decoration: none;
  color: #fff;
}
#home #ref-28 .link-module:nth-child(1),
#home #ref-28 .link-module:nth-child(3),
#home #ref-28 .link-module:nth-child(5) {
  margin-right: 4vw;
}
#home #ref-30 {
  margin-top: 90px;
  background-position: center;
  height: 1200px;
}
#home #ref-30 .title {
  font-size: 45px;
  line-height: 65px;
  letter-spacing: -2px;
  color: #fff;
}
@media screen and (max-width: 1023px) {
  #home #ref-30 .title {
    font-size: 34px;
  }
}
@media screen and (max-width: 567px) {
  #home #ref-30 .title {
    font-size: 24px;
    line-height: 45px;
  }
}
#home #ref-30 .description {
  font-size: 18px;
  line-height: 28px;
  margin-top: 30px;
  color: #fff;
}
@media screen and (max-width: 1919px) {
  #home #ref-30 .description {
    font-size: 15px;
    line-height: 32px;
  }
}
@media screen and (max-width: 1023px) {
  #home #ref-30 .description {
    font-size: 14px;
    line-height: 27px;
  }
}
#home.g-blue .phone-right,
#home.g-normal .phone-right,
#home.four-g-10x .phone-right {
  display: none !important;
}
#home.g-blue #ref-30,
#home.g-normal #ref-30,
#home.four-g-10x #ref-30 {
  display: block;
}
@-webkit-keyframes progress-1-first-progressing {
  0% {
    width: 0%;
  }
  90.91% {
    width: 90.91%;
  }
  100% {
    width: 100%;
  }
}
@keyframes progress-1-first-progressing {
  0% {
    width: 0%;
  }
  90.91% {
    width: 90.91%;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes progress-1-first-progressing-dark {
  0% {
    width: 0%;
  }
  90.91% {
    width: 90.91%;
  }
  100% {
    width: 90.91%;
  }
}
@keyframes progress-1-first-progressing-dark {
  0% {
    width: 0%;
  }
  90.91% {
    width: 90.91%;
  }
  100% {
    width: 90.91%;
  }
}
@-webkit-keyframes progress-1-second-progressing {
  0% {
    width: 0%;
  }
  77.82% {
    width: 77.82%;
  }
  100% {
    width: 100%;
  }
}
@keyframes progress-1-second-progressing {
  0% {
    width: 0%;
  }
  77.82% {
    width: 77.82%;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes progress-1-second-progressing-dark {
  0% {
    width: 0%;
  }
  77.82% {
    width: 77.82%;
  }
  100% {
    width: 77.82%;
  }
}
@keyframes progress-1-second-progressing-dark {
  0% {
    width: 0%;
  }
  77.82% {
    width: 77.82%;
  }
  100% {
    width: 77.82%;
  }
}
@media screen and (max-width: 1023px) {
  #home.g-blue .phones-name > div:nth-child(1),
  #home.g-normal .phones-name > div:nth-child(1),
  #home.four-g-10x .phones-name > div:nth-child(1) {
    width: 100% !important;
  }
  #home.g-blue .phones-name > div:nth-child(2),
  #home.g-normal .phones-name > div:nth-child(2),
  #home.four-g-10x .phones-name > div:nth-child(2) {
    display: none !important;
  }
  #home.g-blue .phone-left .image-wrapper.unfold,
  #home.g-normal .phone-left .image-wrapper.unfold,
  #home.four-g-10x .phone-left .image-wrapper.unfold {
    -webkit-transform: translateX(0vw) !important;
            transform: translateX(0vw) !important;
  }
}
@media screen and (max-width: 567px) {
  #home #ref-12 .name {
    font-size: 12px;
    line-height: 20px;
  }
  #home #ref-12 .value {
    font-size: 22px;
    line-height: 26px;
  }
  #home #ref-12 .item:nth-child(4) {
    margin-top: 20px;
  }
  #home #ref-2 .g-parameter .name {
    font-size: 22px;
    line-height: 26px;
  }
  #home #ref-2 .g-parameter .value {
    font-size: 12px;
    line-height: 20px;
  }
  #home #ref-20 .g-parameter .name {
    font-size: 22px;
    line-height: 26px;
  }
  #home #ref-20 .g-parameter .value {
    font-size: 12px;
    line-height: 20px;
  }
  #home #ref-24 .g-play-button {
    padding-top: 15px;
    font-size: 12px;
    text-align: center;
    line-height: 12px;
  }
  #home #ref-5 .section {
    position: relative;
    z-index: 2;
  }
  #home #ref-5 .d-wrapper {
    margin-top: calc((70vw - 100vh) / 2 + 30px);
    z-index: 1;
  }
  #home #ref-5 .d-wrapper .sticky-item {
    width: 100%;
    top: calc((100vh - 70vw) / 2);
  }
  #home #ref-5 .d-wrapper .sticky-item .phone-wrapper .phone-back {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    position: absolute;
    top: -30vw;
    left: 22vw;
    height: 128vw;
    width: 70vw;
  }
  #home #ref-5 .d-wrapper .sticky-item .phone-wrapper .phone-back .image {
    background-repeat: no-repeat;
  }
  #home #ref-5 .d-wrapper .scroll-content {
    height: 2000px;
  }
  #home #stack-1 .introduce {
    font-size: 26px;
    line-height: 47px;
  }
  #home #ref-3 .g-parameter .item:nth-child(3) {
    width: 100%;
  }
  #home #ref-3 .g-parameter .item:nth-child(4) {
    width: 60%;
  }
  #home #ref-3 .g-parameter .name {
    font-size: 16px;
    font-weight: 400;
    line-height: 26px;
  }
  #home #ref-3 .g-parameter .value {
    font-size: 10px;
    line-height: 20px;
  }
  #home #ref-18 .g-link-button {
    font-size: 15px;
  }
  #home #ref-7 .content .extra .parameter .item .name {
    line-height: 24px;
  }
}
@-webkit-keyframes phone-scale {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}
@keyframes phone-scale {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}
@-webkit-keyframes phone-scale-reverse {
  from {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes phone-scale-reverse {
  from {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes image-fade-right {
  from {
    margin-left: 0%;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    margin-left: 45%;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}
@keyframes image-fade-right {
  from {
    margin-left: 0%;
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    margin-left: 45%;
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
  }
}
@-webkit-keyframes phone-mask-show {
  from {
    top: 50%;
    bottom: 50%;
  }
  to {
    top: 0;
    bottom: 0;
  }
}
@keyframes phone-mask-show {
  from {
    top: 50%;
    bottom: 50%;
  }
  to {
    top: 0;
    bottom: 0;
  }
}
@-webkit-keyframes phone-mask-show-reverse {
  from {
    top: 0;
    bottom: 0;
  }
  to {
    top: 50%;
    bottom: 50%;
  }
}
@keyframes phone-mask-show-reverse {
  from {
    top: 0;
    bottom: 0;
  }
  to {
    top: 50%;
    bottom: 50%;
  }
}
.enter-fade {
  opacity: 0;
}
.fade-in {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards;
}
.fade-out {
  opacity: 1;
  -webkit-animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
          animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
}
.fade-up {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
}
@-webkit-keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@-webkit-keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@-webkit-keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@-webkit-keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@-webkit-keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
.g-title,
.g-title-lg,
.g-title-md,
.g-title-sm,
.g-parameter-name,
#home .section .content .title,
#home .section .content .title.lg,
#home .section .panel .title,
.g-play-button,
.g-parameter .item .name,
.g-stack .content .scroll-content .introduce-wrapper .introduce {
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 600;
  font-size: 34px;
  line-height: 50px;
  color: #333;
}
.g-title-md,
.g-parameter-name,
#home .section .content .title,
.g-parameter .item .name,
.g-stack .content .scroll-content .introduce-wrapper .introduce {
  font-size: 24px;
  line-height: 45px;
}
.g-title-sm {
  font-size: 22px;
  line-height: 40px;
  color: #333;
}
.g-text,
.g-parameter-value,
#home #ref-3 .sticky-item .phones .phones-name > div,
#home #banner-5 .banner-title-groups .banner-title,
#home #ref-17 .sticky-item .phones .phone-name,
#home .progress-wrapper .name,
#home .section .content .label,
#home .section .content .description,
#home .section .panel .description,
.g-link-button,
.g-parameter .item .value {
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
  color: #666;
}
.g-parameter-name,
.g-parameter .item .name {
  font-size: 24px;
  line-height: 40px;
}
.g-parameter-value,
.g-parameter .item .value {
  font-size: 13px;
  line-height: 18px;
}
@media screen and (min-width: 568px) {
  .g-title-lg,
  #home .section .content .title.lg {
    font-size: 40px;
    line-height: 64px;
  }
  .g-title-md,
  .g-parameter-name,
  #home .section .content .title,
  .g-parameter .item .name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 36px;
    line-height: 60px;
  }
  .g-title-sm {
    font-size: 24px;
    line-height: 45px;
  }
  .g-text,
  .g-parameter-value,
  #home #ref-3 .sticky-item .phones .phones-name > div,
  #home #banner-5 .banner-title-groups .banner-title,
  #home #ref-17 .sticky-item .phones .phone-name,
  #home .progress-wrapper .name,
  #home .section .content .label,
  #home .section .content .description,
  #home .section .panel .description,
  .g-link-button,
  .g-parameter .item .value {
    font-size: 16px;
    line-height: 27px;
  }
  .g-parameter-name,
  .g-parameter .item .name {
    font-size: 32px;
    font-weight: 400;
    line-height: 45px;
  }
  .g-parameter-value,
  .g-parameter .item .value {
    font-size: 16px;
    line-height: 22px;
  }
}
@media screen and (min-width: 1024px) {
  .g-title-lg,
  #home .section .content .title.lg {
    font-size: 40px;
    line-height: 66px;
  }
  .g-title-md,
  .g-parameter-name,
  #home .section .content .title,
  .g-parameter .item .name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 36px;
    line-height: 60px;
  }
  .g-title-sm {
    font-size: 24px;
    line-height: 45px;
  }
  .g-text,
  .g-parameter-value,
  #home #ref-3 .sticky-item .phones .phones-name > div,
  #home #banner-5 .banner-title-groups .banner-title,
  #home #ref-17 .sticky-item .phones .phone-name,
  #home .progress-wrapper .name,
  #home .section .content .label,
  #home .section .content .description,
  #home .section .panel .description,
  .g-link-button,
  .g-parameter .item .value {
    font-size: 18px;
    line-height: 32px;
  }
  .g-parameter-name,
  .g-parameter .item .name {
    font-size: 32px;
    font-weight: 400;
    line-height: 56px;
  }
  .g-parameter-value,
  .g-parameter .item .value {
    font-size: 14px;
    line-height: 25px;
  }
}
@media screen and (min-width: 1920px) {
  .g-title-lg,
  #home .section .content .title.lg {
    font-size: 58px;
    line-height: 78px;
  }
  .g-title-md,
  .g-parameter-name,
  #home .section .content .title,
  .g-parameter .item .name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 54px;
    line-height: 74px;
  }
  .g-title-sm {
    font-size: 22px;
    line-height: 40px;
  }
  .g-text,
  .g-parameter-value,
  #home #ref-3 .sticky-item .phones .phones-name > div,
  #home #banner-5 .banner-title-groups .banner-title,
  #home #ref-17 .sticky-item .phones .phone-name,
  #home .progress-wrapper .name,
  #home .section .content .label,
  #home .section .content .description,
  #home .section .panel .description,
  .g-link-button,
  .g-parameter .item .value {
    font-size: 18px;
    line-height: 32px;
  }
  .g-parameter-name,
  .g-parameter .item .name {
    font-size: 40px;
    line-height: 56px;
  }
  .g-parameter-value,
  .g-parameter .item .value {
    font-size: 18px;
    line-height: 25px;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #home #ref-12 .name {
    font-size: 14px;
    line-height: 25px;
  }
  #home #ref-12 .value {
    font-size: 32px;
    line-height: 48px;
  }
  #home #ref-12 .item:nth-child(4) {
    margin-top: 26px;
  }
  #home #ref-24,
  #home .g-play-button {
    padding-top: 18px;
    font-size: 16px;
    text-align: center;
    line-height: 18px;
  }
  #home #ref-28 {
    padding-bottom: 140px;
  }
  #home #ref-28 .link-module {
    width: 41vw;
    height: 41vw;
    margin-bottom: 6vw;
    border-radius: 10px;
    font-size: 14px;
    line-height: 70vw;
  }
  #home #ref-28 .link-module a {
    font-size: 14px;
    line-height: 70vw;
  }
  #home #ref-28 .link-module:nth-child(1),
  #home #ref-28 .link-module:nth-child(3),
  #home #ref-28 .link-module:nth-child(5) {
    margin-right: 6vw;
  }
  #home #progress-1 {
    margin-top: -50px;
  }
  #home #progress-1 .progress-wrapper > div:nth-child(2),
  #home #progress-3 .progress-wrapper > div:nth-child(2) {
    width: 40%;
  }
  #home #ref-1 {
    padding-top: 160px;
    padding-bottom: 45px;
  }
  #home #ref-1 .title {
    font-size: 24px;
    line-height: 40px;
  }
  #home #ref-1 .description {
    margin: auto;
    margin-top: 50px;
    width: 88vw;
    font-size: 18px;
    line-height: 32px;
    letter-spacing: 0.42px;
    text-align: center;
  }
  #home #ref-2 .content .g-parameter .name {
    font-size: 32px;
    line-height: 48px;
  }
  #home #ref-2 .content .g-parameter .value {
    font-size: 14px;
    line-height: 25px;
  }
  #home #ref-2 .content .g-parameter .item:nth-child(1),
  #home #ref-2 .content .g-parameter .item:nth-child(3) {
    width: 40%;
  }
  #home #ref-2 .content .g-parameter .item:nth-child(2),
  #home #ref-2 .content .g-parameter .item:nth-child(4) {
    width: 60%;
  }
  #home #ref-3 .sticky-item .phones {
    width: 88vw;
    margin: 0 6vw;
  }
  #home #ref-3 .sticky-item .phones .phones-wrapper {
    height: 104.6vw;
  }
  #home #ref-3 .sticky-item .phones .phone-left {
    position: absolute;
    z-index: 2;
    width: 50vw;
    top: 0;
    left: 17vw;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    will-change: transform;
  }
  #home #ref-3 .sticky-item .phones .phone-left .image-wrapper.unfold {
    -webkit-transform: translateX(-12vw);
            transform: translateX(-12vw);
  }
  #home #ref-3 .sticky-item .phones .phone-right {
    position: absolute;
    z-index: 1;
    width: 48vw;
    right: 18vw;
    bottom: 0;
  }
  #home #ref-3 .sticky-item .phones .phone-right .image-wrapper.unfold {
    -webkit-transform: translateX(13vw);
            transform: translateX(13vw);
  }
  #home #ref-3 .sticky-item .phones .phones-name {
    opacity: 0;
    width: 80vw;
    margin: auto;
    margin-top: 16px;
  }
  #home #ref-3 .sticky-item .phones .phones-name > div {
    display: inline-block;
    width: 56%;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }
  #home #ref-3 .sticky-item .phones .phones-name > div:nth-child(2) {
    width: 23%;
    margin-left: 7%;
  }
  #home #ref-3 .scroll-content {
    width: 100%;
    height: 2500px;
  }
  #home #ref-4 .phone-animation {
    height: 183.669vw;
  }
  #home #ref-5 .d-wrapper {
    margin-top: calc((40vw - 100vh) / 2 + 30px);
  }
  #home #ref-5 .d-wrapper .sticky-item {
    top: calc((100vh - 40vw) / 2);
    width: 100%;
  }
  #home #ref-5 .d-wrapper .sticky-item .phone-wrapper {
    height: 40vw;
  }
  #home #ref-5 .d-wrapper .sticky-item .phone-wrapper .phone-back {
    -webkit-transform: rotate(-90deg);
            transform: rotate(-90deg);
    position: absolute;
    top: -16vw;
    left: 37vw;
    height: 76vw;
    width: 40vw;
  }
  #home #ref-5 .d-wrapper .scroll-content {
    height: 2000px;
  }
  #home #banner-4 {
    margin-top: 40px;
  }
  #home #banner-4 .image-wrapper {
    height: 49.2vw;
  }
  #home #banner-4 .image-wrapper .photo .photo-label-wrapper {
    position: absolute;
    bottom: 16px;
    height: 34px;
  }
  #home #banner-4 .image-wrapper .photo .photo-label-wrapper:nth-child(1) {
    top: auto;
    left: 0;
  }
  #home #banner-4 .image-wrapper .photo .photo-label-wrapper:nth-child(2) {
    top: auto;
    left: 50%;
  }
  #home #banner-4 .image-wrapper .photo .photo-label-wrapper .photo-label {
    margin-top: 0px;
    margin-left: 19px;
  }
  #home #banner-1 {
    margin-top: 70px;
  }
  #home #banner-1 .image-wrapper {
    height: 49.2vw;
  }
  #home #banner-2 {
    margin-top: 40px;
  }
  #home #banner-2 .image-wrapper {
    height: 49.2vw;
  }
  #home #banner-5 {
    padding: 0;
    margin: 0 6vw;
    border-radius: 11px;
    height: 49vw;
    margin-top: 40px;
  }
  #home #banner-5.active-0 {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(180,238,216,0.2)), to(rgba(123,216,238,0.2)));
    background: linear-gradient(to bottom, rgba(180,238,216,0.2), rgba(123,216,238,0.2));
  }
  #home #banner-5.active-1 {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(147,224,253,0.2)), to(rgba(120,210,255,0.2)));
    background: linear-gradient(to bottom, rgba(147,224,253,0.2), rgba(120,210,255,0.2));
  }
  #home #banner-5.active-2 {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(157,218,255,0.2)), to(rgba(138,172,252,0.2)));
    background: linear-gradient(to bottom, rgba(157,218,255,0.2), rgba(138,172,252,0.2));
  }
  #home #banner-5.active-3 {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(201,181,250,0.2)), to(rgba(168,162,253,0.2)));
    background: linear-gradient(to bottom, rgba(201,181,250,0.2), rgba(168,162,253,0.2));
  }
  #home #banner-5 .image-wrapper {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    position: absolute;
    right: 10vw;
    width: 32vw;
    height: 42vw;
  }
  #home #banner-5 .banner-title-groups {
    position: absolute;
    top: 4.9vw;
    left: 10vw;
  }
  #home #banner-5 .banner-title-groups .banner-title {
    font-size: 22px;
    line-height: 28px;
    margin-top: 40px;
  }
  #home #banner-5 .banner-title-groups .banner-title.active {
    color: #000;
    font-weight: 600;
  }
  #home #banner-5 .status {
    position: absolute;
    top: 3.4vw;
    left: 6vw;
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  #home #banner-5 .status .bar {
    width: 30px;
    height: 4px;
    margin-right: 38px;
  }
  #home #video-1 .scroll-content {
    padding-bottom: 40vh;
  }
  #home #video-2 .scroll-content {
    padding-bottom: 40vh;
  }
  #home #ref-15 {
    padding: 126px 0 30px 0;
  }
  #home #ref-15 .g-link-button {
    text-align: center;
  }
  #home #ref-6 .content .map {
    margin-top: 60px;
    margin-bottom: 0;
    -webkit-transform: translateY(-48.55334538878843%) scale(2.133333333333333);
            transform: translateY(-48.55334538878843%) scale(2.133333333333333);
    padding-bottom: 39.2969%;
  }
  #home #ref-6 .content .map:before {
    background: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(rgba(0,0,0,0)), to(#000));
    background: linear-gradient(to bottom, #000, rgba(0,0,0,0), #000);
  }
  #home #ref-6 .content .map:after {
    background: -webkit-gradient(linear, left top, right top, from(#000), color-stop(10%, rgba(0,0,0,0)), color-stop(90%, rgba(0,0,0,0)), to(#000));
    background: linear-gradient(to right, #000, rgba(0,0,0,0) 10%, rgba(0,0,0,0) 90%, #000);
  }
  #home .progress-wrapper > div {
    display: inline-block;
    width: 45%;
  }
  #home .progress-wrapper > div:first-child {
    margin-right: 10%;
  }
  #home #ref-7 .extra .parameter .item .name {
    font-size: 18px;
    line-height: 54px;
  }
  #home #ref-7 .extra .parameter .item .value {
    font-size: 36px;
    line-height: 54px;
  }
  #home #ref-8 {
    padding-top: 180px;
    padding-left: 6vw;
    padding-right: 6vw;
    height: auto;
  }
  #home #ref-8 .content {
    padding: 0;
    vertical-align: top;
    display: inline-block;
    width: 41.67vw;
  }
  #home #ref-8 .content .extra {
    margin-top: 64px;
    position: relative;
    width: 40vw;
    height: 32vw;
    margin-left: -20px;
  }
  #home #ref-8 .content .extra canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #home #ref-8 .right {
    margin-top: 30px;
    position: relative;
    vertical-align: top;
    display: inline-block;
    width: 39.54vw;
    height: 82.65vw;
    margin-left: 6.5vw;
  }
  #home #ref-8 .right .phone-body {
    position: absolute;
    width: 100%;
    height: 100%;
  }
  #home #ref-8 .right .phone-inside {
    z-index: 2;
    width: 100%;
    height: 98%;
    background-size: 94% 98%;
    background-repeat: no-repeat;
    margin-left: 2.8%;
    margin-top: 5%;
    border-radius: 24px;
  }
  #home #ref-8 .mobile-phone {
    display: none;
  }
  #home #ref-9 {
    position: relative;
    height: calc(210px + 60vw);
  }
  #home #ref-9 .content {
    position: relative;
    z-index: 2;
  }
  #home #ref-9 .image-wrapper {
    z-index: 1;
    position: absolute;
    top: 100px;
    left: 0;
    width: 100vw;
    height: 100vw;
  }
  #home #ref-9 .image-wrapper div {
    width: 100%;
    height: 100%;
  }
  #home #ref-10 .content .g-parameter .item {
    width: 102px;
    padding-top: 1.5px;
  }
  #home #ref-10 .content .g-parameter .item .icon {
    width: 72px;
    height: 72px;
  }
  #home #ref-10 .content .g-parameter .item .icon.dolby {
    width: 55px;
  }
  #home #ref-13 {
    padding: 0 45px;
  }
  #home #ref-13 .panel {
    height: 550px;
  }
  #home #ref-13 .panel:first-child {
    margin-right: 2%;
  }
  #home #ref-14 {
    padding: 0 45px;
  }
  #home #ref-14 .panel {
    height: 702px;
  }
  #home #ref-14 .panel .description {
    margin: auto;
    margin-top: 35px;
  }
  #home #ref-14 .panel .g-parameter {
    padding: 70px 0 0 0;
    margin: auto;
  }
  #home #ref-14 .panel .g-parameter .item {
    width: 33.33%;
  }
  #home #ref-14 .panel .g-parameter .item .name,
  #home #ref-14 .panel .g-parameter .item .value {
    text-align: center;
  }
  #home #ref-14 .panel .g-parameter .item .name {
    font-size: 36px;
    line-height: 56px;
  }
  #home #ref-14 .panel .g-parameter .item .value {
    font-size: 16px;
    line-height: 25px;
    opacity: 0.7;
  }
  #home #ref-18 {
    padding: 120px 0 45px 0;
    text-align: center;
  }
  #home #ref-21 .content {
    padding-top: 120px;
    padding-bottom: 120px;
  }
  #home #ref-21 .content .description {
    max-width: initial;
    font-size: 15px;
    line-height: 32px;
  }
  #home #ref-23 {
    padding-bottom: 140px;
  }
  #home #ref-10 .phone {
    left: auto;
    position: relative;
    width: 88vw;
    height: 17.8vw;
    margin: auto;
    display: block;
  }
  #home #ref-10 .container.circle-wave-container {
    margin-top: 0;
    padding-bottom: 50px;
  }
  #home #ref-10 .container.circle-wave-container .circle-wave {
    height: 28vw;
    -webkit-perspective: 1000px;
            perspective: 1000px;
  }
  #home #ref-10 .container.circle-wave-container .circle-wave .circle.left.first,
  #home #ref-10 .container.circle-wave-container .circle-wave .circle.left.second,
  #home #ref-10 .container.circle-wave-container .circle-wave .circle.left.third {
    -webkit-animation-name: circle-waving-left-pc;
            animation-name: circle-waving-left-pc;
  }
  #home #ref-10 .container.circle-wave-container .circle-wave .circle.right.first,
  #home #ref-10 .container.circle-wave-container .circle-wave .circle.right.second,
  #home #ref-10 .container.circle-wave-container .circle-wave .circle.right.third {
    -webkit-animation-name: circle-waving-right-pc;
            animation-name: circle-waving-right-pc;
  }
@-webkit-keyframes circle-waving-left-pc {
    0% {
      top: 30vw;
      left: 10vw;
      width: 0;
      height: 0;
      border-color: rgba(255,255,255,0.5);
    }
    100% {
      top: 10vw;
      left: -15vw;
      width: 40vw;
      height: 40vw;
      border-color: rgba(255,255,255,0);
    }
}
@keyframes circle-waving-left-pc {
    0% {
      top: 30vw;
      left: 10vw;
      width: 0;
      height: 0;
      border-color: rgba(255,255,255,0.5);
    }
    100% {
      top: 10vw;
      left: -15vw;
      width: 40vw;
      height: 40vw;
      border-color: rgba(255,255,255,0);
    }
}
@-webkit-keyframes circle-waving-right-pc {
    0% {
      top: 30vw;
      right: 10vw;
      width: 0;
      height: 0;
      border-color: rgba(255,255,255,0.5);
    }
    100% {
      top: 10vw;
      right: -15vw;
      width: 40vw;
      height: 40vw;
      border-color: rgba(255,255,255,0);
    }
}
@keyframes circle-waving-right-pc {
    0% {
      top: 30vw;
      right: 10vw;
      width: 0;
      height: 0;
      border-color: rgba(255,255,255,0.5);
    }
    100% {
      top: 10vw;
      right: -15vw;
      width: 40vw;
      height: 40vw;
      border-color: rgba(255,255,255,0);
    }
}
  #home #ref-10 .phone {
    top: -174px;
  }
  #home #progress-2 {
    margin-top: 50px;
  }
  #home #stack-1 .introduce {
    width: 50%;
    font-size: 32px;
    line-height: 60px;
  }
}
.enter-fade {
  opacity: 0;
}
.fade-in {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards;
}
.fade-out {
  opacity: 1;
  -webkit-animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
          animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
}
.fade-up {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
}
@-webkit-keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@-webkit-keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@-webkit-keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@-webkit-keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@-webkit-keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
.g-title,
.g-title-lg,
.g-title-md,
.g-title-sm,
.g-parameter-name,
#home .section .content .title,
#home .section .content .title.lg,
#home .section .panel .title,
.g-play-button,
.g-parameter .item .name,
.g-stack .content .scroll-content .introduce-wrapper .introduce {
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 600;
  font-size: 34px;
  line-height: 50px;
  color: #333;
}
.g-title-md,
.g-parameter-name,
#home .section .content .title,
.g-parameter .item .name,
.g-stack .content .scroll-content .introduce-wrapper .introduce {
  font-size: 24px;
  line-height: 45px;
}
.g-title-sm {
  font-size: 22px;
  line-height: 40px;
  color: #333;
}
.g-text,
.g-parameter-value,
#home #banner-5 .banner-title-groups .banner-title,
#home #ref-17 .sticky-item .phones .phone-name,
#home .progress-wrapper .name,
#home .section .content .label,
#home .section .content .description,
#home .section .panel .description,
.g-link-button,
.g-parameter .item .value {
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
  color: #666;
}
.g-parameter-name,
.g-parameter .item .name {
  font-size: 24px;
  line-height: 40px;
}
.g-parameter-value,
.g-parameter .item .value {
  font-size: 13px;
  line-height: 18px;
}
@media screen and (min-width: 568px) {
  .g-title-lg,
  #home .section .content .title.lg {
    font-size: 40px;
    line-height: 64px;
  }
  .g-title-md,
  .g-parameter-name,
  #home .section .content .title,
  .g-parameter .item .name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 36px;
    line-height: 60px;
  }
  .g-title-sm {
    font-size: 24px;
    line-height: 45px;
  }
  .g-text,
  .g-parameter-value,
  #home #banner-5 .banner-title-groups .banner-title,
  #home #ref-17 .sticky-item .phones .phone-name,
  #home .progress-wrapper .name,
  #home .section .content .label,
  #home .section .content .description,
  #home .section .panel .description,
  .g-link-button,
  .g-parameter .item .value {
    font-size: 16px;
    line-height: 27px;
  }
  .g-parameter-name,
  .g-parameter .item .name {
    font-size: 32px;
    font-weight: 400;
    line-height: 45px;
  }
  .g-parameter-value,
  .g-parameter .item .value {
    font-size: 16px;
    line-height: 22px;
  }
}
@media screen and (min-width: 1024px) {
  .g-title-lg,
  #home .section .content .title.lg {
    font-size: 40px;
    line-height: 66px;
  }
  .g-title-md,
  .g-parameter-name,
  #home .section .content .title,
  .g-parameter .item .name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 36px;
    line-height: 60px;
  }
  .g-title-sm {
    font-size: 24px;
    line-height: 45px;
  }
  .g-text,
  .g-parameter-value,
  #home #banner-5 .banner-title-groups .banner-title,
  #home #ref-17 .sticky-item .phones .phone-name,
  #home .progress-wrapper .name,
  #home .section .content .label,
  #home .section .content .description,
  #home .section .panel .description,
  .g-link-button,
  .g-parameter .item .value {
    font-size: 18px;
    line-height: 32px;
  }
  .g-parameter-name,
  .g-parameter .item .name {
    font-size: 32px;
    font-weight: 400;
    line-height: 56px;
  }
  .g-parameter-value,
  .g-parameter .item .value {
    font-size: 14px;
    line-height: 25px;
  }
}
@media screen and (min-width: 1920px) {
  .g-title-lg,
  #home .section .content .title.lg {
    font-size: 58px;
    line-height: 78px;
  }
  .g-title-md,
  .g-parameter-name,
  #home .section .content .title,
  .g-parameter .item .name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 54px;
    line-height: 74px;
  }
  .g-title-sm {
    font-size: 22px;
    line-height: 40px;
  }
  .g-text,
  .g-parameter-value,
  #home #banner-5 .banner-title-groups .banner-title,
  #home #ref-17 .sticky-item .phones .phone-name,
  #home .progress-wrapper .name,
  #home .section .content .label,
  #home .section .content .description,
  #home .section .panel .description,
  .g-link-button,
  .g-parameter .item .value {
    font-size: 18px;
    line-height: 32px;
  }
  .g-parameter-name,
  .g-parameter .item .name {
    font-size: 40px;
    line-height: 56px;
  }
  .g-parameter-value,
  .g-parameter .item .value {
    font-size: 18px;
    line-height: 25px;
  }
}
@media screen and (min-width: 1024px) {
  #home #ref-12 .name {
    font-size: 14px;
    line-height: 25px;
  }
  #home #ref-12 .value {
    font-size: 32px;
    line-height: 48px;
  }
  #home .mt26 .item:nth-child(2) {
    margin-top: 26px;
  }
  #home #ref-24 .g-play-button {
    padding-top: 20px;
    font-size: 16px;
    text-align: center;
    line-height: 14.4px;
  }
  #home #ref-28 {
    padding-bottom: 210px;
  }
  #home #ref-28 .link-module {
    width: 310px;
    height: 310px;
    margin-bottom: 15px;
    border-radius: 10px;
    font-size: 16px;
    line-height: 540px;
  }
  #home #ref-28 .link-module a {
    font-size: 16px;
    line-height: 540px;
  }
  #home #ref-28 .link-module:nth-child(3),
  #home #ref-28 .link-module:nth-child(6) {
    margin-right: 0px;
  }
  #home #ref-28 .link-module:nth-child(1),
  #home #ref-28 .link-module:nth-child(2),
  #home #ref-28 .link-module:nth-child(4),
  #home #ref-28 .link-module:nth-child(5) {
    margin-right: 15px;
  }
  #home #ref-27 .image {
    margin-top: 120px;
    height: 30vw;
  }
  #home #ref-23 {
    padding-bottom: 140px;
  }
  #home #ref-1 {
    padding-top: 160px;
    padding-bottom: 45px;
  }
  #home #ref-1 .title {
    font-size: 30px;
    line-height: 52px;
  }
  #home #ref-1 .description {
    margin: auto;
    margin-top: 50px;
    width: 680px;
    font-size: 18px;
    line-height: 37px;
    letter-spacing: 0.52px;
    text-align: center;
  }
  #home #ref-2 .content .g-parameter .name {
    font-size: 32px;
    line-height: 48px;
  }
  #home #ref-2 .content .g-parameter .value {
    font-size: 14px;
    line-height: 25px;
  }
  #home #stack-1 .introduce {
    width: 50%;
    font-size: 34px;
    line-height: 60px;
  }
  #home #ref-20 .content .g-parameter .name {
    font-size: 32px;
    line-height: 48px;
  }
  #home #ref-20 .content .g-parameter .value {
    font-size: 14px;
    line-height: 25px;
  }
  #home #ref-20 .content .g-parameter .item:nth-child(1) {
    width: 20%;
  }
  #home #ref-20 .content .g-parameter .item:nth-child(2) {
    width: 20%;
  }
  #home #banner-4 {
    margin-top: 40px;
  }
  #home #banner-4 .image-wrapper {
    height: 540px;
  }
  #home #banner-4 .image-wrapper .photo .photo-label-wrapper {
    position: absolute;
    bottom: 16px;
    height: 34px;
  }
  #home #banner-4 .image-wrapper .photo .photo-label-wrapper:nth-child(1) {
    top: auto;
    left: 0;
  }
  #home #banner-4 .image-wrapper .photo .photo-label-wrapper:nth-child(2) {
    top: auto;
    left: 50%;
  }
  #home #banner-4 .image-wrapper .photo .photo-label-wrapper .photo-label {
    margin-top: 0px;
    margin-left: 19px;
  }
  #home #banner-1 {
    margin-top: 70px;
  }
  #home #banner-1 .image-wrapper {
    height: 540px;
  }
  #home #banner-2 {
    margin-top: 40px;
  }
  #home #banner-2 .image-wrapper {
    height: 540px;
  }
  #home #banner-5 {
    border-radius: 16px;
    height: 540px;
    margin-top: 40px;
  }
  #home #banner-5.active-0 {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(180,238,216,0.2)), to(rgba(123,216,238,0.2)));
    background: linear-gradient(to bottom, rgba(180,238,216,0.2), rgba(123,216,238,0.2));
  }
  #home #banner-5.active-1 {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(147,224,253,0.2)), to(rgba(120,210,255,0.2)));
    background: linear-gradient(to bottom, rgba(147,224,253,0.2), rgba(120,210,255,0.2));
  }
  #home #banner-5.active-2 {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(157,218,255,0.2)), to(rgba(138,172,252,0.2)));
    background: linear-gradient(to bottom, rgba(157,218,255,0.2), rgba(138,172,252,0.2));
  }
  #home #banner-5.active-3 {
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(201,181,250,0.2)), to(rgba(168,162,253,0.2)));
    background: linear-gradient(to bottom, rgba(201,181,250,0.2), rgba(168,162,253,0.2));
  }
  #home #banner-5 .image-wrapper {
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 18px;
    border-bottom-right-radius: 18px;
    position: absolute;
    right: 107px;
    width: 352px;
    height: 464px;
  }
  #home #banner-5 .banner-title-groups {
    position: absolute;
    top: 144px;
    left: 128px;
  }
  #home #banner-5 .banner-title-groups .banner-title {
    font-size: 22px;
    line-height: 28px;
    margin-top: 40px;
  }
  #home #banner-5 .banner-title-groups .banner-title.active {
    color: #000;
    font-weight: 600;
  }
  #home #banner-5 .status {
    position: absolute;
    top: 145px;
    left: 100px;
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  #home #banner-5 .status .bar {
    width: 30px;
    height: 4px;
    margin-right: 38px;
  }
  #home #video-1 .scroll-content {
    padding-bottom: 40vh;
  }
  #home #video-2 .scroll-content {
    padding-bottom: 40vh;
  }
  #home #ref-15 {
    padding: 126px 0 30px 0;
  }
  #home #ref-15 .g-link-button {
    text-align: center;
  }
  #home #ref-5 .d-wrapper {
    padding-top: calc(100vh - 622px);
  }
  #home #ref-5 .d-wrapper .scroll-content {
    width: 558px;
    padding-top: 65px;
  }
  #home #ref-5 .d-wrapper .scroll-content .section:nth-child(1) .content {
    padding-top: 0;
  }
  #home #ref-5 .d-wrapper .scroll-content .select {
    padding-top: 50px;
  }
  #home #ref-5 .d-wrapper .scroll-content .select > div {
    margin-bottom: 30px;
  }
  #home #ref-5 .d-wrapper .scroll-content .section:nth-child(2) {
    margin-top: 500px;
    padding-bottom: 250px;
  }
  #home #ref-5 .d-wrapper .sticky-item {
    right: 0px;
  }
  #home #ref-5 .d-wrapper .sticky-item.fixed {
    right: calc((100% - 960px) / 2);
  }
  #home #ref-5 .d-wrapper .sticky-item .phone-wrapper {
    width: 344px;
    height: 622px;
    overflow: hidden;
  }
  #home #ref-5 .d-wrapper .sticky-item .phone-wrapper .phone-back {
    width: 100%;
    height: 100%;
  }
  #home #ref-6 .content .map {
    margin-top: 60px;
    margin-bottom: 0;
    -webkit-transform: translateY(-48.55334538878843%) scale(2.133333333333333);
            transform: translateY(-48.55334538878843%) scale(2.133333333333333);
  }
  #home .progress-wrapper > div {
    display: inline-block;
    width: 45%;
  }
  #home .progress-wrapper > div:first-child {
    margin-right: 10%;
  }
  #home #ref-7 .extra {
    height: auto;
  }
  #home #ref-7 .extra .image-wrapper {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
  }
  #home #ref-7 .extra .image-wrapper div {
    height: 611px;
  }
  #home #ref-8 {
    width: 960px;
    margin: auto;
    padding-top: 180px;
    height: auto;
  }
  #home #ref-8 .content {
    padding-top: 10px;
    vertical-align: top;
    display: inline-block;
    width: 448px;
  }
  #home #ref-8 .content .extra {
    margin-top: 64px;
    position: relative;
    width: 400px;
    height: 320px;
    margin-left: -20px;
  }
  #home #ref-8 .content .extra canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #home #ref-8 .right {
    position: relative;
    vertical-align: bottom;
    display: inline-block;
    margin-left: 157px;
    width: 354px;
    height: 740px;
  }
  #home #ref-8 .right .phone-body {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
  }
  #home #ref-8 .right .phone-inside {
    z-index: 2;
    width: 100%;
    height: 98%;
    background-size: 94% 98%;
    background-repeat: no-repeat;
    margin-left: 2.8%;
    margin-top: 5%;
    border-radius: 24px;
  }
  #home #ref-8 .mobile-phone {
    display: none;
  }
  #home #ref-9 {
    position: relative;
    height: calc(210px + 60vw);
  }
  #home #ref-9 .content {
    position: relative;
    z-index: 2;
  }
  #home #ref-9 .image-wrapper {
    z-index: 1;
    position: absolute;
    top: 210px;
    left: 0;
    width: 100vw;
    height: 60vw;
  }
  #home #ref-9 .image-wrapper div {
    width: 100%;
    height: 100%;
  }
  #home #ref-10 .content .g-parameter .item {
    padding-top: 12.5px;
    width: 102px;
  }
  #home #ref-10 .content .g-parameter .item .icon {
    width: 72px;
    height: 72px;
  }
  #home #ref-10 .content .g-parameter .item .icon.dolby {
    width: 55px;
  }
  #home #ref-13 {
    padding: 0 45px;
  }
  #home #ref-13 .panel {
    vertical-align: top;
    display: inline-block;
    width: 49%;
    height: 550px;
  }
  #home #ref-13 .panel:first-child {
    margin-right: 2%;
  }
  #home #ref-14 {
    padding: 0 45px;
  }
  #home #ref-14 .panel {
    height: 702px;
  }
  #home #ref-14 .panel .description {
    width: 820px;
    margin: auto;
    margin-top: 35px;
  }
  #home #ref-14 .panel .g-parameter {
    padding: 70px 0 0 0;
    width: 820px;
    margin: auto;
  }
  #home #ref-14 .panel .g-parameter .item {
    width: 16.66%;
  }
  #home #ref-14 .panel .g-parameter .item .name,
  #home #ref-14 .panel .g-parameter .item .value {
    text-align: center;
  }
  #home #ref-14 .panel .g-parameter .item .name {
    font-size: 40px;
    line-height: 56px;
  }
  #home #ref-14 .panel .g-parameter .item .value {
    font-size: 18px;
    line-height: 25px;
  }
  #home #ref-18 {
    padding: 120px 0 45px 0;
    text-align: center;
  }
  #home #ref-21 .content {
    padding-top: 120px;
    padding-bottom: 120px;
  }
  #home #ref-21 .content .description {
    max-width: initial;
    font-size: 15px;
    line-height: 32px;
  }
  #home #ref-10 .phone {
    left: auto;
    position: relative;
    width: 1140px;
    height: 231px;
    margin: auto;
    display: block;
  }
  #home #ref-10 .container.circle-wave-container {
    margin-top: 0;
    padding-bottom: 50px;
  }
  #home #ref-10 .container.circle-wave-container .circle-wave {
    height: 28vw;
    -webkit-perspective: 1000px;
            perspective: 1000px;
  }
  #home #ref-10 .container.circle-wave-container .circle-wave .circle.left.first,
  #home #ref-10 .container.circle-wave-container .circle-wave .circle.left.second,
  #home #ref-10 .container.circle-wave-container .circle-wave .circle.left.third {
    -webkit-animation-name: circle-waving-left-pc;
            animation-name: circle-waving-left-pc;
  }
  #home #ref-10 .container.circle-wave-container .circle-wave .circle.right.first,
  #home #ref-10 .container.circle-wave-container .circle-wave .circle.right.second,
  #home #ref-10 .container.circle-wave-container .circle-wave .circle.right.third {
    -webkit-animation-name: circle-waving-right-pc;
            animation-name: circle-waving-right-pc;
  }
@-webkit-keyframes circle-waving-left-pc {
    0% {
      top: 30vw;
      left: 15vw;
      width: 0;
      height: 0;
      border-color: rgba(255,255,255,0.5);
    }
    100% {
      top: 10vw;
      left: -10vw;
      width: 40vw;
      height: 40vw;
      border-color: rgba(255,255,255,0);
    }
}
@keyframes circle-waving-left-pc {
    0% {
      top: 30vw;
      left: 15vw;
      width: 0;
      height: 0;
      border-color: rgba(255,255,255,0.5);
    }
    100% {
      top: 10vw;
      left: -10vw;
      width: 40vw;
      height: 40vw;
      border-color: rgba(255,255,255,0);
    }
}
@-webkit-keyframes circle-waving-right-pc {
    0% {
      top: 30vw;
      right: 15vw;
      width: 0;
      height: 0;
      border-color: rgba(255,255,255,0.5);
    }
    100% {
      top: 10vw;
      right: -10vw;
      width: 40vw;
      height: 40vw;
      border-color: rgba(255,255,255,0);
    }
}
@keyframes circle-waving-right-pc {
    0% {
      top: 30vw;
      right: 15vw;
      width: 0;
      height: 0;
      border-color: rgba(255,255,255,0.5);
    }
    100% {
      top: 10vw;
      right: -10vw;
      width: 40vw;
      height: 40vw;
      border-color: rgba(255,255,255,0);
    }
}
  #home #ref-10 .phone {
    top: -250px;
  }
  #home #progress-2 {
    margin-top: 50px;
  }
  #home #ref-17 {
    position: relative;
  }
  #home #ref-17 #param1 .item:nth-child(3) {
    width: 100%;
  }
  #home #ref-17 #param1 .item:nth-child(4) {
    width: 100%;
  }
  #home #ref-17 #param1 .item:nth-child(4) .name {
    max-width: 400px;
  }
  #home #ref-17 .g-parameter .name {
    font-size: 32px;
    line-height: 48px;
    font-weight: 400;
  }
  #home #ref-17 .g-parameter .value {
    font-size: 14px;
    line-height: 25px;
    font-weight: 300;
  }
  #home #ref-17 .content {
    padding-top: 150px;
  }
  #home #ref-17 .sticky-item {
    padding-bottom: 50px;
    top: 390px;
    width: 960px;
    height: auto;
  }
  #home #ref-17 .sticky-item .phones {
    position: relative;
    width: 100%;
    will-change: transform;
  }
  #home #ref-17 .sticky-item .phones .phones-wrapper {
    position: relative;
    height: 455px;
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper,
  #home #ref-17 .sticky-item .phones .phone-right .image-wrapper {
    width: 100%;
    height: auto;
    will-change: transform;
    -webkit-transform: translateX(0px) scale(1);
            transform: translateX(0px) scale(1);
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper img,
  #home #ref-17 .sticky-item .phones .phone-right .image-wrapper img {
    width: 100%;
    height: auto;
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper.fold,
  #home #ref-17 .sticky-item .phones .phone-right .image-wrapper.fold {
    -webkit-transition: -webkit-transform ease-in 0.3s;
    transition: -webkit-transform ease-in 0.3s;
    transition: transform ease-in 0.3s;
    transition: transform ease-in 0.3s, -webkit-transform ease-in 0.3s;
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper.unfold,
  #home #ref-17 .sticky-item .phones .phone-right .image-wrapper.unfold {
    -webkit-transition: -webkit-transform ease-out 0.4s;
    transition: -webkit-transform ease-out 0.4s;
    transition: transform ease-out 0.4s;
    transition: transform ease-out 0.4s, -webkit-transform ease-out 0.4s;
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper .mask,
  #home #ref-17 .sticky-item .phones .phone-right .image-wrapper .mask {
    position: absolute;
    width: 100%;
    left: 0px;
    top: 50%;
    bottom: 50%;
    overflow: hidden;
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper .mask img,
  #home #ref-17 .sticky-item .phones .phone-right .image-wrapper .mask img {
    position: absolute;
    top: 50%;
    left: 0px;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper .mask.show,
  #home #ref-17 .sticky-item .phones .phone-right .image-wrapper .mask.show {
    -webkit-animation: phone-mask-show 0.5s ease 0s 1 normal forwards;
            animation: phone-mask-show 0.5s ease 0s 1 normal forwards;
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper .mask.reverse,
  #home #ref-17 .sticky-item .phones .phone-right .image-wrapper .mask.reverse {
    -webkit-animation: phone-mask-show-reverse 0.5s ease 0s 1 normal forwards;
            animation: phone-mask-show-reverse 0.5s ease 0s 1 normal forwards;
  }
  #home #ref-17 .sticky-item .phones .phone-left {
    right: 371px;
    position: absolute;
    z-index: 2;
    width: 218px;
    height: 455px;
    top: 0;
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
    will-change: transform;
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper.unfold {
    -webkit-transform: translateX(229px) translateY(0px);
            transform: translateX(229px) translateY(0px);
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper.zoom-in {
    -webkit-transform: translateX(0) scale(4.4) translateY(0px);
            transform: translateX(0) scale(4.4) translateY(0px);
    -webkit-transition: -webkit-transform ease-out 0.5s;
    transition: -webkit-transform ease-out 0.5s;
    transition: transform ease-out 0.5s;
    transition: transform ease-out 0.5s, -webkit-transform ease-out 0.5s;
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper.zoom-out {
    -webkit-transform: translateX(0) scale(1.65) translateY(0px);
            transform: translateX(0) scale(1.65) translateY(0px);
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper.zoom-out-move {
    -webkit-transform: translateX(336px) scale(1.65) translateY(0px);
            transform: translateX(336px) scale(1.65) translateY(0px);
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper.zoom-out-move-up {
    -webkit-transform: translateX(336px) scale(1.65) translateY(-80px);
            transform: translateX(336px) scale(1.65) translateY(-80px);
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper {
    width: 100%;
    height: 100%;
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper .phones-wrapper {
    -webkit-transform-origin: 50% 0;
            transform-origin: 50% 0;
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper .phones-wrapper .phone-camera {
    position: absolute;
    top: -5.07%;
    left: 17%;
    width: 65.05%;
    height: 6.15%;
    -webkit-transform: rotate(10.8deg);
            transform: rotate(10.8deg);
    -webkit-transition: -webkit-transform ease-out 0.8s;
    transition: -webkit-transform ease-out 0.8s;
    transition: transform ease-out 0.8s;
    transition: transform ease-out 0.8s, -webkit-transform ease-out 0.8s;
    -webkit-transform-origin: 0 100%;
            transform-origin: 0 100%;
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper .phones-wrapper .phone-camera.unfold {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper .phones-wrapper .phone-internal-camera {
    position: absolute;
    top: -5.07%;
    left: 17%;
    width: 65.05%;
    height: 6.15%;
    opacity: 0;
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper .phones-wrapper .phone-body,
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper .phones-wrapper .phone-screen,
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper .phones-wrapper .phone-internal-1,
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper .phones-wrapper .phone-internal-2,
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper .phones-wrapper .phone-screen-dark {
    position: absolute;
    top: 0.7%;
    left: 0;
    width: 100%;
    height: 99%;
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper .phones-wrapper .phone-screen-dark,
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper .phones-wrapper .phone-internal-1,
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper .phones-wrapper .phone-internal-2 {
    opacity: 0;
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper .phones-wrapper .phone-screen {
    width: 98%;
    height: 100%;
    border-radius: 30px;
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper .phones-wrapper .phone-screen-dark {
    background-color: #0c0d0e;
    top: 2%;
    width: 94%;
    left: 3%;
    border-radius: 20px;
    height: 96%;
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper .phones-wrapper .phone-internal-1,
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper .phones-wrapper .phone-internal-2 {
    height: 33%;
    top: 0.7%;
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper .phones-wrapper .phone-cover {
    position: absolute;
    top: 0.7%;
    left: 0;
    height: 3px;
    width: 100%;
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper .phones-wrapper .finger {
    width: 100%;
    position: absolute;
    bottom: 30px;
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper .phones-wrapper .finger div {
    position: absolute;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    bottom: 0px;
    width: 30px;
    height: 30px;
  }
  #home #ref-17 .sticky-item .phones .phone-right {
    position: absolute;
    z-index: 1;
    right: 375px;
    width: 211px;
    bottom: 0;
  }
  #home #ref-17 .sticky-item .phones .phone-right .image-wrapper.unfold {
    -webkit-transform: translateX(375px);
            transform: translateX(375px);
  }
  #home #ref-17 .sticky-item .phones .phone-name {
    position: absolute;
    bottom: -37px;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    opacity: 0;
    width: 100%;
    font-size: 14px;
    line-height: 20px;
    text-align: center;
  }
  #home #ref-17 .scroll-content {
    width: 100%;
  }
  #home #ref-17 .scroll-content .content.first {
    margin-top: 1200px;
    margin-left: 0;
    width: 490px;
  }
  #home #ref-17 .scroll-content .content.second {
    margin-top: 3000px;
    margin-left: 0;
    width: 450px;
  }
  #home #ref-17 .scroll-content .content.third {
    margin-top: 73px;
    margin-left: 0;
    width: 450px;
  }
  #home #ref-17 .scroll-content .content.third .progress-wrapper {
    width: 70%;
  }
  #home #ref-17 .scroll-content .content.third .progress-wrapper > div:nth-child(1) {
    width: 85%;
    margin-right: 0;
  }
  #home #ref-17 .scroll-content .content.third .progress-wrapper > div:nth-child(2) {
    width: 100%;
  }
}
.enter-fade {
  opacity: 0;
}
.fade-in {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards;
}
.fade-out {
  opacity: 1;
  -webkit-animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
          animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
}
.fade-up {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
}
@-webkit-keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@-webkit-keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@-webkit-keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@-webkit-keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@-webkit-keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
.g-title,
.g-title-lg,
.g-title-md,
.g-title-sm,
.g-parameter-name,
#home .section .content .title,
#home .section .content .title.lg,
#home .section .panel .title,
.g-play-button,
.g-parameter .item .name,
.g-stack .content .scroll-content .introduce-wrapper .introduce {
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 600;
  font-size: 34px;
  line-height: 50px;
  color: #333;
}
.g-title-md,
.g-parameter-name,
#home .section .content .title,
.g-parameter .item .name,
.g-stack .content .scroll-content .introduce-wrapper .introduce {
  font-size: 24px;
  line-height: 45px;
}
.g-title-sm {
  font-size: 22px;
  line-height: 40px;
  color: #333;
}
.g-text,
.g-parameter-value,
#home .progress-wrapper .name,
#home .section .content .label,
#home .section .content .description,
#home .section .panel .description,
.g-link-button,
.g-parameter .item .value {
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
  color: #666;
}
.g-parameter-name,
.g-parameter .item .name {
  font-size: 24px;
  line-height: 40px;
}
.g-parameter-value,
.g-parameter .item .value {
  font-size: 13px;
  line-height: 18px;
}
@media screen and (min-width: 568px) {
  .g-title-lg,
  #home .section .content .title.lg {
    font-size: 40px;
    line-height: 64px;
  }
  .g-title-md,
  .g-parameter-name,
  #home .section .content .title,
  .g-parameter .item .name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 36px;
    line-height: 60px;
  }
  .g-title-sm {
    font-size: 24px;
    line-height: 45px;
  }
  .g-text,
  .g-parameter-value,
  #home .progress-wrapper .name,
  #home .section .content .label,
  #home .section .content .description,
  #home .section .panel .description,
  .g-link-button,
  .g-parameter .item .value {
    font-size: 16px;
    line-height: 27px;
  }
  .g-parameter-name,
  .g-parameter .item .name {
    font-size: 32px;
    font-weight: 400;
    line-height: 45px;
  }
  .g-parameter-value,
  .g-parameter .item .value {
    font-size: 16px;
    line-height: 22px;
  }
}
@media screen and (min-width: 1024px) {
  .g-title-lg,
  #home .section .content .title.lg {
    font-size: 40px;
    line-height: 66px;
  }
  .g-title-md,
  .g-parameter-name,
  #home .section .content .title,
  .g-parameter .item .name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 36px;
    line-height: 60px;
  }
  .g-title-sm {
    font-size: 24px;
    line-height: 45px;
  }
  .g-text,
  .g-parameter-value,
  #home .progress-wrapper .name,
  #home .section .content .label,
  #home .section .content .description,
  #home .section .panel .description,
  .g-link-button,
  .g-parameter .item .value {
    font-size: 18px;
    line-height: 32px;
  }
  .g-parameter-name,
  .g-parameter .item .name {
    font-size: 32px;
    font-weight: 400;
    line-height: 56px;
  }
  .g-parameter-value,
  .g-parameter .item .value {
    font-size: 14px;
    line-height: 25px;
  }
}
@media screen and (min-width: 1920px) {
  .g-title-lg,
  #home .section .content .title.lg {
    font-size: 58px;
    line-height: 78px;
  }
  .g-title-md,
  .g-parameter-name,
  #home .section .content .title,
  .g-parameter .item .name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 54px;
    line-height: 74px;
  }
  .g-title-sm {
    font-size: 22px;
    line-height: 40px;
  }
  .g-text,
  .g-parameter-value,
  #home .progress-wrapper .name,
  #home .section .content .label,
  #home .section .content .description,
  #home .section .panel .description,
  .g-link-button,
  .g-parameter .item .value {
    font-size: 18px;
    line-height: 32px;
  }
  .g-parameter-name,
  .g-parameter .item .name {
    font-size: 40px;
    line-height: 56px;
  }
  .g-parameter-value,
  .g-parameter .item .value {
    font-size: 18px;
    line-height: 25px;
  }
}
@media screen and (min-width: 1920px) {
  #home #ref-28 {
    padding-bottom: 210px;
  }
  #home #ref-28 .link-module {
    width: 390px;
    height: 390px;
    margin-bottom: 15px;
    border-radius: 15px;
    font-size: 19px;
    line-height: 680px;
  }
  #home #ref-28 .link-module a {
    font-size: 19px;
    line-height: 680px;
  }
  #home #ref-28 .link-module:nth-child(3),
  #home #ref-28 .link-module:nth-child(6) {
    margin-right: 0px;
  }
  #home #ref-28 .link-module:nth-child(1),
  #home #ref-28 .link-module:nth-child(2),
  #home #ref-28 .link-module:nth-child(4),
  #home #ref-28 .link-module:nth-child(5) {
    margin-right: 15px;
  }
  #home #ref-5 {
    margin-top: 300px;
  }
  #home #ref-5 .d-wrapper {
    padding-top: calc(100vh - 1037px);
  }
  #home #ref-5 .d-wrapper .sticky-item {
    right: 0px;
  }
  #home #ref-5 .d-wrapper .sticky-item.fixed {
    right: calc((100% - 1200px) / 2);
  }
  #home #ref-5 .d-wrapper .sticky-item .phone-wrapper {
    width: 574px;
    height: 1037px;
  }
  #home #ref-5 .d-wrapper .scroll-content .section:nth-child(2) {
    padding-bottom: 380px;
  }
  #home #ref-7 .extra .image-wrapper div {
    height: 760px;
  }
  #home #ref-8 {
    width: 1200px;
  }
  #home #ref-8 .right {
    margin-left: 360px;
  }
  #home #ref-8 .mobile-phone {
    display: none;
  }
  #home #banner-4 .image-wrapper,
  #home #banner-1 .image-wrapper,
  #home #banner-2 .image-wrapper,
  #home #banner-5 .image-wrapper {
    height: 675px;
  }
  #home #banner-5 {
    height: 675px;
  }
  #home #banner-5 .image-wrapper {
    right: 134px;
    width: 440px;
    height: 579px;
  }
  #home #banner-5 .banner-title-groups {
    position: absolute;
    top: 175px;
    left: 158px;
  }
  #home #banner-5 .status {
    position: absolute;
    top: 175px;
    left: 130px;
  }
  #home #ref-10 .container.circle-wave-container {
    margin-top: 0;
    padding-bottom: 50px;
  }
  #home #ref-10 .container.circle-wave-container .circle-wave {
    height: 28vw;
    -webkit-perspective: 1000px;
            perspective: 1000px;
    -webkit-transform: rotateX(47deg);
            transform: rotateX(47deg);
  }
  #home #ref-10 .container.circle-wave-container .circle-wave .circle.left.first,
  #home #ref-10 .container.circle-wave-container .circle-wave .circle.left.second,
  #home #ref-10 .container.circle-wave-container .circle-wave .circle.left.third {
    -webkit-animation-name: circle-waving-left-pc;
            animation-name: circle-waving-left-pc;
  }
  #home #ref-10 .container.circle-wave-container .circle-wave .circle.right.first,
  #home #ref-10 .container.circle-wave-container .circle-wave .circle.right.second,
  #home #ref-10 .container.circle-wave-container .circle-wave .circle.right.third {
    -webkit-animation-name: circle-waving-right-pc;
            animation-name: circle-waving-right-pc;
  }
@-webkit-keyframes circle-waving-left-pc {
    0% {
      top: 22vw;
      left: 5vw;
      width: 0;
      height: 0;
      border-color: rgba(255,255,255,0.5);
    }
    100% {
      top: 12vw;
      left: -5vw;
      width: 20vw;
      height: 20vw;
      border-color: rgba(255,255,255,0);
    }
}
@keyframes circle-waving-left-pc {
    0% {
      top: 22vw;
      left: 5vw;
      width: 0;
      height: 0;
      border-color: rgba(255,255,255,0.5);
    }
    100% {
      top: 12vw;
      left: -5vw;
      width: 20vw;
      height: 20vw;
      border-color: rgba(255,255,255,0);
    }
}
@-webkit-keyframes circle-waving-right-pc {
    0% {
      top: 22vw;
      right: 5vw;
      width: 0;
      height: 0;
      border-color: rgba(255,255,255,0.5);
    }
    100% {
      top: 12vw;
      right: -5vw;
      width: 20vw;
      height: 20vw;
      border-color: rgba(255,255,255,0);
    }
}
@keyframes circle-waving-right-pc {
    0% {
      top: 22vw;
      right: 5vw;
      width: 0;
      height: 0;
      border-color: rgba(255,255,255,0.5);
    }
    100% {
      top: 12vw;
      right: -5vw;
      width: 20vw;
      height: 20vw;
      border-color: rgba(255,255,255,0);
    }
}
  #home #ref-10 .phone {
    top: -450px;
    width: 1400px;
    height: 284px;
  }
  #home #ref-23 {
    padding-top: 160px;
    padding-bottom: 100px;
    margin-top: 200px;
  }
  #home #ref-23 #ref-13 {
    margin-top: 0;
    padding: 0;
  }
  #home #ref-23 #ref-14 {
    padding: 0;
  }
  #home #ref-23 .ref-23-wrapper {
    width: 1200px;
    margin: auto;
  }
  #home #ref-23 .ref-23-wrapper .panel {
    margin-bottom: 59px;
  }
  #home #ref-17 .scroll-content {
    width: 100%;
  }
  #home #ref-17 .scroll-content .content.first {
    margin-top: 1200px;
  }
  #home #ref-17 .scroll-content .content.second {
    margin-top: 2800px;
  }
  #home #ref-17 .sticky-item {
    top: 450px;
    width: 1200px;
    padding-bottom: 78px;
  }
  #home #ref-17 .sticky-item .phones .phones-wrapper {
    height: 625px;
  }
  #home #ref-17 .sticky-item .phones .phone-left {
    right: 450px;
    width: 299px;
    height: 625px;
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper.unfold {
    -webkit-transform: translateX(250px) translateY(0px);
            transform: translateX(250px) translateY(0px);
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper.zoom-in {
    -webkit-transform: translateX(0) scale(4.4) translateY(0px);
            transform: translateX(0) scale(4.4) translateY(0px);
    -webkit-transition: -webkit-transform ease-out 0.5s;
    transition: -webkit-transform ease-out 0.5s;
    transition: transform ease-out 0.5s;
    transition: transform ease-out 0.5s, -webkit-transform ease-out 0.5s;
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper.zoom-out {
    -webkit-transform: translateX(0) scale(1.65) translateY(0px);
            transform: translateX(0) scale(1.65) translateY(0px);
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper.zoom-out-move {
    -webkit-transform: translateX(380px) scale(1.65) translateY(0px);
            transform: translateX(380px) scale(1.65) translateY(0px);
  }
  #home #ref-17 .sticky-item .phones .phone-left .image-wrapper.zoom-out-move-up {
    -webkit-transform: translateX(380px) scale(1.65) translateY(-200px);
            transform: translateX(380px) scale(1.65) translateY(-200px);
  }
  #home #ref-17 .sticky-item .phones .phone-right {
    right: 455px;
    width: 290px;
  }
  #home #ref-17 .sticky-item .phones .phone-right .image-wrapper.unfold {
    -webkit-transform: translateX(455px);
            transform: translateX(455px);
  }
}
.video-mask {
  z-index: 10;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  -webkit-transform: translateY(150vh);
          transform: translateY(150vh);
  background-color: #000;
}
.video-mask.show {
  -webkit-animation: video-show 1s ease 0s 1 normal forwards;
          animation: video-show 1s ease 0s 1 normal forwards;
}
.video-mask.fold {
  -webkit-animation: video-fold 1s ease 0s 1 normal forwards;
          animation: video-fold 1s ease 0s 1 normal forwards;
}
.video-mask .video-wrapper {
  width: 100%;
  margin-top: 90px;
  height: calc(100% - 90px);
}
.video-mask .video-wrapper video {
  width: 100%;
  height: 100%;
}
.video-mask .close {
  position: absolute;
  right: 10px;
  top: 55px;
  width: 30px;
  color: #fff;
}
.video-mask .close img {
  width: 100%;
  height: auto;
}
@-webkit-keyframes video-show {
  from {
    -webkit-transform: translateY(150vh);
            transform: translateY(150vh);
  }
  to {
    -webkit-transform: translateY(0vh);
            transform: translateY(0vh);
  }
}
@keyframes video-show {
  from {
    -webkit-transform: translateY(150vh);
            transform: translateY(150vh);
  }
  to {
    -webkit-transform: translateY(0vh);
            transform: translateY(0vh);
  }
}
@-webkit-keyframes video-fold {
  from {
    -webkit-transform: translateY(0vh);
            transform: translateY(0vh);
  }
  to {
    -webkit-transform: translateY(150vh);
            transform: translateY(150vh);
  }
}
@keyframes video-fold {
  from {
    -webkit-transform: translateY(0vh);
            transform: translateY(0vh);
  }
  to {
    -webkit-transform: translateY(150vh);
            transform: translateY(150vh);
  }
}
.enter-fade {
  opacity: 0;
}
.fade-in {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards;
}
.fade-out {
  opacity: 1;
  -webkit-animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
          animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
}
.fade-up {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
}
@-webkit-keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@-webkit-keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@-webkit-keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@-webkit-keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@-webkit-keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
.g-title,
.g-title-lg,
.g-title-md,
.g-title-sm,
.g-parameter-name,
#home .section .content .title,
#home .section .content .title.lg,
#home .section .panel .title,
.g-play-button,
.g-parameter .item .name,
.g-stack .content .scroll-content .introduce-wrapper .introduce {
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 600;
  font-size: 34px;
  line-height: 50px;
  color: #333;
}
.g-title-md,
.g-parameter-name,
#home .section .content .title,
.g-parameter .item .name,
.g-stack .content .scroll-content .introduce-wrapper .introduce {
  font-size: 24px;
  line-height: 45px;
}
.g-title-sm {
  font-size: 22px;
  line-height: 40px;
  color: #333;
}
.g-text,
.g-parameter-value,
#home .progress-wrapper .name,
#home .section .content .label,
#home .section .content .description,
#home .section .panel .description,
.g-link-button,
.g-parameter .item .value {
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
  color: #666;
}
.g-parameter-name,
.g-parameter .item .name {
  font-size: 24px;
  line-height: 40px;
}
.g-parameter-value,
.g-parameter .item .value {
  font-size: 13px;
  line-height: 18px;
}
@media screen and (min-width: 568px) {
  .g-title-lg,
  #home .section .content .title.lg {
    font-size: 40px;
    line-height: 64px;
  }
  .g-title-md,
  .g-parameter-name,
  #home .section .content .title,
  .g-parameter .item .name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 36px;
    line-height: 60px;
  }
  .g-title-sm {
    font-size: 24px;
    line-height: 45px;
  }
  .g-text,
  .g-parameter-value,
  #home .progress-wrapper .name,
  #home .section .content .label,
  #home .section .content .description,
  #home .section .panel .description,
  .g-link-button,
  .g-parameter .item .value {
    font-size: 16px;
    line-height: 27px;
  }
  .g-parameter-name,
  .g-parameter .item .name {
    font-size: 32px;
    font-weight: 400;
    line-height: 45px;
  }
  .g-parameter-value,
  .g-parameter .item .value {
    font-size: 16px;
    line-height: 22px;
  }
}
@media screen and (min-width: 1024px) {
  .g-title-lg,
  #home .section .content .title.lg {
    font-size: 40px;
    line-height: 66px;
  }
  .g-title-md,
  .g-parameter-name,
  #home .section .content .title,
  .g-parameter .item .name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 36px;
    line-height: 60px;
  }
  .g-title-sm {
    font-size: 24px;
    line-height: 45px;
  }
  .g-text,
  .g-parameter-value,
  #home .progress-wrapper .name,
  #home .section .content .label,
  #home .section .content .description,
  #home .section .panel .description,
  .g-link-button,
  .g-parameter .item .value {
    font-size: 18px;
    line-height: 32px;
  }
  .g-parameter-name,
  .g-parameter .item .name {
    font-size: 32px;
    font-weight: 400;
    line-height: 56px;
  }
  .g-parameter-value,
  .g-parameter .item .value {
    font-size: 14px;
    line-height: 25px;
  }
}
@media screen and (min-width: 1920px) {
  .g-title-lg,
  #home .section .content .title.lg {
    font-size: 58px;
    line-height: 78px;
  }
  .g-title-md,
  .g-parameter-name,
  #home .section .content .title,
  .g-parameter .item .name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 54px;
    line-height: 74px;
  }
  .g-title-sm {
    font-size: 22px;
    line-height: 40px;
  }
  .g-text,
  .g-parameter-value,
  #home .progress-wrapper .name,
  #home .section .content .label,
  #home .section .content .description,
  #home .section .panel .description,
  .g-link-button,
  .g-parameter .item .value {
    font-size: 18px;
    line-height: 32px;
  }
  .g-parameter-name,
  .g-parameter .item .name {
    font-size: 40px;
    line-height: 56px;
  }
  .g-parameter-value,
  .g-parameter .item .value {
    font-size: 18px;
    line-height: 25px;
  }
}
#home .progress-wrapper {
  padding-top: 30px;
}
#home .progress-wrapper .name {
  margin-bottom: 12px;
  font-size: 16px;
  line-height: 27px;
  font-weight: 400;
  letter-spacing: 0.71px;
  color: #738dd8;
}
#home .first-screen {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #fff;
  overflow: hidden;
  will-change: transform;
}
#home .second-screen {
  background-color: #fff;
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
}
#home .section {
  overflow: initial;
}
@media screen and (max-width: 567px) {
  #home .section .content {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #home .section .content {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #home .section .content {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #home .section .content {
    width: 1200px;
    margin: auto;
  }
}
@media screen and (max-width: 567px) {
  #home .section .content {
    padding-top: 90px;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #home .section .content {
    padding-top: 140px;
  }
}
@media screen and (min-width: 1024px) {
  #home .section .content {
    padding-top: 210px;
  }
}
@media screen and (min-width: 1920px) {
  #home .section .content {
    padding-top: 230px;
  }
}
#home .section .content .label {
  margin-bottom: 13px;
  width: 138px;
  border-radius: 4px;
  font-size: 14px;
  line-height: 20px;
  height: 28px;
  text-align: center;
  background-color: #fff;
  color: #000;
}
#home .section .content .label.green {
  color: #fff;
  background-color: #738dd8;
}
#home .section .content .label.black {
  color: #fff;
  background-color: #000;
}
#home .section .content .description {
  margin-top: 21px;
}
#home .section .content .extra {
  margin-top: 46px;
}
#home .section .content .g-parameter {
  margin-top: 30px;
}
#home .section .content .g-play-button {
  margin-top: 40px;
}
#home .section .content .g-link-button {
  margin-top: 30px;
}
#home .section .content.bg-black .title {
  color: #fff;
}
#home .section .content.bg-black .description {
  color: #fff;
}
#home .section .content.compact .description {
  margin-top: 15px;
}
#home .section .content.normal .description {
  margin-top: 20px;
}
#home .section .content.spacious .desciption {
  margin-top: 28px;
}
#home .section .panel {
  padding: 36px 25px 45px 25px;
  margin: auto;
  margin-bottom: 24px;
  border-radius: 10px;
  background-color: #fafafa;
}
#home .section .panel .image-wrapper {
  margin: auto;
  width: 64px;
  height: 64px;
}
#home .section .panel .image-wrapper .logo {
  width: 100%;
  height: 100%;
}
#home .section .panel .title {
  font-size: 18px;
  line-height: 18px;
  margin-top: 20px;
  text-align: center;
}
#home .section .panel .description {
  font-size: 14px;
  line-height: 24px;
  margin-top: 20px;
  text-align: center;
}
#home .section .panel .g-link-button {
  margin-top: 30px;
  text-align: center;
}
@media screen and (min-width: 568px) {
  #home .progress-wrapper .name {
    margin-bottom: 20px;
  }
  #home .progress-wrapper #name1 {
    margin-top: -20px;
  }
  #home .section .content .label {
    width: 207px;
    height: 46px;
    line-height: 36px;
    font-size: 20px;
    margin-bottom: 27px;
  }
  #home .section .content .description {
    max-width: 850px;
    margin-top: 30px;
  }
  #home .section .content .g-play-button {
    margin-top: 94px;
  }
  #home .section .content .g-parameter {
    margin-top: 40px;
  }
  #home .section .panel {
    padding: 80px 85px 0 85px;
    height: 550px;
  }
  #home .section .panel .image-wrapper {
    width: 100px;
    height: 100px;
  }
  #home .section .panel .title {
    font-size: 30px;
    line-height: 30px;
    margin-top: 30px;
  }
  #home .section .panel .description {
    font-size: 16px;
    line-height: 24px;
    margin-top: 35px;
  }
}
@media screen and (min-width: 1024px) and (max-width: 567px) {
  #ref-17 {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 1024px) and (min-width: 568px) and (max-width: 1023px) {
  #ref-17 {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) and (min-width: 1024px) {
  #ref-17 {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1024px) and (min-width: 1920px) {
  #ref-17 {
    width: 1200px;
    margin: auto;
  }
}
.enter-fade {
  opacity: 0;
}
.fade-in {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards;
}
.fade-out {
  opacity: 1;
  -webkit-animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
          animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
}
.fade-up {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
}
@-webkit-keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@-webkit-keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@-webkit-keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@-webkit-keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@-webkit-keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
.g-banner {
  position: relative;
}
.g-banner .banner-title-groups .banner-title {
  cursor: pointer;
}
.g-banner .status {
  margin: auto;
  margin-top: 20px;
  text-align: center;
}
.g-banner .status .bar {
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  margin-right: 10px;
  display: inline-block;
  background-color: rgba(115,141,216,0.2);
  width: 24px;
  height: 4px;
  border-radius: 2px;
  overflow: hidden;
}
.g-banner .status .bar:last-child {
  margin-right: 0px;
}
.g-banner .status .bar .inner-bar {
  width: 24px;
  -webkit-transform: translateX(-24px);
          transform: translateX(-24px);
  height: 100%;
  background-color: #738dd8;
}
.g-banner .status .bar .inner-bar.progressing {
  -webkit-animation: status-progress 3.5s linear 0s 1 normal forwards;
          animation: status-progress 3.5s linear 0s 1 normal forwards;
}
.g-banner .button-group .left {
  position: absolute;
  width: 53px;
  height: 53px;
  top: calc(50% - 25px);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  left: -120px;
  cursor: pointer;
}
.g-banner .button-group .left img {
  display: block;
  width: 100%;
  height: auto;
}
.g-banner .button-group .left img.hover {
  display: none;
}
.g-banner .button-group .left:hover img {
  display: none;
}
.g-banner .button-group .left:hover img.hover {
  display: block;
}
.g-banner .button-group .right {
  position: absolute;
  width: 53px;
  height: 53px;
  top: calc(50% - 25px);
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  right: -120px;
  cursor: pointer;
}
.g-banner .button-group .right img {
  display: block;
  width: 100%;
  height: auto;
}
.g-banner .button-group .right img.hover {
  display: none;
}
.g-banner .button-group .right:hover img {
  display: none;
}
.g-banner .button-group .right:hover img.hover {
  display: block;
}
.g-banner .image-wrapper {
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  position: relative;
  height: 106.7vw;
  border-radius: 10px;
  overflow: hidden;
}
.g-banner .image-wrapper .border {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.g-banner .image-wrapper .photo {
  display: block;
  position: absolute;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
}
.g-banner .image-wrapper .photo .wrapper {
  background-position: center;
}
.g-banner .image-wrapper .photo.zoom-in .border {
  opacity: 1;
}
.g-banner .image-wrapper .photo:first-child > div {
  opacity: 1;
}
.g-banner .image-wrapper .photo > div {
  display: block;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  opacity: 0;
}
.g-banner .image-wrapper .photo > div .crop {
  display: block;
  position: absolute;
  z-index: 2;
}
.g-banner .image-wrapper .photo > div .border {
  opacity: 0;
  z-index: 3;
  border: 4px solid #66d6d6;
  box-sizing: content-box;
  -webkit-transition: opacity 0.2s linear;
  transition: opacity 0.2s linear;
}
.g-banner .image-wrapper .photo > div .origin {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
@media screen and (max-width: 567px) {
  .g-banner {
    padding: 0 10vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  .g-banner {
    padding: 0 6vw;
  }
  .g-banner .status {
    margin-top: 34px;
  }
  .g-banner .status .bar {
    width: 45px;
    height: 6px;
  }
  .g-banner .status .bar .inner-bar {
    width: 45px;
    -webkit-transform: translateX(-45px);
            transform: translateX(-45px);
  }
  .g-banner .status .bar .inner-bar.progressing {
    -webkit-animation: status-progress-mobile 3.5s linear 0s 1 normal forwards;
            animation: status-progress-mobile 3.5s linear 0s 1 normal forwards;
  }
}
@media screen and (max-width: 1023px) {
  .g-banner .button-group {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  .g-banner {
    width: 960px;
    margin: auto;
  }
  .g-banner .image-wrapper {
    border-radius: 16px;
  }
}
@media screen and (min-width: 1920px) {
  .g-banner {
    width: 1200px;
  }
}
@-webkit-keyframes status-progress {
  from {
    -webkit-transform: translateX(-24px);
            transform: translateX(-24px);
  }
  to {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@keyframes status-progress {
  from {
    -webkit-transform: translateX(-24px);
            transform: translateX(-24px);
  }
  to {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@-webkit-keyframes status-progress-mobile {
  from {
    -webkit-transform: translateX(-45px);
            transform: translateX(-45px);
  }
  to {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@keyframes status-progress-mobile {
  from {
    -webkit-transform: translateX(-45px);
            transform: translateX(-45px);
  }
  to {
    -webkit-transform: translateX(0px);
            transform: translateX(0px);
  }
}
@-webkit-keyframes photo-zoom-in {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(6);
            transform: scale(6);
  }
}
@keyframes photo-zoom-in {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
  to {
    -webkit-transform: scale(6);
            transform: scale(6);
  }
}
.g-title,
.g-title-lg,
.g-title-md,
.g-title-sm,
.g-parameter-name,
.g-play-button,
.g-parameter .item .name,
.g-stack .content .scroll-content .introduce-wrapper .introduce {
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 600;
  font-size: 34px;
  line-height: 50px;
  color: #333;
}
.g-title-md,
.g-parameter-name,
.g-parameter .item .name,
.g-stack .content .scroll-content .introduce-wrapper .introduce {
  font-size: 24px;
  line-height: 45px;
}
.g-title-sm {
  font-size: 22px;
  line-height: 40px;
  color: #333;
}
.g-text,
.g-parameter-value,
.g-link-button,
.g-parameter .item .value {
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
  color: #666;
}
.g-parameter-name,
.g-parameter .item .name {
  font-size: 24px;
  line-height: 40px;
}
.g-parameter-value,
.g-parameter .item .value {
  font-size: 13px;
  line-height: 18px;
}
@media screen and (min-width: 568px) {
  .g-title-lg {
    font-size: 40px;
    line-height: 64px;
  }
  .g-title-md,
  .g-parameter-name,
  .g-parameter .item .name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 36px;
    line-height: 60px;
  }
  .g-title-sm {
    font-size: 24px;
    line-height: 45px;
  }
  .g-text,
  .g-parameter-value,
  .g-link-button,
  .g-parameter .item .value {
    font-size: 16px;
    line-height: 27px;
  }
  .g-parameter-name,
  .g-parameter .item .name {
    font-size: 32px;
    font-weight: 400;
    line-height: 45px;
  }
  .g-parameter-value,
  .g-parameter .item .value {
    font-size: 16px;
    line-height: 22px;
  }
}
@media screen and (min-width: 1024px) {
  .g-title-lg {
    font-size: 40px;
    line-height: 66px;
  }
  .g-title-md,
  .g-parameter-name,
  .g-parameter .item .name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 36px;
    line-height: 60px;
  }
  .g-title-sm {
    font-size: 24px;
    line-height: 45px;
  }
  .g-text,
  .g-parameter-value,
  .g-link-button,
  .g-parameter .item .value {
    font-size: 18px;
    line-height: 32px;
  }
  .g-parameter-name,
  .g-parameter .item .name {
    font-size: 32px;
    font-weight: 400;
    line-height: 56px;
  }
  .g-parameter-value,
  .g-parameter .item .value {
    font-size: 14px;
    line-height: 25px;
  }
}
@media screen and (min-width: 1920px) {
  .g-title-lg {
    font-size: 58px;
    line-height: 78px;
  }
  .g-title-md,
  .g-parameter-name,
  .g-parameter .item .name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 54px;
    line-height: 74px;
  }
  .g-title-sm {
    font-size: 22px;
    line-height: 40px;
  }
  .g-text,
  .g-parameter-value,
  .g-link-button,
  .g-parameter .item .value {
    font-size: 18px;
    line-height: 32px;
  }
  .g-parameter-name,
  .g-parameter .item .name {
    font-size: 40px;
    line-height: 56px;
  }
  .g-parameter-value,
  .g-parameter .item .value {
    font-size: 18px;
    line-height: 25px;
  }
}
.g-close-button {
  position: fixed;
  z-index: 100;
  top: 35px;
  right: 35px;
  -webkit-animation: close-rotate 0.8s ease 0.1s 1 normal forwards;
          animation: close-rotate 0.8s ease 0.1s 1 normal forwards;
  cursor: pointer;
}
.g-close-button img {
  background-color: rgba(0,0,0,0.2);
  border-radius: 50%;
}
.g-play-button {
  font-size: 16px;
  border: 2px solid #fff;
  border-radius: 37.5px;
  height: 62px;
  line-height: 58px;
  width: 275px;
  text-align: center;
  color: #fff;
  cursor: pointer;
}
.g-play-button .play {
  vertical-align: -6px;
  margin-right: 8px;
  width: 24px;
  height: 24px;
}
.g-link-button {
  position: relative;
  font-size: 15px;
  font-weight: 400;
  line-height: 22px;
  margin-bottom: 13px;
  color: #738dd8;
  cursor: pointer;
}
.g-link-button .more {
  width: 18px;
  height: 18px;
  -webkit-transition: opacity linear 0.2s;
  transition: opacity linear 0.2s;
  margin-left: 7px;
  vertical-align: -4px;
}
.link-animation {
  z-index: 11;
  display: none;
  position: fixed;
  border: 1px solid #738dd8;
  width: 18px;
  height: 18px;
  border-radius: 18px;
  -webkit-transition: opacity ease-out 0.5s;
  transition: opacity ease-out 0.5s;
}
.link-animation.no-border {
  border: none;
}
.link-animation.show {
  display: block;
  -webkit-animation: link-animation-mobile 0.8s ease 0.1s 1 normal forwards;
          animation: link-animation-mobile 0.8s ease 0.1s 1 normal forwards;
}
@media screen and (min-width: 568px) {
  .g-play-button {
    width: 350px;
  }
  .g-link-button {
    font-size: 15px;
    font-weight: 400;
    line-height: 28px;
  }
  .g-link-button .more {
    width: 20px;
    height: 20px;
    margin-left: 13px;
  }
  .link-animation {
    width: 20px;
    height: 20px;
    border-radius: 24px;
  }
  .link-animation.show {
    display: block;
    -webkit-animation: link-animation 0.8s ease 0.1s 1 normal forwards;
            animation: link-animation 0.8s ease 0.1s 1 normal forwards;
  }
}
@media screen and (min-width: 1024px) {
  .g-play-button {
    font-size: 20px;
    line-height: 68px;
    height: 72px;
    width: 350px;
  }
  .g-play-button .play {
    vertical-align: -5px;
  }
  .g-link-button {
    font-size: 15px;
    line-height: 33px;
    font-weight: 400;
  }
  .g-link-button .more {
    width: 22px;
    height: 22px;
    margin-left: 13px;
  }
  .link-animation {
    width: 22px;
    height: 22px;
    border-radius: 24px;
  }
  .link-animation.show {
    display: block;
    -webkit-animation: link-animation 0.8s ease 0.1s 1 normal forwards;
            animation: link-animation 0.8s ease 0.1s 1 normal forwards;
  }
}
@media screen and (min-width: 1920px) {
  .g-link-button {
    font-size: 24px;
    line-height: 37px;
    font-weight: 400;
  }
  .g-link-button .more {
    width: 26px;
    height: 26px;
    margin-left: 13px;
  }
  .link-animation {
    width: 26px;
    height: 26px;
    border-radius: 24px;
  }
  .link-animation.show {
    display: block;
    -webkit-animation: link-animation 0.8s ease 0.1s 1 normal forwards;
            animation: link-animation 0.8s ease 0.1s 1 normal forwards;
  }
}
@-webkit-keyframes link-animation {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    border-width: 1px;
    background-color: rgba(0,0,0,0);
  }
  10% {
    -webkit-transform: scale(10);
            transform: scale(10);
    border-width: 0px;
    background-color: rgba(0,0,0,0);
  }
  100% {
    -webkit-transform: scale(200);
            transform: scale(200);
    border-width: 0px;
    background-color: #000;
  }
}
@keyframes link-animation {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    border-width: 1px;
    background-color: rgba(0,0,0,0);
  }
  10% {
    -webkit-transform: scale(10);
            transform: scale(10);
    border-width: 0px;
    background-color: rgba(0,0,0,0);
  }
  100% {
    -webkit-transform: scale(200);
            transform: scale(200);
    border-width: 0px;
    background-color: #000;
  }
}
@-webkit-keyframes link-animation-mobile {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    border-width: 1px;
    background-color: rgba(0,0,0,0);
  }
  10% {
    -webkit-transform: scale(5);
            transform: scale(5);
    border-width: 0px;
    background-color: rgba(0,0,0,0);
  }
  100% {
    -webkit-transform: scale(100);
            transform: scale(100);
    border-width: 0px;
    background-color: #000;
  }
}
@keyframes link-animation-mobile {
  0% {
    -webkit-transform: scale(1);
            transform: scale(1);
    border-width: 1px;
    background-color: rgba(0,0,0,0);
  }
  10% {
    -webkit-transform: scale(5);
            transform: scale(5);
    border-width: 0px;
    background-color: rgba(0,0,0,0);
  }
  100% {
    -webkit-transform: scale(100);
            transform: scale(100);
    border-width: 0px;
    background-color: #000;
  }
}
@-webkit-keyframes close-rotate {
  from {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes close-rotate {
  from {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
.g-parameter .item {
  margin-bottom: 24px;
  vertical-align: top;
  display: inline-block;
  width: 50%;
}
.g-parameter .item .name {
  text-align: left;
  color: #fff;
}
.g-parameter .item .value {
  margin-top: 3px;
  text-align: left;
  color: #fff;
}
.g-parameter.pure-white .name {
  color: #fff;
}
.g-parameter.bg-white .name {
  color: #738dd8;
}
.g-parameter.bg-white .value {
  color: #666;
}
.g-parameter.vertical .item {
  width: 100%;
}
.g-parameter.pure-gray .name {
  color: #666;
}
.g-parameter.pure-gray .value {
  color: #666;
}
@media screen and (min-width: 1024px) {
  .g-parameter .item .value {
    margin-top: 8px;
  }
  .g-parameter:not(.multi) .item {
    width: 25%;
  }
  .g-parameter:not(.multi).vertical .item {
    width: 25%;
  }
}
.g-title,
.g-title-lg,
.g-title-md,
.g-title-sm,
.g-parameter-name,
.g-stack .content .scroll-content .introduce-wrapper .introduce {
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 600;
  font-size: 34px;
  line-height: 50px;
  color: #333;
}
.g-title-md,
.g-parameter-name,
.g-stack .content .scroll-content .introduce-wrapper .introduce {
  font-size: 24px;
  line-height: 45px;
}
.g-title-sm {
  font-size: 22px;
  line-height: 40px;
  color: #333;
}
.g-text,
.g-parameter-value {
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
  color: #666;
}
.g-parameter-name {
  font-size: 24px;
  line-height: 40px;
}
.g-parameter-value {
  font-size: 13px;
  line-height: 18px;
}
@media screen and (min-width: 568px) {
  .g-title-lg {
    font-size: 40px;
    line-height: 64px;
  }
  .g-title-md,
  .g-parameter-name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 36px;
    line-height: 60px;
  }
  .g-title-sm {
    font-size: 24px;
    line-height: 45px;
  }
  .g-text,
  .g-parameter-value {
    font-size: 16px;
    line-height: 27px;
  }
  .g-parameter-name {
    font-size: 32px;
    font-weight: 400;
    line-height: 45px;
  }
  .g-parameter-value {
    font-size: 16px;
    line-height: 22px;
  }
}
@media screen and (min-width: 1024px) {
  .g-title-lg {
    font-size: 40px;
    line-height: 66px;
  }
  .g-title-md,
  .g-parameter-name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 36px;
    line-height: 60px;
  }
  .g-title-sm {
    font-size: 24px;
    line-height: 45px;
  }
  .g-text,
  .g-parameter-value {
    font-size: 18px;
    line-height: 32px;
  }
  .g-parameter-name {
    font-size: 32px;
    font-weight: 400;
    line-height: 56px;
  }
  .g-parameter-value {
    font-size: 14px;
    line-height: 25px;
  }
}
@media screen and (min-width: 1920px) {
  .g-title-lg {
    font-size: 58px;
    line-height: 78px;
  }
  .g-title-md,
  .g-parameter-name,
  .g-stack .content .scroll-content .introduce-wrapper .introduce {
    font-size: 54px;
    line-height: 74px;
  }
  .g-title-sm {
    font-size: 22px;
    line-height: 40px;
  }
  .g-text,
  .g-parameter-value {
    font-size: 18px;
    line-height: 32px;
  }
  .g-parameter-name {
    font-size: 40px;
    line-height: 56px;
  }
  .g-parameter-value {
    font-size: 18px;
    line-height: 25px;
  }
}
.g-stack {
  position: relative;
}
.g-stack .photos {
  position: absolute;
  z-index: 1;
  top: 90px;
  height: 161.33vw;
  border-radius: 22px;
}
.g-stack .photos .photo {
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  position: absolute;
  border-radius: 22px;
  overflow: hidden;
  opacity: 1;
  -webkit-transition: opacity ease 0.5s, -webkit-transform ease 0.5s;
  transition: opacity ease 0.5s, -webkit-transform ease 0.5s;
  transition: transform ease 0.5s, opacity ease 0.5s;
  transition: transform ease 0.5s, opacity ease 0.5s, -webkit-transform ease 0.5s;
}
.g-stack .photos .photo .image {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
}
.g-stack .photos .photo img:nth-child(1) {
  z-index: 5;
}
.g-stack .photos .photo img:nth-child(2) {
  z-index: 4;
}
.g-stack .photos .photo img:nth-child(3) {
  z-index: 3;
}
.g-stack .photos .photo img:nth-child(4) {
  z-index: 2;
}
.g-stack .photos .photo img:nth-child(5) {
  z-index: 1;
}
.g-stack .photos .photo:nth-child(1) {
  z-index: 3;
}
.g-stack .photos .photo:nth-child(2) {
  z-index: 2;
}
.g-stack .photos .photo:nth-child(3) {
  z-index: 1;
}
.g-stack .photos .photo.photo-0 {
  -webkit-transform: scale(1.05) translateY(30px);
          transform: scale(1.05) translateY(30px);
  will-change: transform;
}
.g-stack .photos .photo.photo-1 {
  -webkit-transform: scale(1) translateY(0px);
          transform: scale(1) translateY(0px);
  will-change: transform;
}
.g-stack .photos .photo.photo-2 {
  -webkit-transform: scale(0.95) translateY(-30px);
          transform: scale(0.95) translateY(-30px);
  will-change: transform;
}
.g-stack .photos .photo.photo-3 {
  -webkit-transform: scale(0.9) translateY(-60px);
          transform: scale(0.9) translateY(-60px);
  will-change: transform;
}
.g-stack .photos .photo.photo-0 {
  opacity: 0;
}
.g-stack .photos .photo.photo-1 {
  box-shadow: 0 8px 26px rgba(0,0,0,0.2);
}
.g-stack .photos .photo.photo-1 .image:nth-child(1) {
  z-index: 5;
}
.g-stack .photos .photo.photo-1 .image:nth-child(2) {
  z-index: 4;
}
.g-stack .photos .photo.photo-1 .image:nth-child(3) {
  z-index: 3;
}
.g-stack .photos .photo.photo-1 .image:nth-child(4) {
  z-index: 2;
}
.g-stack .photos .photo.photo-1 .image:nth-child(5) {
  z-index: 1;
}
.g-stack .content {
  position: relative;
  z-index: 2;
  background-color: transparent;
}
.g-stack .content .scroll-content {
  z-index: 3;
  position: relative;
}
.g-stack .content .scroll-content .introduce-wrapper:first-child {
  box-sizing: content-box;
  padding-top: 166.33vw;
  height: 166.33vw;
  line-height: 0;
}
.g-stack .content .scroll-content .introduce-wrapper {
  padding-left: 14px;
  height: 166.33vw;
  line-height: 166.33vw;
}
.g-stack .content .scroll-content .introduce-wrapper .introduce {
  display: inline-block;
  text-shadow: 0 2px 19px rgba(0,0,0,0.5);
  color: #fff;
  text-align: left;
}
@media screen and (max-width: 567px) {
  #home .g-stack .photos {
    left: 8vw;
    right: 8vw;
  }
  #home .g-stack .content {
    padding: 45px 8vw 0 8vw;
  }
}
@media screen and (min-width: 568px) {
  #home .g-stack {
    margin-top: 120px;
    padding-bottom: 140px;
  }
  #home .g-stack .wrapper {
    padding: 0;
  }
  #home .g-stack .photos {
    right: 6vw;
    width: 35.67vw;
    height: 72vw;
    top: calc((100vh - 70vw) / 2);
  }
  #home .g-stack .photos.fixed {
    right: calc((100% - 88vw) / 2);
  }
  #home .g-stack .content {
    padding-top: calc((100vh - 70vw) / 2);
  }
  #home .g-stack .content .scroll-content .introduce-wrapper:first-child {
    padding-top: 0;
    height: 72vw;
    line-height: 90vw;
  }
  #home .g-stack .content .scroll-content .introduce-wrapper {
    height: 72vw;
    line-height: 90vw;
  }
  #home .g-stack .content .scroll-content .introduce-wrapper .introduce {
    color: #000;
    text-shadow: none;
  }
}
@media screen and (min-width: 1024px) {
  #home .g-stack {
    margin-top: 170px;
    padding-bottom: 160px;
  }
  #home .g-stack .wrapper {
    padding: 0;
  }
  #home .g-stack .photos {
    right: 0;
    width: 343px;
    height: 659px;
    top: calc((100vh - 619px) / 2);
  }
  #home .g-stack .photos.fixed {
    right: calc((100% - 960px) / 2);
  }
  #home .g-stack .content {
    padding-top: calc((100vh - 619px) / 2);
  }
  #home .g-stack .content .scroll-content .introduce-wrapper:first-child {
    padding-top: 0;
    height: 659px;
    line-height: 800px;
  }
  #home .g-stack .content .scroll-content .introduce-wrapper {
    height: 659px;
    line-height: 800px;
  }
  #home .g-stack .content .scroll-content .introduce-wrapper .introduce {
    color: #000;
    text-shadow: none;
  }
}
@media screen and (min-width: 1920px) {
  #home .g-stack .photos {
    width: 571px;
    height: 1152px;
    top: calc((100vh - 1112px) / 2);
  }
  #home .g-stack .photos.fixed {
    right: calc((100% - 1200px) / 2);
  }
  #home .g-stack .photo.photo-0 {
    -webkit-transform: scale(1.05) translateY(60px);
            transform: scale(1.05) translateY(60px);
    will-change: transform;
  }
  #home .g-stack .photo.photo-1 {
    -webkit-transform: scale(1) translateY(0px);
            transform: scale(1) translateY(0px);
    will-change: transform;
  }
  #home .g-stack .photo.photo-2 {
    -webkit-transform: scale(0.95) translateY(-60px);
            transform: scale(0.95) translateY(-60px);
    will-change: transform;
  }
  #home .g-stack .photo.photo-3 {
    -webkit-transform: scale(0.9) translateY(-120px);
            transform: scale(0.9) translateY(-120px);
    will-change: transform;
  }
  #home .g-stack .content {
    padding-top: calc((100vh - 1112px) / 2);
  }
  #home .g-stack .content .scroll-content .introduce-wrapper:first-child {
    padding-top: 0;
    height: 1152px;
    line-height: 1252px;
  }
  #home .g-stack .content .scroll-content .introduce-wrapper {
    height: 1152px;
    line-height: 1252px;
  }
}
.sticky-container {
  position: relative;
}
.sticky-container .sticky-item {
  position: absolute;
}
.sticky-container .sticky-item.fixed {
  position: fixed;
}
.sticky-container .sticky-item.fixed.runaway {
  position: absolute;
  top: auto;
  bottom: 0;
}
.enter-fade {
  opacity: 0;
}
.fade-in {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards;
}
.fade-out {
  opacity: 1;
  -webkit-animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
          animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
}
.fade-up {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
}
@-webkit-keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@-webkit-keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@-webkit-keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@-webkit-keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@-webkit-keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
.g-video-fixed {
  position: relative;
  margin-top: 45px;
  padding-top: 60vh;
}
.g-video-fixed .fixed-wrapper {
  z-index: 2;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
}
.g-video-fixed .fixed-wrapper .video-wrapper {
  z-index: 2;
  -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
  overflow: hidden;
  border-radius: 10px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.g-video-fixed .fixed-wrapper .video-wrapper video,
.g-video-fixed .fixed-wrapper .video-wrapper img {
  position: absolute;
  -o-object-fit: cover;
     object-fit: cover;
  width: 100vw;
  height: 100vh;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}
.g-video-fixed .fixed-wrapper .mask {
  z-index: 3;
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.7);
}
.g-video-fixed .fixed-wrapper .border-top,
.g-video-fixed .fixed-wrapper .border-bottom,
.g-video-fixed .fixed-wrapper .border-left,
.g-video-fixed .fixed-wrapper .border-right {
  z-index: 4;
  position: absolute;
  background-color: #fff;
}
.g-video-fixed .fixed-wrapper .border-top {
  top: 0;
  left: 0;
  right: 0;
  height: 10vw;
  -webkit-transform-origin: 50% 0;
          transform-origin: 50% 0;
}
.g-video-fixed .fixed-wrapper .border-bottom {
  bottom: 0;
  left: 0;
  right: 0;
  height: 10vw;
  -webkit-transform-origin: 50% 100%;
          transform-origin: 50% 100%;
}
.g-video-fixed .fixed-wrapper .border-left {
  left: 0;
  top: 0;
  bottom: 0;
  width: 10vw;
  -webkit-transform-origin: 0 50%;
          transform-origin: 0 50%;
}
.g-video-fixed .fixed-wrapper .border-right {
  right: 0;
  top: 0;
  bottom: 0;
  width: 10vw;
  -webkit-transform-origin: 100% 50%;
          transform-origin: 100% 50%;
}
.g-video-fixed .fixed-wrapper.fixed .video-wrapper {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-animation: border-radius 0.1s ease 0s 1 normal forwards;
          animation: border-radius 0.1s ease 0s 1 normal forwards;
}
.g-video-fixed .fixed-wrapper.fixed .border-top,
.g-video-fixed .fixed-wrapper.fixed .border-bottom {
  display: block;
  -webkit-animation: border-fold-Y 0.5s ease 0s 1 normal forwards;
          animation: border-fold-Y 0.5s ease 0s 1 normal forwards;
}
.g-video-fixed .fixed-wrapper.fixed .border-left,
.g-video-fixed .fixed-wrapper.fixed .border-right {
  display: block;
  -webkit-animation: border-fold-X 0.5s ease 0s 1 normal forwards;
          animation: border-fold-X 0.5s ease 0s 1 normal forwards;
}
.g-video-fixed .fixed-wrapper.fixed .mask {
  opacity: 0;
  -webkit-animation: fade 0.5s linear 0s 1 normal forwards;
          animation: fade 0.5s linear 0s 1 normal forwards;
}
.g-video-fixed .fixed-wrapper.fixed-reverse .video-wrapper {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.g-video-fixed .fixed-wrapper.fixed-reverse .border-top,
.g-video-fixed .fixed-wrapper.fixed-reverse .border-bottom {
  -webkit-animation: border-unfold-Y 0.5s ease 0s 1 normal forwards;
          animation: border-unfold-Y 0.5s ease 0s 1 normal forwards;
}
.g-video-fixed .fixed-wrapper.fixed-reverse .border-left,
.g-video-fixed .fixed-wrapper.fixed-reverse .border-right {
  -webkit-animation: border-unfold-X 0.5s ease 0s 1 normal forwards;
          animation: border-unfold-X 0.5s ease 0s 1 normal forwards;
}
.g-video-fixed .fixed-wrapper.fixed-reverse .mask {
  opacity: 1;
  -webkit-animation: fade-reverse 0.5s linear 0s 1 normal forwards;
          animation: fade-reverse 0.5s linear 0s 1 normal forwards;
}
.g-video-fixed .fixed-wrapper.normal .video-wrapper {
  top: 10vw;
  left: 10vw;
  right: 10vw;
  bottom: 10vw;
  -webkit-animation: border-radius-reverse 0.6s ease 0s 1 normal forwards;
          animation: border-radius-reverse 0.6s ease 0s 1 normal forwards;
}
.g-video-fixed .scroll-content {
  opacity: 0;
  position: relative;
  height: 812px;
  z-index: 4;
  background-color: transparent;
}
@media screen and (min-width: 568px) {
  .g-video-fixed .fixed-wrapper .video-wrapper {
    top: 45px;
    left: 45px;
    right: 45px;
    bottom: 45px;
  }
  .g-video-fixed .fixed-wrapper .border-top {
    height: 45px;
  }
  .g-video-fixed .fixed-wrapper .border-bottom {
    height: 45px;
  }
  .g-video-fixed .fixed-wrapper .border-left {
    width: 45px;
  }
  .g-video-fixed .fixed-wrapper .border-right {
    width: 45px;
  }
  .g-video-fixed .fixed-wrapper.normal .video-wrapper {
    top: 45px;
    left: 45px;
    right: 45px;
    bottom: 45px;
  }
}
@-webkit-keyframes border-fold-Y {
  from {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  to {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
}
@keyframes border-fold-Y {
  from {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
  to {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
}
@-webkit-keyframes border-fold-X {
  from {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  to {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
@keyframes border-fold-X {
  from {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
  to {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
}
@-webkit-keyframes border-unfold-Y {
  from {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  to {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}
@keyframes border-unfold-Y {
  from {
    -webkit-transform: scaleY(0);
            transform: scaleY(0);
  }
  to {
    -webkit-transform: scaleY(1);
            transform: scaleY(1);
  }
}
@-webkit-keyframes border-unfold-X {
  from {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@keyframes border-unfold-X {
  from {
    -webkit-transform: scaleX(0);
            transform: scaleX(0);
  }
  to {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}
@-webkit-keyframes border-radius {
  from {
    border-radius: 10px;
  }
  to {
    border-radius: 0px;
  }
}
@keyframes border-radius {
  from {
    border-radius: 10px;
  }
  to {
    border-radius: 0px;
  }
}
@-webkit-keyframes border-radius-reverse {
  from {
    border-radius: 0px;
  }
  to {
    border-radius: 10px;
  }
}
@keyframes border-radius-reverse {
  from {
    border-radius: 0px;
  }
  to {
    border-radius: 10px;
  }
}
.progress {
  height: 26px;
  width: 0;
  margin-bottom: 14px;
  background: -webkit-gradient(linear, right top, left top, from(#78c8ef), to(#3557b5));
  background: linear-gradient(270deg, #78c8ef 0%, #3557b5 100%);
  border-radius: 2px;
}
.progress.progressing {
  -webkit-animation: light-progressing 1s linear;
          animation: light-progressing 1s linear;
  width: 100%;
}
.progress.dark {
  opacity: 0.2;
  height: 26px;
  margin-bottom: 47px;
}
.progress.dark.progressing {
  -webkit-animation: dark-progressing 1s linear;
          animation: dark-progressing 1s linear;
  width: 79%;
}
@media screen and (max-width: 577px) {
  .progress {
    height: 18px;
  }
  .progress.dark {
    height: 18px;
  }
}
@-webkit-keyframes light-progressing {
  0% {
    width: 0;
  }
  79% {
    width: 79%;
  }
  100% {
    width: 100%;
  }
}
@keyframes light-progressing {
  0% {
    width: 0;
  }
  79% {
    width: 79%;
  }
  100% {
    width: 100%;
  }
}
@-webkit-keyframes dark-progressing {
  0% {
    width: 0;
  }
  79% {
    width: 79%;
  }
  100% {
    width: 79%;
  }
}
@keyframes dark-progressing {
  0% {
    width: 0;
  }
  79% {
    width: 79%;
  }
  100% {
    width: 79%;
  }
}
.circle-wave-container {
  overflow: hidden;
  -webkit-perspective: 700px;
          perspective: 700px;
  -webkit-perspective-origin: 50% 90%;
          perspective-origin: 50% 90%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.circle-wave-container .circle-wave {
  height: 300px;
  -webkit-transform: rotateX(60deg);
          transform: rotateX(60deg);
}
@media screen and (max-width: 567px) {
  .circle-wave-container .circle-wave {
    margin: 0 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  .circle-wave-container .circle-wave {
    margin: 0 6vw;
  }
}
@media screen and (min-width: 1024px) {
  .circle-wave-container .circle-wave {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  .circle-wave-container .circle-wave {
    width: 1200px;
    margin: auto;
  }
}
.circle-wave-container .circle-wave .circle {
  position: absolute;
  border: 2px solid rgba(255,255,255,0.15);
  border-radius: 50%;
  width: 200px;
  height: 200px;
  top: 50px;
}
.circle-wave-container .circle-wave.circle-waving .circle.left.first {
  -webkit-animation: circle-waving-left 2.4s linear infinite;
          animation: circle-waving-left 2.4s linear infinite;
}
.circle-wave-container .circle-wave.circle-waving .circle.left.second {
  -webkit-animation: circle-waving-left 2.4s linear infinite;
          animation: circle-waving-left 2.4s linear infinite;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.circle-wave-container .circle-wave.circle-waving .circle.left.third {
  -webkit-animation: circle-waving-left 2.4s linear infinite;
          animation: circle-waving-left 2.4s linear infinite;
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
.circle-wave-container .circle-wave.circle-waving .circle.right.first {
  -webkit-animation: circle-waving-right 2.4s linear infinite;
          animation: circle-waving-right 2.4s linear infinite;
}
.circle-wave-container .circle-wave.circle-waving .circle.right.second {
  -webkit-animation: circle-waving-right 2.4s linear infinite;
          animation: circle-waving-right 2.4s linear infinite;
  -webkit-animation-delay: 0.8s;
          animation-delay: 0.8s;
}
.circle-wave-container .circle-wave.circle-waving .circle.right.third {
  -webkit-animation: circle-waving-right 2.4s linear infinite;
          animation: circle-waving-right 2.4s linear infinite;
  -webkit-animation-delay: 1.6s;
          animation-delay: 1.6s;
}
@-webkit-keyframes circle-waving-left {
  0% {
    top: 140px;
    left: 0;
    width: 0;
    height: 0;
    border-color: rgba(255,255,255,0.5);
  }
  100% {
    top: 40px;
    left: -100px;
    width: 200px;
    height: 200px;
    border-color: rgba(255,255,255,0);
  }
}
@keyframes circle-waving-left {
  0% {
    top: 140px;
    left: 0;
    width: 0;
    height: 0;
    border-color: rgba(255,255,255,0.5);
  }
  100% {
    top: 40px;
    left: -100px;
    width: 200px;
    height: 200px;
    border-color: rgba(255,255,255,0);
  }
}
@-webkit-keyframes circle-waving-right {
  0% {
    top: 140px;
    right: 0;
    width: 0;
    height: 0;
    border-color: rgba(255,255,255,0.5);
  }
  100% {
    top: 40px;
    right: -100px;
    width: 200px;
    height: 200px;
    border-color: rgba(255,255,255,0);
  }
}
@keyframes circle-waving-right {
  0% {
    top: 140px;
    right: 0;
    width: 0;
    height: 0;
    border-color: rgba(255,255,255,0.5);
  }
  100% {
    top: 40px;
    right: -100px;
    width: 200px;
    height: 200px;
    border-color: rgba(255,255,255,0);
  }
}
@media screen and (min-width: 568px) {
  .circle-wave-container .circle-wave {
    height: 40vw;
    -webkit-perspective: 1000px;
            perspective: 1000px;
  }
  .circle-wave-container .circle-wave .circle {
    top: 5vw;
    width: 20vw;
    height: 20vw;
  }
@-webkit-keyframes circle-waving-left {
    0% {
      top: 20vw;
      left: -15vw;
      width: 0;
      height: 0;
      border-color: rgba(255,255,255,0.5);
    }
    100% {
      top: 1vw;
      left: -40vw;
      width: 40vw;
      height: 40vw;
      border-color: rgba(255,255,255,0);
    }
}
@keyframes circle-waving-left {
    0% {
      top: 20vw;
      left: -15vw;
      width: 0;
      height: 0;
      border-color: rgba(255,255,255,0.5);
    }
    100% {
      top: 1vw;
      left: -40vw;
      width: 40vw;
      height: 40vw;
      border-color: rgba(255,255,255,0);
    }
}
@-webkit-keyframes circle-waving-right {
    0% {
      top: 20vw;
      right: -15vw;
      width: 0;
      height: 0;
      border-color: rgba(255,255,255,0.5);
    }
    100% {
      top: 1vw;
      right: -40vw;
      width: 40vw;
      height: 40vw;
      border-color: rgba(255,255,255,0);
    }
}
@keyframes circle-waving-right {
    0% {
      top: 20vw;
      right: -15vw;
      width: 0;
      height: 0;
      border-color: rgba(255,255,255,0.5);
    }
    100% {
      top: 1vw;
      right: -40vw;
      width: 40vw;
      height: 40vw;
      border-color: rgba(255,255,255,0);
    }
}
}
@media screen and (min-width: 568px) and (max-width: 567px) {
  .wrapper {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (min-width: 568px) and (max-width: 1023px) {
  .wrapper {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 568px) and (min-width: 1024px) {
  .wrapper {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 568px) and (min-width: 1920px) {
  .wrapper {
    width: 1200px;
    margin: auto;
  }
}
@media screen and (min-width: 1024px) and (max-width: 567px) {
  .wrapper {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 1024px) and (min-width: 568px) and (max-width: 1023px) {
  .wrapper {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) and (min-width: 1024px) {
  .wrapper {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1024px) and (min-width: 1920px) {
  .wrapper {
    width: 1200px;
    margin: auto;
  }
}
.g-title,
.g-title-lg,
.g-title-md,
.g-title-sm,
.g-parameter-name {
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 600;
  font-size: 34px;
  line-height: 50px;
  color: #333;
}
.g-title-md,
.g-parameter-name {
  font-size: 24px;
  line-height: 45px;
}
.g-title-sm {
  font-size: 22px;
  line-height: 40px;
  color: #333;
}
.g-text,
.g-parameter-value {
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
  color: #666;
}
.g-parameter-name {
  font-size: 24px;
  line-height: 40px;
}
.g-parameter-value {
  font-size: 13px;
  line-height: 18px;
}
@media screen and (min-width: 568px) {
  .g-title-lg {
    font-size: 40px;
    line-height: 64px;
  }
  .g-title-md,
  .g-parameter-name {
    font-size: 36px;
    line-height: 60px;
  }
  .g-title-sm {
    font-size: 24px;
    line-height: 45px;
  }
  .g-text,
  .g-parameter-value {
    font-size: 16px;
    line-height: 27px;
  }
  .g-parameter-name {
    font-size: 32px;
    font-weight: 400;
    line-height: 45px;
  }
  .g-parameter-value {
    font-size: 16px;
    line-height: 22px;
  }
}
@media screen and (min-width: 1024px) {
  .g-title-lg {
    font-size: 40px;
    line-height: 66px;
  }
  .g-title-md,
  .g-parameter-name {
    font-size: 36px;
    line-height: 60px;
  }
  .g-title-sm {
    font-size: 24px;
    line-height: 45px;
  }
  .g-text,
  .g-parameter-value {
    font-size: 18px;
    line-height: 32px;
  }
  .g-parameter-name {
    font-size: 32px;
    font-weight: 400;
    line-height: 56px;
  }
  .g-parameter-value {
    font-size: 14px;
    line-height: 25px;
  }
}
@media screen and (min-width: 1920px) {
  .g-title-lg {
    font-size: 58px;
    line-height: 78px;
  }
  .g-title-md,
  .g-parameter-name {
    font-size: 54px;
    line-height: 74px;
  }
  .g-title-sm {
    font-size: 22px;
    line-height: 40px;
  }
  .g-text,
  .g-parameter-value {
    font-size: 18px;
    line-height: 32px;
  }
  .g-parameter-name {
    font-size: 40px;
    line-height: 56px;
  }
  .g-parameter-value {
    font-size: 18px;
    line-height: 25px;
  }
}
.of-nav .of-directory dl dd a {
  line-height: normal;
}
.dujiang-wrapper {
  font-size: 16px;
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 300;
  background-color: #fff;
}
.no-scroll {
  overflow-x: hidden;
  overflow-y: hidden;
}
.hide {
  display: none;
}
.clarity {
  opacity: 0;
}
.relative {
  position: relative;
}
* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}
video.inline::-webkit-media-controls-overlay-play-button {
  display: none;
}
.pure-g,
.pure-g [class *= "pure-u"] {
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 300;
}
.background-cover {
  background-size: cover;
}
.page {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-x: hidden;
  overflow-y: scroll;
  z-index: 1;
  -webkit-transition: opacity ease-out 0.2s;
  transition: opacity ease-out 0.2s;
}
#home {
  z-index: 0;
  -webkit-transition: opacity ease-out 0.2s;
  transition: opacity ease-out 0.2s;
}

.enter-fade {
  opacity: 0;
}
.fade-in {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards;
}
.fade-out {
  opacity: 1;
  -webkit-animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
          animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
}
.fade-up {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
}
@-webkit-keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@-webkit-keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@-webkit-keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@-webkit-keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@-webkit-keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
#game {
  color: #fff;
  height: auto;
  background-color: #000;
}
#game .game-first-screen {
  opacity: 0.3;
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
  z-index: -2;
}
#game .scroll-helper {
  position: relative;
  z-index: -1;
  overflow: hidden;
}
@media screen and (max-width: 567px) {
  #game .padding-page {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #game .padding-page {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #game .padding-page {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #game .padding-page {
    width: 1200px;
    margin: auto;
  }
}
#game section {
  margin-bottom: 90px;
}
@media screen and (max-width: 567px) {
  #game section .content {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #game section .content {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #game section .content {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #game section .content {
    width: 1200px;
    margin: auto;
  }
}
#game section .label {
  margin-bottom: 26px;
}
#game section .label span {
  display: inline-block;
  font-size: 14px;
  color: #333;
  line-height: 28px;
  height: 28px;
  background: #fff;
  border-radius: 4px;
  padding: 0 12px;
}
#game section .title {
  font-size: 30px;
  margin: 0 0 21px;
  position: relative;
}
#game section .title h3 {
  margin: 0;
  font-weight: 600;
  font-size: 30px;
  line-height: 40px;
  color: #fff;
}
#game section .intro {
  font-size: 16px;
  line-height: 27px;
  opacity: 0.8;
  margin: 0;
  color: #fff;
}
#game section .video {
  margin: 40px 0;
  width: 100%;
  border-radius: 10px;
}
#game section .head-image {
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  margin: 40px 0;
  width: 100%;
  height: 394px;
  border-radius: 10px;
}
#game section .full-image,
#game section .inner-image {
  background-position: center;
  background-size: 100% auto;
  background-repeat: no-repeat;
  width: 100vw;
  margin: 40px 0;
  height: 450px;
}
@media screen and (max-width: 567px) {
  #game section .inner-image {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #game section .inner-image {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #game section .inner-image {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #game section .inner-image {
    width: 1200px;
    margin: auto;
  }
}
#game section .samples .sample {
  display: -webkit-box;
  display: flex;
  margin-bottom: 24px;
}
#game section .samples .sample .icon {
  display: inline-block;
  width: 64px;
  height: 64px;
  margin: 0 16px 0 7px;
}
#game section .samples .sample .right {
  display: inline-block;
  margin: 0 7px;
}
#game section .samples .sample .right h4 {
  font-size: 28px;
  font-weight: normal;
  line-height: 28px;
  margin: 9px 0 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: start;
          align-items: flex-start;
}
#game section .samples .sample .right p {
  font-size: 13px;
  line-height: 21px;
  font-weight: normal;
  margin: 0;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
}
#game section .samples .sample .right .up {
  color: #738dd8;
}
#game section .samples .sample .right .down {
  color: #ffb100;
}
#game section .samples .sample .right .up:after,
#game section .samples .sample .right .down:after {
  content: '';
  background: url(../images/61b688b.svg) center no-repeat;
  display: inline-block;
  width: 20px;
  height: 20px;
  margin-left: 6px;
  margin-top: -2px;
}
#game section .samples .sample .right .down:after {
  background: url(../images/3f730c5.svg) center no-repeat;
}
#game section .params .param {
  display: inline-block;
  margin-bottom: 28px;
}
#game section .params .param h4 {
  font-size: 30px;
  line-height: 30px;
  margin: 2px 0;
  font-weight: normal;
}
#game section .params .param p {
  font-size: 13px;
  line-height: 18px;
  margin: 0;
  font-weight: normal;
}
#game section .params.pc .param {
  margin-right: 171px;
}
#game section .params.battery {
  margin: 40px 0 0;
}
#game .frame-boost {
  padding-top: 89px;
}
#game .frame-boost .title-wrapper {
  margin-top: 15vh;
  opacity: 1;
}
#game .frame-boost .title-wrapper .title {
  opacity: 0;
  -webkit-transform: translateY(4vh);
          transform: translateY(4vh);
  -webkit-animation: title-show 1.2s ease-in 0.8s 1 normal forwards, title-up 1.2s ease-out 0.8s 1 normal forwards;
          animation: title-show 1.2s ease-in 0.8s 1 normal forwards, title-up 1.2s ease-out 0.8s 1 normal forwards;
}
@-webkit-keyframes title-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes title-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes title-up {
  from {
    -webkit-transform: translateY(4vh);
            transform: translateY(4vh);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes title-up {
  from {
    -webkit-transform: translateY(4vh);
            transform: translateY(4vh);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
#game .frame-boost .title-wrapper .intro {
  opacity: 0;
  -webkit-transform: translateY(4vh);
          transform: translateY(4vh);
  -webkit-animation: intro-show 1.4s ease-in 1.05s 1 normal forwards, intro-up 1.4s ease-out 1.05s 1 normal forwards;
          animation: intro-show 1.4s ease-in 1.05s 1 normal forwards, intro-up 1.4s ease-out 1.05s 1 normal forwards;
}
@-webkit-keyframes intro-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}
@keyframes intro-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}
@-webkit-keyframes intro-up {
  from {
    -webkit-transform: translateY(4vh);
            transform: translateY(4vh);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes intro-up {
  from {
    -webkit-transform: translateY(4vh);
            transform: translateY(4vh);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
#game .frame-boost .video-wrapper {
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
  opacity: 0;
}
#game .dual-link .text,
#game .dual-link-working .text {
  height: 100%;
  -webkit-transition: all 1s;
  transition: all 1s;
}
#game .dual-link .image,
#game .dual-link-working .image {
  position: relative;
  margin: 40px 0;
  height: 100%;
}
#game .dual-link .image img,
#game .dual-link-working .image img {
  width: 100%;
  height: auto;
}
#game .dual-link .image .switcher,
#game .dual-link-working .image .switcher {
  display: inline-block;
  position: absolute;
  right: 11%;
  margin-top: 74.965847%;
  width: 7.5%;
  align-content: right;
  overflow: visible;
}
#game .dual-link .image .switcher .circle,
#game .dual-link-working .image .switcher .circle {
  display: block;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  width: 84%;
  height: 0;
  padding-bottom: 84%;
  background: #fff;
  border-radius: 50%;
}
#game .dual-link .image .switcher .line,
#game .dual-link-working .image .switcher .line {
  display: block;
  position: absolute;
  height: 0;
  width: 142%;
  padding-bottom: 20%;
  top: 0;
  right: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  background: #fff;
  border-radius: 100px;
}
#game .dual-link .image:after,
#game .dual-link-working .image:after {
  position: absolute;
  left: calc(50% - 22.5px);
  top: 0%;
  margin-top: 211.1714%;
  background: url(../images/9a59c0e.jpg) center no-repeat;
  background-size: 45px;
  content: '';
  width: 45px;
  height: 130px;
  opacity: 0;
}
#game .dual-link .image .video,
#game .dual-link-working .image .video {
  position: absolute;
  width: 94%;
  height: auto;
  margin: 4% 3%;
  top: 0;
  left: 0;
  opacity: 0;
  border-radius: 38px;
  background: transparent;
}
#game .dual-link {
  margin-bottom: 190px;
}
#game .dual-link .params .param h4 {
  color: #738dd8;
  font-size: 24px;
}
#game .dual-link-working {
  margin-bottom: 62px;
}
#game .dual-link-working .params .param h4 {
  font-size: 24px;
}
#game .dual-link .image {
  height: auto;
  opacity: 0;
}
#game .dual-link .image .video {
  height: 95.5%;
  background-size: cover;
  background-repeat: no-repeat;
  -webkit-animation: video-visible 2s ease;
          animation: video-visible 2s ease;
  opacity: 1;
}
#game .dual-link .image.up {
  -webkit-animation: phone-up 1s ease;
          animation: phone-up 1s ease;
  top: 0;
  opacity: 1;
}
#game .dual-link .image.open-button .circle {
  -webkit-animation: switcher-circle 0.5s ease-out;
          animation: switcher-circle 0.5s ease-out;
  right: 0;
}
#game .dual-link .image.open-button .line {
  -webkit-animation: switcher-line 0.5s ease-out;
          animation: switcher-line 0.5s ease-out;
  background: #2ad181;
}
#game .dual-link .image.charging:after {
  -webkit-animation: charger-up 0.5s ease-in;
          animation: charger-up 0.5s ease-in;
  opacity: 1;
}
#game .game-shock {
  margin-bottom: 10px;
  position: relative;
}
#game .game-shock .mask {
  width: 100%;
  height: 20vw;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(#000));
  background: linear-gradient(to bottom, rgba(0,0,0,0), #000);
  position: absolute;
  bottom: 30px;
}
#game .game-sound {
  margin-bottom: -130px;
}
#game .game-sound .container .circle-wave {
  margin-top: 20px;
  -webkit-transform: rotateX(0);
          transform: rotateX(0);
}
#game .game-sound .container .circle-wave .circle {
  -webkit-transform: rotate3d(0, 1, 0, 30deg);
          transform: rotate3d(0, 1, 0, 30deg);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
#game .game-sound .container .circle-wave .circle.right {
  -webkit-transform: rotate3d(0, 1, 0, -30deg);
          transform: rotate3d(0, 1, 0, -30deg);
}
#game .game-sound .phone-mobile {
  position: relative;
  top: -235px;
  width: 80vw;
  height: 40vw;
  left: 10vw;
  background-position: top;
  background-size: 100% auto, cover;
  background-repeat: no-repeat;
}
#game .game-space {
  margin-top: 15vw;
  margin-bottom: 0;
}
@media screen and (max-width: 567px) {
  #game .game-space {
    padding-left: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #game .game-space {
    padding-left: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #game .game-space {
    padding-left: calc((100% - 960px) / 2);
  }
}
@media screen and (min-width: 1920px) {
  #game .game-space {
    padding-left: calc((100% - 1200px) / 2);
  }
}
#game .game-space .text {
  position: relative;
  opacity: 0;
  -webkit-transform: translateY(80px);
          transform: translateY(80px);
  -webkit-transition: opacity 2s;
  transition: opacity 2s;
}
@media screen and (max-width: 567px) {
  #game .game-space .text {
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #game .game-space .text {
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #game .game-space .text {
    padding-right: calc((100% - 960px) / 2);
  }
}
@media screen and (min-width: 1920px) {
  #game .game-space .text {
    padding-right: calc((100% - 1200px) / 2);
  }
}
#game .game-space .text .intro {
  width: 100%;
}
#game .game-space .phone-wrapper {
  height: 364px;
  opacity: 0;
  -webkit-transition: all 1.5s;
  transition: all 1.5s;
}
#game .game-space .phone-wrapper .phone {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 40px 0;
  -webkit-transition: opacity 0.5s;
  transition: opacity 0.5s;
  background-position: left;
  background-size: auto 100%, cover;
  background-repeat: no-repeat;
}
#game .game-space .phone-wrapper .panel {
  -webkit-animation: slideRight 0.5s linear;
          animation: slideRight 0.5s linear;
  position: relative;
  top: calc(-70.5vw - 45px);
  left: 36vw;
  width: 30vw;
  height: auto;
  opacity: 1;
  display: none;
  -webkit-transition: all 0.5s;
  transition: all 0.5s;
}
@-webkit-keyframes slideRight {
  0% {
    width: 0;
    height: auto;
  }
  100% {
    width: 30vw;
    height: auto;
  }
}
@keyframes slideRight {
  0% {
    width: 0;
    height: auto;
  }
  100% {
    width: 30vw;
    height: auto;
  }
}
#game .game-space .pc-tips {
  padding: 50px;
  position: relative;
  top: 200px;
  background-position-y: -50px;
  background-repeat: no-repeat;
  background-size: 400% 200%;
}
#game .game-space .pc-tips .panel-tips {
  position: relative;
  left: 120px;
}
#game .hyper-boost {
  background-position: top;
  background-repeat: no-repeat;
  background-size: cover;
  margin-bottom: 90px;
  padding-top: 90px;
}
#game .hyper-boost section {
  margin-bottom: 0;
}
#game .hyper-boost section .title {
  font-size: 30px;
  line-height: 40px;
  margin-bottom: 50px;
}
@media screen and (max-width: 567px) {
  #game .hyper-boost section .title {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #game .hyper-boost section .title {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #game .hyper-boost section .title {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #game .hyper-boost section .title {
    width: 1200px;
    margin: auto;
  }
}
#game .hyper-boost section .collections {
  padding: 2vw;
  margin: 0 auto;
}
#game .hyper-boost section .collections .collection {
  text-align: center;
  margin-bottom: 40px;
}
#game .hyper-boost section .collections .collection .icon {
  width: 56px;
  height: 56px;
  margin-bottom: 16px;
}
#game .hyper-boost section .collections .collection p {
  width: 100%;
  font-size: 14px;
  line-height: 14px;
  line-height: 1.5;
  margin: 0;
}
@-webkit-keyframes phone-up {
  0% {
    opacity: 0;
    top: 10px;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}
@keyframes phone-up {
  0% {
    opacity: 0;
    top: 10px;
  }
  100% {
    opacity: 1;
    top: 0;
  }
}
@-webkit-keyframes switcher-circle {
  0% {
    right: 100%;
  }
  100% {
    right: 0%;
  }
}
@keyframes switcher-circle {
  0% {
    right: 100%;
  }
  100% {
    right: 0%;
  }
}
@-webkit-keyframes switcher-line {
  0% {
    background: #fff;
  }
  100% {
    background: #2ad181;
  }
}
@keyframes switcher-line {
  0% {
    background: #fff;
  }
  100% {
    background: #2ad181;
  }
}
@-webkit-keyframes charger-up {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20%);
            transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes charger-up {
  0% {
    opacity: 0;
    -webkit-transform: translateY(20%);
            transform: translateY(20%);
  }
  100% {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@-webkit-keyframes video-visible {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes video-visible {
  0% {
    opacity: 0;
  }
  25% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@media screen and (min-width: 568px) {
  #game section {
    margin-bottom: 140px;
  }
  #game section .text {
    padding-top: 38px;
  }
  #game section .title h3 {
    font-size: 40px;
    line-height: 60px;
  }
  #game section .label {
    margin-bottom: 27px;
  }
  #game section .label span {
    font-size: 16px;
    line-height: 26px;
    height: 36px;
    border-radius: 8px;
  }
  #game section .intro {
    width: calc(100% - 110px);
  }
  #game section .samples .sample .right {
    padding-right: 3vw;
  }
  #game section .params .param h4 {
    font-size: 40px;
    line-height: 60px;
  }
  #game .frame-boost {
    margin-top: 15vh;
  }
  #game .performance .full-image {
    height: 560px;
  }
  #game .performance.pure-hidden-sm {
    height: 560px;
    background-position: center;
    background-position-y: -10vw;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100vw;
    margin-bottom: 0;
  }
  #game .dual-link .text,
  #game .dual-link-working .text {
    margin-top: 300px;
  }
  #game .dual-link .text .intro,
  #game .dual-link-working .text .intro {
    width: 100%;
  }
  #game .dual-link {
    margin-bottom: 0;
    height: 576px;
  }
  #game .dual-link .text {
    width: 50%;
  }
  #game .dual-link .image {
    margin-left: 60px;
    width: calc(50% - 60px);
    height: auto;
  }
  #game .dual-link .image:after {
    left: calc(50% - 22.5px);
  }
  #game .dual-link .image.down {
    -webkit-animation: phone-down 2s ease;
            animation: phone-down 2s ease;
    top: 65vw;
  }
@-webkit-keyframes phone-down {
    0% {
      top: 14vw;
    }
    100% {
      top: 65vw;
    }
}
@keyframes phone-down {
    0% {
      top: 14vw;
    }
    100% {
      top: 65vw;
    }
}
  #game .dual-link-working {
    margin-bottom: 1040px;
  }
  #game .game-shock .video {
    margin: 60px 20% 0;
    width: 60%;
    border-radius: 10px;
  }
  #game .game-sound {
    margin-bottom: -280px;
  }
  #game .game-sound .container.circle-wave-container {
    margin-top: 0;
    padding-bottom: 50px;
  }
  #game .game-sound .container.circle-wave-container .circle-wave {
    height: 38vw;
    -webkit-perspective: 1000px;
            perspective: 1000px;
  }
  #game .game-sound .container.circle-wave-container .circle-wave .circle.left.first,
  #game .game-sound .container.circle-wave-container .circle-wave .circle.left.second,
  #game .game-sound .container.circle-wave-container .circle-wave .circle.left.third {
    -webkit-animation-name: circle-waving-left-game;
            animation-name: circle-waving-left-game;
  }
  #game .game-sound .container.circle-wave-container .circle-wave .circle.right.first,
  #game .game-sound .container.circle-wave-container .circle-wave .circle.right.second,
  #game .game-sound .container.circle-wave-container .circle-wave .circle.right.third {
    -webkit-animation-name: circle-waving-right-game;
            animation-name: circle-waving-right-game;
  }
@-webkit-keyframes circle-waving-left-game {
    0% {
      top: 20vw;
      left: 10vw;
      width: 0;
      height: 0;
      border-color: rgba(255,255,255,0.5);
    }
    100% {
      top: 0;
      left: -15vw;
      width: 40vw;
      height: 40vw;
      border-color: rgba(255,255,255,0);
    }
}
@keyframes circle-waving-left-game {
    0% {
      top: 20vw;
      left: 10vw;
      width: 0;
      height: 0;
      border-color: rgba(255,255,255,0.5);
    }
    100% {
      top: 0;
      left: -15vw;
      width: 40vw;
      height: 40vw;
      border-color: rgba(255,255,255,0);
    }
}
@-webkit-keyframes circle-waving-right-game {
    0% {
      top: 20vw;
      right: 10vw;
      width: 0;
      height: 0;
      border-color: rgba(255,255,255,0.5);
    }
    100% {
      top: 0;
      right: -15vw;
      width: 40vw;
      height: 40vw;
      border-color: rgba(255,255,255,0);
    }
}
@keyframes circle-waving-right-game {
    0% {
      top: 20vw;
      right: 10vw;
      width: 0;
      height: 0;
      border-color: rgba(255,255,255,0.5);
    }
    100% {
      top: 0;
      right: -15vw;
      width: 40vw;
      height: 40vw;
      border-color: rgba(255,255,255,0);
    }
}
  #game .game-sound .phone-pc {
    top: -45vw;
    position: relative;
    height: 560px;
    background-position: top;
    background-size: 100% auto, cover;
    background-repeat: no-repeat;
  }
  #game .game-space {
    height: 364px;
    margin-bottom: 130px;
  }
  #game .game-space .text {
    width: calc(50% - 25px);
    margin-right: 25px;
    padding-right: 0;
  }
  #game .game-space .phone-wrapper {
    height: 364px;
  }
  #game .game-space .phone-wrapper .phone {
    height: 364px;
    width: calc(100% - 25px);
    margin-left: 25px;
  }
  #game .game-space .phone-wrapper .panel {
    width: 140px;
    top: -387px;
    left: calc(28% + 40px);
  }
@-webkit-keyframes slideRight {
    0% {
      width: 0;
      height: auto;
    }
    100% {
      width: 140px;
      height: auto;
    }
}
@keyframes slideRight {
    0% {
      width: 0;
      height: auto;
    }
    100% {
      width: 140px;
      height: auto;
    }
}
  #game .game-space-bottom {
    margin-bottom: 130px;
  }
  #game .hyper-boost section .title {
    margin-bottom: 90px;
  }
  #game .hyper-boost section .collections {
    padding: 0 0.5vw;
  }
  #game .hyper-boost section .collections .collection {
    margin-bottom: 100px;
  }
}
@media screen and (min-width: 568px) and (max-width: 567px) {
  .phone-pc {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (min-width: 568px) and (max-width: 1023px) {
  .phone-pc {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 568px) and (min-width: 1024px) {
  .phone-pc {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 568px) and (min-width: 1920px) {
  .phone-pc {
    width: 1200px;
    margin: auto;
  }
}
@media screen and (min-width: 1024px) {
  #game section .intro {
    font-size: 18px;
    line-height: 32px;
  }
  #game section .head-image {
    height: 540px;
  }
  #game .dual-link .text,
  #game .dual-link-working .text {
    margin-right: 60px;
    width: calc(50% - 60px);
  }
  #game .game-shock .full-image {
    height: 867px;
  }
  #game .game-sound .phone-pc {
    top: -38vw;
  }
  #game .game-space .phone-wrapper .phone {
    height: 455px;
  }
  #game .hyper-boost section .collections {
    padding: 0 8vw;
  }
}
@media screen and (min-width: 1920px) {
  #game section {
    margin-bottom: 180px;
  }
  #game section .label {
    margin-bottom: 27px;
  }
  #game section .label span {
    font-size: 16px;
    line-height: 36px;
    height: 36px;
    border-radius: 8px;
  }
  #game section .title h3 {
    font-size: 54px;
    line-height: 74px;
  }
  #game .game-shock {
    margin-top: 800px;
    padding-top: 15vw;
  }
  #game .game-sound .phone-pc {
    top: -20vw;
  }
  #game .game-space {
    height: 759px;
  }
  #game .game-space .text {
    width: calc(40% - 25px);
  }
  #game .game-space .text .intro {
    width: 450px;
  }
  #game .game-space .phone-wrapper .phone {
    height: 759px;
  }
  #game .hyper-boost section .collections {
    padding: 0 24vw;
  }
}
@-webkit-keyframes body-init {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.3;
  }
}
@keyframes body-init {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.3;
  }
}
@-webkit-keyframes title-init-top {
  0% {
    margin-top: 24vh;
  }
  100% {
    margin-top: 20vh;
  }
}
@keyframes title-init-top {
  0% {
    margin-top: 24vh;
  }
  100% {
    margin-top: 20vh;
  }
}
@-webkit-keyframes title-init-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes title-init-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.sticky-container {
  position: relative;
}
.sticky-container .sticky-item {
  position: absolute;
}
.sticky-container .sticky-item.fixed {
  position: fixed;
}
.sticky-container .sticky-item.fixed.runaway {
  position: absolute;
  top: auto;
  bottom: 0;
}
.enter-fade {
  opacity: 0;
}
.fade-in {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards;
}
.fade-out {
  opacity: 1;
  -webkit-animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
          animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
}
.fade-up {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
}
@-webkit-keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@-webkit-keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@-webkit-keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@-webkit-keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@-webkit-keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
#camera .c-banner-title,
#camera .banner-title {
  color: #fff;
}
#camera .c-detail-title,
#camera .detail-title,
#camera .light-content-left-title,
#camera .camera-mode-a-cotent-left-title,
#camera .detail-a-title,
#camera .detail-b-title,
#camera .detail-c-title,
#camera .detail-d-title,
#camera .detail-e-title,
#camera .detail-f-title {
  color: #fff;
}
#camera .c-text,
#camera .detail-text,
#camera .banner-text,
#camera .light-content-left-text,
#camera .camera-mode-a-cotent-left-text,
#camera .detail-a-text,
#camera .detail-b-text,
#camera .detail-c-text,
#camera .detail-d-text,
#camera .detail-e-text,
#camera .detail-f-text,
#camera .detail-g-text {
  color: #fff;
}
#camera .camera-content-width {
  margin: 0 auto;
}
#camera .camera-content-height {
  height: auto;
  position: relative;
  top: 24vw;
}
#camera .detail-title,
#camera .detail-a-title,
#camera .detail-b-title,
#camera .detail-c-title,
#camera .detail-d-title,
#camera .detail-e-title,
#camera .detail-f-title,
#camera .light-content-left-title,
#camera .camera-mode-a-cotent-left-title {
  width: auto;
  margin-bottom: 5.600000000000001vw;
}
#camera .detail-text,
#camera .detail-a-text,
#camera .detail-b-text,
#camera .detail-c-text,
#camera .detail-d-text,
#camera .detail-e-text,
#camera .detail-f-text,
#camera .detail-g-text,
#camera .light-content-left-text {
  margin-bottom: 40px;
}
#camera .detail-img,
#camera .detail-a-img,
#camera .detail-b-img,
#camera .detail-c-img,
#camera .detail-e-img,
#camera .detail-f-img {
  border-radius: 10px;
  margin-bottom: 90px;
}
#camera .banner-title {
  width: auto;
  margin-bottom: 30px;
}
#camera .nav-b {
  display: none;
  background-color: #edf2f2;
  width: 100vw;
  height: 60px;
}
#camera .light-content-left {
  padding-top: 0px;
}
#camera .light-content-left-title {
  margin-bottom: vw2vh(21);
  margin-bottom: 5.600000000000001vw;
}
#camera .light-content-left-text {
  margin-bottom: 10.666666666666668vw;
}
#camera .light-content-right-point {
  height: 1.066666666666667vw;
  background-color: #fff;
  margin: 0 auto;
  padding-top: 5.866666666666666vw;
}
#camera .camera-mode-a-cotent-left {
  height: auto;
}
#camera .camera-mode-a-cotent-left-title {
  margin-bottom: 8vw;
}
#camera {
  margin: 0 auto;
  background-color: #000;
  overflow-x: hidden;
  color: #fff;
}
#camera img {
  width: 100%;
}
#camera .camera-image {
  width: 100%;
  height: 393px;
  border-radius: 10px;
  background-size: cover;
  background-repeat: no-repeat;
  margin-top: 40px;
}
#camera .video {
  width: 100%;
  border-radius: 10px;
}
@media screen and (max-width: 567px) {
  #camera .video {
    height: 250px;
  }
}
#camera .banner {
  height: 100vh;
  width: auto;
  position: relative;
}
#camera .camera-first-screen {
  opacity: 0.3;
  width: 100%;
  height: 100%;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: fixed;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
  z-index: 1;
}
#camera .scroll-helper {
  position: relative;
  overflow: hidden;
  z-index: 2;
}
#camera .banner-content {
  padding-top: 50vw;
  position: relative;
  opacity: 1;
}
@media screen and (max-width: 567px) {
  #camera .banner-content {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #camera .banner-content {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #camera .banner-content {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #camera .banner-content {
    width: 1200px;
    margin: auto;
  }
}
#camera .banner-content .content {
  opacity: 1;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}
#camera .banner-content .banner-title {
  opacity: 0;
  -webkit-transform: translateY(4vh);
          transform: translateY(4vh);
  -webkit-animation: title-show 1.2s ease-in 0.8s 1 normal forwards, title-up 1.2s ease-out 0.8s 1 normal forwards;
          animation: title-show 1.2s ease-in 0.8s 1 normal forwards, title-up 1.2s ease-out 0.8s 1 normal forwards;
  margin-bottom: 0;
}
@-webkit-keyframes title-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes title-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes title-up {
  from {
    -webkit-transform: translateY(4vh);
            transform: translateY(4vh);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes title-up {
  from {
    -webkit-transform: translateY(4vh);
            transform: translateY(4vh);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
#camera .banner-content .banner-text {
  opacity: 0;
  -webkit-transform: translateY(4vh);
          transform: translateY(4vh);
  -webkit-animation: intro-show 1.4s ease-in 1.05s 1 normal forwards, intro-up 1.4s ease-out 1.05s 1 normal forwards;
          animation: intro-show 1.4s ease-in 1.05s 1 normal forwards, intro-up 1.4s ease-out 1.05s 1 normal forwards;
  margin-top: 30px;
  margin-bottom: 40px;
}
@-webkit-keyframes intro-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}
@keyframes intro-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}
@-webkit-keyframes intro-up {
  from {
    -webkit-transform: translateY(4vh);
            transform: translateY(4vh);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes intro-up {
  from {
    -webkit-transform: translateY(4vh);
            transform: translateY(4vh);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
#camera .banner-content .labels {
  opacity: 0;
  -webkit-transition: opacity 1s;
  transition: opacity 1s;
}
#camera #light-focus .image-wrapper {
  height: 121.73vw;
}
#camera .labels {
  margin-bottom: 24px;
}
#camera .labels .label {
  display: inline-block;
  margin-bottom: 28px;
}
#camera .labels .label .title {
  margin: 0;
  font-size: 28px;
  line-height: 40px;
  margin-bottom: 2px;
}
#camera .labels .label .subtitle {
  margin: 0;
  font-size: 14px;
  line-height: 18px;
  font-weight: normal;
}
#camera .icons-wrapper {
  margin-top: 30px;
  -webkit-transform: translateY(-6px);
          transform: translateY(-6px);
}
#camera .icons-wrapper .icons {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
}
#camera .icons-wrapper .icons .icon-wrapper {
  width: 33%;
  display: inline-block;
  text-align: center;
}
#camera .icons-wrapper .icons .icon-wrapper .icon {
  width: 35px;
  height: 35px;
  margin: 5px;
}
#camera .icons-wrapper .icons .icon-wrapper p {
  margin: 2px 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 600;
}
#camera .camera-mode-a-cotent-left-title,
#camera .camera-mode-a-cotent-left-text {
  text-shadow: 3px 2px 2px rgba(0,0,0,0.35);
}
#camera .detail-a,
#camera .detail-b,
#camera .detail-c,
#camera .detail-d,
#camera .detail-e,
#camera .detail-f {
  width: 100vw;
}
@media screen and (max-width: 567px) {
  #camera .light {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #camera .light {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #camera .light {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #camera .light {
    width: 1200px;
    margin: auto;
  }
}
#camera .light-content-right-banner {
  width: 100%;
  height: auto;
}
#camera #night-view {
  padding: 0;
  margin: 40px 0 0;
}
@media screen and (max-width: 567px) {
  #camera #three-focus {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #camera #three-focus {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #camera #three-focus {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #camera #three-focus {
    width: 1200px;
    margin: auto;
  }
}
#camera .camera-mode-a,
#camera .camera-mode-b,
#camera .camera-mode-c {
  background-size: 100% 100%, cover;
  background-repeat: no-repeat;
  width: 100vw;
  height: auto;
}
#camera .detail-a-content,
#camera .detail-b-content,
#camera .detail-c-content,
#camera .detail-d-content,
#camera .detail-e-content,
#camera .detail-f-content,
#camera .light {
  padding-top: 90px;
}
@media screen and (max-width: 567px) {
  #camera .detail-a-content,
  #camera .detail-b-content,
  #camera .detail-c-content,
  #camera .detail-d-content,
  #camera .detail-e-content,
  #camera .detail-f-content,
  #camera .light {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #camera .detail-a-content,
  #camera .detail-b-content,
  #camera .detail-c-content,
  #camera .detail-d-content,
  #camera .detail-e-content,
  #camera .detail-f-content,
  #camera .light {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #camera .detail-a-content,
  #camera .detail-b-content,
  #camera .detail-c-content,
  #camera .detail-d-content,
  #camera .detail-e-content,
  #camera .detail-f-content,
  #camera .light {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #camera .detail-a-content,
  #camera .detail-b-content,
  #camera .detail-c-content,
  #camera .detail-d-content,
  #camera .detail-e-content,
  #camera .detail-f-content,
  #camera .light {
    width: 1200px;
    margin: auto;
  }
}
#camera .detail-a-title,
#camera .detail-b-title,
#camera .detail-c-title,
#camera .detail-d-title,
#camera .detail-e-title,
#camera .detail-f-title,
#camera .light-content-left-title,
#camera .camera-mode-a-cotent-left-title {
  margin-bottom: 0;
}
#camera .detail-a-text,
#camera .detail-b-text,
#camera .detail-c-text,
#camera .detail-d-text,
#camera .detail-e-text,
#camera .detail-f-text,
#camera .detail-g-text,
#camera .light-content-left-text {
  margin-top: 30px;
}
#camera .detail-f-text {
  margin-top: 40px;
}
#camera .detail-a-img {
  background-size: cover;
}
#camera .detail-b-img {
  background-size: cover;
}
#camera .detail-c-img {
  background-size: cover;
}
#camera .detail-d-img {
  background-position: top left;
  background-repeat: no-repeat;
  background-size: 150% auto;
  width: 100%;
  height: 393px;
  border-radius: 10px;
}
#camera .detail-d-img.scaled {
  -webkit-animation: scale 1s ease;
          animation: scale 1s ease;
  background-position: center;
  background-size: 110% auto, cover;
}
#camera .detail-e-img {
  background-size: cover;
}
#camera .detail-f-img {
  background-size: cover;
}
#camera .camera-mode-a-cotent-left-text {
  margin-top: 21px;
}
#camera .camera-content {
  padding-top: 90px;
  width: 100%;
}
@media screen and (max-width: 567px) {
  #camera .camera-content {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #camera .camera-content {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #camera .camera-content {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #camera .camera-content {
    width: 1200px;
    margin: auto;
  }
}
#camera .camera-content .image {
  width: 100%;
  height: 99vw;
  border-radius: 10px;
  background-size: 100%, cover;
  background-repeat: no-repeat;
  margin-top: 40px;
}
#camera .camera-content .phone {
  position: relative;
  width: 100%;
  height: auto;
}
#camera .camera-content .phone:before {
  position: absolute;
  top: 49px;
  left: 0;
  content: '';
  display: inline-block;
  background-size: calc(100% - 16px);
  width: 100%;
  height: 100%;
}
#camera .camera-mode-a-right-phone-shell,
#camera .camera-mode-b-right-phone-shell,
#camera .camera-mode-c-right-phone-shell {
  position: relative;
  margin: 49px 0 90px;
  padding: 5px 8px 8px;
  width: 100%;
  background-size: 100%;
}
#camera .gallery {
  margin-bottom: 90px;
  width: 100%;
  height: auto;
}
#camera .img-gallery {
  width: 100%;
  height: 440px;
  overflow: hidden;
  position: relative;
  margin-top: 30px;
}
#camera .img-content-a {
  width: 440vw;
  height: 173px;
  margin-bottom: 15px;
  position: absolute;
  top: 0px;
  left: 0vw;
  -webkit-animation: mymove-mobile-back 20s linear infinite;
          animation: mymove-mobile-back 20s linear infinite;
}
#camera .img-content-b {
  width: 440vw;
  height: 173px;
  margin-bottom: 15px;
  position: absolute;
  left: 0vw;
  top: 185px;
  -webkit-animation: mymove-mobile 24s linear infinite;
          animation: mymove-mobile 24s linear infinite;
}
#camera .img-content-aa {
  position: absolute;
  left: -440vw;
}
#camera .img-content-bb {
  position: absolute;
  left: -440vw;
}
#camera .img-content-a2,
#camera .img-content-a1,
#camera .img-content-a3,
#camera .img-content-b1,
#camera .img-content-b2,
#camera .img-content-b3 {
  width: 86vw;
  height: 173px;
  margin-right: 2vw;
  border-radius: 5px;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  display: inline-block;
  background-color: #345;
}
#camera .mode-pc {
  width: 100%;
}
@media screen and (max-width: 567px) {
  #camera .mode-pc {
    margin-top: 100px;
  }
}
#camera .mode-pc .bg {
  -webkit-transition: all 0.5s ease-in-out;
  transition: all 0.5s ease-in-out;
  width: 100%;
  top: 0;
  height: 100vh;
  z-index: -1;
}
@media screen and (max-width: 567px) {
  #camera .mode-pc .bg {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #camera .mode-pc .bg {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #camera .mode-pc .bg {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #camera .mode-pc .bg {
    width: 1200px;
    margin: auto;
  }
}
@media screen and (max-width: 567px) {
  #camera .mode-pc .bg {
    padding: 0 5vw;
  }
}
@media screen and (max-width: 768px) {
  #camera .mode-pc .bg {
    padding: 0 5vw;
  }
}
#camera .mode-pc .bg .images {
  position: relative;
  width: 100%;
  border-radius: 4%;
  overflow: hidden;
  margin-top: 50vh;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  height: 0;
  padding-bottom: 131%;
}
#camera .mode-pc .bg .images .image {
  position: absolute;
  left: 0;
  height: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
}
#camera .mode-pc .bg .images .image.show {
  opacity: 1;
  -webkit-animation: fade 0.5s ease-in;
          animation: fade 0.5s ease-in;
}
#camera .mode-pc .bg .images .image.not-show {
  opacity: 0;
  -webkit-animation: fade-reverse 0.5s ease-out;
          animation: fade-reverse 0.5s ease-out;
}
#camera .mode-pc .camera-mode {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100vh;
  padding: auto;
}
@media screen and (max-width: 567px) {
  #camera .mode-pc .camera-mode {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #camera .mode-pc .camera-mode {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #camera .mode-pc .camera-mode {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #camera .mode-pc .camera-mode {
    width: 1200px;
    margin: auto;
  }
}
#camera .mode-pc .camera-mode .content {
  position: relative;
  top: 25%;
}
#camera #light-focus .image-wrapper .photo {
  height: 100%;
}
#camera #light-focus .image-wrapper .photo .photo-label-wrapper {
  position: absolute;
  left: 16px;
  height: 34px;
}
#camera #light-focus .image-wrapper .photo .photo-label-wrapper:nth-child(1) {
  top: 50%;
}
#camera #light-focus .image-wrapper .photo .photo-label-wrapper:nth-child(2) {
  top: 100%;
}
#camera #light-focus .image-wrapper .photo .photo-label-wrapper .photo-label {
  border-radius: 6px;
  background-color: rgba(0,0,0,0.4);
  color: #fff;
  margin-top: -50px;
  font-size: 14px;
  width: 64px;
  height: 100%;
  line-height: 34px;
  text-align: center;
}
#camera #light-focus .image-wrapper .photo .photo-label-wrapper .photo-label-wide {
  width: 128px;
}
@-webkit-keyframes body-init {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.3;
  }
}
@keyframes body-init {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 0.3;
  }
}
@-webkit-keyframes title-init-top {
  0% {
    margin-top: 24vh;
  }
  100% {
    margin-top: 20vh;
  }
}
@keyframes title-init-top {
  0% {
    margin-top: 24vh;
  }
  100% {
    margin-top: 20vh;
  }
}
@-webkit-keyframes title-init-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes title-init-opacity {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@-webkit-keyframes scale {
  0% {
    background-size: 150% auto, cover;
  }
  100% {
    background-size: 110% auto, cover;
  }
}
@keyframes scale {
  0% {
    background-size: 150% auto, cover;
  }
  100% {
    background-size: 110% auto, cover;
  }
}
@-webkit-keyframes mymove-mobile {
  from {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
  to {
    -webkit-transform: translateX(440vw);
            transform: translateX(440vw);
  }
}
@keyframes mymove-mobile {
  from {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
  to {
    -webkit-transform: translateX(440vw);
            transform: translateX(440vw);
  }
}
@-webkit-keyframes mymove-mobile-back {
  from {
    -webkit-transform: translateX(440vw);
            transform: translateX(440vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@keyframes mymove-mobile-back {
  from {
    -webkit-transform: translateX(440vw);
            transform: translateX(440vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@media screen and (min-width: 568px) {
  #camera .detail-a-content,
  #camera .detail-b-content,
  #camera .detail-c-content,
  #camera .detail-d-content,
  #camera .detail-e-content,
  #camera .light {
    padding-top: 180px;
  }
  #camera .detail-f-content {
    padding-top: 140px;
  }
  #camera .camera-image {
    height: 336px;
  }
  #camera .c-text,
  #camera .detail-a-text,
  #camera .detail-b-text,
  #camera .detail-c-text,
  #camera .detail-d-text,
  #camera .detail-e-text,
  #camera .detail-f-text,
  #camera .light-content-left-text,
  #camera .camera-mode-a-cotent-left-text {
    font-size: 18px;
    line-height: 1.7;
    color: rgba(255,255,255,0.8);
  }
  #camera .banner-content {
    padding-top: 30vh;
  }
  #camera .detail-a-content,
  #camera .detail-b-content,
  #camera .detail-c-content,
  #camera .detail-d-content,
  #camera .detail-e-content,
  #camera .detail-f-content,
  #camera .light-content {
    position: relative;
  }
  #camera .detail-d-img {
    height: 540px;
  }
  #camera .banner-title,
  #camera .detail-a-title,
  #camera .detail-b-title,
  #camera .detail-c-title,
  #camera .detail-d-title,
  #camera .detail-e-title,
  #camera .detail-f-title,
  #camera .light-content-left-title,
  #camera .camera-mode-a-cotent-left-title {
    color: #fff;
  }
  #camera .detail-f-text,
  #camera .img-gallery {
    margin-top: 70px;
  }
  #camera .detail-a-text,
  #camera .detail-b-text,
  #camera .detail-c-text,
  #camera .detail-d-text,
  #camera .detail-e-text,
  #camera .detail-f-text,
  #camera .light-content-left-text,
  #camera .camera-mode-a-cotent-left-text {
    margin-bottom: 40px;
  }
  #camera .detail-e {
    margin-bottom: 200px;
  }
  #camera #light-focus .image-wrapper,
  #camera #three-focus .image-wrapper {
    height: 540px;
  }
  #camera .photo {
    height: 540px;
  }
  #camera #night-view {
    margin-top: 69px;
  }
  #camera #night-view .image-wrapper {
    height: 540px;
  }
  #camera .labels {
    margin-bottom: 42px;
  }
  #camera .mode-pc .bg {
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  #camera .mode-pc .bg .images {
    padding-bottom: 56.25%;
    border-radius: 16px;
  }
  #camera .mode-pc .camera-mode .content {
    padding: 0 5%;
  }
  #camera .img-gallery {
    height: 575px;
    overflow: hidden;
    position: relative;
    margin-bottom: 212px;
  }
  #camera .img-content-a {
    width: 166.7vw;
    height: 280px;
    margin-bottom: 15px;
    position: absolute;
    top: 0px;
    left: 0vw;
    -webkit-animation: mymove-pc-back 24s linear infinite;
            animation: mymove-pc-back 24s linear infinite;
  }
  #camera .img-content-b {
    width: 166.7vw;
    height: 280px;
    margin-bottom: 15px;
    position: absolute;
    left: 0vw;
    top: 295px;
    -webkit-animation: mymove-pc 30s linear infinite;
            animation: mymove-pc 30s linear infinite;
  }
  #camera .img-content-aa {
    position: absolute;
    left: -166.7vw;
  }
  #camera .img-content-bb {
    position: absolute;
    left: -166.7vw;
  }
  #camera .img-content-a2,
  #camera .img-content-a1,
  #camera .img-content-a3,
  #camera .img-content-b1,
  #camera .img-content-b2,
  #camera .img-content-b3 {
    width: 32vw;
    height: 280px;
    margin-right: 1.33vw;
    border-radius: 5px;
    background-size: cover;
    background-position: center;
    display: inline-block;
    background-color: #345;
  }
  #camera .banner-content .banner-text {
    width: 321px;
  }
  #camera .camera-image {
    height: 336px;
  }
  #camera .detail-f-content {
    padding-top: 180px;
  }
  #camera #light-focus .image-wrapper {
    height: 49.2vw;
  }
  #camera #light-focus .image-wrapper .photo {
    height: 49.2vw;
  }
  #camera #light-focus .image-wrapper .photo .photo-label-wrapper {
    position: absolute;
    bottom: 16px;
    height: 34px;
  }
  #camera #light-focus .image-wrapper .photo .photo-label-wrapper:nth-child(1) {
    top: auto;
    left: 0;
  }
  #camera #light-focus .image-wrapper .photo .photo-label-wrapper:nth-child(2) {
    top: auto;
    left: 50%;
  }
  #camera #light-focus .image-wrapper .photo .photo-label-wrapper .photo-label {
    margin-top: 0px;
    margin-left: 19px;
  }
}
@media screen and (min-width: 1024px) {
  #camera .banner-content .banner-text {
    width: 450px;
  }
  #camera .camera-image {
    height: 480px;
  }
  #camera .detail-f-content {
    padding-top: 180px;
  }
  #camera #light-focus .image-wrapper {
    height: 540px;
  }
  #camera #light-focus .image-wrapper .photo {
    height: 540px;
  }
  #camera #light-focus .image-wrapper .photo .photo-label-wrapper {
    position: absolute;
    bottom: 16px;
    height: 34px;
  }
  #camera #light-focus .image-wrapper .photo .photo-label-wrapper:nth-child(1) {
    top: auto;
    left: 0;
  }
  #camera #light-focus .image-wrapper .photo .photo-label-wrapper:nth-child(2) {
    top: auto;
    left: 50%;
  }
  #camera #light-focus .image-wrapper .photo .photo-label-wrapper .photo-label {
    margin-top: 0px;
    margin-left: 19px;
  }
}
@media screen and (min-width: 1920px) {
  #camera .camera-image {
    height: 600px;
  }
  #camera .img-gallery {
    height: calc(560px * 2 + 30px);
  }
  #camera .img-content-a,
  #camera .img-content-b {
    height: 560px;
    margin-bottom: 30px;
  }
  #camera .img-content-b {
    top: 590px;
  }
  #camera .img-content-a2,
  #camera .img-content-a1,
  #camera .img-content-a3,
  #camera .img-content-b1,
  #camera .img-content-b2,
  #camera .img-content-b3 {
    height: 560px;
  }
  #camera #night-view .image-wrapper,
  #camera #night-view .photo {
    height: 675px;
  }
}
@-webkit-keyframes mymove-pc {
  from {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
  to {
    -webkit-transform: translateX(166.7vw);
            transform: translateX(166.7vw);
  }
}
@keyframes mymove-pc {
  from {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
  to {
    -webkit-transform: translateX(166.7vw);
            transform: translateX(166.7vw);
  }
}
@-webkit-keyframes mymove-pc-back {
  from {
    -webkit-transform: translateX(166.7vw);
            transform: translateX(166.7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@keyframes mymove-pc-back {
  from {
    -webkit-transform: translateX(166.7vw);
            transform: translateX(166.7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}

.enter-fade {
  opacity: 0;
}
.fade-in {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards;
}
.fade-out {
  opacity: 1;
  -webkit-animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
          animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
}
.fade-up {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
}
@-webkit-keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@-webkit-keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@-webkit-keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@-webkit-keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@-webkit-keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
#popup {
  font-size: 16px;
  background: #000;
  color: #fff;
  height: auto;
}
@media screen and (max-width: 567px) {
  #popup .pure-visible-md {
    display: none;
  }
  #popup .pure-visible-lg {
    display: none;
  }
  #popup .pure-visible-sm {
    display: none;
  }
  #popup .pure-hidden-default {
    display: none;
  }
}
@media screen and (max-width: 1023px) {
  #popup .pure-hidden-default-sm {
    display: none;
  }
}
@media screen and (min-width: 568px) {
  #popup .pure-visible-md {
    display: none;
  }
  #popup .pure-visible-lg {
    display: none;
  }
  #popup .pure-visible-default {
    display: none;
  }
  #popup .pure-hidden-sm {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  #popup .pure-visible-sm {
    display: none;
  }
  #popup .pure-visible-lg {
    display: none;
  }
  #popup .pure-visible-default {
    display: none;
  }
  #popup .pure-hidden-md {
    display: none;
  }
}
@media screen and (min-width: 1920px) {
  #popup .pure-visible-sm {
    display: none;
  }
  #popup .pure-visible-md {
    display: none;
  }
  #popup .pure-visible-default {
    display: none;
  }
  #popup .pure-hidden-lg {
    display: none;
  }
}
#popup .g-text {
  color: inherit;
  font-size: 15px;
  line-height: 32px;
}
@media screen and (max-width: 1023px) {
  #popup .g-text {
    font-size: 14px;
    line-height: 27px;
  }
}
#popup .g-title-md {
  color: inherit;
  font-size: 40px;
  line-height: 65px;
}
@media screen and (max-width: 1919px) {
  #popup .g-title-md {
    font-size: 36px;
  }
}
@media screen and (max-width: 1023px) {
  #popup .g-title-md {
    font-size: 34px;
  }
}
@media screen and (max-width: 567px) {
  #popup .g-title-md {
    font-size: 24px;
    line-height: 45px;
  }
}
#popup .image {
  background-size: 100% auto;
  background-repeat: no-repeat;
}
#popup .image img {
  background-size: 100% auto;
  background-repeat: no-repeat;
}
#popup .mobile,
#popup .desktop {
  background: none;
}
@media screen and (max-width: 567px) {
  #popup .content {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #popup .content {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #popup .content {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #popup .content {
    width: 1200px;
    margin: auto;
  }
}
@media screen and (max-width: 567px) {
  #popup .padding-page {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #popup .padding-page {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #popup .padding-page {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #popup .padding-page {
    width: 1200px;
    margin: auto;
  }
}
@media screen and (max-width: 567px) {
  #popup .padding-left {
    padding-left: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #popup .padding-left {
    padding-left: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #popup .padding-left {
    padding-left: calc((100% - 960px) / 2);
  }
}
@media screen and (min-width: 1920px) {
  #popup .padding-left {
    padding-left: calc((100% - 1200px) / 2);
  }
}
#popup .image-container-pc {
  margin-top: 84px;
}
@media screen and (max-width: 567px) {
  #popup .image-container-pc {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #popup .image-container-pc {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #popup .image-container-pc {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #popup .image-container-pc {
    width: 1200px;
    margin: auto;
  }
}
#popup .section-popup {
  overflow: hidden;
  height: 100vh;
}
#popup .section-popup .image {
  margin-top: 0;
  position: absolute;
  z-index: -1;
  width: 100%;
  height: auto;
}
#popup .section-popup .image img {
  width: 100%;
  height: 0;
}
#popup .section-popup .image img.bg-mobile {
  padding-bottom: 216.27%;
}
#popup .section-popup .image img.pc {
  padding-bottom: 200%;
}
#popup .section-popup .image:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.4);
  content: '';
}
#popup .section-popup .content {
  position: relative;
  z-index: 1;
  top: 35%;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
#popup .section-popup .content .title {
  opacity: 0;
  -webkit-transform: translateY(4vh);
          transform: translateY(4vh);
  -webkit-animation: title-show 1.2s ease-in 0.8s 1 normal forwards, title-up 1.2s ease-out 0.8s 1 normal forwards;
          animation: title-show 1.2s ease-in 0.8s 1 normal forwards, title-up 1.2s ease-out 0.8s 1 normal forwards;
}
@-webkit-keyframes title-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes title-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes title-up {
  from {
    -webkit-transform: translateY(4vh);
            transform: translateY(4vh);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes title-up {
  from {
    -webkit-transform: translateY(4vh);
            transform: translateY(4vh);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
#popup .section-popup .content .intro {
  opacity: 0;
  -webkit-transform: translateY(4vh);
          transform: translateY(4vh);
  -webkit-animation: intro-show 1.4s ease-in 1.05s 1 normal forwards, intro-up 1.4s ease-out 1.05s 1 normal forwards;
          animation: intro-show 1.4s ease-in 1.05s 1 normal forwards, intro-up 1.4s ease-out 1.05s 1 normal forwards;
}
@-webkit-keyframes intro-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}
@keyframes intro-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}
@-webkit-keyframes intro-up {
  from {
    -webkit-transform: translateY(4vh);
            transform: translateY(4vh);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes intro-up {
  from {
    -webkit-transform: translateY(4vh);
            transform: translateY(4vh);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
#popup .section-popup .bg {
  position: absolute;
  z-index: 0;
  top: auto;
  bottom: 0;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  width: 152vw;
}
#popup .section-popup .bg > img,
#popup .section-popup .bg .video {
  width: 100%;
  height: auto;
}
#popup .section-structure .structure {
  position: relative;
  overflow: hidden;
  height: 0;
  width: 100%;
  padding-bottom: 114.8036%;
}
#popup .section-structure .structure:before {
  content: '';
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0.1)), to(rgba(0,0,0,0.6)));
  background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.6));
}
#popup .section-structure .structure .tag {
  overflow: visible;
  position: absolute;
  top: 0;
  width: 5.4381%;
}
#popup .section-structure .structure .tag .line-container {
  position: relative;
  widht: 100%;
  height: 0;
}
#popup .section-structure .structure .tag .line-container .line-wrapper {
  position: absolute;
  width: 100%;
  overflow: hidden;
  opacity: 0;
  height: 0%;
}
#popup .section-structure .structure .tag .line-container .line-wrapper .line {
  width: 100%;
}
#popup .section-structure .structure .tag .icon {
  width: 100%;
  height: 0;
  padding-bottom: 100%;
  opacity: 0;
}
#popup .section-structure .structure .tag .text {
  position: absolute;
  top: auto;
  right: 0;
  width: auto;
  margin-top: 0;
  opacity: 0;
}
#popup .section-structure .structure .tag .text.intro {
  font-size: 14px;
}
#popup .section-structure .structure .tag .text p {
  position: relative;
  right: 0;
  text-align: center;
  white-space: nowrap;
  -webkit-margin-before: 0;
          margin-block-start: 0;
}
@media screen and (max-width: 567px) {
  #popup .section-structure .structure .tag .text p {
    font-size: 12px;
  }
}
#popup .section-structure .structure .tag .text p span {
  display: block;
}
#popup .section-structure .structure.fade-in .tag.hearing .line-wrapper {
  -webkit-animation: tag-line-in 0.6s ease-out 0.5s 1 normal forwards;
          animation: tag-line-in 0.6s ease-out 0.5s 1 normal forwards;
}
#popup .section-structure .structure.fade-in .tag.hearing .icon,
#popup .section-structure .structure.fade-in .tag.hearing .text {
  -webkit-animation: fade 0.5s ease-out 1s 1 normal forwards;
          animation: fade 0.5s ease-out 1s 1 normal forwards;
}
#popup .section-structure .structure.fade-in .tag.flashing .line-wrapper {
  -webkit-animation: tag-line-in 0.8s ease-out 0.7s 1 normal forwards;
          animation: tag-line-in 0.8s ease-out 0.7s 1 normal forwards;
}
#popup .section-structure .structure.fade-in .tag.flashing .icon,
#popup .section-structure .structure.fade-in .tag.flashing .text {
  -webkit-animation: fade 0.5s ease-out 1.4s 1 normal forwards;
          animation: fade 0.5s ease-out 1.4s 1 normal forwards;
}
#popup .section-structure .structure.fade-in .tag.front-camera .line-wrapper {
  -webkit-animation: tag-line-in 1s ease-out 1.1s 1 normal forwards;
          animation: tag-line-in 1s ease-out 1.1s 1 normal forwards;
}
#popup .section-structure .structure.fade-in .tag.front-camera .icon,
#popup .section-structure .structure.fade-in .tag.front-camera .text {
  -webkit-animation: fade 0.5s ease-out 2s 1 normal forwards;
          animation: fade 0.5s ease-out 2s 1 normal forwards;
}
@-webkit-keyframes tag-line-in {
  from {
    opacity: 0;
    height: 0%;
  }
  to {
    opacity: 1;
    height: 100%;
  }
}
@keyframes tag-line-in {
  from {
    opacity: 0;
    height: 0%;
  }
  to {
    opacity: 1;
    height: 100%;
  }
}
#popup .section-structure .structure .tag.hearing {
  left: 32.6284%;
}
#popup .section-structure .structure .tag.hearing .line-container,
#popup .section-structure .structure .tag.hearing .line-container .line {
  padding-bottom: 240.4762%;
}
#popup .section-structure .structure .tag.flashing {
  left: 59.5166%;
}
#popup .section-structure .structure .tag.flashing .line-container,
#popup .section-structure .structure .tag.flashing .line-container .line {
  padding-bottom: 805.5556%;
}
#popup .section-structure .structure .tag.front-camera {
  left: 70.3927%;
}
#popup .section-structure .structure .tag.front-camera .line-container,
#popup .section-structure .structure .tag.front-camera .line-container .line {
  padding-bottom: 1220.2222%;
}
#popup .section-durability .title {
  width: 105%;
}
#popup .section-durability .image img {
  width: 100%;
  height: 0;
  padding-bottom: 115%;
}
#popup .section-protection {
  overflow: hidden;
}
#popup .section-protection .bg {
  z-index: -1;
  width: 200%;
}
#popup .section-protection .bg img {
  height: 0;
}
#popup .section-protection .bg img.bg-mobile {
  width: 50%;
  padding-bottom: 48.847249999999995%;
  background-size: cover;
  margin-top: 100px;
}
#popup .section-protection .bg img.pc {
  width: 100%;
  padding-bottom: 63.214%;
  margin-top: -20px;
}
#popup .section-protection .image-container {
  padding-top: 80px;
  padding-left: 12vw;
}
#popup .section-protection .image {
  height: auto;
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}
#popup .section-protection .image img {
  width: 100%;
  height: 0;
}
#popup .section-protection .image.mobile {
  width: 130%;
}
#popup .section-protection .image.mobile img {
  padding-bottom: 20.3774%;
}
#popup .section-protection .image.pc {
  width: 100%;
}
#popup .section-protection .image.pc img {
  padding-bottom: 20.32%;
}
#popup section {
  overflow: hidden;
  width: 100%;
  margin-bottom: 90px;
}
#popup .title {
  margin: 0;
}
#popup .title h3 {
  margin: 0;
}
#popup .intro {
  opacity: 0.8;
  margin-top: 21px;
}
#popup .image {
  width: 100%;
  margin-top: 40px;
}
#popup .image img {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 567px) {
  #popup .section-protection .bg {
    margin-top: -100px;
  }
  #popup .section-structure .structure .tag.hearing {
    width: 12.6888%;
  }
  #popup .section-structure .structure .tag.hearing img.icon {
    width: 42.8571%;
    padding-bottom: 42.8571%;
  }
  #popup .section-structure .structure .tag.hearing .text {
    left: 0;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
}
@media screen and (min-width: 568px) {
  #popup .section-structure .structure {
    padding-bottom: 69.133%;
  }
  #popup .section-structure .structure .tag {
    width: 2.5231%;
  }
  #popup .section-structure .structure .tag .text.intro {
    font-size: 16px;
    left: auto;
    right: 50%;
  }
  #popup .section-structure .structure .tag .text.intro p {
    -webkit-transform: translateX(50%);
            transform: translateX(50%);
  }
  #popup .section-structure .structure .tag.hearing {
    left: 43.2296%;
  }
  #popup .section-structure .structure .tag.hearing .line-container,
  #popup .section-structure .structure .tag.hearing .line-container .line {
    padding-bottom: 833.3333%;
  }
  #popup .section-structure .structure .tag.flashing {
    left: 60.882%;
  }
  #popup .section-structure .structure .tag.flashing .line-container,
  #popup .section-structure .structure .tag.flashing .line-container .line {
    padding-bottom: 966.6667%;
  }
  #popup .section-structure .structure .tag.front-camera {
    left: 71.8251%;
  }
  #popup .section-structure .structure .tag.front-camera .line-container,
  #popup .section-structure .structure .tag.front-camera .line-container .line {
    padding-bottom: 1400%;
  }
  #popup .section-protection .bg {
    width: auto;
  }
  #popup .section-protection .image-container {
    padding-top: 120px;
  }
}
@media screen and (min-width: 1024px) {
  #popup section {
    margin-bottom: 180px;
    margin-top: 0;
  }
  #popup .intro {
    max-width: 850px;
    margin-top: 30px;
  }
  #popup .image {
    margin-top: 60px;
  }
  #popup .section-popup .bg {
    width: 1920px;
    top: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
  }
  #popup .section-popup .bg:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 200%;
    background: -webkit-gradient(linear, left top, left bottom, from(rgba(0,0,0,0)), to(rgba(0,0,0,0.6)));
    background: linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.6));
  }
  #popup .section-durability .image {
    overflow: hidden;
    width: 100%;
    height: 0;
    padding-bottom: 65%;
  }
  #popup .section-protection .bg {
    width: 90%;
    height: auto;
  }
  #popup .image-container-pc {
    margin-top: 160px;
  }
}
@media screen and (min-width: 1920px) {
  #popup .section-protection .bg {
    width: 70%;
  }
  #popup .section-protection .bg img.pc {
    margin-left: 150px;
    margin-top: -90px;
  }
  #popup section {
    margin-bottom: 280px;
  }
}

.enter-fade {
  opacity: 0;
}
.fade-in {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards;
}
.fade-out {
  opacity: 1;
  -webkit-animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
          animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
}
.fade-up {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
}
@-webkit-keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@-webkit-keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@-webkit-keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@-webkit-keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@-webkit-keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
#screen {
  font-size: 16px;
  background: #000;
  color: #fff;
  height: auto;
}
@media screen and (max-width: 567px) {
  #screen .pure-visible-md {
    display: none;
  }
  #screen .pure-visible-lg {
    display: none;
  }
  #screen .pure-visible-sm {
    display: none;
  }
  #screen .pure-hidden-default {
    display: none;
  }
}
@media screen and (max-width: 1023px) {
  #screen .pure-hidden-default-sm {
    display: none;
  }
}
@media screen and (min-width: 568px) {
  #screen .pure-visible-md {
    display: none;
  }
  #screen .pure-visible-lg {
    display: none;
  }
  #screen .pure-visible-default {
    display: none;
  }
  #screen .pure-hidden-sm {
    display: none;
  }
}
@media screen and (min-width: 1024px) {
  #screen .pure-visible-sm {
    display: none;
  }
  #screen .pure-visible-lg {
    display: none;
  }
  #screen .pure-visible-default {
    display: none;
  }
  #screen .pure-hidden-md {
    display: none;
  }
}
@media screen and (min-width: 1920px) {
  #screen .pure-visible-sm {
    display: none;
  }
  #screen .pure-visible-md {
    display: none;
  }
  #screen .pure-visible-default {
    display: none;
  }
  #screen .pure-hidden-lg {
    display: none;
  }
}
#screen img {
  display: block;
}
#screen .g-text {
  color: inherit;
  font-size: 15px;
  line-height: 32px;
}
@media screen and (max-width: 1023px) {
  #screen .g-text {
    font-size: 14px;
    line-height: 27px;
  }
}
#screen .g-title-md {
  color: inherit;
  font-size: 40px;
  line-height: 65px;
}
@media screen and (max-width: 1919px) {
  #screen .g-title-md {
    font-size: 36px;
  }
}
@media screen and (max-width: 1023px) {
  #screen .g-title-md {
    font-size: 34px;
  }
}
@media screen and (max-width: 567px) {
  #screen .g-title-md {
    font-size: 24px;
    line-height: 45px;
  }
}
#screen .background-cover {
  background-size: cover;
}
@media screen and (max-width: 567px) {
  #screen .content {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #screen .content {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #screen .content {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #screen .content {
    width: 1200px;
    margin: auto;
  }
}
@media screen and (max-width: 567px) {
  #screen .padding-left {
    padding-left: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #screen .padding-left {
    padding-left: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #screen .padding-left {
    padding-left: calc((100% - 960px) / 2);
  }
}
@media screen and (min-width: 1920px) {
  #screen .padding-left {
    padding-left: calc((100% - 1200px) / 2);
  }
}
#screen .image-container .image {
  margin: 0;
}
#screen .image-container-pc {
  margin-top: 84px;
}
@media screen and (max-width: 567px) {
  #screen .image-container-pc {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #screen .image-container-pc {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #screen .image-container-pc {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #screen .image-container-pc {
    width: 1200px;
    margin: auto;
  }
}
#screen .full-image,
#screen .head-image {
  width: 100%;
  height: auto;
}
#screen .full-image img,
#screen .head-image img {
  width: 100%;
  height: auto;
}
#screen .head-image {
  width: 100%;
  height: auto;
}
@media screen and (max-width: 567px) {
  #screen .head-image {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #screen .head-image {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #screen .head-image {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #screen .head-image {
    width: 1200px;
    margin: auto;
  }
}
#screen .head-image > div {
  overflow: hidden;
}
#screen .fixed-background {
  z-index: -100;
  position: fixed;
  opacity: 1;
  top: -20vh;
  left: -10vw;
}
#screen .fixed-background .masked-image {
  z-index: -100;
}
#screen .fixed-background .masked-image img {
  width: 130vw;
  height: 0;
  padding-bottom: 120vh;
}
#screen .fixed-bg-cover {
  position: fixed;
  z-index: -98;
  height: 100%;
  width: 100%;
}
#screen .fixed-mask {
  z-index: -97;
  position: fixed;
  top: -105%;
  height: 168.75%;
  width: 100%;
  background: -webkit-gradient(linear, left top, left bottom, from(#000), color-stop(#000), to(rgba(0,0,0,0)));
  background: linear-gradient(#000, #000, rgba(0,0,0,0));
}
#screen .fixed-phone {
  position: absolute;
  top: 0;
  left: 0;
  bottom: auto;
  right: auto;
  -webkit-transform: translate3d(0, 0, 0);
          transform: translate3d(0, 0, 0);
  z-index: -99;
  width: 100vw;
  height: 100vh;
}
#screen .fixed-phone .frame,
#screen .fixed-phone .desktop {
  position: absolute;
  top: auto;
  left: auto;
  bottom: 15%;
  right: auto;
  width: 100%;
}
#screen .fixed-phone .frame img,
#screen .fixed-phone .desktop img {
  width: 100%;
  height: 0;
  padding-bottom: 214.09%;
  background-position: bottom;
}
#screen .fixed-phone .frame {
  z-index: 1;
}
#screen .fixed-phone .frame img {
  background-size: 100% auto;
}
#screen .fixed-phone .desktop .frame-container {
  overflow: hidden;
  position: relative;
  height: 0;
  margin-bottom: 4%;
  padding-bottom: 207.3545%;
}
#screen .fixed-phone .desktop .frame-container:before,
#screen .fixed-phone .desktop .frame-container .image {
  position: absolute;
  top: auto;
  left: auto;
  bottom: auto;
  right: auto;
  border-radius: 8.6957%/4.1617%;
  overflow: hidden;
  width: 96.6%;
  margin-left: 1.7%;
}
#screen .fixed-phone .desktop .frame-container:before {
  content: '';
  background: #000;
  height: 100%;
}
#screen .fixed-phone .desktop .frame-container .image {
  height: 97.5%;
  top: 0;
  -webkit-animation: desktop-down 1.4s ease-in-out 1.05s 1 normal forwards;
          animation: desktop-down 1.4s ease-in-out 1.05s 1 normal forwards;
}
#screen .fixed-phone .desktop .frame-container .image img {
  display: block;
  width: 102%;
  height: auto;
  margin-top: 1%;
}
@-webkit-keyframes desktop-down {
  from {
    height: 97.5%;
  }
  to {
    height: 100%;
  }
}
@keyframes desktop-down {
  from {
    height: 97.5%;
  }
  to {
    height: 100%;
  }
}
#screen .scroll-helper {
  position: relative;
  z-index: -10;
  overflow: hidden;
}
#screen .section-chin {
  height: 100vh;
}
#screen .section-chin .content {
  position: relative;
  left: 0;
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
  top: 54%;
}
#screen .section-chin .content .title {
  opacity: 0;
  -webkit-transform: translateY(4vh);
          transform: translateY(4vh);
  -webkit-animation: title-show 1.2s ease-in 0.8s 1 normal forwards, title-up 1.2s ease-out 0.8s 1 normal forwards;
          animation: title-show 1.2s ease-in 0.8s 1 normal forwards, title-up 1.2s ease-out 0.8s 1 normal forwards;
}
@-webkit-keyframes title-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes title-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes title-up {
  from {
    -webkit-transform: translateY(4vh);
            transform: translateY(4vh);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes title-up {
  from {
    -webkit-transform: translateY(4vh);
            transform: translateY(4vh);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
#screen .section-chin .content .intro {
  opacity: 0;
  -webkit-transform: translateY(4vh);
          transform: translateY(4vh);
  -webkit-animation: intro-show 1.4s ease-in 1.05s 1 normal forwards, intro-up 1.4s ease-out 1.05s 1 normal forwards;
          animation: intro-show 1.4s ease-in 1.05s 1 normal forwards, intro-up 1.4s ease-out 1.05s 1 normal forwards;
}
@-webkit-keyframes intro-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}
@keyframes intro-show {
  from {
    opacity: 0;
  }
  to {
    opacity: 0.8;
  }
}
@-webkit-keyframes intro-up {
  from {
    -webkit-transform: translateY(4vh);
            transform: translateY(4vh);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
@keyframes intro-up {
  from {
    -webkit-transform: translateY(4vh);
            transform: translateY(4vh);
  }
  to {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
}
#screen .section-color .image-container {
  width: 100%;
}
#screen .section-color .image-container .image {
  overflow: hidden;
  width: 50%;
  height: 100%;
}
#screen .section-color .image-container .image img {
  display: block;
  background-color: transparent;
  height: 0;
  width: 76vw;
  padding-bottom: 63.333308vw;
}
#screen .section-color .image-container .slider {
  position: absolute;
  top: 0;
  left: 50%;
  bottom: auto;
  right: auto;
  height: 100%;
}
#screen .section-color .image-container .slider:before {
  content: '';
  display: block;
  background-color: #fff;
  height: 100%;
  width: 2px;
}
#screen .section-color .image-container .slider img {
  position: absolute;
  display: block;
  cursor: col-resize;
}
#screen .section-color .image-container.fade-in {
  opacity: 1;
  -webkit-animation: fake-fade 0s;
          animation: fake-fade 0s;
}
#screen .section-color .image-container.fade-in .image {
  -webkit-animation: image-init ease-in-out 1.5s;
          animation: image-init ease-in-out 1.5s;
}
@-webkit-keyframes image-init {
  from {
    width: 80%;
  }
  to {
    width: 50%;
  }
}
@keyframes image-init {
  from {
    width: 80%;
  }
  to {
    width: 50%;
  }
}
#screen .section-color .image-container.fade-in .slider {
  -webkit-animation: slider-init ease-in-out 1.5s;
          animation: slider-init ease-in-out 1.5s;
}
@-webkit-keyframes slider-init {
  from {
    left: 80%;
  }
  to {
    left: 50%;
  }
}
@keyframes slider-init {
  from {
    left: 80%;
  }
  to {
    left: 50%;
  }
}
#screen .section-color .image-conainer.fade-out {
  opacity: 1;
  -webkit-animation: fake-fade 0s;
          animation: fake-fade 0s;
}
@-webkit-keyframes fake-fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
@keyframes fake-fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 1;
  }
}
#screen .section-glass {
  overflow: hidden;
}
#screen .section-glass .image-container {
  padding-top: 10.377%;
}
#screen .section-glass .image {
  height: auto;
  background-size: 100% 100%;
  background-position: 0 0;
  background-repeat: no-repeat;
}
#screen .section-glass .image img {
  width: 100%;
  height: 0;
}
#screen .section-glass .image.mobile {
  width: 130%;
}
#screen .section-glass .image.mobile img {
  padding-bottom: 20.3774%;
}
#screen .section-glass .image.pc {
  width: 100%;
}
#screen .section-glass .image.pc img {
  padding-bottom: 20.32%;
}
#screen .section-healthy {
  margin-top: 180px;
}
#screen .section-healthy>div {
  position: relative;
}
#screen .section-healthy .lab .logo {
  width: 48px;
  margin-top: 40px;
}
#screen .section-healthy .bg {
  z-index: -1;
  margin-top: -25%;
}
#screen .section-healthy .bg img {
  width: 100%;
  height: 0;
}
#screen .section-healthy .bg img.mobile {
  padding-bottom: 71.733%;
}
#screen .title {
  margin: 0;
}
#screen .title h3 {
  margin: 0;
}
#screen .intro {
  opacity: 0.8;
}
#screen section {
  overflow: hidden;
  margin-bottom: 90px;
}
#screen .intro {
  margin-top: 21px;
  max-width: 850px;
}
#screen .fixed-phone .desktop,
#screen .fixed-phone .frame {
  padding: 0 4vw;
}
#screen .head-image {
  margin-top: 40px;
}
#screen .head-image>div {
  border-radius: 16px;
}
#screen .section-color .slider img {
  width: 44px;
  max-width: 44px;
  height: 44px;
  left: calc(50% - 22px);
  top: calc(50% - 22px);
}
#screen .section-glass .image-container {
  padding-left: 12vw;
}
@media screen and (min-width: 568px) {
  #screen .section-healthy .content .intro {
    width: 320px;
  }
  #screen .section-healthy .lab .intro {
    max-width: 450px;
  }
  #screen .section-healthy .bg {
    position: relative;
    width: 100%;
    margin-top: -35%;
  }
  #screen .section-healthy .bg img {
    padding-bottom: 56.211%;
  }
  #screen .section-healthy .bg:after {
    position: absolute;
    content: '';
    left: 0;
    width: 15%;
    height: 100%;
    background: -webkit-gradient(linear, left top, right top, from(#000), to(rgba(0,0,0,0)));
    background: linear-gradient(to right, #000, rgba(0,0,0,0));
  }
  #screen .fixed-phone .frame,
  #screen .fixed-phone .desktop {
    background: transparent;
    padding: 0 calc((100vw - 558px) / 2);
  }
}
@media screen and (min-width: 1024px) {
  #screen section {
    margin-bottom: 180px;
    margin-top: 0;
  }
  #screen .intro {
    margin-top: 30px;
  }
  #screen .fixed-phone .frame,
  #screen .fixed-phone .desktop {
    padding: 0 calc((100vw - 698px) / 2);
  }
  #screen .head-image {
    margin-top: 60px;
  }
  #screen .section-chin .content {
    padding: 0;
    width: 34%;
  }
  #screen .section-color .image-container .image img {
    width: 960px;
    padding-bottom: 540px;
  }
  #screen .section-glass .image-container {
    position: relative;
    padding: 115px 0 115px 0;
    width: 960px;
    left: calc((100% - 960px) / 2);
  }
  #screen .section-healthy .bg {
    width: 100%;
    margin-top: -30%;
  }
  #screen .image-container-pc {
    margin-top: 84px;
  }
}
@media screen and (min-width: 1920px) {
  #screen .fixed-phone .frame,
  #screen .fixed-phone .desktop {
    padding: 0 calc((100vw - 1396px) / 2);
  }
  #screen .section-chin .content {
    padding: 0;
    margin-top: -100px;
  }
  #screen .section-color .image-container .image img {
    width: 1200px;
    padding-bottom: 675px;
  }
  #screen .section-glass .image-container {
    width: 1200px;
    left: calc((100% - 1200px) / 2);
  }
  #screen .section-healthy .bg {
    width: 1200px;
    margin-left: calc(50vw - 600px);
    margin-top: -400px;
  }
  #screen .section-healthy .bg .pc {
    background-position-x: -79px;
  }
  #screen section {
    margin-bottom: 280px;
  }
}

.g-blue#appearance .section-top .phone-green {
  -webkit-animation: none;
          animation: none;
}
.g-pink#appearance .section-top .phone-blue {
  opacity: 0;
  -webkit-animation: section-in-out 5s ease-in-out 3.2s 1 normal forwards;
          animation: section-in-out 5s ease-in-out 3.2s 1 normal forwards;
}
.g-pink#appearance .section-top .phone-pink {
  z-index: 2;
  opacity: 0;
  -webkit-animation: section-in 0.4s ease-in 6s 1 normal forwards;
          animation: section-in 0.4s ease-in 6s 1 normal forwards;
}
.g-pink#appearance .phone-pink .text {
  color: #fff;
}
.g-pink#appearance .phone-pink .bg {
  background-color: #e8c4c8;
}
.g-pink#appearance .phone-pink .fg .phone-container {
  right: auto;
  left: 0;
  bottom: 0;
}
.g-pink#appearance .phone-pink .fg .phone-container .phone {
  position: relative;
  left: 0;
  bottom: 0;
}
.g-pink#appearance .phone-pink .fg .phone-container .phone-img {
  height: 60vh;
  width: 0;
  padding-right: 50vh;
}
@media screen and (min-aspect-ratio: 1/1) {
  .g-pink#appearance .phone-pink .text {
    color: #fff;
  }
  .g-pink#appearance .phone-pink .bg {
    background-color: #e8c4c8;
  }
  .g-pink#appearance .phone-pink .fg .phone-container {
    left: 0;
    right: auto;
    overflow: visible;
    bottom: 0;
  }
  .g-pink#appearance .phone-pink .fg .phone-container .phone {
    overflow: visible;
    left: 0;
    bottom: 0;
  }
  .g-pink#appearance .phone-pink .fg .phone-container .phone-img {
    height: 0;
    width: 100vw;
    padding-bottom: 63.306vw;
  }
}
@media screen and (max-width: 1080px) {
  .g-pink#appearance .phone-pink .fg .phone-container .phone-img {
    width: 100vw;
    height: 100vh;
    padding-right: 0;
  }
}
@media screen and (min-width: 1081px) {
  .g-pink#appearance .phone-pink .fg .phone-container .phone-img {
    padding-bottom: 54vw;
  }
}
#appearance {
  color: #fff;
  background: #000;
  height: auto;
  background-repeat: no-repeat;
  border: none;
}
#appearance .g-text,
#appearance .g-title-md {
  color: inherit;
}
@media screen and (max-width: 567px) {
  #appearance .padding-page {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #appearance .padding-page {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #appearance .padding-page {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #appearance .padding-page {
    width: 1200px;
    margin: auto;
  }
}
#appearance section {
  padding-top: 90px;
  overflow: hidden;
}
@media screen and (max-width: 567px) {
  #appearance .content {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #appearance .content {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #appearance .content {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #appearance .content {
    width: 1200px;
    margin: auto;
  }
}
#appearance .title h3 {
  margin: 0;
}
#appearance .intro {
  opacity: 0.8;
  margin-top: 21px;
  color: #fff;
}
#appearance .video {
  margin: 40px 0;
  width: 100%;
  height: 252px;
  background: #000;
  border-radius: 10px;
}
#appearance .section-top {
  padding-top: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}
#appearance .section-top .bg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100%;
}
#appearance .section-top .bg .ring-container {
  position: absolute;
  width: auto;
  height: auto;
}
#appearance .section-top .bg .ring-container .ring {
  position: relative;
}
#appearance .section-top .fg {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}
#appearance .section-top .fg .phone-container {
  position: absolute;
  width: auto;
  height: auto;
}
#appearance .section-top .fg .phone-container .phone {
  position: relative;
  width: auto;
  height: auto;
}
#appearance .section-top .text {
  font-size: 32px;
  position: absolute;
  right: auto;
  bottom: auto;
  left: 4vw;
  top: 13.75%;
}
#appearance .section-top .phone-green {
  z-index: 0;
}
#appearance .section-top .phone-blue {
  z-index: 1;
}
#appearance .section-top .phone-green,
#appearance .section-top .phone-pink,
#appearance .section-top .phone-blue,
#appearance .section-top .phone-purple {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#appearance .section-top .phone-green .bg {
  background-color: #03bbb9;
}
#appearance .section-top .phone-green .fg {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#appearance .section-top .phone-green .fg .phone-container {
  left: 4vw;
  top: 25%;
}
#appearance .section-top .phone-green .fg .phone-container .phone {
  position: relative;
  height: auto;
}
#appearance .section-top .phone-green .fg .phone-container .phone-img {
  height: 80vh;
  width: 92vw;
}
#appearance .section-top .phone-green .text {
  color: #fff;
}
#appearance .section-top .phone-blue .text {
  color: #fff;
}
#appearance .section-top .phone-blue .bg {
  background-color: #000;
}
#appearance .section-top .phone-blue .fg .phone-container {
  right: auto;
  left: 50%;
  bottom: 30%;
}
#appearance .section-top .phone-blue .fg .phone-container .phone {
  position: relative;
  left: -18.33%;
  bottom: 108%;
}
#appearance .section-top .phone-blue .fg .phone-container .phone-img {
  height: 60vh;
  width: 0;
  padding-right: 94.80000000000001vh;
}
@media screen and (min-aspect-ratio: 1/1) {
  #appearance .section-top .text {
    left: 13.75%;
    top: 15%;
    right: auto;
    bottom: auto;
    font-weight: 600;
  }
  #appearance .section-top .phone-green .bg {
    background-color: #03bbb9;
  }
  #appearance .section-top .phone-green .fg {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  #appearance .section-top .phone-green .fg .phone-container {
    left: 27.5vw;
    top: 20%;
  }
  #appearance .section-top .phone-green .fg .phone-container .phone {
    position: relative;
    height: auto;
  }
  #appearance .section-top .phone-green .fg .phone-container .phone-img {
    height: 80vh;
    width: 45vw;
  }
  #appearance .section-top .phone-green .text {
    color: #fff;
  }
  #appearance .section-top .phone-blue .text {
    color: #fff;
  }
  #appearance .section-top .phone-blue .bg {
    background-color: #000;
  }
  #appearance .section-top .phone-blue .fg .phone-container {
    left: 50vw;
    right: auto;
    overflow: visible;
    top: 75%;
  }
  #appearance .section-top .phone-blue .fg .phone-container .phone {
    overflow: visible;
    left: -18.2708%;
    top: -62.488093023255814vw;
  }
  #appearance .section-top .phone-blue .fg .phone-container .phone-img {
    height: 0;
    width: 100vw;
    padding-bottom: 63.306vw;
  }
}
@-webkit-keyframes section-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes section-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
#appearance .section-top .phone-green {
  -webkit-animation: section-out 0.4s ease-out 2.8s 1 normal forwards;
          animation: section-out 0.4s ease-out 2.8s 1 normal forwards;
}
@-webkit-keyframes section-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes section-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes rotate-clockwise {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}
@keyframes rotate-clockwise {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
}
@-webkit-keyframes rotate-clockwise-reverse {
  from {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  to {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}
@keyframes rotate-clockwise-reverse {
  from {
    -webkit-transform: rotate(180deg);
            transform: rotate(180deg);
  }
  to {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}
@-webkit-keyframes rotate-anticlockwise {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@keyframes rotate-anticlockwise {
  from {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@-webkit-keyframes rotate-anticlockwise-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}
@keyframes rotate-anticlockwise-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0);
            transform: rotate(0);
  }
}
#appearance .shell {
  margin-bottom: 0;
}
#appearance .shell .video-mask {
  z-index: 10;
  position: fixed;
  top: 0px;
  left: 0px;
  width: 100%;
  height: 100%;
  -webkit-transform: translateY(150vh);
          transform: translateY(150vh);
  background-color: #000;
}
#appearance .shell .video-mask.show {
  -webkit-animation: video-show 1s ease 0s 1 normal forwards;
          animation: video-show 1s ease 0s 1 normal forwards;
}
#appearance .shell .video-mask.fold {
  -webkit-animation: video-fold 1s ease 0s 1 normal forwards;
          animation: video-fold 1s ease 0s 1 normal forwards;
}
#appearance .shell .video-mask .video-wrapper {
  width: 100%;
  margin-top: 90px;
  height: calc(100% - 90px);
}
#appearance .shell .video-mask .video-wrapper video {
  width: 100%;
  height: 100%;
}
#appearance .shell .video-mask .close {
  position: absolute;
  right: 10px;
  top: 55px;
  width: 30px;
  color: #fff;
}
#appearance .shell .video-mask .close img {
  width: 100%;
  height: auto;
}
@-webkit-keyframes video-show {
  from {
    -webkit-transform: translateY(150vh);
            transform: translateY(150vh);
  }
  to {
    -webkit-transform: translateY(0vh);
            transform: translateY(0vh);
  }
}
@keyframes video-show {
  from {
    -webkit-transform: translateY(150vh);
            transform: translateY(150vh);
  }
  to {
    -webkit-transform: translateY(0vh);
            transform: translateY(0vh);
  }
}
@-webkit-keyframes video-fold {
  from {
    -webkit-transform: translateY(0vh);
            transform: translateY(0vh);
  }
  to {
    -webkit-transform: translateY(150vh);
            transform: translateY(150vh);
  }
}
@keyframes video-fold {
  from {
    -webkit-transform: translateY(0vh);
            transform: translateY(0vh);
  }
  to {
    -webkit-transform: translateY(150vh);
            transform: translateY(150vh);
  }
}
#appearance .shell .video-mask {
  overflow-x: hidden;
  overflow-y: auto;
}
#appearance .shell .video {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 50%;
  overflow: hidden;
}
#appearance .shell .video #video-shell {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  border-radius: 10px;
}
#appearance .shell .video .play-button {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px #fff solid;
  box-sizing: content-box;
  -webkit-transform-origin: center center;
          transform-origin: center center;
  -webkit-transform: translateY(-50%) translateX(-50%) scale(1.25);
          transform: translateY(-50%) translateX(-50%) scale(1.25);
}
#appearance .shell .video .play-button:before {
  content: '';
  background-image: url(../images/46bbb1e.svg);
  background-size: cover;
  display: block;
  width: 24px;
  height: 24px;
  margin-top: 12px;
  margin-left: 14px;
}
#appearance .skin {
  width: 100%;
  height: auto;
}
#appearance .skin .content .title-wrapper {
  position: relative;
  z-index: 1;
}
#appearance .skin .content .image {
  position: relative;
  margin-top: 40px;
  padding-bottom: 160%;
}
#appearance .skin .content .image .phone-img {
  position: absolute;
  z-index: -1;
  top: 0;
  left: auto;
  right: 0;
  width: 200%;
  height: 0;
  padding-bottom: 243.48999999999998%;
}
#appearance .skin .content .image .phone-img.green {
  width: 190%;
  padding-bottom: 202.61904761904762%;
}
#appearance .color {
  margin-bottom: 90px;
  position: relative;
  color: #fff;
  background: #000;
  width: 100vw;
  height: auto;
}
#appearance .color .content {
  position: relative;
  z-index: 1;
}
#appearance .color .image {
  position: relative;
  z-index: 0;
  margin-top: 40px;
  overflow: hidden;
}
#appearance .color .image img {
  background-color: #000;
  position: relative;
  left: auto;
  right: 0;
  height: 0;
  width: 100%;
  padding-bottom: 130.4%;
  -webkit-transform: translateY(-29.4479%);
          transform: translateY(-29.4479%);
}
#appearance .color .intro {
  color: #fff;
}
@media screen and (max-width: 567px) {
  #appearance .shell .video {
    padding-bottom: 90%;
  }
  #appearance .shell .video #video-shell {
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
    -webkit-transform: scale(1.8);
            transform: scale(1.8);
  }
}
@media screen and (max-width: 1023px) {
  #appearance .color img {
    background-position: 15%;
  }
}
@media screen and (min-width: 768px) {
  #appearance .skin .content .image {
    padding-bottom: 100%;
  }
  #appearance .skin .content .image .phone-img {
    width: 150%;
    padding-bottom: 182.61749999999998%;
    right: 100px;
  }
  #appearance .skin .content .image .phone-img.green {
    width: 150%;
    padding-bottom: 159.99242997728993%;
  }
}
@media screen and (min-width: 1024px) {
  #appearance section {
    padding-top: 180px;
  }
  #appearance .intro {
    max-width: 850px;
    margin-top: 30px;
  }
  #appearance .color .image {
    margin-top: 60px;
    height: auto;
    left: 10%;
    right: 0;
    width: 90%;
    margin-top: -13.5%;
  }
  #appearance .color .image img {
    width: 100%;
    padding-bottom: 53.062%;
    -webkit-transform: none;
            transform: none;
  }
  #appearance .skin .content .image {
    margin-top: 0;
    padding-bottom: 60%;
  }
  #appearance .skin .content .image .phone-img {
    top: -10%;
    width: 250%;
    right: 0;
    padding-bottom: 304.36249999999995%;
  }
  #appearance .skin .content .image .phone-img.green {
    margin-top: 50px;
    width: 150%;
    padding-bottom: 159.99242997728993%;
  }
  #appearance .skin .intro {
    max-width: 450px;
  }
}
@media screen and (min-width: 1920px) {
  #appearance section {
    padding-top: 280px;
  }
  #appearance .skin .title-wrapper {
    margin: 10% 0;
  }
  #appearance .skin .content .image .phone-img.green {
    margin-top: 140px;
    width: 150%;
    padding-bottom: 159.99242997728993%;
  }
}
@media screen and (min-aspect-ratio: 1/1) and (min-width: 568px) {
  .section-top .text {
    font-size: 36px;
  }
}
@media screen and (min-aspect-ratio: 1/1) and (min-width: 1920px) {
  .section-top .text {
    font-size: 67px;
  }
}
@-webkit-keyframes section-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes section-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes section-in-out {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}
@keyframes section-in-out {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

body {
  font-family: OPPOFont-Medium;
}
#parameter {
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  color: #666;
}
#parameter .nav-container {
  z-index: 10;
  width: 100%;
  margin-top: 44px;
  height: 44px;
  font-size: 14px;
}
#parameter .nav-container .nav {
  font-weight: 600;
  display: block;
  vertical-align: middle;
  background-color: #fff;
  color: #000;
  z-index: 10;
  top: 0;
  width: 100%;
  height: 44px;
  line-height: 44px;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
#parameter .nav-container .nav .logo,
#parameter .nav-container .nav .middle,
#parameter .nav-container .nav .options,
#parameter .nav-container .nav .right {
  display: inline-block;
}
#parameter .nav-container .nav .logo {
  width: 100px;
  height: 44px;
  text-align: left;
  padding-left: 15px;
  background: url(../images/d4f5b36.svg) left no-repeat;
  background-size: auto 17px;
  background-position-x: 15px;
}
#parameter .nav-container .nav .middle {
  width: calc(100% - 200px);
  text-align: center;
}
#parameter .nav-container .nav .middle .arrow {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5QYXRoIDI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgICAgICA8ZyBpZD0ibmF2aSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE4MC4wMDAwMDAsIC0xOC4wMDAwMDApIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iIzAwMDAwMCIgc3Ryb2tlLXdpZHRoPSIyIj4KICAgICAgICAgICAgPGcgaWQ9IlBhdGgtMiI+CiAgICAgICAgICAgICAgICA8cG9seWxpbmUgcG9pbnRzPSIxODEgMTkgMTg4IDI2LjQ1MjcxMjggMTk1IDE5Ij48L3BvbHlsaW5lPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K) center no-repeat;
  cursor: pointer;
}
#parameter .nav-container .nav .middle .options .option {
  display: inline-block;
  cursor: pointer;
  color: #000;
  font-weight: normal;
}
#parameter .nav-container .nav .middle .options a:first-child {
  margin-right: 72px;
}
#parameter .nav-container .nav .right {
  width: 100px;
  text-align: right;
  padding-right: 15px;
  color: #000;
  cursor: pointer;
}
#parameter .nav-container .nav .more {
  display: none;
  text-align: center;
  padding: 0 68px;
  background: #fff;
  color: #000;
  border-bottom: 1px solid #e5e5e5;
}
#parameter .nav-container .nav .more p {
  margin: 0;
  cursor: pointer;
  color: #000;
  font-weight: normal;
}
#parameter .nav-container .nav.black {
  background: #000;
  color: #fff;
}
#parameter .nav-container .nav.black .logo {
  background-image: url(../images/9f0077e.svg);
}
#parameter .nav-container .nav.black .middle .arrow {
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSIxMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTAiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDUyLjUgKDY3NDY5KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5QYXRoIDI8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iU3ltYm9scyIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgICAgICA8ZyBpZD0ibmF2aSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE4MC4wMDAwMDAsIC0xOC4wMDAwMDApIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iI2ZmZmZmZiIgc3Ryb2tlLXdpZHRoPSIyIj4KICAgICAgICAgICAgPGcgaWQ9IlBhdGgtMiI+CiAgICAgICAgICAgICAgICA8cG9seWxpbmUgcG9pbnRzPSIxODEgMTkgMTg4IDI2LjQ1MjcxMjggMTk1IDE5Ij48L3BvbHlsaW5lPgogICAgICAgICAgICA8L2c+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4K);
}
#parameter .nav-container .nav.black .middle .options .option {
  color: #fff;
}
#parameter .nav-container .nav.black .right {
  color: #fff;
}
#parameter .nav-container .nav.black .more {
  background: #000;
  color: #fff;
  border-bottom: 1px solid #000;
}
#parameter .nav-container .nav.black .more p {
  color: #fff;
}
#parameter .title,
#parameter .mtitle,
#parameter .nav,
#parameter .nav1 {
  font-weight: 600;
}
#parameter .remark {
  font-size: 12px;
  line-height: 20px;
}
@media screen and (max-width: 567px) {
  #parameter .parameter {
    padding-left: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #parameter .parameter {
    padding-left: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #parameter .parameter {
    padding-left: calc((100% - 960px) / 2);
  }
}
@media screen and (min-width: 1920px) {
  #parameter .parameter {
    padding-left: calc((100% - 1200px) / 2);
  }
}
@media screen and (max-width: 567px) {
  #parameter .parameter {
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #parameter .parameter {
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #parameter .parameter {
    padding-right: calc((100% - 960px) / 2);
  }
}
@media screen and (min-width: 1920px) {
  #parameter .parameter {
    padding-right: calc((100% - 1200px) / 2);
  }
}
#parameter .parameter .nav1 {
  border-top: 2px solid #f2f7f8;
  font-size: 22px;
  padding-top: 30px;
  margin: 50px 0 30px 0;
  color: #333;
}
#parameter .parameter .nav {
  border-top: 2px solid #f2f7f8;
  font-size: 18px;
  padding-top: 30px;
  margin: 30px 0 30px 0;
  color: #333;
}
#parameter .parameter .p-hide {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSI5cHgiIHZpZXdCb3g9IjAgMCAxNiA5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA1Mi4xICg2NzA0OCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+UGF0aCAyPC90aXRsZT4KICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPgogICAgPGcgaWQ9IlBhZ2UtMSIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgICAgICA8ZyBpZD0i5omL5py656uv5qC35byPIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzE1LjAwMDAwMCwgLTE4Ny4wMDAwMDApIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iIzY2NjY2NiIgc3Ryb2tlLXdpZHRoPSIyIj4KICAgICAgICAgICAgPHBvbHlsaW5lIGlkPSJQYXRoLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDMyMy4wMDAwMDAsIDE5MS41MDAwMDApIHNjYWxlKDEsIC0xKSB0cmFuc2xhdGUoLTMyMy4wMDAwMDAsIC0xOTEuNTAwMDAwKSAiIHBvaW50cz0iMzE2IDE4OCAzMjMgMTk1IDMzMCAxODgiPjwvcG9seWxpbmU+CiAgICAgICAgPC9nPgogICAgPC9nPgo8L3N2Zz4=) no-repeat center;
  float: right;
  width: 80px;
  height: 80px;
  margin: -30px;
  display: none;
}
#parameter .parameter .show {
  background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTZweCIgaGVpZ2h0PSI5cHgiIHZpZXdCb3g9IjAgMCAxNiA5IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA1Mi4xICg2NzA0OCkgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+UGF0aCAyIENvcHk8L3RpdGxlPgogICAgPGRlc2M+Q3JlYXRlZCB3aXRoIFNrZXRjaC48L2Rlc2M+CiAgICA8ZyBpZD0iUGFnZS0xIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgICAgIDxnIGlkPSLmiYvmnLrnq6/moLflvI8iIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMTUuMDAwMDAwLCAtMTI2OS4wMDAwMDApIiBmaWxsLXJ1bGU9Im5vbnplcm8iIHN0cm9rZT0iIzY2NjY2NiIgc3Ryb2tlLXdpZHRoPSIyIj4KICAgICAgICAgICAgPHBvbHlsaW5lIGlkPSJQYXRoLTItQ29weSIgcG9pbnRzPSIzMTYgMTI3MCAzMjMgMTI3NyAzMzAgMTI3MCI+PC9wb2x5bGluZT4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==) no-repeat center;
  float: right;
  width: 80px;
  height: 80px;
  margin: -30px;
}
#parameter .parameter section {
  padding-bottom: 50px;
  border-bottom: 2px solid #f2f7f8;
}
@media screen and (max-width: 1023px) {
  #parameter .parameter section {
    display: none;
    border-bottom: none;
    padding-bottom: 30px;
  }
}
#parameter .parameter .mtitle {
  display: none;
  font-size: 20px;
  color: #738dd8;
}
@media screen and (max-width: 1023px) {
  #parameter .parameter .mtitle {
    display: inline-block;
    margin-bottom: 20px;
  }
}
#parameter .parameter .title {
  font-size: 26px;
  margin-top: 50px;
  margin-bottom: 30px;
}
@media screen and (max-width: 1023px) {
  #parameter .parameter .title {
    display: none;
  }
}
#parameter .parameter .overview .reno .title {
  font-size: 29px;
  margin-bottom: 30px;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .overview .reno .title {
    font-size: 26px;
  }
}
@media screen and (max-width: 1023px) {
  #parameter .parameter .overview .reno .title {
    font-size: 20px;
    color: #738dd8;
  }
}
#parameter .parameter .overview .reno .content {
  height: 200px;
}
@media screen and (max-width: 567px) {
  #parameter .parameter .overview .reno .content {
    height: 180px;
  }
}
#parameter .parameter .overview .reno .content .param {
  font-weight: 600;
  font-size: 20px;
  margin-bottom: 15px;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .overview .reno .content .param {
    font-size: 16px;
  }
}
#parameter .parameter .overview .reno .image {
  display: none;
}
@media screen and (max-width: 567px) {
  #parameter .parameter .overview .reno .image {
    display: block;
    margin-top: 0;
    width: 290px;
    height: 273px;
  }
}
#parameter .parameter .overview .reno .image1 {
  width: 369px;
  height: 341px;
  margin-top: 30px;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .overview .reno .image1 {
    margin-top: 0;
    width: 290px;
    height: 273px;
  }
}
@media screen and (max-width: 567px) {
  #parameter .parameter .overview .reno .image1 {
    display: none;
  }
}
#parameter .parameter .overview .reno .image2 {
  display: none;
}
@media screen and (max-width: 567px) {
  #parameter .parameter .overview .reno .image2 {
    display: block;
    margin-top: 0;
    width: 180px;
    height: 273px;
  }
}
#parameter .parameter .overview .reno .image3 {
  width: 228px;
  height: 341px;
  margin-top: 30px;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .overview .reno .image3 {
    margin-top: 0;
    width: 180px;
    height: 273px;
  }
}
@media screen and (max-width: 567px) {
  #parameter .parameter .overview .reno .image3 {
    display: none;
  }
}
#parameter .parameter .overview .reno .colors {
  margin-top: 10px;
  margin-bottom: 30px;
}
#parameter .parameter .overview .reno .colors .color {
  margin-left: 18px;
  font-size: 16px;
  white-space: nowrap;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .overview .reno .colors .color {
    font-size: 13px;
    margin-left: 13px;
  }
}
@media screen and (max-width: 567px) {
  #parameter .parameter .overview .reno .colors .color {
    margin-left: 25px;
  }
}
#parameter .parameter .overview .reno .colors .color2 {
  margin-left: 36px;
  font-size: 16px;
  white-space: nowrap;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .overview .reno .colors .color2 {
    font-size: 13px;
    margin-left: 28px;
  }
}
@media screen and (max-width: 567px) {
  #parameter .parameter .overview .reno .colors .color2 {
    margin-left: 25px;
    margin-right: 25px;
  }
}
#parameter .parameter .ram .reno {
  margin-bottom: 30px;
}
#parameter .parameter .ram .ramsize {
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 20px;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .ram .ramsize {
    font-size: 18px;
  }
}
#parameter .parameter .ram .ramtype {
  font-size: 16px;
  line-height: 28px;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .ram .ramtype {
    font-size: 14px;
    line-height: 26px;
  }
}
#parameter .parameter .ram .remark {
  margin-top: 20px;
  color: #666;
}
#parameter .parameter .hardware .reno {
  margin-bottom: 30px;
}
#parameter .parameter .hardware .reno .content {
  height: 230px;
}
@media screen and (max-width: 567px) {
  #parameter .parameter .hardware .reno .content {
    height: auto;
  }
}
#parameter .parameter .hardware .reno .param {
  font-weight: 600;
  font-size: 16px;
  line-height: 28px;
}
#parameter .parameter .hardware .reno .remark {
  color: #666;
  margin-top: 20px;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .hardware .reno .remark .param {
    font-weight: 600;
    font-size: 14px;
    line-height: 26px;
  }
  #parameter .parameter .hardware .reno .remark .remark {
    font-size: 14px;
    line-height: 26px;
  }
}
#parameter .parameter .size .reno {
  margin-bottom: 30px;
}
#parameter .parameter .size .reno .param {
  font-size: 16px;
  line-height: 28px;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .size .reno .param {
    font-size: 14px;
    line-height: 26px;
  }
}
#parameter .parameter .screen .reno {
  margin-bottom: 20px;
}
@media screen and (max-width: 1023px) {
  #parameter .parameter .screen .reno {
    padding-right: 40px;
  }
}
@media screen and (max-width: 567px) {
  #parameter .parameter .screen .reno {
    padding-right: 0;
  }
}
#parameter .parameter .screen .reno .param1 {
  font-weight: 600;
  font-size: 22px;
  line-height: 36px;
  margin-bottom: 30px;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .screen .reno .param1 {
    font-size: 18px;
    line-height: 22px;
  }
}
#parameter .parameter .screen .reno .param {
  font-size: 16px;
  line-height: 28px;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .screen .reno .param {
    font-size: 14px;
    line-height: 26px;
  }
}
#parameter .parameter .backcam .reno {
  margin-bottom: 20px;
}
@media screen and (max-width: 1023px) {
  #parameter .parameter .backcam .reno {
    padding-right: 40px;
  }
}
@media screen and (max-width: 567px) {
  #parameter .parameter .backcam .reno {
    padding-right: 0;
  }
}
#parameter .parameter .backcam .reno .param1 {
  font-weight: 600;
  font-size: 22px;
  height: 60px;
  margin-bottom: 10px;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .backcam .reno .param1 {
    font-size: 18px;
  }
}
#parameter .parameter .backcam .reno .param2 {
  font-weight: 600;
  font-size: 16px;
  line-height: 28px;
  margin: 10px 0 10px 0;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .backcam .reno .param2 {
    font-size: 14px;
    line-height: 26px;
  }
}
#parameter .parameter .backcam .reno .param {
  font-size: 16px;
  line-height: 28px;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .backcam .reno .param {
    font-size: 14px;
    line-height: 26px;
  }
}
#parameter .parameter .frontcam .param1 {
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 20px;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .frontcam .param1 {
    font-size: 18px;
  }
}
#parameter .parameter .frontcam .param {
  font-size: 16px;
  line-height: 28px;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .frontcam .param {
    font-size: 14px;
    line-height: 26px;
  }
}
#parameter .parameter .video .reno {
  margin-bottom: 20px;
}
@media screen and (max-width: 1023px) {
  #parameter .parameter .video .reno {
    padding-right: 40px;
  }
}
@media screen and (max-width: 567px) {
  #parameter .parameter .video .reno {
    padding-right: 0;
  }
}
#parameter .parameter .video .reno .param {
  font-size: 16px;
  line-height: 28px;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .video .reno .param {
    font-size: 14px;
    line-height: 26px;
  }
}
#parameter .parameter .recognition .content {
  font-size: 16px;
  line-height: 28px;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .recognition .content {
    font-size: 14px;
    line-height: 26px;
  }
}
#parameter .parameter .system .subtitle {
  font-weight: 600;
  font-size: 22px;
  margin-bottom: 20px;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .system .subtitle {
    font-size: 18px;
  }
}
#parameter .parameter .system .param {
  font-size: 16px;
  line-height: 28px;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .system .param {
    font-size: 14px;
    line-height: 26px;
  }
}
#parameter .parameter .nfc .content {
  font-size: 16px;
  line-height: 28px;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .nfc .content {
    font-size: 14px;
    line-height: 26px;
  }
}
#parameter .parameter .card .sub {
  font-weight: 600;
  font-size: 16px;
  margin-bottom: 20px;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .card .sub {
    font-size: 14px;
    line-height: 14px;
  }
}
#parameter .parameter .card .content {
  font-size: 16px;
  line-height: 28px;
  color: #666;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .card .content {
    font-size: 14px;
    line-height: 26px;
  }
}
#parameter .parameter .network .reno {
  margin-top: 20px;
}
#parameter .parameter .network .reno .param1 {
  font-weight: 600;
  margin-top: 20px;
  font-size: 22px;
  margin-bottom: 20px;
}
#parameter .parameter .network .reno .param {
  font-size: 16px;
  line-height: 28px;
  color: #666;
  word-break: break-all;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .network .reno .param {
    font-size: 14px;
    line-height: 24px;
  }
}
#parameter .parameter .network .reno .content1 {
  height: 330px;
}
@media screen and (max-width: 1023px) {
  #parameter .parameter .network .reno .content1 {
    height: 250px;
  }
}
@media screen and (max-width: 567px) {
  #parameter .parameter .network .reno .content1 {
    height: 280px;
  }
}
#parameter .parameter .network .reno .content2 {
  height: 200px;
}
@media screen and (max-width: 1023px) {
  #parameter .parameter .network .reno .content2 {
    height: 160px;
  }
}
#parameter .parameter .network .reno .content3 {
  height: 330px;
}
@media screen and (max-width: 1023px) {
  #parameter .parameter .network .reno .content3 {
    height: 260px;
  }
}
@media screen and (max-width: 567px) {
  #parameter .parameter .network .reno .content3 {
    height: 380px;
  }
}
#parameter .parameter .network .reno .content4 {
  height: 200px;
}
@media screen and (max-width: 1023px) {
  #parameter .parameter .network .reno .content4 {
    height: 150px;
  }
}
@media screen and (max-width: 567px) {
  #parameter .parameter .network .reno .content4 {
    height: 200px;
  }
}
#parameter .parameter .network .reno .content5 {
  height: 330px;
}
@media screen and (max-width: 1023px) {
  #parameter .parameter .network .reno .content5 {
    height: 240px;
  }
}
@media screen and (max-width: 567px) {
  #parameter .parameter .network .reno .content5 {
    height: 320px;
  }
}
#parameter .parameter .network .reno .content6 {
  height: 200px;
}
@media screen and (max-width: 1023px) {
  #parameter .parameter .network .reno .content6 {
    height: 160px;
  }
}
#parameter .parameter .network .reno .content7 {
  height: 330px;
}
@media screen and (max-width: 1023px) {
  #parameter .parameter .network .reno .content7 {
    height: 260px;
  }
}
@media screen and (max-width: 567px) {
  #parameter .parameter .network .reno .content7 {
    height: 390px;
  }
}
#parameter .parameter .network .reno .content8 {
  height: 200px;
}
#parameter .parameter .data .param {
  font-size: 16px;
  line-height: 28px;
  color: #666;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .data .param {
    font-size: 14px;
    line-height: 26px;
  }
}
#parameter .parameter .audio .content {
  font-size: 16px;
  line-height: 28px;
  color: #666;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .audio .content {
    font-size: 14px;
    line-height: 26px;
  }
}
#parameter .parameter .sensor .content {
  font-size: 16px;
  line-height: 28px;
  color: #666;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .sensor .content {
    font-size: 14px;
    line-height: 26px;
  }
}
#parameter .parameter .gps .reno {
  margin-bottom: 20px;
}
#parameter .parameter .gps .content {
  font-size: 16px;
  line-height: 28px;
  color: #666;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .gps .content {
    font-size: 14px;
    line-height: 26px;
  }
}
#parameter .parameter .connect .image1 {
  width: 279px;
  height: 406px;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .connect .image1 {
    width: 240px;
    height: 330px;
  }
}
@media screen and (max-width: 567px) {
  #parameter .parameter .connect .image1 {
    width: 279px;
    height: 406px;
  }
}
#parameter .parameter .connect .image2 {
  margin-left: 30px;
  width: 222px;
  height: 452px;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .connect .image2 {
    margin-left: 15px;
    width: 190px;
    height: 370px;
  }
}
@media screen and (max-width: 567px) {
  #parameter .parameter .connect .image2 {
    margin: 20px 0 40px 45px;
    width: 222px;
    height: 452px;
  }
}
@media screen and (max-width: 567px) {
  #parameter .parameter .connect .reno2 .image2 {
    margin-left: 55px;
  }
}
#parameter .parameter .gps .packpic,
#parameter .parameter .pack .packpic {
  margin-top: 30px;
  display: none;
}
@media screen and (max-width: 567px) {
  #parameter .parameter .gps .packpic,
  #parameter .parameter .pack .packpic {
    display: block;
  }
}
#parameter .parameter .gps .packpic1,
#parameter .parameter .pack .packpic1 {
  margin-top: 30px;
}
@media screen and (max-width: 567px) {
  #parameter .parameter .gps .packpic1,
  #parameter .parameter .pack .packpic1 {
    display: none;
  }
}
#parameter .parameter .tips .content {
  font-size: 16px;
  line-height: 28px;
  color: #666;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .tips .content {
    font-size: 14px;
    line-height: 26px;
  }
}
#parameter .parameter .service .content {
  font-size: 16px;
  line-height: 28px;
  color: #666;
}
@media screen and (max-width: 1919px) {
  #parameter .parameter .service .content {
    font-size: 14px;
    line-height: 26px;
  }
}
#parameter .parameter .app {
  border-bottom: none;
}
#parameter .parameter .app .iconarea {
  margin-top: 20px;
}
#parameter .parameter .app .iconarea .icon {
  width: 47px;
  height: 47px;
  margin-top: 15px;
  margin-right: 15px;
}
#parameter .parameter .app .text {
  font-weight: 600;
  margin-top: 30px;
  font-size: 16px;
  color: #738dd8;
}
@media screen and (min-width: 568px) {
  #parameter .nav-container {
    margin-top: 60px;
  }
  #parameter .nav-container .nav {
    height: 50px;
    line-height: 50px;
    text-align: center;
  }
  #parameter .nav-container .nav .content {
    max-width: 1200px;
    margin: 0 auto;
  }
  #parameter .nav-container .nav .logo {
    width: 200px;
    height: 50px;
    padding-left: 40px;
    background-image: url(../images/d4f5b36.svg);
    background-size: auto 22px;
    background-position-x: 40px;
  }
  #parameter .nav-container .nav .middle {
    width: calc(100% - 400px);
  }
  #parameter .nav-container .nav .right {
    width: 200px;
    padding-right: 40px;
    color: #1bc9be;
  }
  #parameter .nav-container .nav.black .logo {
    background-image: url(../images/9f0077e.svg);
  }
}
@media screen and (min-width: 1024px) {
  #parameter .nav-container .nav .logo {
    padding-left: 0;
    background-position-x: 0;
  }
  #parameter .nav-container .nav .right {
    padding-right: 0;
  }
}

.enter-fade {
  opacity: 0;
}
.fade-in {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards;
}
.fade-out {
  opacity: 1;
  -webkit-animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
          animation: fade-reverse 0.5s ease-out 0s 1 normal forwards;
}
.fade-up {
  opacity: 0;
  -webkit-animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
          animation: fade 0.5s ease-in 0s 1 normal forwards, up-short-extra 0.5s ease 0s 1 normal forwards;
}
@-webkit-keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-1 {
  0% {
    -webkit-transform: translateY(13px);
            transform: translateY(13px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-2 {
  0% {
    -webkit-transform: translateY(16px);
            transform: translateY(16px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-3 {
  0% {
    -webkit-transform: translateY(19px);
            transform: translateY(19px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-4 {
  0% {
    -webkit-transform: translateY(22px);
            transform: translateY(22px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-5 {
  0% {
    -webkit-transform: translateY(25px);
            transform: translateY(25px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-6 {
  0% {
    -webkit-transform: translateY(28px);
            transform: translateY(28px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes shift-7 {
  0% {
    -webkit-transform: translateY(31px);
            transform: translateY(31px);
  }
  100% {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@keyframes zoom-in {
  from {
    -webkit-transform: scale(0.95);
            transform: scale(0.95);
  }
  to {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}
@-webkit-keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@keyframes border-fade {
  from {
    border-color: #66d6d6;
  }
  to {
    border-color: rgba(102,214,214,0);
  }
}
@-webkit-keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes fade {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@-webkit-keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@keyframes fade-reverse {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
@-webkit-keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@keyframes sector-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
}
@-webkit-keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes sector-rotate-reverse {
  from {
    -webkit-transform: rotate(-180deg);
            transform: rotate(-180deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@-webkit-keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@keyframes title-fade {
  from {
    opacity: 0;
    -webkit-transform: translateY(5vw);
            transform: translateY(5vw);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
  }
}
@-webkit-keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@keyframes up-short {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-15vw);
            transform: translateY(-15vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@keyframes up-long {
  from {
    -webkit-transform: translateY(0px);
            transform: translateY(0px);
    opacity: 0;
  }
  to {
    -webkit-transform: translateY(-50vw);
            transform: translateY(-50vw);
    opacity: 1;
  }
}
@-webkit-keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@keyframes up-short-extra {
  from {
    -webkit-transform: translateY(15vw);
            transform: translateY(15vw);
  }
  to {
    -webkit-transform: translateY(0vw);
            transform: translateY(0vw);
  }
}
@-webkit-keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@keyframes right-short {
  from {
    -webkit-transform: translateX(-7vw);
            transform: translateX(-7vw);
  }
  to {
    -webkit-transform: translateX(0vw);
            transform: translateX(0vw);
  }
}
@-webkit-keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@keyframes camera-rotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
}
@-webkit-keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
@keyframes camera-rotate-reverse {
  from {
    -webkit-transform: rotate(-10.8deg);
            transform: rotate(-10.8deg);
  }
  to {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
}
.g-title,
.g-title-lg,
.g-title-md,
.g-title-sm,
.g-parameter-name {
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 600;
  font-size: 34px;
  line-height: 50px;
  color: #333;
}
.g-title-md,
.g-parameter-name {
  font-size: 24px;
  line-height: 45px;
}
.g-title-sm {
  font-size: 22px;
  line-height: 40px;
  color: #333;
}
.g-text,
.g-parameter-value,
#footer .link-module,
#footer .link-module a {
  font-family: OPPO, 'PingFang SC', 'Hiragino Sans GB', 'Heiti SC', 'STHeiti', 'Microsoft YaHei', 'WenQuanYi Micro Hei', 'Helvetica Neue', 'Helvetica', 'Arial', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 26px;
  color: #666;
}
.g-parameter-name {
  font-size: 24px;
  line-height: 40px;
}
.g-parameter-value {
  font-size: 13px;
  line-height: 18px;
}
@media screen and (min-width: 568px) {
  .g-title-lg {
    font-size: 40px;
    line-height: 64px;
  }
  .g-title-md,
  .g-parameter-name {
    font-size: 36px;
    line-height: 60px;
  }
  .g-title-sm {
    font-size: 24px;
    line-height: 45px;
  }
  .g-text,
  .g-parameter-value,
  #footer .link-module,
  #footer .link-module a {
    font-size: 16px;
    line-height: 27px;
  }
  .g-parameter-name {
    font-size: 32px;
    font-weight: 400;
    line-height: 45px;
  }
  .g-parameter-value {
    font-size: 16px;
    line-height: 22px;
  }
}
@media screen and (min-width: 1024px) {
  .g-title-lg {
    font-size: 40px;
    line-height: 66px;
  }
  .g-title-md,
  .g-parameter-name {
    font-size: 36px;
    line-height: 60px;
  }
  .g-title-sm {
    font-size: 24px;
    line-height: 45px;
  }
  .g-text,
  .g-parameter-value,
  #footer .link-module,
  #footer .link-module a {
    font-size: 18px;
    line-height: 32px;
  }
  .g-parameter-name {
    font-size: 32px;
    font-weight: 400;
    line-height: 56px;
  }
  .g-parameter-value {
    font-size: 14px;
    line-height: 25px;
  }
}
@media screen and (min-width: 1920px) {
  .g-title-lg {
    font-size: 58px;
    line-height: 78px;
  }
  .g-title-md,
  .g-parameter-name {
    font-size: 54px;
    line-height: 74px;
  }
  .g-title-sm {
    font-size: 22px;
    line-height: 40px;
  }
  .g-text,
  .g-parameter-value,
  #footer .link-module,
  #footer .link-module a {
    font-size: 18px;
    line-height: 32px;
  }
  .g-parameter-name {
    font-size: 40px;
    line-height: 56px;
  }
  .g-parameter-value {
    font-size: 18px;
    line-height: 25px;
  }
}
#footer {
  background-color: #000;
  padding-bottom: 90px;
}
@media screen and (max-width: 567px) {
  #footer {
    padding-left: 12vw;
    padding-right: 12vw;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #footer {
    padding-left: 6vw;
    padding-right: 6vw;
  }
}
@media screen and (min-width: 1024px) {
  #footer {
    width: 960px;
    margin: auto;
  }
}
@media screen and (min-width: 1920px) {
  #footer {
    width: 1200px;
    margin: auto;
  }
}
#footer .content {
  padding-left: 0 !important;
  padding-right: 0 !important;
}
#footer .link-module {
  position: relative;
  cursor: pointer;
  text-align: center;
  display: inline-block;
  width: 36vw;
  height: 36vw;
  margin-bottom: 4vw;
  border-radius: 6px;
  font-size: 12px;
  line-height: 60vw;
  color: #fff;
}
#footer .link-module .link-text,
#footer .link-module a {
  position: relative;
  z-index: 2;
}
#footer .link-module.disabled {
  cursor: default;
}
#footer .link-module:hover:before,
#footer .link-module.disabled:before {
  content: '';
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0,0,0,0.3);
}
#footer .link-module a {
  font-size: 12px;
  line-height: 60vw;
  display: block;
  width: 100%;
  height: 100%;
  color: #fff;
  text-decoration: none;
}
#footer .link-module a:focus,
#footer .link-module a:active,
#footer .link-module a:hover {
  text-decoration: none;
  color: #fff;
}
#footer .link-module:nth-child(1),
#footer .link-module:nth-child(3),
#footer .link-module:nth-child(5) {
  margin-right: 4vw;
}
@media screen and (min-width: 1920px) {
  #footer {
    padding-bottom: 210px;
  }
  #footer .link-module {
    width: 390px;
    height: 390px;
    margin-bottom: 15px;
    border-radius: 15px;
    font-size: 19px;
    line-height: 680px;
  }
  #footer .link-module a {
    font-size: 19px;
    line-height: 680px;
  }
  #footer .link-module:nth-child(3),
  #footer .link-module:nth-child(6) {
    margin-right: 0px;
  }
  #footer .link-module:nth-child(1),
  #footer .link-module:nth-child(2),
  #footer .link-module:nth-child(4),
  #footer .link-module:nth-child(5) {
    margin-right: 15px;
  }
}
@media screen and (min-width: 1024px) {
  #footer {
    padding-bottom: 210px;
  }
  #footer .link-module {
    width: 310px;
    height: 310px;
    margin-bottom: 15px;
    border-radius: 10px;
    font-size: 16px;
    line-height: 540px;
  }
  #footer .link-module a {
    font-size: 16px;
    line-height: 540px;
  }
  #footer .link-module:nth-child(3),
  #footer .link-module:nth-child(6) {
    margin-right: 0px;
  }
  #footer .link-module:nth-child(1),
  #footer .link-module:nth-child(2),
  #footer .link-module:nth-child(4),
  #footer .link-module:nth-child(5) {
    margin-right: 15px;
  }
}
@media screen and (min-width: 568px) and (max-width: 1023px) {
  #footer {
    padding-bottom: 140px;
  }
  #footer .link-module {
    width: 41vw;
    height: 41vw;
    margin-bottom: 6vw;
    border-radius: 10px;
    font-size: 14px;
    line-height: 70vw;
  }
  #footer .link-module a {
    font-size: 14px;
    line-height: 70vw;
  }
  #footer .link-module:nth-child(1),
  #footer .link-module:nth-child(3),
  #footer .link-module:nth-child(5) {
    margin-right: 6vw;
  }
}