@charset "utf-8";
a,
abbr,
acronym,
address,
applet,
article,
aside,
audio,
b,
big,
blockquote,
body,
canvas,
caption,
center,
cite,
code,
dd,
del,
details,
dfn,
div,
dl,
dt,
em,
embed,
fieldset,
figcaption,
figure,
footer,
form,
h1,
h2,
h3,
h4,
h5,
h6,
header,
hgroup,
html,
i,
iframe,
img,
ins,
kbd,
label,
legend,
li,
main,
mark,
menu,
nav,
object,
ol,
output,
p,
pre,
q,
ruby,
s,
samp,
section,
small,
span,
strike,
strong,
sub,
summary,
sup,
table,
tbody,
td,
tfoot,
th,
thead,
time,
tr,
tt,
u,
ul,
var,
video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    vertical-align: baseline;
}

a {
    text-decoration: none;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section {
    display: block
}

[hidden] {
    display: none
}

body {
    line-height: 1;
}

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

blockquote,
q {
    quotes: none
}

blockquote:after,
blockquote:before,
q:after,
q:before {
    content: '';
    content: none
}

table {
    table-layout: fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0
}
* { box-sizing: border-box; margin: 0; padding: 0; line-height: 130%; font-family: "Pretendard", sans-serif;}
html,
body {
    font-size: 20px;
    width: 100%;
    min-width: 320px;
    height: 100%;
    font-family: "Pretendard", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-weight: 500;
    line-height: 130%;
    color: #111;
}

:root {
    /*color*/
    --blue: #007bff;
    --red: #dc3545;
    --white: #fff;
    --black: #000000;
    --gray5: #F9f9f9;
    --gray10: #F4F5F6;
    --gray20: #eeeeee;
    --gray30: #d7dadb;
    --gray40: #cccccc;
    --gray50: #bcbcbc;
    --gray60: #878787;
    --gray70: #666666;
    --gray80: #333333;
    --gray90: #1D1D1D;
    --primary: #2b74bd;
    --primary5: #1D66AF;
    --primary10: #C0CDEF;
    --primary20: #007bff;
    --primary30: #007bff;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: bold;
}

[class^=bg-].disabled {
    opacity: .65;
}

[class^=hover_] {
    transition: all .3s ease
}

[class^=hover_]:hover,
[class^=hover_].active {
    /*background-color: var(--primary10);*/
    /*color: var(--primary)*/
}

a {
    color: var(--black)
}

[class^=hover_]:hover {
    text-decoration: underline;
    text-underline-position: under;
}

button {
    background-color: transparent;
    border: 1px solid transparent;
}

img {
    display: inline-block
}
::placeholder { font-size: 0.72rem; color: var(--gray50); font-weight: 500}
input,
select,
textarea {
    border: 1px solid var(--gray40);
    border-radius: 0.4rem;
    font-size: 0.8rem;
    padding: 0 0.8rem;
    color: var(--gray80);
    height: 2.4rem;
}
select {
    padding-right: 1.6rem;
    background: var(--white);
    appearance: none; /* 브라우저 기본 화살표 제거 */
    -webkit-appearance: none;
    -moz-appearance: none;
    display: inline-block;
}
:focus { outline: 2px dashed #256ef4; outline-offset: 2px; transition: none}
.select_box_wrap{ display: inline-flex; align-items: center}
.select_box { position: relative; display: inline-block; max-width: 100%;}
.select_box:after { content: ""; width: 0.56rem; height: 0.28rem; background-color: var(--gray70); mask-repeat: no-repeat; mask-position: center center; mask-size: contain; mask-image: url(../img/icon/ic_angle_02.svg); position: absolute; right: 0.8rem; top: 50%; transform: translateY(-50%); pointer-events: none}

.select_box.sz_md select { height: 1.8rem; border-color: var(--gray40); font-size: 0.64rem; font-weight: 500; padding-right: 1.2rem; color: var(--gray60); border-radius: 0.32rem}
.select_box.sz_md:after { width: 0.44rem; height: 0.2rem; background-color: var(--gray60); right: 0.56rem}

.form_check_wrap{ display: flex; flex-wrap: wrap; gap: 0.5rem 1rem}

.form_check {display: inline-flex;align-items: flex-start}
.form_check input[type=checkbox] { position: absolute !important; width: 1px !important; height: 1px !important;padding: 0 !important;margin: -1px !important;overflow: hidden !important;clip-path: inset(50%) !important;white-space: nowrap !important;border: 0 !important}
.form_check label { display: flex; gap: 0.2rem; position: relative}
.form_check label:after { background: #fff; mask-image: url("../img/icon/ic_check.svg"); mask-repeat: no-repeat; mask-size: 60% auto; mask-position: center; position: absolute; left: 0; top: 0; display: none}
.form_check label:after,
.form_check label:before { flex-shrink: 0}

.form_check.ty_01 label{ gap: 0.5rem; font-size: 0.8rem; font-weight: 400; align-items: center; line-height: 100%;}
.form_check.ty_01 label:before,
.form_check.ty_01 label:after { content: ""; width: 0.8rem; height: 0.8rem; border-radius: 0.16rem; border: solid 1px transparent}
.form_check.ty_01 label:before { border: solid 1px var(--gray40); background: var(--white)}
.form_check.ty_01 input[type=checkbox]:checked + label:before { background: var(--gray70); border-color: transparent}
.form_check.ty_01 input[type=checkbox]:checked + label:after { display: block}

.form_radio_wrap{ display: flex; flex-wrap: wrap; align-items: center}
.form_radio_wrap.ty_01{ gap: 2rem}

.form_radio {display: inline-flex;align-items: center; flex-shrink: 0}
.form_radio.full { width: 100%; flex-shrink: 1}
.form_radio.full label{ flex-shrink: 0}
.form_radio.full input[type='text']{ width: 100%; flex-shrink: 1}
.form_radio input[type=radio] { position: absolute !important; width: 1px !important; height: 1px !important;padding: 0 !important;margin: -1px !important;overflow: hidden !important;clip-path: inset(50%) !important;white-space: nowrap !important;border: 0 !important}
.form_radio label { display: flex; gap: 0.25rem; position: relative}
.form_radio label:after { position: absolute; left: 0; top: 0; display: none}
.form_radio label:after,
.form_radio label:before { flex-shrink: 0}
.form_radio input[type='text'] { margin-left: 1rem}

.form_radio.ty_01 label{ font-size: 0.7rem; font-weight: 600; color: var(--gray80);}
.form_radio.ty_01 label:before,
.form_radio.ty_01 label:after { content: ""; border-radius: 50%; border: solid 1px transparent;}
.form_radio.ty_01 label:before { width: 0.9rem; height: 0.9rem; border: solid 1px var(--gray40); background: var(--white)}
.form_radio.ty_01 label:after { width: 0.5rem; height: 0.5rem; background: #5d5d5d; left: 0.2rem; top: 0.2rem}
.form_radio.ty_01 input[type=radio]:checked + label:before { border-color: #5d5d5d}
.form_radio.ty_01 input[type=radio]:checked + label:after { display: block}


@media (prefers-reduced-motion: reduce) {
    .form_check * {transition: none !important}
}

button { cursor: pointer; display: inline-block}
select[disabled="disabled"],
input[readonly="readonly"],
input[readonly],
input[disabled="disabled"],
input[disabled],
select[readonly],
textarea[readonly] {
    background-color: #F6F7FA !important;
    color: #667183 !important;
}

@media (max-width: 768px) {

    html, body {
        font-size: 0.9rem;
    }
}