@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;800&display=swap');
/* @import url('https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp'); */
:root {
  --color-pri: #009bfa;
  --color-error: #ff0000;
  --color-disabled: #f7f7f7;
  --color-active:#009bfa;
  --color-rate: #ff1818;
  --color-default: #eeeeee;
  --color-gray000: #dadada;
  --color-gray100: #999999;
  --color-gray200: #8a8a8a;
  --color-gray300: #777777;
  --color-gray400: #666666;
  --color-gray700: #333333;
  --color-gray800: #222222;
  --size-head1: 40px;
  --size-head2: 28px;
  --size-head3: 24px;
  --size-title1: 24px;
  --size-title2: 22px;
  --size-title3: 20px;
  --size-title4: 18px;
  --size-body1: 24px;
  --size-body2: 22px;
  --size-body3: 18px;
  --size-body4: 16px;
  --size-body5: 14px;
  --size-body6: 12px;
  --size-body7: 10px;
  --size-caption1: 12px;
  --size-caption2: 11px;
}
* { margin: 0; padding: 0; font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; color: #000; font-weight: 400; }
*, :after, :before { box-sizing: border-box; }
*:after, *:before { pointer-events: none; }
html, body { min-height: 100%; background-color: #fff; }
body { -webkit-transition: height 10ms linear; transition: height 10ms linear; }
h1, h2, h3, h4, h5, h6 { font-weight: 400; }
ol, ul, dl, dt, dd, li { list-style: none; }
table { width: 100%; }
table, tr, th, td { font-weight: 400; }
th, td { padding: 4px 0; }
table[border="1"] { border-left: 1px solid #222; border-top: 1px solid #222; }
table[border="1"] th, table[border="1"] td { border-right: 1px solid #222; border-bottom: 1px solid #222; }
button { border: 0; border-radius: 0; background-color: transparent; }
a { text-decoration: none; }
b { font-weight: 500; }
table { border-collapse: collapse; border-spacing: 0; }
strong { font-weight: 500; }
img { border-style: none; vertical-align: top; }
button, input, optgroup, select, textarea { margin: 0; font-family: inherit; font-size: inherit; line-height: inherit; vertical-align: top; }
[type=button], [type=reset], [type=submit], button { -webkit-appearance: button; appearance: button; }
[type=checkbox], [type=radio] { padding: 0; }
[hidden], template { display: none; }
[data-multiple] { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
[data-multiple="1"] { display: block; text-overflow: ellipsis; white-space: nowrap; }
[data-multiple="2"] { -webkit-line-clamp: 2; }
[data-multiple="3"] { -webkit-line-clamp: 3; }
[data-bullet] { position: relative; padding-left: 12px; }
[data-bullet]:before{ content: attr(data-bullet); position: absolute; left: 0; }
[data-refer] { position: relative; padding-left: 16px;}
[data-refer]:before { content: attr(data-refer); position: absolute; left: 0; }
[data-bullet]:nth-child(n+2), [data-refer]:nth-child(n+2) { margin-top: 20px; }

/* Common */
.block { display: block; }
.inline-block { display: inline-block; }
.none { display: none; }
.hidden { visibility: hidden; }
.flex { display: flex; }
.flex.__jc-end { justify-content: flex-end; }
.flex.__jc-between { justify-content: space-between; align-items: center; }
.flex.__jc-center { justify-content: center; }
.flex.__jc-evenly { justify-content: space-evenly; font-size: large; }
.flex.__jc-around { justify-content: space-around }   
.flex.__ai-start { align-items: flex-start; }
.flex.__ai-center { align-items: center; }
.flex.__fd-column { flex-direction: column; }
.flex > .button:nth-child(odd) { margin-right: 4px; }
.flex > .button:nth-child(even) { margin-left: 4px; width: 100%; z-index: 99; }
.flex > .grow { flex-grow: 1; }
.flex > .shrink { flex-shrink: 1; }
.flex > .shrink.part { flex-shrink: 1.5; }
.flex.__x2 { flex-wrap: wrap; justify-content: flex-start; }
.flex.__x2.__gap { justify-content: space-between; }
.flex.__x2.__gap * { flex-basis: calc(50% - 10px); }
.flex.__x2 > * { flex-basis: 50%; }
.flex.__x3 { flex-wrap: wrap; justify-content: flex-start; }
.flex.__x3 > * { flex-basis: 33.333333%; }

.m0 { margin: 0px !important; }
.mt4 { margin-top: 4px !important; }
.mt6 { margin-top: 6px !important; }
.mt8 { margin-top: 8px !important; }
.mt10 { margin-top: 10px !important; }
.mt13 { margin-top: 13px !important; }
.mt15 { margin-top: 15px !important; }
.mt20 { margin-top: 20px !important; }
.mt25 { margin-top: 25px !important; }
.mt30 { margin-top: 30px !important; }
.mt40 { margin-top: 40px !important; }
.mt45 { margin-top: 45px !important; }
.mt50 { margin-top: 50px !important; }
.mt60 { margin-top: 60px !important; }
.mt70 { margin-top: 70px !important; }
.mt110 { margin-top: 110px; }
.mt130 { margin-top: 130px; }
.mt170 { margin-top: 170px!important; }
.mt200 { margin-top: 200px!important; }

.mr5 { margin-right: 5px !important; }
.mr10 { margin-right: 10px !important; }
.mr15 { margin-right: 15px !important; }
.mr20 { margin-right: 20px !important; }
.mr140 { margin-right: 140px !important; }

.ml3 { margin-left: 3px !important; }
.ml5 { margin-left: 5px !important; }
.ml10 { margin-left: 10px !important; }
.ml20 { margin-left: 20px !important; }
.ml50 { margin-left: 50px !important; }

.mbt5 { margin-bottom: 5px; }
.mbt15 { margin-bottom: 15px; }
.mbt30 { margin-bottom : 30px; }

.mgx0 { margin-left : 0; margin-right: 0; }
.mgx5 { margin: 0 5px; }

.mgy30 { margin: 30px 0; }
.mgy40 { margin: 40px 0; }

.pdx10 { padding: 0 10px; }
.pdx15 { padding: 0 15px; }
.pdx20 { padding: 0 20px; }


.pd10 { padding: 10px; }
.pd15 { padding: 15px; }

.pdl5 { padding-left: 5px; }

.fw600 { font-weight: 600!important; }
.fw700 { font-weight: 700; }

.outer { margin-left: -20px; margin-right: -20px; }

.head1 { font-size: var(--size-head1); line-height: 50px; letter-spacing: -2px; }
.head2 { font-size: var(--size-head2); line-height: 42px; letter-spacing: -1px; font-weight: 500; }
.head3 { font-size: var(--size-head3); line-height: 30px; letter-spacing: -1px; }
.title1 { font-size: var(--size-title1); line-height: 30px; }
.title2 { font-size: var(--size-title2); line-height: 30px; }
.title3 { font-size: var(--size-title3); line-height: 30px; }
.title4 { font-size: var(--size-title4); line-height: 22px; }
.body1 { font-size: var(--size-body1); line-height: 30px; }
.body2 { font-size: var(--size-body2); line-height: 28px; }
.body3 { font-size: var(--size-body3); line-height: 28px; }
.body4 { font-size: var(--size-body4); line-height: 24px; }
.body5 { font-size: var(--size-body5); line-height: 22px; }
.body6 { font-size: var(--size-body6); line-height: 20px; }
.body7 { font-size: var(--size-body7); line-height: 18px; }
.caption1 { font-size: var(--size-caption1); line-height: 16px; }
.caption2 { font-size: var(--size-caption2); line-height: 14px; }

.head2[data-multiple="1"] { line-height: 36px; }
.title2[data-multiple="1"] { line-height: 28px; }
.title3[data-multiple="1"] { line-height: 26px; }
.body3[data-multiple="1"] { line-height: 22px; }
.body4[data-multiple="1"] { line-height: 20px; }
.body5[data-multiple="1"] { line-height: 18px; }

.text.__left { text-align: left; }
.text.__center { text-align: center; }
.text.__right { text-align: right; }
.text.__bold400 { font-weight: 400;}
.text.__bold500 { font-weight: 500;}
.text.__bold600 { font-weight: 600; }
.text.__bold700 { font-weight: 700;}
.text.__bold800 { font-weight: 800; }
.text.__blue65 { color: var(--color-blue65); }
.text.__blue100 { color: var(--color-blue100); }
.text.__blue400 { color: var(--color-blue40); }
.text.__gray100 { color: var(--color-gray100); }
.text.__gray200 { color: var(--color-gray200); }
.text.__gray300 { color: var(--color-gray300); }
.text.__gray400 { color: var(--color-gray400); }
.text.__gray700 { color: var(--color-gray700); }
.text.__gray800 { color: var(--color-gray800); }
.text.__sec { color: var(--color-sec); }
.text.__err { color: var(--color-error); }
.text.__active { color: #000; /*font-size: 16px;*/ }
.text.__rate { color: var(--color-rate); }
.text.__wdwrap { word-wrap: break-word; } /* 줄바꿈 */
.text.__wdbreak { word-break: keep-all; } /* 단어별 줄바꿈 */

hr.separate { border: 0; height: 2px; background-color: #dadada; }
hr.separate1 { border: 0; height: 1px; background-color: #dadada; margin-left: -20px; margin-right: -20px;}

hr.separate.eee1 { height: 1px; background-color: #eee; }
hr.separate.eee2 { height: 2px; background-color: #eee; }

hr.separate2 { border: 0; height: 2px; background-color: #f7f7f7; margin-left: -20px; margin-right: -20px; }
hr.separate5 { border: 0; height: 5px; background-color: #f7f7f7; margin-left: -20px; margin-right: -20px; }
hr.separate10 { border: 0; height: 10px; background-color: #f7f7f7; margin-left: -20px; margin-right: -20px; }

hr.separate.__outer { margin-left: -20px; margin-right: -20px; }
hr.separate.__8h { height: 8px; }
hr.separate.__5h { height: 5px; background-color: #eee; }

.boxer { background: var(--color-disabled); padding: 17px; }

/* Layout */
#header { position: fixed; top: 0; left: 0; width: 100%; height: 55px; background-color: #fff; /*border-bottom: 1px solid #ddd;*/ z-index: 1;}
#header > h1 { font-weight: 500; font-size: 18px; line-height: 55px; color: #000; text-align: center; }
#header .navbar.__hidden { visibility: hidden; }
#header .navbar.__left,
#header .navbar.__right { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; }

#header .navbar.__left { left: 6px; }
#header .navbar.__left img { transform: rotate(180deg); }
#header .navbar.__right { right: 6px; }
#header .navbar > .icon { width: 44px; height: 44px; text-align: center; }
#header .navbar > .icon > img { width: 30px; }
#header .navbar > .text { padding: 0 14px; height: 44px; font-size: var(--size-body5); color: var(--color-gray200); white-space: nowrap; }
#header .navbar > .button { margin-right: 12px; }
#header > h1 .img-logo{position: relative; height: 44px; padding: 12px 0; }

.container { padding: 10px 20px!important; }
.container.pdb130 { padding-bottom: 130px!important; }
.container.info { padding: 10px 20px 102px!important; }
.container.__flat { padding: 0; }
.container.flex { flex-direction: column; height: calc(100vh - 56px); }
.container.flex > .header-container { flex-shrink: 1; }
.container.flex > .main-container { flex-grow: 1; }
.container.__fullpage { display: flex; flex-direction: column; justify-content: space-between; }
.container.__fullpage > .header-container { flex-shrink: 1; }
.container.__fullpage > .main-container { flex-grow: 1; }
.container > .inner { padding: 24px 20px; }
.container.__flat > .inner { padding: 0 20px; }
.container.__flat .button-container { padding-bottom: 24px; }

.button-container { position: relative; -webkit-transition: 300ms cubic-bezier(0.22, 0.61, 0.36, 1); transition: 300ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.button-container.__bottom { position: fixed; left: 0; right: 0; bottom: 0; padding: 15px 20px; /*background-image: linear-gradient(rgba(255,255,255,0), rgba(255,255,255,1) 40%);*/ transform : translate3d(0,0,0); -webkit-transform : translate3d(0,0,0); z-index: 11; background-color: #fff; }
.button-container.__hidden { transform: translateY(100px); }
.button-container.__row { display: flex; flex-direction: row; justify-content: center; }
.button-container.__row > .button:nth-child(n+2) { margin-left: 20px; }
.button-container.__column > .button:nth-child(n+2) { margin-top: 8px; }
.button-container.__grid { display: flex; flex-direction: row; justify-content: space-between; flex-wrap: wrap; }
.button-container.__grid > .button { padding: 0; width: calc(50% - 6px); }
.button-container.__grid > .button:nth-child(n+3) { margin-top: 12px; }
.button-container.__bottom.btn_next { position: sticky; padding: 16px 0 24px; }

.button { position: relative; display: block; width: 100%; min-height: 7px; font-weight: 600; text-align: center; white-space: nowrap; border-radius: 8px; color: #fff; background-color:#000;
  -webkit-transition: 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
  transition: 300ms cubic-bezier(0.22, 0.61, 0.36, 1);
}
.button:disabled { color: var(--color-gray300) !important; border:none; background-color: var(--color-gray000) !important; }
.button.__block { display: block; width: 100%; }
.button.__inline { display: inline-block; width: auto; }

.button.__large { padding: 0 20px; min-height: auto; height: 42px; line-height: 40px; font-size: var(--size-body4); }
.button.__medium { padding: 0 20px; min-height: auto; height: 40px; line-height: 38px; font-size: var(--size-body5); }
.button.__small { padding: 0 10px; min-height: auto; height: 34px; line-height: 32px; font-size: var(--size-body6); }
.button.__tiny { padding: 0 8px;  min-height: auto; height: 24px; line-height: 23px; font-size: var(--size-caption2); white-space: nowrap; }

.button.__medium.pd0 { padding: 0; }

.button.__solid { color: #fff; border: 0; background-color: var(--color-gray000); }
.button.__solid.__negative { color: var(--color-gray400); background-color: var(--color-default); }
.button.__disabled { color: var(--color-gray200); border: 0; background-color: var(--color-gray000); }
.button.__outline { color: #000; border: 1px solid#000; background-color: #fff; }
.button.__outline.__pri { border-color: var(--color-pri); }
.button.__outline.__sec { color: var(--color-pri); border-color: var(--color-blue10); }
.button.__link { padding: 0; font-weight: 400; line-height: 25px; white-space: nowrap; background-color: transparent; }

.button.kakao { color: #381E1F; background-color:#FFD93D; }

.input-group { position: relative; }
.input-group[data-prefix] > .input > [type="text"],
.input-group[data-suffix] > .input > [type="text"] { padding: 0; font-weight: 500; font-size: var(--size-body4); border: 0; }
.input-group[data-label]:after { content:attr(data-label); display: block; padding: 18px 0 8px; font-size: var(--size-body4); color: var(--color-gray800); }
.input-group.__disabled:before { content:''; position: absolute; left:0; right: 0; top: 0; bottom: 0; border-radius: 8px; background-color: rgba(0,0,0,0.1); pointer-events: none; z-index: 10; }
.input-group.__disabled [disabled] { background-color: transparent !important; }
.input-group.__disabled[data-label]:after { content: none; }
.input-group.__disabled .body1 [type="text"] { font-size: var(--size-body1); }
.input-group.__disabled > .__spy > .button { display: none; }
.input { display: flex; align-items: center; border-radius: 8px; border: 1px solid var(--color-gray000); overflow: hidden; }
.input > [type="text"], .input > [type="tel"],
.input > [type="password"], .input > [type="number"] { padding: 0 16px; width: 100%; height: 68px; caret-color: var(--color-blue100); border: 0; background-color: #fff; }
.input > [type="search"] { width: 100%; border-radius: 8px; caret-color: var(--color-blue100); text-decoration: none; }
.input > [type="password"] { font-family: 'pass', sans-serif; font-size: 16px; }
.input > [type="text"]:focus,
.input > [type="tel"]:focus,
.input > [type="password"]:focus,
.input > [type="search"]:focus,
.input > [type="number"]:focus { border-color: var(--color-active); outline: none; }
.input > [type="text"]::-webkit-placeholder,
.input > [type="text"]::placeholder,
.input > [type="tel"]::-webkit-placeholder,
.input > [type="tel"]::placeholder,
.input > [type="password"]::placeholder,
.input > [type="password"]::-webkit-placeholder,
.input > [type="search"]::placeholder,
.input > [type="search"]::-webkit-placeholder,
.input > [type="number"]::placeholder,
.input > [type="number"]::-webkit-placeholder { font-size: var(--size-body4); color: #8a8a8a; line-height: 68px; }
.input > [type="text"]:read-only,
.input > [type="password"]:read-only { border-color: var(--color-default); }
.input > [type="text"]:disabled,
.input > [type="password"]:disabled { border-color:var(--color-default); background-color: var(--color-disabled); }
.input > [data-reset="true"] + [type="reset"] { display: none; flex-shrink: 0; width: 44px; height: 44px; font-size:0; color: transparent; border: none; background:url(../images/ico_reset.svg) no-repeat center / 44px; }
.input > [type="search"]::-webkit-search-decoration { display: none; }
.input > [type="search"]::-webkit-search-cancel-button { width: 40px; height: 44px; font-size:0; color: transparent; -webkit-appearance: none; border: none; background:url(../images/ico_reset.svg) no-repeat center / 44px; }
.input > :disabled { font-size: var(--size-body4); color: var(--color-gray800); background-color: var(--color-gray000); }
.input.__active > [data-reset="true"] { padding-right: 0; }
.input.__active { border-color: var(--color-blue100); }
.input.__active > [data-reset="true"] + [type="reset"] { display: block; }
.input.__large { min-height: 70px; font-weight: 500; font-size: var(--size-body1); line-height: 68px; }
.input.__large > [type="text"] { height: 68px; }
.input.__medium { height: 55px; }
.input.__small { height: 40px; /*min-height: 44px*/ font-weight: 500; font-size: var(--size-body4); line-height: 40px/*42px*/; }
.input.__small > [type="text"] { height: 40px; }
.input.__select { display: flex; align-items: center; height: 70px; font-weight: 500; font-size: var(--size-body1); line-height: 68px; }
.input.__select > [type="button"] { margin: 0 0 0 16px; padding: 0 38px 0 0; min-height: 38px; font-weight: 700; font-size: var(--size-body4); color: var(--color-pri); line-height:18px; text-align: left; white-space: nowrap; border: 0; border-radius: 8px; background: url('../images/ico-dropdown2.svg') no-repeat right 16px center / 12px 8px; }
.input.__select > [type="text"] { font-weight: 500; font-size: var(--size-body4); border:none; background-color: transparent; }
.input.__search { display: flex; align-items: center; height: 48px; border: 0; border-radius: 24px; background-color: var(--color-blue10); overflow: hidden; }
.input.__select.__round { height: 38px; border: 1px solid var(--color-default); border-radius: 30px; }
.input.__select.__round > [type="button"] { margin: 0; padding: 10px 26px 10px 12px; min-height: 38px; font-size: var(--size-body5); font-weight: 400; color: #444; line-height:18px; white-space: nowrap; border: 0; background: url('../images/ico-dropdown3.svg') no-repeat right 12px center / 8px; }
.input.__select.__round.selected { border: 1px solid var(--color-gray700); background-color: var(--color-gray700); }
.input.__select.__round.selected > [type="button"] { color: #fff; font-weight: 500; background: var(--color-gray700) url('../images/ico-dropdown3_selected.svg') no-repeat right 12px center / 8px; }
.input.__search.__active { border: 1px solid var(--color-blue100); background-color: #fff;}
.input.__search.__square { height: 44px; border-radius: 8px; background-color: var(--color-disabled); }
.input.__search.__square.__active { border: none; background-color: var(--color-disabled); }
.input.__search > [data-modal] { margin: 0 0 0 24px; padding: 0 38px 0 0; min-height: 38px; font-weight: 700; font-size: var(--size-body4); color: var(--color-pri); line-height:18px; text-align: left; white-space: nowrap; border: 0; border-radius: 8px; background: url('../images/ico-dropdown2.svg') no-repeat right 16px center / 12px 8px; }
.input.__search > [type="text"] { padding: 0 24px; height: 100%; font-weight: 500; font-size: var(--size-body4); border:none; background-color: transparent; }
.input.__search > [type="text"]::-webkit-input-placeholder,
.input.__search > [type="text"]::placeholder { font-weight: 400; font-size: var(--size-body5); color: var(--color-blue65); }
.input.__search.__square > [type="search"] { height: 100%; color: var(--color-gray800); font-size: var(--size-body5); border:none; background-color: transparent; }
.input.__search.__square > [type="search"]::-webkit-input-placeholder,
.input.__search.__square > [type="search"]::placeholder { color: var(--color-gray100); font-size: var(--size-body5); }
.input.__search > [data-modal] + [type="text"] { padding: 0; }
.input.__search > [type="text"] + [type="reset"] { display: none; position: static; }
.input.__search.__active > [type="text"] + [type="reset"] { display: block; }
.input.__search .button.__control { flex-shrink: 0; margin: 0; padding: 0; background: none; }
.input.__search.__active { border-color: var(--color-active); }
.input.__select.__line > [type="button"] { margin: 0; }
.input.__search.__coupang { border: #ce2216 1px solid; background-color: #fff; }
.input.__search.__coupang [type="text"] { caret-color: var(--color-gray700); }
.input.__search.__coupang [type="text"]::-webkit-input-placeholder,
.input.__search.__coupang [type="text"]::placeholder { color: var(--color-gray300); }
.input.__identity { display: flex; align-items: center; height: 70px; font-weight: 500; font-size: var(--size-body1); line-height: 68px; border: 1px solid var(--color-default); border-radius: 8px; background-color: #fff; }
.input.__identity > [type="text"],
.input.__identity > [type="password"] { font-weight: 500; font-size: var(--size-body1); border:none; background-color: transparent; }
.input.__identity > *:nth-child(1) { flex-grow: 1; }
.input.__identity > *:nth-child(2) { flex-shrink: 1; padding: 0; width: 46px; text-align: center; }
.input.__identity > *:nth-child(3) { flex-shrink: 1; padding: 0; width: 46px; text-align: right; }
.input.__identity > *:nth-child(4) { flex-grow: 1; padding: 0 16px 0 0; }
.input.__spy > .button { margin-right: 16px; padding: 0 16px; width: auto; min-height: auto; white-space: nowrap; }
.input.__spy > .button:disabled { font-size: 14px; }
.input.__spy[data-counter]:after { position: absolute; right: 100px; top:calc(35px / 2); ; height: 28px; font-weight: 400; font-size: var(--size-body5); line-height: 34px; color:#222; z-index:5; }
.error { border-color: var(--color-error) !important; }
.error-suffix { display: block; padding: 8px 0 8px 20px; font-size: var(--size-body5); color: var(--color-error); line-height: 22px; background: url('../images/ico-16-error.png') no-repeat left top 10px / 16px; }
.input.__line { display: flex; align-items: center; padding: 0; min-height: auto; height: 48px; border: 0; border-radius: 0; border-bottom: 1px solid #eee; background-color: transparent; }
.input.__line.__active { border-color: var(--color-blue100); }
.input.__line > [type="text"],
.input.__line > textarea { padding: 0; width: 100%; height: 48px; font-weight: 500; font-size: var(--size-body3); border: 0; resize: none; background-color: transparent; }
.input.__line > label { flex-shrink: 0; width: 30%; font-weight: 700; font-size: var(--size-body5); color: var(--color-gray400); line-height: 22px; }
.input.__line > input:disabled,
.input.__line > textarea:disabled { flex-grow: 1; padding: 0; font-weight: 400; font-size: var(--size-body5); border: 0; background-color: transparent; }
.input.__arrow { padding: 0; background-color: transparent; font-weight: 400; line-height: 26px; }
.input.__arrow:after {display: inline-block; position: absolute; width: 13px; height: 16px; right: 17px; content: ''; vertical-align: top;  background: url(../images/ico-arrow-6.png) no-repeat right; background-size: contain; }
.input.__arrow.__triangle:after {display: inline-block; position: absolute; width: 10px; height: 6px; right: 0; content: ''; vertical-align: top;  background: url(../images/ico-17-drop-down.png) no-repeat right; background-size: contain; }
.input.__error { border-color: var(--color-error) !important; }
.input.__switch { position: relative; display: inline-block; padding: 3px;  }
.input.__switch > [type="checkbox"] { width: 50px; height: 30px; border-radius: 15px; background-color: #ddd; background-image: none; z-index: 0; transition: 200ms cubic-bezier(0.22, 0.61, 0.36, 1); }
.input.__switch > span { position: absolute; top: 6px; left: 6px; display: inline-block; width: 24px; height: 24px; font-size: 9px; line-height: 24px; text-align: center; border-radius: 12px; background-color: #fff; z-index: 2; animation: switchOff 300ms cubic-bezier(0.22, 0.61, 0.36, 1) 1 forwards; }
.input.__switch > span::after { content: 'OFF'; white-space: nowrap; }
.input.__switch > [type="checkbox"]:checked { background-color: var(--color-active); background-image: none; }
.input.__switch > :checked + span { color: var(--color-blue100); animation: switchOn 300ms cubic-bezier(0.22, 0.61, 0.36, 1) 1 forwards; }
.input.__switch > :checked + span::after { content: 'ON'; }
.input.__date > [type="month"],
.input.__date > [type="date"] { flex-grow:1; padding: 0 16px; width: 100%; height: 68px; caret-color: var(--color-blue100); border: 0; background-color: #fff; -webkit-appearance: none; appearance: none;}
.input.__date > [type="month"]::before,
.input.__date > [type="date"]::before { content: attr(data-label); width: 100%; font-size: var(--size-body4); color: var(--color-gray200); white-space: nowrap; }
.input.__date > .__active::before { font-size: var(--size-body1); color: var(--color-gray700); }
.input.__date > .__active::-webkit-date-and-time-value { color: transparent; }
.input.__button input[type="radio"],
.input.__button input[type="checkbox"],
.input.__button input[type="radio"]:checked,
.input.__button input[type="checkbox"]:checked { position: absolute; left: calc(50% / 2); border: 0; box-shadow: none; z-index: -1; }
.input.__button input[type="radio"] + *,
.input.__button input[type="checkbox"] + * { display: block; margin: 0; font-weight: 500; font-size: var(--size-body4); line-height: 52px; text-align: center; border: 1px solid var(--color-default); border-radius: 8px; transition: ease-in 100ms; }
.input.__button input[type="radio"]:checked + *,
.input.__button input[type="checkbox"]:checked + * { color: var(--color-blue100); border-color: var(--color-blue100); }
.input.__inline { display: inline-block; }
*.input.__hidden { display: none; }

[data-prefix]::before,
[data-suffix]::after { flex-shrink: 0; display: block; font-weight: 700; font-size: var(--size-body4); white-space: nowrap; }
[data-prefix]::before { content: attr(data-prefix); padding: 0 8px 0 16px; }
[data-suffix]::after {content: attr(data-suffix); padding: 0 16px 0 0; }
.body1[data-prefix]::before,
.body1[data-suffix]::after { font-weight: 500; font-size: var(--size-body1); }
[data-prefix] > [type="text"] { padding: 0 16px 0 0; }
[data-suffix] > [type="text"] { padding: 0 0 0 16px; }
[data-prefix] > [type="text"]::-webkit-input-placeholder,
[data-prefix] > [type="text"]::placeholder { line-height: 68px; }
[data-error] .input,
[data-error] .input.__line { border-color: var(--color-error); }
[data-error] .input > [type="text"],
[data-error] .input.__line > [type="text"],
[data-error] .input.__active,
[data-error] .input.__active > [type="text"],
[data-error] .input > [type="password"],
[data-error] .input.__line > [type="password"] { color: var(--color-error); border-color: var(--color-error); }
[data-error] .input.__select > [type="button"] { color: var(--color-error); }
[data-error]:after { content: attr(data-error); display: block; padding: 8px 0 8px 20px; font-size: var(--size-body5); color: var(--color-error); line-height: 22px; background: url('../images/ico-16-error.png') no-repeat left top 10px / 16px; }
[data-notify]:after { content: attr(data-notify); display: block; padding: 8px 0; font-size: var(--size-body5); line-height: 22px; }
[data-counter]:after { content: attr(data-counter); }

.suffix-message { display: block; padding: 8px 0 8px 20px; font-size: var(--size-body5); line-height: 22px; }
.suffix-message.__error { color: var(--color-error); background: url('../images/ico-16-error.png') no-repeat left top 10px / 16px; }
.suffix-message.__notify { padding-left: 0; color: var(--color-gray300); background: none; }
label.input { display: block; border: 0; border-radius: 0; }
label.input.flex,
label.input.__flex { display: flex; align-items: center; }
label.input .el { margin-top: -2px; width: 28px; height: 28px; }
label.input.__flex > .grow { flex-grow: 1; }
label.input > [type="checkbox"] { flex-shrink: 0; margin-top: 3px;  margin-right: 5px; width: 16px; height: 16px;  line-height: 20px; border: none; appearance: none; background: url('../images/ico_checkbox.svg') no-repeat 0 0 / 16px; -webkit-transition:200ms cubic-bezier(0.22, 0.61, 0.36, 1); transition:200ms cubic-bezier(0.22, 0.61, 0.36, 1); }
label.input > [type="checkbox"].cb_top { margin-top: 5px; }
label.input > [type="checkbox"] + * { line-height: 26px; color:#000; }
label.input > [type="checkbox"]:checked { background-image: url('../images/ico_checkbox_active.svg'); }
label.input > [type="checkbox"]:checked ~ * { color: var(--color-gray800); }
label.input.__none { display: flex; align-items: flex-start; border: 0; white-space: nowrap; }

label.input.__none > [type="checkbox"] { margin-top: 8px; flex-shrink: 0; background: url('../images/ico_check.svg') no-repeat 0 0 / 14px; -webkit-transition:200ms cubic-bezier(0.22, 0.61, 0.36, 1); transition:200ms cubic-bezier(0.22, 0.61, 0.36, 1); }
label.input.__none > [type="checkbox"]:checked { background-image: url('../images/ico_check_1007.png'); }
label.input > [type="radio"] { width: 26px; height: 26px; box-shadow: 0 0 0 1px inset #ccc; border-radius: 13px; background-color: #fff; appearance: none; -webkit-appearance: none; -webkit-transition:200ms cubic-bezier(0.22, 0.61, 0.36, 1); transition:200ms cubic-bezier(0.22, 0.61, 0.36, 1); }
label.input > [type="radio"]:checked { box-shadow: 0 0 0px 8px inset #333; }
label.input > [type="radio"] + * { margin-left: 8px; line-height: 26px; color: var(--color-gray400); }
label.input > [type="radio"]:checked ~ * { color: var(--color-gray800); }
label.input > .suffix { width: 24px; height: 24px; }
label.input + ul [type="checkbox"] { width: 26px; height: 26px; border: none; appearance: none; background: url('../images/ico_check.svg') no-repeat 0 0 / 26px; -webkit-transition:200ms cubic-bezier(0.22, 0.61, 0.36, 1); transition:200ms cubic-bezier(0.22, 0.61, 0.36, 1); }
label.input + ul li [type="checkbox"]:checked { background-image: url('../images/ico_check_active.svg'); }

.select { padding: 0 36px 0 12px; width: 100%; height: 44px; border: 1px solid #eee; border-radius: 8px; background:url('../images/ico-17-drop-down.png') no-repeat right 12px center / 12px auto; appearance: none; -webkit-appearance: none; -moz-appearance: none;  color: var(--color-gray200); }

.select.__inline { width: auto; }
.select.__line { padding: 0 24px 0 0; border-radius: 0; border: 0; border-bottom: 1px solid #eee; background-position: right center; }

.tabs { display: flex; justify-content: flex-start; }
.tabs.__full { justify-content: space-between; }
.tabs.__full > .el { flex-grow: 1; }
.tabs.__full > .button { padding: 13px 0 10px; font-weight: 400; font-size: 16px; color: var(--color-gray200); border-bottom: 1px solid #eee; border-radius: 0; background-color: transparent; }
.tabs.__full > .button:nth-child(n+2) { margin: 0; }
.tabs.__full > .button.__active { font-weight: 500; color: var(--color-blue100); border-bottom-width: 3px; border-color: var(--color-blue100); background-color: transparent; }
.tabs.__full.__outdent { margin: -13px -20px 0; }
.tabs.__list{display: flex; overflow-y: auto;white-space: nowrap; }
.tabs.__list.__x2 { flex-wrap: wrap; justify-content: flex-start; }
.tabs.__list.__x2 > .button { width: calc(50% - 6px); }
.tabs.__list > .el:nth-child(n+2){margin-left: 12px;}
.tabs > .el { width: auto; font-weight: 400; color: var(--color-gray200); background-color: #f7f7f7; }
.tabs > .el:nth-child(n+2) { margin-left: 8px; }
.tabs > .el.__active { font-weight: 500; color: #fff; background-color: var(--color-blue100); }
.tabs.__black > .button.__active { color: var(--color-gray800); border-color: var(--color-gray800); }
.tabs.__linear { position: relative; }
.tabs.__linear .area-tab { position: relative; width: 100%; height: 38px; margin: 0; padding: 4px 20px 0; border-bottom: 1px solid #eee; }
.tabs.__linear .area-tab.__space .btn-tab { position: relative; width: auto; padding: 0 8px; }
.tabs.__linear .area-tab.__space .btn-tab.__active { color: var(--color-gray800); font-weight: 500; }
.tabs.__linear .area-tab.__space .btn-tab.__active:before { content: ''; display: block; position: absolute; bottom: 0;left: 0; width: 100%; border-bottom: 3px solid var(--color-gray800); }
.tabs-content { display: none; }
.tabs-content.__active { display: block; }

/* Components */
.toast { display: none; position: fixed; left: 0; right: 0; font-size: var(--size-body5); text-align: center; z-index: 99;
    -webkit-transition: 300ms ease-in-out; transition: 300ms ease-in-out;
  }
  .toast.__top { top: 0; margin: 10px 20px; padding: 16px; color: #fff; border-radius: 8px; background-color: rgba(0,0,0, 0.8); transform: translateY(-20px); }
  .toast.__top:before { content: ''; display: inline-block; margin-right: 8px; width: 20px; height: 20px; vertical-align: top; background: url(../images/ico-20-check-active.svg) no-repeat 0 0 / 20px auto; }
  .toast.__bottom { bottom: 10px; }
  .toast.__bottom > span { display: inline-block; padding: 8px 36px; font-size: var(--size-body4); color: var(--color-blue100); border-radius: 50px; background-color: var(--color-blue10); }

/* 체크, 전체 체크 */
/*
.total-agreement > .button, .confirm-check > .button { display: flex; justify-content: space-between; align-items: center; color: var(--color-gray100); border-color: var(--color-gray200); }
.total-agreement > .button:after, .confirm-check > .button:after { content:''; display: inline-block; width: 25px; height: 25px; vertical-align: top; background:url(../images/ico_check.svg) no-repeat 0 0 / 25px; }
.total-agreement > .button.__active, .confirm-check > .button.__active { color: var(--color-blue100); border-color: var(--color-blue100); }
.total-agreement > .button.__active:after, .confirm-check > .button.__active:after { background-image:url(../images/ico_check_active.svg); }
*/



/* Layer Popup */
.modal { position: fixed; left: 0; right: 0; bottom: 0; border-top-left-radius: 28px; border-top-right-radius: 28px; background-color: #ffffff; outline: transparent; z-index: 100; overscroll-behavior: contain;
  -webkit-transition: 400ms cubic-bezier(0.22, 1, 0.36, 1); -webkit-transform: translateY(100vh);
  transition: 400ms cubic-bezier(0.22, 1, 0.36, 1); transform: translateY(100vh);
}
.modal-header { padding: 28px 10%; font-weight: 700; color: var(--color-gray800); /*text-align: center;*/ border-bottom: 1px solid #eeeeee; user-select: none; }
.modal-header.__noline { border-bottom: 0; }
/*
.modal-close { position: absolute; top: 28px; right: 20px; width: 28px; height: 28px; font-size: 0; color: transparent; background: url(../images/btn_close.svg) no-repeat center center / 24px; }
*/
.modal-content { overflow-y: auto;}
.modal-content > .inner { padding: 28px 20px 20px 20px; }
.modal-content > .inner.__x { padding: 0 20px 20px; }
.modal-content > .inner.__y { padding: 0 0 20px; }
.modal-center { position: fixed; top: 0; bottom: 0; left: 0; right: 0; display: flex; outline: transparent; z-index: 10000; overscroll-behavior: contain; align-items: center; justify-content: center; pointer-events:none; transform: scale(0.9); opacity: 0;
  -webkit-transition: 400ms cubic-bezier(0, 0.55, 0.45, 1);
  transition: 400ms cubic-bezier(0, 0.55, 0.45, 1);
}
.modal-center > .inner { position: relative; width: calc(100% - 40px); padding: 24px 20px; border-radius: 15px; background-color: #ffffff; pointer-events: auto; }

.modal-center .modal-close { display: none; top: 16px; right: 16px; }

.dimmed { position: fixed; left: 0; right: 0; top: 0; bottom: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.6); z-index: 9999; opacity: 0; overflow: hidden; overscroll-behavior: none;		 
  -webkit-transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);		 
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.dimmed #header { background-color: transparent; }
  
@-webkit-keyframes fadeIn{ 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes fadeIn{ 0% { opacity: 0; } 100% { opacity: 1; } }