:root {
    --color-white: #fffbf5;
    --color-black: #333;
    --color-gray-border: #ddd;
    --color-opacity-text: #b6b6b633;
    --color-footer-bg: #949494;
    --color-input-text: #999;
    --color-red-text: #ff6363;
    --color-blue-text: #517fff;
    --color-menu-bg: #405d72;
    --color-extra-menu-bg: #758694;

    --filter-white-shout-logo: brightness(0) saturate(100%) invert(100%) sepia(39%) saturate(819%) hue-rotate(351deg) brightness(107%) contrast(123%);
}
*,
*::before,
*::after,
html,
body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    -webkit-font-smoothing: antialiased;
    overflow-wrap: break-word;
    color: var(--color-black);
    background-color: var(--color-white);
}
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}
::-webkit-scrollbar-track {
    background: unset;
}
::-webkit-scrollbar-thumb {
    background: var(--color-black);
    border-radius: 10px;
}
html,
body,
input,
select,
textarea {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji",
        "Segoe UI Symbol", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
p {
    margin: 0;
    padding: 0;
}
h4,
h5 {
    font-weight: unset;
}
::after,
::before {
    box-sizing: border-box;
    flex-shrink: 0;
}
canvas,
img,
video {
    display: block;
    max-width: 100%;
}
ol li {
    list-style: none;
}
ol,
ul,
li {
    list-style: none;
    margin: 0;
    padding: 0;
}
a {
    -webkit-tap-highlight-color: transparent;
}
a,
a:active,
a:hover {
    color: inherit;
    text-decoration: none;
}
label,
input {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
}
button {
    color: inherit;
    background: transparent;
    border: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
strong,
.bold {
    font-weight: 800;
}
.en_text {
    font-family: "Bowlby One SC", sans-serif;
}

/* header */
.header {
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100px;
    width: 100%;
    padding: 0 64px;
    z-index: 3;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}
.header h1 {
    transition: all 1s;
    cursor: pointer;
}
h1.logo_open {
    transition: all 0.8s;
    filter: var(--filter-white-shout-logo);
}
.header_menu {
    display: flex;
    align-items: center;
    gap: 20px;
}
.header_login {
    display: flex;
    align-items: center;
    gap: 24px;
}
div.header_login button {
    font-size: 16px;
    font-weight: bold;
}
.nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    height: 100%;
    overflow: hidden;
    height: 0%;
    width: 100%;
    background-color: var(--color-menu-bg);
    z-index: 2;
}
.nav__extra-background {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    height: 0%;
    width: 100%;
    background-color: var(--color-extra-menu-bg);
    z-index: 1;
}
.nav__content {
    display: flex;
    align-items: center;
    max-width: 1280px;
    height: 100%;
    min-height: 100vh;
    padding: 120px 0;
    margin: 0 auto;
    color: var(--color-white);
}
.nav__left {
    flex: 1;
}
.nav__right {
    max-width: 300px;
}
.nav__links {
    font-size: 80px;
    line-height: 1;
    margin-bottom: 80px;
}
.nav__links a {
    display: block;
}
.nav__links a:not(:last-child) {
    margin-bottom: 32px;
}
.nav__links a:hover {
    color: var(--color-extra-menu-bg);
}
.nav__locations {
    display: flex;
    align-items: center;
}
.nav__locations a:not(:last-child) {
    margin-right: 24px;
}
#MenuButton {
    display: block;
    height: 40px;
    width: 40px;
    background-color: transparent;
    cursor: pointer;
}
#MenuButton span {
    display: block;
    width: 40px;
    background-color: var(--color-black);
    height: 5px;
    position: absolute;
    border-radius: 20px;
}
div#wrap div.subwrap {
    clear: both;
    overflow-x: hidden;
}
body::after {
    background: url(../img/main/texture.jpg);
    background-position: 50%;
    background-repeat: repeat;
    background-size: unset;
    content: "";
    height: 100%;
    left: 0;
    mix-blend-mode: multiply;
    opacity: 0.2;
    pointer-events: none;
    position: fixed;
    top: 0;
    width: 100%;
}
/**/
section {
    width: 100%;
    max-width: 1280px;
    margin: 80px auto;
}
/* section1 */
section.section-one {
    width: 100vw;
    max-width: 100vw;
    height: 100vh;
    margin: 0 auto;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border-bottom: 1px solid var(--color-black);
}
div.showcase_column {
    position: relative;
    width: 20%;
    height: calc(100% - 100px);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    border-right: 1px solid var(--color-black);
    border-top: 1px solid var(--color-black);
    padding: 2rem;
    overflow: hidden;
    transition: all 0.5s;
    cursor: pointer;
}
div.showcase_column-title {
    display: flex;
    width: 0%;
    transition: all 0.5s;
    border-bottom: 1px solid var(--color-black);
    padding-bottom: 10px;
}
div.showcase_column_graphic-wrapper {
    position: absolute;
    left: 2rem;
    top: 24%;
    right: 2rem;
    bottom: 0%;
    display: flex;
    justify-content: center;
    align-items: center;
}
div.showcase_column_graphic {
    aspect-ratio: 1 / 1;
    position: absolute;
    right: 0px;
    display: flex;
    justify-content: center;
    align-items: center;
    transform: translate(50%, 0px) scale(1.2);
    transition: 0.5s;
}
div.showcase_column_graphic svg {
    width: 100%;
}
div.showcase_column_graphic svg path {
    fill: var(--color-black);
}
div.showcase_columng-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
p.showcase_column-content_paragraph {
    -moz-transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -o-transition: all 0.5s;
    transition: all 0.5s;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    font-size: 18px;
}
div.showcase_column:hover {
    width: 30%;
    background-color: #e0faf6;
    color: var(--color-blue-text);
    border-color: var(--color-blue-text);
    transition: all 0.5s;
    div.showcase_column_graphic {
        width: 100%;
        right: auto;
        transform: translate(0, 0) scale(1);
        transition: 0.5s;
    }
    div.showcase_column-title {
        width: 100%;
        transition: all 0.5s;
        border-color: var(--color-blue-text);
    }
    div.showcase_column_graphic svg path {
        fill: var(--color-blue-text);
    }
    p.showcase_column-content_paragraph {
        -moz-transition: all 0.5s;
        -webkit-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
        max-height: 120px;
        opacity: 1;
    }
}
/**/
/* section2 */
div.main_text_img {
    margin: 0 auto;
    text-align: center;
}
div.main_text_img p.en_text {
    display: inline-block;
    font-size: 8vw;
}
div.main_text_img p.en_text {
    font-size: 7rem;
    font-weight: 700;
    text-align: center;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) or (-webkit-background-clip: text) {
    div.main_text_img p.en_text {
        color: transparent;
        background-clip: text;
        -webkit-background-clip: text;
        background-image: url(https://cdn.pixabay.com/animation/2024/01/21/23/10/23-10-46-542_512.gif);
        background-size: cover;
        background-position: center;
    }
}
div.main_text p.text_animation {
    text-align: center;
}
/**/
/* section3 */
section.section-three {
    text-align: center;
}
/**/
/* section4 */
div.works_layout {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
a.works_img {
    flex: 1 0 30%;
    aspect-ratio: 1 / 1;
    border-radius: 8px;
    background-color: var(--color-gray-border);
    overflow: hidden;
}
a.works_img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
}
div#portfolio_title {
    flex: 1 0 30%;
    text-align: center;
}
div#portfolio_title p {
    font-size: 50px;
}
div.works_btn {
    display: none;
    margin-bottom: 8px;
    margin-right: 8px;
    text-align: right;
}
div.works_btn a {
    font-size: 18px;
    font-weight: bold;
}
/**/
/* section5 */
div.partners_logo {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    justify-items: center;
    gap: 20px;
}
div.partners_logo img {
    text-align: center;
    filter: grayscale(1);
    transition: all 0.4s;
}
div.partners_logo img:hover {
    filter: unset;
    transform: scale(1.05);
    transition: all 0.4s;
}
/**/
/* footer */
footer {
    background-color: var(--color-footer-bg);
}
/* footer-scroll-text */
div.scroll_hover_text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
}
h1.scroll_text {
    font-size: 7vw;
    line-height: 1.2;
    white-space: nowrap;
    margin: 0;
    width: 100%;
    color: var(--color-opacity-text);
    background: linear-gradient(to right, var(--color-white), var(--color-white)) no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    background-size: 0%;
    transition: background-size cubic-bezier(0.1, 0.5, 0.5, 1) 0.5s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
}
span.hover_text {
    position: absolute;
    top: -1px;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-white);
    color: var(--color-black);
    clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);
    transform-origin: center;
    transition: all cubic-bezier(0.1, 0.5, 0.5, 1) 0.4s;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
h1.scroll_text:hover > span.hover_text {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
h1.scroll_text:hover > span.hover_text a {
    display: inline-block;
    width: 100%;
    height: 100%;
    text-align: center;
}
div#mode_btn {
    min-width: 150px;
    display: flex;
    justify-content: end;
}
.checkbox {
    opacity: 0;
    position: absolute;
}
.checkbox-label {
    background-color: var(--color-black);
    width: 50px;
    height: 26px;
    border-radius: 50px;
    position: relative;
    padding: 5px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.checkbox-label .ball {
    background-color: var(--color-white);
    width: 22px;
    height: 22px;
    position: absolute;
    left: 7px;
    top: 6px;
    border-radius: 50%;
    transition: transform 0.2s linear;
}
.checkbox:checked + .checkbox-label .ball {
    transform: translateX(24px);
}
/**/
/* footer-map */
footer {
    padding-bottom: 20px;
}
div.footer_nav {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 40px;
}
div.footer_location {
    display: flex;
    justify-content: space-between;
    align-items: start;
}
div.footer_location_map {
    width: 60%;
    height: 225px;
    background-color: var(--color-gray-border);
    border-radius: 8px;
    overflow: hidden;
    z-index: 0;
}
.root_daum_roughmap .wrap_btn_zoom {
    z-index: 1;
}
div.footer_location_map div.root_daum_roughmap {
    width: 100%;
    height: 100%;
}
div.footer_address p {
    font-size: 20px;
    color: var(--color-white);
}
div.footer_address p.address_name {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 12px;
    color: var(--color-white);
}
/**/
/* footer-copyright */
div.footer_copyright {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
div.footer_copyright {
    display: flex;
    flex-direction: column;
    gap: 16px;
    color: var(--color-white);
}
/**/
/**/
/* contact */
section.contact_form {
    margin-top: 120px;
}
section.contact_form form[name="contact_form"] {
    display: flex;
    gap: 20px;
}
div.contact_title {
    margin-bottom: 50px;
}
div.contact_title p {
    font-size: 5rem;
    line-height: 1;
    width: fit-content;
}
div.contact_form_content {
    width: 50%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
div.contact_half {
    display: flex;
    gap: 8px;
}
div.contact_form_input {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}
div.contact_form_input > h4 {
    padding-left: 8px;
}
div.contact_form_input label {
    font-size: 16px;
    padding-left: 8px;
}
div.contact_form_input input {
    width: 100%;
    height: 48px;
    background-color: unset;
    border-radius: 8px;
    border: 2px solid var(--color-gray-border);
    padding: 12px 16px;
    font-size: 16px;
}
div.contact_form_input span.red_text {
    color: var(--color-red-text);
    font-size: 0.8rem;
    margin-left: 4px;
}
div.contact_form_input span.blue_text {
    color: var(--color-blue-text);
    font-weight: 500;
    cursor: pointer;
}
ul.contact_form_checkbox {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
ul.contact_form_checkbox li input[type="checkbox"] {
    display: none;
}
ul.contact_form_checkbox li input[type="checkbox"] + label {
    cursor: pointer;
    border: 2px solid var(--color-gray-border);
    border-radius: 6px;
    background: transparent;
    color: var(--color-input-text);
    padding: 12px 16px;
    display: flex;
    align-items: center;
    width: 100%;
    transition: all ease 0.3s;
}
ul.contact_form_checkbox li input[type="checkbox"]:checked + label {
    border-color: var(--color-black);
    border-radius: 30px;
    color: var(--color-black);
    font-weight: 500;
}
div.contact_form_input label.label_file {
    width: 100%;
    display: flex;
    align-items: end;
}
label.label_file small {
    flex: 1 0 auto;
    text-align: right;
    padding-right: 8px;
}
div.contact_form_input input[type="file"] {
    color: var(--color-black);
    height: unset;
}
div.contact_form_input input[type="file"]::-webkit-file-upload-button {
    background: var(--color-black);
    border: none;
    border-radius: 8px;
    color: var(--color-white);
    cursor: pointer;
    font-size: 14px;
    outline: none;
    padding: 8px 12px;
    transition: all 0.3s ease;
}
div.contact_form_input input[type="file"]::-webkit-file-upload-button:hover {
    background: var(--color-white);
    color: var(--color-black);
}
div.contact_fill.contact_border {
    border-top: 4px solid var(--color-black);
    padding-top: 8px;
}
div.grow-wrap {
    width: 100%;
    display: grid;
}
div.grow-wrap::after {
    content: attr(data-replicated-value) " ";
    white-space: pre-wrap;
    visibility: hidden;
}
div.grow-wrap > textarea {
    resize: none;
    overflow: hidden;
}
div.grow-wrap > textarea,
div.grow-wrap::after {
    width: 100%;
    background-color: unset;
    border: 2px solid var(--color-gray-border);
    border-radius: 6px;
    padding: 20px;
    grid-area: 1 / 1 / 2 / 2;
    font-size: 16px;
    outline-color: var(--color-black);
}
div.contact_form_input input.contact_submit_btn {
    background-color: var(--color-black);
    color: var(--color-white);
    cursor: pointer;
}
/**/
/* my-page */
div.my_page_bg {
    width: 100vw;
    height: 100%;
    background-color: var(--color-black);
    padding: 100px 64px 40px;
    display: grid;
    grid-template-areas:
        "request split   split"
        "request product product"
        "request publish info";
    gap: 20px;
}
div.my_page_card {
    background-color: var(--color-white);
    border-radius: 20px;
}
div.request_card {
    grid-area: request;
}
div.split_table {
    grid-area: split;
}
div.product_table {
    grid-area: product;
}
div.publish_card {
    grid-area: publish;
}
div.member_info {
    grid-area: info;
}
.welcome-text {
    color: #fff;
}

dialog {
    border: none;
    border-radius: 10px;
    -webkit-animation: appear 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
    animation: appear 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
    box-shadow: 0 25px 40px -20px #3c4a56;
}

.dialog__animate-out {
    -webkit-animation: dissappear 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
    animation: dissappear 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

.dialog__inner {
    display: flex;
    flex-direction: column;
    color: #838282;
}

.dialog__close-btn {
    align-self: flex-end;
}

.dialog__content {
    padding: 0 55px 55px 55px;
}

.dialog__footer {
    padding: 55px 55px 0 55px;
    display: flex;
    justify-content: center;
    align-items: center;
}
div.layer_back {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
    display: none;
    text-align: center;
    z-index: 999999999;
    background: url("../img/main/layer_bg.png");
    justify-content: center;
    align-items: center;
}
div.layer_content {
    position: fixed;
    display: none;
    width: 90%;
    max-width: 90%;
    height: 80%;
    padding: 30px;
    background-color: #0e0e23;
    z-index: 1000000000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    border-radius: 20px;
}
div.paylayer_content {
    position: fixed;
    display: none;
    width: 405px;
    max-width: 90%;
    padding: 30px;
    background-color: #fff;
    z-index: 1000000000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    border-radius: 20px;
}
div.paylayer_content div.pay_layer_top {
    width: 100%;
    border-bottom: 2px solid var(--color-black);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
}
div.paylayer_content div.pay_layer_top b {
    font-size: 24px;
}
div.paylayer_content div.pay_layer_top svg {
    width: 30px;
    cursor: pointer;
}
div.paylayer_content div.pay_layer_top svg path {
    fill: none;
    stroke: var(--color-black);
    stroke-linecap: round;
    stroke-miterlimit: 133.33;
    stroke-width: 50px;
}
div.paylayer_content div.pay_layer_mid {
    margin-bottom: 30px;
}
div.paylayer_content div.pay_layer_mid b {
    font-size: 30px;
    line-height: 30px;
    margin: 20px 0;
    display: flex;
}
div.paylayer_content div.pay_layer_mid div {
    display: flex;
    flex-direction: column;
}
div.paylayer_content div.pay_layer_mid div div {
    display: flex;
    align-items: flex-end;
    margin-top: 10px;
}
div.paylayer_content div.pay_layer_mid div div b {
    font-size: 30px;
    line-height: 30px;
}
div.paylayer_content div.pay_layer_bottom {
    display: flex;
    gap: 10px;
}
div.paylayer_content div.pay_layer_bottom p {
    cursor: pointer;
    padding: 12px 0;
    background-color: #4356d6;
    border-radius: 5px;
    color: #fff;
    font-weight: 600;
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
div.paylayer_content div.pay_layer_bottom form[name="payform"] p {
    cursor: pointer;
    padding: 12px 0;
    background-color: #4356d6;
    border-radius: 5px;
    color: #fff;
    font-weight: 600;
    width: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}
div.dash_title {
    width: 100%;
    height: 60px;
    background-color: #161b3a;
    border-radius: 10px;
    padding: 10px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
div.dash_title div.dash_id_title {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 4px;
}
div.dash_title b {
    margin-right: 10px;
}
div.dash_title b,
div.dash_title span {
    color: #fff;
    font-size: 20px;
}
div.dash_title div.rolling_news {
    width: 70%;
    height: 100%;
    overflow: hidden;
    display: flex;
    align-items: center;
}
div.news-box div.swiper-slide {
    display: flex;
    align-items: center;
}
div.news-box div.swiper-slide a {
    cursor: pointer;
    color: #fff;
    white-space: nowrap;
    display: block;
    width: 100%;
    text-overflow: ellipsis;
    overflow: hidden;
}
div.dash_content {
    width: 100%;
    height: calc(100vh - 240px);
    display: flex;
    gap: 20px;
}
div#product_view_page div.dash_items:last-child {
    background-color: #b6b6b6;
    border-radius: 15px;
}
div.dash_content div.dash_items {
    width: 50%;
    height: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
div.dash_items div.dash_use_box {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
}
div.dash_use_box div.dash_use_info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #1d2144;
    border-radius: 10px;
    padding: 10px;
    gap: 12px;
}
div.dash_use_date_total {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
div.dash_use_date_total p.dash_date {
    color: var(--color-white);
}
div.dash_use_date_total p.total_num {
    width: 140px;
    background-color: var(--color-white);
    border-radius: 20px;
    color: var(--color-black);
    text-align: right;
    padding: 4px 8px;
}
div.dash_use_state_all {
    display: flex;
    gap: 12px;
}
div.dash_use_state {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
}
div.dash_use_state p.state_text {
    padding: 5px 10px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
}
div.dash_use_state:nth-child(1) p.state_text {
    background-color: #3bd2a6;
}
div.dash_use_state:nth-child(2) p.state_text {
    background-color: #a93bd2;
}
div.dash_use_state:nth-child(3) p.state_text {
    background-color: #f32eb9;
}
div.dash_use_state:nth-child(4) p.state_text {
    background-color: #3e932d;
}
div.dash_use_state:nth-child(5) p.state_text {
    background-color: #2e53f3;
}
div.dash_use_state p.state_num {
    color: var(--color-white);
}
a.dash_register_btn {
    background-color: #ff0000;
    color: var(--color-white);
    padding: 10px 20px;
    white-space: nowrap;
    border-radius: 10px;
}
div.dash_chat_box#chatBox {
    background-color: #161b3a;
    padding: 40px;
}
div#chatBox p.chatBox_title {
    font-size: 24px;
    font-weight: bold;
    color: var(--color-white);
}
div#chatBox div.chat_pay_box {
    display: flex;
    flex-direction: column;
}
div.chat_pay_box div.pay_content_box {
    display: flex;
    gap: 15px;
    margin-bottom: 10px;
}
div.pay_content_box div.pay_content_title {
    width: 30%;
    display: flex;
    padding: 15px;
    background-color: #1d2144;
    border-radius: 10px;
}
div.pay_content_title span {
    color: var(--color-white);
}
div.pay_content_box div.pay_content_content {
    width: 70%;
    display: flex;
    padding: 15px;
    background-color: #b6b6b6;
    border-radius: 10px;
}
div.pay_list {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 10px;
}
div.pay_items {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
div.pay_items span {
    color: var(--color-white);
}
div.dash_items div.dash_chat_box {
    background-color: #1d2144;
    border-radius: 15px;
    width: 100%;
    height: calc(100% - 127px);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: scroll;
}
div.dash_chat_box div.dash_chat_item {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: flex-end;
    gap: 20px;
}
div.dash_chat_item div.chat_content p {
    color: var(--color-white);
}
div.dash_chat_item span {
    color: var(--color-white);
}
div.dash_chat_item.ques_chat {
    flex-direction: row-reverse;
    justify-content: flex-start;
}
div.dash_chat_item.ques_chat div.chat_content {
    width: 70%;
    height: 100%;
    background-color: #3e932d;
    padding: 10px 20px;
    border-radius: 10px 10px 0 10px;
    overflow: hidden;
    display: flex;
    align-items: center;
}
div.dash_chat_item.answer_chat div.chat_content {
    width: 70%;
    height: 100%;
    background-color: #4356d6;
    padding: 10px 20px;
    border-radius: 10px 10px 10px 0px;
    display: flex;
    align-items: center;
}
div.dash_items div.dash_pay_box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 45%;
    background-color: #1d2144;
    border-radius: 15px;
    padding: 20px 20px 10px 20px;
}
div.pay_title_box {
    width: 100%;
    padding: 20px;
    background-color: #3e932d;
    display: flex;
    justify-content: space-between;
    border-radius: 15px;
    margin-bottom: 15px;
}
div.pay_title_box.long_pay {
    background-color: #f00;
}
div.pay_title_box span {
    color: #fff;
}
div.dash_pay_box b.dash_pay_title {
    color: #fff;
    font-size: 20px;
    margin-bottom: 20px;
}
div.dash_pay_box div.dash_pay_content {
    display: flex;
    align-items: center;
    height: 100%;
    gap: 20px;
    overflow-x: scroll;
    padding: 0px 0 10px;
}
div.dash_pay_content div.pay_box {
    width: 220px;
    height: 90%;
    display: flex;
    flex-direction: column;
    background-color: #161b3a;
    border-radius: 15px;
    overflow: hidden;
    flex-shrink: 0;
}
div.dash_pay_content div.pay_box b {
    width: 100%;
    padding: 15px 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #fff;
    border-radius: 15px;
}
div.pay_box div.pay_info {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 15px;
}
div.pay_box div.pay_info span {
    color: #fff;
    font-size: 15px;
}
div.pay_box div.pay_info div.pay_button {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
div.pay_box div.pay_info div.pay_button a {
    background-color: #4356d6;
    border-radius: 20px;
    color: #fff;
    padding: 5px 15px;
}
div.dash_pay_content div.pay_box.pay_year_item b {
    background-color: #ff0000;
}
div.dash_pay_content div.pay_box.pay_one_item b {
    background-color: #3e932d;
}
div.dash_items div.dash_notice_box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 55%;
    background-color: #1d2144;
    border-radius: 15px;
    padding: 20px 20px 10px 20px;
}
div.dash_notice_box b.dash_notice_title {
    color: #fff;
    font-size: 20px;
    margin-bottom: 20px;
}
div.dash_notice_box div.dash_notice_content {
    display: flex;
    flex-direction: column;
}
div.dash_notice_content div.table_title {
    display: flex;
    width: 100%;
    background-color: #4356d6;
    border-radius: 15px;
    padding: 20px 0;
}
div#noticeBox {
    max-height: 220px;
    overflow-y: hidden;
}
div.dash_notice_content div.table_item {
    display: flex;
    width: 100%;
    padding: 20px 0;
    position: relative;
}
div.dash_notice_content div.table_item::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    width: 95%;
    height: 1px;
    background-color: #fff;
}
div.dash_notice_content div.table_title span,
div.dash_notice_content div.table_item span,
div.dash_notice_content div.table_item a {
    color: #fff;
    text-align: center;
}
div.dash_notice_content div.table_item a {
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}
div.dash_notice_content div.table_title span:first-of-type,
div.dash_notice_content div.table_item span:first-of-type {
    width: 20%;
}
div.dash_notice_content div.table_title span:nth-of-type(2),
div.dash_notice_content div.table_item a {
    width: 60%;
    text-align: left;
}
div.dash_notice_content div.table_title span:last-of-type,
div.dash_notice_content div.table_item span:nth-of-type(2) {
    width: 20%;
}
div.sub_mypage {
    display: flex;
    height: 100vh;
    padding: 100px 64px 0px 20px;
    background-color: #0e0e26;
    gap: 20px;
}
div.sub_mypage div.icon_link_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 85px;
    gap: 30px;
}
div.sub_mypage div.icon_link_box a {
    width: 70px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
div.sub_mypage div.icon_link_box a svg {
    width: 30px;
    margin-bottom: 5px;
}
div.sub_mypage div.icon_link_box a p {
    font-size: 16px;
    color: #fff;
    white-space: nowrap;
}
div.sub_mypage div.sub_mypage_content {
    display: flex;
    flex-direction: column;
    width: calc(100% - 90px);
}
div.sub_mypage div.sub_mypage_content div.dash_use_box {
    height: auto;
    gap: 10px;
}
div.sub_mypage_content div.mypage_link_list {
    width: 100%;
    display: flex;
    justify-content: space-between;
}
/* div.sub_mypage_content div.mypage_link_list div.mypage_link {
    display: flex;
    align-items: center;
    gap: 10px;
    display: none;
}
div.sub_mypage_content div.mypage_link_list div.mypage_link a {
    width: 100px;
    aspect-ratio: 1 / 1;
    color: #fff;
    background-color: #1d2144;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 30px;
} */
/* div.sub_mypage_content div.mypage_link_list div.mypage_link a.active {
    background-color: #3e932d;
} */
div.sub_mypage div.sub_mypage_content div.dash_chat_box {
    height: calc(100% - 100px);
}
div.sub_mypage div.sub_mypage_content div.sub_mypage_foot {
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
}
div.sub_mypage div.sub_mypage_content div.sub_mypage_foot p {
    color: var(--color-white);
}
header.mypage_header div.header_login button {
    color: var(--color-white);
}
header.mypage_header #MenuButton span {
    background-color: var(--color-white);
}
header.mypage_header #shout_logo {
    filter: var(--filter-white-shout-logo);
}
div.maintenance_box {
    display: flex;
    flex: 1;
    flex-direction: column;
    width: 100%;
    background-color: var(--color-white);
    border-radius: 8px;
    padding: 20px;
}
p.btn_list {
    width: 70px;
    height: 40px;
    background-color: #464646;
    font-size: 15px;
    color: #fff;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}
div#loader {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
}
div#loader div {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    display: flex;
}
div.loader_box {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
}
div.loader_box div.loader_bg {
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.1);
    display: flex;
}
.loader {
    width: 48px;
    height: 48px;
    border: 5px solid #fff;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}
div.pwlayer_content {
    position: fixed;
    display: none;
    width: 550px;
    max-width: 90%;
    padding: 30px;
    background-color: #fff;
    z-index: 1000000000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    align-items: center;
    border-radius: 20px;
}
div.pwlayer_content b {
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 10px;
}
div.pwlayer_content form.forget_list {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}
div.pwlayer_content form.forget_list p {
    width: 100%;
    text-align: center;
}
div.pwlayer_content form.forget_list p:last-of-type {
    margin-bottom: 10px;
}
div.pwlayer_content form.forget_list input {
    background-color: #eee;
    border: none;
    padding: 12px 15px;
    width: 100%;
}
div.pwlayer_content form.forget_list div.phone_list {
    display: flex;
    gap: 3px;
}
div.pwlayer_content form.forget_list button.forget_btn {
    border-radius: 20px;
    border: 1px solid #ff4b2b;
    background-color: #ff4b2b;
    color: #ffffff;
    font-size: 12px;
    font-weight: bold;
    padding: 12px 45px;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: transform 80ms ease-in;
    margin-top: 10px;
}
@keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes appear {
    from {
        opacity: 0;
        transform: translate(-50%, 50%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}

@keyframes appear {
    from {
        opacity: 0;
        transform: translate(-50%, 50%);
    }
    to {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
}
@-webkit-keyframes dissappear {
    from {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    to {
        opacity: 0;
        transform: translate(-50%, 50%);
    }
}
@keyframes dissappear {
    from {
        opacity: 1;
        transform: translate(-50%, -50%);
    }
    to {
        opacity: 0;
        transform: translate(-50%, 50%);
    }
}
/* my page maintenance */
div#mr_page div.dash_content {
    height: calc(100vh - 241px);
}
div#mr_page div.dash_items {
    width: 50%;
}
div#mr_page div.sub_mypage_content div.mypage_link_list {
    width: 100%;
    gap: unset;
    justify-content: space-between;
}
div#mr_page div.maintenance_box {
    width: 100%;
    max-height: 60vh;
    overflow: hidden;
}
div#mr_page div.preview_box {
    width: 50%;
    height: 100%;
    padding: 20px;
    padding-bottom: 0;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
    overflow-x: hidden;
    overflow-y: scroll;
}
div#mr_page div.pre_reply {
    width: 100%;
    background-color: var(--color-black);
    border-radius: 40px;
    border-top-left-radius: 0;
    padding: 32px;
}
div#mr_page div.pre_write {
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    background-color: var(--color-white);
    border-radius: 20px;
    padding: 20px;
}
div#mr_page div.pre_title {
    padding: 20px 0;
    border-top: 4px solid var(--color-black);
    border-bottom: 4px solid var(--color-black);
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 20px;
}
div#mr_page div.pre_title > p {
    font-size: 30px;
    font-weight: bold;
    text-align: center;
}
div#mr_page div.pre_title ul.pre_info {
    display: flex;
    gap: 20px;
}
div#mr_page ul.pre_info li span.pre_bold {
    font-weight: bold;
}
div#mr_page div.pre_file,
div#mr_page div.admin_pre_file {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 5px;
}
div#mr_page div.pre_file a,
div#mr_page div.admin_pre_file a {
    font-size: 14px;
}
div#mr_page div.admin_pre_file a {
    color: #fff;
}
div#mr_page div.pre_note {
    padding: 0 20px;
}
div#mr_page div.pre_note table,
div#mr_page div.pre_note img {
    max-width: 100%;
}
div#mr_page div.pre_btn {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
}
div#mr_page div.pre_btn p {
    padding: 12px 20px;
    border-radius: 8px;
    background-color: var(--color-black);
    color: var(--color-white);
    display: flex;
    justify-content: center;
    align-items: center;
}
div#mr_page div.reply_info {
    display: flex;
    gap: 20px;
    color: var(--color-white);
}
div#mr_page div.reply_note {
    padding: 20px 0 0;
    color: var(--color-white);
}
div#mr_page div.maintenance_box {
    position: relative;
}
div#mr_page table.standard,
div#mr_page table.standard thead,
div#mr_page table.standard thead tr,
div#mr_page table.standard thead th,
div#mr_page table.standard tbody,
div#mr_page table.standard tbody tr,
div#mr_page table.standard tbody td {
    display: block;
}
div#mr_page table.standard thead tr {
    display: flex;
    border-top: 2px solid var(--color-black);
    border-bottom: 1px solid var(--color-black);
    align-items: center;
    padding: 16px 0;
    font-size: 18px;
    text-align: center;
}
div#mr_page table.standard thead tr th:nth-child(1) {
    width: 10%;
}
div#mr_page table.standard thead tr th:nth-child(2) {
    width: 50%;
}
div#mr_page table.standard thead tr th:nth-child(3) {
    width: 20%;
}
div#mr_page table.standard thead tr th:nth-child(4) {
    width: 20%;
}
div#mr_page table.standard tbody tr {
    display: flex;
    align-items: center;
    padding: 16px 0;
}
div#mr_page table.standard tbody tr:not(:last-child) {
    border-bottom: 1px solid var(--color-black);
}
div#mr_page table.standard tbody tr td {
    text-align: center;
}
div#mr_page table.standard tbody tr td:nth-child(1) {
    width: 10%;
    font-size: 18px;
    font-weight: bold;
}
div#mr_page table.standard tbody tr td:nth-child(2) {
    width: 50%;
    text-align: left;
    display: flex;
    gap: 6px;
}
div#mr_page table.standard tbody tr td:nth-child(3) {
    width: 20%;
}
div#mr_page table.standard tbody tr td:nth-child(4) {
    width: 20%;
}
div#mr_page table.standard tbody tr td:nth-child(2) a,
div#mr_page table.standard tbody tr td:nth-child(3) a {
    min-width: 33px;
    overflow-x: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
div.paging {
    position: relative;
    left: 0px;
    bottom: 0px;
    width: 100%;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
div.paging div.paging_box {
    text-align: center;
}
div.paging div.paging_btn {
    width: 100px;
    text-align: center;
    position: absolute;
    right: 0;
}
div#mr_page div.searchbar {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    margin-top: 20px;
}
div#mr_page div.searchbar form {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
}
div#mr_page div.searchbar form div.comm_search {
    display: flex;
    gap: 16px;
    width: 100%;
    justify-content: center;
}
div#mr_page div.searchbar form div.comm_search select {
    background-color: unset;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
div#mr_page div.searchbar form input {
    background-color: unset;
    padding: 8px 16px;
    border: none;
    font-size: 16px;
    border-bottom: 2px solid var(--color-black);
    border-radius: 0;
}
div#mr_page div.paging div.paging_box {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
div#mr_page a.dBtn {
    font-size: 12px;
    font-weight: bold;
}
/* my page product */
div#product_page div.dash_content {
    height: calc(100% - 140px);
}
div#product_page div.dash_content div.dash_use_box {
    flex-direction: column;
    align-items: flex-start;
}
div#product_page div.dash_items div.dash_service_box {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: #1d2144;
    border-radius: 15px;
    padding: 20px 20px 10px 20px;
}
div#product_page div.dash_service_box b.dash_service_title {
    color: #fff;
    font-size: 20px;
    margin-bottom: 20px;
}
div#product_page div.dash_service_box div.dash_service_content {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 100%;
    gap: 20px;
    overflow-y: scroll;
    padding: 0 10px 0 0;
}
div#product_page div.dash_service_content div.service_box {
    width: 100%;
    height: 150px;
    display: flex;
    flex-direction: column;
    background-color: #161b3a;
    border-radius: 15px;
    overflow: hidden;
    flex-shrink: 0;
}
div#product_page div.dash_service_content div.service_box b {
    width: 100%;
    padding: 15px 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #fff;
    border-radius: 15px;
}
div#product_page div.dash_service_content div.service_box b.current_sevice {
    background-color: #4356d6;
}
div#product_page div.dash_service_content div.service_box b.past_sevice {
    background-color: #b6b6b6;
}
div#product_page div.service_box div.service_info {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 15px;
}
div#product_page div.service_box div.service_info span {
    color: #fff;
}
div#product_page div.service_box div.service_info div.service_button {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
div#product_page div.service_box div.service_info div.service_button a {
    background-color: #4356d6;
    border-radius: 20px;
    color: #fff;
    padding: 5px 15px;
}
div#product_page div.pay_yet_list {
    width: 100%;
    height: calc(100% - 108px);
    background-color: #1d2144;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
div#product_page div.pay_yet_list b.pay_yet_title {
    color: #fff;
    font-size: 20px;
    margin-bottom: 20px;
}
div#product_page div.pay_yet_list div.pay_yet_box {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    height: 100%;
    overflow-y: scroll;
    padding: 0 10px 0 0;
    gap: 20px;
}
div#product_page div.pay_yet_box div.pay_yet_content {
    width: 100%;
    height: 150px;
    display: flex;
    flex-direction: column;
    background-color: #161b3a;
    border-radius: 15px;
    overflow: hidden;
    flex-shrink: 0;
}
div#product_page div.pay_yet_box div.pay_yet_content b {
    width: 100%;
    padding: 15px 10px;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    color: #fff;
    border-radius: 15px;
}
div#product_page div.pay_yet_box div.pay_yet_content b.pay_year_item {
    background-color: #ff0000;
}
div#product_page div.pay_yet_box div.pay_yet_content b.pay_one_item {
    background-color: #3e932d;
}
div#product_page div.pay_yet_content div.pay_info {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 10px 15px;
}
div#product_page div.pay_yet_content div.pay_info span {
    color: #fff;
}
div#product_page div.pay_yet_content div.pay_info div.pay_button {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
}
div#product_page div.pay_yet_content div.pay_info div.pay_button a {
    background-color: #4356d6;
    border-radius: 20px;
    color: #fff;
    padding: 5px 15px;
}
/* my page document */
div.document_layer_content {
    position: fixed;
    display: none;
    width: 700px;
    max-width: 90%;
    height: 700px;
    padding: 30px;
    background-color: #fff;
    z-index: 1000000000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    border-radius: 20px;
}
div#document_page div.dash_use_box {
    flex-direction: column;
    align-items: flex-start;
}
div#document_page div.dash_doc div.doc_tbody div.doc_td > div {
    padding: 10px 20px;
    background-color: #4356d6;
    border-radius: 10px;
    cursor: pointer;
}
div#document_page div.dash_doc div.doc_tbody div.doc_td > div span {
    color: var(--color-white);
}
div#document_page div.dash_content {
    display: block;
}
div#document_page div.dash_content div.dash_items {
    width: calc(50% - 10px);
    height: unset;
    display: block;
}
div#document_page div.dash_doc {
    width: 100%;
    height: calc(100% - 120px);
    margin-top: 20px;
    background-color: #161b3a;
    border-radius: 20px;
    padding: 20px;
}
div#document_page div.dash_table {
    width: 100%;
    height: 100%;
}
div#document_page div.doc_thead {
    background-color: #4356d6;
}
div#document_page div.doc_thead,
div#document_page div.doc_tr {
    width: 100%;
    padding: 20px 16px;
    border-radius: 12px;
    display: flex;
}
div#document_page div.doc_tbody {
    width: 100%;
    height: 48vh;
    margin: 0 auto;
    overflow-x: hidden;
    overflow-y: scroll;
}
div#document_page div.doc_tr {
    padding: 20px 16px;
    border-radius: 0;
    position: relative;
}
div#document_page div.doc_tr::after {
    content: "";
    position: absolute;
    width: 98%;
    height: 1px;
    background-color: var(--color-white);
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
}
div#document_page div.doc_th,
div#document_page div.doc_td {
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--color-white);
    font-size: 18px;
    flex: 1 0 13%;
    text-align: center;
}
/*거래명세표*/
div#documentLayer #itemize {
    overflow-x: scroll;
    width: 100%;
    text-align: center;
    position: relative;
}
div#documentLayer #itemize #shoutkorea {
    width: 100%;
    position: absolute;
    top: 150px;
    left: auto;
}
div#documentLayer #itemize #shoutkorea img {
    display: inline;
}
div#documentLayer #itemize table.itemize {
    background-color: #4d4ec6;
    width: 600px;
    margin: auto;
    border-left: 2px #4d4ec6 solid;
    border-right: 2px #4d4ec6 solid;
    border-top: none;
    border-collapse: collapse;
    border-color: #4d4ec6;
}
div#documentLayer #itemize table.itemize:first-of-type {
    border-top: 2px #4d4ec6 solid;
}
div#documentLayer #itemize table.itemize tbody,
div#documentLayer #itemize table.itemize td,
div#documentLayer #itemize table.itemize th,
div#documentLayer #itemize table.itemize thead,
div#documentLayer #itemize table.itemize tfoot,
div#documentLayer #itemize table.itemize tr {
    border-style: inherit;
    border-width: 1px;
    border-color: #4d4ec6;
}
div#documentLayer #itemize table.itemize tbody {
    border-style: inherit;
    border-width: 1px;
}
div#documentLayer #itemize table.itemize tr th {
    padding: 5px;
    text-align: center;
    color: #1a1eda;
}
div#documentLayer #itemize table.itemize tr th strong {
    font-size: 25px;
}
div#documentLayer #itemize table.itemize tr td {
    padding: 5px;
    text-align: left;
    word-break: keep-all;
}
div#documentLayer #itemize table.itemize tr td.nowrap {
    white-space: nowrap;
}
div#documentLayer #itemize table.itemize tr td.money {
    text-align: right;
}
div#documentLayer #itemize table.itemize tr td.money strong {
    font-size: 15px;
    font-weight: bold;
    color: #000;
}
div#documentLayer #itemize table.itemize tr td.center {
    text-align: center;
}
div#documentLayer #itemize table.itemize tr td.text {
    padding: 10px;
}
div#documentLayer #itemize table.itemize tr td.in {
    background: url(/w_board/img/blit_in.gif) #fff no-repeat right 8px;
}
div#documentLayer #itemize table.itemize tr {
    background-color: #ffffff;
}
div#documentLayer #itemize table.itemize tr.line {
    background-color: #e2eafc;
}
div#documentLayer #itemize table.itemizend {
    width: 600px;
    margin: auto;
    border-top: 2px #4d4ec6 solid;
    border-color: #4d4ec6;
    border-collapse: collapse;
}
div#documentLayer #itemize table.itemizend tr th {
    padding: 16px 3px;
    text-align: left;
    color: #4d4ec6;
    line-height: 15px;
}
div#documentLayer #itemize table.itemizend tr td {
    padding: 3px;
    text-align: right;
    color: #4d4ec6;
    line-height: 15px;
}
div#documentLayer #itemize table.itemizend tr td.warning {
    text-align: left;
    color: #ff0000;
    font-size: 11px;
    line-height: 15px;
}
div#documentLayer #itemize table.account {
    width: 700px;
    margin: auto;
    border: 0px #000000 solid;
    margin-bottom: 20px;
    background-color: #fff;
}
div#documentLayer #itemize table.account tr {
    background-color: #fff;
}
div#documentLayer #itemize table.account tr th.strong {
    padding: 30px 5px 30px 5px;
    font-size: 30px;
    color: #000000;
}
div#documentLayer #itemize table.account tr th.strong img {
    margin-right: 80px;
}
div#documentLayer #itemize table.account tr th {
    padding: 6px;
    color: #000000;
}
div#documentLayer #itemize table.account tr td {
    padding: 6px;
    color: #000000;
    text-align: left;
}
div#documentLayer #itemize table.account tr td.note {
    padding: 30px 10px 30px 10px;
    border-top: 2px #000000 solid;
    line-height: 32px;
}
div#documentLayer #itemize table.account tr td.note strong {
    display: block;
    margin: 40px 0px 10px 0px;
}
div#documentLayer #itemize table.account tr td.name {
    padding: 50px 10px 50px 10px;
    border-bottom: 2px #000000 double;
    font-size: 20px;
    text-align: center;
    font-weight: bold;
    color: #000000;
}
div#documentLayer #itemize table.account table.accountview {
    width: 100%;
    background-color: #bdbdbd;
}
div#documentLayer #itemize table.account table.accountview tr {
    background-color: #fff;
}
div#documentLayer #itemize table.account table.accountview tr th {
    padding: 8px;
    text-align: center;
    color: #000000;
}
div#documentLayer #itemize table.account table.accountview tr td {
    padding: 8px;
    text-align: center;
    color: #000000;
}
div#documentLayer #itemize table.account table.accountview tr td span {
    display: block;
    font-size: 27px;
    font-weight: bold;
    color: #000000;
    margin: 15px 0px 15px 0px;
}
div#documentLayer #itemize table.num {
    width: 100%;
}
div#documentLayer #itemize table tr td.num1 {
    padding: 0px;
    font-size: 14px;
    font-weight: bold;
    text-align: center;
    color: #1a1eda;
    font-family: Tahoma, Geneva, sans-serif;
}
div#documentLayer #itemize input.input {
    border: 1px #d9d9d9 solid;
    background-color: #fbfbfb;
    height: 18px;
    line-height: 17px;
    padding: 0px 3px;
    width: 90%;
}
div#documentLayer #itemize input.num {
    border: 1px #d9d9d9 solid;
    background-color: #fbfbfb;
    height: 18px;
    line-height: 17px;
    padding: 0px 3px;
    width: 5px;
}
/* my page member */
div#member_page div.dash_items:first-child {
    justify-content: space-between;
}
div#member_page div.dash_items:first-child div.dash_use_box {
    flex-direction: column;
    align-items: flex-start;
}
div#member_page div.dash_items:last-child {
    background-color: #161b3a;
    border-radius: 15px;
    padding: 30px 20px 20px 20px;
}
div#member_page div.dash_items:last-child > b {
    font-size: 20px;
    color: var(--color-white);
}
div#member_page div.dash_items:last-child > p {
    font-size: 14px;
    color: #fff;
    text-align: right;
}
div#member_page div.member_list {
    width: 100%;
    height: calc(100% - 127px);
    background-color: #161b3a;
    border-radius: 15px;
    padding: 30px 20px 20px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
div#member_page div.member_list b.member_title {
    color: var(--color-white);
    font-size: 20px;
}
div#member_page div.member_edit_form {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
div#member_page div.member_edit_button {
    padding: 10px 20px;
    background-color: #4356d6;
    border-radius: 20px;
    cursor: pointer;
    margin-top: 20px;
}
div#member_page div.member_edit_button span {
    color: #fff;
}
div#member_page div.member_title_box {
    width: 100%;
    padding: 15px 20px;
    background-color: #4356d6;
    border-radius: 10px;
    display: flex;
    justify-content: space-between;
    margin: 0 0 10px;
}
div#member_page div.member_title_box p {
    color: #fff;
    font-size: 18px;
}
div#member_page div.member_title_box b {
    color: #fff;
    font-size: 18px;
}
div#member_page div.member_edit_form form {
    width: 100%;
    padding: 2px 0 0 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
div#member_page div.input_style_box {
    width: 100%;
    display: flex;
    gap: 10px;
}
div#member_page div.input_style_box div.input_style {
    width: 50%;
    display: flex;
    gap: 10px;
}
div#member_page div.input_style_title {
    width: 30%;
    background-color: #1d2144;
    border-radius: 10px;
    padding: 10px 15px;
}
div#member_page div.input_style_title span {
    color: #fff;
}
div#member_page div.input_style_content {
    width: 70%;
}
div#member_page div.input_style_content input {
    width: 100%;
    height: 100%;
    padding: 10px;
    background-color: #eee;
    border: none;
    border-radius: 10px;
}
div#member_page div.input_phone {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
div#member_page div.input_phone input {
    width: 30%;
}
div#member_page div.input_phone span {
    color: #fff;
}
div#member_page div.input_email {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
div#member_page div.input_email input {
    width: 48%;
}
div#member_page div.input_email span {
    color: #fff;
}
div#member_page div.input_file {
    display: flex;
    justify-content: space-between;
}
div#member_page div.input_file input.upload-name {
    display: inline-block;
    padding: 0 10px;
    vertical-align: middle;
    width: 80%;
}
div#member_page div.input_file label {
    display: inline-block;
    padding: 10px 20px;
    color: #fff;
    vertical-align: middle;
    background-color: #4356d6;
    cursor: pointer;
    margin-left: 10px;
    white-space: nowrap;
    border-radius: 10px;
}
div#member_page div.input_file input[type="file"] {
    position: absolute;
    width: 0;
    height: 0;
    padding: 0;
    overflow: hidden;
    border: 0;
}
div#member_page div.input_addr {
    display: flex;
}
div#member_page div.input_addr input {
    width: 30%;
}
div#member_page div.input_addr input[type="button"] {
    margin-left: 10px;
    background-color: #1d2144;
    color: #fff;
    cursor: pointer;
}
/* my page notice */
div#notice_page div.dash_content {
    display: block;
}
div#notice_page div.dash_content div.dash_items {
    height: unset;
}
div#notice_page div.maintenance_box {
    background-color: #161b3a;
}
div#notice_page div.blog_viewhead {
    border-top: 4px solid var(--color-white);
    border-bottom: 4px solid var(--color-white);
}
div#notice_page div.blog_viewhead div.title,
div#notice_page div.blog_viewhead ul.data,
div#notice_page .blog_pagenote {
    color: var(--color-white);
}
div#notice_page table.paging tr td {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
div#notice_page div.maintenance_box {
    position: relative;
    width: 100%;
    height: calc(100% - 120px);
    margin-top: 20px;
    background-color: #161b3a;
    border-radius: 20px;
    padding: 20px;
    color: var(--color-white);
}
div#notice_page table.standard,
div#notice_page table.standard,
div#notice_page table.standard tbody,
div#notice_page table.standard tbody tr,
div#notice_page table.standard tbody tr th,
div#notice_page table.standard tbody tr td {
    display: block;
}
div#notice_page table.standard tbody tr:nth-child(1) {
    background-color: #4356d6;
    display: flex;
    padding: 20px;
    border-radius: 8px;
}
div#notice_page table.standard tbody tr td:nth-child(1),
div#notice_page table.standard tbody tr:nth-child(1) th:nth-child(1) {
    flex: 1 0 7%;
}
div#notice_page table.standard tbody tr td:nth-child(2) {
    display: flex;
    align-items: center;
}
div#notice_page table.standard tbody tr td:nth-child(2) a {
    margin-right: 10px;
}
div#notice_page table.standard tbody tr td:nth-child(2),
div#notice_page table.standard tbody tr:nth-child(1) th:nth-child(2) {
    flex: 1 0 60%;
}
div#notice_page table.standard tbody tr td:nth-child(3),
div#notice_page table.standard tbody tr:nth-child(1) th:nth-child(3) {
    flex: 1 0 10%;
}
div#notice_page table.standard tbody tr td:nth-child(4),
div#notice_page table.standard tbody tr:nth-child(1) th:nth-child(4) {
    flex: 1 0 15%;
}
div#notice_page table.standard tbody tr td:nth-child(5),
div#notice_page table.standard tbody tr:nth-child(1) th:nth-child(5) {
    flex: 1 0 8%;
}
div#notice_page table.standard tbody tr {
    display: flex;
    padding: 20px;
    text-align: center;
    align-items: center;
}
div#notice_page table.standard tbody tr:not(:first-child) {
    border-bottom: 1px solid var(--color-white);
}
div#notice_page table.standard tbody tr:not(:first-child) td:nth-child(2) {
    text-align: left;
}
div#notice_page table.paging {
    position: absolute;
    left: 20px;
    bottom: 60px;
    width: calc(100% - 40px);
}
div#notice_page table.paging th p {
    width: 100%;
    height: 40px;
    background-color: #464646;
    font-size: 15px;
    color: #fff;
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}
div#notice_page div.searchbar {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
}
div#notice_page div.searchbar form {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 24px;
}
div#notice_page div.searchbar form select {
    cursor: pointer;
    background-color: unset;
    padding: 8px 16px;
    border: none;
    color: var(--color-white);
}
div#notice_page div.searchbar form select:focus {
    outline: none;
}
div#notice_page div.searchbar form div.comm_search {
    display: flex;
    gap: 16px;
}
div#notice_page div.searchbar form input {
    background-color: unset;
    padding: 8px 16px;
    border: none;
    font-size: 16px;
    border-bottom: 2px solid var(--color-white);
    border-radius: 0;
}
div#notice_page div.searchbar form div img {
    filter: brightness(0) saturate(100%) invert(90%) sepia(1%) saturate(1957%) hue-rotate(326deg) brightness(110%) contrast(101%);
}
div#notice_page table.register {
    display: flex;
    justify-content: center;
}
/* client page notice */
section#client_notice_page table.standard {
    width: 100%;
    border-top: 4px solid var(--color-black);
    margin-bottom: 20px;
}
section#client_notice_page table.standard tbody tr {
    display: grid;
    grid-template-areas: "date title";
    grid-template-columns: 150px 1fr;
    border-bottom: 1px solid var(--color-gray-border) !important;
    padding: 20px 16px;
}
section#client_notice_page table.standard tbody tr:hover {
    span.notice_btn {
        background-color: var(--color-blue-text);
        border: none;
        transition: 0.3s;
    }
    span.notice_btn svg path {
        fill: var(--color-white);
    }
}
section#client_notice_page table.standard tbody tr td.l {
    grid-area: title;
    display: flex;
    align-items: center;
}
section#client_notice_page table.standard tbody tr td.l a {
    flex: 1 0 auto;
    font-size: 24px;
    font-weight: bold;
}
section#client_notice_page table.standard tbody tr span.notice_btn {
    display: block;
    width: 60px;
    aspect-ratio: 1 / 1;
    border-radius: 50%;
    border: 4px solid var(--color-gray-border);
    transition: 0.3s;
    cursor: pointer;
}
section#client_notice_page table.standard tbody tr span.notice_btn svg path {
    fill: var(--color-gray-border);
}
section#client_notice_page table.standard tbody tr td.date {
    position: relative;
    grid-area: date;
    text-align: center;
}
section#client_notice_page table.standard tbody tr td.date p.date_y_m,
section#client_notice_page table.standard tbody tr td.date p.date_day {
    font-weight: bold;
    color: var(--color-blue-text);
}
section#client_notice_page table.standard tbody tr td.date p.date_y_m {
    font-size: 18px;
}
section#client_notice_page table.standard tbody tr td.date p.date_day {
    font-size: 36px;
}
section#client_notice_page table.standard tbody tr td.c,
section#client_notice_page table.standard tbody tr td.n {
    display: none;
}
section#client_notice_page table.standard tbody tr:nth-child(1) {
    display: none;
}
section#client_notice_page table.standard tbody tr.notice td.date::before {
    content: "";
    background-image: url(../img/sub/pin.png);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: -10px;
    left: 0;
    width: 22px;
    height: 22px;
}
section#client_notice_page.contact_form form {
    flex-direction: column;
}
section#client_notice_page table.paging {
    width: 100%;
    position: unset;
}
section#client_notice_page table.paging tr {
    display: flex;
    justify-content: center;
    gap: 8px;
}
section#client_notice_page table.paging tr td {
    display: flex;
    gap: 8px;
}
section#client_notice_page table.paging tr td b,
section#client_notice_page table.paging tr td a {
    background-color: var(--color-gray-border);
    padding: 4px 10px;
    font-size: 20px;
    transition: 0.3s;
    overflow: hidden;
}
section#client_notice_page table.paging tr td b:hover,
section#client_notice_page table.paging tr td a:hover {
    border-radius: 50%;
    transition: 0.3s;
}
section#client_notice_page table.paging tr td b {
    background-color: var(--color-blue-text);
}
section#client_notice_page div.searchbar {
    width: 100%;
    position: unset;
    margin-top: 20px;
}
section#client_notice_page.contact_form form[name="SearchForm"] {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 12px;
}
section#client_notice_page div.searchbar form select {
    background-color: unset;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
section#client_notice_page div.searchbar form input {
    background-color: unset;
    padding: 8px 16px;
    border: none;
    font-size: 16px;
    border-bottom: 2px solid var(--color-black);
}
section#client_notice_page div.searchbar form div img {
    filter: none;
}
section#client_notice_page .blog_pagenote {
    min-height: unset !important;
}
section#client_notice_page table.register {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    border-top: 1px solid var(--color-gray-border);
}
/* client page portfolio */
section#client_portfolio_page div.gallerythird {
    width: 100%;
    display: grid;
    grid-template-columns: 30% 30% 30%;
    justify-content: center;
    gap: 8px;
}
section#client_portfolio_page div.endingview_box {
    position: relative;
    aspect-ratio: 1 / 1;
    background-color: #ddd;
    border-radius: 8px;
    overflow: hidden;
}
section#client_portfolio_page div.endingview_box:hover {
    ul.caption {
        display: flex;
        cursor: pointer;
    }
}
section#client_portfolio_page div.endingview {
    width: 100%;
    height: 100%;
}
section#client_portfolio_page div.endingview a {
    display: block;
    width: 100%;
    height: 100%;
}
section#client_portfolio_page div.endingview a img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
section#client_portfolio_page div.endingview_box ul.caption {
    position: absolute;
    top: 0;
    left: 0;
    color: #fff;
    background-color: #0000008a;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
}
section#client_portfolio_page table.paging {
    display: flex;
    justify-content: center;
    font-size: 18px;
}
/* comm_write.css */
table.writebox {
    width: 100%;
}
table.writebox tbody {
    display: flex;
    gap: 20px;
}
table.writebox tbody tr.writebox_info {
    width: 79%;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
table.writebox tbody tr.writebox_info #txtContent {
    width: 100%;
}
table.writebox tbody tr.writebox_info textarea {
    width: 100%;
    height: 300px;
}
table.writebox tr td.end:last-child > div {
    display: flex;
    flex-wrap: wrap;
}
table.writebox tr td.end:last-child > div > div.thumbview {
    width: 100px;
}
table.writebox tr td.end:last-child > div > div.thumbview img {
    width: 100%;
}
table.writebox tbody tr td {
    display: flex;
    flex-direction: column;
    row-gap: 16px;
}
td.form-floating input {
    width: 100%;
    background-color: unset;
    border: none;
    border-bottom: 2px solid var(--color-black);
    padding: 1.5em 1em 0.5em 1em;
    font-size: 16px;
    border-radius: 0;
}
td.form-floating input:focus {
    outline: none;
}
td.form-floating {
    position: relative;
}
td.form-floating input::placeholder {
    opacity: 0;
}
td.form-floating > label {
    position: absolute;
    top: 50%;
    left: 1em;
    color: var(--color-input-text);
    transform: translateY(-50%);
    cursor: text;
    transition: all 0.1s ease-out;
}
td.form-floating input:focus + label,
td.form-floating input:not(:placeholder-shown) + label {
    top: 10px;
    left: 0.8em;
}
td.form-floating input:focus + label {
    color: var(--color-black);
}
td.form-floating input.form-control-disabled {
    color: var(--color-input-text);
    border-bottom: 1px solid var(--color-input-text);
}
td.form-floating input.form-control-disabled:focus + label {
    color: var(--color-input-text);
}
table.writebox tbody tr.writebox_upload {
    width: 30%;
    display: flex;
    flex-direction: column;
    row-gap: 20px;
}
table.writebox tbody tr td.writebox_btn {
    row-gap: 8px;
}
p.btn_cancle,
p.btn_reply {
    padding: 8px;
    background-color: var(--color-black);
    font-size: 16px;
    color: var(--color-white);
    border-radius: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* default_view.php */
div.blog_viewhead {
    border-top: 4px solid var(--color-black);
    padding: 20px;
    border-bottom: 4px solid var(--color-black);
    margin-bottom: 12px;
}
div.blog_viewhead div.title {
    font-size: 36px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}
div.blog_viewhead ul.data {
    display: flex;
    justify-content: center;
    gap: 20px;
}
div.blog_viewhead ul.data li span {
    font-weight: bold;
}
div.blog_file_box {
    text-align: right;
    padding-right: 20px;
    margin-bottom: 8px;
}
.blog_pagenote {
    padding: 0 20px;
    min-height: 30vh;
}
table.register {
    margin-top: 28px;
}
table.register tr {
    display: flex;
    justify-content: space-between;
}
table.register tr th {
    display: flex;
}
table.register tbody tr td {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}
table.makereply {
    background-color: #4b4b4b;
    color: var(--color-white);
    border-radius: 8px;
    padding: 36px;
    margin-top: 20px;
}
table.makereply tbody {
    display: flex;
    flex-direction: column;
}
table.makereply tbody tr:nth-child(1) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
table.makereply tbody tr:nth-child(1) th.substance span {
    font-weight: 100;
}
table.makereply tbody tr:nth-child(1) th.subject p {
    padding: 8px 12px 8px 14px;
    background-color: var(--color-red-text);
    border-radius: 8px;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
    animation: replyBtn 1s 1s;
}
@keyframes replyBtn {
    0% {
        transform: scale(1);
    }
    30% {
        transform: scale(1.1);
    }
    40%,
    60% {
        transform: rotate(-6deg) scale(1.1);
    }
    50% {
        transform: rotate(6deg) scale(1.1);
    }
    70% {
        transform: rotate(0deg) scale(1.1);
    }
    100% {
        transform: scale(1);
    }
}
table.makereply tbody tr:nth-child(1) th.subject {
    font-weight: 300;
}
table.makereply tbody tr:nth-child(1) th.subject span {
    font-weight: 100;
}
table.makereply tbody tr:nth-child(2) {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}
table.makereply tbody tr:nth-child(3) {
    font-size: 20px;
    margin-bottom: 8px;
}
table.makereply tbody tr:nth-child(4) {
    font-size: 18px;
    line-height: 24px;
}
div.document_btn {
    display: flex;
    gap: 10px;
    margin: 10px auto 0;
}
div.document_btn div#document_btns {
    display: flex;
    gap: 10px;
}
div.document_btn p {
    padding: 10px 20px;
    border: 1px solid #000;
    border-radius: 10px;
    cursor: pointer;
}
div.chxupload_wrapper {
    border: 2px dashed #0e0e26;
    border-radius: 10px;
}
div.estimate_layer_content {
    position: fixed;
    display: none;
    width: 1000px;
    max-width: 90%;
    height: 700px;
    padding: 30px;
    background-color: #fff;
    z-index: 1000000000;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    flex-direction: column;
    border-radius: 20px;
    overflow-y: scroll;
}
div.estimate_header {
    width: 100%;
    margin: 0 auto 15px;
    padding: 20px;
    border-bottom: 1px dashed #000;
    position: relative;
    display: flex;
    justify-content: center;
}
div.estimate_header b {
    font-size: 2rem;
    letter-spacing: 1rem;
}
div.estimate_header img {
    width: 120px;
    position: absolute;
    right: 0px;
    top: 50%;
    transform: translateY(-50%);
}
div.estimate_info_list {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
}
div.estimate_info_list div.estimate_info_box {
    width: 48%;
    border: 1px solid #000;
}
div.estimate_info_box div.estimate_info {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 20px 10px;
    border-bottom: 1px solid #000;
}
div.estimate_info_box div.estimate_info:last-of-type {
    flex-direction: column;
    align-items: center;
    border-bottom: none;
}
div.estimate_info_box div.estimate_info em {
    font-size: 12px;
    font-style: initial;
}
div.estimate_info_box div.estimate_info b#estimateName {
    font-size: 20px;
    margin-right: 5px;
}
div.estimate_info_box div.estimate_shout {
    display: flex;
    border-bottom: 1px solid #000;
    position: relative;
}
div.estimate_info_box div.estimate_shout:last-of-type {
    border-bottom: none;
}
div.estimate_info_box div.estimate_shout span:first-of-type {
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30%;
    border-right: 1px solid #000;
    white-space: nowrap;
}
div.estimate_info_box div.estimate_shout span:last-of-type {
    padding: 10px;
    display: flex;
    width: 70%;
}
div.estimate_info_box div.estimate_shout img {
    position: absolute;
    left: 40%;
    top: -10px;
}
div.estimate_body_text {
    display: flex;
    justify-content: space-between;
    margin: 20px 0;
}
div.estimate_body_text b {
    text-decoration: underline;
}
div.estimate_body table {
    width: 100%;
    margin-bottom: 50px;
}
div.estimate_body table,
div.estimate_body table th,
div.estimate_body table td {
    border: 1px solid #000;
    border-collapse: collapse;
}
div.estimate_body table th,
div.estimate_body table td {
    padding: 15px;
    text-align: center;
}
b.estimate_thanks {
    text-align: right;
    line-height: 25px;
}
div.estimate_button {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}
div.estimate_button button {
    padding: 10px 20px;
    border-radius: 10px;
    border: 1px solid #ccc;
}
@media print {
    div.estimate_layer_content {
        overflow-y: auto !important;
        height: auto !important;
    }
    div#estimateLayer {
        top: 0;
        transform: translateX(-50%);
    }
    button#printButton {
        display: none;
    }
}
@media screen and (max-width: 1280px) {
    div.showcase_column:hover {
        p.showcase_column-content_paragraph {
            max-height: 150px;
        }
    }
    section {
        max-width: unset;
        padding: 0 64px;
    }
    section.section-one {
        padding: 0;
    }
    div#portfolio_title p {
        font-size: 2rem;
    }
    div.footer_nav {
        max-width: unset;
        padding: 0 64px;
    }
    div.sub_mypage {
        height: auto;
        flex-direction: column;
        padding: 100px 20px 20px;
    }
    div.sub_mypage div.icon_link_box {
        flex-direction: row;
        justify-content: center;
        padding: 0;
    }
    div.sub_mypage div.sub_mypage_content {
        width: 100%;
    }
    div.dash_content {
        height: auto;
        flex-direction: column;
        align-items: center;
    }
    div#mr_page div.dash_content {
        height: auto;
        flex-direction: column-reverse;
        align-items: center;
    }
    div.dash_content div.dash_items,
    div#mr_page div.dash_items,
    div#document_page div.dash_content div.dash_items {
        width: 100%;
    }
    div.sub_mypage_content div.mypage_link_list {
        justify-content: center;
    }
    div#mr_page div.maintenance_box {
        height: auto;
        max-height: none;
        overflow: visible;
    }
    div#mr_page div.paging,
    div#notice_page table.paging {
        position: relative;
        bottom: 0;
        margin-top: 40px;
    }
    div#mr_page div.searchbar,
    div#notice_page div.searchbar {
        position: relative;
        bottom: 0;
    }
    div#mr_page div.preview_box {
        width: 100%;
        padding: 0;
        row-gap: 10px;
    }
    div#mr_page div.pre_reply {
        padding: 10px;
        border-radius: 10px;
    }
    div#mr_page div.pre_file,
    div#mr_page div.admin_pre_file {
        justify-content: start;
        margin-top: 10px;
    }
    table.writebox tbody {
        flex-direction: column;
    }
    table.writebox tbody tr.writebox_info,
    table.writebox tbody tr.writebox_upload {
        width: 100%;
    }
    div#member_page div.input_style_title span {
        word-break: keep-all;
    }
    div#member_page div.input_style_title {
        display: flex;
        align-items: center;
    }
    button#dashboardButton {
        display: none;
    }
}
@media screen and (max-width: 1024px) {
    main {
        padding-top: 100px;
    }
    section.section-one {
        flex-wrap: wrap;
        height: unset;
    }
    div.showcase_column {
        width: 50%;
        height: 300px;
    }
    div.showcase_column:hover {
        width: 50%;
    }
    div.showcase_column_graphic svg {
        height: unset;
    }
    div#mr_page div.pre_title > p {
        font-size: 18px;
    }
    div#mr_page div.pre_title {
        align-items: flex-start;
        gap: 10px;
    }
    div#mr_page div.pre_title ul.pre_info {
        gap: 2px;
        flex-direction: column;
        align-items: flex-start;
    }
    div#document_page div.dash_doc {
        overflow-x: scroll;
    }
    div.doc_table {
        width: 1280px;
    }
    section.contact_form form[name="contact_form"] {
        flex-direction: column;
    }
    div.contact_form_content {
        width: 100%;
    }
    ul.contact_form_checkbox {
        gap: 10px;
    }
    div.contact_form_input label.label_file {
        flex-wrap: wrap;
    }
    label.label_file small {
        text-align: left;
    }
}
@media screen and (max-width: 768px) {
    .header,
    section,
    div.footer_nav {
        padding: 0 32px;
    }
    div.main_text_img p.en_text {
        font-size: 5rem;
    }
    footer {
        padding-bottom: 20px;
    }
    h1.scroll_text {
        line-height: 2;
    }
    div.footer_address {
        width: 40%;
    }
    div.footer_location_map {
        width: 50%;
        height: 160px;
    }

    div.contact_title p {
        font-size: 3rem;
    }
    section#client_notice_page table.standard tbody tr {
        grid-template-columns: 100px 1fr;
    }
    section#client_notice_page table.standard tbody tr.notice td.date::before {
        left: -10px;
    }
    section#client_notice_page table.standard tbody tr td.l {
        overflow-x: hidden;
        width: 100%;
        gap: 8px;
    }
    section#client_notice_page table.standard tbody tr td.l a {
        width: calc(100% - 60px);
        text-overflow: ellipsis;
        overflow-x: hidden;
        white-space: nowrap;
    }
    div.dash_chat_box#chatBox {
        padding: 15px;
        gap: 10px;
        height: 100%;
    }
    div.dash_chat_box div.dash_chat_item.ques_chat {
        flex-direction: column;
        height: auto;
        gap: 3px;
    }
    div.dash_chat_box div.dash_chat_item.answer_chat {
        flex-direction: column;
        height: auto;
        align-items: flex-start;
        gap: 3px;
    }
    div.dash_chat_item.ques_chat div.chat_content,
    div.dash_chat_item.answer_chat div.chat_content {
        width: auto;
        padding: 5px 15px;
    }
    div.dash_chat_item span {
        font-size: 13px;
    }
    div.dash_chat_item div.chat_content p {
        font-size: 14px;
    }
    div#mr_page div.pre_note img {
        width: 100% !important;
        height: auto !important;
    }
    div#mr_page div.paging {
        width: 100%;
        flex-direction: column;
        margin-top: 20px;
        height: auto;
    }
    div#mr_page div.paging div.paging_box {
        gap: 4px;
        height: auto;
        font-size: 12px;
    }
    div#mr_page a.dBtn {
        white-space: nowrap;
    }
    div#mr_page div.paging div.paging_btn {
        position: relative;
        margin: 10px 0;
    }
    div#mr_page div.maintenance_box {
        padding: 20px 10px;
    }
    div#mr_page div.searchbar form,
    div#notice_page div.searchbar form {
        flex-wrap: wrap;
        gap: 4px;
    }
    div#mr_page table.standard thead tr th:nth-child(1),
    div#mr_page table.standard tbody tr td:nth-child(1),
    div#mr_page table.standard thead tr th:nth-child(3),
    div#mr_page table.standard tbody tr td:nth-child(3),
    div#mr_page table.standard thead tr th:nth-child(4),
    div#mr_page table.standard tbody tr td:nth-child(4) {
        display: none;
    }
    div#mr_page table.standard thead tr th:nth-child(2),
    div#mr_page table.standard tbody tr td:nth-child(2) {
        width: 100%;
    }
    div#mr_page div.pre_note {
        padding: 0;
    }
    div#mr_page div.pre_note p {
        font-size: 14px;
    }
    div#smart_editor2 {
        min-width: 100% !important;
    }
    div#product_page div.pay_yet_list div.pay_yet_box,
    div#product_page div.dash_service_box div.dash_service_content {
        grid-template-columns: repeat(2, 1fr);
    }
    div#member_page div.input_style_box {
        flex-wrap: wrap;
    }
    div#member_page div.input_style_content {
        width: calc(70% - 10px);
    }
    div#member_page div.input_style_box div.input_style {
        width: 100%;
    }
    div#member_page div.input_style_title span {
        font-size: 14px;
    }
    div#member_page div.input_addr input {
        width: 50%;
    }
    div#member_page div.input_style_title {
        padding: 5px;
    }
    div.pay_list {
        grid-template-columns: repeat(9, 1fr);
    }
    div.doc_table {
        width: 100%;
    }
    div#document_page div.doc_th:nth-of-type(2),
    div#document_page div.doc_td:nth-of-type(2),
    div#document_page div.doc_th:nth-of-type(3),
    div#document_page div.doc_td:nth-of-type(3),
    div#document_page div.doc_th:nth-of-type(4),
    div#document_page div.doc_td:nth-of-type(4),
    div#document_page div.doc_th:nth-of-type(5),
    div#document_page div.doc_td:nth-of-type(5),
    div#document_page div.doc_th:nth-of-type(7),
    div#document_page div.doc_td:nth-of-type(7) {
        display: none;
    }
    .nav__links,
    .nav__locations {
        padding: 0 0 0 15px;
    }
    div#notice_page table.standard tbody tr th:nth-of-type(1),
    div#notice_page table.standard tbody tr td:nth-of-type(1),
    div#notice_page table.standard tbody tr th:nth-of-type(3),
    div#notice_page table.standard tbody tr td:nth-of-type(3),
    div#notice_page table.standard tbody tr th:nth-of-type(4),
    div#notice_page table.standard tbody tr td:nth-of-type(4),
    div#notice_page table.standard tbody tr th:nth-of-type(5),
    div#notice_page table.standard tbody tr td:nth-of-type(5) {
        display: none;
    }
    div.blog_viewhead ul.data {
        flex-direction: column;
        gap: 5px;
    }
    div.blog_viewhead div.title {
        font-size: 26px;
        margin-bottom: 15px;
    }
    div.contact_half {
        flex-wrap: wrap;
    }
    label.label_file small {
        word-break: keep-all;
        flex: auto;
    }
    div.document_layer_content {
        height: 500px;
    }
    div.document_btn {
        flex-wrap: wrap;
        justify-content: center;
    }
    div.document_btn p {
        padding: 5px 15px;
        font-size: 14px;
    }
    div.sub_mypage div.icon_link_box a {
        width: 55px;
    }
    div.sub_mypage div.icon_link_box a svg {
        width: 30px;
    }
    div.sub_mypage div.icon_link_box a p {
        font-size: 13px;
    }
    div#mr_page div.searchbar form div.comm_search input {
        display: none;
    }
    div.dash_title div.rolling_news {
        display: none;
    }
}
@media screen and (max-width: 680px) {
    div.main_text_img p.en_text {
        font-size: 4rem;
    }
    div#portfolio_title p {
        font-size: 1.5rem;
    }
}
@media screen and (max-width: 560px) {
    div.main_text_img p.en_text {
        font-size: 3rem;
    }
    div#portfolio_title p {
        font-size: 1rem;
    }
}
@media screen and (max-width: 480px) {
    div.dash_use_box div.dash_use_info {
        width: 100%;
    }
    div.dash_use_state_all {
        flex-wrap: wrap;
        justify-content: space-around;
        gap: 9px;
    }
    div.dash_use_state {
        gap: 3px;
    }
    div.sub_mypage div.icon_link_box {
        flex-wrap: wrap;
        gap: 5px;
    }
    div.dash_use_state p.state_text {
        padding: 3px 7px;
        font-size: 12px;
    }
    div.dash_title {
        flex-direction: column;
        height: auto;
    }
    div.dash_title a.dash_register_btn {
        margin-top: 10px;
        padding: 5px 15px;
    }
    div.dash_notice_content div.table_title span:last-of-type,
    div.dash_notice_content div.table_item span:nth-of-type(2) {
        display: none;
    }
    div.dash_notice_content div.table_title span:nth-of-type(2),
    div.dash_notice_content div.table_item a {
        width: 80%;
    }
    div.sub_mypage div.sub_mypage_content div.sub_mypage_foot p {
        text-align: center;
    }
    div#product_page div.pay_yet_list div.pay_yet_box,
    div#product_page div.dash_service_box div.dash_service_content {
        grid-template-columns: repeat(1, 1fr);
    }
    div.dash_title b,
    div.dash_title span {
        font-size: 16px;
    }
    div.paylayer_content div.pay_layer_mid b {
        font-size: 20px;
    }
    div.pay_content_box div.pay_content_title {
        width: 35%;
    }
    div.pay_content_title span {
        font-size: 14px;
    }
    div.pay_content_box div.pay_content_content {
        width: 65%;
    }
    div.pay_content_box div.pay_content_content span {
        font-size: 14px;
    }
    /* div.pay_items {
        border-radius: 10px;
    } */
    div.pay_list {
        grid-template-columns: repeat(6, 1fr);
    }
    .nav__links {
        font-size: 60px;
    }
    .nav__links a:not(:last-child) {
        margin-bottom: 20px;
    }
}
@media screen and (max-width: 430px) {
    p {
        font-size: 16px;
    }

    .header,
    section,
    div.footer_nav {
        padding: 0 20px;
    }

    .header h1 {
        width: 120px;
    }
    .header_menu {
        gap: 12px;
    }
    .header_login {
        gap: 16px;
    }
    div.header_login button {
        font-size: 14px;
    }
    #MenuButton {
        width: 32px;
    }
    #MenuButton span {
        width: 32px;
    }

    section {
        margin: 60px auto;
    }

    section.section-one {
        flex-wrap: nowrap;
        flex-direction: column;
    }
    div.showcase_column {
        width: 100%;
        height: 200px;
        padding: 1rem;
    }
    div.showcase_column-title {
        display: none;
    }
    div.showcase_columng-content {
        gap: 8px;
    }
    p.showcase_column-content_paragraph {
        font-size: 16px;
    }
    div.showcase_column:hover {
        width: 100%;
        p.showcase_column-content_paragraph {
            max-height: 180px;
        }
    }

    div.main_text_img p.en_text {
        font-size: 2rem;
    }
    a.works_img,
    div#portfolio_title {
        flex: 1 0 46%;
    }
    h1.scroll_text {
        font-size: 6vw;
    }
    div.footer_nav {
        margin-top: 20px;
    }
    div.footer_location {
        flex-direction: column;
        row-gap: 12px;
    }
    div.footer_address {
        width: 100%;
    }
    div.footer_address p.address_name {
        font-size: 20px;
        margin-bottom: 8px;
    }
    div.footer_address p {
        font-size: 16px;
    }
    div.footer_location_map {
        width: 100%;
        margin-top: 8px;
    }

    /* notice page */
    section#client_notice_page table.standard tbody tr {
        grid-template-columns: 80px 1fr;
        padding: 12px 8px;
    }
    section#client_notice_page table.standard tbody tr.notice td.date::before {
        width: 18px;
        height: 18px;
        top: -6px;
        left: -4px;
    }
    section#client_notice_page table.standard tbody tr td.date p.date_y_m {
        font-size: 14px;
    }
    section#client_notice_page table.standard tbody tr td.date p.date_day {
        font-size: 24px;
    }
    section#client_notice_page table.standard tbody tr td.l a {
        font-size: 20px;
    }
    section#client_notice_page table.standard tbody tr span.notice_btn {
        display: none;
    }
    section#client_notice_page.contact_form form[name="SearchForm"] {
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    /* porfolio page */
    section#client_portfolio_page div.gallerythird {
        grid-template-columns: 45% 45%;
    }
    div#notice_page div.searchbar form input {
        width: 85%;
    }
}