.point {
  position: relative; }

.point span {
  position: absolute;
  margin-top: -100px; }

.prd-section .desc {
  display: block;
  color: rgba(255, 255, 255, 0.5);
  font-size: 1.4rem;
  text-align: left; }

.prd-section .desc.copy {
  text-align: right;
  margin: 1rem 0; }

@media (max-width: 59.99em) {
  .prd-section .desc {
    font-size: 1.2rem; } }

.in-title {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  color: transparent;
  font-family: "Manrope", "NanumSquare", "Malgun Gothic", sans-serif;
  font-weight: bold;
  line-height: 1;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  -webkit-background-clip: text;
  background-clip: text;
  text-align: center; }

.color-title {
  color: #fff;
  font-family: "Manrope", "NanumSquare", "Malgun Gothic", sans-serif;
  font-weight: bold;
  line-height: 1;
  letter-spacing: -0.1rem;
  text-align: center; }

.color-title em {
  color: transparent;
  font-weight: bold;
  background: -o-linear-gradient(315deg, #0061ce 0%, #e400d7 calc(100% - 0.8em));
  background: linear-gradient(135deg, #0061ce 0%, #e400d7 calc(100% - 0.8em));
  -webkit-background-clip: text;
  background-clip: text; }

.color-title strong {
  font-size: 7rem; }

.color-title span {
  font-size: 4rem; }

.color-title small {
  font-size: 3rem; }

@media (min-width: 45em) {
  .color-title strong {
    font-size: 12rem; }
  .color-title span {
    font-size: 6rem; }
  .color-title small {
    font-size: 4rem; } }

@media (min-width: 60em) {
  .color-title strong {
    font-size: 20rem;
    letter-spacing: -0.7rem; }
  .color-title span {
    font-size: 8rem; }
  .color-title small {
    font-size: 6rem; } }

@media (min-width: 75em) {
  .color-title strong {
    font-size: 25rem;
    letter-spacing: -0.7rem; }
  .color-title span {
    font-size: 12rem; }
  .color-title small {
    font-size: 10rem; } }

.color-box {
  padding: 5px;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  background: -o-linear-gradient(315deg, #0061ce 0%, #e400d7 calc(100% - 0.8em));
  background: linear-gradient(135deg, #0061ce 0%, #e400d7 calc(100% - 0.8em));
  text-align: center; }

.color-box__inner {
  position: relative;
  z-index: 2;
  padding: 3rem;
  background-color: #202020; }

.color-box .s-title:first-child {
  margin-top: 0 !important; }

.hover-imgcopy {
  position: relative;
  text-align: center; }

.hover-imgcopy .copy {
  position: absolute;
  bottom: 0; }

.hover-imgcopy .copy-01 {
  left: 0;
  -webkit-transform: translateY(-70%);
      -ms-transform: translateY(-70%);
          transform: translateY(-70%); }

.hover-imgcopy .copy-02 {
  left: 50%;
  -webkit-transform: translateY(200%) translateX(-35%);
      -ms-transform: translateY(200%) translateX(-35%);
          transform: translateY(200%) translateX(-35%); }

.hover-imgcopy .copy-03 {
  right: 0;
  -webkit-transform: translateY(-190%);
      -ms-transform: translateY(-190%);
          transform: translateY(-190%); }

@media (min-width: 35em) {
  .hover-imgcopy .copy-01 {
    -webkit-transform: translateY(-180%);
        -ms-transform: translateY(-180%);
            transform: translateY(-180%); }
  .hover-imgcopy .copy-03 {
    -webkit-transform: translateY(-350%);
        -ms-transform: translateY(-350%);
            transform: translateY(-350%); } }

@media (min-width: 45em) {
  .hover-imgcopy .copy-01 {
    -webkit-transform: translateY(-220%);
        -ms-transform: translateY(-220%);
            transform: translateY(-220%); }
  .hover-imgcopy .copy-03 {
    -webkit-transform: translateY(-410%);
        -ms-transform: translateY(-410%);
            transform: translateY(-410%); } }

@media (min-width: 60em) {
  .hover-imgcopy .copy-01 {
    -webkit-transform: translateY(-260%);
        -ms-transform: translateY(-260%);
            transform: translateY(-260%); }
  .hover-imgcopy .copy-03 {
    -webkit-transform: translateY(-480%);
        -ms-transform: translateY(-480%);
            transform: translateY(-480%); } }

@media (min-width: 75em) {
  .hover-imgcopy .copy-01 {
    -webkit-transform: translateY(-390%);
        -ms-transform: translateY(-390%);
            transform: translateY(-390%); }
  .hover-imgcopy .copy-03 {
    -webkit-transform: translateY(-660%);
        -ms-transform: translateY(-660%);
            transform: translateY(-660%); } }

@media (min-width: 100em) {
  .hover-imgcopy .copy-01 {
    -webkit-transform: translateY(-490%);
        -ms-transform: translateY(-490%);
            transform: translateY(-490%); }
  .hover-imgcopy .copy-03 {
    -webkit-transform: translateY(-850%);
        -ms-transform: translateY(-850%);
            transform: translateY(-850%); } }

.swiper-pagination {
  text-align: center; }

.swiper-pagination-bullet {
  border: 0 !important;
  padding-top: 3px !important;
  height: auto !important;
  background: #fff; }

.swiper-pagination-bullet:hover, .swiper-pagination-bullet:focus {
  background: rgba(255, 255, 255, 0.5) !important; }

.swiper-pagination-bullet-active, .swiper-pagination-bullet-active:hover, .swiper-pagination-bullet-active:focus {
  background: -o-linear-gradient(315deg, #0061ce 0%, #e400d7 100%) !important;
  background: linear-gradient(135deg, #0061ce 0%, #e400d7 100%) !important; }

.swiper-button-prev::before, .swiper-button-next::before {
  color: #fff;
  font-size: 3rem;
  font-weight: bold; }

@media (min-width: 45em) {
  .swiper-button-prev::before, .swiper-button-next::before {
    font-size: 5rem; } }

.hero-section {
  position: relative; }

.hero-section .swiper-slide {
  position: relative;
  background-color: #000; }

.hero-section .swiper-slide img {
  width: 100%; }

.hero-section .swiper-pagination {
  position: absolute;
  z-index: 5;
  bottom: 0; }

.hero-section .desc {
  position: absolute;
  z-index: 2;
  right: 2rem;
  bottom: 0;
  margin: 0; }

@media (min-width: 60em) {
  .hero-section .desc,
  .hero-section .swiper-pagination {
    bottom: 5%; } }

.hero-section__cont {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 3;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  text-align: center; }

.hero-section__cont-inner {
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1; }

.hero-section__logo {
  padding: 0 20%; }

.hero-section__pro {
  margin-top: 3rem;
  padding: 0 10%; }

@media (min-width: 60em) {
  .hero-section__pro {
    margin-top: 5rem;
    padding: 0 20%; } }

.hero-section__contents {
  position: relative;
  background-color: #000;
  background-position: 100% 100%;
  background-repeat: no-repeat;
  background-size: auto 100%; }

.hero-section__contents .titie {
  color: #fff;
  z-index: 3; }

.hero-section__contents .flexible-obj {
  z-index: 3; }

.hero-section__contents::after {
  content: '';
  display: block;
  position: absolute;
  z-index: 1;
  bottom: 0;
  width: 200%;
  height: 50%;
  background-color: #202020;
  -webkit-transform: translateX(-50%) translateY(200px) rotate(188deg);
      -ms-transform: translateX(-50%) translateY(200px) rotate(188deg);
          transform: translateX(-50%) translateY(200px) rotate(188deg); }

@media (min-width: 60em) {
  .hero-section__contents::after {
    -webkit-transform: translateX(-50%) translateY(265px) rotate(188deg);
        -ms-transform: translateX(-50%) translateY(265px) rotate(188deg);
            transform: translateX(-50%) translateY(265px) rotate(188deg); } }

.prd-position {
  position: relative; }

.prd-position__left, .prd-position__right {
  position: absolute;
  z-index: 5; }

.prd-position__left {
  left: 0;
  top: 0;
  -webkit-transform: translateY(-45%);
      -ms-transform: translateY(-45%);
          transform: translateY(-45%); }

.prd-position__right {
  right: 0;
  top: 0;
  -webkit-transform: translateY(80%);
      -ms-transform: translateY(80%);
          transform: translateY(80%); }

@media (max-width: 74.99em) {
  .prd-position {
    display: none; } }

.prd-section {
  position: relative;
  color: #fff; }

.prd-section .title,
.prd-section .s-title,
.prd-section .p {
  color: #fff; }

.prd-section .s-title {
  margin: 2rem 0; }

@media (min-width: 60em) {
  .prd-section {
    font-size: 1.8rem; } }

.prd-section__head {
  text-align: center;
  margin-bottom: 5rem; }

.than-ever {
  position: relative;
  color: #fff; }

.than-ever .l-wrap {
  z-index: 6; }

.than-ever + .than-ever {
  margin-top: 5rem; }

@media (min-width: 45em) {
  .than-ever + .than-ever {
    margin-top: 8rem; } }

@media (min-width: 60em) {
  .than-ever + .than-ever {
    margin-top: 10rem; } }

@media (min-width: 75em) {
  .than-ever + .than-ever {
    margin-top: 13rem; } }

@media (min-width: 100em) {
  .than-ever + .than-ever {
    margin-top: 15rem; } }

.than-ever .title,
.than-ever .s-title {
  color: #fff; }

.than-ever .in-title {
  font-size: 8rem;
  letter-spacing: -0.5rem; }

@media (min-width: 35em) {
  .than-ever .in-title {
    font-size: 10rem;
    letter-spacing: -0.7rem; } }

@media (min-width: 45em) {
  .than-ever .in-title {
    font-size: 14rem;
    letter-spacing: -1rem; } }

@media (min-width: 60em) {
  .than-ever .in-title {
    font-size: 22rem;
    letter-spacing: -1.8rem; } }

@media (min-width: 75em) {
  .than-ever .in-title {
    font-size: 28rem;
    letter-spacing: -2.6rem; } }

@media (min-width: 100em) {
  .than-ever .in-title {
    font-size: 36rem;
    letter-spacing: -3.2rem; } }

.than-ever .color-title {
  font-size: 3rem;
  letter-spacing: -0.1rem;
  margin: 2rem 0; }

@media (min-width: 35em) {
  .than-ever .color-title {
    font-size: 4rem; } }

@media (min-width: 45em) {
  .than-ever .color-title {
    font-size: 5rem;
    letter-spacing: -0.3rem; } }

@media (min-width: 60em) {
  .than-ever .color-title {
    font-size: 7rem;
    letter-spacing: -0.5rem; } }

@media (min-width: 75em) {
  .than-ever .color-title {
    font-size: 8rem; } }

@media (min-width: 100em) {
  .than-ever .color-title {
    font-size: 10rem; } }

.than-ever__item {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  text-align: center;
  margin-left: -1rem;
  margin-right: -1rem; }

.than-ever__item .item {
  -webkit-box-flex: 1;
      -ms-flex: 1 1 40%;
          flex: 1 1 40%;
  position: relative;
  text-decoration: none;
  border-radius: 1rem;
  height: 200px;
  background: -o-linear-gradient(315deg, #0061ce 0%, #e400d7 100%);
  background: linear-gradient(135deg, #0061ce 0%, #e400d7 100%);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  margin: 1rem; }

.than-ever__item .item p {
  color: #fff;
  font-size: 2.2rem;
  line-height: 1.3;
  padding: 2rem 2rem 4rem 2rem; }

.than-ever__item .item strong[lang="en"] {
  color: #fff;
  font-size: 3.2rem;
  font-weight: bold; }

.than-ever__item .item span[lang="en"] {
  color: #fff;
  font-size: 2.8rem;
  font-weight: bold; }

.than-ever__item .item:after {
  content: '\ea06';
  display: inline-block;
  font-family: 'icon';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  text-decoration: none !important;
  text-transform: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 1rem;
  color: #fff;
  font-size: 1.6rem; }

.than-ever__item + .desc {
  text-align: left; }

@media (min-width: 75em) {
  .than-ever__item {
    margin-left: -2rem;
    margin-right: -2rem; }
  .than-ever__item .item {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    height: 250px;
    margin: 2rem; }
  .than-ever__item .item p {
    font-size: 2.6rem; }
  .than-ever__item .item strong[lang="en"] {
    font-size: 5rem; }
  .than-ever__item .item span[lang="en"] {
    font-size: 4rem; } }

.x-processor {
  text-align: center;
  margin-top: 5rem; }

@media (min-width: 60em) {
  .x-processor {
    margin-top: 8rem; } }

.x-processor__section {
  position: relative;
  background-position: 50% 0;
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-color: #341336; }

.x-processor__section .btn {
  border: 0;
  color: #fff;
  background: -o-linear-gradient(315deg, #0061ce 0%, #e400d7 100%);
  background: linear-gradient(135deg, #0061ce 0%, #e400d7 100%);
  margin-top: 5rem; }

.x-processor__section .btn:after {
  content: '\ea1a';
  display: inline-block;
  font-family: 'icon';
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-style: normal;
  font-variant: normal;
  font-weight: normal;
  text-decoration: none !important;
  text-transform: none;
  display: inline-block;
  vertical-align: middle;
  margin-left: 5px; }

.x-processor__section::after {
  content: '';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(60%, #341336));
  background: -o-linear-gradient(top, transparent 0%, #341336 60%);
  background: linear-gradient(180deg, transparent 0%, #341336 60%); }

.x-processor__section .l-wrap {
  z-index: 2; }

@media (min-width: 60em) {
  .x-processor__section::after {
    background: -webkit-gradient(linear, left top, left bottom, from(transparent), to(#341336));
    background: -o-linear-gradient(top, transparent 0%, #341336 100%);
    background: linear-gradient(180deg, transparent 0%, #341336 100%); } }

.x-processor__logo, .x-processor__thumb {
  padding: 0 10%;
  margin: 3rem 0; }

.x-processor__item {
  text-align: center; }

.x-processor__item .item {
  position: relative;
  border-radius: 1rem;
  margin: 1rem; }

.x-processor__item .item p {
  color: #fff;
  font-size: 2.2rem;
  line-height: 1.3; }

.x-processor__item .item .color-box__inner {
  border-radius: 1rem;
  background-color: #341336; }

@media (min-width: 35em) {
  .x-processor__item {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-left: -1rem;
    margin-right: -1rem; }
  .x-processor__item .item {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 40%;
            flex: 1 1 40%; }
  .x-processor__item .item .color-box__inner {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: 50px; } }

@media (min-width: 60em) {
  .x-processor__item {
    margin-left: -1.5rem;
    margin-right: -1.5rem; }
  .x-processor__item .item {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    margin: 1.5rem; }
  .x-processor__item .item p {
    font-size: 2.6rem; }
  .x-processor__item .item .color-box__inner {
    padding: 1rem;
    height: 170px;
    background-color: #341336; } }

.speed__section .swiper-wrapper::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  margin: -2px;
  border: 7px solid #202020; }

.speed__section .swiper-pagination {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  padding: 2rem;
  bottom: auto;
  color: rgba(255, 255, 255, 0.5);
  font-size: 2rem; }

.speed__section .swiper-pagination-current {
  color: #fff;
  font-weight: bold; }

.speed__slider .copy {
  position: absolute;
  bottom: 2rem;
  right: 0; }

.speed__item {
  text-align: center; }

.speed__item img {
  width: 100%; }

.power__section .l-wrap {
  z-index: 5; }

.power__deco {
  display: block;
  position: relative;
  z-index: 2;
  margin-bottom: 20%; }

.power__deco::after {
  content: '';
  display: block;
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
  width: 150%;
  height: 450px;
  background: #000;
  -webkit-transform: translateX(-10%) translateY(25%) rotate(190deg);
      -ms-transform: translateX(-10%) translateY(25%) rotate(190deg);
          transform: translateX(-10%) translateY(25%) rotate(190deg); }

@media (min-width: 60em) {
  .power__deco {
    margin-bottom: 10%; }
  .power__deco::after {
    width: 90%;
    height: 500px;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, transparent), color-stop(45%, #000));
    background: -o-linear-gradient(left, transparent 0, #000 45%);
    background: linear-gradient(90deg, transparent 0, #000 45%);
    -webkit-transform: translateX(-10%) translateY(20%) rotate(190deg);
        -ms-transform: translateX(-10%) translateY(20%) rotate(190deg);
            transform: translateX(-10%) translateY(20%) rotate(190deg); } }

@media (min-width: 75em) {
  .power__deco::after {
    -webkit-transform: translateX(-10%) translateY(7%) rotate(190deg);
        -ms-transform: translateX(-10%) translateY(7%) rotate(190deg);
            transform: translateX(-10%) translateY(7%) rotate(190deg); } }

.mobility__section {
  color: #000; }

.mobility__section .title,
.mobility__section .s-title,
.mobility__section .p {
  color: #000; }

.mobility__section .desc {
  color: rgba(0, 0, 0, 0.7); }

.mobility__section .white {
  color: #fff; }

.mobility__section .white .title,
.mobility__section .white .s-title,
.mobility__section .white .p {
  color: #fff; }

.mobility__section .l-wrap {
  z-index: 5; }

.mobility__cover {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: 100% auto; }

.mobility__deco {
  display: block;
  position: relative;
  z-index: 2;
  margin-bottom: 20%; }

.mobility__deco::after {
  content: '';
  display: block;
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 0;
  width: 150%;
  height: 450px;
  background: #444;
  -webkit-transform: translateX(-10%) translateY(25%) rotate(190deg);
      -ms-transform: translateX(-10%) translateY(25%) rotate(190deg);
          transform: translateX(-10%) translateY(25%) rotate(190deg); }

@media (min-width: 60em) {
  .mobility__deco {
    margin-bottom: 10%; }
  .mobility__deco::after {
    width: 90%;
    height: 500px;
    background: -webkit-gradient(linear, left top, right top, color-stop(0, transparent), color-stop(45%, #444));
    background: -o-linear-gradient(left, transparent 0, #444 45%);
    background: linear-gradient(90deg, transparent 0, #444 45%);
    -webkit-transform: translateX(-10%) translateY(20%) rotate(190deg);
        -ms-transform: translateX(-10%) translateY(20%) rotate(190deg);
            transform: translateX(-10%) translateY(20%) rotate(190deg); } }

@media (min-width: 75em) {
  .mobility__deco::after {
    -webkit-transform: translateX(-10%) translateY(7%) rotate(190deg);
        -ms-transform: translateX(-10%) translateY(7%) rotate(190deg);
            transform: translateX(-10%) translateY(7%) rotate(190deg); } }