/* 체크박스 Normal */
.checkbox_wrap {
    display: inline-block;
    position: relative;
    padding-left: 1.5em;
    cursor: pointer;
    font-size: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .checkbox_wrap .checkbox_title {
        font-size: 100%;
        padding: 0.15em 0 0 0.3em;
        box-sizing: border-box;
    }
    
        .checkbox_wrap .checkbox_title span {
            font-size: 0.8em;
            font-weight: 300;
            color: #757575;
            padding: 0 0 0 0.5em;
        }

    .checkbox_wrap input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .checkbox_wrap .checkbox_size {
        position: absolute;
        top: 0;
        left: 0;
        height: 1.5em;
        width: 1.5em;
    }

    .checkbox_wrap:hover input ~ .checkbox_size .checkmark {
        background-color: #ccc;
    }

    .checkbox_wrap input:checked ~ .checkbox_size .checkmark {
        background-color: #0072bd;
    }

        .checkbox_wrap input:checked ~ .checkbox_size .checkmark:after {
            display: block;
        }


    .checkbox_wrap .checkbox_size .checkmark:after {
        width: 100%;
        height: 100%;
        background-image: url('/Contents/Images/icons/icon_checkmark.png');
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        background-size: 50%;
    }

    .checkbox_wrap .checkbox_size_buy {
        position: absolute;
        top: 0;
        left: 0;
        height: 1.5em;
        width: 1.5em;
    }

    .checkbox_wrap .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #D0D0D0;
        border-radius: 10em;
        border: solid 1px white;
        box-sizing: border-box;
    }

    .checkbox_wrap:hover input ~ .checkbox_size_buy .checkmark {
        background-color: #ccc;
    }

    .checkbox_wrap input:checked ~ .checkbox_size_buy .checkmark {
        background-color: #0072bd;
    }

    .checkbox_wrap .checkmark:after {
        content: "";
        position: absolute;
        display: block;
    }


    .checkbox_wrap input:checked ~ .checkbox_size_buy .checkmark:after {
        display: block;
    }


    .checkbox_wrap .checkbox_size_buy .checkmark:after {
        width: 100%;
        height: 100%;
        background-image: url('/Contents/Images/icons/icon_checkmark.png');
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        background-size: 50%;
    }


    /* 체크박스 주문 */
    .checkbox_wrap .checkbox_size_order {
        position: absolute;
        top: 0;
        left: 0;
        height: 1.5em;
        width: 1.5em;
    }

    .checkbox_wrap .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #D0D0D0;
        border-radius: 10em;
        border: solid 1px white;
        box-sizing: border-box;
    }

    .checkbox_wrap:hover input ~ .checkbox_size_order .checkmark {
        background-color: #ccc;
    }

    .checkbox_wrap input:checked ~ .checkbox_size_order .checkmark {
        background-color: #5eba00;
    }

        .checkbox_wrap input:checked ~ .checkbox_size_order .checkmark:after {
            display: block;
        }

    .checkbox_wrap .checkbox_size_order .checkmark:after {
        width: 100%;
        height: 100%;
        background-image: url('/Contents/Images/icons/icon_checkmark.png');
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        background-size: 50%;
    }



/* 체크박스 Small */
.checkbox_wrap_s {
    display: inline-block;
    position: relative;
    padding-left: 1.5em;
    margin-bottom: 0.6em;
    cursor: pointer;
    font-size: 1em;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

    .checkbox_wrap_s .checkbox_title {
        font-size: 100%;
        padding: 0.25em 0 0 0.3em;
        box-sizing: border-box;
    }


    .checkbox_wrap_s input {
        position: absolute;
        opacity: 0;
        cursor: pointer;
        height: 0;
        width: 0;
    }

    .checkbox_wrap_s .checkbox_size {
        position: absolute;
        top: 0;
        left: 0;
        height: 1.5em;
        width: 1.5em;
    }
    .checkbox_wrap_s:hover input ~ .checkbox_size .checkmark {
        display: block;
    }

    .checkbox_wrap_s input:checked ~ .checkbox_size .checkmark {
        background-image: url('/Contents/Images/icons/icon_check_on.png');
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        background-size: 70%;
    }
        .checkbox_wrap_s input:checked ~ .checkbox_size .checkmark:after {
            display: block;
            background-image: none;
        }


    .checkbox_wrap_s .checkbox_size .checkmark:after {
        width: 100%;
        height: 100%;
        background-image: url('/Contents/Images/icons/icon_check_off.png');
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        background-size: 70%;
    }

    .checkbox_wrap_s .checkbox_size_buy {
        position: absolute;
        top: 0;
        left: 0;
        height: 1.5em;
        width: 1.5em;
    }

    .checkbox_wrap_s .checkmark {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }

    .checkbox_wrap_s:hover input ~ .checkbox_size_buy .checkmark {
        display: block;
    }

    .checkbox_wrap_s input:checked ~ .checkbox_size_buy .checkmark {
        background-image: url('/Contents/Images/icons/icon_check_on.png');
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        background-size: 70%;
    }


    .checkbox_wrap_s .checkmark:after {
        content: "";
        position: absolute;
        display: block;
    }


    .checkbox_wrap_s input:checked ~ .checkbox_size_buy .checkmark:after {
        display: block;
        background-image: none;
    }


    .checkbox_wrap_s .checkbox_size_buy .checkmark:after {
        width: 100%;
        height: 100%;
        background-image: url('/Contents/Images/icons/icon_check_off.png');
        background-position: center center;
        background-size: contain;
        background-repeat: no-repeat;
        background-size: 70%;
    }


/* 텍스트 필드*/
input[type=text], input[type=tel], input[type=password], input[type=number] {
    width: 100%;
    padding: 0.7em;
    margin: 0.5em 0;
    box-sizing: border-box;
    border-radius: 0.2em;
    border: solid 1px #bdbdbd;
    font-size: 1em;
    color: #505050;
}

input::placeholder {
    color: #989898;
}

input:disabled {
    background-color: #f3f3f3;
    color: #505050;
}

input:focus {
    background-color: #ecf7ff;
}

textarea {
    resize: none;
    width: 100%;
    padding: 0.7em 1.2em;
    margin: 0.5em 0;
    box-sizing: border-box;
    border-radius: 0.2em;
    border: solid 1px #bdbdbd;
    font-size: 1em;
    color: #505050;
}


/* 셀렉트 */
select {
    width: 100%;
    padding: .7em;
    background: url('/Contents/Images/icons/triangle_down.png');
    background-position: right 0.5em center;
    background-repeat: no-repeat;
    background-size: 0.7em;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0.5em 0;
    box-sizing: border-box;
    border-radius: 0.2em;
    border: solid 1px #bdbdbd;
    font-size: 1em;
    color: #505050;
}