@movvjs/svelte-schedule-view 0.0.1

package/dist/assets/scss/indie_booking.scss

@@ -0,0 +1,4464 @@
+// 폰트
+@import url("https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap");
+@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;500;600;700;800&display=swap");
+
+// 리셋
+@import 'https://cdn.jsdelivr.net/npm/reset-css@5.0.2/reset.min.css';
+@import 'https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css';
+
+html,body{
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+}
+
+
+#indie_booking_wrapper{
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+    position: relative;
+    min-width: 1024px;
+
+    *{box-sizing: border-box; font-family: "Roboto", "Noto Sans KR", "애플 SD 산돌고딕 Neo", "Apple SD Gothic Neo", "맑은 고딕", "Malgun Gothic", "Helvetica", "Verdana", sans-serif;}
+
+    :where(a, button, input):active,
+    :where(a, button, input):hover {
+        outline: none;
+    }
+    input{
+        outline: none;
+    }
+}
+
+a{text-decoration: none; color: #111; cursor: pointer;}
+button{border: none; background-color: transparent; cursor: pointer;}
+select {
+    border-radius: 0;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    padding-right: 35px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.133' height='7.41' viewBox='0 0 13.133 7.41'%3E%3Cpath d='M17.59,8.59l-5.023,4.58L7.543,8.59,6,10l6.566,6,6.566-6Z' transform='translate(-6 -8.59)'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: right 6px center;
+    border: none;
+}
+
+
+
+
+// ****************************************************************************
+
+// 팝업 - 기본
+.indie_pop_wrap{
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 800;
+    background-color: rgba(0, 0 ,0, .6);
+    display: none;
+    justify-content: center;
+    align-items: center;
+    &.on{
+        display: flex;
+    }
+
+    .pop_base{
+        background-color: white;
+        border-radius: 20px;
+        overflow: hidden;
+        overflow-y: auto;
+        height: 95%;
+        width: 95%;
+        display: flex;
+        flex-direction: column;
+
+        @media (max-width: 1000px){
+            &.scroll.on{
+                overflow: auto;
+                padding: 20px;
+                justify-content: start;
+                .pop_base{
+                    min-width: 1000px;
+                }
+            }
+        }
+
+        .heightAuto{
+            height: auto;
+        }
+
+        .overflowHidden{
+            overflow: hidden;
+        }
+        &.xs_1{
+            max-width: 370px;
+        }
+
+        &.full_2{
+            width: 98%;
+            height: 98%;
+        }
+        &.translate{
+            max-width: 800px;
+            height: auto;
+            .top_box{
+                padding-left: 30px;
+            }
+            .contents{
+                overflow: hidden;
+            }
+        }
+
+
+        .top_box{
+            flex-shrink: 0;
+            border-bottom: 1px solid #E5E5E5;
+            margin-bottom: -1px;
+            display: flex;
+            align-items: center;
+            flex-wrap: wrap;
+            padding: 23px 30px 17px 40px;
+            position: relative;
+            z-index: 10;
+            .btn_close{
+                margin-left: auto;
+                flex-shrink: 0;
+            }
+            h3{
+                font-size: 15px;
+                font-weight: 600;
+                color: #383E96;
+                padding-right: 10px;
+                &.big{
+                    font-size: 22px;
+                }
+                &.black{
+                    color: black;
+                }
+            }
+        }
+
+        .btn_close{
+            width: 15px;
+            height: 15px;
+            text-indent: -9999px;
+            overflow: hidden;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M19,6.41,17.59,5,12,10.59,6.41,5,5,6.41,10.59,12,5,17.59,6.41,19,12,13.41,17.59,19,19,17.59,13.41,12Z' transform='translate(-5 -5)' fill='%23111'/%3E%3C/svg%3E%0A");
+            background-repeat: no-repeat;
+            background-position: center center;
+            z-index: 100;
+        }
+
+        .contents{
+            flex: 1;
+            overflow-x: hidden;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            background-color: white;
+            &.pdMg{
+                padding: 30px 35px;
+            }
+            &.pdLg{
+                padding: 35px 35px;
+            }
+        }
+
+        .bottom_box{
+            margin-top: -1px;
+            border-top: 1px solid #B6B9CC;
+            flex-shrink: 0;
+            text-align: right;
+            padding: 15px 30px;
+            z-index: 10;
+            background-color: white;
+
+            &.flex{
+                flex-wrap: wrap;
+                display: flex;
+                align-items: center;
+            }
+            .left_b{
+                flex: 1 0 100px;
+                margin-right: auto;
+                text-align: left;
+            }
+            .mid_box{
+                flex: 0 1 auto;
+            }
+            .right_b{
+                flex: 1 0 100px;
+                margin-left: auto;
+                text-align: right;
+            }
+        }
+        &.heightAuto{
+            height: auto;
+            max-height: 95%;
+        }
+    }
+
+
+    // 슬라이드 - 옆 사이드 팝업
+    &.slide{
+        display: flex;
+        justify-content: flex-end;
+        background-color: transparent;
+        overflow: hidden;
+        z-index: -1;
+        transition: z-index 0s .7s;
+
+        &::after{
+            content: "";
+            position: absolute;
+            left: 0;
+            top: 0;
+            display: block;
+            width: 100%;
+            height: 100%;
+            background-color: rgba(0, 0 ,0, .6);
+            z-index: 1;
+            transition: .4s;
+            opacity: 0;
+        }
+
+        .pop_base{
+            position: relative;
+            z-index: 10;
+            height: 100%;
+            border-top-right-radius: 0;
+            border-bottom-right-radius: 0;
+            transition: transform .5s;
+            transform: translateX(100%);
+        }
+
+        &.on{
+            z-index: 800;
+            transition-delay: 0s;
+            &::after{
+                opacity: 1;
+            }
+
+            .pop_base{
+                transform: translateX(0);
+            }
+        }
+    }
+}
+
+
+//alert 창
+.indie_pop_alert{
+    display: none;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 1500;
+    background-color: rgba(0,0,0,.5);
+    overflow: auto;
+    padding: 50px 20px;
+    transition: transform .2s .2s;
+
+    .pop_base{
+        width: 100%;
+        margin: auto;
+        flex-shrink: 0;
+        background-color: white;
+        max-width: 360px;
+        border-radius: 12px;
+        overflow: hidden;
+        box-shadow: 0 2px 15px rgba(0,0,0,.3);
+        transform: translateY(15px);
+
+        .btn_close{
+            position: absolute;
+            right: 15px;
+            top: 15px;
+            width: 15px;
+            height: 15px;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M19,6.41,17.59,5,12,10.59,6.41,5,5,6.41,10.59,12,5,17.59,6.41,19,12,13.41,17.59,19,19,17.59,13.41,12Z' transform='translate(-5 -5)'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: 14px;
+            text-indent: -9999px;
+            overflow: hidden;
+        }
+        .contents{
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            text-align: center;
+            min-height: 145px;
+            padding: 37px 25px 35px;
+            font-size: 12px;
+            color: #677386;
+            p{
+                font-size: 14px;
+                color: #677386;
+                word-break: keep-all;
+                line-height: 1.5;
+                &:only-of-type{
+                    margin-bottom: 0;
+                }
+            }
+            .bold{
+                font-size: 13px;
+                font-weight: 500;
+                margin: 0 0 20px;
+            }
+            .sbj{
+                font-size: 16px;
+                font-weight: 500;
+                color: black;
+                margin-bottom: 10px;
+                line-height: 1.3;
+                &:only-of-type{
+                    margin-bottom: 0;
+                }
+                &.lg{
+                    font-size: 20px;
+                }
+            }
+        }
+        .btns{
+            height: 42px;
+            width: 100%;
+            display: flex;
+            button{
+                flex: 1;
+                text-align: center;
+                background-color: #F5F5FC;
+                font-size: 13px;
+                font-weight: 500;
+                letter-spacing: -0.04em;
+                transition: background-color .25s, box-shadow .25s, border-color .25s;
+                &.gray{
+                    background-color: #EFF0F8;
+                    color: #677386;
+                    &:hover{
+                        background-color: darken(#EFF0F8, 5%);
+                    }
+                }
+                &.primary{
+                    background-color: #383E96;
+                    color: white;
+                    &:hover{
+                        background-color: darken(#383E96, 8%);
+                    }
+                }
+                &.blue{
+                    background-color: #038EE3;
+                    color: white;
+                    &:hover{
+                        background-color: darken(#038EE3, 8%);
+                    }
+                }
+            }
+        }
+    }
+
+    &.on{
+        display: flex;
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+// 탭
+.indie_tab_square_01{
+    &_wrapper{
+        margin-bottom: 10px;
+    }
+    
+    display: flex;
+    flex-wrap: wrap;
+    
+    > li{
+        flex: 1;
+        margin-left: -1px;
+        z-index: 1;
+        > a{
+            display: block;
+            width: 100%;
+            height: 100%;
+            text-align: center;
+            padding: 12px 12px 10px;
+            background-color: white;
+            border: 1px solid #D5D5D5;
+            font-weight: 700;
+            font-size: 12px;
+            color: #9093AD;
+        }
+        
+        &.on{
+            z-index: 2;
+            > a{
+                border-color: black;
+                color: black;
+            }
+        }
+    }
+}
+
+
+
+
+
+// 로딩
+.indie_loading_common_box{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+}
+
+.indie_loader-wrapper {
+    display: none;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    left: 0;
+    top: 0;
+    z-index: 1000;
+    width: 100vw;
+    height: 100vh;
+    background: white;
+    &.transparent{
+        background: transparent;
+    }
+    &.on{
+        display: flex;
+    }
+}
+
+.indie_loader {
+    width: 30px;
+    height: 30px;
+    border: 5px solid #444;   
+    border-color: #444 transparent transparent;
+    border-radius: 50%;
+    animation: indie-loader-ani 1s infinite linear;
+    &.white{
+        border-color: white transparent transparent;
+    }
+    &.sm{
+        width: 13px;
+        height: 13px;
+        border-width: 2px 2px 1px 1px;
+        border-color: rgba(255, 255, 255, .35) rgba(255, 255, 255, .35) rgba(255, 255, 255, .05);
+    }
+}
+
+@keyframes indie-loader-ani {
+    0% { transform: rotate(0); }
+    100% { transform: rotate(360deg); }
+}
+
+
+// 로딩 dot 점
+.indie_loading_dots{
+    margin: 0 20px 0 22px;
+    position: relative;
+    width: 9px;
+    height: 9px;
+    border-radius: 9px;
+    animation: indie_loader10m 1.7s ease-in-out infinite;
+    background-color: white;
+    border: 1px solid #cecece;
+    &::before, 
+    &::after{
+        content: "";
+        position: absolute;
+        background-color: white;
+        top: -1px;
+        height: 9px;
+        width: 9px;
+        border-radius: 9px;
+        border: 1px solid #cecece;
+    }
+    &::before{
+        left: -15px;
+        animation: indie_loader10g 1.7s ease-in-out infinite;
+    }
+    &::after{
+        left: 14px;
+        animation: indie_loader10d 1.7s ease-in-out infinite;
+    }
+
+    &.gray{
+        width: 7px;
+        height: 7px;
+        animation: indie_loaderGray10m 1.7s ease-in-out infinite;
+        &::before, 
+        &::after{
+            top: 0;
+            height: 7px;
+            width: 7px;
+            border-radius: 50%;
+        }
+        &::before{
+            left: -12px;
+            animation: indie_loaderGray10g 1.7s ease-in-out infinite;
+        }
+        &::after{
+            left: 12px;
+            animation: indie_loaderGray10d 1.7s ease-in-out infinite;
+        }
+    }
+}
+
+
+@keyframes indie_loader10g{
+    0%{background-color: white; border-color: #cecece;}
+    25%{background-color: #374193; border-color: #374193;}
+    50%{background-color: white; border-color: #cecece;}
+    75%{background-color: white; border-color: #cecece;}
+    100%{background-color: white; border-color: #cecece;}
+}
+
+@keyframes indie_loader10m{
+    0%{background-color: white; border-color: #cecece;}
+    25%{background-color: white; border-color: #cecece;}
+    50%{background-color: #374193; border-color: #374193;}
+    75%{background-color: white; border-color: #cecece;}
+    100%{background-color: white; border-color: #cecece;}
+}
+
+@keyframes indie_loader10d{
+    0%{background-color: white; border-color: #cecece;}
+    25%{background-color: white; border-color: #cecece;}
+    50%{background-color: white; border-color: #cecece;}
+    75%{background-color: #374193; border-color: #374193;}
+    100%{background-color: white; border-color: #cecece;}
+}
+
+@keyframes indie_loaderGray10g{
+    0%{background-color: transparent; border: none;}
+    25%{background-color: #9f9f9f; border: none;}
+    50%{background-color: transparent; border: none;}
+    75%{background-color: transparent; border: none;}
+    100%{background-color: transparent; border: none;}
+}
+
+@keyframes indie_loaderGray10m{
+    0%{background-color: transparent; border: none;}
+    25%{background-color: transparent; border: none;}
+    50%{background-color: #9f9f9f; border: none;}
+    75%{background-color: transparent; border: none;}
+    100%{background-color: transparent; border: none;}
+}
+
+@keyframes indie_loaderGray10d{
+    0%{background-color: transparent; border: none;}
+    25%{background-color: transparent; border: none;}
+    50%{background-color: transparent; border: none;}
+    75%{background-color: #9f9f9f; border: none;}
+    100%{background-color: transparent; border: none;}
+}
+
+
+
+
+
+
+
+
+
+
+
+// 페이징
+.indie_paging_b{
+    display: inline-flex;
+    vertical-align: middle;
+    align-items: center;
+    font-size: 13px;
+    margin-left: 10px;
+
+    > button{
+        width: 8px;
+        height: 12px;
+        text-indent: -9999px;
+        overflow: hidden;
+        background-repeat: no-repeat;
+        background-position: center center;
+        margin: 0 10px;
+        &:first-of-type{
+            margin-left: 0;
+        }
+        &:last-of-type{
+            margin-right: 0;
+        }
+    }
+    .pg_left{
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.41' height='12' viewBox='0 0 7.41 12'%3E%3Cpath d='M16,16.34l-4.58-4.59L16,7.16,14.59,5.75l-6,6,6,6Z' transform='translate(-8.59 -5.75)'/%3E%3C/svg%3E");
+    }
+    .pg_right{
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.41' height='12' viewBox='0 0 7.41 12'%3E%3Cpath d='M8.59,16.34l4.58-4.59L8.59,7.16,10,5.75l6,6-6,6Z' transform='translate(-8.59 -5.75)'/%3E%3C/svg%3E%0A");
+    }
+    .txt_paging{
+        width: 60px;
+        height: 30px;
+        background-color: #fff;
+        border: 1px solid #DBDBDB;
+        text-align: center;
+        font-weight: 600;
+        color: #FF5977;
+        margin: 0 5px;
+        font-size: inherit;
+    }
+    span{
+        margin: 0 5px;
+        font-size: inherit;
+        font-weight: 600;
+    }
+}
+
+
+
+
+// 검색어가 없을때
+.indie_search_none_common_box{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex: 1;
+    p{
+        font-size: 18px;
+        font-weight: 600;
+        color: #B8BAD0;
+    }
+}
+
+
+
+
+
+
+// 폼 - Input
+.indie_text_nor{
+    // height: 42px;
+    height: 30px;
+    border: 1px solid #D3D3D3;
+    background-color: #F5F5FC;
+    border-radius: 25px;
+    padding: 0 20px;
+    font-weight: 500;
+    transition: background-color .25s, box-shadow .25s, border-color .25s;
+    background-repeat: no-repeat;
+    background-position: left 14px center;
+    max-width: 100%;
+    font-size: 12px;
+    &:hover,
+    &:focus{
+        background-color: white;
+        border-color: #1B206A;
+        box-shadow: 0 0 8px rgba(0, 0, 0, .16);
+    }
+
+    &.white{
+        background-color: white;
+    }
+
+    &.xs{
+        height: 24px;
+        font-size: 12px;
+    }
+
+    &.xs3{
+        height: 28px;
+        font-size: 12px;
+    }
+
+    &.sm{
+        height: 30px;
+        font-size: 12px;
+    }
+
+    &.sm2{
+        height: 30px;
+        font-size: 12px;
+    }
+
+    &.sm3{
+        height: 30px;
+        font-size: 12px;
+    }
+
+    &.lg{
+        height: 40px;
+        font-size: 13px;
+    }
+
+    &.squre{
+        border-radius: 8px;
+    }
+
+    &.squre2{
+        border-radius: 4px;
+    }
+
+    &.ic_search{
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19.141' height='17.49' viewBox='0 0 19.141 17.49'%3E%3Cpath d='M16.68,14h-.865l-.306-.27A6.155,6.155,0,0,0,17.227,9.5c0-3.59-3.185-6.5-7.114-6.5S3,5.91,3,9.5,6.185,16,10.114,16a7.486,7.486,0,0,0,4.629-1.57l.3.28v.79l5.472,4.99L22.141,19Zm-6.566,0A4.72,4.72,0,0,1,5.189,9.5,4.72,4.72,0,0,1,10.114,5a4.72,4.72,0,0,1,4.925,4.5A4.72,4.72,0,0,1,10.114,14Z' transform='translate(-3 -3)'/%3E%3C/svg%3E");
+        padding-left: 42px;
+        &::placeholder{
+            font-size: 13px;
+        }
+    }
+    
+    &.ic_search_gray{
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19.141' height='17.49' viewBox='0 0 19.141 17.49'%3E%3Cpath d='M16.68,14h-.865l-.306-.27A6.155,6.155,0,0,0,17.227,9.5c0-3.59-3.185-6.5-7.114-6.5S3,5.91,3,9.5,6.185,16,10.114,16a7.486,7.486,0,0,0,4.629-1.57l.3.28v.79l5.472,4.99L22.141,19Zm-6.566,0A4.72,4.72,0,0,1,5.189,9.5,4.72,4.72,0,0,1,10.114,5a4.72,4.72,0,0,1,4.925,4.5A4.72,4.72,0,0,1,10.114,14Z' transform='translate(-3 -3)' fill='%23cecece'/%3E%3C/svg%3E");
+        background-position: right 20px center;
+        padding-right: 42px;
+        background-size: 16px;
+        &::placeholder{
+            font-size: 13px;
+        }
+    }
+
+    &.w100{
+        width: 100%;
+    }
+
+    &:read-only{
+        color: #A3A4BE;
+    }
+    &.value:not(:placeholder-shown){
+        background-color: white;
+    }
+    &::placeholder{
+        color: #A3A4BE;
+    }
+
+    &:disabled{
+        background-color: #F4F4F7;
+        border-color: #F4F4F7;
+        opacity: 1;
+        color: #D5D5E5;
+        &::placeholder{
+            color: #D5D5E5;
+        }
+    }
+
+    &.disaNone{
+        border: 1px solid #D3D3D3 !important;
+        background-color: #F5F5FC !important;
+        color: black !important;
+    }
+}
+
+.indie_textarea_nor{
+    min-height: 100px;
+    border: 1px solid #D3D3D3;
+    background-color: #F5F5FC;
+    border-radius: 20px;
+    padding: 18px 20px;
+    font-weight: 500;
+    transition: background-color .25s, box-shadow .25s, border-color .25s;
+    line-height: 1.2;
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+    font-size: 12px;
+
+    &::-webkit-scrollbar{
+        display: none;
+    }
+    &:hover,
+    &:focus{
+        background-color: white;
+        border-color: #1B206A;
+        box-shadow: 0 0 8px rgba(0, 0, 0, .16);
+    }
+    &::placeholder{
+        color: #A3A4BE;
+    }
+    &.value:not(:placeholder-shown){
+        background-color: white;
+    }
+    &.sm{
+        min-height: auto;
+        font-size: 12px;
+        padding: 15px 20px;
+    }
+    &.squre{
+        border-radius: 8px;
+    }
+    &.minHN{
+        min-height: auto;
+    }
+}
+
+
+
+// 셀렉트 - Select
+.indie_select_nor{
+    // height: 42px;
+    height: 30px;
+    border-radius: 25px;
+    border: 1px solid #D3D3D3;
+    padding: 0 35px 0 20px;
+    font-size: 12px;
+    font-weight: 600;
+    color: #383E96;
+    transition: background-color .25s, box-shadow .25s, border-color .25s;
+    background-color: white;
+    background-position: right 15px center;
+    background-size: 12px;
+    max-width: 100%;
+
+    &.sm{
+        height: 30px;
+        font-size: 12px;
+    }
+
+    &.sm2{
+        height: 30px;
+        font-size: 12px;
+    }
+
+    &.sm3{
+        height: 30px;
+        font-size: 12px;
+        padding-left: 15px;
+        padding-right: 30px;
+        background-position: center right 10px;
+        background-size: 10px;
+    }
+
+    &.xs{
+        height: 22px;
+        font-size: 12px;
+        color: black;
+    }
+
+    &.xs2{
+        height: 26px;
+        font-size: 13px;
+        color: black;
+    }
+
+    &.xs3{
+        height: 28px;
+        font-size: 12px;
+        color: black;
+        padding-left: 15px;
+    }
+
+    &.md{
+        height: 36px;
+    }
+
+    &.transparent{
+        border: none;
+        color: black;
+        font-size: 12px;
+    }
+
+    &.squre{
+        border-radius: 8px;
+    }
+
+    &.tri{
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7' height='6' viewBox='0 0 7 6'%3E%3Cpath d='M2.636,1.481a1,1,0,0,1,1.728,0L6.123,4.5A1,1,0,0,1,5.259,6H1.741A1,1,0,0,1,.877,4.5Z' transform='translate(7 6) rotate(180)' fill='%233f55c4'/%3E%3C/svg%3E");
+    }
+
+    &:focus,
+    &:hover{
+        border-color: #1B206A;
+        box-shadow: 0 0 8px rgba(0, 0, 0, .16);
+    }
+
+    &:invalid{
+        color: #A3A4BE;
+    }
+
+    &:disabled{
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.133' height='7.41' viewBox='0 0 13.133 7.41'%3E%3Cpath d='M17.59,8.59l-5.023,4.58L7.543,8.59,6,10l6.566,6,6.566-6Z' transform='translate(-6 -8.59)' fill='%23d5d5e4'/%3E%3C/svg%3E");
+        background-color: #F4F4F7;
+        border-color: #F4F4F7;
+        opacity: 1;
+        color: #D5D5E5;
+    }
+
+    &.black-color{
+        border-color: black;
+    }
+
+    &.w100{
+        width: 100%;
+    }
+}
+
+
+// 버튼 - Button
+.indie_btn_nor{
+    height: 30px;
+    border-radius: 30px;
+    padding: 5px 20px;
+    text-align: center;
+    background-color: #fff;
+    font-size: 12px;
+    font-weight: 600;
+    border: 1px solid transparent;
+    background-repeat: no-repeat;
+    background-position: 22px 50%;
+    transition: background-color .25s, color .25s, border .25s;
+    vertical-align: middle;
+    align-items: center;
+    justify-content: center;
+
+    &:hover{
+        background-color: darken(white, 5%);
+    }
+
+    &.line{
+        border-color: #383E96;
+    }
+
+    &.line-black{
+        border-color: black;
+    }
+
+    &.line2{
+        border-color: #BDC0D3;
+    }
+
+    &.line3{
+        border-color: #BDC0D3;
+        color: #383E96;
+        font-weight: 500;
+    }
+
+    &.line4{
+        border-color: #BDC0D3;
+        font-weight: 400;
+        border-radius: 6px;
+        font-size: 12px;
+        height: 30px;
+        padding: 0 15px;
+    }
+
+    &.blue{
+        background-color: #383E96;
+        color: white;
+        &:hover{
+            background-color: darken(#383E96, 10%);
+        }
+    }
+
+    &.xss{
+        height: 24px;
+        padding: 0 15px;
+        font-size: 12px;
+        font-weight: 400;
+        &-min{
+            min-width: 100px;
+        }
+    }
+
+    &.xs{
+        height: 26px;
+        padding: 0 15px;
+        &-min{
+            min-width: 100px;
+        }
+    }
+
+    &.xs3{
+        height: 28px;
+        padding: 0 15px;
+        &-min{
+            min-width: 100px;
+        }
+    }
+
+    &.sm{
+        height: 30px;
+        padding: 0 14px;
+        &-min{
+            min-width: 100px;
+        }
+        &-min2{
+            min-width: 108px;
+        }
+        &.fzsm{
+            font-size: 12px;
+        }
+    }
+
+    &.sm2{
+        height: 30px;
+        padding: 0 14px;
+        &-min{
+            min-width: 120px;
+        }
+    }
+
+    &.sm3{
+        height: 30px;
+        padding: 0 15px;
+        font-size: 12px;
+        &-min{
+            min-width: 120px;
+        }
+    }
+
+    &.md{
+        height: 30px;
+        min-width: 140px;
+        font-size: 12px;
+    }
+
+    &.lg{
+        height: 40px;
+        min-width: 140px;
+        font-size: 13px;
+    }
+
+    &.squre{
+        border-radius: 8px;
+    }
+
+    &:disabled{
+        background-color: #DDDDDD;
+        border-color: #DDDDDD;
+        color: #fff;
+    }
+}
+
+
+// 버튼 - squre - 사각형
+.indie_btn_squre{
+    height: 30px;
+    min-width: 100px;
+    border-radius: 3px;
+    border: 1px solid #C2C7D7;
+    font-size: 12px;
+    background-repeat: no-repeat;
+    padding: 0 18px;
+    transition: .25s;
+    text-align: center;
+    &:hover{
+        background-color: darken(white, 5%);
+    }
+    &.refresh{
+        padding-left: 40px;
+        text-align: right;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M17.659,6.35A8,8,0,1,0,19.74,14H17.659A6,6,0,1,1,12,6a5.92,5.92,0,0,1,4.223,1.78L13.006,11h7V4Z' transform='translate(-4.01 -4)' fill='%23c2c7d7'/%3E%3C/svg%3E");
+        background-position: left 10px center;
+        &.min{
+            font-size: 12px;
+            padding: 0 10px 0 35px;
+        }
+    }
+
+    &.search{
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19.141' height='17.49' viewBox='0 0 19.141 17.49'%3E%3Cpath d='M16.68,14h-.865l-.306-.27A6.155,6.155,0,0,0,17.227,9.5c0-3.59-3.185-6.5-7.114-6.5S3,5.91,3,9.5,6.185,16,10.114,16a7.486,7.486,0,0,0,4.629-1.57l.3.28v.79l5.472,4.99L22.141,19Zm-6.566,0A4.72,4.72,0,0,1,5.189,9.5,4.72,4.72,0,0,1,10.114,5a4.72,4.72,0,0,1,4.925,4.5A4.72,4.72,0,0,1,10.114,14Z' transform='translate(-3 -3)'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: center center;
+        background-size: 15px;
+    }
+
+    &.search2{
+        border-radius: 6px;
+        min-width: 90px;
+        text-align: left;
+        padding: 0 28px 0 15px;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19.141' height='17.49' viewBox='0 0 19.141 17.49'%3E%3Cpath d='M16.68,14h-.865l-.306-.27A6.155,6.155,0,0,0,17.227,9.5c0-3.59-3.185-6.5-7.114-6.5S3,5.91,3,9.5,6.185,16,10.114,16a7.486,7.486,0,0,0,4.629-1.57l.3.28v.79l5.472,4.99L22.141,19Zm-6.566,0A4.72,4.72,0,0,1,5.189,9.5,4.72,4.72,0,0,1,10.114,5a4.72,4.72,0,0,1,4.925,4.5A4.72,4.72,0,0,1,10.114,14Z' transform='translate(-3 -3)'/%3E%3C/svg%3E");
+        background-repeat: no-repeat;
+        background-position: center right 8px;
+        background-size: 15px;
+    }
+    
+    &.bgPrimary{
+        border-color: #383E96;
+        background-color: #383E96;
+        color: white;
+        &:hover{
+            background-color: darken(#383E96, 10%);
+        }
+    }
+        
+    &_icon{
+        padding: 0 34px 0 10px;
+        height: 30px;
+        border-radius: 6px;
+        border: 1px solid #C2C7D7;
+        font-size: 12px;
+        color: #383E96;
+        background-repeat: no-repeat;
+        transition: .25s;
+        text-align: center;
+        background-repeat: no-repeat;
+        background-position: center right 10px;
+        background-size: 13px;
+
+        &.reset{
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.874' height='16.327' viewBox='0 0 11.874 16.327'%3E%3Cpath d='M9.937,3.226V1L6.969,3.969,9.937,6.937V4.711A4.456,4.456,0,0,1,14.39,9.163a4.357,4.357,0,0,1-.519,2.078l1.084,1.084a5.927,5.927,0,0,0-5.017-9.1Zm0,10.39A4.456,4.456,0,0,1,5.484,9.163,4.357,4.357,0,0,1,6,7.085L4.92,6a5.927,5.927,0,0,0,5.017,9.1v2.226l2.969-2.969L9.937,11.39Z' transform='translate(-4 -1)' fill='%23383e96'/%3E%3C/svg%3E");
+            background-size: 11px;
+        }
+        &.delete{
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='14' viewBox='0 0 11 14'%3E%3Cpath d='M5.786,15.444A1.568,1.568,0,0,0,7.357,17h6.286a1.568,1.568,0,0,0,1.571-1.556V6.111H5.786ZM16,3.778H13.25L12.464,3H8.536l-.786.778H5V5.333H16Z' transform='translate(-5 -3)' fill='%23383e96'/%3E%3C/svg%3E");
+            background-size: 11px;
+        }
+        &.enable{
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9' viewBox='0 0 18 9'%3E%3Cpath d='M15.5,7h-9a4.5,4.5,0,0,0,0,9h9a4.5,4.5,0,0,0,0-9Zm0,7.2a2.7,2.7,0,1,1,2.7-2.7A2.7,2.7,0,0,1,15.5,14.2Z' transform='translate(-2 -7)' fill='%23383e96'/%3E%3C/svg%3E");
+            background-size: 18px;
+            background-color: white;
+            &:hover{
+                background-color: black;
+                border-color: black;
+                color: white;
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='9' viewBox='0 0 18 9'%3E%3Cpath d='M15.5,7h-9a4.5,4.5,0,0,0,0,9h9a4.5,4.5,0,0,0,0-9Zm0,7.2a2.7,2.7,0,1,1,2.7-2.7A2.7,2.7,0,0,1,15.5,14.2Z' transform='translate(-2 -7)' fill='%23fff'/%3E%3C/svg%3E");
+            }
+        }
+        &.save{
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.281' height='13.281' viewBox='0 0 13.281 13.281'%3E%3Cpath d='M13.33,3H4.476A1.475,1.475,0,0,0,3,4.476v10.33a1.475,1.475,0,0,0,1.476,1.476h10.33a1.48,1.48,0,0,0,1.476-1.476V5.951ZM9.641,14.805a2.214,2.214,0,1,1,2.214-2.214A2.211,2.211,0,0,1,9.641,14.805Zm2.214-7.378H4.476V4.476h7.378Z' transform='translate(-3 -3)' fill='%23fff'/%3E%3C/svg%3E");
+        }
+        &.modify{
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.362' height='13.281' viewBox='0 0 13.362 13.281'%3E%3Cpath d='M14.142,11.955,8.624,6.437a3.892,3.892,0,0,0-.91-4.184,4.009,4.009,0,0,0-4.488-.788L5.834,4.071,4.015,5.891,1.346,3.283a3.908,3.908,0,0,0,.788,4.488,3.892,3.892,0,0,0,4.184.91L11.838,14.2a.586.586,0,0,0,.849,0L14.082,12.8a.546.546,0,0,0,.061-.849Z' transform='translate(-0.956 -1.1)' fill='%23fff'/%3E%3C/svg%3E");
+        }
+        &.modify2{
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.362' height='13.281' viewBox='0 0 13.362 13.281'%3E%3Cpath id='ic_build_24px' d='M14.142,11.955,8.624,6.437a3.892,3.892,0,0,0-.91-4.184,4.009,4.009,0,0,0-4.488-.788L5.834,4.071,4.015,5.891,1.346,3.283a3.908,3.908,0,0,0,.788,4.488,3.892,3.892,0,0,0,4.184.91L11.838,14.2a.586.586,0,0,0,.849,0L14.082,12.8a.546.546,0,0,0,.061-.849Z' transform='translate(-0.956 -1.1)' fill='%23393e97'/%3E%3C/svg%3E");
+        }
+        &.dispatch{
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='17' viewBox='0 0 17 17'%3E%3Cpath d='M0,0H17V17H0Z' fill='none'/%3E%3Cpath d='M14.262,4.714a1.057,1.057,0,0,0-1-.714H5.476a1.064,1.064,0,0,0-1,.714L3,8.949V14.6a.709.709,0,0,0,.707.707h.707a.709.709,0,0,0,.707-.707V13.9h8.489V14.6a.709.709,0,0,0,.707.707h.707a.709.709,0,0,0,.707-.707V8.949ZM5.476,11.776a1.06,1.06,0,1,1,1.061-1.06A1.059,1.059,0,0,1,5.476,11.776Zm7.781,0a1.06,1.06,0,1,1,1.061-1.06A1.059,1.059,0,0,1,13.257,11.776ZM4.415,8.242,5.476,5.06h7.781l1.061,3.181Z' transform='translate(-0.867 -1.156)' fill='%23393e98'/%3E%3C/svg%3E%0A");
+            background-size: 17px;
+        }
+
+        &.pdN{
+            padding-right: 10px;
+        }
+
+        &.primary{
+            background-color: #383E96;
+            border-color: #383E96;
+            color: white;
+            &:hover,
+            &:focus{
+                background-color: darken(#383E96, 10%);
+            }
+        }
+        &.min{
+            font-size: 12px;
+            padding: 0 10px 0 35px;
+        }
+        &.fz12{
+            font-size: 12px;
+        }
+
+        &:hover{
+            background-color: darken(white, 3%);
+        }
+    }
+    &.copy{
+        padding-left: 40px;
+        text-align: right;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14.982' height='14.982' viewBox='0 0 14.982 14.982'%3E%3Cpath d='M83.371-867.265a1.078,1.078,0,0,1-.787-.337,1.078,1.078,0,0,1-.337-.786v-10.487a1.078,1.078,0,0,1,.337-.786,1.078,1.078,0,0,1,.787-.337H93.858a1.078,1.078,0,0,1,.787.337,1.078,1.078,0,0,1,.337.786v10.487a1.078,1.078,0,0,1-.337.786,1.078,1.078,0,0,1-.787.337Zm0-1.124H93.858v-7.116H88.24v-3.371H83.371Zm-2.247,3.371a1.078,1.078,0,0,1-.787-.337,1.078,1.078,0,0,1-.337-.787v-11.611h1.124v11.611H92.735v1.124Zm2.247-13.858v0Z' transform='translate(-80 880)' fill='%23444446'/%3E%3C/svg%3E");
+        background-position: left 10px center;
+        &.min{
+            font-size: 12px;
+            padding: 0 10px 0 35px;
+       }
+    }
+
+    &.only{
+        width: 30px;
+        height: 30px;
+        min-width: 0;
+        overflow: hidden;
+        text-indent: -9999px;
+        text-align: left;
+        padding: 0;
+        background-repeat: no-repeat;
+        background-position: center center;
+        &.refresh{
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.874' height='16.327' viewBox='0 0 11.874 16.327'%3E%3Cpath d='M9.937,3.226V1L6.969,3.969,9.937,6.937V4.711A4.456,4.456,0,0,1,14.39,9.163a4.357,4.357,0,0,1-.519,2.078l1.084,1.084a5.927,5.927,0,0,0-5.017-9.1Zm0,10.39A4.456,4.456,0,0,1,5.484,9.163,4.357,4.357,0,0,1,6,7.085L4.92,6a5.927,5.927,0,0,0,5.017,9.1v2.226l2.969-2.969L9.937,11.39Z' transform='translate(-4 -1)' fill='%23111426'/%3E%3C/svg%3E%0A");
+        }
+        &.refresh_black{
+            border-radius: 6px;
+            background-color: black;
+            border-color: transparent;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.874' height='16.327' viewBox='0 0 11.874 16.327'%3E%3Cpath d='M9.937,3.226V1L6.969,3.969,9.937,6.937V4.711A4.456,4.456,0,0,1,14.39,9.163a4.357,4.357,0,0,1-.519,2.078l1.084,1.084a5.927,5.927,0,0,0-5.017-9.1Zm0,10.39A4.456,4.456,0,0,1,5.484,9.163,4.357,4.357,0,0,1,6,7.085L4.92,6a5.927,5.927,0,0,0,5.017,9.1v2.226l2.969-2.969L9.937,11.39Z' transform='translate(-4 -1)' fill='%23fff'/%3E%3C/svg%3E%0A");
+        }
+        &.restore{
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M0,0H20V20H0Z' fill='none'/%3E%3Cpath d='M11.333,10a1.62,1.62,0,1,0-1.619,1.556A1.593,1.593,0,0,0,11.333,10ZM9.714,3a7.148,7.148,0,0,0-7.286,7H0l3.238,3.111L6.476,10H4.048A5.555,5.555,0,0,1,9.714,4.556,5.555,5.555,0,0,1,15.381,10a5.555,5.555,0,0,1-5.667,5.444,5.857,5.857,0,0,1-3.287-1.011l-1.15,1.12A7.489,7.489,0,0,0,9.714,17,7.148,7.148,0,0,0,17,10,7.148,7.148,0,0,0,9.714,3Z' transform='translate(1 -0.382)'/%3E%3C/svg%3E");
+        }
+    }
+
+    &.prev{
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.41' height='12' viewBox='0 0 7.41 12'%3E%3Cpath d='M16,16.34l-4.58-4.59L16,7.16,14.59,5.75l-6,6,6,6Z' transform='translate(-8.59 -5.75)'/%3E%3C/svg%3E");
+    }
+    &.next{
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='7.41' height='12' viewBox='0 0 7.41 12'%3E%3Cpath d='M8.59,16.34l4.58-4.59L8.59,7.16,10,5.75l6,6-6,6Z' transform='translate(-8.59 -5.75)'/%3E%3C/svg%3E");
+    }
+    
+    &.black{
+        background-color: black;
+        border-color: black;
+        &.refresh{
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11.874' height='16.327' viewBox='0 0 11.874 16.327'%3E%3Cpath d='M9.937,3.226V1L6.969,3.969,9.937,6.937V4.711A4.456,4.456,0,0,1,14.39,9.163a4.357,4.357,0,0,1-.519,2.078l1.084,1.084a5.927,5.927,0,0,0-5.017-9.1Zm0,10.39A4.456,4.456,0,0,1,5.484,9.163,4.357,4.357,0,0,1,6,7.085L4.92,6a5.927,5.927,0,0,0,5.017,9.1v2.226l2.969-2.969L9.937,11.39Z' transform='translate(-4 -1)' fill='%23fff'/%3E%3C/svg%3E%0A");
+        }
+    }
+}
+
+
+// 느낌표 text
+.indie_exclamation_mark_box{
+    text-align: left;
+    padding-left: 23px;
+    position: relative;
+    &.one{
+        padding-top: 2px;
+        &::before{
+            top: 0;
+        }
+        .text{
+            font-size: 12px;
+            color: #707070;
+        }
+    }
+    &::before{
+        content: "!";
+        display: block;
+        position: absolute;
+        left: 0;
+        top: 3px;
+        width: 16px;
+        height: 16px;
+        border-radius: 50%;
+        background-color: #EBD977;
+        text-align: center;
+        color: white;
+        line-height: 16px;
+        font-weight: 600;
+        text-align: center;
+        padding: 0;
+    }
+    .sbj{
+        font-weight: 500;
+        color: #383E96;
+        font-size: 12px;
+    }
+    .txt{
+        font-size: 12px;
+        color: black;
+        line-height: 1.3;
+        word-break: keep-all;
+        b{
+            font-weight: 600;
+        }
+    }
+    .normal{
+        font-size: 12px;
+        color: #383E96;
+        padding-top: 3px;
+        line-height: 1.5;
+        &.gray{
+            color: #707070;
+        }
+        &.gray2{
+            color: #383940;
+        }
+    }
+    p{
+        word-break: break-all;
+    }
+
+    &.sm{
+        padding-left: 20px;
+        &::before{
+            width: 13px;
+            height: 13px;
+            font-size: 10px;
+            line-height: 14px;
+        }
+        p{
+            padding-top: 1px;
+        }
+    }
+
+    &.gray{
+        &::before{
+            background-color: #697385;
+            font-size: 12px;
+        }
+        .normal{
+            color: #697385;
+        }
+    }
+
+    &.black{
+        &::before{
+            background-color: black;
+        }
+        .normal{
+            color: #898989;
+        }
+    }
+
+    &.grayLight{
+        &::before{
+            background-color: #8E92C4;
+        }
+        .normal{
+            color: #8E92C4;
+        }
+    }
+}
+
+
+// file form 영역
+.indie_file-upload-select-form{
+    display: inline-flex;
+    align-items: center;
+    margin: 3px;
+    flex-wrap: wrap;
+    vertical-align: middle;
+    gap: 5px 20px;
+    padding: 5px 15px;
+    // min-height: 42px;
+    min-height: 30px;
+    width: 300px;
+    border-radius: 6px;
+    border: 1px dashed #707070;
+    background-color: #F5F5FC;
+    padding-left: 40px;
+    background-image: url("data:image/svg+xml,%3Csvg id='attach_file_black_24dp' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0,0H24V24H0Z' fill='none'/%3E%3Cpath d='M16.5,6V17.5a4,4,0,0,1-8,0V5a2.5,2.5,0,0,1,5,0V15.5a1,1,0,0,1-2,0V6H10v9.5a2.5,2.5,0,0,0,5,0V5A4,4,0,0,0,7,5V17.5a5.5,5.5,0,0,0,11,0V6Z' fill='%239595b8'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: left 10px center;
+    transition: .25s;
+
+    &.w100{
+        width: 100%;
+    }
+
+    &:hover{
+        background-color: #ededfa;
+    }
+    span{
+        font-size: 12px;
+        font-weight: 600;
+    }
+    .gray{
+        color: #9595B8;
+    }
+    .black{
+        margin-left: auto;
+        &::after{
+            content: "";
+            width: 10px;
+            height: 10px;
+            display: inline-block;
+            margin-left: 5px;
+            vertical-align: middle;
+            background-color: red;
+            background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6.061' height='10.707' viewBox='0 0 6.061 10.707'%3E%3Cpath d='M424.627,26.044l5-5-5-5' transform='translate(-424.274 -15.691)' fill='none' stroke='%23232323' stroke-width='1'/%3E%3C/svg%3E") no-repeat center center / 5px;
+        }
+    }
+
+    &.sm{
+        // height: 28px;
+        min-height: 28px;
+        background-size: 18px;
+        span{
+            font-size: 12px;
+        }
+    }
+}
+
+.indie_file-upload-view-form{
+    display: inline-flex;
+    align-items: center;
+    margin: 3px;
+    flex-wrap: wrap;
+    vertical-align: middle;
+    gap: 5px 10px;
+    padding: 5px 15px;
+    min-height: 30px;
+    width: 300px;
+    border-radius: 6px;
+    border: 1px dashed #707070;
+    background-color: white;
+    padding-left: 40px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0,0H24V24H0Z' fill='none'/%3E%3Cpath d='M16.5,6V17.5a4,4,0,0,1-8,0V5a2.5,2.5,0,0,1,5,0V15.5a1,1,0,0,1-2,0V6H10v9.5a2.5,2.5,0,0,0,5,0V5A4,4,0,0,0,7,5V17.5a5.5,5.5,0,0,0,11,0V6Z' fill='%23232323'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: left 10px center;
+    font-size: 12px;
+
+    &.w100{
+        width: 100%;
+    }
+
+    .name{
+        flex: 1;
+        min-width: 0;
+        font-size: 12px;
+        font-weight: 600;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .indie_btn_close_sm{
+        margin-left: auto;
+    }
+
+    &.sm{
+        // height: 28px;
+        min-height: 28px;
+        background-size: 18px;
+        .name{
+            font-size: 12px;
+        }
+    }
+}
+
+.indie_file-upload-download-form{
+    display: inline-flex;
+    align-items: center;
+    position: relative;
+    margin: 3px;
+    flex-wrap: wrap;
+    vertical-align: middle;
+    gap: 5px 10px;
+    padding: 5px 15px;
+    // min-height: 42px;
+    min-height: 30px;
+    width: 300px;
+    border-radius: 6px;
+    border: 1px solid #B8BAD0;
+    background-color: white;
+    padding-left: 40px;
+    padding-right: 40px;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M0,0H24V24H0Z' fill='none'/%3E%3Cpath d='M16.5,6V17.5a4,4,0,0,1-8,0V5a2.5,2.5,0,0,1,5,0V15.5a1,1,0,0,1-2,0V6H10v9.5a2.5,2.5,0,0,0,5,0V5A4,4,0,0,0,7,5V17.5a5.5,5.5,0,0,0,11,0V6Z' fill='%23232323'/%3E%3C/svg%3E");
+    background-repeat: no-repeat;
+    background-position: left 10px center;
+    transition: .25s;
+    font-size: 12px;
+
+    &:hover{
+        border-color: black;
+    }
+
+    &::after{
+        content: "";
+        width: 16px;
+        height: 16px;
+        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9.505' height='11.542' viewBox='0 0 9.505 11.542'%3E%3Cpath d='M14.5,7.074H11.789V3H7.716V7.074H5l4.752,4.752ZM5,13.184v1.358h9.5V13.184Z' transform='translate(-5 -3)'/%3E%3C/svg%3E") no-repeat center center;
+        position: absolute;
+        right: 10px;
+        top: calc(50% - 8px);
+    }
+
+    &.w100{
+        width: 100%;
+    }
+
+    .name{
+        flex: 1;
+        min-width: 0;
+        font-size: 12px;
+        font-weight: 500;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .indie_btn_close_sm{
+        margin-left: auto;
+    }
+
+    &.sm{
+        // height: 28px;
+        min-height: 28px;
+        background-size: 18px;
+        .name{
+            font-size: 12px;
+        }
+    }
+}
+
+
+// 전화번호
+.indie_phone_form_wrap{
+    position: relative;
+    .indie_phone_form{
+        width: 100%;
+    }
+    .indie_search-normal-comp{
+        width: 100%;
+        position: absolute;
+        left: 0;
+        top: 0;
+        z-index: -1;
+        transition: .3s;
+        opacity: 0;
+        &.show{
+            opacity: 1;
+            z-index: 5;
+        }
+    }
+}
+
+.indie_phone_form{
+    // height: 42px;
+    height: 30px;
+    border: 1px solid #D3D3D3;
+    background-color: white;
+    border-radius: 25px;
+    overflow: hidden;
+    display: inline-flex;
+    width: 100%;
+    padding: 0 10px 0 15px;
+    transition: background-color .25s, box-shadow .25s, border-color .25s;
+
+    > select{
+        flex-shrink: 0;
+        font-weight: 600;
+        color: #383E96;
+        font-size: 12px;
+    }
+    .select_btn{
+        flex-shrink: 0;
+        font-weight: 600;
+        color: #383E96;
+        font-size: 12px;
+        padding-right: 25px;
+        min-width: 60px;
+        text-align: left;
+    }
+    > input{
+        flex: 1;
+        font-weight: 500;
+        font-size: 12px;
+        padding-left: 5px;
+        min-width: 0;
+        border: none;
+    }
+
+    &.sm{
+        height: 30px;
+        font-size: 12px;
+    }
+
+    &:focus,
+    &:hover{
+        border-color: #1B206A;
+        box-shadow: 0 0 8px rgba(0, 0, 0, .16);
+    }
+
+    &.sm{
+        height: 28px;
+    }
+}
+
+
+
+
+
+// 라디오 박스 - radio_box
+.indie_radio_box{
+    display: none;
+
+    + label{
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        width: 100%;
+        text-align: left;
+        padding: 15px 15px;
+        padding-left: 60px;
+        position: relative;
+        transition: background-color .25s;
+        min-height: 54px;
+        cursor: pointer;
+        
+        &::before{
+            position: absolute;
+            left: 15px;
+            top: 12px;
+            content: "";
+            display: inline-block;
+            width: 26px;
+            height: 26px;
+            border-radius: 50%;
+            background-color: white;
+            border: 1px solid #BCBDCB;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23bcbdcb'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: center center;
+            margin: 0 15px 0 0;
+            transition: background-color .25s;
+        }
+
+        p{
+            color: #697385;
+        }
+
+        .bolder{
+            font-size: 12px;
+            font-weight: 600;
+        }
+        .nor{
+            font-size: 12px;
+        }
+
+        span,
+        b{
+            color: inherit;
+            font-size: inherit;
+        }
+
+        //강조
+        em{
+           color: #3F9CED !important; 
+           text-decoration: underline !important;
+           font-style: normal;
+        }
+    }
+
+    &.xs + label{
+        padding: 15px 15px;
+        padding-left: 45px;
+        min-height: auto;
+        
+        &::before{
+            left: 10px;
+            top: 50%;
+            width: 17px;
+            height: 17px;
+            background-size: 6px;
+            transform: translateY(-50%);
+        }
+        
+    }
+
+    &:checked{
+        + label{
+            &::before{
+                background-color: #383E96;
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23ffffff'/%3E%3C/svg%3E");
+            }
+            p{
+                color: black;
+            }
+        }
+    }
+
+    &:disabled{
+        + label{
+            background-color: #F4F4F4;
+            &::before{
+                background-color: #E5E5E5;
+                border-color: #D0D0EA;
+            }
+            * {
+                color: #B6BCC7;
+            }
+        }
+    }
+}
+
+
+
+.indie_radio_flex{
+    display: none;
+
+    &.back{
+        + label{
+            display: grid;
+            grid-template-columns: 1fr auto;
+            &::before{
+                grid-column: 2/3;
+                grid-row: 1 / span 50;
+                flex-shrink: 0;
+                margin: 0 0 0 15px;
+                align-self: center;
+            }
+            &:has(.addr){
+                &::before{
+                    align-self: flex-start;
+                }
+            }
+        }
+    }
+
+    &.sm{
+        + label{
+            &::before{
+                width: 20px;
+                height: 20px;
+                margin: 0 10px 0 0;
+                background-size: 10px;
+            }
+        }
+    }
+
+
+    + label{
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        padding: 12px 15px;
+        transition: background-color .25s;
+        cursor: pointer;
+        
+        &::before{
+            flex-shrink: 0;
+            content: "";
+            display: inline-block;
+            width: 26px;
+            height: 26px;
+            border-radius: 50%;
+            background-color: white;
+            border: 1px solid #BCBDCB;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23bcbdcb'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: center center;
+            margin: 0 15px 0 0;
+            transition: background-color .25s;
+        }
+
+        .txt{
+            font-size: 12px;
+            font-weight: 600;
+            color: #697385;
+            flex: 1;
+            word-break: break-all;
+            display: block;
+            b{
+                text-decoration: underline;
+                font-weight: 800;
+                color: #383E96;
+            }
+        }
+
+        .addr{
+            display: block;
+            width: 100%;
+            font-size: 12px;
+            font-weight: 500;
+            color: #A3A5BD;
+            margin-top: 5px;
+            flex: 1;
+            word-break: break-all;
+            b{
+                text-decoration: underline;
+                font-weight: 700;
+                color: #383E96;
+            }
+        }
+    }
+
+    &:checked{
+        + label{
+            background-color: #FAFAFD;
+            &::before{
+                background-color: #383E96;
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23fff'/%3E%3C/svg%3E");
+            }
+            .txt{
+                color: #000;
+            }
+            .addr{
+                color: #505162;
+            }
+        }
+    }
+}
+
+
+.indie_radio_base{
+    &.xs{
+        + label{
+            font-size: 12px;
+            color: #0B205F;
+            &::before{
+                width: 16px;
+                height: 16px;
+                background-size: 6px;
+            }
+        }
+    }
+    &.sm{
+        + label{
+            font-size: 12px;
+            &::before{
+                width: 20px;
+                height: 20px;
+                background-size: 9px;
+            }
+        }
+    }
+    &.sm2{
+        + label{
+            font-size: 12px;
+            &::before{
+                width: 24px;
+                height: 24px;
+                background-size: 12px;
+            }
+        }
+    }
+    &.black{
+        + label{
+            color: #000;
+            font-weight: 500;
+            font-size: 12px;
+        }
+    }
+
+    &.color{
+        + label{
+            color: #B6B9CB;
+        }
+        &:checked + label{
+            color: #383E96;
+        }
+    }
+
+    &.block{
+        + label{
+            display: block;
+            padding-left: 25px;
+            position: relative;
+            .tit{
+                font-weight: 700;
+                font-size: 12px;
+            }
+            .txt{
+                font-size: 12px;
+                font-weight: 400;
+                margin: 2px 0;
+            }
+            &::before{
+                position: absolute;
+                left: 0;
+                top: 0px;
+            }
+        }
+    }
+
+    &.white{
+        + label{
+            color: rgba(255, 255, 255, .28);
+            &::before{
+                opacity: .28;
+                background-color: transparent;
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23fff'/%3E%3C/svg%3E");
+            }
+        }
+        &:checked + label{
+            color: white;
+            &::before{
+                opacity: 1;
+                background-color: white;
+                border-color: white;
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23383E96'/%3E%3C/svg%3E");
+            }
+        }
+    }
+
+    &.mgN{
+        + label::before{margin: 0;}
+    }
+
+    display: none;
+    + label{
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        &::before{
+            flex-shrink: 0;
+            content: "";
+            display: inline-block;
+            width: 26px;
+            height: 26px;
+            border-radius: 50%;
+            background-color: white;
+            border: 1px solid #BCBDCB;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23BCBDCB'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: center center;
+            margin: 0 8px 0 0;
+            transition: background-color .25s;
+        }
+        &.lg{
+            font-size: 12px;
+            font-weight: 600;
+        }
+        &.gray{
+            color: #677386;
+        }
+        &.blue{
+            color: #109CF1;
+        }
+        &.red{
+            color: #DE7171;
+        }
+        &.td{
+            color: #696C89;
+        }
+    }
+    &:checked{
+        + label{
+            &::before{
+                background-color: #383E96;
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23fff'/%3E%3C/svg%3E");
+                border-color: transparent;
+            }
+        }
+    }
+
+    @media (max-width: 1450px){
+        + label{
+            &::before{
+                width: 25px;
+                height: 25px;
+                background-size: 10px;
+            }
+        }
+    }
+}
+
+
+
+
+
+// 검색어 컴포넌트
+.indie_search-normal-comp{
+    position: relative;
+    .input_box{
+        position: relative;
+        .indie_text_nor{
+            width: 100%;
+            padding-right: 40px;
+            &:not(:placeholder-shown){
+                background-color: white;
+                & ~ .ic_search{
+                    display: none;
+                }
+                & ~ .indie_btn_close_sm{
+                    display: block;
+                }
+            }
+        }
+        .ic_search{
+            width: 25px;
+            height: 25px;
+            overflow: hidden;
+            text-indent: -9999px;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19.141' height='17.49' viewBox='0 0 19.141 17.49'%3E%3Cpath d='M16.68,14h-.865l-.306-.27A6.155,6.155,0,0,0,17.227,9.5c0-3.59-3.185-6.5-7.114-6.5S3,5.91,3,9.5,6.185,16,10.114,16a7.486,7.486,0,0,0,4.629-1.57l.3.28v.79l5.472,4.99L22.141,19Zm-6.566,0A4.72,4.72,0,0,1,5.189,9.5,4.72,4.72,0,0,1,10.114,5a4.72,4.72,0,0,1,4.925,4.5A4.72,4.72,0,0,1,10.114,14Z' transform='translate(-3 -3)'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: 15px;
+            position: absolute;
+            right: 7px;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+        .indie_btn_close_sm{
+            display: none;
+            position: absolute;
+            right: 15px;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+    }
+
+    &.w100{
+        width: 100%;
+    }
+
+    &.sm{
+        .input_box{
+            .text_nor{
+                height: 28px;
+                font-size: 12px;
+            }
+        }
+
+        .indie_radio_flex + label::before{
+            width: 25px;
+            height: 25px;
+        }
+        .indie_radio_flex.back + label{
+             .txt{
+                 padding-top: 3px;
+             }
+        }
+    }
+}
+
+// 검색어 리스트 - 팝업
+.indie_position_search{
+    position: absolute;
+    top: calc(100% - 1px);
+    left: 20px;
+    width: calc(100% - 40px);
+    background-color: #fff;
+    border: 1px solid black;
+    border-radius: 0 0 6px 6px;
+    overflow: auto;
+    max-height: 310px;
+    z-index: 50;
+    box-shadow: 0 10px 10px rgba(0, 0, 0, .16);
+    display: none;
+    &.transparent{
+        border: none;
+        border-radius: 0 0 20px 20px;
+    }
+    &.gray{
+        border-color: #E8E8E8;
+        max-height: 150px;
+    }
+    &.wide{
+        border-color: #E8E8E8;
+        width: 100%;
+        left: 0;
+        border-radius: 10px;
+    }
+    &.on{
+        display: block;
+    }
+
+    .a_link_box{
+        display: block;
+        width: 100%;
+        padding: 12px 15px;
+        font-size: 12px;
+        font-weight: 700;
+        .txt{
+            color: #697385;
+            b{
+                color: #383E96;
+                text-decoration: underline;
+            }
+        }
+        transition: .25s;
+        &:focus,
+        &:hover{
+            background-color: #FAFAFD;
+        }
+    }
+
+    .choice_ul{
+        > li{
+            border-bottom: 1px solid #E8E8E8;
+            position: relative;
+
+        }
+    }
+
+    // 호버
+    .choice_ul{
+        > li:hover{
+            .indie_radio_flex{
+                + label{
+                    background-color: #FAFAFD;
+
+                    &::before{
+                        background-color: #383E96;
+                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23fff'/%3E%3C/svg%3E%0A");
+                    }
+                    .txt{
+                        color: black;
+                    }
+                    .addr{
+                        color: #505162;
+                    }
+                }
+            }
+        }
+    }
+}
+
+
+// 검색 - 텍스트
+.indie_value-text{
+    font-size: 12px;
+    color: black;
+    font-weight: 600;
+    // min-height: 35px;
+    min-height: 30px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    line-height: 1.3;
+    word-break: break-all;
+
+    &.black{
+        color: black;
+    }
+    &.primary{
+        color: #383E96;
+    }
+    &.gray{
+        color: #697385;
+    }
+
+    &.flight{
+        display: inline-flex;
+        min-height: auto;
+        flex-direction: row;
+        font-weight: 400;
+        b{
+            font-weight: 700;
+        }
+    }
+
+    &.textL{
+        justify-content: flex-start;
+    }
+    &.alignC{
+        align-items: center;
+    }
+
+    &.normal{
+        display: block;
+        text-align: left;
+    }
+}
+
+
+
+
+
+// 버튼 - 포인트 뷰
+.indie_btn_pointView{
+    height: 25px;
+    border-radius: 20px;
+    background-color: white;
+    border: 1px solid #D5D5D5;
+    color: black;
+    font-size: 11px;
+    font-weight: 500;
+    padding: 0 25px 0 11px;
+    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13.642' height='13.642' viewBox='0 0 13.642 13.642'%3E%3Cpath d='M0,0H13.642V13.642H0Z' fill='none'/%3E%3Cpath d='M8.979,2A3.976,3.976,0,0,0,5,5.979c0,2.984,3.979,7.389,3.979,7.389s3.979-4.405,3.979-7.389A3.976,3.976,0,0,0,8.979,2Zm0,5.4A1.421,1.421,0,1,1,10.4,5.979,1.422,1.422,0,0,1,8.979,7.4Z' transform='translate(-2.158 -0.863)'/%3E%3C/svg%3E%0A") no-repeat right 7px center;
+    transition: .25s;
+    &:hover{
+        background-color: darken(white, 5%);
+    }
+}
+
+// 번역 버튼
+.indie_btn_translation_nor{
+    height: 28px;
+    padding: 0 35px 0 15px;
+    border-radius: 8px;
+    border: 1px solid #696C89;
+    font-size: 12px;
+    color: #383E96;
+    font-weight: 500;
+    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpath d='M0,0H18V18H0Z' fill='none'/%3E%3Cpath d='M9.873,11.732l-1.9-1.869L8,9.841A13.031,13.031,0,0,0,10.77,4.978h2.19V3.489H7.728V2h-1.5V3.489H1V4.971H9.35A11.69,11.69,0,0,1,6.98,8.962,11.648,11.648,0,0,1,5.254,6.468h-1.5a13.071,13.071,0,0,0,2.228,3.4L2.181,13.6l1.062,1.057L6.98,10.935l2.325,2.316.568-1.519Zm4.209-3.775h-1.5L9.223,16.892h1.5l.837-2.234h3.551l.845,2.234h1.5Zm-1.959,5.212,1.211-3.224,1.211,3.224Z' transform='translate(-0.223 -0.446)' fill='%23383e96'/%3E%3C/svg%3E") no-repeat right 5px center;
+    transition: .25s;
+    &:hover{
+        background-color: darken(white, 5%);
+    }
+}
+
+// change 버튼
+.indie_btn_AreaChange{
+    height: 25px;
+    border-radius: 20px;
+    background-color: white;
+    border: 1px solid #D5D5D5;
+    color: #569AFF;
+    font-size: 11px;
+    font-weight: 500;
+    padding: 0 25px 0 11px;
+    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 11 11'%3E%3Cpath d='M11.973,8.039a3.69,3.69,0,0,0,0-1.078l1.193-.908a.272.272,0,0,0,.068-.352L12.1,3.8a.288.288,0,0,0-.345-.121l-1.408.55a4.161,4.161,0,0,0-.956-.539L9.18,2.231A.273.273,0,0,0,8.9,2H6.641a.273.273,0,0,0-.277.231L6.149,3.689a4.375,4.375,0,0,0-.956.539l-1.408-.55a.279.279,0,0,0-.345.121L2.31,5.7a.266.266,0,0,0,.068.352l1.193.908a4.245,4.245,0,0,0-.04.539,4.245,4.245,0,0,0,.04.539l-1.193.907A.272.272,0,0,0,2.31,9.3l1.131,1.9a.288.288,0,0,0,.345.121l1.408-.55a4.161,4.161,0,0,0,.956.539l.215,1.457A.273.273,0,0,0,6.641,13H8.9a.273.273,0,0,0,.277-.231l.215-1.457a4.375,4.375,0,0,0,.956-.539l1.408.55A.279.279,0,0,0,12.1,11.2l1.131-1.9a.272.272,0,0,0-.068-.352Zm-4.2,1.386A1.926,1.926,0,1,1,9.751,7.5,1.955,1.955,0,0,1,7.772,9.425Z' transform='translate(-2.271 -2)' fill='%23569aff'/%3E%3C/svg%3E") no-repeat right 7px center;
+    transition: .25s;
+    &:hover{
+        background-color: darken(white, 5%);
+    }
+}
+
+// 버튼
+.indie_btn_addPoi{
+    height: 42px;
+    padding: 0 20px 0 40px;
+    min-width: 135px;
+    border-radius: 30px;
+    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M14.5,8.5h-3v-3a1.5,1.5,0,1,0-3,0l.053,3H5.5a1.5,1.5,0,1,0,0,3l3.053-.053L8.5,14.5a1.5,1.5,0,0,0,3,0V11.447l3,.053a1.5,1.5,0,0,0,0-3Z' transform='translate(-4 -4)' fill='%23569aff'/%3E%3C/svg%3E") no-repeat left 15px center;
+    border: 1px dashed #569AFF;
+    color: #569AFF;
+    font-size: 12px;
+    font-weight: 600;
+    text-align: right;
+    box-shadow: 0 2px 5px rgba(0, 0, 0, .16);
+    transition: .25s;
+    &:hover{
+        background-color: darken(white, 5%);
+    }
+}
+
+
+// 작은 닫기 버튼
+.indie_btn_close_sm{
+    display: inline-block;
+    vertical-align: middle;
+    width: 15px;
+    height: 15px;
+    border-radius: 50%;
+    overflow: hidden;
+    text-indent: -9999px;
+    background-color: rgba(0, 0 ,0, .7);
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M19,6.41,17.59,5,12,10.59,6.41,5,5,6.41,10.59,12,5,17.59,6.41,19,12,13.41,17.59,19,19,17.59,13.41,12Z' transform='translate(-5 -5)' fill='%23fff'/%3E%3C/svg%3E%0A");
+    background-repeat: no-repeat;
+    background-size: 6px;
+    background-position: center center;
+    transition: background-color .2s;
+    &:hover,
+    &:focus{
+        background-color: rgba(0, 0 ,0, .9);
+    }
+
+    &.lg{
+        width: 27px;
+        height: 27px;
+        background-size: 13px;
+    }
+}
+
+
+// 태그 - 텍스트
+.indie_tag_close{
+    display: inline-flex;
+    align-items: center;
+    margin: 3px;
+    background-color: white;
+    width: 100%;
+    span{
+        font-size: 12px;
+        word-break: break-all;
+        flex-grow: 1;
+    }
+    .btn_close_sm{
+        flex-shrink: 0;
+        margin-left: 10px;
+    }
+    &.sm{
+        margin: 0 5px;
+        span{
+            font-size: 12px;
+            color: #697385;
+        }
+    }
+    &.full{
+        gap: 5px;
+        flex-wrap: wrap;
+        .btn_close_sm{
+            margin-left: 0;
+        }
+    }
+    &.gap{
+        flex-wrap: wrap;
+        gap: 3px 8px;
+        padding-right: 25px;
+        position: relative;
+
+        .btn_close_sm{
+            position: absolute;
+            right: 0;
+            top: 0;
+            margin-left: 0;
+        }
+    }
+    .rb{
+        margin-left: auto;
+        flex-grow: 0;
+    }
+
+    span.primary-t{
+        color: #383E96;
+    }
+
+    &.round{
+        border: 1px solid #CECECE;
+        border-radius: 30px;
+        padding: 5px 10px 5px 15px;
+        &.space{
+            .btn_close_sm{
+                margin-left: 20px;
+            }
+        }
+    }
+
+    &.pdR{
+        .btn_close_sm{
+            margin-left: 20px;
+        }
+    }
+
+    &.btnNo{
+        padding: 5px 17px;
+        min-width: auto;
+        .btn_close_sm{
+            display: none;
+        }
+    }
+}
+
+// 태그 round
+.indie_tag_round{
+    display: inline-flex;
+    vertical-align: middle;
+    margin: 3px;
+    font-size: 12px;
+    font-weight: 500;
+    color: black;
+    border-radius: 30px;
+    border: 1px solid #E5E5E5;
+    padding: 6px 15px;
+    background-color: white;
+    &.light{
+        font-weight: 400;
+    }
+
+    &.gray{
+        font-weight: 500;
+        color: #697385;
+    }
+}
+
+
+
+//폼 체크 라디오 - Check, Radio
+.indie_check_base{
+    display: none;
+    &.xs{
+        + label{
+            font-size: 12px;
+            color: #0B205F;
+            &::before{
+                width: 16px;
+                height: 16px;
+                background-size: 9px;
+            }
+        }
+        &.fz{
+            + label{
+                font-size: 12px;
+            }
+        }
+    }
+    &.sm{
+        + label{
+            font-size: 12px;
+            &::before{
+                width: 20px;
+                height: 20px;
+                background-size: 9px;
+            }
+        }
+    }
+    &.sm2{
+        + label{
+            font-size: 12px;
+            &::before{
+                width: 24px;
+                height: 24px;
+                background-size: 12px;
+            }
+        }
+    }
+    &.black{
+        + label{
+            color: black;
+            font-weight: 500;
+            font-size: 12px;
+        }
+    }
+
+    &.color{
+        + label{
+            color: #B6B9CB;
+        }
+        &:checked + label{
+            color: #383E96;
+        }
+        &-black{
+            &:checked + label{
+                color: black;
+            }
+        }
+    }
+
+    &.block{
+        + label{
+            display: block;
+            padding-left: 25px;
+            position: relative;
+            .tit{
+                font-weight: 700;
+                font-size: 12px;
+            }
+            .txt{
+                font-size: 12px;
+                font-weight: 400;
+                margin: 2px 0;
+            }
+            &::before{
+                position: absolute;
+                left: 0;
+                top: 0px;
+            }
+        }
+    }
+
+    &.white{
+        + label{
+            color: rgba(255, 255, 255, .28);
+            &::before{
+                opacity: .28;
+                background-color: transparent;
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17.59' height='13.41' viewBox='0 0 17.59 13.41'%3E%3Cpath d='M9,16.17,4.83,12,3.41,13.41,9,19,21,7,19.59,5.59Z' transform='translate(-3.41 -5.59)' fill='%23fff'/%3E%3C/svg%3E");
+            }
+        }
+        &:checked + label{
+            color: white;
+            &::before{
+                opacity: 1;
+                background-color: white;
+                border-color: white;
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17.59' height='13.41' viewBox='0 0 17.59 13.41'%3E%3Cpath d='M9,16.17,4.83,12,3.41,13.41,9,19,21,7,19.59,5.59Z' transform='translate(-3.41 -5.59)' fill='%23383E96'/%3E%3C/svg%3E");
+            }
+        }
+    }
+
+    &.only{
+        + label{
+            &::before{
+                margin-right: 0;
+            }
+        }
+    }
+    + label{
+        cursor: pointer;
+        display: inline-flex;
+        align-items: center;
+        &::before{
+            flex-shrink: 0;
+            content: "";
+            display: inline-block;
+            // width: 30px;
+            // height: 30px;
+            width: 26px;
+            height: 26px;
+            border-radius: 50%;
+            background-color: white;
+            border: 1px solid #BCBDCB;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17.59' height='13.41' viewBox='0 0 17.59 13.41'%3E%3Cpath d='M9,16.17,4.83,12,3.41,13.41,9,19,21,7,19.59,5.59Z' transform='translate(-3.41 -5.59)' fill='%23BCBDCB'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: 13px;
+            margin: 0 8px 0 0;
+            transition: background-color .25s;
+        }
+        &.lg{
+            font-size: 12px;
+            font-weight: 600;
+        }
+    }
+    &:checked{
+        + label{
+            &::before{
+                background-color: #383E96;
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17.59' height='13.41' viewBox='0 0 17.59 13.41'%3E%3Cpath d='M9,16.17,4.83,12,3.41,13.41,9,19,21,7,19.59,5.59Z' transform='translate(-3.41 -5.59)' fill='%23fff'/%3E%3C/svg%3E");
+            }
+        }
+    }
+
+    @media (max-width: 1450px){
+        + label{
+            &::before{
+                width: 25px;
+                height: 25px;
+                background-size: 13px;
+            }
+        }
+    }
+}
+
+
+.indie_radio_flex{
+    display: none;
+
+    &.back{
+        + label{
+            display: grid;
+            grid-template-columns: 1fr auto;
+            &::before{
+                grid-column: 2/3;
+                grid-row: 1 / span 50;
+                flex-shrink: 0;
+                margin: 0 0 0 15px;
+                align-self: center;
+            }
+            &:has(.addr){
+                &::before{
+                    align-self: flex-start;
+                }
+            }
+        }
+    }
+
+    &.sm{
+        + label{
+            &::before{
+                width: 20px;
+                height: 20px;
+                margin: 0 10px 0 0;
+                background-size: 10px;
+            }
+        }
+    }
+
+
+    + label{
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        padding: 12px 15px;
+        transition: background-color .25s;
+        cursor: pointer;
+        
+        &::before{
+            flex-shrink: 0;
+            content: "";
+            display: inline-block;
+            width: 26px;
+            height: 26px;
+            border-radius: 50%;
+            background-color: white;
+            border: 1px solid #BCBDCB;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23BCBDCB'/%3E%3C/svg%3E%0A");
+            background-repeat: no-repeat;
+            background-position: center center;
+            margin: 0 15px 0 0;
+            transition: background-color .25s;
+        }
+
+        .txt{
+            font-size: 12px;
+            font-weight: 600;
+            color: #697385;
+            flex: 1;
+            word-break: break-all;
+            display: block;
+            b{
+                text-decoration: underline;
+                font-weight: 800;
+                color: #383E96;
+            }
+        }
+
+        .addr{
+            display: block;
+            width: 100%;
+            font-size: 12px;
+            font-weight: 500;
+            color: #A3A5BD;
+            margin-top: 5px;
+            flex: 1;
+            word-break: break-all;
+            b{
+                text-decoration: underline;
+                font-weight: 700;
+                color: #383E96;
+            }
+        }
+    }
+
+    &:checked{
+        + label{
+            background-color: #383E96;
+            &::before{
+                background-color: #383E96;
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Ccircle cx='5' cy='5' r='5' fill='%23fff'/%3E%3C/svg%3E%0A");
+            }
+            .txt{
+                color: black;
+            }
+            .addr{
+                color: #505162;
+            }
+        }
+    }
+}
+
+
+// 스위치
+.indie_switch_type_5{
+    display: none;
+    
+    ~ label{
+        height: 18px; 
+        line-height: 18px; 
+        background-color: #C2C7D7;
+        padding: 0 11px 0 24px;
+        border-radius: 30px; 
+        cursor: pointer;
+        position: relative;
+        width: auto; 
+        display: inline-block; 
+        vertical-align: middle; 
+        font-weight: 600;
+        color: white;
+        font-size: 11px; 
+
+        span{
+            font-size: 11px; 
+            display: block; 
+            position: relative; 
+            text-align: center;
+            line-height: inherit;
+            color: #D0D2E1;
+            font-weight: 600;
+            &.confirm{
+                display: none;
+                color: white; 
+            }
+            &.none_confirm{
+                color: white; 
+            }
+        }
+        &::before{
+            content: ''; 
+            display: block; 
+            width: 14px; 
+            height: 14px; 
+            background-color: white; 
+            position: absolute; 
+            top: 2px; 
+            left: 3px; 
+            border-radius: 50%; 
+            transition: all .1s;
+        }
+    }
+    
+    &:checked{
+        ~ label{
+            padding: 0 24px 0 11px;
+            background-color: #3F9CED;
+            font-weight: 600;
+
+            .confirm{
+                display: block;
+            }
+            .none_confirm{
+                display: none;
+            }
+            
+            &::before{
+                left: calc(100% - 17px);
+            }
+        }
+    }
+}
+
+
+
+// 박스
+.indie_f-row{
+    display: flex;
+    flex-wrap: wrap;
+    gap: 5px;
+    align-items: center;
+
+    &.mgt5{
+        margin-top: 5px;
+    }
+
+    .mg-l-auto{
+        margin-left: auto;
+    }
+
+
+    .flexOne_1{
+        flex: 1;
+    }
+}
+
+// 복사 버튼
+.indie_btn_copy_1{
+    height: 30px;
+    border-radius: 8px;
+    text-align: center;
+    padding-left: 15px;
+    padding-right: 38px;
+    font-size: 12px;
+    background: white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='16' viewBox='0 0 14 16'%3E%3Cpath d='M12.316,1H3.474A1.469,1.469,0,0,0,2,2.455V12.637H3.474V2.455h8.842Zm2.211,2.909H6.421A1.469,1.469,0,0,0,4.947,5.364V15.546A1.469,1.469,0,0,0,6.421,17h8.105A1.469,1.469,0,0,0,16,15.546V5.364A1.469,1.469,0,0,0,14.526,3.909Zm0,11.637H6.421V5.364h8.105Z' transform='translate(-2 -1)'/%3E%3C/svg%3E%0A") no-repeat right 10px center / 15px;
+    border: 1px solid #D3D3D3;
+    transition: .25s;
+    &:hover{
+        background-color: darken(white, 5%);
+    }
+}
+
+
+
+
+
+// ****************************************************************************
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// 예약생성 - 스케쥴 수정
+//배차 - 탑승자 정보 - 팝업
+.indie_passengers_info_pop{
+    position: relative;
+    overflow-y: auto !important;
+    flex-shrink: 0;
+    .btn_close{
+        position: absolute;
+        right: 30px;
+        top: 25px;
+        z-index: 10;
+    }
+    .gray_info_normal{
+        min-height: 200px;
+    }
+}
+
+.indie_pop_passenger_infos{
+    position: relative;
+    padding: 20px 30px 45px;
+
+    .title{
+        padding-right: 30px;
+        margin-bottom: 25px;
+        .sbj{
+            font-size: 35px;
+            font-weight: 600;
+            color: #0B205F;
+            vertical-align: middle;
+            letter-spacing: 0;
+            padding: 0 5px;
+            margin-bottom: 5px;
+        }
+        .code{
+            display: inline-block;
+            vertical-align: middle;
+            border-radius: 35px;
+            padding: 3px 17px;
+            color: #0B205F;
+            color: white;
+            font-size: 12px;
+            font-weight: 600;
+        }
+    }
+
+    .representive_box{
+        position: relative;
+        padding-right: 45px;
+        .btn_print{
+            position: absolute;
+            right: 0;
+            top: 60%;
+            transform: translateY(-50%);
+        }
+        dl{
+            dt{
+                font-size: 12px;
+                color: #697385;
+                margin-bottom: 5px;
+            }
+            dd{
+                .name{
+                    font-size: 24px;
+                    font-weight: 600;
+                    color: #383E96;
+                    margin-bottom: 5px;
+                    .gender{
+                        font-size: 18px;
+                        margin-left: 3px;
+                    }
+                }
+                .number{
+                    font-size: 15px;
+                    font-weight: 600;
+                    color: #383E96;
+                    letter-spacing: 0;
+                }
+                .place{
+                    font-size: 13px;
+                    color: #383E96;
+                    letter-spacing: 0;
+                }
+            }
+        }
+    }
+
+    .passenger_detail{
+        max-height: 0;
+        overflow: hidden;
+        transition: max-height .7s cubic-bezier(0, 1, 0, 1), z-index .5s ease;
+
+        .tit{
+            margin-top: 25px;
+            display: flex;
+            justify-content: space-between;
+            margin-bottom: 5px;
+            span{
+                font-size: 12px;
+                color: #697385;
+                padding: 0 3px;
+            }
+            // .rb{
+            //     flex-basis: 70px;
+            // }
+            .passenger{
+                width: 50%;
+            }
+            .birth{
+                width: 30%;
+            }
+            .gender{
+                width: 20%;
+            }
+        }
+        .list{
+            > li{
+                display: flex;
+                padding: 10px 0;
+                border-top: 1px dashed #DBDBDB;
+                &:first-child{
+                    border-top: none;
+                }
+                .passenger{
+                    font-size: 13px;
+                    color: #383E96;
+                    font-weight: 600;
+                    flex-grow: 1;
+                    padding: 0 3px;
+                    word-break: break-all;
+                }
+                .birth{
+                    font-size: 13px;
+                    color: #383E96;
+                    font-weight: 600;
+                    letter-spacing: 0;
+                    flex-shrink: 0;
+                    flex-basis: 30%;
+                    padding: 0 3px;
+                    word-break: break-all;
+                }
+                .gender{
+                    font-size: 13px;
+                    color: #383E96;
+                    font-weight: 600;
+                    flex-shrink: 0;
+                    flex-basis: 20%;
+                    padding: 0 3px;
+                }
+            }
+        }
+
+        &.on{
+            max-height: 1000px;
+            transition: max-height 1s ease-in-out, z-index 1s ease-in-out;
+        }
+    }
+
+
+    .btn_arrow_wide{
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        height: 36px;
+        width: 100%;
+        overflow: hidden;
+        text-indent: -9999px;
+        background-color: white;
+        transition: background-color .25s;
+        &::before{
+            content: "";
+            width: 42px;
+            height: 8px;
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44.1' height='8.557' viewBox='0 0 44.1 8.557'%3E%3Cpath d='M161.164,13.748l21.09,7.391,21.738-7.391' transform='translate(-160.527 -13.11)' fill='none' stroke='%23383e96' stroke-linecap='round' stroke-width='1'/%3E%3C/svg%3E");
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%) rotate(0);
+            transition: transform .25s;
+        }
+        &.on{
+            &::before{
+                transform: translate(-50%, -50%) rotate(180deg);
+            }
+        }
+        &:hover{
+            background-color: darken(white, 2%);
+        }
+    }
+}
+
+
+.indie_dispatch_passenger_sche_w{
+    display: flex;
+    width: 100%;
+    height: 100%;
+
+    &.invoice_detail{
+        display: grid;
+        grid-template-rows: 1fr;
+        grid-template-columns: minmax(250px, 1fr) minmax(350px, 460px) minmax(400px, 560px);
+        .passenger_box{
+            width: auto;
+        }
+        .price_inner_pops{
+            position: relative;
+        }
+        .pop_passenger_infos{
+            padding-top: 20px;
+        }
+    }
+    
+    &.bill_management{
+        display: grid;
+        grid-template-rows: 1fr;
+        grid-template-columns: minmax(400px, 490px) minmax(450px, 1fr);
+        .passenger_box{
+            width: auto;
+            z-index: 1;
+        }
+        .price_inner_pops{
+            z-index: 2;
+        }
+    }
+    
+    
+    
+    // 예약스케쥴
+    &.booking_schedule{
+        display: grid;
+        grid-template-columns: minmax(300px, 1fr) minmax(1000px, 1250px);
+        grid-template-rows: 1fr;
+        overflow: auto;
+    }
+
+
+    .map_box{
+        flex-grow: 1;
+        background-color: Azure;
+        position: relative;
+
+        .indie_ic_map_loca{
+            position: absolute;
+            z-index: 10;
+        }
+
+        .put_map_box{
+            position: relative;
+            width: 100%;
+            height: 100%;
+            background-color: royalblue;
+        }
+    }
+
+    .passenger_box{
+        flex-shrink: 0;
+        width: 460px;
+        display: flex;
+        flex-direction: column;
+        overflow-y: auto;
+
+        .bottoms_add{
+            height: 90px;
+            flex-shrink: 0;
+            border-top: 1px solid #B6B9CC;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            align-items: center;
+            padding: 10px;  
+            gap: 10px 45px;    
+        }
+        .total_dl{
+            padding-left: 40px;
+            background-repeat: no-repeat;
+            background-position: left center;
+            &.distance{
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12'%3E%3Cpath d='M21,6H3A2.006,2.006,0,0,0,1,8v8a2.006,2.006,0,0,0,2,2H21a2.006,2.006,0,0,0,2-2V8A2.006,2.006,0,0,0,21,6Zm0,10H3V8H5v4H7V8H9v4h2V8h2v4h2V8h2v4h2V8h2Z' transform='translate(-1 -6)'/%3E%3C/svg%3E");
+            }
+            &.period{
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='21' viewBox='0 0 18 21'%3E%3Cpath id='ic_timer_24px' d='M15,1H9V3h6ZM11,14h2V8H11Zm8.03-6.61,1.42-1.42a11.048,11.048,0,0,0-1.41-1.41L17.62,5.98a9,9,0,1,0,1.41,1.41ZM12,20a7,7,0,1,1,7-7A6.995,6.995,0,0,1,12,20Z' transform='translate(-3 -1)'/%3E%3C/svg%3E");
+            }
+            dt{
+                font-size: 12px;
+                color: black;
+            }
+            dd{
+                font-size: 18px;
+                font-weight: 700;
+                color: black;
+            }
+        }
+
+        .place_list_wrap{
+            flex-grow: 1;
+            display: flex;
+            flex-direction: column;
+            overflow-y: auto;
+            border-top: 1px solid #D0D0EA;
+            position: relative;
+
+            .search_white_wrap{
+                border-bottom: none;
+                display: none;
+                transition: .25s;
+                z-index: 15;
+
+                &.focus-in{
+                    box-shadow: 0px 10px 10px rgba(0, 0, 0, .15);
+                    border: 1px solid #383E96;
+                    border-radius: 8px;
+                    margin: 10px 15px 0;
+                    // background-color: #1B206A;
+                    .s_txt{
+                        &::placeholder{
+                            transition: .25s;
+                            font-weight: 700;
+                            color: #4D58A5;
+                        }
+                    }
+                    .position_search{
+                        top: 100%;
+                        left: 8px;
+                        width: calc(100% - 16px);
+                    }
+                }
+            }
+
+            .search_text_typing{
+                position: absolute;
+                left: 0;
+                top: 73px;
+                width: 100%;
+                height: calc(30% - 73px);
+                z-index: 10;
+                background-color: #EFF0F8;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+                p{
+                    font-size: 18px;
+                    color: #B1B3C3;
+                    font-weight: 700;
+                }
+            }
+
+            .gray_info_normal{
+                border-top: none;
+                overflow-y: inherit;
+            }
+
+            .indie_schedule_drag_list{
+                .data{
+                    .b_drag{display: none;}
+                    .b_close{display: none;}
+                }
+            }
+
+            &.manual{
+                .search_white_wrap{
+                    display: flex;
+                }
+                .indie_schedule_drag_list{
+                    > li:not(.start):not(.end){
+                        .data{
+                            padding-left: 40px;
+                            .b_drag{display: block;}
+                            .b_close{display: block;}
+                        }
+                    }
+                    .btn_nor.xs{
+                        height: 22px;
+                        font-size: 11px;
+                        font-weight: 400;
+                        margin-top: 15px;
+                    }
+                }
+            }
+
+            
+        }
+    }
+
+
+    .price_inner_pops{
+        overflow: auto;
+        box-shadow: -5px 0 6px rgba(0, 0, 0, .16);
+        display: flex;
+        flex-direction: column;
+
+        .top_box{
+            h4{
+                font-size: 24px;
+                font-weight: 700;
+                color: black;
+            }
+        }
+
+        .basic_price_box{
+            padding: 20px 35px;
+            border-bottom: 1px dashed #E5E5E5;
+            .sbj{
+                font-size: 13px;
+                color: #383E96;
+            }
+            .price{
+                font-size: 18px;
+                color: #383E96;
+                font-weight: 700;
+            }
+        }
+
+        .basic_price_wrapper{
+            padding: 25px 35px;
+            border-bottom: 1px dashed #E5E5E5;
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px 50px;
+            align-items: flex-start;
+            justify-content: center;
+            dl{
+                dt{
+                    font-size: 13px;
+                    color: #383E96;
+                }
+                dd{
+                    font-size: 18px;
+                    color: #383E96;
+                    font-weight: 700;
+                }
+            }
+        }
+        .add_item_box{
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            padding: 17px 20px 17px 35px;
+            gap: 5px;
+            .sbj{
+                font-size: 13px;
+                color: #383E96;
+            }
+            .btn_nor.line-black{
+                margin-left: auto;
+            }
+        }
+
+        .table_box{
+            overflow: auto;
+            min-height: 300px;
+        }
+
+        .total_price{
+            text-align: right;
+            padding: 15px 25px;
+            border-top: 1px solid #B6B9CC;
+            background-color: #EFF0F8;
+            p{
+                font-size: 12px;
+                font-weight: 700;
+                color: black;
+                letter-spacing: 0;
+                b{
+                    font-weight: 700;
+                    margin-left: 7px;
+                    font-size: 18px;
+                }
+            }
+        }
+
+        .bottom_box{
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            gap: 5px;
+            height: 90px;
+            padding: 10px 20px;
+        }
+    }
+
+    .pop_inside_wrap{
+        .botton_box{
+            padding: 25px;
+            text-align: center;
+            border-top: 1px solid #E5E5E5;
+        }
+    }
+    
+}
+
+
+
+
+
+.indie_booking_schedule_modify_box{
+    height: 100%;
+    overflow: auto;
+    display: flex;
+    flex-direction: column;
+
+    .header_b{
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px 15px; 
+        align-items: center;
+        border-bottom: 1px solid #B6B9CC;
+        flex-shrink: 0;
+        padding: 15px 20px;
+        padding-right: 70px;
+
+        .tags{
+            height: 30px;
+            border-radius: 20px;
+            display: flex;
+            background-color: #0B205F;
+            span{
+                color: white;
+                font-weight: 600;
+                font-size: 14px;
+                display: flex;
+                align-items: center;
+                padding: 0 15px 0 25px;
+            }
+            strong{
+                border-radius: 20px;
+                color: white;
+                font-weight: 600;
+                font-size: 16px;
+                display: flex;
+                align-items: center;
+                padding: 0 20px;
+                background-color: #1B3EA7;
+            }
+        }
+
+        .date_text{
+            line-height: 30px;
+            font-size: 16px;
+            color: black;
+            font-weight: 600;
+            margin-left: 10px;
+        }
+        
+        .indie_select_nor{
+            height: 30px;
+            border: none;
+            color: black;
+            font-size: 16px;
+            font-weight: 700;
+            padding-right: 50px;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath d='M5.143,1.429a1,1,0,0,1,1.715,0l4.234,7.056A1,1,0,0,1,10.234,10H1.766A1,1,0,0,1,.909,8.486Z' transform='translate(12 10) rotate(180)' fill='%23232323'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: right center;
+            padding-left: 0;
+            &:focus,
+            &:hover{
+                box-shadow: none;
+            }
+        }
+    }
+
+    .contents_b{
+        flex-grow: 1;
+        overflow: auto;
+        display: flex;
+        :where(.serviceZone, .scheduleZone, .bookingInfoZone){
+            border-left: 1px solid #B6B9CC;
+            display: flex;
+            flex-direction: column;
+            overflow: auto;
+            h3{
+                font-size: 16px;
+                font-weight: 800;
+                color: #0B205F;
+                padding: 25px 10px 20px 30px;
+                flex-shrink: 0;
+            }
+        }
+        .serviceZone{
+            border-left: none;
+        }
+    }
+
+    .serviceZone{
+        width: 230px;
+        flex-shrink: 0;
+
+        .list_box{
+            padding: 10px 20px 20px;
+            flex: 1;
+            min-height: 0;
+            overflow: auto;
+        }
+
+        .indie_schedule_drag_list{
+
+            > li:not(.start, .end){
+                .dot_txt{
+                    background-color: #919EDE;
+                    border: 6px solid #3F55C4;
+                }
+            }
+            .service_data{
+                padding-top: 20px;
+                .sbj{
+                    font-size: 11px;
+                    color: #8F9CB4;
+                    margin-bottom: 5px;
+                    font-weight: 500;
+                }
+                .city{
+                    font-size: 13px;
+                    font-weight: 600;
+                    color: black;
+                }
+                .city_gather{
+                    display: flex;
+                    flex-direction: column;
+                    align-items: flex-start;
+                    .tag_round{
+                        display: inline-flex;
+                    }
+                }
+            }
+        }
+    }
+
+    .scheduleZone{
+        flex: 1;
+        background-color: #FAFAFD;
+        
+        .schedule_box{
+            flex: 1;
+            min-height: 0;
+            overflow: auto;
+            padding: 10px 25px;
+
+            .indie_schedule_drag_list{
+                > li{
+                    &.start,
+                    &.end{
+                        .data{
+                            padding-right: 25px;
+                            border-color: transparent;
+                        }
+                    }
+                    .data{
+                        margin-left: 0;
+
+                        &:has(.b_close){
+                            padding-right: 24px;
+                            padding-top: 20px;
+                        }
+                        .indie_btn_pointView,
+                        .indie_btn_AreaChange{
+                            margin-top: 10px;
+                        }
+
+                        .top_b{
+                            display: flex;
+                            align-items: center;
+                            gap: 10px;
+                            margin-bottom: 5px;
+                            .lb{
+                                flex: 1;
+                                min-width: 0;
+                                word-break: break-all;
+                            }
+                            .case{
+                                position: relative;
+                                left: 0;
+                                top: 0;
+                                flex-shrink: 0;
+                            }
+                            .booking_place{
+                                margin-bottom: 0;
+                            }
+                        }
+                        .booking_time{
+                            font-size: 11px;
+                            font-weight: 700;
+                            margin-bottom: 5px;
+                        }
+                        .booking_place{
+                            font-size: 14px;
+                            font-weight: 500;
+                            color: #5375C4;
+                            display: flex;
+                            flex-wrap: wrap;
+                            gap: 5px 10px;
+                            align-items: center;
+                            margin-bottom: 5px;
+                        }
+                        .booking_addr{
+                            margin-top: 3px;
+                            font-size: 12px;
+                            color: #AFB3B9;
+                            line-height: 1.5;
+                            font-weight: 500;
+                        }
+
+                        &:not(:has(.b_drag)){
+                            padding-left: 20px;
+                        }
+
+                        .indie_search-normal-comp{
+                            margin-top: 12px;
+                        }
+                    }
+
+                    .b_close{
+                        display: inline-block;
+                        vertical-align: middle;
+                        width: 15px;
+                        height: 15px;
+                        border-radius: 50%;
+                        overflow: hidden;
+                        text-indent: -9999px;
+                        background-color: rgba(0, 0 ,0, .7);
+                        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M19,6.41,17.59,5,12,10.59,6.41,5,5,6.41,10.59,12,5,17.59,6.41,19,12,13.41,17.59,19,19,17.59,13.41,12Z' transform='translate(-5 -5)' fill='%23fff'/%3E%3C/svg%3E");
+                        background-repeat: no-repeat;
+                        background-size: 6px;
+                        background-position: center center;
+                        transition: background-color .2s;
+                        &:hover,
+                        &:focus{
+                            background-color: rgba(0, 0 ,0, .9);
+                        }
+
+                        right: 10px;
+                        top: 10px
+                    }
+                }
+
+                .indie_btn_addPoi{
+                    position: relative;
+                    left: -45px;
+                    z-index: 10;
+                }
+            }
+        }
+
+        .bottoms_add{
+            flex-shrink: 0;
+            background-color: white;
+            border-top: 1px solid #B6B9CC;
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: center;
+            align-items: center;
+            gap: 2px 45px;
+            padding: 20px 20px;
+            .total_dl{
+                padding-left: 28px;
+                background-repeat: no-repeat;
+                background-position: left center;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                min-height: 22px;
+                &.distance{
+                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='12' viewBox='0 0 22 12'%3E%3Cpath d='M21,6H3A2.006,2.006,0,0,0,1,8v8a2.006,2.006,0,0,0,2,2H21a2.006,2.006,0,0,0,2-2V8A2.006,2.006,0,0,0,21,6Zm0,10H3V8H5v4H7V8H9v4h2V8h2v4h2V8h2v4h2V8h2Z' transform='translate(-1 -6)'/%3E%3C/svg%3E");
+                }
+                &.period{
+                    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='21' viewBox='0 0 18 21'%3E%3Cpath d='M15,1H9V3h6ZM11,14h2V8H11Zm8.03-6.61,1.42-1.42a11.048,11.048,0,0,0-1.41-1.41L17.62,5.98a9,9,0,1,0,1.41,1.41ZM12,20a7,7,0,1,1,7-7A6.995,6.995,0,0,1,12,20Z' transform='translate(-3 -1)'/%3E%3C/svg%3E");
+                }
+                dt{
+                    font-size: 12px;
+                    color: #323341;
+                    margin-right: 7px;
+                }
+                dd{
+                    font-size: 18px;
+                    font-weight: 700;
+                    color: #323341;
+                }
+            }
+        }
+    }
+
+    .bookingInfoZone{
+        flex: 1.05;
+
+        h3{
+            display: flex;
+            flex-wrap: wrap;
+            gap: 10px;
+            align-items: center;
+            .indie_btn_copy_1{
+                margin-left: auto;
+                margin-right: 10px;
+            }
+        }
+
+        .table_box{
+            flex: 1;
+            overflow: auto;
+            min-height: 0;
+            border-top: 1px solid #111426;
+            .tbl_bookingInfo{
+                margin-top: -1px;
+            }
+        }
+        .tbl_bookingInfo{
+            width: 100%;
+            border-top: 1px solid #111426;
+            table-layout: fixed;
+            border-collapse: collapse;
+            vertical-align: middle;
+            tr{
+                border-bottom: 1px solid #DEDEDE;
+                vertical-align: middle;
+            }
+            th{
+                text-align: left;
+                padding: 13px 13px 13px 20px;
+                font-size: 12px;
+                color: #697385;
+                font-weight: 500;
+                border-right: 1px solid #DEDEDE;
+            }
+            td{
+                vertical-align: middle;
+                padding: 5px 15px;
+                text-align: left;
+                height: 40px;
+            }
+
+            .value-txt{
+                font-size: 12px;
+                font-weight: 500;
+                padding: 6px 0;
+                line-height: 1.5;
+            }
+
+            .check_base + label{
+                font-size: 12px;
+                margin-right: 15px;
+            }
+
+            .tag_round{
+                font-size: 12px;
+            }
+        }
+
+        .modify-textarea{
+            width: 100%;
+            padding: 10px 20px;
+            background-color: white;
+            border: 1px solid #D3D3D3;
+            border-radius: 20px;
+            font-size: 12px;
+            font-weight: 600;
+            line-height: 1.5;
+            height: 105px;
+        }
+
+        .btn_translation_nor{
+            margin-top: 5px;
+            margin-bottom: 5px;
+        }
+    }
+    
+    .footer_b{
+        border-top: 1px solid #B6B9CC;
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        gap: 10px 20px;
+        padding: 20px;
+        .priceAll{
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            gap: 10px 20px;
+            dt{
+                font-size: 12px;
+            }
+            dd{
+                font-size: 16px;
+                font-weight: 600;
+                color: black;
+                span{
+                    color: #EC7777;
+                    margin-right: 5px;
+                }
+                strong{
+                    font-size: inherit;
+                    font-weight: inherit;
+                    color: inherit;
+                }
+            }
+        }
+        .left{
+            margin-right: auto;
+        }
+        .right{
+            margin-left: auto;
+        }
+    }
+}
+
+.indie_booking_occupant_passenger_box{
+    border-bottom: 1px dashed #E5E5E5;
+    padding: 25px 30px 28px;
+    .title_b{
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        margin-bottom: 10px;
+        gap: 10px;
+        padding: 0 10px;
+        .sbj{
+            margin-right: auto;
+            font-size: 14px;
+            color: #383E96;
+        }
+    }
+    .text_nor{
+        margin-bottom: 8px;
+    }
+    .check_box{
+        margin-top: 15px;
+        padding: 0 10px;
+        span{
+            display: inline-block;
+            vertical-align: middle;
+            margin-right: 15px;
+        }
+    }
+}
+
+// 지도 위치 아이콘
+.indie_ic_map_loca{
+    display: inline-flex;
+    vertical-align: top;
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    width: 26px;
+    height: 30px;
+    background-repeat: no-repeat;
+    background-position: center center;
+    background-size: 100%;
+    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='30' viewBox='0 0 26 30'%3E%3Cg transform='translate(0 0)'%3E%3Cg %3E%3Cpath d='M32.192,22.215,25.419,29a3.418,3.418,0,0,1-4.838,0l-6.773-6.781a13.007,13.007,0,1,1,18.384,0' transform='translate(-10 0.001)' fill='%233f55c4'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(0 0.006)'%3E%3Cg %3E%3Cpath d='M23,30.028a3.4,3.4,0,0,1-2.422-1l-6.77-6.777a13,13,0,1,1,18.384,0l-6.77,6.777a3.4,3.4,0,0,1-2.422,1M23,1.759a11.289,11.289,0,0,0-7.975,19.269L21.8,27.8a1.7,1.7,0,0,0,2.409,0l6.77-6.777A11.285,11.285,0,0,0,23,1.759' transform='translate(-10 -0.036)' fill='%23070203'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
+    color: white;
+    font-size: 12px;
+    font-weight: 600;
+    &.start{
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='30' viewBox='0 0 26 30'%3E%3Cg transform='translate(0 0)'%3E%3Cg %3E%3Cpath d='M32.192,22.215,25.419,29a3.418,3.418,0,0,1-4.838,0l-6.773-6.781a13.007,13.007,0,1,1,18.384,0' transform='translate(-10 0.001)' fill='%23e8516c'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(0 0.006)'%3E%3Cg %3E%3Cpath d='M23,30.028a3.4,3.4,0,0,1-2.422-1l-6.77-6.777a13,13,0,1,1,18.384,0l-6.77,6.777a3.4,3.4,0,0,1-2.422,1M23,1.759a11.289,11.289,0,0,0-7.975,19.269L21.8,27.8a1.7,1.7,0,0,0,2.409,0l6.77-6.777A11.285,11.285,0,0,0,23,1.759' transform='translate(-10 -0.036)' fill='%23070203'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
+    }
+    &.end{
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='30' viewBox='0 0 26 30'%3E%3Cg transform='translate(0 0)'%3E%3Cg %3E%3Cpath d='M32.192,22.215,25.419,29a3.418,3.418,0,0,1-4.838,0l-6.773-6.781a13.007,13.007,0,1,1,18.384,0' transform='translate(-10 0.001)' fill='%2345cadf'/%3E%3C/g%3E%3C/g%3E%3Cg transform='translate(0 0.006)'%3E%3Cg %3E%3Cpath d='M23,30.028a3.4,3.4,0,0,1-2.422-1l-6.77-6.777a13,13,0,1,1,18.384,0l-6.77,6.777a3.4,3.4,0,0,1-2.422,1M23,1.759a11.289,11.289,0,0,0-7.975,19.269L21.8,27.8a1.7,1.7,0,0,0,2.409,0l6.77-6.777A11.285,11.285,0,0,0,23,1.759' transform='translate(-10 -0.036)' fill='%23070203'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E%0A");
+    }
+}
+
+
+
+// 스케쥴 리스트
+.indie_schedule_drag_list{
+    > li{
+        position: relative;
+        padding-bottom: 13px;
+        padding-left: 40px;
+        border-color: transparent;
+        &::before{
+            content: "";
+            position: absolute;
+            left: 12px;
+            top: 18px;
+            z-index: 1;
+            display: block;
+            width: 1px;
+            height: 100%;
+            background-color: #DBDBDB;
+        }
+        &.md-dash{
+            &::after{
+                content: "";
+                display: block;
+                position: absolute;
+                left: 12px;
+                top: calc(50% - 6px);
+                width: 27px;
+                height: 1px;
+                border-top: 1px dotted #BCBDCB;
+            }
+        }
+        &:last-child{
+            padding-bottom: 0;
+            &::before{
+                width: 0;
+                height: 0;
+                background-color: transparent;
+            }
+        }
+        .dot_txt{
+            display: block;
+            width: 24px;
+            height: 24px;
+            border-radius: 50%;
+            line-height: 24px;
+            text-align: center;
+            color: white;
+            font-size: 12px;
+            font-weight: 600;
+            background-color: #3F55C4;
+            position: absolute;
+            left: 0;
+            top: 17px;
+            z-index: 5;
+        }
+        .km_txt{
+            display: inline-block;
+            text-align: center;
+            min-width: 40px;
+            line-height: 22px;
+            border-radius: 20px;
+            background-color: white;
+            border: 1px solid #ddd;
+            font-size: 10px;
+            font-family: "Montserrat", "Noto Sans KR", sans-serif;
+            color: #696C89;
+            font-weight: 700;
+            padding: 0 5px;
+            position: absolute;
+            left: 12px;
+            bottom: 10px;
+            z-index: 5;
+            transform: translateX(-50%);
+        }
+        .data{
+            margin-left: 20px;
+            background-color: white;
+            border-radius: 20px;
+            box-shadow: 0 0 6px rgba(0, 0, 0, 0.16);
+            padding: 17px 15px 17px 40px;
+            position: relative;
+            border: 1px solid transparent;
+            .a_place{
+                position: absolute;
+                right: 20px;
+                bottom: 20px;
+                font-size: 13px;
+            }
+            .time_box{
+                margin-top: 10px;
+                &.modify select{
+                    border-color: #383E96;
+                    background-color: #F0FBFF;
+                }
+            }
+            .time_txt{
+                font-size: 12px;
+                margin-top: 10px;
+                b{
+                    font-size: inherit;
+                    font-weight: 600;
+                    color: inherit;
+                    margin: 0 2px;
+                }
+            }
+            .b_drag{
+                display: block;
+                width: 14px;
+                height: 25px;
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='19' viewBox='0 0 10 19'%3E%3Cpath d='M4.186,1.139a1,1,0,0,1,1.627,0l3.057,4.28A1,1,0,0,1,8.057,7H1.943a1,1,0,0,1-.814-1.581Z' fill='%23d1d1d1'/%3E%3Cpath d='M4.186,1.139a1,1,0,0,1,1.627,0l3.057,4.28A1,1,0,0,1,8.057,7H1.943a1,1,0,0,1-.814-1.581Z' transform='translate(10 19) rotate(180)' fill='%23d1d1d1'/%3E%3C/svg%3E");
+                background-repeat: no-repeat;
+                background-position: center center;
+                background-size: 10px;
+                overflow: hidden;
+                text-indent: -9999px;
+                position: absolute;
+                top: 50%;
+                left: 15px;
+                transform: translateY(-50%);
+            }
+            .b_close{
+                display: block;
+                width: 20px;
+                height: 20px;
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='M19,6.41,17.59,5,12,10.59,6.41,5,5,6.41,10.59,12,5,17.59,6.41,19,12,13.41,17.59,19,19,17.59,13.41,12Z' transform='translate(-5 -5)' fill='%23bababa'/%3E%3C/svg%3E");
+                background-repeat: no-repeat;
+                background-position: center center;
+                background-size: 14px;
+                overflow: hidden;
+                text-indent: -9999px;
+                position: absolute;
+                right: 16px;
+                top: 14px;
+            }
+            .case{
+                line-height: 22px;
+                padding: 0 10px;
+                border-radius: 15px;
+                background-color: #3F55C4;
+                color: white;
+                font-size: 11px;
+                font-weight: 500;
+                display: inline-block;
+                position: absolute;
+                right: 16px;
+                top: 16px;
+                &.start{
+                    background-color: #E8516C;
+                }
+                &.end{
+                    background-color: #45CADF;
+                }
+                display: none;
+            }
+            .time{
+                font-size: 11px;
+                color: black;
+                font-family: "Montserrat", "Noto Sans KR", sans-serif;
+                font-weight: 700;
+                margin-bottom: 5px;
+            }
+            .place{
+                font-size: 14px;
+                color: black;
+                margin-bottom: 2px;
+                word-break: break-all;
+            }
+            .addr{
+                font-size: 13px;
+                color: #AFB3B9;
+                word-break: break-all;
+            }
+
+            &.select-add{
+                padding-right: 210px;
+                .user-select{
+                    width: 158px;
+                    position: absolute;
+                    right: 45px;
+                    top: 50%;
+                    transform: translateY(-50%);
+                }
+            }
+        }
+
+        &.start,
+        &.end{
+            .dot_txt{
+                border-width: 6px;
+                border-style: solid;
+            }
+            .b_close{
+                display: none;
+            }
+            .case{
+                display: block;
+            }
+            .b_drag{
+                display: none;
+            }
+            .data{
+                &.select-add{
+                    padding-right: 245px;
+                }
+                .user-select{
+                    right: 85px;
+                }
+                margin-left: 0;
+                padding-left: 25px;
+                padding-right: 75px;
+            }
+        }
+        &.start{
+            .dot_txt{
+                background-color: #FDDBDB;
+                border-color: #E8516C;
+            }
+            .case{
+                background-color: #E8516C;
+            }
+            .data{
+                border-color: #E8516C;
+            }
+            .time_txt{
+                color: #E8516C;
+            }
+        }
+        &.end{
+            .dot_txt{
+                background-color: #C8EBF0;
+                border-color: #45CADF;
+            }
+            .km_txt{
+                display: none;
+            }
+            .case{
+                background-color: #45CADF;
+            }
+            .data{
+                border-color: #45CADF;
+            }
+            .time_txt{
+                color: #1696CE;
+            }
+        }
+        &.select{
+            .dot_txt{
+                background-color: #E8516C;
+            }
+            .data{
+                border: 1px solid #323341;
+                .place{
+                    color: #000;
+                    font-weight: 600;
+                }
+            }
+        }
+        &.start_num{
+            .b_close{
+                display: none;
+            }
+            .case{
+                display: block;
+                background-color: #E8516C;
+            }
+        }
+        &.end_num{
+            .b_close{
+                display: none;
+            }
+            .km_txt{
+                display: none;
+            }
+            .case{
+                display: block;
+                background-color: #45CADF;
+            }
+        }
+    }
+
+
+
+    &.complete{
+        .data{
+            margin-left: 0;
+            padding-left: 25px;
+            .place{
+                font-size: 13px;
+                font-weight: 600;
+                color: #5375C4;
+            }
+            .addr{
+                margin-top: 5px;
+                font-size: 12px;
+                letter-spacing: 0;
+                line-height: 1.5;
+            }
+
+            // &.modify{
+            //     padding-left: 40px;
+            // }
+        }
+        .start,
+        .end{
+            .data{
+                border-color: transparent;
+                padding-right: 25px;
+                .place{
+                    padding-right: 45px;
+                }
+            }
+        }
+    }
+
+    .ch_form{
+        display: inline-block;
+        vertical-align: middle;
+    }
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+// 예약생성 - 항공편 검색
+.indie_flight_name_top_infos{
+    display: flex;
+    align-items: flex-end;
+    gap: 10px;
+    margin: 23px 0;
+    padding: 0 0 20px 8px;
+    border-bottom: 1px solid #E5E5E5;
+    .sbj{
+        font-size: 15px;
+        margin-bottom: 5px;
+    }
+    .date{
+        font-size: 16px;
+        font-weight: 600;
+        display: flex;
+        flex-wrap: wrap;
+        gap: 10px;
+        color: black;
+    }
+    .infos{
+        flex: 1;
+    }
+    .btns{
+        flex-shrink: 0;
+        margin-left: auto;
+    }
+}
+
+.indie_tab_squre_01_cont{
+    flex-grow: 1;
+    overflow: auto;
+    min-height: 150px;
+}
+
+.indie_flight_paing_box{
+    flex-shrink: 0;
+    text-align: center;
+    margin-top: 20px;
+}
+
+.indie_flight_name_select_list{
+    > li{
+        .check{
+            transition: .25s;
+            &:hover{
+                background-color: #F7F7FA;
+            }
+
+            &:has(.indie_radio_box:checked){
+                background-color: #F7F7FA;
+            }
+        }
+        .flight_b + label{
+            display: flex;
+            flex-direction: row;
+            gap: 10px;
+            align-items: center;
+            .flight{
+                flex: 1;
+                font-size: 13px;
+                word-break: break-all;
+            }
+            .flight_time_box{
+                flex: 2.5;
+                display: flex;
+                align-items: center;
+                position: relative;
+                dl{
+                    flex: 1;
+                    dt{
+                        font-size: 12px;
+                        word-break: break-all;
+                    }
+                    dd{
+                        font-size: 11px;
+                        color: #9A9AB4;
+                        word-break: break-all;
+                        b{
+                            font-weight: 600;
+                            margin-right: 3px;
+                        }
+                    }
+                    &.start{
+                        padding-right: 10px;
+                        &::after{
+                            content: "";
+                            display: block;
+                            position: absolute;
+                            top: 50%;
+                            left: 50%;
+                            transform: translate(-50%, -50%);
+                            width: 25px;
+                            height: 5px;
+                            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='25.604' height='5.347' viewBox='0 0 25.604 5.347'%3E%3Cpath d='M1768.217,242.5h24.336l-4.8-4.481' transform='translate(-1768.217 -237.653)' fill='none' stroke='%23232323' stroke-width='1'/%3E%3C/svg%3E");
+                            background-repeat: no-repeat;
+                            background-position: center center;
+                            background-size: 100%;
+                        }
+                    }
+                    &.end{
+                        padding-left: 50px;
+                    }
+                }
+            }
+        }
+
+        .time{
+            text-align: right;
+        }
+
+        .name{
+            text-align: center;
+        }
+
+        .flight{
+            font-size: 12px;
+            font-weight: 600;
+            color: black;
+        }
+    }
+}
+
+
+.indie_flight_direct_input{
+    margin-top: 30px;
+    // padding: 0 7px;
+
+    .tops{
+        padding: 0 10px;
+        display: flex;
+        align-items: flex-end;
+        .btns{
+            margin-left: auto;
+        }
+    }
+
+    .tit{
+        font-size: 14px;
+        color: #383E96;
+        margin-bottom: 5px;
+    }
+
+    .times{
+        font-size: 16px;
+        font-weight: 700;
+        color: black;
+    }
+    .indie_time_select_box{
+        gap: 5px;
+    }
+
+    .indie_exclamation_mark_box{
+        margin: 20px 7px;
+        p{
+            word-break: break-all;
+        }
+    }
+
+    .gather_box{
+        margin-top: 15px;
+        display: flex;
+        // flex-wrap: wrap;
+        align-items: center;
+        gap: 5px;
+        .da_select_box{
+            flex: 1;
+        }
+    }
+
+    .da_select_box{
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        .date{
+            font-size: 12px;
+            font-weight: 600;
+            color: black;
+        }
+    }
+}
+
+
+// 시간 추가
+.indie_time_select_box{
+    // height: 42px;
+    height: 30px;
+    background-color: white;
+    padding: 0 15px 0 16px;
+    display: inline-flex;
+    align-items: center;
+    border-radius: 30px;
+    border: 1px solid #D3D3D3;
+    gap: 3px;
+    font-size: 12px;
+    span{
+        font-weight: 600;
+        margin: 0 5px;
+        font-size: 12px;
+    }
+    select{
+        font-weight: 600;
+        // font-size: 12px;
+        background-size: 10px;
+        background-position: right 3px center;
+        padding-right: 22px;
+        font-size: 12px;
+    }
+    &.simple{
+        padding-right: 20px;
+        select{
+            background-image: none;
+            padding-right: 0;
+        }
+    }
+
+    &.sm{
+        height: 28px;
+        padding-left: 18px;
+        select{
+            font-size: 12px;
+            background-size: 10px;
+            background-position: right 3px center;
+            padding-right: 22px;
+        }
+    }
+
+    &.triangle{
+        select{
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10'%3E%3Cpath id='다각형_44' data-name='다각형 44' d='M5.143,1.429a1,1,0,0,1,1.715,0l4.234,7.056A1,1,0,0,1,10.234,10H1.766A1,1,0,0,1,.909,8.486Z' transform='translate(12 10) rotate(180)' fill='%23232323'/%3E%3C/svg%3E%0A");
+            background-repeat: no-repeat;
+            background-size: 9px;
+        }
+    }
+    
+    &.lg{
+        height: 42px;
+        gap: 10px;
+        select{
+            font-size: 13px;
+        }
+    }
+
+    &.wide{
+        width: 100%;
+        select{
+            flex: 1;
+        }
+    }
+}
+
+
+
+
+
+
+
+
+
+// 예약하기 - 번역 쪽
+.indie_booking_new_translation{
+    width: 100%;
+    height: 375px;
+    display: flex;
+    > div{
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        border-right: 1px solid #E5E5E5;
+        &:last-of-type{
+            border-right: none;
+        }
+    }
+
+    .select_lan_box{
+        flex-shrink: 0;
+        min-height: 52px;
+        padding: 16px 30px;
+        position: relative;
+        border-bottom: 1px solid #E5E5E5;
+
+    }
+
+    .a_btn_select{
+        font-size: 14px;
+        display: inline-flex;
+        align-items: center;
+        font-weight: 400;
+        line-height: 1.5;
+        &::after{
+            content: "";
+            display: block;
+            flex-shrink: 0;
+            margin-left: 10px;
+            width: 14px;
+            height: 10px;
+            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8.818' height='5.445' viewBox='0 0 8.818 5.445'%3E%3Cpath d='M9.626,6,8.59,7.036l3.366,3.373L8.59,13.782l1.036,1.036,4.409-4.409Z' transform='translate(14.818 -8.59) rotate(90)' fill='%23afb3b9'/%3E%3C/svg%3E");
+            background-repeat: no-repeat;
+            background-position: center center;
+            background-size: 100%;
+            transition: .25s;
+        }
+        &.on{
+            font-weight: 500;
+            &::after{
+                transform: rotate(180deg);
+            }
+
+            + .pop_lang_select{
+                height: 280px;
+                box-shadow: 0 3px 10px rgba(0, 0, 0, .16);
+                outline: 1px solid #EFEFF7;
+            }
+        }
+    }
+    
+    .pop_lang_select{
+        position: absolute;
+        left: 3%;
+        top: calc(100% - 5px);
+        z-index: 10;
+        width: 94%;
+        height: 0;
+        overflow: hidden;
+        outline: 1px solid transparent;
+        transition: .4s;
+        border-radius: 12px;
+        background-color: white;
+        .language_wrap{
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+            gap: 15px 10px;
+            label{
+                font-size: 12px;
+            }
+            padding: 35px 40px;
+        }
+    }
+
+    .radio_ch{
+        display: none;
+        + label{
+            font-size: 12px;
+            color: #696C89;
+            display: flex;
+            align-items: center;
+            cursor: pointer;
+        }
+
+        &:checked + label{
+            color: #383E96;
+            font-weight: 500;
+            &::after{
+                content: "";
+                margin-left: 5px;
+                flex-shrink: 0;
+                width: 12px;
+                height: 9px;
+                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9.381' height='7.152' viewBox='0 0 9.381 7.152'%3E%3Cpath d='M6.391,11.233,4.167,9.009l-.757.752,2.981,2.981,6.4-6.4-.752-.752Z' transform='translate(-3.41 -5.59)' fill='%23393e91'/%3E%3C/svg%3E");
+                background-repeat: no-repeat;
+                background-position: center center;
+            }
+        }
+    }
+
+    .btn_trans{
+        width: 100%;
+        height: 52px;
+        background-color: #383E96;
+        text-align: center;
+        color: white;
+        font-size: 14px;
+        font-weight: 500;
+        transition: .25s;
+        &:hover{
+            background-color: darken(#383E96, 5%);
+        }
+        &:disabled{
+            background-color: #DBDBEF;
+        }
+    }
+    
+    .text_box{
+        flex: 1;
+        overflow: auto;
+        padding: 28px 30px;
+        p{
+            line-height: 1.7;
+            font-size: 16px;
+            color: #8d8d8d;
+        }
+    }
+
+    .trans_lang{
+        background-color: #F8F8FF;
+        .text_box{
+            p{
+                color: black;
+            }
+        }
+        .loading_box{
+            display: none;
+            flex: 1;
+            justify-content: center;
+            align-items: center;
+            padding-bottom: 40px;
+        }
+        
+        &.loading{
+            .loading_box{
+                display: flex;
+            }
+            .text_box{
+                display: none;
+            }
+        }
+    }
+}