/* CSS Document */
.demo01 {
  margin: 2rem 0 10rem; }
  @media screen and (max-width: 767px) {
    .demo01 {
      margin: 2rem 0 4rem; } }
  .demo01 .swiper-slide {
    padding: 1rem; }
    .demo01 .swiper-slide a {
      display: block;
      background-color: #fff;
      padding: 2rem;
      border-radius: 1rem;
      transition: all .3s; }
      .demo01 .swiper-slide a dl {
        margin: 0; }
        .demo01 .swiper-slide a dl dt img {
          border-radius: 1rem; }
        .demo01 .swiper-slide a dl dd p {
          color: #000;
          margin: 0;
          padding-top: 1rem; }
      .demo01 .swiper-slide a:hover {
        box-shadow: 5px 5px 20px #c8c9cc, -5px -5px 20px #ffffff;
        transform: translateY(-10px); }

.demo02 {
  margin: 2rem 0 15rem; }
  @media screen and (max-width: 767px) {
    .demo02 {
      margin: 0 0 8rem; } }
  .demo02 .swiper-area {
    position: relative; }
    .demo02 .swiper-area .swiper-container {
      overflow: hidden;
      padding: 0 2rem; }
      @media screen and (max-width: 1399px) {
        .demo02 .swiper-area .swiper-container {
          margin: 0 4rem;
          padding: 1rem 2rem; } }
      @media screen and (max-width: 575px) {
        .demo02 .swiper-area .swiper-container {
          margin: 0 2rem;
          padding: 1rem; } }
      .demo02 .swiper-area .swiper-container .swiper-slide {
        padding: 2rem 0;
        margin: 0; }
        @media screen and (max-width: 1399px) {
          .demo02 .swiper-area .swiper-container .swiper-slide {
            padding: 1rem 0; } }
        .demo02 .swiper-area .swiper-container .swiper-slide a {
          display: block;
          background-color: #fff;
          padding: 2rem;
          border-radius: 1rem;
          transition: all .3s; }
          @media screen and (max-width: 575px) {
            .demo02 .swiper-area .swiper-container .swiper-slide a {
              box-shadow: 3px 3px 10px #c8c9cc, -3px -3px 10px #ffffff; } }
          .demo02 .swiper-area .swiper-container .swiper-slide a dl {
            margin: 0; }
            .demo02 .swiper-area .swiper-container .swiper-slide a dl dt img {
              border-radius: 1rem; }
            .demo02 .swiper-area .swiper-container .swiper-slide a dl dd p {
              color: #000;
              margin: 0;
              padding-top: 1rem; }
          .demo02 .swiper-area .swiper-container .swiper-slide a:hover {
            box-shadow: 5px 5px 20px #c8c9cc, -5px -5px 20px #ffffff;
            transform: translateY(-10px); }
            @media screen and (max-width: 1399px) {
              .demo02 .swiper-area .swiper-container .swiper-slide a:hover {
                box-shadow: 5px 5px 10px #c8c9cc, -5px -5px 10px #ffffff; } }
    .demo02 .swiper-area .swiper-button-next {
      background: #fff;
      box-shadow: 5px 5px 20px #c8c9cc, -5px -5px 20px #ffffff;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      right: -60px; }
      @media screen and (max-width: 1399px) {
        .demo02 .swiper-area .swiper-button-next {
          right: -20px; } }
      @media screen and (max-width: 1199px) {
        .demo02 .swiper-area .swiper-button-next {
          right: 0;
          width: 50px;
          height: 50px; } }
      @media screen and (max-width: 991px) {
        .demo02 .swiper-area .swiper-button-next {
          right: -10px; } }
      @media screen and (max-width: 575px) {
        .demo02 .swiper-area .swiper-button-next {
          display: none; } }
      .demo02 .swiper-area .swiper-button-next::after {
        content: "";
        display: block;
        width: 15px;
        height: 15px;
        border: 1px solid #c8c9cc;
        border-width: 3px 3px 0 0;
        transform: rotate(45deg);
        position: absolute;
        left: -5px;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto; }
    .demo02 .swiper-area .swiper-button-prev {
      background: #fff;
      box-shadow: 5px 5px 20px #c8c9cc, -5px -5px 20px #ffffff;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      left: -60px; }
      @media screen and (max-width: 1399px) {
        .demo02 .swiper-area .swiper-button-prev {
          left: -20px; } }
      @media screen and (max-width: 1199px) {
        .demo02 .swiper-area .swiper-button-prev {
          left: 0;
          width: 50px;
          height: 50px; } }
      @media screen and (max-width: 991px) {
        .demo02 .swiper-area .swiper-button-prev {
          left: -10px; } }
      @media screen and (max-width: 575px) {
        .demo02 .swiper-area .swiper-button-prev {
          display: none; } }
      .demo02 .swiper-area .swiper-button-prev::after {
        content: "";
        display: block;
        width: 15px;
        height: 15px;
        border: 1px solid #c8c9cc;
        border-width: 0 0 3px 3px;
        transform: rotate(45deg);
        position: absolute;
        left: 0;
        right: -5px;
        top: 0;
        bottom: 0;
        margin: auto; }
  .demo02 .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
    background-color: #c8c9cc; }

.demo03 {
  margin: 2rem 0 10rem; }
  @media screen and (max-width: 767px) {
    .demo03 {
      margin: 2rem 0 6rem; } }
  .demo03 .swiper-area {
    position: relative;
    padding: 0 4rem; }
    @media screen and (max-width: 1399px) {
      .demo03 .swiper-area {
        margin: 0 4rem;
        padding: 1rem 2rem; } }
    @media screen and (max-width: 575px) {
      .demo03 .swiper-area {
        margin: 0; } }
    .demo03 .swiper-area .swiper-container {
      overflow: hidden;
      width: 100%; }
      .demo03 .swiper-area .swiper-container.main-sldier {
        margin-bottom: 2rem; }
        .demo03 .swiper-area .swiper-container.main-sldier a {
          display: block;
          overflow: hidden;
          border-radius: 1rem; }
          .demo03 .swiper-area .swiper-container.main-sldier a img {
            border-radius: 1rem;
            transition: all .5s; }
          .demo03 .swiper-area .swiper-container.main-sldier a:hover img {
            transform: scale(1.05); }
      .demo03 .swiper-area .swiper-container.thumbnail-sldier .swiper-wrapper .swiper-slide {
        width: 25%;
        height: 100%;
        opacity: .5;
        overflow: hidden; }
        .demo03 .swiper-area .swiper-container.thumbnail-sldier .swiper-wrapper .swiper-slide.swiper-slide-thumb-active {
          opacity: 1; }
        .demo03 .swiper-area .swiper-container.thumbnail-sldier .swiper-wrapper .swiper-slide dl {
          margin: 0; }
          .demo03 .swiper-area .swiper-container.thumbnail-sldier .swiper-wrapper .swiper-slide dl dt img {
            border-radius: 1rem; }
          .demo03 .swiper-area .swiper-container.thumbnail-sldier .swiper-wrapper .swiper-slide dl dd p {
            color: #000;
            margin: 0; }
    .demo03 .swiper-area .swiper-button-next {
      background: #fff;
      box-shadow: 5px 5px 20px #c8c9cc, -5px -5px 20px #ffffff;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      right: -60px; }
      @media screen and (max-width: 1199px) {
        .demo03 .swiper-area .swiper-button-next {
          width: 50px;
          height: 50px;
          right: -40px; } }
      @media screen and (max-width: 991px) {
        .demo03 .swiper-area .swiper-button-next {
          right: -50px; } }
      @media screen and (max-width: 575px) {
        .demo03 .swiper-area .swiper-button-next {
          display: none; } }
      .demo03 .swiper-area .swiper-button-next::after {
        content: "";
        display: block;
        width: 15px;
        height: 15px;
        border: 1px solid #c8c9cc;
        border-width: 3px 3px 0 0;
        transform: rotate(45deg);
        position: absolute;
        left: -5px;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto; }
    .demo03 .swiper-area .swiper-button-prev {
      background: #fff;
      box-shadow: 5px 5px 20px #c8c9cc, -5px -5px 20px #ffffff;
      width: 60px;
      height: 60px;
      border-radius: 50%;
      left: -60px; }
      @media screen and (max-width: 1199px) {
        .demo03 .swiper-area .swiper-button-prev {
          width: 50px;
          height: 50px;
          left: -40px; } }
      @media screen and (max-width: 991px) {
        .demo03 .swiper-area .swiper-button-prev {
          left: -50px; } }
      @media screen and (max-width: 575px) {
        .demo03 .swiper-area .swiper-button-prev {
          display: none; } }
      .demo03 .swiper-area .swiper-button-prev::after {
        content: "";
        display: block;
        width: 15px;
        height: 15px;
        border: 1px solid #c8c9cc;
        border-width: 0 0 3px 3px;
        transform: rotate(45deg);
        position: absolute;
        left: 0;
        right: -5px;
        top: 0;
        bottom: 0;
        margin: auto; }