@charset "utf-8";

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.css');
@import url('https://cdn.jsdelivr.net/gh/sun-typeface/SUIT@2/fonts/static/woff2/SUIT.css');
@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');

ul {
    padding-left: 0 !important;
    margin-bottom: 0 !important;
}

:is(a, h1, h2, h3, h4, h5, h6, td, th, li, span, strong, dl, dd, div, section, button) {
    font-family: 'pretendard', sans-serif !important;

}


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

a:hover {
    color: #333 !important;
}

p {
    margin-bottom: 0;
}


.suit {
    font-family: "SUIT", sans-serif !important;
    font-optical-sizing: auto;
    font-style: normal;
}

.lora {
    font-family: "Lora", sans-serif !important;
    font-optical-sizing: auto;
    font-style: normal;
}

/* layout */
#container {
    float:none !important;
    width:100% !important;
    margin: 0 !important;
}

#hd_pop, #hd_wrapper, #tnb .inner, #gnb .gnb_wrap, #container_wr, #ft_wr {
    width:100% !important;
}

@media (min-width:1400px) {
    .container {
        max-width:1300px !important;
    }
}


.sub-header {
    .header-pc-box {
        position:unset;
        background:#fff;

        .normal-img {
            display:none;
        }

        .active-img {
            display:inline-block;
        }

        .first-nav {
            padding: 20px 60px;

            #navbarNav {
                & ul {
                    column-gap: 80px;
                    & li {
                        & a {
                            font-size:20px;
                            font-weight: 700;
                            color:#000 !important;
                        }
                    }
                }
            }

            #navbarNav1 {

                .navbar-nav {
                    align-items:center;
                    column-gap:15px;
                }
                .search-button {
                    display:flex;
                    align-items:center;
                    column-gap:10px;
                    & span {
                        color:#000;
                        font-size:16px;
                        font-weight:700;

                    }
                }

                .login-button {
                    background:#006DEE;
                    color:#fff;
                    border-radius:500px;
                    padding:20px 20px;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    font-size:16px;
                    font-weight:500;
                }

                .service-button {
                    border-radius:500px;
                    border:solid 1px #000;
                    color:#000;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    font-size:16px;
                    font-weight:500;
                    padding:20px 15px;
                }
            }
        }
    }
}


header {
    position: relative;

    .container-head {
        max-width: 1800px !important;
    }

    .header-pc-box {
        position: absolute;
        width: 100%;
        z-index: 2;
        transition: background-color 0.3s ease;

        .active-img {
            display:none;
        }

        .first-nav {
            padding: 20px 60px;

            #navbarNav {
                & ul {
                    column-gap: 70px;



                    & li {
                        & a {
                            font-size:20px;
                            font-weight: 700;
                            color:#fff !important;
                        }
                    }
                }
            }

            #navbarNav1 {

                .navbar-nav {
                    align-items:center;
                    column-gap:15px;
                }
                .search-button {
                    display:flex;
                    align-items:center;
                    column-gap:10px;
                    & span {
                        color:#fff;
                        font-size:16px;
                        font-weight:700;

                    }
                }

                .login-button {
                    background:#006DEE;
                    color:#fff;
                    border-radius:500px;
                    padding:20px 20px;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    font-size:16px;
                    font-weight:500;
                }

                .service-button {
                    border-radius:500px;
                    border:solid 1px #fff;
                    color:#fff;
                    display:flex;
                    align-items:center;
                    justify-content:center;
                    font-size:16px;
                    font-weight:500;
                    padding:20px 15px;
                }
            }
        }
    }

    .header-wrap.active {
        .header-pc-box {
            background-color: #fff;
            position:fixed;
            width: 100%;
            top: 0;
            box-shadow:0 0.5rem 1rem rgba(0,0,0,.15);
            border-bottom:0;
            z-index: 10;
            .normal-img {
                display: none;
            }

            .active-img {
                display: inline-block;
            }

            .first-nav {
                padding: 20px 60px;

                #navbarNav {
                    & ul {
                        column-gap: 80px;
                        & li {
                            & a {
                                font-size:20px;
                                font-weight: 700;
                                color:#000 !important;
                            }
                        }
                    }
                }

                #navbarNav1 {

                    .navbar-nav {
                        align-items:center;
                        column-gap:15px;
                    }
                    .search-button {
                        display:flex;
                        align-items:center;
                        column-gap:10px;
                        & span {
                            color:#000;
                            font-size:16px;
                            font-weight:700;

                        }
                    }

                    .login-button {
                        background:#006DEE;
                        color:#fff;
                        border-radius:500px;
                        padding:20px 20px;
                        display:flex;
                        align-items:center;
                        justify-content:center;
                        font-size:16px;
                        font-weight:500;
                    }

                    .service-button {
                        border-radius:500px;
                        border:solid 1px #000;
                        color:#000;
                        display:flex;
                        align-items:center;
                        justify-content:center;
                        font-size:16px;
                        font-weight:500;
                        padding:20px 15px;
                    }
                }
            }
        }
    }
}


footer {
    padding: 56px 0;
    background: #000;
    .footer-top {
        padding-bottom: 37px;
        margin-bottom: 40px;
        border-bottom: solid 1px #fff;

        .row {
            align-items: end;
        }
        .footer-info {
            & strong {
                color:#fff;
                font-size:16px;
                font-weight: 700;
                line-height: 30px;
            }

            & span {
                color:#fff;
                font-size:16px;
                font-weight: 400;
                line-height: 30px;
            }

            .left-strong {
                margin-left:20px;
            }

            .icon-span {
                & img {
                    position: relative;
                    top:-8px;
                }
            }
        }

        .custmer-info {
            text-align: right;
            .num-box {
                display:flex;
                align-items: center;
                column-gap: 10px;
                margin-bottom: 25px;
                justify-content: end;

                & span {
                    font-size:30px;
                    font-weight: 700;
                    line-height: 26px;
                    color:#fff;
                }
            }

            .info-box {
                & p {
                    font-size:20px;
                    font-weight: 700;
                    line-height: 33px;
                    color:#fff;
                }
            }
        }
    }

    .footer-bottom {
        & p {
            color:#fff;
            font-size:18px;
            font-weight: 400;
            line-height: 100%;
        }

        .row {
            align-items: end;
        }

        & ul {
            & li {
                text-align: right;
                & strong {
                    color:#fff;
                    font-size:16px;
                    font-weight: 700;
                    line-height: 30px;
                }

                & span {
                    color:#fff;
                    font-size:16px;
                    font-weight: 400;
                    line-height: 30px;
                }
            }
        }
    }
}



.common-login-box {

    height: 100vh;
    background-size: cover;
    display:flex;
    justify-content:center;
    align-items:center;


    .common-login-wrap {
        width:470px;
        background: #fff;
        padding: 35px;

        .logo-box {
            margin-bottom: 35px;
            text-align: center;
        }

        .login-form-box {
            & input {
                border-radius:8px;
                height:48px;
                border:solid 1px #d9d9d9;
                font-size:14px;
                font-weight:400;
            }
            .id-input {
                border-bottom-left-radius:0;
                border-bottom-right-radius:0;
            }
            .password-input {
                border-top:0;
                border-top-left-radius:0;
                border-top-right-radius:0;
            }
        }
        .login_if_auto {
            margin-top:15px;

            & input[type="checkbox"]:checked + label span {
                background:url('/theme/basic/img/sub/btn_select.svg') no-repeat;
                border:0;
            }

            & label {
                color:#757575;
                font-size:14px;
                font-weight:400;

                & span {
                    width:20px;
                    height:20px;
                    border-radius:6px !important;
                    display:inline-block;
                    margin-right:8px;
                    position:relative;


                }
            }
        }

        .submit-box {
            margin-top:20px;
            text-align:center;

            & button {
                width:100%;
                height:50px;
                border-radius:8px;
                font-size:16px;
                font-weight:700;
                color:#fff;
                background:#000;
            }
        }
    }
}

.alert-toast {
    --bs-toast-max-width:450px;
    min-height:80px;
    font-size:19px;
}