/**
 * Created by PhpStorm.
 * Date         : 2025-09-15
 * Developer    : InSeok Yang
 * Description  : style.css
 * ⓒ 2025. WebPlanet Co. All Rights Reserved.
 */

/* ======================================================================================================== */
/*모달 슬라이드 리뉴얼 (25.09.11)*/
/* ======================================================================================================== */
.wp_solution #mdl_rnw01 {
    position: fixed;
    right: 6%;
    bottom: 5%;
    max-width: 400px;
    width: 100%;
    z-index: 99999;

}

.wp_solution #mdl_rnw01 .mdl_wrap {
}

.wp_solution #mdl_rnw01 .mdl_ir {
/*    box-shadow: 2px 2px 6px rgba(0, 0, 0, .16);*/
    background-color: unset;
    border-radius: 30px;
    background-color: #fff;
    overflow: hidden;
}

.wp_solution #mdl_rnw01 .mdl_ir .sd_area {
    /*min-height: 400px;*/
    overflow: hidden;
}

.wp_solution #mdl_rnw01 .mdl_ir .sd_area .sd_cont {
    position: relative;
    width: 100%;
}
.wp_solution #mdl_rnw01 .mdl_ir .sd_area .sd_cont .count{
    position: absolute;
    right: 15px;
    bottom: 15px;
    max-width: 50px;
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:2px;
    color:#fff;
    font-size: 13px;
    font-family: var(--font-prem);
    z-index: 10;
    border-radius: 15px;
    background-color: #707070;
}
.wp_solution #mdl_rnw01 .mdl_ir .sd_area .sd_cont .count .now_num{}
.wp_solution #mdl_rnw01 .mdl_ir .sd_area .sd_cont .count .slash{}
.wp_solution #mdl_rnw01 .mdl_ir .sd_area .sd_cont .count .total_num{}

.wp_solution #mdl_rnw01 .mdl_ir .sd_area .sd_cont .mdl_sd_rnw01 {
    display: none;
    width: 100%;
    background-color: unset;
}

.wp_solution #mdl_rnw01 .mdl_ir .sd_area .sd_cont .mdl_sd_rnw01 li {
    background-color: unset;
}
.wp_solution #mdl_rnw01 .mdl_ir .sd_area .sd_cont .mdl_sd_rnw01:not(.slick-initialized) .slick-slide {
    display: block; /* 또는 none, hidden 등 */
    height: auto;
    opacity: 0;
    visibility: hidden;
}

.your-slider-class.slick-initialized .slick-slide {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-in-out; /* 부드러운 전환 효과 */
}

.wp_solution #mdl_rnw01 .mdl_ir .sd_area .sd_cont .mdl_sd_rnw01 li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: unset;
    /*min-height: 420px;*/
}

.wp_solution #mdl_rnw01 .mdl_ir .sd_area .sd_cont .mdl_sd_rnw01 li a > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wp_solution #mdl_rnw01 .mdl_ir .mdl_info_area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 15px 25px;
    background-color: #F5F5F5;
}

.wp_solution #mdl_rnw01 .mdl_ir .mdl_info_area .chk_bx {
    display: flex;
    justify-content: center;
    align-items: center;
    gap:10px;
}

.wp_solution #mdl_rnw01 .mdl_ir .mdl_info_area .chk_bx > label {
    color: #929292;
    font-size: 14px;
    font-family: var(--font-prem);
}
.wp_solution #mdl_rnw01 .mdl_ir .mdl_info_area .chk_bx > label.chk_img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 23px;
    height: 23px;
    background-image: url(/_wp/app/popup/skin/wp_slide02/img/ico_rnw_chk01.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.wp_solution #mdl_rnw01 .mdl_ir .mdl_info_area .chk_bx > label.chk_txt{
    transition: 0.2s;
}

.wp_solution #mdl_rnw01 .mdl_ir .mdl_info_area .chk_bx > input[type=checkbox] {
    display: none;
}
.wp_solution #mdl_rnw01 .mdl_ir .mdl_info_area .chk_bx > input[type=checkbox]:checked ~ label.chk_img {
    background-image: url(/_wp/app/popup/skin/wp_slide02/img/ico_rnw_chk02.png);
}
.wp_solution #mdl_rnw01 .mdl_ir .mdl_info_area .chk_bx > input[type=checkbox]:checked ~ label.chk_txt {
    color:#333;
    transition: 0.25s;
}

.wp_solution #mdl_rnw01 .mdl_ir .mdl_info_area .btn_mdl_cls {
    font-size: 14px;
    font-family: var(--font-prem);
    letter-spacing: -1px;
}


@media (max-width: 576px) {
    .wp_solution #mdl_rnw01 {
        right: unset;
        bottom: unset;
        left: 50%;
        top: 50%;
        padding: 10px;
        transform: translate(-50%,-50%);
    }
}

/* ======================================================================================================== */



/* ======================================================================================================== */
/*모달 슬라이드 리뉴얼2 (25.09.11)*/
/* ======================================================================================================== */
.wp_solution #mdl_rnw02 {
    position: fixed;
    max-width: 400px;
    width: 100%;
    z-index: 99999;

}

.wp_solution #mdl_rnw02 .mdl_wrap {
}

.wp_solution #mdl_rnw02 .mdl_ir {
    box-shadow: 2px 2px 6px rgba(0, 0, 0, .16);
    background-color: unset;
    border-radius: 30px;
    background-color: #fff;
    overflow: hidden;
}

.wp_solution #mdl_rnw02 .mdl_ir .sd_area {
    /*min-height: 400px;*/
    overflow: hidden;
}

.wp_solution #mdl_rnw02 .mdl_ir .sd_area .sd_cont {
    position: relative;
    width: 100%;
}
.wp_solution #mdl_rnw02 .mdl_ir .sd_area .sd_cont .count{
    position: absolute;
    right: 15px;
    bottom: 15px;
    max-width: 50px;
    width: 100%;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap:2px;
    color:#fff;
    font-size: 13px;
    font-family: var(--font-prem);
    z-index: 10;
    border-radius: 15px;
    background-color: #707070;
}
.wp_solution #mdl_rnw02 .mdl_ir .sd_area .sd_cont .count .now_num{}
.wp_solution #mdl_rnw02 .mdl_ir .sd_area .sd_cont .count .slash{}
.wp_solution #mdl_rnw02 .mdl_ir .sd_area .sd_cont .count .total_num{}

.wp_solution #mdl_rnw02 .mdl_ir .sd_area .sd_cont .mdl_sd_rnw01 {
    display: none;
    width: 100%;
    background-color: unset;
}

.wp_solution #mdl_rnw02 .mdl_ir .sd_area .sd_cont .mdl_sd_rnw01 li {
    background-color: unset;
}
.wp_solution #mdl_rnw02 .mdl_ir .sd_area .sd_cont .mdl_sd_rnw01:not(.slick-initialized) .slick-slide {
    display: block; /* 또는 none, hidden 등 */
    height: auto;
    opacity: 0;
    visibility: hidden;
}

.your-slider-class.slick-initialized .slick-slide {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.5s ease-in-out; /* 부드러운 전환 효과 */
}

.wp_solution #mdl_rnw02 .mdl_ir .sd_area .sd_cont .mdl_sd_rnw01 li a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: unset;
    /*min-height: 420px;*/
}

.wp_solution #mdl_rnw02 .mdl_ir .sd_area .sd_cont .mdl_sd_rnw01 li a > img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.wp_solution #mdl_rnw02 .mdl_ir .mdl_info_area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 15px 25px;
    background-color: #F5F5F5;
}

.wp_solution #mdl_rnw02 .mdl_ir .mdl_info_area .chk_bx {
    display: flex;
    justify-content: center;
    align-items: center;
    gap:10px;
}

.wp_solution #mdl_rnw02 .mdl_ir .mdl_info_area .chk_bx > label {
    color: #929292;
    font-size: 14px;
    font-family: var(--font-prem);
}
.wp_solution #mdl_rnw02 .mdl_ir .mdl_info_area .chk_bx > label.chk_img{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 23px;
    height: 23px;
    background-image: url(/_wp/app/popup/skin/wp_slide02/img/ico_rnw_chk01.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}
.wp_solution #mdl_rnw02 .mdl_ir .mdl_info_area .chk_bx > label.chk_txt{
    transition: 0.2s;
}

.wp_solution #mdl_rnw02 .mdl_ir .mdl_info_area .chk_bx > input[type=checkbox] {
    display: none;
}
.wp_solution #mdl_rnw02 .mdl_ir .mdl_info_area .chk_bx > input[type=checkbox]:checked ~ label.chk_img {
    background-image: url(/_wp/app/popup/skin/wp_slide02/img/ico_rnw_chk02.png);
}
.wp_solution #mdl_rnw02 .mdl_ir .mdl_info_area .chk_bx > input[type=checkbox]:checked ~ label.chk_txt {
    color:#333;
    transition: 0.25s;
}

.wp_solution #mdl_rnw02 .mdl_ir .mdl_info_area .btn_mdl_cls {
    font-size: 14px;
    font-family: var(--font-prem);
    letter-spacing: -1px;
}



@media (max-width: 576px) {
    .wp_solution #mdl_rnw02 {
        left: 50% !important;
        padding:0 20px;
        transform: translateX(-50%);
    }
}

/* ======================================================================================================== */