input {
    /*min-height:24px;*/
    /*height: 24px;*/
}
select {
    /*
    height: 30px;
    height: 1.875em;
    */
}

input[type="text"],
input[type="password"] {
    /*border-radius:4px 4px 4px 4px;*/
    border: 1px solid var(--controls-border-background-white);
    background-color:var(--controls-background-white);
    box-shadow: 0;
    /*padding:2px 4px 2px 4px;*/
    /*line-height:24px;height:24px;font-size:1.1em;*/
    /*width:300px;*/
    /*
    padding-left: 4px;
    padding-right: 4px;
    */
    width: calc(100% - 14px);
    width: calc(100% - 1em);
    padding: 0.25em 0.625em;
    /*
    height: 38px;
    height: 2.375rem;
    height: 30px;
    height: 1.875rem;
    */
    height: 34px;
    height: 2.125em;
    height:28px;
    padding:0px 4px;
    width: 100%;

}
input[type="text"]:focus,
input[type="password"]:focus {
    border: 1px solid #66afe9;
    box-shadow: 0 0 8px #66afe9;
}

input[type="checkbox"],
input[type="radio"] {
    /*min-height:23px;*/
}

select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
select::-ms-expand {
    display: none;
} /*화살표 삭제*/
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    appearance: none;
    background: var(--controls-background-white) url(/images/btn/bg_select_arr_x.gif) no-repeat center right;

    padding-left: 4px;
    padding-right: 12px;
    min-width: 50px; /**/
    min-width: 3.125em;

    padding:0.25em 0.625em;
    padding-right: 26px;
    padding-right: 1.625em;
    padding-right: 28px;
    padding-right: 1.75em;
    /*
    min-height: 30px;
    min-height: 1.875rem;
    height: 30px;
    height: 1.875rem;
    */
    height: 34px;
    height: 2.125em;
    height:30px;

    border: 1px solid var(--controls-border-ccc);
    box-shadow: 0;

}
select:focus {
    border: 1px solid #66afe9;
    box-shadow: 0 0 8px #66afe9;
}

textarea {
    border: 1px solid #ccc;
    box-shadow: 0;
    resize: none;
    overflow-y: auto;
    overflow-x: hidden;
    resize: none;
    padding: 4px;
    width: 100%;
    /*font-size:1.2rem;*/
}
textarea:focus {
    border: 1px solid #66afe9;
    box-shadow: 0 0 8px #66afe9;
}

a,
button {
    outline: none;
    cursor: pointer;
    border: none;
    margin: 0;
    padding: 0;
}
a {
    color: #337ab7;
    text-decoration: none;
}
a {
    /*vertical-align:top;*/
    text-decoration: none;
}
a:link,
a:visited {
}
a:focus,
a:hover {
    color: #23527c;
    text-decoration: underline;
}

a.btnX {
    display: inline-block;
    height: 28px;
    padding: 0 14px 0;
    border: 1px solid #304a8a;
    background-color: #3f5a9d;
    font-size: 13px;
    color: #fff;
    line-height: 28px;
    vertical-align: middle;
}
a.btnX:hover {
    border: 1px solid #091940;
    background-color: #1f326a;
    color: #fff;
}
a.redX {
    background-color: #ff6947;
    border: 1px solid #ff6947;
}
a.redX:hover {
    background-color: #ff0000;
}
a.red2X {
    background-color: #db2828;
    border: 1px solid #db2828;
}
a.red2X:hover {
    background-color: #ff0000;
}
a.blueX {
    background-color: #6e99fe;
    border: 1px solid #6e99fe;
}
a.blueX:hover {
    background-color: #014cfc;
}
a.blue2X {
    background-color: #005fa0;
    border: 1px solid #005fa0;
}
a.blue2X:hover {
    background-color: #0296f8;
}
a.blue3X {
    background-color: #637cbe;
    border: 1px solid #637cbe;
}
a.blue3X:hover {
    background-color: #053ffd;
}
a.blue4X {
    background-color: #2b78fe;
    border: 1px solid #2b78fe;
}
a.blue4X:hover {
    background-color: #005dfd;
}
a.skyX {
    background-color: #c5d5fc;
    border: 1px solid #c5d5fc;
}
a.skyX:hover {
    background-color: #044afa;
}
a.orangeX {
    background-color: #f2711c;
    border: 1px solid #f2711c;
}
a.orangeX:hover {
    background-color: #fc6602;
}

a.yellowX {
    background-color: #fbbd08;
    border: 1px solid #fbbd08;
}
a.yellowX:hover {
    background-color: #fbbd08;
}
a.oliveX {
    background-color: #b5cc18;
    border: 1px solid #b5cc18;
}
a.oliveX:hover {
    background-color: #dbfc04;
}
a.greenX {
    background-color: #21ba45;
    border: 1px solid #21ba45;
}
a.greenX:hover {
    background-color: #00fc3b;
}
a.tealX {
    background-color: #00b5ad;
    border: 1px solid #00b5ad;
}
a.tealX:hover {
    background-color: #02faee;
}
a.violetX {
    background-color: #6435c9;
    border: 1px solid #6435c9;
}
a.violetX:hover {
    background-color: #5204fc;
}
a.purpleX {
    background-color: #cabccf;
    border: 1px solid #cabccf;
}
a.purpleX:hover {
    background-color: #bb04fd;
}
a.pinkX {
    background-color: #e03997;
    border: 1px solid #e03997;
}
a.pinkX:hover {
    background-color: #ff0492;
}
a.brownX {
    background-color: #a5673f;
    border: 1px solid #a5673f;
}
a.brownX:hover {
    background-color: #fa6501;
}
a.greyX {
    background-color: #767676;
    border: 1px solid #767676;
}
a.greyX:hover {
    background-color: #050505;
}
a.grey2X {
    background-color: #666;
    border: 1px solid #666;
}
a.grey2X:hover {
    background-color: #050505;
}
a.grey3X {
    background-color: #ccc;
    border: 1px solid #ccc;
}
a.grey3X:hover {
    background-color: #050505;
}
a.grey4X {
    background-color: #f4f4f4;
    border: 1px solid #f4f4f4;
}
a.grey4X:hover {
    background-color: #050505;
}
a.blackX {
    background-color: #1b1c1d;
    border: 1px solid #1b1c1d;
}
a.blackX:hover {
    background-color: #050505;
}
a.whiteX {
    background-color: #fff;
    border: 1px solid #fff;
}
a.whiteX:hover {
    background-color: #f4f4f4;
}

a:hover {
    text-decoration: none;
    cursor: pointer;
}
a.btn {
    background-color: #3f5a9d;
    border: 1px solid #304a8a;
    color: #f4f4f4;
    /*height: 28px;
    line-height: 28px;*/
    display: inline-block; /**/
    text-align: center;
    border: 1px solid #005fa0;
    border-radius: 6px;
    border: 0px solid #005fa0;
    border-radius: 0px;
    /*
    padding-left: 15px;
    padding-right: 15px;
    */
    /*
    height: 25px;
    height: 30px;
    height: 1.875em;
    */
    padding: 0 14px 0;
    padding: 0.25em 1em;
    /*line-height: 25px;*/
    /*padding-top: 4px;
    padding-bottom: 4px;*/
    vertical-align: middle;

    -webkit-box-shadow: 0 0 0 0 rgba(34, 36, 38, 0.15) inset;
    box-shadow: inset 0px 0px 0px 0px rgba(34, 36, 38, 0.15);
    /*border-radius: .28571429em;*/
}
a.btn span {
    display: inline-block;
    font-size: 16px;
    font-size: 13px;
    line-height: 30px;
    color: #ff6947;
    padding-right: 14px;
    background: url("/images/btn/ico_cursor.png") no-repeat right center;
    font-weight: bold;
}
a.btn:hover,
a.btn span:hover {
    color: #fff;
    background-color: #005fa0;
}
a.decoration:hover {
    text-decoration: underline;
    cursor: pointer;
}

/**/

.checkbox_area_layer {
    margin: 0;
    padding: 0;
}
.checkbox_area_layer > li {
    float: left;
}
.checkbox_area_layer:after {
    clear: both;
    display: block;
    content: "";
}
.checkbox_area {
    display: inline-block;
    position: relative;
}

.checkbox_area input[type="checkbox"] {
    opacity: 0;
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    position: absolute;
    left: 0px;
    cursor: pointer;
}
.checkbox_area input[type="checkbox"] + label, .checkbox_area input[type="checkbox"] + div {
    /*clear: none;*/
    /*display: inline-block;*/
    background: url("/images/btn/chkbox.jpg") no-repeat 0 center;
    background-position-x: 0;
    background-position-y: 0;
    color: #666;
    color: var(--basic-color);
    min-width: 50px;
    min-width: 3.125em;
    /*
    height: 20px;
    height: 1.25em;
    line-height: 20px;
    line-height: 1.25rem;
    line-height: 18px;
    line-height: 1.125rem;
    */
    min-height:20px;
    line-height: 100%;
    /*
    display: inline-block;
    */
    float:left;
    /*
    */
    display: flex;
    align-items: center;
    justify-content: left;
}
.checkbox_area input[type="checkbox"].red + label, .checkbox_area input[type="checkbox"].red + div {
    background: url("/images/btn/chkbox.jpg") no-repeat 0 center;
}
.checkbox_area input[type="checkbox"].blue + label, .checkbox_area input[type="checkbox"].blue + div {
    background: url("/images/btn/chkbox.jpg") no-repeat 0 center;
}

.checkbox_area input[type="checkbox"] + label, .checkbox_area input[type="checkbox"] + div {
    margin-right: 8px;
    margin-right: 0.5em;
    padding-left: 24px;

}
.checkbox_area input[type="checkbox"]:checked + label, .checkbox_area input[type="checkbox"]:checked + div {
    /* background-position: 0 -30px;
    background-position: 0 -1.875em; */
    background: url("/images/btn/chkbox_black.jpg") no-repeat 0 center;
}
.checkbox_area input[type="checkbox"].red:checked + label, .checkbox_area input[type="checkbox"].red:checked + div {
    background: url("/images/btn/chkbox_red.jpg") no-repeat 0 center;
}
.checkbox_area input[type="checkbox"].blue:checked + label, .checkbox_area input[type="checkbox"].blue:checked + div {
    background: url("/images/btn/chkbox_blue.jpg") no-repeat 0 center;
}
label.checking {
    color: #ff6947;
    font-weight: bold;
}
label.unchecking {
    color: #666;
}

/*radio box START */
.radiobox_area_layer {
    display: block;
    position: relative;
    padding-left: 22px;
    /*margin-top: 4px;
  margin-bottom: 4px;*/
    cursor: pointer;
    font-size: 13px;
    line-height: 22px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* Hide the browser's default radio button */
.radiobox_area_layer input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}
.radiobox_area_layer label {
    vertical-align: top;
    padding-left: 2px;
}

/* Create a custom radio button */
.checkmark {
    position: absolute;
    top: 0;
    left: 0;
    height: 22px;
    width: 22px;
    background-color: #eee;
    border-radius: 50%;
}

/* On mouse-over, add a grey background color */
.radiobox_area_layer:hover input ~ .checkmark {
    background-color: #ccc;
}

/* When the radio button is checked, add a blue background */
.radiobox_area_layer input:checked ~ .checkmark {
    background-color: #2196f3;
    background-color: #db2828;
    background-color: #ff6947;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.checkmark:after {
    content: "";
    position: absolute;
    display: none;
}

/* Show the indicator (dot/circle) when checked */
.radiobox_area_layer input:checked ~ .checkmark:after {
    display: block;
}

/* Style the indicator (dot/circle) */
.radiobox_area_layer .checkmark:after {
    top: 7px;
    left: 7px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: white;
}
/*radio box END */

/**/

/* The switch - the box around the slider */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    width: 2.5em;
    height: 20px;
    height: 1.25em;
    width: 40px;
    width:auto !important;
    height: 20px;
    vertical-align: middle;
}


/* Hide default HTML checkbox */
.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The slider */
.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.05);
    background-color: var(--controls-disabled-background);
    -webkit-transition: 0.4s;
    transition: 0.4s;
    width: 40px;
}
.switch + .switch_txt {
    margin-left:8px;
    margin-left:0.5em;
    line-height: 20px;
    line-height: 1.25em;
    line-height: 18px;
    line-height: 1.125em;
}
.switch .switch_txt {
    padding-left: 46px;
}
/*#ccc;*/
/*
.slider {
    display: block;
    position: absolute;
    content: '';
    z-index: 1;
    -webkit-transform: none;
    transform: none;
    border: none;
    top: 0;
    background: rgba(0,0,0,.05);
    -webkit-box-shadow: none;
    box-shadow: none;
    width: 3.5em;
    height: 1.5em;
    border-radius: 500em;
  -webkit-transition: .4s;
  transition: .4s;
}
*/
.slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 0px;
    bottom: 0px;
    background-color: var(--controls-white);
    -webkit-transition: 0.4s;
    transition: 0.4s;

    background: var(--controls-white) -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(0, 0, 0, 0.05)));
    background: var(--controls-white) -webkit-linear-gradient(transparent, rgba(0, 0, 0, 0.05));
    background: var(--controls-white) linear-gradient(transparent, rgba(0, 0, 0, 0.05));

    border: none;
    -webkit-box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15),
        0 0 0 1px rgba(34, 36, 38, 0.15) inset;
    box-shadow: 0 1px 2px 0 rgba(34, 36, 38, 0.15),
        0 0 0 1px rgba(34, 36, 38, 0.15) inset;
}
/*
.slider:before {
    background: #fff -webkit-gradient(linear,left top,left bottom,from(transparent),to(rgba(0,0,0,.05)));
    background: #fff -webkit-linear-gradient(transparent,rgba(0,0,0,.05));
    background: #fff linear-gradient(transparent,rgba(0,0,0,.05));
    position: absolute;
    content: ''!important;
    opacity: 1;
    z-index: 2;
    border: none;
    -webkit-box-shadow: 0 1px 2px 0 rgba(34,36,38,.15), 0 0 0 1px rgba(34,36,38,.15) inset;
    box-shadow: 0 1px 2px 0 rgba(34,36,38,.15), 0 0 0 1px rgba(34,36,38,.15) inset;
    width: 1.5em;
    height: 1.5em;
    top: 0;
    left: 0;
    border-radius: 500em;
    -webkit-transition: background .3s ease,left .3s ease;
    transition: background .3s ease,left .3s ease;
}
*/
input:checked + .slider {
    background-color: #2185d0;
}

input:checked + .slider.green {
    background-color: #7bb40f;
}
input:checked + .slider.red {
    background-color: #FF6947;
}
input:checked + .slider.yellow {
    background-color: #F3D216;
}

input:focus + .slider {
    /*box-shadow: 0 0 1px #2196F3;*/
}

input:checked + .slider:before {
    -webkit-transform: translateX(22px);
    -ms-transform: translateX(22px);
    transform: translateX(22px);
}

/* Rounded sliders */
.slider.round {
    border-radius: 36px;
}

.slider.round:before {
    border-radius: 50%;
}
.slider.round:hover:before {
    /*background:#ff6947;*/
}
.slider:hover {
    background: rgba(0, 0, 0, 0.15);
    background:var(--controls-disabled-background);
}

.red {
    color: #db2828 !important;
}
.red2 {
    color: #ff6947 !important;
}
.blue {
    color: #6e99fe !important;
}
.blue2 {
    color: #005fa0 !important;
}
.blue3 {
    color: #637cbe !important;
}
.blue4 {
    color: #2b78fe !important;
}
.sky {
    color: #c5d5fc !important;
}
.orange {
    color: #f2711c !important;
}
.yellow {
    color: #fbbd08 !important;
}
.olive {
    color: #b5cc18 !important;
}
.green {
    color: #21ba45 !important;
}
.teal {
    color: #00b5ad !important;
}
.violet {
    color: #6435c9 !important;
}
.purple {
    color: #a333c8 !important;
}
.pink {
    color: #e03997 !important;
}
.brown {
    color: #a5673f !important;
}
.grey {
    color: #767676 !important;
}
.grey2 {
    color: #666 !important;
}
.grey3 {
    color: #ccc !important;
}
.grey4 {
    color: #f4f4f4 !important;
}
.black {
    color: #1b1c1d !important;
}
.white {
    color: #fff !important;
}

.bg_red {
    background-color: #db2828 !important;
}
.bg_red2 {
    background-color: #ff6947 !important;
}
.bg_blue {
    background-color: #6e99fe !important;
}
.bg_blue2 {
    background-color: #005fa0 !important;
}
.bg_blue3 {
    background-color: #637cbe !important;
}
.bg_blue4 {
    background-color: #2b78fe !important;
}
.bg_sky {
    background-color: #c5d5fc !important;
}
.bg_sky2 {
    background-color: #cce8ff !important;
}
.bg_orange {
    background-color: #f2711c !important;
}
.bg_yellow {
    background-color: #fbbd08 !important;
}
.bg_olive {
    background-color: #b5cc18 !important;
}
.bg_green {
    background-color: #7bb40f !important;
    color: #fff !important;
}
.bg_green2 {
    background-color: #21ba45 !important;
}
.bg_teal {
    background-color: #00b5ad !important;
}
.bg_violet {
    background-color: #6435c9 !important;
}
.bg_purple {
    background-color: #a333c8 !important;
}
.bg_pink {
    background-color: #e03997 !important;
}
.bg_brown {
    background-color: #a5673f !important;
}
.bg_gray {
    background-color: #666 !important;
    color: #ccc !important;
    border: 1px solid #666 !important;
}
.bg_gray2 {
    background-color: #888 !important;
    color: #ccc !important;
    border: 1px solid #333 !important;
}
.bg_gray3 {
    background-color: #ccc !important;
    color: #666 !important;
    border: 1px solid #666 !important;
}
.bg_gray4 {
    background-color: #ddd !important;
    color: #666 !important;
    border: 1px solid #666 !important;
}
.bg_black {
    background-color: #1b1c1d !important;
}
.bg_white {
    background-color: #fff !important;
}
.no_round {
    border-radius: 0px;
}