body {
  -webkit-text-size-adjust: 100% !important;
  background-color: #fff; }

body, dl, dd, ul, ol, h1, h2, h3, h4, h5, h6, p, form, header, section, article, footer {
  margin: 0; }

h1, h2, h3, h4, h5, h6 {
  font-size: 100%; }

em, b {
  font-style: normal; }

a {
  text-decoration: none; }

a:hover {
  text-decoration: underline; }

img {
  border: 0; }

button, input, select, textarea {
  font-size: 100%;
  outline: none; }

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

td, th, ul, ol {
  padding: 0; }

picture, picture img {
  display: block; }

picture img {
  width: 100%;
  height: 100%; }

br {
  opacity: 0; }

.homeSlider__navigationCircle {
  outline: none; }

.homeSlider__navigationArc {
  fill: transparent;
  stroke: #fff;
  opacity: 0.1; }

.homeSlider__navigationArc--front {
  opacity: 1; }

.homeSlider__navigationPin {
  fill: transparent;
  stroke: rgba(255, 255, 255, 0.1);
  pointer-events: all;
  -webkit-transition: all .3s ease;
  transition: all .3s ease;
  outline: none; }

.homeSlider__navigationPin--active {
  pointer-events: none;
  stroke: white; }

.homeSlider__navigationPinAfter {
  fill: transparent;
  stroke: #fff;
  pointer-events: none;
  opacity: 0; }

.swiper-arrow {
  display: none; }

@media screen and (max-width: 1080px) {
  .go-fiu1 {
    -webkit-animation: fadeInUp 1s forwards;
            animation: fadeInUp 1s forwards; }
  .go-fiu2 {
    -webkit-animation: fadeInUp 1s 200ms forwards;
            animation: fadeInUp 1s 200ms forwards; }
  .go-fiu3 {
    -webkit-animation: fadeInUpC 1s 400ms forwards;
            animation: fadeInUpC 1s 400ms forwards; }
  .pc-br {
    display: none; }
  #oc-container .section {
    width: 100%;
    position: relative;
    -webkit-transition: background-color 300ms;
    transition: background-color 300ms;
    font-weight: 300; }
  #oc-container .wrapper {
    width: 8.4rem;
    height: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    -webkit-transition: opacity 300ms;
    transition: opacity 300ms; }
  #oc-container .section-1 {
    background-color: #fff;
    height: calc(100vh - 1.28rem);
    overflow: hidden; }
  #oc-container .wrapper-1 {
    width: 100%; }
  .slogan-tit {
    width: 10.8rem;
    height: 7.83rem;
    opacity: 0;
    box-sizing: content-box;
    padding-top: 24vh; }
  .slogan-pic {
    width: 10.8rem;
    height: 12.53rem;
    opacity: 0;
    position: absolute;
    top: 26vh;
    left: 0; }
  .slogan-txt {
    width: 7.4rem;
    height: 1.59rem;
    position: absolute;
    top: 6vh;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    opacity: 0; }
  .slogan-txt img {
    width: 100%;
    height: 100%; }
  .slogan-txt .sgt-1 {
    color: #020101;
    font-size: 0.845rem;
    line-height: 1.2;
    font-weight: 500;
    white-space: nowrap;
    position: relative;
    top: -0.3rem; }
  .slogan-txt .sgt-2 {
    color: #020101;
    font-size: 0.383rem;
    line-height: 1.2;
    font-weight: 500;
    white-space: nowrap;
    padding-left: 0.05rem; }
  #oc-container .section-2 {
    background-color: #f7f7f7;
    height: auto;
    overflow: hidden; }
  .model-1 {
    width: 25.6rem;
    height: 8.54rem;
    margin-left: -5.8rem;
    overflow: hidden; }
  .model-1 img {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s; }
  .enco-desc-icon-list {
    position: absolute;
    top: 6.54rem;
    left: 0.2rem;
    font-size: 0;
    line-height: 0;
    white-space: nowrap; }
  .edi-item {
    display: inline-block;
    vertical-align: top;
    width: auto;
    text-align: center;
    margin-right: 1.41rem; }
  .edi-item .edi-icon {
    display: block;
    width: 0.63rem;
    height: 0.53rem;
    margin: 0 auto 0.1rem;
    position: relative; }
  .edi-item .edi-txt {
    color: #fff;
    font-size: 0.22rem;
    line-height: 1.6; }
  .colors-show {
    width: 8.5rem;
    margin: 0 auto;
    font-size: 0;
    white-space: nowrap;
    opacity: 1;
    position: relative;
    padding: 1.46rem 0; }
  .cs-item {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin-right: 1.22rem; }
  .cs-item:nth-child(1) {
    -webkit-transition: all 1s;
    transition: all 1s; }
  .cs-item:nth-child(2) {
    -webkit-transition: all 1s 100ms;
    transition: all 1s 100ms; }
  .cs-item:nth-child(3) {
    -webkit-transition: all 1s 200ms;
    transition: all 1s 200ms; }
  .cs-enco-1, .cs-enco-2, .cs-enco-3 {
    position: relative;
    width: 1.97rem;
    height: 3.32rem;
    margin-bottom: 0.14rem; }
  .cs-item span {
    color: #000;
    font-size: 0.27rem;
    line-height: 1.2; }
  .black-title, .black-text, .white-title, .white-text {
    width: 100%;
    margin: 0; }
  .black-title, .black-text {
    color: #fff; }
  .white-title {
    color: #000; }
  .white-text {
    color: #333; }
  .black-title, .white-title {
    font-size: 0.64rem;
    line-height: 1.6;
    padding-top: 1.6rem;
    font-weight: 500; }
  .black-text, .white-text {
    font-size: 0.44rem;
    line-height: 1.6;
    padding-top: 0.34rem; }
  .white-tips {
    color: #bdbdbd;
    font-size: 0.15rem;
    line-height: 1.4;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 0.3rem;
    left: 0; }
  #oc-container .section-3 {
    background-color: #000; }
  .swiper-container {
    width: 10.8rem;
    height: 10.8rem;
    padding: 0.6rem 0 1.6rem;
    overflow: hidden;
    position: relative;
    left: -1.15rem;
    box-sizing: content-box; }
  .swiper-slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 0;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
    /*background:#000; background:linear-gradient(-48deg, #030000, #1b1d21);*/ }
  .swiper-slide.on {
    opacity: 1;
    z-index: 1; }
  .swiper-img {
    width: 10.8rem;
    height: 10.8rem;
    position: absolute;
    top: 1rem;
    left: 0; }
  .swiper-title {
    color: #898989;
    font-size: 0.27rem;
    line-height: 1.6;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 1.5rem; }
  .progress-circle {
    display: block;
    width: 100%;
    height: 0.3rem;
    position: absolute;
    bottom: 2rem;
    left: 0;
    font-size: 0;
    line-height: 0;
    text-align: center;
    z-index: 10; }
  .progress-circle .prog-item {
    display: inline-block;
    vertical-align: top;
    box-sizing: border-box;
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 100%;
    border: 1px solid #363636;
    margin: 0 0.3rem; }
  .progress-circle .prog-item.on {
    background-color: #666;
    border: none; }
  .swiper-arrow {
    display: block;
    width: 10rem;
    height: auto;
    position: absolute;
    bottom: 7.6rem;
    left: -0.8rem;
    z-index: 2; }
  .swiper-arrow::before {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    clear: both; }
  .swiper-arrow::after {
    content: '';
    display: block;
    width: 100%;
    height: 0;
    clear: both; }
  .swiper-arrow i {
    display: block;
    width: 0.21rem;
    height: 0.37rem;
    background: url(../png/swiper-arrow-52e4bbc413cc4a7898b785b571086ae7.png) no-repeat 0 0;
    background-size: 100% 100%;
    position: relative; }
  .swiper-arrow i::after {
    content: '';
    display: block;
    width: 1rem;
    height: 1rem;
    position: absolute;
    top: -0.31rem;
    left: -0.4rem; }
  .sa-prev {
    float: left;
    -webkit-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
            transform: rotate(180deg); }
  .sa-next {
    float: right; }
  #oc-container .section-4 {
    background-color: #f7f7f7; }
  .s5-text {
    width: 8.5rem;
    margin: 0 auto;
    padding: 0.56rem 0;
    font-size: 0;
    line-height: 0;
    text-align: left;
    white-space: nowrap; }
  .s5-t {
    display: block;
    color: #333;
    font-size: 0.27rem;
    line-height: 1.4; }
  .s5-t:first-child {
    margin-bottom: 0.36rem; }
  .s5-t b {
    display: block;
    font-size: 0.54rem;
    color: #000;
    font-weight: 400; }
  .s5-desc {
    width: 8.4rem;
    height: 5.3rem;
    background-color: #fff;
    position: relative;
    margin: 0 auto; }
  .s5-desc-img {
    width: 5.91rem;
    height: 2.98rem;
    padding: 0.32rem 0 0.34rem;
    margin: 0 auto;
    box-sizing: content-box; }
  .s5-desc-img img {
    width: 100%;
    height: 100%; }
  .s5-d {
    color: #616161;
    font-size: 0.22rem;
    line-height: 1.8;
    position: absolute;
    top: 3.66rem;
    text-align: center;
    width: 50%; }
  .s5-d span {
    display: block;
    color: #bdbdbd;
    line-height: 1.6; }
  .s5-d.s5-d1 {
    left: 0; }
  .s5-d.s5-d2 {
    right: 0; }
  .model-2 {
    width: 8.4rem;
    height: 11.5rem;
    padding-bottom: 1.8rem;
    margin: 0 auto;
    box-sizing: content-box; }
  .model-2 img {
    width: 100%;
    height: 100%; }
  #oc-container .section-5 {
    background-color: #fff; }
  .enco-parts {
    position: relative;
    top: 0.9rem;
    left: -0.6rem;
    padding-bottom: 3.84rem;
    height: 4.46rem;
    width: 9.7rem;
    box-sizing: content-box; }
  .enp {
    position: absolute;
    -webkit-transition: -webkit-transform 1000ms;
    transition: -webkit-transform 1000ms;
    transition: transform 1000ms;
    transition: transform 1000ms, -webkit-transform 1000ms; }
  .enp picture {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0; }
  .enp-1 {
    width: 1.7rem;
    height: 4.36rem;
    top: 0.04rem;
    left: 0;
    z-index: 1; }
  .enp-2 {
    width: 0.56rem;
    height: 0.73rem;
    top: 0.56rem;
    left: 1.86rem;
    z-index: 2;
    -webkit-transform: translateX(-0.76rem);
        -ms-transform: translateX(-0.76rem);
            transform: translateX(-0.76rem); }
  .enp-3 {
    width: 0.84rem;
    height: 1.54rem;
    top: 0.14rem;
    left: 2.58rem;
    z-index: 3;
    -webkit-transform: translateX(-1.61rem);
        -ms-transform: translateX(-1.61rem);
            transform: translateX(-1.61rem); }
  .enp-4 {
    width: 0.53rem;
    height: 0.74rem;
    top: 0.54rem;
    left: 3.62rem;
    z-index: 4;
    -webkit-transform: translateX(-2.4rem);
        -ms-transform: translateX(-2.4rem);
            transform: translateX(-2.4rem); }
  .enp-4-2 {
    width: 0.31rem;
    height: 0.58rem;
    top: 0.62rem;
    left: 3.96rem;
    z-index: 5;
    -webkit-transform: translateX(-2.7rem);
        -ms-transform: translateX(-2.7rem);
            transform: translateX(-2.7rem); }
  .enp-5 {
    width: 0.8rem;
    height: 1.55rem;
    top: 0.14rem;
    left: 4.52rem;
    z-index: 6;
    -webkit-transform: translateX(-3.54rem);
        -ms-transform: translateX(-3.54rem);
            transform: translateX(-3.54rem); }
  .enp-6 {
    width: 0.69rem;
    height: 1.33rem;
    top: 0.2rem;
    left: 5.4rem;
    z-index: 7;
    -webkit-transform: translateX(-4.3rem);
        -ms-transform: translateX(-4.3rem);
            transform: translateX(-4.3rem); }
  .enp-7 {
    width: 0.72rem;
    height: 1.4rem;
    top: 0.18rem;
    left: 6.28rem;
    z-index: 8;
    -webkit-transform: translateX(-5.34rem);
        -ms-transform: translateX(-5.34rem);
            transform: translateX(-5.34rem); }
  .enp-8 {
    width: 0.53rem;
    height: 1.05rem;
    top: 0.36rem;
    left: 6.82rem;
    z-index: 9;
    -webkit-transform: translateX(-5.67rem);
        -ms-transform: translateX(-5.67rem);
            transform: translateX(-5.67rem); }
  .enp-9 {
    width: 1.38rem;
    height: 1.77rem;
    top: 0;
    left: 7.58rem;
    z-index: 11;
    -webkit-transform: translateX(-6.84rem);
        -ms-transform: translateX(-6.84rem);
            transform: translateX(-6.84rem); }
  .enp-10 {
    width: 0.52rem;
    height: 1.44rem;
    top: 0.18rem;
    left: 9.12rem;
    z-index: 10;
    -webkit-transform: translateX(-7.35rem);
        -ms-transform: translateX(-7.35rem);
            transform: translateX(-7.35rem); }
  .enp-10-2 {
    width: 0.52rem;
    height: 1.44rem;
    top: 0.18rem;
    left: 9.12rem;
    z-index: 12;
    -webkit-transform: translateX(-7.35rem);
        -ms-transform: translateX(-7.35rem);
            transform: translateX(-7.35rem); }
  .enco-texts {
    width: 4.06rem;
    height: 2.56rem;
    -webkit-transition: opacity 1000ms;
    transition: opacity 1000ms;
    position: absolute;
    top: 2rem;
    left: 2.94rem; }
  .enco-texts ol {
    width: 100%;
    height: 100%; }
  .enco-line {
    display: block;
    width: 1px;
    height: 2.56rem;
    background: url(../png/epn-tip-34de11751e2fad587cc0f2eb28bcc062.png) no-repeat 0 0;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    -webkit-transition: height 1000ms;
    transition: height 1000ms; }
  .enco-t1 {
    left: 0;
    height: 1rem; }
  .enco-t2 {
    left: 1.04rem; }
  .enco-t3 {
    left: 1.92rem;
    height: 1rem; }
  .enco-t4 {
    left: 2.78rem;
    height: 3.1rem; }
  .enco-t5 {
    right: 0;
    height: 1rem; }
  .enco-line p {
    position: absolute;
    left: 50%;
    top: calc(100% + 0.12rem);
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 3rem;
    color: #333;
    font-size: 0.2rem;
    line-height: 1.4;
    text-align: center;
    font-weight: 500; }
  .enco-line p span {
    display: block; }
  #oc-container .section-6 {
    background-color: #fff; }
  .model-3 {
    width: 8.4rem;
    height: 10.16rem;
    padding: 0.74rem 0 1.8rem;
    margin: 0 auto;
    box-sizing: content-box;
    -webkit-mask: url(../png/model3-mask-c94c837969e407c791755c4ba5e4dd85.png) no-repeat 50% 50%/100% 4%;
            mask: url(../png/model3-mask-c94c837969e407c791755c4ba5e4dd85.png) no-repeat 50% 50%/100% 4%;
    -webkit-transition: -webkit-mask 1s;
    transition: -webkit-mask 1s;
    transition: mask 1s;
    transition: mask 1s, -webkit-mask 1s; }
  #oc-container .section-7 {
    background-color: #f7f7f7; }
  .two-earphones {
    width: 8.5rem;
    height: 9.4rem;
    margin: 0 auto;
    padding: 0.82rem 0 1.7rem;
    box-sizing: content-box;
    position: relative; }
  .earphone-1, .earphone-2 {
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s; }
  .earphone-1 {
    width: 3.26rem;
    height: 7.12rem;
    position: absolute;
    top: 0.82rem;
    right: 50%;
    margin-right: -0.14rem; }
  .earphone-2 {
    width: 3.27rem;
    height: 7.12rem;
    position: absolute;
    top: 3.1rem;
    left: 50%;
    margin-left: -0.14rem; }
  .i-gesture-1, .i-gesture-2 {
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s; }
  .i-gesture-1 {
    width: 0.46rem;
    height: 1rem;
    top: 4.14rem;
    margin-right: 2.04rem;
    right: 50%; }
  .i-gesture-2 {
    width: 0.41rem;
    height: 0.7rem;
    top: 6.84rem;
    margin-left: 2.04rem;
    left: 50%; }
  .gesture-txt-1, .gesture-txt-2 {
    color: #424242;
    font-size: 0.22rem;
    line-height: 0.38rem;
    position: absolute;
    width: 3.4rem; }
  .gesture-txt-1 {
    top: 5.34rem;
    margin-right: 2.04rem;
    text-align: right;
    right: 50%; }
  .gesture-txt-2 {
    top: 7.76rem;
    margin-left: 2.04rem;
    left: 50%; }
  .gesture-txt-1 b, .gesture-txt-2 b {
    color: #000;
    line-height: 0.4rem;
    font-weight: normal;
    display: block;
    font-weight: 500; }
  .gesture-txt-1 span, .gesture-txt-2 span {
    display: block; }
  #oc-container .section-8 {
    background-color: #fff;
    overflow: hidden; }
  .section-8 .white-title {
    white-space: nowrap; }
  .earphone-3, .earphone-4 {
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s;
    position: absolute; }
  .earphone-3 {
    width: 2.82rem;
    height: 4.31rem;
    bottom: 2.62rem;
    right: -0.06rem;
    box-sizing: content-box; }
  .earphone-4 {
    width: 4.83rem;
    height: 7.39rem;
    bottom: -2rem;
    left: -0.2rem;
    box-sizing: content-box; }
  .earp3-desc, .earp4-desc {
    color: #333;
    font-size: 0.27rem;
    line-height: 1.2;
    position: absolute;
    white-space: nowrap; }
  .earp3-desc {
    top: 3.52rem;
    left: 1.5rem; }
  .earp4-desc {
    top: 4.1rem;
    left: 3.74rem; }
  .char-list {
    width: 8.5rem;
    height: 3rem;
    font-size: 0;
    line-height: 0;
    text-align: right;
    box-sizing: content-box;
    padding: 0.76rem 0 7.8rem; }
  .char-item {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    height: 1.72rem;
    padding-left: 0.26rem;
    position: relative;
    text-align: left; }
  .char-item:nth-child(2) .char-con, .char-item:nth-child(4) .char-con {
    width: 8em; }
  .cl-absolute .char-item {
    overflow: hidden;
    -webkit-transition: all 1s;
    transition: all 1s; }
  .i-char {
    display: block;
    width: 1px;
    height: 0.94rem;
    background-color: #a2a2a2;
    position: absolute;
    top: 0.14rem;
    left: 0; }
  .char-tit {
    color: #000;
    font-size: 0.27rem;
    line-height: 1.2;
    margin-bottom: 0.13rem; }
  .char-tit b {
    font-size: 0.44rem;
    font-weight: normal;
    font-weight: 500; }
  .char-con {
    color: #333;
    font-size: 0.27rem;
    line-height: 1.2;
    white-space: nowrap; }
  #oc-container .section-9 {
    background-color: #000; }
  .section-9 .black-title {
    white-space: nowrap; }
  .section-9 .black-text {
    position: relative;
    z-index: 1; }
  .earphone-5 {
    display: block;
    width: 9.8rem;
    height: 5.13rem;
    margin: -2rem 0 0 -0.65rem;
    padding-bottom: 1.4rem;
    box-sizing: content-box;
    position: relative;
    z-index: 0;
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s; }
  #oc-container .section-10 {
    background-color: #fff; }
  .section-10 .white-title {
    white-space: nowrap; }
  .section-10 .char-list {
    text-align: center;
    height: auto;
    margin: 0;
    width: 100%;
    padding-bottom: 0; }
  .section-10 .char-item {
    padding: 0;
    width: 60%;
    display: inline-block; }
  .section-10 .char-item:nth-child(2) {
    width: 40%; }
  .section-10 .char-item .char-con {
    width: 11em; }
  .earphone-6 {
    width: 4.85rem;
    height: 6.96rem;
    margin: -7.8rem auto 0;
    padding-bottom: 2.4rem;
    box-sizing: content-box;
    position: relative; }
  .earphone-6 img {
    width: 100%;
    height: 100%; }
  .i-breath-light {
    width: 0.06rem;
    height: 0.13rem;
    background: url(../png/earphone6-light-72047905234eb3801ecd9caa05857ac4.png) no-repeat 0 0;
    background-size: 100% 100%;
    position: absolute;
    top: 3.12rem;
    left: 2.4rem;
    -webkit-filter: brightness(1.3);
            filter: brightness(1.3); }
  .i-breath-light.animation-go {
    -webkit-animation: breath-light 1200ms 100ms linear infinite alternate;
            animation: breath-light 1200ms 100ms linear infinite alternate; }
  @-webkit-keyframes breath-light {
    0% {
      opacity: 0; }
    90% {
      opacity: 1; }
    100% {
      opacity: 1; } }
  @keyframes breath-light {
    0% {
      opacity: 0; }
    90% {
      opacity: 1; }
    100% {
      opacity: 1; } }
  .earphone-6-circle {
    width: 15.72rem;
    height: 2.38rem;
    position: relative;
    margin: 5.8rem 0 0 -3.61rem; }
  .ear-cir-1, .ear-cir-2, .ear-cir-3, .ear-cir-4, .ear-cir-5, .ear-cir-6, .ear-cir-7, .ear-cir-8 {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../png/earphone-6-circle-3da45c62e69de1bf91d96f4b4e960727.png) no-repeat;
    background-size: 100%;
    -webkit-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-animation: 2400ms steps(10, start) infinite;
            animation: 2400ms steps(10, start) infinite; }
  .ear-cir-1 {
    -webkit-animation-name: ear-cir-step-1;
            animation-name: ear-cir-step-1;
    -webkit-animation-delay: 700ms;
            animation-delay: 700ms; }
  .ear-cir-2 {
    -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
            transform: scale(0.9);
    -webkit-animation-name: ear-cir-step-2;
            animation-name: ear-cir-step-2;
    -webkit-animation-delay: 600ms;
            animation-delay: 600ms; }
  .ear-cir-3 {
    -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
            transform: scale(0.8);
    -webkit-animation-name: ear-cir-step-3;
            animation-name: ear-cir-step-3;
    -webkit-animation-delay: 500ms;
            animation-delay: 500ms; }
  .ear-cir-4 {
    -webkit-transform: scale(0.7);
        -ms-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-animation-name: ear-cir-step-4;
            animation-name: ear-cir-step-4;
    -webkit-animation-delay: 400ms;
            animation-delay: 400ms; }
  .ear-cir-5 {
    -webkit-transform: scale(0.62);
        -ms-transform: scale(0.62);
            transform: scale(0.62);
    -webkit-animation-name: ear-cir-step-5;
            animation-name: ear-cir-step-5;
    -webkit-animation-delay: 300ms;
            animation-delay: 300ms; }
  .ear-cir-6 {
    -webkit-transform: scale(0.56);
        -ms-transform: scale(0.56);
            transform: scale(0.56);
    -webkit-animation-name: ear-cir-step-6;
            animation-name: ear-cir-step-6;
    -webkit-animation-delay: 200ms;
            animation-delay: 200ms; }
  .ear-cir-7 {
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-animation-name: ear-cir-step-7;
            animation-name: ear-cir-step-7;
    -webkit-animation-delay: 100ms;
            animation-delay: 100ms; }
  .ear-cir-8 {
    -webkit-transform: scale(0.44);
        -ms-transform: scale(0.44);
            transform: scale(0.44);
    -webkit-animation-name: ear-cir-step-8;
            animation-name: ear-cir-step-8; }
  @-webkit-keyframes ear-cir-step-1 {
    0% {
      opacity: 0; }
    20% {
      opacity: 0.4; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @keyframes ear-cir-step-1 {
    0% {
      opacity: 0; }
    20% {
      opacity: 0.4; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @-webkit-keyframes ear-cir-step-2 {
    0% {
      opacity: 0; }
    20% {
      opacity: 0.6; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @keyframes ear-cir-step-2 {
    0% {
      opacity: 0; }
    20% {
      opacity: 0.6; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @-webkit-keyframes ear-cir-step-3 {
    0% {
      opacity: 0; }
    20% {
      opacity: 0.8; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @keyframes ear-cir-step-3 {
    0% {
      opacity: 0; }
    20% {
      opacity: 0.8; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @-webkit-keyframes ear-cir-step-4 {
    0% {
      opacity: 0; }
    20% {
      opacity: 1.2; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @keyframes ear-cir-step-4 {
    0% {
      opacity: 0; }
    20% {
      opacity: 1.2; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @-webkit-keyframes ear-cir-step-5 {
    0% {
      opacity: 0; }
    20% {
      opacity: 1.64; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @keyframes ear-cir-step-5 {
    0% {
      opacity: 0; }
    20% {
      opacity: 1.64; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @-webkit-keyframes ear-cir-step-6 {
    0% {
      opacity: 0; }
    20% {
      opacity: 1.72; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @keyframes ear-cir-step-6 {
    0% {
      opacity: 0; }
    20% {
      opacity: 1.72; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @-webkit-keyframes ear-cir-step-7 {
    0% {
      opacity: 0; }
    20% {
      opacity: 1.8; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @keyframes ear-cir-step-7 {
    0% {
      opacity: 0; }
    20% {
      opacity: 1.8; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @-webkit-keyframes ear-cir-step-8 {
    0% {
      opacity: 0; }
    20% {
      opacity: 2; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @keyframes ear-cir-step-8 {
    0% {
      opacity: 0; }
    20% {
      opacity: 2; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  #oc-container .section-11 {
    background-color: #f7f7f7; }
  #oc-container .wrapper-11 {
    height: auto; }
  .hidden-box {
    padding: 0.7rem 1rem 2rem 0;
    position: relative; }
  .phone-show {
    width: 4.35rem;
    height: 9.64rem;
    position: relative;
    overflow: hidden;
    margin-left: auto; }
  .phone-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-mask: url(../png/phone-mask-3a2c0dcd6b8de51542a7598e6e2da01b.png) 0 0/100% 100%;
    mask: url(../png/phone-mask-3a2c0dcd6b8de51542a7598e6e2da01b.png) 0 0/100% 100%; }
  .phone {
    width: 100%;
    height: 100%;
    position: relative; }
  .connecting-video {
    width: 96%;
    height: 94%;
    position: absolute;
    top: 1.6%;
    left: 2%;
    overflow: hidden; }
  .connecting {
    position: relative;
    display: block;
    width: 100%;
    height: 100%; }
  .connecting-mask {
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: opacity 1s 200ms;
    transition: opacity 1s 200ms; }
  .connecting-ui {
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: opacity 0s 1200ms;
    transition: opacity 0s 1200ms; }
  .connecting-ui img {
    display: block;
    width: 100%;
    height: auto; }
  .connecting-ui0 {
    opacity: 1; }
  .connecting-ui1 {
    opacity: 0; }
  .connecting-inside {
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
            transform: translateY(100%);
    -webkit-transition: -webkit-transform 1s 200ms;
    transition: -webkit-transform 1s 200ms;
    transition: transform 1s 200ms;
    transition: transform 1s 200ms, -webkit-transform 1s 200ms; }
  .connecting-inside img {
    display: block;
    width: 100%;
    height: auto; }
  .connecting-video.on .connecting-mask {
    opacity: 0.4; }
  .connecting-video.on .connecting-ui0 {
    opacity: 0; }
  .connecting-video.on .connecting-ui1 {
    opacity: 1; }
  .connecting-video.on .connecting-inside {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0); }
  .phone-border {
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0; }
  .earphone-7-outer {
    width: 3.12rem;
    height: 4.45rem;
    position: absolute;
    bottom: 2rem;
    right: 4.45rem;
    -webkit-transition: opacity 500ms, -webkit-transform 1s;
    transition: opacity 500ms, -webkit-transform 1s;
    transition: opacity 500ms, transform 1s;
    transition: opacity 500ms, transform 1s, -webkit-transform 1s; }
  #oc-container .section-12 {
    background-color: #fff; }
  #oc-container .wrapper-12 {
    width: 100%; }
  .product {
    width: 8.82rem;
    height: 3.86rem;
    position: relative;
    margin: 0 auto 1.1rem;
    padding-top: 1.24rem;
    box-sizing: content-box; }
  .product-title {
    color: #333;
    font-size: 0.44rem;
    line-height: 1.8;
    font-weight: 500;
    padding: 0 1.15rem 0.69rem;
    border-bottom: 1px solid #dfdfdf; }
  .product-parameter {
    width: 100%;
    margin-bottom: 1.13rem; }
  .product-parameter tr {
    height: 1.22rem;
    border-bottom: 1px solid #dfdfdf; }
  .product-parameter td {
    width: 50%;
    height: 1.22rem;
    font-size: 0.27rem;
    line-height: 0.66rem;
    vertical-align: middle; }
  .product-parameter td.pp-t {
    color: #606060;
    padding-left: 1.15rem; }
  .product-parameter td.pp-s {
    color: #bdbdbd;
    padding-right: 1.15rem; }
  .last-tips {
    padding-bottom: 1.49rem;
    width: 8.5rem;
    margin: 0 auto; }
  .last-tips p {
    color: #bdbdbd;
    font-size: 0;
    line-height: 2;
    padding-left: 0.5rem;
    text-indent: -0.5rem; }
  .last-tips p i {
    display: inline-block;
    width: 0.5rem;
    font-size: 0.15rem;
    text-indent: 0;
    font-style: normal; }
  .last-tips p span {
    font-size: 0.15rem; }
  .fade-in-up-anim {
    -webkit-animation: fadeInUp 1s forwards;
            animation: fadeInUp 1s forwards; }
  @-webkit-keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translateY(20%);
              transform: translateY(20%); }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0); } }
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translateY(20%);
              transform: translateY(20%); }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0); } }
  .fade-Out-up-anim {
    -webkit-animation: fadeOutUp 1s forwards;
            animation: fadeOutUp 1s forwards; }
  @-webkit-keyframes fadeOutUp {
    0% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0); }
    100% {
      opacity: 0;
      -webkit-transform: translateY(20%);
              transform: translateY(20%); } }
  @keyframes fadeOutUp {
    0% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0); }
    100% {
      opacity: 0;
      -webkit-transform: translateY(20%);
              transform: translateY(20%); } }
  .fade-in-left-anim {
    -webkit-animation: fadeInLeft 1s forwards;
            animation: fadeInLeft 1s forwards; }
  @-webkit-keyframes fadeInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(50%);
              transform: translateX(50%); }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0); } }
  @keyframes fadeInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(50%);
              transform: translateX(50%); }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0); } }
  .fade-Out-left-anim {
    -webkit-animation: fadeOutLeft 1s forwards;
            animation: fadeOutLeft 1s forwards; }
  @-webkit-keyframes fadeOutLeft {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0); }
    100% {
      opacity: 0;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%); } }
  @keyframes fadeOutLeft {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0); }
    100% {
      opacity: 0;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%); } }
  .fade-in-right-anim {
    -webkit-animation: fadeInRight 1s forwards;
            animation: fadeInRight 1s forwards; }
  @-webkit-keyframes fadeInRight {
    0% {
      opacity: 0;
      -webkit-transform: translateX(50%);
              transform: translateX(50%); }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0); } }
  @keyframes fadeInRight {
    0% {
      opacity: 0;
      -webkit-transform: translateX(50%);
              transform: translateX(50%); }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0); } }
  .fade-Out-right-anim {
    -webkit-animation: fadeOutRight 1s forwards;
            animation: fadeOutRight 1s forwards; }
  @-webkit-keyframes fadeOutRight {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0); }
    100% {
      opacity: 0;
      -webkit-transform: translateX(50%);
              transform: translateX(50%); } }
  @keyframes fadeOutRight {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0); }
    100% {
      opacity: 0;
      -webkit-transform: translateX(50%);
              transform: translateX(50%); } }
  @-webkit-keyframes fadeInUpC {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-50%) matrix(1, 0, 0, 1, 0, 100);
              transform: translateX(-50%) matrix(1, 0, 0, 1, 0, 100); }
    100% {
      opacity: 1;
      -webkit-transform: translateX(-50%) matrix(1, 0, 0, 1, 0, 0);
              transform: translateX(-50%) matrix(1, 0, 0, 1, 0, 0); } }
  @keyframes fadeInUpC {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-50%) matrix(1, 0, 0, 1, 0, 100);
              transform: translateX(-50%) matrix(1, 0, 0, 1, 0, 100); }
    100% {
      opacity: 1;
      -webkit-transform: translateX(-50%) matrix(1, 0, 0, 1, 0, 0);
              transform: translateX(-50%) matrix(1, 0, 0, 1, 0, 0); } } }

@media screen and (min-width: 1081px) {
  .go-fiu1 {
    -webkit-animation: fadeInUpC 1s forwards;
            animation: fadeInUpC 1s forwards; }
  .go-fiu2 {
    -webkit-animation: fadeInUpC 1s 200ms forwards;
            animation: fadeInUpC 1s 200ms forwards; }
  .go-fiu3 {
    -webkit-animation: fadeInUp 1s 400ms forwards;
            animation: fadeInUp 1s 400ms forwards; }
  .m-br {
    display: none; }
  #oc-container .section {
    width: 100%;
    position: relative;
    -webkit-transition: background-color 300ms;
    transition: background-color 300ms;
    font-weight: 300; }
  #oc-container .wrapper {
    width: 12rem;
    height: 100%;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    -webkit-transition: opacity 300ms;
    transition: opacity 300ms; }
  #oc-container .section-1 {
    background-color: #fff;
    height: 12rem;
    overflow: hidden; }
  #oc-container .wrapper-1 {
    width: 100%; }
  .slogan-tit {
    width: 25.6rem;
    height: 3.77rem;
    position: absolute;
    top: 0.52rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    opacity: 0; }
  .slogan-pic {
    width: 10rem;
    height: 9.78rem;
    position: absolute;
    bottom: 0.3rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    opacity: 0; }
  .slogan-txt {
    width: 5.03rem;
    height: 1.08rem;
    position: absolute;
    bottom: 0.54rem;
    right: 0.56rem;
    opacity: 0; }
  .slogan-txt .sgt-1 {
    color: #020101;
    font-size: 0.53rem;
    line-height: 1.2;
    font-weight: 500;
    white-space: nowrap;
    position: relative;
    top: -0.19rem; }
  .slogan-txt .sgt-2 {
    color: #020101;
    font-size: 0.24rem;
    line-height: 1.2;
    font-weight: 500;
    white-space: nowrap;
    padding-left: 0.06rem; }
  .m-screem #oc-container .section-1 {
    height: calc(100vh - 1.07rem);
    min-height: 10.84rem; }
  .m-screem .slogan-pic {
    width: 76.51vh;
    height: 74.83vh;
    min-width: 9.12rem;
    min-height: 8.92rem; }
  .m-screem .slogan-txt {
    width: 38.49vh;
    height: 8.26vh;
    min-width: 4.59rem;
    min-height: 0.98rem; }
  #oc-container .section-2 {
    background-color: #f7f7f7;
    height: auto;
    overflow: hidden; }
  .model-1 {
    width: 25.6rem;
    height: 8.54rem;
    margin-left: -5.8rem;
    overflow: hidden; }
  .model-1 img {
    display: block;
    width: 100%;
    height: 100%;
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s; }
  .enco-desc-icon-list {
    position: absolute;
    top: 6.54rem;
    left: 0.2rem;
    font-size: 0;
    line-height: 0;
    white-space: nowrap; }
  .edi-item {
    display: inline-block;
    vertical-align: top;
    width: auto;
    text-align: center;
    margin-right: 1.41rem; }
  .edi-item .edi-icon {
    display: block;
    width: 0.63rem;
    height: 0.53rem;
    margin: 0 auto 0.1rem;
    position: relative; }
  .edi-item .edi-txt {
    color: #fff;
    font-size: 0.22rem;
    line-height: 1.6; }
  .colors-show {
    width: 12rem;
    margin: 0 auto;
    font-size: 0;
    white-space: nowrap;
    opacity: 1;
    position: relative;
    padding: 1.06rem 0; }
  .cs-item {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin-right: 2.58rem; }
  .cs-item:nth-child(1) {
    -webkit-transition: all 1s;
    transition: all 1s; }
  .cs-item:nth-child(2) {
    -webkit-transition: all 1s 100ms;
    transition: all 1s 100ms; }
  .cs-item:nth-child(3) {
    -webkit-transition: all 1s 200ms;
    transition: all 1s 200ms; }
  .cs-enco-1, .cs-enco-2, .cs-enco-3 {
    position: relative;
    width: 2.27rem;
    height: 3.59rem;
    margin-bottom: 0.12rem; }
  .cs-item span {
    color: #000;
    font-size: 0.27rem;
    line-height: 1.2; }
  .black-title, .black-text, .white-title, .white-text {
    text-align: center;
    width: 100%;
    margin: 0; }
  .black-title, .black-text {
    color: #fff; }
  .white-title {
    color: #000; }
  .white-text {
    color: #333; }
  .black-title, .white-title {
    font-size: 0.64rem;
    line-height: 1.4;
    padding-top: 1.6rem;
    font-weight: 500; }
  .black-text, .white-text {
    font-size: 0.27rem;
    line-height: 1.6;
    padding-top: 0.34rem; }
  .white-tips {
    color: #bdbdbd;
    font-size: 0.12rem;
    line-height: 1.4;
    text-align: center;
    width: 100%;
    position: absolute;
    bottom: 0.3rem;
    left: 0; }
  #oc-container .section-3 {
    background-color: #000; }
  .swiper-container {
    width: 25.6rem;
    height: 8.4rem;
    overflow: hidden;
    position: relative;
    top: 0;
    left: -6.8rem;
    padding-top: 0.6rem;
    box-sizing: content-box; }
  .swiper-slide {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 0;
    -webkit-transition: opacity 1s;
    transition: opacity 1s;
    /*background:#000; background:linear-gradient(-48deg, #030000, #1b1d21);*/ }
  .swiper-slide.on {
    opacity: 1;
    z-index: 1; }
  .swiper-img {
    width: 8.4rem;
    height: 8.4rem;
    position: absolute;
    top: 0.6rem;
    left: 50%;
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%); }
  .swiper-title {
    color: #898989;
    font-size: 0.27rem;
    line-height: 1.8;
    text-align: center;
    width: 100%;
    position: absolute;
    top: 1.7rem; }
  .progress-circle {
    display: block;
    width: 8.4rem;
    height: 8.4rem;
    margin: -8.4rem auto 0;
    position: relative;
    z-index: 2;
    padding-bottom: 1rem;
    box-sizing: content-box; }
  #oc-container .section-4 {
    background-color: #f7f7f7; }
  .s5-text {
    width: 12rem;
    margin: 0 auto;
    padding: 0.6rem 0;
    font-size: 0;
    line-height: 0;
    text-align: center;
    white-space: nowrap; }
  .s5-t {
    display: block;
    color: #333;
    font-size: 0.27rem;
    line-height: 1.7;
    text-align: center;
    margin-right: 0; }
  .s5-t b {
    display: block;
    font-size: 0.4rem;
    color: #000;
    font-size: 0.39rem; }
  .s5-desc {
    width: 19rem;
    height: 3.92rem;
    background-color: #fff;
    position: relative;
    margin-left: -3.5rem; }
  .s5-desc-img {
    width: 4.89rem;
    height: 2.89rem;
    padding: 0.52rem 0 0;
    margin: 0 auto;
    box-sizing: content-box; }
  .s5-desc-img img {
    width: 100%;
    height: 100%; }
  .s5-d {
    color: #616161;
    font-size: 0.2rem;
    line-height: 1.8;
    position: absolute;
    top: 1.46rem; }
  .s5-d span {
    display: block;
    color: #bdbdbd;
    line-height: 1.6; }
  .s5-d.s5-d1 {
    right: 50%;
    margin-right: 3.24rem;
    text-align: right; }
  .s5-d.s5-d2 {
    left: 50%;
    margin-left: 3.24rem;
    text-align: left; }
  .model-2 {
    width: 19rem;
    height: 9rem;
    padding-bottom: 1.68rem;
    margin-left: -3.5rem;
    box-sizing: content-box; }
  .model-2 img {
    width: 100%;
    height: 100%; }
  #oc-container .section-5 {
    background-color: #fff; }
  .enco-parts {
    position: relative;
    top: 0.8rem;
    padding-bottom: 2.4rem;
    height: 5.07rem;
    width: 12rem;
    margin: 0 auto;
    box-sizing: content-box; }
  .enp {
    position: absolute;
    -webkit-transition: -webkit-transform 1000ms;
    transition: -webkit-transform 1000ms;
    transition: transform 1000ms;
    transition: transform 1000ms, -webkit-transform 1000ms; }
  .enp picture {
    width: 100%;
    height: 100%;
    top: 0;
    left: 0; }
  .enp-1 {
    width: 1.97rem;
    height: 5.07rem;
    top: 0.04rem;
    left: 0;
    z-index: 1; }
  .enp-2 {
    width: 0.67rem;
    height: 0.85rem;
    top: 0.64rem;
    left: 2.15rem;
    z-index: 2;
    -webkit-transform: translateX(-1.02rem);
        -ms-transform: translateX(-1.02rem);
            transform: translateX(-1.02rem); }
  .enp-3 {
    width: 0.99rem;
    height: 1.8rem;
    top: 0.15rem;
    left: 2.99rem;
    z-index: 3;
    -webkit-transform: translateX(-1.92rem);
        -ms-transform: translateX(-1.92rem);
            transform: translateX(-1.92rem); }
  .enp-4 {
    width: 0.6rem;
    height: 0.87rem;
    top: 0.64rem;
    left: 4.2rem;
    z-index: 4;
    -webkit-transform: translateX(-2.95rem);
        -ms-transform: translateX(-2.95rem);
            transform: translateX(-2.95rem); }
  .enp-4-2 {
    width: 0.39rem;
    height: 0.67rem;
    top: 0.74rem;
    left: 4.64rem;
    z-index: 5;
    -webkit-transform: translateX(-3.2rem);
        -ms-transform: translateX(-3.2rem);
            transform: translateX(-3.2rem); }
  .enp-5 {
    width: 0.8rem;
    height: 1.55rem;
    top: 0.27rem;
    left: 5.24rem;
    z-index: 6;
    -webkit-transform: translateX(-3.97rem);
        -ms-transform: translateX(-3.97rem);
            transform: translateX(-3.97rem); }
  .enp-6 {
    width: 0.85rem;
    height: 1.64rem;
    top: 0.22rem;
    left: 6.22rem;
    z-index: 7;
    -webkit-transform: translateX(-4.99rem);
        -ms-transform: translateX(-4.99rem);
            transform: translateX(-4.99rem); }
  .enp-7 {
    width: 0.92rem;
    height: 1.77rem;
    top: 0.17rem;
    left: 7.29rem;
    z-index: 8;
    -webkit-transform: translateX(-6.02rem);
        -ms-transform: translateX(-6.02rem);
            transform: translateX(-6.02rem); }
  .enp-8 {
    width: 0.62rem;
    height: 1.24rem;
    top: 0.42rem;
    left: 7.92rem;
    z-index: 9;
    -webkit-transform: translateX(-6.53rem);
        -ms-transform: translateX(-6.53rem);
            transform: translateX(-6.53rem); }
  .enp-9 {
    width: 1.6rem;
    height: 2.05rem;
    top: 0;
    left: 8.77rem;
    z-index: 11;
    -webkit-transform: translateX(-7.87rem);
        -ms-transform: translateX(-7.87rem);
            transform: translateX(-7.87rem); }
  .enp-10 {
    width: 0.62rem;
    height: 1.64rem;
    top: 0.2rem;
    left: 10.59rem;
    z-index: 10;
    -webkit-transform: translateX(-8.53rem);
        -ms-transform: translateX(-8.53rem);
            transform: translateX(-8.53rem); }
  .enp-10-2 {
    width: 0.62rem;
    height: 1.64rem;
    top: 0.2rem;
    left: 10.59rem;
    z-index: 12;
    -webkit-transform: translateX(-8.53rem);
        -ms-transform: translateX(-8.53rem);
            transform: translateX(-8.53rem); }
  .enco-texts {
    width: 4.71rem;
    height: 2.56rem;
    -webkit-transition: opacity 1000ms;
    transition: opacity 1000ms;
    position: absolute;
    top: 2.1rem;
    left: 3.5rem; }
  .enco-texts ol {
    width: 100%;
    height: 100%; }
  .enco-line {
    display: block;
    width: 0.02rem;
    height: 2.56rem;
    background: url(../png/epn-tip-34de11751e2fad587cc0f2eb28bcc062.png) no-repeat 0 0;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    -webkit-transition: height 1000ms;
    transition: height 1000ms; }
  .enco-t1 {
    left: 0;
    height: 1rem; }
  .enco-t2 {
    left: 1.21rem; }
  .enco-t3 {
    left: 2.21rem;
    height: 1rem; }
  .enco-t4 {
    left: 3.15rem; }
  .enco-t5 {
    right: 0;
    height: 1rem; }
  .enco-line p {
    position: absolute;
    left: 50%;
    top: calc(100% + 0.12rem);
    -webkit-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
            transform: translateX(-50%);
    width: 3rem;
    color: #333;
    font-size: 0.2rem;
    line-height: 1.4;
    text-align: center; }
  .enco-line p span {
    display: block; }
  #oc-container .section-6 {
    background-color: #fff;
    overflow: hidden; }
  .model-3 {
    width: 19rem;
    height: 9rem;
    margin: 0.6rem 0 1.72rem -3.5rem;
    box-sizing: content-box;
    -webkit-mask: url(../png/model3-mask-c94c837969e407c791755c4ba5e4dd85.png) no-repeat 50% 50%/100% 4%;
            mask: url(../png/model3-mask-c94c837969e407c791755c4ba5e4dd85.png) no-repeat 50% 50%/100% 4%;
    -webkit-transition: -webkit-mask 1s;
    transition: -webkit-mask 1s;
    transition: mask 1s;
    transition: mask 1s, -webkit-mask 1s; }
  #oc-container .section-7 {
    background-color: #f7f7f7; }
  .two-earphones {
    width: 12rem;
    height: 8.62rem;
    margin: 0 auto;
    padding: 0.62rem 0 1rem;
    box-sizing: content-box;
    position: relative; }
  .earphone-1, .earphone-2 {
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s; }
  .earphone-1 {
    width: 2.8rem;
    height: 6.1rem;
    position: absolute;
    top: 0.62rem;
    left: 50%;
    margin-left: -3.02rem; }
  .earphone-2 {
    width: 2.76rem;
    height: 5.98rem;
    position: absolute;
    top: 2.34rem;
    left: 50%;
    margin-left: 0.2rem; }
  .i-gesture-1, .i-gesture-2 {
    position: absolute;
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s; }
  .i-gesture-1 {
    width: 0.36rem;
    height: 0.76rem;
    top: 4rem;
    margin-right: 2.28rem;
    right: 50%; }
  .i-gesture-2 {
    width: 0.3rem;
    height: 0.54rem;
    top: 5.8rem;
    margin-left: 2.3rem;
    left: 50%; }
  .gesture-txt-1, .gesture-txt-2 {
    color: #333;
    font-size: 0.2rem;
    line-height: 0.3rem;
    position: absolute; }
  .gesture-txt-1 {
    top: 4.9rem;
    margin-right: 2.28rem;
    text-align: right;
    right: 50%;
    width: 5rem; }
  .gesture-txt-2 {
    top: 6.6rem;
    margin-left: 2.3rem;
    left: 50%; }
  .gesture-txt-1 b, .gesture-txt-2 b {
    color: #000;
    line-height: 0.38rem;
    font-weight: normal;
    display: block; }
  .gesture-txt-1 span, .gesture-txt-2 span {
    display: block; }
  #oc-container .section-8 {
    background-color: #fff;
    overflow: hidden; }
  .section-8 .white-title {
    text-align: left; }
  .section-8 .white-text {
    width: 6rem;
    text-align: left; }
  .section-8 .two-earphones {
    padding: 1.6rem 0 0; }
  .earphone-3, .earphone-4 {
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s; }
  .earphone-3 {
    width: 3.32rem;
    height: 5.08rem;
    position: absolute;
    top: 3.76rem;
    right: 0;
    padding-right: 0.74rem;
    box-sizing: content-box; }
  .earphone-4 {
    width: 5.76rem;
    height: 8.82rem;
    position: relative;
    padding: 1.18rem 0 0 0.3rem;
    margin-bottom: -2rem;
    box-sizing: content-box; }
  .earp3-desc, .earp4-desc {
    color: #333;
    font-size: 0.2rem;
    line-height: 1.2;
    position: absolute; }
  .earp3-desc {
    top: 3.24rem;
    right: 0; }
  .earp4-desc {
    top: 6.4rem;
    left: 0; }
  .char-list {
    width: 7rem;
    height: 3rem;
    position: absolute;
    top: 10.6rem;
    right: -0.6rem;
    font-size: 0;
    line-height: 0;
    text-align: right; }
  .char-item {
    display: inline-block;
    vertical-align: top;
    height: 1.56rem;
    padding-left: 0.38rem;
    position: relative;
    text-align: left; }
  .char-item:nth-child(1), .char-item:nth-child(3) {
    width: 2.8rem; }
  .char-item:nth-child(2), .char-item:nth-child(4) {
    margin-left: 0.3rem; }
  .char-item:nth-child(2) .char-con, .char-item:nth-child(4) .char-con {
    width: 9em; }
  .cl-absolute .char-item {
    overflow: hidden;
    -webkit-transition: all 1s;
    transition: all 1s; }
  .i-char {
    display: block;
    width: 1px;
    height: 0.86rem;
    background-color: #a2a2a2;
    position: absolute;
    top: 0.12rem;
    left: 0; }
  .char-tit {
    color: #000;
    font-size: 0.27rem;
    line-height: 1.2;
    margin-bottom: 0.13rem;
    font-weight: 300; }
  .char-tit b {
    font-size: 0.4rem;
    font-weight: 500; }
  .char-con {
    color: #333;
    font-size: 0.27rem;
    line-height: 1.2;
    font-weight: 300; }
  #oc-container .section-9 {
    background-color: #000; }
  .section-9 .black-text {
    position: relative;
    z-index: 1; }
  .earphone-5 {
    display: block;
    width: 12rem;
    height: 6.28rem;
    margin: -1.67rem auto 0;
    padding-bottom: 2rem;
    box-sizing: content-box;
    position: relative;
    z-index: 0;
    -webkit-transition: -webkit-transform 1s;
    transition: -webkit-transform 1s;
    transition: transform 1s;
    transition: transform 1s, -webkit-transform 1s; }
  #oc-container .section-10 {
    background-color: #fff; }
  .section-10 .char-list {
    text-align: center;
    height: auto;
    margin: 0 auto;
    padding-top: 0.5rem;
    width: 8.36rem;
    position: relative;
    top: 0;
    left: 0; }
  .section-10 .char-item {
    padding: 0;
    margin: 0;
    width: 50%;
    height: auto;
    display: inline-block;
    vertical-align: top;
    text-align: center; }
  .section-10 .char-item .char-con {
    width: 100%; }
  .earphone-6 {
    width: 4.85rem;
    height: 6.96rem;
    margin: -7.5rem auto 0;
    padding-bottom: 2rem;
    box-sizing: content-box;
    position: relative; }
  .i-breath-light {
    width: 0.06rem;
    height: 0.13rem;
    background: url(../png/earphone6-light-72047905234eb3801ecd9caa05857ac4.png) no-repeat 0 0;
    background-size: 100% 100%;
    position: absolute;
    top: 3.12rem;
    left: 2.4rem;
    -webkit-filter: brightness(1.3);
            filter: brightness(1.3); }
  .i-breath-light.animation-go {
    -webkit-animation: breath-light 1200ms 100ms linear infinite alternate;
            animation: breath-light 1200ms 100ms linear infinite alternate; }
  @-webkit-keyframes breath-light {
    0% {
      opacity: 0; }
    90% {
      opacity: 1; }
    100% {
      opacity: 1; } }
  @keyframes breath-light {
    0% {
      opacity: 0; }
    90% {
      opacity: 1; }
    100% {
      opacity: 1; } }
  .earphone-6-circle {
    width: 12.29rem;
    height: 1.86rem;
    position: relative;
    margin: 6.4rem auto 0; }
  .ear-cir-1, .ear-cir-2, .ear-cir-3, .ear-cir-4, .ear-cir-5, .ear-cir-6, .ear-cir-7, .ear-cir-8 {
    display: block;
    width: 100%;
    height: 100%;
    background: url(../png/earphone-6-circle-3da45c62e69de1bf91d96f4b4e960727.png) no-repeat;
    background-size: 100%;
    -webkit-transform-origin: 50% 50%;
        -ms-transform-origin: 50% 50%;
            transform-origin: 50% 50%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    -webkit-animation: 2400ms steps(10, start) infinite;
            animation: 2400ms steps(10, start) infinite; }
  .ear-cir-1 {
    -webkit-animation-name: ear-cir-step-1;
            animation-name: ear-cir-step-1;
    -webkit-animation-delay: 700ms;
            animation-delay: 700ms; }
  .ear-cir-2 {
    -webkit-transform: scale(0.9);
        -ms-transform: scale(0.9);
            transform: scale(0.9);
    -webkit-animation-name: ear-cir-step-2;
            animation-name: ear-cir-step-2;
    -webkit-animation-delay: 600ms;
            animation-delay: 600ms; }
  .ear-cir-3 {
    -webkit-transform: scale(0.8);
        -ms-transform: scale(0.8);
            transform: scale(0.8);
    -webkit-animation-name: ear-cir-step-3;
            animation-name: ear-cir-step-3;
    -webkit-animation-delay: 500ms;
            animation-delay: 500ms; }
  .ear-cir-4 {
    -webkit-transform: scale(0.7);
        -ms-transform: scale(0.7);
            transform: scale(0.7);
    -webkit-animation-name: ear-cir-step-4;
            animation-name: ear-cir-step-4;
    -webkit-animation-delay: 400ms;
            animation-delay: 400ms; }
  .ear-cir-5 {
    -webkit-transform: scale(0.62);
        -ms-transform: scale(0.62);
            transform: scale(0.62);
    -webkit-animation-name: ear-cir-step-5;
            animation-name: ear-cir-step-5;
    -webkit-animation-delay: 300ms;
            animation-delay: 300ms; }
  .ear-cir-6 {
    -webkit-transform: scale(0.56);
        -ms-transform: scale(0.56);
            transform: scale(0.56);
    -webkit-animation-name: ear-cir-step-6;
            animation-name: ear-cir-step-6;
    -webkit-animation-delay: 200ms;
            animation-delay: 200ms; }
  .ear-cir-7 {
    -webkit-transform: scale(0.5);
        -ms-transform: scale(0.5);
            transform: scale(0.5);
    -webkit-animation-name: ear-cir-step-7;
            animation-name: ear-cir-step-7;
    -webkit-animation-delay: 100ms;
            animation-delay: 100ms; }
  .ear-cir-8 {
    -webkit-transform: scale(0.44);
        -ms-transform: scale(0.44);
            transform: scale(0.44);
    -webkit-animation-name: ear-cir-step-8;
            animation-name: ear-cir-step-8; }
  @-webkit-keyframes ear-cir-step-1 {
    0% {
      opacity: 0; }
    20% {
      opacity: 0.4; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @keyframes ear-cir-step-1 {
    0% {
      opacity: 0; }
    20% {
      opacity: 0.4; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @-webkit-keyframes ear-cir-step-2 {
    0% {
      opacity: 0; }
    20% {
      opacity: 0.6; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @keyframes ear-cir-step-2 {
    0% {
      opacity: 0; }
    20% {
      opacity: 0.6; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @-webkit-keyframes ear-cir-step-3 {
    0% {
      opacity: 0; }
    20% {
      opacity: 0.8; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @keyframes ear-cir-step-3 {
    0% {
      opacity: 0; }
    20% {
      opacity: 0.8; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @-webkit-keyframes ear-cir-step-4 {
    0% {
      opacity: 0; }
    20% {
      opacity: 1.2; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @keyframes ear-cir-step-4 {
    0% {
      opacity: 0; }
    20% {
      opacity: 1.2; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @-webkit-keyframes ear-cir-step-5 {
    0% {
      opacity: 0; }
    20% {
      opacity: 1.64; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @keyframes ear-cir-step-5 {
    0% {
      opacity: 0; }
    20% {
      opacity: 1.64; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @-webkit-keyframes ear-cir-step-6 {
    0% {
      opacity: 0; }
    20% {
      opacity: 1.72; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @keyframes ear-cir-step-6 {
    0% {
      opacity: 0; }
    20% {
      opacity: 1.72; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @-webkit-keyframes ear-cir-step-7 {
    0% {
      opacity: 0; }
    20% {
      opacity: 1.8; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @keyframes ear-cir-step-7 {
    0% {
      opacity: 0; }
    20% {
      opacity: 1.8; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @-webkit-keyframes ear-cir-step-8 {
    0% {
      opacity: 0; }
    20% {
      opacity: 2; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  @keyframes ear-cir-step-8 {
    0% {
      opacity: 0; }
    20% {
      opacity: 2; }
    80% {
      opacity: 0; }
    100% {
      opacity: 0; } }
  #oc-container .section-11 {
    background-color: #f7f7f7; }
  #oc-container .wrapper-11 {
    padding-top: 1.6rem;
    height: auto; }
  .section-11 .white-title {
    position: absolute;
    top: 3.9rem;
    left: 0;
    text-align: left;
    padding: 0; }
  .section-11 .white-text {
    position: absolute;
    top: 6rem;
    left: 0;
    text-align: left;
    padding: 0;
    width: 4.4rem; }
  .hidden-box {
    padding: 0 0 2rem 0;
    position: relative; }
  .phone-show {
    width: 4.35rem;
    height: 9.64rem;
    position: relative;
    overflow: hidden;
    margin-left: auto; }
  .phone-mask {
    width: 100%;
    height: 100%;
    position: absolute;
    -webkit-mask: url(../png/phone-mask-3a2c0dcd6b8de51542a7598e6e2da01b.png) 0 0/100% 100%;
    mask: url(../png/phone-mask-3a2c0dcd6b8de51542a7598e6e2da01b.png) 0 0/100% 100%; }
  .phone {
    width: 100%;
    height: 100%;
    position: relative; }
  .connecting-video {
    width: 96%;
    height: 94%;
    position: absolute;
    top: 1.6%;
    left: 2%;
    overflow: hidden; }
  .connecting {
    position: relative;
    display: block;
    width: 100%;
    height: 100%; }
  .connecting-mask {
    display: block;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: opacity 1s 200ms;
    transition: opacity 1s 200ms; }
  .connecting-ui {
    display: block;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    -webkit-transition: opacity 0s 1200ms;
    transition: opacity 0s 1200ms; }
  .connecting-ui img {
    display: block;
    width: 100%;
    height: auto; }
  .connecting-ui0 {
    opacity: 1; }
  .connecting-ui1 {
    opacity: 0; }
  .connecting-inside {
    display: block;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    -webkit-transform: translateY(100%);
        -ms-transform: translateY(100%);
            transform: translateY(100%);
    -webkit-transition: -webkit-transform 1s 200ms;
    transition: -webkit-transform 1s 200ms;
    transition: transform 1s 200ms;
    transition: transform 1s 200ms, -webkit-transform 1s 200ms; }
  .connecting-inside img {
    display: block;
    width: 100%;
    height: auto; }
  .connecting-video.on .connecting-mask {
    opacity: 0.4; }
  .connecting-video.on .connecting-ui0 {
    opacity: 0; }
  .connecting-video.on .connecting-ui1 {
    opacity: 1; }
  .connecting-video.on .connecting-inside {
    -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
            transform: translateY(0); }
  .phone-border {
    width: 100%;
    height: 100%;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0; }
  .earphone-7-outer {
    width: 3.12rem;
    height: 4.45rem;
    position: absolute;
    bottom: 2rem;
    right: 3.45rem;
    -webkit-transition: opacity 500ms, -webkit-transform 1s;
    transition: opacity 500ms, -webkit-transform 1s;
    transition: opacity 500ms, transform 1s;
    transition: opacity 500ms, transform 1s, -webkit-transform 1s; }
  #oc-container .section-12 {
    background-color: #fff; }
  .product {
    width: 12.8rem;
    height: 5.6rem;
    position: relative;
    margin: 0 0 1.72rem -0.4rem;
    padding-top: 1.24rem;
    box-sizing: content-box; }
  .product-title {
    color: #333;
    font-size: 0.4rem;
    line-height: 0.48rem;
    font-weight: 500;
    letter-spacing: -0.01rem;
    padding-bottom: 0.69rem;
    border-bottom: 1px solid #dfdfdf;
    white-space: nowrap; }
  .product-parameter {
    width: 100%;
    margin-bottom: 1.13rem; }
  .product-parameter tr {
    height: 0.88rem;
    border-bottom: 1px solid #dfdfdf; }
  .product-parameter td {
    width: 50%;
    height: 100%;
    font-size: 0.2rem;
    line-height: 0.88rem; }
  .product-parameter td.pp-t {
    color: #606060; }
  .product-parameter td.pp-s {
    color: #bdbdbd; }
  .last-tips {
    padding-bottom: 1.49rem; }
  .last-tips p {
    color: #bdbdbd;
    font-size: 0;
    line-height: 2;
    padding-left: 0.4rem;
    text-indent: -0.4rem; }
  .last-tips p i {
    display: inline-block;
    width: 0.4rem;
    font-size: 0.15rem;
    text-indent: 0;
    font-style: normal; }
  .last-tips p span {
    font-size: 0.15rem; }
  .fade-in-up-anim {
    -webkit-animation: fadeInUp 1s forwards;
            animation: fadeInUp 1s forwards; }
  @-webkit-keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translateY(20%);
              transform: translateY(20%); }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0); } }
  @keyframes fadeInUp {
    0% {
      opacity: 0;
      -webkit-transform: translateY(20%);
              transform: translateY(20%); }
    100% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0); } }
  .fade-Out-up-anim {
    -webkit-animation: fadeOutUp 1s forwards;
            animation: fadeOutUp 1s forwards; }
  @-webkit-keyframes fadeOutUp {
    0% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0); }
    100% {
      opacity: 0;
      -webkit-transform: translateY(20%);
              transform: translateY(20%); } }
  @keyframes fadeOutUp {
    0% {
      opacity: 1;
      -webkit-transform: translateY(0);
              transform: translateY(0); }
    100% {
      opacity: 0;
      -webkit-transform: translateY(20%);
              transform: translateY(20%); } }
  .fade-in-left-anim {
    -webkit-animation: fadeInLeft 1s forwards;
            animation: fadeInLeft 1s forwards; }
  @-webkit-keyframes fadeInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(50%);
              transform: translateX(50%); }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0); } }
  @keyframes fadeInLeft {
    0% {
      opacity: 0;
      -webkit-transform: translateX(50%);
              transform: translateX(50%); }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0); } }
  .fade-Out-left-anim {
    -webkit-animation: fadeOutLeft 1s forwards;
            animation: fadeOutLeft 1s forwards; }
  @-webkit-keyframes fadeOutLeft {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0); }
    100% {
      opacity: 0;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%); } }
  @keyframes fadeOutLeft {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0); }
    100% {
      opacity: 0;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%); } }
  .fade-in-right-anim {
    -webkit-animation: fadeInRight 1s forwards;
            animation: fadeInRight 1s forwards; }
  @-webkit-keyframes fadeInRight {
    0% {
      opacity: 0;
      -webkit-transform: translateX(50%);
              transform: translateX(50%); }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0); } }
  @keyframes fadeInRight {
    0% {
      opacity: 0;
      -webkit-transform: translateX(50%);
              transform: translateX(50%); }
    100% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0); } }
  .fade-Out-right-anim {
    -webkit-animation: fadeOutRight 1s forwards;
            animation: fadeOutRight 1s forwards; }
  @-webkit-keyframes fadeOutRight {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0); }
    100% {
      opacity: 0;
      -webkit-transform: translateX(50%);
              transform: translateX(50%); } }
  @keyframes fadeOutRight {
    0% {
      opacity: 1;
      -webkit-transform: translateX(0);
              transform: translateX(0); }
    100% {
      opacity: 0;
      -webkit-transform: translateX(50%);
              transform: translateX(50%); } }
  @-webkit-keyframes fadeInUpC {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-50%) matrix(1, 0, 0, 1, 0, 100);
              transform: translateX(-50%) matrix(1, 0, 0, 1, 0, 100); }
    100% {
      opacity: 1;
      -webkit-transform: translateX(-50%) matrix(1, 0, 0, 1, 0, 0);
              transform: translateX(-50%) matrix(1, 0, 0, 1, 0, 0); } }
  @keyframes fadeInUpC {
    0% {
      opacity: 0;
      -webkit-transform: translateX(-50%) matrix(1, 0, 0, 1, 0, 100);
              transform: translateX(-50%) matrix(1, 0, 0, 1, 0, 100); }
    100% {
      opacity: 1;
      -webkit-transform: translateX(-50%) matrix(1, 0, 0, 1, 0, 0);
              transform: translateX(-50%) matrix(1, 0, 0, 1, 0, 0); } } }