/*     1373085 : HTML 편집기      */
.sub_prod {
    padding-bottom: var(--pdd-btt);
}

.sub_prod .flex {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sub_prod .conts_area:not(:last-child) {
    margin-bottom: clamp(4.5rem, 9vw, 13rem);
}

.sub_prod .conts_area .img_wrap {
    margin-bottom: clamp(1.5rem, 2.5vw, 4rem);
    display: flex;
    justify-content: space-between;
}

/*
.sub_prod .conts_area .img_wrap img {
    width: calc(33.333% - clamp(1rem, 1vw, 2rem));
    display: block;
    aspect-ratio: 3/3.5;
    box-shadow: 10px 10px 10px rgba(0,0,0,0.1);
    object-fit: cover;
}

 */

.sub_prod .subj {
    font-size: clamp(1.2rem, 1.5vw, 3rem);
    font-weight: 700;
    text-transform: uppercase;
}

.sub_prod .exp {
    font-size: clamp(.95rem, .95vw, 2rem);
}

.sub_prod .equip_area {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

}

.sub_prod .equip_area .subj {
    width: 100%;
    margin-bottom: clamp(1rem, 1vw, 2rem);
}

.sub_prod .equip_area .box {
    width: calc(25% - clamp(.5rem, .5vw, 1rem));
    text-align: center;
}

.sub_prod .equip_area .box .cap {
    font-size: clamp(.85rem, 1vw, 2rem);
    font-weight: 700;
    background: linear-gradient(0deg, #29554b 50%, #00725abd 50%);
    color: #fff;
    padding: clamp(.3rem, 1vw, 1rem);
    border: 1px solid #00ab87;
    border-radius: clamp(.4rem, 0.6vw, 2rem);
}

.sub_prod .item_wrap {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-top: clamp(1rem, 1vw, 3rem);
}

.sub_prod .item_wrap .item {
    width: calc(25% - clamp(0.4rem, 0.6vw, 2rem));
    border: 1px solid #b92c2c4f;
    margin: clamp(0.5rem, .4vw, 3rem) 0;
    padding: clamp(1rem, 2vw, 4rem) clamp(1rem, 1vw, 3rem);
    border-radius: clamp(1rem, 1vw, 2rem);
    background: linear-gradient(0deg, #b92c2c0a 50%, transparent 50%);
    display: flex;
    align-items: center;
}

.sub_prod .item_wrap .item.it5,
.sub_prod .item_wrap .item.it6,
.sub_prod .item_wrap .item.it7 {
    width: calc(33.333% - clamp(0.4rem, 0.6vw, 2rem));
}

.sub_prod .item_wrap .item .icon i {
    color: #ebc0c0;
    /* border: 1px solid red; */
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "Font Awesome 6 Free" !important;
    font-size: clamp(2.8rem, 3vw, 4rem);
}

.sub_prod .item_wrap .item .icon {
    width: 35%;
}

.sub_prod .item_wrap .item .cap {
    margin-left: clamp(0.5rem, 0.6vw, 5rem);
    width: 65%;
}

.sub_prod .item_wrap .item .subj {
    width: fit-content;
    padding: clamp(0.2rem, 0.2vw, 0.6rem) clamp(0.7rem, 0.9vw, 2.7rem);
    border: 2px solid var(--prm-clr);
    color: var(--prm-clr);
    text-transform: uppercase;
    font-weight: 700;
    border-radius: 100px;
    font-size: 12px;
    margin-bottom: clamp(.5rem, .9vw, 3rem);
    opacity: .7;
}

.sub_prod .item_wrap .item .conts {
    font-size: clamp(.95rem, .9vw, 2rem);
    line-height: 1.4;
}

.sub_prod .box:not(:last-child) {
    margin-bottom: clamp(2rem, 3vw, 5rem);
}

.sub_prod .ksk .box img {
    display: block;
    margin-top: clamp(1rem, 1vw, 3rem);
}

.sub_prod .rf .box {display: flex; justify-content: space-between;}
.sub_prod .rf .box > * {width: calc(50% - clamp(1rem, 1vw, 2rem));}
.sub_prod .rf .box .it1 {padding: clamp(2rem, 2vw, 3rem); background:#f9f9f9; border:1px solid #ddd; border-radius: clamp(1rem, 2vw, 3rem);}
.sub_prod .rf .box .it2 {background:#fff; border:1px solid #ddd; border-radius: clamp(1rem, 2vw, 3rem); overflow: hidden;}

.sub_prod .rf .box .it2 .rfcard {width: 100%; height: 100%;}

.sub_prod .rf .box .it2 .rfcard .swiper-wrapper {height: 100%; width: 100%;}
.sub_prod .rf .box .it2 .rfcard .swiper-slide {width: 100%; height: 100%;  display: flex; justify-content: center; align-items: center;}

/* 스와이퍼 */

.sub_prod .conts_area .img_wrap {
    position: relative;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}


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

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

.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(.7rem, 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 .mySwiper2 {
    position: relative;
    z-index: 2;


}

.sub_prod .conts_area .img_wrap .mySwiper2 .swiper-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background: #f9f9f9;
}


.sub_prod .conts_area .img_wrap .mySwiper2 img {
    object-fit: cover;

}

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

.sub_prod .ca2 ul {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 50%;
}

.sub_prod .ca2 ul li {
    font-size: clamp(1rem, 1vw, 2rem);
    border: 1px solid #ddd;
    padding: clamp(.5rem, .9vw, 2rem);
    padding-left: clamp(2rem, 2vw, 3rem);
    margin: 10px 0;
    width: 100%;
    border-radius: clamp(1rem, 1vw, 2rem);
    background: linear-gradient(0deg, #0000000a 50%, transparent 50%);
}

.sub_prod .ca2 ul li:before {
    content: "\2022";
    color: #0d8181;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.sub_prod .ca2 .img {
    flex-shrink: 0;
}





@media (max-width:1440px) {

}

@media (max-width:1023px) {
    .sub_prod .flex {
        display: block;
    }

    .sub_prod .ca2 ul {
        width: 100%;
    }

    .sub_prod .ca2 .img {
        display: flex;
        width: 100%;
    }

    .sub_prod .ca2 .img img {
        width: 50%;
    }
    .sub_prod .ca2 ul li {border-radius: 10px;}
}

@media (max-width:767px) {

    .sub_prod .item_wrap .item,
    .sub_prod .item_wrap .item.it5,
    .sub_prod .item_wrap .item.it6,
    .sub_prod .item_wrap .item.it7 {
        width: 100%;
    }

    .sub_prod .equip_area .box {
        width: calc(50% - clamp(.5rem, .5vw, 1rem));
    }

    .sub_prod .rf .box {
        flex-direction: column;
    }

    .sub_prod .rf .box > * {
        width: 100%;
    }

    .sub_prod .rf .box .it1 {
        margin-bottom: clamp(1rem, 1vw, 2rem);
    }

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


}