@charset "utf-8";
/* **************************** //필수 CSS 수정 및 삭제 불가 **************************** */

/* tag reset */
* {
    margin: 0;
    padding: 0;
    transition: all 0.3s ease-out;
    box-sizing: border-box;
}

.pc_br {
    display: block;
}

.m_br {
    display: none;
}

@media (max-width:1024px) {
    .pc_br {
        display: none;
    }

    .m_br {
        display: block;
    }
}

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

html {
    width: 100%;
    height: 100%;
    -webkit-user-select: none;
    /* 크롬, 사파리, 오페라 */
    -moz-user-select: none;
    /* 파이어폭스 */
    -ms-user-select: none;
    /* IE 10/11 */
    user-select: none;
    /* 일반 */
}

body,
code {
    background: #fff;
    font-family: "Pretendard", "Montserrat", sans-serif;
    color: #000;
}

body {
    /* 1. 기본적으로 단어(어절) 단위로 줄바꿈을 합니다. */
  word-break: keep-all;

}

body#popup {
    min-width: 0;
}

li {
    list-style: none;
}

img,
fieldset {
    vertical-align: top;
    border: none;
}

table {
    width: 100%;
    border: 0;
    border-spacing: 0;
    border-collapse: collapse;
}

caption {
    display: none;
}

th,
td {
    vertical-align: top;
    border: 0;
}

input,
select,
textarea {
    vertical-align: middle;
    border-radius: 0;
    font-size: 100%;
    color: #000;
    color: var(--font-color-base);
    box-sizing: border-box;
}

button {
    margin: 0;
    padding: 0;
    border: 0;
    overflow: visible;
    background: none;
    cursor: pointer;
}

hr.layout {
    display: none;
}

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

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

.top-btn {
    display: none;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 20px;
    bottom: 80px;
    z-index: 10000;
    width: 45px;
    height: 45px;
    border: 1px solid #dddddd;
    border-radius: 50%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    background: #ffffff;
    transition: all 0.3s;
    cursor: pointer;
}

.top-btn:hover {
    background: #f8f8f8;
}

.top-btn.show {
    display: flex;
}

.top-btn .material-symbols-outlined {
    font-size: 24px;
    color: #333333;
}

@media (max-width: 767px) {
    .top-btn {
        right: 5px;
        bottom: 70px;
        /* Above the 50px mobile-bottom-bar */
        width: 40px;
        height: 40px;
    }

    .top-btn .material-symbols-outlined {
        font-size: 20px;
    }
}