/* 상단검색 */
.top-search-wrap{
    /*margin-top : 70px;*/
}

.top-search-wrap .searchForm .input-search{
    font-size : 14px;
}

.top-search-wrap .searchForm .input-search-wrap{
    max-width : 672px;
    width : 95%;
    height : 40px;
    margin : 0 auto 20px;
}


/* 시술선택 */
.select-surgery-wrap{
    max-width : 672px;
    width : 95%;
    margin : 0 auto 60px;

}

.select-surgery-wrap > ul{
    display : grid;
    grid-template-columns: repeat(4, 1fr);
    gap : 16px;
}

.select-surgery-wrap > ul > li button{
    border: 1px solid rgba(0,0,0,0.12);
    height : 40px;
    color : rgba(0,0,0,0.6);
    width: 100%;
    border-radius: 4px;
    transition: 0.3s;
    position: relative;
}
.select-surgery-wrap > ul > li button:hover{
    border: 1px solid rgba(0,0,0,0.12);
    color : #3a4c40;
    background-color: rgba(58,76,64,0.1);
}
.select-surgery-wrap > ul > li .btn-green{
    /*background-color: rgba(58,76,64,0.12);*/
    /*color: #3a4c40;*/
    background-color: #3a4c40;
    color: #ffffff;
}

.select-surgery-wrap > ul > li .btn-gray::after{
content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    border-radius: 50%;
    top: -10px;
    right: -10px;
    border: 1px solid #efefef;
    background: url("../images/icons/heart-outline-green.svg") no-repeat center / cover;
}



/* 시술상세 */
.surgery-detail-wrap{
background-color: #fafafa;
    border-top: 1px solid #ededed;
}

.surgery-detail-wrap .surgery-num{
    /*position : absolute;*/
    /*left : 10px;*/
    /*top : 20px;*/
    border-bottom: 1px solid #efefef;
    padding: 0 20px 20px 20px;
    margin: 0 0 20px 0;
    background-color: #ffffff;
    /*border-radius: 0 0 16px 16px;*/
    font-size: 16px;
    font-weight: 700;
    color: #3a4c40;
}

.surgery-detail-wrap > ul > li{
    border : 1px solid #f7f7f7;
    padding: 16px 24px;
    max-width: 844px;
    border-radius: 4px;
    width: 95%;
    margin: 0 auto 8px;
    display: grid;
    grid-template-areas:
        "title title"
        "sub sub"
        "spec spec"
        "turn btn"
        "price btn";
    grid-template-columns: 4fr 1fr;
    align-items: center;
    row-gap: 8px;
    column-gap: 16px;
    background-color: #FFFFFF;
    box-shadow: 0px 3px 9px rgba(0,0,0,0.05);
    transition: 0.2s;
}
/*.surgery-detail-wrap > ul#evtDet1Ul > li{*/
/*    padding: 32px 24px;*/
/*    background-color: #ffffff;*/
/*    border: 1px solid #f7f7f7;*/
/*    max-width: 844px;*/
/*    border-radius: 16px;*/
/*    width: 95%;*/
/*    margin: 0 auto 33px;*/
/*    display: grid;*/
/*    grid-template-areas:*/
/*        "title title"*/
/*        "content btn"*/
/*        ;*/
/*    grid-template-columns: 4fr 1fr;*/
/*    align-items: center;*/
/*    row-gap: 8px;*/
/*    column-gap: 16px;*/
/*    box-shadow: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;*/
/*    transition: 0.2s;*/
/*}*/
/*.surgery-detail-wrap > ul#evtDet1Ul > li .event-title{*/
/*    padding: 10px 0;*/
/*    color: #1c1c1c;*/
/*    font-size: 16px;*/
/*    font-weight: 700;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: flex-start;*/
/*    margin-bottom: 0;*/
/*    grid-area: title;*/
/*    border-bottom: 1px solid #767676;*/
/*    flex-wrap: wrap;*/
/*    row-gap: 8px;*/
/*}*/
/*.surgery-detail-wrap > ul#evtDet1Ul > li .event-content{*/
/*    font-size: 14px;*/
/*    font-weight: 300;*/
/*    margin-bottom: 0;*/
/*    color: #767676;*/
/*    grid-area: content;*/
/*}*/
/*.surgery-detail-wrap > ul#evtDet1Ul > li .btn-wrap{*/
/*    display: flex;*/
/*    flex-wrap: wrap;*/
/*    justify-content: center;*/
/*    grid-area: btn;*/
/*    row-gap: 10px;*/
/*}*/
/*.surgery-detail-wrap > ul#evtDet1Ul > li .btn-wrap .event-num {*/
/*    width: 100%;*/
/*    text-align: center;*/
/*}*/
/*.surgery-detail-wrap > ul#evtDet1Ul > li .btn-wrap button {*/
/*    width: 107px;*/
/*    height: 40px;*/
/*    border-radius: 40px;*/
/*    background-color: #1c1c1c;*/
/*    color: #fff;*/
/*    font-size: 14px;*/
/*}*/
.surgery-detail-wrap > ul > li:hover{
    /*box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px;*/
    border: 1px solid #e6e6e6;
}

.surgery-detail-wrap .surgery-detail-title{
    font-size : 20px;
    line-height : 27px;
    color : #1c1c1c;
    grid-area: title;
    font-weight: 700;
}
.surgery-detail-wrap > ul > li .info{
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 8px;
    grid-area: title;
    justify-content: center;
    align-items: center;
    padding-top: 40px;
}
.surgery-detail-wrap > ul > li .info p i{
    width: 32px;
    height: 32px;
    margin-bottom: 16px;
}
.surgery-detail-wrap > ul > li .info p:nth-child(2){
    font-size: 24px;
    font-weight: 700;
}

/*.surgery-detail-wrap .surgery-detail-sub{*/
/*    font-size : 16px;*/
/*    line-height : 19px;*/
/*    color : #767676;*/
/*    font-weight : 300;*/
/*    max-width : 602px;*/
/*    width : 95%;*/
/*    padding-bottom : 16px;*/
/*    grid-area: sub;*/
/*}*/
.surgery-detail-wrap .surgery-detail-sub{
    border-bottom: 1px solid #efefef;
    padding-bottom: 8px;
    /*margin-top: 8px;*/
    color: #767676;
    grid-area: sub;
}
.surgery-detail-wrap .surgery-detail-turn{
    display : grid;
    grid-template-columns: repeat(5, 1fr);
    gap : 16px 8px;
    max-width : 632px;
    width : 95%;
    padding-top : 16px;
    padding-bottom : 16px;
    margin-bottom : 16px;
    border-top : 1px solid #efefef;
    border-bottom : 1px solid #efefef;
}
.surgery-detail-wrap .surgery-detail-turn-specific{
    grid-area: spec;
    width: 100%;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    border-bottom: 1px solid #efefef;
    padding-bottom: 8px;
}
.surgery-detail-wrap .surgery-detail-turn-specific .turn-specific{
    max-width: calc((100% - 32px)/5);
    padding: 8px 16px;
    border-radius: 20px;
    border: 1px solid #777777;
    font-size: 14px;
    font-weight: 500;

}
.surgery-detail-wrap .event-detail-turn{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    grid-area: turn;
}
.surgery-detail-wrap .event-detail-turn .btn-turn{
    width: calc((100% - 64px)/5);
}
.surgery-detail-wrap .btn-turn{
    width : 120px;
    height : 40px;
    font-weight : 300;
    color : #1c1c1c;
    border : 1px solid #efefef;
    border-radius: 4px;
}
.surgery-detail-wrap .btn-turn.active{
border: 1px solid #1c1c1c;
    color: #3a4c40;
    font-weight: 500;
}
.surgery-detail-wrap .surgery-detail-turn .btn-turn{
    width: calc((100% - 80px)/5);
}

.surgery-detail-wrap .btn-turn.disabled{
    background-color : #f7f7f7;
    color : #767676;
}
.surgery-detail-wrap .btn-turn.active.disabled{
    border: 1px solid #1c1c1c;
    color: #3a4c40;
    font-weight: 500;
}
.surgery-detail-wrap .surgery-detail-price{
    grid-area: price;
    display: grid;
    gap: 8px;
    align-items: center;
    grid-template-areas: "ori ..."
                        "sale select";
    grid-template-columns: 1fr 1.5fr;
}
.surgery-detail-wrap .event-detail-price{
    grid-area: price;
    display: grid;
    gap: 8px;
    align-items: center;
    grid-template-areas: "ori ..."
                        "sale select";
    grid-template-columns: 1fr 1.5fr;
}

.event-detail-period {
    margin-bottom: 16px;
}

.surgery-detail-wrap .origin-price{
    color : #767676;
    font-weight: 300;
    grid-area: ori;
}

.surgery-detail-wrap .origin-price > span{
    font-weight: 400;
    text-decoration: line-through;
}


.surgery-detail-wrap .sales-price{
    color : #1c1c1c;
    font-size : 16px;
    font-weight : 700;
    grid-area: price;
    grid-area: sale;
}

.surgery-detail-wrap .sales-price > span{
    font-size : 20px;
    font-weight : 500;
}

.surgery-detail-wrap .discount{
    margin-left : 33px;
    font-size : 20px;
    color : 
    #b3261e;
    font-weight : 500;
}

.surgery-detail-wrap .select-surgery > span{
    display : inline-block;
    /*width : 120px;*/
    height : 40px;
    line-height : 40px;
    text-align: center;
    color : #767676;
}
.select-surgery{
    display: flex;
    align-items: center;
    gap: 8px;
    grid-area: select;
}
.surgery-detail-wrap .select-surgery select{
    width : 252px;
    height : 40px;
    border : 1px solid #ededed;
    border-radius : 8px;
    padding : 11px 16px;
}

/* 화살표 커스텀 */
.surgery-detail-wrap .select-surgery select{
    -webkit-appearance:none; /* for chrome */
    -moz-appearance:none; /*for firefox*/
    appearance:none;
    background-image : url('../images/icons/arrow-down-gray.svg');
    background-repeat : no-repeat;
    background-size  : 13px 7.5px;
    background-position : center right 14px;
}

.surgery-detail-wrap .select-surgery select::-ms-expand{
    display:none;/*for IE10,11*/
}

.surgery-detail-wrap .btn-wrap{
    width: 100%;
    grid-area: btn;
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: center;
    align-items: center;
}
.surgery-detail-wrap .btn-wrap div{
    width: 100%;
}
.surgery-detail-wrap .btn-wrap > div:first-child{
    text-align: center;
}

.surgery-detail-wrap .btn-more{
    /*font-family: 'Noto Sans KR', sans-serif;*/
    font-size : 15px;
    color : #1c1c1c;
    text-align: center;
    text-decoration: underline;
}

.surgery-detail-wrap .btn-more .icon.search-detail{
    width : 20px;
    height : 20px;
    margin-right : 8px;
}

.surgery-detail-wrap .btn-cart{
    width : 107px;
    height : 40px;
    border-radius : 40px;
    background-color : #1c1c1c;
    color : #fff;
    font-size : 16px;
    /*font-family: 'Noto Sans KR', sans-serif;*/
    margin-top : 6px;
    transition: 0.3s;
}
.surgery-detail-wrap .btn-cart:hover{
    background-color: #3c3c3c;
}

.surgery-detail-wrap .btn-consult{
    height : 60px;
    /*width: calc(100% - 20px);*/
    width: 100%;
    background-color : #1c1c1c;
    color : #fff;
    font-size : 16px;
    font-weight : 500;
    margin : 0;
    border-radius: 8px;
}
.surgery-detail-wrap .btn-consult:hover{
    background-color: #3c3c3c;
}

.surgery-detail-wrap .btn-consult-wrap{
    text-align: center;
}


@media screen and (max-width : 1068px){
    .surgery-detail-wrap .surgery-detail-title{
        font-size : 18px;
    }
    .surgery-detail-wrap .surgery-num{
        padding: 20px 30px;
    }
    .select-surgery-wrap > ul > li button:hover{
        border: 1px solid rgba(0,0,0,0.12);
        background-color: #3a4c40;
        color: #ffffff;
    }
}

@media screen and (max-width : 768px){
    .surgery-detail-wrap .surgery-detail-title{
        font-size : 16px;
        line-height: normal;
        margin-bottom: 0;
    }
    .surgery-detail-wrap .surgery-detail-turn-specific .turn-specific{
        white-space: nowrap;
        max-width: calc((100% - 16px) / 3);
    }
    .surgery-detail-wrap .surgery-detail-sub{
        width: 100%;
        font-size : 14px;
    }

    .surgery-detail-wrap .select-surgery{
        /*display : grid;*/
        /*!*grid-template-columns: repeat(1,1fr);*!*/
        /*width : 100%;*/
    }

    .surgery-detail-wrap .surgery-detail-price{
        border-top : 0;
        flex-direction: column-reverse;
        align-items: flex-start;
        grid-template-areas: "ori ori"
                            "sale sale"
                           "select select";
    }
    .surgery-detail-wrap .event-detail-price{
        border-top : 0;
        flex-direction: column-reverse;
        align-items: flex-start;
        grid-template-areas: "ori ori"
                            "sale sale"
                           "select select";
    }

    .surgery-detail-wrap .sales-price > span{
        font-size : 16px;
    }

    .surgery-detail-wrap .btn-consult{
        font-size : 18px;
    }

    .surgery-detail-wrap .select-surgery > span{
        width : auto;
        height : auto;
        margin-bottom : 4px;
        text-align: left;
        line-height : initial;
        font-size : 14px;
    }

    .surgery-detail-wrap .select-surgery select{
       max-width : 300px;
        /*margin-bottom : 15px;*/
    }

    .surgery-detail-wrap .btn-wrap{
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        /*flex-direction: row;*/
    }


    .surgery-detail-wrap .sales-price{
        font-size : 14px;
    }

    .select-surgery-wrap > ul{
        gap : 8px;
    }

    .top-search-wrap .searchForm .input-search{
        font-size : 14px;
    }
    .surgery-detail-wrap > ul > li{
        grid-template-areas:
        "title title"
        "sub sub"
        "spec spec"
        "turn turn"
        "price btn";
        grid-template-columns: 2fr 1fr;
        align-items: center;
        row-gap: 8px;
        column-gap: 16px;
        width: 100%;
    }
    .surgery-detail-wrap .event-detail-turn{
        gap: 8px;
    }
    .surgery-detail-wrap .event-detail-turn .btn-turn{
        width: calc((100% - 24px)/4);
    }
}

@media screen and (max-width : 480px){
    .surgery-detail-wrap > ul{
        padding: 20px 10px;
    }
    .surgery-detail-wrap .sales-price{
        font-size : 14px;
    }

    .surgery-detail-wrap .sales-price > span{
        font-size : 14px;
        font-weight : 600;
    }

    .surgery-detail-wrap .btn-more{
        font-size : 14px;
    }

    .surgery-detail-wrap .btn-cart{
        width : 100%;
        height : 40px;
        padding: 0 20px;
        font-size : 14px;
        font-weight : 400;
        margin-top : 0;
    }
    .surgery-detail-wrap > ul > li {
        grid-template-areas:
        "title title"
        "sub sub"
        "turn turn"
        "price price"
    "btn btn";
        grid-template-columns: 1fr 1fr;
        padding: 20px 10px;
        width: 100%;
    }
    .event-list li{
        grid-template-areas: "title title"
                                "content content"
                            "period period"
                            "btn btn";
    }
    .event-list .btn-wrap button{
        width: 100%;
    }
    .surgery-detail-wrap .select-surgery{
        width: 100%;
flex-direction: column;
        justify-content: flex-start;
        align-items: flex-start;
    }
    .surgery-detail-wrap .select-surgery span{
        word-break: keep-all;
    }
    .surgery-detail-wrap .select-surgery select{
        width: 100%;
    }
    .surgery-detail-wrap .surgery-detail-price{
        gap: 8px;
    }
    .surgery-detail-wrap .btn-wrap{
        flex-direction: row;
        justify-content: space-between;
        margin-top: 16px;
    }
    .surgery-detail-wrap .event-detail-turn .btn-turn{
        width: calc((100% - 16px)/3);
    }
    .surgery-detail-wrap > ul > li .info p:nth-child(2){
        font-size: 16px;
    }
}