/* solution_01.html */
.bottom_row {display:flex;flex-direction:column;gap:20px;}
.top_row {display:flex;gap:20px;align-items:stretch;}
.function_card {flex:1 1 25%;max-width:25%;background:#fff;border-radius:12px;padding:25px;margin-top:20px;box-shadow:0 2px 6px rgba(0,0,0,0.15);cursor:pointer;position:relative;transition:all 0.3s ease;display:flex;flex-direction:column; }
.more_btn {display:none;}
.function_image{margin-top:20px;flex:1 1 75%;max-width:75%;display:flex;background:#f9fafb;border-radius:12px;padding:25px;box-shadow:0 2px 6px rgba(0,0,0,0.15);align-items:center;justify-content:center;position:relative;}
.function_image img{width:100%;height:100%;border-radius:8px;}

.title_row{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.title_tit{font-size:18px;line-height:1.4;}
.icon_wrap{position:relative;width:70px;height:45px;display:flex;align-items:center;justify-content:center;}
.icon_wrap::before{content:'';position:absolute;width:55px;height:55px;border-radius:50%;background:#eaf2ff;z-index:0;}
.icon_wrap img{width:24px;height:24px;z-index:1;position:relative;}
.tit_list{list-style:none;padding:0;margin:0;text-align:left;}
.tit_list li{position:relative;font-weight:700;color:#222;margin-top:15px;margin-bottom:5px;padding-left:16px;}
.tit_list li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:#3b82f6;}
.tit_list p{margin:0 0 10px 16px;font-size:14px;line-height:1.6;color:#444;text-align:left;}
.prev_btn,.next_btn{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;background:rgba(0,0,0,0.65);color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;z-index:20;transition:all 0.25s ease;box-shadow:0 3px 6px rgba(0,0,0,0.4);}
.prev_btn{ left:5px; }
.next_btn{ right:5px; }

/* 모달 배경 */
#image_modal{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.8);justify-content:center;align-items:center;z-index:999;flex-direction:row;}
#modal_close{position:absolute;top:20px;right:30px;font-size:30px;color:#fff;cursor:pointer;user-select:none;}
#modal_img{max-width:90%;max-height:90%;border-radius:8px;box-shadow:0 4px 20px rgba(0,0,0,0.5);object-fit:contain;}
#modal_prev,#modal_next{position:absolute;top:50%;transform:translateY(-50%);font-size:30px;color:#fff;background:none;border:none;cursor:pointer;user-select:none;padding:10px;}

/* 좌우 위치 */
#modal_prev{ left:30px; }
#modal_next{ right:30px; }


@media screen and (max-width:768px){
  .bottom_row .top_row .function_card {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    padding:20px;
  }

  .bottom_row .top_row .function_image {
    flex:1 1 100% !important;
    max-width:100% !important;
    padding:15px;
  }

  .bottom_row, .top_row {
    gap:15px;
    flex-wrap:wrap;
  }

  .tit_list li{
    font-size: 16px;
  }

}

/* solution_02.html */
.function_wrap2{display:flex;flex-wrap:wrap;gap:20px;margin-top:15px;}
.function_card2{flex:0 0 calc(25% - 20px);max-width:calc(25% - 20px);background:#fff;border-radius:12px;padding:25px;box-shadow:0 2px 6px rgba(0,0,0,0.15);cursor:pointer;position:relative;display:flex;flex-direction:column;}
.title_row2{display:flex;align-items:center;gap:10px;margin-bottom:12px;}
.title_tit2{font-size:18px;line-height:1.4;}
.icon_wrap2{position:relative;width:70px;height:45px;display:flex;align-items:center;justify-content:center;}
.icon_wrap2::before{content:'';position:absolute;width:55px;height:55px;border-radius:50%;background:#eaf2ff;z-index:0;}
.icon_wrap2 img{width:24px;height:24px;position:relative;z-index:1;}
.tit_list2{list-style:none;padding:0;margin:0;text-align:left;}
.tit_list2 li{position:relative;font-weight:700;color:#222;margin-top:15px;margin-bottom:5px;padding-left:16px;}
.tit_list2 li::before{content:'';position:absolute;left:0;top:8px;width:6px;height:6px;border-radius:50%;background:#3b82f6;}
.tit_list2 p{margin:0 0 10px 16px;font-size:14px;line-height:1.6;color:#444;text-align:left;}

.function_wrap_img{display:flex;border-radius:16px;overflow:hidden;margin-top:0;margin-right:10px;}
.function_section{flex:1;padding:40px;display:flex;flex-direction:column;align-items:center;padding-bottom:0;}
.function_divider{width:1px;background:#e3e3e3;}
.function_card_img{position:relative;width:500px;height:400px;}
.img_area{position:relative;width:550px;height:450px;}
.tit_list2.sol_img{margin-top:10px;}
.img_card{background:#fff;border-radius:12px;padding:25px;box-shadow:0 2px 6px rgba(0,0,0,0.15);cursor:pointer;position:absolute;transition:all 0.6s ease;}
.img_card.img_01{width:400px;height:auto;top:0;left:0;z-index:1;}
.img_card.img_02{width:400px;height:auto;top:140px;left:120px;z-index:2;}

 @media screen and (max-width: 768px) {
    .tit_list2 li{
        font-size: 16px;
    }

    .function_wrap2 {
        flex-direction: column; 
        gap: 20px;
    }

    .function_card2 {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 25px 15px;
        align-items: center; 
        text-align: center;
    }

    .function_wrap_img {
        flex-direction: column;
        margin-right: 0;
        gap: 50px; 
    }

    .function_divider {
        display: none !important; 
    }

    .function_section {
        padding: 20px 0; 
        width: 100%;
        flex: none; 
    }


    .function_card_img, 
    .img_area {
        width: 100%;
        height: auto; 
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 15px; 
    }


    .img_card {
        position: relative !important; 
        top: 0 !important;
        left: 0 !important;
        width: 100% !important; 
        max-width: 380px; 
        margin: 0 auto;
        padding: 15px;
        box-sizing: border-box;
    }

    .img_card img {
        width: 100%;
        height: auto;
    }

    .tit_list2.sol_img {
        margin-top: 25px;
        padding-left: 0;
    }

.tit_list2.sol_img li {
    padding-left: 16px; 
    text-align: left;  
    display: block;
}

.tit_list2.sol_img li::before {
    display: block !important;
    position: absolute;
    left: 0;
    top: 8px; 
}
}