@charset "UTF-8";
.accessory-appendix-intro-sections {
  /*閫氱敤css棰滆壊*/ }
  .accessory-appendix-intro-sections img {
    display: block; }
  .accessory-appendix-intro-sections .bg-f4f4f4 {
    background-color: #f4f4f4; }
  .accessory-appendix-intro-sections .star {
    display: block;
    margin-top: 10px; }
    .accessory-appendix-intro-sections .star .star-img {
      width: 150px;
      display: inline-block;
      padding: 0;
      vertical-align: text-bottom; }
  .accessory-appendix-intro-sections .accessory-swiper-black-sections .swiper-container-horizontal > .swiper-pagination-bullets .swiper-pagination-bullet {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    display: inline-block;
    height: 20px;
    width: 40px;
    padding: 9px 0;
    margin: 0 10px;
    background: transparent;
    opacity: 1;
    transition: 0.25s;
    box-sizing: border-box; }
  .accessory-appendix-intro-sections .accessory-swiper-black-sections .swiper-pagination-bullet::before {
    content: '';
    display: block;
    height: 2px;
    width: 100%;
    background-color: #666; }
  .accessory-appendix-intro-sections .accessory-swiper-black-sections .swiper-pagination-bullet::after {
    position: absolute;
    top: 50%;
    transform: translate3d(-100%, -50%, 0);
    left: 0;
    content: '';
    display: block;
    height: 2px;
    width: 100%;
    background-color: #fff; }
  .accessory-appendix-intro-sections .accessory-swiper-black-sections .swiper-pagination-bullet-active::after {
    transform: translate3d(0%, -50%, 0);
    transition: all 4s linear; }
  .accessory-appendix-intro-sections .accessory-swiper-black-sections .swiper-pagination-bullet-active::after {
    transform: translate3d(0%, -50%, 0);
    transition: all 4s linear; }
  .accessory-appendix-intro-sections .accessory-swiper-black-sections .swiper-button-next::before, .accessory-appendix-intro-sections .accessory-swiper-black-sections .swiper-button-prev::before {
    content: '';
    display: block;
    height: 100%;
    width: 50px;
    position: absolute;
    padding: 50px;
    transform: translate(-50%, -50%); }
  .accessory-appendix-intro-sections .accessory-swiper-black-sections .swiper-container-horizontal > .swiper-pagination-bullets, .accessory-appendix-intro-sections .swiper-pagination-custom, .accessory-appendix-intro-sections .swiper-pagination-fraction {
    bottom: 25px;
    position: absolute;
    z-index: 1;
    text-align: center; }
  .accessory-appendix-intro-sections .swiper-black-container {
    position: relative; }
  .accessory-appendix-intro-sections .accessory-swiper-black-sections .swiper-button-next, .accessory-appendix-intro-sections .accessory-swiper-black-sections .swiper-button-prev {
    position: absolute;
    top: 50%;
    width: 8.6px;
    height: 15px;
    margin-top: -7.5px;
    z-index: 2;
    cursor: pointer;
    background-size: 8.6px 15px;
    background-position: center;
    background-repeat: no-repeat;
    background-color: rgba(0, 0, 0, 0.3);
    padding: 25px;
    border-radius: 50%; }
  .accessory-appendix-intro-sections .accessory-swiper-black-sections .swiper-button-next {
    right: 40px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); }
  .accessory-appendix-intro-sections .accessory-swiper-black-sections .swiper-button-prev {
    left: 40px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E"); }
  .accessory-appendix-intro-sections .color-white {
    color: #ffffff !important; }
  .accessory-appendix-intro-sections .color-f6f6f6 {
    color: #f6f6f6 !important; }
  .accessory-appendix-intro-sections .first-subject {
    font-size: 32px;
    line-height: 38px;
    margin-bottom: 30px;
    color: #000000; }
  .accessory-appendix-intro-sections .body-content {
    font-size: 18px;
    line-height: 27px;
    color: #666666; }
  .accessory-appendix-intro-sections .row-content {
    max-width: 600px;
    margin: auto; }
    .accessory-appendix-intro-sections .row-content .col-xs-4 {
      text-align: center;
      padding: 10px 0;
      position: relative; }
      .accessory-appendix-intro-sections .row-content .col-xs-4 .title {
        font-size: 14px; }
      .accessory-appendix-intro-sections .row-content .col-xs-4 .text {
        font-size: 18px; }
      .accessory-appendix-intro-sections .row-content .col-xs-4:before, .accessory-appendix-intro-sections .row-content .col-xs-4:after {
        content: '';
        display: inline-block;
        width: 50%;
        height: 2px;
        background-color: #dbdbdb;
        position: absolute;
        left: 50%;
        transform: translateX(-50%); }
      .accessory-appendix-intro-sections .row-content .col-xs-4:before {
        top: 0; }
      .accessory-appendix-intro-sections .row-content .col-xs-4:after {
        bottom: 0; }
      @media screen and (max-width: 735px) {
        .accessory-appendix-intro-sections .row-content .col-xs-4 .text {
          font-size: 16px; }
        .accessory-appendix-intro-sections .row-content .col-xs-4:before, .accessory-appendix-intro-sections .row-content .col-xs-4:after {
          width: 75%; } }
  .accessory-appendix-intro-sections .have-color .swiper-pagination-bullet:before, .accessory-appendix-intro-sections .top-color-style .swiper-pagination-bullet:before {
    content: '';
    width: 18px;
    height: 18px;
    display: inline-block;
    border-radius: 50%;
    margin-top: 1px; }
  .accessory-appendix-intro-sections .top-color-style .swiper-pagination-bullet:before {
    margin-left: 1px; }
  .accessory-appendix-intro-sections .text-image-container .swiper-pagination-bullet-active, .accessory-appendix-intro-sections .have-color .swiper-pagination-bullet-active {
    opacity: 1;
    background: none;
    border: 2px solid #b9b9b9; }
  @media screen and (max-width: 736px) {
    .accessory-appendix-intro-sections .top-color-style .swiper-pagination-bullet:before {
      margin-left: 0; }
    .accessory-appendix-intro-sections .accessory-swiper-black-sections .swiper-container-horizontal > .swiper-pagination-bullets, .accessory-appendix-intro-sections .swiper-pagination-custom, .accessory-appendix-intro-sections .swiper-pagination-fraction {
      bottom: 10px; }
    .accessory-appendix-intro-sections .first-subject {
      margin-bottom: 15px;
      font-size: 24px; }
    .accessory-appendix-intro-sections .body-content {
      font-size: 16px; }
    .accessory-appendix-intro-sections .text-image-container .swiper-pagination3, .accessory-appendix-intro-sections .have-color .swiper-pagination2, .accessory-appendix-intro-sections .top-color-style .swiper-pagination4 {
      text-align: center; }
    .accessory-appendix-intro-sections .accessory-swiper-black-sections .swiper-button-next, .accessory-appendix-intro-sections .accessory-swiper-black-sections .swiper-button-prev {
      display: none; } }
  .accessory-appendix-intro-sections .accessory-text-sections {
    position: relative; }
    .accessory-appendix-intro-sections .accessory-text-sections .text-black-container {
      background: #000; }
    .accessory-appendix-intro-sections .accessory-text-sections .text-block {
      width: 960px;
      text-align: center;
      padding: 120px 0;
      margin: 0 auto; }
      @media screen and (min-width: 1932px) {
        .accessory-appendix-intro-sections .accessory-text-sections .text-block .text-block {
          width: 50vw;
          padding: 160px 0;
          margin: 0 auto; } }
      @media screen and (max-width: 1200px) {
        .accessory-appendix-intro-sections .accessory-text-sections .text-block {
          width: 80vw;
          margin: 0 auto; } }
      @media screen and (max-width: 736px) {
        .accessory-appendix-intro-sections .accessory-text-sections .text-block {
          text-align: left;
          padding: 5.63vh 0; } }
    .accessory-appendix-intro-sections .accessory-text-sections .have-color {
      padding-bottom: 0; }
  .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container {
    position: relative; }
    .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .image-right {
      background-image: url("/assets/images/products/accessories/case/Silicone/3.jpg");
      width: 100%;
      padding-bottom: 44%;
      background-size: cover;
      background-position: center center; }
    .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .text-left-block {
      z-index: 1; }
    .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .text-right-block {
      z-index: 1; }
    .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .body-copy {
      position: absolute;
      bottom: -50%;
      z-index: 1; }
    .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .swiper-container4 img {
      position: relative;
      z-index: -1; }
    .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .white-to-black .first-subject {
      color: #ffffff; }
    .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .white-to-black .body-content {
      color: #ffffff; }
    @media screen and (max-width: 736px) {
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .image-right {
        background-image: url("/assets/images/products/accessories/case/Silicone/MOBB_3.jpg");
        padding-bottom: 90%; }
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .text-left-block {
        text-align: left;
        width: 80vw;
        margin: 0 auto;
        padding: 5.63vh 0; }
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .body-copy {
        position: absolute;
        bottom: -10vh; }
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .have-body-copy {
        padding-bottom: 10vh; } }
    .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .image-left {
      background-image: url("/assets/images/products/accessories/case/Flip/1.jpg");
      width: 100%;
      padding-bottom: 44%;
      background-size: cover;
      background-position: center center; }
    .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .swiper-container4 .swiper-slide {
      background: #fff; }
    @media screen and (min-width: 768px) {
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .text-left-block {
        position: absolute;
        top: 50%;
        left: 14%;
        max-width: 480px;
        transform: translate(0%, -50%); }
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .text-right-block {
        position: absolute;
        top: 50%;
        right: 14%;
        max-width: 480px;
        transform: translate(0%, -50%); } }
    @media screen and (max-width: 1398px) {
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .text-right-block {
        right: 6%;
        max-width: 400px; }
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .text-left-block {
        left: 6%;
        max-width: 400px; } }
    @media screen and (max-width: 1200px) {
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .text-right-block {
        right: 4%; }
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .text-left-block {
        left: 4%; } }
    @media screen and (max-width: 1024px) {
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .text-right-block {
        right: 2%; }
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .text-left-block {
        left: 2%; } }
    @media screen and (max-width: 768px) {
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .image-left {
        background-image: url("/assets/images/products/accessories/case/Flip/MOB_1.jpg");
        padding-bottom: 90%; }
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .swiper-container4 img {
        width: 80%; }
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .text-right-block {
        text-align: left;
        top: 60%;
        right: 2%;
        width: 80vw;
        margin: 0 auto;
        padding: 5.63vh 0;
        max-width: 400px; }
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .padding-top-sm {
        padding-bottom: 0; } }
    @media screen and (max-width: 736px) {
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .swiper-container4 img {
        width: 100%; }
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .white-to-black .first-subject {
        color: #000000; }
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container .white-to-black .body-content {
        color: #666666; } }
    .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.star-img-container .star-img {
      width: 150px; }
    @media screen and (min-width: 768px) and (max-width: 1024px) {
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.star-img-container .swiper-container4 {
        padding: 2em 0; }
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.star-img-container .text-right-block, .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.star-img-container .text-left-block {
        padding: 0;
        top: 50%; }
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.star-img-container .top-color-style {
        top: 40%; }
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.star-img-container .align-center {
        top: 50%; }
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.star-img-container picture img {
        width: 120%;
        max-width: 122%;
        margin-left: -8em; } }
    @media screen and (max-width: 1024px) {
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.star-img-container .text-right-block {
        right: 8%; }
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.star-img-container .text-left-block {
        left: 8%; }
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.star-img-container .white-to-black {
        top: 40%; } }
    @media screen and (max-width: 768px) {
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.star-img-container .text-right-block {
        right: 2%; }
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.star-img-container .text-left-block {
        left: 2%; } }
    @media screen and (max-width: 736px) {
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.star-img-container .padding-bottom-sm {
        padding-bottom: 14vh; }
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.star-img-container .padding-top-sm {
        padding-bottom: 0; }
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.star-img-container .white-to-black .body-copy {
        bottom: 2vh; } }
    .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.accessories-half-container {
      padding: 50px 50px 0 50px; }
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.accessories-half-container .accessories-img-half {
        width: 50%; }
      .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.accessories-half-container .translate-right {
        transform: translateX(100%); }
      @media screen and (min-width: 768px) and (max-width: 1024px) {
        .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.accessories-half-container {
          padding: 25px 25px 0 25px; }
          .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.accessories-half-container .text-left-block, .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.accessories-half-container .text-right-block {
            width: 360px; }
          .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.accessories-half-container .text-left-block {
            left: 8%; }
          .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.accessories-half-container .text-right-block {
            right: 8%; } }
      @media screen and (max-width: 768px) {
        .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.accessories-half-container .text-left-block {
          left: 2%; }
        .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.accessories-half-container .text-right-block {
          right: 2%; } }
      @media screen and (max-width: 736px) {
        .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.accessories-half-container {
          padding: 0; }
          .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.accessories-half-container .translate-right {
            transform: translateX(0%); }
          .accessory-appendix-intro-sections .accessory-text-image-sections .text-image-container.accessories-half-container .accessories-img-half {
            width: 100%; } }
  .accessory-appendix-intro-sections .information-container {
    max-width: 960px;
    margin: 80px auto; }
    .accessory-appendix-intro-sections .information-container .title {
      color: #000000;
      font-weight: 300;
      padding: 30px 0;
      font-size: 26px; }
    .accessory-appendix-intro-sections .information-container .row {
      border-top: 1px solid #dfdfdf;
      padding: 15px 0;
      margin: 0; }
      .accessory-appendix-intro-sections .information-container .row p {
        font-size: 18px; }
      .accessory-appendix-intro-sections .information-container .row .tag {
        font-size: 24px;
        color: #000;
        line-height: 2.2; }
      .accessory-appendix-intro-sections .information-container .row .col-xs-4 {
        padding: 0; }
      .accessory-appendix-intro-sections .information-container .row .specs-title {
        color: #000; }
    .accessory-appendix-intro-sections .information-container .specs-item {
      padding: 15px 0; }
    @media screen and (max-width: 1024px) {
      .accessory-appendix-intro-sections .information-container {
        max-width: 819px;
        padding: 0 20px; }
        .accessory-appendix-intro-sections .information-container .row .col-xs-4 {
          width: 49%; }
        .accessory-appendix-intro-sections .information-container .row .nav {
          width: 100%; } }
    @media screen and (max-width: 736px) {
      .accessory-appendix-intro-sections .information-container {
        width: 80vw;
        margin: 0 auto;
        padding: 0; }
        .accessory-appendix-intro-sections .information-container html, .accessory-appendix-intro-sections .information-container body {
          font-size: 10px; }
        .accessory-appendix-intro-sections .information-container .title {
          font-size: 24px; }
        .accessory-appendix-intro-sections .information-container .row .col-xs-4 {
          float: none;
          width: 100%; }
        .accessory-appendix-intro-sections .information-container .row p {
          font-size: 16px; }
        .accessory-appendix-intro-sections .information-container .row .tag {
          font-size: 20px;
          color: #000;
          line-height: 2.2; } }
  .accessory-appendix-intro-sections .text-image-container .swiper-pagination3, .accessory-appendix-intro-sections .have-color .swiper-pagination2 {
    margin: 62px 0 30px 0;
    text-align: left;
    position: static; }
  .accessory-appendix-intro-sections .bottom-color-style .swiper-pagination4 {
    margin: 30px 0 0 0; }
  .accessory-appendix-intro-sections .top-color-style .swiper-pagination4 {
    margin: 0 0 30px 0; }
  .accessory-appendix-intro-sections .text-image-container .swiper-pagination-bullet, .accessory-appendix-intro-sections .have-color .swiper-pagination-bullet {
    width: 24px;
    height: 24px;
    display: inline-block;
    border-radius: 100%;
    opacity: 1;
    margin: 0 19px;
    background: none;
    box-sizing: border-box; }
  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .accessory-appendix-intro-sections .section-video {
      height: 60vw; } }
  @media screen and (min-width: 768px) and (max-width: 1024px) {
    .accessory-appendix-intro-sections .section-common .section-video {
      height: 60vw; } }

/*# sourceMappingURL=product-intro.exc.css.map */