/*     1366095 : HTML 편집기      */
.sub_page ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sub_page p {
    margin: 0;
}

.sub_page .tit_area .tit {
    margin-bottom: clamp(1.5rem, 1.8vw, 1.8rem);
}

.sub_prod {
    padding-bottom:var(--pdd-btt);
    position: relative;
}




/********************************* 탭 리스트 *********************************/

.sub_prod .tab-dep2 {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #242424;
    font-size: clamp(1rem, 1vw, 2rem);
    list-style: none;
    margin: 0;
    padding:0;
}


.sub_prod .tab-dep2 li {
    width: 33.333%;
    text-align: center;
}

.sub_prod .tab-dep2 li a {
    display: block;
    width: 100%;
 padding: clamp(1rem, 1.2vw, 3rem) 0;
 font-weight: 700;
}



/*
.sub_prod .tab-dep2 li:last-child a {
border-right:none;
}

.sub_prod .tab-dep2 a.active {
    opacity: 1;
    border-top: 3px solid var(--prm-clr);
    color: var(--prm-clr);
	background:var(--prm-clr);
color:#fff;
}

@media (min-width:768px) {
.sub_prod .tab-dep2 li:hover a{
    opacity: 1;
    border-top: 3px solid var(--prm-clr);
    color: var(--prm-clr);
	background:var(--prm-clr);
color:#fff;
}
}

*/




@media (max-width:767px) {
.sub_prod .tab-dep2 {flex-direction: column;}
.sub_prod .tab-dep2 li {width: 100%;}
.sub_prod .tab-dep2 li a {border-right:none; border-bottom:1px solid #a57a7a;}
}


/********************************* 탭 전체 표 *********************************/
.sub_prod .conts_area table {
    width: 100%;
}

.sub_prod .conts_area table tr * {
    border: 1px solid #efefef;
    text-align: center;
    padding: clamp(1rem, 1vw, 1.5rem) clamp(1rem, 1.5vw, 2rem);
    font-size: clamp(.95rem, .95vw, 2rem);
}


.sub_prod .conts_area table thead th {
    background: var(--prm-clr);
    color: #fff;
}

.sub_prod .conts_area table tbody th {
    background: #f9f9f9;
}

.sub_prod .conts_area table tbody td.prd_nm {
    color: var(--prm-clr);
    font-weight: 700;
}

.sub_prod .conts_area table tbody td.pt_bg {
    background: #fffaf3;
}

.sub_prod .conts_area .tb_wp3 thead th {
    background: #50246b;
}




/********************************* 탭1 특징 요약 *********************************/
.sub_prod .conts_area .feat_wrap {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin: clamp(2.5rem, 3.5vw, 5rem) 0;

}

.sub_prod .conts_area .feat_wrap .box {
    width: calc(25% - clamp(0.7rem, 1.5vw, 3rem));
    aspect-ratio: 4 / 3;
    border-radius: clamp(1rem, 1.4vw, 3rem);
    border: 1px solid #b92c2c4f;
    margin: clamp(0.1rem, 0.9vw, 3rem) 0;
    background: linear-gradient(0deg, #b92c2c0a 50%, transparent 50%);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding: clamp(1.4rem, 3vw, 4rem);

}

.sub_prod .conts_area .feat_wrap .box img {
    opacity: .3;
    padding-bottom: clamp(.2rem, 1.4vw, 2rem);
}

.sub_prod .conts_area .feat_wrap .box .cap {
    font-size: clamp(1rem, 1vw, 2rem);
    font-weight: 700;
    color: var(--prm-clr);

    text-align: center;
}




/********************************* 탭1 세차코스 *********************************/
.sub_prod .conts_area .course_wrap {
    margin: clamp(2.5rem, 5vw, 5rem) 0 0 0;
}




/********************************* 탭1 세차상세 *********************************/
.point_wrap {
    padding-top: clamp(2rem, 4rem, 6rem);
}


.sub_prod .fl_conts_area {
    margin: clamp(2.5rem, 4.2vw, 7rem) auto clamp(2.5rem, 4vw, 6rem);
}

.sub_prod .fl_conts_area .item {
    display: flex;
    justify-content: space-between;
    align-items: start;
    position: relative;

}

.sub_prod .fl_conts_area .item>div {
    width: 50%;
}

.sub_prod .fl_conts_area .item .img {
    position: sticky;
    top: 11%;
    left: 0;
}

.sub_prod .fl_conts_area .item .img img {
    width: 100%;
    aspect-ratio: 16/10;
    display: block;
    object-fit: cover;
    /*margin: 0 auto;*/
    border-radius: clamp(1rem, 1vw, 2rem);
}

.sub_prod .fl_conts_area .item .cap .c_inr {
    width: calc(50vw - ((100vw - var(--sb-max-width)) / 2));
    padding-right: clamp(3rem, 4vw, 5rem);
    margin-left: auto;
}

.sub_prod .fl_conts_area .item .cap .c_inr>p {
    font-size: clamp(.9rem, .88vw, 2rem);
    margin: clamp(0.6rem, 1vw, 2rem) 0 clamp(1.4rem, 1.4vw, 3rem);
}

.sub_prod .fl_conts_area .cap .h1 {
    font-weight: 700;
    font-size: clamp(1.1rem, 1.6vw, 3rem);
    text-transform: uppercase;
}

.sub_prod .fl_conts_area .cap .h1 span {
    font-size: .65em;
    color: var(--prm-clr);
    padding-right: clamp(1rem, 1vw, 2rem);
}

.sub_prod .fl_conts_area .cap .conts {
    margin-top: clamp(1rem, 2rem, 3rem);
}

.sub_prod .fl_conts_area .cap .conts p {
    font-size: clamp(.88rem, .88vw, 1.5rem);
    line-height: 1.7em;
}

.sub_prod .fl_conts_area .cap .conts>ul>li {
    background: linear-gradient(0deg, #f1eeee 50%, #f9f9f9 50%);
    padding: clamp(1.2rem, 3vw, 4rem);
    border-radius: clamp(1rem, 1vw, 2rem);
    margin: clamp(.8rem, 1vw, 2rem) 0;
    background: #f9f9f9;
}

.sub_prod .fl_conts_area .cap .conts>ul>li .subj {
    font-size: clamp(1rem, 1.2vw, 3rem);
    font-weight: 700;
    margin-bottom: clamp(0.7rem, 0.6vw, 2rem);
    margin-bottom: clamp(1rem, 1vw, 2rem);
}

.sub_prod .fl_conts_area .cap .conts ul ul {
    margin-top: clamp(1rem, 1.5vw, 2rem);
    display: flex;
    justify-content: space-between;
}

.sub_prod .fl_conts_area .cap .conts ul ul li {
    width: calc(33.333% - clamp(0.3rem, 0.3vw, 1rem));
    background: var(--prm-clr);
    color: #fff;
    padding: clamp(1rem, 1.3vw, 3rem);
    padding: clamp(0.7rem, 1vw, 2rem) clamp(1rem, 1.1vw, 3rem);
    text-align: center;
    border-radius: clamp(0.5rem, 0.5vw, 2rem);
    /*box-shadow: inset 5px 5px 2px 1px rgb(0 0 0 / 9%);*/
    font-size: clamp(.8rem, .8vw, 2rem);
    font-weight: 600;
    line-height: 1.3em;

    background: linear-gradient(0deg, #b92c2c0a 50%, #fff 50%);
    border: 1px solid #b92c2c4f;
    color: var(--prm-clr);
}

.sub_prod .fl_conts_area .cap .conts li p b {
    background: linear-gradient(transparent 50%, #ecdbff 50%);
}


.sub_prod .fl_conts_area .item.it1 {
    padding-top: clamp(2rem, 3vw, 4rem);
}

.sub_prod .fl_conts_area .item:not(:first-child) {
    padding-top: clamp(3rem, 4.5vw, 8.5rem);
}

.sub_prod .fl_conts_area .cap .conts ul ul.w-5 li {
    width: calc(50% - clamp(.3rem, .3vw, 1rem));
}



.sub_prod .fl_conts_area .item .image-wrapper {

    height: 570px;
}

.sub_prod .fl_conts_area .item .image-wrapper img {
    position: absolute;

    top: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    z-index: 1;
    transition: 1s;
}

.sub_prod .fl_conts_area .item .image-wrapper img.active {
    opacity: 1;
    z-index: 2;
    transition: 1s;
}


.sub_prod .fl_conts_area .item .image-wrapper img:first-child {
    opacity: 1;
    /* 첫 번째 이미지는 기본적으로 보이는 상태 */
}

@media (max-width:1440px) {
    .sub_prod .fl_conts_area {
        padding: 0 15px;
    }

    .sub_prod .fl_conts_area .item .cap .c_inr {
        width: 100%
    }
}

@media (max-width:1023px) {
    .sub_prod .fl_conts_area .item {
        flex-direction: column-reverse;
    }

    .sub_prod .fl_conts_area .item .img {
        position: relative;
        top: unset;
    }

    .sub_prod .fl_conts_area .item>div {
        width: 100%;
    }

    .sub_prod .fl_conts_area .item .img img {
        width: 100%;
    }

    .sub_prod .fl_conts_area .item .cap {
        margin-top: 20px;
    }

    .sub_prod .fl_conts_area .item .cap .c_inr {
        padding-right: 0
    }

    .sub_prod .fl_conts_area .item .cap .c_inr>p {
        margin-bottom: 0;
        font-size: clamp(1rem, 1vw, 2rem);
    }

    .sub_prod .fl_conts_area .cap .conts {
        margin-top: 0;
    }

    .sub_prod .fl_conts_area .item .image-wrapper img {
        position: relative;
        left: unset;
        transform: unset;
        opacity: 1
    }

    .sub_prod .fl_conts_area .item .image-wrapper {
        height: unset;
    }

    .sub_prod .fl_conts_area .item .image-wrapper img:first-child {
        margin-bottom: clamp(.95rem, 1vw, 2rem);
    }

}



/********************************* 탭2 주요기능 *********************************/
 .sub_prod #tab02 .conts_area .table_wrap {
  margin: clamp(2.5rem, 3.5vw, 5rem) 0;
}

/********************************* 탭3 주요기능 *********************************/
.sub_prod #tab03 .conts_area .table_wrap {
   margin: clamp(2.5rem, 3.5vw, 5rem) 0;
}



/********************************* 최상단 상품 이미지 *********************************/

.sub_prod .conts_area .img_wrap {
    position: relative;
    margin: clamp(0rem, 4vw, 6rem) 0 0;
    margin:0;
}


.sub_prod .conts_area .img_wrap .mySwiper {
    position: absolute;
    top: 0;
    z-index: 100;
    width: 100%;
    height: clamp(3rem, 4vw, 5rem);
}



.sub_prod .conts_area .img_wrap .mySwiper .swiper-slide .prod_name {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    color: #242424;
    font-size: clamp(1rem, 1vw, 2rem);

}

.sub_prod .conts_area .img_wrap .mySwiper .swiper-slide-thumb-active .prod_name {
    font-weight: 700;
    border-top: 3px solid var(--prm-clr);
    color: var(--prm-clr);
}



.sub_prod .conts_area .img_wrap .mySwiper .swiper-slide {
    cursor: pointer;
}

.sub_prod .conts_area .img_wrap .mySwiper2 {
    position: relative;
    z-index: 2;
    background: #f9f9f9;
    aspect-ratio: 16/8;
}



.sub_prod .conts_area .img_wrap .mySwiper2 img {
    width: 100%;
    object-fit: cover;
    height: 100%;
    background: #f9f9f9;
}

.swiper-button-next,
.swiper-button-prev {
    color: var(--prm-clr)
}






/********************************* 일부 공통 반응형 모아둠 *********************************/

@media (max-width:1023px) {

    /****************** 표 전체 ******************/
    .sub_prod .conts_area .table_wrap {
        width: 100%;
        overflow-x: scroll;
    }

    .sub_prod .conts_area .table_wrap table {
        width: 1023px;
    }
}


@media (max-width:767px) {

    /****************** 표 전체 ******************/
    .sub_prod .conts_area .table_wrap table {
        width: 100%;
    }

    /****************** 탭 1 특징 요약 ******************/
    .sub_prod .conts_area .feat_wrap .box {
        width: calc(50% - clamp(0.3rem, 1.2vw, 3rem));
    }


    /****************** 최상단 상품 이미지 ******************/
    .sub_prod .conts_area .img_wrap .mySwiper2 {
        aspect-ratio: 4/3;
    }

    .sub_prod .conts_area .img_wrap .mySwiper2 .swiper-slide {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .sub_prod .conts_area .img_wrap .mySwiper2 .typeD img {
        height: unset;
    }

    .sub_prod .swiper-button-next:after,
    .sub_prod .swiper-button-prev:after {
        font-size: 16px;
    }

    .sub_prod .conts_area .img_wrap .mySwiper {
        height: unset;
        position: relative;
    }

    .sub_prod .conts_area .img_wrap .mySwiper .swiper-wrapper {
        flex-direction: column;
    }

    .sub_prod .conts_area .img_wrap .mySwiper .swiper-wrapper .swiper-slide {
        width: 100% !important;
    }

    .sub_prod .conts_area .img_wrap .mySwiper .swiper-slide .prod_name {
        padding: 10px 0;
    }

    .sub_prod .conts_area .img_wrap .mySwiper .swiper-slide-thumb-active .prod_name {
        background: #f9f9f9;
    }

}



/* 25 11 18 최하단 영상 추가 a,d 타입 */
.sub_prod .conts_area .video_wrap {
    margin-top: clamp(1rem, 2vw, 2rem);
    aspect-ratio: 16/9;
}
.sub_prod .conts_area .video_wrap iframe {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}


/* 26 01 28 탭 수정 */
.sub_prod .tab-dep2 {justify-content: space-between; margin-bottom: clamp(2rem, 3vw, 3rem);}
.sub_prod .tab-dep2 li {width: 32.5%;}
.sub_prod .tab-dep2 li a {width: 100%;
background:var(--prm-clr);
color:#fff;
opacity:.6;
border-radius:8px;
    }

.sub_prod .tab-dep2 li a em {
    color: var(--prm-clr);
    font-size: clamp(1rem, 1.1vw, 1.1rem);
    background: #fff;
    font-style: normal;
    padding: 1px 3px;
    border-radius: 4px;
    margin-left: 5px;
}

.sub_prod .tab-dep2 li a.active {    opacity: 1;}



@media (max-width:767px) {
.sub_prod .tab-dep2 li {width:100%; margin-bottom:10px;}
.sub_prod .tab-dep2 li a {opacity:.3;}
}