/* 새로 만들 경우 1. https://codepen.io/aanjulena/pen/ZLZjzV 2. https://www.abeautifulsite.net/bootstrap-4-switches  */

    .switchToggleUseYN input[type=checkbox]{
        height: 0; 
        width: 0; 
        visibility: hidden; 
        position: absolute;
    }
    .switchToggleUseYN label {
        cursor: pointer; 
        text-indent: -9999px; 
        width: 70px; 
        max-width: 70px; 
        height: 24px; 
        background: #c1c1c1; 
        display: block; 
        border-radius: 100px; 
        position: relative; 
        font-size:0.75rem;
        font-weight: bold;
        margin: 0;
    }
    .switchToggleUseYN label:after {
        content: ''; 
        position: absolute; 
        top: 2px; 
        left: 2px; 
        width: 20px; 
        height: 20px; 
        background: #fff; 
        border-radius: 90px; 
        transition: 0.3s; 
    }
    .switchToggleUseYN input:checked + label, 
    .switchToggleUseYN input:checked + input + label  {
        background: #3e98d3; 
    }
    .switchToggleUseYN input + label:before, 
    .switchToggleUseYN input + input + label:before {
        content: '미사용'; 
        position: absolute; 
        top: 3px; 
        left: 15px; 
        width: 60px; 
        height: 20px; 
        border-radius: 90px; 
        transition: 0.3s; 
        text-indent: 0; 
        color: #fff; 
    }
    .switchToggleUseYN input:checked + label:before, 
    .switchToggleUseYN input:checked + input + label:before {
        content: '사용'; 
        position: absolute; 
        top: 3px; 
        left: -5px; 
        width: 60px; 
        height: 20px; 
        border-radius: 90px; 
        transition: 0.3s; 
        text-indent: 0; 
        color: #fff; 
    }
    .switchToggleUseYN input:checked + label:after, 
    .switchToggleUseYN input:checked + input + label:after {
        left: calc(100% - 2px); 
        transform: translateX(-100%); 
    }
    .switchToggleUseYN label:active:after {
        width: 60px; 
    }