@charset "utf-8";
/* 여백 초기화 */

body, div, ul, li, dl, dd, dt, ol, h1, h2, h3, h4, h5, h6, input, fieldset, legend, p, select, table, th, td, tr, textarea, button, form {
  margin: 0;
  padding: 0;
}

/* a 링크 초기화 */

a {
  color: #525252;
  text-decoration: none;
}

a:hover {
  color: #ea5d4b;
  text-decoration: none
}

/* 폰트 초기화 */

body, input, textarea, select, button, table {
  font-family: 'Noto Sans KR', AppleSDGothicNeo-Regular, 'Malgun Gothic', '맑은 고딕', dotum, '돋움', sans-serif;
  color: #525252;
  font-size: 17px;
  line-height: 23px;
  font-weight: 400;
}

/* 폰트 스타일 초기화 */

em, address, caption, cite, code, dfn, var {
  font-style: normal;
  font-weight: normal
}

/* 블릿기호 초기화 */

dl, ul, li, ol, menu {
  list-style: none
}

/* 제목 태그 초기화 */

h1, h2, h3, h4, h5, h6 {
  font-size: 13px;
  color: #525252;
  font-weight: normal;
}

/* 테두리 초기화 */

img, fieldset {
  border: 0 none;
  vertical-align: top;
}

/* 버튼 초기화 */

button {
  border: 0 none;
}

/* table 초기화 */

table {
  width: 100%;
  border-spacing: 0;
  border-collapse: collapse;
}

th {
  font-weight: normal;
}

/* caption 초기화 */

caption {
  padding: 0;
  margin: 0;
  font-size: 0;
  line-height: 0;
  width: 0;
  height: 0;
  text-indent: -9999px;
}

/* IR 효과 */

/* 의미있는 이미지의 대체 텍스트를 제공하는 경우 */

.ir_pm {
  display: block;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  text-indent: -9999px;
}

/* 의미있는 이미지의 대체 텍스트로 이미지가 없어도 대체 텍스트를 보여주고자 할때 */

.ir_wa {
  display: block;
  overflow: hidden;
  position: relative;
  z-index: -1;
  width: 100%;
  height: 100%;
}

/* 대체 테그트가 아니 접근성을 위한 숨김 텍스트를 제공할때 */

.ir_su {
  overflow: hidden;
  position: absolute;
  width: 0;
  height: 0;
  line-height: 0;
  text-indent: -9999px;
}

.flex_box {
  display: flex;
}

.clearfix:before, .clearfix:after {
  display: block;
  content: ' ';
  line-height: 0;
}

.clearfix:after {
  clear: both;
}

.clearfix {
  *zoom: 1;
}

/* etc */

.unln {
  text-decoration: underline;
}

.al_c {
  text-align: center;
}

.al_r {
  text-align: right;
}

/* form */

select {
  -webkit-appearance: none;
  네이티브 외형 감추기 -moz-appearance: none;
  appearance: none;
  background: url(../images/index_pc_select_arrow.png) no-repeat 98% 50%;
  /* 화살표 모양의 이미지 */
}

/* IE 10, 11의 네이티브 화살표 숨기기 */

select::-ms-expand {
  display: none;
}

input, textarea {
  box-sizing: border-box;
}

textarea {
  resize: none;
}

input.txt {
  border: 1px solid #ddd;
  color: #525252;
  font-size: 1rem;
  height: 2rem;
  line-height: 2;
  padding: 0 0.5rem;
}

textarea.txt {
  border: 1px solid #ddd;
  color: #525252;
  font-size: 1rem;
  height: 2rem;
  line-height: 2;
  padding: 0 0.5rem;
}

select.sel {
  border: 1px solid #ddd;
  color: #525252;
  font-size: 1rem;
  height: 2rem;
  line-height: 2;
  padding: 0 0.5rem;
}

/* !important is needed sometimes */

::-webkit-scrollbar {
  width: 12px !important;
}

/* Track */

::-webkit-scrollbar-track {
  -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2) !important;
  -webkit-border-radius: 3px !important;
  border-radius: 3px !important;
}

/* Handle */

::-webkit-scrollbar-thumb {
  -webkit-border-radius: 3px !important;
  border-radius: 3px !important;
  background: #ccc !important;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.2) !important;
}

::-webkit-scrollbar-thumb:window-inactive {
  background: #ccc !important;
}

html {
  /* Prevent font scaling in landscape */
  -webkit-text-size-adjust: none;
  /*Chrome, Safari, newer versions of Opera*/
  -moz-text-size-adjust: none;
  /*Firefox*/
  -ms-text-size-adjust: none;
  /*Ie*/
  -o-text-size-adjust: none;
  /*old versions of Opera*/
}

/* margin, padding */

.mt10 {
  margin-top: 10px !important;
}

.mt15 {
  margin-top: 15px !important;
}

.mt20 {
  margin-top: 20px !important;
}

.mt25 {
  margin-top: 25px !important;
}

.mt30 {
  margin-top: 30px !important;
}

.mt35 {
  margin-top: 35px !important;
}

.mt40 {
  margin-top: 40px !important;
}

.mt45 {
  margin-top: 45px !important;
}

.mt50 {
  margin-top: 50px !important;
}

.mt100 {
  margin-top: 100px !important;
}

.mb10 {
  margin-bottom: 10px !important;
}

.mb15 {
  margin-bottom: 15px !important;
}

.mb20 {
  margin-bottom: 20px !important;
}

.mb25 {
  margin-bottom: 25px !important;
}

.mb30 {
  margin-bottom: 30px !important;
}

.mb35 {
  margin-bottom: 35px !important;
}

.mb40 {
  margin-bottom: 40px !important;
}

.mb45 {
  margin-bottom: 45px !important;
}

.mb50 {
  margin-bottom: 50px !important;
}

.mb100 {
  margin-bottom: 100px !important;
}

.ml10 {
  margin-left: 10px !important;
}

.ml15 {
  margin-left: 15px !important;
}

.ml20 {
  margin-left: 20px !important;
}

.ml25 {
  margin-left: 25px !important;
}

.ml30 {
  margin-left: 30px !important;
}

.ml35 {
  margin-left: 35px !important;
}

.ml40 {
  margin-left: 40px !important;
}

.ml45 {
  margin-left: 45px !important;
}

.ml50 {
  margin-left: 50px !important;
}

.ml100 {
  margin-left: 100px !important;
}

.mr10 {
  margin-right: 10px !important;
}

.mr15 {
  margin-right: 15px !important;
}

.mr20 {
  margin-right: 20px !important;
}

.mr25 {
  margin-right: 25px !important;
}

.mr30 {
  margin-right: 30px !important;
}

.mr35 {
  margin-right: 35px !important;
}

.mr40 {
  margin-right: 40px !important;
}

.mr45 {
  margin-right: 45px !important;
}

.mr50 {
  margin-right: 50px !important;
}

.mr100 {
  margin-right: 100px !important;
}

.pt10 {
  padding-top: 10px !important;
}

.pt15 {
  padding-top: 15px !important;
}

.pt20 {
  padding-top: 20px !important;
}

.pt25 {
  padding-top: 25px !important;
}

.pt30 {
  padding-top: 30px !important;
}

.pt35 {
  padding-top: 35px !important;
}

.pt40 {
  padding-top: 40px !important;
}

.pt45 {
  padding-top: 45px !important;
}

.pt50 {
  padding-top: 50px !important;
}

.pt100 {
  padding-top: 100px !important;
}

.pb10 {
  padding-bottom: 10px !important;
}

.pb15 {
  padding-bottom: 15px !important;
}

.pb20 {
  padding-bottom: 20px !important;
}

.pb25 {
  padding-bottom: 25px !important;
}

.pb30 {
  padding-bottom: 30px !important;
}

.pb35 {
  padding-bottom: 35px !important;
}

.pb40 {
  padding-bottom: 40px !important;
}

.pb45 {
  padding-bottom: 45px !important;
}

.pb50 {
  padding-bottom: 50px !important;
}

.pb100 {
  padding-bottom: 100px !important;
}

.pl10 {
  padding-left: 10px !important;
}

.pl15 {
  padding-left: 15px !important;
}

.pl20 {
  padding-left: 20px !important;
}

.pl25 {
  padding-left: 25px !important;
}

.pl30 {
  padding-left: 30px !important;
}

.pl35 {
  padding-left: 35px !important;
}

.pl40 {
  padding-left: 40px !important;
}

.pl45 {
  padding-left: 45px !important;
}

.pl50 {
  padding-left: 50px !important;
}

.pl100 {
  padding-left: 100px !important;
}

.pr10 {
  padding-right: 10px !important;
}

.pr15 {
  padding-right: 15px !important;
}

.pr20 {
  padding-right: 20px !important;
}

.pr25 {
  padding-right: 25px !important;
}

.pr30 {
  padding-right: 30px !important;
}

.pr35 {
  padding-right: 35px !important;
}

.pr40 {
  padding-right: 40px !important;
}

.pr45 {
  padding-right: 45px !important;
}

.pr50 {
  padding-right: 50px !important;
}

.pr100 {
  padding-right: 100px !important;
}

.checks {
  position: relative;
}

.checks input[type="checkbox"] {
  /* 실제 체크박스는 화면에서 숨김 */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0
}

.checks input[type="checkbox"]+label {
  display: inline-block;
  position: relative;
  cursor: pointer;
  line-height: 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.checks input[type="checkbox"]+label:before {
  /* 가짜 체크박스 */
  content: ' ';
  display: inline-block;
  width: 21px;
  /* 체크박스의 너비를 지정 */
  height: 21px;
  /* 체크박스의 높이를 지정 */
  line-height: 1;
  /* 세로정렬을 위해 높이값과 일치 */
  margin: -2px 8px 0 0;
  text-align: center;
  vertical-align: middle;
  background: #fafafa;
  border: 1px solid #cacece;
  border-radius: 3px;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
}

.checks input[type="checkbox"]+label:active:before, .checks input[type="checkbox"]:checked+label:active:before {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
}

.checks input[type="checkbox"]:checked+label:before {
  /* 체크박스를 체크했을때 */
  content: '\2714';
  /* 체크표시 유니코드 사용 */
  color: #99a1a7;
  text-shadow: 1px 1px #fff;
  background: #e9ecee;
  border-color: #adb8c0;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
}

.checks {
  position: relative;
}

.checks input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.checks input[type="radio"]+label {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  cursor: pointer;
  line-height: 15px;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

.checks input[type="radio"]+label:before {
  content: '';
  position: absolute;
  left: 0;
  top: -4px;
  width: 21px;
  height: 21px;
  text-align: center;
  background: #fafafa;
  border: 1px solid #cacece;
  border-radius: 100%;
  box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
}

.checks input[type="radio"]+label:active:before, .checks input[type="radio"]:checked+label:active:before {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
}

.checks input[type="radio"]:checked+label:before {
  background: #E9ECEE;
  border-color: #adb8c0;
}

.checks input[type="radio"]:checked+label:after {
  content: '';
  position: absolute;
  top: 1px;
  left: 5px;
  width: 13px;
  height: 13px;
  background: #99a1a7;
  border-radius: 100%;
  box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.3);
}