@charset "UTF-8"; /* font */

/* reset */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, fieldset, legend, textarea, p, blockquote, th, td, input, select, button {
    margin: 0;
    padding: 0;
}

fieldset, img {
    border: 0 none;
}

dl, ul, ol, menu, li {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

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

input, select, textarea, button {
    vertical-align: middle;
}

button {
    border: 0 none;
    background-color: transparent;
    cursor: pointer;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
    table-layout: fixed;
}

body {
    -webkit-text-size-adjust: none;
}

/* 뷰포트 변환시 폰트크기 자동확대 방지. */
input:checked[type='checkbox'] {
    background-color: transparent;
    -webkit-appearance: checkbox;
}

input:disabled, textarea:disabled {
    opacity: 1;
}

input[type='text'], input[type='password'], input[type='submit'], input[type='search'], input[type='tel'], input[type='email'], html input[type='button'], input[type='reset'] {
    -webkit-appearance: none;
    border-radius: 0;
    caret-color: var(--color-yellow);
}

input[type='search']::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

body {
    background: #fff;
}

body, th, td, input, select, textarea, button {
    font-size: 14px;
    line-height: 1.5;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Roboto', 'NotoSans', 'Malgun Gothic', '맑은 고딕', sans-serif;
    color: #191919;
    letter-spacing: -0.5px;
}

a {
    color: #333;
    text-decoration: none;
}

address, caption, cite, code, dfn, em, var {
    font-style: normal;
    font-weight: normal;
}

input, textarea, button, select, a {
    -webkit-tap-highlight-color: transparent;
}

:focus {
    outline-width: 0;
    outline-style: solid;
}

:focus-visible {
    outline-width: 1px;
    outline-style: solid;
}

/* icon */
.icon {
    overflow: hidden;
    display: inline-block;
    margin: 0;
    padding: 0;
    border: 0;
    color: transparent;
    background-color: transparent;
    background-image: url(../images/icon_bridge.png);
    background-repeat: no-repeat;
    background-size: 110px 150px;
    vertical-align: top;
    text-indent: 100%;
    white-space: nowrap;
    outline: 0 none;
}

.icon_close {
    width: 24px;
    height: 24px;
    background-position: 0 0;
}

.icon_refresh {
    width: 38px;
    height: 38px;
    background-position: -30px 0;
}

.icon_system1 {
    width: 105px;
    height: 105px;
    background-position: 0 -40px;
}

/* global */
.screen_out {
    overflow: hidden;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    font-size: 1px;
    line-height: 0;
    color: transparent;
}

/* 대체텍스트가 아닌 접근성을 위한 숨김텍스트를 제공할때 */
/* common */
.txt_roboto {
    font-family: "Roboto", system-ui, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "NotoSans", "Malgun Gothic", "맑은 고딕", sans-serif;
}

.img_g {
    display: block;
    width: 100%;
    height: auto;
}

/* variables - color */
:root {
    --color-wh: #FFF;
    --color-bk: #191919;
    --color-bk2: #222;
    --color-bk4c: #4C4C4C;
    --color-bk6: #666;
    --color-bk7f: #7F7F7F;
    --color-bk8e: #8e8e8e;
    --color-bk9: #999;
    --color-bkb2: #B2B2B2;
    --color-bkc: #CCC;
    --color-bkdb: #DBDBDB;
    --color-bke6: #E6E6E6;
    --color-bkf0: #F0F0F0;
    --color-bkf5: #F5F5F5;
    --color-bkfa: #FAFAFA;
    --color-bk69: #696969;
    --color-blue: #2C88DE;
    --color-blue2: #F0F8FF;
    --color-red: #E65F3E;
    --color-red2: #DC5B3B;
    --color-yellow: #FEE500;
    --color-yellow2: #F4DC00;
    --color-a2: rgba(0, 0, 0, .02);
    --color-a4: rgba(0, 0, 0, .04);
    --color-a6: rgba(0, 0, 0, .06);
    --color-a8: rgba(0, 0, 0, .08);
    --color-a10: rgba(0, 0, 0, .10);
    --color-a12: rgba(0, 0, 0, .12);
    --color-a14: rgba(0, 0, 0, .14);
    --color-a20: rgba(0, 0, 0, .20);
    --color-a40: rgba(0, 0, 0, .40);
    --color-a50: rgba(0, 0, 0, .50);
    --color-a50-wh: rgba(255, 255, 255, .50);
    --color-a80-wh: rgba(255, 255, 255, .80);
    --color-a85-bk7f: rgba(127, 127, 127, .85);
    --color-blue-a5: rgba(44, 136, 222, .05);
    --color-blue-a10: rgba(44, 136, 222, .1);
    --color-blue-a15: rgba(44, 136, 222, .15);
}

/* layout */
html, body {
    width: 100%;
    height: 100%;
}

.container-doc {
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    height: 100%;
    padding-bottom: 0;
    padding-bottom: calc(constant(safe-area-inset-bottom));
    padding-bottom: calc(env(safe-area-inset-bottom));
    box-sizing: border-box;
}

.doc-main {
    flex: 1;
    padding-top: 44px;
    box-sizing: border-box;
}

.content-article {
    position: relative;
    height: 100%;
    box-sizing: border-box;
}

/* header */
.doc-header {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    height: 44px;
    padding: 0 12px;
    background-color: var(--color-wh);
    box-sizing: border-box;
}

.doc-header .tit_header {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    order: 1;
    font-weight: 700;
    font-size: 17px;
    line-height: 20px;
}

.doc-header .btn_header {
    position: relative;
    z-index: 1;
    width: 32px;
    height: 32px;
    padding: 4px;
}

.doc-header .btn_close {
    order: 2;
    margin-left: auto;
}

/* bridge */
.container-bridge .doc-main {
    padding-top: 0;
}

.wrap_system {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position: fixed;
    left: 40px;
    top: 0;
    right: 40px;
    bottom: 0;
    z-index: 99;
    text-align: center;
}

.wrap_system .tit_system {
    font-weight: 500;
    font-size: 16px;
    line-height: 23px; /* 2024-09-04 수정 */
}

.wrap_system .tit_system + .desc_system {
    margin-top: 6px;
    font-size: 14px;
    line-height: 20px;
    color: var(--color-bk7f); /* 2024-09-04 수정 */
}

.wrap_system .desc_system {
    font-size: 14px;
    line-height: 20px;
    color: #595959; /* 2024-09-04 수정 */ /* 2024-11-04 수정 */
}

.wrap_system .desc_system + .icon {
    margin-top: 12px;
}

.wrap_system .desc_system + .group_btn {
    margin-top: 20px; /* 2024-09-04 수정 */
}

.wrap_system .icon + .tit_system {
    margin-top: 12px;
}

.wrap_system .icon_qr {
    width: 160px;
    height: 160px;
    margin-bottom: 50px;
    padding: 14px;
    border: 6px solid var(--color-yellow);
    border-radius: 6px;
}

.wrap_system .group_btn { /* 2024-09-04 제거 */
}

.wrap_system.type_pc .tit_system {
    font-size: 18px;
    line-height: 26px;
}

.wrap_system.type_pc .tit_system + .desc_system {
    margin-top: 14px;
    font-size: 14px;
    line-height: 24px;
    color: var(--color-bk6);
}

/* button */
.group_btn {
    display: flex;
}

.group_btn .btn {
    flex: 1;
}

.group_btn .btn + .btn {
    margin-left: 8px;
}

.group_btn.type_vertical {
    flex-direction: column;
}

.group_btn.type_vertical .btn + .btn {
    margin-top: 8px;
    margin-left: 0; /* 2024-09-04 수정 */
}

.btn {
    display: block;
    height: 38px;
    padding: 0 18px;
    border-radius: 6px;
    vertical-align: top;
    font-size: 14px;
    line-height: 38px;
    text-align: center;
    text-decoration: none;
    color: var(--color-bk);
    box-sizing: border-box; /* 2024-09-04 수정 */
}

.btn:disabled {
    background: var(--color-a2);
    color: var(--color-bkb2);
    cursor: not-allowed;
}

.btn_gray {
    background: var(--color-a6);
}

.btn_gray:active {
    background: var(--color-a10);
}

.btn_yellow {
    background: var(--color-yellow);
}

.btn_yellow:active {
    background: var(--color-yellow2);
}