@charset "utf-8";
:after, :before {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
}
select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -o-appearance: none;
}
/* Form */
input:-ms-input-placeholder, textarea:-ms-input-placeholder {color:#888888;font-size:14px;}/* IE 10 + */
input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {color:#888888;font-size:14px;}/* Webkit Browser */
input:-moz-placeholder, textarea:-moz-placeholder {color:#888888;font-size:14px;}/* Mozilla Firefox 4 to 18 */
input::-moz-placeholder, textarea::-moz-placeholder {color:#888888;font-size:14px;}/* Mozilla Firefox 19+ */
input:focus:-ms-input-placeholder, textarea:focus:-ms-input-placeholder {color:transparent;}/* IE 10 + */
input:focus::-webkit-input-placeholder, textarea:focus::-webkit-input-placeholder {color:transparent;}/* Webkit Browser */
input:focus:-moz-placeholder, textarea:focus:-moz-placeholder {color:transparent;}/* Mozilla Firefox 4 to 18 */
input:focus::-moz-placeholder, textarea:focus::-moz-placeholder {color:transparent;}/* Mozilla Firefox 19+ */
input {box-sizing:border-box; -moz-box-sizing:border-box; -webkit-box-sizing:border-box; border:0px; vertical-align:middle;}
textarea {width:100%; vertical-align:middle; resize:none;}
select {-ms-appearance:none; -webkit-appearance:none; -moz-appearance:none; -o-appearance:none;}
select::-ms-expand {display:none;}
.ie9 select {padding:5px 35px 4px 5px;background:none;}
.ie9 :root select {padding:0; font-size:0;}
input[type=text]::-ms-clear{display: none;}
input[type=number]::-ms-clear{display: none;}
input[type=search]::-ms-clear{display: none;}
input[type=date]::-ms-clear{display: none;}
input[type=email]::-ms-clear{display: none;}

/* Form Textfield */
.form-input {padding:0 10px; border:1px solid #ddd; border-radius:0;font-size:16px;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;}
.form-input:focus,.form-input:hover,.form-input.is-focused {border-color:#0089b3;}
.form-input:read-only,
.form-input:-moz-read-only {background-color:#f8f8f8;border:1px solid #ddd !important;}
.textarea {height:auto; padding:0 10px; border:1px solid #ddd; border-radius:0;
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;}
.form-button {display:inline-block; position:relative;height:30px; padding:0 38px 0 10px; border:1px solid #ddd; background:url('../image/cmn/arw_select01.png') no-repeat calc(100% - 10px) center; vertical-align:middle; border-radius:0;  transition:all 0.3s;}
.form-select {display:inline-block; position:relative;height:36px; padding:0 30px 0 10px; background-color:#fff;background-image:url("../image/form/arw_select_down.png");background-repeat:no-repeat;background-position:calc(100% - 10px) 50%;/*background:url('../image/cmn/arw_select01.png') no-repeat calc(100% - 10px) center;*/ vertical-align:middle; border:1px solid #ccc;border-radius:0;  transition:all 0.3s;}

/* Form Radio */
/* Basic */
.form-radio {display:inline-block; position:relative; margin:8px 10px 8px 0;min-height:18px; line-height:1; vertical-align:middle;}
.form-radio input {display:block;overflow:hidden;position:absolute;left:1px;top:1px;width:14px;height:14px;background:transparent;border:0;}
.form-radio label {display:inline-block;position:relative;min-width:16px;min-height:16px;line-height:16px;vertical-align:top;}
.form-radio label span {display:inline-block;padding-left:28px;vertical-align:top;}
.form-radio label:before,
.form-radio label:after {content:'';position:absolute;left:0;top:0;}
.form-radio label:before {display:inline-block;width:16px;height:16px;border:1px solid #ddd;background:#fff;border-radius:50%;box-sizing:border-box;vertical-align:top;line-height:18px;}
/* Checked */
.form-radio > input:checked + label:before {background-color:#fff;border-color:#ccc;}
.form-radio > input:checked + label:after {top:3px;left:3px;width:10px;height:10px;border-radius:50%;background:#555;}
/* Focused */
.form-radio > input.is-focused + label:before,
.form-radio > input:hover + label:before,
.form-radio > input:focus + label:before {border-color:#888;}
.form-radio > input:checked:focus + label:before,
.form-radio > input:checked:hover + label:before {border-color:#555;transition:all 0.3s;}
/* Disabled */
.form-radio > input[disabled] + label {color:#888888;}
.form-radio > input[disabled] + label:before {background-color:#f0f0f0;}
.form-radio > input[disabled]:focus + label:before,
.form-radio > input[disabled]:hover + label:before {border-color:#ddd;}
.form-radio > input[disabled]:checked + label:after {background:#888;}
.form-radio > input[disabled]:checked + label:before,
.form-radio > input[disabled]:checked:focus + label:before,
.form-radio > input[disabled]:checked:hover + label:before {border-color:#888;}

/* Form Check */
/* Basic */
.form-check {display:inline-block; position:relative;vertical-align:middle;margin:8px 10px 8px 0;line-height:1;}
.form-check input {display:block;overflow:hidden;position:absolute;left:1px;top:1px;width:14px;height:14px;background:transparent;border:0;}
.form-check label {display:inline-block; position:relative;min-width:14px;min-height:16px;line-height:16px;vertical-align:top;}
.form-check label span {display:inline-block; padding-left:28px;vertical-align:top;}
.form-check label:before, .form-check label:after {content:''; position:absolute; top:0;}
.form-check label:before {left:0; top:0; width:16px; height:16px; border:1px solid #ddd; background:#fff;}
.form-check label:before {left:0; top:0; width:16px; height:16px; border:1px solid #ddd; background:#fff;}
.form-input-group h6 {margin:10px 0;}
p + .check-group { margin-top:20px;}
.check-group .form-check { margin-right:32px;}
.form-check label[for="rememberId"]:before{border:none; width:0; height:0;}
.form-check label[for="indvdlInfo"]:before {
    border: none;
    width: 0;
    height: 0;
}
.form-check label[for="recptnAgre"]:before {
    border: none;
    width: 0;
    height: 0;
}
.form-check #rememberId{border:1px solid #ddd;}
.form-check #indvdlInfo{border: 1px solid #ddd;}
.form-check #recptnAgre{border: 1px solid #ddd;}

/* Checked */
.form-check input:checked + label:before,
.form-check input:focus + label:before {border-color:#333;}
.form-check input:checked + label:after {left:3px; top:3px; width:10px; height:7px; background:none; border-left:2px solid #333; border-bottom:2px solid #333; transform:rotate(-45deg);}
/* Focused */
.form-check input.is-focused + label:before,
.form-check input:hover + label:before,
.form-check input:focus + label:before {border-color:#888;}
.form-check input:checked:focus + label:before,
.form-check input:checked:hover + label:before {border-color:#333; transition:all 0.3s;}
/* Disabled */
.form-check input[disabled] + label {color:#888888;}
.form-check input[disabled] + label:before {background-color:#f0f0f0;}
.form-check input[disabled]:focus + label:before,
.form-check input[disabled]:hover + label:before {border-color:#ddd;}
.form-check input[disabled]:checked + label:after {border-color:#888;}
.form-check input[disabled]:checked + label:before,
.form-check input[disabled]:checked:focus + label:before,
.form-check input[disabled]:checked:hover + label:before {border-color:#888;}

/* Form Switch */
.form-switch {
    display: inline-block;
    position: relative;
}
.form-switch input {
    z-index: 0;
    border: 0;
    height: 24px;
}
.form-switch input:checked, .form-switch input:checked+label:after {
    left: calc(100% - 42px);
}
.form-switch label:after, .form-switch label:before {
    content: '';
}
.form-switch input+label:after {
    content: 'OFF';
}
.form-switch input:checked+label:after {
    content: 'ON';
}
.form-switch label:before {
    display: inline-block;
    width: 100%;
    height: 30px;
    background-color: #f0f0f0;
    border-radius: 15px;
    vertical-align: top;
}
.form-switch input, .form-switch label:after {
    position: absolute;
    left: 2px;
    top: 50%;
    z-index: 1;
    width: 40px;
    height: 26px;
    line-height: 26px;
    text-align: center;
    border-radius: 13px;
    overflow: hidden;
    background-color: #aaa;
    color: #fff;
    font-size: 12px;
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    -webkit-transition: all 0.3s;
    -o-transition: all 0.3s;
    transition: all 0.3s;
}
.form-switch input:checked+label:after {
    background-color: #333;
}
.form-switch label {
    display: inline-block;
    width: 80px;
    vertical-align: top;
}
.textarea,
.form-textarea {display:block;text-align:left;padding:0 10px;box-sizing:border-box;}
.form-file {display:block;position:relative;}
.form-file input[type="file"] {display:block;overflow:hidden;position:absolute;left:0;top:0; width:0; height:0;background:transparent;border:0;font-size:0;}
.form-file .form-input {display:inline-table;width:360px;}
.form-file .btn_file {display:inline-table;width:80px;}
@media all and (max-width:768px) {
    .form-file { width:100%;}
    .form-file .form-input { width:calc( 100% - 90px );}
}
/* select-layer-wrap */
.select-layer-wrap select { display:block;float:left;border:1px solid #ccc;width:126px;height:36px;background:#fff url("../image/form/arw_select_down.png") no-repeat 100% 50%;margin-left:10px;padding:0 0 0 12px;text-align:center !important;line-height:36px;-moz-appearance: none;-webkit-appearance: none;}
.select-layer-wrap select * { display:block;height:36px;padding:10px;line-height:36px;text-align:center !important;}
.select-layer-wrap select option:not(:checked) { background-color: white; color:#000;text-align:center; }
.select-layer-wrap .input {border:1px solid #ccc;padding:0 10px;height:36px;line-height:36px;}
.select-layer-wrap { display:block;overflow:visible;position:relative;width:100%;height:36px;/*margin-left:12px;*/padding:0; }
.select-layer-wrap .select-layer-inner-wrap { display:block;overflow:hidden;height:36px;background:#fff;border:1px solid #ccc;box-sizing:border-box;}
.select-layer-wrap.active .select-layer-inner-wrap { display:block;position:absolute;left:0;top:0;z-index:999999;width:100%;height:auto;background-color:#fff;border:1px solid #3b96eb;box-sizing:border-box;}
.select-layer-wrap .select-layer-inner-wrap .title-select { display:block;position:relative;width:100%;height:36px;line-height:36px;text-align:left;}
.select-layer-wrap .select-layer-inner-wrap .title-select .title { display:block;position:relative;margin:0 40px 0 10px;line-height:36px; }
.select-layer-wrap .select-layer-inner-wrap .title-select .btn-view-select { display:block;overflow:hidden;position:absolute;right:0;top:0;z-index:1;width:38px;height:38px;background:url("../image/form/arw_select_down.png") no-repeat 50% 50%;line-height:36px;text-align:center;}
.select-layer-wrap.active .select-layer-inner-wrap .title-select .btn-view-select { color:#3b96eb;background:url("../image/form/arw_select_up.png") no-repeat 50% 50%;}
.select-layer-wrap .select-layer-inner-wrap .title-select .btn-view-select > span { display:block;position:absolute;left:-9999999999999px;top:-99999999999999px;width:0;height:0;font-size:0;}
.select-layer-wrap .select-layer-inner-wrap .date-wrap { display:block;position:relative;border-top:1px solid #cccccc; box-sizing:border-box; }
.select-layer-wrap .select-layer-inner-wrap .date-wrap .date-input { display:block;position:relative;margin:0 10px 10px 10px;}
.select-layer-wrap .select-layer-inner-wrap .date-wrap .date-input .input-date {display:block;position:relative;width:100%;margin:0 0 0 0;box-sizing:border-box;}
.select-layer-wrap .select-layer-inner-wrap .date-wrap .date-input .input-date::placeholder {font-weight:normal;}
.select-layer-wrap .select-layer-inner-wrap .date-wrap .date-input .btn-cal {display:block; position:absolute;right:0;top:0;z-index:1;width:38px;height:100%;background-image:url(../image/form/icon_date_cal.png);background-repeat:no-repeat;background-position:50% 50%;background-size:19px 19px;}
.select-layer-wrap .select-layer-inner-wrap .date-wrap .date-input .btn-apply { width:100%;}
.select-layer-wrap .select-layer-inner-wrap ul { display:block;position:relative;}
.select-layer-wrap .select-layer-inner-wrap ul li { display:block;color:#333333;}
.select-layer-wrap .select-layer-inner-wrap ul li .option {display:block;width:100%;height:36px;background:#fff;color:#333333;line-height:36px;text-align:left;margin:0;padding:0 0;}
.select-layer-wrap .select-layer-inner-wrap ul li .option span {margin:0 10px;color:inherit;}
.select-layer-wrap .select-layer-inner-wrap ul li .option:hover,
.select-layer-wrap .select-layer-inner-wrap ul li .option:focus {background:#f7f7f7;color:#333;text-decoration:none;}
.select-layer-wrap .select-layer-inner-wrap ul li.active .option { background:#3b96eb;color:#fff;}
.layout-cols.has-layer .col .btn-search { display:block;width:100%;background-color:#333;border:0;margin-bottom:10px;}
.select-layer-wrap .title-calendar {display:block;line-height:36px;color:#333;text-align:center;}

@media all and (max-width:768px){
    .select-layer-wrap,
    .select-layer-wrap .select-layer-inner-wrap,
    .select-layer-wrap .select-layer-inner-wrap .title-select,
    .select-layer-wrap .select-layer-inner-wrap .title-select .title { height:44px;line-height:44px; }
}

.checkStyle{ font-size:0;margin:-5px 0 0 -10px; }
.checkStyle .form-radio{ display:inline-block; vertical-align:middle; margin:5px 0 0 10px; }
.checkStyle .form-radio label:after,
.checkStyle .form-radio label:before { border-radius:0 !important; }
.checkStyle .form-radio label span{ font-size:15px; }