@charset "utf-8";

/*font
normal : 15px
small : 13px*/
html, body {line-height:1.5; font-size: 15px;}
html {-ms-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none;}
body {overflow-x: hidden; font-family: 'Spoqa Han Sans Neo', sans-serif;}
a{color: #333333; text-decoration: none;}
a:hover {text-decoration: none;}
img{max-width:100%;}
i{font-style:inherit;}
hr{border:1px dashed #ededed; border-width:0 0 1px 0; margin:20px 0;}
[lang="en"] {font-family: 'Titillium', 'NotoSansKR', sans-serif;}

/* form control */
input,
select,
textarea,
label{display:inline-block; width:auto; vertical-align:middle; line-height:1.4; border-radius:0;}
/* input[type=text],
input[type=tel],
input[type=email],
input[type=password],
input[type=url],
input[type=submit],
input[type=button],
select{-webkit-appearance: none;-moz-appearance: none; appearance: none; -moz-box-sizing: border-box; box-sizing: border-box; height:40px; padding: 0 20px; outline: none; background: transparent; border:0; border:1px solid #ededed; font-family: 'NotoSansKR', sans-serif; background-color: #fff;} */
select {background:url(../images/common/icon_down.svg) no-repeat; background-position: calc(100% - 20px) center; background-size: 12px auto;}
input[type=radio]{border-radius: 100%;}
input:disabled,
input:-moz-read-only{background: #f8fafb;border-color: #e9e9e9;-webkit-box-shadow: none;box-shadow: none;}
input[readonly],
input[disabled]{background: #F1F3F5 !important;}
.datepicker[readonly],
.datepicker[disabled]{background-color: #f9f9f9;}
select::-ms-expand{display: none;}
textarea{resize:none; font-family: 'Titillium', 'NotoSansKR', sans-serif;}
textarea[disabled]{background: #F1F3F5 !important;}
input[type=submit],
button{font-size:inherit; font-family: 'NotoSansKR', sans-serif; cursor: pointer;}
input[lang="en"],
textarea[lang="en"],
button[lang="en"] {font-family: 'Titillium', 'NotoSansKR', sans-serif;}

/* input */
.input60{width:60px !important;}
.input80{width:80px !important;}
.input100{width:100px !important;}
.input150{width:150px !important;}
.input200{width:200px !important;}
.input300{width:300px !important;}
.input400{width:400px !important;}
.input500{width:500px !important;}
.inputHalf{width:50% !important;}
.inputFull{width:100% !important;}
.form_control {position: relative; display: inline-block; height: 34px; padding: 6px 10px; border: 1px solid #ced4da; background-color: #fff; border-radius: 4px; box-sizing: border-box; transition: all .15s;}
.form_control:focus {background-color: #fff; border-color: #4e73df; outline: 0; box-shadow: 0 0 0 4px rgba(78,115,223,.25);}
textarea {height: auto !important;}
.form_control.form_num {width: 60px;}

/* button */
.btn {display: inline-block; font-weight: 400; text-align: center; vertical-align: middle; user-select: none; border: 1px solid transparent; background-color: transparent; padding: 6px 10px; font-size: 15px; border-radius: 4px; transition: color .15s;}
.btn-primary {color: #fff; background-color: #4e73df; border-color: #4e73df;}
.btn-success {color: #fff; background-color: #1CC88A; border-color: #1CC88A;}
.btn-info {color: #fff; background-color: #36B9CC; border-color: #36B9CC;}
.btn-warning {color: #fff; background-color: #F6C23E; border-color: #F6C23E;}
.btn-danger {color: #fff; background-color: #E74A3B; border-color: #E74A3B;}
.btn-secondary {color: #fff; background-color: #858796; border-color: #858796;}
.btn-light {color: #333; background-color: #F8F9FC; border-color: #CED4DA;}
.btn.md {min-width: 80px; height: 32px; line-height: 30px; padding: 0 12px; font-size: 13px;}
.btn.sm {min-width: 60px; height: 24px; line-height: 22px; padding: 0 10px; font-size: 12px;}
.btn > i {font-size: 18px; margin-left: 4px; opacity: .6;}

/* shadow */
.shadow {box-shadow: 0 10px 10px 0 rgba(0,0,0,.15);}
.shadow-sm {box-shadow: 0 4px 8px 0 rgba(0,0,0,.075);}

/* checkbox */
.checkbox {display: inline-block;}
.checkbox input[type="checkbox"] {display: none;}
.checkbox label {display: inline-block; position: relative;}
.checkbox label > span {vertical-align: middle; margin-left: 4px;}
.checkbox label:before {content: ''; position: relative; display: inline-block; width: 16px; height: 16px; border: 2px solid #CED4DA; vertical-align: middle;}
.checkbox label:before {transition: all .2s linear;}
/* .checkbox label:after {position: absolute; top: 0; left: 0;} */
.checkbox input:checked + label:before {border-color: #4e73df; background: #fff;}
.checkbox input:checked + label:after {content: ''; height: 3px; width: 8px; position: absolute; top: 11px; left: 10px; transform: translate3d(-50%, -50%, 0) rotate(-45deg); border-color: transparent; border-bottom: 2px solid #4e73df; border-left: 2px solid #4e73df; border-radius: 0;}
.checkbox input:checked + label > span {color: #4e73df;}
.checkbox input:disabled + label:before {background: #E2E9F9;}

.all_check .checkbox {display: block;}

/* radio */
.radio {display: inline-block;}
.radio input[type="radio"] {display: none;}
.radio label {display: inline-block; position: relative;}
.radio label > span {vertical-align: middle; margin-left: 4px;}
.radio label:before {content: ''; position: relative; display: inline-block; width: 17px; height: 17px; border: 2px solid #CED4DA; border-radius: 50%; vertical-align: middle;}
.radio label:before {transition: all .2s linear;}
/* .radio label:after {position: absolute; top: 0; left: 0;} */
.radio input:checked + label:before {border-color: #4e73df; background: transparent;}
.radio input:checked + label:after {content: ''; height: 9px; width: 9px; position: absolute; display: block; background-color: #4e73df; border: transparent; top: 7px; left: 6px; border-radius: 50%;}
.radio input:checked + label > span {color: #4e73df;}

/* margin */
.mt20 {margin-top: 20px;}
.mb20 {margin-bottom: 20px;}

/* text align */
.tl {text-align: left !important;}
.tr {text-align: right !important;}
.tc {text-align: center !important;}

/* file */
.file {position: relative;}
.file input[type="file"] {overflow:hidden; position:absolute; margin:-1px; width:1px; height:1px; clip:rect(0,0,0,0);}
/* .file .file_btn {color: #E74A3B;} */

.left_wrap {float: left;}
.right_wrap {float: right;}

/* scroll bar */
::-webkit-scrollbar {width: 6px; height: 6px;}
::-webkit-scrollbar-thumb {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); border-radius: 10px;}
::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);}

.pointer {cursor: pointer;}

/* **************************************** *
 * 767px
 * **************************************** */
 @media (max-width: 767px) {

    html, body {font-size: 14px;}

    /* button */
    .btn {padding: 4px 8px;}

    /* input */
    .form_control {margin: 3px 0;}
}