/*  color  */
:root {
  --primary:#239fdb;
  --secondary:#00549c;
  --secondary-tint:#f5faff;
  --nav:#11aaf4;
  --gray:#414141;

  --fill:#f2efef;

  --gs200:#222;
  --gs320:#323232;
  --gs600:#666;
  --gs900:#999;

  --bd:#cecece;

  --red:#d21903;

  /*  로그인  */
  --iw-gray-50:#6d7882;
  --iw-primary:#256ef4;
}

.bg-wh {background:#fff !important;}
.bg {background-color:var(--fill);}


/*  input  */
.input {border-radius:0.4rem; height: 36px; border:1px solid var(--bd); background:#fff; padding-left:var(--sz-xs); padding-right:var(--sz-xs);}
.input.full {width: 100%;}
.select {border:1px solid #888; border-radius:0.4rem; background:url('../img/ico_select_arrow.png') no-repeat right 7px center #fff; padding-left:7px; padding-right: 24px; font-size:0.9rem; height: 36px;}

.radio {margin-left: 40px; display: inline-flex; align-items: center; position: relative;}
.radio::before {
  content:'';
  position: absolute;
  left:-5px;
  top:-5px;
  width:calc(100% + 6px);
  height:calc(100% + 6px);
  border-radius:4px;
  border:2px solid #323232;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.radio:focus-within::before {
  opacity: 1;
}
.radio:first-child {margin-left: 0;}
.radio label {position: relative; display: inline-flex; cursor: pointer; align-items: center;}
.radio input[type="radio"] {position: absolute; opacity: 0; width: 0; height: 0;clip: rect(0, 0, 0, 0); clip-path: inset(50%);}
.radio label::before {content:''; width: 22px; height: 22px; border:1px solid #888; border-radius:50%; display: inline-block; margin-right: 10px;}
.radio input[type="radio"]:checked + label::before {border-color:var(--primary);}
.radio input[type="radio"]:checked + label::after {content:''; width: 14px; height: 14px; border-radius:50%; background:var(--primary); position: absolute; top:5px; left:5px;}


.hp-checkbox {position:relative;display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;font-size:14px;}
.hp-checkbox::before {
  content:'';
  position: absolute;
  left:-5px;
  top:-5px;
  width:calc(100% + 6px);
  height:calc(100% + 6px);
  border-radius:4px;
  border:2px solid #323232;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s;
}
.hp-checkbox:focus-within::before {
  opacity: 1;
}
.hp-checkbox input[type="checkbox"] {position:absolute;opacity:0;cursor:pointer;height:0;width:0;}
.hp-checkbox .checkmark {width:18px;height:18px;background-color:#fff;border:1px solid #999;border-radius:4px;display:inline-block;position:relative;transition:all 0.2s ease;box-sizing:border-box;}
.hp-checkbox input[type="checkbox"]:checked+.checkmark {background-color:var(--primary);border-color:var(--primary);}
.hp-checkbox input[type="checkbox"]:checked+.checkmark::after {content:"";position:absolute;left:5px;top:1px;width:4px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);}


/*  버튼  */
.btn {height: 34px; font-size:0.95rem; display: inline-flex; font-weight: 500; width:78px; align-items: center; justify-content: center; line-height: 1; color:#fff; border-radius:0.4rem;}
.btn:hover {box-shadow: inset 0 0 0 9999px rgba(0, 0, 0, 0.15);}
.btn:focus {outline:2px solid #222;}
.btn.min {width:47px; height: 36px;}
.btn.auto {width: auto !important; padding:0 12px}
.btn.lightgray {background:#cecece; color:#101010;}
.btn.gray {background:#848484; color:#fff;}
.btn.bk {background:#242424;}
.btn.primary {background:var(--secondary); color:#fff;}
.btn.blue {background:#287bc2; color:#fff;}

.btn.ico {width: auto; padding:0 16px; position: relative;}
.btn.ico i { width: 24px; height: 24px;}
.btn.arrow i {background:url('../img/ico_arrow_right_wh.png') no-repeat right center;}
.btn.arrow-bk i {background:url('../img/ico_arrow_right_bk.png') no-repeat right center;}
.btns {
  display: flex; align-items: center; justify-content: end; padding:var(--sz-md) 0 var(--sz-lg);
  gap:4px;
}
.btns.set {
  justify-content: center; position: relative;
}
.btns.set .side {position: absolute; top:50%; transform: translateY(-50%); right:0;}

@media all and (max-width: 639px) {
  .btn {
    width: 96px; height: 40px;
  }
  .btn.ico {padding-right:42px;}
  .btn.ico i {position: absolute; top:50%; transform: translateY(-50%); right:16px;}
  .btns.set {
    justify-content: end;
  }
  .btns.set .btn.mo-full {
    width:100%;
  }
  .btns.set .side {
    position: relative;
    right:auto;
    top:auto;
    transform: none;
    display: flex;
    gap:4px;
  }
  .btns.set .side .btn {
    width: auto;
    padding:0 16px;
    min-width:66px;
  }
}

/*  폰트사이즈  */
.fs14 {font-size:0.9rem;}
.fs18 {font-size:1.1rem;}
.fs20 {font-size:1.3rem;}
.fs24 {font-size:1.5rem;}
.fs28 {font-size:1.75rem;}
.fs32 {font-size:2rem;}

@media all and (max-width:360px) {
.xs-fs14 {font-size:0.9rem;}
.xs-fs18 {font-size:1.1rem;}
}

/*  폰트두께  */
.fw100 {font-weight: 100;}
.fw200 {font-weight: 200;}
.fw300 {font-weight: 300;}
.fw400 {font-weight: 400;}
.fw500 {font-weight: 500;}
.fw600 {font-weight: 600;}
.fw700 {font-weight: 700;}
.fw800 {font-weight: 800;}
.fw900 {font-weight: 900;}

/*  폰트컬러  */
.c-gs200 {color:var(--gs200);}
.c-gs320 {color:var(--gs320);}
.c-gs600 {color:var(--gs600);}
.c-gs900 {color:var(--gs900);}

/*  텍스트 행간  */
.lh100 {line-height: 1;}
.lh120 {line-height: 1.2;}
.lh150 {line-height: 1.5;}
.lh180 {line-height: 1.8;}


/*  텍스트 자간  */
.ls-1 {letter-spacing: -1px;}
.ls-2 {letter-spacing: -2px;}

/*  텍스트 정렬  */
.txt-l {text-align: left;}
.txt-r {text-align: right;}
.txt-ct {text-align: center;}

/*  레이아웃 정렬  */
.hide {display: none !important;}
.block {display: block !important;}
.flex {display: flex; justify-content: space-between; align-items: center;}
.flex-c {display: flex; justify-content: center; align-items: center;}
.flex-l {display: flex; justify-content: flex-start; align-items: center;}
.flex-ar {display: flex; justify-content:space-around; align-items: center;}
.flex-wrap {flex-wrap: wrap;}

@media all and (max-width:767px) {
  .flex.mo-drop {justify-content: flex-start; flex-wrap: wrap;}
}

/*  border  */
.bd-b {border-bottom:1px solid var(--bd);}
.bd-t {border-top:1px solid var(--bd);}

.bd-none {border-bottom:none !important;}

/*  radius  */
.round {border-radius: 0.4rem;}
.round50 {border-radius: 0.8rem;}
.round100 {border-radius: 50%;}

/*  box-shadow  */
.shadow {box-shadow: 0 3px 10px rgba(0,0,0,0.1);}

/* 말줄임 */
.el-1 {white-space: nowrap;overflow: hidden;text-overflow: ellipsis; display: block;}
.el-2 {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.el-3 {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical;}
.el-4 {overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical;}

/*  사이즈(padding, margin)  */
:root {
  --sz-xxxs:0.25rem; /* 4px */
  --sz-xxs:0.438rem; /* 7px */
  --sz-xs:0.625rem;  /* 10px */
  --sz-sm:1rem;      /* 16px */
  --sz-md:1.25rem;   /* 20px */
  --sz-lg:1.875rem;  /* 30px */
  --sz-xl:2.5rem;    /* 40px */
  --sz-xxl:3.75rem;  /* 60px */
  --sz-xxxl:6.25rem; /* 100px */
}

.m-xxxs {margin:var(--sz-xxxs);}
.m-xxs {margin:var(--sz-xxs);}
.m-xs {margin:var(--sz-xs);}
.m-sm {margin:var(--sz-sm);}
.m-md {margin:var(--sz-md);}
.m-lg {margin:var(--sz-lg);}

.mt00 {margin-top: 0 !important;}
.mt-xxxs {margin-top:var(--sz-xxxs);}
.mt-xxs {margin-top:var(--sz-xxs);}
.mt-xs {margin-top:var(--sz-xs);}
.mt-sm {margin-top:var(--sz-sm);}
.mt-md {margin-top:var(--sz-md);}
.mt-lg {margin-top:var(--sz-lg);}
.mt-xl {margin-top:var(--sz-xl);}
.mt-xxl {margin-top:var(--sz-xxl);}

.mb00 {margin-bottom: 0 !important;}
.mb00 {margin-bottom: 0 !important;}
.mb-xs {margin-bottom:var(--sz-xs);}
.mb-sm {margin-bottom:var(--sz-sm);}
.mb-md {margin-bottom:var(--sz-md);}
.mb-lg {margin-bottom:var(--sz-lg);}
.mb-xl {margin-bottom:var(--sz-xl);}
.mb-xxl {margin-bottom:var(--sz-xxl);}

.ml00 {margin-left: 0 !important;}
.ml-xxxs {margin-left:var(--sz-xxxs);}
.ml-xxs {margin-left:var(--sz-xxs);}
.ml-xs {margin-left:var(--sz-xs);}
.ml-sm {margin-left:var(--sz-sm);}
.ml-md {margin-left:var(--sz-md);}
.ml-lg {margin-left:var(--sz-lg);}
.ml-xl {margin-left:var(--sz-xl);}

.mr00 {margin-right: 0 !important;}
.mr-xxxs {margin-right:var(--sz-xxxs);}
.mr-xxs {margin-right:var(--sz-xxs);}
.mr-xs {margin-right:var(--sz-xs);}
.mr-sm {margin-right:var(--sz-sm);}
.mr-md {margin-right:var(--sz-md);}
.mr-lg {margin-right:var(--sz-lg);}
.mr-xl {margin-right:var(--sz-xl);}

.p-xxxs {padding:var(--sz-xxxs);}
.p-xxs {padding:var(--sz-xxs);}
.p-xs {padding:var(--sz-xs);}
.p-sm {padding:var(--sz-sm);}
.p-md {padding:var(--sz-md);}
.p-lg {padding:var(--sz-lg);}

.pt00 {padding-top: 0 !important;}
.pt-xxs {padding-top:var(--sz-xxs);}
.pt-xs {padding-top:var(--sz-xs);}
.pt-sm {padding-top:var(--sz-sm);}
.pt-md {padding-top:var(--sz-md);}
.pt-lg {padding-top:var(--sz-lg);}
.pt-xl {padding-top:var(--sz-xl);}
.pt-xxl {padding-top:var(--sz-xxl);}

.pb00 {padding-bottom: 0 !important;}
.pb-xxxs {padding-bottom:var(--sz-xxxs);}
.pb-xxs {padding-bottom:var(--sz-xxs);}
.pb-xs {padding-bottom:var(--sz-xs);}
.pb-sm {padding-bottom:var(--sz-sm);}
.pb-md {padding-bottom:var(--sz-md);}
.pb-xl {padding-bottom:var(--sz-xl);}
.pb-xxl {padding-bottom:var(--sz-xxl);}

.pl-xxxs {padding-left:var(--sz-xxxs);}
.pl-xxs {padding-left:var(--sz-xxs);}
.pl-xs {padding-left:var(--sz-xs);}
.pl-sm {padding-left:var(--sz-sm);}
.pl-md {padding-left:var(--sz-md);}
.pl-lg {padding-left:var(--sz-lg);}
.pl-xl {padding-left:var(--sz-xl);}

.pr-xxxs {padding-right:var(--sz-xxxs);}
.pr-xxs {padding-right:var(--sz-xxs);}
.pr-xs {padding-right:var(--sz-xs);}
.pr-sm {padding-right:var(--sz-sm);}
.pr-md {padding-right:var(--sz-md);}
.pr-lg {padding-right:var(--sz-lg);}
.pr-xl {padding-right:var(--sz-xl);}

/*  width  */
.w-100 {width: 100px;}
.w-140 {width: 140px;}
.w-30p {width: 30%;}
.w-50p {width: 50%;}
.w-70p {width: 70%;}
.w-100p {width: 100%;}
@media all and (max-width:430px) {
  .xs-w-100p {width: 100%;}
}


/*  helper  */
.pc-none {
  display: none;
}
.mo-none {
  display: block;
}
@media all and (max-width: 1060px) {
  .pc-none {
    display: block;
  }
  .mo-none {
    display: none;
  }
}