@charset "UTF-8";
@import 'utils.scss';
/*변수파일 import*/


//주문결재 레이아웃
.contentWarp.carsw{
    display:flex;
    width:100%;
    margin:0 auto;
    justify-content: space-between;
    @include maxtablet{
        flex-wrap: wrap;
    }
    @include desktopMax{
        width:120rem;  
        
    }
    .pageSubTitle{
        margin-top:4rem;
        @include tablet{
            margin-top:7rem;
        }
        h2{
            font-size: 1.8rem; 
            @include tablet{
                font-size:2.4rem;
            }
        }
        p{
           margin-top:1rem;
           font-size: 1.4rem;
            line-height: 2.2rem;
           @include tablet{
             font-size: 1.6rem;
             margin-top:2rem;
             line-height:2.4rem;
           }
        }
    }
    .streamignEditBtn {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 3rem;
        @include tablet {
            margin-top: 4rem;
        }
        a {
            display: flex;
            justify-content: center;
            align-items: center;
            width: 100%;
            height: 5rem;
            background-color: #F3F3F3;
            border-radius: 0.6rem;
            font-size: 1.4rem;
            font-weight: 600;
            color: #676767;
            @include tablet {
                height: 6.5rem;
                font-size: 1.6rem;
            }
            span {
                margin: 0 0.8rem;
                padding-top: 0.2rem;
            }
        }
    }
    .stopServiceBtn {
        display: flex;
        justify-content: center;
        align-items: center;
        margin: 3rem;
        @include tablet {
            margin-top: 4rem;
        }
        a {
            display: flex;
            align-items: center;
            font-size: 1.4rem;
            color: #676767;
            
            transition: 0.3s;
            @include tablet {
                font-size: 1.6rem;
            }
            
            &:hover {
                color: #000000;
            }
            span {
                margin-right: 1rem;
                text-decoration: underline;
                text-underline-offset: 0.5rem;
            }
            
        }
    }
    
    .selectStreamign {
        margin-top:2rem; 
        @include tablet{
            margin-top:4rem;
        }
        &.editUse {
            margin-top: 1rem;
        }
        li {
            
            padding: 2rem;
            border: 0.1rem solid #DEDEDE;
            border-radius: 0.6rem;
            overflow: hidden;
            @include tablet {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0 3rem 0 0;
            }
            margin-bottom: 1rem;
            .imgItemWrap {
                display: flex;
                justify-content: space-between;
                align-items: center;
                width: 100%;
                .imgItem {
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    img {
                        width: 7.5rem;
                        height: 7.5rem;
                        border-radius: 0.6rem;
                        @include tablet {
                            width: 15rem;
                            height: 15rem;
                            border-radius: 0;
                        }
                    }
                    .title {
                        margin-left: 2rem;
                        font-size: 1.6rem;
                        font-weight: 600;
                        color: #000000;
                        @include tablet {
                            margin-left: 3rem;
                            font-size: 1.8rem;
                        }
                    }
                }
            }
            .btnWarp {
                margin-top: 3rem;
                @include tablet {
                    margin-top: 0;
                }
                .oneButton{
                    height:5.6rem;
                    width:100%;
                    min-width:16rem;
                    button,
                    div,
                    a{
                        width:100%;
                    // max-width:calc(100% - 54px);
                        display:flex;
                        &::before{
                            content: "";
                            display:block;
                            width:3rem;
                            height:5.6rem;
                            background-image: url(/kr/assets/images/kia/svg/kia-btn-wleft.svg);
                            background-size: auto;
                            background-repeat: no-repeat;
                            background-position: center left;
                        @include tablet{
                            width:4rem;
                        }
                        }
                        &::after{
                            content: "";
                            display:block;
                            width:3rem;
                            height:5.6rem;
                            background-image: url(/kr/assets/images/kia/svg/kia-btn-wright.svg);
                            background-size: auto;
                            background-repeat: no-repeat;
                            background-position: center right;
                            @include tablet{
                                width:4rem;
                            }
                        }
                        &:hover{
                            p{
                                color:#05141F;  
                                border-color:  #F3C300; 
                                background-color: #F3C300; 
                            }
                            &::before{
                                content: "";
                                background-image: url(/kr/assets/images/kia/svg/kia-btn-yleft.svg);
                                
                            }
                            &::after{
                                content: "";
                                background-image: url(/kr/assets/images/kia/svg/kia-btn-yright.svg);
                            }
                        }
                        p{
                            font-family: 'KiaSignature'; 
                            display:flex;
                            font-size: 1.4rem; 
                            font-weight: 600;
                            align-items: center;
                            justify-content: center;
                            height: 5.6rem;
                            width:100%;
                            background-color: #fff;
                            color:#05141F;
                            border-width:1px 0 1px 0 ;
                            border-style: solid;
                            border-color:  #9BA1A5; 
                            border-radius: 0 ;  
                        }
                    }
                }
            }
            
        }

    }
    .selectStreamignStop {
        margin-top: 3rem;
        @include tablet {
            margin-top: 4rem;
        }
        li {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 2rem;
            border: 0.1rem solid #DEDEDE;
            border-radius: 0.6rem;
            margin-bottom: 1rem;
            img {
                width: 7.5rem;
                height: 7.5rem;
                margin-left: 2rem;
                border-radius: 0.6rem;
                @include tablet {
                    width: 11rem;
                    height: 11rem;
                }
            }
            .title {
                margin-left: 2rem;
                font-size: 1.6rem;
                font-weight: 600;
                color: #000000;
                @include tablet {
                    margin-left: 3rem;
                    font-size: 1.8rem;
                }
            }
        }
    }
}



.switchToggle {
    position: relative;
    display: inline-block;
    width: 4.8rem;
    height: 2.4rem;
    vertical-align:middle;
    @include tablet {
        width: 6.4rem;
        height: 3.2rem;
    }
    input {
        display:none;
        &:checked + .slider {
            background-color: #5D7D2B;
        }
        &:focus + .slider {
            box-shadow: 0 0 1px #5D7D2B;
        }
        &:checked + .slider:before {
            -webkit-transform: translateX(2.4rem);
            -ms-transform: translateX(2.4rem);
            transform: translateX(2.4rem);
            @include tablet {
                -webkit-transform: translateX(3rem);
                -ms-transform: translateX(3rem);
                transform: translateX(3rem);
            }
        }
        &:not(:checked) + .slider {
            &:hover {
                background-color: #37434C;
            }
        }
    }
    
    .slider {
        position: absolute;
        cursor: pointer;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #9EA1A2;
        -webkit-transition: .4s;
        transition: .4s;
        &::before {
            position: absolute;
            content: "";
            height: 1.6rem;
            width: 1.6rem;
            left: 0.4rem;
            bottom: 0.4rem;
            background-color: white;
            -webkit-transition: .4s;
            transition: .4s;
            @include tablet {
                height: 2rem;
                width: 2rem;
                left: 0.6rem;
                bottom: 0.6rem;
            }
        }
        
        &.round {
            border-radius: 34px;
            &::before {
                border-radius: 50%;
            }
        }
    }
}