@charset "UTF-8";

/* common */
#container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  overflow: hidden;
}
.cont-wrap {
  width: 511px; /* 1130 */
  height: 919px; /* 2032 */
  display: flex;
  flex-direction: column;
}
.swiper-box {
  position: relative;
  width: 100%;
  flex: 1;
}
.main-swiper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1130px;
  height: 1900px;
  background: #1f1f1f;
}
.main-swiper .swiper-slide {
  position: relative;
  padding: 240px 65px 65px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
}
.main-swiper .swiper-slide.style2 {
  padding-top: 400px;
}
.main-swiper .swiper-slide.white-bg {
  background: #fff;
}
.main-swiper .swiper-slide.swiper-slide-active {
  z-index: 1;
}
.main-swiper .swiper-slide .inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* top-box */
.top-box {
  font-size: 0;
}
.top-box > * {
  display: none;
  opacity: 0;
  transition: 0.7s;
}
.top-box.on > * {
  display: flex;
}
.top-box.animate > * {
  opacity: 1;
}
.top-box .home-btn {
  width: 60px;
  z-index: 2;
}
/* .top-box .home-btn img {
  filter: invert(1);
  transition: 0.7s ease-in-out;
}
.top-box.black .home-btn img {
  filter: unset;
} */
.top-box .menu-btn {
  position: fixed;
  top: 72.935px;
  left: 65px;
  z-index: 2;
}
.top-box .menu-btn.disable:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}
.top-box .menu-btn button {
  width: 60px;
  height: 52px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.top-box .menu-btn button span {
  width: 100%;
  height: 3px;
  background: #fff;
  transition: 0.7s ease-in-out;
}
.top-box.black .menu-btn button span {
  background: #000;
}
.menu-box {
  display: none;
  position: fixed;
  top: 0;
  left: -100%;
  padding: 65px;
  width: 1130px;
  height: 1900px;
  z-index: 2;
  background-color: #fff;
  transform-origin: left top;
}
.onload .menu-box {
  transition: 0.3s;
  display: block;
}
.menu-box.on {
  left: 0;
}
.menu-top {
  position: relative;
}
.menu-box h2 {
  margin-left: 45px;
  display: inline-block;
  font-family: "kia-bold";
  font-size: 55px;
  line-height: 56px;
  vertical-align: bottom;
}
.menu-close-btn {
  position: absolute;
  top: 0;
  right: 0;
  width: 155px;
  height: 155px;
  border-radius: 100%;
  border: 2px solid #000;
}
.menu-close-btn:hover {
  background: #a9b2c0;
}
.menu-box .menu-list {
  margin-top: 265px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 45px 23px;
}
.menu-box .menu-list > li {
  padding: 33px 33px;
  width: 318px;
  height: 270px;
  background: rgba(166, 166, 163, 0.3);
}
.menu-box .menu-list > li:last-child {
  background: none;
}
.menu-box a {
  display: block;
}
.menu-box span {
  position: relative;
  display: inline-block;
  font-family: "kia-bold";
  font-size: 40px;
  line-height: 48px;
  color: #000;
  letter-spacing: 0;
}
.menu-box .sub-list {
  margin-top: 9px;
  padding-left: 4px;
}
.menu-box .sub-list span {
  font-family: "kia-regular";
  font-size: 34px;
  line-height: 54px;
}
.menu-box a.on span:before {
  content: "";
  position: absolute;
  top: 48px;
  left: 0;
  width: 100%;
  height: 3px;
  background: #000;
}
.menu-bottom {
  margin: 230px -65px 0 0;
  padding: 0 65px 65px 0;
  border-bottom: 2px solid #a2a3a4;
}
.menu-bottom a {
  display: inline-block;
  font-size: 38px;
  line-height: 80px;
}

/* bottom-box */
.bottom-box {
  position: relative;
  height: 60px;
  background: #1f1f1f;
}
.bottom-box:before {
  content: "";
  position: absolute;
  top: -1.2px;
  left: 0;
  width: 100%;
  height: 5px;
  background: #1f1f1f;
  z-index: 1;
}
.bottom-box .main-title {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
  align-items: center;
  background: #1f1f1f;
  z-index: 2;
}
.bottom-box .main-title.on {
  display: flex;
}
.bottom-box .main-title p {
  padding: 0 10px;
  font-size: 17px;
  line-height: 1;
  color: #fff;
}
.bottom-box .navi {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
}
.bottom-box .navi > div {
  height: 100%;
  display: flex;
  align-items: center;
}
.bottom-box .navi .thumbnail-btn {
  width: 60px;
  background: url(../img/svg/thumbnail-btn.svg) center no-repeat;
  background-size: 55% auto;
  filter: invert(1);
}
.bottom-box .navi .pagination span {
  padding: 2px;
  font-size: 14px;
  line-height: 1;
  color: #fff;
}
.bottom-box .navi .arrow {
  padding: 5px 10px 5px 0;
  display: flex;
}
.bottom-box .navi .arrow > button {
  height: 100%;
  padding: 7px;
}
.bottom-box .navi img {
  max-width: unset;
  height: 100%;
  filter: invert(1);
}
.bottom-box .thumbnail-swiper {
  position: absolute;
  bottom: 60px;
  left: 0;
  width: 100%;
  padding: 5px;
  background: #1f1f1f;
  z-index: -1;
}
.bottom-box .thumbnail-swiper.on {
  z-index: 2;
}
.bottom-box .thumbnail-swiper .swiper-slide {
  padding: 0 12px;
  width: auto;
}
.bottom-box .thumbnail-swiper .swiper-slide:first-child {
  padding-left: 0;
}
.bottom-box .thumbnail-swiper .swiper-slide:last-child {
  padding-right: 0;
}
.bottom-box .thumbnail-swiper a {
  display: block;
}
.bottom-box .thumbnail-swiper a.on {
  border: 1px solid #fff;
}
.bottom-box .thumbnail-swiper img {
  width: 80px;
}

/* sec1 */
.main-swiper .swiper-slide.sec1 {
  background-image: url(../img/sec1-bg.jpg);
}
.main-swiper .swiper-slide.sec1 h1 {
  margin-top: -172px;
  padding: 20px 0;
  font-size: 118px;
  line-height: 1em;
  color: #fff;
}
.main-swiper .swiper-slide.sec1 .line {
  position: absolute;
  top: 327.457px;
  left: -10.864px;
  transition: 1s;
}
.main-swiper .swiper-slide.sec1 .line path {
  stroke-dasharray: 1400 1400;
  stroke-dashoffset: -1400;
}
body.onload .main-swiper .swiper-slide.sec1.swiper-slide-active .line path {
  animation: draw-line 2s ease forwards 0.5s;
}
.main-swiper .swiper-slide.sec1.swiper-slide-prev .line path {
  stroke-dashoffset: 0;
}
@keyframes draw-line {
  to {
    stroke-dashoffset: 0;
  }
}
.main-swiper .swiper-slide.sec1 .logo {
  position: absolute;
  left: 64.878px;
  bottom: 58px;
  width: 337.621px;
}
.main-swiper .swiper-slide .h3 {
  margin-top: -10px;
  padding-bottom: 20px;
  font-size: 71px;
  line-height: 94px;
  letter-spacing: -0.6px;
  color: #fff;
}
.main-swiper .swiper-slide p {
  font-family: "kia-light";
  font-size: 40px;
  line-height: 61px;
  color: #fff;
}

/* sec2 */
.swiper-slide.p0 {
  padding: 0;
}
.horizontal-swiper {
  height: 100%;
}
.swiper-slide.sec2 .swiper-slide.sec2-1 {
  background-image: url(../img/sec2-1-bg.jpg);
}
.swiper-slide.sec2 .swiper-slide.sec2-2 {
  background-image: url(../img/sec2-2-bg.jpg);
}
.swiper-slide.sec2 .swiper-slide.sec2-3 {
  background-image: url(../img/sec2-3-bg.jpg);
}
.swiper-slide.sec2-3 {
  padding-top: 162px;
}
.swiper-slide.sec2-1 p {
  padding-top: 12px;
  font-size: 50px;
  line-height: 70px;
  letter-spacing: -0.4px;
}
.swiper-slide.sec2-2 .inner {
  display: flex;
  align-items: flex-end;
}
.swiper-slide.sec2-2 p {
  padding-bottom: 76px;
}
.swiper-slide.sec2-3 p {
  padding-bottom: 76px;
}
.swiper-slide .info-box {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 35px;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
}
.swiper-slide .info-box .arrow {
  display: flex;
}
.swiper-slide .info-box .arrow span {
  padding: 0 20px;
  width: 39.658px;
  height: 69.752px;
  box-sizing: content-box;
}
.swiper-slide .info-box .arrow span.prev {
  animation: move-left 2.5s infinite;
}
.swiper-slide .info-box .arrow span.next {
  animation: move-right 2.5s infinite;
}
@keyframes move-right {
  0% {
    opacity: 0;
    transform: translate(0);
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(15px);
  }
}

@keyframes move-left {
  0% {
    opacity: 0;
    transform: translate(0);
  }
  50% {
    opacity: 1;
  }
  to {
    opacity: 0;
    transform: translate(-15px);
  }
}
.swiper-slide .info-box p {
  padding: 27px 0 18px;
  font-size: 35px;
  line-height: 45px;
  text-align: center;
  letter-spacing: 0.4px;
  color: #fff !important;
}

/* sec3 */
.main-swiper .swiper-slide.black-menu .h3 {
  color: #000;
}
.main-swiper .swiper-slide.sec3 p {
  padding-top: 18px;
  letter-spacing: 0.5px;
}
.main-swiper .swiper-slide.black-menu p {
  color: #000;
}
.main-swiper .video {
  position: absolute;
  z-index: 1;
  width: 100%;
}
.main-swiper .video:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.main-swiper .swiper-slide.sec3 .video {
  left: 0;
  bottom: 0;
  padding-top: calc(1100 / 1130 * 100%);
}

/* sec4 */
.main-swiper .swiper-slide .h2 {
  position: absolute;
  top: 60px;
  left: 65px;
  padding-left: 105px;
  font-family: "kia-bold";
  font-size: 75px;
  line-height: 84px;
  letter-spacing: -0.8px;
}
.main-swiper .swiper-slide.sec4 p {
  margin-top: -7px;
  letter-spacing: 0.6px;
}
.main-swiper .swiper-slide.sec4 ul {
  margin-top: 115px;
  display: flex;
  flex-direction: column;
  gap: 35px 0;
}
.main-swiper .swiper-slide.sec4 ul > li {
  display: flex;
}
.main-swiper .swiper-slide.sec4 ul > li.ani {
  transform: translateX(0) !important;
  transition: 1.5s;
}
.main-swiper .swiper-slide.sec4 ul > li:nth-child(odd) {
  transform: translateX(-108%);
}
.main-swiper .swiper-slide.sec4 ul > li:nth-child(even) {
  transform: translateX(108%);
  text-align: right;
}
.main-swiper .swiper-slide.sec4 .video-wrap {
  width: 50%;
  position: relative;
  padding-top: calc(300 / 1000 * 100%);
}
.main-swiper .swiper-slide.sec4 .video-wrap .video {
  top: 0;
  left: 0;
  height: 100%;
}
.main-swiper .swiper-slide.sec4 dl {
  width: 50%;
  padding-top: 43px;
}
.main-swiper .swiper-slide.sec4 ul > li:nth-child(odd) dl {
  padding-left: 35px;
}
.main-swiper .swiper-slide.sec4 ul > li:nth-child(even) dl {
  padding-right: 35px;
}
.main-swiper .swiper-slide.sec4 dt {
  font-family: "kia-bold";
  font-size: 40px;
  line-height: 40px;
}
.main-swiper .swiper-slide.sec4 dd {
  padding-top: 34px;
  font-family: "kia-light";
  font-size: 28px;
  line-height: 47px;
  letter-spacing: 0.5px;
}
.main-swiper .swiper-slide.sec4 dd.style1 {
  letter-spacing: 0.2px;
}

/* sec5 */
.main-swiper .swiper-slide.sec5 {
  background-image: url(../img/sec5-bg.jpg);
}
.main-swiper .cover-title {
  margin: -180px 0 0 105px;
}
.main-swiper .swiper-slide .h1 {
  font-family: "kia-bold";
  font-size: 75px;
  line-height: 84px;
  letter-spacing: -1px;
  color: #fff;
}

/* sec6 */
.main-swiper .swiper-slide.flex-box .inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.main-swiper .swiper-slide.flex-box .h3 {
  padding-bottom: 17px;
  letter-spacing: -0.6px;
}
.main-swiper .swiper-slide.flex-box .h3.style1 {
  padding-bottom: 8px;
  line-height: 101px;
}
.main-swiper .img-box.bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.main-swiper .swiper-slide.sec6 .video {
  position: relative;
  width: calc(1065 / 1000 * 100%);
  padding-top: calc(750 / 1000 * 100%);
}
.main-swiper .swiper-slide.flex-box p {
  padding: 22px 0 27px;
}
.main-swiper .swiper-slide.flex-box p.p2 {
  letter-spacing: 0.5px;
}
.main-swiper .img-box.right {
  width: calc(1065 / 1000 * 100%);
}

/* sec7 */
.main-swiper .inner.right {
  text-align: right;
  padding-left: 100px;
}
.main-swiper .inner.right p {
  text-align: left;
}

/* sec8 */
.main-swiper .swiper-slide.sec8 {
  background-image: url(../img/sec8-bg.jpg);
}
.main-swiper .swiper-slide.sec8 .inner {
  z-index: 2;
}
.main-swiper .swiper-slide.sec8 .video {
  top: 0;
  left: 0;
  height: 100%;
}

/* sec9 */
.main-swiper .cont-box:first-child {
  height: 830px;
}
.main-swiper .cont-box .img-box {
  font-size: 0;
  margin-bottom: 24px;
  display: flex;
  gap: 0 10px;
}
.main-swiper b {
  font-family: "kia-bold";
  font-size: 40px;
  line-height: 55px;
  letter-spacing: -0.4px;
}
.main-swiper .cont-box p {
  line-height: 55px;
  letter-spacing: -0.5px;
}

/* sec12 */
.main-swiper .swiper-slide.sec12 {
  background-image: url(../img/sec12-bg.jpg);
}

/* sec14 */
.main-swiper .swiper-slide.sec14-2 p.style1 {
  padding: 20px 0 27px;
  line-height: 55px;
}

/* sec15 */
.main-swiper .swiper-slide.sec15-3 .video {
  left: 0;
  bottom: 0;
  padding-top: calc(780 / 1130 * 100%);
}

/* sec16 */
.main-swiper .swiper-slide.sec16 {
  background-image: url(../img/sec16-bg.jpg);
}

/* sec17 */
.main-swiper .swiper-slide.sec17 .flex {
  height: 100%;
}
.main-swiper .swiper-slide.sec17 .video {
  position: relative;
  margin: 47px 0 0 calc(-65 / 1000 * 100%);
  width: calc(1130 / 1000 * 100%);
  padding-top: calc(700 / 1000 * 100%);
}
.main-swiper .swiper-slide.sec17 p.step2 {
  margin-right: -10px;
  padding-top: 14px;
}
.main-swiper .swiper-slide p.step2 {
  line-height: 55px;
  letter-spacing: -0.5px;
}
.main-swiper .swiper-slide p.step2 b {
  line-height: 55px;
  letter-spacing: -0.4px;
}
.main-swiper .swiper-slide p.step2 b.b2 {
  letter-spacing: -0.6px;
}
.main-swiper .swiper-slide p b {
  font-family: "kia-bold";
}

/* sec18 */
.main-swiper .video.style2 {
  position: relative;
  padding-top: calc(700 / 1000 * 100%);
}

/* sec21 */
.tab-btn-box {
  margin-top: 60px;
}
.tab-btn-box ul {
  display: flex;
  gap: 19px;
}
.tab-btn-box ul li {
  position: relative;
  width: 490px;
  height: 85px;
}
.tab-btn-box ul li a {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  font-family: "kia-light";
  font-size: 45px;
  line-height: 79px;
  color: #464648;
  letter-spacing: -1px;
  text-align: center;
  border: 2px solid #464648;
  border-radius: 85px;
  overflow: hidden;
}
.tab-btn-box ul li.on a {
  font-family: "kia-bold";
  color: #fff;
  background: #464648;
}
.tab-cont-box {
  flex: 1;
  margin-top: 65px;
  position: relative;
  width: 100%;
}
.tab-cont-box > ul {
  height: 100%;
}
.tab-cont-box > ul > li {
  display: none;
  height: 100%;
}
.tab-cont-box > ul > li.on {
  display: block;
  z-index: 2;
}
.tab-cont-box .img-box {
  position: relative;
  width: 100%;
  padding-top: calc(600 / 1000 * 100%);
  overflow: hidden;
}
.tab-cont-box .img-box ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-position: center;
  background-size: cover;
  transition: 0.3s ease-in-out;
}
.tab-cont-box .img-box li {
  width: 100%;
  height: 100%;
  opacity: 0;
}
.tab-cont-box .img-box li img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: unset;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tab-cont-box .color-box {
  margin-top: 30px;
  position: relative;
}
.tab-cont-box .color-box .swiper-pagination {
  bottom: auto;
  top: 0;
  left: 0;
  z-index: 5;
}
.tab-cont-box .color-box .swiper-pagination span {
  margin: 5px;
  float: left;
  position: relative;
  width: 50px;
  height: 50px;
  border-radius: unset;
}
.tab-cont-box .color-box .swiper-pagination span:nth-child(3n + 1) {
  clear: both;
}
.tab-cont-box .color-box ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}
.tab-cont-box .color-box a {
  position: relative;
  display: block;
  width: 316px;
  height: 100px;
}
.tab-cont-box .color-box a:before {
  content: "";
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 3px solid #fcc200;
  z-index: 1;
  transition: 0.3s ease-in-out;
}
.tab-cont-box .color-box a:after {
  content: "";
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: url(../img/svg/check.svg) no-repeat;
  background-size: 100% auto;
  z-index: 1;
  transition: 0.3s ease-in-out;
}
.tab-cont-box .color-box li.on a:before,
.tab-cont-box .color-box li.on a:after {
  opacity: 1;
}
.tab-cont-box .color-box a img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tab-cont-box .color-box a span {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  text-align: center;
  color: #fff;
  font-family: "kia-light";
  font-size: 27px;
  line-height: 100px;
  letter-spacing: -0.7px;
  cursor: pointer;
}
.tab-cont-box .color-box a span.black {
  color: #000;
}
.tab-cont-box .bottom-check-box {
  position: relative;
  margin-top: 118px;
  width: 100%;
}
.tab-cont-box .wheel-box {
  padding-right: 5px;
}
.tab-cont-box .bottom-check-box b {
  position: absolute;
  top: 60px;
  left: 0;
  font-family: "kia-bold";
  font-size: 35px;
  font-size: 35px;
  line-height: 33px;
}
.tab-cont-box .bottom-check-box ul {
  display: flex;
  justify-content: end;
}
.tab-cont-box .bottom-check-box li {
  padding: 0 37.5px;
  text-align: center;
}
.sec21 .tab-cont-box > ul > li:nth-child(2) .bottom-check-box li {
  padding: 0 36.6px;
}
.tab-cont-box .bottom-check-box li .img-wrap {
  position: relative;
}
.tab-cont-box .bottom-check-box li .img-wrap:before {
  content: "";
  /* opacity: 0; */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 100%;
  border: 3px solid #fcc200;
  z-index: 1;
  transition: 0.3s ease-in-out;
}
.tab-cont-box .wheel-box li .img-wrap:before {
  opacity: 1;
  top: 0;
  left: 0;
  border: 1px solid #000;
}
.tab-cont-box .wheel-box li.on .img-wrap:before {
  top: -1px;
  left: -1px;
  width: 192px;
  height: 192px;
  border: 3px solid #fcc200;
}
.tab-cont-box .bottom-check-box li .img-wrap:after {
  content: "";
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  width: 30px;
  height: 30px;
  background: url(../img/svg/check.svg) no-repeat;
  background-size: 100% auto;
  z-index: 1;
  transition: 0.3s ease-in-out;
}
.tab-cont-box .bottom-check-box li.on .img-wrap:before,
.tab-cont-box .bottom-check-box li.on .img-wrap:after {
  opacity: 1;
}
.tab-cont-box .bottom-check-box a {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.tab-cont-box .wheel-box a {
  width: 190px;
}
.tab-cont-box .bottom-check-box a span {
  display: block;
  padding: 16px 0 15px;
  font-family: "kia-light";
  font-size: 32px;
  line-height: 24px;
  letter-spacing: -0.3px;
  text-align: center;
}
.tab-cont-box .wheel-box a span {
  padding: 18px 0 0;
  line-height: 40px;
  white-space: nowrap;
}

/* sec22 */
.swiper-slide.sec22 .tab-cont-box .car-img > li {
  position: absolute;
  top: 0;
  left: 0;
}
.tab-cont-box .color-chip-box {
  margin-top: 30px;
  display: flex;
  justify-content: space-between;
}
.tab-cont-box .color-btn {
  width: 316px;
}
.tab-cont-box .color-btn li {
  margin-bottom: 20px;
}
.tab-cont-box .color-btn li:last-child {
  margin-bottom: 0;
}
.tab-cont-box .color-btn li a {
  position: relative;
  display: block;
}
.tab-cont-box .color-btn li a span {
  display: block;
  width: 100%;
  height: 70px;
  font-family: "kia-light";
  font-size: 32px;
  line-height: 64px;
  text-align: center;
  letter-spacing: -0.6px;
  border: 1px solid #464648;
  border-radius: 10px;
  overflow: hidden;
}
.tab-cont-box .color-btn li.on a span {
  color: #fff;
  background: #464648;
}
.tab-cont-box .color-chip li {
  display: none;
  gap: 0 28px;
  height: 250px;
}
.tab-cont-box .color-chip li.on {
  display: flex;
}
.tab-cont-box .color-chip .text {
  position: relative;
  width: 130px;
  height: 100%;
}
.tab-cont-box .color-chip .flex-box {
  display: flex;
}
.tab-cont-box .color-chip .flex-box .img {
  position: relative;
  width: 130px;
  height: 100%;
}
.tab-cont-box .color-chip .flex-box .img.white:before {
  content: "";
  display: block;
  position: absolute;
  top: -2px;
  left: 94px;
  width: 8px;
  height: calc(100% + 4px);
  background: #fff;
  z-index: 2;
}
.tab-cont-box .color-chip .flex-box .img.w1 {
  width: 250px;
}
.tab-cont-box .color-chip .flex-box .img.w2 {
  width: 125px;
}
.tab-cont-box .color-chip .flex-box .img.style1 {
  width: 85px;
}
.tab-cont-box .color-chip .flex-box .img.style2 {
  width: 90px;
}
.tab-cont-box .color-chip .img {
  height: 70px;
}
.tab-cont-box .color-chip .img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tab-cont-box .color-chip .text span {
  position: absolute;
  left: 0;
  bottom: 11px;
  width: 100%;
  display: block;
  font-family: "kia-light";
  font-size: 30px;
  line-height: 40px;
  letter-spacing: -0.7px;
  color: #fff;
  text-align: center;
}
.tab-cont-box .sheet-box > ul > li {
  display: none;
}
.tab-cont-box .sheet-box > ul > li.on {
  display: block;
}
.tab-cont-box .bottom-check-box.sheet-box li .img-wrap:before,
.tab-cont-box .bottom-check-box.sheet-box li .img-wrap:after {
  opacity: 0;
}
.tab-cont-box .bottom-check-box.sheet-box .sheet-box-list li.on .img-wrap:before,
.tab-cont-box .bottom-check-box.sheet-box .sheet-box-list li.on .img-wrap:after {
  opacity: 1;
}
.tab-cont-box .sheet-box {
  margin-top: 205px;
}
.tab-cont-box .sheet-box ul {
  gap: 26px;
}
.tab-cont-box .sheet-box li {
  padding: 0;
}
.tab-cont-box .sheet-box a {
  display: block;
}
.tab-cont-box .sheet-box a .img-wrap {
  width: 316px;
  height: 250px;
}
.tab-cont-box .sheet-box a .img-wrap:before {
  border-radius: unset;
}
.tab-cont-box .sheet-box a .img-wrap img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* sec23 */
.main-swiper .swiper-slide .h2 span {
  padding-left: 3px;
  display: inline-block;
  vertical-align: middle;
  font-family: "kia-bold";
  font-size: 45px;
  line-height: 84px;
}
.main-swiper .swiper-slide.sec23 .img {
  padding-top: 40px;
}
.main-swiper .table {
  margin-top: 74px;
  padding: 40px 55px;
  background: #e6e6e6;
}
.main-swiper .table li {
  display: flex;
  gap: 0 20px;
}
.main-swiper .table li:last-child {
  border-bottom: 1px solid #9fa0a0;
}
.main-swiper .line-box {
  position: relative;
  padding: 0 25px;
  border-top: 1px solid #9fa0a0;
}

.main-swiper .line-box:nth-child(1) {
  width: 350px;
}
.main-swiper .line-box:nth-child(2) {
  padding-left: 140px;
  flex: 1;
}
.main-swiper .line-box:nth-child(2):after {
  content: "mm";
  position: absolute;
  top: 0;
  right: 27px;
  font-family: "kia-light";
  font-size: 37px;
  line-height: 79px;
  letter-spacing: -0.2px;
}
.main-swiper .line-box span {
  position: relative;
  display: inline-block;
  font-family: "kia-light";
  font-size: 37px;
  line-height: 79px;
  letter-spacing: -0.3px;
  text-align: center;
}
.main-swiper .line-box:nth-child(2) span {
  width: 120px;
  letter-spacing: 0;
}

/* sec24 */
.main-swiper .swiper-slide.sec24 {
  padding: 60px 65px 55px;
  background: #000118;
}
.main-swiper .swiper-slide.sec24 b {
  display: block;
  margin-bottom: 33px;
  color: #fff;
  letter-spacing: -0.3px;
}
.main-swiper .swiper-slide.sec24 p.step1 {
  padding-top: 20px;
  margin-bottom: 2px;
  font-size: 38px;
  line-height: 54px;
}
.main-swiper .swiper-slide.sec24 p {
  font-size: 33px;
  line-height: 50px;
}

.main-swiper .swiper-slide.sec24 .logo img {
  width: 480px;
}