From f6370d584b04963ec4896b8bf00b04be4141cbcb Mon Sep 17 00:00:00 2001
From: hyeonggil <>
Date: Thu, 23 May 2024 19:49:42 +0900
Subject: [PATCH] =?UTF-8?q?=EC=B5=9C=EC=B4=88=20=EB=B2=84=EC=A0=84=20=5Fbe?=
=?UTF-8?q?fore=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
assets/css/pdp_detail_before.css | 2586 ++++++++++++++++++++++++++++++
assets/js/common_before.js | 608 +++++++
product/pdp_display_theme.html | 7 +-
3 files changed, 3199 insertions(+), 2 deletions(-)
create mode 100644 assets/css/pdp_detail_before.css
create mode 100644 assets/js/common_before.js
diff --git a/assets/css/pdp_detail_before.css b/assets/css/pdp_detail_before.css
new file mode 100644
index 0000000..985ee77
--- /dev/null
+++ b/assets/css/pdp_detail_before.css
@@ -0,0 +1,2586 @@
+@charset "UTF-8";
+/*변수*/
+/*반응형 화면 크기*/
+/*css 디폴트는 모바일이 기준*/
+/*반응형, 브라우저 크기가 300px 이하일때*/
+/*반응형, 브라우저 크기가 800px 이상일때*/
+/*@media (min-width: $mobile ) and (max-width: $tablet){*/
+/*반응형, 브라우저 크기가 1025px 이상일때*/
+/*반응형, 브라우저 크기가 1204px 이상일때*/
+/*넓이, 높이 자동 계산함수*/
+/*변수파일 import*/
+.comp_wide {
+ width: 100%;
+ max-width: 192rem;
+ text-align: left;
+ margin: 0 auto;
+ margin-top: 12rem;
+}
+.comp_wide:first-child {
+ margin-top: 0;
+}
+
+.comp_body {
+ width: 100%;
+ max-width: 120rem;
+ margin: 0 auto;
+}
+@media (max-width: 1240px) {
+ .comp_body {
+ padding: 0 2rem;
+ }
+}
+.comp_body .text_area {
+ margin-top: 4rem;
+ transition: 0.3s;
+}
+@media (max-width: 768px) {
+ .comp_body .text_area {
+ margin-top: 3rem;
+ }
+}
+.comp_body .text_area h3 {
+ transition: 0.3s;
+ font-size: 4rem;
+ font-weight: 600;
+ line-height: 4.8rem;
+}
+@media (max-width: 768px) {
+ .comp_body .text_area h3 {
+ font-size: 3rem;
+ line-height: 3.8rem;
+ }
+}
+.comp_body .text_area h4 {
+ transition: 0.3s;
+ font-size: 3rem;
+ font-weight: 600;
+ line-height: 3.8rem;
+}
+@media (max-width: 768px) {
+ .comp_body .text_area h4 {
+ font-size: 2.4rem;
+ line-height: 3.2rem;
+ }
+}
+.comp_body .text_area h5 {
+ transition: 0.3s;
+ font-size: 2.4rem;
+ font-weight: 600;
+ line-height: 3.4rem;
+}
+@media (max-width: 768px) {
+ .comp_body .text_area h5 {
+ font-size: 2rem;
+ line-height: 2.8rem;
+ }
+}
+.comp_body .text_area p {
+ margin-top: 2rem;
+ font-size: 1.6rem;
+ line-height: 2.4rem;
+ transition: 0.3s;
+}
+@media (max-width: 768px) {
+ .comp_body .text_area p {
+ margin-top: 1.5rem;
+ font-size: 1.4rem;
+ line-height: 2.2rem;
+ }
+}
+.comp_body .text_area .sub {
+ margin-top: 3rem;
+ font-size: 1.4rem;
+ font-weight: 400;
+ color: #0F0B0B;
+ line-height: 2.2rem;
+}
+
+.comp_1x_w_v_s_eS .comp_top {
+ width: 100%;
+ height: 35.5rem;
+ background-color: #000000;
+}
+@media (max-width: 1024px) {
+ .comp_1x_w_v_s_eS .comp_top {
+ height: auto;
+ }
+}
+.comp_1x_w_v_s_eS .comp_top .text_area {
+ display: flex;
+ justify-content: space-between;
+ padding-top: 10rem;
+}
+@media (max-width: 1024px) {
+ .comp_1x_w_v_s_eS .comp_top .text_area {
+ display: block;
+ padding-top: 5rem;
+ padding-bottom: 4rem;
+ }
+}
+.comp_1x_w_v_s_eS .comp_top .text_area h4 {
+ width: 50%;
+ font-size: 4rem;
+ font-weight: 600;
+ line-height: 4.8rem;
+ color: #ffffff;
+}
+@media (max-width: 1024px) {
+ .comp_1x_w_v_s_eS .comp_top .text_area h4 {
+ width: 100%;
+ }
+ .comp_1x_w_v_s_eS .comp_top .text_area h4 br {
+ display: none;
+ }
+}
+.comp_1x_w_v_s_eS .comp_top .text_area .info {
+ width: 50%;
+ font-size: 1.4rem;
+ font-weight: 400;
+ line-height: 2.2rem;
+ color: #FFFFFF;
+}
+@media (max-width: 1024px) {
+ .comp_1x_w_v_s_eS .comp_top .text_area .info {
+ width: 100%;
+ margin-top: 3rem;
+ }
+ .comp_1x_w_v_s_eS .comp_top .text_area .info br {
+ display: none;
+ }
+}
+.comp_1x_w_v_s_eS .movieArea {
+ position: relative;
+ width: 100%;
+ height: 52rem;
+}
+@media (max-width: 1024px) {
+ .comp_1x_w_v_s_eS .movieArea {
+ height: 40rem;
+ }
+}
+@media (max-width: 768px) {
+ .comp_1x_w_v_s_eS .movieArea {
+ height: 30rem;
+ }
+}
+@media (max-width: 500px) {
+ .comp_1x_w_v_s_eS .movieArea {
+ height: 20rem;
+ }
+}
+.comp_1x_w_v_s_eS .comp_bottom {
+ width: 100%;
+ padding-top: 6rem;
+ padding-bottom: 5rem;
+ background-color: #000000;
+}
+.comp_1x_w_v_s_eS .comp_bottom .com_bottm_inner {
+ width: 100%;
+ max-width: 120rem;
+ margin: 0 auto;
+ overflow: hidden;
+}
+@media (max-width: 1200px) {
+ .comp_1x_w_v_s_eS .comp_bottom .com_bottm_inner .swiper {
+ padding-right: 2rem;
+ }
+}
+.comp_1x_w_v_s_eS .comp_bottom .com_bottm_inner .swiper ul li {
+ width: 220px !important;
+ cursor: pointer;
+}
+@media (max-width: 500px) {
+ .comp_1x_w_v_s_eS .comp_bottom .com_bottm_inner .swiper ul li {
+ width: 200px !important;
+ }
+}
+@media (max-width: 1240px) {
+ .comp_1x_w_v_s_eS .comp_bottom .com_bottm_inner .swiper ul li:first-child {
+ margin-left: 2rem;
+ }
+}
+.comp_1x_w_v_s_eS .comp_bottom .com_bottm_inner .swiper ul li img {
+ width: 100%;
+ border-radius: 0.6rem;
+}
+.comp_1x_w_v_s_eS .comp_bottom .com_bottm_inner .swiper ul li p {
+ margin-top: 3rem;
+ font-size: 1.8rem;
+ font-weight: 400;
+ color: #FFFFFF;
+ text-align: center;
+}
+@media (max-width: 768px) {
+ .comp_1x_w_v_s_eS .comp_bottom .com_bottm_inner .swiper ul li p {
+ margin-top: 2rem;
+ }
+}
+.comp_1x_w_v_s_eS .comp_bottom .com_bottm_inner .swiper ul li.active img {
+ border: 1px solid #FFFFFF;
+}
+
+.comp_1x_w_v_s_e1 {
+ border-top: 1px solid #DEDEDE;
+ padding-top: 10rem;
+}
+@media (max-width: 1024px) {
+ .comp_1x_w_v_s_e1 {
+ padding-top: 7rem;
+ }
+}
+@media (max-width: 768px) {
+ .comp_1x_w_v_s_e1 {
+ padding-top: 3rem;
+ }
+}
+.comp_1x_w_v_s_e1 .image_area {
+ height: 600px;
+ margin-top: 4rem;
+ overflow: hidden;
+}
+@media (max-width: 501px) {
+ .comp_1x_w_v_s_e1 .image_area {
+ height: 400px;
+ }
+}
+.comp_1x_w_v_s_e1 .image_area img {
+ width: 100%;
+ height: 100%;
+ transition: 0.3s;
+ -o-object-fit: cover;
+ object-fit: cover;
+}
+@media (max-width: 501px) {
+ .comp_1x_w_v_s_e1 .image_area img {
+ width: 100%;
+ height: 100%;
+ }
+}
+.comp_1x_w_v_s_e1 .bottom {
+ position: relative;
+}
+.comp_1x_w_v_s_e1 .bottom::before {
+ content: "";
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 50%;
+ background-color: #0F0B0B;
+ background-size: 100% 50%;
+ z-index: -1;
+}
+.comp_1x_w_v_s_e1 .bottom .text_area {
+ margin-top: 0;
+ padding-top: 4rem;
+}
+.comp_1x_w_v_s_e1 .bottom .text_area h3 {
+ color: #FFFFFF;
+}
+.comp_1x_w_v_s_e1 .bottom .text_area p {
+ color: #FFFFFF;
+}
+.comp_1x_w_v_s_e1 .bottom .contents_area {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-direction: row-reverse;
+}
+@media (max-width: 768px) {
+ .comp_1x_w_v_s_e1 .bottom .contents_area {
+ display: block;
+ }
+}
+.comp_1x_w_v_s_e1 .bottom .contents_area .image_area {
+ width: 50%;
+ height: initial !important;
+}
+@media (max-width: 768px) {
+ .comp_1x_w_v_s_e1 .bottom .contents_area .image_area {
+ width: 100%;
+ }
+}
+.comp_1x_w_v_s_e1 .bottom .contents_area .image_area img {
+ height: initial !important;
+ border-radius: 0.6rem;
+}
+.comp_1x_w_v_s_e1 .bottom .contents_area .text_area {
+ width: 50%;
+ padding-right: 4rem;
+}
+@media (max-width: 768px) {
+ .comp_1x_w_v_s_e1 .bottom .contents_area .text_area {
+ width: 100%;
+ padding-right: 0;
+ }
+}
+.comp_1x_w_v_s_e1 .bottom .contents_area .text_area h4 {
+ color: #000000;
+}
+.comp_1x_w_v_s_e1 .bottom .contents_area .text_area p {
+ color: #000000;
+}
+
+.comp_1x_w_v_s_e2 .comp_body {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+@media (max-width: 900px) {
+ .comp_1x_w_v_s_e2 .comp_body {
+ display: block;
+ }
+}
+.comp_1x_w_v_s_e2 .comp_body .text_area {
+ margin-top: 0;
+}
+@media (max-width: 900px) {
+ .comp_1x_w_v_s_e2 .comp_body .icon_area {
+ margin-top: 3rem;
+ }
+}
+.comp_1x_w_v_s_e2 .comp_body .icon_area img:last-child {
+ margin-left: 1.5rem;
+}
+@media (max-width: 900px) {
+ .comp_1x_w_v_s_e2 .comp_body .icon_area img {
+ width: 7rem;
+ height: 7rem;
+ }
+ .comp_1x_w_v_s_e2 .comp_body .icon_area img:last-child {
+ margin-left: 1rem;
+ }
+}
+.comp_1x_w_v_s_e2 .image_area {
+ height: 520px;
+ margin-top: 4rem;
+ overflow: hidden;
+}
+@media (max-width: 501px) {
+ .comp_1x_w_v_s_e2 .image_area {
+ height: 360px;
+ }
+}
+.comp_1x_w_v_s_e2 .image_area img {
+ width: 100%;
+ height: 100%;
+ transition: 0.3s;
+ -o-object-fit: cover;
+ object-fit: cover;
+}
+@media (max-width: 501px) {
+ .comp_1x_w_v_s_e2 .image_area img {
+ width: 100%;
+ height: 100%;
+ }
+}
+
+.comp_1x_b_n_n_e1 {
+ margin-top: 10rem;
+ padding-top: 10rem;
+ padding-bottom: 10rem;
+ border-top: 1px solid #DEDEDE;
+}
+@media (max-width: 1024px) {
+ .comp_1x_b_n_n_e1 {
+ margin-top: 6rem;
+ padding-top: 6rem;
+ padding-bottom: 6rem;
+ }
+}
+.comp_1x_b_n_n_e1 h5 {
+ font-size: 3rem;
+ font-weight: 600;
+ text-align: left;
+ color: #000000;
+}
+.comp_1x_b_n_n_e1 .youtubeArea {
+ position: relative;
+ margin-top: 3.5rem;
+ padding-bottom: 56.25%; /* 16:9 비율인 경우 */
+ /* padding-bottom값은 4:3 비율인 경우 75%로 설정합니다 */
+ padding-top: 25px;
+ height: 0;
+}
+@media (max-width: 1024px) {
+ .comp_1x_b_n_n_e1 .youtubeArea {
+ margin-top: 2rem;
+ }
+}
+.comp_1x_b_n_n_e1 .youtubeArea iframe {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+.comp_1x_b_n_n_e1 .youtubeArea object {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+.comp_1x_b_n_n_e2 {
+ margin-top: 10rem;
+ padding-top: 10rem;
+ padding-bottom: 10rem;
+ border-top: 1px solid #DEDEDE;
+}
+@media (max-width: 1024px) {
+ .comp_1x_b_n_n_e2 {
+ margin-top: 6rem;
+ padding-top: 6rem;
+ padding-bottom: 6rem;
+ }
+}
+.comp_1x_b_n_n_e2 h5 {
+ font-size: 3rem;
+ font-weight: 600;
+ text-align: left;
+ color: #000000;
+}
+.comp_1x_b_n_n_e2 .mp4area {
+ position: relative;
+ margin-top: 3.5rem;
+ padding-bottom: 56.25%; /* 16:9 비율인 경우 */
+ /* padding-bottom값은 4:3 비율인 경우 75%로 설정합니다 */
+ padding-top: 25px;
+ height: 0;
+}
+@media (max-width: 1024px) {
+ .comp_1x_b_n_n_e2 .mp4area {
+ margin-top: 2rem;
+ }
+}
+.comp_1x_b_n_n_e2 .mp4area video {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+}
+
+@media (max-width: 501px) {
+ .comp_1x_w_v_s_b .image_area {
+ height: 360px;
+ }
+}
+.comp_1x_w_v_s_b .image_area img {
+ width: 100%;
+ transition: 0.3s;
+}
+@media (max-width: 501px) {
+ .comp_1x_w_v_s_b .image_area img {
+ width: 100%;
+ height: 100%;
+ -o-object-fit: cover;
+ object-fit: cover;
+ }
+}
+
+.comp_1x_w_v_c_e1 {
+ position: relative;
+}
+@media (max-width: 768px) {
+ .comp_1x_w_v_c_e1 .image_area {
+ height: 560px;
+ }
+}
+.comp_1x_w_v_c_e1 .image_area img {
+ width: 100%;
+ transition: 0.3s;
+}
+@media (max-width: 768px) {
+ .comp_1x_w_v_c_e1 .image_area img {
+ width: 100%;
+ height: 100%;
+ -o-object-fit: cover;
+ object-fit: cover;
+ }
+}
+.comp_1x_w_v_c_e1 .comp_body.layer_up {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+}
+.comp_1x_w_v_c_e1 .comp_body.layer_up .text_area {
+ margin-top: 9rem;
+}
+@media (max-width: 1025px) {
+ .comp_1x_w_v_c_e1 .comp_body.layer_up .text_area {
+ margin-top: 6rem;
+ }
+}
+.comp_1x_w_v_c_e1 .comp_body.no_layer {
+ position: absolute;
+ bottom: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ display: flex;
+ justify-content: flex-end;
+ margin-bottom: 10rem;
+}
+.comp_1x_w_v_c_e1 .comp_body.no_layer .text_area {
+ width: 38rem;
+}
+@media (max-width: 1025px) {
+ .comp_1x_w_v_c_e1 .comp_body.no_layer {
+ position: relative;
+ left: initial;
+ transform: initial;
+ display: block;
+ }
+ .comp_1x_w_v_c_e1 .comp_body.no_layer .text_area {
+ width: 100%;
+ }
+}
+
+.comp_1x_w_v_o_b {
+ position: relative;
+}
+@media (max-width: 768px) {
+ .comp_1x_w_v_o_b .image_area {
+ height: 560px;
+ }
+}
+.comp_1x_w_v_o_b .image_area img {
+ width: 100%;
+ transition: 0.3s;
+}
+@media (max-width: 768px) {
+ .comp_1x_w_v_o_b .image_area img {
+ width: 100%;
+ height: 100%;
+ -o-object-fit: cover;
+ object-fit: cover;
+ }
+}
+.comp_1x_w_v_o_b .comp_body .text_area {
+ color: #ffffff !important;
+}
+.comp_1x_w_v_o_b .comp_body.layer_up {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+}
+.comp_1x_w_v_o_b .comp_body.layer_up .text_area {
+ margin-top: 9rem;
+}
+@media (max-width: 1025px) {
+ .comp_1x_w_v_o_b .comp_body.layer_up .text_area {
+ margin-top: 6rem;
+ }
+}
+.comp_1x_w_v_o_b .comp_body.bottom .text_area {
+ color: #000000 !important;
+}
+
+.comp_1x_w_v_c_b {
+ position: relative;
+}
+.comp_1x_w_v_c_b .image_area {
+ height: 700px;
+}
+@media (max-width: 768px) {
+ .comp_1x_w_v_c_b .image_area {
+ height: 560px;
+ }
+}
+.comp_1x_w_v_c_b .image_area img {
+ width: 100%;
+ height: 100%;
+ width: 100%;
+ transition: 0.3s;
+ -o-object-fit: cover;
+ object-fit: cover;
+}
+.comp_1x_w_v_c_b .comp_body.layer_up {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+}
+.comp_1x_w_v_c_b .comp_body.layer_up .text_area {
+ margin-top: 9rem;
+}
+@media (max-width: 1025px) {
+ .comp_1x_w_v_c_b .comp_body.layer_up .text_area {
+ margin-top: 6rem;
+ }
+}
+.comp_1x_w_v_c_b .comp_body.no_layer {
+ position: absolute;
+ top: 0;
+ left: 50%;
+ transform: translateX(-50%);
+ margin-bottom: 10rem;
+}
+.comp_1x_w_v_c_b .comp_body.no_layer .text_area {
+ width: 38rem;
+ margin-top: 25rem;
+}
+.comp_1x_w_v_c_b .comp_body.no_layer .icon_area {
+ margin-top: 3rem;
+}
+.comp_1x_w_v_c_b .comp_body.no_layer .icon_area img {
+ margin-right: 2rem;
+}
+@media (max-width: 1025px) {
+ .comp_1x_w_v_c_b .comp_body.no_layer {
+ position: relative;
+ left: initial;
+ transform: initial;
+ display: block;
+ }
+ .comp_1x_w_v_c_b .comp_body.no_layer .text_area {
+ width: 100%;
+ margin-top: 4rem;
+ }
+}
+
+@media (max-width: 501px) {
+ .comp_1x_b_v_s_b .image_area {
+ height: 360px;
+ }
+}
+.comp_1x_b_v_s_b .image_area img {
+ width: 100%;
+ transition: 0.3s;
+ border-radius: 0.6rem;
+}
+@media (max-width: 501px) {
+ .comp_1x_b_v_s_b .image_area img {
+ width: 100%;
+ height: 100%;
+ -o-object-fit: cover;
+ object-fit: cover;
+ }
+}
+
+.comp_1x_b_v_s_e1 .image_area img {
+ width: 100%;
+ transition: 0.3s;
+ border-radius: 0.6rem;
+}
+.comp_1x_b_v_s_e1 .text_wrap {
+ display: flex;
+ justify-content: space-between;
+}
+@media (max-width: 1025px) {
+ .comp_1x_b_v_s_e1 .text_wrap {
+ display: block;
+ }
+}
+.comp_1x_b_v_s_e1 .text_wrap .text_area {
+ width: calc((100% - 4rem) / 2);
+}
+@media (max-width: 1025px) {
+ .comp_1x_b_v_s_e1 .text_wrap .text_area {
+ width: 100%;
+ }
+}
+
+.comp_1x_w_v_c_e2 {
+ position: relative;
+}
+.comp_1x_w_v_c_e2::after {
+ content: "";
+ position: absolute;
+ top: 0;
+ display: block;
+ width: 100%;
+ height: 60rem;
+ background-color: #05141F;
+ z-index: -1;
+}
+@media (max-width: 1025px) {
+ .comp_1x_w_v_c_e2::after {
+ height: 80%;
+ }
+}
+.comp_1x_w_v_c_e2 .text_wrap {
+ display: flex;
+ justify-content: space-between;
+ padding-top: 6rem;
+}
+@media (max-width: 1025px) {
+ .comp_1x_w_v_c_e2 .text_wrap {
+ display: block;
+ padding-top: 1rem;
+ }
+}
+.comp_1x_w_v_c_e2 .text_wrap .text_area {
+ width: calc((100% - 40px) / 2);
+ color: #ffffff;
+}
+@media (max-width: 1025px) {
+ .comp_1x_w_v_c_e2 .text_wrap .text_area {
+ width: 100%;
+ }
+}
+.comp_1x_w_v_c_e2 .image_area {
+ margin-top: 9rem;
+}
+@media (max-width: 1025px) {
+ .comp_1x_w_v_c_e2 .image_area {
+ margin-top: 4rem;
+ }
+}
+.comp_1x_w_v_c_e2 .image_area img {
+ width: 100%;
+ transition: 0.3s;
+ border-radius: 0.6rem;
+}
+
+.comp_1x_b_v_o_b .comp_body {
+ position: relative;
+}
+.comp_1x_b_v_o_b .comp_body .image_area {
+ height: 520px;
+}
+.comp_1x_b_v_o_b .comp_body .image_area img {
+ width: 100%;
+ height: 100%;
+ width: 100%;
+ transition: 0.3s;
+ -o-object-fit: cover;
+ object-fit: cover;
+ border-radius: 0.6rem;
+}
+.comp_1x_b_v_o_b .comp_body .text_area {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ color: #ffffff;
+ margin-top: 7rem;
+ padding: 0 7rem;
+}
+@media (max-width: 1025px) {
+ .comp_1x_b_v_o_b .comp_body .text_area {
+ margin-top: 4rem;
+ padding: 0 4rem;
+ }
+}
+
+.comp_1x_b_h_s_b .comp_body {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+@media (max-width: 768px) {
+ .comp_1x_b_h_s_b .comp_body {
+ display: block;
+ }
+}
+.comp_1x_b_h_s_b .comp_body .image_area {
+ width: 50%;
+}
+@media (max-width: 768px) {
+ .comp_1x_b_h_s_b .comp_body .image_area {
+ width: 100%;
+ }
+}
+.comp_1x_b_h_s_b .comp_body .image_area img {
+ width: 100%;
+}
+.comp_1x_b_h_s_b .comp_body .text_area {
+ width: 50%;
+ padding: 5rem;
+}
+@media (max-width: 768px) {
+ .comp_1x_b_h_s_b .comp_body .text_area {
+ width: 100%;
+ padding: 0;
+ }
+}
+
+.comp_1x_b_h_s_e1 .comp_body {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+@media (max-width: 768px) {
+ .comp_1x_b_h_s_e1 .comp_body {
+ display: block;
+ }
+}
+.comp_1x_b_h_s_e1 .comp_body .image_area {
+ width: 50%;
+}
+@media (max-width: 768px) {
+ .comp_1x_b_h_s_e1 .comp_body .image_area {
+ width: 100%;
+ }
+}
+.comp_1x_b_h_s_e1 .comp_body .image_area img {
+ width: 100%;
+ border-radius: 0.6rem;
+}
+.comp_1x_b_h_s_e1 .comp_body .text_area {
+ width: 50%;
+ margin-top: 0;
+}
+@media (max-width: 768px) {
+ .comp_1x_b_h_s_e1 .comp_body .text_area {
+ width: 100%;
+ margin-top: 3rem;
+ }
+}
+.comp_1x_b_h_s_e1 .comp_body:nth-child(odd) .text_area {
+ padding-left: 5rem;
+}
+@media (max-width: 768px) {
+ .comp_1x_b_h_s_e1 .comp_body:nth-child(odd) .text_area {
+ padding-left: 0;
+ }
+}
+.comp_1x_b_h_s_e1 .comp_body:nth-child(even) {
+ flex-direction: row-reverse;
+}
+.comp_1x_b_h_s_e1 .comp_body:nth-child(even) .text_area {
+ padding-right: 5rem;
+}
+@media (max-width: 768px) {
+ .comp_1x_b_h_s_e1 .comp_body:nth-child(even) .text_area {
+ padding-right: 0;
+ }
+}
+.comp_1x_b_h_s_e1 .comp_body:not(:first-child) {
+ margin-top: 5rem;
+}
+
+.comp_1x_b_h_s_e3 .comp_body {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+@media (max-width: 768px) {
+ .comp_1x_b_h_s_e3 .comp_body {
+ display: block;
+ }
+}
+.comp_1x_b_h_s_e3 .comp_body .image_area {
+ width: 50%;
+ aspect-ratio: 1/1;
+}
+@media (max-width: 768px) {
+ .comp_1x_b_h_s_e3 .comp_body .image_area {
+ width: 100%;
+ }
+}
+.comp_1x_b_h_s_e3 .comp_body .image_area img {
+ width: 100%;
+ border-radius: 0.6rem;
+}
+.comp_1x_b_h_s_e3 .comp_body .image_area video {
+ width: 100%;
+ border-radius: 0.6rem;
+}
+.comp_1x_b_h_s_e3 .comp_body .text_area {
+ width: 50%;
+ margin-top: 0;
+}
+@media (max-width: 768px) {
+ .comp_1x_b_h_s_e3 .comp_body .text_area {
+ width: 100%;
+ margin-top: 3rem;
+ }
+}
+.comp_1x_b_h_s_e3 .comp_body:nth-child(odd) .text_area {
+ padding-left: 5rem;
+}
+@media (max-width: 768px) {
+ .comp_1x_b_h_s_e3 .comp_body:nth-child(odd) .text_area {
+ padding-left: 0;
+ }
+}
+.comp_1x_b_h_s_e3 .comp_body:nth-child(even) {
+ flex-direction: row-reverse;
+}
+.comp_1x_b_h_s_e3 .comp_body:nth-child(even) .text_area {
+ padding-right: 5rem;
+}
+@media (max-width: 768px) {
+ .comp_1x_b_h_s_e3 .comp_body:nth-child(even) .text_area {
+ padding-right: 0;
+ }
+}
+.comp_1x_b_h_s_e3 .comp_body:not(:first-child) {
+ margin-top: 5rem;
+}
+
+.comp_1x_b_h_s_e4 {
+ border-top: 1px solid #DEDEDE;
+ padding-top: 6rem;
+}
+@media (max-width: 768px) {
+ .comp_1x_b_h_s_e4 {
+ padding-top: 7.5rem;
+ }
+}
+.comp_1x_b_h_s_e4 .comp_body {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+}
+@media (max-width: 768px) {
+ .comp_1x_b_h_s_e4 .comp_body {
+ display: block;
+ }
+}
+.comp_1x_b_h_s_e4 .comp_body .item {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ width: 100%;
+ margin-bottom: 5rem;
+}
+.comp_1x_b_h_s_e4 .comp_body .item .image_area {
+ width: 20%;
+ max-width: 12rem;
+}
+.comp_1x_b_h_s_e4 .comp_body .item .image_area img {
+ width: 100%;
+}
+.comp_1x_b_h_s_e4 .comp_body .item .text_area {
+ width: 80%;
+ margin-top: 0;
+ margin-left: 3rem;
+}
+.comp_1x_b_h_s_e4 .comp_body .item .text_area p {
+ color: #676767;
+}
+
+.comp_2x_b_v_s_e1 .comp_body {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+}
+@media (max-width: 768px) {
+ .comp_2x_b_v_s_e1 .comp_body {
+ display: block;
+ }
+}
+.comp_2x_b_v_s_e1 .comp_body .half_area {
+ display: flex;
+ flex-direction: column;
+ width: calc((100% - 6rem) / 2);
+}
+@media (max-width: 768px) {
+ .comp_2x_b_v_s_e1 .comp_body .half_area {
+ display: block;
+ width: 100%;
+ }
+}
+.comp_2x_b_v_s_e1 .comp_body .half_area .image_area {
+ width: 100%;
+}
+.comp_2x_b_v_s_e1 .comp_body .half_area .image_area img {
+ width: 100%;
+ border-radius: 0.6rem;
+}
+.comp_2x_b_v_s_e1 .comp_body .half_area:last-child {
+ flex-direction: column-reverse;
+ margin-top: 5rem;
+}
+@media (max-width: 768px) {
+ .comp_2x_b_v_s_e1 .comp_body .half_area:last-child {
+ display: block;
+ }
+}
+.comp_2x_b_v_s_e1 .comp_body .half_area .text_area {
+ padding-bottom: 4rem;
+}
+
+.comp_2x_b_v_s_b .comp_body {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+}
+@media (max-width: 768px) {
+ .comp_2x_b_v_s_b .comp_body {
+ display: block;
+ }
+}
+.comp_2x_b_v_s_b .comp_body .half_area {
+ width: calc((100% - 2rem) / 2);
+}
+@media (max-width: 768px) {
+ .comp_2x_b_v_s_b .comp_body .half_area {
+ width: 100%;
+ display: block;
+ }
+}
+.comp_2x_b_v_s_b .comp_body .half_area .image_area {
+ width: 100%;
+}
+.comp_2x_b_v_s_b .comp_body .half_area .image_area img {
+ width: 100%;
+ border-radius: 0.6rem;
+}
+@media (max-width: 768px) {
+ .comp_2x_b_v_s_b .comp_body .half_area:last-child {
+ margin-top: 4rem;
+ }
+}
+
+.comp_1x_b_h_s_e2 .comp_body {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+@media (max-width: 768px) {
+ .comp_1x_b_h_s_e2 .comp_body {
+ display: block;
+ }
+}
+.comp_1x_b_h_s_e2 .comp_body .image_area {
+ width: 46%;
+}
+@media (max-width: 768px) {
+ .comp_1x_b_h_s_e2 .comp_body .image_area {
+ width: 100%;
+ }
+}
+.comp_1x_b_h_s_e2 .comp_body .image_area img {
+ width: 100%;
+ border-radius: 0.6rem;
+}
+.comp_1x_b_h_s_e2 .comp_body .text_area {
+ width: calc(54% - 5rem);
+ margin-top: 0;
+}
+@media (max-width: 768px) {
+ .comp_1x_b_h_s_e2 .comp_body .text_area {
+ width: 100%;
+ margin-top: 3rem;
+ }
+}
+.comp_1x_b_h_s_e2 .comp_body .text_area ul {
+ margin-top: 5.5rem;
+}
+.comp_1x_b_h_s_e2 .comp_body .text_area ul li {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+}
+.comp_1x_b_h_s_e2 .comp_body .text_area ul li p {
+ margin-top: 0;
+ margin-left: 3rem;
+ font-size: 1.6rem;
+ line-height: 2.4rem;
+ color: #676767;
+}
+.comp_1x_b_h_s_e2 .comp_body .text_area ul li:not(:first-child) {
+ margin-top: 3rem;
+}
+
+.comp_2x_b_h_s_e2 .comp_body {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+}
+@media (max-width: 768px) {
+ .comp_2x_b_h_s_e2 .comp_body {
+ display: block;
+ }
+}
+.comp_2x_b_h_s_e2 .comp_body .item {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ width: calc((100% - 5rem) / 2);
+ margin-bottom: 5rem;
+}
+@media (max-width: 768px) {
+ .comp_2x_b_h_s_e2 .comp_body .item {
+ width: 100%;
+ }
+}
+.comp_2x_b_h_s_e2 .comp_body .item .image_area {
+ width: 20%;
+ max-width: 12rem;
+}
+.comp_2x_b_h_s_e2 .comp_body .item .image_area img {
+ width: 100%;
+}
+.comp_2x_b_h_s_e2 .comp_body .item .text_area {
+ width: 80%;
+ margin-top: 0;
+ margin-left: 3rem;
+}
+.comp_2x_b_h_s_e2 .comp_body .item .text_area p {
+ color: #676767;
+}
+
+.comp_2x_b_h_s_e3 .comp_body {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ flex-wrap: wrap;
+}
+@media (max-width: 768px) {
+ .comp_2x_b_h_s_e3 .comp_body {
+ display: block;
+ }
+}
+.comp_2x_b_h_s_e3 .comp_body .item {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ width: calc((100% - 5rem) / 2);
+ margin-bottom: 5rem;
+}
+@media (max-width: 768px) {
+ .comp_2x_b_h_s_e3 .comp_body .item {
+ width: 100%;
+ }
+}
+.comp_2x_b_h_s_e3 .comp_body .item .image_area {
+ width: 20%;
+ max-width: 12rem;
+}
+.comp_2x_b_h_s_e3 .comp_body .item .image_area img {
+ width: 100%;
+}
+.comp_2x_b_h_s_e3 .comp_body .item .text_area {
+ width: 80%;
+ margin-top: 0;
+ margin-left: 3rem;
+}
+.comp_2x_b_h_s_e3 .comp_body .item .text_area p {
+ color: #676767;
+}
+
+.comp_3x_b_v_s_b .comp_body {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-start;
+ flex-wrap: wrap;
+}
+@media (max-width: 768px) {
+ .comp_3x_b_v_s_b .comp_body {
+ display: block;
+ }
+}
+.comp_3x_b_v_s_b .comp_body .item {
+ width: calc((100% - 10rem) / 3);
+}
+@media (max-width: 768px) {
+ .comp_3x_b_v_s_b .comp_body .item {
+ width: 100%;
+ }
+ .comp_3x_b_v_s_b .comp_body .item:not(:first-child) {
+ margin-top: 6rem;
+ }
+}
+.comp_3x_b_v_s_b .comp_body .item .image_area {
+ width: 100%;
+}
+.comp_3x_b_v_s_b .comp_body .item .image_area img {
+ width: 100%;
+ border-radius: 0.6rem;
+}
+.comp_3x_b_v_s_b .comp_body .item .text_area {
+ margin-top: 3rem;
+}
+.comp_3x_b_v_s_b .comp_body .item .text_area p {
+ margin-top: 1.5rem;
+}
+
+.comp_1x_b_n_n_b {
+ margin-top: 15rem;
+ background-color: #F3F3F3;
+ padding: 4rem 0;
+}
+@media (max-width: 1024px) {
+ .comp_1x_b_n_n_b {
+ margin-top: 6rem;
+ }
+}
+.comp_1x_b_n_n_b .comp_body .title {
+ font-size: 1.8rem;
+ font-weight: 600;
+ color: #000000;
+}
+.comp_1x_b_n_n_b .comp_body ul {
+ margin-top: 10px;
+}
+.comp_1x_b_n_n_b .comp_body ul li {
+ position: relative;
+ padding: 0.5rem 0 0.5rem 1rem;
+ font-size: 1.4rem;
+ font-weight: 400;
+ line-height: 2.2rem;
+}
+.comp_1x_b_n_n_b .comp_body ul li::before {
+ content: "∙";
+ position: absolute;
+ top: 0.5rem;
+ left: 0;
+}
+
+.pdpDetail {
+ padding-bottom: 10rem;
+}
+@media (max-width: 768px) {
+ .pdpDetail {
+ padding-bottom: 6rem;
+ }
+}
+
+.disclaimerArea {
+ padding-bottom: 10rem;
+}
+@media (max-width: 768px) {
+ .disclaimerArea {
+ padding-bottom: 6rem;
+ }
+}
+.disclaimerArea .disclaimerInner h2 {
+ width: 100%;
+ font-size: 2.4rem;
+ font-weight: 600;
+}
+@media (max-width: 768px) {
+ .disclaimerArea .disclaimerInner h2 {
+ font-size: 1.8rem;
+ }
+}
+.disclaimerArea .disclaimerInner .disclaimerList {
+ margin-top: 4rem;
+ border-top: 1px solid #999999;
+ border-bottom: 1px solid #999999;
+}
+@media (max-width: 768px) {
+ .disclaimerArea .disclaimerInner .disclaimerList {
+ margin-top: 3rem;
+ }
+}
+.disclaimerArea .disclaimerInner .disclaimerList .item {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ padding: 2rem 0;
+ border-bottom: 1px solid #DEDEDE;
+}
+.disclaimerArea .disclaimerInner .disclaimerList .item:last-child {
+ border-bottom: none;
+}
+@media (max-width: 768px) {
+ .disclaimerArea .disclaimerInner .disclaimerList .item {
+ display: block;
+ }
+}
+.disclaimerArea .disclaimerInner .disclaimerList .item .title {
+ width: 15.5rem;
+ padding-right: 2rem;
+ font-size: 1.6rem;
+ line-height: 2.4rem;
+ font-weight: 600;
+ word-break: keep-all;
+}
+@media (max-width: 768px) {
+ .disclaimerArea .disclaimerInner .disclaimerList .item .title {
+ width: 100%;
+ padding-right: 0;
+ font-size: 1.4rem;
+ line-height: 2.2rem;
+ }
+}
+.disclaimerArea .disclaimerInner .disclaimerList .item .bar {
+ width: 0.1rem;
+ height: 1.5rem;
+ background-color: #DEDEDE;
+}
+@media (max-width: 768px) {
+ .disclaimerArea .disclaimerInner .disclaimerList .item .bar {
+ display: none;
+ }
+}
+.disclaimerArea .disclaimerInner .disclaimerList .item .contents {
+ width: calc(100% - 15.6rem);
+ padding-left: 2rem;
+ font-size: 1.6rem;
+ line-height: 2.4rem;
+ word-break: keep-all;
+ color: #676767;
+}
+@media (max-width: 768px) {
+ .disclaimerArea .disclaimerInner .disclaimerList .item .contents {
+ width: 100%;
+ font-size: 1.4rem;
+ line-height: 2.2rem;
+ margin-top: 1.5rem;
+ padding-left: 0;
+ }
+}
+.disclaimerArea .disclaimerInner .disclaimerList .item .contents li {
+ position: relative;
+ padding-left: 1rem;
+}
+.disclaimerArea .disclaimerInner .disclaimerList .item .contents li::before {
+ content: "∙";
+ position: absolute;
+ top: 0;
+ left: 0;
+ line-height: 2.2rem;
+}
+.disclaimerArea .disclaimerInner .disclaimerList .item .contents li a {
+ color: #676767;
+}
+
+.reviewArea {
+ margin-top: 0;
+ padding-top: 10rem;
+ padding-bottom: 10rem;
+ border-top: 0.1rem solid #DEDEDE;
+ border-bottom: 0.1rem solid #DEDEDE;
+}
+.reviewArea:has(+ .qnaArea) {
+ border-bottom: none;
+}
+@media (max-width: 768px) {
+ .reviewArea {
+ padding-top: 6rem;
+ padding-bottom: 6rem;
+ }
+}
+.reviewArea .reviewInner .titleArea {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.reviewArea .reviewInner .titleArea h2 {
+ width: 100%;
+ font-size: 2.4rem;
+ font-weight: 600;
+}
+@media (max-width: 768px) {
+ .reviewArea .reviewInner .titleArea h2 {
+ font-size: 1.8rem;
+ }
+}
+.reviewArea .reviewInner .titleArea .searchBox .selectInner .cont-select {
+ position: relative;
+ width: 100%;
+ height: 4.5rem;
+ min-width: 10rem;
+}
+@media (min-width: 768px) {
+ .reviewArea .reviewInner .titleArea .searchBox .selectInner .cont-select {
+ width: 13rem;
+ }
+}
+.reviewArea .reviewInner .titleArea .searchBox .selectInner .cont-select .btn-select {
+ position: relative;
+ width: 100%;
+ height: 4.5rem;
+ font-size: 1.4rem;
+ padding: 1.4rem 2rem;
+ background-color: #fff;
+ border: 1px solid #DEDEDE;
+ box-sizing: border-box;
+ cursor: pointer;
+ text-align: left;
+ color: #000;
+ line-height: 1;
+ /* 말줄임 */
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+@media (min-width: 768px) {
+ .reviewArea .reviewInner .titleArea .searchBox .selectInner .cont-select .btn-select {
+ font-size: 1.6rem;
+ }
+}
+.reviewArea .reviewInner .titleArea .searchBox .selectInner .cont-select .btn-select::after {
+ content: "";
+ position: absolute;
+ right: 1rem;
+ top: 40%;
+ transform: translate(-50%, 0);
+ width: 1.4rem;
+ height: 0.8rem;
+ displaY: block;
+ background: url("/kr/assets/images/common/icon-notice.svg");
+ background-size: contain;
+ background-repeat: no-repeat;
+ transform: rotate(-180deg);
+}
+.reviewArea .reviewInner .titleArea .searchBox .selectInner .cont-select .list-member {
+ display: none;
+ position: absolute;
+ padding: 1rem 2rem;
+ width: 100%;
+ top: 4.4rem;
+ left: 0;
+ border: 1px solid #DEDEDE;
+ box-sizing: border-box;
+ background-color: #fff;
+ z-index: 1;
+}
+.reviewArea .reviewInner .titleArea .searchBox .selectInner .cont-select .btn-select.on::after {
+ transform: rotate(0deg);
+}
+.reviewArea .reviewInner .titleArea .searchBox .selectInner .cont-select .btn-select.on + .list-member {
+ display: block;
+}
+.reviewArea .reviewInner .titleArea .searchBox .selectInner .cont-select .list-member li {
+ font-size: 1.6rem;
+ line-height: 2;
+ box-sizing: border-box;
+}
+.reviewArea .reviewInner .titleArea .searchBox .selectInner .cont-select .list-member li button {
+ width: 100%;
+ font-size: 1.6rem;
+ border: none;
+ background-color: #fff;
+ cursor: pointer;
+ text-align: left;
+ /* 말줄임 */
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ overflow: hidden;
+}
+.reviewArea .reviewInner .reviewList {
+ margin-top: 3rem;
+ border-top: 1px solid #999999;
+ border-bottom: 1px solid #999999;
+}
+@media (max-width: 768px) {
+ .reviewArea .reviewInner .reviewList {
+ margin-top: 2rem;
+ }
+}
+.reviewArea .reviewInner .reviewList .item {
+ display: flex;
+ justify-content: space-between;
+ align-items: flex-end;
+ padding: 2rem 0;
+ border-bottom: 1px solid #DEDEDE;
+}
+@media (max-width: 768px) {
+ .reviewArea .reviewInner .reviewList .item {
+ display: block;
+ }
+}
+.reviewArea .reviewInner .reviewList .item .textArea {
+ width: calc(100% - 10rem);
+ padding-right: 5rem;
+}
+@media (max-width: 768px) {
+ .reviewArea .reviewInner .reviewList .item .textArea {
+ width: 100%;
+ padding-right: 0;
+ }
+}
+.reviewArea .reviewInner .reviewList .item .textArea .title {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+}
+.reviewArea .reviewInner .reviewList .item .textArea .title .name {
+ font-size: 1.6rem;
+ font-weight: 600;
+}
+.reviewArea .reviewInner .reviewList .item .textArea .title .date {
+ margin-left: 1rem;
+ font-size: 1.4rem;
+ color: #9EA1A2;
+}
+.reviewArea .reviewInner .reviewList .item .textArea .contents {
+ margin-top: 1.5rem;
+ font-size: 1.6rem;
+ line-height: 2.4rem;
+}
+@media (max-width: 768px) {
+ .reviewArea .reviewInner .reviewList .item .textArea .contents {
+ margin-top: 1.3rem;
+ }
+}
+.reviewArea .reviewInner .reviewList .item .textArea .contents.abstracted {
+ white-space: normal;
+ text-overflow: ellipsis;
+ display: -webkit-box;
+ -webkit-line-clamp: 3;
+ -webkit-box-orient: vertical;
+ overflow: hidden;
+}
+.reviewArea .reviewInner .reviewList .item .textArea .contentMoreBtn {
+ display: none;
+ align-items: center;
+ margin-top: 1rem;
+ font-size: 1.6rem;
+ color: #9EA1A2;
+ cursor: pointer;
+}
+.reviewArea .reviewInner .reviewList .item .textArea .contentMoreBtn::after {
+ content: "";
+ displaY: block;
+ width: 1rem;
+ height: 1rem;
+ margin-left: 0.5rem;
+ background-image: url("/kr/assets/images/common/icon-more.svg");
+ background-size: contain;
+ background-repeat: no-repeat;
+ background-position: center;
+}
+.reviewArea .reviewInner .reviewList .item .textArea .contentMoreBtn.active::after {
+ background-image: url("/kr/assets/images/common/icon-briefly.svg");
+}
+.reviewArea .reviewInner .reviewList .item .reviewBtnArea {
+ width: 10rem;
+}
+@media (max-width: 768px) {
+ .reviewArea .reviewInner .reviewList .item .reviewBtnArea {
+ display: flex;
+ justify-content: flex-end;
+ width: 100%;
+ margin-top: 1.5rem;
+ }
+}
+.reviewArea .reviewInner .reviewList .item .reviewBtnArea .reviewBtn {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 10rem;
+ height: 3.5rem;
+ border: 1px solid #DEDEDE;
+ border-radius: 0.6rem;
+ transition: 0.3s;
+}
+.reviewArea .reviewInner .reviewList .item .reviewBtnArea .reviewBtn .icon-good {
+ width: 2rem;
+ height: 2rem;
+ background-image: url("/kr/assets/images/common/icon_good.svg");
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+.reviewArea .reviewInner .reviewList .item .reviewBtnArea .reviewBtn .goodNum {
+ margin-left: 0.8rem;
+ padding-top: 0.2rem;
+ color: #9EA1A2;
+ font-size: 1.4rem;
+ font-weight: 600;
+ line-height: 2rem;
+}
+.reviewArea .reviewInner .reviewList .item .reviewBtnArea .reviewBtn:hover {
+ border: 1px solid #000000;
+}
+.reviewArea .reviewInner .reviewList .item .reviewBtnArea .reviewBtn.active .goodNum {
+ color: #000000;
+}
+.reviewArea .reviewInner .noList {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 14rem;
+ margin-top: 4rem;
+ border: 1px solid #DEDEDE;
+ border-radius: 0.6rem;
+ font-size: 1.8rem;
+ color: #9EA1A2;
+}
+@media (min-width: 768px) {
+ .reviewArea .reviewInner .noList {
+ font-size: 2rem;
+ }
+}
+
+.qnaArea {
+ margin-top: 0;
+ padding-top: 10rem;
+ padding-bottom: 10rem;
+ border-top: 0.1rem solid #DEDEDE;
+ border-bottom: 0.1rem solid #DEDEDE;
+}
+@media (max-width: 768px) {
+ .qnaArea {
+ padding-top: 6rem;
+ padding-bottom: 6rem;
+ }
+}
+.qnaArea .qnaInner .titleArea {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+}
+.qnaArea .qnaInner .titleArea h2 {
+ width: 100%;
+ font-size: 2.4rem;
+ font-weight: 600;
+}
+@media (max-width: 768px) {
+ .qnaArea .qnaInner .titleArea h2 {
+ font-size: 1.8rem;
+ }
+}
+.qnaArea .qnaInner .qnaList {
+ margin-top: 4rem;
+}
+@media (max-width: 768px) {
+ .qnaArea .qnaInner .qnaList {
+ margin-top: 3rem;
+ }
+}
+.qnaArea .qnaInner .qnaList {
+ width: 100%;
+ margin-top: 2rem;
+}
+@media (min-width: 1025px) {
+ .qnaArea .qnaInner .qnaList {
+ max-width: 120rem;
+ margin-top: 2rem;
+ }
+}
+@media (min-width: 1240px) {
+ .qnaArea .qnaInner .qnaList {
+ padding-left: 0;
+ padding-right: 0;
+ }
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl {
+ border: 1px solid #DEDEDE;
+ border-radius: 0.6rem;
+ padding: 2rem;
+ position: relative;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl:hover {
+ border-color: #05141F;
+}
+@media (min-width: 768px) {
+ .qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl {
+ padding: 2.5rem;
+ }
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dt {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ font-size: 1.6rem;
+ font-weight: 600;
+ position: relative;
+ cursor: pointer;
+}
+@media (min-width: 1025px) {
+ .qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dt {
+ font-size: 1.8rem;
+ }
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dt > p {
+ position: relative;
+ width: 93%;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dt > p .subTitle {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ color: #9EA1A2;
+ margin-bottom: 1.5rem;
+ font-size: 1.4rem;
+ font-weight: 400;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dt > p .subTitle .badge {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 2.5rem;
+ margin-right: 1rem;
+ padding: 0 0.8rem;
+ border: 0.1rem solid #DEDEDE;
+ font-size: 1.4rem;
+ font-weight: 400;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dt > p .subTitle .badge.an {
+ color: #9EA1A2;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dt > p .subTitle .badge.ay {
+ color: #000000;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dt > p span {
+ font-weight: 600;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dt:hover {
+ color: var(--unnamed-color-00aad2);
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dt::after {
+ content: "";
+ position: absolute;
+ right: 0rem;
+ top: 65%;
+ transform: translate(-50%, 0);
+ transform: rotate(-180deg);
+ width: 1.4rem;
+ height: 0.8rem;
+ displaY: block;
+ background: url("/kr/assets/images/common/icon-notice.svg");
+ background-size: contain;
+ background-repeat: no-repeat;
+}
+@media (min-width: 768px) {
+ .qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dt::after {
+ top: 40%;
+ right: 1rem;
+ }
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dt.active::after {
+ transform: rotate(0deg);
+ background-position-x: right;
+ right: 0rem;
+}
+@media (min-width: 768px) {
+ .qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dt.active::after {
+ right: 1rem;
+ }
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dt.active + dd {
+ displaY: block;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd {
+ display: none;
+ margin-top: 3rem;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd p {
+ font-size: 1.4rem;
+ line-height: 2.4rem;
+ color: #000000;
+}
+@media (min-width: 1025px) {
+ .qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd p {
+ font-size: 1.6rem;
+ }
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .imageArea {
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ width: 100%;
+ margin-top: 3rem;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .imageArea .item {
+ width: calc((100% - 4rem) / 3);
+ border: 0.1rem solid #DEDEDE;
+ overflow: hidden;
+ margin-right: 2rem;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .imageArea .item:last-child {
+ margin-right: 0;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .imageArea .item .box {
+ position: relative;
+ padding-top: 100%;
+ background-repeat: no-repeat;
+ background-size: contain;
+ background-position: center;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .adminAnswer {
+ margin-top: 3.5rem;
+ padding-top: 3.5rem;
+ border-top: 0.1rem solid #DEDEDE;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .adminAnswer .subTitle {
+ color: #9EA1A2;
+ font-size: 1.4rem;
+ font-weight: 400;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .adminAnswer .answer {
+ margin-top: 1.5rem;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .adminAnswer .downloadArea {
+ display: flex;
+ justify-content: flex-start;
+ flex-wrap: wrap;
+ width: 100%;
+ margin-top: 2rem;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .adminAnswer .downloadArea .downloadItem {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ font-size: 1.6rem;
+ padding: 0.7rem 1rem;
+ background-color: #F3F3F3;
+ color: #000000;
+ margin-right: 1rem;
+ margin-bottom: 1rem;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .adminAnswer .downloadArea .downloadItem:hover {
+ text-decoration: underline;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .adminAnswer .downloadArea .downloadItem .icon {
+ width: 2rem;
+ height: 2rem;
+ background-image: url("/kr/assets/images/common/icon-download.svg");
+ background-repeat: repeat;
+ margin-left: 0.8rem;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .csBtn {
+ margin: 0 auto;
+ margin-top: 4rem;
+ width: 100%;
+}
+@media (min-width: 768px) {
+ .qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .csBtn {
+ width: 37rem;
+ margin-top: 5rem;
+ }
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .csBtn .oneButton {
+ width: 16rem;
+ margin: 0 auto;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .csBtn .towButton {
+ displaY: flex;
+ flex-wrap: wrap;
+}
+@media (min-width: 768px) {
+ .qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .csBtn .towButton {
+ flex-wrap: nowrap;
+ }
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .csBtn .towButton .leftBtn {
+ margin-right: 0;
+}
+@media (min-width: 768px) {
+ .qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .csBtn .towButton .leftBtn {
+ margin-right: 0.5rem;
+ }
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .csBtn .towButton .rightBtn {
+ margin-left: 0;
+}
+@media (min-width: 768px) {
+ .qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .csBtn .towButton .rightBtn {
+ margin-left: 0.5rem;
+ }
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .csBtn .towButton button + button {
+ margin-top: 1rem;
+}
+@media (min-width: 768px) {
+ .qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl dd .csBtn .towButton button + button {
+ margin-lefT: 1rem;
+ margin-top: 0;
+ }
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl > .dd-padding {
+ padding-left: 6.5rem;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl.active {
+ border-color: #000;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl.private:hover {
+ border-color: #DEDEDE;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl.private dt {
+ cursor: default;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl.private dt:after {
+ content: none;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl.private dt > p span {
+ color: #9EA1A2;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .accordion dl + dl {
+ margin-top: 1rem;
+}
+.qnaArea .qnaInner .qnaList .qnaAccodion .noList {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ height: 14rem;
+ border: 1px solid #DEDEDE;
+ border-radius: 0.6rem;
+ font-size: 1.8rem;
+ color: #9EA1A2;
+}
+@media (min-width: 768px) {
+ .qnaArea .qnaInner .qnaList .qnaAccodion .noList {
+ font-size: 2rem;
+ }
+}
+
+.listbtnWarp {
+ width: 100%;
+ margin: 0 auto;
+ padding: 0 2rem;
+}
+@media (min-width: 1025px) {
+ .listbtnWarp {
+ width: 16rem;
+ }
+}
+.listbtnWarp a::before,
+.listbtnWarp a::after {
+ width: 3.2rem;
+}
+@media (min-width: 1025px) {
+ .listbtnWarp a::before,
+.listbtnWarp a::after {
+ width: 3.2rem;
+ }
+}
+
+.pdpDisplayThemeSwiper .swiper-wrapper {
+ transition-timing-function: linear;
+}
+
+.displayTheme .visualBg {
+ position: absolute;
+ width: 100%;
+ max-width: 192rem;
+}
+.displayTheme .visualBg img {
+ width: 100%;
+}
+.displayTheme .visualBg img.mobile {
+ display: none;
+}
+@media (max-width: 768px) {
+ .displayTheme .visualBg img.web {
+ display: none;
+ }
+ .displayTheme .visualBg img.mobile {
+ display: block;
+ -o-object-fit: initial;
+ object-fit: initial;
+ height: auto;
+ }
+}
+.displayTheme .visualBg:after {
+ content: "";
+ display: block;
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ z-index: 2;
+ width: 100%;
+ height: 60%;
+ background: rgb(255, 255, 255);
+ background: linear-gradient(180deg, rgba(255, 255, 255, 0) 43%, rgb(255, 255, 255) 100%);
+}
+.displayTheme.comp_wide {
+ overflow: hidden;
+}
+.displayTheme.comp_wide .comp_body.layer_up .text_area {
+ margin-top: 7rem;
+}
+@media (max-width: 768px) {
+ .displayTheme.comp_wide .comp_body .text_area {
+ margin-top: 4rem !important;
+ }
+ .displayTheme.comp_wide .comp_body .text_area h3 {
+ font-size: 3rem;
+ }
+ .displayTheme.comp_wide .comp_body .text_area .info {
+ font-size: 1.4rem;
+ }
+}
+.displayTheme.comp_wide .comp_bottom {
+ display: flex;
+ align-items: center;
+ position: relative;
+ z-index: 2;
+ padding: 4rem 0;
+ background-color: rgba(0, 0, 0, 0.8);
+}
+@media (max-width: 1025px) {
+ .displayTheme.comp_wide .comp_bottom {
+ padding: 3rem 0;
+ }
+}
+@media (max-width: 768px) {
+ .displayTheme.comp_wide .comp_bottom {
+ padding: 2rem 0;
+ }
+}
+.displayTheme.comp_wide .comp_bottom .com_bottm_inner {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+@media (max-width: 1025px) {
+ .displayTheme.comp_wide .comp_bottom .com_bottm_inner {
+ padding: 3rem 0;
+ }
+}
+@media (max-width: 768px) {
+ .displayTheme.comp_wide .comp_bottom .com_bottm_inner {
+ padding: 2.5rem 0;
+ }
+}
+.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper {
+ overflow: visible;
+ width: 100%;
+ padding: 0 10rem;
+}
+.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper:before, .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper:after {
+ content: "";
+ display: block;
+ position: absolute;
+ top: -4rem;
+ bottom: -4rem;
+ left: 0;
+ z-index: 2;
+ width: 10rem;
+ background: rgb(0, 0, 0);
+ background: linear-gradient(270deg, rgba(0, 0, 0, 0) 43%, rgb(0, 0, 0) 100%);
+}
+.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper:after {
+ left: auto;
+ right: 0;
+ background: linear-gradient(90deg, rgba(0, 0, 0, 0) 43%, rgb(0, 0, 0) 100%);
+}
+@media (max-width: 768px) {
+ .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper:before, .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper:after {
+ display: none;
+ }
+}
+@media (max-width: 1200px) {
+ .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper {
+ padding-right: 2rem;
+ }
+}
+.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper {
+ width: 100%;
+ transition-timing-function: linear;
+}
+.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide {
+ width: 16.6rem !important;
+ padding: 6px;
+ border: 2px solid transparent;
+ cursor: pointer;
+}
+@media (max-width: 768px) {
+ .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide {
+ width: 18rem !important;
+ padding: 0.8rem;
+ }
+}
+@media (max-width: 1240px) {
+ .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide:first-child {
+ margin-left: 2rem;
+ }
+}
+.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide img {
+ max-width: 100%;
+}
+.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide p {
+ margin-top: 0.3rem;
+ font-size: 1.4rem;
+ font-weight: 400;
+ color: #fff;
+ text-transform: uppercase;
+ text-align: left;
+}
+@media (max-width: 768px) {
+ .displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide p {
+ margin-top: 0.5rem;
+ }
+}
+.displayTheme.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide.active {
+ border-color: #fff;
+}
+.displayTheme .comp_top {
+ z-index: 2;
+ height: 36rem;
+}
+.displayTheme .comp_top .comp_body .text_area h3 {
+ margin-bottom: 2rem;
+}
+.displayTheme .comp_top .comp_body .text_area > * {
+ flex: 1;
+}
+.displayTheme .comp_md {
+ position: absolute;
+ z-index: 2;
+ top: 0;
+ height: 48rem;
+ background-color: rgba(0, 0, 0, 0);
+}
+@media (max-width: 768px) {
+ .displayTheme .comp_md {
+ height: 3rem;
+ }
+}
+.displayTheme.type2 .comp_bottom {
+ background-color: transparent;
+}
+.displayTheme.type2 .comp_bottom .com_bottm_inner .thumb-wrap {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1.4rem 2rem;
+ width: 100%;
+ max-width: 118rem;
+ margin: 0 auto;
+}
+.displayTheme.type2 .comp_bottom .com_bottm_inner .thumb-wrap .dtthumb {
+ width: 13rem;
+}
+.displayTheme.type2 .comp_bottom .com_bottm_inner .thumb-wrap .img-area {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 13rem;
+ height: 12rem;
+ background-color: #fff;
+ border-radius: 0.8rem;
+}
+.displayTheme.type2 .comp_bottom .com_bottm_inner .thumb-wrap p {
+ font-size: 1.4rem;
+ font-weight: 600;
+ color: #fff;
+ text-transform: uppercase;
+}
+.displayTheme .dtlImgs .item {
+ transition: opacity 0.2s;
+}
+.displayTheme .dtlImgs .item .text_area {
+ margin-top: 4rem;
+}
+@media (max-width: 768px) {
+ .displayTheme .dtlImgs .item .text_area {
+ margin-top: 2rem;
+ }
+}
+.displayTheme .dtlImgs .item + .item {
+ margin-top: 8rem;
+}
+@media (max-width: 768px) {
+ .displayTheme .dtlImgs .item + .item {
+ margin-top: 5rem;
+ }
+}
+.displayTheme .dtlImgs .item.change {
+ opacity: 0;
+}
+.displayTheme + .comp_1x_b_v_s_b {
+ position: relative;
+ z-index: 2;
+ margin-top: 9rem;
+}
+@media (max-width: 768px) {
+ .displayTheme + .comp_1x_b_v_s_b {
+ margin-top: 7.5rem;
+ }
+}
+.displayTheme + .comp_1x_b_v_s_b .image_area {
+ height: auto;
+}
+@media (max-width: 768px) {
+ .displayTheme + .comp_1x_b_v_s_b {
+ margin-top: 5rem;
+ }
+}
+.displayTheme .comp_body .text_area h5 {
+ font-size: 3rem;
+}
+
+.displayThemeDtl .swiper-navigation > * {
+ top: 210px;
+ left: -65px;
+ width: 5rem;
+ height: 5rem;
+ border-radius: 50%;
+ background: rgb(255, 255, 255) url(../images/kia/pdp/display_theme/icon-arrow.png) no-repeat center/15px auto;
+}
+.displayThemeDtl .swiper-navigation > *:after {
+ display: none;
+}
+.displayThemeDtl .swiper-navigation .swiper-button-next {
+ left: auto;
+ right: -65px;
+ transform: rotate(180deg);
+}
+
+.inCarGame .visualBg {
+ position: absolute;
+ width: 100%;
+ max-width: 192rem;
+}
+.inCarGame .visualBg img {
+ width: 100%;
+}
+.inCarGame .visualBg img.mobile {
+ display: none;
+}
+@media (max-width: 768px) {
+ .inCarGame .visualBg img.web {
+ display: none;
+ }
+ .inCarGame .visualBg img.mobile {
+ display: block;
+ -o-object-fit: initial;
+ object-fit: initial;
+ height: auto;
+ }
+}
+.inCarGame.comp_wide .comp_body.layer_up .text_area {
+ margin-top: 7rem;
+}
+.inCarGame.comp_wide .comp_body.layer_up .text_area .info {
+ line-height: 1.5;
+}
+.inCarGame.comp_wide .comp_body.layer_up .text_area .info br {
+ display: none;
+}
+@media (max-width: 768px) {
+ .inCarGame.comp_wide .comp_body.layer_up .text_area .info br {
+ display: block;
+ }
+}
+@media (max-width: 768px) {
+ .inCarGame.comp_wide .comp_body .text_area {
+ margin-top: 6rem;
+ }
+ .inCarGame.comp_wide .comp_body .text_area h3 {
+ font-size: 3rem;
+ line-height: 4rem;
+ }
+ .inCarGame.comp_wide .comp_body .text_area .info {
+ font-size: 1.4rem;
+ }
+}
+.inCarGame.comp_wide .comp_bottom {
+ display: flex;
+ align-items: center;
+ position: relative;
+ z-index: 2;
+ padding: 4rem 0;
+ background-color: rgba(0, 0, 0, 0.8);
+}
+@media (max-width: 1025px) {
+ .inCarGame.comp_wide .comp_bottom {
+ padding: 3rem 0;
+ }
+}
+@media (max-width: 768px) {
+ .inCarGame.comp_wide .comp_bottom {
+ padding: 0;
+ }
+}
+.inCarGame.comp_wide .comp_bottom .com_bottm_inner {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ position: relative;
+ width: 100%;
+ height: 100%;
+}
+@media (max-width: 1025px) {
+ .inCarGame.comp_wide .comp_bottom .com_bottm_inner {
+ padding: 3rem 0;
+ }
+}
+@media (max-width: 768px) {
+ .inCarGame.comp_wide .comp_bottom .com_bottm_inner {
+ padding: 2.5rem 0;
+ }
+}
+.inCarGame.comp_wide .comp_bottom .com_bottm_inner .swiper {
+ width: 100%;
+ padding: 0 10rem;
+}
+.inCarGame.comp_wide .comp_bottom .com_bottm_inner .swiper:before, .inCarGame.comp_wide .comp_bottom .com_bottm_inner .swiper:after {
+ content: "";
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: 2;
+ width: 10rem;
+ height: 100%;
+ background: rgb(0, 0, 0);
+ background: linear-gradient(270deg, rgba(0, 0, 0, 0) 43%, rgb(0, 0, 0) 100%);
+}
+.inCarGame.comp_wide .comp_bottom .com_bottm_inner .swiper:after {
+ left: auto;
+ right: 0;
+ background: linear-gradient(90deg, rgba(0, 0, 0, 0) 43%, rgb(0, 0, 0) 100%);
+}
+@media (max-width: 768px) {
+ .inCarGame.comp_wide .comp_bottom .com_bottm_inner .swiper:before, .inCarGame.comp_wide .comp_bottom .com_bottm_inner .swiper:after {
+ display: none;
+ }
+}
+@media (max-width: 1200px) {
+ .inCarGame.comp_wide .comp_bottom .com_bottm_inner .swiper {
+ padding-right: 2rem;
+ }
+}
+.inCarGame.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper {
+ width: 100%;
+ transition-timing-function: linear;
+}
+.inCarGame.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide {
+ width: 16.6rem !important;
+ padding: 6px;
+ border: 2px solid transparent;
+ cursor: pointer;
+}
+@media (max-width: 768px) {
+ .inCarGame.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide {
+ width: 18rem !important;
+ padding: 0.8rem;
+ }
+}
+@media (max-width: 1240px) {
+ .inCarGame.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide:first-child {
+ margin-left: 2rem;
+ }
+}
+.inCarGame.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide img {
+ max-width: 100%;
+}
+.inCarGame.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide p {
+ margin-top: 0.3rem;
+ font-size: 1.4rem;
+ font-weight: 400;
+ color: #fff;
+ text-transform: uppercase;
+ text-align: left;
+}
+@media (max-width: 768px) {
+ .inCarGame.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide p {
+ margin-top: 0.5rem;
+ }
+}
+.inCarGame.comp_wide .comp_bottom .com_bottm_inner .swiper .swiper-wrapper .swiper-slide.active {
+ border-color: #fff;
+}
+.inCarGame .comp_top {
+ z-index: 2;
+ height: 27.5vw;
+ max-height: 529px;
+}
+@media (max-width: 768px) {
+ .inCarGame .comp_top {
+ height: 43.9rem;
+ }
+}
+.inCarGame .comp_top .comp_body .text_area h3 {
+ margin-bottom: 2rem;
+}
+.inCarGame .comp_top .comp_body .text_area > * {
+ flex: 1;
+}
+.inCarGame .comp_md {
+ position: absolute;
+ z-index: 2;
+ top: 0;
+ height: 48rem;
+ background-color: rgba(0, 0, 0, 0);
+}
+@media (max-width: 768px) {
+ .inCarGame .comp_md {
+ height: 3rem;
+ }
+}
+.inCarGame.type2 .comp_bottom {
+ background-color: transparent;
+}
+.inCarGame.type2 .comp_bottom .com_bottm_inner .thumb-wrap {
+ display: flex;
+ flex-wrap: wrap;
+ gap: 1.4rem 2rem;
+ width: 100%;
+ max-width: 118rem;
+ margin: 0 auto;
+}
+.inCarGame.type2 .comp_bottom .com_bottm_inner .thumb-wrap .dtthumb {
+ width: 13rem;
+}
+.inCarGame.type2 .comp_bottom .com_bottm_inner .thumb-wrap .img-area {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 13rem;
+ height: 12rem;
+ background-color: #fff;
+ border-radius: 0.8rem;
+}
+.inCarGame.type2 .comp_bottom .com_bottm_inner .thumb-wrap p {
+ font-size: 1.4rem;
+ font-weight: 600;
+ color: #fff;
+ text-transform: uppercase;
+}
+.inCarGame .dtlImgs .item {
+ transition: opacity 0.2s;
+}
+.inCarGame .dtlImgs .item .text_area {
+ margin-top: 4rem;
+}
+@media (max-width: 768px) {
+ .inCarGame .dtlImgs .item .text_area {
+ margin-top: 2rem;
+ }
+}
+.inCarGame .dtlImgs .item + .item {
+ margin-top: 8rem;
+}
+@media (max-width: 768px) {
+ .inCarGame .dtlImgs .item + .item {
+ margin-top: 5rem;
+ }
+}
+.inCarGame .dtlImgs .item.change {
+ opacity: 0;
+}
+.inCarGame + .comp_1x_b_v_s_b {
+ position: relative;
+ z-index: 2;
+ margin-top: 8rem;
+}
+@media (max-width: 768px) {
+ .inCarGame + .comp_1x_b_v_s_b {
+ margin-top: 7.5rem;
+ }
+}
+.inCarGame + .comp_1x_b_v_s_b .image_area {
+ height: auto;
+ border-radius: 0.8rem;
+}
+.inCarGame + .comp_1x_b_v_s_b .image_area img {
+ display: block;
+ border-radius: 0.8rem;
+ overflow: hidden;
+}
+@media (max-width: 768px) {
+ .inCarGame + .comp_1x_b_v_s_b {
+ margin-top: 4rem;
+ }
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs .text_area {
+ display: none;
+ margin-top: 3.2rem;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme0 .text_theme0 {
+ display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme1 .text_theme1 {
+ display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme2 .text_theme2 {
+ display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme3 .text_theme3 {
+ display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme4 .text_theme4 {
+ display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme5 .text_theme5 {
+ display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme6 .text_theme6 {
+ display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme7 .text_theme7 {
+ display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme8 .text_theme8 {
+ display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme9 .text_theme9 {
+ display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme10 .text_theme10 {
+ display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme11 .text_theme11 {
+ display: block;
+}
+.inCarGame + .comp_1x_b_v_s_b .dtlImgs.theme12 .text_theme12 {
+ display: block;
+}
+.inCarGame .comp_body .text_area h5 {
+ font-size: 3rem;
+}
+.inCarGame .inCarGameDtl {
+ overflow: hidden;
+ border-radius: 0.8rem;
+}
+.inCarGame .inCarGameDtl .swiper-slide {
+ cursor: pointer;
+}
+.inCarGame .inCarGameDtlThumb {
+ margin-top: 0.7rem;
+}
+.inCarGame .inCarGameDtlThumb .swiper-slide {
+ position: relative;
+ border-radius: 0.8rem;
+ cursor: pointer;
+}
+.inCarGame .inCarGameDtlThumb .swiper-slide img {
+ display: block;
+ max-width: 100%;
+ border-radius: 0.8rem;
+ overflow: hidden;
+}
+.inCarGame .inCarGameDtlThumb .swiper-slide:after {
+ content: "";
+ display: block;
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ border-radius: 0.8rem;
+ background-color: rgba(0, 0, 0, 0.7);
+}
+.inCarGame .inCarGameDtlThumb .swiper-slide.swiper-slide-thumb-active:after {
+ display: none;
+}
+
+.tooltip {
+ display: flex;
+ align-items: center;
+ position: absolute;
+ top: -8.5rem;
+ left: 0;
+ z-index: 10;
+ width: 27.6rem;
+ height: 7.2rem;
+ padding: 0 0 0 1.6rem;
+ font-size: 1.2rem;
+ color: #05141F;
+ line-height: 2rem;
+ border: 1px solid #000;
+ border-radius: 0.4rem;
+ background-color: #fff;
+}
+.tooltip:after {
+ content: "";
+ display: block;
+ position: absolute;
+ bottom: -0.9rem;
+ left: 2.4rem;
+ width: 1.5rem;
+ height: 0.9rem;
+ background: url("../images/kia/pdp/display_theme/ico_edge.png") no-repeat center/contain;
+}
+.tooltip .btn-close {
+ position: absolute;
+ top: 1.6rem;
+ right: 1.6rem;
+ width: 1.6rem;
+ height: 1.6rem;
+ background: url("../images/kia/pdp/display_theme/ico_close.png") no-repeat center/contain;
+ text-indent: -9999em;
+ cursor: pointer;
+}
+/*# sourceMappingURL=pdp_detail.css.map */
\ No newline at end of file
diff --git a/assets/js/common_before.js b/assets/js/common_before.js
new file mode 100644
index 0000000..ad98218
--- /dev/null
+++ b/assets/js/common_before.js
@@ -0,0 +1,608 @@
+//비디오 썸내일 콘트롤
+$(document).ready(function() {
+ if ('scrollRestoration' in history) {
+ history.scrollRestoration = 'manual';
+ }
+
+ //윈도우 사이즈 반응형에 따른 스크립트
+ const body = document.querySelector("body");
+ var targetSize = "";
+ function handleWindowSize() {
+ const windowWidth = window.innerWidth;
+ if (windowWidth <= 500) {
+ //모바일 class
+ body.className = "moblie";
+
+ if(targetSize != "moblie"){
+ menu_init();
+ $(document).on("click",".mobileCarlist > .mobilecarItem",function(){
+ if (!$(this).hasClass('noitem')) {
+ $(this).next().slideToggle("fast");
+ $(this).find(".arrow").toggleClass("on");
+ $(this).toggleClass("on");
+ if($(this).hasClass("on")) {
+ window.dataLayer.push({
+ 'event': 'navigation',
+ 'event_category': 'Navigation',
+ 'event_action': 'Top menu',
+ 'event_label': 'VIN'
+ });
+ printDL();
+ }
+ }
+ });
+ $(document).on("click",".menuDepth1Wrap > .menuDepth1",function(){
+ if($(this).hasClass("on") == true){
+ $(this).next().slideToggle("fast");
+ $(this).toggleClass("on");
+ }else{
+ $(".menuDepth1Wrap > .menuDepth1").removeClass("on");
+ $(".menuDepth1Wrap > .menuDepth1").next().slideUp("fast");
+ $(this).next().slideToggle("fast");
+ $(this).toggleClass("on");
+ }
+ });
+
+ $(document).on("click",".moblie .menuDepth1Wrap > a",function(e){
+ e.preventDefault();
+ });
+
+ $(document).on("click",".btnClose, .menuWarp .menuDepth2Wrap a", function(e) {
+ $('.menuWarp .menuDepth1').removeClass('on');
+ $('.menuWarp .menuDepth2Wrap').hide();
+ $(".menuWarp").css("right", "-100%");
+ $("html").removeClass("scrollDisable");
+ });
+ $(document).on("click",".closeBtn",function(){
+ $(".menuWarp").stop().animate({"right":"-100%"}, { queue : true , duration : 500 , easing : 'easeInOutExpo'});
+ $("html").removeClass("scrollDisable");
+ });
+ $(document).on("click",".burgurBtn",function(){
+ $(".menuWarp").stop().animate({"right":"0"}, { queue : true , duration : 500 , easing : 'easeInOutExpo'});
+ $("html").addClass("scrollDisable");
+ });
+ }
+ targetSize = "moblie";
+ } else if (windowWidth > 500 && windowWidth <= 1024) {
+ //타블릿 class
+ body.className = "tablet";
+
+ if(targetSize != "tablet"){
+ menu_init();
+ $(document).on("click",".mobileCarlist > .mobilecarItem",function(){
+ if (!$(this).hasClass('noitem')) {
+ $(this).next().slideToggle("fast");
+ $(this).find(".arrow").toggleClass("on");
+ $(this).toggleClass("on");
+ if($(this).hasClass("on")) {
+ window.dataLayer.push({
+ 'event': 'navigation',
+ 'event_category': 'Navigation',
+ 'event_action': 'Top menu',
+ 'event_label': 'VIN'
+ });
+ printDL();
+ }
+ }
+ });
+ $(document).on("click",".menuDepth1Wrap > .menuDepth1",function(){
+ if($(this).hasClass("on") == true){
+ $(this).next().slideToggle("fast");
+ $(this).toggleClass("on");
+ }else{
+ $(".menuDepth1Wrap > .menuDepth1").removeClass("on");
+ $(".menuDepth1Wrap > .menuDepth1").next().slideUp("fast");
+ $(this).next().slideToggle("fast");
+ $(this).toggleClass("on");
+ }
+ });
+ $(document).on("click",".tablet .menuDepth1Wrap > a",function(e){
+ e.preventDefault();
+ });
+
+ $(document).on("click",".btnClose, .menuWarp .menuDepth2Wrap a", function(e) {
+ $('.menuWarp .menuDepth1').removeClass('on');
+ $('.menuWarp .menuDepth2Wrap').hide();
+ $(".menuWarp").css("right", "-36rem");
+ $("html").removeClass("scrollDisable");
+ });
+ $(document).on("click",".closeBtn",function(){
+ $(".menuWarp").stop().animate({"right":"-36rem"}, { queue : true , duration : 500 , easing : 'easeInOutExpo'});
+ $("html").removeClass("scrollDisable");
+ });
+ $(document).on("click",".burgurBtn",function(){
+ $(".menuWarp").stop().animate({"right":"0"}, { queue : true , duration : 500 , easing : 'easeInOutExpo'});
+ $("html").addClass("scrollDisable");
+ });
+ }
+ targetSize = "tablet";
+
+ } else {
+ //데스크탑 class
+ body.className = "desktop";
+
+ if(targetSize != "desktop"){
+ menu_init();
+ $(document).on("mouseenter",".menuDepth1Wrap",function(){
+ $(this).find(".menuDepth2Wrap").css("display","block");
+ });
+ $(document).on("mouseleave",".menuDepth1Wrap",function(){
+ $(this).find(".menuDepth2Wrap").css("display","none");
+ });
+ $(document).on("click",".menuDepth1Wrap > a",function(){
+ location.href=$(this).data("url");
+ });
+ }
+ targetSize = "desktop";
+ }
+
+ $(document).on("click",".menuDepth1Wrap > .menuDepth1",function(){
+ window.dataLayer.push({
+ 'event': 'navigation',
+ 'event_category': 'Navigation',
+ 'event_action': 'Top menu',
+ 'event_label': $(this).data('dleventlabel')
+ });
+ printDL();
+ });
+ }
+ window.addEventListener("resize", handleWindowSize);
+ handleWindowSize();
+
+ function menu_init(){
+ $(document).off("mouseenter",".menuDepth1Wrap");
+ $(document).off("mouseleave",".menuDepth1Wrap");
+ $(document).off("click",".mobileCarlist > .mobilecarItem");
+ $(document).off("click",".menuDepth1Wrap > .menuDepth1");
+ $(document).off("click",".menuDepth1Wrap > a");
+ $(document).off("click",".closeBtn");
+ $(document).off("click",".burgurBtn");
+ $(".mobileCarlist > .mobilecarItem").removeClass("on");
+ $(".mobileCarlist > .mobilecarItem").find(".arrow").removeClass("on");
+ $(".mobileCarlist > .mobilecarItem").next().css("display","none");
+ $(".menuDepth1Wrap > .menuDepth1").removeClass("on");
+ $(".menuDepth1Wrap > .menuDepth1").next().css("display","none");
+ $(".menuWarp").stop().animate({"right":"-100%"}, { queue : true , duration : 500 , easing : 'easeInOutExpo'});
+ $("html").removeClass("scrollDisable");
+ }
+
+ initSwiper();
+
+ $(window).on('resize', function () {
+ ww = $(window).width();
+ initSwiper();
+ });
+
+
+ //자동차 번호/메뉴/로그인 선택 슬라이드
+ $(".carlist, .carItem, .menu > a, .user > a").on('mouseover focusin', function(){
+ $(this).addClass("on");
+ $(this).next('.carlistItem, .gnbMenu, .userMenu').addClass("on");
+ $(this).next('.carlistItem, .gnbMenu, .userMenu').on('mouseover focusin', function(){
+ $(this).addClass("on");
+ }).on('mouseleave',function(){
+ $(this).removeClass("on");
+
+ });
+ }).on('mouseleave',function(){
+ $(this).removeClass("on");
+ $(this).next('.carlistItem, .gnbMenu, .userMenu').removeClass("on");
+ $(this).parents('.carlist').removeClass("on");
+ });
+
+ $("#slide-open").click(function(){
+ if($("#burgur").hasClass("on")){
+ $("#burgur").removeClass("on");
+ $(".mMenuWarp").removeClass("on");
+ $(".logo").removeClass("on");
+ $("html").removeClass("scrollDisable");
+
+ } else{
+ $("#burgur").addClass("on");
+ $(".mMenuWarp").addClass("on");
+ $("html").addClass("scrollDisable");
+ $(".logo").addClass("on");
+ }
+ });
+
+ /*************************************
+ accordion
+ *************************************/
+ $(document).on("click", ".accordion dl", function(e) {
+ $(this).toggleClass("active");
+ $(this).find(">dd.a").slideToggle();
+ $(this).find(">dt.q").toggleClass("active");
+ if($('body>div.contentWarp').find('div.productView').length > 0 && $(this).hasClass('active')) {
+ window.dataLayer.push({
+ 'event': 'configurator',
+ 'event_category': 'Product',
+ 'event_action': 'Q&A',
+ 'event_label': 'Details',
+ 'customer_ID': ComUtils.getCookie('dlu') === null ? '' : ComUtils.getCookie('dlu'), //ID가 이메일 등의 개인정보일 경우 참고
+ 'fod_product': $('h1.productName').text(), // eg ‘Vehicle To Grid’
+ 'fod_qa_detail': $(this).find('dd.a>p').text().substr(0, 20),
+ 'fod_review_detail': undefined
+ });
+ }
+ else if($('body>div.contentWarp').find('div.faqWarp').length > 0 && $(this).hasClass('active')) {
+ window.dataLayer.push({
+ 'event': 'FAQ',
+ 'event_category': 'FAQ',
+ 'event_action': $('ul.tabList>li.on>a').text(), //eg '전체', '회원', '상품' …
+ 'event_label': $(this).find('dt>p>span').text().substr(0, 20), //eg'회원정보 수정은…'
+ 'customer_ID': ComUtils.getCookie('dlu') === null ? '' : ComUtils.getCookie('dlu') //ID가 이메일 등의 개인정보일 경우 참고
+ });
+ }
+ });
+
+ /*************************************
+ payment-history
+ *************************************/
+ $(document).on("click", ".openView", function() {
+ $(this).next().slideToggle();
+ $(this).toggleClass("active");
+ $(this).next().siblings(".payAll").slideUp();
+ });
+
+ //top 버튼
+
+ if ( $( this ).scrollTop() > 200 ) {
+ $( '.floating_menu' ).fadeIn();
+ } else {
+ $( '.floating_menu' ).fadeOut();
+ }
+
+ var flagScroll = true;
+ $( window ).scroll( function() {
+ if ( $( this ).scrollTop() > 400 ) {
+ $( '.floating_menu' ).fadeIn();
+ } else {
+ $( '.floating_menu' ).fadeOut();
+ }
+ //디스플레이테마 스크롤 시 스와이퍼 실행
+ if ( $( this ).scrollTop() > 400 ) {
+ if(flagScroll){
+ pdpDisplayThemeSwiper()
+ flagScroll = false;
+ }
+ }
+
+ });
+ $( '.floating_top' ).click( function() {
+ $( 'html, body' ).animate( { scrollTop : 0 }, 400 );
+ return false;
+ });
+
+ //푸터 페밀리사이트
+ const foot_famliy_btn = $(".familyBoxWarp").find(".btn-select");
+ foot_famliy_btn.on("click", function() {
+ $(".familyBoxWarp").find(".list-member").slideToggle("fast", function(){
+ foot_famliy_btn.toggleClass("on" , $(this).is(":visible"));
+ });
+ });
+
+ $('.familyBoxWarp .cont-select').on('click', 'li>a', function() {
+ $('.familyBoxWarp .list-member').hide();
+ $('.familyBoxWarp .btn-select').removeClass('on');
+ });
+
+ //문의하기 글자 수 제한
+ var maxInquiryContentsCount = 1000;
+ $('.inquiryContents').on('change keyup paste', function (e) {
+ let content = $(this).val();
+
+ if (content.length == 0 || content == '') {
+ $('.textCount').text('0/'+maxInquiryContentsCount);
+ } else {
+ $('.textCount').text(content.length+'/'+maxInquiryContentsCount);
+ }
+
+ if (content.length > maxInquiryContentsCount) {
+ $(this).val($(this).val().substring(0, maxInquiryContentsCount));
+ $('.textCount').text(maxInquiryContentsCount+'/'+maxInquiryContentsCount);
+ alert('글자수는 '+maxInquiryContentsCount+'자까지 입력 가능합니다.');
+ };
+ });
+
+ // 문의하기 이미지 미리보기
+ $('input[name="inquiryImgFile"]').change(function(){
+ let fileSize = $(this)[0].files[0].size;
+ let maxSize = 5 * 1024 * 1024;
+ let check = $(this)[0].files[0].type.match('.jpg|.jpeg|.gif|.png');
+ if (fileSize <= maxSize && check){
+ setImageFromFile(this, $(this).next().find('.inquiryImg'));
+ $(this).parent().next().css("display","block");
+ }
+ });
+
+
+
+ //PDP Display Theme
+
+
+
+
+});
+
+
+var flagAutoPlay = true;
+function pdpDisplayThemeSwiper(){
+ if ($('.pdpDisplayThemeSwiper').length > 0) {
+ var swiperTheme = new Swiper(".pdpDisplayThemeSwiper", {
+ slidesPerView: "auto",
+ loop:true,
+ freeMode: true,
+ autoplay: {
+ delay:1,
+ disableOnInteraction: true,
+ },
+ speed: 3000,
+ breakpoints: {
+ // when window width is >= 320px
+ 320: {
+ spaceBetween: 10,
+ },
+ // when window width is >= 480px
+ 480: {
+ },
+ // when window width is >= 640px
+ 640: {
+ spaceBetween: 20,
+ }
+ },
+ navigation: {
+ nextEl: ".displayTheme .swiper-button-next",
+ prevEl: ".displayTheme .swiper-button-prev",
+ },
+ on: {
+ init: function () {
+ },
+ },
+ });
+
+
+ $('.pdpDisplayThemeSwiper').hover(function(){
+ if(flagAutoPlay==true){
+ swiperTheme.autoplay.stop();
+ }
+ }, function(){
+ if(flagAutoPlay==true){
+ swiperTheme.autoplay.start();
+ }
+ });
+ }
+
+ flagScroll = false;
+}
+$(document).on("click", ".dtthumb", function() {
+
+ const dtlImgPath = $(this).attr("value");
+ const dtlImgs = $(".dtlImgs");
+ $(".dtthumb").removeClass("active");
+ $(this).addClass("active");
+
+ $('.dtlImgs .item').addClass('change')
+ setTimeout(function() {
+ $('.dtlImgs .item').removeClass('change')
+ }, 200);
+
+ $(".themeImg").each(function(e){
+ const idx = e+1;
+ const src = $(this).attr("src");
+ const lastIndex = src.lastIndexOf("/");
+ const pathWithoutFileName = src.substring(0, lastIndex);
+
+ $(this).attr("src", `${pathWithoutFileName}/${dtlImgPath}-${idx}.png`);
+ });
+ const visualBgSrc = $(".visualBg img").attr("src");
+ const visualBgLastIndex = visualBgSrc.lastIndexOf("/");
+ const visualBgPathWithoutFileName = visualBgSrc.substring(0, visualBgLastIndex);
+
+ $(".visualBg img").attr("src", `${visualBgPathWithoutFileName}/${dtlImgPath}_screen.jpg`);
+
+ flagAutoPlay = false;
+});
+
+//마이페이지 lnb 스와이프
+var ww = $(window).width();
+var mySwiper = undefined;
+var swiper = null;
+function initSwiper() {
+ if (ww < 800 && mySwiper == undefined) {
+ swiper = new Swiper(".lnbList", {
+ slidesPerView: "auto",
+ on: {
+ click: function(swiper) {
+ let getEventLabel = $('.lnbList>ul>li:nth-of-type('+(swiper.clickedIndex+1)+')>a').data('dleventlabel');
+ if (getEventLabel) {
+ myLnbTagManager(getEventLabel);
+ }
+
+ location.href = $('.lnbList > ul > li').eq(swiper.clickedIndex).find("a").attr('href');
+ }
+ }
+ });
+ } else if (ww >= 800 && mySwiper != undefined) {
+ mySwiper.destroy();
+ mySwiper = undefined;
+ }
+}
+
+// 마이페이지 태그매니저
+function myLnbTagManager(label) {
+ window.dataLayer.push({
+ 'event': 'navigation',
+ 'event_category': 'My page',
+ 'event_action': 'Left menu',
+ 'event_label': label, // eg 메뉴 순서대로 'Purchase history', 'Payment history', 'Wish list', 'Product review', 'Coupon details', 'Notices details', 'Inquiry details', 'My information'
+ 'customer_ID': undefined,
+ 'fod_product': undefined,
+ 'fod_review_detail': undefined
+ });
+}
+
+// 문의하기 이미지 미리보기
+function setImageFromFile(input, expression) {
+ if (input.files && input.files[0]) {
+ var reader = new FileReader();
+ reader.onload = function (e) {
+ $(expression).attr('src', e.target.result).attr('id', input.files[0].lastModified);
+ $(expression).closest('.imgItem').find('.delImg').data('index', input.files[0].lastModified);
+ }
+ reader.readAsDataURL(input.files[0]);
+ }
+}
+
+//레이어 팝업 오픈 스크립트
+function open_layer_popup(popid){
+ var popid = popid;
+ $("#"+popid).css("display","flex");
+ $("body").css("overflow","hidden");
+ $("body").css("touch-action","none");
+ $("#"+popid).stop().animate({"opacity":"1"}, { queue : true , duration : 450 , easing : 'easeInOutExpo'});
+ $("#"+popid+">.popInner").stop().animate({"top":"50%"}, { queue : true , duration : 450 , easing : 'easeInOutExpo'});
+};
+
+//레이어 팝업 클로즈 스크립트
+function close_layer_popup(popid){
+ var popid = popid;
+ $("#"+popid).stop().animate({"opacity":"0"}, { queue : true , duration : 200 , easing : 'easeInOutExpo', complete : function(){
+ $("#"+popid+">.popInner").css("top","53%");
+ $("#"+popid).css("display","none");
+ }});
+ $("body").css("overflow","auto");
+ $("body").css("touch-action","auto");
+};
+
+//[S]PDP 리뷰 더보기 관련
+more_contents_chk();
+function more_contents_chk(){
+ $('.reviewItem').each(function (index, item) {
+ if($(item).find(".contents").height() >= 74){
+ $(item).find(".contents").addClass('abstracted');
+ $(item).find(".contentMoreBtn").css("display","flex");
+ }
+ });
+}
+
+$(document).on("click", ".contentMoreBtn", function() {
+ if($(this).hasClass("active")){
+ $(this).parent().find(".contents").addClass("abstracted");
+ $(this).removeClass("active");
+ $(this).html("더보기");
+ }else{
+ $(this).parent().find(".contents").removeClass("abstracted");
+ $(this).addClass("active");
+ $(this).html("간단히");
+ }
+});
+// [E]PDP 리뷰 더보기 관련
+
+//PDP Lighting Pattern
+$(document).on("click", ".lpthumb", function() {
+ $(this).parent().find("li").removeClass("active");
+ $(this).addClass("active");
+
+ $(".lighting_pattern_movie").attr("src", $(this).attr("value"));
+ $(".lighting_pattern_movie").get(0).load();
+ let playPromise = $(".lighting_pattern_movie").get(0).play();
+});
+
+function XSS_Check(strTemp, level) {
+ let getType = typeof strTemp;
+ if (getType === 'object') {
+ strTemp = JSON.stringify(strTemp);
+ }
+
+ if (level == undefined || level == 0) {
+ strTemp = strTemp.replaceAll(/\<|\>|\"|\'|\%|\;|\(|\)|\&|\+|\-|\//g,"");
+ } else if (level != undefined && level == 1) {
+ strTemp = strTemp.replaceAll(/\/g, ">");
+ strTemp = strTemp.replaceAll(/\&/g, "&");
+ strTemp = strTemp.replaceAll(/\'/g, "'");
+ strTemp = strTemp.replaceAll(/\"/g, """);
+ strTemp = strTemp.replaceAll(/\(/g, "(");
+ strTemp = strTemp.replaceAll(/\)/g, ")");
+ strTemp = strTemp.replaceAll(/\//g, "/");
+ } else if (level != undefined && level == 2) {
+ strTemp = strTemp.replaceAll(/alert|window|document|eval|cookie|this|self|parent|top|opener|function|constructor|script|on|\-+\\<>=/gi,"");
+ }
+
+ if (getType === 'object') {
+ strTemp = JSON.parse(strTemp);
+ }
+ return strTemp;
+}
+
+function htmlDecode(input) {
+ var doc = new DOMParser().parseFromString(input, "text/html");
+ return doc.documentElement.textContent;
+}
+
+function getUrlParameter(sParam) {
+ let sPageURL = decodeURIComponent(window.location.search.substring(1)),
+ sURLVariables = sPageURL.split('&'),
+ sParameterName,
+ i;
+
+ for (i = 0; i < sURLVariables.length; i++) {
+ sParameterName = sURLVariables[i].split('=');
+
+ if (sParameterName[0] === sParam) {
+ return sParameterName[1] === undefined ? false : sParameterName[1];
+ }
+ }
+}
+
+function enterVideo() {
+ var playPromise = null;
+ if($(".withVideo").length > 0){
+ $(".withVideo").find("video").get(0).load();
+ $(".withVideo").find("video").get(0).currentTime = 0;
+ $(document).on("mouseenter",".withVideo",function(){
+ $(this).find(".productSmallVideo > img").stop().animate({"opacity":"0"}, { queue : true , duration : 300 , easing : 'easeInOutExpo'});
+ playPromise = $(this).find("video").get(0).play();
+ });
+ $(document).on("mouseleave",".withVideo",function(){
+ $(this).find(".productSmallVideo > img").stop().animate({"opacity":'1'}, { queue : true , duration : 300 , easing : 'easeInOutExpo', complete : function(){
+ if (playPromise !== undefined) {
+ playPromise.then(_ => {
+ $(this).parent().find("video").get(0).pause();
+ $(this).parent().find("video").get(0).currentTime = 0;
+ })
+ .catch(error => {
+ console.log(error);
+ });
+ }
+ }});
+ });
+ }
+}
+
+function dlLoginAttempt() {
+ window.dataLayer.push({
+ 'event': 'navigation',
+ 'event_category': 'Navigation',
+ 'event_action': 'Top menu',
+ 'event_label': 'Login/Register'
+ });
+ printDL();
+}
+
+$.fn.clearForm = function () {
+ return this.each(function () {
+ var type = this.type,
+ tag = this.tagName.toLowerCase();
+ if (tag === 'form') {
+ return $(':input', this).clearForm();
+ }
+ if (type === 'text' || type === 'password' || type === 'hidden' || tag === 'textarea') {
+ this.value = '';
+ } else if (type === 'checkbox' || type === 'radio') {
+ this.checked = false;
+ } else if (tag === 'select') {
+ this.selectedIndex = -1;
+ }
+ });
+};
\ No newline at end of file
diff --git a/product/pdp_display_theme.html b/product/pdp_display_theme.html
index 9c0803e..4177695 100644
--- a/product/pdp_display_theme.html
+++ b/product/pdp_display_theme.html
@@ -31,10 +31,10 @@
-
+
-
+
@@ -919,5 +919,8 @@
+