feat: 디즈니 프로모션 추가

kr/assets/css/promotion.css

@@ -0,0 +1,419 @@
+@charset "UTF-8";
+/*변수*/
+/*반응형 화면 크기*/
+/*css 디폴트는 모바일이 기준*/
+/*반응형, 브라우저 크기가 300px 이하일때*/
+/*반응형, 브라우저 크기가 800px 이상일때*/
+/*@media (min-width: $mobile ) and (max-width: $tablet){*/
+/*반응형, 브라우저 크기가 1025px 이상일때*/
+/*반응형, 브라우저 크기가 1204px 이상일때*/
+/*넓이, 높이 자동 계산함수*/
+/*변수파일 import*/
+@-webkit-keyframes easeInOutQuart {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+@keyframes easeInOutQuart {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+#promotion .contentWarp {
+  max-width: 100%;
+  margin-top: 0;
+}
+#promotion .promotionHeader {
+  width: 100%;
+  height: 108rem;
+  background: url("../images/kia/promotion/kv_promotion.jpg") no-repeat center center/auto 100%;
+}
+#promotion .promotionHeader .promotionHeaderInner {
+  width: 100%;
+  max-width: 120rem;
+  margin: 0 auto;
+  padding-top: 71.4rem;
+}
+#promotion .promotionHeader .promotionHeaderInner .pageTitle h1 {
+  font-size: 4.8rem;
+  font-weight: 600;
+  color: #fff;
+}
+#promotion .promotionHeader .promotionHeaderInner .pageTitle p {
+  font-size: 1.6rem;
+  font-weight: 400;
+  color: #fff;
+}
+#promotion .tabNavigation {
+  width: 100%;
+  background: #fff;
+  border-bottom: 1px solid #e5e5e5;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  z-index: 100;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+#promotion .tabNavigation .tabNavigationInner {
+  max-width: 120rem;
+  margin: 0 auto;
+}
+#promotion .tabNavigation .tabNavigationInner .tabList {
+  display: flex;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+#promotion .tabNavigation .tabNavigationInner .tabList .tabItem {
+  flex: 1;
+}
+#promotion .tabNavigation .tabNavigationInner .tabList .tabItem .tabLink {
+  display: block;
+  padding: 2rem 1.5rem;
+  text-decoration: none;
+  color: #666;
+  font-size: 1.6rem;
+  font-weight: 400;
+  text-align: center;
+  border-bottom: 3px solid transparent;
+  transition: all 0.3s ease;
+}
+#promotion .tabNavigation .tabNavigationInner .tabList .tabItem .tabLink:hover {
+  color: #333;
+}
+#promotion .tabNavigation .tabNavigationInner .tabList .tabItem.active .tabLink {
+  color: #333;
+  font-weight: 600;
+  border-bottom-color: #333;
+}
+#promotion .tabContentArea {
+  width: 100%;
+  background: #fff;
+  min-height: 60rem;
+  position: relative;
+}
+#promotion .tabContentArea .tabContentInner {
+  margin: 0 auto;
+  position: relative;
+}
+#promotion .tabContentArea .tabContentInner .tabContent {
+  min-height: 60rem;
+  display: block;
+  opacity: 1;
+  visibility: visible;
+  transform: none;
+  position: relative;
+  margin-bottom: 4rem;
+}
+#promotion .tabContentArea .tabContentInner .tabContent .contentSection h2 {
+  font-size: 3.2rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 2rem;
+}
+#promotion .tabContentArea .tabContentInner .tabContent .contentSection p {
+  font-size: 1.6rem;
+  color: #666;
+  line-height: 1.6;
+  margin-bottom: 3rem;
+}
+#promotion .contentSectionInner {
+  max-width: 120rem;
+  margin: 0 auto;
+}
+#promotion .disneySwiperContainer {
+  width: 100%;
+  overflow: hidden;
+  margin-top: 4rem;
+  padding: 2rem 0;
+}
+#promotion .disneySwiperContainer .disneySwiper {
+  width: 100%;
+  padding: 2rem 0 4rem;
+}
+#promotion .disneySwiperContainer .disneySwiper .swiper-slide {
+  width: 58rem !important;
+  height: 36rem;
+  flex-shrink: 0;
+}
+#promotion .disneySwiperContainer .disneySwiper .swiper-slide .themeCard {
+  border-radius: 2rem;
+  padding: 3rem 2rem;
+  text-align: center;
+  color: #fff;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  transition: all 0.3s ease;
+}
+#promotion .disneySwiperContainer .disneySwiper .swiper-slide .themeCard h3 {
+  font-size: 2.2rem;
+  font-weight: 700;
+  margin-bottom: 1rem;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+}
+#promotion .disneySwiperContainer .disneySwiper .swiper-slide .themeCard p {
+  font-size: 1.4rem;
+  opacity: 0.9;
+  line-height: 1.4;
+  margin: 0;
+}
+#promotion .disneySwiperContainer .disneySwiper .swiper-button-next,
+#promotion .disneySwiperContainer .disneySwiper .swiper-button-prev {
+  display: none;
+  color: #333;
+  background: rgba(255, 255, 255, 0.9);
+  width: 5rem;
+  height: 5rem;
+  border-radius: 50%;
+  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+}
+#promotion .disneySwiperContainer .disneySwiper .swiper-button-next:after,
+#promotion .disneySwiperContainer .disneySwiper .swiper-button-prev:after {
+  font-size: 1.8rem;
+  font-weight: bold;
+}
+#promotion .disneySwiperContainer .disneySwiper .swiper-button-next:hover,
+#promotion .disneySwiperContainer .disneySwiper .swiper-button-prev:hover {
+  background: #fff;
+  transform: scale(1.1);
+}
+#promotion .disneySwiperContainer .disneySwiper .swiper-pagination {
+  bottom: 0;
+}
+#promotion .disneySwiperContainer .disneySwiper .swiper-pagination .swiper-pagination-bullet {
+  background: #ddd;
+  opacity: 1;
+  width: 1.2rem;
+  height: 1.2rem;
+  margin: 0 0.5rem;
+}
+#promotion .disneySwiperContainer .disneySwiper .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {
+  background: #333;
+  transform: scale(1.2);
+}
+#promotion .noticeBox {
+  background: #fff;
+  border-radius: 1rem;
+  padding: 2rem;
+  margin: 3rem 0;
+  border: 1px solid #e5e5e5;
+}
+#promotion .noticeBox h3 {
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid #e5e5e5;
+}
+#promotion .noticeBox ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+#promotion .noticeBox ul li {
+  position: relative;
+  padding-left: 2rem;
+  margin-bottom: 1rem;
+  font-size: 1.4rem;
+  color: #666;
+  line-height: 1.5;
+}
+#promotion .noticeBox ul li:before {
+  content: "•";
+  position: absolute;
+  left: 0;
+  color: #333;
+  font-weight: bold;
+}
+#promotion .noticeBox ul li:last-child {
+  margin-bottom: 0;
+}
+#promotion .carList {
+  margin-top: 3rem;
+}
+#promotion .guideSteps {
+  margin-top: 3rem;
+}
+#promotion .guideSteps .stepItem {
+  display: flex;
+  align-items: flex-start;
+  margin-bottom: 3rem;
+}
+#promotion .guideSteps .stepItem .stepNumber {
+  width: 4rem;
+  height: 4rem;
+  background: #333;
+  color: #fff;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.8rem;
+  font-weight: 600;
+  margin-right: 2rem;
+  flex-shrink: 0;
+}
+#promotion .guideSteps .stepItem .stepContent {
+  flex: 1;
+}
+#promotion .guideSteps .stepItem .stepContent h3 {
+  font-size: 2rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 1rem;
+}
+#promotion .guideSteps .stepItem .stepContent p {
+  font-size: 1.4rem;
+  color: #666;
+  line-height: 1.5;
+  margin: 0;
+}
+#promotion .featuresList {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
+  gap: 2rem;
+  margin-top: 3rem;
+}
+#promotion .featuresList .featureCard {
+  padding: 2rem;
+  background: #fff;
+  border: 1px solid #e5e5e5;
+  border-radius: 1rem;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+#promotion .featuresList .featureCard h3 {
+  font-size: 1.8rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 1rem;
+}
+#promotion .featuresList .featureCard p {
+  font-size: 1.4rem;
+  color: #666;
+  line-height: 1.5;
+  margin: 0;
+}
+#promotion .infoGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
+  gap: 3rem;
+  margin-top: 3rem;
+}
+#promotion .infoGrid .infoSection h3 {
+  font-size: 2rem;
+  font-weight: 600;
+  color: #333;
+  margin-bottom: 1.5rem;
+  padding-bottom: 1rem;
+  border-bottom: 2px solid #e5e5e5;
+}
+#promotion .infoGrid .infoSection ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+#promotion .infoGrid .infoSection ul li {
+  padding: 0.8rem 0;
+  font-size: 1.4rem;
+  color: #666;
+  border-bottom: 1px solid #f0f0f0;
+}
+#promotion .infoGrid .infoSection ul li:last-child {
+  border-bottom: none;
+}
+#promotion .infoGrid .infoSection ul li:before {
+  content: "•";
+  color: #333;
+  font-weight: bold;
+  margin-right: 1rem;
+}
+@media (max-width: 768px) {
+  #promotion .tabNavigation .tabNavigationInner .tabList .tabItem .tabLink {
+    padding: 1.5rem 1rem;
+    font-size: 1.4rem;
+  }
+  #promotion .tabContentArea {
+    width: 100%;
+  }
+  #promotion .tabContentArea .tabContentInner .tabContent .contentSection h2 {
+    font-size: 2.4rem;
+  }
+  #promotion .disneySwiperContainer {
+    margin-top: 3rem;
+    padding: 1rem 0;
+  }
+  #promotion .disneySwiperContainer .disneySwiper {
+    padding: 1rem 0 3rem;
+  }
+  #promotion .disneySwiperContainer .disneySwiper .swiper-slide .themeCard {
+    padding: 2rem 1.5rem;
+  }
+  #promotion .disneySwiperContainer .disneySwiper .swiper-slide .themeCard h3 {
+    font-size: 1.8rem;
+    margin-bottom: 0.8rem;
+  }
+  #promotion .disneySwiperContainer .disneySwiper .swiper-slide .themeCard p {
+    font-size: 1.2rem;
+  }
+  #promotion .disneySwiperContainer .disneySwiper .swiper-button-next,
+#promotion .disneySwiperContainer .disneySwiper .swiper-button-prev {
+    width: 4rem;
+    height: 4rem;
+  }
+  #promotion .disneySwiperContainer .disneySwiper .swiper-button-next:after,
+#promotion .disneySwiperContainer .disneySwiper .swiper-button-prev:after {
+    font-size: 1.4rem;
+  }
+  #promotion .featureGrid,
+#promotion .carList,
+#promotion .featuresList,
+#promotion .infoGrid {
+    grid-template-columns: 1fr;
+    gap: 2rem;
+  }
+  #promotion .noticeBox {
+    padding: 1.5rem;
+    margin: 2rem 0;
+  }
+  #promotion .noticeBox h3 {
+    font-size: 1.6rem;
+  }
+  #promotion .noticeBox ul li {
+    font-size: 1.3rem;
+    padding-left: 1.5rem;
+  }
+  #promotion .carList .carItem {
+    flex-direction: column;
+    text-align: center;
+    padding: 1.5rem;
+  }
+  #promotion .carList .carItem .carImage {
+    width: 6rem;
+    height: 6rem;
+  }
+  #promotion .carList .carItem .carInfo h3 {
+    font-size: 1.6rem;
+  }
+  #promotion .carList .carItem .carInfo p {
+    font-size: 1.3rem;
+  }
+  #promotion .guideSteps .stepItem {
+    flex-direction: column;
+    text-align: center;
+  }
+  #promotion .guideSteps .stepItem .stepNumber {
+    margin-right: 0;
+    margin-bottom: 1rem;
+  }
+}
+/*# sourceMappingURL=promotion.css.map */

kr/assets/css/promotion.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["promotion.css","_utils.scss","promotion.scss"],"names":[],"mappings":"AAAA,gBAAgB;ACAhB,KAAA;AAGA,YAAA;AAOA,mBAAA;AACA,2BAAA;AAiBA,2BAAA;AACA,yDAAA;AAkBA,4BAAA;AAOA,4BAAA;AAOA,iBAAA;AC3DA,cAAA;AAQA;EACE;IACE,wBAAA;EFEF;EEAA;IACE,wBAAA;EFEF;AACF;AERA;EACE;IACE,wBAAA;EFEF;EEAA;IACE,wBAAA;EFEF;AACF;AEEE;EACE,eAAA;EACA,aAAA;AFAJ;AEEE;EACE,WAAA;EACA,cAAA;EACA,6FAAA;AFAJ;AECI;EACE,WAAA;EACA,iBAAA;EACA,cAAA;EACA,oBAAA;AFCN;AECQ;EACE,iBAAA;EACA,gBAAA;EACA,WAAA;AFCV;AECQ;EACE,iBAAA;EACA,gBAAA;EACA,WAAA;AFCV;AEME;EACE,WAAA;EACA,gBAAA;EACA,gCAAA;EACA,wBAAA;EAAA,gBAAA;EACA,MAAA;EACA,YAAA;EACA,wCAAA;AFJJ;AEKI;EACE,iBAAA;EACA,cAAA;AFHN;AEIM;EACE,aAAA;EACA,gBAAA;EACA,SAAA;EACA,UAAA;AFFR;AEGQ;EACE,OAAA;AFDV;AEEU;EACE,cAAA;EACA,oBAAA;EACA,qBAAA;EACA,WAAA;EACA,iBAAA;EACA,gBAAA;EACA,kBAAA;EACA,oCAAA;EACA,yBAAA;AFAZ;AECY;EACE,WAAA;AFCd;AEGY;EACE,WAAA;EACA,gBAAA;EACA,yBAAA;AFDd;AEUE;EACE,WAAA;EACA,gBAAA;EACA,iBAAA;EACA,kBAAA;AFRJ;AESI;EAEE,cAAA;EACA,kBAAA;AFRN;AESM;EACE,iBAAA;EACA,cAAA;EACA,UAAA;EACA,mBAAA;EACA,eAAA;EACA,kBAAA;EACA,mBAAA;AFPR;AESU;EACE,iBAAA;EACA,gBAAA;EACA,WAAA;EACA,mBAAA;AFPZ;AESU;EACE,iBAAA;EACA,WAAA;EACA,gBAAA;EACA,mBAAA;AFPZ;AEcE;EACE,iBAAA;EACA,cAAA;AFZJ;AEgBE;EACE,WAAA;EACA,gBAAA;EACA,gBAAA;EACA,eAAA;AFdJ;AEgBI;EACE,WAAA;EACA,oBAAA;AFdN;AEgBM;EACE,uBAAA;EACA,aAAA;EACA,cAAA;AFdR;AEgBQ;EACE,mBAAA;EACA,kBAAA;EACA,kBAAA;EACA,WAAA;EACA,YAAA;EACA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EACA,yBAAA;AFdV;AEgBU;EACE,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,yCAAA;AFdZ;AEiBU;EACE,iBAAA;EACA,YAAA;EACA,gBAAA;EACA,SAAA;AFfZ;AEqBM;;EAEE,aAAA;EACA,WAAA;EACA,oCAAA;EACA,WAAA;EACA,YAAA;EACA,kBAAA;EACA,yCAAA;AFnBR;AEqBQ;;EACE,iBAAA;EACA,iBAAA;AFlBV;AEqBQ;;EACE,gBAAA;EACA,qBAAA;AFlBV;AEuBM;EACE,SAAA;AFrBR;AEuBQ;EACE,gBAAA;EACA,UAAA;EACA,aAAA;EACA,cAAA;EACA,gBAAA;AFrBV;AEuBU;EACE,gBAAA;EACA,qBAAA;AFrBZ;AE6BE;EACE,gBAAA;EACA,mBAAA;EACA,aAAA;EACA,cAAA;EACA,yBAAA;AF3BJ;AE6BI;EACE,iBAAA;EACA,gBAAA;EACA,WAAA;EACA,qBAAA;EACA,oBAAA;EACA,gCAAA;AF3BN;AE8BI;EACE,gBAAA;EACA,UAAA;EACA,SAAA;AF5BN;AE8BM;EACE,kBAAA;EACA,kBAAA;EACA,mBAAA;EACA,iBAAA;EACA,WAAA;EACA,gBAAA;AF5BR;AE8BQ;EACE,YAAA;EACA,kBAAA;EACA,OAAA;EACA,WAAA;EACA,iBAAA;AF5BV;AE+BQ;EACE,gBAAA;AF7BV;AEoCE;EACE,gBAAA;AFlCJ;AEsCE;EACE,gBAAA;AFpCJ;AEqCI;EACE,aAAA;EACA,uBAAA;EACA,mBAAA;AFnCN;AEoCM;EACE,WAAA;EACA,YAAA;EACA,gBAAA;EACA,WAAA;EACA,kBAAA;EACA,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,iBAAA;EACA,gBAAA;EACA,kBAAA;EACA,cAAA;AFlCR;AEoCM;EACE,OAAA;AFlCR;AEmCQ;EACE,eAAA;EACA,gBAAA;EACA,WAAA;EACA,mBAAA;AFjCV;AEmCQ;EACE,iBAAA;EACA,WAAA;EACA,gBAAA;EACA,SAAA;AFjCV;AEwCE;EACE,aAAA;EACA,2DAAA;EACA,SAAA;EACA,gBAAA;AFtCJ;AEuCI;EACE,aAAA;EACA,gBAAA;EACA,yBAAA;EACA,mBAAA;EACA,wCAAA;AFrCN;AEsCM;EACE,iBAAA;EACA,gBAAA;EACA,WAAA;EACA,mBAAA;AFpCR;AEsCM;EACE,iBAAA;EACA,WAAA;EACA,gBAAA;EACA,SAAA;AFpCR;AE0CE;EACE,aAAA;EACA,2DAAA;EACA,SAAA;EACA,gBAAA;AFxCJ;AE0CM;EACE,eAAA;EACA,gBAAA;EACA,WAAA;EACA,qBAAA;EACA,oBAAA;EACA,gCAAA;AFxCR;AE0CM;EACE,gBAAA;EACA,UAAA;EACA,SAAA;AFxCR;AEyCQ;EACE,iBAAA;EACA,iBAAA;EACA,WAAA;EACA,gCAAA;AFvCV;AEwCU;EACE,mBAAA;AFtCZ;AEwCU;EACE,YAAA;EACA,WAAA;EACA,iBAAA;EACA,kBAAA;AFtCZ;AE8CE;EAKU;IACE,oBAAA;IACA,iBAAA;EFhDZ;EEuDE;IACE,WAAA;EFrDJ;EEyDU;IACE,iBAAA;EFvDZ;EE+DE;IACE,gBAAA;IACA,eAAA;EF7DJ;EE+DI;IACE,oBAAA;EF7DN;EEgEQ;IACE,oBAAA;EF9DV;EEgEU;IACE,iBAAA;IACA,qBAAA;EF9DZ;EEiEU;IACE,iBAAA;EF/DZ;EEoEM;;IAEE,WAAA;IACA,YAAA;EFlER;EEoEQ;;IACE,iBAAA;EFjEV;EEuEE;;;;IAIE,0BAAA;IACA,SAAA;EFrEJ;EEyEE;IACE,eAAA;IACA,cAAA;EFvEJ;EEyEI;IACE,iBAAA;EFvEN;EE0EI;IACE,iBAAA;IACA,oBAAA;EFxEN;EE8EI;IACE,sBAAA;IACA,kBAAA;IACA,eAAA;EF5EN;EE8EM;IACE,WAAA;IACA,YAAA;EF5ER;EEgFQ;IACE,iBAAA;EF9EV;EEiFQ;IACE,iBAAA;EF/EV;EEsFI;IACE,sBAAA;IACA,kBAAA;EFpFN;EEqFM;IACE,eAAA;IACA,mBAAA;EFnFR;AACF","file":"promotion.css"}

kr/assets/css/promotion.scss

@@ -0,0 +1,496 @@
+@charset "UTF-8";
+@import "utils.scss";
+/*변수파일 import*/
+
+// 부드러운 스크롤 애니메이션을 위한 기본 설정
+// html {
+//   scroll-behavior: smooth;
+// }
+
+// jQuery easing 함수를 위한 CSS 애니메이션
+@keyframes easeInOutQuart {
+  0% {
+    transform: translateY(0);
+  }
+  100% {
+    transform: translateY(0);
+  }
+}
+
+#promotion {
+  .contentWarp {
+    max-width: 100%;
+    margin-top: 0;
+  }
+  .promotionHeader {
+    width: 100%;
+    height: 108rem;
+    background: url("../images/kia/promotion/kv_promotion.jpg") no-repeat center center / auto 100%;
+    .promotionHeaderInner {
+      width: 100%;
+      max-width: 120rem;
+      margin: 0 auto;
+      padding-top: 71.4rem;
+      .pageTitle {
+        h1 {
+          font-size: 4.8rem;
+          font-weight: 600;
+          color: #fff;
+        }
+        p {
+          font-size: 1.6rem;
+          font-weight: 400;
+          color: #fff;
+        }
+      }
+    }
+  }
+
+  // 탭 네비게이션 스타일
+  .tabNavigation {
+    width: 100%;
+    background: #fff;
+    border-bottom: 1px solid #e5e5e5;
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+    .tabNavigationInner {
+      max-width: 120rem;
+      margin: 0 auto;
+      .tabList {
+        display: flex;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        .tabItem {
+          flex: 1;
+          .tabLink {
+            display: block;
+            padding: 2rem 1.5rem;
+            text-decoration: none;
+            color: #666;
+            font-size: 1.6rem;
+            font-weight: 400;
+            text-align: center;
+            border-bottom: 3px solid transparent;
+            transition: all 0.3s ease;
+            &:hover {
+              color: #333;
+            }
+          }
+          &.active {
+            .tabLink {
+              color: #333;
+              font-weight: 600;
+              border-bottom-color: #333;
+            }
+          }
+        }
+      }
+    }
+  }
+
+  // 탭 콘텐츠 영역 스타일
+  .tabContentArea {
+    width: 100%;
+    background: #fff;
+    min-height: 60rem;
+    position: relative;
+    .tabContentInner {
+      // max-width: 120rem;
+      margin: 0 auto;
+      position: relative;
+      .tabContent {
+        min-height: 60rem;
+        display: block;
+        opacity: 1;
+        visibility: visible;
+        transform: none;
+        position: relative;
+        margin-bottom: 4rem;
+        .contentSection {
+          h2 {
+            font-size: 3.2rem;
+            font-weight: 600;
+            color: #333;
+            margin-bottom: 2rem;
+          }
+          p {
+            font-size: 1.6rem;
+            color: #666;
+            line-height: 1.6;
+            margin-bottom: 3rem;
+          }
+        }
+      }
+    }
+  }
+
+  .contentSectionInner {
+    max-width: 120rem;
+    margin: 0 auto;
+  }
+
+  // Disney 스와이퍼 스타일
+  .disneySwiperContainer {
+    width: 100%;
+    overflow: hidden;
+    margin-top: 4rem;
+    padding: 2rem 0;
+
+    .disneySwiper {
+      width: 100%;
+      padding: 2rem 0 4rem;
+
+      .swiper-slide {
+        width: 58rem !important;
+        height: 36rem;
+        flex-shrink: 0;
+
+        .themeCard {
+          border-radius: 2rem;
+          padding: 3rem 2rem;
+          text-align: center;
+          color: #fff;
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          transition: all 0.3s ease;
+
+          h3 {
+            font-size: 2.2rem;
+            font-weight: 700;
+            margin-bottom: 1rem;
+            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+          }
+
+          p {
+            font-size: 1.4rem;
+            opacity: 0.9;
+            line-height: 1.4;
+            margin: 0;
+          }
+        }
+      }
+
+      // 네비게이션 버튼 스타일
+      .swiper-button-next,
+      .swiper-button-prev {
+        display: none;
+        color: #333;
+        background: rgba(255, 255, 255, 0.9);
+        width: 5rem;
+        height: 5rem;
+        border-radius: 50%;
+        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
+
+        &:after {
+          font-size: 1.8rem;
+          font-weight: bold;
+        }
+
+        &:hover {
+          background: #fff;
+          transform: scale(1.1);
+        }
+      }
+
+      // 페이지네이션 스타일
+      .swiper-pagination {
+        bottom: 0;
+
+        .swiper-pagination-bullet {
+          background: #ddd;
+          opacity: 1;
+          width: 1.2rem;
+          height: 1.2rem;
+          margin: 0 0.5rem;
+
+          &.swiper-pagination-bullet-active {
+            background: #333;
+            transform: scale(1.2);
+          }
+        }
+      }
+    }
+  }
+
+  // Notice 박스 스타일
+  .noticeBox {
+    background: #fff;
+    border-radius: 1rem;
+    padding: 2rem;
+    margin: 3rem 0;
+    border: 1px solid #e5e5e5;
+
+    h3 {
+      font-size: 1.8rem;
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 1.5rem;
+      padding-bottom: 1rem;
+      border-bottom: 1px solid #e5e5e5;
+    }
+
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
+
+      li {
+        position: relative;
+        padding-left: 2rem;
+        margin-bottom: 1rem;
+        font-size: 1.4rem;
+        color: #666;
+        line-height: 1.5;
+
+        &:before {
+          content: "•";
+          position: absolute;
+          left: 0;
+          color: #333;
+          font-weight: bold;
+        }
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
+    }
+  }
+
+  // Available Cars 탭 스타일
+  .carList {
+    margin-top: 3rem;
+  }
+
+  // Select Guide 탭 스타일
+  .guideSteps {
+    margin-top: 3rem;
+    .stepItem {
+      display: flex;
+      align-items: flex-start;
+      margin-bottom: 3rem;
+      .stepNumber {
+        width: 4rem;
+        height: 4rem;
+        background: #333;
+        color: #fff;
+        border-radius: 50%;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: 1.8rem;
+        font-weight: 600;
+        margin-right: 2rem;
+        flex-shrink: 0;
+      }
+      .stepContent {
+        flex: 1;
+        h3 {
+          font-size: 2rem;
+          font-weight: 600;
+          color: #333;
+          margin-bottom: 1rem;
+        }
+        p {
+          font-size: 1.4rem;
+          color: #666;
+          line-height: 1.5;
+          margin: 0;
+        }
+      }
+    }
+  }
+
+  // More Features 탭 스타일
+  .featuresList {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
+    gap: 2rem;
+    margin-top: 3rem;
+    .featureCard {
+      padding: 2rem;
+      background: #fff;
+      border: 1px solid #e5e5e5;
+      border-radius: 1rem;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      h3 {
+        font-size: 1.8rem;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 1rem;
+      }
+      p {
+        font-size: 1.4rem;
+        color: #666;
+        line-height: 1.5;
+        margin: 0;
+      }
+    }
+  }
+
+  // Information 탭 스타일
+  .infoGrid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
+    gap: 3rem;
+    margin-top: 3rem;
+    .infoSection {
+      h3 {
+        font-size: 2rem;
+        font-weight: 600;
+        color: #333;
+        margin-bottom: 1.5rem;
+        padding-bottom: 1rem;
+        border-bottom: 2px solid #e5e5e5;
+      }
+      ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+        li {
+          padding: 0.8rem 0;
+          font-size: 1.4rem;
+          color: #666;
+          border-bottom: 1px solid #f0f0f0;
+          &:last-child {
+            border-bottom: none;
+          }
+          &:before {
+            content: "•";
+            color: #333;
+            font-weight: bold;
+            margin-right: 1rem;
+          }
+        }
+      }
+    }
+  }
+
+  // 반응형 스타일
+  @media (max-width: 768px) {
+    .tabNavigation {
+      .tabNavigationInner {
+        .tabList {
+          .tabItem {
+            .tabLink {
+              padding: 1.5rem 1rem;
+              font-size: 1.4rem;
+            }
+          }
+        }
+      }
+    }
+
+    .tabContentArea {
+      width: 100%;
+      .tabContentInner {
+        .tabContent {
+          .contentSection {
+            h2 {
+              font-size: 2.4rem;
+            }
+          }
+        }
+      }
+    }
+
+    // Disney 스와이퍼 모바일 스타일
+    .disneySwiperContainer {
+      margin-top: 3rem;
+      padding: 1rem 0;
+
+      .disneySwiper {
+        padding: 1rem 0 3rem;
+
+        .swiper-slide {
+          .themeCard {
+            padding: 2rem 1.5rem;
+
+            h3 {
+              font-size: 1.8rem;
+              margin-bottom: 0.8rem;
+            }
+
+            p {
+              font-size: 1.2rem;
+            }
+          }
+        }
+
+        .swiper-button-next,
+        .swiper-button-prev {
+          width: 4rem;
+          height: 4rem;
+
+          &:after {
+            font-size: 1.4rem;
+          }
+        }
+      }
+    }
+
+    .featureGrid,
+    .carList,
+    .featuresList,
+    .infoGrid {
+      grid-template-columns: 1fr;
+      gap: 2rem;
+    }
+
+    // Notice 박스 모바일 스타일
+    .noticeBox {
+      padding: 1.5rem;
+      margin: 2rem 0;
+
+      h3 {
+        font-size: 1.6rem;
+      }
+
+      ul li {
+        font-size: 1.3rem;
+        padding-left: 1.5rem;
+      }
+    }
+
+    // 차량 목록 모바일 스타일
+    .carList {
+      .carItem {
+        flex-direction: column;
+        text-align: center;
+        padding: 1.5rem;
+
+        .carImage {
+          width: 6rem;
+          height: 6rem;
+        }
+
+        .carInfo {
+          h3 {
+            font-size: 1.6rem;
+          }
+
+          p {
+            font-size: 1.3rem;
+          }
+        }
+      }
+    }
+
+    .guideSteps {
+      .stepItem {
+        flex-direction: column;
+        text-align: center;
+        .stepNumber {
+          margin-right: 0;
+          margin-bottom: 1rem;
+        }
+      }
+    }
+  }
+}

kr/promotion/disney_promotion.html

@@ -0,0 +1,898 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>제품상세명 &gt; 제품리스트 &gt; 회사명</title>
+    <!--
+            //위에 순서대로 title 이 변경되어야 합니다. 
+        -->
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, viewport-fit=cover, user-scalable=no, shrink-to-fit=no" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="apple-mobile-web-app-title" content="" />
+    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="apple-touch-fullscreen" content="yes" />
+    <meta name="title" content="" />
+    <meta name="keywords" content="" />
+    <meta name="description" content="" />
+    <meta name="format-detection" content="telephone=no" />
+    <meta property="og:title" content="Page Title" />
+    <meta property="og:type" content="Page Contens" />
+    <meta property="og:image" content="../assets/images/kia/meta_img.png" />
+    <meta property="og:site_name" content="Page name" />
+    <meta property="og:description" content="Page Coment" />
+    <link rel="stylesheet" charset="UTF-8" href="../assets/css/library/jquery-ui.min.css?v1" type="text/css" />
+    <link rel="stylesheet" charset="UTF-8" href="../assets/css/library/swiper.min.css?v1" type="text/css" />
+    <link rel="stylesheet" charset="UTF-8" href="../assets/css/library/aos.css?v1" type="text/css" />
+    <link rel="stylesheet" charset="UTF-8" href="../assets/css/basic.css?v1" type="text/css" />
+    <link rel="stylesheet" charset="UTF-8" href="../assets/css/common.css?v2" type="text/css" />
+    <link rel="stylesheet" charset="UTF-8" href="../assets/css/contents.css?v1" type="text/css" />
+    <link rel="stylesheet" charset="UTF-8" href="../assets/css/popup.css?v1" type="text/css" />
+    <script type="text/javascript" charset="UTF-8" src="../assets/js/library/jquery.js?v1"></script>
+    <script type="text/javascript" charset="UTF-8" src="../assets/js/library/jquery-ui.min.js?v1"></script>
+    <script type="text/javascript" charset="UTF-8" src="../assets/js/library/swiper.min.js?v1"></script>
+    <script type="text/javascript" charset="UTF-8" src="../assets/js/library/aos.js?v1"></script>
+    <script type="text/javascript" charset="UTF-8" src="../assets/js/common.js?v2"></script>
+    <!--상품상세 페이지 css 분리-->
+    <link rel="stylesheet" charset="UTF-8" href="../assets/css/product.css?v1.2" type="text/css" />
+    <link rel="stylesheet" charset="UTF-8" href="../assets/css/promotion.css" type="text/css" />
+    <link rel="shortcut icon" href="../assets/images/kia/home_icon.png" />
+    <link rel="apple-touch-icon-precomposed" href="../assets/images/kia/home_icon.png" />
+    <link rel="shortcut icon" href="../assets/images/kia/favicon-16x16.png" />
+    <link rel="icon" href="../assets/images/kia/favicon-16x16.png" />
+    <link rel="stylesheet" href="../assets/css/kia/kia-font.css?v1" type="text/css" />
+    <link rel="stylesheet" href="../assets/css/kia/kia.css?v1" type="text/css" />
+  </head>
+  <body id="promotion">
+    <!--//header-->
+    <div class="hederWarp_n noBoder">
+      <div class="headerInner">
+        <div class="gnb">
+          <!-- GNB 로고 영역입니다. -->
+          <div class="logoWrap">
+            <a href="/kr/kia.html">
+              <i class="logoImg"></i>
+              <!-- <span>
+                                Connect Store
+                            </span> -->
+            </a>
+          </div>
+          <div class="menuWarp">
+            <div class="mobileMenuTop">
+              <!-- 모바일 슬라이드 메뉴의 로고 영역입니다. -->
+              <div class="mobileLogoWrap">
+                <a href="">
+                  <i class="logoImg"></i>
+                  <!-- <span>
+                                        Connect store
+                                    </span> -->
+                </a>
+              </div>
+              <span class="closeBtn" id="closeBtn">
+                <a href="#"></a>
+              </span>
+            </div>
+            <!-- 모바일 전용 USER 관련 링크 영역입니다. -->
+            <div class="mobileFunc">
+              <button>
+                <span>마이페이지</span>
+                <!--<span>로그인</span>-->
+              </button>
+              <!-- <button>
+                                
+                                <span>장바구니</span>
+                                
+                            </button> -->
+            </div>
+            <!-- 모바일 전용 차량 선택 UI입니다. -->
+            <div class="mobileCarlist">
+              <div class="mobilecarItem">
+                <div class="item">
+                  <strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선</strong>
+                  <span>KMTKEXXBPMU000081</span>
+                  <button class="btn-select" onclick="open_layer_popup('carListPopup')">차량 선택하기 ></button>
+                </div>
+              </div>
+            </div>
+            <!-- PC 모바일 공통 메뉴 영역입니다. -->
+            <ul class="menu">
+              <li class="menuDepth1Wrap">
+                <a href="/kr/kia.html#mainProductList" class="menuDepth1 lower">디지털 사양</a>
+                <div class="menuDepth2Wrap info">
+                  <h3><a href="/kr/kia.html#mainProductList">디지털 사양</a></h3>
+                  <ul>
+                    <li class="menuDepth2"><a href="/kr/product/pdp_display_theme_mickey.html">디즈니 디스플레이 테마</a></li>
+                    <li class="menuDepth2"><a href="/kr/product/pdp_display_theme_kbo.html">KBO 디스플레이 테마</a></li>
+                    <li class="menuDepth2"><a href="/kr/product/pdp_display_theme.html">NBA 디스플레이 테마</a></li>
+                    <li class="menuDepth2"><a href="/kr/product/pdp_in_car_game.html">아케이드 게임</a></li>
+                    <li class="menuDepth2"><a href="/kr/product/pdp_rspa2.html">원격 스마트 주차 보조(RSPA 2)</a></li>
+                    <li class="menuDepth2"><a href="/kr/product/pdp_rspa2_ev9.html">부스트(The 2025 EV9)</a></li>
+                    <li class="menuDepth2"><a href="/kr/product/pdp_lighting_pattern.html">라이팅 패턴</a></li>
+                    <li class="menuDepth2"><a href="/kr/product/pdp_srs_plus.html">스마트 회생 시스템 플러스</a></li>
+                    <li class="menuDepth2"><a href="/kr/product/pdp_streaming_premium.html">스트리밍 프리미엄</a></li>
+                    <li class="menuDepth2"><a href="/kr/product/pdp_streaming_plus.html">스트리밍 플러스</a></li>
+                  </ul>
+                </div>
+              </li>
+              <li class="menuDepth1Wrap">
+                <a href="/kr/info/product-usage-guide.html" class="menuDepth1" data-url="/kr/info/product-usage-guide.html">사양별 이용 안내</a>
+                <div class="menuDepth2Wrap info">
+                  <h3><a href="/kr/info/product-usage-guide.html">사양별 이용 안내</a></h3>
+                </div>
+              </li>
+              <li class="menuDepth1Wrap">
+                <a href="/kr/info/service-info.html" class="menuDepth1 lower" data-url="/kr/info/service-info.html">스토어 소개</a>
+                <div class="menuDepth2Wrap info">
+                  <h3><a href="/kr/info/service-info.html">스토어 소개</a></h3>
+                  <ul>
+                    <li class="menuDepth2"><a href="/kr/info/service-info.html">스토어 소개</a></li>
+                    <li class="menuDepth2"><a href="/kr/info/registration-guide.html">스토어 가입안내</a></li>
+                    <li class="menuDepth2"><a href="/kr/info/buying-Installation-guide.html">스토어 이용안내</a></li>
+                    <li class="menuDepth2"><a href="/kr/service/event-list.html">이벤트</a></li>
+                  </ul>
+                </div>
+              </li>
+              <li class="menuDepth1Wrap">
+                <a href="/kr/info/as-guide.html" class="menuDepth1 lower" data-url="/kr/info/as-guide.html">고객지원</a>
+                <div class="menuDepth2Wrap support">
+                  <h3><a href="/kr/info/as-guide.html">고객지원</a></h3>
+                  <ul>
+                    <li class="menuDepth2"><a href="/kr/service/faq.html">자주하는 질문</a></li>
+                    <li class="menuDepth2"><a href="/kr/service/inquiry-list.html">문의하기</a></li>
+                    <li class="menuDepth2"><a href="/kr/info/as-guide.html">고객센터 및 AS안내</a></li>
+                    <li class="menuDepth2"><a href="/kr/service/notice-list.html">공지사항</a></li>
+                  </ul>
+                </div>
+              </li>
+            </ul>
+            <!-- 모바일 전용 추가 메뉴 영역입니다. -->
+            <div class="mobileSubMenu">
+              <a href="https://privacy.kia.com/overview/full-policy/" target="_blank">개인정보 처리방침</a>
+              <a href="/kr/member/terms.html">이용약관</a>
+            </div>
+            <!-- 모바일 전용 로그아웃 버튼입니다. -->
+            <!-- <div class="loginBtn oneButton">
+                            <button><p>로그아웃</p></button>
+                        </div> -->
+          </div>
+        </div>
+        <div class="func">
+          <!-- PC 전용 차량 선택 UI입니다. -->
+          <!-- 2025.08.27 추가 -->
+          <div class="carlist">
+            <a href="javascript:void(0)" class="carItem">
+              <span>쏘렌토(MQ4) 하이브리드-플러그인 상품성개선</span>
+            </a>
+            <div class="carlistItem">
+              <svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg" class="boxBullet">
+                <path d="M7 1L1 10H13L7 1Z" fill="white" />
+                <path d="M1 9L7 1L13 9" stroke="#DEDEDE" />
+              </svg>
+              <ul>
+                <!-- [D] 선택 시 selected 클래스 추가 -->
+                <li class="selected">
+                  <button class="car-name">
+                    <span>쏘렌토(MQ4) 하이브리드-플러그인 상품성 개선</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="111JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>쏘렌토(MQ4) 하이브리드</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>스포티지 개조</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>스포티지 개조</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>스포티지 개조</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>스포티지 개조</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>스포티지 개조</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>스포티지 개조</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="333JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4)</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+                <li>
+                  <button class="car-name">
+                    <span>쏘렌토(MQ4) 하이브리드렌토(MQ4) 리드</span>
+                  </button>
+                  <button type="button" class="btn-info" data-tooltip="3222JH4TB2H26CC012345"></button>
+                </li>
+              </ul>
+            </div>
+          </div>
+          <!--// 2025.08.27 추가 -->
+
+          <!-- PC 전용 로그인 버튼입니다. -->
+          <!-- <div class="userLogin">
+            <a href="#">로그인/가입</a>
+          </div> -->
+
+          <!-- PC 전용 USER 관련 링크 영역입니다. -->
+          <div class="user">
+            <a href="../mypage/my-product-list.html"><i class="icon-user"></i></a>
+          </div>
+
+          <!-- PC 모바일 공통 장바구니 버튼입니다. -->
+          <!-- <div class="cart">
+                        <a href="" class="login-alrt"><i class="icon-cart"></i></a>
+                    </div> -->
+
+          <!-- 모바일 전용 햄버거 메뉴 버튼입니다. -->
+          <div class="moblieMenu burgurBtn">
+            <span class="burgur" id="burgur">
+              <span class="top-line"></span>
+              <span class="bot-line"></span>
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--//header-->
+
+    <!--//content-warp-->
+    <div class="contentWarp">
+      <div class="promotionHeader">
+        <div class="promotionHeaderInner">
+          <div class="pageTitle">
+            <h1>Hello, Disney!</h1>
+            <p>Disney and Kia brings imagination, color and emotion to your screen</p>
+          </div>
+        </div>
+      </div>
+
+      <!-- 탭 네비게이션 -->
+      <div class="tabNavigation">
+        <div class="tabNavigationInner">
+          <ul class="tabList">
+            <li class="tabItem active">
+              <a href="#overview" class="tabLink">Overview</a>
+            </li>
+            <li class="tabItem">
+              <a href="#available-cars" class="tabLink">Available Cars</a>
+            </li>
+            <li class="tabItem">
+              <a href="#select-guide" class="tabLink">Select Guide</a>
+            </li>
+            <li class="tabItem">
+              <a href="#more-features" class="tabLink">More Features</a>
+            </li>
+            <li class="tabItem">
+              <a href="#information" class="tabLink">Information</a>
+            </li>
+          </ul>
+        </div>
+      </div>
+
+      <!-- 탭 콘텐츠 영역 -->
+      <div class="tabContentArea">
+        <div class="tabContentInner">
+          <!-- Overview 탭 -->
+          <div id="overview" class="tabContent active">
+            <div class="contentSection">
+              <div class="contentSectionInner">
+                <h2>Disney Display Themes</h2>
+                <p>
+                  Where innovation meets timeless storytelling.<br /><br />
+                  Kia and The Walt Disney Company present stunning display themes - each a canvas of imagination and story, infused with the innovation of Kia. <br />
+                  From your morning commute to weekend escapes, every drive becomes an unforgettable chapter.
+                </p>
+              </div>
+              <!-- Disney 테마 스와이퍼 -->
+              <div class="disneySwiperContainer">
+                <div class="swiper disneySwiper">
+                  <div class="swiper-wrapper">
+                    <div class="swiper-slide">
+                      <div class="themeCard frozen">
+                        <div class="themeIcon">
+                          <img src="../assets/images/kia/promotion/img_feature01.png" alt="Frozen Theme" />
+                        </div>
+                      </div>
+                    </div>
+                    <div class="swiper-slide">
+                      <div class="themeCard mickey">
+                        <div class="themeIcon">
+                          <img src="../assets/images/kia/promotion/img_feature02.png" alt="Mickey Mouse Theme" />
+                        </div>
+                      </div>
+                    </div>
+                    <div class="swiper-slide">
+                      <div class="themeCard toyStory">
+                        <div class="themeIcon">
+                          <img src="../assets/images/kia/promotion/img_feature03.png" alt="Toy Story Theme" />
+                        </div>
+                      </div>
+                    </div>
+                    <div class="swiper-slide">
+                      <div class="themeCard moana">
+                        <div class="themeIcon">
+                          <img src="../assets/images/kia/promotion/img_feature04.png" alt="Moana Theme" />
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Available Cars 탭 -->
+          <div id="available-cars" class="tabContent">
+            <div class="contentSection">
+              <div class="contentSectionInner">
+                <h2>Available Cars</h2>
+                <p>Introducing cars that are available with Disney Display Themes. Look forward to more updates!</p>
+
+                <!-- 차량 목록 -->
+                <div class="carList">
+                  <img src="../assets/images/kia/promotion/img_available_cars.png" alt="Available Cars" />
+                </div>
+
+                <!-- Notice 박스 -->
+                <div class="noticeBox">
+                  <h3>Notice</h3>
+                  <ul>
+                    <li>It can be purchased only for users of the Kia Connect service.</li>
+                    <li>It is only available for vehicles with a 12.3-inch cluster among the ccNC infotainment platforms.</li>
+                    <li>Purchase availability can be found on the detailed page of each product.</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Select Guide 탭 -->
+          <div id="select-guide" class="tabContent">
+            <div class="contentSection">
+              <h2>선택 가이드</h2>
+              <p>Disney 디스플레이 테마를 선택하고 설치하는 방법을 안내해드립니다.</p>
+              <div class="guideSteps">
+                <div class="stepItem">
+                  <div class="stepNumber">1</div>
+                  <div class="stepContent">
+                    <h3>차량 확인</h3>
+                    <p>귀하의 차량이 지원되는지 확인하세요.</p>
+                  </div>
+                </div>
+                <div class="stepItem">
+                  <div class="stepNumber">2</div>
+                  <div class="stepContent">
+                    <h3>테마 선택</h3>
+                    <p>원하는 Disney 테마를 선택하세요.</p>
+                  </div>
+                </div>
+                <div class="stepItem">
+                  <div class="stepNumber">3</div>
+                  <div class="stepContent">
+                    <h3>설치 및 활성화</h3>
+                    <p>선택한 테마를 다운로드하고 활성화하세요.</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- More Features 탭 -->
+          <div id="more-features" class="tabContent">
+            <div class="contentSection">
+              <h2>추가 기능</h2>
+              <p>Disney 디스플레이 테마의 다양한 기능들을 확인해보세요.</p>
+              <div class="featuresList">
+                <div class="featureCard">
+                  <h3>음성 인식</h3>
+                  <p>"헤이 미키"라고 말하면 미키마우스가 응답합니다.</p>
+                </div>
+                <div class="featureCard">
+                  <h3>날씨 연동</h3>
+                  <p>날씨에 따라 캐릭터의 의상이 바뀝니다.</p>
+                </div>
+                <div class="featureCard">
+                  <h3>시간대별 테마</h3>
+                  <p>아침, 점심, 저녁에 맞는 테마가 자동으로 변경됩니다.</p>
+                </div>
+                <div class="featureCard">
+                  <h3>특별 이벤트</h3>
+                  <p>디즈니 영화 개봉 시 특별 테마가 제공됩니다.</p>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Information 탭 -->
+          <div id="information" class="tabContent">
+            <div class="contentSection">
+              <h2>상세 정보</h2>
+              <div class="infoGrid">
+                <div class="infoSection">
+                  <h3>가격 정보</h3>
+                  <ul>
+                    <li>기본 테마: 무료</li>
+                    <li>프리미엄 테마: 월 9,900원</li>
+                    <li>패밀리 패키지: 월 19,900원</li>
+                  </ul>
+                </div>
+                <div class="infoSection">
+                  <h3>시스템 요구사항</h3>
+                  <ul>
+                    <li>기아 커넥트 3.0 이상</li>
+                    <li>최소 2GB 저장공간</li>
+                    <li>인터넷 연결 필요</li>
+                  </ul>
+                </div>
+                <div class="infoSection">
+                  <h3>지원 언어</h3>
+                  <ul>
+                    <li>한국어</li>
+                    <li>영어</li>
+                    <li>일본어</li>
+                    <li>중국어</li>
+                  </ul>
+                </div>
+                <div class="infoSection">
+                  <h3>업데이트</h3>
+                  <ul>
+                    <li>월 1회 새로운 테마 추가</li>
+                    <li>자동 업데이트 지원</li>
+                    <li>사용자 피드백 반영</li>
+                  </ul>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--//content-warp-->
+
+    <!--//footer-->
+    <div class="floating_menu">
+      <a href="/kr/service/faq.html" class="floating_faq"><img src="../assets/images/common/floating_inquiry.png" alt="자주하는 질문" /></a>
+      <a href="/kr/service/inquiry-list.html" class="floating_inquiry"><img src="../assets/images/common/floating_faq.png" alt="문의하기" /></a>
+      <a href="javascript:;" class="floating_top"><img src="../assets/images/common/floating_top.png" alt="top" /></a>
+    </div>
+    <div class="footer">
+      <div class="kiaInner">
+        <div class="tLeft">
+          <div class="logoSEction">
+            <a href="/kr/kia.html"><img src="../assets/images/kia/kia-logo.svg" alt="kia" /></a>
+          </div>
+          <div class="companyInfo">
+            <ul>
+              <li><a href="https://privacy.kia.com/overview/full-policy/" target="_blank">개인정보 처리방침</a></li>
+              <li><a href="/kr/member/terms.html">이용약관</a></li>
+            </ul>
+            <ul>
+              <li>사업자: 기아주식회사, 대표 송호성, 최준영</li>
+              <li>주소: 서울특별시 서초구 현릉로 12 기아</li>
+              <li>사업자등록번호: 119-81-02316</li>
+              <li>통신판매신고: 2006-07935</li>
+              <li>호스팅제공자: 현대오토에버</li>
+              <li>이메일: KiaConnectStore@kia.com</li>
+              <li>개인정보책임자: 기아정보보호센터 이상영 상무, privacy@kia.com / 080-200-2000</li>
+            </ul>
+          </div>
+        </div>
+        <div class="csTime">
+          <div>
+            <p>
+              <strong>고객센터: 080-200-2000</strong>
+            </p>
+            <p><span>오류문의: 24시간 연중 무휴</span></p>
+            <p>
+              <span> 일반 문의: 주중 08:30 ~ 18:00<br /><span style="margin-left: 64px">(토·일·공휴일 휴무)</span> </span>
+            </p>
+          </div>
+          <div class="familyBoxWarp">
+            <div class="familyBox">
+              <div class="familyInner">
+                <div class="cont-select">
+                  <ul class="list-member">
+                    <li><a href="https://www.kia.com/kr" target="_balnk">기아</a></li>
+                    <li><a href="https://connect.kia.com/kr" target="_balnk">기아 커넥트</a></li>
+                    <li><a href="https://worldwide.kia.com/kr" target="_balnk">Worldwide</a></li>
+                    <li><a href="https://www.hyundai.co.kr" target="_balnk">현대자동차그룹</a></li>
+                    <li><a href="https://members.kia.com" target="_balnk">기아멤버스</a></li>
+                    <li><a href="https://drivingexperience.hyundai.co.kr/" target="_balnk">기아 드라이빙 아카데미</a></li>
+                    <li><a href="https://worldwide.kia.com/kr/company/ir" target="_balnk">IR</a></li>
+                    <li><a href="http://winwin.hyundai.com/" target="_balnk">동반성장</a></li>
+                    <li><a href="https://gbic.hyundai.com/" target="_balnk">글로벌경영연구소</a></li>
+                    <li><a href="https://tigers.co.kr" target="_balnk">기아타이거즈</a></li>
+                    <li><a href="https://special.kia.com" target="_balnk">기아군용</a></li>
+                  </ul>
+                  <button class="btn-select">Family Site</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <p class="copyRight"><span>Ⓒ</span> Kia CORP. ALL RIGHTS RESERVED.</p>
+      </div>
+    </div>
+
+    <div class="popupWarp" style="display: none">
+      <div class="popInner termsPop" style="display: none">
+        <div class="popContents">
+          <h1>개인정보 수집/이용 및 기타 동의</h1>
+          <div class="termsCon">
+            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. ManyLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many</p>
+          </div>
+          <div>
+            <div class="oneButton">
+              <a href=""><p>닫기</p></a>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="popInner payInfo" style="display: none">
+        <div class="popContents">
+          <h1>결제 방법 안내</h1>
+          <div class="payInfoCon">
+            <p>
+              <strong>이미 등록된 결제 방법이 있습니다.<br />(지로, 서울특별시 OO구 OOO로 OO길 OO)<br />해당 결제 방법으로 요금을 납부하시겠습니까?</strong>
+              <span>※ 결제 방법을 다른 카드로 변경하실 경우 CCS앱에서 변경 가능합니다.</span>
+            </p>
+          </div>
+          <div>
+            <div class="towButton">
+              <button class="cartBtn leftBtn"><p>취소</p></button>
+              <button class="PurchaseBtn rightBtn"><p>확인</p></button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div class="popInner payInfo" style="display: none">
+        <div class="popContents">
+          <h1>결제 방법 안내</h1>
+          <div class="payInfoCon">
+            <p>
+              <strong>등록된 결제 방법이 없어 요금제 가입 진행이 불가합니다. 결제 카드 등록은 블루링크 App에서 진행해주시길 바랍니다.</strong>
+            </p>
+          </div>
+          <div>
+            <div class="oneButton">
+              <a href=""><p>닫기</p></a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <!--//footer-->
+    <!-- 2025.08.27 추가 -->
+    <div id="carListPopup" class="popupWarp" style="display: none">
+      <div class="popContents">
+        <h2>차량 선택하기 (5)</h2>
+        <div class="payInfoCon">
+          <div class="carlistItem">
+            <ul>
+              <!-- [D] 선택 시 selected 클래스 추가 -->
+              <li class="selected">
+                <button>
+                  <strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성 개선</strong>
+                  <em>111JH4TB2H26CC012345</em>
+                </button>
+              </li>
+              <li>
+                <button>
+                  <strong>쏘렌토(MQ4) 하이브리드</strong>
+                  <em>222JH4TB2H26CC012345</em>
+                </button>
+              </li>
+              <li>
+                <button>
+                  <strong>스포티지 개조 25</strong>
+                  <em>333JH4TB2H26CC012345</em>
+                </button>
+              </li>
+              <li>
+                <button>
+                  <strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성 개선</strong>
+                  <em>444JH4TB2H26CC012345</em>
+                </button>
+              </li>
+              <li>
+                <button>
+                  <strong>쏘렌토(MQ4) 하이브리드</strong>
+                  <em>555JH4TB2H26CC012345</em>
+                </button>
+              </li>
+              <li>
+                <button>
+                  <strong>스포티지 개조 25</strong>
+                  <em>666JH4TB2H26CC012345</em>
+                </button>
+              </li>
+              <li>
+                <button>
+                  <strong>쏘렌토(MQ4) 하이브리드-플러그인 상품성 개선</strong>
+                  <em>444JH4TB2H26CC012345</em>
+                </button>
+              </li>
+              <li>
+                <button>
+                  <strong>쏘렌토(MQ4) 하이브리드</strong>
+                  <em>555JH4TB2H26CC012345</em>
+                </button>
+              </li>
+              <li>
+                <button>
+                  <strong>스포티지 개조 25</strong>
+                  <em>666JH4TB2H26CC012345</em>
+                </button>
+              </li>
+            </ul>
+          </div>
+        </div>
+        <div class="towButton">
+          <button class="cartBtn leftBtn" onclick="close_layer_popup('carListPopup')"><p>취소</p></button>
+          <button class="PurchaseBtn rightBtn" onclick="close_layer_popup('carListPopup')"><p>선택</p></button>
+        </div>
+      </div>
+    </div>
+    <!--// 2025.08.27 추가 -->
+    <script>
+      AOS.init();
+
+      if ($(".youtubeArea").hasClass("youtubeArea_pdp") === true) {
+        var youtube_id = $(".youtubeArea_pdp").attr("value");
+        var youtube_frame = '<iframe src="https://www.youtube.com/embed/' + youtube_id + '?controls=1&rel=0&showsearch=0" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
+        $(".youtubeArea_pdp").html(youtube_frame);
+      }
+
+      // 스크롤 이벤트 최적화를 위한 throttle 함수
+      function throttle(func, wait) {
+        var timeout;
+        return function executedFunction(...args) {
+          const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+          };
+          clearTimeout(timeout);
+          timeout = setTimeout(later, wait);
+        };
+      }
+
+      // 탭 네비게이션 기능
+      $(document).ready(function () {
+        // Disney 스와이퍼 초기화
+        var disneySwiper = new Swiper(".disneySwiper", {
+          slidesPerView: 2,
+          spaceBetween: 24,
+          loop: true,
+          autoplay: {
+            delay: 1500,
+            disableOnInteraction: false,
+          },
+          // pagination: {
+          //   el: ".swiper-pagination",
+          //   clickable: true,
+          // },
+          // navigation: {
+          //   nextEl: ".swiper-button-next",
+          //   prevEl: ".swiper-button-prev",
+          // },
+          breakpoints: {
+            640: {
+              slidesPerView: 2,
+              spaceBetween: 20,
+            },
+            768: {
+              slidesPerView: 3,
+              spaceBetween: 30,
+            },
+            1024: {
+              slidesPerView: 4,
+              spaceBetween: 30,
+            },
+          },
+        });
+        // 탭 클릭 이벤트
+        $(".tabLink").on("click", function (e) {
+          e.preventDefault();
+
+          var targetTab = $(this).attr("href");
+          var $targetContent = $(targetTab);
+
+          // 모든 탭에서 active 클래스 제거
+          $(".tabItem").removeClass("active");
+          $(".tabContent").removeClass("active");
+
+          // 클릭한 탭에 active 클래스 추가
+          $(this).parent().addClass("active");
+          $targetContent.addClass("active");
+
+          // 해당 탭 콘텐츠로 스크롤 이동
+          if ($targetContent.length) {
+            var scrollTop = $targetContent.offset().top - 100; // 헤더 높이만큼 여백
+            $("html, body").animate(
+              {
+                scrollTop: scrollTop,
+              },
+              500,
+              "easeInOutQuart"
+            );
+          }
+        });
+
+        // 스크롤 이벤트로 탭 자동 포커싱 (throttle 적용)
+        var handleScroll = throttle(function () {
+          var scrollTop = $(window).scrollTop();
+
+          // 각 탭 콘텐츠의 위치 확인
+          $(".tabContent").each(function () {
+            var $this = $(this);
+            var contentTop = $this.offset().top;
+            var contentHeight = $this.outerHeight();
+            var contentBottom = contentTop + contentHeight;
+
+            // 현재 스크롤 위치가 탭 콘텐츠 영역에 있는지 확인
+            if (scrollTop + 200 >= contentTop && scrollTop + 300 <= contentBottom) {
+              var tabId = $this.attr("id");
+              var $correspondingTab = $('.tabLink[href="#' + tabId + '"]').parent();
+
+              // 현재 활성화된 탭과 다르면 변경
+              if (!$correspondingTab.hasClass("active")) {
+                $(".tabItem").removeClass("active");
+                $(".tabContent").removeClass("active");
+                $correspondingTab.addClass("active");
+                $this.addClass("active");
+              }
+            }
+          });
+        }, 100);
+
+        $(window).on("scroll", handleScroll);
+
+        // URL 해시에 따른 탭 활성화
+        if (window.location.hash) {
+          var hashTab = window.location.hash;
+          if ($(hashTab).length) {
+            $(".tabItem").removeClass("active");
+            $(".tabContent").removeClass("active");
+            $('.tabLink[href="' + hashTab + '"]')
+              .parent()
+              .addClass("active");
+            $(hashTab).addClass("active");
+
+            // 해시로 접근한 경우에도 해당 탭으로 스크롤 이동
+            setTimeout(function () {
+              var $targetContent = $(hashTab);
+              if ($targetContent.length) {
+                var scrollTop = $targetContent.offset().top - 100;
+                $("html, body").animate(
+                  {
+                    scrollTop: scrollTop,
+                  },
+                  500,
+                  "easeInOutQuart"
+                );
+              }
+            }, 100);
+          }
+        }
+      });
+    </script>
+  </body>
+</html>

kr/public/css/product.css

@@ -1,936 +0,0 @@
-@charset "UTF-8";
-/*변수*/
-/*반응형 화면 크기*/
-/*css 디폴트는 모바일이 기준*/
-/*반응형, 브라우저 크기가 300px 이하일때*/
-/*반응형, 브라우저 크기가 800px 이상일때*/
-/*@media (min-width: $mobile ) and (max-width: $tablet){*/
-/*반응형, 브라우저 크기가 1025px 이상일때*/
-/*반응형, 브라우저 크기가 1204px 이상일때*/
-/*넓이, 높이 자동 계산함수*/
-/*변수파일 import*/
-.contentWarp .productView {
-  display: block;
-  width: 100%;
-  padding-left: 2rem;
-  padding-right: 2rem;
-}
-@media (min-width: 768px) {
-  .contentWarp .productView {
-    display: flex;
-    justify-content: space-between;
-  }
-}
-@media (min-width: 1025px) {
-  .contentWarp .productView {
-    width: 100%;
-  }
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView {
-    width: 120rem;
-    display: flex;
-    justify-content: space-between;
-    padding-left: 0rem;
-    padding-right: 0rem;
-  }
-}
-.contentWarp .productView .productLeft {
-  width: 100%;
-}
-@media (min-width: 768px) {
-  .contentWarp .productView .productLeft {
-    width: 50%;
-    margin-right: 2rem;
-  }
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView .productLeft {
-    width: 60rem;
-  }
-}
-.contentWarp .productView .productLeft .productImg {
-  border-radius: 0.6rem;
-  overflow: hidden;
-  position: -webkit-sticky;
-  position: sticky;
-  top: 7.5rem;
-}
-.contentWarp .productView .productLeft .productImg .productSwiper {
-  width: 100%;
-  height: auto;
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView .productLeft .productImg .productSwiper {
-    width: 100%;
-  }
-}
-.contentWarp .productView .productLeft .productImg .productSwiper .swiper-slide {
-  position: relative;
-  background-color: #666;
-}
-.contentWarp .productView .productLeft .productImg .productSwiper .swiper-slide img {
-  width: 100%;
-  height: 100%;
-}
-.contentWarp .productView .productLeft .productImg .productSwiper .swiper-slide .productSmallVideo {
-  width: 100%;
-  height: auto;
-  overflow: hidden;
-  position: relative;
-}
-.contentWarp .productView .productLeft .productImg .productSwiper .swiper-slide .productSmallVideo img {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-.contentWarp .productView .productLeft .productImg .productSwiper .swiper-slide .productSmallVideo video {
-  position: absolute;
-  width: 100%;
-  aspect-ratio: 1/1;
-  height: auto;
-  position: relative;
-  left: 0;
-  top: 0;
-  opacity: 1;
-}
-.contentWarp .productView .productLeft .productImg .productSwiper .swiper-slide .movie_info {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-  font-size: 1.4rem;
-  color: #ffffff;
-  text-shadow: 1px 1px 1px #333;
-  z-index: 1;
-}
-.contentWarp .productView .productLeft .productImg .productSwiper .swiper-pagination {
-  bottom: 2rem;
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView .productLeft .productImg .productSwiper .swiper-pagination {
-    bottom: 2.5rem;
-  }
-}
-.contentWarp .productView .productLeft .productImg .productSwiper .swiper-pagination span {
-  width: 5.6rem;
-  height: 0.4rem;
-  border-radius: 0;
-  background-color: #fff;
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView .productLeft .productImg {
-    width: 60rem;
-    height: 60rem;
-  }
-}
-.contentWarp .productView .productRight {
-  width: 100%;
-  margin-top: 3rem;
-}
-@media (min-width: 768px) {
-  .contentWarp .productView .productRight {
-    width: 50%;
-    margin-left: 2rem;
-    margin-top: 0;
-  }
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView .productRight {
-    width: 50rem;
-    margin-top: 0;
-  }
-}
-.contentWarp .productView .productRight .musicBtn {
-  margin-top: 4rem;
-}
-.contentWarp .productView .productRight .optionWarp .producTitle span {
-  color: #676767;
-  font-size: 1.5rem;
-  font-weight: 400;
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView .productRight .optionWarp .producTitle span {
-    font-size: 1.4rem;
-    line-height: initial;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .producTitle .title {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-}
-.contentWarp .productView .productRight .optionWarp .producTitle .title h1 {
-  width: calc(100% - 3rem);
-  padding-right: 2rem;
-  color: #000;
-  font-size: 3rem;
-  font-weight: 600;
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView .productRight .optionWarp .producTitle .title h1 {
-    font-size: 4.5rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .producTitle .title a {
-  display: block;
-  width: 3rem;
-  height: 3rem;
-  background-image: url("/kr/assets/images/common/icon-wishlist-d.svg");
-  background-repeat: no-repeat;
-  background-size: contain;
-}
-.contentWarp .productView .productRight .optionWarp .producTitle .title a.active {
-  background-image: url("/kr/assets/images/common/icon-wishlist-s.svg");
-}
-.contentWarp .productView .productRight .optionWarp .producTitle > p {
-  color: #000;
-  font-size: 1.6rem;
-  font-weight: 400;
-  margin-top: 2.3rem;
-  line-height: 2.4rem;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp {
-  margin-top: 5rem;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp h2 {
-  color: #000;
-  font-size: 1.6rem;
-  font-weight: 600;
-}
-@media (min-width: 1025px) {
-  .contentWarp .productView .productRight .optionWarp .producInfoWarp h2 {
-    font-size: 1.8rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogOut {
-  margin-top: 2rem;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogOut > p {
-  color: #000;
-  font-size: 1.4rem;
-  line-height: 2.2rem;
-}
-@media (min-width: 1025px) {
-  .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogOut > p {
-    font-size: 1.6rem;
-    line-height: 2.4rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogOut > span {
-  display: block;
-  color: #676767;
-  font-size: 1.4rem;
-  margin-top: 1.5rem;
-  line-height: 2.2rem;
-}
-@media (min-width: 1025px) {
-  .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogOut > span {
-    font-size: 1.6rem;
-    line-height: 2.4rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn {
-  margin-top: 2rem;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn > p {
-  color: #000;
-  font-size: 1.4rem;
-  margin-top: 1rem;
-  line-height: 2.2rem;
-}
-@media (min-width: 1025px) {
-  .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn > p {
-    font-size: 1.6rem;
-    line-height: 2.4rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn > span {
-  display: block;
-  color: #676767;
-  font-size: 1.4em;
-  margin-top: 1.5rem;
-  line-height: 2.2rem;
-}
-@media (min-width: 1025px) {
-  .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn > span {
-    font-size: 1.6rem;
-    line-height: 2.4rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio] {
-  visibility: hidden;
-  position: absolute;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label {
-  background-color: #05141F;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dt, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dd {
-  color: #fff;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dt p, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dt strong, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dd p, .contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li input[type=radio]:checked + label dd strong {
-  color: #fff;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li label {
-  display: block;
-  padding: 2.5rem;
-  border: 1px solid #DEDEDE;
-  border-radius: 0.6rem;
-  cursor: pointer;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li label dl dt {
-  font-size: 1.8rem;
-  font-weight: bold;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li label dl dd {
-  margin-top: 1rem;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li label dl dd p {
-  color: #676767;
-  font-size: 1.6rem;
-  line-height: 2.4rem;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li label dl dd strong {
-  display: block;
-  color: #676767;
-  font-size: 1.6rem;
-  line-height: 2.4rem;
-  font-weight: bold;
-  margin-top: 2rem;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li label dl dd:last-child {
-  display: flex;
-  justify-content: flex-end;
-  margin-top: 3rem;
-  font-weight: bold;
-  font-size: 2rem;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li label:hover {
-  border: 1px solid #000;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .producInfoLogIn ul li + li {
-  margin-top: 1rem;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .termsOK {
-  margin-top: 3rem;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .termsOK > a {
-  display: flex;
-  font-size: 1.4rem;
-  color: #676767;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .termsOK > a span {
-  border-bottom: 1px solid #676767;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .termsOK > a::after {
-  content: "";
-  displaY: block;
-  width: 0.6rem;
-  margin-left: 0.8rem;
-  background-image: url("/kr/assets/images/common/icon-mMarrow.svg");
-  background-size: contain;
-  background-repeat: no-repeat;
-  background-position: center right;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .termsOK > label {
-  display: flex;
-  margin-top: 2rem;
-  align-items: flex-start;
-  cursor: pointer;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .termsOK > label span {
-  font-size: 1.4rem;
-  margin-left: 1rem;
-  line-height: 2.2rem;
-  display: block;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .noStreaming {
-  margin-top: 2rem;
-  padding: 3rem 2rem;
-  background-color: #F3F3F3;
-  border-radius: 0.6rem;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .noStreaming P {
-  font-size: 1.6rem;
-  line-height: 2.4rem;
-  font-weight: 600;
-  color: #000000;
-}
-.contentWarp .productView .productRight .optionWarp .producInfoWarp .noStreaming span {
-  margin-top: 1rem;
-  font-size: 1.6rem;
-  font-weight: 400;
-  line-height: 2.4rem;
-  color: #676767;
-}
-.contentWarp .productView .productRight .optionWarp .packageOption {
-  margin-top: 5rem;
-}
-.contentWarp .productView .productRight .optionWarp .packageOption h2 {
-  color: #000;
-  font-size: 1.6rem;
-  font-weight: 600;
-}
-@media (min-width: 1025px) {
-  .contentWarp .productView .productRight .optionWarp .packageOption h2 {
-    font-size: 1.8rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .packageOption .optionList {
-  margin-top: 2rem;
-  padding: 2.5rem;
-  border: 1px solid #DEDEDE;
-  border-radius: 0.6rem;
-}
-@media (max-width: 768px) {
-  .contentWarp .productView .productRight .optionWarp .packageOption .optionList {
-    padding: 2rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .packageOption .optionList .productSmallVideo {
-  min-width: 9rem;
-  height: 9rem;
-  overflow: hidden;
-  position: relative;
-}
-@media (min-width: 1025px) {
-  .contentWarp .productView .productRight .optionWarp .packageOption .optionList .productSmallVideo {
-    max-width: 100%;
-  }
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView .productRight .optionWarp .packageOption .optionList .productSmallVideo {
-    min-width: 9rem;
-    max-width: 9rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .packageOption .optionList .productSmallVideo img {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 9rem;
-  height: 9rem;
-  border-radius: 0.6rem;
-}
-.contentWarp .productView .productRight .optionWarp .packageOption .optionList .productSmallVideo video {
-  position: absolute;
-  height: 9rem;
-  position: relative;
-  left: 0;
-  top: 0;
-  opacity: 1;
-  border-radius: 0.6rem;
-}
-.contentWarp .productView .productRight .optionWarp .packageOption .optionList .optionItem {
-  displaY: flex;
-  width: 100%;
-  height: 9rem;
-  overflow: hidden;
-  position: relative;
-  margin-top: 2.5rem;
-}
-.contentWarp .productView .productRight .optionWarp .packageOption .optionList .optionItem .optionText {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  width: 100%;
-  padding-left: 2.5rem;
-}
-@media (max-width: 768px) {
-  .contentWarp .productView .productRight .optionWarp .packageOption .optionList .optionItem .optionText {
-    padding-left: 2rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .packageOption .optionList .optionItem .optionText p {
-  width: 100%;
-}
-.contentWarp .productView .productRight .optionWarp .packageOption .optionList .optionItem .optionText p span,
-.contentWarp .productView .productRight .optionWarp .packageOption .optionList .optionItem .optionText p strong {
-  displaY: block;
-  width: 100%;
-  font-size: 1.4rem;
-  line-height: 1.4;
-  white-space: normal;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView .productRight .optionWarp .packageOption .optionList .optionItem .optionText p span,
-.contentWarp .productView .productRight .optionWarp .packageOption .optionList .optionItem .optionText p strong {
-    font-size: 1.6rem;
-    line-height: 2rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .packageOption .optionList .optionItem .optionText p strong {
-  font-weight: 600;
-}
-.contentWarp .productView .productRight .optionWarp .packageOption .optionList .optionItem .optionText p span {
-  font-weight: 400;
-}
-.contentWarp .productView .productRight .optionWarp .packageOption .optionList .optionItem .optionText p strong + span {
-  margin-top: 1rem;
-}
-.contentWarp .productView .productRight .optionWarp .packageOption .optionList .optionItem:first-child {
-  margin-top: 0;
-}
-@media (max-width: 768px) {
-  .contentWarp .productView .productRight .optionWarp .packageOption .optionList .optionItem {
-    margin-top: 2rem;
-  }
-  .contentWarp .productView .productRight .optionWarp .packageOption .optionList .optionItem:first-child {
-    margin-top: 0;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .packageOption .optionList .optionItem img {
-  width: 9rem;
-  height: 9rem;
-  border-radius: 0.6rem;
-}
-.contentWarp .productView .productRight .optionWarp .producOption {
-  margin-top: 5rem;
-}
-.contentWarp .productView .productRight .optionWarp .producOption h2 {
-  color: #000;
-  font-size: 1.6rem;
-  font-weight: 600;
-}
-@media (min-width: 1025px) {
-  .contentWarp .productView .productRight .optionWarp .producOption h2 {
-    font-size: 1.8rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .producOption .optionList {
-  margin-top: 2rem;
-}
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn label {
-  displaY: flex;
-  width: 100%;
-  height: 12rem;
-  overflow: hidden;
-  cursor: pointer;
-  position: relative;
-}
-@media (max-width: 768px) {
-  .contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn label {
-    height: 8rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn label p img {
-  width: 12rem;
-  height: 12rem;
-}
-@media (max-width: 768px) {
-  .contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn label p img {
-    width: 8rem;
-    height: 8rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .productSmallVideo {
-  min-width: 12rem;
-  height: 12rem;
-  overflow: hidden;
-  position: relative;
-}
-@media (min-width: 1025px) {
-  .contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .productSmallVideo {
-    max-width: 100%;
-  }
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .productSmallVideo {
-    min-width: 12rem;
-    max-width: 12rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .productSmallVideo img {
-  position: absolute;
-  top: 0;
-  left: 0;
-}
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .productSmallVideo video {
-  position: absolute;
-  height: 12rem;
-  position: relative;
-  left: 0;
-  top: 0;
-  opacity: 1;
-}
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox] {
-  visibility: hidden;
-  position: absolute;
-}
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label {
-  background-color: #05141F;
-  border: 1px solid #05141F;
-}
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label::before {
-  content: "";
-  position: absolute;
-  right: 1.5rem;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  display: block;
-  width: 1.5rem;
-  height: 1.5rem;
-  background-image: url("/kr/assets/images/common/icon_select.svg");
-  background-size: contain;
-  background-repeat: no-repeat;
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label::before {
-    width: 2rem;
-    height: 2rem;
-    right: 2rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label div p span,
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn input[type=checkbox]:checked + label div p strong {
-  color: #fff;
-}
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn:hover label {
-  border: 1px solid #000;
-}
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  padding-left: 2rem;
-  width: 100%;
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText {
-    padding-left: 3rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p {
-  width: 100%;
-}
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p span,
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p strong {
-  displaY: block;
-  width: 100%;
-  font-size: 1.4rem;
-  width: 75%;
-  line-height: 1.4;
-  white-space: normal;
-  display: -webkit-box;
-  -webkit-line-clamp: 2;
-  -webkit-box-orient: vertical;
-  overflow: hidden;
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p span,
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p strong {
-    font-size: 1.4rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p strong {
-  font-weight: 600;
-}
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p span {
-  font-weight: 400;
-}
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p strong + span {
-  margin-top: 1rem;
-}
-@media (max-width: 768px) {
-  .contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn .optionText p strong + span {
-    margin-top: 0.5rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .disabledBtn label {
-  border: 1px solid #DEDEDE;
-}
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .disabledBtn label span,
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .disabledBtn label strong {
-  color: #9EA1A2;
-}
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .disabledBtn label p {
-  opacity: 0.5;
-}
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .disabledBtn:hover label {
-  border: 1px solid #DEDEDE;
-}
-.contentWarp .productView .productRight .optionWarp .producOption .optionList .checkBtn + .checkBtn {
-  margin-top: 1rem;
-}
-.contentWarp .productView .productRight .optionWarp .priceOption {
-  margin-top: 5rem;
-}
-.contentWarp .productView .productRight .optionWarp .priceOption h2 {
-  color: #000;
-  font-size: 1.6rem;
-  font-weight: 600;
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView .productRight .optionWarp .priceOption h2 {
-    font-size: 1.8rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .priceOption .priceList {
-  margin-top: 2rem;
-}
-.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn label {
-  displaY: flex;
-  justify-content: space-between;
-  align-items: center;
-  width: 100%;
-  padding: 2.5rem;
-  height: 9rem;
-  overflow: hidden;
-  cursor: pointer;
-  position: relative;
-  border-radius: 0.6rem;
-  border: 1px solid #DEDEDE;
-}
-.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn label span {
-  font-size: 1.4rem;
-  font-weight: 400;
-  color: #000;
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn label span {
-    font-size: 1.6rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn label strong {
-  font-size: 1.7rem;
-  font-weight: 600;
-  text-align: right;
-  color: #000;
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn label strong {
-    font-size: 2rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn label strong span {
-  display: block;
-  margin-top: 0.5rem;
-  font-size: 1.4rem;
-  text-align: right;
-}
-.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn input[type=radio] {
-  visibility: hidden;
-  position: absolute;
-}
-.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn input[type=radio]:checked + label {
-  background-color: #05141F;
-  border: 1px solid #05141F;
-}
-.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn input[type=radio]:checked + label span,
-.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn input[type=radio]:checked + label strong {
-  color: #fff;
-}
-.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn input[type=radio]:checked + label span .title {
-  color: #fff;
-}
-.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn input[type=radio]:checked + label span .info {
-  color: #fff;
-}
-.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn:hover label {
-  border: 1px solid #000;
-}
-.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn.coupon {
-  background-color: #F3F3F3;
-  border-radius: 0.6rem;
-}
-.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn.coupon label .title {
-  font-size: 1.6rem;
-  font-weight: 600;
-  color: #000000;
-}
-.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn.coupon label .title::after {
-  content: "";
-  display: inline-block;
-  width: 1.4rem;
-  height: 1.3rem;
-  background-image: url(/kr/assets/images/common/coupon_star.svg);
-  background-repeat: no-repeat;
-  background-size: contain;
-  background-position: center right;
-}
-.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn.coupon label .info {
-  margin-top: 0.5rem;
-  font-size: 1.6rem;
-  font-weight: 400;
-  color: #676767;
-}
-.contentWarp .productView .productRight .optionWarp .priceOption .priceList .disabledBtn label {
-  border: 1px solid #DEDEDE;
-}
-.contentWarp .productView .productRight .optionWarp .priceOption .priceList .disabledBtn label span,
-.contentWarp .productView .productRight .optionWarp .priceOption .priceList .disabledBtn label strong {
-  color: #9EA1A2;
-}
-.contentWarp .productView .productRight .optionWarp .priceOption .priceList .disabledBtn label span .title {
-  color: #9EA1A2 !important;
-}
-.contentWarp .productView .productRight .optionWarp .priceOption .priceList .disabledBtn label span .info {
-  color: #9EA1A2 !important;
-}
-.contentWarp .productView .productRight .optionWarp .priceOption .priceList .disabledBtn:hover label {
-  border: 1px solid #DEDEDE;
-}
-.contentWarp .productView .productRight .optionWarp .priceOption .priceList .radioBtn + .radioBtn {
-  margin-top: 1rem;
-}
-.contentWarp .productView .productRight .optionWarp .priceTotal {
-  margin-top: 4rem;
-}
-.contentWarp .productView .productRight .optionWarp .priceTotal .total {
-  display: block;
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView .productRight .optionWarp .priceTotal .total {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .priceTotal .total dt {
-  font-size: 1.4rem;
-  font-weight: 600;
-  color: #666;
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView .productRight .optionWarp .priceTotal .total dt {
-    font-size: 1.6rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .priceTotal .total dd {
-  font-size: 3rem;
-  font-weight: 600;
-  color: #000;
-  margin-top: 1.5rem;
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView .productRight .optionWarp .priceTotal .total dd {
-    margin-top: 0;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .priceTotal .paymentButton {
-  display: block;
-  margin-top: 3rem;
-  width: 100%;
-  max-width: initial;
-}
-@media (min-width: 768px) {
-  .contentWarp .productView .productRight .optionWarp .priceTotal .paymentButton {
-    display: flex;
-  }
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView .productRight .optionWarp .priceTotal .paymentButton {
-    display: flex;
-    justify-content: space-between;
-    margin-top: 3.2rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .priceTotal .paymentButton .cartBtn,
-.contentWarp .productView .productRight .optionWarp .priceTotal .paymentButton .PurchaseBtn {
-  width: 100%;
-}
-.contentWarp .productView .productRight .optionWarp .priceTotal .paymentButton .cartBtn {
-  margin-right: 0rem;
-}
-@media (min-width: 768px) {
-  .contentWarp .productView .productRight .optionWarp .priceTotal .paymentButton .cartBtn {
-    margin-right: 0.5rem;
-  }
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView .productRight .optionWarp .priceTotal .paymentButton .cartBtn {
-    margin-right: 0.5rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .priceTotal .paymentButton .PurchaseBtn {
-  margin-left: 0;
-}
-@media (min-width: 768px) {
-  .contentWarp .productView .productRight .optionWarp .priceTotal .paymentButton .PurchaseBtn {
-    margin-left: 0.5rem;
-  }
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView .productRight .optionWarp .priceTotal .paymentButton .PurchaseBtn {
-    margin-left: 0.5rem;
-  }
-}
-.contentWarp .productView .productRight .optionWarp .priceTotal .paymentButton button + button {
-  margin-top: 0.8rem;
-}
-@media (min-width: 768px) {
-  .contentWarp .productView .productRight .optionWarp .priceTotal .paymentButton button + button {
-    margin-top: 0rem;
-  }
-}
-@media (min-width: 1240px) {
-  .contentWarp .productView .productRight .optionWarp .priceTotal .paymentButton button + button {
-    margin-top: 0;
-  }
-}
-
-.pdpListBtn {
-  width: 100%;
-  height: 7.4rem;
-  background-color: #F3F3F3;
-  padding: 0 2rem;
-}
-@media (min-width: 768px) {
-  .pdpListBtn {
-    height: 10rem;
-    padding: 0;
-  }
-}
-.pdpListBtn .inner {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  width: 100%;
-  height: 7.4rem;
-  font-size: 1.4rem;
-  font-weight: 600;
-  color: #000000;
-}
-@media (min-width: 768px) {
-  .pdpListBtn .inner {
-    max-width: 120rem;
-    margin: 0 auto;
-    height: 10rem;
-    font-size: 1.6rem;
-    color: #000000;
-  }
-}
-@media (max-width: 1240px) {
-  .pdpListBtn .inner {
-    padding: 0 2rem;
-  }
-}
-.pdpListBtn .inner a {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-}
-.pdpListBtn .inner a span {
-  margin-left: 1rem;
-  color: #000000;
-}
-.pdpListBtn .inner a:hover {
-  text-decoration: underline;
-}
-
-.optionList {
-  overflow: auto;
-  max-height: 600px;
-  border: 1px solid #DEDEDE;
-}
-@media (max-width: 768px) {
-  .optionList {
-    max-height: 49.5rem;
-    padding: 2rem;
-  }
-}
-/*# sourceMappingURL=product.css.map */