@charset "utf-8";
@import "reset.css";
@import "/moSt/v2/css/font.css";
@import "icon.css";
@import "rwd.css";

html { font-size: 6.25%; }
html.safari { font-size:1px; -webkit-text-size-adjust:none; }
html.safari [lang="en"] { letter-spacing: -0.025em; }

/* **************************************** *
 * GLOBAL
 * **************************************** */
body.overflow { overflow: hidden; overscroll-behavior: revert; }
body {overflow-x: hidden;font-size: 16px;color: var(--color-primary, #101010);}
form { width: 100%; }

.bg_primary    { background-color:#0740E4; }
.bg_secondary  { background-color:#FF673E; }
.bg_ff         { background-color:#ffffff; }
.bg_10         { background-color:#101010; }
.bg_a7         { background-color:#A7A7A7; }
.bg_55         { background-color:#555555; }
.bg_c2         { background-color:#C2C2C2; }
.bg_93         { background-color:#939393; }
.bg_d9         { background-color:#d9d9d9; }
.bg_ed         { background-color:#ededed; }
.bg_3c         { background-color:#3c3c3c; }
.bg_70         { background-color:#707070; }
.bg_f8         { background-color:#f8f8f8; }

/* **************************************** *
 * TYPOGRAPHY
 * **************************************** */
.hex_primary    { color:#0740E4; }
.hex_secondary  { color:#FF673E; }
.hex_ff         { color:#ffffff; }
.hex_10         { color:#101010; }
.hex_a7         { color:#A7A7A7; }
.hex_55         { color:#555555; }
.hex_c2         { color:#C2C2C2; }
.hex_93         { color:#939393; }
.hex_d9         { color:#d9d9d9; }
.hex_ed         { color:#ededed; }
.hex_3c         { color:#3c3c3c; }
.hex_70         { color:#707070; }

.weight_700     { font-weight: 700; }

/* class 통합 추가해야함 */
.heading1_32B, .heading1_32M, .heading2_28B, .heading2_28M, .title_24B, .title_24M, .subtitle_20B, .subtitle_20M, .subtitle_20R, .body1_18B, .body1_18M, .body1_18R, .body2_16SB, .body2_16M, .body2_16R, .body3_14SB, .body3_14M, .body3_14R, .caption1_12SB, .caption1_12M, .caption1_12R, .caption2_10M, .caption2_10R {
    overflow-wrap: break-word;
    word-wrap: break-word;
    -ms-word-break: break-all;
    word-break: break-all;
    word-break: break-word;
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}
.heading1_32B   { font-size: 32px; line-height: 48px; font-weight: 700; }
.heading1_32M   { font-size: 32px; line-height: 48px; font-weight: 500; }
.heading2_28B   { font-size: 28px; line-height: 42px; font-weight: 700; }
.heading2_28M   { font-size: 28px; line-height: 42px; font-weight: 500; }
.title_24B      { font-size: 24px; line-height: 36px; font-weight: 700; }
.title_24M      { font-size: 24px; line-height: 36px; font-weight: 500; }
.subtitle_20B   { font-size: 20px; line-height: 30px; font-weight: 700; }
.subtitle_20M   { font-size: 20px; line-height: 30px; font-weight: 500; }
.subtitle_20R   { font-size: 20px; line-height: 30px; font-weight: 400; }
.body1_18B      { font-size: 18px; line-height: 26px; font-weight: 700; }
.body1_18M      { font-size: 18px; line-height: 26px; font-weight: 500; }
.body1_18R      { font-size: 18px; line-height: 26px; font-weight: 400; }
.body2_16SB     { font-size: 16px; line-height: 24px; font-weight: 600; }
.body2_16M      { font-size: 16px; line-height: 24px; font-weight: 500; }
.body2_16R      { font-size: 16px; line-height: 24px; font-weight: 400; }
.body3_14SB     { font-size: 14px; line-height: 22px; font-weight: 600; }
.body3_14M      { font-size: 14px; line-height: 22px; font-weight: 500; }
.body3_14R      { font-size: 14px; line-height: 22px; font-weight: 400; }
.caption1_12SB  { font-size: 12px; line-height: 18px; font-weight: 600; }
.caption1_12M   { font-size: 12px; line-height: 18px; font-weight: 500; }
.caption1_12R   { font-size: 12px; line-height: 18px; font-weight: 400; }
.caption2_10M   { font-size: 10px; line-height: 12px; font-weight: 500; }
.caption2_10R   { font-size: 10px; line-height: 12px; font-weight: 400; }


/* **************************************** *
 * BUTTON
 * **************************************** */
.button { display: inline-block; display: flex; align-items: center; justify-content: center; padding:0 16px; border-radius: 5px; gap: 4px; }
.button span { line-height: inherit; }

/* theme */
.button.hex_primary { color: #fff; background-color: #0740E4; }
.button.line.hex_primary { color: #0740E4; border:1px solid #E5EBFC; background-color: #FAFBFF; }
.button.line.hex_ed { color: #707070; border:1px solid #EDEDED; background-color: #ffffff; }

/* height */
.button.xsmall { height:38px; line-height: 38px; }
.button.small { height:46px; line-height: 46px; }
.button.large { height:56px; line-height: 56px; }

/* width */
.button.full { width:100%; }

/* state */
.button:disabled:not(.nogray),
.button.disabled:not(.nogray) { background-color: #ededed !important; color:#fff !important; border: 0 !important; }
.button:disabled .i_button,
.button.disabled .i_button { display: none !important; }


/* **************************************** *
 * A11Y
 * **************************************** */
.sr_only { position: absolute; clip: rect(1px, 1px, 1px, 1px); -webkit-clip-path: inset(0px 0px 99.9% 99.9%); clip-path: inset(0px 0px 99.9% 99.9%); overflow: hidden; height: 1px; width: 1px; padding: 0; border: 0; }
#skip a { width: 1px; height: 1px; position: absolute; left: -10000px; top: auto; overflow: hidden; }
#skip a:focus { display: block; width: 100%; height: 40px; position: fixed; top: 0; left: 0; line-height: 40px; text-align: center; color: #fff; background: #444; z-index: 999; }


/* **************************************** *
 * board
 * **************************************** */
.ellip  { display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 1; -webkit-box-orient: vertical; white-space: normal !important; word-wrap: break-word; word-break: break-word; }
.ellip2 { display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal !important; word-wrap: break-word; word-break: break-word; }
.ellip3 { display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal !important; word-wrap: break-word; word-break: break-word; }
.ellip4 { display: -webkit-box !important; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 4; -webkit-box-orient: vertical; white-space: normal !important; word-wrap: break-word; word-break: break-word; }