.icon {
    font-size: 14px; /* 아이콘 크기 */
    margin-left: 5px; /* 아이콘과 텍스트 간격 */
    cursor: pointer; /* 커서 변경 */
    color: #333; /* 아이콘 색상 */
}

td {
    position: relative; /* 이 줄 추가 */
}

.icon[data-tooltip]:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 80%; /* 아이콘 위에 툴팁 표시 */
    left: calc(50% - 10px); /* 중앙 정렬 */
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.9); /* 흰색 배경 */
    color: #333; /* 텍스트 색상 */
    padding: 8px;
    border-radius: 4px;
    white-space: nowrap;
    z-index: 10;
    border: 1px solid #333;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); /* 그림자 추가 */
    font-weight: bold;

}

button.button.close::after {
      content:none; 
}
button.button.button-close.close {
        padding: 10px;
    align-self: flex-end;
    background-color: transparent;
    box-shadow: none;
    color: #838282;
    margin-left:300px;
}

button.button.close {
  border: none;
    background-color: #4390DD;
    padding: 15px 18px 15px 18px;
    border-radius: 30px;
    font-size: 15px;
    font-family: 'Pretendard';
    color: #fff;
    box-shadow: 0 10px 25px rgba(60, 74, 86, 0.27);
    outline: none;
    cursor: pointer;
    width: 150px;

}
.dialog {
    padding: 0;
    border: none;
    border-radius: 6px;
    /*animation: appear .8s cubic-bezier(.77,0,.175,1) forwards;*/
    box-shadow: 0 25px 40px -20px #3c4a56;
    width: 400px;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    background: white;
}


    .dialog.ein {
        animation: appear .8s cubic-bezier(.77,0,.175,1) forwards;
        display: block;
    }

    .dialog.animate-out {
        animation: dissappear .8s cubic-bezier(.77,0,.175,1) forwards;
    }

    .dialog .inner {
        display: flex;
        flex-direction: column;
        color: #838282;
        text-align: center;
    }

    .dialog .close-btn {
        align-self: flex-end;
    }

    .dialog .content {
        padding: 0 16px 16px 16px;
    }

    .dialog .footer {
        padding: 16px;
        display: flex;
        justify-content: center;
        align-items: center;
    }
.overone {
    width: 100vw;
    height: 100vh;
    z-index: 9;
    position: fixed;
    top: 0;
    left: 0;
    background: rgba(0,0,0,.4);
    display: none;
}

    .overone.block {
        display: block;
    }

#privacy2 {
    margin-bottom:10px;
    width:600px;
}
.f_150 {
    border-bottom: 1px dashed #B6B6B6;
    padding:15px;

}
#overlay {
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

#popup {
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
    z-index: 1000;
    transition: opacity 0.3s ease;
    width: 700px;
    height:34%;
    opacity:1;
    max-width: 400px; /* 최대 너비 설정 */
}

label {
    margin-top: 15px; /* 레이블 간격 추가 */
    display: block; /* 레이블을 블록 요소로 설정 */
    left: 0;
    font-size: 16px;
    font-weight: 300;
    transform-origin: 0 0;
    transition: all 0.2s ease;
    font-family: 'Pretendard';
}

input[type="text"] {
    width: calc(100% - 20px); /* 입력창 너비 조정 */
    padding: 10px;
    margin-top: 5px; /* 입력창과 레이블 간격 추가 */
    border: 1px solid #ccc;
    border-radius: 10px;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.2); /* 입력창에 그림자 추가 */
    transition: border-color 0.3s;
}

input[type="text"]:focus {
    border-color: #007bff; /* 포커스 시 테두리 색상 변경 */
}

button.gopage2 {
    margin-top:5px;
    width: 49%;
    padding: 10px;
    border-radius: 10px;
    background: #4C92F1;
    color: #ffffff;
    grid-area: c;
    border: unset;
}
button.text_deco2 {
 border: none;
    border-bottom: 1px solid #9098a9;
    outline: none;
    font-family: 'Pretendard';
    background: #fff;
    font-size: 16px;
    font-weight: 300;
    color: #000;
}

.privacy {
    margin-top: 20px;
}

.button {
      width: 32.5%;
    padding: 20px;
    border-radius: 10px;
} 
       


.button:hover {
    background-color: #0056b3;
}

.modalpolicy {
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
}

.modal-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(55%, -50%);
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 400px; /* 최대 너비 설정 */
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
}

.modal-title-wrap {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: 18px;
    font-weight: bold;
}

.modal-close-wrap {
    cursor: pointer;
}

.modal-body-item {
    margin-top: 15px;
}

.modal-title-sub {
    font-weight: bold;
    margin-bottom: 5px;
}

.modal-body-content {
    margin-bottom: 15px;
}

.red_txt {
    color: red;
}

.dialog {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3);
    z-index: 1001;
    transition: opacity 0.3s ease;
}

.footer {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.button-close {
    padding: 10px 15px;
    background-color: #28a745;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

.button-close:hover {
    background-color: #218838;
}
.selected-service span {
    margin-right: 10px;
}

.add-btn,
.remove-count-btn{
    width: 15px; /* 고정된 너비 */
    height: 15px; /* 고정된 높이 */
    cursor: pointer;
    transition: background-color 0.3s;
}
.add-count {
    font-weight: bold;
}

/*타입별 색상*/
.tp_call {
    background: #04cfdc;
}

.tp_law {
    background: #4c92f1;
}

.tp_clean {
    background: #78aeff;
}

.tp_hotel {
    background: #85f1d7;
}

.tp_shop {
    background: #52d5f1;
}

.tp_it {
    background: #7bb7e2;
}

.tp_business {
    background: #8f80ef;
}



body {
    overflow-x: hidden;
}

.wrap {
    width: 100%;
    margin: auto;
    padding-bottom: 100px;
    margin-top: 150px;
}

section {
    width: 1200px;
    margin: auto;
    height: auto;
}

.template_sell {
    display: flex;
    justify-content: space-between;
}

    .template_sell > div {
        border-radius: 45px;
        width: 49%;
        box-shadow: 0 0 4px 4px rgb(0 0 0 / 5%);
        min-height: 670px;
        padding: 28px 25px;
        box-sizing: border-box;
    }
.tem_money{
    margin-top: 20px;
    display: flex;
    justify-content: space-between;
    padding: 20px 0;
    font-size: 20px;
    font-weight: 700;
    border-top: 2px solid #636363;
    border-bottom: 1px dashed #B6B6B6;
}

.sell_det {
    padding: 20px;
}

.sell_img {
    height: 500px;
    overflow: hidden;
    padding: 0 !important;
}

.img_scroll {
    width: 100%;
    height: 100%;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
}



    .img_scroll::-webkit-scrollbar {
        width: 15px;
        margin-right: 10px;
    }

    .img_scroll::-webkit-scrollbar-thumb {
        background-color: #cccccc;
        opacity: 0.3;
        border-radius: 10px;
        background-clip: padding-box;
        border: 2px solid transparent;
    }

    .img_scroll::-webkit-scrollbar-track {
        background-color: transparent;
        border-radius: 10px;
        box-shadow: inset 0px 0px 30px transparent;
    }

.sell_img img {
}

.sell_tit {
    padding: 0px 0 20px;
    border-bottom: 2px solid #636363;
}
.sell_pre_det {
    padding: 15px 0;
    margin-bottom: 20px;
    border-bottom: 1px dashed #B6B6B6;
}

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

    .mini_name p {
        color: #696969;
    }

.sell_tit ul {
    display: flex;
    margin: 10px 0;
}

.sell_tit ul li {
    padding: 5px 10px;
    border-radius: 50px;
    color: #ffffff;
    margin-right: 5px;
    font-size: 14px;
}


table tr td {
    height: 35px;
}

    table tr td:first-child {
        width: 125px;
        color: #676767;
    }

.sell_btnbox {
    padding: 20px 0 0 0;
    display: flex;
    justify-content: space-between;
    width: 100%;
}

    .sell_btnbox button {
        width: 32.5%;
        padding: 20px;
        border-radius: 10px;
    }

.demo1 {
    border: 1px solid #4C92F1;
    background: #ffffff;
    color: #4C92F1;
    grid-area: a;
}

.demo2 {
    background: #ffffff;
    border: 1px solid #4C92F1;
    color: #4C92F1;
    grid-area: b;
}

.gopage {
    background: #4C92F1;
    color: #ffffff;
    grid-area: c;
    border: unset;
}

/*공통 들어가는부분*/
.template_common {
    margin-top: 215px;
    width: 100%;
}

.template_common .common_area {
    text-align: center;
    width: 1200px;
    margin: auto;
    margin-bottom: 150px;
}

.common_area.gray {
    background: #F8F8FB;
    width: 100%;
    padding: 100px 0;
}

.common_area > p {
    font-size: 16px;
    color: #247CF4;
    font-weight: bold;
    margin-bottom: 20px;
}

.common_area > h3 {
    font-size: 30px;
    color: #000000;
    font-weight: bold;
}

    .common_area > h3 span {
        background: #247CF4;
        border-radius: 10px;
        padding: 5px 10px;
        color: #ffffff;
    }

.common_area > h5 {
    font-size: 16px;
    color: #656565;
    font-weight: 500;
    margin-top: 15px;
    line-height: 25px;
}

.common_table h3{
    text-align:start;
    width: 75%;
    margin: 65px auto 20px;
}

.common_table table{
    width: 900px;
    border-collapse: collapse;
    margin: auto;
    border-bottom: 1px solid #d5d5d5;
}

.common_table table tr td {
    width: 33.3%;
    height: 65px;
}

.common_table table thead tr{
    border-top:2px solid #d5d5d5;
    border-bottom:1px solid #d5d5d5;
    font-weight:bold;
}

.common_table table tr td{
    color: #6d6d6d;
    font-weight: bold;
}

.area_gray > p {
    font-size: 16px;
    color: #247CF4;
    font-weight: bold;
    margin-bottom: 20px;
}

.area_gray > h3 {
    font-size: 30px;
    color: #000000;
    font-weight: bold;
}

.area_gray > h5 {
    font-size: 16px;
    color: #656565;
    font-weight: 500;
    margin-top: 15px;
    line-height: 25px;
}


.common_service {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 20px;
    width: 80%;
    margin: auto;
    margin-top: 50px;
}

    .common_service img {
        width: 13%;
    }


.common_imgbox {
    margin-top: 50px;
}

    .common_imgbox img {
        border-radius: 30px;
        width: 1000px;
    }

.common_frontier {
    width: 1200px;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 50px;
    gap: 50px;
}

    .common_frontier > img {
        width: 600px;
    }

    .common_frontier ul li {
        text-align: start;
        color: #909090;
        margin-bottom: 30px;
        position: relative;
    }

        .common_frontier ul li:before {
            content: ' ';
            position: absolute;
            top: 6px;
            left: -20px;
            width: 7px;
            height: 7px;
            background: #ACC9FE;
        }



.common_process {
    width: 600px;
    margin: auto;
    margin-top: 50px;
}




/* 유료 부가서비스 선택 */
.service-option{

}
.service-option>p{
    font-weight: 600;
    margin-bottom: 10px;
}

.custom-select {
    position: relative;
    width: 100%;
}

.select-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border: 1px solid #DEDEDE;
    border-radius: 13px;
    cursor: pointer;
    color: #595959;
}

.select-box .arrow {
    font-size: 12px;
}

#service-list {
    display: none;
    list-style: none;
    padding: 0;
    margin: 0;
    border: 1px solid #ccc;
    position: absolute;
    width: 100%;
    background-color: white;
    z-index: 10;
    border-radius: 10px;
    border: 1px solid #DEDEDE;
}

#service-list li {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    cursor: pointer;
    border-radius: 10px;
    color: #595959;
}

#service-list li:hover {
    background-color: #f0f0f0;
}

#selected-services {
    display: flex;
    flex-wrap: wrap;
}
.selected-service {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    margin-top: 10px;
    border-radius: 30px;
    background: #F6F6F6;
    margin-right: 8px;
    color: #757575;
    font-size: 15px;
}

.remove-btn {
    cursor: pointer;
    color: #8B8B8B;
    margin-left: 10px;
    padding-bottom: 2px;
}






@media(max-width:1200px) {
    .template_sell {
        width: 90%;
    }

    .template_sell {
        gap: 3%;
    }

    .template_common .common_area {
        width: 90%;
    }

    .common_service {
        width: 100%;
    }

    .common_area.gray {
        width: 100%;
    }

    .common_frontier {
        width: 100%;
    }

    .template_sell {
        display: block;
    }
        .template_sell > div {
            width: 100%;
            min-height: 300px;
            margin-bottom: 20px;
        }
    .wrap {
        margin-top: 100px;
    }

}

@media(max-width:1000px) {

    .common_frontier {
        width: 100%;
        flex-direction: column;
    }

        .common_frontier ul {
            width: 545px;
            display: flex;
            flex-wrap: wrap;
        }

            .common_frontier ul li {
                margin-right: 50px;
            }

    .template_sell {
        flex-direction: column;
    }
    .common_table h3 {
        width: calc(100% - 30px);
    }
    .common_table table {
        width: calc(100% - 30px);
    }

}

@media(max-width:768px) {
    .template_sell {
        gap: 0;
    }

        .template_sell > div {
            width: 100%;
            padding: 0px;
        }

    .sell_det {
        padding: 20px !important;
        margin-top: 20px;
    }

    .sell_img {
        box-shadow: unset;
    }

    .common_process {
        width: 100%;
    }

    .template_common .common_area {
        margin-bottom: 88px;
    }

    .area_gray {
        width: 90%;
        margin: auto;
    }

    .common_frontier ul {
        width: 82%;
    }
}


@media(max-width:580px) {

    .wrap {
        margin-top: 90px;
    }

    .template_sell {
        width: 100%;
    }

    .sell_img {
        width: 96% !important;
        margin: auto;
    }

    .template_common {
        margin-top: 50px;
    }

    .common_area > p {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .common_area > h3 {
        font-size: 18px;
    }

    .common_area > h5 {
        font-size: 14px;
        line-height: 21px;
    }

    .common_area > h3 span {
        padding: 3px 4px;
    }

    .area_gray > p {
        font-size: 14px;
        margin-bottom: 8px;
    }

    .area_gray > h3 {
        font-size: 18px;
    }

    .area_gray > h5 {
        font-size: 14px;
    }

    .common_service img {
        width: 29%;
    }

    .sell_det {
        border-radius: 30px !important;
        box-shadow: 0px -8px 5px 0px rgb(233 233 233 / 50%) !important;
    }

    .template_sell > div {
        border-radius: 8px;
    }

    .sell_img {
        height: 300px !important;
        min-height: 300px !important;
    }

    .sell_tit ul li {
        font-size: 12px;
    }

    .mini_name h3 {
        font-size: 16px;
    }

    .mini_name p {
        font-size: 14px;
    }

    table {
        width: 100%;
    }

        table tr td {
            font-size: 14px;
            color: #7b7b7b;
        }

            table tr td:last-child {
                text-align: end;
            }


           .common_table table tr td:last-child{
                text-align:center;
            }

    .common_table h3 {
        font-size: 14px;
        width:100%;
    }
        .common_table table {
        width:100%;
    }
    .common_table table tr td{
         font-size: 12px;
         height: 45px;
    }
    .sell_btnbox button {
        padding: 14px;
    }

    .template_sell > div {
        height: auto;
    }

    table tr td:first-child {
        width: 100px;
    }


    .select-box, #service-list li {
        font-size: 14px;
    }
    .selected-service {
        font-size: 14px;
    }

}