@charset "utf8";

/**
  * GUPSA COMMON CSS
  * - w/ font.css
  * - w/ normalize.css
  *
  */

@import "font.css";
@import "normalize.css";


/** -------------------------- 크기나 색상 등 기본 설정 시작 ----------------------------    */

:root{
  --font1: #111;
  --font2: #505050;
  --font3: #767676;
  --font4: #999999;
  --line1: #111;
  --line2: #E1E1E4;
  --line3: #E9E9ED;
  --line4: #F1F3F3;
  --bg0: #111;
  --bg1: #F1F1F5;
  --bg2: #F8F8FA;
  --bg3: #F1F1F4;
  --bg4 : #FDFDFD;
  /** 사이즈 설정 */
  --f1: 3rem;
  --l1: 3.875rem;
  --f2: 2.5rem;
  --l2: 3.375rem;
  --f3: 2.25rem;
  --l3:3rem;
  --f4:1.625rem;
  --l4:2.25rem;
  --f5:1.375rem;
  --l5:2rem;
  --f6: 1.25rem;
  --l6: 1.875rem;
  --f7: 1.125rem;
  --l7: 1.625rem;
  --f8: 1rem;
  --l8: 1.5rem;
  --f9: 0.875rem;
  --l9: 1.375rem;

  --color-N90: #111111;
  --color-N80: #505050;
  --color-N70: #767676;
  --color-N60: #999999;
  --color-N50: #C0C0C0;
  --color-N40: #E1E1E4;
  --color-N30: #E9E9ED;
  --color-N20: #F1F1F5;
  --color-N10: #F8F8FA;

  --font-color-1: #111111;
  --font-color-2: #505050;
  --font-color-3: #767676;
  --font-color-4: #999999;

  --line-color-1: #111111;
  --line-color-2: #E1E1E4;
  --line-color-3: #E9E9ED;

  --color-primary : #3CBFE2;
  --color-sub-primary : #0D1C49;
  --color-primary-50:#3CBFE27F;
  --color-primary-20:#3CBFE233;

  --bg-grdt : radial-gradient(17.86% 80.29% at 38.88% 130.29%, rgba(252, 224, 52, 0.7) 0%, rgba(252, 224, 52, 0) 100%) , radial-gradient(28.05% 118.72% at 67.66% 128.43%, rgba(1, 155, 165, 0.8) 0%, rgba(39, 217, 198, 0.512) 53.33%, rgba(79, 255, 135, 0) 100%), radial-gradient(37.61% 121.14% at 31.8% -49.71%, rgba(255, 0, 55, 0.8) 0%, rgba(255, 0, 55, 0.512) 53.33%, rgba(255, 0, 55, 0) 100%), #1B0633;

  --bg-grdt-v:linear-gradient(0deg, rgba(255, 0, 0, 0.2), rgba(255, 0, 0, 0.2)), linear-gradient(83.68deg, #FFC784 7.7%, #F061C4 63.49%, #FD4255 107.32%);
}




/** -------------------------- 크기나 색상 등 기본 설정 끝 ----------------------------    */



html{
  /* -webkit-touch-callout:none;  */
  /* -webkit-user-select:none;  */
  -webkit-tap-highlight-color:rgba(0, 0, 0, 0);
  overflow-x: hidden;
  line-height: normal;
  overflow-x: hidden;
}
body{
  overflow-x: hidden;

}
body, body * {
  box-sizing: border-box;
}

h1{
  font-size: initial;
  margin: 0;
}

h1, h2, h3, h4, h5, h6, p {
  margin: 0;
  padding: 0;  
}


button,
input,
optgroup,
select,
textarea {
  font-size: inherit;
  line-height: normal; /* 1 */
}

fieldset {
  padding: 0;
}


a {
  color: inherit;
  text-decoration: none;
}

address, em{
	font: inherit;
}

ol, ul{
  margin: 0;
  padding: 0;
}

li{
  list-style: none;
}

button, input[type=submit]{
  border: none;
  background: none;
  box-shadow: none;
}


body, body * {
  font-family: 'Pretendard';
}


.state{
  display: inline-block;
  padding: .125rem .25rem;
  border-radius: .25rem;
  font-weight: 500;
  vertical-align: middle;
}
.state.state_1{
  background: #FCE5E4;
  color: #9A1C13;
}
.state.state_2{
  background: #FDEAD8;
  color: #AE590A;
}
.state.state_5{
  background: #D1FAE4;
  color: #166E3F;
}
.state.state_6{
  background: #aab1e4;
  color: #191d3a;
}
.state.state_7{
  background: #f7e8e7;
  color: #c1261f;
  animation: attention 1s ease infinite;
}

.state.state_8{
  background: #E3EAFD;
  color: #133A9A;
}

.state.state_9{
  background: #E9EAEC;
  color: #0F132499;
}

@keyframes attention {
  0%{
    opacity: 0;
  }
  50%{
    opacity: 1;
  }
  100%{
    opacity: 0;
  }
}

.big_checkbox{
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  width: 1.625rem;
  height: 1.625rem;
  background: url(../img/big_cb_unchecked.svg) no-repeat center center / cover;
}
.big_checkbox:checked{
  background-image: url(../img/big_cb_checked.svg);
}


.checkbox{
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  background: url(../img/cb_Default.svg) no-repeat center center / cover;
  vertical-align: middle;
}
.checkbox:hover{
  background-image: url(../img/cb_tap_hover.svg);
}
.checkbox:disabled{
  background-image: url(../img/cb_Disabled.svg);
}
.checkbox:checked{
  background-image: url(../img/cb_selected.svg);
}
.checkbox:checked:disabled{
  background-image: url(../img/cb_selectedDisabled.svg);
}
.checkbox + label{
  vertical-align: middle;
  padding-left: .25rem;
  font-size: .875rem;
  line-height: 1.375rem;
  display: inline-block;
}

.radio{
  -webkit-appearance: none;
  -moz-appearance: none;
  -o-appearance: none;
  appearance: none;
  width: 1.25rem;
  height: 1.25rem;
  background: url(../img/r_Default.svg) no-repeat center center / cover;
  vertical-align: middle;
}
.radio:hover{
  background-image: url(../img/r_tap_hover.svg);
}
.radio:disabled{
  background-image: url(../img/r_Disabled.svg);
}
.radio:checked{
  background-image: url(../img/r_selected.svg);
}
.radio:checked:disabled{
  background-image: url(../img/r_selectedDisabled.svg);
}
.radio + label{
  vertical-align: middle;
  padding-left: .25rem;
  font-size: .875rem;
  line-height: 1.375rem;
  display: inline-block;
}